/* KashApps site. Look: an evening shelf. Warm paper (or ink at night), Fraunces for headings,
   and each app gets its own room in the colours of its own screens (rooms.css, generated).
   Fraunces: Copyright 2018 The Fraunces Project Authors, SIL Open Font License 1.1 (licenses/Fraunces-OFL.txt). */
@font-face {
  font-family: "Fraunces";
  src: url(../fonts/fraunces-600.4a10c494f2.woff2) format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url(../fonts/fraunces-400-italic.a4d4cd7e64.woff2) format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
:root {
  --bg: #f6f0e6;
  --surface: #fffaf2;
  --text: #1c1814;
  --muted: #51483e;
  --accent: #8a3f17;
  --accent-text: #ffffff;
  --line: #e0d3bf;
  --focus: #1f5fbf;
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14110d;
    --surface: #1e1a15;
    --text: #f1e9dc;
    --muted: #c4b8a5;
    --accent: #f0b067;
    --accent-text: #1a1006;
    --line: #3a3128;
    --focus: #8fc1ff;
  }
}
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 57px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 16px; }
a { color: var(--accent); text-underline-offset: 0.15em; }
a:focus-visible, .button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 20; }
h1, h2, h3, .brand, .brand-line, .num { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }

/* top bar */
.top { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
.brand { font-size: 1.3rem; color: var(--text); text-decoration: none; padding: 10px 0; }
.home { font-weight: 600; text-decoration: none; padding: 12px 0; font-size: 0.98rem; }

/* index hero */
.index h1 {
  font-size: clamp(2.7rem, 12.5vw, 5.6rem); line-height: 0.98; letter-spacing: -0.025em;
  margin: 0 0 20px; max-width: 11ch;
}
.index h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.intro-hero { padding-top: 44px; padding-bottom: 8px; }
.lede { font-size: 1.15rem; line-height: 1.55; color: var(--muted); margin: 0; max-width: 34ch; }
.fan { position: relative; height: 236px; margin: 28px 0 0; }
.fan img { position: absolute; border-radius: 14px; box-shadow: 0 16px 30px -14px rgb(30 15 5 / 0.6); }
.fan img:nth-child(1) { height: 210px; width: auto; left: 2%; top: 16px; transform: rotate(-6deg); z-index: 1; }
.fan img:nth-child(2) { width: 230px; height: auto; left: 22%; top: 0; border-radius: 10px; }
.fan img:nth-child(3) { height: 220px; width: auto; right: 2%; top: 14px; transform: rotate(5deg); z-index: 2; }

/* shelf of icons */
.shelf { display: grid; gap: 22px; padding-top: 32px; padding-bottom: 48px; }
.shelf-label {
  margin: 0 0 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font: italic 400 1.05rem/1.3 var(--display); color: var(--muted);
}
.shelf ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.shelf a {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 4px 10px;
  border-radius: 16px; text-align: center; text-decoration: none; color: var(--text);
  font-size: 0.86rem; line-height: 1.25; font-weight: 600;
}
.shelf a:hover { background: var(--surface); }
.shelf .icon { width: 60px; height: 60px; border-radius: 15px; box-shadow: 0 6px 14px -6px rgb(40 25 10 / 0.45); }

/* group headings */
.group-head { display: flex; gap: 14px; align-items: baseline; padding-top: 40px; padding-bottom: 22px; }
.num { margin: 0; font-size: 2.6rem; line-height: 1; color: var(--accent); }
.group-head h2 { font-size: 1.85rem; line-height: 1.1; margin: 0 0 4px; }
.group-head > div { flex: 1; }
.group-head p:not(.num) { margin: 0; color: var(--muted); max-width: 40ch; }

/* app rooms */
.room { background: var(--r-bg); color: var(--r-text); }
.room a { color: var(--r-text); }
.room a:focus-visible { outline-color: var(--r-text); }
.room-in { display: flex; flex-direction: column; gap: 16px; padding-top: 40px; padding-bottom: 44px; }
.room-text { display: contents; }
.room-head { display: flex; gap: 14px; align-items: center; order: 1; }
.room-icon { flex: none; line-height: 0; }
.room-icon .icon { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.5); }
.kind { margin: 0; font: italic 400 1.02rem/1.3 var(--display); color: var(--r-muted); }
.room h3 { font-size: clamp(1.95rem, 8.6vw, 3rem); line-height: 1.04; margin: 2px 0 0; }
.tag { order: 2; margin: 0; font-size: 1.12rem; line-height: 1.5; max-width: 34ch; }
.room .strip { order: 3; }
.intro { order: 4; margin: 0; color: var(--r-muted); max-width: 46ch; }
.room-links { order: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 2px 0 0; }
.pill {
  display: inline-flex; align-items: center; min-height: 48px; padding: 10px 22px; border-radius: 999px;
  background: var(--r-accent); color: var(--r-on) !important; font-weight: 600; text-decoration: none;
}
.quiet-link { padding: 12px 0; font-weight: 600; }

