/* Jarapass prototype — component styles.
   Structure comes from Design System/INSPIRATION_ANALYSIS.md:
   bento tiles, floating pill nav with a FAB, category colour-blocking,
   photo-led vendor cards, status pills, big-number-led screens.
   Light base is the approved brand decision; the ink floating nav is where
   the acid-on-ink energy of the inspiration set lives. */

@font-face{font-family:CD;src:url('assets/cd/ClashDisplay-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:CD;src:url('assets/cd/ClashDisplay-Semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:SA;src:url('assets/sa/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:SA;src:url('assets/sa/Satoshi-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:SA;src:url('assets/sa/Satoshi-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* a <button> does NOT inherit colour - it falls back to the UA's buttontext (black).
   Every card built on a button went near-black on a dark card in dark mode. */
button,input,select,textarea{font:inherit;color:inherit}
body{
  font-family:SA,system-ui,sans-serif;background:#E9E7E1;color:var(--text-primary);
  font-feature-settings:"tnum" 1;
  display:flex;flex-direction:column;align-items:center;padding:28px 16px 48px;gap:20px;
}
body[data-theme="dark"]{background:#080906}

/* ---------- type scale (DESIGN.md §3) ------------------------------ */
.t-display{font-family:CD;font-weight:600;font-size:40px;line-height:44px;letter-spacing:-.025em}
.t-h1{font-family:CD;font-weight:600;font-size:28px;line-height:32px;letter-spacing:-.02em}
.t-h2{font-family:CD;font-weight:600;font-size:22px;line-height:27px;letter-spacing:-.015em}
.t-fig-lg{font-family:CD;font-weight:600;font-size:24px;line-height:28px}
.t-fig-sm{font-family:CD;font-weight:600;font-size:17px;line-height:22px}
.t-title{font-weight:700;font-size:17px;line-height:23px;letter-spacing:-.01em}
.t-body{font-weight:400;font-size:15px;line-height:22px}
.t-strong{font-weight:700;font-size:15px;line-height:21px}
.t-label{font-weight:700;font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase}
.t-caption{font-weight:500;font-size:13px;line-height:18px}
.dim{color:var(--text-secondary)}

/* ---------- harness chrome ---------------------------------------- */
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.bar button{font-family:SA;font-weight:700;font-size:12px;letter-spacing:.04em;padding:9px 15px;
  border-radius:999px;border:1px solid #CFCCC4;background:#FAF8F3;color:#0B0E09;cursor:pointer}
.bar button[aria-pressed="true"]{background:#0B0E09;color:#FAF8F3;border-color:#0B0E09}
body[data-theme="dark"] .bar button{background:#1C1F18;color:#F2F0EA;border-color:#2E322A}
body[data-theme="dark"] .bar button[aria-pressed="true"]{background:#C8F02F;color:#0B0E09;border-color:#C8F02F}
.bar .sep{width:1px;height:20px;background:#CFCCC4;margin:0 4px}

/* ---------- phone -------------------------------------------------- */
.phone{width:390px;height:844px;border-radius:44px;background:var(--surface-page);
  border:1px solid rgba(0,0,0,.18);box-shadow:0 24px 60px rgba(11,14,9,.22);
  position:relative;overflow:hidden;display:flex;flex-direction:column;color:var(--text-primary)}
.notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:110px;height:28px;
  background:#0B0E09;border-radius:99px;z-index:60}
.statusbar{height:52px;flex:0 0 52px;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 26px 8px;font-size:12px;font-weight:700;z-index:41}
.phone-label{text-align:center;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#8A8D82;margin-top:12px}
.view{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding-bottom:118px}
.view::-webkit-scrollbar{display:none}
.pad{padding:0 20px}

/* ---------- floating pill nav + FAB -------------------------------- */
.navwrap{position:absolute;left:0;right:0;bottom:0;height:118px;z-index:45;pointer-events:none}
.nav{position:absolute;left:16px;right:16px;bottom:24px;height:62px;border-radius:999px;
  background:var(--nav-bg);display:flex;align-items:center;justify-content:space-around;
  padding:0 10px;pointer-events:auto;box-shadow:0 10px 30px rgba(11,14,9,.3)}
.nav button{background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:999px;color:var(--hero-dim);
  font-family:SA;font-weight:700;font-size:12px;min-height:44px}
.nav button[aria-selected="true"]{background:var(--lime-500);color:#0B0E09}
.nav button .lbl{display:none}
.nav button[aria-selected="true"] .lbl{display:inline}
.nav .ico{width:21px;height:21px;display:block}
.nav .spacer{width:64px;flex:0 0 64px}
.fab{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);width:66px;height:66px;
  border-radius:50%;background:var(--lime-500);border:4px solid var(--surface-page);cursor:pointer;
  display:grid;place-items:center;pointer-events:auto;box-shadow:0 8px 24px rgba(11,14,9,.28);z-index:46}
.fab svg{width:26px;height:26px;color:#0B0E09}
.fab .cap{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:9.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hero-dim)}

/* ---------- bento --------------------------------------------------- */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{border-radius:20px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;
  min-height:112px;border:0}
.tile.wide{grid-column:span 2}
.tile.ink{background:var(--hero-bg);color:var(--hero-fg)}
.tile.ink .t-caption{color:var(--hero-dim)}
.tile.ink .t-label{color:var(--hero-dim)}
.tile.lime{background:var(--lime-500);color:#0B0E09}
.tile.plain{background:var(--surface-card);box-shadow:var(--shadow-card)}
.tile .big{font-family:CD;font-weight:600;letter-spacing:-.025em}

/* ---------- category grid (neubrutalist colour-blocking) ------------ */
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cattile{border-radius:18px;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;border:0;cursor:pointer;color:#0B0E09;padding:6px;min-height:44px}
.cattile svg{width:23px;height:23px}
.cattile span{font-size:10px;font-weight:700;letter-spacing:.01em;text-align:center;line-height:12px}
.cattile[aria-pressed="true"]{outline:3px solid var(--text-primary);outline-offset:2px}

/* ---------- photo-led vendor card ----------------------------------- */
.vcard{display:block;width:100%;text-align:left;border:0;padding:0;cursor:pointer;
  background:var(--surface-card);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-card)}
.vcard .ph{position:relative;aspect-ratio:16/10;background:var(--surface-sunken)}
.vcard .ph img{width:100%;height:100%;object-fit:cover;display:block}
.vcard .ph .pills{position:absolute;left:12px;top:12px;display:flex;gap:6px;flex-wrap:wrap}
.vcard .ph .dist{position:absolute;right:12px;bottom:12px;background:rgba(11,14,9,.72);color:#FAF8F3;
  border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700}
.vcard .body{padding:14px 16px 16px}
.vrow{display:flex;gap:12px;align-items:center;padding:12px;background:var(--surface-card);
  border-radius:16px;box-shadow:var(--shadow-card);width:100%;border:0;cursor:pointer;text-align:left}
.vrow .thumb{width:56px;height:56px;border-radius:14px;flex:0 0 56px;object-fit:cover;background:var(--surface-sunken)}

/* horizontal rail — "Your 12" */
.rail{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:0 20px 4px}
.rail::-webkit-scrollbar{display:none}
.rail .vcard{width:244px;flex:0 0 244px}

/* ---------- pills ---------------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 11px;
  font-size:11px;font-weight:700;letter-spacing:.02em;color:#0B0E09;white-space:nowrap}
.pill.ghost{background:transparent;border:1px solid var(--border-subtle);color:var(--text-secondary)}
.pill.ink{background:var(--hero-bg);color:var(--hero-fg)}
.pill.lilac{background:var(--lilac-500)}
.pill.sun{background:var(--sun-500)}

/* segmented control */
.seg{display:flex;background:var(--surface-sunken);border-radius:999px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:none;cursor:pointer;border-radius:999px;padding:9px 6px;
  font-family:SA;font-weight:700;font-size:12.5px;color:var(--text-secondary);min-height:40px}
.seg button[aria-pressed="true"]{background:var(--surface-card);color:var(--text-primary);
  box-shadow:0 1px 3px rgba(11,14,9,.1)}

/* ---------- offers ---------------------------------------------------- */
.offer{padding:16px;border-radius:18px;background:var(--surface-card);box-shadow:var(--shadow-card)}
.offer.spent{background:var(--surface-sunken);box-shadow:none}
.offer.swapped{opacity:.5}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:16px;
  border:0;cursor:pointer;font-family:SA;font-weight:700;font-size:16px;width:100%;
  background:var(--accent-surface);color:var(--accent-on-surface)}
.btn.sm{min-height:44px;font-size:14px;border-radius:14px}
.btn.secondary{background:var(--surface-sunken);color:var(--text-primary)}
.btn.ink{background:var(--hero-bg);color:var(--hero-fg)}
.btn-quiet{background:none;border:0;cursor:pointer;font-family:SA;font-weight:700;font-size:15px;
  color:var(--text-secondary);min-height:44px;width:100%}

/* cap meter — the number is ALWAYS visible */
.cap .track{height:7px;border-radius:99px;background:var(--border-subtle);overflow:hidden}
.cap .fill{height:100%;background:var(--accent-surface);border-radius:99px;transition:width .4s ease}
.cap.full .fill{background:var(--sun-500)}

/* ---------- the Pass (full sheet) -------------------------------------- */
.pass{width:100%;background:#FFFFFF;border-radius:24px;padding:26px 22px 22px;color:#0B0E09;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  box-shadow:0 2px 4px rgba(11,14,9,.06),0 16px 40px rgba(11,14,9,.14)}
.qr-holder{position:relative;width:236px;height:236px;display:grid;place-items:center}
.qr-holder canvas{border-radius:6px;display:block}
.qr-holder .ring{position:absolute;inset:0;transform:rotate(-90deg)}
.qr-holder .ring circle{fill:none;stroke-width:3}
.qr-holder .ring .track{stroke:#E8E6E0}
.qr-holder .ring .prog{stroke:#C8F02F;stroke-linecap:round;transition:stroke-dashoffset .95s linear}
.pass .code{font-family:CD;font-weight:600;font-size:25px;letter-spacing:.16em}
.pass .who{display:flex;align-items:center;gap:12px;width:100%;border-top:1px solid #E8E6E0;padding-top:16px}
.avatar{width:44px;height:44px;border-radius:50%;background:#C8F02F;display:grid;place-items:center;
  font-family:CD;font-weight:700;font-size:17px;color:#0B0E09;flex:0 0 44px}

/* ---------- sheet ------------------------------------------------------- */
.scrim{position:absolute;inset:0;background:rgba(11,14,9,.5);z-index:70;opacity:0;pointer-events:none;
  transition:opacity .2s ease}
.scrim.open{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:71;background:var(--surface-raised);
  border-radius:26px 26px 0 0;padding:16px 20px 32px;transform:translateY(103%);
  transition:transform .24s cubic-bezier(.2,0,0,1);max-height:92%;overflow-y:auto;scrollbar-width:none}
.sheet::-webkit-scrollbar{display:none}
.sheet.open{transform:translateY(0)}
.grab{width:38px;height:4px;border-radius:99px;background:var(--border-subtle);margin:0 auto 16px}

/* ---------- vendor app --------------------------------------------------- */
.scan-frame{flex:1;background:#0D0F0B;display:grid;place-items:center;position:relative}
.scan-box{width:236px;height:236px;position:relative}
.scan-box i{position:absolute;width:36px;height:36px;border:3px solid var(--lime-500)}
.scan-box i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:16px 0 0 0}
.scan-box i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 16px 0 0}
.scan-box i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 16px}
.scan-box i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 16px 0}
.scan-line{position:absolute;left:6px;right:6px;height:2px;background:var(--lime-500);
  box-shadow:0 0 16px var(--lime-500);animation:sweep 2.4s ease-in-out infinite}
@keyframes sweep{0%,100%{top:12px}50%{top:220px}}
.result{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:26px;text-align:center}
.result .glyph{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:38px}
.result.ok{background:var(--state-success);color:#FFF}
.result.ok .glyph{background:rgba(255,255,255,.2)}
.result.prov{background:var(--sun-500);color:var(--ink-900)}   /* ink on Sun — white fails 2.60 */
.result.prov .glyph{background:rgba(11,14,9,.14)}

.toast{position:absolute;left:16px;right:16px;bottom:130px;z-index:80;background:var(--hero-bg);
  color:var(--hero-fg);border-radius:14px;padding:14px 16px;font-size:14px;font-weight:500;
  opacity:0;transform:translateY(8px);transition:all .2s ease;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ==================================================================
   Added 28 Sep after studying the full inspiration set.
   See Design System/UI_PRINCIPLES.md
   ================================================================== */

/* --- category tile: FILLED in light, TINTED in dark ----------------
   A saturated fill with ink text is a light-mode device. Dropped on a
   near-black page it reads as a pasted-in light component, which is
   what Samuel flagged. Dark gets a tint + coloured icon + light label. */
.cattile{background:var(--c);color:var(--ink-900)}
[data-theme="dark"] .cattile{
  background:color-mix(in srgb, var(--c) 18%, transparent);
  color:var(--text-primary);
  border:1px solid color-mix(in srgb, var(--c) 34%, transparent);
}
[data-theme="dark"] .cattile svg{color:var(--c)}
[data-theme="dark"] .cattile[aria-pressed="true"]{
  background:color-mix(in srgb, var(--c) 30%, transparent);outline-color:var(--c)}

/* count / category pills follow the same rule */
.pill.cat{background:var(--c);color:var(--ink-900)}
[data-theme="dark"] .pill.cat{
  background:color-mix(in srgb, var(--c) 22%, transparent);
  color:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent)}
/* pills sitting ON a photo keep the solid fill in both themes */
.ph .pill.cat, [data-theme="dark"] .ph .pill.cat{background:var(--c);color:var(--ink-900);box-shadow:none}

/* --- hero carousel --------------------------------------------------- */
.carousel{position:relative;background:var(--surface-sunken)}
.carousel .track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.carousel .track::-webkit-scrollbar{display:none}
.carousel .track img{width:100%;flex:0 0 100%;aspect-ratio:16/11;object-fit:cover;scroll-snap-align:center;display:block}
.carousel .dots{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:6px;justify-content:center}
.carousel .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5)}
.carousel .dots i.on{background:#fff;width:18px;border-radius:99px}
.carousel .scrimtop{position:absolute;inset:0 0 auto 0;height:96px;
  background:linear-gradient(rgba(11,14,9,.45),transparent);pointer-events:none}

/* --- story-circle highlights ----------------------------------------- */
.stories{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:0 20px}
.stories::-webkit-scrollbar{display:none}
.stories button{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:6px;width:62px;flex:0 0 62px;padding:0}
.stories .ring{width:58px;height:58px;border-radius:50%;padding:2.5px;
  background:conic-gradient(var(--lime-500),var(--sun-500),var(--lilac-500),var(--lime-500))}
.stories .ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:2px solid var(--surface-page);display:block}
.stories span{font-size:10.5px;font-weight:700;color:var(--text-secondary);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62px}

/* --- pill tab row ----------------------------------------------------- */
.tabrow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 20px}
.tabrow::-webkit-scrollbar{display:none}
.tabrow button{border:1px solid var(--border-subtle);background:var(--surface-card);cursor:pointer;
  border-radius:999px;padding:9px 16px;font-family:SA;font-weight:700;font-size:13px;
  color:var(--text-secondary);white-space:nowrap;min-height:40px}
.tabrow button[aria-pressed="true"]{background:var(--hero-bg);color:var(--hero-fg);border-color:var(--hero-bg)}

/* --- offer card with a flag block (the Entertainer shape) -------------- */
.flagoffer{display:flex;border-radius:18px;overflow:hidden;background:var(--surface-card);
  box-shadow:var(--shadow-card);border:1px solid var(--border-subtle)}
.flagoffer .flag{flex:0 0 96px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;padding:14px 8px;background:var(--accent-surface);color:var(--ink-900);text-align:center}
.flagoffer .flag .amt{font-family:CD;font-weight:600;font-size:19px;line-height:21px}
.flagoffer .flag .cap{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.flagoffer.isspent .flag{background:var(--surface-sunken);color:var(--text-secondary)}
.flagoffer.isgone{opacity:.5}
.flagoffer.isgone .flag{background:var(--surface-sunken);color:var(--text-secondary)}
.flagoffer .meat{flex:1;padding:14px 16px;min-width:0}

/* --- contact row ------------------------------------------------------- */
.contactrow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.contactrow button{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:16px;padding:12px 4px;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:6px;color:var(--text-primary);font-family:SA;font-weight:700;font-size:10.5px;
  min-height:64px}
.contactrow svg{width:20px;height:20px;color:var(--accent-text)}

/* --- reviews ----------------------------------------------------------- */
.review{background:var(--surface-card);border-radius:18px;padding:16px;box-shadow:var(--shadow-card)}
.review .head{display:flex;align-items:center;gap:10px}
.rav{width:38px;height:38px;border-radius:50%;flex:0 0 38px;display:grid;place-items:center;
  font-family:CD;font-weight:700;font-size:14px;background:var(--surface-sunken);color:var(--text-primary)}
.rav.vendor{background:var(--accent-surface);color:var(--ink-900)}
.stars{display:flex;gap:2px;color:var(--sun-500)}
.stars svg{width:13px;height:13px}
.rmedia{margin-top:12px;border-radius:14px;overflow:hidden;position:relative;aspect-ratio:16/10}
.rmedia img{width:100%;height:100%;object-fit:cover;display:block}
.rmedia .play{position:absolute;inset:0;display:grid;place-items:center}
.rmedia .play span{width:48px;height:48px;border-radius:50%;background:rgba(11,14,9,.62);
  display:grid;place-items:center;color:#fff;font-size:17px;padding-left:3px}
.reply{margin-top:12px;margin-left:18px;padding-left:14px;border-left:2px solid var(--border-subtle)}
.avstack{display:flex}
.avstack i{width:26px;height:26px;border-radius:50%;margin-left:-8px;border:2px solid var(--surface-card);
  display:grid;place-items:center;font-size:9px;font-weight:700;font-family:SA;
  background:var(--surface-sunken);color:var(--text-secondary)}
.avstack i:first-child{margin-left:0}

/* --- paywall / payment -------------------------------------------------- */
.paywall{min-height:100%;display:flex;flex-direction:column;background:var(--hero-bg);color:var(--hero-fg)}
.benefit{display:flex;gap:12px;align-items:flex-start}
.tick{width:22px;height:22px;border-radius:50%;background:var(--lime-500);color:#0B0E09;
  display:grid;place-items:center;font-size:12px;flex:0 0 22px;margin-top:2px;font-weight:700}
.payopt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface-card);border:2px solid var(--border-subtle);border-radius:16px;padding:14px;
  color:var(--text-primary);min-height:60px}
.payopt[aria-pressed="true"]{border-color:var(--accent-surface)}
.payopt .radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--border-subtle);flex:0 0 20px}
.payopt[aria-pressed="true"] .radio{border-color:var(--accent-surface);background:var(--accent-surface);
  box-shadow:inset 0 0 0 3px var(--surface-card)}
.securedby{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11.5px;
  font-weight:500;color:var(--text-secondary)}

/* --- vendor app tabs ----------------------------------------------------- */
.vtabs{flex:0 0 68px;display:flex;background:var(--surface-card);border-top:1px solid var(--border-subtle);
  padding-bottom:10px}
.vtabs button{flex:1;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;padding-top:8px;color:var(--text-secondary);
  font-family:SA;font-weight:700;font-size:10px;min-height:44px}
.vtabs button[aria-selected="true"]{color:var(--accent-text)}
.vtabs svg{width:21px;height:21px}

/* a <span> is inline by default, so width/height were ignored and the story
   circles collapsed out of the row */
.stories .ring{display:block}
/* svg() called with no class has no intrinsic size */
.thumb svg{width:22px;height:22px}
.vrow .thumb svg{width:22px;height:22px}
.flagoffer .meat svg{width:16px;height:16px}

/* ==================================================================
   29 Sep — Piggyvest-derived patterns (studied from their 8 App Store
   screenshots). What we took:
     · a FULL-BLEED coloured header that slides, one colour per slide,
       with a small pill badge, a tiny label, a huge figure, and a
       translucent illustration glyph in the corner
     · a circular icon action row directly under the header
     · the savings-plan row: tinted icon tile, name, two stat columns,
       thin progress bar, circular action button on the right
     · grouped transaction rows with a coloured amount on the right
     · a list/grid view toggle in the section header
   ================================================================== */

.hdr{position:relative;border-radius:0 0 30px 30px;overflow:hidden;
  transition:background .35s ease;padding-bottom:18px}
.hdr .htop{display:flex;align-items:center;justify-content:space-between;padding:6px 20px 14px}
.hdr .htrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hdr .htrack::-webkit-scrollbar{display:none}
.hslide{flex:0 0 100%;scroll-snap-align:center;padding:2px 20px 0;position:relative}
.hslide .badge{display:inline-flex;border-radius:999px;padding:5px 11px;font-size:11px;font-weight:700;
  background:rgba(11,14,9,.14);color:inherit}
.hslide .lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  opacity:.72;margin-top:14px}
.hslide .fig{font-family:CD;font-weight:600;font-size:46px;line-height:48px;letter-spacing:-.03em;margin-top:4px}
.hslide .sub{font-size:13px;font-weight:500;opacity:.78;margin-top:6px;max-width:74%}
/* Header chips — the supporting facts as app furniture, not a paragraph.
   One chip is filled and carries the number that does the persuading; the rest are quiet. */
/* wraps rather than scrolls — a clipped chip at the edge reads as a bug, and the
   membership price is not a fact to hide off-screen */
.hchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.hchips .chip{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  border-radius:999px;padding:7px 12px 7px 9px;background:rgba(11,14,9,.11);color:inherit}
.hchips .chip svg{width:15px;height:15px;opacity:.7;flex:0 0 15px}
.hchips .chip b{font-family:CD;font-weight:600;font-size:14.5px;letter-spacing:-.01em;
  white-space:nowrap}
.hchips .chip span{font-size:11.5px;font-weight:600;opacity:.66;white-space:nowrap}
.hchips .chip.solid{background:var(--ink-900);color:var(--lime-500)}
.hchips .chip.solid svg{opacity:.85}
.hchips .chip.solid span{opacity:.72}
.hdr.ondark .hchips .chip{background:rgba(250,248,243,.14)}
.hdr.ondark .hchips .chip.solid{background:var(--lime-500);color:var(--ink-900)}

.hslide .glyph{position:absolute;right:10px;bottom:-6px;opacity:.16;pointer-events:none}
.hslide .glyph svg{width:104px;height:104px}
.hdr .hdots{display:flex;gap:6px;justify-content:center;margin-top:14px}
.hdr .hdots i{width:6px;height:6px;border-radius:50%;background:rgba(11,14,9,.28)}
.hdr .hdots i.on{width:18px;border-radius:99px;background:rgba(11,14,9,.72)}
.hdr.ondark .hdots i{background:rgba(250,248,243,.32)}
.hdr.ondark .hdots i.on{background:rgba(250,248,243,.9)}

/* circular action row, Piggyvest style */
.circrow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 20px;margin-top:16px}
.circrow button{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:8px;color:var(--text-primary);font-family:SA;font-weight:700;font-size:11px;
  line-height:13px;text-align:center;min-height:44px}
.circrow .circ{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-card);box-shadow:var(--shadow-card);border:1px solid var(--border-subtle)}
.circrow .circ svg{width:22px;height:22px;color:var(--text-primary)}
.circrow button:first-child .circ{background:var(--accent-surface);border-color:var(--accent-surface)}
.circrow button:first-child .circ svg{color:var(--ink-900)}

/* the savings-plan row */
.planrow{display:flex;gap:12px;align-items:center;background:var(--surface-card);border-radius:18px;
  padding:14px;box-shadow:var(--shadow-card);width:100%;text-align:left;border:0;cursor:pointer}
.planrow .ptile{width:52px;height:52px;border-radius:14px;flex:0 0 52px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--c) 18%, transparent)}
.planrow .ptile svg{width:24px;height:24px;color:var(--c)}
[data-theme="dark"] .planrow .ptile{background:color-mix(in srgb, var(--c) 22%, transparent)}
.planrow .stats{display:flex;gap:18px;margin-top:6px}
.planrow .stats b{font-family:CD;font-weight:600;font-size:15px;display:block}
.planrow .stats span{font-size:10.5px;font-weight:500;color:var(--text-secondary)}
.pbar{height:5px;border-radius:99px;background:var(--surface-sunken);overflow:hidden;margin-top:9px}
.pbar span{display:block;height:100%;border-radius:99px;background:var(--c)}
.planrow .go{width:34px;height:34px;border-radius:50%;flex:0 0 34px;display:grid;place-items:center;
  background:var(--accent-surface);color:var(--ink-900);font-size:17px;font-weight:700}

/* grouped transaction row */
.txn{display:flex;gap:12px;align-items:center;padding:12px 0}
.txn .ticon{width:40px;height:40px;border-radius:50%;flex:0 0 40px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--c) 18%, transparent)}
.txn .ticon svg{width:19px;height:19px;color:var(--c)}
.txngroup{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-secondary);margin:16px 0 2px}

/* section header with a view toggle */
.sechead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.viewtoggle{display:flex;gap:4px;background:var(--surface-sunken);border-radius:999px;padding:4px}
.viewtoggle button{border:0;background:none;cursor:pointer;width:34px;height:32px;border-radius:999px;
  display:grid;place-items:center;color:var(--text-secondary)}
.viewtoggle button[aria-pressed="true"]{background:var(--surface-card);color:var(--text-primary);
  box-shadow:0 1px 3px rgba(11,14,9,.12)}
.viewtoggle svg{width:17px;height:17px}

/* browse grid view — two per row */
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vgrid .vcard .ph{aspect-ratio:1/1}
.vgrid .vcard .body{padding:11px 12px 13px}
.vgrid .vcard .t-title{font-size:14.5px;line-height:19px}
.vgrid .vcard .pill{font-size:10px;padding:4px 8px}

/* Your 12 rail — two cards visible, pills forced to a single line */
.rail .vcard{width:212px;flex:0 0 212px}
.rail .vcard .ph{aspect-ratio:4/3}
.rail .vcard .body{padding:11px 12px 13px}
.rail .vcard .t-title{font-size:14.5px;line-height:19px}
.rail .vcard .tagline{display:flex;gap:5px;margin-top:8px;overflow:hidden;
  white-space:nowrap;flex-wrap:nowrap;mask-image:linear-gradient(90deg,#000 80%,transparent)}
.rail .vcard .pill{font-size:10px;padding:4px 8px;flex:0 0 auto}

/* hot list rank badge */
.rank{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 26px;
  font-family:CD;font-weight:700;font-size:13px;background:var(--hero-bg);color:var(--hero-fg)}
.rank.one{background:var(--lime-500);color:var(--ink-900)}

/* invite */
.invitecard{border-radius:24px;padding:22px;background:var(--lilac-500);color:var(--ink-900);
  position:relative;overflow:hidden}
.invitecard .glyph{position:absolute;right:-10px;bottom:-16px;opacity:.2}
.invitecard .glyph svg{width:120px;height:120px}
.codebox{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(11,14,9,.1);
  border-radius:14px;padding:13px 15px;margin-top:16px}
.codebox b{font-family:CD;font-weight:600;font-size:19px;letter-spacing:.1em}

/* the vendor app now uses the same floating pill nav as the member app */
.vtabs{display:none}
/* spans again: height is ignored on an inline box */
.pbar{display:block}
.planrow .stats>span{display:block}

/* --- 29 Sep: near-me category, referral link, messaging ----------------- */
/* 9 tiles (Near me + 8 categories) sit cleanly as 3 x 3, and bigger tiles
   read better than the cramped 4-wide row */
.catgrid{grid-template-columns:repeat(3,1fr);gap:11px}
.cattile{aspect-ratio:1.18}
.cattile svg{width:25px;height:25px}
.cattile span{font-size:11px}
.cattile.nearme{--c:var(--lime-500)}

.linkbox{display:flex;align-items:center;gap:10px;background:rgba(11,14,9,.1);border-radius:14px;
  padding:12px 14px;margin-top:16px}
.linkbox .lk{flex:1;min-width:0;font-family:SA;font-weight:700;font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* message list + thread */
.thread{display:flex;gap:11px;align-items:center;padding:13px 0;border-bottom:1px solid var(--border-subtle);
  width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;cursor:pointer}
.thread:last-child{border-bottom:0}
.unread{background:var(--accent-surface);color:var(--ink-900);border-radius:999px;min-width:20px;
  height:20px;padding:0 6px;display:grid;place-items:center;font-size:11px;font-weight:700}
.bubbles{display:flex;flex-direction:column;gap:10px;padding:16px 20px}
.bub{max-width:80%;padding:11px 14px;border-radius:18px;font-size:14.5px;line-height:20px;font-weight:500}
.bub.them{align-self:flex-start;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-bottom-left-radius:6px}
.bub.me{align-self:flex-end;background:var(--accent-surface);color:var(--ink-900);border-bottom-right-radius:6px}
.bub .tm{display:block;font-size:10.5px;font-weight:600;opacity:.6;margin-top:5px}
.composer{display:flex;gap:9px;padding:12px 16px;border-top:1px solid var(--border-subtle);
  background:var(--surface-card)}
.composer input{flex:1;padding:13px 15px;border-radius:999px;border:1px solid var(--border-subtle);
  background:var(--surface-page);font-family:SA;font-size:14.5px;font-weight:500}
.composer button{width:46px;height:46px;border-radius:50%;border:0;background:var(--accent-surface);
  color:var(--ink-900);cursor:pointer;display:grid;place-items:center;flex:0 0 46px}
.composer button svg{width:20px;height:20px}

/* --- gap fixes: search, favourites, notifications, composer, withdraw --- */
.searchbar{display:flex;align-items:center;gap:10px;background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:999px;padding:12px 16px;box-shadow:var(--shadow-card)}
.searchbar svg{width:18px;height:18px;color:var(--text-secondary);flex:0 0 18px}
.searchbar input{flex:1;border:0;background:none;font-family:SA;font-size:15px;font-weight:500;
  color:var(--text-primary);outline:none;min-width:0}
.searchbar .clr{border:0;background:var(--surface-sunken);color:var(--text-secondary);cursor:pointer;
  border-radius:999px;width:26px;height:26px;display:grid;place-items:center;flex:0 0 26px;font-size:15px}

.fav{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;border:0;
  cursor:pointer;background:rgba(11,14,9,.55);color:#FAF8F3;display:grid;place-items:center;z-index:2}
.fav svg{width:18px;height:18px}
.fav[aria-pressed="true"]{background:var(--lime-500);color:var(--ink-900)}
.fav[aria-pressed="true"] svg{fill:currentColor}

.bell{position:relative;border:0;background:rgba(11,14,9,.14);cursor:pointer;width:40px;height:40px;
  border-radius:50%;display:grid;place-items:center;color:inherit}
.bell svg{width:20px;height:20px}
.bell .dot{position:absolute;top:7px;right:8px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--state-danger);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}

.notif{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border-subtle);
  width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;cursor:pointer}
.notif:last-child{border-bottom:0}
.notif .nic{width:38px;height:38px;border-radius:50%;flex:0 0 38px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--c) 20%, transparent)}
.notif .nic svg{width:18px;height:18px;color:var(--c)}
.notif.new .t-strong::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--state-danger);margin-left:7px;vertical-align:2px}

