/* =========================================================
   NOISE. sales page  styles.css
   Design system: STATIC PURPLE (NOISE. brand identity variant of Static Volt)
   Rules honored throughout:
     no drop shadows  (only 1px inset rings act as hairlines)
     no em dashes in any copy
     accent is precious: aplats, hairlines, big numerals, the point, CTAs
     display line-height stays between 0.92 and 0.98
   ========================================================= */

:root{
  /* ---- palette (NOISE. purple brand tokens) ---- */
  --canvas:#08020E;          /* violet-black page background (NOISE. brand) */
  --ink:#F5F0F7;             /* primary text, 18.23:1 on canvas */
  --muted:#A99BB0;           /* secondary text, 7.8:1 on canvas */
  --surface-1:#160921;       /* raised surface */
  --surface-2:#2F1737;       /* card surface (NOISE. brand card) */
  --accent:#B44BFF;          /* web-lightened violet, 5.26:1 on canvas */
  --accent-soft:rgba(180,75,255,0.14);   /* violet wash for glows */
  --on-accent:#08020E;       /* dark ink sitting on a violet aplat */
  --hairline:rgba(245,240,247,0.10);
  --hairline-strong:rgba(245,240,247,0.16);

  /* ---- system ---- */
  --maxw:1200px;
  --gutter:clamp(20px,5vw,40px);
  --r-input:4px; --r-btn:8px; --r-card:12px; --r-pill:20px;   /* radii 4/8/12/20 */
  --step:clamp(56px,8vw,80px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:var(--on-accent)}

/* ---- grain: the "noise" of the concept, ~5% overlay ---- */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}

/* ---- display type ---- */
.display{
  font-family:"Saira Extra Condensed",sans-serif;
  font-weight:700; line-height:.94; letter-spacing:-.015em;
  text-transform:uppercase;
}
.eyebrow{
  font-size:.78rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow .dot{background:var(--accent)}

/* the point: brand device, reused everywhere */
.dot{width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; flex:0 0 auto}

/* ---- buttons ---- */
.btn{
  font-family:inherit; font-size:.95rem; font-weight:500; letter-spacing:.01em;
  padding:14px 22px; border-radius:var(--r-btn); border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:.6em; text-decoration:none;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

/* ---- nav ---- */
nav{position:sticky; top:0; z-index:20; background:rgba(8,2,14,.72); backdrop-filter:blur(12px); box-shadow:inset 0 -1px 0 var(--hairline)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:66px}
.logo{font-family:"Saira Extra Condensed",sans-serif; font-weight:800; font-size:1.6rem; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); text-decoration:none; line-height:1}
.logo b{color:var(--accent); font-weight:800}
.nav-links{display:flex; align-items:center; gap:28px}
.nav-links a{color:var(--muted); text-decoration:none; font-size:.92rem; font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav-cta{padding:9px 16px; font-size:.85rem}
/* raise specificity to beat .nav-links a (0,1,1) and .nav-links a:hover (0,2,1) */
.nav-links a.nav-cta,
.nav-links a.nav-cta:hover,
.nav-links a.nav-cta:focus-visible{color:var(--on-accent)}

/* ---- mobile nav toggle (hamburger): hidden on desktop, shown <=860 ---- */
.nav-toggle{display:none; width:44px; height:44px; align-items:center; justify-content:center; flex:0 0 auto; background:transparent; color:var(--ink); border:0; border-radius:var(--r-btn); cursor:pointer; box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.nav-toggle:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.nav-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.nav-toggle-bars{position:relative; display:block; width:20px; height:14px}
.nav-toggle-bars span{position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor; transition:transform .2s ease, opacity .2s ease, top .2s ease}
.nav-toggle-bars span:nth-child(1){top:0}
.nav-toggle-bars span:nth-child(2){top:6px}
.nav-toggle-bars span:nth-child(3){top:12px}
/* open state: the three bars fold into a cross */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){top:6px; transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){top:6px; transform:rotate(-45deg)}

/* ---- hero ---- */
.hero{padding:clamp(48px,8vw,96px) 0 var(--step)}
.hero-grid{display:grid; grid-template-columns:1.25fr .95fr; gap:clamp(32px,5vw,64px); align-items:center}
h1.hero-title{font-size:clamp(3rem,8.2vw,6rem); margin:22px 0 24px; line-height:.94}
h1.hero-title .accentword{color:var(--accent)}
.hero-sub{color:var(--muted); font-size:1.12rem; max-width:48ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin:34px 0 20px}
.price-line{color:var(--muted); font-size:.9rem; display:flex; align-items:center; gap:.7em; flex-wrap:wrap}
.price-line b{color:var(--ink); font-weight:700}
.price-chip{font-family:"Saira Extra Condensed",sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:.02em; color:var(--ink); box-shadow:inset 0 0 0 1px var(--hairline-strong); border-radius:var(--r-pill); padding:3px 14px}

/* hero portrait */
.hero-visual{position:relative; border-radius:var(--r-card); overflow:hidden; box-shadow:inset 0 0 0 1px var(--hairline); background:var(--surface-1)}
.hero-visual img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; filter:contrast(1.02) saturate(.96)}
.hero-visual .vtag{position:absolute; left:16px; bottom:16px; z-index:2; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); background:rgba(8,2,14,.55); backdrop-filter:blur(6px); box-shadow:inset 0 0 0 1px var(--hairline); border-radius:var(--r-pill); padding:6px 14px; display:flex; align-items:center; gap:.6em}
.hero-visual .vtag .dot{background:var(--accent)}
.hero-visual::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(8,2,14,.5)); pointer-events:none}

