@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Source+Serif+4:ital,wght@0,600;0,700;1,500;1,600&display=swap');

/* ============ Tokens (mirrors globals.css) ============ */
:root{
  --background:#f7f9fd;
  --foreground:#243447;

  --brand:#157F3C;
  --brand-dark:#0F5C2E;
  --brand-soft:#E3F5EA;
  --brand-rgb:21,127,60;
  --muted:#5C6B84;
  --line:#E1E7F0;
  --shadow-card: 0 12px 32px -16px rgba(36,52,71,0.16);

  --success:#1E9E6B;
  --success-soft:#E4F6EE;
  --warning:#C68A1E;
  --warning-soft:#FBF1DE;
  --alert:#D1573A;
  --alert-soft:#FBEAE4;

  --radius-lg:1.5rem;
  --radius-md:1rem;
  --radius-full:9999px;

  /* ── New brand direction (header/footer only, for now) ──────────────────
     Inter is now the site-wide typeface (see body/h1-h4 below) — this green
     family is the remaining piece, still scoped to header/footer only until
     the rest of the site's colour palette gets the same rebrand pass. Named
     gm- to stay clearly distinct from --brand while both exist side by side.
     Green instead of Grasp Maths' blue, by design, to visually distinguish
     the two products. */
  --gm-green:#15803D;
  --gm-green-dark:#0F5C2E;
  --gm-green-mid:#2FA562;
  --gm-green-light:#EAF7EF;
  --gm-green-line:#BFE6CC;
  --gm-slate-900:#0f172a;
  --gm-slate-700:#334155;
  --gm-slate-500:#64748b;
  --gm-slate-400:#94a3b8;
  --gm-slate-200:#e2e8f0;
  --gm-slate-100:#f1f5f9;
  --gm-slate-50:#f8fafc;

  /* ── English-only identity layer ──────────────────────────────────────
     Grasp Maths' voice is numeric/precise: all-Inter, tabular figures, a
     ledger-style dashboard. English's subject matter is language and
     editing, so its display type and signature motif are drawn from that:
     a literary serif for headlines, and real proofreading marks (not a
     generic icon) as the one recurring visual signature. Body copy and UI
     chrome stay on Inter — same company, same component grammar — the
     departure is deliberately concentrated in type voice + motif, not a
     wholesale re-skin. --ink-mark reuses the existing --alert red so the
     "red pen" motif stays inside the established token system. */
  --font-display:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ink-mark:var(--alert);
  --ink-mark-soft:var(--alert-soft);
  --paper:#FBF9F4;
  --paper-line:#E7E1D2;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--background);
  color:var(--foreground);
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;background:none;border:none;}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

/* ============ Reimplemented component classes (match globals.css exactly) ============ */
.container-page{margin-left:auto;margin-right:auto;width:100%;max-width:80rem;padding-left:1rem;padding-right:1rem;}
@media (min-width:768px){.container-page{padding-left:1.5rem;padding-right:1.5rem;}}

.surface{border-radius:var(--radius-lg);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-card);}

.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-full);background:var(--brand);
  padding:0.75rem 1.25rem;font-size:0.875rem;font-weight:800;color:#fff;
  transition:background .18s ease, transform .18s ease; border:1px solid transparent;
}
.btn-primary:hover{background:var(--brand-dark); transform:translateY(-1px);}

.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-full);border:1px solid rgba(var(--brand-rgb),0.25); background:#fff;
  padding:0.75rem 1.25rem;font-size:0.875rem;font-weight:800;color:var(--brand-dark);
  transition:border-color .18s ease, background .18s ease;
}
.btn-secondary:hover{border-color:rgba(var(--brand-rgb),0.45); background:var(--brand-soft);}

