/* =========================================================================
   PrepMaestro — marketing site design system
   Brand brief: Master Navy / Paper Canvas / Maestro Gold (PrepMaestro accent)
                Deep Emerald (IELTS Maestro sub-brand accent)
   ========================================================================= */

:root {
  /* Brand — PrepMaestro parent (default: mustard gold accent) */
  --primary: #C59500;      /* Mustard Gold — PrepMaestro conversion + brand highlights */
  --primary-dark: #A07C00; /* Darker mustard for hover */
  --secondary: #D4A017;    /* Lighter mustard for underlines/glows */
  --ink: #10415D;          /* Brand Blue — primary text & dark surfaces */
  --ink-soft: #1C557A;     /* Softer blue variant */
  --muted: #526B7E;        /* secondary text */
  --faint: #7D93A3;        /* captions / meta */

  /* Sub-brand — IELTS Maestro (crimson) */
  --crimson: #E31837;      /* IELTS Crimson */
  --crimson-light: #F02842;
  --crimson-wash: #FDE8EC;

  /* Legacy aliases — resolve to the current brand's primary so sub-brand
     accent elements automatically swap: mustard on PrepMaestro pages,
     crimson on IELTS Maestro pages (where --primary is overridden). */
  --emerald: var(--primary);
  --emerald-light: var(--primary-dark);
  --emerald-wash: var(--sky);

  /* Surfaces */
  --paper: #F8FAFC;        /* Paper Canvas */
  --paper-raised: #FFFFFF;
  --mist: #F1F5F9;         /* soft section background */
  --sky: #FEF3C7;          /* mustard wash chips / panels */
  --line: #E2E8F0;         /* hairline borders */

  /* IELTS skill accents (preserved from the app) */
  --listening: #0EA5E9;
  --reading: #7C3AED;
  --speaking: #E31837;     /* was emerald → now crimson to match IELTS brand */
  --writing: #C59500;      /* was burnt gold → now mustard to match PrepMaestro brand */

  /* Effects */
  --grad: linear-gradient(135deg, #D4A017 0%, #C59500 100%);
  --grad-soft: linear-gradient(135deg, #FEF3C7 0%, #F8FAFC 100%);
  --shadow-sm: 0 1px 2px rgba(16, 65, 93, .05);
  --shadow-md: 0 14px 40px rgba(16, 65, 93, .10);
  --shadow-lg: 0 40px 90px rgba(16, 65, 93, .18);
  --ring: 0 0 0 4px rgba(197, 149, 0, .25);

  /* Geometry */
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  --shell: 1160px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  /* height of the floating header once it detaches (62px bar + its top gap),
     with a little clearance so pinned content never sits under it */
  --header-h: 82px;

  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* IELTS Maestro sub-brand page — primary swaps to crimson (sub-brand accent) */
body[data-brand="ielts"] {
  --primary: #E31837;
  --primary-dark: #B41128;
  --secondary: #F02842;
  --sky: #FDE8EC;
  --grad: linear-gradient(135deg, #F02842 0%, #E31837 100%);
  --grad-soft: linear-gradient(135deg, #FDE8EC 0%, #F8FAFC 100%);
  --ring: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
  /* Re-declare the legacy aliases so they resolve against this scope's --primary */
  --emerald: #E31837;
  --emerald-light: #B41128;
  --emerald-wash: #FDE8EC;
  /* Keep --writing (used by module cards + feature decor) crimson too */
  --writing: #E31837;
  --speaking: #E31837;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--primary); text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0;
  font-weight: 800;
}

p { margin: 0; }

::selection { background: rgba(16, 65, 93, .22); }

/* ---------- Layout helpers ---------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--mist { background: var(--paper); }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 0;
  background: transparent;
  border: 0;
}

.section-head { max-width: 46rem; }
.section-head--center { margin-inline: auto; text-align: center; }

.section-head h2 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  margin-top: 1.1rem;
}

.section-head p {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 1.075rem;
}

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

/* ---------- Buttons ----------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .98rem;
  padding: .85rem 1.4rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}

.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn--primary {
  background: var(--primary);
  color: #fff;
}
.btn--primary:hover { background: var(--primary-dark); }

.btn--ghost {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }

.btn--light {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}
.btn--light:hover { background: rgba(255,255,255,.22); }

/* Showcase secondary — emerald fill on the light sub-brand showcase */
.showcase .btn--light {
  background: var(--emerald);
  color: #fff;
  border-color: transparent;
}
.showcase .btn--light:hover { background: var(--emerald-light); border-color: transparent; }

/* Brand lockup in the Featured Release block: icon + name + tagline, stacked under icon */
.showcase-lockup {
  display: flex;
  align-items: center;
  gap: .95rem;
  margin-bottom: 1rem;
}
.showcase-lockup .app-icon { margin: 0; }
.showcase-lockup-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.showcase-lockup-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--ink);
  letter-spacing: -.015em;
}
.showcase-lockup-tag {
  margin-top: .2rem;
  color: var(--muted);
  font-size: .95rem;
}

/* Google Play icon chip — white tile that holds the 4-colour icon on gold CTAs */
.btn .bp-chip {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 8px;
  flex: none;
  box-shadow: 0 1px 2px rgba(16, 65, 93,.08);
}
.btn .bp-chip svg,
.btn .bp-chip img {
  width: 16px;
  height: 18px;
  display: block;
  object-fit: contain;
}
.btn--lg .bp-chip { width: 30px; height: 30px; }
.btn--lg .bp-chip svg,
.btn--lg .bp-chip img { width: 20px; height: 22px; }

/* Solid button for use on dark surfaces */
.btn--solid {
  background: #fff;
  color: var(--ink);
}
.btn--solid:hover { background: #e7f1f9; }

.btn--sm { padding: .6rem 1.05rem; font-size: .9rem; }

/* Google Play badge button */
.btn-play {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1.35rem .7rem 1.15rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  transition: background .18s ease;
}
.btn-play:hover { background: #12314a; }
.btn-play svg,
.btn-play img,
.btn-play .bp-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  max-width: 24px;
  flex: none;
  object-fit: contain;
}
.btn-play .bp-lines { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.btn-play .bp-small { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.btn-play .bp-big { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }

/* Light badge — for use on dark surfaces */
.btn-play--light { background: #fff; color: var(--ink); }
.btn-play--light:hover { background: #e7f1f9; }

/* ---------- Header / nav ------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  transition: padding .28s ease;
}
/* On scroll: the bar detaches from every edge into a floating pill */
.site-header.is-stuck {
  padding-top: .55rem;
  padding-inline: clamp(.75rem, 3vw, 1.5rem);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 74px;
  border: 1px solid transparent;
  border-radius: 18px;
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease, height .28s ease;
}
.site-header.is-stuck .nav {
  height: 62px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(160%) blur(14px);
  border-color: #e2e4e8;
  box-shadow: none;
}

.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand img { height: 30px; width: auto; }
.brand-lockup { height: 54px !important; width: auto; display: block; }
.footer-brand .brand-lockup { height: 78px !important; }
.footer-brand .brand { margin-bottom: .25rem; }
.footer-brand p { margin-top: .6rem !important; }
.brand-fallback {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.18rem;
  color: var(--ink);
  letter-spacing: -.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-weight: 600;
  font-size: .95rem;
  color: var(--muted);
  transition: color .18s ease;
}
.nav-links a:hover { color: var(--ink); }

.nav-cta { display: flex; align-items: center; gap: .75rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--r-sm);
  cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span { position: relative; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

/* ---------- Hero -------------------------------------------------------- */

.hero { position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 70%;
  background:
    radial-gradient(50% 55% at 50% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 70%),
    radial-gradient(40% 40% at 85% 20%, rgba(240, 40, 66, 0.06), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero .shell { position: relative; z-index: 1; }

/* Studio hero — centered, typographic, minimal chrome */
.hero-center {
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem);
}
.hero-center .eyebrow { margin-bottom: 1.6rem; }

.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.8rem);
}
.hero .lead {
  margin: 1.5rem auto 0;
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  color: var(--muted);
  max-width: 38rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin-top: 2.2rem;
}

/* Hero: the wordmark types itself in, with a blinking cursor.
   Base state is the FINISHED wordmark and the animation only subtracts, so if
   the animation never runs (reduced motion, stalled tab, old engine) the logo
   still shows in full rather than collapsing to nothing. */
.hero-type {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: "Space Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
  line-height: 1;
  white-space: nowrap;
  margin-bottom: 1.7rem;
}
.hero-type-icon { width: 1.55em; height: 1.55em; flex: none; }
.hero-type-text {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  width: 13ch;
  animation: heroType 8s steps(13, end) infinite;
}
.hero-type-text .b { color: var(--ink); }
.hero-type-text .u { color: var(--primary); }
.hero-type-text .l { color: #7C8B99; }
.hero-type-cursor {
  display: inline-block;
  width: .58em;
  height: 1.15em;
  background: var(--secondary);
  animation: heroBlink 1s step-end infinite;
}
@keyframes heroType {
  0%   { width: 0; }
  45%  { width: 13ch; }
  80%  { width: 13ch; }
  100% { width: 0; }
}
@keyframes heroBlink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-type-text { animation: none; width: 13ch; }
  .hero-type-cursor { animation: none; }
}

/* "Now building" pill linking to the project */
.now-building {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 2.6rem;
  padding: .5rem .55rem .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
}
.now-building .nb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--speaking);
  box-shadow: 0 0 0 4px rgba(18, 137, 122, .18);
}
.now-building .nb-link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-display); font-weight: 700;
  color: var(--primary);
  padding: .3rem .8rem;
  border-radius: var(--r-pill);
  background: var(--sky);
}

/* ---------- Band-score scale (signature) -------------------------------- */

.band {
  --pos: 75%; /* marker position: 5.0->0%  9.0->100% ; 8.0 = 75% */
  width: 100%;
  max-width: 30rem;
}
.band-track {
  position: relative;
  height: 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #cfe6f6, var(--secondary), var(--primary));
}
.band-marker {
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--secondary);
  box-shadow: 0 4px 12px rgba(16, 65, 93, .5), 0 0 0 6px rgba(16, 65, 93,.14);
}
.band-flag {
  position: absolute;
  left: var(--pos);
  top: -2.4rem;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .82rem;
  color: #fff;
  background: var(--grad);
  padding: .25rem .6rem;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.band-scale-labels {
  display: flex;
  justify-content: space-between;
  margin-top: .7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .74rem;
  color: var(--faint);
  letter-spacing: .04em;
}
.band-caption {
  margin-top: .65rem;
  font-size: .8rem;
  color: var(--muted);
}

/* ---------- Phone mockup ------------------------------------------------ */

.phone {
  --bezel: 10px;
  --frame-radius: 42px;
  position: relative;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  /* No aspect-ratio here: with border-box + padding it would make the inner
     screen a different ratio than the screenshot and crop the edges. The
     screen carries the ratio instead, and the frame sizes around it. */
  background: #0b2437;
  border-radius: var(--frame-radius);
  padding: var(--bezel);
  box-shadow: var(--shadow-lg);
}
.phone::after {
  /* side button hint */
  content: "";
  position: absolute;
  right: -2px; top: 26%;
  width: 3px; height: 54px;
  border-radius: 3px;
  background: rgba(11, 36, 55, .6);
}
.phone-screen {
  width: 100%;
  /* Exactly the screenshots' ratio, so nothing is cropped */
  aspect-ratio: 1080 / 2460;
  /* Concentric with the frame — inner radius must equal outer minus the bezel,
     otherwise the frame looks thicker/thinner at the corners than on the sides */
  border-radius: calc(var(--frame-radius) - var(--bezel));
  overflow: hidden;
  background: #eaf4fb;
}
/* contain (not cover) guarantees the whole screenshot stays visible even if a
   future capture has a slightly different ratio */
.phone-screen img { width: 100%; height: 100%; object-fit: contain; display: block; }

.phone-stage {
  position: relative;
  display: flex;
  justify-content: center;
}
.phone-stage::before {
  content: "";
  position: absolute;
  inset: -8% -14% -4% -10%;
  background:
    radial-gradient(circle at 55% 48%, rgba(240, 40, 66, .28), rgba(240, 40, 66, 0) 60%),
    radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--primary) 0%, transparent) 65%);
  filter: blur(40px);
  z-index: 0;
}
.phone-stage .phone {
  position: relative;
  z-index: 1;
  transform: rotate(-7deg);
}

/* floating badges around hero phone */
.float-badge {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .7rem .9rem;
  box-shadow: var(--shadow-md);
  font-size: .85rem;
  font-weight: 600;
}
.float-badge .fb-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  color: #fff;
  flex: none;
}
.float-badge small { display: block; font-weight: 500; color: var(--faint); font-size: .72rem; }
.float-badge--tl { top: 12%; left: -6%; }
.float-badge--br { bottom: 16%; right: -8%; }

