@font-face {
  font-family: "Bungee";
  src: url("/fonts/Bungee-Regular.woff2") format("woff2");
  font-display: swap;
}
html:has(> body.site) {
  background: #1e2237;
}
.site {
  --canvas: #1e2237;
  --surface: #29314c;
  --ink: #191121;
  --orange: #f69c4e;
  --cream: #f8efa8;
  --body: #e6e1d3;
  --mute: #c9c3b4;
  --gold: #ffd24a;
  --kid: #3b82f6;
  --ahead: #4a5170;
  --dot: #6b7396;
  --r: 4px;
  --outline: 2px solid var(--ink);
  --edge: 0 3px 0 var(--ink);
  --display: "Bungee", "Arial Black", sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  position: relative;
  isolation: isolate;
  margin: 0;
  min-height: 100%;
  color: var(--body);
  color-scheme: dark;
  background: var(--canvas);
  font: 17px / 1.5 var(--text);
  -webkit-text-size-adjust: 100%;
}
/* The Dot Grid Rule: one fixed, centred layer behind content; it never scrolls (ADR-0089). */
.site::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='7' y='0' width='2' height='2' fill='%2329314c'/%3E%3C/svg%3E")
    50% 0 / 16px 16px;
}
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  .site::before {
    display: none;
  }
}
.site *,
.site *::before,
.site *::after {
  box-sizing: border-box;
}
.site ::selection {
  background: var(--orange);
  color: var(--ink);
}
.site a {
  color: var(--cream);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.site a:hover {
  text-decoration-color: var(--orange);
}
.site a:focus-visible,
.site summary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  border-radius: var(--r);
}
.site p {
  margin: 0;
}
.site .disp {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
  font-weight: 400;
  color: var(--cream);
}
.site .disp em {
  font-style: normal;
  color: var(--orange);
}
.site .wrap {
  padding-inline: 20px;
  max-width: 1120px;
  margin: 0 auto;
  container-type: inline-size;
}

/* Header: the mark, and the App Store at the right. No sign-in: the web app retires (ADR-0027). */
.site .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 12px;
}
.site .top-soon {
  font-size: 15px;
  min-height: 44px;
}
.site .top-soon .wide {
  display: none;
}
.site .top-badge {
  margin: 0;
}
.site .top-badge img {
  height: 40px;
}
.site .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  min-height: 44px;
}
.site .mark {
  font-family: var(--display);
  font-size: 30px;
  color: var(--orange);
  text-shadow: 2px 3px 0 var(--ink);
}
.site .word {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--cream);
}

/* The claims and the prize: one ladder. On a phone it continues the season's
   vertical track; on a wide screen it becomes a row of rungs, like the app's bar. */
.site .ladder {
  display: grid;
  gap: 44px;
  position: relative;
}

/* Screenshots open whole in a lightbox (site.js); without script, the link opens the image. */
.site .zoom {
  display: block;
  position: relative;
  max-width: 300px;
  border-radius: var(--r);
}
.site .zoom:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}
.site .zoom-hint {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--r);
}
.site .lightbox {
  padding: 0;
  border: var(--outline);
  border-radius: var(--r);
  background: var(--ink);
  max-width: 92vw;
  max-height: 92vh;
  overflow: hidden;
}
.site .lightbox::backdrop {
  background: rgb(25 17 33 / 0.86);
}
.site .lightbox img {
  display: block;
  max-width: 92vw;
  max-height: calc(92vh - 4px);
  width: auto;
  height: auto;
}
.site .lightbox .close {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border: var(--outline);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--cream);
  font: 400 24px / 1 var(--display);
  box-shadow: var(--edge);
  cursor: pointer;
}
.site .lightbox .close:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}
html:has(.lightbox[open]) {
  overflow: hidden;
}

/* The season: the hero is rung 0, every claim a rung, the App Store the gilded last one.
   Track: 20px, 3px corners, recessed (season-bar contract). Fill: the kid's one flat colour under a hard sheen. */