/* ---- proof band ---- */
.proof{display:grid; grid-template-columns:repeat(4,1fr); box-shadow:inset 0 1px 0 var(--hairline), inset 0 -1px 0 var(--hairline)}
.proof .cell{padding:30px 20px; text-align:center; display:flex; flex-direction:column; justify-content:center}
.proof .cell + .cell{box-shadow:inset 1px 0 0 var(--hairline)}
.proof .num{font-family:"Saira Extra Condensed",sans-serif; font-weight:700; font-size:2.9rem; line-height:1; letter-spacing:-.01em}
.proof .num b{color:var(--accent); font-weight:700}
.proof .stm{font-family:"Saira Extra Condensed",sans-serif; font-weight:700; font-size:1.5rem; line-height:1.05; letter-spacing:-.005em; text-transform:uppercase; color:var(--ink)}
.proof .lbl{color:var(--muted); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin-top:8px}

/* ---- section scaffold ---- */
section{padding:var(--step) 0}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:44px; flex-wrap:wrap}
h2.sec-title{font-size:clamp(2.2rem,5.5vw,3.6rem); line-height:.96}
.sec-note{color:var(--muted); font-size:.95rem; max-width:36ch}

/* ---- problem ---- */
.problem-grid{display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,40px)}
.problem-lead{font-family:"Space Grotesk",sans-serif; font-size:clamp(1.15rem,2.4vw,1.5rem); line-height:1.5; color:var(--ink); max-width:30ch}
.problem-body{color:var(--muted); max-width:60ch}
.problem-body p+p{margin-top:16px}
.problem-body strong{color:var(--ink); font-weight:500}
.pullquote{font-family:"Saira Extra Condensed",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:-.01em; line-height:.98; font-size:clamp(1.9rem,4.4vw,3rem); color:var(--ink); box-shadow:inset 3px 0 0 var(--accent); padding:6px 0 6px 24px; margin:8px 0}
.pullquote .accentword{color:var(--accent)}
@media(min-width:820px){
  .problem-grid{grid-template-columns:.9fr 1.1fr; align-items:start}
}

/* ---- curriculum ---- */
.chapters{box-shadow:inset 0 1px 0 var(--hairline)}
.chapter{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(16px,3vw,40px); padding:26px 4px; box-shadow:inset 0 -1px 0 var(--hairline); transition:background .18s ease, padding-left .18s ease}
.chapter:hover{background:var(--surface-1); padding-left:14px}
.chapter .idx{font-family:"Saira Extra Condensed",sans-serif; font-weight:700; font-size:2.4rem; line-height:1; color:var(--muted); display:flex; align-items:baseline; gap:.12em}
.chapter:hover .idx{color:var(--ink)}
.chapter .idx .dot{width:8px;height:8px;background:var(--accent);margin-bottom:4px}
.chapter .cname{font-family:"Saira Extra Condensed",sans-serif; font-weight:700; font-size:1.9rem; line-height:1; text-transform:uppercase; letter-spacing:-.01em}
.chapter .cdesc{color:var(--muted); font-size:.9rem; margin-top:6px; max-width:64ch}
.chapter .cnt{color:var(--muted); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}

