@font-face{
  font-family:'Nexa Heavy';
  src:url('/assets/fonts/Nexa-Heavy.woff2') format('woff2'), url('/assets/fonts/Nexa-Heavy.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/Inter-Variable.woff2') format('woff2-variations'), url('/assets/fonts/Inter-Variable.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
}

:root{
  --purple: #7d00ea;
  --purple-deep: #5b019f;
  --purple-glow: rgba(125,0,234,0.35);
  --gold: #daa520;
  --ink: #141617;
  --ink-dim: #55565c;
  --gray-line: rgba(20,22,23,0.10);
  --gray-line-soft: rgba(20,22,23,0.06);
  --paper: #fafafa;
  --paper-2: #f4f2f8;
  --purple-soft: #ede0fb;
  --white: #ffffff;

  --display: 'Nexa Heavy', 'Inter', -apple-system, sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:400; text-wrap:balance; line-height:1.05; letter-spacing:-0.01em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--gold); color:var(--ink); }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } }

.wrap{ max-width:1160px; margin:0 auto; padding:0 24px; }
.section{ padding:clamp(56px,9vw,110px) 0; position:relative; }

/* ---------- section background accents ----------
   Same technique as .hero-glow: pure CSS radial gradients, no image
   requests, no runtime cost. Applied to alternating sections so
   transitions read as designed rather than flat color swaps. */
.glow-tl::before, .glow-tr::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
}
.glow-tl::before{
  background:
    radial-gradient(600px 380px at 4% -8%, rgba(125,0,234,0.07), transparent 58%),
    radial-gradient(460px 300px at 100% 108%, rgba(218,165,32,0.08), transparent 55%);
}
.glow-tr::before{
  background:
    radial-gradient(600px 380px at 96% -8%, rgba(218,165,32,0.08), transparent 58%),
    radial-gradient(460px 300px at 0% 108%, rgba(125,0,234,0.07), transparent 55%);
}
.eyebrow{
  font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--purple); display:inline-block; margin-bottom:16px;
}

/* ---------- floating pill nav ---------- */
.nav-outer{ position:sticky; top:0; z-index:50; display:flex; justify-content:center; padding:16px 16px 0; background:var(--white); }
.nav{
  width:100%; max-width:1080px; background:var(--white); border-radius:999px;
  box-shadow:0 8px 30px rgba(20,10,40,0.10), 0 1px 2px rgba(20,10,40,0.06);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:8px 8px 8px 18px;
}
.brand{ display:flex; align-items:center; gap:9px; flex-shrink:0; }
.brand img{ height:26px; width:auto; }
.brand span{ font-family:var(--display); font-size:19px; color:var(--purple); }
.nav-links{ display:flex; align-items:center; gap:22px; }
.nav-links a{ font-size:14px; font-weight:500; color:var(--ink-dim); }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{
  font-family:var(--sans); font-weight:700; font-size:14px; color:var(--white);
  padding:11px 22px; border-radius:999px; white-space:nowrap; flex-shrink:0;
  box-shadow:0 6px 18px var(--purple-glow);
  transition:transform .15s ease;
  border:1.5px solid transparent; background-origin:border-box; background-clip:padding-box, border-box;
  background-image:linear-gradient(135deg, var(--purple), var(--purple-deep)), linear-gradient(135deg, var(--purple), var(--gold));
}
.nav-cta:hover{ transform:translateY(-1px); }
.nav-toggle{ display:none; background:none; border:0; font-size:20px; cursor:pointer; padding:6px 10px; margin-right:6px; }
.nav-mobile{ display:none; }

/* ---------- Training dropdown (mega-menu), desktop ---------- */
.nav-dropdown{ position:relative; }
.nav-dropdown > a::after{ content:'▾'; font-size:10px; margin-left:5px; opacity:.6; }
.nav-dropdown-panel{
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:18px; z-index:60; width:560px;
}
.nav-dropdown:hover .nav-dropdown-panel{ display:block; }
.nav-dropdown-panel-inner{
  background:var(--white); border-radius:20px; box-shadow:0 20px 50px rgba(20,10,40,0.16);
  padding:20px; display:grid; grid-template-columns:1fr 1fr; gap:4px 28px;
}
.nav-dropdown-panel .col-title{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--purple); margin:14px 0 6px; }
.nav-dropdown-panel .col-title:first-child{ margin-top:0; }
.nav-dropdown-panel a{ display:block; padding:6px 0; font-size:13.5px; color:var(--ink-dim); }
.nav-dropdown-panel a:hover{ color:var(--purple); }

@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .nav-mobile.open{
    display:flex; flex-direction:column; width:100%; max-width:1080px; background:var(--white);
    border-radius:20px; box-shadow:0 8px 30px rgba(20,10,40,0.10); margin-top:8px; padding:10px 8px;
    max-height:70vh; overflow-y:auto;
  }
  .nav-mobile a{ padding:12px 14px; font-size:15px; font-weight:500; color:var(--ink-dim); border-radius:12px; }
  .nav-mobile a:hover{ background:var(--paper-2); }
  .nav-mobile .col-title{ padding:10px 14px 2px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--purple); }
  .nav-mobile .sub-link{ padding-left:26px; font-size:14px; }
}