.site .season {
  position: relative;
  display: grid;
  gap: 44px;
  padding-block: 12px 8px;
  --col: 28px;
  --gap: 16px;
  --trackw: 20px;
}
.site .season::before {
  content: "";
  position: absolute;
  left: calc((var(--col) - var(--trackw)) / 2);
  top: 20px;
  bottom: 36px;
  width: var(--trackw);
  border-radius: 3px;
  background: var(--ink);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.site .season::after {
  content: "";
  position: absolute;
  left: calc((var(--col) - var(--trackw)) / 2 + 3px);
  top: 23px;
  bottom: 39px;
  width: calc(var(--trackw) - 6px);
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 3px, transparent 3px), var(--kid);
  transform-origin: top;
}
.site .step {
  display: grid;
  grid-template-columns: var(--col) 1fr;
  gap: var(--gap);
  position: relative;
  z-index: 1;
}
.site .step > div {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: start;
}
.site .rung {
  width: var(--col);
  height: var(--col);
  border-radius: var(--r);
  border: 2px solid var(--ink);
  box-shadow: var(--edge);
  background: var(--cream);
  margin-top: 2px;
}
.site .rung.zero {
  background: var(--kid);
}
.site .rung.gold {
  background: var(--gold);
  position: relative;
}
.site .rung.gold::before,
.site .rung.gold::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--cream);
  border: 1px solid var(--ink);
}
.site .rung.gold::before {
  top: -10px;
  right: -10px;
}
.site .rung.gold::after {
  bottom: -9px;
  left: -10px;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .site .season::after {
      animation: sq-fill linear both;
      animation-timeline: view();
      animation-range: entry 30% exit 70%;
    }
    .site .step .rung:not(.zero) {
      animation: sq-reach steps(1, end) both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
    @keyframes sq-fill {
      from {
        transform: scaleY(0.06);
      }
      to {
        transform: scaleY(1);
      }
    }
    @keyframes sq-reach {
      from {
        background: var(--ahead);
      }
      to {
        background: var(--cream);
      }
    }
    .site .step .rung.gold {
      animation-name: sq-reach-gold;
    }
    .site .step .rung.gold::before,
    .site .step .rung.gold::after {
      animation: sq-spark steps(1, end) both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
    @keyframes sq-spark {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    @keyframes sq-reach-gold {
      from {
        background: var(--ahead);
      }
      to {
        background: var(--gold);
      }
    }
  }
}

/* Hero (rung 0) */
.site .hero h1 {
  font-size: 34px;
}
.site .hero .lede {
  color: var(--mute);
  max-width: 36ch;
}
.site .step h2 {
  font-size: 19px;
}
.site .step p {
  font-size: 16px;
  color: var(--mute);
  max-width: 40ch;
}
.site .prize h2 {
  font-size: 24px;
}
.site .prize {
  align-items: end;
} /* the gold rung sits beside the App Store line: the season ends there */

/* The one call to action. Before 2.0.0: the coming-soon line. At 2.0.0: Apple's unmodified badge, 48px, clear space 1/4 its height. */
.site .get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.site .badge {
  display: inline-block;
  line-height: 0;
  margin: 12px 0;
}
.site .badge img {
  height: 48px;
  width: auto;
  display: block;
}
.site .soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  font-weight: 600;
  min-height: 48px;
}
.site .soon .device {
  flex: none;
  color: var(--orange);
}
.site .soon:not(.dev)::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--orange);
  border: 1px solid var(--ink);
}
.site .facts {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 15px;
  color: var(--mute);
}
.site .facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site .facts li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--cream);
  border: 1px solid var(--ink);
}
.site .android {
  font-size: 15px;
  color: var(--mute);
  flex: 1 1 100%;
}
/* The wait list: a link-sized summary that opens a one-field form in place. */
.site .android summary {
  display: inline-block;
  padding-block: 12px;
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site .android summary::-webkit-details-marker {
  display: none;
}
.site .waitlist,
.site .waitlist-nojs {
  display: grid;
  gap: 10px;
  max-width: 460px;
  margin: 4px 0 0;
}
.site .waitlist[hidden],
.site .waitlist-nojs[hidden] {
  display: none;
}
.site .waitlist label {
  color: var(--body);
}
.site .waitlist-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.site .waitlist input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: var(--outline);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--cream);
  font: 16px / 1.2 var(--text);
}
.site .waitlist input:focus-visible,
.site .waitlist button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.site .waitlist button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 18px;
  border: var(--outline);
  border-radius: var(--r);
  background: var(--orange);
  color: var(--ink);
  box-shadow: var(--edge);
  font: 700 16px / 1 var(--text);
  cursor: pointer;
}
.site .waitlist button:disabled {
  opacity: 0.7;
  cursor: progress;
}
.site .waitlist-msg {
  margin: 0;
  font-weight: 600;
}
.site .waitlist-msg:empty {
  display: none;
}
.site .waitlist-msg[data-kind="ok"] {
  color: var(--gold);
}
.site .waitlist-msg[data-kind="bad"] {
  color: #ffa48f;
}

/* App screens: the store run's device crop, ended on the device's own ink chin. */
.site .shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
  border: var(--outline);
  border-bottom-width: 12px;
  box-shadow: var(--edge);
  background: var(--ink);
}

