/* ============================================================
   LIGHT BUILD — Alpha Pod on the measured light-dominant rhythm
   white / #f8fafc alternation + dark bass (#0f172a, #020617)
   Hero = deep ink gradient, accent = Alpha Pod gold #b8985a
   ============================================================ */

:root{
  /* brand — brass / champagne / bronze. gold is never a large flat fill */
  --gold:#b8985a;        /* brass — accent strokes, hairlines, eyebrows */
  --gold-bright:#d9c28f; /* champagne — gold TEXT on dark surfaces */
  --gold-deep:#8a6f3a;   /* bronze — gold TEXT on light surfaces (4.8:1 on white) */
  --gold-metal:linear-gradient(135deg,#7d5a30 0%,#c8a84b 45%,#f0e1b0 100%);
  --primary:var(--gold); --primary-bright:var(--gold-bright);
  --gold-text:var(--gold-deep);
  --primary-tint:rgba(184,152,90,.12);
  --primary-line:rgba(184,152,90,.34);
  --chip-bg:#f1f5f9;
  --chip-border:rgba(15,23,42,.07);
  --ice:#5ad1ff;
  --icon-ink:#475569;

  /* surfaces */
  --bg:#ffffff; --bg-elevated:#f8fafc;
  --dark-bg:#020617; --dark-bg-elevated:#0f172a;

  /* text (light default) */
  --text:#0f172a; --text-secondary:#475569; --text-muted:#64748b;
  --border:rgba(0,0,0,.08); --scrim:rgba(0,0,0,.55); --border-light:rgba(0,0,0,.04);
  --card-bg:rgba(255,255,255,.7); --card-solid:#ffffff;

  --green:#22c55e; --amber:#f59e0b; --red:#ef4444;

  /* scales */
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;
  --radius-2xl:32px;--radius-3xl:48px;--radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12);
  --shadow-xl:0 24px 80px rgba(0,0,0,.16);
  --shadow-lg-ctx:var(--shadow-lg);
  --shadow-card:var(--shadow-xl);
  --hover-border:var(--primary);

  /* glass */
  --glass-bg:rgba(255,255,255,.6);--glass-border:rgba(255,255,255,.2);--glass-blur:blur(20px);

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);--ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --duration:200ms;--duration-md:300ms;--duration-lg:500ms;
  --duration-hover:170ms;   /* iteration 5: hover light responds immediately */

  /* shared ink for mask gradients (never painted, only used as a mask stop) */
  --mask-ink:#000000;
  --on-gold:#1a1408;        /* text that sits on the metallic gold fill */

  /* type */
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --container:1200px;

  /* hero */
  --hero-bg:linear-gradient(155deg,#0a0f1e 0%,#131c30 46%,#1e293b 100%);
  --hero-fg:#ffffff;
  --hero-fg-dim:rgba(255,255,255,.78);
  --hero-fg-faint:rgba(255,255,255,.52);
  --blob-a:radial-gradient(circle at 50% 50%,rgba(184,152,90,.20),transparent 68%);
  --blob-b:radial-gradient(circle at 50% 50%,rgba(90,209,255,.10),transparent 68%);
  --blob-c:radial-gradient(circle at 50% 50%,rgba(217,194,143,.10),transparent 66%);
  --device-border:rgba(255,255,255,.12);
  --device-shadow:0 40px 120px rgba(2,6,23,.6),0 0 0 1px rgba(255,255,255,.05);

  /* buttons */
  --btn-primary-bg:#ffffff; --btn-primary-bg-hover:#ffffff; --btn-primary-fg:#0f172a;
  --btn-primary-shadow:0 4px 26px rgba(184,152,90,.38),0 0 18px rgba(184,152,90,.12);
  --btn-primary-shadow-hover:0 8px 34px rgba(184,152,90,.55),0 0 26px rgba(184,152,90,.2);
  --glass-btn-bg:rgba(255,255,255,.12);--glass-btn-bg-hover:rgba(255,255,255,.2);
  --glass-btn-fg:#ffffff;--glass-btn-border:rgba(255,255,255,.28);

  /* header */
  --nav-fg:rgba(255,255,255,.82); --nav-fg-hover:#ffffff; --nav-fg-scrolled:#334155;
  --nav-hover-bg:rgba(255,255,255,.08);
  --header-bg:rgba(255,255,255,.72); --header-border:rgba(15,23,42,.08);
  --nav-cta-bg:#ffffff;--nav-cta-bg-hover:#ffffff;--nav-cta-fg:#0f172a;
  --drop-bg:rgba(255,255,255,.96);--drop-border:rgba(15,23,42,.08);
  --drop-shadow:0 18px 50px rgba(15,23,42,.14);
  --drop-fg:#0f172a;--drop-muted:#64748b;--drop-hover:rgba(15,23,42,.04);

  --price-featured-shadow:0 8px 32px rgba(0,0,0,.12);
  --input-bg:rgba(255,255,255,.06);
  --focus-ring:rgba(184,152,90,.25);
  --cta-bg:#020617; --footer-bg:#020617; --footer-border:rgba(255,255,255,.08);
  --pill-bg:rgba(15,23,42,.9);--pill-fg:#ffffff;--pill-border:rgba(255,255,255,.14);
}

/* ---------- surface-context token layer ----------
   base.css holds no colour of its own; these two blocks carry every value a
   light band or a dark band needs in this build. See THEMING.md. */