/* ---- lesson excerpt ---- */
.excerpt{background:var(--surface-1); border-radius:var(--r-card); box-shadow:inset 0 0 0 1px var(--hairline); padding:clamp(24px,4vw,52px)}
.excerpt .kick{font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:.6em}
.excerpt .kick .dot{background:var(--accent)}
.excerpt h3{font-family:"Saira Extra Condensed",sans-serif; font-weight:700; font-size:clamp(2rem,4.5vw,3rem); text-transform:uppercase; letter-spacing:-.01em; line-height:.96; margin:14px 0 20px}
.excerpt p{color:var(--muted); max-width:66ch; margin-bottom:18px}
.excerpt p strong{color:var(--ink); font-weight:500}
aside.note{background:var(--surface-2); border-radius:var(--r-input); box-shadow:inset 3px 0 0 var(--accent), inset 0 0 0 1px var(--hairline); padding:18px 22px; margin:6px 0 4px; font-size:.98rem; color:var(--ink); max-width:66ch}
aside.note .nt{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:6px}

/* ---- tone test ---- */
.tone{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,56px); align-items:start}
.tone-tabs{display:flex; flex-direction:column; gap:2px}
.tone-tab{text-align:left; font-family:inherit; color:inherit; background:transparent; border:0; cursor:pointer; padding:16px 18px; border-radius:var(--r-input); display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; box-shadow:inset 0 0 0 1px transparent; transition:background .18s, box-shadow .18s}
.tone-tab .dot{background:var(--muted); width:9px; height:9px}
.tone-tab .tname{font-family:"Saira Extra Condensed",sans-serif; font-weight:700; font-size:1.45rem; text-transform:uppercase; letter-spacing:-.01em; color:var(--muted); line-height:1}
.tone-tab:hover .tname{color:var(--ink)}
.tone-tab[aria-selected="true"]{background:var(--surface-1); box-shadow:inset 0 0 0 1px var(--hairline)}
.tone-tab[aria-selected="true"] .dot{background:var(--accent)}
.tone-tab[aria-selected="true"] .tname{color:var(--ink)}
.tone-tab:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.tone-panel{background:var(--surface-1); border-radius:var(--r-card); box-shadow:inset 0 0 0 1px var(--hairline); padding:clamp(24px,4vw,40px); min-height:300px}
.tone-panel .pnum{font-family:"Saira Extra Condensed",sans-serif; font-weight:700; color:var(--accent); font-size:1.2rem; letter-spacing:.02em}
.tone-panel h4{font-family:"Saira Extra Condensed",sans-serif; font-weight:700; font-size:clamp(1.8rem,4vw,2.6rem); text-transform:uppercase; letter-spacing:-.01em; margin:6px 0 14px; line-height:.98}
.tone-panel p{color:var(--muted); max-width:54ch}
.arch{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.arch span{font-size:.85rem; padding:8px 14px; border-radius:var(--r-pill); box-shadow:inset 0 0 0 1px var(--hairline); color:var(--ink); display:inline-flex; align-items:center; gap:.5em}
.arch .em{font-size:1rem; line-height:1}
.tone-meta{display:flex; align-items:center; gap:18px; margin-top:26px; flex-wrap:wrap}
.tone-meta .badge{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:.6em}
.tone-meta .badge .dot{background:var(--accent)}

/* ---- included ---- */
.included{display:grid; grid-template-columns:repeat(2,1fr); gap:0; box-shadow:inset 0 1px 0 var(--hairline)}
.inc-item{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; padding:24px 4px; box-shadow:inset 0 -1px 0 var(--hairline)}
.inc-item .dot{margin-top:9px; background:var(--accent); width:9px; height:9px}
.inc-item .it{font-weight:500; color:var(--ink)}
.inc-item .id{color:var(--muted); font-size:.9rem; margin-top:4px}
@media(min-width:720px){ .inc-item:nth-child(odd){padding-right:32px; box-shadow:inset 0 -1px 0 var(--hairline), inset -1px 0 0 var(--hairline)} .inc-item:nth-child(even){padding-left:32px} }

/* ---- instructor ---- */
.instructor{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,56px); align-items:center}
.portrait{position:relative; aspect-ratio:4/5; border-radius:var(--r-card); overflow:hidden; box-shadow:inset 0 0 0 1px var(--hairline); background:var(--surface-2)}
.portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 22%; filter:contrast(1.02) saturate(.96)}
.portrait::after{content:""; position:absolute; bottom:16px; right:16px; width:10px; height:10px; border-radius:50%; background:var(--accent)}
.instructor .role{color:var(--accent); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; display:flex; align-items:center; gap:.6em}
.instructor .role .dot{background:var(--accent)}
.instructor h3{font-family:"Saira Extra Condensed",sans-serif; font-weight:700; font-size:clamp(2.6rem,6vw,4.2rem); text-transform:uppercase; letter-spacing:-.01em; line-height:.94; margin:10px 0 6px}
.instructor .title{color:var(--ink); font-size:1rem; margin-bottom:18px}
.instructor p{color:var(--muted); max-width:56ch; margin-bottom:14px}
.instructor .cofound{font-size:.9rem; color:var(--muted); box-shadow:inset 0 0 0 1px var(--hairline); border-radius:var(--r-pill); padding:8px 16px; display:inline-flex; align-items:center; gap:.6em}
.instructor .cofound .dot{background:var(--accent)}

