/* Home J (launch, 2026-10-22). Built to DESIGN.md v3 and reference/home-j.html.
   Loads after styles/ds/styles.css and styles/actionstate-v2.css; every color, radius, easing and duration
   below is a token from those two files. Alpha variants are color-mix() of a token, never a new hue. */

html,body{margin:0;overflow-x:clip;background:var(--ink-900);color:var(--fg-2);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
body{font-size:var(--body-m);line-height:1.6}
*{box-sizing:border-box}
button{font:inherit}
a{color:var(--amber-500);text-decoration:none;transition:color var(--dur-micro) ease-out}
a:hover{color:var(--amber-400)}
:focus-visible{outline:2px solid var(--amber-500);outline-offset:3px;box-shadow:none;border-radius:var(--r-pill)}
img{display:block;max-width:100%}

.skip{position:absolute;left:-9999px;top:0;z-index:50;padding:12px 18px;background:var(--cream);color:var(--ink-900);border-radius:var(--r-pill)}
.skip:focus{left:12px;top:12px}

.wrap{max-width:var(--page-max);margin:0 auto;padding-left:var(--page-pad);padding-right:var(--page-pad)}
.section{background:var(--ink-900);border-top:1px solid var(--hairline)}
.section--deep{background:var(--ink-950)}
.section > .wrap{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.stack{display:flex;flex-direction:column}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(40px,6vw,88px);align-items:center}

/* Type */
.mono{font-family:var(--font-mono)}
.kicker{font-family:var(--font-mono);font-size:var(--label);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--amber-500)}
.label{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg-3)}
.h1,.h2,.h3{margin:0;font-family:var(--font-display);font-weight:500;color:var(--cream);text-wrap:balance}
.h1{font-size:var(--display-xxl);line-height:1;letter-spacing:var(--tracking-display);max-width:18ch}
.h2{font-size:var(--display-l);line-height:1.04;letter-spacing:var(--tracking-h2)}
.h2--xl{font-size:var(--display-xl);line-height:1.02;letter-spacing:var(--tracking-display)}
.h3{font-size:var(--display-m);line-height:1.1;letter-spacing:-.02em}
.lead{margin:0;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--cream);text-wrap:pretty}
.body{margin:0;font-size:18px;line-height:1.6;max-width:44ch;color:var(--fg-2);text-wrap:pretty}
.limit{margin:0;font-size:15px;line-height:1.6;max-width:44ch;color:var(--fg-3)}
.link-mono{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;font-family:var(--font-mono);font-size:15px}

/* Buttons */
.btn{display:inline-flex;align-items:center;white-space:nowrap;min-height:52px;padding:0 24px;border-radius:var(--r-pill);font-size:16px;font-weight:500;
  transition:background-color var(--dur-micro) ease-out,box-shadow var(--dur-ui) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.btn:active{transform:scale(var(--press-scale))}
.btn--primary{background:var(--amber-500);color:var(--ink-900)}
.btn--primary:hover{background:var(--amber-400);color:var(--ink-900);box-shadow:0 10px 30px -8px color-mix(in srgb,var(--amber-500) 55%,transparent)}
.btn--primary:active{background:var(--amber-600)}
.btn--ghost{padding:0 22px;font-weight:400;background:color-mix(in srgb,var(--ink-900) 55%,transparent);border:1px solid color-mix(in srgb,var(--cream) 28%,transparent);color:var(--cream)}
.btn--ghost:hover{background:var(--ink-800);color:var(--cream)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* Chips */
.chip{display:inline-block;font-family:var(--font-mono);font-size:var(--label);padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap;line-height:1.5}
.chip--ok{background:var(--ok-wash);color:var(--ok-ink)}
.chip--neutral{padding:2px 9px;border:1px solid var(--fg-2);color:var(--slate-500)}

/* Launch banner (DESIGN.md §6) */
.banner{background:var(--amber-500);color:var(--ink-900)}
.banner-x .banner{display:none}
.banner .wrap{padding-top:8px;padding-bottom:8px;display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;font-size:14px;line-height:1.4}
.banner__lead{font-family:var(--font-mono);font-weight:600;white-space:nowrap}
.banner__talk{font-family:var(--font-mono);font-size:13px;white-space:nowrap}
.banner__end{margin-left:auto;display:flex;align-items:center;gap:4px}
.banner a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-900);font-weight:500;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.banner a:hover{color:var(--ink-900)}
.banner__x{cursor:pointer;width:44px;height:44px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-900);font-size:20px;line-height:1;transition:background-color var(--dur-micro) ease-out}
.banner__x:hover{background:color-mix(in srgb,var(--ink-900) 12%,transparent)}
.banner__x[hidden]{display:none}
@media (max-width:1180px){.banner__products,.banner__talk{display:none}}
@media (max-width:700px){.banner__cta-long{display:none}}
@media (min-width:701px){.banner__cta-short{display:none}}