/* screenshot strip: swipe on phones, laid out on wide screens */
.strip {
  list-style: none; display: flex; gap: 12px; margin: 4px -16px -24px; padding: 4px 16px 40px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip li { flex: none; scroll-snap-align: start; }
.strip img {
  display: block; height: min(58svh, 440px); width: auto; border-radius: 22px;
  box-shadow: 0 0 0 1px var(--r-edge), 0 18px 34px -16px rgb(0 0 0 / 0.55); background: rgb(0 0 0 / 0.08);
}
.strip.land img { height: auto; width: min(84vw, 600px); border-radius: 14px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .strip img { animation: settle linear both; animation-timeline: view(inline); animation-range: entry 0% contain 30%; }
  }
}
@keyframes settle {
  from { transform: scale(0.9) rotate(-2deg); opacity: 0.45; }
  to { transform: none; opacity: 1; }
}

/* shared bits */
.icon { width: 64px; height: 64px; flex: none; border-radius: 14px; }
.icon.big { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.5); }
.feats { padding-left: 1.2em; }
.feats li { margin: 0 0 10px; }
.feats li::marker { color: var(--accent); }
.button {
  display: inline-flex; align-items: center; padding: 10px 22px; min-height: 48px;
  background: var(--accent); color: var(--accent-text);
  border-radius: 999px; text-decoration: none; font-weight: 600;
}
.pic { display: contents; }
.mono {
  display: inline-flex; align-items: center; justify-content: center;
  background: #23325e; color: #f6e7c8; font-weight: 700; font-size: 1.4rem;
}
.hero-icon { line-height: 0; }

/* privacy and 404 pages */
main.wrap { max-width: 44rem; padding-top: 32px; padding-bottom: 48px; }
main.wrap h1 { font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.1; margin: 0 0 12px; }
.policy ul { padding-left: 1.2em; }
.policy li { margin: 0 0 8px; }

.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; padding: 24px 0 40px; }
.foot p { margin: 4px 0; }
.brand-line { font-size: 1.35rem; color: var(--text); }

@media (min-width: 40rem) {
  .wrap { padding: 0 32px; }
  .strip { margin: 4px -32px -24px; padding: 4px 32px 40px; scroll-padding-inline: 32px; }
  .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}
@media (min-width: 60rem) {
  .index h1 { max-width: 15ch; font-size: clamp(4rem, 6.4vw, 5.6rem); }
  .intro-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px; align-items: center; padding-top: 72px; }
  .fan { height: 470px; margin: 0; }
  .fan img { position: absolute; border-radius: 20px; box-shadow: 0 24px 44px -20px rgb(30 15 5 / 0.6); }
  .fan img:nth-child(1) { height: 400px; width: auto; left: 0; top: 40px; transform: rotate(-6deg); z-index: 1; }
  .fan img:nth-child(2) { width: 380px; height: auto; left: 18%; top: 0; border-radius: 14px; }
  .fan img:nth-child(3) { height: 420px; width: auto; right: 0; top: 46px; transform: rotate(5deg); z-index: 2; }
  .room-in {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
    gap: 56px; padding-top: 88px; padding-bottom: 88px;
  }
  .room-text { display: flex; flex-direction: column; gap: 18px; }
  .room .strip { margin: 0; padding: 0; overflow: visible; justify-content: flex-end; }
  .room:nth-of-type(even) .room-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .room:nth-of-type(even) .strip { order: -1; justify-content: flex-start; }
  .room-in .strip:not(.land) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
  .room-in .strip:not(.land) img { width: 100%; height: auto; }
  .room-in .strip:not(.land) li:nth-child(2) { transform: translateY(32px); }
  .room-in .strip:not(.land) li:nth-child(3) { display: none; }
  .room-in .strip.land { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .room-in .strip.land li:first-child { grid-column: 1 / -1; }
  .room-in .strip.land img { width: 100%; }
  .group-head { padding-top: 72px; padding-bottom: 32px; }
  .num { font-size: 3.6rem; }
  .group-head h2 { font-size: 2.4rem; }
}
/* ===== standalone app pages (Q648) =====
   Each app page is its own small site in its room colours (rooms.css sets --r-*). Three layouts:
   garden (kids: rounded, a raised middle screen), quiet (health: centred, ruled, calm), cinema (games: wide screens). */
