/* ============================================================
   ScreenBoundary — styles  (v2 — "the site is a macOS desktop")
   Asymmetric windowed bento + oversized editorial type.
   Component visuals (animation, app windows, compare cells,
   faq internals) are inherited verbatim from v1.
   ============================================================ */

:root{
  /* near-black, cool-neutral background system */
  --bg:        #0B0B0E;
  --bg-2:      #0E0E12;
  --surface:   #141418;
  --surface-2: #191920;
  --elevated:  #1E1E26;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);

  --ink:       #F4F4F7;
  --ink-2:     #ABABB6;
  --ink-3:     #6E6E7A;

  /* accent — set per [data-accent] below; defaults to blue */
  --accent:      #2D7BFF;
  --accent-2:    #5C9CFF;
  --accent-ink:  #FFFFFF;
  --accent-glow: rgba(45,123,255,.40);
  --accent-soft: rgba(45,123,255,.12);
  --accent-line: rgba(45,123,255,.40);

  --radius:   16px;
  --radius-sm:10px;
  --radius-lg:24px;
  --maxw: 1280px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

[data-accent="blue"]{
  --accent:#2D7BFF; --accent-2:#6AA1FF; --accent-ink:#FFFFFF;
  --accent-glow:rgba(45,123,255,.42); --accent-soft:rgba(45,123,255,.13); --accent-line:rgba(45,123,255,.42);
}
[data-accent="green"]{
  --accent:#15E48A; --accent-2:#5BF0B2; --accent-ink:#04140C;
  --accent-glow:rgba(21,228,138,.40); --accent-soft:rgba(21,228,138,.12); --accent-line:rgba(21,228,138,.42);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* ambient backdrop glow */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 600px at 78% -8%, var(--accent-soft), transparent 60%),
    radial-gradient(700px 500px at 8% 4%, rgba(255,255,255,.035), transparent 60%);
}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--ink);font-weight:600}
strong{font-weight:600}

section{position:relative}
.shell{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* legacy centered head (kept for safety) */
.section-head{max-width:760px;margin:0 auto 56px;padding:0 24px;text-align:center}
.kicker{
  font:600 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:18px;
}
h2{font-size:clamp(28px,3.6vw,44px);line-height:1.08;letter-spacing:-.025em;font-weight:600;text-wrap:balance}
h3{font-size:22px;line-height:1.2;letter-spacing:-.02em;font-weight:600}

/* ───────── editorial section heading (new) ───────── */
.ehead{display:flex;flex-direction:column;gap:18px}
.ehead .kicker{margin:0}
.ehead h2{
  font-size:clamp(34px,4.6vw,60px);line-height:1.0;letter-spacing:-.035em;
  font-weight:700;text-wrap:balance;max-width:15ch;
}
.ehead .lede{color:var(--ink-2);font-size:17px;line-height:1.55;max-width:42ch}
.idx{font:600 12px/1 var(--mono);letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase}

/* ───────── window chrome (new) ───────── */
.win{position:relative;border-radius:16px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line-2);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.04)}
.win-bar{display:flex;align-items:center;gap:7px;padding:12px 15px;
  background:rgba(255,255,255,.045);border-bottom:1px solid var(--line)}