/* Nav */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ink-900) 94%,transparent);border-bottom:1px solid var(--hairline)}
.nav .wrap{height:var(--nav-h);display:flex;align-items:center;gap:28px}
.nav__logo{flex:none;display:flex;align-items:center;min-height:44px}
.nav__logo img{height:26px;width:auto}
.nav__links{flex:1;display:flex;flex-wrap:wrap;gap:4px 28px;height:22px;overflow:hidden;font-size:15px;justify-content:center}
.nav__links a{color:var(--cream)}
.nav__links a:hover{color:var(--amber-400)}
.nav__links .nav__llms{color:var(--amber-400);font-family:var(--font-mono);font-size:14px}
.nav__cta{flex:none;display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--cream);color:var(--ink-900);font-size:14px;font-weight:500;white-space:nowrap;
  transition:background-color var(--dur-micro) ease-out,transform var(--dur-press) var(--ease-out)}
.nav__cta:hover{background:var(--paper-card);color:var(--ink-900)}
.nav__cta:active{transform:scale(var(--press-scale))}
@media (max-width:820px){.nav__links{visibility:hidden}}

/* Photo bands (DESIGN.md §8). Protection gradients only here. */
.photo{position:relative;overflow:hidden;background:var(--ink-950)}
.photo__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.photo__scrim{position:absolute;inset:0;pointer-events:none}
.photo__body{position:relative}
.drift-push{animation:clip-push var(--dur-drift) var(--ease-drift) infinite alternate}
.drift-pan{animation:clip-pan var(--dur-drift) var(--ease-drift) infinite alternate}
.drift-rise{animation:clip-rise var(--dur-drift) var(--ease-drift) infinite alternate}
@keyframes clip-push{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.5%,-1%,0)}}
@keyframes clip-pan{from{transform:scale(1.1) translate3d(2%,0,0)}to{transform:scale(1.1) translate3d(-2%,-.5%,0)}}
@keyframes clip-rise{from{transform:scale(1.08) translate3d(0,2%,0)}to{transform:scale(1.12) translate3d(0,-2%,0)}}

.hero .photo__img{object-position:center 45%}
.hero .photo__scrim{background:var(--scrim-bottom),linear-gradient(90deg,color-mix(in srgb,var(--ink-950) 50%,transparent) 0%,transparent 50%)}
.hero .photo__body{min-height:calc(100dvh - var(--nav-h));padding-top:96px;padding-bottom:clamp(48px,7vw,88px);display:flex;flex-direction:column;justify-content:flex-end;gap:32px}
.hero__row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.hero__row .lead{max-width:44ch}

.handoff .photo__img{object-position:center 55%}
.handoff .photo__scrim{background:linear-gradient(180deg,color-mix(in srgb,var(--ink-950) 90%,transparent) 0%,color-mix(in srgb,var(--ink-950) 60%,transparent) 38%,color-mix(in srgb,var(--ink-950) 10%,transparent) 62%,color-mix(in srgb,var(--ink-950) 70%,transparent) 100%),linear-gradient(90deg,color-mix(in srgb,var(--ink-950) 60%,transparent) 0%,transparent 55%)}
.handoff .photo__body{min-height:100dvh;padding-top:clamp(88px,11vw,150px);padding-bottom:clamp(88px,11vw,150px);display:flex;flex-direction:column;gap:24px}
.handoff .h2{max-width:12ch}
.handoff .lead{max-width:42ch}

