/*
 * DoneThen website. Colors, type, spacing and radii follow the app's design system
 * (docs/DESIGN_SYSTEM.md §1 to §3). The signature is the app's game look: a 3 px ink outline with a
 * solid drop under cards and buttons, and the outlined cream title of the wordmark. The child's
 * world is the playful sky band; the parent's world is calm cream, like the parent app.
 *
 * Radii: buttons and chips are pills; cards and screenshots 28 px (20 px small); phones follow
 * the device's own curve.
 */

@font-face {
  /* Only browsers without SF Pro Rounded (ui-rounded) download this: Chrome, Firefox, Android, Windows. */
  font-family: "Nunito DT";
  src: url("/fonts/nunito-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  size-adjust: 104%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  /* Palette (DESIGN_SYSTEM §1.1) */
  --orange-50: #FFF4E6;
  --orange-100: #FFE3C2;
  --orange-300: #FFB866;
  --orange-500: #FF8A1F;
  --orange-700: #BA5200;
  --orange-900: #5C2700;
  --launch-orange: #FF9A3C;
  --berry: #FF4F7B;
  --sky: #3FA9F5;
  --grass: #3CC56B;
  --sun: #FFC933;
  --grape: #9B6BFF;
  --mint: #2CC9B5;
  --ink: #23180F;
  --cream: #FFF7EE;
  --paper: #FFFFFF;
  --paper-text-2: #6E5C4C;

  /* Semantic, light (DESIGN_SYSTEM §1.2) */
  --bg: #FFF9F2;
  --surface: #FFFFFF;
  --surface-tint: var(--orange-50);
  --text: #23180F;
  --text-2: #6E5C4C;
  --accent: #FF8A1F;
  --on-accent: #2B1600;
  --accent-text: #BA5200;
  --border: #F0E2D3;
  --outline: var(--ink);
  --depth: var(--ink);
  --focus: var(--ink);
  --hero-bg: var(--launch-orange);
  --hero-text: var(--ink);
  --hero-rays: rgb(255 255 255 / 0.2);
  --band-bg: var(--sky);
  --band-top: #8DCDF8;
  --band-text: var(--ink);
  --tint-band: var(--orange-50);
  --footer-bg: #17110C;
  --footer-text: #FFF7EE;
  --footer-text-2: #C9B8A6;
  --soft-shadow: 0 4px 12px rgb(35 24 15 / 0.08);
  --mark-bg: #FFE3C2;
  --mark-text: #5C2700;
  --surface-2: #FFFFFF;
  --switch-track: rgb(35 24 15 / 0.12);

  /* Type: SF Pro Rounded where it exists (Apple devices), the self-hosted Nunito elsewhere. */
  --font: ui-rounded, "SF Pro Rounded", "Nunito DT", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing (4-pt grid, DESIGN_SYSTEM §3) */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-s: 12px;
  --s-m: 16px;
  --s-l: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-3xl: 72px;
  --section: clamp(72px, 9vw, 128px);

  /* Radius */
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 28px;
  --r-pill: 999px;

  /* Layout */
  --page: 1180px;
  --gutter: clamp(16px, 4.5vw, 48px);
  --measure: 36rem;
}

/* Dark mode follows the device (DESIGN_SYSTEM §1.2, dark column). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17110C;
    --surface: #221A13;
    --surface-tint: #2E241B;
    --text: #FFF7EE;
    --text-2: #C9B8A6;
    --accent: #FF9A3C;
    --accent-text: #FFB866;
    --border: #3A2E24;
    --outline: #0B0705;
    --depth: #0B0705;
    --focus: #FFB866;
    --hero-bg: #221A13;
    --hero-text: #FFF7EE;
    --hero-rays: rgb(255 154 60 / 0.12);
    --band-bg: #1D4A6B;
    --band-top: #275E86;
    --band-text: #FFF7EE;
    --tint-band: #221A13;
    --footer-bg: #0F0B08;
    --soft-shadow: none;
    --mark-bg: #5C2700;
    --mark-text: #FFE3C2;
    --surface-2: #2E241B;
    --switch-track: rgb(255 247 238 / 0.1);
  }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--s-l);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}

@media (min-width: 900px) {
  body {
    font-size: 1.125rem;
  }
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

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

img {
  height: auto;
}

h1,
h2,
h3 {
  line-height: 1.1;
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 3px;
}

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

strong {
  font-weight: 800;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-m);
  top: -100px;
  z-index: 10;
  padding: var(--s-s) var(--s-m);
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: var(--r-pill);
  font-weight: 800;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--s-m);
}

/* Placeholders for Amir to fill in before launch. */
.todo {
  background: var(--mark-bg);
  color: var(--mark-text);
  border-radius: 6px;
  padding: 0 0.3em;
  font-weight: 700;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

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

.wrap {
  width: 100%;
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section);
}

.section-head {
  max-width: 44rem;
  margin-bottom: clamp(var(--s-xl), 5vw, var(--s-3xl));
}

h2 + .lead,
.section-head h2 + .lead {
  margin-top: var(--s-m);
}

.section.no-top {
  padding-top: 0;
}

h2 {
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.015em;
}

h3 {
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.25;
}

.h3-size {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.lead {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.5;
  color: var(--text-2);
  max-width: var(--measure);
}

.muted {
  color: var(--text-2);
}

/* The app's GameTitle: a cream title with an ink outline and a solid drop. */
.game-title {
  color: var(--cream);
  -webkit-text-stroke: 0.15em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.075em 0 var(--ink);
  font-weight: 900;
  letter-spacing: 0.005em;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 54px;
  padding: 0 1.6em;
  border: 3px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 5px 0 var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 0 var(--ink);
}

.btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--ink);
}

