/* Factify site · layout, shell and sections.
   Values come from design/tokens.css; components from Rena's design-system-components.css.
   This file only extends them. Mobile first; breakpoints 1000px (nav, rail) and 1312px (wrap). */

:root{--nav-h:72px;--ease:cubic-bezier(.2,.7,.2,1);--sec-pad:var(--space-16)}
@media (min-width:1000px){:root{--sec-pad:var(--space-24)}}

html{scroll-padding-top:var(--nav-h)}
body{overflow-x:clip}
html.menu-open{overflow:hidden}
img{max-width:100%}
/* Components set display (e.g. .fx-field is grid), which would beat the UA rule for [hidden]. */
[hidden]{display:none!important}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--space-4);top:-100px;z-index:100;padding:var(--space-2) var(--space-4);background:var(--surface-raised);color:var(--text)}
.skip:focus{top:var(--space-2)}

/* Icons: lock the box so the ligature name never takes space before the font arrives. */
.fx-icon{width:1em;overflow:hidden}
.fx-btn .fx-icon{transition:transform 250ms var(--ease)}
.fx-btn:hover .fx-icon{transform:translateX(4px)}

/* Section labels: red on paper, bone on red (the token flips), muted on ink. */
.fx-label.eyebrow{color:var(--seal)}
[data-theme="ink"] .fx-label.eyebrow{color:var(--text-muted)}

/* The one highlighted word per headline. Red on paper, bone on red, muted on ink. */
.hl{font-style:normal;color:var(--seal)}
[data-theme="ink"] .hl{color:var(--text-muted)}

/* ---------- Resolve (see src/js/resolve.js) ---------- */
.rs{white-space:nowrap}
.rs-sp{white-space:normal}
.rs-w{display:inline-block;white-space:nowrap}
.rs-l{display:inline-block;text-align:center}
@media (prefers-reduced-motion:no-preference){
  .js [data-resolve="load"]:not(.rs-on){visibility:hidden;animation:rs-failsafe 0s 3.5s forwards}
}
@keyframes rs-failsafe{to{visibility:visible}}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);background:var(--surface-page);border-bottom:1px solid var(--line)}
.nav__in{height:100%;display:flex;align-items:center;gap:var(--space-8)}
.nav__logo{display:block;margin-right:auto}
.nav__logo img{display:block;height:26px;width:auto}
.nav__links{display:none;gap:var(--space-8);font-size:15px;font-weight:500}
.nav__cta{display:none}

.burger{display:grid;place-content:center;gap:7px;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;color:var(--text);cursor:pointer}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;transition:transform 250ms var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4.25px) rotate(-45deg)}
html:not(.js) .burger{display:none}

/* Solutions menu (desktop): a disclosure under the nav, raised paper with a hairline. */
.dd{position:relative}
.dd__btn{display:inline-flex;align-items:center;gap:2px;padding:0;border:0;background:none;color:var(--text);font:inherit;cursor:pointer}
.dd__btn .fx-icon{transition:transform 180ms var(--ease)}
.dd__btn[aria-expanded="true"] .fx-icon{transform:rotate(180deg)}
.dd__btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dd__menu{position:absolute;top:calc(100% + 22px);left:calc(-1 * var(--space-6));z-index:60;display:grid;grid-template-columns:repeat(2,max-content);gap:var(--space-8);padding:var(--space-6);background:var(--surface-raised);border:1px solid var(--line)}
.dd__menu .fx-label-s{margin-bottom:var(--space-3);color:var(--text-muted)}
.dd__menu ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.dd__menu a{color:var(--text);text-decoration:none;white-space:nowrap}
.dd__menu a:hover{text-decoration:underline;text-underline-offset:4px}
@media (min-width:1000px){
  /* Links sit beside the logo; the demo button keeps the right edge. */
  .nav__logo{margin-right:0}
  .nav__links{display:flex;align-items:center;margin-right:auto}
  .nav__cta{display:inline-flex}
  .burger{display:none}
  .mnav{display:none!important}
}

/* Mobile sheet: full-page paper under the bar. */
.mnav{position:fixed;inset:var(--nav-h) 0 0;z-index:49;overflow-y:auto;background:var(--surface-page)}
.mnav__in{display:grid;padding-block:var(--space-4) var(--space-12)}
.mlink{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:34px;line-height:1.15;letter-spacing:-.01em;text-decoration:none;color:var(--text);cursor:pointer;list-style:none}
.mlink::-webkit-details-marker{display:none}
.mplus{position:relative;flex:none;width:16px;height:16px}
.mplus::before,.mplus::after{content:"";position:absolute;left:0;top:7.25px;width:16px;height:1.5px;background:currentColor;transition:transform 250ms var(--ease)}
.mplus::after{transform:rotate(90deg)}
.mgroup[open] .mplus::after{transform:rotate(0)}
.mgroup__body{display:grid;gap:var(--space-3);padding:var(--space-4) 0 var(--space-6);border-bottom:1px solid var(--line)}
.mgroup__body .fx-label-s{margin-top:var(--space-2)}
.mgroup__body ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.mgroup__body a{font-size:17px;text-decoration:none}
.mgroup__body a:hover{text-decoration:underline;text-underline-offset:4px}
.mnav__foot{display:grid;justify-items:start;gap:var(--space-4);margin-top:var(--space-8)}
/* Open: the paper dissolves in over the page (nav.js); until it is full the sheet itself is clear. */
.mnav__fx{position:fixed;inset:var(--nav-h) 0 0;width:100%;height:calc(100% - var(--nav-h));z-index:-1;pointer-events:none}
.mnav.is-dissolving{background:transparent}
.mnav.is-opening .mnav__in{visibility:hidden}
.mnav__in{position:relative}

/* ---------- Hero ---------- */
/* Copy sits in the content column; the red panel runs from the centre line to the browser edge. */
.hero{display:grid;grid-template-columns:minmax(0,1fr)}
.hero__copy{display:grid;align-content:center;gap:var(--space-6);padding:var(--space-16) var(--gutter)}
/* 44px holds the headline to three lines at 390 (display-m's 56px needs four; see NOTES.md). */
.hero__h{font-family:var(--font-display);font-size:44px;line-height:1.0;letter-spacing:-.015em}
.hero__lead{font-size:19px;line-height:1.5;color:var(--text-muted);max-width:38ch}
.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6);margin-top:var(--space-2)}
.hero__panel{display:grid;place-items:center;padding:var(--space-12) var(--gutter);background:var(--surface-page)}

@media (min-width:600px){.hero__h{font-size:64px}}
@media (min-width:1000px){
  /* Copy takes 7/12 of the content width so the headline holds to three lines (see NOTES.md). */
  .hero{--hero-in:calc(var(--content-max) - 2 * var(--gutter));--hero-row:min(var(--hero-in),calc(100% - 2 * var(--gutter)));grid-template-columns:1fr calc(var(--hero-row) * 7 / 12) calc(var(--hero-row) * 5 / 12) 1fr;min-height:max(560px,calc(100vh - var(--nav-h)));min-height:max(560px,calc(100svh - var(--nav-h)))}
  .hero__copy{grid-column:2;padding:var(--space-32) var(--space-8) var(--space-32) 0}
  .hero__h{font-size:clamp(60px,6.1vw,88px);line-height:.98;letter-spacing:-.02em}
  .hero__panel{grid-column:3/5;padding:var(--space-16) var(--space-8)}
}

