/* =========================================================
   Shop Weekly — storefront
   White canvas · brand purple for actions · product photos first
   --purple/--lime/--coral are set per store (see head.ejs);
   --lime is a small accent only, never a surface.
   ========================================================= */
:root{
  --purple:#2A1466; --purple-2:#3A1F86; --ink:#15121f;
  --lime:#C8FF3D; --lime-d:#b6ee27; --coral:#FF7A59;
  --white:#fff; --paper:#f6f5f9; --lilac:#f3f1f8; --lilac-bd:#e5e2ee; --line:#e5e2ee; --line-2:#cbc7d8;
  --muted:#625d75; --muted-lt:#b9b3cf;
  --good:#137a42; --bad:#b3123f; --sale:#c8103f;
  --radius:12px; --radius-sm:8px;
  --shadow:0 10px 28px rgba(21,18,31,.10);
  --shadow-sm:0 2px 10px rgba(21,18,31,.06);
  --shadow-lime:none;
  --font-display:"Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --maxw:1180px;
}
/* `hidden` always wins: classes that set display (flex notes, js-only blocks) were overriding it, so text meant
   for one answer showed for the other. */
[hidden]{ display:none !important; }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--white); line-height:1.5; -webkit-font-smoothing:antialiased; font-size:16px; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; margin:0; letter-spacing:-.02em; line-height:1.12; }
h1{ font-weight:800; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:64px 0; }
.section-tight{ padding:40px 0; }
.center{ text-align:center; }
.muted{ color:var(--muted); }
.stack > * + *{ margin-top:16px; }

