/* Upmode site. One stylesheet, no dependencies, no external requests. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}

:root{
  --ink:#0F1115; --ink-2:#171A1F; --ink-3:#1D2026; --hair:#2E3138;
  --w-1:#F5F6F8; --w-2:#A8AAB0; --w-3:#8A8B90;
  --teal:#4FE3DE; --teal-deep:#6FEBE7; --teal-text:#4FE3DE; --yellow:#FFD600; --blue:#6FC5E4; --violet:#B49BF0;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(0.4,0,0.2,1);
  --scrim-top:rgba(15,17,21,0.92); --scrim-bot:rgba(15,17,21,0);
  --plane-a:#171A1F; --plane-b:#0F1115; --card-shadow:0 40px 80px -32px rgba(0,0,0,0.9);
  --on-accent:#0F1115;
  --teal-fill-text:#0F1115; --blue-text:#6FC5E4; --yellow-text:#FFD600; --shadow-sm:0 1px 2px rgba(0,0,0,0.40); --fade:23,26,31;
  --wide:1240px; --measure:1240px; --gutter:40px;
}

/* Light theme: UI kit F1_color semantic.light (gray.0 canvas, gray.50 subtle, gray.100 hover, gray.200 border,
   text gray.1000 / gray.600 / gray.500, brand teal.500 fill and teal.700 text, info blue.500 / blue.700, reasoning violet.500) */
:root[data-theme="light"]{
  --ink:#FFFFFF; --ink-2:#F7F8FA; --ink-3:#F2F3F6; --hair:#DCDDE1;
  --w-1:#0D0D0F; --w-2:#55565C; --w-3:#6E6F75;
  --teal:#00C9C4; --teal-deep:#00B8B4; --teal-text:#057A76; --yellow:#FFD600; --blue:#28A9D2; --violet:#7E5FE0;
  --scrim-top:rgba(255,255,255,0.92); --scrim-bot:rgba(255,255,255,0);
  --plane-a:#FFFFFF; --plane-b:#F7F8FA; --card-shadow:0 10px 15px -3px rgba(10,13,18,0.08),0 4px 6px -2px rgba(10,13,18,0.03);
  --on-accent:#0D0D0F;
  --teal-fill-text:#0D0D0F; --blue-text:#1B7BA0; --yellow-text:#A88C00; --shadow-sm:0 1px 2px 0 rgba(10,13,18,0.05); --fade:247,248,250;
}
.hero,.read-hero{background:var(--ink)}
/* Light theme retained for reference only; the marketing site ships dark, no toggle */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
[hidden]{display:none!important}
html[data-menu-open]{overflow:hidden}
body{margin:0;background:var(--ink);color:var(--w-1);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;text-wrap:pretty}
a{color:var(--teal-text);text-decoration:none}
a:hover{color:var(--w-1)}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
[data-flip] *{transition:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:8px}

/* type */
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--w-3)}
.eyebrow.accent{color:var(--teal-text)}
.lede{font-size:clamp(17px,1.6vw,20px)}
.lede.big{font-size:clamp(19px,2vw,24px);line-height:1.45}
.h-display{font-size:clamp(42px,5vw,74px);line-height:0.95;font-weight:700;letter-spacing:-0.05em;color:var(--w-1);text-wrap:balance}
.h-section{font-size:clamp(36px,5.4vw,64px);line-height:1.0;font-weight:700;letter-spacing:-0.035em;color:var(--w-1);text-wrap:balance}
.h-block{font-size:clamp(31px,3.5vw,50px);line-height:1.05;font-weight:700;letter-spacing:-0.03em;color:var(--w-1);text-wrap:balance}
.h-small{font-size:clamp(24px,2.4vw,33px);line-height:1.12;font-weight:700;letter-spacing:-0.03em;color:var(--w-1)}
.lead{font-size:clamp(19px,1.9vw,23px);line-height:1.4;font-weight:600;letter-spacing:-0.02em;color:var(--w-1);text-wrap:balance}
.beta-note{margin-top:6px}
.beta-note b{color:var(--teal-text);font-weight:600}
.body{font-size:clamp(16px,1.5vw,18px);line-height:1.6;color:var(--w-2)}
.body.strong{color:var(--w-1);text-wrap:balance}
.small{font-size:14px;line-height:1.6;color:var(--w-2)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--w-2)}

/* layout */
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}
.wrap.wide{max-width:var(--wide)}
.wrap.trio{max-width:var(--measure);padding:0;background:var(--ink-2);border:1px solid var(--hair)}
.sec{padding:104px 0}
.sec.tall{padding:150px 0}
.band{background:transparent}
.band.deep{background:var(--ink-3)}
.rule-top{border-top:1px solid var(--hair)}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.9fr);gap:72px;align-items:center}
.pair.flip{grid-template-columns:minmax(0,0.9fr) minmax(0,1fr)}
.stack{display:flex;flex-direction:column;gap:20px}
.trio{display:grid;grid-template-columns:repeat(3,1fr)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 24px;white-space:nowrap;border-radius:8px;background:var(--teal);color:var(--on-accent);font-size:15px;font-weight:600;border:0;cursor:pointer;font-family:inherit;transition:opacity 150ms var(--ease)}
.btn:hover{opacity:0.9;color:var(--on-accent)}
.btn.quiet{background:transparent;border:1px solid var(--hair);color:var(--w-1)}
.btn.quiet:hover{background:var(--plane-a);color:var(--w-1);opacity:1}
.btn.small{height:36px;padding:0 17px;font-size:13.5px}
.btn.big{height:50px;padding:0 26px;font-size:15.5px}
@media (max-width:359px){.btn.big{padding:0 12px;font-size:15px}.h-display{font-size:33px}.gate input,.gate textarea{min-width:0;width:100%}}
.btns{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* header */
.hd{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--gutter);background:linear-gradient(180deg,var(--scrim-top) 0%,var(--scrim-top) 55%,var(--scrim-bot) 100%);pointer-events:none}
.hd > *{pointer-events:auto}
.hd .brand{font-size:17px;font-weight:700;letter-spacing:-0.03em;color:var(--w-1)}
.hd nav{display:flex;align-items:center;gap:24px}
.hd nav a.nl{font-size:14px;color:var(--w-2);transition:color 150ms var(--ease)}
.hd nav a.nl:hover,.hd nav a.nl[aria-current]{color:var(--w-1)}
.hd nav a.nl[aria-current]{box-shadow:0 14px 0 -12px var(--teal)}
.hd .theme-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;border:1px solid var(--hair);background:transparent;color:var(--w-2);cursor:pointer;transition:color 150ms var(--ease)}
.hd .theme-btn:hover{color:var(--w-1)}
.hd .theme-btn svg{width:18px;height:18px}
.hd .theme-btn .ic-sun{display:none} .hd .theme-btn .ic-moon{display:block}
:root[data-theme="dark"] .hd .theme-btn .ic-sun{display:block} :root[data-theme="dark"] .hd .theme-btn .ic-moon{display:none}
.hd .tools{display:flex;align-items:center;gap:10px}
.hd .menu-btn{display:none;align-items:center;height:44px;padding:0 14px;border-radius:8px;border:1px solid var(--hair);background:var(--plane-a);color:var(--w-1);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
.menu{display:none;position:fixed;top:72px;left:20px;right:20px;z-index:39;flex-direction:column;gap:2px;padding:14px 18px 18px;border-radius:14px;background:var(--plane-a);box-shadow:0 0 0 1px var(--hair),var(--card-shadow)}
@media (max-width:768px){
  .hd .btn.small{height:44px}.menu[data-open]{display:flex}}
.menu a{padding:13px 0;font-size:15px;color:var(--w-1)}
.menu .btn{margin-top:10px;height:40px}

/* hero */
.hero{min-height:100vh;padding:150px 0 64px;display:grid;grid-template-columns:minmax(0,0.98fr) minmax(0,1.02fr);align-items:center;gap:50px}
/* The instrument and its readout are one object: the boards compute and the
   figures come out underneath them. No gap between the two, and the copy centres
   on the pair, not on either half. */
.hero-field{display:flex;flex-direction:column;min-width:0;animation:riseIn 700ms var(--ease) 160ms both}
.hero-instrument{min-width:0}
.hero-readout{min-width:0}
.hero-copy{padding-left:max(var(--gutter),calc((100vw - var(--wide)) / 2 * 0.5));padding-right:24px;display:flex;flex-direction:column;gap:26px;animation:riseIn 700ms var(--ease) both}
.hero-copy h1{max-width:16ch;font-size:clamp(46px,5.2vw,76px);line-height:1.02;letter-spacing:-0.035em}
.hero-copy p{max-width:40ch;font-size:clamp(18px,1.8vw,23px);line-height:1.5;color:var(--w-2);font-weight:500;letter-spacing:-0.01em}
.hero-copy p b{color:var(--w-1);font-weight:600}
.hero-field .strip{display:flex;align-items:center;gap:14px;padding:0 var(--gutter) 14px 0;border-bottom:1px solid var(--hair)}
.hero-field .strip .mono{margin-left:auto;white-space:nowrap}
.hero-instrument canvas{display:block;width:100%;height:clamp(340px,42vh,440px);margin:14px 0 0}
.hero-field .foot{border-top:1px solid var(--hair);padding:18px var(--gutter) 0 0;display:flex;gap:24px;align-items:baseline;flex-wrap:wrap}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* page hero (inner pages) */
.page-hero{padding:170px 0 56px}
.page-hero .stack{gap:22px}
.page-hero h1{max-width:18ch;line-height:1.02;letter-spacing:-0.035em}

/* spine strip */
.spine a{position:relative;display:flex;flex-direction:column;gap:6px;padding:40px var(--gutter) 42px;border-right:1px solid var(--hair);color:var(--w-1);transition:background-color 200ms var(--ease)}
.spine a:last-child{border-right:0}
.spine a:hover{background:var(--ink-3);color:var(--w-1)}
.spine a .n{position:absolute;top:34px;right:var(--gutter);font-family:var(--mono);font-size:12px;letter-spacing:0.12em;color:var(--w-3)}
.spine a .v{font-size:clamp(26px,2.6vw,34px);font-weight:700;letter-spacing:-0.035em;line-height:1.0;color:var(--w-1)}
.spine a:hover .v{color:var(--teal-text)}
.spine a .d{font-size:16.5px;line-height:1.5;color:var(--w-2);max-width:26ch;margin-top:6px;text-wrap:balance}

/* numbered list */
.nlist{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column}
.nlist li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--hair);max-width:calc(40ch + 40px)}
.nlist li:last-child{border-bottom:1px solid var(--hair)}
.nlist li .n{font-family:var(--mono);font-size:12px;color:var(--w-2);padding-top:2px}
.nlist li .t{font-size:15px;line-height:1.55;color:var(--w-1);max-width:40ch}

