/* ==========================================================================
   tech.css — the "Sorgo" layer on top of the Renaissance page: a HUD over the painting,
   mono telemetry labels, blueprint micro-grid on paper, HUD corner ticks on media, and
   the extra UI parts used by the new mockups (capability cards, vitals, chain, markets...).
   ========================================================================== */
:root{
  --cy:#bccbff; --cy-deep:#4f55c8; --moon:#f3d58c; --blue:#3d5afe; --hud-bg:rgba(8,14,20,.72);
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
.mono{font-family:var(--f-mono);font-feature-settings:"zero" 1;letter-spacing:0}

/* ---------- HUD over the painting (sits under the paper bands) ---------- */
.scope{position:fixed;inset:0;z-index:1;pointer-events:none;color:var(--cy);font:500 10px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity 1.2s 1.8s}
.canvas-wrap.ready~.scope{opacity:1}
.scope .hc{position:absolute;width:22px;height:22px;border:1px solid currentColor;opacity:.55}
.scope .hc.tl{left:14px;top:calc(var(--hdr) + 12px);border-right:0;border-bottom:0}
.scope .hc.tr{right:14px;top:calc(var(--hdr) + 12px);border-left:0;border-bottom:0}
.scope .hc.bl{left:14px;bottom:14px;border-right:0;border-top:0}
.scope .hc.br{right:14px;bottom:14px;border-left:0;border-top:0}
.hud-t{position:absolute;white-space:nowrap;opacity:.8;text-shadow:0 0 12px rgba(188,203,255,.35)}
.hud-t b{font-weight:700;color:#fff}
.hud-t.tl{left:46px;top:calc(var(--hdr) + 18px)}
.hud-t.tr{right:46px;top:calc(var(--hdr) + 18px);text-align:right;line-height:1.7}
.hud-t.bl{left:46px;bottom:20px;display:flex;align-items:center;gap:8px}
.hud-t.br{right:46px;bottom:20px}
.scope.lt{color:var(--cy-deep)}.scope.lt .hud-t{text-shadow:none}.scope.lt .hud-t b{color:#292919}
.hud-breath{width:9px;height:9px;border-radius:50%;background:var(--moon);box-shadow:0 0 10px var(--moon);animation:hudBreath 4.29s ease-in-out infinite}
@keyframes hudBreath{50%{transform:scale(1.7);opacity:.55}}
.hud-moon{display:inline-block;width:9px;height:9px;margin-right:7px;vertical-align:-1px;border-radius:50%;box-shadow:inset -3px 0 0 0 var(--moon)}
@keyframes hudBlink{50%{opacity:.2}}
.hud-scan{position:absolute;left:0;right:0;height:120px;top:-120px;background:linear-gradient(180deg,transparent,rgba(188,203,255,.045) 70%,rgba(188,203,255,.12) 99%,transparent);animation:hudScan 9s linear infinite}
@keyframes hudScan{to{transform:translateY(calc(100vh + 120px))}}
@media (max-width:939px){.hud-t.br{display:none}}
@media (max-width:768px){.scope .hc,.hud-t{display:none}.hud-t.bl{display:flex;left:14px;bottom:14px}}
@media (min-width:940px){.hud-t.tl,.hud-t.bl{left:calc((100vw - min(100vw,var(--container))) / 2 + min(100vw,var(--container)) * .2 + 14px)}.scope .hc.tl,.scope .hc.bl{left:calc((100vw - min(100vw,var(--container))) / 2 + min(100vw,var(--container)) * .2 - 10px)}}
@media (prefers-reduced-motion:reduce){.hud-scan,.scope.lt{color:var(--cy-deep)}.scope.lt .hud-t{text-shadow:none}.scope.lt .hud-t b{color:#292919}
.hud-live{animation:none}}

/* ---------- chapter eyebrow (mono label over the headline) ---------- */
.ch-title .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:.35rem;font:500 11px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cy);text-shadow:0 0 14px rgba(188,203,255,.4)}
.ch-title .eyebrow span{padding:3px 6px;border:1px solid currentColor;border-radius:2px;font-weight:700}
.ch-title .eyebrow::after{content:"";flex:0 1 90px;height:1px;background:linear-gradient(90deg,currentColor,transparent)}
@media (min-width:769px){.ch-title .eyebrow{font-size:12px;margin-bottom:.8rem}}
.chapter.dark-intro .ch-title .eyebrow{color:var(--cy-deep);text-shadow:none}
.js .ch-title .eyebrow{opacity:0;transform:translate3d(-12px,0,0);transition:opacity .8s var(--ease-out-cubic),transform 1s var(--ease-out-cubic)}
.js .ch-intro.in .ch-title .eyebrow{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .ch-title .eyebrow{opacity:1;transform:none}}

/* ---------- paper: blueprint micro-grid, mono accents ---------- */
.on-paper::after{content:"";position:absolute;z-index:-1;inset:0;left:var(--pl,0px);width:100vw;pointer-events:none;
  background-image:linear-gradient(rgba(79,85,200,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(79,85,200,.07) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.subhead{position:relative}
.blk.dark .subhead::before{content:"§ " attr(data-n);position:absolute;right:var(--gs-md);bottom:66px;font:500 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--cy-deep)}
.step-n{font:700 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cy);margin-bottom:14px}
.specs svg{color:var(--cy)}
/* media frames get HUD corner ticks and a hairline */
.frame-bg::after{content:"";position:absolute;inset:8px;pointer-events:none;z-index:3;opacity:.7;
  background:linear-gradient(var(--cy),var(--cy)) 0 0/12px 1px,linear-gradient(var(--cy),var(--cy)) 0 0/1px 12px,
    linear-gradient(var(--cy),var(--cy)) 100% 0/12px 1px,linear-gradient(var(--cy),var(--cy)) 100% 0/1px 12px,
    linear-gradient(var(--cy),var(--cy)) 0 100%/12px 1px,linear-gradient(var(--cy),var(--cy)) 0 100%/1px 12px,
    linear-gradient(var(--cy),var(--cy)) 100% 100%/12px 1px,linear-gradient(var(--cy),var(--cy)) 100% 100%/1px 12px;background-repeat:no-repeat}
/* "more updates" rows get a mono index */
.flist{counter-reset:fi}
.flist>.fi{counter-increment:fi}
.flist h3::before{content:counter(fi,decimal-leading-zero);display:block;margin-bottom:6px;font:500 10px/1 var(--f-mono);letter-spacing:.14em;color:var(--cy-deep)}
.cta .ic{transition:border-color .15s,background-color .15s,color .15s}
@media (hover:hover){.cta:hover .ic{background:var(--dark);color:var(--cy);border-color:var(--dark)}}
.dev-ic{background:linear-gradient(135deg,#10181f,#1f2a33);color:var(--cy);box-shadow:inset 0 0 0 1px rgba(188,203,255,.25)}
.clist a::after{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em}

/* ---------- mockup parts ---------- */
.seg{display:inline-flex;gap:2px;padding:2px;border-radius:.6em;background:#ececE2;font-weight:600;font-size:.9em}
.seg>span{padding:.35em .7em;border-radius:.5em;color:#77776b;white-space:nowrap}
.seg>span.on{background:#fffffb;color:#1c1c14;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg.sm{font-size:.82em}
.seg.wrap{flex-wrap:wrap}
.scr .seg{align-self:stretch;justify-content:space-between}
.tg{position:relative;flex:none;width:2.2em;height:1.25em;border-radius:99em;background:#d6d6cb;transition:background .2s}
.tg::after{content:"";position:absolute;top:.15em;left:.15em;width:.95em;height:.95em;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tg.on{background:var(--cy-deep)}
.tg.on::after{left:auto;right:.15em}
.est{font:700 .72em/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:.35em .6em;border-radius:.3em;background:#eceefe;color:var(--cy-deep);border:1px dashed #b8bdf0}
.note-box{margin-top:1em;padding:.8em 1em;border-radius:.7em;background:#f1f2fb;border-left:3px solid var(--cy-deep)}
.cv-row{padding:.55em .6em;border-radius:.6em;border:1px solid transparent}
.cv-row+.cv-row{margin-top:.3em}
.cv-row.on{border-color:#d5d8f5;background:#f5f6fd}
.cv-row .row span{display:flex;align-items:center;gap:.5em;font-weight:600}
.radio{width:.95em;height:.95em;border-radius:50%;border:1.5px solid #bdbdb0;flex:none}
.cv-row.on .radio{border:.3em solid var(--cy-deep)}
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
.mini-scr{position:relative;aspect-ratio:9/15;border-radius:1em;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2em;box-shadow:0 .3em 1em rgba(0,0,0,.18)}
.mini-scr.on{outline:2px solid var(--cy-deep);outline-offset:2px}
.mini-scr i{position:absolute;width:120%;aspect-ratio:1;top:-10%;left:-10%;opacity:.5}
.mini-scr b{position:relative;font-size:2em;font-weight:800;letter-spacing:-.03em}
.mini-scr span{position:relative;font-size:.8em;font-weight:600;opacity:.85}
.mini-scr small{position:absolute;top:.8em;left:0;right:0;text-align:center;font-weight:700;font-size:.72em}
.rng{position:relative;height:.45em;border-radius:99em;background:#e6e6dc;margin:.55em 0 1em}
.rng i{position:absolute;top:0;bottom:0;border-radius:99em;background:linear-gradient(90deg,var(--cy-deep),var(--blue))}
.rng b{position:absolute;top:50%;width:1.1em;height:1.1em;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--cy-deep),0 1px 4px rgba(0,0,0,.2);transform:translate(-50%,-50%)}
.fam{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.ft{display:flex;flex-direction:column;gap:.25em;padding:.8em;border-radius:.7em;background:#f4f4ec}
.ft .sc{font-size:1.5em;font-weight:700;color:#1c1c14}
.dot{width:.6em;height:.6em;border-radius:50%;background:#2e9a5c;box-shadow:0 0 0 .2em rgba(46,154,92,.15);flex:none}
.dot.warn{background:#d08a1c;box-shadow:0 0 0 .2em rgba(208,138,28,.15)}
.dot.off{background:#b9b9ad;box-shadow:none}
.clock{font-size:1.9em;font-weight:700;text-align:center;padding:.4em 0;letter-spacing:-.02em}
.clock span{color:var(--cy-deep)}
.notif.urgent{box-shadow:0 0 0 1.5px #e0553a,0 .4em 1.2em rgba(224,85,58,.18)}
.notif.urgent .t i{background:#e0553a}
.chips{display:flex;flex-wrap:wrap;gap:.35em}
.lv{display:flex;gap:.3em}
.lv i{width:1.6em;height:.45em;border-radius:99em;background:#e2e2d8}
.lv i.on{background:var(--blue)}
.zones{display:grid;grid-template-rows:1fr 1.6fr 1fr;gap:.3em;height:13em;padding:.4em;border-radius:1em;background:#ecebe2}
.zones span{display:grid;place-items:center;border-radius:.6em;background:#f8f7f0;color:#8a8a7e;font-weight:600;text-align:center}
.zones .warm{background:radial-gradient(circle at 50% 60%,#ffb36b,#ff7a45 70%);color:#fff;display:flex;flex-direction:column;justify-content:center}
.zones .warm b{font-size:1.2em}
/* capability profile -> rendered controls */
.caps{display:grid;grid-template-columns:1.05fr auto 1.3fr;gap:1.2em;align-items:center}
.code.mini{border-radius:.7em;font-size:inherit;box-shadow:none}
.code.mini pre{padding:1em 1.1em;font-size:.86em;line-height:1.6;overflow:hidden;white-space:pre}
.caps-arrow{font-size:.75em;letter-spacing:.14em;color:var(--cy-deep);font-weight:700;writing-mode:vertical-rl;transform:rotate(180deg)}
.capgrid{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.cap{grid-column:1/-1;padding:.8em .9em;border-radius:.8em;background:#f4f4ec;box-shadow:inset 0 0 0 1px #e6e6dc}
.cap.half{grid-column:span 1}
.vcard .cap{background:none;box-shadow:none;border-radius:0;padding:20px var(--gs)}   /* video captions are not capability cards */
@media (min-width:769px){.vcard .cap{padding-inline:var(--gs-md)}}
.cap .row{margin-bottom:.2em}
.cap .rng{margin:.6em 0 .7em}
.mem{display:flex;gap:.3em}
.mem i{width:1.7em;height:1.7em;border-radius:.4em;display:grid;place-items:center;font-style:normal;font-weight:700;background:#e6e6dc;color:#77776b}
.mem i.on{background:#292919;color:var(--cy)}
@media (max-width:768px){.caps{grid-template-columns:1fr}.caps-arrow{writing-mode:horizontal-tb;transform:none;text-align:center}.code.mini{display:none}}
/* onboarding */
.obs{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em}
.ob{display:flex;flex-direction:column;gap:.6em;align-items:flex-start;padding:.8em;border-radius:.8em;background:#f4f4ec;min-width:0}
.ob-n{font-size:.72em;letter-spacing:.12em;color:var(--cy-deep);font-weight:700}
.ob-list{align-self:stretch}
.ob-list .li{font-size:.9em}
.scan{position:relative;width:100%;aspect-ratio:1;border-radius:.6em;background:#fffffb;padding:12%;overflow:hidden;box-shadow:inset 0 0 0 1px #e2e2d8}
.scan::before{content:"";position:absolute;inset:6%;background:linear-gradient(var(--cy-deep),var(--cy-deep)) 0 0/18% 2px,linear-gradient(var(--cy-deep),var(--cy-deep)) 0 0/2px 18%,linear-gradient(var(--cy-deep),var(--cy-deep)) 100% 0/18% 2px,linear-gradient(var(--cy-deep),var(--cy-deep)) 100% 0/2px 18%,linear-gradient(var(--cy-deep),var(--cy-deep)) 0 100%/18% 2px,linear-gradient(var(--cy-deep),var(--cy-deep)) 0 100%/2px 18%,linear-gradient(var(--cy-deep),var(--cy-deep)) 100% 100%/18% 2px,linear-gradient(var(--cy-deep),var(--cy-deep)) 100% 100%/2px 18%;background-repeat:no-repeat}
.qr{width:100%;height:auto}
.scanline{position:absolute;left:8%;right:8%;top:10%;height:2px;background:var(--cy);box-shadow:0 0 10px 2px rgba(188,203,255,.7);animation:scanY 2.4s var(--ease-io) infinite alternate}
@keyframes scanY{to{top:88%}}
.prog{height:.35em;border-radius:99em;background:#e6e6dc;margin-top:1em;overflow:hidden}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--cy-deep),var(--blue))}
@media (max-width:768px){.obs{grid-template-columns:1fr 1fr}.obs .ob:first-child{grid-column:1/-1;flex-direction:row;align-items:center}.obs .scan{width:40%}}
.sig{display:inline-flex;align-items:flex-end;gap:2px;height:1em}
.sig i{width:.25em;background:var(--cy-deep);border-radius:1px}
.sig i:nth-child(1){height:30%}.sig i:nth-child(2){height:55%}.sig i:nth-child(3){height:78%}.sig i:nth-child(4){height:100%}
.sig i.off{background:#d6d6cb}
.prompt{margin-top:.8em;padding:.9em;border-radius:.8em;background:#fffffb;box-shadow:0 .6em 1.6em rgba(0,0,0,.14),0 0 0 1px #ececE2}
.prompt p{margin:.3em 0 .7em}
.field{padding:.7em .9em;border-radius:.6em;background:#fff;box-shadow:inset 0 0 0 1px #dcdcd0;letter-spacing:.2em}
/* dark HUD windows */
.win.hud{background:linear-gradient(180deg,#0f1226,#0a0c1c);color:#dde3f7;box-shadow:0 2.4cqi 6cqi rgba(0,0,0,.45),0 0 0 1px rgba(188,203,255,.22)}
.win.hud .bar{border-color:rgba(188,203,255,.15);color:#8f9bc0}
.win.hud .bar i{background:rgba(188,203,255,.25)}
.win.hud .bar b{color:#eef1ff;font-family:var(--f-mono);font-weight:500;font-size:.92em}
.win.hud .k,.win.hud .muted{color:#8f9bc0}
.win.hud .foot{margin-top:.8em;padding-top:.7em;border-top:1px dashed rgba(188,203,255,.25);font-size:.78em;letter-spacing:.1em;color:var(--cy)}
.pipe{font-size:.9em}
.pipe .raw{padding:.6em .8em;border-radius:.5em;background:rgba(188,203,255,.08);color:#eef1ff;letter-spacing:.06em;overflow:hidden;white-space:nowrap}
.pipe .raw span{color:#ff8a6b}
.pipe .step{margin:.6em 0;color:var(--cy);font-size:.82em;letter-spacing:.08em}
.pf{display:grid;grid-template-columns:5em 1fr 3em 1em;gap:.5em;padding:.38em 0;border-bottom:1px solid rgba(188,203,255,.08)}
.pf span{color:#8f9bc0}.pf b{color:#fff}.pf em{font-style:normal;color:#8f9bc0}.pf i{font-style:normal;color:var(--cy)}
.cfg{margin:0;font-size:.95em;line-height:1.65;color:#dde3f7;white-space:pre}
.cfg .c{color:#6a7396}.cfg .kw{color:var(--cy)}
/* live vitals (dark glass on the painting) */
.glass.hud{background:rgba(6,12,18,.62);border-color:rgba(188,203,255,.28);box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 40px rgba(188,203,255,.08) inset}
.glass.hud .bar b{font-family:var(--f-mono);font-weight:500;letter-spacing:.02em}
.glass .live{color:#ff8a6b;letter-spacing:.14em;font-size:.8em;display:inline-flex;align-items:center;gap:.4em}
.glass .live::before{content:"";width:.5em;height:.5em;border-radius:50%;background:#ff6a4a;box-shadow:0 0 8px #ff6a4a;animation:hudBlink 1.2s steps(2,end) infinite}
.vit{padding:1.1em 1.3em .6em;display:flex;flex-direction:column;gap:.9em}
.vrow{display:grid;grid-template-columns:7.5em 1fr;gap:1em;align-items:center;padding-bottom:.9em;border-bottom:1px solid rgba(188,203,255,.1)}
.vn .k{color:#a9b3d6}
.vn .big{font-size:2.3em;font-weight:700;color:#fff;line-height:1;letter-spacing:-.02em}
.vn .big small{font-size:.38em;color:var(--cy);margin-left:.3em;letter-spacing:.04em}
.wave{min-width:0;overflow:hidden}
.wave .ecg{stroke-dasharray:1400;animation:ecgRun 3.2s linear infinite}
@keyframes ecgRun{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}
.tline{font-size:.82em;display:flex;flex-direction:column;gap:.45em;color:#c3cae4}
.tline span{display:inline-block;width:6.2em;color:#7c86ab}
.tline .hot{color:#fff}
.tline .hot span{color:var(--cy)}
.hud-foot{display:flex;justify-content:space-between;padding:.7em 1.3em;border-top:1px solid rgba(188,203,255,.12);font-size:.74em;letter-spacing:.12em;color:var(--cy);background:rgba(188,203,255,.04)}
@media (prefers-reduced-motion:reduce){.wave .ecg,.scanline{animation:none}}
/* full-chain diagram */
.chain-w{width:100%;font-size:clamp(8px,1.5cqi,14px)}
.chain{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:.6em;padding:1.4em .4em .4em}
.chain-line{position:absolute;left:8%;right:8%;top:3.55em;height:1px;background:repeating-linear-gradient(90deg,rgba(188,203,255,.8) 0 6px,transparent 6px 12px);background-size:24px 1px;animation:chainFlow 1.2s linear infinite}
@keyframes chainFlow{to{background-position:24px 0}}
.cn{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35em}
.cn-i{font-size:.72em;letter-spacing:.14em;color:#7c86ab}
.cn-dot{width:1.3em;height:1.3em;border-radius:50%;background:#0a0c1c;border:2px solid var(--cy);box-shadow:0 0 0 .35em rgba(188,203,255,.12),0 0 18px rgba(188,203,255,.5);animation:cnPulse 3s ease-in-out infinite;animation-delay:calc(var(--i) * .5s)}
@keyframes cnPulse{50%{background:var(--cy);box-shadow:0 0 0 .6em rgba(188,203,255,.06),0 0 26px rgba(188,203,255,.9)}}
.cn b{margin-top:.4em;color:#fff;font-size:1.1em}
.cn-k{color:#8f9bc0;font-size:.86em}
.cn-v{color:var(--cy);font-weight:700;font-size:1.05em}
.chain-loop{display:block;width:100%;height:2.6em;margin-top:.4em}
.chain-cap{text-align:center;font-size:.74em;letter-spacing:.12em;color:#7c86ab;text-transform:uppercase}
@media (max-width:768px){.chain{grid-template-columns:repeat(3,1fr);row-gap:1.4em}.chain-line,.chain-loop{display:none}}
@media (prefers-reduced-motion:reduce){.chain-line,.cn-dot{animation:none}}
.cmp{display:grid;grid-template-columns:3em 1fr 3em;gap:.6em;align-items:center;margin:.35em 0}
.cmp div{height:.6em;border-radius:99em;background:#e6e6dc;overflow:hidden}
.cmp i{display:block;height:100%;background:#b9b9ad}
.cmp.hi i{background:linear-gradient(90deg,var(--cy-deep),var(--blue))}
.cts{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;margin-top:.7em}
.ct{position:relative;aspect-ratio:4/5;border-radius:.6em;overflow:hidden}
.ct i{position:absolute;left:12%;right:12%;bottom:22%;height:16%;border-radius:.3em;background:rgba(255,255,255,.85);transform:skewY(-8deg)}
/* storefront */
.sync{flex-wrap:wrap;margin-bottom:1em;padding-bottom:.9em;border-bottom:1px solid #efefe6}
.store{display:grid;grid-template-columns:1.15fr 1fr;gap:1.6em;align-items:center}
.st-pic{border-radius:.8em;overflow:hidden}
.st-info{display:flex;flex-direction:column;gap:.5em;align-items:flex-start}
.st-name{font-size:2em;font-weight:800;letter-spacing:-.03em;line-height:1}
.st-price{display:flex;align-items:baseline;gap:.6em}
.st-price b{font-size:1.4em}
.caps-b{display:flex;flex-wrap:wrap;gap:.35em}
.capb{padding:.35em .65em;border-radius:.4em;background:#eef0fd;color:var(--cy-deep);font-weight:700;font-size:.85em;box-shadow:inset 0 0 0 1px #d5d8f5}
@media (max-width:768px){.store{grid-template-columns:1fr}.sync .chips{display:none}}
.fn{display:grid;grid-template-columns:6.5em 1fr 7em;gap:.7em;align-items:center;margin:.45em 0}
.fn div{height:1.2em;border-radius:.3em;background:#f1f1e8;overflow:hidden}
.fn i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cy-deep));border-radius:.3em}
.fn b{text-align:right;font-size:.9em}
.bar-t{height:.5em;border-radius:99em;background:#ececE2;margin-top:.3em;overflow:hidden}
.bar-t i{display:block;height:100%;background:linear-gradient(90deg,var(--cy-deep),var(--blue))}
/* live selling phone */
.phone.dark-scr .scr{background:linear-gradient(180deg,#1b2152,#0d1026);padding:0;color:#fff}
.live-v{position:relative;height:100%;background:radial-gradient(circle at 50% 42%,#3a4a8a,#10142c 70%)}
.live-v::before{content:"";position:absolute;left:14%;right:14%;top:40%;height:12%;border-radius:.6em;background:linear-gradient(180deg,#f4ecd8,#cfc3a8);transform:skewY(-6deg);box-shadow:0 1em 2em rgba(0,0,0,.4)}
.live-b{position:absolute;top:2.6em;left:.9em;padding:.3em .6em;border-radius:.3em;background:#ff4d4d;font-size:.75em;font-weight:700}
.live-s{position:absolute;top:2.6em;right:.9em;padding:.3em .6em;border-radius:.3em;background:rgba(188,203,255,.18);color:var(--cy);font-size:.75em;box-shadow:inset 0 0 0 1px rgba(188,203,255,.5)}
.live-c{position:absolute;left:.9em;right:.9em;bottom:4.2em;display:flex;flex-direction:column;gap:.3em;font-size:.85em}
.live-c p{background:rgba(0,0,0,.35);padding:.3em .6em;border-radius:.6em;align-self:flex-start}
.live-buy{position:absolute;left:.9em;right:.9em;bottom:1em;background:#fff;color:#1c1c14}
/* go-global board */
.mk{display:grid;grid-template-columns:1.3fr .9fr 1.6fr .8fr .5fr 1.3fr;gap:.8em;align-items:center;padding:.62em 0;border-bottom:1px solid #f1f1ea}
.mk-h{border-color:#ecece4;padding:.4em 0}
.rd{position:relative;height:1.5em;border-radius:.3em;background:#f1f1e8;overflow:hidden}
.rd i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(79,85,200,.35),rgba(61,90,254,.35))}
.rd em{position:relative;display:block;padding:0 .6em;line-height:1.5em;font-style:normal;font-size:.82em;font-weight:700}
@media (max-width:768px){.mk{grid-template-columns:1.4fr 1fr 1.2fr}.mk>span:nth-child(3),.mk>span:nth-child(4),.mk>span:nth-child(5){display:none}}
/* charts and accents inside light windows */
.win .v{font-variant-numeric:tabular-nums}
.pill.ok::before{background:var(--cy-deep)}
.chk.now i{border-color:var(--cy-deep);box-shadow:0 0 0 .25em rgba(79,85,200,.18)}
.chat .av{background:radial-gradient(circle at 35% 30%,#eef1ff,#bccbff 45%,#0f5f5a);box-shadow:0 0 1.2em rgba(188,203,255,.55)}
.chat .hl{color:var(--cy)}
.code .kw{color:#bccbff}.code .f{color:#9fb0ff}
.metric{box-shadow:0 2.4cqi 6cqi rgba(28,20,8,.3),inset 0 3px 0 var(--cy-deep)}
.metric .sub{font-family:var(--f-mono);font-size:.72em;letter-spacing:.12em;text-transform:uppercase}
/* mockups sit centred in their painted frame; phones in quarter cards size from the card height.
   On phones the frame keeps growing with its content instead (nothing gets clipped). */
@media (min-width:769px){
  .frame-bg>.ui.ui-center{height:100%;grid-template:100% / 100%}
  .frame-bg .phone{align-self:start}
  .cc.q .phone.big{justify-self:center}
}
@media (max-width:768px){.cc.q .phone.big.dark-scr{width:64%;height:auto}}
/* small square cards: bigger type so the mockups stay legible */
.cc.t4 .win{font-size:clamp(9px,2.9cqi,14px)}
.cc.t4 .win.narrow{width:90%}
.cc:not(.q):not(.t4) .win.narrow{font-size:clamp(9px,2.3cqi,14px);width:74%}
.devc .cta{align-self:flex-start}
/* phones (the device): wide desktop mockups set the height of their painted frame */
@media (max-width:768px){
  .feat .frame-bg:not(:has(.phone)){aspect-ratio:auto!important}
  .feat .frame-bg:not(:has(.phone))>.ui.ui-center{padding:8cqi 4.5cqi}
}

/* ---------- language switcher ---------- */
.lang{position:relative}
.lang-btn{gap:6px!important}
.lang-btn svg{width:15px;height:15px}
.lang-btn .chev{width:14px;height:14px}
.lang-btn[aria-expanded=true] .chev{transform:rotate(180deg)}
.lang-list{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;padding:6px;background:var(--white);color:var(--ink);border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .3s var(--ease-out-cubic),visibility 0s linear .3s;z-index:3}
.lang.open .lang-list{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .3s var(--ease-out-cubic)}
.lang-list button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 10px;border-radius:4px;font:600 14px/1.2 var(--f-sans);color:var(--ink);text-align:left}
.lang-list button:hover,.lang-list button:focus-visible{background:#f1f1ea}
.lang-list button i{width:8px;height:8px;border-radius:50%}
.lang-list button[aria-selected=true] i{background:var(--cy-deep);box-shadow:0 0 0 3px rgba(79,85,200,.18)}
@media (max-width:939px){.lang-btn .chev{display:none}.lang-btn{padding-inline:6px!important}}
@media (max-width:420px){.lang-btn span{display:none}}

/* ---------- Chinese and Japanese: CJK faces, no drop caps, open line heights ---------- */
html[lang=zh-CN]{--f-sans:"Inter Tight","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;--f-serif:"Fraunces","Noto Serif SC","Songti SC","STSong",serif}
html[lang=ja]{--f-sans:"Inter Tight","Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;--f-serif:"Fraunces","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif}
html[lang=zh-CN] body,html[lang=ja] body{line-break:strict}
html[lang=zh-CN] :is(.headline-1,.headline-3,.headline-4,.headline-5,.headline-6,.narrative-1,.narrative-2,.narrative-3,.bodycopy-1,.bodycopy-2),
html[lang=ja] :is(.headline-1,.headline-3,.headline-4,.headline-5,.headline-6,.narrative-1,.narrative-2,.narrative-3,.bodycopy-1,.bodycopy-2){letter-spacing:0}
html[lang=zh-CN] :is(.narrative-1,.narrative-2,.narrative-3),html[lang=ja] :is(.narrative-1,.narrative-2,.narrative-3){line-height:1.32;font-weight:400}
html[lang=zh-CN] :is(.headline-3,.headline-4,.headline-5,.headline-6),html[lang=ja] :is(.headline-3,.headline-4,.headline-5,.headline-6){line-height:1.18}
html[lang=zh-CN] :is(.bodycopy-1,.bodycopy-2),html[lang=ja] :is(.bodycopy-1,.bodycopy-2){line-height:1.5}
html[lang=zh-CN] .headline-1,html[lang=ja] .headline-1{line-height:1.02;letter-spacing:.02em}
html[lang=zh-CN] :is(.drop-cap,.drop-cap-aligned)::first-letter,html[lang=ja] :is(.drop-cap,.drop-cap-aligned)::first-letter{font:inherit;font-size:1em;line-height:inherit;letter-spacing:inherit}
html[lang=zh-CN] .drop-cap,html[lang=ja] .drop-cap{text-indent:0;transform:none}
html[lang=zh-CN] .flist h3,html[lang=ja] .flist h3{line-height:1.3}
/* Latin languages with long words */
html[lang=de] :is(.bodycopy-1,.narrative-2,.narrative-3,.headline-4,.headline-6),html[lang=fr] :is(.bodycopy-1,.narrative-2,.narrative-3){hyphens:auto;-webkit-hyphens:auto}
html:not([lang=en]) .ch-title .t{overflow-wrap:anywhere}
html:is([lang=de],[lang=es],[lang=fr]) .ch-title.headline-1{font-size:min(13.75rem,12.5cqw)}

/* ---------- part labels in the chapter lists (For sleepers / For business) ---------- */
.clist li.grp{display:block;padding:12px 0 3px;font:500 9.5px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cy);opacity:.85}
.clist li.grp:first-child{padding-top:0}
.clist li.grp.lt{color:var(--cy-deep)}
.mobile-nav-list li.grp{padding:22px 0 8px;border-top:0;font:500 11px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cy)}
.mobile-nav-list li.grp::after{content:none;counter-increment:none}
.dd-list li.dd-grp{padding:10px 10px 4px;border:0;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy-deep)}
.api{display:grid;grid-template-columns:3.4em 1fr;gap:.2em .7em;padding:.5em 0;border-bottom:1px solid rgba(188,203,255,.12)}
.api .m{font-size:.75em;font-weight:700;letter-spacing:.06em;padding:.2em .4em;border-radius:.3em;text-align:center;align-self:start;background:rgba(188,203,255,.14);color:var(--cy)}
.api .m.post{background:rgba(243,213,140,.16);color:var(--moon)}
.api .m.hook{background:rgba(255,138,107,.16);color:#ff9b80}
.api code{color:#eef1ff;font-size:.9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.api .muted{grid-column:2;font-size:.85em}
.chk>div{min-width:0}

/* ---------- UI motion (uimotion.js): entrances, self-drawing charts, chat scenes, tilt ---------- */
.um{opacity:0;transform:translate3d(0,34px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--umd,0ms),transform 1.1s cubic-bezier(.2,.7,.2,1) var(--umd,0ms)}
.um.um-in{opacity:1;transform:none}
.um-svg .um-line{transition:stroke-dashoffset 1.8s cubic-bezier(.45,0,.2,1) .25s}
.um-svg.um-go .um-line{stroke-dashoffset:0!important}
.um-svg .um-area{opacity:0;transition:opacity 1.2s ease 1.1s}
.um-svg.um-go .um-area{opacity:1}
.um-svg .um-dot{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1) 1.7s}
.um-svg.um-go .um-dot{transform:scale(1)}
.um-svg .um-bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) calc(.2s + var(--umd,0ms))}
.um-svg.um-go .um-bar{transform:scaleY(1)}
.um-svg .um-ring{stroke-dashoffset:var(--umr);transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .3s}
.um-svg.um-go .um-ring{stroke-dashoffset:0}
.um-chat .um-msg{opacity:0;transform:translateY(10px) scale(.98);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.um-chat .um-msg.in{opacity:1;transform:none}
.um-typing{display:flex;gap:5px;align-self:flex-start;padding:.7em 1em;margin-left:2.6em;border-radius:1em;background:rgba(247,247,238,.08);opacity:0;transition:opacity .3s}
.um-typing.on{opacity:1}
.um-typing i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;animation:umdot 1s infinite}
.um-typing i:nth-child(2){animation-delay:.15s}.um-typing i:nth-child(3){animation-delay:.3s}
@keyframes umdot{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-4px);opacity:.95}}
.tg::after{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.tg.on::after{left:.15em;right:auto;transform:translateX(.95em)}
.um-tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.um,.um-chat .um-msg{opacity:1!important;transform:none!important}}