/* ============================================================
   STABIEL — homepage stylesheet (static, no JavaScript required)
   Design tokens extracted VERBATIM from the shipped design system
   (streamlit_app/common/branding.py). Fonts self-hosted (IBM Plex,
   SIL OFL 1.1). Paths relative to this file → ../fonts/.
   ============================================================ */

/* ---- IBM Plex Mono ---- */
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/IBMPlexMono-Regular.ttf") format('truetype'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/IBMPlexMono-Medium.ttf") format('truetype'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/IBMPlexMono-SemiBold.ttf") format('truetype'); }
/* ---- IBM Plex Sans ---- */
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/IBMPlexSans-Regular.ttf") format('truetype'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/IBMPlexSans-Medium.ttf") format('truetype'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/IBMPlexSans-SemiBold.ttf") format('truetype'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/IBMPlexSans-Bold.ttf") format('truetype'); }

/* ============================ tokens ============================ */
:root {
  --paper:#1A4876; --card:#22568A;
  --ink:#FFFFFF; --ink-soft:#BBCBDE; --ink-faint:#86A0BE;
  --brand:#0D7AF3; --accent:#FFD300;
  --done:#5FC08D; --flag:#FF6F57; --slate:#7FA6CE;
  --surface-glass:rgba(255,255,255,.03);
  --stroke-card:rgba(255,255,255,.16);
  --stroke-btn:rgba(255,255,255,.34);
  --stroke-footer:rgba(255,255,255,.14);
  --bar-track:rgba(255,255,255,.12);
  --pass-bg:rgba(95,192,141,.14); --pass-stroke:rgba(95,192,141,.45); --pass-ink:#CFEBDC;
  --warn-bg:rgba(255,211,0,.10);  --warn-stroke:rgba(255,211,0,.40);  --warn-ink:#F4E6A8;
  --fail-bg:rgba(255,111,87,.12); --fail-stroke:rgba(255,111,87,.45); --fail-ink:#FFD3C9;

  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r-btn:10px; --r-card:14px; --r-pill:99px;
  --dot-grid-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
  --dot-grid-size:22px 22px;
  --container-wide:1140px;
  --ease:cubic-bezier(.4,0,.2,1); --dur-fast:.15s; --dur-base:.22s;
}
/* light sibling — the demo report */
.on-light {
  --paper:#FFFFFF; --card:#FFFFFF;
  --ink:#14385C; --ink-soft:#44617F; --ink-faint:#76879B;
  --done:#1B7A3F; --flag:#A12824; --zebra:#F0F2F5;
  --stroke-card:rgba(20,56,92,.16); --stroke-btn:rgba(20,56,92,.28);
  --stroke-footer:rgba(20,56,92,.12); --bar-track:rgba(20,56,92,.10);
  --pass-bg:rgba(27,122,63,.10); --pass-stroke:rgba(27,122,63,.40); --pass-ink:#14622F;
  --fail-bg:rgba(161,40,36,.08); --fail-stroke:rgba(161,40,36,.38); --fail-ink:#7E1F1C;
}

/* ============================ base ============================ */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:var(--font-sans); font-size:15px; line-height:1.55; color:var(--ink);
  background-color:var(--paper);
  background-image:var(--dot-grid-image);
  background-size:var(--dot-grid-size);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3 { font-family:var(--font-mono); font-weight:500; letter-spacing:-.01em; line-height:1.45; margin:0; }
p { margin:0; }
img { border:0; }
.mono { font-family:var(--font-mono); }
.caption { font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); letter-spacing:.02em; }
.eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.faint { color:var(--ink-faint); }
a { color:var(--ink); text-decoration:none; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { transition-duration:.001ms !important; animation-duration:.001ms !important;
      animation-delay:0ms !important; }
}
/* visually hidden but focusable — the CSS-state radios */
.vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
      clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.wrap { max-width:var(--container-wide); margin:0 auto; padding:0 24px; }
section { scroll-margin-top:84px; }

