/* Softfill website.
   Tokens: ../softfill/design_handoff_softfill/spec/design-tokens.md.
   Layout and sizes: design_handoff_softfill_web/README.md. */

/* ---- Fonts: Nunito (SIL OFL 1.1, ../fonts/OFL.txt) stands in where the system has no rounded face. ---- */
@font-face { font-family: Nunito; font-style: normal; font-weight: 400 900; 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; }
@font-face { font-family: Nunito; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/nunito-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Nunito; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/nunito-cyrillic.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Nunito; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/nunito-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }

/* ---- Tokens ---- */
:root {
  color-scheme: light dark;
  --bg: #FBFAF7;
  --surface: #FFFFFF;
  --surface-2: #F5F3F0;
  --stage: #F0EEEA;
  --line: #E3E1DD;
  --ink: #1C1F25;
  --ink-2: #5A5E65;
  --ink-3: #9A9DA3;
  --on-ink: #FBFAF7;
  --on-ink-2: #C9C7C1;
  --ink-raised: #2E323A;
  --header-bg: rgba(251, 250, 247, .86);
  --ring: rgba(28, 31, 37, .1);
  --paper: #FFFFFF;
  --little-fill: #DF9B44; --little-tint: #FFEBD2; --little-deep: #7E4600;
  --easy-fill: #69C27E; --easy-tint: #DCF7E1; --easy-deep: #0B5D2A;
  --detailed-fill: #47B7F1; --detailed-tint: #D6F4FF; --detailed-deep: #005D8D;
  --intricate-fill: #BE95EC; --intricate-tint: #F5E8FF; --intricate-deep: #663E8E;
  --success-tint: #DCF7E1; --success-deep: #0B5D2A;
  --focus: #47B7F1;
  --device-ring: rgba(0, 0, 0, .08);
  --shadow-float: 0 1px 2px rgba(28, 31, 37, .06), 0 6px 18px rgba(28, 31, 37, .07);
  --shadow-sheet: 0 2px 6px rgba(28, 31, 37, .08), 0 20px 48px rgba(28, 31, 37, .16);
  --shadow-device: 0 40px 80px -24px rgba(28, 31, 37, .4);
  --r-chip: 10px; --r-button: 14px; --r-card: 20px; --r-card-lg: 28px; --r-panel: 40px; --r-pill: 999px;
  --side: clamp(20px, 4vw, 40px);
  --section: clamp(56px, 8vw, 112px);
  --section-gap: clamp(32px, 4vw, 56px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101215;
    --surface: #191C20;
    --surface-2: #24272B;
    --stage: #0B0D10;
    --line: #32363B;
    --ink: #F3F2EF;
    --ink-2: #B0AEA8;
    --ink-3: #6B6F76;
    --on-ink: #101215;
    --on-ink-2: #4A4E55;
    --ink-raised: #DAD8D3;
    --header-bg: rgba(16, 18, 21, .86);
    --ring: rgba(255, 255, 255, .1);
    --little-fill: #ECA851; --little-tint: #3E290F; --little-deep: #EABA83;
    --easy-fill: #76CF8A; --easy-tint: #1A3520; --easy-deep: #9AD5A5;
    --detailed-fill: #55C4FE; --detailed-tint: #103243; --detailed-deep: #89CEF6;
    --intricate-fill: #CBA1FA; --intricate-tint: #342742; --intricate-deep: #D1B6F3;
    --success-tint: #193B22; --success-deep: #95D7A2;
    --device-ring: #32363B;
    /* Dark mode drops drop shadows and relies on the surface steps. */
    --shadow-float: 0 0 0 0 transparent;
    --shadow-sheet: 0 0 0 0 transparent;
    --shadow-device: 0 0 0 0 transparent;
  }
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", Nunito, system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video, picture { display: block; max-width: 100%; }
picture img { width: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding-left: 1.3em; }
.icon { width: 24px; height: 24px; flex-shrink: 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--side); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 50;
  padding: 12px 16px; border-radius: var(--r-button);
  background: var(--ink); color: var(--on-ink); font-weight: 800;
}
.skip-link:focus { top: 16px; }