/* Free and Sidequest Plus side by side (Shahrum, 2026-10-09): what both get, then what Plus adds. */
.site .vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.site .plans {
  display: grid;
  gap: 14px;
  padding-block: 36px 8px;
}
.site .plans > h2 {
  font-size: 22px;
}
.site .compare {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
}
.site .compare th,
.site .compare td {
  padding: 10px 8px;
  text-align: center;
  vertical-align: middle;
  border-top: 1px solid var(--ink);
}
.site .compare thead th,
.site .compare thead td {
  border-top: 0;
  vertical-align: bottom;
}
.site .compare tbody th {
  position: relative;
  text-align: left;
  font-weight: 400;
  color: var(--body);
  padding-left: 50px;
  overflow-wrap: break-word;
  hyphens: auto;
}
.site .compare thead td {
  width: 44%;
}
.site .compare thead th {
  width: 28%;
}
.site .compare tbody td {
  color: var(--cream);
  font-weight: 600;
}
.site .compare .tier {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 20px;
  line-height: 1.15;
  color: var(--cream);
}
.site .compare th.plus {
  width: 28%;
  background: var(--orange);
  color: var(--ink);
  border-top-right-radius: var(--r);
}
.site .compare th.plus .tier {
  color: var(--ink);
}
.site .compare th.plus {
  padding-block: 12px;
}
.site .compare .plus-name {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
}
.site .compare .price {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--body);
  margin-top: 4px;
}
/* Plus's price hangs below its column, on its orange (Shahrum, 2026-10-09). */
.site .compare tfoot td.plus {
  vertical-align: top;
  padding-block: 12px 14px;
  background: var(--orange);
  color: var(--ink);
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  border-radius: 0 0 var(--r) var(--r);
  box-shadow: 0 3px 0 var(--ink);
}
.site .compare tfoot td.plus .price {
  margin-top: 0;
  color: var(--ink);
  line-height: 1.35;
}

.site .compare tbody td:last-child {
  background-image: linear-gradient(rgb(246 156 78 / 0.1), rgb(246 156 78 / 0.1));
}
/* Free reads apart from the feature names in its own tint; Plus's values are gold. */
.site .compare tbody td:nth-child(2) {
  background-image: linear-gradient(rgb(248 239 168 / 0.07), rgb(248 239 168 / 0.07));
}
.site .compare tbody td:last-child {
  color: var(--gold);
}
/* The trial sits in Plus's own head, where the price is (ADR-0058: once per family). */
.site .compare .first {
  display: block;
  margin: 10px auto 0;
  padding: 5px 8px 6px;
  max-width: 14em;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.site .compare .first-who {
  display: block;
  color: var(--cream);
  font-size: 12px;
  font-weight: 600;
}
.site .compare .yes {
  display: inline-block;
  vertical-align: middle;
}
.site .compare .feat {
  position: absolute;
  left: 14px;
  top: 50%;
  margin-top: -12px;
  color: var(--orange);
}
.site .compare .no {
  display: inline-block;
  vertical-align: middle;
  color: var(--dot);
}
/* A line parts Free from Plus. */
.site .compare th.plus,
.site .compare tbody td:last-child {
  border-left: 2px solid var(--ink);
}
/* Plus-only rows read as bonuses: a gold edge, the name in cream, and a tag. */
.site .compare tr.bonus th {
  color: var(--cream);
  font-weight: 600;
  box-shadow: inset 4px 0 0 var(--gold);
}
/* The app's Plus mark, in gold, beside each Plus-only feature (Shahrum,
   2026-10-09): the same shape as the plans heading's mark. */
.site .compare .bonus-mark {
  display: inline-block;
  width: 36px;
  height: 16px;
  margin-left: 8px;
  background: var(--gold);
  -webkit-mask: url("/site/plus-mark.svg") center / contain no-repeat;
  mask: url("/site/plus-mark.svg") center / contain no-repeat;
  vertical-align: -2px;
}
.site .compare tr.bonus td:last-child {
  background-image: linear-gradient(rgb(246 156 78 / 0.22), rgb(246 156 78 / 0.22));
}
/* The app's own Sidequest Plus mark (ios/App/App/PlusMark.swift), in ink on the orange head. */
.site .compare .plus-mark {
  display: block;
  flex: none;
  width: 48px;
  height: auto;
}
/* Free's head wears its column's tint. */
.site .compare thead th:not(.plus) {
  background: linear-gradient(rgb(248 239 168 / 0.07), rgb(248 239 168 / 0.07)) var(--surface);
}
/* The table has no frame of its own: its cells draw it, so the empty corner
   over the feature names and the space beside the price show the page. */
.site .compare tbody > tr > * {
  background-color: var(--surface);
}
.site .compare thead [scope] {
  border-top: 2px solid var(--ink);
}
.site .compare thead [scope]:first-of-type {
  border-left: 2px solid var(--ink);
  border-top-left-radius: var(--r);
}
.site .compare thead [scope]:last-child,
.site .compare tbody tr > :last-child,
.site .compare tfoot .plus {
  border-right: 2px solid var(--ink);
}
.site .compare tbody [scope] {
  border-left: 2px solid var(--ink);
}
.site .compare tbody tr:first-child [scope] {
  border-top: 2px solid var(--ink);
  border-top-left-radius: var(--r);
}
.site .compare tbody tr:last-child > * {
  border-bottom: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.site .compare tbody tr:last-child [scope] {
  border-bottom-left-radius: var(--r);
}
.site .compare tbody tr.bonus:last-child [scope] {
  box-shadow:
    inset 4px 0 0 var(--gold),
    0 3px 0 var(--ink);
}
.site .compare thead td,
.site .compare tfoot .gap {
  border: 0;
  padding: 0;
  background: none;
}
.site .fine {
  font-size: 14px;
  color: var(--mute);
  max-width: 60ch;
}

/* Private and safe for kids: four plain points from the privacy policy, and links to it. */
.site .safety {
  display: grid;
  gap: 18px;
  padding-block: 56px 8px;
}
.site .safety > h2 {
  font-size: 22px;
}
.site .points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.site .points li {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 14px;
  row-gap: 4px;
}
.site .points svg {
  grid-row: span 2;
  color: var(--orange);
}
.site .points h3 {
  margin: 0;
  font-size: 17px;
  color: var(--cream);
}
.site .points p {
  font-size: 16px;
  color: var(--mute);
}
.site .safety .more {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

/* Questions parents ask: visible, so the FAQ data matches the page. */
.site .faq {
  display: grid;
  padding-block: 36px 8px;
}
.site .faq > h2 {
  font-size: 22px;
  margin-bottom: 10px;
}
.site .faq details {
  border-top: var(--outline);
  padding-block: 4px;
}
.site .faq summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--cream);
  padding-block: 8px;
  min-height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.site .faq summary::-webkit-details-marker {
  display: none;
}
.site .faq summary::after {
  content: "＋";
  color: var(--orange);
  font-weight: 400;
}
.site .faq details[open] summary::after {
  content: "−";
}
.site .faq details > p {
  padding-bottom: 16px;
  font-size: 16px;
  color: var(--mute);
}

/* Footer: policies only. */
.site footer {
  border-top: var(--outline);
  padding-block: 14px 32px;
  display: grid;
  gap: 12px 32px;
  font-size: 15px;
  margin-top: 28px;
}
.site .foot-main,
.site .foot-made {
  display: grid;
  gap: 4px;
  align-content: start;
}
/* Two columns once there is room: the mark and links left, who made it right. */
@container (min-width: 700px) {
  .site footer {
    grid-template-columns: 1fr auto;
  }
  .site .foot-made {
    align-content: end;
    justify-items: end;
    text-align: right;
  }
}
.site footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}
.site footer nav a {
  padding-block: 11px;
}
.site footer .contact {
  color: var(--mute);
}
.site .contact a,
.site .safety .more a {
  display: inline-block;
  padding-block: 11px;
}
.site .foot-brand .mark {
  font-size: 26px;
}
.site .foot-brand .word {
  font-size: 17px;
}
.site footer .maker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 5px;
  color: var(--body);
  font-size: 15px;
}
.site .maker img {
  display: block;
  height: 1em;
  width: auto;
}
.site footer small {
  color: var(--mute);
  font-size: 13px;
}

