/* ritcha.ai — base: type, chrome, form, cards, pages, and the motion system.
   Shared by every landing direction (A/B/C) and every secondary page.

   MOTION RULES (engineering.md §3.2–3.4, bar items 6–7):
   - Every element's BASE style is its final state. Before-states exist only under
     `html.motion`, which js/head.js sets when JS runs AND prefers-reduced-motion is
     no-preference. JS off or reduce → no class → everything drawn, nothing pinned.
   - Only transform and opacity animate. The one exception is the registered number --p
     (a scroll progress 0→1), which drives transforms/opacity through calc() and never
     touches layout. Flagged for the Engineer's CSS lint in the round .md.
   - Pinned sections reserve their height in CSS (--pin-h), never measured by JS.
   - Two engines, one look: `html.sda` (CSS scroll-driven animations: Safari 26, Chromium)
     or the js/motion.js fallback (IntersectionObserver + one rAF scroll handler). */

@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--txt);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:var(--tint);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--tint);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--card);color:var(--fg);padding:10px 14px;border-radius:10px}
.skip:focus{left:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
.fig,h1,h2,.display{font-family:var(--fig);font-weight:var(--figw);letter-spacing:var(--figls);font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(40px,6.2vw,84px);letter-spacing:-.03em}
h2{font-size:clamp(30px,4.2vw,56px);letter-spacing:-.025em}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
p{margin:0;text-wrap:pretty}
.lede{font-size:clamp(18px,1.6vw,21px);color:var(--sub);line-height:1.5;max-width:34em}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tint)}
.sub{color:var(--sub)}
.small{font-size:14px;line-height:1.45}
.pos{color:var(--pos)} .neg{color:var(--neg)} .low{color:var(--low)}

/* ---------- layout ---------- */
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
.narrow{width:min(760px,100% - 32px);margin-inline:auto}
.sec{padding-block:clamp(72px,10vw,144px)}
.sec.tight{padding-block:clamp(48px,6vw,88px)}
.band{background:var(--bg2)}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px}
@media (min-width:900px){ body{font-size:18px} }

/* ---------- chrome ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--glass);-webkit-backdrop-filter:saturate(1.6) blur(18px);
  backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid var(--glassb)}
.top .wrap{display:flex;align-items:center;gap:16px;height:60px}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;font-family:var(--fig);
  font-weight:800;font-size:20px;letter-spacing:-.02em}
.brand img{width:30px;height:30px;border-radius:22.5%;flex:none;box-shadow:0 0 0 1px rgba(79,224,160,.45)}
.foot .brand img{width:26px;height:26px}
.top nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.top nav a{color:var(--fg);text-decoration:none;font-size:15px;font-weight:600;padding:8px 12px;border-radius:999px}
.top nav a:hover{background:var(--fill)}
.top nav a.cta{background:var(--tint);color:var(--tintfg)}
.top nav a.cta:hover{background:var(--tint);filter:brightness(1.08)}
@media (max-width:599px){ .top nav a:not(.cta){display:none} .top nav a.cta{font-size:14px;padding:8px 14px} }

.foot{border-top:1px solid var(--line);padding-block:40px 56px;color:var(--sub);font-size:14px}
.foot .wrap{display:grid;gap:20px}
.foot .row{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.foot a{color:var(--fg);text-decoration:none;font-weight:600}
.foot a:hover{text-decoration:underline}
.foot .legal{max-width:60em;line-height:1.55}
.ph{background:var(--warnsoft);color:var(--fg);border:1px dashed var(--warn);border-radius:6px;padding:0 6px;
  font-weight:700;white-space:nowrap}
@media (min-width:900px){ .foot .wrap{grid-template-columns:1fr auto;align-items:start} }

/* ---------- buttons, store pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:17px;font-weight:700;
  height:52px;padding:0 24px;border-radius:999px;border:0;background:var(--tint);color:var(--tintfg);cursor:pointer;
  text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:var(--fill);color:var(--fg)}
.stores{display:flex;flex-wrap:wrap;gap:10px}
.store{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 16px 0 12px;border-radius:14px;
  border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:14px;line-height:1.15}
.store svg{width:22px;height:22px;flex:none;color:var(--fg)}
.store b{display:block;font-size:15px}
.store span{color:var(--sub);font-size:12px;font-weight:600}

/* ---------- waitlist form (all states drawn; engineering.md §3.7) ---------- */
.wl{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:520px}
.wl .row{display:flex;gap:8px;background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:5px}
.wl .row:focus-within{border-color:var(--tint)}
.wl input[type=email]{flex:1;min-width:0;width:100%;font:inherit;font-size:17px;color:var(--fg);background:transparent;border:0;
  padding:0 8px 0 16px;outline:none;height:46px}