.btn-dark{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-full);background:var(--foreground);
  padding:0.75rem 1.25rem;font-size:0.875rem;font-weight:800;color:#fff;
  transition:background .18s ease, transform .18s ease;
}
.btn-dark:hover{background:#1b2635; transform:translateY(-1px);}

.section-pad{padding:1.5rem;}
@media (min-width:768px){.section-pad{padding:2rem;}}

.eyebrow{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.2em;color:var(--brand);}

.title-lg{font-family:var(--font-display);font-size:2.25rem;font-weight:700;letter-spacing:-0.01em;color:var(--brand);line-height:1.18;}
@media (min-width:768px){.title-lg{font-size:2.75rem;}}

.title-md{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-0.005em;color:var(--brand);line-height:1.28;}
@media (min-width:768px){.title-md{font-size:1.75rem;}}

.copy-muted{font-size:1rem;line-height:1.8;color:var(--muted);}

.card-grid-3{display:grid;gap:1.25rem;grid-template-columns:1fr;}
@media (min-width:768px){.card-grid-3{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1280px){.card-grid-3{grid-template-columns:repeat(3,1fr);}}

.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-full);border:1px solid rgba(var(--brand-rgb),0.18);background:var(--brand-soft);padding:0.5rem 1rem;font-size:0.875rem;font-weight:700;color:var(--brand-dark);}
.nav-free-tag{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;background:var(--success-soft, #E4F6EE);color:var(--success, #1E9E6B);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;vertical-align:1px;}

.field-input{width:100%;border-radius:var(--radius-md);border:1px solid var(--line);background:#fff;padding:0.75rem 1rem;font-size:0.9375rem;font-family:inherit;color:var(--foreground);}
.field-input:focus{outline:2px solid var(--brand);outline-offset:1px;}
.field-label{display:block;font-size:0.8125rem;font-weight:700;color:var(--foreground);margin-bottom:6px;}

/* ============ Header / Nav ============
   First piece of the new brand direction (see --gm-* tokens above): the new
   blue, sticky translucent bar with a plain two-tone wordmark — no icon
   mark, per the design reference this was built from. Colour palette is
   scoped to header.site-header only, so the rest of the site keeps its
   current colours until the wider rebrand happens; typeface is Inter
   site-wide now (see body/h1-h4 above), so no separate font-family here. */
header.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--gm-slate-200);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px;}
.logo{display:flex;align-items:baseline;gap:0;font-weight:900;font-size:20px;letter-spacing:-.01em;flex-shrink:0;}
.logo-mark{color:var(--gm-green);}
.logo-word{color:var(--gm-slate-900);font-family:var(--font-display);font-style:italic;font-weight:600;}
.logo-switch{display:flex;align-items:baseline;gap:7px;font-family:var(--font-display);font-style:italic;font-weight:700;font-size:18px;letter-spacing:-.01em;flex-shrink:0;}
.logo-switch .sep{color:var(--gm-slate-200);font-style:normal;font-weight:400;}
.logo-switch a.on{color:var(--gm-green);}
.logo-switch a:not(.on){color:var(--gm-slate-400);transition:color .15s ease;}
.logo-switch a:not(.on):hover{color:var(--gm-green-dark);}
nav.primary-nav{display:flex;align-items:center;gap:2px;}
nav.primary-nav a{font-size:14px;font-weight:600;color:var(--gm-slate-700);padding:8px 14px;border-radius:.5rem;transition:background .15s ease,color .15s ease;}
nav.primary-nav a:hover{background:var(--gm-slate-50);color:var(--gm-slate-900);}
nav.primary-nav a.active{background:var(--gm-green-light);color:var(--gm-green);}
.nav-actions{display:flex;align-items:center;gap:10px;}
.nav-login{font-size:14px;font-weight:600;color:var(--gm-slate-700);white-space:nowrap;padding:.5rem .9rem;border-radius:.65rem;border:1px solid var(--gm-slate-200);transition:border-color .15s ease,color .15s ease;}
.nav-login:hover{border-color:var(--gm-green);color:var(--gm-green);}
/* header.site-header (not just .nav-actions >) so the same new-brand
   treatment applies to the CTA duplicated inside .mobile-nav-actions for
   the collapsed-menu state below — otherwise it'd silently fall back to
   the old site-wide .btn-primary colour there. */
header.site-header .btn-primary{
  background:var(--gm-green);color:#fff;border-radius:.65rem;
  padding:.5rem 1rem;font-size:14px;font-weight:800;
  transition:background .15s ease,transform .15s ease;
}
header.site-header .btn-primary:hover{background:var(--gm-green-dark);transform:translateY(-1px);}
.nav-toggle{display:none;padding:12px;margin:-12px;flex-shrink:0;}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--gm-slate-900);margin:4px 0;border-radius:2px;}
.mobile-nav-actions{display:none;}

/* Below 960px, the full text nav collapses into the hamburger menu, so the
   visible header row only has to fit the logo and the toggle button — Log
   In / Start Practice move into that same dropdown instead of squeezing
   into the collapsed row alongside the toggle, which is what made the bar
   feel cramped on phones (three tap targets fighting the logo for a 78px
   row). */
@media (max-width:960px){
  .nav-row{height:64px;}
  nav.primary-nav{display:none;}
  .nav-toggle{display:block;}
  .nav-actions{gap:8px;}
  .nav-actions .nav-login, .nav-actions > .btn-primary{display:none;}
  .logo-switch{font-size:15px;gap:5px;}
  nav.primary-nav.open-mobile{
    display:flex;flex-direction:column;align-items:stretch;gap:4px;
    position:absolute;top:64px;left:0;right:0;background:#fff;
    padding:18px 20px 22px;border-bottom:1px solid var(--gm-slate-200);
    box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.04);
    max-height:calc(100vh - 64px);overflow-y:auto;
  }
  nav.primary-nav.open-mobile > a{padding:12px 4px;border-radius:0;border-bottom:1px solid var(--gm-slate-100);font-size:15.5px;}
  nav.primary-nav.open-mobile > a:hover{background:transparent;}
  nav.primary-nav.open-mobile > a:last-of-type{border-bottom:none;}
  nav.primary-nav.open-mobile .mobile-nav-actions{
    display:flex;flex-direction:column;gap:10px;margin-top:12px;padding-top:4px;
  }
  nav.primary-nav.open-mobile .mobile-nav-actions .btn-primary{width:100%;text-align:center;}
  nav.primary-nav.open-mobile .mobile-nav-actions .nav-login{text-align:center;padding:.65rem 0;}
}


/* ============ Signature: the marking tick ============
   The same tick used throughout the site to mark a correct answer, scaled up
   as a quiet watermark. It is the product's own promise (instant marking)
   rather than an abstract texture, so it only appears on section openers.
   Kept behind content and hidden from assistive tech via the ::before. */
.tick-mark{position:relative;overflow:hidden;isolation:isolate;}
.tick-mark::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:50%;right:-90px;width:460px;height:460px;transform:translateY(-50%) rotate(-8deg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23157F3C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:0.05;
}
.cta-band.tick-mark::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  opacity:0.06;
}
@media (max-width:960px){
  .tick-mark::before{width:300px;height:300px;right:-110px;opacity:0.04;}
}

