/* ============================================================
   Doctor AI. Shared Design System
   Premium dark / gold. Inter throughout (display + UI/body).
   Brand tokens locked: gold #FFD700 -> #FFA500 on near-black #0a0a0a.
   Drop this folder (/assets) at the site root next to /images.
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg:        #0a0a0a;
    --bg-deep:   #070707;
    --surface:   rgba(255,255,255,0.025);
    --surface-2: rgba(255,255,255,0.045);
    --card:      #121212;
    --gold:      #FFD700;
    --gold-2:    #FFA500;
    --grad:      linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    --text:      #f4f2ee;
    --text-2:    #aeaaa2;
    --text-3:    #7d7a73;
    --line:      rgba(255,255,255,0.08);
    --line-gold: rgba(255,215,0,0.22);
    --glow:      rgba(255,180,40,0.30);

    --serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --wrap: 1120px;
    --mid:  920px;
    --narrow: 720px;

    --r-card: 16px;
    --r-btn: 10px;
    --shadow-amb: 0 24px 60px rgba(0,0,0,0.5);
    --shadow-dir: 0 8px 22px rgba(0,0,0,0.45);
    --ease: 0.25s cubic-bezier(0.22,1,0.36,1);
}

/* scroll-padding-top clears the position:sticky nav. Without it every
   in-page "#anchor" CTA on the site lands with the target section's own
   heading parked underneath the nav bar -- measured at 390px and 1280px on
   /book/ and /free/, where the form <h2> sat ~40px above the nav's bottom
   edge. The nav is ~73-75px tall, so 96px leaves a little breathing room. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}
/* faint top glow + film grain for premium texture */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(60% 38% at 50% -4%, rgba(255,180,40,0.10), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    opacity: 0.025;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 0;
}
body > * { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
::selection { background: rgba(255,215,0,0.85); color: #000; }

/* ---------- Layout ---------- */
.wrap   { max-width: var(--wrap);   margin: 0 auto; padding: 0 24px; width: 100%; }
.mid    { max-width: var(--mid);    margin: 0 auto; padding: 0 24px; width: 100%; }
.narrow { max-width: var(--narrow); margin: 0 auto; padding: 0 24px; width: 100%; }

.section { padding: 92px 0; }
.section--tight { padding: 60px 0; }
.section--alt { background: var(--bg-deep); }
.section--line { border-top: 1px solid var(--line); }
.center { text-align: center; }

/* ---------- Type ---------- */
.serif { font-family: var(--serif); font-optical-sizing: auto; }

.gold {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

.eyebrow {
    display: inline-block;
    font-family: var(--sans);
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
}
.promise {
    font-family: var(--sans);
    font-size: 12.5px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 22px;
}

.badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,215,0,0.08);
    border: 1px solid var(--line-gold);
    color: var(--gold);
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    margin-bottom: 22px; white-space: nowrap;
}

h1, .h1 {
    font-family: var(--sans);
    font-size: clamp(36px, 5.6vw, 62px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.028em;
    margin-bottom: 26px;
}
h2, .h2 {
    font-family: var(--sans);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.022em;
    margin-bottom: 18px;
}
h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.01em; }
.h1 .gold, h1 .gold, .h2 .gold, h2 .gold { font-style: normal; }

.lede {
    font-size: clamp(17px, 1.5vw, 20px);
    color: var(--text-2);
    line-height: 1.6;
    max-width: 680px;
    margin-bottom: 34px;
}
.center .lede, .lede.center { margin-left: auto; margin-right: auto; }
.body { font-size: 17px; color: var(--text-2); line-height: 1.75; margin-bottom: 18px; }
.body strong, .lede strong { color: var(--text); font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--sans);
    font-weight: 700; font-size: 16px;
    padding: 16px 30px;
    min-height: 54px;
    border-radius: var(--r-btn);
    letter-spacing: 0.01em;
    text-align: center; line-height: 1.15;
    transition: transform var(--ease), box-shadow var(--ease), background var(--ease), color var(--ease);
}
.btn--gold {
    background: var(--grad); color: #0a0a0a;
    box-shadow: 0 10px 30px rgba(255,165,0,0.22);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(255,165,0,0.38); }