/* ---- instructor proof (measured results, 12 months) ---- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); box-shadow:inset 0 1px 0 var(--hairline), inset 0 -1px 0 var(--hairline)}
.stat{padding:30px 22px}
.stat + .stat{box-shadow:inset 1px 0 0 var(--hairline)}
.stat .snum{font-family:"Saira Extra Condensed",sans-serif; font-weight:700; font-size:clamp(2rem,4.6vw,3.2rem); line-height:1; letter-spacing:-.01em; color:var(--ink)}
.stat .snum b{color:var(--accent); font-weight:700}
.stat .slbl{color:var(--muted); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-top:10px; max-width:22ch; line-height:1.4}

/* ---- final CTA / pricing ---- */
.final{background:var(--surface-1); border-radius:var(--r-card); box-shadow:inset 0 0 0 1px var(--hairline); padding:clamp(36px,6vw,72px); text-align:center; position:relative; overflow:hidden}
.final::before{content:""; position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:60%; height:120%; background:radial-gradient(circle, var(--accent-soft), transparent 70%); pointer-events:none}
.final h2{font-family:"Saira Extra Condensed",sans-serif; font-weight:700; font-size:clamp(2.6rem,7vw,5rem); text-transform:uppercase; letter-spacing:-.015em; line-height:.94; position:relative}
.final h2 .accentword{color:var(--accent)}
.final p{color:var(--muted); margin:18px auto 26px; max-width:46ch; position:relative}
.final .price{font-family:"Saira Extra Condensed",sans-serif; font-weight:700; font-size:clamp(2.4rem,6vw,3.4rem); line-height:1; margin-bottom:6px; position:relative}
.final .price .dot{width:12px;height:12px;background:var(--accent);vertical-align:baseline;margin-left:2px}
.final .actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; margin-top:10px}
.final .fine{color:var(--muted); font-size:.8rem; margin-top:20px; letter-spacing:.04em; position:relative}

/* ---- pricing tiers (tiers-ready: 1 to 3 cards, centered, stack on mobile) ---- */
.tiers{display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:20px; margin:28px 0 6px; position:relative}
.tier{flex:0 1 300px; max-width:340px; background:var(--surface-2); border-radius:var(--r-card); box-shadow:inset 0 0 0 1px var(--hairline); padding:clamp(28px,3vw,40px) 28px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px}
.tier .tier-head{display:flex; flex-direction:column; align-items:center; gap:10px}
.tier .tier-name{font-family:"Saira Extra Condensed",sans-serif; font-weight:700; font-size:1.6rem; text-transform:uppercase; letter-spacing:-.01em; line-height:1; color:var(--ink)}
.tier .tier-flag{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.5em}
.tier .tier-flag .dot{background:var(--accent)}
.tier .tier-avail{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:.5em}
.tier .tier-avail .dot{background:var(--muted); width:6px; height:6px}
.tier .price{margin-bottom:0}
.tier .tier-list{list-style:none; width:100%; text-align:left; display:grid; gap:12px; margin:2px 0}
.tier .tier-list li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; color:var(--muted); font-size:.9rem; line-height:1.4}
.tier .tier-list li .dot{margin-top:7px; background:var(--accent); width:7px; height:7px}
.tier .tier-cta{width:100%; justify-content:center; margin-top:auto}
/* featured tier: accent ring marks the masterclass as the obvious entry point */
.tier.is-featured{box-shadow:inset 0 0 0 1px var(--accent)}


