/* Capiñol pages on top of /appshift.css: the app's own look. Warm cream canvas, red accent and a
   sun-yellow second colour, ink outlines with a bottom "lip" instead of soft shadows, Bricolage
   Grotesque headings over Figtree. The hero headline is a subtitle line you can tap, like the app. */

:root {
  --accent: #e5383b;
  --accent-deep: #b3242a;
  --accent-soft: #fff1ef;
  --accent-glow: rgba(229, 56, 59, 0.3);
  --sun: #ffc93c;
  --sun-soft: #fff4cf;
  --leaf: #22c55e;
  --leaf-soft: #e3f8ea;
  --sky-soft: #e4efff;
  --underline: #3d6fe0;
  --background: #fff8ee;
  --surface: #ffffff;
  --elevated: #fff1df;
  --line: #3a2318;
  --ink: #3a2318;
  --display: 'Bricolage Grotesque', var(--font);
  --body: 'Figtree', var(--font);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --accent: #ff5a5d; --accent-deep: #ff8a8c; --accent-soft: rgba(255, 90, 93, 0.16);
    --accent-glow: rgba(255, 90, 93, 0.35);
    --sun-soft: rgba(255, 201, 60, 0.16); --leaf-soft: rgba(34, 197, 94, 0.16); --sky-soft: rgba(93, 140, 255, 0.18);
    --underline: #7fa3ff;
    --background: #1d1410; --surface: #2a1e18; --elevated: #33251e; --line: #f3e3d3; --ink: #120c09;
  }
}
/* Dark chosen in the footer, whatever the system says */
:root[data-theme='dark'] {
  --accent: #ff5a5d; --accent-deep: #ff8a8c; --accent-soft: rgba(255, 90, 93, 0.16);
  --accent-glow: rgba(255, 90, 93, 0.35);
  --sun-soft: rgba(255, 201, 60, 0.16); --leaf-soft: rgba(34, 197, 94, 0.16); --sky-soft: rgba(93, 140, 255, 0.18);
  --underline: #7fa3ff;
  --background: #1d1410; --surface: #2a1e18; --elevated: #33251e; --line: #f3e3d3; --ink: #120c09;
}

body { font-family: var(--body); }
h1, h2, h3, .brand, .stat strong { font-family: var(--display); letter-spacing: -0.03em; }
h1, h2 { font-weight: 800; }
h3 { font-weight: 800; }
.hand, .hero-note { color: var(--accent); }