/* Hero morph (interim: sealed end state, captions on the morph timeline). */
.morph{display:grid;justify-items:center;gap:var(--space-6);width:min(100%,300px);padding:0;border:0;background:none;color:var(--text);cursor:pointer;font:inherit}
@media (min-width:1000px){.morph{width:min(100%,460px)}}
.morph__art{position:relative;display:block;width:100%;aspect-ratio:1}
.morph__seal,.morph__canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
/* The canvas takes over once the morph has its shapes; until then the sealed file shows. */
.morph__canvas{visibility:hidden;color:var(--grain)}
.morph-on .morph__canvas{visibility:visible}
.morph-on .morph__seal{visibility:hidden}
/* One line at every width, so the panel height never changes between captions. */
.morph__cap{display:flex;align-items:center;gap:var(--space-3);min-height:1.2em;font-family:var(--font-display);font-size:22px;line-height:1.2;white-space:nowrap}
@media (min-width:1000px){.morph__cap{font-size:26px}}
.morph__dot{flex:none;width:9px;height:9px;border:1.5px solid currentColor}
.morph[data-stage="3"] .morph__dot{background:currentColor}

/* Brand film: a modal over an ink scrim, the player edge to edge, a hairline bar above it. */
.film{width:min(100% - 2 * var(--gutter),1040px);max-width:none;max-height:none;padding:0;border:0}
.film::backdrop{background:color-mix(in srgb,var(--brand-ink) 86%,transparent)}
.film__bar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);border-bottom:1px solid var(--line)}
.film__bar .fx-label-s{color:var(--text-muted)}
.film__x{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.film__x:focus-visible{outline:2px solid var(--focus);outline-offset:-4px}
.film__v{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--red-surface)}
html.film-open{overflow:hidden}

/* ---------- Sections and the rail layout ---------- */
.sec{padding-block:var(--sec-pad)}
.sec--mist{background:var(--surface-section)}
.muted{color:var(--text-muted)}
.rails{display:grid;gap:var(--space-8)}
.rail{display:grid;align-content:start;gap:var(--space-3)}
.rail__h{font-family:var(--font-display);font-size:34px;line-height:1.08;letter-spacing:-.01em}
.rail__line{color:var(--text-muted);max-width:30ch}
.rail__body{display:grid;gap:var(--space-8);align-content:start;min-width:0}
@media (min-width:1000px){
  .rails{grid-template-columns:320px minmax(0,1fr);gap:0}
  .rail{position:sticky;top:calc(var(--nav-h) + var(--space-6));align-self:start;padding-right:var(--space-8);border-right:1px solid var(--line);min-height:160px}
  .rail__h{font-size:40px}
  .rail__body{padding-left:var(--space-12)}
}


