/* ==========================================================================
   YummyPenny — "Bold Light" theme
   Full redesign. Drop-in replacement for /static/app.css.
   Clean, professional, consistent across every page.
   ========================================================================== */

:root {
  /* surfaces */
  --bg:        #F6F7F5;
  --surface:   #FFFFFF;
  --raise:     #FCFCFB;
  --line:      #E7E9E4;
  --line-2:    #D6DAD0;

  /* text */
  --ink:       #141712;
  --muted:     #5C6560;
  --faint:     #98A0A8;

  /* brand */
  --save:      #0E7A4F;
  --save-2:    #12965F;
  --save-soft: #E7F4ED;
  --save-ink:  #0A5738;
  --low:       #B5440E;
  --low-soft:  #FBEEE5;
  --discord:   #5865F2;
  --danger:    #C4341E;
  --danger-soft:#FBE9E6;

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --body:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius:  16px;
  --radius-s:12px;
  --shadow:  0 24px 60px -38px rgba(20,23,18,.5);
  --shadow-s:0 8px 22px -14px rgba(20,23,18,.28);
  --ring:    0 0 0 3px rgba(14,122,79,.16);

  /* Batch 10 — brand-tinted hairline for pressed/open states. One knob for
     the rgba(14,122,79,…) borders scattered below; dark.css re-tunes it so
     these borders stay visible on dark surfaces (they weren't). */
  --save-line: rgba(14, 122, 79, .3);

  /* Batch 10 — spacing scale (4px grid) + comfortable reading measure.
     Foundation only: nothing consumes these yet. New rules in Batches 11–12
     adopt them; existing rules migrate whenever they're next touched. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;
  --measure: 68ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
[id] { scroll-margin-top: 76px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  min-height: 100vh;
}
/* soft brand wash, painted behind everything (no markup needed) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50vw 42vh at 88% -8%, rgba(14,122,79,.06), transparent 60%),
    radial-gradient(42vw 36vh at 2% 2%, rgba(181,68,14,.045), transparent 58%);
}
.masthead, main, .site-footer { position: relative; z-index: 1; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }

a { color: var(--save); }
::selection { background: rgba(14,122,79,.16); }
:focus-visible { outline: 2px solid var(--save); outline-offset: 2px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--display); letter-spacing: -.025em; }

/* ============================================================== masthead */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,247,245,.82);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.masthead-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 24px; flex-wrap: wrap;
  max-width: 1080px; margin: 0 auto;
}
.brand { font-family: var(--display); font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.brand-mark { color: var(--save); }
.tagline { margin: 0; font-family: var(--mono); font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.tagline::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--save); box-shadow: 0 0 0 0 rgba(14,122,79,.5); animation: pulse 2s infinite; }
.tagline .count { color: var(--ink); font-weight: 700; }
.masthead-nav { display: flex; gap: 22px; align-items: center; font-size: .9rem; }
.masthead-nav a { color: var(--muted); text-decoration: none; transition: color .15s; }
.masthead-nav a:hover { color: var(--ink); }

@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(14,122,79,.45)} 70%{box-shadow:0 0 0 8px rgba(14,122,79,0)} 100%{box-shadow:0 0 0 0 rgba(14,122,79,0)} }

/* ============================================================== buttons */
.btn {
  display: inline-block; font-family: var(--body); font-weight: 600; font-size: .9rem;
  text-decoration: none; padding: 11px 18px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; line-height: 1.1; text-align: center;
  transition: transform .14s ease, box-shadow .25s ease, background .15s, border-color .15s, color .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--save); color: #fff !important; box-shadow: 0 8px 22px -8px rgba(14,122,79,.5); }
.btn-primary:hover { background: var(--save-2); box-shadow: 0 14px 30px -8px rgba(14,122,79,.62); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: 0 1px 2px rgba(20,23,18,.04); }
.btn-ghost:hover { border-color: var(--line-2); box-shadow: 0 10px 22px -14px rgba(20,23,18,.4); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: rgba(196,52,30,.35); }
.btn-danger:hover { background: var(--danger); color: #fff; border-color: transparent; box-shadow: 0 12px 26px -10px rgba(196,52,30,.5); }
.btn-discord { background: var(--discord); color: #fff !important; box-shadow: 0 8px 22px -8px rgba(88,101,242,.5); }
.btn-discord:hover { background: #4a54e0; }
.btn.is-disabled, .btn:disabled { opacity: .5; pointer-events: none; box-shadow: none; }

/* Join Our Discord banner (welcome page) */
.discord-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 20px 0 0; padding: 13px 18px;
  background: var(--discord); color: #fff;
  font-family: var(--body); font-weight: 600; font-size: .95rem;
  text-decoration: none; border-radius: var(--radius-s);
  box-shadow: 0 8px 22px -8px rgba(88,101,242,.5);
  transition: transform .14s ease, background .15s, box-shadow .25s;
}
.discord-banner:hover { background: #4a54e0; transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(88,101,242,.6); }
.discord-banner__logo { width: 22px; height: 22px; flex-shrink: 0; }

/* ======================================================= dashboard header */
.dash-head { padding: 34px 0 4px; }
.dash-eyebrow { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--save); margin: 0 0 10px; }
.dash-title { font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.02; margin: 0 0 8px; }
.dash-sub { color: var(--muted); font-size: 1.02rem; margin: 0; }

/* control / filter bar (redesigned) */
.controls { display: flex; align-items: center; gap: 12px; margin: 22px 0 20px; flex-wrap: wrap; }
.toolbar {
  flex: 1 1 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px; box-shadow: var(--shadow-s); margin: 0;
}
.search {
  flex: 1 1 220px; min-width: 0; padding: 11px 14px 11px 40px; font-family: var(--body); font-size: .94rem;
  background: var(--bg); border: 1px solid transparent; border-radius: 10px; color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398A0A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px center;
  transition: border-color .15s, box-shadow .2s, background-color .15s;
}
.search::placeholder { color: var(--faint); }
.search:focus { outline: none; background-color: var(--surface); border-color: var(--save); box-shadow: var(--ring); }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); padding: 3px; margin: 0; gap: 2px; }
.seg { position: relative; font-family: var(--mono); font-size: .72rem; color: var(--muted); padding: 8px 13px; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background .14s, color .14s, box-shadow .2s; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg:hover { color: var(--ink); }
.seg.is-on, .seg:has(input:checked) { background: var(--surface); color: var(--save-ink); font-weight: 500; box-shadow: 0 2px 8px -3px rgba(20,23,18,.28); }
.seg:focus-within { outline: 2px solid var(--save); outline-offset: 1px; }

.ret-dd { position: relative; }
.ret-dd-toggle {
  list-style: none; cursor: pointer; font-family: var(--mono); font-size: .72rem; color: var(--muted);
  padding: 10px 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg);
  white-space: nowrap; user-select: none; transition: border-color .15s, color .15s, background .15s;
}
.ret-dd-toggle:hover { color: var(--ink); border-color: var(--line-2); }
.ret-dd-toggle::-webkit-details-marker { display: none; }
.ret-dd[open] .ret-dd-toggle { background: var(--save-soft); color: var(--save-ink); border-color: var(--save-line); }
.ret-dd-menu {
  position: absolute; z-index: 30; margin-top: 8px; min-width: 224px; max-height: 300px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 6px;
  box-shadow: var(--shadow); display: grid; gap: 2px; right: 0;
}
.ret-opt { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; font-family: var(--body); font-size: .88rem; color: var(--ink); cursor: pointer; }
.ret-opt:hover { background: var(--bg); }
.ret-opt input { accent-color: var(--save); width: 15px; height: 15px; flex-shrink: 0; }