/* ---------- hero ---------- */
.hero{ padding:clamp(36px,6vw,72px) 0 0; text-align:center; position:relative; }
.hero-glow{
  position:absolute; inset:0; z-index:-1; overflow:hidden;
  background:
    radial-gradient(700px 420px at 50% 0%, rgba(125,0,234,0.09), transparent 65%),
    radial-gradient(500px 320px at 85% 15%, rgba(218,165,32,0.10), transparent 60%);
}
.hero h1{ font-size:clamp(36px,6vw,68px); max-width:900px; margin:0 auto; color:var(--ink); text-wrap:pretty; }
.hero h1 .accent{ color:var(--purple); }
.hero h1 .accent::after{
  content:''; display:inline-block; width:0.07em; height:0.8em; background:var(--purple);
  margin-left:2px; vertical-align:-0.05em; animation:caret-blink 0.9s step-end infinite;
}
@keyframes caret-blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .hero h1 .accent::after{ animation:none; } }
.hero-inner h1{ font-size:clamp(28px,3.6vw,42px); line-height:1.15; }
.hero p.sub{
  margin:26px auto 0; max-width:620px; font-size:clamp(16px,1.8vw,18px); line-height:1.6; color:var(--ink-dim);
}
.hero p.sub.strong{ font-weight:600; color:var(--ink); margin-top:12px; }
.cta-row{ margin-top:34px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.btn-primary{
  font-family:var(--sans); font-weight:700; font-size:15.5px; color:var(--white);
  padding:16px 32px; border-radius:999px; display:inline-block; cursor:pointer;
  box-shadow:0 10px 28px var(--purple-glow); transition:transform .15s ease;
  border:1.5px solid transparent; background-origin:border-box; background-clip:padding-box, border-box;
  background-image:linear-gradient(135deg, var(--purple), var(--purple-deep)), linear-gradient(135deg, var(--purple), var(--gold));
}
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{
  font-family:var(--sans); font-weight:600; font-size:15.5px; color:var(--ink);
  padding:15px 28px; border-radius:999px; display:inline-block; transition:transform .15s ease;
  border:1.5px solid transparent; background-origin:border-box; background-clip:padding-box, border-box;
  background-image:linear-gradient(var(--white), var(--white)), linear-gradient(135deg, var(--purple), var(--gold));
}
.btn-ghost:hover{ transform:translateY(-2px); }

.trust-row{ margin-top:40px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.trust-pill{
  display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:12.5px; color:var(--ink-dim);
  background:var(--paper); border:1px solid var(--gray-line); padding:8px 15px; border-radius:999px;
}
.trust-pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0; }

/* AI badge - reuses the Pixel widget's sparkle mark for a consistent "this is AI" signal sitewide */
.ai-badge{
  display:inline-flex; align-items:center; gap:4px; margin-left:2px;
  background:var(--purple); color:#fff; font-size:10px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; line-height:1;
  padding:3px 7px 3px 5px; border-radius:999px; flex-shrink:0;
}
.ai-badge svg{ width:9px; height:9px; flex-shrink:0; }

/* ---------- hero highlights (homepage feature strip — for longer benefit statements pills can't hold) ---------- */
.hero-highlights{
  margin:40px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px 28px;
  max-width:900px; text-align:left;
}
@media (max-width:760px){ .hero-highlights{ grid-template-columns:1fr; max-width:420px; } }
.hero-highlight{ display:flex; align-items:flex-start; gap:11px; }
.hero-highlight .check{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--purple-soft, var(--paper-2));
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.hero-highlight .check svg{ width:12px; height:12px; }
.hero-highlight p{ font-size:14px; font-weight:600; line-height:1.4; color:var(--ink-dim); }

/* ---------- browser/product frame ---------- */
.browser-frame{
  border-radius:20px; overflow:hidden;
  border:1px solid var(--gray-line); box-shadow:0 30px 70px -30px rgba(20,10,40,0.35);
  background:var(--white);
}
.browser-bar{
  display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--paper); border-bottom:1px solid var(--gray-line);
}
.browser-bar .dot2{ width:10px; height:10px; border-radius:50%; background:var(--gray-line); }
.browser-bar .url{
  flex:1; margin-left:10px; background:var(--white); border:1px solid var(--gray-line); border-radius:999px;
  padding:6px 14px; font-size:12px; color:var(--ink-dim); font-family:var(--sans); text-align:center;
}
.browser-frame img{ width:100%; height:auto; display:block; }
.frame-link{ position:absolute; inset:0; display:block; }
.play-overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-end; padding:16px;
  background:linear-gradient(180deg, transparent 55%, rgba(20,10,40,0.32)); transition:background .15s ease;
}
.frame-link:hover .play-overlay{ background:linear-gradient(180deg, transparent 40%, rgba(20,10,40,0.42)); }
.play-btn{
  display:inline-flex; align-items:center; gap:8px; border-radius:999px;
  padding:11px 20px 11px 16px; box-shadow:0 10px 30px rgba(0,0,0,0.24); font-family:var(--sans);
  font-weight:700; font-size:13.5px; color:var(--ink); transition:transform .15s ease;
  border:1.5px solid transparent; background-origin:border-box; background-clip:padding-box, border-box;
  background-image:linear-gradient(var(--white), var(--white)), linear-gradient(135deg, var(--purple), var(--gold));
}
.frame-link:hover .play-btn{ transform:translateY(-2px); }
.play-btn .tri{ width:0; height:0; border-style:solid; border-width:6px 0 6px 9px; border-color:transparent transparent transparent var(--purple); flex-shrink:0; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } }
.step{ text-align:left; }
.step .num{
  width:38px; height:38px; border-radius:50%; color:var(--purple);
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:15px;
  border:1.5px solid transparent; background-origin:border-box; background-clip:content-box, border-box;
  background-image:linear-gradient(var(--white), var(--white)), linear-gradient(135deg, var(--purple), var(--gold));
}
.step h3{ font-family:var(--sans); font-weight:700; font-size:16.5px; line-height:1.3; letter-spacing:0; margin-top:18px; }
.step p{ margin-top:8px; font-size:14.5px; line-height:1.6; color:var(--ink-dim); }

