/* Spend Forward — GEN-Z FORWARD theme (branch: sf-genz, 2026-06-29).
   A decisive shift from the calm muted-forest "ink-on-paper" system to a
   vivid, saturated, screenshottable brand: electric green→cyan, hot magenta,
   and an acid-lime accent over a bright canvas, with a near-black story card.
   Bold display type, an animated gradient-mesh backdrop, and motion cues.
   The honesty stays — "no data" is loud, sources are named, scoring is real.
   Every load-bearing demo selector/ID is preserved; only the vibe changes. */
:root{
  /* Bright living canvas (was warm paper) */
  --paper:#f6f5ff;        /* near-white with a faint violet cast */
  --paper-2:#ecebfb;      /* deeper panel */
  --card:#ffffff;         /* clean raised card */
  --ink:#0e0b1f;          /* deep indigo-black — the brand near-black */
  --ink-soft:#34304a;
  --muted:#6b6685;        /* muted violet-grey */
  --faint:#a29ec0;        /* faintest */
  --line:#e4e1f7;         /* hairline */
  --line-2:#d6d2ef;
  /* THE GEN-Z ACCENT SYSTEM — three saturated brand colors, not one.
     accent = electric green (primary action / "good"), used with its cyan
     partner in gradients; pink = the hot energy accent for share/viral
     moments; lime = the punchy highlight. The whole site shifts on these. */
  --accent:#00c46a;       /* electric green */
  --accent-2:#00d9c0;     /* bright cyan partner */
  --pink:#ff2e88;         /* hot magenta — the viral/energy accent */
  --pink-2:#ff7a3c;       /* coral, for the pink→coral gradient */
  --lime:#c6ff3e;         /* acid lime — punchy highlight */
  --violet:#7c5cff;       /* electric violet — secondary energy */
  --accent-soft:#d2fbe6;  /* soft green chip wash */
  --grad-energy:linear-gradient(120deg,#00c46a 0%,#00d9c0 38%,#7c5cff 100%);
  --grad-hot:linear-gradient(120deg,#ff2e88 0%,#ff7a3c 100%);
  --grad-share:radial-gradient(130% 120% at 78% 4%, #00d9c0 0%, #00c46a 30%, #7c5cff 70%, #ff2e88 116%);
  --warn:#ff2e88;         /* "no data" honesty flag — now LOUD pink, impossible to miss */
  --serif:'Georgia','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  /* Spacing scale (2026-06-29 sharpening pass) — one rhythm down the page.
     Use these instead of ad-hoc inline margins so vertical spacing is
     consistent and the layout reads considered, not assembled. */
  --s-1:8px; --s-2:14px; --s-3:22px; --s-4:34px; --s-5:54px; --s-6:88px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* ENERGIZED backdrop — a living gradient mesh of saturated brand-color light
   pools that slowly drift. This is the "more alive" turned all the way up:
   electric green, cyan, violet and hot pink bloom over the bright canvas so
   the whole page feels charged. Pure CSS; respects prefers-reduced-motion. */
body{
  font-family:var(--sans);color:var(--ink);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;
  background-color:var(--paper);
  background-image:
    radial-gradient(1200px 700px at 84% -6%, rgba(0,196,106,.20), transparent 60%),
    radial-gradient(1000px 640px at 4% 6%, rgba(124,92,255,.18), transparent 58%),
    radial-gradient(900px 620px at 96% 70%, rgba(255,46,136,.14), transparent 60%),
    radial-gradient(1300px 820px at 40% 112%, rgba(0,217,192,.16), transparent 60%),
    linear-gradient(180deg, #f9f8ff 0%, var(--paper) 30%, #efeefc 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
/* drifting color blobs behind everything — the motion cue */
body::before{
  content:"";position:fixed;inset:-20% -10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(420px 420px at 18% 28%, rgba(0,217,192,.30), transparent 62%),
    radial-gradient(380px 380px at 82% 18%, rgba(255,46,136,.24), transparent 62%),
    radial-gradient(460px 460px at 70% 82%, rgba(124,92,255,.26), transparent 62%),
    radial-gradient(380px 380px at 30% 88%, rgba(198,255,62,.22), transparent 62%);
  filter:blur(8px);
  animation:meshdrift 26s ease-in-out infinite alternate;
}
@keyframes meshdrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.06)}
  100%{transform:translate3d(-2%,2.5%,0) scale(1.03)}
}
@media(prefers-reduced-motion:reduce){
  body::before{animation:none}
}
.sans{font-family:var(--sans)}
.wrap{max-width:920px;margin:0 auto;padding:0 30px}
.narrow{max-width:720px}

/* nav */
header.nav{position:sticky;top:0;z-index:20;background:rgba(242,240,232,.86);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--line)}
header.nav .wrap{display:flex;justify-content:space-between;align-items:center;padding:16px 30px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand .mark{height:28px;width:28px;display:block}
.brand .wm{font-family:var(--serif);font-size:21px;letter-spacing:.02em;font-weight:400}
nav.links a{font-family:var(--serif);font-size:16px;color:var(--ink-soft);text-decoration:none;margin-left:26px}
nav.links a:hover{color:var(--accent)}
@media(max-width:680px){nav.links a{margin-left:16px;font-size:14px}.brand .wm{display:none}}

/* hero — single confident column. The value prop lives in the headline;
   the live demo below is the visual hero. (2026-06-29 sharpening pass.) */
.hero{position:relative;padding:104px 0 70px;overflow:hidden;text-align:center}
.kicker{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s-3)}
h1.hero-t{font-size:clamp(40px,6.4vw,66px);line-height:1.04;font-weight:400;letter-spacing:-.018em;max-width:13ch;margin:0 auto}
.hero .sub{font-size:21px;color:var(--ink-soft);max-width:52ch;margin:var(--s-3) auto 0;line-height:1.5}
.hero .sub2{font-family:var(--sans);font-size:14px;color:var(--muted);max-width:560px;margin-top:16px}

/* buttons */
.btn{display:inline-block;font-family:var(--sans);font-size:14.5px;text-decoration:none;padding:13px 26px;border-radius:2px;transition:.15s;border:none;cursor:pointer}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#000}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.cta-row{margin-top:var(--s-4);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .cta-row{justify-content:center}
.cta-note{font-family:var(--sans);font-size:12.5px;color:var(--faint)}
.hero .cta-note{margin-top:var(--s-3)}

/* sections — translucent so the alive backdrop shows through; alternating
   sections pick up a faint forest/paper wash for visible rhythm down the page. */
section{padding:var(--s-6) 0;border-top:1px solid var(--line);position:relative}
section:nth-of-type(even){background:linear-gradient(180deg,rgba(225,233,223,.34),rgba(252,251,247,.10))}
section:nth-of-type(odd){background:linear-gradient(180deg,rgba(252,251,247,.30),transparent)}
.sec{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:var(--s-2)}
h3{font-size:clamp(26px,3.4vw,34px);font-weight:400;line-height:1.14;margin-bottom:var(--s-2);letter-spacing:-.018em;max-width:18ch}
p.lead{font-size:18px;color:var(--ink-soft);max-width:62ch;margin-top:var(--s-2)}
p+p{margin-top:14px}
.muted{color:var(--muted)}
.quote{font-size:26px;line-height:1.45;max-width:740px;font-style:italic}

/* cards */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
@media(max-width:720px){.three{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);padding:24px;border-radius:3px}
.card.accent{border-left:2px solid var(--accent)}
.card h4{font-family:var(--sans);font-size:16px;font-weight:600;margin-bottom:9px}
.card p{font-family:var(--sans);font-size:14.5px;color:var(--muted);line-height:1.55}

/* two-col */
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
@media(max-width:720px){.two{grid-template-columns:1fr}}

/* steps / list rows */
.rows{margin-top:8px}
.row{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row .n{font-family:var(--serif);font-size:20px;color:var(--accent);flex:none;width:30px}
.row h4{font-family:var(--sans);font-size:15.5px;font-weight:600;margin-bottom:5px}
.row p{font-family:var(--sans);font-size:14px;color:var(--muted);line-height:1.55}

/* pill / tag */
.pill{display:inline-block;font-family:var(--sans);background:var(--accent-soft);color:var(--accent);font-size:11.5px;letter-spacing:.06em;padding:5px 13px;border-radius:99px}

/* nine-dimension grid (methodology + index promise) */
.dimgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}
.dimcell{background:var(--card);padding:18px 20px}
.dimcell h4{font-family:var(--sans);font-size:14.5px;font-weight:600;margin-bottom:6px}
.dimcell p{font-family:var(--sans);font-size:12.5px;color:var(--muted);line-height:1.5;margin:0}
.dimcell .src{font-family:var(--sans);font-size:11px;color:var(--faint);margin-top:8px;letter-spacing:.02em}
@media(max-width:720px){.dimgrid{grid-template-columns:1fr}}

/* ----- values-score wedge (score.html) ----- */
.wedge{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;margin-top:30px;align-items:start}
@media(max-width:820px){.wedge{grid-template-columns:1fr}}

.sliders{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:22px 24px}
.sliderrow{padding:11px 0;border-bottom:1px solid var(--line)}
.sliderrow:last-child{border-bottom:none}
.sliderrow .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sliderrow label{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink-soft)}
.sliderrow .val{font-family:var(--sans);font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums}
.sliderrow input[type=range]{width:100%;margin-top:8px;accent-color:var(--accent);cursor:pointer}

/* the shareable score card */
.scorecard{position:sticky;top:84px;background:var(--ink);color:var(--paper);border-radius:6px;padding:30px 28px;box-shadow:0 18px 40px rgba(20,21,15,.18)}
.scorecard .brandrow{display:flex;align-items:center;gap:9px;margin-bottom:20px}
.scorecard .brandrow .mark{height:22px;width:22px}
.scorecard .brandrow .nm{font-family:var(--serif);font-size:15px;letter-spacing:.03em}
.scorecard .label{font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#bdbfae}
.scorecard .big{font-family:var(--serif);font-size:64px;line-height:1;margin:8px 0 2px;color:#fff}
.scorecard .big span{font-size:26px;color:#bdbfae}
.scorecard .prof{font-family:var(--sans);font-size:14px;color:#e6e6da;margin-top:10px;line-height:1.5}
.scorecard .bars{margin-top:22px;display:grid;gap:7px}
.scorecard .bar{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:10px}
.scorecard .bar .bn{font-family:var(--sans);font-size:11px;color:#cfd0c2}
.scorecard .bar .track{height:6px;background:rgba(255,255,255,.13);border-radius:99px;overflow:hidden}
.scorecard .bar .fill{height:100%;background:#9ec2a7;border-radius:99px}
.scorecard .foot{font-family:var(--sans);font-size:11.5px;color:#9fa292;margin-top:22px;line-height:1.5}
.scorecard .cardcta{display:block;text-align:center;margin-top:18px;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:13.5px;font-weight:600;padding:11px;border-radius:3px;text-decoration:none}

/* ----- ring-rating mark (score.html scorecard) — ported from Figma
   rPnni2lsdNTfBIUJ6GpYpT "Logo for scoring". Five open-ring glyphs (the Spend
   Forward mark) act as a 0–5 rating; rings fill left→right across the brand
   gradient, the active ring shows a partial sweep for the fractional remainder,
   and unearned rings sit desaturated. Pure SVG/CSS — no raster assets. ----- */
.rating{display:flex;align-items:center;gap:10px;margin:18px 0 4px}
.rating .rings{display:flex;gap:7px;flex:none}
.rating .ring{width:30px;height:30px;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))}
.rating .ring .track{stroke:rgba(255,255,255,.16)}
.rating .ring .fill{stroke-linecap:round;transition:stroke-dashoffset .25s ease,stroke .25s ease}
.rating .read{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:#e6e6da;white-space:nowrap}
.rating .read b{font-family:var(--serif);font-size:19px;color:#fff;font-weight:400}
.rating .read .lab{color:#bdbfae;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-right:2px}

/* honesty flag — "no data, not a guess" */
.nodata{font-family:var(--sans);font-size:11px;color:var(--warn);letter-spacing:.02em}

/* methodology source list */
.srclist{font-family:var(--sans);font-size:14px;color:var(--muted);margin-top:14px;line-height:1.7}
.srclist b{color:var(--ink);font-weight:600}

/* prose (privacy, methodology body) */
.prose{max-width:720px}
.prose h3{margin-top:34px}
.prose p{font-family:var(--serif);font-size:17px;color:var(--ink-soft);margin-top:12px}
/* Serif opening line — same voice as .prose p, a step larger (Teo SF K-V_xJpm7lxC) */
.prose .lead-serif{font-family:var(--serif);font-size:19px;line-height:1.55;color:var(--ink-soft);margin-top:2px}
.prose ul{font-family:var(--sans);font-size:15px;color:var(--muted);margin:12px 0 0 20px;line-height:1.7}
.prose li{margin-bottom:6px}
.prose .promise{background:var(--card);border:1px solid var(--line);border-left:2px solid var(--accent);padding:20px 22px;border-radius:3px;margin-top:18px;font-style:italic;font-size:18px;color:var(--ink)}

/* affiliate stub seam — visible only as a parked placeholder, not implemented */
.stub{border:1px dashed var(--line-2);border-radius:3px;padding:16px 18px;margin-top:14px;font-family:var(--sans);font-size:13px;color:var(--faint)}

/* =====================================================================
   VISUAL PASS (2026-06-26) — richer, calm imagery within the warm-paper /
   forest-green system. Pure SVG/CSS, no raster assets, no new tokens/fonts.
   ===================================================================== */

/* dimension glyphs — small line-icons paired with each of the nine dimensions */
.dimcell .glyph{width:26px;height:26px;display:block;margin-bottom:10px;color:var(--accent)}
.dimcell .glyph svg{width:100%;height:100%;display:block}
.dimcell .ghead{display:flex;align-items:flex-start;gap:0;flex-direction:column}

/* in-page overlay mock — a tasteful before/after of the extension on a product page */
.overlay-mock{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
@media(max-width:720px){.overlay-mock{grid-template-columns:1fr}}
.mockframe{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 10px 28px rgba(20,21,15,.07)}
.mockframe .bar{display:flex;align-items:center;gap:7px;padding:9px 12px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.mockframe .bar .dot{width:9px;height:9px;border-radius:99px;background:var(--line-2);flex:none}
.mockframe .bar .url{font-family:var(--sans);font-size:10.5px;color:var(--faint);margin-left:6px;letter-spacing:.02em}
.mockframe .body{padding:16px 16px 18px;position:relative;min-height:188px}
.mockframe .caption{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:0 16px 12px}
/* faux product listing */
.prod{display:flex;gap:13px}
.prod .thumb{width:62px;height:62px;flex:none;border-radius:5px;background:linear-gradient(135deg,var(--paper-2),var(--line));border:1px solid var(--line)}
.prod .meta{min-width:0}
.prod .ptitle{font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);font-weight:600;line-height:1.35}
.prod .stars{font-family:var(--sans);font-size:11px;color:var(--faint);margin-top:5px}
.prod .price{font-family:var(--sans);font-size:15px;color:var(--ink);font-weight:600;margin-top:7px}
.prod .buy{display:inline-block;margin-top:10px;font-family:var(--sans);font-size:10.5px;background:var(--line);color:var(--muted);border-radius:99px;padding:4px 12px}
/* the Spend Forward badge that the extension injects */
.sf-badge{margin-top:14px;border:1px solid var(--accent-soft);background:#fff;border-left:2px solid var(--accent);border-radius:6px;padding:11px 13px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 14px rgba(31,143,107,.10)}
.sf-badge .bmark{width:30px;height:30px;flex:none}
.sf-badge .bmeta{min-width:0;flex:1}
.sf-badge .brow{display:flex;align-items:baseline;gap:6px}
.sf-badge .bscore{font-family:var(--serif);font-size:21px;color:var(--ink);line-height:1}
.sf-badge .bof{font-family:var(--sans);font-size:11px;color:var(--faint)}
.sf-badge .blab{font-family:var(--sans);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.sf-badge .bsub{font-family:var(--sans);font-size:10.5px;color:var(--muted);margin-top:3px}
.sf-badge .bsub .nd{color:var(--warn)}
.sf-badge .bmini{display:flex;gap:3px;margin-top:7px}
.sf-badge .bmini i{width:14px;height:6px;border-radius:99px;background:var(--accent);opacity:.85}
.sf-badge .bmini i.empty{background:var(--line-2);opacity:1}
.sf-badge .bmini i.nd{background:var(--warn);opacity:.55}

/* forward-options iconography */
.fwd-ico{width:30px;height:30px;display:block;color:var(--accent);margin-bottom:12px}
.fwd-ico svg{width:100%;height:100%}

/* footer — rebuilt round-2 (logo + tagline + icon social + slim meta) */
footer.ft{padding:46px 0 60px;border-top:1px solid var(--line);font-family:var(--sans);font-size:14px;color:var(--muted)}
footer.ft a{color:var(--accent);text-decoration:none}
footer.ft .ft-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:700}
footer.ft .ft-brand .mark{width:26px;height:26px}
footer.ft .ft-tag{margin-top:12px;max-width:60ch;line-height:1.6;color:var(--muted)}
footer.ft .ft-tag b{color:var(--ink-soft);font-weight:700}
footer.ft .ft-social{margin-top:18px;display:flex;gap:14px;flex-wrap:wrap}
footer.ft .ft-social a{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:99px;color:var(--muted)}
footer.ft .ft-social a:hover{color:var(--accent);border-color:var(--accent)}
footer.ft .ft-social svg{width:18px;height:18px}
footer.ft .ft-meta{margin-top:20px;font-size:13px;color:var(--muted)}
footer.ft .ft-meta .muted{color:var(--faint)}

/* =====================================================================
   FIGMA-ALIGNED PASS (2026-06-28) — structural elements ported from the
   2022 Figma (invitation ribbon, display-hero rule, in-page score panel,
   alternatives panel) rendered in the calm warm-paper / forest system.
   The loud yellow, offset-payments, accounts and marketplace are dropped
   on purpose. Pure CSS/SVG, no raster assets, no new tokens or fonts.
   ===================================================================== */

/* invitation ribbon (Figma yellow banner -> calm forest-tinted strip) */
.ribbon{background:var(--accent-soft);border-bottom:1px solid var(--line)}
.ribbon .wrap{display:flex;align-items:center;justify-content:center;gap:16px;padding:9px 30px;flex-wrap:wrap}
.ribbon .rib-q{font-family:var(--sans);font-size:13px;color:var(--ink-soft);text-align:center}
.ribbon .rib-cta{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--paper);background:var(--accent);text-decoration:none;padding:5px 14px;border-radius:99px;white-space:nowrap}
.ribbon .rib-cta:hover{background:#177254}

/* ---- in-page Score panel mock (Figma "Score" screen) ---- */
.shopframe{margin-top:28px;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 14px 36px rgba(20,21,15,.09)}
.shopframe>.bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.shopframe>.bar .dot{width:10px;height:10px;border-radius:99px;background:var(--line-2);flex:none}
.shopframe>.bar .url{font-family:var(--sans);font-size:11px;color:var(--faint);margin-left:8px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shopbody{display:grid;grid-template-columns:1.05fr .95fr;gap:0}
@media(max-width:720px){.shopbody{grid-template-columns:1fr}}

/* left: host product listing */
.listing{display:flex;gap:16px;padding:22px 22px;border-right:1px solid var(--line)}
@media(max-width:720px){.listing{border-right:none;border-bottom:1px solid var(--line)}}
.listing .gallery{flex:none;display:flex;flex-direction:column;gap:8px;align-items:center}
.listing .big-thumb{width:96px;height:96px;border-radius:7px;background:linear-gradient(135deg,var(--paper-2),var(--line));border:1px solid var(--line)}
.listing .thumbs{display:flex;gap:6px}
.listing .thumbs span{width:18px;height:18px;border-radius:4px;background:var(--paper-2);border:1px solid var(--line)}
.listing .linfo{min-width:0}
.listing .ltitle{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink-soft);line-height:1.4}
.listing .lstars{font-family:var(--sans);font-size:11.5px;color:var(--faint);margin-top:8px}
.listing .lprice{font-family:var(--serif);font-size:23px;color:var(--ink);margin-top:10px}
.listing .lnote{font-family:var(--sans);font-size:11px;color:var(--muted);margin-top:4px}
.listing .lbuy{display:inline-block;margin-top:12px;font-family:var(--sans);font-size:11.5px;background:var(--paper-2);color:var(--muted);border:1px solid var(--line-2);border-radius:99px;padding:6px 16px}

/* right: injected Spend Forward panel */
.sfpanel{padding:20px 22px;background:#fff}
.sfp-head{display:flex;align-items:center;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sfp-head .sfp-mark{width:22px;height:22px}
.sfp-head .sfp-name{font-family:var(--serif);font-size:15px;letter-spacing:.02em;color:var(--ink)}
.sfp-score{display:flex;align-items:center;gap:16px;padding:16px 0 4px}
.sfp-ring{flex:none;width:72px;height:72px}
.sfp-ring svg{width:100%;height:100%;display:block}
.sfp-read{min-width:0}
.sfp-lab{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sfp-num{font-family:var(--serif);font-size:38px;line-height:1;color:var(--ink);margin-top:3px}
.sfp-num span{font-size:17px;color:var(--faint)}
.sfp-cap{font-family:var(--sans);font-size:11px;color:var(--muted);margin-top:5px}
.sfp-dims{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;display:grid;gap:11px}
.sfp-dim{display:grid;grid-template-columns:1fr 64px auto;align-items:center;gap:11px;font-family:var(--sans);font-size:12px;color:var(--ink-soft)}
.sfp-dim .dn{min-width:0;line-height:1.3}
.sfp-dim .dt{height:6px;background:var(--paper-2);border-radius:99px;overflow:hidden}
.sfp-dim .df{display:block;height:100%;background:var(--accent);border-radius:99px}
.sfp-dim .dv{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;justify-self:end}
.sfp-resale{font-family:var(--sans);font-size:11.5px;color:var(--muted);margin-top:15px;padding-top:13px;border-top:1px solid var(--line)}
.sfp-resale b{color:var(--ink-soft)}
.sfp-cta{display:block;text-align:center;margin-top:15px;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;padding:10px;border-radius:3px;text-decoration:none}
.sfp-cta:hover{background:#000}
.sfp-foot{font-family:var(--sans);font-size:10.5px;color:var(--faint);margin-top:12px;line-height:1.5}

/* ---- alternatives panel (Figma "explore sustainable alternatives") ---- */
.altpanel{margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 20px;box-shadow:0 10px 28px rgba(20,21,15,.07)}
.alt-head{display:flex;align-items:center;gap:10px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.alt-head .alt-mark{width:22px;height:22px}
.alt-head .alt-name{font-family:var(--serif);font-size:16px;color:var(--ink);flex:1}
.alt-list{display:grid;gap:0;margin-top:4px}
.alt-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}
.alt-row:last-child{border-bottom:none}
.alt-thumb{flex:none;width:42px;height:42px;border-radius:6px;background:linear-gradient(135deg,var(--paper-2),var(--line));border:1px solid var(--line)}
.alt-meta{flex:1;min-width:0}
.alt-meta .alt-t{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-soft)}
.alt-meta .alt-sub{font-family:var(--sans);font-size:11px;color:var(--faint);margin-top:2px}
.alt-sc{flex:none;display:flex;align-items:baseline;gap:3px}
.alt-sc .alt-n{font-family:var(--serif);font-size:20px;color:var(--accent)}
.alt-sc .alt-of{font-family:var(--sans);font-size:11px;color:var(--faint)}
.alt-foot{font-family:var(--sans);font-size:11px;color:var(--faint);margin-top:13px;padding-top:12px;border-top:1px solid var(--line);line-height:1.5}

/* =====================================================================
   DEMO / FLOW PAGE (2026-06-28) — the unlinked end-to-end walkthrough at
   /demo: install -> first use -> score in place -> alternatives. Faithful,
   calm rebuilds of the Figma screens (Extension Store, Tutorial, Score,
   Alternatives) in the warm-paper / forest system. NOT in nav; preview only.
   Pure CSS/SVG, reuses tokens. No raster assets, no new fonts/colors.
   ===================================================================== */

/* demo intro banner — makes the unlinked status honest and visible */
.demo-flag{background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:12.5px;text-align:center;padding:9px 30px;letter-spacing:.02em}
.demo-flag b{color:#fff}

/* numbered flow step header */
.flowstep{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.flowstep .fs-n{font-family:var(--serif);font-size:15px;color:var(--paper);background:var(--accent);width:30px;height:30px;border-radius:99px;display:flex;align-items:center;justify-content:center;flex:none;align-self:center}
.flowstep .fs-t{font-size:25px;font-weight:400;letter-spacing:-.01em}

/* generic browser chrome frame for demo screens */
.demoframe{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 14px 36px rgba(20,21,15,.09)}
.demoframe>.chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.demoframe>.chrome .dot{width:10px;height:10px;border-radius:99px;background:var(--line-2);flex:none}
.demoframe>.chrome .addr{font-family:var(--sans);font-size:11px;color:var(--faint);margin-left:8px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:4px 14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demoframe .scr{padding:22px 24px;background:#fff}

/* --- Chrome Web Store listing rebuild (install) --- */
.cws-head{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
.cws-mark{width:52px;height:52px;flex:none}
.cws-info{flex:1;min-width:200px}
.cws-title{font-family:var(--sans);font-size:19px;font-weight:600;color:var(--ink);line-height:1.25}
.cws-dom{font-family:var(--sans);font-size:12.5px;color:var(--accent);margin-top:4px}
.cws-meta{font-family:var(--sans);font-size:12px;color:var(--faint);margin-top:8px}
.cws-add{flex:none;font-family:var(--sans);font-size:13.5px;font-weight:600;background:var(--accent);color:#fff;border-radius:4px;padding:10px 22px;text-decoration:none;align-self:center}
.cws-add:hover{background:#177254}
.cws-tabs{display:flex;gap:22px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--sans);font-size:13px;color:var(--muted)}
.cws-tabs .on{color:var(--ink);font-weight:600;border-bottom:2px solid var(--accent);padding-bottom:6px}
.cws-shot{margin-top:18px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:22px;display:flex;justify-content:center}

/* the "Add Spend Forward?" install permission dialog */
.cws-dialog{margin-top:18px;background:var(--card);border:1px solid var(--line-2);border-radius:8px;padding:18px 20px;max-width:430px;box-shadow:0 10px 30px rgba(20,21,15,.12)}
.cws-dialog .dq{font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink)}
.cws-dialog .dp{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:8px}
.cws-dialog .drow{display:flex;gap:10px;margin-top:16px;justify-content:flex-end}
.cws-dialog .dcancel{font-family:var(--sans);font-size:12.5px;color:var(--muted);border:1px solid var(--line-2);border-radius:4px;padding:8px 16px;text-decoration:none}
.cws-dialog .dadd{font-family:var(--sans);font-size:12.5px;font-weight:600;color:#fff;background:var(--accent);border-radius:4px;padding:8px 18px;text-decoration:none}

/* the "added to Chrome" toast */
.cws-toast{margin-top:18px;background:var(--ink);color:var(--paper);border-radius:8px;padding:15px 18px;display:flex;gap:13px;align-items:flex-start;max-width:380px}
.cws-toast .tmark{width:26px;height:26px;flex:none}
.cws-toast .tt{font-family:var(--sans);font-size:13.5px;font-weight:600;color:#fff}
.cws-toast .ts{font-family:var(--sans);font-size:12px;color:#bdbfae;margin-top:4px;line-height:1.5}

/* --- alternatives full grid (the standalone Alternatives screen) --- */
.altgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:4px}
@media(max-width:720px){.altgrid{grid-template-columns:1fr}}
.altcard{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:10px}
.altcard.best{border-left:2px solid var(--accent)}
.altcard .ac-thumb{width:100%;height:84px;border-radius:6px;background:linear-gradient(135deg,var(--paper-2),var(--line));border:1px solid var(--line)}
.altcard .ac-t{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-soft);line-height:1.35}
.altcard .ac-via{font-family:var(--sans);font-size:11px;color:var(--faint)}
.altcard .ac-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
.altcard .ac-price{font-family:var(--serif);font-size:18px;color:var(--ink)}
.altcard .ac-sc{font-family:var(--sans);font-size:12px;color:var(--accent);font-weight:600}
.altcard .ac-sc b{font-family:var(--serif);font-size:17px;font-weight:400}

/* sustainable manufacturers / distributors chips */
.chiprow{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.chip{font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:99px;padding:7px 16px}

/* flow connector arrow between steps */
.flowdown{display:flex;justify-content:center;color:var(--line-2);margin:30px 0 4px}
.flowdown svg{width:26px;height:26px}

/* ============================================================
   REALISTIC AMAZON PRODUCT PAGE MOCK (max-fidelity, Figma "Score")
   A faithful rebuild of an Amazon listing — global nav, search bar,
   sub-nav, breadcrumb, gallery + buy box — with the Spend Forward
   Spend Forward panel injected beneath the title, exactly as the
   extension does in place. Used in the embedded homepage demo.
   ============================================================ */
.azwin{margin-top:26px;border:1px solid var(--line);border-radius:11px;overflow:hidden;box-shadow:0 18px 50px rgba(20,21,15,.14);background:#fff;font-family:Arial,Helvetica,sans-serif}
/* the browser tab/omnibox strip over the page */
.azchrome{display:flex;align-items:center;gap:8px;padding:9px 14px;background:#dfddd2;border-bottom:1px solid var(--line)}
.azchrome .dot{width:11px;height:11px;border-radius:99px;flex:none}
.azchrome .dot:nth-child(1){background:#ec6a5e}.azchrome .dot:nth-child(2){background:#f4bf4f}.azchrome .dot:nth-child(3){background:#61c454}
.azchrome .omni{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border-radius:99px;padding:6px 14px;font-size:12px;color:#5a5f6a;margin-left:6px;border:1px solid #cfcdc2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.azchrome .omni .lock{color:#6b7280;font-size:11px}
.azchrome .ext{display:flex;align-items:center;gap:5px;flex:none}
.azchrome .ext .pin{width:24px;height:24px;border-radius:6px;background:#fff;border:1px solid #cfcdc2;display:flex;align-items:center;justify-content:center}
.azchrome .ext .pin img{width:16px;height:16px;display:block}
/* amazon global header */
.az-top{display:flex;align-items:center;gap:14px;background:#131921;color:#fff;padding:9px 14px}
.az-logo{font-weight:700;font-size:17px;letter-spacing:-.02em;display:flex;align-items:baseline;gap:1px}
.az-logo b{color:#fff}.az-logo .smile{color:#ff9900}
.az-deliver{display:flex;align-items:center;gap:5px;font-size:11px;color:#ccc;flex:none}
.az-deliver .pin{font-size:13px}.az-deliver b{color:#fff;font-size:12.5px;display:block}
.az-search{flex:1;display:flex;min-width:0;border-radius:5px;overflow:hidden}
.az-search .cat{background:#e6e6e6;color:#555;font-size:11px;padding:0 9px;display:flex;align-items:center;flex:none;border-right:1px solid #cdcdcd}
.az-search input{flex:1;border:none;padding:8px 11px;font-size:13px;min-width:0;color:#111}
.az-search .go{background:#febd69;color:#111;padding:0 13px;display:flex;align-items:center;font-size:14px;flex:none}
.az-acct{font-size:11px;color:#ccc;flex:none;line-height:1.25}.az-acct b{color:#fff;font-size:12.5px;display:block}
.az-cart{display:flex;align-items:center;gap:4px;color:#fff;font-size:13px;font-weight:700;flex:none}.az-cart .ic{color:#febd69;font-size:17px}
.az-sub{display:flex;align-items:center;gap:18px;background:#232f3e;color:#fff;padding:7px 14px;font-size:12.5px;overflow:hidden}
.az-sub .all{display:flex;align-items:center;gap:6px;font-weight:700}
.az-sub span{white-space:nowrap;color:#e8e8e8}
@media(max-width:680px){.az-deliver,.az-acct .l1,.az-sub{display:none}}
/* breadcrumb */
.az-crumb{padding:7px 18px;font-size:11.5px;color:#565959;background:#fff;border-bottom:1px solid #eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.az-crumb a{color:#007185;text-decoration:none}
/* main 3-col product grid: gallery | center (title+panel) | buybox */
.az-grid{display:grid;grid-template-columns:230px 1.5fr 240px;gap:0;padding:18px;background:#fff;align-items:start}
@media(max-width:880px){.az-grid{grid-template-columns:1fr}}
.az-gal{display:flex;gap:10px;padding-right:8px}
.az-gal .strip{display:flex;flex-direction:column;gap:7px;flex:none}
.az-gal .strip i{width:34px;height:34px;border-radius:5px;border:1px solid #d5d9d9;background:linear-gradient(135deg,#f3f3f0,#e3e3dd);display:block}
.az-gal .strip i.on{border:2px solid #e77600}
/* Real product photo (Teo: "still not real") — a recognizable Seventh
   Generation Free & Clear detergent bottle drawn in CSS, not abstract gray
   circles, so the listing reads as a true Amazon product page. */
.az-hero-img{flex:1;min-width:0;height:188px;border-radius:6px;background:
  radial-gradient(circle at 50% 38%, #ffffff 0%, #f5f6f4 62%, #ebece8 100%);
  border:1px solid #eee;position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.az-hero-img .bottle{position:relative;width:88px;height:160px;margin-bottom:10px;display:flex;flex-direction:column;align-items:center}
.az-hero-img .bottle .cap{width:34px;height:18px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#3f7d57,#2f5e41);box-shadow:inset 0 2px 2px rgba(255,255,255,.25)}
.az-hero-img .bottle .neck{width:24px;height:10px;background:linear-gradient(180deg,#dfeee4,#cfe2d6)}
.az-hero-img .bottle .body{position:relative;width:88px;flex:1;border-radius:12px 12px 16px 16px;
  background:linear-gradient(100deg,#eaf4ee 0%,#fbfdfb 30%,#ffffff 48%,#e6f1ea 78%,#d6e7dc 100%);
  border:1px solid #d3e3d8;box-shadow:inset -6px 0 10px rgba(120,150,130,.18),inset 6px 0 8px rgba(255,255,255,.7),0 8px 16px rgba(0,0,0,.10)}
.az-hero-img .bottle .lbl{position:absolute;left:10px;right:10px;top:18px;bottom:12px;border-radius:6px;background:#fff;
  border:1px solid #e3ede6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:6px}
.az-hero-img .bottle .lbl b{font-family:Arial,Helvetica,sans-serif;font-size:11px;line-height:1.05;letter-spacing:.02em;color:#2f5e41;text-transform:lowercase;font-weight:700}
.az-hero-img .bottle .lbl i{font-family:Georgia,serif;font-style:italic;font-size:9.5px;color:#4a4a44}
.az-hero-img .bottle .lbl u{font-family:Arial,Helvetica,sans-serif;text-decoration:none;font-size:8px;letter-spacing:.08em;color:#7a8a7e;text-transform:uppercase;border-top:1px solid #e3ede6;padding-top:3px}
/* center column */
.az-center{padding:0 22px;min-width:0;border-left:1px solid #f0f0f0;border-right:1px solid #f0f0f0}
.az-title{font-size:19px;font-weight:400;color:#0f1111;line-height:1.35}
.az-brand{font-size:12.5px;color:#007185;margin-top:5px}
.az-rate{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:12.5px;color:#007185}
.az-stars{color:#de7921;letter-spacing:1px;font-size:13px}
.az-bought{font-size:12px;color:#565959;margin-top:6px}
.az-price-c{margin-top:12px}.az-price-c .sm{font-size:12px;color:#565959}
.az-price-c .big{font-size:27px;color:#0f1111;font-weight:400}.az-price-c .big sup{font-size:13px;top:-.7em}
.az-divider{height:1px;background:#e7e7e7;margin:16px 0}
/* the injected Spend Forward panel — sits in center column, in place */
.az-buybox{padding-left:18px}
.az-buybox .bb-price{font-size:25px;color:#0f1111}
.az-buybox .bb-deliv{font-size:12.5px;color:#565959;margin-top:9px;line-height:1.5}
.az-buybox .bb-deliv b{color:#007600}
.az-buybox .bb-stock{font-size:17px;color:#007600;margin-top:11px}
.az-buybox .bb-qty{font-size:12.5px;color:#0f1111;margin-top:10px;border:1px solid #d5d9d9;border-radius:8px;padding:6px 11px;display:inline-block;background:#f0f2f2}
.az-buybox .bb-btn{display:block;text-align:center;margin-top:11px;border-radius:99px;padding:9px;font-size:13px;color:#0f1111;text-decoration:none}
.az-buybox .bb-cart{background:#ffd814;border:1px solid #fcd200}
.az-buybox .bb-buy{background:#ffa41c;border:1px solid #ff8f00}
.az-buybox .bb-secure{font-size:11px;color:#565959;margin-top:11px;display:flex;align-items:center;gap:5px}
@media(max-width:880px){.az-center,.az-buybox{border:none;padding-left:0;padding-right:0}.az-buybox{margin-top:18px;border-top:1px solid #eee;padding-top:18px}}

/* ---- the Spend Forward injected panel (high fidelity, in the center col) ---- */
.bfp{margin-top:14px;border:1px solid #d9ddd2;border-radius:12px;background:linear-gradient(180deg,#fcfbf7,#f6f5ee);box-shadow:0 8px 24px rgba(20,21,15,.07);overflow:hidden}
.bfp-top{display:flex;align-items:center;gap:9px;padding:11px 16px;border-bottom:1px solid #e8e7db;background:#fff}
.bfp-top .bfp-mark{width:22px;height:22px}
.bfp-top .bfp-wm{font-family:var(--serif);font-size:15px;color:var(--ink);letter-spacing:.01em}
.bfp-top .bfp-tag{margin-left:auto;font-family:var(--sans);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:3px 9px}
.bfp-body{padding:15px 17px}
.bfp-score{display:flex;align-items:center;gap:18px}
.bfp-ring{flex:none;width:84px;height:84px;position:relative}
.bfp-ring svg{width:100%;height:100%;display:block}
.bfp-ring .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.bfp-ring .ctr .n{font-family:var(--serif);font-size:21px;color:var(--ink);line-height:1}
.bfp-ring .ctr .o{font-family:var(--sans);font-size:9px;color:var(--faint);margin-top:1px}
.bfp-read .bfp-lab{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600}
.bfp-read .bfp-tier{font-family:var(--serif);font-size:22px;color:var(--ink);margin-top:3px}
.bfp-read .bfp-tier small{font-family:var(--sans);font-size:12px;color:var(--muted)}
.bfp-read .bfp-cap{font-family:var(--sans);font-size:11px;color:var(--muted);margin-top:5px}
/* SIMPLE in-app view: alternatives-first strip + details-on-demand toggle
   (Teo: "in app needs to be simpler and show alternatives vs details"). */
.bfp-alts{margin-top:15px;border-top:1px solid #e8e7db;padding-top:13px}
.bfp-alts .bfa-h{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.bfp-alts .bfa-t{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.bfp-alts .bfa-soon{font-family:var(--sans);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#8a5a00;background:#fff5e0;border-radius:99px;padding:2px 8px}
.bfp-alts .bfa-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border:1px solid #e8e7db;border-radius:9px;background:#fff;margin-bottom:7px}
.bfp-alts .bfa-meta{min-width:0}
.bfp-alts .bfa-n{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.bfp-alts .bfa-why{font-family:var(--sans);font-size:10.5px;color:var(--faint);margin-top:1px}
.bfp-alts .bfa-sc{flex:none;display:flex;align-items:baseline;gap:3px}
.bfp-alts .bfa-num{font-family:var(--serif);font-size:18px;color:var(--accent)}
.bfp-alts .bfa-of{font-family:var(--sans);font-size:10px;color:var(--faint)}
.bfp-alts .bfa-empty{font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.bfp-alts .bfa-note{font-family:var(--sans);font-size:10px;color:var(--faint);margin-top:4px;line-height:1.45}
.bfp-details{margin-top:13px}
.bfp-details summary{font-family:var(--sans);font-size:11.5px;color:var(--accent);cursor:pointer;list-style:none;padding:8px 0;border-top:1px solid #e8e7db}
.bfp-details summary::-webkit-details-marker{display:none}
.bfp-details summary::before{content:"\25B8\00a0";color:var(--faint)}
.bfp-details[open] summary::before{content:"\25BE\00a0"}
.bfp-details .bfp-dims{border-top:none;padding-top:6px}
.bfp-dims{margin-top:15px;border-top:1px solid #e8e7db;padding-top:13px;display:grid;gap:12px}
.bfp-dim{display:grid;grid-template-columns:1fr 84px 38px;align-items:center;gap:11px}
.bfp-dim .bd-n{font-family:var(--sans);font-size:12px;color:var(--ink-soft);min-width:0}
.bfp-dim .bd-n .src{display:block;font-size:9.5px;color:var(--faint);margin-top:1px}
.bfp-dim .bd-t{height:7px;background:#e6e4d8;border-radius:99px;overflow:hidden}
.bfp-dim .bd-f{display:block;height:100%;border-radius:99px;background:var(--accent)}
.bfp-dim .bd-v{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.bfp-dim.nd .bd-v{color:var(--warn);font-size:10px;font-weight:600}
.bfp-dim.nd .bd-t{background:repeating-linear-gradient(45deg,#efeee6,#efeee6 4px,#e6e4d8 4px,#e6e4d8 8px)}
.bfp-actions{margin-top:15px;display:flex;gap:9px;align-items:center}
.bfp-actions .bfp-cta{flex:1;text-align:center;background:var(--ink);color:#fff;font-family:var(--sans);font-size:12.5px;font-weight:600;padding:10px;border-radius:7px;text-decoration:none}
.bfp-actions .bfp-cta:hover{background:#000}
.bfp-actions .bfp-soon{font-family:var(--sans);font-size:11px;color:var(--muted);border:1px solid var(--line-2);border-radius:7px;padding:9px 12px;text-decoration:none;white-space:nowrap}
.bfp-foot{font-family:var(--sans);font-size:10.5px;color:var(--faint);margin-top:11px;line-height:1.5;padding:0 17px 14px}

/* ============================================================
   EMBEDDED INTERACTIVE DEMO — "set a weight, watch it recompute"
   Right on the homepage. The score above is live: dragging these
   sliders recomputes the Spend Forward number in place.
   ============================================================ */
.try{margin-top:20px;border:1px solid var(--line);border-radius:11px;background:var(--card);padding:18px 20px}
.try-h{font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);font-weight:600;display:flex;align-items:center;gap:8px}
.try-h .live{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:3px 9px}
.try-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;margin-top:14px}
@media(max-width:560px){.try-grid{grid-template-columns:1fr}}
.try-row{display:grid;grid-template-columns:1fr 110px 30px;align-items:center;gap:11px}
.try-row label{font-family:var(--sans);font-size:12px;color:var(--ink-soft)}
.try-row input[type=range]{width:100%;accent-color:var(--accent);height:4px}
.try-row .wv{font-family:var(--sans);font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
/* Sliders grouped by the four scoring families (mirrors /methodology), each an
   expandable <details> so the nine dimensions stay themed and collapsible. */
.try-group{border-top:1px solid var(--line);padding:8px 0 2px}
.try-group:first-child{border-top:none}
.try-group-h{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font:700 10px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:2px 0 6px}
.try-group-h::-webkit-details-marker{display:none}
.try-group-h::before{content:"";width:6px;height:6px;border-right:1.6px solid var(--faint);border-bottom:1.6px solid var(--faint);transform:rotate(-45deg);transition:transform .15s;flex:none}
.try-group[open] .try-group-h::before{transform:rotate(45deg)}
.try-group-h .tg-count{margin-left:auto;font:700 10px var(--sans);color:var(--faint);background:var(--paper-2);border-radius:99px;padding:1px 7px;letter-spacing:.02em}
.try-group-body{display:grid;gap:9px;padding-bottom:6px}
.try-foot{font-family:var(--sans);font-size:11px;color:var(--faint);margin-top:14px;line-height:1.5}
.try-prod{display:flex;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.try-prod button{font-family:var(--sans);font-size:11.5px;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:6px 14px;cursor:pointer}
.try-prod button.on{color:#fff;background:var(--accent);border-color:var(--accent)}

/* =====================================================================
   COMMENT PASS (2026-06-28) — processing Teo's Vercel toolbar comments
   with real, visible changes: a named-source wall, per-dimension source
   tags, an editable hero mark, realistic before/after, and a shareable
   social badge. Same warm-paper / forest system; no new fonts.
   ===================================================================== */

/* ---- "Our sources" wall (Teo: "we should also call out the sources" /
        "clear sources, is this the right list?") — a visible band of the
        named public authorities behind the score. ---- */
.srcband{margin-top:30px}
.srcband .sb-h{font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);text-align:center;margin-bottom:16px}
.srcwall{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
@media(max-width:680px){.srcwall{grid-template-columns:repeat(2,1fr)}}
.srcwall .src-cell{background:var(--card);padding:16px 14px;text-align:center;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center}
.srcwall .src-name{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--accent);letter-spacing:.01em}
.srcwall .src-what{font-family:var(--sans);font-size:10.5px;color:var(--muted);line-height:1.35}
.srcnote{font-family:var(--sans);font-size:11.5px;color:var(--faint);text-align:center;margin-top:14px;line-height:1.5}
/* Methodology dimensions clustered into the four theme families (Teo SF -Ao3mj7pqa20) */
.srcgroups{display:flex;flex-direction:column;gap:18px}
.srcgroup-h{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0 2px 8px}
.srcgroup .srcwall{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}

/* per-dimension source tag on the homepage dimension grid (Teo: "clear sources") */
.dimcell .dsrc{font-family:var(--sans);font-size:10.5px;color:var(--accent);margin-top:9px;letter-spacing:.02em;display:flex;align-items:center;gap:5px}
.dimcell .dsrc::before{content:"";width:5px;height:5px;border-radius:99px;background:var(--accent);flex:none}

/* ---- realistic before/after (Teo: "real mocks" / "the mocs are not real
        amazon mocs") — the After frame reuses the real Amazon chrome. ---- */
.ba-real{margin-top:22px;display:grid;gap:18px}
.ba-real .ba-cap{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.ba-real .azwin{margin-top:0}
.ba-tag{display:inline-block;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:3px 11px;margin-left:8px;vertical-align:middle}

/* ---- shareable social badge (Teo: "make this a viral sharable instagram
        tiktok facebook linkedin badge" + "embed this in page 1") ---- */
.sharewrap{margin-top:30px}
/* Badge color refreshed to the new alive emerald-teal (Teo: "change the color
   of the badge but also the theme of the whole page accordingly") — brighter,
   coherent with the site-wide --accent shift above. */
.sharecard{position:relative;width:100%;max-width:460px;margin:0 auto;aspect-ratio:1/1;border-radius:18px;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 80% 0%, #2bb588 0%, #1f8f6b 44%, #12513e 100%);
  box-shadow:0 24px 60px rgba(20,21,15,.28);display:flex;flex-direction:column;justify-content:space-between;padding:32px 32px 28px}
.sharecard .sc-top{display:flex;align-items:center;gap:11px}
.sharecard .sc-mark{width:32px;height:32px}
.sharecard .sc-wm{font-family:var(--serif);font-size:20px;letter-spacing:.02em}
.sharecard .sc-kick{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#bfe0c8}
.sharecard .sc-title{font-family:var(--serif);font-size:34px;line-height:1.08;margin-top:7px}
.sharecard .sc-score{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.sharecard .sc-score .sc-n{font-family:var(--serif);font-size:56px;line-height:1}
.sharecard .sc-score .sc-of{font-family:var(--sans);font-size:17px;color:#bfe0c8}
.sharecard .sc-bars{display:grid;gap:6px;margin-top:13px}
.sharecard .sc-bar{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:10px}
.sharecard .sc-bar .b-n{font-family:var(--sans);font-size:10.5px;color:#d6ecdb}
.sharecard .sc-bar .b-t{height:6px;background:rgba(255,255,255,.16);border-radius:99px;overflow:hidden}
.sharecard .sc-bar .b-f{height:100%;background:#bfe0c8;border-radius:99px}
.sharecard .sc-foot{font-family:var(--sans);font-size:10.5px;color:#a9cdb2;margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.share-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.share-actions .btn{font-size:13px;padding:11px 20px}
.share-chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.share-chips a{font-family:var(--sans);font-size:12px;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:99px;padding:6px 14px;text-decoration:none}
.share-chips a:hover{border-color:var(--accent);color:var(--accent)}
.share-note{font-family:var(--sans);font-size:11.5px;color:var(--faint);text-align:center;margin-top:12px}

/* page-1 shareable teaser (the embed Teo asked for on page 1) */
.shareteaser{display:grid;grid-template-columns:.95fr 1.05fr;gap:34px;align-items:center;margin-top:8px}
@media(max-width:720px){.shareteaser{grid-template-columns:1fr;gap:24px}}
.shareteaser .st-copy h3{margin-bottom:10px}
.shareteaser .st-copy p{font-family:var(--sans);font-size:14.5px;color:var(--muted);line-height:1.55}
.shareteaser .sharecard{max-width:320px}
.shareteaser .sharecard .sc-title{font-size:25px}
.shareteaser .sharecard .sc-score .sc-n{font-size:42px}

/* =====================================================================
   SHARPENING PASS (2026-06-29) — design-led tighten. A single accent
   link helper, the demo elevated to hero, the source strip slimmed, and
   the spacing system applied so the page reads considered, not assembled.
   ===================================================================== */

/* one accent inline-link treatment, replacing scattered inline styles */
.lnk{color:var(--accent);text-decoration:none;font-family:var(--sans);font-weight:600;white-space:nowrap}
.lnk:hover{text-decoration:underline}
.dim-link{margin-top:var(--s-4);font-size:14px}

/* ---- HERO = the live unified search + the score in action. The page's
        visual centerpiece: a confident headline, one search box, then the
        live score window. (2026-06-29 structure change — score as hero.) ---- */
.hero-demo{border-top:none;padding-top:104px}
.hero-demo .kicker{margin-bottom:var(--s-2)}
.demo-head{text-align:center;max-width:64ch;margin:0 auto}
.demo-head h1.hero-t{margin:0 auto}
.demo-head h3{margin-left:auto;margin-right:auto;max-width:none}
.demo-head .sub{margin-left:auto;margin-right:auto}
.demo-head .lead{margin-left:auto;margin-right:auto}

/* the single unified search box (product OR company/stock) */
.uni{display:flex;align-items:center;gap:8px;max-width:520px;margin:var(--s-4) auto 0;
  background:var(--card);border:1.5px solid var(--line-2);border-radius:99px;
  padding:6px 6px 6px 18px;box-shadow:0 10px 30px rgba(20,21,15,.10);transition:border-color .15s,box-shadow .15s}
.uni:focus-within{border-color:var(--accent);box-shadow:0 12px 34px rgba(31,143,107,.16)}
.uni .uni-ic{font-size:15px;color:var(--faint);flex:none}
.uni input{flex:1;min-width:0;border:none;background:transparent;font-family:var(--sans);font-size:15.5px;color:var(--ink);outline:none}
.uni input::placeholder{color:var(--faint)}
.uni #uni-go{flex:none;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--paper);background:var(--ink);border:none;border-radius:99px;padding:11px 20px;cursor:pointer;transition:.15s}
.uni #uni-go:hover{background:#000}
.uni-miss{font-family:var(--sans);font-size:12.5px;color:var(--warn);text-align:center;margin-top:var(--s-1)}
.uni-chips{justify-content:center;margin:var(--s-2) auto 0;max-width:560px}
/* Products vs Companies/stocks segmented toggle above the search (Teo: separate
   stocks from products). A small pill segment; the active half is inked. */
.uni-seg{display:inline-flex;gap:0;margin:var(--s-3) auto 0;border:1px solid var(--line-2);background:var(--card);border-radius:99px;padding:3px;box-shadow:0 6px 18px rgba(20,21,15,.06)}
.uni-seg{justify-content:center}
.uni-seg button{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);background:transparent;border:none;border-radius:99px;padding:7px 16px;cursor:pointer;transition:.15s;white-space:nowrap}
.uni-seg button.on{color:var(--paper);background:var(--ink)}

/* lift + center the score window so it reads as "the thing" */
.hero-demo .azwin{margin-top:var(--s-5);box-shadow:0 30px 70px rgba(20,21,15,.18)}
/* kind tag above the title — product (live) vs stock/company (soon) */
.az-kind{display:inline-block;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#1f7a52;background:#e6f3ec;border-radius:99px;padding:3px 10px;margin-bottom:8px}
.az-kind.soon{color:#8a5a00;background:#fff5e0}
/* when an investment is shown, dim the product-only chrome (cart, deals, stars) */
.azwin.is-investment .az-rate,.azwin.is-investment .az-bought,.azwin.is-investment .az-gal .strip,.azwin.is-investment .az-crumb{opacity:.35}
/* investment view: hide the product bottle art + show a neutral company tile (no detergent next to a stock) */
.azwin.is-investment .az-hero-img .bottle{display:none}
.azwin.is-investment .az-hero-img{align-items:center;justify-content:center;background:linear-gradient(180deg,#eef3ef,#e2ebe4)}
.azwin.is-investment .az-hero-img::after{content:"◔ company values";font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:#6b8275}

/* ---- slimmer source strip: drop the redundant header, calmer note ---- */
.srcband{margin-top:var(--s-4)}
.srcnote{margin-top:var(--s-3)}
.dim-sub{margin-top:var(--s-5)}
/* collapsed "nine dimensions" / "methodology" fold (Teo: "collapse these 2").
   The headline shows in the summary; the grid/detail opens on tap. */
.dim-fold{margin-top:var(--s-5)}
.dim-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.dim-fold>summary::-webkit-details-marker{display:none}
.dim-fold>summary .dim-sub{margin:0;display:inline}
.dim-fold>summary .dim-open{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--accent)}
.dim-fold>summary .dim-open::before{content:"+ "}
.dim-fold[open]>summary .dim-open::before{content:"– "}
.dim-fold>summary:hover .dim-open{text-decoration:underline}
.next-line{margin-top:var(--s-3);max-width:64ch;line-height:1.55}

/* =====================================================================
   GEN-Z FORWARD OVERRIDE LAYER (branch sf-genz, 2026-06-29)
   The decisive vibe pass. Loaded last so it wins the cascade. It reskins
   the existing structure — every demo ID/class is untouched, only styled —
   into something a 22-year-old screenshots: bold display type, saturated
   gradients, energy/motion, generous scale, and a story-format share card.
   ===================================================================== */

/* ---------- TYPE: bold, confident, oversized ---------- */
body{font-family:var(--sans)}
h1.hero-t,h3,.az-title{letter-spacing:-.03em}
h1.hero-t{
  font-family:var(--sans);
  font-weight:850;
  font-size:clamp(46px,8vw,92px);
  line-height:.98;letter-spacing:-.04em;max-width:15ch;
}
/* gradient-wash a key phrase in the headline (wrap in <span class="pop">) */
/* display:block breaks the headline onto a tidy second line — money emoji stays
   on line 1, the gradient phrase drops to line 2 (Teo: "squeeze this in 2 lines"). */
.pop{
  display:block;
  background:var(--grad-energy);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.pop-hot{
  background:var(--grad-hot);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
h3{font-family:var(--sans);font-weight:800;font-size:clamp(28px,4.4vw,44px);line-height:1.05;max-width:20ch}
.sec{
  font-weight:800;font-size:12.5px;letter-spacing:.22em;
  background:var(--grad-energy);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;display:inline-block;
}
.kicker{
  font-weight:800;letter-spacing:.22em;color:var(--pink);font-size:12.5px;
}
.sub,.hero .sub{font-family:var(--sans);font-size:clamp(18px,2.2vw,23px);color:var(--ink-soft);line-height:1.45;font-weight:500}
p.lead{font-family:var(--sans);color:var(--ink-soft);font-weight:500;font-size:18px}

/* ---------- NAV: brighter, energetic ---------- */
header.nav{background:rgba(246,245,255,.78);border-bottom:1px solid var(--line);backdrop-filter:saturate(160%) blur(14px)}
.brand .wm{font-family:var(--sans);font-weight:800;letter-spacing:-.02em}
nav.links a{font-family:var(--sans);font-weight:600}
nav.links a:hover{color:var(--pink)}

/* ---------- RIBBON: gradient energy bar ---------- */
.ribbon{background:var(--grad-energy);border-bottom:none;position:relative;overflow:hidden}
.ribbon::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);transform:translateX(-100%);animation:ribshine 6s ease-in-out infinite}
@keyframes ribshine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){.ribbon::after{animation:none;opacity:0}}
.ribbon .rib-q{color:#fff;font-weight:700;position:relative;z-index:1}
.ribbon .rib-cta{background:#0e0b1f;color:#fff;font-weight:800;position:relative;z-index:1}
.ribbon .rib-cta:hover{background:#000;transform:translateY(-1px)}

/* ---------- BUTTONS: punchy, gradient primary ---------- */
.btn{font-weight:800;border-radius:99px;letter-spacing:.01em;padding:14px 28px;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.btn-ink{background:var(--ink);color:#fff;box-shadow:0 8px 24px rgba(14,11,31,.22)}
.btn-ink:hover{background:#000;transform:translateY(-2px);box-shadow:0 12px 30px rgba(14,11,31,.30)}
.btn-grad{background:var(--grad-energy);color:#06210f;box-shadow:0 10px 28px rgba(0,196,106,.34)}
.btn-grad:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 14px 36px rgba(0,196,106,.42)}
.btn-hot{background:var(--grad-hot);color:#fff;box-shadow:0 10px 28px rgba(255,46,136,.34)}
.btn-hot:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 14px 36px rgba(255,46,136,.44)}
.btn-ghost{border:2px solid var(--line-2);color:var(--ink);font-weight:700}
.btn-ghost:hover{border-color:var(--pink);color:var(--pink)}

/* ---------- SECTION rhythm ---------- */
section:nth-of-type(even){background:linear-gradient(180deg,rgba(0,217,192,.06),rgba(255,255,255,0))}
section:nth-of-type(odd){background:linear-gradient(180deg,rgba(124,92,255,.05),transparent)}

/* ---------- PILLS / TAGS ---------- */
.pill{background:var(--accent-soft);color:#067a45;font-weight:700}
.uni-seg button.on{background:var(--ink)}
.az-kind{background:var(--accent-soft);color:#067a45;font-weight:800}
.az-kind.soon{background:#ffe9d4;color:#b3500f}

/* ---------- HERO SEARCH: bolder, gradient go-button ---------- */
.uni{border:2px solid var(--line-2);box-shadow:0 18px 44px rgba(124,92,255,.14);border-radius:99px}
.uni:focus-within{border-color:var(--accent);box-shadow:0 20px 50px rgba(0,196,106,.22)}
.uni input{font-weight:600}
.uni #uni-go{background:var(--grad-energy);color:#06210f;font-weight:800;box-shadow:0 6px 16px rgba(0,196,106,.30)}
.uni #uni-go:hover{filter:brightness(1.05);transform:translateY(-1px)}
.try-prod button.on{background:var(--ink);border-color:var(--ink)}
.try-prod button:hover{border-color:var(--accent);color:var(--accent)}
.uni-miss{color:var(--pink);font-weight:700}

/* ---------- THE LIVE SCORE WINDOW: glow + lift ---------- */
.hero-demo .azwin{box-shadow:0 40px 90px rgba(124,92,255,.20),0 0 0 1px var(--line);border-radius:18px}
.azwin{border-radius:18px}

/* the injected Spend Forward panel — energized, gradient header bar */
.bfp{border:1.5px solid #d7f3e4;border-radius:18px;background:linear-gradient(180deg,#ffffff,#f5fffb);box-shadow:0 14px 40px rgba(0,196,106,.14)}
.bfp-top{background:var(--grad-energy);border-bottom:none}
.bfp-top .bfp-wm{font-family:var(--sans);font-weight:800;color:#06210f}
.bfp-top .bfp-mark{filter:brightness(0) saturate(100%)}
.bfp-top .bfp-tag{background:rgba(255,255,255,.85);color:#067a45;font-weight:800}
.bfp-read .bfp-lab{color:var(--pink);font-weight:800}
.bfp-read .bfp-tier{font-family:var(--sans);font-weight:800}
.bfp-ring .ctr .n{font-family:var(--sans);font-weight:850}
/* the score ring gets a soft pulse so it reads "live" */
.bfp-ring svg{animation:ringpulse 3.4s ease-in-out infinite}
@keyframes ringpulse{0%,100%{filter:drop-shadow(0 0 0 rgba(0,196,106,0))}50%{filter:drop-shadow(0 0 7px rgba(0,196,106,.5))}}
@media(prefers-reduced-motion:reduce){.bfp-ring svg{animation:none}}
.bfp-alts .bfa-t{color:#067a45;font-weight:800}
.bfp-alts .bfa-num{font-family:var(--sans);font-weight:850;color:var(--accent)}
.bfp-alts .bfa-row{border:1.5px solid #e8e7f5}
.bfp-alts .bfa-row:hover{border-color:var(--accent)}
.bfp-actions .bfp-cta{background:var(--ink);border-radius:99px;font-weight:800}
/* honest no-data row — LOUD pink so the integrity reads as a feature, not a flaw */
.bfp-dim.nd .bd-v{color:var(--pink);font-weight:800}
.bfp-dim.nd .bd-t{background:repeating-linear-gradient(45deg,#ffe3ef,#ffe3ef 4px,#ffd0e3 4px,#ffd0e3 8px)}
.nodata{color:var(--pink);font-weight:800}

/* ---------- WEIGHT SLIDERS ---------- */
.try{border:1.5px solid var(--line);border-radius:18px;box-shadow:0 12px 30px rgba(124,92,255,.08)}
.try-row input[type=range]{accent-color:var(--pink)}
.try-h .live{background:var(--pink);color:#fff;font-weight:800}
.sliderrow input[type=range]{accent-color:var(--pink)}

/* ---------- SOURCE WALL: bright cells, brand-color names ---------- */
.srcwall{border-radius:16px;gap:1px}
.srcwall .src-cell{background:var(--card)}
.srcwall .src-cell:hover{background:#f3f1ff}
.srcwall .src-name{color:var(--violet);font-weight:800}

/* ---------- NINE-DIMENSION GRID: lively glyphs ---------- */
.dimgrid{border-radius:16px;overflow:hidden}
.dimcell .glyph{color:var(--accent)}
.dimcell:nth-child(3n+2) .glyph{color:var(--violet)}
.dimcell:nth-child(3n) .glyph{color:var(--pink)}
.dimcell .dsrc{color:var(--violet);font-weight:700}
.dimcell .dsrc::before{background:var(--violet)}

/* ---------- STEPS ---------- */
.row .n{
  font-family:var(--sans);font-weight:850;font-size:22px;width:auto;
  background:var(--grad-energy);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.lnk{color:var(--pink)}

/* =====================================================================
   THE SHARE CARD — the viral mechanic. Two formats:
   1) the existing 1:1 (.sharecard) reskinned to the hot gradient
   2) NEW story format (.sharecard.story) — 9:16, 1080×1920-friendly, the
      thing that goes to a TikTok / IG story. Big verdict, big score, value
      chips, and Spend Forward branding. This is the hook.
   ===================================================================== */
.sharecard{
  background:var(--grad-share);
  border-radius:28px;
  box-shadow:0 30px 80px rgba(255,46,136,.30),0 10px 30px rgba(124,92,255,.24);
  position:relative;overflow:hidden;
}
/* subtle animated grain/shine sweep so the card feels alive on screen */
.sharecard::after{
  content:"";position:absolute;inset:-40%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.10) 40deg, transparent 120deg);
  animation:cardspin 14s linear infinite;pointer-events:none;
}
@media(prefers-reduced-motion:reduce){.sharecard::after{animation:none;opacity:.4}}
@keyframes cardspin{to{transform:rotate(360deg)}}
.sharecard>*{position:relative;z-index:1}
.sharecard .sc-wm{font-family:var(--sans);font-weight:800}
.sharecard .sc-kick{color:rgba(255,255,255,.85);font-weight:800;letter-spacing:.2em}
.sharecard .sc-title{font-family:var(--sans);font-weight:850;letter-spacing:-.02em}
.sharecard .sc-score .sc-n{font-family:var(--sans);font-weight:850}
.sharecard .sc-score .sc-of{color:rgba(255,255,255,.85);font-weight:700}
.sharecard .sc-bar .b-n{color:rgba(255,255,255,.92);font-weight:700}
.sharecard .sc-bar .b-f{background:linear-gradient(90deg,#c6ff3e,#ffffff)}
.sharecard .sc-foot{color:rgba(255,255,255,.88);font-weight:700}

/* --- STORY FORMAT 9:16 — the TikTok / IG-story card --- */
.sharecard.story{
  aspect-ratio:9/16;max-width:330px;
  padding:42px 34px 38px;
  display:flex;flex-direction:column;gap:0;justify-content:flex-start;
}
.sharecard.story .sc-top{margin-bottom:auto}
.sharecard.story .sc-kick{font-size:12px;margin-top:6px}
.sharecard.story .sc-title{font-size:40px;line-height:1.02;margin-top:10px}
.sharecard.story .sc-score{margin-top:18px;align-items:baseline}
.sharecard.story .sc-score .sc-n{font-size:96px;line-height:.85}
.sharecard.story .sc-score .sc-of{font-size:18px}
.sharecard.story .sc-verdict{
  display:inline-block;align-self:flex-start;margin-top:16px;
  font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.02em;
  color:#06210f;background:var(--lime);border-radius:99px;padding:7px 16px;
  box-shadow:0 6px 18px rgba(198,255,62,.4);
}
.sharecard.story .sc-bars{margin-top:24px;gap:10px}
.sharecard.story .sc-bar{grid-template-columns:104px 1fr}
.sharecard.story .sc-bar .b-n{font-size:12px}
.sharecard.story .sc-bar .b-t{height:9px}
.sharecard.story .sc-foot{margin-top:auto;padding-top:24px;font-size:12px}
.sharecard.story .sc-hash{font-family:var(--sans);font-weight:850;color:#fff}

/* the "share your score" energy moment on /score */
.sharestage{
  display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center;
  margin-top:var(--s-4);padding:34px;border-radius:24px;
  background:linear-gradient(135deg,rgba(124,92,255,.08),rgba(0,217,192,.06));
  border:1.5px solid var(--line);
}
@media(max-width:760px){.sharestage{grid-template-columns:1fr;justify-items:center;text-align:center}}
.sharestage .ss-copy h3{margin-bottom:10px}
.sharestage .ss-copy p{color:var(--muted);font-weight:500}
.sharestage .ss-fmt{display:inline-flex;gap:8px;margin-top:14px}
.sharestage .ss-fmt button{
  font-family:var(--sans);font-weight:800;font-size:12.5px;cursor:pointer;
  border:2px solid var(--line-2);background:var(--card);color:var(--muted);
  border-radius:99px;padding:8px 16px;transition:.14s;
}
.sharestage .ss-fmt button.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* page-1 teaser: lift the card, hot CTA */
.shareteaser .sharecard{box-shadow:0 26px 64px rgba(255,46,136,.26),0 8px 24px rgba(124,92,255,.20)}

/* ---------- /score preview card (.scorecard, the ring-rating card) ---------- */
.scorecard{background:var(--ink);border-radius:22px;box-shadow:0 24px 60px rgba(124,92,255,.22)}
.scorecard .big{font-family:var(--sans);font-weight:850}
.scorecard .label{color:var(--lime);font-weight:800;letter-spacing:.18em}
.scorecard .bar .fill{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.scorecard .cardcta{background:var(--grad-energy);color:#06210f;font-weight:800;border-radius:99px}
.scorecard .rating .read b{font-family:var(--sans);font-weight:850}
.sliderrow label{font-weight:700}
.sliderrow .val{color:var(--pink);font-weight:800}

/* footer */
footer.ft{font-family:var(--sans)}
footer.ft a{color:var(--accent);font-weight:600}
footer.ft .ft-social a:hover{color:var(--pink);border-color:var(--pink)}

/* respect reduced motion globally for the button lifts */
@media(prefers-reduced-motion:reduce){
  .btn,.uni #uni-go,.ribbon .rib-cta{transition:none}
}

/* ============================================================
   DRAFT — product-first evaluation layout (Teo SF thread TwVZQbD).
   FIRST CUT, flagged for review. Search stays at the top; below it a
   sliders rail + a three-up stage: LEFT this product's score · CENTER the
   product · RIGHT your personal score (shareable). Retailer surfaces are
   demoted to a strip at the bottom. Reuses the live engine's element IDs.
   ============================================================ */
/* Round-2 3-pane: the eval is now a vertical stack — product-to-assess on top,
   then LEFT score · MIDDLE dial · RIGHT shareable, then alternatives below. */
.eval{margin-top:var(--s-5)}
/* PRODUCT / COMPANY TO ASSESS (above the panes) */
.eval-assess{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;padding-bottom:16px;margin-bottom:16px}
.eval-assess .assess-row{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center;padding:0 16px}
@media(max-width:680px){.eval-assess .assess-row{grid-template-columns:1fr}}
.eval-assess .az-gal{display:block;padding:14px 0 0}
.eval-assess .az-hero-img{height:168px;margin-bottom:10px}
.eval-assess .az-gal .strip{flex-direction:row;justify-content:center;gap:7px}
.eval-assess .assess-meta{padding-top:14px;min-width:0}
.eval-assess .az-kind{display:inline-block}
.eval-assess .az-title{margin-top:8px}
.eval-pick{font-family:var(--sans);font-size:11px;color:var(--faint);margin-top:10px;line-height:1.5}
/* TOP BAND: product/company/stock summary (left) + this item's score (right) —
   Teo SF thread YmnK-vx9DQoz ("your score to the right"). */
/* 2×2 EVAL TILES — even grid: row 1 [the product · your score],
   row 2 [your values dial · your value profile + share]. Equal-width columns
   so the four tiles read as a clean 2×2 (Teo SF thread mhs1ebTS7WCx). */
.eval-top{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;margin-bottom:16px}
@media(max-width:900px){.eval-top{grid-template-columns:1fr}}
.eval-top .eval-assess{margin-bottom:0}
.eval-top .eval-assess .assess-row{grid-template-columns:150px 1fr;gap:14px}
@media(max-width:520px){.eval-top .eval-assess .assess-row{grid-template-columns:1fr}}
/* Bottom row of the 2×2: (left) the values dial · (right) your value profile
   with the shareable score card folded in — Teo SF threads 5ki_jMI4kPYH
   (drop the standalone 9-dimensions tile) + qzsPuwUNbVDg (merge Share into the
   value-profile tile above it). */
.eval-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
@media(max-width:760px){.eval-grid{grid-template-columns:1fr}}
.eval-col{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.eval-cap{font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:13px 16px 0}
.eval-left .bfp{border:none;border-radius:0;box-shadow:none;margin-top:8px}
/* MIDDLE = the values dial */
.eval-mid{background:var(--card)}
.eval-mid .mid-card{padding:10px 16px 16px}
.eval-mid .try-grid{grid-template-columns:1fr;gap:9px;margin-top:12px}
.eval-mid .try-row{grid-template-columns:1fr 78px 26px}
/* alternatives strip, below the panes (full width) */
.eval-alts{margin-top:16px}
.eval-alts .bfp-alts{border-top:none;margin-top:0;padding-top:0}
.eval-right{background:var(--card)}
.pcard{margin:10px 14px 0;border-radius:16px;padding:16px;color:#fff;background:var(--grad-energy);box-shadow:0 14px 34px rgba(124,92,255,.22)}
.pcard .pc-top{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:800;font-size:13px;color:#06210f}
.pcard .pc-top .sc-mark{width:18px;height:18px;filter:brightness(0) saturate(100%)}
.pcard .pc-kick{margin-top:12px;font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(6,33,15,.7)}
.pcard .pc-title{font-family:var(--sans);font-weight:850;font-size:21px;line-height:1.05;color:#06210f;margin-top:3px}
.pcard .pc-score{font-family:var(--sans);font-weight:850;font-size:38px;color:#06210f;margin-top:8px;line-height:1}
.pcard .pc-score small{font-size:15px;font-weight:700;color:rgba(6,33,15,.65);margin-left:4px}
.pcard .pc-bars{margin-top:12px;display:grid;gap:7px}
.pcard .pc-bar{display:grid;grid-template-columns:74px 1fr;align-items:center;gap:9px}
.pcard .pc-bar .b-n{font-family:var(--sans);font-size:11px;font-weight:700;color:#06210f}
.pcard .pc-bar .b-t{height:7px;border-radius:99px;background:rgba(6,33,15,.18);overflow:hidden}
.pcard .pc-bar .b-f{display:block;height:100%;border-radius:99px;background:#06210f}
.pcard .pc-ill{display:inline-block;margin-top:12px;font-family:var(--sans);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#06210f;background:rgba(255,255,255,.7);border-radius:99px;padding:3px 9px}
.eval-note{font-family:var(--sans);font-size:11px;color:var(--faint);padding:10px 16px 16px;line-height:1.55}
.eval-note b{color:var(--ink-soft)}
/* The shareable score CARD (badge) + its controls, folded into the value-profile
   tile (Teo SF thread qzsPuwUNbVDg "merge Share with the value profile above").
   Reuses .sharestage stacked vertically: card preview on top, controls below. */
.eval-right .share-tile{padding:6px 16px 18px}
.eval-right .sharestage{grid-template-columns:1fr;gap:0;justify-items:stretch;text-align:left}
.eval-right .sharecard.story{max-width:320px;margin:6px auto}
.eval-right .ss-copy{margin-top:16px}
.eval-right .ss-copy h3{font-size:19px;line-height:1.15;margin-bottom:6px}
.eval-right .ss-copy p{font-size:12.5px;color:var(--muted);font-weight:500}
.resell{font-family:var(--sans);font-size:11.5px;color:var(--ink-soft);margin-top:15px;padding:12px 13px;border:1px dashed var(--line);border-radius:11px;background:var(--paper);line-height:1.5}
.resell b{color:var(--ink)}
.resell .ill{color:var(--muted);font-style:italic}

/* retailer strip, demoted to the bottom */
.retailers{margin-top:30px;border-top:1px solid var(--line);padding-top:24px}
.ret-h{font-family:var(--sans);font-size:14px;font-weight:800;color:var(--ink-soft)}
.ret-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:13px}
.ret-chip{font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:7px 15px;display:inline-flex;gap:8px;align-items:center}
.ret-chip b{color:var(--ink);font-weight:700}
.ret-chip .live-dot{font-size:10px;font-weight:800;letter-spacing:.04em;color:#1f8f6b;text-transform:uppercase}
.ret-chip .soon{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8a5a00}
.azwin.slim{margin-top:16px;max-width:760px}
.azwin.slim .ret-foot{font-family:var(--sans);font-size:11.5px;color:var(--faint);padding:11px 14px;background:#fff;line-height:1.5}

/* ============================================================
   DRAFT — stocks/investment mock variant (Teo SF thread Gb3nWTZ9jQEz:
   "different mock is needed for stocks not amazon"). Default state is the
   retail product view; when the engine adds .is-investment to #score-mock,
   the center swaps the product shot for a ticker + sparkline, and the bottom
   strip swaps the retailer chips/chrome for a brokerage framing. FIRST CUT.
   ============================================================ */
.stock-vis{display:none;margin:14px 0 0;border-radius:14px;padding:18px 16px;text-align:center;
  background:linear-gradient(180deg,#0f1b2e,#16263f);color:#cfe0ff;box-shadow:inset 0 0 0 1px rgba(120,160,255,.18)}
.stock-vis .sv-ticker{font-family:var(--sans);font-weight:850;font-size:30px;letter-spacing:.04em;color:#eaf2ff}
.stock-vis .sv-sub{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.05em;color:#9fc1ff;margin-top:3px}
.stock-vis .sv-spark{display:block;width:100%;height:56px;margin:10px 0 0;color:#5bd6a6}
.stock-vis .sv-tag{font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8fb3ff;margin-top:8px}
/* privately-held company: no public market, so no price-like chart at all */
.stock-vis.is-private .sv-spark{display:none}
.stock-vis.is-private{padding-bottom:20px}
.ret-invest{display:none}
/* investment mode swaps retail <-> brokerage framing */
#score-mock.is-investment .eval-assess .az-gal{display:none}
#score-mock.is-investment .stock-vis{display:block}
#score-mock.is-investment .ret-retail{display:none}
#score-mock.is-investment .ret-invest{display:block}
#score-mock.is-investment .ret-row.ret-invest{display:flex}
#score-mock.is-investment .azwin.slim .az-top{display:none}
/* in investment mode the center is a company look-up, not an Amazon product —
   drop the product-only retail cruft (star ratings, per-unit price, resale) so
   the mock reads as a brokerage holding, not half-Amazon */
#score-mock.is-investment .eval-assess .az-rate{display:none}
#score-mock.is-investment .eval-assess .az-price-c .sm{display:none}
#score-mock.is-investment .resell{display:none}

/* ============================================================
   SF round-3 comment resolutions (session/sf-r3)
   ============================================================ */

/* Hero h1 emoji accents (SF thread mOFFg9RbKZ1v) — restrained: smaller than the
   text, slightly dimmed, non-selectable so they read as accents not words. */
.hero-t .hero-emo{
  font-size:.62em;vertical-align:.06em;opacity:.9;
  -webkit-user-select:none;user-select:none;
  /* sits inside .pop (gradient text-clip) — reset fill so the emoji keeps its
     own color instead of being clipped to transparent */
  -webkit-text-fill-color:initial;color:initial;background:none;
}

/* "See the full methodology" link under the now-open nine-dimension grid
   (SF thread 7RCJc6iOyog6). */
.dim-fold .dim-more{margin:18px 2px 2px;font-family:var(--sans);font-size:14px}

/* Personal-score card: now click-to-expand (SF thread Wb3XlQQ7QZGp). */
.pcard{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.pcard:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(124,92,255,.30)}
.pcard:focus-visible{outline:3px solid #fff;outline-offset:3px}
.pcard .pc-expand{
  display:inline-block;margin-top:12px;margin-left:8px;font-family:var(--sans);
  font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#06210f;background:rgba(255,255,255,.7);border-radius:99px;padding:3px 9px;
}

/* Hovering pane / overlay for the expanded personal card. */
.pcard-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px}
.pcard-overlay[hidden]{display:none}
.pcard-overlay .pco-backdrop{position:absolute;inset:0;background:rgba(14,11,31,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pcard-overlay .pco-dialog{
  position:relative;z-index:1;width:min(440px,92vw);max-height:92vh;overflow:auto;
  background:var(--card);border-radius:22px;padding:20px 20px 22px;
  box-shadow:0 40px 90px rgba(14,11,31,.45);animation:pcoIn .18s ease both;
}
@keyframes pcoIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.pcard-overlay .pco-x{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border:none;border-radius:99px;
  background:rgba(14,11,31,.06);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;
}
.pcard-overlay .pco-x:hover{background:rgba(14,11,31,.12)}
.pcard-overlay .pco-card .pcard,.pcard-overlay .pco-card .pco-snapshot{
  margin:0;cursor:default;transform:none;box-shadow:0 14px 34px rgba(124,92,255,.22);
}
.pcard-overlay .pco-card .pco-snapshot .pc-title{font-size:26px}
.pcard-overlay .pco-card .pco-snapshot .pc-score{font-size:46px}
.pcard-overlay .pco-cta{display:block;text-align:center;margin-top:16px}
.pcard-overlay .pco-note{margin-top:10px;text-align:center;font-family:var(--sans);font-size:12px;color:var(--muted)}
body.pco-open{overflow:hidden}

/* The share-card MODAL was removed — the card is inline now (Teo SF YmnK-vx9DQoz +
   fV3Zxmg8jLB7). Its .pco-share overrides were deleted; inline layout lives in the
   .share-inline / .sharestage rules above. .pcard-overlay is still used by #alt-overlay. */

/* Teo SF threads 0WlQDvaQZvIH + Z6blLLicC2B3 — "all visible without scrolling,
   none of the tiles should be scrollable." The four eval tiles used to be pinned
   to a fixed 540px height with overflow:auto, which forced an internal scrollbar
   whenever content ran taller. That fixed height is unpinned: each tile now sizes
   to its own content (no inner scroll, nothing clipped). Equal widths come from the
   1fr 1fr columns, and align-items:stretch on .eval-top / .eval-grid keeps the two
   tiles in each row the same height, so they still read as an even 2×2 at desktop.
   Below the grid breakpoints (900px / 760px) the columns collapse to a single
   column and the tiles stack. */
.eval-top > .eval-assess,
.eval-top > .eval-left,
.eval-grid > .eval-mid,
.eval-grid > .eval-right{height:auto;overflow:visible}
.eval-top > .eval-assess{margin-bottom:0}

/* Teo SF thread vxVAP2k50Xx_ — lighter, scannable About layout (privacy.html). */
.about-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px;max-width:760px}
.about-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:18px}
.about-card h3{margin:0 0 6px;font:700 15px var(--sans);color:var(--ink)}
.about-card p{margin:0;font:400 13.5px/1.55 var(--sans);color:var(--ink-soft)}
@media(max-width:560px){.about-cards{grid-template-columns:1fr}}

/* A11y: visible keyboard-focus indicator across all interactive elements.
   Uses the brand purple, which clears WCAG 2.4.11 non-text 3:1 contrast on
   both the light page and the dark cards. Pointer clicks (:focus without
   -visible) stay unchanged, so the outline only shows for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
input[type="range"]:focus-visible{
  outline:3px solid #7c5cff;
  outline-offset:2px;
  border-radius:4px;
}