.btn-paper {
  background: var(--cream);
  color: var(--ink);
}

/* Apple's "Download on the App Store" badge, unchanged and at least 40 px tall (Apple's rules). */
.store-badge {
  display: inline-block;
  border-radius: 9px;
}

.store-badge img {
  display: block;
  width: auto;
  height: 54px;
}

/* ---------- Header ---------- */

.site-header {
  background: var(--hero-bg);
  color: var(--hero-text);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-m);
  min-height: 72px;
}

.brand {
  display: block;
  flex-shrink: 0;
  border-radius: var(--r-s);
}

.brand img {
  width: 148px;
}

.nav-inline {
  display: none;
}

.nav-inline ul {
  display: flex;
  gap: var(--s-xs);
  list-style: none;
}

.nav-inline a,
.menu-list a {
  display: block;
  padding: 0.5em 0.85em;
  border-radius: var(--r-pill);
  color: var(--hero-text);
  font-weight: 700;
  text-decoration: none;
}

.nav-inline a:hover,
.menu-list a:hover {
  background: rgb(35 24 15 / 0.1);
}

.nav-inline a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

/* A small menu on narrow screens, without JavaScript. */
.menu {
  position: relative;
}

.menu summary {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 1em;
  border: 3px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.menu summary::-webkit-details-marker {
  display: none;
}

.menu-icon {
  position: relative;
  width: 16px;
  height: 12px;
  border-block: 3px solid currentColor;
}

.menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: currentColor;
}

.menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 5;
  min-width: 220px;
  padding: var(--s-xs);
  list-style: none;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--r-m);
  box-shadow: 0 5px 0 var(--ink);
}

.menu-list a {
  color: var(--ink);
}

@media (min-width: 820px) {
  .nav-inline {
    display: block;
  }

  .menu {
    display: none;
  }

  .brand img {
    width: 164px;
  }
}

/* ---------- Audience switch ---------- */

.audience {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--switch-track);
}