/* ---------- blueprint section ---------- */
.blueprint-columns{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:36px; align-items:start; }
@media (max-width:820px){ .blueprint-columns{ grid-template-columns:1fr; } }
.bp-col h3{ font-family:var(--sans); font-weight:700; font-size:13px; line-height:1.3; text-transform:uppercase; letter-spacing:.04em; color:var(--purple); margin-bottom:14px; }
.bp-col ul{ list-style:none; margin:0; padding:0; }
.bp-col li{ font-size:14.5px; color:var(--ink-dim); padding:9px 0; border-top:1px solid var(--gray-line-soft); }
.bp-col li:first-child{ border-top:none; }
.price-callout{
  margin-top:40px; padding:28px 32px; border-radius:20px; background:var(--paper-2);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.price-callout .amt{ font-family:var(--display); font-size:30px; color:var(--ink); white-space:nowrap; }
.price-callout p{ font-size:14px; color:var(--ink-dim); max-width:480px; }

/* ---------- app section ---------- */
.app-inner{ display:flex; align-items:center; justify-content:center; gap:56px; flex-wrap:wrap; }
.app-copy{ flex:1 1 380px; min-width:280px; }
.app-copy h2{ font-size:clamp(28px,3.6vw,40px); max-width:480px; }
.app-copy p{ margin-top:14px; color:var(--ink-dim); font-size:15.5px; max-width:440px; line-height:1.6; }
.app-badges{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.app-badges img{ height:44px; width:auto; }
.app-frame{ max-width:400px; flex-shrink:0; width:100%; position:relative; }
.app-qr{ text-align:center; flex-shrink:0; background:var(--white); border:1px solid var(--gray-line); border-radius:20px; padding:18px; }
.app-qr img{ width:104px; height:104px; }
.app-qr p{ margin-top:10px; font-size:11px; font-weight:600; color:var(--ink-dim); letter-spacing:.04em; text-transform:uppercase; }

/* ---------- checklist grid ---------- */
.checklist-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 32px; }
@media (max-width:760px){ .checklist-grid{ grid-template-columns:1fr; } }
.check-item{ display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--gray-line-soft); }
.check-item:nth-child(1), .check-item:nth-child(2){ border-top:none; }
.check-item .cn{
  width:28px; height:28px; border-radius:50%; color:var(--purple);
  font-family:var(--display); font-size:12.5px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
  border:1.5px solid transparent; background-origin:border-box; background-clip:content-box, border-box;
  background-image:linear-gradient(var(--white), var(--white)), linear-gradient(135deg, var(--purple), var(--gold));
}
.check-item p{ font-size:14.5px; line-height:1.55; color:var(--ink-dim); }
.check-item p b{ color:var(--ink); font-weight:700; }