.app-icon { border-radius: 23%; box-shadow: 0 0 0 1px var(--ring); background: #FBFAF7; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 24px; border-radius: var(--r-button);
  background: var(--ink); color: var(--on-ink);
  font-size: 16px; font-weight: 800; text-decoration: none;
  transition: transform .15s ease;
}
.button:hover { text-decoration: none; }
.button:active { transform: scale(.98); }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.header-inner { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand:hover { text-decoration: none; }
.brand-icon { width: 34px; height: 34px; }
.brand-wordmark { height: 22px; width: auto; }
.header-actions { display: flex; align-items: center; gap: 8px; }

/* Language menu: a <details>, so it works without JavaScript. */
.lang { position: relative; }
.lang-summary {
  list-style: none; height: 40px; padding: 0 8px 0 10px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink);
  display: flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 800; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.lang-summary::-webkit-details-marker { display: none; }
.lang-summary::marker { content: ""; }
.lang-summary .icon { width: 19px; height: 19px; }
.lang[open] .lang-summary .icon:last-child { transform: rotate(180deg); }
.lang-menu {
  position: absolute; right: 0; top: 48px; z-index: 40; width: 208px;
  background: var(--surface); border-radius: var(--r-card); padding: 6px;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sheet);
  display: flex; flex-direction: column; gap: 2px;
}
.lang-row {
  height: 44px; padding: 0 10px 0 14px; border-radius: var(--r-button);
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.lang-row:hover { background: var(--surface-2); text-decoration: none; }
.lang-row.is-current { font-weight: 800; background: var(--surface-2); }
.lang-row-name { flex: 1; }
.lang-row-code { font-size: 12px; font-weight: 800; color: var(--ink-2); }
.lang-row-check { width: 20px; height: 20px; display: grid; place-items: center; }
.lang-row-check .icon { width: 20px; height: 20px; }

/* "Coming soon to the App Store", until the app is live. */
.soon-pill {
  height: 40px; padding: 0 14px; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex; align-items: center; font-size: 14px; font-weight: 800; white-space: nowrap;
}
.soon-pill .soon-short { display: none; }
@media (max-width: 559.98px) {
  .soon-pill .soon-long { display: none; }
  .soon-pill .soon-short { display: inline; }
}
.soon-cta {
  height: 56px; padding: 0 20px 0 16px; border-radius: var(--r-button);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800;
}
.soon-cta .icon { width: 22px; height: 22px; color: var(--ink-2); }
.store-badge img { height: 56px; width: auto; }
.store-badge-small img { height: 40px; }

/* ---- Hero ---- */
.hero {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(36px, 6vw, 80px) var(--side) clamp(64px, 9vw, 120px);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(40px, 5vw, 72px);
}
.hero-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero-brand { display: flex; align-items: center; gap: 14px; }
.hero-brand .app-icon { width: 60px; height: 60px; box-shadow: 0 0 0 1px var(--ring), var(--shadow-float); }
.hero-brand-text { display: flex; flex-direction: column; gap: 2px; }
.hero-wordmark { height: 26px; width: auto; }
.hero-tagline { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.hero-text { display: flex; flex-direction: column; gap: 20px; }
.hero h1 { font-size: clamp(44px, 5.6vw, 80px); letter-spacing: -0.035em; line-height: 1; }
.hero h1:lang(de), .hero h1:lang(ru) { hyphens: auto; -webkit-hyphens: auto; }
.hero-lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 540px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.hero-note { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.hero-visual { flex: 1.45 1 520px; min-width: 0; display: flex; flex-direction: column; }
/* Pause for the looping hero video (WCAG 2.2.2); the script shows it once the video plays. */
.motion-toggle {
  align-self: flex-end; margin-top: 14px; height: 36px; padding: 0 14px 0 10px; border: 0; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle > span { display: inline-flex; align-items: center; gap: 6px; }
.motion-toggle .icon { width: 18px; height: 18px; }
.motion-toggle .motion-play, .motion-toggle.is-paused .motion-pause { display: none; }
.motion-toggle.is-paused .motion-play { display: inline-flex; }

/* The iPad in the hero: the app's Canvas drawn in HTML, sized in container units like the mock, with the
   drawing as a poster image and a looping video on top (the poster alone under reduced motion). */
.ipad {
  background: #0E0F11; border-radius: clamp(20px, 3vw, 40px); padding: clamp(8px, 1.2vw, 15px);
  box-shadow: 0 0 0 1px var(--device-ring), var(--shadow-device);
}
.ipad-screen {
  container-type: inline-size; position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: clamp(12px, 1.9vw, 26px); background: var(--stage); color: var(--ink);
}
.ipad-screen .icon { width: 1em; height: 1em; }
.cv-top {
  position: absolute; left: 2.4cqw; right: 2.4cqw; top: 2.2cqw; height: 6cqw;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1.6cqw;
}
.cv-round {
  width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--surface);
  display: grid; place-items: center; font-size: 3.2cqw; box-shadow: 0 1px 3px rgba(28, 31, 37, .08);
}
.cv-title { display: flex; flex-direction: column; gap: .7cqw; min-width: 0; }
.cv-name { font-size: 2.2cqw; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.cv-progress { display: flex; align-items: center; gap: 1.2cqw; }
.cv-track { width: 14cqw; height: .8cqw; border-radius: 1cqw; background: var(--line); overflow: hidden; }
.cv-bar { display: block; height: 100%; width: 80%; background: var(--ink); border-radius: 1cqw; }
.cv-count { font-size: 1.45cqw; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.cv-switch {
  display: flex; gap: .3cqw; padding: .4cqw; border-radius: 1.6cqw; background: var(--surface);
  box-shadow: 0 1px 3px rgba(28, 31, 37, .08);
}
.cv-seg {
  height: 4.4cqw; padding: 0 1.6cqw 0 1.2cqw; border-radius: 1.2cqw; color: var(--ink-2);
  display: flex; align-items: center; gap: .6cqw; font-size: 1.6cqw; font-weight: 800;
}
.cv-seg .icon { font-size: 2.3cqw; }
.cv-seg.is-on { background: var(--ink); color: var(--on-ink); }
.cv-rail {
  position: absolute; left: 2.4cqw; top: 17cqw; width: 7cqw; padding: .8cqw; border-radius: 2.2cqw;
  background: var(--surface); box-shadow: var(--shadow-float);
  display: flex; flex-direction: column; align-items: center; gap: .5cqw;
}
.cv-tool { width: 5.4cqw; height: 5.4cqw; border-radius: 1.6cqw; display: grid; place-items: center; font-size: 2.7cqw; }
.cv-tool.is-on { background: var(--ink); color: var(--on-ink); }
.cv-tool.is-off { color: var(--ink-3); }
.cv-rail .cv-rule { width: 4cqw; height: .15cqw; margin: .4cqw 0; background: var(--line); }
.cv-paper {
  position: absolute; left: 13cqw; top: 11.5cqw; width: 72cqw; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: 1.6cqw; background: var(--paper);
  box-shadow: 0 1px 3px rgba(28, 31, 37, .08), 0 8px 24px rgba(28, 31, 37, .08);
}
.cv-paper img, .cv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-video { background: transparent; }
.cv-dock {
  position: absolute; left: 49cqw; bottom: 2.6cqw; transform: translateX(-50%); width: max-content;
  padding: 1.2cqw 1.6cqw; border-radius: 2.6cqw; background: var(--surface); box-shadow: var(--shadow-float);
  display: flex; align-items: center; gap: 1.1cqw;
}
.cv-swatch {
  width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: var(--c); flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.cv-swatch.is-on { transform: scale(1.1); box-shadow: 0 0 0 .35cqw var(--surface), 0 0 0 .75cqw var(--ink); }
.cv-dock .cv-rule { width: .15cqw; height: 3.6cqw; background: var(--line); }
.cv-any {
  width: 4.6cqw; height: 4.6cqw; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: conic-gradient(#F4C95D, #EE8B6A, #CDB4DB, #47B7F1, #6A994E, #F4C95D);
}
.cv-any .icon {
  width: 2.6cqw; height: 2.6cqw; padding: .4cqw; border-radius: 50%; background: var(--surface); stroke-width: 3;
}
.cv-palette {
  display: flex; align-items: center; gap: .3cqw; padding-left: .6cqw;
  font-size: 1.5cqw; font-weight: 800; color: var(--ink-2); white-space: nowrap;
}
.cv-palette .icon { font-size: 2.2cqw; }
@media (prefers-reduced-motion: reduce) { .cv-video { display: none; } }

/* ---- Home sections ---- */
.section { padding: var(--section) var(--side); }
.section-surface { background: var(--surface); box-shadow: 0 -1px 0 var(--line), 0 1px 0 var(--line); }
.section-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--section-gap); }
.section-head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.section h2, .parents h2, .closing h2 { font-size: clamp(34px, 4.2vw, 56px); letter-spacing: -0.03em; line-height: 1.04; }
.section-lede { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 620px; }

/* How it works */
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.how-card {
  border-radius: var(--r-card-lg); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line);
  padding: 12px; display: flex; flex-direction: column; gap: 4px;
}
.how-art {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-card);
  background: var(--paper); box-shadow: 0 0 0 1px rgba(28, 31, 37, .06);
}
.how-art img, .how-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.how-text { padding: 16px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.how-text h3, .level-text h3 { font-size: 22px; letter-spacing: -0.015em; }
.how-text p { font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
/* Chips on drawing paper keep their light colors in dark mode: the paper is always white. */
.paper-chip {
  position: absolute; left: 12px; top: 12px; height: 32px; padding: 0 12px 0 8px; border-radius: var(--r-pill);
  background: #DCF7E1; color: #0B5D2A; display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 800; box-shadow: 0 1px 3px rgba(28, 31, 37, .1);
}
.paper-chip .icon { width: 18px; height: 18px; }
.tl-video { opacity: 0; }
.timelapse.is-playing .tl-video, .timelapse.has-played .tl-video { opacity: 1; }
.tl-play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border: 0; border-radius: 50%; background: #1C1F25; color: #FBFAF7; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 8px 24px rgba(28, 31, 37, .3);
  transition: transform .15s ease;
}
.tl-play[hidden] { display: none; }
.tl-play:active { transform: scale(.96); }
.tl-play .icon { width: 34px; height: 34px; margin-left: 3px; }
.tl-bar {
  position: absolute; left: 12px; right: 12px; bottom: 12px; height: 32px; padding: 0 12px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92); color: #1C1F25; display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 1px 3px rgba(28, 31, 37, .1);
}
.tl-track { flex: 1; height: 5px; border-radius: 3px; background: #E3E1DD; overflow: hidden; }
.tl-fill { display: block; height: 100%; width: 100%; background: #1C1F25; }

/* Levels: each card on its level's tint, name and copy in its deep color. */
.level-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 20px; }
.level-card { --tint: var(--little-tint); --fill: var(--little-fill); --deep: var(--little-deep);
  border-radius: var(--r-card-lg); background: var(--tint); padding: 12px; display: flex; flex-direction: column; }
.level-easy { --tint: var(--easy-tint); --fill: var(--easy-fill); --deep: var(--easy-deep); }
.level-detailed { --tint: var(--detailed-tint); --fill: var(--detailed-fill); --deep: var(--detailed-deep); }
.level-intricate { --tint: var(--intricate-tint); --fill: var(--intricate-fill); --deep: var(--intricate-deep); }
.level-art { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-card); background: var(--paper); }
.level-art img { width: 100%; height: 100%; object-fit: cover; }
/* A level without packs yet: an empty dotted page, not drawing paper, so it follows the color scheme. */
.level-art-soon {
  display: grid; place-items: center;
  background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--fill) 55%, transparent) 1.2px, transparent 1.6px) 0 0 / 14px 14px, var(--surface);
}
.level-soon {
  padding: 7px 12px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1.5px var(--fill), var(--shadow-float);
  font-size: 13px; font-weight: 800; text-align: center;
}
.level-text { padding: 18px 10px 10px; display: flex; flex-direction: column; gap: 6px; color: var(--deep); }
.level-text h3 { display: flex; align-items: center; gap: 8px; }
.level-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--fill); flex-shrink: 0; }
.level-text p { font-size: 16px; font-weight: 700; line-height: 1.45; text-wrap: balance; }