.wl input::placeholder{color:var(--sub);opacity:1}
.wl .btn{height:46px;padding:0 20px;font-size:16px}
.wl .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}   /* honeypot */
.wl .consent{font-size:13.5px;color:var(--sub);line-height:1.45;padding-inline:8px}
.wl .msg{display:none;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45;padding:12px 16px;border-radius:16px}
.wl .msg svg{width:20px;height:20px;flex:none;margin-top:1px}
.wl[data-state="invalid"] .row{border-color:var(--neg)}
.wl[data-state="invalid"] .msg.invalid,
.wl[data-state="rate"] .msg.rate,
.wl[data-state="error"] .msg.error{display:flex}
.wl .msg.invalid{color:var(--neg);padding:2px 8px}
.wl .msg.rate,.wl .msg.error{background:var(--warnsoft);color:var(--fg)}
.wl .msg.rate svg,.wl .msg.error svg{color:var(--warn)}
.wl[data-state="sending"] .btn{pointer-events:none;cursor:progress}
.wl .done{display:none}
.wl[data-state="done"] .row,.wl[data-state="done"] .consent{display:none}
.wl[data-state="done"] .done{display:flex;gap:14px;align-items:flex-start;background:var(--soft);border-radius:22px;padding:18px 20px}
.wl .done .tick{width:36px;height:36px;border-radius:50%;background:var(--tint);color:var(--tintfg);display:grid;place-items:center;flex:none}
.wl .done b{display:block;font-size:17px}
.wl .done p{font-size:15px;color:var(--fg);opacity:.86}
.on-ink .wl .row{background:rgba(255,255,255,.08);border-color:rgba(237,244,240,.22)}
.on-ink .wl input{color:var(--inkfg)} .on-ink .wl input::placeholder{color:var(--inksub)}
.on-ink .wl .consent{color:var(--inksub)} .on-ink .wl .consent a{color:var(--mint)}
.on-ink .wl .btn{background:var(--mint);color:var(--ink)}
.on-ink .wl[data-state="done"] .done{background:rgba(79,224,160,.14)} .on-ink .wl .done p,.on-ink .wl .done b{color:var(--inkfg)}
.on-ink .wl .done .tick{background:var(--mint);color:var(--ink)}

/* ---------- tiers ---------- */
.tiers{display:grid;gap:14px}
.tier{padding:26px 24px 24px;display:grid;gap:14px;align-content:start}
.tier .nm{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tier .nm h3{font-family:var(--fig);font-size:28px;font-weight:800;letter-spacing:-.02em}
.tier .when{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sub);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap}
.tier .when.now{color:var(--tint);border-color:var(--tint)}
.tier ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:15.5px;line-height:1.4}
.tier li{display:grid;grid-template-columns:18px 1fr;gap:10px}
.tier li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tint);margin:7px 0 0 4px}
.tier .plus{font-size:14px;color:var(--sub);font-weight:600}
.tier.lead{border-color:var(--tint);box-shadow:0 0 0 1px var(--tint) inset}
.never{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--fg);padding:16px 18px;border-radius:16px;background:var(--fill)}
.never svg{width:20px;height:20px;flex:none;color:var(--tint);margin-top:2px}
@media (min-width:900px){ .tiers{grid-template-columns:repeat(3,1fr)} }

/* ---------- the promise ---------- */
.promise{font-family:var(--fig);font-weight:800;letter-spacing:-.025em;line-height:1.1;font-size:clamp(32px,5vw,68px)}
.promise .q{color:var(--tint)}

/* ---------- chart (forecast; drawn the app's way: hollow P0, filled low dot, dashed drop) ---------- */
.fc{position:relative}
.fc svg{width:100%;height:auto;overflow:visible}
.fc .ln{fill:none;stroke:var(--chart);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fc .ar{fill:var(--area)}
.fc .p0{fill:var(--card);stroke:var(--chart);stroke-width:2.4}
.fc .lowd{fill:var(--low);stroke:var(--card);stroke-width:2.5}
.fc .drop{stroke:var(--low);stroke-width:1.4;stroke-dasharray:2 3}
.fc .grid{stroke:var(--line);stroke-width:1}
.fc text{font-family:var(--txt);font-size:11px;font-weight:500;fill:var(--sub)}
.fc text.lw{fill:var(--low);font-weight:700}
.fc .curtain{position:absolute;inset:-6px -8px -2px auto;width:calc(100% + 8px);background:var(--card);transform-origin:100% 50%;
  transform:scaleX(0);pointer-events:none}

/* ---------- prose (privacy, support) ---------- */
.prose{font-size:17px;line-height:1.65}
.prose h2{font-size:clamp(24px,2.6vw,32px);margin:56px 0 14px;scroll-margin-top:84px}
.prose h3{margin:28px 0 8px}
.prose p,.prose ul{margin:0 0 14px}
.prose ul{padding-left:1.2em}
.prose li{margin:4px 0}
.prose .k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--fill);padding:1px 6px;border-radius:6px}