.close .photo__img{object-position:40% center}
.close .photo__scrim{background:linear-gradient(0deg,color-mix(in srgb,var(--ink-950) 95%,transparent) 0%,color-mix(in srgb,var(--ink-950) 70%,transparent) 34%,transparent 60%),linear-gradient(90deg,color-mix(in srgb,var(--ink-950) 60%,transparent) 0%,transparent 50%)}
.close .photo__body{min-height:100dvh;padding-top:clamp(96px,12vw,160px);padding-bottom:clamp(64px,8vw,112px);display:flex;flex-direction:column;justify-content:flex-end;gap:28px}
.principle{display:flex;flex-direction:column;font-family:var(--font-display);font-weight:500;font-size:var(--display-xl);line-height:1.04;letter-spacing:var(--tracking-display);color:var(--cream)}
.principle__state{align-self:flex-start;padding-bottom:.08em;background:var(--gradient-state);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Seven ways it goes wrong */
.wrong .wrap{display:flex;flex-direction:column;gap:48px}
.wrong .h2{max-width:20ch}
.line{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:8px 40px;align-items:baseline;padding:22px 0;border-top:1px solid var(--hairline)}
.line__t{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3.2vw,42px);line-height:1.1;letter-spacing:-.025em;color:var(--cream);transition:color var(--dur-reveal) var(--ease-out)}
.line__ex{margin:0;font-family:var(--font-mono);font-size:15px;line-height:1.6;color:var(--fg-2);transition:color var(--dur-reveal) var(--ease-out)}
.js .line:not(.is-lit) .line__t,.js .line:not(.is-lit) .line__ex{color:var(--fg-4)}
.wrong__note{margin:0;padding-top:32px;border-top:1px solid var(--hairline);font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--fg-2);max-width:52ch;text-wrap:pretty}

/* Missing layer */
.missing .h2{max-width:14ch}
.quote{margin:12px 0 0;padding-left:20px;border-left:2px solid var(--amber-500);display:flex;flex-direction:column;gap:10px}
.quote blockquote{margin:0;font-size:clamp(19px,1.7vw,22px);line-height:1.45;color:var(--cream);text-wrap:pretty}
.quote figcaption,.cite{font-family:var(--font-mono);font-size:13px;color:var(--fg-3)}
.layers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.layer{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:0 clamp(18px,2.4vw,28px);border-radius:var(--r-tile);background:var(--ink-850);border:1px solid var(--hairline);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.layer__name{position:relative;font-size:clamp(16px,1.5vw,19px);color:var(--fg-2);transition:color var(--dur-ui) ease-out}
.layer__status{position:relative;flex:none;font-family:var(--font-mono);font-size:13px;color:var(--fg-3);transition:color var(--dur-ui) ease-out}
.layer__status--here{color:var(--ok-on-ink)}
.layer--missing{background:transparent;border:1.5px dashed color-mix(in srgb,var(--cream) 32%,transparent)}
.layer--missing .layer__name{color:var(--cream)}
.layer--missing .layer__status{color:var(--amber-400)}
.layer__fill{position:absolute;inset:0;background:var(--amber-500);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-seal) var(--ease-seal)}
.layers.is-filled .layer--missing .layer__fill{transform:scaleX(1)}
.layers.is-filled .layer--missing .layer__name,.layers.is-filled .layer--missing .layer__status{color:var(--ink-900)}
.js .layers:not(.is-in) .layer{opacity:0;transform:translateY(12px)}
.layers .layer:nth-child(2){transition-delay:60ms}.layers .layer:nth-child(3){transition-delay:120ms}.layers .layer:nth-child(4){transition-delay:180ms}.layers .layer:nth-child(5){transition-delay:240ms}