/* The problem · stats in a hairline grid */
.stats{display:grid;border-top:1px solid var(--line)}
.stat{display:grid;gap:var(--space-2);align-content:start;padding:var(--space-6) 0;border-bottom:1px solid var(--line)}
.stat__n{font-family:var(--font-display);font-size:64px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat__n span{font-size:.6em}
.stat__t{max-width:24ch}
.stat .fx-label-s{color:var(--text-muted)}
@media (min-width:700px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
  .stat{border-bottom:0;padding:var(--space-8) var(--space-6)}
  .stat + .stat{border-left:1px solid var(--line)}
  .stat:first-child{padding-left:0}
}
@media (min-width:1000px){.stat__n{font-size:88px}}

/* ---------- Introducing the Rulebook (Home: the solution and the promise) ---------- */
/* A real kicker, a large promise, then three equal panels on one baseline: the sources sealed
   into the Rulebook, the rules served to agents, the audit record. Arrows sit centred in the gaps. */
.home .intro .eyebrow{font-size:16px;letter-spacing:.12em}
.intro__head{display:grid;gap:var(--space-4);max-width:960px}
.intro__h{font-family:var(--font-display);font-size:36px;line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
.intro__line{font-size:19px;color:var(--text-muted)}
.sep{--sep-gap:var(--space-12);display:grid;gap:var(--sep-gap);margin:var(--space-12) 0 0;padding:0;list-style:none}
.sep__step{display:grid;grid-template-rows:auto auto 1fr;gap:var(--space-4);align-content:start;min-width:0}
.sep__step > p{color:var(--text-muted);max-width:38ch}
.sep__h{margin-top:var(--space-2);font-family:var(--font-display);font-size:44px;line-height:1;letter-spacing:-.015em}
/* One frame for all three: same panel, padding and height; the object centred inside it. */
.sep__art{position:relative;display:grid;place-items:center;min-height:300px;padding:var(--space-6);background:var(--surface-section);min-width:0}
.sep__art > *{width:100%;max-width:520px}

/* Seal: a neat stack of sheets, a gold connector, the Rulebook as an object. */
.seal-fig{display:flex;flex-direction:column}
.sheets{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.sheets li{display:flex;align-items:center;gap:6px;height:28px;padding:0 var(--space-2);background:var(--surface-raised);border:1px solid var(--line-strong);font:600 10.5px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.sheets .fx-icon{flex:none;font-size:16px;color:var(--text-muted)}
.seal-fig__link{position:relative;align-self:center;width:2px;height:16px;margin:var(--space-2) 0 12px;background:var(--gold)}
.seal-fig__link::after{content:"";position:absolute;left:-4px;bottom:-7px;width:10px;height:7px;background:var(--gold);clip-path:polygon(0 0,100% 0,50% 100%)}
/* The Rulebook as a decision tree: a rule's question, then one branch per answer, each ending in an outcome. */
.rbk{display:grid;gap:var(--space-3);padding:var(--space-3) var(--space-4) var(--space-4);border:1px solid var(--gold);min-width:0}
.rbk__head{display:flex;align-items:center;gap:var(--space-2);padding-bottom:var(--space-3);border-bottom:1px solid var(--gold)}
.rbk__head img{flex:none;width:32px;height:32px}
.rbk__t{font-family:var(--font-display);font-size:22px;line-height:1;color:var(--gold-text)}
.rbk__v{margin-left:auto;color:var(--gold-text);white-space:nowrap}
.dtree{display:grid;font-size:14px;line-height:1.2}
.dtree__q{display:flex;align-items:baseline;gap:var(--space-2);font-weight:600}
.dtree__q .fx-label-s{color:var(--gold-text)}
.dtree__b{list-style:none;margin:0 0 0 6px;padding:0}
.dtree__b li{position:relative;display:flex;align-items:center;gap:var(--space-2);padding:10px 0 0 22px}
.dtree__b li::before{content:"";position:absolute;left:0;top:0;width:14px;height:20px;border-left:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.dtree__b li:not(:last-child)::after{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1px solid var(--gold)}
.dtree__k{min-width:3ch;font:600 11px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.dtree .tag{background:var(--text);border-color:var(--text);color:var(--surface-page)}
.dtree .tag--dashed{background:none;border-color:var(--text-muted);color:var(--text-muted)}
.rbk__foot{color:var(--text-muted)}

/* Enforce: the rules on a gold-edged ink card, a gold bus down to three agent tiles. */
.enf-fig{display:grid;justify-items:stretch}
.rls{list-style:none;margin:0;padding:var(--space-4) var(--space-4);display:grid;gap:var(--space-2);border:1px solid var(--gold);font-size:15px}
.rls li{display:flex;align-items:center;gap:var(--space-3)}
.rls li::before{content:"";flex:none;width:9px;height:9px;background:var(--gold)}
/* Bus: a gold stem from the card, a rail across, and a drop to the centre of each tile. */
.enf-fig__bus{position:relative;height:36px;margin-inline:calc(100% / 6)}
.enf-fig__bus::before{content:"";position:absolute;left:50%;top:0;width:2px;height:18px;margin-left:-1px;background:var(--gold)}
.enf-fig__bus::after{content:"";position:absolute;left:0;right:0;top:17px;height:19px;border:2px solid var(--gold);border-bottom:0}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.tile{position:relative;display:grid;place-items:end center;aspect-ratio:1;max-height:96px;padding-bottom:var(--space-2);background:var(--surface-raised);border:1.5px dotted var(--text-muted)}
.tile::before{content:"";position:absolute;inset:0;background:currentColor;opacity:.14;pointer-events:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='1.5' height='1.5'/%3E%3C/svg%3E");mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='1.5' height='1.5'/%3E%3C/svg%3E")}
.tile__ok{position:relative;color:var(--gold);font-weight:600}

/* Prove: a crisp ledger card; Pass with a gold check, the escalated case the one red row. */
.audit{background:var(--surface-raised);border:1px solid var(--line-strong)}
.audit__h{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line-strong);color:var(--text-muted)}
.audit__t{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.audit__t th,.audit__t td{padding:12px var(--space-4);border-top:1px solid var(--line);text-align:left;font-weight:400;white-space:nowrap}
.audit__t tr:first-child th,.audit__t tr:first-child td{border-top:0}
.audit__t td:nth-child(2){color:var(--text-muted)}
.audit__t .audit__ok,.audit__t .audit__esc{text-align:right;font:600 11px/1.3 var(--font-sans);letter-spacing:.1em;text-transform:uppercase}
.audit__t .audit__ok{color:var(--gold-text)}
.audit__ok .fx-icon{vertical-align:-5px;margin-right:4px;color:var(--gold)}
/* data-theme="red" on the row: the tokens flip, so it is all bone on red. */
.audit__t .audit__held th,.audit__t .audit__held td{background:var(--surface-page);color:var(--text);border-color:transparent}
.audit__t .audit__held + tr th,.audit__t .audit__held + tr td{border-top-color:transparent}

@media (min-width:600px){.intro__h{font-size:48px}.home .intro .eyebrow{font-size:18px}}
@media (min-width:1000px){
  .home .intro .eyebrow{font-size:21px}
  .intro__head{gap:var(--space-6)}
  /* A step below the hero h1 (clamp 60–88px): the promise is an h2. */
  .intro__h{font-size:clamp(48px,4.4vw,64px)}
  .intro__line{font-size:22px}
  .sep{--sep-gap:var(--space-16);grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--space-24)}
  .sep__art{height:340px;min-height:0}
  /* The arrow sits in the centre of the gap, at the panels' middle. */
  .sep__step:not(:last-child) .sep__art::after{content:"arrow_forward";position:absolute;top:50%;right:calc(var(--sep-gap) / -2);transform:translate(50%,-50%);font-family:"Material Symbols Sharp";font-size:28px;line-height:1;color:var(--text);font-feature-settings:"liga"}
  .sep__h{font-size:52px}
}
@media (min-width:1000px) and (max-width:1199px){.sep__art{padding:var(--space-4)}.sheets li{font-size:9.5px;letter-spacing:.04em}.sheets .fx-icon{display:none}}


/* ---------- Pinned scroll (How it works, Getting started) ---------- */
/* Stacked by default; .pin-on (set by src/js/pin.js on wide, tall screens) pins it. */
.pin{padding-block:var(--sec-pad)}
.steps{display:grid;gap:var(--space-12);margin:0;padding:0;list-style:none}
.pin__nav,.gs__chips,.gs__bar{display:none}
.pin-on .pin{height:var(--pin-h);padding-block:0}
.pin-on .pin__stick{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));display:flex;align-items:center;overflow:hidden}
.pin-on .pin__stick > .wrap{width:100%}
.pin-on .pin .rail{position:static}
.pin-on .pin .steps{gap:0}
.pin-on .pin [data-pin-step]{grid-area:1/1;opacity:0;visibility:hidden}
.pin-on .pin [data-pin-step].is-on{opacity:1;visibility:visible;transition:opacity 180ms var(--ease)}
.pin-on .pin__nav{display:grid;gap:var(--space-3)}
.pin__bar{display:block;height:1px;background:var(--line)}
.pin__bar i{display:block;height:1px;background:var(--gold);transform-origin:left;transform:scaleX(var(--p,0))}
.pin__steps{display:flex;gap:var(--space-8)}
.pin__steps button{padding:var(--space-2) 0;border:0;background:none;color:var(--text-muted);font:600 11px/1.35 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.pin__steps button[aria-current="step"]{color:var(--text)}

/* How it works · ink band */
[data-theme="ink"].pin,[data-theme="ink"] .pin__stick{background:var(--surface-page)}
.step{display:grid;gap:var(--space-6);align-content:start}
/* Panels never change height between steps. */
.pin-on .step .art{min-height:280px;display:grid;align-content:center}
.step__head{display:grid;gap:var(--space-2)}
.step__head .fx-label-s{color:var(--text-muted)}
.step__h{font-size:40px;line-height:1.08;letter-spacing:-.01em}
.step__h{font-family:var(--font-display)}
.step__h.g70{font-family:var(--font-grade70)}.step__h.g35{font-family:var(--font-grade35)}
.step__line{color:var(--text-muted)}

/* Diagrams (DESIGN.md §6, working rules): agents dotted with a faint dot fill, people and
   documents solid hairline, the rulebook gold and ending in the seal, gold where the rule runs. */
.art{background:var(--surface-section);padding:var(--space-6);min-width:0}
.art--paper{background:var(--surface-section)}
@media (max-width:599px){.art{padding:var(--space-4)}}
.flow{display:flex;flex-direction:column;align-items:stretch}
.node{position:relative;display:grid;gap:2px;align-content:center;padding:var(--space-3) var(--space-4);background:var(--surface-raised);border:1px solid var(--line-strong);min-width:0}
.node__k{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font:600 11px/1.35 var(--font-sans);letter-spacing:.1em;text-transform:uppercase}
.node__v{font-size:14px;line-height:1.35;color:var(--text-muted)}
.node__gold{color:var(--gold-text);font-weight:500}
.node--agent{border-style:dotted;border-color:var(--text-muted)}
.node--agent::before{content:"";position:absolute;inset:0;background:currentColor;opacity:.14;pointer-events:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='1.5' height='1.5'/%3E%3C/svg%3E");mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='1.5' height='1.5'/%3E%3C/svg%3E")}
.node--rule{border-color:var(--gold)}
.node__seal{display:block;width:40px;height:40px;margin-top:var(--space-2)}
.tag{display:inline-block;padding:1px 5px;border:1px solid var(--text);font:600 10.5px/1.3 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.tag--dashed{border-style:dashed;border-color:var(--text-muted);color:var(--text-muted)}
.group{display:grid;gap:var(--space-2)}
/* Connectors: orthogonal, line then arrowhead. Vertical on phones, horizontal from 700px. */
.link{position:relative;flex:none;align-self:center;width:1px;height:28px;background:var(--line-strong);color:var(--line-strong);margin-bottom:7px}
.link::after{content:"";position:absolute;left:-4px;bottom:-7px;width:9px;height:7px;background:currentColor;clip-path:polygon(0 0,100% 0,50% 100%)}
.link--gold{background:var(--gold);color:var(--gold)}
@media (min-width:700px){
  .flow:not(.flow--v){flex-direction:row;align-items:center}
  .flow:not(.flow--v) > .node,.flow:not(.flow--v) > .group{flex:1 1 0}
  .flow:not(.flow--v) > .link{width:40px;height:1px;margin:0 9px 0 0}
  .flow:not(.flow--v) > .link::after{left:auto;right:-7px;bottom:auto;top:-4px;width:7px;height:9px;clip-path:polygon(0 0,100% 50%,0 100%)}
  /* Several nodes feeding one link: a stub from each and a bus joining their centres. */
  .flow:not(.flow--v) .group--out,.flow:not(.flow--v) .group--in{position:relative;grid-auto-rows:1fr}
  .group--out{padding-right:16px}
  .group--out > .node::after{content:"";position:absolute;top:50%;right:-17px;width:16px;height:1px;background:var(--line-strong)}
  .group--out::after{content:"";position:absolute;right:0;width:1px;background:var(--line-strong);top:calc((100% - (var(--n,3) - 1) * var(--space-2)) / (2 * var(--n,3)));bottom:calc((100% - (var(--n,3) - 1) * var(--space-2)) / (2 * var(--n,3)))}
  .group--in{--n:2;padding-left:16px}
  .group--in > .node::after{content:"";position:absolute;top:50%;left:-17px;width:16px;height:1px;background:var(--line-strong)}
  .group--in > .node--gold-in::after{background:var(--gold)}
  .group--in::after{content:"";position:absolute;left:0;width:1px;background:var(--line-strong);top:calc((100% - var(--space-2)) / 4);bottom:calc((100% - var(--space-2)) / 4)}
}

/* Ledger row */
.ledger{display:grid;gap:var(--space-4)}
.ledger .fx-table td,.ledger .fx-table th{padding:10px 12px}
@media (max-width:599px){.ledger .fx-table td,.ledger .fx-table th{padding:8px 6px;font-size:13px}}
.ledger__rec,.try__rec{display:flex;align-items:center;gap:var(--space-2);color:var(--gold-text);font-size:14px;font-weight:500}
.ledger__rec img,.try__rec img{display:block}

/* ---------- Try it ---------- */
.seg{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.seg button{padding:8px 12px;border:1px solid var(--line-strong);background:none;color:var(--text);font:500 14px/1.2 var(--font-sans);cursor:pointer}
.seg button:hover{border-color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--surface-page)}
.try{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.try__cell{display:grid;align-content:start;gap:var(--space-3);padding:var(--space-6);background:var(--surface-raised);min-width:0}
.try__cell .fx-label{color:var(--text-muted)}
.try__val{display:block;font-family:var(--font-display);font-size:clamp(40px,11vw,56px);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* Under and over: the track splits at the limit; the side the value is on lights up. The limit
   sits at the midpoint of the range ($0 to $1,000, limit $500). */
.try__lbl{margin-top:var(--space-4)}
.zones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-1)}
.zone{display:grid;gap:2px;padding-top:var(--space-3);border-top:3px solid var(--line);color:var(--text-muted);font-size:15px;transition:border-color 180ms var(--ease),color 180ms var(--ease)}
.zone .fx-label-s{color:inherit}
.zone[data-zone="over"]{text-align:right}
.zone.is-on{border-color:var(--text);color:var(--text)}
.zone[data-zone="over"].is-on{border-color:var(--red-surface)}
.try__rk{color:var(--text-muted)}
.try__rule{font-family:var(--font-display);font-size:22px;line-height:1.2;text-wrap:balance}
.try__out{gap:var(--space-4)}
.out{display:grid;gap:var(--space-1);padding:var(--space-4) var(--space-6);border:1px solid var(--line);color:var(--text-muted);transition:background-color 180ms var(--ease),color 180ms var(--ease)}
.out--agent{border-style:dashed}
.out .fx-label-s{color:inherit}
.out__t{font-family:var(--font-display);font-size:24px;line-height:1.15}
.out__l{font-size:14px}
/* Owner names vary in length; reserve two lines so the cell never changes height. */
.out--owner .out__t{min-height:2.3em}
.out.is-on{color:var(--text);border-color:var(--text)}
/* The held case is a red highlight: data-theme="red" is set on the owner box only while it is on. */
.out--owner.is-on{border-color:var(--red-surface)}
.out:not(.is-on) .out__t,.out:not(.is-on) .out__l{color:var(--text-muted)}
.try__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6)}
@media (min-width:1000px){.try{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.try__val{font-size:clamp(48px,4.6vw,76px)}}

/* Range slider: square thumb, hairline track */
.range{width:100%;height:28px;margin:var(--space-2) 0 0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.range::-webkit-slider-runnable-track{height:2px;background:var(--line-strong)}
.range::-moz-range-track{height:2px;background:var(--line-strong)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-9px;background:var(--text);border:0;border-radius:0}
.range::-moz-range-thumb{width:20px;height:20px;background:var(--text);border:0;border-radius:0}

/* ---------- The platform ---------- */
.node--seal{justify-items:center;text-align:center}
.node--seal .node__k{justify-content:center}
.node--seal .grain-box{width:min(120px,100%);height:auto;aspect-ratio:1}
.grain-box{position:relative;display:block;width:96px;height:96px;margin-block:var(--space-2)}
.grain-box img,.grain-box canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.grain-box img{inset:14%;width:72%;height:72%}
.grain-box canvas{image-rendering:pixelated;color:var(--grain)}
.grain-on .grain-box__end{visibility:hidden}
.grain-box__canvas{visibility:hidden}
.grain-on .grain-box__canvas{visibility:visible}
.parts{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.part{display:grid;gap:var(--space-2);align-content:start;padding:var(--space-6) 0;border-bottom:1px solid var(--line)}
.part .fx-icon{color:var(--text)}
.part__h{font-family:var(--font-display);font-size:28px;line-height:1.12}
.part p{color:var(--text-muted);max-width:34ch}
@media (min-width:700px){
  .parts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .part{padding:var(--space-6)}
  .part:nth-child(odd){padding-left:0;border-right:1px solid var(--line)}
}
#platform .fx-btn--quiet{justify-self:start}

/* ---------- The difference ---------- */
.cmp{background:none;font-size:16px}
.cmp th,.cmp td{padding:16px}
.cmp thead th{font-size:11px}
.cmp tbody th{font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text);border-bottom:1px solid var(--line)}
.cmp td{color:var(--text-muted)}
.cmp .cmp__fx{background:var(--surface-raised);color:var(--text)}
.cmp__head{display:inline-flex;align-items:center;gap:var(--space-2)}
.cmp__head img{display:block}
@media (max-width:599px){.cmp th,.cmp td{padding:12px 8px}.cmp{font-size:14px}.cmp tbody th{font-size:14px}}

/* ---------- Getting started ---------- */
.gs{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
.gs__text{display:grid;gap:var(--space-6);align-content:center}
.gs__step{display:grid;gap:var(--space-2)}
.gs__n{color:var(--text-muted)}
.gs__h{font-family:var(--font-display);font-size:44px;line-height:1.04;letter-spacing:-.015em}
.gs__line{color:var(--text-muted);font-size:18px}
.gs__seal{width:min(100%,360px);height:auto;aspect-ratio:1;margin:0;justify-self:center}
.pin-on .gs__chips{display:flex;gap:var(--space-2);margin:0}
.gs__chips span{padding:4px 10px;border:1px solid var(--line-strong);font-size:13px;font-weight:500;color:var(--text-muted)}
.gs__chips span.is-on{background:var(--text);border-color:var(--text);color:var(--surface-page)}
.pin-on .gs__n{display:none}
.pin-on .gs__bar{display:block;height:2px;background:var(--line);max-width:360px}
.gs__bar i{display:block;height:2px;background:var(--text);transform-origin:left;transform:scaleX(var(--p,0))}
@media (min-width:1000px){.gs{grid-template-columns:minmax(0,1fr) 360px;align-items:center}.gs__h{font-size:68px}}

/* ---------- Solutions ---------- */
.sols{gap:var(--space-12)}
.sols__k{margin-bottom:var(--space-3);color:var(--text-muted)}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-4);align-items:center;padding:var(--space-4);border-bottom:1px solid var(--line);text-decoration:none;color:var(--text);transition:background-color 180ms var(--ease)}
.row__t{font-family:var(--font-display);font-size:24px;line-height:1.15}
.row__l{grid-column:1;color:var(--text-muted);font-size:15px}
.row .fx-icon{grid-column:2;grid-row:1/3;transition:transform 250ms var(--ease)}
.row:hover{background:var(--surface-raised)}
.row:hover .fx-icon{transform:translateX(4px)}
@media (min-width:1000px){.row{grid-template-columns:minmax(0,240px) minmax(0,1fr) auto}.row__l{grid-column:2}.row .fx-icon{grid-column:3;grid-row:1}}

/* ---------- Questions ---------- */
:root{interpolate-size:allow-keywords}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);padding:var(--space-6) 0;font-family:var(--font-display);font-size:24px;line-height:1.2;list-style:none;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa details[open] .mplus::after{transform:rotate(0)}
.qa p{max-width:60ch;padding-bottom:var(--space-6);color:var(--text-muted)}
.qa details::details-content{height:0;overflow:clip;transition:height 300ms var(--ease),content-visibility 300ms allow-discrete}
.qa details[open]::details-content{height:auto}
.qa details p{transform:translateY(-6px);transition:transform 300ms var(--ease)}
.qa details[open] p{transform:none}

/* ========== Platform page ========== */

/* Hero: paper, two columns, the case diagram on the right. */
.phero{padding-block:var(--space-12) var(--space-16)}
.phero__in{display:grid;gap:var(--space-12);align-items:center}
.phero__copy{display:grid;gap:var(--space-6);align-content:center}
.phero__h{font-family:var(--font-display);font-size:44px;line-height:1;letter-spacing:-.015em}
.crumbs ol{display:flex;gap:var(--space-2);margin:0;padding:0;list-style:none;font:600 11px/1.35 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.crumbs li + li::before{content:"/";margin-right:var(--space-2)}
.crumbs a{color:var(--text-muted);text-decoration:none}
.crumbs a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--text)}
.phero__art .node{transition:border-color 180ms var(--ease),color 180ms var(--ease)}
/* The outputs need the most room; the rulebook node only holds the seal. */
@media (min-width:700px){.phero__art .flow > .group{flex-grow:1.5}.phero__art .flow > .node--seal{flex:0 0 168px}}
[data-cases] [data-case-out]:not(.is-on){opacity:.55}
[data-cases] [data-case-out].is-on{border-color:var(--text)}
[data-cases] [data-case-out].is-on .node__v{color:var(--text)}
@media (min-width:600px){.phero__h{font-size:64px}}
@media (min-width:1000px){
  .phero{padding-block:var(--space-24) var(--space-32)}
  .phero__in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-12)}
  .phero__h{font-size:clamp(60px,5.6vw,80px);line-height:.98;letter-spacing:-.02em}
}

