/* ==========================================================
   Vidora Labs — public site
   Dark, product-led. Surfaces are glass over a near-black
   canvas; the accent is subtitle amber, because that is the
   colour of the thing we sell.
   ========================================================== */

:root{
  --bg:#07080B;
  --bg-2:#0A0C11;
  --bg-3:#0E1117;

  --panel:rgba(255,255,255,.026);
  --panel-2:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);

  --ink:#EEF1F6;
  --ink-2:#98A1B0;
  --ink-3:#636C7B;

  --amber:#FFC24D;
  --amber-2:#FF9838;
  --blue:#6E8BFF;
  --violet:#9B7CFF;
  --ok:#3ED598;
  --bad:#FF6B5E;

  --display:"Inter Tight",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  /* aliases kept so pages written against the previous palette still resolve */
  --screen:#0A0C11;
  --screen-2:rgba(255,255,255,.032);
  --screen-line:rgba(255,255,255,.075);
  --screen-ink:#EEF1F6;
  --screen-ink-2:#98A1B0;
  --paper:#07080B;
  --paper-2:rgba(255,255,255,.026);
  --paper-3:#0A0C11;
  --brand:#FFC24D;
  --brand-2:#FF9838;
  --brand-tint:rgba(255,194,77,.1);
  --warn:#FFC24D;

  /* One vertical rhythm for the whole site. Every section uses these, so no
     band can end up visibly taller or shorter than its neighbours. */
  --section-y:clamp(64px,7vw,104px);
  --section-gap:clamp(28px,3.6vw,44px);

  --wrap:1180px;
  --gut:clamp(18px,4.5vw,40px);
  --r:14px;
  --r-sm:9px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);position:relative}
.narrow{max-width:800px;margin:0 auto}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* ---------------- type ---------------- */
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;line-height:1.06;letter-spacing:-.035em}
h1{font-size:clamp(38px,6vw,68px);letter-spacing:-.045em}
h2{font-size:clamp(28px,4.2vw,44px);letter-spacing:-.04em}
h3{font-size:clamp(17px,1.8vw,19px);letter-spacing:-.02em;line-height:1.32}
h4{font-size:14px;letter-spacing:-.01em}
p{margin:0 0 1em}

