/* ============================================================================
   cosma.css — Cosma Flat: a dark, flat design system for the Cosma quiz funnels.
   A graphite canvas with two soft glows (gold and lilac) and a little star dust; glass surfaces; mint = the action, lemon = the accent.
   Manrope for everything. 390×844 mobile screens, built for thumbs. Same class names as the light and the Horizon systems.
   Every screen lives inside .phone; markup lifted out of components.html must keep that context.
   Sections: tokens · phone skeleton + atmosphere · header · buttons · type · rhythm · options · scale · inputs · blocks · media capture ·
   progress · overlays · paywall · touch + hover · motion · small phones · scan progress
   ============================================================================ */

/* ---------- tokens (the only place where a colour, a radius or a size is decided) ---------- */
:root{
  color-scheme:dark;
  /* canvas */
  --bg:#0C0A0B;                 /* warm graphite: the "sky" */
  /* atmosphere. Two glows on the canvas (gold in front, lilac behind: gold higher, lilac lower), a shade that darkens the bottom edge,
     and star dust that is switched off behind the header and the docked button. Values are the final settings. */
  --gold:#F2B233; --lilac:#8F86E8;
  --glow-gold:radial-gradient(ellipse 54% 40.8% at 50% 35%,rgba(242,178,51,.20) 0%,rgba(242,178,51,.084) 48%,transparent 82%);
  --glow-lilac:radial-gradient(ellipse 63% 47.6% at 50% 60%,rgba(143,134,232,.30) 0%,rgba(143,134,232,.126) 48%,transparent 82%);
  --shade:linear-gradient(180deg,transparent 0%,transparent 68%,rgba(0,0,0,.6) 100%);
  --dust:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='844' viewBox='0 0 390 844'%3E%3Ccircle cx='112.7' cy='423.8' r='1.44' fill='%23CFEFE8' fill-opacity='0.24'/%3E%3Ccircle cx='35.5' cy='342.7' r='1.40' fill='%23CFEFE8' fill-opacity='0.20'/%3E%3Ccircle cx='103.4' cy='653.7' r='1.12' fill='%23FFFFFF' fill-opacity='0.29'/%3E%3Ccircle cx='194.3' cy='828.6' r='1.21' fill='%23E6FBF5' fill-opacity='0.37'/%3E%3Ccircle cx='220.7' cy='175.7' r='1.63' fill='%23E6FBF5' fill-opacity='0.27'/%3E%3Ccircle cx='306.4' cy='740.3' r='1.67' fill='%23E6FBF5' fill-opacity='0.18'/%3E%3Ccircle cx='332.6' cy='674.2' r='1.66' fill='%23E6FBF5' fill-opacity='0.37'/%3E%3Ccircle cx='327.5' cy='425.9' r='1.64' fill='%23CFEFE8' fill-opacity='0.20'/%3E%3Ccircle cx='301.4' cy='75.8' r='1.68' fill='%23E6FBF5' fill-opacity='0.29'/%3E%3Ccircle cx='172.2' cy='644.1' r='1.64' fill='%23E6FBF5' fill-opacity='0.25'/%3E%3Ccircle cx='121.6' cy='54.2' r='1.17' fill='%23CFEFE8' fill-opacity='0.26'/%3E%3Ccircle cx='30.1' cy='603.3' r='1.15' fill='%23CFEFE8' fill-opacity='0.21'/%3E%3Ccircle cx='299.5' cy='84.8' r='1.24' fill='%23E6FBF5' fill-opacity='0.34'/%3E%3Ccircle cx='213.0' cy='256.7' r='1.33' fill='%23FFFFFF' fill-opacity='0.32'/%3E%3Ccircle cx='38.3' cy='35.7' r='1.56' fill='%23E6FBF5' fill-opacity='0.37'/%3E%3Ccircle cx='343.6' cy='451.0' r='1.43' fill='%23E6FBF5' fill-opacity='0.31'/%3E%3Ccircle cx='129.1' cy='196.7' r='1.13' fill='%23FFFFFF' fill-opacity='0.22'/%3E%3Ccircle cx='267.8' cy='652.5' r='1.35' fill='%23CFEFE8' fill-opacity='0.30'/%3E%3Ccircle cx='248.8' cy='136.7' r='1.70' fill='%23E6FBF5' fill-opacity='0.33'/%3E%3Ccircle cx='205.7' cy='815.1' r='1.50' fill='%23CFEFE8' fill-opacity='0.21'/%3E%3Ccircle cx='151.5' cy='631.8' r='1.17' fill='%23CFEFE8' fill-opacity='0.23'/%3E%3Ccircle cx='149.2' cy='170.8' r='1.56' fill='%23FFFFFF' fill-opacity='0.21'/%3E%3Ccircle cx='342.2' cy='397.8' r='1.20' fill='%23CFEFE8' fill-opacity='0.24'/%3E%3Ccircle cx='204.5' cy='599.9' r='1.26' fill='%23E6FBF5' fill-opacity='0.20'/%3E%3Ccircle cx='199.6' cy='453.4' r='1.53' fill='%23FFFFFF' fill-opacity='0.28'/%3E%3Ccircle cx='242.2' cy='272.5' r='1.42' fill='%23CFEFE8' fill-opacity='0.32'/%3E%3Ccircle cx='181.8' cy='648.0' r='1.13' fill='%23E6FBF5' fill-opacity='0.19'/%3E%3Ccircle cx='87.7' cy='240.1' r='1.41' fill='%23FFFFFF' fill-opacity='0.20'/%3E%3Ccircle cx='196.2' cy='309.3' r='1.58' fill='%23FFFFFF' fill-opacity='0.18'/%3E%3Ccircle cx='9.2' cy='759.4' r='1.41' fill='%23E6FBF5' fill-opacity='0.22'/%3E%3Ccircle cx='246.4' cy='545.4' r='1.45' fill='%23CFEFE8' fill-opacity='0.21'/%3E%3Ccircle cx='64.5' cy='30.5' r='1.10' fill='%23FFFFFF' fill-opacity='0.30'/%3E%3Ccircle cx='206.7' cy='194.2' r='1.16' fill='%23CFEFE8' fill-opacity='0.20'/%3E%3Ccircle cx='247.8' cy='825.1' r='1.61' fill='%23E6FBF5' fill-opacity='0.35'/%3E%3Ccircle cx='342.5' cy='118.8' r='1.23' fill='%23FFFFFF' fill-opacity='0.35'/%3E%3Ccircle cx='85.7' cy='653.1' r='1.12' fill='%23CFEFE8' fill-opacity='0.23'/%3E%3Ccircle cx='322.8' cy='601.9' r='1.62' fill='%23E6FBF5' fill-opacity='0.28'/%3E%3Ccircle cx='359.0' cy='169.9' r='1.43' fill='%23E6FBF5' fill-opacity='0.20'/%3E%3Ccircle cx='73.2' cy='58.8' r='1.67' fill='%23E6FBF5' fill-opacity='0.33'/%3E%3Ccircle cx='33.7' cy='686.9' r='1.58' fill='%23E6FBF5' fill-opacity='0.32'/%3E%3Ccircle cx='197.6' cy='292.1' r='1.68' fill='%23E6FBF5' fill-opacity='0.32'/%3E%3Ccircle cx='129.1' cy='348.5' r='1.65' fill='%23E6FBF5' fill-opacity='0.37'/%3E%3Ccircle cx='96.4' cy='487.0' r='1.22' fill='%23CFEFE8' fill-opacity='0.35'/%3E%3Ccircle cx='234.4' cy='390.9' r='1.12' fill='%23E6FBF5' fill-opacity='0.38'/%3E%3Ccircle cx='316.9' cy='705.6' r='1.13' fill='%23E6FBF5' fill-opacity='0.23'/%3E%3Ccircle cx='16.0' cy='232.2' r='1.30' fill='%23FFFFFF' fill-opacity='0.19'/%3E%3Ccircle cx='121.8' cy='544.2' r='1.47' fill='%23FFFFFF' fill-opacity='0.30'/%3E%3Ccircle cx='269.7' cy='9.2' r='1.29' fill='%23E6FBF5' fill-opacity='0.35'/%3E%3Ccircle cx='325.3' cy='756.5' r='1.19' fill='%23E6FBF5' fill-opacity='0.36'/%3E%3Ccircle cx='152.3' cy='349.3' r='1.11' fill='%23FFFFFF' fill-opacity='0.31'/%3E%3C/svg%3E");
  /* brand: mint = every action and every selection, lemon = the accent (key words, numbers, stars, links, chip icons) */
  --action:#4ED0C4; --action-ink:#0B1F1E;
  --accent:#F5FB62;
  /* text */
  --ink:#EDF4EF; --body:#C5D3CB; --muted:#A6BCB1; --faded:#A5BAAF;
  /* glass surfaces: white at low alpha over the canvas, so every glow shows through */
  --surface:rgba(255,255,255,.06);          /* option rows, cards, the wheel */
  --surface-hover:rgba(255,255,255,.11);    /* one tone lighter: hover and press */
  --surface-solid:#1B1819;                  /* opaque: the email suggestions, the preview card */
  --modal:#161314;                          /* opaque: modal cards */
  --chip:rgba(255,255,255,.09); --disc:rgba(255,255,255,.10); --track:rgba(255,255,255,.14); --ind:rgba(255,255,255,.38);
  --line:rgba(255,255,255,.10); --hairline:rgba(255,255,255,.12); --field:rgba(255,255,255,.16); --border-dash:rgba(255,255,255,.28);
  --sel:rgba(78,208,196,.15);               /* selected fill; the border is --action */
  --tint:rgba(78,208,196,.10);              /* a filled text field */
  /* states */
  --ok:#7BE7BE; --ok-soft:rgba(94,224,176,.14); --privacy-bg:rgba(94,224,176,.07); --privacy-border:rgba(94,224,176,.22);
  --err:#FF8A94; --err-bg:rgba(255,120,135,.16);
  --overlay:rgba(6,5,6,.72);
  --hero-bg:#CED7FB;                        /* behind the mirror illustration */
  /* effects */
  --glow-btn:0 8px 28px -6px rgba(78,208,196,.65); --lift:0 10px 32px -6px rgba(78,208,196,.80); --sh-modal:0 16px 48px rgba(0,0,0,.5);
  /* a dark check drawn on a 24×24 grid and centred by its bounding box (x 7.2–16.8, y 8.7–15.3): the multi-choice box and the done steps */
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.2 12.2l3.1 3.1 6.5-6.6' fill='none' stroke='%230B1F1E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* type */
  --font:'Manrope',system-ui,-apple-system,sans-serif;
  /* shape: 20 option rows and photo cards · 18 buttons, grid options, pills, scale, list rows · 16 fields and small cards · 24 hero, camera, modals · 12 / 10 small controls · tiles 11 / 9 */
  --r-opt:20px; --r-btn:18px; --r-field:16px; --r-card:20px; --r-hero:24px; --r-lang:12px; --r-chip:10px; --r-tile:11px; --r-tile-sm:9px;
  /* spacing scale (4px base): 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 */
  --pad:20px; --w:390px; --h:844px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button{font-family:inherit;cursor:pointer;touch-action:manipulation}
button:focus{outline:0}
button:focus-visible{outline:2px solid var(--action);outline-offset:2px}

/* ---------- phone skeleton + atmosphere ---------- */
/* Canvas, from the top layer down: the bottom shade, the gold glow, the lilac glow, the graphite. Star dust (::before) drifts ~26px over a minute and a half. */
.phone{position:relative;width:var(--w);height:var(--h);overflow:hidden;overflow:clip;display:flex;flex-direction:column;
  background:var(--shade),var(--glow-gold),var(--glow-lilac),var(--bg);
  color:var(--ink);font-family:var(--font);flex:none;text-align:center;-webkit-font-smoothing:antialiased}
/* dust: none behind the header (the top ~75px), fading in below it, none behind the docked button */
.phone::before{content:'';position:absolute;inset:-30px;z-index:0;pointer-events:none;background:var(--dust) 0 0/390px 844px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 104px,#000 210px,#000 calc(100% - 330px),transparent calc(100% - 150px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,transparent 104px,#000 210px,#000 calc(100% - 330px),transparent calc(100% - 150px),transparent 100%);
  animation:drift 90s ease-in-out infinite alternate}
.hdr,.content,.foot{position:relative;z-index:1}
/* the last 24px of a scrolling screen dissolve instead of running into the docked button */
.content{flex:1 1 auto;min-height:0;overflow:auto;overflow-anchor:none;overscroll-behavior-y:contain;padding:32px var(--pad) 24px;display:flex;flex-direction:column;gap:0;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 24px),transparent)}
.content::-webkit-scrollbar{display:none}
.content>*{flex-shrink:0}
/* .center floats the block in the middle; auto margins (not justify-content) so a tall block still scrolls from the top */
.content.center>:first-child{margin-top:auto}
.content.center>:last-child{margin-bottom:auto}
.content.media{padding-left:35px;padding-right:35px}
.spacer{flex:1}
/* the docked action area: no background, the canvas shows through; leaves room for the home indicator */
.foot{flex:none;padding:16px var(--pad) 24px;padding-bottom:max(24px,calc(12px + env(safe-area-inset-bottom)))}
.foot>*+*{margin-top:12px}
.left{text-align:left}

