/* ==========================================================================
   LinguaBattle — landing page styles
   "A dojo, not a textbook." Self-contained, no external requests.
   ========================================================================== */

:root {
  /* Palette (from the app's design system) */
  --ink: #0b1220;
  --ink-2: #111a2e;
  --blue: #4168f7;
  --blue-dark: #3253d8;
  --blue-tint: #d6edf8;
  --orange: #ff8c42;
  --teal: #01b4a2;
  --green: #1e9a4c;
  --green-bright: #7bd46e;

  --bg-light: #ffffff;
  --bg-offwhite: #f6f8fb;
  --text: #1a2233;
  --muted: #5a6577;

  --on-dark: #f2f5fa;
  --on-dark-muted: #9aa7bd;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  --radius: 16px;
  --radius-lg: 24px;
  --wrap: 1120px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06),
    0 4px 14px rgba(11, 18, 32, 0.06);
  --shadow-md: 0 8px 30px rgba(11, 18, 32, 0.12);
  --shadow-phone: 0 24px 60px rgba(6, 12, 26, 0.45);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  color: var(--blue-dark);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

strong {
  font-weight: 700;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px;
}

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.wrap--narrow {
  max-width: 760px;
}

/* Visible to screen readers, not to eyes. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}

.section--light {
  background: var(--bg-light);
  color: var(--text);
}
.section--tint {
  background: var(--bg-offwhite);
  color: var(--text);
}
.section--dark {
  background: var(--ink);
  color: var(--on-dark);
}

.section__head {
  max-width: 720px;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section__title {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
}
.section__lede {
  margin-top: var(--s-4);
  font-size: 1.12rem;
  color: var(--muted);
}
.section--dark .section__lede {
  color: var(--on-dark-muted);
}

.eyebrow {
  margin: 0 0 var(--s-3);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.eyebrow--blue {
  color: var(--blue);
}
.eyebrow--orange {
  color: var(--orange);
}

.grad-text {
  background: linear-gradient(100deg, var(--blue) 10%, var(--orange) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 0.85rem 1.4rem;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
  line-height: 1.1;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 22px rgba(65, 104, 247, 0.32);
}
.btn--primary:hover {
  background: var(--blue-dark);
  color: #fff;
}

.btn--pill {
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
}

/* Hero-weight CTA — matches the visual mass of the App Store badge it stands
   in for while the app is pre-launch. */
.btn--lg {
  padding: 0.95rem 1.7rem;
  font-size: 1.05rem;
}

.btn--ghost {
  background: transparent;
  color: var(--on-dark);
  border-color: rgba(242, 245, 250, 0.28);
}
.btn--ghost:hover {
  color: var(--on-dark);
  border-color: rgba(242, 245, 250, 0.6);
  background: rgba(242, 245, 250, 0.06);
}

.btn--ghost-dark {
  background: transparent;
  color: var(--text);
  border-color: rgba(26, 34, 51, 0.2);
}
.btn--ghost-dark:hover {
  color: var(--text);
  border-color: var(--blue);
  background: rgba(65, 104, 247, 0.05);
}