/* ---- faq ---- */
.faq{display:grid; gap:0; box-shadow:inset 0 1px 0 var(--hairline)}
.faq details{box-shadow:inset 0 -1px 0 var(--hairline)}
.faq summary{list-style:none; cursor:pointer; padding:24px 44px 24px 4px; position:relative; font-family:"Saira Extra Condensed",sans-serif; font-weight:700; font-size:clamp(1.4rem,3vw,1.9rem); text-transform:uppercase; letter-spacing:-.01em; line-height:1.02; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:50%; width:11px; height:11px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--hairline-strong); transition:background .18s, box-shadow .18s; transform:translateY(-50%)}
.faq details[open] summary::after{background:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.faq .ans{color:var(--muted); padding:0 44px 26px 4px; max-width:70ch}

/* ---- footer ---- */
footer{padding:var(--step) 0 48px; box-shadow:inset 0 1px 0 var(--hairline); margin-top:var(--step)}
.foot-inner{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}
.foot-logo{font-family:"Saira Extra Condensed",sans-serif; font-weight:800; font-size:clamp(3rem,12vw,7rem); text-transform:uppercase; letter-spacing:.01em; line-height:.9}
.foot-logo b{color:var(--accent)}
.foot-meta{color:var(--muted); font-size:.82rem; text-align:right}
.foot-meta .links a{color:var(--muted); text-decoration:none; margin-left:18px}
.foot-meta .links a:hover{color:var(--ink)}
.foot-meta .copy{margin-top:12px; letter-spacing:.04em}

/* ---- footer contact: a button that reads like the surrounding link ---- */
.foot-contact{font-family:inherit; font-size:inherit; letter-spacing:inherit; color:var(--muted); background:transparent; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.foot-contact:hover{color:var(--ink)}
.foot-contact:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

/* ---- get access panel ---- */
.ga-overlay{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:var(--gutter);
  background:rgba(8,2,14,.8); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility 0s linear .2s;
}
.ga-overlay.is-open{opacity:1; visibility:visible; transition:opacity .2s ease, visibility 0s linear 0s}
.ga-dialog{
  position:relative; width:100%; max-width:460px; max-height:calc(100vh - 2*var(--gutter));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--surface-1); border-radius:var(--r-card);
  box-shadow:inset 0 0 0 1px var(--hairline-strong);
  padding:clamp(28px,4vw,40px);
  transform:translateY(8px); transition:transform .2s ease;
}
.ga-overlay.is-open .ga-dialog{transform:translateY(0)}
.ga-close{
  position:absolute; top:14px; right:14px; width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--muted); border:0; border-radius:var(--r-btn); cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--hairline);
  transition:color .18s ease, box-shadow .18s ease;
}
.ga-close:hover{color:var(--ink); box-shadow:inset 0 0 0 1px var(--accent)}
.ga-close:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.ga-head{margin:0 40px 22px 0}
.ga-kick{font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.6em}
.ga-kick .dot{background:var(--accent); width:6px; height:6px}
#gaTitle{font-size:clamp(1.9rem,4.5vw,2.5rem); line-height:.98; margin:12px 0 12px}
.ga-intro{color:var(--muted); font-size:.95rem; line-height:1.5}