@container (min-width: 900px) {
  .site .top {
    padding-block: 20px;
  }
  .site .season {
    --col: 48px;
    --gap: 40px;
    gap: 80px;
    padding-block: 36px 8px;
  }
  .site .hero h1 {
    font-size: 72px;
    max-width: 12ch;
  }
  .site .hero .lede {
    font-size: 21px;
  }
  .site .top-soon .wide {
    display: inline;
  }
  .site .mark {
    font-size: 40px;
  }
  .site .word {
    font-size: 26px;
  }
  .site .step h2 {
    font-size: 34px;
  }
  .site .step p {
    font-size: 19px;
    max-width: 34ch;
  }
  .site .prize h2 {
    font-size: 44px;
  }
  .site .plans {
    padding-block: 96px 8px;
  }
  .site .plans > h2,
  .site .faq > h2 {
    font-size: 30px;
  }
  .site .faq {
    padding-block: 72px 8px;
  }
  .site footer {
    padding-block: 22px 40px;
    margin-top: 56px;
  }
}

/* Policy pages: Lane F's text, a 68ch measure, no script, no sign-in. */
.site.legal main {
  padding-block: 4px 26px;
  display: grid;
  gap: 12px;
  max-width: 68ch;
}
.site.legal h1 {
  font-size: 26px;
  margin-top: 16px;
}
.site.legal h2 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 17px;
  font-weight: 400;
  color: var(--cream);
  margin: 14px 0 0;
  padding-top: 16px;
  border-top: var(--outline);
}
.site.legal b,
.site.legal strong {
  color: var(--cream);
}
.site.legal h3 {
  font-size: 17px;
  color: var(--cream);
  margin: 6px 0 0;
}
.site.legal ul {
  margin: 0;
  padding-left: 1.25em;
  display: grid;
  gap: 6px;
}
.site.legal li::marker {
  color: var(--orange);
}
.site.legal .meta {
  color: var(--mute);
  font-size: 15px;
}
.site.legal .subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  font-size: 15px;
}
.site.legal .subnav a {
  padding-block: 12px;
}
.site.legal .subnav a[aria-current] {
  text-decoration-color: var(--orange);
  text-decoration-thickness: 3px;
}
@container (min-width: 900px) {
  .site.legal h1 {
    font-size: 40px;
  }
}