/* map toggle sits beside the filter bar */
.map-toggle {
  font-family: var(--mono); font-size: .78rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; cursor: pointer;
  box-shadow: var(--shadow-s); transition: transform .14s, box-shadow .25s, border-color .15s, background .15s, color .15s;
}
.map-toggle:hover { transform: translateY(-2px); border-color: var(--line-2); }
.map-toggle[aria-pressed="true"] { background: var(--save-soft); color: var(--save-ink); border-color: var(--save-line); }

/* board */
.board { display: block; }
.board.is-map-on { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
.board-map { position: sticky; top: 88px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-s); }
.ypmap { width: 100%; height: 66vh; min-height: 420px; border-radius: var(--radius-s); overflow: hidden; background: var(--bg); }
.map-note { font-family: var(--mono); font-size: .76rem; color: var(--muted); margin: 12px 4px 2px; }
.map-note a { color: var(--save); }
.gm-pop { font-family: var(--body); font-size: .84rem; line-height: 1.4; max-width: 220px; }
.gm-pop strong { font-family: var(--display); }
.gm-dist { color: var(--muted); font-family: var(--mono); font-size: .72rem; }
.gm-btn { font-family: var(--mono); font-size: .7rem; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; margin-top: 6px; }
.gm-btn:hover { background: var(--bg); }
@media (max-width: 860px) { .board.is-map-on { grid-template-columns: 1fr; } .board-map { position: static; } .ypmap { height: 58vh; } }

