/* ==========================================================================
   Page: home
   Spacing discipline — every gap is a token, nothing is hand-tuned.
   ========================================================================== */

/* ---- Layout primitives -------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{max-width:860px}

.section{padding-block:var(--section-y)}
.section--alt{background:var(--cream-2)}

/* ---- Two-column section header ------------------------------------------
   Heading left, supporting copy right. Stops headlines running past a
   comfortable measure while leaving the right half empty.
   ------------------------------------------------------------------------- */
/* ---- Section header -----------------------------------------------------
   Full-bleed container, constrained children. The right edge carries a
   ghosted section numeral so the space reads as claimed rather than left
   over. Headings run wider than before for the same reason.
   ------------------------------------------------------------------------- */
main{counter-reset:sec}
.section{counter-increment:sec}

.sec-head{
  position:relative;
  max-width:none;
  padding-right:clamp(0px,10vw,168px);
  margin-bottom:clamp(38px,4.6vh,58px);
}
.sec-head h1,
.sec-head h2{
  max-width:26ch;
  margin:18px 0 0;
}
.sec-head .lead{
  max-width:66ch;
  margin:24px 0 0;
}

/* Index — a large ghosted numeral claims the right edge. Editorial
   convention: the number is structure, not ornament, so it sits behind
   the content rather than competing with it. */
.sec-head::after{
  content:counter(sec,decimal-leading-zero);
  position:absolute;
  top:-8px;
  right:-4px;
  font-family:var(--font-display);
  font-size:clamp(78px,9.5vw,148px);
  line-height:1;
  color:var(--ink);
  opacity:0;
  transform:translateY(16px);
  transition:opacity 1.2s var(--e-out) .15s, transform 1.2s var(--e-out) .15s;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.sec-head.is-lit::after{opacity:.05;transform:none}

/* Hairline anchors the numeral to the top of the block */
.sec-head::before{
  content:'';
  position:absolute;
  top:8px;
  right:0;
  width:clamp(40px,7vw,110px);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line-gold));
  transform:scaleX(0);
  transform-origin:right;
  transition:transform 1.1s var(--e-out) .3s;
}
.sec-head.is-lit::before{transform:scaleX(1)}

.sec-head > *{position:relative;z-index:1}

.section--void .sec-head::after{color:#fff}
.section--void .sec-head.is-lit::after{opacity:.055}
.section--void .sec-head::before{
  background:linear-gradient(90deg,transparent,rgba(224,154,71,.45));
}

/* Centred variant keeps its own rhythm */
.sec-head--stack{
  text-align:center;
  max-width:70ch;
  margin-inline:auto;
  padding-right:0;
  margin-bottom:clamp(40px,5vh,64px);
}
.sec-head--stack .eyebrow{justify-content:center}
.sec-head--stack h1,
.sec-head--stack h2{max-width:none;margin-inline:auto}
.sec-head--stack .lead{margin-inline:auto}
.sec-head--stack::after,
.sec-head--stack::before{display:none}

@media(max-width:900px){
  .sec-head{padding-right:0}
  .sec-head h1,.sec-head h2{max-width:20ch}
  .sec-head::after,
  .sec-head::before{display:none}
}

/* ---- Lone header sections -----------------------------------------------
   On sub-pages the intro header is the only child of its section, so the
   section's bottom padding stacks on top of the header's own margin. The
   result is a large gap that reads as a missing element.
   ------------------------------------------------------------------------- */
.section:has(> .wrap > .sec-head:only-child),
.section:has(> .wrap--narrow > .sec-head:only-child){
  padding-bottom:clamp(20px,2.4vh,32px);
}
.section:has(> .wrap > .sec-head:only-child) .sec-head,
.section:has(> .wrap--narrow > .sec-head:only-child) .sec-head{
  margin-bottom:0;
}

@supports not selector(:has(*)){
  .section > .wrap > .sec-head:only-child{margin-bottom:0}
}
.sec-foot{margin-top:clamp(36px,4.5vh,56px)}

/* ---- Grids --------------------------------------------------------------
   Open grids have real gaps. The 1px-gap grid is for dense data only —
   using it for cards makes them look welded together.
   ------------------------------------------------------------------------- */
.grid-3--open{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,34px);
}
.grid-2--open{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,2.4vw,34px);
}
@media(max-width:1000px){ .grid-3--open{grid-template-columns:repeat(2,1fr)} }
@media(max-width:700px){ .grid-3--open,.grid-2--open{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════ CAUSE ═══ */

.cause{
  position:relative;
  background:var(--cream);
  border:1px solid var(--line);
  padding:clamp(28px,2.8vw,40px);
  display:flex;
  flex-direction:column;
  transition:border-color var(--t-base) var(--e),
             transform var(--t-base) var(--e),
             box-shadow var(--t-base) var(--e);
}
.section--alt .cause{background:var(--white)}
.cause:hover{
  border-color:var(--line-gold);
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.cause__tag{
  position:absolute;
  top:clamp(20px,2vw,28px);
  right:clamp(20px,2vw,28px);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--line-gold);
  padding:3px 8px;
  opacity:.7;
}
.cause__label{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:clamp(20px,2.4vw,30px);
}
.cause__title{
  font-family:var(--font-display);
  font-size:clamp(19px,1.5vw,23px);
  line-height:var(--lh-snug);
  color:var(--ink);
  max-width:17ch;
  margin-bottom:16px;
}
.cause__body{
  font-size:14px;
  line-height:1.78;
  color:var(--muted);
  margin-bottom:auto;     /* pushes answer lines into alignment */
}
.cause__answer{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:13.5px;
  line-height:1.72;
  color:var(--ink-2);
}
.cause__answer strong{color:var(--gold);font-weight:600}

/* ---- Stat band ----------------------------------------------------------
   Separated from the cards above. Welded to them they read as a fourth row.
   ------------------------------------------------------------------------- */
.statband{
  margin-top:clamp(56px,7vh,88px);
  padding-top:clamp(40px,5vh,60px);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,4vw,64px);
}
@media(max-width:800px){ .statband{grid-template-columns:1fr;gap:32px} }

/* ══════════════════════════════════════════════════════ NOTE ═══ */

.note{
  margin-top:clamp(32px,4vh,48px);
  padding:clamp(22px,2.4vw,30px) clamp(24px,2.6vw,34px);
  background:var(--gold-wash);
  border-left:2px solid var(--gold);
  font-size:14.5px;
  line-height:1.82;
  color:var(--ink-2);
  max-width:92ch;
}
.note strong{color:var(--ink);font-weight:600}
.note--plain{
  background:none;
  border-left-color:var(--line-strong);
  margin-top:20px;
}

/* ══════════════════════════════════════════════════ CEILING ═══ */

.ceiling{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--line);
  background:var(--white);
}
.ceiling thead th{
  text-align:left;
  padding:16px clamp(16px,1.6vw,24px);
  background:var(--ink);
  color:var(--white);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  font-weight:500;
}
.ceiling tbody td{
  padding:16px clamp(16px,1.6vw,24px);
  border-top:1px solid var(--line);
  font-size:14px;
  color:var(--ink-2);
  vertical-align:middle;
}
.ceiling tbody tr:nth-child(even){background:var(--cream)}
.ceiling tbody td.ceiling__n{
  font-family:var(--font-display);
  font-size:clamp(18px,1.6vw,23px);
  color:var(--ink);
  white-space:nowrap;
  width:1%;
}
/* The 50% row carries the most weight — mark it. */
.ceiling__mark td{
  background:var(--gold-wash) !important;
  border-top:1px solid var(--line-gold);
  border-bottom:1px solid var(--line-gold);
}
.ceiling tbody tr.ceiling__mark td.ceiling__n{color:var(--gold-deep)}
.ceiling__mark td:first-child{
  box-shadow:inset 2px 0 0 var(--gold);
  font-weight:500;
}