.starpick{display:flex;gap:8px;justify-content:center}
.starpick button{border:0;background:none;cursor:pointer;padding:4px;color:var(--border-subtle)}
.starpick button svg{width:34px;height:34px}
.starpick button.on{color:var(--sun-500)}
.starpick button.on svg{fill:currentColor}
.dropzone{border:2px dashed var(--border-subtle);border-radius:16px;padding:22px;text-align:center;
  cursor:pointer;background:var(--surface-sunken)}
.dropzone svg{width:24px;height:24px;color:var(--text-secondary)}
textarea.ta{width:100%;min-height:104px;padding:14px;border-radius:14px;resize:none;
  border:1px solid var(--border-subtle);background:var(--surface-card);color:var(--text-primary);
  font-family:SA;font-size:15px;font-weight:500;line-height:21px}

.amtbig{font-family:CD;font-weight:600;font-size:40px;letter-spacing:-.02em;text-align:center}
.keypadnote{font-size:12px;font-weight:500;color:var(--text-secondary);text-align:center}

/* svg() called as svg(PATH, '') emits class="" — an EMPTY class attribute, so
   :not([class]) never matches it and the SVG falls back to 300x150. Every
   call site that did not have a parent rule blew up. One base rule, and the
   specific rules above still win. */
svg[class=""]{width:20px;height:20px;flex:0 0 auto}
.invitecard .glyph{pointer-events:none}
.linkbox svg[class=""]{width:19px;height:19px;color:inherit;opacity:.7}
/* .vcard is a <div role="button"> because it CONTAINS a button (the heart) and
   HTML forbids nested interactive content — the parser silently closes the outer
   button, ejecting the heart and spilling the card. */