.audience a {
  display: block;
  padding: 0.55em 1.1em;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  color: var(--hero-text);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.audience a:hover {
  background: rgb(35 24 15 / 0.08);
}

.audience a[aria-current="page"] {
  background: var(--cream);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}

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

.hero {
  position: relative;
  overflow: clip;
  background: var(--hero-bg);
  color: var(--hero-text);
}

.hero-grid {
  display: grid;
  gap: var(--s-xl);
  padding-top: var(--s-l);
}

.hero-copy > * + * {
  margin-top: var(--s-l);
}

.hero h1 {
  font-size: clamp(2.25rem, 0.75rem + 6.6vw, 5rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.hero h1 span {
  display: block;
}

.hero-lead {
  max-width: 30rem;
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  font-weight: 500;
  line-height: 1.45;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-m) var(--s-l);
}

.hero-actions .link-plain {
  color: var(--hero-text);
  font-weight: 800;
}

.hero-note {
  font-weight: 700;
}

.hero-art {
  position: relative;
  justify-self: center;
  width: min(100%, 440px);
  padding: var(--s-l) var(--s-xl) 0;
  margin-bottom: -150px;
}

/* The app's turning rays (Sunburst), standing still. */
.hero-art::before {
  content: "";
  position: absolute;
  inset: -12% -30% 0;
  background: repeating-conic-gradient(from 4deg at 50% 46%, var(--hero-rays) 0deg 10deg, transparent 10deg 24deg);
  -webkit-mask: radial-gradient(closest-side at 50% 46%, #000 25%, transparent 100%);
  mask: radial-gradient(closest-side at 50% 46%, #000 25%, transparent 100%);
  pointer-events: none;
}

.hero-phone {
  position: relative;
  width: min(290px, 70vw);
  margin-inline: auto;
  transform: rotate(2.5deg);
}

.hero-otter {
  position: absolute;
  left: -9%;
  bottom: 160px;
  width: 38%;
  max-width: 190px;
  transform: rotate(-4deg);
  filter: drop-shadow(0 6px 0 rgb(35 24 15 / 0.18));
}

.burst {
  position: absolute;
  right: -4%;
  top: 0;
  z-index: 2;
  font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
  line-height: 1;
  white-space: nowrap;
  transform: rotate(-8deg);
}

.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.confetti i {
  position: absolute;
  width: 12px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--c, var(--sun));
  transform: rotate(var(--r, 20deg));
}

.confetti i:nth-child(1) { --c: var(--berry); --r: 24deg; right: 30%; top: 3%; }
.confetti i:nth-child(2) { --c: var(--sun); --r: -30deg; right: 4%; top: 1%; width: 10px; height: 10px; border-radius: 50%; }
.confetti i:nth-child(3) { --c: var(--grass); --r: 60deg; right: 0; top: 24%; }
.confetti i:nth-child(4) { --c: var(--grape); --r: -12deg; right: 40%; top: 20%; width: 10px; height: 10px; border-radius: 50%; }
.confetti i:nth-child(5) { --c: var(--mint); --r: 40deg; right: 18%; top: 28%; }
.confetti i:nth-child(6) { --c: var(--paper); --r: -50deg; right: 46%; top: 6%; width: 9px; height: 15px; }

@media (prefers-reduced-motion: no-preference) {
  .burst {
    animation: burst-in 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) 0.35s both;
  }

  .confetti i {
    animation: confetti-in 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) 0.45s both;
  }

  .confetti i:nth-child(even) {
    animation-delay: 0.55s;
  }
}

@keyframes burst-in {
  from {
    opacity: 0;
    transform: rotate(-20deg) scale(0.4);
  }
  to {
    opacity: 1;
    transform: rotate(-8deg) scale(1);
  }
}

@keyframes confetti-in {
  from {
    opacity: 0;
    transform: translate(-40px, 30px) rotate(0deg) scale(0.3);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--r, 20deg)) scale(1);
  }
}

@media (min-width: 900px) {
  .hero h1 {
    font-size: min(5.5vw, 4.5rem);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: var(--s-xxl);
    padding-block: var(--s-xl) var(--s-3xl);
    min-height: min(760px, calc(100svh - 72px));
  }

  .hero-art {
    margin-bottom: 0;
    padding-top: var(--s-xl);
  }

  .hero-otter {
    bottom: 6%;
    left: -10%;
    width: 44%;
  }

  .burst {
    right: -14%;
    top: -2%;
  }
}

/* ---------- Phones and screenshots ---------- */

/* A phone drawn like the app's own scenes: an ink outline on the device's curve. */
.phone {
  --frame: 7px;
  overflow: hidden;
  border: var(--frame) solid var(--outline);
  border-radius: 14% / 6.5%;
  background: var(--outline);
  box-shadow: 0 7px 0 var(--depth), 0 30px 50px -20px rgb(35 24 15 / 0.45);
}

.phone img {
  width: 100%;
}

.phone-sm {
  --frame: 5px;
  box-shadow: 0 5px 0 var(--depth), 0 20px 40px -20px rgb(35 24 15 / 0.4);
}

.ipad {
  overflow: hidden;
  border: 8px solid var(--outline);
  border-radius: 34px;
  background: var(--outline);
  box-shadow: 0 7px 0 var(--depth);
}

/* A cropped screen or scene, as a game card. */
.shot {
  overflow: hidden;
  border: 3px solid var(--outline);
  border-radius: var(--r-l);
  background: var(--paper);
  box-shadow: 0 6px 0 var(--depth);
}

.shot img {
  width: 100%;
}

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

.steps {
  display: grid;
  gap: var(--s-xxl);
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  gap: var(--s-l);
  counter-increment: step;
}

.step-num {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 4px 0 var(--ink);
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1;
}

.step-num::before {
  content: counter(step);
}

.step h3 {
  margin-top: var(--s-m);
}