body.app-page {
  --bg: var(--r-bg); --surface: var(--r-stage); --text: var(--r-text); --muted: var(--r-muted);
  --accent: var(--r-accent); --accent-text: var(--r-on); --line: var(--r-line); --focus: var(--r-text);
  background: var(--r-bg); color: var(--r-text);
}
html:has(.app-page) { scroll-padding-top: 110px; }
body.app-page a { color: var(--r-text); }
body.app-page .brand { color: var(--r-text); }
body.app-page .top { background: var(--r-bg); border-bottom-color: var(--r-line); }
body.app-page .foot { border-top-color: var(--r-line); color: var(--r-muted); }
body.app-page .brand-line { color: var(--r-text); }
body.app-page .button, body.app-page .more-card, body.app-page .helpline { text-decoration: none; }
body.app-page .button { background: var(--r-accent); color: var(--r-on); }
body.app-page h1, body.app-page h2, body.app-page h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }

/* on-page nav, inside the sticky header */
.subnav { border-top: 1px solid var(--r-line); }
.subnav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; white-space: nowrap;
  font-size: 0.95rem; font-weight: 600; text-decoration: none; border-radius: 8px;
}
.subnav a:hover { background: var(--r-stage); }
.subnav li:first-child a { padding-left: 0; }

/* hero: motif pattern behind the text, CSS only */
.hero-sec { position: relative; isolation: isolate; overflow: hidden; padding: 36px 0 12px; }
.hero-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero2 { display: grid; gap: 22px; }
.hero2-id { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hero2-id .kind { font-size: 1.1rem; }
body.app-page h1 { font-size: clamp(2.5rem, 11.5vw, 4.4rem); line-height: 1; margin: 0 0 12px; text-wrap: balance; }
body.app-page .tag { font-size: 1.2rem; line-height: 1.45; margin: 0; max-width: 32ch; }
body.app-page .kind { color: var(--r-muted); }

/* availability block: truthful today, the store badge takes this exact slot later */
.avail {
  display: flex; align-items: center; gap: 14px; min-height: 80px; padding: 14px 20px;
  background: var(--r-stage); border: 1px solid var(--r-edge); border-radius: var(--r-radius);
}
.avail-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--r-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--r-accent) 28%, transparent); }
.avail p { margin: 0; }
.avail-big { font: 600 1.2rem/1.25 var(--display); }
.avail-small { font-size: 0.93rem; color: var(--r-muted); margin-top: 2px !important; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border-radius: 999px;
  border: 1px solid var(--r-edge); font-size: 0.93rem; font-weight: 600; line-height: 1.25;
}
.chip--note { background: var(--r-text); color: var(--r-bg); border-color: var(--r-text); }
.chip--note::before {
  content: "i"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; flex: none;
  border-radius: 50%; border: 1.5px solid currentColor; font: italic 600 0.8rem/1 var(--display);
}

/* screens on a darker stage: the figure/ground fix for pale rooms */
.screens { padding: 20px 0 16px; }
.stage {
  background: var(--r-stage); border: 1px solid var(--r-edge); border-radius: calc(var(--r-radius) + 10px);
  padding: 26px 0 18px; overflow: hidden;
}
.stage .strip { margin: 0; padding: 4px 20px 22px; scroll-padding-inline: 20px; gap: 18px; }
.stage .strip li { margin: 0; }
.stage figure { margin: 0; }
.stage .strip img {
  height: min(62svh, 520px); width: auto; border-radius: calc(var(--r-radius) + 4px);
  box-shadow: 0 0 0 1px var(--r-edge), 0 22px 38px -16px rgb(0 0 0 / 0.6);
}
.stage .strip.land { display: grid; gap: 22px; overflow: visible; padding-bottom: 8px; }
.stage .strip.land img { width: 100%; height: auto; }
figcaption { margin-top: 12px; max-width: 30ch; font-size: 0.95rem; line-height: 1.4; color: var(--r-muted); }
.stage .strip.land figcaption { max-width: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stage .strip:not(.land) img { animation: settle linear both; animation-timeline: view(inline); animation-range: entry 0% contain 30%; }
  }
}