/* Two independent records (demo) */
.ledger{position:relative;perspective:1600px}
.ledger__glow{position:absolute;inset:-12% -8%;background:var(--glow-amber);pointer-events:none}
.ledger__card{position:relative;transform-origin:50% 70%;transition:transform var(--dur-story) var(--ease-out);background:var(--ink-850);border:1px solid var(--hairline-strong);border-radius:var(--r-panel);box-shadow:var(--shadow-lift);padding:clamp(18px,2.4vw,28px);display:flex;flex-direction:column;gap:18px}
.js .ledger__card{transform:rotateX(8deg) rotateY(-12deg)}
.js .ledger__card:hover,.js .ledger__card:focus-within{transform:none}
.ledger__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.ledger__ctx{font-family:var(--font-mono);font-size:var(--label);color:var(--fg-3)}
.tabs-sm{display:flex;gap:6px;flex-wrap:wrap}
.tab{cursor:pointer;min-height:44px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--hairline-strong);background:transparent;color:var(--fg-2);font-size:15px;white-space:nowrap;
  transition:background-color var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.tab:hover{color:var(--cream)}
.tab:active{transform:scale(var(--press-scale))}
.tab[aria-selected="true"]{background:var(--cream);border-color:var(--cream);color:var(--ink-900)}
.tabs-sm .tab{padding:0 13px;font-size:13px}
.records{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px;transition:opacity var(--dur-press) ease-out,filter var(--dur-press) ease-out}
.record{background:var(--ink-900);border:1px solid var(--hairline);border-radius:var(--r-tile);padding:18px;display:flex;flex-direction:column;gap:14px}
.record__text{margin:0;min-height:72px;font-size:17px;line-height:1.4;color:var(--cream);text-wrap:pretty}
.record__seal{display:flex;align-items:center;gap:10px}
.capsule{position:relative;flex:1;height:20px;border-radius:var(--r-pill);border:2.5px solid color-mix(in srgb,var(--cream) 60%,transparent);overflow:hidden}
.capsule__fill{position:absolute;inset:0;background:var(--amber-500);transform-origin:left center}
.digest{font-family:var(--font-mono);font-size:var(--label);color:var(--fg-2);font-variant-numeric:tabular-nums}
.ledger__result{border-top:1px solid var(--hairline);padding-top:16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.ledger__res{font-family:var(--font-mono);font-weight:600;font-size:26px;letter-spacing:-.02em}
.res--agrees{color:var(--ok-on-ink)}.res--conflicts{color:var(--fail-on-ink)}.res--unconfirmed{color:var(--amber-400)}
.ledger__note{flex:1 1 220px;font-size:14px;line-height:1.5;color:var(--fg-2)}
/* Seal sequence: fills left→right, digests appear, then the comparison resolves */
.js .ledger .capsule__fill{transform:scaleX(0);transition:transform 150ms ease-out}
.js .ledger .digest{opacity:0;transition:opacity var(--dur-micro) ease-out}
.js .ledger__result{opacity:0;filter:blur(4px);transform:translateY(6px);transition:opacity var(--dur-micro) ease-out,filter var(--dur-micro) ease-out,transform var(--dur-micro) ease-out}
.js .ledger.is-sealed .capsule__fill{transform:scaleX(1);transition:transform var(--dur-seal) var(--ease-seal)}
.js .ledger.is-sealed .record:nth-child(2) .capsule__fill{transition-delay:180ms}
.js .ledger.is-sealed .digest{opacity:1;transition:opacity var(--dur-ui) ease-out 900ms}
.js .ledger.is-sealed .record:nth-child(2) .digest{transition-delay:1080ms}
.js .ledger.is-sealed .ledger__result{opacity:1;filter:none;transform:none;transition:opacity 300ms var(--ease-out) 1250ms,filter 300ms var(--ease-out) 1250ms,transform 300ms var(--ease-out) 1250ms}
.ledger.is-fading .records{opacity:0;filter:blur(2px)}
.ledger.is-fading .ledger__result{opacity:0}

/* Both sides of the work */
.sides .wrap{display:flex;flex-direction:column;gap:40px}
.sides .h2{max-width:16ch}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.panel{border-radius:var(--r-panel);background:var(--ink-850);border:1px solid var(--hairline);padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;gap:40px}
.panel[hidden]{display:none}
.parties{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px}
.party{display:flex;flex-direction:column;align-items:center;gap:10px}
.party__pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pill{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:var(--r-pill);font-size:15px;white-space:nowrap}
.pill--h{background:var(--cream);color:var(--ink-900);border:1px solid var(--cream)}
.pill--a{background:var(--ink-800);color:var(--cream);border:1px solid color-mix(in srgb,var(--cream) 20%,transparent);font-family:var(--font-mono)}
.bridge{flex:1 1 200px;min-width:180px;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:10px}
.bridge__line{position:relative;width:100%;height:2px;background:color-mix(in srgb,var(--amber-500) 45%,transparent)}
.mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;height:34px;border-radius:var(--r-pill);border:2.5px solid var(--cream);background:var(--ink-850);overflow:hidden}
.mark__check{align-self:stretch;width:34px;background:var(--amber-500);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-900);font-family:var(--font-mono);font-weight:600}
.mark__word{padding:0 14px;font-family:var(--font-mono);font-size:13px;color:var(--cream);white-space:nowrap}
.bridge__cap{margin-top:18px;font-family:var(--font-mono);font-size:13px;color:var(--fg-3);text-align:center}
.panel__note{margin:0 auto;max-width:56ch;text-align:center;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--fg-2);text-wrap:pretty}
.fade-swap{transition:opacity 180ms ease-out,filter 180ms ease-out}
.fade-swap.is-fading{opacity:0;filter:blur(2px)}

