/* Lexpad home page: "Aurora" (owner decision 2026-10-09).
 *
 * Loaded only by site/index.html, after the shared styles.css, so no other page changes.
 * Home follows the system (owner, 2026-10-09): Aurora dark, light from a forest at night in
 * the app's own Forest dark theme, and Aurora light, the same page on paper with forest-green
 * accents (section 17). Dark values are the defaults below; section 17 overrides them.
 * Spacing (round 3): one scale of tokens; a card's padding is equal on all four sides unless a
 * screen bleeds off an edge; every card grid uses --gap-grid.
 *
 * Motion rules (CLAUDE.md): three CSS loops only (the aurora, the hero's word chips and the
 * language river). None runs with prefers-reduced-motion; each stops with the "Pause motion"
 * switch (works without JS through :has()) and pauses while its section is off screen
 * (site-v5.js). Entrances animate transform and opacity only and finish promptly.
 * Rendering stays cheap on phones: no blend modes or blur filters; the header is the only
 * glass (backdrop-filter). Screenshots are never rotated, tinted or painted over.
 *
 * Fonts: Schibsted Grotesk (styles.css) and Instrument Serif Italic, SIL Open Font
 * License 1.1, Copyright 2022 The Instrument Serif Project Authors, Latin subset
 * (assets/fonts/instrument-serif-italic-latin-v1.woff2; licence text in
 * assets/fonts/instrument-serif-OFL.txt). One serif accent per heading only.
 *
 * Sections: 1 tokens  2 base and header  3 buttons  4 hero  5 river and the switch
 * 6 sections  7 practice and boxes  8 AI  9 platforms  10 pricing  11 FAQ
 * 12 phone bar  13 closing  14 footer  15 motion  16 responsive  17 light
 * Round 3 adds the feature spotlights (.a-spot) after the steps.
 */

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/instrument-serif-italic-latin-v1.woff2") format("woff2");
}

/* 1. Tokens. In a dark scheme the shared tokens of styles.css take Aurora dark values; in a
   light scheme styles.css's own light tokens apply and section 17 sets the home tokens. */
@media (prefers-color-scheme: dark) {
:root {
  color-scheme: dark;
  --paper: oklch(0.145 0.018 158);
  --card: oklch(0.205 0.018 158);
  --sunk: oklch(0.125 0.015 158);
  --ink: oklch(0.97 0.008 120);
  --ink-2: oklch(0.86 0.018 140);
  --dim: oklch(0.76 0.022 150);
  --accent: oklch(0.78 0.11 150);
  --accent-ink: #d5ebb1;
  --on-accent: #10200f;
  --accent-soft: oklch(0.78 0.11 150 / 0.13);
  --accent-line: oklch(0.85 0.1 130 / 0.35);
  --coral: oklch(0.6 0.13 30 / 0.55);
  --coral-strong: oklch(0.75 0.13 30);
  --coral-soft: oklch(0.7 0.13 30 / 0.16);
  --amber: oklch(0.82 0.11 80);
  --amber-soft: oklch(0.8 0.12 80 / 0.14);
  --line: oklch(1 0 0 / 0.11);
  --line-soft: oklch(1 0 0 / 0.07);
  --rule: oklch(1 0 0 / 0.09);
  --frame: #050504;
  --frame-ring: oklch(1 0 0 / 0.14);
  --glass: oklch(0.17 0.02 158 / 0.62);
  --glow: oklch(0.55 0.11 150 / 0.4);
  --glow-2: oklch(0.45 0.07 110 / 0.35);
  --shadow-color: 0 0% 0%;
  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.4);
  --shadow: 0 1px 2px hsl(0 0% 0% / 0.4), 0 12px 32px -10px hsl(0 0% 0% / 0.6);
  --shadow-lg: 0 2px 4px hsl(0 0% 0% / 0.4), 0 24px 50px -14px hsl(0 0% 0% / 0.7), 0 60px 100px -40px hsl(0 0% 0% / 0.6);
  /* The other dark-scheme tokens of styles.css (keep in step with its dark blocks). */
  --win-bar: oklch(0.27 0.01 150);
  --win-bar-ink: oklch(0.82 0.012 150);
  --win-ring: oklch(1 0 0 / 0.14);
  --tip-bg: oklch(0.97 0.006 95);
  --tip-ink: oklch(0.2 0.015 85);
  --logo-tile: oklch(0.25 0.012 158);
  --logo-ink: #fff;
  --logo-edge: oklch(1 0 0 / 0.12);
  --chip-beta-bg: oklch(0.8 0.12 80 / 0.16);
  --chip-beta-ink: oklch(0.86 0.11 85);
  --dlc-go-shadow: 0 6px 16px -6px oklch(0 0 0 / 0.6);
}
}
:root {
  /* Space: a 4/8 scale. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  /* Padding by box type; equal on four sides unless a screen bleeds off an edge. */
  --pad-item: 16px 20px;
  --pad-card: clamp(24px, 1.2rem + 1.2vw, 32px);
  --pad-panel: clamp(24px, 0.8rem + 3.6vw, 56px);
  --gap-grid: clamp(12px, 0.5rem + 0.85vw, 20px);
  --gap-list: 12px;
  --sec-y: clamp(56px, 6.5vw, 96px);
  --head-gap: clamp(32px, 4vw, 56px);
  --spot-gap: clamp(56px, 6.5vw, 96px);
  --a-media: 1000px;
  --r-sm: 12px;
  --r-btn: 16px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;
  /* Surfaces (dark values; section 17 has the light ones). */
  --a-card-top: oklch(0.24 0.028 156);
  --a-card-bot: oklch(0.18 0.02 158);
  --a-veil: oklch(1 0 0 / 0.035);
  --a-veil-2: oklch(1 0 0 / 0.07);
  --a-depth: #000;
  --a-on-lime: #10200f;
  --a-primary: linear-gradient(180deg, var(--a-lime-hi), var(--a-lime) 60%, #c3e09a);
  --a-em: linear-gradient(100deg, var(--a-lime-hi), oklch(0.8 0.16 145));
  --a-h1: linear-gradient(180deg, #fff 20%, oklch(0.86 0.04 140) 100%);
  --a-chip-bg: oklch(0.24 0.03 158 / 0.9);
  --a-tile: oklch(0.28 0.04 155);
  --a-ground: oklch(0.145 0.018 158);
  --a-lime: #d5ebb1;
  --a-lime-hi: #e8f6cf;
  --a-coral: oklch(0.78 0.12 38);
  --a-ink-3: oklch(0.76 0.022 150);
  --a-line-2: oklch(1 0 0 / 0.16);
  --a-glow: oklch(0.8 0.17 140);
  --a-r: 28px;
  --a-wrap: 1200px;
  --a-gut: clamp(16px, 4vw, 40px);
  --a-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --a-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --header-h: 78px;
}

/* 2. Base and header */
body {
  background: var(--a-ground);
  color: var(--ink);
}
html {
  scroll-padding-top: 96px;
}
.aurora {
  overflow-x: clip;
}
.aurora p {
  color: var(--ink-2);
}
.aurora :where(a:not(.button):not(.pw)) {
  color: var(--a-lime);
}
.aurora :where(a:not(.button):not(.pw)):hover {
  color: var(--a-lime-hi);
}
:focus-visible {
  outline: 3px solid var(--a-lime);
  outline-offset: 3px;
  border-radius: 8px;
}
.aurora h1,
.aurora h2,
.aurora h3 {
  color: var(--ink);
}
.aurora h1 em,
.aurora h2 em,
.aurora h3 em,
.aurora h4 em {
  font-family: var(--a-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding-right: 0.06em;
  color: var(--a-lime);
  background: var(--a-em);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.a-wrap {
  width: min(100% - 2 * var(--a-gut), var(--a-wrap));
  margin-inline: auto;
}
.skip-link {
  background: var(--a-lime);
  color: #10200f;
  font-weight: 700;
}

/* The top bar floats as the page's only glass. */
.site-header {
  padding-top: 10px;
  min-height: var(--header-h);
}
.site-header::before {
  inset: 10px max(0px, calc(var(--gutter) - 14px)) 0;
  border-radius: 20px;
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.06), 0 12px 40px -18px #000;
}
@media (prefers-reduced-transparency: reduce) {
  .site-header::before {
    background: oklch(0.17 0.02 158);
  }
}
.site-nav > a:not(.pill) {
  color: var(--ink-2);
}
.site-nav > a:not(.pill):hover {
  background: oklch(1 0 0 / 0.06);
  color: var(--ink);
}
.dl-panel {
  background: oklch(0.19 0.022 158);
  border-color: var(--a-line-2);
  box-shadow: 0 30px 80px -20px #000;
}

/* 3. Buttons */
.aurora .button,
.site-nav .pill {
  font-weight: 650;
  transition: transform 0.25s var(--a-ease), box-shadow 0.25s var(--a-ease), background 0.25s;
}
.aurora .button {
  min-height: 56px;
  padding: 0 26px;
  border-radius: 16px;
  font-size: 1.0625rem;
}
.aurora .primary,
.site-nav .pill {
  color: #0f200e;
  border-color: transparent;
  background: linear-gradient(180deg, var(--a-lime-hi), var(--a-lime) 60%, #c3e09a);
  box-shadow: inset 0 1px 0 #fff8, 0 0 0 1px oklch(0.9 0.1 130 / 0.5), 0 10px 40px -8px oklch(0.8 0.17 140 / 0.6);
}
.site-nav .pill {
  box-shadow: 0 0 24px -6px oklch(0.85 0.12 130 / 0.6);
}
.aurora .primary:hover,
.site-nav .pill:hover {
  color: #0f200e;
  background: linear-gradient(180deg, #f2fbe2, var(--a-lime-hi) 60%, var(--a-lime));
}
.aurora .primary:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #fff8, 0 0 0 1px oklch(0.9 0.1 130 / 0.6), 0 16px 50px -8px oklch(0.8 0.17 140 / 0.8);
}
.aurora .secondary {
  color: var(--ink);
  background: oklch(1 0 0 / 0.06);
  border: 1px solid var(--a-line-2);
  box-shadow: none;
}
.aurora .secondary:hover {
  background: oklch(1 0 0 / 0.11);
  transform: translateY(-2px);
}
.a-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* 4. Hero */
.a-hero {
  position: relative;
  isolation: isolate;
  /* clip, not hidden: a hidden overflow is a scroll container and would break the phone bar's view timeline. */
  overflow: clip;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  background: radial-gradient(120% 70% at 50% 0%, oklch(0.22 0.04 155), var(--a-ground) 70%);
}
/* Film grain, inside the hero only: a small tiled noise, no blend mode. */
.a-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 128px 128px;
}
.a-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 160px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--a-ground));
}
.a-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.a-blob {
  position: absolute;
  border-radius: 50%;
}
.a-b1 { width: 70vmax; height: 50vmax; left: -18vmax; top: -22vmax; background: radial-gradient(closest-side, oklch(0.5 0.13 150 / 0.7), oklch(0.38 0.09 155 / 0.22) 55%, transparent); }
.a-b2 { width: 60vmax; height: 46vmax; right: -16vmax; top: -16vmax; background: radial-gradient(closest-side, oklch(0.68 0.14 128 / 0.42), oklch(0.45 0.11 140 / 0.16) 55%, transparent); }
.a-b3 { width: 46vmax; height: 34vmax; left: 30%; top: 8vmax; background: radial-gradient(closest-side, oklch(0.55 0.11 190 / 0.3), transparent 70%); }
.a-b4 { width: 40vmax; height: 30vmax; right: 8%; top: 14vmax; background: radial-gradient(closest-side, oklch(0.62 0.12 40 / 0.2), transparent 70%); }
.a-beam {
  position: absolute;
  left: 50%;
  top: -10%;
  width: 140%;
  height: 120%;
  transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 162deg, oklch(0.92 0.08 130 / 0.12) 176deg, oklch(0.98 0.05 120 / 0.22) 180deg, oklch(0.92 0.08 130 / 0.12) 184deg, transparent 198deg);
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 75%);
  mask-image: linear-gradient(180deg, #000 10%, transparent 75%);
}
.a-beam.is-up {
  top: auto;
  bottom: -10%;
  transform: translateX(-50%) rotate(180deg);
}
.a-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff9, transparent), radial-gradient(1px 1px at 28% 64%, #fff6, transparent),
    radial-gradient(1.5px 1.5px at 44% 14%, #fffa, transparent), radial-gradient(1px 1px at 63% 38%, #fff7, transparent),
    radial-gradient(1px 1px at 79% 18%, #fff8, transparent), radial-gradient(1.5px 1.5px at 88% 52%, #fff6, transparent),
    radial-gradient(1px 1px at 7% 78%, #fff5, transparent), radial-gradient(1px 1px at 54% 82%, #fff4, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
  mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.a-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(24px, 4vh, 56px) var(--a-gut) 0;
  text-align: center;
}
.a-news {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 4px 14px 4px 5px;
  border-radius: 99px;
  font-size: 0.875rem;
  font-weight: 550;
  text-decoration: none;
  background: oklch(0.24 0.03 156 / 0.85);
  border: 1px solid var(--a-line-2);
  box-shadow: 0 0 30px -10px oklch(0.8 0.15 140 / 0.6);
}
.aurora .a-news {
  color: var(--ink);
}
.aurora .a-news:hover {
  color: #fff;
  border-color: var(--accent-line);
  text-decoration: none;
}
.a-news b {
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--a-lime);
  color: #11220f;
  font-size: 0.75rem;
  font-weight: 700;
}
.a-hero h1 {
  margin-top: 24px;
  font-size: clamp(48px, 7vw, 104px);
  font-weight: 800;
  line-height: 0.93;
  letter-spacing: -0.055em;
}
.a-h1-a {
  display: block;
  background: var(--a-h1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aurora .a-h1-b {
  display: block;
  padding: 0 0.06em 0.08em;
  font-size: 1.08em;
  line-height: 0.95;
  letter-spacing: -0.03em;
  background: linear-gradient(100deg, var(--a-lime-hi) 0%, var(--a-lime) 35%, oklch(0.82 0.16 145) 70%, var(--a-lime-hi) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.aurora .a-lede {
  max-width: 700px;
  margin: 20px auto 0;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.5;
  color: var(--ink-2);
}
.a-hero .a-ctas {
  margin-top: 24px;
}
.aurora .a-trust {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--a-ink-3);
}
.a-stage {
  position: relative;
  z-index: 2;
  height: clamp(400px, 40vw, 580px);
  margin-top: clamp(20px, 3vh, 32px);
}
.a-horizon {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: min(1600px, 150vw);
  height: 60%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, oklch(0.78 0.16 140 / 0.42), oklch(0.6 0.14 150 / 0.16) 45%, oklch(0.5 0.1 150 / 0.05) 70%, transparent);
}
.a-horizon::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 46%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, oklch(0.95 0.08 130 / 0.8), transparent);
  box-shadow: 0 0 30px 6px oklch(0.85 0.15 135 / 0.4);
}
.a-phones {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  transform: translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -6px), 0);
  transition: transform 0.6s var(--a-ease);
}