.step p {
  margin-top: var(--s-xs);
  color: var(--text-2);
  max-width: 30rem;
}

.step-art {
  order: 2;
  max-width: 340px;
}

.step-art .shot {
  aspect-ratio: 4 / 5;
}

.step-art .shot picture {
  height: 100%;
}

.step-art .shot img {
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.step-art .shot img.is-center {
  object-position: center;
}

/* Step 1: the chore pictures, each with its tag. */
.tags-art {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-m);
  padding: var(--s-l);
  aspect-ratio: 4 / 5;
  align-content: center;
  border: 3px solid var(--outline);
  border-radius: var(--r-l);
  background: var(--surface-tint);
  box-shadow: 0 6px 0 var(--depth);
}

.chore-tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 24%;
  background: var(--tile, var(--sky));
}

.chore-tile img {
  width: 84%;
}

.chore-tile.is-sky { --tile: var(--sky); }
.chore-tile.is-mint { --tile: var(--mint); }
.chore-tile.is-sun { --tile: var(--sun); }
.chore-tile.is-grape { --tile: var(--grape); }
.chore-tile.is-grass { --tile: var(--grass); }
.chore-tile.is-berry { --tile: var(--berry); }
.chore-tile.is-orange { --tile: var(--accent); }

/* An NFC tag: the orange disc with a check, as the otter holds it in the app icon. */
.tag-dot {
  position: absolute;
  right: -8%;
  bottom: -8%;
  width: 34%;
  aspect-ratio: 1 / 1;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
}

.tag-dot::after {
  content: "";
  position: absolute;
  left: 30%;
  top: 22%;
  width: 26%;
  height: 46%;
  border: solid var(--paper);
  border-width: 0 0.22em 0.22em 0;
  transform: rotate(40deg);
}

.step-time {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border: 3px solid var(--outline);
  border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--band-top), var(--band-bg) 70%);
  box-shadow: 0 6px 0 var(--depth);
}

.step-time .shot {
  width: 64%;
  aspect-ratio: auto;
  border-radius: var(--r-m);
}

@media (min-width: 700px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3xl) var(--s-xxl);
  }
}

@media (min-width: 1100px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-xl);
  }

  /* A dashed path joins the steps. */
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 25px;
    left: 70px;
    right: -18px;
    border-top: 3px dashed var(--orange-300);
  }
}

.note {
  display: flex;
  align-items: center;
  gap: var(--s-m);
  margin-top: clamp(var(--s-xxl), 6vw, var(--s-3xl));
  padding: var(--s-m) var(--s-l);
  max-width: 46rem;
  border-radius: var(--r-l);
  background: var(--surface-tint);
}

.note img {
  flex-shrink: 0;
  width: 56px;
}

.note p {
  font-weight: 600;
}

/* ---------- Rewards: the child's world, on the playful band ---------- */

.band {
  position: relative;
  overflow: clip;
  background: linear-gradient(180deg, var(--band-top) 0%, var(--band-bg) 32%);
  color: var(--band-text);
}

/* The app's backdrop sparkles, standing still. */
.band::before,
.band::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgb(255 255 255 / 0.18) 0 60%, transparent 61%);
  border-radius: 50%;
  pointer-events: none;
}

.band::before {
  top: 6%;
  left: -40px;
  width: 260px;
  height: 260px;
}

.band::after {
  bottom: 10%;
  right: -60px;
  width: 340px;
  height: 340px;
}

.band > .wrap {
  position: relative;
  z-index: 1;
}

.band .lead {
  color: inherit;
  font-weight: 600;
}

.band h2.game-title {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  letter-spacing: 0;
}

.rewards {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-l);
}

.tile {
  display: grid;
  gap: var(--s-l);
  align-content: start;
  padding: var(--s-l);
  border: 3px solid var(--ink);
  border-radius: var(--r-l);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 6px 0 var(--ink);
}

.tile p {
  color: var(--paper-text-2);
}

.tile h3 + p {
  margin-top: var(--s-xs);
}

.tile-media {
  display: grid;
  place-items: center;
  padding: var(--s-l) var(--s-m) 0;
  border-radius: var(--r-m);
  overflow: hidden;
}

.tile-media.is-sky {
  background: #D9EEFD;
}

.tile-media.is-sun {
  background: #FFF1C2;
}

.tile-media.is-grape {
  background: #EAE0FF;
}

.tile-media.is-grass {
  background: #D8F3E1;
}

.tile-media .phone {
  width: min(230px, 70%);
  margin-bottom: -18%;
  box-shadow: none;
}