/* ---------- Featured product (landing) --------------------------------- */

.product {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.product-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: var(--shadow-md);
}
.product-logo {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.02em;
}
.product-logo .dot {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--grad);
  display: grid; place-items: center;
  color: #fff; font-size: 1rem;
}
.product h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-top: 1.1rem; }
.product p.lead { margin-top: 1rem; color: var(--muted); font-size: 1.05rem; }

.highlight-list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}
.highlight-list li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-weight: 500;
}
.highlight-list .tick {
  flex: none;
  width: 22px; height: 22px;
  margin-top: .1rem;
  border-radius: 50%;
  background: var(--sky);
  color: var(--primary);
  display: grid; place-items: center;
  font-size: .7rem;
}
.product-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }

/* ---------- Stats strip ------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat {
  background: var(--paper);
  padding: 1.8rem 1.4rem;
  text-align: center;
}
.stat .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--primary);
  letter-spacing: -.03em;
}
.stat .label { margin-top: .35rem; color: var(--muted); font-size: .92rem; }

/* ---------- Feature rows ------------------------------------------------ */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
}
.feature + .feature { margin-top: clamp(2rem, 4.5vw, 3.75rem); }
.feature--flip .feature-copy { order: 2; }
.feature--flip .feature-media { order: 1; }

.feature-copy h3 {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  margin-top: 1rem;
}
.feature-copy p { margin-top: 1rem; color: var(--muted); font-size: 1.05rem; }