@media(max-width:720px){
  .ceiling thead{display:none}
  .ceiling tbody tr{display:block;border-top:1px solid var(--line);padding:14px 0}
  .ceiling tbody td{display:block;border:0;padding:3px clamp(16px,4vw,24px)}
  .ceiling tbody td.ceiling__n{font-size:22px}
  .ceiling__mark td:first-child{box-shadow:none}
}

/* ══════════════════════════════════════════════ INDUSTRIES ═══ */

.ind-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,28px);
}
@media(max-width:1000px){ .ind-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .ind-grid{grid-template-columns:1fr} }

.ind{
  display:block;
  padding:clamp(24px,2.4vw,32px);
  border:1px solid var(--line);
  background:var(--cream);
  text-decoration:none;
  transition:border-color var(--t-base) var(--e),
             transform var(--t-base) var(--e);
}
.section--alt .ind{background:var(--white)}
.ind:hover{border-color:var(--line-gold);transform:translateY(-2px)}
.ind h3{
  font-family:var(--font-display);
  font-size:clamp(17px,1.4vw,21px);
  color:var(--ink);
  margin-bottom:10px;
  transition:color var(--t-fast) var(--e);
}
.ind:hover h3{color:var(--gold)}
.ind p{
  font-size:13.5px;
  line-height:1.74;
  color:var(--muted);
  margin:0;
}

/* ══════════════════════════════════════════════════════ CTA ═══ */

.cta{
  padding-block:clamp(72px,10vh,124px);
  text-align:center;
}
.cta__title{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--ink);
  max-width:20ch;
  margin-inline:auto;
}
.cta__sub{
  margin:26px auto 0;
  max-width:62ch;
  font-size:var(--fs-lead);
  line-height:var(--lh-body);
  color:var(--muted);
}
.cta__actions{
  margin-top:38px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
@media(max-width:560px){
  .cta__actions{flex-direction:column;align-items:stretch}
  .cta__actions .btn{justify-content:center}
}

/* ══════════════════════════════════════════════════ UTILITIES ═══ */

.eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--gold);
  margin:0;
}
.eyebrow::before{
  content:'';
  width:28px;height:1px;
  background:var(--gold);
  flex-shrink:0;
}
.sec-head--stack .eyebrow::before{display:none}

.lead{
  font-size:var(--fs-lead);
  line-height:var(--lh-body);
  color:var(--muted);
}
.accent{color:var(--gold);font-style:italic}

