/* StoqBox website prototype — shared styles.
   Keynote look, Mica header. App screens are rebuilt from each app's own tokens:
   desktop (src/renderer/pages/pos/POSPage.css), StoqBox Owner (app/src/design/tokens.ts),
   StoqBox Go (src/theme/*). */

@layer reset, tokens, base, layout, components, apps, pages, utils;

@layer tokens {
  :root{
    --bg:#FBFBFD; --bg-2:#F3F3F7; --bg-3:#E9E9F0; --paper:#FFFFFF;
    --ink:#0B0B14; --ink-2:#3B3C4A; --ink-3:#6B6C7B; --ink-4:#A2A3B1;
    --hair:rgb(11 11 20 / .08); --hair-2:rgb(11 11 20 / .05);
    --brand:#5B3AE6; --brand-2:#3B21A8; --brand-3:#7358F0; --brand-tint:#EEEBFE; --brand-100:#DAD4FD;
    --amber:#FFB020; --amber-tint:#FFF3D6; --amber-ink:#A86400;
    --good:#0A7A54; --good-tint:#E3F6EE; --bad:#BF3447; --bad-tint:#FCE9EC; --warn:#B45309; --warn-tint:#FFF3DC;
    --night:#000; --night-card:#111116; --night-2:#1A1A21; --night-ink:#F5F5F7; --night-3:#8E8E98; --night-hair:rgb(255 255 255 / .1);
    --f:"Geist", "Segoe UI", system-ui, sans-serif; --mono:"Geist Mono", ui-monospace, Consolas, monospace; --wordmark:"Space Grotesk", "Geist", sans-serif;
    --spring:cubic-bezier(.32,.72,0,1); --out:cubic-bezier(.16,1,.3,1);
    --soft:0 1px 1px rgb(11 11 20 / .03), 0 8px 24px -8px rgb(11 11 20 / .10), 0 40px 80px -30px rgb(11 11 20 / .16);
    --lift:0 1px 2px rgb(11 11 20 / .04), 0 4px 14px -6px rgb(11 11 20 / .10);
    --gut:clamp(16px, 4.5vw, 40px);
    --max:1240px;
    color-scheme:light;
  }
}

@layer reset {
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
  body{margin:0}
  img,svg{display:block; max-width:100%}
  button,input,select,textarea{font:inherit; color:inherit}
  h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0}
  ul,ol{padding:0; list-style:none}
}

@layer base {
  body{background:var(--bg); color:var(--ink-2); font:400 17px/1.6 var(--f); letter-spacing:-.011em; -webkit-font-smoothing:antialiased; overflow-x:clip}
  h1,h2,h3,h4{color:var(--ink); font-weight:600; letter-spacing:-.045em; line-height:1.02; text-wrap:balance}
  p{text-wrap:pretty}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:10px}
  .num{font-variant-numeric:tabular-nums}
  .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  [hidden]{display:none !important}
  .skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px; text-decoration:none}
  .skip:focus{top:12px}
}

