/* PillFeel web. Tokens follow the owner-approved promo set; every pair is checked by scripts/contrast.mjs
   (it reads the :root and the dark-scheme token blocks below). Breakpoints are in em on purpose: they follow
   text-only zoom (WCAG 1.4.4). No inline styles anywhere (CSP: style-src 'self'). */

/* ---------- Fonts: self-hosted, SIL OFL 1.1, one subset file per family (cs + en), variable weight ---------- */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800 900; font-display: swap;
  src: url(/assets/fonts/nunito-cs-en.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/assets/fonts/inter-cs-en.woff2) format("woff2"); }
/* Fallbacks with metrics close to the web fonts, so the swap does not move the lines (CLS). */
@font-face { font-family: "Nunito Fallback"; src: local("Arial"); size-adjust: 103%; ascent-override: 100%; descent-override: 33%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;
  --bg: #F3F5F1;
  --cream: #F4F1E8;
  --mint: #E8F2EC;
  --surface: #FFFFFF;
  --blob: #CFE8DA;
  --primary: #17694F;
  --on-primary: #FFFFFF;
  --heading: #0E382B;
  --text: #10241D;
  --text-2: #3B4A44;
  --border: #6B7C74;
  --hairline: #DCE4DF;
  --focus: #0E382B;
  --shadow: rgba(14, 56, 43, .16);
  --deep: #0E382B;
  --blob-dark: #1B5A45;
  --accent: #83D9B5;
  --on-accent: #0B2A20;
  --on-deep: #FFFFFF;
  --on-deep-2: #D5E9DF;
  --paper: #FFFFFF;
  --paper-text: #10241D;
  --pill-blue: #2F6FB0;

  --font-display: "Nunito", "Nunito Fallback", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: .9375rem;
  --step-0: 1.125rem;
  --step-1: clamp(1.25rem, 1.15rem + .4vw, 1.375rem);
  --step-2: clamp(1.375rem, 1.25rem + .5vw, 1.625rem);
  --step-3: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --step-4: clamp(2.375rem, 1.5rem + 3.6vw, 4.75rem);

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem;
  --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --gutter: clamp(1rem, 5vw, 7rem);
  --maxw: 76rem;
  --radius-card: 24px; --radius-chip: 18px; --radius-pill: 30px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1A15; --cream: #0F211A; --mint: #10251D; --surface: #142C23; --blob: #173D30;
    --primary: #83D9B5; --on-primary: #0B2A20; --heading: #E9F3EE; --text: #E9F3EE; --text-2: #B8CCC3;
    --border: #7F948A; --hairline: #24443A; --focus: #83D9B5; --shadow: rgba(0, 0, 0, .45);
    /* dark bands are lighter than the canvas in dark mode so the rhythm survives */
    --deep: #12443A; --blob-dark: #1F6A52;
    --paper: #F4F1E8; --paper-text: #10241D;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--step-0)/1.6 var(--font-body); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-display); color: var(--heading); margin: 0; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; }
td, th, .btn, .placeholder, .prose li, .prose a, .qa p, .step p, .card-on-deep p, .prose p, .state-list .name { overflow-wrap: anywhere; }
h1 { font-weight: 900; font-size: var(--step-4); line-height: 1.04; }
h2 { font-weight: 900; font-size: var(--step-3); line-height: 1.08; }
h3 { font-weight: 800; font-size: var(--step-2); line-height: 1.2; letter-spacing: -.01em; }
p { margin: 0; max-width: 64ch; text-wrap: pretty; }
a { color: var(--primary); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 3px; }
strong { font-weight: 600; }
ul, ol { margin: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.band-deep :focus-visible, .site-footer :focus-visible { outline-color: var(--accent); }

.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 10; background: var(--deep); color: var(--on-deep);
  padding: var(--s-3) var(--s-5); border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; border: 2px solid transparent; }
.skip-link:focus { top: var(--s-4); }
.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; }

.wrap { max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(var(--s-7), 8vw, var(--s-10)) 0; }
.section-tight { padding: clamp(var(--s-6), 5vw, var(--s-8)) 0; }
.band-cream { background: var(--cream); }
.band-mint { background: var(--mint); }
.band-deep { background: var(--deep); color: var(--on-deep); }
.band-deep h1, .band-deep h2, .band-deep h3 { color: var(--on-deep); }
.band-deep p { color: var(--on-deep-2); }
.band-deep a { color: var(--accent); }
.clip { position: relative; overflow: clip; }