.feature-points {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.feature-points li { display: flex; align-items: flex-start; gap: .55rem; font-weight: 500; }
.feature-points .tick {
  flex: none;
  width: 18px; height: 18px;
  margin-top: .15rem;
  color: var(--emerald);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  background: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.skill-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .38rem .8rem;
  border-radius: var(--r-pill);
}
.skill-tag .swatch { width: 9px; height: 9px; border-radius: 50%; }

/* ---------- Skills grid (four modules) --------------------------------- */

.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.15rem;
  margin-top: 3rem;
}
.skill-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.skill-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.skill-card .icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  color: #fff;
  margin-bottom: 1.1rem;
}
.skill-card h4 { font-size: 1.2rem; }
.skill-card p { margin-top: .5rem; color: var(--muted); font-size: .93rem; }
.skill-card .meta { margin-top: 1rem; font-family: var(--font-display); font-weight: 700; font-size: .8rem; color: var(--faint); }

/* ---------- Steps ------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2rem 1.6rem 1.6rem;
  box-shadow: var(--shadow-sm);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -18px; left: 1.6rem;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  display: grid; place-items: center;
}
.step h4 { margin-top: 1rem; font-size: 1.2rem; }
.step p { margin-top: .6rem; color: var(--muted); font-size: .95rem; }

/* ---------- Credits / trial panel -------------------------------------- */

.trial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  background:
    radial-gradient(80% 90% at 85% 10%, rgba(240, 40, 66, .22), transparent 60%),
    radial-gradient(60% 70% at 20% 100%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 60%),
    #10415D;
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.6rem);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.trial::before {
  content: "";
  position: absolute;
  right: -8%; top: -20%;
  width: 50%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(240, 40, 66, .18), transparent 60%);
  filter: blur(20px);
}
.trial * { position: relative; }
.trial h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.trial p { margin-top: .55rem; color: rgba(255,255,255,.78); font-size: 1.02rem; line-height: 1.55; }
.trial .hero-actions { margin-top: 1.1rem; }
.trial .app-note--dark { margin-top: .75rem; }
.credit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.credit-tile {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r);
  padding: 1.25rem 1.3rem;
  backdrop-filter: blur(6px);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.credit-tile:hover {
  background: rgba(240, 40, 66, .12);
  border-color: rgba(240, 40, 66, .35);
  transform: translateY(-2px);
}
.credit-tile .big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.1rem;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1;
}
.credit-tile .big .unit {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(240, 40, 66, .9);
  margin-left: .35rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.credit-tile .cap {
  color: rgba(255,255,255,.72);
  font-size: .88rem;
  margin-top: .4rem;
  letter-spacing: -.005em;
}

/* ---------- Gallery ----------------------------------------------------- */

.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: 1.25rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  margin-top: 3rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.gallery .phone { max-width: 220px; scroll-snap-align: center; }
.gallery::-webkit-scrollbar { height: 8px; }
.gallery::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

/* ---------- CTA band ---------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(2.6rem, 6vw, 4.5rem);
  text-align: center;
  color: #fff;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: -40% 20% auto;
  height: 120%;
  background: radial-gradient(circle at 50% 0%, rgba(16, 65, 93, .5), transparent 60%);
}
.cta-band * { position: relative; }
.cta-band h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); }
.cta-band p { margin: 1rem auto 0; color: rgba(255,255,255,.8); max-width: 34rem; font-size: 1.08rem; }
.cta-band .hero-actions { justify-content: center; }

/* ---------- Footer ------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-brand p { margin-top: 1rem; color: var(--muted); max-width: 22rem; font-size: .95rem; }
.footer-col h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer-col a { color: var(--muted); font-weight: 500; font-size: .95rem; }
.footer-col a:hover { color: var(--primary); }
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .8rem;
  color: var(--faint);
  font-size: .88rem;
}

/* ---------- Breadcrumb (detail page) ----------------------------------- */

.breadcrumb-bar { padding-top: 1.4rem; }
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  color: var(--faint);
}
.breadcrumb a { color: var(--muted); font-weight: 500; }
.breadcrumb a:hover { color: var(--primary); }

/* ---------- Featured project — expanding dark showcase ----------------- */