/* Flat, like the app: 2px outline and a darker bottom lip, no gradients or blur */
.button.primary { background: var(--accent); box-shadow: 0 4px 0 var(--accent-deep); border-radius: 999px; }
.button.primary::after { display: none; }
.button.primary:hover { background: var(--accent); transform: translateY(-1px); box-shadow: 0 5px 0 var(--accent-deep); }
.button.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-deep); }
.button .i { font-size: 20px; }
.pill { background: var(--surface); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.pill .dot { background: var(--sun); box-shadow: 0 0 0 2px var(--line); }

.stat, .step, .feature, .faq details {
  border: 2px solid var(--line); box-shadow: 0 5px 0 var(--line);
}
.stat { background: var(--surface); }
.faq details { background: var(--surface); }
.step-ic { border: 2px solid var(--line); background: var(--surface); }

/* Tones from the app */
.tone-red { background: var(--accent-soft); } .tone-red .num, .tone-red .step-ic, .tone-red .eyebrow { color: var(--accent); }
.tone-sun { background: var(--sun-soft); } .tone-sun .num, .tone-sun .step-ic, .tone-sun .eyebrow { color: #a86b00; }
.tone-leaf { background: var(--leaf-soft); } .tone-leaf .num, .tone-leaf .step-ic, .tone-leaf .eyebrow { color: #138a42; }
.tone-sky { background: var(--sky-soft); } .tone-sky .num, .tone-sky .step-ic, .tone-sky .eyebrow { color: var(--underline); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .tone-sun :is(.num, .step-ic, .eyebrow) { color: var(--sun); }
  :root:not([data-theme='light']) .tone-leaf :is(.num, .step-ic, .eyebrow) { color: #5fe08f; }
}
:root[data-theme='dark'] .tone-sun :is(.num, .step-ic, .eyebrow) { color: var(--sun); }
:root[data-theme='dark'] .tone-leaf :is(.num, .step-ic, .eyebrow) { color: #5fe08f; }

/* ─── Hero: a subtitle line, each word tappable ─────────────────────────────────── */
.hero .subs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.08em 0.24em; }
.subs .w {
  position: relative; cursor: help; padding: 0 0.04em; border-radius: 0.14em;
  text-decoration: underline; text-decoration-color: var(--underline);
  text-decoration-thickness: 0.07em; text-underline-offset: 0.12em;
  transition: background-color 0.15s ease;
}
.subs .w.plain { text-decoration: none; cursor: default; margin-left: -0.3em; }
.subs .w.idiom { background: var(--sun-soft); text-decoration-color: var(--sun); padding: 0 0.12em; }
.subs .w:not(.plain):hover, .subs .w:focus-visible { background: var(--accent-soft); outline: none; }
.subs .w.idiom:hover, .subs .w.idiom:focus-visible { background: var(--sun); color: var(--ink); }
/* The word card from the app, in miniature */
.subs .w[data-gloss]::after {
  content: attr(data-gloss); position: absolute; left: 0; top: calc(100% + 14px); z-index: 3;
  white-space: nowrap; font: 600 15px/1 var(--body); letter-spacing: 0; color: var(--foreground);
  background: var(--surface); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line);
  padding: 10px 12px; border-radius: 14px; opacity: 0; transform: translateY(-4px);
  pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease;
}
.subs .w:hover::after, .subs .w:focus-visible::after { opacity: 1; transform: none; }
.hero .tr { margin: -6px 0 18px; color: var(--muted); font-size: 18px; font-style: italic; }

.phone-stage { isolation: isolate; }
.sun {
  position: absolute; z-index: -1; width: min(360px, 80vw); aspect-ratio: 1; border-radius: 50%;
  background: var(--sun); border: 2px solid var(--line); top: 4%; left: 50%; transform: translateX(-50%);
}
.capi-peek { position: absolute; z-index: 2; right: max(0px, calc(50% - 250px)); top: -6%; width: 132px; height: auto; transform: rotate(10deg); animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: rotate(6deg) translateY(-8px); } }
.phone { border: 2px solid var(--line); box-shadow: 0 8px 0 var(--line); background: #120c09; }
.float-tag { background: var(--surface); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); border-radius: 14px; }
.float-tag em { font-style: normal; color: var(--muted); font-weight: 500; }
.float-tag .flag { font: 800 11px/1 var(--display); color: var(--ink); background: var(--sun); border: 2px solid var(--line); border-radius: 6px; padding: 3px 5px; }
.float-tag .i { color: var(--accent); --i2: var(--sun); --i2o: 1; }
.float-tag.t1 { left: -4%; top: 58%; }
.float-tag.t2 { right: -2%; bottom: 10%; }

/* Real screenshots (1206 × 2622) fill the screen exactly */
.screen.shotted { aspect-ratio: 1206 / 2622; background: #fff; }
.screen.shotted img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature .mock { display: grid; place-items: center; }

/* Privacy promise: dark band with Capi on top */
.promise { background: #3a2318; border: 2px solid var(--line); box-shadow: 0 6px 0 var(--accent); }
.promise .eyebrow { color: var(--sun); }
.promise li i { background: rgba(255, 201, 60, 0.18); color: var(--sun); }
.promise-capi { display: block; width: 88px; height: auto; margin-bottom: 18px; transform: rotate(-6deg); }
.promise-link { margin-top: 18px; }
.promise-link a { color: var(--sun); font-weight: 600; }

.final-icon { border-radius: 22px; border: 2px solid var(--line); box-shadow: 0 5px 0 var(--line); }
.nav-links a { white-space: nowrap; }

@media (max-width: 860px) {
  .capi-peek { width: 104px; right: 6%; }
  .float-tag.t1 { left: 0; }
  .float-tag.t2 { right: 0; }
}
@media (max-width: 560px) {
  .subs .w[data-gloss]::after { display: none; }
}

/* Anchored sections clear the floating nav */
section[id] { scroll-margin-top: 84px; }