/* welcome: flowing page rhythm — logo 16 proof 24 hero 24 headline 16 chips 32 button 24 languages 16 legal */
.content.welcome{padding-top:24px}
.content.welcome>*+*{margin-top:24px}
.content.welcome .proof{margin-top:16px}
.content.welcome .fchips{margin-top:16px}
.content.welcome .btn{margin-top:32px}
.content.welcome .langs{margin-top:24px}
.content.welcome .legal{margin-top:16px}

/* ---------- header: back · logo · step count, and one progress line under them ---------- */
/* .hdr = a quiz screen (with the count and the line); .hdr.plain = back + logo only (the screens after the quiz) */
.hdr{flex:none;display:grid;grid-template-columns:1fr auto 1fr;grid-auto-rows:auto;align-items:center;row-gap:20px;
  padding:20px var(--pad) 8px;padding-top:calc(20px + env(safe-area-inset-top))}
.hdr.plain{padding-bottom:4px}
.hdr .back{position:relative;justify-self:start;width:24px;height:24px;border:0;background:none;padding:0;font-size:0;color:var(--ink);border-radius:50%;transition:opacity .1s}
.hdr .back::before{content:'';position:absolute;left:8px;top:6px;width:11px;height:11px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;border-radius:1px;transform:rotate(45deg)}
.hdr .back::after{content:'';position:absolute;inset:-10px} /* a 44×44 tap area around the 24px chevron */
.hdr .logo{grid-column:2;gap:7px}
.hdr .logo img{width:22px;height:22px;display:block}
.hdr .wordmark{font-size:17px;letter-spacing:.005em}
.hdr .count{grid-column:3;justify-self:end;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.hdr .prog{grid-column:1/-1;position:relative;height:4px;border-radius:2px;background:var(--track);overflow:hidden}
.hdr .prog .fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--action);transition:width .3s ease}