.tile-media .scene {
  width: min(300px, 92%);
  margin-bottom: var(--s-l);
}

.tile-media .scene img {
  border-radius: var(--r-m);
}

.research {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-m);
  margin-top: var(--s-xxl);
  max-width: 52rem;
}

.research p {
  font-weight: 600;
}

.research ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  list-style: none;
}

.research li {
  padding: 0.4em 0.9em;
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--cream);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 800;
}

@media (min-width: 760px) {
  .rewards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile-stamps {
    grid-row: span 2;
  }
}

@media (min-width: 1100px) {
  .rewards {
    grid-template-columns: 1.15fr 1fr 1fr;
  }

  .tile-stamps {
    grid-row: auto;
  }
}

/* Just me's three games: one column, then three in a row. */
@media (min-width: 760px) {
  .rewards.is-three {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 900px) {
  .rewards.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Parents ---------- */

.split {
  display: grid;
  gap: var(--s-xxl);
  align-items: center;
}

.feature-list {
  display: grid;
  gap: var(--s-l) var(--s-xl);
  margin-top: var(--s-xl);
  list-style: none;
}

.feature-list li {
  padding-top: var(--s-m);
  border-top: 3px solid var(--border);
}

.feature-list p {
  margin-top: var(--s-xxs);
  color: var(--text-2);
}

.parents-art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--s-m);
  padding-bottom: var(--s-xl);
}

.parents-art .phone {
  width: min(250px, 46%);
}

.parents-art .phone + .phone {
  margin-top: var(--s-3xl);
}

.parents-art .floating {
  position: absolute;
  left: 50%;
  bottom: -4%;
  width: min(420px, 92%);
  transform: translateX(-50%) rotate(-2deg);
}

@media (min-width: 640px) {
  .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-3xl);
  }

  .split.is-art-first > :first-child {
    order: 2;
  }
}

/* ---------- Families ---------- */

.family-grid {
  display: grid;
  gap: var(--s-xl);
}

.family-card {
  display: grid;
  gap: var(--s-l);
  align-content: space-between;
  padding: var(--s-l);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: var(--soft-shadow);
  border: 1px solid var(--border);
}

.family-card p {
  margin-top: var(--s-xs);
  color: var(--text-2);
}

.family-card .media {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--s-m);
  min-height: 0;
}

.looks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-s);
}

.looks figure {
  display: grid;
  gap: var(--s-xs);
}

.looks figcaption {
  font-size: 0.9375rem;
  font-weight: 800;
  text-align: center;
}

.looks .shot {
  border-radius: var(--r-m);
  box-shadow: 0 4px 0 var(--depth);
}

.family-card .ipad {
  width: min(210px, 64%);
}

.family-facts {
  display: grid;
  gap: var(--s-l);
  list-style: none;
}

.family-facts li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s-m);
  align-items: start;
}

.family-facts img {
  width: 64px;
}

.family-facts p {
  margin-top: var(--s-xxs);
  color: var(--text-2);
}

@media (min-width: 760px) {
  .family-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .family-grid .family-facts-card {
    grid-column: 1 / -1;
  }

  .family-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-l) var(--s-xxl);
  }
}

@media (min-width: 1100px) {
  .family-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .looks {
    gap: var(--s-l);
    padding-inline: var(--s-l);
  }
}

/* ---------- Grown-ups ---------- */

.tint {
  background: var(--tint-band);
}

.grownups-art {
  display: flex;
  justify-content: center;
}

.grownups-art .phone {
  width: min(270px, 70vw);
}

.grownup-list {
  display: grid;
  gap: var(--s-l);
  margin-top: var(--s-xl);
  list-style: none;
}

.grownup-list p {
  margin-top: var(--s-xxs);
  color: var(--text-2);
}

/* ---------- What you need ---------- */

.needs {
  display: grid;
  gap: var(--s-l);
  list-style: none;
}

.need {
  position: relative;
  padding: var(--s-l) var(--s-l) var(--s-l) calc(var(--s-l) + 56px);
  border: 3px solid var(--outline);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: 0 6px 0 var(--depth);
}

.need::before {
  content: "";
  position: absolute;
  left: var(--s-l);
  top: var(--s-l);
  width: 40px;
  height: 40px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
}

.need::after {
  content: "";
  position: absolute;
  left: calc(var(--s-l) + 14px);
  top: calc(var(--s-l) + 8px);
  width: 9px;
  height: 17px;
  border: solid var(--paper);
  border-width: 0 4px 4px 0;
  transform: rotate(40deg);
}