/* ============================ buttons ============================ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:600; line-height:1.1;
  border-radius:var(--r-btn); border:1px solid transparent; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease); }
.btn--sm { font-size:14px; padding:7px 16px; }
.btn--md { font-size:15px; padding:10px 22px; }
.btn--lg { font-size:16px; padding:13px 28px; }
.btn--primary   { background:var(--ink);  color:var(--card); border-color:var(--ink); }
.btn--primary:hover { background:#EAF1F8; color:var(--paper); border-color:#EAF1F8; }
.btn--secondary { background:var(--card); color:var(--ink);  border-color:var(--stroke-btn); }
.btn--secondary:hover { border-color:var(--ink-soft); }
.btn--ghost { background:transparent; color:var(--ink); }
.btn--ghost:hover { background:var(--surface-glass); }
.btn--full { width:100%; }

/* the typographic status mark — ● ACTIVE / ○ PLANNED */
.badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-size:11.5px; font-weight:500; letter-spacing:.04em; }
.badge .dot { font-size:9px; line-height:1; }
.badge--active  { color:var(--done); }
.badge--planned { color:var(--ink-faint); }

/* ============================ header ============================ */
.topnav { position:sticky; top:0; z-index:50;
  background:rgba(26,72,118,.92);
  border-bottom:1px solid var(--stroke-footer); padding:0 24px; }
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .topnav { background:rgba(26,72,118,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
}
.topnav nav { display:flex; align-items:center; justify-content:space-between; gap:18px;
  max-width:var(--container-wide); margin:0 auto; padding:14px 0; }
.sh-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.sh-logo img { width:30px; height:30px; border-radius:7px; display:block; }
.sh-word { font-family:var(--font-mono); font-weight:600; letter-spacing:-.02em; font-size:20px; color:var(--ink); }
.sh-word .sh-dot { color:var(--accent); }
.sh-right { display:flex; align-items:center; gap:16px; }
.sh-links { display:flex; gap:22px; }
.sh-links a { font-family:var(--font-sans); font-size:14px; color:var(--ink-soft);
  white-space:nowrap; transition:color var(--dur-fast) var(--ease); }
.sh-links a:hover { color:var(--ink); }

/* the EN / ES pill — SAME markup and geometry as the tool header
   (branding.site_header): 26px circular inline-SVG flags in a bordered pill,
   the active language ringed in brand blue. Here each flag is a plain link to
   the sibling static page, so the switch needs NO JavaScript. */
.sh-lang { display:inline-flex; align-items:center; gap:3px; padding:3px; flex-shrink:0;
  border-radius:var(--r-pill); border:1px solid var(--stroke-btn); background:var(--card); }
.sh-lang a { width:26px; height:26px; border-radius:var(--r-pill); display:inline-flex;
  align-items:center; justify-content:center; font-size:13px; line-height:1;
  text-decoration:none; opacity:.62; transition:opacity var(--dur-fast) var(--ease); }
.sh-lang a:hover { opacity:1; }
.sh-lang a.is-active { opacity:1; background:rgba(13,122,243,.20); box-shadow:inset 0 0 0 1px var(--brand); }
.sh-lang svg { display:block; }

@media (max-width:820px) { .sh-links { display:none; } }
@media (max-width:560px) { .sh-signin { display:none; } }

/* ============================ hero ============================ */
.hero { text-align:center; padding:40px 0 8px; }
.hero .wordmark-img { width:min(320px,72vw); height:auto; display:block; margin:0 auto 30px; }
.hero h1 { font-size:clamp(30px,5vw,52px); line-height:1.12; letter-spacing:-.02em;
  margin:0 auto; max-inline-size:17ch; }
.hero .lede { color:var(--ink-soft); font-size:17px; line-height:1.55; max-width:52ch; margin:22px auto 0; }
.hero .cta-row { display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap; }
.hero .sub-caption { margin-top:14px; }

/* one calm page-load sequence (CSS only; reduced motion shows all instantly) */
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.rise   { animation:rise .55s var(--ease) both; }
.rise-1 { animation-delay:.05s; } .rise-2 { animation-delay:.28s; }
.rise-3 { animation-delay:.46s; } .rise-4 { animation-delay:.64s; }
.rise-5 { animation-delay:1.30s; } .rise-6 { animation-delay:1.65s; }

.trust { display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  max-width:760px; margin:48px auto 0; border:1px solid var(--stroke-card);
  border-radius:var(--r-card); background:var(--stroke-footer); overflow:hidden; }
.trust > div { background:var(--paper); padding:18px 14px; }
.trust .num { font-family:var(--font-mono); font-size:26px; font-weight:500;
  color:var(--ink); letter-spacing:-.01em; }
.trust .caption { margin-top:4px; line-height:1.35; display:block; }
@media (max-width:760px) { .trust { grid-template-columns:1fr 1fr; } }

/* ============================ sections ============================ */
.sec-head { text-align:center; max-width:64ch; margin:0 auto 34px; padding:0 24px; }
.sec-head h2 { font-size:clamp(24px,3.4vw,32px); }
.sec-head .eyebrow { display:block; margin-bottom:10px; }
.sec-head .lede { color:var(--ink-soft); font-size:16px; margin-top:12px; }
.sec-head .accent-dot { color:var(--accent); }

/* ============================ demo ============================ */
#demo { padding-top:88px; }
.demo-card { max-width:560px; margin:0 auto; background:var(--surface-glass);
  border:1px solid var(--stroke-card); border-radius:var(--r-card);
  padding:clamp(18px,3vw,30px); }
.hstrip { text-align:center; }
.hstrip .tool { font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--ink); }
.hstrip .meta { font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); letter-spacing:.02em; margin-top:2px; }
.std-chips { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chip { font-family:var(--font-mono); font-size:12px; color:var(--ink);
  border:1px solid var(--stroke-btn); border-radius:var(--r-pill); padding:5px 12px; }
.chip--soon { color:var(--ink-faint); border:1px dashed var(--stroke-card); }

.case-row { display:flex; justify-content:center; gap:8px; margin:20px 0; }
.case-btn { font-family:var(--font-mono); font-size:12.5px; cursor:pointer;
  padding:7px 14px; border-radius:var(--r-btn); border:1px solid var(--stroke-btn);
  background:transparent; color:var(--ink-soft);
  transition:all var(--dur-fast) var(--ease); }
.case-btn:hover { color:var(--ink); }
.case-btn.is-active { border-color:var(--brand); background:rgba(13,122,243,.14); color:var(--ink); }

.inp-row { display:flex; flex-wrap:wrap; gap:18px 28px; justify-content:center;
  padding:16px 0; border-top:1px solid var(--stroke-footer); border-bottom:1px solid var(--stroke-footer); }
.inp { display:flex; flex-direction:column; gap:2px; }
.inp .k { font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); letter-spacing:.02em; }
.inp .v { font-family:var(--font-mono); font-size:13.5px; color:var(--ink); }

