@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: calc(100vh - 128px);
  overflow: hidden;
}
.site .lightbox::backdrop {
  background: rgb(25 17 33 / 0.86);
}
.site .lightbox img {
  display: block;
  max-width: 92vw;
  max-height: calc(100vh - 132px);
  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: 30px;
}
.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 .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));
  /* its own left edge, so the column reads as part of the table's frame */
  border-left: 2px solid var(--ink);
}
.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 .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: 12px;
  line-height: 1.45;
  color: var(--mute);
  opacity: 0.85;
  max-width: 52ch;
}

/* 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 {
  display: inline-block;
  min-width: 44px;
  padding-block: 11px;
  text-align: center;
}
.site footer .fw {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.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;
}
/* Fletchwork links out to fletchwork.com in a new tab (Shahrum, 2026-10-10); the
   copy reads as before, with an underline on the name. */
.site footer .fw {
  color: inherit;
  text-underline-offset: 2px;
  border-radius: 2px;
}
.site footer small .fw {
  display: inline-block;
  padding-block: 14px;
  margin-block: -14px;
}
.site footer .maker .fw {
  display: block;
  padding-block: 13px;
  margin-block: -13px;
}
.site footer .fw:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

@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: 54px;
    max-width: 26ch;
  }
  .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 steps in one phone, each the app's own
   captured screens with a tap where you would tap, crossfading on a loop. Pausable; still
   under reduced motion. On a phone it sits under the headline (Shahrum, 2026-10-10). */
.site .hero .walk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  grid-column: 2;
  margin: 8px 0 0;
  gap: 10px;
  justify-items: center;
  width: min(100%, 260px);
}
.site .hero .walk {
  position: relative;
}
/* Previous and next sit in the margins either side of the phone. */
.site .walk-arrow {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--orange);
  opacity: 0.6;
  transition: opacity 0.15s;
  cursor: pointer;
  border-radius: var(--r);
}
.site .walk-arrow:hover,
.site .walk-arrow:focus-visible {
  opacity: 1;
}
.site .walk-arrow.prev {
  left: -48px;
}
.site .walk-arrow.next {
  right: -48px;
}
.site .walk-arrow:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -4px;
}
/* On a phone the margins hold the hero's ladder track, so the arrows flank the step caption under the phone. */
@media (max-width: 519px) {
  .site .walk-arrow.prev {
    left: 0;
  }
  .site .walk-arrow.next {
    right: 0;
  }
  .site .walk-step {
    box-sizing: border-box;
    padding-inline: 44px;
  }
}
.site .walk-screen {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 780 / 1160;
  border: var(--outline);
  border-bottom-width: 12px;
  border-radius: var(--r);
  box-shadow: var(--edge);
  background: var(--ink);
  overflow: hidden;
}
.site .walk-screen {
  cursor: zoom-in;
}
.site .walk-screen:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.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;
  justify-content: center;
}
.site .walk-nav button {
  flex-shrink: 0;
  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;
    /* Room between the headline and the walkthrough's arrows. */
    padding-right: 64px;
  }
  .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 .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 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), beside the
   square that just checked, where the eye already is (Shahrum, 2026-10-10): 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. Up and right of the square on a phone,
   where the bar runs down, in the gap above the heading; above it where the
   bar runs across; up and right of the rail's square. None sits on the bar. */
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);
}
/* Where each pop sits (see the comment above). */
html.tiers .site .rung > .xp-float,
.site .rail > .sq > .xp-float {
  position: absolute;
  z-index: 20;
  left: calc(100% + 8px);
  bottom: calc(100% - 2px);
  padding: 3px 7px 3px 4px;
  font-size: 13px;
  pointer-events: none;
}
.site .rail > .sq > .xp-float {
  left: auto;
  right: calc(100% + 8px);
}
.site .rail > .sq > .xp-float i {
  width: 14px;
  height: 14px;
}
@container (min-width: 1000px) {
  html.tiers .site .ladder .rung > .xp-float {
    left: -2px;
    bottom: calc(100% + 10px);
  }
}
/* Below the wide ladder the pop stays beside its own square and rises only a little, so it never reaches the hero's controls above the first square. */
@container (max-width: 999px) {
  html.tiers .site .ladder .rung > .xp-float {
    bottom: calc(100% - 8px);
    animation-name: sq-xp-rise-short;
  }
}
@keyframes sq-xp-rise-short {
  0% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: steps(6, end);
  }
  75% {
    opacity: 1;
  }
  76% {
    opacity: 0.67;
  }
  91% {
    opacity: 0.34;
  }
  100% {
    opacity: 0;
    transform: translateY(-16px);
  }
}
/* The rail: the ladder carried on down the page, a square for each later section and the gift at the end.
   A thin track in the right margin from 1400px. Below that there is no rail (Shahrum, 2026-10-12): site.js adds none. */