/* App Store style button (custom-drawn — swap for official badge at launch) */
.btn--appstore {
  background: #000;
  color: #fff;
  border-radius: 14px;
  padding: 0.6rem 1.3rem;
}
.btn--appstore:hover {
  background: #14161c;
  color: #fff;
}
.appstore__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  text-align: left;
}
.appstore__small {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.9;
}
.appstore__big {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.apple-glyph {
  flex: none;
}
.btn--appstore-lg {
  padding: 0.75rem 1.6rem;
}

/* --------------------------- Nav --------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 18, 32, 0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(242, 245, 250, 0.08);
}
.nav {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.7rem var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--on-dark);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.brand:hover {
  color: var(--on-dark);
}
.brand__icon {
  border-radius: 22.5%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.brand__name {
  font-size: 1.12rem;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  color: var(--on-dark-muted);
  font-size: 0.96rem;
  font-weight: 600;
}
.nav__links a:hover {
  color: var(--on-dark);
}

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav__toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--on-dark);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 760px) {
  .nav__toggle {
    display: flex;
  }
  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-5) var(--s-6);
    background: rgba(11, 18, 32, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(242, 245, 250, 0.08);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav__menu.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__links a {
    display: block;
    padding: 0.85rem 0.25rem;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(242, 245, 250, 0.08);
  }
  .nav__cta {
    margin-top: var(--s-3);
    align-self: flex-start;
  }
}

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

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
      60% 55% at 78% 12%,
      rgba(65, 104, 247, 0.28),
      transparent 70%
    ),
    radial-gradient(50% 50% at 10% 90%, rgba(255, 140, 66, 0.1), transparent 70%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  margin-bottom: var(--s-5);
}
.hero__sub {
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  color: var(--on-dark-muted);
  max-width: 34ch;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.hero__reassure {
  margin-top: var(--s-5);
  font-size: 0.9rem;
  color: var(--on-dark-muted);
}

/* Hero art — layered phones + mascot */
.hero__art {
  position: relative;
  min-height: 460px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.phone {
  position: relative;
  width: 232px;
  aspect-ratio: 402 / 874;
  background: #05070d;
  border-radius: 40px;
  padding: 10px;
  box-shadow: var(--shadow-phone);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.phone__notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 20px;
  background: #05070d;
  border-radius: 999px;
  z-index: 3;
}
.phone__shot {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  object-fit: cover;
  object-position: top center;
  background: #fff;
}

.hero__art .phone {
  position: absolute;
}
.phone--back {
  transform: rotate(5deg) translate(38px, -18px);
  z-index: 1;
  filter: saturate(0.96);
}
.phone--front {
  transform: rotate(-4deg) translate(-34px, 22px);
  z-index: 2;
}

.hero__mascot {
  position: absolute;
  width: 96px;
  height: auto;
  right: 6%;
  bottom: -6px;
  z-index: 4;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
}

/* --------------------------- Language strip --------------------------- */

.lang-strip {
  background: var(--ink);
  padding-block: var(--s-6) var(--s-7);
  border-top: 1px solid rgba(242, 245, 250, 0.06);
}
.lang-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: rgba(242, 245, 250, 0.06);
  border: 1px solid rgba(242, 245, 250, 0.12);
  color: var(--on-dark);
  font-size: 0.92rem;
  font-weight: 600;
}
.chip--soft {
  color: var(--on-dark-muted);
  background: transparent;
  border-style: dashed;
}
.chip__flag {
  font-size: 1.05rem;
  line-height: 1;
}

/* --------------------------- Belt divider --------------------------- */

.belt-divider {
  height: 4px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    var(--blue) 0%,
    var(--teal) 52%,
    var(--orange) 100%
  );
  opacity: 0.55;
}

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

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--bg-offwhite);
  border: 1px solid rgba(26, 34, 51, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--s-6) var(--s-5) var(--s-5);
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26, 34, 51, 0.08);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--s-4);
}
.step__title {
  font-size: 1.28rem;
  margin: var(--s-3) 0 var(--s-2);
}
.step__body {
  color: var(--muted);
  font-size: 1rem;
}

.phase-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}
.phase-tag--blue {
  color: var(--blue);
  background: rgba(65, 104, 247, 0.12);
}
.phase-tag--teal {
  color: #078a7d;
  background: rgba(1, 180, 162, 0.14);
}
.phase-tag--orange {
  color: #d96b1f;
  background: rgba(255, 140, 66, 0.16);
}
.phase-tag--green {
  color: #15733a;
  background: rgba(30, 154, 76, 0.14);
}

/* Four-strands grid: 2×2 on desktop, stacked on narrow. Uses .feature-card for
   the card chrome, so only the layout lives here. */
.strands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.strands .feature__title {
  margin: var(--s-3) 0 var(--s-2);
}