.win-bar .tl{width:11px;height:11px;border-radius:50%;display:inline-block}
.win-bar .tl.r{background:#ff5f57}.win-bar .tl.y{background:#febc2e}.win-bar .tl.g{background:#28c840}
.win-title{margin-left:9px;font:500 12.5px/1 var(--font);color:var(--ink-2);white-space:nowrap}
.win-title .mono{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.win-body{padding:26px}

/* ───────── buttons ───────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 15px/1 var(--font);letter-spacing:-.01em;
  border-radius:11px;padding:12px 18px;cursor:pointer;
  border:1px solid transparent;transition:transform .15s ease, background .2s ease, box-shadow .25s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn-sm{padding:9px 15px;font-size:13.5px;border-radius:9px}
.btn-lg{padding:15px 24px;font-size:16px;border-radius:13px}
.btn-block{width:100%}
.btn-primary{
  background:var(--accent);color:var(--accent-ink);
  box-shadow:0 6px 24px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 34px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.22)}
.btn-ghost{
  background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--line-2);
}
.btn-ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}

/* ───────── brand mark ───────── */
.brand{display:inline-flex;align-items:center;gap:11px}
.brand-mark{
  position:relative;width:24px;height:24px;border-radius:7px;
  background:linear-gradient(150deg,#26262e,#15151a);
  box-shadow:inset 0 0 0 1px var(--line-2);
  display:inline-flex;flex-shrink:0;overflow:hidden;
}
.brand-mark.lg{width:34px;height:34px;border-radius:9px}
.brand-mark .bm-a,.brand-mark .bm-b{position:absolute;border-radius:3px;background:var(--accent);box-shadow:0 0 12px -2px var(--accent-glow)}
.brand-mark .bm-a{left:4px;top:4px;width:8px;bottom:4px}
.brand-mark .bm-b{right:4px;top:4px;width:8px;bottom:4px;background:var(--accent-2);opacity:.55}
.brand-mark.lg .bm-a{left:6px;top:6px;width:10px;bottom:6px}
.brand-mark.lg .bm-b{right:6px;top:6px;width:10px;bottom:6px}
.brand-name{font-weight:600;font-size:16px;letter-spacing:-.02em}

/* ───────── menu bar (macOS-style, replaces the SaaS nav) ───────── */
.menubar{position:sticky;top:0;z-index:100;
  background:rgba(11,11,14,.55);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
  border-bottom:1px solid var(--line);transition:background .3s,border-color .3s}
.menubar.scrolled{background:rgba(11,11,14,.82)}
.mbar-inner{max-width:1440px;margin:0 auto;padding:0 16px;height:42px;display:flex;align-items:center;gap:4px}
.mbar-brand{display:inline-flex;align-items:center;gap:9px;padding:0 12px 0 6px;height:42px}
.mbar-brand .brand-name{font-size:14px}
.mbar-menus{display:flex;align-items:center;gap:2px}
.mbar-menus a{font-size:13px;color:var(--ink-2);padding:6px 11px;border-radius:7px;transition:background .15s,color .15s}
.mbar-menus a:hover{color:var(--ink);background:rgba(255,255,255,.07)}
.mbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.mbar-tray{display:flex;align-items:center;gap:9px}
.mbar-tray i{width:13px;height:13px;border-radius:3px;background:rgba(255,255,255,.22)}
.mbar-tray i.wifi{clip-path:polygon(50% 0,100% 55%,84% 70%,50% 32%,16% 70%,0 55%)}
.mbar-tray i.batt{width:18px;border-radius:3px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);background:rgba(255,255,255,.12)}
.mbar-clock{font:500 12.5px/1 var(--mono);color:var(--ink-2);letter-spacing:.02em}
@media (max-width:760px){.mbar-menus{display:none}.mbar-tray{display:none}}

/* ───────── hero (editorial desktop) ───────── */
.hero{max-width:1440px;margin:0 auto;padding:clamp(44px,6vw,88px) 28px 8px;position:relative}
.hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:30px;align-items:center}
.hero-copy{grid-column:1 / 7;position:relative;z-index:3}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font:500 13px/1 var(--font);color:var(--ink-2);white-space:nowrap;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:7px 14px 7px 11px;margin-bottom:26px}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px 1px var(--accent-glow)}
.headline{font-size:clamp(44px,6.4vw,88px);line-height:.96;letter-spacing:-.04em;font-weight:700;max-width:12ch}
.headline-text{display:inline-block;transition:opacity .5s ease, transform .5s ease}
.headline-text.swap{opacity:0;transform:translateY(10px)}
.subhead{margin-top:26px;font-size:18.5px;line-height:1.55;color:var(--ink-2);max-width:44ch}
.cta-row{display:flex;gap:13px;margin-top:34px;flex-wrap:wrap}
.cta-meta{margin-top:20px;font:500 13.5px/1 var(--mono);letter-spacing:.01em;color:var(--ink-3)}

/* hero stage floats as a window, offset + lower */
.hero-stage{grid-column:7 / 13;position:relative;z-index:2;transform:translateY(26px)}
.floatwin{border-radius:18px;overflow:hidden;border:1px solid var(--line-2);background:var(--surface);
  box-shadow:0 60px 120px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.05)}