/* ---------- testimonials ---------- */
.testi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:980px){ .testi-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{ background:var(--white); border:1px solid var(--gray-line); border-radius:20px; padding:24px; }
.testi-card p.quote{ font-size:14.5px; line-height:1.55; color:var(--ink); }
.testi-card p.who{ margin-top:16px; font-size:13px; font-weight:700; color:var(--ink-dim); }

/* ---------- pricing page ---------- */
.price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:760px){ .price-grid{ grid-template-columns:1fr; } }
.price-card{ background:var(--white); border:1.5px solid var(--gray-line); border-radius:24px; padding:38px; position:relative; }
.price-card.rec{
  background:linear-gradient(160deg, var(--purple), var(--purple-deep)); border:none; color:var(--white);
  box-shadow:0 30px 60px -20px var(--purple-glow);
}
.rec-tag{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:var(--gold);
  padding:5px 12px; border-radius:99px; position:absolute; top:26px; right:26px;
}
@media (max-width:760px){
  .rec-tag{ position:static; display:inline-block; margin-bottom:14px; }
}
.price-card h3{ font-family:var(--sans); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-dim); }
.price-card.rec h3{ color:rgba(255,255,255,0.75); }
.price-now{ font-family:var(--display); font-size:clamp(42px,5vw,56px); margin-top:18px; }
.price-unit{ font-size:14px; color:var(--ink-dim); margin-top:8px; }
.price-card.rec .price-unit{ color:rgba(255,255,255,0.75); }
.price-card a.btn-line{
  margin-top:28px; display:inline-block; font-size:14.5px; font-weight:700; padding-bottom:3px;
  border-bottom:2px solid transparent; border-image:linear-gradient(90deg, var(--purple), var(--gold)) 1;
}
.price-card.rec a.btn-line{ border-image:none; border-bottom-color:var(--gold); color:var(--gold); }

/* ---------- pricing page: single-plan band ----------
   One credit, one price - rather than a solid purple block sitting on
   the page, this is an open layout on the normal white background: a
   soft radial purple glow behind it, a gradient-text price figure
   (purple -> gold, same gradient already used on CTA underlines and
   the numbered-circle borders), and the details column back in normal
   page ink colors since there's no dark fill to contrast against.

   .glow-zone wraps the hero AND this section under one shared glow
   background instead of each having its own - two separately-clipped
   radial fades (hero's + this section's) met at the section boundary
   and read as a visible seam, even with no literal border anywhere;
   one continuous background behind both has nowhere for a seam to
   form. Percentages below are tuned against this page's hero+pricing
   height, not reusable as-is if copied to a page with a shorter hero. */
.glow-zone{ position:relative; }
.glow-zone-bg{
  position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(760px 480px at 50% 0%, rgba(125,0,234,0.09), transparent 62%),
    radial-gradient(520px 360px at 88% 6%, rgba(218,165,32,0.10), transparent 58%),
    radial-gradient(720px 560px at 8% 68%, rgba(125,0,234,0.13), transparent 62%),
    radial-gradient(440px 340px at 26% 80%, rgba(218,165,32,0.07), transparent 62%);
  /* Forces the whole glow to dissolve to nothing before it reaches the
     boundary with the next section (gray "Why Choose" background) -
     pulling the radial positions back (above) narrows the gap but a
     hard box edge is still a hard box edge; this guarantees there's
     nothing abrupt left for the eye to catch, regardless of how the
     radials above are tuned later. */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
}
.price-section{ position:relative; }

/* ---------- course-page pricing (same .price-open component, standalone) ----------
   Same gradient/glow component /pricing/ uses, dropped into each course
   page's own section instead of the hero-merged glow-zone /pricing/ uses
   (course pages don't sit right under their own hero the way /pricing/
   does). No margin of its own - every page places this inside its own
   dedicated <section class="section">, whose padding (clamp(56px,9vw,110px),
   the same rule every other section on the site already uses) gives
   consistent, equal spacing on both sides. The section immediately AFTER
   this component needs its own top padding zeroed per-page (inline style,
   matching the hero's existing padding-bottom:0 convention) or its bottom
   gap doubles up with that section's own top padding. */