/* Four parts: tabs with auto-advance. Panels share one grid cell so the height never changes. */
.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tab{position:relative;display:grid;gap:var(--space-1);align-content:start;padding:var(--space-4);border:0;background:var(--surface-page);color:var(--text-muted);text-align:left;cursor:pointer;font:inherit}
.tab .fx-label-s{color:inherit}
.tab__n{font-family:var(--font-display);font-size:22px;line-height:1.15;color:var(--text-muted)}
.tab[aria-selected="true"]{background:var(--surface-raised);color:var(--text)}
.tab[aria-selected="true"] .tab__n{color:var(--text)}
.tab:hover .tab__n{color:var(--text)}
.tab__bar{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--text);transform-origin:left;transform:scaleX(0)}
.tab[aria-selected="true"] .tab__bar{transform:scaleX(var(--t,1))}
.panels{display:grid}
/* Swaps fade in place: the outgoing panel goes at once, the incoming one fades in, so the two never overlap. */
.panel{grid-area:1/1;display:grid;gap:var(--space-6);align-content:start;visibility:hidden;opacity:0}
.panel.is-on{visibility:visible;opacity:1;transition:opacity 180ms var(--ease)}
.panel__text{display:grid;gap:var(--space-2);align-content:start}
.panel__h{font-family:var(--font-display);font-size:28px;line-height:1.12;text-wrap:balance}
@media (min-width:1000px){
  .tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tab__n{font-size:26px}
  .panel{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--space-8)}
  .panel__h{font-size:30px}
}