/* sections */
.why, .privacy, .faq { padding: 8px 0; }
.why > .wrap { padding-top: 36px; padding-bottom: 28px; }
body.app-page h2 { font-size: clamp(1.75rem, 6.4vw, 2.5rem); line-height: 1.1; margin: 0 0 18px; }
.narrow { max-width: 46rem; margin-left: 0; margin-right: auto; }
.privacy > .wrap, .faq > .wrap { padding-top: 28px; padding-bottom: 28px; }
.about p { margin: 0 0 14px; max-width: 40rem; color: var(--r-muted); }
.about p:first-child { font-size: 1.25rem; line-height: 1.5; color: var(--r-text); }
.about { margin-bottom: 34px; }
.benefits { display: grid; gap: 14px; counter-reset: ben; }
.ben { counter-increment: ben; padding: 22px 20px; border-radius: var(--r-radius); background: var(--r-stage); border: 1px solid var(--r-line); }
.ben h3 { font-size: 1.35rem; line-height: 1.2; margin: 0 0 8px; }
.ben h3::before { content: counter(ben); display: block; font: italic 400 2.6rem/1 var(--display); color: var(--r-accent); margin-bottom: 8px; }
.ben p { margin: 0; color: var(--r-muted); }
.allfeats { margin-top: 26px; }
.allfeats summary, .faq summary {
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 52px; padding: 8px 2px; font: 600 1.1rem/1.3 var(--display); list-style: none;
}
.allfeats summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.allfeats summary::after, .faq summary::after { content: "+"; flex: none; font: 400 1.6rem/1 var(--display); color: var(--r-text); }
.allfeats[open] summary::after, .faq details[open] summary::after { content: "\2212"; }
.allfeats summary:focus-visible, .faq summary:focus-visible { outline: 3px solid var(--r-text); outline-offset: 2px; border-radius: 6px; }
.allfeats { border-top: 1px solid var(--r-line); border-bottom: 1px solid var(--r-line); }
.allfeats .feats { color: var(--r-muted); padding-bottom: 8px; }
.faq details { border-top: 1px solid var(--r-line); }
.faq details:last-of-type { border-bottom: 1px solid var(--r-line); }
.faq details p { margin: 0 0 18px; max-width: 40rem; color: var(--r-muted); }

/* parent box, safe-use box, info box */
.box > .wrap { padding-top: 8px; padding-bottom: 36px; }
.box-card { background: var(--r-stage); border: 1px solid var(--r-edge); border-radius: calc(var(--r-radius) + 6px); padding: 26px 20px 22px; }
.box-card h2 { margin-bottom: 14px; }
.box-lead { font-size: 1.1rem; line-height: 1.55; margin: 0 0 12px; }
.box-card > p { max-width: 46rem; }
.rows { margin: 18px 0 0; display: grid; gap: 0; }
.rows > div { padding: 14px 0; border-top: 1px solid var(--r-line); display: grid; gap: 2px; }
.rows dt { font: 600 1.05rem/1.3 var(--display); }
.rows dd { margin: 0; color: var(--r-muted); max-width: 46rem; }
.help-h { font-size: 1.3rem; margin: 26px 0 12px; }
.helplines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.helpline {
  display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 18px; border-radius: 16px;
  background: var(--r-bg); border: 1px solid var(--r-edge); color: var(--r-text);
}
.helpline strong { font: 600 1.7rem/1 var(--display); min-width: 4.6ch; }
.helpline span { color: var(--r-muted); font-size: 0.97rem; line-height: 1.3; }

/* more from KashApps */
.more { background: var(--r-stage); margin-top: 24px; border-top: 1px solid var(--r-line); }
.more > .wrap { padding-top: 36px; padding-bottom: 40px; }
.more-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.more-card {
  display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 14px 18px; border-radius: 20px;
  background: var(--r-bg); color: var(--r-text) !important; border: 1px solid var(--r-edge);
}
.more-card .icon { width: 56px; height: 56px; border-radius: 14px; }
.more-card strong { display: block; font: 600 1.2rem/1.2 var(--display); }
.more-card em { display: block; font: italic 400 1rem/1.3 var(--display); color: var(--r-muted); margin-top: 2px; }
.more-card:hover { filter: brightness(1.04); }
.all-apps { margin: 18px 0 0; }
.all-apps a { font-weight: 600; display: inline-block; padding: 12px 0; }

/* layout: garden (kids) */
.look-garden .ben { border-radius: 28px; }
.look-garden .stage .strip:not(.land) li:nth-child(2) { margin-top: 26px; }