.demo-grid { display:grid; grid-template-columns:1fr; gap:22px; margin-top:22px; align-items:start; }
@media (min-width:980px) and (orientation:landscape) {
  .demo-card { max-width:920px; }
  .demo-grid { grid-template-columns:1fr 1fr; }
}

.banner { border-radius:var(--r-btn); padding:12px 16px; font-family:var(--font-sans);
  font-size:14.5px; line-height:1.5; }
.banner--pass { background:var(--pass-bg); border:1px solid var(--pass-stroke); color:var(--pass-ink); }
.banner--fail { background:var(--fail-bg); border:1px solid var(--fail-stroke); color:var(--fail-ink); }
.banner b { font-weight:700; }
.banner .u { font-family:var(--font-mono); }

.meter { max-width:360px; }
.meter .lbl { font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); }
.meter .val { font-family:var(--font-mono); font-size:30px; font-weight:500; line-height:1.15; color:var(--ink); }
.meter .delta { font-family:var(--font-mono); font-size:12px; }
.meter .delta--pass { color:var(--done); }
.meter .delta--fail { color:var(--flag); }
.meter .track { height:8px; border-radius:var(--r-pill); background:var(--bar-track); margin-top:8px; overflow:hidden; }
.meter .fill { height:100%; border-radius:var(--r-pill); background:var(--brand); }
.meter .fill--fail { background:var(--flag); }

.sized-note { font-family:var(--font-mono); font-size:12px; line-height:1.5;
  color:var(--pass-ink); background:var(--pass-bg);
  border:1px solid var(--pass-stroke); border-radius:var(--r-btn); padding:9px 12px; }