/* shots */
.shot{position:relative;border-radius:16px;overflow:hidden;background:#FFFFFF;box-shadow:0 0 0 1px var(--hair),var(--card-shadow)}
.shot img{width:100%;height:auto}
.shot-cap{margin-top:14px}
.shot-cap .seg{white-space:nowrap}
.mono.pill{border:1px solid var(--hair);padding:4px 9px}

/* chart */
.chart{margin:56px 0 0;padding:36px 0 30px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--plane-b)}
.legend{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--w-2)}
.legend span:first-child{color:var(--w-1)}
.legend i{display:inline-block}
.legend .mono{margin-left:auto}
.chart svg{display:block;width:100%;height:auto;font-family:var(--mono)}

/* dense grid of cells */
.cells{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.cells > div{display:flex;flex-direction:column;gap:12px;padding:26px 28px 30px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);transition:background-color 200ms var(--ease)}
.cells > div:hover{background-color:var(--ink-2)}
.cells .k{font-size:17px;font-weight:600;letter-spacing:-0.01em;color:var(--w-1)}
.cells .v{font-size:15px;line-height:1.6;color:var(--w-2)}
.cells.two{grid-template-columns:repeat(2,1fr)}

/* read cards */
.reads{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.read-card{display:flex;flex-direction:column;gap:14px;padding:26px 26px 28px;border-radius:16px;background:var(--plane-a);box-shadow:0 0 0 1px var(--hair);color:var(--w-1);transition:transform 200ms var(--ease),box-shadow 200ms var(--ease)}
.read-card:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--teal),var(--card-shadow);color:var(--w-1)}
.read-card .logo{height:34px;display:flex;align-items:center}
.read-card .logo img{height:26px;width:auto}
.read-card .attrs{display:flex;gap:8px;flex-wrap:wrap}
.read-card .attrs span{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--w-2);padding:5px 8px;border-radius:6px;border:1px solid var(--hair)}
.read-card .go{margin-top:auto;font-size:14px;color:var(--teal-text)}
.read-card.static{cursor:default}
.read-card.static:hover{transform:none;box-shadow:0 0 0 1px var(--hair)}
.mono a{font-size:12px}

/* closing */
.close-band{display:flex;align-items:center;justify-content:space-between;gap:56px}
.close-band p{font-size:clamp(34px,4.6vw,72px);line-height:1.0;font-weight:700;letter-spacing:-0.035em;color:var(--w-1);max-width:none;text-wrap:balance}

/* footer */
.ft{border-top:1px solid var(--hair);padding:44px 0 52px}
.ft .wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:44px;flex-wrap:wrap}
.ft .col{display:flex;flex-direction:column;gap:10px}
.ft .col .brand{font-size:17px;font-weight:700;letter-spacing:-0.03em;color:var(--w-1)}
.ft .col .tag{font-size:13px;line-height:1.6;color:var(--w-2);max-width:34ch}
.ft .col .h{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--w-2);margin-bottom:8px}
.ft .col a{font-size:14px;color:var(--w-2)}
.ft .col a:hover{color:var(--w-1)}
.ft .col .ft-btn{padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--w-2);text-align:left;cursor:pointer}
.ft .col .ft-btn:hover{color:var(--w-1)}
html:not(.js) .ft .col .ft-btn{display:none}
.cookie-dlg,.sp-dlg{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,0.6)}
.cookie-dlg[hidden],.sp-dlg[hidden]{display:none}
.cookie-box,.sp-box{width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:14px;background:var(--plane-a);box-shadow:0 0 0 1px var(--hair),var(--card-shadow)}
.cookie-box h2,.sp-box h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-0.02em;color:var(--w-1)}
.cookie-box p{margin:0;font-size:15px;line-height:1.55;color:var(--w-2)}
.cookie-box .cookie-state{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--w-2)}
.cookie-btns{display:flex;flex-wrap:wrap;gap:10px}
.cookie-btns .btn[aria-pressed="true"]{border-color:var(--teal)}
.cookie-close,.sp-close{align-self:flex-start;min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--w-2);text-decoration:underline;text-underline-offset:0.18em;cursor:pointer}
.ft .legal{width:100%;padding-top:28px;margin-top:8px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--w-3)}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tier{display:flex;flex-direction:column;gap:16px;padding:30px 28px 30px;border-radius:16px;background:var(--plane-a);box-shadow:0 0 0 1px var(--hair)}
.tier.lift{box-shadow:0 0 0 1px var(--teal)}
.tier .name{font-size:22px;font-weight:700;letter-spacing:-0.03em;color:var(--w-1)}
.tier .for{font-size:14px;line-height:1.5;color:var(--w-1);font-weight:600}
.tier .desc{font-size:15px;line-height:1.6;color:var(--w-2)}
.tier ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.tier li{padding:11px 0;border-top:1px solid var(--hair);font-size:14px;line-height:1.5;color:var(--w-1)}
.tier .btn{margin-top:auto}