.vcard{display:block;width:100%;text-align:left;cursor:pointer}
.vcard:focus-visible{outline:3px solid var(--accent-surface);outline-offset:2px}
/* the referral glyph is a WATERMARK: it sits on a lower LAYER than the content,
   so the buttons paint over it. Padding stays even on all four sides. */
.invitecard{padding:22px;position:relative;isolation:isolate}
.invitecard > *{position:relative;z-index:1}
.invitecard .glyph{position:absolute;right:-14px;bottom:-20px;opacity:.2;z-index:0;pointer-events:none}
.invitecard .glyph svg{width:104px;height:104px}

/* ── Locked state for unpaid members (Architecture/DISCLOSURE_MODEL.md) ──
   The blur is honest: it says "there is something here and it is yours once
   you join". It never fakes loading and never invents a count. */
/* the skeleton borrows the real card's geometry so the SHAPE is honest, but carries no strings */
.locked .blurred{background:var(--surface-card);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-card);display:block}
.locked .blurred .ph{position:relative;aspect-ratio:16/10;background:var(--surface-sunken)}
.locked .blurred .ph img{width:100%;height:100%;object-fit:cover;display:block}
.locked .blurred .ph .pills{position:absolute;left:12px;top:12px;display:flex;gap:6px}
.locked .blurred .body{padding:14px 16px 16px}
.locked .sk{display:block;border-radius:6px;background:var(--surface-sunken)}
[data-theme="dark"] .locked .sk{background:rgba(250,248,243,.13)}
/* matches .rail .vcard (212px) so two cards sit on screen, as the paid rail does */
.rail .locked{width:212px;flex:0 0 212px}
.rail .locked .blurred .ph{aspect-ratio:4/3}
.rail .locked .blurred .body{padding:11px 12px 13px}