/* Demo panels: product objects, raised white with hairlines. */
.demo{display:grid;gap:var(--space-4);align-content:start;padding:var(--space-6);background:var(--surface-raised);border:1px solid var(--line);min-width:0}
.demo__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}
.demo__head .fx-label-s{color:var(--text-muted)}
.srcs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.srcs li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-1) var(--space-3);align-items:center;padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.srcs__n{font-weight:500}
.srcs__v{grid-column:2;color:var(--text-muted);font-size:14px}
.srcs .tag{grid-column:3;grid-row:1/3}
.srcs .fx-icon{grid-row:1/3;color:var(--text)}
@media (min-width:600px){.srcs li{grid-template-columns:auto 12ch minmax(0,1fr) auto}.srcs__v{grid-column:3}.srcs .tag{grid-column:4;grid-row:1}.srcs .fx-icon{grid-row:1}}
.demo__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);font-size:15px}
.demo__foot img{display:block}
.demo__foot--split{justify-content:space-between}
.gold-text{color:var(--gold-text);font-weight:500}
.who{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid var(--text);font:600 11px/1 var(--font-sans);letter-spacing:.06em}
.demo__rule{font-family:var(--font-display);font-size:26px;line-height:1.2;text-wrap:balance}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}
.chips li{position:relative;padding:6px 12px;border:1px dashed var(--text-muted);font-size:14px;font-weight:500}
.chips li::before{content:"";position:absolute;inset:0;background:currentColor;opacity:.12;pointer-events:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='1.5' height='1.5'/%3E%3C/svg%3E");mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='1.5' height='1.5'/%3E%3C/svg%3E")}
.demo--held{border-color:var(--red-surface)}
.demo--held .fx-label-s{color:var(--text-muted)}
.demo__case{font-family:var(--font-display);font-size:40px;line-height:1.05;letter-spacing:-.015em}
.demo__row{display:flex;align-items:center;gap:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line)}
.demo--held .who{border-color:var(--text)}
.demo__btns{display:flex;gap:var(--space-3);margin-top:var(--space-2)}
.demo__btns .fx-btn{cursor:default}
.lt td,.lt th{padding:10px 12px}
.lt td:first-child{font-variant-numeric:tabular-nums}
.lt tbody tr{transition:opacity 180ms var(--ease)}
.lt.is-replaying tbody tr{opacity:0}
.lt.is-replaying tbody tr.is-in{opacity:1}
.ok{display:inline-flex;align-items:center;gap:6px}
.ok img{display:block}
@media (max-width:599px){.lt td,.lt th{padding:8px 6px;font-size:13px}}