.price-standalone{
  position:relative; max-width:960px; margin:0 auto;
}
.price-standalone-glow{
  position:absolute; inset:-90px -70px; z-index:-1; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(55% 60% at 22% 42%, rgba(125,0,234,0.15), transparent 70%),
    radial-gradient(45% 50% at 85% 64%, rgba(218,165,32,0.09), transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 30%, transparent 92%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 30%, transparent 92%);
}
.price-open{ display:grid; grid-template-columns:auto 1fr; gap:16px 64px; align-items:center; max-width:960px; margin:0 auto; }
.price-open-left{ min-width:220px; }
.price-open-left h3{ font-family:var(--sans); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-dim); }
.price-now-grad{
  font-family:var(--display); font-size:clamp(54px,7vw,76px); line-height:1; margin-top:14px;
  color:var(--purple); /* solid fallback if background-clip:text isn't supported - never leave this unconditionally transparent */
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .price-now-grad{
    /* Mostly purple (which has solid contrast on white) with gold only
       as a small accent at the very tail, not a 50/50 split - gold at
       full strength reads noticeably weaker against white than purple
       does, and this is the single most important number on the page. */
    background-image:linear-gradient(100deg, var(--purple) 0%, var(--purple) 68%, var(--gold) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  }
}
.price-open-left .price-unit{ margin-top:6px; }
.price-open-left .btn-primary{ margin-top:26px; }
.price-open-right{ border-left:1px solid var(--gray-line); padding-left:64px; }
.price-open-lead{ font-size:16.5px; line-height:1.6; color:var(--ink); margin-bottom:20px; max-width:520px; }
.price-open-list{ margin:0; max-width:none; grid-template-columns:1fr; gap:10px; }
@media (max-width:760px){
  .price-open{ grid-template-columns:1fr; gap:28px; }
  .price-open-right{ border-left:none; padding-left:0; border-top:1px solid var(--gray-line); padding-top:28px; }
}
.pricing-foot{ margin-top:30px; font-size:13.5px; color:var(--ink-dim); text-align:center; }

/* ---------- course pages ---------- */
.course-stats{ display:flex; gap:0; border:1px solid var(--gray-line); border-radius:16px; overflow:hidden; margin-bottom:36px; flex-wrap:wrap; }
.course-stat{ flex:1; min-width:140px; padding:18px 16px; text-align:center; border-right:1px solid var(--gray-line); }
.course-stat:last-child{ border-right:none; }
.course-stat .ico{ font-size:20px; margin-bottom:8px; }
.course-stat .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-dim); font-weight:700; margin-bottom:4px; }
.course-stat .val{ font-size:14px; font-weight:700; color:var(--ink); }
.course-stat .val.val-ai{ display:inline-flex; align-items:center; gap:5px; }
.course-stat .val .ai-icon{ width:16px; height:16px; }
.course-stat .val .ai-icon svg{ width:9px; height:9px; }
.course-intro{ font-size:16px; line-height:1.65; color:var(--ink-dim); max-width:760px; margin-bottom:28px; }
.why-choose-intro{ font-size:15px; line-height:1.65; color:var(--ink-dim); max-width:760px; margin-bottom:28px; }
.back-link{ margin-top:28px; display:inline-block; font-weight:600; font-size:14.5px; color:var(--purple); }
.back-link:hover{ text-decoration:underline; }
.link-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:28px 0; }
@media (max-width:640px){ .link-grid{ grid-template-columns:1fr; } }
.link-card{ display:block; background:var(--white); border:1px solid var(--gray-line); border-radius:14px; padding:18px 20px; font-weight:700; font-size:14.5px; color:var(--ink); transition:border-color .15s ease, transform .15s ease; }
.link-card:hover{ border-color:var(--purple); transform:translateY(-1px); }
.link-card span{ display:block; margin-top:4px; font-weight:400; font-size:13px; color:var(--ink-dim); }

/* ---------- article hero (full-width title band) ---------- */
.article-hero{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(52px,9vw,88px) 0 clamp(36px,6vw,56px);
  background:
    radial-gradient(900px 440px at 50% -15%, rgba(125,0,234,0.16), transparent 62%),
    linear-gradient(180deg, var(--purple-soft) 0%, var(--paper-2) 55%, var(--white) 100%);
}
.article-hero .wrap{ max-width:820px; }
.article-hero .article-meta{ font-size:13.5px; font-weight:600; color:var(--purple-deep); margin-bottom:16px; }
.article-hero h1{ font-size:clamp(30px,4.6vw,48px); line-height:1.12; color:var(--ink); max-width:780px; margin:0 auto; }
.article-hero + .section{ padding-top:clamp(36px,6vw,56px); }

/* ---------- long-form article (blog / research / legal) ----------
   Blog/research posts get .article-hero above (meta+h1 live there);
   legal pages (privacy/terms/refund/cookies) and About Us keep a plain
   in-flow h1 right in .article, hence this rule stays. */
.article{ max-width:720px; margin:0 auto; }
.article h1{ font-size:clamp(28px,4vw,44px); margin-bottom:16px; }
.article h2{ font-size:22px; margin:36px 0 14px; color:var(--ink); }
.article h3{ font-size:18px; margin:28px 0 10px; color:var(--ink); }
.article p{ font-size:15.5px; line-height:1.75; color:var(--ink-dim); margin-bottom:18px; }
.article ul, .article ol{ margin:0 0 18px; padding-left:22px; }
.article li{ font-size:15.5px; line-height:1.7; color:var(--ink-dim); margin-bottom:8px; }
.article strong{ color:var(--ink); }
.article a{ color:var(--purple); text-decoration:underline; }

/* ---------- insights hub index ---------- */
.post-list{ display:flex; flex-direction:column; gap:0; max-width:760px; margin:0 auto; }
.post-item{ padding:28px 0; border-top:1px solid var(--gray-line); }
.post-item:first-child{ border-top:none; }
.post-item .post-meta{ font-size:12.5px; color:var(--ink-dim); margin-bottom:8px; }
.post-item h2{ font-size:21px; margin-bottom:10px; }
.post-item h2 a{ color:var(--ink); }
.post-item h2 a:hover{ color:var(--purple); }
.post-item p{ font-size:14.5px; color:var(--ink-dim); line-height:1.6; margin-bottom:10px; }
.post-item .read-more{ font-weight:700; font-size:13.5px; color:var(--purple); }