.grad{
  background:linear-gradient(176deg,#FFFFFF 18%,#A8B2C4 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.amber{
  background:linear-gradient(100deg,var(--amber),var(--amber-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{font-size:clamp(16.5px,1.7vw,19px);line-height:1.6;color:var(--ink-2);max-width:60ch}
.small{font-size:14.5px;color:var(--ink-2)}
.tiny{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.mono{font-family:var(--mono);font-size:.86em;letter-spacing:-.01em}
.caption{font-size:12.5px;color:var(--ink-3);margin:14px 0 0;max-width:900px}
mark{background:rgba(255,194,77,.14);color:var(--amber);padding:1px 5px;border-radius:4px}

/* badge above section headings */
.badge{
  display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 8px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
  margin-bottom:20px;
}
.badge b{
  font-weight:500;color:#0A0C11;background:var(--amber);border-radius:999px;
  padding:1px 7px;font-size:10px;letter-spacing:.05em;
}
.badge.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);margin-left:3px}

/* ---------------- nav ---------------- */
.nav{position:sticky;top:0;z-index:80;background:rgba(7,8,11,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:18px}
.brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-weight:650;font-size:21px;letter-spacing:-.04em;color:var(--ink);line-height:1}
.brand:hover{text-decoration:none}
.brand .vmark,.vmark{
  flex:none;display:block;border-radius:9px;
  filter:drop-shadow(0 6px 18px rgba(255,152,56,.42));
  transition:transform .18s ease,filter .18s ease;
}
.brand:hover .vmark{transform:translateY(-1px) scale(1.03);filter:drop-shadow(0 8px 22px rgba(255,152,56,.6))}
.brand-word{white-space:nowrap}
/* Legacy square mark, kept so any page still using the old span renders. */
.brand-mark{
  width:26px;height:26px;border-radius:8px;flex:none;position:relative;
  background:linear-gradient(150deg,var(--amber),var(--amber-2));
  box-shadow:0 0 0 1px rgba(255,194,77,.28),0 6px 18px -6px rgba(255,152,56,.6);
}
.brand-mark::after{
  content:"";position:absolute;left:5px;right:5px;bottom:6px;height:2px;border-radius:1px;
  background:#0A0C11;box-shadow:0 -5px 0 rgba(10,12,17,.55);
}
.nav-links{display:flex;align-items:center;gap:5px}
.nav-links a:not(.btn){
  color:var(--ink-2);font-size:14.5px;font-weight:450;padding:7px 12px;border-radius:8px;
}
.nav-links a:not(.btn):hover{color:var(--ink);background:var(--panel);text-decoration:none}
.nav-links a.on{color:var(--ink);background:var(--panel)}
.nav-cta{display:flex;align-items:center;gap:9px;margin-left:12px}
.nav-toggle{display:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-family:var(--mono);font-size:11.5px;cursor:pointer;color:var(--ink)}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;white-space:nowrap;
  font-family:var(--body);font-size:14.5px;font-weight:500;padding:9px 17px;border-radius:9px;
  border:1px solid transparent;transition:transform .12s,background .15s,border-color .15s,box-shadow .15s;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.lg{padding:12px 22px;font-size:15.5px;border-radius:10px}
.btn-amber{
  background:linear-gradient(160deg,var(--amber),var(--amber-2));color:#14100A;font-weight:600;
  box-shadow:0 8px 26px -10px rgba(255,152,56,.75),inset 0 1px 0 rgba(255,255,255,.32);
}
.btn-amber:hover{filter:brightness(1.07)}
.btn-glass{background:var(--panel-2);border-color:var(--line-2);color:var(--ink)}
.btn-glass:hover{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.24)}
.btn-quiet{color:var(--ink-2);border-color:var(--line)}
.btn-quiet:hover{color:var(--ink);border-color:var(--line-2)}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.center .btnrow{justify-content:center}

/* ---------------- bands + backdrop ---------------- */
.band{padding:var(--section-y) 0;position:relative}
.band-line{border-top:1px solid var(--line)}
.band-tint,.band-white{background:var(--bg-2);border-top:1px solid var(--line)}
.band-ink{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-3),var(--bg) 70%);
}
/* Previously this ran at roughly half the height of a normal band, which is
   what made the page rhythm look uneven. It now shares the site scale and
   simply carries less content. */
.band-tight{padding:var(--section-y) 0}

.grid-bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000,transparent 75%);
}
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.5}
.glow-a{width:520px;height:420px;background:rgba(255,152,56,.20);top:-160px;left:-80px}
.glow-b{width:560px;height:420px;background:rgba(110,139,255,.18);top:-120px;right:-120px}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;padding:var(--section-y) 0}
.hero h1{max-width:16ch}
.hero .lede{margin-top:20px;font-size:clamp(17px,1.8vw,19.5px)}
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,54px);align-items:center}
.hero-note{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;font-size:13px;color:var(--ink-3)}
.hero-note span{display:flex;align-items:center;gap:7px}
.hero-note span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok)}

/* ---------------- glass cards + bento ---------------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;
  position:relative;transition:border-color .18s,background .18s,transform .18s;
}
.card::before{
  content:"";position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
}
.card:hover{border-color:var(--line-2);background:var(--panel-2);transform:translateY(-2px)}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-2);font-size:14.8px}
.card p:last-child{margin-bottom:0}
.card-static:hover{transform:none}
.card-ink{background:var(--panel);border-color:var(--line)}

.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.b2{grid-column:span 2}
.b3{grid-column:span 3}
.b4{grid-column:span 4}
.b6{grid-column:span 6}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

.sec-head{max-width:820px;margin:0 0 var(--section-gap)}
.sec-head h2{margin-bottom:0}
.sec-head .lede{margin-top:16px;max-width:70ch}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .lede{margin-left:auto;margin-right:auto}

/* label column + content. Narrow left column reads as intentional
   rather than as a hole where copy should have been. */