/* ============ Hero ============ */
.hero{padding:72px 0 56px;}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.hero h1{font-family:var(--font-display);font-size:clamp(32px,4vw,50px);font-weight:700;letter-spacing:-0.01em;line-height:1.2;color:var(--foreground);margin:16px 0 18px;}
.hero h1 .accent{color:var(--brand);font-style:italic;}
.hero .lede{font-size:17px;line-height:1.7;color:var(--muted);max-width:460px;margin-bottom:28px;}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px;}
.trust-row{display:flex;gap:22px;flex-wrap:wrap;}
.trust-item{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);font-weight:600;}
.trust-item svg{width:15px;height:15px;color:var(--success);flex-shrink:0;}

/* ============ Ledger / dashboard card (soft, rounded, brand-blue) ============ */
.ledger-card{padding:26px;}
.ledger-card .head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line);}
.ledger-card .head .who{font-weight:800;font-size:16px;}
.ledger-card .head .when{font-size:12px;color:var(--muted);}
.stat-row{display:flex;gap:22px;margin-bottom:20px;}
.stat-row .stat .num{font-size:26px;font-weight:800;line-height:1;color:var(--foreground);}
.stat-row .stat.up .num{color:var(--success);}
.stat-row .stat .label{font-size:11.5px;color:var(--muted);margin-top:6px;font-weight:600;}
.skill-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #F0F3F8;font-size:14px;}
.skill-row:last-child{border-bottom:none;}
.skill-row .who{display:flex;align-items:center;gap:10px;font-weight:600;}
.skill-row .pct{font-weight:800;font-size:14px;}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.dot.strong{background:var(--success);}
.dot.dev{background:var(--warning);}
.dot.needs{background:var(--alert);}
.skill-row.needs .pct{color:var(--alert);}
.next-box{margin-top:18px;padding:14px 16px;background:var(--brand-soft);border-radius:var(--radius-md);}
.next-box .t{font-size:12.5px;font-weight:800;color:var(--brand-dark);}
.next-box .s{font-size:12px;color:var(--muted);margin-top:3px;}

/* ============ Manuscript card (signature element) ============
   English's equivalent hero visual to Maths' numeric ledger card — but
   drawn from what this product actually does: mark up a learner's own
   sentence. Real proofreading conventions (strike + caret insertion,
   wavy spelling flag, circled punctuation, margin note), not an icon or
   an abstract shape. Lined-paper background is scoped to this one panel,
   not the page background, so the site stays a clean neutral white and
   this stays the one deliberate accent. */
.manuscript-card{
  padding:0;overflow:hidden;
  background:var(--paper);
  background-image:repeating-linear-gradient(to bottom, transparent, transparent 30px, var(--paper-line) 31px);
  background-position:0 64px;
}
.manuscript-card .ms-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:18px 26px;border-bottom:1px solid var(--paper-line);
  background:rgba(255,255,255,.6);
}
.manuscript-card .ms-head .who{font-weight:800;font-size:14px;color:var(--foreground);}
.manuscript-card .ms-head .when{font-size:11.5px;color:var(--muted);}
.manuscript-card .ms-body{padding:28px 26px 30px;}
.ms-line{
  font-family:var(--font-display);font-size:19px;line-height:2.2;color:var(--foreground);
  position:relative;
}
.ms-strike{position:relative;color:#9AA398;}
.ms-strike::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;background:var(--ink-mark);transform:rotate(-2deg);}
.ms-insert{
  position:relative;top:-0.85em;font-size:0.62em;font-family:'Inter',sans-serif;font-weight:800;
  color:var(--ink-mark);margin:0 2px;
}
.ms-insert::before{content:"^";position:absolute;left:50%;top:1.1em;transform:translateX(-50%);color:var(--ink-mark);font-weight:900;}
.ms-wavy{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 4 Q3 0 6 4 T12 4' fill='none' stroke='%23C68A1E' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:0 bottom;padding-bottom:3px;
}
.ms-circle{
  position:relative;padding:0 3px;
}
.ms-circle::after{
  content:"";position:absolute;left:-6px;right:-6px;top:-6px;bottom:-4px;
  border:1.5px solid var(--ink-mark);border-radius:50%;transform:rotate(-3deg);
}
.ms-note{
  margin-top:16px;padding-top:14px;border-top:1px dashed var(--paper-line);
  font-family:var(--font-display);font-style:italic;font-size:13.5px;color:var(--ink-mark);
}
.ms-note svg{width:13px;height:13px;margin-right:5px;vertical-align:-1px;}

/* ============ Pull-quote ============ */
.pull-quote{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(20px,2.4vw,26px);line-height:1.5;color:var(--foreground);
  max-width:640px;position:relative;padding-left:34px;
}
.pull-quote::before{
  content:"\201C";position:absolute;left:-4px;top:-14px;font-size:56px;
  font-family:var(--font-display);color:var(--brand);opacity:.35;line-height:1;
}
.pull-quote cite{display:block;margin-top:14px;font-family:'Inter',sans-serif;font-style:normal;font-weight:700;font-size:13px;color:var(--muted);}

/* ============ Feature strip ============ */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;}
.strip-row{display:grid;grid-template-columns:repeat(4,1fr);}
.strip-item{padding:20px 24px;border-left:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:9px;}
.strip-item:first-child{border-left:none;}
.strip-item svg{width:15px;height:15px;color:var(--success);flex-shrink:0;}
@media (max-width:900px){.strip-row{grid-template-columns:repeat(2,1fr);}.strip-item:nth-child(odd){border-left:none;}}
@media (max-width:560px){.strip-row{grid-template-columns:1fr;}.strip-item{border-left:none!important;border-top:1px solid var(--line);}.strip-item:first-child{border-top:none;}}

