/* ScreenEarned website styles. Tokens from design/website_en.md §6 (tokens.md v0.3.1). */

/* Fonts: self-hosted, SIL Open Font License 1.1.
   Licence texts: assets/fonts/OFL-Bricolage.txt and assets/fonts/OFL-Atkinson.txt (see licenses.html). */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-800.woff2") format("woff2"); font-weight: 700 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --earn:#0B7F62; --on-earn:#FFFFFF; --earn-soft:#D5F2E8; --on-earn-soft:#04382B;
  --coin:#C98A00; --coin-ink:#8C6100; --coin-soft:#FFF1CC; --on-coin-soft:#3D2A00; --coin-rim:#8C6100;
  --lock:#B4353B; --lock-soft:#FBE7E8; --on-lock-soft:#5C1216;
  --learn:#3A4FC4; --learn-soft:#E3E7FF; --on-learn-soft:#16205E;
  --night:#2A3570; --on-night:#FFFFFF;
  --bg:#F5F6FA; --surface:#FFFFFF; --surface-high:#ECEEF4;
  --ink:#1A2130; --muted:#586174; --line:#DCE0E9; --outline:#737C8F;
  /* Kid colours (tokens.md §1.4) */
  --kid-green:#0B7F62; --kid-blue:#2F5BD3; --kid-purple:#7A3FC4; --kid-pink:#C23A7A;
  --display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s12:48px; --s16:64px;
  --gutter:16px; --section-pad:64px; --card-gap:12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --earn:#4CC9A2; --on-earn:#00382A; --earn-soft:#0F3D31; --on-earn-soft:#BDF0DE;
    --coin:#F2B632; --coin-ink:#F2B632; --coin-soft:#3A2E10; --on-coin-soft:#FFE1A0; --coin-rim:#B07F10;
    --lock:#F07B80; --lock-soft:#4A1D21; --on-lock-soft:#FFD9DA;
    --learn:#9DB0FF; --learn-soft:#1F2A5C; --on-learn-soft:#DDE3FF;
    --night:#1B2250; --on-night:#E7EAF1;
    --bg:#11151D; --surface:#1A202B; --surface-high:#232A36;
    --ink:#E7EAF1; --muted:#9AA3B5; --line:#2C3443; --outline:#6B7488;
    --kid-green:#4CC9A2; --kid-blue:#8FA8FF; --kid-purple:#C3A2F5; --kid-pink:#F59BC6;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --earn:#4CC9A2; --on-earn:#00382A; --earn-soft:#0F3D31; --on-earn-soft:#BDF0DE;
  --coin:#F2B632; --coin-ink:#F2B632; --coin-soft:#3A2E10; --on-coin-soft:#FFE1A0; --coin-rim:#B07F10;
  --lock:#F07B80; --lock-soft:#4A1D21; --on-lock-soft:#FFD9DA;
  --learn:#9DB0FF; --learn-soft:#1F2A5C; --on-learn-soft:#DDE3FF;
  --night:#1B2250; --on-night:#E7EAF1;
  --bg:#11151D; --surface:#1A202B; --surface-high:#232A36;
  --ink:#E7EAF1; --muted:#9AA3B5; --line:#2C3443; --outline:#6B7488;
  --kid-green:#4CC9A2; --kid-blue:#8FA8FF; --kid-purple:#C3A2F5; --kid-pink:#F59BC6;
}
@media (min-width: 600px) { :root { --gutter:24px; } }
@media (min-width: 960px) { :root { --gutter:32px; --section-pad:96px; --card-gap:16px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--body); line-height: 27px; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-weight: 800; font-size: 36px; line-height: 40px; letter-spacing: -0.01em; }
h2 { font-weight: 800; font-size: 28px; line-height: 34px; letter-spacing: -0.005em; }
h3 { font-weight: 600; font-size: 20px; line-height: 26px; }
@media (min-width: 960px) {
  h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1.05; }
  h2 { font-size: 36px; line-height: 42px; }
  h3 { font-size: 22px; line-height: 28px; }
}
p { margin: 0; max-width: 65ch; }
a { color: var(--learn); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--earn); outline-offset: 2px; border-radius: 4px; }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 14px; line-height: 20px; color: var(--muted); }
.lead { font-size: 19px; line-height: 30px; }
@media (min-width: 960px) { .lead { font-size: 21px; line-height: 32px; } }
.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; }
.icon { width: 24px; height: 24px; flex: none; fill: currentColor; }
.tbd { background: var(--coin-soft); color: var(--on-coin-soft); padding: 0 4px; border-radius: 4px; font-size: .9em; }

