/* 800: marketing site. One stylesheet for the landing page and the legal pages.
   The landing page (2026-10-28, second pass) is built like a product page: full-width chapters that
   alternate white, light grey and deep green (third pass: no true black anywhere, the owner's word),
   big type that does the hierarchy, real screenshots in a drawn phone, and motion only where it shows
   something real or answers a tap (README: "Motion").
   Terracotta (--action) is the primary button and the streak flame, as in the app; links and the
   score dial are the app's forest green. */

@font-face { font-family: "Heebo"; src: url("../fonts/heebo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Heebo"; src: url("../fonts/heebo-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Heebo"; src: url("../fonts/heebo-700.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }

:root {
  --white: #FFFFFF;
  --paper: #F5F5F7;          /* the light grey chapters */
  --ink: #1D1D1F;            /* text on white and grey */
  --ink-2: #6E6E73;          /* secondary text: 5.1:1 on white, 4.7:1 on --paper */
  --hair: #D2D2D7;
  /* Deep green, derived from the brand forest, where the page used to go black: the simulation, the
     closing call, the dark cards. Every text pair on it passes AA, on the glow (#0F5A43) too. */
  --deep: #0C3B2D;
  --deep-2: #134838;         /* a raised surface on --deep */
  --deep-line: rgba(143, 208, 174, .2);
  --on-deep: #F2F7F3;        /* 11.6:1 on --deep, 7.6:1 on --forest */
  --on-deep-2: #B4CFC0;      /* 7.5:1 on --deep, 4.9:1 on --forest */
  --clay-lift: #EA8259;      /* the app's dark-theme action: the writing task on the clock */
  --teal-lift: #55C2BC;      /* the app's dark-theme teal: the quantitative sections */

  --forest: #0F5A43;         /* the app's brand green: links, the dial */
  --forest-deep: #0A4331;
  --forest-soft: #D5E9DC;
  --mint: #8FD0AE;           /* the brand green on --deep (7.0:1) */
  --forest-wash: #E4EFE8;    /* the secondary button's fill (forest-deep on it 8.9:1) */
  --action: #D0451F;         /* terracotta: the primary button (white text 4.6:1) */
  --action-hover: #BC3D1B;
  --flame-soft: #FBE7E0;
  --amber-soft: #FBEFD0;     /* legal pages: the draft note */
  --focus: var(--forest);

  /* Older names the legal pages' rules still read. */
  --bg: var(--white);
  --surface: var(--white);
  --surface-alt: var(--paper);
  --border: var(--hair);
  --border-subtle: #E8E8ED;
  --text: var(--ink);
  --text-2: var(--ink-2);

  --font: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --gutter: clamp(16px, 4.6vw, 64px);
  --max: 1180px;
  --nav-h: 48px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --shadow-device: 0 1px 2px rgba(0, 0, 0, .06), 0 16px 32px -12px rgba(0, 0, 0, .22), 0 48px 90px -36px rgba(0, 0, 0, .34);
  color-scheme: light;
}

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

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--forest); text-underline-offset: .2em; text-decoration-thickness: .07em; }
a:hover { color: var(--forest-deep); }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--font); color: var(--ink); margin: 0; line-height: 1.12; text-wrap: balance; }
button { font: inherit; }
bdi { unicode-bidi: isolate; }
time { font-variant-numeric: tabular-nums; }
figure { margin: 0; }