.split{display:grid;grid-template-columns:minmax(180px,250px) 1fr;gap:clamp(22px,3.5vw,50px);align-items:start}
.split > div:first-child h3{margin-top:2px}
.split-even{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,32px);align-items:start}
/* Asymmetric variant. Defined here rather than inline so the mobile
   breakpoint below can actually override it — an inline style could not
   be beaten by a stylesheet rule, which left this two-up on phones. */
.split-lean{grid-template-columns:.85fr 1.15fr;gap:clamp(24px,3vw,44px)}

.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px;
}

/* ---------------- stat strip ---------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.stat{padding:22px 22px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--display);font-size:clamp(26px,3vw,34px);letter-spacing:-.045em;line-height:1}
.stat span{display:block;margin-top:8px;font-size:13px;color:var(--ink-2);line-height:1.45}

/* ---------------- product mockups ---------------- */
.mock{
  border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:#0B0E14;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03);
}
.mock-bar{
  display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.022);
}
.mock-dots{display:flex;gap:6px}
.mock-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.13)}
.mock-url{
  flex:1;font-family:var(--mono);font-size:11px;color:var(--ink-3);background:rgba(0,0,0,.3);
  border:1px solid var(--line);border-radius:6px;padding:4px 10px;text-align:center;
}
.mock-body{padding:16px}

.mrow{
  display:grid;grid-template-columns:1fr 82px 62px 96px;gap:12px;align-items:center;
  padding:11px 12px;border-radius:9px;font-size:13px;border:1px solid transparent;
}
.mrow.head{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);padding-bottom:6px}
.mrow.item{border-color:var(--line);background:rgba(255,255,255,.018);margin-bottom:7px}
.mrow.item:hover{background:rgba(255,255,255,.04)}
.mrow .t{font-weight:500;color:var(--ink)}
.mrow .s{font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}
.mpill{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 9px;border-radius:999px;
  font-family:var(--mono);letter-spacing:.02em;
}
.mpill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.mpill.ok{background:rgba(62,213,152,.12);color:var(--ok)}
.mpill.work{background:rgba(255,194,77,.13);color:var(--amber)}
.mpill.work::before{animation:blip 1.3s steps(2,start) infinite}
.mpill.idle{background:rgba(255,255,255,.05);color:var(--ink-3)}
@keyframes blip{50%{opacity:.25}}

.mwallet{
  display:flex;justify-content:space-between;align-items:flex-end;gap:14px;padding:14px;
  border:1px solid var(--line);border-radius:10px;background:linear-gradient(120deg,rgba(255,194,77,.09),transparent 60%);
  margin-bottom:14px;
}
.mwallet .lab{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mwallet .val{font-family:var(--display);font-size:28px;letter-spacing:-.04em;line-height:1;margin-top:5px}
.mbar{height:5px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:8px}
.mbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--amber),var(--amber-2))}

/* ---------------- cue frame ---------------- */
.frame-inner{
  position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:radial-gradient(120% 90% at 30% 15%,#1E2A38,#080B10 70%);
  border:1px solid var(--line-2);
  box-shadow:0 40px 90px -44px rgba(0,0,0,.95);
}
.frame-grain{position:absolute;inset:0;opacity:.55;background-image:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(255,255,255,.02) 3px 4px)}
.frame-bars{position:absolute;left:0;right:0;top:36%;height:17%;display:flex;align-items:flex-end;gap:2px;padding:0 10%;opacity:.3}
.frame-bars i{
  flex:1;border-radius:1px;height:38%;transform-origin:bottom;
  background:linear-gradient(to top,var(--amber),rgba(110,139,255,.55));
  animation:wave 2.6s ease-in-out infinite;animation-delay:calc(var(--d) * -83ms);
}
.frame-bars i:nth-child(3n){height:74%}
.frame-bars i:nth-child(4n+1){height:50%}
.frame-bars i:nth-child(5n+2){height:92%}
.frame-bars i:nth-child(7n+3){height:26%}
@keyframes wave{50%{transform:scaleY(.4)}}
.frame-tc{position:absolute;top:13px;left:15px;font-family:var(--mono);font-size:10.5px;color:#7D8B9C;letter-spacing:.06em}
.frame-badge{
  position:absolute;top:12px;right:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#14100A;background:var(--amber);padding:3px 9px;border-radius:5px;font-weight:600;
}
.frame-cue{position:absolute;left:8%;right:8%;bottom:10%;min-height:3.1em;display:flex;align-items:flex-end;justify-content:center}
.fcue{
  position:absolute;margin:0;text-align:center;width:100%;line-height:1.34;font-weight:500;
  font-size:clamp(14px,1.75vw,20px);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.8);
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;
}
.fcue.on{opacity:1;transform:none}
.fcue[dir=rtl]{font-family:"Noto Sans Hebrew",var(--body)}
.frame figcaption{font-size:12px;color:var(--ink-3);margin-top:12px;text-align:center}
.frame{margin:0}

