/* ---------- page chrome, the channel-blueprint idea: the phone is a 390-wide screen at the top of a plain graphite backdrop, the full window height,
   no frame (no radius, no shadow); on a real phone (≤430px) it is as wide as the viewport. Same values as v1-new-redesign/index.html. ---------- */
html,body{height:100%}
body{margin:0;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;background:#0B0A0B}
#phone{margin:0;height:100dvh}
@media (max-width:430px){body{min-height:100dvh;background:#0C0A0B}#phone{width:100%}}

/* ---------- link resets: several controls that were <button data-act> in the one-file version are real <a href> pages here,
   so they need the anchor defaults (blue, underline) turned off; cosma.css itself only resets <button> ---------- */
a.btn,a.opt,a.pcard,a.pill,a.seg,a.price,a.lang{text-decoration:none;color:inherit;cursor:pointer}
/* .scale .seg has no display of its own in cosma.css — a <button> centres its one line of text by
   itself (the browser's default button rendering), a plain <a> does not and sits at the top instead,
   so the emoji looked shifted upward. Centred explicitly here, only for the anchor version. */
a.seg{display:flex;align-items:center;justify-content:center}

/* ---------- funnel-specific additions (kept tiny; everything else is cosma.css) ---------- */
/* every page plays the same arrival on load — a real page navigation can't reliably tell forward from back, so unlike the
   one-file version there is no separate "backward" variant; the browser's own Back button is what makes going back feel right */
.screen{display:flex;flex-direction:column;flex:1;min-height:0;animation:screen-in .5s cubic-bezier(.16,1,.3,1)}
@keyframes screen-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.stats.two{grid-template-columns:1fr 1fr}
.content.welcome .cap{margin-top:12px}
.statchips.wrap{flex-wrap:wrap}
.modal .q .spark{display:block;font-size:28px;margin-bottom:8px}
.modal .btns .btn{flex:1}
.modal.bottom{bottom:calc(24px + var(--kb,0px))}
.field-hint{display:none;margin:0;font-size:13px;line-height:1.5;color:var(--muted);text-align:left}
.field-hint.on{display:block}
.field-hint b{font-weight:600;text-decoration:underline;cursor:pointer;color:var(--accent)}
.stack16 .field-hint{margin-top:8px}
.dob-sum{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
/* opt-in per screen: pins a short question block to the bottom of .content (right above .foot) instead of the top */
.content.bottom{justify-content:flex-end}
/* single/scale/photo questions have no .foot at all (tapping an option advances immediately) — without this,
   "bottom" would glue them to the very edge of the screen. 96px approximates a .foot bar's own height
   (16 padding + 56 button + 24 padding), so the block sits at the same height a Continue button would leave it at */
.content.bottom.gap-foot{padding-bottom:96px}
/* single-choice rows (row(id,o,"radio",...)) don't get the circle indicator — tapping a row picks it and
   advances right away, so a radio dot never has anything to communicate; multi-select (.ind.check, goals) keeps its box */
.opt .ind.radio{display:none}
@media (prefers-reduced-motion:reduce){.screen{animation:none}.hdr .prog .fill,.bfill{transition:none}}

/* ---------- SPA screens (scripts/spa.js): the old screen fades up and out while the next page is fetched, and going Back
   now plays the arrival the other way round — the router knows the direction a plain page load never did ---------- */
.screen.spa-out{opacity:0;transform:translateY(-12px);transition:opacity .14s ease-in,transform .14s ease-in;pointer-events:none}
html.spa-back .screen{animation-name:screen-back}
@keyframes screen-back{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen.spa-out{transition:none}}

/* ---------- paywall checkout: FunnelFox's default skin, repainted in the funnel's tokens. The skin ships a white card with black text
   and never sets an input colour, so without this the email field inherited --ink and typed white on white. The card number, expiry and
   CVV are Primer iframes this CSS cannot reach, and the SDK hard-codes their look (black text, 36px, a 1px grey ring) whatever `style`
   the checkout is given — so the iframe itself is inverted (black text turns light, the transparent field stays transparent, the red
   error text stays red after the hue turn) and clipped by 4px to drop the ring and its rounded corners, and our own field box is drawn around it.
   Selectors are scoped to #ff-checkout (an id) so they outrank the skin's own stylesheet, which it injects after ours. ---------- */
.ff-checkout{position:relative;min-height:240px;text-align:left}
#ff-checkout .ff-skin-default{max-width:none;color:var(--ink);font-family:var(--font)}
#ff-checkout .ff-payment-method-card{background:var(--surface);border:1.5px solid var(--hairline);border-radius:var(--r-card);box-shadow:none}
#ff-checkout .ff-payment-method-radio{background:transparent;border-color:var(--ind)}
#ff-checkout .ff-payment-method-radio:checked{border-color:var(--action);background:transparent}
#ff-checkout .ff-payment-method-radio:checked::after{background:var(--action)}
#ff-checkout .ff-card-form-label{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:6px}
#ff-checkout #cardNumberInput,#ff-checkout #expiryInput,#ff-checkout #cvvInput,#ff-checkout .ff-card-form-text-input{
  height:52px;border-radius:var(--r-field);border:1.5px solid var(--field);background:rgba(255,255,255,.04);transition:border-color .15s,box-shadow .15s}
#ff-checkout #cardNumberInput,#ff-checkout #expiryInput,#ff-checkout #cvvInput{position:relative;display:flex;align-items:center;padding:0 6px}
#ff-checkout #cardNumberInput iframe,#ff-checkout #expiryInput iframe,#ff-checkout #cvvInput iframe{filter:invert(1) hue-rotate(180deg);clip-path:inset(4px);color-scheme:light}
#ff-checkout #cardNumberInput:has(+ .errorContainer:not(:empty)),#ff-checkout #expiryInput:has(+ .errorContainer:not(:empty)),#ff-checkout #cvvInput:has(+ .errorContainer:not(:empty)){border-color:var(--err)}
#ff-checkout #cvvInput svg{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px}
#ff-checkout .ff-card-form-text-input{padding:0 16px;font-size:16px;font-family:var(--font);color:var(--ink);caret-color:var(--action);margin:0 0 4px}
#ff-checkout .ff-card-form-text-input::placeholder{color:var(--faded)}
#ff-checkout .ff-card-form-text-input:focus,#ff-checkout #cardNumberInput:focus-within,#ff-checkout #expiryInput:focus-within,#ff-checkout #cvvInput:focus-within{
  border-color:var(--action);box-shadow:0 0 0 3px rgba(78,208,196,.16)}
#ff-checkout .ff-card-form-text-input.error{border-color:var(--err)}
#ff-checkout .ff-card-form-select{appearance:none;-webkit-appearance:none}
#ff-checkout .ff-card-form-select option{background:var(--surface-solid);color:var(--ink)}
#ff-checkout .ff-select-arrow{border-color:var(--muted)}
#ff-checkout #cvvInput svg path{fill:var(--muted)}
#ff-checkout .errorContainer:not(:empty){color:var(--err);font-size:13px;line-height:1.4;margin:4px 0 8px}
#ff-checkout .payment-errors-container{background:var(--err-bg);color:var(--err);border-radius:var(--r-chip);font-size:14px}
#ff-checkout .ff-card-form-submit-button{height:56px;padding:0;border-radius:var(--r-btn);background:var(--action);color:var(--action-ink);
  font-family:var(--font);font-size:17px;font-weight:600;letter-spacing:.01em;box-shadow:var(--glow-btn);margin:16px 0 12px;transition:transform .12s ease-out,filter .15s}
#ff-checkout .ff-card-form-submit-button:active{transform:scale(.98);filter:brightness(.88)}
#ff-checkout .ff-card-form-submit-button:disabled{opacity:.4;box-shadow:none}
#ff-checkout .ff-security-message{color:var(--muted);font-size:13px}
#ff-checkout .loader-container{background:var(--modal);border-radius:var(--r-card)}
#ff-checkout .loader{border-color:var(--action);border-top-color:transparent}
#ff-checkout .ff-payment-feature span{color:var(--body)}
#ff-checkout .success{color:var(--ink)}
.ff-note{margin:0;padding:24px 16px;font-size:14px;line-height:1.5;color:var(--muted);text-align:center}
.paid{padding:24px 16px;border-radius:16px;background:var(--surface);text-align:center}
.paid .bigemoji{margin:0 0 8px;font-size:40px}
.paid .t{margin:0;font-size:18px;font-weight:700;color:var(--ink)}
.paid .d{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}