/* =============================================================== deals */
.deals { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.deal {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 18px 20px; box-shadow: var(--shadow-s);
  transition: transform .18s ease, box-shadow .28s ease, border-color .18s;
  animation: rise .4s both;
}
.deal:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 22px 44px -28px rgba(20,23,18,.42); }
.deal-body { flex: 1; min-width: 0; }
.deal-head { display: flex; align-items: center; gap: 10px; margin: 0 0 5px; }
.deal-title { font-family: var(--display); font-weight: 700; font-size: 1.08rem; margin: 0; letter-spacing: -.015em; }
.deal-title-link { color: inherit; text-decoration: none; }
.deal-title-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.deal-title-link:focus-visible { outline: 2px solid var(--save); outline-offset: -3px; }
.deal:hover .deal-title { color: var(--save-ink); }
.deal-meta { margin: 0 0 5px; display: flex; align-items: center; gap: 8px; }
.retailer { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.deal-why { margin: 0; font-size: .84rem; color: var(--muted); }
.deal-store { margin: 0 0 3px; font-size: .8rem; font-weight: 600; color: var(--ink); }

.badge { font-family: var(--mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; font-weight: 700; white-space: nowrap; }
.badge-low { background: var(--low-soft); color: var(--low); }

.deal-price { text-align: right; flex-shrink: 0; display: grid; gap: 2px; justify-items: end; }
.now { font-family: var(--mono); font-weight: 700; font-size: 1.34rem; letter-spacing: -.02em; color: var(--ink); }
.was { font-family: var(--mono); font-size: .74rem; color: var(--faint); text-decoration: line-through; }
.off { font-family: var(--mono); font-weight: 700; font-size: .72rem; color: #fff; background: var(--save); padding: 2px 8px; border-radius: 999px; }

/* the watch button (renders text: Watch / Saved / Remove) */
.star { position: relative; z-index: 2; background: var(--bg); border: 1px solid var(--line); cursor: pointer; font-size: .64rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; line-height: 1; color: var(--muted); padding: 6px 9px; border-radius: 8px; transition: color .14s, border-color .14s, background .14s, transform .12s; }
.star:hover { color: var(--save-ink); border-color: rgba(14,122,79,.35); background: var(--save-soft); transform: translateY(-1px); }
.star.on { color: var(--save-ink); border-color: rgba(14,122,79,.35); background: var(--save-soft); }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.empty { border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 52px 28px; text-align: center; background: var(--surface); }
.empty-head { font-family: var(--display); font-weight: 700; font-size: 1.2rem; margin: 0 0 8px; }
.empty-sub { margin: 0 auto; max-width: 46ch; color: var(--muted); font-size: .92rem; }

/* ================================================== deal-feed skeletons */
.feed-skel { display: none; }
.feed-skel.htmx-request { display: grid; }
.feed-skel.htmx-request + .hx-feed { display: none; }
.skel-card { pointer-events: none; }
.skel { position: relative; overflow: hidden; display: inline-block; background: var(--line); border-radius: 6px; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: skel-sweep 1.3s ease-in-out infinite; }
@keyframes skel-sweep { to { transform: translateX(100%); } }
.skel-title { width: 58%; height: 15px; }
.skel-chip { width: 52px; height: 20px; border-radius: 8px; }
.skel-tag { width: 86px; height: 10px; }
.skel-why { width: 44%; height: 11px; }
.skel-now { width: 92px; height: 20px; }
.skel-was { width: 54px; height: 10px; }
.skel-off { width: 46px; height: 16px; border-radius: 999px; }
.skel-card:nth-child(2) .skel-title { width: 47%; } .skel-card:nth-child(2) .skel-why { width: 56%; }
.skel-card:nth-child(3) .skel-title { width: 68%; } .skel-card:nth-child(3) .skel-why { width: 38%; }
.skel-card:nth-child(4) .skel-title { width: 51%; } .skel-card:nth-child(4) .skel-why { width: 49%; }
.skel-card:nth-child(5) .skel-title { width: 63%; } .skel-card:nth-child(5) .skel-why { width: 42%; }
.skel-card:nth-child(6) .skel-title { width: 45%; } .skel-card:nth-child(6) .skel-why { width: 52%; }
.skel-card:nth-child(7) .skel-title { width: 60%; } .skel-card:nth-child(7) .skel-why { width: 35%; }
.skel-card:nth-child(2) .skel::after { animation-delay: .07s; }
.skel-card:nth-child(3) .skel::after { animation-delay: .14s; }
.skel-card:nth-child(4) .skel::after { animation-delay: .21s; }
.skel-card:nth-child(5) .skel::after { animation-delay: .28s; }
.skel-card:nth-child(6) .skel::after { animation-delay: .35s; }
.skel-card:nth-child(7) .skel::after { animation-delay: .42s; }

/* ========================================================= product page */
.back { display: inline-block; margin: 26px 0 16px; font-family: var(--mono); font-size: .78rem; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--ink); }
.back::before { content: "← "; }

.product { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; margin-bottom: 24px; box-shadow: var(--shadow-s); }
.product-head { margin-bottom: 20px; }
.product-title { font-family: var(--display); font-weight: 800; font-size: 1.7rem; letter-spacing: -.025em; margin: 0 0 8px; line-height: 1.08; }
.product-sub { margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .84rem; color: var(--muted); }

.product-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }
.chartcard { background: var(--raise); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 18px 18px 12px; }
.chartcard-label { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-bottom: 10px; }
.chartcard canvas { width: 100% !important; height: 200px !important; }

.details-card { background: var(--raise); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 20px; }
.details-card h2 { font-size: .95rem; margin: 0 0 14px; letter-spacing: -.01em; }
.det-desc { color: var(--muted); font-size: .92rem; line-height: 1.6; margin: 0 0 16px; }
.det-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); font-size: .88rem; }
.det-row:first-of-type { border-top: 0; }
.det-k { color: var(--muted); }
.det-v { font-family: var(--mono); color: var(--ink); text-align: right; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; margin: 20px 0 16px; }
.stat { background: var(--surface); padding: 16px; display: grid; gap: 4px; }
.stat-k { font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.stat-v { font-family: var(--mono); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; color: var(--ink); }
.stat-v.save { color: var(--save); }

.verdict { font-size: .9rem; color: var(--muted); padding: 13px 15px; border-radius: var(--radius-s); background: var(--bg); margin: 0 0 18px; }
.verdict-on { color: var(--save-ink); background: var(--save-soft); font-weight: 500; }

.visit { display: inline-block; font-family: var(--mono); font-size: .84rem; font-weight: 500; color: #fff; background: var(--save); padding: 13px 20px; border-radius: 12px; text-decoration: none; box-shadow: 0 8px 22px -8px rgba(14,122,79,.5); transition: transform .14s, box-shadow .25s, background .15s; cursor: pointer; border: 0; }
.visit:hover { transform: translateY(-2px); background: var(--save-2); box-shadow: 0 14px 30px -8px rgba(14,122,79,.62); }
.visit:disabled { opacity: .6; pointer-events: none; }

.availcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin: 0 0 44px; box-shadow: var(--shadow-s); }
.availcard .map-note { margin-top: 14px; }
.availcard .ypmap { margin-top: 14px; height: 52vh; }

@media (max-width: 760px) { .product-grid { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); } }

/* ================================================= membership / welcome */
/* keep .join classes usable by billing partials; welcome uses .mkt-* below */
.join { max-width: 660px; margin: 48px auto; }
.join-eyebrow { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--save); margin: 0 0 12px; }
.join-head { font-family: var(--display); font-weight: 800; font-size: 2.1rem; line-height: 1.06; margin: 0 0 14px; }
.join-lead { color: var(--muted); font-size: 1.02rem; margin: 0 0 28px; }
.join-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 30px; box-shadow: var(--shadow); }
.join-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; }
.join-amt { font-family: var(--mono); font-weight: 700; font-size: 3rem; letter-spacing: -.03em; color: var(--ink); }
.join-per { font-family: var(--mono); color: var(--muted); font-size: .92rem; }
.join-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.join-list li { padding-left: 26px; position: relative; font-size: .96rem; color: var(--ink); }
.join-list li::before { content: "✓"; position: absolute; left: 0; color: var(--save); font-family: var(--mono); font-weight: 700; }
.join-cta { display: inline-block; font-family: var(--body); font-weight: 600; font-size: .95rem; color: #fff; background: var(--save); padding: 14px 24px; border: 0; border-radius: 12px; text-decoration: none; cursor: pointer; box-shadow: 0 10px 26px -8px rgba(14,122,79,.5); transition: transform .14s, box-shadow .25s, background .15s; }
.join-cta:hover { transform: translateY(-2px); background: var(--save-2); box-shadow: 0 16px 34px -8px rgba(14,122,79,.62); }
.join-cta.is-disabled { opacity: .5; pointer-events: none; box-shadow: none; }
.join-note { font-family: var(--mono); font-size: .82rem; color: var(--muted); margin: 0; }
.join-sub { margin: 20px 0 0; font-size: .84rem; color: var(--muted); }
.join-sub a { color: var(--save); }

/* plan picker — monthly vs annual */
.plan-picker { display: grid; gap: 10px; margin-bottom: 22px; }
.plan-row { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.plan-row:hover { border-color: var(--save); }
.plan-row:has(input:checked) { border-color: var(--save); background: var(--save-soft); }
.plan-row input { accent-color: var(--save); width: 16px; height: 16px; flex-shrink: 0; }
.plan-name { font-size: .95rem; font-weight: 600; color: var(--ink); flex: 1; }
.plan-tag { font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--save); border-radius: 999px; padding: 3px 8px; margin-left: 6px; vertical-align: middle; }
.plan-cost { font-family: var(--mono); font-weight: 700; font-size: .95rem; color: var(--ink); white-space: nowrap; }
.plan-was { color: var(--faint); font-weight: 400; margin-right: 4px; }
.plan-per { font-weight: 400; color: var(--muted); font-size: .8rem; }

.agree-row { display: flex; gap: 11px; align-items: flex-start; font-size: .88rem; line-height: 1.55; margin-bottom: 16px; color: var(--muted); }
.agree-row a { color: var(--save); }
.agree-row input { margin-top: 3px; flex-shrink: 0; accent-color: var(--save); width: 16px; height: 16px; }

/* welcome marketing layout */
.mkt { max-width: 1080px; margin: 0 auto; }
.mkt-hero { display: grid; grid-template-columns: 1.08fr .92fr; gap: 52px; align-items: center; padding: 64px 0 52px; }
.pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .72rem; color: var(--save-ink); background: var(--save-soft); border-radius: 999px; padding: 7px 14px; margin-bottom: 24px; font-weight: 500; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--save); animation: pulse 2s infinite; }
.mkt-title { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 4.1rem); line-height: 1; letter-spacing: -.04em; margin: 0 0 20px; }
.mkt-title .u { position: relative; white-space: nowrap; }
.mkt-title .u::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .32em; background: var(--save-soft); z-index: -1; border-radius: 3px; transform: scaleX(0); transform-origin: left; animation: uw .7s .5s forwards cubic-bezier(.2,.7,.2,1); }
@keyframes uw { to { transform: scaleX(1); } }
.mkt-lede { color: var(--muted); font-size: 1.14rem; max-width: 36ch; margin: 0 0 30px; }
.mkt-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.mkt-note { font-family: var(--mono); font-size: .74rem; color: var(--faint); margin: 20px 0 0; }