/* Between 900 and 1000 wide, each claim keeps its screenshot beside it. */
@container (min-width: 900px) and (max-width: 999px) {
  .site .step:not(.hero):not(.prize) > div {
    grid-template-columns: 1fr 300px;
    column-gap: 40px;
  }
  .site .step:not(.hero):not(.prize) > div .zoom {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}

/* From 1000 wide, the ladder is a row of rungs on one horizontal track (Shahrum, 2026-10-09:
   no wasted space beside each claim). The hero sits above it without a rung. */
@container (min-width: 1000px) {
  .site .season {
    gap: 64px;
    --ladder-gap: 28px;
    --last: 0.9;
  }
  .site .season::before,
  .site .season::after,
  .site .hero .rung.zero {
    display: none;
  }
  .site .hero {
    grid-template-columns: 1fr;
  }
  .site .ladder {
    grid-template-columns: repeat(4, 1fr) 0.9fr;
    column-gap: var(--ladder-gap);
  }
  .site .ladder .step {
    grid-template-columns: 1fr;
    gap: 22px;
    align-content: start;
  }
  .site .ladder::before,
  .site .ladder::after {
    content: "";
    position: absolute;
    left: calc(var(--col) / 2);
    right: calc((100% - 4 * var(--ladder-gap)) * var(--last) / (4 + var(--last)) - var(--col) / 2);
  }
  .site .ladder::before {
    top: calc(2px + (var(--col) - var(--trackw)) / 2);
    height: var(--trackw);
    border-radius: 3px;
    background: var(--ink);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  .site .ladder::after {
    top: calc(5px + (var(--col) - var(--trackw)) / 2);
    height: calc(var(--trackw) - 6px);
    margin-inline: 3px;
    border-radius: 2px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0 3px, transparent 3px), var(--kid);
    transform-origin: left;
  }
  .site .ladder .step h2 {
    font-size: 22px;
  }
  .site .ladder .step p {
    font-size: 16px;
  }
  .site .ladder .zoom {
    max-width: 100%;
  }
  .site .ladder .prize {
    align-items: start;
  }
  .site .ladder .prize h2 {
    font-size: 22px;
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @container (min-width: 1000px) {
      .site .ladder::after {
        animation: sq-fill-x linear both;
        animation-timeline: view();
        animation-range: entry 40% cover 60%;
      }
    }
    @keyframes sq-fill-x {
      from {
        transform: scaleX(0.06);
      }
      to {
        transform: scaleX(1);
      }
    }
  }
}

/* "Learn more": the questions' kicker line. */
.site .faq .kicker {
  color: var(--mute);
  margin: -4px 0 12px;
}

/* The header's App Store line: no flex gap inside the words. */
.site .top-soon {
  gap: 0;
}
.site .top-soon::before {
  margin-right: 10px;
}

/* The walkthrough (Shahrum, 2026-10-09): the four screens in one phone, each showing
   where you would tap, crossfading on a loop. Pausable; still under reduced motion. */
.site .hero .walk {
  display: none;
  grid-column: 2;
  margin: 8px 0 0;
  gap: 10px;
  justify-items: center;
  width: min(100%, 260px);
}
.site .walk-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 702 / 1200;
  border: var(--outline);
  border-bottom-width: 12px;
  border-radius: var(--r);
  box-shadow: var(--edge);
  background: var(--ink);
  overflow: hidden;
}
.site .walk-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.site .walk-screen img.on {
  opacity: 1;
}
.site .tap {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 3px solid var(--cream);
  border-radius: var(--r);
  box-shadow: 0 0 0 2px var(--ink);
  opacity: 0;
  pointer-events: none;
}
.site .tap.go {
  animation: sq-tap 0.9s ease-out both;
}
@keyframes sq-tap {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}
.site .walk-step {
  font-family: var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
  font-size: 14px;
  text-align: center;
  min-height: 2.4em;
}
.site .walk-nav {
  display: flex;
  align-items: center;
}
/* An empty slot the pause button's width, so the squares centre under the phone. */
.site .walk-nav::after {
  content: "";
  width: 44px;
}
.site .walk-nav button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cream);
  cursor: pointer;
  border-radius: var(--r);
}
.site .walk-dot::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--dot);
  box-shadow: 0 2px 0 var(--ink);
}
.site .walk-dot.on::before {
  background: var(--cream);
}
.site .walk-nav button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -4px;
}
@media (prefers-reduced-motion: reduce) {
  .site .walk-screen img {
    transition: none;
  }
}