.dark{ background:var(--purple); color:#fff; }
.dark h1,.dark h2,.dark h3{ color:#fff; }

.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.dark .eyebrow{ color:var(--muted-lt); }
.eyebrow .dot{ display:none; }
.dia{ display:none; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-body); font-weight:600; font-size:16px; padding:13px 22px; border-radius:10px; border:0; cursor:pointer; text-decoration:none; line-height:1.2; transition:background .15s, color .15s, border-color .15s, box-shadow .15s; }
.btn-lime{ background:var(--purple); color:#fff; }
.btn-lime:hover{ background:var(--purple-2); }
.dark .btn-lime, .loan-hero .btn-lime, .cta.dark .btn-lime, .checking .btn-lime{ background:#fff; color:var(--purple); }
.dark .btn-lime:hover, .loan-hero .btn-lime:hover, .cta.dark .btn-lime:hover{ background:var(--paper); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-outline{ background:#fff; color:var(--ink); border:1.5px solid var(--line-2); }
.btn-outline:hover{ border-color:var(--ink); }
.dark .btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-ghost-light{ background:transparent; color:var(--ink); border:1.5px solid var(--line-2); }
.btn-ghost-light:hover{ border-color:var(--ink); }
.btn-lg{ font-size:17px; padding:16px 28px; min-height:54px; }
.btn-sm{ font-size:14px; padding:10px 16px; }
.btn-xs{ font-size:13.5px; padding:8px 14px; border-radius:8px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* top bar + header */
.topbar{ background:var(--ink); color:#fff; text-align:center; font-size:13.5px; padding:9px 14px; }
.topbar b{ color:#fff; font-weight:600; }
.site-head{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); }
.site-head .wrap{ display:flex; align-items:center; gap:18px; padding:14px 24px; }
.brand{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--purple); letter-spacing:-.03em; }
.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav .link{ color:var(--ink); font-weight:500; font-size:15px; padding:9px 12px; border-radius:8px; }
.nav .link:hover{ background:var(--paper); }
.nav .link.active{ background:var(--paper); color:var(--purple); font-weight:600; }
.badge-count{ background:var(--purple); color:#fff; border-radius:999px; font-size:12px; font-weight:700; padding:1px 7px; margin-left:4px; }
.nav form{ margin:0; }
.link-earn{ display:inline-flex; align-items:center; gap:6px; color:var(--purple) !important; }
.link-earn .ic{ width:18px; height:18px; }
.head-actions{ display:none; }
.tabbar, .buybar{ display:none; }
.sale-bar-arrow{ display:none; }

/* home hero: copy left, four products right */
.hero-retail{ background:var(--paper); border-bottom:1px solid var(--line); }
.hero-retail .wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; padding:56px 24px; }
.kicker{ margin:0 0 14px; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--purple); }
.hero-copy h1{ font-size:clamp(34px,4.4vw,56px); letter-spacing:-.03em; }
.hero-copy .lead{ font-size:18px; color:var(--muted); max-width:48ch; margin:18px 0 26px; }
.hero-copy .lead strong{ color:var(--ink); }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-proof{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:14px; font-weight:500; color:var(--muted); }
.hero-proof li{ display:flex; align-items:center; gap:8px; }
.hero-proof .ic{ width:18px; height:18px; color:var(--purple); }
.hero-fine{ margin:12px 0 0; font-size:12.5px; color:var(--muted); }
.hero-products{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hp{ position:relative; aspect-ratio:1/1; background:#fff; border:1px solid var(--line); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; padding:16px; box-shadow:var(--shadow-sm); transition:box-shadow .15s, border-color .15s; }
.hp:hover{ box-shadow:var(--shadow); border-color:var(--line-2); }
.hp img{ max-width:100%; max-height:100%; object-fit:contain; }
.hp-price{ position:absolute; left:10px; bottom:10px; background:var(--purple); color:#fff; font-family:var(--font-display); font-weight:700; font-size:15px; padding:5px 10px; border-radius:8px; }
.hp-price small{ font-size:11px; font-weight:600; opacity:.85; margin-left:1px; }

/* brand row */
.brands{ border-bottom:1px solid var(--line); background:#fff; }
.brands .wrap{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 34px; padding:16px 24px; font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.02em; color:var(--muted); }

/* section headings */
.head{ margin-bottom:28px; } .head.center{ text-align:center; max-width:640px; margin:0 auto 28px; }
.head h2{ font-size:clamp(26px,3.2vw,36px); } .head p{ color:var(--muted); font-size:17px; margin:10px 0 0; }
.head-row{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-bottom:20px; flex-wrap:wrap; }
.head-row h2, .head-row h1{ font-size:clamp(24px,3vw,32px); }
.seeall{ color:var(--purple); font-weight:600; font-size:15px; }
.seeall:hover{ text-decoration:underline; text-underline-offset:3px; }

/* category tiles (photo) */
.tiles{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.tile{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 14px 12px; transition:box-shadow .15s, border-color .15s; }
.tile:hover{ box-shadow:var(--shadow); border-color:var(--line-2); }
.tile img{ width:100%; aspect-ratio:1/1; object-fit:contain; margin-bottom:10px; }
.tile-name{ font-family:var(--font-display); font-weight:700; font-size:14.5px; line-height:1.2; }
.tile-count{ font-size:12.5px; color:var(--muted); margin-top:2px; }
/* legacy chip categories (other pages) */
.cats{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.cat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 12px; text-align:center; }
.cat .ic{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 10px; background:var(--paper); }
.cat .nm{ font-weight:600; font-size:14.5px; }

/* product grid + cards */
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; color:inherit; transition:box-shadow .15s, border-color .15s; }
.card:hover{ box-shadow:var(--shadow); border-color:var(--line-2); }
.card .thumb{ position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:#fff; border-bottom:1px solid var(--line); padding:14px; }
.card .thumb .emoji{ font-size:64px; }
.card .thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.card .thumb .cat-tag{ display:none; }
.card .thumb .tag-out{ position:absolute; top:10px; left:10px; font-size:11px; font-weight:700; color:#fff; background:var(--ink); padding:4px 9px; border-radius:6px; }
.card .thumb .save-badge{ position:absolute; top:10px; left:10px; z-index:2; background:var(--sale); color:#fff; font-weight:700; font-size:12.5px; padding:4px 8px; border-radius:6px; }
.card.on-sale{ border-color:var(--line); }
.card .body{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.brand-line{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); min-height:14px; }
.card .nm{ font-weight:600; font-size:15px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .desc{ display:none; }
.card .fam-line{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
.fam-dots{ display:inline-flex; }
.fam-dots i{ display:block; flex:none; width:11px; height:11px; border-radius:50%; margin-right:-3px; box-shadow:0 0 0 2px #fff, inset 0 0 0 1px rgba(0,0,0,.12); }
.card .price{ margin-top:auto; padding-top:10px; }
.wk-row{ display:flex; align-items:baseline; gap:4px; }
.card .price .from{ font-size:12px; font-weight:500; color:var(--muted); margin-right:2px; }
.card .price .wk{ font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--purple); letter-spacing:-.02em; }
.card .price .wk.sale{ color:var(--sale); }
.card .price .per{ font-size:13px; color:var(--muted); font-weight:500; }
.card .price .meta{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.card .price .term{ font-size:12px; color:var(--muted); }
s.was{ color:var(--muted); font-size:12.5px; margin-left:4px; white-space:nowrap; text-decoration-thickness:1.5px; }
.total-line{ font-size:13px; color:var(--muted); margin-top:2px; } .total-line strong{ color:var(--ink); }
.lockpill{ display:inline-flex; align-items:center; gap:6px; background:var(--paper); color:var(--ink); font-weight:600; font-size:13px; padding:7px 11px; border-radius:8px; }
.lockpill .ic{ width:15px; height:15px; color:var(--purple); }
.t-lilac,.t-lime,.t-coral,.t-mint,.t-sky,.t-cream{ background:#fff; }

/* how it works */
.how{ background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.how-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.how-steps li{ display:flex; gap:14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.how-steps .n{ flex:0 0 36px; width:36px; height:36px; border-radius:50%; background:var(--purple); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; }
.how-steps strong{ display:block; font-family:var(--font-display); font-size:17px; margin-bottom:4px; }
.how-steps p{ margin:0; color:var(--muted); font-size:14.5px; }
.how-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:26px; }
/* legacy why/feat/steps blocks */
.why{ background:var(--paper); }
.feat{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feat .f{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px; }
.feat .ic{ width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; background:var(--paper); }
.feat h3{ font-size:17px; margin-bottom:6px; } .feat p{ margin:0; color:var(--muted); font-size:14.5px; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step .num{ width:44px; height:44px; border-radius:50%; background:var(--purple); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:18px; margin-bottom:14px; }
.step h3{ font-size:19px; margin-bottom:6px; } .step p{ margin:0; color:var(--muted); font-size:15px; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat .n{ font-family:var(--font-display); font-weight:800; font-size:28px; line-height:1; }
.stat .l{ font-size:13px; color:var(--muted); margin-top:6px; }
.band{ background:var(--paper); border-bottom:1px solid var(--line); }
.band .wrap{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 36px; padding:14px 24px; }
.band .it{ display:flex; align-items:center; gap:8px; font-weight:500; font-size:14.5px; }
.prodband{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.hprod{ aspect-ratio:1/1; background:#fff; border:1px solid var(--line); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; padding:12px; }
.hprod img{ max-width:100%; max-height:100%; object-fit:contain; }
.hprod .pill{ display:none; }

/* dark call-outs (shop page foot, invite) */
.cta{ position:relative; }
.cta .wrap{ text-align:center; padding:56px 24px; }
.cta h2{ font-size:clamp(26px,3.6vw,40px); } .cta p{ color:var(--muted-lt); font-size:17px; margin:12px auto 24px; max-width:48ch; }

/* breadcrumb + filters */
.crumbs{ font-size:13.5px; color:var(--muted); padding:18px 0 6px; }
.crumbs a:hover{ color:var(--purple); }
.filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.pill{ font-family:var(--font-body); font-weight:500; font-size:14px; padding:9px 16px; border-radius:999px; border:1.5px solid var(--line-2); background:#fff; color:var(--ink); cursor:pointer; text-decoration:none; }
.pill:hover{ border-color:var(--ink); } .pill.active{ background:var(--purple); color:#fff; border-color:var(--purple); }

/* product detail */
.pdp{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.pdp .gallery{ border-radius:var(--radius); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; position:relative; background:#fff; border:1px solid var(--line); overflow:hidden; }
.pdp .gallery .emoji{ font-size:160px; } .pdp .gallery img{ max-width:86%; max-height:86%; object-fit:contain; }
.pdp .tagrow{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.chip{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; background:var(--paper); color:var(--muted); padding:5px 10px; border-radius:6px; }
a.chip{ text-decoration:none; } a.chip:hover{ color:var(--purple); }
.chip.ok{ background:#e8f6ee; color:var(--good); } .chip.out{ background:#fde8ee; color:var(--bad); }
.pdp h1{ font-size:clamp(26px,3.4vw,38px); color:var(--ink); margin:4px 0 12px; }
.pdp .blurb{ color:var(--muted); font-size:16.5px; margin-bottom:20px; }
.pricebox{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:18px; box-shadow:var(--shadow-sm); }
.pricebox .big{ font-family:var(--font-display); font-weight:800; font-size:44px; color:var(--purple); line-height:1; letter-spacing:-.03em; }
.pricebox .big small{ font-size:17px; color:var(--muted); font-weight:500; letter-spacing:0; }
.pricebox .sub{ font-size:14px; color:var(--muted); margin-top:8px; }
.buyrow{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; align-items:flex-end; }
.qty{ width:78px; }
.specs{ width:100%; border-collapse:collapse; margin-top:8px; }
.specs th,.specs td{ text-align:left; padding:10px 0; border-bottom:1px solid var(--line); font-size:14.5px; vertical-align:top; }
.specs th{ font-weight:600; color:var(--ink); width:42%; } .specs td{ color:var(--muted); }
.buy-fine{ margin:10px 0 0; font-size:12.5px; color:var(--muted); }
/* The application's first question on a product page (2026-10-16): big tappable answers, two to a row on a phone. */
.quick-start{ width:100%; }
.quick-start .qs-open{ display:inline-block; margin:0 0 10px; padding:5px 12px; border-radius:999px; background:var(--lime); color:var(--ink); font-size:14px; }
.quick-start .qs-head{ margin:0 0 10px; font-size:16px; line-height:1.4; color:var(--ink); }
.quick-start .qs-opts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.quick-start .qs-opt{ display:flex; align-items:center; justify-content:center; min-height:52px; padding:10px 12px; border-radius:14px;
  background:var(--purple); color:#fff; font-weight:700; font-size:15.5px; text-align:center; text-decoration:none; }
.quick-start .qs-opt:hover, .quick-start .qs-opt:focus-visible{ background:var(--ink); }
.quick-start .qs-sign{ margin:10px 0 0; font-size:13.5px; color:var(--muted); }
.qs-points{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13.5px; color:var(--ink); }
.qs-points li::before{ content:"✓"; margin-right:6px; color:var(--purple); font-weight:800; }
/* Product page pop-ups (2026-10-18): the first question from the sticky bar, and the photos full screen. */
dialog.qs-sheet{ position:fixed; inset:auto 0 0 0; width:100%; max-width:560px; margin:0 auto; border:0; border-radius:22px 22px 0 0;
  padding:26px 18px calc(20px + env(safe-area-inset-bottom)); background:#fff; color:var(--ink); box-shadow:0 -10px 40px rgba(21,18,31,.25); }
dialog.qs-sheet::backdrop, dialog.lightbox::backdrop{ background:rgba(21,18,31,.6); }
.qs-sheet .qs-close, .lightbox .lb-close{ position:absolute; top:10px; right:12px; width:40px; height:40px; border:0; border-radius:50%;
  background:var(--paper); color:var(--ink); font-size:24px; line-height:1; cursor:pointer; }
.qs-sheet .qs-head{ padding-right:40px; }
img[data-lb]{ cursor:zoom-in; }
dialog.lightbox{ width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#0d0b14; }
.lightbox .lb-track{ display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.lightbox .lb-track::-webkit-scrollbar{ display:none; }
.lightbox .lb-slide{ flex:0 0 100%; height:100%; margin:0; display:flex; align-items:center; justify-content:center; scroll-snap-align:center; }
.lightbox .lb-slide img{ max-width:100%; max-height:100%; object-fit:contain; background:#fff; }
.lightbox .lb-close{ top:max(12px, env(safe-area-inset-top)); z-index:2; background:rgba(255,255,255,.92); }
.lightbox .lb-count{ position:absolute; bottom:calc(16px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); padding:4px 12px;
  border-radius:999px; background:rgba(255,255,255,.92); color:var(--ink); font-size:13px; font-weight:700; }
/* "Apply before you shop": the pitch for visitors who aren't members yet, with the three questions they'd ask. */
.apply-first{ margin-bottom:18px; padding:16px 18px; border-radius:var(--radius); background:var(--paper); border:1px solid var(--line); }
.apply-first .af-head{ margin:0 0 6px; font-size:15px; line-height:1.45; color:var(--ink); }
.apply-first details{ border-top:1px solid var(--line); }
.apply-first summary{ cursor:pointer; padding:10px 0; font-weight:600; font-size:14.5px; color:var(--purple); list-style:none; display:flex; justify-content:space-between; align-items:center; }
.apply-first summary::-webkit-details-marker{ display:none; }
.apply-first summary::after{ content:"+"; font-weight:700; color:var(--muted); }
.apply-first details[open] summary::after{ content:"–"; }
.apply-first details p{ margin:0 0 12px; font-size:14px; color:var(--ink); }
.mini-trust{ display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; font-size:13px; color:var(--muted); }
.mini-trust span{ display:flex; align-items:center; gap:7px; }
.mini-trust span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--purple); }

/* ===== functional pages (account / basket / checkout / forms) ===== */
.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); }
.panel + .panel{ margin-top:18px; }
.panel h2,.panel h3{ margin-top:0; }
.two-col{ display:grid; grid-template-columns:2fr 1fr; gap:22px; align-items:start; }
.narrow{ max-width:480px; margin:0 auto; }

.flash{ border-radius:10px; padding:13px 16px; margin:18px 0; font-weight:600; }
.flash.success{ background:#e8f6ee; color:var(--good); }
.flash.error{ background:#fde8ee; color:var(--bad); }
.flash.info{ background:var(--paper); color:var(--purple); }

label{ font-weight:600; font-size:14px; display:block; margin-bottom:6px; color:var(--ink); }
.field{ margin:0 0 16px; } .field .hint{ font-weight:400; color:var(--muted); font-size:12.5px; margin-top:5px; }
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],
input[type=tel],input[type=date],input:not([type]),select,textarea{
  width:100%; padding:13px 14px; font-family:var(--font-body); font-size:16px; line-height:1.3;
  color:var(--ink); background:#fff; border:1.5px solid var(--line-2); border-radius:10px;
  transition:border-color .15s, box-shadow .15s;
}
select{ -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23625d75' stroke-width='2'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(42,20,102,.15); }
input::placeholder,textarea::placeholder{ color:#9892ad; }
textarea{ min-height:90px; resize:vertical; }
.row{ display:flex; gap:14px; flex-wrap:wrap; } .row > *{ flex:1; min-width:150px; margin-bottom:0; }
.row{ margin-bottom:16px; }

.balance{ background:var(--purple); color:#fff; border-radius:var(--radius); padding:24px; }
.balance .label{ color:var(--muted-lt); font-weight:600; font-size:14px; }
.balance .amount{ font-family:var(--font-display); font-weight:800; font-size:40px; color:#fff; line-height:1; margin-top:6px; }

.tbl{ width:100%; border-collapse:collapse; font-size:14px; }
.tbl th,.tbl td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl th{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.tbl tr:last-child td{ border-bottom:0; }
.num{ text-align:right; font-variant-numeric:tabular-nums; }
.table-wrap{ overflow-x:auto; }

.status{ font-size:12px; font-weight:700; padding:3px 9px; border-radius:6px; text-transform:capitalize; white-space:nowrap; }
.status.review{ background:#fff4d6; color:#8a5a00; }
.status.placed{ background:var(--paper); color:var(--purple); }
.status.exported{ background:#e8f0ff; color:#2456c7; }
.status.fulfilled{ background:#e8f6ee; color:var(--good); }
.status.cancelled{ background:#fde8ee; color:var(--bad); }

.line-item{ display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.line-item:last-child{ border-bottom:0; }
.line-item .ph{ width:64px; height:64px; border-radius:10px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:28px; overflow:hidden; flex:0 0 64px; padding:4px; }
.line-item .ph img{ max-width:100%; max-height:100%; object-fit:contain; }
.line-item .grow{ flex:1; }
.totals{ display:flex; justify-content:space-between; font-family:var(--font-display); font-weight:800; font-size:21px; padding-top:14px; margin-top:6px; border-top:1px solid var(--line); }
.code-pill{ font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; background:#fff; border:2px dashed var(--purple); color:var(--purple); padding:6px 12px; border-radius:8px; display:inline-block; }

/* responsive */
@media (max-width:1000px){
  .tiles,.cats{ grid-template-columns:repeat(3,1fr); } .grid{ grid-template-columns:repeat(3,1fr); }
  .feat{ grid-template-columns:repeat(2,1fr); } .how-steps{ grid-template-columns:1fr; }
  .pdp{ grid-template-columns:1fr; gap:26px; } .prodband{ grid-template-columns:repeat(3,1fr); }
  .two-col{ grid-template-columns:1fr; }
  .hero-retail .wrap{ grid-template-columns:1fr; gap:28px; padding:40px 24px; }
}
@media (max-width:640px){
  .section{ padding:44px 0; }
  .wrap{ padding:0 16px; }
  .tiles,.cats{ grid-template-columns:repeat(2,1fr); } .grid{ grid-template-columns:repeat(2,1fr); }
  .feat{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
}

/* ===== accessibility + utilities ===== */
.skip-link{ position:absolute; left:-9999px; top:8px; z-index:1000; background:#fff; color:var(--ink); padding:10px 14px; border-radius:8px; font-weight:700; box-shadow:var(--shadow); }
.skip-link:focus{ left:8px; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
:focus-visible{ outline:3px solid rgba(42,20,102,.45); outline-offset:2px; }
.dark :focus-visible, .foot :focus-visible{ outline-color:#fff; }
main:focus{ outline:none; }
.h2{ font-size:clamp(24px,3vw,32px); } .h3{ font-size:19px; }
.text-link{ color:var(--purple); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.field.has-error input, .field.has-error select{ border-color:var(--bad); }
.field-error{ color:var(--bad); font-weight:600; font-size:13px; margin-top:5px; }
.error-list{ margin:8px 0 0; padding-left:20px; font-weight:500; }
.error-list a{ color:inherit; text-decoration:underline; }
/* Permission rows: a switch, not a tick box, and the whole row is the tap target (Darren, 2026-10-12). Still a real
   checkbox underneath, so it works without JS and with keyboards and screen readers. */
.consent{ display:flex; gap:12px; align-items:flex-start; background:var(--paper); border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; margin:4px 0 14px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .15s, background .15s; }
.consent input[type=checkbox]{ -webkit-appearance:none; appearance:none; position:relative; width:48px; height:28px; flex:0 0 48px; margin:0; border-radius:999px; background:var(--line-2); cursor:pointer; transition:background .15s; }
.consent input[type=checkbox]::before{ content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(21,18,31,.3); transition:transform .15s; }
.consent input[type=checkbox]:checked{ background:var(--purple); }
.consent input[type=checkbox]:checked::before{ transform:translateX(20px); }
.consent input[type=checkbox]:focus-visible{ outline:3px solid var(--purple); outline-offset:2px; }
.consent label{ font-weight:500; font-size:14px; margin:0; padding-top:3px; cursor:pointer; }
.consent.on{ border-color:var(--purple); background:#f1edfb; }
.consent.has-error, .consent.missing{ border-color:var(--bad); }
.consent-all{ background:#fff; border-color:var(--line-2); padding:16px; }
.consent-all label{ font-size:16px; padding-top:2px; }
.consent-all label .muted{ display:block; font-size:13px; font-weight:500; }
.consent-missing{ margin:0 0 12px; color:var(--bad); font-weight:600; font-size:14px; }
@media (prefers-reduced-motion: reduce){ .consent input[type=checkbox], .consent input[type=checkbox]::before{ transition:none; } }
.disclosure{ background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:16px; font-size:14px; line-height:1.7; }
.disclosure p{ margin:0 0 10px; } .disclosure p:last-child{ margin:0; }
.shop-tools{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.shop-tools input[type=search]{ max-width:300px; }
.shop-tools select{ width:auto; min-width:190px; }
.pager{ display:flex; gap:14px; align-items:center; justify-content:center; margin-top:30px; }
.num.neg{ color:var(--bad); } .num.pos{ color:var(--good); }
.nav-form{ margin:0; }
.ic{ width:20px; height:20px; flex:0 0 auto; }
.small{ font-size:13px; }
.narrow-lg{ max-width:640px; margin:0 auto; }
.js .js-hide{ display:none; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }

/* ===== sales ===== */
.sale-bar{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:9px 16px; color:#fff; text-decoration:none; background:var(--sale); font-weight:600; font-size:14px; }
.sale-bar:hover{ filter:brightness(1.05); }
.sale-bar-pct{ font-family:var(--font-display); font-weight:800; font-size:15px; background:#fff; color:var(--sale); padding:2px 9px; border-radius:6px; }
.sale-bar-cta{ text-decoration:underline; text-underline-offset:3px; }
.price .wk.sale{ color:var(--sale); }
.pricebox.sale{ border-color:#f3b4c8; }
.sale-strip{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.save-pill{ background:var(--sale); color:#fff; font-weight:700; padding:5px 10px; border-radius:6px; font-size:13.5px; }
.sale-strip .ends{ font-weight:600; font-size:14px; color:#8a0e37; }
.pricebox .big .big-was{ font-size:20px; font-family:var(--font-body); font-weight:500; color:var(--muted); }
.chip.sale-chip{ background:#fde8ee; color:#8a0e37; }

/* ===== product content ===== */
.highlights{ list-style:none; padding:0; margin:0 0 20px; display:grid; gap:8px; }
.highlights li{ position:relative; padding-left:28px; font-size:15.5px; color:var(--ink); }
.highlights li::before{ content:"✓"; position:absolute; left:0; top:.1em; width:18px; height:18px; border-radius:50%; background:#e8f6ee; color:var(--good); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.pdp-cols{ display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:start; }
.pdp-cols h2{ margin:0 0 12px; }
.prose p{ margin:0 0 14px; color:#3a3354; font-size:16px; line-height:1.7; }
.reviewers{ margin-top:30px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.reviewers > p{ margin:0 0 16px; line-height:1.7; }
.pros-cons{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pros-cons h3{ font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:0 0 10px; }
.pros-cons ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pros-cons li{ font-size:15px; line-height:1.5; }
.pros{ background:#eef9f1; border-radius:10px; padding:16px; }
.pros h3, .pros li span{ color:var(--good); }
.cons{ background:#fff1f3; border-radius:10px; padding:16px; }
.cons h3, .cons li span{ color:var(--bad); }
.pros li span, .cons li span{ font-weight:700; margin-right:4px; }
.reviewers-note{ margin:14px 0 0; font-size:12.5px; color:var(--muted); }
.pdp-more .specs th{ width:45%; }
@media (max-width:1000px){ .pdp-cols{ grid-template-columns:1fr; } }
@media (max-width:640px){ .pros-cons{ grid-template-columns:1fr; } }

/* ===== share buttons ===== */
.share{ display:grid; gap:12px; }
.share-row{ display:flex; flex-wrap:wrap; gap:8px; }
.sh{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; border-radius:999px; border:1.5px solid var(--line-2); background:#fff; color:var(--ink); font:600 14px var(--font-body); cursor:pointer; }
.sh:hover{ border-color:var(--ink); }
.sh-ic{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--c, var(--purple)); }
.sh-ic .ic{ width:18px; height:18px; }
.sh-wa{ --c:#25D366; } .sh-fb{ --c:#1877F2; } .sh-ms{ --c:#0A7CFF; } .sh-sms{ --c:#34C759; } .sh-x{ --c:#111; } .sh-em{ --c:#625d75; } .sh-copy{ --c:var(--purple); }
@media (hover:hover) and (pointer:fine){ .touch-only{ display:none !important; } }
.share.pulse{ animation:pulse 1.1s ease; border-radius:12px; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(42,20,102,.35); } 100%{ box-shadow:0 0 0 18px rgba(42,20,102,0); } }
.share-native .ic{ width:20px; height:20px; }

/* ===== refer-a-friend ===== */
.earn-card{ margin-top:18px; border-radius:var(--radius); padding:18px; background:var(--paper); border:1px solid var(--line); }
.earn-top{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.earn-top strong{ display:block; font-family:var(--font-display); font-size:18px; line-height:1.2; }
.earn-sub{ display:block; font-size:13.5px; color:var(--muted); margin-top:4px; line-height:1.45; }
.earn-gift{ width:42px; height:42px; flex:0 0 42px; border-radius:10px; background:var(--purple); color:#fff; display:flex; align-items:center; justify-content:center; }
.earn-gift .ic{ width:22px; height:22px; }
.earn-panel .share{ margin-bottom:12px; }
.ref-mini{ display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin-bottom:14px; }
.ref-mini strong{ color:var(--ink); }
.earn-strip{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--radius); color:var(--ink); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.earn-strip .earn-gift{ background:var(--purple); color:#fff; }
.es-text{ display:flex; flex-direction:column; flex:1; min-width:0; font-size:14px; color:var(--muted); }
.es-text strong{ font-family:var(--font-display); font-size:17px; color:var(--ink); }
.es-go{ font-size:28px; line-height:1; font-weight:300; color:var(--muted); }
.invited{ display:inline-flex; gap:8px; align-items:center; background:var(--paper); color:var(--purple); font-weight:700; padding:8px 14px; border-radius:8px; margin-top:6px; }

/* invite page */
.invite-hero .wrap{ padding:48px 24px 56px; }
.invite-body .panel + .panel, .invite-body .ref-stats, .invite-body .how-earn{ margin-top:18px; }
.invite-card h2{ margin-bottom:12px; }
.linkbox{ display:flex; gap:8px; margin-bottom:8px; }
.linkbox input{ flex:1; min-width:0; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px; background:var(--paper); }
.ref-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ref-stat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 10px; text-align:center; }
.ref-stat .n{ font-family:var(--font-display); font-weight:800; font-size:26px; line-height:1; }
.ref-stat .l{ font-size:12.5px; color:var(--muted); margin-top:6px; }
.ref-stat.earned{ background:var(--purple); border-color:var(--purple); color:#fff; } .ref-stat.earned .n{ color:#fff; } .ref-stat.earned .l{ color:var(--muted-lt); }
.ref-list{ list-style:none; margin:0; padding:0; }
.ref-list li{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.ref-list li:last-child{ border-bottom:0; }
.rs{ font-size:12.5px; font-weight:700; padding:4px 9px; border-radius:6px; white-space:nowrap; }
.rs-paid{ background:#e8f6ee; color:var(--good); } .rs-wait{ background:var(--paper); color:var(--purple); } .rs-no{ background:#f1f0f5; color:var(--muted); }
.earn-steps{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.earn-steps li{ display:flex; gap:14px; align-items:flex-start; }
.earn-steps .num{ width:32px; height:32px; flex:0 0 32px; border-radius:50%; background:var(--purple); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:14px; }
.fine-print{ font-size:12.5px; color:var(--muted); line-height:1.6; margin:20px 0 0; }
.privacy-status{ border-radius:10px; padding:12px 14px; margin:14px 0; font-size:14.5px; }
.privacy-status.off{ background:#e8f6ee; } .privacy-status.on{ background:var(--paper); }
.signout-row{ margin-top:22px; text-align:center; }

/* address lookup dropdown */
.addr-wrap{ position:relative; }
.addr-list{ position:absolute; left:0; right:0; top:100%; z-index:40; list-style:none; margin:0; padding:6px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); max-height:300px; overflow:auto; }
.addr-list li{ padding:11px 12px; border-radius:8px; cursor:pointer; font-size:14.5px; line-height:1.35; }
.addr-list li:hover, .addr-list li[aria-selected="true"]{ background:var(--paper); }
.launch-note{ display:inline-block; margin-top:10px; font-size:14px; font-weight:600; color:var(--purple); }
.dark .launch-note{ color:#fff; }
.verify-note{ border-radius:10px; padding:10px 12px; margin:0 0 12px; font-size:14px; font-weight:600; }
.verify-note.checking{ background:var(--paper); color:var(--purple); }
.verify-note.ok{ background:#e8f6ee; color:var(--good); }
.verify-note.warn{ background:#fff4e5; color:#8a4b00; }

/* product photo gallery */
.pdp-media{ min-width:0; }
.pdp .gallery[data-gallery]{ display:block; }
.g-track{ display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
.g-track::-webkit-scrollbar{ display:none; }
.g-track:focus-visible{ outline-offset:-3px; }
.g-slide{ flex:0 0 100%; margin:0; display:flex; align-items:center; justify-content:center; scroll-snap-align:center; }
.pdp .gallery .g-slide img{ max-width:86%; max-height:86%; object-fit:contain; }
.g-dots{ position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:6px; pointer-events:none; }
.g-dots span{ width:7px; height:7px; border-radius:999px; background:rgba(21,18,31,.2); transition:width .2s, background .2s; }
.g-dots span.on{ width:20px; background:var(--purple); }
.g-count{ position:absolute; top:12px; right:12px; font-size:12px; font-weight:700; background:rgba(255,255,255,.92); border:1px solid var(--line); color:var(--ink); padding:3px 8px; border-radius:6px; }
.g-thumbs{ display:flex; gap:10px; margin-top:12px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
.g-thumbs button{ flex:0 0 64px; height:64px; border-radius:10px; border:1.5px solid var(--line); background:#fff; padding:6px; cursor:pointer; }
.g-thumbs button.on{ border-color:var(--purple); }
.g-thumbs img{ width:100%; height:100%; object-fit:contain; }

/* ===== sign-up / loan wizard ===== */
.hero.solo .wrap{ text-align:center; padding:52px 24px 60px; display:flex; flex-direction:column; align-items:center; }
.hero h1{ font-size:clamp(30px,4.4vw,48px); letter-spacing:-.03em; margin-top:14px; }
.hero h1 .lime{ color:var(--purple); }
.dark .hero h1 .lime, .hero.dark h1 .lime{ color:#fff; }
.hero .lead{ font-size:17.5px; color:var(--muted); max-width:48ch; margin:16px auto 0; }
.hero.dark .lead{ color:var(--muted-lt); }
.join-hero.light{ background:var(--paper); color:var(--ink); border-bottom:1px solid var(--line); }
.join-hero .wrap{ padding:40px 24px 100px; }
.join-panel{ max-width:720px; margin:-72px auto 0; position:relative; z-index:2; }
/* The number, big: what an ad click lands on. */
.limit-pop{ margin:18px 0 0; font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--ink); }
.limit-pop small{ display:block; font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.limit-pop .num{ font-size:clamp(56px, 11vw, 84px); color:var(--purple); }
.limit-pop .of{ display:block; font-size:16px; font-weight:600; color:var(--muted); margin-top:8px; letter-spacing:0; }
.join-hero .hero-proof{ justify-content:center; margin-top:18px; }
/* Compact hero: the first tap of the quick check sits in the first screen. */
.join-hero.compact .wrap{ padding:26px 24px 84px; }
.join-hero.compact h1{ margin-top:10px; font-size:clamp(28px,4vw,42px); }
.join-hero.compact .limit-pop{ margin-top:12px; }
.join-hero.compact .limit-pop .num{ font-size:clamp(46px, 9vw, 72px); }
.join-hero.compact .lead{ margin:12px auto 0; max-width:560px; }
/* An ad's own headline can run longer than the default one: a touch smaller, so the first question stays on screen. */
.join-hero.compact h1.from-ad{ font-size:clamp(25px,3.6vw,38px); max-width:640px; margin-left:auto; margin-right:auto; }
/* The promises every winning ad makes, repeated on the page. */
.join-hero .trust-line{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; margin:12px auto 0; max-width:620px; font-size:14px; font-weight:700; color:var(--ink); }
.join-hero .trust-line span::before{ content:'✓'; color:#16a34a; margin-right:5px; font-weight:800; }
.join-after{ text-align:center; padding:26px 0 0; }
.join-after .hero-proof{ justify-content:center; margin-top:14px; }
.join-after .hero-fine{ margin:0; }
.join-after-head{ margin:22px 0 10px; font-weight:700; color:var(--ink); }
.join-after .hero-products{ max-width:720px; width:100%; grid-template-columns:repeat(4,1fr); gap:10px; margin:0 auto; }
.join-after .hp{ padding:10px; }
.join-after .hp-price{ font-size:13px; padding:4px 8px; left:8px; bottom:8px; }
.join-hero .join-cta{ margin:20px 0 2px; justify-content:center; }
.join-hero .join-cta .btn{ min-width:260px; }
.join-panel{ scroll-margin-top:84px; }
.join-hero .hero-products{ max-width:720px; width:100%; grid-template-columns:repeat(4,1fr); gap:10px; margin:26px auto 0; }
.join-hero .hp{ padding:10px; }
.join-hero .hp-price{ font-size:13px; padding:4px 8px; left:8px; bottom:8px; }
/* The estimate screen, between the quick check and the details. */
.estimate-card{ text-align:center; padding:26px 18px 22px; border-radius:var(--radius); background:var(--paper); border:1px solid var(--line); margin:0 0 16px; }
.estimate-card .est-label{ margin:0; font-size:15px; color:var(--muted); }
.estimate-card .est-num{ margin:6px 0 4px; font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; line-height:1; font-size:18px; color:var(--ink); }
.estimate-card .est-num strong{ display:block; font-size:clamp(52px, 12vw, 76px); color:var(--purple); margin-top:4px; }
.estimate-card .est-sub{ margin:10px auto 0; max-width:38ch; font-size:15px; color:var(--ink); }
.estimate-card .fine-print{ margin:12px 0 0; }
.step-estimate .step-nav{ display:flex; }
html:not(.js) .estimate-card{ display:none; } /* the number needs the wizard; without JS the loan question still shows */
/* "Working out your limit…": a short moment before the number. */
.est-thinking{ text-align:center; padding:26px 18px 18px; border-radius:var(--radius); background:var(--paper); border:1px solid var(--line); margin:0 0 16px; }
.est-thinking[hidden], html:not(.js) .est-thinking{ display:none; } /* needs the wizard; and hidden must win over any display rule */
.est-ring{ width:56px; height:56px; margin:0 auto 14px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--purple); animation:est-spin 1s linear infinite; display:flex; align-items:center; justify-content:center; }
.est-ring .dia{ width:14px; height:14px; }
.est-thinking-title{ margin:0 0 10px; font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--ink); }
.est-thinking-steps{ list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14.5px; color:var(--muted); }
.est-thinking-steps li{ opacity:0; transform:translateY(4px); }
.est-thinking-steps li::before{ content:"✓ "; color:var(--good); font-weight:800; }
.est-thinking.go .t0{ animation:est-in .35s ease .3s both; }
.est-thinking.go .t1{ animation:est-in .35s ease 1.3s both; }
.est-thinking.go .t2{ animation:est-in .35s ease 2.2s both; }
/* The 5-second version (bank step): four lines, spread out. */
.est-thinking.go .t3{ animation:est-in .35s ease 3.1s both; }
.est-thinking.slow.go .t0{ animation-delay:.4s; }
.est-thinking.slow.go .t1{ animation-delay:1.5s; }
.est-thinking.slow.go .t2{ animation-delay:2.6s; }
.est-thinking.slow.go .t3{ animation-delay:3.7s; }
[data-step-thinking-result].reveal{ animation:step-in .45s ease both; }
@keyframes step-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ [data-step-thinking-result].reveal{ animation:none; } }
@keyframes est-spin{ to{ transform:rotate(360deg); } }
@keyframes est-in{ to{ opacity:1; transform:none; } }
.est-result.reveal .estimate-card{ animation:est-pop .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes est-pop{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .est-ring{ animation:none; } .est-thinking-steps li{ opacity:1; transform:none; animation:none; } .est-result.reveal .estimate-card{ animation:none; } }
/* The loan offer as one tap on the estimate screen. */
.loan-inline{ margin:0 0 16px; padding:14px 16px; border-radius:var(--radius); background:#fff; border:1px solid var(--line); }
.loan-inline-head{ margin:0 0 10px; font-size:14.5px; line-height:1.45; color:var(--ink); }
.loan-inline .choice-field{ margin-bottom:0; }
/* Partner welcome page: agreed by tapping a button (clickwrap), wording right above the buttons. */
.clickwrap{ margin:0 0 14px; padding:14px 16px; border-radius:12px; background:var(--paper); border:1px solid var(--line); font-size:13.5px; line-height:1.45; color:var(--ink); }
.clickwrap-head{ margin:0 0 6px; font-weight:700; font-size:14px; }
.clickwrap ul{ margin:0 0 8px; padding-left:18px; }
.clickwrap li{ margin:0 0 6px; }
.clickwrap .loan-fcra-inline{ margin-top:4px; }
.step-nav.welcome-buttons{ flex-direction:column; gap:10px; }
.welcome-buttons .btn{ flex:none; min-height:60px; }
a.preapproved{ text-decoration:none; cursor:pointer; }
.quick-amounts.quick-first{ margin:0 0 14px; }
.step-note{ text-align:center; font-size:13.5px; color:var(--muted); margin:10px 0 0; }
/* The loan offer inside the application (v2). */
.loan-chip{ display:inline-block; padding:3px 9px; border-radius:999px; background:#efe9fb; color:var(--purple); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; vertical-align:middle; }
.loan-blurb{ margin:0 0 16px; padding:14px 16px; border-radius:var(--radius); background:var(--paper); border:1px solid var(--line); }
.loan-blurb p{ margin:8px 0 0; font-size:14.5px; color:var(--ink); }
.loan-consents{ margin:4px 0 12px; padding:14px 16px; border-radius:var(--radius); background:var(--paper); border:1px solid var(--line); }
.loan-consents-head{ margin:0 0 10px; font-size:14px; color:var(--ink); }
.loan-consents .consent{ margin-bottom:10px; }
.loan-fcra-inline{ margin:0; font-size:12.5px; line-height:1.45; color:var(--muted); }
/* Long legal wording on phones: a few lines, then "Read all". The full text is on the page and opens in place. */
@media (max-width:720px){
  .clamp:not(.open){ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
}
.clamp-wrap{ flex:1 1 auto; min-width:0; }
.clamp-more{ display:inline-block; background:none; border:0; padding:0; margin:4px 0 0; color:var(--purple); font:inherit; font-size:13px; font-weight:700; text-decoration:underline; cursor:pointer; }
.loan-hero .clamp-more{ color:#fff; }
.focus-product{ font-size:15px; font-weight:600; color:var(--purple); margin:-6px 0 14px; }
.stepbar{ display:none; margin:0 0 18px; }
.js .stepped .stepbar{ display:block; }
.sp-top{ display:flex; justify-content:space-between; align-items:center; min-height:24px; margin-bottom:8px; font-size:13px; font-weight:600; color:var(--muted); }
.sp-back[hidden]{ display:none; }
.link-btn{ background:none; border:0; padding:4px 0; font:inherit; font-weight:600; color:var(--purple); cursor:pointer; }
.sp-track{ height:6px; border-radius:6px; background:var(--line); overflow:hidden; }
.sp-fill{ display:block; height:100%; width:0; border-radius:6px; background:var(--purple); transition:width .3s ease; }
/* Why we ask: one friendly line under each question. */
.step .why{ margin:-10px 0 16px; font-size:14px; line-height:1.45; color:var(--muted); }
/* Focused layout (the application): logo + reassurance, no nav, no footer links, no tab bar. */
.site-head.focused .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.site-head.focused .brand{ white-space:nowrap; }
.secure-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap; }
.secure-badge .sb-short{ display:none; }
@media (max-width: 480px){ .secure-badge .sb-long{ display:none; } .secure-badge .sb-short{ display:inline; } }
.secure-badge .ic{ width:16px; height:16px; color:var(--purple); }
.foot-focused{ padding:22px 0 90px; border-top:1px solid var(--line); background:#fff; }
.foot-focused .fine{ margin:0 0 6px; font-size:12.5px; color:var(--muted); }
.foot-focused .fine a{ color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.foot-focused .fbadge{ display:inline-flex; align-items:center; gap:4px; }
.foot-focused .fbadge .ic{ width:14px; height:14px; }
.step{ border:0; padding:0; margin:0 0 22px; min-width:0; }
.step > legend{ padding:0; margin-bottom:12px; font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; font-size:22px; color:var(--ink); }
.js .stepped .step > legend{ font-size:clamp(24px, 4.5vw, 30px); line-height:1.15; margin-bottom:18px; }
.step-nav{ display:none; justify-content:space-between; gap:10px; margin-top:10px; }
.js .stepped .step-nav{ display:flex; }
.step-nav.last{ display:flex; }
.step-nav .btn{ flex:1; }
.more-optional{ margin:4px 0 14px; }
.more-optional summary{ cursor:pointer; color:var(--purple); font-weight:600; font-size:14.5px; padding:6px 0; }
.more-optional[open] summary{ margin-bottom:10px; }
.dob-boxes{ display:flex; align-items:center; gap:8px; }
.dob-boxes input{ text-align:center; font-size:20px; font-weight:600; letter-spacing:.04em; padding-left:6px; padding-right:6px; min-width:0; }
.dob-boxes input[name="dob_m"], .dob-boxes input[name="dob_d"]{ flex:1 1 0; max-width:5em; }
.dob-boxes input[name="dob_y"]{ flex:1.6 1 0; max-width:7em; }
.dob-boxes span{ color:var(--muted-lt); font-size:22px; }
.zip-note{ font-size:13.5px; font-weight:600; margin:-8px 0 14px; }
.routing-note{ margin:-8px 0 14px; padding:9px 12px; border-radius:10px; background:#e8f6ee; color:#1a7f4b; font-size:13.5px; font-weight:600; }
.routing-note.choose{ background:var(--paper); color:var(--ink); border:1px solid var(--line); }
.routing-picks{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.routing-pick{ min-height:44px; padding:10px 14px; border-radius:10px; border:1.5px solid var(--purple); background:#fff; color:var(--purple); font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
/* The top pill is a button now (heat map: 245 taps a day on it), straight to the first question. */
.eyebrow-btn{ padding:9px 16px; border-radius:999px; background:#fff; border:1.5px solid var(--line-2); color:var(--ink); text-decoration:none; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.eyebrow-btn:hover{ border-color:var(--ink); box-shadow:var(--shadow-sm); }
@media (max-width: 420px){ .eyebrow-btn{ white-space:nowrap; font-size:11px; letter-spacing:.03em; padding:9px 13px; gap:6px; } }
.join-panel.flash-start{ animation:start-glow 1.2s ease-out; }
@keyframes start-glow{ 0%{ box-shadow:0 0 0 0 rgba(42,20,102,.35); } 100%{ box-shadow:0 0 0 14px rgba(42,20,102,0); } }
@media (prefers-reduced-motion: reduce){ .join-panel.flash-start{ animation:none; } }
.zip-note.checking{ color:var(--muted); font-weight:500; }
.zip-note.ok{ color:#1a7f4b; }
.zip-note.warn{ color:#b42318; }.secure-note{ display:flex; gap:8px; align-items:center; font-size:13.5px; color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:0 0 14px; }
.secure-note .ic{ width:18px; height:18px; flex:0 0 18px; color:var(--purple); }
/* The Account numbers step: the reassurance and "pop over, come back" line stay short, so both boxes fit above the
   sticky Continue on a phone. */
.step-numbers .secure-note{ padding:7px 10px; margin:0 0 8px; font-size:13px; line-height:1.35; }
.step-numbers .why{ font-size:14px; margin:0 0 10px; }
.preapproved{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; padding:18px 30px; border-radius:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); margin-bottom:10px; }
.pa-tag{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--purple); background:#fff; padding:4px 10px; border-radius:6px; }
.pa-amt{ font-family:var(--font-display); font-weight:800; font-size:clamp(48px,11vw,76px); color:#fff; line-height:1.05; letter-spacing:-.03em; }
.pa-sub{ color:var(--muted-lt); font-size:15px; }
.loan-offer{ border:2px solid var(--purple); }
.pending-credit{ display:flex; gap:12px; align-items:center; padding:14px 16px; border-radius:12px; margin:0 0 18px; background:var(--purple); color:#fff; font-size:14px; }
.pending-credit strong{ color:#fff; }
.pending-credit > span:last-child{ margin-left:auto; font-size:24px; }
/* Members' cash advance links (live for an hour after they come back). */
.offer-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.offer-list li{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.offer-list li > div{ display:flex; flex-direction:column; gap:2px; }
.choice-field{ border:0; padding:0; margin:0 0 16px; min-width:0; }
.choice-field legend{ font-weight:600; font-size:14px; padding:0; margin-bottom:8px; color:var(--ink); }
.tap-choices{ display:grid; gap:8px; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.tap-choices.cols-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.tap-choices.cols-4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width: 420px){ .tap-choices.cols-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
/* Tap choices look like options, not boxes: a radio ring, purple edge, filled with a tick when chosen. */
.tap-one{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:#efe9fb; color:var(--purple); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; vertical-align:middle; }
.tap{ position:relative; display:block; margin:0; cursor:pointer; font-weight:600; }
.tap input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.tap span{ display:flex; align-items:center; gap:10px; min-height:54px; padding:10px 14px; border:2px solid #cdc3ea; border-radius:12px; background:#fff; color:var(--ink); text-align:left; font-size:15px; line-height:1.25; box-shadow:0 1px 2px rgba(42,20,102,.08); transition:background .12s, border-color .12s, color .12s, box-shadow .12s; }
.tap span::before{ content:""; flex:0 0 20px; width:20px; height:20px; border-radius:50%; border:2px solid var(--purple); background:#fff; box-sizing:border-box; }
.tap:hover span, .tap:active span{ border-color:var(--purple); background:#f7f4fd; }
.tap input:checked + span{ background:var(--purple); border-color:var(--purple); color:#fff; box-shadow:0 4px 12px rgba(42,20,102,.25); }
.tap input:checked + span::before{ border-color:#fff; background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%232a1466' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat; }
.tap input:focus-visible + span{ outline:3px solid rgba(42,20,102,.35); outline-offset:2px; }
.choice-field.has-error .tap span{ border-color:var(--bad); }
/* A quiet option ("No thanks"): still a full tap target, but it doesn't compete with the real choices. */
.tap.quiet span{ background:transparent; border-style:dashed; border-color:#cdc3ea; color:var(--muted); font-weight:600; box-shadow:none; }
.tap.quiet span::before{ border-color:#b7acd9; }
.tap.quiet input:checked + span{ background:var(--ink); border-style:solid; border-color:var(--ink); color:#fff; }
.tap.quiet input:checked + span::before{ border-color:#fff; }
.step-summary{ margin:-6px 0 18px; padding:9px 14px; border-radius:8px; background:var(--paper); color:var(--purple); font-weight:600; font-size:14px; text-align:center; }
.js-only{ display:none; }
.js .js-only{ display:flex; }
.quick-amounts{ flex-wrap:wrap; gap:8px; margin:-8px 0 18px; }
.quick-amounts .pill{ padding:7px 14px; font-size:14px; font-weight:600; }
form[data-steps]{ scroll-margin-top:84px; }

/* ===== policy pages + contact ===== */
.legal{ max-width:760px; margin:0 auto; }
.legal h1{ margin-bottom:18px; }
.legal-body{ font-size:16px; line-height:1.7; color:#2f2849; }
.legal-body h2{ font-size:23px; margin:34px 0 12px; scroll-margin-top:90px; }
.legal-body h3{ font-size:18px; margin:24px 0 8px; }
.legal-body p{ margin:0 0 14px; }
.legal-body ul{ margin:0 0 16px; padding-left:22px; }
.legal-body li{ margin:0 0 6px; }
.legal-body a{ color:var(--purple); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.legal-help{ display:flex; flex-direction:column; gap:4px; margin-top:34px; padding:18px 20px; border-radius:var(--radius); background:var(--paper); border:1px solid var(--line); }
.honeypot{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.contact-quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.contact-quick a{ display:flex; gap:10px; align-items:center; padding:14px; border-radius:var(--radius); background:#fff; border:1px solid var(--line); font-size:12.5px; color:var(--muted); }
.contact-quick a .ic{ width:22px; height:22px; color:var(--purple); flex:0 0 22px; }
.contact-quick strong{ display:block; color:var(--ink); font-size:14px; }
.contact-done .done-ic{ width:64px; height:64px; margin:0 auto 12px; border-radius:50%; background:#e8f6ee; color:var(--good); display:flex; align-items:center; justify-content:center; }
.contact-done .done-ic .ic{ width:32px; height:32px; }
.center.fine-print{ text-align:center; }

/* ===== footer ===== */
.foot{ background:var(--ink); color:#c9c4d9; padding:0 0 30px; }
.foot .brand{ color:#fff; }
.foot-trust{ background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.08); }
.foot-trust .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:26px 24px; }
.ft{ display:flex; gap:12px; align-items:center; color:inherit; }
.foot a.ft{ display:flex; padding:0; }
.ft-ic{ width:40px; height:40px; flex:0 0 40px; border-radius:10px; background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center; }
.ft strong{ display:block; color:#fff; font-size:14.5px; line-height:1.25; }
.ft span:not(.ft-ic){ display:block; font-size:12.5px; color:#a9a3bd; line-height:1.35; }
.foot-main{ display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:28px; padding:44px 0 32px; }
.foot-brand .brand{ display:inline-flex; margin-bottom:10px; }
.foot-brand .blurb{ margin:0 0 16px; font-size:14px; color:#a9a3bd; max-width:32ch; }
.foot .foot-h{ font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin:0 0 14px; }
.foot a{ display:block; color:#c9c4d9; font-size:14px; padding:5px 0; } .foot a:hover{ color:#fff; }
.foot-social{ display:flex; gap:10px; margin-top:18px; }
.foot .foot-social a{ width:38px; height:38px; padding:0; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center; }
.foot .foot-social a:hover{ background:#fff; color:var(--ink); }
.foot-contact{ font-size:13.5px; color:#a9a3bd; margin:18px 0 0; }
.foot .foot-contact a{ display:inline; padding:0; color:#fff; text-decoration:underline; text-underline-offset:3px; }
.foot-col a{ line-height:1.35; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.10); padding-top:20px; }
.foot-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.fbadge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#c9c4d9; border:1px solid rgba(255,255,255,.16); border-radius:6px; padding:5px 10px; }
.fbadge .ic{ width:14px; height:14px; }
.foot .fine{ margin:0 0 6px; font-size:12.5px; color:#a9a3bd; line-height:1.7; }
.foot .fine.company strong{ color:#fff; font-weight:600; }
.foot .btn-lime{ background:#fff; color:var(--ink); }
@media (max-width:1000px){
  .foot-main{ grid-template-columns:repeat(4,1fr); }
  .foot-brand{ grid-column:1 / -1; }
  .foot-trust .wrap{ grid-template-columns:1fr 1fr; }
}

/* ===== phones ===== */
@media (max-width:760px){
  .foot-trust .wrap{ grid-template-columns:1fr 1fr; gap:16px 12px; padding:20px 16px; }
  .ft{ gap:10px; align-items:flex-start; }
  .ft-ic{ width:36px; height:36px; flex-basis:36px; border-radius:8px; }
  .ft-ic .ic{ width:18px; height:18px; }
  .ft strong{ font-size:13.5px; }
  .ft span:not(.ft-ic){ font-size:12px; }
  .foot-main{ grid-template-columns:1fr 1fr; gap:26px 18px; padding:30px 0 24px; }
  .foot-col a{ padding:6px 0; }
  .contact-quick{ grid-template-columns:1fr; }
  .g-thumbs{ display:none; }
  .join-hero .wrap{ padding:26px 16px 66px; }
  .join-panel{ margin-top:-44px; }
  .join-hero.compact .wrap{ padding:18px 16px 58px; }
  .join-hero.compact .lead{ font-size:16px; }
  .join-hero .trust-line{ font-size:13px; gap:2px 12px; margin-top:10px; }
  .join-after .hero-products{ display:flex; margin:0 -16px; }
  .step-nav{ position:sticky; bottom:calc(76px + env(safe-area-inset-bottom)); background:#fff; padding:10px 0; z-index:5; }
  /* The application pages have no tab bar: the Continue button sits at the very bottom, not floating over the tap tiles. */
  body:has(.site-head.focused) .step-nav{ bottom:env(safe-area-inset-bottom); }
  body:has(.site-head.focused){ padding-bottom:env(safe-area-inset-bottom); }
  .js .stepped .row{ display:block; }
  .legal-body{ font-size:15.5px; }
  .legal-body h2{ font-size:21px; }
  body{ padding-bottom:calc(70px + env(safe-area-inset-bottom)); }
  body.has-buybar{ padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
  .hide-sm{ display:none !important; }

  .sale-bar{ flex-wrap:nowrap; justify-content:flex-start; gap:10px; padding:8px 14px; font-size:13px; }
  .sale-bar-pct{ font-size:13px; padding:2px 8px; flex:0 0 auto; }
  .sale-bar-text{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sale-bar-cta{ display:none; }
  .sale-bar-arrow{ display:block; font-size:22px; line-height:1; }

  /* compact header: brand + icons; navigation lives in the tab bar */
  .site-head .wrap{ flex-wrap:nowrap; padding:10px 16px; gap:10px; }
  .brand{ font-size:20px; }
  .nav{ display:none; }
  .head-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }
  .icon-btn{ position:relative; width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--ink); background:var(--paper); }
  .icon-btn .ic{ width:21px; height:21px; }
  .icon-badge{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--purple); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }

  /* tighter rhythm */
  .section{ padding:36px 0; } .section-tight{ padding:26px 0; }
  .head-row{ margin-bottom:14px; } .head-row h2, .head-row h1, .h2{ font-size:22px; }
  .head{ margin-bottom:20px; } .head h2{ font-size:24px; } .head p{ font-size:15px; }

  /* home hero */
  .hero-retail .wrap{ padding:28px 16px 24px; gap:22px; }
  .kicker{ font-size:12px; margin-bottom:10px; }
  .hero-copy h1{ font-size:clamp(28px,8vw,36px); }
  .hero-copy .lead{ font-size:15.5px; margin:12px 0 18px; }
  .hero-cta{ flex-direction:column; } .hero-cta .btn{ width:100%; }
  .hero-proof{ gap:8px 16px; font-size:13px; margin-top:16px; }
  .hero-products{ display:flex; overflow-x:auto; gap:10px; margin:0 -16px; padding:4px 16px 8px; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .hero-products::-webkit-scrollbar{ display:none; }
  .hp{ flex:0 0 150px; scroll-snap-align:start; padding:12px; }
  .hp-price{ font-size:13.5px; padding:4px 8px; }
  .brands .wrap{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; gap:26px; padding:12px 16px; scrollbar-width:none; font-size:14px; }
  .brands .wrap::-webkit-scrollbar{ display:none; }
  .brands span{ white-space:nowrap; }

  /* tiles: a swipe row on phones */
  .tiles{ display:flex; overflow-x:auto; gap:10px; margin:0 -16px; padding:2px 16px 8px; scroll-snap-type:x mandatory; scrollbar-width:none; scroll-padding-inline:16px; }
  .tiles::-webkit-scrollbar{ display:none; }
  .tile{ flex:0 0 138px; scroll-snap-align:start; padding:10px 10px 10px; }
  .tile-name{ font-size:13.5px; }
  .cats, .scroll-row{ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:8px; margin:0 -16px; padding:2px 16px 6px; scrollbar-width:none; scroll-snap-type:x proximity; }
  .cats::-webkit-scrollbar, .scroll-row::-webkit-scrollbar{ display:none; }
  .prodband, .cats, .scroll-row, .share-row, .hero-products{ scroll-padding-inline:16px; }
  .cat{ flex:0 0 auto; display:flex; align-items:center; gap:9px; padding:8px 14px 8px 8px; border-radius:999px; }
  .cat .ic{ width:32px; height:32px; font-size:16px; margin:0; }
  .cat .nm{ font-size:14px; white-space:nowrap; }
  .scroll-row .pill{ flex:0 0 auto; white-space:nowrap; padding:9px 14px; }
  .filters{ margin-bottom:16px; }
  .shop-tools{ flex-wrap:nowrap; }
  .shop-tools input[type=search]{ max-width:none; flex:1; min-width:0; }
  .shop-tools select{ min-width:0; width:44%; flex:0 0 auto; }

  /* product cards, 2-up */
  .grid{ gap:10px; }
  .card .thumb{ padding:10px; }
  .card .body{ padding:10px 11px 12px; gap:3px; }
  .brand-line{ font-size:11px; }
  .card .nm{ font-size:14px; }
  .card .price .wk{ font-size:20px; }
  .card .price .meta{ font-size:12px; }
  .how-steps li{ padding:16px; }

  /* product page */
  .pdp{ gap:18px; }
  .pdp .gallery{ margin:0 -16px; border-radius:0; border-left:0; border-right:0; aspect-ratio:1/1; }
  .pdp h1{ font-size:24px; margin:4px 0 10px; }
  .pdp .tagrow{ gap:6px; margin-bottom:8px; }
  .chip{ font-size:11px; padding:4px 8px; }
  .pricebox{ padding:18px; }
  .pricebox .big{ font-size:38px; }
  .buyrow .btn-lg{ padding:15px 14px; font-size:16px; flex:1; white-space:nowrap; }
  .crumbs{ display:none; }
  .pdp-cols{ gap:24px; }
  .reviewers{ padding:18px; }

  /* share sheet */
  .share-row{ flex-wrap:nowrap; overflow-x:auto; gap:4px; margin:0 -18px; padding:2px 14px 4px; scrollbar-width:none; }
  .share-row::-webkit-scrollbar{ display:none; }
  .sh{ flex:0 0 68px; flex-direction:column; gap:6px; padding:4px 0; border:0; background:none; font-size:11.5px; font-weight:600; }
  .sh-ic{ width:50px; height:50px; }
  .sh-ic .ic{ width:24px; height:24px; }
  .share-native{ padding:15px 20px; font-size:16px; }
  .earn-card{ padding:16px 18px; }
  .account-cols > div:last-child{ order:-1; }
  .panel{ padding:18px; }
  .balance .amount{ font-size:34px; }
  .two-col{ gap:16px; }
  .invite-hero .wrap{ padding:30px 16px 36px; }
  .ref-stat .n{ font-size:22px; }
  .linkbox input{ font-size:13px; }

  /* bottom tab bar */
  .tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; justify-content:space-around; align-items:flex-end;
    background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-top:1px solid var(--line); padding:6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .tab{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; min-height:50px; font-size:11px; font-weight:600; color:var(--muted); -webkit-tap-highlight-color:transparent; }
  .tab .ic{ width:24px; height:24px; }
  .tab.on{ color:var(--purple); }
  /* Signed-out visitors: the Apply tab is outlined so it reads as the thing to tap. */
  .tab.tab-apply{ color:var(--purple); margin:0 4px; border:2px solid var(--purple); border-radius:14px; min-height:48px; padding:4px 6px 5px; background:#f7f4fd; font-weight:700; }
  .tab.tab-apply.on{ background:var(--purple); color:#fff; }
  .tab-badge{ position:absolute; top:-2px; left:calc(50% + 5px); min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--sale); color:#fff; font-size:10.5px; display:flex; align-items:center; justify-content:center; }
  body.has-buybar .tabbar{ display:none; }

  /* sticky buy bar on product pages */
  .buybar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; align-items:center; gap:10px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(21,18,31,.08); }
  .bb-price{ flex:1; min-width:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 4px; }
  a.bb-price{ color:inherit; text-decoration:none; }
  .bb-price strong{ font-family:var(--font-display); font-size:22px; letter-spacing:-.02em; color:var(--purple); }
  .bb-price strong.sale{ color:var(--sale); } .bb-price small{ color:var(--muted); font-size:13px; }
  .bb-price .bb-lock{ font-size:15px; }
  .bb-save{ background:var(--sale); color:#fff; font-size:11.5px; font-weight:700; padding:2px 6px; border-radius:5px; }
  .bb-share{ width:46px; height:46px; flex:0 0 46px; border-radius:10px; border:1.5px solid var(--line-2); background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:center; }
  .buybar form{ margin:0; }
  .buybar .btn{ padding:13px 18px; font-size:15.5px; white-space:nowrap; }
}

/* ===== product families: option picker ===== */
.opts{ display:grid; gap:16px; margin:0 0 20px; }
.opt-label{ font-size:14px; color:var(--muted); margin-bottom:8px; }
.opt-label strong{ color:var(--ink); font-weight:600; }
.opt-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.opt{ display:flex; flex-direction:column; align-items:flex-start; min-width:88px; padding:9px 14px; border:1.5px solid var(--line-2); border-radius:10px; background:#fff; color:var(--ink); text-decoration:none; line-height:1.2; transition:border-color .15s, box-shadow .15s; }
.opt .ov{ font-weight:600; font-size:15px; }
.opt .op{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.opt:hover{ border-color:var(--ink); }
.opt.on{ border-color:var(--purple); box-shadow:0 0 0 2px var(--purple); }
.opt.near:not(.on){ border-style:dashed; }
.swatches{ display:flex; flex-wrap:wrap; gap:10px; }
.sw{ position:relative; width:54px; height:54px; border-radius:50%; background:var(--paper); border:2px solid #fff; box-shadow:0 0 0 1px var(--line); overflow:visible; transition:box-shadow .15s; }
.sw img{ width:100%; height:100%; object-fit:contain; border-radius:50%; background:#fff; padding:4px; }
.sw .sw-dot{ position:absolute; right:-2px; bottom:-2px; width:18px; height:18px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.12); }
.sw:not(:has(img)) .sw-dot{ inset:4px; width:auto; height:auto; border:0; }
.sw:hover{ box-shadow:0 0 0 2px var(--purple); }
.sw.on{ box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--purple); }
.sw.near:not(.on){ opacity:.8; }
@media (max-width:560px){
  .opt{ min-width:0; flex:1 1 calc(33% - 8px); }
  .sw{ width:48px; height:48px; }
}

/* ===== "checking your details" moment + lender matching ===== */
.checking{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--purple); animation:checking-out .45s ease 4.4s forwards; }
.checking-card{ width:100%; max-width:380px; text-align:center; color:#fff; }
.checking-title{ font-family:var(--font-display); font-weight:800; font-size:26px; margin:18px 0 18px; }
.checking-ring{ position:relative; width:72px; height:72px; margin:0 auto; border-radius:50%; border:5px solid rgba(255,255,255,.18); border-top-color:#fff; animation:checking-spin 1s linear infinite; }
.checking-ring .dia{ display:none; }
.checking-steps{ list-style:none; padding:0; margin:0 auto; display:grid; gap:10px; text-align:left; max-width:300px; }
.checking-steps li{ position:relative; padding-left:34px; font-weight:600; font-size:16px; opacity:0; transform:translateY(6px); animation:checking-in .35s ease forwards; }
.checking-steps li::before{ content:""; position:absolute; left:0; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%; border:2px solid rgba(255,255,255,.35); }
.checking-steps li::after{ content:"✓"; position:absolute; left:0; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%; background:#fff; color:var(--purple); font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; transform:scale(0); animation:checking-tick .25s ease forwards; }
.checking-steps .d0{ animation-delay:.2s; } .checking-steps .d0::after{ animation-delay:1s; }
.checking-steps .d1{ animation-delay:1s; } .checking-steps .d1::after{ animation-delay:1.9s; }
.checking-steps .d2{ animation-delay:1.9s; } .checking-steps .d2::after{ animation-delay:2.8s; }
.checking-steps .d3{ animation-delay:2.8s; } .checking-steps .d3::after{ animation-delay:3.8s; }
.join-hero.revealed .preapproved{ animation:pa-pop .6s cubic-bezier(.2,1.4,.4,1) 4.6s both; }
/* Waiting on the lender: the screen stays up (no fade-out); refreshes show the done checks at once. */
.checking.hold{ animation:none; }
.checking.quick .checking-steps li, .checking.quick .checking-steps li::after{ animation-duration:.01s; animation-delay:0s !important; }
.checking-steps .d4{ animation-delay:3.8s; } .checking-steps .d4::after{ animation:none; transform:scale(0); }
.checking-steps li.wait::before{ border-color:rgba(255,255,255,.35); border-top-color:#fff; animation:checking-spin .9s linear infinite; }
.checking-note{ margin:20px 0 0; font-size:14.5px; color:rgba(255,255,255,.85); }
.checking-skip{ margin:14px 0 0; font-size:13.5px; } .checking-skip a{ color:#fff; text-decoration:underline; }
/* On a light hero the card is white with the number in brand purple (white-on-grey was unreadable). */
.preapproved.light{ color:var(--ink); background:#fff; border-color:var(--line); box-shadow:0 6px 24px rgba(42,20,102,.10); }
.preapproved.light .pa-tag{ background:var(--purple); color:#fff; }
.preapproved.light .pa-amt{ color:var(--purple); }
.preapproved.light .pa-sub{ color:var(--muted); }
@keyframes checking-spin{ to{ transform:rotate(360deg); } }
@keyframes checking-in{ to{ opacity:1; transform:none; } }
@keyframes checking-tick{ to{ transform:scale(1); } }
@keyframes checking-out{ to{ opacity:0; visibility:hidden; } }
@keyframes pa-pop{ from{ transform:scale(.6); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .checking{ animation-delay:1.2s; }
  .checking-ring{ animation:none; }
  .checking-steps li, .checking-steps li::after{ animation-duration:.01s; animation-delay:0s !important; }
  .join-hero.revealed .preapproved{ animation:none; }
}
.matching .checking-ring{ border-color:var(--line); border-top-color:var(--purple); margin-bottom:16px; }
.checking-steps.static{ margin:6px auto 18px; }
.checking-steps.static li{ opacity:1; transform:none; animation:none; color:var(--muted); }
.checking-steps.static li::before{ border-color:var(--line-2); }
.checking-steps.static li::after{ animation:none; transform:scale(0); background:var(--purple); color:#fff; }
.checking-steps.static li.done{ color:var(--ink); }
.checking-steps.static li.done::after{ transform:scale(1); }
.checking-steps.static li.now{ color:var(--purple); }
.checking-steps.static li.now::before{ border-color:var(--purple); border-top-color:transparent; animation:checking-spin .9s linear infinite; }

/* ===== the loan offer after signing up ===== */
.loan-hero{ position:relative; overflow:hidden; margin:0 0 18px; padding:26px 22px 22px; border-radius:16px; color:#fff; background:var(--purple); }
.loan-badge{ display:inline-block; padding:5px 10px; border-radius:6px; background:#fff; color:var(--purple); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.loan-hero h2{ font-size:clamp(26px, 5.5vw, 36px); line-height:1.1; margin:14px 0 10px; color:#fff; }
.loan-hero h2 .lime{ color:#fff; opacity:.85; display:block; }
.loan-sub{ color:rgba(255,255,255,.85); font-size:16px; margin:0 0 18px; }
.loan-hero .choice-field legend{ color:#fff; font-weight:600; }
.loan-hero .tap span{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.55); color:#fff; font-size:17px; min-height:56px; box-shadow:none; }
.loan-hero .tap span::before{ border-color:#fff; background:transparent; }
.loan-hero .tap:hover span{ border-color:#fff; background:rgba(255,255,255,.14); }
.loan-hero .tap input:checked + span{ background:#fff; border-color:#fff; color:var(--purple); }
.loan-hero .tap input:checked + span::before{ border-color:var(--purple); }
.loan-hero .tap-one{ background:rgba(255,255,255,.18); color:#fff; }
.loan-hero .consent{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
.loan-hero .consent label{ color:rgba(255,255,255,.9); font-size:13px; }
.loan-hero .consent input[type=checkbox]{ background:rgba(255,255,255,.3); }
.loan-hero .consent input[type=checkbox]:checked{ background:var(--lime); }
.loan-hero .consent input[type=checkbox]:checked::before{ background:var(--ink); }
.loan-hero .consent.on{ background:rgba(255,255,255,.14); border-color:var(--lime); }
.loan-fcra{ font-size:12.5px; color:rgba(255,255,255,.75); margin:0 0 14px; }
.loan-cta{ min-height:60px; font-size:19px; font-weight:700; animation:pulse 2s ease-out 1s 3; }
.loan-points{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; font-size:14px; font-weight:600; color:rgba(255,255,255,.9); }
.loan-hero .fine-print{ color:rgba(255,255,255,.6); text-align:center; }

/* The order page (Darren, 2026-10-15: "jazz it up a bit"): what they bought, big, a little confetti, and where it's up to. */
.order-hero{ position:relative; overflow:hidden; text-align:center; padding:28px 22px 24px; margin-bottom:18px;
  background:radial-gradient(120% 70% at 50% 0%, #efe9ff 0%, #fff 62%); border-color:#e3dbfb; }
.order-hero h1{ margin:14px 0 4px; font-size:clamp(26px, 6.5vw, 34px); }
.order-hero-img{ position:relative; width:min(220px, 62vw); aspect-ratio:1; margin:0 auto; padding:14px; border-radius:24px; background:#fff;
  box-shadow:0 14px 36px rgba(42,20,102,.16), 0 0 0 6px rgba(200,255,61,.35); animation:order-pop .7s cubic-bezier(.2,1.4,.4,1) both; }
.order-hero-img img{ width:100%; height:100%; object-fit:contain; }
.order-hero-emoji{ font-size:56px; animation:order-pop .7s cubic-bezier(.2,1.4,.4,1) both; }
.order-hero-item{ margin:0 0 2px; font-weight:700; color:var(--ink); }
.order-hero-meta{ margin:0; font-size:14px; }
.order-hero-note{ margin:16px 0 0; }
.order-steps{ list-style:none; display:flex; justify-content:space-between; gap:4px; margin:20px 0 0; padding:0; position:relative; }
.order-steps::before{ content:''; position:absolute; top:11px; left:12%; right:12%; height:3px; border-radius:2px; background:var(--line); }
.order-steps li{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--muted); }
.order-steps .dot{ width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid var(--line-2); display:grid; place-items:center; }
.order-steps li.done{ color:var(--ink); }
.order-steps li.done .dot{ background:var(--good); border-color:var(--good); }
.order-steps li.done .dot::after{ content:'✓'; color:#fff; font-size:12px; font-weight:800; }
.order-steps li.now{ color:var(--purple); }
.order-steps li.now .dot{ border-color:var(--purple); border-top-color:transparent; animation:checking-spin .9s linear infinite; }
.confetti{ position:absolute; inset:0; pointer-events:none; }
.confetti i{ position:absolute; top:-12px; width:8px; height:14px; border-radius:2px; opacity:0; animation:confetti-fall 1.9s ease-in .15s 1 forwards; }
.confetti i:nth-child(4n+1){ background:var(--lime); } .confetti i:nth-child(4n+2){ background:#7c4dff; } .confetti i:nth-child(4n+3){ background:var(--coral); } .confetti i:nth-child(4n){ background:#2A1466; }
.confetti i:nth-child(1){ left:6%; animation-delay:.05s; } .confetti i:nth-child(2){ left:13%; animation-delay:.3s; } .confetti i:nth-child(3){ left:20%; animation-delay:.12s; }
.confetti i:nth-child(4){ left:28%; animation-delay:.4s; } .confetti i:nth-child(5){ left:35%; animation-delay:.2s; } .confetti i:nth-child(6){ left:43%; animation-delay:.5s; }
.confetti i:nth-child(7){ left:50%; animation-delay:.08s; } .confetti i:nth-child(8){ left:57%; animation-delay:.35s; } .confetti i:nth-child(9){ left:64%; animation-delay:.18s; }
.confetti i:nth-child(10){ left:71%; animation-delay:.45s; } .confetti i:nth-child(11){ left:78%; animation-delay:.1s; } .confetti i:nth-child(12){ left:85%; animation-delay:.28s; }
.confetti i:nth-child(13){ left:91%; animation-delay:.38s; } .confetti i:nth-child(14){ left:96%; animation-delay:.22s; }
@keyframes confetti-fall{ 0%{ opacity:1; transform:translateY(0) rotate(0); } 100%{ opacity:0; transform:translateY(300px) rotate(540deg); } }
@keyframes order-pop{ 0%{ transform:scale(.6); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .confetti{ display:none; } .order-hero-img, .order-hero-emoji, .order-steps li.now .dot{ animation:none; } }

.order-placed-note{ display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:12px 16px; border-radius:12px; background:#e8f6ee; color:var(--good); font-weight:700; }
.order-placed-note span{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--good); color:#fff; font-size:14px; }

/* Checkout: "Place order + $750 cash advance" (Darren, 2026-10-15: "make it look sexy"), then "Just place order". */
.cash-checkout{ margin-top:14px; }
.cash-deal{ position:relative; overflow:hidden; padding:24px 20px 20px; border-radius:20px; color:#fff; text-align:center;
  background:radial-gradient(120% 80% at 100% 0%, rgba(124,77,255,.75) 0%, rgba(124,77,255,0) 60%), radial-gradient(90% 70% at 0% 100%, rgba(200,255,61,.18) 0%, rgba(200,255,61,0) 60%), linear-gradient(160deg, #2A1466 0%, #170a3d 100%);
  box-shadow:0 18px 44px rgba(76,40,190,.38), inset 0 1px 0 rgba(255,255,255,.12); }
.cash-deal::before{ content:''; position:absolute; top:-60px; right:-50px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(200,255,61,.35), rgba(200,255,61,0) 70%); filter:blur(6px); pointer-events:none; }
.cash-tag{ position:relative; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:var(--lime); color:var(--ink); font-size:13px; font-weight:800; letter-spacing:.02em; }
.cash-amount{ position:relative; margin:14px 0 0; font-family:var(--font-display); font-weight:800; font-size:clamp(64px, 19vw, 92px); line-height:.95; letter-spacing:-.045em;
  background:linear-gradient(95deg, #C8FF3D 0%, #8CFFB4 55%, #C8FF3D 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:cash-sheen 4s ease-in-out infinite; }
.cash-word{ position:relative; margin-top:4px; font-size:15px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.92); }
.cash-sub{ position:relative; margin:14px 0 16px; font-size:15.5px; color:rgba(255,255,255,.86); }
.cash-deal .consent{ position:relative; text-align:left; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
.cash-deal .consent label{ color:rgba(255,255,255,.9); font-size:13px; }
.cash-deal .consent input[type=checkbox]{ background:rgba(255,255,255,.3); }
.cash-deal .consent input[type=checkbox]:checked{ background:var(--lime); }
.cash-deal .consent input[type=checkbox]:checked::before{ background:var(--ink); }
.cash-deal .consent.on{ background:rgba(255,255,255,.14); border-color:var(--lime); }
.cash-deal .loan-fcra{ position:relative; text-align:left; }
.cash-deal .clamp-more{ color:#fff; }
.btn-cash{ position:relative; overflow:hidden; min-height:64px; border:0; border-radius:14px; font-size:18.5px; font-weight:800; color:var(--ink);
  background:linear-gradient(95deg, #C8FF3D 0%, #9DFF7A 100%); box-shadow:0 10px 26px rgba(200,255,61,.35), inset 0 -2px 0 rgba(0,0,0,.12); }
.btn-cash:hover{ filter:brightness(1.04); }
.btn-cash::after{ content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%); transform:skewX(-18deg); animation:cash-shine 3.2s ease-in-out 1s infinite; }
.cash-deal .loan-points{ position:relative; }
.cash-deal .fine-print{ position:relative; color:rgba(255,255,255,.6); font-size:12px; margin:12px 0 0; }
.just-order{ margin-top:12px; }
@keyframes cash-shine{ 0%{ left:-60%; } 45%, 100%{ left:130%; } }
@keyframes cash-sheen{ 0%, 100%{ background-position:0% 0; } 50%{ background-position:100% 0; } }
@media (prefers-reduced-motion: reduce){ .btn-cash::after, .cash-amount{ animation:none; } }

/* "Share your YES" pop-up after an order: a bottom sheet on phones, a card on wider screens. */
.sharepop{ position:fixed; inset:0; z-index:210; display:flex; align-items:flex-end; justify-content:center; } /* over the waiting page's "checking" screen */
.sharepop[hidden]{ display:none; }
.sharepop-bg{ position:absolute; inset:0; background:rgba(21,18,31,.6); opacity:0; transition:opacity .25s; }
.sharepop-sheet{ position:relative; width:100%; max-width:480px; max-height:94vh; overflow-y:auto; overscroll-behavior:contain; background:#fff; border-radius:24px 24px 0 0;
  padding:12px 18px calc(16px + env(safe-area-inset-bottom)); text-align:center; box-shadow:0 -12px 40px rgba(21,18,31,.3);
  transform:translateY(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1); }
.sharepop.open .sharepop-bg{ opacity:1; }
.sharepop.open .sharepop-sheet{ transform:none; }
.sharepop-grab{ display:block; width:44px; height:5px; border-radius:3px; background:var(--line); margin:0 auto 10px; }
.sharepop-x{ position:absolute; top:10px; right:12px; width:36px; height:36px; border:0; border-radius:50%; background:var(--paper); color:var(--ink); font-size:24px; line-height:1; cursor:pointer; }
.sharepop-card{ margin:14px 6px 16px; border-radius:14px; overflow:hidden; box-shadow:0 10px 28px rgba(45,21,105,.3); transform:rotate(-1.5deg); }
.sharepop-card img{ display:block; width:100%; height:auto; aspect-ratio:1200/630; background:var(--purple); }
.sharepop h2{ font-size:30px; line-height:1.08; margin:0 0 6px; }
.sharepop-sub{ color:var(--muted); margin:0 0 12px; font-size:16px; }
.sharepop-reward{ display:inline-flex; gap:6px; align-items:center; margin:0 0 14px; padding:7px 13px; border-radius:999px; background:#fff4d6; color:#6b4500; font-size:14px; font-weight:600; }
.sharepop-reward .ic{ width:16px; height:16px; }
.sharepop .share{ text-align:left; }
.sharepop .share-native{ font-size:17px; padding:16px 20px; }
.sharepop-later{ display:block; margin:8px auto 0; padding:10px 14px; border:0; background:none; color:var(--muted); font-weight:600; cursor:pointer; }
body.sharepop-on{ overflow:hidden; }
@media (min-width:720px){
  .sharepop{ align-items:center; }
  .sharepop-sheet{ border-radius:24px; opacity:0; transform:translateY(24px) scale(.97); transition:transform .25s, opacity .25s; }
  .sharepop.open .sharepop-sheet{ opacity:1; transform:none; }
  .sharepop-grab{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .sharepop-bg, .sharepop-sheet{ transition:none; } }

/* Phones: the first question's answers on the first screen (2026-10-15). The ad's headline and the trust line had pushed
   them below the fold, under the sticky Continue, on short screens (Facebook's in-app browser): same words, less room. */
@media (max-width:720px){
  .join-hero.compact .wrap{ padding:14px 16px 50px; }
  .join-hero .eyebrow-btn{ padding:7px 13px; }
  .join-hero.compact h1{ margin-top:8px; }
  .join-hero.compact h1.from-ad{ font-size:24px; line-height:1.12; }
  .join-hero.compact .limit-pop{ margin-top:8px; display:flex; align-items:baseline; justify-content:center; gap:8px; }
  .join-hero.compact .limit-pop small{ display:inline; margin:0; font-size:12px; }
  .join-hero.compact .limit-pop .num{ font-size:32px; }
  .join-hero.compact .lead{ margin-top:8px; font-size:15px; line-height:1.4; }
  .join-hero .lead-more{ display:none; }
  .join-hero .launch-note{ margin-top:4px; font-size:13px; }
  .join-hero .trust-line{ margin-top:8px; font-size:12.5px; }
  .join-hero .focus-product{ margin:8px 0 0; font-size:14px; }
  .join-panel{ margin-top:-40px; }
  .join-panel .stepbar{ margin-bottom:10px; }
  .js .stepped .step > legend{ font-size:22px; margin-bottom:10px; }
  .step .why{ margin:-4px 0 10px; font-size:13px; }
  .step .choice-field legend{ margin-bottom:6px; font-size:13px; }
}