.btn--ghost {
    background: transparent; color: var(--gold);
    border: 1px solid var(--line-gold);
}
.btn--ghost:hover { background: rgba(255,215,0,0.07); border-color: rgba(255,215,0,0.5); transform: translateY(-2px); }
.btn--lg { font-size: 17px; padding: 20px 40px; min-height: 60px; }
.btn--block { width: 100%; }
.cta-micro { display: block; margin-top: 14px; font-size: 13px; color: var(--text-3); letter-spacing: 0.2px; }
.cta-micro strong { color: var(--gold); font-weight: 600; }
.cta-stack { display: flex; flex-direction: column; align-items: center; gap: 0; }

/* Conversion-page guardrails. Scoped so the rest of the site keeps its
   established density while the three primary offer pages stay readable. */
.offer-page .cta-micro { font-size: 14px; line-height: 1.65; }
.offer-page .btn:focus-visible,
.offer-page a:focus-visible,
.offer-page button:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}
.hero-motion-toggle {
    position: absolute; right: 18px; bottom: 18px; z-index: 4;
    min-height: 48px; display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 999px;
    color: var(--text); background: rgba(7,7,7,0.78);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    font-size: 14px; font-weight: 700;
}
.hero-motion-toggle:hover { border-color: var(--line-gold); color: var(--gold); }
.hero-motion-toggle__icon { width: 18px; text-align: center; font-size: 17px; line-height: 1; }
@media (max-width: 640px) {
    .offer-page .btn--lg,
    .offer-page .hero .btn,
    .offer-page .herov .btn,
    .offer-page .offer-hero .btn {
        min-height: 60px;
        font-size: 17px;
    }
    .hero-motion-toggle { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .hero-motion-toggle { display: none; } }

/* ---------- Promo bar (page-specific copy) ---------- */
.promobar {
    background: var(--grad); color: #000;
    text-align: center;
    padding: 11px 18px;
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.02em;
}
.promobar a { color: #000; text-decoration: underline; text-underline-offset: 2px; }
.promobar.is-mute {
    background: var(--surface);
    color: var(--text-2);
    border-bottom: 1px solid var(--line);
    font-weight: 500;
}
.promobar.is-mute strong { color: var(--text); }

/* ---------- Nav (injected) ---------- */
.nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(10,10,10,0.82);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
}
.nav__inner {
    max-width: var(--wrap); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 15px 24px;
}
.nav__logo {
    font-family: var(--sans); font-weight: 800; font-size: 21px;
    letter-spacing: -0.01em;
    flex: 0 0 auto; padding-right: 2px;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    white-space: nowrap;
    /* Measured 33.6px. It is the home link on every page, so its CLICKABLE box
       gets the same 44px floor as .nav__link. min-height matches .nav__link's,
       so the nav bar's own height (set by .nav__inner's padding) is unchanged. */
    display: inline-flex; align-items: center; min-height: 44px;
}
.nav__links { display: flex; align-items: center; gap: 20px; }
.nav__link {
    color: var(--text-2); font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
    transition: color var(--ease);
    /* The text box alone was 22.4px tall, under both the 44px touch target
       and WCAG 2.5.8's 24px minimum. inline-flex + min-height grows the
       CLICKABLE box to 44px without adding padding, so the nav bar's own
       height is unchanged (it is set by .nav__inner). */
    display: inline-flex; align-items: center; min-height: 44px;
}
.nav__link:hover { color: var(--gold); }
.nav__cta {
    background: var(--grad); color: #000;
    padding: 10px 18px; border-radius: var(--r-btn);
    font-weight: 700; font-size: 13.5px; white-space: nowrap;
    transition: transform var(--ease), box-shadow var(--ease);
    /* Measured 41.6px at 1280px. Same treatment as .nav__link: inline-flex +
       min-height grows the clickable box to 44px without changing padding, so
       the pill's look is unchanged and the nav bar does not get taller. */
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px;
}
.nav__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255,165,0,0.3); }
/* Outlined newsletter pill. Sits to the left of the gold CTA, upper right of every page. */
.nav__news {
    border: 1px solid var(--line-gold); color: var(--gold);
    padding: 9px 15px; border-radius: var(--r-btn);
    font-weight: 600; font-size: 13.5px; white-space: nowrap;
    transition: background var(--ease), border-color var(--ease), transform var(--ease);
    /* Measured ~39.5px. Same 44px floor as its two siblings. */
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px;
}
.nav__news:hover { background: rgba(255,215,0,0.08); border-color: var(--gold); transform: translateY(-1px); }
.nav__news .nav__news--long { display: none; }
.nav__toggle {
    display: none; flex-direction: column; gap: 5px;
    width: 44px; height: 44px; padding: 11px; align-items: center; justify-content: center;
}
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--gold); border-radius: 2px; transition: var(--ease); }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
    .nav__toggle { display: flex; }
    .nav__links {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: rgba(10,10,10,0.98);
        border-bottom: 1px solid var(--line);
        padding: 8px 0;
        display: none;
    }
    .nav__links.is-open { display: flex; }
    .nav__link { padding: 15px 24px; font-size: 15.5px; border-bottom: 1px solid var(--line); min-height: 48px; display: flex; align-items: center; }
    .nav__cta { margin: 12px 24px 8px; text-align: center; padding: 14px; justify-content: center; }
    /* In the mobile drawer there is room for the full sentence. */
    .nav__news { margin: 12px 24px 0; text-align: center; padding: 14px; min-height: 48px; display: flex; align-items: center; justify-content: center; }
    .nav__news .nav__news--short { display: none; }
    .nav__news .nav__news--long { display: inline; }
}

