/* WorkCo — security & compliance page.
   Loads on top of chain.css, which owns the tokens, nav, buttons and footer.
   Everything here is light on purpose: this page is read by someone deciding
   whether we are a risk, and a dark slab reads as marketing. */

/* ── hero: light, no photograph, nothing to look at but the sentence ────── */
.shero{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
  border-bottom:1px solid var(--bd);padding:clamp(96px,12vw,150px) 0 clamp(46px,6vw,74px)}
.shero__inner{max-width:820px}
.shero__h{font-size:clamp(34px,5.4vw,60px);font-weight:700;line-height:1.14;letter-spacing:-.025em;
  color:var(--tx);margin:14px 0 22px}
.shero__h em{font-style:normal;color:var(--teal)}
.shero__sub{font-size:clamp(17px,1.9vw,20px);line-height:1.72;color:var(--tx-2);max-width:66ch}
.shero__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.shero__chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--bd);
  border-radius:999px;padding:9px 16px;font-size:13.5px;color:var(--tx-2);box-shadow:var(--shadow-sm)}
.shero__chip svg{color:var(--teal);flex-shrink:0}

/* ── the permission matrix: the answer to the first question they ask ───── */
.matrix{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--bd);border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow-sm)}
.matrix table{width:100%;border-collapse:collapse;min-width:660px}
.matrix th,.matrix td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--bd);
  font-size:14.5px;line-height:1.5;vertical-align:middle}
.matrix thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-3);background:var(--paper-2);white-space:nowrap}
.matrix thead th:first-child{width:38%}
.matrix tbody tr:last-child td{border-bottom:0}
.matrix td:not(:first-child){text-align:center;width:15.5%}
.matrix .row-h{color:var(--tx);font-weight:500}
.yes{color:var(--teal)}
.no{color:#CBD5E1;font-size:17px;line-height:1}
.cond{color:var(--tx-3);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.matrix__note{font-size:14px;color:var(--tx-3);line-height:1.7;margin-top:16px;max-width:74ch}

/* ── plain fact cards ───────────────────────────────────────────────────── */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px;margin-top:8px}
.fact{background:#fff;border:1px solid var(--bd);border-radius:var(--r-md);padding:28px 26px}
.fact h3{font-size:17px;font-weight:700;color:var(--tx);margin-bottom:10px;line-height:1.4}
.fact p{font-size:15px;line-height:1.72;color:var(--tx-2)}
.fact ul{list-style:none;margin-top:12px;display:grid;gap:9px}
.fact li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.6;color:var(--tx-2)}
.fact li svg{flex-shrink:0;margin-top:5px;color:var(--teal)}

/* ── the one claim worth its own block ──────────────────────────────────── */
.oneclaim{background:#fff;border:1px solid var(--bd);border-left:3px solid var(--teal);
  border-radius:var(--r-sm);padding:clamp(26px,3.4vw,40px);box-shadow:var(--shadow-sm)}
.oneclaim h3{font-size:clamp(21px,2.6vw,27px);font-weight:700;color:var(--tx);line-height:1.36;margin-bottom:14px}
.oneclaim p{font-size:16.5px;line-height:1.78;color:var(--tx-2);max-width:70ch}
.oneclaim p + p{margin-top:14px}

/* ── the honest section. Bordered, not hidden, not apologetic. ──────────── */
.open{display:grid;gap:0;border:1px solid var(--bd);border-radius:var(--r-md);
  overflow:hidden;background:#fff}
.open__row{display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:clamp(14px,3vw,34px);
  padding:22px 26px;border-bottom:1px solid var(--bd)}
.open__row:last-child{border-bottom:0}
.open__q{font-size:15.5px;font-weight:600;color:var(--tx);line-height:1.5}
.open__a{font-size:15px;line-height:1.72;color:var(--tx-2)}
.tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-bottom:8px}
.tag--have{background:rgba(13,148,136,.1);color:var(--teal-deep)}
.tag--not{background:#F1F5F9;color:var(--tx-3)}
.tag--soon{background:rgba(13,148,136,.10);color:var(--teal-deep)}

@media(max-width:760px){
  .open__row{grid-template-columns:1fr;gap:8px}
  .matrix thead th:first-child{width:auto}
}