/* BusyBees website. One stylesheet for every page. Light only, on purpose: it matches the app's plain warm white.
   Colours, sizes and weights follow the approved Figma file (Foundations). No inline styles anywhere:
   the site's security header does not allow them. */

/* Nunito, served from this site (SIL Open Font License, see /fonts/OFL.txt). Until it arrives the page shows the system font. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/fonts/nunito-latin.woff2") format("woff2");
  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;
}

:root {
  color-scheme: light;
  --paper: #FFFCF6;
  --tint: #FFF9EC;
  --ink: #2E2208;
  --soft: #7A6A45;
  --honey: #FFB300;
  --honey-deep: #E08A00;
  --pill: #FFF4D6;
  --comb: #F2DFA8;
  --card: #FFFFFF;
  --sky: #9CCBFF; --sky-wash: #EAF4FF;
  --pink: #FF8FA3; --pink-wash: #FFEEF1;
  --leaf: #8FDDB0; --leaf-wash: #E6F7EE;
  --sun: #FFD466;
  --yes: #1F8A4C; --no: #C7362B;
  --font: ui-rounded, "SF Pro Rounded", Nunito, system-ui, sans-serif;
  --wrap: 1160px;
  --band: clamp(56px, 8vw, 96px);
  --out: cubic-bezier(0.22, 1, 0.36, 1);
  --inout: cubic-bezier(0.65, 0, 0.35, 1);
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1rem; font-weight: 400; line-height: 1.5625; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, svg { max-width: 100%; }
img { height: auto; }
svg text { font-family: var(--font); }
h1, h2, h3 { font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.375rem, 4.6vw, 3.75rem); line-height: 1.1; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.875rem, 3.6vw, 2.625rem); line-height: 1.19; letter-spacing: -0.02em; }
h3 { font-size: 1.375rem; line-height: 1.27; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 600; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--honey); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
[id] { scroll-margin-top: 88px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 40px); margin-inline: auto; padding-inline: 20px; }
.soft { color: var(--soft); }
.small { font-size: 0.875rem; line-height: 1.5; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.caps, .eyebrow { font-size: 0.75rem; line-height: 1.34; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.lead { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.5; color: var(--soft); }
.skip { position: absolute; left: 12px; top: -60px; background: var(--card); color: var(--ink); padding: 10px 16px; border-radius: 12px; border: 1.5px solid var(--comb); z-index: 20; }
.skip:focus { top: 12px; }
.card { background: var(--card); border: 1.5px solid var(--comb); border-radius: 24px; }
.tag { display: inline-block; background: var(--pill); color: var(--soft); font-size: 0.875rem; line-height: 1.5; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.more { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 28px; font-weight: 600; }
.note { margin-top: 32px; color: var(--soft); font-size: 0.875rem; max-width: 46em; padding-left: 20px; position: relative; }
.note::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 11px; height: 12.7px; background: var(--honey-deep); clip-path: var(--hex); }
.hexnum { width: 24px; height: 26px; flex: none; }
.hexnum text { font-size: 15px; font-weight: 600; fill: var(--ink); }
.mark { width: 20px; height: 20px; flex: none; margin-top: 3px; }
.arrow { width: 22px; height: 14px; }
.hexi { width: 64px; aspect-ratio: 0.866; object-fit: cover; clip-path: var(--hex); flex: none; background: var(--pill); }

/* The phone frame for small real screenshots */
.phone { display: block; border: 2px solid var(--ink); border-radius: 13% / 6%; background: var(--paper); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 28px; background: var(--honey); color: var(--ink); font: inherit; font-weight: 600; font-size: 1.0625rem; line-height: 1.2; border: 0; border-radius: 999px; text-decoration: none; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.btn:hover { background: #F5AA00; }
.btn:active { background: var(--honey-deep); }
.btn-small { min-height: 42px; padding: 8px 20px; font-size: 0.9375rem; }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: #46350F; }
.btn-dark:active { background: #1D1504; }
.btn-pill { background: var(--pill); }
.btn-pill:hover { background: #FFEBB8; }
.btn-plain { background: var(--card); border: 1.5px solid var(--comb); font-weight: 500; }
.btn-plain:hover { background: var(--paper); }

/* Top bar */
.site-head { position: sticky; top: 0; z-index: 10; padding-block: 12px; background: rgba(255, 252, 246, 0.92); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.375rem; text-decoration: none; letter-spacing: -0.01em; }
.brand img { width: 36px; display: block; }
.site-nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); }
.site-nav a:not(.btn):not(.store-badge) { color: var(--ink); text-decoration: none; font-weight: 500; }
.site-nav a:not(.btn):not(.store-badge):hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--honey); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Bands */
.band { padding-block: var(--band); }
.tint { background: var(--tint); }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 + p { margin-top: 16px; color: var(--soft); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.5; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(20px, 4vw, 48px) clamp(48px, 7vw, 88px); }
.hero > .wrap { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 600px); justify-content: space-between; gap: 40px; align-items: center; }
.for-whom { display: inline-block; background: var(--pill); font-weight: 600; font-size: 0.875rem; line-height: 1.5; padding: 6px 14px; border-radius: 999px; margin-bottom: 26px; }
.hero h1 span { display: block; text-wrap: balance; }
.hero .lead { margin-top: 24px; max-width: 29em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.terms-line { margin-top: 14px; }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 22px; font-size: 0.875rem; font-weight: 600; }
.facts li { padding-left: 16px; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 9px; height: 10.4px; background: var(--honey); clip-path: var(--hex); }