/* How it works (pinned) */
.how{position:relative;background:var(--ink-950);border-top:1px solid var(--hairline)}
.how__stage{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(32px,6vw,96px);align-items:center;padding-top:var(--section-y);padding-bottom:var(--section-y)}
.how__intro{display:flex;flex-direction:column;gap:clamp(24px,4vh,40px)}
.how__intro .h2{font-size:clamp(30px,4vw,54px);max-width:14ch}
.rail{position:relative;list-style:none;margin:0;display:flex;flex-direction:column;gap:2px;padding:0 0 0 20px}
.rail::before,.rail__fill{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--ink-700)}
.rail__fill{background:var(--amber-500);transform-origin:top;transform:scaleY(1);transition:transform var(--dur-reveal) var(--ease-out)}
.rail__btn{cursor:pointer;background:transparent;border:0;padding:6px 0;min-height:44px;font-family:var(--font-mono);font-weight:600;font-size:17px;color:var(--cream);transition:color var(--dur-ui) ease-out}
.rail__btn:hover{color:var(--cream)}
.rail__btn[aria-current="step"]{color:var(--amber-500)}
.js .rail__btn.is-ahead{color:var(--fg-3)}
.cards{position:relative;display:flex;flex-direction:column;gap:16px}
.card{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(24px,3vw,40px);border-radius:var(--r-panel);background:var(--ink-850);border:1px solid var(--hairline-strong);box-shadow:var(--shadow-lift)}
.card__w{font-family:var(--font-mono);font-weight:600;font-size:clamp(40px,5vw,64px);line-height:1;letter-spacing:var(--tracking-display);color:var(--amber-500)}
.card__d{margin:0;font-size:clamp(19px,1.8vw,24px);line-height:1.45;color:var(--cream);max-width:30ch;text-wrap:pretty}
.card__ex{display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid var(--hairline)}
.card__ex span:last-child{font-family:var(--font-mono);font-size:14px;line-height:1.6;color:var(--fg-2)}
.how__steps{display:none}
/* With JS the stage pins and the cards stack in place; a step is active while its marker crosses the viewport center */
.js .how__pin{position:sticky;top:var(--nav-h);height:calc(100dvh - var(--nav-h));display:flex;align-items:center;overflow:hidden}
.js .how__pin .wrap{width:100%}
.js .how__stage{padding-top:0;padding-bottom:0}
.js .cards{display:grid;min-height:clamp(300px,46vh,420px)}
.js .card{grid-area:1/1;opacity:0;transform:translateY(24px) scale(.96);pointer-events:none;transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.js .card.is-past{transform:translateY(-16px) scale(.98)}
.js .card.is-active{opacity:1;transform:none;pointer-events:auto}
.js .how__steps{display:block;margin-top:calc(-100dvh + var(--nav-h));padding-top:calc(50vh - var(--nav-h));padding-bottom:50vh}
.how__steps div{height:60vh}
@media (max-width:700px),(max-height:620px){
  .js .how__intro{gap:16px}
  .js .how__intro .h2{font-size:28px}
  .js .how__stage{gap:20px}
  .js .rail{flex-direction:row;flex-wrap:wrap;gap:0 14px;padding-left:0}
  .js .rail::before,.js .rail__fill{display:none}
  .js .cards{min-height:240px}
}

/* Terms Packs (paper band) */
.paper{background:var(--paper);color:var(--slate-700)}
.paper .wrap{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.paper .h2{color:var(--slate-900)}
.paper .kicker{color:var(--amber-ink)}
.paper .body{color:var(--slate-600)}
.terms .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(40px,6vw,88px);align-items:start}
.terms__copy{display:flex;flex-direction:column;gap:24px}
.terms .h2{max-width:16ch}
.terms .body{max-width:46ch}
.kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.kind{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:var(--r-receipt);background:var(--paper-card);border:1px solid var(--paper-rule)}
.kind__name{font-family:var(--font-mono);font-weight:600;font-size:16px;color:var(--slate-900)}
.kind__name--judged{color:var(--judged-600)}
.kind p{margin:0;font-size:15px;line-height:1.55;color:var(--slate-600);text-wrap:pretty}
.status-list{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;align-items:center;font-size:15px;color:var(--slate-900)}
.terms .status-list{padding-top:8px}
.fine{margin:0;font-size:14px;line-height:1.6;color:var(--slate-500);max-width:50ch;text-wrap:pretty}
.receipt{background:var(--paper-card);border:1px solid var(--paper-rule);border-radius:var(--r-receipt);box-shadow:var(--shadow-card);overflow:hidden}
.receipt__head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 22px;border-bottom:1px solid var(--paper-rule);font-family:var(--font-mono);font-size:var(--label);color:var(--slate-500)}
.trow{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;padding:16px 22px;border-bottom:1px solid var(--paper-rule-soft)}
.trow__g{font-family:var(--font-mono);font-size:15px;color:var(--slate-500)}
.trow__g--judged{color:var(--judged-600)}
.trow__req{display:flex;flex-direction:column;gap:3px;min-width:0}
.trow__req span:first-child{font-size:16px;line-height:1.4;color:var(--slate-900)}
.trow__req span:last-child{font-family:var(--font-mono);font-size:var(--label);color:var(--slate-500)}
.res{font-family:var(--font-mono);font-size:var(--label);padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap;border:1px solid var(--paper-rule-soft);
  transition:opacity var(--dur-ui) ease-out,transform var(--dur-ui) var(--ease-out),background-color var(--dur-ui) ease-out,color var(--dur-ui) ease-out}