.how__close {
  margin-top: var(--s-7);
  text-align: center;
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 62ch;
  margin-inline: auto;
}
.how__close strong {
  color: var(--text);
}
/* The training-loop close, paired with the Stats shot that evidences it. */
.how__proof {
  margin-top: var(--s-7);
  margin-inline: auto;
  max-width: 780px;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.how__proof .how__close {
  margin: 0 0 var(--s-3);
  max-width: none;
  text-align: left;
}
.how__proof-sub {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}
.how__proof-shot {
  max-width: 190px;
}

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

.features {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.feature-row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.feature-row--reverse .feature-row__text {
  order: 2;
}
.feature-row__media {
  display: flex;
  justify-content: center;
}

.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--blue-tint);
  color: var(--blue-dark);
  margin-bottom: var(--s-4);
}
.feature__title {
  font-size: 1.5rem;
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.feature__body {
  color: var(--muted);
  font-size: 1.06rem;
  max-width: 46ch;
}

.badge {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}
.badge--plus {
  color: #fff;
  background: var(--blue);
}

/* Mini phone frame for feature rows */
.phone--mini {
  width: 220px;
}

.feature-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.feature-card {
  background: #fff;
  border: 1px solid rgba(26, 34, 51, 0.07);
  border-radius: var(--radius-lg);
  padding: var(--s-6) var(--s-5);
  box-shadow: var(--shadow-sm);
}
.feature-card .feature__body {
  max-width: none;
}

/* In your corner strip */
.corner {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: var(--s-6);
  background: #fff;
  border: 1px solid rgba(26, 34, 51, 0.07);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.corner__label {
  margin: 0 0 var(--s-4);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
}
.corner__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.corner__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  color: var(--muted);
  font-size: 0.98rem;
}
.corner__item strong {
  color: var(--text);
}
.corner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--bg-offwhite);
  color: var(--blue);
  margin-bottom: var(--s-2);
}

/* --------------------------- Dark band (on-device) --------------------------- */

.band {
  text-align: center;
}
.band__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    55% 60% at 50% 0%,
    rgba(1, 180, 162, 0.14),
    transparent 70%
  );
  pointer-events: none;
}
.band__inner {
  position: relative;
  max-width: 720px;
}
.band__title {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
}
.band__copy {
  margin: var(--s-4) auto 0;
  color: var(--on-dark-muted);
  font-size: 1.12rem;
  max-width: 60ch;
}
.band__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
}
.pill-chip {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(242, 245, 250, 0.07);
  border: 1px solid rgba(242, 245, 250, 0.16);
  color: var(--on-dark);
  font-size: 0.9rem;
  font-weight: 600;
}

/* --------------------------- Companion --------------------------- */

.companion-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--on-dark);
  border-radius: 28px;
  padding: clamp(2rem, 5vw, 4rem);
  box-shadow: var(--shadow-md);
}
.companion__body {
  position: relative;
  z-index: 1;
  max-width: 640px;
}
.companion__lede {
  margin: var(--s-4) 0 var(--s-5);
  color: var(--on-dark-muted);
  font-size: 1.12rem;
}
.companion__lede strong {
  color: var(--on-dark);
}
.companion__bullets {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.companion__bullets li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--on-dark);
}
.companion__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--blue), var(--orange));
}
.companion__foot {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--orange);
}
/* Full panel width, so it escapes the 640px .companion__body cap. Sits above
   the 聽 watermark. */
.companion__figure {
  position: relative;
  z-index: 1;
  margin: var(--s-5) 0 0;
}
.companion__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 14px;
  cursor: zoom-in;
}
.companion__zoom:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.companion__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}
.companion__caption {
  margin: var(--s-3) 0 0;
  color: var(--on-dark-muted);
  font-size: 0.95rem;
}

/* --------------------------- Pricing --------------------------- */