/* ---------------- bar chart ---------------- */
.barchart{display:grid;gap:10px}
.bar-row{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:center}
.bar-label{font-size:14px;font-weight:500;line-height:1.3}
.bar-label span{display:block;font-size:11.5px;color:var(--ink-3);font-weight:400;font-family:var(--mono)}
.bar-track{position:relative;height:36px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,rgba(110,139,255,.5),rgba(155,124,255,.42));min-width:4px;transition:width .8s cubic-bezier(.2,.8,.25,1)}
.bar-row.hot .bar-fill{background:linear-gradient(90deg,var(--amber),var(--amber-2))}
.bar-value{position:absolute;left:14px;font-family:var(--mono);font-size:12px;color:#fff;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.bar-row.hot .bar-value{color:#14100A;font-weight:600;text-shadow:none}

/* ---------------- column chart ---------------- */
.chart-wrap{width:100%;overflow:hidden}
.colchart{width:100%;height:auto;display:block;overflow:visible}
.colchart .grid{stroke:rgba(255,255,255,.06);stroke-width:1}
.colchart .col{fill:rgba(110,139,255,.42)}
.colchart .col-hot{fill:var(--amber)}
.colchart .col-val{font-family:var(--mono);font-size:12px;fill:#fff}
.colchart .col-lab{font-family:var(--body);font-size:12.5px;font-weight:500;fill:var(--ink-2)}
.colchart .col-sub{font-family:var(--body);font-size:11px;fill:var(--ink-3)}

/* ---------------- calculator ---------------- */
.calc{display:grid;grid-template-columns:1fr 370px;gap:16px;align-items:start}
.calc-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.ctrl{margin-bottom:24px}
.ctrl:last-child{margin-bottom:0}
.ctrl-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.ctrl-head label{font-size:14px;font-weight:500}
.ctrl-head output{font-family:var(--mono);font-size:13.5px;color:var(--amber)}
input[type=range]{
  width:100%;height:22px;accent-color:var(--amber);background:transparent;
}
.result{
  border:1px solid rgba(255,194,77,.22);border-radius:var(--r);padding:24px;position:sticky;top:88px;
  background:linear-gradient(155deg,rgba(255,194,77,.09),rgba(255,255,255,.02) 55%);
}
.result .rlabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.result .rbig{font-family:var(--display);font-size:clamp(40px,5vw,54px);letter-spacing:-.05em;color:var(--amber);margin:6px 0 4px;line-height:1}
.rline{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--line)}
.rline b{color:var(--ink);font-weight:500;font-family:var(--mono);font-size:13px}

/* ---------------- cue lab ---------------- */
.lab{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lab-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.lab-head h3{flex:0 0 auto}
.lab-body{padding:18px 20px 22px}
.cuecard{
  border:1px solid var(--line);border-left:2px solid var(--ok);border-radius:10px;
  padding:12px 14px;margin-bottom:8px;background:rgba(62,213,152,.045);
}
.cuecard.over{border-left-color:var(--bad);background:rgba(255,107,94,.06)}
.cuecard .ct{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);display:flex;justify-content:space-between;gap:10px;margin-bottom:6px}
.cuecard .ct b{font-weight:500;color:var(--ok)}
.cuecard.over .ct b{color:var(--bad)}
.cuecard .cx{font-size:15px;white-space:pre-line;line-height:1.4;color:var(--ink)}
.meterbar{height:4px;border-radius:2px;background:rgba(255,255,255,.07);margin-top:9px;overflow:hidden}
.meterbar i{display:block;height:100%;background:var(--ok);transition:width .25s,background .25s}
.cuecard.over .meterbar i{background:var(--bad)}

/* ---------------- rtl demo ---------------- */
.rtl-demo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rtl-box{border-radius:var(--r);padding:20px;border:1px solid var(--line);background:var(--panel)}
.rtl-box.bad{border-color:rgba(255,107,94,.28)}
.rtl-box.good{border-color:rgba(62,213,152,.28)}
.rtl-box h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;font-weight:400}
.rtl-box.bad h4{color:var(--bad)}
.rtl-box.good h4{color:var(--ok)}
.rtl-line{
  direction:rtl;text-align:right;font-family:"Noto Sans Hebrew",var(--body);font-size:19px;
  color:#fff;background:#05070A;border:1px solid var(--line);border-radius:9px;padding:15px 17px;line-height:1.5;
}
.rtl-line.broken{direction:ltr;text-align:left;unicode-bidi:bidi-override}
.rtl-note{font-size:13px;color:var(--ink-2);margin:12px 0 0}