.res--met{background:var(--ok-wash);border-color:var(--ok-wash);color:var(--ok-ink)}
.res--notmet{background:var(--paper-card);border-color:var(--fail-600);color:var(--fail-600)}
.res--cbe{background:var(--paper-card);border-color:var(--fg-2);color:var(--slate-500)}
.res__pending{display:none}
.js .trow:not(.is-done) .res{background:var(--paper-card);border-color:var(--paper-rule-soft);color:var(--slate-500);transform:translateY(2px)}
.js .trow:not(.is-done) .res__value{display:none}
.js .trow:not(.is-done) .res__pending{display:inline}
.receipt__foot{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:16px 22px;background:var(--slate-50);font-family:var(--font-mono);font-size:13px;color:var(--slate-900);transition:opacity 300ms ease-out}
.receipt__foot span:last-child{color:var(--slate-500)}
.js .receipt:not(.is-done) .receipt__foot{opacity:0}

/* What evidence is for */
.needs .wrap{display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.needs .h2{max-width:22ch}
.need{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--hairline)}
.need__copy{display:flex;flex-direction:column;gap:16px}
.need__who{font-family:var(--font-mono);font-size:14px;color:var(--amber-500)}
.need__copy .h3{color:var(--cream)}
.need__copy p{margin:0;font-size:17px;line-height:1.6;color:var(--fg-2);max-width:46ch}
.need__prod{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--font-mono);font-size:13px;color:var(--fg-3)}
.slip{background:var(--paper);color:var(--slate-700);border-radius:var(--r-receipt);padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-lift)}
.slip__head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--paper-rule);font-family:var(--font-mono);font-size:var(--label);color:var(--slate-500)}
.slip__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:15px;color:var(--slate-700)}
.slip__row span:last-child{flex:none;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--slate-900)}
.slip__row .v-judged{color:var(--judged-600)}.slip__row .v-fail{color:var(--fail-600)}.slip__row .v-quiet{color:var(--slate-500)}.slip__row .v-amber{color:var(--amber-ink)}.slip__row .v-ok{color:var(--ok-600)}