.eyebrow { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--primary); margin: 0 0 var(--s-4); }
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; border: 1px solid currentColor; }
.band-deep .eyebrow { color: var(--accent); }
.lead { font-size: var(--step-1); line-height: 1.55; color: var(--text-2); }
.updated { font-size: var(--step--1); color: var(--text-2); margin-top: var(--s-4); }
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-5); }

.more { display: inline-block; font-weight: 600; padding: .6rem 0; }
.more::after { content: ""; display: inline-block; width: .5em; height: .5em; border-right: 2.5px solid currentColor; border-top: 2.5px solid currentColor;
  transform: rotate(45deg); margin-left: .45em; vertical-align: .08em; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 60px; padding: .75rem var(--s-6);
  border-radius: var(--radius-pill); border: 2px solid transparent; font: 600 1.1875rem/1.2 var(--font-body); text-align: center; text-decoration: none; cursor: pointer;
  background: var(--primary); color: var(--on-primary); transition: background-color .15s ease; }
.btn:hover { background: var(--heading); color: var(--bg); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: #A6E6CA; color: var(--on-accent); }
.btn-small { min-height: 44px; padding: .5rem var(--s-5); font-size: 1rem; }

/* ---------- Header ---------- */
.site-header { padding: var(--s-4) 0; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.brand { flex: none; display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--heading);
  font: 900 1.5rem/1 var(--font-display); letter-spacing: -.02em; min-height: 44px; }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.nav-list { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--s-1); }
.nav-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); border-radius: 22px; white-space: nowrap;
  color: var(--text); text-decoration: none; font-weight: 500; font-size: 1rem; }
.nav-list a:hover { background: var(--mint); }
.nav-list a[aria-current="page"] { color: var(--primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
.nav-menu { display: none; }
.lang { position: relative; }
.lang summary, .nav-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-4); border-radius: 22px; border: 1.5px solid var(--border); font-weight: 600; font-size: 1rem; }
.lang summary::-webkit-details-marker, .nav-menu summary::-webkit-details-marker { display: none; }
.lang ul, .nav-menu .nav-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; background: var(--surface); border-radius: 16px;
  border: 1px solid var(--hairline); box-shadow: 0 12px 32px var(--shadow); padding: var(--s-2); margin: 0; list-style: none; min-width: 12.5rem; }
.lang ul a { display: flex; min-height: 44px; align-items: center; padding: 0 var(--s-3); border-radius: 10px; color: var(--text); text-decoration: none; }
.lang ul a:hover { background: var(--mint); }
.lang ul a[aria-current="page"] { font-weight: 600; color: var(--primary); }

@media (max-width: 66em) {
  .nav > .nav-list { display: none; }
  .nav-menu { display: block; position: relative; }
  .nav-menu .nav-list { flex-direction: column; min-width: 15rem; }
  .nav-menu .nav-list a { width: 100%; }
  .header-cta { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: clip; padding: clamp(var(--s-5), 4vw, var(--s-7)) 0 clamp(var(--s-7), 7vw, var(--s-9)); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.hero-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; }
.hero-peek { width: 4.5rem; height: auto; margin-top: var(--s-2); }
.hero-copy > .lead { margin-top: var(--s-5); }
.hero-facts { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: var(--s-5) 0 0; }
.hero-facts li { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-chip); padding: 6px 14px; font-size: var(--step--1); font-weight: 500; color: var(--text); }

.stage { position: relative; aspect-ratio: 1 / 1.04; width: 100%; max-width: 36rem; justify-self: center; }
.stage .blob { position: absolute; width: 124%; aspect-ratio: 1; border-radius: 50%; background: var(--blob); right: -40%; top: -2%; }
.stage .dot { position: absolute; border-radius: 50%; background: var(--primary); opacity: .45; }
.stage .dot-1 { width: 22px; height: 22px; top: 4%; left: 14%; }
.stage .dot-2 { width: 14px; height: 14px; bottom: 14%; right: 6%; opacity: .35; }
.stage .paper { position: absolute; right: 2%; top: 1%; width: 56%; transform: rotate(5deg); z-index: 1; }
.stage .mascot { position: absolute; left: -1%; bottom: 3%; height: 88%; width: auto; z-index: 2; }
.floor { position: absolute; height: 26px; border-radius: 50%; background: var(--shadow); filter: blur(5px); }
.stage .floor { left: 2%; width: 50%; bottom: 1%; z-index: 1; }

@media (min-width: 66.01em) {
  .hero-peek { display: none; }
  .hero-title { display: block; }
}
@media (max-width: 66em) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .stage { max-width: 26rem; aspect-ratio: 1 / .9; }
  .stage .blob { width: 112%; right: -34%; }
}