.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(26, 34, 51, 0.1);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.plan--featured {
  border: 2px solid var(--blue);
  box-shadow: 0 18px 44px rgba(65, 104, 247, 0.18);
  position: relative;
}
.plan__badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
  background: rgba(65, 104, 247, 0.1);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: var(--s-3);
}
.plan__name {
  font-size: 1.5rem;
}
.plan__price {
  margin: var(--s-3) 0 var(--s-2);
}
.plan__amount {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.plan__per {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
}
.plan__tagline {
  margin: 0 0 var(--s-5);
  color: var(--muted);
}
.checklist {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  display: grid;
  gap: var(--s-3);
  flex: 1;
}
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--text);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--green);
  /* white check drawn with a data URI (no external request) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.plan__cta {
  width: 100%;
}
.plans__foot {
  margin-top: var(--s-5);
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

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

.faq {
  display: grid;
  gap: var(--s-3);
}
.faq__item {
  background: #fff;
  border: 1px solid rgba(26, 34, 51, 0.1);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 1.15rem 1.3rem;
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--text);
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
/* Shared by the FAQ items and the source-card disclosures. */
.faq__chevron,
.disclosure-chevron {
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-top: -4px;
}
.faq__item[open] .faq__chevron,
.src-card__more[open] .disclosure-chevron {
  transform: rotate(-135deg);
  margin-top: 3px;
}
.disclosure-chevron {
  width: 9px;
  height: 9px;
}
.faq__answer {
  padding: 0 1.3rem 1.25rem;
  color: var(--muted);
}
.faq__answer p {
  margin: 0;
}
/* Answers that need a second paragraph; single-paragraph ones are unaffected. */
.faq__answer p + p {
  margin-top: var(--s-3);
}

/* --------------------------- Final CTA --------------------------- */

.final-cta {
  text-align: center;
}
.final-cta__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
      50% 60% at 50% 0%,
      rgba(65, 104, 247, 0.22),
      transparent 70%
    ),
    radial-gradient(40% 50% at 80% 100%, rgba(255, 140, 66, 0.12), transparent 70%);
  pointer-events: none;
}
.final-cta__inner {
  position: relative;
  max-width: 640px;
}
.final-cta__mascot {
  width: 120px;
  height: auto;
  margin: 0 auto var(--s-4);
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45));
}
.final-cta__title {
  font-size: clamp(2rem, 5vw, 3rem);
}
.final-cta__sub {
  margin: var(--s-3) auto var(--s-6);
  color: var(--on-dark-muted);
  font-size: 1.15rem;
}
.final-cta .btn--appstore {
  margin-inline: auto;
}

/* --------------------------- Waitlist form ---------------------------
   Pre-launch signup, living inside the final CTA (`#waitlist`). Removed with
   that section when the app ships — see index.html. */

.waitlist {
  max-width: 460px;
  margin: 0 auto;
  text-align: left;
}

.waitlist__row {
  display: flex;
  gap: var(--s-3);
}

.waitlist__input {
  flex: 1 1 auto;
  min-width: 0; /* Or a long placeholder pushes the button off-canvas. */
  font-family: inherit;
  font-size: 1rem;
  color: var(--on-dark);
  background: rgba(242, 245, 250, 0.07);
  border: 1.5px solid rgba(242, 245, 250, 0.22);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.waitlist__input::placeholder {
  color: var(--on-dark-muted);
}
.waitlist__input:hover {
  border-color: rgba(242, 245, 250, 0.4);
}
.waitlist__input:focus {
  outline: none;
  border-color: var(--blue);
  background: rgba(242, 245, 250, 0.1);
}
/* Only after a submit attempt — see main.js. Styling :invalid directly would
   paint the field red before anyone has finished typing the first character. */
.waitlist.is-validated .waitlist__input:invalid {
  border-color: var(--orange);
}

.waitlist__submit {
  flex: none;
}

.waitlist__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-4);
  color: var(--on-dark-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  cursor: pointer;
}
.waitlist__consent input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.2rem;
  accent-color: var(--blue);
  cursor: pointer;
}
.waitlist__consent a {
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.waitlist__consent a:hover {
  color: #fff;
}

/* Turnstile injects a fixed-size iframe. Reserve nothing until it exists —
   the widget is interaction-only, so most visitors never see a box. */
.waitlist__widget:not(:empty) {
  margin-top: var(--s-4);
}

.waitlist__status {
  margin: var(--s-4) 0 0;
  min-height: 1.5em; /* Holds the line so the layout doesn't jump on submit. */
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--on-dark-muted);
}
.waitlist__status.is-error {
  color: var(--orange);
}
.waitlist__status.is-ok {
  color: var(--green-bright);
}

/* Honeypot. Off-canvas rather than display:none — some bots skip fields that
   are explicitly hidden, which defeats the point. */