/* End to end · ink band, three steps side by side. */
.e2e{display:grid;gap:var(--space-12);margin:0;padding:0;list-style:none}
.e2e__step{display:grid;gap:var(--space-3);align-content:start}
.e2e__step .art{margin-top:var(--space-3);padding:var(--space-4)}
/* .flow--v stays vertical at every width (see the 700px rule on .flow:not(.flow--v)). */
.flow--v > .link{height:24px}
.node--row{display:flex;align-items:center;gap:var(--space-3)}
.rec{display:grid;gap:0;margin:0}
.rec div{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--line)}
.rec dt{font:600 11px/1.35 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.rec dd{margin:0;font-size:14px}
.e2e .ledger__rec{margin-top:var(--space-3)}
@media (min-width:1000px){.e2e{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}}

/* Versions timeline */
.vers{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none}
.ver{position:relative;display:grid;gap:var(--space-2);align-content:start;padding:var(--space-4) var(--space-6);border:1px solid var(--line-strong);background:var(--surface-section)}
.ver__k{color:var(--text-muted)}
.ver__k--gold{display:flex;align-items:center;gap:6px;color:var(--gold-text)}
.ver__k--gold img{display:block}
.ver__t{font-family:var(--font-display);font-size:24px;line-height:1.15}
.ver--live{background:var(--surface-raised);border-color:var(--gold)}
@media (min-width:700px){
  .vers{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
  .ver + .ver::before{content:"";position:absolute;top:50%;left:calc(-1 * var(--space-8) - 1px);width:var(--space-8);height:1px;background:var(--line-strong)}
}
[data-versions] .fx-btn--quiet{justify-self:start}

/* Integrations */
.ints__k{color:var(--text-muted)}
.node__seal--l{width:56px;height:56px;margin:var(--space-2) auto}
[data-model]{display:inline-block;transition:opacity 180ms var(--ease)}
[data-model].is-swapping{opacity:0}

/* ---------- Home: pinned sections and How it works ---------- */
/* Home runs a tighter section rhythm on wide screens: 64px instead of 96px top and bottom. */
@media (min-width:1000px){.home{--sec-pad:var(--space-16)}}
/* Home pins scroll 35% of the viewport per step (src/js/pin.js, data-pin-fit). */
.home .pin{--pin-step:.35}
/* Getting started pinned: a larger seal and step type, so the centred frame carries the screen. */
@media (min-width:1000px){
  .home .gs{grid-template-columns:minmax(0,1fr) 480px;align-items:start}
  .home .gs__text{padding-top:var(--space-2)}
  .home .gs__seal{width:min(100%,480px)}
  .home .gs__h{font-size:88px}
  .home .gs__line{font-size:22px}
}
/* The pinned frame is only as tall as its content and sits under the nav, so when the steps run
   out the next section is already rising beneath it: no empty band between the two pins. */
.pin-on .home .pin__stick{height:auto;align-items:flex-start;padding-block:var(--space-12)}
/* The frame is shorter than the screen now, so the ink grain bleeds past it into the band below
   and is cut by the section, never by the frame's edge. */
.pin-on .home .pin[data-theme="ink"]{overflow:clip}
.pin-on .home [data-theme="ink"] .pin__stick{overflow:visible}
/* How it works: a narrower measure, the diagrams zoomed in to fill their panel, gold on the
   rule path. Red stays off ink (DESIGN.md §1 rule 6): conflicts and the held case are bone. */
.home #how .wrap{max-width:1120px}
.home #how .step__head .fx-label-s{color:var(--gold-text)}
.home #how .step__h{font-size:48px;color:var(--text)}
.home #how .art{padding:var(--space-6);min-height:0}
/* Pinned, the steps share one cell sized by the tallest (Seal). Every step's panel stretches to
   that height and centres its diagram, so the shorter steps never leave a gap above the nav. */
.pin-on .home #how .step{grid-template-rows:auto minmax(0,1fr);align-content:stretch}
.pin-on .home #how .step .art{min-height:0;height:100%;display:grid;align-content:center}
.home #how .node{padding:var(--space-4) var(--space-4);background:color-mix(in srgb,var(--text) 9%,var(--surface-page));border-color:var(--line-strong)}
.home #how .node__k{font-size:13px}
.home #how .node__v{font-size:17px;color:var(--text)}
.home #how .node--agent{border-color:var(--text-muted)}
.home #how .node--rule{border:2px solid var(--gold)}
.home #how .node--rule .node__k,.home #how .node__gold{color:var(--gold-text)}
.home #how .node__seal{width:60px;height:60px}
.home #how .tag{background:var(--text);border-color:var(--text);color:var(--surface-page)}
.home #how .tag--dashed{background:none;border-color:var(--text-muted);color:var(--text-muted)}
.home #how .group--in > .node:not(.node--gold-in){border:1.5px solid var(--text)}
.home #how .group--in > .node:not(.node--gold-in) .node__k{color:var(--text)}
.home #how .link{background:var(--text-muted);color:var(--text-muted)}
.home #how .link--gold{background:var(--gold);color:var(--gold)}
@media (min-width:700px){.home #how .flow:not(.flow--v) > .link--gold{height:2px}}
.home #how .ledger .fx-table{font-size:16px}
.home #how .ledger .fx-table td,.home #how .ledger .fx-table th{padding:14px 16px}
.home #how .ledger__rec{font-size:16px}
.home #how .pin__steps button[aria-current="step"]{color:var(--gold-text)}
@media (min-width:1000px){
  .home #how .rails{grid-template-columns:280px minmax(0,1fr)}
  .home #how .step__h{font-size:60px}
  .home #how .rail__body{padding-left:var(--space-12)}
}
@media (max-width:599px){.home #how .ledger .fx-table{font-size:14px}.home #how .ledger .fx-table td,.home #how .ledger .fx-table th{padding:8px 6px}}

/* ---------- Ink bands ---------- */
/* The step bands (How it works, end to end): the gold grain seal, cropped large, bleeds off the
   bottom-left corner under the rail (DESIGN.md §5: gold on ink, 0.5 behind text). In a pinned
   band it sits on the sticky frame, so it stays put while the steps change. Short ink bands
   have no room under the heading, so they stay plain. A pinned frame is already sticky, which
   positions the grain; only the unpinned frame needs position:relative (never override sticky). */
.sec[data-theme="ink"]:has(.e2e),[data-theme="ink"] .pin__stick{overflow:clip}
.sec[data-theme="ink"]:has(.e2e),html:not(.pin-on) [data-theme="ink"] .pin__stick{position:relative}
.sec[data-theme="ink"]:has(.e2e)::before,[data-theme="ink"] .pin__stick::before{content:"";position:absolute;left:0;bottom:0;width:320px;aspect-ratio:1;background:url("../../design/assets/grain/grain-seal-gold-720.png") center/contain no-repeat;transform:translate(-38%,38%);opacity:.5;image-rendering:pixelated;pointer-events:none}
.sec[data-theme="ink"]:has(.e2e) > .wrap,[data-theme="ink"] .pin__stick > .wrap{position:relative}
@media (min-width:1000px){.sec[data-theme="ink"]:has(.e2e)::before,[data-theme="ink"] .pin__stick::before{width:min(40vw,580px);transform:translate(-30%,30%)}}

/* ---------- Close band ---------- */
.close{position:relative;overflow:hidden;background:var(--surface-page);color:var(--text);padding-block:72px}
.close__grain{position:absolute;top:50%;right:0;width:min(56%,620px);height:auto;transform:translate(28%,-50%);opacity:.55;image-rendering:pixelated;pointer-events:none}
.close__in{position:relative;display:grid;justify-items:start;gap:var(--space-4)}
.close__h{font-family:var(--font-display);font-size:40px;line-height:1.04;letter-spacing:-.015em;max-width:14ch}
.close__line{color:var(--text-muted);max-width:38ch;margin-bottom:var(--space-4)}
@media (min-width:1000px){.close__h{font-size:64px}}
@media (max-width:999px){.close{padding-bottom:160px}.close__grain{width:340px;top:auto;bottom:0;transform:translate(30%,45%)}}

/* ---------- Security band (above the footer) ---------- */
/* The audits as a hairline grid of square marks beside one line of copy (DESIGN.md: radius 0). */
.trust{padding-block:var(--sec-pad);background:var(--surface-section)}
.trust__in{display:grid;gap:var(--space-8);align-items:center}
.trust__copy{display:grid;gap:var(--space-3);align-content:start}
.trust__h{font-family:var(--font-display);font-size:34px;line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.trust__copy > p:last-child{color:var(--text-muted);max-width:44ch}
/* The audits as rule cards (Rena's .fx-rule): issuer, name, a sealed status pill, the gold seal
   in the corner at its sealed level. Hairline grid, square corners. */
.trust__marks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:600px){.trust__marks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mark{display:flex;flex-direction:column;min-height:160px;padding:var(--space-6) var(--space-4) var(--space-4);border:0}
.mark__by{color:var(--text-muted)}
.mark__n{font-family:var(--font-display);font-size:24px;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.mark .fx-rule__foot{margin-top:auto}
.mark .fx-rule__seal{right:var(--space-4);bottom:var(--space-4);width:44px;height:44px;image-rendering:auto}
@media (min-width:1000px){
  .trust__in{grid-template-columns:320px minmax(0,1fr);gap:var(--space-12);align-items:start}
  .trust__h{font-size:44px}
  .trust__marks{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mark{min-height:220px}
}

/* ---------- Footer ---------- */
.foot{padding-block:var(--space-16) var(--space-8);font-size:14px}
.foot__top{display:grid;gap:var(--space-12)}
.foot__brand{display:grid;gap:var(--space-4);align-content:start}
.foot__brand img{display:block;height:24px;width:auto}
.foot__brand p{color:var(--text-muted);max-width:30ch}
.foot__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8) var(--space-6)}
.foot__cols h2{margin-bottom:var(--space-3);color:var(--text-muted)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.foot a{color:var(--text);text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:4px}
.foot__base{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-6);margin-top:var(--space-12);padding-top:var(--space-4);border-top:1px solid var(--line);color:var(--text-muted)}
.foot__base img{display:block}
.foot__base a{color:var(--text-muted)}
@media (min-width:1000px){
  .foot__top{grid-template-columns:2fr 3fr}
  .foot__cols{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ========== Solution, company and resource pages ========== */

/* One-column hero (no object): the copy keeps its measure. */
.phero__in--solo{grid-template-columns:minmax(0,1fr)}
.phero__in--solo .phero__copy{max-width:880px}
.phero__copy > .fx-label.eyebrow{margin-bottom:calc(-1 * var(--space-3))}

/* Rulebook card: the hero object, a red highlight (data-theme="red"), so it is all tones of white. */
.rb{display:grid;gap:var(--space-4);align-content:start;padding:var(--space-8) var(--space-6);min-width:0}
.rb__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4)}
.rb__head img{display:block;flex:none}
.rb__t{font-family:var(--font-display);font-size:32px;line-height:1.1}
.rb__meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);color:var(--text-muted);font-size:15px}
.rb__rules{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rb__rules li{display:grid;grid-template-columns:5ch minmax(0,1fr);gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line);font-size:15px}
.rb__id{font-weight:600;font-variant-numeric:tabular-nums}
.rb__rec{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-3);align-items:center;margin-top:var(--space-2);padding:var(--space-3) var(--space-4);border:1px solid var(--line-strong)}
.rb__case{font-size:14px;font-weight:500;overflow-wrap:anywhere}
.rb__why{grid-column:1/-1;font-size:13px;color:var(--text-muted)}
.rb .rec dt{color:var(--text-muted)}
.rb .rec div:first-child{border-top:1px solid var(--line)}
.rb__foot{font-size:13px;color:var(--text-muted)}
@media (min-width:1000px){.rb{padding:var(--space-12) var(--space-8)}.rb__t{font-size:40px}}

/* Three across on wide screens; the two-column rule below 1000px still applies. */
.part__k{color:var(--text-muted)}
.part .fx-link{justify-self:start;margin-top:var(--space-2)}
.part--soon .part__h{color:var(--text-muted)}
@media (min-width:1000px){
  .parts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .parts--3 .part{padding:var(--space-6);border-right:1px solid var(--line)}
  .parts--3 .part:nth-child(3n+1){padding-left:0}
  .parts--3 .part:nth-child(3n){border-right:0}
}
.rail__body > .fx-btn--quiet,.rail__body > .fx-btn--secondary{justify-self:start}

/* Enforce: two outcomes stacked under the check. */
.node .tag{justify-self:start;margin-top:var(--space-1)}
.e2e .step__line{max-width:30ch}

/* A one-line statement under a section (About). */
.say{font-family:var(--font-display);font-size:28px;line-height:1.15;max-width:26ch;text-wrap:balance}
@media (min-width:1000px){.say{font-size:34px}}

.cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-6);padding:var(--space-6) 0;border-bottom:1px solid var(--line)}
.cta-row p{font-family:var(--font-display);font-size:24px;line-height:1.2;max-width:30ch}