/* hero showcase deal card */
.showcase { position: relative; }
.showcase .blob { position: absolute; inset: -8% -12% -14% -4%; background: radial-gradient(40% 44% at 78% 18%, rgba(14,122,79,.14), transparent 70%), radial-gradient(42% 40% at 12% 82%, rgba(181,68,14,.12), transparent 70%); filter: blur(8px); z-index: 0; }
.dcard { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px; box-shadow: var(--shadow); transform: rotate(-1.3deg); }
.dcard-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.dcard-ret { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.dcard-flag { font-family: var(--mono); font-size: .64rem; font-weight: 700; color: var(--low); background: var(--low-soft); padding: 4px 9px; border-radius: 999px; }
.dcard-title { font-family: var(--display); font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 4px; }
.dcard-why { color: var(--muted); font-size: .9rem; margin: 0 0 18px; }
.dcard-price { display: flex; align-items: baseline; gap: 12px; }
.dcard-now { font-family: var(--mono); font-weight: 700; font-size: 2.6rem; letter-spacing: -.03em; }
.dcard-was { font-family: var(--mono); font-size: 1rem; color: var(--faint); text-decoration: line-through; }
.dcard-off { font-family: var(--mono); font-weight: 700; font-size: .82rem; color: #fff; background: var(--save); padding: 3px 10px; border-radius: 8px; }
.dcard-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.dcard-live { font-family: var(--mono); font-size: .72rem; color: var(--save); display: flex; gap: 7px; align-items: center; }
.dcard-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--save); animation: pulse 2s infinite; }
.float { position: absolute; z-index: 2; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 15px; box-shadow: var(--shadow-s); animation: bob 5s ease-in-out infinite; }
.float b { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; display: block; }
.float span { font-size: .66rem; color: var(--faint); font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.float.a { top: -20px; right: -12px; } .float.a b { color: var(--save); }
.float.b { bottom: 24px; left: -26px; animation-delay: 1.4s; } .float.b b { color: var(--low); }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

.mkt-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; }
.mkt-strip-in { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
.mkt-strip-in .lbl { font-family: var(--mono); font-size: .68rem; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; }
.mkt-strip-in b { font-family: var(--display); font-weight: 700; font-size: 1.08rem; color: var(--faint); }

.mkt-sec { padding: 84px 0; }
.mkt-center { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.mkt-eyebrow { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--save); margin: 0 0 14px; }
.mkt-h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 3.6vw, 2.9rem); letter-spacing: -.035em; line-height: 1.04; margin: 0 0 16px; }
.mkt-sub { color: var(--muted); font-size: 1.06rem; margin: 0; }
.mkt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mkt-step { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 30px; box-shadow: var(--shadow-s); transition: transform .22s, box-shadow .3s, border-color .2s; }
.mkt-step:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: 0 28px 56px -34px rgba(20,23,18,.4); }
.mkt-step .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; background: var(--save-soft); color: var(--save); font-family: var(--mono); font-weight: 700; }
.mkt-step h3 { font-family: var(--display); font-weight: 700; font-size: 1.22rem; letter-spacing: -.01em; margin: 0 0 8px; }
.mkt-step p { color: var(--muted); font-size: .95rem; margin: 0; }