/* ---------------- pipeline explorer ---------------- */
.pipe{display:grid;grid-template-columns:240px 1fr;gap:14px;align-items:start}
.pipe-nav{display:flex;flex-direction:column;gap:5px}
.pipe-btn{
  text-align:left;background:transparent;border:1px solid transparent;border-radius:10px;
  padding:11px 14px;cursor:pointer;font-family:var(--body);font-size:14.5px;color:var(--ink-2);
  display:flex;gap:11px;align-items:baseline;transition:background .15s,border-color .15s,color .15s;
}
.pipe-btn .pn{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.pipe-btn:hover{background:var(--panel);color:var(--ink)}
.pipe-btn.on{background:var(--panel-2);border-color:rgba(255,194,77,.3);color:var(--ink);font-weight:500}
.pipe-btn.on .pn{color:var(--amber)}
.pipe-pane{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px;min-height:290px}
.pipe-pane[hidden]{display:none}
.pipe-pane p{color:var(--ink-2)}
.pipe-spec{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:14px;margin-top:18px}

/* ---------------- tabs + code ---------------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tab{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 13px;cursor:pointer;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-2);
}
.tab:hover{border-color:var(--line-2);color:var(--ink)}
.tab.on{background:var(--amber);border-color:var(--amber);color:#14100A;font-weight:500}
.code{
  background:#05070A;border:1px solid var(--line);border-radius:var(--r);
  padding:20px;font-family:var(--mono);font-size:12.5px;line-height:1.75;color:#C9D3E0;
  overflow-x:auto;white-space:pre;margin:0;
}
.code .k{color:var(--amber)}
.code .c{color:#586576}
.code .s{color:#7FD8A8}
.code[hidden]{display:none}

/* ---------------- lists + tables ---------------- */
.pillrow{display:flex;flex-wrap:wrap;gap:7px}
.pill{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;
  padding:5px 11px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2);background:var(--panel);
}
.pill:hover{border-color:var(--line-2);color:var(--ink)}
.pill.rtl{border-color:rgba(255,194,77,.35);color:var(--amber);background:rgba(255,194,77,.07)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:26px;font-size:14.8px;line-height:1.5;color:var(--ink-2)}
.ticks li::before{
  content:"";position:absolute;left:3px;top:7px;width:8px;height:8px;
  border:1.6px solid var(--amber);border-top:0;border-right:0;transform:rotate(-45deg);
}
.steps{counter-reset:sn;margin:0;padding:0}
.steps > li{
  list-style:none;counter-increment:sn;display:grid;grid-template-columns:46px 1fr;gap:18px;
  padding:20px 0;border-bottom:1px solid var(--line);
}
.steps > li:first-child{border-top:1px solid var(--line)}
.steps > li::before{
  content:counter(sn,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--amber);padding-top:3px;
}
.steps h3{margin-bottom:6px}
.steps p{color:var(--ink-2);font-size:14.8px}
.steps p:last-child{margin-bottom:0}