:focus { outline: none; }
/* A ring for the keyboard only, thin and clear of the element; it follows the element's own corners
   (a pill stays a pill). A mouse click never shows it. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
a:not([class]):focus-visible, .textlink:focus-visible { border-radius: 4px; }

.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 980px;
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .25s var(--ease-out);
}
.skip-link:focus { transform: none; color: #fff; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.nobr { white-space: nowrap; }
/* A headline phrase that keeps together; the headline breaks only between phrases. */
.ln { display: inline-block; }
.center { text-align: center; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* A numeric range ("50–150") is one LTR run: an en dash is bidi-neutral and would flip it. */
.range { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

/* ------------------------------------------------------------------ Nav */
/* A thin bar that stays: the logo, the chapters, and the pair of buttons (the browser, the download).
   Translucent with a blur where a mouse is (the blur repaints on every scrolled frame); solid on a
   touch screen. Over a deep-green chapter (data-dark) the script turns it green too (.nav--dark). */

.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  height: var(--nav-h);
  background: #fff;
  border-block-end: 1px solid rgba(0, 0, 0, .08);
  transition: background-color .3s, border-color .3s;
}
@media (hover: hover) and (pointer: fine) {
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .nav {
      background: rgba(251, 251, 253, .76);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
    }
  }
}
.nav__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}
.nav__logo { display: block; flex: none; padding-block: 8px; border-radius: 6px; }
.nav__logo img { height: 24px; width: auto; }
.nav nav { margin-inline: auto; }
.nav__links { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.nav__links a {
  display: block;
  padding: 6px 11px;
  border-radius: 6px;
  color: rgba(0, 0, 0, .8);
  font-size: .82rem;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.nav__links a:hover { color: var(--ink); }
.nav__actions { flex: none; display: flex; align-items: center; gap: 8px; }
.nav__logo-dark { display: none; }

.nav--dark { background: var(--deep); border-block-end-color: var(--deep-line); --focus: var(--mint); }
@media (hover: hover) and (pointer: fine) {
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .nav--dark { background: rgba(12, 59, 45, .8); }
  }
}
.nav--dark .nav__links a { color: rgba(242, 247, 243, .86); }
.nav--dark .nav__links a:hover { color: #fff; }
.nav--dark .nav__menu { color: var(--on-deep); }
.nav--dark .nav__logo img { display: none; }
.nav--dark .nav__logo .nav__logo-dark { display: block; }

.nav__menu {
  display: none;
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  margin-inline-end: -10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav__menu span {
  position: absolute;
  inset-inline-start: 13px;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--ease-out), top .3s var(--ease-out);
}
.nav__menu span:nth-child(1) { top: 18px; }
.nav__menu span:nth-child(2) { top: 25px; }
.nav--open .nav__menu span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.nav--open .nav__menu span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

@media (max-width: 1060px) {
  .nav nav { margin: 0; }
  .nav__links { display: none; }
  .nav__menu { display: block; }
  .nav__actions { margin-inline-start: auto; }
  .nav--open { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav--open.nav--dark { background: var(--deep); }
  .nav--open.nav--dark .nav__links { background: var(--deep); border-block-end-color: var(--deep-line); }
  .nav--open.nav--dark .nav__links a { color: var(--on-deep); }
  .nav--open .nav__links {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: var(--nav-h);
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    padding: 8px var(--gutter) 28px;
    background: #fff;
    border-block-end: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .25);
  }
  .nav--open .nav__links a { padding: 10px 0; font-size: 1.5rem; font-weight: 700; color: var(--ink); white-space: normal; }
}

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

/* One shape for every button that is a call: the orange download (primary) and the quiet green
   browser button (secondary) share the height, the radius, the type and an icon. */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 980px;
  background: var(--action);
  color: #fff;
  font: 500 1.0625rem/1.1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, box-shadow .2s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.pill:hover { background: var(--action-hover); color: #fff; }
.pill .ico { width: 20px; height: 20px; flex: none; margin-inline-start: -4px; }
.pill:active { transform: scale(.98); }
.pill--ghost { background: var(--forest-wash); color: var(--forest-deep); }
.pill--ghost:hover { background: var(--forest-soft); color: var(--forest-deep); }
.chapter--deep .pill--ghost, .nav--dark .pill--ghost { background: rgba(242, 247, 243, .13); color: var(--on-deep); }
.chapter--deep .pill--ghost:hover, .nav--dark .pill--ghost:hover { background: rgba(242, 247, 243, .22); color: #fff; }
.pill--nav { min-height: 32px; padding: 0 14px; gap: 6px; font-size: .8125rem; font-weight: 500; }
.pill--nav .ico { width: 16px; height: 16px; margin-inline-start: -2px; }
@media (max-width: 520px) { .nav__long { display: none; } .pill--nav { padding: 0 12px; } }

.textlink { color: var(--forest); font-size: 1.0625rem; font-weight: 500; text-decoration: none; }
.textlink:hover { text-decoration: underline; color: var(--forest-deep); }

/* The legal pages' account box still uses these. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none; font: 500 1rem/1.1 var(--font); }
.btn-small { min-height: 40px; padding: 0 18px; border-radius: 980px; background: var(--forest); color: #fff; }
.btn-small:hover { background: var(--forest-deep); color: #fff; }

/* ---------------------------------------------------------------- Phone */
/* A generic device drawn in CSS, no vendor branding: a thin dark bezel, corners at 12% of the width,
   a centred camera dot over a clean status bar that shows the moment's time. --w drives everything.
   Screens are 1440 × 2968 (the S26's 1440 × 3120 with its 152 px status bar cut); --sb is the colour
   of the app's top edge, so the drawn status bar continues it. */

.device {
  --w: 300px;
  position: relative;
  width: var(--w);
  padding: calc(var(--w) * .021);
  border-radius: calc(var(--w) * .12);
  background: #1D1D1F;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), var(--shadow-device);
  flex: none;
}
.device__screen {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--w) * .1);
  background: var(--sb, #F8F7F3);
}
.device__screen::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: calc(var(--w) * .028);
  left: 50%;
  width: calc(var(--w) * .034);
  height: calc(var(--w) * .034);
  margin-left: calc(var(--w) * -.017);
  border-radius: 50%;
  background: #0B0B0C;
  box-shadow: inset 0 0 0 calc(var(--w) * .006) #26262A;
}
.device .device__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
  height: calc(var(--w) * .09);
  margin: 0;
  padding: calc(var(--w) * .006) calc(var(--w) * .08) 0;
  font: 500 calc(var(--w) * .04)/1 var(--font);
  color: #1D1D1F;
  letter-spacing: .01em;
}
.device__bar svg { width: calc(var(--w) * .1); height: auto; }
.device--dark .device__bar { color: #F2F2F2; }
.device img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 2968; }
.chapter--deep .device, .card--dark .device { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 1px rgba(143, 208, 174, .18), 0 40px 80px -40px rgba(0, 20, 12, .7); }

/* -------------------------------------------------------------- Chapters */

.chapter { padding-block: clamp(96px, 12vw, 168px); background: var(--white); }
.chapter--paper { background: var(--paper); }
.chapter--deep { --focus: var(--mint); background: var(--deep); color: var(--on-deep); }
.chapter__head { width: min(100% - 2 * var(--gutter), 940px); text-align: center; }
.chapter__head--start { width: min(100% - 2 * var(--gutter), var(--max)); text-align: start; }

.headline {
  font-weight: 700;
  font-size: clamp(2.25rem, 6.2vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -.028em;
}
.headline--side { font-size: clamp(2.25rem, 4.8vw, 4.25rem); }
.lead {
  margin: 24px auto 0;
  max-width: 34em;
  font-size: clamp(1.1875rem, 1.45vw, 1.375rem);
  line-height: 1.5;
  color: var(--ink-2);
}
.chapter--deep .headline { color: var(--on-deep); }
.chapter--deep .lead { color: var(--on-deep-2); }
.chapter--deep a:not(.pill) { color: var(--mint); }
.chapter--deep a:not(.pill):hover { color: #C4EAD5; }

.fineprint { color: var(--ink-2); font-size: .9375rem; line-height: 1.55; }
.fineprint--center { margin-top: clamp(40px, 5vw, 64px); max-width: 44em; text-align: center; }

/* A point: a short heading and a line or two. */
.point h3 { font-size: clamp(1.3125rem, 1.7vw, 1.5rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.point p { margin: 8px 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }
.chapter--deep .point h3 { color: var(--on-deep); }
.chapter--deep .point p { color: var(--on-deep-2); }
.point + .point { margin-top: 36px; }
/* The app's own glyph above a point's heading: no tile, the brand colour, the 24 grid at 28 px. */
.point__icon, .step__icon, .game__icon, .card__icon { display: block; width: 28px; height: 28px; margin-bottom: 14px; color: var(--forest); }
.chapter--deep .point__icon { color: var(--mint); }
.ico { display: inline-block; flex: none; width: 1.1em; height: 1.1em; vertical-align: -.16em; }

.points3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px clamp(28px, 4vw, 64px);
  margin-top: clamp(56px, 7vw, 96px);
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}
.points3 .point + .point { margin-top: 0; }

/* A real sequence: the review schedule, the five leagues. */
.seq { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 14px 0 0; padding: 0; list-style: none; font-size: 1.0625rem; font-weight: 500; color: var(--forest); }
.seq li { display: flex; align-items: center; }
.seq li + li::before { content: ""; width: 18px; height: 1.5px; margin-inline: 10px; background: #B8C7BE; }

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

.hero { padding-block-start: clamp(44px, 7.5vh, 88px); background: var(--white); text-align: center; overflow: clip; }
.hero__title {
  max-width: 11.5em;
  margin-inline: auto;
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 1.02;
  letter-spacing: -.032em;
}
.hero__lead { max-width: 30em; margin: 26px auto 0; font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); line-height: 1.45; color: var(--ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 36px; margin-top: 36px; }
.hero__note { margin: 22px auto 0; max-width: 40em; font-size: .875rem; color: var(--ink-2); }

/* BETA-CTA:start */
/* TEMPORARY (2026-11-02): the closed test's call in the hero, a link to beta.html. Delete this block
   and the BETA-CTA block in index.html together (firebase/SETUP.md §9l). The forest pill sets it apart
   from the hero's terracotta download and green-wash browser buttons; white on --forest is 7.6:1,
   --forest-deep on --forest-wash 8.9:1. No motion of its own beyond the pill's press. */
.beta-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin: 28px auto 0;
  padding: 18px 24px 20px;
  border-radius: 24px;
  background: var(--forest-wash);
}
.beta-cta__line { margin: 0; max-width: 32em; text-wrap: balance; font-size: .9375rem; line-height: 1.45; font-weight: 500; color: var(--forest-deep); }
.beta-cta__pill { background: var(--forest); min-width: 14rem; }
.beta-cta__pill:hover { background: var(--forest-deep); }
@media (max-width: 480px) {
  .beta-cta { width: 100%; padding: 16px 18px 18px; }
  .beta-cta__pill { width: 100%; min-width: 0; }
}
/* BETA-CTA:end */

/* Two phones: the light home screen in front, the dark one behind it. --p runs 0 → 1: on a desktop the
   script ties it to the scroll; elsewhere it is 1 and a one-time load animation brings them in. */
.hero__stage {
  --p: 1;
  --fx: 14%;
  --bx: -58%;
  display: grid;
  justify-items: center;
  margin-top: clamp(36px, 5vh, 56px);
  padding-block-end: clamp(80px, 9vw, 128px);
}
.hero__stage > * { grid-area: 1 / 1; }
.hero__front { z-index: 2; transform: translateX(calc(var(--fx) * var(--p))) translateY(calc((1 - var(--p)) * 36px)) scale(calc(.92 + .08 * var(--p))); transform-origin: 50% 0; }
.hero__back { z-index: 1; align-self: start; transform: translateX(calc(var(--bx) * var(--p))) translateY(calc(7% * var(--p) + (1 - var(--p)) * 36px)) scale(calc(.86 + .06 * var(--p))); transform-origin: 50% 0; }
.hero__front .device { --w: clamp(232px, 25vw, 352px); }
.hero__back .device { --w: clamp(212px, 22vw, 316px); }
.scrub .hero__stage { --p: 0; }
.scrub .hero__front, .scrub .hero__back { will-change: transform; }

@media (prefers-reduced-motion: no-preference) {
  html:not(.scrub) .hero__front { animation: hero-front 1.3s var(--ease-out) .1s both; }
  html:not(.scrub) .hero__back { animation: hero-back 1.4s var(--ease-out) .5s both; }
}
@keyframes hero-front {
  from { opacity: 0; transform: translateX(0) translateY(56px) scale(.94); }
  to { opacity: 1; transform: translateX(var(--fx)) translateY(0) scale(1); }
}
@keyframes hero-back {
  from { transform: translateX(0) translateY(12%) scale(.86); }
  to { transform: translateX(var(--bx)) translateY(7%) scale(.92); }
}

/* ------------------------------------------------- The round, step by step */
/* Without the script, or on a narrow screen, every step shows its own phone. With the script on a
   wide screen one phone stays in place and its screen changes as each step crosses the middle. */

.story__grid { margin-top: clamp(48px, 6vw, 80px); }
.story__steps { margin: 0; padding: 0; list-style: none; }
.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px clamp(40px, 7vw, 112px);
  align-items: center;
  width: min(100%, 960px);
  margin-inline: auto;
  padding-block: 40px;
}
.step__text { max-width: 28em; }
.step__icon { width: 32px; height: 32px; margin-bottom: 18px; }
.step__text h3 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 700; line-height: 1.12; letter-spacing: -.022em; }
.step__text p { margin: 16px 0 0; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55; color: var(--ink-2); }
.step__shot .device { --w: 280px; }
.story__stage { display: none; }

@media (min-width: 901px) {
  .js .story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
  .js .step { display: flex; min-height: 86vh; padding-block: 0; }
  .js .step__shot { display: none; }
  .js .story__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    position: sticky;
    top: var(--nav-h);
    height: calc(100vh - var(--nav-h));
  }
  .js .step:first-child { min-height: 70vh; }
  .js .step:last-child { min-height: 92vh; }
}
.story__device { --w: min(340px, 30vw, calc((100vh - var(--nav-h) - 72px) / 2.11)); }
.story__screens { position: relative; }
.story__screens img { position: absolute; inset: 0; opacity: 0; transition: opacity .55s var(--ease-out); }
.story__screens img:first-child { position: relative; }
.story__screens img.is-on { opacity: 1; }

/* ------------------------------------------------------- Numbers, splits */

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px clamp(24px, 4vw, 64px);
  margin-block: clamp(64px, 8vw, 112px) 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.stat__num {
  margin: 0;
  font-weight: 700;
  font-size: clamp(4rem, 9vw, 8rem);
  line-height: .95;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat__label { margin: 14px auto 0; max-width: 15em; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.4; color: var(--ink-2); }
.stat--inline { margin: 40px 0 44px; display: flex; align-items: baseline; gap: 18px; }
.stat--inline .stat__num { font-size: clamp(4.5rem, 8vw, 7.5rem); }
.stat--inline .stat__label { margin: 0; max-width: 9em; }

.split {
  display: grid;
  width: min(100% - 2 * var(--gutter), 1040px);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px clamp(48px, 7vw, 112px);
  align-items: center;
  margin-top: clamp(64px, 8vw, 112px);
}
.split > .split__shot { order: 2; }
.split--flip { grid-template-columns: auto minmax(0, 1fr); margin-top: 0; }
.split--flip > .split__shot { order: 0; }
.split--top { align-items: start; }
.split--top .split__shot { position: sticky; top: calc(var(--nav-h) + 40px); }
.split__shot .device { --w: clamp(240px, 24vw, 320px); }
.split__text { max-width: 640px; }
.split__text .lead { margin-inline: 0; }

/* ------------------------------------------------------------- The dial */

.gauge { margin-top: clamp(48px, 6vw, 80px); text-align: center; }
.gauge__dial { position: relative; width: min(100%, 600px); margin-inline: auto; }
.gauge svg { width: 100%; height: auto; overflow: visible; }
.gauge__track, .gauge__band, .gauge__value { fill: none; stroke-width: 24; stroke-linecap: round; }
.gauge__track { stroke: #E3E3E8; }
.gauge__band { stroke: var(--forest-soft); stroke-linecap: butt; stroke-dasharray: 0 48.33 18.34 100; }
.gauge__value { stroke: var(--forest); stroke-dasharray: 100 200; stroke-dashoffset: 43.33; }
.gauge__knob { transform-box: view-box; transform-origin: 220px 220px; transform: rotate(102deg); }
.gauge__knob circle { fill: #fff; stroke: var(--forest); stroke-width: 4; }
.gauge__end { font: 500 15px var(--font); fill: var(--ink-2); text-anchor: middle; }
.gauge__readout { position: absolute; inset-inline: 0; bottom: 13%; }
.gauge__label { margin: 0; font-size: clamp(.9375rem, 1.2vw, 1.0625rem); font-weight: 500; color: var(--ink-2); }
.gauge__num {
  margin: 4px 0 6px;
  font-weight: 700;
  font-size: clamp(4.5rem, 10vw, 8.5rem);
  line-height: .9;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.gauge__band-text { margin: 0; font-size: clamp(.9375rem, 1.2vw, 1.0625rem); color: var(--ink-2); }
.gauge figcaption { margin: 28px auto 0; font-size: .875rem; color: var(--ink-2); }
.js .gauge figcaption { display: none; }
/* After its first fill the dial answers the tabs and the two buttons. */
.gauge.is-live .gauge__value { transition: stroke-dashoffset .7s var(--ease-out); }
.gauge.is-live .gauge__band { transition: stroke-dasharray .7s var(--ease-out); }
.gauge.is-live .gauge__knob { transition: transform .7s var(--ease-out); }

/* The three general scores, as tabs (the app's score sheet). */
.tabs { display: inline-flex; gap: 2px; margin: 0 auto clamp(28px, 4vw, 48px); padding: 4px; border-radius: 980px; background: #E8E8ED; }
.tabs button {
  min-height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 980px;
  background: transparent;
  color: var(--ink-2);
  font: 500 1rem/1 var(--font);
  cursor: pointer;
  transition: background-color .3s var(--ease-out), color .2s, box-shadow .3s;
  -webkit-tap-highlight-color: transparent;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px -4px rgba(0, 0, 0, .14); }

.gauge__play { margin-top: clamp(32px, 4vw, 48px); }
.domains { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.domains li { display: flex; align-items: baseline; gap: 12px; padding: 12px 20px; border-radius: 18px; background: var(--white); }
.domains__name { font-weight: 500; color: var(--ink); }
.domains__share { font-size: .875rem; color: var(--ink-2); }
.domains__num { min-width: 2.2em; font-weight: 700; font-size: 1.375rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--forest); text-align: end; }
.domains li.is-up .domains__num, .domains li.is-down .domains__num { animation: nudge .6s var(--ease-out); }
.domains li.is-down .domains__num { color: var(--action); }
@keyframes nudge { 0% { transform: translateY(0); } 30% { transform: translateY(-4px); } 100% { transform: none; } }
.gauge__btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 24px; }
.pill--answer { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
.pill--answer:hover { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.pill--right .ico { color: var(--forest); }
.pill--wrong .ico { color: var(--action); }
.gauge__last { min-height: 1.5em; margin: 20px auto 0; max-width: 34em; font-size: 1rem; color: var(--ink); }
.demo-note { margin: 10px auto 0; max-width: 38em; font-size: .875rem; color: var(--ink-2); }
.demo-note__tag { display: inline-block; margin-inline-end: 6px; padding: 2px 10px; border-radius: 980px; background: var(--amber-soft); color: #5C3E06; font-weight: 700; font-size: .8125rem; }
/* The first fill, played once as it comes into view (js/main.js, only when motion is welcome). */
.gauge.is-run .gauge__value { transition: stroke-dashoffset 1.8s var(--ease-out); }
.gauge.is-run .gauge__knob { transition: transform 1.8s var(--ease-out); }

/* ------------------------------------------------- The simulation (deep green) */
/* The phone stands inside a ring clock that drains, with the section's time on a frosted card beside
   it. The panel is the app's own setup: a length, the essay switch, the totals and a timeline of the
   sections, every number from content/exam_blueprint.json (js/main.js: BLUEPRINT). A play button runs
   the clock down fast; a tap on a section jumps to it. Without the script the panel shows the full
   exam with the essay and a sentence for the other lengths. On a desktop the green is a curtain that
   opens as the chapter arrives (scrubbed, `scrub` only). */

.exam { position: relative; isolation: isolate; overflow-x: clip; background: var(--deep); }
.exam__curtain {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 42% at 78% 6%, rgba(15, 90, 67, .95), transparent 72%),
    radial-gradient(40% 32% at 12% 96%, rgba(234, 130, 89, .1), transparent 70%),
    var(--deep);
}
.scrub .exam { background: var(--white); }
.scrub .exam__curtain { will-change: clip-path; }

.exam__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  margin-top: clamp(56px, 7vw, 96px);
}
.exam__panel { max-width: 500px; }

/* The length: a segmented control over three real radio buttons. */
.seg {
  display: flex;
  min-inline-size: 0;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: 980px;
  background: rgba(242, 247, 243, .1);
}
.seg label { position: relative; flex: 1; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: block;
  padding: 12px 8px;
  border-radius: 980px;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--on-deep-2);
  white-space: nowrap;
  transition: background-color .3s var(--ease-out), color .3s;
}
.seg label:hover span { color: var(--on-deep); }
.seg input:checked + span { background: var(--on-deep); color: var(--deep); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.seg input:focus-visible + span { outline: 2px solid var(--mint); outline-offset: 2px; }

/* The essay switch, as the app draws it. */
.switch { position: relative; display: inline-flex; align-items: center; gap: 14px; margin-top: 20px; cursor: pointer; }
.switch input { position: absolute; inset-inline-start: 0; width: 52px; height: 32px; margin: 0; opacity: 0; cursor: pointer; }
.switch__track { position: relative; flex: none; width: 52px; height: 32px; border-radius: 16px; background: rgba(242, 247, 243, .22); transition: background-color .3s; }
.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  transition: transform .3s var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--clay-lift); }
.switch input:checked + .switch__track::after { transform: translateX(-20px); }
[dir="ltr"] .switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--mint); outline-offset: 3px; }
.switch__text { font-size: 1.0625rem; font-weight: 500; color: var(--on-deep); }

/* The totals: numbers first, the word under them. */
.exam__sum { display: flex; flex-wrap: wrap; gap: 8px clamp(28px, 3.4vw, 48px); margin: 36px 0 0; }
.exam__sum div { display: flex; flex-direction: column-reverse; }
.exam__sum dd {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.75rem, 4.6vw, 4.25rem);
  line-height: .95;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--on-deep);
}
.exam__sum dt { margin-top: 8px; font-size: .9375rem; color: var(--on-deep-2); }