/* ============ Sections ============ */
section{padding:88px 0;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head p.copy-muted{margin-top:14px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* ============ Steps ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.step{padding:24px;}
/* Hand-circled marginalia numeral (not the filled square badge Maths uses)
   — ties the step sequence back to the manuscript signature's ink-mark red. */
.step .n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:transparent;border:1.5px solid var(--ink-mark);color:var(--ink-mark);font-family:var(--font-display);font-weight:700;font-size:15px;margin-bottom:16px;}
.step h3{font-size:17px;font-weight:800;margin-bottom:8px;color:var(--foreground);}
.step p{font-size:14px;color:var(--muted);}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.steps{grid-template-columns:1fr;}}

/* ============ Practice-type / option cards ============ */
.ptype{padding:26px;display:flex;flex-direction:column;gap:14px;transition:transform .18s ease, box-shadow .18s ease;}
.ptype:hover{transform:translateY(-3px);box-shadow:0 18px 36px -16px rgba(36,52,71,0.22);}
.ptype h3{font-size:19px;font-weight:800;}
.ptype p.desc{font-size:14px;color:var(--muted);}
.ptype ul{display:flex;flex-direction:column;gap:8px;}
.ptype ul li{font-size:13.5px;display:flex;gap:8px;color:var(--foreground);}
.ptype ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex-shrink:0;margin-top:6px;}
.ptype .foot{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--brand);}

/* ============ Feature row (3-up, icon top) ============ */
.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.feature-row .f{padding:22px;}
.feature-row .f .ic{width:38px;height:38px;border-radius:10px;background:var(--brand-soft);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.feature-row .f .ic svg{width:18px;height:18px;}
.feature-row .f strong{display:block;font-size:15.5px;margin-bottom:6px;}
.feature-row .f span{font-size:14px;color:var(--muted);}
@media (max-width:900px){.feature-row{grid-template-columns:1fr;}}

/* ============ Pricing ============ */
.pricing-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.pcard{padding:30px;display:flex;flex-direction:column;gap:16px;position:relative;}
.pcard.featured{border:2px solid var(--brand);}
.pcard .badge{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-dark);}
.pcard h3{font-size:20px;font-weight:800;}
.pcard .price{font-size:30px;font-weight:900;color:var(--foreground);}
.pcard .price small{font-size:13px;font-weight:600;color:var(--muted);}
.pcard ul{display:flex;flex-direction:column;gap:10px;font-size:13.5px;}
.pcard ul li{display:flex;gap:9px;align-items:flex-start;}
.pcard ul li.off{color:#A8B2C2;}
.pcard ul li svg{width:15px;height:15px;color:var(--success);flex-shrink:0;margin-top:2px;}
.pcard ul li.off svg{color:#C6CCD8;}
@media (max-width:900px){.pricing-wrap{grid-template-columns:1fr;}}

/* ============ Two-column sections (mobile-safe; several pages previously set grid-template-columns inline, which a media query can never override) ============ */
.ledger-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media (max-width:900px){.ledger-wrap{grid-template-columns:1fr;gap:40px;}}

.split-uneven{display:grid;grid-template-columns:1fr 1.3fr;}
@media (max-width:900px){.split-uneven{grid-template-columns:1fr;}}

.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
@media (max-width:560px){.form-row-2{grid-template-columns:1fr;}}

.pricing-wrap.cols-2{grid-template-columns:1fr 1fr;}
@media (max-width:640px){.pricing-wrap.cols-2{grid-template-columns:1fr;}}

.card-grid-3.cols-2{grid-template-columns:1fr 1fr;}
@media (max-width:768px){.card-grid-3.cols-2{grid-template-columns:1fr;}}

.steps.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.steps.cols-3{grid-template-columns:1fr;}}

.compare-table{width:100%;border-collapse:collapse;font-size:14px;}
.compare-table th,.compare-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);}
.compare-table th{font-weight:800;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;}
.compare-table td.center, .compare-table th.center{text-align:center;}