.on-light{
  --text:#0f172a;--text-secondary:#475569;--text-muted:#64748b;
  --border:rgba(0,0,0,.08); --scrim:rgba(0,0,0,.55);--border-light:rgba(0,0,0,.04);
  --card-bg:rgba(255,255,255,.7);--card-solid:#ffffff;--card-elev:#ffffff;
  --icon-ink:#475569;
  /* realized-outcome text (ICE light twin) + diagram edge ink */
  --win-text:#12804a;--loss-text:#c0342f;--dg-edge:rgba(15,30,50,.30);
  /* dark well for product captures on a light band; diagram node fill */
  --shot-bg:#0b1017;--shot-border:rgba(120,170,220,.18);--shot-cap:rgba(176,196,220,.62);--dg-node:#f7f9fb;
  --shadow-lg-ctx:var(--shadow-lg);--shadow-card:var(--shadow-xl);--hover-border:var(--primary);
  /* card elevation + border (iteration 5 restores the hover border step) */
  --card-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px -14px rgba(15,23,42,.16);
  --card-shadow-hover:0 2px 4px rgba(15,23,42,.07),0 18px 44px -16px rgba(15,23,42,.24);
  --card-border:#e6eaf0;--card-border-hover:#c9d3e0;
  /* ghost button on a light band */
  --ghost-fg:var(--text);--ghost-border:rgba(15,23,42,.22);
  --ghost-border-hover:#0f172a;--ghost-bg-hover:rgba(15,23,42,.05);
  /* visual fills consumed by the inline SVG/mockup components */
  --eq-grid:rgba(15,30,50,.08);--phone-bg:#ffffff;
  --dot-idle:rgba(15,23,42,.18);--dot-hover:rgba(15,23,42,.34);
}
/* on-dark band tokens: shadows are invisible on dark, so lift pairs with border+glow */
.on-dark{
  --win-text:#22c55e;--loss-text:#ef5350;--dg-edge:rgba(120,170,220,.28);
  --shot-bg:#05070a;--shot-border:rgba(120,170,220,.18);--shot-cap:rgba(176,196,220,.62);--dg-node:#16202f;
  --text:#ffffff;--text-secondary:rgba(226,235,247,.72);--text-muted:rgba(203,217,236,.64);
  --border:rgba(255,255,255,.08); --scrim:rgba(0,0,0,.55);--border-light:rgba(255,255,255,.05);
  --card-bg:rgba(255,255,255,.035);--card-solid:rgba(255,255,255,.04);
  --card-elev:rgba(255,255,255,.04);
  --shadow-lg-ctx:0 12px 40px rgba(0,0,0,.5),0 0 0 1px rgba(184,152,90,.18);
  --shadow-card:0 24px 80px rgba(0,0,0,.6),0 0 40px -12px rgba(184,152,90,.4);
  --hover-border:var(--primary-line);
  --input-bg:rgba(255,255,255,.05);
  --gold-text:var(--gold-bright);
  --chip-bg:rgba(255,255,255,.04);
  --chip-border:rgba(255,255,255,.07);
  --icon-ink:rgba(226,235,247,.80);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 36px -12px rgba(0,0,0,.66);
  --card-shadow-hover:inset 0 1px 0 rgba(255,255,255,.10),0 18px 46px -12px rgba(0,0,0,.78);
  --card-border:rgba(255,255,255,.10);--card-border-hover:rgba(255,255,255,.24);
  --ghost-fg:#ffffff;--ghost-border:rgba(255,255,255,.4);
  --ghost-border-hover:#ffffff;--ghost-bg-hover:rgba(255,255,255,.06);
  --eq-grid:rgba(120,170,220,.09);--phone-bg:rgba(255,255,255,.04);
  --dot-idle:rgba(226,235,247,.26);--dot-hover:rgba(226,235,247,.5);
}
/* metallic, never a flat gold fill */
.on-light .btn--primary{
  --btn-primary-bg:var(--gold-metal);--btn-primary-bg-hover:var(--gold-metal);
  --btn-primary-fg:#1a1408;
  --btn-primary-shadow:0 4px 18px rgba(122,90,48,.26),inset 0 1px 0 rgba(255,255,255,.3);
  --btn-primary-shadow-hover:0 10px 26px rgba(122,90,48,.34),inset 0 1px 0 rgba(255,255,255,.38);
}
.on-light .btn--primary{border:1px solid var(--gold-deep)}
.on-light .btn--primary:hover{filter:brightness(1.08)}
.on-light .btn--glass{
  --glass-btn-bg:rgba(255,255,255,.7);--glass-btn-bg-hover:#ffffff;
  --glass-btn-fg:#0f172a;--glass-btn-border:rgba(15,23,42,.1);
}
.on-dark .btn--primary{--btn-primary-fg:#0f172a;--btn-primary-bg:#ffffff;--btn-primary-bg-hover:#ffffff}

/* section backgrounds — the measured rhythm */
.band-base{background:var(--bg)}
.band-elev{background:var(--bg-elevated)}
.band-elev2{background:var(--dark-bg-elevated)}
.band-light{background:#f8fafc}
.band-deep{background:var(--dark-bg)}

/* pricing atmosphere: gradient orbs behind the cards */
.pricing{overflow:hidden}
.pricing .blob-a{width:600px;height:600px;top:-180px;left:-140px;
  background:radial-gradient(circle at 50% 50%,rgba(184,152,90,.16),transparent 68%);filter:blur(90px)}
.pricing .blob-b{width:520px;height:520px;bottom:-200px;right:-120px;
  background:radial-gradient(circle at 50% 50%,rgba(30,41,59,.10),transparent 68%);filter:blur(90px)}
.cta-band .blob-a{width:640px;height:640px;top:-220px;left:50%;margin-left:-320px;
  background:radial-gradient(circle at 50% 50%,rgba(184,152,90,.22),transparent 66%)}

/* dark bands inside the light build: card surface steps above the band */
.band-elev2{--card-elev:#16202f}
.band-deep{--card-elev:#0b1220}