/* Security: the two audits, raised on paper. */
.certs{display:grid;gap:var(--space-4)}
.cert{display:grid;gap:var(--space-2);align-content:start;padding:var(--space-6);background:var(--surface-raised);border:1px solid var(--line)}
.cert__n{font-family:var(--font-display);font-size:34px;line-height:1.1}
.cert .fx-label-s{color:var(--text-muted)}
@media (min-width:600px){.certs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Careers: roles land here from the careers system. */
.empty{padding:var(--space-8);border:1px dashed var(--line-strong);color:var(--text-muted)}

/* Forms (Book a demo, Partners): Rena's .fx-field and .fx-input, laid out on a raised panel. */
.form{display:grid;gap:var(--space-4);padding:var(--space-6);background:var(--surface-raised);border:1px solid var(--line);min-width:0}
.form .fx-field{max-width:none}
.form .fx-label{color:var(--text)}
.form .opt{font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-muted)}
.form textarea.fx-input{height:auto;min-height:96px;padding:10px 12px;resize:vertical;line-height:1.45}
.form select.fx-input{padding-right:12px}
.form__row{display:grid;gap:var(--space-4)}
.form .fx-btn{justify-self:start}
.form__priv{font-size:13px;color:var(--text-muted)}
.form__priv a{color:inherit}
.form__note{font-size:15px;font-weight:500;min-height:1.4em}
.form__note:empty{display:none}
.fx-field--error .fx-input{border-width:2px}
@media (min-width:600px){.form__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.form{padding:var(--space-8)}}

/* Book a demo: what happens next, beside the form. */
.dm{display:grid;gap:var(--space-12)}
.dm__text{display:grid;gap:var(--space-6);align-content:start}
.dm__steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.dm__steps li{display:grid;gap:var(--space-2);padding:var(--space-6) 0;border-bottom:1px solid var(--line)}
.dm__steps p{color:var(--text-muted);max-width:44ch}
.dm__cal{font-size:14px;color:var(--text-muted)}
@media (min-width:1000px){.dm{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-16)}}