/* layout: quiet (health) */
.look-quiet .hero2 { text-align: center; justify-items: center; }
.look-quiet .hero2-id { flex-direction: column; gap: 6px; }
.look-quiet .tag { margin-left: auto; margin-right: auto; }
.look-quiet .chips { justify-content: center; }
.look-quiet .avail { text-align: left; width: 100%; max-width: 28rem; }
.look-quiet .ben { background: transparent; border: 0; border-top: 1px solid var(--r-edge); border-radius: 0; padding: 20px 0 6px; }
.look-quiet .ben h3::before { font-size: 1.9rem; }
.look-quiet .stage .strip:not(.land) { align-items: end; }

/* layout: cinema (games) */
.look-cinema h1 { font-size: clamp(2.8rem, 13vw, 5.4rem); letter-spacing: 0.005em; }
.look-cinema .hero-sec { padding-top: 48px; }
.look-cinema .ben { background: transparent; border: 0; border-top: 2px solid var(--r-accent); border-radius: 0; padding: 18px 0 6px; }
.look-cinema .stage { padding: 14px; border-radius: calc(var(--r-radius) + 8px); }
.look-cinema .stage .strip.land { padding: 0; }

/* motifs: low-contrast patterns made of the room's own accent */
.motif-dots::before { background:
  radial-gradient(circle, color-mix(in srgb, var(--r-accent) 26%, transparent) 0 3px, transparent 3.5px) 0 0 / 44px 44px,
  radial-gradient(circle, color-mix(in srgb, var(--r-accent) 18%, transparent) 0 2px, transparent 2.5px) 22px 22px / 44px 44px;
  mask-image: linear-gradient(200deg, #000 0%, transparent 60%); -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 60%); }
.motif-bricks::before { background:
  linear-gradient(color-mix(in srgb, var(--r-accent) 20%, transparent) 2px, transparent 2px) 0 0 / 80px 34px,
  linear-gradient(90deg, color-mix(in srgb, var(--r-accent) 20%, transparent) 2px, transparent 2px) 0 0 / 80px 68px,
  linear-gradient(90deg, color-mix(in srgb, var(--r-accent) 20%, transparent) 2px, transparent 2px) 40px 34px / 80px 68px;
  mask-image: linear-gradient(200deg, #000 0%, transparent 62%); -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 62%); }
.motif-stars::before { background:
  radial-gradient(1.6px 1.6px at 30px 40px, #fff 50%, transparent 52%),
  radial-gradient(1.2px 1.2px at 150px 90px, #fff 50%, transparent 52%),
  radial-gradient(1.8px 1.8px at 250px 20px, #fff 50%, transparent 52%),
  radial-gradient(1px 1px at 90px 170px, #fff 50%, transparent 52%),
  radial-gradient(1.4px 1.4px at 300px 200px, #fff 50%, transparent 52%),
  radial-gradient(ellipse 60% 70% at 85% 10%, color-mix(in srgb, var(--r-accent) 22%, transparent), transparent 70%);
  background-size: 320px 240px, 320px 240px, 320px 240px, 320px 240px, 320px 240px, 100% 100%; opacity: 0.8; }
.motif-sun::before { background:
  radial-gradient(circle at 84% 22%, #fff4da 0 3.4rem, color-mix(in srgb, #fff4da 55%, transparent) 3.5rem, transparent 12rem),
  repeating-linear-gradient(180deg, transparent 0 22px, color-mix(in srgb, var(--r-accent) 14%, transparent) 22px 24px);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
.motif-ember::before { background:
  radial-gradient(ellipse 70% 90% at 12% 110%, color-mix(in srgb, var(--r-accent) 38%, transparent), transparent 65%),
  radial-gradient(circle at 78% 30%, color-mix(in srgb, var(--r-accent) 12%, transparent), transparent 40%); }
.motif-steps::before { background:
  linear-gradient(color-mix(in srgb, var(--r-accent) 26%, transparent), color-mix(in srgb, var(--r-accent) 26%, transparent)) right 0 bottom 0 / 64px 36px no-repeat,
  linear-gradient(color-mix(in srgb, var(--r-accent) 22%, transparent), color-mix(in srgb, var(--r-accent) 22%, transparent)) right 72px bottom 0 / 64px 72px no-repeat,
  linear-gradient(color-mix(in srgb, var(--r-accent) 18%, transparent), color-mix(in srgb, var(--r-accent) 18%, transparent)) right 144px bottom 0 / 64px 108px no-repeat,
  linear-gradient(color-mix(in srgb, var(--r-accent) 14%, transparent), color-mix(in srgb, var(--r-accent) 14%, transparent)) right 216px bottom 0 / 64px 144px no-repeat; }
.motif-rings::before { background:
  radial-gradient(circle at 97% 26%, transparent 0 2.4rem, color-mix(in srgb, var(--r-accent) 34%, transparent) 2.4rem 2.5rem,
    transparent 2.5rem 4.4rem, color-mix(in srgb, var(--r-accent) 26%, transparent) 4.4rem 4.5rem,
    transparent 4.5rem 6.6rem, color-mix(in srgb, var(--r-accent) 18%, transparent) 6.6rem 6.7rem, transparent 6.7rem); }
.motif-ten::before { background:
  radial-gradient(circle, color-mix(in srgb, var(--r-accent) 38%, transparent) 0 6px, transparent 7px) 0 0 / 40px 40px repeat-x;
  inset: auto 0 12px auto; width: 400px; height: 40px; }

@media (min-width: 40rem) {
  .stage .strip { padding: 4px 32px 26px; scroll-padding-inline: 32px; }
  .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rows > div { grid-template-columns: 13rem minmax(0, 1fr); gap: 24px; }
  .helplines { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}
@media (min-width: 60rem) {
  .hero-sec { padding-top: 64px; }
  .hero2 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 56px; }
  .look-quiet .hero2 { grid-template-columns: 1fr; justify-items: center; gap: 22px; }
  body.app-page h1 { font-size: clamp(3.4rem, 6vw, 5.2rem); }
  .look-cinema h1 { font-size: clamp(3.6rem, 7vw, 6.4rem); }
  .hero2-side .chips { margin-top: 16px; }
  .stage { padding: 40px 0 28px; }
  .stage .strip:not(.land) {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; overflow: visible;
    padding: 0 48px 8px; align-items: start;
  }
  .stage .strip:not(.land) img { width: 100%; height: auto; max-width: 340px; margin: 0 auto; }
  .stage .strip:not(.land) figure { text-align: center; }
  .stage .strip:not(.land) figcaption { margin-left: auto; margin-right: auto; }
  .look-garden .stage .strip:not(.land) li:nth-child(2) { margin-top: 40px; }
  .stage .strip.land { grid-template-columns: 1fr 1fr; gap: 18px; padding: 0; }
  .stage .strip.land li:first-child { grid-column: 1 / -1; }
  .look-cinema .stage { padding: 20px; }
  .why > .wrap { padding-top: 64px; padding-bottom: 40px; }
  .about { columns: 2; column-gap: 56px; max-width: 64rem; }
  .about p { break-inside: avoid; }
  .box-card { padding: 36px 40px 32px; }
  .more > .wrap { padding-top: 56px; padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { transition: none !important; animation: none !important; }
}

/* ===== round 2 (UX review): ornaments stay inside the content width and never sit under text ===== */
.quiet-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0; }
.chip { background: var(--r-bg); }
.chip--note { background: var(--r-text); }

.motif-steps::before, .motif-rings::before { inset: 0 max(16px, calc(50% - 36rem + 32px)); }
.motif-ten::before {
  inset: 30px max(16px, calc(50% - 36rem + 16px)) auto auto; width: min(400px, 36%); height: 40px;
}
@media (max-width: 39.99rem) {
  .motif-steps::before, .motif-rings::before, .motif-ten::before { display: none; }
}

/* quiet (health) hero: one centred axis for icon, title, tagline, availability and chips */
.look-quiet .hero2 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.look-quiet .hero2-main { width: 100%; max-width: 60rem; text-align: center; }
.look-quiet .hero2-side { width: 100%; max-width: 40rem; text-align: center; }
.look-quiet .hero2-id { align-items: center; justify-content: center; }
body.app-page.look-quiet .tag { max-width: 34ch; margin-inline: auto; text-wrap: balance; }
.look-quiet .avail { margin-inline: auto; }
.look-quiet .chips { justify-content: center; }

/* screens: the first one is always whole, only the next one peeks */
.stage .strip:not(.land) img { height: auto; width: auto; max-height: min(62svh, 520px); max-width: calc(100vw - 116px); }

/* on-page nav: 48px targets, fade on the clipped edge so no word is cut mid-letter */
.subnav a { min-height: 48px; }
.subnav ul { padding-right: 28px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
html:has(.app-page) { scroll-padding-top: 120px; }

/* Lantern Cave icon: a lit rim so the dark tile separates from the dark room */
.room--lantern-cave .hero-icon .icon { box-shadow: 0 0 0 2px color-mix(in srgb, var(--r-accent) 75%, transparent), 0 0 28px -4px color-mix(in srgb, var(--r-accent) 35%, transparent); }

@media (min-width: 60rem) {
  .stage .strip:not(.land) img { max-height: none; max-width: 340px; }
  .look-quiet .hero2 { display: flex; }
}
@media (max-width: 39.99rem) { .subnav li:last-child { display: none; } .subnav ul { padding-right: 0; -webkit-mask-image: none; mask-image: none; } }

/* ===== Q771: type, phone fold, motion, toy, clip slot ===== */
body { font-size: 1.125rem; }
body.app-page .tag { font-size: 1.3rem; }
.about p:first-child { font-size: 1.4rem; }
body.app-page .ben p { font-size: 1.05rem; }
.index h1 { font-size: clamp(3rem, 12vw, 4.4rem); }

/* phone: heading stays big, the rest of the hero tightens so the first screen starts above the fold */
@media (max-width: 39.99rem) {
  body.app-page h1 { font-size: clamp(2.6rem, 12.5vw, 4.4rem); margin-bottom: 8px; }
  .look-cinema h1 { font-size: clamp(3rem, 16vw, 5.4rem); }
  .hero-sec, .look-cinema .hero-sec { padding-top: 18px; padding-bottom: 4px; }
  .hero2 { gap: 14px; }
  .hero2 > *, .hero2-main, .hero2-side { min-width: 0; }
  .hero2-id { margin-bottom: 8px; gap: 12px; }
  .hero2-id .icon.big { width: 60px; height: 60px; border-radius: 15px; }
  body.app-page .tag { max-width: none; font-size: 1.2rem; line-height: 1.4; }
  .avail { min-height: 0; padding: 10px 16px; gap: 12px; }
  .avail-big { font-size: 1.1rem; }
  .avail-small { font-size: 0.85rem; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 10px; padding-bottom: 2px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; white-space: nowrap; }
  .look-quiet .chips { justify-content: flex-start; }
  .screens { padding-top: 12px; }
  .stage { padding-top: 14px; }
  .stage .strip { padding-top: 0; }
  .stage .strip img { height: min(62svh, 520px); }
}

/* clip slot: poster until played, controls always shown, nothing loads before a tap */
.clip { margin: 18px 20px 4px; }
.clip video { display: block; width: 100%; max-height: 70svh; border-radius: var(--r-radius); background: #000; box-shadow: 0 0 0 1px var(--r-edge); }
.clip figcaption { max-width: none; }
@media (min-width: 60rem) { .clip { margin: 28px 48px 8px; } }

/* try one sum (Times Tables): CSS only, radio inputs and sibling selectors */
.try > .wrap { padding-top: 12px; padding-bottom: 20px; }
.try-card {
  display: grid; gap: 22px; padding: 26px 20px; background: var(--r-stage);
  border: 1px solid var(--r-edge); border-radius: calc(var(--r-radius) + 10px);
}
.try-head p { margin: 0; max-width: 34rem; color: var(--r-muted); }
.try-head h2 { margin-bottom: 10px; }
.sum { position: relative; border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: start; }
.sum legend { display: block; width: 100%; padding: 0; margin-bottom: 12px; font: 600 clamp(3rem, 15vw, 4.6rem)/1 var(--display); }
.sum input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sum label {
  display: grid; place-items: center; min-height: 72px; border-radius: 18px; cursor: pointer;
  border: 2px solid var(--r-edge); background: var(--r-bg); font: 600 1.9rem/1 var(--display);
  transition: background-color 0.25s, color 0.25s;
}
.sum label:hover { border-color: var(--r-text); }
.sum input:focus-visible + label { outline: 3px solid var(--r-text); outline-offset: 3px; }
.sum input:checked + label { border-color: var(--r-text); box-shadow: inset 0 0 0 2px var(--r-text); }
#o3:checked + label { background: var(--r-accent); color: var(--r-on); border-color: var(--r-accent); box-shadow: none; }
.fb { grid-column: 1 / -1; margin: 6px 0 0; min-height: 4.5em; font-size: 1.1rem; line-height: 1.45; max-width: 36rem; }
.fb-ok, .fb-no { display: none; }
#o1:checked ~ .fb-0, #o2:checked ~ .fb-0, #o3:checked ~ .fb-0 { display: none; }
#o1:checked ~ .fb-no, #o2:checked ~ .fb-no, #o3:checked ~ .fb-ok { display: block; }
.tower {
  grid-column: 1 / -1; justify-self: start; display: grid; grid-template-columns: repeat(4, 22px); gap: 9px; padding: 22px 16px 14px;
  background: color-mix(in srgb, var(--r-bg) 70%, #000); border-radius: 8px 8px 4px 4px; position: relative; margin-top: 14px;
}
.tower::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--r-bg) 70%, #000) 0 22%, transparent 22% 39%, color-mix(in srgb, var(--r-bg) 70%, #000) 39% 61%, transparent 61% 78%, color-mix(in srgb, var(--r-bg) 70%, #000) 78%);
}
.win { height: 28px; border-radius: 11px 11px 2px 2px; background: color-mix(in srgb, var(--r-text) 14%, transparent); transition: background-color 0.6s, box-shadow 0.6s; }
#o3:checked ~ .tower .win-t { background: var(--r-accent); box-shadow: 0 0 18px 2px color-mix(in srgb, var(--r-accent) 70%, transparent); }
@media (min-width: 60rem) {
  .try-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; padding: 44px 48px; align-items: center; }
  .sum { grid-template-columns: repeat(3, 120px); }
  .sum label { min-height: 84px; }
}

/* motion: only for visitors who have not asked for less. Nothing is hidden when animation is unsupported or off. */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lift { from { opacity: 0; transform: translateY(44px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes star-drift {
  to { background-position: -320px 0, -640px 0, -320px 0, -640px 0, -320px 0, 0 0; }
}
@keyframes dot-drift { to { background-position: 44px 44px, 66px 66px; } }
@keyframes win-wave { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes sun-bob { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
@keyframes ember-breathe { from { opacity: 0.72; transform: scale(1); } to { opacity: 1; transform: scale(1.04); } }
@keyframes ring-breathe { from { transform: scale(0.97); } to { transform: scale(1.05); } }
@keyframes steps-up {
  0% { background-size: 64px 0, 64px 0, 64px 0, 64px 0; }
  20% { background-size: 64px 36px, 64px 0, 64px 0, 64px 0; }
  40% { background-size: 64px 36px, 64px 72px, 64px 0, 64px 0; }
  60% { background-size: 64px 36px, 64px 72px, 64px 108px, 64px 0; }
  80%, 100% { background-size: 64px 36px, 64px 72px, 64px 108px, 64px 144px; }
}
@keyframes ten-count { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

@media (prefers-reduced-motion: no-preference) {
  /* entrance 1: the hero text and availability rise in, one after the other */
  .hero2-main > *, .hero2-side > * { animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--n, 0) * 90ms + 60ms); }
  .hero2-main > :nth-child(2) { --n: 1; } .hero2-main > :nth-child(3) { --n: 2; }
  .hero2-side > :nth-child(1) { --n: 3; } .hero2-side > :nth-child(2) { --n: 4; }

  /* per-app theme motion, slow and decorative, never flashing */
  .motif-stars::before { animation: star-drift 140s linear infinite; }
  .motif-dots::before { animation: dot-drift 90s linear infinite; }
  .motif-bricks::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 5px 7px at 40px 23px, var(--r-accent) 96%, transparent) 0 0 / 80px 68px,
      radial-gradient(ellipse 5px 7px at 40px 17px, var(--r-accent) 96%, transparent) 40px 34px / 80px 68px;
    -webkit-mask-image: linear-gradient(115deg, transparent 38%, rgb(0 0 0 / 0.9) 50%, transparent 62%);
    mask-image: linear-gradient(115deg, transparent 38%, rgb(0 0 0 / 0.9) 50%, transparent 62%);
    -webkit-mask-size: 320% 100%; mask-size: 320% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    animation: win-wave 14s ease-in-out infinite alternate;
  }
  .motif-sun::before { inset: -16px 0; animation: sun-bob 10s ease-in-out infinite alternate; }
  .motif-ember::before { animation: ember-breathe 6s ease-in-out infinite alternate; transform-origin: 12% 100%; }
  .motif-steps::before { animation: steps-up 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both; }
  .motif-rings::before { animation: ring-breathe 9s ease-in-out infinite alternate; transform-origin: 97% 26%; }
  .motif-ten::before { animation: ten-count 3s steps(10, end) 0.4s both; }
}

/* entrance 2: screens lift in as they scroll into view (desktop grid and landscape strips; the phone strip keeps its settle) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stage .strip.land img { animation: lift linear both; animation-timeline: view(block); animation-range: entry 0% entry 70%; }
    @media (min-width: 60rem) {
      .stage .strip:not(.land) img { animation: lift linear both; animation-timeline: view(block); animation-range: entry 0% entry 70%; }
      .stage .strip:not(.land) li:nth-child(2) img { animation-range: entry 10% entry 80%; }
      .stage .strip:not(.land) li:nth-child(3) img { animation-range: entry 20% entry 90%; }
    }
  }
}