/* Basqet landing page — mobile-first, fluid type, no fixed canvas. */

/* ---------- tokens ---------- */
:root {
  --cream: #F5F1E8; --paper: #FFFDF8; --ink: #16211B; --forest: #1D4A34; --forest-2: #163B2A; --green: #0F7D43;
  --mint: #7FE0A6; --tint: #E2EFE4; --sand: #E4DDCC; --line: #D9D1BF; --muted: #5E6A62; --body: #3E4A43; --yellow: #F5C518;
  --ss: #D2363C; --nf: #F5C518; --so: #1E7B3F; --wm: #1D63C4; --sw: #8B1E2F; --fc: #C4540A;
  --r-lg: 28px; --r-md: 18px; --r-sm: 12px;
  --ease-out: cubic-bezier(.22, .8, .24, 1); --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --shadow-card: 0 1px 0 rgba(22,33,27,.04), 0 30px 60px -32px rgba(22,33,27,.45);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: Figtree, 'Avenir Next', 'Segoe UI', system-ui, sans-serif; line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: Rubik, sans-serif; margin: 0; letter-spacing: -.02em; line-height: 1; font-weight: 800; }
p { margin: 0; }
em.i { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img, svg { display: block; }
.wrap { width: min(100% - 32px, 1200px); margin-inline: auto; }
.wrap.narrow { max-width: 820px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--paper); color: var(--ink); padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.centre { text-align: center; }
.centre .lead { margin-inline: auto; }
.fine { font: 500 13px/1.45 Figtree; color: var(--muted); }

/* type scale */
.eyebrow { font: 600 12px/1.6 Figtree; letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin: 0; }
.eyebrow span { display: inline-block; white-space: nowrap; }
.eyebrow.mint { color: var(--mint); }
h2 { font-size: clamp(36px, 3.2vw + 24px, 64px); margin-top: 12px; max-width: 16ch; }
.centre h2 { margin-inline: auto; }
.lead { font-size: clamp(17px, .5vw + 15px, 20px); color: var(--body); margin-top: 14px; max-width: 52ch; }
.band .lead { color: #D8E6DC; }
.head { margin-bottom: 28px; }
.head.split { display: grid; gap: 16px; }
@media (min-width: 900px) { .head.split { grid-template-columns: 1fr 1fr; align-items: end; } .head.split .lead { margin-top: 0; justify-self: end; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 14px; background: var(--forest); color: #fff; font: 700 17px Rubik; text-decoration: none; border: 0; cursor: pointer; transition: transform .22s var(--ease-pop), background .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.96); }
.btn.sm { min-height: 44px; padding: 0 18px; font-size: 15px; border-radius: 12px; }
@media (max-width: 699px) { .nav .btn.sm { min-height: 40px; padding: 0 14px; font-size: 14px; } }
.btn.mint { background: var(--mint); color: var(--forest); }
.btn.cream { background: var(--cream); color: var(--forest); }
.btn.ghost { background: transparent; color: #F5F1E8; box-shadow: inset 0 0 0 2px rgba(245,241,232,.5); }

/* store chips */
.stc { display: inline-block; font: 700 12px Rubik; padding: 4px 9px; border-radius: 999px; color: #fff; }
.stc.ss { background: var(--ss); } .stc.nf { background: var(--nf); color: var(--ink); } .stc.so { background: var(--so); } .stc.wm { background: var(--wm); } .stc.sw { background: var(--sw); } .stc.fc { background: var(--fc); }
.stc.big { font-size: clamp(15px, 1.4vw, 21px); padding: 12px 18px; border-radius: 999px; }

/* shelf tags + sticker */
.tag { background: var(--paper); border-radius: 12px; padding: 10px 12px 10px 16px; box-shadow: 0 14px 28px -14px rgba(22,33,27,.45), 0 0 0 1px rgba(0,0,0,.05); font: 600 13px/1.25 Figtree; color: var(--body); position: relative; }
.tag:before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: radial-gradient(circle, transparent 1.5px, #E4DDCC 1.6px) center/2px 8px repeat-y; }
.tag b { display: block; font: 800 13px Rubik; color: var(--green); margin-top: 6px; }
.tag[data-q] { display: flex; align-items: center; gap: 8px; white-space: nowrap; width: auto !important; }
.deco.tag { display: none; }
.tag[data-q] .qb { flex: none; }
.tag[data-q] .qb b { color: var(--green); }
.tag.hang:after { content: ""; position: absolute; top: -16px; left: 50%; width: 2px; height: 16px; background: rgba(255,255,255,.35); }
.sticker { width: 112px; height: 112px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-content: center; text-align: center; font: 800 10px Rubik; letter-spacing: .05em; text-transform: uppercase; rotate: -8deg; box-shadow: 0 14px 28px -14px rgba(0,0,0,.45); line-height: 1.15; padding: 0 8px; }
.sticker span { display: block; }
.sticker b { display: block; font-size: 27px; letter-spacing: -.03em; line-height: 1; margin: 3px 0; }
.float { animation: fl 5.5s ease-in-out infinite alternate; }
.float.d2 { animation-delay: -2s; } .float.d3 { animation-delay: -3.5s; }
@keyframes fl { from { translate: 0 0; } to { translate: 0 -8px; } }

/* green bands with depth */
.band { position: relative; isolation: isolate; background: var(--forest); color: #F5F1E8; overflow: clip; }
.band > .grain, .band > .spot, .band > .vignette, .heroband > .photo, .heroband > .tint, .heroband > .spot, .heroband > .beam, .heroband > .vignette, .heroband > .grain { position: absolute; pointer-events: none; }
.grain { inset: 0; z-index: -1; opacity: .16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 180px 180px; }
.band > .spot { z-index: -2; width: min(140vw, 980px); aspect-ratio: 1; left: 50%; top: 55%; translate: -50% -50%; background: radial-gradient(circle, rgba(127,224,166,.26) 0%, rgba(127,224,166,.08) 32%, rgba(127,224,166,0) 62%); filter: blur(6px); }
.band > .vignette { inset: 0; z-index: -2; background: radial-gradient(120% 85% at 50% 40%, transparent 45%, rgba(6,20,13,.55) 100%); }
.band .eyebrow { color: var(--mint); }
.band h2 { color: #FFFDF8; }
.band em.i { color: var(--mint); }

/* ---------- nav ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 8px; font: 800 22px Rubik; letter-spacing: -.02em; color: inherit; text-decoration: none; }
.brand .mark { width: 26px; height: 26px; overflow: visible; }
.navlinks { display: none; gap: 28px; font: 600 16px Figtree; }
.navlinks a { text-decoration: none; opacity: .9; }
.navlinks a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px) { .navlinks { display: flex; } }

/* ---------- hero: still phone, one-time load animation ---------- */
.heroband { position: relative; isolation: isolate; background: #1B4632; color: #F5F1E8; overflow: clip; }
/* Photo slot: site/assets/hero-tall.png (phones) and hero-wide.png (768px+). A missing file leaves the layer transparent. */
.heroband > .photo, .heroband > .tint, .heroband > .spot, .heroband > .beam, .heroband > .vignette, .heroband > .grain { position: absolute; pointer-events: none; }
.heroband > .photo { inset: -4%; z-index: -6; background: url(assets/hero-tall.png) center/cover no-repeat; filter: blur(9px) brightness(.45) saturate(.75); }
@media (min-width: 768px) { .heroband > .photo { background-image: url(assets/hero-wide.png); } }
.heroband > .tint { inset: 0; z-index: -5; background: linear-gradient(165deg, rgba(35,88,64,.94) 0%, rgba(29,74,52,.9) 45%, rgba(16,44,31,.96) 100%); }
.heroband > .spot { z-index: -4; width: min(140vw, 980px); aspect-ratio: 1; left: 50%; top: 58%; translate: -50% -50%; background: radial-gradient(circle, rgba(127,224,166,.34) 0%, rgba(127,224,166,.12) 30%, rgba(127,224,166,0) 62%); filter: blur(6px); }
.heroband > .beam { inset: -30% -10%; z-index: -3; background: linear-gradient(112deg, transparent 38%, rgba(255,246,220,.09) 47%, rgba(255,246,220,.13) 50%, rgba(255,246,220,.07) 54%, transparent 62%); mix-blend-mode: screen; }
.heroband > .vignette { inset: 0; z-index: -2; background: radial-gradient(120% 85% at 50% 40%, transparent 45%, rgba(6,20,13,.62) 100%); }
.heroband .nav { height: 56px; }
.hero { position: relative; padding: 6px 0 0; display: grid; gap: 8px; }
.hcopy .eyebrow { color: var(--mint); margin-bottom: 10px; font-size: 11px; }
.hcopy h1 { font-size: clamp(38px, 10.2vw, 96px); line-height: .95; max-width: 11ch; color: #FFFDF8; }
.hcopy h1 em.i { color: var(--mint); position: relative; z-index: 0; }
.hcopy h1 em.i:after { content: ""; position: absolute; left: .02em; right: .04em; bottom: .14em; height: .07em; background: rgba(127,224,166,.35); border-radius: 9px; z-index: -1; }
.hcopy h1 .w { display: inline-block; animation: wordIn .6s var(--ease-out) both; }
.hcopy h1 .w:nth-child(2) { animation-delay: .06s; } .hcopy h1 .w:nth-child(3) { animation-delay: .12s; } .hcopy h1 .w:nth-child(4) { animation-delay: .18s; } .hcopy h1 .w:nth-child(5) { animation-delay: .24s; } .hcopy h1 .w:nth-child(6) { animation-delay: .3s; } .hcopy h1 .w:nth-child(7) { animation-delay: .36s; }
@keyframes wordIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.sub { font-size: clamp(15px, 1.6vw, 20px); line-height: 1.4; color: #D8E6DC; max-width: 36ch; margin-top: 12px; }
.sub b { color: #FFFDF8; font-weight: 800; }
.form { display: flex; gap: 8px; margin-top: 14px; max-width: 520px; }
.form input { min-height: 48px; border-radius: 13px; border: 0; background: #FFFDF8; color: var(--ink); padding: 0 14px; font: 500 16px Figtree; width: 100%; min-width: 0; flex: 1; }
.form input::placeholder { color: #6B746D; }
.form .btn { min-height: 48px; padding: 0 16px; font-size: 15px; white-space: nowrap; flex: none; }
.form.centre { margin-inline: auto; }
.note { font-size: 13px; margin-top: 10px; color: #BFD6C6; }
.note b { color: var(--mint); font-weight: 700; }
.note.msg { color: #FFFDF8; font-weight: 600; }
.note.fine2 { font-size: 12px; color: #A8C4B2; margin-top: 6px; line-height: 1.4; }
@media (max-width: 430px) { .form { flex-direction: column; } .form .btn { width: 100%; } }
@media (max-width: 699px) and (max-height: 720px) { .hcopy .note.fine2 { display: none; } .hcopy .sub { margin-top: 8px; } .hstage { margin-top: 18px; } }
.hstage { position: relative; margin: 26px auto 0; width: min(100%, 340px); padding-top: 6px; }
.hstage .glow { position: absolute; left: 50%; top: 45%; width: 130%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(127,224,166,.32), rgba(127,224,166,.08) 45%, transparent 70%); filter: blur(10px); animation: glowIn 1.4s var(--ease-out) both; }
@keyframes glowIn { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
.hstage .shell { position: relative; z-index: 2; animation: phoneUp .9s var(--ease-out) .1s both; }
@keyframes phoneUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.deco { position: absolute; z-index: 3; pointer-events: none; }
.deco.tag { display: none; }
.d-sticker { right: -10px; top: -16px; width: 82px; height: 82px; font-size: 8px; padding: 0 6px; z-index: 5; }
.d-sticker b { font-size: 20px; margin: 2px 0; }
/* the phone frame */
.phone { position: relative; width: 100%; max-width: 360px; aspect-ratio: 360 / 740; border-radius: 48px; background: #0F1512; padding: 12px; box-shadow: 0 40px 70px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 2px #3a4a41, inset 0 1px 0 3px rgba(255,255,255,.06); }
.phone .screen { position: absolute; inset: 12px; border-radius: 38px; overflow: hidden; background: #FAF8F3; }
.hstage .phone { aspect-ratio: auto; height: min(620px, 78vh); height: min(620px, calc(var(--svh, 100svh) * .78)); }
/* rows drop in on load, then the numbers tick (the intro class is removed after) */
.scr.intro .lrow { animation: land .55s var(--ease-pop) both; }
.scr.intro .lrow:nth-child(1) { animation-delay: .15s; } .scr.intro .lrow:nth-child(2) { animation-delay: .25s; } .scr.intro .lrow:nth-child(3) { animation-delay: .35s; } .scr.intro .lrow:nth-child(4) { animation-delay: .45s; }
.scr.intro .bar { animation: rise .6s var(--ease-out) .5s both; }
/* the free strip: one tight row of tiles */
.freestrip { list-style: none; margin: 28px auto 0; padding: 0 0 22px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; align-items: stretch; }
.freestrip::-webkit-scrollbar { display: none; }
.freestrip li { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border-radius: 12px; padding: 8px 12px; font: 700 12.5px Figtree; color: #F5F1E8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); white-space: nowrap; }
.freestrip .fi { width: 18px; height: 18px; color: var(--mint); }
.freestrip .fs-lab { background: var(--mint); color: var(--forest); display: grid; gap: 0; padding: 6px 12px; }
.freestrip .fs-lab b { font: 800 12px Rubik; } .freestrip .fs-lab small { font: 600 10.5px Figtree; }
@media (min-width: 700px) {
  .heroband .nav { height: 64px; }
  .hero { padding-top: 14px; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: 28px; align-items: center; }
  .hcopy h1 { font-size: clamp(40px, 5.4vw, 96px); }
  .sub { margin-top: 16px; } .form { margin-top: 18px; }
  .hstage { margin: 0; width: 100%; padding: 30px 0 30px; }
  .deco.tag { display: flex; font-size: 12px; padding: 8px 10px 8px 14px; }
  .d-sticker { left: -40px; right: auto; top: 0; width: 96px; height: 96px; font-size: 9px; } .d-sticker b { font-size: 22px; }
  .d-tag1 { right: -24px; top: 18px; } .d-tag2 { left: -34px; bottom: 60px; rotate: -6deg; }
  .hstage .phone { aspect-ratio: 360 / 740; height: auto; max-height: none; }
  .freestrip { margin-top: 12px; justify-content: center; flex-wrap: wrap; overflow: visible; }
}
@media (min-width: 900px) {
  .hero { padding-top: 24px; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 40px; }
  .hcopy .eyebrow { font-size: 12px; margin-bottom: 16px; }
  .form input { min-height: 54px; font-size: 17px; padding: 0 18px; } .form .btn { min-height: 54px; padding: 0 22px; font-size: 17px; }
  .note { font-size: 15px; }
  .hstage { padding: 40px 0 40px; width: 360px; margin: 0 auto; }
  .d-sticker { left: -70px; top: 10px; width: 116px; height: 116px; font-size: 10.5px; } .d-sticker b { font-size: 26px; }
  .d-tag1 { right: -96px; top: 28px; font-size: 13px; padding: 10px 12px 10px 16px; } .d-tag2 { left: -84px; bottom: 90px; font-size: 13px; padding: 10px 12px 10px 16px; }
  .freestrip { gap: 10px; padding-bottom: 36px; }
  .freestrip li { font-size: 13.5px; padding: 10px 14px; }
}
@media (min-width: 1200px) { .hero { grid-template-columns: 1.05fr 1fr; gap: 40px; } .hstage { width: 380px; } .d-tag1 { right: -130px; top: 24px; } .d-tag2 { left: -110px; } }

/* ---------- tutorial: the phone fills the screen; a floating callout points at the target ---------- */
/* Sized from the viewport at load (vh fallback, then svh, then the px value app.js sets once), so nothing resizes on arrival. */
.tut { background: var(--cream); padding: 10px 0 8px; min-height: 100vh; min-height: 100svh; min-height: var(--svh, 100svh); display: flex; align-items: center; }
.tgrid { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; height: calc(100vh - 18px); height: calc(100svh - 18px); height: calc(var(--svh, 100svh) - 18px); max-height: 1000px; }
.tgrid > * { min-width: 0; }
.coach { display: none; }
.tut .shell { min-height: 0; display: flex; justify-content: center; }
.tut .phone { max-width: none; width: min(100%, 390px); aspect-ratio: auto; height: 100%; min-height: 0; margin: 0 auto; }
.cdisc { font: 600 10.5px Figtree; color: var(--muted); text-align: center; margin: 0; display: flex; justify-content: center; gap: 12px; align-items: center; }
.cdisc .clink2 { display: none; background: none; border: 0; padding: 0; font: 700 11px Figtree; color: var(--green); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tut.free .cdisc .clink2 { display: inline; }
.cnums { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.cn { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font: 600 12px Figtree; color: var(--muted); }
.cn .qb { --s: 22px !important; gap: 4px; } .cn .qb b { font-size: 12px; min-width: 0; }
.cn .stc { font-size: 10px; padding: 2px 7px; } .cn .stc2 { grid-auto-flow: column; gap: 3px; }
.cn > b { font: 800 16px Rubik; color: var(--green); font-variant-numeric: tabular-nums; }
.cn > b[hidden] { display: none; }
.scempty { font: 600 12px Figtree; color: var(--muted); }
.cpitch { margin-top: 12px; max-width: 46ch; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.steps li { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 13.5px Figtree; color: var(--muted); min-height: 28px; }
.steps li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps li i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 11px Rubik; font-style: normal; background: var(--paper); color: var(--body); box-shadow: inset 0 0 0 1.5px var(--line); transition: transform .3s var(--ease-pop), background .25s, color .25s; }
.steps li.done { animation: featdone .5s var(--ease-pop); }
@keyframes featdone { 40% { transform: translateX(3px); } }
.cmark.soft .ring { border-color: rgba(127,224,166,.9); }
.cmark.soft .ring:after { border-color: rgba(127,224,166,.5); }
.steps li.cur { color: var(--ink); }
.steps li.cur i { background: var(--forest); color: #F5F1E8; box-shadow: none; }
.steps li.done { color: var(--green); }
.steps li.done i { background: var(--mint); font-size: 0; box-shadow: none; }
.steps li.done i:after { content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><g fill='none' stroke='%231D4A34' stroke-linecap='round' stroke-linejoin='round'><path d='M28 38A40 40 0 1 0 92 38' stroke-width='16'/><path d='M38 52l17 17 45-53' stroke-width='15'/><path d='M86 92l22 20' stroke-width='16'/></g></svg>") center/contain no-repeat; }
.steps li.pop i { animation: stepPop .6s var(--ease-pop); }
@keyframes stepPop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.steps li .plus { margin-left: auto; }
/* the Basqet+ badge, everywhere a paid feature appears */
.plus { display: inline-flex; align-items: center; font: 800 9px Rubik; letter-spacing: .04em; color: var(--forest); background: var(--mint); padding: 1px 6px; border-radius: 999px; line-height: 1.5; vertical-align: 1px; font-style: normal; white-space: nowrap; }
.band .plus, .scr .bar .plus, .scr .shopact .plus { background: var(--mint); color: var(--forest); }
.scr .barhd .plus { margin-right: 4px; }
.scr .sh .plus { margin-left: 8px; }
/* the coach mark: a ring on the target and a callout beside it, both in phone coordinates */
.cmark { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.cmark[hidden] { display: none; }
.cmark .ring { position: absolute; left: 0; top: 0; border-radius: 14px; border: 3px solid var(--yellow); box-sizing: border-box; transition: transform .3s var(--ease-out); will-change: transform; }
.cmark .ring:after { content: ""; position: absolute; inset: -9px; border: 3px solid rgba(245,197,24,.55); border-radius: inherit; animation: halo 1.4s ease-out infinite; }
@keyframes halo { 0% { transform: scale(.94); opacity: .9; } 100% { transform: scale(1.06); opacity: 0; } }
.cmark.in .ring { animation: ringIn .4s var(--ease-pop); }
@keyframes ringIn { from { opacity: 0; scale: 1.2; } to { opacity: 1; scale: 1; } }
@property --ax { syntax: '<length>'; inherits: false; initial-value: 24px; }
.callout { position: absolute; left: 0; top: 0; width: var(--cw, 252px); background: var(--ink); color: #F5F1E8; border-radius: 14px; padding: 7px 12px 9px; box-shadow: 0 18px 36px -14px rgba(0,0,0,.6); pointer-events: auto; transition: transform .38s var(--ease-out), opacity .25s, --ax .38s var(--ease-out); will-change: transform; opacity: 0; --ax: 24px; }
.cmark.on .callout { opacity: 1; }
.callout:after { content: ""; position: absolute; left: 0; bottom: -5px; width: 12px; height: 12px; background: var(--ink); border-radius: 2px; transform: translateX(calc(var(--ax) - 6px)) rotate(45deg); }
.callout.below:after { bottom: auto; top: -5px; }
.callout.far:after { display: none; }
.ccrow { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.cstep { font: 700 9.5px Figtree; letter-spacing: .1em; text-transform: uppercase; color: var(--mint); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmenu { background: none; border: 0; color: #BFD6C6; font: 800 16px/1 Rubik; padding: 0 6px; min-height: 22px; cursor: pointer; border-radius: 6px; }
.cmenu:active { background: rgba(255,255,255,.12); }
.cmenuitems { display: flex; gap: 14px; padding: 2px 0 4px; }
.cmenuitems[hidden] { display: none; }
.clink { background: none; border: 0; padding: 0 2px; min-height: 26px; font: 700 12px Figtree; color: #F5F1E8; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cdo { font: 800 13.5px/1.3 Rubik; letter-spacing: -.01em; color: #FFFDF8; margin: 1px 0 0; }
.cdo b { color: var(--mint); font-weight: 800; }
.cwhy { font: 500 11.5px/1.35 Figtree; color: #CFE0D4; margin: 4px 0 0; display: none; }
.cwhy.in { display: block; animation: textin .3s var(--ease-out) both; }
.cwhy b { color: #FFFDF8; font-weight: 800; font-variant-numeric: tabular-nums; }
.ctip { font: 600 11.5px/1.35 Figtree; color: var(--yellow); margin: 4px 0 0; display: none; }
.ctip.in { display: block; animation: textin .3s var(--ease-out) both; }
.callout .plus { background: var(--mint); color: var(--forest); }
.callout.swap .cdo { animation: textin .3s var(--ease-out) both; }
@keyframes textin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.callout.cheer { animation: bcheer .5s var(--ease-pop); }
@keyframes bcheer { 40% { scale: 1.02; } }
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); animation: burst .9s var(--ease-out) var(--d) both; }
.burst i:nth-child(3n) { background: var(--yellow); } .burst i:nth-child(3n+1) { background: #FFFDF8; width: 6px; height: 6px; }
@keyframes burst { 0% { opacity: 0; transform: translate(0,0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } }
@media (min-width: 900px) {
  .tut { padding: 40px 0; }
  .tgrid { grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: 1fr auto; gap: 8px 56px; align-items: center; height: auto; min-height: calc(100vh - 80px); min-height: calc(var(--svh, 100svh) - 80px); max-height: none; }
  .coach { display: grid; gap: 18px; align-content: center; }
  .chead h2 { font-size: clamp(30px, 3vw, 44px); max-width: 14ch; }
  .cdisc { grid-column: 2; }
  .tut .shell { width: 360px; margin: 0 auto; }
  .tut .phone { aspect-ratio: 360 / 740; height: auto; }
}
@media (min-width: 1200px) { .tgrid { grid-template-columns: minmax(0, 1fr) 400px; gap: 8px 80px; } .tut .shell { width: 380px; } }

/* ---------- result: the receipt tears off and the numbers count up ---------- */
.result { padding: 64px 0 72px; }
.result[hidden] { display: none; }
.result > .spot { top: 40%; }
.rgrid { display: grid; gap: 28px; }
.rpaper { justify-self: center; width: min(100%, 320px); perspective: 900px; }
.paper2 { background: #FFFDF8; color: var(--ink); padding: 18px 16px 22px; border-radius: 4px 4px 0 0; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); font: 600 13px/1.4 Figtree; position: relative; transform-origin: 50% 0; transform: translateY(-40px) rotateX(-70deg); opacity: 0; }
.paper2:after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: radial-gradient(circle at 6px -2px, transparent 6px, #FFFDF8 6.5px) left/12px 8px repeat-x; }
.result.in .paper2 { animation: tear .9s var(--ease-out) .15s both; }
@keyframes tear { 0% { transform: translateY(-40px) rotateX(-70deg); opacity: 0; } 55% { transform: translateY(6px) rotateX(8deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.paper2 .ph { display: block; font: 800 18px Rubik; letter-spacing: -.02em; }
.paper2 .pm { display: block; color: var(--muted); margin: 2px 0 10px; }
.pl2 { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
.pl2 b { font: 800 14px Rubik; }
.pl2.pick { color: var(--green); }
.pl2.sum { border-bottom: 0; margin-top: 4px; font: 800 12px Rubik; letter-spacing: .06em; text-transform: uppercase; }
.pl2.sum b { font-size: 22px; color: var(--green); }
.pl2.q { border-bottom: 0; }
.pdisc { display: block; margin-top: 10px; font: 600 10.5px Figtree; color: var(--muted); }
.result h2 { font-size: clamp(30px, 3.4vw, 50px); }
.rline { font-size: clamp(16px, .5vw + 15px, 20px); color: #D8E6DC; margin-top: 12px; max-width: 46ch; }
.rline b { color: #FFFDF8; font-weight: 800; }
.rbars { display: grid; gap: 8px; margin-top: 18px; max-width: 520px; }
.rb { display: grid; grid-template-columns: 96px 1fr 70px; align-items: center; gap: 10px; font: 700 12.5px Figtree; color: #D8E6DC; }
.rb .rbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbt { height: 12px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.rbt i { display: block; height: 100%; width: 100%; border-radius: 6px; background: rgba(245,241,232,.5); transform-origin: 0 50%; transform: scaleX(var(--w, 1)); transition: transform 1.1s var(--ease-out); }
.rb.pick .rbt i { background: var(--mint); box-shadow: 0 0 12px rgba(127,224,166,.5); }
.rb b { font: 800 15px Rubik; color: #FFFDF8; text-align: right; font-variant-numeric: tabular-nums; }
.rb.pick b { color: var(--mint); }
.rb.qb1, .rb.qb2 { margin-top: 2px; }
.result.noresult .rbars, .result.noresult .rpaper { display: none; }
.recap { margin-top: 26px; }
.rlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.rlist li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; background: rgba(255,255,255,.07); border-radius: 12px; padding: 10px 12px; }
.rlist li b { font: 800 14px Figtree; color: #FFFDF8; }
.rlist li span { grid-column: 2; font: 500 13px/1.35 Figtree; color: #D8E6DC; }
.rlist li.free { grid-template-columns: 1fr; }
.rlist li.free b { display: inline-block; justify-self: start; background: #FFFDF8; color: var(--forest); font: 800 10px Rubik; padding: 2px 8px; border-radius: 999px; margin-bottom: 4px; }
.rlist li.free span { grid-column: 1; }
.result .form { margin-top: 22px; }
.result .note { color: #BFD6C6; }
.ractions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.rdisc { color: #A8C4B2; margin-top: 12px; }
@media (min-width: 900px) {
  .result { padding: 110px 0; }
  .rgrid { grid-template-columns: 360px minmax(0, 1fr); gap: 72px; align-items: start; }
  .rpaper { position: sticky; top: 40px; width: 360px; }
  .paper2 { padding: 24px 22px 28px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hcopy h1 .w, .hstage .shell, .hstage .glow, .scr.intro .lrow, .scr.intro .bar, .float, .cmark .ring, .cmark .ring:after, .cmark.in .ring, .steps li.pop i, .callout.cheer, .callout.swap .cdo, .cwhy.in, .ctip.in, .slap { animation: none !important; }
  .cmark .ring, .callout, .rbt i { transition: none !important; }
  .stats.pre .scard, .stats.pre .strend i, .stats.pre .ach li .bar i { opacity: 1; transform: none; transition: none; }
  .stats.pre .ach li .bar i { transform: scaleX(var(--p, 0)); }
  .paper2 { transform: none; opacity: 0; transition: opacity .4s; }
  .result.in .paper2 { animation: none !important; opacity: 1; }
}

/* ---------- what's a Q score ---------- */
.qsec { padding: 72px 0 16px; }
.qgrid { display: grid; gap: 28px; }
.qex { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.qex li { display: flex; align-items: center; gap: 14px; background: var(--paper); border-radius: 16px; padding: 12px 14px; box-shadow: 0 0 0 1.5px var(--line); }
.qex em { font-style: normal; display: inline-flex; flex: none; }
.qex b { display: block; font: 800 16px Figtree; }
.qex small { display: block; font: 500 13px Figtree; color: var(--muted); margin-top: 2px; }
@media (min-width: 900px) { .qsec { padding: 110px 0 20px; } .qgrid { grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; } }

/* ---------- five ways ---------- */
.five { padding: 80px 0; }
.fdots { display: flex; justify-content: center; gap: 4px; margin: 8px 0 18px; }
.fdots button { border: 0; background: none; padding: 8px 6px; font: 700 12px Figtree; color: var(--muted); display: grid; justify-items: center; gap: 6px; cursor: pointer; }
.fdots button span { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--forest); background: transparent; transition: background .2s; }
.fdots button[aria-current="true"] span { background: var(--forest); }
.fdots button[aria-current="true"] { color: var(--ink); }
.fiverail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 16px 24px; margin: 0 -16px; scrollbar-width: none; }
.fiverail::-webkit-scrollbar { display: none; }
.fcard { flex: 0 0 min(82%, 320px); scroll-snap-align: center; background: var(--paper); border-radius: 22px; padding: 18px 14px 16px; box-shadow: 0 0 0 1.5px var(--line), 0 24px 48px -36px rgba(22,33,27,.4); display: flex; flex-direction: column; }
.fcard.pick { box-shadow: 0 0 0 2px var(--forest), 0 30px 60px -30px rgba(22,33,27,.4); }
.fcard header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.fcard h3 { font-size: 26px; }
.fcard .qf { font: 800 13px Rubik; color: var(--green); }
.fcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stag { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0 8px; background: var(--cream); border-radius: 10px; padding: 8px 10px 8px 14px; box-shadow: 0 0 0 1px var(--sand); }
.stag:before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: radial-gradient(circle, transparent 1.5px, #D6CDB9 1.6px) center/2px 8px repeat-y; }
.stag span { font: 600 12.5px Figtree; color: var(--body); grid-column: 1 / -1; }
.stag b { font: 800 20px Rubik; color: var(--green); letter-spacing: -.02em; }
.stag em { font-style: normal; align-self: center; display: inline-flex; }
.stag small { font: 500 11px Figtree; color: var(--muted); grid-column: 1 / -1; }
.fcard footer { margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed var(--line); }
.fcard footer small { display: block; font: 700 11px Figtree; letter-spacing: .14em; text-transform: uppercase; color: var(--body); }
.fcard .stcs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.fcard .ftot { display: block; font: 800 34px Rubik; color: var(--green); letter-spacing: -.03em; margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
@media (min-width: 1040px) {
  .fdots { display: none; }
  .fiverail { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; margin: 0; padding: 6px 0 0; }
  .fcard { flex: auto; }
}
@media (min-width: 700px) and (max-width: 1039px) { .fcard { flex-basis: 300px; } }

/* ---------- your shopping, in numbers: a Basqet+ stats dashboard (example data) ---------- */
.stats { padding: 72px 0 80px; }
.stats .head .lead { max-width: 60ch; }
.stats .head .tagx, .ryear .tagx, .stats .sk .tagx { font: 800 9.5px Rubik; letter-spacing: .1em; text-transform: uppercase; background: var(--yellow); color: var(--ink); padding: 2px 8px; border-radius: 999px; font-style: normal; vertical-align: 2px; }
.sgrid { display: grid; gap: 12px; margin-top: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scard { background: #FFFDF8; color: var(--ink); border-radius: 18px; padding: 14px 14px 14px; box-shadow: 0 24px 48px -30px rgba(0,0,0,.6); display: grid; gap: 6px; align-content: start; min-width: 0; }
.scard.w2 { grid-column: span 2; }
.stats.pre .scard { opacity: 0; transform: translateY(16px); }
.stats.pre.in .scard { opacity: 1; transform: none; transition: opacity .55s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--n, 0) * 70ms); }
.sk { font: 800 10px Figtree; letter-spacing: .12em; text-transform: uppercase; color: var(--body); display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.sv { font: 800 28px/1 Rubik; letter-spacing: -.03em; color: var(--green); font-variant-numeric: tabular-nums; }
.sv small { font: 700 13px Figtree; letter-spacing: 0; color: var(--muted); margin-left: 4px; }
.ssub { font: 500 12px/1.35 Figtree; color: var(--muted); }
.ssub b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.strend { display: flex; align-items: flex-end; gap: 5px; height: 46px; margin-top: 4px; }
.strend i { flex: 1; border-radius: 3px; background: #CFE0D4; height: calc(var(--h) * 100%); min-height: 4px; transform-origin: 50% 100%; }
.strend i:last-child { background: var(--green); }
.stats.pre .strend i { transform: scaleY(0); } .stats.pre.in .strend i { transform: none; transition: transform .7s var(--ease-out) calc(var(--n, 0) * 70ms + .25s); }
.smix { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin-top: 4px; background: var(--sand); }
.smix i { display: block; height: 100%; flex: var(--w) 0 0; }
.slegend { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 600 11px Figtree; color: var(--body); margin-top: 2px; }
.slegend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.srows { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.srows li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid #EEE8DB; font: 700 13px Figtree; min-width: 0; }
.srows li:first-child { border-top: 0; }
.srows li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srows li small { font: 600 11px Figtree; color: var(--muted); flex: none; }
.srows li .qb { --s: 18px !important; } .srows li .qb b { font-size: 11px; min-width: 0; }
.scarts details { border-top: 1px solid #EEE8DB; }
.scarts details:first-of-type { border-top: 0; }
.scarts summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 8px 0; font: 700 13px Figtree; }
.scarts summary::-webkit-details-marker { display: none; }
.scarts summary small { grid-column: 1 / -1; font: 600 11px Figtree; color: var(--muted); }
.scarts summary b { font: 800 13px Rubik; color: var(--green); font-variant-numeric: tabular-nums; }
.scarts ul { list-style: none; margin: 0 0 8px; padding: 8px 10px; background: var(--cream); border-radius: 10px; display: grid; gap: 4px; font: 600 12px Figtree; }
.scarts ul li { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.scarts ul li span { color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scarts ul li b { font-variant-numeric: tabular-nums; flex: none; }
.scarts ul li .stc { font-size: 9px; padding: 1px 6px; flex: none; }
.ach { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.ach li { display: grid; gap: 3px; padding: 10px 26px 10px 10px; border-radius: 12px; background: var(--tint); font: 800 12.5px Figtree; color: var(--forest); position: relative; align-content: start; }
.ach li small { font: 600 10.5px/1.3 Figtree; color: var(--body); }
.ach li .bar { height: 5px; border-radius: 3px; background: rgba(0,0,0,.08); overflow: hidden; margin-top: 3px; }
.ach li .bar i { display: block; height: 100%; width: 100%; background: var(--forest); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.stats.pre .ach li .bar i { transform: scaleX(0); } .stats.pre.in .ach li .bar i { transform: scaleX(var(--p, 0)); transition: transform .8s var(--ease-out) .5s; }
.ach li.locked { background: #F1EDE4; color: var(--body); }
.ach li.locked .bar i { background: var(--muted); }
.ach li.on:after { content: ""; position: absolute; right: 8px; top: 9px; width: 16px; height: 16px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><g fill='none' stroke='%231D4A34' stroke-linecap='round' stroke-linejoin='round'><path d='M28 38A40 40 0 1 0 92 38' stroke-width='16'/><path d='M38 52l17 17 45-53' stroke-width='15'/><path d='M86 92l22 20' stroke-width='16'/></g></svg>") center/contain no-repeat; }
.sstyle { display: flex; gap: 14px; align-items: center; background: #0F2A1E; color: #F5F1E8; border-radius: 18px; padding: 14px 16px; margin-top: 12px; font: 500 14px/1.4 Figtree; box-shadow: inset 0 0 0 1.5px rgba(127,224,166,.3); }
.sstyle b { display: block; font: 800 18px Rubik; color: var(--mint); margin-bottom: 2px; }
.sstyle .qb { --s: 44px !important; flex: none; gap: 0; } .sstyle .qb b { display: none; }
.sdisc { font: 600 11px Figtree; color: #A8C4B2; margin-top: 10px; }
@media (min-width: 700px) { .sgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 900px) { .stats { padding: 120px 0; } }

/* ---------- stores ---------- */
.stores { padding: 80px 0; }
.storescard { background: #EFE9DC; border-radius: var(--r-lg); padding: 28px 18px 32px; box-shadow: inset 0 0 0 1.5px #E4DDCC; }
.shelfrow { list-style: none; margin: 8px 0 0; padding: 0 8px; display: flex; flex-wrap: wrap; gap: 10px; }
.shelfband { margin-top: 14px; background: var(--forest); color: #F5F1E8; border-radius: 6px; padding: 12px 12px; display: flex; gap: 8px; flex-wrap: wrap; border-top: 12px solid #D6CDB9; }
.shelfband span { background: #FFFDF8; color: var(--ink); font: 700 13px Figtree; padding: 7px 12px; border-radius: 8px; }
.next { margin-top: 32px; }
.next .eyebrow { color: var(--body); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.next .eyebrow em { font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--green); }
.nextrow { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nextrow li { font: 700 14px Figtree; padding: 10px 16px; border-radius: 999px; background: var(--paper); border: 1.5px dashed var(--line); }
.vote { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.vote .voteform[hidden] { display: none; }
.vote .voteform { display: flex; gap: 8px; width: 100%; max-width: 420px; }
.vote .voteform input { flex: 1; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line); padding: 0 14px; font: 500 16px Figtree; background: #fff; min-width: 0; }
.vote.open .fine:last-child { display: none; }
@media (min-width: 900px) { .stores { padding: 100px 0; } .storescard { padding: 48px 56px 56px; } .shelfrow { gap: 16px; } .shelfband { padding: 14px 16px; } }

/* ---------- plans ---------- */
.pricing { padding: 80px 0; overflow-x: clip; }
.ptoggle { display: inline-flex; margin-top: 18px; background: #EFE9DC; border-radius: 999px; padding: 4px; box-shadow: inset 0 0 0 1.5px var(--line); }
.ptoggle button { border: 0; background: none; font: 700 14px Figtree; color: var(--body); padding: 0 16px; min-height: 40px; border-radius: 999px; cursor: pointer; }
.ptoggle button.on { background: var(--forest); color: #F5F1E8; }
.pgrid { display: grid; gap: 20px; margin-top: 28px; }
.pcard { position: relative; border-radius: 22px; padding: 26px 22px 26px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-card), 0 0 0 1.5px var(--line); }
.pcard .eyebrow { color: var(--body); }
.pcard .price { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.pcard .price b { font: 800 clamp(52px, 8vw, 76px)/1 Rubik; color: var(--green); letter-spacing: -.04em; }
.pcard .price span { font: 700 18px Figtree; color: var(--body); }
.plead { font: 500 17px/1.45 Figtree; color: var(--body); margin-top: 10px; }
.pcard .btn.ghost2 { margin-top: 18px; width: 100%; background: transparent; color: var(--forest); box-shadow: inset 0 0 0 2px var(--forest); }
.pcard.paid { background: var(--forest); color: #F5F1E8; box-shadow: var(--shadow-card); }
.pcard.paid .eyebrow, .pcard.paid .plead, .pcard.paid .price span { color: #D8E6DC; }
.pcard.paid .price b { color: var(--mint); }
.pcard.paid .form { margin-top: 18px; max-width: none; }
.pcard.paid .form .btn { width: auto; }
.pcard.paid .note { color: #BFD6C6; }
@media (max-width: 430px) { .pcard.paid .form .btn { width: 100%; } }
.pcard .sticker { position: absolute; right: -8px; top: -30px; width: 108px; height: 108px; }
.pcard .sticker b { font-size: 24px; }
.slap { animation: slap .6s var(--ease-pop) .3s both; }
@keyframes slap { from { opacity: 0; scale: 1.6; rotate: 8deg; } to { opacity: 1; scale: 1; rotate: -8deg; } }
[data-reveal]:not(.in) .slap { animation-play-state: paused; }
.ptable { margin-top: 28px; background: var(--paper); border-radius: 18px; box-shadow: 0 0 0 1.5px var(--line); overflow: hidden; }
.prow { display: grid; grid-template-columns: 1fr 64px 76px; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.prow:first-child { border-top: 0; }
.prow.phd { background: #EFE9DC; font: 800 11px Figtree; letter-spacing: .12em; text-transform: uppercase; color: var(--body); }
.prow.phd span { text-align: center; } .prow.phd span:first-child { text-align: left; }
.prow b { display: block; font: 800 15px Figtree; }
.prow small { display: block; font: 500 12.5px/1.35 Figtree; color: var(--muted); margin-top: 2px; }
.prow .yes { text-align: center; font: 800 18px Rubik; color: var(--green); }
.prow .no { text-align: center; }
.prow .no:before { content: "Basqet+"; display: inline-block; font: 800 9px Rubik; letter-spacing: .04em; color: var(--forest); background: var(--mint); padding: 2px 7px; border-radius: 999px; }
.prow .no { font-size: 0; }
.worked { margin-top: 24px; background: #EFE9DC; border-radius: 18px; padding: 20px 20px 22px; box-shadow: inset 0 0 0 1.5px #E4DDCC; }
.worked .eyebrow { color: var(--body); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.worked .tagx { font: 800 9.5px Rubik; letter-spacing: .1em; text-transform: uppercase; background: var(--yellow); color: var(--ink); padding: 2px 8px; border-radius: 999px; font-style: normal; }
.wline { font: 500 17px/1.5 Figtree; color: var(--body); margin-top: 10px; max-width: 60ch; }
.wline b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.wsub { font: 600 13.5px/1.45 Figtree; color: var(--body); margin-top: 8px; }
@media (min-width: 700px) { .pgrid { grid-template-columns: 1fr 1fr; gap: 24px; } .prow { grid-template-columns: 1fr 110px 120px; padding: 14px 20px; } }
@media (min-width: 900px) { .pricing { padding: 110px 0; } .pcard { padding: 36px 34px 34px; } .pcard .sticker { right: -20px; top: -34px; width: 130px; height: 130px; font-size: 11px; } .pcard .sticker b { font-size: 30px; } }

/* ---------- faq ---------- */
.faq { padding: 80px 0 90px; }
.faqlist { border-top: 1.5px solid var(--line); }
.faqlist details { border-bottom: 1.5px solid var(--line); }
.faqlist summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font: 800 clamp(20px, 2vw, 28px)/1.2 Rubik; letter-spacing: -.02em; }
.faqlist summary::-webkit-details-marker { display: none; }
.faqplus { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1.5px var(--line); position: relative; transition: transform .3s var(--ease-pop); }
.faqplus:before, .faqplus:after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); translate: -50% -50%; }
.faqplus:before { width: 16px; height: 2.5px; } .faqplus:after { width: 2.5px; height: 16px; }
details[open] .faqplus { transform: rotate(45deg); }
.faqlist p { padding: 0 60px 22px 0; font: 500 18px/1.5 Figtree; color: var(--body); max-width: 60ch; }
@media (min-width: 900px) { .faq { padding: 110px 0 120px; } }

/* ---------- final sign-up ---------- */
.join { padding: 88px 0; text-align: center; }
.join > .spot { top: 50%; }
.join h2 { font-size: clamp(40px, 5vw + 12px, 80px); margin-inline: auto; }
.join .form { margin-top: 28px; }
.join .note { color: #BFD6C6; }
@media (min-width: 900px) { .join { padding: 140px 0; } .join .form { max-width: 560px; } }
@media (max-width: 430px) { .form { flex-direction: column; } .form .btn { width: 100%; } }
@media (max-width: 699px) and (max-height: 720px) { .hcopy .note.fine2 { display: none; } .hcopy .sub { margin-top: 8px; } .hstage { margin-top: 18px; } }

/* ---------- footer ---------- */
.sitefoot { display: flex; flex-direction: column; gap: 16px; padding: 28px 0 40px; font: 600 14px Figtree; color: var(--body); }
.sitefoot .brand.small { font: 600 14px Figtree; gap: 10px; }
.sitefoot .brand .mark { color: var(--forest); }
.sitefoot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.sitefoot nav a { text-decoration: none; }
.sitefoot nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sitefoot .legal { flex-basis: 100%; color: var(--muted); }
@media (min-width: 700px) { .sitefoot { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; } }

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } .slap { animation: none; } }

/* =====================================================================
   The demo app screen (.scr) — one stylesheet for hero, walkthrough, Try it
   ===================================================================== */
.scr { position: absolute; inset: 0; background: #FAF8F3; color: var(--ink); font-family: Figtree, system-ui, sans-serif; overflow: hidden; display: flex; flex-direction: column; border-radius: inherit; text-align: left; }
.scr.inert { pointer-events: none; }
.scr > * { flex: none; }
.scr .body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 8px; scrollbar-width: none; }
.scr .body::-webkit-scrollbar { display: none; }
.scr button { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; transition: transform .08s ease-out, opacity .08s ease-out; }
.scr button:active { transform: scale(.96); opacity: .85; }
/* swipes on the phone only ever scroll the phone: scrollers contain, everything else swallows the pan */
.scr { touch-action: none; }
.scr .body, .scr .svscroll, .scr .finish { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.scr .pressed { transform: scale(.94) !important; transition: transform .12s !important; }
.scr .status { display: flex; justify-content: space-between; align-items: center; padding: 10px 22px 0; font: 700 14px Rubik; font-variant-numeric: tabular-nums; }
.scr .status .isl { width: 96px; height: 26px; border-radius: 20px; background: #16211B; }
.scr .status .ico { display: inline-flex; align-items: center; gap: 5px; color: #16211B; }
.scr .ahd { display: flex; align-items: flex-start; justify-content: space-between; padding: 8px 16px 0; }
.scr .lname { font: 800 22px/1.1 Rubik; letter-spacing: -.02em; display: flex; align-items: center; gap: 4px; min-height: 30px; }
.scr .lname svg { color: var(--muted); }
.scr .ahd small { display: block; font: 500 12px Figtree; color: var(--muted); margin-top: 2px; }
.scr .pill { font: 700 13px Figtree; padding: 0 12px; min-height: 32px; border-radius: 999px; background: #F1EDE4; }
/* the Q goal: a slider with a floor on every stop; the thumb is the Q badge */
.scr .gbar { margin: 6px 10px 10px; background: var(--forest); color: #F5F1E8; border-radius: 16px; padding: 9px 12px 10px; box-shadow: 0 12px 30px -12px rgba(29,74,52,.6); display: grid; gap: 7px; }
.scr .goal { position: relative; display: grid; gap: 2px; --gtrack: rgba(255,255,255,.18); --gtick: #2F6B4B; --gring: var(--forest); --glab: #BFD6C6; --gname: #F5F1E8; --gcur: var(--mint); --gstop: #A8C4B2; }
.scr .sheet .goal { --gtrack: var(--sand); --gtick: #C9C1AE; --gring: #FAF8F3; --glab: var(--body); --gname: var(--forest); --gcur: var(--forest); --gstop: var(--muted); margin-bottom: 8px; flex: none; }
.scr .ghd { display: flex; justify-content: space-between; align-items: center; font: 600 11px Figtree; color: var(--glab); min-height: 20px; }
.scr .ghd label { display: inline-flex; align-items: center; gap: 6px; }
.scr .ghd b { font: 800 12.5px Rubik; color: var(--gname); }
.scr .ghd b em { font: 700 10.5px Figtree; font-style: normal; color: var(--gcur); margin-left: 2px; }
.scr .ghd .plus { background: rgba(127,224,166,.18); color: var(--mint); } .scr .sheet .ghd .plus { background: var(--mint); color: var(--forest); }
.scr .gslider { position: relative; height: 40px; margin: 0 17px; }
.scr .gtrack { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--gtrack); }
.scr .gfill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 3px; background: var(--gcur); transform-origin: 0 50%; transform: scaleX(calc(var(--i, 0) / 4)); transition: transform .4s var(--ease-out); }
.scr .gtick { position: absolute; top: 50%; left: calc(var(--i) * 25%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--gtick); box-shadow: 0 0 0 2px var(--gring); }
.scr .gtick.on { background: var(--gcur); }
.scr .gthumb { position: absolute; inset: 0; transform: translateX(calc(var(--i, 0) * 25%)); transition: transform .4s var(--ease-out); will-change: transform; pointer-events: none; }
.scr .gth { position: absolute; left: -17px; top: 3px; width: 34px; height: 34px; border-radius: 50%; background: #FFFDF8; display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(0,0,0,.6), 0 0 0 2px var(--gcur); }
.scr .gth .qb { gap: 0; } .scr .gth .qb b { display: none; }
.scr .goal.bump .gth { animation: thumbBump .45s var(--ease-pop); }
@keyframes thumbBump { 0% { transform: scale(1); } 50% { transform: scale(1.14); } 100% { transform: scale(1); } }
.scr .range { position: absolute; left: -17px; top: 0; width: calc(100% + 34px); height: 40px; margin: 0; opacity: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; touch-action: none; }
.scr .range::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 40px; }
.scr .range::-moz-range-thumb { width: 34px; height: 40px; border: 0; }
.scr .gslider:focus-within .gth { box-shadow: 0 0 0 3px var(--yellow); }
.scr .gstops { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 2px; }
.scr .gstops button { display: grid; justify-items: center; text-align: center; font: 700 10px Figtree; color: var(--gstop); min-height: 30px; align-content: start; line-height: 1.15; }
.scr .gstops button small { font: 600 8.5px/1.1 Figtree; opacity: .85; white-space: normal; max-width: 62px; }
.scr .gstops button.cur { color: var(--gcur); }
.scr .gstops button:first-child { justify-items: start; text-align: left; } .scr .gstops button:last-child { justify-items: end; text-align: right; }
.scr .goal .chg { position: absolute; right: 0; top: -2px; margin: 0; z-index: 1; }
.scr .sheet .goal .chg { background: var(--forest); color: #F5F1E8; }
.scr .abtn.find { background: var(--mint); color: var(--forest); min-height: 46px; font-size: 15px; gap: 8px; }
.scr .abtn.find .plus { background: var(--forest); color: var(--mint); }
.scr .chev { color: var(--muted); display: inline-flex; transition: transform .25s; }
.scr .chev.col { transform: rotate(-90deg); }
.scr .srch { margin: 6px 12px 0; display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 13px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); position: relative; }
.scr .srch:focus-within, .scr .srch.has { box-shadow: inset 0 0 0 2px var(--forest); }
.scr .srch i { width: 32px; height: 32px; border-radius: 9px; background: var(--forest); color: #F5F1E8; display: grid; place-items: center; flex: none; }
.scr .srch input { flex: 1; min-width: 0; border: 0; background: none; font: 600 15px Figtree; color: var(--ink); min-height: 32px; outline: none; }
.scr .srch input::placeholder { color: var(--muted); font-weight: 500; }
.scr .caret { position: absolute; left: 0; top: 11px; width: 2px; height: 20px; background: var(--forest); animation: blink 1s steps(2) infinite; }
@keyframes blink { to { opacity: 0; } }
.scr .results:empty { display: none; }
.scr .drop { margin: 6px 12px 2px; padding: 8px 10px; border-radius: 13px; background: #fff; box-shadow: 0 10px 30px -12px rgba(22,33,27,.3), 0 0 0 1px var(--sand); }
.scr .drop > small { display: block; font: 600 10.5px Figtree; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.scr .dropin { display: flex; flex-wrap: wrap; gap: 6px; }
.scr .rchip { display: inline-flex; flex-direction: column; padding: 6px 11px; border-radius: 11px; font: 700 13.5px Figtree; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); min-height: 42px; justify-content: center; }
.scr .rchip.hl { background: var(--forest); color: #F5F1E8; box-shadow: none; }
.scr .rchip em { font: 500 10.5px Figtree; font-style: normal; opacity: .8; }
.scr .rnote { display: inline-flex; flex-direction: column; padding: 6px 11px; border-radius: 11px; font: 700 13.5px Figtree; border: 1.5px dashed var(--line); min-height: 42px; justify-content: center; }
.scr .rnote em { font: 500 10.5px Figtree; font-style: normal; color: var(--muted); }
.scr .chips { display: flex; gap: 6px; padding: 7px 12px 2px; overflow-x: auto; scrollbar-width: none; align-items: center; touch-action: pan-x; overscroll-behavior-x: contain; }
.scr .chips::-webkit-scrollbar { display: none; }
.scr .hist { color: var(--muted); display: inline-flex; flex: none; }
.scr .qc { white-space: nowrap; font: 600 12.5px Figtree; padding: 0 10px; min-height: 32px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); background: #fff; flex: none; }
.scr .qc.on { background: var(--tint); box-shadow: inset 0 0 0 1.5px #B9D8C3; color: var(--forest); }
.scr .sec { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 6px 16px 3px; font: 800 11.5px Figtree; letter-spacing: .06em; text-transform: uppercase; color: var(--body); }
.scr .sec em { font-style: normal; font-weight: 600; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.scr .rows { list-style: none; margin: 0 10px; padding: 0; background: #fff; border: 1px solid var(--sand); border-radius: 14px; overflow: hidden; }
.scr .lrow { display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 2px; border-top: 1px solid #EEE8DB; min-height: 42px; }
.scr .lrow:first-child { border-top: 0; }
.scr .lrow.land { animation: land .5s var(--ease-pop) both; }
.scr .lrow.clearing { animation: clearout .32s var(--ease-out) both; }
@keyframes clearout { to { opacity: 0; transform: translateX(-24px); } }
.scr .lrow.clearing:nth-child(2) { animation-delay: 30ms; } .scr .lrow.clearing:nth-child(3) { animation-delay: 60ms; } .scr .lrow.clearing:nth-child(4) { animation-delay: 90ms; }
@keyframes land { 0% { opacity: 0; transform: translateY(-18px) scale(.96); } 60% { opacity: 1; transform: translateY(3px) scale(1.01); } 100% { transform: none; } }
.scr .lrow.done .nm > b { color: var(--muted); }
.scr .cbw { width: 38px; height: 38px; display: grid; place-items: center; flex: none; }
.scr .cb { width: 26px; height: 26px; border-radius: 8px; border: 2px solid #A9B1AB; background: #fff; display: grid; place-items: center; color: #F5F1E8; transition: background .2s, border-color .2s; overflow: visible; }
.scr .cb.done { background: var(--forest); border-color: var(--forest); }
.scr .cb.stamped { animation: boxpop .45s var(--ease-pop); }
.scr .cb.stamped .mk { animation: stampin .42s var(--ease-pop) both; }
@keyframes boxpop { 0% { transform: scale(1); } 45% { transform: scale(1.14, .9); } 100% { transform: scale(1); } }
@keyframes stampin { 0% { transform: scale(2.1) rotate(-14deg); opacity: 0; } 55% { transform: scale(.92) rotate(2deg); opacity: 1; } 100% { transform: none; } }
.scr .minus { width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.scr .minus i { width: 22px; height: 22px; border-radius: 50%; background: var(--ss); position: relative; }
.scr .minus i:after { content: ""; position: absolute; left: 5px; right: 5px; top: 10px; height: 2.5px; background: #fff; border-radius: 2px; }
.scr .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.scr .nm1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.scr .nm1 > b, .scr .nmb { font: 800 14.5px Figtree; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; min-height: 30px; display: inline-flex; align-items: center; }
.scr .nmb { flex: 0 1 auto; }
.scr .lrow.done .nmb { color: var(--muted); }
.scr .nm .pl { display: block; font: 500 11px Figtree; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr .nm .pl b { font: 700 11px Figtree; color: var(--green); font-variant-numeric: tabular-nums; }
.scr .lrow { min-height: 50px; }
.scr .nm .pl em { font-style: normal; color: var(--muted); }
.scr .nm .pl.flip { animation: flip .5s var(--ease-out); }
/* the change chip after a level switch */
.scr .chg { display: inline-flex; gap: 4px; margin: 0 2px 6px; font: 600 11px Figtree; color: var(--forest); background: var(--tint); border-radius: 999px; padding: 3px 9px; }
.scr .chg b { font: 800 11px Rubik; font-variant-numeric: tabular-nums; }
.scr .top3 > li { transition: transform .45s var(--ease-out); will-change: transform; }
/* setting icons: one per setting the person put on the item */
.scr .sets { display: inline-flex; gap: 3px; flex: none; }
.scr .si { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--forest); flex: none; }
.scr .si svg { width: 13px; height: 13px; }
.scr .si.add { background: transparent; box-shadow: inset 0 0 0 1.5px #D6CDB9; color: #A19A88; border-style: dashed; }
.scr .si.add svg { width: 11px; height: 11px; }
.scr .sets.snap .si:not(.add) { animation: snap .5s var(--ease-pop) both; }
.scr .tchip { flex: none; font: 600 11px Figtree; color: var(--muted); padding: 2px 7px; min-height: 22px; border-radius: 999px; border: 1.5px dashed #C9C1AE; }
.scr .tchip.on { background: var(--tint); color: var(--forest); border: 1.5px solid var(--tint); font-weight: 700; }
.scr .tchip.nt { border-style: solid; border-color: transparent; background: #F1EDE4; }
@keyframes snap { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: none; } }
.scr .dots { display: inline-flex; gap: 3px; flex: none; margin-top: 4px; }
.scr .dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--muted); }
.scr .dot svg { width: 12px; height: 12px; }
.scr .dot.up { background: var(--green); } .scr .dot.swap { background: #1D63C4; } .scr .dot.sale, .scr .dot.drop { background: var(--ss); }
.scr .stepper { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.scr .stepper button { width: 28px; height: 28px; border-radius: 50%; background: var(--tint); color: var(--forest); font: 800 16px Rubik; display: grid; place-items: center; }
.scr .stepper b { font: 800 13px Rubik; min-width: 14px; text-align: center; }
.scr .qty { font: 700 10.5px Rubik; color: var(--muted); background: #F1EDE4; padding: 0 5px; min-height: 22px; border-radius: 6px; flex: none; display: inline-grid; place-items: center; }
.scr .qty.many { color: var(--ink); font-weight: 800; background: var(--tint); }
/* the Q badge: a whole letter Q at every score; the fill inside is the score */
.qb { position: relative; display: inline-flex; align-items: center; gap: 4px; flex: none; }
.qb svg { width: var(--s); height: var(--s); overflow: visible; flex: none; }
.qb .qo { fill: none; stroke: currentColor; stroke-width: 11; }
.qb .qtl { fill: none; stroke: currentColor; stroke-width: 12; stroke-linecap: round; }
.qb .qfl { fill: currentColor; }
.qb b { font: 800 12.5px Rubik; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 22px; }
.scr .empty { text-align: center; padding: 40px 20px; color: var(--body); }
.scr .empty span { display: inline-flex; color: var(--muted); }
.scr .empty b { display: block; font: 800 16px Figtree; margin-top: 8px; }
.scr .empty small { display: block; font: 500 13px Figtree; color: var(--muted); margin-top: 4px; }
.scr .foot { margin: 6px 10px 0; display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 12px; background: var(--tint); font: 700 13px Figtree; color: var(--forest); min-height: 44px; }
.scr .foot.quiet { background: #F1EDE4; color: var(--body); justify-content: center; }
.scr .abtn { background: var(--forest); color: #F5F1E8; font: 800 15px Rubik; padding: 0 16px; min-height: 48px; border-radius: 13px; width: 100%; text-align: center; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s var(--ease-pop); }
.scr .abtn:active { transform: scale(.97); }
.scr .abtn.sm { width: auto; font-size: 13px; min-height: 34px; padding: 0 12px; border-radius: 9px; }
.scr .toast { position: absolute; left: 12px; right: 12px; bottom: 124px; background: var(--ink); color: #F5F1E8; padding: 10px 12px; border-radius: 12px; font: 600 13px/1.35 Figtree; display: flex; align-items: center; justify-content: space-between; gap: 10px; z-index: 12; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); }
.scr .toast button { color: var(--mint); font: 800 12px Rubik; letter-spacing: .06em; min-height: 30px; padding: 0 6px; flex: none; }
/* the verdict: top 3 stores at this level, always. Tap one for its list. */
.scr .bar { margin: 6px 10px 10px; background: var(--forest); color: #F5F1E8; border-radius: 15px; padding: 8px 6px 6px 10px; box-shadow: 0 12px 30px -12px rgba(29,74,52,.6); }
.scr .barhd { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 11px Figtree; color: #BFD6C6; margin: 0 4px 4px 0; }
.scr .barhd b { font: 800 13px Rubik; color: #F5F1E8; }
.scr .barhd b em { font: 700 10.5px Figtree; font-style: normal; color: var(--mint); margin-left: 2px; }
.scr .top3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.scr .t3 { width: 100%; display: grid; grid-template-columns: 74px 1fr auto 16px; align-items: center; gap: 8px; min-height: 28px; padding: 2px 0 2px 4px; margin-left: -4px; border-radius: 9px; transition: background .2s, transform .2s var(--ease-pop); color: inherit; }
.scr .t3:active { transform: scale(.985); }
.scr .t3.best { background: rgba(127,224,166,.12); }
.scr .t3v { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.scr .t3 .stc { font-size: 10px; padding: 2px 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr .t3track { height: 9px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; }
.scr .t3bar { display: block; height: 100%; width: 100%; border-radius: 5px; background: rgba(245,241,232,.45); transform-origin: 0 50%; transform: scaleX(var(--w, 1)); transition: transform .55s var(--ease-out); will-change: transform; }
.scr .t3.best .t3bar { background: var(--mint); box-shadow: 0 0 10px rgba(127,224,166,.5); }
.scr .t3 b { font: 800 13px Rubik; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.scr .t3.best b { color: var(--mint); }
.scr .t3 small { font: 600 9.5px Figtree; color: #BFD6C6; }
.scr .t3 .chev.r { transform: rotate(-90deg); color: #BFD6C6; }
.scr .t3.best .chev.r { color: var(--mint); }
/* shop mode: running total */
.scr .bar.shop { padding: 10px 12px 10px; }
.scr .bar.shop .barhd { margin: 0; align-items: flex-start; }
.scr .run { text-align: right; }
.scr .run small { display: block; font: 600 10px Figtree; letter-spacing: .08em; text-transform: uppercase; color: #BFD6C6; }
.scr .run b { display: block; font: 800 22px Rubik; color: var(--mint); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.scr .shopact { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; }
.scr .shopact .quiet { font: 600 12px Figtree; color: #BFD6C6; }
.scr .lnk { font: 700 12.5px Figtree; color: inherit; opacity: .85; text-decoration: underline; text-underline-offset: 3px; min-height: 34px; padding: 0 4px; }
.scr .moved { animation: numGlow .7s var(--ease-out); }
@keyframes numGlow { 0% { color: var(--mint); } 100% { } }
.scr .stc { display: inline-block; font: 700 11px Rubik; padding: 3px 7px; border-radius: 999px; vertical-align: 1px; }
.stc2 { display: inline-grid; grid-auto-flow: column; gap: 3px; justify-items: start; align-items: center; }
.stc2 .stc { font-size: 9px !important; padding: 2px 6px !important; line-height: 1.3; white-space: nowrap; }
.scr .t3.sp { grid-template-columns: auto 1fr auto 16px; }
.scr .t3.sp .t3track { min-width: 40px; }
.scr .t3note { grid-column: 1 / -1; font: 600 9.5px Figtree; color: #BFD6C6; margin: -2px 0 2px; }
.scr .t3track { position: relative; }
.scr .t3c { display: inline-flex; gap: 4px; align-items: center; }
.scr .t3 .usual { font: 800 8px Rubik; font-style: normal; letter-spacing: .08em; text-transform: uppercase; background: var(--yellow); color: var(--ink); padding: 1px 5px; border-radius: 999px; line-height: 1.3; }
.scr .t3 .usual.sp { background: #FFFDF8; color: var(--forest); }
.scr .barusual { display: block; width: 100%; margin-top: 6px; padding: 5px 6px; border-top: 1px solid rgba(255,255,255,.14); font: 600 11px Figtree; color: #BFD6C6; text-align: left; }
.scr .barusual b { color: #FFFDF8; font: 800 11px Rubik; }
.scr .sec.sto { display: flex; padding: 8px 16px 3px; }
.scr .svsec { display: flex; align-items: center; gap: 8px; padding: 7px 10px 4px; background: var(--cream); font: 800 11px Figtree; letter-spacing: .06em; text-transform: uppercase; color: var(--body); border-top: 1px solid #EEE8DB; }
.scr .svsec em { font-style: normal; font-weight: 600; color: var(--muted); letter-spacing: 0; text-transform: none; }
.scr .dim { position: absolute; inset: 0; background: rgba(22,33,27,.32); z-index: 8; animation: fade .3s both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.scr .menu { position: absolute; left: 16px; top: 56px; z-index: 9; background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.4), 0 0 0 1px var(--sand); min-width: 210px; }
.scr .menu > b { display: block; font: 700 10.5px Figtree; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; }
.scr .menu button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 12px; min-height: 42px; border-radius: 10px; font: 700 14px Figtree; }
.scr .menu button.on { background: var(--tint); color: var(--forest); }
.scr .menu button small { font: 500 12px Figtree; color: var(--muted); }
.scr .sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; background: #FAF8F3; border-radius: 24px 24px 0 0; padding: 8px 14px 14px; box-shadow: 0 -20px 50px -20px rgba(0,0,0,.4); max-height: 92%; display: flex; flex-direction: column; touch-action: none; }
.scr .sheet.rise, .scr .receipt.rise { animation: sheetUp .4s var(--ease-out) both; }
@keyframes sheetUp { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } }
.scr .handle { width: 38px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 8px; flex: none; }
.scr .sh { display: flex; justify-content: space-between; align-items: center; font: 800 16px Rubik; margin-bottom: 8px; flex: none; }
.scr .sh .x { width: 36px; height: 36px; border-radius: 50%; background: #F1EDE4; display: grid; place-items: center; color: var(--body); }
.scr .shsub { display: block; font: 500 12.5px Figtree; color: var(--muted); margin: -4px 0 10px; }
.scr .opts { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px; padding-bottom: 12px; flex: none; }
.scr .opts button { display: inline-flex; align-items: center; gap: 7px; font: 700 14px Figtree; padding: 0 14px 0 8px; min-height: 42px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); transition: transform .15s var(--ease-pop), background .15s; }
.scr .opts button svg { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--tint); color: var(--forest); flex: none; }
.scr .opts button.on { background: var(--forest); color: #F5F1E8; border-color: var(--forest); }
.scr .opts button.on svg { background: rgba(255,255,255,.18); color: #F5F1E8; }
.scr .opts button.none { opacity: .5; cursor: default; }
.scr .opts button small { font: 600 10.5px Figtree; color: var(--muted); }
.scr .sh b span { font: 700 13px Figtree; color: var(--body); margin-left: 4px; }
.scr .svtot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 8px; flex: none; }
.scr .svt b { display: block; font: 800 28px Rubik; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.scr .svt small { display: block; font: 600 12px Figtree; color: var(--muted); margin-top: 2px; }
.scr .svq { display: flex; align-items: center; gap: 8px; }
.scr .svq small { font: 700 10.5px Figtree; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); width: 3ch; line-height: 1.15; }
.scr .svscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; margin: 0 -2px; padding: 0 2px; }
.scr .svscroll::-webkit-scrollbar { display: none; }
.scr .svrows { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--sand); border-radius: 14px; overflow: hidden; }
.scr .svrow { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-top: 1px solid #EEE8DB; }
.scr .svrows li:first-child { border-top: 0; }
.scr .svrow .nm { display: block; }
.scr .svrow .nm > b { display: block; white-space: normal; font-size: 14px; }
.scr .svrow small { display: block; font: 500 11px Figtree; color: var(--muted); margin-top: 1px; }
.scr .svrow .pr { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.scr .svrow .pr > b { font: 800 13.5px Rubik; font-variant-numeric: tabular-nums; }
.scr .swp { display: inline-flex; align-items: center; gap: 4px; font: 700 11px Figtree; color: var(--forest); background: var(--tint); padding: 0 8px; min-height: 24px; border-radius: 999px; }
.scr .swp em { font: 800 10px Rubik; font-style: normal; background: #fff; color: var(--forest); padding: 0 5px; border-radius: 999px; min-width: 16px; text-align: center; line-height: 16px; }
.scr .swp.on { background: var(--forest); color: #F5F1E8; }
.scr .swp.did { background: #1D63C4; color: #fff; } .scr .swp.did em { color: #1D63C4; }
.scr .only { font: 600 10.5px Figtree; color: var(--muted); }
.scr .svrow.flip { animation: flip .5s var(--ease-out); }
@keyframes flip { 0% { background: var(--tint); } 100% { background: transparent; } }
.scr .svexp { display: block; background: var(--cream); border-top: 1px solid #EEE8DB; }
.scr .svexpin { padding: 7px 8px; transition: opacity .15s linear; }
.scr .svexp.closing .svexpin { opacity: 0; }
.scr .svexp small:first-child { display: block; font: 700 10.5px Figtree; color: var(--body); margin-bottom: 5px; }
.scr .opt .stc { flex: none; font-size: 9.5px; padding: 2px 6px; }
.scr .opt { display: flex; align-items: center; gap: 8px; background: #fff; border-top: 3px solid var(--forest); border-radius: 10px; padding: 6px 8px; margin-top: 5px; font: 700 12.5px Figtree; width: 100%; min-height: 46px; animation: rise .28s var(--ease-out) both; }
.scr .opt .onm { flex: 1; min-width: 0; }
.scr .opt .onm b { font-weight: 800; display: block; line-height: 1.2; }
.scr .opt .onm small { display: block; font: 500 10.5px/1.3 Figtree; color: var(--muted); margin-top: 2px; }
.scr .opt > b { font: 800 12.5px Rubik; flex: none; }
.scr .opt em { flex: none; font: 800 9px Rubik; font-style: normal; background: var(--tint); color: var(--forest); padding: 2px 6px; border-radius: 999px; }
.scr .opt.cur { box-shadow: 0 0 0 2px var(--forest); }
.scr .opt.low { opacity: .7; }
.scr .unpin { display: block; margin: 8px auto 2px; font: 700 12.5px Figtree; color: var(--green); min-height: 34px; text-decoration: underline; text-underline-offset: 3px; }
.scr .svfoot { padding-top: 10px; flex: none; display: grid; gap: 6px; justify-items: center; }
.scr .svhint { font: 500 11.5px Figtree; color: var(--muted); text-align: center; }
.scr .abtn.go { background: var(--mint); color: var(--forest); }
.scr .svfoot .lnk { color: var(--green); opacity: 1; }
.scr .receipt { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; justify-content: center; padding: 16px; gap: 12px; }
/* the finish screen: usual store vs Basqet's pick, example prices */
.scr .finish { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; justify-content: flex-start; padding: 14px 12px; overflow-y: auto; scrollbar-width: none; }
.scr .finish::-webkit-scrollbar { display: none; }
.scr .fcard2 { background: #FFFDF8; border-radius: 22px; padding: 18px 16px 14px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); display: grid; gap: 9px; justify-items: start; margin: auto 0; }
.scr .fchips { display: flex; align-items: center; gap: 8px; }
.scr .fchips .arrow { font-style: normal; color: var(--muted); font-weight: 700; }
.scr .fhead { font: 800 20px/1.15 Rubik; letter-spacing: -.02em; }
.scr .fline { font: 500 15px/1.4 Figtree; color: var(--body); }
.scr .fline b { color: var(--green); font-weight: 800; font-variant-numeric: tabular-nums; }
.scr .fnote { font: 500 11.5px/1.4 Figtree; color: var(--muted); }
.scr .fq { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--tint); width: 100%; }
.scr .fq .qb { --s: 44px !important; gap: 0; }
.scr .fq .qb b { display: none; }
.scr .fq > span b { display: block; font: 800 15px Rubik; }
.scr .fq > span small { display: block; font: 600 11px Figtree; color: var(--body); }
.scr .fq .share { margin-left: auto; flex: none; font: 800 12px Rubik; color: var(--forest); background: #fff; border: 1.5px solid var(--forest); border-radius: 999px; min-height: 32px; padding: 0 12px; }
.scr .fform { width: 100%; flex-direction: column; gap: 6px; margin-top: 2px; }
.scr .fform input { min-height: 44px; font-size: 15px; box-shadow: inset 0 0 0 1.5px var(--line); }
.scr .fform .abtn { min-height: 44px; font-size: 14px; }
.scr .fcard2 .fnote b { color: var(--green); }
.scr .fcard2 .fnote.msg { color: var(--ink); font-weight: 700; }
.scr .fcard2 .lnk { justify-self: center; color: var(--green); opacity: 1; }
.scr .flinks { display: flex; gap: 18px; justify-self: center; }
/* where do you usually shop? */
.scr .sheet.usual { touch-action: auto; }
.scr .opts.storepick button { background: var(--c); color: var(--i); border-color: transparent; font: 800 14px Rubik; padding: 0 16px; }
.scr .opts.storepick button.on { box-shadow: 0 0 0 3px var(--ink); }
.scr .abtn[disabled] { opacity: .45; cursor: default; }
.scr .abtn.sm.go { background: var(--mint); color: var(--forest); font-size: 14px; min-height: 38px; padding: 0 16px; }
.scr .paper { background: #FFFDF8; color: var(--ink); padding: 16px 14px 20px; border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); font: 600 12px/1.4 Figtree; position: relative; max-height: 100%; overflow: hidden; }
.scr .paper:after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: radial-gradient(circle at 6px -2px, transparent 6px, #FFFDF8 6.5px) left/12px 8px repeat-x; }
.scr .paper .rs { display: block; font: 800 17px Rubik; }
.scr .paper > small { display: block; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.scr .pline { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed #E4DDCC; animation: rise .3s var(--ease-out) both; font-variant-numeric: tabular-nums; }
.scr .pline span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr .ptot { display: flex; justify-content: space-between; margin-top: 10px; font: 800 13px Rubik; letter-spacing: .04em; }
.scr .ptot.sm { font-size: 10.5px; color: var(--body); margin-top: 6px; }
.scr .pnote { display: block; color: var(--muted); font-weight: 500; font-size: 10.5px; margin-top: 8px; }
.scr .stamp { position: absolute; right: 14px; bottom: 30px; border: 3px solid var(--green); color: var(--green); border-radius: 10px; padding: 6px 12px; font: 800 10.5px Rubik; letter-spacing: .12em; rotate: -8deg; animation: slam .5s var(--ease-pop) both; text-align: center; }
.scr .stamp b { display: block; font-size: 20px; letter-spacing: -.02em; }
@keyframes slam { from { opacity: 0; scale: 1.8; } to { opacity: 1; scale: 1; } }
.rise { animation: rise .35s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pop { animation: popin .5s var(--ease-pop) both; }
@keyframes popin { from { opacity: 0; transform: scale(.9) translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .scr *, .rise, .pop, .qb .qfl { animation: none !important; transition: none !important; } }

/* ---------- round 9 additions ---------- */
/* the top 3 sheet, on paper */
.scr .sheet.top3s { max-height: 95%; }
.scr .pitch { font: 600 12.5px/1.35 Figtree; color: var(--body); margin: -2px 0 10px; flex: none; }
.scr .top3.big { gap: 5px; flex: none; }
.scr .top3.big .t3 { grid-template-columns: minmax(84px, auto) 1fr auto 16px; min-height: 46px; padding: 5px 4px 5px 8px; margin: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--sand); color: var(--ink); }
.scr .top3.big .t3c { flex-wrap: wrap; max-width: 132px; }
.scr .top3.big .t3 .stc { font-size: 10.5px; }
.scr .top3.big .t3track { background: var(--sand); height: 8px; min-width: 34px; }
.scr .top3.big .t3bar { background: #9FB8A8; box-shadow: none; }
.scr .top3.big .t3.best { background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--forest); }
.scr .top3.big .t3.best .t3bar { background: var(--forest); box-shadow: none; }
.scr .top3.big .t3 b { font-size: 15px; min-width: 40px; color: var(--ink); }
.scr .top3.big .t3.best b { color: var(--forest); }
.scr .top3.big .t3 small { color: var(--muted); font-size: 10px; }
.scr .top3.big .t3 .chev.r { color: var(--muted); } .scr .top3.big .t3.best .chev.r { color: var(--forest); }
.scr .top3.big .t3note { color: var(--muted); }
.scr .t3 .bt { font: 800 8px Rubik; font-style: normal; letter-spacing: .08em; text-transform: uppercase; background: var(--forest); color: #F5F1E8; padding: 1px 5px; border-radius: 999px; line-height: 1.3; }
.scr .shsub.how { margin: 10px 0 4px; flex: none; }
.scr .disc { display: block; font: 500 10.5px/1.35 Figtree; color: var(--muted); flex: none; }
/* the store list: Best pick per item, More options folded under it */
.scr .bpnote { font: 500 11.5px/1.35 Figtree; color: var(--muted); margin: -2px 2px 8px; flex: none; }
.scr .svrow .bp em { font: 800 8.5px Rubik; letter-spacing: .08em; text-transform: uppercase; background: var(--tint); color: var(--forest); padding: 1px 5px; border-radius: 999px; font-style: normal; margin-right: 4px; vertical-align: 1px; }
.scr .svrow .whyl { color: var(--green); font-weight: 600; font-size: 10.5px; }
.scr .more { display: inline-flex; align-items: center; gap: 4px; font: 700 10.5px Figtree; color: var(--forest); background: var(--tint); padding: 0 6px 0 8px; min-height: 24px; border-radius: 999px; white-space: nowrap; }
.scr .more em { font: 800 9.5px Rubik; font-style: normal; background: #fff; color: var(--forest); padding: 0 5px; border-radius: 999px; min-width: 14px; text-align: center; line-height: 15px; }
.scr .more svg { transition: transform .25s var(--ease-out); width: 13px; height: 13px; }
.scr .more.on { background: var(--forest); color: #F5F1E8; } .scr .more.on svg { transform: rotate(180deg); }
.scr .opt .dir { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; width: 46px; font: 800 8.5px Rubik; letter-spacing: .06em; text-transform: uppercase; color: var(--forest); }
.scr .opt .dir svg { width: 15px; height: 15px; }
.scr .opt.save { border-top-color: #1D63C4; } .scr .opt.save .dir { color: #1D63C4; }
.scr .opt.both { border-top-color: var(--mint); }
.scr .opt .op { font: 800 12.5px Rubik; flex: none; font-variant-numeric: tabular-nums; }
.scr .opt .qb { --s: 18px !important; gap: 3px; } .scr .opt .qb b { font-size: 10.5px; min-width: 0; }
.scr .lowtag { display: inline-block; font: 700 9px Figtree; color: #9A5B2E; background: #FBEEDD; padding: 1px 6px; border-radius: 999px; margin-top: 3px; font-style: normal; }
.scr .svrow.picked { animation: picked .8s var(--ease-out); }
@keyframes picked { 0% { background: var(--tint); } 100% { background: transparent; } }
.scr .svrow.picked .bp, .scr .svrow.picked .pr > b { animation: textin .35s var(--ease-out) both; }
.scr .svback { display: block; padding: 0 10px 6px; background: #fff; border-top: 0; }
.scr .lnk.back { color: var(--green); opacity: 1; font-size: 12px; min-height: 28px; }
.scr .svexpin .lnk.back { display: block; margin: 6px auto 0; }
/* why this Q */
.scr .sheet.why { max-height: 72%; }
.scr .whyhd { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex: none; }
.scr .whyhd .qb { --s: 48px !important; gap: 0; flex: none; } .scr .whyhd .qb b { display: none; }
.scr .whyhd > div { flex: 1; min-width: 0; }
.scr .whyhd b { display: block; font: 800 16px/1.2 Rubik; }
.scr .whyhd small { display: block; font: 500 12px Figtree; color: var(--muted); margin-top: 2px; }
.scr .reasons { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; overflow-y: auto; min-height: 0; }
.scr .reasons li { display: flex; align-items: center; gap: 9px; font: 700 14px Figtree; padding: 9px 11px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--sand); }
.scr .reasons li:before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.scr .reasons li.bad:before { background: var(--ss); }
.scr .qbw { display: inline-flex; flex: none; padding: 4px; margin: -4px; border-radius: 10px; }
/* settings sheet: the toggle pops */
.scr .opts button:active { transform: scale(.96); }
.scr .opts button.pop { animation: optpop .45s var(--ease-pop); }
@keyframes optpop { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
/* the result: the Q gain as big as the money, and the year line */
.rq { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.rq .qb { --s: 54px !important; gap: 0; } .rq .qb b { display: none; }
.rq .qb svg { color: #CFE0D4; } .rq [data-r-qb2] .qb svg { color: var(--mint); }
.rq .arrow { font-style: normal; font: 800 26px Rubik; color: var(--mint); }
.rq .rqt { display: grid; gap: 2px; margin-left: 6px; }
.rq .rqt b { font: 800 clamp(22px, 2.6vw, 30px)/1 Rubik; color: #FFFDF8; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rq .rqt small { font: 600 12.5px Figtree; color: #BFD6C6; }
.ryear { position: relative; margin-top: 18px; padding: 14px 16px 12px; border-radius: 16px; border: 1.5px dashed rgba(127,224,166,.6); max-width: 520px; display: grid; gap: 2px; }
.ryear[hidden] { display: none; }
.ryear .tagx { position: absolute; right: 12px; top: -10px; }
.ryear span { font: 700 13px Figtree; color: #D8E6DC; }
.ryear b { font: 800 clamp(30px, 3.4vw, 40px)/1.05 Rubik; color: var(--mint); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ryear .ryn { font: 500 12px/1.4 Figtree; color: #A8C4B2; }
.result.noresult .rq, .result.noresult .ryear { display: none; }
/* coming next: grouped stores with a vote on each */
.nextgroups { display: grid; gap: 14px; margin-top: 14px; }
.ng h4 { margin: 0 0 6px; font: 800 11px Figtree; letter-spacing: .12em; text-transform: uppercase; color: var(--body); }
.ng ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ng li { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border-radius: 999px; padding: 4px 5px 4px 13px; font: 700 13.5px Figtree; box-shadow: inset 0 0 0 1.5px var(--line); transition: background .2s, color .2s; }
.ng li .v { border: 0; cursor: pointer; font: 800 11px Rubik; padding: 0 10px; min-height: 28px; border-radius: 999px; background: var(--tint); color: var(--forest); transition: transform .2s var(--ease-pop); }
.ng li.on { background: var(--forest); color: #F5F1E8; box-shadow: none; }
.ng li.on .v { background: var(--mint); }
.ng li .v:active { transform: scale(.94); }
.otherstore { display: flex; gap: 8px; max-width: 420px; margin-top: 16px; }
.otherstore input { flex: 1; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line); padding: 0 14px; font: 500 16px Figtree; background: #fff; min-width: 0; }
.votesum { margin-top: 10px; font-weight: 700; color: var(--forest); }
/* hero on phones: the copy is the content, the phone is background art */
.hcopy .pitch { font: 500 15px/1.45 Figtree; color: #D8E6DC; margin-top: 12px; max-width: 36ch; }
.hcopy .pitch b { color: #FFFDF8; font-weight: 700; }
.hsticker { display: none; }
@media (max-width: 699px) {
  .hero { min-height: calc(100vh - 56px); min-height: calc(var(--svh, 100svh) - 56px); align-content: center; padding: 10px 0 26px; }
  .hcopy { position: relative; z-index: 1; }
  .hstage { position: absolute; right: -58px; top: 6px; width: 330px; margin: 0; padding: 0; z-index: 0; pointer-events: none; transform: rotate(-9deg) scale(.72); transform-origin: top right; opacity: .38; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 90%); mask-image: linear-gradient(180deg, #000 45%, transparent 90%); }
  .hstage .glow, .hstage .deco { display: none; }
  .hstage .phone { height: auto; aspect-ratio: 360 / 740; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
  .hstage .shell { animation-duration: 1.2s; }
  .hsticker { display: grid; position: absolute; right: -4px; top: -6px; width: 74px; height: 74px; font-size: 7.5px; padding: 0 4px; z-index: 2; }
  .hsticker b { font-size: 18px; margin: 2px 0; }
  .hcopy .sub { margin-top: 10px; }
  .hcopy .eyebrow { max-width: 70%; }
}
@media (min-width: 700px) { .hcopy .pitch { font-size: clamp(15px, 1.3vw, 18px); max-width: 44ch; margin-top: 14px; } }
/* the cue under the result: the page goes on */
.rmore { display: grid; justify-items: center; gap: 3px; margin: 34px auto 0; text-decoration: none; color: var(--mint); font: 800 13px Rubik; letter-spacing: .1em; text-transform: uppercase; text-align: center; max-width: 420px; }
.rmore small { font: 500 12.5px/1.4 Figtree; color: #BFD6C6; text-transform: none; letter-spacing: 0; }
.rmore i { font-style: normal; font: 800 24px/1 Rubik; margin-top: 4px; animation: bob 1.5s ease-in-out infinite; will-change: transform; }
@keyframes bob { 50% { transform: translateY(6px); } }
.rmore:hover span { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px) { .rmore { margin-top: 48px; } }
@media (prefers-reduced-motion: reduce) { .rmore i { animation: none; } }
/* the live line: Basqet's pick vs your store, for the list so far */
.scr .vs { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font: 600 11px Figtree; color: #BFD6C6; margin: -1px 0 2px; min-height: 18px; }
.scr .vs .vsl { white-space: nowrap; }
.scr .vs .vsm { font: 800 13px Rubik; color: var(--mint); font-variant-numeric: tabular-nums; }
.scr .vs .vsm.more { color: #F5F1E8; }
.scr .vs .vsq { font: 800 11px Rubik; font-style: normal; color: #F5F1E8; background: rgba(255,255,255,.12); padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.scr .vs .vsq.down { background: rgba(210,54,60,.35); }
.scr .vs .moved { animation: numGlow .7s var(--ease-out); }