/* Countersign */
.cs .h2{max-width:15ch}
.cs__copy{display:flex;flex-direction:column;gap:22px}
.cs .body{max-width:46ch}
.claims{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-radius:var(--r-receipt);border:1px solid var(--hairline-strong)}
.claims span:not(.label){font-size:16px;color:var(--cream)}
.cs__links{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap}
.cs__links .fine{color:var(--fg-3)}
.slip__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;font-size:15px;color:var(--slate-700)}
.slip__grid .n{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--slate-900)}
.slip__grid .n--quiet{color:var(--slate-500)}
.slip__grid .n--fail{color:var(--fail-600)}

/* v1 evidence components (styles/ds readme; not restyled) */
.rung{display:inline-block;font-family:var(--font-mono);font-size:var(--text-xs);border-radius:var(--radius-pill);padding:2px 12px;line-height:1.7;white-space:nowrap}
.rung--witnessed{border:1px solid var(--ok-600);color:var(--ok-600);background:transparent}
.rung--countersigned{border:1px solid var(--ok-600);color:var(--white);background:var(--ok-600)}
.vstrip{border:1px solid var(--border-hairline);border-radius:var(--radius-card);background:var(--ok-50);overflow:hidden}
.vstrip__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 16px;font-size:var(--text-sm)}
.vstrip__v{font-family:var(--font-mono);font-weight:600;color:var(--ok-600);white-space:nowrap}
.vstrip__s{color:var(--text-body);flex:1 1 320px;min-width:0}
.vstrip__d{color:var(--text-muted);margin-left:auto;white-space:nowrap;flex-shrink:0;font-family:var(--font-mono);font-size:var(--text-xs)}
.term{background:var(--surface-terminal);border-radius:var(--radius-input);padding:14px 18px;font-family:var(--font-data);font-size:var(--text-sm);line-height:1.7;overflow-x:auto;margin:0}
.term__p{color:var(--slate-400)}.term__p b{font-weight:400;color:var(--amber-500)}.term__p span{color:var(--text-on-dark)}
.term__ok{color:var(--ok-on-ink);white-space:pre}.term__dim{color:var(--slate-400);white-space:pre}