.deflist{border-top:1px solid var(--line)}
.deflist > div{display:grid;grid-template-columns:210px 1fr;gap:22px;padding:17px 0;border-bottom:1px solid var(--line)}
.deflist dt{font-weight:500;font-size:15px;color:var(--ink)}
.deflist dd{margin:0;color:var(--ink-2);font-size:14.8px}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table.plain{width:100%;border-collapse:collapse;font-size:14px}
table.plain th{
  text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;padding:12px 15px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
table.plain td{padding:14px 15px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
table.plain td b{color:var(--ink);font-weight:500}
table.plain tr:last-child td{border-bottom:0}

/* ---------------- faq ---------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 44px 18px 0;font-weight:500;font-size:16px;position:relative;list-style:none;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:15px;font-family:var(--mono);font-size:19px;color:var(--ink-3)}
.faq details[open] summary::after{content:"–";color:var(--amber)}
.faq details > div{padding:0 52px 20px 0;color:var(--ink-2);font-size:15px}
.faq details > div p:last-child{margin-bottom:0}

/* ---------------- final cta ---------------- */
.cta-band{position:relative;overflow:hidden;padding:var(--section-y) 0;border-top:1px solid var(--line)}
.cta-card{
  border:1px solid rgba(255,194,77,.2);border-radius:20px;padding:clamp(32px,5vw,56px);text-align:center;
  background:radial-gradient(120% 140% at 50% 0,rgba(255,152,56,.16),rgba(255,255,255,.02) 60%);
}
.cta-card h2{margin-bottom:14px}
.cta-card p{color:var(--ink-2);max-width:52ch;margin:0 auto}

/* ---------------- footer ---------------- */
.foot{border-top:1px solid var(--line);padding:48px 0 26px;background:var(--bg-2)}
.foot h4{color:var(--ink);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;margin-bottom:12px}
.foot a{color:var(--ink-2);display:block;padding:4px 0;font-size:14px}
.foot a:hover{color:var(--ink);text-decoration:none}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:30px}
.foot-grid p{font-size:13.5px;color:var(--ink-3);max-width:32ch;margin-top:14px}
.foot-base{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}

/* ---------------- responsive ---------------- */
@media (max-width:1020px){
  .hero-split,.calc,.pipe,.split,.split-even,.split-lean,.rtl-demo{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .b2,.b3,.b4,.b6{grid-column:span 1}
  .b-wide{grid-column:span 2}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .result{position:static}
  .pipe-nav{flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .pipe-btn{white-space:nowrap;border-color:var(--line)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .bento,.grid-2,.grid-3,.grid-4,.stats{grid-template-columns:1fr}
  .b-wide{grid-column:span 1}
  .stat{border-left:0;border-top:1px solid var(--line)}
  .stat:first-child{border-top:0}
  .bar-row{grid-template-columns:1fr;gap:6px}
  .deflist > div{grid-template-columns:1fr;gap:4px}
  .mrow{grid-template-columns:1fr auto;gap:8px}
  .mrow .hide-sm{display:none}
  .faq details > div{padding-right:6px}
}

/* The header needs to collapse well before the body grids do: the wordmark,
   five links and two buttons need about 820px of room, so between 680px and
   that figure the nav used to push the page sideways. */
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:absolute;top:72px;left:0;right:0;background:var(--bg-2);
    flex-direction:column;align-items:stretch;gap:2px;padding:10px var(--gut) 16px;
    border-bottom:1px solid var(--line);z-index:50;
  }
  .nav-links.open{display:flex}
  .nav-links a:not(.btn){padding:10px 12px}
  .nav-cta{margin:8px 0 0;flex-direction:column;align-items:stretch;gap:8px}
  .nav .wrap{position:relative}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}


/* ---------------- compatibility with the earlier page markup ---------------- */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,54px);align-items:center}
.numbered{counter-reset:cn}
.card-num{counter-increment:cn;padding-top:44px}
.card-num::after{
  content:counter(cn,decimal-leading-zero);position:absolute;left:22px;top:20px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--amber);
}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.metric{padding:22px;border-left:1px solid var(--line)}
.metric:first-child{border-left:0}
.metric b{display:block;font-family:var(--display);font-size:clamp(26px,3vw,34px);letter-spacing:-.045em;line-height:1}
.metric span{display:block;margin-top:8px;font-size:13px;color:var(--ink-2);line-height:1.45}
.band-ink .card{background:rgba(255,255,255,.035)}
.band-ink table.plain th{background:rgba(255,255,255,.03)}
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .metrics{grid-template-columns:1fr}
  .metric{border-left:0;border-top:1px solid var(--line)}
  .metric:first-child{border-top:0}
}