/* ============ FAQ ============ */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:22px 4px;font-size:16px;font-weight:700;color:var(--foreground);}
.faq-q .plus{color:var(--brand);font-size:20px;font-weight:400;transition:transform .2s ease;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-a p{padding:0 4px 22px;font-size:14.5px;line-height:1.7;color:var(--muted);max-width:640px;}

/* ============ Roadmap ============ */
.roadmap-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.roadmap-card{padding:26px;display:flex;flex-direction:column;gap:12px;background:var(--foreground);color:#fff;border:none;border-radius:var(--radius-lg);}
.roadmap-card .stage{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#9FB6F0;}
.roadmap-card h3{font-size:17px;font-weight:800;}
.roadmap-card p{font-size:13.5px;color:#B9C4D6;}
@media (max-width:900px){.roadmap-wrap{grid-template-columns:1fr;}}

/* ============ CTA band ============ */
.cta-band{background:var(--foreground);color:#fff;text-align:center;}
.cta-band .eyebrow{color:#9FB6F0;}
.cta-band h2{color:#fff;font-size:clamp(26px,3.2vw,36px);font-weight:900;letter-spacing:-0.015em;line-height:1.2;}
.cta-band p{color:#B9C4D6;margin:16px auto 28px;max-width:480px;font-size:16px;line-height:1.7;}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.cta-actions .btn-secondary{background:transparent;border-color:#3E4C63;color:#fff;}
.cta-actions .btn-secondary:hover{background:#1E2A3D;}

/* ============ Footer ============
   Same new-brand pass as the header (see comment there) — white ground
   instead of the old dark-navy footer, plus the CTA-strip pattern from the
   design reference. footer-brand no longer needs a colour override: the
   base .logo styling (blue mark + slate-900 word) already reads correctly
   on white without one. */
footer.site-footer{
  background:#fff;color:var(--gm-slate-700);padding:56px 0 32px;font-size:14px;
  border-top:1px solid var(--gm-slate-200);
}
.footer-top{display:grid;grid-template-columns:1.2fr repeat(5,1fr);gap:28px;padding-bottom:32px;}
.footer-brand p{margin-top:14px;max-width:260px;color:var(--gm-slate-500);font-size:13.5px;line-height:1.6;}
.footer-col h4{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gm-slate-400);margin-bottom:14px;font-weight:800;}
.footer-col ul{display:flex;flex-direction:column;gap:11px;}
.footer-col a{color:var(--gm-slate-700);}
.footer-col a:hover{color:var(--gm-green);}

.footer-cta-strip{
  margin-top:32px;background:var(--gm-green-light);border:1px solid rgba(21,128,61,.15);
  border-radius:1rem;padding:1rem 1.25rem;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.footer-cta-strip p{font-size:.8125rem;color:var(--gm-slate-900);font-weight:800;margin:0;}
.footer-cta-strip small{display:block;color:var(--gm-slate-500);font-weight:400;font-size:.75rem;margin-top:2px;}

/* ============ Guide page mockups ============
   Window-chrome wrapper makes any card read as "a screenshot of the
   product" rather than decorative UI — used across the student/parent/
   tutor guides so each step can show what the screen actually looks like
   instead of describing it in prose alone. */
.window-mockup{overflow:hidden;}
.window-mockup .window-bar{
  display:flex;align-items:center;gap:6px;padding:10px 14px;
  background:var(--gm-slate-50);border-bottom:1px solid var(--line);
}
.window-mockup .window-dot{width:9px;height:9px;border-radius:50%;background:var(--gm-slate-200);}
.window-mockup .window-title{margin-left:8px;font-size:11.5px;font-weight:700;color:var(--muted);}
.window-mockup .window-body{padding:20px;}

.mock-question{font-size:14px;}
.mock-question .prompt{font-weight:700;color:var(--foreground);margin-bottom:12px;}
.mock-answer-box{border:1.5px solid var(--brand);border-radius:.65rem;padding:10px 14px;font-size:14px;color:var(--foreground);background:var(--brand-soft);margin-bottom:14px;}
.mock-marking{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--success);}
.mock-marking svg{width:16px;height:16px;flex-shrink:0;}

.mock-tuition{display:grid;grid-template-columns:1fr 120px;gap:14px;}
.mock-tuition .whiteboard{border:1px dashed var(--line);border-radius:.5rem;padding:16px;font-size:13px;color:var(--muted);min-height:90px;}
.mock-tuition .roster{display:flex;flex-direction:column;gap:8px;}
.mock-tuition .roster .who{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;}
.mock-tuition .roster .dot{width:7px;height:7px;border-radius:50%;background:var(--success);flex-shrink:0;}

.mock-worksheet{border:1px solid var(--line);border-radius:.5rem;padding:24px 26px;background:#fff;font-family:Georgia,'Times New Roman',serif;}
.mock-worksheet .ws-title{font-size:19px;font-weight:800;color:var(--foreground);margin-bottom:4px;}
.mock-worksheet .ws-meta{font-size:12px;font-style:italic;color:var(--muted);margin-bottom:14px;}
.mock-worksheet .ws-fields{font-size:12.5px;color:var(--muted);padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line);}
.mock-worksheet .ws-questions{margin:0;padding-left:20px;font-size:14px;color:var(--foreground);line-height:2.5;}
.mock-worksheet .ws-questions li{margin-bottom:2px;}
.mock-worksheet .ws-blank{display:inline-block;width:64px;border-bottom:1px solid var(--gm-slate-400);margin-left:6px;vertical-align:-4px;}

@media (max-width:640px){
  .mock-tuition{grid-template-columns:1fr;}
}

/* ============ Sticker book, caseload and class-roll mockups (Guide pages) ============ */
.sticker-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.sticker-chip{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;border:1.5px solid transparent;flex-shrink:0;}
.sticker-chip.locked{background:var(--gm-slate-100);filter:grayscale(1);opacity:.5;}
.sticker-chip.earned{background:var(--brand-soft);border-color:var(--brand);}
.sticker-chip.earned.alt{background:var(--success-soft);border-color:var(--success);}
.sticker-caption{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.5;}

.level-badge-row{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.level-badge{width:52px;height:52px;border-radius:14px;background:var(--brand-soft);color:var(--brand-dark);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;}
.level-badge .n{font-size:17px;line-height:1;}
.level-badge .l{font-size:8px;letter-spacing:.06em;text-transform:uppercase;margin-top:2px;}
.xp-track-mini{height:8px;border-radius:var(--radius-full);background:var(--gm-slate-100);overflow:hidden;}
.xp-fill-mini{height:100%;background:var(--brand);border-radius:var(--radius-full);}
.streak-mini{display:flex;align-items:center;gap:10px;background:#FBF0DC;border-radius:var(--radius-md);padding:12px 14px;margin-top:16px;}
.streak-mini .num{font-size:18px;font-weight:800;color:#B4740E;}
.streak-mini .s{font-size:11.5px;color:var(--muted);}

.priority-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #F0F3F8;}
.priority-row:last-child{border-bottom:none;padding-bottom:0;}
.priority-row:first-child{padding-top:0;}
.priority-row .who{font-weight:700;font-size:13.5px;}
.priority-row .who .yr{font-weight:600;color:var(--muted);}
.priority-row .detail{font-size:12px;color:var(--muted);margin-top:2px;}
.priority-row .tag{font-size:11px;font-weight:800;padding:4px 10px;border-radius:var(--radius-full);background:var(--alert-soft);color:var(--alert);white-space:nowrap;flex-shrink:0;}

.class-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #F0F3F8;font-size:13.5px;}
.class-row:last-child{border-bottom:none;padding-bottom:0;}
.class-row:first-child{padding-top:0;}
.class-row .name{font-weight:700;}
.class-row .meta{font-size:11.5px;color:var(--muted);margin-top:2px;}
.class-row .pct{font-weight:800;flex-shrink:0;}
.roll-methods-mini{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}

.footer-cta-strip a{
  flex-shrink:0;background:var(--gm-green);color:#fff;border-radius:.65rem;
  padding:.55rem 1rem;font-size:.8125rem;font-weight:800;transition:background .15s ease;
}
.footer-cta-strip a:hover{background:var(--gm-green-dark);}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;margin-top:24px;border-top:1px solid var(--gm-slate-100);
  flex-wrap:wrap;gap:12px;font-size:13px;color:var(--gm-slate-500);
}
.footer-badges{display:flex;gap:18px;flex-wrap:wrap;}
.footer-badges span{display:flex;align-items:center;gap:6px;}
.footer-badges svg{width:13px;height:13px;color:var(--success);}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr;row-gap:30px;}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr;}}

/* ============ Generic page-header band (interior pages) ============ */
.page-hero{padding:64px 0 52px;}
.page-hero .lede{font-size:17px;line-height:1.7;color:var(--muted);max-width:600px;margin-top:16px;}
.page-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;}

/* ============ Reveal on scroll ============ */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease;}
  .reveal.is-visible{opacity:1;transform:translateY(0);}
}

/* ============ Focus visibility ============
   Buttons/links are custom-styled, so the UA default outline is easy to lose
   against the brand fills. One consistent ring everywhere instead. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:var(--radius-md);
}
.cta-band a:focus-visible,
footer.site-footer a:focus-visible,
.roadmap-card a:focus-visible{outline-color:#fff;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* ============ Responsive base ============ */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:40px;}
}
@media (max-width:600px){
  .container-page{padding-left:20px;padding-right:20px;}
  section{padding:60px 0;}
  .hero{padding:36px 0 40px;}
  .hero-ctas .btn-primary, .hero-ctas .btn-secondary{width:100%;}
}

/* ============ Legal page long-form content ============ */
.legal-updated{font-size:0.8125rem;color:var(--muted);margin-top:10px;}
.legal-content{max-width:52rem;margin:0 auto;}
.legal-content h2{font-size:1.375rem;font-weight:800;color:var(--foreground);margin-top:2.5rem;}
.legal-content h2:first-child{margin-top:0;}
.legal-content h3{font-size:1.0625rem;font-weight:700;color:var(--foreground);margin-top:1.75rem;}
.legal-content p{font-size:0.9375rem;line-height:1.8;color:var(--muted);margin-top:0.9rem;}
.legal-content ul{margin-top:0.9rem;display:flex;flex-direction:column;gap:0.6rem;}
.legal-content ul li{font-size:0.9375rem;line-height:1.7;color:var(--muted);padding-left:1.4rem;position:relative;}
.legal-content ul li::before{content:"";position:absolute;left:0;top:0.6em;width:6px;height:6px;border-radius:50%;background:var(--brand);opacity:0.55;}
.legal-content a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.legal-content strong{color:var(--foreground);}
.legal-note{border-radius:var(--radius-md);border:1px solid rgba(198,138,30,.25);background:var(--warning-soft);padding:1rem 1.25rem;margin-top:1.5rem;}
.legal-note p{color:#8A611A;margin-top:0;font-size:0.875rem;line-height:1.7;}

/* ============ Premium homepage (index.html only — everything scoped under
   .premium-home so it can never affect any other page that shares this
   stylesheet). Reuses the site's real tokens (--brand/--foreground/--muted/
   --line etc.) throughout, including the existing --font-display (Source
   Serif 4) already used site-wide — no new typeface needed here. ============ */
.premium-home *{box-sizing:border-box;}
.premium-home .p-container{width:min(1180px,calc(100% - 40px));margin-inline:auto;}
.premium-home .p-section{padding:96px 0;}
.premium-home .p-label{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--brand);}
.premium-home .p-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);}
.premium-home .p-title{max-width:720px;margin-top:14px;font-family:var(--font-display);font-size:clamp(32px,4.4vw,52px);line-height:1.08;letter-spacing:-.02em;color:var(--foreground);}
.premium-home .p-subtitle{max-width:620px;margin-top:16px;font-size:16.5px;color:var(--muted);line-height:1.75;}
.premium-home .p-center{text-align:center;margin-inline:auto;}