/* read page */
.read-hero{padding:150px 0 40px}
.read-hero canvas{display:block;width:100%;height:clamp(360px,48vh,480px);margin:0}
.read-hero .strip{display:flex;align-items:center;gap:14px;padding:0 0 14px;border-bottom:1px solid var(--hair)}
.read-hero .strip .mono{margin-left:auto}
.gate{border-radius:16px;background:var(--plane-a);box-shadow:0 0 0 1px var(--hair);padding:34px;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,0.8fr);gap:40px;align-items:center}
.gate form,.sp-form{display:flex;flex-direction:column;gap:10px}
.gate input,.gate textarea,.sp-form input{height:46px;padding:0 14px;border-radius:8px;border:1px solid var(--hair);background:var(--ink);color:var(--w-1);font-family:inherit;font-size:15px}
.gate input::placeholder,.sp-form input::placeholder{color:var(--w-3)}
.gate .fine,.sp-form .fine{font-size:13px;line-height:1.5;color:var(--w-2)}
.read-body{display:block}
.read-body[data-open],.read-body:target{display:block}
.beliefs{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.belief{padding:26px 22px 28px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);display:flex;flex-direction:column;gap:12px}
.belief .k{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--w-2)}
.belief .s{font-size:14px;line-height:1.5;color:var(--w-1)}
.belief .state{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase}
.belief .state i{width:12px;height:12px;border-radius:3px;display:inline-block}
.state.held{color:var(--w-1)} .state.held i{background:var(--w-1)}
.state.partial{color:var(--w-1)} .state.partial i{border:2px solid var(--yellow)}
.state.thin{color:var(--blue-text)} .state.thin i{border:2px dashed var(--blue)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quote{padding:22px 24px;border-radius:12px;background:var(--plane-a);box-shadow:0 0 0 1px var(--hair);display:flex;flex-direction:column;gap:12px}
.quote .q{font-size:16px;line-height:1.55;color:var(--w-1)}
.quote .who{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--w-2)}

/* prose pages */
.prose{max-width:720px;display:flex;flex-direction:column;gap:18px}
.prose h2{font-size:22px;font-weight:700;letter-spacing:-0.03em;color:var(--w-1);margin-top:18px}
.prose p,.prose li{font-size:18px;line-height:1.65;color:var(--w-2)}
.prose p > strong:first-child{display:block;margin-bottom:4px}
.prose ul{margin:0;padding-left:20px}
.prose strong{color:var(--w-1);font-weight:600}

/* responsive */
@media (max-width:1040px){
  .hero{grid-template-columns:1fr;gap:48px;min-height:0;padding-top:120px}
  .hero-copy{padding-right:var(--gutter)}
  .hero-copy h1{max-width:17ch}
  .hero-field{padding-left:max(var(--gutter),calc((100vw - var(--wide)) / 2 + var(--gutter)))}
}
@media (max-width:900px){
  .pair,.pair.flip{grid-template-columns:1fr;gap:44px}
  .cells,.cells.two{grid-template-columns:1fr 1fr}
  .reads,.tiers{grid-template-columns:1fr}
  .beliefs{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:1fr}
  .gate{grid-template-columns:1fr}
  }
@media (max-width:768px){
  :root{--gutter:20px}
  .sec{padding:64px 0}
  .sec.tall{padding:88px 0}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-copy,.hero-field{padding-left:var(--gutter);padding-right:var(--gutter)}
  .hero-field .strip{padding-right:0}
  .hero-instrument canvas{height:clamp(320px,50vh,380px)}
  .btns .btn{width:100%}
  .hd nav{display:none}
  .hd .menu-btn{display:inline-flex}
  .trio{grid-template-columns:1fr}
  .spine a{border-right:0;border-bottom:1px solid var(--hair)}
  .spine a:last-child{border-bottom:0}
  .cells,.cells.two{grid-template-columns:1fr}
  .close-band{flex-direction:column;align-items:flex-start;gap:28px}
  .beliefs{grid-template-columns:1fr}
  .page-hero{padding-top:130px}
  .read-hero{padding-top:120px}
}

/* additions */
.skip{position:absolute;left:-9999px;top:12px;z-index:100;padding:10px 14px;border-radius:8px;background:var(--teal);color:var(--on-accent);font-weight:600}
.skip:focus{left:12px}
.logo-light{display:none}
/* The instrument is always dark, whatever the page theme */
.gate label.mono{margin-top:6px}
.gate .flabel,.sp-form .flabel{margin:20px 0 6px}
.gate .flabel:first-of-type,.sp-form .flabel:first-of-type{margin-top:0}
.gate .flabel.req::after,.sp-form .flabel.req::after{content:" *";color:var(--teal-text)}
.gate[data-done] form{display:none}
.gate[data-done]{grid-template-columns:1fr}
.hero-field .foot a{color:var(--w-2)}
/* The hero reading: brand, three figures, one belief, under the field */
.reading{border-top:1px solid var(--hair);padding:18px var(--gutter) 0 0;display:flex;flex-direction:column;gap:14px}
.reading-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.reading-brand{font-size:17px;font-weight:600;color:var(--w-1)}
.reading-cat{color:var(--w-3)}
.reading-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rt{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:12px;background:var(--ink-2);border:1px solid var(--hair);border-top:3px solid var(--blue)}
.rt.lead{border-top-color:var(--teal)}
.rt .v{font-size:clamp(26px,2.6vw,34px);font-weight:700;letter-spacing:-0.02em;color:var(--w-1);line-height:1;font-variant-numeric:tabular-nums}
.rt .l{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--w-3)}
.rt.lead .l{color:var(--teal-text)}
.rt.is-new .v{animation:popIn 520ms var(--ease) both}
@keyframes popIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.reading-belief{font-size:15px;line-height:1.5;color:var(--w-2)}
.reading-belief b{color:var(--w-1);font-weight:600}
.reading-src a{color:var(--w-2)} .reading-src a:hover{color:var(--w-1)}
@media (prefers-reduced-motion: reduce){.rt.is-new .v{animation:none}}
@media (max-width:768px){.reading{padding-right:0}.reading-tiles{gap:8px}.rt{padding:12px}.rt .v{font-size:24px}}

.hero-field .foot a:hover{color:var(--w-1)}
.read-hero .strip{margin-bottom:12px}
.quote .q{font-weight:500}
.feature .feature-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.8fr);gap:64px;align-items:end;margin-bottom:40px}
.feature .feature-head .nlist{margin:0}
.feature .feature-head .nlist li{max-width:none}.nlist li .t{max-width:none}
.feature .feature-head .stack{gap:16px}
.feature .feature-head .body{max-width:56ch}
.feature .shot{border-radius:18px}
@media (max-width:900px){.feature .feature-head{grid-template-columns:1fr;gap:28px;align-items:start}}
.pair.side{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);align-items:center}
.pair.side .nlist li{max-width:calc(44ch + 40px)}.nlist li .t{max-width:44ch}
@media (max-width:900px){.pair.side{grid-template-columns:1fr}}
@media (max-width:768px){.pair.side .shot{overflow-x:auto;-webkit-overflow-scrolling:touch}.pair.side .shot img{min-width:0;width:100%}.feature .shot img{min-width:0}.chart svg text{font-size:18px}.chart svg text.wk-alt{display:none}}