.showcase {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  /* No overflow:hidden here — it would break position:sticky on the child.
     The panel uses clip-path, so it never overflows anyway. */
}

/* Scroll-driven mode: the section pins and the tabs advance as you scroll.
   Enabled by JS only on wide, tall viewports without reduced-motion. */
.showcase.is-pinned {
  padding-block: 0;
  height: calc(100vh + var(--steps, 5) * 52vh);
}
.showcase.is-pinned .showcase-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  /* keeps the panel full-bleed behind the floating header while pushing the
     content clear of it, so the mockup is never clipped from the top */
  padding-top: var(--header-h);
  padding-bottom: clamp(2.5rem, 5vh, 4.5rem);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.showcase.is-pinned .showcase-panel {
  max-height: 100vh;
  padding-block: clamp(2rem, 4vh, 3.5rem);
}
.showcase.is-pinned .showcase-body { margin-top: 0; }

/* height-driven phone so the whole pinned layout fits the viewport */
.showcase.is-pinned .sc-media .phone { width: auto; max-width: none; }
.showcase.is-pinned .sc-media .phone-screen {
  width: auto;
  height: min(70vh, calc(100vh - var(--header-h) - 200px), 720px);
}
.showcase.is-pinned .sc-caption { margin-top: .8rem; }

.showcase-panel {
  --expand: 0;
  --inset: max(0px, calc((100vw - 1120px) / 2 * (1 - var(--expand))));
  width: 100%;
  background:
    radial-gradient(90% 70% at 85% 10%, rgba(212, 160, 23, .14), transparent 60%),
    radial-gradient(65% 55% at 10% 90%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 60%),
    var(--paper-raised);
  color: var(--ink);
  padding-block: clamp(2.8rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
  /* GPU-composited reveal: a centered rounded band that grows to full width */
  clip-path: inset(0 var(--inset) round calc(30px * (1 - var(--expand))));
  will-change: clip-path;
}
.showcase-panel::after {
  /* faint vignette for depth, gold-tinted */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 60% at 50% 120%, rgba(212, 160, 23, .08), transparent 60%);
  pointer-events: none;
}

.showcase-inner {
  position: relative;
  z-index: 1;
  width: min(1040px, 90vw);
  margin-inline: auto;
}

.showcase-head { max-width: 48rem; margin-inline: auto; text-align: center; }
.showcase-head h2 { color: var(--ink); font-size: clamp(1.9rem, 4vw, 2.9rem); margin-top: 1.1rem; }
.showcase-head p { margin: 1rem auto 0; color: var(--muted); font-size: 1.06rem; }

.eyebrow--dark {
  background: transparent;
  border: 0;
  color: var(--emerald);
}

.showcase-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
}

/* Left: static brand lockup, then one feature at a time */
.showcase-left { display: flex; flex-direction: column; }

.showcase-brand .app-icon {
  display: block;
  width: clamp(62px, 7vh, 82px);
  height: clamp(62px, 7vh, 82px);
  border-radius: 22%;
  background: #fff;
  padding: 9px;
  object-fit: contain;
  margin: 0 0 1.1rem;
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(16, 65, 93,.06);
}
.showcase-brand h2 {
  color: var(--ink);
  font-size: clamp(1.55rem, 2.6vw, 2.3rem);
  margin-top: .7rem;
  max-width: 18ch;
}

/* The five steps stack in one place; only the active one is visible */
.sc-list {
  /* every step occupies the same grid cell, so the container is always as tall
     as the longest one — no fixed height to overflow, and no height jump */
  display: grid;
  margin-top: clamp(1.4rem, 3vh, 2.4rem);
}
.sc-item {
  grid-area: 1 / 1;
  align-self: start;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.sc-item.is-active { opacity: 1; transform: none; pointer-events: auto; }

.sc-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .16em;
  color: var(--emerald);
  margin-bottom: .55rem;
}
.sc-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.2;
  color: var(--ink);
}
.sc-desc {
  display: block;
  margin-top: .75rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 34ch;
}

/* Progress rail — shows there are five, and jumps between them */
.sc-dots {
  display: flex;
  gap: .5rem;
  margin-top: clamp(1.1rem, 2.4vh, 1.9rem);
}
.sc-dot {
  width: 30px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--line);
  cursor: pointer;
  transition: background .3s ease, width .3s ease;
}
.sc-dot:hover { background: color-mix(in srgb, var(--emerald) 35%, var(--line)); }
.sc-dot:focus-visible { outline: none; box-shadow: var(--ring); }
.sc-dot.is-active { background: var(--emerald); width: 50px; }

/* Right: changing screenshot */
.sc-media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sc-media::before {
  content: "";
  position: absolute;
  inset: 6% 14% 2%;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 68%);
  filter: blur(26px);
  z-index: 0;
}
.sc-media .phone {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Full 1080x2460 screenshot, uncropped — so width is what keeps the
     frame from getting too tall (height = width x 2.278). */
  max-width: 275px;
}
.sc-media .phone-screen img { transition: opacity .3s ease; }
.sc-media.is-swapping .phone-screen img { opacity: 0; }
.sc-caption {
  position: relative;
  z-index: 1;
  margin-top: 1.3rem;
  text-align: center;
  font-size: .92rem;
  color: var(--muted);
}

.showcase-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.8rem;
}
/* inside the panel it sits under the progress dots, aligned with the brand block */
.showcase-left .showcase-cta {
  justify-content: flex-start;
  margin-top: clamp(1.6rem, 3.4vh, 2.6rem);
}

/* ---------- App detail page -------------------------------------------- */

.app-hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
}

/* IELTS Maestro hero: fill the viewport like the parent homepage hero */
body[data-brand="ielts"] .hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}
body[data-brand="ielts"] .hero > .shell { width: 100%; }

/* Brand lockup — app icon + name + tagline (above the H1) */
.app-lockup {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: .6rem;
}
.app-lockup-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(16, 65, 93,.08);
  flex: none;
}
.app-lockup-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.app-lockup-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--ink);
  letter-spacing: -.015em;
}
.app-lockup-tag {
  margin-top: .15rem;
  color: var(--muted);
  font-size: .95rem;
}