.trace { background:var(--card); border:1px solid var(--stroke-card);
  border-radius:var(--r-card); padding:14px 16px; font-family:var(--font-mono);
  font-size:12.5px; line-height:1.7; color:var(--ink-soft); overflow-x:auto; }
.trace .clause { display:block; color:var(--ink-faint); font-size:11.5px; margin-bottom:6px; }
.trace pre { margin:0; font-family:inherit; font-size:inherit; white-space:pre; line-height:inherit; }

.act-row { display:flex; gap:10px; margin-top:2px; flex-wrap:wrap; }
.res-col { display:flex; flex-direction:column; gap:16px; }
.demo-foot { text-align:center; margin-top:16px; }

/* --- demo state machine: one radio group, four pre-rendered states --- */
.demo-state { display:none; }
#dc-a:checked  ~ .demo-card .st-a  { display:block; }
#dc-az:checked ~ .demo-card .st-az { display:block; }
#dc-b:checked  ~ .demo-card .st-b  { display:block; }
#dc-bz:checked ~ .demo-card .st-bz { display:block; }
/* keyboard focus on a hidden radio rings its state's active case button */
#dc-a:focus-visible  ~ .demo-card .st-a  .case-btn.is-active,
#dc-az:focus-visible ~ .demo-card .st-az .case-btn.is-active,
#dc-b:focus-visible  ~ .demo-card .st-b  .case-btn.is-active,
#dc-bz:focus-visible ~ .demo-card .st-bz .case-btn.is-active {
  outline:2px solid var(--accent); outline-offset:2px; }

/* ============================ rails (modules / pricing) ============================ */
.rail { display:grid; grid-auto-flow:column; grid-auto-columns:min(400px,80vw);
  gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px max(24px, calc((100vw - var(--container-wide)) / 2)) 20px;
  -webkit-overflow-scrolling:touch; scrollbar-color:var(--stroke-btn) transparent; }
.rail > * { scroll-snap-align:center; }
.rail-hint { text-align:center; padding-bottom:6px; }
@media (min-width:1100px) {
  .rail--4 { grid-auto-flow:row; grid-template-columns:repeat(4,1fr); grid-auto-columns:unset;
    overflow:visible; max-width:var(--container-wide); margin:0 auto; padding:6px 24px 8px; }
  .rail--3 { grid-auto-flow:row; grid-template-columns:repeat(3,1fr); grid-auto-columns:unset;
    overflow:visible; max-width:980px; margin:0 auto; padding:6px 24px 8px; }
  .rail-hint { display:none; }
}
#modules { padding-top:88px; }
#pricing { padding-top:88px; }

/* module card */
.mcard { display:flex; flex-direction:column; min-height:430px;
  background:var(--surface-glass); border:1px solid var(--stroke-card);
  border-radius:var(--r-card); padding:28px 26px 22px;
  transition:border-color var(--dur-fast) var(--ease); }
.mcard:hover { border-color:var(--stroke-btn); }
.mcard--planned { opacity:.82; }
.mcard--planned:hover { border-color:var(--stroke-card); }
.mcard .head { display:flex; align-items:center; justify-content:space-between; }
.mcard .glyph { font-size:38px; line-height:1; display:inline-block; transform-origin:center bottom; }
@keyframes glyph-wiggle { 0%{transform:scale(1) rotate(0)} 28%{transform:scale(1.2) rotate(-11deg)}
  52%{transform:scale(1.2) rotate(8deg)} 76%{transform:scale(1.2) rotate(-4deg)} 100%{transform:scale(1.2) rotate(0)} }
.mcard:not(.mcard--planned):hover .glyph { animation:glyph-wiggle .55s var(--ease) forwards; }
.mcard h3 { font-family:var(--font-mono); font-size:23px; font-weight:600;
  letter-spacing:-.02em; color:var(--ink); margin:20px 0 0; }