.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 100; background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: var(--r-sm); }
.skip-link:focus { top: 10px; }

.container { width: 100%; max-width: calc(1120px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad); }
.section--bg { background: var(--bg); }
.section--surface { background: var(--surface); }
.section > .container > h2 + * { margin-top: var(--s6); }
.section-intro { margin-top: var(--s4); }

/* ---------- Buttons, chips, cards ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 56px; padding: 14px 24px; border-radius: var(--r-md); font: 700 17px/24px var(--body); text-align: center; text-decoration: none; cursor: pointer; border: 0; position: relative; }
.btn-primary { background: var(--earn); color: var(--on-earn); }
.btn-primary:hover { background: color-mix(in srgb, var(--earn) 92%, #000); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--earn); border: 1.5px solid var(--outline); }
.btn-small { min-height: 44px; padding: 10px 16px; border-radius: var(--r-sm); }

.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 14px; border-radius: var(--r-full); font-size: 15px; line-height: 20px; font-weight: 700; }
.chip .icon { width: 20px; height: 20px; }
.chip--coin { background: var(--coin-soft); color: var(--on-coin-soft); }
.chip--earn { background: var(--earn-soft); color: var(--on-earn-soft); }
.chip--learn { background: var(--learn-soft); color: var(--on-learn-soft); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 24px; }
.section--surface .card { background: var(--bg); }
.card h3 + p { margin-top: var(--s2); }
.grid { display: grid; gap: var(--card-gap); grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; height: 64px; background: color-mix(in srgb, var(--bg) 85%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header .container { display: flex; align-items: center; gap: var(--s3); height: 100%; }
.logo { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink); text-decoration: none; min-height: 44px; margin-right: auto; }
.logo svg { width: 28px; height: 28px; }
.wordmark { font: 800 20px/1 var(--display); letter-spacing: -0.01em; white-space: nowrap; }
.label-long { display: none; }
@media (min-width: 600px) { .label-long { display: inline; } .label-short { display: none; } }
.lang-switch { display: flex; align-items: center; font-size: 15px; font-weight: 700; }
.lang-switch a, .lang-switch span[aria-current] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; }
.lang-switch a { color: var(--muted); text-decoration: none; }
.lang-switch a:hover { color: var(--ink); text-decoration: underline; }
.lang-switch [aria-current] { color: var(--ink); }
.lang-switch .sep { color: var(--muted); }
.site-header .lang-switch { display: none; }
@media (min-width: 960px) { .site-header .lang-switch { display: flex; } }

/* ---------- Hero ---------- */
.hero { padding-block: 40px var(--section-pad); }
.hero-grid { display: grid; gap: var(--s12); }
.hero-text h1 { margin-top: var(--s4); }
.hero-text .lead { margin-top: var(--s4); }
.hero-text .positioning { margin-top: var(--s3); }
.hero-text .soon { margin-top: var(--s6); }
.hero-text .micro { margin-top: var(--s3); }
@media (min-width: 960px) {
  .hero { padding-top: 72px; }
  .hero-grid { grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
  .hero-text { grid-column: 1 / span 7; }
  .hero-visual { grid-column: 8 / span 5; }
}

/* Phone mockup (HTML/CSS, not a screenshot) */
.hero-visual { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.phone { width: 100%; max-width: 280px; aspect-ratio: 9 / 18.5; border: 8px solid var(--ink); border-radius: 36px; background: var(--night); color: var(--on-night); overflow: hidden; position: relative; box-shadow: 0 20px 40px -20px rgb(26 33 48 / .45); }
@media (min-width: 960px) { .phone { max-width: 320px; } }
.phone::before { content: ""; position: absolute; top: 10px; left: 50%; width: 64px; height: 6px; margin-left: -32px; border-radius: 3px; background: rgb(255 255 255 / .18); }
.lock { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 36px 18px 24px; text-align: center; }
.lock-app { position: relative; width: 56px; height: 56px; border-radius: 16px; background: rgb(255 255 255 / .9); opacity: .4; display: grid; place-items: center; color: #2A3570; }
.lock-app .icon { width: 30px; height: 30px; }
.lock-app-wrap { position: relative; }
.lock-badge { position: absolute; right: -8px; bottom: -8px; width: 28px; height: 28px; border-radius: 50%; background: var(--coin-soft); color: var(--on-coin-soft); display: grid; place-items: center; border: 2px solid var(--night); }
.lock-badge .icon { width: 16px; height: 16px; }
.lock-title { font: 800 21px/26px var(--display); color: var(--on-night); max-width: none; }
.lock .bo { width: 44%; max-width: 132px; }
.coin-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 16px 4px 6px; border-radius: var(--r-full); background: var(--coin-soft); color: var(--on-coin-soft); font: 800 18px/1 var(--display); font-variant-numeric: tabular-nums; }
.coin-pill svg { width: 26px; height: 26px; }
.lock-btn { display: block; width: 100%; margin-top: 4px; padding: 12px 10px; border-radius: var(--r-md); background: #4CC9A2; color: #00382A; font: 700 15px/20px var(--body); }
.loop-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 10px 24px -12px rgb(26 33 48 / .35); max-width: 320px; }
.loop-card li { display: flex; align-items: center; gap: 6px; }
.loop-card li + li::before { content: "→"; color: var(--muted); font-weight: 700; }
.loop-card .chip { font-size: 14px; padding: 4px 10px; }
@media (min-width: 1180px) {
  .loop-card { position: absolute; left: -124px; bottom: 24px; flex-direction: column; align-items: stretch; max-width: 170px; }
  /* The loop card hangs 124px into the text column: keep the hero copy at least 40px clear of it. */
  .hero-text .lead, .hero-text .positioning { max-width: calc(100% - 140px); }
  .loop-card li { flex-direction: column; align-items: flex-start; }
  .loop-card li + li::before { content: "↓"; padding-left: 12px; }
}

/* Buddy SVG recolouring: body parts carry class kb (fill) / kbs (stroke) */
.bo .kb { fill: var(--kid, var(--kid-green)); }
.bo .kbs { stroke: var(--kid, var(--kid-green)); }
.bo .sticker { stroke: var(--sticker, var(--bg)); }
.kid-green { --kid: var(--kid-green); }
.kid-blue { --kid: var(--kid-blue); }
.kid-purple { --kid: var(--kid-purple); }
.kid-pink { --kid: var(--kid-pink); }
.lock .bo { --kid: #4CC9A2; }
@media (prefers-reduced-motion: no-preference) {
  .bo-blink .eye { transform-box: fill-box; transform-origin: center; animation: blink 4s infinite; }
}
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }

/* ---------- "Coming soon" badge (replaces the waitlist; later the Play Store badge) ---------- */
.soon-badge { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 22px 8px 18px; border-radius: var(--r-full); background: var(--ink); color: var(--bg); font: 800 18px/24px var(--display); }
.soon-badge .icon { width: 24px; height: 24px; }
.soon-badge--small { min-height: 40px; padding: 6px 14px 6px 12px; gap: 8px; font-size: 15px; line-height: 20px; }
.soon-badge--small .icon { width: 18px; height: 18px; }

/* ---------- How it works ---------- */
.step-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.step-num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--earn-soft); color: var(--on-earn-soft); font: 800 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.step-icon { width: 28px; height: 28px; }
.ic-earn { color: var(--earn); }
.ic-learn { color: var(--learn); }
/* Under the steps: mini app list with the three app states (apps_model.md §7.2 tokens) */
.app-states { margin-top: var(--card-gap); padding: var(--s2) var(--s5); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); }
.app-states ul { list-style: none; margin: 0; padding: 0; }
.app-states li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); min-height: 56px; }
.app-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.app-ico .icon { width: 20px; height: 20px; }
/* The name never overflows into the chip: below its word width the chip wraps to its own line. */
.app-name { flex: 1 1 0; min-width: min-content; font-weight: 700; font-size: 17px; line-height: 24px; }
.state { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: var(--s1); min-height: 36px; padding: 0 14px 0 10px; border-radius: var(--r-full); font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.state svg { flex: none; width: 16px; height: 16px; }
.state--screen svg { width: 18px; height: 18px; }
.state--blocked { box-shadow: inset 0 0 0 1px var(--outline); color: var(--ink); }
.state--screen { background: var(--coin-soft); color: var(--on-coin-soft); }
.state--always { background: var(--earn-soft); color: var(--on-earn-soft); }
@media (max-width: 359px) {
  .app-states { padding-inline: var(--s3); }
  .app-states li { column-gap: var(--s2); }
}
@media (min-width: 960px) {
  .app-states { padding: var(--s3) 0; }
  .app-states ul { display: grid; grid-template-columns: repeat(3, 1fr); }
  .app-states li { padding-inline: var(--s6); }
  .app-states li + li { border-left: 1px solid var(--line); }
}

/* ---------- Buddy ---------- */
.buddy-grid { display: grid; gap: var(--s8); }
.buddy-text p { margin-top: var(--s6); }
.buddy-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, calc((100% - 3 * var(--card-gap)) / 3.5)); gap: var(--card-gap); list-style: none; margin: 0; padding: 4px 2px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.buddy-row::-webkit-scrollbar { display: none; }
.buddy-row li { scroll-snap-align: start; }
.buddy-item { margin: 0; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 8px 14px; height: 100%; --sticker: var(--surface); }
.buddy-item .bo { width: 100%; max-width: 140px; margin-inline: auto; height: auto; }
.buddy-item figcaption { margin-top: 8px; font-weight: 700; font-size: 15px; line-height: 20px; }
@media (min-width: 600px) { .buddy-row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; } }
@media (min-width: 960px) {
  .buddy-grid { grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
  .buddy-text { grid-column: 1 / span 5; }
  .buddy-row { grid-column: 6 / span 7; grid-template-columns: repeat(2, 1fr); }
  .buddy-item { padding: 20px; }
  .buddy-item .bo { max-width: 160px; }
}

/* ---------- Lessons ---------- */
.lesson-card { display: flex; flex-direction: column; gap: var(--s2); }
.lesson-card .card-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.mini-lesson { margin-top: var(--s4); padding: 20px; border-radius: var(--r-lg); background: var(--learn-soft); color: var(--on-learn-soft); }
.mini-q { font: 800 32px/40px var(--display); font-variant-numeric: tabular-nums; text-align: center; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; list-style: none; padding: 0; }
.tile { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 56px; border-radius: var(--r-md); background: var(--surface); color: var(--ink); border: 1px solid var(--line); font: 800 24px/1 var(--display); font-variant-numeric: tabular-nums; }
.tile--right { background: var(--earn); color: var(--on-earn); border-color: var(--earn); }
.tile--right .icon { width: 22px; height: 22px; }
.lessons-note { margin-top: var(--s6); }

/* ---------- Rules ---------- */
.preset { position: relative; display: flex; flex-direction: column; gap: var(--s2); }
.preset--rec { border: 2px solid var(--earn); }
.preset .preset-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.preset-line .num { font-weight: 800; }
.checklist { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; gap: var(--s3); }
.checklist li { display: flex; gap: var(--s3); align-items: flex-start; }
.checklist .icon { color: var(--earn); margin-top: 2px; }
@media (min-width: 960px) { .checklist { grid-template-columns: repeat(2, 1fr); column-gap: 24px; } }

/* ---------- Privacy cards ---------- */
.privacy-card .icon { width: 32px; height: 32px; color: var(--earn); margin-bottom: var(--s3); }
.more-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: var(--s6); font-weight: 700; }
.more-link .icon { width: 20px; height: 20px; }