.waitlist__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.waitlist__noscript {
  max-width: 460px;
  margin: var(--s-5) auto 0;
  color: var(--on-dark-muted);
  font-size: 0.92rem;
}
.waitlist__noscript a {
  color: var(--on-dark);
  text-decoration: underline;
}

@media (max-width: 520px) {
  .waitlist__row {
    flex-direction: column;
  }
  .waitlist__submit {
    width: 100%;
  }
}

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

.footer {
  background: var(--ink);
  border-top: 1px solid rgba(242, 245, 250, 0.08);
  padding-block: var(--s-7);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}
.footer__copy {
  margin: 0;
  color: var(--on-dark-muted);
  font-size: 0.92rem;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__links a {
  color: var(--on-dark-muted);
  font-size: 0.92rem;
  font-weight: 600;
}
.footer__links a:hover {
  color: var(--on-dark);
}
.footer__tag {
  flex-basis: 100%;
  margin: 0;
  color: var(--on-dark-muted);
  font-size: 0.9rem;
  opacity: 0.75;
}

/* --------------------------- Hanzi watermark --------------------------- */

.hanzi-watermark {
  position: absolute;
  font-weight: 800;
  color: var(--on-dark);
  opacity: 0.05;
  line-height: 0.8;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}
.hanzi-watermark--hero {
  font-size: 30vw;
  top: -6%;
  right: -4%;
}
.hanzi-watermark--band {
  font-size: 28vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hanzi-watermark--panel {
  font-size: 22rem;
  top: -8%;
  right: -3%;
  opacity: 0.05;
}
.hanzi-watermark--final {
  font-size: 30vw;
  bottom: -12%;
  left: -4%;
}

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

.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 960px) {
  .steps {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }
  .corner__list {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  /* Stack the shot above the claim, both centred like the rest of the section. */
  .how__proof {
    grid-template-columns: 1fr;
    justify-items: center;
    max-width: 560px;
  }
  .how__proof .how__close {
    text-align: center;
  }
  .how__proof-text {
    text-align: center;
  }
}

@media (max-width: 840px) {
  .hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__sub {
    margin-inline: auto;
  }
  .hero__cta {
    justify-content: center;
  }
  .hero__art {
    order: -1;
    min-height: 420px;
    margin-bottom: var(--s-5);
  }

  .feature-row,
  .feature-row--reverse {
    grid-template-columns: 1fr;
  }
  .feature-row__text,
  .feature-row--reverse .feature-row__text {
    order: 0;
  }
  .feature__body {
    max-width: none;
  }
  .feature-pair,
  .strands {
    grid-template-columns: 1fr;
  }

  .plans {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
}

@media (max-width: 520px) {
  body {
    font-size: 1.02rem;
  }
  .phone {
    width: 200px;
  }
  .phone--back {
    transform: rotate(5deg) translate(30px, -14px);
  }
  .phone--front {
    transform: rotate(-4deg) translate(-28px, 18px);
  }
  .hero__mascot {
    width: 78px;
    right: 2%;
  }
  .hanzi-watermark--panel {
    font-size: 14rem;
  }
}

@media (max-width: 380px) {
  .wrap {
    padding-inline: var(--s-4);
  }
  .phone {
    width: 172px;
  }
  .phone--back {
    transform: rotate(5deg) translate(24px, -12px);
  }
  .phone--front {
    transform: rotate(-4deg) translate(-22px, 14px);
  }
  .hero__art {
    min-height: 360px;
  }
  .btn {
    width: 100%;
  }
  .hero__cta .btn {
    width: 100%;
  }
}

/* A corner strip nested inside .features (the engine-choice note under the
   Scenarios / Ask AI rows) — the flex gap already spaces it, so drop the
   standalone margin that the section-level strips need. */
.features > .corner {
  margin-top: 0;
}

/* --------------------------- Flow (features) ---------------------------
   The section layout IS the diagram: a boxed group of content sources, an
   arrow down to the Library hub, an arrow down to the review engine, and a
   dashed rail up the left side for the feedback edge. Plain CSS so every node
   stays real text that reflows and is selectable. */

.flow__lede {
  max-width: 720px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.flow {
  position: relative;
  padding-left: 58px;
}

/* The feedback edge: engine -> up the left -> back into the sources box. */
.flow__rail {
  position: absolute;
  left: 8px;
  top: 34px;
  bottom: 54px;
  width: 36px;
  border: 2px dashed var(--blue);
  border-right: 0;
  border-radius: 16px 0 0 16px;
  opacity: 0.75;
  pointer-events: none;
}
.flow__rail::after {
  content: "";
  position: absolute;
  top: -7px;
  right: -3px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid var(--blue);
}

/* Stage 1 — the sources, fenced to read as one group. */
.flow__group {
  border: 1.5px dashed rgba(26, 34, 51, 0.22);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-5) var(--s-6);
  background: rgba(255, 255, 255, 0.55);
}
.flow__label {
  margin: 0 0 var(--s-5);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted);
}
.flow__group-inner {
  display: grid;
  grid-template-columns: 1fr 186px;
  gap: var(--s-6);
  align-items: center;
}
.flow__sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.flow__group-media {
  display: flex;
  justify-content: center;
}

.src-card {
  background: #fff;
  border: 1px solid rgba(26, 34, 51, 0.07);
  border-radius: var(--radius);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}
.src-card .feature__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  margin-bottom: var(--s-3);
}
.src-card__title {
  font-size: 1.16rem;
  margin-bottom: var(--s-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.src-card__body {
  margin: 0;
  color: var(--muted);
  font-size: 0.97rem;
}
/* Progressive disclosure inside a source card. Same interaction as .faq__item,
   scaled down to card size. Expanding one grows its grid row, so its row
   partner just gains whitespace — cards stay top-aligned via the stretch
   default and the phone beside them stays centred (.flow__group-inner). */
.src-card__more {
  margin-top: var(--s-4);
  border-top: 1px solid rgba(26, 34, 51, 0.09);
}
.src-card__more summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue);
}
.src-card__more summary::-webkit-details-marker {
  display: none;
}
.src-card__more summary:hover {
  text-decoration: underline;
}
.src-card__detail {
  padding-top: var(--s-2);
  color: var(--muted);
  font-size: 0.92rem;
}
.src-card__detail p {
  margin: 0 0 var(--s-3);
}
.src-card__detail p:last-child {
  margin-bottom: 0;
}
/* Screenshot strip inside a disclosure. Thumbs are ~140px wide, so they lean on
   the lightbox (data-full) to be readable. */
.shot-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin: var(--s-4) 0 0;
  padding: 0;
}
.shot {
  flex: 1 1 120px;
  max-width: 160px;
}
.shot-row--single .shot {
  max-width: 140px;
}
.shot__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 12px;
}
.shot__zoom:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.shot__zoom img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(26, 34, 51, 0.12);
  box-shadow: var(--shadow-sm);
}
.shot__cap {
  display: block;
  margin-top: var(--s-2);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}