.locked{position:relative;overflow:hidden;cursor:pointer;border-radius:20px}
.locked:focus-visible{outline:3px solid var(--accent-surface);outline-offset:2px}
/* 7px is unreadable at 13-17px type but still leaves the SHAPE of the content visible.
   At 9px the white card body blurred to an empty void and read as a failed render. */
.locked .blurred{filter:blur(7px) saturate(.85) contrast(1.05);pointer-events:none;user-select:none}
/* an even veil so a blurred card reads as WITHHELD, not as broken */
.locked::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,14,9,.14),rgba(11,14,9,.30))}
/* crop the card so the empty lower body is not the biggest thing on screen */
.locked{max-height:250px}
.locked.compact{max-height:196px}
.locked .lockbadge{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.locked .lockbadge span{background:rgba(11,14,9,.78);color:#FAF8F3;border-radius:999px;
  padding:8px 14px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px;
  white-space:nowrap;max-width:calc(100% - 16px);backdrop-filter:blur(3px)}
/* a rail card is 212px — the word plus the icon crowds it, so the icon carries it alone */
.locked.compact .lockbadge span{padding:10px;gap:0}
.locked .lockbadge svg{width:14px;height:14px;flex:0 0 14px}

.catrow{display:flex;gap:12px;align-items:center;padding:14px;background:var(--surface-card);
  border-radius:16px;box-shadow:var(--shadow-card);width:100%;text-align:left;border:0;cursor:pointer}
.catrow .ic{width:48px;height:48px;border-radius:14px;flex:0 0 48px;display:grid;place-items:center;
  background:var(--c);color:var(--ink-900)}
[data-theme="dark"] .catrow .ic{background:color-mix(in srgb,var(--c) 20%,transparent);color:var(--c)}
.catrow .ic svg{width:22px;height:22px}

/* ── Brand marks (Brand/Logo Exploration) used as meaning, not decoration ──── */
.mk{width:22px;height:22px;flex:0 0 22px}

/* an offer rendered as the ticket it is */
.tickets{display:flex;flex-direction:column;gap:9px}
.tk{display:flex;align-items:center;gap:0;background:var(--surface-card);border-radius:16px;
  box-shadow:var(--shadow-card);overflow:hidden}
.tk .stub{width:58px;flex:0 0 58px;align-self:stretch;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--text-primary);
  border-right:2px dashed var(--surface-sunken)}