.link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid var(--line-gold);
  transition:color var(--t-fast) var(--e),
             border-color var(--t-fast) var(--e);
}
.link span{transition:transform var(--t-base) var(--e)}
.link:hover{color:var(--gold);border-bottom-color:var(--gold)}
.link:hover span{transform:translateX(4px)}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  padding:12px 20px;
  background:var(--ink);
  color:#fff;
  z-index:var(--z-modal);
}
.skip:focus{left:12px;top:12px}


/* ---- Hero additions — existing .hero owns layout, these are deltas ------ */
.stage__v .stage__to{
  font-family:var(--font-body);
  font-size:.5em;
  color:var(--gold);
  margin-inline:16px;
  vertical-align:middle;
}
.hero__sub{max-width:56ch}

/* ---- Row output line — used in the How It Works sequence ---------------- */
.row__out{
  display:block;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  line-height:1.8;
}

/* ---- Stat band — separated from the card grid above -------------------- */
.statband{
  margin-top:clamp(56px,7vh,88px);
  padding-top:clamp(40px,5vh,60px);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,4vw,64px);
}
@media(max-width:800px){ .statband{grid-template-columns:1fr;gap:28px} }
.statband .stat{background:none;padding:0}

/* ---- Row group — components.css owns .row, this is just the container --- */
.rows{margin-top:clamp(8px,1vh,16px)}

/* ---- Code block — architecture diagrams, policy samples, ledger entries -- */
.codeblock{
  margin-top:clamp(32px,4vh,48px);
  background:var(--cream-3);
  border:1px solid var(--line);
  border-left:2px solid var(--gold);
  overflow:hidden;
}
.section--alt .codeblock{background:var(--white)}
.codeblock__label{
  padding:14px clamp(20px,2.2vw,28px);
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--gold);
  margin:0;
}
.codeblock__pre{
  padding:clamp(20px,2.4vw,30px);
  margin:0;
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.85;
  color:var(--ink-2);
  overflow-x:auto;
  white-space:pre;
  -webkit-overflow-scrolling:touch;
}
@media(max-width:640px){
  .codeblock__pre{font-size:10.5px;line-height:1.7;padding:16px}
}

/* Inline mono — selectors and identifiers inside prose */
.mono{
  font-family:var(--font-mono);
  font-size:.88em;
  color:var(--gold-deep);
  background:var(--gold-wash);
  padding:1px 5px;
}

/* ---- Prose block — long-form narrative passages ------------------------- */
.prose{max-width:70ch}
.prose p{
  font-size:var(--fs-lead);
  line-height:var(--lh-body);
  color:var(--muted);
  margin-bottom:20px;
}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:500}
/* ==========================================================================
   Console — the product interface, shown as a demonstration
   ========================================================================== */

.cons{
  background:var(--white);
  border:1px solid var(--line);
  margin-top:clamp(28px,3.5vh,44px);
  overflow:hidden;
}
.section--alt .cons{background:var(--white)}

.cons__bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px clamp(16px,2vw,24px);
  background:var(--ink);
  border-bottom:1px solid var(--line);
}
.cons__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
}
.cons__path{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.82);
  margin:0;
}
.cons__mode{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  white-space:nowrap;
}
.cons__body{padding:clamp(20px,2.6vw,32px)}

/* ---- Stat strip --------------------------------------------------------- */
.cons__stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2.4vw,32px);
  padding-bottom:clamp(22px,2.8vh,32px);
  margin-bottom:clamp(22px,2.8vh,32px);
  border-bottom:1px solid var(--line);
}
@media(max-width:820px){ .cons__stats{grid-template-columns:repeat(2,1fr);gap:22px} }
@media(max-width:440px){ .cons__stats{grid-template-columns:1fr} }

.cstat__n{
  font-family:var(--font-display);
  font-size:clamp(26px,2.8vw,36px);
  line-height:1;
  color:var(--ink);
  letter-spacing:-.01em;
}
.cstat__to{color:var(--gold);font-size:.62em;margin-inline:6px}
.cstat__u{font-size:.42em;color:var(--muted);font-family:var(--font-body);margin-left:2px}
.cstat__l{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:10px;
  line-height:1.7;
}

/* ---- Console table ------------------------------------------------------ */
.cons__table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.cons__table thead th{
  text-align:left;
  padding:10px 14px 10px 0;
  border-bottom:1px solid var(--line-strong);
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
  white-space:nowrap;
}
.cons__table tbody td{
  padding:13px 14px 13px 0;
  border-bottom:1px solid var(--line);
  color:var(--ink-2);
  vertical-align:middle;
}
.cons__table tbody tr:last-child td{border-bottom:0}
.cons__table .mono{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--ink);
  background:none;
  padding:0;
}
.cons__num{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink);
  text-align:right;
  width:1%;
  white-space:nowrap;
}
.cons__table--ledger{font-size:12px}
.cons__table--ledger .mono{font-size:11px}

@media(max-width:760px){
  .cons__body{overflow-x:auto}
  .cons__table{min-width:620px}
}