/* brand read graphic: the wordmark rebuilt from instrument pieces, one state per belief */
.brand-read{width:100%;max-width:640px;justify-self:end}
.brand-read .stage{position:relative;aspect-ratio:769/143}
.brand-read svg.stage{aspect-ratio:auto}
.brand-read .box{position:relative;width:100%}
.brand-read .inner{position:absolute;left:0;top:50%;transform:translateY(-50%);transition:opacity 380ms var(--ease)}
.brand-read .inner .stage{aspect-ratio:auto}
.brand-read .stage img{position:absolute;display:block;min-width:0}
.brand-read .keys{position:relative;margin-top:10px;border-top:1px solid var(--hair);padding-top:12px;height:48px}
.brand-read .keys span{position:absolute;top:12px;font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--w-2);white-space:nowrap}
.brand-read .keys span em{display:block;font-style:normal;color:var(--w-1);margin-bottom:3px}
.brand-read .keys span.st-partial{color:var(--yellow-text)}
.brand-read .keys span.st-thin{color:var(--blue-text)}
@media (max-width:900px){
  .brand-read{max-width:480px;justify-self:start}
  .brand-read .keys{height:auto;display:flex;flex-wrap:wrap;gap:8px 22px}
  .brand-read .keys span{position:static}
}

/* framed shots */
.shot.framed{background:var(--plane-a);display:flex;flex-direction:column}
.shot.framed img{order:1;display:block}
.shot.framed .shot-label{order:2;position:static;display:block;padding:9px 14px;border-top:1px solid var(--hair);background:var(--plane-a);font-family:var(--mono);font-size:10.5px;font-weight:600;line-height:1.4;letter-spacing:0.1em;text-transform:uppercase;color:var(--w-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot.framed .shot-label.right{text-align:left}
@media (max-width:480px){.shot.framed .shot-label{padding:7px 10px;font-size:9px;letter-spacing:0.08em}}
.shot.framed img{background:var(--plane-a)}
.cells.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.cells.four{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.cells.four{grid-template-columns:1fr}}
/* scroll reveal */
html.js [data-reveal]:not(.in){opacity:0;transform:translateY(16px)}
[data-reveal]{transition:opacity 600ms var(--ease),transform 600ms var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}
.reads.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.reads.two{grid-template-columns:1fr}}
#beliefs .cells > div{padding:22px 24px 24px}

.disclosure{text-wrap:pretty;font-size:15.5px;line-height:1.6;color:var(--w-2);border-left:2px solid var(--hair);padding-left:14px;max-width:64ch}
.flabel{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--w-2)}
.ft .legal{color:var(--w-2)}

main .body a:not(.btn),main .small a:not(.btn),.prose a:not(.btn),.ft a:hover{text-decoration:underline;text-underline-offset:0.18em}
.gate input,.gate textarea,.sp-form input{border-color:var(--w-3)}
.brand-mark{display:block;color:var(--w-1)}
.ft .brand-mark{color:var(--w-1)}

.gate textarea{resize:vertical;min-height:64px;padding:12px 14px;font-family:inherit}

.flowline{width:1px;height:44px;margin:0 auto;background:linear-gradient(180deg,var(--hair),var(--w-3))}
.qm{display:inline-block;width:9px;height:9px;margin-right:9px;vertical-align:baseline}
.qm.held{background:var(--w-1)}
.qm.partial{border:2px solid var(--yellow)}
.qm.thin{border:2px dashed var(--blue)}
.def-row .k{font-size:12px;color:var(--w-1)}
.def-row .s{max-width:70ch}

@media print{
  :root{--ink:#FFFFFF;--ink-2:#FFFFFF;--ink-3:#F2F3F5;--plane-a:#FFFFFF;--w-1:#1A1A1A;--w-2:#3A3D42;--w-3:#6A6E73;--hair:#B9BEC2;--teal-text:#057A76}
  body{background:#FFFFFF}
  .hd,.menu,.menu-btn,.skip,canvas{display:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .cells > div,.tier,.belief{break-inside:avoid}
  .read-body{display:block!important}
}

/* Product captures: bare dark crops, hairline only, no browser chrome (9/13) */
.shot.dark{background:#121317;box-shadow:0 0 0 1px var(--hair),var(--card-shadow)}
.shot.dark img{background:#121317}
.shot.dark.crop{aspect-ratio:var(--ar,16/10);max-height:none}
.shot.dark.crop img{width:100%;height:100%;object-fit:cover;object-position:top left}
.shot-cap{margin-top:14px;display:flex;gap:6px;flex-wrap:wrap}
/* Tapestry: hairline grid of product crops, one claim per tile */
.tapestry{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1px;background:var(--hair);box-shadow:0 0 0 1px var(--hair),var(--card-shadow);border-radius:18px;overflow:hidden}
.tapestry .tile{grid-column:span var(--c,6);background:var(--ink-2);padding:18px 18px 0;display:flex;flex-direction:column;gap:12px;min-width:0}
.tapestry .tile .lab{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--w-3);display:flex;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tapestry .tile .lab b{font-weight:500;color:var(--w-2)}
.tapestry .tile .img{position:relative;flex:1;border-radius:10px 10px 0 0;overflow:hidden;box-shadow:0 0 0 1px var(--hair);background:#121317;aspect-ratio:var(--ar,2)}
.tapestry .tile .img img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.tapestry .tile .img::after{content:"";position:absolute;inset:auto 0 0 0;height:28px;background:linear-gradient(to bottom,rgba(var(--fade),0),rgba(var(--fade),0.9))}
@media (max-width:900px){.tapestry .tile{grid-column:span 6!important}.tapestry .tile .img{aspect-ratio:1.6!important}}
@media (max-width:600px){.tapestry .tile{grid-column:span 12!important}.tapestry .tile .img{aspect-ratio:1.5!important}}

/* Panes: two or three product crops per spine section */
.panes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;margin-top:8px}
.panes .shot{grid-column:span var(--c,12);margin:0}
@media (max-width:900px){.panes{gap:14px}.panes .shot{grid-column:span 12;--ar:1.6}}
.panes.stackpanes{display:flex;flex-direction:column;gap:22px}
.panes.stackpanes .shot{width:100%}

/* Split: copy left, stacked screens right */
.feature .split{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.35fr);gap:56px;align-items:start}
.feature .split .copy{position:sticky;top:96px;gap:16px}
.feature .split .copy .body{max-width:44ch}
.feature .split .nlist{margin:8px 0 0}
.feature .split .nlist li{max-width:none}
.feature .split .panes.stackpanes .shot{max-width:none}
@media (max-width:900px){.feature .split{grid-template-columns:1fr;gap:28px}.feature .split .copy{position:static}}

/* read pages (was inline on /reads/*) */
/* Upmode brand read pages -- redesign, direction B "product components, site layout".
 * Drop-in replacement for the per-page <style> block on /reads/*.
 *
 * Uses ONLY variables the site already declares in :root. No new tokens.
 * Site var            == Upmode DS 2.0 dark semantic
 * --ink   #0F1115     == --surface-canvas
 * --ink-2 #171A1F     == --surface-raised / --surface-subtle
 * --ink-3 #1D2026     == --surface-hover     (bar troughs, belief track)
 * --hair  #2E3138     == --border-default
 * --w-1   #F5F6F8     == --text-strong
 * --w-2   #A8AAB0     == --text-soft
 * --w-3   #8A8B90     == --text-muted
 * --teal  #4FE3DE     == --accent-brand-fill
 * --blue  #6FC5E4     == --accent-info-fill
 * --yellow #FFD600    == --accent-emphasis-fill
 * Violet is NOT in the site's :root. Add one line to :root:
 *   --violet:#B49BF0;        (== --accent-reasoning-fill, dark theme)
 * Baseline grey for competitor bars uses --w-3.
 */

/* ---------- section rhythm (unchanged from the site) ---------- */
.rd-sec{padding:92px 0 0;scroll-margin-top:52px}
.rd-sec:last-of-type{padding-bottom:92px}
.rd-head{display:flex;flex-direction:column;gap:12px;max-width:720px}

/* The eyebrow is now mono 11/500 +0.08em, per the kit. One accent eyebrow
 * per page: section 01 only. Every other eyebrow is --w-3. */
.rd-eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--w-3)}
.rd-eyebrow.on{color:var(--teal-text)}

/* ---------- hero: type only, no graphic above the gate ---------- */
.rd-hero{padding:36px 0 56px}
.rd-hero .strip{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.rd-hero .strip img{height:17px;width:auto;margin-left:auto;opacity:0.92}
.rd-hero h1{max-width:22ch;font-size:clamp(36px,6vw,86px);line-height:0.94;font-weight:700;letter-spacing:-0.05em;color:var(--w-1);text-wrap:balance}
.rd-hero .lede{max-width:54ch;font-size:clamp(17px,1.6vw,23px);line-height:1.5;color:var(--w-2)}

/* ---------- the section rail (new component) ---------- */
.rd-rail{position:sticky;top:72px;z-index:5;background:var(--ink);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.rd-rail .wrap{height:52px;display:flex;align-items:center;gap:24px}
.rd-rail .brand{display:flex;align-items:center;gap:9px;flex-shrink:0;font-size:14px;font-weight:600;letter-spacing:-0.01em;color:var(--w-1);white-space:nowrap}
.rd-rail .brand img{height:15px;width:auto;display:block}
.rd-rail nav{flex:1 1 0;min-width:0;display:flex;gap:24px;height:52px;align-items:center;overflow-x:auto;scrollbar-width:none}
.rd-rail nav::-webkit-scrollbar{height:0}
.rd-rail a{display:inline-flex;align-items:center;gap:8px;height:52px;margin-bottom:-1px;border-bottom:2px solid transparent;font-size:14px;font-weight:500;color:var(--w-2);white-space:nowrap;transition:color 150ms var(--ease)}
.rd-rail a:hover{color:var(--w-1)}
.rd-rail a[aria-current]{border-bottom-color:var(--teal);font-weight:600;color:var(--w-1)}
.rd-rail a i{font-family:var(--mono);font-size:11px;font-style:normal;color:var(--w-3)}
.rd-rail .meta{flex-shrink:0;font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--w-3);white-space:nowrap}

/* ---------- metric tiles: cards on the canvas, never inside a panel ------- */
.rd-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
.rd-tile{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--ink-2);border:1px solid var(--hair);border-top:3px solid var(--blue);border-radius:12px;box-shadow:var(--shadow-sm);min-width:0}
.rd-tile.lead{gap:12px;padding:24px;border-top-color:var(--teal)}
.rd-tile .l{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;line-height:1.4;color:var(--blue-text)}
.rd-tile.lead .l{color:var(--teal-text)}
.rd-tile .n{font-size:32px;font-weight:700;letter-spacing:-0.03em;line-height:1.05;color:var(--w-1);font-variant-numeric:tabular-nums}
.rd-tile.lead .n{font-size:44px}
.rd-tile .d{font-size:13px;line-height:1.5;color:var(--w-3)}

/* ---------- chart frame: hairline box, not a card ---------- */
.rd-frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:20px;align-items:start}
.rd-frame{border:1px solid var(--hair);border-top:3px solid var(--teal);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:16px;min-width:0}
.rd-frame.ctx{border-top-color:var(--blue)}
.rd-frame.say{border-top-color:var(--violet)}
.rd-frame > h3,.rd-frame > .t{font-size:14px;font-weight:600;color:var(--w-1)}
.rd-frame .cap{border-top:1px solid var(--hair);padding-top:12px;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--w-3)}