.tk .stub svg{width:30px;height:30px}
.tk .tkb{display:grid;gap:2px;padding:13px 15px;min-width:0}

/* areas as pins rather than a run of middots */
.arearow{display:flex;gap:8px;flex-wrap:wrap}
.areapin{display:inline-flex;align-items:center;gap:6px;padding:8px 13px 8px 10px;
  border-radius:999px;background:var(--surface-card);box-shadow:var(--shadow-card);
  font-size:13px;font-weight:700}
.areapin svg{width:15px;height:15px;color:var(--c)}
[data-theme="dark"] .areapin svg{color:var(--text-primary)}

/* the cap, as a figure instead of a paragraph */
.limitcard{background:var(--surface-card);border-radius:20px;box-shadow:var(--shadow-card);
  overflow:hidden}
.limitcard .lc-top{display:flex;gap:14px;align-items:center;padding:18px}
.limitcard .lc-ic{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;
  place-items:center;background:color-mix(in srgb,var(--c) 18%,transparent);
  color:var(--text-primary)}
.limitcard .lc-ic svg{width:25px;height:25px}
.limitcard .lc-ic.sm{width:38px;height:38px;flex:0 0 38px;border-radius:12px}
.limitcard .lc-ic.sm svg{width:21px;height:21px}
.limitcard .lc-fig{font-family:CD;font-weight:600;font-size:27px;letter-spacing:-.03em;
  line-height:1.1;margin-top:2px}