@media (max-width: 980px) {
  .app-lockup { justify-content: center; margin-inline: auto; }
}
.app-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  margin-top: .25rem;
}
.app-hero .lead {
  margin-top: 1.3rem;
  font-size: clamp(1.04rem, 1.5vw, 1.2rem);
  color: var(--muted);
  max-width: 33rem;
}
.app-hero .hero-actions { justify-content: flex-start; margin-top: 2rem; }
.app-hero .phone { max-width: 268px; }

.app-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .9rem;
  margin-top: 1.3rem;
  font-size: .88rem;
  color: var(--faint);
}
.app-note span { display: inline-flex; align-items: center; gap: .4rem; }
/* same note on a dark surface */
.app-note--dark { color: rgba(255, 255, 255, .78); margin-top: 1.3rem; }

/* app identity lockup */
.app-mark {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
}
.app-mark .mark {
  width: 54px; height: 54px;
  flex: none;
  display: grid; place-items: center;
}
.app-mark .mark img { width: 100%; height: 100%; object-fit: contain; }

/* rounded app-icon tile on the detail page lockup */
.app-mark .mark img {
  border-radius: 22%;
  background: var(--sky);
  padding: 6px;
}
.app-mark .mark-text { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; }
.app-mark .mark-text small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .82rem; color: var(--muted); letter-spacing: 0; }

/* credit pill on the skill cards */
.credit-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: var(--sky);
  color: var(--primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
}

/* feature + gallery mockup sizing (full, uncropped screenshots) */
.feature-media .phone { max-width: 258px; }
.gallery .phone { max-width: 196px; }

@media (max-width: 980px) {
  .app-hero { grid-template-columns: 1fr; text-align: center; }
  .app-hero .lead { margin-inline: auto; }
  .app-hero .hero-actions { justify-content: center; }
  .app-note { justify-content: center; }
  .app-mark { justify-content: center; }
  .app-hero-media { order: -1; }
  .app-hero .phone { max-width: 235px; }
  .feature-media .phone { max-width: 235px; }
}

@media (max-width: 760px) {
  .app-hero .phone { max-width: 205px; }
  .feature-media .phone { max-width: 205px; }
}

/* ---------- Scroll reveal ---------------------------------------------- */

/* Only hide content when JS is running to reveal it again — otherwise the
   page would render blank if the script fails to load. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Light-touch variants: direction + a soft pop */
.js .reveal-up    { transform: translateY(36px); }
.js .reveal-left  { transform: translateX(-28px); }
.js .reveal-right { transform: translateX(28px); }
.js .reveal-pop   { transform: translateY(18px) scale(.97); }
.js .reveal-up.is-visible,
.js .reveal-left.is-visible,
.js .reveal-right.is-visible,
.js .reveal-pop.is-visible { transform: none; }

/* Stagger: each direct child animates in sequence.
   JS sets --i on each child; delay = i * 90ms. */
.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
.js .reveal-stagger.is-visible > * { opacity: 1; transform: none; }

/* ---------- Responsive -------------------------------------------------- */

@media (max-width: 980px) {
  .product { grid-template-columns: 1fr; }
  .product-media { order: -1; }

  .showcase-body { grid-template-columns: 1fr; gap: 2.4rem; }
  .sc-media { order: -1; }
  .sc-media .phone { max-width: 235px; }

  .feature { grid-template-columns: 1fr; gap: 2.2rem; }
  .feature--flip .feature-copy,
  .feature--flip .feature-media { order: 0; }
  .feature-media { max-width: 340px; margin-inline: auto; }

  .skills-grid { grid-template-columns: repeat(2, 1fr); }
  .trial { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: inline-flex; }

  .nav-links.is-open {
    display: flex;
    position: absolute;
    top: 74px; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 1.4rem var(--gutter) 1.8rem;
    box-shadow: var(--shadow-md);
  }
  .nav-links.is-open .btn { display: inline-flex; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .float-badge { display: none; }
  .sc-media .phone { max-width: 205px; }
}

@media (max-width: 460px) {
  .skills-grid { grid-template-columns: 1fr; }
  .credit-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .reveal,
  .js .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .btn, .skill-card, .btn-play, .btn--primary { transition: none; }
}

/* ============================================================
   PrepMaestro revamp — new components (FAQ, Ecosystem, Waitlist)
   ============================================================ */

/* --- FAQ accordion ---------------------------------------------------- */
.faq {
  max-width: 780px;
  margin: 3rem auto 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-raised);
  overflow: hidden;
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
  width: 100%;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background .18s ease;
}
.faq-q:hover { background: var(--mist); }
.faq-toggle {
  width: 20px; height: 20px;
  position: relative;
  flex-shrink: 0;
}
.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  inset: 50% 2px auto 2px;
  height: 1.5px;
  background: var(--muted);
  transition: transform .22s ease;
}
.faq-toggle::after { transform: rotate(90deg); }
.faq-item.is-open .faq-toggle::after { transform: rotate(0); }
.faq-a {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.65;
  transition:
    max-height .4s cubic-bezier(.22,.61,.36,1),
    opacity .25s ease,
    padding-top .3s ease,
    padding-bottom .3s ease;
}
.faq-item.is-open .faq-a {
  max-height: 500px;
  opacity: 1;
  padding-top: .35rem;
  padding-bottom: 1.4rem;
}
.faq-q { transition: background .18s ease; }
.faq-q .faq-toggle::before,
.faq-q .faq-toggle::after {
  transition: transform .32s cubic-bezier(.22,.61,.36,1), background .18s ease;
}
.faq-item.is-open .faq-q { background: var(--mist); }
.faq-item.is-open .faq-q .faq-toggle::before,
.faq-item.is-open .faq-q .faq-toggle::after { background: var(--emerald); }