/* On a wide screen the walkthrough sits beside the headline. */
@container (min-width: 900px) {
  .site .hero {
    grid-template-columns: var(--col) 1fr 300px;
    column-gap: var(--gap);
  }
  .site .hero > div {
    align-self: center;
  }
  .site .hero .walk {
    display: grid;
    grid-column: 3;
    grid-row: 1;
    width: 300px;
    margin: 0;
  }
}
@container (min-width: 1000px) {
  .site .hero {
    grid-template-columns: 1fr 300px;
  }
  .site .hero .walk {
    grid-column: 2;
  }
  /* Each claim's heading, words, and screenshot line up across the row. */
  .site .ladder {
    grid-template-rows: repeat(4, auto);
    row-gap: 0;
  }
  .site .ladder .step {
    grid-row: span 4;
    grid-template-rows: subgrid;
    gap: 0;
  }
  .site .ladder .step > div {
    display: contents;
  }
  /* The prize keeps its own short stack, so its long heading never stretches the row. */
  .site .ladder .prize {
    grid-template-rows: none;
  }
  .site .ladder .prize > div {
    display: grid;
    gap: 16px;
    align-content: start;
  }
  .site .ladder .step > .rung,
  .site .ladder .step h2,
  .site .ladder .step p {
    margin-bottom: 16px;
  }
}

@container (max-width: 359px) {
  .site .top-soon {
    font-size: 13px;
    white-space: nowrap;
  }
  .site .mark {
    font-size: 26px;
  }
  .site .word {
    font-size: 17px;
  }
}