/* A modern phone: rounded screen, thin bezel, no status bar or notch drawn over the shot. */
.a-phone {
  position: relative;
  margin: 0;
  padding: 6px;
  border-radius: 44px;
  background: linear-gradient(155deg, oklch(0.4 0.035 150), oklch(0.15 0.015 158) 40%, oklch(0.24 0.025 155));
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.16),
    0 0 0 1px oklch(0 0 0 / 0.6),
    0 0 60px -8px oklch(0.75 0.16 145 / 0.4),
    0 50px 90px -30px #000;
}
.a-phone img {
  width: 100%;
  height: auto;
  border-radius: 38px;
}
.a-p-main {
  z-index: 3;
  flex: none;
  width: clamp(236px, 21.5vw, 310px);
}
.a-p-side {
  z-index: 2;
  flex: none;
  width: clamp(188px, 17vw, 250px);
  margin-top: 64px;
  scale: 0.94;
}
.a-p-left {
  margin-right: -40px;
  transform-origin: right top;
}
.a-p-right {
  margin-left: -40px;
  transform-origin: left top;
}
.a-chips {
  position: absolute;
  inset: 0;
  max-width: 1600px;
  margin-inline: auto;
  z-index: 4;
  pointer-events: none;
  transform: translate3d(calc(var(--px, 0) * 22px), calc(var(--py, 0) * 14px), 0);
  transition: transform 0.6s var(--a-ease);
}
.a-chip {
  position: absolute;
  padding: 10px 18px;
  border-radius: 16px;
  white-space: nowrap;
  font: 600 clamp(15px, 1.3vw, 19px) / 1.2 var(--sans);
  letter-spacing: -0.01em;
  color: var(--ink);
  background: oklch(0.24 0.03 158 / 0.9);
  border: 1px solid oklch(0.9 0.1 130 / 0.26);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.1), 0 0 30px -8px oklch(0.8 0.17 140 / 0.5), 0 18px 40px -16px #000;
}
.a-chip[lang="fa"] {
  font-family: var(--fa);
}
.a-c1 { left: 7%; top: 8%; }
.a-c2 { right: 8%; top: 3%; color: var(--a-lime); }
.a-c3 { left: 3%; top: 42%; }
.a-c4 { right: 4%; top: 36%; color: #ffd9c7; border-color: oklch(0.8 0.12 40 / 0.4); }
.a-c5 { left: 12%; top: 70%; }
.a-c6 { right: 11%; top: 66%; }

.a-updated {
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: oklch(0.85 0.1 130 / 0.4);
}
/* The note beside the main phone points at its edit pencil; it never covers the screen. */
.aurora .a-note {
  position: absolute;
  z-index: 5;
  top: 6px;
  left: calc(50% + clamp(236px, 21.5vw, 310px) / 2 + 46px);
  width: 23ch;
  font: italic 400 clamp(17px, 1.35vw, 20px) / 1.2 var(--a-serif);
  color: var(--a-lime);
}
.a-note-arrow {
  position: absolute;
  top: 8px;
  left: -44px;
  color: var(--a-lime);
}

/* 5. The language river, and the "Pause motion" switch */
.a-river {
  position: relative;
  padding: 22px 0 32px;
  background: linear-gradient(180deg, oklch(0.16 0.02 158 / 0), oklch(0.17 0.02 158) 40%, var(--a-ground));
}
.a-river-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
  margin: 0 auto 16px;
  padding-inline: var(--a-gut);
}
.aurora .a-river-head p {
  color: var(--ink-2);
  font-size: 1.0625rem;
}
.a-river-head b {
  color: var(--ink);
  font-weight: 650;
}
.a-river-track {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.a-river-row {
  flex: none;
  display: flex;
  gap: 14px;
  padding-right: 14px;
}
.a-river-row span {
  flex: none;
  padding: 8px 18px;
  border-radius: 99px;
  font-size: 17px;
  font-weight: 550;
  color: var(--ink-2);
  border: 1px solid var(--line);
  background: oklch(1 0 0 / 0.03);
  white-space: nowrap;
}
.a-river-row span:nth-child(3n) {
  color: var(--a-lime);
  border-color: oklch(0.85 0.1 130 / 0.25);
}
.a-river-row span:nth-child(4n) {
  font-family: var(--a-serif);
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
}
.a-river-row span[lang="fa"],
.a-river-row span[lang="ar"] {
  font-family: var(--fa);
  font-style: normal;
  font-size: 17px;
}
/* The switch (from concept C): a native checkbox with role="switch". Shown only when
   motion is welcome; without JS it still pauses every loop through :has(). */
.motion-off,
.motion-toggle {
  display: none;
}
.motion-toggle {
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--a-line-2);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  background: oklch(1 0 0 / 0.04);
}
.motion-toggle:hover {
  background: oklch(1 0 0 / 0.08);
}
.knob {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: oklch(1 0 0 / 0.22);
  transition: background 0.2s;
}
.knob::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.2s var(--a-ease);
}
.motion-off:checked + .motion-toggle .knob {
  background: var(--a-lime);
}
.motion-off:checked + .motion-toggle .knob::after {
  transform: translateX(14px);
  background: #10200f;
}
.motion-off:focus-visible + .motion-toggle {
  outline: 3px solid var(--a-lime);
  outline-offset: 3px;
}