/* ---------- mobile app page ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; }
.feature-card{
  background:var(--white); border:1px solid var(--gray-line); border-radius:16px; padding:26px 24px;
  box-shadow:0 10px 34px rgba(31,10,64,0.05);
}
.feature-card h3{ font-family:var(--display); color:var(--purple); font-size:17.5px; margin:0 0 10px; }
.feature-card p{ color:var(--ink-dim); font-size:14.5px; line-height:1.6; }
.qr-block{ display:inline-flex; flex-direction:column; align-items:center; gap:10px; margin-top:32px; }
.qr-block img{ width:120px; height:120px; border-radius:12px; border:1px solid var(--gray-line); padding:8px; background:var(--white); }
.qr-block span{ font-size:12px; color:var(--ink-dim); }

/* ---------- benefit strip (course/pricing hero facts) ----------
   Same checkmark language as .hero-highlights on the homepage — a 2-col
   grid instead of a stacked centered paragraph list, so 4-6 facts read
   as scannable items rather than a wall of text. */
.benefit-list{
  margin:28px auto 0; max-width:860px; text-align:left;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 32px;
}
@media (max-width:700px){ .benefit-list{ grid-template-columns:1fr; max-width:480px; } }
.benefit-list p{
  position:relative; padding-left:30px; font-size:14.5px; line-height:1.5; color:var(--ink-dim);
}
.benefit-list p::before{
  content:''; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%;
  background:var(--purple-soft, var(--paper-2));
}
.benefit-list p::after{
  content:''; position:absolute; left:6px; top:6px; width:8px; height:4px;
  border-left:2px solid var(--purple); border-bottom:2px solid var(--purple); transform:rotate(-45deg);
}

/* ---------- registration form ---------- */
.reg-card{
  max-width:640px; margin:0 auto; background:var(--white); border:1px solid var(--gray-line); border-radius:24px;
  padding:clamp(28px,5vw,44px); box-shadow:0 30px 70px -40px rgba(20,10,40,0.3);
}
.reg-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px){ .reg-row{ grid-template-columns:1fr; } }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.field input[type="text"], .field input[type="email"]{
  width:100%; padding:12px 14px; border:1.5px solid var(--gray-line); border-radius:10px; font-size:14.5px;
  font-family:var(--sans); background:var(--white); transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus{ outline:none; border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-glow); }