/* The mascot floats for two short cycles (about 5 s) after load and then stands still; none under Reduce Motion. */
@media (prefers-reduced-motion: no-preference) {
  .stage .mascot { animation: float 2.4s ease-in-out 2; }
  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Waitlist (component with all states) and the calm "soon" block ---------- */
.waitlist { margin-top: var(--s-6); max-width: 35rem; }
.waitlist-title { font: 800 1.25rem/1.3 var(--font-display); color: var(--heading); margin-bottom: var(--s-3); }
.band-deep .waitlist-title { color: var(--on-deep); }
.waitlist label { display: block; font-weight: 600; font-size: 1rem; margin-bottom: var(--s-2); }
.waitlist-row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.waitlist input[type="email"] { flex: 1 1 9rem; min-width: 0; min-height: 60px; padding: 0 var(--s-5); border-radius: var(--radius-pill);
  border: 2px solid var(--border); background: var(--surface); color: var(--text); font: 400 1.125rem var(--font-body); }
.waitlist input[aria-invalid="true"] { border-color: var(--error); border-style: dashed; }
.band-deep .waitlist input[type="email"] { background: #FFFFFF; color: #10241D; border-color: #FFFFFF; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.waitlist-note { font-size: var(--step--1); line-height: 1.4; color: var(--text-2); margin-top: var(--s-3); }
.waitlist-note strong { font-weight: 600; color: var(--text); }
.band-deep .waitlist-note strong { color: var(--on-deep); }
.band-deep .waitlist-note { color: var(--on-deep-2); }
.waitlist-error { font-weight: 600; margin-top: var(--s-3); color: var(--error); }
.waitlist-error:empty { margin: 0; }
.band-deep .waitlist-error { color: #FFD9C7; }
:root { --error: #A3321B; }
@media (prefers-color-scheme: dark) { :root { --error: #FFB4A2; } }

.waitlist-soon { margin-top: var(--s-6); display: inline-flex; align-items: center; gap: var(--s-3); max-width: 35rem;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: .75rem var(--s-5) .75rem var(--s-4);
  font: 800 1.125rem/1.3 var(--font-display); color: var(--heading); }
.waitlist-soon::before { content: ""; flex: none; width: 1.6rem; height: .8rem; border-radius: 99px; transform: rotate(-35deg);
  background: linear-gradient(90deg, var(--surface) 50%, var(--pill-blue) 50%); border: 2px solid var(--border); }
.band-deep .waitlist-soon { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.band-deep .waitlist-soon::before { background: linear-gradient(90deg, #fff 50%, var(--pill-blue) 50%); border-color: var(--on-accent); }

/* ---------- Problem ---------- */
.problem { position: relative; overflow: clip; }
.problem::after { content: ""; position: absolute; width: 38rem; aspect-ratio: 1; border-radius: 50%; background: var(--blob); opacity: .55;
  right: -22rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.problem .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-7); align-items: end; }
.problem blockquote { margin: 0; font: 900 clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem)/1.15 var(--font-display); color: var(--heading); letter-spacing: -.02em; }
.problem blockquote p { max-width: 24ch; }
.problem .questions { color: var(--text-2); font-size: var(--step-1); margin-top: var(--s-5); }
.problem .answer { margin-top: var(--s-5); font-size: var(--step-1); font-weight: 600; color: var(--primary); }

/* ---------- Steps ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-7); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); counter-reset: step; }
.step { counter-increment: step; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: var(--s-6); position: relative; }
.step::before { content: counter(step); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--blob); color: var(--heading); font: 900 1.5rem/1 var(--font-display); margin-bottom: var(--s-4); border: 2px solid transparent; }
.step h3 { margin-bottom: var(--s-3); }
.step p { color: var(--text-2); }
.step-1 { grid-column: span 5; }
.step-2 { grid-column: span 7; background: var(--deep); border-color: var(--deep); }
.step-2 h3 { color: var(--on-deep); } .step-2 p { color: var(--on-deep-2); }
.step-2::before { background: var(--accent); color: var(--on-accent); }
.step-3 { grid-column: span 7; }
.step-4 { grid-column: span 5; }
.choice-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0; padding: 0; list-style: none; }
.choice-row li { background: var(--surface); color: var(--text); border: 1px solid var(--hairline); border-radius: var(--radius-chip); padding: 8px 16px; font-weight: 600; font-size: 1rem; }
.step-2 .choice-row li { background: var(--blob-dark); color: #FFFFFF; border-color: var(--blob-dark); }
.steps-cta { margin-top: var(--s-6); display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.low { margin-top: var(--s-6); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: end; background: var(--mint);
  border-radius: var(--radius-card); padding: var(--s-5) var(--s-6) var(--s-5) var(--s-5); }
.low .mascot-sm { height: 6.5rem; width: auto; justify-self: center; align-self: end; }
.low h3 { margin-bottom: var(--s-2); }
.low p { color: var(--text-2); font-size: var(--step-1); }

/* ---------- Doctor / PDF showcase ---------- */
.doctor { position: relative; overflow: clip; }
.doctor .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.doctor .stack-lg { position: relative; z-index: 1; }
.pdf-stage { position: relative; aspect-ratio: 1 / .98; width: 100%; max-width: 34rem; }
.pdf-stage .blob { position: absolute; width: 130%; aspect-ratio: 1; border-radius: 50%; background: var(--blob-dark); left: -52%; bottom: -26%; }
.pdf-stage .paper { position: absolute; right: 2%; top: 0; width: 70%; transform: rotate(-4deg); }
.pdf-stage .mascot { position: absolute; left: 4%; bottom: 2%; height: 56%; width: auto; }
.pdf-stage .floor { left: 1%; width: 34%; bottom: 0; background: rgba(0, 0, 0, .3); }

/* ---------- Paper illustration (HTML, built from app shapes, fictional data) ---------- */
.paper { margin: 0; container-type: inline-size; }
.paper-sheet { background: var(--paper); color: var(--paper-text); border-radius: 6px; padding: 5cqw 5.5cqw 6cqw; font-size: 4.1cqw; line-height: 1.35;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .3); border: 1px solid rgba(16, 36, 29, .12); }
.paper-top { display: flex; justify-content: space-between; font-size: .8em; opacity: .75; margin-bottom: 3cqw; }
.paper-title { border-radius: 10px; padding: 3.5cqw 4cqw; background: #CFE8DA; border: 1px solid rgba(16, 36, 29, .12); }
.paper-title .t { font: 900 1.9em/1.1 var(--font-display); color: #0E382B; display: block; max-width: none; }
.paper-title .p { font-size: .85em; margin-top: 1.2cqw; display: block; max-width: none; color: #10241D; }
.paper-med { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2cqw 2.5cqw; align-items: center; margin-top: 2.5cqw; padding: 2.2cqw 3cqw;
  border: 1px solid rgba(16, 36, 29, .18); border-radius: 8px; max-width: none; }
.paper-med b { font-weight: 700; }
.paper-med .n { font-size: .8em; color: #3B4A44; text-align: right; }
.paper-days { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.2cqw; }
.paper-days span { position: relative; display: grid; place-items: center; height: 5cqw; border-radius: 4px; border: 1px solid #6B7C74; font-size: .8em; line-height: 1; color: #3B4A44; }
.paper-days .tk { background: #17694F; border-color: #17694F; }
.paper-days .sk { background: transparent; }
.paper-days .sk::after { content: ""; position: absolute; left: 14%; right: 14%; top: 50%; border-top: 2px solid #6B7C74; transform: rotate(-25deg); }
.paper-days .no { border-color: transparent; }
.paper-sheet .paper-legend { margin-top: 2.5cqw; font-size: .72em; color: #3B4A44; max-width: none; }
.paper-sheet .paper-note { margin-top: 1.5cqw; font-size: .8em; color: #3B4A44; max-width: none; }
.paper figcaption { font-size: var(--step--1); color: var(--text-2); margin-top: var(--s-3); text-align: right; }
.band-deep .paper figcaption { color: var(--on-deep-2); }
.paper .mini-token { width: 1.9em; height: 1.9em; border-radius: 6px; border: 1.5px solid #6B7C74; position: relative; display: block; }
.paper .mini-token::after { content: ""; position: absolute; inset: 22% 18%; border-radius: 99px; transform: rotate(-35deg);
  background: linear-gradient(90deg, #fff 50%, #2F6FB0 50%); border: 1.5px solid #6B7C74; }

/* ---------- Dose tokens (shapes copied from MedicationToken in the app) ---------- */
.token { position: relative; flex: none; width: 44px; height: 44px; border-radius: 14px; border: 2.5px solid transparent; display: block; }
.token-pill { position: absolute; inset: 0; margin: auto; width: 26px; height: 13px; border-radius: 99px; transform: rotate(-35deg);
  background: linear-gradient(90deg, #FFFFFF 50%, var(--pill-blue) 50%); border: 2px solid var(--border); }
.token-badge { position: absolute; right: -9px; bottom: -9px; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--surface); display: none; }
.token-taken { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 20%, transparent); }
.token-taken .token-badge { display: block; background: var(--primary); }
.token-taken .token-badge::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--on-primary); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.token-skipped { border-color: var(--border); border-style: dashed; }
.token-skipped .token-badge { display: block; background: var(--border); }
.token-skipped .token-badge::after { content: ""; position: absolute; left: 4px; top: 7px; width: 9px; height: 0; border-top: 2.5px solid var(--surface); }
.token-pending { border-color: transparent; opacity: .55; }
/* a dose that is due: solid accent edge, no mark, no tint (as `.due` in MedicationToken) */
.token-due { border-color: var(--primary); }

/* ---------- Calm diary / state card ---------- */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
.split.rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split.rev > :first-child { order: 2; }
.state-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: var(--s-6); margin: 0; }
.state-card .summary { font: 800 1.375rem/1.2 var(--font-display); color: var(--heading); margin-bottom: var(--s-5); }
.state-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.state-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tok name time" "tok word time"; align-items: center; column-gap: var(--s-4); row-gap: 0; font-weight: 600; }
.state-list .token { grid-area: tok; }
.state-list .name { grid-area: name; }
.state-list .time { grid-area: time; color: var(--text-2); font-weight: 500; }
.state-list .word { grid-area: word; color: var(--text-2); font-weight: 500; font-size: var(--step--1); }
.state-card figcaption { font-size: var(--step--1); color: var(--text-2); margin-top: var(--s-5); }

/* ---------- Lock screen ---------- */
.lock { background: linear-gradient(160deg, #1F3A31, #0E1A16); border-radius: 36px; padding: var(--s-7) var(--s-5) var(--s-6); margin: 0; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .12); }
.lock .clock { font: 300 min(4rem, 16vw)/1 var(--font-body); text-align: center; color: #F2F7F4; letter-spacing: -.02em; max-width: none; }
.lock .date { text-align: center; color: #D5E9DF; font-size: 1rem; margin-bottom: var(--s-6); max-width: none; }
.notif { background: rgba(255, 255, 255, .92); color: #10241D; border-radius: 22px; padding: var(--s-4); display: grid; grid-template-columns: 40px 1fr; gap: var(--s-3); align-items: center; border: 2px solid transparent; }
.notif img { width: 40px; height: 40px; border-radius: 10px; }
.notif .app { font-size: var(--step--1); font-weight: 600; color: #3B4A44; display: flex; justify-content: space-between; max-width: none; }
.notif .msg { font-size: 1.0625rem; color: #10241D; }
.lock figcaption { color: #D5E9DF; font-size: var(--step--1); margin-top: var(--s-5); text-align: center; }

/* ---------- Screen illustration (phone, HTML) ---------- */
.screens { display: flex; gap: var(--s-5); justify-content: center; align-items: flex-start; }
.phone-ill { width: min(14rem, 44vw); aspect-ratio: 9 / 17.5; background: var(--bg); color: var(--text); border-radius: 2.4rem; border: .55rem solid #0E1A16; padding: 1.1rem .9rem .9rem;
  box-shadow: 0 24px 48px -16px var(--shadow); overflow: clip; display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; }
.phone-ill-bar { display: flex; justify-content: space-between; font-weight: 600; font-size: .75em; margin-bottom: .6rem; }
.phone-ill-title { font: 900 1.7em/1.1 var(--font-display); color: var(--heading); max-width: none; }
.phone-ill-sum { font-weight: 600; margin: .3rem 0 .7rem; color: var(--text-2); max-width: none; }
.phone-ill ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.phone-ill li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: center; background: var(--surface); border-radius: 14px; padding: .5rem .6rem; border: 1px solid var(--hairline); }
.phone-ill .token { width: 2.2em; height: 2.2em; border-radius: 9px; border-width: 2px; }
.phone-ill .token-pill { width: 1.3em; height: .65em; border-width: 1.5px; }
.phone-ill .token-badge { width: 1.1em; height: 1.1em; right: -.45em; bottom: -.45em; border-width: 2px; }
.phone-ill .token-taken .token-badge::after { left: .3em; top: .1em; width: .26em; height: .5em; border-width: 0 2px 2px 0; }
.phone-ill .token-skipped .token-badge::after { left: .2em; top: .35em; width: .45em; border-top-width: 2px; }
.phone-ill .name { font-weight: 700; display: block; }
.phone-ill .when { color: var(--text-2); font-size: .9em; display: block; }
.phone-ill-btn { margin-top: auto; display: block; text-align: center; background: var(--primary); color: var(--on-primary); border: 2px solid transparent; border-radius: 99px; padding: .6rem; font-weight: 700; }
.phone-ill--large { font-size: 19px; }
.phone-ill .name, .phone-ill .when { overflow-wrap: break-word; hyphens: auto; }
.screens figure { margin: 0; text-align: center; }
.screen-label { margin: var(--s-3) auto 0; font-size: var(--step--1); font-weight: 600; color: var(--text-2); text-align: center; }
.screens-cap { font-size: var(--step--1); color: var(--text-2); margin-top: var(--s-4); text-align: center; max-width: none; }

/* ---------- Facts ---------- */
.facts-def { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: clamp(var(--s-5), 4vw, var(--s-7)); margin-bottom: var(--s-5); }
.facts-def p { font-size: var(--step-0); max-width: 68ch; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.facts li { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: var(--s-5) var(--s-6); color: var(--text-2); }
.facts strong { display: block; font: 900 clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem)/1.1 var(--font-display); color: var(--heading); letter-spacing: -.02em; margin: 2px 0; }
.facts li:first-child { grid-row: span 2; background: var(--deep); border-color: var(--deep); color: var(--on-deep-2); display: flex; flex-direction: column; justify-content: center; }
.facts li:first-child strong { color: var(--accent); font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); }
.facts li:last-child { grid-column: 1 / -1; }
.facts li:last-child strong { display: inline; font: 800 var(--step-2)/1.2 var(--font-display); }

/* ---------- Closing CTA ---------- */
.closing { position: relative; overflow: clip; }
.closing .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--s-7); align-items: end; }
.closing .lead { margin-top: var(--s-4); }
.closing .mascot-wrap { position: relative; align-self: stretch; min-height: 20rem; }
.closing .blob { position: absolute; width: 36rem; aspect-ratio: 1; border-radius: 50%; background: var(--blob-dark); right: -14rem; bottom: -14rem; }
.closing .mascot { position: absolute; height: 17rem; width: auto; right: 4rem; bottom: 1.2rem; }
.closing .floor { width: 9rem; right: 5rem; bottom: .6rem; background: rgba(0, 0, 0, .3); }

/* ---------- Questions (H3 + visible answer) ---------- */
.qa-list { display: grid; gap: var(--s-3); max-width: 54rem; }
.qa { background: var(--surface); border: 1px solid var(--hairline); border-radius: 20px; padding: var(--s-5) var(--s-6); scroll-margin-top: var(--s-5); }
.qa h3 { font-size: 1.25rem; margin-bottom: var(--s-2); }
.qa p { color: var(--text-2); }
.qa:target { outline: 3px solid var(--focus); outline-offset: 3px; }
.qa-links { margin-top: var(--s-2); }
.faq-group + .faq-group { margin-top: var(--s-8); }
.faq-group > h2 { margin-bottom: var(--s-5); font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }

/* ---------- Topic grid (/pristupnost) ---------- */
.topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.topic { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: var(--s-6); }
.topic h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); margin-bottom: var(--s-4); }
.topic p, .topic li { color: var(--text-2); }
.topic ul { padding-left: 1.2em; display: grid; gap: var(--s-3); }
.topic-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); align-items: center; }
.topic-wide .state-card { background: var(--mint); }
.definition { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: clamp(var(--s-5), 4vw, var(--s-7)); }
.definition p { font-size: var(--step-1); line-height: 1.6; max-width: 68ch; }

/* ---------- Text pages (about, press, privacy extras) ---------- */
.prose { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); max-width: 54rem; }
.prose > *, .notfound .wrap > *, .split > *, .topic-wide > *, .hero .wrap > *, .doctor .wrap > *, .closing .wrap > *, .problem .wrap > * { min-width: 0; max-width: 100%; }
.prose h2 { margin-bottom: var(--s-3); font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }
.prose p + p { margin-top: var(--s-4); }
.prose ul { padding-left: 1.2em; display: grid; gap: var(--s-3); }
.path { font-weight: 600; }
.path .sep { display: inline-block; width: .45em; height: .45em; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); margin: 0 .5em .05em .2em; }
.facts-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--hairline); }
.facts-table caption { text-align: left; padding: 0 0 var(--s-3); font-weight: 600; }
.facts-table th, .facts-table td { text-align: left; padding: var(--s-3) var(--s-4); vertical-align: top; border-top: 1px solid var(--hairline); }
.facts-table th { width: 30%; font-weight: 600; color: var(--heading); }
.facts-table tr:first-child th, .facts-table tr:first-child td { border-top: 0; }
.downloads { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); gap: var(--s-4); }
.downloads li { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: var(--s-4); display: grid; gap: var(--s-3); align-content: start; }
.downloads img { height: 8rem; width: auto; margin: 0 auto; }
.downloads .icon { height: 6rem; border-radius: 22px; }
.downloads a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.page-hero { padding: clamp(var(--s-6), 5vw, var(--s-8)) 0 var(--s-6); }
.notfound { text-align: center; }
.notfound .mascot { height: 12rem; width: auto; margin: 0 auto var(--s-5); }
.notfound .wrap { display: grid; justify-items: center; }
.notfound p { margin-inline: auto; margin-top: var(--s-4); }
.notfound .btn { margin-top: var(--s-5); }


/* ---------- Sub-page blocks ---------- */
.stage--solo .mascot { left: 0; right: 0; margin-inline: auto; height: 90%; }
.stage--flow { aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: var(--s-6) 0; }
.stage--flow > .screens-fig, .stage--flow > .lock { position: relative; z-index: 1; }
.stage--flow .mascot { height: 9rem; left: -.5rem; bottom: 1.5rem; z-index: 2; }
.stage--flow .blob { top: 0; }
.stage--flow .lock { max-width: 22rem; justify-self: center; width: 100%; }
.page-hero { background: var(--bg); }
.section-title { margin-bottom: var(--s-6); }
.after-list { margin-top: var(--s-5); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--s-4); counter-reset: tl; }
.timeline li { counter-increment: tl; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: var(--s-5); font-weight: 500; }
.timeline li::before { content: counter(tl); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; margin-bottom: var(--s-3);
  background: var(--blob); color: var(--heading); font: 900 1.25rem/1 var(--font-display); border: 2px solid transparent; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--s-4); }
.card-on-deep { background: var(--blob-dark); border: 1px solid var(--blob-dark); border-radius: var(--radius-card); padding: var(--s-5); }
.card-on-deep h3 { margin-bottom: var(--s-2); }
.card-on-deep p { color: #FFFFFF; }
.band-deep .card-on-deep p { color: #FFFFFF; }
.plain-list { padding-left: 1.2em; display: grid; gap: var(--s-3); }
.big-quote { margin: 0; font: 900 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1.2 var(--font-display); color: var(--heading); letter-spacing: -.02em; }
.big-quote p { max-width: 22ch; }
.day-line { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); max-width: 46rem; border-left: 4px solid var(--blob); padding-left: var(--s-5); }
.day-aside { margin-top: var(--s-6); max-width: 46rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: var(--s-5); }
.two-cards { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-5); }
.card-plain { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: var(--s-6); }
.card-plain h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); margin-bottom: var(--s-3); }
.card-plain p { color: var(--text-2); }
.link-row { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
@media (max-width: 66em) { .two-cards { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 66.01em) { .doctor .wrap > .pdf-stage { order: -1; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--deep); color: var(--on-deep-2); padding: var(--s-7) 0; font-size: 1rem; border-top: 1px solid var(--blob-dark); }
.site-footer a { color: #FFFFFF; }
.site-footer .wrap { display: grid; gap: var(--s-5); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); align-items: center; }
.footer-brand { display: inline-flex; align-items: center; gap: var(--s-3); color: #FFFFFF; font: 900 1.375rem var(--font-display); }
.footer-brand img { width: 36px; height: 36px; border-radius: 9px; }
.footer-links, .footer-langs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.footer-links a, .footer-langs a { display: inline-flex; min-height: 44px; align-items: center; }
.footer-note { border-top: 1px solid var(--blob-dark); padding-top: var(--s-5); max-width: 80ch; display: grid; gap: var(--s-3); font-size: var(--step--1); }
.footer-note a { display: inline-block; padding: .6rem 0; }
.placeholder { background: #FFE9A8; color: #3A2C00; border-radius: 4px; padding: 0 4px; font-size: .875em; font-weight: 600; border: 1px solid #3A2C00; }
.band-deep .placeholder, .site-footer .placeholder { color: #3A2C00; }

/* ---------- Responsive ---------- */
@media (max-width: 66em) {
  .doctor .wrap, .split, .split.rev, .problem .wrap, .closing .wrap, .topic-wide { grid-template-columns: minmax(0, 1fr); }
  .split.rev > :first-child { order: 0; }
  .steps .step { grid-column: 1 / -1; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li:first-child { grid-row: auto; grid-column: 1 / -1; }
  .topics { grid-template-columns: minmax(0, 1fr); }
  .pdf-stage { margin-inline: auto; max-width: 28rem; }
  .doctor .wrap { gap: var(--s-6); }
  .closing .mascot-wrap { min-height: 14rem; max-width: 22rem; }
  .closing .mascot { height: 12.5rem; right: 3rem; }
  .closing .blob { width: 26rem; right: -9rem; bottom: -12rem; }
  .problem::after { width: 24rem; right: -15rem; top: 3rem; transform: none; }
}
@media (max-width: 35em) {
  .section { padding: var(--s-6) 0; }
  .waitlist { margin-top: var(--s-5); }
  .waitlist-note { margin-top: var(--s-2); }
  .waitlist-title { margin-bottom: var(--s-2); }
  .hero-facts { margin-top: var(--s-4); }
  .lead.stack-lg, .hero-copy > .lead { margin-top: var(--s-4); }
  .hero { padding-bottom: var(--s-3); }
  .closing.section { padding: var(--s-6) 0 var(--s-5); }
  .facts-def { margin-bottom: var(--s-3); }
  .section.band-mint, .section.band-cream { padding: var(--s-5) 0; }
  .section-tight { padding: var(--s-5) 0; }
  /* on a phone the hero keeps the small mascot beside the H1; the PDF paper shows in the next sections (home height budget) */
  .hero .stage:not(.stage--flow):not(.stage--solo) { display: none; }
  .stage { max-width: 21rem; aspect-ratio: 1 / .85; }
  .closing .mascot-wrap { display: none; }
  .pdf-stage { max-width: 20rem; }
  .section-head { margin-bottom: var(--s-5); }
  .problem .wrap { gap: var(--s-4); }
  .steps { gap: var(--s-3); }
  .step::before { width: 40px; height: 40px; font-size: 1.25rem; margin-bottom: var(--s-2); }
  .step h3 { margin-bottom: var(--s-2); }
  .step-2 .choice-row { margin: var(--s-3) 0; }
  .definition, .facts-def { padding: var(--s-5); }
  .qa { padding: var(--s-4) var(--s-5); }
  .low { margin-top: var(--s-4); }
  .state-card, .topic, .card-plain { padding: var(--s-4); }
  .state-list li { column-gap: var(--s-3); }
  .state-list { gap: var(--s-3); }
  .hero { padding-bottom: var(--s-5); }
  .closing .mascot-wrap { min-height: 8rem; }
  .low { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); }
  .low .mascot-sm { display: none; }
  .waitlist .btn { padding-inline: var(--s-4); }
  .step { padding: var(--s-4) var(--s-5); }
  .facts li { padding: var(--s-4); }
  .facts { gap: var(--s-3); }
  .facts-table th, .facts-table td { display: block; width: 100%; }
  .facts-table th { padding-bottom: 0; }
  .facts-table td { border-top: 0; padding-top: var(--s-1); }
  /* the two screens stack on a phone: each keeps a readable width instead of being squeezed (1.4.10) */
  .screens { flex-direction: column; align-items: center; gap: var(--s-5); }
  .phone-ill { width: min(15rem, 100%); aspect-ratio: auto; }
  .phone-ill-btn { margin-top: var(--s-4); }
  .screens--one .phone-ill { width: min(13rem, 100%); }
  .lock { padding: var(--s-5) var(--s-4); }
  .lock .clock { font-size: 3rem; }
  .lock .date { margin-bottom: var(--s-4); }
  .stage--flow { padding: var(--s-4) 0; }
}

/* ---------- Forced colors (Windows High Contrast): shapes and outlines stay ---------- */
@media (forced-colors: active) {
  .btn, .skip-link, .phone-ill-btn { border-color: ButtonText; }
  .token { forced-color-adjust: auto; }
  .token-taken { border-color: Highlight; border-style: solid; }
  .token-skipped { border-color: CanvasText; border-style: dashed; }
  .token-pill, .paper .mini-token::after { border-color: CanvasText; }
  .token-badge { border-color: CanvasText; }
  .token-taken .token-badge::after { border-color: CanvasText; }
  .token-skipped .token-badge::after { border-color: CanvasText; }
  .token-pending { opacity: 1; border-style: none; }
  .token-due { border-color: Highlight; border-style: solid; }
  .paper-days .no { border-style: none; }
  .timeline li, .card-on-deep, .card-plain, .day-aside, .step, .qa, .state-card, .definition, .topic, .facts li, .waitlist-soon, .lock, .notif, .phone-ill, .phone-ill li, .paper-sheet, .paper-med, .paper-title,
  .hero-facts li, .choice-row li { border: 1px solid CanvasText; }
  .paper-days span { border-color: CanvasText; }
  .paper-days .tk { border-color: CanvasText; border-width: 3px; }
  .paper-days .sk::after { border-color: CanvasText; }
  .paper-days .no { border-color: transparent; }
  .waitlist input[type="email"] { border-color: FieldText; }
  .stage .blob, .pdf-stage .blob, .closing .blob, .problem::after { display: none; }
  .floor { display: none; }
}

@media print {
  .site-header, .waitlist, .waitlist-soon, .stage, .pdf-stage, .skip-link, .closing .mascot-wrap { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
}