/* insimbi.net: the pre-login surface. Tokens mirror iridium-payments/brand kit/tokens/prelogin.css; change them there first.
   Post-login product screens use kit/tokens/tokens.css (light, dense, ticket-first). */
:root{--cusp:#B5237F;--cusp-deep:#9A1C6B;--cusp-ink:#CC67A7;--on-cusp:#FFFFFF;--page:#101315;--raised:#171B1F;--sunken:#1E2429;
--ink:#EEF2F4;--ink-2:#CDD5DA;--ink-3:#8A949A;--hair:#252C32;--rule:#39434A;
--paper:#F4F6F7;--iridium:#B7C1C9;--iridium-metal:linear-gradient(115deg,#8D99A5 0%,#EEF2F6 36%,#AAB6C1 58%,#D9E1E8 100%);--strata-1:#14181B;--strata-2:#191E22;--seam:#C9D0D4;--black:#111417;--st-open:#8FB0E0;--st-review:#D2A63A;--st-done:#3FBF85;--st-void:#EA6259;
--sans:"Schibsted Grotesk",system-ui,sans-serif;--mono:"Martian Mono",ui-monospace,monospace;color-scheme:dark}
/* Rule: --cusp (magenta) is used ONLY on .control elements and the ring's control arc. */
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:3px;text-decoration-color:var(--rule)}a:hover{text-decoration-color:var(--ink)}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:-.01em}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:28px;padding:14px clamp(16px,4vw,40px);
 background:color-mix(in oklab,var(--page) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.brand{display:flex;gap:10px;align-items:center;font-weight:700;letter-spacing:-.02em;text-decoration:none;font-size:22px;line-height:1}.brand img{width:32px;height:32px;flex:none}@media (max-width:760px){.brand{gap:9px;font-size:21px;min-height:32px}.brand img{width:28px;height:28px}}
.top nav{display:flex;gap:20px;font-size:15px}.top nav a{text-decoration:none;color:var(--ink-2)}.top nav a[aria-current]{color:var(--ink)}
.tools{margin-left:auto;display:flex;gap:8px}
.tools button{font:500 12px var(--mono);background:var(--raised);border:1px solid var(--hair);color:var(--ink);border-radius:999px;padding:7px 12px;cursor:pointer}
.agent-toggle[aria-pressed=true]{background:var(--ink);color:var(--page)}
.eyebrow{font:400 12px var(--mono);color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em;margin:0 0 18px}
h1,h2{font-weight:700;letter-spacing:-.035em;line-height:.98;margin:0 0 22px;font-variation-settings:"wght" var(--w,700)}
h1{font-size:clamp(44px,7.4vw,112px)}h2{font-size:clamp(34px,5vw,72px);max-width:14ch}
.lede{font-size:clamp(18px,1.6vw,22px);color:var(--ink-2);max-width:34ch}
/* ---------- home: ring stage + panels ---------- */
.ring-stage{position:fixed;inset:0;z-index:0;pointer-events:none;display:grid;place-items:center}
.ring-poster,#ring{grid-area:1/1;width:min(78vmin,780px);height:auto;aspect-ratio:1;transform:translateX(26vw);transition:opacity .8s}
#ring{width:100vw;height:100vh;transform:none;opacity:0}
.ring-live .ring-poster{opacity:0}.ring-live #ring{opacity:1}
main{position:relative;z-index:1}
.panel{min-height:100vh;padding:18vh clamp(16px,6vw,96px) 12vh;display:flex;flex-direction:column;justify-content:center;max-width:860px}
.panel h1,.panel h2{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
@keyframes settle{from{--w:420;transform:translateY(18px)}to{--w:760;transform:none}}
@property --w{syntax:"<number>";inherits:true;initial-value:700}
.ask{all:unset;cursor:text;display:flex;align-items:center;gap:14px;max-width:620px;margin-top:26px;padding:16px 18px;background:var(--raised);
 border:1.5px solid var(--cusp);border-radius:14px;box-shadow:0 1px 0 var(--hair),0 18px 50px -24px color-mix(in oklab,var(--cusp) 50%,transparent);transition:transform .2s cubic-bezier(.2,.9,.3,1.4)}
.ask:hover{transform:translateY(-2px)}.ask:active{transform:scale(.985)}
.ask-k{font:600 13px var(--mono);color:var(--cusp-ink)}.ask-q{flex:1;font:400 15px var(--mono);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ask-q::after{content:"█";animation:blink 1s steps(1) infinite;color:var(--ink)}@keyframes blink{50%{opacity:0}}
kbd{font:500 11px var(--mono);border:1px solid var(--hair);border-radius:6px;padding:3px 6px;color:var(--ink-2)}
.hint{color:var(--ink-2);margin-top:14px}
.controls{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px;max-width:560px}
.controls li{display:flex;gap:16px;align-items:center;padding:16px 18px;background:var(--raised);border:1px solid var(--hair);border-radius:14px}
.controls b{display:block;font-size:19px}.controls span{color:var(--ink-2);font-size:15px}
.sw{position:relative;width:46px;height:26px;flex:none}.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.knob{position:absolute;inset:0;border-radius:99px;background:var(--rule);transition:background .25s}
.knob::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.sw input:checked+.knob{background:var(--cusp)}.sw input:checked+.knob::after{transform:translateX(20px)}
.sw input:focus-visible+.knob{outline:2px solid var(--cusp-ink);outline-offset:3px}
.ledger{border-collapse:collapse;width:100%;max-width:600px;background:var(--raised);border:1px solid var(--hair);border-radius:14px;overflow:hidden}
.ledger th,.ledger td{padding:14px 18px;border-bottom:1px dashed var(--hair);text-align:left;font-weight:400}.ledger td{text-align:right}
.ledger tr:last-child th{color:var(--ink);font-weight:600}
/* dot-matrix numerals: mono glyphs masked through a dot grid */
.dots{font:600 22px/1 var(--mono);letter-spacing:.04em;-webkit-mask:radial-gradient(circle,#000 52%,#0000 56%) 0 0/4px 4px;mask:radial-gradient(circle,#000 52%,#0000 56%) 0 0/4px 4px}
.cta{display:inline-block;background:var(--cusp);color:var(--on-cusp);text-decoration:none;font-weight:600;padding:14px 22px;border-radius:999px;transition:transform .2s cubic-bezier(.2,.9,.3,1.4)}
.cta:hover{background:var(--cusp-deep);transform:translateY(-2px)}.ghost{margin-left:14px}
/* ---------- text-first sub pages ---------- */
.doc{max-width:720px;margin:0 auto;padding:12vh 24px 16vh}.doc h1{font-size:clamp(40px,6vw,76px)}
.doc pre,.doc .mono{white-space:pre-wrap}.doc pre{background:var(--raised);border:1px solid var(--hair);border-radius:12px;padding:18px;font:400 13px/1.7 var(--mono);overflow:auto}
.index{list-style:none;padding:0;border-top:1px solid var(--hair)}.index li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair)}.index span{color:var(--ink-2)}
.rates{width:100%;border-collapse:collapse}.rates th,.rates td{padding:14px 0;border-bottom:1px solid var(--hair);text-align:left;font-weight:400}.rates td{text-align:right}
.steps li{margin-bottom:10px}.stub{font:400 12px var(--mono);color:var(--ink-2);border-top:1px dashed var(--rule);padding-top:12px;margin-top:40px}
/* ---------- agent view ---------- */
.agent{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:10vh 24px;white-space:pre-wrap;font-size:13px;line-height:1.7}
body.agent-on main,body.agent-on .ring-stage{display:none}
/* ---------- footer + cmdk ---------- */
.foot{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;padding:28px clamp(16px,4vw,40px);border-top:1px solid var(--hair);color:var(--ink-2);background:var(--page)}
.cmdk{width:min(640px,94vw);border:1px solid var(--hair);border-radius:16px;padding:0;background:var(--raised);box-shadow:0 30px 80px -20px #11141766}
.cmdk::backdrop{background:#11141733;backdrop-filter:blur(3px)}
.cmdk input{width:100%;border:0;border-bottom:1px solid var(--hair);padding:18px 20px;font:400 16px var(--mono);outline:none;caret-color:var(--cusp-ink);background:transparent}
.cmdk ul{list-style:none;margin:0;padding:8px;max-height:50vh;overflow:auto}.cmdk li a{display:flex;justify-content:space-between;padding:10px 12px;border-radius:8px;text-decoration:none}
.cmdk li a:hover,.cmdk li a.sel{background:var(--sunken)}.cmdk li span{color:var(--ink-3)}.cmdk .hint{padding:0 20px 16px}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
@media (max-width:760px){.ring-live #ring{opacity:.35}.dots{font-size:14px}.ledger th,.ledger td{padding:12px}.top nav{display:none}.ring-poster{transform:translate(30vw,-24vh);width:78vw;opacity:.45}
 .panel{padding-top:14vh}.ask-q{font-size:13px}.ghost{display:inline-block;margin:14px 0 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ================= dark Technicolor revision: edge + depth (human view only) ================= */
h1,h2{font-weight:800;letter-spacing:-.055em;line-height:.88;font-variation-settings:"wght" var(--w,820)}
h1{font-size:clamp(46px,6.9vw,120px)}h2{font-size:clamp(42px,7.2vw,120px);max-width:12ch}
.panel h1 .x,.panel h2 .x{color:var(--paper)}
@keyframes settle{from{--w:500;transform:translateY(28px) skewY(2deg)}to{--w:860;transform:none}}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--ink)}
.eyebrow::before{content:"";display:inline-block;width:28px;height:8px;margin-right:10px;background:var(--iridium);vertical-align:1px}
/* depth planes: parallax grid floor, soft ring shadow, film grain */
.plane{position:fixed;inset:-20vh -10vw;z-index:0;pointer-events:none}
.plane-grid{background:linear-gradient(var(--hair) 1px,transparent 1px) 0 0/100% 64px,linear-gradient(90deg,var(--hair) 1px,transparent 1px) 0 0/64px 100%;
 opacity:.55;transform:perspective(800px) rotateX(62deg) translateY(30vh);transform-origin:50% 100%;
 -webkit-mask:linear-gradient(transparent 30%,#000 70%);mask:linear-gradient(transparent 30%,#000 70%);
 animation:drift linear both;animation-timeline:scroll(root)}
@keyframes drift{to{background-position:0 640px,0 0}}
.floor{grid-area:1/1;align-self:end;width:min(70vmin,700px);height:60px;margin-bottom:12vh;transform:translateX(26vw);border-radius:50%;
 background:radial-gradient(closest-side,#000c,#0000);filter:blur(10px)}
.grain{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.13;mix-blend-mode:overlay;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ring-poster{filter:drop-shadow(0 40px 60px #000)}
/* glass layers over the ring */
.ask,.controls li,.ledger{background:color-mix(in oklab,var(--raised) 55%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
 border-color:#ffffff1f;box-shadow:inset 0 1px 0 #ffffff14,0 30px 60px -30px #000}
.ask{border:1.5px solid var(--cusp);box-shadow:0 0 0 6px color-mix(in oklab,var(--cusp) 14%,transparent),0 30px 80px -20px color-mix(in oklab,var(--cusp) 45%,transparent)}
/* section cut: clean full-bleed hard edge, single hairline */
.cut{display:block;width:100%;height:0;margin:0;border:0;border-top:1px solid var(--seam);position:relative;z-index:2}
@keyframes wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* contrast/tension: inverted hard-edged paper slabs */
.panel.invert{max-width:none;background:var(--paper);color:var(--black);position:relative;z-index:2}
.panel.invert .lede{color:#2b3237}.panel.invert .eyebrow{color:var(--black)}.panel.invert .eyebrow::before{background:var(--black)}
.panel.invert h2{max-width:13ch;font-size:clamp(48px,8.4vw,140px)}
.ledger tr:last-child th{color:var(--paper)}
.cta{box-shadow:0 0 0 1px #fff3,0 18px 40px -12px var(--cusp)}
#ring{filter:none}
@media (max-width:760px){.floor{display:none}.plane-grid{opacity:.35}}
@media (prefers-reduced-motion:reduce){.plane-grid{transform:perspective(800px) rotateX(62deg) translateY(30vh)}}

/* ================= origin theme (undercurrent): reef strata, iridium ================= */
.plane-grid{background:
  linear-gradient(transparent 0 61%,color-mix(in oklab,var(--seam) 35%,transparent) 61% 61.2%,transparent 61.4%) 0 0/100% 100%,
  repeating-linear-gradient(176deg,var(--strata-1) 0 34px,var(--strata-2) 34px 52px,#0E1113 52px 90px,var(--strata-2) 90px 104px);
 transform:none;opacity:.9;inset:-10vh -5vw;-webkit-mask:linear-gradient(transparent 35%,#000 85%);mask:linear-gradient(transparent 35%,#000 85%);
 animation:strata linear both;animation-timeline:scroll(root)}
@keyframes strata{from{transform:translateY(8vh)}to{transform:translateY(-14vh)}}
.trust td{color:var(--ink)}
.panel.origin{min-height:70vh;max-width:760px}
.panel.origin h2{font-size:clamp(34px,4.6vw,64px);letter-spacing:-.04em;max-width:none}
.panel.origin .lede{font-size:17px;max-width:56ch;color:var(--ink);text-shadow:0 1px 12px #101315,0 0 2px #101315}
@media (prefers-reduced-motion:reduce){.plane-grid{transform:none}}

/* ================= design-review fixes ================= */
.panel#s-hero{min-height:auto;padding-top:16vh;padding-bottom:6vh}
.hero-cta{margin-top:22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}.hero-cta .ghost{margin:0}
.lede{color:var(--ink-2)}
.panel.origin .lede{text-shadow:none;background:color-mix(in oklab,var(--page) 78%,transparent);padding:2px 0;-webkit-mask:none;mask:none}
.builtfor{position:relative;z-index:2;padding:22px clamp(16px,6vw,96px);border-top:1px solid var(--hair);background:var(--page)}
.builtfor{padding-bottom:40px}.builtfor ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.builtfor a{display:grid;gap:6px;padding:22px;background:var(--raised);text-decoration:none;height:100%;transition:background .2s}
.builtfor a:hover{background:var(--sunken)}.builtfor b{font-size:20px;letter-spacing:-.02em}.builtfor span{color:var(--ink-2);font-size:15px}.builtfor i{font-style:normal;color:var(--ink);font-family:var(--mono)}
@media (max-width:760px){.builtfor ul{grid-template-columns:1fr}}
.doc{padding-top:6vh}.doc h2{font-size:clamp(28px,3.4vw,44px);max-width:none;margin-top:56px;scroll-margin-top:90px}
.doc p{color:var(--ink-2)}.doc .lede{color:var(--ink)}
.quote{font:800 clamp(30px,4vw,52px)/1 var(--sans);letter-spacing:-.04em;color:var(--ink)!important;margin:10px 0 18px}
.rates td.dots{-webkit-mask:none;mask:none;font-size:14px}

/* ================= signature motion ================= */
/* (1) ring story progress: each panel's position in the viewport, driven by CSS scroll timelines */
@property --k{syntax:"<number>";inherits:false;initial-value:0}
@keyframes kprog{from{--k:0}to{--k:1}}
.panel{animation:kprog linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
@supports (animation-timeline:view()){.panel{animation-range:entry 50% exit 50%}}
/* poster (no 3D): the same story told in CSS, a slow turn that settles closed */
@keyframes posterstory{0%{transform:translateX(26vw) rotate(-18deg) scale(.96)}50%{transform:translateX(30vw) rotate(10deg) scale(1.04)}100%{transform:translateX(26vw) rotate(0) scale(1)}}
.ring-poster{animation:posterstory linear both;animation-timeline:scroll(root)}
@media (max-width:760px){.ring-poster{animation:none}}
/* (2) cross-document view transitions: ring <-> mark, headline <-> headline */
body.home .ring-stage{view-transition-name:mark}
body.sub .brand img{view-transition-name:mark}
main h1{view-transition-name:headline}
::view-transition-group(mark),::view-transition-group(headline){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(headline){animation:vt-out .3s both}::view-transition-new(headline){animation:vt-in .45s .1s both}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}@keyframes vt-in{from{opacity:0;transform:translateY(16px)}}
/* (3) live ledger demo */
.demo{margin-top:18px;max-width:640px;border:1px dashed var(--rule);padding:12px 14px;background:color-mix(in oklab,var(--page) 80%,transparent)}
.demo-h{margin:0 0 8px;color:var(--ink-2)}.live{color:var(--st-review);margin-right:6px}
.feed{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:11.5px}
.feed li{display:grid;grid-template-columns:90px 1fr;gap:2px 12px;padding:8px 0;border-top:1px solid var(--hair);animation:arrive .4s cubic-bezier(.2,.9,.3,1.2)}
.feed li b{grid-row:span 4;color:var(--ink-2);font-weight:500}.feed .r{color:var(--ink-2)}.feed .r.yours{color:var(--cusp-ink)}
@keyframes arrive{from{opacity:0;transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.ring-poster{animation:none}.feed li{animation:none}}

/* rarity: restraint and negative space around the ring and origin moments */
.panel.origin{min-height:100vh;padding-block:clamp(120px,24vh,280px);max-width:680px}
.panel.origin .lede{line-height:1.75}
.panel.origin .rare{margin-top:clamp(40px,8vh,96px);max-width:52ch;font-size:15px;line-height:1.7;color:var(--ink);border-top:1px solid color-mix(in oklab,var(--seam) 40%,transparent);padding-top:20px}
.panel.origin .rare .src{display:block;margin-top:10px;font-size:12px;color:var(--iridium);text-decoration:underline;text-underline-offset:3px}

/* ================= v2: layout, market figures, colour bars, nav, a11y ================= */
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--ink);color:var(--page);padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.ring-stage{overflow:hidden}
.menu-btn{display:none;font:500 12px var(--mono);background:var(--raised);border:1px solid var(--hair);color:var(--ink);border-radius:999px;padding:7px 12px;cursor:pointer}
/* 12-column grid */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);width:100%;max-width:1320px}
.grid>*{grid-column:1/-1;min-width:0}
.panel.wide{max-width:none}
.panel.wide .col-head{grid-column:1/8}
.panel.wide .col-body{grid-column:8/13;align-self:end}
.panel.wide .col-body .lede{max-width:40ch}
.panel#s-hero .grid,.panel.origin .grid{display:block}
#s-controls .col-head{grid-column:1/6}#s-controls .col-body{grid-column:7/13;align-self:start;padding-top:8px}
#s-controls h2{max-width:10ch}
#s-trust .col-head{grid-column:1/7}#s-trust .col-body{grid-column:7/13;align-self:end}
.sub-h{font:700 clamp(22px,2vw,30px)/1.1 var(--sans);letter-spacing:-.03em;margin:0 0 14px}
.ledger{max-width:none}.demo{max-width:none}
/* market figures */
.market{position:relative;z-index:2;background:var(--page);border-top:1px solid var(--hair);padding:56px clamp(16px,6vw,96px) 48px}
.mk-head{grid-column:1/5!important}.figures{grid-column:5/13!important}
.mk-title{font-size:clamp(28px,2.8vw,42px);line-height:1.02;max-width:14ch;letter-spacing:-.04em;margin-bottom:14px}
.mk-note{color:var(--ink-2);font-size:14px;margin:0}
.figures{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.figures li{background:var(--raised);padding:22px 22px 18px;display:flex;flex-direction:column;gap:8px}
.fig{font:800 clamp(30px,3.2vw,48px)/1 var(--sans);letter-spacing:-.04em;color:var(--ink)}
.figures span{color:var(--ink-2);font-size:15px;line-height:1.45}
.figures cite{font-style:normal;font-size:11.5px;margin-top:auto;padding-top:8px;color:var(--iridium)}
.figures cite a{text-decoration:underline;text-decoration-color:var(--rule)}
/* Technicolor bars: one strip, four control colours */
/* .lbar: the light-section boundary. Same bar, same 10px height, same order (open, done, review, void) above and below every light (.invert) section. */
.lbar{display:grid;grid-template-columns:repeat(4,1fr);height:10px;width:100%;position:relative;z-index:2}
#s-controls{position:relative}
.c-route{background:var(--st-open)}.c-payout{background:var(--st-done)}.c-price{background:var(--st-review)}.c-own{background:var(--st-void)}
.chip{display:inline-block;width:10px;height:10px;margin-right:10px;vertical-align:2px}
.live{color:var(--st-done)}
/* headings */

.panel.invert{--ink-3:#4B555C}
/* subpages */
.items{list-style:none;padding:0;border-top:1px solid var(--hair)}.items li{padding:14px 0;border-bottom:1px solid var(--hair)}
.callout{font:600 15px var(--mono);color:var(--ink)!important;border:1px solid var(--rule);border-left:4px solid var(--st-review);padding:14px 16px;margin:18px 0}
.rates td{color:var(--ink-2)}
@media (max-width:1000px){.mk-head,.figures{grid-column:1/-1!important}.mk-head{margin-bottom:24px}}
@media (max-width:760px){
 .menu-btn{display:inline-block;order:3}.tools{order:2}
 .top{flex-wrap:wrap;gap:10px}
 .top nav{order:4;flex-basis:100%;flex-direction:column;gap:0;padding:8px 0 4px}
 .top.open nav{display:flex}
 .top nav a{padding:12px 2px;border-top:1px solid var(--hair);font-size:17px}
 .panel.wide .col-head,.panel.wide .col-body,#s-controls .col-head,#s-controls .col-body,#s-trust .col-head,#s-trust .col-body{grid-column:1/-1}
 #s-controls .col-body{padding-top:32px}
 .figures{grid-template-columns:1fr}
 .ask-q{white-space:normal}
}
.panel h2{line-height:.94;padding-bottom:.08em;margin-bottom:28px}
.panel.wide h2,.panel.invert.wide h2{max-width:16ch}
.panel.invert.wide h2{font-size:clamp(44px,6.4vw,112px)}

/* v3: hero text column slightly wider so the headline fits in 3 lines or fewer at 1440 */
.panel#s-hero{max-width:960px}

/* v5: market stats as separate blocks (replaces the old .figures list) */
.market{padding:clamp(64px,9vh,112px) clamp(20px,6vw,96px)}
.market .grid{margin:0 auto 0 0}
.mk-title{margin-bottom:18px}
.mk-head{margin-bottom:40px}
.stats{grid-column:5/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.stat{background:var(--raised);padding:32px 28px 26px;display:flex;flex-direction:column}
.stat p{margin:0}
.stat-fig{font:800 clamp(34px,3.4vw,52px)/1 var(--sans);letter-spacing:-.04em;color:var(--ink)}
.stat-desc{margin-top:16px!important;color:var(--ink-2);font-size:16px;line-height:1.5;max-width:36ch}
.stat-src{margin-top:auto!important;padding-top:22px;font-size:11.5px;font-style:normal;color:var(--iridium)}
.stat-src a{text-decoration:underline;text-decoration-color:var(--rule)}
@media (max-width:1000px){.stats{grid-column:1/-1}}
@media (max-width:760px){.stats{grid-template-columns:1fr}.stat{padding:26px 20px 22px}}
/* v4: keep the hero ring clear of the headline on desktop (1280–1920). Mobile unchanged. */
@media (min-width:761px){
 #ring{transform:translateX(3vw) scale(.8);transform-origin:100% 50%}
 .ring-poster{width:min(62vmin,620px)}
 .floor{transform:translateX(32vw);width:min(56vmin,560px)}
}
@keyframes posterstory{0%{transform:translateX(32vw) rotate(-18deg) scale(.96)}50%{transform:translateX(34vw) rotate(10deg) scale(1.02)}100%{transform:translateX(32vw) rotate(0) scale(1)}}

/* ================= Cast: signature cast-iron text (see README "Cast") =================
   Max ONE per page. Only a single key headline or the ring mark.
   Never body text, buttons, figures or links. Darkest stop #8F989E = 6.35:1 on --page. */
.cast{background:linear-gradient(100deg,#8F989E,#F4F7F8 40%,#9DA6AB 60%,#E7ECEE) 0 0/100% 100%;
 -webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;
 line-height:1.08;padding-bottom:.14em}
/* one-time "cool" sheen on scroll-in: a highlight passes once, then the metal settles. Static without support or with reduced motion. */
@supports (animation-timeline:view()){
 .cast{background-image:linear-gradient(100deg,#8F989E,#F4F7F8 40%,#9DA6AB 60%,#E7ECEE),linear-gradient(100deg,transparent 40%,#ffffff 50%,transparent 60%);
  background-size:100% 100%,250% 100%;background-repeat:no-repeat;background-blend-mode:screen;
  animation:cast-cool linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
 .panel h2.cast{animation:settle linear both,cast-cool linear both;animation-timeline:view(),view();animation-range:entry 0% cover 40%,entry 20% cover 45%}
}
@keyframes cast-cool{from{background-position:0 0,130% 0}to{background-position:0 0,-130% 0}}
@media (prefers-reduced-motion:reduce){.cast,.panel h2.cast{animation:none!important;background-image:linear-gradient(100deg,#8F989E,#F4F7F8 40%,#9DA6AB 60%,#E7ECEE)}}

/* v7: "elements" table of value movement (periodic-table tiles). No Cast here: it's reserved. */
.elements{display:block}
.el-head{max-width:760px;margin-bottom:40px}
.el-table{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);max-width:1320px}
.el{position:relative;background:var(--raised);padding:22px 22px 20px;display:flex;flex-direction:column;min-height:260px;border-top:4px solid var(--el-c,var(--iridium))}
.el.c-route{--el-c:var(--rail-fi)}.el.c-payout{--el-c:var(--rail-sc)}.el.c-price{--el-c:var(--rail-mk)}.el.c-own{--el-c:var(--rail-tk)}.el.c-iron{--el-c:var(--rail-mm)}
.el.c-route,.el.c-payout,.el.c-price,.el.c-own,.el.c-iron{background:var(--raised)}
.el p{margin:0}
.el-no{position:absolute;top:14px;left:22px;font-size:11px;color:var(--ink-2)}
.el-sym{display:block;margin-top:18px;font:800 clamp(44px,4.4vw,64px)/1 var(--sans);letter-spacing:-.04em;color:var(--el-c,var(--ink))}
.el-name{margin-top:6px!important;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.el-name b{font-size:17px;letter-spacing:-.01em}.el-name .mono{font-size:11px;color:var(--ink-2)}
.el-fig{margin-top:18px!important;font:800 clamp(24px,2.1vw,32px)/1.05 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.el-fc{display:inline-block;vertical-align:middle;margin-left:6px;font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--st-review);color:var(--st-review);padding:2px 6px}
.el-desc{margin-top:8px!important;color:var(--ink-2);font-size:14.5px;line-height:1.45}
.el-src{margin-top:8px!important;padding-top:4px;font-size:11px;color:var(--iridium)}
.el-src a,.el-more a{text-decoration:underline;text-decoration-color:var(--rule)}
.el-fe{grid-row:span 2;background:linear-gradient(160deg,var(--sunken),var(--strata-1));--el-c:var(--rail-fe-ink);border-top-color:var(--rail-fe);justify-content:flex-end}
.el-fe .el-sym{font-size:clamp(96px,10vw,160px);margin-top:0;color:var(--el-c)}
.el-fe .el-desc{font-size:16px;max-width:30ch}
.el-more{margin-top:18px!important;max-width:1320px;color:var(--ink-2);font-size:11.5px;line-height:1.7}
@media (max-width:1100px){.el-table{grid-template-columns:repeat(2,minmax(0,1fr))}.el-fe{grid-row:auto;grid-column:1/-1;min-height:200px}}
@media (max-width:640px){.el-table{grid-template-columns:1fr}.el{min-height:0}.el-fe .el-sym{font-size:96px}}

/* ================= v8 polish pass ================= */
/* Ring: keep the poster inside the viewport on desktop (it was clipped past the right edge) */
@media (min-width:761px){
 @keyframes posterstory{0%{transform:translateX(var(--ring-x)) rotate(-18deg) scale(.96)}50%{transform:translateX(var(--ring-x)) rotate(10deg) scale(1.02)}100%{transform:translateX(var(--ring-x)) rotate(0) scale(1)}}
 .ring-stage{--ring-x:min(32vw,calc(50vw - min(31vmin,310px) - 32px))}
 .ring-poster{transform:translateX(var(--ring-x))}
 .floor{transform:translateX(var(--ring-x))}
}
/* Ring: the fee table and demo feed sit on solid surfaces so the braid never runs through text */
#s-controls .ledger,#s-controls .demo{position:relative;z-index:2;background:var(--raised)}
#s-controls .demo{background:var(--page)}
#s-controls .sub-h{position:relative;z-index:2}
@media (max-width:760px){.ring-live #ring{opacity:.18}}
/* Elements: Fe content sits at the top like every other tile (no empty block above it) */
@media (min-width:1101px){
 .el-table{grid-template-columns:repeat(3,minmax(0,1fr))}
 .el-fe{grid-row:auto;grid-column:1/-1;min-height:0;display:grid;grid-template-columns:auto 1fr;column-gap:40px;align-items:end;padding-top:40px}
 .el-fe .el-sym{grid-row:1/3;margin-top:0}
 .el-fe .el-name{justify-content:flex-start}
}
/* Elements: Vs gets its own colour so every cohort reads distinctly */
.el.c-alloy{--el-c:var(--rail-vs);background:var(--raised)}
/* Shared source links (origin note on Home and Company) */
.rare .srcs{display:block;margin-top:10px}
.rare .srcs .src,.panel.origin .rare .srcs .src{display:block;margin-top:6px;font-size:12px;color:var(--iridium);text-decoration:underline;text-underline-offset:3px}
.doc .rare{margin-top:32px;max-width:56ch;font-size:15px;line-height:1.7;border-top:1px solid color-mix(in oklab,var(--seam) 40%,transparent);padding-top:20px}
/* Visible keyboard focus everywhere */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.ask:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.cmdk input:focus-visible{outline:none}
/* Touch devices have no ⌘K: show "Search" and drop the shortcut hint */
.kbtn .k-touch{display:none}
@media (hover:none) and (pointer:coarse){.kbtn .k-key,.ask kbd{display:none}.kbtn .k-touch{display:inline}}
.caps tbody th{font-weight:600;color:var(--ink)}.caps .cap-p{display:block;font-weight:400;color:var(--ink-2);margin-top:4px}.caps td{vertical-align:top;width:1%}
.pillars a{display:inline-flex;align-items:baseline;gap:12px;font-weight:600;white-space:nowrap}.pl-sym{font-size:12px;color:var(--ink-3);min-width:2ch}.pillars small{color:var(--ink-3)}
.pillars span{text-align:right}.callout.illus{border-left-color:var(--rule)}.callout.illus span{display:block;font-weight:400;color:var(--ink-2);margin-top:6px}.related{font-size:15px}
@media (max-width:640px){.index.pillars li{flex-direction:column;gap:4px}.pillars span{text-align:left}}
/* Value anatomy: transaction -> rails -> record. Three bones, one spine. Cohort colours from the elements table, no magenta. */
.anatomy{list-style:none;padding:0;margin:28px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:var(--raised)}
.anatomy li{position:relative;padding:18px 18px 20px;border-left:1px solid var(--hair)}.anatomy li:first-child{border-left:0}
.anatomy li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--an-c)}
.anatomy .an-0{--an-c:var(--ink-3)}.anatomy .an-1{--an-c:var(--ink-2)}.anatomy .an-2{--an-c:var(--iridium)}
.anatomy li:not(:last-child)::after{content:"→";position:absolute;right:-8px;top:16px;font:400 13px var(--mono);color:var(--ink-3);background:var(--raised);z-index:1}
.an-k{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)!important;margin-bottom:8px}
.anatomy p{margin:0;font-size:15px;line-height:1.55}
@media (max-width:640px){.anatomy{grid-template-columns:1fr}.anatomy li{border-left:0;border-top:1px solid var(--hair)}.anatomy li:first-child{border-top:0}.anatomy li:not(:last-child)::after{content:"↓";right:auto;left:18px;top:auto;bottom:-10px}}
.early{font-size:12px;color:var(--ink-3)!important;margin-top:10px}
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}.tags li{font-size:12px;color:var(--ink-2);border:1px solid var(--rule);border-radius:999px;padding:5px 11px}
.caps td{width:auto;text-align:left;vertical-align:top}.caps tbody th{width:38%;vertical-align:top;padding-right:20px}
@media (max-width:640px){.caps tr{display:block;padding:12px 0;border-bottom:1px solid var(--hair)}.caps tbody th,.caps td{display:block;width:auto;border:0;padding:2px 0}}
.eg{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)!important;margin:22px 0 -6px}
/* Element colours: one mechanism. Same mapping as the home tiles (Fe ink, Fi open, Sc done, Mk review, Tk void, Mm iridium, Vs seam).
   Colour goes on symbols and accents only, never on body text. */
[data-el]{--el-color:var(--rail-pending)}
[data-el="fe"]{--el-color:var(--rail-fe-ink)}[data-el="fi"]{--el-color:var(--rail-fi)}[data-el="sc"]{--el-color:var(--rail-sc)}[data-el="mk"]{--el-color:var(--rail-mk)}
[data-el="tk"]{--el-color:var(--rail-tk)}[data-el="mm"]{--el-color:var(--rail-mm)}[data-el="vs"]{--el-color:var(--rail-vs)}
.elc{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--el-color);border:1px solid var(--el-color);border-radius:4px;padding:1px 6px;margin-right:6px;line-height:1.5}
.cohorts{display:inline-flex;flex-wrap:wrap;gap:4px}.doc>.cohorts{margin:6px 0 0}
.pillars li[data-el]{border-left:3px solid var(--el-color);padding-left:14px}.pillars li[data-el] .pl-sym{color:var(--el-color);font-weight:600}
.doc[data-el] .eyebrow::before{background:var(--el-color)}
.doc[data-el] h1{border-bottom:3px solid var(--el-color);padding-bottom:10px}
.doc[data-el] .tags li{border-color:var(--el-color)}
.elrows th .elc{margin-right:10px}

/* Iridium metal: Mm only. Cool, bright; distinct from the warm iron .cast. Never body text. */
.el.c-iron{border-top:4px solid transparent;border-image:var(--iridium-metal) 1}
.el.c-iron .el-sym,.pillars li[data-el="mm"] .pl-sym{background:var(--iridium-metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.pillars li[data-el="mm"]{border-left:3px solid transparent;border-image:var(--iridium-metal) 1}
.doc[data-el="mm"] .eyebrow::before{background:var(--iridium-metal)}
.doc[data-el="mm"] h1{border-bottom:3px solid transparent;border-image:var(--iridium-metal) 1}
@media (forced-colors:active){.el.c-iron .el-sym,.pillars li[data-el="mm"] .pl-sym{color:CanvasText;background:none}}

/* interactive ring: a hit target over the hero ring only; clipped so it never covers text */
.ring-stage{perspective:1400px}
.ring-poster{rotate:var(--ring-rot,none)}
.ring-handle{position:fixed;z-index:3;border-radius:50%;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ring-handle[hidden]{display:none}
.ring-handle.dragging{cursor:grabbing}
.ring-handle:focus{outline:none}
.ring-handle:focus-visible::after{content:"";position:absolute;inset:0;border-radius:50%;padding:2px;background:var(--iridium-metal);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
body.agent-on .ring-handle{display:none}

/* narrow screens (<1200px): the hero ring gets its own block below the CTA, clear of the copy */
.ring-slot{display:none}
@media (max-width:1199px){
 .ring-slot{display:block;position:relative;z-index:1;width:min(78vw,64vh,620px);aspect-ratio:1;margin:40px auto 0}
 .ring-slot .ring-handle{position:absolute;inset:0;display:block}
 .ring-slot-poster{width:100%;height:100%;display:block;pointer-events:none;transition:opacity .8s;rotate:var(--ring-rot,none)}
 .ring-live .ring-slot-poster{opacity:0}
 .ring-stage .ring-poster{display:none}
 .ring-handle[data-fixed]{display:none!important}
 body.ring-live.ring-in-slot #ring{opacity:1}
 body.ring-in-slot #ring{transform:none}
 .ring-slot{perspective:1400px}
}

/* ===== Motion direction D: The record writes itself (prototype) =====
   A decision trace runs down the left margin as you read; every section is posted like a ledger entry and
   reconciles when the trace passes it. The four-colour bar fills rail by rail. Text is never hidden without JS,
   and nothing sits over copy: the trace lives in the page gutter (hidden below 1000px). */
.fx-trace{position:fixed;left:28px;top:0;width:2px;height:100vh;z-index:3;pointer-events:none;background:linear-gradient(180deg,#8D99A5,#EEF2F6 36%,#AAB6C1 58%,#D9E1E8);transform-origin:50% 0;transform:scaleY(1);opacity:.85}
.fx-trace::before{content:"";position:absolute;inset:0;background:var(--hair);transform-origin:50% 100%;z-index:-1}
.fx-nodes{position:absolute;left:0;top:0;width:0;height:0;z-index:3;pointer-events:none}
.fx-node{position:absolute;left:23px;width:12px;height:12px;margin-top:-6px;border-radius:50%;border:2px solid var(--iridium);background:var(--page);transition:background-color .4s,transform .4s}
.fx-node.done{background:var(--iridium);transform:scale(1.15)}
.fx-entry{font-family:var(--mono);color:var(--ink-3);letter-spacing:.04em;text-transform:none}
.fx-entry i{font-style:normal;transition:color .4s}.fx-entry.done i{color:var(--st-done)}
@media (max-width:999px){.fx-trace,.fx-nodes{display:none}}
@media (prefers-reduced-motion:no-preference){
 @supports (animation-timeline:scroll()){.fx-trace{animation:fx-draw linear both;animation-timeline:scroll(root)}}
 @keyframes fx-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
 .fx-rec-on .fx-wait{opacity:0;transform:translateX(-10px)}
 .fx-rec-on .fx-post{animation:fx-write .55s cubic-bezier(.3,0,.2,1) both;animation-delay:calc(var(--i,0) * 110ms)}
 /* compositor-only (opacity + transform): entries post in from the ledger margin without per-frame repaints */
 @keyframes fx-write{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
 .fx-rec-on .lbar > *{transform-origin:0 50%;animation:fx-rail linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
 .fx-rec-on .lbar > :nth-child(2){animation-range:entry 20% entry 100%}.fx-rec-on .lbar > :nth-child(3){animation-range:entry 40% cover 60%}.fx-rec-on .lbar > :nth-child(4){animation-range:entry 60% cover 70%}
 @keyframes fx-rail{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.panel.invert .fx-entry{color:#2b3237}.panel.invert .fx-entry.done i{color:var(--black)}
.rates th{padding-right:20px;overflow-wrap:anywhere;min-width:min(14ch,38vw)}
.callout,.rates td{overflow-wrap:anywhere}
@media (min-width:761px) and (max-width:960px){#site-nav{gap:10px}#site-nav a{font-size:13.5px;white-space:nowrap}}
.seq{margin:28px 0 36px}.seq figcaption{margin-bottom:12px}.seq-title{display:block;font:600 17px var(--sans);color:var(--ink)}.seq-sub{display:block;font-size:14px;color:var(--ink-2);margin-top:4px}
.seq-scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:8px;background:var(--raised);padding:8px 0}.seq-scroll:focus-visible{outline:2px solid var(--iridium);outline-offset:2px}
.seq-svg{display:block;width:100%;height:auto;min-width:calc(var(--seq-w) * .82);max-width:var(--seq-w);margin:0 auto;font-family:var(--sans)}
.seq-lane{fill:var(--sunken);stroke:var(--rule)}.seq-lane.hl{stroke:var(--rail-fe);stroke-width:1.5}.seq-lane.r-fi{stroke:var(--rail-fi)}.seq-lane.r-sc{stroke:var(--rail-sc)}.seq-lane.r-mk{stroke:var(--rail-mk)}.seq-lane.r-tk{stroke:var(--rail-tk)}.seq-lane.r-mm{stroke:var(--rail-mm)}.seq-lane.r-vs{stroke:var(--rail-vs)}.seq-lt{fill:var(--ink);font-size:12.5px;font-weight:600}
.seq-life{stroke:var(--rule);stroke-dasharray:3 4}.seq-c{stroke:var(--ink-2);stroke-width:1.5}.seq-r{stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:5 4}
.seq-head{fill:var(--ink-2)}.seq-head-r{fill:var(--ink-3)}.seq-n{fill:var(--ink-2)}.seq-nt{fill:var(--black);font:700 10.5px var(--mono)}
.seq-t{fill:var(--ink);font-size:12px}.seq-note{fill:var(--strata-2);stroke:var(--rule)}
.seq-k{margin:14px 0 6px;font-size:12px;color:var(--ink-2)}.seq-steps{margin:0;padding-left:2.4em;font-size:14.5px;line-height:1.6;color:var(--ink-2)}.seq-steps li{margin:2px 0}

/* Use-case videos (tools/usecase-videos): 16:9, never wider than the column, no layout shift before load. */
.uc-video{margin:28px 0 40px;max-width:960px}
.uc-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--raised);border:1px solid var(--hair);border-radius:6px}
.uc-video figcaption{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--ink-2);max-width:72ch}
.uc-video figcaption .mono{display:block;margin-top:6px;font-size:12px}
.uc-video a{text-decoration:underline;text-decoration-color:var(--rule)}
@media (min-width:1400px){.uc-video{width:960px}}
/* symmetry:start (2026-11-01) centre hero/origin panels; balanced tag rows */
.panel#s-hero,.panel.origin{margin-inline:auto;width:100%}
.tags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.tags li{text-align:center}
.tags li:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:599px){.tags{grid-template-columns:minmax(0,1fr)}}
/* symmetry:end */