.cons__foot{
  margin-top:clamp(20px,2.4vh,28px);
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:13.5px;
  line-height:1.78;
  color:var(--muted);
  max-width:80ch;
}
.cons__foot em{color:var(--ink-2)}

/* ---- Pills -------------------------------------------------------------- */
.pill{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.11em;
  text-transform:uppercase;
  padding:3px 9px;
  white-space:nowrap;
}
.pill--ready{background:rgba(46,125,79,.1);color:#2E7D4F}
.pill--learn{background:var(--gold-wash);color:var(--gold-deep)}
.pill--warn{background:rgba(184,121,31,.14);color:#8A5A12}
.pill--crit{background:rgba(168,50,50,.1);color:#A83232}
.pill--sig{background:rgba(184,121,31,.14);color:#8A5A12}
.pill--allow{background:rgba(46,125,79,.1);color:#2E7D4F}
.pill--deny{background:rgba(168,50,50,.1);color:#A83232}
.pill--esc{background:var(--gold-wash);color:var(--gold-deep)}

/* ---- Composition path --------------------------------------------------- */
.cpath{
  padding:clamp(18px,2.2vw,26px) 0;
  border-bottom:1px solid var(--line);
}
.cpath:last-child{border-bottom:0;padding-bottom:0}
.cpath:first-child{padding-top:0}

.cpath__head{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}
.cpath__chain{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--ink);
  margin-bottom:10px;
  line-height:1.9;
}
.cpath__chain .mono{background:var(--cream-3);padding:3px 8px;color:var(--ink)}
.cpath__arrow{color:var(--gold);margin-inline:8px}
.cpath__meta{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.05em;
  color:var(--muted-2);
  margin-bottom:12px;
}
.cpath__fix{
  font-size:13.5px;
  line-height:1.78;
  color:var(--muted);
  padding-left:14px;
  border-left:2px solid var(--line-gold);
  max-width:78ch;
}

/* ==========================================================================
   Blog
   ========================================================================== */

.postlist{display:grid;gap:clamp(18px,2vw,26px)}

.postcard{
  display:block;
  padding:clamp(26px,3vw,38px);
  background:var(--white);
  border:1px solid var(--line);
  text-decoration:none;
  transition:border-color var(--t-base) var(--e),
             transform var(--t-base) var(--e);
}
.postcard:hover{border-color:var(--line-gold);transform:translateY(-2px)}

.postcard__meta,
.post__meta{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:16px;
}
.post__cat{color:var(--gold)}

.postcard__title{
  font-family:var(--font-display);
  font-size:clamp(21px,2vw,28px);
  line-height:var(--lh-snug);
  color:var(--ink);
  max-width:26ch;
  margin-bottom:14px;
  transition:color var(--t-fast) var(--e);
}
.postcard:hover .postcard__title{color:var(--gold)}
.postcard__desc{
  font-size:14.5px;
  line-height:1.78;
  color:var(--muted);
  max-width:70ch;
  margin-bottom:20px;
}
.postcard__go{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gold);
}
.postcard__go span{
  display:inline-block;
  margin-left:6px;
  transition:transform var(--t-base) var(--e);
}
.postcard:hover .postcard__go span{transform:translateX(4px)}

/* ---- Post page ---------------------------------------------------------- */
.post__head{padding-bottom:clamp(28px,3.5vh,44px);border-bottom:1px solid var(--line)}
.post__title{
  font-family:var(--font-display);
  font-size:var(--fs-h1);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--ink);
  max-width:22ch;
  margin-bottom:22px;
}
.post__lead{
  font-size:var(--fs-lead);
  line-height:var(--lh-body);
  color:var(--muted);
  max-width:60ch;
}
.post__link{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-gold);
  transition:color var(--t-fast) var(--e),border-color var(--t-fast) var(--e)}
.post__link:hover{color:var(--gold);border-bottom-color:var(--gold)}

.prose h2{
  font-family:var(--font-display);
  font-size:var(--fs-doc-h);
  line-height:var(--lh-snug);
  color:var(--ink);
  margin:clamp(36px,4.5vh,52px) 0 18px;
  max-width:24ch;
}
.prose em{font-style:italic;color:var(--ink-2)}

/* ==========================================================================
   Contact, auth, legal
   ========================================================================== */

.contact{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
@media(max-width:880px){ .contact{grid-template-columns:1fr;gap:40px} }

.field{margin-bottom:22px}
.field label{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:9px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 15px;
  background:var(--white);
  border:1px solid var(--line);
  font-family:var(--font-body);
  font-size:14.5px;
  color:var(--ink);
  transition:border-color var(--t-base) var(--e);
}
.field textarea{resize:vertical;line-height:1.7;min-height:120px}
.field input:focus,
.field select:focus,
.field textarea:focus{outline:none;border-color:var(--gold)}
.field input::placeholder,
.field textarea::placeholder{color:var(--muted-2)}

[data-form-status]{margin-top:14px;min-height:1.4em}
[data-form-status][data-state="pending"]{color:var(--muted)}
[data-form-status][data-state="success"]{color:#1f7a3d}
[data-form-status][data-state="error"]{color:#b3261e}
[data-form] button[disabled]{opacity:.6;cursor:wait}

.contact__aside{
  padding:clamp(26px,3vw,36px);
  background:var(--white);
  border:1px solid var(--line);
  border-left:2px solid var(--gold);
}
.contact__block{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.contact__block:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.contact__k{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:9px;
}
.contact__v{font-size:14px;line-height:1.78;color:var(--ink-2);margin:0}
.contact__v a{color:var(--ink);border-bottom:1px solid var(--line-gold);text-decoration:none}
.contact__v a:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* ---- Auth --------------------------------------------------------------- */
.auth{display:grid;place-items:center;min-height:70vh}
.auth__card{
  width:100%;
  max-width:440px;
  margin-inline:auto;
  padding:clamp(32px,4vw,48px);
  background:var(--white);
  border:1px solid var(--line);
}
.auth__title{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,34px);
  color:var(--ink);
  margin:14px 0 30px;
}
.auth__alt{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:13.5px;
  line-height:1.75;
  color:var(--muted);
}
.auth__note{
  max-width:440px;
  margin:26px auto 0;
  font-size:12.5px;
  line-height:1.78;
  color:var(--muted-2);
  text-align:center;
}

/* ---- Legal -------------------------------------------------------------- */
.legal__block{
  padding-bottom:clamp(28px,3.5vh,42px);
  margin-bottom:clamp(28px,3.5vh,42px);
  border-bottom:1px solid var(--line);
}
.legal__block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.legal__h{
  font-family:var(--font-display);
  font-size:clamp(19px,1.8vw,25px);
  color:var(--ink);
  margin-bottom:18px;
  max-width:26ch;
}
.legal__block .prose p{font-size:14.5px;margin-bottom:16px}

/* ---- Section variant ---------------------------------------------------- */
.section--tight{padding-block:clamp(32px,4vh,56px)}

/* ==========================================================================
   Team cards
   ========================================================================== */

.person{
  display:grid;
  grid-template-columns:clamp(140px,16vw,210px) 1fr;
  gap:clamp(24px,4vw,56px);
  padding-block:clamp(32px,4.5vh,52px);
  border-bottom:1px solid var(--line);
  align-items:start;
}
.person:first-of-type{padding-top:0}
.person:last-of-type{border-bottom:0}

.person__photo{
  aspect-ratio:1;
  overflow:hidden;
  background:var(--cream-3);
  border:1px solid var(--line);
}
.person__photo img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(100%);
  transition:filter var(--t-slow) var(--e),transform var(--t-slow) var(--e);
}
.person:hover .person__photo img{filter:grayscale(0);transform:scale(1.02)}

.person__role{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
}
.person__name{
  font-family:var(--font-display);
  font-size:clamp(22px,2.2vw,30px);
  color:var(--ink);
  margin-bottom:14px;
}
.person__bio{
  font-size:14.5px;
  line-height:1.8;
  color:var(--muted);
  max-width:64ch;
  margin-bottom:18px;
}
.person__owns{
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--ink-2);
  margin-bottom:16px;
}
.person__owns span{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-right:10px;
}

@media(max-width:640px){
  .person{grid-template-columns:1fr;gap:20px}
  .person__photo{max-width:180px}
}

/* Contact form column */
.contact__form{min-width:0}

.person__body{min-width:0}

/* Identifiers stay as written — typography.css uppercases mono by default */
.cons__table .mono,
.cpath__chain .mono,
.cons__table td.mono{text-transform:none}

/* Console tables scroll within their own frame on narrow screens
   rather than pushing the section wider than the viewport. */
.cons{max-width:100%}
.cons__body{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:760px){
  .cons__table{min-width:600px}
  .cpath__chain{word-break:break-word}
}

/* ══════════════════════════════════════════════════════════════════════════
   Research findings, measured band, request-access steps
   Added with the research page. Uses existing tokens only.
   ══════════════════════════════════════════════════════════════════════════ */
.findings{display:grid;gap:18px;margin-top:8px}
.findings--grid{grid-template-columns:repeat(5,1fr);margin-top:36px;gap:14px}
.findings--grid .finding{padding:20px 18px 20px 20px}
@media(max-width:1100px){
  .findings--grid{grid-template-columns:repeat(2,1fr)}
  .findings--grid .finding:last-child{grid-column:1/-1}
}
@media(max-width:640px){
  .findings--grid{grid-template-columns:1fr}
}
.finding{position:relative;padding:22px 22px 22px 24px;background:var(--surface,#fff);
  border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:4px}
.finding__num{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  color:var(--gold-deep);margin:0 0 10px}
.finding__title{font-family:var(--font-display);font-size:clamp(18px,1.6vw,21px);
  line-height:1.25;color:var(--ink);margin:0 0 10px}
.finding__body{font-size:15px;line-height:1.65;color:var(--ink-2);margin:0}
.finding__body a{color:var(--gold-deep);text-underline-offset:3px}
.finding__so{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.6;color:var(--ink)}
.findings:not(.findings--grid) .finding{padding:28px 30px 26px 32px}

.stat__src{margin:10px 0 0;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em}
.stat__src a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid var(--line-gold)}
.stat__src a:hover{border-bottom-color:var(--gold)}

.statband--proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.stat__num small{font-size:.42em;font-family:var(--font-mono);letter-spacing:.04em;
  color:var(--ink-2);margin-left:2px}

.steps-plain{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:14px;counter-reset:step}
.steps-plain li{position:relative;padding-left:34px;font-size:15px;line-height:1.6;color:var(--ink-2);counter-increment:step}
.steps-plain li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--gold-deep)}
.steps-plain strong{color:var(--ink)}

.person__photo--initials{display:grid;place-items:center;background:var(--gold-wash);
  border:1px solid var(--line-gold);color:var(--gold-deep);font-family:var(--font-display);
  font-size:clamp(28px,3vw,40px);aspect-ratio:1/1;border-radius:4px;user-select:none}

/* Legal pages: summary, contents, tables */
.legal__summary{background:var(--surface,#fff);border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:4px;padding:20px 24px;margin-bottom:28px}
.legal__summary-h,.legal__toc-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 10px}
.legal__summary ul{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--ink-2);font-size:15px;line-height:1.6}
.legal__toc{border:1px solid var(--line);border-radius:4px;padding:18px 22px;margin-bottom:36px;background:var(--surface,#fff)}
.legal__toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px;font-size:14px;line-height:1.9}
.legal__toc a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.legal__toc a:hover{color:var(--gold-deep);border-bottom-color:var(--gold)}
@media(max-width:640px){.legal__toc ol{columns:1}}
.legal__block{scroll-margin-top:96px}
.legal__table{overflow-x:auto;margin:6px 0 14px}
.legal__table table{width:100%;min-width:640px;border-collapse:collapse;font-size:13.5px;line-height:1.55}
.legal__table th{text-align:left;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding:10px 12px 10px 0;border-bottom:1px solid var(--line-strong)}
.legal__table td{vertical-align:top;padding:11px 12px 11px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
/* reset.css strips list markers; legal lists need them back */
.legal__summary ul,.legal__block .prose ul{list-style:disc}
.legal__toc ol{list-style:decimal}
.legal__block .prose ul{padding-left:20px;margin:0 0 16px;display:grid;gap:8px;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.legal__block .prose li::marker,.legal__summary li::marker,.legal__toc li::marker{color:var(--gold)}
.legal__block .prose .legal__table{max-width:none}

/* ══════════════════════════════════════════════════════════════════════════
   Legal pages v2: hero with artwork, sticky contents, glance card,
   numbered section cards with lit icons.
   ══════════════════════════════════════════════════════════════════════════ */
.lhero{
  --lhero-bg:#F6EFE5;
  position:relative;overflow:hidden;
  padding:clamp(128px,17vh,170px) 0 clamp(56px,8vh,96px);
  background:
    radial-gradient(900px 420px at 78% 30%,rgba(232,200,154,.38),transparent 65%),
    radial-gradient(600px 300px at 0% 10%,rgba(255,255,255,.7),transparent 70%),
    linear-gradient(180deg,var(--lhero-bg) 0%,var(--lhero-bg) 62%,var(--cream) 100%);
}
.lhero__wrap{position:relative;z-index:2}
.lhero__copy{max-width:540px}
.lhero__title{font-size:var(--fs-display);line-height:1.02;margin:22px 0 22px;letter-spacing:-.02em}
.lhero__lead{font-size:clamp(16px,1.25vw,18px);line-height:1.7;color:var(--ink-2);max-width:48ch}
.lhero__date{margin-top:18px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.lhero__date::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(200,125,46,.15)}

.lhero__art{position:absolute;z-index:1;right:0;top:clamp(64px,8vh,84px);
  width:min(57vw,1016px);aspect-ratio:1016/334;pointer-events:none}
.lhero__art img{width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 66%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 66%,transparent 100%)}
/* Fade the artwork into the page: left edge on the wrapper, top/bottom on the image */
.lhero__art{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 13%,#000 94%,transparent 100%);
                    mask-image:linear-gradient(90deg,transparent 0%,#000 13%,#000 94%,transparent 100%)}
.lhero--art{min-height:calc(clamp(64px,8vh,84px) + min(57vw,1016px) * .3287 + 20px)}

@media(max-width:1100px){
  .lhero--art{min-height:0;padding-bottom:0}
  .lhero__art{position:relative;top:auto;right:auto;width:100%;margin-top:28px;order:2}
  .lhero--art{display:flex;flex-direction:column}
  .lhero__wrap{order:1}
}

/* Body: contents rail + cards */
.lbody{position:relative;z-index:3;padding:clamp(12px,2vh,24px) 0 var(--section-y)}
.lhero--art + .lbody{margin-top:clamp(-56px,-4vw,-24px)}
.lbody__grid{display:grid;gap:clamp(22px,2.6vw,36px)}
.lbody__grid--toc{grid-template-columns:clamp(240px,21vw,284px) minmax(0,1fr);align-items:start}
.lmain{display:grid;gap:18px;min-width:0}

.ltoc{position:sticky;top:92px;max-height:calc(100vh - 112px);overflow:auto;overscroll-behavior:contain;
  padding:24px 16px 18px 20px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 14px 34px rgba(120,80,30,.07);scrollbar-width:thin}
.ltoc__h{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 14px 2px}
.ltoc ol{position:relative;display:grid;gap:1px}
.ltoc ol::before{content:'';position:absolute;left:10px;top:14px;bottom:14px;width:1px;
  background:linear-gradient(180deg,var(--gold-pale),rgba(200,125,46,.12))}
.ltoc a{display:flex;align-items:center;gap:10px;padding:3px 0;color:var(--ink-2);font-size:13.5px;line-height:1.35}
.ltoc__dot{position:relative;z-index:1;flex:none;width:21px;height:21px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:1.5px solid var(--gold);
  font-size:0;font-weight:600;color:#fff;transform:scale(.6);
  transition:transform .35s var(--e),background .35s var(--e),box-shadow .35s var(--e)}
.ltoc__label{flex:1;padding:6px 12px;border-radius:999px;transition:background .35s var(--e),color .35s var(--e)}
.ltoc a:hover .ltoc__label{color:var(--gold-deep)}
.ltoc a:focus-visible{outline:none}
.ltoc a:focus-visible .ltoc__label{outline:2px solid var(--gold);outline-offset:1px}
.ltoc a.is-active .ltoc__dot{transform:none;background:var(--gold);font-size:10.5px;box-shadow:0 0 0 4px rgba(200,125,46,.16)}
.ltoc a.is-active .ltoc__label{background:linear-gradient(90deg,rgba(232,200,154,.5),rgba(232,200,154,.18));color:var(--ink)}

/* At a glance */
.lglance{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;
  padding:clamp(22px,3vw,32px) clamp(22px,3.2vw,40px);border-radius:12px;
  background:linear-gradient(105deg,#fff 0%,#fffaf3 58%,#f8ead6 100%);
  border:1px solid var(--line-gold);border-left:3px solid var(--gold);
  box-shadow:0 18px 44px rgba(150,95,30,.10)}
.lglance__icon{width:clamp(76px,7.5vw,100px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  color:var(--gold-deep);background:radial-gradient(circle at 35% 30%,#fff 0%,#f7ead8 72%);
  box-shadow:0 0 0 1px rgba(200,125,46,.28),0 0 0 8px rgba(255,255,255,.75),0 0 0 9px rgba(200,125,46,.2),
    0 14px 30px rgba(200,125,46,.28)}
.lglance__icon svg{width:40%;height:40%}
.lglance .legal__summary-h{margin-bottom:12px}
.lglance ul{list-style:disc;padding-left:18px;display:grid;gap:7px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.lglance li::marker{color:var(--gold)}

/* Section cards */
.lcard{position:relative;display:grid;
  grid-template-columns:clamp(64px,7.5vw,108px) minmax(0,1fr) clamp(92px,10vw,140px);
  gap:clamp(12px,2vw,28px);align-items:start;
  padding:clamp(24px,2.8vw,34px) clamp(20px,2.8vw,34px);border-radius:12px;
  background:linear-gradient(100deg,#fff 0%,#fffdf9 55%,#fbf2e5 100%);
  border:1px solid var(--line);box-shadow:0 10px 30px rgba(120,80,30,.05);
  scroll-margin-top:96px;transition:border-color .45s var(--e),box-shadow .45s var(--e)}
.lcard:hover{border-color:var(--line-gold);box-shadow:0 18px 44px rgba(150,95,30,.10)}
.lcard__num{font-family:var(--font-display);font-size:clamp(44px,4.6vw,66px);line-height:.95;
  color:rgba(20,20,20,.075);letter-spacing:-.02em;user-select:none}
.lcard__h{font-size:var(--fs-doc-h);line-height:1.25;margin:4px 0 14px}
.lcard .prose{max-width:none}
.lcard .prose p{font-size:14.5px;line-height:1.75;color:var(--ink-2);margin-bottom:14px}
.lcard .prose p:last-child,.lcard .prose ul:last-child{margin-bottom:0}
.lcard .prose ul{list-style:disc;padding-left:20px;margin:0 0 14px;display:grid;gap:7px;
  font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.lcard .prose li::marker{color:var(--gold)}
.lcard .prose a{color:var(--gold-deep)}

/* Lit icon: tile floating over a glowing ring */
.lcard__icon{position:relative;align-self:center;justify-self:center;width:100%;aspect-ratio:1;
  display:grid;place-items:center;color:var(--gold-deep)}
.lcard__icon::before{content:'';position:absolute;left:6%;right:6%;bottom:8%;height:30%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(236,172,92,.55),rgba(236,172,92,0))}
.lcard__icon::after{content:'';position:absolute;left:14%;right:14%;bottom:14%;height:20%;border-radius:50%;
  border:1.5px solid rgba(214,140,60,.6);
  box-shadow:0 0 14px rgba(236,172,92,.65),inset 0 0 8px rgba(255,222,176,.7)}
.lcard__tile{position:relative;z-index:1;width:54%;aspect-ratio:1;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,#fffdf9 0%,#f6e6cf 100%);border:1px solid rgba(200,125,46,.35);
  box-shadow:0 12px 22px rgba(160,100,30,.22),inset 0 1px 0 #fff,inset 0 -6px 12px rgba(214,150,80,.12);
  transform:translateY(-16%) perspective(320px) rotateX(10deg) rotateY(-14deg);
  transition:transform .6s var(--e)}
.lcard__tile svg{width:48%;height:48%}
.lcard:hover .lcard__tile{transform:translateY(-22%) perspective(320px) rotateX(6deg) rotateY(-6deg)}

.lcard .legal__table{margin:8px 0 14px}

@media(max-width:1000px){
  .lbody__grid--toc{grid-template-columns:1fr}
  .ltoc{position:static;max-height:none}
  .ltoc ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
  .ltoc ol::before{display:none}
}
@media(max-width:760px){
  .lcard{grid-template-columns:minmax(0,1fr);padding-top:22px}
  .lcard__num{position:absolute;top:14px;right:18px;font-size:42px}
  .lcard__icon{display:none}
  .lcard__h{padding-right:56px}
  .lglance{grid-template-columns:1fr}
  .lglance__icon{width:64px}
  .ltoc ol{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .lcard__tile,.lcard:hover .lcard__tile{transition:none}
}

/* Cards holding a table give the table the icon column's width */
.lcard:has(.legal__table){grid-template-columns:clamp(64px,7.5vw,108px) minmax(0,1fr)}
.lcard:has(.legal__table) .lcard__icon{display:none}
.lcard .legal__table code{font-family:var(--font-mono);font-size:12px;white-space:nowrap}
@media(max-width:760px){.lcard:has(.legal__table){grid-template-columns:minmax(0,1fr)}}
/* ---- Platform modules ---------------------------------------------------- */
.modules{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(36px,5vh,60px)}
.module{background:var(--cream);padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;gap:10px}
.module--soon{background:var(--cream-2)}
.module__top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.module__n{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted-2)}
.module__title{font-size:var(--fs-h4);line-height:1.25}
.module__one{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2)}
.module__k{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-top:4px}
.module ul{margin:0;padding-left:16px;font-size:13px;line-height:1.6;color:var(--muted)}
.module li+li{margin-top:4px}
.module__next{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;
  line-height:1.55;color:var(--muted)}
.module__next span{color:var(--ink-2);font-weight:600}
.modules__note{margin-top:18px;font-size:var(--fs-sm);color:var(--muted);max-width:80ch}
.modules + .modules__note + .hero__actions{margin-top:28px}
@media(max-width:1180px){.modules{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.modules{grid-template-columns:1fr}}

/* ---- Fit check (who it is for, and who it is not for yet) ---------------- */
.fit{align-items:stretch;margin-top:clamp(28px,4vh,44px)}
.fit__col{background:var(--cream);border:1px solid var(--line);padding:clamp(22px,2.4vw,32px)}
.fit__col--soft{background:var(--cream-2)}
.fit__h{font-family:var(--font-display);font-size:var(--fs-h4);color:var(--ink);margin-bottom:12px}
.fit ul{margin:0;padding-left:18px;font-size:var(--fs-sm);line-height:1.75;color:var(--ink-2)}
@media(max-width:800px){.fit{grid-template-columns:1fr}}

/* ---- Academy (homepage overview only; the full site is academy.startiqosai.com) ---- */
.academy{align-items:start}
.academy__facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.academy__facts li{padding:16px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm);line-height:1.7;color:var(--ink-2)}
.cause__answer a{color:var(--gold);text-decoration:none;font-weight:600}
.cause__answer a:hover{color:var(--gold-deep)}
.row__title a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-gold)}
.row__title a:hover{color:var(--gold)}

/* ---- Blog posts: sub-heads, lists, tables, sources ---------------------- */
.prose h3{font-family:var(--font-display);font-size:clamp(18px,1.5vw,21px);line-height:var(--lh-snug);
  color:var(--ink);margin:30px 0 12px}
.prose ul,.prose ol{margin:0 0 22px;padding-left:1.3em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--muted);margin-bottom:10px;padding-left:4px}
.prose li::marker{color:var(--gold)}
.prose li strong{color:var(--ink)}
.prose a{color:var(--gold-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{color:var(--gold)}
.prose .table-wrap{overflow-x:auto;margin:30px 0;-webkit-overflow-scrolling:touch}
.prose .table{min-width:680px}
.prose .table th{padding:12px 16px}
.prose .table td{vertical-align:top;line-height:1.6;color:var(--ink-2)}
.prose .table td:first-child{width:26%}
.prose .post__sources li{font-size:var(--fs-sm);line-height:1.6;word-break:break-word}
@media(max-width:700px){
  .prose .table{min-width:0;border-top:0}
  .prose .table thead{display:none}
  .prose .table tr{display:block;border-top:1px solid var(--line);padding:16px 0}
  .prose .table td{display:block;border:0;padding:5px 0;width:auto}
  .prose .table td:first-child{width:auto;font-size:var(--fs-lead)}
  .prose .table td[data-label]::before{content:attr(data-label);display:block;font-family:var(--font-mono);
    font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
  .prose .table tr:hover td{background:none}
}