/* 6. Sections */
.a-after {
  position: relative;
}
.a-sec {
  position: relative;
  padding-block: var(--sec-y);
}
/* Headings sit at the wrap's start edge; only the film's (and the closing) are centred. */
.a-head {
  max-width: 780px;
  margin-bottom: var(--head-gap);
}
.a-head.is-center {
  margin-inline: auto;
  text-align: center;
}
.a-head h2,
.aurora .faq h2,
.a-pricing h2,
.a-close h2 {
  font-size: clamp(38px, 4.8vw, 66px);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 0.98;
}
.aurora .a-head > p:not(.a-kicker) {
  margin-top: 20px;
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--ink-2);
}
.a-head.is-center > p:not(.a-kicker) {
  max-width: 46ch;
  margin-inline: auto;
}
.aurora .a-kicker {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--a-lime);
  background: oklch(0.5 0.11 150 / 0.18);
  border: 1px solid oklch(0.85 0.1 130 / 0.22);
}
.a-link {
  font-weight: 600;
  text-decoration: none;
}
.a-link:hover {
  text-decoration: underline;
}
.a-center-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-7);
}
.a-card,
.a-step {
  position: relative;
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, var(--a-card-top), var(--a-card-bot));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--a-veil-2), 0 30px 60px -40px var(--a-depth);
}
/* A soft light that follows the pointer (site-v5.js sets --mx and --my). */
.a-card::before,
.a-step::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), oklch(0.8 0.15 140 / 0.1), transparent 60%);
}
.a-card:hover::before,
.a-step:hover::before {
  opacity: 1;
}
.a-dots {
  display: inline-flex;
  gap: 7px;
}
.a-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.16);
}

/* Film: the shared player (film-player-v4.js), framed as a screen in the dark. */
.a-screen {
  position: relative;
  max-width: var(--a-media);
  margin: 0 auto;
  padding: 10px;
  border-radius: var(--r-xl);
  background: linear-gradient(170deg, oklch(0.28 0.035 152), oklch(0.17 0.02 158));
  border: 1px solid var(--a-line-2);
  box-shadow: 0 0 0 1px #000, 0 0 120px -30px oklch(0.75 0.16 145 / 0.55), 0 60px 120px -50px #000;
}
.a-screen-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px 12px;
  font-size: 0.8125rem;
  color: var(--a-ink-3);
}
.a-screen .film-screen {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: #000;
}
.a-screen video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
/* The play button sits bottom-left, clear of the poster's title. */
.a-screen .film-start,
.a-screen .film-sound {
  position: absolute;
  inset: auto auto 20px 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 20px 8px 8px;
  border: 1px solid var(--a-line-2);
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: oklch(0.16 0.02 158 / 0.88);
  box-shadow: 0 20px 50px -20px #000;
  transform: none;
}
.a-screen .film-start[hidden],
.a-screen .film-sound[hidden] {
  display: none;
}
.a-screen .film-play-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 60px;
  margin: 0;
  border-radius: 50%;
  color: #10200f;
  background: linear-gradient(180deg, var(--a-lime-hi), var(--a-lime));
  box-shadow: 0 0 0 8px oklch(0.85 0.12 135 / 0.16), 0 0 50px oklch(0.8 0.17 140 / 0.6);
  font-size: 0;
  transition: transform 0.3s var(--a-ease);
}
.a-screen .film-play-icon svg {
  fill: currentColor;
}
.a-screen .film-start .film-play-icon svg {
  margin-left: 3px;
}
.a-screen .film-start:hover .film-play-icon,
.a-screen .film-sound:hover .film-play-icon {
  transform: scale(1.06);
}
.a-screen .film-start strong,
.a-screen .film-sound strong {
  display: block;
  font-size: 1.0625rem;
  color: var(--ink);
}
.a-screen .film-start small,
.a-screen .film-sound small {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.a-screen .film-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 12px 10px 4px;
  font-size: 0.875rem;
  color: var(--a-ink-3);
}
.a-screen .film-status {
  padding: 10px;
  color: var(--ink-2);
}
.aurora .film-more {
  max-width: var(--a-media);
  margin: 18px auto 0;
  font-size: 0.9375rem;
  color: var(--a-ink-3);
}
.aurora .film-more a {
  color: var(--ink-2);
  font-weight: 550;
}
.aurora .film-more + .film-transcript {
  margin-top: 4px;
}
.aurora .film-transcript {
  max-width: var(--a-media);
  margin: 18px auto 0;
  font-size: 0.9375rem;
}
.aurora .film-transcript summary,
.aurora .film-transcript summary * {
  color: var(--ink-2);
}
.aurora .film-transcript summary {
  width: fit-content;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--ink-2);
  font-weight: 550;
}
.aurora .film-transcript p {
  margin-top: 8px;
  max-width: 70ch;
  color: var(--a-ink-3);
}

/* Steps: compact text cards (the screens live in the spotlights), equal padding on four sides. */
.a-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-grid);
}
.a-step {
  display: flex;
  flex-direction: column;
  padding: var(--pad-card);
}
.a-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: var(--r-btn);
  font: italic 400 30px / 1 var(--a-serif);
  color: var(--a-on-lime);
  background: linear-gradient(160deg, var(--a-lime-hi), var(--a-lime));
  box-shadow: 0 0 30px -4px oklch(0.85 0.15 135 / 0.6);
}
.a-step h3 {
  margin-top: var(--sp-5);
  font-size: 1.625rem;
  letter-spacing: -0.03em;
}
.aurora .a-step p {
  margin-top: var(--sp-3);
  font-size: 1rem;
}

