/* ==========================================================================
   ZECOA — design system v4 · "Own the room"
   Light, photographic, precise. One accent (the brand orange). Status colours
   are the kitchen's own: mint on-time, amber caution, red late.
   ========================================================================== */
:root{
  --bg:#FFFFFF; --bg2:#F6F7F9; --bg3:#EEF0F3; --panel:#FFFFFF;
  --line:#E6E8EC; --line2:#D3D7DE;
  --fg:#0C0D10; --fg2:#4A5160; --fg3:#737A87; --fg4:#A3A9B5;
  --ink:#0C0D10; --ink2:#15171C; --ink3:#1E2127; --ink-line:rgba(255,255,255,.09); --ink-line2:rgba(255,255,255,.16);
  --ink-fg:#F7F8FA; --ink-fg2:#AEB4BF; --ink-fg3:#7D8492;
  --brand:#F26B1D; --brand-hi:#FF7F35; --brand-ink:#C2410C; --brand-soft:#FFF3EA; --brand-line:#FFD4B8;
  --mint:#12D48E; --mint-ink:#047857; --mint-soft:#E8FAF2; --mint-line:#A8ECCF;
  --teal:#00D1B8; --teal-ink:#0F766E; --teal-soft:#E0F7F4;
  --amber:#F5A524; --red:#EF4444;
  --sh1:0 1px 2px rgba(12,13,16,.04), 0 2px 8px -2px rgba(12,13,16,.06);
  --sh2:0 2px 4px rgba(12,13,16,.04), 0 18px 40px -18px rgba(12,13,16,.2);
  --sh3:0 6px 12px rgba(12,13,16,.05), 0 50px 100px -36px rgba(12,13,16,.35);
  --sans:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --hdr:64px; --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0C0D10; --bg2:#121418; --bg3:#191C21; --panel:#15171C;
    --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
    --fg:#F7F8FA; --fg2:#B4BAC5; --fg3:#7D8492; --fg4:#555B66;
    --brand-ink:#FFA36B; --brand-soft:#2A180C; --brand-line:#5A3115;
    --mint-ink:#4CE7AE; --mint-soft:#0A2A1D; --mint-line:#155C40;
    --teal-ink:#4FE3D2; --teal-soft:#082A27;
    --sh1:0 1px 2px rgba(0,0,0,.4), 0 2px 8px -2px rgba(0,0,0,.5);
    --sh2:0 2px 4px rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.7);
    --sh3:0 6px 12px rgba(0,0,0,.5), 0 50px 100px -36px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --bg:#0C0D10; --bg2:#121418; --bg3:#191C21; --panel:#15171C;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --fg:#F7F8FA; --fg2:#B4BAC5; --fg3:#7D8492; --fg4:#555B66;
  --brand-ink:#FFA36B; --brand-soft:#2A180C; --brand-line:#5A3115;
  --mint-ink:#4CE7AE; --mint-soft:#0A2A1D; --mint-line:#155C40;
  --teal-ink:#4FE3D2; --teal-soft:#082A27;
  --sh1:0 1px 2px rgba(0,0,0,.4), 0 2px 8px -2px rgba(0,0,0,.5);
  --sh2:0 2px 4px rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.7);
  --sh3:0 6px 12px rgba(0,0,0,.5), 0 50px 100px -36px rgba(0,0,0,.85);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4{margin:0; font-weight:700; line-height:1.05; letter-spacing:-.032em; text-wrap:balance}
p{margin:0} ul,ol{margin:0; padding:0; list-style:none} a{color:inherit; text-decoration:none}
figure{margin:0} button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
img{display:block; max-width:100%; height:auto} table{border-collapse:collapse; width:100%}
svg.ic{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-9999px; top:0; z-index:400; background:var(--fg); color:var(--bg); padding:12px 18px}
.skip:focus{left:0}
::selection{background:var(--brand); color:#fff}

/* motion — movement only, nothing hidden */
.js [data-reveal]{transform:translateY(18px); transition:transform .7s var(--ease)}
.js [data-reveal].in{transform:none}
.js .page.pg-in{animation:pgIn .45s var(--ease)}
@keyframes pgIn{from{transform:translateY(10px)} to{transform:none}}
.js .h-line{display:block; transform:translateY(.35em); transition:transform .9s var(--ease)}
.js .h-line.in{transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} .js [data-reveal],.js .h-line{transform:none!important; transition:none!important} *{animation:none!important}}

/* urgency rail motif */
.rail{height:3px; width:100%; background:linear-gradient(90deg,var(--mint) 0 40%,var(--amber) 40% 72%,var(--red) 72% 100%)}
.rail--s{width:56px; height:3px; border-radius:2px}
#progress{position:fixed; top:0; left:0; height:2px; width:0; z-index:400; background:var(--brand); transition:width .12s linear}

/* layout */
.wrap{max-width:1160px; margin:0 auto; padding:0 28px}
.wrap--n{max-width:840px}
@media (max-width:600px){.wrap{padding:0 20px}}
.sec{padding:104px 0; position:relative}
.sec--sm{padding:64px 0}
.sec--bg2{background:var(--bg2)}
.sec--edge{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
@media (max-width:760px){.sec{padding:72px 0}.sec--sm{padding:48px 0}}
.dark{background:var(--ink); color:var(--ink-fg); position:relative; overflow:hidden}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--ink-fg)}
.dark::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(900px 500px at 12% -10%, rgba(242,107,29,.22), transparent 62%), radial-gradient(700px 460px at 90% 110%, rgba(18,212,142,.12), transparent 60%)}
.dark > *{position:relative; z-index:1}

.kicker{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3); margin-bottom:20px}
.kicker::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--brand)}
.kicker--mint::before{background:var(--mint)} .kicker--teal::before{background:var(--teal)}
.dark .kicker{color:var(--ink-fg3)}
.h1{font-size:clamp(2.7rem,6.4vw,4.9rem); font-weight:750; letter-spacing:-.045em; line-height:.98}
.h2{font-size:clamp(1.9rem,3.8vw,3rem); font-weight:720; letter-spacing:-.04em; line-height:1.04; max-width:19ch}
.h3{font-size:clamp(1.2rem,2vw,1.55rem); font-weight:700; letter-spacing:-.028em}
.lede{font-size:clamp(1rem,1.3vw,1.14rem); color:var(--fg2); margin-top:18px; max-width:58ch; line-height:1.6}
.dark .lede{color:var(--ink-fg2)}
.head{max-width:760px}
.head--c{margin:0 auto; text-align:center}
.head--c .kicker{justify-content:center}
.head--c .h2,.head--c .lede{margin-left:auto; margin-right:auto}
.row-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; height:44px; padding:0 20px; border-radius:10px; font-family:var(--sans); font-weight:600; font-size:.93rem; border:1px solid transparent; cursor:pointer; transition:transform .18s var(--ease), background .18s, border-color .18s, box-shadow .18s; white-space:nowrap}
.btn:active{transform:scale(.985)}
.btn--pri{background:var(--brand); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 18px -8px rgba(242,107,29,.6)}
.btn--pri:hover{background:var(--brand-hi); transform:translateY(-1px)}
.btn--sec{border-color:var(--line2); color:var(--fg); background:var(--panel)}
.btn--sec:hover{border-color:var(--fg3); transform:translateY(-1px)}
.dark .btn--sec{background:rgba(255,255,255,.06); border-color:var(--ink-line2); color:var(--ink-fg)}
.dark .btn--sec:hover{background:rgba(255,255,255,.1)}
.btn--lg{height:52px; padding:0 26px; font-size:1rem; border-radius:12px}
.btn--block{width:100%}
.arw{display:inline-block; transition:transform .2s var(--ease)}
.btn:hover .arw, a:hover .arw{transform:translateX(3px)}
.tlink{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem; color:var(--brand-ink)}
.dark .tlink{color:var(--brand)}