/* --- Ecosystem table (Coming Soon) ----------------------------------- */
.ecosystem-wrap { overflow-x: auto; margin-top: 3rem; }
.ecosystem-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: .95rem;
  min-width: 640px;
}
.ecosystem-table th,
.ecosystem-table td {
  padding: 1.15rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.ecosystem-table th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--faint);
  background: var(--mist);
}
.ecosystem-table tr:last-child td { border-bottom: 0; }
.ecosystem-table td:first-child { font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.ecosystem-table td:nth-child(2) { color: var(--muted); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .7rem;
  border-radius: var(--r-pill);
  font-size: .78rem;
  font-weight: 600;
  background: var(--mist);
  color: var(--muted);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill--beta { color: #A07C00; background: #FEF3C7; border-color: #FDE68A; }
.status-pill--dev  { color: #1D4ED8; background: #DBEAFE; border-color: #BFDBFE; }

/* --- Waitlist --------------------------------------------------------- */
.waitlist {
  margin-top: 2rem;
  padding: 1.75rem;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: grid;
  gap: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.waitlist h3 { font-size: 1.1rem; color: var(--ink); }
.waitlist p  { font-size: .9rem; color: var(--muted); margin-top: .25rem; }
.waitlist-form { display: grid; gap: .6rem; grid-template-columns: 1fr; }
.waitlist-form input {
  height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper-raised);
  font: inherit;
  transition: border-color .16s ease;
}
.waitlist-form input:focus { outline: 0; border-color: var(--ink); }
.waitlist-form button { height: 48px; }
.waitlist-success {
  padding: 1rem 1.25rem;
  border-radius: var(--r);
  background: var(--emerald-wash);
  color: var(--emerald);
  border: 1px solid color-mix(in srgb, var(--primary) 2%, transparent);
  font-size: .95rem;
  font-weight: 600;
}
@media (min-width: 720px) {
  .waitlist { grid-template-columns: 1fr auto; align-items: center; }
  .waitlist-form { grid-template-columns: 1fr auto; min-width: 440px; }
}

/* --- Dark button variant for dark CTA bands --------------------------- */
.btn--dark {
  background: var(--ink);
  color: #fff;
}
.btn--dark:hover { background: var(--ink-soft); }

/* --- Hand-drawn underline accent ------------------------------------- */
.underline-accent {
  position: relative;
  display: inline-block;
  color: var(--primary);
  padding-bottom: .35em;
}
.underline-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .02em;
  height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M3 7 C 60 2, 120 10, 180 5 S 280 9, 297 4' stroke='%23D4A017' stroke-width='2' stroke-linecap='round' fill='none' vector-effect='non-scaling-stroke'/></svg>") no-repeat center / 100% 100%;
}
body[data-brand="ielts"] .underline-accent::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M3 7 C 60 2, 120 10, 180 5 S 280 9, 297 4' stroke='%23E31837' stroke-width='2' stroke-linecap='round' fill='none' vector-effect='non-scaling-stroke'/></svg>") no-repeat center / 100% 100%;
}

/* --- Section wash for brand-brief paper ------------------------------- */
.section--wash { background: var(--mist); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* --- CTA block (dark card) ------------------------------------------- */
.cta-block {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 3.5rem 2rem;
  text-align: center;
  background: var(--ink);
  color: #fff;
}
.cta-block::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background: radial-gradient(50% 60% at 50% 0%, rgba(212, 160, 23,.2), transparent 70%);
  pointer-events: none;
}
body[data-brand="ielts"] .cta-block::before {
  background: radial-gradient(50% 60% at 50% 0%, rgba(240, 40, 66,.2), transparent 70%);
}
.cta-block > * { position: relative; }
.cta-block h2 { color: #fff; max-width: 40rem; margin: 0 auto; }
.cta-block p  { color: rgba(255,255,255,.72); max-width: 36rem; margin: 1.1rem auto 0; }
.cta-block .hero-actions { justify-content: center; margin-top: 1.6rem; }
@media (min-width: 768px) { .cta-block { padding: 5rem 3rem; } }

/* --- Hero CTA cluster (IELTS Maestro) --------------------------------- */
.hero-cta-cluster { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.1rem; }

.btn--lg { padding: 1rem 1.6rem; font-size: 1rem; }

.hero-cta-micro {
  font-size: .82rem;
  color: var(--faint);
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: .95rem;
  margin-top: .4rem;
  padding: .9rem 1.1rem;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  max-width: fit-content;
}
.hero-trust-dots {
  display: inline-flex;
  flex: none;
}
.hero-trust-dots span {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  border: 2px solid var(--paper-raised);
  display: inline-block;
}
.hero-trust-dots span + span { margin-left: -10px; }
.hero-trust-dots span:nth-child(2) { background: linear-gradient(135deg, #34D399, #E31837); }
.hero-trust-dots span:nth-child(3) { background: linear-gradient(135deg, #D4A017, #A07C00); }
.hero-trust-copy { line-height: 1.3; }
.hero-trust-top {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  font-size: .95rem;
  color: var(--ink);
  font-weight: 500;
}
.hero-trust-stars {
  color: var(--secondary);
  letter-spacing: .08em;
  font-size: .85rem;
  margin-right: .15rem;
}
.hero-trust-top strong { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--ink); }
.hero-trust-sep { color: var(--line-strong, var(--faint)); margin: 0 .1rem; }
.hero-trust-count { color: var(--muted); font-size: .9rem; }
.hero-trust-sub { font-size: .78rem; color: var(--faint); margin-top: .15rem; }

@media (max-width: 640px) {
  .hero-trust { align-items: flex-start; padding: .85rem 1rem; }
  .hero-trust-top { flex-wrap: wrap; }
}

/* --- Trust pills (IELTS Maestro) ------------------------------------- */
.trust-pills {
  padding-block: 1.6rem;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-pills ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem .7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1rem .55rem .7rem;
  background: var(--emerald-wash);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  color: var(--ink);
  letter-spacing: -.005em;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.trust-pill:hover {
  background: #BBF7D0;
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  transform: translateY(-1px);
}
.trust-pill-tick {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--emerald);
  color: #fff;
  border-radius: 50%;
  flex: none;
}

/* --- Stats row (reference pattern: number left, label right) --------- */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem 6rem;
}
.stat-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  text-align: left;
}
.stat-row .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 4.4rem);
  line-height: 1;
  color: #000;
  letter-spacing: -.035em;
}
.stat-row .label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--muted);
}

/* --- Modules grid (IELTS Maestro — centered, soft colored blob) ------ */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 3rem;
}
@media (max-width: 980px) { .modules-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .modules-grid { grid-template-columns: 1fr; } }