/* ---------- Limits ---------- */
.narrow { max-width: 68ch; margin-inline: auto; }
.limits-list { margin: var(--s6) 0 0; padding-left: 1.2em; display: grid; gap: var(--s2); }
.limits-list li::marker { color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin-inline: auto; }
.faq-list { margin-top: var(--s6); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 56px; padding: 14px 0; cursor: pointer; list-style: none; font: 600 19px/26px var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--earn-soft); color: var(--on-earn-soft); font: 700 22px/1 var(--body); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 var(--s5); }


/* ---------- Footer ---------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding-block: 40px; font-size: 14px; line-height: 20px; color: var(--muted); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: var(--s4); text-align: center; }
.footer-brand { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.footer-brand .logo { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; list-style: none; margin: 0; padding: 0; }
.footer-links a, .footer-links .as-text { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--muted); }
.footer-links a:hover { color: var(--ink); }
.site-footer .lang-switch { font-size: 14px; }
@media (min-width: 960px) {
  .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; }
  .footer-brand { flex-direction: row; gap: var(--s4); }
}

/* ---------- Text pages (privacy, help, licenses, confirmed) ---------- */
.page { padding-block: 48px var(--section-pad); }
.prose { max-width: 68ch; margin-inline: auto; }
.prose h1 + * { margin-top: var(--s3); }
.prose h2 { margin-top: var(--s12); font-size: 26px; line-height: 32px; }
.prose h3 { margin-top: var(--s6); }
.prose p, .prose ul, .prose ol, .prose dl, .prose details, .prose pre { margin-top: var(--s3); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 6px; }
.prose dl { display: grid; gap: var(--s2) var(--s4); }
.prose dt { font-weight: 700; }
.prose dd { margin: 0 0 var(--s2); }
@media (min-width: 600px) { .prose dl { grid-template-columns: 11em 1fr; } .prose dd { margin: 0; } }
.toc { margin-top: var(--s6); padding: 16px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.toc h2 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 800; }
.toc ol { margin: var(--s2) 0 0; }
.toc a { display: inline-block; padding: 4px 0; min-height: 32px; }
.prose details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.prose details summary { min-height: 56px; display: flex; align-items: center; gap: var(--s3); padding: 12px 16px; cursor: pointer; font-weight: 700; list-style: none; }
.prose details summary::-webkit-details-marker { display: none; }
.prose details summary::before { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--earn-soft); color: var(--on-earn-soft); font-weight: 700; }
.prose details[open] summary::before { content: "−"; }
.prose details > ol, .prose details > p { margin: 0; padding: 0 16px 16px 48px; }
.prose details > p { padding-left: 16px; }
.prose pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 19px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; max-height: 420px; overflow: auto; }
.confirmed { text-align: center; }
.confirmed .bo { width: 180px; height: auto; margin: var(--s8) auto 0; --sticker: var(--bg); }
.confirmed p { margin-inline: auto; margin-top: var(--s4); }
.confirmed .btn { margin-top: var(--s8); }
.plain-list { list-style: none; padding: 0; margin-bottom: 0; }
.presets { margin-top: var(--s6); }
.limits-text { margin-top: var(--s6); }

/* ---------- Learning plan line + pricing (27-09) ---------- */
.lessons-plan { display: flex; gap: var(--s3); align-items: flex-start; margin-top: var(--s6); max-width: 68ch; }
.lessons-plan .icon { width: 24px; height: 24px; flex: none; color: var(--learn); }
.mini-q--words { font-size: 22px; line-height: 30px; }
.price-card .price-list + p { margin-top: var(--s3); }
.price-list { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); }
.price-list li { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.price-list .icon { width: 20px; height: 20px; color: var(--earn); flex: none; }