.limitcard .lc-fig span{font-family:SA;font-weight:500;font-size:14px;letter-spacing:0;
  color:var(--text-secondary)}
.limitcard .lc-swap{display:flex;gap:12px;align-items:center;padding:14px 18px 16px;
  border-top:1px dashed var(--border-subtle);background:var(--surface-sunken)}

.rangebar{display:flex;align-items:center;gap:10px;margin-top:10px}
.rangebar .tr{flex:1;height:7px;border-radius:99px;background:var(--surface-sunken);position:relative}
.rangebar .fl{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--c)}
.rangebar .tick{position:absolute;top:-4px;width:3px;height:15px;border-radius:2px;background:var(--text-primary)}

/* A figure on a vendor card must read as a SAVING, never as a price. The pocket
   mark (D4_pocket_plus = what you keep) carries that, and the full card says it
   in words as well. */
.saveamt{display:inline-flex;align-items:center;gap:6px;font-family:CD;font-weight:600;
  font-size:15px;letter-spacing:-.015em;color:var(--accent-text);white-space:nowrap}
.saveamt svg{width:17px;height:17px;flex:0 0 17px}
.saveamt.sm{font-size:15px;gap:4px}
.saveamt.sm svg{width:15px;height:15px;flex:0 0 15px}

/* ==================================================================
   10 Oct 2026, Samuel: home header after the "Claude" reference in
   Screenshot 2026-10-02 at 4.01.38 PM.png, the number centred and the four
   actions INSIDE the header. Each slide keeps its own colour (lime, ink,
   lilac, sun) as a gradient with a soft glow; the background is set per
   slide in app.js headerSlides().grad. Ink type on the light slides, light
   type on the ink slide (.ondark). The one sanctioned gradient in the app
   UI (DESIGN.md §2.4 rule 6).
   ================================================================== */