/* ---------------- justified body copy ---------------- */
/* Justification only reads well when the line is long enough to absorb the
   extra word spacing. Wide running text is justified; narrow card columns are
   left-aligned, because at roughly forty characters a line justify opens
   rivers of white space no matter how the hyphenation is tuned. */
.lede,
.pipe-pane p,
.steps p,
.deflist dd,
.faq details > div p,
.rtl-note,
.prose p,
p.small,
.sec-head p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  /* Only break words of 9+ characters, keeping 4 either side of the hyphen.
     This is what stops "single" turning into "sin-gle". */
  -webkit-hyphenate-limit-before:4;
  -webkit-hyphenate-limit-after:4;
  hyphenate-limit-chars:9 4 4;
  hyphenate-limit-lines:2;
}
/* Narrow columns: ragged right, no hyphenation, no rivers. */
.card p,
.result .tiny,
.grid-3 p,
.bento p{
  text-align:left;
  hyphens:manual;
  -webkit-hyphens:manual;
}
/* short strings look wrong justified — keep these ragged */
.caption,.tiny,.kicker,.bar-label,.bar-label span,.stat span,.metric span,
.mrow .s,.mrow .t,.frame figcaption,.hero-note,.mwallet .lab,.pipe-spec,.rlabel{
  text-align:left;hyphens:manual;-webkit-hyphens:manual;
}
.center .lede,.sec-head.center p{text-align:center;hyphens:manual;-webkit-hyphens:manual}
/* Headings never justify or hyphenate — they set the page's rhythm. */
h1,h2,h3,h4,summary,dt,.rbig,.badge{hyphens:manual;-webkit-hyphens:manual;text-wrap:balance}

/* ---------------- consistent section rhythm ---------------- */
.band > .wrap > .sec-head + .bento,
.band > .wrap > .sec-head + .barchart,
.band > .wrap > .chart-wrap,
.band > .wrap > .split{margin-top:0}
.sub-block{margin-top:clamp(28px,4vw,44px);padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--line)}
.sub-block h3{margin-bottom:12px}


/* ---------------- readable measure ---------------- */
/* Full-bleed sections are for charts and grids. Running text and label
   lists need a ceiling or the lines get too long to track. */
.prose{max-width:900px}
.deflist{max-width:1040px}
.band > .wrap > .steps{max-width:1000px}
.sub-block .prose{max-width:900px}
.sub-block h3 + .prose{margin-top:12px}
.sub-block > .steps{max-width:1000px;margin-top:14px}

/* A mockup shown on its own, rather than side by side, needs a ceiling too —
   otherwise the row columns stretch to the full width of the page. */
.mock-solo{max-width:880px;margin-top:clamp(24px,3vw,34px)}
.mock-solo + .caption{max-width:880px}
.mock{width:100%}
.mrow{grid-template-columns:minmax(0,1fr) 92px 70px 118px}
.mock-body{padding:16px 18px}

/* Stop the label column of a table row drifting away from its values.
   The cell is its own flex column so the title and the figure under it stay
   locked together, and every column in the row shares one baseline grid.
   The title is held to a single line: in the narrow side-by-side layout a
   two-line title made some rows taller than others, which is what made the
   list look ragged. */