.mcard h3 span { border-bottom:1.5px solid var(--brand); padding-bottom:3px; }
.mcard .stds { margin-top:20px; display:flex; flex-direction:column; gap:6px; }
.mcard .stds .k { font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); letter-spacing:.02em; }
.mcard .std { font-family:var(--font-mono); display:flex; align-items:baseline; gap:8px; }
.mcard .std--main { font-size:19px; font-weight:500; }
.mcard .std--sub  { font-size:13.5px; }
.mcard .std .d { flex-shrink:0; }
.mcard .std--on  { color:var(--ink); } .mcard .std--on .d { color:var(--done); font-size:12px; }
.mcard .std--off { color:var(--ink-faint); } .mcard .std--off .d { font-size:10px; }
.mcard .std .works { font-size:11px; }
.mcard .blurb { color:var(--ink-soft); font-size:15px; line-height:1.55; margin-top:16px; }

/* full features — native <details>, zero JS */
.feat { margin-top:auto; padding-top:18px; }
.feat summary { list-style:none; cursor:pointer; }
.feat summary::-webkit-details-marker { display:none; }
.feat summary .btn { width:100%; }
.feat[open] summary .btn { border-color:var(--ink-soft); }
.feat ul { margin:14px 0 0; padding-left:20px; font-family:var(--font-sans);
  font-size:14px; line-height:1.5; color:var(--ink-soft);
  display:grid; grid-template-columns:1fr 1fr; gap:8px 22px; }
.feat li { break-inside:avoid; }
.feat ul.one-col { grid-template-columns:1fr; }
@media (max-width:480px) { .feat ul { grid-template-columns:1fr; } }

/* ============================ standards strip ============================ */
#standards { padding-top:96px; }
.std-panel { background:var(--surface-glass); border:1px solid var(--stroke-card);
  border-radius:var(--r-card); padding:clamp(28px,4vw,46px); text-align:center; }
.std-panel h2 { font-size:clamp(26px,4.2vw,40px); letter-spacing:-.02em; max-width:24ch; margin:0 auto; }
.std-chip-row { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:18px; }
.stdchip { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono);
  font-size:13.5px; border-radius:var(--r-btn); padding:9px 14px; white-space:nowrap; }
.stdchip--on  { color:var(--ink); border:1px solid var(--stroke-btn); }
.stdchip--off { color:var(--ink-faint); border:1px dashed var(--stroke-card); }
.stdchip .mat { font-size:11.5px; }
.stdchip--on .mat { color:var(--ink-soft); }
.stdchip--off .mat { color:var(--ink-faint); }
.std-div { height:1px; background:var(--stroke-footer); margin:28px auto; max-width:520px; }
.std-panel .lede { color:var(--ink-soft); font-size:15px; max-width:52ch; margin:0 auto; }
@media (max-width:560px) { .stdchip { white-space:normal; } }

/* ============================ pricing ============================ */
.plan { position:relative; display:flex; flex-direction:column; min-height:430px;
  background:var(--surface-glass); border:1px solid var(--stroke-card);
  border-radius:var(--r-card); padding:26px 26px 20px; }
.plan--hi { background:rgba(13,122,243,.10); border-color:var(--brand); }
.plan .pname { font-family:var(--font-mono); font-size:14px; color:var(--ink-soft); }
.plan .pname .dot { color:var(--accent); }
.plan .price { display:flex; align-items:baseline; gap:6px; margin:12px 0 2px; }
.plan .price .amt { font-family:var(--font-mono); font-size:36px; font-weight:600;
  letter-spacing:-.02em; color:var(--ink); }
.plan .subline { min-height:16px; display:block; }
.plan ul { list-style:none; padding:0; margin:18px 0 16px; display:flex; flex-direction:column; gap:9px; }
.plan li { display:flex; gap:10px; font-size:13.5px; line-height:1.45; color:var(--ink-soft); }
.plan li .tick { color:var(--done); font-family:var(--font-mono); flex-shrink:0; }
.plan li.off { color:var(--ink-faint); }
.plan li.off .tick { color:var(--ink-faint); }
.plan .why { color:var(--ink-faint); font-size:12.5px; line-height:1.5; margin:0 0 14px; }
.plan .tail { margin-top:auto; }
.plan .footnote { font-family:var(--font-mono); font-size:11px; line-height:1.55;
  color:var(--ink-faint); letter-spacing:.02em; margin-top:10px; }

/* Pro monthly / annual — a CSS-only toggle (two radios inside the card) */
.bill-row { display:flex; align-items:center; gap:8px; margin-top:12px; }
.bill-word { font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); cursor:pointer;
  background:none; border:none; padding:0; }