/* ---------- Hero ---------- */
.hero { padding: 76px 0 56px; }
.hero.center { text-align: center; }
.hero__media { margin-top: 44px; }

/* ---------- Cards / surfaces ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 28px;
}
.card--gold { border-color: var(--line-gold); background: rgba(255,215,0,0.03); }

/* ---------- Stats row ---------- */
/* auto-fit, not repeat(4,1fr). The container paints var(--line) and each
   .stat paints var(--bg) over it, so a fixed 4-track grid renders every unused
   track as a visibly lighter empty panel. Removing unsourceable head-count
   stats left /academy/ and /build-room/ with 2 stats each, i.e. two empty
   panels apiece. auto-fit collapses the unused tracks so any number of stats
   fills the row. Both pages are the only users of this class. */
.stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.stat { background: var(--bg); padding: 22px 14px; text-align: center; }
.stat__n { font-family: var(--serif); font-size: clamp(24px,3vw,34px); font-weight: 600; line-height: 1; }
.stat__l { font-size: 11.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 8px; }
@media (max-width: 640px){ .stats { grid-template-columns: repeat(2,1fr); } }

/* ---------- Value stack table ---------- */
.vstack { max-width: var(--narrow); margin: 0 auto; border: 1px solid var(--line-gold); border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.vstack__row { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 18px 24px; border-bottom: 1px solid var(--line); align-items: center; }
.vstack__row:last-child { border-bottom: 0; }
.vstack__name { font-size: 15.5px; color: var(--text); font-weight: 600; }
.vstack__name .sub { display: block; font-size: 13px; color: var(--text-3); font-weight: 400; margin-top: 3px; }
.vstack__price { font-size: 15px; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.vstack__total { background: rgba(255,215,0,0.06); }
.vstack__total .vstack__name { text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; color: var(--text-3); }
.vstack__total.is-now .vstack__name { color: var(--gold); }
.vstack__total .vstack__price { font-size: 18px; font-weight: 700; color: var(--text); }
.vstack__total .vstack__price.strike { text-decoration: line-through; color: var(--text-3); }
.vstack__total .vstack__price.free { font-family: var(--serif); font-size: 22px; }

/* ---------- Clean lists ---------- */
.checks { list-style: none; max-width: var(--narrow); margin: 0 auto; display: grid; gap: 10px; }
.checks li { position: relative; padding: 14px 18px 14px 50px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 16px; color: var(--text); line-height: 1.5; }
.checks li::before { content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--grad); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; }
.checks.is-x li::before { background: #ef4444; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/12px no-repeat; }

/* ---------- Fit list (aligned check / X) ---------- */
.flist { list-style: none; display: grid; gap: 13px; }
.flist li { position: relative; padding-left: 32px; font-size: 15px; color: var(--text); line-height: 1.5; }
.flist li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--grad); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat; }
.flist.is-x li::before { background: #ef4444; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/11px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/11px no-repeat; }

/* ---------- Generic grids ---------- */
.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2,1fr); }
.grid--3 { grid-template-columns: repeat(3,1fr); }
.grid--4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 860px){ .grid--3, .grid--4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* feature card */
.fcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 24px; position: relative; overflow: hidden; transition: transform var(--ease), border-color var(--ease); }
.fcard:hover { transform: translateY(-3px); border-color: var(--line-gold); }
.fcard__k { font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; }
.fcard h3 { font-size: 19px; margin-bottom: 8px; }
.fcard p { color: var(--text-2); font-size: 15px; line-height: 1.6; }