/* devices */
.dev{position:relative; flex:none; border-radius:42px; padding:9px; background:linear-gradient(160deg,#4E545B 0%,#26292E 40%,#101215 100%); box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 34px 70px -30px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.25)}
.dev__s{position:relative; border-radius:34px; overflow:hidden; background:#000; display:block}
.dev__s img{width:100%; display:block}
.dev::after{content:""; position:absolute; top:17px; left:50%; transform:translateX(-50%); width:30%; height:21px; background:#0B0D10; border-radius:100px; z-index:2}
.dev--tab{border-radius:20px; padding:11px}
.dev--tab .dev__s{border-radius:10px}
.dev--tab::after{display:none}
.dev--sm{border-radius:30px; padding:6px}
.dev--sm .dev__s{border-radius:25px}
.dev--sm::after{top:12px; height:15px}
.dev--sm.dev--tab{border-radius:14px; padding:7px}
.dev--sm.dev--tab .dev__s{border-radius:7px}
.tilt{transition:transform .5s var(--ease)}
.tilt.is-tilting{transition:transform .08s linear}
.photo{position:relative; border-radius:24px; overflow:hidden; background:var(--bg3)}
.photo img{width:100%; height:100%; object-fit:cover; display:block}
.pin{position:absolute; z-index:8; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:100px; font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.05em; white-space:nowrap; background:rgba(12,13,16,.78); color:#fff; backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14); box-shadow:var(--sh2)}
.pin b{color:var(--mint); font-weight:600}
.pin__d{width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 3px rgba(18,212,142,.22)}
.pin__d--o{background:var(--brand); box-shadow:0 0 0 3px rgba(242,107,29,.22)}
.pin--live .pin__d{animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}
.pin--light{background:var(--panel); color:var(--fg); border-color:var(--line2)}
.pin--light b{color:var(--brand-ink)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{position:sticky; top:0; z-index:120; height:var(--hdr); background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(20px) saturate(160%); border-bottom:1px solid var(--line)}
.hdr__in{max-width:1160px; margin:0 auto; padding:0 28px; height:100%; display:flex; align-items:center; gap:8px}
@media (max-width:600px){.hdr__in{padding:0 20px}}
.brand{display:flex; align-items:center; gap:10px; font-weight:750; font-size:1.15rem; letter-spacing:-.04em; margin-right:18px}
.brand svg{width:28px; height:28px; display:block}
.mainnav{display:flex; align-items:center; gap:2px}
.mainnav > li{position:relative}
.navlink{position:relative; display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:9px; font-size:.9rem; font-weight:500; color:var(--fg2); cursor:pointer; transition:background .15s, color .15s}
.navlink:hover{color:var(--fg); background:var(--bg2)}
.navlink[aria-current="page"],.navlink.is-on{color:var(--fg)}
.navlink[aria-current="page"]::after,.navlink.is-on::after{content:""; position:absolute; left:12px; right:12px; bottom:-13px; height:2px; background:var(--brand); border-radius:2px}
.chev{width:14px; height:14px; opacity:.5; transition:transform .18s}
.has-menu[aria-expanded="true"] .chev{transform:rotate(180deg)}
.hdr__r{margin-left:auto; display:flex; align-items:center; gap:8px}
@media (max-width:1060px){.mainnav,.hdr__r .btn--sec{display:none}}
.dd{position:absolute; top:calc(100% + 14px); left:-12px; background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh3); padding:10px; display:grid; gap:2px; opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98); transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; transform-origin:top left}
.dd--2{width:700px; grid-template-columns:1fr 1fr}
.dd--1{width:380px}
.has-menu[aria-expanded="true"] + .dd{opacity:1; visibility:visible; transform:none}
.dd__i{display:flex; gap:13px; padding:12px; border-radius:12px; align-items:flex-start; transition:background .15s}
.dd__i:hover{background:var(--bg2)}
.dd__ic{width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; background:var(--bg2); color:var(--fg2)}
.dd__ic--o{background:var(--brand-soft); color:var(--brand-ink)} .dd__ic--m{background:var(--mint-soft); color:var(--mint-ink)} .dd__ic--t{background:var(--teal-soft); color:var(--teal-ink)}
.dd__n{font-weight:650; font-size:.94rem; letter-spacing:-.02em; display:block}
.dd__s{font-size:.82rem; color:var(--fg3); line-height:1.45; margin-top:2px; display:block}
.dd__all{grid-column:1/-1; margin-top:4px; padding:12px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-size:.88rem; font-weight:600; color:var(--brand-ink)}
.burger{display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line2); align-items:center; justify-content:center; flex-direction:column; gap:4px}
.burger span{display:block; width:16px; height:1.6px; background:var(--fg); border-radius:2px; transition:transform .2s, opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
@media (max-width:1060px){.burger{display:flex}}
.mnav{position:fixed; inset:var(--hdr) 0 0; background:var(--bg); z-index:110; overflow-y:auto; padding:20px 24px 48px; display:none}
.mnav.is-open{display:block}
.mnav h4{font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--fg3); margin:24px 0 4px}
.mnav a{display:block; padding:14px 0; border-bottom:1px solid var(--line); font-weight:650; font-size:1.15rem; letter-spacing:-.03em}
.mnav a small{display:block; font-weight:400; font-size:.83rem; color:var(--fg3); letter-spacing:0; margin-top:2px}
.mnav .btn{margin-top:26px}
.page[hidden]{display:none}

/* ==========================================================================
   HOME HERO — owner + product
   ========================================================================== */
.hero{padding:72px 0 0; overflow:hidden}
.hero__g{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center}
@media (max-width:940px){.hero__g{grid-template-columns:1fr; gap:36px}}
.hero h1{font-size:clamp(2.8rem,6vw,4.75rem); font-weight:760; letter-spacing:-.05em; line-height:.96; max-width:14ch}
.hero h1 em{font-style:normal; color:var(--brand)}
.hero__sub{font-size:clamp(1.02rem,1.35vw,1.16rem); color:var(--fg2); max-width:48ch; margin-top:24px; line-height:1.6}
.hero__acts{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap}
.hero__proof{display:flex; gap:22px; flex-wrap:wrap; margin-top:28px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg3)}
.hero__proof b{color:var(--fg); font-weight:600}
.hero__vis{position:relative}
.hero__photo{aspect-ratio:4/5; border-radius:28px; box-shadow:var(--sh3)}
.hero__photo img{transform:scale(1.04); transition:transform .1s linear; will-change:transform}
.hero__card{position:absolute; left:-34px; bottom:46px; width:min(300px,78%); z-index:6; box-shadow:var(--sh3); border-radius:14px; overflow:hidden}
@media (max-width:940px){.hero__card{left:12px; bottom:20px}}
.hero__pin{top:22px; right:22px}
.hero__pin2{left:-10px; top:26%}
@media (max-width:940px){.hero__pin2{left:12px}}

/* ticket (shared with live board) */
.tk{background:#fff; color:#111318; border-radius:12px; box-shadow:0 1px 2px rgba(17,19,24,.06), 0 6px 16px -8px rgba(17,19,24,.12); overflow:hidden; transition:transform .25s var(--ease), opacity .25s var(--ease), box-shadow .3s; font-family:var(--sans)}
.tk__h{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:8px 12px; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.tk--ok .tk__h{background:var(--mint); color:#04261A} .tk--warn .tk__h{background:var(--amber); color:#2A1B02} .tk--late .tk__h{background:var(--red); color:#fff}
.tk__ref{text-align:right; opacity:.85} .tk__t{font-size:13px; letter-spacing:0; font-variant-numeric:tabular-nums}
.tk__meta{padding:8px 12px 0; font-size:11px; color:#5B6470; display:flex; gap:6px; align-items:center}
.tk__meta b{color:#111318; font-weight:600}
.tk__lines{padding:6px 12px 4px; display:flex; flex-direction:column; gap:6px}
.tk__lines li{display:grid; grid-template-columns:20px 1fr auto; gap:8px; align-items:start; font-size:12.5px; line-height:1.3}
.tk__lines li b{font-family:var(--mono); font-weight:600; color:#111318}
.tk__lines li i{display:block; font-style:normal; font-size:10.5px; color:#8A93A0; margin-top:1px}
.tk__lines li s{color:#A1A1AA}
.tk__q{font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#8A93A0; border:1px solid #E6E9EE; border-radius:5px; padding:2px 6px; align-self:center}
.tk__al{margin:6px 12px 0; padding:6px 9px; border-radius:7px; background:#FFF0EE; color:#C8362B; font-size:11px; font-weight:500; display:flex; gap:7px; align-items:center}
.tk__al::before{content:"!"; width:14px; height:14px; border-radius:50%; background:#C8362B; color:#fff; font-size:9px; font-weight:700; display:grid; place-items:center}
.tk__f{display:flex; gap:8px; padding:10px 12px 12px; align-items:center}
.tk__btn{flex:1; background:var(--teal); color:#03302A; font-size:12px; font-weight:700; border-radius:8px; padding:9px 12px; text-align:center; display:flex; justify-content:space-between; align-items:center}
.tk__btn i{font-style:normal; opacity:.6; font-size:10px}
.tk__ico{width:34px; height:34px; border-radius:8px; border:1px solid #E6E9EE; display:grid; place-items:center; color:#5B6470; font-size:13px}
.tk--new{box-shadow:0 0 0 2px var(--mint), 0 0 28px -4px rgba(18,212,142,.6); animation:ring 1.8s ease-in-out infinite}
@keyframes ring{0%,100%{box-shadow:0 0 0 2px var(--mint), 0 0 28px -4px rgba(18,212,142,.6)}50%{box-shadow:0 0 0 2px var(--mint), 0 0 10px -4px rgba(18,212,142,.1)}}
.tk--new .tk__btn{background:var(--mint); color:#04261A}
.tk--out{transform:scale(.96) translateY(6px); opacity:0}
.tk--in{animation:tkIn .35s var(--ease)}
@keyframes tkIn{from{transform:translateY(-8px) scale(.98); opacity:.4} to{transform:none; opacity:1}}

/* marquee */
.marq{overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marq__t{display:flex; gap:10px; width:max-content; animation:marq 48s linear infinite}
.marq:hover .marq__t{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq__t{animation:none; flex-wrap:wrap; width:auto; justify-content:center}}
.chip{display:inline-flex; align-items:center; gap:9px; height:40px; padding:0 16px; border-radius:100px; border:1px solid var(--line); background:var(--panel); font-size:.86rem; font-weight:600; color:var(--fg2); white-space:nowrap}
.chip .ic{width:16px; height:16px; color:var(--fg3)}

/* ==========================================================================
   FAMILY — the four devices
   ========================================================================== */
.family{position:relative; padding:56px 0 0; display:flex; align-items:flex-end; justify-content:center; gap:0}
.family .dev{box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 40px 80px -30px rgba(0,0,0,.45)}
.family__tab{width:min(640px,58%); z-index:1}
.family__ph{width:min(180px,17%); z-index:2; margin-bottom:-6px}
.family__ph--l{margin-right:-44px} .family__ph--r{margin-left:-44px}
.family__ph--l2{width:min(150px,14%); margin-right:-30px; margin-bottom:-28px; z-index:0; opacity:.95}
@media (max-width:820px){.family{flex-wrap:wrap; gap:16px}.family__tab{width:100%}.family__ph,.family__ph--l2{width:min(170px,40%); margin:0}}
.family__labels{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:44px}
@media (max-width:820px){.family__labels{grid-template-columns:repeat(2,1fr)}}
.fl{display:flex; gap:12px; padding:16px 18px; border-radius:14px; border:1px solid var(--line); background:var(--panel); transition:border-color .2s, transform .2s}
.fl:hover{border-color:var(--line2); transform:translateY(-2px)}
.fl__ic{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:none}
.fl__ic--o{background:var(--brand-soft); color:var(--brand-ink)} .fl__ic--m{background:var(--mint-soft); color:var(--mint-ink)} .fl__ic--t{background:var(--teal-soft); color:var(--teal-ink)}
.fl b{display:block; font-weight:650; font-size:.95rem; letter-spacing:-.02em}
.fl span{display:block; font-size:.8rem; color:var(--fg3); margin-top:2px}

/* ==========================================================================
   SCROLL STORY
   ========================================================================== */
.story{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:start}
@media (max-width:900px){.story{grid-template-columns:1fr; gap:32px}}
.story__stick{position:sticky; top:calc(var(--hdr) + 36px); display:flex; justify-content:center; align-items:center; min-height:calc(100vh - var(--hdr) - 72px)}
@media (max-width:900px){.story__stick{position:relative; top:0; min-height:0}}
.story__phone{width:min(310px,80%); position:relative}
.story__phone .dev__s{aspect-ratio:660/1428; background:#0B0D10}
.story__phone img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.02); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.story__phone img.on{opacity:1; transform:none}
.story__badge{position:absolute; top:-14px; left:50%; transform:translateX(-50%); z-index:9}
.story__steps{display:flex; flex-direction:column}
.step{padding:20vh 0; border-top:1px solid var(--line); transition:opacity .4s}
@media (max-width:900px){.step{padding:32px 0}}
.step:first-child{border-top:0; padding-top:2vh}
.js .step{opacity:.36} .js .step.on{opacity:1}
.step__k{display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3)}
.step__n{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-weight:600; font-size:12px; background:var(--brand-soft); color:var(--brand-ink)}
.step--k .step__n{background:var(--mint-soft); color:var(--mint-ink)} .step--d .step__n{background:var(--teal-soft); color:var(--teal-ink)}
.step__t{margin-left:auto; padding:4px 9px; border-radius:6px; background:var(--bg2); font-variant-numeric:tabular-nums}
.step h3{font-size:clamp(1.4rem,2.4vw,2rem); margin-top:14px; letter-spacing:-.035em}
.step p{font-size:1rem; color:var(--fg2); margin-top:12px; line-height:1.62; max-width:46ch}

/* ==========================================================================
   LIVE BOARD (dark showpiece)
   ========================================================================== */
.kds{background:#F4F6F8; color:#111318; border-radius:14px; overflow:hidden; font-family:var(--sans)}
.kds__bar{display:flex; align-items:center; gap:12px; padding:12px 16px; background:#fff; border-bottom:1px solid #E6E9EE}
.kds__logo{display:flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem; letter-spacing:-.02em}
.kds__logo i{width:22px; height:22px; border-radius:7px; background:var(--mint); display:grid; place-items:center; font-style:normal; font-size:10px; font-weight:800; color:#04261A}
.kds__tabs{display:flex; gap:4px; margin-left:10px}
.kds__tab{font-size:.78rem; font-weight:600; padding:6px 11px; border-radius:100px; color:#5B6470}
.kds__tab.on{background:#111318; color:#fff}
.kds__tab i{font-style:normal; font-family:var(--mono); font-size:10px; margin-left:5px; opacity:.7}
.kds__bar .sp{margin-left:auto}
.kds__pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:6px 10px; border-radius:100px; background:#E8FAF2; color:#0B8A5E}
.kds__pill::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--mint); animation:blip 2s infinite}
.kds__clock{font-family:var(--mono); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums}
.kds__pulse{display:grid; grid-template-columns:repeat(5,1fr); background:#fff; border-bottom:1px solid #E6E9EE}
.kp{padding:10px 16px; border-right:1px solid #EEF1F4; display:flex; flex-direction:column; gap:3px}
.kp:last-child{border-right:0}
.kp b{font-family:var(--mono); font-size:1.15rem; font-weight:600; line-height:1; font-variant-numeric:tabular-nums}
.kp span{font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#8A93A0}
.kp--ok b{color:#0B8A5E}.kp--warn b{color:#B8760E}.kp--late b{color:#C8362B}
@media (max-width:700px){.kds__pulse{grid-template-columns:repeat(3,1fr)} .kp:nth-child(n+4){display:none}}
.kds__cols{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:14px; min-height:430px; align-items:start}
@media (max-width:700px){.kds__cols{grid-template-columns:1fr; min-height:0} .kcol:nth-child(n+2){display:none}}
.kcol{display:flex; flex-direction:column; gap:10px; min-width:0}
.kcol__h{display:flex; align-items:center; justify-content:space-between; padding:2px 4px 6px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#5B6470; font-weight:600}
.kcol__h b{background:#111318; color:#fff; border-radius:100px; padding:2px 8px; font-size:10px}
.kds__body{position:relative}
.kds__undo{position:absolute; left:50%; bottom:18px; transform:translateX(-50%) translateY(10px); opacity:0; background:#111318; color:#fff; padding:9px 14px; border-radius:100px; font-size:12px; font-weight:600; display:flex; gap:12px; align-items:center; transition:transform .3s var(--ease), opacity .3s; z-index:5; pointer-events:none; box-shadow:var(--sh2)}
.kds__undo.on{transform:translateX(-50%); opacity:1}
.kds__undo i{font-style:normal; color:var(--mint); font-family:var(--mono); font-size:11px}
.live__frame{position:relative}
.live__frame .pin{z-index:9}
.live__pin1{top:-14px; left:24px} .live__pin2{bottom:20%; right:-8px}
@media (max-width:900px){.live__frame .pin{display:none}}

/* ==========================================================================
   FEATURE GRID (icons)
   ========================================================================== */
.fgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:960px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.fgrid{grid-template-columns:1fr}}
.fc{padding:26px 26px 28px; border-radius:18px; border:1px solid var(--line); background:var(--panel); transition:transform .25s var(--ease), box-shadow .25s, border-color .25s}
.fc:hover{transform:translateY(-3px); box-shadow:var(--sh2); border-color:var(--line2)}
.fc__ic{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--bg2); color:var(--fg); margin-bottom:18px}
.fc__ic--o{background:var(--brand-soft); color:var(--brand-ink)} .fc__ic--m{background:var(--mint-soft); color:var(--mint-ink)} .fc__ic--t{background:var(--teal-soft); color:var(--teal-ink)}
.fc h3{font-size:1.08rem; letter-spacing:-.025em}
.fc p{font-size:.9rem; color:var(--fg2); margin-top:8px; line-height:1.58}
.dark .fc{background:rgba(255,255,255,.04); border-color:var(--ink-line)}
.dark .fc p{color:var(--ink-fg2)} .dark .fc__ic{background:rgba(255,255,255,.08); color:var(--ink-fg)}

/* showcase: big screenshot + numbered callouts */
.show{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:56px; align-items:center}
@media (max-width:940px){.show{grid-template-columns:1fr; gap:32px}}
.show__vis{position:relative; border-radius:24px; padding:44px 40px 0; background:radial-gradient(120% 90% at 50% 0%, var(--brand-soft), var(--bg2)); overflow:hidden; display:flex; justify-content:center; align-items:flex-end; min-height:440px}
.pg--k .show__vis{background:radial-gradient(120% 90% at 50% 0%, var(--mint-soft), var(--bg2))}
.pg--d .show__vis{background:radial-gradient(120% 90% at 50% 0%, var(--teal-soft), var(--bg2))}
.show__vis .dev{width:min(300px,64%); margin-bottom:-70px}
.show__vis .dev--tab{width:100%; margin-bottom:-36px}
.callout{position:absolute; z-index:6; display:flex; align-items:center; gap:8px; padding:6px 10px 6px 6px; border-radius:100px; background:var(--panel); border:1px solid var(--line2); box-shadow:var(--sh2); font-size:.78rem; font-weight:600; white-space:nowrap}
.callout i{width:20px; height:20px; border-radius:50%; background:var(--fg); color:var(--bg); font-style:normal; font-family:var(--mono); font-size:10px; display:grid; place-items:center}
.show__list{display:flex; flex-direction:column}
.show__list li{display:grid; grid-template-columns:30px 1fr; gap:14px; padding:18px 0; border-top:1px solid var(--line)}
.show__list li:first-child{border-top:0; padding-top:0}
.show__list i{width:26px; height:26px; border-radius:50%; background:var(--fg); color:var(--bg); font-style:normal; font-family:var(--mono); font-size:11px; display:grid; place-items:center; margin-top:2px}
.show__list b{display:block; font-weight:650; letter-spacing:-.02em}
.show__list p{font-size:.9rem; color:var(--fg2); margin-top:4px; line-height:1.55}

/* feature cards with image crops */
.fgrid2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
@media (max-width:820px){.fgrid2{grid-template-columns:1fr}}
.fimg{border-radius:20px; border:1px solid var(--line); background:var(--panel); overflow:hidden; display:flex; flex-direction:column; transition:transform .25s var(--ease), box-shadow .25s}
.fimg:hover{transform:translateY(-3px); box-shadow:var(--sh2)}
.fimg__vis{height:250px; position:relative; overflow:hidden; background:var(--bg2); border-bottom:1px solid var(--line)}
.fimg__vis img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 0)}
.fimg__vis--frame{padding:26px 26px 0; display:flex; justify-content:center; align-items:flex-start}
.fimg__vis--frame img{position:static; width:min(210px,58%); height:auto; border-radius:18px 18px 0 0; box-shadow:0 0 0 1px var(--line2), var(--sh2)}
.fimg__vis--frame.is-tab img{width:94%; border-radius:10px 10px 0 0; margin-top:10px}
.fimg__b{padding:22px 26px 26px}
.fimg h3{font-size:1.12rem; letter-spacing:-.025em}
.fimg p{font-size:.9rem; color:var(--fg2); margin-top:8px; line-height:1.58}
.fimg ul{margin-top:12px; display:flex; flex-direction:column; gap:6px}
.fimg li{font-size:.85rem; color:var(--fg2); padding-left:18px; position:relative}
.fimg li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:5px; border-left:1.5px solid var(--mint-ink); border-bottom:1.5px solid var(--mint-ink); transform:rotate(-45deg)}
.fimg li b{color:var(--fg); font-weight:600}

/* deep dive on dark */
.deep{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:60px; align-items:center}
@media (max-width:900px){.deep{grid-template-columns:1fr; gap:32px}}
.deep__vis{display:flex; justify-content:center}
.deep__vis .dev{width:min(300px,70%)} .deep__vis .dev--tab{width:100%}
.tick{margin-top:22px; display:flex; flex-direction:column}
.tick li{position:relative; padding:12px 0 12px 28px; font-size:.93rem; color:var(--ink-fg2); line-height:1.55; border-top:1px solid var(--ink-line)}
.tick li:first-child{border-top:0}
.tick li b{color:var(--ink-fg); font-weight:600}
.tick li::before{content:""; position:absolute; left:0; top:18px; width:10px; height:6px; border-left:2px solid var(--mint); border-bottom:2px solid var(--mint); transform:rotate(-45deg)}
.also{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--line)}
@media (max-width:820px){.also{grid-template-columns:1fr}}
.also > div{background:var(--panel); padding:22px 24px; margin:0 0 1px 1px}
.also b{display:block; font-weight:650; letter-spacing:-.02em}
.also p{font-size:.88rem; color:var(--fg2); margin-top:6px; line-height:1.55}

/* stats / facts / lists */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:820px){.stats{grid-template-columns:1fr}}
.stat{padding:30px 28px; border-radius:18px; background:var(--panel); border:1px solid var(--line)}
.stat__n{font-size:clamp(2.4rem,5vw,3.8rem); font-weight:760; letter-spacing:-.05em; line-height:.94; font-variant-numeric:tabular-nums}
.stat--bad .stat__n{color:var(--red)} .stat--good .stat__n{color:var(--mint-ink)} .stat--o .stat__n{color:var(--brand-ink)}
.stat__l{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3); margin-top:14px}
.stat__d{font-size:.9rem; color:var(--fg2); margin-top:8px; line-height:1.55}
.facts{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden}
@media (max-width:1000px){.facts{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.facts{grid-template-columns:repeat(2,1fr)}}
.facts div{background:var(--panel); padding:20px}
.facts dt{font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3)}
.facts dd{margin:8px 0 0; font-size:.86rem; color:var(--fg2); line-height:1.5}
.seclist{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.dark .seclist,.dark .seclist li{border-color:var(--ink-line)}
.seclist li{padding:24px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr); gap:40px}
@media (max-width:800px){.seclist li{grid-template-columns:1fr; gap:8px}}
.seclist b{font-weight:650; font-size:1.02rem; letter-spacing:-.022em}
.seclist p{font-size:.94rem; color:var(--fg2); line-height:1.62}
.dark .seclist p{color:var(--ink-fg2)}
.steps{display:flex; flex-direction:column}
.stepr{display:grid; grid-template-columns:88px minmax(0,1fr) minmax(0,1.2fr); gap:32px; padding:34px 0; border-top:1px solid var(--line); align-items:start}
@media (max-width:940px){.stepr{grid-template-columns:1fr; gap:12px; padding:28px 0}}
.stepr__n{font-size:2.8rem; font-weight:760; letter-spacing:-.06em; line-height:.85; color:var(--fg4)}
.stepr--c .stepr__n,.stepr--m .stepr__n{color:var(--brand)} .stepr--k .stepr__n{color:var(--mint)} .stepr--d .stepr__n{color:var(--teal)}
.stepr__app{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3)}
.stepr h3{font-size:1.25rem; margin-top:8px; letter-spacing:-.028em}
.stepr__t{font-family:var(--mono); font-size:11px; color:var(--fg3); margin-top:10px; display:inline-block; padding:4px 9px; border-radius:6px; background:var(--bg2)}
.stepr p{font-size:.96rem; color:var(--fg2); line-height:1.64}
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.cards2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media (max-width:900px){.cards3,.cards2{grid-template-columns:1fr}}
.card{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:26px 28px}
.card h3{font-size:1.12rem; letter-spacing:-.028em}
.card p{font-size:.92rem; color:var(--fg2); margin-top:9px; line-height:1.6}
.card .rail--s{margin-bottom:16px}
.dark .card{background:rgba(255,255,255,.045); border-color:var(--ink-line)} .dark .card p{color:var(--ink-fg2)}
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:18px; background:var(--panel)}
table.cmp{min-width:660px; font-size:.92rem}
table.cmp th,table.cmp td{padding:15px 20px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
table.cmp thead th{font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3); background:var(--bg2)}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp .num{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
table.cmp .yes{color:var(--mint-ink); font-weight:600} table.cmp .no{color:var(--fg3)}
table.cmp tr.hl td{background:var(--brand-soft)}
table.cmp td small{display:block; color:var(--fg3); font-size:.85em; margin-top:3px; line-height:1.45}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{padding:20px 0; cursor:pointer; font-weight:650; font-size:1.03rem; letter-spacing:-.022em; list-style:none; display:flex; justify-content:space-between; gap:28px; align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:""; flex:none; width:14px; height:14px; background:linear-gradient(var(--fg),var(--fg)) center/100% 1.6px no-repeat, linear-gradient(var(--fg),var(--fg)) center/1.6px 100% no-repeat; transition:transform .22s; opacity:.7}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc summary:hover{color:var(--brand-ink)}
.acc p{padding:0 0 22px; color:var(--fg2); font-size:.95rem; max-width:74ch; line-height:1.66}
.arch{display:grid; place-items:center}
.arch svg{width:100%; max-width:840px; height:auto; display:block}
.arch text{font-family:var(--sans); font-weight:600; font-size:13px; fill:var(--ink-fg)}
.arch .lab{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; fill:var(--ink-fg3); font-weight:500}
.arch .box{fill:rgba(255,255,255,.05); stroke:var(--ink-line2)} .arch .core{fill:rgba(255,255,255,.08); stroke:rgba(255,255,255,.3)}
.arch .ln{stroke:rgba(255,255,255,.22); stroke-width:1.5; fill:none} .arch .dot{animation:dash 3.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-60}}

/* inner page header */
.phead{padding:60px 0 0; position:relative}
.phead .crumb{display:flex; gap:9px; align-items:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg3); margin-bottom:26px}
.phead .crumb a:hover{color:var(--fg)} .phead .crumb i{font-style:normal; opacity:.4}
.phead__grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center}
@media (max-width:940px){.phead__grid{grid-template-columns:1fr; gap:36px}}
.phead h1{font-size:clamp(2.3rem,4.8vw,3.7rem); font-weight:750; letter-spacing:-.045em; line-height:1; max-width:15ch}
.phead__sub{font-size:1.08rem; color:var(--fg2); margin-top:18px; max-width:50ch; line-height:1.6}
.phead__vis{position:relative; display:flex; justify-content:center; align-items:flex-end}
.phead__vis .dev{width:min(290px,74%)} .phead__vis .dev--tab{width:100%}
.phead__glow{position:absolute; width:480px; height:480px; border-radius:50%; filter:blur(80px); opacity:.45; pointer-events:none; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--brand-soft)}
.pg--k .phead__glow{background:var(--mint-soft)} .pg--d .phead__glow{background:var(--teal-soft)}
.phead__bottom{height:64px}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:22px}
.badge{font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:7px 12px; border-radius:100px; border:1px solid var(--line2); color:var(--fg2); background:var(--panel)}
.subnav{position:sticky; top:var(--hdr); z-index:80; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(18px); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.subnav__sc{overflow-x:auto; scrollbar-width:none} .subnav__sc::-webkit-scrollbar{display:none}
.subnav::after{content:""; position:absolute; right:0; top:0; bottom:0; width:60px; pointer-events:none; background:linear-gradient(90deg,transparent,var(--bg))}
.subnav ul{display:flex; gap:2px; max-width:1160px; margin:0 auto; padding:0 28px}
.subnav a{white-space:nowrap; padding:14px 13px; font-size:.86rem; font-weight:500; color:var(--fg3); position:relative}
.subnav a:hover{color:var(--fg)} .subnav a.on{color:var(--fg); font-weight:600}
.subnav a.on::after{content:""; position:absolute; left:13px; right:13px; bottom:0; height:2px; border-radius:2px; background:var(--brand)}

/* photo bands */
.pband{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:center}
@media (max-width:900px){.pband{grid-template-columns:1fr; gap:32px}}
.pband .photo{aspect-ratio:4/5; box-shadow:var(--sh3)}
.pband--rev .photo{order:2}
@media (max-width:900px){.pband--rev .photo{order:0}}
.pband blockquote{margin:0; font-size:clamp(1.5rem,2.8vw,2.3rem); font-weight:650; letter-spacing:-.035em; line-height:1.15; max-width:22ch}
.pband blockquote em{font-style:normal; color:var(--brand)}
.pband .lede{margin-top:22px}
.pn{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:640px){.pn{grid-template-columns:1fr}}
.pn a{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px 24px; display:block; transition:transform .25s var(--ease), box-shadow .25s}
.pn a:hover{transform:translateY(-2px); box-shadow:var(--sh2)}
.pn small{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3)}
.pn b{display:block; font-size:1.15rem; font-weight:700; letter-spacing:-.03em; margin-top:8px}
.pn--next{text-align:right}

/* pricing */
.plans{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:34px; position:relative}
.plan--hero{border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft), var(--sh3)}
.plan__flag{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-ink)}
.plan--alt .plan__flag{color:var(--fg3)}
.plan h3{font-size:1.8rem; margin-top:10px; letter-spacing:-.04em}
.plan__sub{font-size:.93rem; color:var(--fg2); margin-top:9px; line-height:1.55}
.tiers{margin-top:24px; display:flex; flex-direction:column; gap:10px}
.tier{border:1px solid var(--line); border-radius:14px; padding:16px 18px; background:var(--bg2); display:flex; justify-content:space-between; align-items:center; gap:18px}
.tier__n{font-weight:700; font-size:1rem; letter-spacing:-.02em}
.tier__d{font-size:.82rem; color:var(--fg3); margin-top:3px; line-height:1.45}
.tier__p{font-size:2.1rem; font-weight:760; letter-spacing:-.05em; line-height:1; white-space:nowrap}
.tier__p small{font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.1em; color:var(--fg3); display:block; text-align:right; margin-top:6px; text-transform:uppercase}
.plan__list{margin-top:24px; display:flex; flex-direction:column; gap:10px; padding-top:22px; border-top:1px solid var(--line)}
.plan__list li{font-size:.89rem; color:var(--fg2); line-height:1.55; padding-left:24px; position:relative}
.plan__list li::before{content:""; position:absolute; left:0; top:7px; width:10px; height:6px; border-left:2px solid var(--mint-ink); border-bottom:2px solid var(--mint-ink); transform:rotate(-45deg)}
.plan .btn{margin-top:26px}
.addon{background:var(--panel); border:1px dashed var(--line2); border-radius:20px; padding:28px 32px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:center}
@media (max-width:700px){.addon{grid-template-columns:1fr; gap:16px}}
.addon h3{font-size:1.25rem; letter-spacing:-.03em}
.addon p{font-size:.92rem; color:var(--fg2); margin-top:9px; max-width:60ch; line-height:1.58}
.addon__p{font-size:2.4rem; font-weight:760; letter-spacing:-.05em; color:var(--brand-ink); white-space:nowrap; line-height:1}
.addon__p small{display:block; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3); margin-top:8px; text-align:right}
.calc{background:var(--panel); border:1px solid var(--line); border-radius:24px; overflow:hidden; display:grid; grid-template-columns:1fr 1.1fr}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
.calc__l{padding:32px 34px; border-right:1px solid var(--line)}
@media (max-width:900px){.calc__l{border-right:0; border-bottom:1px solid var(--line)}}
.calc__r{padding:32px 34px; background:var(--bg2)}
.calc h3{font-size:1.35rem; letter-spacing:-.03em}
.calc__s{font-size:.88rem; color:var(--fg3); margin-top:9px; line-height:1.55}
.f{margin-top:26px}
.f__t{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.f__l{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3)}
.f__v{font-size:1.45rem; font-weight:760; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:3px; background:var(--line2); margin-top:15px; cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:var(--brand); border:4px solid var(--panel); box-shadow:0 2px 8px rgba(0,0,0,.3); cursor:grab}
input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:var(--brand); border:4px solid var(--panel); box-shadow:0 2px 8px rgba(0,0,0,.3); cursor:grab}
.f__s{display:flex; justify-content:space-between; font-family:var(--mono); font-size:9.5px; color:var(--fg3); margin-top:8px}
.gross{margin-top:26px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline}
.gross span{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3)}
.gross b{font-size:1.75rem; font-weight:760; letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.bar{margin-bottom:18px}
.bar__t{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px}
.bar__n{font-size:.92rem; font-weight:600}
.bar__n em{font-style:normal; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mint-ink); margin-left:8px}
.bar__p{font-size:1.25rem; font-weight:760; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.bar__track{height:10px; border-radius:6px; background:var(--line); overflow:hidden}
.bar__fill{height:100%; border-radius:6px; background:var(--fg4); transition:width .35s var(--ease)}
.bar.is-best .bar__fill{background:var(--mint)} .bar.is-best .bar__p{color:var(--mint-ink)} .bar.is-out{opacity:.4}
.bar__d{font-family:var(--mono); font-size:9.5px; color:var(--fg3); margin-top:6px}
.verdict{margin-top:22px; padding:16px 18px; border-radius:14px; background:var(--panel); border:1px solid var(--line); font-size:.92rem; color:var(--fg2); line-height:1.6}
.verdict b{color:var(--fg)} .verdict em{font-style:normal; color:var(--mint-ink); font-weight:700}

/* form */
.form{background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:32px}
.fgrid-f{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:640px){.fgrid-f{grid-template-columns:1fr}}
.fld{display:flex; flex-direction:column; gap:7px}
.fld--full{grid-column:1/-1}
.fld label{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3)}
.fld input,.fld select,.fld textarea{font-family:var(--sans); font-size:.95rem; color:var(--fg); background:var(--bg2); border:1px solid var(--line2); border-radius:11px; padding:12px 14px; width:100%}
.fld textarea{min-height:96px; resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:transparent}
.form__note{font-size:.84rem; color:var(--fg3); margin-top:14px; line-height:1.55}
.form__ok{margin-top:18px; padding:16px 18px; border-radius:14px; background:var(--mint-soft); border:1px solid var(--mint-line); color:var(--mint-ink); font-size:.92rem; line-height:1.6}
.form__ok a{font-weight:700; text-decoration:underline}
.aside-list{display:flex; flex-direction:column}
.aside-list li{display:grid; grid-template-columns:32px 1fr; gap:14px; padding:18px 0; border-bottom:1px solid var(--line)}
.aside-list li:first-child{padding-top:0}
.aside-list .n{font-size:1.2rem; font-weight:760; color:var(--brand); letter-spacing:-.05em; line-height:1.1}
.aside-list b{display:block; font-weight:650; font-size:.98rem; letter-spacing:-.022em}
.aside-list p{font-size:.88rem; color:var(--fg2); margin-top:4px; line-height:1.55}

/* CTA + footer */
.cta{border-radius:24px; padding:68px 56px; text-align:center}
@media (max-width:640px){.cta{padding:46px 26px}}
.cta h2{font-size:clamp(1.9rem,4vw,3.1rem); font-weight:750; letter-spacing:-.045em; color:#fff; max-width:18ch; margin:0 auto}
.cta p{font-size:1.02rem; color:var(--ink-fg2); max-width:54ch; margin:16px auto 0; line-height:1.6}
.cta__a{display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap}
.foot{border-top:1px solid var(--line); background:var(--bg)}
.foot__in{max-width:1160px; margin:0 auto; padding:60px 28px 34px; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:36px}
@media (max-width:960px){.foot__in{grid-template-columns:1fr 1fr 1fr; gap:30px}}
@media (max-width:600px){.foot__in{grid-template-columns:1fr 1fr}}
.foot h5{font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--fg3); margin:0 0 14px}
.foot li{margin-bottom:9px} .foot li a{font-size:.9rem; color:var(--fg2)} .foot li a:hover{color:var(--fg)}
.foot__about{grid-column:span 1}
@media (max-width:600px){.foot__about{grid-column:span 2}}
.foot__about p{font-size:.88rem; color:var(--fg2); margin-top:14px; line-height:1.6; max-width:32ch}
.foot__legal{max-width:1160px; margin:0 auto; padding:20px 28px 48px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg3)}

/* ===================== v5 craft pass ===================== */
.hdr{background:color-mix(in srgb,var(--bg) 55%,transparent); border-bottom-color:transparent; transition:background .25s, border-color .25s}
.hdr.is-scrolled{background:color-mix(in srgb,var(--bg) 84%,transparent); border-bottom-color:var(--line)}

/* hero: photo bleeds to the viewport edge on wide screens; scrim; orchestrated entrance */
.hero__photo{position:relative}
.hero__photo::before{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); z-index:3; pointer-events:none}
.hero__photo::after{content:""; position:absolute; inset:auto 0 0 0; height:46%; background:linear-gradient(180deg,transparent,rgba(12,13,16,.42)); z-index:2; pointer-events:none}
@media (min-width:1240px){ .hero__vis{margin-right:calc((100vw - 1160px) / -2 - 28px)} .hero__photo{aspect-ratio:auto; height:640px; border-radius:28px 0 0 28px} .hero__pin{right:36px} }
.js .hero__photo img{animation:heroPhoto 1.6s var(--ease) both}
@keyframes heroPhoto{from{transform:scale(1.14)} to{transform:scale(1.04)}}
.js .hero__card{animation:cardUp 1s var(--ease) .35s both}
@keyframes cardUp{from{transform:translateY(44px)} to{transform:none}}
.js .hero__pin{animation:pinIn .8s var(--ease) .75s both} .js .hero__pin2{animation:pinIn .8s var(--ease) .95s both}
@keyframes pinIn{from{transform:translateY(12px) scale(.94)} to{transform:none}}
.trust{display:flex; gap:22px; flex-wrap:wrap; margin-top:30px}
.trust span{display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:500; color:var(--fg2)}
.trust .ic{width:16px; height:16px; color:var(--mint-ink)}

/* works-with: quiet wordmarks instead of pills */
.wm{display:inline-flex; align-items:center; height:44px; padding:0 22px; font-weight:700; font-size:1.05rem; letter-spacing:-.02em; color:var(--fg4); white-space:nowrap}
.wm .ic{width:18px; height:18px; margin-right:9px; color:var(--fg4)}

/* feature cards carry a bespoke UI fragment, not an icon */
.wdg{height:104px; margin:0 0 18px; border-radius:12px; background:var(--bg2); border:1px solid var(--line); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:14px}
.wdg--tk{padding:0; flex-direction:column; align-items:stretch; justify-content:flex-start}
.wdg__tkh{display:grid; grid-template-columns:auto 1fr auto; gap:10px; padding:8px 12px; font-family:var(--mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; background:var(--mint); color:#04261A}
.wdg__tkh.warn{background:var(--amber); color:#2A1B02}
.wdg__tkb{padding:9px 12px; font-size:11.5px; color:var(--fg2); display:flex; justify-content:space-between; gap:10px}
.wdg__tkb b{color:var(--fg); font-weight:600}
.wdg__pill{display:inline-flex; align-items:center; gap:9px; padding:9px 13px; border-radius:100px; background:var(--panel); border:1px solid var(--line2); font-family:var(--mono); font-size:11px; font-weight:600}
.wdg__pill .ic{width:14px; height:14px; color:var(--mint-ink)}
.wdg__chips{display:flex; gap:6px; flex-wrap:wrap; justify-content:center}
.wdg__chips span{padding:6px 11px; border-radius:100px; border:1px solid var(--line2); background:var(--panel); font-size:11px; font-weight:600; color:var(--fg2)}
.wdg__chips span.on{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.wdg__q{width:100%; display:flex; flex-direction:column; gap:6px}
.wdg__q div{display:flex; justify-content:space-between; align-items:center; font-size:11px; padding:6px 10px; border-radius:8px; background:var(--panel); border:1px solid var(--line); color:var(--fg2)}
.wdg__q i{font-style:normal; font-family:var(--mono); font-size:9.5px; padding:2px 7px; border-radius:100px}
.wdg__q i.ok{background:var(--mint-soft); color:var(--mint-ink)} .wdg__q i.rt{background:var(--brand-soft); color:var(--brand-ink)}
.wdg__undo{display:inline-flex; align-items:center; gap:12px; padding:10px 14px; border-radius:100px; background:var(--fg); color:var(--bg); font-size:12px; font-weight:600}
.wdg__undo i{font-style:normal; font-family:var(--mono); color:var(--mint)}
.wdg__rec{width:100%; display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; padding:8px 10px; background:var(--panel); border:1px solid var(--line); border-radius:10px; font-size:11.5px}
.wdg__rec i{width:34px; height:34px; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink); font-style:normal; font-weight:700; display:grid; place-items:center; font-size:11px}
.wdg__rec b{display:block; font-weight:650; color:var(--fg)} .wdg__rec small{color:var(--fg3)}
.wdg__rec em{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--mint-ink)}

/* dark sections sit inset as panels */
.inset{max-width:1240px; margin:0 auto; border-radius:28px}
@media (max-width:1290px){.inset{margin:0 24px}}
@media (max-width:600px){.inset{border-radius:20px; margin:0 12px}}

/* photographic CTA */
.cta--photo{padding:96px 60px; text-align:left}
.cta--photo > img{position:absolute!important; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 40%; z-index:0}
.cta--photo::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(12,13,16,.88) 0%, rgba(12,13,16,.74) 42%, rgba(12,13,16,.22) 100%)}
.cta--photo > *:not(img){position:relative; z-index:2}
.cta--photo h2,.cta--photo p{margin-left:0} .cta--photo .cta__a{justify-content:flex-start}
@media (max-width:640px){.cta--photo{padding:56px 26px} .cta--photo::before{background:rgba(12,13,16,.8)}}

/* pointer spotlight on cards */
.fc,.card,.fimg,.fl,.stat,.plan{position:relative; overflow:hidden}
.fc::after,.card::after,.fimg::after,.fl::after,.stat::after,.plan::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s; z-index:0;
  background:radial-gradient(260px 260px at var(--mx,50%) var(--my,50%), rgba(242,107,29,.10), transparent 70%)}
.fc:hover::after,.card:hover::after,.fimg:hover::after,.fl:hover::after,.stat:hover::after,.plan:hover::after{opacity:1}
.fc > *,.card > *,.fimg > *,.fl > *,.stat > *,.plan > *{position:relative; z-index:1}
.dark .fc::after,.dark .card::after{background:radial-gradient(260px 260px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.09), transparent 70%)}

/* editorial split head */
.head--split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:40px; align-items:end; max-width:none}
.head--split .lede{margin-top:0}
@media (max-width:900px){.head--split{grid-template-columns:1fr; gap:14px}}

/* product tour */
.tour{display:grid; grid-template-columns:270px minmax(0,1fr); gap:36px; align-items:start}
@media (max-width:900px){.tour{grid-template-columns:1fr}}
.tour__tabs{display:flex; flex-direction:column; gap:6px}
@media (max-width:900px){.tour__tabs{flex-direction:row; overflow-x:auto; scrollbar-width:none}}
.tour__tab{text-align:left; padding:16px 18px; border-radius:14px; border:1px solid transparent; transition:background .2s, border-color .2s; flex:none}
.tour__tab b{display:block; font-weight:650; letter-spacing:-.02em}
.tour__tab span{display:block; font-size:.84rem; color:var(--fg3); margin-top:3px}
.tour__tab[aria-selected="true"]{background:var(--panel); border-color:var(--line); box-shadow:var(--sh1)}
.tour__tab[aria-selected="true"] b{color:var(--brand-ink)}
.tour__panes{position:relative; min-height:500px; border-radius:24px; background:radial-gradient(120% 90% at 50% 0%,var(--brand-soft),var(--bg2)); overflow:hidden; padding:40px}
.tour__pane{display:none; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:36px; align-items:center}
.tour__pane.on{display:grid; animation:pgIn .45s var(--ease)}
@media (max-width:700px){.tour__pane.on{grid-template-columns:1fr} .tour__panes{padding:24px}}
.tour__pane .dev{width:min(250px,86%); margin:0 auto} .tour__pane .dev--tab{width:100%}
.tour__pane h3{font-size:1.45rem; letter-spacing:-.035em}
.tour__pane ul{margin-top:16px; display:flex; flex-direction:column; gap:10px}
.tour__pane li{font-size:.92rem; color:var(--fg2); padding-left:22px; position:relative; line-height:1.5}
.tour__pane li::before{content:""; position:absolute; left:0; top:8px; width:9px; height:5px; border-left:2px solid var(--mint-ink); border-bottom:2px solid var(--mint-ink); transform:rotate(-45deg)}
@media (max-width:900px){.js .step{opacity:1} .story__badge{display:none}}

.offer{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:center; padding:28px 32px; border-radius:20px; background:var(--mint-soft); border:1px solid var(--mint-line)}
@media (max-width:700px){.offer{grid-template-columns:1fr; gap:16px}}
.offer h3{font-size:1.25rem; letter-spacing:-.03em}
.offer p{font-size:.92rem; color:var(--fg2); margin-top:9px; max-width:60ch; line-height:1.58}
.offer__tag{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--mint-ink); margin-bottom:10px}
.offer__tag::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--mint); animation:blip 2.2s infinite}
.offer__p{text-align:right; white-space:nowrap}
.offer__p s{display:block; font-family:var(--mono); font-size:13px; color:var(--fg3)}
.offer__p b{display:block; font-size:2.4rem; font-weight:760; letter-spacing:-.05em; color:var(--mint-ink); line-height:1}
.offer__p small{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3); margin-top:8px}
.note{font-size:.9rem; color:var(--fg2); line-height:1.6; display:flex; gap:10px; align-items:flex-start; justify-content:center; text-align:left; max-width:64ch; margin:22px auto 0}
.note .ic{color:var(--mint-ink); width:18px; height:18px; margin-top:3px}

/* ---- CMS-managed section variants ---- */
.sec--none{padding:0}
.sec--panel{background:var(--panel)}
.prose{max-width:70ch;margin-top:18px;color:var(--fg2);font-size:1rem;line-height:1.7}
.prose h2,.prose h3,.prose h4{color:var(--fg);margin:28px 0 10px;letter-spacing:-.025em}
.prose h2{font-size:1.5rem}.prose h3{font-size:1.2rem}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:7px}
.prose a{color:var(--brand-ink);text-decoration:underline}
.prose img{border-radius:14px;margin:16px 0}
.prose table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.92rem}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left}
.prose blockquote{margin:18px 0;padding-left:18px;border-left:3px solid var(--brand);color:var(--fg)}