.bill-word .save { color:var(--done); }
.bill-switch { position:relative; display:inline-block; width:40px; height:22px;
  border-radius:99px; border:1px solid var(--stroke-btn); background:var(--card);
  cursor:pointer; flex-shrink:0; }
.bill-switch .knob { position:absolute; top:2px; width:16px; height:16px; border-radius:99px;
  background:var(--ink); transition:left var(--dur-fast) var(--ease); }
.b-annual, .b-monthly { display:none; }
#bill-a:checked ~ .plan-body .b-annual  { display:block; }
#bill-m:checked ~ .plan-body .b-monthly { display:block; }
#bill-a:checked ~ .plan-body .sw-a { display:inline-block; }
#bill-m:checked ~ .plan-body .sw-m { display:inline-block; }
.sw-a, .sw-m { display:none; }
#bill-a:checked ~ .plan-body .bw-a { color:var(--ink); }
#bill-m:checked ~ .plan-body .bw-m { color:var(--ink); }
#bill-a:checked ~ .plan-body .knob { left:19px; }
#bill-m:checked ~ .plan-body .knob { left:2px; }
#bill-a:focus-visible ~ .plan-body .bill-switch,
#bill-m:focus-visible ~ .plan-body .bill-switch { outline:2px solid var(--accent); outline-offset:2px; }
.plan-body { display:flex; flex-direction:column; flex:1; }

/* ============================ footer — the tool footer, verbatim ============================ */
/* Mirrors streamlit_app/common/branding.py::page_footer(): one centred mono
   block — hairline top rule, © year Sibille, then Terms · Contact — plus the
   landing's honest-scope note beneath in the same faint voice. */
.site-footer { margin:56px 0 2px; padding:12px 0 28px;
  border-top:1px solid var(--stroke-footer); text-align:center;
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint);
  letter-spacing:.02em; }
.site-footer .links { margin-top:6px; color:var(--ink-soft); letter-spacing:0; }
.site-footer .links a { color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid var(--slate); padding-bottom:1px; }
.site-footer .links .sep { opacity:.5; padding:0 9px; }
.site-footer .note { margin:12px auto 0; max-width:560px; color:var(--ink-faint); line-height:1.6; }

.page-end { height:80px; }

/* ---- very small screens: keep the header on one line ---- */
@media (max-width:480px) {
  .topnav nav { gap:10px; }
  .sh-right { gap:10px; }
  .sh-word { font-size:18px; }
  .sh-cta { font-size:13px; padding:6px 10px; }
}
@media (max-width:380px) {
  .sh-word { display:none; }   /* the Si icon remains the home link */
}

/* ============================================================
   TYPEWRITER — per-character reveal, zero JavaScript.
   Each character is a pre-rendered <span class="ch" style="--i:N">; layout
   never shifts (the full text is present from the first frame — the same
   contract as the original TypeIn). A char appears at its own delay via
   steps(1,start). delay+duration is constant per element, so the reveal is
   linear across the text. If animations are unsupported, fill-mode never
   applies and the text is simply visible.
   ============================================================ */
@keyframes chr { from { opacity:0; } to { opacity:1; } }
.tw .ch {
  animation-name:chr;
  animation-timing-function:steps(1,start);
  animation-fill-mode:both;
  animation-duration:calc(var(--T,900ms) - var(--i,0) * var(--s,18ms));
  animation-delay:calc(var(--t0,0ms) + var(--i,0) * var(--s,18ms));
}
/* Sections below the fold: on browsers WITH scroll-driven animations the
   typing is driven by the element's journey up the viewport (types during the
   first 45% of its visible travel). On browsers WITHOUT them (older Safari)
   the same animation simply runs on the load clock and the text is long
   settled by the time it is scrolled to — never blank, never broken. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tw-view { view-timeline:--twv block; }
    .tw-view .ch { animation-timeline:--twv; animation-range:cover 0% cover 45%; }
  }
}

/* ============================================================
   SCROLL-LOCKED CAROUSELS — pure CSS, progressive.
   The tall section + position:sticky pins the viewport (universal CSS); a
   named view-timeline maps the section's pinned scroll span onto the track's
   translateX, so vertical scroll reads as horizontal card travel — right→left
   scrolling down, left→right scrolling up, momentum native. Off-centre cards
   dim exactly like the original. Browsers without scroll-driven animations
   (and users preferring reduced motion) keep the swipeable snap rail.
   ============================================================ */