.need p {
  margin-top: var(--s-xs);
  color: var(--text-2);
}

@media (min-width: 900px) {
  .needs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

.pricing-grid {
  display: grid;
  gap: var(--s-xl);
  align-items: start;
}

.plans {
  display: grid;
  gap: var(--s-l);
}

.plan {
  position: relative;
  padding: var(--s-l) var(--s-l) var(--s-l);
  border: 3px solid var(--outline);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: 0 6px 0 var(--depth);
}

.plan-featured {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 6px 0 var(--ink);
}

.plan-name {
  font-size: 1.125rem;
  font-weight: 800;
}

.plan-price {
  margin-top: var(--s-xs);
  white-space: nowrap;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.plan-price small {
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0;
}

.plan-detail {
  margin-top: var(--s-xs);
  color: var(--text-2);
}

.plan-featured .plan-detail {
  color: var(--paper-text-2);
}

.plan-badge {
  position: absolute;
  right: var(--s-l);
  top: calc(-1 * var(--s-m));
  padding: 0.3em 0.9em;
  border: 3px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--sun);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 900;
  transform: rotate(3deg);
}

.pricing-facts {
  display: grid;
  gap: var(--s-l);
}

.pricing-facts p {
  margin-top: var(--s-xxs);
  color: var(--text-2);
}

.trial {
  display: flex;
  align-items: center;
  gap: var(--s-m);
  padding: var(--s-m) var(--s-l);
  border-radius: var(--r-l);
  background: var(--surface-2);
  font-weight: 800;
}

.pricing-facts .trial {
  color: var(--text);
}

.plans + .muted {
  margin-top: var(--s-l);
}

.trial img {
  width: 52px;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .pricing-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--s-3xl);
  }
}

/* ---------- Privacy ---------- */

.privacy-list {
  display: grid;
  gap: var(--s-xl) var(--s-xxl);
  list-style: none;
}

.privacy-list li {
  padding-top: var(--s-l);
  border-top: 3px solid var(--text);
}

.privacy-list h3 {
  font-size: 1.375rem;
}

.privacy-list p {
  margin-top: var(--s-xs);
  color: var(--text-2);
}

.privacy-more {
  margin-top: var(--s-xxl);
  font-weight: 800;
}

@media (min-width: 700px) {
  .privacy-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .privacy-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Questions ---------- */

.faq-grid {
  display: grid;
  gap: var(--s-xxl);
}

.faq-art img {
  width: min(220px, 50vw);
}

.faq details {
  border-bottom: 3px solid var(--border);
}

.faq details:first-child {
  border-top: 3px solid var(--border);
}

.faq summary {
  position: relative;
  display: block;
  padding: var(--s-l) 56px var(--s-l) 0;
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* A plus that turns into a minus. */
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 20px;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: var(--accent-text);
  transition: transform 0.2s ease;
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: rotate(0deg);
}

.faq .answer {
  padding-bottom: var(--s-l);
  max-width: 42rem;
  color: var(--text-2);
}

.faq .answer > * + * {
  margin-top: var(--s-s);
}

@media (min-width: 1000px) {
  .faq-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--s-3xl);
  }

  .faq-art {
    position: sticky;
    top: var(--s-xl);
    align-self: start;
  }
}

/* ---------- Maker ---------- */

.maker {
  max-width: 60rem;
  display: grid;
  gap: var(--s-l);
  align-items: center;
  justify-items: start;
  padding: var(--s-xl);
  border: 3px solid var(--outline);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: 0 6px 0 var(--depth);
}

.maker img {
  width: 120px;
}

.maker p {
  margin-top: var(--s-xs);
  color: var(--text-2);
  max-width: 40rem;
}

@media (min-width: 700px) {
  .maker {
    grid-template-columns: auto 1fr;
    gap: var(--s-xl);
  }
}

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

.site-footer {
  padding-block: var(--s-3xl) var(--s-xxl);
  background: var(--footer-bg);
  color: var(--footer-text);
}

.site-footer a {
  color: var(--footer-text);
}

.footer-grid {
  display: grid;
  gap: var(--s-xl);
}

.footer-brand img {
  width: 150px;
}

.footer-brand p {
  margin-top: var(--s-m);
  color: var(--footer-text-2);
  max-width: 22rem;
}

.footer-links {
  display: grid;
  gap: var(--s-xs);
  list-style: none;
  font-weight: 700;
}

.company {
  font-size: 0.9375rem;
  color: var(--footer-text-2);
  font-style: normal;
}

.company p + p {
  margin-top: var(--s-xs);
}