/* Ways */
.a-browser {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--a-line-2);
  background: oklch(0.2 0.02 158);
  box-shadow: 0 0 0 1px #000, 0 0 140px -40px oklch(0.75 0.16 145 / 0.5), 0 60px 120px -50px #000;
}
.a-browser-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.a-url {
  flex: 1;
  max-width: 420px;
  margin-inline: auto;
  padding: 5px 14px;
  border-radius: 10px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--a-ink-3);
  background: oklch(1 0 0 / 0.05);
}
.a-browser img {
  width: 100%;
}
.a-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-list);
}
.aurora .a-store {
  min-height: 48px;
  padding: 0 20px 0 16px;
  gap: 10px;
  font-size: 1rem;
  border-radius: var(--r-btn);
}
.a-store img {
  flex: none;
  width: 22px;
  height: 22px;
}
.a-boxes {
  grid-column: 1 / -1;
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--sp-7);
  align-items: start;
  padding: var(--pad-panel);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(80% 120% at 100% 100%, oklch(0.45 0.12 145 / 0.28), transparent 60%),
    linear-gradient(170deg, oklch(0.23 0.03 156), oklch(0.16 0.02 158));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.07), 0 40px 100px -50px #000;
}
.a-boxes :is(h3, h4) {
  margin-top: -0.08em;
}
.a-boxes :is(h3, h4) {
  font-size: clamp(30px, 3.6vw, 48px);
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.aurora .a-boxes :is(h3, h4) + p {
  margin-top: 18px;
}
.a-ladder-wrap {
  position: relative;
  padding-top: clamp(90px, 9vw, 124px);
}
/* Memory falls, a review lifts it back to the top, and each fall is slower than the last. */
.a-curve {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: clamp(80px, 9vw, 120px);
  overflow: visible;
}
.a-ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  height: clamp(250px, 22vw, 300px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
  align-items: end;
}
.a-ladder li {
  position: relative;
  height: var(--h);
  min-height: 92px;
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  border-radius: 16px 16px 6px 6px;
  background: linear-gradient(180deg, oklch(0.5 0.12 148 / 0.8), oklch(0.32 0.07 152 / 0.55) 60%, oklch(0.22 0.03 156 / 0.35));
  border: 1px solid oklch(0.85 0.12 135 / 0.35);
  border-bottom: 0;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.3), 0 -10px 40px -14px oklch(0.8 0.17 140 / 0.5);
}
.a-ladder li.is-top {
  background: linear-gradient(180deg, var(--a-lime-hi), oklch(0.75 0.15 140 / 0.9) 40%, oklch(0.35 0.08 150 / 0.45));
  box-shadow: inset 0 1px 0 #fff, 0 -10px 60px -10px oklch(0.85 0.17 135 / 0.7);
}
.a-ladder small {
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--ink-2);
}
.a-ladder b {
  margin-top: 2px;
  white-space: nowrap;
  font-size: clamp(14px, 3.8vw, 22px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.a-ladder li.is-top small,
.a-ladder li.is-top b {
  color: #10200f;
}
.a-ladder-notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: 14px;
}
.a-ladder-notes .n-up {
  order: 2;
  font-size: 0.875rem;
  color: var(--a-ink-3);
}
.a-ladder-notes .n-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: italic 400 18px / 1.2 var(--a-serif);
  color: var(--a-coral);
}
.aurora .a-after-ladder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.875rem;
  color: var(--a-ink-3);
}
.a-after-ladder span {
  padding: 3px 10px;
  border-radius: 99px;
  border: 1px solid oklch(0.85 0.1 130 / 0.3);
  color: var(--a-lime);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 8. Tags, prompt chips and the ChatGPT shot */
.a-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 99px;
  font: 600 0.75rem / 1.45 var(--sans);
  letter-spacing: 0;
}
.a-tag.is-pro {
  color: var(--a-lime);
  background: oklch(0.45 0.1 140 / 0.3);
  border: 1px solid oklch(0.85 0.1 130 / 0.35);
}
.a-tag.is-free {
  color: #bfe6ff;
  background: oklch(0.45 0.08 230 / 0.3);
  border: 1px solid oklch(0.8 0.08 230 / 0.35);
}
.a-prompts {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.a-prompts li {
  padding: 12px 18px;
  border-radius: 999px;
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 600;
  color: var(--ink);
  background: oklch(0.3 0.045 230 / 0.55);
  border: 1px solid oklch(0.8 0.08 230 / 0.25);
}
/* The real ChatGPT crop (the prompt and the answer; its toolbar row is cut by the frame),
   at its own 845 px (text about 16 px), never larger. Where it would be narrower than 676 px
   (text under 13 px) the stage is hidden and the prompt chips carry the idea. */
.a-chat-shot {
  margin: 0 auto;
  width: 100%;
  max-width: 845px;
  aspect-ratio: 845 / 252;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--a-line-2);
  background: #000;
  box-shadow: 0 0 60px -14px oklch(0.6 0.1 230 / 0.45), 0 30px 60px -30px var(--a-depth);
}
.a-chat-shot img {
  width: 100%;
  max-width: 845px;
}

/* 8b. Feature spotlights (round 3): one feature per row, a big real screen on a lit stage,
   one bold headline with the serif accent, one promise, one proof line, one link. Rows
   alternate sides; the extension and ChatGPT rows are wide. */
.a-spot-list {
  display: grid;
  gap: var(--spot-gap);
}
.a-spot {
  --spot-phone: clamp(220px, 21vw, 300px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-7) clamp(32px, 5vw, 72px);
  align-items: center;
}
.a-spot.is-flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.a-spot.is-flip > .a-spot-copy {
  order: 2;
}
.aurora .a-spot-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font: 650 15px / 1.3 var(--sans);
  color: var(--a-lime);
}
.aurora .a-spot h3 {
  margin-top: var(--sp-4);
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1;
}
.aurora .a-spot-promise {
  margin-top: var(--sp-5);
  max-width: 34ch;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.45;
  color: var(--ink-2);
}
.aurora .a-spot-proof {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 44ch;
  margin-top: var(--sp-4);
  font-size: 15px;
  color: var(--a-ink-3);
}
.a-spot-proof svg {
  flex: none;
  margin-top: 3px;
  color: var(--a-lime);
}
.aurora .a-spot-links {
  margin-top: var(--sp-3);
  font-size: 1rem;
}
.a-spot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}
.a-spot-stage {
  --spot-glow: oklch(0.6 0.15 140 / 0.45);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
  padding: var(--pad-panel) var(--pad-panel) 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 80% at 50% 100%, var(--spot-glow), transparent 70%),
    linear-gradient(170deg, var(--a-card-top), var(--a-card-bot));
  box-shadow: inset 0 1px 0 var(--a-veil-2), 0 40px 100px -50px var(--a-depth);
}
.is-lime > .a-spot-stage { --spot-glow: oklch(0.6 0.15 140 / 0.45); }
.is-teal > .a-spot-stage { --spot-glow: oklch(0.55 0.1 190 / 0.45); }
.is-green > .a-spot-stage { --spot-glow: oklch(0.5 0.13 150 / 0.5); }
/* The phones: straight, bleeding off the stage's bottom edge; a back phone sits lower. */
.a-spot-stage > .a-phone {
  flex: none;
}
.a-spot-stage .a-phone {
  width: var(--spot-phone);
}
.a-spot-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: calc(var(--spot-phone) * 1.36);
  overflow: hidden;
}
.a-phone.is-back {
  margin-top: var(--sp-8);
  margin-inline-end: -48px;
  scale: 0.94;
  transform-origin: top;
}
.a-phone.is-lex {
  overflow: hidden;
}
/* Lex: the prompt and the story fill the frame, not the empty top of the chat. */
.a-phone.is-lex img {
  margin-top: -70%;
}
.aurora .a-spot-note {
  font: italic 400 clamp(17px, 1.35vw, 20px) / 1.2 var(--a-serif);
  color: var(--a-lime);
  text-align: center;
}
/* Wide rows: the copy and its actions side by side, the stage below at full width. */
.a-spot.is-wide {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
}
.a-spot.is-wide > .a-spot-stage {
  grid-column: 1 / -1;
  padding-bottom: var(--pad-panel);
}
.a-spot.is-wide .a-browser,
.a-spot.is-wide .a-desk {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
}
.a-spot-side {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
}
.a-spot-side .a-prompts {
  justify-content: flex-end;
  margin: 0;
}
.aurora .a-spot-note.is-top {
  text-align: end;
  padding-inline-end: 18%;
}
/* The desktop shortcut, under the browser in the same stage. */
.a-desk {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
  margin-top: var(--sp-5);
}
.a-desk-card {
  width: 100%;
  max-width: 240px;
  height: auto;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.aurora .a-desk-copy > p:last-child {
  margin-top: var(--sp-4);
  max-width: 40ch;
  font-size: 1.0625rem;
}
.a-keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  margin: 0;
}
.a-keyset {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.aurora .a-keys kbd {
  display: inline-grid;
  place-items: center;
  min-width: 56px;
  min-height: 56px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--a-line-2);
  background: var(--a-veil);
  box-shadow: inset 0 -3px 0 var(--a-line-2);
  font: 650 22px / 1 var(--sans);
  color: var(--ink);
}
.a-keyset small {
  margin-inline-start: var(--sp-1);
  font-size: 0.875rem;
  color: var(--a-ink-3);
}
/* Practice: the five boxes panel and one line of extra tools under the row. */
.a-spot.is-practice > .a-boxes,
.a-spot.is-practice > .a-also-line {
  grid-column: 1 / -1;
}
.a-spot.is-practice > .a-boxes {
  margin-top: 0;
  order: 3;
}
.a-spot.is-practice > .a-also-line {
  order: 4;
}
.aurora .a-also-line,
.aurora .a-also {
  max-width: 70ch;
  font-size: 1.0625rem;
  color: var(--ink-2);
}
.aurora .a-also {
  margin-top: var(--sp-8);
}
/* The ChatGPT stage only where the shot's text is 13 px or more. */
.a-spot.is-chat {
  container-type: inline-size;
}
@container (max-width: 760px) {
  .is-chat > .a-spot-stage {
    display: none;
  }
}

/* 9. Platforms */
/* The window and the phone, centred as one picture (a grid, not a padding trick). */
.a-devices {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 600px) clamp(130px, 19vw, 220px);
  justify-content: center;
  align-items: end;
  margin-bottom: var(--sp-7);
}
.a-devices::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 90%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, oklch(0.6 0.15 148 / 0.32), oklch(0.5 0.12 150 / 0.08) 60%, transparent);
}
.a-window {
  position: relative;
  margin: 0;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
  background: oklch(0.96 0.012 95);
  border: 1px solid var(--a-line-2);
  box-shadow: 0 0 0 1px var(--a-depth), 0 0 100px -30px oklch(0.75 0.16 145 / 0.55), 0 50px 100px -40px var(--a-depth);
}
.a-window-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: oklch(0.9 0.012 120);
  color: #3a4a3e;
  font-size: 0.8125rem;
  font-weight: 600;
}
.a-window-bar .a-dots i:nth-child(1) { background: #ff5f57; }
.a-window-bar .a-dots i:nth-child(2) { background: #febc2e; }
.a-window-bar .a-dots i:nth-child(3) { background: #28c840; }
.a-window img {
  width: 100%;
}
.a-d-phone {
  z-index: 2;
  width: clamp(130px, 19vw, 220px);
  margin-left: calc(clamp(130px, 19vw, 220px) * -0.45);
  margin-bottom: 0;
}
.aurora .pwall-wrap {
  margin-top: 0;
  padding: var(--pad-panel);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--a-card-top), var(--a-card-bot));
}
/* One tile style for Lexpad's own glyphs; real logos keep their neutral tile. Equal rows. */
.aurora .pwall {
  gap: var(--gap-list);
  grid-auto-rows: 1fr;
}
.aurora .pwall .gtile:not(.is-logo) {
  color: var(--a-lime);
  background: var(--a-tile);
}
.aurora .pwall-head h3 {
  font-size: clamp(24px, 2.6vw, 32px);
}
.aurora .pw {
  padding: var(--pad-item);
  border-radius: var(--r-md);
  border-color: var(--line);
  background: var(--a-veil);
  transition: background 0.2s, border-color 0.2s, transform 0.25s var(--a-ease);
}
.aurora a.pw:hover {
  background: var(--a-veil-2);
  border-color: var(--accent-line);
  transform: translateY(-2px);
}
.aurora .pw.is-soon {
  background: transparent;
}
.aurora .pw-ok {
  color: #10200f;
  background: var(--a-lime);
}
.aurora .h-wall-more {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-6);
}