.premium-home .p-hero{position:relative;padding:56px 0 90px;overflow:hidden;background:radial-gradient(circle at 78% 25%,rgba(var(--brand-rgb),.10),transparent 32%),radial-gradient(circle at 12% 65%,rgba(255,255,255,.9),transparent 30%),var(--background);}
.premium-home .p-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:56px;}
.premium-home .p-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand-dark);font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;}
.premium-home .p-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:p-pulse 2s infinite;}
@keyframes p-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(.7);}}
.premium-home .p-hero h1{margin-top:20px;max-width:640px;font-family:var(--font-display);font-size:clamp(38px,5vw,60px);line-height:1.05;letter-spacing:-.02em;color:var(--foreground);}
.premium-home .p-hero h1 .accent{color:var(--brand);}
.premium-home .p-hero-desc{max-width:520px;margin-top:20px;font-size:16.5px;color:var(--muted);line-height:1.75;}
.premium-home .p-hero-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
.premium-home .p-hero-trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;color:var(--muted);font-size:11.5px;font-weight:700;}
.premium-home .p-trust-item{display:flex;align-items:center;gap:6px;}
.premium-home .p-trust-check{width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);flex-shrink:0;}
.premium-home .p-trust-check svg{width:8px;height:8px;}

.premium-home .p-hero-product{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center;}
.premium-home .p-glow{position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(var(--brand-rgb),.14);filter:blur(70px);}
.premium-home .p-dashboard{position:relative;z-index:2;width:min(440px,100%);border:1px solid rgba(255,255,255,.8);border-radius:22px;background:rgba(255,255,255,.97);box-shadow:0 30px 90px -20px rgba(36,52,71,.28);overflow:hidden;transform:perspective(1200px) rotateY(-4deg) rotateX(2deg);}
.premium-home .p-dash-top{padding:15px 19px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);}
.premium-home .p-dash-brand{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;}
.premium-home .p-dash-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);}
.premium-home .p-dash-user{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);font-size:10px;font-weight:800;}
.premium-home .p-dash-body{padding:21px;}
.premium-home .p-dash-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px;}
.premium-home .p-dash-heading h3{font-family:var(--font-display);font-size:17px;letter-spacing:-.01em;color:var(--foreground);}
.premium-home .p-dash-heading span{font-size:10px;font-weight:700;color:var(--muted);}
.premium-home .p-mastery{padding:17px;border-radius:15px;background:var(--foreground);color:#fff;}
.premium-home .p-mastery-top{display:flex;justify-content:space-between;align-items:center;}
.premium-home .p-mastery-label{font-size:10px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.1em;font-weight:800;}
.premium-home .p-mastery-number{font-family:var(--font-display);font-size:29px;font-weight:800;}
.premium-home .p-progress-line{height:6px;margin-top:11px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden;}
.premium-home .p-progress-line span{display:block;height:100%;border-radius:inherit;background:var(--brand);}
.premium-home .p-skill-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px;}
.premium-home .p-skill-card{padding:12px;border:1px solid var(--line);border-radius:13px;background:#fff;}
.premium-home .p-skill-name{font-size:11px;font-weight:700;color:var(--foreground);}
.premium-home .p-skill-score{margin-top:5px;font-size:17px;font-weight:800;color:var(--foreground);}
.premium-home .p-skill-score.good{color:var(--brand);}
.premium-home .p-skill-score.warn{color:var(--warning);}
.premium-home .p-next{margin-top:13px;padding:15px;border-radius:15px;background:var(--brand-soft);}
.premium-home .p-next-label{font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-dark);}
.premium-home .p-next-title{margin-top:5px;font-family:var(--font-display);font-size:13.5px;font-weight:800;color:var(--foreground);}
.premium-home .p-next-text{margin-top:5px;color:var(--muted);font-size:11px;}
.premium-home .p-next-btn{margin-top:11px;display:inline-flex;padding:7px 11px;border-radius:8px;background:var(--brand);color:#fff;font-size:10px;font-weight:800;}
.premium-home .p-float{position:absolute;z-index:4;padding:12px 14px;border:1px solid rgba(255,255,255,.9);border-radius:13px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 16px 40px -18px rgba(36,52,71,.3);}
.premium-home .p-float.one{left:6px;top:-16px;}
.premium-home .p-float.two{right:-14px;bottom:52px;}
.premium-home .p-float-label{color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;}
.premium-home .p-float-value{margin-top:3px;color:var(--brand);font-size:15px;font-weight:800;}


.premium-home .p-stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;}
.premium-home .p-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.premium-home .p-stat{padding:22px;text-align:center;border-right:1px solid var(--line);}
.premium-home .p-stat:last-child{border-right:0;}
.premium-home .p-stat strong{display:block;font-family:var(--font-display);font-size:20px;letter-spacing:-.01em;color:var(--foreground);}
.premium-home .p-stat span{color:var(--muted);font-size:11px;font-weight:600;}