.site-footer .todo {
  background: #5C2700;
  color: #FFE3C2;
}

.legal-small {
  margin-top: var(--s-xxl);
  padding-top: var(--s-l);
  border-top: 1px solid #3A2E24;
  font-size: 0.875rem;
  color: var(--footer-text-2);
}

.legal-small p + p {
  margin-top: var(--s-xs);
}

@media (min-width: 800px) {
  .footer-grid {
    grid-template-columns: 1.2fr 0.8fr 1.4fr;
    gap: var(--s-xxl);
  }
}

/* ---------- Document pages: privacy, terms, support, guide ---------- */

.doc-hero {
  padding-block: var(--s-xl) var(--s-xxl);
  background: var(--hero-bg);
  color: var(--hero-text);
}

.doc-hero h1 {
  font-size: clamp(2.5rem, 1.7rem + 3.6vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.025em;
}

.doc-hero p {
  margin-top: var(--s-m);
  max-width: 40rem;
  font-size: 1.1875rem;
  font-weight: 500;
}

/* The legal pages' languages, under their title. */
.lang-switch ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin-top: var(--s-l);
  list-style: none;
}

.lang-switch a {
  display: block;
  padding: 0.35em 0.9em;
  border: 2px solid currentColor;
  border-radius: var(--r-pill);
  color: var(--hero-text);
  font-weight: 700;
  text-decoration: none;
}

.lang-switch a:hover {
  background: rgb(35 24 15 / 0.1);
}

.lang-switch a[aria-current="page"] {
  border-color: var(--hero-text);
  background: var(--hero-text);
  color: var(--hero-bg);
}

/* The summary first, then the contents, then the rest. On wide screens the contents sit on the
   left, beside both. */
.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-xxl);
  padding-block: var(--s-xxl) var(--section);
}

.doc {
  max-width: 44rem;
}

.doc h2 {
  margin-top: var(--s-3xl);
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
  font-weight: 900;
  scroll-margin-top: var(--s-l);
}

.doc h3 {
  margin-top: var(--s-xl);
  font-size: 1.25rem;
}

.doc > :first-child,
.doc > section:first-child > h2:first-child {
  margin-top: 0;
}

.doc-intro > * + * {
  margin-top: var(--s-xl);
}

.doc p,
.doc ul,
.doc ol,
.doc dl,
.doc .table-wrap {
  margin-top: var(--s-m);
}

.doc ul,
.doc ol {
  padding-left: 1.3em;
}

.doc li + li {
  margin-top: var(--s-xs);
}

.doc li::marker {
  color: var(--accent-text);
}

.doc dt {
  font-weight: 800;
}

.doc dd + dt {
  margin-top: var(--s-m);
}

.doc dd {
  margin-top: var(--s-xxs);
}

.summary-box {
  padding: var(--s-l);
  border: 3px solid var(--outline);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: 0 6px 0 var(--depth);
}

.summary-box h2 {
  margin-top: 0;
  font-size: 1.5rem;
}

.summary-box ul {
  padding-left: 1.2em;
}

.kid-box {
  position: relative;
  padding: var(--s-l) var(--s-l) var(--s-l) calc(var(--s-l) + 96px);
  border: 3px solid var(--ink);
  border-radius: var(--r-l);
  background: linear-gradient(180deg, #8DCDF8, var(--sky) 80%);
  color: var(--ink);
  box-shadow: 0 6px 0 var(--ink);
}

.kid-box img {
  position: absolute;
  left: var(--s-m);
  top: var(--s-l);
  width: 88px;
}

.kid-box h2 {
  margin-top: 0;
  font-size: 1.5rem;
}

.kid-box ul {
  padding-left: 1.2em;
}

.kid-box li::marker {
  color: var(--ink);
}

.table-wrap {
  overflow-x: auto;
  border: 2px solid var(--border);
  border-radius: var(--r-m);
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9688rem;
}

.doc th,
.doc td {
  padding: var(--s-s) var(--s-m);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.doc th {
  background: var(--surface-tint);
  font-weight: 800;
}

.doc tr:last-child td {
  border-bottom: 0;
}

.toc {
  align-self: start;
  padding: var(--s-l);
  border-radius: var(--r-l);
  background: var(--surface-tint);
}

.toc h2 {
  font-size: 1.0625rem;
  font-weight: 800;
}

.toc ol {
  display: grid;
  gap: var(--s-xxs);
  margin-top: var(--s-s);
  padding-left: 1.4em;
  font-size: 0.9688rem;
}

.toc a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}

.toc a:hover {
  color: var(--accent-text);
  text-decoration: underline;
}

.doc-meta {
  font-weight: 700;
}

@media (min-width: 1000px) {
  .doc-layout {
    grid-template-columns: 17rem minmax(0, 44rem);
    grid-template-areas:
      "toc intro"
      "toc body";
    justify-content: space-between;
    column-gap: var(--s-3xl);
  }

  .doc-intro {
    grid-area: intro;
  }

  .doc-body {
    grid-area: body;
  }

  .toc {
    grid-area: toc;
    position: sticky;
    top: var(--s-l);
    max-height: calc(100vh - 2 * var(--s-l));
    overflow: auto;
  }
}

/* Support topics */
.help-grid {
  display: grid;
  gap: var(--s-l);
}

.contact-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--s-xs) var(--s-l);
  align-items: start;
  padding: var(--s-l);
  border: 3px solid var(--outline);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: 0 6px 0 var(--depth);
}