/* 10. Pricing (the shared plan markup, restyled) */
.a-pricing {
  background: radial-gradient(60% 40% at 50% 30%, oklch(0.32 0.07 150 / 0.35), transparent 70%);
}
.aurora .a-pricing .section-head {
  align-items: end;
  margin-bottom: var(--head-gap);
}
/* Plans share their rows (subgrid): names, prices, lists and buttons line up; the
   "Best value" chip sits on the card's top edge, out of the flow. */
.aurora .plans {
  gap: var(--gap-grid);
  grid-template-rows: repeat(6, auto);
  row-gap: 0;
}
.aurora .plan {
  position: relative;
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  padding: var(--pad-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--a-card-top), var(--a-card-bot));
  box-shadow: inset 0 1px 0 var(--a-veil-2), 0 30px 60px -40px var(--a-depth);
}
.aurora .plan > .plan-name { grid-row: 1; }
.aurora .plan > .price { grid-row: 2; }
.aurora .plan > .per { grid-row: 3; }
.aurora .plan > .yearly-comparison { grid-row: 4; }
.aurora .plan > .plan-list { grid-row: 5; }
.aurora .plan > .plan-cta { grid-row: 6; align-self: end; }
.aurora .plan-name {
  font-size: 1.125rem;
  color: var(--ink-2);
}
.aurora .price {
  font-size: clamp(52px, 5vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
}
.aurora .price small {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--a-ink-3);
}
.aurora .per {
  margin-top: 8px;
  color: var(--a-ink-3);
}
.aurora .plan-list {
  list-style: none;
  padding: 0;
  margin-block: 26px 28px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.aurora .plan-list li {
  position: relative;
  margin: 0;
  padding-left: 30px;
  font-size: 0.97rem;
  color: var(--ink-2);
}
.aurora .plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: oklch(0.5 0.11 150 / 0.35) url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%23d5ebb1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.aurora .plan-cta {
  width: 100%;
}
.aurora .plan.featured {
  padding-top: var(--pad-card);
  overflow: visible;
  border: 1px solid var(--a-lime);
  background: linear-gradient(170deg, oklch(0.26 0.04 152), oklch(0.18 0.022 158));
  box-shadow: 0 0 0 1px var(--a-lime), 0 30px 80px -40px oklch(0.8 0.15 140 / 0.5);
}
.aurora .yearly-banner {
  position: absolute;
  top: -14px;
  inset-inline-start: var(--pad-card);
  display: inline-flex;
  margin: 0;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--a-lime);
}
.aurora .yearly-banner > span {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--a-on-lime);
}
.aurora .yearly-comparison {
  margin-top: var(--sp-3);
  padding: 0;
  border: 0;
}
.aurora .yearly-comparison > span {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.aurora .a-pricing .note {
  margin-block: var(--sp-5) 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--a-ink-3);
}
/* Trust: one quiet line of three items, not a second row of cards. */
.aurora .h-trust-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-list) var(--sp-6);
  margin-top: var(--sp-5);
  padding-top: 0;
  border-top: 0;
}
.aurora .h-trust-block p {
  max-width: 36ch;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.9375rem;
  color: var(--a-ink-3);
}