/* ---------- buttons ---------- */
/* Primary = a mint rectangle with a soft mint glow and a shine that sweeps across every 4 seconds. The shine sits between the fill and the label
   (the button is its own stacking context), so the markup stays <button class="btn">Label</button>. Disabled = the same button at 40%: no glow, no shine. */
.btn{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:56px;border-radius:var(--r-btn);border:0;
  background:var(--action);color:var(--action-ink);font-size:17px;font-weight:600;letter-spacing:.01em;box-shadow:var(--glow-btn);-webkit-user-select:none;user-select:none;
  transition:transform .12s ease-out,filter .15s,box-shadow .2s,opacity .2s}
.btn::after{content:'';position:absolute;z-index:-1;top:-20%;bottom:-20%;left:0;width:26%;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.42) 50%,rgba(255,255,255,0));transform:translateX(-155%) skewX(-22deg);animation:sweep 4.2s ease-in-out 1s infinite both}
.btn.glow{box-shadow:var(--glow-btn)} /* kept for old markup: every primary button glows now */
.btn:not(.off):not(:disabled):active,.btn:not(.off):not(:disabled).press{transform:scale(.98);filter:brightness(.88);transition-duration:.05s}
.btn.off,.btn:disabled{opacity:.4;filter:saturate(.7);box-shadow:none;cursor:default;transform:none}
.btn.off::after,.btn:disabled::after,.btn.secondary::after,.btn.ghost::after,.btn.deep::after{display:none}
.btn.secondary{height:48px;background:transparent;box-shadow:none;border:1.5px solid rgba(78,208,196,.6);color:var(--action);font-size:16px}
.btn.deep{height:48px;background:rgba(78,208,196,.16);box-shadow:none;border:1.5px solid rgba(78,208,196,.7);color:var(--action);font-size:16px}
/* ghost: quiet secondary action on a glass surface, with a 20px line icon — e.g. "upload from gallery" under the camera */
.btn.ghost{height:48px;background:var(--surface);box-shadow:none;color:var(--ink);font-size:16px}
.btn.ghost svg{flex:none}
.content.media .btn.ghost{margin-top:24px}
.link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:none;border:0;padding:0 12px;color:var(--accent);font-size:15px;font-weight:600;border-radius:12px;-webkit-user-select:none;user-select:none}