.premium-home .p-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px;}
.premium-home .p-step{padding:24px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;box-shadow:0 10px 26px -18px rgba(36,52,71,.18);}
.premium-home .p-step-n{color:var(--brand);font-size:11px;font-weight:900;letter-spacing:.1em;}
.premium-home .p-step h3{margin-top:18px;font-family:var(--font-display);font-size:17px;letter-spacing:-.01em;color:var(--foreground);}
.premium-home .p-step p{margin-top:8px;color:var(--muted);font-size:13px;}

.premium-home .p-engine{background:var(--foreground);color:#fff;overflow:hidden;}
.premium-home .p-engine-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center;}
.premium-home .p-engine .p-label{color:#9FB6F0;}
.premium-home .p-engine .p-label::before{background:#9FB6F0;}
.premium-home .p-engine h2{max-width:520px;margin-top:14px;font-family:var(--font-display);font-size:clamp(30px,4vw,44px);line-height:1.08;letter-spacing:-.02em;}
.premium-home .p-engine p{max-width:500px;margin-top:16px;color:#B9C4D6;font-size:15.5px;line-height:1.75;}
.premium-home .p-engine-points{display:grid;gap:10px;margin-top:22px;}
.premium-home .p-engine-point{display:flex;gap:10px;color:#D5DCE7;font-size:13px;align-items:flex-start;}
.premium-home .p-engine-point i{width:19px;height:19px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.1);color:#9FB6F0;margin-top:1px;}
.premium-home .p-demo{padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(255,255,255,.05);box-shadow:0 30px 80px rgba(0,0,0,.25);}
.premium-home .p-demo-window{border-radius:16px;background:#fff;color:var(--foreground);overflow:hidden;}
.premium-home .p-demo-head{padding:13px 17px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:11px;font-weight:800;}
.premium-home .p-demo-head span{color:var(--muted);font-weight:600;}
.premium-home .p-demo-body{padding:21px;}
.premium-home .p-q-tag{color:var(--brand);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;}
.premium-home .p-question{margin-top:9px;font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.4;color:var(--foreground);}
.premium-home .p-answer-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px;}
.premium-home .p-answer{padding:12px;border:1px solid var(--line);border-radius:11px;font-size:13.5px;font-weight:800;text-align:center;}
.premium-home .p-answer.wrong{border-color:#f0c4b8;background:#fdf5f2;color:var(--alert);text-decoration:line-through;}
.premium-home .p-answer.right{border-color:#b7e3cb;background:#f1faf5;color:var(--success);}
.premium-home .p-diagnosis{margin-top:15px;padding:14px;border-radius:13px;background:var(--warning-soft);}
.premium-home .p-diagnosis strong{display:block;color:#8A611A;font-size:10px;text-transform:uppercase;letter-spacing:.08em;}
.premium-home .p-diagnosis p{margin-top:5px;font-size:12px;color:var(--muted);}
.premium-home .p-repair{margin-top:10px;padding:14px;border-radius:13px;background:var(--brand-soft);}
.premium-home .p-repair strong{display:block;color:var(--brand-dark);font-size:10px;text-transform:uppercase;letter-spacing:.08em;}
.premium-home .p-repair p{margin-top:5px;font-size:12px;color:var(--muted);}

.premium-home .p-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px;}
.premium-home .p-feature-card{padding:26px;border:1px solid var(--line);border-radius:18px;background:#fff;transition:.25s ease;}
.premium-home .p-feature-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(36,52,71,.24);}
.premium-home .p-feature-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:var(--brand-soft);color:var(--brand-dark);}
.premium-home .p-feature-card h3{margin-top:18px;font-family:var(--font-display);font-size:17.5px;letter-spacing:-.01em;color:var(--foreground);}
.premium-home .p-feature-card p{margin-top:8px;color:var(--muted);font-size:13px;}

.premium-home .p-progress-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center;}
.premium-home .p-progress-demo{padding:18px;border-radius:22px;background:var(--background);border:1px solid var(--line);}
.premium-home .p-chart{display:flex;align-items:flex-end;gap:11px;height:150px;padding:20px;border-radius:14px;background:#fff;}
.premium-home .p-bar{flex:1;height:100%;border-radius:6px 6px 3px 3px;background:var(--brand-soft);position:relative;}
.premium-home .p-bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--h);border-radius:inherit;background:var(--brand);}
.premium-home .p-progress-list{margin-top:11px;display:grid;gap:8px;}
.premium-home .p-progress-row{padding:12px 14px;display:flex;justify-content:space-between;border-radius:11px;background:#fff;border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--foreground);}
.premium-home .p-progress-row span:last-child{color:var(--brand);}

.premium-home .p-audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px;}
.premium-home .p-roadmap-grid{grid-template-columns:repeat(2,1fr);}
.premium-home .p-audience-card{position:relative;padding:28px;min-height:220px;border-radius:20px;background:var(--foreground);color:#fff;overflow:hidden;display:flex;flex-direction:column;}
.premium-home .p-audience-card::after{content:"";position:absolute;width:150px;height:150px;right:-55px;bottom:-65px;border-radius:50%;background:rgba(var(--brand-rgb),.32);}
.premium-home .p-audience-card h3{font-family:var(--font-display);font-size:20px;letter-spacing:-.01em;}
.premium-home .p-audience-card p{max-width:280px;margin-top:11px;color:#B9C4D6;font-size:13px;}
.premium-home .p-audience-link{margin-top:auto;position:relative;color:#fff;font-size:12px;font-weight:800;}
.premium-home .p-stage{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#9FB6F0;margin-bottom:6px;display:block;}

.premium-home .p-pricing-wrap{margin-top:46px;}
.premium-home .p-faq{max-width:760px;margin:40px auto 0;}

.premium-home .p-final{padding:88px 0;background:radial-gradient(circle at 50% 0%,rgba(var(--brand-rgb),.22),transparent 42%),var(--foreground);color:#fff;text-align:center;}
.premium-home .p-final h2{max-width:720px;margin:0 auto;font-family:var(--font-display);font-size:clamp(30px,4.4vw,46px);line-height:1.08;letter-spacing:-.02em;}
.premium-home .p-final p{max-width:520px;margin:16px auto 0;color:#B9C4D6;font-size:15.5px;}
.premium-home .p-final-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:26px;}
.premium-home .p-final .btn-secondary{background:transparent;border-color:rgba(255,255,255,.22);color:#fff;}

@media (max-width:960px){
  .premium-home .p-hero-grid,.premium-home .p-engine-layout,.premium-home .p-progress-layout{grid-template-columns:1fr;gap:40px;}
  .premium-home .p-steps,.premium-home .p-feature-grid,.premium-home .p-audience-grid,.premium-home .p-roadmap-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .premium-home .p-section{padding:64px 0;}
  .premium-home .p-stats-grid{grid-template-columns:1fr 1fr;}
  .premium-home .p-steps,.premium-home .p-feature-grid,.premium-home .p-audience-grid,.premium-home .p-roadmap-grid{grid-template-columns:1fr;}
  .premium-home .p-answer-row{grid-template-columns:1fr;}
  .premium-home .p-float{display:none;}
}