/* 11. FAQ */
.aurora .faq-group-title {
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--a-lime);
}
.aurora .faq details,
.aurora .faq-group details:first-of-type {
  border-color: var(--line);
}
.aurora .faq summary {
  padding-block: 16px;
  font-size: clamp(17px, 1.5vw, 19px);
  letter-spacing: -0.01em;
}
.aurora .faq summary::after {
  border: 1px solid var(--a-line-2);
  background:
    linear-gradient(var(--a-lime), var(--a-lime)) center / 10px 2px no-repeat,
    linear-gradient(var(--a-lime), var(--a-lime)) center / 2px 10px no-repeat;
}
.aurora .faq-group summary:hover {
  color: var(--a-lime-hi);
}
.aurora .faq-group summary:hover::after,
.aurora .faq-group details[open] summary::after {
  background:
    linear-gradient(#10200f, #10200f) center / 10px 2px no-repeat,
    linear-gradient(#10200f, #10200f) center / 2px 10px no-repeat,
    var(--a-lime);
}
.aurora .faq-group summary:focus-visible {
  outline: 3px solid var(--a-lime);
  outline-offset: 3px;
}

/* 12. The phone "Start free" bar: only after the hero's own button has scrolled away. In
   its own place after the FAQ it ends, so it never covers the last question or the footer. */
.a-sticky {
  display: none;
}
@media (max-width: 767px) {
  .a-sticky {
    display: flex;
    align-items: flex-end;
    position: sticky;
    bottom: 0;
    z-index: 40;
    height: calc(68px + env(safe-area-inset-bottom));
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    pointer-events: none;
  }
  .aurora .a-sticky a {
    pointer-events: auto;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: 16px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    color: #10200f;
    background: linear-gradient(180deg, var(--a-lime-hi), var(--a-lime));
    box-shadow: 0 0 0 1px oklch(0.9 0.1 130 / 0.5), 0 10px 40px -6px oklch(0.8 0.17 140 / 0.6), 0 0 0 6px oklch(0.145 0.018 158 / 0.6);
  }
  .aurora .faq {
    padding-bottom: 24px;
  }
  @supports (timeline-scope: --a) {
    body {
      timeline-scope: --a-hero-cta;
    }
    .a-hero .primary {
      view-timeline: --a-hero-cta block;
    }
    .a-sticky a {
      animation: a-bar-in linear both;
      animation-timeline: --a-hero-cta;
      animation-range: exit 0% exit 100%;
    }
  }
  .js-sticky .a-sticky a {
    visibility: hidden;
    opacity: 0;
    translate: 0 24px;
    transition: opacity 0.3s, translate 0.35s var(--a-ease), visibility 0s 0.35s;
  }
  .js-sticky .a-sticky.is-shown a {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    transition: opacity 0.3s, translate 0.35s var(--a-ease);
  }
}
@keyframes a-bar-in {
  from { visibility: hidden; opacity: 0; translate: 0 24px; }
  to { visibility: visible; opacity: 1; translate: 0 0; }
}
@keyframes a-bar-in-still {
  from { visibility: hidden; opacity: 0; }
  to { visibility: visible; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .a-sticky a {
    animation-name: a-bar-in-still !important;
  }
  .js-sticky .a-sticky a {
    translate: none !important;
  }
}

/* 13. Closing */
.a-close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(88px, 11vw, 160px) 0;
  text-align: center;
  background: radial-gradient(70% 60% at 50% 45%, oklch(0.3 0.07 150), var(--a-ground) 72%);
}
.a-close .a-b1 { top: auto; bottom: -26vmax; }
.a-close .a-b2 { top: auto; bottom: -20vmax; }
.a-close .a-b4 { top: auto; bottom: -10vmax; }
.a-close-in {
  position: relative;
  z-index: 2;
}
.aurora .a-close h2 {
  max-width: 13ch;
  margin-inline: auto;
  font-size: clamp(44px, 7.4vw, 108px);
  letter-spacing: -0.055em;
}
.aurora .a-close p {
  margin: 24px auto 34px;
  font-size: clamp(17px, 1.8vw, 21px);
}

/* 14. Footer */
.site-footer {
  margin-top: 0;
  background: oklch(0.12 0.015 158);
  border-top-color: var(--line);
}
.fh,
.flangs-label {
  color: var(--ink);
}
.flist a,
.copyright,
.copyright a,
.fbrand-id p,
.marks-note {
  color: var(--dim);
}
.flist a:hover,
.copyright a:hover {
  color: var(--ink);
}
.marks-note a {
  color: var(--ink-2);
}

/* 15. Motion. Nothing moves with reduced motion; the switch and off-screen sections stop the loops. */
@media (prefers-reduced-motion: no-preference) {
  .motion-off {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .motion-toggle {
    display: inline-flex;
  }
  html {
    scroll-behavior: smooth;
  }

  /* Loop 1: the aurora. */
  .a-b1 { animation: a-drift1 26s ease-in-out infinite alternate; }
  .a-b2 { animation: a-drift2 32s ease-in-out infinite alternate; }
  .a-b3 { animation: a-drift3 22s ease-in-out infinite alternate; }
  .a-b4 { animation: a-drift2 38s ease-in-out infinite alternate-reverse; }
  .a-beam { animation: a-beam 9s ease-in-out infinite alternate; }
  /* Loop 2: the hero's word chips float. */
  .a-chip { animation: a-float 7s ease-in-out infinite alternate; }
  .a-c2 { animation-duration: 8.5s; animation-delay: -2s; }
  .a-c3 { animation-duration: 9s; animation-delay: -4s; }
  .a-c4 { animation-duration: 7.5s; animation-delay: -1s; }
  .a-c5 { animation-duration: 10s; animation-delay: -3s; }
  .a-c6 { animation-duration: 8s; animation-delay: -5s; }
  /* Loop 3: the language river. */
  .a-river-row { animation: a-river 46s linear infinite; }

  .is-off .a-blob,
  .is-off .a-beam,
  .is-off .a-chip,
  .is-off .a-river-row,
  html.is-still .a-blob,
  html.is-still .a-beam,
  html.is-still .a-chip,
  html.is-still .a-river-row,
  body:has(.motion-off:checked) .a-blob,
  body:has(.motion-off:checked) .a-beam,
  body:has(.motion-off:checked) .a-chip,
  body:has(.motion-off:checked) .a-river-row {
    animation-play-state: paused;
  }

  /* The page-load moment: copy rises, phones arrive. No blur on the headline (it is the LCP). */
  /* The headline and the main phone are the largest paint: they move in but are never transparent. */
  .a-hero-copy > * { animation: a-rise 0.8s var(--a-ease) both; }
  .a-hero-copy > h1 { animation-name: a-rise-solid; }
  .a-hero-copy > :nth-child(2) { animation-delay: 0.05s; }
  .a-hero-copy > :nth-child(3) { animation-delay: 0.12s; }
  .a-hero-copy > :nth-child(4) { animation-delay: 0.18s; }
  .a-hero-copy > :nth-child(5) { animation-delay: 0.24s; }
  .a-p-main { animation: a-up-solid 1s var(--a-ease) both; }
  .a-p-side { animation: a-up 1.1s 0.3s var(--a-ease) both; }

  /* Sections rise into view (site-v5.js; never without it, never for long). */
  .js-reveal [data-reveal] {
    transition: opacity 0.8s var(--a-ease), translate 0.8s var(--a-ease);
  }
  .js-reveal [data-reveal]:not(.is-in) {
    opacity: 0;
    translate: 0 28px;
  }
  .js-reveal .a-steps [data-reveal]:nth-child(2),
  .js-reveal .a-spot > .a-spot-stage {
    transition-delay: 0.08s;
  }
  .js-reveal .a-steps [data-reveal]:nth-child(3) {
    transition-delay: 0.16s;
  }
  .js-reveal .a-curve-line {
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    transition: stroke-dashoffset 2.2s 0.3s var(--a-ease);
  }
  .js-reveal .a-boxes.is-in .a-curve-line {
    stroke-dashoffset: 0;
  }
  .js-reveal .a-ladder li {
    transform-origin: bottom;
    transition: scale 0.9s var(--a-ease), opacity 0.9s;
  }
  .js-reveal .a-boxes:not(.is-in) .a-ladder li {
    scale: 1 0.25;
    opacity: 0.3;
  }
  .js-reveal .a-ladder li:nth-child(2) { transition-delay: 0.08s; }
  .js-reveal .a-ladder li:nth-child(3) { transition-delay: 0.16s; }
  .js-reveal .a-ladder li:nth-child(4) { transition-delay: 0.24s; }
  .js-reveal .a-ladder li:nth-child(5) { transition-delay: 0.32s; }
}
@keyframes a-drift1 { to { transform: translate(14vmax, 6vmax) scale(1.1); } }
@keyframes a-drift2 { to { transform: translate(-12vmax, 8vmax) scale(1.15); } }
@keyframes a-drift3 { to { transform: translate(-10vmax, -4vmax) scale(1.25); } }
@keyframes a-beam { from { opacity: 0.65; } to { opacity: 1; } }
@keyframes a-float { from { translate: 0 0; } to { translate: 0 -14px; } }
@keyframes a-river { to { transform: translateX(-100%); } }
@keyframes a-rise { from { opacity: 0; translate: 0 14px; } }
@keyframes a-up { from { opacity: 0; translate: 0 80px; } }
@keyframes a-rise-solid { from { translate: 0 14px; } }
@keyframes a-up-solid { from { translate: 0 48px; } }

/* 16. Responsive */
@media (max-width: 960px) {
  .a-boxes {
    grid-template-columns: minmax(0, 1fr);
  }
  .a-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .aurora .plans {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: var(--gap-grid);
    max-width: 560px;
    margin-inline: auto;
  }
  .aurora .plan {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }
  .aurora .plan > .plan-cta {
    margin-top: auto;
  }
  .aurora .plan.featured {
    margin-top: 14px;
  }
  .a-spot,
  .a-spot.is-wide {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
  .a-spot.is-flip > .a-spot-copy {
    order: 0;
  }
  .a-spot.is-flip {
    grid-template-columns: minmax(0, 1fr);
  }
  .a-spot-side {
    justify-self: start;
    align-items: flex-start;
  }
  .a-spot-side .a-prompts {
    justify-content: flex-start;
  }
  .a-spot {
    --spot-phone: min(56vw, 300px);
  }
  .aurora .a-spot-note.is-top {
    padding-inline-end: 0;
    text-align: center;
  }
  .a-desk {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .a-keys {
    justify-content: center;
  }
  .aurora .a-desk-copy > p:last-child {
    margin-inline: auto;
  }
}
@media (max-width: 700px) {
  :root {
    --header-h: 70px;
  }
  .site-header {
    padding-top: 8px;
  }
  .site-header::before {
    inset: 8px max(0px, calc(var(--gutter) - 12px)) 0;
    border-radius: 18px;
  }
  .a-hero-copy {
    padding-top: 28px;
  }
  .a-news {
    font-size: 0.8125rem;
  }
  .a-hero h1 {
    margin-top: 20px;
    font-size: clamp(44px, 13.6vw, 72px);
  }
  .aurora .a-lede {
    max-width: 36ch;
    font-size: 17px;
  }
  .a-hero .a-ctas {
    gap: 6px;
  }
  .a-hero .a-ctas .button {
    width: 100%;
  }
  .a-hero .a-ctas .secondary {
    min-height: 48px;
    border-color: transparent;
    background: none;
    color: var(--ink-2);
    font-size: 1rem;
  }
  .aurora .a-trust {
    margin-top: 6px;
    font-size: 0.8125rem;
  }
  .a-stage {
    height: min(124vw + 52px, 592px);
    margin-top: 28px;
  }
  .a-p-main {
    width: 58vw;
  }
  .a-p-side {
    width: 42vw;
    margin-top: 52px;
  }
  .a-p-left {
    margin-right: -22vw;
  }
  .a-p-right {
    margin-left: -22vw;
  }
  .a-chip {
    padding: 7px 12px;
    font-size: 14px;
    border-radius: 12px;
  }
  /* Phones: one chip and the note in a row above the phones, clear of every screen. */
  .a-phones {
    top: 52px;
  }
  .a-c1 { left: 3%; top: 6px; }
  .aurora .a-note {
    top: 2px;
    left: auto;
    right: 4%;
    width: 24ch;
    font-size: 15px;
    text-align: right;
  }
  .a-note-arrow {
    display: none;
  }
  .a-c2,
  .a-c3,
  .a-c4,
  .a-c5,
  .a-c6 {
    display: none;
  }
  .a-spot {
    --spot-phone: min(60vw, 280px);
  }
  .a-phone.is-back {
    margin-inline-end: -30%;
    margin-top: var(--sp-6);
  }
  .aurora .pwall {
    grid-auto-rows: auto;
  }
  .aurora .a-keys kbd {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    font-size: 18px;
  }
  .a-ladder {
    height: 280px;
    gap: 4px;
  }
  .a-ladder li {
    min-height: 74px;
    padding: 12px 4px;
    border-radius: 12px 12px 4px 4px;
  }
  .a-ladder small {
    font-size: 0.72rem;
  }
  .a-ladder b {
    font-size: clamp(11px, 3.4vw, 22px);
  }
  .a-devices {
    grid-template-columns: minmax(0, 1fr) 34vw;
  }
  .a-d-phone {
    width: 34vw;
    margin-left: -14vw;
    margin-bottom: 0;
  }
  .a-screen {
    padding: 6px;
    border-radius: var(--r-lg);
  }
  .a-screen .film-screen {
    border-radius: 22px;
  }
  .a-screen-bar {
    padding: 4px 8px 8px;
  }
  .a-screen .film-start,
  .a-screen .film-sound {
    inset: auto auto 12px 12px;
    padding: 6px;
  }
  /* Visually hidden, still the buttons' accessible names. */
  .a-screen .film-start > span:not(.film-play-icon),
  .a-screen .film-sound > span:not(.film-play-icon) {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .a-screen .film-play-icon {
    width: 52px;
    height: 52px;
  }
}
.site-nav > a.nav-login {
  white-space: nowrap;
}
/* Phones: the bar at the bottom carries "Start free"; the header keeps Log in. */
@media (max-width: 640px) {
  .site-nav .pill {
    display: none;
  }
}
@media (max-width: 359px) {
  /* The smallest phones: the mark alone (its link keeps the name "Lexpad home"), so Log in fits on one line. */
  .site-header .logo {
    font-size: 0;
    gap: 0;
  }
}
@media (max-width: 360px) {
  .a-boxes {
    padding: 22px 14px;
  }
  .aurora .button {
    padding: 0 16px;
    font-size: 1rem;
  }
}
@media (min-width: 1100px) and (max-height: 960px) {
  .a-hero h1 {
    font-size: clamp(48px, 6.4vw, 96px);
  }
}
@media (min-width: 1100px) and (max-height: 760px) {
  .a-hero-copy {
    padding-top: 12px;
  }
  .a-hero h1 {
    margin-top: 16px;
    font-size: clamp(48px, 5.2vw, 80px);
  }
  .aurora .a-lede {
    margin-top: 14px;
  }
}
@media (min-width: 1800px) {
  :root {
    --a-wrap: 1320px;
  }
  .a-hero h1 {
    font-size: clamp(104px, 5.6vw, 150px);
  }
  .a-p-main {
    width: 350px;
  }
  .a-p-side {
    width: 280px;
  }
  .a-stage {
    height: 680px;
  }
}
@media (forced-colors: active) {
  .a-h1-a,
  .aurora .a-h1-b,
  .aurora h1 em,
  .aurora h2 em,
  .aurora h3 em,
  .aurora h4 em {
    -webkit-text-fill-color: CanvasText;
    background: none;
  }
}
@media print {
  .a-sky,
  .a-chips,
  .a-river-track,
  .a-sticky,
  .motion-toggle {
    display: none;
  }
}

/* 17. Aurora light (owner, 2026-10-09: home follows the system). The same page on paper with
   forest-green accents; every text pair checked for WCAG 2.2 AA (designer's round 3 review).
   Lime is never text or a focus ring here. Phone bezels stay dark: real phones are. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --a-ground: oklch(0.975 0.012 125);
    --ink: oklch(0.24 0.03 155);
    --ink-2: oklch(0.38 0.025 155);
    --dim: oklch(0.49 0.022 155);
    --a-ink-3: oklch(0.49 0.022 155);
    --a-lime: oklch(0.46 0.12 150);
    --a-lime-hi: oklch(0.4 0.11 152);
    --a-coral: oklch(0.53 0.15 35);
    --accent: oklch(0.46 0.12 150);
    --accent-ink: oklch(0.46 0.12 150);
    --accent-line: oklch(0.46 0.12 150 / 0.35);
    --line: oklch(0.24 0.03 155 / 0.11);
    --line-soft: oklch(0.24 0.03 155 / 0.07);
    --a-line-2: oklch(0.24 0.03 155 / 0.16);
    --glass: oklch(0.99 0.006 125 / 0.72);
    --a-card-top: oklch(0.995 0.006 125);
    --a-card-bot: oklch(0.975 0.012 130);
    --a-veil: oklch(0.24 0.03 155 / 0.035);
    --a-veil-2: oklch(0.24 0.03 155 / 0.06);
    --a-depth: oklch(0.35 0.05 155 / 0.22);
    --a-on-lime: #fff;
    --a-primary: linear-gradient(180deg, oklch(0.52 0.13 148), oklch(0.45 0.115 152));
    --a-em: linear-gradient(100deg, oklch(0.4 0.11 152), oklch(0.5 0.14 140));
    --a-h1: linear-gradient(180deg, oklch(0.2 0.03 155) 20%, oklch(0.32 0.04 150));
    --a-chip-bg: oklch(1 0 0 / 0.85);
    --a-tile: oklch(0.93 0.04 135);
    --chip-beta-bg: oklch(0.93 0.06 85);
    --chip-beta-ink: oklch(0.42 0.09 70);
  }
  :focus-visible,
  .motion-off:focus-visible + .motion-toggle,
  .aurora .faq-group summary:focus-visible {
    outline-color: oklch(0.46 0.12 150);
  }
  .skip-link {
    background: oklch(0.46 0.12 150);
    color: #fff;
  }
  .site-header::before {
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.6), 0 12px 40px -18px var(--a-depth);
  }
  .site-nav > a:not(.pill):hover {
    background: var(--a-veil-2);
  }
  .dl-panel {
    background: oklch(0.995 0.006 125);
    box-shadow: 0 30px 80px -20px var(--a-depth);
  }
  .aurora .primary,
  .site-nav .pill,
  .site-nav .pill:hover,
  .aurora .a-sticky a {
    color: #fff;
    background: var(--a-primary);
    box-shadow: 0 1px 0 oklch(1 0 0 / 0.25) inset, 0 10px 30px -10px oklch(0.45 0.12 150 / 0.55);
  }
  .aurora .primary:hover,
  .site-nav .pill:hover {
    color: #fff;
    background: oklch(0.4 0.11 152);
    box-shadow: 0 16px 40px -12px oklch(0.45 0.12 150 / 0.6);
  }
  .aurora .secondary {
    background: oklch(1 0 0 / 0.7);
  }
  .aurora .secondary:hover {
    background: #fff;
  }
  /* Hero sky: mint aurora, white beam, no stars, a dark fine grain. */
  .a-hero {
    background: radial-gradient(120% 70% at 50% 0%, oklch(0.93 0.05 140), var(--a-ground) 70%);
  }
  .a-hero::before {
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .a-b1 { background: radial-gradient(closest-side, oklch(0.85 0.1 150 / 0.55), transparent 70%); }
  .a-b2 { background: radial-gradient(closest-side, oklch(0.9 0.11 125 / 0.5), transparent 70%); }
  .a-b3 { background: radial-gradient(closest-side, oklch(0.88 0.06 190 / 0.35), transparent 70%); }
  .a-b4 { background: radial-gradient(closest-side, oklch(0.9 0.07 40 / 0.25), transparent 70%); }
  .a-beam {
    background: conic-gradient(from 180deg at 50% 0%, transparent 162deg, oklch(1 0 0 / 0.35) 176deg, oklch(1 0 0 / 0.75) 180deg, oklch(1 0 0 / 0.35) 184deg, transparent 198deg);
  }
  .a-stars {
    display: none;
  }
  .a-horizon {
    background: radial-gradient(closest-side, oklch(0.8 0.12 145 / 0.45), oklch(0.85 0.08 140 / 0.15) 45%, transparent);
  }
  .a-horizon::before {
    background: linear-gradient(90deg, transparent, oklch(0.55 0.12 150 / 0.6), transparent);
    box-shadow: 0 0 30px 6px oklch(0.8 0.12 145 / 0.4);
  }
  .a-news {
    background: oklch(1 0 0 / 0.8);
    box-shadow: 0 0 30px -12px oklch(0.6 0.12 145 / 0.5);
  }
  .aurora .a-news:hover {
    color: var(--ink);
  }
  .a-news b {
    color: #fff;
    background: var(--a-primary);
  }
  .aurora .a-h1-b {
    background: var(--a-em);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .a-phone {
    box-shadow:
      inset 0 0 0 1px oklch(1 0 0 / 0.16),
      0 0 0 1px oklch(0 0 0 / 0.5),
      0 0 60px -8px oklch(0.7 0.12 145 / 0.35),
      0 50px 90px -30px var(--a-depth);
  }
  .a-chip {
    color: var(--ink);
    background: var(--a-chip-bg);
    border-color: oklch(0.46 0.12 150 / 0.25);
    box-shadow: 0 18px 40px -16px var(--a-depth);
  }
  .a-c2 {
    color: var(--a-lime);
  }
  .a-c4 {
    color: var(--a-coral);
    border-color: oklch(0.53 0.15 35 / 0.3);
  }
  .a-updated {
    text-decoration-color: oklch(0.46 0.12 150 / 0.4);
  }
  /* The language river */
  .a-river {
    background: linear-gradient(180deg, transparent, oklch(0.955 0.02 135) 40%, var(--a-ground));
  }
  .a-river-row span {
    background: oklch(1 0 0 / 0.7);
    border-color: var(--line);
  }
  .a-river-row span:nth-child(3n) {
    border-color: oklch(0.46 0.12 150 / 0.3);
  }
  .a-river-row span:nth-child(4n) {
    color: var(--ink);
  }
  .motion-toggle {
    background: oklch(1 0 0 / 0.7);
  }
  .motion-toggle:hover {
    background: #fff;
  }
  .knob {
    background: oklch(0.24 0.03 155 / 0.2);
  }
  .knob::after {
    background: #fff;
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.2);
  }
  .motion-off:checked + .motion-toggle .knob {
    background: oklch(0.46 0.12 150);
  }
  .motion-off:checked + .motion-toggle .knob::after {
    background: #fff;
  }
  /* Cards, steps, stages */
  .aurora .a-kicker {
    background: oklch(0.93 0.04 135);
    border-color: oklch(0.46 0.12 150 / 0.22);
  }
  .a-card,
  .a-step,
  .aurora .plan {
    box-shadow: 0 1px 2px oklch(0.3 0.04 155 / 0.06), 0 24px 48px -32px var(--a-depth);
  }
  .a-card::before,
  .a-step::before {
    background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), oklch(0.6 0.12 145 / 0.08), transparent 60%);
  }
  .a-num,
  .aurora .a-screen .film-play-icon {
    color: #fff;
    background: var(--a-primary);
    box-shadow: 0 10px 24px -10px oklch(0.45 0.12 150 / 0.6);
  }
  .a-dots i {
    background: oklch(0.24 0.03 155 / 0.18);
  }
  .is-lime > .a-spot-stage { --spot-glow: oklch(0.88 0.1 140 / 0.7); }
  .is-teal > .a-spot-stage { --spot-glow: oklch(0.88 0.06 190 / 0.7); }
  .is-green > .a-spot-stage { --spot-glow: oklch(0.85 0.09 150 / 0.7); }
  .a-spot-stage {
    box-shadow: 0 1px 2px oklch(0.3 0.04 155 / 0.06), 0 40px 100px -50px var(--a-depth);
  }
  /* Film: the frame is a card; the player stays a black screen. */
  .a-screen {
    background: linear-gradient(170deg, var(--a-card-top), var(--a-card-bot));
    box-shadow: 0 0 0 1px var(--line), 0 0 120px -40px oklch(0.7 0.12 145 / 0.5), 0 60px 120px -60px var(--a-depth);
  }
  .a-screen .film-start,
  .a-screen .film-sound {
    background: oklch(1 0 0 / 0.9);
  }
  .a-screen .film-start strong,
  .a-screen .film-sound strong {
    color: var(--ink);
  }
  .a-screen .film-start small,
  .a-screen .film-sound small {
    color: var(--ink-2);
  }
  /* Browser frame */
  .a-browser {
    background: oklch(0.93 0.012 130);
    box-shadow: 0 0 0 1px var(--line), 0 0 140px -50px oklch(0.7 0.12 145 / 0.45), 0 60px 120px -60px var(--a-depth);
  }
  .a-url {
    background: oklch(1 0 0 / 0.8);
  }
  /* Tags and prompts */
  .a-tag.is-pro {
    color: #0d4a22;
    background: #ddeed4;
    border-color: oklch(0.46 0.12 150 / 0.3);
  }
  .a-tag.is-free {
    color: #00537e;
    background: #d5ecf8;
    border-color: oklch(0.5 0.1 235 / 0.3);
  }
  .a-prompts li {
    color: var(--ink);
    background: oklch(0.95 0.025 220);
    border-color: oklch(0.5 0.08 230 / 0.25);
  }
  .a-chat-shot {
    box-shadow: 0 0 60px -20px oklch(0.6 0.1 230 / 0.35), 0 30px 60px -30px var(--a-depth);
  }
  /* The five boxes */
  .a-boxes {
    background:
      radial-gradient(80% 120% at 100% 100%, oklch(0.88 0.08 145 / 0.6), transparent 60%),
      linear-gradient(170deg, var(--a-card-top), oklch(0.96 0.02 135));
    box-shadow: 0 1px 2px oklch(0.3 0.04 155 / 0.06), 0 40px 100px -50px var(--a-depth);
  }
  .a-ladder li {
    background: linear-gradient(180deg, oklch(0.86 0.09 145), oklch(0.92 0.05 140) 60%, oklch(0.96 0.02 130 / 0.6));
    border-color: oklch(0.5 0.1 150 / 0.3);
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.7), 0 -10px 40px -18px oklch(0.6 0.15 145 / 0.4);
  }
  .a-ladder li.is-top {
    background: linear-gradient(180deg, oklch(0.52 0.13 148), oklch(0.45 0.115 152));
    box-shadow: 0 -10px 50px -12px oklch(0.6 0.15 145 / 0.5);
  }
  .a-ladder li.is-top small,
  .a-ladder li.is-top b {
    color: #fff;
  }
  .a-curve stop:nth-child(1) { stop-color: oklch(0.6 0.15 35); }
  .a-curve stop:nth-child(2) { stop-color: oklch(0.55 0.13 145); }
  .a-curve stop:nth-child(3) { stop-color: oklch(0.42 0.11 152); }
  .a-after-ladder span {
    border-color: oklch(0.46 0.12 150 / 0.3);
  }
  /* Platforms */
  .a-devices::before {
    background: radial-gradient(closest-side, oklch(0.85 0.1 148 / 0.5), oklch(0.9 0.06 150 / 0.15) 60%, transparent);
  }
  .a-window {
    box-shadow: 0 0 0 1px var(--line), 0 0 100px -40px oklch(0.7 0.12 145 / 0.45), 0 50px 100px -50px var(--a-depth);
  }
  .aurora .pw-ok {
    color: #fff;
    background: oklch(0.46 0.12 150);
  }
  /* Pricing */
  .a-pricing {
    background: radial-gradient(60% 40% at 50% 30%, oklch(0.92 0.05 145 / 0.6), transparent 70%);
  }
  .aurora .plan.featured {
    border: 2px solid oklch(0.45 0.115 152);
    background: linear-gradient(170deg, var(--a-card-top), var(--a-card-bot));
    box-shadow: 0 30px 80px -40px oklch(0.45 0.12 150 / 0.45);
  }
  .aurora .yearly-banner {
    background: var(--a-primary);
  }
  .aurora .yearly-banner > span {
    color: #fff;
  }
  .aurora .plan-list li::before {
    background: oklch(0.93 0.04 135) url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%230f6a31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  }
  /* FAQ */
  .aurora .faq-group summary:hover::after,
  .aurora .faq-group details[open] summary::after {
    background:
      linear-gradient(#fff, #fff) center / 10px 2px no-repeat,
      linear-gradient(#fff, #fff) center / 2px 10px no-repeat,
      oklch(0.46 0.12 150);
  }
  /* The phone bar, the closing and the footer */
  .aurora .a-sticky a {
    box-shadow: 0 10px 30px -10px oklch(0.45 0.12 150 / 0.55), 0 0 0 6px oklch(0.975 0.012 125 / 0.7);
  }
  .a-close {
    background: radial-gradient(70% 60% at 50% 45%, oklch(0.9 0.07 145), var(--a-ground) 72%);
  }
  .site-footer {
    background: oklch(0.955 0.014 130);
  }
}
@media (prefers-color-scheme: light) and (prefers-reduced-transparency: reduce) {
  .site-header::before {
    background: oklch(0.99 0.006 125);
  }
}

/* Brand line inside the home H1 (2026-10-20): names Lexpad and what it is, for people and search engines. */
.a-hero h1 .a-brandline {
  display: block;
  margin: 0 0 20px;
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--a-lime-hi);
}

/* 18. Feature posters (2026-10-20, owner-approved App Store style; shared .poster in styles.css).
   Each phone feature row is one poster: pill label, two-line headline with the second half in
   Lexpad green, one sub-line, the proof and the link, and the device art (a real, whole screen
   in a clean iPhone frame; nothing lifted, owner 2026-10-20) at the foot. Grounds alternate
   forest / mint down the page in both schemes; the art is transparent, so it sits on either. */
.a-spot.has-poster {
  display: block;
}
.aurora .a-poster :is(h2, h3) {
  margin-top: 0.45em;
  color: var(--p-ink);
  font-size: clamp(2.05rem, 1.2rem + 3.2vw, 3.6rem);
  font-weight: 790;
  line-height: 0.98;
  letter-spacing: -0.042em;
}
.aurora .a-poster :is(h2, h3) em {
  display: block;
  padding: 0;
  font-family: var(--sans);
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--p-em);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.aurora .a-poster .poster-sub {
  color: var(--p-sub);
}
.aurora .a-poster .a-spot-proof {
  justify-content: center;
  margin-top: var(--sp-4);
  color: var(--p-sub);
  text-align: start;
}
.a-poster .a-spot-proof svg {
  color: var(--p-em);
}
.aurora .a-poster .a-spot-links {
  margin-top: var(--sp-2);
}
.aurora .a-poster .a-link {
  color: var(--p-link);
}
.a-poster .pill .a-tag {
  padding: 1px 8px;
  border: 1px solid currentColor;
  background: none;
  color: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.a-poster .poster-art {
  width: min(100%, 460px);
}
.a-spot.is-practice > .a-boxes {
  margin-top: var(--spot-gap);
}
@media (min-width: 961px) {
  .a-poster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    justify-items: stretch;
    column-gap: clamp(24px, 4vw, 64px);
    padding: 0 clamp(32px, 4vw, 72px);
    text-align: start;
  }
  .a-poster .poster-copy {
    align-self: center;
    justify-items: start;
    padding-block: 64px;
  }
  .aurora .a-poster .a-spot-proof {
    justify-content: flex-start;
  }
  .a-poster .poster-art {
    justify-self: center;
    width: min(100%, 520px);
    margin-top: 56px;
  }
  .a-poster.is-flip .poster-copy {
    order: 2;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .a-poster > .poster-art {
    transition-delay: 0.08s;
  }
}
.aurora .poster .pill {
  color: var(--p-pill);
}
.aurora .a-poster .a-spot-links {
  color: var(--p-sub);
}

/* 19. One notebook, on every device (2026-10-20): one picture of the device family, the same English
   notebook on the Mac app, an iPad, an iPhone and an Android phone (real captures, clean frames,
   nothing lifted; marketing/store-creatives/2026-10-20-site-v2, id family). Phones get a simpler
   crop of the family (the Mac window and the two phones) through <picture>. */
.a-devices.is-family {
  display: block;
  max-width: 1120px;
  margin-inline: auto;
}
.a-family,
.a-family img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 700px) {
  .a-family img {
    aspect-ratio: 1200 / 1400;
  }
}


/* 18. The right link for each device (platform_cta, platform-v1.js; styles.css has the shared part).
   Badges match the 56 px buttons. */
.aurora .pcta-note {
  margin-top: 12px;
  color: var(--a-ink-3);
}
.aurora .pcta-note a:hover {
  color: var(--ink);
}
.aurora .pcta .pcta-badge.primary {
  min-height: 56px;
}
.aurora .pcta-badge img {
  height: 56px;
}
.aurora .pcta-badge.is-play img {
  height: 82px;
  margin: -13px;
}
.aurora .a-close .pcta-note {
  margin: 14px auto 0;
  font-size: 0.875rem;
  text-align: center;
}
@media (max-width: 700px) {
  .aurora .pcta .a-ctas > * {
    flex: 1 1 100%;
  }
  .aurora .pcta-note,
  .aurora .a-close .pcta-note {
    margin-top: 6px;
    font-size: 0.8125rem;
  }
}