/* ---------- type ---------- */
/* Scale (px): 12 micro · 13 small · 15 compact · 16 body · 17 button · 18 title · 22 h3 · 26 h1 · 31 display (+ 34 stat number, 42 ring).
   Headlines are Manrope 800 with -.015em. Lemon is the only accent colour in text. */
.display,.h1,.wordmark,.code,.stat .num,.modal .q,.modal .warn,.total .now,.ring text,.statc .v{font-family:var(--font);font-weight:800;font-synthesis:none}
.display{margin:0;font-size:31px;line-height:1.12;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.display .accent{display:block;color:var(--accent)}
.h1{margin:0;font-size:26px;line-height:1.2;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.h1.sm{font-size:22px;line-height:1.25}
.h1.deep{color:var(--ink)}
.h1 .accent{color:var(--accent)}
.h1.blur{filter:blur(7px)}
.sub{margin:0;font-size:16px;line-height:1.5;color:var(--muted)}
.p{margin:0;font-size:16px;line-height:1.55;color:var(--body)}
.cap{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.cap.faded{color:var(--faded)}
.stat{margin:0;font-size:18px;line-height:1.5;font-weight:600;color:var(--ink)}
.stat .num{font-size:34px;color:var(--accent)}
.status{margin:0;font-size:15px;font-weight:600}
.status.ok{color:var(--ok)}.status.err{color:var(--err)}
.wordmark{margin:0;font-size:28px;letter-spacing:.02em;color:var(--ink)}
.logo{display:flex;align-items:center;justify-content:center;gap:8px}
.logo img{width:28px;height:28px}
.code{margin:0;font-size:28px;letter-spacing:.2em;text-indent:.2em;color:var(--accent)}
.helper{margin:0;font-size:13px;line-height:1.45;color:var(--faded)}

/* stacks: the gap between siblings of a column. They sit after the type styles so they beat resets like .h1{margin:0}, and before the margin utilities and the rhythm rules, which are meant to win over them */
.stack>*+*{margin-top:12px}
.stack16>*+*{margin-top:16px}
.stack24>*+*{margin-top:24px}
/* margin utilities: placed after the type styles so they beat resets like .cap{margin:0}; the rhythm rules below are more specific and still win */
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}

/* ---------- vertical rhythm (spacing scale 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40) ----------
   headline → subtitle 12 · headline → paragraph 12 · headline block → first control 32 · picture → headline 24 ·
   siblings in a list 12 · blocks 24 · sections 32 · the last block → docked button 24 (content padding) */
.h1+.sub,.display+.sub{margin-top:12px}
.hero+.h1,.herowrap+.h1,.illu+.h1,.illu+.stat,.dodont+.rows,.h1+.dodont{margin-top:24px}
.h1+.p,.stat+.p{margin-top:12px}
.p+.privacy,.p+.instr,.p+.codebox{margin-top:24px}
.stars+.h1{margin-top:12px}
.h1+.review,.sub+.review{margin-top:24px}
.review+.review{margin-top:12px}
.review+.statchips{margin-top:24px}
.cam+.cap{margin-top:16px}
.btn+.cap{margin-top:12px}
.prices+.helper{margin-top:12px}
.h1+.opts,.h1+.pcards,.h1+.input,.h1+.wheel,.h1+.dates,.h1+.scale,.h1+.bars,.h1+.mt32,.sub+.opts,.sub+.pcards,.sub+.input,.sub+.wheel,.sub+.dates,.sub+.scale,.sub+.mt32{margin-top:32px}

/* ---------- options: a glass rectangle with an emoji tile at one end and a check or a dot at the other ---------- */
.opts{display:flex;flex-direction:column;gap:12px}
.opts.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opt,.pill,.pcard,.price,.lang,.scale .seg{-webkit-user-select:none;user-select:none}
/* 60 tall, radius 20: the emoji tile (40, radius 11) and the indicator (24) sit 10 / 18px from the ends */
.opt{display:flex;align-items:center;gap:12px;width:100%;height:60px;padding:0 18px 0 10px;border-radius:var(--r-opt);
  background:var(--surface);border:1.5px solid var(--hairline);text-align:left;color:var(--ink);
  transition:transform .12s ease-out,box-shadow .15s}
.opt .ico{width:40px;height:40px;border-radius:var(--r-tile);flex:none;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--disc)}
.opt .lbl{flex:1;min-width:0;font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
/* indicator — single choice: a circle, selected = mint with a dark dot. Multi choice: a rounded square, selected = mint with a dark check.
   The dot is a centred radial gradient and the check is an SVG centred by its viewBox, so both sit exactly in the middle.
   The ✓ text in the markup is hidden (font-size 0). */
.opt .ind,.pill .ind{position:relative;width:24px;height:24px;flex:none;border:1.5px solid var(--ind);border-radius:50%;background:transparent;font-size:0;color:transparent}
.opt .ind.check,.pill .ind.check{border-radius:8px}
.opt .ind.check::after,.pill .ind.check::after{content:'';position:absolute;inset:-1.5px;background:var(--check) center/100% 100% no-repeat;opacity:0}
/* ONE way to be selected: a mint tint, a mint border, the indicator turned mint */
.opt.sel,.pill.sel,.pcard.sel,.price.sel,.scale .seg.sel{background:var(--sel);border-color:var(--action)}
.opt.sel .ind,.pill.sel .ind{border-color:transparent;background:radial-gradient(circle closest-side,var(--action-ink) 38%,transparent 42%),var(--action);background-origin:border-box}
.opt.sel .ind.check,.pill.sel .ind.check{background:var(--action);background-origin:border-box}
.opt.sel .ind.check::after,.pill.sel .ind.check::after{opacity:1}
.opts.grid .opt{height:56px;padding:0 12px 0 10px;gap:8px;border-radius:var(--r-btn)}
.opts.grid .opt .ico{width:34px;height:34px;font-size:16px;border-radius:var(--r-tile-sm)}
.opts.grid .opt .lbl{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opts.grid .opt .ind{width:20px;height:20px}
.opts.grid .opt .ind.check{border-radius:7px}
/* pill option: the lighter cousin — no emoji tile, the emoji sits inline */
.pill{display:flex;align-items:center;gap:12px;width:100%;height:56px;padding:0 20px 0 24px;border-radius:var(--r-btn);background:var(--surface);border:1.5px solid var(--hairline);font-size:16px;font-weight:600;text-align:left;color:var(--ink);transition:transform .12s ease-out,box-shadow .15s}
.pill .lbl{flex:1}
.pill .ind{width:22px;height:22px}
.pill .ind.check{border-radius:7px}
/* photo cards: two cards, illustration contained in the upper part, label under it; no overlay. Artwork on a transparent background is expected */
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pcard{display:flex;flex-direction:column;height:208px;border-radius:var(--r-opt);overflow:hidden;border:1.5px solid var(--hairline);padding:16px 12px 0;
  background:var(--surface);color:var(--ink);transition:transform .12s ease-out,box-shadow .15s}
.pcard img{flex:1 1 auto;min-height:0;width:100%;object-fit:contain;object-position:center bottom;display:block;border-radius:14px 14px 0 0}
.pcard .lbl{flex:none;height:48px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:var(--ink)}
.pcard .lbl i{display:none}

/* ---------- scale: five squares in a row; selected = the same mint recipe as every other choice ---------- */
.scale{display:flex;justify-content:space-between;gap:8px}
.scale .seg{flex:none;width:56px;height:56px;border:1.5px solid var(--hairline);border-radius:var(--r-btn);background:var(--surface);font-size:24px;line-height:1;transition:transform .12s ease-out,box-shadow .15s}
.caps{display:flex;justify-content:space-between;margin-top:16px}
.caps .cap{width:72px}
.caps .cap:nth-child(2){flex:1}

/* ---------- inputs ---------- */
/* fields stay ≥16px so iOS never zooms the page on focus */
.input{width:100%;height:56px;border-radius:var(--r-field);border:1.5px solid var(--field);background:rgba(255,255,255,.04);padding:0 16px;font-size:16px;font-family:inherit;color:var(--ink);outline:0;transition:border-color .15s,background .15s,box-shadow .15s}
.input::placeholder{color:var(--faded)}
.input.focus,.input:focus,.input.filled{border-color:var(--action)}
.input.focus,.input:focus{box-shadow:0 0 0 3px rgba(78,208,196,.16)}
.input.filled{background:var(--tint)}
.input.err{border-color:var(--err);background:rgba(255,120,135,.06);box-shadow:none}
.input.err.focus,.input.err:focus{box-shadow:0 0 0 3px rgba(255,138,148,.16)}
/* validation line under a field: hidden until the field carries .err */
.field-err{display:none;margin:0;font-size:13px;line-height:1.45;color:var(--err);text-align:left}
.input.err+.field-err,.input.err+.doms+.field-err{display:block}
.stack16 .field-err,.stack24 .field-err{margin-top:8px}
/* email domain suggestions: a list joined under the field; opens once an @ is typed, closes on an exact domain match */
.doms{display:none;flex-direction:column;background:var(--surface-solid);border:1.5px solid var(--action);border-top:0;border-radius:0 0 var(--r-field) var(--r-field);overflow:hidden;text-align:left}
.doms.on{display:flex}
.stack16 .doms.on,.stack24 .doms.on{margin-top:0}
.input.open{border-color:var(--action);border-bottom-left-radius:0;border-bottom-right-radius:0}
.doms .dom{height:48px;padding:0 16px;border:0;background:none;text-align:left;font-size:15px;color:var(--ink);display:flex;align-items:center;font-family:inherit;touch-action:manipulation}
.doms .dom+.dom{border-top:1px solid var(--line)}
.doms .dom b{font-weight:700;color:var(--ink)}
/* wheel: three scrollable columns, rows snap to the centre band; demo.js fills the lists and marks .sel/.far while scrolling */
.wheel{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;height:216px;padding:8px 12px;border-radius:var(--r-card);background:var(--surface);overflow:hidden}
.wheel::before{content:'';position:absolute;left:8px;right:8px;top:50%;height:40px;transform:translateY(-50%);border-radius:var(--r-card);background:rgba(255,255,255,.09);pointer-events:none}
.wheel .col{position:relative;height:200px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;padding:80px 0;text-align:center;cursor:grab;user-select:none;touch-action:pan-y;
  mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent)}
.wheel .col::-webkit-scrollbar{display:none}
.wheel .col.drag{cursor:grabbing;scroll-snap-type:none}
.wheel .wrow{height:40px;line-height:40px;font-size:20px;color:var(--faded);scroll-snap-align:center;transition:color .15s,opacity .15s}
.wheel .wrow.far{opacity:.45}
.wheel .wrow.sel{color:var(--ink);font-weight:600}
.dates{display:grid;grid-template-columns:82px 82px 1fr;gap:8px}
.dfield{width:100%;height:56px;border-radius:var(--r-field);background:var(--surface);border:0;padding:0;text-align:center;font-family:inherit;font-size:20px;font-weight:600;color:var(--ink);outline:0;transition:box-shadow .15s,background .15s}
.dfield::placeholder{color:var(--faded);font-weight:500}
.dfield:focus{box-shadow:inset 0 0 0 1.5px var(--action);background:var(--tint)}
.prices{display:flex;gap:8px}
.price{flex:1;height:52px;border-radius:var(--r-field);border:1.5px solid var(--hairline);background:var(--surface);font-size:16px;font-weight:600;color:var(--ink);transition:transform .12s ease-out,box-shadow .15s}

/* ---------- blocks ---------- */
.fchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.fchip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 16px;border-radius:var(--r-chip);background:var(--chip);font-size:14px;font-weight:600;color:var(--ink)}
.fchip svg{color:var(--accent)}
.fchips.row{flex-wrap:nowrap}
.fchips.row .fchip{height:32px;padding:0 12px;font-size:13px}
.stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.statc{background:var(--surface);border-radius:var(--r-field);padding:16px 4px}
.statc .v{font-size:22px;line-height:1.1;color:var(--accent)}
.statc .l{font-size:12px;color:var(--muted);margin-top:4px}
.proof{display:flex;align-items:center;justify-content:center;gap:12px}
.avatars{display:flex}
.avatars .av{width:28px;height:28px;border-radius:50%;background:#2B302E;border:2px solid var(--bg);margin-left:-8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--ink)}
.avatars .av:first-child{margin-left:0}
.proof .txt{font-size:13px;font-weight:600;color:var(--body)}
.proof .star{color:var(--accent)}
.badge{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-chip);background:rgba(12,10,11,.72);border:1px solid rgba(255,255,255,.16);font-size:12px;font-weight:700;color:var(--ink)}
.review{border-radius:var(--r-card);padding:20px;background:var(--surface);text-align:left}
.review .who{display:flex;gap:12px;align-items:center}
.review .avatar{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);color:var(--ink);font-weight:700;display:flex;align-items:center;justify-content:center}
.review .name{font-size:15px;font-weight:600}
.review .date{font-size:12px;color:var(--muted)}
.review .quote{margin:12px 0 0;font-size:15px;line-height:1.55;color:var(--body)}
.stars{color:var(--accent);font-size:28px;letter-spacing:2px}
.stars.sm{font-size:14px;letter-spacing:0}
.checks{display:flex;flex-direction:column;gap:12px;text-align:left}
.tick{display:flex;gap:12px;font-size:16px;line-height:1.4}
.tick::before{content:'✓';color:var(--action);font-weight:700}
.rows{display:flex;flex-direction:column;gap:12px}
.irow{display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;border-radius:var(--r-btn);background:var(--surface);font-size:15px;text-align:left}
.privacy{display:flex;gap:12px;padding:16px;border-radius:var(--r-field);background:var(--privacy-bg);border:1px solid var(--privacy-border);font-size:13px;line-height:1.5;color:var(--ok);text-align:left}
.privacy a{color:inherit;text-decoration:underline}
.instr{padding:16px;border-radius:var(--r-field);background:var(--surface);font-size:13px;line-height:1.6;color:var(--ink);text-align:left}
.instr b{display:block;color:var(--muted);font-weight:500}
.hero{width:100%;border-radius:var(--r-hero);object-fit:cover;display:block}
.hero.illu{height:254px;background:var(--hero-bg)}
.herowrap{position:relative}
.herowrap .badge{position:absolute;left:12px;top:12px}
.herowrap .hero{height:240px}
.illu{display:block;margin:0 auto;max-width:300px;border-radius:var(--r-hero)}
.illu.md{max-width:220px}
.illu.icon{max-width:90px}
.dodont{width:100%;border-radius:var(--r-hero);display:block}
.promo{height:200px;border-radius:var(--r-hero);background:var(--surface);display:flex;align-items:center;justify-content:center}
.promo img{width:140px;border-radius:16px}
.codebox{height:64px;border-radius:var(--r-field);background:rgba(255,255,255,.04);border:1px dashed var(--border-dash);display:flex;align-items:center;justify-content:center}
.summary{border-radius:var(--r-card);padding:8px 20px;background:var(--surface);text-align:left}
.summary .srow{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.summary .srow:last-child{border-bottom:0}
.summary .sl{color:var(--muted);font-size:13px}
.summary .sv{font-weight:600;word-spacing:3px}
.langs{display:flex;gap:8px;justify-content:center}
.lang{width:48px;height:40px;border-radius:var(--r-lang);border:1.5px solid var(--hairline);background:var(--surface);font-size:14px;font-weight:600;color:var(--ink);transition:transform .12s ease-out}
.lang.on{background:var(--action);border-color:transparent;color:var(--action-ink)}
.legal{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.legal a{color:var(--accent);text-decoration:underline}
.statchips{display:flex;gap:8px;justify-content:center}
.statchip{height:32px;padding:0 14px;border-radius:var(--r-chip);background:var(--chip);font-size:13px;font-weight:500;color:var(--body);display:flex;align-items:center}

/* ---------- media capture ---------- */
.cam{position:relative;width:320px;height:316px;margin:0 auto;border-radius:var(--r-hero);background:#000;border:2px solid rgba(255,255,255,.18);overflow:hidden}
.cam.ok,.cam.scan{border-color:var(--action)}
.cam.err{border-color:var(--err)}
.cam img{width:100%;height:100%;object-fit:cover;display:block}
.cam .guide{position:absolute;left:50%;top:50%;width:220px;height:290px;transform:translate(-50%,-50%);border:2px dotted rgba(255,255,255,.7);border-radius:50%}
.chip{display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:var(--r-chip);font-size:13px;font-weight:600}
.chip.err{background:var(--err-bg);color:var(--err)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.scan{background:var(--chip);color:var(--ink)}
.bigemoji{margin:0;font-size:56px;line-height:1.2}

/* ---------- progress: the ring, the steps card, the bars ---------- */
.ring{display:block;margin:8px auto 4px;overflow:visible}
.ring .track{stroke:rgba(255,255,255,.10);fill:none}
.ring .fill{stroke:var(--action);fill:none;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .4s ease}
.ring text{font-size:42px;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.ring text tspan{font-family:var(--font);font-size:18px;font-weight:600}
.steps{border-radius:var(--r-card);background:var(--surface);padding:16px 20px;text-align:left}
.step{display:flex;align-items:center;gap:12px;height:40px;font-size:15px;font-weight:500;color:var(--ink)}
.step .dot{width:20px;height:20px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--action-ink)}
.step.done .dot{background:var(--check) center/100% 100% no-repeat,var(--action);font-size:0}
.step.on .dot{border:2px solid var(--action);border-top-color:transparent;animation:spin 1s linear infinite}
.step.todo{color:var(--faded)}
.step.todo .dot{border:1.5px solid var(--ind)}
@keyframes spin{to{transform:rotate(360deg)}}
.bars{text-align:left}
.brow{display:flex;justify-content:space-between;font-size:15px;margin-top:24px}
.h1+.bars .brow:first-child{margin-top:0}
.btrack{height:6px;border-radius:3px;background:var(--track);margin-top:8px}
.bfill{height:100%;border-radius:3px;background:var(--action);transition:width .4s ease}

/* ---------- overlays ---------- */
.content.blurred{filter:blur(8px)}
.dim{position:absolute;inset:0;z-index:5;background:var(--overlay)}
.modal{position:absolute;z-index:6;left:20px;right:20px;top:50%;transform:translateY(-50%);background:var(--modal);border:1px solid rgba(255,255,255,.10);border-radius:var(--r-hero);padding:24px;box-shadow:var(--sh-modal);text-align:center}
.modal.bottom{top:auto;bottom:24px;transform:none}
.modal .q{margin:0 0 20px;font-size:22px;line-height:1.25;letter-spacing:-.015em}
.modal .warn{margin:0 0 12px;font-size:28px;line-height:1.2;letter-spacing:-.015em;color:var(--accent)}
.modal .btns{display:flex;gap:12px}
/* the hidden result behind the email card: a soft blurred glow, lemon into mint */
.orb{width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--accent) 0%,var(--action) 72%);opacity:.32;filter:blur(26px);margin:24px auto 0}
.preview{position:relative;width:260px;height:300px;margin:16px auto;border-radius:var(--r-hero);background:var(--surface-solid);box-shadow:var(--sh-modal);transform:rotate(-4deg);overflow:hidden}
.preview img{width:100%;height:100%;object-fit:cover;filter:blur(8px)}
.preview .chip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:28px;padding:0 12px;background:rgba(12,10,11,.8);color:var(--ink);font-size:12px;white-space:nowrap}

/* ---------- paywall (long scrolling offer screen; sections carry their own side padding) ---------- */
.content.paywall{padding:0 0 40px}
.content.paywall>*{flex:none} /* flex children with overflow:hidden would otherwise shrink to 0 */
.pw-sec{padding:0 var(--pad)}
.pw-sec+.pw-sec{margin-top:32px}
.pw-sec .h1+.sub{margin-top:8px}
.sub.accent{color:var(--accent);font-weight:600}
.ticker{height:36px;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 var(--pad);background:rgba(255,255,255,.12);font-size:13px;font-weight:500;color:var(--body);white-space:nowrap;overflow:hidden}
.ticker b{color:var(--accent);font-weight:600}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px var(--pad)}
.topbar .wordmark{font-size:24px}
.topbar .who{font-size:13px;color:var(--muted);max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.offerbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px var(--pad);background:rgba(12,10,11,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);text-align:left}
.offerbar .txt{font-size:13px;font-weight:600;line-height:1.3;color:var(--ink)}
.offerbar .timer{display:block;font-size:22px;font-weight:700;color:var(--err);font-variant-numeric:tabular-nums;line-height:1.1;margin-top:2px}
.offerbar .btn{width:auto;height:44px;padding:0 24px;font-size:15px;flex:none}
.hero.pw{margin-top:24px;height:220px}
.trust{display:flex;flex-direction:column;gap:20px;text-align:left}
.trust .item{display:flex;gap:16px;align-items:flex-start}
.trust .ico{width:44px;height:44px;border-radius:var(--r-tile);background:var(--disc);display:flex;align-items:center;justify-content:center;font-size:22px;flex:none}
.trust .t{font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
.trust .d{margin-top:4px;font-size:15px;line-height:1.5;color:var(--body)}
.promoline{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 16px;border-radius:var(--r-btn);background:rgba(255,255,255,.12);color:var(--ink);font-size:14px;font-weight:600;line-height:1.4;text-align:center}
.offer{margin-top:16px;border-radius:var(--r-card);background:var(--surface);padding:20px;text-align:left}
.offer .checks{gap:12px}
.offer .tick{font-size:15px;line-height:1.45}
.offer .tick.strong{font-weight:600}
.total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.total .lbl{font-size:15px;font-weight:600}
.total .old{font-size:15px;color:var(--faded);text-decoration:line-through;margin-right:8px}
.total .now{font-size:28px;color:var(--ink)}
.total .save{display:block;text-align:right;font-size:13px;font-weight:600;color:var(--ok);margin-top:4px}
/* the card form lives in a payment provider's iframe; the system reserves the space and never draws the fields */
.cardslot{min-height:220px;border-radius:var(--r-card);border:2px dashed var(--ind);background:rgba(255,255,255,.03);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;color:var(--muted)}
.cardslot .bigemoji{font-size:32px;margin-bottom:4px}
.cardslot .t{font-size:15px;font-weight:600;color:var(--ink)}
.cardslot .d{font-size:13px;line-height:1.5}
.secure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:13px;line-height:1.45;color:var(--muted)}
.teaser{border-radius:var(--r-card);background:var(--surface);padding:20px;text-align:left}
.teaser .t{font-size:16px;font-weight:700;color:var(--ink)}
.teaser .p{margin-top:12px;font-size:15px}
.teaser .veil{margin-top:8px;font-size:15px;line-height:1.55;color:var(--body);filter:blur(5px);user-select:none;pointer-events:none}
.teaser .lock{margin-top:12px;font-size:13px;font-weight:600;color:var(--action)}
.reviews{display:flex;flex-direction:column;gap:12px}
.review .ttl{margin:12px 0 0;font-size:15px;font-weight:700;line-height:1.4}
.review .ttl+.quote{margin-top:4px}
.faq{border-bottom:1px solid var(--line);text-align:left}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:14px 0;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;-webkit-user-select:none;user-select:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';width:9px;height:9px;flex:none;margin:0 6px 4px 0;border-right:2px solid var(--action);border-bottom:2px solid var(--action);transform:rotate(45deg);transition:transform .2s}
.faq[open] summary::after{transform:rotate(-135deg);margin-bottom:-4px}
.faq p{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--body)}
.ctablock{display:flex;flex-direction:column;gap:16px;align-items:center}
.ctablock .legal{font-size:13px}
.pw-sec .h1.sm+.trust,.pw-sec .h1.sm+.reviews,.pw-sec .h1.sm+.faq{margin-top:20px}