/* ---------- FAQ (details: works with JS off) ---------- */
.faq{display:grid;gap:10px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:18px}
.faq summary{list-style:none;cursor:pointer;padding:18px 54px 18px 20px;font-weight:700;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;border-right:2.5px solid var(--sub);
  border-bottom:2.5px solid var(--sub);transform:translateY(-70%) rotate(45deg)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details>div{padding:0 20px 20px;color:var(--fg);opacity:.9;font-size:16px;line-height:1.55}

/* ---------- notice pages (404, confirm, unsubscribe, the no-JS reply) ---------- */
.notice{min-height:calc(100svh - 61px - 140px);display:grid;place-items:center;padding:48px 16px}
.notice .box{width:min(520px,100%);text-align:center;display:grid;gap:16px;justify-items:center}
.notice .ico{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;background:var(--soft);color:var(--tint)}
.notice .ico svg{width:34px;height:34px}
.notice .ico.warn{background:var(--warnsoft);color:var(--warn)}
.notice h1{font-size:clamp(34px,5vw,52px)}
.notice .big{font-family:var(--fig);font-weight:800;font-size:clamp(96px,16vw,180px);line-height:.9;letter-spacing:-.05em;color:var(--tint)}

/* =====================================================================================
   MOTION — one engine: CSS scroll-driven animations (Safari 26+, Chromium 115+).
   `html.motion` is set by js/head.js only when JS runs AND reduced motion is not asked AND
   CSS.supports('animation-timeline: view()'). Everyone else (JS off, reduce, Firefox stable,
   iOS < 26) gets the finished static page. No JS animation fallback (Strategist, 2026-10-17:
   input/github-design-research.md §4; Motion is the named fallback library only if needed).
   ===================================================================================== */
@keyframes rv-in{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
html.motion .rv{animation:rv-in linear both;animation-timeline:view();animation-range:entry 4% cover 24%}
html.motion .rv.d1{animation-range:entry 9% cover 29%}
html.motion .rv.d2{animation-range:entry 14% cover 34%}
html.motion .rv.d3{animation-range:entry 19% cover 39%}

/* .pin carries --p, a 0→1 scroll progress that its children turn into transform/opacity.
   Phone (<900px): NO pinning. --p runs while the block crosses the screen (entry 25% → cover 55%),
   so the chart finishes drawing before the thumb passes it.
   Desktop (≥900px): the block is --pin-h tall (CSS, never JS-measured) and its .stage sticks;
   --p runs over the stuck range. */
.pin{--p:1}
@keyframes pin-p{from{--p:0}to{--p:1}}
html.motion .pin{animation:pin-p linear both;animation-timeline:view();animation-range:entry 25% cover 55%}
@media (min-width:900px){
  html.motion .pin{height:var(--pin-h,300svh);position:relative;animation-range:contain 0% contain 100%}
  html.motion .pin>.stage{position:sticky;top:0;height:100svh;overflow:hidden}
}
html.motion .fc .curtain{transform:scaleX(calc(1 - var(--draw,var(--p))))}

/* belt and braces (head.js already withholds .motion under reduce) */
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} }

/* share line (forms' done state, /waitlist/) and the post-confirm question (/confirm/done) */
.share{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:15px;line-height:1.5}
.share a{color:inherit;font-weight:700;text-decoration-thickness:2px;text-underline-offset:3px}
.share .copy{margin-left:8px;height:32px;padding:0 12px;border:0;border-radius:999px;background:var(--fill);color:var(--fg);font:700 14px/1 var(--txt);cursor:pointer;vertical-align:middle}
.ask{width:100%;display:grid;gap:12px;margin-top:8px}
.ask fieldset{border:0;margin:0;padding:0;min-width:0}
.ask legend{display:grid;gap:4px;width:100%;font-family:var(--fig);font-weight:700;font-size:21px;margin-bottom:12px}
.ask-o{display:grid;gap:10px}
.ask-o .btn{width:100%;min-height:52px;padding:12px 16px;white-space:normal;line-height:1.25;background:var(--card);border:1.5px solid var(--tint);color:var(--fg)}
@media (min-width:600px){ .ask-o{grid-template-columns:1fr 1fr} }
.ask-skip{color:var(--sub);font-weight:600;padding:10px 14px}