/* ---------- ranked rows: kit BarChart geometry ---------- */
.rd-bars{display:flex;flex-direction:column;gap:8px}
.rd-bar{display:grid;grid-template-columns:minmax(0,clamp(80px,13vw,220px)) minmax(0,1fr) 46px;align-items:center;gap:12px}
.rd-bar .k{font-size:14px;line-height:1.3;color:var(--w-2)}
.rd-bar .track{display:block;height:20px;border-radius:4px;background:var(--ink-3)}
.rd-bar .track i{display:block;height:20px;border-radius:4px;background:var(--teal);border:1px solid rgba(0,0,0,0.10);box-sizing:border-box}
.rd-bar .track i.ctx{background:var(--blue)}
.rd-bar .track i.base{background:var(--w-3)}
.rd-bar .v{text-align:right;font-size:14px;font-weight:700;color:var(--w-1);font-variant-numeric:tabular-nums}
.rd-bar .v.base{font-weight:500;color:var(--w-3)}

/* ---------- tables: kit DataTable geometry, 36px head / 44px rows -------- */
.rd-table{border:1px solid var(--hair);border-radius:12px;background:var(--ink-2);box-shadow:var(--shadow-sm)}
.rd-table .thead{display:flex;align-items:center;gap:16px;height:36px;padding:0 20px;border-bottom:1px solid var(--hair)}
.rd-table .thead span{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--w-3)}
.rd-table .trow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 20px;border-bottom:1px solid var(--hair)}
.rd-table .tcap{display:block;padding:12px 20px;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--w-3)}

/* belief row: extended AttributeRow, scale 0 to 2 */
.rd-belief .k{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:3px}
.rd-belief .k b{font-size:14px;font-weight:600;color:var(--w-1)}
.rd-belief .k small{font-size:12px;line-height:1.45;color:var(--w-2)}
.rd-belief .track{flex:0 0 clamp(120px,18vw,260px);display:block;height:6px;border-radius:3px;background:var(--ink-3)}
.rd-belief .track i{display:block;height:6px;border-radius:3px;background:var(--teal)}
.rd-belief .track i.pa{background:var(--yellow)}
.rd-belief .track i.th{background:var(--blue)}
.rd-belief .m{flex:0 0 42px;text-align:right;font-size:14px;font-weight:700;color:var(--w-1);font-variant-numeric:tabular-nums}

/* state marks are LOCKED: solid, yellow outline, blue dashed */
.rd-state{flex:0 0 96px;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap}
.rd-state i{width:12px;height:12px;border-radius:3px;display:inline-block;box-sizing:border-box;flex-shrink:0}
.rd-state.strong{color:var(--w-1)}   .rd-state.strong i{background:var(--teal)}
.rd-state.partial{color:var(--w-1)}  .rd-state.partial i{border:2px solid var(--yellow)}
.rd-state.thin{color:var(--blue-text)}    .rd-state.thin i{border:2px dashed var(--blue)}