/* The timeline: a section's width is its minutes; its colour is its domain, as on the ring. */
.tl { display: flex; gap: 6px; margin: 32px 0 0; padding: 0; list-style: none; }
.tl__seg { --c: var(--mint); flex: var(--m, 20) 1 0; min-width: 0; }
.tl__seg--writing { --c: var(--clay-lift); }
.tl__seg--quant { --c: var(--teal-lift); }
.tl__btn, .tl__seg:not(:has(.tl__btn)) {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 0 0 4px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
}
.tl__btn { cursor: pointer; border-radius: 6px; -webkit-tap-highlight-color: transparent; }
.tl__btn:focus-visible { outline-offset: 4px; }
.tl__bar { position: relative; display: block; height: 8px; overflow: hidden; border-radius: 4px; background: rgba(242, 247, 243, .14); }
@supports (background: color-mix(in srgb, red 20%, transparent)) {
  .tl__bar { background: color-mix(in srgb, var(--c) 26%, transparent); }
}
.tl__fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--f, 0) * 100%); border-radius: inherit; background: var(--c); }
.tl__name { overflow: hidden; font-size: .9375rem; font-weight: 500; color: var(--on-deep); white-space: nowrap; text-overflow: ellipsis; }
.tl__min { margin-top: -6px; font-size: .8125rem; color: var(--on-deep-2); white-space: nowrap; }
.tl__seg.is-now .tl__name { color: var(--c); }
.tl__btn:hover .tl__bar { background: rgba(242, 247, 243, .24); }
.exam__nojs { margin: 20px 0 0; font-size: 1rem; line-height: 1.55; color: var(--on-deep-2); }
.js .exam__nojs { display: none; }
html:not(.js) .seg, html:not(.js) .switch, html:not(.js) .exam__play { display: none; }