.lc-hint { display:none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lockc, #modules.lockc, #pricing.lockc {
      view-timeline:--lc block; padding-top:0; scroll-margin-top:0; }
    .lockc--4 { height:calc(100vh + 3 * 55vh); height:calc(100svh + 3 * 55svh); }
    .lockc--3 { height:calc(100vh + 2 * 55vh); height:calc(100svh + 2 * 55svh); }
    .lockc .lc-sticky { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
      display:flex; flex-direction:column; padding-top:78px; }
    .lockc .sec-head { margin-bottom:0; padding:8px 24px 0; }
    .lockc .lc-body { flex:1; min-height:0; display:flex; align-items:stretch; }
    .lockc .lc-track { display:flex; align-items:center; gap:18px; height:100%;
      overflow:visible; scroll-snap-type:none; padding:0; margin:0; max-width:none;
      will-change:transform;
      --cw:min(400px, 80vw);
      --lead:max(calc((100vw - var(--cw)) / 2), 16px);
      animation-name:lc-slide; animation-timing-function:linear;
      animation-fill-mode:both;
      animation-duration:1ms; animation-duration:auto;
      animation-timeline:--lc; animation-range:contain 0% contain 100%; }
    .lockc--4 .lc-track { --shift:calc(var(--lead) - 3 * (var(--cw) + 18px)); }
    .lockc--3 .lc-track { --shift:calc(var(--lead) - 2 * (var(--cw) + 18px)); }
    .lockc .lc-track > * { flex:0 0 var(--cw); width:var(--cw);
      height:min(660px, calc(100% - 16px)); min-height:430px; overflow-y:auto;
      animation-timing-function:linear; animation-fill-mode:both;
      animation-duration:1ms; animation-duration:auto;
      animation-timeline:--lc; animation-range:contain 0% contain 100%; }
    /* off-centre dimming — card i is brightest when progress = i/(N-1) */
    .lockc--4 .lc-track > :nth-child(1) { animation-name:lc4-0; }
    .lockc--4 .lc-track > :nth-child(2) { animation-name:lc4-1; }
    .lockc--4 .lc-track > :nth-child(3) { animation-name:lc4-2; }
    .lockc--4 .lc-track > :nth-child(4) { animation-name:lc4-3; }
    .lockc--3 .lc-track > :nth-child(1) { animation-name:lc3-0; }
    .lockc--3 .lc-track > :nth-child(2) { animation-name:lc3-1; }
    .lockc--3 .lc-track > :nth-child(3) { animation-name:lc3-2; }
    .lockc .lc-hint { display:block; text-align:center; padding-bottom:14px; }
    .lockc .rail-hint { display:none; }
    @media (max-height:620px) { .lockc .lc-track > * { min-height:0; } }
    @media (max-height:700px), (max-width:480px) { .lockc .lc-lede { display:none; } }
  }
}
@keyframes lc-slide { from { transform:translate3d(var(--lead),0,0); }
                      to   { transform:translate3d(var(--shift),0,0); } }
@keyframes lc4-0 { 0%{opacity:1}  33.333%{opacity:.6} 100%{opacity:.6} }
@keyframes lc4-1 { 0%{opacity:.6} 33.333%{opacity:1}  66.667%{opacity:.6} 100%{opacity:.6} }
@keyframes lc4-2 { 0%{opacity:.6} 33.333%{opacity:.6} 66.667%{opacity:1}  100%{opacity:.6} }
@keyframes lc4-3 { 0%{opacity:.6} 66.667%{opacity:.6} 100%{opacity:1} }
@keyframes lc3-0 { 0%{opacity:1}  50%{opacity:.6} 100%{opacity:.6} }
@keyframes lc3-1 { 0%{opacity:.6} 50%{opacity:1}  100%{opacity:.6} }
@keyframes lc3-2 { 0%{opacity:.6} 50%{opacity:.6} 100%{opacity:1} }

.hero-h1 { margin-top:28px; }