/* competitive field: competitor plane, integers in muted ink, no teal */
.rd-field .brand{flex:1 1 180px;min-width:0;font-size:14px;color:var(--w-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-field .track{flex:2 1 240px;min-width:0;display:block;height:10px;border-radius:4px;background:var(--ink-3)}
.rd-field .track i{display:block;height:10px;border-radius:4px;background:var(--w-3)}
.rd-field .v{flex:0 0 42px;text-align:right;font-size:14px;font-weight:500;color:var(--w-3);font-variant-numeric:tabular-nums}

/* ---------- answer viewer: pill tabs + quote card ---------- */
.rd-pills{display:inline-flex;gap:4px;padding:4px;background:var(--ink-3);border-radius:8px}
.rd-pills button{display:inline-flex;align-items:center;height:28px;padding:0 12px;border:0;border-radius:4px;background:transparent;font-family:inherit;font-size:13px;font-weight:500;color:var(--w-3);white-space:nowrap;cursor:pointer;transition:color 100ms var(--ease)}
.rd-pills button[aria-selected="true"]{background:var(--ink-2);box-shadow:var(--shadow-sm);font-weight:600;color:var(--w-1)}
.rd-scroll{overflow-x:auto;scrollbar-width:none}
.rd-scroll::-webkit-scrollbar{height:0}
.rd-quote{margin:0;padding:20px;border-left:3px solid var(--violet);background:var(--ink-2);border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;flex-direction:column;gap:12px}
.rd-quote.ctx{border-left-color:var(--blue)}
.rd-quote p{margin:0;font-size:16px;line-height:1.6;color:var(--w-2);text-wrap:pretty}
.rd-quote cite{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--w-3)}
.rd-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}

/* ---------- gate ---------- */
.rd-gate{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:40px;align-items:center;padding:32px;border:1px solid var(--hair);border-top:3px solid var(--teal);border-radius:12px;background:var(--ink-2);box-shadow:var(--shadow-sm)}
.rd-gate .promise{font-size:19px;line-height:1.45;font-weight:600;letter-spacing:-0.01em;color:var(--w-1);text-wrap:balance}
.rd-gate form{display:flex;flex-direction:column;gap:10px}
.rd-gate label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--w-3)}
.rd-gate input{height:40px;padding:0 12px;border-radius:8px;border:1px solid var(--w-3);background:var(--ink);color:var(--w-1);font-family:inherit;font-size:14px}
.rd-gate .fine{font-size:13px;line-height:1.5;color:var(--w-3)}

/* ---------- phone ---------- */
@media (max-width:768px){
  .rd-sec{padding-top:56px}
  .rd-sec:last-of-type{padding-bottom:56px}
  .rd-hero{padding:24px 0 40px}
  .rd-bar{grid-template-columns:minmax(0,108px) minmax(0,1fr) 44px}
  /* belief row: title + state on line one, bar + score on line two */
  .rd-belief .k{flex:1 1 100%;order:1}
  .rd-state{order:2;flex:0 0 auto;margin-left:auto}
  .rd-belief .track{order:3;flex:1 1 60%}
  .rd-belief .m{order:4}
}

/* ── Hero reading row ("the fifth board") ─────────────────────────────
   Geometry is the canvas's own board columns continued below its edge.
   See design_handoff_hero_reading_row. Tokens are the instrument's, not
   the marketing set. No radius, no shadow, no card: hairlines divide. */
