/* Aptitude Pro: shared styles for the one-page site and the policy pages. */

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  --brand: light-dark(#9c27b0, #d05ce3);
  --brand-hover: light-dark(#7b1fa2, #e08aef);
  --on-brand: light-dark(#ffffff, #1a0b1e);
  --brand-soft: light-dark(#f6eaf8, #2a1530);

  --grad-1: light-dark(#8e24aa, #e57cf5);
  --grad-2: light-dark(#d81b60, #ff7eb3);
  --grad-3: light-dark(#f4511e, #ffab76);

  --bg: light-dark(#ffffff, #0d0d10);
  --bg-subtle: light-dark(#f6f6f8, #131317);
  --surface: light-dark(#ffffff, #18181d);
  --text: light-dark(#111117, #f3f3f6);
  --muted: light-dark(#5c5c68, #a5a5af);
  --line: light-dark(#e8e8ee, #25252c);
  --line-strong: light-dark(#d4d4dc, #34343d);
  --star: #f5a524;

  --shadow-sm: 0 1px 2px light-dark(rgb(17 17 23 / .06), rgb(0 0 0 / .5));
  --shadow-lg: 0 28px 64px -28px light-dark(rgb(76 22 96 / .38), rgb(0 0 0 / .85));

  --radius: 20px;
  --radius-lg: 28px;
  --container: 1160px;
  --gutter: clamp(20px, 5vw, 40px);
  --section: clamp(80px, 11vw, 136px);
  --header-h: 64px;

  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);

  interpolate-size: allow-keywords;
}

/* A choice made with the theme toggle overrides the system setting. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Browsers without light-dark() get the light theme and no theme toggle. */
@supports not (color: light-dark(#000, #fff)) {
  [data-theme-toggle] { display: none !important; }
  :root, :root[data-theme] {
    color-scheme: light;
    --brand: #9c27b0; --brand-hover: #7b1fa2; --on-brand: #fff; --brand-soft: #f6eaf8;
    --grad-1: #8e24aa; --grad-2: #d81b60; --grad-3: #f4511e;
    --bg: #fff; --bg-subtle: #f6f6f8; --surface: #fff; --text: #111117; --muted: #5c5c68;
    --line: #e8e8ee; --line-strong: #d4d4dc;
    --shadow-sm: 0 1px 2px rgb(17 17 23 / .06);
    --shadow-lg: 0 28px 64px -28px rgb(76 22 96 / .38);
  }
  .t-aptitude { --c: #d97706; } .t-engineering { --c: #2563eb; } .t-interview { --c: #0284c7; }
  .t-gd { --c: #ea580c; } .t-gk { --c: #dc2626; } .t-logical { --c: #0d9488; }
  .t-programming { --c: #4f46e5; } .t-puzzles { --c: #16a34a; } .t-verbal { --c: #9333ea; }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
figure, blockquote { margin: 0; }
[role="list"] { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

::selection { background: color-mix(in oklab, var(--brand) 28%, transparent); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.ico {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Theme toggles show the mode they switch to. */
.ico--sun, [data-theme="dark"] .ico--moon { display: none; }
[data-theme="dark"] .ico--sun { display: block; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

.text-link {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.text-link:hover { color: var(--brand-hover); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .2s var(--ease);
}
.btn:hover { background: var(--brand-hover); }
.btn--sm { min-height: 38px; padding: 0 16px; font-size: .875rem; }

.play-badge { display: inline-block; flex: none; border-radius: 9px; }
.play-badge img { width: auto; height: 56px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.link-arrow .ico { width: 18px; height: 18px; color: var(--brand); }

@media (prefers-reduced-motion: no-preference) {
  .play-badge { transition: translate .2s var(--ease); }
  .play-badge:hover { translate: 0 -2px; }
  .link-arrow .ico { transition: translate .2s var(--ease); }
  .link-arrow:hover .ico { translate: 0 3px; }
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--line);
}

/* Fade the header edge in once the page scrolls. Opacity (not colour) is
   animated so the edge still follows live light/dark theme changes. */
@supports (animation-timeline: scroll()) {
  .site-header::after {
    animation: header-edge linear both;
    animation-timeline: scroll();
    animation-range: 0 96px;
  }
}
@keyframes header-edge { from { opacity: 0; } }

.header-inner { display: flex; align-items: center; height: var(--header-h); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.brand img { width: 32px; height: 32px; }

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: .9375rem;
  font-weight: 500;
  transition: color .2s, background-color .2s;
}
.nav a:hover { color: var(--text); background: var(--bg-subtle); }

.theme-toggle {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: 14px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color .2s;
}
.theme-toggle .ico { width: 19px; height: 19px; }
.theme-toggle:hover, .menu-btn:hover { background: var(--bg-subtle); }

.header-cta { margin-left: 10px; }

.menu-btn {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.menu-btn .ico { width: 20px; height: 20px; }

.menu {
  position: fixed;
  inset: calc(var(--header-h) + 8px) 12px auto;
  width: auto;
  max-height: calc(100svh - var(--header-h) - 20px);
  margin: 0;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
.menu::backdrop { background: rgb(0 0 0 / .18); }
.menu a {
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 1.0625rem;
  font-weight: 500;
}
.menu a:hover { background: var(--bg-subtle); }
.menu-theme {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 6px;
  padding: 14px 16px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 12px 12px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.menu-theme:hover { background: var(--bg-subtle); }
.menu-theme .ico { width: 20px; height: 20px; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .menu {
    transition: opacity .2s var(--ease), translate .2s var(--ease),
      display .2s allow-discrete, overlay .2s allow-discrete;
  }
  .menu:not(:popover-open) { opacity: 0; translate: 0 -8px; }
  @starting-style {
    .menu:popover-open { opacity: 0; translate: 0 -8px; }
  }
}

/* On the one-page site the toggle moves into the menu on narrow screens. */
@media (max-width: 819.98px) {
  .nav, .nav ~ .theme-toggle { display: none; }
  .menu-btn { display: inline-grid; }
}
@media (min-width: 820px) {
  .menu { display: none !important; }
}
@supports not selector(:popover-open) {
  .menu-btn, .menu { display: none !important; }
}

/* ---------- Shared section bits ---------- */

/* overflow-x: clip keeps decorative glows from causing sideways scroll
   without creating a scroll container. */
.section { padding-block: var(--section); overflow-x: clip; }
.section--subtle { background: var(--bg-subtle); }

.section-head { max-width: 46rem; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; }

.eyebrow {
  margin-bottom: 14px;
  color: var(--brand);
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.h2, .section-head h2 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  font-weight: 750;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.lead {
  max-width: 34rem;
  color: var(--muted);
  font-size: clamp(1.0625rem, .98rem + .4vw, 1.25rem);
  line-height: 1.6;
}
.section-head .lead { margin: 18px auto 0; }

/* Soft brand glow behind phones and the closing card. */
.glow::before {
  content: "";
  position: absolute;
  inset: 6% -8%;
  z-index: -1;
  background:
    radial-gradient(40% 38% at 32% 36%, light-dark(rgb(206 66 236 / .30), rgb(206 66 236 / .32)), transparent),
    radial-gradient(36% 34% at 70% 52%, light-dark(rgb(255 112 67 / .24), rgb(255 112 67 / .24)), transparent),
    radial-gradient(38% 34% at 46% 78%, light-dark(rgb(38 198 218 / .20), rgb(38 198 218 / .22)), transparent);
  filter: blur(24px);
  pointer-events: none;
}

/* Faint dotted grid behind the device screenshots, faded out towards the edges.
   Sections set --dots-at to centre it on their devices, and --dots-size to shape it. */
.dots { position: relative; isolation: isolate; }
.dots::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, var(--line-strong) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse var(--dots-size, 60% 70%) at var(--dots-at, 50% 50%), #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse var(--dots-size, 60% 70%) at var(--dots-at, 50% 50%), #000 10%, transparent 70%);
  pointer-events: none;
}

/* ---------- Device frames ---------- */

.phone, .tablet {
  position: relative;
  width: var(--w);
  background: #0b0b0e;
  box-shadow:
    inset 0 0 0 1.5px rgb(255 255 255 / .1),
    0 0 0 1px light-dark(rgb(17 17 23 / .1), rgb(255 255 255 / .09)),
    0 2px 6px light-dark(rgb(17 17 23 / .08), rgb(0 0 0 / .35)),
    var(--shadow-lg);
}
/* Thin bezel, same ratios on every phone. The screen corner is as round as it can
   be while still clearing the status-bar clock in the top-left of the screenshots;
   the frame corner is that plus the bezel so the two curves stay concentric. */
.phone { --w: 260px; --bezel: calc(var(--w) * .024); padding: var(--bezel); border-radius: calc(var(--w) * .086 + var(--bezel)); }
.phone picture { overflow: hidden; border-radius: calc(var(--w) * .086); }
.tablet { padding: calc(var(--w) * .03); border-radius: calc(var(--w) * .07); }
.tablet picture { overflow: hidden; border-radius: calc(var(--w) * .04); }
.phone img, .tablet img { width: 100%; background: #121212; }

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

/* On wide screens the hero, stats strip included, fills the first screen. Type,
   spacing and phone sizes also scale with the viewport height (svh) so the strip
   stays above the fold on shorter laptop screens. */
.hero {
  --hero-pt: clamp(20px, 4svh, 56px);
  --hero-pb: clamp(14px, 2.5svh, 28px);
  --dots-at: 72% 38%;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: var(--hero-pt) var(--hero-pb);
}

.hero::before { inset: 0 0 25%; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas: "copy visual" "stats stats";
  align-items: center;
  gap: clamp(20px, 3.5svh, 44px) clamp(40px, 6vw, 80px);
  min-height: calc(100svh - var(--header-h) - var(--hero-pt) - var(--hero-pb));
}
.hero-copy { grid-area: copy; }

.pill {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--muted);
  font-size: .875rem;
  font-weight: 500;
}

.hero h1 {
  margin-top: clamp(16px, 2.8svh, 26px);
  font-size: clamp(2.5rem, min(1.6rem + 5vw, 25.5svh - 140px), 5.25rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -0.045em;
}
.hero h1 span { display: block; }

.accent-text {
  width: fit-content;
  /* Extra bottom padding keeps descenders inside the clipped gradient. */
  margin-bottom: -.1em;
  padding-bottom: .1em;
  background: linear-gradient(100deg, var(--grad-1) 10%, var(--grad-2) 55%, var(--grad-3) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .lead { margin-top: clamp(14px, 2.8svh, 26px); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: clamp(20px, 3.6svh, 36px);
}

/* Phones are sized from their own column (container query units) and capped by
   the viewport height so they never push the stats strip off the first screen. */
.hero-visual {
  grid-area: visual;
  position: relative;
  display: grid;
  place-items: center;
  container-type: inline-size;
}
.hero-visual > .phone { grid-area: 1 / 1; }
.phone--back { --w: clamp(150px, min(50cqi, (100svh - 250px) / 2.56), 250px); translate: -48% -6%; }
.phone--front { --w: clamp(180px, min(60cqi, (100svh - 250px) / 2.134), 300px); translate: 22% 5%; }

.stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}
/* Each stat is a size container, so its type scales with the cell. */
.stats li { container-type: inline-size; padding: clamp(12px, 2.4svh, 26px) 12px; text-align: center; }
.stats li + li { border-left: 1px solid var(--line); }
.stats strong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(1.25rem, .9rem + 1.6vw, 2.25rem);
  font-size: clamp(1.0625rem, 21cqi, 2.25rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.stats strong svg { width: .7em; height: .7em; fill: var(--star); }
.stats li > span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .9375rem;
  font-size: clamp(.8125rem, 9.6cqi, .9375rem);
  line-height: 1.45;
}

/* Narrow screens stack copy, stats, then phones, so the stats sit under the buttons. */
@media (max-width: 899.98px) {
  .hero { --hero-pt: clamp(16px, 4.5vw, 40px); --dots-at: 50% 82%; --dots-size: 75% 30%; }
  /* The phones sit at the bottom here, so the dots must reach it and stay clear of the copy. */
  .hero::before { inset: 0; }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "copy" "stats" "visual";
    row-gap: 22px;
    min-height: 0;
  }
  .hero-copy { text-align: center; }
  .hero h1 { font-size: clamp(2.375rem, 1.2rem + 6vw, 4rem); }
  .hero h1 .accent-text, .hero .lead { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-visual { margin-block: 26px 8px; }
}
@media (max-width: 639.98px) {
  .hero h1 { margin-top: 16px; }
  .hero .lead { margin-top: 14px; font-size: 1rem; line-height: 1.55; }
  .hero-actions { gap: 14px; margin-top: 20px; }
  .hero .link-arrow { font-size: .9375rem; }
  .hero .play-badge img { height: 46px; }
  /* Phones: three stats, then two, each row spanning the full width. */
  .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stats li { grid-column: span 2; padding: clamp(10px, 1.8svh, 18px) 6px; }
  .stats li:nth-child(n + 4) { grid-column: span 3; border-top: 1px solid var(--line); }
  .stats li:nth-child(4) { border-left: 0; }
  .stats strong { font-size: 1.375rem; }
  .stats li > span { font-size: .75rem; line-height: 1.35; }
}

/* ---------- Topics ---------- */

.t-aptitude { --c: light-dark(#d97706, #fbbf24); }
.t-engineering { --c: light-dark(#2563eb, #60a5fa); }
.t-interview { --c: light-dark(#0284c7, #38bdf8); }
.t-gd { --c: light-dark(#ea580c, #fb923c); }
.t-gk { --c: light-dark(#dc2626, #f87171); }
.t-logical { --c: light-dark(#0d9488, #2dd4bf); }
.t-programming { --c: light-dark(#4f46e5, #818cf8); }
.t-puzzles { --c: light-dark(#16a34a, #4ade80); }
.t-verbal { --c: light-dark(#9333ea, #c084fc); }

.topics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.topic {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.topic__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--c) 14%, transparent);
  color: var(--c);
}
.topic__icon .ico { width: 23px; height: 23px; }
.topic h3 { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }

.exams {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: clamp(40px, 5vw, 56px);
  text-align: center;
}
.exams > p { color: var(--muted); font-size: .9375rem; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 52rem; }
.chips li {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-subtle);
  font-size: .875rem;
  font-weight: 500;
}

@media (max-width: 639.98px) {
  .topics { gap: 10px; }
  .topic { flex-direction: column; gap: 10px; padding: 18px 6px 16px; text-align: center; }
  .topic h3 { font-size: .875rem; }
}

/* ---------- How it works ---------- */

.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "visual head" "visual steps";
  align-items: center;
  gap: 36px clamp(40px, 7vw, 104px);
}
.how-head { grid-area: head; align-self: end; }
.how-head .lead { margin-top: 18px; }
.how-visual {
  grid-area: visual;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  container-type: inline-size;
}
.how-visual .phone { --w: clamp(220px, 68cqi, 310px); }
.steps { grid-area: steps; align-self: start; }

.step { border-top: 1px solid var(--line-strong); transition: border-color .3s; }
.step:last-child { border-bottom: 1px solid var(--line-strong); }
.step[open] { border-top-color: var(--brand); }
.step summary {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 22px 0;
  list-style: none;
  color: var(--muted);
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  cursor: pointer;
  transition: color .2s;
}
.step summary::-webkit-details-marker { display: none; }
.step summary:hover, .step[open] summary { color: var(--text); }
.step__num {
  flex: none;
  width: 28px;
  color: var(--brand);
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.step p { max-width: 44ch; padding: 0 0 26px 46px; color: var(--muted); }

/* Show the screenshot that matches the open step. The new one fades in on top while
   the old one stays solid underneath, so the screen never turns see-through. */
.phone--stack { display: grid; }
.phone--stack > picture { grid-area: 1 / 1; }
@supports selector(:has(*)) {
  .phone--stack > picture { opacity: 0; transition: opacity 0s .5s; }
  .how:not(:has(.step[open])) [data-screen="learn"],
  .how:has([data-step="learn"][open]) [data-screen="learn"],
  .how:has([data-step="practice"][open]) [data-screen="practice"],
  .how:has([data-step="test"][open]) [data-screen="test"] {
    z-index: 1;
    opacity: 1;
    transition: opacity .5s var(--ease);
  }
}

/* Narrow screens: Learn / Practice / Test tabs sit right above the phone, so the
   screenshot change is visible without scrolling. Without JS the accordion stays. */
.how-tabs { display: none; }

@media (max-width: 899.98px) {
  .how-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "tabs" "steps" "visual";
    row-gap: 24px;
  }
  .how-head { text-align: center; }
  .how-head .lead { margin-inline: auto; }
  .how-visual .phone { --w: clamp(200px, 58cqi, 280px); }
  .steps { width: min(100%, 34rem); justify-self: center; }

  .how-tabs:not([hidden]) {
    grid-area: tabs;
    display: flex;
    justify-self: center;
    gap: 4px;
    width: min(100%, 24rem);
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }
  .how-tabs button {
    flex: 1;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .2s, background-color .2s;
    -webkit-tap-highlight-color: transparent;
  }
  .how-tabs button:hover { color: var(--text); }
  .how-tabs button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }

  /* With tabs, only the open step's text shows. All three texts share one grid cell,
     so the box always fits the longest and the phone below never moves.
     Browsers without ::details-content fall back to a three-line minimum. */
  .how-tabs:not([hidden]) ~ .steps { display: grid; min-height: 4.8em; }
  .how-tabs:not([hidden]) ~ .steps .step { grid-area: 1 / 1; border: 0; }
  .how-tabs:not([hidden]) ~ .steps summary { display: none; }
  .how-tabs:not([hidden]) ~ .steps .step p { margin-inline: auto; padding: 0; text-align: center; }
  .how-tabs:not([hidden]) ~ .steps .step::details-content {
    content-visibility: visible;
    block-size: auto;
    transition: none;
  }
  .how-tabs:not([hidden]) ~ .steps .step:not([open]) p { visibility: hidden; }
  @media (prefers-reduced-motion: no-preference) {
    .how-tabs:not([hidden]) ~ .steps .step[open] p { animation: fade-in .4s var(--ease); }
  }
}
@keyframes fade-in { from { opacity: 0; } }

/* ---------- Features ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 56px);
}
.feature { padding: 32px 0 36px; border-top: 1px solid var(--line); }
.feature__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
}
.feature__icon .ico { width: 21px; height: 21px; }
.feature h3 { font-size: 1.125rem; font-weight: 650; letter-spacing: -0.015em; }
.feature p { margin-top: 8px; color: var(--muted); }

@media (max-width: 899.98px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature:first-child { grid-column: 1 / -1; }
}
@media (max-width: 559.98px) {
  .features { grid-template-columns: minmax(0, 1fr); }
  .feature { padding-block: 26px 28px; }
}

/* ---------- Tablets ---------- */

/* No bottom padding: the tablet runs off the section edge onto the next band. */
.tablet-section { --dots-at: 72% 62%; padding-bottom: 0; }
.tablet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  column-gap: clamp(32px, 5vw, 72px);
}
.tablet-copy .lead { margin-top: 18px; }
.tablet-visual {
  --w: clamp(280px, 36vw, 440px);
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  /* Shows the top of the screen, down to just past the nine topic cards. */
  height: calc(var(--w) * 1.06);
  /* Cut at the bottom edge only, so the glow can spread past the sides as in the hero. */
  clip-path: inset(-100vmax -100vmax 0);
}
/* The hero glow, ending above the cut so it fades out before the edge. */
.tablet-visual.glow::before { inset: 6% -8% 22%; }

@media (max-width: 899.98px) {
  /* Stacked: the tablet sits below the copy, so keep the dots around it, clear of the text. */
  .tablet-section { --dots-at: 50% 80%; --dots-size: 75% 40%; }
  .tablet-grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(36px, 7vw, 56px); text-align: center; }
  .tablet-copy .lead { margin-inline: auto; text-wrap: balance; }
  .tablet-visual { --w: min(76vw, 400px); }
}

/* ---------- Reviews ---------- */

.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.review {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.stars { display: flex; gap: 2px; }
.stars svg { width: 18px; height: 18px; fill: var(--star); }
.review blockquote { flex: 1; font-size: 1.0625rem; line-height: 1.6; }
.review figcaption { display: flex; align-items: center; gap: 12px; }
.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8e24aa, #d81b60);
  color: #fff;
  font-weight: 650;
}
.review__name { display: block; font-size: .9375rem; font-weight: 600; }
.review__meta { display: block; color: var(--muted); font-size: .8125rem; }

@media (max-width: 899.98px) {
  .reviews { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }
}

/* ---------- FAQ ---------- */

.faq { max-width: 800px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  list-style: none;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  transition: rotate .3s var(--ease), color .2s, border-color .2s;
}
.faq-icon .ico { width: 14px; height: 14px; stroke-width: 2; }
.faq details[open] .faq-icon { rotate: 45deg; border-color: var(--brand); color: var(--brand); }
.faq details p { padding: 0 54px 24px 0; color: var(--muted); }

/* Wide screens: an open two-column grid. site.js keeps every item open there;
   the ::details-content rule shows the answers even before it runs. */
@media (min-width: 900px) {
  .faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(40px, 5vw, 72px);
    max-width: none;
  }
  .faq details:nth-child(2) { border-top: 1px solid var(--line); }
  .faq summary { padding: 28px 0 10px; cursor: default; }
  .faq summary:hover { color: inherit; }
  .faq-icon { display: none; }
  .faq details p { padding: 0 0 28px; }
  .faq details::details-content { content-visibility: visible; block-size: auto; }
}

/* Animate accordions open and closed where supported. */
@media (prefers-reduced-motion: no-preference) {
  details::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size .35s var(--ease), content-visibility .35s allow-discrete;
  }
  details[open]::details-content { block-size: auto; }
}

/* ---------- Closing call to action ---------- */

.cta { padding-bottom: var(--section); }
.cta-card {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: clamp(48px, 8vw, 96px) clamp(24px, 6vw, 72px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  text-align: center;
}
.cta-card.glow::before { inset: -30% 0 auto; height: 110%; opacity: .8; }
.cta-card .app-icon { width: 76px; height: 76px; filter: drop-shadow(0 14px 24px rgb(120 30 140 / .3)); }
.cta-card .lead { margin-inline: auto; }

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

.site-footer {
  padding-block: 48px 36px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9375rem;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px 48px;
}
.footer-brand .brand { color: var(--text); }
.footer-brand .brand img { width: 28px; height: 28px; }
.footer-brand p { margin-top: 10px; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.footer-nav a { transition: color .2s; }
.footer-nav a:hover { color: var(--text); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
}

/* ---------- Policy pages ---------- */

.page-head { padding-block: clamp(40px, 7vw, 80px) clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--line); }
.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: .9375rem;
  font-weight: 500;
  transition: color .2s;
}
.back:hover { color: var(--text); }
.back .ico { width: 16px; height: 16px; }
.page-head h1 {
  margin-top: 20px;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  font-weight: 750;
  letter-spacing: -0.04em;
}

.prose {
  max-width: 72ch;
  padding-block: clamp(28px, 5vw, 48px) var(--section);
  line-height: 1.75;
  overflow-wrap: anywhere;
}
/* The legacy policy markup spaces blocks with <br> and empty paragraphs; let margins do that instead. */
.prose > br, .prose div > br, .prose p:empty { display: none; }
.prose > strong:first-child { display: none; }
.prose > strong {
  display: block;
  margin: 2.2em 0 .6em;
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.prose h2 { margin: 2em 0 .6em; font-size: 1.5rem; letter-spacing: -0.02em; }
.prose h3 { margin: 1.6em 0 .4em; font-size: 1.125rem; letter-spacing: -0.01em; }
.prose > :is(h2, h3, strong):first-child { margin-top: 0; }
.prose p, .prose ul { margin: 0 0 1em; }
.prose p, .prose li { color: color-mix(in oklab, var(--text) 80%, var(--muted)); }
.prose ul { padding-left: 1.25em; }
.prose li { margin: .35em 0; }
.prose li::marker { color: var(--brand); }
.prose a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--line); }

/* ---------- Scroll reveal (CSS only, skipped where unsupported) ---------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 140px;
    }
  }
}
@keyframes reveal { from { opacity: 0; translate: 0 28px; } }

/* ---------- 404 page ---------- */
#not-found { padding-block: var(--section); text-align: center; }
#not-found h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); font-weight: 750; line-height: 1.06; letter-spacing: -0.035em; }
#not-found .lead { margin: 18px auto 0; }
#not-found-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
#not-found-actions .btn + .btn { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 1px var(--line-strong); }
#not-found-actions .btn + .btn:hover { background: var(--brand-soft); }