/* The loop: pick, put the phone down, they play, a sticker in the hive, and round again */
.loop { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1; justify-self: end; }
.loop-path, .loop-bee { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.loop-bee { pointer-events: none; z-index: 1; } /* the bee passes behind the four cards, so it never covers their words */
.loop-dots { stroke: var(--honey-deep); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 0.1 11; }
.loop-heads path { stroke: var(--honey-deep); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.loop-reveal { stroke-dasharray: 1; stroke-dashoffset: 0; }
.loop-mid { position: absolute; left: 50%; top: 51.5%; width: 31%; margin: 0; translate: -50% -50%; text-align: center; }
.loop-mid svg { display: block; width: 100%; height: auto; overflow: visible; }
.loop-mid figcaption { position: absolute; left: 50%; bottom: 100%; translate: -50% 0; margin-bottom: 8px; white-space: nowrap; font-size: 0.6875rem; }
.loop-steps { list-style: none; }
.ls { position: absolute; translate: -50% -50%; z-index: 2; background: var(--card); border: 1.5px solid var(--comb); border-radius: 18px; padding: 12px 16px; display: grid; justify-items: center; text-align: center; row-gap: 2px; }
.ls-t { font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.ls-s { font-size: 0.875rem; line-height: 1.4; color: var(--soft); }
.ls-h { display: inline-flex; align-items: center; gap: 8px; }
.ls1, .ls3 { justify-items: start; text-align: left; white-space: nowrap; }
.ls1 { left: 50%; top: 11.7%; grid-template-columns: auto auto; column-gap: 12px; align-items: center; }
.ls1 .ls-phone { grid-row: span 2; width: 30px; height: 65px; max-width: none; object-fit: cover; border: 1.5px solid var(--ink); border-radius: 6px; display: block; }
.ls3 { left: 50%; top: 88.3%; }
.ls2 { left: 84.2%; top: 50%; width: max(23%, 100px); }
.ls4 { left: 15.8%; top: 50%; width: max(23%, 100px); }
.ls2 .hexnum, .ls4 .hexnum { margin-bottom: 4px; }
.ls-star { width: 30px; height: 30px; margin-bottom: 2px; }

/* ---------- The chooser ---------- */
.chooser { background: var(--pill); border-radius: 32px; padding: clamp(14px, 3vw, 32px); }
.ch-controls { display: grid; grid-template-columns: 2.3fr 2.2fr 1fr; gap: 16px; }
.ch-group { border: 0; margin: 0; min-width: 0; background: var(--card); border-radius: 20px; padding: 18px 20px 20px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.ch-group legend { float: left; width: 100%; padding: 0; margin-bottom: 6px; font-size: 0.75rem; line-height: 1.34; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border: 1.5px solid var(--comb); border-radius: 999px; background: var(--card); font-size: 0.875rem; font-weight: 600; white-space: nowrap; transition: background-color 150ms ease, border-color 150ms ease; }
.chip input:hover + span { border-color: var(--honey); }
.chip input:checked + span { background: var(--honey); border-color: var(--honey); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.ch-join { position: relative; }
.ch-lines { display: block; width: 100%; height: auto; }
.ch-lines path { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.ch-lines .dots, .hive-lines .dots { stroke: var(--honey-deep); stroke-width: 3; stroke-dasharray: 0.1 9; }
.ch-count { position: absolute; left: 50%; top: 42%; translate: -50% -50%; width: 9.6%; min-width: 92px; aspect-ratio: 104 / 116; }
.ch-count svg { display: block; width: 100%; height: 100%; }
.ch-count-text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ch-count-text strong { font-size: 1.75rem; line-height: 1.1; }
.ch-count-text span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.ch-results { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; min-height: 120px; }
.ch-card { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.ch-card img { display: block; width: 100%; aspect-ratio: 480 / 358; object-fit: cover; background: var(--pill); }
.ch-body { padding: 18px 22px 22px; display: grid; gap: 4px; }
.ch-body h3 a { text-decoration: none; }
.ch-body h3 a::after { content: ""; position: absolute; inset: 0; }
.ch-card:has(a:hover) { border-color: var(--honey); }
.ch-meta { font-weight: 600; font-size: 0.9375rem; }
.ch-need { color: var(--soft); font-size: 0.875rem; }
.ch-where { justify-self: start; margin-top: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--soft); background: var(--pill); padding: 3px 12px; border-radius: 999px; }
.ch-where.is-free { background: var(--leaf-wash); color: #17663A; }
.ch-note { margin-top: 18px; font-weight: 500; }
.ch-note[hidden] { display: none; }
.ch-foot { margin-top: 20px; display: flex; align-items: center; gap: 16px; min-height: 42px; color: var(--soft); font-size: 0.875rem; }
.chooser:not(.is-live) .ch-foot { display: none; }

/* ---------- One game, taken apart ---------- */
.anatomy { display: grid; grid-template-columns: 1fr minmax(0, 480px) 1fr; }
.flower { display: block; width: 100%; height: auto; overflow: visible; }
.flower .stubs path { stroke: var(--ink); stroke-width: 1.5; }
.flower .dot { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; }
.fl-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; fill: var(--ink); }
.fl-val { font-size: 27px; font-weight: 600; fill: var(--ink); }
.calls { list-style: none; position: relative; }
.call { position: absolute; left: 0; right: 0; translate: 0 -50%; display: flex; align-items: center; }
.call.r1 { top: 23.6%; } .call.r2 { top: 50%; } .call.r3 { top: 76.4%; }
.call-text { flex: 0 1 290px; display: grid; gap: 4px; }
.call-text strong { font-size: 1.125rem; line-height: 1.34; }
.call-text span { font-size: 0.875rem; line-height: 1.5; color: var(--soft); }
.call-line { flex: 1 1 24px; min-width: 16px; border-top: 1.5px solid var(--ink); }
.calls-l .call { justify-content: flex-end; }
.calls-l .call-text { text-align: right; padding-right: 12px; }
.calls-r .call { flex-direction: row-reverse; justify-content: flex-end; }
.calls-r .call-text { padding-left: 12px; }
.asteps-wrap { margin-top: clamp(32px, 5vw, 56px); }
.asteps-row { display: grid; grid-template-columns: 1fr 100px; gap: 24px; margin-top: 20px; align-items: start; }
.asteps, .steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.steps.k3 { grid-template-columns: repeat(3, 1fr); }
.steps.k5 { grid-template-columns: repeat(5, 1fr); }
.asteps li, .steps li { display: grid; gap: 12px; align-content: start; justify-items: start; }
.asteps img, .steps img { display: block; width: 100%; aspect-ratio: 480 / 358; object-fit: cover; border-radius: 18px; background: #F8F1DC; }
.asteps p, .steps p { display: flex; gap: 10px; font-size: 0.875rem; line-height: 1.5; }
.aphone { margin: 0; }
.aphone img { width: 100%; }
.aphone figcaption { margin-top: 8px; font-size: 0.875rem; line-height: 1.4; color: var(--soft); }

/* ---------- The age band ---------- */
.ages-cap { margin-bottom: 10px; }
.ages { list-style: none; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: auto auto auto auto auto auto; }
.age { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 6; justify-items: center; text-align: center; }
.age:nth-child(1) { grid-column: 1; } .age:nth-child(2) { grid-column: 2; } .age:nth-child(3) { grid-column: 3; } .age:nth-child(4) { grid-column: 4; }
.age:nth-child(5) { grid-column: 5; } .age:nth-child(6) { grid-column: 6; } .age:nth-child(7) { grid-column: 7; } .age:nth-child(8) { grid-column: 8; }
.ages-mid { grid-row: 4; grid-column: 1 / -1; margin-top: 30px; }
.age-top { align-self: end; display: grid; justify-items: center; }
.age-name { font-size: 0.875rem; font-weight: 600; line-height: 1.3; padding: 0 6px 12px; max-width: 9.5em; }
.age-more { display: none; }
.cells { width: 104px; display: flex; flex-wrap: wrap-reverse; padding-bottom: 14px; }
.cells.k1 { justify-content: center; }
.cell { display: block; width: 50%; aspect-ratio: 0.866; padding: 2.5px; background: var(--honey); clip-path: var(--hex); margin-top: -13px; position: relative; }
.cell:nth-child(3n) { margin-inline: 25%; }
.cell img { display: block; width: 100%; height: 100%; object-fit: cover; clip-path: var(--hex); background: var(--pill); }
a.cell { transition: scale 150ms ease; }
a.cell:hover, a.cell:focus-visible { scale: 1.3; z-index: 2; background: var(--ink); outline: none; }
.age-label { width: 100%; background: var(--pill); padding: 13px 4px; font-size: 1.125rem; font-weight: 600; line-height: 1.34; }
.age:nth-child(1) .age-label { border-radius: 999px 0 0 999px; }
.age:nth-child(8) .age-label { border-radius: 0 999px 999px 0; }
.age-start { margin-top: 12px; font-size: 0.875rem; color: var(--soft); }
.age-sum { grid-row: 5; margin-top: 10px; }
.age-sum strong { font-size: 1.75rem; line-height: 1.15; }
.age-of { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.age-bar { grid-row: 6; display: block; width: 78%; height: 6px; margin-top: 8px; overflow: visible; }

/* ---------- The hive ---------- */
.hive { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 540px); justify-content: space-between; gap: 40px; align-items: center; }
.hive-text .eyebrow { margin-bottom: 14px; }
.hive-text .lead { margin-top: 16px; }
.hive-text .caps { margin-top: 30px; }
.stickers { list-style: none; display: flex; gap: 14px; margin-top: 12px; font-size: 0.875rem; color: var(--soft); text-align: center; }
.stickers li { display: grid; gap: 6px; justify-items: center; }
.stk { width: 28px; height: 28px; }
.stickers .stk { width: 60px; height: 60px; padding: 15px; background: var(--card); border: 1.5px solid var(--comb); border-radius: 50%; }
.mini { margin: 28px 0 0; display: flex; align-items: center; gap: 16px; max-width: 380px; }
.mini img { width: 80px; flex: none; }
.mini figcaption { font-size: 0.875rem; line-height: 1.5; color: var(--soft); }
.hive-art { position: relative; width: 100%; aspect-ratio: 540 / 474; }
.hive-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hive-empty path { stroke: var(--comb); stroke-width: 1.6; stroke-dasharray: 5 6; }
.hc { position: absolute; width: 17.8%; aspect-ratio: 0.866; translate: -50% -50%; }
.hc::before { content: ""; position: absolute; inset: 0; background: var(--honey); clip-path: var(--hex); }
.hc.is-last::before { background: var(--honey-deep); }
.hc img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: cover; clip-path: var(--hex); background: var(--pill); }
.hc-s { position: absolute; left: 50%; bottom: -9%; translate: -50% 0; width: 30%; height: auto; aspect-ratio: 1; padding: 3px; background: var(--card); border-radius: 50%; }
.hc1 { left: 8.9%; top: 12.2%; } .hc2 { left: 31.1%; top: 12.2%; } .hc3 { left: 53.3%; top: 12.2%; } .hc4 { left: 75.6%; top: 12.2%; }
.hc5 { left: 20%; top: 34.2%; } .hc6 { left: 42.2%; top: 34.2%; } .hc7 { left: 64.4%; top: 34.2%; }
.hc8 { left: 8.9%; top: 56.1%; }
.hive-bee { position: absolute; left: 31.1%; top: 56.1%; width: 15%; translate: -50% -50%; }

/* ---------- What the AI is told ---------- */
.uses { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: clamp(28px, 4vw, 48px); }
.uses li { padding: 22px 26px 24px; }
.uses p { margin-top: 6px; color: var(--soft); }
.lanes { display: grid; gap: 24px; }
.lane { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: center; }
.told { border: 2px solid; border-radius: 24px; padding: 24px; }
.told-yes { background: var(--leaf-wash); border-color: var(--leaf); }
.told-no { background: var(--pink-wash); border-color: var(--pink); }
.told ul { list-style: none; display: grid; gap: 10px; margin-top: 12px; }
.told li { display: flex; gap: 10px; }
.kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px 30px; }
.told .small { color: var(--soft); margin-left: 30px; }
.told-only { margin-top: 16px; padding-top: 16px; border-top: 1.5px solid var(--leaf); }
.flow { list-style: none; display: flex; flex-wrap: wrap; align-items: flex-start; }
.hop { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding-left: 40px; min-width: 0; }
.go { position: absolute; left: 6px; top: 42px; display: block; line-height: 0; color: var(--ink); }
.node { display: block; width: 92px; height: auto; flex: none; }
.node text { font-size: 18px; font-weight: 600; fill: var(--ink); }
.hop-text { display: grid; gap: 4px; margin-top: 10px; }
.hop-text strong { font-size: 1.0625rem; line-height: 1.3; }
.hop-text span { font-size: 0.875rem; line-height: 1.45; color: var(--soft); }
.hop-phone { flex: 0 0 100%; padding: 0; align-items: flex-end; margin-top: 10px; }
.hop-phone .go { position: static; rotate: 90deg; margin: 0 calc(12.5% - 34px) 14px 0; }
.back { display: flex; align-items: center; gap: 18px; padding: 16px 22px 16px 16px; max-width: 460px; text-align: left; }
.back img { width: 58px; flex: none; }
.back .hop-text { margin-top: 0; }
.back .hop-text span { font-size: 0.9375rem; }
.stop { display: flex; align-items: center; gap: 14px; min-width: 0; }
.stop-line { flex: none; width: 70px; border-top: 2.5px dashed var(--no); transform-origin: left; }
.stop-bar { flex: none; width: 5px; height: 64px; border-radius: 3px; background: var(--no); }
.stop-text { display: grid; gap: 2px; }
.stop-text strong { font-size: 1.25rem; color: var(--no); }
.stop-text span { font-size: 0.875rem; color: var(--soft); }
.ghosts { margin-left: auto; display: flex; gap: clamp(20px, 5vw, 76px); padding-right: clamp(8px, 2vw, 34px); }
.ghosts .node { width: 80px; }
.ai-foot { margin-top: 32px; max-width: 50em; font-size: 0.875rem; line-height: 1.6; color: var(--soft); }

/* ---------- The three free days ---------- */
.days-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 160px minmax(0, 300px); align-items: start; }
.days { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; margin-top: 10px; }
.days::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 104px; background: var(--pill); border-radius: 999px; }
.days li { position: relative; display: grid; justify-items: start; align-content: start; padding: 12px 16px 0 36px; }
.days li:not(:last-child)::after { content: ""; position: absolute; top: 50px; left: 118px; right: -26px; border-top: 3px dotted var(--honey-deep); }
.day { width: 72px; height: 80px; display: block; position: relative; }
.day text { font-size: 14px; font-weight: 600; fill: var(--ink); }
.days strong { margin-top: 28px; font-size: 1.125rem; line-height: 1.34; }
.days li > span { font-size: 0.875rem; line-height: 1.5; color: var(--soft); margin-top: 2px; }
.fork { display: block; width: 160px; height: 220px; margin-top: 2px; }
.fork path { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.fork-phone { display: none; }
.prices { list-style: none; display: grid; gap: 16px; }
.price { position: relative; background: var(--card); border: 1.5px solid var(--comb); border-radius: 24px; padding: 16px 24px 18px; font-size: 1.125rem; font-weight: 600; }
.price::before { content: ""; position: absolute; left: -11px; top: 50%; translate: 0 -50%; border: 6px solid transparent; border-left: 9px solid var(--ink); }
.price strong { font-size: 3.5rem; line-height: 1.07; letter-spacing: -0.03em; margin-right: 4px; }
.price .small { font-weight: 600; margin-top: 2px; }
.price.is-best { background: var(--honey); border-color: var(--honey); }
.plan-cap { margin-top: clamp(32px, 4vw, 44px); }
.plan-has { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.plan-has li { background: var(--card); border: 1.5px solid var(--comb); border-radius: 999px; padding: 8px 18px; font-size: 0.875rem; font-weight: 600; }
.plan-cta { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.plan-cta .small { flex: 1 1 320px; max-width: 34em; }

/* ---------- Play guides on the home page ---------- */
.guides { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; }
.gfeat { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; }
.gfeat img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #F8F1DC; }
.gfeat-body { display: grid; gap: 8px; padding: 28px 32px 30px; color: var(--soft); }
.gfeat-body strong { font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.22; color: var(--ink); }
.go-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 600; color: var(--ink); }
.gcards { list-style: none; display: grid; gap: 20px; }
.gcard a { display: flex; align-items: center; gap: 20px; height: 100%; padding: 22px 26px; text-decoration: none; }
.gcard a > span { display: grid; gap: 4px; font-size: 0.875rem; color: var(--soft); }
.gcard strong { font-size: 1.1875rem; line-height: 1.3; color: var(--ink); }
.gfeat:hover, .gcard:has(a:hover) { border-color: var(--honey); }

/* ---------- Questions ---------- */
.qa { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 736px); justify-content: space-between; gap: 40px; align-items: start; }
.qa-head .eyebrow { margin-bottom: 14px; }
.qa-head img { display: block; width: 76px; margin: 36px 0 28px 44px; }
.q { padding: 24px 0; border-bottom: 1.5px solid var(--comb); }
.q:first-child { padding-top: 0; }
.q:last-child { border-bottom: 0; }
.q p { margin-top: 8px; color: var(--soft); }

/* ---------- The closing panel ---------- */
.panel { background: var(--honey); border-radius: 32px; padding: clamp(28px, 6vw, 64px) clamp(22px, 6vw, 72px); display: flex; align-items: center; gap: clamp(24px, 5vw, 64px); }
.panel > img { width: clamp(84px, 12vw, 132px); flex: none; }
.panel p { margin-top: 12px; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.5; }
.panel .btn { margin-top: 24px; }
.panel .small { font-size: 0.875rem; margin-top: 16px; }

/* ---------- Footer ---------- */
.site-foot { background: var(--pill); padding-block: 48px 40px; font-size: 0.875rem; color: var(--soft); }
.site-foot .wrap { display: grid; gap: 24px; }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.foot-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 1rem; }
.foot-links a, .linklike { color: var(--ink); font-weight: 500; text-decoration: none; }
.foot-links a:hover, .linklike:hover { text-decoration: underline; text-decoration-color: var(--honey-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; cursor: pointer; }
.foot-guides { border-top: 1.5px solid var(--comb); padding-top: 22px; }
.foot-guides h2 { font-size: 0.75rem; line-height: 1.34; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.foot-guides ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 10px; }
.foot-guides a { color: var(--ink); text-decoration-color: var(--comb); }
.site-foot address { font-style: normal; }
.site-foot .legal a { color: var(--soft); }

/* Analytics choice */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; max-width: 460px; margin-left: auto; background: var(--card); border: 1.5px solid var(--comb); border-radius: 24px; box-shadow: 0 2px 6px rgba(46, 34, 8, 0.06), 0 18px 44px rgba(46, 34, 8, 0.16); padding: 20px; }
.consent[hidden] { display: none; }
.consent h2 { font-size: 1.125rem; letter-spacing: 0; }
.consent p { color: var(--soft); font-size: 0.9375rem; margin-top: 6px; }
.consent .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.consent .btn { flex: 1 1 140px; }

/* ---------- Play guides and game pages ---------- */
.article { padding-block: clamp(16px, 3vw, 36px) var(--band); }
.article h1 { font-size: clamp(2.125rem, 4.2vw, 3.375rem); }
.article h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); letter-spacing: -0.01em; }
.article h2.caps, .article .caps { font-size: 0.75rem; letter-spacing: 0.08em; line-height: 1.34; }
.article section { margin-top: clamp(36px, 5vw, 56px); }
.article section > h2:not(.caps) { margin-bottom: 18px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 0.875rem; color: var(--soft); margin-bottom: 14px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; }
.crumbs a { color: var(--soft); text-decoration-color: var(--comb); }
.a-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(24px, 5vw, 64px); align-items: center; }
.a-head-plain { grid-template-columns: minmax(0, 800px); }
.a-head .lead { margin-top: 18px; }
.a-cover { display: block; width: 100%; aspect-ratio: 480 / 358; object-fit: cover; border-radius: 32px; background: #F8F1DC; }
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pills li { background: var(--pill); color: var(--soft); font-size: 0.875rem; font-weight: 600; line-height: 1.5; padding: 4px 12px; border-radius: 999px; }
.game { padding: clamp(20px, 4vw, 40px); }
.article .game.card + .game.card { margin-top: 28px; }
.game > .caps { margin: 26px 0 12px; }
.game > .caps:first-child { margin-top: 0; }
.game-top { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: center; }
.game-top img { display: block; width: 100%; aspect-ratio: 480 / 358; object-fit: cover; border-radius: 24px; background: #F8F1DC; }
.game-top h3 { font-size: clamp(1.5rem, 3vw, 2.125rem); line-height: 1.15; letter-spacing: -0.01em; margin: 10px 0 8px; }
.game-n { display: flex; align-items: center; gap: 10px; }
.needs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.needs li { background: var(--card); border: 1.5px solid var(--comb); border-radius: 999px; padding: 6px 16px; font-size: 0.875rem; font-weight: 600; }
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.notes > div { border-radius: 20px; padding: 18px 20px 20px; }
.notes .caps { margin-bottom: 6px; }
.note-eye { background: var(--pill); }
.note-tip { background: var(--sky-wash); }
.notes > div:only-child { grid-column: 1 / -1; }
.game-go { margin-top: 22px; }
.facts-table { margin: 0; background: var(--card); border: 1.5px solid var(--comb); border-radius: 24px; overflow: hidden; }
.facts-table div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 14px 24px; }
.facts-table div + div { border-top: 1.5px solid var(--comb); }
.facts-table dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); padding-top: 4px; }
.facts-table dd { margin: 0; font-weight: 500; }
.glance .small { margin-top: 14px; max-width: 46em; }
.tablewrap { background: var(--card); border: 1.5px solid var(--comb); border-radius: 24px; overflow: hidden; }
.glance-table { width: 100%; border-collapse: collapse; text-align: left; }
.glance-table thead th { background: var(--pill); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); padding: 12px 20px; }
.glance-table td, .glance-table tbody th { padding: 12px 20px; border-top: 1.5px solid var(--comb); font-weight: 400; vertical-align: middle; }
.glance-table tbody th a { display: inline-flex; align-items: center; gap: 14px; font-weight: 600; text-decoration: none; }
.glance-table tbody th a:hover { text-decoration: underline; text-decoration-color: var(--honey); text-decoration-thickness: 2px; }
.glance-table .hexi { width: 34px; }
.guide-qa h3 { margin-top: 28px; }
.guide-qa p, .limits p { margin-top: 8px; max-width: 47em; color: var(--soft); }
.guide-qa h2 + h3 { margin-top: 0; }
.linklist { list-style: none; max-width: 760px; }
.linklist li { border-bottom: 1.5px solid var(--comb); }
.linklist a { display: block; padding: 14px 0; font-weight: 600; text-decoration: none; }
.linklist a:hover { text-decoration: underline; text-decoration-color: var(--honey); text-decoration-thickness: 2px; }
.app-panel { margin-top: clamp(40px, 6vw, 64px); background: var(--pill); border-radius: 32px; padding: clamp(24px, 5vw, 44px) clamp(22px, 5vw, 56px); display: flex; align-items: center; gap: clamp(20px, 4vw, 48px); }
.app-panel > img { width: clamp(72px, 10vw, 112px); flex: none; }
.app-panel h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); letter-spacing: -0.01em; }
.app-panel p { margin-top: 8px; color: var(--soft); max-width: 44em; }
.app-panel .btn { margin-top: 18px; }
.byline { margin-top: 28px; font-size: 0.875rem; color: var(--soft); }
.gamegrid, .hubgrid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(28px, 4vw, 44px); }
.gamegrid li, .hubgrid li { overflow: hidden; }
.gamegrid a, .hubgrid a { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.gamegrid img, .hubgrid img { display: block; width: 100%; aspect-ratio: 480 / 358; object-fit: cover; background: #F8F1DC; }
.gg-body { display: grid; gap: 4px; padding: 18px 22px 22px; font-size: 0.875rem; font-weight: 600; color: var(--soft); }
.gg-body strong { font-size: 1.25rem; line-height: 1.28; color: var(--ink); }
.gg-desc { font-weight: 400; margin-top: 4px; }
.gamegrid li:has(a:hover), .hubgrid li:has(a:hover) { border-color: var(--honey); }
.namelist { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px 20px; margin-top: 20px; }
.namelist li { display: flex; align-items: center; gap: 12px; }
.namelist .hexi { width: 44px; }
.namelist li > span { display: grid; font-size: 0.875rem; color: var(--soft); }
.namelist strong { font-size: 1rem; color: var(--ink); }

/* ---------- Plain pages: privacy, terms, support ---------- */
.doc { padding-block: clamp(24px, 4vw, 48px) var(--band); }
.doc .wrap { max-width: 800px; }
.doc h1 { font-size: clamp(2rem, 4.4vw, 2.75rem); }
.doc .dated { color: var(--soft); margin-top: 10px; font-size: 0.9375rem; }
.doc h2 { font-size: 1.5rem; margin: 44px 0 12px; letter-spacing: 0; line-height: 1.25; }
.doc h3 { margin: 24px 0 6px; }
.doc p { margin-top: 12px; }
.doc ul, .doc ol { margin: 12px 0 0; padding-left: 22px; }
.doc li { margin-top: 8px; }
.doc li::marker { color: var(--soft); }
.doc .note { background: var(--pill); border-radius: 16px; padding: 16px 20px; margin-top: 20px; color: var(--ink); font-size: 1rem; max-width: none; }
.doc .note::before { content: none; }
.doc .note p:first-child { margin-top: 0; }
.doc .intro { font-size: 1.125rem; color: var(--soft); margin-top: 18px; line-height: 1.55; }
.doc .cardlist { list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 18px; }
.doc .cardlist > li { margin: 0; padding: 20px 24px; }
.doc .cardlist ol li { margin-top: 6px; }
.doc .cardlist h2 { font-size: 1.25rem; margin: 0 0 6px; line-height: 1.3; }
.doc .cardlist p { margin-top: 6px; color: var(--soft); }
.doc .cardlist ol { color: var(--soft); }
.doc .cardlist + p { margin-top: 28px; color: var(--soft); }

/* ---------- Motion. Position, opacity and lines drawing in, once. With reduced motion none of this applies. ---------- */
.d0 { --d: 0; } .d1 { --d: 1; } .d2 { --d: 2; } .d3 { --d: 3; } .d4 { --d: 4; } .d5 { --d: 5; } .d6 { --d: 6; } .d7 { --d: 7; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pop { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } }
  @keyframes pop { from { opacity: 0; transform: scale(0.9); } }
  @keyframes fade { from { opacity: 0; } }
  @keyframes draw { from { stroke-dashoffset: 1; } }
  @keyframes growx { from { transform: scaleX(0); } }
  @keyframes slide { from { opacity: 0; transform: translateX(24px); } }
  @keyframes nudge { 50% { transform: translateX(3px); } }
  @keyframes land { from { opacity: 0; transform: translate(190%, -60%); } 60% { opacity: 1; } }

  /* The hero loop draws itself on arrival, with no script needed */
  .loop-reveal { animation: draw 900ms var(--inout) both; }
  .ls { animation: rise 300ms var(--out) both; }
  .ls1 { animation-delay: 700ms; } .ls2 { animation-delay: 780ms; } .ls3 { animation-delay: 860ms; } .ls4 { animation-delay: 940ms; }
  .loop-mid { animation: fade 400ms ease-out 300ms both; }

  /* Everything below waits until it is on screen (site.js adds "anim", then "in") */
  .anim [data-draw]:not(.in):not([data-shown]) :is(.pop, .astep, .hop, .call-text, .ch-card, .cell, .hc, .hive-bee, .gfeat, .gcard, .days li, .price, .stop-text),
  .anim [data-draw]:not(.in):not([data-shown]) .draw { opacity: 0; }
  .in .pop { animation: pop 300ms var(--out) both; animation-delay: calc(var(--d, 0) * 80ms); }
  .in .stubs .draw { animation: draw 300ms var(--inout) 640ms both; }
  .in .call-text { animation: fade 300ms ease-out 900ms both; }
  .in .astep { animation: slide 300ms var(--out) both; animation-delay: calc(var(--d, 0) * 80ms); }

  .chooser.in .ch-lines .draw { animation: draw 400ms var(--inout) both; }
  .ch-results li { animation: rise 300ms var(--out) both; animation-delay: calc(var(--d, 0) * 80ms); }
  .ch-results.is-swapping li { animation: none; opacity: 0; transform: translateY(8px); transition: opacity 150ms ease, transform 150ms ease; }

  .ages.in .cell { animation: pop 150ms var(--out) both; animation-delay: calc(var(--col, 0) * 100ms + var(--n, 0) * 40ms); }
  .ages.in .grow { transform-box: fill-box; transform-origin: left; animation: growx 600ms var(--inout) both; animation-delay: calc(var(--col, 0) * 100ms); }
  .age:nth-child(2) { --col: 1; } .age:nth-child(3) { --col: 2; } .age:nth-child(4) { --col: 3; } .age:nth-child(5) { --col: 4; } .age:nth-child(6) { --col: 5; } .age:nth-child(7) { --col: 6; } .age:nth-child(8) { --col: 7; }
  .cell:nth-child(2) { --n: 1; } .cell:nth-child(3) { --n: 2; } .cell:nth-child(4) { --n: 3; } .cell:nth-child(5) { --n: 4; } .cell:nth-child(6) { --n: 5; } .cell:nth-child(7) { --n: 6; } .cell:nth-child(8) { --n: 7; } .cell:nth-child(9) { --n: 8; } .cell:nth-child(10) { --n: 9; } .cell:nth-child(11) { --n: 10; } .cell:nth-child(12) { --n: 11; }

  .hive-art.in .hc { animation: pop 300ms cubic-bezier(0.3, 1.4, 0.5, 1) both; animation-delay: calc(var(--d, 0) * 120ms); }
  .hive-art.in .hive-bee { animation: land 1200ms var(--inout) 700ms both; }
  .hive-art.in .hc.is-last { animation-delay: 1900ms; }

  .lanes.in .hop { animation: rise 400ms var(--out) both; }
  .lanes.in .h0 { animation-delay: 0ms; } .lanes.in .h1 { animation-delay: 600ms; } .lanes.in .h2 { animation-delay: 1200ms; } .lanes.in .h3 { animation-delay: 1800ms; } .lanes.in .h4 { animation-delay: 2400ms; }
  .lanes.in .tick { animation: draw 250ms var(--inout) 500ms both; }
  .lanes.in .stop-line { animation: growx 500ms var(--inout) 300ms both; }
  .lanes.in .stop-bar { animation: nudge 300ms ease-in-out 800ms; }
  .lanes.in .stop-text { animation: fade 300ms ease-out 800ms both; }

  .days-wrap.in .days li { animation: fade 300ms ease-out both; animation-delay: calc(var(--d, 0) * 300ms); }
  .days-wrap.in .fork .draw { animation: draw 400ms var(--inout) 900ms both; }
  .days-wrap.in .price { animation: rise 300ms var(--out) 1200ms both; }
  .days-wrap.in .price + .price { animation-delay: 1280ms; }

  .guides.in .gfeat, .guides.in .gcard { animation: rise 300ms var(--out) both; }
  .guides.in .gcard:nth-child(1) { animation-delay: 80ms; } .guides.in .gcard:nth-child(2) { animation-delay: 160ms; } .guides.in .gcard:nth-child(3) { animation-delay: 240ms; }
}

/* ---------- Narrower screens ---------- */
@media (max-width: 1179px) {
  .site-nav a:not(.btn):not(.store-badge) { display: none; }
  .ghosts { display: none; }
  .lane { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .h0 { padding-left: 0; }
  .h0 .go { display: none; }
  .stop { display: grid; gap: 10px; justify-items: start; padding-left: 28px; }
  .stop::before { content: ""; height: 26px; margin-left: 30px; border-left: 2.5px dashed var(--no); }
  .stop-line { display: none; }
  .stop-bar { width: 64px; height: 5px; }
}
@media (max-width: 999px) {
  .ch-lines { display: none; }
  .ch-count { position: relative; left: auto; top: auto; translate: none; width: 96px; margin: 20px auto; }
  .ch-count::before, .ch-count::after { content: ""; position: absolute; left: 50%; height: 14px; border-left: 3px dotted var(--honey-deep); translate: -1.5px 0; }
  .ch-count::before { bottom: 100%; margin-bottom: 3px; }
  .ch-count::after { top: 100%; margin-top: 3px; }
}
@media (max-width: 899px) {
  .hero > .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .loop { justify-self: center; max-width: 480px; }
  .ch-controls { grid-template-columns: 1fr; gap: 10px; }
  .anatomy { display: flex; flex-direction: column; }
  .flower { order: -1; }
  .flower { max-width: 420px; margin-inline: auto; }
  .flower .stubs { display: none; }
  .calls { display: grid; gap: 16px; margin-top: 8px; }
  .calls-l { margin-top: 28px; }
  .calls-r { margin-top: 16px; }
  .call { position: static; translate: none; align-items: flex-start; }
  .calls .call { flex-direction: row; justify-content: flex-start; }
  .call::before { content: ""; flex: none; width: 16px; height: 18.5px; margin: 3px 12px 0 0; clip-path: var(--hex); background: var(--honey); }
  .c-sky::before { background: var(--sky); } .c-leaf::before { background: var(--leaf); } .c-pink::before { background: var(--pink); } .c-sun::before { background: var(--sun); } .c-deep::before { background: var(--honey-deep); }
  .calls .call-text { flex: 1; text-align: left; padding: 0; }
  .call-line { display: none; }
  .asteps-row { grid-template-columns: 1fr; }
  .aphone { display: flex; align-items: center; gap: 14px; }
  .aphone img { width: 72px; }
  .aphone figcaption { margin: 0; }

  .ages { display: block; position: relative; }
  .ages::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 64px; background: var(--pill); border-radius: 32px; }
  .ages .age { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; grid-row: auto; grid-column: auto; justify-items: start; text-align: left; column-gap: 16px; padding: 14px 0; }
  .ages .age-label { grid-column: 1; grid-row: 1 / span 2; background: none; padding: 0 4px; text-align: center; align-self: start; line-height: 1.25; border-radius: 0; }
  .age-top, .ages .age-sum { grid-column: 2; }
  .age-top { justify-items: start; grid-row: 1; }
  .ages .age-sum { grid-row: 2; }
  .ages-mid { display: none; }
  .age-name { padding: 0; max-width: none; font-weight: 500; }
  .age-more { display: inline; }
  .cells { width: auto; flex-wrap: wrap; gap: 4px; padding: 8px 0 6px; }
  .cell { width: 44px; margin: 0; }
  .cell:nth-child(3n) { margin-inline: 0; }
  .age-start, .age-bar, .ages-cap { display: none; }
  .age-sum { margin: 0; font-size: 0.875rem; color: var(--soft); }
  .age-sum strong { font-size: inherit; font-weight: 400; }
  .age-of { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }

  .hive { grid-template-columns: minmax(0, 1fr); }
  .hive-art { max-width: 480px; margin-inline: auto; }
  .uses { grid-template-columns: 1fr; gap: 12px; }
  .lane { gap: 0; }
  .flow { display: grid; gap: 0; }
  .hop { flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 44px 0 0; }
  .hop .go { display: block; left: 25px; top: 13px; rotate: 90deg; }
  .node { width: 72px; }
  .hop-text { margin-top: 0; }
  .hop-phone { align-items: stretch; flex-direction: column; margin: 0; }
  .hop-phone .go { position: absolute; margin: 0; }
  .back { max-width: none; }
  .stop { padding-top: 16px; }

  .days-wrap { display: block; }
  .days { grid-template-columns: 1fr; background: var(--pill); border-radius: 24px; padding: 6px 18px; }
  .days::before { content: none; }
  .days li { grid-template-columns: 60px minmax(0, 1fr); column-gap: 16px; padding: 12px 0; justify-items: start; align-items: center; }
  .days li:not(:last-child)::after { content: none; }
  .day { width: 60px; height: 67px; grid-row: span 2; }
  .days strong { margin-top: 0; align-self: end; }
  .days li > span { align-self: start; }
  .fork { display: none; }
  .fork-phone { display: flex; align-items: center; gap: 12px; margin: 16px 0 16px 38px; color: var(--soft); font-size: 0.875rem; }
  .fork-phone .arrow { rotate: 90deg; color: var(--ink); }
  .price::before { content: none; }
  .guides { grid-template-columns: 1fr; }
  .qa { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .qa-head img { margin: 20px 0 16px; width: 60px; }
  .a-head { grid-template-columns: minmax(0, 1fr); }
  .a-cover { max-width: 520px; }
  .gamegrid, .hubgrid { grid-template-columns: repeat(2, 1fr); }
  .steps, .steps.k3, .steps.k5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 699px) {
  .wrap { padding-inline: 16px; }
  .brand { font-size: 1.25rem; }
  .brand img { width: 32px; }
  .hero .actions .btn { flex: 1 1 100%; }
  .for-whom { margin-bottom: 18px; }
  .hero .lead { margin-top: 16px; }
  .hero .actions { margin-top: 22px; }
  .ls { padding: 8px 10px; border-radius: 14px; }
  .ls-t { font-size: 0.875rem; line-height: 1.25; }
  .ls-s { font-size: 0.75rem; line-height: 1.3; }
  .ls1 .ls-phone { width: 22px; height: 48px; }
  .ls-star { width: 22px; height: 22px; }
  .ls .hexnum { width: 20px; height: 21.5px; }
  .loop-mid figcaption { font-size: 0.625rem; line-height: 1.25; margin-bottom: 5px; white-space: normal; width: 9em; }
  .loop-dots { stroke-width: 4.5; stroke-dasharray: 0.1 15; }
  .ch-results { grid-template-columns: 1fr; gap: 12px; }
  .ch-card { flex-direction: row; align-items: center; padding: 12px; gap: 14px; }
  .ch-card img { width: 96px; height: 96px; aspect-ratio: 1; border-radius: 14px; flex: none; }
  .ch-body { padding: 0; }
  .ch-body h3 { font-size: 1.125rem; }
  .asteps, .steps, .steps.k3, .steps.k5 { grid-template-columns: 1fr; gap: 16px; }
  .asteps li, .steps li { grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-items: start; }
  .asteps li img, .steps li img { grid-row: span 2; border-radius: 14px; }
  .stickers { gap: 8px; }
  .stickers .stk { width: 50px; height: 50px; padding: 12px; }
  .price strong { font-size: 2.75rem; }
  .gcard a { padding: 16px 18px; gap: 14px; }
  .gfeat-body { padding: 20px 22px 24px; }
  .panel, .app-panel { flex-direction: column; align-items: flex-start; }
  .foot-links { gap: 8px 22px; }
  .consent { left: 10px; right: 10px; bottom: 10px; padding: 14px 16px 16px; }
  .consent .row { margin-top: 12px; }
  .game-top { grid-template-columns: minmax(0, 1fr); }
  .game-top img { max-width: 420px; }
  .notes { grid-template-columns: 1fr; }
  .gamegrid, .hubgrid { grid-template-columns: 1fr; }
  .facts-table div { grid-template-columns: 1fr; gap: 2px; padding: 12px 18px; }
  .glance-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .glance-table, .glance-table tbody, .glance-table tr, .glance-table td, .glance-table tbody th { display: block; }
  .glance-table tr { padding: 14px 18px; }
  .glance-table tr + tr { border-top: 1.5px solid var(--comb); }
  .glance-table td, .glance-table tbody th { border: 0; padding: 0; }
  .glance-table td { margin-top: 4px; padding-left: 48px; font-size: 0.875rem; color: var(--soft); }
  .glance-table td::before { content: attr(data-label) ": "; font-weight: 600; }
}

/* Apple's own "Download on the App Store" badge, used everywhere the app is offered.
   Apple's rules: never stretched or recoloured, at least 40px tall, clear space around it. */
.store-badge { display: inline-flex; line-height: 0; border-radius: 9px; flex: none; }
.store-badge img { display: block; height: 54px; width: auto; }
.store-badge-small img { height: 40px; }
.store-badge:focus-visible { outline: 3px solid var(--honey); outline-offset: 3px; }

/* ---------- photo ideas ---------- */
.facts a { color: inherit; text-decoration: underline; text-decoration-color: var(--honey); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.snap { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(24px, 4vw, 56px); align-items: center; }
.snap-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: none; }
.snap-step { background: var(--card); border: 1.5px solid var(--comb); border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 12px; position: relative; min-width: 0; }
.snap-step + .snap-step::before { content: ""; position: absolute; left: -16px; top: 46px; width: 14px; height: 14px; border-top: 2.5px solid var(--honey); border-right: 2.5px solid var(--honey); transform: rotate(45deg); }
.snap-num { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.snap-num span { display: inline-grid; place-items: center; width: 26px; height: 29px; background: var(--honey); clip-path: var(--hex); font-size: 0.8125rem; }
.snap-frame { position: relative; border-radius: 16px; overflow: hidden; line-height: 0; }
.snap-frame img { width: 100%; height: auto; display: block; }
.snap-frame .corner { position: absolute; width: 22px; height: 22px; border: 3px solid var(--ink); opacity: 0.75; }
.snap-frame .tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.snap-frame .tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.snap-frame .bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.snap-frame .br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.snap-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.snap-chips li { background: var(--pill); border-radius: 999px; padding: 6px 12px; font-size: 0.875rem; font-weight: 500; }
.snap-warn { background: #FFF1E6; border-radius: 12px; padding: 10px 12px; font-size: 0.875rem; }
.snap-games { list-style: none; display: grid; gap: 8px; }
.snap-game { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 16px; }
.snap-game img { width: 64px; height: 48px; object-fit: cover; border-radius: 10px; flex: none; }
.snap-game > span { display: flex; flex-direction: column; min-width: 0; font-size: 0.9375rem; }
.snap-game a { color: inherit; }
.snap-game .soft { font-size: 0.8125rem; }
.snap-phone { margin: 0; text-align: center; }
.snap-phone img { width: 100%; max-width: 260px; height: auto; border-radius: 30px; border: 6px solid var(--ink); }
.snap-foot { margin-top: 22px; max-width: 760px; }
@media (max-width: 1099px) {
  .snap { grid-template-columns: 1fr; }
  .snap-phone img { max-width: 220px; }
}
@media (max-width: 799px) {
  .snap-steps { grid-template-columns: 1fr; }
  .snap-step + .snap-step::before { left: 34px; top: -15px; transform: rotate(135deg); }
}