.mkt-pricing { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; background: linear-gradient(160deg, #0F1613, #123322); color: #EAF3EE; border-radius: 26px; padding: 52px; box-shadow: 0 40px 90px -44px rgba(14,60,40,.55); }
.mkt-pricing .mkt-eyebrow { color: #63E3A5; }
.mkt-pricing .mkt-h2 { color: #fff; }
.mkt-pricing .mkt-sub, .mkt-pricing .join-list li { color: #A9C4B7; }
.mkt-pricing .join-list li { color: #DCEBE4; }
.mkt-pricing .join-list li::before { color: #63E3A5; }
.mkt-pricing .join-list { margin-top: 22px; }

.mkt-fineprint { max-width: 720px; margin: 0 auto 44px; padding: 0 24px; text-align: center; font-family: var(--mono); font-size: .72rem; line-height: 1.6; color: var(--faint); }

.mkt-fineprint { max-width: 720px; margin: 0 auto 44px; padding: 0 24px; text-align: center; font-family: var(--mono); font-size: .72rem; line-height: 1.6; color: var(--faint); }

/* =============================================================== notices */
/* inline banner (account / login / etc.) */
.notice { background: var(--low-soft); color: var(--low); border: 1px solid rgba(181,68,14,.2); border-radius: 12px; padding: 12px 15px; font-size: .88rem; margin: 0 0 18px; }
.notice a { color: inherit; text-decoration: underline; }
.notice-ok { background: var(--save-soft); color: var(--save-ink); border-color: rgba(14,122,79,.22); }

/* centered status page (billing success / cancel) */
.status { max-width: 560px; margin: 84px auto; text-align: center; }
.status-mark { width: 60px; height: 60px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 18px; font-family: var(--mono); font-weight: 700; font-size: 1.5rem; }
.status-mark.ok { color: var(--save); background: var(--save-soft); }
.status-mark.no { color: var(--low); background: var(--low-soft); }
.status-mark.code { width: auto; min-width: 60px; padding: 0 16px; font-size: 1.3rem; letter-spacing: .02em; }
.status-head { font-family: var(--display); font-weight: 800; font-size: 1.9rem; letter-spacing: -.025em; margin: 0 0 12px; }
.status-body { color: var(--muted); margin: 0 auto 28px; max-width: 460px; }

/* ============================================= content / legal pages */
.page { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 40px; margin: 32px 0 56px; box-shadow: var(--shadow-s); max-width: 820px; }
.page h1 { font-family: var(--display); font-size: 2rem; margin: 0 0 6px; }
.page .updated { color: var(--faint); font-size: .82rem; margin: 0 0 26px; font-family: var(--mono); }
.page h2, .page h3 { font-family: var(--display); font-size: 1.16rem; margin: 30px 0 8px; color: var(--ink); }
.page h4 { font-family: var(--display); font-size: .98rem; margin: 20px 0 6px; color: var(--ink); }
.page p, .page li { color: var(--muted); line-height: 1.7; font-size: .95rem; }
.page ul { padding-left: 20px; }
.page li { margin: 4px 0; }
.page strong { color: var(--ink); }
.page code { font-family: var(--mono); font-size: .85em; background: var(--bg); padding: 2px 6px; border-radius: 6px; color: var(--ink); }
.page-note { color: var(--muted); font-size: .88rem; margin-top: 22px; }

.faq-q { font-family: var(--display); font-weight: 700; font-size: 1.06rem; margin: 26px 0 6px; color: var(--ink); }
.faq-a { color: var(--muted); line-height: 1.7; margin: 0; }

.contact-msg { width: 100%; height: auto; min-height: 130px; padding: 12px 14px; font-family: var(--body); font-size: .95rem; line-height: 1.5; }

/* =============================================================== account */
.acct-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }

/* account tabs (Membership / Location / Referrals / Data) */
.acct-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin: 4px 0 22px; flex-wrap: wrap; }
.acct-tab { background: none; border: 0; cursor: pointer; padding: 8px 2px 10px; margin-bottom: -1px;
  font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); border-bottom: 2px solid transparent; }
.acct-tab:hover { color: var(--ink); }
.acct-tab.is-on { color: var(--ink); border-bottom-color: var(--save); }
.ref-blurb { width: 100%; min-height: 92px; padding: 12px 14px; font-family: var(--body); font-size: .9rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); resize: vertical; }

/* retailer logo marquee (welcome page) */
.rt-wrap { max-width: 1080px; margin: 10px auto 0; padding: 0 20px; }
.rt-label { text-align: center; font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--faint); margin: 0 0 12px; }
.rt-marquee { overflow: hidden; padding: 14px 0 10px; }
.rt-track { display: flex; width: max-content; animation: rt-scroll 40s linear infinite; }
.rt-marquee:hover .rt-track { animation-play-state: paused; }
.rt-set { display: flex; align-items: center; gap: 44px; padding-right: 44px; }
.rt-set img { height: 68px; width: auto; display: block; opacity: .9; }
.rt-legal { text-align: center; color: var(--faint); font-size: .72rem; margin: 6px 0 0; }
@keyframes rt-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .rt-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .rt-set[aria-hidden] { display: none; }
}
[data-theme="dark"] .rt-set img { opacity: 1; }
.acct-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 24px; margin-bottom: 18px; box-shadow: var(--shadow-s); }
.acct-card.pad { padding: 22px 24px; }
.acct-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.acct-row:last-child { border-bottom: 0; }
.acct-k { color: var(--muted); font-size: .9rem; font-weight: 500; }
.acct-v { font-family: var(--mono); font-size: .9rem; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.acct-inline { display: flex; gap: 10px; margin: 0 0 14px; align-items: center; flex-wrap: wrap; }
.acct-zip { display: flex; gap: 10px; align-items: center; }
.acct-zip-input { width: 130px; padding: 11px 13px; font-family: var(--mono); font-size: .84rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
.acct-zip-input:focus { outline: none; background: var(--surface); border-color: var(--save); box-shadow: var(--ring); }
.acct-actions { display: flex; gap: 10px; margin: 22px 0 8px; flex-wrap: wrap; }
.acct-delete { margin-top: 20px; }
.acct-set-email { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.acct-set-email input { padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: .9rem; min-width: 200px; }
.acct-set-email input:focus { outline: none; background: var(--surface); border-color: var(--save); box-shadow: var(--ring); }

.badge.on { color: var(--save-ink); background: var(--save-soft); }
.badge.off { color: var(--low); background: var(--low-soft); }
.badge.on, .badge.off { font-size: .68rem; padding: 3px 9px; border-radius: 999px; }

.fav-list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
.fav-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .9rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.fav-list li .btn { margin-left: auto; }
.tag-ok { font-family: var(--mono); font-size: .66rem; color: var(--save-ink); background: var(--save-soft); padding: 3px 9px; border-radius: 999px; }
.tag-warn { font-family: var(--mono); font-size: .66rem; color: var(--low); background: var(--low-soft); padding: 3px 9px; border-radius: 999px; }
.acct-legend { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 0 0 2px; padding-top: 4px; }

/* =============================================================== login */
.login-card { max-width: 460px; margin: 44px auto; }
.login-discord { display: block; width: 100%; }
.login-or { display: flex; align-items: center; text-align: center; color: var(--faint); font-size: .8rem; margin: 20px 0; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-or span { padding: 0 12px; }
.login-form { display: flex; flex-direction: column; gap: 10px; }
.login-label { font-size: .82rem; color: var(--muted); }
.login-input { height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font-size: .95rem; width: 100%; }
.login-input:focus { outline: none; background: var(--surface); border-color: var(--save); box-shadow: var(--ring); }
.login-submit { display: block; width: 100%; margin-top: 4px; }

/* =============================================================== watchlist */
.wl-list { list-style: none; padding: 0; margin: 24px 0 48px; display: grid; gap: 12px; }
.wl-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 16px 18px; box-shadow: var(--shadow-s); transition: transform .18s, box-shadow .28s, border-color .18s; }
.wl-item:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 22px 44px -28px rgba(20,23,18,.42); }
.wl-item > a { color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; flex: 1; min-width: 0; }
.wl-retailer { color: var(--muted); font-weight: 400; font-family: var(--body); font-size: .9rem; }
.wl-price { font-family: var(--mono); font-weight: 700; font-size: 1.02rem; }
.wl-empty { color: var(--muted); }

/* =============================================================== footer */
.site-footer { border-top: 1px solid var(--line); margin-top: 72px; background: rgba(255,255,255,.5); }
.footer-grid { display: flex; align-items: center; justify-content: flex-start; gap: 32px; flex-wrap: wrap; padding: 36px 24px 20px; max-width: 1080px; margin: 0 auto; }
.pay { position: relative; display: flex; align-items: center; }
.pay-label { position: absolute; left: 0; bottom: calc(100% + 7px); margin: 0; white-space: nowrap; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.pay-marks { list-style: none; display: flex; gap: 10px; padding: 0; margin: 0; align-items: center; }
.pay-marks img { height: 26px; width: auto; display: block; }
.foot-brand { display: flex; align-items: center; }
.foot-brand a { display: block; line-height: 0; }
.foot-logo { height: 46px; width: auto; display: block; }
.foot-brand { display: flex; align-items: center; }
.foot-brand a { display: block; line-height: 0; }
.foot-logo { height: 46px; width: auto; display: block; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.foot-nav a { font-size: .86rem; color: var(--muted); text-decoration: none; }
.foot-nav a:hover { color: var(--ink); }
.foot-base { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 24px 34px; border-top: 1px solid var(--line); max-width: 1080px; margin: 0 auto; }
.copy, .foot-disclosure { font-size: .8rem; color: var(--faint); margin: 0; font-family: var(--mono); }

/* =============================================================== motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .mkt-title .u::after { transform: scaleX(1); }
}

/* ============================================================ responsive */
@media (max-width: 860px) {
  .mkt-hero { grid-template-columns: 1fr; gap: 36px; padding: 44px 0 34px; }
  .mkt-steps { grid-template-columns: 1fr; }
  .mkt-pricing { grid-template-columns: 1fr; padding: 32px; }
  .masthead-in { padding: 12px 20px; }
  .tagline { display: none; }
  .controls { flex-direction: column; align-items: stretch; }
  .map-toggle { width: 100%; }
}
@media (max-width: 560px) {
  .deal { flex-wrap: wrap; }
  .deal-price { text-align: left; justify-items: start; }
  .now { font-size: 1.2rem; }
  .join-amt { font-size: 2.4rem; }
  .dcard-now { font-size: 2.1rem; }

  /* breathing room on small screens */
  .wrap { padding: 0 16px; }
  .masthead-in { padding: 10px 16px; gap: 10px; }
  .brand { font-size: 1.24rem; }
  .masthead-nav { gap: 12px; }
  .masthead-nav a { font-size: .9rem; }
  .dash-title { font-size: 1.7rem; }

  /* stops iPhones auto-zooming when a field is tapped (needs 16px text) */
  .search, .login-input, select, textarea, input[type="text"], input[type="email"] { font-size: 1rem; }

  /* sort buttons share the row evenly instead of overflowing it */
  .segmented { display: flex; width: 100%; }
  .seg { flex: 1; text-align: center; padding: 9px 6px; }
  .ret-dd { width: 100%; }
  .ret-dd-toggle { width: 100%; text-align: center; }

  /* comfier thumb targets */
  .star { padding: 9px 12px; }

  /* panels drop desktop-sized padding */
  .page { padding: 24px 18px; }
  .product { padding: 20px 16px; }
  .availcard { padding: 18px 16px; }
  .join-card { padding: 22px 18px; }
  .mkt-pricing { padding: 26px 20px; }
  .mkt-sec { padding: 56px 0; }

  /* hero demo card: straighten the tilt, pull the badges inside the screen */
  .dcard { transform: none; }
  .float.a { top: -12px; right: 4px; }
  .float.b { bottom: 12px; left: 4px; }

  /* deal cards stack on phones: title, meta, then one price row */
  .deal { flex-direction: column; align-items: stretch; }
  .deal-head { align-items: flex-start; }
  .deal-head .deal-title { flex: 1; }
  .deal-title { font-size: 1rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .deal-price { display: flex; align-items: baseline; gap: 10px; }

  /* footer centers on phones */
  .footer-grid { gap: 20px; justify-content: center; }
  .foot-nav { margin-left: 0; justify-content: center; }
  .pay { position: static; display: block; text-align: center; }
  .pay-label { position: static; margin: 0 0 8px; }
  .pay-marks { justify-content: center; }
  .foot-base { justify-content: center; text-align: center; }
  .foot-logo { height: 40px; }
}

/* ============================================================
   Store-specific product observations + penny candidates
   ============================================================ */

.avail-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.avail-head h2 {
  margin: 0;
  font-size: 1.5rem;
}

.store-observed-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.store-observed-card {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius, 16px);
  padding: 18px;
  box-shadow: var(--shadow-s, 0 8px 22px -14px rgba(20,23,18,.28));
}

.store-observed-card h3 {
  margin: 4px 0 4px;
  font-size: 1.05rem;
}

.store-observed-address,
.store-observed-meta {
  margin: 4px 0;
  color: var(--muted);
  font-size: .9rem;
}

.store-observed-pricebox {
  min-width: 120px;
  text-align: right;
  display: grid;
  align-content: start;
  gap: 6px;
}

.store-observed-price {
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
}

.gm-observed {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 3px;
}

.penny-page {
  max-width: 980px;
  margin: 34px auto;
}

.penny-controls {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0 12px;
}

.penny-select {
  max-width: 220px;
}

.penny-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.penny-card {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius, 16px);
  padding: 20px;
  box-shadow: var(--shadow-s, 0 8px 22px -14px rgba(20,23,18,.28));
}

.penny-card-main {
  min-width: 0;
}

.penny-title {
  margin: 4px 0 6px;
  font-size: 1.15rem;
  line-height: 1.15;
}

.penny-title a {
  color: inherit;
  text-decoration: none;
}

.penny-title a:hover {
  color: var(--save);
}

.penny-store,
.penny-meta {
  margin: 4px 0;
  color: var(--muted);
  font-size: .9rem;
}

.penny-reasons {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: .88rem;
}

.penny-scorebox {
  min-width: 150px;
  text-align: right;
  display: grid;
  gap: 6px;
  align-content: start;
}

.penny-price {
  font-family: var(--mono);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--low);
}

.penny-score {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 800;
  color: var(--save-ink, #0A5738);
  background: var(--save-soft, #E7F4ED);
  border-radius: 999px;
  padding: 4px 9px;
}

.penny-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

.penny-open {
  margin-top: 4px;
}

/* Product photos — fetched by the member's browser straight from the
   retailer's public image CDN; our servers never download image bytes. */
.penny-thumb {
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  align-self: start;
}

.deal-thumb {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  align-self: center;
}

.product-head {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.product-hero {
  width: 160px;
  max-height: 160px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  flex: 0 0 auto;
}

.product-head-text { min-width: 0; }

@media (max-width: 700px) {
  .penny-thumb { width: 64px; height: 64px; flex-basis: 64px; }
  .deal-thumb { width: 56px; height: 56px; flex-basis: 56px; align-self: flex-start; }
  .product-hero { width: 110px; max-height: 110px; }
}

@media (max-width: 700px) {
  .store-observed-card,
  .penny-card {
    display: grid;
  }

  .store-observed-pricebox,
  .penny-scorebox {
    text-align: left;
  }
}

/* Online-only deal badge */
.badge-online {
  background: #E8F1FF;
  color: #175CD3;
  border: 1px solid rgba(23, 92, 211, 0.18);
}

/* Human-reported items. Amber = the team found it. Violet = a member did.
   Both are deliberately distinct from the blue "Online Only" badge and the
   green all-time-low badge, so a card's provenance reads at a glance. */
.badge-staff {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid rgba(146, 64, 14, 0.18);
}

.badge-member {
  background: #F3E8FF;
  color: #6B21A8;
  border: 1px solid rgba(107, 33, 168, 0.18);
}

/* Provenance banner on the product page — who this item's data actually came
   from. Violet = a member reported it and we haven't verified it. Amber = the
   team picked it. Both match their badge, so the card and the page agree. */
.provenance {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: var(--radius-s, 12px);
  font-size: .9rem;
}

.provenance p {
  margin: 0;
  line-height: 1.55;
}

.provenance .badge {
  flex: 0 0 auto;
  margin-top: 1px;
}

.provenance-warn {
  background: #F7EEFF;
  color: #4C1D66;
  border: 1px solid rgba(107, 33, 168, 0.22);
}

.provenance-note {
  background: #FFF9E8;
  color: #6B3E06;
  border: 1px solid rgba(146, 64, 14, 0.22);
}

.per-page-label { margin-left: auto; }

/* ============================================================ report page */
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0 56px; align-items: start; }
.report-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-s); }
.report-head { font-family: var(--display); font-weight: 800; font-size: 1.3rem; margin: 0 0 4px; letter-spacing: -.02em; }
.report-sub { color: var(--muted); font-size: .9rem; margin: 0 0 18px; }
.report-label { display: block; font-size: .84rem; font-weight: 600; color: var(--ink); margin: 14px 0 6px; }
.report-label .req { font-family: var(--mono); font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--save-ink); background: var(--save-soft); border-radius: 999px; padding: 3px 8px; margin-left: 8px; }
.report-label .opt { font-family: var(--mono); font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-left: 8px; }
.report-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.report-hint { font-size: .8rem; color: var(--muted); line-height: 1.55; margin: 16px 0 0; }
.report-card .join-cta { width: 100%; margin-top: 22px; text-align: center; }
.empty-cta { margin: 22px 0 0; }
@media (max-width: 860px) { .report-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .report-row { grid-template-columns: 1fr; } }

/* retailer picker: categories nested under each retailer */
.ret-dd-menu { min-width: 258px; }
.ret-group + .ret-group { margin-top: 4px; padding-top: 5px; border-top: 1px solid var(--line); }
.ret-subs { display: grid; margin: 0 0 4px 26px; }
.ret-sub { padding: 6px 10px; }
.ret-sub span { font-size: .8rem; color: var(--muted); }
.ret-sub input { width: 13px; height: 13px; }
.ret-sub:hover span { color: var(--ink); }

/* ═════════════════════════ Batch 10 — token layer ═════════════════════════ */

/* Themed scrollbars: slim, hairline-tinted, both engines. dark.css's
   color-scheme already darkens native chrome; this slims and tints it. */
html { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--faint); }