/* --------------------------- Detail modal ---------------------------
   Sits below the screenshot lightbox (z-index 100) so a shot opened from
   inside the modal lands on top of it. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(6, 12, 26, 0.78);
  backdrop-filter: blur(6px);
}
.modal[hidden] {
  display: none;
}
.modal__panel {
  width: 100%;
  max-width: 900px;
  max-height: calc(100vh - 4rem);
  display: flex;
}
.modal__card {
  position: relative;
  width: 100%;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  box-shadow: var(--shadow-md);
}
.modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(26, 34, 51, 0.06);
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.modal__close:hover {
  background: rgba(26, 34, 51, 0.12);
}
.modal__title {
  margin: 0 2.5rem var(--s-4) 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.01em;
}
/* The cloned .src-card__detail gets room to breathe here. */
.modal__body .src-card__detail {
  padding-top: 0;
  font-size: 1.04rem;
  line-height: 1.65;
}
.modal__body .src-card__detail p {
  margin: 0 0 var(--s-4);
  max-width: 68ch;
}
.modal__body .shot-row {
  gap: var(--s-5);
  margin-top: var(--s-5);
}
.modal__body .shot {
  flex: 1 1 200px;
  max-width: 260px;
}
.modal__body .shot__cap {
  font-size: 0.9rem;
}