/* ---------- touch states (phones first) ----------
   Press-in is immediate (50–120ms), selection appears instantly (no transition on fills), a pressed control shrinks to .97 and shifts one tone.
   .press mirrors :active so the gallery can show a pressed state without a finger. */
.opt:not(.sel):active,.opt:not(.sel).press,.pill:not(.sel):active,.pill:not(.sel).press,.pcard:not(.sel):active,.pcard:not(.sel).press,
.price:not(.sel):active,.price:not(.sel).press,.lang:not(.on):active,.lang:not(.on).press,.scale .seg:not(.sel):active,.scale .seg:not(.sel).press{background:var(--surface-hover)}
.opt:active,.opt.press,.pill:active,.pill.press,.pcard:active,.pcard.press,.price:active,.price.press,.lang:active,.lang.press,.scale .seg:active,.scale .seg.press{transform:scale(.97);transition-duration:.05s}
.opt.sel:active,.pill.sel:active,.pcard.sel:active,.price.sel:active,.scale .seg.sel:active,.opt.sel.press,.pill.sel.press,.pcard.sel.press,.price.sel.press,.scale .seg.sel.press{filter:brightness(.92)}
.btn.secondary:active,.btn.secondary.press{background:rgba(78,208,196,.12)}
.btn.ghost:not(.off):active,.btn.ghost.press{background:var(--surface-hover)}
.link:active,.link.press{background:var(--chip)}
.hdr .back:active{opacity:.5}
.faq summary:active{background:var(--surface)}
.doms .dom:active{background:var(--surface-hover)}