/* For parents */
.parents-section { padding: 0 var(--side); }
.parents {
  max-width: 1200px; margin: 0 auto; border-radius: clamp(28px, 4vw, 40px); background: var(--surface-2);
  padding: clamp(28px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(36px, 5vw, 64px);
}
.parents-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.parents-head { display: flex; flex-direction: column; gap: 16px; }
.parents-head .section-lede { max-width: 560px; }
.chip {
  align-self: flex-start; height: 30px; padding: 0 12px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; font-size: 13px; font-weight: 800;
}
.chip-little { background: var(--little-tint); color: var(--little-deep); }
.parents-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 24px 28px; }
.point { display: flex; flex-direction: column; gap: 10px; }
.point-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--surface); display: grid; place-items: center; }
.point-icon .icon { width: 22px; height: 22px; }
.point h3 { font-size: 18px; letter-spacing: -0.01em; }
.point p { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.gate-wrap { flex: 0 1 380px; min-width: 0; margin: 0 auto; }
.gate {
  background: var(--surface); border-radius: var(--r-card-lg); padding: 28px 24px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
  box-shadow: 0 2px 6px rgba(28, 31, 37, .06), 0 20px 48px rgba(28, 31, 37, .12);
}
.gate-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--little-tint); color: var(--little-deep); display: grid; place-items: center; }
.gate-icon .icon { width: 28px; height: 28px; }
.gate-heading { display: flex; flex-direction: column; gap: 4px; }
.gate-title { font-size: 24px; font-weight: 800; letter-spacing: -0.015em; }
.gate-subtitle { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.gate-prompt { font-size: 17px; font-weight: 600; line-height: 1.4; text-wrap: balance; }
.gate-prompt strong { font-weight: 900; }
.gate-digits { display: flex; gap: 10px; }
.gate-digits span {
  width: 52px; height: 60px; border-radius: var(--r-button); background: var(--surface-2);
  display: grid; place-items: center; font-size: 26px; font-weight: 800;
}
.gate-digits .is-active { box-shadow: inset 0 0 0 2px var(--ink); }
.gate-keys { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; }
.gate-keys span {
  height: 48px; border-radius: var(--r-button); box-shadow: inset 0 0 0 1px var(--line);
  display: grid; place-items: center; font-size: 20px; font-weight: 700;
}
.gate-keys .is-blank { box-shadow: none; }
.gate-keys .icon { width: 22px; height: 22px; }

/* Pricing */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.price-card {
  border-radius: var(--r-card-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  padding: 28px; display: flex; flex-direction: column; gap: 12px;
}
.price-card h3 { margin-top: 8px; font-size: 24px; letter-spacing: -0.015em; }
.price-card p { font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.price-icon { width: 44px; height: 44px; border-radius: var(--r-button); display: grid; place-items: center; }
.price-icon-easy { background: var(--easy-tint); color: var(--easy-deep); }
.price-icon-detailed { background: var(--detailed-tint); color: var(--detailed-deep); }
.price-icon-ink { background: var(--ink-raised); color: var(--on-ink); }
.price-icon-ink .icon { width: 26px; height: 26px; }
/* Unlimited is the ink card, so it inverts in dark mode like the app's purchase sheet. */
.price-card-ink { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.price-card-ink p { color: var(--on-ink-2); }
.price-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.price-tag {
  height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: #DCF7E1; color: #0B5D2A;
  display: flex; align-items: center; font-size: 13px; font-weight: 800; white-space: nowrap;
}
.fine-print { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 760px; }

/* iPad and iPhone */
.devices {
  max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(40px, 5vw, 72px);
}
.devices-copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.devices-copy .section-lede { max-width: 520px; }
.devices-visual { flex: 1.3 1 460px; min-width: 0; }
.devices-stage { position: relative; aspect-ratio: 16 / 11; }
.mini-ipad {
  position: absolute; left: 0; top: 0; width: 80%; background: #0E0F11;
  border-radius: clamp(16px, 2.4vw, 30px); padding: clamp(6px, 1vw, 12px);
  box-shadow: 0 0 0 1px var(--device-ring), 0 30px 60px -20px rgba(28, 31, 37, .35);
}
.mini-ipad-screen {
  container-type: inline-size; position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: clamp(10px, 1.5vw, 20px); background: var(--stage); color: var(--ink);
}
.mini-ipad-screen .icon, .mini-iphone-screen .icon { width: 1em; height: 1em; }
.mini-head { position: absolute; left: 3cqw; top: 3cqw; display: flex; align-items: center; gap: 2cqw; }
.mini-head .cv-round { width: 6.5cqw; height: 6.5cqw; font-size: 3.6cqw; }
.mini-name { font-size: 2.6cqw; font-weight: 800; white-space: nowrap; }
.mini-paper {
  position: absolute; left: 9cqw; right: 9cqw; top: 14cqw; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: 1.8cqw; background: var(--paper); box-shadow: 0 8px 24px rgba(28, 31, 37, .08);
}
.mini-paper img, .mini-phone-paper img { width: 100%; height: 100%; object-fit: cover; }
.mini-iphone { position: absolute; right: 0; bottom: 0; width: 27%; }
.mini-soon {
  position: absolute; left: 50%; top: -44px; transform: translateX(-50%); z-index: 2;
  height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink);
  display: flex; align-items: center; font-size: 13px; font-weight: 800; white-space: nowrap;
}
@media (max-width: 600px) {
  .mini-soon { left: auto; right: 0; transform: none; }
}
.mini-iphone-frame {
  background: #0E0F11; border-radius: clamp(18px, 2.6vw, 34px); padding: clamp(4px, .6vw, 8px);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--device-ring), 0 30px 60px -20px rgba(28, 31, 37, .4);
}
.mini-iphone-screen {
  container-type: inline-size; position: relative; aspect-ratio: 393 / 852; overflow: hidden;
  border-radius: clamp(14px, 2.1vw, 28px); background: var(--stage); color: var(--ink);
}
.mini-island { position: absolute; left: 50%; top: 3.2cqw; width: 30cqw; height: 8.6cqw; margin-left: -15cqw; border-radius: 6cqw; background: #000; }
.mini-phone-head { position: absolute; left: 5cqw; right: 5cqw; top: 18cqw; display: flex; align-items: center; gap: 3cqw; }
.mini-phone-head .cv-round { width: 11cqw; height: 11cqw; font-size: 6cqw; flex-shrink: 0; }
.mini-phone-head .mini-name { font-size: 5cqw; }
.mini-phone-paper {
  position: absolute; left: 3cqw; right: 3cqw; top: 72cqw; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: 3cqw; background: var(--paper); box-shadow: 0 4px 12px rgba(28, 31, 37, .08);
}
.mini-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 5cqw 5cqw 9cqw; border-radius: 8cqw 8cqw 0 0;
  background: var(--surface); display: flex; flex-direction: column; gap: 4cqw;
}
.mini-swatches { display: flex; justify-content: space-between; }
.mini-swatches span { width: 11cqw; height: 11cqw; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.mini-swatches .is-on { box-shadow: 0 0 0 .8cqw var(--surface), 0 0 0 1.6cqw var(--ink); }
.mini-bar { height: 10cqw; border-radius: 3cqw; background: var(--surface-2); }

/* Closing call to action */
.closing {
  padding: clamp(72px, 10vw, 140px) var(--side);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px;
}
.closing .app-icon { width: 96px; height: 96px; box-shadow: 0 0 0 1px var(--ring), 0 12px 32px rgba(28, 31, 37, .14); }
.closing h2 { margin-top: 8px; font-size: clamp(36px, 4.8vw, 64px); letter-spacing: -0.035em; line-height: 1.02; max-width: 760px; }
.closing p { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-2); }

/* ---- Long-form pages: Privacy, Terms, Support ---- */
.article { max-width: 680px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--side) clamp(64px, 9vw, 120px); }
.article-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); }
.article-head h1 { font-size: clamp(36px, 4.6vw, 56px); letter-spacing: -0.03em; line-height: 1.04; }
.article-meta { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.article-lede { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-2); }
.article-body { font-size: 17px; line-height: 1.6; }
.article-body > * + * { margin-top: 1em; }
.article-body h2 { font-size: 24px; letter-spacing: -0.015em; line-height: 1.2; margin-top: 2.2em; }
.article-body h3 { font-size: 19px; letter-spacing: -0.01em; margin-top: 1.8em; }
.article-body li + li { margin-top: .4em; }
.article-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-3); font-weight: 600; }
.article-body a:hover { text-decoration-color: currentColor; }
.article-body strong { font-weight: 800; }

