/* ============================================================================
   SipBuddy — sipbuddy.app
   Design System v2.1 "Fizz".
   Layer 1 : §2.9 CSS custom properties, pasted verbatim.
   Layer 2 : site-only tokens the website composes from those primitives.
   Layer 3 : base, a11y, components (ported from design/mockups/src/06-site.html).
   ========================================================================== */

/* ═══════════ LAYER 1 — §2.9 tokens, verbatim ═══════════ */

:root{
  /* ── canvas & surface ── */
  --sb-canvas:#EAF1FE; --sb-canvas-alt:#F1ECFF;
  --sb-canvas-grad:linear-gradient(168deg,#EAF1FE 0%,#EFEEFE 52%,#F3ECFF 100%);
  --sb-surface:#FFFFFF; --sb-surface-raised:#FFFFFF; --sb-surface-overlay:#FFFFFF;
  --sb-surface-sunken:#E6EDFA; --sb-surface-track:#D2DEF2;
  --sb-surface-plate:#F6EFE5; --sb-plate-edge:#DDD0CB; --sb-plate-rim:#6A5DA9; --sb-plate-ink:#0E1A40;

  /* ── ink & lines ── */
  --sb-ink:#0E1A40; --sb-ink-secondary:#4A5A86; --sb-ink-tertiary:#56658C;
  --sb-ink-inverse:#FFFFFF; --sb-ink-on-bright:#0E1A40;
  --sb-border-hairline:#DCE6F7; --sb-border-control:#8577C0;
  --sb-focus-ring:#1440BE; --sb-focus-gap:#FFFFFF;

  /* ── brand blue · the cap · ACTION ── */
  --sb-blue-950:#03113F; --sb-blue-900:#062178; --sb-blue-800:#0A2F9E; --sb-blue-700:#1440BE;
  --sb-blue-600:#2450CE; --sb-blue-500:#3D65D8; --sb-blue-400:#6A8BE9; --sb-blue-300:#9DB4F4;
  --sb-blue-200:#C6D5FB; --sb-blue-100:#E6EDFE; --sb-blue-text:#1440BE;

  /* ── brand aqua · the water · DATA ── */
  --sb-aqua-950:#033A4E; --sb-aqua-900:#045C74; --sb-aqua-850:#0A7C90; --sb-aqua-800:#0682A8;
  --sb-aqua-700:#0CA3C6; --sb-aqua-600:#16BED6; --sb-aqua-500:#2ECDE0; --sb-aqua-400:#55E0EB;
  --sb-aqua-300:#7CF0F4; --sb-aqua-200:#A8F8FA; --sb-aqua-100:#D6FDFD; --sb-aqua-text:#0B6F86;

  /* ── brand lilac · strap & base · CHROME ── */
  --sb-lilac-950:#2E2652; --sb-lilac-900:#463B78; --sb-lilac-800:#5A4D96; --sb-lilac-700:#6A5DA9;
  --sb-lilac-600:#7E6CBE; --sb-lilac-500:#9C86D8; --sb-lilac-400:#B9A2F0; --sb-lilac-300:#CFC4FD;
  --sb-lilac-200:#E2DAFE; --sb-lilac-100:#F1EDFF; --sb-lilac-text:#6A5DA9;

  /* ── cream · PLATES ONLY ── */
  --sb-cream-700:#C8B7A4; --sb-cream-600:#DDD0CB; --sb-cream-500:#E8DED3;
  --sb-cream-400:#EFE5DB; --sb-cream-300:#F6EFE5; --sb-cream-200:#FBF7F0;

  /* ── water gauge ── */
  --sb-water-surface-highlight:#DDFBFC;
  --sb-water-top:#8AFAFB; --sb-water-mid:#6BE9ED; --sb-water-deep:#2CC8DF;
  --sb-water-floor:#0F9FBE; --sb-water-shadow:#0A7C90;
  --sb-grad-water:linear-gradient(180deg,#8AFAFB 0%,#6BE9ED 38%,#2CC8DF 72%,#0A7C90 100%);
  --sb-glass-tint:linear-gradient(180deg,rgba(122,214,240,.30),rgba(122,214,240,.16));
  --sb-glass-edge:#7ED4EA; --sb-gloss-spec:rgba(255,255,255,.85);

  /* ── action ── */
  --sb-cta:linear-gradient(180deg,#3D65D8 0%,#1A3FB8 100%);
  --sb-cta-solid:#2450CE;
  --sb-cta-active:linear-gradient(180deg,#1A3FB8 0%,#0A2F9E 100%);
  --sb-cta-lip:#08246F; --sb-cta-ink:#FFFFFF;

  /* ── status ── */
  --sb-positive-500:#1ED0A0; --sb-positive-600:#0FB98A; --sb-positive-700:#0E8266;
  --sb-positive-text:#0C7A5C; --sb-positive-pill:#DCFBF1; --sb-positive-pill-ink:#067A5C;
  --sb-warning-400:#FFB92E; --sb-warning-500:#FFAA14; --sb-warning-800:#A16B0D;
  --sb-warning-text:#96590A; --sb-warning-pill:#FFF2D6; --sb-warning-pill-ink:#A85B04;
  --sb-danger-500:#FF6F86; --sb-danger-550:#FF5A74; --sb-danger-700:#CF3A56;
  --sb-danger-text:#BE2E4E; --sb-danger-pill:#FFE3E8; --sb-danger-pill-ink:#A3213C;
  --sb-pill-neutral:#F1F5FE; --sb-pill-neutral-ink:#4A5A86;

  /* ── radii ── */
  --sb-r-pill:999px; --sb-r-xl:26px; --sb-r-lg:22px;
  --sb-r-md:16px; --sb-r-sm:14px; --sb-r-xs:12px;

  /* ── spacing ── */
  --sb-s-0h:2px; --sb-s-1:4px; --sb-s-1h:6px; --sb-s-2:8px; --sb-s-3:12px; --sb-s-4:16px;
  --sb-s-5:20px; --sb-s-6:26px; --sb-s-7:32px; --sb-s-8:40px; --sb-s-9:48px;

  /* ── depth ── */
  --sb-shadow-1:0 1px 2px rgba(18,40,110,.10);
  --sb-shadow-2:0 6px 14px -6px rgba(18,40,110,.26);
  --sb-shadow-3:0 18px 38px -16px rgba(18,40,110,.32);
  --sb-shadow-4:0 24px 46px -20px rgba(18,40,110,.45);
  --sb-shadow-cta:0 10px 20px -8px rgba(16,48,160,.55);
  --sb-shadow-aqua:0 12px 26px -10px rgba(10,124,144,.45);
  --sb-shadow-lilac:0 12px 26px -10px rgba(106,93,169,.42);
  --sb-shadow-positive:0 12px 26px -10px rgba(12,122,92,.45);
  --sb-shadow-warning:0 12px 26px -10px rgba(200,120,10,.45);
  --sb-shadow-danger:0 10px 22px -8px rgba(190,46,78,.42);
  --sb-gloss-top:inset 0 1.5px 0 rgba(255,255,255,.85);
  --sb-gloss-cap:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.22) 42%,transparent 58%);
  --sb-occlusion:inset 0 -14px 18px -12px rgba(1,31,120,.80);
  --sb-sticker:1.5px solid rgba(255,255,255,.90);

  /* ── type ── */
  --sb-font:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  /* ── motion ── */
  --sb-ease-out:cubic-bezier(.22,.61,.36,1);
  --sb-ease-in-out:cubic-bezier(.65,.05,.36,1);
  --sb-overshoot:cubic-bezier(.34,1.56,.64,1);
  --sb-t-press:90ms; --sb-t-hover:120ms; --sb-t-row:140ms;
  --sb-t-fill:320ms; --sb-t-page:300ms;
}

/* Dark — §2.9, applied by system preference unless the reader forced light … */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --sb-canvas:#0F1638; --sb-canvas-alt:#17123C;
  --sb-canvas-grad:linear-gradient(168deg,#0F1638 0%,#141541 55%,#1A1444 100%);
  --sb-surface:#1A2350; --sb-surface-raised:#26306A; --sb-surface-overlay:#2E3880;
  --sb-surface-sunken:#121A45; --sb-surface-track:#1B2454;
  --sb-surface-plate:#EDE3D4; --sb-plate-edge:#C8B7A4; --sb-plate-rim:#7C68C8; --sb-plate-ink:#16204A;

  --sb-ink:#EDF2FF; --sb-ink-secondary:#B7C3EA; --sb-ink-tertiary:#A3AFDA;
  --sb-ink-inverse:#0B1030; --sb-ink-on-bright:#0B1030;
  --sb-border-hairline:#2E3A73; --sb-border-control:#8B79D6;
  --sb-focus-ring:#7CF0F4; --sb-focus-gap:#0B1030;

  --sb-blue-300:#A9C2FF; --sb-blue-350:#8FB0FF; --sb-blue-400:#7FA3FF; --sb-blue-500:#4C78F2;
  --sb-blue-600:#3E69EA; --sb-blue-700:#2749CC; --sb-blue-950:#0B1030; --sb-blue-text:#8FB0FF;
  --sb-blue-200:#2E3880; --sb-blue-100:#232D5E;

  --sb-aqua-300:#7CF0F4; --sb-aqua-text:#7CF0F4; --sb-aqua-100:#0E3450;
  --sb-water-surface-highlight:#CFFEFF;
  --sb-water-top:#9BFEFF; --sb-water-mid:#5FEAF0; --sb-water-deep:#23B6D2;
  --sb-water-floor:#0B7EA0; --sb-water-shadow:#06556B;
  --sb-grad-water:linear-gradient(180deg,#9BFEFF 0%,#5FEAF0 38%,#23B6D2 72%,#0B7EA0 100%);
  --sb-glass-tint:linear-gradient(180deg,rgba(124,240,244,.14),rgba(124,240,244,.06));
  --sb-glass-edge:rgba(124,240,244,.28);

  --sb-lilac-300:#D6C6FF; --sb-lilac-350:#C3ACFF; --sb-lilac-400:#B9A2F0;
  --sb-lilac-500:#A98FF0; --sb-lilac-600:#8B79D6; --sb-lilac-700:#7C68C8;
  --sb-lilac-100:#2B2352; --sb-lilac-text:#C3ACFF;

  /* §2.9 ships the candy CTA by default and the white-on-blue "parity" variant as a
     comment.  sipbuddy.app uses the parity variant: it is what the approved dark
     mockup renders, and §6.1 law 8 clamps its bottom stop to #1E48CC (white 8.0 : 1). */
  --sb-cta:linear-gradient(180deg,#3F6BE8 0%,#1E48CC 100%);
  --sb-cta-solid:#3E69EA;
  --sb-cta-active:linear-gradient(180deg,#2E58DC 0%,#16399F 100%);
  --sb-cta-lip:#0A2478; --sb-cta-ink:#FFFFFF;

  --sb-positive-500:#3FE3B4; --sb-positive-text:#5CEAC3;
  --sb-positive-pill:#0E3A30; --sb-positive-pill-ink:#5CEAC3;
  --sb-warning-500:#FFB92E; --sb-warning-text:#FFC24D;
  --sb-warning-pill:#3A2C12; --sb-warning-pill-ink:#FFC24D;
  --sb-danger-500:#FF8098; --sb-danger-text:#FF94A8;
  --sb-danger-pill:#3B1C2A; --sb-danger-pill-ink:#FF94A8;
  --sb-pill-neutral:#232D5E; --sb-pill-neutral-ink:#B7C3EA;

  --sb-shadow-1:0 1px 2px rgba(0,4,24,.50);
  --sb-shadow-2:0 10px 22px -10px rgba(0,4,24,.72);
  --sb-shadow-3:0 22px 44px -18px rgba(0,4,24,.78);
  --sb-shadow-4:0 24px 46px -20px rgba(0,4,24,.78);
  --sb-shadow-cta:0 12px 26px -10px rgba(76,120,242,.70);
  --sb-shadow-lilac:0 14px 30px -12px rgba(0,4,24,.72);
  --sb-glow-aqua:0 0 28px rgba(95,234,240,.32);
  --sb-gloss-top:inset 0 1.5px 0 rgba(255,255,255,.28);
  --sb-gloss-cap:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.07) 42%,transparent 58%);
  --sb-occlusion:inset 0 -14px 18px -12px rgba(0,4,24,.58);
  --sb-sticker:1.5px solid rgba(180,200,255,.14);
}}

/* … and by the explicit ?theme=dark / data-theme toggle, regardless of system. */
:root[data-theme="dark"]{
  --sb-canvas:#0F1638; --sb-canvas-alt:#17123C;
  --sb-canvas-grad:linear-gradient(168deg,#0F1638 0%,#141541 55%,#1A1444 100%);
  --sb-surface:#1A2350; --sb-surface-raised:#26306A; --sb-surface-overlay:#2E3880;
  --sb-surface-sunken:#121A45; --sb-surface-track:#1B2454;
  --sb-surface-plate:#EDE3D4; --sb-plate-edge:#C8B7A4; --sb-plate-rim:#7C68C8; --sb-plate-ink:#16204A;

  --sb-ink:#EDF2FF; --sb-ink-secondary:#B7C3EA; --sb-ink-tertiary:#A3AFDA;
  --sb-ink-inverse:#0B1030; --sb-ink-on-bright:#0B1030;
  --sb-border-hairline:#2E3A73; --sb-border-control:#8B79D6;
  --sb-focus-ring:#7CF0F4; --sb-focus-gap:#0B1030;

  --sb-blue-300:#A9C2FF; --sb-blue-350:#8FB0FF; --sb-blue-400:#7FA3FF; --sb-blue-500:#4C78F2;
  --sb-blue-600:#3E69EA; --sb-blue-700:#2749CC; --sb-blue-950:#0B1030; --sb-blue-text:#8FB0FF;
  --sb-blue-200:#2E3880; --sb-blue-100:#232D5E;

  --sb-aqua-300:#7CF0F4; --sb-aqua-text:#7CF0F4; --sb-aqua-100:#0E3450;
  --sb-water-surface-highlight:#CFFEFF;
  --sb-water-top:#9BFEFF; --sb-water-mid:#5FEAF0; --sb-water-deep:#23B6D2;
  --sb-water-floor:#0B7EA0; --sb-water-shadow:#06556B;
  --sb-grad-water:linear-gradient(180deg,#9BFEFF 0%,#5FEAF0 38%,#23B6D2 72%,#0B7EA0 100%);
  --sb-glass-tint:linear-gradient(180deg,rgba(124,240,244,.14),rgba(124,240,244,.06));
  --sb-glass-edge:rgba(124,240,244,.28);

  --sb-lilac-300:#D6C6FF; --sb-lilac-350:#C3ACFF; --sb-lilac-400:#B9A2F0;
  --sb-lilac-500:#A98FF0; --sb-lilac-600:#8B79D6; --sb-lilac-700:#7C68C8;
  --sb-lilac-100:#2B2352; --sb-lilac-text:#C3ACFF;

  --sb-cta:linear-gradient(180deg,#3F6BE8 0%,#1E48CC 100%);
  --sb-cta-solid:#3E69EA;
  --sb-cta-active:linear-gradient(180deg,#2E58DC 0%,#16399F 100%);
  --sb-cta-lip:#0A2478; --sb-cta-ink:#FFFFFF;

  --sb-positive-500:#3FE3B4; --sb-positive-text:#5CEAC3;
  --sb-positive-pill:#0E3A30; --sb-positive-pill-ink:#5CEAC3;
  --sb-warning-500:#FFB92E; --sb-warning-text:#FFC24D;
  --sb-warning-pill:#3A2C12; --sb-warning-pill-ink:#FFC24D;
  --sb-danger-500:#FF8098; --sb-danger-text:#FF94A8;
  --sb-danger-pill:#3B1C2A; --sb-danger-pill-ink:#FF94A8;
  --sb-pill-neutral:#232D5E; --sb-pill-neutral-ink:#B7C3EA;

  --sb-shadow-1:0 1px 2px rgba(0,4,24,.50);
  --sb-shadow-2:0 10px 22px -10px rgba(0,4,24,.72);
  --sb-shadow-3:0 22px 44px -18px rgba(0,4,24,.78);
  --sb-shadow-4:0 24px 46px -20px rgba(0,4,24,.78);
  --sb-shadow-cta:0 12px 26px -10px rgba(76,120,242,.70);
  --sb-shadow-lilac:0 14px 30px -12px rgba(0,4,24,.72);
  --sb-glow-aqua:0 0 28px rgba(95,234,240,.32);
  --sb-gloss-top:inset 0 1.5px 0 rgba(255,255,255,.28);
  --sb-gloss-cap:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.07) 42%,transparent 58%);
  --sb-occlusion:inset 0 -14px 18px -12px rgba(0,4,24,.58);
  --sb-sticker:1.5px solid rgba(180,200,255,.14);
}

/* ═══════════ LAYER 2 — site-only tokens (composed from Layer 1) ═══════════ */

:root{
  --sb-pill-ink:#0E1A40;

  --sb-grad-secondary:linear-gradient(180deg,#F9FCFF,#E1EEFF);
  --sb-grad-card:linear-gradient(180deg,#F8FCFF 0%,#DDECFF 58%,#D2E3FE 100%);
  --sb-grad-card-lilac:linear-gradient(180deg,#FBF8FF,#E8DEFE);
  --sb-grad-card-plate:linear-gradient(180deg,#FCF7EE,#EDDFC9);
  --sb-grad-card-aqua:linear-gradient(180deg,#F2FCFE,#CFEFF8);
  --sb-grad-field:linear-gradient(180deg,#D8E6FA,#F8FBFF);

  --sb-gloss-rim:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.10) 38%,transparent 72%);
  --sb-card-ring:rgba(255,255,255,.95);
  --sb-card-inner:rgba(10,124,144,.18);
  --sb-sec-border:rgba(14,26,64,.10);
  --sb-sec-lip:rgba(14,26,64,.13);

  /* §5.8 — blooms, not blocks */
  --sb-bloom-1:radial-gradient(1000px 620px at 86% -4%, rgba(85,224,235,.52), transparent 64%);
  --sb-bloom-2:radial-gradient(820px 680px at -4% 30%, rgba(169,142,240,.46), transparent 66%);
  --sb-bloom-3:radial-gradient(1040px 760px at 74% 70%, rgba(122,156,244,.42), transparent 66%);
}

@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --sb-pill-ink:#0E1A40;
  --sb-grad-secondary:linear-gradient(180deg,#242D63,#19204C);
  --sb-grad-card:linear-gradient(180deg,#26306A,#1A2350);
  --sb-grad-card-lilac:linear-gradient(180deg,#2E2764,#221C4E);
  --sb-grad-card-plate:linear-gradient(180deg,#F6EFE5,#DDD0CB);
  --sb-grad-card-aqua:linear-gradient(180deg,#123A54,#132A4E);
  --sb-grad-field:linear-gradient(180deg,#0D1338,#1A2350);
  --sb-gloss-rim:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.07) 40%,transparent 72%);
  --sb-card-ring:rgba(180,200,255,.16);
  --sb-card-inner:rgba(0,4,24,.50);
  --sb-sec-border:rgba(180,200,255,.14);
  --sb-sec-lip:#0A0F30;
  --sb-bloom-1:radial-gradient(1000px 620px at 86% -4%, rgba(70,214,232,.26), transparent 64%);
  --sb-bloom-2:radial-gradient(820px 680px at -4% 30%, rgba(150,110,240,.28), transparent 66%);
  --sb-bloom-3:radial-gradient(1040px 760px at 74% 70%, rgba(78,110,235,.26), transparent 66%);
}}

:root[data-theme="dark"]{
  --sb-pill-ink:#0E1A40;
  --sb-grad-secondary:linear-gradient(180deg,#242D63,#19204C);
  --sb-grad-card:linear-gradient(180deg,#26306A,#1A2350);
  --sb-grad-card-lilac:linear-gradient(180deg,#2E2764,#221C4E);
  --sb-grad-card-plate:linear-gradient(180deg,#F6EFE5,#DDD0CB);
  --sb-grad-card-aqua:linear-gradient(180deg,#123A54,#132A4E);
  --sb-grad-field:linear-gradient(180deg,#0D1338,#1A2350);
  --sb-gloss-rim:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.07) 40%,transparent 72%);
  --sb-card-ring:rgba(180,200,255,.16);
  --sb-card-inner:rgba(0,4,24,.50);
  --sb-sec-border:rgba(180,200,255,.14);
  --sb-sec-lip:#0A0F30;
  --sb-bloom-1:radial-gradient(1000px 620px at 86% -4%, rgba(70,214,232,.26), transparent 64%);
  --sb-bloom-2:radial-gradient(820px 680px at -4% 30%, rgba(150,110,240,.28), transparent 66%);
  --sb-bloom-3:radial-gradient(1040px 760px at 74% 70%, rgba(78,110,235,.26), transparent 66%);
}

/* ═══════════ LAYER 3 — base ═══════════ */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
html,body{margin:0;padding:0}
body{
  font-family:var(--sb-font);
  color:var(--sb-ink);
  background:var(--sb-canvas);
  background-image:var(--sb-canvas-grad);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:var(--sb-bloom-1),var(--sb-bloom-2),var(--sb-bloom-3)}
.page{position:relative;z-index:1}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
img{max-width:100%}
h1,h2,h3,p{margin:0}

/* ── a11y ── */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-72px;z-index:80;
  font:700 15px/20px var(--sb-font);color:var(--sb-cta-ink);
  padding:12px 20px;border-radius:var(--sb-r-sm);background:var(--sb-cta);
  text-decoration:none;box-shadow:var(--sb-shadow-3);
  transition:top var(--sb-t-row) var(--sb-ease-out)}
.skip:focus-visible{top:14px}

/* §6.3 — the focus ring is two-tone, ring + gap, never single-colour */
:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:2px solid var(--sb-focus-ring);
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--sb-focus-gap);
}
.btn:focus-visible,.chev-btn:focus-visible{border-radius:var(--sb-r-md)}

/* ── type ── */
.eyebrow{font:800 11px/14px var(--sb-font);letter-spacing:1.4px;text-transform:uppercase}
.h-hero{font:800 56px/62px var(--sb-font);letter-spacing:-1.6px}
.h-sec{font:800 34px/40px var(--sb-font);letter-spacing:-.9px}
.h-card{font:800 19px/24px var(--sb-font);letter-spacing:-.3px}
.body{font:500 17px/27px var(--sb-font)}
.small{font:500 14px/20px var(--sb-font)}
.tnum{font-variant-numeric:tabular-nums}

/* ═══════════ buttons ═══════════ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;cursor:pointer;text-decoration:none;white-space:nowrap;font-family:var(--sb-font);
  transition:transform var(--sb-t-press) var(--sb-ease-out),filter var(--sb-t-hover) var(--sb-ease-out)}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(2px)}
.btn-primary{font:700 17px/22px var(--sb-font);letter-spacing:-.1px;color:var(--sb-cta-ink);
  padding:14px 24px;border-radius:var(--sb-r-md);background:var(--sb-cta);
  box-shadow:var(--sb-gloss-top),var(--sb-occlusion),0 5px 0 0 var(--sb-cta-lip),
    var(--sb-shadow-cta),0 2px 4px rgba(14,26,64,.20)}
.btn-primary::after{content:"";position:absolute;inset:1px 1px 46% 1px;
  border-radius:15px 15px 10px 10px;background:var(--sb-gloss-cap);pointer-events:none}
.btn-secondary{font:700 17px/22px var(--sb-font);color:var(--sb-ink);padding:13px 22px;
  border-radius:var(--sb-r-md);background:var(--sb-grad-secondary);
  border:2px solid var(--sb-sec-border);
  box-shadow:var(--sb-gloss-top),0 4px 0 0 var(--sb-sec-lip),0 8px 16px -8px rgba(14,26,64,.26)}
.btn-sm{font:700 14px/18px var(--sb-font);padding:10px 18px;border-radius:var(--sb-r-sm)}
.btn-sm.btn-primary{box-shadow:var(--sb-gloss-top),var(--sb-occlusion),0 4px 0 0 var(--sb-cta-lip),
  0 8px 16px -7px rgba(16,48,160,.52),0 2px 4px rgba(14,26,64,.18)}
.btn-sm.btn-primary::after{inset:1px 1px 48% 1px;border-radius:13px 13px 9px 9px}
/* §5.8 — the waitlist button is the aqua fill with ink text: the blue primary
   would vanish against the deep panel. */
.btn-aqua{font:700 17px/22px var(--sb-font);color:#0E1A40;padding:14px 24px;
  border-radius:var(--sb-r-md);
  background:linear-gradient(180deg,#9AF3F5 0%,#55E0EB 46%,#16BED6 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.90),inset 0 -14px 18px -12px rgba(10,124,144,.75),
    0 5px 0 0 #0A7C90,0 12px 24px -8px rgba(10,124,144,.60),0 2px 4px rgba(3,18,40,.22)}
.btn-aqua::after{content:"";position:absolute;inset:1px 1px 46% 1px;
  border-radius:15px 15px 10px 10px;background:var(--sb-gloss-cap);pointer-events:none}
.btn[aria-disabled="true"],.btn:disabled{opacity:.7;pointer-events:none}

/* ═══════════ pills ═══════════ */
.pill{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:4px 12px;
  border-radius:var(--sb-r-pill);font:800 12.5px/18px var(--sb-font);border:var(--sb-sticker)}
.pill-sun{color:var(--sb-pill-ink);background:linear-gradient(180deg,#FFD98A,#FFAA14);
  box-shadow:0 2.5px 0 rgba(161,107,13,.38),0 5px 9px -3px rgba(255,170,20,.50)}
.pill-lil{color:#2E2652;background:linear-gradient(180deg,#E2DAFE,#CFC4FD);
  box-shadow:0 2.5px 0 rgba(106,93,169,.35),0 5px 9px -3px rgba(156,134,216,.45)}
.pill-white{color:var(--sb-ink);background:linear-gradient(180deg,#FFFFFF,#F1F4FD);
  border:1.5px solid rgba(14,26,64,.08);
  box-shadow:0 2.5px 0 rgba(14,26,64,.10),0 8px 16px -6px rgba(14,26,64,.28)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pill-white{
  color:#EDF2FF;background:linear-gradient(180deg,#2E3880,#212A63);
  border-color:rgba(180,200,255,.16);
  box-shadow:0 2.5px 0 rgba(0,4,24,.5),0 10px 20px -8px rgba(0,4,24,.7)}}
:root[data-theme="dark"] .pill-white{color:#EDF2FF;background:linear-gradient(180deg,#2E3880,#212A63);
  border-color:rgba(180,200,255,.16);box-shadow:0 2.5px 0 rgba(0,4,24,.5),0 10px 20px -8px rgba(0,4,24,.7)}

/* ═══════════ card ═══════════ */
.card{border-radius:var(--sb-r-lg);padding:24px;background:var(--sb-grad-card);
  border:var(--sb-sticker);
  box-shadow:inset 0 1.5px 0 var(--sb-card-ring),inset 0 -14px 20px -16px var(--sb-card-inner),
    var(--sb-shadow-3),0 2px 6px rgba(14,26,64,.06)}
.card-lilac{background:var(--sb-grad-card-lilac)}
.card-plate{background:var(--sb-grad-card-plate)}
.card-aqua{background:var(--sb-grad-card-aqua)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  .card-plate{background:linear-gradient(180deg,#3A3150,#2A2440)}
}}
:root[data-theme="dark"] .card-plate{background:linear-gradient(180deg,#3A3150,#2A2440)}
.card .h-card{margin-bottom:9px}
.card .small{color:var(--sb-ink-secondary);font-size:14.5px;line-height:21px}

/* ═══════════ nav ═══════════ */
.nav-outer{position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--sb-canvas) 82%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent}
.nav-outer.is-stuck{border-bottom-color:var(--sb-border-hairline);box-shadow:var(--sb-shadow-2)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--sb-ink)}
.brandname{font:800 21px var(--sb-font);letter-spacing:-.4px}
.navlinks{display:flex;align-items:center;gap:28px}
.navlinks a{font:700 14.5px var(--sb-font);color:var(--sb-ink-secondary);text-decoration:none}
.navlinks a:hover{color:var(--sb-ink)}
.navlinks a.btn-primary{color:var(--sb-cta-ink)}
/* §5.8 phone — a disclosure pebble that opens the anchor list */
.navmob{display:none;align-items:center;justify-content:center;width:38px;height:38px;border:0;
  border-radius:13px;color:var(--sb-lilac-900);background:linear-gradient(180deg,#E2DAFE,#CFC4FD);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 2.5px 0 rgba(106,93,169,.40);cursor:pointer}
.navmenu{display:none}

/* ═══════════ hero ═══════════ */
.hero{display:grid;grid-template-columns:1fr 540px;gap:48px;align-items:center;padding:34px 0 40px}
.hero h1{margin:20px 0 0}
.grad-word{background:linear-gradient(96deg,#1440BE 0%,#0A7C90 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .grad-word{
  background:linear-gradient(96deg,#8FB0FF 0%,#7CF0F4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}}
:root[data-theme="dark"] .grad-word{background:linear-gradient(96deg,#8FB0FF 0%,#7CF0F4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .body{margin-top:20px;max-width:505px;color:var(--sb-ink-secondary)}
.hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.trust{margin-top:30px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font:500 14px var(--sb-font);color:var(--sb-ink-tertiary);list-style:none;padding:0}
.trust li{display:flex;align-items:center;gap:12px}
.trust li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--sb-lilac-500)}

.stage{position:relative;height:452px;display:flex;align-items:center;justify-content:center}
.plinth{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:368px;height:74px;border-radius:50%;z-index:1;
  background:radial-gradient(closest-side,rgba(88,72,166,.72),rgba(88,72,166,.24) 56%,rgba(88,72,166,0) 74%);
  filter:blur(5px)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .plinth{
  background:radial-gradient(closest-side,rgba(6,3,28,.80),rgba(6,3,28,.24) 58%,rgba(6,3,28,0) 74%)}}
:root[data-theme="dark"] .plinth{
  background:radial-gradient(closest-side,rgba(6,3,28,.80),rgba(6,3,28,.24) 58%,rgba(6,3,28,0) 74%)}

/* ═══════════ the bottle ═══════════ */
.bt{position:relative;display:block;border:0;padding:0;background:none}
.bt img{width:100%;height:100%;display:block}
.bt .wov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bt .plate{position:absolute;left:38.83%;top:25.2%;width:25.6%;height:8.0%;
  background:var(--sb-grad-card-plate);border:1.6px solid var(--sb-plate-rim);border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 0 rgba(14,26,64,.16),0 8px 14px -5px rgba(14,26,64,.40);
  display:flex;align-items:center;justify-content:center;
  font:800 var(--pfs,15px)/1 var(--sb-font);font-variant-numeric:tabular-nums;
  color:#16204A;letter-spacing:-.2px;padding-bottom:2%}
button.bt{cursor:pointer;transition:transform var(--sb-t-hover) var(--sb-ease-out)}
button.bt:hover{transform:translateY(-4px)}
button.bt:focus-visible{outline:2px solid var(--sb-focus-ring);outline-offset:6px;border-radius:24px}

/* ═══════════ band ═══════════ */
.band{text-align:center;padding:26px 0 92px}
.band .h-sec{max-width:820px;margin:0 auto}
.band .body{max-width:700px;margin:16px auto 0;color:var(--sb-ink-secondary)}

/* ═══════════ sections ═══════════ */
.sec{padding:0 0 100px}
.sechead{text-align:center;margin-bottom:44px}
.sechead .eyebrow{color:#045C74;margin-bottom:12px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sechead .eyebrow{
  color:var(--sb-aqua-300)}}
:root[data-theme="dark"] .sechead .eyebrow{color:var(--sb-aqua-300)}
.sechead .body{max-width:660px;margin:16px auto 0;color:var(--sb-ink-secondary)}

.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none;margin:0;padding:0}
.tile{width:104px;height:104px;border-radius:28px;position:relative;
  display:flex;align-items:flex-end;justify-content:center;margin-bottom:26px;
  border:var(--sb-sticker)}
.tile::after{content:"";position:absolute;inset:1px 1px 52% 1px;border-radius:27px 27px 15px 15px;
  background:var(--sb-gloss-rim);pointer-events:none}
.tile-sun{background:linear-gradient(180deg,#FFEDB8,#FFB92E);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -14px 18px -12px rgba(150,86,0,.55),
    0 4px 0 0 #E09A10,0 12px 24px -10px rgba(255,170,20,.60)}
.tile-aqua{background:linear-gradient(180deg,#A8F8FA,#55E0EB);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -14px 18px -12px rgba(10,124,144,.55),
    0 4px 0 0 #16BED6,0 12px 24px -10px rgba(22,190,214,.60)}
.tile-lil{background:linear-gradient(180deg,#E2DAFE,#B9A2F0);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -14px 18px -12px rgba(70,59,120,.45),
    0 4px 0 0 #9C86D8,0 12px 24px -10px rgba(156,134,216,.60)}
.tile .bt{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);z-index:2}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px;
  list-style:none;padding:0;counter-reset:step}
.step{border-radius:var(--sb-r-lg);padding:20px 22px;
  background:linear-gradient(180deg,rgba(248,252,255,.97),rgba(214,232,255,.88));
  border:1.5px solid rgba(255,255,255,.92);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),0 12px 26px -18px rgba(14,26,64,.42)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .step{
  background:linear-gradient(180deg,rgba(46,56,128,.52),rgba(26,35,80,.38));
  border-color:rgba(180,200,255,.12);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.10),0 12px 24px -16px rgba(0,4,24,.7)}}
:root[data-theme="dark"] .step{background:linear-gradient(180deg,rgba(46,56,128,.52),rgba(26,35,80,.38));
  border-color:rgba(180,200,255,.12);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.10),0 12px 24px -16px rgba(0,4,24,.7)}
/* §5.8 v2.1 — the step badge is the character's own cream plate, 2 px plate-rim */
.num{width:36px;height:36px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font:800 16px var(--sb-font);color:var(--sb-plate-ink);background:var(--sb-grad-card-plate);
  border:2px solid var(--sb-plate-rim);margin-bottom:13px;position:relative;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),0 3px 0 0 rgba(70,59,120,.42),
    0 8px 14px -6px rgba(106,93,169,.50)}
.step h3{font:800 15.5px/20px var(--sb-font);margin-bottom:6px}
.step p:not(.num){font:500 14px/20px var(--sb-font);color:var(--sb-ink-secondary)}

/* ═══════════ pricing ═══════════ */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:940px;margin:0 auto;
  align-items:stretch}
.price,.price-feat{display:flex;flex-direction:column}
.price{position:relative;padding:28px}
.price-feat{border-radius:var(--sb-r-lg);padding:28px;position:relative;
  background:linear-gradient(162deg,#D3FAFC 0%,#DEEBFE 46%,#DCCFFE 100%);
  border:2px solid var(--sb-plate-rim);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -16px 24px -18px rgba(70,59,120,.32),
    0 20px 42px -18px rgba(106,93,169,.46),0 2px 6px rgba(14,26,64,.06)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .price-feat{
  background:linear-gradient(162deg,#123A5E 0%,#22306E 48%,#33285F 100%);border-color:#7C68C8;
  box-shadow:inset 0 1.5px 0 rgba(180,200,255,.18),inset 0 -16px 24px -18px rgba(0,4,24,.5),
    0 22px 44px -18px rgba(0,4,24,.72)}}
:root[data-theme="dark"] .price-feat{
  background:linear-gradient(162deg,#123A5E 0%,#22306E 48%,#33285F 100%);border-color:#7C68C8;
  box-shadow:inset 0 1.5px 0 rgba(180,200,255,.18),inset 0 -16px 24px -18px rgba(0,4,24,.5),
    0 22px 44px -18px rgba(0,4,24,.72)}
.tag{position:absolute;top:-13px;right:22px}
.plan{font:800 13px var(--sb-font);letter-spacing:1.2px;text-transform:uppercase;
  color:var(--sb-ink-tertiary)}
.price-feat .plan{color:var(--sb-lilac-text)}
.amount{display:flex;align-items:baseline;gap:8px;margin:8px 0 10px}
.amount b{font:800 44px/48px var(--sb-font);letter-spacing:-1.4px;font-variant-numeric:tabular-nums}
.amount span{font:700 15px var(--sb-font);color:var(--sb-ink-tertiary)}
.blurb{font:500 14.5px/21px var(--sb-font);color:var(--sb-ink-secondary);margin-bottom:18px}
.feats{flex:1;list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:11px}
.feats li{display:flex;align-items:center;gap:10px;font:500 14.5px/20px var(--sb-font)}
.tick{flex:none;width:22px;height:22px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;color:#0E1A40;
  background:linear-gradient(180deg,#A8F8FA,#55E0EB);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 0 rgba(10,124,144,.35),
    0 4px 7px -3px rgba(22,190,214,.5)}
.tick-lil{background:linear-gradient(180deg,#E2DAFE,#B9A2F0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 0 rgba(106,93,169,.35),
    0 4px 7px -3px rgba(156,134,216,.5)}
.skins{display:flex;align-items:center;gap:12px;margin:0 0 20px;padding:12px 14px;
  border-radius:var(--sb-r-md);background:rgba(106,93,169,.14);
  box-shadow:inset 0 2px 4px rgba(70,59,120,.24),inset 0 -1px 0 rgba(255,255,255,.65)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .skins{
  background:rgba(0,0,0,.34);box-shadow:inset 0 2px 4px rgba(0,0,0,.5),inset 0 0 0 1px rgba(180,200,255,.10)}}
:root[data-theme="dark"] .skins{background:rgba(0,0,0,.34);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5),inset 0 0 0 1px rgba(180,200,255,.10)}
.skins .lbl{font:700 12.5px var(--sb-font);color:var(--sb-lilac-900);margin-left:2px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .skins .lbl{color:#D6C6FF}}
:root[data-theme="dark"] .skins .lbl{color:#D6C6FF}
.note{font:500 13.5px/19px var(--sb-font);color:var(--sb-lilac-900);margin:0 0 16px;
  padding:11px 13px;border-radius:var(--sb-r-sm);background:rgba(106,93,169,.11);
  box-shadow:inset 0 1px 3px rgba(70,59,120,.16)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .note{
  color:var(--sb-ink-secondary);background:rgba(0,0,0,.30);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}}
:root[data-theme="dark"] .note{color:var(--sb-ink-secondary);background:rgba(0,0,0,.30);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.caveat{text-align:center;margin-top:24px;font:500 14px var(--sb-font);color:var(--sb-ink-tertiary)}
.price .btn,.price-feat .btn{width:100%}

/* ═══════════ waitlist ═══════════ */
/* §5.8 v2.1 — the right stop is clamped to aqua-900 #045C74; the band never
   goes lighter than aqua-850 under any text. */
.wait{position:relative;border-radius:var(--sb-r-xl);padding:44px 48px;overflow:hidden;
  background:linear-gradient(94deg,#0A2F9E 0%,#0A3C8E 40%,#084F72 68%,#055F78 88%,#045C74 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.28),inset 0 -22px 34px -26px rgba(2,12,50,.7),
    0 26px 52px -22px rgba(10,40,130,.55)}
.wait::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 320px at 8% -20%,rgba(255,255,255,.20),transparent 62%)}
.wait-in{position:relative;display:grid;grid-template-columns:1fr 210px;gap:34px;align-items:center}
.wait h2{color:#fff}
.wait .body{color:#DDEBFF;margin-top:12px;max-width:520px}
.waitform{display:flex;gap:12px;margin-top:26px;max-width:520px}
.field{flex:1;min-width:0;font:500 16px var(--sb-font);color:var(--sb-ink);padding:14px 16px;
  border-radius:var(--sb-r-sm);border:1.5px solid rgba(255,255,255,.55);
  background:var(--sb-grad-field);box-shadow:inset 0 2px 4px rgba(14,26,64,.14)}
.field::placeholder{color:var(--sb-ink-tertiary);opacity:1}
/* §6.3 — on a field the indicator is a halo outside the element, never an inner ring */
.field:focus-visible{outline:2px solid var(--sb-focus-ring);outline-offset:4px;
  box-shadow:0 0 0 4px var(--sb-focus-gap),inset 0 2px 4px rgba(14,26,64,.14)}
.fine{margin-top:16px;font:500 13.5px var(--sb-font);color:#CFE4FF}
.fine a{color:#fff}
.wait .bt{margin-left:auto}
.wmsg{margin-top:14px;font:600 14px/20px var(--sb-font);color:#fff;min-height:0}
.wmsg:empty{display:none}
.wmsg[data-state="error"]{display:inline-block;color:#3B0512;
  background:linear-gradient(180deg,#FFC2CD,#FF8098);
  padding:7px 14px;border-radius:var(--sb-r-pill)}
.wmsg[data-state="ok"]{color:#D6FDFD}

/* ═══════════ faq ═══════════ */
.faq{display:flex;flex-direction:column;gap:12px;max-width:880px;margin:0 auto}
.faq .card{padding:20px 22px}
.q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:0;padding:0;cursor:pointer;text-align:left;color:inherit;
  font-family:var(--sb-font)}
.faq h3{margin:0}
.q .qt{font:800 16.5px/22px var(--sb-font);letter-spacing:-.2px}
.chev{flex:none;width:30px;height:30px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;color:#3B2F6B;background:linear-gradient(180deg,#E2DAFE,#CFC4FD);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2.5px 0 rgba(106,93,169,.35),
    0 5px 9px -4px rgba(156,134,216,.5);
  transition:transform var(--sb-t-row) var(--sb-ease-out)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .chev{
  color:#1E1840;background:linear-gradient(180deg,#A98FF0,#7C68C8)}}
:root[data-theme="dark"] .chev{color:#1E1840;background:linear-gradient(180deg,#A98FF0,#7C68C8)}
.chev svg{transform:rotate(-90deg);transition:transform var(--sb-t-row) var(--sb-ease-out)}
.q[aria-expanded="true"] .chev svg{transform:rotate(0deg)}
.a{margin-top:13px;padding-top:13px;border-top:1px solid var(--sb-border-hairline);
  font:500 14.5px/22px var(--sb-font);color:var(--sb-ink-secondary);max-width:760px}
.a[hidden]{display:none}

/* ═══════════ prose (privacy / terms) ═══════════ */
.prose{max-width:720px;margin:0 auto;padding:12px 0 72px}
.prose h1{font:800 40px/46px var(--sb-font);letter-spacing:-1.2px;margin-bottom:10px}
.prose h2{font:800 20px/26px var(--sb-font);letter-spacing:-.3px;margin:30px 0 8px}
.prose p{font:500 16px/27px var(--sb-font);color:var(--sb-ink-secondary);margin:0 0 14px}
.prose a{color:var(--sb-blue-text);font-weight:700}
.prose .updated{font:600 13.5px var(--sb-font);color:var(--sb-ink-tertiary);margin-bottom:26px}

/* ═══════════ footer ═══════════ */
.foot{border-top:1px solid var(--sb-border-hairline);padding:28px 0 40px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot .small{color:var(--sb-ink-tertiary)}
.footlinks{display:flex;gap:22px;flex-wrap:wrap}
.footlinks a{font:700 14px var(--sb-font);color:var(--sb-ink-secondary);text-decoration:none}
.footlinks a:hover{color:var(--sb-ink)}

/* ═══════════ responsive — §5.8 ═══════════ */
@media (max-width:900px){
  html{scroll-padding-top:80px}
  .nav{height:66px}
  .navlinks{gap:0}
  .navlinks a:not(.btn-primary){display:none}
  .navlinks a.btn-primary{display:inline-flex}
  .navmob{display:flex}
  .navmenu{display:block;overflow:hidden;max-height:0;
    transition:max-height var(--sb-t-page) var(--sb-ease-out)}
  .navmenu.is-open{max-height:320px}
  .navmenu ul{list-style:none;margin:0;padding:0 0 14px;display:flex;flex-direction:column;gap:2px}
  .navmenu a{display:block;padding:11px 14px;border-radius:var(--sb-r-sm);text-decoration:none;
    font:700 15px var(--sb-font);color:var(--sb-ink);background:var(--sb-grad-secondary);
    border:1px solid var(--sb-sec-border)}

  .hero{grid-template-columns:1fr;gap:6px;padding:12px 0 56px}
  .hero .stage{order:-1;height:336px}
  .stage .bt{width:300px!important;height:300px!important}
  .plinth{width:262px;height:56px}
  .stage .pill{font-size:11.5px;min-height:24px;padding:3px 10px}
  /* §5.8 — the two floating labels are constrained to the hero's inner bounds */
  .stage .pill-white{left:0!important;right:auto!important;max-width:60%;bottom:96px!important}
  .stage .pill-sun{right:0!important;left:auto!important;top:196px!important}
  .hero h1{margin-top:16px}
  .h-hero{font-size:40px;line-height:46px;letter-spacing:-1.1px}
  .h-sec{font-size:27px;line-height:33px;letter-spacing:-.6px}
  .body{font-size:16px;line-height:25px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .trust{row-gap:6px}

  .cards3,.steps{grid-template-columns:1fr}
  /* §5.8 — pricing stacks with the featured plan first */
  .prices{display:flex;flex-direction:column-reverse}
  .wait{padding:30px 22px}
  .wait-in{grid-template-columns:1fr}
  .wait-in .bt{display:none}
  .waitform{flex-direction:column;max-width:none}
  .band{padding-bottom:56px}
  .sec{padding-bottom:64px}
  .foot{flex-direction:column;gap:14px;text-align:center}
  .prose h1{font-size:32px;line-height:38px}
}

@media (max-width:420px){
  .h-hero{font-size:34px;line-height:40px}
  .amount b{font-size:38px;line-height:42px}
}

/* ═══════════ §6.5 Reduce Motion ═══════════ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  button.bt:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 4 — 2026-09-16 rebuild: real-capture hero, screenshot showcase,
   subscription pricing (lunch-vs-year anchor), all-inclusive features,
   honest social-proof placeholder.  Page is pinned dark to match the app.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── hero: a real capture of the hanging bottle ── */
.hero-fig{position:relative;z-index:2;display:block;height:452px;width:auto;margin:0 auto;
  filter:drop-shadow(0 34px 46px rgba(0,4,24,.60))}
.stage .pill-white{position:absolute;z-index:3}

/* ── screenshot showcase ── */
.shots{column-count:2;column-gap:24px;max-width:1000px;margin:0 auto}
.shot{break-inside:avoid;margin:0 0 24px;border-radius:var(--sb-r-lg);overflow:hidden;
  background:linear-gradient(180deg,#0E1533,#0A1030);border:var(--sb-sticker);
  box-shadow:inset 0 1.5px 0 var(--sb-card-ring),var(--sb-shadow-3)}
.shot img{display:block;width:100%;height:auto;background:#0A0F2A}
.shot figcaption{padding:15px 20px 18px}
.shot figcaption b{display:block;font:800 16px/21px var(--sb-font);letter-spacing:-.2px;
  color:var(--sb-ink);margin-bottom:3px}
.shot figcaption span{font:500 14px/20px var(--sb-font);color:var(--sb-ink-secondary)}

/* ── pricing: the lunch-vs-year anchor ── */
.anchor{max-width:640px;margin:0 auto 42px;display:flex;align-items:stretch;
  justify-content:center;gap:16px;flex-wrap:wrap}
.anchor-card{flex:1;min-width:210px;border-radius:var(--sb-r-lg);padding:22px 24px;
  background:var(--sb-grad-card);border:var(--sb-sticker);
  box-shadow:inset 0 1.5px 0 var(--sb-card-ring),var(--sb-shadow-2)}
.anchor-card .lead{font:800 34px/36px var(--sb-font);letter-spacing:-1.2px;
  font-variant-numeric:tabular-nums}
.anchor-card .sub{font:500 14px/20px var(--sb-font);color:var(--sb-ink-secondary);margin-top:7px}
.anchor-past{background:linear-gradient(180deg,#232C5E,#1A2350)}
.anchor-past .lead{color:var(--sb-ink-tertiary);text-decoration:line-through;
  text-decoration-thickness:2.5px;text-decoration-color:var(--sb-danger-500)}
.anchor-now{background:var(--sb-grad-card-aqua)}
.anchor-now .lead{color:var(--sb-aqua-text)}
.anchor-vs{align-self:center;font:800 12px var(--sb-font);letter-spacing:1.4px;
  text-transform:uppercase;color:var(--sb-ink-tertiary)}

/* ── two billing cards ── */
.plan-name{font:800 13px var(--sb-font);letter-spacing:1.2px;text-transform:uppercase;
  color:var(--sb-ink-tertiary)}
.price-feat .plan-name{color:var(--sb-lilac-text)}
.price .plan-sub,.price-feat .plan-sub{font:500 14.5px/21px var(--sb-font);
  color:var(--sb-ink-secondary);margin:6px 0 20px}
.price .amount,.price-feat .amount{margin:8px 0 2px}

/* ── everything-included grid ── */
.allin{max-width:940px;margin:34px auto 0;border-radius:var(--sb-r-xl);padding:28px 30px;
  background:linear-gradient(180deg,rgba(46,56,128,.38),rgba(18,26,69,.30));
  border:var(--sb-sticker);box-shadow:inset 0 1.5px 0 var(--sb-card-ring),var(--sb-shadow-2)}
.allin-h{text-align:center;font:800 18px/24px var(--sb-font);letter-spacing:-.3px;
  color:var(--sb-ink);margin-bottom:22px}
.allfeats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:14px 26px}
.allfeats li{display:flex;align-items:center;gap:11px;font:500 14.5px/20px var(--sb-font);
  color:var(--sb-ink-secondary)}

/* ── honest social-proof placeholder ── */
.proof{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:1000px;margin-inline:auto}
.proof-card{border-radius:var(--sb-r-lg);padding:24px;
  background:linear-gradient(180deg,rgba(46,56,128,.22),rgba(18,26,69,.16));
  border:1.5px dashed var(--sb-border-control)}
.proof-mark{font:800 40px/28px var(--sb-font);color:var(--sb-lilac-500);opacity:.55;display:block;
  height:22px}
.proof-card p{font:600 15.5px/23px var(--sb-font);color:var(--sb-ink-secondary);margin:14px 0 16px}
.proof-by{font:600 13px var(--sb-font);color:var(--sb-ink-tertiary)}

@media (max-width:900px){
  .hero-fig{height:300px}
  .stage .pill-white{left:0!important;right:auto!important;bottom:14px!important;max-width:70%}
  .shots{column-count:1}
  .anchor-vs{width:100%;text-align:center;padding:2px 0}
  .allfeats{grid-template-columns:1fr 1fr;gap:12px 20px}
  .proof{grid-template-columns:1fr}
}
@media (max-width:520px){
  .allfeats{grid-template-columns:1fr}
  .anchor-card .lead{font-size:30px}
}