/* Numeric-alignment insurance. JetBrains Mono already aligns digits wherever
   --mono rules; this covers numerals rendered in the display/body faces so
   columns of prices never wobble. Only classes that verifiably exist. */
.now, .was, .off, .dcard-now, .join-amt, .acct-v, .gm-dist {
  font-variant-numeric: tabular-nums;
}

/* ═════════════════════════ Batch 12 — page layer ═════════════════════════ */

/* first-run setup checklist (dashboard; gone when complete or dismissed) */
.setup-card {
  position: fixed; right: 18px; bottom: 18px; z-index: 45;
  width: min(330px, calc(100vw - 36px));
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 13px 15px; margin: 0;
  box-shadow: var(--shadow);
}
.setup-card.is-min .setup-rows { display: none; }
.setup-card.is-min .setup-head { margin-bottom: 0; }
.setup-head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3); cursor: pointer;
}
.setup-title { font-family: var(--display); font-weight: 700; font-size: .88rem; margin: 0; flex: 1; }
.setup-why { display: none; }
/* keep the back-to-top button clear of the card */
body:has(#setup-card) .to-top { bottom: 108px; }
@media (max-width: 560px) {
  .setup-card { left: 12px; right: 12px; bottom: 12px; width: auto; }
  body:has(#setup-card) .to-top { bottom: 150px; }
}
.setup-count { font-family: var(--mono); font-size: .74rem; color: var(--save-ink); background: var(--save-soft); border-radius: 999px; padding: 4px 10px; }
.setup-dismiss { background: none; border: 0; color: var(--faint); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 2px 6px; }
.setup-dismiss:hover { color: var(--ink); }
.setup-rows { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.setup-row { display: flex; align-items: baseline; gap: var(--sp-3); font-size: .92rem; }
.setup-mark { font-family: var(--mono); color: var(--faint); width: 18px; flex: 0 0 auto; }
.setup-row.is-done .setup-mark { color: var(--save); }
.setup-row.is-done .setup-label { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }
.setup-label { color: var(--ink); font-weight: 600; }
a.setup-label { text-decoration: none; }
a.setup-label:hover { color: var(--save-ink); }
.setup-why { color: var(--muted); font-size: .84rem; }
@media (max-width: 560px) { .setup-why { display: none; } }

/* footer live-status */
.foot-status { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--mono); font-size: .78rem; color: var(--muted); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--save); box-shadow: 0 0 6px var(--save); flex: 0 0 auto; }
.status-dot.warn { background: var(--low); box-shadow: 0 0 6px var(--low); }

/* back-to-top (ui.js shows it after 600px of scroll) */
.to-top {
  position: fixed; right: 18px; bottom: 72px; z-index: 40;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--muted);
  font-size: 1rem; cursor: pointer; box-shadow: var(--shadow-s);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s, transform .2s, color .15s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--ink); }