.ga-form{display:grid; gap:16px}
.ga-form[hidden]{display:none}
.ga-field{display:grid; gap:7px}
.ga-field label{color:var(--ink); font-size:.85rem; font-weight:500; letter-spacing:.01em}
.ga-hint{color:var(--muted); font-weight:400; font-size:.78rem}
.ga-field input,.ga-field textarea{
  font-family:inherit; font-size:16px; line-height:1.5; color:var(--ink);
  background:var(--surface-2); border:0; border-radius:var(--r-input);
  box-shadow:inset 0 0 0 1px var(--hairline-strong);
  padding:12px 14px; width:100%; resize:vertical;
  transition:box-shadow .18s ease;
}
.ga-field textarea{min-height:96px}
.ga-field input::placeholder,.ga-field textarea::placeholder{color:var(--muted)}
.ga-field input:hover,.ga-field textarea:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.ga-field input:focus,.ga-field textarea:focus{outline:none; box-shadow:inset 0 0 0 1px var(--accent)}
.ga-field input:focus-visible,.ga-field textarea:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.ga-error{
  color:var(--ink); font-size:.9rem; line-height:1.5;
  background:var(--surface-2); border-radius:var(--r-input);
  box-shadow:inset 3px 0 0 var(--accent), inset 0 0 0 1px var(--hairline);
  padding:12px 16px;
}
.ga-submit{width:100%; justify-content:center; margin-top:2px}
.ga-submit:disabled{opacity:.7; cursor:progress}

.ga-success{display:flex; align-items:flex-start; gap:12px; padding:6px 0 2px}
.ga-success[hidden]{display:none}
.ga-success-mark{margin-top:7px}
.ga-success-mark .dot{background:var(--accent); width:9px; height:9px}
.ga-success p{color:var(--ink); font-size:1rem; line-height:1.5}
.ga-success:focus{outline:none}

.ga-fallback{margin-top:22px; padding-top:20px; box-shadow:inset 0 1px 0 var(--hairline)}
.ga-fallback-note{color:var(--muted); font-size:.85rem; margin-bottom:12px}
.ga-email-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.ga-email{
  color:var(--ink); font-size:.9rem; user-select:all; -webkit-user-select:all;
  background:var(--surface-2); border-radius:var(--r-input);
  box-shadow:inset 0 0 0 1px var(--hairline); padding:9px 13px;
}
.ga-copy{padding:9px 16px; font-size:.85rem}
.ga-copy.is-copied{color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.ga-mailto{display:inline-block; margin-top:14px; color:var(--muted); font-size:.85rem; text-decoration:underline; text-underline-offset:2px}
.ga-mailto:hover{color:var(--ink)}

@media(max-width:560px){
  .ga-overlay{padding:0}
  .ga-dialog{max-width:none; min-height:100vh; max-height:100vh; border-radius:0; padding:64px 20px 28px}
}

/* ---- responsive ---- */
@media(max-width:860px){
  /* the links collapse into a dropdown panel driven by the hamburger */
  .nav-toggle{display:inline-flex}
  .nav-links{
    position:absolute; top:calc(100% + 1px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface-1); border-radius:var(--r-card);
    box-shadow:inset 0 0 0 1px var(--hairline-strong);
    padding:8px;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .nav-links.open{opacity:1; visibility:visible; transform:translateY(0)}
  .nav-links a{padding:15px 12px; font-size:1rem; color:var(--ink)}
  .nav-links a:not(.nav-cta){box-shadow:inset 0 -1px 0 var(--hairline)}
  .nav-links a.nav-cta{margin-top:8px; justify-content:center; padding:14px 16px; font-size:.95rem}
  .hero-grid,.tone,.instructor{grid-template-columns:1fr}
  .hero-visual{max-width:520px}
  .hero-visual img{aspect-ratio:16/10}
  .portrait{max-width:400px}
  .proof{grid-template-columns:1fr 1fr}
  .proof .cell:nth-child(3){box-shadow:inset 0 1px 0 var(--hairline)}
  .proof .cell:nth-child(2){box-shadow:inset 1px 0 0 var(--hairline)}
  .proof .cell:nth-child(4){box-shadow:inset 1px 0 0 var(--hairline), inset 0 1px 0 var(--hairline)}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){box-shadow:inset 0 1px 0 var(--hairline)}
  .stat:nth-child(2){box-shadow:inset 1px 0 0 var(--hairline)}
  .stat:nth-child(4){box-shadow:inset 1px 0 0 var(--hairline), inset 0 1px 0 var(--hairline)}
  .chapter{grid-template-columns:auto 1fr;}
  .chapter .cnt{grid-column:2;}
  .included{grid-template-columns:1fr}
}
@media(max-width:560px){
  body{font-size:16px}
  .chapter .idx{font-size:1.9rem}
  .chapter .cname{font-size:1.5rem}
  .proof .num{font-size:2.3rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto}
}