/* Play, pause, from the start. */
.exam__play { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 12px; margin-top: 36px; }
.pill--play { min-width: 176px; background: var(--on-deep); color: var(--deep); }
.pill--play:hover { background: #fff; color: var(--deep); }
.pill--play .ico--pause, .pill--play[aria-pressed="true"] .ico--play { display: none; }
.pill--play[aria-pressed="true"] .ico--pause { display: block; }
.round-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(242, 247, 243, .13);
  color: var(--on-deep);
  cursor: pointer;
  transition: background-color .2s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.round-btn:hover { background: rgba(242, 247, 243, .22); }
.round-btn:active { transform: scale(.94); }
.round-btn svg { width: 22px; height: 22px; }
.round-btn--light { background: #E8E8ED; color: var(--ink); }
.round-btn--light:hover { background: #DCDCE1; }
.exam__speed { flex-basis: 100%; margin: 0; font-size: .875rem; color: var(--on-deep-2); }

/* The stage: the ring, the phone, the card. */
.exam__stage {
  --w: clamp(240px, min(23vw, 38vh), 310px);
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(var(--w) * 2.3);
}
.exam__device { --w: inherit; z-index: 2; }
.ring { position: absolute; top: 50%; left: 50%; width: calc(var(--w) * 1.95); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.ring svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg) scaleY(-1); }
.ring__track { fill: none; stroke: rgba(143, 208, 174, .12); stroke-width: .6; }
.ring__ticks { fill: none; stroke: rgba(242, 247, 243, .18); stroke-width: 1.4; stroke-dasharray: .07 .93; }
.ring__run {
  --c: var(--mint);
  fill: none;
  stroke: var(--c);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 1.5px rgba(143, 208, 174, .55));
  transition: stroke .4s;
}
.timer {
  position: absolute;
  z-index: 3;
  top: 58%;
  inset-inline-start: calc(50% + var(--w) * .3);
  display: grid;
  min-width: 9.5em;
  padding: 16px 22px;
  border: 1px solid rgba(143, 208, 174, .24);
  border-radius: 22px;
  background: rgba(12, 59, 45, .74);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 50px -24px rgba(0, 20, 12, .8);
}
.timer__time {
  direction: ltr;
  text-align: end;
  font-weight: 700;
  font-size: clamp(2.5rem, 4.2vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
[dir="ltr"] .timer__time { text-align: start; }
.timer__cap { margin-top: 6px; font-size: .9375rem; font-weight: 500; color: var(--on-deep-2); }

.exam__screens { position: relative; }
.exam__screens > * { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease-out); }
.exam__screens > :first-child { position: relative; }
.exam__screens > .is-on { opacity: 1; }
.exam__writing { display: grid; place-content: center; justify-items: center; gap: calc(var(--w) * .04); background: #141C19; color: var(--on-deep); }
.exam__writing svg { width: calc(var(--w) * .2); height: calc(var(--w) * .2); color: var(--clay-lift); }
.exam__writing p { margin: 0; font-weight: 700; font-size: calc(var(--w) * .07); }

.exam-note { display: flex; justify-content: center; align-items: flex-start; gap: 14px; margin-top: clamp(48px, 6vw, 72px); color: var(--on-deep-2); font-size: 1.0625rem; }
.exam-note__icon { flex: none; width: 24px; height: 24px; margin-top: 2px; color: var(--mint); }
.exam-note p { margin: 0 0 6px; }
.exam-note a { font-weight: 500; text-decoration: none; }
.exam-note a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .pill--play, .exam__speed { display: none; }
}

/* -------------------------------------------------------- Free and Pro */

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.plan { padding: clamp(24px, 2.6vw, 36px); border-radius: 28px; background: var(--paper); }
.plan__name { margin-bottom: 20px; font-size: clamp(1.5rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -.015em; }
.plan ul { margin: 0; padding: 0; list-style: none; }
.plan li + li { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hair); }
.plan h4 { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.plan h4 .ico { width: 22px; height: 22px; color: var(--forest); }
.plan li p { margin: 6px 0 0; padding-inline-start: 32px; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.plan__name { display: flex; align-items: center; gap: 12px; }
.plan__name .ico { width: 28px; height: 28px; color: var(--forest); }
.privacy { margin-top: clamp(40px, 5vw, 64px); }
.privacy .point__icon { width: 32px; height: 32px; }
.privacy h3 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 700; letter-spacing: -.022em; }
.privacy p { margin: 14px 0 16px; max-width: 30em; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--ink-2); }

.plans--web { width: min(100% - 2 * var(--gutter), 820px); margin-top: clamp(48px, 6vw, 80px); }
.plans--web .plan { background: var(--white); }
.ticks li { display: flex; align-items: center; gap: 12px; font-size: 1.1875rem; color: var(--ink); }
.plan .ticks li + li { margin-top: 0; padding-top: 0; border: 0; }
.ticks { display: grid; gap: 14px; }
.ticks svg { width: 22px; height: 22px; flex: none; color: var(--forest); }
.ticks--off li { color: var(--ink-2); }
.plans--web .plan__name .ico { width: 26px; height: 26px; }
#web .center { margin-top: 44px; }

/* ------------------------------------------------------------- Shabbat */

.week { display: flex; justify-content: center; gap: clamp(6px, 2.2vw, 28px); margin: clamp(56px, 7vw, 88px) auto 0; padding: 0 var(--gutter); list-style: none; }
.week li { display: grid; justify-items: center; gap: 14px; font-size: clamp(.9375rem, 1.3vw, 1.125rem); font-weight: 500; color: var(--ink-2); }
.week .dot { display: grid; place-items: center; width: clamp(40px, 7.4vw, 96px); aspect-ratio: 1; border-radius: 50%; background: var(--flame-soft); color: var(--action); }
.week .dot svg { width: 48%; height: 48%; }
.week .sat { color: var(--forest); }
.week .sat .dot { background: var(--forest-soft); color: var(--forest); }
/* One small moment, played once (js/main.js adds the classes only when motion is welcome). */
.week.is-waiting .dot { opacity: 0; transform: scale(.4); }
.week.is-lit .dot { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); }
.week.is-lit li:nth-child(2) .dot { transition-delay: .1s; }
.week.is-lit li:nth-child(3) .dot { transition-delay: .2s; }
.week.is-lit li:nth-child(4) .dot { transition-delay: .3s; }
.week.is-lit li:nth-child(5) .dot { transition-delay: .4s; }
.week.is-lit li:nth-child(6) .dot { transition-delay: .5s; }
.week.is-lit li:nth-child(7) .dot { transition-delay: 1s; }

/* --------------------------------------------------------------- Games */

.games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 80px); padding: 0; list-style: none; }
.game { display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 34px); border-radius: 28px; background: var(--white); }
.game--wide { grid-column: span 2; }
.game__icon { width: 30px; height: 30px; margin-bottom: 14px; }
.game h3 { font-size: clamp(1.3125rem, 1.7vw, 1.625rem); font-weight: 700; letter-spacing: -.012em; }
.game p { margin: 8px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.game__demo { display: flex; justify-content: center; gap: 12px; margin: 8px 0 32px; }
.game__pick, .game__card {
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: var(--paper);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
}
.game__pick { flex: 1; max-width: 200px; height: clamp(84px, 9vw, 112px); font-size: clamp(2rem, 3.4vw, 2.75rem); }
.game__card { min-width: 60%; height: clamp(84px, 9vw, 112px); padding-inline: 32px; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.games__rule { margin-top: clamp(36px, 4vw, 56px); max-width: 40em; text-align: center; text-wrap: balance; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--ink); }

/* ------------------------------------------------- Highlights: a sideways row */

.more { padding-block-end: clamp(72px, 9vw, 120px); }
.gallery__track {
  --edge: max(var(--gutter), calc((100% - var(--max)) / 2));
  display: flex;
  gap: 20px;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 4px var(--edge) 24px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline-offset: -2px; }
.card {
  --focus: var(--forest);
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 clamp(280px, 29vw, 380px);
  height: clamp(520px, 46vw, 620px);
  overflow: hidden;
  border-radius: 28px;
  background: var(--paper);
  scroll-snap-align: start;
  container-type: inline-size;
}
.card--dark { --focus: var(--mint); background: var(--deep); }
.card--dark .card__icon { color: var(--mint); }
.card__text { padding: clamp(28px, 2.6vw, 36px) clamp(28px, 2.6vw, 36px) 0; }
.card__icon { width: 28px; height: 28px; margin-bottom: 12px; }
.card h3 { font-size: clamp(1.5rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -.015em; }
.card__text p { margin: 10px 0 0; font-size: 1.0625rem; line-height: 1.45; color: var(--ink-2); }
.card--dark h3 { color: var(--on-deep); }
.card--dark .card__text p, .card--dark .card__when { color: var(--on-deep-2); }
.card__device { --w: 260px; --w: 72cqi; flex: none; margin: clamp(28px, 3vw, 40px) auto 0; }
.card__big { margin-top: auto; padding: 0 clamp(28px, 2.6vw, 36px) clamp(32px, 3vw, 40px); }
.card__figure { margin: 0; font-weight: 700; font-size: clamp(5rem, 8vw, 7.5rem); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--ink); }
.card__word { margin: 0; font-weight: 700; font-size: clamp(3.5rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.03em; color: var(--forest); }
.card__when { margin: 10px 0 0; font-size: 1.0625rem; color: var(--ink-2); }
.card__big .card__when:first-child { margin: 0 0 14px; }
.card__quote { display: block; font-weight: 700; font-size: clamp(1.75rem, 2.4vw, 2.125rem); line-height: 1.18; letter-spacing: -.015em; color: var(--on-deep); quotes: "”" "“"; text-wrap: balance; }
.gallery__nav { display: flex; justify-content: flex-end; gap: 14px; margin-top: 8px; }
.gallery__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #E8E8ED;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s, opacity .2s;
}
.gallery__btn:hover { background: #DCDCE1; }
.gallery__btn:disabled { opacity: .42; cursor: default; }
.gallery__btn svg { width: 20px; height: 20px; }
.gallery__btn--next svg { transform: scaleX(-1); }
[dir="ltr"] .gallery__btn svg { transform: scaleX(-1); }
[dir="ltr"] .gallery__btn--next svg { transform: none; }
html:not(.js) .gallery__nav { display: none; }

/* ----------------------------------------------------- The closing call */

.closing__inner { text-align: center; }
.closing__logo { width: clamp(150px, 15vw, 210px); margin: 0 auto clamp(40px, 5vw, 56px); }
.closing__when { margin: 0 0 14px; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }
.closing { background: radial-gradient(70% 60% at 50% 0%, #0F5A43, transparent 75%), var(--deep); }
.closing__said q { quotes: "”" "“"; }
.closing .lead { margin-top: 28px; }
.closing .hero__note { color: var(--on-deep-2); }
.closing__when { color: var(--on-deep-2); }

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

.faq { padding-block-end: clamp(72px, 8vw, 112px); }
.faq__inner { width: min(100% - 2 * var(--gutter), 880px); }
.faq .headline { font-size: clamp(2.25rem, 4.6vw, 3.75rem); text-align: center; }
.faq__list { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.1875rem, 1.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus, .legal-toc summary .plus {
  position: relative;
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paper);
  transition: transform .4s var(--ease-out), background-color .3s;
}
.faq summary .plus { display: grid; place-items: center; color: var(--ink); }
.faq summary .plus svg { width: 18px; height: 18px; }
.legal-toc summary .plus::before, .legal-toc summary .plus::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  width: 12px; height: 1.75px;
  border-radius: 2px;
  background: var(--ink);
  translate: 50% -50%;
}
.legal-toc summary .plus::after { rotate: 90deg; }
.legal-toc details[open] summary .plus { transform: rotate(45deg); background: #E8E8ED; }
.faq details[open] summary .plus { transform: rotate(180deg); background: #E8E8ED; }
.faq summary:hover .plus { background: #E8E8ED; }
.faq .answer p { margin: 0; padding-bottom: 28px; max-width: 42em; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.55; color: var(--ink-2); }

@media (prefers-reduced-motion: no-preference) {
  @supports selector(::details-content) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content { height: 0; overflow: clip; transition: height .45s var(--ease-out), content-visibility .45s allow-discrete; }
    .faq details[open]::details-content { height: auto; }
  }
}

/* --------------------------------------------------------------- Footer */
/* Quiet, like a product page's: small grey type, the links in columns. Shared with the legal pages. */

.footer { padding-block: 36px 28px; background: var(--paper); font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 28px 24px; padding-bottom: 28px; border-bottom: 1px solid var(--hair); }
.footer__col h2 { margin: 0 0 10px; font-size: .8125rem; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.footer__col ul { margin: 0; padding: 0; list-style: none; }
.footer__col li { margin-bottom: 8px; }
.footer__col a { color: #424245; text-decoration: none; }
.footer__col a:hover { color: var(--ink); text-decoration: underline; }
.footer__col a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 18px; }

/* ---------------------------------------------------------------- Toast */

.toast { position: fixed; inset-inline: 0; bottom: 28px; z-index: 120; display: flex; justify-content: center; padding-inline: 16px; pointer-events: none; }
.toast p {
  margin: 0;
  padding: 13px 22px;
  border-radius: 980px;
  background: rgba(10, 67, 49, .96);
  color: #fff;
  font-size: .9375rem;
  font-weight: 500;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.toast.is-on p { opacity: 1; transform: none; }

/* -------------------------------------------------------- Legal pages */

.legal-hero { padding-block: clamp(48px, 7vw, 96px) 40px; }
.legal-hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.legal-meta span { padding: 6px 14px; border-radius: 999px; background: var(--paper); color: var(--ink-2); font-size: .875rem; }
.legal-meta .draft { background: var(--amber-soft); color: #5C3E06; font-weight: 500; }
.legal-layout { display: grid; gap: 40px; padding-bottom: clamp(64px, 8vw, 112px); }
.legal-toc { font-size: .9375rem; }
.legal-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc summary .plus { width: 28px; height: 28px; }
.legal-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.legal-toc a { display: block; padding: 7px 12px; border-radius: 10px; color: var(--ink-2); text-decoration: none; line-height: 1.4; }
.legal-toc a:hover, .legal-toc a.is-on { background: var(--paper); color: var(--ink); }
.prose { max-width: 44em; font-size: 1.0625rem; line-height: 1.75; }
.prose > .intro { font-size: 1.25rem; line-height: 1.6; color: var(--ink-2); }
.prose h2 { font-size: clamp(1.625rem, 2.6vw, 2.125rem); font-weight: 700; letter-spacing: -.02em; margin: 2.2em 0 .6em; scroll-margin-top: calc(var(--nav-h) + 24px); }
.prose h3 { font-size: 1.3125rem; font-weight: 700; margin: 1.8em 0 .5em; }
.prose ul, .prose ol { padding-inline-start: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--ink-2); }
.prose blockquote { margin: 1.5em 0; padding: 20px 24px; border-radius: 20px; background: var(--paper); color: var(--ink); }
.prose blockquote p:last-child { margin: 0; }
.prose strong { color: var(--ink); }
mark.ph { padding: 1px 6px; border-radius: 6px; background: #FFF1B8; color: #5C3E06; font-weight: 500; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.ph.ok { background: #E8E0FA; color: #3C2A7A; }
.draft-note { margin-bottom: 36px; padding: 18px 22px; border-radius: 20px; background: var(--amber-soft); color: #5C3E06; font-size: .98rem; }
.draft-note b { font-weight: 700; }
/* delete-account.html: the account id from the URL fragment (hidden until the page script fills it). */
.account-box { margin: 0 0 36px; padding: 22px 24px; border-radius: 20px; background: var(--paper); }
.account-box[hidden] { display: none; }
.account-box p { margin: 0 0 12px; }
.account-box__label { font-weight: 700; color: var(--ink); }
.account-box__id { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.account-box code { padding: 6px 12px; border-radius: 10px; background: var(--white); color: var(--ink); font-size: 1rem; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.account-box .account-box__note { margin: 0; color: var(--ink-2); font-size: .92rem; }
@media (min-width: 1000px) {
  .legal-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 72px; }
  .legal-toc { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; max-height: calc(100vh - var(--nav-h) - 56px); overflow: auto; }
}
@media (max-width: 999px) {
  /* Folded on a phone (the page's inline script opens it on a wide screen). */
  .legal-toc { padding: 4px 18px; border-radius: 20px; background: var(--paper); }
  .legal-toc summary { padding-block: 12px; }
  .legal-toc ol { padding-bottom: 14px; }
  .legal-hero { padding-block: 40px 28px; }
  .legal-layout { gap: 28px; }
}

/* -------------------------------------------------------------- Narrow */

@media (max-width: 1000px) {
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans:not(.plans--web) { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero__stage { --fx: 10%; --bx: -50%; }
  .hero__front .device { --w: min(58vw, 300px); }
  .hero__back .device { --w: min(50vw, 262px); }
  .step { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-block: 36px; }
  .step + .step { border-top: 1px solid var(--hair); }
  .step__text { margin-inline: auto; }
  .step .seq { justify-content: center; }
  .step__shot .device { --w: min(62vw, 270px); }
  .split, .split--flip { grid-template-columns: 1fr; }
  .split > .split__shot, .split--flip > .split__shot { order: 2; justify-self: center; }
  .split--top .split__shot { position: static; }
  .split.split--top > .split__shot { order: 0; }
  .split__shot .device { --w: min(62vw, 290px); }
  .split__text { max-width: none; }
  .points3 { grid-template-columns: 1fr; max-width: 34em; margin-inline: auto; text-align: center; }
  .points3 .point__icon, .step__icon { margin-inline: auto; }
  .exam__grid { grid-template-columns: 1fr; gap: 28px; }
  .exam__stage { order: -1; --w: min(210px, 52vw); min-height: calc(var(--w) * 2.2); }
  .exam__panel { max-width: 560px; justify-self: center; width: 100%; }
  .ring { width: min(calc(var(--w) * 1.75), 104vw); }
  .timer { top: auto; bottom: 8%; inset-inline-start: auto; inset-inline-end: 0; padding: 12px 16px; min-width: 0; }
  .timer__time { font-size: 2.25rem; }
  .stat--inline { justify-content: flex-start; }
}
@media (max-width: 734px) {
  .stats { grid-template-columns: 1fr; gap: 44px; }
  .games { grid-template-columns: 1fr; }
  .game--wide { grid-column: auto; }
  .plans--web { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__col:first-child { grid-column: 1 / -1; }
  .footer__col a { display: inline-block; padding-block: 5px; }
  .footer__bottom { flex-direction: column; }
}
@media (max-width: 480px) {
  .hero__actions .pill { width: 100%; }
  .hero__actions { gap: 18px; }
  .tl__name { font-size: .8125rem; }
  .tl { gap: 4px; }
  .seg span { font-size: 1rem; padding-inline: 4px; }
  .tabs button { padding: 0 14px; font-size: .9375rem; }
  .exam-note { text-align: start; }
  .card { flex-basis: 84vw; height: 540px; }
  .week .dot svg { width: 52%; height: 52%; }
}

/* ------------------------------------------------------ Reduced motion */

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