.contact-card picture {
  grid-row: span 3;
}

.contact-card img {
  width: 72px;
}

.doc .contact-card h2,
.doc .contact-card p {
  margin-top: 0;
}

.contact-card .email {
  font-size: 1.25rem;
  font-weight: 800;
}

@media (min-width: 700px) {
  .contact-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .contact-card img {
    width: 96px;
  }
}

/* Guide: each idea under a rule, examples side by side in soft cards, and the contents in parts. */
.guide-topic {
  margin-top: var(--s-xl);
  padding-top: var(--s-l);
  border-top: 3px solid var(--border);
}

.doc .guide-topic h3 {
  margin-top: 0;
}

.guide-cols {
  display: grid;
  gap: var(--s-m);
  margin-top: var(--s-m);
}

.guide-card {
  padding: var(--s-m) var(--s-l);
  border-radius: var(--r-m);
  background: var(--surface-tint);
}

.guide-card h4 {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
}

.doc .guide-card ul {
  margin-top: var(--s-xs);
  padding-left: 1.2em;
}

.doc .guide-card li + li {
  margin-top: var(--s-xxs);
}

.doc-figure {
  display: grid;
  justify-items: center;
  gap: var(--s-s);
  margin-top: var(--s-l);
}

.doc-figure .shot {
  width: min(340px, 100%);
}

/* A whole screen, in the phone's frame (the setup guides). */
.doc-figure .phone {
  width: min(260px, 72%);
}

.doc-figure figcaption {
  color: var(--text-2);
  font-size: 0.9375rem;
  text-align: center;
  text-wrap: balance;
}

.toc > ol > li > a {
  font-weight: 800;
}

.toc ol ol {
  margin-top: var(--s-xxs);
  padding-left: 0.9em;
  list-style: none;
}

@media (min-width: 640px) {
  .guide-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 404 ---------- */

.lost {
  display: grid;
  justify-items: center;
  gap: var(--s-l);
  padding-block: var(--section);
  text-align: center;
}

.lost img {
  width: min(240px, 60vw);
}

.lost h1 {
  font-size: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);
  font-weight: 900;
}

.lost p {
  max-width: 30rem;
  color: var(--text-2);
}

/* ---------- Print ---------- */

@media print {
  .site-header,
  .site-footer,
  .toc,
  .skip-link {
    display: none;
  }

  .doc-hero {
    background: none;
    color: #000;
  }

  body {
    background: #fff;
    color: #000;
  }

  a {
    color: #000;
  }
}

/* ---------- Forced colors (Windows high contrast) ---------- */

@media (forced-colors: active) {
  .game-title {
    -webkit-text-stroke: 0;
    text-shadow: none;
  }

  .btn,
  .tile,
  .shot,
  .phone,
  .plan,
  .need {
    border-color: CanvasText;
  }
}

/* ---------- Quotes (Just me) ---------- */

.quotes {
  display: grid;
  gap: var(--s-xl);
}

.quote blockquote {
  margin: 0;
  padding-left: var(--s-l);
  border-left: 6px solid var(--accent);
}

.quote blockquote p {
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.quote figcaption {
  margin-top: var(--s-s);
  padding-left: calc(var(--s-l) + 6px);
  color: var(--text-2);
  font-size: 0.9375rem;
}

.source {
  margin-top: var(--s-xl);
  max-width: 44rem;
  color: var(--text-2);
  font-size: 0.9375rem;
}

@media (min-width: 900px) {
  .quotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3xl);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }

  .btn:hover,
  .btn:active {
    transform: none;
  }
}