/* numbered step / module */
.step { display: flex; gap: 22px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 28px; transition: border-color var(--ease), transform var(--ease); }
.step:hover { border-color: var(--line-gold); transform: translateY(-2px); }
.step__n { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 14px; background: rgba(255,215,0,0.1); border: 1px solid var(--line-gold); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.step__n .k { font-size: 9px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.step__n .v { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1; color: var(--gold); }
.step__b h3 { font-size: 19px; margin-bottom: 6px; }
.step__b p { color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.step__b p strong { color: var(--text); }
.steps { max-width: var(--narrow); margin: 0 auto; display: grid; gap: 14px; }
@media (max-width: 560px){ .step { flex-direction: column; gap: 14px; padding: 22px; } }

/* ---------- Comparison table ---------- */
.compare { max-width: 860px; margin: 0 auto; border: 1px solid var(--line-gold); border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.compare__head, .compare__row, .compare__total {
    display: grid; grid-template-columns: 1.5fr 1.7fr 0.9fr 0.7fr; gap: 16px; align-items: center;
    padding: 16px 24px;
}
.compare__head { background: rgba(255,215,0,0.07); border-bottom: 1px solid var(--line-gold); font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.compare__row { border-bottom: 1px dashed var(--line); font-size: 15px; }
.compare__row:last-of-type { border-bottom: 0; }
.compare__row .feat { color: var(--text); font-weight: 600; }
.compare__row .rep { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.compare__row .price { color: var(--text-2); font-weight: 600; }
.compare__check { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #000; font-weight: 800; font-size: 14px; }
.compare__total { background: rgba(255,215,0,0.08); border-top: 1px solid var(--line-gold); font-size: 16px; }
.compare__total .feat { color: var(--gold); font-weight: 700; }
.compare__total .rep { color: var(--text-2); font-size: 14px; }
.compare__total .price { color: var(--gold); font-weight: 800; font-size: 18px; }
.compare__total .own { color: var(--gold); font-weight: 800; }
.compare__ml { display: none; }
@media (max-width: 720px) {
    .compare__head { display: none; }
    .compare__row, .compare__total { grid-template-columns: 1fr; gap: 6px; padding: 18px 20px; }
    .compare__ml { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-right: 8px; }
}

/* ---------- Money math card ---------- */
.money { max-width: var(--narrow); margin: 0 auto; background: rgba(255,215,0,0.04); border: 1px solid var(--line-gold); border-radius: var(--r-card); padding: 14px 30px; }
.money .row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--line); font-size: 16px; }
.money .row:last-child { border-bottom: 0; }
.money .row .l { color: var(--text-2); }
.money .row .v { color: var(--text); font-weight: 600; }
.money .row.is-now .l { color: var(--text); font-weight: 600; }
.money .row.is-now .v { color: var(--gold); font-weight: 800; }

/* ---------- Pricing ---------- */
.prices { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 880px; margin: 0 auto; }
@media (max-width: 760px){ .prices { grid-template-columns: 1fr; } }
.pcard { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; }
.pcard.is-featured { border-color: var(--line-gold); background: linear-gradient(180deg,#161310 0%, #121212 60%); box-shadow: var(--shadow-amb); }
.pcard__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { display: inline-block; background: var(--grad); color: #000; font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.tag.is-soft { background: rgba(255,215,0,0.1); color: var(--gold); border: 1px solid var(--line-gold); }
.pcard h3 { font-size: 21px; }
.pcard__amt { font-family: var(--serif); font-size: 44px; font-weight: 600; line-height: 1; }
.pcard__amt .per { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--text-3); margin-left: 4px; }
.pcard__lede { color: var(--text-2); font-size: 15px; }
.pcard__bul { list-style: none; display: grid; gap: 10px; margin: 2px 0 8px; }
.pcard__bul li { color: var(--text); font-size: 14.5px; padding-left: 26px; position: relative; line-height: 1.5; }
.pcard__bul li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--grad); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat; }
.pcard__bonus { display: flex; gap: 12px; background: rgba(255,215,0,0.08); border: 1px solid var(--line-gold); border-radius: 12px; padding: 14px 16px; }
.pcard__bonus .plus { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #000; font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.pcard__bonus b { display: block; font-size: 14.5px; color: var(--text); }
.pcard__bonus span { font-size: 13px; color: var(--gold); font-weight: 600; }

/* ---------- Offer recap card ---------- */
.offer { max-width: var(--narrow); margin: 0 auto; background: var(--card); border: 1px solid var(--line-gold); border-radius: 22px; padding: 40px 38px; }
.offer h3 { text-align: center; font-family: var(--serif); font-weight: 600; font-size: 26px; margin-bottom: 6px; }
.offer__price { text-align: center; font-family: var(--serif); font-size: 40px; font-weight: 600; margin-bottom: 24px; }
@media (max-width: 560px){ .offer { padding: 30px 22px; } }

/* ---------- Callout / guarantee ---------- */
.callout { max-width: var(--narrow); margin: 0 auto; border: 1px solid var(--line-gold); border-radius: var(--r-card); padding: 30px 32px; background: rgba(255,215,0,0.04); }
.callout--green { border-color: rgba(74,222,128,0.32); background: rgba(74,222,128,0.05); }
.callout h3 { font-size: 21px; margin-bottom: 10px; }
.callout--green h3 { color: #4ade80; }
.callout p { color: var(--text-2); font-size: 16px; line-height: 1.7; }
.callout p strong { color: var(--text); }

/* ---------- Testimonials ---------- */
.tgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 18px; max-width: 1000px; margin: 0 auto; }
.tcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px; display: flex; gap: 15px; align-items: flex-start; }
.tcard__av { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line-gold); }
.tcard__av.is-initials { background: var(--grad); color: #000; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; letter-spacing: -0.02em; }
.tcard__name { font-size: 12.5px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2px; }
.tcard__role { font-size: 12px; color: var(--text-3); margin-bottom: 11px; }
.tcard p { font-size: 14.5px; color: var(--text); line-height: 1.6; }

/* ---------- FAQ ---------- */
.faq { max-width: var(--narrow); margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.faq summary { cursor: pointer; padding: 20px 24px; font-size: 16px; font-weight: 600; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 16px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 24px; font-weight: 400; flex-shrink: 0; transition: transform var(--ease); line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 24px 22px; font-size: 15px; color: var(--text-2); line-height: 1.75; }
.faq .a a { color: var(--gold); border-bottom: 1px solid var(--line-gold); }

/* ---------- Image placeholder ---------- */
.ph {
    width: 100%;
    border: 1.5px dashed rgba(255,215,0,0.45);
    border-radius: var(--r-card);
    background:
        repeating-linear-gradient(135deg, rgba(255,215,0,0.025) 0 12px, transparent 12px 24px),
        var(--surface);
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    padding: 28px; gap: 8px; color: var(--text-3);
}
.ph__k { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.ph__t { font-size: 14px; color: var(--text-2); max-width: 420px; line-height: 1.5; }
.ph--wide { aspect-ratio: 16/9; }
.ph--app  { aspect-ratio: 16/10; }
.ph--sq   { aspect-ratio: 1/1; }
.ph--port { aspect-ratio: 4/5; }
.ph--band { aspect-ratio: 21/9; }
.framed { border-radius: var(--r-card); box-shadow: var(--shadow-amb), 0 0 60px rgba(255,215,0,0.06); border: 1px solid var(--line-gold); overflow: hidden; }

/* ---------- Value ladder ---------- */
.ladder { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; justify-content: center; }
@media (max-width: 760px){ .ladder { grid-template-columns: 1fr; max-width: 480px; } }
.rung { display: flex; flex-direction: column; gap: 5px; padding: 16px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: center; transition: border-color var(--ease), transform var(--ease); }
.rung:hover { border-color: var(--line-gold); transform: translateY(-2px); }
.rung__step { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.rung__name { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.25; }
.rung__price { font-size: 12.5px; color: var(--text-3); }
.rung__desc { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.rung.is-here { border-color: var(--gold); background: rgba(255,215,0,0.07); box-shadow: 0 0 0 1px var(--gold), 0 14px 34px rgba(255,180,40,0.16); }
.rung.is-here .rung__step { color: var(--gold); }
.rung.is-here .rung__price { color: var(--gold); }
.rung.is-here .rung__desc { color: var(--text-2); }

/* next-step band */
.next { max-width: var(--narrow); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--line-gold); border-radius: var(--r-card); padding: 26px 30px; background: rgba(255,215,0,0.04); }
.next__t .k { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.next__t h3 { font-size: 21px; font-family: var(--serif); font-weight: 600; }
.next__t p { color: var(--text-2); font-size: 14.5px; margin-top: 4px; }
@media (max-width: 560px){ .next { flex-direction: column; align-items: stretch; text-align: left; } .next .btn { width: 100%; } }

/* ---------- Footer (injected by site.js, and mirrored as raw HTML) ----------
   As of 2026-09-11 these same classes are also used by literal markup inside
   the <div data-site-footer> on the indexable pages, so a crawler that does
   not run JavaScript can see the links. Anything styled here has to look
   right in both, which it does: the raw markup is the same class structure. */
.footer { background: var(--bg-deep); border-top: 1px solid var(--line); padding: 60px 0 36px; }
.footer__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; margin-bottom: 44px; }
@media (max-width: 760px){ .footer__grid { grid-template-columns: repeat(2,1fr); gap: 28px; } }
/* 2026-09-11: the footer carries 11 internal links now instead of 6. At two
   columns on a 390px phone each track is ~163px, and the longest labels
   ("AI Lead Follow-Up Automation", "Free Claude Training Videos") wrap to
   three lines, so the two columns stop lining up and the block reads as a
   wall. One column below 600px. Tap targets are unaffected: the 44px floor
   comes from the padding on .footer__col a below, not from the track width. */
@media (max-width: 600px){ .footer__grid { grid-template-columns: 1fr; gap: 22px; margin-bottom: 34px; } }
.footer__col h4 { font-size: 12px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 14px; }
/* gap drops to 0 because the links now carry their own vertical padding
   (below) to reach a 44px tap target; the visual rhythm is unchanged. */
.footer__col ul { list-style: none; display: grid; gap: 0; }
/* inline-block + padding so a footer link is a real tap target. Measured at
   390px these were 17px tall, well under the 44px minimum, on every page. */
.footer__col a { color: var(--text-2); font-size: 14px; transition: color var(--ease);
  display: inline-block; padding: 11px 0; line-height: 1.6; }
.footer__col a:hover { color: var(--gold); }
.footer__base { border-top: 1px solid var(--line); padding-top: 30px; text-align: center; }
.footer__logo { font-family: var(--sans); font-size: 21px; font-weight: 800; letter-spacing: -0.01em; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; }
.footer__stats { font-size: 13px; color: var(--text-2); margin-bottom: 16px; }
.footer__social { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
/* Measured 42.0px square at both 390px and 1280px — under the 44px tap-target
   floor. Grown to 44px square; the 19px glyph inside is unchanged, so the
   icons look identical and only the hit box grows. */
.footer__social a { width: 44px; height: 44px; min-height: 44px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); transition: var(--ease); }
.footer__social a:hover { color: var(--gold); border-color: var(--line-gold); transform: translateY(-2px); }
.footer__social svg { width: 19px; height: 19px; fill: currentColor; }
.footer__disc { font-size: 12.5px; color: #918d85; line-height: 1.65; max-width: 800px; margin: 0 auto 14px; }
.footer__copy { font-size: 12.5px; color: #918d85; }

/* ---------- Lead-magnet form (Kit embed) ---------- */
.formcard { max-width: 520px; margin: 0 auto; padding: 32px 30px; background: var(--surface); border: 1px solid var(--line-gold); border-radius: 20px; }
.formcard h2 { font-family: var(--serif); font-weight: 600; font-size: 24px; text-align: center; margin-bottom: 18px; }
.formcard .formkit-form { margin: 0 !important; background: transparent !important; padding: 0 !important; border: 0 !important; }
.formcard .formkit-form [data-style="clean"] { padding: 0 !important; }
.formcard .formkit-form input[type="text"],
.formcard .formkit-form input[type="email"] {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: #fff !important;
    padding: 15px 16px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-family: var(--sans) !important;
    margin-bottom: 10px !important;
}
.formcard .formkit-form input::placeholder { color: var(--text-3) !important; }
.formcard .formkit-submit {
    background: var(--grad) !important;
    color: #000 !important;
    padding: 16px 22px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border: 0 !important;
    cursor: pointer !important;
    min-height: 54px !important;
}
.formcard .formkit-submit > span { color: #000 !important; font-family: var(--sans) !important; }
.formcard .form-micro { text-align: center; font-size: 12.5px; color: var(--text-3); margin-top: 14px; }

/* ---------- Reveal on scroll ----------
   Content is visible by default. JS adds .reveal-ready only after a working
   observer exists, so a blocked script never turns the sales page blank. */
.reveal { opacity: 1; transform: none; }
.reveal-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.reveal-ready .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal-ready .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ---------- Scroll progress + nav elevation ---------- */
.scrollbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--grad); z-index: 200; box-shadow: 0 0 12px rgba(255,180,40,0.55); will-change: width; }
.nav.is-scrolled { background: rgba(8,8,8,0.92); box-shadow: 0 12px 34px rgba(0,0,0,0.45); }

@media (max-width: 768px) {
    .section { padding: 60px 0; }
    .section--tight { padding: 44px 0; }
    .hero { padding: 48px 0 36px; }
    .btn { width: 100%; }
    .btn.btn--inline { width: auto; }
}


/* ============================================================
   Hero split: copy on the left, book mockup on the right.
   Collapses to a single column, art first, on mobile.
   ============================================================ */
.hero-split {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
}
.hero-copy h1 { margin-bottom: 18px; }
.hero-copy .lede { margin-left: 0; margin-right: 0; }
.hero-art { display: flex; justify-content: center; }
.hero-art img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
}
@media (max-width: 880px) {
    .hero-split { grid-template-columns: 1fr; gap: 28px; text-align: center; }
    .hero-copy { order: 2; }
    .hero-art  { order: 1; }
    .hero-copy .lede { margin-left: auto; margin-right: auto; }
    .hero-copy div[style*="align-items:flex-start"] { align-items: center !important; }
    .hero-art img { max-width: 300px; }
}


/* ============================================================
   Thank-you page gift ladder.
   ============================================================ */
.gift-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 34px;
    text-align: left;
}
.gift {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 30px 24px 24px;
}
.gift--wide { text-align: left; }
.gift__n {
    position: absolute;
    top: -14px;
    left: 22px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--grad);
    color: #000;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gift h3 { font-size: 19px; margin-bottom: 8px; }
.gift p { color: var(--text-2); font-size: 14.5px; margin-bottom: 16px; }
.btn--ghost {
    background: transparent;
    border: 1px solid var(--line-gold);
    color: var(--gold);
}
.btn--ghost:hover { background: rgba(255,215,0,0.08); }
.gift-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}
.gift-row__name { font-weight: 600; font-size: 15px; }
.gift-row__links { display: flex; gap: 16px; }
.gift-row__links a {
    color: var(--gold);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (max-width: 860px) {
    .gift-grid { grid-template-columns: 1fr; }
    .gift-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- Author box. E-E-A-T. ----------
   One reusable block for the foot of a page's main content, so a reader and a
   crawler can both see who is talking and why he should be believed. Used on
   /, /about/, /academy/ and /consulting/. Tokens only, no new colors.
   The links carry the same 44px min-height tap-target floor as .nav__link and
   .footer__col a, applied with inline-flex so the underline stays tight to the
   text and the box does not grow taller than the line box. */
.authorbox {
    max-width: var(--narrow);
    margin: 0 auto;
    display: flex;
    gap: 26px;
    align-items: flex-start;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line-gold);
    border-radius: var(--r-card);
    padding: 30px 32px;
}
.authorbox__photo {
    flex: 0 0 auto;
    width: 104px; height: 104px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--line-gold);
    box-shadow: var(--shadow-dir);
}
.authorbox__k {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}
.authorbox__name { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 5px; }
.authorbox__cred { font-size: 13.5px; font-weight: 600; color: var(--gold); line-height: 1.5; margin-bottom: 12px; }
.authorbox__bio  { font-size: 15px; color: var(--text-2); line-height: 1.7; }
.authorbox__links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 2px; }
.authorbox__links a {
    color: var(--gold);
    font-size: 14px; font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px;
    display: inline-flex; align-items: center; min-height: 44px;
    transition: opacity var(--ease);
}
.authorbox__links a:hover { opacity: 0.72; }
@media (max-width: 560px) {
    .authorbox { flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 26px 22px; }
    .authorbox__links { justify-content: center; gap: 18px; }
}