/* With JS on the disclosures open in the modal, so the chevron would be
   misleading — swap it for an "open" affordance instead. */
.js .src-card__more.is-modal .disclosure-chevron {
  transform: rotate(-45deg);
  margin-top: 0;
}

/* "See the full ladder ↓" — the engine card teases the loop; the #how section
   is the payoff. */
.flow__more {
  margin: var(--s-4) 0 0;
}
.flow__more-link {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}
.flow__more-link:hover {
  text-decoration: underline;
}

/* Connector between stages. */
.flow__arrow {
  width: 2px;
  height: 46px;
  margin: var(--s-4) auto;
  background: var(--muted);
  position: relative;
  opacity: 0.55;
}
.flow__arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 11px solid var(--muted);
}

/* Stages 2 and 3 — the hub and the engine. */
.flow__node {
  background: #fff;
  border: 1px solid rgba(26, 34, 51, 0.07);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}
.flow__node--engine {
  display: grid;
  /* Wide enough for the three fanned drills (354px) plus the bleed the
     rotation adds to their bounding box. */
  grid-template-columns: 1fr 390px;
  gap: var(--s-6);
  align-items: center;
}
.flow__node-title {
  font-size: 1.5rem;
  margin-bottom: var(--s-3);
}
.flow__node-body {
  margin: 0;
  color: var(--muted);
}
.flow__node-media {
  display: flex;
  justify-content: center;
}
/* Listen → Speak → Mixed, fanned as a staircase so the sequence reads left to
   right. Each card steps up and rotates further clockwise, and z-index rises
   with it so Mixed — the phase they're climbing toward — finishes on top.
   Kept in normal flow (the hero absolutely positions its phones, which needs a
   fixed-height parent); the overlap comes from negative margins instead. */
.flow__node-media--fan {
  gap: 0;
  align-items: center;
}
.flow__node-media--fan .phone--mini {
  width: 138px;
  padding: 6px;
  border-radius: 24px;
}
.flow__node-media--fan .phone--mini:nth-child(1) {
  transform: rotate(-6deg) translateY(14px);
  margin-right: -30px;
  z-index: 1;
  filter: saturate(0.94);
}
.flow__node-media--fan .phone--mini:nth-child(2) {
  transform: rotate(-1deg) translateY(2px);
  margin-right: -30px;
  z-index: 2;
  filter: saturate(0.97);
}
.flow__node-media--fan .phone--mini:nth-child(3) {
  transform: rotate(5deg) translateY(-12px);
  z-index: 3;
}
/* Must follow the rules above, not ride in the earlier 520px block — same
   specificity, so source order decides. */
@media (max-width: 520px) {
  .flow__node-media--fan .phone--mini {
    width: 112px;
  }
  .flow__node-media--fan .phone--mini:nth-child(1),
  .flow__node-media--fan .phone--mini:nth-child(2) {
    margin-right: -24px;
  }
}
/* The bezel details are sized for a 232px frame; scale them to match. */
.flow__node-media--fan .phone__notch {
  top: 9px;
  width: 50px;
  height: 12px;
}
.flow__node-media--fan .phone__shot,
.flow__node-media--fan .phone__zoom {
  border-radius: 18px;
}
.flow__chips {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  flex-wrap: wrap;
}
.flow__chip-sep {
  color: var(--muted);
  font-weight: 700;
}

/* Stage 2 is two pools side by side. The incoming arrow is offset left so it
   lands on Library only — the high-frequency band is built in, not fed by the
   sources above. */
.flow__arrow--left {
  margin-inline: 25% auto;
}

.flow__pools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.flow__node--pool {
  padding: var(--s-5);
}
.flow__node--pool .flow__node-title {
  font-size: 1.3rem;
  margin-bottom: var(--s-2);
}
.flow__pool-tag {
  margin: 0 0 var(--s-3);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue);
}