.mcell{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.mrow .t{
  display:block;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mrow .s{display:block;line-height:1.3;white-space:nowrap}
.mrow > *{min-width:0}
.mrow.item{align-items:center;min-height:56px}
.mrow.head{align-items:end}


/* ---------------- final consistency pass ---------------- */
/* Sections that carry a bare heading (no sec-head wrapper) need the same
   rhythm as the ones that do, otherwise spacing jumps between pages. */
.band > .wrap > .badge{margin-bottom:18px}
.band > .wrap > h2{margin-bottom:var(--section-gap);max-width:22ch}
.band > .wrap > .badge + h2{margin-top:0}
.band > .wrap > h2 + .lede{margin-top:-18px;margin-bottom:var(--section-gap)}

/* Tables inherit the dark surface everywhere, including the aliased bands */
table.plain td b,table.plain td strong{color:var(--ink)}
.table-wrap + .caption{margin-top:14px}

/* Charts and grids are full bleed; everything else keeps a measure */
.barchart{max-width:1040px}
.chart-wrap{max-width:1040px}

/* Steps inside a card should not double up their own border */
.card .steps > li:first-child{border-top:0}
.card .steps > li:last-child{border-bottom:0;padding-bottom:0}

/* Long monospace strings must wrap rather than force a scrollbar */
.pipe-spec,.mono{overflow-wrap:anywhere}
.code{white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere}

/* Inputs inherit the theme even when styled inline on a page */
input[type=text],input[type=email],input[type=url],input[type=number],select,textarea{
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:10px 13px;font-family:var(--body);font-size:15px;width:100%;
}
input:focus,select:focus,textarea:focus{border-color:rgba(255,194,77,.5);outline:none}
select option{background:#0B0E14;color:var(--ink)}
label{color:var(--ink)}

@media (max-width:680px){
  .mrow{grid-template-columns:minmax(0,1fr) auto}
  .mock-body{padding:14px}
  .band > .wrap > h2{max-width:none}
}


/* ---------------- legal pages ---------------- */
.prose h3{
  margin:34px 0 10px;font-size:18px;letter-spacing:-.02em;color:var(--ink);
  padding-top:22px;border-top:1px solid var(--line);
}
.prose > h3:first-child{margin-top:0;padding-top:0;border-top:0}
.prose ul.ticks{margin:14px 0}
.prose p b{color:var(--ink)}

/* ==========================================================
   Final alignment pass
   Figures align on the digit, cards in a row share a height,
   and section rhythm is identical from page to page.
   ========================================================== */

/* Numerals line up in columns instead of drifting by glyph width. */
table.plain td,table.plain th,
.rline b,.stat b,.mrow .s,.mwallet .val,
.bar-value,.col-val,.mock-url,.cuecard .ct{
  font-variant-numeric:tabular-nums;
}
.rline b{text-align:right;white-space:nowrap}
.rline > span:first-child{min-width:0}

/* Cards in a row stretch to the tallest so their edges line up. */
.grid-2 > .card,.grid-3 > .card,.bento > .card{
  display:flex;flex-direction:column;
}
.grid-2 > .card > p:last-child,
.grid-3 > .card > p:last-child,
.bento > .card > p:last-child{margin-bottom:0}

/* Table cells: labels top-aligned, figures on a common baseline. */
table.plain td{vertical-align:middle}
table.plain td:first-child{vertical-align:middle}

/* Ticks lists keep their bullets aligned when an item wraps. */
.ticks li{text-align:left;hyphens:manual;-webkit-hyphens:manual}

/* Definition rows: label column never wraps mid-word. */
.deflist dt{hyphens:manual;-webkit-hyphens:manual}

/* Stat blocks share a height across the row. */
.stats > .stat{display:flex;flex-direction:column}
.stats > .stat span:last-child{margin-top:auto}

/* The calculator result panel keeps its rows on one line each. */
.result .rline span{overflow-wrap:anywhere}