/* ---------- hover (mouse only; touch screens never see these) ---------- */
@media (hover:hover){
  .btn:not(.off):not(:disabled):not(.secondary):not(.ghost):hover{filter:brightness(1.08);box-shadow:var(--lift)}
  .btn.secondary:hover{background:rgba(78,208,196,.12)}
  .btn.ghost:hover{background:var(--surface-hover)}
  .btn.deep:hover{filter:brightness(1.1)}
  .link:hover{background:var(--chip)}
  .hdr .back:hover{opacity:.55}
  .opt:not(.sel):hover,.pill:not(.sel):hover,.pcard:not(.sel):hover,.price:not(.sel):hover,.lang:not(.on):hover,.scale .seg:not(.sel):hover{background:var(--surface-hover)}
  .dfield:hover{background:var(--surface-hover)}
  .faq summary:hover{color:var(--accent)}
  .doms .dom:hover{background:var(--surface)}
}

/* ---------- motion ---------- */
/* drift: the star dust slides ~26px over 90 seconds. sweep: the shine across the primary button every 4.2s. spin: the active step.
   Headlines do not animate, and choosing has no animation — a fill, a border and a check appear at once. */
@keyframes drift{to{transform:translate3d(-26px,20px,0)}}
@keyframes sweep{0%{transform:translateX(-155%) skewX(-22deg)}28%{transform:translateX(500%) skewX(-22deg)}100%{transform:translateX(500%) skewX(-22deg)}}
@keyframes screenin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.anim-in{animation:screenin .4s ease both}
.anim-pop{animation:pop .2s ease both}
@media (prefers-reduced-motion:reduce){
  .phone::before,.btn::after,.anim-in,.anim-pop{animation:none}
  .step.on .dot{animation-duration:3s}
}