.plan-list{ width:100%; margin:8px 0 20px; }
.plan-list-head, .plan-row{
  display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
}
.plan-list-head{
  background:var(--paper-2); border-radius:10px; padding:10px 12px; margin-bottom:2px;
}
.plan-list-head span{ text-transform:uppercase; font-size:10.5px; letter-spacing:.05em; color:var(--purple); font-weight:700; }
.plan-list-head span:nth-child(2){ justify-self:center; }
.plan-list-head span:nth-child(3){ justify-self:end; }
.plan-row{ padding:12px; font-size:14px; border-bottom:1px solid var(--gray-line-soft); }
.plan-amt{ justify-self:end; font-weight:600; }
@media (max-width:480px){
  .plan-list-head{ display:none; }
  .plan-row{
    grid-template-columns:1fr auto; grid-template-areas:"info info" "qty amt";
    row-gap:12px; padding:16px 4px;
  }
  .plan-info{ grid-area:info; }
  .plan-qty{ grid-area:qty; }
  .plan-amt{ grid-area:amt; justify-self:end; align-self:center; }
}
.qty-input{ display:flex; align-items:center; border:1.5px solid var(--gray-line); border-radius:8px; overflow:hidden; width:fit-content; }
.qty-input button{ background:var(--paper-2); border:none; padding:8px 14px; cursor:pointer; font-weight:700; color:var(--purple); }
.qty-input input{ width:52px; text-align:center; border:none; border-left:1.5px solid var(--gray-line); border-right:1.5px solid var(--gray-line); padding:8px 4px; font-size:14px; }
.reg-total{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-top:2px solid var(--gray-line); font-weight:700; }
.reg-tnc{ display:flex; align-items:flex-start; gap:10px; margin:18px 0; font-size:13.5px; color:var(--ink-dim); line-height:1.5; }
.reg-tnc input{ margin-top:3px; accent-color:var(--purple); width:16px; height:16px; flex-shrink:0; }
.reg-tnc a{ color:var(--purple); text-decoration:underline; }
.field-error{ color:#c0392b; font-size:12.5px; margin-top:5px; display:none; }

/* ---------- landing-page nav/footer (ad traffic, no distractions) ---------- */
.nav-landing{ justify-content:space-between; }
.lp-trust{ font-size:12.5px; font-weight:600; color:var(--purple); white-space:nowrap; }
@media (max-width:700px){ .lp-trust{ display:none; } }
.footer-landing{ padding:32px 0; }
.footer-landing-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-landing-brand{ display:flex; align-items:center; gap:8px; font-family:var(--display); font-size:15px; color:var(--white); }
.footer-landing-links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-landing-links a{ font-size:12.5px; color:rgba(255,255,255,0.7); }
.footer-landing-links a:hover{ color:var(--gold); }

/* ---------- footer ---------- */
.footer{ background:var(--ink); padding:60px 0 40px; margin-top:20px; }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer-col{ min-width:180px; }
.footer-col .footer-h{ font-family:var(--display); font-weight:400; font-size:16px; color:var(--white); margin-bottom:16px; }
.footer-col a{ display:block; font-size:13.5px; color:var(--white); padding:5px 0; }
.footer-col a:hover{ color:var(--gold); }
.footer-app-col .app-badges{ margin-bottom:24px; }
.footer-app-col .app-badges img{ height:40px; }
.footer-legal{ font-size:12px; line-height:1.7; color:rgba(255,255,255,0.5); }
.footer-legal-col{ margin-top:12px; }

/* ---------- lightweight cookie notice (not a blocking modal, per competitor audit) ---------- */
.cookie-notice{
  position:fixed; bottom:16px; left:16px; right:16px; max-width:420px; z-index:60;
  background:var(--ink); color:var(--white); border-radius:16px; padding:16px 18px;
  box-shadow:0 20px 50px rgba(0,0,0,0.3); font-size:13px; line-height:1.5;
  display:flex; flex-direction:column; gap:12px; transform:translateY(150%); transition:transform .3s ease;
}
.cookie-notice.show{ transform:translateY(0); }
.cookie-notice a{ text-decoration:underline; }
.cookie-notice .row{ display:flex; gap:10px; }
.cookie-notice button{
  font-family:var(--sans); font-weight:700; font-size:13px; border-radius:999px; padding:8px 16px; border:none; cursor:pointer;
}
.cookie-notice .accept{ background:var(--gold); color:var(--ink); }
.cookie-notice .reject{ background:transparent; color:var(--white); border:1px solid rgba(255,255,255,0.3); }

/* visually hidden, still exposed to screen readers and crawlers */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- thank-you page ---------- */
.ty-check{
  width:76px; height:76px; margin:0 auto 26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:2px solid transparent; background-origin:border-box; background-clip:padding-box, border-box;
  background-image:linear-gradient(var(--white), var(--white)), linear-gradient(135deg, var(--purple), var(--gold));
  box-shadow:0 14px 34px var(--purple-glow);
}
.ty-check svg{ width:34px; height:34px; }
.ty-receipt{
  margin:34px auto 0; max-width:480px; text-align:left; background:var(--white);
  border:1px solid var(--gray-line); border-radius:20px; padding:22px 26px;
  box-shadow:0 20px 50px -28px rgba(20,10,40,0.35);
}
.ty-receipt[hidden]{ display:none; }
.ty-receipt-title{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--purple); }
.ty-lines{ list-style:none; margin:14px 0 0; padding:0; }
.ty-lines li{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-top:1px solid var(--gray-line-soft); font-size:14.5px; color:var(--ink-dim); }
.ty-lines li:first-child{ border-top:none; }
.ty-lines li span:last-child{ color:var(--ink); font-weight:600; white-space:nowrap; }
.ty-total{ display:flex; justify-content:space-between; gap:16px; margin-top:6px; padding-top:14px; border-top:1.5px solid var(--gray-line); font-size:16px; font-weight:700; }
.ty-ref{ margin-top:12px; font-size:12px; color:var(--ink-dim); }
.ty-h2{ font-size:clamp(26px,3.2vw,34px); margin-bottom:22px; }
.ty-steps{ grid-template-columns:1fr; gap:0; }
.ty-steps .check-item:nth-child(2){ border-top:1px solid var(--gray-line-soft); }
.ty-steps .check-item p b{ display:block; margin-bottom:4px; font-size:16px; }
.ty-note{ margin-top:22px; font-size:13.5px; line-height:1.6; color:var(--ink-dim); }

/* ---------- article author bio ---------- */
.author-bio{
  margin-top:40px; padding:24px 28px; border-radius:16px;
  background-color:var(--paper-2);
  border:1.5px solid transparent; background-origin:border-box; background-clip:padding-box, border-box;
  background-image:linear-gradient(var(--paper-2), var(--paper-2)), linear-gradient(135deg, var(--purple), var(--gold));
}
.author-bio-name{ font-family:var(--display); font-size:16.5px; color:var(--ink); margin-bottom:6px; }
.author-bio-text{ font-size:14px; line-height:1.65; color:var(--ink-dim); margin-bottom:10px; }
.author-bio-link{ font-size:13.5px; font-weight:700; }

/* ---------- AI narration badge/tag ---------- */
.ai-icon{
  flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--purple), var(--purple-deep));
}