/* ========== Blog ========== */
/* Index: the newest post as one large row, hairline-framed, the whole row a link. */
.feat{display:grid;gap:var(--space-3);padding:var(--space-8) 0;border-block:1px solid var(--line);color:var(--text);text-decoration:none}
.feat__k{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);color:var(--text-muted)}
.feat__h{font-family:var(--font-display);font-size:34px;line-height:1.08;letter-spacing:-.01em;max-width:22ch;text-wrap:balance}
.feat__l{color:var(--text-muted);max-width:56ch}
.feat__go{justify-self:start;display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2)}
.feat__go .fx-icon{transition:transform 250ms var(--ease)}
.feat:hover .feat__h{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.feat:hover .feat__go .fx-icon{transform:translateX(4px)}
.feat:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (min-width:1000px){.feat__h{font-size:48px}}

/* Post: headline and dek, the two-panel figure, then the body beside an in-post contents rail. */
.post{padding-block:var(--space-12) 0}
.post__head{display:grid;gap:var(--space-6)}
.post__head .phero__h{max-width:18ch}
.post__dek{font-size:21px;line-height:1.5;color:var(--text-muted);max-width:56ch}
.post__by{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);color:var(--text-muted)}
.post__fig{margin-block:var(--space-12)}
.post__figs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.post__panel{display:grid;gap:var(--space-4);align-content:start}
.post__panel svg{display:block;width:100%;height:auto}
.post__panel figcaption{font-size:14px;color:var(--text-muted);text-align:center}
.pf-agent rect,rect.pf-agent{fill:var(--surface-raised);stroke:var(--text-muted);stroke-width:1.5;stroke-dasharray:2 3}
.pf-out{opacity:.4}
.pf-link{fill:none;stroke:var(--line-strong);stroke-width:1.2}
.pf-link .pf-swap{stroke-dasharray:2 4}
.pf-bit rect{fill:var(--text-muted)}
.pf-rule{fill:var(--surface-raised);stroke:var(--gold);stroke-width:2}
@media (min-width:700px){.post__figs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.post__rails{padding-bottom:var(--sec-pad)}
.post__toc{display:none}
.post__toc ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2);font-size:14px}
.post__toc a{color:var(--text-muted);text-decoration:none}
.post__toc a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.post__toc .fx-label-s{color:var(--text-muted)}
@media (min-width:1000px){.post__toc{display:grid}}
.post__body{display:block;max-width:calc(68ch + var(--space-12));font-size:18px;line-height:1.7}
.post__body > * + *{margin-top:var(--space-6)}
.post__body h2{margin-top:var(--space-12);font-family:var(--font-display);font-size:30px;line-height:1.12;letter-spacing:-.01em;text-wrap:balance;scroll-margin-top:calc(var(--nav-h) + var(--space-6))}
.post__body ol:not(.post__sources){padding-left:1.4em;display:grid;gap:var(--space-3)}
.post__body sup{line-height:0}
.post__body .ref{font-size:12px;font-weight:600;color:var(--seal);text-decoration:none;padding-inline:2px}
.post__body .ref:hover{text-decoration:underline}
.post__pull{margin-inline:0;padding-block:var(--space-6);border-block:1px solid var(--line);font-family:var(--font-display);font-size:28px;line-height:1.2;text-wrap:balance}
.post__close{font-family:var(--font-display);font-size:26px;line-height:1.25;text-wrap:balance}
.post__sources{padding-left:1.4em;display:grid;gap:var(--space-2);font-size:14px;line-height:1.5;color:var(--text-muted)}
.post__sources li{scroll-margin-top:calc(var(--nav-h) + var(--space-6))}
.post__sources a{color:var(--text)}
@media (min-width:1000px){.post__body h2{font-size:34px}.post__pull{font-size:34px}}

/* ========== Pricing ========== */
/* Copy and three ticks on the left; the quote card on the right, one question at a time. */
.ticks{list-style:none;margin:var(--space-2) 0 0;padding:0;display:grid;gap:var(--space-3)}
.ticks li{display:flex;align-items:center;gap:var(--space-3)}
.quote{display:grid;gap:var(--space-6);padding:var(--space-8) var(--space-6);background:var(--surface-section);min-width:0}
.quote__head{display:grid;gap:var(--space-2)}
.quote__h{font-family:var(--font-display);font-size:32px;line-height:1.1}
.quote__head p{color:var(--text-muted)}
.quote__form{gap:var(--space-6)}
.quote__progress{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.quote__progress li{padding-top:var(--space-2);border-top:2px solid var(--line);font:600 11px/1.35 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.quote__progress li.is-on{border-color:var(--text);color:var(--text)}
.quote__step{display:grid;gap:var(--space-4);margin:0;padding:0;border:0;min-width:0}
.quote__q{padding:0;font-family:var(--font-display);font-size:26px;line-height:1.15}
.quote__step .fx-btn--secondary{justify-self:start}
.quote__nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-4)}
.checks{display:grid;gap:var(--space-2)}
.check{display:flex;align-items:flex-start;gap:var(--space-3);padding:12px 14px;border:1px solid var(--line-strong);background:var(--surface-raised);cursor:pointer;font-size:15px;line-height:1.4}
.check:has(input:checked){border-color:var(--text)}
.check--plain{padding:0;border:0;background:none;font-size:14px;color:var(--text-muted)}
.check--plain a{color:var(--text)}
.check input{flex:none;appearance:none;-webkit-appearance:none;display:grid;place-content:center;width:18px;height:18px;margin:1px 0 0;border:1.5px solid var(--text);border-radius:0;background:var(--surface-raised);cursor:pointer}
.check input::before{content:"";width:10px;height:10px;background:var(--text);transform:scale(0);transition:transform 120ms var(--ease)}
.check input:checked::before{transform:scale(1)}
.check input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.quote__err{color:var(--seal)}
@media (min-width:600px){.checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.quote{padding:var(--space-12) var(--space-8)}}

/* FAQ answers with a learn-more link */
.qa__a{display:grid;gap:var(--space-3);padding-bottom:var(--space-6)}
.qa .qa__a p{padding-bottom:0}
.qa__more{display:inline-flex;align-items:center;gap:var(--space-1);width:max-content;font-weight:500;color:var(--text)}
.qa details .qa__a{transform:translateY(-6px);transition:transform 300ms var(--ease)}
.qa details[open] .qa__a{transform:none}

/* Try it: a transfer checked against three sourced rules */
.trules{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.trules li{display:grid;grid-template-columns:auto 1fr;gap:2px var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line);color:var(--text-muted);transition:color 180ms var(--ease)}
.trules__id{grid-row:span 2;font-weight:600;font-size:13px;letter-spacing:.06em;padding-top:2px}
.trules__src{font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.trules li.is-on{color:var(--text)}
.trules li.is-on .trules__id{color:var(--seal)}
.trules__seal{display:flex;align-items:center;gap:var(--space-2);color:var(--gold-text);font-size:14px;font-weight:500}
.tnew{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:500;cursor:pointer;margin-top:var(--space-2)}
.tnew input{width:18px;height:18px;accent-color:var(--seal);margin:0}
.out--owner:not(.is-on){display:none}

/* Trust marks: one icon per standard, no repeated seal; status pill sits on a shared baseline */
.mark{gap:var(--space-2);padding:var(--space-6)}
.mark__ic{display:grid;place-items:center;width:48px;height:48px;margin-bottom:var(--space-4);border:1px solid var(--gold);color:var(--gold-text)}
.mark__ic .fx-icon{font-size:26px;font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 24}
.mark .fx-rule__foot{margin-top:auto;padding-top:var(--space-6)}
.mark .fx-pill{gap:4px;padding:4px 10px 4px 6px}
.mark__ok{font-size:16px;font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 20;color:var(--gold-text)}