/* ---------- small phones (iPhone SE, compact Androids): tighter type and rhythm, same structure ----------
   The rules only fire on phone-sized viewports (≤430px wide), so a desktop window — the gallery, a short laptop screen — never re-flows the 390×844 preview. */
@media (max-width:374px){
  :root{--pad:16px}
  .display{font-size:28px}
  .h1{font-size:24px}
  .h1.sm{font-size:21px}
  .opt{height:56px}
  .opt .ico{width:36px;height:36px}
  .opts.grid .opt{padding:0 12px 0 8px;gap:8px}
  .opts.grid .opt .ico{width:28px;height:28px;font-size:14px}
  .opts.grid .opt .lbl{font-size:14px}
  .scale .seg{width:52px;height:52px}
  .content.media{padding-left:16px;padding-right:16px}
  .cam{width:100%;height:auto;aspect-ratio:320/316}
}
@media (max-width:430px) and (max-height:700px){
  .content{padding-top:20px}
  .content.center>:first-child{margin-top:0}
  .h1+.opts,.h1+.pcards,.h1+.input,.h1+.wheel,.h1+.dates,.h1+.scale,.h1+.bars,.sub+.opts,.sub+.pcards,.sub+.input,.sub+.wheel,.sub+.dates,.sub+.scale{margin-top:20px}
  .opts{gap:10px}
  .foot{padding-top:12px}
  .content.welcome{padding-top:16px}
  .content.welcome>*+*{margin-top:16px}
  .content.welcome .btn{margin-top:24px}
  .content.welcome .langs{margin-top:16px}
  .herowrap .hero{height:184px}
  .hero.pw{height:180px}
  .hero.illu{height:190px}
  .dodont{width:72%;margin-left:auto;margin-right:auto}
  .illu{max-width:220px}
}

/* ---------- scan progress (under the camera status while scanning) ---------- */
.scanbar{width:100%;text-align:left}
.scanbar .srow{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.scanbar .strack{height:6px;border-radius:3px;background:var(--track);margin-top:8px}
.scanbar .sfill{height:100%;border-radius:3px;background:var(--action);transition:width .3s ease}