/* The Y-merge: a stub up into each pool, a bar across, one stem down. */
.flow__merge {
  position: relative;
  height: 68px;
  /* No top margin: the stubs must start at the pool cards' bottom edge or the
     merge reads as a floating bar rather than a connection. */
  margin-top: 0;
}
.flow__merge-bar {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 30px;
  border-top: 2px solid var(--muted);
  opacity: 0.55;
}
.flow__merge-bar::before,
.flow__merge-bar::after {
  content: "";
  position: absolute;
  top: -30px;
  width: 2px;
  height: 30px;
  background: var(--muted);
}
.flow__merge-bar::before {
  left: -1px;
}
.flow__merge-bar::after {
  right: -1px;
}
.flow__merge::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 30px;
  width: 2px;
  height: 26px;
  transform: translateX(-50%);
  background: var(--muted);
  opacity: 0.55;
}
.flow__merge::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 54px;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 11px solid var(--muted);
  opacity: 0.55;
}
.flow__merge-label {
  margin: 0 0 var(--s-5);
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}
.flow__merge-label strong {
  color: var(--text);
}

.flow__return {
  margin: var(--s-4) 0 0;
  text-align: center;
  color: var(--blue);
  font-size: 0.98rem;
  font-style: italic;
}

/* Ask AI — deliberately outside the flow: it is not a source. */
.aside-card {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: var(--s-6);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: var(--s-6);
  background: #fff;
  border: 1px solid rgba(26, 34, 51, 0.07);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.aside-card__media {
  display: flex;
  justify-content: center;
}

/* The screenshots run ~2.2x taller than the copy beside them, which leaves the
   bordered stages half empty. Narrow the frames inside the flow so each stage
   is sized by its content rather than by the phone. */
.flow .phone--mini,
.aside-card .phone--mini {
  width: 172px;
}
.aside-card .feature__body {
  max-width: none;
}

/* Flow, narrow screens. This must live AFTER the flow base rules above —
   same specificity, so source order decides. */
@media (max-width: 840px) {
  .flow {
    padding-left: 0;
  }
  .flow__rail {
    display: none;
  }
  .flow__group-inner,
  .flow__node--engine,
  .aside-card {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .flow__sources {
    grid-template-columns: 1fr;
  }
  .flow__group-media {
    order: -1;
  }
  .flow__node--engine .flow__node-media,
  .aside-card__media {
    order: -1;
  }
  /* Pools stack, so the Y-merge collapses to a single centred stem. */
  .flow__pools {
    grid-template-columns: 1fr;
  }
  .flow__arrow--left {
    margin-inline: auto;
  }
  .flow__merge {
    height: 46px;
  }
  .flow__merge-bar {
    display: none;
  }
  .flow__merge::before {
    top: 8px;
  }
  .flow__merge::after {
    top: 32px;
  }
}

/* --------------------------- Screenshot zoom ---------------------------
   The inline shots are ~150-210px wide; clicking one opens the full-res
   capture. The trigger is a real <button> so it is keyboard-reachable. */

.phone__zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 30px;
  cursor: zoom-in;
}
.phone__zoom:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 12, 26, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.lightbox[hidden] {
  display: none;
}
.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  max-height: 100%;
}
.lightbox__img {
  max-width: min(420px, 100%);
  max-height: calc(100vh - 8rem);
  width: auto;
  height: auto;
  border-radius: 22px;
  box-shadow: var(--shadow-phone);
  cursor: default;
}
/* Landscape captures (the browser companion) — the 420px phone cap would open
   them smaller than they already render inline. */
.lightbox__img--wide {
  max-width: min(1280px, 100%);
  border-radius: 12px;
}
.lightbox__caption {
  max-width: 46ch;
  text-align: center;
  color: var(--on-dark-muted);
  font-size: 0.92rem;
}
.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: 44px;
  height: 44px;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--on-dark);
  background: rgba(242, 245, 250, 0.12);
  border: 1px solid rgba(242, 245, 250, 0.22);
  border-radius: 999px;
  cursor: pointer;
}
.lightbox__close:hover {
  background: rgba(242, 245, 250, 0.2);
}

/* Plus items now lead with a bold benefit and explain it underneath, so give
   them more room and mute the explanatory half — the lead still has to scan
   in a glance. */
.checklist--pro {
  gap: var(--s-4);
}
.checklist--pro li {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.55;
}
.checklist--pro li strong {
  color: var(--text);
}