.module-card {
  background: var(--paper-raised);
  border-radius: var(--r-lg);
  padding: 2rem 1.5rem 1.75rem;
  box-shadow: 0 1px 2px rgba(16, 65, 93,.04), 0 8px 24px -12px rgba(16, 65, 93,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .35rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.module-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(16, 65, 93,.06), 0 18px 40px -16px rgba(16, 65, 93,.14);
}
.module-icon-blob {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  transition: transform .25s ease;
}
.module-card:hover .module-icon-blob { transform: scale(1.05); }
.module-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: -.01em;
}
.module-card p {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
  margin-top: .55rem;
}
.module-meta {
  margin-top: auto;
  padding-top: 1rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem .75rem;
  border-top: 1px solid var(--line);
}
.module-card p { margin-bottom: 1.1rem; }
.module-dur {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  color: var(--faint);
  letter-spacing: -.005em;
}
.module-cost {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  padding: .18rem .6rem;
  border-radius: var(--r-pill);
  letter-spacing: .02em;
}
.module-card--listening .module-cost { background: rgba(14, 165, 233, .12); color: #0369A1; }
.module-card--reading   .module-cost { background: rgba(124, 58, 237, .12); color: #5B21B6; }
.module-card--writing   .module-cost { background: rgba(197, 149, 0, .12);  color: #92400E; }
.module-card--speaking  .module-cost { background: color-mix(in srgb, var(--primary) 12%, transparent);  color: #065F46; }

/* Per-module icon + soft blob colors (restored from original) */
.module-card--listening .module-icon-blob { background: rgba(14, 165, 233, .12); color: #0EA5E9; }
.module-card--reading   .module-icon-blob { background: rgba(124, 58, 237, .12); color: #7C3AED; }
.module-card--writing   .module-icon-blob { background: rgba(197, 149, 0, .12);  color: #C59500; }
.module-card--speaking  .module-icon-blob { background: color-mix(in srgb, var(--primary) 12%, transparent);  color: #E31837; }

/* --- Appshots compact grid (IELTS Maestro "Inside the app") ---------- */
.appshots-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}
.appshot-card { grid-column: span 2; }
.appshot-card:nth-child(4) { grid-column: 2 / span 2; }
.appshot-card:nth-child(5) { grid-column: 4 / span 2; }
@media (max-width: 980px) {
  .appshots-grid { grid-template-columns: repeat(2, 1fr); }
  .appshot-card,
  .appshot-card:nth-child(4),
  .appshot-card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 560px) {
  .appshots-grid { grid-template-columns: 1fr; }
}

.appshot-card {
  background: var(--paper-raised);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.5rem 1.75rem;
  box-shadow: 0 1px 2px rgba(16, 65, 93,.04), 0 10px 28px -14px rgba(16, 65, 93,.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.appshot-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 3px rgba(16, 65, 93,.06), 0 20px 40px -16px color-mix(in srgb, var(--primary) 18%, transparent);
}
.appshot-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--faint);
  align-self: flex-start;
}
.appshot-phone {
  position: relative;
  width: 160px;
  height: 230px;
  margin: .9rem 0 1.1rem;
  border-radius: 22px;
  overflow: hidden;
  background: #10415D;
  padding: 6px;
  box-shadow: 0 10px 30px -14px rgba(16, 65, 93,.35);
}
.appshot-phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  pointer-events: none;
}
.appshot-phone img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 16px;
  display: block;
}
.appshot-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: -.01em;
}
.appshot-card p {
  margin-top: .5rem;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

/* --- Feature media: blobs + tilted phone + handwritten note -------- */
.feature-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  padding: 2rem 1rem;
}



/* Tilt the phone more noticeably, alternating per row */
.feature-media .phone {
  position: relative;
  z-index: 1;
  transform: rotate(-7deg);
}
.feature--flip .feature-media .phone { transform: rotate(7deg); }

@media (max-width: 820px) {
  .feature-media::before,
  .feature-media::after { display: none; }
  .feature-media .phone,
  .feature--flip .feature-media .phone { transform: rotate(0); }
}

/* --- How it works: 3-step flow with dotted connector ---------------- */
.howit-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
  padding-top: 1rem;
}
.howit-connector {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  width: 100%;
  height: 92px;
  pointer-events: none;
  z-index: 0;
}
.howit-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.howit-icon {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--emerald);
  margin-bottom: 1.35rem;
  box-shadow: var(--shadow-sm);
}
.howit-icon svg { width: 40px; height: 40px; }
.howit-step h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: -.01em;
}
.howit-step p {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
  max-width: 22rem;
}

@media (max-width: 820px) {
  .howit-flow { grid-template-columns: 1fr; gap: 2.5rem; }
  .howit-connector { display: none; }
}

/* --- Section with soft emerald decorative shapes -------------------- */
.section--deco {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #F0FAF4 0%, #F5FBF7 100%);
}
.section--deco::before,
.section--deco::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(240, 40, 66, .18), rgba(240, 40, 66, 0) 70%);
  z-index: 0;
}
.section--deco::before {
  width: 420px;
  height: 420px;
  top: -140px;
  right: -140px;
}
.section--deco::after {
  width: 480px;
  height: 480px;
  bottom: -200px;
  left: -180px;
}
.section--deco > .shell { position: relative; z-index: 1; }

/* --- FAQ split layout (sidebar + accordion) ------------------------- */
.faq-split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.faq-aside {
  position: sticky;
  top: 110px;
}
.faq-aside h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.1;
}
.faq-aside-hint {
  margin-top: 1.6rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}
.faq-aside-link {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  margin-top: .4rem;
  color: var(--muted);
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong, var(--line));
  padding-bottom: 2px;
  transition: color .16s ease, border-color .16s ease;
}
.faq-aside-link span { transition: transform .18s ease; display: inline-block; }
.faq-aside-link:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.faq-aside-link:hover span { transform: translateX(3px); }

.faq-split .faq { margin-top: 0; }

@media (max-width: 820px) {
  .faq-split { grid-template-columns: 1fr; gap: 2rem; }
  .faq-aside { position: static; }
}

/* --- Coming Soon apps grid (replaces table) ------------------------- */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
@media (max-width: 980px) { .apps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .apps-grid { grid-template-columns: 1fr; } }