.hero-row{position:relative;height:122px;margin-top:0}
.hero-row .hr-labels{position:absolute;left:0;right:0;top:0;height:18px}
.hero-row .hr-lab{position:absolute;top:0;font:600 11.5px/1 var(--mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);white-space:nowrap}
.hero-row .hr-lab.on{color:#00C9C4}
.hero-row .c1{left:2.58%}
.hero-row .c2{left:19.33%}
.hero-row .c3{left:35.70%}
.hero-row .c4{left:51.93%}
.hero-row .hr-status,.hero-row .hr-ticks{position:absolute;right:5.03%;top:-1px}
.hero-row .hr-status{font:500 10px/1 var(--mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;color:#00C9C4;white-space:nowrap}
.hero-row .hr-ticks{display:flex;align-items:center;gap:4px}
.hero-row .hr-ticks i{width:14px;height:2px;background:rgba(255,255,255,.16);display:block}
.hero-row .hr-ticks i.on{background:#00C9C4}

.hero-row .hr-cell{position:absolute;top:18px;height:104px;width:14.18%;box-sizing:border-box;border-top:2px solid rgba(255,255,255,.10);
  background:repeating-linear-gradient(90deg,rgba(120,160,255,.035) 0 10.4px,transparent 10.4px 13.1px),
             repeating-linear-gradient(0deg,rgba(120,160,255,.035) 0 6px,transparent 6px 7.854px);
  display:flex;align-items:center;justify-content:center}
.hero-row .hr-cell.c4{width:auto;right:5.03%}
.hero-row .hr-cell.belief{display:block;padding:16px;text-align:left}

/* lit states: the wash and the phased texture arrive together */
.hero-row.is-p1 .hr-cell.c1,
.hero-row.is-p2 .hr-cell.c1,.hero-row.is-p2 .hr-cell.c2,
.hero-row.is-p3 .hr-cell.c1,.hero-row.is-p3 .hr-cell.c2,.hero-row.is-p3 .hr-cell.c3,
.hero-row.is-settled .hr-cell{
  background:linear-gradient(180deg,rgba(30,60,120,.10) 0%,rgba(30,60,120,.22) 100%),
             repeating-linear-gradient(90deg,rgba(120,160,255,.045) 0 10.4px,transparent 10.4px 13.1px),
             repeating-linear-gradient(0deg,rgba(120,160,255,.045) 0 6px,transparent 6px 7.854px);
  background-position:0 0,0 0,0 -1.81px;
  border-top-color:rgba(255,255,255,.14)}
.hero-row.is-settled .hr-cell.lead{
  background:linear-gradient(180deg,rgba(0,201,196,.09) 0%,rgba(30,60,120,.22) 100%),
             repeating-linear-gradient(90deg,rgba(120,160,255,.045) 0 10.4px,transparent 10.4px 13.1px),
             repeating-linear-gradient(0deg,rgba(120,160,255,.045) 0 6px,transparent 6px 7.854px);
  background-position:0 0,0 0,0 -1.81px;
  border-top:2px solid #00C9C4}

.hero-row .hr-fig{font:700 54px/1 var(--sans,'Inter',system-ui,sans-serif);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.42)}
.hero-row.is-settled .hr-fig{color:rgba(255,255,255,.80)}
.hero-row.is-settled .hr-cell.lead .hr-fig{color:#F4F6F6}
.hero-row .hr-cell.flash{animation:hr-settle 200ms cubic-bezier(.4,0,.2,1) 1}
@keyframes hr-settle{0%{background-color:rgba(0,201,196,.30)}100%{background-color:rgba(0,201,196,0)}}

.hero-row .hr-bt{display:block;height:22px;font:600 16px/22px var(--sans,'Inter',system-ui,sans-serif);letter-spacing:-.01em;color:#F4F6F6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-row .hr-bb{display:block;height:40px;margin-top:8px;font:400 14px/20px var(--sans,'Inter',system-ui,sans-serif);color:rgba(255,255,255,.72);overflow:hidden}
/* The frame never moves. Only the ink inside it swaps. */
.hero-row .hr-btext{display:block;opacity:0}
.hero-row.belief-in .hr-btext{opacity:1;animation:hr-b-in 200ms cubic-bezier(.4,0,.2,1) 1}
.hero-row.belief-out .hr-btext{opacity:0;animation:hr-b-out 130ms cubic-bezier(.4,0,.2,1) 1}
.hero-row.belief-held .hr-cell.belief{border-top:2px solid #00C9C4}
.hero-row.belief-thin .hr-cell.belief{border-top:2px solid #FFD65A}
@keyframes hr-b-in{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
@keyframes hr-b-out{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-4px)}}

.hero-link{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:20px 5.03% 0 2.58%;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.50)}
.hero-link b{color:rgba(255,255,255,.80);font-weight:600}

@media (max-width:640px){
  .hero-row{height:auto;display:block}
  .hero-row .hr-labels{position:static;height:auto;display:grid;grid-template-columns:repeat(3,1fr);margin-top:8px}
  .hero-row .hr-lab{position:static;text-align:center}
  .hero-row .hr-lab.c4{grid-column:1/-1;text-align:left;margin-top:10px}
  .hero-row .hr-status,.hero-row .hr-ticks{position:static;justify-self:end}
  .hero-row .hr-cell{position:static;width:auto;height:86px}
  .hero-row .hr-fig{font-size:42px}
  .hero-row .hr-cell.c1,.hero-row .hr-cell.c2,.hero-row .hr-cell.c3{float:left;width:33.333%;box-sizing:border-box;border-right:1px solid transparent}
  .hero-row .hr-cell.c4{float:none;clear:both;width:auto;height:96px;margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  .hero-row .hr-cell,.hero-row .hr-btext{animation:none!important}
}

/* ───────────────────────────────────────────────────────────────────────────
   Brand read template. One framed moment in 01, hairlines everywhere else.
   Every colour carries exactly one meaning: teal the measured outcome, blue
   context, yellow a Partial belief and nothing else, violet model behaviour
   in 04 and nowhere else. Radii nowhere on content; no shadows at all.
   ─────────────────────────────────────────────────────────────────────── */
.rdx-sec{padding:80px 0 0;scroll-margin-top:54px}
@media (max-width:768px){.rd-rail{top:80px}}
.rdx-sec.dark{margin-top:80px;background:#0A0B0E;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:80px 0}
.rdx{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter);display:flex;flex-direction:column;gap:40px}
.rdx.tight{gap:36px}
.rdx-head{display:flex;flex-direction:column;gap:12px;max-width:760px}
.rdx-head.wide{max-width:820px}
.rdx-eyebrow{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--w-3)}
.rdx-eyebrow.lead{color:var(--teal-text)}
.rdx-eyebrow.model{color:var(--violet)}
.rdx-h2{font:700 clamp(30px,3.4vw,44px)/1.08 var(--sans);letter-spacing:-.035em;color:var(--w-1);margin:0;text-wrap:balance}
.rdx-lede{font:400 14px/1.6 var(--sans);color:var(--w-2);margin:0;max-width:78ch}
.rdx-find{font:400 14px/1.6 var(--sans);color:var(--w-2);margin:0;max-width:66ch;border-top:1px solid var(--hair);padding-top:14px}
.rdx-num{font-variant-numeric:tabular-nums}

/* 01 · the frame: the only framed element on the page */
.rdx-frame{border-top:2px solid var(--teal);background:linear-gradient(180deg,rgba(0,201,196,.08) 0%,rgba(0,201,196,.015) 100%);padding:34px 28px 36px;margin:0 -28px}
/* The funnel now takes the same two-column geometry as the bar lists below it,
   so the scale sentence starts on the same line as the second list's heading.
   The three figures keep their shared baseline inside the first column. */
.rdx-funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:16px 48px;align-items:end}
.rdx-figs{display:grid;grid-template-columns:auto auto auto;gap:16px 56px;align-items:baseline}
.rdx-fig{display:flex;align-items:baseline;gap:3px}
.rdx-fig.lead{gap:4px}
.rdx-fig .n{font:700 clamp(30px,3.2vw,44px)/.84 var(--sans);letter-spacing:-.03em;color:var(--w-2);font-variant-numeric:tabular-nums}
.rdx-fig.lead .n{font:700 clamp(76px,9vw,128px)/.84 var(--sans);letter-spacing:-.045em;color:var(--w-1)}
.rdx-fig .u{font:500 11px/1 var(--mono);color:var(--w-3)}
.rdx-fig.lead .u{font:500 clamp(20px,2.3vw,33px)/1 var(--mono)}
.rdx-scale{font:400 16px/1.6 var(--sans);color:var(--w-2);margin:0;align-self:end}

/* 01 · the two bar lists, one shared sort */
.rdx-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:28px 48px;border-top:1px solid var(--hair);padding-top:28px}
.rdx-list{display:flex;flex-direction:column;gap:16px}
.rdx-list h3{font:600 14px var(--sans);color:var(--w-1);margin:0}
.rdx-rows{display:flex;flex-direction:column;gap:10px}
.rdx-row{display:grid;grid-template-columns:132px minmax(0,1fr) 46px;align-items:center;gap:12px}
.rdx-row .k{font:400 14px var(--sans);color:var(--w-2)}
.rdx-row .track{display:block;height:12px;background:var(--ink-3)}
.rdx-row .track i{display:block;height:12px;background:var(--teal)}
.rdx-row.ctx .track i{background:var(--blue)}
.rdx-row .v{text-align:right;font:700 14px var(--sans);color:var(--w-1);font-variant-numeric:tabular-nums}
.rdx-row.ctx .v{font-weight:500;color:var(--w-2)}

/* 02 · personas. Figures stay under 01's lead by rule, not by taste */
.rdx-personas{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px 40px;border-top:1px solid var(--hair);padding-top:28px}
.rdx-persona{display:flex;flex-direction:column;gap:14px}
.rdx-persona .n{font:700 clamp(32px,3.2vw,44px)/.84 var(--sans);letter-spacing:-.03em;color:var(--w-1);font-variant-numeric:tabular-nums}
.rdx-persona.low .n{color:var(--w-2)}
.rdx-persona .rule{display:block;height:4px;background:var(--ink-3)}
.rdx-persona .rule i{display:block;height:4px;background:var(--teal)}
.rdx-spread{display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--hair);padding-left:28px}
.rdx-spread p{font:400 16px/1.55 var(--sans);color:var(--w-2);margin:0;text-wrap:pretty}

/* 03 · belief dot plot on a 0 to 2 axis. Thin data renders thin */
.rdx-plot{position:relative;padding-top:22px}
.rdx-axis{position:absolute;left:min(42%,400px);right:120px;top:0;bottom:0;pointer-events:none}
.rdx-axis span{position:absolute;top:0;font:400 11px var(--mono);color:var(--w-3)}
.rdx-axis i{position:absolute;top:0;bottom:0;border-left:1px solid var(--hair)}
.rdx-belief{display:grid;grid-template-columns:min(42%,400px) minmax(0,1fr) 120px;align-items:center;min-height:60px;border-bottom:1px solid rgba(255,255,255,.05)}
.rdx-belief .nm{display:flex;flex-direction:column;gap:2px;padding-right:28px}
.rdx-belief .nm b{font:600 14px var(--sans);color:var(--w-1)}
.rdx-belief .nm small{font:400 12px/1.45 var(--sans);color:var(--w-3)}
.rdx-belief .plot{position:relative;height:60px}
.rdx-belief .plot .bar{position:absolute;left:0;top:50%;height:2px;transform:translateY(-1px)}
.rdx-belief .plot .dot{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;box-sizing:border-box;transform:translate(-4.5px,-4.5px);border-width:2px;border-style:solid}
.rdx-belief .sc{display:flex;align-items:baseline;gap:12px;justify-content:flex-end}
.rdx-belief .sc .st{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--w-1)}
.rdx-belief .sc .val{font:700 14px var(--sans);color:var(--w-1);font-variant-numeric:tabular-nums}
.rdx-belief.strong .bar,.rdx-belief.strong .dot{background:var(--teal);border-color:var(--teal)}
.rdx-belief.partial .bar{background:var(--yellow)}
.rdx-belief.partial .dot{background:var(--ink);border-color:var(--yellow)}
.rdx-belief.thin .bar{background:var(--blue)}
/* Thin renders as an OPEN ring, not a dashed one. A 2px dashed border on a 9px
   circle resolves to three uneven arcs and reads as a rendering fault; every
   dashed variant tested the same way, including an SVG stroke-dasharray. The
   open ring keeps the point (thin data renders thin: the ring does not close)
   and is unambiguous at size. Filled = Strong, closed ring = Partial, open
   ring = Thin. */
.rdx-belief.thin .dot{background:var(--ink);border-color:var(--blue);border-style:solid;border-width:1.5px}
.rdx-belief.thin .sc .st{color:var(--blue-text)}

/* 04 · the one dark section, the only place violet appears */
.rdx-says{display:flex;flex-direction:column;gap:48px}
.rdx-q{display:flex;flex-direction:column;gap:20px}
.rdx-qh{font:400 11px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--w-3);margin:0}
.rdx-qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:40px 64px;align-items:start}
.rdx-spec{margin:0;display:flex;flex-direction:column;gap:20px;border-left:3px solid var(--violet);padding-left:28px}
.rdx-spec p{margin:0;font:600 clamp(24px,2.8vw,36px)/1.26 var(--sans);letter-spacing:-.026em;color:var(--w-1);text-wrap:pretty}
.rdx-spec cite{font:400 11px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:var(--w-3)}
.rdx-index{display:flex;flex-direction:column;padding-top:4px}
.rdx-index .lab{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--w-3);padding-bottom:14px}
.rdx-index .end{border-top:1px solid rgba(255,255,255,.08)}
.rdx-plat{appearance:none;background:none;text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 0;border:0;border-top:1px solid rgba(255,255,255,.08);font-family:inherit;transition:background 120ms var(--ease)}
.rdx-plat:hover{background:rgba(255,255,255,.02)}
.rdx-plat .dot{width:8px;height:8px;border-radius:50%;flex:none;background:transparent;border:1px solid var(--w-3);box-sizing:border-box}
.rdx-plat .nm{font:600 14px var(--sans);color:var(--w-2)}
.rdx-plat .role{margin-left:auto;font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--w-3)}
.rdx-plat[aria-pressed="true"] .dot{background:var(--violet);border-color:var(--violet)}
.rdx-plat[aria-pressed="true"] .nm{color:var(--w-1)}
.rdx-plat[aria-pressed="true"] .role{color:var(--violet)}
.rdx-proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:28px 48px;border-top:1px solid var(--hair);padding-top:26px}
/* Each proof block is its own grid item, so a cite used to sit wherever its own
   quote happened to end and the two labels never lined up. Subgrid puts every
   quote in row one and every cite in row two, so the cites share a baseline no
   matter how long the quotes are, and it still holds if a third block is added. */