.floatwin .stage{border-radius:0;border:none;box-shadow:none;aspect-ratio:16/11}
.stage{
  position:relative;aspect-ratio:4/3;width:100%;
  border-radius:var(--radius-lg);overflow:hidden;
  background:
    radial-gradient(120% 120% at 70% 0%, rgba(255,255,255,.04), transparent 55%),
    linear-gradient(160deg,#101015,#0a0a0e);
  border:1px solid var(--line);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
}
.stage-caption{
  position:absolute;top:18px;left:18px;right:18px;z-index:6;
  display:flex;align-items:center;gap:11px;
  font:500 13.5px/1.3 var(--font);color:var(--ink-2);
}
.cap-step{font:600 11px/1 var(--mono);letter-spacing:.1em;color:var(--accent-2);
  border:1px solid var(--accent-line);border-radius:6px;padding:5px 7px;background:var(--accent-soft)}
.cap-text{transition:opacity .4s}

/* SCENE A — monitor */
.scene-monitor{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .7s ease, transform .8s cubic-bezier(.5,0,.2,1);
}
.monitor{
  position:relative;width:74%;border-radius:14px;padding:10px 10px 0;
  background:linear-gradient(180deg,#222229,#16161b);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06);
}
[data-monitor="standard"] .monitor{width:60%}
.screen{
  position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;
  background:#05060a;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
}
[data-monitor="ultrawide"] .screen{aspect-ratio:21/9}
.wallpaper{position:absolute;inset:0;
  background:
    radial-gradient(80% 120% at 20% 10%, #2a3a6e, transparent 60%),
    radial-gradient(90% 130% at 90% 90%, #5a2c6b, transparent 55%),
    linear-gradient(140deg,#15224a,#1a1430);
}
.desk-dock{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);display:flex;gap:5%;width:46%;height:11%}
.desk-dock i{flex:1;border-radius:22%;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.desk-dock i:nth-child(1){background:rgba(120,160,255,.5)}
.desk-dock i:nth-child(3){background:rgba(120,255,190,.45)}
.desk-dock i:nth-child(5){background:rgba(255,150,160,.45)}

/* shattered dead region (right portion) */
.shatter{position:absolute;top:0;right:0;width:46%;height:100%;
  background:repeating-linear-gradient(115deg,#0a0a0f 0 7px,#141019 7px 9px,#1c0d12 9px 12px);
  clip-path:polygon(38% 0,100% 0,100% 100%,12% 100%,30% 62%,18% 38%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.7);
  opacity:.96;
}
.shatter::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,40,80,.10) 3px 4px),
            linear-gradient(90deg,transparent,rgba(60,120,255,.10));
  mix-blend-mode:screen;
}
.crack{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.crack polyline{fill:none;stroke:rgba(220,230,255,.85);stroke-width:1.1;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.5));vector-effect:non-scaling-stroke}

/* calibration zones */
.zone{position:absolute;border:1.5px dashed var(--accent);border-radius:4px;
  background:var(--accent-soft);
  opacity:0;transform:scale(.96);transition:opacity .5s ease, transform .5s cubic-bezier(.4,0,.2,1);
}
.zone-a{left:2.5%;top:6%;width:33%;height:88%}
.zone-b{left:38%;top:30%;width:18%;height:50%}
.zone-tag{position:absolute;top:-9px;left:6px;font:600 9px/1 var(--mono);letter-spacing:.03em;
  color:var(--accent-ink);background:var(--accent);padding:3px 6px;border-radius:5px;white-space:nowrap;
  box-shadow:0 2px 8px -2px var(--accent-glow)}

/* ultrawide split zones (used on /ultrawide) */
.zone-uw-left{left:3%;top:8%;width:46%;height:84%}
.zone-uw-right{left:51%;top:8%;width:46%;height:84%}
.zone-uw-split{position:absolute;top:5%;bottom:5%;left:50%;width:2px;
  background:var(--accent);opacity:0;transform:scaleY(.6);
  transition:opacity .4s ease .1s, transform .5s cubic-bezier(.4,0,.2,1) .1s}
.stage[data-phase="1"] .zone-uw-split,.stage[data-phase="2"] .zone-uw-split{opacity:.7;transform:scaleY(1)}

/* uw-scenes section */
.uw-scenes{max-width:1440px;margin:0 auto;padding:clamp(96px,11vw,150px) 28px 40px}
.uw-scenes-head{margin-bottom:60px}
.uw-scenes-head .kicker{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:14px}
.uw-scenes-head h2{font-size:clamp(26px,4vw,42px);letter-spacing:-.03em;margin-bottom:16px}
.uw-scenes-head p{font-size:17px;color:var(--ink-2);max-width:58ch;line-height:1.6}
.uw-scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.uw-scene{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:28px;overflow:hidden}
.uw-scene-visual{margin-bottom:24px}
.uw-scene h3{font-size:18px;margin-bottom:10px;letter-spacing:-.02em}
.uw-scene p{font-size:14px;color:var(--ink-2);line-height:1.6}
.uw-scene .contrast{font-size:12.5px;color:var(--ink-3);margin-top:10px;font-style:italic}

/* scene visual: split display mockup */
.uw-split-demo{border-radius:10px;overflow:hidden;border:1px solid var(--line-2);background:#0a0b10;aspect-ratio:21/9}
.uw-split-demo .sd-inner{height:100%;display:flex}
.uw-sd-half{flex:1;position:relative;display:flex;flex-direction:column}
.uw-sd-half+.uw-sd-half{border-left:2px solid var(--accent)}
.uw-sd-menubar{height:16px;background:rgba(255,255,255,.07);display:flex;align-items:center;gap:5px;padding:0 7px;flex-shrink:0}
.uw-sd-mb-dot{width:6px;height:6px;border-radius:2px;background:var(--accent)}
.uw-sd-mb-item{font:600 6px/1 var(--font);color:rgba(255,255,255,.5)}
.uw-sd-mb-clock{margin-left:auto;font:600 6px/1 var(--mono);color:rgba(255,255,255,.7)}
.uw-sd-body{flex:1;position:relative;
  background:radial-gradient(80% 120% at 30% 0%,#1c2750,transparent 60%),linear-gradient(150deg,#141a36,#0f0c22)}
.uw-sd-half:last-child .uw-sd-body{background:radial-gradient(80% 120% at 70% 0%,#173a30,transparent 60%),linear-gradient(150deg,#0f1d1c,#0c1116)}
.uw-sd-fullscreen{position:absolute;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center}
.uw-sd-fs-label{font:600 7px/1 var(--mono);color:rgba(255,255,255,.6);letter-spacing:.06em;text-transform:uppercase}
.uw-sd-window{position:absolute;left:10%;top:20%;width:72%;border-radius:4px;overflow:hidden;
  background:#14141b;border:1px solid rgba(255,255,255,.08)}
.uw-sd-wbar{display:flex;gap:3px;padding:4px 5px;background:rgba(255,255,255,.05)}
.uw-sd-wbar i{width:4px;height:4px;border-radius:50%}
.uw-sd-wbar i:nth-child(1){background:#ff5f57}.uw-sd-wbar i:nth-child(2){background:#febc2e}.uw-sd-wbar i:nth-child(3){background:#28c840}
.uw-sd-wlines{padding:5px 6px;display:flex;flex-direction:column;gap:3px}
.uw-sd-wlines span{height:3px;border-radius:1px;background:rgba(255,255,255,.12)}
.uw-sd-wlines span:first-child{width:70%;background:var(--accent-soft)}
.uw-sd-wlines span:nth-child(2){width:50%}
.uw-sd-spaces{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.uw-sd-spaces i{width:16px;height:10px;border-radius:2px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12)}
.uw-sd-spaces i.on{background:var(--accent-soft);border-color:var(--accent-line)}
@media (max-width:900px){.uw-scene-grid{grid-template-columns:1fr}}

/* wm compare section */
.wm-compare{max-width:1440px;margin:0 auto;padding:clamp(80px,9vw,120px) 28px 40px}
.wm-compare-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:34px;align-items:start}
.wm-compare-head{grid-column:1 / 5;position:sticky;top:70px}
.wm-compare-head .kicker{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:14px}
.wm-compare-head h2{font-size:clamp(22px,3vw,32px);letter-spacing:-.03em;margin-bottom:14px}
.wm-compare-head p{font-size:15px;color:var(--ink-2);line-height:1.6}
.wm-cmp-wrap{grid-column:5 / 13}
@media (max-width:900px){
  .wm-compare-grid{grid-template-columns:1fr}
  .wm-compare-head{grid-column:1/-1;position:static}
  .wm-cmp-wrap{grid-column:1/-1}
}

/* monitor stand */
.stand-neck{width:8%;height:7%;background:linear-gradient(180deg,#26262d,#15151a);margin-top:-1px;border-radius:0 0 3px 3px}
.stand-foot{width:26%;height:1.6%;background:#1a1a20;border-radius:3px;box-shadow:0 6px 18px -6px rgba(0,0,0,.8)}

/* SCENE B — two clean displays */
.scene-displays{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5%;padding:0 8%;
  opacity:0;transform:scale(.92);pointer-events:none;
  transition:opacity .7s ease .05s, transform .8s cubic-bezier(.4,0,.2,1);
}
.vdisplay{
  position:relative;width:44%;border-radius:9px;overflow:hidden;
  background:#0a0b10;border:1px solid var(--line-2);
  box-shadow:0 26px 50px -22px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.04), 0 0 0 5px rgba(255,255,255,.02);
  transform:translateY(14px);transition:transform .7s cubic-bezier(.4,0,.2,1);
}
.vd-1{}
.vd-2{}
.vd-menubar{display:flex;align-items:center;gap:7px;height:18px;padding:0 8px;
  background:rgba(255,255,255,.07);backdrop-filter:blur(4px);font:600 8px/1 var(--font);color:rgba(255,255,255,.8)}
.mb-logo{width:8px;height:8px;border-radius:2px;background:var(--accent)}
.mb-item{font-size:8px;color:rgba(255,255,255,.7)}
.mb-spacer{flex:1}
.mb-stat{width:8px;height:8px;border-radius:2px;background:rgba(255,255,255,.3)}
.mb-clock{font:600 8px/1 var(--mono);color:rgba(255,255,255,.85)}
.vd-body{position:relative;aspect-ratio:16/11;
  background:radial-gradient(90% 120% at 30% 0%,#1c2750,transparent 60%),linear-gradient(150deg,#141a36,#0f0c22)}
.vd-2 .vd-body{background:radial-gradient(90% 120% at 70% 0%,#173a30,transparent 60%),linear-gradient(150deg,#0f1d1c,#0c1116)}
.vd-window{position:absolute;left:12%;top:18%;width:62%;border-radius:5px;overflow:hidden;
  background:#14141b;box-shadow:0 10px 22px -10px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.08)}
.vd-window-alt{left:24%;top:24%;width:64%}
.vw-bar{display:flex;gap:3px;padding:5px 6px;background:rgba(255,255,255,.05)}
.vw-bar i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.25)}
.vw-bar i:first-child{background:#ff5f57}.vw-bar i:nth-child(2){background:#febc2e}.vw-bar i:nth-child(3){background:#28c840}
.vw-lines{padding:8px 8px 12px;display:flex;flex-direction:column;gap:5px}
.vw-lines span{height:4px;border-radius:2px;background:rgba(255,255,255,.13)}
.vw-lines span:nth-child(1){width:80%;background:var(--accent-soft)}
.vw-lines span:nth-child(2){width:60%}
.vw-lines span:nth-child(3){width:90%}
.vw-lines span:nth-child(4){width:45%}
.vw-grid{padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.vw-grid span{aspect-ratio:1.4;border-radius:3px;background:rgba(255,255,255,.1)}
.vw-grid span:first-child{background:var(--accent-soft)}
.vd-badge{position:absolute;bottom:7px;right:7px;font:600 8px/1 var(--mono);letter-spacing:.04em;
  color:var(--accent-ink);background:var(--accent);padding:3px 6px;border-radius:5px}

/* PHASE STATES */
.stage[data-phase="1"] .zone{opacity:1;transform:scale(1)}
.stage[data-phase="1"] .zone-b{transition-delay:.18s}
.stage[data-phase="2"] .zone{opacity:1;transform:scale(1)}
.stage[data-phase="2"] .scene-monitor{opacity:0;transform:scale(.8) translateY(8%)}
.stage[data-phase="2"] .scene-displays{opacity:1;transform:scale(1);pointer-events:auto}
.stage[data-phase="2"] .vdisplay{transform:translateY(0)}
.stage[data-phase="2"] .vd-1{transition-delay:.06s}
.stage[data-phase="2"] .vd-2{transition-delay:.16s}

.stage-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:6}
.sdot{width:7px;height:7px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.22);transition:all .3s}
.sdot:hover{background:rgba(255,255,255,.45)}
.stage[data-phase="0"] .sdot[data-go="0"],
.stage[data-phase="1"] .sdot[data-go="1"],
.stage[data-phase="2"] .sdot[data-go="2"]{background:var(--accent);width:20px;border-radius:4px}

/* ───────── trust dock (widget tiles) ───────── */
.trust{max-width:1440px;margin:0 auto;padding:0 28px}
.trust-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.trust-item{display:flex;flex-direction:column;gap:5px;
  border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025);
  backdrop-filter:blur(8px);padding:20px 22px}
.trust-item strong{font-size:24px;letter-spacing:-.03em;font-weight:700}
.trust-item span{font-size:12.5px;color:var(--ink-3);line-height:1.35}
.trust-divider{display:none}

/* ───────── how it works (asymmetric bento panels) ───────── */
.how{max-width:1440px;margin:0 auto;padding:clamp(96px,11vw,150px) 28px 40px}
.how-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.how-head{grid-column:1 / 5;align-self:center}
.step{position:relative;border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:28px;overflow:hidden}
.step.s1{grid-column:5 / 13}
.step.s2{grid-column:1 / 7}
.step.s3{grid-column:7 / 13}
.step.s1 .step-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
.step.s2 .step-inner,.step.s3 .step-inner{display:flex;flex-direction:column;gap:24px}
.step-num-xl{position:absolute;top:14px;right:22px;font:700 56px/1 var(--font);letter-spacing:-.04em;
  color:var(--ink);opacity:.05;pointer-events:none}
.step-text .step-num{font:600 13px/1 var(--mono);color:var(--accent-2);letter-spacing:.1em}
.step-text h3{margin:14px 0 12px;font-size:24px}
.step-text p{color:var(--ink-2);font-size:16px;max-width:46ch}
.step-visual{position:relative}
.step.s2 .step-visual,.step.s3 .step-visual{margin-bottom:6px}

/* generic app window chrome */
.app-win{border-radius:12px;overflow:hidden;background:#0d0d12;
  border:1px solid var(--line-2);box-shadow:0 24px 50px -24px rgba(0,0,0,.85)}
.aw-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:rgba(255,255,255,.05);
  border-bottom:1px solid var(--line)}
.tl{width:11px;height:11px;border-radius:50%;display:inline-block}
.tl.r{background:#ff5f57}.tl.y{background:#febc2e}.tl.g{background:#28c840}
.aw-title{margin-left:8px;font:500 12.5px/1 var(--font);color:var(--ink-2)}

/* step 1 — calibration */
.aw-body.calib{display:flex;gap:14px;padding:18px;background:linear-gradient(160deg,#0e0e14,#0a0a0e)}
.calib-canvas{position:relative;flex:1;aspect-ratio:16/10;border-radius:8px;
  background:repeating-linear-gradient(0deg,transparent 0 17px,rgba(255,255,255,.03) 17px 18px),
            repeating-linear-gradient(90deg,transparent 0 17px,rgba(255,255,255,.03) 17px 18px),#0b0c12;
  border:1px solid var(--line)}
.calib-screen{position:absolute;left:8%;top:12%;right:8%;bottom:12%;border:1px dashed rgba(255,255,255,.18);border-radius:4px}
.calib-zone{position:absolute;left:12%;top:20%;width:48%;height:60%;border:2px solid var(--accent);border-radius:5px;
  background:var(--accent-soft)}
.cz-dim{position:absolute;bottom:6px;right:6px;font:600 10px/1 var(--mono);color:var(--accent-ink);
  background:var(--accent);padding:3px 6px;border-radius:5px;white-space:nowrap}
.handle{position:absolute;width:7px;height:7px;background:#fff;border:1.5px solid var(--accent);border-radius:2px}
.handle.tl-h{left:-4px;top:-4px}.handle.tr-h{right:-4px;top:-4px}
.handle.bl-h{left:-4px;bottom:-4px}.handle.br-h{right:-4px;bottom:-4px}
.calib-side{width:104px;display:flex;flex-direction:column;gap:8px}
.cs-label{font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cs-pill{font-size:12px;padding:8px 10px;border-radius:8px;border:1px solid var(--line)}
.cs-pill.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-2);font-weight:600}
.cs-pill.ghost{color:var(--ink-3);border-style:dashed}

/* step 2 — settings */
.aw-body.settings{padding:18px;background:linear-gradient(160deg,#0e0e14,#0a0a0e);display:flex;flex-direction:column;gap:14px}
.set-arrange{position:relative;height:120px;border-radius:8px;background:#0b0c12;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:10px}
.set-disp{width:90px;height:62px;border-radius:6px;background:linear-gradient(150deg,#1a2550,#12101f);
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  font:600 18px/1 var(--font);color:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.set-disp.d2{background:linear-gradient(150deg,#15382c,#101616)}
.set-flash{position:absolute;top:10px;right:12px;font:600 10px/1 var(--mono);color:var(--accent-2);
  background:var(--accent-soft);border:1px solid var(--accent-line);padding:4px 7px;border-radius:6px}
.set-rows{display:flex;flex-direction:column;gap:8px}
.set-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;
  padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.sr-key{color:var(--ink-2);white-space:nowrap}.sr-val{font-family:var(--mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
.enable-chip{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 var(--font);
  color:var(--accent-ink);background:var(--accent);padding:12px 18px;border-radius:11px;
  box-shadow:0 12px 30px -8px var(--accent-glow)}
.ec-glow{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.6);
  animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}100%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}

/* step 3 — use */
.use-stage{aspect-ratio:16/11;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);
  background:#0a0b10;box-shadow:0 24px 50px -24px rgba(0,0,0,.85)}
.use-disp{position:relative;height:100%;background:radial-gradient(90% 130% at 70% 0%,#1d2c5e,transparent 60%),linear-gradient(150deg,#141a36,#0f0c22)}
.use-menubar{display:flex;align-items:center;gap:10px;height:24px;padding:0 12px;background:rgba(255,255,255,.08);font-size:0}
.um-logo{width:11px;height:11px;border-radius:3px;background:var(--accent)}
.um-i{width:11px;height:11px;border-radius:3px;background:rgba(255,255,255,.3)}
.um-clock{margin-left:auto;font:600 11px/1 var(--mono);color:rgba(255,255,255,.85)}
.use-window{position:absolute;left:18%;top:30%;width:54%;border-radius:7px;overflow:hidden;
  background:#15151c;box-shadow:0 18px 36px -14px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.08)}
.use-window.dragging{animation:dragWin 4s ease-in-out infinite}
@keyframes dragWin{0%,100%{transform:translate(0,0) rotate(0)}40%{transform:translate(22%,8%) rotate(.6deg)}70%{transform:translate(22%,8%) rotate(.6deg)}}
.uw-bar{display:flex;gap:5px;padding:8px 10px;background:rgba(255,255,255,.06)}
.uw-bar i{width:8px;height:8px;border-radius:50%}
.uw-bar i:nth-child(1){background:#ff5f57}.uw-bar i:nth-child(2){background:#febc2e}.uw-bar i:nth-child(3){background:#28c840}
.uw-fill{height:74px;margin:0;background:repeating-linear-gradient(0deg,transparent 0 11px,rgba(255,255,255,.05) 11px 12px);
  background-color:#101018}
.use-spaces{position:absolute;top:30px;left:50%;transform:translateX(-50%);display:flex;gap:7px}
.use-spaces .sp{width:24px;height:15px;border-radius:3px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15)}
.use-spaces .sp.on{background:var(--accent-soft);border-color:var(--accent-line)}

/* ───────── in action (offset window + side heading) ───────── */
.action{max-width:1440px;margin:0 auto;padding:clamp(96px,11vw,150px) 28px 40px}
.action-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:34px;align-items:center}
.action-head{grid-column:1 / 5}
.action-frame{grid-column:5 / 13;max-width:none;margin:0}
.browser{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-2);
  background:#0d0d12;box-shadow:0 50px 100px -40px rgba(0,0,0,.9)}
.br-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;background:rgba(255,255,255,.05);border-bottom:1px solid var(--line)}
.br-url{margin-left:14px;flex:1;text-align:center;font:500 12.5px/1 var(--mono);color:var(--ink-3);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;padding:7px 12px}
.br-body{padding:0}
.placeholder-shot{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;text-align:center;
  background:repeating-linear-gradient(135deg,#0f1016 0 14px,#0c0d12 14px 28px)}
.ph-label{font:500 13px/1.5 var(--mono);color:var(--ink-3);max-width:46ch;padding:0 24px;letter-spacing:.02em}

/* ───────── comparison (table + sticky side heading) ───────── */
.compare{max-width:1440px;margin:0 auto;padding:clamp(96px,11vw,150px) 28px 40px}
.compare-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:34px;align-items:start}
.compare-head{grid-column:1 / 4;position:sticky;top:70px}
.cmp-wrap{grid-column:4 / 13;max-width:none;margin:0}
.cmp{width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.cmp th,.cmp td{padding:18px 16px;text-align:center;border-bottom:1px solid var(--line);font-size:14.5px}
.cmp thead th{font-weight:600;color:var(--ink-2);font-size:14px;vertical-align:bottom;background:rgba(255,255,255,.015)}
.cmp .cmp-feat{text-align:left;color:var(--ink);font-weight:500;width:38%}
thead .cmp-feat{width:38%}
.cmp-us{position:relative;background:var(--accent-soft)}
thead .cmp-us{color:var(--ink);font-weight:700;font-size:15px}
.cu-mark{display:inline-flex;gap:3px;justify-content:center;margin-bottom:8px}
.cu-mark i{width:7px;height:18px;border-radius:2px;background:var(--accent)}
.cu-mark i:last-child{background:var(--accent-2);opacity:.6}
.cmp tbody tr:last-child td{border-bottom:none}
.cmp-us::before{content:"";position:absolute;inset:0;border-left:1px solid var(--accent-line);border-right:1px solid var(--accent-line);pointer-events:none}
.cmp tbody tr:last-child .cmp-us::before{border-bottom:1px solid var(--accent-line)}
.cmp thead .cmp-us::before{border-top:1px solid var(--accent-line)}
.cmp td em{display:block;font-size:11.5px;color:var(--ink-3);margin-top:5px;font-weight:500}
.yes,.no,.maybe{display:inline-block;width:22px;height:22px;border-radius:50%;position:relative;vertical-align:middle}
.yes{background:var(--accent);box-shadow:0 0 14px -3px var(--accent-glow)}
.yes::after{content:"";position:absolute;left:7px;top:5px;width:5px;height:9px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.no{background:rgba(255,255,255,.06);border:1px solid var(--line-2)}
.no::before,.no::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.5px;background:var(--ink-3);border-radius:1px}
.no::before{transform:translate(-50%,-50%) rotate(45deg)}.no::after{transform:translate(-50%,-50%) rotate(-45deg)}
.maybe{background:rgba(255,255,255,.06);border:1px solid var(--line-2)}
.maybe::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:8px;height:1.5px;background:var(--ink-2);border-radius:1px}
.cmp-foot{margin-top:20px;text-align:center;font-size:13.5px;color:var(--ink-3);max-width:62ch;margin-inline:auto}

/* ───────── faq (two-column cards + side heading) ───────── */
.faq{max-width:1440px;margin:0 auto;padding:clamp(96px,11vw,150px) 28px 40px}
.faq-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:34px;align-items:start}
.faq-head{grid-column:1 / 4;position:sticky;top:70px}
.faq-list{grid-column:4 / 13;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.qa{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;align-self:start}
.qa[open]{border-color:var(--line-2)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 24px;font-size:16.5px;font-weight:550;font-weight:600;transition:color .2s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent-2)}
.chev{width:11px;height:11px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .25s;flex-shrink:0;margin-right:4px}
.qa[open] .chev{transform:rotate(-135deg);border-color:var(--accent-2)}
.qa-body{padding:0 24px 24px;color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:64ch}

/* ───────── pricing (two-tier editorial) ───────── */
.pricing{max-width:1440px;margin:0 auto;padding:clamp(96px,11vw,150px) 28px 90px}
.pricing-wrap{max-width:900px;margin:0 auto}
.launch-badge{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  color:var(--accent-2);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:999px;padding:8px 14px;margin:16px 0 24px}
.lb-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px 1px var(--accent-glow)}
.pricing-top{margin-bottom:56px}
.pricing-top h2{font-size:clamp(34px,4.6vw,60px);line-height:1.0;letter-spacing:-.035em;font-weight:700;margin-bottom:16px}
.pricing-lede{font-size:17px;line-height:1.55;color:var(--ink-2)}
.pricing-tiers{display:grid;grid-template-columns:1fr auto 1fr;gap:0;border-top:1px solid var(--line);padding-top:48px;margin-bottom:60px}
.pt-tier{padding-right:56px}
.pt-tier:last-child{padding-right:0;padding-left:56px}
.pt-sep{width:1px;background:var(--line);align-self:stretch;margin:0 4px}
.pt-badge{display:inline-block;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-2);background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:999px;padding:5px 10px;margin-bottom:16px}
.pt-name{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.pt-featured .pt-name{color:var(--accent-2)}
.pt-seats{font:500 13px/1 var(--mono);color:var(--ink-3);margin-bottom:28px}
.pt-price{font-size:clamp(52px,7vw,78px);font-weight:700;letter-spacing:-.04em;line-height:.9;margin-bottom:14px}
.pt-price sup{font-size:.38em;font-weight:600;vertical-align:super;color:var(--ink-2);margin-right:1px}
.pt-price .pt-cents{font-size:.38em;color:var(--ink-2)}
.pt-price.ac .pt-num{color:var(--accent)}
.pt-price.ac sup,.pt-price.ac .pt-cents{color:var(--accent-2)}
.pt-note{font:500 12.5px/1 var(--mono);color:var(--ink-3);margin-bottom:28px;letter-spacing:.01em}
.pt-tier .btn{max-width:260px}
.pricing-includes{border-top:1px solid var(--line);padding-top:48px;margin-bottom:36px}
.pi-head{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:24px}
.pc-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 40px}
.pc-list li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-2)}
.pc-list li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;
  background:var(--accent-soft);border:1px solid var(--accent-line)}
.pc-list li::after{content:"";position:absolute;left:5px;top:7px;width:4px;height:6px;
  border:solid var(--accent-2);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.pricing-delivery{font:500 13px/1 var(--mono);color:var(--ink-3);text-align:center;margin:20px 0 0;letter-spacing:.01em}
.pricing .guarantee-block{margin-bottom:24px}
.pc-meta{font:500 12.5px/1 var(--mono);color:var(--ink-3)}
@media (max-width:700px){
  .pricing-tiers{grid-template-columns:1fr}
  .pt-sep{width:100%;height:1px;margin:40px 0}
  .pt-tier,.pt-tier:last-child{padding:0}
  .pt-tier .btn{max-width:none}
  .pc-list{grid-template-columns:1fr}
}

/* ───────── footer ───────── */
.footer{border-top:1px solid var(--line);margin-top:40px}
.footer-inner{max-width:1440px;margin:0 auto;padding:48px 28px 28px;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot-tag{margin-top:14px;color:var(--ink-3);font-size:14px}
.foot-links{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start}
.foot-links a{font-size:14.5px;color:var(--ink-2);transition:color .2s}
.foot-links a:hover{color:var(--ink)}
.footer-bottom{max-width:1440px;margin:0 auto;padding:20px 28px 40px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}

/* ───────── reveal (opacity stays 1 so content is never trapped hidden by a frozen transition) ───────── */
[data-reveal]{transform:translateY(20px);transition:transform .7s cubic-bezier(.2,.7,.3,1)}
[data-reveal].in{transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
  html{scroll-behavior:auto}
}

/* ───────── responsive ───────── */
@media (max-width:1040px){
  .hero{padding:48px 22px 8px}
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-copy,.hero-stage{grid-column:1 / -1}
  .hero-stage{transform:none}
  .headline{max-width:none}
  .trust{padding:0 22px}
  .how,.action,.compare,.faq,.pricing{padding:90px 22px 40px}
  .how-bento{gap:16px}
  .how-head,.step.s1,.step.s2,.step.s3{grid-column:1 / -1}
  .step.s1 .win-body{grid-template-columns:1fr;gap:22px}
  .action-grid,.compare-grid,.faq-grid{grid-template-columns:1fr;gap:28px}
  .action-head,.action-frame,.compare-head,.cmp-wrap,.faq-head,.faq-list{grid-column:1 / -1}
  .compare-head,.faq-head{position:static}
  .trust-inner{grid-template-columns:repeat(2,1fr)}
  .pricing{padding-bottom:70px}
  .pricing-wrap{padding:0}
}
@media (max-width:600px){
  body{font-size:16px}
  .hero,.how,.action,.compare,.faq,.pricing,.trust,.footer-inner,.footer-bottom{padding-left:18px;padding-right:18px}
  .faq-list{grid-template-columns:1fr}
  .cmp-wrap,.wm-cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp th,.cmp td{padding:13px 9px;font-size:12.5px}
  .cmp .cmp-feat{width:auto}
  .cmp table,.wm-compare table{min-width:480px}
  .pt-name{font-size:19px}
  .footer-inner{flex-direction:column;gap:24px}
}

/* ───────── In action — screenshot ───────── */
.action-shot{width:100%;height:auto;display:block}

/* ───────── Math section (repair vs ScreenBoundary) ───────── */
.math-section{padding:100px 28px;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.math-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.math-kicker{font:600 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);margin-bottom:20px}
.math-h{font-size:clamp(30px,4vw,52px);line-height:1.0;letter-spacing:-.035em;font-weight:700;margin-bottom:20px;white-space:pre-line}
.math-sub{color:var(--ink-2);font-size:17px;line-height:1.55;max-width:42ch;margin-bottom:32px}
.math-right{display:flex;flex-direction:column}
.math-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:start}
.mc-side{padding:20px 0}
.mc-side.good .mc-label{color:var(--accent-2)}
.mc-side.good .mc-price{color:var(--accent)}
.mc-label{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.mc-label.ac{color:var(--accent-2)}
.mc-price{font-size:clamp(32px,4vw,44px);font-weight:700;letter-spacing:-.03em;color:var(--ink-3);margin-bottom:10px}
.mc-price.ac{color:var(--accent)}
.mc-note{font-size:13.5px;color:var(--ink-3);line-height:1.6}
.mc-div{display:flex;flex-direction:column;align-items:center;padding:20px 28px}
.mc-div::before,.mc-div::after{content:"";flex:1;width:1px;background:var(--line-2);min-height:16px}
.mc-div span{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:10px 0}
@media (max-width:900px){
  .math-inner{grid-template-columns:1fr;gap:40px}
}
@media (max-width:600px){
  .math-section{padding:70px 18px}
  .mc-div{padding:20px 16px}
}

/* ───────── Guarantee block ───────── */
.guarantee-block{display:flex;align-items:flex-start;gap:16px;margin-top:20px;padding:20px 22px;
  background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:14px}
.gb-icon{flex-shrink:0;width:32px;height:32px;color:var(--accent-2)}
.gb-icon svg{width:100%;height:100%}
.gb-text strong{display:block;font-size:14px;color:var(--ink);margin-bottom:4px}
.gb-text p{font-size:13px;color:var(--ink-2);line-height:1.45;margin:0}

/* ───────── Mobile sticky CTA ───────── */
.sticky-cta{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:rgba(14,14,18,.88);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-top:1px solid var(--line-2);padding:12px 20px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.sticky-cta.visible{transform:none}
.sc-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:480px;margin:0 auto}
.sc-info{display:flex;flex-direction:column;gap:2px}
.sc-name{font:600 14px/1 var(--font)}
.sc-price{font:500 12px/1 var(--mono);color:var(--ink-2)}
[data-theme="light"] .sticky-cta{background:rgba(245,245,247,.92)}
@media (max-width:700px){
  .sticky-cta{display:block}
  main{padding-bottom:76px}
}

/* ───────── Light theme ───────── */
[data-theme="light"]{
  --bg:        #F5F5F7;
  --bg-2:      #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F0F0F2;
  --elevated:  #FFFFFF;
  --line:      rgba(0,0,0,.08);
  --line-2:    rgba(0,0,0,.13);
  --ink:       #1D1D1F;
  --ink-2:     #6E6E73;
  --ink-3:     #AEAEB2;
}
[data-theme="light"] body::before{
  background:
    radial-gradient(900px 600px at 78% -8%,var(--accent-soft),transparent 60%),
    radial-gradient(700px 500px at 8% 4%,rgba(0,0,0,.012),transparent 60%);
}
[data-theme="light"] .menubar{background:rgba(245,245,247,.72)}
[data-theme="light"] .menubar.scrolled{background:rgba(245,245,247,.92)}
[data-theme="light"] .mbar-menus a:hover{background:rgba(0,0,0,.06);color:var(--ink)}
[data-theme="light"] .mbar-tray i{background:rgba(0,0,0,.25)}
[data-theme="light"] .mbar-tray i.batt{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.3);background:rgba(0,0,0,.12)}
[data-theme="light"] .btn-ghost{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.13)}
[data-theme="light"] .btn-ghost:hover{background:rgba(0,0,0,.08)}
[data-theme="light"] .brand-mark{background:linear-gradient(150deg,#E5E5EA,#D1D1D6)}
[data-theme="light"] .win-bar{background:rgba(0,0,0,.03)}
[data-theme="light"] .win{box-shadow:0 8px 36px -6px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.9)}
[data-theme="light"] .floatwin{
  box-shadow:0 20px 60px -16px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="light"] .stage{
  background:
    radial-gradient(120% 120% at 70% 0%,rgba(0,0,0,.02),transparent 55%),
    linear-gradient(160deg,#E8E8ED,#F5F5F7);
}
[data-theme="light"] .eyebrow{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.09)}
[data-theme="light"] .trust{background:none}
[data-theme="light"] .cmp-wrap.win{box-shadow:0 8px 36px -6px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.9)}
[data-theme="light"] .price-card{box-shadow:0 8px 36px -6px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.9)}

/* ───────── Nav toggle buttons ───────── */
.mbar-btn{
  background:none;border:none;cursor:pointer;
  font:500 13px/1 var(--mono);color:var(--ink-2);
  padding:5px 8px;border-radius:6px;
  transition:background .15s,color .15s;
  letter-spacing:.02em;
}
.mbar-btn:hover{color:var(--ink);background:rgba(255,255,255,.08)}
[data-theme="light"] .mbar-btn:hover{background:rgba(0,0,0,.07)}