.app-card {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.app-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 3px rgba(16, 65, 93,.06), 0 16px 32px -16px rgba(16, 65, 93,.14);
  border-color: color-mix(in srgb, var(--app-accent) 35%, var(--line));
}

/* Sub-brand accents per the brand brief */
.app-card--sat   { --app-accent: #2563EB; }
.app-card--toefl { --app-accent: #0EA5E9; }
.app-card--gre   { --app-accent: #7C3AED; }
.app-card--pte   { --app-accent: #DB2777; }

.app-monogram {
  position: relative;
  display: grid;
  place-items: center;
  padding: 2.1rem 1rem 2.3rem;
  background:
    radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--app-accent) 18%, transparent), transparent 70%),
    color-mix(in srgb, var(--app-accent) 7%, var(--paper-raised));
  border-bottom: 1px solid color-mix(in srgb, var(--app-accent) 20%, var(--line));
}
.app-monogram span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.4rem);
  letter-spacing: .04em;
  color: var(--app-accent);
  line-height: 1;
}

.app-body {
  padding: 1.35rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
}
.app-body h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--ink);
  letter-spacing: -.02em;
}
.app-body > p {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}
.app-body .app-status {
  margin-top: auto;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}

.app-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--app-accent);
  align-self: flex-start;
}
.app-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--app-accent);
}

.app-progress {
  margin-top: 1rem;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.app-progress > span {
  display: block;
  height: 100%;
  background: var(--app-accent);
  border-radius: 2px;
  transition: width .5s cubic-bezier(.22,.61,.36,1);
}

.app-notify {
  margin-top: auto;
  padding-top: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  color: var(--app-accent);
  text-decoration: none;
  transition: gap .18s ease;
}
.app-notify:hover { gap: .7rem; }

/* --- Homepage hero (centered, chip row + copy) ---------------------- */
.hero--centered {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}
.hero--centered::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 55% at 50% 10%, rgba(212, 160, 23, .14), transparent 70%),
    radial-gradient(55% 60% at 85% 90%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%),
    radial-gradient(45% 55% at 10% 85%, rgba(37, 99, 235, .08), transparent 70%);
  pointer-events: none;
}
.hero--centered .shell { position: relative; z-index: 2; width: 100%; }

/* Floating educational motifs behind the hero copy */
.hero-decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-decor .deco {
  position: absolute;
  opacity: .18;
  transition: opacity .4s ease;
  filter: drop-shadow(0 2px 6px rgba(16, 65, 93,.05));
}
.deco--cap    { top: 10%;  left: 6%;   width: 72px; color: var(--primary); transform: rotate(-10deg); }
.deco--book   { top: 46%;  left: 3%;   width: 88px; color: var(--emerald); transform: rotate(-6deg); }
.deco--chart  { bottom: 10%; left: 11%; width: 72px; color: #2563EB; transform: rotate(4deg); }
.deco--pencil { top: 12%;  right: 7%;  width: 72px; color: var(--emerald); transform: rotate(14deg); }
.deco--bulb   { bottom: 14%; right: 6%; width: 76px; color: var(--primary); transform: rotate(-8deg); }

.deco--spark { opacity: .22; }
.deco--spark-a { top: 32%; right: 18%; width: 22px; color: var(--primary); }
.deco--spark-b { bottom: 32%; left: 22%; width: 18px; color: #2563EB; }

@media (max-width: 900px) {
  .deco--cap, .deco--book, .deco--chart, .deco--pencil, .deco--bulb { width: 54px; opacity: .13; }
  .deco--spark { opacity: .18; }
}
@media (max-width: 640px) {
  .deco--book, .deco--pencil { display: none; }
  .deco--cap, .deco--chart, .deco--bulb { width: 48px; }
}
@media (prefers-reduced-motion: reduce) { .hero-decor .deco { transition: none; } }

.hero-centered {
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(2rem, 4vw, 3rem);
}
.hero-centered h1 {
  font-size: clamp(1.95rem, 4.2vw, 3.25rem);
  line-height: 1.18;
  letter-spacing: -.015em;
}
.hero-centered .lead { margin-top: 1.1rem; margin-inline: auto; max-width: 40rem; text-align: center; }
.hero-centered .hero-actions {
  justify-content: center;
  margin-top: 1.8rem;
  flex-wrap: wrap;
}
.hero-centered .hero-actions .btn { white-space: nowrap; padding: .9rem 1.2rem; font-size: .92rem; }
.hero-centered .app-note { justify-content: center; }

.hero-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem;
  margin-bottom: 1.3rem;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  padding: .35rem .7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .1em;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.hero-chip--ielts { border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: #E31837; }
.hero-chip--sat   { border-color: rgba(37, 99, 235, .35); color: #2563EB; }
.hero-chip--toefl { border-color: rgba(14, 165, 233, .35); color: #0EA5E9; }
.hero-chip--pte   { border-color: rgba(219, 39, 119, .35); color: #DB2777; }

/* --- Why PrepMaestro — split layout (narrative + 2x2 pillar grid) --- */
.why-split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.why-copy h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin-top: .9rem;
}
.why-lead {
  margin-top: 1.2rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.why-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.why-stat { padding: 1.6rem 1.8rem; position: relative; }
.why-stat:nth-child(odd)  { padding-left: 0; }
.why-stat:nth-child(even) { padding-right: 0; border-left: 1px solid var(--line); }
.why-stat:nth-child(3),
.why-stat:nth-child(4) { border-top: 1px solid var(--line); }

.why-stat-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #fff;
  margin-bottom: 1rem;
}
.why-stat h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: -.01em;
}
.why-stat p {
  margin-top: .55rem;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .why-split { grid-template-columns: 1fr; }
  .why-stats { margin-top: 1rem; }
  .why-stat { padding: 1.4rem 1.2rem; }
  .why-stat:nth-child(odd)  { padding-left: 1.2rem; }
  .why-stat:nth-child(even) { padding-right: 1.2rem; }
}
@media (max-width: 520px) {
  .why-stats { grid-template-columns: 1fr; }
  .why-stat { border-left: 0 !important; padding: 1.2rem 0; }
  .why-stat + .why-stat { border-top: 1px solid var(--line); }
}