@container (min-width: 900px) {
  .site .safety {
    padding-block: 96px 8px;
  }
  .site .facts {
    font-size: 17px;
  }
  .site .safety > h2 {
    font-size: 30px;
  }
  .site .points {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
  .site .points li {
    grid-template-columns: 1fr;
    row-gap: 10px;
    align-content: start;
  }
  .site .points svg {
    grid-row: auto;
  }
  .site .compare {
    font-size: 17px;
  }
  .site .compare th,
  .site .compare td {
    padding: 14px 20px;
  }
  .site .compare tbody th {
    padding-left: 60px;
  }
  .site .compare .feat {
    left: 22px;
  }
  .site .compare .tier {
    font-size: 30px;
  }
  .site .compare .price {
    font-size: 15px;
  }
  /* Questions in two columns, each answer filling its column. */
  .site .faq {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    align-items: start;
  }
  .site .faq > h2 {
    grid-column: 1 / -1;
  }
}
@container (min-width: 1000px) {
  .site .ladder .step h2 {
    font-size: 24px;
  }
}

@container (max-width: 380px) {
  .site .compare {
    font-size: 14px;
  }
  .site .compare th,
  .site .compare td {
    padding: 10px 4px;
  }
  .site .compare tbody th {
    padding-left: 34px;
  }
  .site .compare .feat {
    left: 8px;
    margin-top: -10px;
    width: 20px;
    height: 20px;
  }
  .site .compare .tier {
    font-size: 16px;
    letter-spacing: 0;
  }
  .site .compare .plus-mark {
    width: 34px;
  }
  /* On a phone the two plans take more of the row, still the same width as each other. */
  .site .compare thead td {
    width: 36%;
  }
  .site .compare thead th,
  .site .compare th.plus {
    width: 32%;
  }
  .site .compare .price {
    font-size: 12px;
  }
}
@container (max-width: 300px) {
  .site .compare .tier {
    font-size: 13px;
  }
}

/* The drawn-on motion over the walkthrough's real screens. Sizes follow the phone's width. */
.site .walk-screen {
  container-type: inline-size;
}
.site .fx {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  font-family: var(--text);
}
.site .fx-add {
  background: rgb(25 17 33 / 0.45);
  animation: sq-fade 0.3s ease both;
}
.site .fx-add .sheet {
  position: absolute;
  inset: auto 0 0;
  height: 56%;
  display: grid;
  align-content: start;
  gap: 4cqw;
  padding: 3cqw 6cqw 0;
  background: var(--surface);
  border-top: 2px solid var(--ink);
  border-radius: 4cqw 4cqw 0 0;
  animation: sq-sheet 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.site .fx-add .grab {
  justify-self: center;
  width: 12cqw;
  height: 1.4cqw;
  border-radius: 1cqw;
  background: var(--ahead);
}
.site .fx-add b {
  font: 400 6cqw / 1.1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
}
.site .fx-add .field {
  padding: 3cqw 4cqw;
  border: 2px solid var(--ink);
  border-radius: 2cqw;
  background: var(--canvas);
  color: var(--cream);
  font-size: 4.6cqw;
}
.site .fx-add .field::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--orange);
  animation: sq-caret 0.8s steps(1) infinite;
}
.site .fx-add .chips {
  display: flex;
  gap: 2.5cqw;
}
.site .fx-add .chips span {
  padding: 1.6cqw 3.4cqw;
  border: 2px solid var(--ink);
  border-radius: 6cqw;
  background: var(--canvas);
  color: var(--body);
  font-size: 3.8cqw;
}
.site .fx-add .go {
  justify-self: stretch;
  text-align: center;
  padding: 3cqw;
  border: 2px solid var(--ink);
  border-radius: 6cqw;
  background: var(--orange);
  color: var(--ink);
  font-weight: 700;
  font-size: 4.6cqw;
  box-shadow: 0 3px 0 var(--ink);
}
.site .fx-check .box {
  position: absolute;
  left: calc(11.5% - 3.6cqw);
  top: calc(53% - 3.6cqw);
  width: 7.2cqw;
  height: 7.2cqw;
  border: 2px solid var(--ink);
  border-radius: 1.4cqw;
  background: var(--gold);
  animation: sq-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.site .fx-check .box::after {
  content: "";
  position: absolute;
  left: 30%;
  top: 12%;
  width: 30%;
  height: 55%;
  border: solid var(--ink);
  border-width: 0 0.9cqw 0.9cqw 0;
  transform: rotate(45deg);
}
.site .fx-check .float {
  position: absolute;
  left: 60%;
  top: calc(53% - 4cqw);
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 1.4cqw 3cqw 1.4cqw 1.6cqw;
  border: 2px solid var(--ink);
  border-radius: 6cqw;
  background: var(--ink);
  color: var(--cream);
  font: 400 4.4cqw / 1 var(--display);
  animation: sq-float 1.6s ease-out 0.15s both;
}
.site .fx-check .float i,
.site .fx-approve .done i {
  width: 4.6cqw;
  height: 4.6cqw;
  border-radius: 50%;
  background: #46d160;
  position: relative;
}
.site .fx-check .float i::after,
.site .fx-approve .done i::after {
  content: "";
  position: absolute;
  left: 34%;
  top: 18%;
  width: 26%;
  height: 48%;
  border: solid var(--ink);
  border-width: 0 0.6cqw 0.6cqw 0;
  transform: rotate(45deg);
}
.site .fx-approve .press {
  position: absolute;
  left: 52%;
  top: 56.6%;
  width: 45%;
  height: 7%;
  border-radius: 1.6cqw;
  background: rgb(25 17 33 / 0.35);
  animation: sq-press 0.35s ease both;
}
.site .fx-approve .done {
  position: absolute;
  left: 7%;
  top: 48%;
  width: 89%;
  height: 17.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;
  border: 2px solid var(--ink);
  border-radius: 1.6cqw;
  background: var(--surface);
  color: #46d160;
  font: 400 5.4cqw / 1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform-origin: top;
  animation: sq-approved 0.5s ease 0.3s both;
}
.site .fx-approve .done i {
  width: 6cqw;
  height: 6cqw;
}
@keyframes sq-fade {
  from {
    opacity: 0;
  }
}
@keyframes sq-sheet {
  from {
    transform: translateY(100%);
  }
}
@keyframes sq-caret {
  50% {
    opacity: 0;
  }
}
@keyframes sq-pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  60% {
    transform: scale(1.25);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
@keyframes sq-float {
  0% {
    transform: translateY(2cqw);
    opacity: 0;
  }
  15% {
    transform: translateY(0);
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translateY(-16cqw);
    opacity: 0;
  }
}
@keyframes sq-press {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(2px);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes sq-approved {
  0% {
    opacity: 0;
    transform: scaleY(0.6);
  }
  20% {
    opacity: 1;
    transform: scaleY(1);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* Each step's motion shows only while that step plays. */
.site .walk-screen.fx-on-add .fx-add,
.site .walk-screen.fx-on-check .fx-check,
.site .walk-screen.fx-on-approve .fx-approve {
  display: block;
}

/* The ladder's tiers unlock as you scroll (site.js); `tiers` is set only by
   script and only with motion allowed, so at rest the page is unchanged. */
html.tiers .site .step .rung.locked,
html.tiers .site .step .rung.open {
  position: relative;
  animation: none;
}
html.tiers .site .step .rung.locked {
  background: var(--ahead);
}
html.tiers .site .step .rung.gold.open {
  background:
    var(--gold)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 7h11v2h-11zM3.5 9h9v5h-9zM8 7v7M8 7C6 4 3.5 4.5 4.5 6.5M8 7c2-3 4.5-2.5 3.5-.5' fill='none' stroke='%23191121' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 18px no-repeat;
}
html.tiers .site .step .rung.open:not(.gold) {
  background:
    var(--cream)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23191121' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 18px no-repeat;
}
html.tiers .site .step .rung.open {
  animation: sq-tier-flip 0.36s steps(3, end);
}
/* "+N XP" in the app's XPFloat dress (ios/App/App/XPFloat.swift), in the
   corner: a green check disc, Bungee in verified green on a 2px ink lip, on a
   surface pill. It rises 64px in 4px steps and its opacity steps 1, 0.67,
   0.34 over 1.2s. The reward's own pop is gold. */
html.tiers .site .xp-corner {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 20;
  pointer-events: none;
}
html.tiers .site .xp-float {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 6px;
  border: var(--outline);
  border-radius: var(--r);
  box-shadow:
    var(--edge),
    inset 0 0 0 1px rgb(70 209 96 / 0.5);
  background: rgb(41 49 76 / 0.95);
  color: #46d160;
  font: 400 18px / 1 var(--display);
  text-shadow: 0 2px 0 var(--ink);
  white-space: nowrap;
  animation: sq-xp-rise 1.2s linear 0.25s both;
}
html.tiers .site .xp-float i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    #46d160
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23191121' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}
html.tiers .site .xp-float.gold {
  color: var(--gold);
  box-shadow:
    var(--edge),
    inset 0 0 0 1px rgb(255 210 74 / 0.5);
}
html.tiers .site .xp-float.gold i {
  background-color: var(--gold);
}
/* The rail (wide screens only): the ladder carried on down the left margin,
   with a square for each later section and the gift at the end. */
html.tiers .site .rail {
  display: none;
}
@media (min-width: 1240px) {
  html.tiers .site .rail {
    display: block;
    position: fixed;
    z-index: 15;
    left: max(30px, calc(50vw - 597px));
    top: 18vh;
    bottom: 18vh;
    width: 14px;
    border: var(--outline);
    border-radius: 6px;
    background: var(--ahead);
    opacity: 0;
    transform: translateX(-12px);
    transition:
      opacity 0.3s,
      transform 0.3s;
    pointer-events: none;
  }
  html.tiers .site .rail.on {
    opacity: 1;
    transform: none;
  }
}
html.tiers .site .rail .fill {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: var(--kid);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s steps(4, end);
}
html.tiers .site .rail > .sq {
  position: absolute;
  left: 50%;
  width: 26px;
  height: 26px;
  margin: -13px;
  border: var(--outline);
  border-radius: 6px;
  background: var(--ahead);
  box-shadow: var(--edge);
}
html.tiers .site .rail > .sq.done {
  background:
    var(--cream)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23191121' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 16px no-repeat;
}
html.tiers .site .rail > .sq.gift {
  width: 34px;
  height: 34px;
  margin: -17px;
  background:
    var(--gold)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 7h11v2h-11zM3.5 9h9v5h-9zM8 7v7M8 7C6 4 3.5 4.5 4.5 6.5M8 7c2-3 4.5-2.5 3.5-.5' fill='none' stroke='%23191121' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 20px no-repeat;
}
html.tiers .site .rail > .sq.gift:not(.open) {
  background-color: var(--ahead);
}
html.tiers .site .rail > .sq.done:not(.quiet),
html.tiers .site .rail > .sq.gift.open:not(.quiet) {
  animation: sq-tier-flip 0.36s steps(3, end);
}
/* Confetti bits (site.js `burst`): the app's pixel colours, flung once. */
html.tiers .site .bit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px;
  background: var(--gold);
  opacity: 0;
  pointer-events: none;
}
html.tiers .site .bit:nth-of-type(4n + 2) {
  background: var(--orange);
}
html.tiers .site .bit:nth-of-type(4n + 3) {
  background: var(--kid);
}
html.tiers .site .bit:nth-of-type(4n) {
  background: var(--cream);
}
html.tiers .site .compare tr.bonus td:last-child {
  position: relative;
}
html.tiers .site .rung.open:not(.quiet) > .bit {
  animation: sq-tier-burst 0.8s steps(8, end) 0.2s both;
}
html.tiers .site .compare.on tr.bonus td > .bit {
  animation: sq-tier-burst 0.7s steps(7, end) calc(var(--i) * 120ms + 0.15s) both;
}
html.tiers .site .rail > .gift.open:not(.quiet) > .bit {
  animation: sq-tier-burst 0.8s steps(8, end) 0.2s both;
}
@keyframes sq-tier-flip {
  0% {
    transform: scaleX(0.15);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes sq-tier-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy));
  }
}
@keyframes sq-xp-rise {
  0% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: steps(16, end);
  }
  75% {
    opacity: 1;
  }
  76% {
    opacity: 0.67;
  }
  90% {
    opacity: 0.67;
  }
  91% {
    opacity: 0.34;
  }
  99% {
    opacity: 0.34;
  }
  100% {
    opacity: 0;
    transform: translateY(-64px);
  }
}