.ai-pill{
  display:inline-flex; align-items:center; gap:10px; padding:8px 18px 8px 8px; border-radius:999px;
  border:2px solid transparent; background-origin:border-box; background-clip:padding-box, border-box;
  background-image:linear-gradient(var(--white), var(--white)), linear-gradient(135deg, var(--purple), var(--gold));
  box-shadow:0 14px 28px -12px var(--purple-glow);
}
.ai-pill .ai-icon{ width:26px; height:26px; }
.ai-pill .ai-icon svg{ width:14px; height:14px; }
.ai-pill span{ font-size:14px; font-weight:600; color:var(--ink); }
.hero-highlight.ai-highlight{ grid-column:1/-1; justify-content:center; margin-top:2px; }
@media (max-width:760px){ .hero-highlight.ai-highlight{ grid-column:auto; justify-content:flex-start; } }

.ai-tag{
  display:inline-flex; align-items:center; gap:5px; margin-left:6px; padding:2px 9px 2px 4px; border-radius:999px;
  background:var(--purple-soft, var(--paper-2)); white-space:nowrap; vertical-align:middle;
}
.ai-tag .ai-icon{ width:15px; height:15px; }
.ai-tag .ai-icon svg{ width:8px; height:8px; }
.ai-tag span{ font-size:10.5px; font-weight:700; letter-spacing:.03em; color:var(--purple); }

.feature-ai-row{
  display:flex; align-items:center; gap:8px; padding:9px 10px; margin:2px -10px; border-top:none !important;
  border-radius:8px; background:linear-gradient(90deg, rgba(125,0,234,0.08), rgba(218,165,32,0.05));
}
.feature-ai-row .ai-icon{ width:20px; height:20px; }
.feature-ai-row .ai-icon svg{ width:11px; height:11px; }
.feature-ai-row .feature-label{ color:var(--ink); font-weight:700; font-size:14.5px; }
.feature-ai-row .feature-tag{
  margin-left:auto; flex-shrink:0; font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--purple);
  background:var(--purple-soft, var(--paper-2)); padding:2px 8px; border-radius:999px;
}

.screenshot-badge{
  position:absolute; top:-16px; right:-10px; z-index:2; transform:rotate(-4deg);
  display:inline-flex; align-items:center; gap:8px; padding:7px 15px 7px 7px; border-radius:999px;
  border:2px solid transparent; background-origin:border-box; background-clip:padding-box, border-box;
  background-image:linear-gradient(var(--white), var(--white)), linear-gradient(135deg, var(--purple), var(--gold));
  box-shadow:0 16px 30px -10px rgba(125,0,234,0.5);
}
.screenshot-badge .ai-icon{ width:24px; height:24px; }
.screenshot-badge .ai-icon svg{ width:13px; height:13px; }
.screenshot-badge span{ font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap; }
@media (max-width:460px){ .screenshot-badge{ top:-10px; right:-6px; padding:7px; } .screenshot-badge span{ display:none; } }

/* ---------- ads landing-page offer card ---------- */
.lp-offer{
  max-width:640px; margin:32px auto 0; padding:36px 40px; border-radius:24px;
  background:var(--white); border:2px solid transparent;
  background-origin:border-box; background-clip:padding-box, border-box;
  background-image:linear-gradient(var(--white), var(--white)), linear-gradient(135deg, var(--purple), var(--gold));
  box-shadow:0 30px 60px -28px rgba(125,0,234,0.38);
}
.lp-offer-badge{
  display:inline-flex; align-items:center; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--purple); background:var(--purple-soft); padding:7px 16px; border-radius:999px; margin-bottom:24px;
}
.lp-offer-price-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; text-align:left; }
.lp-offer-price{ display:flex; align-items:center; gap:10px; }
.lp-offer-price .amt{ font-family:var(--display); font-size:34px; color:var(--ink); line-height:1; white-space:nowrap; }
.lp-offer-price .unit{ font-size:12.5px; color:var(--ink-dim); line-height:1.35; }
.lp-offer-proof{ display:flex; align-items:center; gap:10px; }
.lp-offer-proof .stars{ color:var(--gold); font-size:16px; letter-spacing:1px; }
.lp-offer-proof p{ font-size:11.5px; font-weight:600; color:var(--ink-dim); line-height:1.3; }
.lp-offer .btn-primary{ display:block; width:100%; text-align:center; margin-top:26px; font-size:17px; padding:18px 32px; }
.lp-offer-micro{ margin-top:12px; font-size:12.5px; color:var(--ink-dim); text-align:center; }
.lp-offer-demo{ display:block; text-align:center; margin-top:18px; font-size:13.5px; font-weight:600; color:var(--purple-deep); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:480px){
  .lp-offer{ padding:28px 22px; }
  .lp-offer-price-row{ flex-direction:column; align-items:flex-start; gap:16px; }
}