.gradhdr{color:#0B0E09;padding-bottom:22px;border-radius:0 0 32px 32px;transition:none}
.gradhdr.ondark{color:#FAF8F3}
.gradhdr .avatar{background:rgba(11,14,9,.12)!important;color:#0B0E09!important}
.gradhdr.ondark .avatar{background:rgba(250,248,243,.14)!important;color:#FAF8F3!important}
.gradhdr .bell{background:rgba(11,14,9,.10);color:#0B0E09;border-color:transparent}
.gradhdr.ondark .bell{background:rgba(250,248,243,.12);color:#FAF8F3}
.gradhdr .hslide{text-align:center;padding:4px 24px 0}
.gradhdr .hslide .lbl{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;opacity:.72;margin-top:6px}
.gradhdr .hslide .fig{font-size:44px;line-height:48px;margin-top:6px}
.gradhdr .hslide .badge{background:#0B0E09;color:#FAF8F3;margin-top:10px;padding:5px 12px}
.gradhdr.ondark .hslide .badge{background:var(--lime-500);color:#0B0E09}
.gradhdr .hslide .sub{margin:10px auto 0;max-width:86%;font-size:12.5px;opacity:.72}
.gradhdr .hchips{justify-content:center}
.gradhdr .hdots{margin-top:12px}
.circrow.inhdr{margin-top:20px;padding:0 18px}
.circrow.inhdr button{color:inherit;font-weight:600}
.circrow.inhdr .circ{background:rgba(11,14,9,.10);border:1px solid rgba(11,14,9,.10);box-shadow:none;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.circrow.inhdr .circ svg{color:#0B0E09}
.circrow.inhdr button:first-child .circ{background:#0B0E09;border-color:#0B0E09}
.circrow.inhdr button:first-child .circ svg{color:#FAF8F3}
.gradhdr.ondark .circrow.inhdr .circ{background:rgba(250,248,243,.12);border-color:rgba(250,248,243,.14)}
.gradhdr.ondark .circrow.inhdr .circ svg{color:#FAF8F3}
.gradhdr.ondark .circrow.inhdr button:first-child .circ{background:var(--lime-500);border-color:var(--lime-500)}
.gradhdr.ondark .circrow.inhdr button:first-child .circ svg{color:#0B0E09}

/* 10 Oct 2026, Samuel: the app's light mode is white, not the warm paper. */
[data-theme="light"] .phone{--surface-page:#FDFEF8;--surface-sunken:#F4F7EC}

/* Category tiles in the "Pay bills" style: white card, tinted squircle, deeper icon, label below */
.billcard{background:var(--surface-card);border-radius:22px;padding:16px 10px 12px;box-shadow:var(--shadow-card);
  border:1px solid var(--border-subtle)}
.billgrid{display:grid;gap:14px 6px}
.billtile{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;
  min-height:44px;padding:0;color:var(--text-secondary)}
.billtile .bt{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--c) 20%, #FFFFFF)}
.billtile .bt svg{width:23px;height:23px;color:color-mix(in srgb, var(--c) 80%, #0B0E09)}
.billtile .bl{font-family:SA;font-size:11.5px;font-weight:600;line-height:14px;text-align:center}
.billtile[aria-pressed="true"] .bt{box-shadow:0 0 0 2px var(--surface-card),0 0 0 4px color-mix(in srgb, var(--c) 80%, #0B0E09)}
.billtile[aria-pressed="true"] .bl{color:var(--text-primary);font-weight:700}
[data-theme="dark"] .billtile .bt{background:color-mix(in srgb, var(--c) 18%, transparent)}
[data-theme="dark"] .billtile .bt svg{color:var(--c)}

/* 10 Oct 2026: the redemption list uses the same category shape as the Pay-bills tiles,
   the tinted squircle with the deeper icon, and nothing else. */
.bt-icon{width:48px;height:48px;flex:0 0 48px;border-radius:15px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--c) 20%, #FFFFFF)}
.bt-icon svg{width:22px;height:22px;color:color-mix(in srgb, var(--c) 80%, #0B0E09)}
[data-theme="dark"] .bt-icon{background:color-mix(in srgb, var(--c) 18%, transparent)}
[data-theme="dark"] .bt-icon svg{color:var(--c)}

/* 11 Oct 2026, Samuel: no white card behind the category tiles, and the tiles back at the size
   the solid ones had (they fill their column). Tinted squircle, deeper icon, label underneath. */
.billcard{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
.billgrid{gap:14px 11px}
.billtile .bt{width:100%;height:auto;aspect-ratio:1.18;border-radius:18px}
.billtile .bt svg{width:26px;height:26px}
.billtile .bl{font-size:11.5px}

/* 24 Oct 2026, Samuel: Browse categories as a scrolling pill row that stays at the top, icons and colours kept */
.catpills{position:sticky;top:0;z-index:6;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  margin:6px -20px 0;padding:10px 20px;background:var(--surface-page)}
.catpills::-webkit-scrollbar{display:none}
.catpill{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 16px 0 6px;
  border-radius:999px;border:0;cursor:pointer;white-space:nowrap;
  background:color-mix(in srgb, var(--c) 20%, #FFFFFF);color:var(--text-primary);font-family:SA;font-weight:700;font-size:13px}
.catpill .ci{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85)}
.catpill .ci svg{width:16px;height:16px;color:color-mix(in srgb, var(--c) 80%, #0B0E09)}
.catpill[aria-pressed="true"]{background:var(--c);color:#0B0E09}
.catpill[data-cat="all"][aria-pressed="true"]{color:var(--surface-page)}
[data-theme="dark"] .catpill{background:color-mix(in srgb, var(--c) 18%, transparent)}
[data-theme="dark"] .catpill .ci{background:rgba(255,255,255,.08)}
[data-theme="dark"] .catpill .ci svg{color:var(--c)}
[data-theme="dark"] .catpill[aria-pressed="true"]{background:var(--c);color:#0B0E09}
[data-theme="dark"] .catpill[aria-pressed="true"] .ci{background:rgba(255,255,255,.85)}
[data-theme="dark"] .catpill[aria-pressed="true"] .ci svg{color:color-mix(in srgb, var(--c) 80%, #0B0E09)}
[data-theme="dark"] .catpill[data-cat="all"][aria-pressed="true"]{color:var(--surface-page)}

/* 24 Oct 2026: inside the website's phone frame (?embed=1) only the app shows, at its real 390x844 size */
body.embed{padding:0;gap:0;display:block;background:transparent;overflow:hidden}
body.embed .bar,body.embed .phone-label{display:none}
body.embed .phone{border:0;box-shadow:none;border-radius:0}

/* unpaid offer: visible, padlocked (12 Oct call) */
.flagoffer.islocked .flag{filter:saturate(.6)}
.lockbtn{display:inline-flex;align-items:center;gap:6px;background:var(--hero-bg);color:var(--hero-fg)}
.lockbtn svg{width:15px;height:15px}