@layer layout {
  .wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
  .sec{padding-block:clamp(88px,11vw,168px)}
  .sec-tight{padding-block:clamp(64px,8vw,112px)}
  .head{display:grid; gap:18px; max-width:880px; margin-bottom:clamp(40px,5.5vw,80px)}
  .head.center{margin-inline:auto; text-align:center; justify-items:center}
  .kicker{font:500 13px/1.2 var(--f); letter-spacing:0; color:var(--brand)}
  .on-night .kicker{color:#A796FB}
  .h-xl{font-size:clamp(3rem, 1.3rem + 7.2vw, 8.4rem); letter-spacing:-.065em; line-height:.92}
  .h-lg{font-size:clamp(2.5rem, 1.3rem + 4.4vw, 5.6rem); letter-spacing:-.058em; line-height:.96}
  .h-md{font-size:clamp(2rem, 1.2rem + 2.6vw, 3.6rem); letter-spacing:-.05em; line-height:1}
  .h-sm{font-size:clamp(1.4rem, 1.1rem + .9vw, 1.9rem); letter-spacing:-.035em; line-height:1.12}
  .dim{color:var(--ink-4)}
  .lead{font-size:clamp(18px, .9vw + 13px, 22px); line-height:1.45; color:var(--ink-3); max-width:46ch}
  .lead b{color:var(--ink); font-weight:500}
}

@layer components {
  /* ---------- buttons ---------- */
  .btn{display:inline-flex; align-items:center; gap:12px; min-height:50px; padding:5px 5px 5px 22px; border-radius:999px; border:0; text-decoration:none; cursor:pointer; font:500 15px/1 var(--f); letter-spacing:-.01em; white-space:nowrap; transition:transform .5s var(--spring), background .35s var(--spring), box-shadow .5s var(--spring)}
  .btn .ic{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; transition:transform .6s var(--spring)}
  .btn .ic svg{width:15px; height:15px}
  .btn:hover .ic{transform:translate(3px,-1px) scale(1.05)}
  .btn:active{transform:scale(.98)}
  .btn-dark{background:var(--ink); color:#fff; box-shadow:0 10px 26px -12px rgb(11 11 20 / .55)}
  .btn-dark .ic{background:rgb(255 255 255 / .14)}
  .btn-dark:hover{background:#1E1E2A}
  .btn-light{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--hair), var(--lift)}
  .btn-light .ic{background:var(--bg-2)}
  .btn-brand{background:var(--brand); color:#fff; box-shadow:0 10px 26px -12px rgb(91 58 230 / .7)}
  .btn-brand .ic{background:rgb(255 255 255 / .16)}
  .btn-brand:hover{background:#6646EC}
  .btn-white{background:#fff; color:#000}
  .btn-white .ic{background:var(--bg-2)}
  .btn-text{display:inline-flex; align-items:center; gap:6px; font-weight:500; color:var(--brand); text-decoration:none}
  .btn-text svg{width:14px; height:14px; transition:transform .5s var(--spring)}
  .btn-text:hover svg{transform:translateX(3px)}
  .ctas{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center}

  /* ---------- header (Mica) ---------- */
  .top{position:sticky; top:calc(10px + env(safe-area-inset-top,0px)); z-index:40; margin:10px clamp(8px,1.4vw,16px) 0}
  .bar{max-width:1280px; margin-inline:auto; display:flex; align-items:center; gap:4px; padding:7px 7px 7px 16px; border-radius:18px; background:rgb(251 251 253 / .76); backdrop-filter:saturate(1.7) blur(24px); -webkit-backdrop-filter:saturate(1.7) blur(24px); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .7), 0 0 0 1px var(--hair), 0 10px 30px -14px rgb(11 11 20 / .22)}
  .logo{display:flex; align-items:center; gap:9px; text-decoration:none; font:700 20px/1 var(--wordmark); letter-spacing:-.04em; color:var(--ink); margin-inline-end:18px}
  .logo svg{width:26px; height:26px}
  .logo .q{color:var(--brand)}
  .menu{display:flex; align-items:center; gap:2px}
  .menu > a, .menu > .dd > button{font:500 14.5px/1 var(--f); text-decoration:none; color:var(--ink-2); padding:11px 13px; border-radius:11px; border:0; background:transparent; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:background .3s}
  .menu > a:hover, .menu > .dd > button:hover, .menu > .dd.open > button{background:rgb(11 11 20 / .05)}
  .menu > a[aria-current="page"]{color:var(--ink); font-weight:600}
  .menu svg.chev{width:12px; height:12px; transition:transform .4s var(--spring)}
  .dd{position:relative}
  .dd.open svg.chev{transform:rotate(180deg)}
  .mega{position:absolute; top:calc(100% + 14px); left:-12px; width:560px; padding:8px; border-radius:22px; background:rgb(255 255 255 / .96); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:0 0 0 1px var(--hair), 0 30px 60px -20px rgb(11 11 20 / .3); display:grid; grid-template-columns:1fr 1fr; gap:6px; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .3s var(--spring), transform .45s var(--spring)}
  .dd.open .mega{opacity:1; transform:none; pointer-events:auto}
  .mega a{display:grid; gap:10px; padding:16px; border-radius:16px; text-decoration:none; background:var(--bg-2); transition:background .3s}
  .mega a:hover{background:var(--brand-tint)}
  .mega .pi{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:#fff; box-shadow:inset 0 0 0 1px var(--hair-2)}
  .mega .pi svg{width:26px; height:26px}
  .mega b{font:600 16px/1.2 var(--f); color:var(--ink); letter-spacing:-.02em}
  .mega span{font-size:13.5px; line-height:1.45; color:var(--ink-3)}
  .mega .more{grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; background:transparent; padding:12px 16px; font-size:14px; color:var(--ink-2)}
  .mega .more:hover{background:var(--bg-2)}
  .bar .cta{margin-inline-start:auto; min-height:42px; padding:4px 4px 4px 16px; font-size:14px; border-radius:12px}
  .bar .cta .ic{width:34px; height:34px; border-radius:9px}
  .burger{display:none; width:44px; height:44px; margin-inline-start:auto; border-radius:12px; border:0; background:rgb(11 11 20 / .05); position:relative; cursor:pointer}
  .burger span{position:absolute; left:13px; right:13px; height:1.7px; border-radius:2px; background:var(--ink); transition:transform .55s var(--spring), top .55s var(--spring), opacity .3s}
  .burger span:nth-child(1){top:16px} .burger span:nth-child(2){top:21.5px} .burger span:nth-child(3){top:27px}
  .nav-open .burger span:nth-child(1){top:21.5px; transform:rotate(45deg)} .nav-open .burger span:nth-child(2){opacity:0} .nav-open .burger span:nth-child(3){top:21.5px; transform:rotate(-45deg)}
  .sheet{position:fixed; inset:0; z-index:35; padding:96px var(--gut) 28px; background:rgb(251 251 253 / .9); backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); display:flex; flex-direction:column; gap:2px; overflow-y:auto; opacity:0; pointer-events:none; transition:opacity .45s var(--spring)}
  .nav-open .sheet{opacity:1; pointer-events:auto}
  .sheet a{font:600 clamp(30px,8.5vw,44px)/1.22 var(--f); letter-spacing:-.045em; color:var(--ink); text-decoration:none; opacity:0; transform:translateY(32px); transition:transform .8s var(--spring), opacity .5s}
  .sheet a small{display:block; font:400 14px/1.4 var(--f); letter-spacing:-.01em; color:var(--ink-3); margin-bottom:6px}
  .nav-open .sheet a{opacity:1; transform:none}
  .sheet a:nth-child(2){transition-delay:.04s}.sheet a:nth-child(3){transition-delay:.08s}.sheet a:nth-child(4){transition-delay:.12s}.sheet a:nth-child(5){transition-delay:.16s}.sheet a:nth-child(6){transition-delay:.2s}
  .sheet .btn{margin-top:auto; align-self:flex-start; font:500 15px/1 var(--f); letter-spacing:-.01em}
  @media (max-width:960px){ .menu, .bar .cta{display:none} .burger{display:block} }

  /* ---------- reveal (visible at rest; animates only when scrolled into view) ---------- */
  .js .rv.in{animation:rise 1s var(--out) both}
  @keyframes rise{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}

  /* ---------- device frames ---------- */
  /* phone: the screen is laid out at the app's real 360-dp width, then scaled by --k */
  .ph{--k:.78; position:relative; overflow:hidden; width:calc(360px * var(--k) + 20px); height:calc(780px * var(--k) + 20px); padding:10px; border-radius:calc(56px * var(--k) + 10px); background:linear-gradient(145deg,#3A3A43,#111116 40%,#2A2A32); box-shadow:inset 0 0 0 1.5px #57575F, 0 60px 90px -44px rgb(11 11 20 / .6), 0 18px 34px -18px rgb(11 11 20 / .4); flex:none}
  .ph::after{content:""; position:absolute; top:calc(10px + 14px * var(--k)); left:50%; translate:-50% 0; width:calc(96px * var(--k)); height:calc(28px * var(--k)); border-radius:99px; background:#000; z-index:5}
  .ph > .scr{position:relative; width:360px; height:780px; transform:scale(var(--k)); transform-origin:0 0; border-radius:56px; overflow:hidden}
  /* monitor: the screen is laid out at 1440 × 900, then scaled by --k */
  .mon{--k:.5; width:calc(1440px * var(--k) + 22px)}
  .mon-shell{padding:9px; border-radius:24px; background:linear-gradient(180deg,#F5F5F8,#D8D8E0); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgb(11 11 20 / .08), 0 50px 90px -40px rgb(11 11 20 / .45)}
  .mon-bezel{background:#0C0C10; border-radius:16px; padding:2px; overflow:hidden}
  .clip > .dk{width:1440px; height:900px; transform:scale(var(--k)); transform-origin:0 0}
  .mon-bezel > .clip{width:calc(1440px * var(--k)); height:calc(900px * var(--k)); overflow:hidden; border-radius:14px}
  .stand{margin:0 auto; width:28%; height:calc(150px * var(--k)); background:linear-gradient(90deg,#CDCDD5,#EDEDF2 45%,#D3D3DB); clip-path:polygon(22% 0,78% 0,92% 100%,8% 100%)}
  .foot{margin:0 auto; width:44%; height:12px; border-radius:6px 6px 3px 3px; background:linear-gradient(#EAEAEF,#C8C8D1); box-shadow:0 18px 26px -10px rgb(11 11 20 / .35)}
  .shotframe{border-radius:22px; padding:8px; background:linear-gradient(180deg,#F5F5F8,#DCDCE3); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgb(11 11 20 / .07), var(--soft)}
  .shotframe img{border-radius:14px; width:100%; height:auto; aspect-ratio:1600/770; object-fit:cover; object-position:top left; background:#F5F5F7}

  /* ---------- stage (scene scaled to fit) ---------- */
  .plinth{position:relative; border-radius:clamp(26px,4vw,48px); background:radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, #F1F1F6 55%, #E6E6EE 100%); box-shadow:inset 0 0 0 1px var(--hair-2); overflow:hidden}
  .fit{position:relative}
  .fit > .scene{position:absolute; left:50%; top:0; transform-origin:top center; transform:translateX(-50%) scale(var(--s,1))}
  .tag-ex{position:absolute; z-index:8; top:16px; left:16px; font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); background:rgb(255 255 255 / .85); padding:8px 11px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--hair)}

  /* ---------- receipt ---------- */
  .rcpt{background:#FFFEFA; color:#16161D; font:400 11.5px/1.5 var(--mono); padding:18px 16px 26px; --t:7px;
    -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--t)) 100%;
    mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--t)) 100%}
  .rcpt.print{animation:print 1.6s steps(20,end) both}
  @keyframes print{from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0)}}
  .rcpt h6{text-align:center; font:600 12.5px var(--mono); letter-spacing:.04em}
  .rcpt .c{text-align:center; color:#6b6b74}
  .rcpt hr{border:0; border-top:1px dashed #c8c6bd; margin:8px 0}
  .rcpt .r{display:flex; justify-content:space-between; gap:8px}
  .rcpt .r span:first-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .rcpt .t{font-weight:600; font-size:13px; padding:5px 0}
  .bars{display:flex; justify-content:center; height:34px; margin-top:8px}
  .bars i{display:block; background:#16161D}

  /* ---------- bento (double bezel) ---------- */
  .bento{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px}
  .b{padding:6px; border-radius:32px; background:rgb(11 11 20 / .025); box-shadow:inset 0 0 0 1px var(--hair-2)}
  .b > .in{height:100%; border-radius:26px; background:#fff; box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgb(11 11 20 / .04); padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; gap:12px; overflow:hidden}
  .b h3{font-size:clamp(21px,.9vw + 15px,26px); letter-spacing:-.04em; line-height:1.12}
  .b p{color:var(--ink-3); font-size:15.5px; line-height:1.5}
  .b .tag{font:500 12px/1 var(--f); color:var(--ink-4)}
  .b .viz{margin-top:auto; padding-top:8px}
  .s12{grid-column:span 12} .s8{grid-column:span 8} .s7{grid-column:span 7} .s6{grid-column:span 6} .s5{grid-column:span 5} .s4{grid-column:span 4} .s3{grid-column:span 3} .r2{grid-row:span 2}
  @media (max-width:1024px){ .s3{grid-column:span 6} .s4,.s5,.s7,.s8{grid-column:span 6} }
  @media (max-width:720px){ .s3,.s4,.s5,.s6,.s7,.s8{grid-column:span 12} .r2{grid-row:auto} }
  .group-h{display:flex; justify-content:space-between; align-items:end; gap:20px; margin:clamp(56px,7vw,96px) 0 22px; padding-top:22px; border-top:1px solid var(--hair)}
  .group-h:first-of-type{margin-top:0}
  .group-h h3{font-size:clamp(26px,1.4vw + 16px,38px); letter-spacing:-.045em}
  .group-h p{color:var(--ink-3); max-width:44ch; font-size:15.5px}
  /* mini visuals */
  .mrows{display:grid; gap:6px}
  .mrows div{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--bg); font-size:14px; color:var(--ink-2)}
  .mrows b{font:500 12.5px var(--mono); color:var(--ink)}
  .mrows .w{color:var(--warn)} .mrows .r{color:var(--bad)} .mrows .g{color:var(--good)}
  .mbars{display:flex; align-items:flex-end; gap:7px; height:110px}
  .mbars i{flex:1; border-radius:7px 7px 3px 3px; background:var(--bg-3)}
  .mbars i.hi{background:var(--ink)}
  .msw{display:grid}
  .msw div{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid var(--hair-2); font-size:14.5px}
  .tg{width:38px; height:23px; border-radius:999px; background:#E3E3EA; position:relative; flex:none}
  .tg::after{content:""; position:absolute; top:2.5px; left:2.5px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgb(0 0 0 / .2)}
  .tg.on{background:#30B85F} .tg.on::after{left:17.5px}
  .mbig{font:600 clamp(40px,3vw + 18px,64px)/.95 var(--f); letter-spacing:-.06em; color:var(--ink)}
  .mchips{display:flex; flex-wrap:wrap; gap:6px}
  .mchips span{padding:7px 11px; border-radius:999px; background:var(--bg-2); font-size:13px; color:var(--ink-2)}
  .mchips span.on{background:var(--ink); color:#fff}
  .slides{aspect-ratio:16/9; border-radius:16px; overflow:hidden; position:relative; background:#1E1057}
  .slides > div{position:absolute; inset:0; padding:16px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; opacity:0; transition:opacity 1s var(--spring)}
  .slides > div.on{opacity:1}
  .slides b{font:600 20px/1.05 var(--f); letter-spacing:-.04em}
  .slides span{font-size:11.5px; opacity:.8; margin-top:4px}
  .scanpad{display:grid; gap:10px}
  .state{padding:13px 15px; border-radius:16px; font-weight:500; font-size:15px; background:var(--bg-2); color:var(--ink-3); transition:background .5s var(--spring), color .4s}
  .state small{display:block; font:400 12.5px var(--mono); margin-top:3px; opacity:.85}
  .state.ok{background:var(--good-tint); color:var(--good)} .state.no{background:var(--bad-tint); color:var(--bad)}
  .countf{display:flex; gap:10px}
  .countf input{flex:1; min-width:0; height:54px; border-radius:16px; border:0; background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--hair-2); font:500 19px var(--mono); color:var(--ink); padding:0 16px}
  .countf input:focus{outline:none; box-shadow:inset 0 0 0 2px var(--brand)}
  .verdict{font:600 clamp(42px,3.4vw + 18px,80px)/.95 var(--f); letter-spacing:-.06em; color:var(--bad)}
  .verdict.good{color:var(--good)} .verdict.over{color:var(--warn)}
  .why{font:400 12.5px/1.5 var(--mono); color:var(--ink-3)}

  /* ---------- statement ---------- */
  .statement p{font:500 clamp(28px, 1.1rem + 3.2vw, 60px)/1.13 var(--f); letter-spacing:-.045em; color:var(--ink); max-width:23ch}
  @supports (animation-timeline: view()){
    .statement .w{color:var(--ink-4); animation:inkup linear both; animation-timeline:view(); animation-range:entry 60% cover 42%}
    @keyframes inkup{to{color:var(--ink)}}
  }

  /* ---------- night chapter (works without internet) ---------- */
  .night{background:var(--night); color:var(--night-3)}
  .night h2,.night h3{color:var(--night-ink)}
  .night .lead{color:var(--night-3)}
  .console{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px}
  .shell{padding:6px; border-radius:32px; background:rgb(255 255 255 / .04); box-shadow:inset 0 0 0 1px var(--night-hair)}
  .core{border-radius:26px; background:var(--night-card); box-shadow:inset 0 1px 0 rgb(255 255 255 / .07); padding:clamp(20px,3vw,34px); height:100%}
  .toggle-row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:24px; border-bottom:1px solid var(--night-hair); flex-wrap:wrap}
  .toggle-row b{display:block; font:600 22px/1.1 var(--f); letter-spacing:-.03em; color:var(--night-ink)}
  .toggle-row small{font-size:14px; color:var(--night-3)}
  .sw{position:relative; width:84px; height:48px; border-radius:999px; border:0; cursor:pointer; background:#30D158; transition:background .5s var(--spring); flex:none}
  .sw::after{content:""; position:absolute; top:4px; left:40px; width:40px; height:40px; border-radius:50%; background:#fff; box-shadow:0 3px 8px rgb(0 0 0 / .3); transition:left .6s var(--spring)}
  .sw[aria-checked="false"]{background:#3A3A3F} .sw[aria-checked="false"]::after{left:4px}
  .cps{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px}
  .cp{border-radius:22px; background:var(--night-2); padding:18px; display:grid; gap:6px}
  .cp .t{display:flex; justify-content:space-between; font-size:13px; color:#C9C9D1}
  .cp .v{font:600 30px/1.1 var(--f); letter-spacing:-.05em; color:#fff; margin-top:6px}
  .cp .k{font-size:12px; color:var(--night-3)}
  .cp .q{font:500 12px var(--mono); color:var(--amber); min-height:18px}
  .cp button{margin-top:8px; border:0; border-radius:999px; min-height:46px; background:#fff; color:#000; font:600 14px var(--f); cursor:pointer; transition:transform .4s var(--spring)}
  .cp button:active{transform:scale(.97)}
  .link{margin-top:20px; display:flex; align-items:center; gap:12px; font:500 12px var(--mono); color:var(--night-3)}
  .link .ln{flex:1; height:2px; border-radius:2px; background:#30D158; position:relative; overflow:hidden}
  .link .ln::after{content:""; position:absolute; inset:0; width:30%; background:linear-gradient(90deg,transparent,#fff,transparent); animation:flow 1.8s linear infinite}
  @keyframes flow{from{transform:translateX(-100%)} to{transform:translateX(340%)}}
  .off .link.net .ln{background:repeating-linear-gradient(90deg,#55555c 0 6px,transparent 6px 12px)}
  .off .link.net .ln::after{display:none}
  .capt{margin-top:20px; font-size:15px; color:#D1D1D6; min-height:48px; line-height:1.5}
  .n-phone{display:grid; place-items:center; padding:clamp(16px,3vw,28px)}
  .fine{margin-top:24px; font:400 12.5px/1.5 var(--mono); color:#6E6E73}
  @media (max-width:960px){ .console{grid-template-columns:1fr} }
  @media (max-width:520px){ .cps{grid-template-columns:1fr} }

  /* ---------- sticky phone story ---------- */
  .story{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,6vw,96px)}
  .step{min-height:74vh; display:flex; flex-direction:column; justify-content:center; gap:14px; padding-block:28px}
  .step .no{font:500 13px var(--mono); color:var(--ink-4)}
  .step h3{font-size:clamp(30px,2vw + 16px,46px); letter-spacing:-.05em; max-width:15ch; transition:color .6s var(--spring)}
  .step p{color:var(--ink-3); font-size:18px; max-width:40ch}
  .step ul{display:grid; gap:8px; margin-top:6px}
  .step li{display:flex; gap:10px; font-size:15.5px; color:var(--ink-2)}
  .step li::before{content:""; flex:none; width:6px; height:6px; margin-top:.62em; border-radius:50%; background:var(--brand)}
  .js .story .step:not(.act) h3{color:var(--ink-4)}
  .sticky{position:sticky; top:13vh; height:74vh; display:grid; place-items:center}
  .sticky .ph{--k:.8}
  .screens{position:relative; width:360px; height:780px}
  .screens > .app{position:absolute; inset:0; opacity:0; transition:opacity .7s var(--spring)}
  .screens > .app.on{opacity:1}
  .step-phone{display:none}
  @media (max-width:900px){
    .story{grid-template-columns:1fr} .sticky{display:none}
    .step{min-height:auto; padding-block:34px; border-top:1px solid var(--hair)}
    .js .story .step:not(.act) h3{color:var(--ink)}
    .step-phone{display:flex; justify-content:center; margin-top:16px}
    .step-phone .ph{--k:.72}
  }

  /* ---------- product duo ---------- */
  .duo{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .pcard{padding:6px; border-radius:36px; background:rgb(11 11 20 / .025); box-shadow:inset 0 0 0 1px var(--hair-2); text-decoration:none; color:inherit; display:block}
  .pcard > .in{height:100%; border-radius:30px; background:#fff; overflow:hidden; display:grid; grid-template-rows:auto 1fr; transition:box-shadow .6s var(--spring)}
  .pcard:hover > .in{box-shadow:var(--soft)}
  .pcard .txt{padding:clamp(26px,3vw,40px) clamp(26px,3vw,40px) 0; display:grid; gap:12px; align-content:start}
  .pcard .nm{font:600 13px/1 var(--f); color:var(--brand)}
  .pcard h3{font-size:clamp(28px,1.6vw + 18px,44px); letter-spacing:-.05em}
  .pcard p{color:var(--ink-3); max-width:40ch}
  .pcard .art{position:relative; height:clamp(320px,34vw,440px); overflow:hidden; margin-top:28px; background:radial-gradient(90% 80% at 50% 100%, #EFEDFB, transparent 70%)}
  .pcard.go-c .art{background:radial-gradient(90% 80% at 50% 100%, #FFF2D6, transparent 70%)}
  .pcard .art .shotframe{position:absolute; left:9%; top:40px; width:128%; transform:rotate(-2deg); transform-origin:top left}
  .pcard .art .ph{position:absolute; left:50%; top:36px; translate:-50% 0}
  .plinth:has(.fit.compact) .tag-ex{display:none}
  @media (max-width:860px){ .duo{grid-template-columns:1fr} }

  /* ---------- feature list blocks ---------- */
  .facts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid var(--hair)}
  .facts div{padding:26px 24px 0 0; display:grid; gap:6px}
  .facts b{font:600 clamp(20px,1vw + 14px,26px)/1.15 var(--f); letter-spacing:-.035em; color:var(--ink)}
  .facts span{font-size:15px; color:var(--ink-3)}
  @media (max-width:860px){ .facts{grid-template-columns:1fr 1fr; row-gap:22px} }
  @media (max-width:480px){ .facts{grid-template-columns:1fr} }

  .steps3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; counter-reset:s}
  .steps3 div{padding:28px; border-radius:28px; background:#fff; box-shadow:inset 0 0 0 1px var(--hair-2); display:grid; gap:10px; align-content:start; counter-increment:s}
  .steps3 div::before{content:counter(s); width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff; font:600 15px var(--f)}
  .steps3 b{font:600 20px/1.2 var(--f); letter-spacing:-.03em; color:var(--ink)}
  .steps3 span{font-size:15.5px; color:var(--ink-3)}
  @media (max-width:860px){ .steps3{grid-template-columns:1fr} }

  /* ---------- tour (real screenshots) ---------- */
  .tour-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px}
  .tour-tabs button{border:0; cursor:pointer; padding:10px 16px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px var(--hair); font:500 14px var(--f); color:var(--ink-2); transition:background .3s, color .3s}
  .tour-tabs button[aria-selected="true"]{background:var(--ink); color:#fff; box-shadow:none}
  .tour-cap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:18px; color:var(--ink-3); font-size:15.5px}
  .tour-cap b{color:var(--ink); font-weight:600}
  .tour-panel[hidden]{display:none}

  /* ---------- editions / pricing ---------- */
  .eds{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
  .ed{padding:6px; border-radius:32px; background:rgb(11 11 20 / .025); box-shadow:inset 0 0 0 1px var(--hair-2)}
  .ed > .in{height:100%; border-radius:26px; background:#fff; padding:30px; display:flex; flex-direction:column; gap:16px}
  .ed.feat > .in{background:var(--ink); color:#C9C9D1}
  .ed.feat h3, .ed.feat .price{color:#fff}
  .ed .nm{font:600 13px var(--f); color:var(--brand)}
  .ed.feat .nm{color:#A796FB}
  .ed h3{font-size:34px; letter-spacing:-.05em}
  .ed .for{color:var(--ink-3); min-height:3em}
  .ed.feat .for{color:#A1A1AA}
  .ed .price{font:600 26px/1.1 var(--f); letter-spacing:-.04em; color:var(--ink)}
  .ed .price small{display:block; font:400 13px var(--f); letter-spacing:0; color:var(--ink-3); margin-top:4px}
  .ed ul{display:grid; gap:10px; padding-top:16px; border-top:1px solid var(--hair)}
  .ed.feat ul{border-color:rgb(255 255 255 / .12)}
  .ed li{display:flex; gap:10px; font-size:15px}
  .ed li svg{width:18px; height:18px; flex:none; margin-top:2px; color:var(--good)}
  .ed.feat li svg{color:#30D158}
  .ed .btn{margin-top:auto; align-self:flex-start}
  @media (max-width:960px){ .eds{grid-template-columns:1fr} }
  .tbl{overflow-x:auto; border-radius:26px; background:#fff; box-shadow:inset 0 0 0 1px var(--hair-2)}
  .tbl table{width:100%; min-width:620px; border-collapse:collapse; font-size:15px}
  .tbl th,.tbl td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--hair-2)}
  .tbl thead th{font:600 14px var(--f); color:var(--ink); background:var(--bg)}
  .tbl td{text-align:center; color:var(--ink-2)}
  .tbl tbody th{font-weight:400; color:var(--ink-2)}
  .tbl .y{color:var(--good); font-weight:600} .tbl .n{color:var(--ink-4)}

  /* ---------- FAQ ---------- */
  .faq{display:grid; max-width:900px}
  .faq details{border-top:1px solid var(--hair)}
  .faq details:last-child{border-bottom:1px solid var(--hair)}
  .faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; font:500 clamp(18px,.5vw + 15px,21px)/1.3 var(--f); letter-spacing:-.025em; color:var(--ink)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:""; flex:none; width:30px; height:30px; border-radius:50%; background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%230B0B14' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat; transition:transform .5s var(--spring)}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq details > div{padding:0 0 24px; color:var(--ink-3); max-width:68ch; display:grid; gap:10px}
  .faq-search{display:flex; align-items:center; gap:12px; padding:0 18px; height:58px; border-radius:18px; background:#fff; box-shadow:inset 0 0 0 1px var(--hair), var(--lift); max-width:620px}
  .faq-search svg{width:18px; height:18px; color:var(--ink-3); flex:none}
  .faq-search input{flex:1; border:0; outline:none; background:transparent; font-size:17px; min-width:0}
  .faq-group{margin-top:56px}
  .faq-group > h2{font-size:clamp(24px,1vw + 18px,32px); letter-spacing:-.04em; margin-bottom:10px}
  .faq-empty{margin-top:24px; color:var(--ink-3)}

  /* ---------- forms ---------- */
  .form{display:grid; gap:16px}
  .field{display:grid; gap:7px}
  .field label{font:500 14px var(--f); color:var(--ink)}
  .field .hint{font-size:13px; color:var(--ink-3)}
  .field input, .field select, .field textarea{height:52px; border-radius:14px; border:0; background:#fff; box-shadow:inset 0 0 0 1px var(--hair), 0 1px 2px rgb(11 11 20 / .03); padding:0 16px; font-size:16px; color:var(--ink); transition:box-shadow .3s}
  .field textarea{height:auto; min-height:110px; padding:14px 16px; resize:vertical}
  .field input:focus, .field select:focus, .field textarea:focus{outline:none; box-shadow:inset 0 0 0 2px var(--brand)}
  .field .err{font-size:13px; color:var(--bad); min-height:1em}
  .field input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--bad)}
  .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  @media (max-width:640px){ .row2{grid-template-columns:1fr} }
  .chips-pick{display:flex; flex-wrap:wrap; gap:8px}
  .chips-pick label{position:relative}
  .chips-pick input{position:absolute; opacity:0; inset:0}
  .chips-pick span{display:inline-block; padding:11px 16px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px var(--hair); font-size:15px; cursor:pointer; transition:background .3s, color .3s}
  .chips-pick input:checked + span{background:var(--ink); color:#fff; box-shadow:none}
  .chips-pick input:focus-visible + span{outline:2px solid var(--brand); outline-offset:2px}

  /* ---------- CTA band + footer ---------- */
  .final{padding-block:clamp(110px,15vw,200px)}
  .final h2{max-width:13ch}
  .final p{margin-top:24px}
  .final .ctas{margin-top:36px}
  footer.site{border-top:1px solid var(--hair); padding-block:56px 48px; font-size:14px; color:var(--ink-3); background:var(--bg)}
  .fgrid{display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:28px}
  .fgrid h6{font:600 13px var(--f); color:var(--ink); margin-bottom:14px}
  .fgrid a{display:block; padding:5px 0; text-decoration:none; color:var(--ink-3); transition:color .2s}
  .fgrid a:hover{color:var(--ink)}
  .fgrid .about p{margin-top:16px; max-width:32ch}
  .fine-print{margin-top:44px; padding-top:22px; border-top:1px solid var(--hair); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px}
  @media (max-width:900px){ .fgrid{grid-template-columns:1fr 1fr} .fgrid .about{grid-column:1/-1} }

  /* ---------- page hero (inner pages) ---------- */
  .phero{padding-top:clamp(64px,9vw,120px); padding-bottom:clamp(40px,6vw,80px)}
  .phero h1{margin-top:16px}
  .phero .lead{margin-top:24px}
  .phero .ctas{margin-top:32px}
  .subnav{position:sticky; top:calc(84px + env(safe-area-inset-top,0px)); z-index:30; margin-top:clamp(24px,4vw,48px)}
  .subnav .in{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding:5px; border-radius:999px; background:rgb(255 255 255 / .8); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:inset 0 0 0 1px var(--hair); width:max-content; max-width:100%}
  .subnav .in::-webkit-scrollbar{display:none}
  .subnav a{flex:none; padding:9px 15px; border-radius:999px; font-size:14px; text-decoration:none; color:var(--ink-2); transition:background .3s, color .3s}
  .subnav a.on{background:var(--ink); color:#fff}

  /* ---------- legal ---------- */
  .legal{max-width:760px}
  .legal h2{font-size:26px; letter-spacing:-.035em; margin:44px 0 12px}
  .legal p, .legal li{color:var(--ink-2); line-height:1.7}
  .legal ul{list-style:disc; padding-left:22px; display:grid; gap:6px; margin-top:8px}
  .legal p + p{margin-top:12px}
  .draft{display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:16px; background:var(--amber-tint); color:#6B4300; font-size:14.5px; margin-top:24px}

  /* ---------- toast ---------- */
  .toast{position:fixed; z-index:60; left:50%; bottom:26px; transform:translate(-50%,170%); padding:13px 20px; border-radius:999px; background:var(--ink); color:#fff; font-size:14px; transition:transform .6s var(--spring); max-width:calc(100% - 32px); text-align:center}
  .toast.show{transform:translate(-50%,0); opacity:1; visibility:visible}
  .toast{opacity:0; visibility:hidden; transition:transform .6s var(--spring), opacity .3s, visibility .3s}
}

/* =====================================================================
   APP RECREATIONS — values copied from each app's own source
   ===================================================================== */
@layer apps {
  /* ---------- StoqBox Enterprise (desktop, Inter, POS primary #0066FF) ---------- */
  .dk{--dk-blue:#0066FF; --dk-ink:#1D1D1F; --dk-2:#6E6E73; --dk-3:#AEAEB2; --dk-bg:#F5F5F7; --dk-line:rgba(0,0,0,.07); font:400 16px/1.4 "Inter", "Segoe UI", sans-serif; color:var(--dk-ink); background:var(--dk-bg); display:grid; grid-template-columns:268px 1fr; letter-spacing:0}
  .dk .side{background:#fff; border-right:1px solid var(--dk-line); display:flex; flex-direction:column}
  .dk .side .brand{display:flex; align-items:center; gap:10px; padding:26px 22px 24px; border-bottom:1px solid var(--dk-line); font:700 20px/1 var(--wordmark); letter-spacing:-.04em}
  .dk .side .brand svg{width:30px; height:30px}
  .dk .nav{display:grid; gap:4px; padding:14px 10px}
  .dk .nav span{display:flex; align-items:center; gap:16px; padding:13px 14px; border-radius:10px; font-size:17px; color:#2B2B30; position:relative}
  .dk .nav span svg{width:24px; height:24px; color:#5F6066}
  .dk .nav span.on{background:#5B3AE6; color:#fff}
  .dk .nav span.on svg{color:#fff}
  .dk .nav .badge{position:absolute; left:28px; top:4px; min-width:22px; height:22px; border-radius:11px; background:#E5484D; color:#fff; font:600 11px/22px "Inter"; text-align:center; padding:0 5px}
  .dk .main{padding:28px 30px; display:flex; flex-direction:column; gap:18px; min-width:0}
  .dk .panel{background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)}
  .dk .ptitle{display:flex; align-items:center; gap:16px; padding:24px 28px 16px; font:500 30px/1.1 "Inter"; letter-spacing:-.01em}
  .dk .ptitle svg{width:36px; height:36px; color:var(--dk-blue)}
  .dk .ptabs{display:flex; align-items:center; gap:10px; padding:0 28px 18px}
  .dk .ptabs .tabA{display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 18px; border-radius:10px; background:var(--dk-blue); color:#fff; font-weight:600; font-size:18px}
  .dk .ptabs .tabA i{font-style:normal; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:rgb(255 255 255 / .3); font-size:12px}
  .dk .ptabs .tabP{width:46px; height:46px; border-radius:10px; border:1px solid var(--dk-line); display:grid; place-items:center; color:var(--dk-blue)}
  .dk .ptabs .tabP svg{width:20px; height:20px}
  .dk .ptabs .sp{margin-left:auto; display:flex; gap:12px}
  .dk .ptabs .ghost{display:inline-flex; align-items:center; gap:10px; height:50px; padding:0 20px; border-radius:10px; border:1px solid var(--dk-line); font-size:17px}
  .dk .ptabs .ghost svg{width:20px; height:20px}
  .dk .work{display:grid; grid-template-columns:1fr 400px; gap:22px; flex:1; min-height:0}
  .dk .search{height:58px; border-radius:12px; border:2px solid var(--dk-blue); background:#fff; display:flex; align-items:center; gap:14px; padding:0 20px; font-size:18px; color:var(--dk-3)}
  .dk .search svg{width:22px; height:22px; color:var(--dk-2)}
  .dk .cart{margin-top:18px; background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.06); overflow:hidden}
  .dk .cart-h{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; font:600 20px "Inter"}
  .dk .cart-h > span{display:flex; align-items:center; gap:12px}
  .dk .cart-h svg{width:24px; height:24px; color:var(--dk-blue)}
  .dk .cart-h .clear{display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px; border-radius:10px; border:1px solid #FFD2CF; color:#FF3B30; font:500 16px "Inter"}
  .dk .cart-h .clear svg{width:18px; height:18px; color:#FF3B30}
  .dk table.ct{width:100%; border-collapse:collapse; font-size:17px}
  .dk table.ct th{font:500 15px "Inter"; text-transform:uppercase; letter-spacing:.02em; color:var(--dk-2); background:#F5F5F7; padding:13px 18px; text-align:left}
  .dk table.ct td{padding:14px 18px; border-bottom:1px solid var(--dk-line); vertical-align:middle}
  .dk table.ct td small{display:block; color:var(--dk-2); font-size:14px; margin-top:4px}
  .dk table.ct .r{text-align:right}
  .dk .qty{display:inline-flex; align-items:center; gap:14px}
  .dk .qty i{width:34px; height:34px; border-radius:8px; border:1px solid var(--dk-line); display:grid; place-items:center; color:var(--dk-blue); font-style:normal; font-size:20px}
  .dk .rows-empty{padding:30px 22px; color:var(--dk-3)}
  .dk .summary{display:grid; gap:18px; align-content:start}
  .dk .cinfo{background:#fff; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.06); padding:22px 26px; display:flex; justify-content:space-between; font:500 18px "Inter"}
  .dk .osum{background:#fff; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.06); padding:24px 26px; display:grid; gap:14px}
  .dk .osum h4{font:500 22px "Inter"; letter-spacing:-.01em; color:var(--dk-ink); padding-bottom:12px; border-bottom:1px solid var(--dk-line)}
  .dk .osum .l{display:flex; justify-content:space-between; font-size:18px}
  .dk .osum .tot{display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; border-top:1px solid var(--dk-line); font:700 26px "Inter"}
  .dk .osum .tot b{font:700 34px "Inter"; color:var(--dk-blue)}
  .dk .pay{height:72px; border:0; border-radius:14px; background:var(--dk-blue); color:#fff; font:600 22px "Inter"; display:flex; align-items:center; justify-content:center; gap:14px; cursor:pointer; width:100%}
  .dk .pay svg{width:24px; height:24px}
  .dk .pay:hover{background:#0A5CE6}
  .dk .methods{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
  .dk .methods button{height:46px; border-radius:10px; border:1px solid var(--dk-line); background:#fff; font:500 16px "Inter"; cursor:pointer; color:var(--dk-ink)}
  .dk .methods button[aria-pressed="true"]{border-color:var(--dk-blue); color:var(--dk-blue); background:#EEF4FF}
  .dk .keys{display:flex; justify-content:space-between; padding:14px 4px 0; font-size:15px; color:var(--dk-2)}
  .dk .keys b{color:var(--dk-ink); font-weight:600}
  .dk .quick{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:16px}
  .dk .quick button{border:1px solid var(--dk-line); background:#fff; border-radius:12px; padding:12px; text-align:left; cursor:pointer; display:grid; gap:4px; font:500 15px "Inter"; color:var(--dk-ink); transition:border-color .2s, transform .3s var(--spring)}
  .dk .quick button:hover{border-color:var(--dk-blue)}
  .dk .quick button:active{transform:scale(.97)}
  .dk .quick span{font-size:14px; color:var(--dk-2)}
  .dk .modal{position:absolute; inset:0; background:rgb(0 0 0 / .45); display:none; place-items:center}
  .dk .modal.show{display:grid}
  .dk .modal .box{width:760px; background:#fff; border-radius:22px; padding:34px; display:grid; gap:22px; text-align:center}
  .dk .modal .ok{font:700 34px "Inter"; color:#00C853}
  .dk .modal .row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .dk .modal .row span{height:56px; border-radius:10px; border:1px solid var(--dk-line); display:flex; align-items:center; justify-content:center; gap:10px; font-size:18px}
  .dk .modal button{height:58px; border:0; border-radius:10px; background:var(--dk-blue); color:#fff; font:600 19px "Inter"; cursor:pointer}

  /* customer display (second screen) */
  .cdisp{width:1280px; height:720px; background:#0B0B14; color:#fff; font-family:"Inter", sans-serif; display:grid; grid-template-columns:1.2fr 1fr}
  .cdisp .promo{background:radial-gradient(120% 120% at 0% 0%, #7358F0, #2A1C7A); padding:56px; display:flex; flex-direction:column; justify-content:flex-end; gap:12px}
  .cdisp .promo b{font:700 64px/1 "Inter"; letter-spacing:-.03em}
  .cdisp .promo span{font-size:24px; opacity:.85}
  .cdisp .live{padding:40px; display:flex; flex-direction:column; gap:14px}
  .cdisp .live h5{font:600 22px "Inter"; color:#A1A1AA}
  .cdisp .live div{display:flex; justify-content:space-between; font-size:24px; padding:12px 0; border-bottom:1px solid rgb(255 255 255 / .1)}
  .cdisp .live .tt{margin-top:auto; font:700 52px "Inter"; border:0; color:#FFB020}

  /* ---------- StoqBox Owner app (Plus Jakarta Sans; app/src/design/tokens.ts) ---------- */
  .oa{--g:#F5F6FA; --c:#fff; --i:#0E1020; --im:#6A6E84; --is:#4A5560; --hl:#E7E8F0; --ac:#5B3AE6; --at:#EFEBFF; --up:#0A7A54; --upt:#E3F6EE; --dn:#BF3447; --dnt:#FCE9EC; --wn:#B45309; --wnt:#FFF3DC; --fr:#0B6E4F; --frt:#E6F5EE; --sl:#0F766E;
    width:360px; height:780px; background:var(--g); color:var(--i); font:400 16px/1.35 "Plus Jakarta Sans", "Geist", sans-serif; display:flex; flex-direction:column; letter-spacing:0; position:relative}
  .oa .sb{height:44px; flex:none; display:flex; justify-content:space-between; align-items:flex-end; padding:0 28px 6px; font:600 14px "Plus Jakarta Sans"; color:var(--i)}
  .oa .body{flex:1; overflow:hidden; padding:4px 16px 16px; display:flex; flex-direction:column; gap:10px}
  .oa .hdr{display:grid; gap:2px; padding-top:4px}
  .oa .hrow{display:flex; justify-content:space-between; align-items:center; margin-bottom:4px}
  .oa .av{width:44px; height:44px; border-radius:12px; background:var(--at); color:var(--ac); display:grid; place-items:center; font:800 14px "Plus Jakarta Sans"}
  .oa .acts{display:flex; gap:0; margin-right:-6px}
  .oa .acts i{width:44px; height:44px; display:grid; place-items:center; color:var(--i); position:relative}
  .oa .acts i svg{width:22px; height:22px}
  .oa .acts i.dot::after{content:""; position:absolute; top:10px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--dn); border:2px solid var(--g)}
  .oa .greet{font:600 14px "Plus Jakarta Sans"; color:var(--is)}
  .oa .name{font:800 22px/1.25 "Plus Jakarta Sans"; color:var(--i)}
  .oa .fresh{justify-self:start; margin-top:6px; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--frt); color:var(--fr); font:700 12px "Plus Jakarta Sans"}
  .oa .fresh::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
  .oa .fresh.stale{background:var(--wnt); color:var(--wn)}
  .oa .ttl{font:800 22px/1.2 "Plus Jakarta Sans"; padding-top:4px}
  .oa .hero{display:grid; gap:2px; padding-top:6px}
  .oa .hl{font:600 14px "Plus Jakarta Sans"; color:var(--im)}
  .oa .hf{font:800 34px/1.15 "Plus Jakarta Sans"; letter-spacing:-.5px; font-variant-numeric:tabular-nums}
  .oa .det{display:flex; align-items:center; gap:8px; margin-top:2px; font-size:12px; color:var(--im)}
  .oa .chip{display:inline-flex; align-items:center; gap:3px; padding:3px 8px; border-radius:999px; font:700 12px "Plus Jakarta Sans"; font-variant-numeric:tabular-nums}
  .oa .chip.up{background:var(--upt); color:var(--up)} .oa .chip.dn{background:var(--dnt); color:var(--dn)} .oa .chip.wn{background:var(--wnt); color:var(--wn)} .oa .chip.nt{background:#EEF0F4; color:var(--is)}
  .oa .chart{height:120px; margin-top:4px}
  .oa .axis{display:flex; justify-content:space-between; font-size:11px; color:var(--im); padding:0 2px}
  .oa .ranges{display:flex; gap:4px}
  .oa .ranges span{flex:1; text-align:center; padding:7px 0; border-radius:10px; font:700 14px "Plus Jakarta Sans"; color:var(--im)}
  .oa .ranges span.on{background:var(--at); color:var(--ac)}
  .oa .cells{display:flex; gap:8px}
  .oa .cell{flex:1; min-width:0; background:var(--c); border-radius:14px; padding:10px 12px; display:grid; gap:2px}
  .oa .cell small{font:600 12px "Plus Jakarta Sans"; color:var(--im)}
  .oa .cell b{font:800 17px "Plus Jakarta Sans"; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .oa .card{background:var(--c); border-radius:18px; padding:16px}
  .oa .card.flush{padding:0}
  .oa .clabel{font:600 14px "Plus Jakarta Sans"; color:var(--im)}
  .oa .cfig{font:800 24px/1.2 "Plus Jakarta Sans"; font-variant-numeric:tabular-nums}
  .oa .crow{display:flex; align-items:center; gap:14px}
  .oa .ring{width:54px; height:54px; flex:none}
  .oa .sh{display:flex; justify-content:space-between; align-items:center; padding:6px 2px 0}
  .oa .sh b{font:800 16px "Plus Jakarta Sans"}
  .oa .sh span{font:700 14px "Plus Jakarta Sans"; color:var(--ac)}
  .oa .li{display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid var(--hl)}
  .oa .li:first-child{border-top:0}
  .oa .li .lq{width:40px; height:40px; border-radius:14px; background:var(--at); color:var(--ac); display:grid; place-items:center; flex:none}
  .oa .li .lq svg{width:20px; height:20px}
  .oa .li .lq.w{background:var(--wnt); color:var(--wn)} .oa .li .lq.r{background:var(--dnt); color:var(--dn)} .oa .li .lq.g{background:var(--upt); color:var(--up)}
  .oa .li .lt{flex:1; min-width:0}
  .oa .li .lt b{display:block; font:700 15px/1.3 "Plus Jakarta Sans"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .oa .li .lt span{font-size:12.5px; color:var(--im)}
  .oa .li .la{font:800 15px "Plus Jakarta Sans"; font-variant-numeric:tabular-nums; text-align:right}
  .oa .li .la small{display:block; font:600 11.5px "Plus Jakarta Sans"; color:var(--im)}
  .oa .seg{display:flex; background:#ECEDF3; border-radius:12px; padding:3px}
  .oa .seg span{flex:1; text-align:center; padding:8px 0; border-radius:10px; font:700 14px "Plus Jakarta Sans"; color:var(--im)}
  .oa .seg span.on{background:#fff; color:var(--i); box-shadow:0 1px 2px rgb(0 0 0 / .08)}
  .oa .tabs{flex:none; display:flex; background:var(--c); border-top:1px solid var(--hl); padding:4px 0 18px}
  .oa .tabs span{flex:1; display:grid; justify-items:center; gap:3px; font:500 12px "Plus Jakarta Sans"; color:var(--im); min-height:60px; align-content:center}
  .oa .tabs span i{width:60px; height:34px; border-radius:17px; display:grid; place-items:center; position:relative}
  .oa .tabs span i svg{width:22px; height:22px}
  .oa .tabs span.on{color:var(--ac); font-weight:700}
  .oa .tabs span.on i{background:var(--at)}
  .oa .tabs .bdg{position:absolute; top:-3px; right:4px; min-width:20px; height:20px; padding:0 4px; border-radius:10px; background:var(--dn); color:#fff; border:2px solid #fff; font:700 11px/16px "Plus Jakarta Sans"; text-align:center}
  .oa .push{position:absolute; left:10px; right:10px; top:60px; z-index:4; padding:12px 14px; border-radius:20px; display:flex; gap:12px; align-items:center; background:rgb(255 255 255 / .96); box-shadow:0 18px 34px -12px rgb(14 16 32 / .4), 0 0 0 1px var(--hl); transform:translateY(-150%); opacity:0; transition:transform .7s var(--spring), opacity .4s}
  .oa .push.show{transform:none; opacity:1}
  .oa .push svg{width:30px; height:30px; flex:none}
  .oa .push b{display:block; font:700 14px "Plus Jakarta Sans"}
  .oa .push span{font-size:12.5px; color:var(--im)}
  .oa .bar2{height:8px; border-radius:6px; background:#EEF0F4; overflow:hidden; display:flex}
  .oa .bar2 i{display:block; height:100%; border-radius:6px}

  /* ---------- StoqBox Go (Inter; src/theme/*) ---------- */
  .gx{--p50:#EEEBFE; --p100:#DAD4FD; --p500:#5B3AE6; --p600:#4A2BD1; --p700:#3B21A8; --p800:#2C1880; --i9:#0F1024; --i7:#2B2C45; --i5:#5A5B75; --i4:#8A8BA3; --hl:#E7E7E7; --cv:#F8F8FB; --g5:#17B26A; --g1:#D6F5E6; --r5:#E5484D; --r1:#FCE4E5; --o5:#F79009; --o1:#FEF0DC; --b5:#2E90FA; --a5:#FFB020; --a6:#E08900;
    width:360px; height:780px; background:var(--cv); color:var(--i9); font:400 16px/22px "Inter", "Geist", sans-serif; display:flex; flex-direction:column; letter-spacing:0; position:relative}
  .gx .sb{height:44px; flex:none; display:flex; justify-content:space-between; align-items:flex-end; padding:0 28px 6px; font:600 14px "Inter"; color:var(--i9)}
  .gx .sb.lt{color:#fff}
  .gx .ghead{background:linear-gradient(180deg,var(--p600),var(--p800)); color:#fff; border-radius:0 0 20px 20px; padding:0 16px 48px; display:grid; gap:8px}
  .gx .ghead .sb{padding:0 12px 6px; color:#fff}
  .gx .gtop{display:flex; align-items:center; gap:8px}
  .gx .gtop .who{flex:1}
  .gx .gtop .who b{display:block; font:600 20px/26px "Inter"}
  .gx .gtop .who span{font:400 14px/20px "Inter"; opacity:.8}
  .gx .gtop i{width:48px; height:48px; display:grid; place-items:center; position:relative}
  .gx .gtop i svg{width:24px; height:24px; color:#fff}
  .gx .gtop i.dot::after{content:""; position:absolute; top:12px; right:12px; width:8px; height:8px; border-radius:50%; background:var(--r5)}
  .gx .gtop .avt{width:36px; height:36px; border-radius:50%; background:rgb(255 255 255 / .18); display:grid; place-items:center; font:600 14px "Inter"}
  .gx .per{display:flex; gap:18px; font:500 14px "Inter"; color:rgb(255 255 255 / .62); margin-top:8px}
  .gx .per span{padding-bottom:6px; position:relative}
  .gx .per span.on{color:#fff}
  .gx .per span.on::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:2px; background:#fff}
  .gx .hrow{display:flex; align-items:flex-end; gap:12px; min-height:48px}
  .gx .hfig{font:700 24px/30px "Inter"; font-variant-numeric:tabular-nums}
  .gx .chg{display:inline-flex; align-items:center; gap:4px; background:var(--p800); border-radius:999px; padding:4px 12px; font:500 12px/16px "Inter"; margin-bottom:4px}
  .gx .tiles{display:flex; background:var(--p700); border-radius:16px; padding:12px 16px; margin-top:8px}
  .gx .tiles div{flex:1; display:grid; gap:2px}
  .gx .tiles div + div{border-left:1px solid rgb(255 255 255 / .16); padding-left:14px}
  .gx .tiles small{font:500 12px/16px "Inter"; opacity:.75}
  .gx .tiles b{font:600 15px/20px "Inter"; font-variant-numeric:tabular-nums}
  .gx .gbody{flex:1; overflow:hidden; padding:0 16px 16px; display:flex; flex-direction:column; gap:12px; margin-top:-24px}
  .gx .gbody.flat{margin-top:0; padding-top:4px}
  .gx .card{background:#fff; border-radius:16px; box-shadow:0 1px 2px rgb(15 16 36 / .05), 0 4px 12px -4px rgb(15 16 36 / .08); padding:16px}
  .gx .card.flush{padding:0}
  .gx .alert{display:flex; gap:10px; align-items:center; padding:12px 14px; font:500 14px/20px "Inter"}
  .gx .alert + .alert{border-top:.5px solid var(--hl)}
  .gx .alert i{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:none}
  .gx .alert i svg{width:16px; height:16px}
  .gx .h3{font:600 17px/22px "Inter"; color:var(--i9)}
  .gx .qa{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
  .gx .qa div{display:grid; justify-items:center; gap:6px; text-align:center; font:500 12px/16px "Inter"; color:var(--i7)}
  .gx .qa div i{width:100%; aspect-ratio:1.15; border-radius:16px; background:var(--p50); display:grid; place-items:center; color:var(--p600)}
  .gx .qa div i svg{width:24px; height:24px}
  .gx .shd{display:flex; justify-content:space-between; align-items:center}
  .gx .shd span{font:500 16px "Inter"; color:var(--p600)}
  .gx .row{display:flex; align-items:center; gap:12px; padding:12px 16px}
  .gx .row + .row{border-top:.5px solid var(--hl); margin-left:16px; padding-left:0}
  .gx .row .dotp{width:8px; height:8px; border-radius:50%; flex:none}
  .gx .row .t{flex:1; min-width:0}
  .gx .row .t b{display:block; font:500 15px/20px "Inter"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .gx .row .t span{font:400 13px/18px "Inter"; color:var(--i5)}
  .gx .row .a{font:600 15px "Inter"; font-variant-numeric:tabular-nums; text-align:right}
  .gx .row .a small{display:block; font:400 12px "Inter"; color:var(--i5)}
  .gx .pill{display:inline-block; padding:2px 8px; border-radius:999px; font:600 11.5px/16px "Inter"}
  .gx .pill.cr{background:var(--r1); color:#B42318} .gx .pill.ok{background:var(--g1); color:#067647} .gx .pill.lo{background:var(--o1); color:#B54708}
  .gx .two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .gx .two small{display:block; font:500 12px/16px "Inter"; color:var(--i5)}
  .gx .two b{display:block; font:700 20px/26px "Inter"; font-variant-numeric:tabular-nums; margin-top:2px}
  .gx .two span{font:400 13px "Inter"; color:var(--i5)}
  .gx .ttl{font:700 24px/30px "Inter"; padding:4px 16px 0}
  .gx .sub{font:400 14px/20px "Inter"; color:var(--i5); padding:0 16px}
  .gx .search{height:48px; border-radius:24px; background:#F1F1F6; display:flex; align-items:center; gap:10px; padding:0 16px; font:400 16px "Inter"; color:var(--i4)}
  .gx .search svg{width:20px; height:20px}
  .gx .chips{display:flex; gap:8px; overflow:hidden}
  .gx .chips span{flex:none; padding:7px 14px; border-radius:999px; background:#fff; font:500 14px "Inter"; color:var(--i7); box-shadow:0 1px 2px rgb(15 16 36 / .06)}
  .gx .chips span.on{background:var(--p500); color:#fff}
  .gx .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
  .gx .tile{background:#fff; border-radius:16px; padding:10px; display:grid; gap:6px; box-shadow:0 1px 2px rgb(15 16 36 / .05)}
  .gx .tile i{height:52px; border-radius:12px; display:grid; place-items:center; font:700 15px "Inter"; color:#fff; font-style:normal}
  .gx .tile b{font:500 13px/17px "Inter"; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:34px}
  .gx .tile span{font:600 13px "Inter"; color:var(--i7); font-variant-numeric:tabular-nums}
  .gx .tile.in{box-shadow:0 0 0 2px var(--p500)}
  .gx .actbar{margin-top:auto; background:#fff; padding:12px 16px 14px; box-shadow:0 -6px 16px -10px rgb(15 16 36 / .2)}
  .gx .actbar .btn-p{height:48px; border-radius:24px; background:var(--p500); color:#fff; display:flex; align-items:center; justify-content:center; font:600 17px "Inter"}
  .gx .tabs{flex:none; height:64px; display:flex; background:#fff; border-top:.5px solid var(--hl); padding-bottom:6px}
  .gx .tabs span{flex:1; display:grid; justify-items:center; align-content:center; gap:3px; font:500 12px/16px "Inter"; color:var(--i4)}
  .gx .tabs span svg{width:24px; height:24px}
  .gx .tabs span.on{color:var(--p600)}
  .gx .tabs span.sell i{width:48px; height:32px; border-radius:16px; background:var(--p500); color:#fff; display:grid; place-items:center}
  .gx .tabs span.sell i svg{width:20px; height:20px}
  .gx .tabs span.sell{color:var(--p600); font-weight:600}
  .gx .tone{display:flex; gap:6px}
  .gx .tone button{flex:1; height:40px; border:0; border-radius:20px; background:#fff; font:500 14px "Inter"; color:var(--i7); cursor:pointer; box-shadow:0 1px 2px rgb(15 16 36 / .08)}
  .gx .tone button[aria-pressed="true"]{background:var(--p500); color:#fff}
  .gx .bubble{background:#DCF8C6; color:#111B21; border-radius:12px 12px 2px 12px; padding:12px 14px; font:400 14.5px/21px "Inter"; white-space:pre-line; box-shadow:0 1px 1px rgb(0 0 0 / .1)}
  .gx .lbl{font:500 13px/18px "Inter"; color:var(--i5)}
  .gx .ach{border-radius:16px; padding:16px; background:linear-gradient(135deg,#FFB020,#E08900); color:#2A1A00; display:grid; gap:6px}
  .gx .ach b{font:700 20px/26px "Inter"}
  .gx .poster{background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgb(15 16 36 / .06)}
  .gx .poster .ph1{background:var(--p600); color:#fff; padding:14px 16px; font:700 18px "Inter"}
  .gx .poster .gr{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px}
  .gx .poster .gr div{border-radius:12px; background:var(--cv); padding:8px; display:grid; gap:4px; font:500 12.5px "Inter"}
  .gx .poster .gr i{height:62px; border-radius:8px; display:block}
  .gx .poster .ft{padding:8px 14px 12px; font:500 11px "Inter"; color:var(--i4); text-align:right}
}


/* =====================================================================
   PAGE LAYOUTS
   ===================================================================== */
@layer pages {
  /* home hero */
  .hero-top{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(24px,5vw,80px); align-items:end}
  .hero-top .side{display:grid; gap:28px; padding-bottom:12px}
  @media (max-width:900px){ .hero-top{grid-template-columns:1fr} }
  .hero-scene .hero-mon{position:absolute; left:170px; top:40px}
  .hero-scene .hero-go{position:absolute; left:20px; top:236px; z-index:2}
  .hero-scene .hero-oa{position:absolute; left:1000px; top:128px; z-index:3}
  .compact .hero-scene .hero-mon{display:none}
  .compact .hero-scene .hero-go{left:24px; top:96px}
  .compact .hero-scene .hero-oa{left:306px; top:32px}

  /* enterprise hero scene */
  .ent-scene .ent-mon{position:absolute; left:40px; top:40px}
  .ent-scene .ent-rcpt{position:absolute; left:14px; top:440px; width:232px; z-index:2; transform:rotate(-4deg); filter:drop-shadow(0 22px 26px rgb(11 11 20 / .2))}
  .ent-scene .ent-oa{position:absolute; left:990px; top:150px; z-index:3}
  .compact .ent-scene .ent-mon{display:none}
  .compact .ent-scene .ent-rcpt{left:24px; top:70px; transform:rotate(-3deg)}
  .compact .ent-scene .ent-oa{left:300px; top:40px}

  .split-2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:center}
  .phones-2{display:flex; justify-content:center; gap:20px}
  .phones-2 .ph:nth-child(2){margin-top:80px}
  @media (max-width:960px){ .split-2{grid-template-columns:minmax(0,1fr)} }
  @media (max-width:640px){ .phones-2 .ph{--k:.5 !important} .phones-2{gap:12px} .phones-2 .ph:nth-child(2){margin-top:48px} }
  @media (max-width:480px){ .phones-2 .ph{--k:.42 !important} .phones-2{gap:0} .phones-2 .ph:nth-child(2){margin-left:-20px} }
  .ticks{display:grid; gap:14px}
  .ticks li{position:relative; padding-left:34px; color:var(--ink-3); font-size:16px}
  .ticks li::before{content:""; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%; background:var(--good-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230A7A54' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; margin-top:1px}
  .ticks b{color:var(--ink); font-weight:500}

  .go-band{background:var(--bg-2); border-radius:clamp(32px,5vw,64px); margin-inline:clamp(8px,1.4vw,20px)}
  .fan{display:flex; justify-content:center; align-items:flex-end; gap:clamp(12px,2.4vw,36px); margin-top:clamp(40px,6vw,72px)}
  @media (max-width:820px){ .fan .ph:not(:nth-child(2)){display:none} .fan .ph{--k:.8 !important} }

  /* go page */
  .go-hero{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,5vw,64px); align-items:center}
  .go-hero .lead{margin-top:24px}
  .go-hero .ctas{margin-top:32px}
  .soon{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; color:var(--ink-3)}
  .badges-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}
  .badges-row span{padding:8px 14px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px var(--hair); font-size:14px; color:var(--ink-2)}
  .go-stage{position:relative; height:calc(780px * .8 + 40px); display:flex; justify-content:center}
  .go-stage .front{position:relative; z-index:2; margin-left:120px; margin-top:20px}
  .go-stage .back{position:absolute; left:calc(50% - 300px); top:80px; transform:rotate(-6deg); opacity:.98}
  @media (max-width:1000px){ .go-hero{grid-template-columns:1fr} .go-stage{height:auto; padding-bottom:20px} .go-stage .back{display:none} .go-stage .front{margin:12px 0 0} }
  @media (max-width:420px){ .go-stage .front{--k:.74 !important} }

  .ico-t{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:var(--brand-tint); color:var(--brand)}
  .ico-t svg{width:22px; height:22px}
  .facts.dark{border-color:var(--night-hair)}
  .facts.dark b{color:var(--night-ink)} .facts.dark span{color:var(--night-3)}
  .who-grid{display:flex; flex-wrap:wrap; gap:10px}
  .who-grid span{padding:14px 20px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px var(--hair); font:500 clamp(16px,.6vw + 13px,20px) var(--f); letter-spacing:-.02em; color:var(--ink)}

  /* pricing */
  .center-head{text-align:center; display:grid; justify-items:center}
  .go-free{margin-top:16px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:center; padding:clamp(24px,4vw,48px); border-radius:32px; background:var(--amber-tint)}
  .go-free .ph{margin-bottom:calc(-1 * clamp(24px,4vw,48px)); align-self:end}
  @media (max-width:760px){ .go-free{grid-template-columns:1fr} .go-free .ph{display:none} }

  /* help */
  .checklist{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:16px}
  .checklist div{padding:22px; border-radius:22px; background:#fff; box-shadow:inset 0 0 0 1px var(--hair-2); display:grid; gap:6px}
  .checklist svg{width:24px; height:24px; color:var(--brand); margin-bottom:6px}
  .checklist b{font-weight:600; color:var(--ink)} .checklist span{font-size:15px; color:var(--ink-3)}
  @media (max-width:860px){ .checklist{grid-template-columns:1fr 1fr} }
  @media (max-width:520px){ .checklist{grid-template-columns:1fr} }

  /* about */
  .story-text{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,6vw,96px)}
  .prose{display:grid; gap:18px; font-size:clamp(17px,.5vw + 14px,20px); line-height:1.6; color:var(--ink-2); max-width:62ch}
  .prose a{color:var(--brand)}
  @media (max-width:860px){ .story-text{grid-template-columns:1fr} }

  /* contact */
  .ways{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
  .way{padding:28px; border-radius:28px; background:#fff; box-shadow:inset 0 0 0 1px var(--hair-2), var(--lift); display:grid; gap:8px; align-content:start}
  .way h3{font-size:24px; margin-top:8px}
  .way p{color:var(--ink-3); font-size:15px}
  .way b, .way a.num{font:500 18px var(--f); color:var(--ink); margin-top:8px}
  .way a.num{text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--hair-2); justify-self:start; min-height:48px; display:inline-flex; align-items:center}
  @media (max-width:860px){ .ways{grid-template-columns:1fr} }
  .contact-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,6vw,88px); align-items:start}
  @media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }
  .card-form{padding:clamp(22px,3vw,36px); border-radius:30px; background:var(--bg-2)}
  .out{display:grid; gap:10px; padding:20px; border-radius:20px; background:#fff; box-shadow:inset 0 0 0 1px var(--hair)}
  .out p{font-size:14.5px; color:var(--ink-3)}
  .out pre{margin:0; white-space:pre-wrap; font:400 14px/1.55 var(--mono); color:var(--ink); background:var(--bg); padding:14px; border-radius:12px}
}

@layer utils {
  .center{text-align:center}
  .mt-s{margin-top:16px} .mt-m{margin-top:32px} .mt-l{margin-top:56px}
  .hide{display:none !important}
  @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important} html{scroll-behavior:auto} .statement .w{animation:none !important; color:var(--ink) !important} }
}