.rdx-proof{grid-template-rows:auto auto}
.rdx-proof blockquote{margin:0;display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:12px;align-content:start}
@supports not (grid-template-rows:subgrid){
  .rdx-proof{align-items:stretch}
  .rdx-proof blockquote{display:flex;flex-direction:column;gap:12px}
  .rdx-proof cite{margin-top:auto;padding-top:12px}
}
.rdx-proof p{margin:0;font:400 19px/1.5 var(--sans);color:var(--w-2);text-wrap:pretty}
.rdx-proof cite{font:400 13px/1.55 var(--sans);font-style:normal;color:var(--w-1)}
.rdx-proof cite b{font-weight:600}

/* 05 · competitors. The subject's own row is the reference point */
.rdx-field{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.rdx-crow{display:grid;grid-template-columns:min(34%,300px) minmax(0,1fr) 64px;align-items:center;gap:24px;height:56px;border-bottom:1px solid rgba(255,255,255,.05);padding:0 16px}
.rdx-crow .nm{font:400 14px var(--sans);color:var(--w-2)}
.rdx-crow .track{display:block;height:10px;background:var(--ink-3)}
.rdx-crow .track i{display:block;height:10px;background:var(--blue)}
.rdx-crow .v{text-align:right;font:500 15px var(--sans);color:var(--w-2);font-variant-numeric:tabular-nums}
.rdx-crow.subject{background:rgba(255,255,255,.02);border-bottom:1px solid var(--hair)}
.rdx-crow.subject .nm{font:600 14px var(--sans);letter-spacing:-.01em;color:var(--w-1)}
.rdx-crow.subject .track i{background:var(--teal)}
.rdx-crow.subject .v{font-weight:700;color:var(--w-1)}

@media (max-width:1060px){
  .rdx-spread{border-left:0;padding-left:0;border-top:1px solid var(--hair);padding-top:20px;grid-column:1/-1}
}
@media (max-width:900px){
  .rdx-sec{padding:64px 0 0}
  .rdx-sec.dark{padding:64px 0}
  .rdx-frame{padding:28px 16px 30px;margin:0 -16px}
  .rdx-funnel{grid-template-columns:1fr;gap:20px}
  .rdx-figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
  .rdx-figs>*:nth-child(1){grid-column:1/-1;grid-row:1}
  .rdx-figs>*:nth-child(4){grid-column:1/-1;grid-row:2}
  .rdx-figs>*:nth-child(2){grid-column:1;grid-row:3;padding-top:14px}
  .rdx-figs>*:nth-child(3){grid-column:2;grid-row:3;padding-top:14px}
  .rdx-figs>*:nth-child(5){grid-column:1;grid-row:4}
  .rdx-figs>*:nth-child(6){grid-column:2;grid-row:4}
  .rdx-axis{left:0;right:0}
  .rdx-belief{grid-template-columns:1fr 84px;row-gap:8px;padding:14px 0;min-height:0}
  .rdx-belief .nm{padding-right:0}
  .rdx-belief .plot{grid-column:1/-1;height:20px;order:3}
  .rdx-row{grid-template-columns:96px minmax(0,1fr) 42px}
}



/* A line may wrap, but it may not strand a word. `pretty` reflows the last two
   lines so a paragraph never ends on an orphan; brand names are joined with a
   non-breaking space in the markup so a wrap can never split one. */
.rdx-find,.rdx-lede,.rdx-scale,.rdx-spread p,.rdx-proof p,.rdx-proof cite,
.rdx-belief .nm small,.body,.lede,.disclosure,.hero-copy p{text-wrap:pretty}

/* Short blocks get `balance` rather than `pretty`: evening every line is what
   stops a three-line paragraph finishing on a stub. `pretty` only reflows the
   tail and will still leave two words alone on the last line. */
.disclosure,.rdx-scale,.rdx-spread p,.rdx-proof cite{text-wrap:balance}

/* 04 control row: one prompt, one category slot, four ticks. Same tick language
   as the hero belief rotation, so it reads as a rotation indicator rather than a
   new kind of control. */
.rdx-ctl{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 24px}
.rdx-ctl .asked{font:500 11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--w-3)}
.rdx-ctl .cat{margin-left:auto;display:flex;align-items:center;gap:12px}
.rdx-ctl .cat > .lab{font:500 11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--w-2);white-space:nowrap}
/* Every category name is rendered stacked in one grid cell and all but one is
   hidden. Hidden text still takes space, so the slot measures itself against the
   longest name and nothing jumps when the category changes. No width to maintain. */
.rdx-slot{display:inline-grid;justify-items:start;vertical-align:bottom}
.rdx-slot > span{grid-area:1/1;visibility:hidden}
.rdx-slot > span[data-on]{visibility:visible}
.rdx-ticks{display:flex;align-items:center;gap:0;margin:-21px -6px}
@media (max-width:480px){.rdx-ctl .cat{flex-wrap:wrap}.rdx-ticks{margin-right:0}}
/* 2px bar inside 21px of vertical padding gives a 44px touch target without
   changing anything on screen. */
.rdx-tick{appearance:none;cursor:pointer;padding:21px 6px;border:0;background:none;transition:opacity 120ms var(--ease)}
.rdx-tick:hover{opacity:.7}
.rdx-tick i{display:block;width:14px;height:2px;background:rgba(255,255,255,.16)}
.rdx-tick[aria-pressed="true"] i{background:var(--violet)}