/* Running live */
.proof .wrap{display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.proof .h2{max-width:14ch}
.pull{margin:0;display:flex;flex-direction:column;gap:18px;max-width:30em}
.pull blockquote{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(24px,2.8vw,36px);line-height:1.25;letter-spacing:-.015em;color:var(--cream);text-wrap:pretty}
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.case{display:flex;flex-direction:column;gap:18px;padding:clamp(24px,3vw,36px);border-radius:var(--r-card);background:var(--ink-850);border:1px solid var(--hairline)}
.case__tag{font-family:var(--font-mono);font-size:14px;color:var(--amber-500)}
.case .h3{font-size:clamp(24px,2.4vw,32px);line-height:1.15}
.case > p{margin:0;font-size:var(--body-m);line-height:1.6;color:var(--fg-2);flex:1}
.case figure{margin:0;display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid var(--hairline)}
.case blockquote{margin:0;font-size:17px;line-height:1.55;color:var(--cream);text-wrap:pretty}
.case figcaption{font-family:var(--font-mono);font-size:var(--label);color:var(--fg-3)}

/* Three doors */
.doors .wrap{display:flex;flex-direction:column;gap:40px}
.doors .h2{max-width:18ch}
.seg{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,480px);padding:4px;border-radius:var(--r-pill);background:var(--ink-850);border:1px solid var(--hairline)}
.seg__thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:var(--r-pill);background:var(--amber-500);transition:transform 240ms var(--ease-out)}
.seg[data-i="1"] .seg__thumb{transform:translateX(100%)}
.seg[data-i="2"] .seg__thumb{transform:translateX(200%)}
.seg__btn{position:relative;cursor:pointer;height:44px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--fg-2);font-family:var(--font-mono);font-size:14px;white-space:nowrap;transition:color var(--dur-ui) ease-out,transform var(--dur-press) var(--ease-out)}
.seg__btn:active{transform:scale(var(--press-scale))}
.seg__btn[aria-selected="true"]{color:var(--ink-900)}
.door{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:clamp(28px,5vw,72px);align-items:start}
.door[hidden]{display:none}
.door__copy{display:flex;flex-direction:column;gap:18px}
.door__copy .h3{font-size:clamp(26px,2.8vw,36px);line-height:1.15}
.door__copy p{margin:0;font-size:17px;line-height:1.65;max-width:48ch;color:var(--fg-2)}
.copy-btn{align-self:flex-start;cursor:pointer;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--hairline-strong);background:transparent;color:var(--fg-2);font-family:var(--font-mono);font-size:13px;
  transition:color var(--dur-ui) ease-out,background-color var(--dur-micro) ease-out,transform var(--dur-press) var(--ease-out)}
.copy-btn:hover{background:var(--ink-800)}
.copy-btn:active{transform:scale(var(--press-scale))}
.copy-btn.is-copied{color:var(--ok-on-ink)}
.llms{border-radius:var(--r-receipt);background:var(--ink-850);border:1px solid var(--hairline);overflow:hidden}
.llms__head{padding:12px 18px;border-bottom:1px solid var(--hairline);font-family:var(--font-mono);font-size:var(--label);color:var(--fg-3)}
.llms pre{margin:0;padding:18px 20px;font-family:var(--font-mono);font-size:13.5px;line-height:1.75;color:var(--fg-2);white-space:pre-wrap;word-break:break-word}

/* Open standards (paper band) */
.open .wrap{display:flex;flex-direction:column;gap:56px}
.open__head{display:flex;flex-direction:column;gap:16px;max-width:760px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,5vw,80px)}
.col{display:flex;flex-direction:column;gap:20px}
.col__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:16px;border-bottom:2px solid var(--slate-900)}
.col__head--brand{border-bottom-color:var(--amber-500)}
.col__head span:first-child{font-family:var(--font-mono);font-weight:600;font-size:20px;color:var(--slate-900)}
.col__head span:last-child{font-family:var(--font-mono);font-size:13px;color:var(--slate-500)}
.col > p{margin:0;font-size:17px;line-height:1.6;color:var(--slate-600);max-width:46ch}
.col > .fine{font-size:14px;max-width:52ch}
.specs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px 24px;font-family:var(--font-mono);font-size:14px;color:var(--slate-900)}

/* Footer */
.foot{border-top:1px solid var(--hairline);background:var(--ink-900)}
.foot .wrap{padding-top:36px;padding-bottom:36px;display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center;font-size:13px;color:var(--fg-3)}
.foot img{height:30px;width:auto}
.foot__links{display:flex;flex-wrap:wrap;gap:4px 20px;font-family:var(--font-mono)}
.foot__links a{color:var(--fg-3);display:inline-flex;align-items:center;min-height:44px}
.foot__links a:hover{color:var(--cream)}

/* Reveal: fade + 12px rise, once (applied by js/home-j.js to blocks below the fold) */
.reveal-init{opacity:0;transform:translateY(12px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.reveal-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .drift-push,.drift-pan,.drift-rise{animation:none}
  .reveal-init{transform:none}
  .js .ledger__card{transform:none}
  .js .card,.js .card.is-past{transform:none}
  .js .layers:not(.is-in) .layer{transform:none}
  .js .ledger.is-sealed .capsule__fill,.js .ledger.is-sealed .digest,.js .ledger.is-sealed .ledger__result{transition:none}
  .btn:active,.tab:active,.nav__cta:active,.seg__btn:active,.copy-btn:active{transform:none}
}