@media (max-width: 640px) { .to-top { bottom: 130px; } }

/* floating scan button — overlays every page, always in thumb's reach */
.scan-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 45;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--save); color: #fff;
  box-shadow: var(--shadow-s); text-decoration: none;
  transition: transform .15s, box-shadow .2s;
}
.scan-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.scan-fab svg { display: block; }
[data-theme="dark"] .scan-fab { color: #0C110E; }
@media (max-width: 640px) { .scan-fab { bottom: 74px; } }

/* home feed tab switcher (Deals / Penny Finds) */
.feed-head { text-align: center; }
.feed-tabs { display: flex; justify-content: center; gap: 34px; margin: 4px 0 10px; }
.feed-tab {
  font-family: var(--display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  color: var(--faint); text-decoration: none;
  padding: 2px 2px 8px; border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.feed-tab:hover { color: var(--muted); }
.feed-tab.is-on { color: var(--ink); border-bottom-color: var(--save); }
.feed-head .dash-sub { margin-left: auto; margin-right: auto; }

/* Stripe-style dashboard tour (onboard.js) */
.site-tour-ring { position: fixed; z-index: 97; pointer-events: none;
  border: 2px solid var(--save); border-radius: 12px;
  box-shadow: 0 0 0 9999px color-mix(in srgb, var(--bg) 62%, transparent);
  transition: top .18s, left .18s, width .18s, height .18s; }
.site-tour { position: fixed; z-index: 98; width: min(320px, calc(100vw - 24px));
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--save);
  border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.site-tour-h { margin: 0 0 6px; font-family: var(--display); font-size: 1rem; }
.site-tour-b { margin: 0 0 12px; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.site-tour-row { display: flex; justify-content: space-between; gap: 10px; }
.site-tour-skip { background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.site-tour-skip:hover { color: var(--ink); }
.site-tour-next { background: var(--save); border: 1px solid var(--save); color: #fff;
  font-weight: 700; border-radius: 8px; padding: 7px 14px; cursor: pointer; }
[data-theme="dark"] .site-tour-next { color: #0C110E; }

/* setup card v2 — expandable steps; stacks above the scan button */
.setup-card#setup-card { bottom: 84px; }
html body:has(#setup-card) .to-top { right: auto; left: 18px; bottom: 18px; }
@media (max-width: 560px) {
  .setup-card#setup-card { bottom: 140px; }
  html body:has(#setup-card) .to-top { left: 12px; bottom: 12px; }
}
.setup-step { border-bottom: 1px solid var(--line); }
.setup-step:last-of-type { border-bottom: 0; }
.setup-step summary { display: flex; align-items: baseline; gap: 8px; list-style: none;
  cursor: pointer; padding: 7px 0; font-size: .84rem; color: var(--ink); }
.setup-step summary::-webkit-details-marker { display: none; }
.setup-step .setup-mark { color: var(--faint); }
.setup-step.is-done summary { color: var(--faint); text-decoration: line-through; }
.setup-step.is-done .setup-mark { color: var(--save); text-decoration: none; }
.setup-subs { margin: 0 0 8px; padding-left: 22px; color: var(--muted); font-size: .78rem; }
.setup-subs li { margin: 3px 0; }
.setup-subs a { color: var(--save); }
.setup-tour-row { margin-top: 10px; }
.setup-tour-row .btn { width: 100%; text-align: center; font-size: .78rem; }

/* print: content, not chrome */
@media print {
  .masthead, .site-footer, .toasts, .to-top, .scan-fab, .setup-card, .controls,
  .btn, .visit, .star, .theme-toggle, .availcard, .board-map, .map-toggle { display: none !important; }
  body::before { display: none; }
  body { background: #fff; color: #000; }
  .wrap { max-width: none; padding: 0; }
  a { color: #000; text-decoration: none; }
  .product { border: 0; box-shadow: none; padding: 0; }
}

/* ═══════════════════ Batch 13 — marketing & reading layer ═══════════════════ */

/* long-form legal/FAQ text: cap line length at a comfortable reading measure */
.page-prose h1, .page-prose h2, .page-prose h3,
.page-prose p, .page-prose li { max-width: var(--measure); }

/* ═════════════════════════ Batch 15 — status page ═══════════════════════ */

/* extends the .status-dot from Batch 12 rather than redefining it */
.status-dot.bad  { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.status-dot.none { background: var(--faint); box-shadow: none; }
.status-dot-lg   { width: 12px; height: 12px; margin-right: 10px; vertical-align: baseline; display: inline-block; }

.status-h { font-size: 1.05rem; margin: var(--sp-6) 0 var(--sp-3); }
.status-h:first-child { margin-top: 0; }
.status-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.status-row {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto;
  gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
}
.status-row:last-child { border-bottom: 0; }
.status-name { font-weight: 600; color: var(--ink); }
.status-when { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.status-detail { font-family: var(--mono); font-size: .78rem; color: var(--faint); text-align: right; min-width: 0; }
.status-note { max-width: var(--measure); color: var(--muted); font-size: .9rem; margin-top: var(--sp-6); }
a.foot-status { text-decoration: none; }
a.foot-status:hover { color: var(--ink); }

@media (max-width: 560px) {
  .status-row { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .status-detail { display: none; }
}