.site .rail {
  display: none;
}
@media (min-width: 1400px) {
  .site .rail {
    display: block;
    position: fixed;
    z-index: 15;
    right: clamp(40px, calc(50vw - 668px), 56px);
    top: 22vh;
    bottom: 22vh;
    width: 8px;
    border: 2px solid var(--ink);
    border-radius: 5px;
    background: var(--ahead);
    opacity: 0;
    transform: translateX(12px);
    transition:
      opacity 0.3s,
      transform 0.3s;
    pointer-events: none;
  }
  .site .rail.on {
    opacity: 0.8;
    transform: none;
  }
}
.site .rail .fill {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: var(--kid);
  opacity: 0.75;
  transform: scaleY(var(--p, 0));
  transform-origin: top;
  transition: transform 0.45s ease-out;
}
.site .rail > .sq {
  position: absolute;
  top: calc(var(--at) * 1%);
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px;
  border: var(--outline);
  border-radius: 6px;
  background: var(--ahead);
  box-shadow: var(--edge);
}
.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 / 12px no-repeat;
}
.site .rail > .sq.gift {
  width: 26px;
  height: 26px;
  margin: -13px;
  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 / 16px no-repeat;
}
.site .rail > .sq.gift:not(.open) {
  background-color: var(--ahead);
}
.site .rail > .sq.done:not(.quiet),
.site .rail > .sq.gift.open:not(.quiet) {
  animation: sq-tier-flip 0.36s steps(3, end);
}
@media (prefers-reduced-motion: reduce) {
  .site .rail,
  .site .rail .fill {
    transition: none;
  }
}
/* 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;
}
.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);
  }
}

/* The hero line after the button, the proof line, and the concept sections (listing page cards 5, 8, 9). */
.site .hero .get {
  margin-top: 4px;
}
.site .proof {
  margin: 0 0 18px;
  color: var(--cream);
  font-size: 16px;
  max-width: 48ch;
}
.site .viz {
  min-width: 0;
  max-width: 100%;
}

/* Sections after the ladder: a motion piece beside its text. Each is a stop on the wide-screen rail (site.js). */
.site .feature {
  padding-block: 56px 8px;
}
.site .feature > div {
  display: grid;
  gap: 14px;
  align-content: start;
}
.site .feature h2 {
  font-size: 22px;
}
.site .feature p {
  font-size: 16px;
  color: var(--mute);
  max-width: 44ch;
}
@container (min-width: 900px) {
  .site .feature {
    padding-block: 80px 8px;
  }
  .site .feature > div {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: 56px;
    align-items: center;
  }
  .site .feature h2 {
    font-size: 30px;
  }
  .site .feature > div > h2,
  .site .feature > div > p {
    grid-column: 1;
  }
  .site .feature > div > .viz {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}

/* Each motion piece below the walkthrough sits with a real screenshot of the matching app screen:
   beside it on a wide screen, under it on a phone. */
.site .viz.pair {
  display: grid;
  gap: 16px;
  align-items: start;
}
.site .appshot {
  margin: 0;
  width: min(100%, 240px);
  justify-self: center;
  display: grid;
  gap: 8px;
}
.site .appshot img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--outline);
  border-radius: var(--r);
  box-shadow: var(--edge);
  background: var(--ink);
}
.site .appshot figcaption {
  color: var(--mute);
  font-size: 13px;
}
@container (min-width: 900px) {
  .site .feature > div:has(> .viz.pair) {
    grid-template-columns: minmax(0, 0.64fr) minmax(0, 1.36fr);
  }
  .site .viz.pair {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 24px;
  }
  .site .appshot {
    width: 100%;
    justify-self: stretch;
  }
}