/* FAQ, each answer a <details>. */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq h2 { font-size: 24px; letter-spacing: -0.015em; margin-bottom: 8px; }
.faq-item {
  border-radius: var(--r-card); background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; border-radius: var(--r-card);
  font-size: 17px; font-weight: 800; line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary .icon { color: var(--ink-2); transition: transform .2s ease; }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.faq-answer { padding: 0 20px 20px; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.faq-answer > * + * { margin-top: .8em; }
.faq-answer a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; color: var(--ink); }
.faq-answer strong { color: var(--ink); font-weight: 800; }

.contact { margin-top: clamp(40px, 6vw, 64px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.contact h2 { font-size: 24px; letter-spacing: -0.015em; }
.contact p { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 560px; }
.contact .button { margin-top: 6px; }

/* ---- 404 ---- */
.notfound {
  padding-top: clamp(72px, 10vw, 140px); padding-bottom: clamp(72px, 10vw, 140px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px;
}
.notfound .app-icon { width: 96px; height: 96px; box-shadow: 0 0 0 1px var(--ring), 0 12px 32px rgba(28, 31, 37, .14); }
.notfound h1 { font-size: clamp(36px, 4.8vw, 64px); letter-spacing: -0.035em; line-height: 1.02; max-width: 760px; margin-top: 8px; }
.notfound p { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 560px; }

/* ---- Footer ---- */
.site-footer { box-shadow: 0 -1px 0 var(--line); }
.footer-inner {
  padding-top: 32px; padding-bottom: 40px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.footer-brand .app-icon { width: 28px; height: 28px; }
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-size: 15px; font-weight: 800; }
.footer-mail { font-weight: 700; color: var(--ink-2); }

/* ---- Motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .faq-item summary .icon, .lang-summary .icon, .tl-play { transition: none; }
}