:root{
    --navy:#152134; --navy2:#1d2f4d;
    --paper:#F7F6F3; --surface:#FFFFFF; --hairline:#E2E0DA; --ink-60:#5A625E; --ink-40:#6B716D; --green-dark:#23D17F; --green-light:#0E7C5A; --wordmark-fg:#EEF2F8; --wordmark-mid:#B4BECB;
    --blue:#2f74d0; --blue-d:#1e5cad; --orange:#ff7a1e; --yellow:#ffc63a;
    --teal:#0fa89b; --teal-d:#0c8f84; --teal-bg:#e6f9f6;
    --red:#ef4b45; --red-bg:#fdeceb;
    --coral:#ff5a2c; --coral-d:#e8481d; --green2:#17b26a; --red2:#f04e36; --good:#2f74d0; --good-bg:#eaf2ff;
    --mint:#24D17E; --alert:#FF5A2C; /* brand-kit accents (mint = the check; alert = site theme / warnings) */
    /* brand-kit verdict colors — bright brand hues (BUY #4ADE80 · WAIT #FBBF24 · SKIP #7FA0FF · FAIR #C5CCD6)
       for dark/solid fills; the --buy/--wait/--skip/--fair tokens below are the WCAG-accessible shades used as
       text/borders on the light UI. */
    --buy-solid:#4ADE80; --wait-solid:#FBBF24; --skip-solid:#7FA0FF; --fair-solid:#C5CCD6;
    --bg:#F5F5F7; --paper:#fbfaf6; --paper2:#f3eee4; --card:#ffffff; --ink:#0E1A2B; --ink2:#48546A; --ink3:#646b78; --line:#e6ebf2; --hline:#ece7dd; --mist:#f5f6fa; /* --ink is brand-kit ink; --ink3 kept at WCAG AA (4.5:1) on #fff and #F5F5F7 */
    --buy:#0F9D57; --buy-bg:#E4F8EC; --buy-bd:#B4E8C8;
    /* Same hue, dark enough for WHITE TEXT to clear AA (4.70:1 vs #0F9D57's 3.51). Used only where
       the green is a background carrying white type — never for a verdict stamp, which keeps --buy. */
    --buy-deep:#0B7A44;--wait-deep:#8A6304;--coral-deep:#C93C0D;--teal-deep:#0D8279;--skipred-deep:#C42121;--orange-deep:#B4530A;--mint-deep:#0B7A44;
    /* Ink for text ON the tint. The tokens above stay put: --buy alone is used 90 times,
       including as a background, so darkening it to pass contrast here would shift the
       brand everywhere else. 4.66:1 and 4.68:1, same hue. */
    --buy-ink:#007E43; --wait-ink:#8E6500;
    /* Ink for text ON brand teal. White measured 2.49:1 on #14B8A6 — the teal is the brand and
       stays put (§1), so the LABEL moves. 5.81:1, and the same pairing .sf-sgo / .hvw-cta /
       .bm-cta already use on that fill. Mirrors WIAPP.onPrimary. */
    --teal-ink:#042F2E;
    --wait:#B5820A; --wait-bg:#FDF2CE; --wait-bd:#F5D88E;
    --skip:#415CCA;   /* was #4A67D6 — 4.36:1 on --skip-bg, under the 4.5 floor */ --skip-bg:#EBEFFE; --skip-bd:#C4D0FB;
    --fair:#5D6675; --fair-bg:#EDF0F4; --fair-bd:#D3DAE3;
    /* P2 type + space ladder (ink/mint system) — Fraunces display · DM Sans UI · JetBrains meta · Inter body */
    /* rem so Dynamic Type / system text size scales the site ladder (a11y). */
    --fs-micro:0.6875rem; /* was 10.5px — raised to 11pt floor */
    --fs-meta:0.78125rem; /* 12.5 */
    --fs-body:0.90625rem; /* 14.5 — site body; NOT the app --fs-body */
    --fs-ui:0.9375rem; /* 15 — callout; --fs-card aliases this */
    --fs-card:var(--fs-ui);
    --fs-sec:clamp(1.375rem,2.4vw,28px);
    --fs-display:clamp(2.25rem,5.2vw,64px);
    --wm-lg:26px; --wm-md:20px; --wm-sm:16px;
    /* San Francisco, the only way it can legitimately be used on the web. Apple's licence does not
       permit serving SF as a webfont, so this reaches the LOCAL face through -apple-system /
       system-ui; Apple devices get SF Pro Display and Text (the renderer picks the optical size by
       point size on its own), everything else falls down the stack. Do not add a @font-face for
       SF — a self-hosted copy would be a licence breach, not a nicety. */
    --sf-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Helvetica Neue",Arial,sans-serif;
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
    --chrome-pad-y:12px; --chrome-pad-y-scrolled:8px;
    --card-r:14px; --card-sh:0 1px 2px rgba(14,26,43,.05),0 8px 20px -16px rgba(14,26,43,.18);
    --page-max:1280px; --page-gutter:40px;
    /* Wide feed column — matches sticky header/tabs (1720) so All Deals isn't stranded in a 1280 island. */
    --page-max-wide:1720px;
  }
*{box-sizing:border-box;margin:0;padding:0}
/* Root stays browser-default 16px. Do NOT put font:-apple-system-body on html —
     rem powers the site AND WiApp intro banners; iOS default Body is ~17pt,so that
     one line enlarged every rem surface (owner,2026-08-14). Dynamic Type for WiApp
     must be scoped later (em on .wi-app),not via the document root. */
  html{font-size:100%;-webkit-text-size-adjust:100%}
/* WKWebView: % height on .wi-app.wi-shell was 0 because #root collapsed (fixed
     children don't give it height). Fill the viewport so the navy header + feed
     can actually paint (iOS blank-gray screen,15 Aug). */
  html.cap-native,html.cap-native body,html.cap-native #root,html.wi-preview,html.wi-preview body,html.wi-preview #root{height:100%;max-height:100%;overflow:hidden;overscroll-behavior:none}
html.cap-native body,html.wi-preview body{background:#0E1A2B}
/* App preview paints a dark body. Homepage SSR (main + footer) is light-theme HTML in #root
     for SEO — if React is slow or fails,hiding only <main> left a blank navy page with the
     footer floating at the top (Safari QA,16 Aug). Hide ALL SSR siblings until WiApp mounts
     (.wi-stage). :has() is Safari 15.4+. */
  html.wi-preview #root > main,html.wi-preview #root > footer{display:none!important}
/* Browser / mobile-web interim — replaces the bare “Loading worthitforyou…” text
     that sat on navy until WiApp mounted (owner: loading screen still broken,21 Aug).
     Real HTML in #wi-interim so the wordmark can use the teal .fy lockup. */
  #wi-interim{display:none}
html.wi-preview #wi-interim{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
    position:fixed;inset:0;z-index:2;background:#0E1A2B;color:#fff;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
    pointer-events:none;
  }
html.wi-preview:has(.wi-stage) #wi-interim,html.wi-live #wi-interim{display:none!important}
html.wi-preview:has(.dg) #wi-interim,html.wi-preview:has(.lc-scope) #wi-interim,html.wi-preview:has(.hbm) #wi-interim,html.wi-preview:has(.wr-root) #wi-interim,html.wi-preview:has(.wi-grid-page) #wi-interim,html.wi-preview:has(.hm-home) #wi-interim{display:none!important}
html.wi-preview:has(.dg),html.wi-preview:has(.dg) body,html.wi-preview:has(.dg) #root,
html.wi-preview:has(.hbm),html.wi-preview:has(.hbm) body,html.wi-preview:has(.hbm) #root,
html.wi-preview:has(.lc-scope),html.wi-preview:has(.lc-scope) body,html.wi-preview:has(.lc-scope) #root,
html.wi-preview:has(.wr-root),html.wi-preview:has(.wr-root) body,html.wi-preview:has(.wr-root) #root,
html.wi-preview:has(.wi-grid-page),html.wi-preview:has(.wi-grid-page) body,html.wi-preview:has(.wi-grid-page) #root,
html.wi-preview:has(.hm-home),html.wi-preview:has(.hm-home) body,html.wi-preview:has(.hm-home) #root{
  height:auto;max-height:none;overflow:visible;overscroll-behavior:auto}
#wi-interim .boot-logo.logo2a{font-weight:800;font-size:clamp(1.65rem,6vw,2.1rem);letter-spacing:-.04em;line-height:1}
.boot-logo{/* compound with .logo2a; keep class token for offgate / interim */}
#wi-interim .wi-interim-eye{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
    letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.55)}
#wi-interim .wi-interim-dot{width:6px;height:6px;border-radius:50%;background:#2FD4BC;flex:none;
    animation:wiInterimPulse 1.6s ease-in-out infinite}
  @keyframes wiInterimPulse{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
  @media (prefers-reduced-motion:reduce){#wi-interim .wi-interim-dot{animation:none;opacity:.85}}
/* wr-root design preview unlock */
html:has(.wr-root),html:has(.wr-root) body,html:has(.wr-root) #root,
html.wr-design,html.wr-design body,html.wr-design #root{height:auto;max-height:none;overflow:visible}
html:has(.wr-root) body,html.wr-design body{background:#fff}
html.boot-seen #boot{display:none!important}
/* overflow-x:clip (not hidden) — clips horizontal overflow WITHOUT making <body> a scroll
     container,which is what lets position:sticky (top nav + storefront search/tabs) actually pin. */
  body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.45;overflow-x:clip}
.mono{font-family:'JetBrains Mono',monospace}
button{font-family:inherit}
/* ── nav ── */
  /* top = nav + hero on one themed surface (sunset / dark) */
  .top{position:relative;color:#fff;overflow:hidden;transition:background .4s ease}
.top.sunset{background:linear-gradient(128deg,#FF9138 0%,#FF5E2E 44%,#F23C7C 100%)}
.top.dark{background:radial-gradient(96% 130% at 12% 0%,#1C2C4C,#0B1220 62%),radial-gradient(78% 108% at 95% 2%,rgba(255,90,44,.5),rgba(196,55,158,.3) 42%,transparent 66%)}
.nav{position:relative;z-index:2}
.nav-in{display:flex;align-items:center;gap:14px;padding:15px 34px;max-width:1720px;margin:0 auto;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none}
.logomark{width:clamp(46px,6vw,58px);height:clamp(46px,6vw,58px);flex:none}
.word{font-weight:850;letter-spacing:-.035em;font-size:clamp(30px,5vw,42px);color:#fff;line-height:1}
.top.sunset .word .fu{color:#FFE24A}
.top.dark .word .fu{color:#FF7A3D}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:15px}
.nav-links .hiw{color:rgba(255,255,255,.9);font-size:14px;font-weight:600;cursor:pointer}
.nav-links .hiw:hover{color:#fff}
.tglicon{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.tglicon:hover{background:rgba(255,255,255,.28)}
.tglicon svg{width:20px;height:20px}
.navbtn{color:#fff;font-weight:700;font-size:14px;padding:9px 16px;border-radius:9px;border:none;cursor:pointer}
.top.sunset .navbtn{background:var(--ink)}
.top.dark .navbtn{background:var(--coral)}
/* ── hero (themed: sunset / dark) ── */
  .hero{position:relative;z-index:1;padding:28px 0 44px;text-align:center}
.herowrap{max-width:1720px;margin:0 auto;padding:0 34px}
.hero-in{max-width:880px;margin:0 auto}
.hero-h1{font-size:clamp(38px,6.6vw,66px);line-height:1;letter-spacing:-.035em;font-weight:850;margin:0 0 12px;color:#fff}
.top.sunset .hero-h1{text-shadow:0 4px 22px rgba(120,20,60,.24)}
.top.sunset .hero-h1 .hl{color:#FFEC5C}
.top.dark .hero-h1 .hl{background:linear-gradient(92deg,var(--coral),#FF9D4D);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:16px;color:rgba(255,255,255,.92);max-width:none;margin:0 auto 24px;line-height:1.5}
.lead b{color:#fff;font-weight:800}
/* the meaningful banner: BUY vs SKIP showdown */
  .showdown{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin:0 auto 24px}
.pcard{background:#fff;border-radius:16px;padding:14px;width:244px;text-align:left;position:relative}
.pcard.win{outline:2px solid var(--buy);box-shadow:0 20px 44px rgba(20,40,30,.26)}
.pcard.fake{outline:2px solid var(--red2);box-shadow:0 20px 44px rgba(60,10,30,.24)}
.pthumb{width:100%;height:78px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:40px;margin-bottom:10px}
.pcard.win .pthumb{background:var(--buy-bg)}
.pcard.fake .pthumb{background:#fdece9}
.pname{font-weight:800;font-size:13.5px;color:var(--ink)}
.pprice{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink2);margin-top:3px}
.pprice s{color:var(--ink3)}
.stamp{position:absolute;top:10px;right:10px;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:13.5px;padding:5px 12px;border-radius:9px;transform:rotate(4deg)}
.stamp.buy{background:var(--buy);color:#fff}
.stamp.skip{background:var(--red2);color:#fff}
.ptag{margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700}
.pcard.win .ptag{color:var(--buy)}
.pcard.fake .ptag{color:var(--red2)}
.search{display:flex;background:#fff;border-radius:13px;padding:6px;box-shadow:0 16px 40px rgba(20,20,40,.26);max-width:720px;margin:0 auto;text-align:left}
.search svg{align-self:center;color:#9aa2b1;margin-left:11px;flex:none}
.search input{flex:1;border:none;outline:none;padding:13px 12px;font-size:14.5px;color:var(--ink);border-radius:8px;background:transparent}
.search .btn{color:#fff;font-weight:800;font-size:14.5px;padding:0 22px;border-radius:9px;border:none;cursor:pointer;white-space:nowrap}
.top.sunset .search .btn{background:var(--ink)}
.top.dark .search .btn{background:var(--coral)}
.scanbtn{margin:15px auto 0;display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.15);border:1.6px solid rgba(255,255,255,.5);color:#fff;font-weight:700;font-size:14px;padding:11px 20px;border-radius:12px;cursor:pointer;transition:.15s}
.scanbtn:hover{background:rgba(255,255,255,.26)}
.scanbtn .scanico{display:flex}
.scanbtn .scanico svg{width:20px;height:20px}
.scantag{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;background:#fff;color:var(--ink);padding:2px 7px;border-radius:5px}
/* ── how-it-works steps ── */
  .how{padding:52px 0 6px}
.kicker{text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8090a6;font-weight:700;margin-bottom:9px}
.how-h{text-align:center;font-size:30px;letter-spacing:-.02em;font-weight:800;margin-bottom:10px}
.how-sub{text-align:center;color:var(--ink3);font-size:14px;max-width:560px;margin:0 auto 34px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:#f7f9fc;border:1px solid #e7ecf2;border-radius:16px;padding:24px}
.step .n{width:34px;height:34px;border-radius:9px;background:var(--blue-d);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.step h3{font-size:17px;margin-bottom:6px}
.step p{color:var(--ink2);font-size:14px}
.vchips{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.vchip{padding:10px 18px;border-radius:12px;font-weight:800;font-size:14px}
/* ── site footer (navy) ── */
  .site-foot{background:var(--navy);color:#c7d3e6;padding:32px 0 26px;margin-top:50px}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;max-width:1180px;margin:0 auto;padding:0 22px}
.foot-brand{display:flex;align-items:center;gap:9px}
.foot-brand svg{width:28px;height:28px}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-links a{color:#c7d3e6;font-size:13px;cursor:pointer}
.foot-links a:hover{color:#fff}
.foot-note{font-size:11.5px;color:#7688a8;margin:16px auto 0;line-height:1.6;max-width:1180px;padding:0 22px}
.foot-note b{color:#9fb0cc}
/* ── header ── */
  .top{background:var(--blue);color:#fff;padding:16px 24px 0}
.topbar{display:flex;align-items:center;gap:18px;max-width:1180px;margin:0 auto}
.logo{display:flex;align-items:center;gap:9px;white-space:nowrap}
  /* (old gradient-tile logomark removed — new twin-circle SVG logo is styled at the nav rule) */
  @keyframes lgdraw{to{stroke-dashoffset:0}}
  @keyframes lgredraw{0%,86%{stroke-dashoffset:0}90%{stroke-dashoffset:20}100%{stroke-dashoffset:0}}
  @keyframes lgshine{0%,55%{transform:translateX(-130%)}78%,100%{transform:translateX(130%)}}
.logotext{font-weight:900;font-size:22px;letter-spacing:-.02em}
.logotext .lo4{color:#e0402f}
  @media (prefers-reduced-motion:reduce){.logomark .chk{animation:lgdraw .01s forwards}.logomark::after{display:none}}
.searchwrap{flex:1;display:flex;align-items:center;background:#fff;border-radius:11px;padding:4px 4px 4px 14px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.searchwrap svg{flex:none;color:#9aa2b1}
.searchwrap input{flex:1;border:none;outline:none;font-size:15px;padding:11px 10px;color:var(--ink);background:transparent}
.askbtn{background:var(--orange);color:#fff;border:none;border-radius:9px;padding:11px 18px;font-weight:700;font-size:14.5px;cursor:pointer;white-space:nowrap}
.askbtn:hover{filter:brightness(1.05)}
.howlink{color:#fff;font-weight:600;font-size:14px;opacity:.92;white-space:nowrap;cursor:pointer;text-decoration:none}
.tabs{display:flex;gap:26px;max-width:1180px;margin:14px auto 0;overflow-x:auto}
.tab{background:none;border:none;color:#dfe4f7;font-weight:600;font-size:15px;padding:10px 0 14px;cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent}
.tab.on{color:#fff;border-bottom-color:var(--yellow)}
/* ── body ── */
  .wrap{max-width:1720px;margin:0 auto;padding:26px 40px 80px}
.herorow{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.h1{font-size:30px;font-weight:800;letter-spacing:-.02em}
.sub{font-size:15px;color:var(--ink2);margin-top:8px}
.sub b{color:var(--ink)}
.sub .red{color:#d64533;font-weight:700}
.howscore{display:inline-block;margin-top:8px;font-size:14px;color:var(--blue);font-weight:600;text-decoration:underline;cursor:pointer}
.noaff{border:1px solid #cfd6e4;background:#fff;color:var(--blue);font-weight:700;font-size:13px;border-radius:999px;padding:8px 14px;white-space:nowrap}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:8px 15px;margin:14px 0 2px;font-size:14px}
.trust-main{color:var(--ink2)}
.trust-main b{color:var(--skip)}
.trust-stat{color:var(--ink2);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13px}
.trust-stat b{color:var(--ink)}
.faq{margin-top:5px;border-top:1px solid var(--line);padding-top:13px;display:flex;flex-direction:column;gap:11px}
.faq-h{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.faq p b{color:var(--ink)}
/* Hot deals section */
  .hot{margin:26px 0 8px;padding:20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fff7f0,#ffffff 60%)}
.hot-head{margin-bottom:14px}
.hot-title{font-size:20px;font-weight:800;letter-spacing:-.01em}
.hot-sub{font-size:12.5px;color:var(--ink3);margin-top:4px;max-width:none;line-height:1.5}
.hchips{display:flex;gap:8px;overflow-x:auto;margin-bottom:16px;padding-bottom:3px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hchips::-webkit-scrollbar{display:none}
.hchip{flex:0 0 auto;white-space:nowrap;border:1px solid var(--line);background:#fff;color:var(--ink2);font-weight:700;font-size:13px;border-radius:999px;padding:7px 14px;cursor:pointer;transition:.12s}
/* buyhatke-style category pills — horizontal swipeable strip,category emoji,brand-green active */
  .catpills{display:flex;gap:9px;overflow-x:auto;margin-bottom:16px;padding-bottom:3px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.catpills::-webkit-scrollbar{display:none}
.catpill{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;color:var(--ink2);font-weight:700;font-size:13px;border-radius:999px;padding:7px 14px 7px 10px;cursor:pointer;transition:border-color .14s,background .14s,color .14s;white-space:nowrap}
.catpill .cp-e{font-size:15px;line-height:1}
.catpill:hover{border-color:var(--buy)}
.catpill.on{background:var(--buy);color:#fff;border-color:var(--buy)}
.hchip:hover{border-color:#e0a887}
/* filter bar */
  .fbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.fsel{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink3);background:#fff;border:1px solid var(--line);border-radius:9px;padding:6px 10px}
.fsel select{border:none;background:transparent;font-weight:700;font-size:13px;color:var(--ink);cursor:pointer;font-family:inherit;outline:none;padding-right:2px}
.fcount{font-size:12.5px;color:var(--ink3);font-weight:600;margin-left:4px}
/* Deals-feed search + sort bar */
  .feedbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.feedsearch{flex:1;min-width:190px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 13px;transition:border-color .14s}
.feedsearch:focus-within{border-color:var(--buy)}
.feedsearch svg{width:16px;height:16px;color:var(--ink3);flex-shrink:0}
.feedsearch input{border:none;outline:none;background:none;font-size:14px;color:var(--ink);width:100%;font-family:inherit}
.feedsearch-x{border:none;background:none;color:var(--ink3);cursor:pointer;font-size:12px;padding:2px 4px;flex-shrink:0}
.feedsort{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink3);background:#fff;border:1px solid var(--line);border-radius:11px;padding:8px 12px;white-space:nowrap}
.feedsort select{border:none;background:transparent;font-weight:700;font-size:13px;color:var(--ink);cursor:pointer;font-family:inherit;outline:none}
/* Mobile filter sheet — bottom-sheet with tappable chips (replaces the dropdowns on phones) */
  .fbtn{display:none;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:700;font-size:13px;border-radius:10px;padding:8px 13px;cursor:pointer;font-family:inherit}
.fbtn svg{width:16px;height:16px;color:var(--ink2)}
.fbtn-n{background:var(--buy);color:#fff;font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.fsheet-ov{position:fixed;inset:0;z-index:60;background:rgba(11,18,32,.42);display:flex;align-items:flex-end;animation:fsheet-fade .2s ease}
  @keyframes fsheet-fade{from{opacity:0}to{opacity:1}}
.fsheet{background:#fff;width:100%;max-height:82vh;border-radius:20px 20px 0 0;padding:8px 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;animation:fsheet-up .26s cubic-bezier(.2,.8,.25,1)}
  @keyframes fsheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
  @media(prefers-reduced-motion:reduce){.fsheet-ov,.fsheet{animation:none}}
.fsheet-grip{width:40px;height:4px;border-radius:2px;background:var(--line);margin:6px auto 12px}
.fsheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.fsheet-head span{font-size:17px;font-weight:800;color:var(--ink)}
.fsheet-clear{border:none;background:none;color:var(--coral-d);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit}
.fsheet-body{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:18px;padding-bottom:6px}
.fgrp-l{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-bottom:9px}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{border:1px solid var(--line);background:#fff;color:var(--ink2);font-weight:700;font-size:13.5px;border-radius:999px;padding:9px 15px;cursor:pointer;font-family:inherit;transition:.14s}
.fchip.on{background:var(--buy);color:#fff;border-color:var(--buy)}
.fsheet-apply{margin-top:14px;width:100%;border:none;border-radius:12px;padding:14px;background:var(--ink);color:#fff;font-weight:800;font-size:15px;cursor:pointer;font-family:inherit}
  @media(max-width:640px){.fbar .fsel{display:none}.fbtn{display:inline-flex}}
.fcount a{color:var(--coral);cursor:pointer;font-weight:700;margin-left:10px}
/* White on --orange (#FF7A1E) measured 2.61:1. Darkening the orange far enough for white (a 30%
     cut) turns the accent muddy brown; dark ink on the SAME vivid orange is 6.22:1 and keeps the
     chip looking like the accent it is. The count bubble inside inherits the colour. */
  .hchip.on{background:var(--orange);color:#3A1600;border-color:var(--orange)}
.hcat{margin-top:24px}
.hcat:first-of-type{margin-top:6px}
.hcat-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:13px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.hcat-title{font-size:17px;font-weight:800;letter-spacing:-.01em}
.hcat-all{border:none;background:none;color:var(--orange);font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;padding:0}
.hcat-all:hover{text-decoration:underline}
.demoshead{font-size:15px;font-weight:800;color:var(--ink3);letter-spacing:.02em;text-transform:uppercase;margin:30px 0 -4px}
.reshead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.backbtn{border:1px solid var(--line);background:#fff;color:var(--ink2);font-weight:700;font-size:13.5px;border-radius:10px;padding:9px 15px;cursor:pointer;white-space:nowrap;transition:.12s}
.backbtn:hover{border-color:#c4ccd8;color:var(--ink)}
/* Search pick-list */
  .picklist{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto}
.pickrow{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 13px;cursor:pointer;transition:.12s;font-family:inherit}
.pickrow:hover{border-color:#c4ccd8;box-shadow:0 6px 18px -12px rgba(20,22,28,.3)}
.pickimg{width:46px;height:46px;object-fit:contain;border-radius:8px;background:#fff;border:1px solid var(--line);flex-shrink:0}
.pemoji{display:flex;align-items:center;justify-content:center;font-size:22px}
.picktitle{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink);line-height:1.35}
.pickprice{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;color:#d64533;white-space:nowrap}
.pickgo{font-size:12.5px;font-weight:700;color:var(--blue);white-space:nowrap}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 14px}
.fpill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;color:var(--ink2);cursor:pointer;transition:.12s}
.fpill:hover{border-color:#c4ccd8}
.fpill.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.sel{position:relative}
.sel select{appearance:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 34px 10px 14px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit}
.sel::after{content:'▾';position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--ink3);pointer-events:none;font-size:12px}
.ctog{border:1px solid var(--line);background:#fff;color:var(--ink2);font-weight:700;font-size:13.5px;padding:9px 14px;border-radius:10px;cursor:pointer;transition:.12s}
.ctog:hover{border-color:#c4ccd8}
.ctog.on{background:var(--teal-bg);border-color:#b8e8e2;color:var(--teal-d)}
.ccount{font-size:13px;color:var(--ink3);margin-left:auto;font-weight:600}
.count{font-size:13px;color:var(--ink3);margin-bottom:14px}
/* ── grid + cards ── */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
/* community deals feed / All Deals / Non-Amazon */
  .cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;align-items:start}
/* All Deals studio grid: stretch so every card in a row shares one height. */
  .ad-home-grid .cgrid{align-items:stretch}
/* banner-style deal card (image area + verdict stamp + score) */
  .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;transition:.14s;position:relative}
.card:hover{border-color:var(--coral);box-shadow:0 10px 26px rgba(11,18,32,.1);transform:translateY(-2px)}
.card-img{position:relative;height:168px;border-radius:12px;overflow:hidden;background:#f3f5f8;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.card.buy .card-img{background:var(--buy-bg)}
.card.good .card-img{background:var(--good-bg)}
.card.fair .card-img{background:var(--wait-bg)}
.card-img img{width:100%;height:100%;object-fit:contain;padding:12px}
.card-img img.cc-logo{padding:34px}
.cc-emoji{font-size:48px}
.cardscore{position:absolute;top:9px;left:9px;min-width:26px;height:26px;padding:0 6px;border-radius:13px;background:#fff;color:var(--ink);font-family:'JetBrains Mono';font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.cardstamp{position:absolute;top:9px;right:9px;font-family:'JetBrains Mono';font-weight:800;font-size:12px;padding:5px 11px;border-radius:9px;color:#fff}
.cardstamp.buy{background:var(--buy)}
.cardstamp.good{background:var(--good)}
.cardstamp.fair{background:var(--wait)}
.card-name{font-size:15px;font-weight:700;color:var(--ink);line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}
.card-price{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.card-now{font-family:'JetBrains Mono';font-weight:800;font-size:22px;color:var(--ink)}
.card-was{font-size:13.5px;color:var(--ink3);text-decoration:line-through}
.card-off{font-size:11px;font-weight:800;color:var(--buy);background:var(--buy-bg);padding:2px 7px;border-radius:6px}
.card-meta{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:11.5px;color:var(--soft,#5C6673);border-top:1px solid var(--line);padding-top:8px}
.card-st{font-weight:700;color:var(--ink)}
.card-rv{margin-left:auto;white-space:nowrap;color:var(--ink3)}
/* ── Premium deal card (co-brand verdict badge B) ── */
  .pcard{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;width:auto;padding:0;
    box-shadow:0 1px 2px rgba(13,21,18,.03),0 18px 34px -30px rgba(13,21,18,.24);
    display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s;animation:pcardIn .5s backwards cubic-bezier(.22,.9,.3,1)}
.pcard:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(13,21,18,.05),0 26px 44px -28px rgba(13,21,18,.3)}
  @keyframes pcardIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.pcard{animation:wi-fadein .4s ease}}
.pcard-img{position:relative;height:184px;background:linear-gradient(180deg,#fcfdfe,#f5f7fa);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:16px}
.pcard-img img{max-width:100%;max-height:100%;object-fit:contain}
.pcard-img img.cc-logo{max-width:54px;max-height:54px}
.pcard-emoji{font-size:58px}
.pcard-rl{position:absolute;left:10px;top:10px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(13,21,18,.16);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#111;text-transform:uppercase;overflow:hidden}
.pcard-rl img{width:16px;height:16px;border-radius:4px;display:block;object-fit:contain}
.pcard-vb{position:absolute;right:9px;top:9px;display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #e6ebe8;border-radius:20px;padding:3px 4px 3px 8px;box-shadow:0 4px 13px rgba(13,21,18,.14)}
.pcard-wm{position:relative;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;font-weight:800;font-size:9px;letter-spacing:-.03em;color:#0E1A2B;line-height:1;white-space:nowrap}
.pcard-wm .fy{color:#16B24A}
.pcard-wm .sw{position:absolute;left:0;bottom:-3px;width:100%;height:4px;overflow:visible}
.pcard-wm .sw path{fill:none;stroke:#11B982;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pcard-v{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:800;padding:3px 7px;border-radius:14px;line-height:1;white-space:nowrap}
.pcard-vb.buy .pcard-v{background:var(--buy);color:#fff}
.pcard-vb.fair .pcard-v{background:var(--fair-bg);color:var(--fair)}
.pcard-vb.wait .pcard-v{background:var(--wait);color:#fff}
.pcard-vb.skip .pcard-v{background:var(--skip);color:#fff}
.pcard-vb.unchecked{border-color:#e6e9ee}
.pcard-vb.unchecked .pcard-v{background:#eef1f4;color:#5d6675;font-weight:700}
.pcard-body{padding:12px 13px 13px;display:flex;flex-direction:column;flex:1}
.pcard-name{padding:12px 13px 9px}
.pcard-name>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;font-weight:700;line-height:1.32;color:var(--ink);height:2.64em}
.pcard-rate{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:11.5px}
.pcard-rate .n{color:#e8890a;font-weight:800}
.pcard-rate .st{color:#f59e0b;letter-spacing:-1.5px;font-size:11px}
.pcard-rate .ct{color:var(--ink3);font-weight:500}
.pcard-prow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;padding-top:0}
.pcard-now{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1}
.pcard-priceline{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pcard-wasx{font-size:13px;color:var(--ink3);text-decoration:line-through}
.pcard-offx{font-size:11.5px;font-weight:800;color:var(--coral);background:rgba(255,90,44,.1);padding:2px 7px;border-radius:6px}
.pcard-usu{font-size:11.5px;color:var(--ink3);margin-top:5px}
.pcard-usu b{color:var(--ink2);font-weight:700}
.pcard-off{color:var(--ink3);font-weight:700;margin-left:7px}
.pcard-score{flex-shrink:0;text-align:center;border-radius:10px;padding:6px 8px 5px;min-width:46px;border:1px solid}
.pcard-score .v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:15px;font-weight:800;line-height:1}
.pcard-score .l{font-size:7.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-top:2px;opacity:.72}
.pcard-score.hi{background:var(--buy-bg);border-color:var(--buy-bd);color:var(--buy)}
.pcard-score.mid{background:var(--skip-bg);border-color:var(--skip-bd);color:var(--skip)}
.pcard-score.lo{background:var(--wait-bg);border-color:var(--wait-bd);color:#a5760f}
.pcard-btn{margin-top:12px;width:100%;border:1px solid var(--buy-bd);border-radius:10px;padding:9px;font-family:inherit;font-size:12.5px;font-weight:750;cursor:pointer;background:var(--buy-bg);color:#0a7a55;transition:background .15s;display:flex;align-items:center;justify-content:center;gap:6px}
.pcard-btn:hover{background:#d7efdf}
.pcard-btn .rc{transition:transform .15s}
.pcard:hover .pcard-btn .rc{transform:translateX(3px)}
/* ── "we compare across" trust strip (below hero) ── */
  .truststrip{background:var(--paper,#fff);border-bottom:1px solid var(--line)}
.ts-in{max-width:1720px;margin:0 auto;padding:13px 34px;display:flex;align-items:center;justify-content:center;gap:12px 22px;flex-wrap:wrap}
.ts-cap{font-size:12.5px;color:var(--ink3);font-weight:600;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.ts-cap svg{width:15px;height:15px;color:var(--buy)}
.ts-store{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--ink2)}
.ts-store img{width:18px;height:18px;border-radius:4px;object-fit:contain}
  @media(max-width:640px){.ts-in{padding:11px 16px;gap:10px 16px}.ts-store{font-size:13px}}
/* Verdict legend — taxonomy + score explainer under the tab row */
  .vleg{max-width:1280px;margin:0 auto;padding:9px 40px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:12.5px;color:var(--ink3);border-bottom:1px solid var(--line)}
.vleg-i b{font-weight:800}
.vleg-i.buy b{color:var(--buy)}
.vleg-i.wait b{color:var(--wait)}
.vleg-i.skip b{color:var(--skip)}
.vleg-i.fair b{color:var(--ink2)}
.vleg-sc{margin-left:auto;font-weight:700;color:var(--ink2);cursor:help;white-space:nowrap}
  @media(max-width:640px){.vleg{padding:8px 16px;font-size:11.5px;gap:5px 12px}.vleg-sc{margin-left:0}}
/* Honest now-vs-everyday indicator on cards (NOT a history chart) */
  .nowbar{display:flex;align-items:center;gap:8px;margin-top:7px}
.nb-track{position:relative;flex:1;height:6px;background:#eef1f6;border-radius:4px;overflow:visible}
.nb-track i{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.nb-track i.u{background:var(--buy)}
.nb-track i.o{background:var(--wait)}
.nb-mark{position:absolute;top:-2px;width:2px;height:10px;background:#8b93a1;border-radius:1px}
.nb-cap{font-size:11px;font-weight:700;color:var(--ink3);white-space:nowrap}
/* Today's SKIPs section */
  .skips{margin:34px auto 6px}
.skips-h .skips-eb{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--skip)}
.skips-h h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(22px,2.6vw,28px);margin:6px 0 4px}
.skips-h p{color:var(--ink2);font-size:14.5px;margin:0 0 16px;max-width:64ch}
.skips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.skipc{border:1px solid var(--skip-bd);background:var(--skip-bg);border-radius:14px;padding:15px;cursor:pointer;transition:.14s}
.skipc:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(47,109,246,.5)}
.skipc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.skipc-stamp{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:12px;color:#fff;background:var(--skip);padding:3px 9px;border-radius:7px}
.skipc-cat{font-size:12px;font-weight:700;color:var(--ink3)}
.skipc-nm{font-weight:700;font-size:14.5px;line-height:1.35;color:var(--ink);margin-bottom:8px}
.skipc-rz{font-size:13px;color:var(--ink2);line-height:1.5}
  @media(max-width:640px){.skips-grid{grid-template-columns:1fr}}
/* ── Today's Top BUYs (featured banner + animated tiles) ── */
  .topbuys{margin-bottom:28px}
.tb-head{display:flex;align-items:center;gap:12px;margin-bottom:3px}
.tb-title{font-size:24px;font-weight:850;letter-spacing:-.02em;color:var(--ink)}
.tb-refresh{font-family:'JetBrains Mono';font-size:11px;font-weight:700;color:var(--buy);background:var(--buy-bg);padding:4px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:6px}
.tb-r{display:inline-block;animation:tbspin 4s linear infinite}
.tb-sub{color:var(--ink3);font-size:13px;margin:0 0 16px}
.tb-grid{display:grid;grid-template-columns:1.55fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:15px}
.feature{grid-row:1/3;grid-column:1;position:relative;border-radius:20px;overflow:hidden;color:#fff;cursor:pointer;background:linear-gradient(135deg,#0EA65A 0%,#0FA79B 52%,#127FC8 100%);padding:24px;display:flex;flex-direction:column;min-height:360px;box-shadow:0 18px 40px rgba(15,120,90,.26);opacity:0;animation:tbUp .6s .05s cubic-bezier(.2,.7,.3,1) forwards}
.feature::after{content:"";position:absolute;top:0;left:0;width:60%;height:100%;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.26) 50%,transparent 70%);transform:translateX(-160%);animation:tbShine 5.5s 1s ease-in-out infinite;pointer-events:none}
.f-badge{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.92}
.f-stamp{position:absolute;top:22px;right:22px;font-family:'JetBrains Mono';font-weight:800;font-size:14px;padding:7px 15px;border-radius:11px;background:#fff;color:var(--buy);animation:tbPop 3.2s ease-in-out infinite}
.f-img{flex:1;display:flex;align-items:center;justify-content:center;margin:8px 0}
.f-img img{max-height:170px;max-width:66%;object-fit:contain;background:#fff;border-radius:16px;padding:14px;animation:tbFloat 4s ease-in-out infinite}
.f-emoji{font-size:88px;filter:drop-shadow(0 12px 20px rgba(0,0,0,.25));animation:tbFloat 4s ease-in-out infinite}
.f-name{font-size:19px;font-weight:800;line-height:1.25;max-width:92%}
.f-row{display:flex;align-items:baseline;gap:12px;margin-top:10px}
.f-now{font-family:'JetBrains Mono';font-weight:800;font-size:31px}
.f-was{font-size:15px;opacity:.82;text-decoration:line-through}
.f-off{font-size:14px;font-weight:800;background:#fff;color:var(--buy);padding:3px 10px;border-radius:8px}
.f-seller{font-size:12.5px;opacity:.92;margin-top:9px}
.f-seller b{font-weight:800}
.btile{position:relative;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;opacity:0;animation:tbUp .55s cubic-bezier(.2,.7,.3,1) forwards;transition:transform .16s,box-shadow .16s,border-color .16s}
.btile:nth-child(2){animation-delay:.12s}
.btile:nth-child(3){animation-delay:.19s}
.btile:nth-child(4){animation-delay:.26s}
.btile:nth-child(5){animation-delay:.33s}
.btile:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(11,18,32,.14);border-color:var(--buy)}
.btile-img{position:relative;height:88px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.btile-img .e{font-size:38px;transition:transform .25s}
.btile-img img.e{max-width:100%;max-height:100%;object-fit:contain;padding:9px}
.btile:hover .btile-img .e{transform:scale(1.12) rotate(-3deg)}
.btile-img.t0{background:linear-gradient(150deg,#FFF0EA,#fff7f3)}
.btile-img.t1{background:linear-gradient(150deg,#EAF2FF,#f5f9ff)}
.btile-img.t2{background:linear-gradient(150deg,#F1ECFF,#f9f6ff)}
.btile-img.t3{background:linear-gradient(150deg,#FEF6E4,#fffbf1)}
.bstamp{position:absolute;top:8px;right:8px;font-family:'JetBrains Mono';font-weight:800;font-size:10.5px;padding:3px 8px;border-radius:7px;background:var(--buy);color:#fff}
.bstamp.good{background:var(--good)}
.bstamp.unchecked{background:#eef1f4;color:#8a919c;text-transform:lowercase}
.f-stamp.good{color:var(--good)}
.f-stamp.unchecked{color:#8a919c;background:#f1f3f6;animation:none;text-transform:lowercase}
.bscore{position:absolute;top:8px;left:8px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:#fff;color:var(--ink);font-family:'JetBrains Mono';font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.14)}
.btile-body{padding:9px 11px 11px;display:flex;flex-direction:column;flex:1}
.bname{font-size:12.5px;font-weight:700;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bprice{display:flex;align-items:baseline;gap:6px;margin-top:5px}
.bnow{font-family:'JetBrains Mono';font-weight:800;font-size:16px}
.bwas{font-size:11px;color:var(--ink3);text-decoration:line-through}
.boff{font-size:10px;font-weight:800;color:var(--buy);background:var(--buy-bg);padding:1px 6px;border-radius:5px}
.bseller{margin-top:auto;padding-top:7px;font-size:11px;color:var(--ink3)}
.bseller b{color:var(--ink);font-weight:700}
/* one-per-category top BUYs: feature + wrapping tile grid + category labels */
  .tb-catgrid{display:grid;grid-template-columns:1.5fr 2.6fr;gap:15px;align-items:stretch;margin-top:2px}
.tb-catgrid .feature{grid-row:auto;grid-column:auto}
.tb-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px;align-content:start}
.bcat{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--coral);margin-bottom:3px}
.f-cat{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.92);margin-bottom:6px}
.tb-title{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:26px}
  @media(max-width:900px){.tb-catgrid{grid-template-columns:1fr}}
/* aurora-navy banner module (animated) housing the top BUYs */
  .tb-module{border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -34px rgba(16,24,40,.5);background:#fff}
.tb-banner{position:relative;overflow:hidden;color:#fff;background:#0f1a2e;padding:20px 26px;display:flex;align-items:center;justify-content:space-between;min-height:92px}
.tb-bl{display:flex;align-items:center;gap:15px;position:relative;z-index:2}
.tb-tro{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:27px;flex:none;animation:tbTroFloat 4s ease-in-out infinite}
.tb-banner .tb-title{color:#fff;line-height:1.05}
.tb-tick{font-size:13.5px;margin-top:5px;color:#cfd9ea}
.tb-tk{display:inline-block;font-weight:800;color:#0b1220;background:#ffcf5c;padding:2px 11px;border-radius:8px;animation:tkIn .34s cubic-bezier(.2,.7,.3,1)}
.tb-badge{position:relative;z-index:2;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:800;font-size:11.5px;letter-spacing:.03em;padding:8px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.tb-blob{position:absolute;border-radius:50%;filter:blur(34px);z-index:1;opacity:.7}
.tb-blob.b1{width:220px;height:220px;background:rgba(255,90,44,.5);top:-96px;left:9%;animation:tbDrift1 9s ease-in-out infinite}
.tb-blob.b2{width:200px;height:200px;background:rgba(47,116,208,.5);top:-76px;right:15%;animation:tbDrift2 11s ease-in-out infinite}
.tb-bsheen{position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);animation:tbShine 6s ease-in-out infinite}
.tb-body{padding:20px;background:linear-gradient(180deg,#fbfcfe,#f6f8fc)}
  @keyframes tbTroFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
  @keyframes tbDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(46px,14px)}}
  @keyframes tbDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-38px,-16px)}}
  @keyframes tkIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
  @media(max-width:560px){.tb-banner{flex-direction:column;align-items:flex-start;gap:12px}.tb-badge{align-self:flex-start}}
  @media (prefers-reduced-motion:reduce){.tb-tro,.tb-blob,.tb-bsheen,.tb-tk{animation:none}}
/* colorful category tiles — Worth-it BUYs by category (live feed + daily rotation) */
  .cattiles{margin:6px 0 30px}
.ct-h2,.dotd-title{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(24px,2.6vw,30px);letter-spacing:-.015em;margin-top:0;color:var(--ink);line-height:1.1}
.ct-sub{font-size:15px;color:var(--ink2);margin:5px 0 20px;max-width:72ch}
.ct-sub b{color:var(--buy)}
.ct-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:16px}
.drow-feat{position:relative;overflow:hidden;border-radius:18px;color:#fff;background:radial-gradient(120% 130% at 85% -10%,#3f6bff,#1746c8 62%);padding:20px;display:flex;flex-direction:column;min-height:430px;box-shadow:0 22px 44px -26px rgba(23,70,200,.5);cursor:pointer;animation:ddFade .5s ease}
.drow-feat::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);animation:tbShine 6s ease-in-out infinite;pointer-events:none}
.df-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.df-eb{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.95}
.df-stamp{background:rgba(255,255,255,.95);color:#1746c8;font-weight:800;font-size:11px;padding:5px 11px;border-radius:8px}
.df-stamp.good{color:#0d968e}
.df-stamp.unchecked{background:rgba(255,255,255,.9);color:#5d6675;text-transform:lowercase;letter-spacing:.02em}
/* ── Deal-of-the-Day rotation: staggered reveal + Ken-Burns image + story progress bar ── */
  .df-body{flex:1;display:flex;flex-direction:column;min-height:0;position:relative;z-index:1;animation:dfSwap .5s cubic-bezier(.22,.9,.3,1)}
.df-img{flex:1;display:flex;align-items:center;justify-content:center;margin:14px 0;position:relative;z-index:1;overflow:hidden;border-radius:16px;animation:dfImgIn .62s cubic-bezier(.22,.9,.3,1) both}
.df-img img{max-width:82%;max-height:230px;object-fit:contain;background:#fff;border-radius:16px;padding:16px;animation:dfKen 9s ease-in-out infinite alternate}
.df-nm{font-size:16.5px;font-weight:800;line-height:1.25;position:relative;z-index:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;animation:dfUp .5s .06s both cubic-bezier(.22,.9,.3,1)}
.df-pr{display:flex;align-items:baseline;gap:10px;margin-top:10px;position:relative;z-index:1;animation:dfUp .5s .13s both cubic-bezier(.22,.9,.3,1)}
.df-now{font-size:30px;font-weight:900}
.df-was{font-size:14px;opacity:.85;text-decoration:none;font-weight:600}
.df-was s{text-decoration:line-through;font-weight:500;opacity:.8}
.df-off{font-size:12px;font-weight:800;background:rgba(255,255,255,.22);padding:2px 8px;border-radius:6px}
.df-prog{position:relative;height:3px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden;margin-top:14px;z-index:1}
.df-prog i{position:absolute;inset:0;transform-origin:left;background:rgba(255,255,255,.92);animation:dfProg 4.2s linear forwards}
.df-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;position:relative;z-index:1;font-size:13.5px;font-weight:800}
.df-dots{display:flex;gap:5px}
.df-dots .dd{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:width .3s ease,background .3s ease}
.df-dots .dd.on{background:#fff;width:16px;border-radius:3px}
  @keyframes dfImgIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:none}}
  @keyframes dfUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
  @keyframes dfKen{from{transform:scale(1) translateY(0)}to{transform:scale(1.05) translateY(-4px)}}
  @keyframes dfProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @media(prefers-reduced-motion:reduce){.df-img,.df-nm,.df-pr{animation:wi-fadein .4s ease}.df-img img{animation:none}.df-prog{display:none}}
.cti{border-radius:18px;padding:16px;color:#fff;box-shadow:0 20px 42px -28px rgba(16,24,40,.5);display:flex;flex-direction:column;min-height:430px;cursor:pointer;transition:transform .16s,box-shadow .16s}
.cti:hover{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(16,24,40,.55)}
.cti:focus-visible{outline:3px solid #fff;outline-offset:3px}
.nh-brand,.nh-nlink,.fcount a,.nh-col a,.snote a{cursor:pointer}
.nh-brand:focus-visible,.nh-nlink:focus-visible,.nh-col a:focus-visible,.fcount a:focus-visible,.snote a:focus-visible{outline:2px solid var(--mint,#23D17E);outline-offset:3px;border-radius:4px}
.cti-eb{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.22);align-self:flex-start;padding:4px 9px;border-radius:999px}
.cti-ct{font-size:16px;font-weight:900;letter-spacing:-.02em;margin-top:8px;line-height:1.1;color:#fff}
.cti-cells{display:flex;flex-direction:column;gap:10px;margin:12px 0;flex:1;animation:cti-fade .4s ease}
  @keyframes cti-fade{from{opacity:0}to{opacity:1}}
.cti-cell{display:flex;align-items:center;gap:12px;background:#fff;border-radius:13px;padding:11px;color:var(--ink);animation:ctiCell .5s both cubic-bezier(.22,.9,.3,1)}
.cti-cells .cti-cell:nth-child(2){animation-delay:.09s}
  @keyframes ctiCell{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.cti-cell{animation:wi-fadein .4s ease}}
.cti-cimg{width:64px;height:64px;flex-shrink:0;border-radius:11px;background:#f2f4f8;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cti-cimg img{width:100%;height:100%;object-fit:contain;padding:7px}
.cti-emoji{font-size:30px}
.cti-cinfo{min-width:0;flex:1}
.cti-cname{font-size:12.5px;font-weight:700;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:5px}
.cti-cprln{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.cti-cnow{font-size:19px;font-weight:900;color:#0b1220;letter-spacing:-.02em}
/* #9aa3b1 measured 2.55:1 on white — a struck price is meant to be quiet,not unreadable.
     #6B7280 is 4.83:1 and still reads as secondary beside the live price. */
  .cti-cwas{font-size:13px;color:#6B7280;text-decoration:line-through}
.cti-off{background:#0b1220;color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:7px}
.cti-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:4px}
.cti-arrow{position:relative;width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,.24);color:#fff;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;line-height:1;padding:0}
.cti-arrow::after{content:"";position:absolute;inset:-8px}
/* expand tap target to 44px without enlarging the visible circle */
  .cti-arrow:hover{background:rgba(255,255,255,.42)}
.cti-arrow.off{opacity:.4;cursor:default}
.cti-page{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;min-width:46px;text-align:center;letter-spacing:.03em;color:#fff}
.cti-foot{margin-top:auto;font-size:13.5px;font-weight:800;display:flex;align-items:center;gap:6px;color:#fff}
.cti-arw{transition:transform .16s}
.cti:hover .cti-arw{transform:translateX(3px)}
  /* Reduce Motion: the storefront cards still CYCLE (per the "lively for everyone" choice), but the
     cross-fade becomes opacity-only — no slide/transform — which is accessible (reduce-motion targets
     movement, not fades). The continuous/looping DECORATIONS (shine sweep, product float, loading
     dots) are silenced since they can't be reduced to a discrete opacity fade. */
  @keyframes wi-fadein{from{opacity:0}to{opacity:1}}
  @media(prefers-reduced-motion:reduce){.cti-cells,.df-body{animation:wi-fadein .45s ease}}
  @media(prefers-reduced-motion:reduce){.drow-feat::after,.df-img img,.oload-dot{animation:none}}
/* "Run the verdict" button — the ONLY trigger for a (price-research-spending) verdict lookup,so a stray
     tap on a card body never costs a token. Card bodies are no longer click-to-verdict. */
  .runv{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:11px;background:#0b1220;color:#fff;font-weight:800;font-size:13px;padding:10px;border:none;border-radius:10px;cursor:pointer;transition:background .15s;font-family:inherit}
.runv:hover{background:#1c2c4c}
.runv-sm{flex-shrink:0;display:inline-flex;align-items:center;min-height:40px;background:transparent;color:#0F766E;font-weight:800;font-size:11.5px;padding:7px 12px;border:1.5px solid #14B8A6;border-radius:9px;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s,color .15s}
.runv-sm:hover{background:rgba(20,184,166,.08);color:#0D9488}
/* Grid ⟷ List toggle for the deals feed + the list-row layout */
  .dv-toggle{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;margin-left:auto;flex-shrink:0}
.dv-tg{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink3);background:transparent;border:none;padding:7px 12px;border-radius:8px;cursor:pointer;transition:.15s}
.dv-tg svg{width:15px;height:15px}
.dv-tg.on{background:#0b1220;color:#fff}
.dv-tg:hover:not(.on){color:var(--ink2)}
.clist{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.crow{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto auto;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;transition:.12s}
.crow:hover{border-color:#c4ccd8;box-shadow:0 6px 18px -12px rgba(20,22,28,.3)}
.crow-img{position:relative;width:56px;height:56px;border-radius:10px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:26px;overflow:hidden;flex-shrink:0}
.crow-img img{width:100%;height:100%;object-fit:contain;padding:6px}
.crow-img img.cc-logo{padding:14px}
.crow-nm{min-width:0}
.crow-nm .t{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow-nm .m{font-size:11.5px;color:var(--ink3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow-pr{text-align:right;white-space:nowrap}
.crow-pr .now{font-size:16px;font-weight:900;color:var(--ink);font-family:'JetBrains Mono',monospace}
.crow-pr .was{font-size:12px;color:var(--ink3);text-decoration:none;margin-left:5px;font-weight:600}
.crow-pr .was s{text-decoration:none;font-weight:500;color:#4A5761}
.crow-pr .off{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:800;color:#3F4852;background:#fff;border:1.5px solid rgba(20,184,166,.55);padding:2px 6px;border-radius:999px}
  @media(max-width:680px){
    .crow{display:block;padding:13px 14px;overflow:hidden}
    .crow-img{float:left;width:72px;height:72px;margin:0 13px 0 0}
    .crow-nm{min-width:0}
    .crow-nm .t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-size:14px;line-height:1.3}
    .crow-nm .m{white-space:normal;margin-top:4px}
    .crow-pr{text-align:left;margin-top:7px;white-space:normal}
    .crow .vpill{display:inline-flex;clear:none;margin:7px 0 0 10px;vertical-align:middle}
    .crow .runv-sm{display:inline-flex;width:auto;box-sizing:border-box;clear:left;margin-top:8px;text-align:left;padding:8px 12px;min-height:0;background:transparent;color:#0F766E;border:1.5px solid #14B8A6;box-shadow:none;font-size:13px;font-weight:800;border-radius:10px}
  }
  @media(max-width:1100px){.dgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}}
  @media(max-width:680px){.dgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.drow-feat,.cti{min-height:auto}}
  @media(max-width:1100px){.ct-row{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:680px){.ct-row{grid-template-columns:repeat(2,1fr)}.cti{min-height:auto}}
/* Deal of the day (rotating) next to the category tiles */
  .dcombo{display:grid;grid-template-columns:350px 1fr;gap:24px;align-items:start;margin:6px 0 30px}
.dotd-next{margin-top:18px}
.dotd-next-lbl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.dnr{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 11px;margin-bottom:9px;cursor:pointer;transition:.15s}
.dnr:hover{border-color:#c4ccd8;box-shadow:0 8px 18px -13px rgba(16,24,40,.45);transform:translateY(-1px)}
.dnr-img{width:46px;height:46px;border-radius:9px;background:#f6f8fb;border:1px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dnr-img img{width:100%;height:100%;object-fit:contain;padding:5px}
.dnr-main{min-width:0}
.dnr-nm{font-size:12.5px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.dnr-pr{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.dnr-now{font-weight:800;font-size:13.5px;color:var(--ink)}
.dnr-was{font-size:11px;color:var(--ink3);text-decoration:line-through}
.dnr-off{font-size:10px;font-weight:800;color:var(--buy);background:var(--buy-bg);padding:1px 5px;border-radius:5px}
.dcombo .cattiles{margin:0}
.dcombo .ct-row{grid-template-columns:repeat(3,1fr)}
.dotd{display:flex;flex-direction:column}
.dotd-hd{margin-bottom:20px}
.dotd-sub{font-size:13px;color:var(--ink2);margin-top:6px;line-height:1.45}
.dotd-card{position:relative;overflow:hidden;border-radius:20px;color:#fff;cursor:pointer;background:linear-gradient(150deg,#0EA65A,#0FA79B 52%,#127FC8);padding:24px;display:flex;flex-direction:column;min-height:560px;box-shadow:0 24px 50px -26px rgba(15,120,90,.5);animation:ddFade .5s ease}
.dotd-card::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);animation:tbShine 6s ease-in-out infinite;pointer-events:none}
.dotd-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.dotd-cat{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:rgba(255,255,255,.2);padding:4px 10px;border-radius:999px}
.dotd-stamp{background:rgba(255,255,255,.95);color:#127a44;font-weight:800;font-size:11px;padding:5px 11px;border-radius:8px}
.dotd-stamp.good{color:#2f74d0}
.dotd-img{flex:1;display:flex;align-items:center;justify-content:center;margin:16px 0;position:relative;z-index:1}
.dotd-img img{max-width:82%;max-height:270px;object-fit:contain;background:#fff;border-radius:16px;padding:16px;animation:tbFloat 4s ease-in-out infinite}
.dotd-nm{font-size:16.5px;font-weight:800;line-height:1.25;position:relative;z-index:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dotd-pr{display:flex;align-items:baseline;gap:10px;margin-top:10px;position:relative;z-index:1}
.dotd-now{font-size:30px;font-weight:900}
.dotd-was{font-size:15px;opacity:.72;text-decoration:line-through}
.dotd-off{font-size:12px;font-weight:800;background:rgba(255,255,255,.22);padding:2px 8px;border-radius:6px}
.dotd-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;position:relative;z-index:1}
.dotd-run{font-size:13.5px;font-weight:800}
.dotd-dots{display:flex;gap:5px}
.dotd-dots .dd{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:.2s}
.dotd-dots .dd.on{background:#fff;width:16px;border-radius:3px}
  @keyframes ddFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes dfSwap{from{opacity:0}to{opacity:1}}
  @media (prefers-reduced-motion:reduce){.dotd-card,.dotd-card::after,.dotd-img img{animation:none}}
  @media(max-width:900px){.dcombo{grid-template-columns:1fr}.dcombo .ct-row{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}}
  /* phones: category/deal tiles go 1-per-row so the image-forward product cards + full price fit */
  @media(max-width:560px){.dgrid,.ct-row,.dcombo .ct-row{grid-template-columns:1fr}}
  @keyframes tbUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes tbShine{0%,62%{transform:translateX(-160%)}80%,100%{transform:translateX(280%)}}
  @keyframes tbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  @keyframes tbPop{0%,88%,100%{transform:scale(1)}94%{transform:scale(1.08)}}
  @keyframes tbspin{to{transform:rotate(360deg)}}
  @media(max-width:900px){.tb-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.feature{grid-column:1/3;min-height:300px}}
  @media(max-width:560px){.tb-grid{grid-template-columns:1fr}.feature{grid-column:1}}
  @media (prefers-reduced-motion:reduce){.feature,.btile{opacity:1;animation:none}.feature::after,.f-img img,.f-emoji,.f-stamp,.tb-r{animation:none}}
.ccard{display:flex;flex-direction:column;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 15px;transition:.14s}
.ccard:hover{border-color:#c4ccd8;box-shadow:0 4px 14px rgba(20,33,52,.07)}
.cc-img{position:relative;width:100%;height:132px;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.cc-img img{width:100%;height:100%;object-fit:contain;padding:8px}
.cc-img img.cc-logo{width:58px;height:58px;object-fit:contain;padding:0}
.cc-emoji{font-size:42px;opacity:.65}
.cc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cc-store{font-size:10.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--blue-d);background:#eef3fb;border:1px solid #dce6f5;padding:3px 9px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%}
.cc-price{font-size:17px;font-weight:900;font-family:'JetBrains Mono';color:var(--ink);white-space:nowrap}
.cc-off{position:absolute;top:8px;left:8px;background:var(--buy);color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em;padding:3px 8px;border-radius:7px;box-shadow:0 2px 7px rgba(0,0,0,.18)}
.cc-score{position:absolute;top:7px;right:7px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:900;font-family:'JetBrains Mono';color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.3);border:2px solid #fff}
.cc-score.hi{background:var(--buy)}
.cc-score.mid{background:var(--blue)}
.cc-score.lo{background:var(--ink3)}
.vchips{margin-bottom:10px}
.hchip.vchip{font-weight:800}
.hchip.vchip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.cc-votes{font-size:11.5px;font-weight:800;color:var(--orange);white-space:nowrap}
.cc-vbadge{font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:2px 8px;border-radius:999px;white-space:nowrap}
.cc-vbadge.buy{background:var(--buy-bg);color:var(--buy);border:1px solid var(--buy-bd)}
.cc-vbadge.good{background:#eef3fb;color:var(--blue-d);border:1px solid #cfe0f5}
.cc-vbadge.fair{background:#f1f3f6;color:var(--ink2);border:1px solid var(--line)}
.cc-pricerow{display:flex;align-items:baseline;gap:8px}
.cc-was{font-size:13px;color:var(--ink3);text-decoration:line-through;font-weight:600}
.cc-title{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4;flex:1;min-height:38px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cc-actions{display:flex;align-items:center;gap:8px;margin-top:2px}
.cc-verdict{flex:1;background:var(--navy);color:#fff;border:none;border-radius:9px;padding:9px 12px;font-weight:800;font-size:13px;cursor:pointer;transition:.14s}
.cc-verdict.wide{width:100%}
.cc-verdict:hover{background:var(--navy2)}
.cc-view{flex:1;text-align:center;background:#fff;border:1px solid var(--line);color:var(--ink2);border-radius:9px;padding:9px 12px;font-weight:700;font-size:13px;text-decoration:none}
.cc-view:hover{border-color:#c4ccd8}
.cc-view2{font-size:12px;font-weight:700;color:var(--ink3);text-decoration:none;white-space:nowrap;padding:0 2px}
.cc-view2:hover{color:var(--blue)}
.cc-disc{font-size:15px;text-decoration:none;opacity:.7;line-height:1}
.cc-disc:hover{opacity:1}
.cfoot{font-size:11.5px;color:var(--ink3);margin-top:14px;line-height:1.5}
.deal{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:.14s;display:flex;flex-direction:column}
.deal:hover{transform:translateY(-3px);box-shadow:0 16px 34px -20px rgba(20,22,28,.32)}
.dtop{position:relative;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.heat{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:4px;color:#fff;font-weight:800;font-size:13px;padding:4px 10px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.demoji{font-size:46px;line-height:1;filter:drop-shadow(0 3px 5px rgba(0,0,0,.16))}
.dbrand{font-weight:800;font-size:15px;margin-top:8px}
.dcat{position:absolute;bottom:12px;left:12px;background:#2b303a;color:#fff;font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px}
.dimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:16px;background:inherit;z-index:1}
.heat,.dcat,.watchbtn{z-index:2}
.rimg{width:34px;height:34px;object-fit:contain;border-radius:8px;background:#fff;border:1px solid var(--line);display:block;margin:0 auto}
.mheadL{display:flex;gap:14px;align-items:center;min-width:0;flex:1}
.mimg{width:64px;height:64px;object-fit:contain;border-radius:12px;background:#fff;border:1px solid var(--line);flex-shrink:0}
.memoji{font-size:38px;width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--bg);flex-shrink:0}
/* Coupon callouts — teal (Clip & Save accent),never purple (P2 2026-08-02). */
  .dcoupbadge{position:absolute;bottom:12px;right:12px;z-index:2;background:var(--teal);color:#fff;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;box-shadow:0 1px 3px rgba(14,26,43,.12)}
.dcoupon{font-size:12.5px;font-weight:700;color:var(--teal-d);background:var(--teal-bg);border:1px solid #b8e8e2;border-radius:8px;padding:5px 9px;line-height:1.35}
.dcoupon b{color:#0a6e66}
.mcoupon{margin-top:12px;font-size:14px;color:var(--teal-d);background:var(--teal-bg);border:1px solid #b8e8e2;border-radius:11px;padding:11px 14px;line-height:1.5}
.mcoupon b{color:#0a6e66}
.dbot{padding:14px 15px 16px;display:flex;flex-direction:column;gap:8px;flex:1;background:linear-gradient(160deg,#f7fafd,#eef3f9)}
.dmeta{font-size:12.5px;color:var(--ink3);font-weight:600}
.dname{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.dprice{display:flex;align-items:baseline;gap:9px}
.dprice .now{font-size:22px;font-weight:800;color:#d64533}
.dprice .was{font-size:14px;color:var(--ink3);text-decoration:line-through}
.dprice .off{font-size:11.5px;font-weight:800;color:#2f6df6;background:#eef3fb;border:1px solid #cfd6e4;border-radius:20px;padding:2px 7px;white-space:nowrap}
/* Product page (Direction A): tap a result → details (0 tokens) → "Worthitforyou?" → inline verdict */
  .pp{max-width:880px;margin:0 auto;padding-bottom:24px}
.pp-checked{max-width:920px}
  @media(min-width:960px){.pp.wrap.pp-webv,.pp.wrap.pp-webv.pp-checked{max-width:1360px}}
.pp-bar{padding:4px 0 14px;display:flex;align-items:center;gap:10px}
.pp-back{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:8px 14px;font-weight:700;font-size:13px;color:var(--ink2);cursor:pointer;font-family:inherit}
.pp-bar .sharev{margin-left:auto}
.pp-hero{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--card-sh)}
.pp-hero-top{display:grid;grid-template-columns:280px 1fr;gap:26px;padding:24px;align-items:center}
  @media(max-width:680px){.pp-hero-top{grid-template-columns:1fr;gap:16px;padding:16px}}
.pp-img{background:#fff;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;min-height:230px}
.pp-imgmain{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:170px}
.pp-imgmain img{max-width:100%;max-height:210px;object-fit:contain;display:block}
.pp-thumbs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.pp-thumb{width:40px;height:40px;border-radius:8px;border:1.5px solid var(--line);background:#fff;padding:2px;cursor:pointer;overflow:hidden;flex:none;transition:border-color .12s}
.pp-thumb.on{border-color:var(--ink)}
.pp-thumb:hover{border-color:#c0c6cf}
.pp-thumb img{width:100%;height:100%;object-fit:contain;display:block}
/* Unchecked product snapshot: swipeable photos + two equal buttons (0 price-research). */
  .pp-snap{max-width:560px;margin:0 auto}
.pp-gal{position:relative;background:#fff}
.pp-gal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
.pp-gal-track::-webkit-scrollbar{display:none}
.pp-gal-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;
    min-height:240px;max-height:320px;display:flex;align-items:center;justify-content:center;padding:18px 22px}
.pp-gal-slide img{max-width:100%;max-height:280px;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
.pp-gal-empty{min-height:200px;display:flex;align-items:center;justify-content:center;font-size:56px}
.pp-gal-dots{display:flex;justify-content:center;gap:7px;padding:0 0 12px}
.pp-gal-dot{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:var(--line);cursor:pointer}
.pp-gal-dot.on{background:var(--blue);transform:scale(1.15)}
.pp-snap .pp-hero-copy{padding:4px 22px 20px}
.pp-cta-row{display:flex;gap:10px;margin-top:16px;align-items:stretch}
.pp-check,.pp-viewbtn{flex:1;min-width:0;border:none;border-radius:14px;cursor:pointer;font-family:inherit;
    font-weight:800;font-size:15px;padding:14px 12px;line-height:1.15}
.pp-check{background:var(--blue);color:#fff}
.pp-check:disabled{opacity:.7;cursor:wait}
.pp-check:active{transform:scale(.99)}
.pp-viewbtn{background:var(--blue);color:#fff}
.pp-viewbtn:active{transform:scale(.99)}
.pp-viewbtn:disabled{opacity:.45;cursor:default}
.pp-sold{margin-top:8px;font-size:13px;color:var(--ink3);font-weight:600;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.pp-sold .wi-merchslot{display:inline-flex;align-items:center;justify-content:center;
    width:18px;height:18px;flex:none;vertical-align:middle;
    background:transparent;border:none;box-shadow:none;padding:0;margin:0;overflow:visible}
.pp-sold .wi-merchfallback{display:grid;place-items:center;width:18px;height:18px;
    background:transparent;border:none;box-shadow:none;padding:0}
.pp-sold .wi-merchfallback svg{width:18px;height:18px;display:block;opacity:.75}
.pp-sold .wi-merchlogo{width:18px;height:18px;object-fit:contain;object-position:center;display:block;
    background:transparent;border:none;box-shadow:none;padding:0;border-radius:0}
  @media(max-width:680px){
    .pp-sold .wi-merchslot,.pp-sold .wi-merchlogo{width:18px;height:18px}
  }
.pp-brand{font-size:13px;font-weight:700;color:var(--ink3);margin-bottom:7px}
.pp-title{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.pp-rating{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:13.5px;color:var(--ink3)}
.pp-stars{color:#e8933a;letter-spacing:1px;font-size:14px}
.pp-stars .pp-stars-o{color:#d9d2c4}
.pp-rating b{color:var(--ink2)}
.pp-rcount{color:var(--ink3)}
.pp-usual{font-size:13px;color:var(--ink3);margin-top:6px}
.pp-usual b{color:var(--ink2)}
.pp-info-i{cursor:help;color:var(--ink3);border-bottom:1px dotted var(--ink3);font-size:12px}
.pp-about{max-width:780px;margin:22px auto 0;padding:0 4px}
.pp-about-h{font-size:15px;font-weight:800;letter-spacing:-.01em;margin-bottom:10px}
.pp-feat{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.pp-feat li{position:relative;padding-left:18px;font-size:14px;color:var(--ink2);line-height:1.5}
.pp-feat li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--mint)}
/* Same pre-check facts as the app (0 price-research). Scoped under .pp so the wi- rows work on desktop. */
  .pp .wi-sechead{display:flex;align-items:baseline;margin:20px 0 6px}
.pp .wi-sect{font-size:15px;font-weight:800;letter-spacing:-.01em;margin:0}
.pp .wi-facts{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.pp .wi-fact{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.pp .wi-factk{color:var(--ink3);flex:none;max-width:46%}
.pp .wi-factv{font-weight:600;color:var(--ink);text-align:right;min-width:0;font-variant-numeric:tabular-nums}
.pp .wi-adds{margin:4px 0 16px}
.pp .wi-add{padding:8px 0}
.pp .wi-add b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.pp .wi-add i{display:block;font-style:normal;font-size:13px;color:var(--ink3);line-height:1.45;margin-top:2px}
.pp-risk{margin:14px 0 0;padding:12px 14px;border:1.5px solid #B91C1C;background:#FEF2F2;border-radius:12px}
.pp-risk b{display:block;color:#991B1B;font-size:14px;font-weight:800;margin-bottom:4px}
.pp-risk span{display:block;color:#7F1D1D;font-size:13px;line-height:1.45}
.pp-prices{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin:15px 0 2px}
.pp-now{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.02em;font-family:'JetBrains Mono',ui-monospace,monospace}
/* Owned usual — label unstruck; amount may be struck. Never a bare retailer-style "was". */
  .pp-was{font-size:14px;color:var(--ink3);text-decoration:none;font-weight:600;margin-left:8px}
.pp-was s{text-decoration:line-through;font-weight:500;color:#6B7280}
.pp-off{font-size:13px;font-weight:800;color:var(--ink2);background:var(--mist);border:1px solid var(--line);border-radius:8px;padding:3px 10px}
.pp-advnote{font-size:12.5px;color:var(--ink3);margin-top:8px}
.wi-apology{
  margin:14px 0 8px;padding:18px 18px 16px;border-radius:14px;
  background:linear-gradient(165deg,#f7f4ef 0%,#eef3f1 55%,#e8eef5 100%);
  border:1px solid rgba(28,40,51,.08);
  box-shadow:0 10px 28px rgba(20,32,44,.06);
}
.wi-apology-kicker{font:600 11px/1.2 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#5a6a78;margin:0 0 8px}
.wi-apology-title{font:650 1.35rem/1.25 "Fraunces","Source Serif 4",Georgia,serif;color:#1c2833;margin:0 0 10px;max-width:28ch}
.wi-apology-body{font:400 15px/1.55 "IBM Plex Sans",system-ui,sans-serif;color:#3d4d5c;margin:0 0 14px;max-width:42ch}
.wi-apology-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:10px;border:0;background:#1c2833;color:#f7f4ef;font:600 14px/1 "IBM Plex Sans",system-ui,sans-serif;cursor:pointer;text-decoration:none}
.wi-apology-cta:hover{background:#2a3a48}
.wi-apology-cta:focus-visible{outline:2px solid #1c2833;outline-offset:3px}
.wif{width:100%;max-width:370px;margin:18px 0 8px;border:none;border-radius:14px;cursor:pointer;font-family:inherit;background:linear-gradient(180deg,#ff6a3d,#f2481b);color:#fff;font-weight:800;font-size:19px;padding:15px 14px;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 12px 24px -12px rgba(242,72,27,.55);transition:transform .12s}
.wif:active{transform:scale(.99)}
.wif:disabled{opacity:.9;cursor:default}
.wif-spin{width:16px;height:16px;border:2.4px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
.wif-sub{font-size:12.5px;color:var(--ink3);margin:2px 0 0;max-width:370px}
.pp-amz{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:11px 16px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--ink2);font-weight:700;font-size:13.5px;text-decoration:none;cursor:pointer}
.pp-amz-link{display:inline-block;margin-top:13px;color:var(--ink3);font-weight:600;font-size:13px;text-decoration:none;border-bottom:1px solid transparent}
.pp-amz-link:hover{color:var(--ink2);border-bottom-color:var(--line)}
.pp-amz-strong{margin-top:0;color:var(--ink);font-size:14px;font-weight:750}
.pp-band{padding:22px 24px;border-top:1px solid var(--line);animation:pcardIn .45s cubic-bezier(.2,.85,.25,1) both}
  @media(max-width:680px){.pp-band{padding:18px}}
.pp-vhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pp-vbadge{display:inline-flex;align-items:center;gap:9px;font-weight:850;font-size:30px;letter-spacing:-.02em;line-height:1}
  @media(max-width:680px){.pp-vbadge{font-size:26px}}
.pp-vtag{font-size:15px;font-weight:750}
.pp-vwhy{font-size:15px;color:var(--ink2);line-height:1.6;margin:12px 0 0;max-width:64ch}
.pp-vwhy b{color:var(--ink)}
.pp-moved{margin:10px 0 0;font-size:12.5px;font-weight:700;color:var(--ink2);line-height:1.4;max-width:64ch}
.pp-cta{display:flex;gap:11px;margin-top:18px;flex-wrap:wrap;align-items:center}
.pp-buy{width:auto;max-width:none;margin:0;display:inline-flex;font-size:15px;padding:13px 22px}
.pp-watch{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:12px 18px;font-weight:700;font-size:13.5px;color:var(--ink2);cursor:pointer;font-family:inherit}
.pp-watch.on{border-color:var(--buy-bd);color:var(--buy);background:var(--buy-bg)}
/* ── Checked receipt (verdict-revealed) — one composition,stamp first ── */
  .pp-receipt{position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--line);background:var(--card);padding:22px 24px 20px;box-shadow:var(--card-sh);animation:pcardIn .5s cubic-bezier(.2,.85,.25,1) both}
.pp-receipt::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--fair)}
.pp-receipt.tone-buy::before{background:var(--buy)}
.pp-receipt.tone-wait::before{background:var(--wait)}
.pp-receipt.tone-skip::before{background:var(--skip)}
.pp-receipt.tone-fair::before{background:var(--fair)}
.pp-receipt-glow{position:absolute;pointer-events:none;width:420px;height:280px;right:-80px;top:-120px;border-radius:50%;opacity:.55;filter:blur(8px);background:radial-gradient(circle,rgba(74,103,214,.14),transparent 68%)}
.pp-receipt.tone-buy .pp-receipt-glow{background:radial-gradient(circle,rgba(15,157,87,.16),transparent 68%)}
.pp-receipt.tone-wait .pp-receipt-glow{background:radial-gradient(circle,rgba(181,130,10,.14),transparent 68%)}
.pp-receipt-grid{display:grid;grid-template-columns:1fr 200px;gap:22px;align-items:start;position:relative;z-index:1}
  @media(max-width:720px){.pp-receipt{padding:18px 16px 16px}.pp-receipt-grid{grid-template-columns:1fr;gap:14px}}
.pp-stamp-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.pp-stamp{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:clamp(34px,5vw,44px);letter-spacing:-.03em;line-height:1;animation:ppStamp .55s cubic-bezier(.2,.85,.25,1) both}
.pp-stamp-sub{font-size:14px;font-weight:750;letter-spacing:.01em}
/* --buy as 14px text on white is 3.51:1. The stamp itself is large type (3:1 floor);
     this subtitle is not. -deep siblings exist for text-on-white; --buy stays the verdict hue. */
  .pp-receipt.tone-buy .pp-stamp-sub{color:var(--buy-deep)}
.pp-receipt.tone-wait .pp-stamp-sub{color:var(--wait-deep)}
.pp-receipt.tone-skip .pp-stamp-sub{color:var(--skip)}
.pp-receipt.tone-fair .pp-stamp-sub{color:var(--fair)}
  @keyframes ppStamp{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.pp-receipt-why{font-size:15.5px;line-height:1.55;color:var(--ink2);margin:10px 0 0;max-width:54ch}
.pp-receipt-why b{color:var(--ink)}
.pp-thin{margin-top:6px;font-size:12.5px;font-weight:650;color:var(--ink3);letter-spacing:.01em}
.pp-receipt-title{font-family:'DM Sans',system-ui,sans-serif;font-weight:750;font-size:clamp(16px,2vw,18px);letter-spacing:-.015em;line-height:1.35;color:var(--ink);margin:14px 0 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pp-receipt-title.open{-webkit-line-clamp:unset;display:block}
.pp-title-more{margin-top:6px;border:none;background:none;padding:0;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink3);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.pp-receipt-meta{font-size:12.5px;color:var(--ink3);margin-top:6px;font-weight:600}
.pp-receipt-shot{background:linear-gradient(180deg,#f8fafc,#fff);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px}
  @media(max-width:720px){.pp-receipt-shot{min-height:0;max-width:220px;margin:4px auto 0;padding:10px}}
.pp-receipt-shot img{max-width:100%;max-height:180px;object-fit:contain}
  @media(max-width:720px){.pp-receipt-shot img{max-height:120px}}
.pp-tape{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px 14px;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line);position:relative;z-index:1;animation:ppTape .55s .08s both cubic-bezier(.2,.85,.25,1)}
  @keyframes ppTape{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pp-tape-k{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.pp-tape-v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:clamp(17px,2.2vw,20px);font-weight:800;color:var(--ink);margin-top:4px;letter-spacing:-.02em}
.pp-tape-v.strike{color:#6B7280;text-decoration:line-through;font-weight:600}
.pp-tape-v.hi{color:var(--skip)}
.pp-tape-v.lo{color:var(--buy-deep)}
.pp-tape-hint{grid-column:1/-1;font-size:11.5px;color:var(--ink3);line-height:1.4;margin-top:2px}
.pp-receipt-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;align-items:center;position:relative;z-index:1}
/* appearance:none — this CTA is an <a>. Chrome's mobile UA (and iOS) can skip painting
     background-image on native links; the old linear-gradient shorthand also zeroed
     background-color,so phone width rendered white type on the card (1.01:1).
     Colour and image are split so a later `background` reset cannot drop the fill
     unless it beats a.pp-cta-pri.buy. */
  .pp-cta-pri{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:12px;padding:13px 18px;font-family:inherit;font-weight:800;font-size:14.5px;cursor:pointer;text-decoration:none;appearance:none;-webkit-appearance:none;background-color:var(--ink);background-image:none;color:#fff;max-width:100%;box-sizing:border-box}
a.pp-cta-pri.buy,.pp-cta-pri.buy{background-color:var(--buy-deep);background-image:none;box-shadow:0 10px 22px -12px rgba(11,122,68,.55)}
.pp-cta-sec{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 16px;font-family:inherit;font-weight:700;font-size:13.5px;color:var(--ink2);cursor:pointer;text-decoration:none}
.pp-cta-sec:hover{border-color:#c5ccd6;color:var(--ink)}
.pp-cta-ghost{background:none;border:none;color:var(--ink3);font:inherit;font-size:13px;font-weight:650;cursor:pointer;padding:8px 4px;text-decoration:underline;text-underline-offset:2px}
.pp-vgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin-top:16px;align-items:start}
  @media(max-width:820px){.pp-vgrid{grid-template-columns:1fr}}
.pp-panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 1px 2px rgba(14,26,43,.04)}
  @media(max-width:680px){.pp-panel{padding:16px}}
.pp-ph{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:0 0 14px}
.pp-note{font-size:12.5px;color:var(--ink3);text-align:center;margin-top:10px}
.pp-basis{font-size:12.5px;color:var(--ink2);margin-top:16px;line-height:1.55}
.pp-where{margin-top:14px}
.pp-checked .qa{margin-top:14px;border-radius:16px}
.pp-buybar.soft{background:#243044}
.pp-buybar.soft .pp-buybar-cta{color:#d7dde8;font-weight:700}
.vpill{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border-radius:9px;padding:7px 13px;font-weight:800;font-size:13px;border:1px solid}
/* ── modal ── */
  .backdrop{position:fixed;inset:0;background:rgba(16,18,24,.5);display:flex;align-items:flex-start;justify-content:center;padding:40px 18px;overflow:auto;z-index:50}
.modal{background:var(--card);border-radius:18px;max-width:620px;width:100%;padding:24px;box-shadow:0 30px 80px -30px rgba(0,0,0,.5);position:relative}
.x{position:absolute;top:16px;right:16px;border:none;background:var(--bg);width:32px;height:32px;border-radius:50%;font-size:16px;cursor:pointer;color:var(--ink2)}
.mhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:2px;padding-right:30px}
.mname{font-size:15.5px;font-weight:800;letter-spacing:-.01em;line-height:1.32}
.mmeta{font-size:12.5px;color:var(--ink3);margin-top:4px}
.mbeststore{font-size:11px;font-weight:700;color:var(--ink3);text-align:right;margin-top:3px;white-space:nowrap}
.srcchip{font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px}
.srcchip.live{background:var(--buy-bg);color:var(--buy);border:1px solid var(--buy-bd)}
.srcchip.demo{background:var(--wait-bg);color:#8a6400;border:1px solid var(--wait-bd)}
.mprice{font-size:24px;font-weight:800;color:#d64533;text-align:right;white-space:nowrap}
.mwas{font-size:13px;color:var(--ink3);text-decoration:line-through;text-align:right}
.verdict{display:flex;align-items:center;gap:13px;margin:18px 0 4px;padding:15px 17px;border-radius:14px;border:1px solid}
.vbadge{font-weight:900;font-size:27px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;line-height:1}
.vsubwrap{display:flex;flex-direction:column;gap:2px;min-width:0}
.vsub{font-size:13.5px;font-weight:700}
.vwhy{font-size:12.5px;font-weight:600;color:var(--ink2);line-height:1.42}
.mstats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0 8px}
.mstat{border:1px solid var(--line);border-radius:12px;padding:11px 10px;background:#fbfcfe;text-align:center}
.mstat .mk{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px}
.mstat .mv{font-size:21px;font-weight:900;font-family:'JetBrains Mono';color:var(--ink);line-height:1}
.mstat.low{background:var(--buy-bg);border-color:var(--buy-bd)}
.mstat.low .mv{color:var(--buy)}
.mstat .mstore{font-size:10px;font-weight:700;color:var(--ink3);margin-top:3px}
.mstats-note{font-size:11.5px;color:var(--ink3);line-height:1.5;margin-bottom:6px}
.gauge{margin:20px 2px 6px}
.gauge .ends{display:flex;justify-content:space-between;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);margin-bottom:7px}
.track{position:relative;height:15px;border-radius:999px;background:linear-gradient(90deg,#3b82f6 0%,#22c1a6 34%,#f5c518 66%,#ef4444 100%);box-shadow:inset 0 1px 3px rgba(0,0,0,.14)}
.knob{position:absolute;top:50%;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--ink);transform:translate(-50%,-50%);box-shadow:0 3px 8px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;font-size:12px;transition:left .5s cubic-bezier(.4,1.3,.5,1)}
.heatlbl{text-align:center;margin-top:9px;font-size:12px;font-weight:600;color:var(--ink2)}
/* Deal Gauge — verdict-colored price zones + a price-tag pin that springs in,plus the BUY/WAIT/
     SKIP/FAIR key. Replaces the confusing heat/temperature gauge. Motion is reduced-motion-safe. */
  .dmeter{margin:20px 2px 4px}
.dm-scale{position:relative;margin-top:50px}
.dm-track{display:flex;gap:3px;height:58px}
.dm-z{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fff;text-align:center;padding:2px;border-radius:10px;position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.2,.85,.25,1),box-shadow .4s,filter .4s,opacity .4s}
.dm-z::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.17),transparent 55%);pointer-events:none}
.dm-z.dim{filter:saturate(.62) brightness(.97);opacity:.9}
.dm-z.hit{transform:translateY(-3px) scale(1.02);z-index:2;box-shadow:0 10px 22px -8px rgba(0,0,0,.42);filter:none;opacity:1}
.dm-zk{font-size:11px;font-weight:800;line-height:1;white-space:nowrap;position:relative}
.dm-zr{font:700 10px/1 var(--mono);opacity:.95;white-space:nowrap;position:relative}
.dm-z.dz-skip{background:linear-gradient(180deg,#4a80ff,var(--skip))}
.dm-z.dz-fair{background:linear-gradient(180deg,#7d8798,var(--fair))}
.dm-z.dz-good{background:linear-gradient(180deg,#45b384,#2f9d6f)}
.dm-z.dz-buy{background:linear-gradient(180deg,#2bb56a,var(--buy))}
.dm-tag{position:absolute;top:-46px;transform:translateX(-50%);text-align:center;z-index:3;transition:left .6s cubic-bezier(.3,1.35,.5,1);animation:dmtag .78s cubic-bezier(.3,1.4,.5,1) both}
  @keyframes dmtag{0%{transform:translate(-50%,-46px);opacity:0}60%{transform:translate(-50%,6px);opacity:1}80%{transform:translate(-50%,-2px)}100%{transform:translate(-50%,0)}}
.dm-tag-l{display:block;font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px}
.dm-tag-b{display:inline-block;color:#fff;font:800 15px/1 var(--mono);padding:8px 12px;border-radius:10px;box-shadow:0 10px 20px -7px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.28);position:relative}
.dm-tag-b::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:inherit;border-radius:2px}
.dm-cap{text-align:center;font-size:12.5px;font-weight:600;color:var(--ink2);margin-top:16px}
.dm-key{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:16px}
.dm-chip{border:1.5px solid var(--line);border-radius:13px;padding:11px 8px;text-align:center;background:var(--card);opacity:.5;transform:scale(.97);transition:opacity .35s,transform .35s,border-color .35s}
.dm-chip.on{opacity:1;transform:scale(1.04);animation:dmpulse 1.6s ease-out}
  @keyframes dmpulse{0%{box-shadow:0 0 0 0 var(--gl)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
.dm-cw{font-weight:850;font-size:13px;display:flex;align-items:center;justify-content:center;gap:4px}
.dm-cm{font-size:10px;color:var(--ink3);margin-top:4px;font-weight:600;display:block}
.dm-chip.buy{background:var(--buy-bg);--gl:rgba(31,157,85,.45)}
.dm-chip.buy .dm-cw{color:var(--buy)}
.dm-chip.buy.on{border-color:var(--buy)}
.dm-chip.wait{background:var(--wait-bg);--gl:rgba(201,138,0,.45)}
.dm-chip.wait .dm-cw{color:var(--wait)}
.dm-chip.wait.on{border-color:var(--wait)}
.dm-chip.skip{background:var(--skip-bg);--gl:rgba(47,109,246,.45)}
.dm-chip.skip .dm-cw{color:var(--skip)}
.dm-chip.skip.on{border-color:var(--skip)}
.dm-chip.fair{background:var(--fair-bg);--gl:rgba(107,114,128,.45)}
.dm-chip.fair .dm-cw{color:var(--fair)}
.dm-chip.fair.on{border-color:var(--fair)}
  @media(max-width:520px){.dm-key{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:430px){.dm-zk{font-size:9.5px}.dm-zr{font-size:8.5px}.dm-track{height:54px}}
  @media(prefers-reduced-motion:reduce){.dm-tag{animation:none}.dm-chip.on{animation:none}.dm-z,.dm-tag{transition:none}}
.why{margin:18px 0 4px}
.why .lbl,.spark .lbl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:9px}
.why ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.why li{display:flex;gap:10px;font-size:14px;align-items:flex-start}
.spark{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.spark .note{font-size:12px;color:var(--ink3);margin:10px 0 0;text-align:center}
/* Price-history chart card — gradient area,$ axis,month labels */
  .vchart{border:1px solid var(--line);border-radius:14px;padding:14px 16px 10px;background:#fff;box-shadow:0 12px 30px -24px rgba(16,24,40,.4)}
.vchart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.vchart-title{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.vchart-head .rngrow{margin-bottom:0}
.vchart .vc-read{text-align:center;margin-top:2px}
/* Range toggles — segmented control (grouped,active raised) */
  .rngrow{display:inline-flex;gap:2px;background:var(--mist,#f1f3f7);border-radius:10px;padding:3px;margin-bottom:10px}
.rng{border:none;background:none;border-radius:7px;padding:7px 14px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--ink3);cursor:pointer;transition:color .14s,background .14s,box-shadow .14s;font-family:inherit}
.rng:hover{color:var(--ink)}
.rng.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(13,21,18,.12)}
.vc-read{font-size:12.5px;color:var(--ink2);margin-top:9px;text-align:center}
.vc-read .mono{font-family:'JetBrains Mono'}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stat{background:var(--bg);border-radius:11px;padding:11px 12px}
.stat .k{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.stat .v{font-family:'JetBrains Mono';font-weight:700;font-size:17px;margin-top:3px}
.basis{margin-top:14px;font-size:12px;color:var(--ink3);text-align:center}
.spin{width:30px;height:30px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--orange);margin:24px auto;animation:sp .8s linear infinite}
  @keyframes sp{to{transform:rotate(360deg)}}
.snote{background:var(--wait-bg);border:1px solid var(--wait-bd);border-radius:11px;padding:11px 14px;font-size:13px;color:#7a5b00;margin-top:12px}
.offers{margin-top:18px}
.savebanner{background:var(--buy-bg);border:1px solid var(--buy-bd);color:#15703c;font-weight:700;font-size:13.5px;border-radius:10px;padding:10px 13px;margin-bottom:10px}
.okbanner{background:var(--bg);border:1px solid var(--line);color:var(--ink2);font-weight:600;font-size:13px;border-radius:10px;padding:9px 13px;margin-bottom:10px;line-height:1.45}
.okbanner.buy{background:var(--buy-bg);border-color:var(--buy-bd);color:#15703c;font-weight:700}
.okbanner.ghost{background:#fbf7ef;border-color:#ece2cf;color:var(--ink2)}
.okbanner b{color:var(--ink)}
.otable{display:flex;flex-direction:column;gap:6px}
.orow{display:grid;grid-template-columns:1fr auto 82px 42px;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.orow.best{border-color:var(--buy-bd);background:var(--buy-bg)}
.ostore{font-weight:600;color:var(--ink)}
.ofav{width:18px;height:18px;border-radius:4px;margin-right:8px;object-fit:contain;background:#fff;vertical-align:-4px}
.odelta{font-size:12px;color:var(--ink3);white-space:nowrap}
.odelta.cheaper{color:var(--buy);font-weight:800}
.odelta.higher{color:var(--coral-d);font-weight:800}
.odelta.same,.odelta.self{color:var(--ink3);font-weight:600}
.otrust{color:var(--buy);font-weight:900;margin-left:5px;font-size:12px}
.omore{width:100%;margin-top:8px;background:none;border:1px dashed var(--line);color:var(--ink2);font-weight:700;font-size:12.5px;padding:9px;border-radius:10px;cursor:pointer;font-family:inherit;transition:.14s}
.omore:hover{border-color:#c4ccd8;color:var(--ink)}
.oprice{font-weight:800;text-align:right;font-family:'JetBrains Mono'}
.obest{font-size:10px;font-weight:800;color:#fff;background:var(--buy);border-radius:6px;padding:2px 6px;text-align:center}
a.orow{text-decoration:none;color:inherit;cursor:pointer;transition:.12s}
a.orow:hover{border-color:#c4ccd8;box-shadow:0 5px 16px -11px rgba(20,22,28,.4)}
.ogo{font-size:12px;font-weight:700;color:var(--blue);text-align:center;white-space:nowrap}
.ofoot{font-size:11.5px;color:var(--ink3);margin-top:9px;line-height:1.5}
.webtag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-d);background:var(--teal-bg);padding:4px 10px;border-radius:20px;margin-bottom:10px}
.webbest{background:var(--teal-bg);border:1px solid #bfe9e3;color:var(--teal-d);border-radius:10px;padding:10px 13px;font-size:14px;font-weight:600}
.webbest b{font-family:'JetBrains Mono';font-size:16px;color:var(--teal-d)}
.oload{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--ink3);font-weight:600;padding:6px 0}
.oload-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);display:inline-block;animation:oloadb 1s ease-in-out infinite}
.oload-dot:nth-child(2){animation-delay:.15s}
.oload-dot:nth-child(3){animation-delay:.3s;margin-right:5px}
  @keyframes oloadb{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
/* tap-to-compare: cross-store prices load on demand (not auto — saves the search quota) */
  .cbtn{width:100%;border:none;cursor:pointer;border-radius:11px;padding:12px 14px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:14px;font-weight:800;color:#fff;background:var(--navy);font-family:inherit;transition:background .15s,transform .1s}
.cbtn:hover{background:var(--navy2)}
.cbtn:active{transform:scale(.99)}
.cbtn svg{width:17px;height:17px}
.chint{font-size:11.5px;color:var(--ink3);text-align:center;margin-top:8px;line-height:1.45}
/* default Amazon buy option (shown before comparing stores) */
  .obuy{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;transition:.14s;margin-bottom:8px}
.obuy:hover{border-color:#ffd2c2;box-shadow:0 10px 22px -12px rgba(255,90,44,.4);transform:translateY(-1px)}
.obuy-primary{border:1.5px solid var(--buy-bd,#b7e2c6);background:linear-gradient(180deg,#f4fbf6,#fff);box-shadow:0 12px 28px -20px rgba(17,185,130,.5)}
.obuy-badge{display:inline-flex;align-items:center;gap:3px;margin-left:8px;font-size:10px;font-weight:800;color:#0a7a55;background:rgba(17,185,130,.13);border:1px solid rgba(17,185,130,.32);border-radius:20px;padding:2px 8px;letter-spacing:.02em;flex-shrink:0}
.obuy-l{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px;color:var(--ink)}
.obuy-fav{width:20px;height:20px;border-radius:5px;display:block}
.obuy-r{display:flex;align-items:center;gap:12px}
.obuy-price{font-family:'JetBrains Mono',monospace;font-weight:900;font-size:17px;color:var(--ink)}
.obuy-go{font-weight:800;font-size:13px;color:var(--coral-deep);white-space:nowrap}
.obuy-note{font-size:11.5px;color:var(--ink3);line-height:1.5;margin:0 0 12px}
.cbtn.cbtn-sec{background:#f6f8fb;color:var(--ink2)}
.cbtn.cbtn-sec:hover{background:#eef1f6}
.chint b{color:var(--ink2);font-weight:600}
.ocond{font-size:9px;font-weight:800;letter-spacing:.03em;padding:1px 5px;border-radius:4px;margin-left:6px;vertical-align:middle;text-transform:uppercase}
.ocond.refurbished{background:var(--wait-bg);color:var(--wait);border:1px solid var(--wait-bd)}
.ocond.used{background:#eef0f3;color:#5b6675}
.orate{font-size:12px;font-weight:800;white-space:nowrap;text-align:right}
.orate.good{color:#0a7d3f}
.orate.ok{color:#1e5cad}
.orate.meh{color:var(--ink3)}
.orate.warn{color:#b0791a}
.rcond{position:absolute;top:10px;left:10px;z-index:2;background:var(--ink);color:#fff;font-size:10px;font-weight:800;letter-spacing:.02em;padding:2px 9px;border-radius:999px;box-shadow:0 1px 3px rgba(14,26,43,.18)}
.mcond{margin-top:12px;font-size:13.5px;color:var(--ink2);background:var(--wait-bg);border:1px solid var(--wait-bd);border-radius:11px;padding:11px 14px;line-height:1.5}
.mcond b{color:var(--wait)}
.resfilter{margin:-2px 0 14px}
.reschk{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2);font-weight:600;cursor:pointer;background:#fff;border:1px solid var(--line);padding:8px 13px;border-radius:10px}
.reschk.on{border-color:#2f6df6;color:#2f6df6;background:#eef3fb}
.reschk input{cursor:pointer;width:15px;height:15px;accent-color:var(--ink)}
.onote{font-size:12.5px;color:var(--ink3);line-height:1.5}
.cmp{margin-top:40px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.cmp-h{font-size:20px;font-weight:800;letter-spacing:-.01em}
.cmp-sub{font-size:12.5px;color:var(--ink3);margin:5px 0 16px}
.cmp-scroll{overflow-x:auto}
.cmp-table{width:100%;border-collapse:collapse;min-width:640px}
.cmp-table th{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--ink3);text-align:center;padding:8px 10px;border-bottom:1px solid var(--line)}
.cmp-table th:first-child{text-align:left}
.cmp-table td{padding:13px 10px;text-align:center;border-bottom:1px solid var(--line)}
.cmp-table td.tname{text-align:left;font-weight:700;color:var(--ink)}
.cmp-table tr.us td{background:var(--buy-bg)}
.cmp-table tr.us td.tname{color:#15703c}
.tsub{display:block;font-size:11.5px;font-weight:500;color:var(--ink3)}
.watchbtn{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:9px;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.85);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;color:#8b93a1;transition:.12s}
.watchbtn:hover{background:#fff;color:var(--orange)}
.watchbtn.on{color:var(--orange);border-color:var(--orange);background:#fff}
.deal.worth{border-color:var(--buy);box-shadow:0 0 0 3px var(--buy-bg)}
.wbanner{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-size:13.5px;color:var(--ink2);margin:16px 0;display:flex;gap:11px;align-items:flex-start;line-height:1.5}
.wbanner b{color:var(--ink)}
.wempty{text-align:center;padding:56px 20px;color:var(--ink3)}
.wempty .big{font-size:44px}
.wempty .t{font-size:18px;font-weight:800;color:var(--ink);margin:10px 0 6px}
.mactions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.mactions.small{margin:8px 0 4px;gap:7px}
.mactions.small .mwatch,.mactions.small .mshare{font-size:12px;padding:6px 11px;margin-top:0}
.mactions .mwatch{margin-top:0}
.mshare{display:inline-flex;align-items:center;gap:7px;border-radius:9px;padding:10px 16px;font-weight:700;font-size:13.5px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink2)}
.mshare:hover{border-color:#c4ccd8;color:var(--ink)}
/* Share sheet — previews the real /og card (WYSIWYG) + Share/Copy/Save. Reduced-motion-safe. */
  .shs-back{position:fixed;inset:0;z-index:1100;background:rgba(10,17,30,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px;animation:welfade .2s ease}
.shs{position:relative;width:100%;max-width:430px;max-height:94vh;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px 22px 20px;box-shadow:0 30px 80px -20px rgba(16,24,40,.5);animation:welpop .28s cubic-bezier(.2,.9,.3,1.2)}
.shs-x{position:absolute;top:15px;right:15px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink3);font-size:14px;cursor:pointer;line-height:1}
.shs-x:hover{color:var(--ink);border-color:var(--ink3)}
.shs-eyebrow{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--buy)}
.shs-sub{font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin:4px 0 0}
.shs-frame{margin:15px auto 0;position:relative;width:100%;max-width:270px;aspect-ratio:1080/1562;border-radius:16px;overflow:hidden;background:linear-gradient(110deg,#eef2f7 30%,#e2e8f1 50%,#eef2f7 70%);background-size:220% 100%;animation:shsShim 1.3s ease-in-out infinite;border:1px solid var(--line)}
  @keyframes shsShim{from{background-position:180% 0}to{background-position:-40% 0}}
.shs-frame.loaded{animation:none;background:#0e1729}
.shs-card{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s ease}
.shs-card.show{opacity:1}
.shs-cap{font-size:12.5px;color:var(--ink3);text-align:center;margin:11px 0 2px;line-height:1.4}
.shs-acts{display:grid;grid-template-columns:1fr;gap:9px;margin:14px 0 0}
.shs-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:13px 12px;font-weight:800;font-size:14px;cursor:pointer;font-family:inherit;text-decoration:none;border:1px solid var(--line);background:var(--card);color:var(--ink2);transition:transform .12s,border-color .12s,color .12s}
.shs-b:hover{border-color:#c4ccd8;color:var(--ink);transform:translateY(-1px)}
.shs-b:disabled{opacity:.55;pointer-events:none}
.shs-b.primary{grid-column:1 / -1;background:var(--buy);color:#fff;border-color:transparent;box-shadow:0 6px 18px -6px rgba(31,157,85,.55)}
.shs-b.primary:hover{box-shadow:0 10px 24px -8px rgba(31,157,85,.7);color:#fff}
.shs-b.copied{border-color:var(--buy);color:var(--buy)}
  @media (prefers-reduced-motion:reduce){.shs,.shs-back,.shs-frame,.shs-card,.shs-b{animation:none!important;transition:none!important}.shs-card{opacity:1}}
.mwatch{display:inline-flex;align-items:center;gap:7px;border-radius:9px;padding:10px 16px;font-weight:700;font-size:13.5px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink2);margin-top:14px}
.mwatch.on{background:var(--orange);color:#fff;border-color:var(--orange)}
.alertbox{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.albl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.arow{display:flex;gap:8px}
.arow input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;font-family:inherit;color:var(--ink)}
.arow input:focus{outline:none;border-color:#cdbfad}
.abtn{background:var(--orange);color:#fff;border:none;border-radius:10px;padding:10px 15px;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap}
.abtn.ghost{background:#fff;color:var(--ink2);border:1px solid var(--line)}
.ahint{font-size:12px;color:var(--ink3);margin-top:9px;line-height:1.5}
.astat{margin-top:10px;font-size:13px;border-radius:10px;padding:9px 12px;background:var(--bg);color:var(--ink2)}
.astat.ok{background:var(--buy-bg);color:#15703c;border:1px solid var(--buy-bd)}
.astat.err{background:#fdecea;color:#9a2b23;border:1px solid #f3c2bd}
/* Verdict chips on saved-list rows (was .pa-chip) */
  .wl-meta .pa-chip{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:10px;padding:2px 7px;border-radius:7px;border:1px solid}
.pa-chip.wait{background:var(--wait-bg);color:var(--wait);border-color:var(--wait-bd)}
.pa-chip.buy{background:var(--buy-bg);color:var(--buy);border-color:var(--buy-bd)}
.pa-chip.skip{background:var(--skip-bg);color:var(--skip);border-color:var(--skip-bd)}
.pa-chip.fair{background:var(--fair-bg);color:var(--fair);border-color:var(--fair-bd)}
.wl-check{flex:none;margin-left:auto;background:var(--mist);border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;color:var(--ink)}
.wl-check:hover{border-color:var(--coral)}
.wl-h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:22px;display:flex;align-items:center;gap:9px;margin-bottom:4px}
.wl-n{background:var(--coral);color:#fff;font-size:12px;font-weight:800;border-radius:999px;padding:1px 9px;font-family:'Inter',sans-serif}
.wl-sub{font-size:12.5px;color:var(--ink3);margin-bottom:12px}
.wl-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line)}
.wl-row img{width:44px;height:44px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:9px;padding:3px;flex:none}
.wl-name{font-weight:700;font-size:13.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.wl-meta{font-size:11.5px;color:var(--ink2);margin-top:4px;display:flex;align-items:center;gap:7px}
.wl-meta .pa-chip{padding:2px 7px;font-size:10px}
.wl-x{flex:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:9px;width:36px;height:36px;font-size:15px;cursor:pointer}
.wl-x:hover{border-color:var(--coral)}
.wl-empty{text-align:center;color:var(--ink3);font-size:13.5px;padding:22px 10px;line-height:1.6}
.viewtog{margin-left:auto;display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.vbtn{border:none;background:#fff;padding:8px 12px;cursor:pointer;color:var(--ink3);font-size:16px;line-height:1;display:flex;align-items:center}
.vbtn.on{background:var(--blue);color:#fff}
.list{display:flex;flex-direction:column;gap:8px}
.drow{display:grid;grid-template-columns:62px 38px 1fr auto auto 32px;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 15px;cursor:pointer;transition:.12s}
.drow:hover{border-color:#c4ccd8;box-shadow:0 6px 18px -12px rgba(20,22,28,.3)}
.rheat{color:#fff;font-weight:800;font-size:12px;padding:3px 8px;border-radius:999px;text-align:center;white-space:nowrap}
.remoji{font-size:26px;text-align:center}
.rname{font-weight:700;font-size:15px;letter-spacing:-.01em}
.rmeta{font-size:12px;color:var(--ink3);margin-top:1px}
.rprice{text-align:right;white-space:nowrap}
.rprice .now{font-weight:800;color:#d64533;font-size:16px}
.rprice .was{font-size:12px;color:var(--ink3);text-decoration:line-through;margin-left:6px}
.watchbtn2{border:1px solid var(--line);background:#fff;border-radius:8px;width:30px;height:30px;cursor:pointer;color:#8b93a1;font-size:14px}
.watchbtn2.on{color:var(--orange);border-color:var(--orange)}
.foot{text-align:center;margin-top:44px;font-size:12px;color:var(--ink3)}
.copyright{margin:12px auto 0;max-width:720px;font-size:11px;color:var(--ink3);line-height:1.55}
/* ── Mobile ── */
  /* barcode scan */
  .scanmodal{max-width:460px}
.scanview{position:relative;width:100%;aspect-ratio:4/3;background:#0b1020;border-radius:12px;overflow:hidden;margin-bottom:11px}
.scanview video{width:100%;height:100%;object-fit:cover;display:block}
.scanline{position:absolute;left:8%;right:8%;height:2px;background:var(--orange);box-shadow:0 0 8px 1px rgba(255,122,30,.85);animation:scanmove 2.2s ease-in-out infinite}
  @keyframes scanmove{0%,100%{top:28%}50%{top:72%}}
.scanstatus{font-size:13.5px;color:var(--ink2);text-align:center;font-weight:600}
/* ── Scanner viewfinder (dark full-screen,corner brackets,scan line) ── */
  .scanx{position:fixed;inset:0;z-index:200;background:radial-gradient(120% 120% at 50% 0%,#182642,#05070d 74%);display:flex;align-items:center;justify-content:center;padding:24px}
.scanx-in{position:relative;width:100%;max-width:480px;background:#fff;border-radius:24px;padding:26px 26px 22px;text-align:left;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.scanx-close{position:absolute;top:18px;right:18px;background:#f0f2f7;border:1px solid var(--line);color:var(--ink2);width:34px;height:34px;border-radius:50%;font-size:14px;cursor:pointer;z-index:2}
.scanx-close:hover{background:#e6e9f0;color:var(--ink)}
.scanx-title{color:var(--ink);font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:23px;letter-spacing:-.01em}
.scanx-sub{color:var(--ink2);font-size:13.5px;line-height:1.5;margin:8px 0 18px;max-width:46ch}
.scanx-view{position:relative;width:100%;aspect-ratio:4/3;background:#0b1020;border-radius:18px;overflow:hidden}
.scanx-view video{width:100%;height:100%;object-fit:cover;display:block}
/* Blocked-camera panel. Same box as the viewfinder so the sheet does not resize when the
     state flips — it reads as the camera area explaining itself,not as an error page. */
  .scanx-denied{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:9px;padding:22px 24px;text-align:center;color:#EEF2F8}
.scanx-denied-i{font-size:30px;line-height:1}
.scanx-denied b{font:800 15px/1.25 system-ui}
.scanx-denied span{font:450 13px/1.5 system-ui;color:#B7C0CD;max-width:44ch}
.scanx-denied-alt{display:flex;gap:9px;margin-top:5px;flex-wrap:wrap;justify-content:center}
.scanx-denied-alt button{font:700 13px/1 system-ui;padding:10px 15px;border-radius:10px;
    border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.scanx-denied-alt button:hover{background:rgba(255,255,255,.16)}
.scanx-toppill{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:rgba(8,12,22,.82);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:12px;font-weight:600;font-family:'JetBrains Mono',monospace;padding:7px 14px;border-radius:999px;white-space:nowrap;z-index:2}
.scanx-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px 8px rgba(0,0,0,.55);border-radius:18px}
.scanx-corner{position:absolute;width:32px;height:32px;border:3px solid var(--orange);pointer-events:none}
.scanx-corner.tl{top:16px;left:16px;border-right:none;border-bottom:none;border-radius:10px 0 0 0}
.scanx-corner.tr{top:16px;right:16px;border-left:none;border-bottom:none;border-radius:0 10px 0 0}
.scanx-corner.bl{bottom:16px;left:16px;border-right:none;border-top:none;border-radius:0 0 0 10px}
.scanx-corner.br{bottom:16px;right:16px;border-left:none;border-top:none;border-radius:0 0 10px 0}
.scanx-line{position:absolute;left:14%;right:14%;height:2px;background:linear-gradient(90deg,transparent,var(--orange),transparent);box-shadow:0 0 14px 2px rgba(255,122,30,.8);animation:scanmove 2.2s ease-in-out infinite}
.scanx-status{text-align:center;color:var(--ink);font-weight:800;font-size:14px;margin:15px 0 0}
.scanx-div{border-top:1px solid var(--line);margin:16px 0 0}
.scanx-alt{text-align:center;font-size:13.5px;color:var(--ink2);margin-top:14px}
.scanx-alt b{color:var(--buy);cursor:pointer;font-weight:800}
.scanx-fine{text-align:center;font-size:11px;color:var(--ink3);font-family:'JetBrains Mono',monospace;margin-top:9px;line-height:1.5}
  @keyframes scanpulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
  @media(prefers-reduced-motion:reduce){.scanx-line{animation:none;top:50%}.scanx-dot{animation:none}}

  @media (max-width:640px){
    .scanbtn{padding:11px 16px;font-size:13.5px}
    .nav-in{padding:11px max(15px,env(safe-area-inset-left)) 11px max(15px,env(safe-area-inset-right));gap:10px}
    .nav-links{gap:10px}
    .nav-links .hiw{display:none}
    .navbtn{padding:8px 13px;font-size:13px}
    .hero{padding:22px 0 36px}
    .herowrap{padding:0 16px}
    .hero-h1{font-size:clamp(34px,10vw,44px);line-height:1.03}
    .lead{font-size:15px;margin-bottom:18px}
    .showdown{gap:11px}
    .pcard{width:100%;max-width:300px}
    .search{max-width:100%}
    .search input{font-size:16px;padding:12px 10px}   /* 16px stops iOS zoom-on-focus */
    .search .btn{padding:0 15px;font-size:13.5px}
    .how{padding:34px 0 4px}
    .how-h{font-size:23px}
    .how-sub{font-size:14.5px}
    .steps{grid-template-columns:1fr}
    .foot-in{flex-direction:column;align-items:flex-start;gap:12px;padding:0 16px}
    .foot-note{padding:0 16px}
    .wrap{padding-left:max(15px,env(safe-area-inset-left));padding-right:max(15px,env(safe-area-inset-right))}
    .top{padding:12px 15px 0}
    .topbar{gap:10px 12px;flex-wrap:wrap;justify-content:space-between}
    .searchwrap{order:3;flex-basis:100%}
    .searchwrap input{font-size:14px;padding:10px 8px}
    .askbtn{padding:9px 13px;font-size:13px}
    .logotext{font-size:19px}
    .howlink{font-size:13px}
    .wrap{padding:18px 15px 60px}
    .h1{font-size:23px}
    .sub{font-size:14px}
    .herorow{flex-direction:column;gap:10px}
    .noaff{align-self:flex-start}
    .hot{padding:14px;margin:16px 0 8px}
    .hot-title{font-size:18px}
    .hot-sub{font-size:13px}
    .grid{grid-template-columns:repeat(2,1fr);gap:11px}
    .cgrid{grid-template-columns:1fr;gap:14px}
    /* 2-up cards are narrow — give the co-brand badge room: drop the minor retailer mark + shrink the badge a touch */
    .pcard-rl{display:none}
    .pcard-wm{font-size:9px}
    .pcard-v{font-size:10px;padding:2px 7px}
    .pcard-vb{gap:5px;padding:3px 4px 3px 8px}
    .pcard-emoji{font-size:50px}
    .dtop{height:118px}
    .dimg{padding:10px}
    .demoji{font-size:34px}
    .dbot{padding:11px 11px 13px;gap:6px}
    .dname{font-size:13px;min-height:2.5em}
    .dmeta{font-size:11.5px}
    .dprice .now{font-size:18px}
    .dcat{font-size:10px;padding:2px 8px;bottom:8px;left:8px}
    .heat{font-size:11px;padding:3px 8px;top:8px;left:8px}
    .dcoupbadge{bottom:8px;right:8px;font-size:9.5px;padding:2px 7px}
    .dcoupon{font-size:11.5px;padding:4px 8px}
    .reshead{flex-direction:column;gap:10px}
    .backbtn{align-self:flex-start}
    .backdrop{padding:14px 10px}
    .modal{padding:18px 15px;border-radius:15px}
    .mstats{gap:6px}
    .mstat{padding:9px 5px}
    .mstat .mv{font-size:17px}
    .mstat .mk{font-size:9px}
    .mhead{flex-direction:column;gap:10px;padding-right:26px}
    .mname{font-size:14.5px}
    .mprice,.mwas,.mbeststore{text-align:left}
    .mprice{font-size:22px}
    .mcoupon{font-size:13px;padding:10px 12px}
    .orow{grid-template-columns:1fr auto 56px 30px;gap:6px;font-size:12.5px;padding:8px 9px}
    .ostore{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  }
  @media (max-width:380px){
    .grid{grid-template-columns:1fr}
    .dtop{height:150px}
  }
/* ═══════════ NEW HOMEPAGE (nh-*) — redesign 2026-07 ═══════════ */
  html{overflow-x:clip;overscroll-behavior-x:none}
body{background:#f6f8fb}
.nh-hero>div{min-width:0}
.nh-wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.nh-eyebrow{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.nh-nav{position:sticky;top:0;background:rgba(252,253,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(230,235,243,.7);z-index:30}
.nh-nav-in{max-width:var(--page-max,1280px);margin:0 auto;padding:10px var(--page-gutter,40px);min-height:68px;display:flex;align-items:center;gap:14px}
/* Off-home pages (verdict / product / browse / you): search stays in the sticky nav. */
  .nh-nav-search{flex:1;min-width:0;max-width:760px}
.nh-nav-search .sf-top{width:100%}
.nh-nav-search .sf-search{width:100%;max-width:none}
.nh-nav-search .sf-sbox{max-width:none;height:48px}
.nh-nav-search .sf-sgo{padding:0 16px}
.nh-nav-search .sf-scanbtn{height:46px}
.nh-nav.has-search .nh-nlink,.nh-nav.has-search .nh-storepill{display:none}
.nh-nav.has-search .nh-links{margin-left:auto;flex:0 0 auto}
.nh-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer}
/* Inline-SVG brand logos (Wordmark/AppIcon). The wordmark keeps its 560:170 aspect; size by height. */
  .brandwm{display:block;height:31px;width:auto}
.brandmark{display:block;height:30px;width:auto;overflow:visible}
.brandlockup{display:block;height:34px;width:auto;overflow:visible}
.brandicon{display:block;height:34px;width:auto}
.nh-brand .brandlockup{height:36px}
.nh-foot-brand .brandlockup{height:29px}
/* Header/footer logo = navy tile (AppIcon) + wordmark (matches the design lockup). */
  .nh-brand{gap:11px}
.nh-brand .brandicon.nh-tile{height:48px;width:48px}
.nh-brand .brandwm{height:35px}
.nh-foot-brand .brandicon.nh-tile{height:40px;width:40px}
.nh-foot-brand .brandwm{height:24px}
/* store-status pill,top-right in the header */
  .nh-storepill{display:flex;align-items:center}
.nh-storepill .sf-soon{margin-top:0;padding:3px 12px 3px 3px;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.08)}
.nh-storepill .sf-soon .live{font-size:10px;padding:4px 9px 4px 8px}
.nh-storepill .sf-soon .msg{font-size:10.5px;color:var(--ink3)}
  @media(max-width:940px){.nh-storepill{display:none}}
.wm .sw{display:none}
/* Brand Kit v1 wordmark has no check swoosh — the verdict lives in the mark's green dot */
  /* the green "verdict" dot glows/pulses (brand: keep it green,don't recolor) */
  .vdot{transform-box:fill-box;transform-origin:center;animation:vdotGlow 2.4s ease-in-out infinite}
  @keyframes vdotGlow{0%,100%{filter:drop-shadow(0 0 1px rgba(34,197,94,.55));transform:scale(1)}50%{filter:drop-shadow(0 0 6px rgba(34,197,94,.95));transform:scale(1.16)}}
  @media(prefers-reduced-motion:reduce){.vdot{animation:none}}
.nh-wm{font-weight:900;font-size:26px;letter-spacing:-.03em;color:var(--navy)}
/* new brand wordmark: Worth [green ✓it pill] 4U */
  .wl{display:inline-flex;align-items:center;gap:7px;font-family:'Inter',system-ui,sans-serif;font-weight:900;letter-spacing:-.025em;line-height:1;font-size:25px}
.wl .w1{color:#152134}
.wl .wp{display:inline-flex;align-items:center;gap:3px;background:#20c069;border-radius:999px;padding:5px 11px 5px 9px}
.wl .wp svg{width:15px;height:15px;color:#fff;display:block}
.wl .wp .it{color:#fff;font-weight:800;font-size:.8em;letter-spacing:0}
.wl .w2{color:#ff5a2c}
.wl.dark .w1{color:#fff}
/* one-time reveal on load (check draws + shine); footer is a gentle fade; reduced-motion holds still */
  .wl .wp{position:relative;overflow:hidden}
.wl .shine{position:absolute;top:0;left:0;height:100%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-170%) skewX(-16deg);pointer-events:none}
.wl .w1{animation:wlFadeL .55s cubic-bezier(.2,.7,.3,1) both}
.wl .wp{animation:wlPop .5s .12s cubic-bezier(.2,.8,.3,1.25) both}
.wl .chk{stroke-dasharray:24;stroke-dashoffset:24;animation:wlDraw .5s .45s ease forwards}
.wl .it{opacity:0;animation:wlFadeIn .4s .62s ease forwards}
.wl .shine{animation:wlShine 5s 1.1s ease-in-out infinite}
.wl .w2{animation:wlFadeR .55s .28s cubic-bezier(.2,.7,.3,1) both}
.wl.dark .w1,.wl.dark .wp,.wl.dark .it,.wl.dark .w2{animation:wlFadeIn .6s ease both}
.wl.dark .chk{stroke-dashoffset:0;animation:none}
.wl.dark .shine{display:none}
.wl.dark .it{opacity:1}
  @keyframes wlFadeL{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
  @keyframes wlFadeR{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
  @keyframes wlPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
  @keyframes wlDraw{to{stroke-dashoffset:0}}
  @keyframes wlFadeIn{to{opacity:1}}
  @keyframes wlShine{0%{transform:translateX(-170%) skewX(-16deg)}16%{transform:translateX(280%) skewX(-16deg)}100%{transform:translateX(280%) skewX(-16deg)}}
  @media(prefers-reduced-motion:reduce){.wl *{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}.wl .shine{display:none!important}}
/* new brand wordmark — worthit·foryou with green swoosh underline */
  /* Brand wordmark — SF Pro Display (owner 16 Aug; matches WiApp). */
  .wm{position:relative;display:inline-block;padding-bottom:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;font-weight:800;font-size:25px;line-height:1;letter-spacing:-.05em;color:#0E1A2B;white-space:nowrap}
.wm .fy{color:#14B8A6;font-weight:800}
.wm .dc{color:#94A3B8;font-weight:800}
.wm .sw{position:absolute;left:-2px;bottom:0;width:74px;height:15px;overflow:visible;pointer-events:none}
.wm .sw path{fill:none;stroke:#22C55E;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:130;stroke-dashoffset:130;animation:swDraw .52s .35s cubic-bezier(.4,.7,.3,1) forwards}
  @keyframes swDraw{to{stroke-dashoffset:0}}
  @media(prefers-reduced-motion:reduce){.wm .sw path{stroke-dashoffset:0;animation:none}}
.wm.dark{color:#fff;font-size:22px;padding-bottom:0}
.wm.dark .fy{color:#14B8A6}
.wm.dark .dc{color:#22C55E}
.wm.dark .sw{width:66px;height:13px;bottom:-10px}
.wm.dark .sw path{stroke:#24D17E}
.wm.sm{font-size:15px;padding-bottom:6px;letter-spacing:-.03em}
.wm.sm .sw{width:45px;height:9px;left:-1px}
/* Header wordmark — larger,premium presence (scoped to the top-nav brand) */
  .nh-brand .wm{font-size:clamp(24px,2.5vw,31px);padding-bottom:0}
.nh-brand .wm .sw{width:92px;height:18px;left:-2px}
/* Unified navy-chip logo on the light top nav (not the dark footer .wm.dark). Matches the hero. */
  .nh-brand .wm:not(.dark){background:#0E1A2B;border-radius:11px;padding:8px 13px;color:#fff;font-size:clamp(19px,2vw,24px)}
.nh-brand .wm:not(.dark) .fy{color:#16B24A}
.nh-brand .wm:not(.dark) .dc{color:#22C55E}
/* fair-price row (verdict / modal / hero busted card) */
  .fpr{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-radius:12px;padding:10px 15px;margin:0 0 14px;animation:fprRise .8s cubic-bezier(.2,.9,.25,1) both}
.fpr.under{background:var(--buy-bg);border:1px solid var(--buy-bd);animation:fprRise .8s cubic-bezier(.2,.9,.25,1) both,fprGlow 1.1s ease-out .15s 1}
.fpr.over{background:#f6f8fb;border:1px solid var(--line)}
  @keyframes fprRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
  @keyframes fprGlow{0%{box-shadow:0 0 0 0 rgba(31,157,85,0)}30%{box-shadow:0 0 0 5px rgba(31,157,85,.18)}100%{box-shadow:0 0 0 0 rgba(31,157,85,0)}}
  @keyframes fprPop{0%{opacity:0;transform:scale(.55)}62%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
.fpr-l{display:flex;align-items:center;gap:9px;font-weight:700;font-size:13.5px;color:var(--ink2)}
.fpr-r{display:flex;align-items:center;gap:11px}
.fpr-val{display:inline-block;font-family:'JetBrains Mono',monospace;font-weight:900;font-size:18px;color:var(--buy-deep);animation:fprPop 1.2s cubic-bezier(.2,.9,.25,1) both}
.fpr.over .fpr-val{color:var(--ink)}
  @media(prefers-reduced-motion:reduce){.fpr,.fpr.under,.fpr-val{animation:none}}
.fpr-ok{font-weight:800;font-size:12.5px;color:var(--buy-deep)}
.fpr-over{font-weight:700;font-size:12.5px;color:var(--wait-deep)}
/* honest "Prime deal?" heads-up (non-BUY verdicts we can't see the Prime price for) */
  .phint{display:flex;gap:10px;align-items:flex-start;background:#eef4ff;border:1px solid #cfe0fb;border-radius:12px;padding:11px 14px;margin:0 0 14px;text-decoration:none;font-size:12.5px;line-height:1.5;color:var(--ink2)}
.phint:hover{border-color:#9dc0f7}
.phint b{color:#1e4fb0}
.phint-ic{font-size:15px;line-height:1.25;flex:none}
.phint-go{color:#1D4FD8;font-weight:800;white-space:nowrap}
.prc{margin:0 0 14px}
.prc-open{background:none;border:none;cursor:pointer;font:inherit;font-size:12.5px;color:var(--ink3,#6b7688);padding:8px 0;text-align:left}
.prc-open:hover{color:var(--ink2)}
.prc-open b{color:#2f6df6;font-weight:700}
.prc-form{display:flex;align-items:center;gap:8px;background:#f4f7fc;border:1px solid #d8e2f2;border-radius:12px;padding:8px 10px;flex-wrap:wrap}
.prc-cur{font-weight:800;color:var(--ink2);font-size:16px;padding-left:4px}
.prc-in{flex:1;min-width:80px;border:none;background:none;font:inherit;font-size:16px;font-weight:700;color:var(--ink);outline:none;padding:4px 2px}
.prc-go{background:#2f6df6;color:#fff;border:none;border-radius:9px;padding:8px 14px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap}
.prc-go:hover{background:#245bd6}
.prc-cancel{background:none;border:none;color:var(--ink3,#8a94a6);font-size:14px;cursor:pointer;padding:4px 6px}
.prc-photo{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px dashed #c5d0e0;border-radius:9px;padding:7px 11px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink2);cursor:pointer}
.prc-photo:hover{border-color:#2f6df6;color:#2f6df6}
.prc-photo:disabled{opacity:.55;cursor:wait}
.prc-hint{width:100%;font-size:11.5px;color:var(--ink3);line-height:1.4;margin:0}
.prc-err{width:100%;font-size:12px;color:#b42318;font-weight:600}
/* Club member-price journey — share → enter → compare → verdict */
  .wi-clubask{margin:0 0 12px;padding:18px 16px 16px;border-radius:18px;background:var(--card,#fff);border:1px solid var(--line,#e6ebf2);box-shadow:0 12px 32px -22px rgba(15,23,42,.45);animation:wiClubAskIn .35s cubic-bezier(.2,.7,.2,1) both;scroll-margin-top:12px;scroll-margin-bottom:40vh}
.wi-club-cmp{margin:0 0 12px;padding:18px 16px;border-radius:16px;background:var(--card,#fff);border:1px solid var(--line,#e6ebf2);text-align:center;animation:wiClubAskIn .28s cubic-bezier(.2,.7,.2,1) both}
.wi-clubask-brand{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.wi-clubask-logo{width:48px;height:48px;flex:none;border-radius:12px;object-fit:contain;background:#f4f6fa;border:1px solid var(--line,#e6ebf2);padding:7px}
.wi-clubask-logo-ph{width:48px;height:48px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;letter-spacing:-.02em;color:#fff;background:#0E1A2B}
.wi-clubask-logo-ph.costco{background:#E31837}
.wi-clubask-logo-ph.sams{background:#0067A0}
.wi-clubask-store{font-size:15px;font-weight:800;color:var(--ink,#0b1220);letter-spacing:-.015em;line-height:1.2}
.wi-clubask-msg{font-size:15px;line-height:1.4;font-weight:650;color:var(--ink,#0b1220);margin:0 0 16px;letter-spacing:-.01em}
.wi-clubask .prc-form{background:#f7f9fc;border-color:#cfd9ea;padding:10px 12px;border-radius:14px;flex-wrap:nowrap}
.wi-clubask .prc-cur{font-size:18px;color:var(--ink,#0b1220)}
.wi-clubask .prc-in{font-size:20px;font-weight:800;min-width:0}
.wi-clubask .prc-in::placeholder{color:#9aa6b8;font-weight:600}
.wi-clubask .prc-go{padding:12px 16px;border-radius:12px;font-size:14px;min-height:44px}
.wi-clubask .prc-go:disabled{opacity:.65;cursor:wait}
.wi-clubask .prc-err{margin-top:8px}
.wi-math-member{color:var(--blue,#2f74d0);font-weight:700}
.wi-club-steps{display:flex;align-items:center;gap:0;margin:0 0 12px;padding:0 2px}
.wi-club-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;position:relative}
.wi-club-step:not(:last-child)::after{content:'';position:absolute;top:11px;left:calc(50% + 14px);right:calc(-50% + 14px);height:2px;background:var(--outlineVariant,#d8dee8);z-index:0}
.wi-club-step.on:not(:last-child)::after,.wi-club-step.done:not(:last-child)::after{background:color-mix(in srgb,var(--blue,#2f74d0) 55%,transparent)}
.wi-club-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;background:var(--surfaceContainerHighest,#e8edf5);color:var(--onSurfaceVariant,#5c6678);position:relative;z-index:1;border:2px solid transparent}
.wi-club-step.on .wi-club-dot{background:var(--blue,#2f74d0);color:#fff;border-color:color-mix(in srgb,var(--blue,#2f74d0) 30%,#fff)}
.wi-club-step.done .wi-club-dot{background:#0f7a44;color:#fff}
.wi-club-lab{font-size:11px;font-weight:700;color:var(--onSurfaceVariant,#6b7688);text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-club-step.on .wi-club-lab{color:var(--ink,#0b1220)}
.wi-club-step.done .wi-club-lab{color:#0f7a44}
.wi-club-cmp-h{font-size:16px;font-weight:800;color:var(--ink,#0b1220);margin:0 0 4px}
.wi-club-cmp-sub{font-size:13px;line-height:1.45;color:var(--onSurfaceVariant,#5c6678);margin:0 0 14px}
.wi-club-cmp .wi-checking-bar{margin:0 auto;max-width:180px}
  @keyframes wiClubAskIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.wi-clubask,.wi-club-cmp{animation:none}}
.scanx-tabs{display:flex;gap:6px;margin:0 0 14px}
.scanx-tab{flex:1;border:1px solid var(--line);background:#f4f6fa;color:var(--ink2);border-radius:10px;padding:9px 8px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.scanx-tab.on{background:#0E1A2B;border-color:#0E1A2B;color:#fff}
.scanx-photo{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.scanx-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;background:#0b1020}
.scanx-shot{display:block;text-align:center;background:#0E1A2B;color:#fff;border:none;border-radius:12px;padding:13px 14px;font:inherit;font-size:14.5px;font-weight:800;cursor:pointer}
.scanx-shot:disabled{opacity:.55;cursor:wait}
.scanx-shot.sec{background:#fff;color:var(--ink);border:1px solid var(--line)}
.scanx-actions{display:flex;gap:8px;flex-wrap:wrap}
.scanx-actions .scanx-shot{flex:1;min-width:132px}
.prc-photos{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.prc-done{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:#eafaf1;border:1px solid #b6e6cb;border-radius:12px;padding:10px 14px;margin:0 0 14px;font-size:12.5px;color:#0f7a44}
.prc-done b{color:#0b1220}
.prc-done button{background:none;border:none;color:#0f7a44;font:inherit;font-size:12.5px;font-weight:700;text-decoration:underline;cursor:pointer;white-space:nowrap}
.osay{position:relative;overflow:hidden;margin:0 0 18px;border:none;border-radius:28px;
    background:#fff;color:var(--ink);padding:0;
    box-shadow:0 10px 32px rgba(14,26,43,.11),0 1px 2px rgba(14,26,43,.05)}
.osay-hero{position:relative;height:148px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(165deg,color-mix(in srgb, var(--good) 22%, #fff) 0%,#f5f7fa 55%,#eef2f8 100%)}
.osay-mark{display:none}
.osay-score{text-align:center}
.osay-score-n{font-size:56px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.osay-score-n span{font-size:22px;font-weight:700;color:var(--ink3);margin-left:2px}
.osay-score-k{font-size:13px;color:var(--ink3);margin-top:6px}
.osay-hero-rev{width:min(236px,74%);background:#fff;border-radius:18px;padding:14px 16px 15px;
    box-shadow:0 10px 28px rgba(14,26,43,.14)}
.osay-hero-stars{display:flex;justify-content:center;gap:3px;margin:0 0 10px;color:#e8933a}
.osay-hero-stars svg{width:16px;height:16px;fill:currentColor;display:block}
.osay-hero-quote{background:#E9E9EB;border-radius:16px;padding:11px 13px 12px;position:relative}
.osay-hero-quote::before{content:'“';position:absolute;left:10px;top:2px;font-size:22px;line-height:1;
    color:rgba(0,0,0,.28);font-family:Georgia,serif}
.osay-hero-line{display:block;height:8px;border-radius:999px;background:rgba(0,0,0,.16)}
.osay-hero-l1{width:88%;margin-left:14px}
.osay-hero-l2{width:58%;margin:8px 0 0 14px}
.osay-copy{padding:18px 20px 18px}
.osay-h{position:relative;z-index:1;margin:0 0 4px}
.osay-eye{font-size:13px;font-weight:600;letter-spacing:-.01em;text-transform:none;
    color:var(--ink);margin:0 0 4px;font-family:inherit}
.osay-title{font-family:inherit;font-weight:700;font-style:normal;
    font-size:22px;letter-spacing:-.022em;line-height:1.18;color:var(--ink)}
.osay-sub{position:relative;z-index:1;font-size:15px;color:var(--ink3);line-height:1.35;margin:8px 0 0}
.osay-go{position:relative;z-index:1;background:var(--navy);color:#fff;border:none;border-radius:999px;
    padding:14px 16px;margin-top:14px;font:inherit;font-size:16px;font-weight:700;cursor:pointer;width:100%;
    min-height:50px}
.osay-go:disabled{opacity:.55;cursor:wait}
.osay-go-nudge{animation:wiHonestPulse 1.8s ease-in-out infinite}
.osay-go:hover:not(:disabled){filter:brightness(.97)}
.osay-chip{display:inline-block;font-size:10.5px;font-weight:700;
    letter-spacing:.04em;color:var(--ink3);background:#f4f6fa;
    border:1px solid var(--line);padding:4px 9px;border-radius:999px;margin:0 0 12px}
.osay-balance{position:relative;z-index:1;margin:14px 0 12px}
.osay-balancek{font-size:11px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink3);margin:0 0 10px}
.osay-row{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.osay-rowtrack{flex:1;height:10px;border-radius:999px;overflow:hidden;background:#eee}
.osay-mixw{display:block;height:100%;background:#C7C7CC;min-width:8px;border-radius:999px}
.osay-mixl{display:block;height:100%;background:#248BF0;min-width:8px;border-radius:999px}
.osay-mixwlab{color:var(--ink3);font-size:13px;font-weight:700;flex:none;min-width:7.6em;text-align:right}
.osay-mixllab{color:#248BF0;font-size:13px;font-weight:700;flex:none;min-width:7.6em;text-align:right}
.osay-k{font-size:12px;font-weight:600;letter-spacing:.01em;margin:12px 0 6px;text-transform:none}
.osay-k.gripes{color:var(--ink3);text-align:left}
.osay-k.praise{color:#248BF0;text-align:right}
.osay-voices{display:flex;flex-direction:column;gap:2px}
.osay-ul{margin:0;padding:0 0 0 8px;list-style:none;display:flex;flex-direction:column;gap:3px}
.osay-ul.osay-out{align-items:flex-end;padding:0 8px 0 0}
.osay-ul li,.osay-q{position:relative;margin:0;font-family:inherit;
    font-style:normal;font-size:16px;line-height:1.28;padding:9px 13px;max-width:82%;
    word-wrap:break-word}
.osay-q.osay-gripe,.osay-ul li.osay-gripe{
    background:#E9E9EB;color:#111;border:none;border-radius:18px;margin-right:auto;margin-left:0;
    box-shadow:none}
.osay-q.osay-love,.osay-ul li.osay-love{
    background:#248BF0;color:#fff;border:none;border-radius:18px;margin-left:auto;margin-right:0;
    box-shadow:none}
.osay-q.osay-gripe.osay-tail,.osay-ul li.osay-gripe.osay-tail{border-bottom-left-radius:4px}
.osay-q.osay-love.osay-tail,.osay-ul li.osay-love.osay-tail{border-bottom-right-radius:4px}
.osay-q.osay-gripe.osay-tail::after,.osay-ul li.osay-gripe.osay-tail::after{
    content:"";position:absolute;left:-5px;bottom:0;width:14px;height:12px;background:#E9E9EB;
    clip-path:polygon(100% 0,100% 100%,0 100%)}
.osay-q.osay-love.osay-tail::after,.osay-ul li.osay-love.osay-tail::after{
    content:"";position:absolute;right:-5px;bottom:0;width:14px;height:12px;background:#248BF0;
    clip-path:polygon(0 0,100% 100%,0 100%)}
.osay-sorry{margin:14px 0 0}
.osay-sorry-h{font-size:16px;font-weight:700;letter-spacing:-.015em;line-height:1.3;color:var(--ink)}
.osay-sorry-p{font-size:15px;font-weight:400;line-height:1.35;color:var(--ink3);margin:6px 0 0}
.osay-src{font-size:13px;color:var(--ink3);margin-top:12px;line-height:1.4;text-align:center}
.alts{margin:0 0 18px;border:1px solid var(--line);border-radius:14px;background:#fbfcfe;padding:14px}
.alts-h{font-weight:800;font-size:14px;color:var(--ink);margin:0 0 4px}
.alts-sub{font-size:12px;color:var(--ink3);line-height:1.4;margin:0 0 12px}
.alts-go{background:#fff;border:1px solid #d0d7e3;border-radius:10px;padding:10px 14px;font:inherit;font-size:13.5px;font-weight:800;color:var(--ink);cursor:pointer;width:100%}
.alts-go:hover{border-color:#0E1A2B}
.alts-go:disabled{opacity:.55;cursor:wait}
.alts-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.alts-card{flex:0 0 148px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;text-align:left}
.alts-card:hover{border-color:#0E1A2B;box-shadow:0 6px 16px -10px rgba(14,26,43,.35)}
.alts-img{height:88px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;background:#f4f6fa;border-radius:8px}
.alts-img img{max-width:100%;max-height:80px;object-fit:contain}
.alts-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:#e7f7ee;color:#0f7a44;margin-bottom:6px}
.alts-nm{font-size:12px;font-weight:700;color:var(--ink);line-height:1.35;height:2.7em;overflow:hidden;margin:0 0 6px}
.alts-pr{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;font-weight:800;color:var(--ink)}
.alts-off{font-size:11px;font-weight:700;color:#0f7a44;margin-left:6px}
.alts-empty{font-size:12.5px;color:var(--ink3);line-height:1.45}
.nh-wm .fu{color:var(--coral)}
/* plain nav brand — no badge box */
  .nh-nav .nh-brand{transition:opacity .16s}
.nh-nav .nh-brand:hover{opacity:.82}
.nh-links{display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:600;color:var(--ink2)}
.nh-nlink{cursor:pointer;text-decoration:none;color:var(--ink2);white-space:nowrap}
.nh-nlink:hover{color:var(--ink)}
.nh-navcta{background:var(--navy);color:#fff;padding:9px 18px;border-radius:9px;font-weight:700;cursor:pointer;border:none;font-size:14.5px}
.nh-navcta .nh-arw{margin-left:3px;display:inline-block}
.nh-free{color:#0f9d6b;font-weight:700;display:inline-flex;align-items:center;gap:7px}
.nh-free::before{content:"";width:7px;height:7px;border-radius:50%;background:#11B982;flex:none}
.nh-free:hover{color:#0b7d54}
.nh-scan{display:inline-flex;align-items:center;justify-content:center;width:44px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink2);cursor:pointer;padding:0}
.nh-scan:hover{color:var(--ink);border-color:#cfd6e0}
.nh-watch{position:relative}
.nh-watch-n{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--coral);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.nh-scan:hover{border-color:#c4ccd8;color:var(--ink)}
.nh-scan svg{width:20px;height:20px}
.nh-burger{display:none;background:#fff;border:1px solid var(--line);border-radius:10px;width:42px;height:40px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);padding:0}
.nh-burger svg{width:21px;height:21px}
.nh-menu-bd{position:fixed;inset:0;z-index:44}
.nh-menu{position:fixed;top:60px;right:16px;left:16px;max-width:360px;margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 26px 54px -18px rgba(16,24,40,.4);padding:8px;display:flex;flex-direction:column;gap:2px;z-index:45;animation:nhMenuIn .16s ease}
.nh-menu a,.nh-menu button{display:flex;align-items:center;gap:10px;padding:14px 14px;border-radius:11px;font-weight:700;font-size:16px;color:var(--ink2);background:none;border:none;text-align:left;width:100%;cursor:pointer;font-family:inherit;text-decoration:none}
.nh-menu a:hover,.nh-menu button:hover{background:var(--mist);color:var(--ink)}
  @keyframes nhMenuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nh-hero{max-width:1180px;margin:0 auto;padding:52px 40px 92px;display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:center}
.nh-hero h1{font-size:clamp(40px,5vw,60px);line-height:1.03;letter-spacing:-.035em;font-weight:850;color:var(--ink);margin:14px 0 0}
.nh-lead{font-size:19px;line-height:1.5;color:var(--ink2);margin-top:20px;max-width:none}
.nh-lead b{color:var(--ink);font-weight:700}
.nh-scanico{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
.nh-sub{margin-top:13px;font-size:14.5px;color:var(--ink3)}
.nh-sub a{color:var(--good);font-weight:700;cursor:pointer}
/* ── Design-matched hero (per .dc.html handoff) ── */
  .nh-scanlink{margin-top:14px;display:inline-flex;align-items:center;gap:8px;color:var(--coral);font-weight:700;font-size:14px;cursor:pointer}
.nh-scanlink svg{width:16px;height:16px}
.nh-trustrow{margin-top:20px;display:flex;align-items:center;gap:11px;font-size:13px;color:var(--ink3);font-weight:500}
.nh-trustpills{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.nh-tp{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px}
.nh-tp .tp-ic{font-size:12px;line-height:1}
.nh-tp .tp-ic.buy{color:var(--buy);font-weight:900}
.nh-avatars{display:flex}
.nh-avatars span{width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;margin-left:-9px;box-shadow:0 2px 6px rgba(16,24,40,.12)}
.nh-avatars span:first-child{margin-left:0}
.hvc{background:#fff;border:1px solid #eef1f5;border-radius:22px;padding:24px;box-shadow:0 30px 60px -34px rgba(16,24,40,.4),0 60px 90px -40px rgba(16,24,40,.2);transform:rotate(1.2deg);animation:hvcFloat 7s ease-in-out infinite;max-width:430px;margin-left:auto}
  @keyframes hvcFloat{0%,100%{transform:rotate(1.2deg) translateY(0)}50%{transform:rotate(1.2deg) translateY(-9px)}}
  @media(prefers-reduced-motion:reduce){.hvc{animation:none}}
.hvc-top{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.hvc-thumb{position:relative;width:56px;height:56px;border-radius:14px;background:#f2f5f9;display:flex;align-items:center;justify-content:center;font-size:28px;flex:none;overflow:hidden}
.hvc-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.hvc-click{cursor:pointer}
.hvc-click:hover{box-shadow:0 34px 66px -32px rgba(16,24,40,.5),0 60px 90px -40px rgba(16,24,40,.24)}
.hvc-nm{font-weight:700;font-size:15px;color:var(--ink)}
.hvc-src{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink3);margin-top:3px}
.hvc-badge{display:flex;gap:12px;align-items:center;background:var(--buy-bg);border:1px solid var(--buy-bd);border-radius:14px;padding:12px 15px;margin-bottom:14px}
.hvc-b1{font-weight:900;font-size:22px;color:var(--buy);white-space:nowrap}
.hvc-b2{display:flex;flex-direction:column;font-size:12.5px;line-height:1.35}
.hvc-b2 b{font-weight:700;color:var(--ink)}
.hvc-b2 span{color:var(--ink2)}
.hvc-body{animation:hvcFade .55s ease}
  @keyframes hvcFade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.hvc-body{animation:none}}
.hvc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.hvc-stat{border:1px solid var(--line);border-radius:12px;padding:10px 8px;text-align:center}
.hvc-stat.now{background:var(--buy-bg);border-color:var(--buy-bd)}
.hvc-stat .k{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;color:var(--ink3)}
.hvc-stat .v{font-family:'JetBrains Mono',monospace;font-weight:900;font-size:18px;color:var(--ink);margin-top:3px}
.hvc-stat.now .v{color:var(--buy)}
.hvc-basis{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink3);text-align:center;margin-top:14px;line-height:1.5}
/* SKIP-led busted hero card */
  .bc{position:relative;overflow:visible}
.bc-ribbon{position:absolute;top:14px;right:-7px;background:linear-gradient(180deg,#3f7bf7,#2f6df6);color:#fff;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:10.5px;letter-spacing:.07em;padding:6px 13px;border-radius:8px;transform:rotate(6deg);box-shadow:0 10px 20px -8px rgba(47,109,246,.7);z-index:3}
.bc-verdict{display:flex;gap:13px;align-items:center;background:var(--skip-bg);border:1px solid var(--skip-bd);border-radius:14px;padding:12px 15px;margin:0 0 14px}
.bc-vword{font-weight:900;font-size:22px;color:var(--skip);white-space:nowrap;line-height:1}
.bc-vtext{display:flex;flex-direction:column;font-size:12.5px;line-height:1.35;min-width:0}
.bc-vtext b{font-weight:700;color:var(--ink)}
.bc-vtext span{color:var(--ink2)}
.bc-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.bc-now{font-family:'JetBrains Mono',monospace;font-weight:900;font-size:26px;color:var(--ink);line-height:1}
.bc-was{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:16px;color:var(--ink3);text-decoration:line-through}
.bc-faketag{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:10px;color:var(--skip);background:var(--skip-bg);border:1px solid var(--skip-bd);padding:3px 9px;border-radius:999px}
.bc-chart{border-top:1px solid var(--line);padding-top:12px;margin-bottom:6px}
.bc-chlbl{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--ink3);text-transform:uppercase;margin-bottom:7px}
.bc-svg{width:100%;height:auto;display:block}
.bc-svg path{stroke-dasharray:340;stroke-dashoffset:340;animation:bcDraw 1s .5s ease forwards}
  @keyframes bcDraw{to{stroke-dashoffset:0}}
.bc-chnote{font-size:11.5px;color:var(--ink3);line-height:1.5;margin-top:8px}
.bc-chnote b{color:var(--ink2);font-weight:700}
  @media(prefers-reduced-motion:reduce){.bc-svg path{stroke-dashoffset:0;animation:none}}
.sf2-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
.sf2-sec{max-width:1180px;margin:0 auto;padding:30px 40px 44px}
.sf2-in{display:grid;grid-template-columns:1fr .82fr;gap:48px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:48px;box-shadow:0 30px 60px -44px rgba(16,24,40,.5)}
.sf2-in h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(28px,3.4vw,38px);letter-spacing:-.02em;line-height:1.1;color:var(--ink);margin:10px 0 14px}
.sf2-in h2 .em{color:var(--coral);font-style:italic}
.sf2-p{font-size:16px;color:var(--ink2);line-height:1.55;max-width:44ch}
.sf2-bul{margin:16px 0;list-style:none;display:flex;flex-direction:column;gap:9px}
.sf2-bul li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--ink);font-weight:500}
.sf2-bul .ck{color:var(--buy);font-weight:900}
.sf2-cta{margin-top:20px;display:inline-flex;align-items:center;gap:9px;background:linear-gradient(180deg,#ff6a3d,#f4501e);color:#fff;border:none;border-radius:12px;padding:14px 24px;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 10px 22px -8px rgba(244,80,30,.55)}
.sf2-cta svg{width:18px;height:18px}
.sf2-phone{justify-self:center;width:266px;background:#0b1220;border-radius:38px;padding:14px;box-shadow:0 40px 80px -30px rgba(0,0,0,.55)}
.sf2-view{position:relative;aspect-ratio:9/16;background:radial-gradient(120% 90% at 50% 0%,#1c2b47,#0b1220 70%);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:16px 14px}
.sf2-status{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:5px 12px;border-radius:999px}
.sf2-frame{position:relative;margin-top:26px;width:170px;height:170px;display:flex;align-items:center;justify-content:center}
.sf2-corner{position:absolute;width:26px;height:26px;border:3px solid var(--orange)}
.sf2-corner.tl{top:0;left:0;border-right:none;border-bottom:none;border-radius:8px 0 0 0}
.sf2-corner.tr{top:0;right:0;border-left:none;border-bottom:none;border-radius:0 8px 0 0}
.sf2-corner.bl{bottom:0;left:0;border-right:none;border-top:none;border-radius:0 0 0 8px}
.sf2-corner.br{bottom:0;right:0;border-left:none;border-top:none;border-radius:0 0 8px 0}
.sf2-prod{width:96px;height:96px;border-radius:14px;background:repeating-linear-gradient(135deg,#233149 0 7px,#1a2740 7px 14px);display:flex;align-items:center;justify-content:center;font-size:40px}
.sf2-scan{position:absolute;left:-4px;right:-4px;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--orange),transparent);box-shadow:0 0 12px var(--orange);animation:sf2scan 2.2s ease-in-out infinite}
  @keyframes sf2scan{0%,100%{top:8%}50%{top:92%}}
.sf2-barcode{margin-top:22px;width:150px;height:36px;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 5px,#fff 5px 6px,transparent 6px 10px);border-radius:3px}
.sf2-result{margin-top:auto;width:100%;background:#fff;border-radius:14px;padding:9px 11px;display:flex;align-items:center;gap:9px;box-shadow:0 12px 26px rgba(0,0,0,.3);animation:sfResult .6s ease 1.3s both}
  @keyframes sfResult{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.sf2-result .th{width:32px;height:32px;border-radius:9px;background:#f2f5f9;display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.sf2-result .nm{font-size:11px;font-weight:700;color:var(--ink);line-height:1.15}
.sf2-result .vd{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--buy);font-weight:800;margin-top:2px}
.sf2-result .pr{margin-left:auto;font-family:'JetBrains Mono',monospace;font-weight:900;font-size:14px;color:var(--buy)}
  @media(max-width:860px){.hw-grid,.mt-grid,.mt-points,.vx2-grid{grid-template-columns:1fr 1fr}.sf2-in,.fd-card{grid-template-columns:1fr;gap:28px}.fd-photo{margin:0 auto}}
  @media(max-width:560px){.hw-grid,.vx2-grid{grid-template-columns:1fr}}
.nh-trust{margin-top:26px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 11px;font-size:13px;color:var(--ink3)}
.nh-chips{display:flex}
.nh-chip{width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;margin-left:-8px;color:var(--ink2)}
.nh-card{position:relative;background:#fff;border-radius:22px;padding:26px;box-shadow:0 40px 90px -30px rgba(16,24,40,.5);transform:rotate(1.3deg);border:1px solid #eef1f5}
.nh-ribbon{position:absolute;top:20px;right:-8px;background:var(--red2);color:#fff;font-weight:800;font-size:13px;padding:7px 15px;border-radius:9px;transform:rotate(3deg);box-shadow:0 10px 22px -8px rgba(240,78,54,.55)}
.nh-ctop{display:flex;gap:13px;align-items:center}
.nh-thumb{width:62px;height:62px;border-radius:14px;background:#f2f5f9;display:flex;align-items:center;justify-content:center;color:#1b2740;flex:none}
.nh-thumb svg{width:37px;height:37px}
.nh-cnm{font-size:15px;font-weight:700;line-height:1.25;color:var(--ink)}
.nh-cstamp{display:flex;align-items:center;gap:11px;margin:20px 0 14px}
.nh-skip{background:var(--red2);color:#fff;font-weight:900;font-size:22px;padding:5px 15px;border-radius:10px;white-space:nowrap}
.nh-stx{font-size:14.5px;font-weight:700;color:#c0392b}
.nh-cprice{display:flex;align-items:center;gap:14px}
.nh-was{font-size:24px;color:#98a2b3;text-decoration:line-through}
.nh-fk{font-size:12px;font-weight:800;color:var(--red2);border:2px solid var(--red2);border-radius:6px;padding:2px 7px;transform:rotate(-6deg)}
.nh-now{font-size:34px;font-weight:850;color:var(--ink)}
.nh-reveal{display:flex;align-items:center;gap:18px;margin-top:20px;padding-top:16px;border-top:2px dashed var(--line)}
.nh-rk{font-size:12px;color:var(--ink3);font-weight:600}
.nh-rv{font-size:22px;font-weight:850;margin-top:2px;color:var(--ink)}
.nh-rv.zero{color:var(--red2)}
/* rotating verdict card — SKIP(red) / BUY(green) / WAIT(amber) variants + cross-fade */
  .nh-ribbon.buy{background:var(--buy);box-shadow:0 10px 22px -8px rgba(31,157,85,.5)}
.nh-ribbon.wait{background:var(--wait);box-shadow:0 10px 22px -8px rgba(201,138,0,.5)}
.nh-skip.buy{background:var(--buy)}
.nh-skip.wait{background:var(--wait)}
.nh-stx.buy{color:#15703c}
.nh-stx.wait{color:#8a6400}
.nh-fk.buy{color:var(--buy);border-color:var(--buy)}
.nh-rv.good{color:var(--buy)}
.nh-rv.amber{color:var(--wait)}
.nh-card{animation:heroFade .55s ease}
  @keyframes heroFade{from{opacity:0;transform:rotate(1.3deg) translateY(10px)}to{opacity:1;transform:rotate(1.3deg) translateY(0)}}
  @media(prefers-reduced-motion:reduce){.nh-card{animation:none}}
.nh-rline{width:1px;height:36px;background:var(--line)}
.nh-sech{text-align:center;max-width:640px;margin:0 auto 26px}
.nh-sech h2{margin-top:10px}
.nh-sech p{margin-top:9px}
.nh-sech h2{font-size:clamp(30px,4vw,40px);line-height:1.1;letter-spacing:-.03em;font-weight:850;margin-top:12px;color:var(--ink)}
.nh-sech p{font-size:17px;color:var(--ink2);margin-top:12px;line-height:1.55}
.nh-how{padding:26px 0 10px}
.nh-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.nh-step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}
.nh-step .nh-ic{width:52px;height:52px;border-radius:13px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.nh-step .nh-ic svg{width:26px;height:26px}
.nh-step .nh-n{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--coral)}
.nh-step h3{font-size:19px;font-weight:800;margin:6px 0 8px;letter-spacing:-.01em;color:var(--ink)}
.nh-step p{font-size:14.5px;color:var(--ink2);line-height:1.55}
.nh-step p b{color:var(--ink)}
.nh-moat{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:58px}
.nh-moat-in{max-width:1180px;margin:0 auto;padding:66px 40px;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.nh-moat h2{font-size:clamp(28px,3.4vw,36px);letter-spacing:-.03em;font-weight:850;line-height:1.12;color:var(--ink);margin-top:12px}
.nh-ml{font-size:16.5px;color:var(--ink2);margin-top:16px;line-height:1.6}
.nh-ml b{color:var(--ink)}
.nh-mstat{display:flex;gap:30px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.nh-mstat .n{font-size:30px;font-weight:850;font-variant-numeric:tabular-nums;color:var(--ink)}
.nh-mstat .l{font-size:12.5px;color:var(--ink3);max-width:120px;margin-top:2px}
.nh-mpoints{display:flex;flex-direction:column;gap:16px}
.nh-mp{display:flex;gap:14px;align-items:flex-start}
.nh-mp .tick{width:30px;height:30px;border-radius:50%;background:var(--buy-bg);color:var(--buy);display:flex;align-items:center;justify-content:center;flex:none;font-weight:900}
.nh-mp .t{font-size:16px;font-weight:700;color:var(--ink)}
.nh-mp .d{font-size:14px;color:var(--ink2);margin-top:2px;line-height:1.5}
.nh-cta{background:radial-gradient(120% 160% at 80% 0%,#22345a 0%,#152134 55%);color:#fff;border-radius:24px;margin:64px auto;max-width:1100px;padding:52px 40px;text-align:center}
.nh-cta h2{font-size:clamp(28px,3.6vw,38px);letter-spacing:-.03em;font-weight:850}
.nh-cta p{font-size:17px;color:#c4cede;margin-top:12px}
.nh-foot{background:var(--navy);color:#c7d3e6;padding:44px 0 30px;margin-top:8px}
.nh-foot-in{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-gutter);display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.nh-foot .nh-wm{color:#fff}
.nh-foot-tag{font-size:13px;color:#8b97ab;margin-top:12px;max-width:260px;line-height:1.5}
/* "Get the Chrome extension" CTA in the (dark) footer — override the light .sf-ext palette for navy */
  .nh-foot-ext{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.nh-foot-ext .sf-ext{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#eaf0f8;box-shadow:none}
.nh-foot-ext a.sf-ext:hover{background:rgba(255,255,255,.1);border-color:rgba(36,209,126,.5);box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.nh-foot-ext .sf-ext svg{color:var(--buy)}
.nh-foot-ext .sf-ext .ar{color:#9fb0c4}
.nh-foot-ext .sf-ext-soon{color:#8b97ab;border-color:rgba(255,255,255,.2)}
.nh-foot-ext .sf-ext-soon svg{color:#6f7d92}
.nh-foot-ext .sf-ext-soon b{color:#b6c1d1}
.nh-cols{display:flex;gap:56px}
.nh-col h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8b97ab;margin-bottom:12px}
.nh-col a{display:block;font-size:14px;margin-bottom:9px;color:#c7d3e6;cursor:pointer;text-decoration:none}
.nh-fine{max-width:var(--page-max);margin:26px auto 0;padding:20px var(--page-gutter) 0;font-size:12px;color:#8b97ab;line-height:1.6;border-top:1px solid #24344f}
/* ── premium layer (2026-07 enhancement) ── */
  body{background:radial-gradient(78% 55% at 50% -8%,rgba(255,110,60,.05),transparent 58%),linear-gradient(180deg,#fbfcff,#f3f5fa)}
.nh-hero h1,.nh-sech h2,.nh-moat h2,.nh-cta h2{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.02em}
.nh-hero h1{line-height:1.0}
.nh-em{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:600;color:var(--coral)}
.nh-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:#c2410c;background:linear-gradient(180deg,#fff5f0,#ffece4);border:1px solid #ffd9c9;padding:6px 13px;border-radius:999px;letter-spacing:.12em}
.nh-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px rgba(255,90,44,.18)}
.nh-eyebrow.bust{color:var(--skip);background:var(--skip-bg);border-color:var(--skip-bd)}
.nh-eyebrow.bust::before{display:none}
.nh-trustrow.nh-trustmin{gap:0}
.nh-navcta{background:linear-gradient(180deg,#1d2c46,#141f34);box-shadow:0 10px 22px -12px rgba(20,31,52,.7)}
.nh-skip{background:linear-gradient(180deg,#f4523a,#e5411f);box-shadow:0 8px 18px -6px rgba(229,65,31,.5)}
.nh-step .nh-ic{background:linear-gradient(180deg,#1e2f4c,#141f34);box-shadow:0 10px 22px -12px rgba(20,31,52,.6)}
.nh-step{background:linear-gradient(180deg,#fff,#fbfcfe);box-shadow:0 20px 40px -30px rgba(16,24,40,.4)}
.nh-card{box-shadow:0 2px 4px rgba(16,24,40,.04),0 30px 60px -24px rgba(16,24,40,.4),0 60px 90px -40px rgba(16,24,40,.28)}
.nh-moat{background:linear-gradient(180deg,#fff,#fbfcff)}
.nh-cta{position:relative;overflow:hidden}
.nh-cta::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,90,44,.4),transparent 66%);top:-140px;right:-60px;filter:blur(30px)}
.nh-cta h2,.nh-cta p{position:relative}
  /* ===== Storefront home (app-like return-visitor home per the handoff Storefront screen) ===== */
  @keyframes sf-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}
  @keyframes sf-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes sf-scanline{0%,100%{top:16%}50%{top:80%}}
.sf-dot{position:relative;display:inline-block;width:7px;height:7px}
.sf-dot i,.sf-dot b{position:absolute;inset:0;border-radius:50%;background:#3ddc84}
.sf-dot b{animation:sf-pulse 1.8s ease-out infinite}
.sf-marq{background:var(--ink);color:#fff;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)}
body:has(.hcwrap) .sf-marq{background:#2B2631}
.sf-marq-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;min-height:34px}
.sf-marq-live{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:8px 14px 8px 20px;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7ee3bf;z-index:2;background:inherit}
.sf-marq-win{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.sf-marq-track{display:flex;align-items:center;gap:28px;width:max-content;animation:sf-marquee 42s linear infinite;font-size:12.5px;color:#c4cede;white-space:nowrap;padding:8px 20px}
.sf-marq-track b{font-weight:700;color:#EEF2F8}
.sf-marq-sep{opacity:.45;font-weight:400}
  @media(prefers-reduced-motion:reduce){.sf-marq-track{animation:none}.sf-dot b{animation:none;opacity:0}}
.sf-top{max-width:1280px;margin:0 auto;padding:16px 40px 0}
.sf-search{display:flex;align-items:stretch;gap:10px}
.sf-sbox{flex:1;display:flex;align-items:center;background:#fff;border:1.5px solid color-mix(in srgb, #248BF0 38%, #dfe5ee);border-radius:15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 8px 22px rgba(14,26,43,.10);overflow:hidden;min-height:48px;padding:0 0 0 12px;gap:8px}
.sf-sbox:focus-within{border-color:#248BF0;box-shadow:0 0 0 3px color-mix(in srgb, #248BF0 28%, transparent), inset 0 1px 0 rgba(255,255,255,.88)}
.sf-sic{flex:none;width:20px;height:20px;display:grid;place-items:center;color:#3C4043}
.sf-sic svg{display:block}
.sf-sbox-slot{flex:1;min-width:0;position:relative;display:flex;align-items:center;align-self:stretch}
.sf-sbox .wi-phanim{
    position:absolute;left:0;right:8px;top:50%;transform:translateY(-50%);
    margin:0;padding:0;border:0;background:none;pointer-events:none;z-index:0;
    font:400 15px/1.2 'Inter',system-ui,sans-serif;color:#3C4043;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;text-align:left}
.sf-sbox .wi-phanim::after{
    content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;
    vertical-align:-0.12em;background:currentColor;border-radius:1px;
    animation:wiPhCaret 1s steps(1) infinite}
.sf-sbox.wi-hb-typed .wi-phanim::after{visibility:hidden}
  @media (prefers-reduced-motion:reduce){
    .sf-sbox .wi-phanim::after{animation:none;opacity:.85}
  }
/* .sf-sall REMOVED 2026-08-15 — the "All ▾" segment was a plain <div> with no handler and no
     state; nothing read it and nothing could set it. It looked like a store filter and was not
     one,so it cost width in the bar and promised a control that did not exist. */
  .sf-sbox input{flex:1;font-family:'Inter',sans-serif;font-size:16px;padding:10px 8px 10px 0;border:none;background:transparent;color:var(--ink);outline:none;min-width:0;position:relative;z-index:1;width:100%}
/* Clear (✕) — appears once there's a query or active results; wipes the term AND dismisses results. */
  .sf-sx{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:34px;border:none;background:none;color:var(--ink3);font-size:14px;line-height:1;cursor:pointer;transition:color .14s}
.sf-sx:hover{color:var(--ink)}
.sf-sx:focus-visible{outline:2px solid var(--mint,#23D17E);outline-offset:-2px;border-radius:8px}
.sf-sgo{display:flex;align-items:center;justify-content:center;gap:7px;font-weight:800;font-size:14px;color:#042F2E;background:#14B8A6;border:none;padding:0 20px;cursor:pointer;white-space:nowrap}
/* Scan button — a barcode viewfinder with a live mint scan-laser sweeping over it. */
  /* green-accented so the scanner reads as an ACTION on the dark bar (was dark navy → merged into it) */
  /* the in-store barcode scanner is a killer feature — draw the eye with a soft green pulse-ring (box-shadow
     renders outside the button's overflow,so it isn't clipped) + a gentle icon breathe. */
  .sf-scanbtn{position:relative;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:92px;min-height:52px;background:linear-gradient(180deg,rgba(20,184,166,.22),rgba(20,184,166,.08));border:1.5px solid rgba(45,212,191,.7);border-radius:15px;color:#99F6E4;cursor:pointer;overflow:hidden;transition:border-color .16s,background .16s,transform .1s,box-shadow .16s;box-shadow:0 10px 26px -12px rgba(20,184,166,.55)}
  /* Soft static ring only — the old infinite box-shadow ping read as a broken glow halo on phones. */
  @media(min-width:641px){.sf-scanbtn{animation:sf-scanping 2.6s ease-out 1}}
  @keyframes sf-scanping{0%{box-shadow:0 10px 26px -14px rgba(21,33,52,.85),0 0 0 0 rgba(36,209,126,.5)}60%{box-shadow:0 10px 26px -14px rgba(21,33,52,.85),0 0 0 12px rgba(36,209,126,0)}100%{box-shadow:0 10px 26px -14px rgba(21,33,52,.85),0 0 0 0 rgba(36,209,126,0)}}
  @media(prefers-reduced-motion:reduce){.sf-scanbtn{animation:none}}
.sf-scanbtn:hover{background:linear-gradient(165deg,rgba(36,209,126,.3),rgba(36,209,126,.12));border-color:rgba(36,209,126,.8)}
.sf-scanbtn:hover{border-color:rgba(36,209,126,.7);transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(36,209,126,.4)}
.sf-scanbtn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.sf-scan-view{position:relative;width:32px;height:30px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sf-scan-view svg{width:26px;height:26px;color:#dbe6f4}
.sf-scan-laser{position:absolute;left:3px;right:3px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#24D17E,transparent);box-shadow:0 0 9px 1px rgba(36,209,126,.85);animation:scanLaser 1.9s cubic-bezier(.6,0,.4,1) infinite}
/* #cdd9ea on the light teal chip measured 1.29:1 — the word "Scan" was effectively invisible
     on the off-home nav. Dark teal is 5.74:1 there; the dark bar still overrides this to #fff. */
  /* The scan button's fill is translucent teal,so its GROUND changes with the chrome behind it:
     near-white in the off-home nav,near-black in the dark bar. #0E6B64 is 5.74:1 on the light one
     and 2.32:1 on the dark one,so this is scoped rather than picked — no single mid-tone clears
     both. Default is the light-ground value; .rd-topwrap overrides it below. */
  .sf-scan-t{font-size:9.5px;font-weight:800;letter-spacing:.04em;color:#0E6B64}
  @keyframes scanLaser{0%{top:3px;opacity:0}18%{opacity:1}82%{opacity:1}100%{top:25px;opacity:0}}
  @media(prefers-reduced-motion:reduce){.sf-scan-laser{animation:none;top:14px;opacity:.7}}
/* First-run nudge — shown once (localStorage wi_seen_hint_v1),points first-timers at the search/paste box */
  .sf-hintwrap{max-width:1280px;margin:0 auto;padding:14px 40px 0}
.sf-hint{display:flex;align-items:center;gap:12px;background:var(--card);border:1.5px solid var(--line);border-left:3px solid var(--green2);border-radius:13px;padding:11px 15px;box-shadow:0 10px 26px -20px rgba(16,24,40,.45);animation:sf-hint-in .45s cubic-bezier(.2,.8,.2,1)}
  @media (prefers-reduced-motion:reduce){.sf-hint{animation:none}}
  @keyframes sf-hint-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.sf-hint-wave{font-size:20px;flex-shrink:0;line-height:1}
.sf-hint-tx{flex:1;font-size:14px;color:var(--ink2);line-height:1.45}
.sf-hint-tx b{color:var(--ink);font-weight:800}
.sf-hint-tx i{color:var(--green2);font-style:normal;font-weight:700}
.sf-hint-x{flex-shrink:0;display:inline-flex;align-items:center;min-height:40px;background:transparent;color:var(--ink3);border:1.5px solid var(--line);border-radius:9px;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700;padding:8px 13px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.sf-hint-x:hover{color:var(--ink2);border-color:var(--ink3)}
  @media(max-width:640px){.sf-hintwrap{padding:12px 16px 0}.sf-hint{gap:10px;padding:10px 12px}.sf-hint-tx{font-size:13px}.sf-hint-x{padding:7px 11px}}
/* margin-top → padding-top: a top margin here COLLAPSES out of the dark .sf-stick,dropping the stick's
     background 12px and exposing the light page behind = the "off" light seam. Padding keeps it flush. */
  /* Page tabs — ONE dark chrome + vibrant per-page accents (desktop,mobile landing,compact). */
  .sf-tabs{max-width:1720px;margin:0 auto;padding:4px 26px 0;display:flex;align-items:stretch;gap:2px;font-size:var(--fs-meta);font-weight:700;white-space:nowrap;overflow-x:auto;border-bottom:1px solid rgba(255,255,255,.08);scrollbar-width:none;-ms-overflow-style:none;background:transparent}
.sf-tabs::-webkit-scrollbar{display:none}
.sf-tab{display:inline-flex;align-items:center;gap:7px;color:rgba(238,242,248,.58);padding:11px 13px;min-height:44px;cursor:pointer;position:relative;background:none;border:none;font:inherit;flex-shrink:0;border-radius:11px 11px 0 0;transition:color .18s ease,background .18s ease,transform .1s ease;--tab:#23D17E}
.sf-tab svg.ic{width:15px;height:15px;flex:0 0 auto;opacity:.88;stroke:currentColor}
.sf-tab:hover:not(.on){color:#EEF2F8;background:rgba(255,255,255,.06)}
.sf-tab:active{transform:scale(.97)}
.sf-tab:focus-visible{outline:2px solid var(--tab);outline-offset:2px}
.sf-tab.on{font-weight:800;color:var(--tab);background:rgba(255,255,255,.04)}
.sf-tab.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;background:var(--tab);border-radius:3px 3px 0 0;transform-origin:center;animation:sfTabInd .34s cubic-bezier(.4,.8,.3,1)}
.sf-tab.t-all{--tab:#23D17E}
.sf-tab.t-all.on{background:rgba(35,209,126,.12);color:#7dffb5}
.sf-tab.t-verified{--tab:#14B8A6}
.sf-tab.t-verified.on{background:rgba(20,184,166,.16);color:#99F6E4}
.sf-tab.t-drops{--tab:#F0A323}
.sf-tab.t-drops.on{background:rgba(240,163,35,.14);color:#FBBF24}
.sf-tab.t-deepest{--tab:#FF5A2C}
.sf-tab.t-deepest.on{background:rgba(255,90,44,.14);color:#fb923c}
.sf-tab.t-nonamazon{--tab:#3B82F6}
.sf-tab.t-nonamazon.on{background:rgba(59,130,246,.14);color:#93C5FD}
.sf-tab.t-fake{--tab:#E23B3B}
.sf-tab.t-fake.on{background:rgba(226,59,59,.14);color:#fca5a5}
.sf-tab.t-stores{--tab:#0071dc}
.sf-tab.t-stores.on{background:rgba(0,113,220,.14);color:#7dd3fc}
.sf-tab.t-verified{--tab:#14B8A6}
.sf-tab.t-verified.on{background:rgba(20,184,166,.16);color:#99F6E4}
.sf-tab.t-drops{--tab:#F0A323}
.sf-tab.t-drops.on{background:rgba(240,163,35,.14);color:#fbbf24}
.sf-tab.t-deepest{--tab:#FF5A2C}
.sf-tab.t-deepest.on{background:rgba(255,90,44,.14);color:#fb923c}
.sf-tab.t-coupons{--tab:#14B8A6}
.sf-tab.t-coupons.on{background:rgba(20,184,166,.14);color:#5eead4}
.sf-tab.t-discounts{--tab:#F0A323}
.sf-tab.t-discounts.on{background:rgba(240,163,35,.16);color:#FBBF24}
.sf-tab.t-today{--tab:#F0A323}
.sf-tab.t-today.on{background:rgba(240,163,35,.14);color:#FBBF24}
.sf-tab.t-fake{--tab:#E23B3B}
.sf-tab.t-fake.on{background:rgba(226,59,59,.14);color:#fca5a5}
  @keyframes sfTabInd{from{transform:scaleX(.18);opacity:.35}to{transform:scaleX(1);opacity:1}}
  @media(prefers-reduced-motion:reduce){.sf-tab.on::after{animation:none}}
/* Page accent strip under sticky tabs — makes each destination feel distinct. */
  .sf-page{border-top:4px solid var(--page,#23D17E)}
/* The accent strip was designed as ONE band under the sticky tabs,marking a destination. The
     landing stacks several .sf-page sections (bento,then the verified shelf),so it drew a line
     before each — reading as two rules bracketing the category band rather than one page marker.
     Dropped on the landing's stacked sections only; dedicated pages (Clip & Save,Fake Index,All Deals) keep the device. The pages strip now carries its own hairline anyway. */
  .sf-page.p-verified-browse,.sf-page.p-verified{border-top:0}
/* ── ONE PAGE LAYOUT (owner,15 Aug) ──────────────────────────────────────────────────
     Every destination should read as the same site as the landing. Measured at 1440 before
     this block — four pages,three typefaces,three sizes,two inks:
        /            system-ui 800 22px #141A21   ← the reference
        ?view=all    DM Sans   800 22px #0E1A2B
        ?view=drops  DM Sans   800 28px #0E1A2B
        ?tab=coupons DM Sans   800 28px #0E1A2B
        ?tab=fake    Inter     800 26px #0E1A2B
     The landing's .vb-sec h2 is the one that matches design/mock/,so the others come to it
     rather than the reverse. --fs-sec is left alone; these three classes are the section
     heads,and overriding them here keeps the token free for anything else using it. */
  .wbt-h,.cpn-h,.sf-cg-h,.fx-h{
    font:800 22px/1 system-ui !important;letter-spacing:-.028em !important;color:#141A21 !important;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important}
/* The accent strip was dropped on the landing; leaving it on the other shelves made them a
     different site one click away. Removed everywhere it stacks under the pages strip. */
  .sf-page.p-all,.sf-page.p-drops,.sf-page.p-deepest,.sf-page.p-stores,.sf-page.p-nonamazon,.sf-page.p-coupons{border-top:0}
.sf-page.p-all{--page:#23D17E}
.sf-page.p-verified{--page:#14B8A6}
.sf-page.p-drops{--page:#F0A323}
.sf-page.p-deepest{--page:#FF5A2C}
.sf-page.p-nonamazon{--page:#3B82F6}
.sf-page.p-coupons{--page:#14B8A6}
.sf-page.p-fake{--page:#E23B3B}
.sf-rail{max-width:var(--page-max);margin:26px auto 0;padding:0 var(--page-gutter);display:grid;grid-template-columns:1.3fr 1fr;gap:20px}
/* 6-box category verdict grid (replaces the single Verdict-of-the-Day box) + scan card below it */
  .sf-rail-v{max-width:var(--page-max);margin:8px auto 0;padding:0 var(--page-gutter);display:flex;flex-direction:column;gap:12px}
.sf-cg-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.sf-cg-h{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.sf-cg-sub{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink3)}
.sf-catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* Royal-Violet verdict card — smaller,2-line-aligned headline,cohesive fade; green BUY badge kept */
  /* Category verdict cards — image-left + big-price layout; palette ADAPTS to the verdict
     (BUY aurora×mint · WAIT cream×violet · SKIP midnight×amber · FAIR neutral). Mirrors the mockup. */
  .sf-cv{position:relative;border-radius:16px;overflow:hidden;padding:14px;display:flex;flex-direction:column;gap:9px;color:var(--cv-ink,#fff);
    background:linear-gradient(120deg,#2a1157,#5b21b6,#0f766e,#2a1157);background-size:300% 300%;
    box-shadow:0 20px 42px -28px var(--cv-sh,rgba(28,10,72,.72));animation:pcardIn .5s backwards cubic-bezier(.22,.9,.3,1),gradShift 10s ease infinite;animation-delay:var(--cv-delay,0s),0s;
    --cv-ink:#fff;--cv-ink2:#c4b7e8;--cv-line:rgba(255,255,255,.15);--cv-soft:rgba(255,255,255,.10);--cv-sh:rgba(28,10,72,.72);--cv-glow:rgba(52,211,153,.32);--cv-top:#34d399;
    --cv-pill-ink:#c9f5e6;--cv-pill-bg:rgba(255,255,255,.12);--cv-pill-bd:rgba(255,255,255,.22);--cv-was:#b9a7e8;--cv-fair-bg:rgba(6,20,16,.34);--cv-fair-bd:rgba(52,211,153,.4);--cv-fair-ink:#d6f3e6;--cv-fair-b:#34d399;
    --cv-rc-bg:#34d399;--cv-rc-ink:#053a2c;--cv-prog:#34d399;--cv-priceglow:rgba(52,211,153,.6);--cv-shine:rgba(52,211,153,.2);--cv-badge-bg:rgba(52,211,153,.2);--cv-badge-ink:#a7f3d0;--cv-badge-bd:rgba(52,211,153,.5)}
.sf-cv::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cv-top,#d96eff),transparent);z-index:2}
.sf-cv-glow{position:absolute;width:160px;height:160px;border-radius:50%;top:-62px;right:-46px;filter:blur(34px);background:var(--cv-glow,rgba(217,110,255,.42));pointer-events:none}
.sf-cv>*:not(.sf-cv-glow){position:relative;z-index:1}
.sf-cv-top{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sf-cv-pill{display:inline-flex;align-items:center;gap:4px;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:9px;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:999px;white-space:nowrap}
.sf-cv-pill.g{color:var(--cv-pill-ink);background:var(--cv-pill-bg);border:1px solid var(--cv-pill-bd);max-width:56%;overflow:hidden;text-overflow:ellipsis}
.sf-cv-pill.note{font-family:'Inter',sans-serif;font-size:10px;font-weight:700;text-transform:none;letter-spacing:0;color:var(--cv-ink2);background:var(--cv-soft);border:1px solid var(--cv-line)}
.sf-cv-cnt{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;color:var(--cv-ink2);background:var(--cv-soft);border:1px solid var(--cv-line);padding:3px 8px;border-radius:999px;flex-shrink:0}
.sf-cv-body{display:flex;flex-direction:column;gap:10px;animation:sf-cv-fade .45s ease}
.sf-cv-h{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:14.5px;line-height:1.16;letter-spacing:-.01em;margin:0;height:2.32em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--cv-ink);animation:cvFadeUp .5s ease .08s both}
/* image on the left,verdict pill + big price on the right */
  .sf-cv-main{display:flex;gap:12px;align-items:center}
.sf-cv-img{flex:0 0 90px;width:90px;height:90px;border-radius:12px;overflow:hidden;background:radial-gradient(120% 120% at 50% 20%,#fff,#eef2f7);display:flex;align-items:center;justify-content:center;font-size:34px;border:1px solid var(--cv-imgbd,transparent);box-shadow:var(--cv-imgsh,none);animation:cvSpring .55s cubic-bezier(.34,1.56,.64,1) .18s both}
.sf-cv-img img,.sf-cv-img>span{max-width:80%;max-height:80%;object-fit:contain;animation:cvWobble 4.6s ease-in-out 1.1s infinite}
.sf-cv-pcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px;justify-content:center}
.sf-cv-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;border-radius:11px;padding:7px 14px;font-weight:800;font-size:13px;letter-spacing:.01em;border:1px solid transparent;animation:cvBadgeUp .5s cubic-bezier(.22,.9,.3,1) .12s both}
.sf-cv-bem{display:inline-flex;animation:cvTick .6s cubic-bezier(.34,1.56,.64,1) .42s both}
.sf-cv-badge.buy{background:var(--cv-badge-bg,rgba(52,211,153,.2));color:var(--cv-badge-ink,#d1fae5);border-color:var(--cv-badge-bd,rgba(52,211,153,.45))}
.sf-cv-badge.wait{background:rgba(245,182,10,.2);color:#fcd34d;border-color:rgba(245,182,10,.5)}
.sf-cv-badge.skip{background:rgba(229,72,77,.2);color:#ff9195;border-color:rgba(229,72,77,.55)}
.sf-cv-badge.fair{background:rgba(196,183,232,.2);color:#d8ccf3;border-color:rgba(196,183,232,.4)}
.sf-cv-prow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sf-cv-price{font-family:'JetBrains Mono',monospace;font-weight:900;font-size:29px;line-height:1;color:var(--cv-price,var(--cv-ink));animation:cvPricePop .5s cubic-bezier(.34,1.56,.64,1) .22s both,cvGlow 2.2s ease-in-out 1.1s infinite}
.sf-cv-was{font-size:13px;color:var(--cv-was);text-decoration:line-through}
.sf-cv-off{font-size:10px;font-weight:800;padding:3px 7px;border-radius:6px;background:rgba(251,191,36,.2);color:#fbbf24;letter-spacing:.02em}
.sf-cv-fair{position:relative;overflow:hidden;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 11px;background:var(--cv-fair-bg);border:1px solid var(--cv-fair-bd);border-radius:10px;font-size:11px;color:var(--cv-fair-ink);white-space:nowrap;align-self:stretch;animation:cvFairIn .5s cubic-bezier(.22,.9,.3,1) .16s both,cvFairPulse 2.8s ease-in-out 1.5s infinite}
.sf-cv-fairinfo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-cv-fair::after{content:"";position:absolute;top:0;left:0;width:45%;height:100%;background:linear-gradient(110deg,transparent,var(--cv-shine,rgba(255,255,255,.16)),transparent);transform:translateX(-170%);animation:cvShine 4.4s ease-in-out 2s infinite;pointer-events:none}
.sf-cv-fair>*{position:relative;z-index:1}
.sf-cv-fair .wm{font-weight:800;color:var(--cv-ink);font-size:12px}
.sf-cv-fair .wm .fy{color:#23D17E}
.sf-cv-fair b{color:var(--cv-fair-b);font-weight:800}
.sf-cv-rc{flex-shrink:0;font-weight:800;font-size:11px;color:var(--cv-rc-ink);background:var(--cv-rc-bg);border-radius:9px;padding:7px 11px;min-height:34px;cursor:pointer;border:none;font-family:inherit}
  @keyframes sf-cv-fade{from{opacity:0}to{opacity:1}}
  @keyframes cvFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes cvSpring{0%{opacity:0;transform:scale(.55)}70%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
  @keyframes cvWobble{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
  @keyframes cvBadgeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes cvTick{0%{transform:scale(0) rotate(-35deg)}60%{transform:scale(1.25) rotate(10deg)}100%{transform:scale(1) rotate(0)}}
  @keyframes cvPricePop{0%{opacity:0;transform:scale(.7)}60%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
  @keyframes cvGlow{0%,100%{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 15px var(--cv-priceglow,transparent)}}
  @keyframes cvFairIn{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
  @keyframes cvFairPulse{0%,100%{border-color:var(--cv-fair-bd)}50%{border-color:var(--cv-fair-b)}}
  @keyframes cvShine{0%{transform:translateX(-170%)}45%,100%{transform:translateX(320%)}}
  @keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.sf-cv-prog{position:relative;height:3px;border-radius:3px;background:var(--cv-line);overflow:hidden;margin-top:2px}
.sf-cv-prog i{position:absolute;inset:0;transform-origin:left;background:var(--cv-prog);animation:dfProg 4.2s linear forwards}
/* ── per-verdict ACCENTS only — all cards share the aurora background above; verdict reads via badge + accent hue (no more light cards / jarring full-card swaps) ── */
  .sf-cv.wait{--cv-glow:rgba(245,182,10,.28);--cv-top:#f5b60a;--cv-priceglow:rgba(245,182,10,.55);--cv-shine:rgba(245,182,10,.2)}
.sf-cv.skip{--cv-glow:rgba(229,72,77,.26);--cv-top:#e5484d;--cv-price:#fbbf24;--cv-priceglow:rgba(251,191,36,.5);--cv-shine:rgba(229,72,77,.2)}
.sf-cv.fair{--cv-glow:rgba(148,163,184,.22);--cv-top:#c4b7e8;--cv-priceglow:transparent;--cv-shine:rgba(196,183,232,.18)}
  /* Reduce Motion: keep a gentle OPACITY-only cross-fade (no slide/zoom/progress) so the card still
     visibly animates as it rotates — accessible, since reduce-motion targets movement, not fades. */
  @keyframes sf-cv-fadein{from{opacity:0}to{opacity:1}}
  @media (prefers-reduced-motion:reduce){
    .sf-cv,.sf-cv.buy,.sf-cv-body,.sf-cv-h,.sf-cv-badge,.sf-cv-price,.sf-cv-fair{animation:sf-cv-fadein .4s ease}
    .sf-cv-img,.sf-cv-img img,.sf-cv-img>span,.sf-cv-bem{animation:none}
    .sf-cv-fair::after{display:none}.sf-cv-prog{display:none}}
  @media(max-width:900px){.sf-catgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.sf-catgrid{grid-template-columns:1fr}.sf-rail-v{padding:0 16px;gap:16px}}
/* Mobile listing rows (DealRow) — compact,scannable,verdict-forward. Rendered only on phones. */
  /* Redesigned mobile feed card (v4,owner-approved 2026-07-20) — clean gfiber-style cards,§1-honest */
  .sf-dealrows{display:flex;flex-direction:column;gap:14px}
/* Quiet cards — light Apple feed (owner 2026-08-28): white tile on page ground.
     Verified shelf keeps .psq2 / rarity / BUY stamp; this is All Deals + markdowns + deepest.
     Ink/mute tokens declared once on .mdc so brand-hex allow stays flat. */
  .mdc{--mdc-ink:#1D1D1F;--mdc-mute:#6E6E73;position:relative;background:#fff;border:0;border-radius:16px;
    box-shadow:0 4px 16px rgba(29,29,31,.07),0 1px 2px rgba(29,29,31,.04);
    overflow:hidden;transition:transform .14s,box-shadow .14s}
.mdc:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(29,29,31,.1),0 1px 2px rgba(29,29,31,.05)}
.mdc:focus-visible{outline:2px solid var(--rd-lockup);outline-offset:2px}
.mdc:active{transform:scale(.99)}
.mdc-ph{background:#fff;height:168px;display:flex;align-items:center;justify-content:center;padding:14px;border-bottom:0}
.mdc-ph img{max-width:82%;max-height:100%;object-fit:contain}
.mdc-ph span{font-size:48px}
.mdc-body{padding:10px 12px 14px;background:#fff;display:flex;flex-direction:column;gap:3px}
/* Website All Deals studio plates (parity with WiApp,owner 2026-08-30).
     Pastel wall + white floor; seller on top; NOW / Was; top-left "N% off" (owner 2026-08-30).
     Uniform card size (owner 2026-09-02): fixed image well,2-line title,pinned receipt. */
  .mdc.mdc-studio{--mdc-ph:176px;border:1px solid rgba(29,29,31,.10);box-shadow:none;
    display:flex;flex-direction:column;height:100%}
.mdc.mdc-studio:hover{box-shadow:0 4px 14px rgba(29,29,31,.08);transform:translateY(-1px)}
.mdc.mdc-studio .mdc-ph{position:relative;flex:0 0 var(--mdc-ph);height:var(--mdc-ph);width:100%;
    display:flex;align-items:center;justify-content:center;
    background:var(--studio-wall,#DCEDE3);padding:12px;border-bottom:0}
.mdc.mdc-studio .mdc-ph img{max-width:100%;max-height:100%;width:auto;height:auto;
    object-fit:contain;object-position:center;mix-blend-mode:multiply;display:block;margin:0 auto}
.mdc.mdc-studio .mdc-ph > span:not(.mdc-studio-off){font-size:36px;opacity:.4;margin:0}
/* Top-left discount chip — same gap as Was/usual; not a BUY/WAIT/SKIP stamp (§1). */
  .mdc.mdc-studio .mdc-studio-off{position:absolute;top:8px;left:8px;z-index:3;
    display:inline-flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:-.01em;
    padding:4px 9px;border-radius:999px;line-height:1.2;font-variant-numeric:tabular-nums;
    background:#fff;color:#1D1D1F;border:1px solid rgba(29,29,31,.12);
    box-shadow:0 1px 3px rgba(29,29,31,.08);pointer-events:none}
.mdc.mdc-studio .mdc-body{flex:1 1 auto;display:flex;flex-direction:column;padding:10px 12px 12px;gap:4px;min-height:0}
.mdc.mdc-studio .mdc-store{font-size:11px;font-weight:600;letter-spacing:.01em;color:#6E6E73;
    line-height:1.3;order:-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    height:1.3em;flex:0 0 1.3em}
.mdc.mdc-studio .mdc-name{font-size:13px;font-weight:700;letter-spacing:-.02em;line-height:1.25;
    -webkit-line-clamp:2;height:calc(1.25em * 2);max-height:calc(1.25em * 2);color:#1D1D1F}
.mdc.mdc-studio .mdc-member{order:2}
.mdc.mdc-studio .mdc-floor{display:flex;flex-direction:column;gap:2px;margin-top:6px;min-width:0;
    min-height:2.7em;flex:0 0 2.7em}
.mdc.mdc-studio .mdc-pr{margin:0;flex-wrap:nowrap;justify-content:flex-start;gap:8px;overflow:visible}
.mdc.mdc-studio .mdc-pr .mdc-now{font-size:14px;font-weight:800;letter-spacing:-.02em;color:#1D1D1F;
    white-space:nowrap;font-variant-numeric:tabular-nums}
.mdc.mdc-studio .mdc-pr .mdc-now b{font:inherit;font-weight:800}
.mdc.mdc-studio .mdc-was{font-size:12px;font-weight:500;color:#6E6E73;line-height:1.3;
    font-variant-numeric:tabular-nums;white-space:nowrap}
.mdc.mdc-studio .mdc-was s{text-decoration:line-through;text-decoration-thickness:1px}
.mdc.mdc-studio .mdc-was-slot{visibility:hidden}
.mdc.mdc-studio .mdc-seen{display:none}
/* ...except on All Deals, where the owner asked for the added date (2026-09-17). The rule above
   hides it as part of this card's density tuning, which is why the studio branch computed `seen`
   and never rendered it. Scoped to this shelf so the other studio surfaces (hcat tiles) keep the
   compact card. Sits under the name at label size — it is metadata, not a price. */
.all-deals .mdc.mdc-studio .mdc-seen{display:block;margin:2px 0 0;font-size:11px;font-weight:500;
  letter-spacing:-.01em;color:#6E6E73}
.mdc.mdc-studio .mdc-actions{margin-top:auto;padding-top:8px}
.mdc.mdc-studio .mdc-btn-receipt{margin-top:0;padding:10px;font-size:12.5px;border-radius:10px}
  @media(max-width:640px){
    .mdc.mdc-studio{--mdc-ph:148px}
    .mdc.mdc-studio .mdc-ph{padding:10px}
    .mdc.mdc-studio .mdc-studio-off{top:6px;left:6px;font-size:10.5px;padding:3px 8px}
  }
.mdc-meta{display:none}
/* store moves under title — mock order */
  .mdc-seen{display:block;margin-top:4px;font-size:10.5px;font-weight:500;color:var(--mdc-mute);letter-spacing:-.005em;line-height:1.25}
/* Soft 90-day read on store cards — descriptive only,never BUY/WAIT/SKIP/FAIR (§2). */
  /* Soft 90-day read — lives on the store product page (Check Verdict),not the feed card. */
  .pp-r90{margin:16px 0 0;padding:14px 16px;border-radius:14px;background:#fff4ed;border:1px solid #ffd8bf}
.pp-r90.avg{background:#f7f9fc;border-color:var(--line)}
.pp-r90 .t{font-size:16px;font-weight:800;color:#c2410c;display:flex;align-items:center;gap:7px;line-height:1.3;letter-spacing:-.01em}
.pp-r90.avg .t{color:var(--ink2)}
.pp-r90 .d{font-size:13px;color:var(--ink3);margin-top:6px;line-height:1.45;font-weight:600}
.pp-r90 .n{font-size:12.5px;color:var(--ink3);margin-top:8px;line-height:1.45;font-weight:600}
.pp-store-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pp-store-cta .wif{flex:1;min-width:180px;margin:0}
.pp-store-cta .pp-amz-link{align-self:center}
.mdc-store{display:block;font-size:12px;font-weight:500;color:var(--mdc-mute);line-height:1.3;margin:0}
.mdc-store.bb,.mdc-store.wm,.mdc-store.tg,.mdc-store.co,.mdc-store.sc{color:var(--mdc-mute);font-weight:500}
.mdc-dot{display:none}
.mdc-member{display:block;font-size:10.5px;font-weight:650;color:var(--mdc-mute);margin-top:2px;letter-spacing:.01em}
.mdc-cat{color:var(--mdc-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdc-name{font-size:13.5px;font-weight:700;line-height:1.28;letter-spacing:-.02em;color:var(--mdc-ink);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Light Apple price row: bare $ · teal −% · struck usual (matches WiDealGridCard). */
  .mdc-pr{margin:4px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 6px;font:inherit}
.mdc-pr .mdc-now{font-variant-numeric:tabular-nums;font-size:14px;font-weight:800;letter-spacing:-.024em;color:var(--mdc-ink)}
.mdc-pr .mdc-now b{font:inherit;font-weight:800;letter-spacing:inherit;color:inherit}
/* Brand teal on the chip's own #EEF1F4 ground is 2.2 — the accent is a LOGO colour, not a text
   colour on tint. #0B6B60 is the darkened teal this codebase already uses for text on light
   (see .wi-webv .wi-pctb) and lands at 5.64. */
.mdc-pr .mdc-off{font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;color:#0B6B60;letter-spacing:-.01em}
.mdc-pr .mdc-usual{font-variant-numeric:tabular-nums;font-size:12px;font-weight:500;color:var(--mdc-mute);line-height:1.3}
.mdc-pr .mdc-usual s{text-decoration:line-through;text-decoration-thickness:1px}
.mdc-prow{display:none}
/* retired stacked Now/Usually columns */
  .mdc-pc{display:flex;flex-direction:column;gap:3px;min-width:0}
.mdc-pl{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.mdc-pv{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;line-height:1}
.mdc-pv.now{font-size:28px;color:var(--ink);letter-spacing:-.02em}
.mdc-pv.was{font-size:15px;color:var(--ink3);text-decoration:none;font-weight:600}
.mdc-off{margin-left:auto;flex:none;font-size:12px;font-weight:800;color:#3F4852;background:#EEF1F4;padding:6px 11px;border-radius:999px;white-space:nowrap;letter-spacing:-.01em}
/* Quiet CTA — outline teal,.mdc-btn-view,.mdc-btn-receipt{
    width:100%;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:6px;
    background:transparent;color:var(--teal-deep);font-weight:800;font-size:13px;font-family:inherit;
    border:1.5px solid var(--rd-lockup);padding:11px;border-radius:12px;cursor:pointer;
    box-shadow:none;transition:transform .14s,background .14s,color .14s}
.mdc-btn-view:hover,.mdc-btn-receipt:hover{background:rgba(20,184,166,.08);color:#0D9488}
.mdc-btn-view:active,.mdc-btn-receipt:active{transform:scale(.98)}
.mdc-btn-view:disabled,.mdc-btn-receipt:disabled{opacity:.45;cursor:default}
/* ▼ N% under badge retired on .mdc — −% lives on the price row (light Apple). */
  .mdc-badge{display:none}
.mdc-badge.hot,.mdc-badge.mild{display:none}
.mdc-badge .tri{font-size:9px;transform:translateY(1px);color:var(--teal-deep)}
.mdc-actions{display:flex;align-items:stretch;gap:8px;margin-top:0;position:relative}
.mdc-btn-view,.mdc-btn-receipt{flex:1;min-width:0;line-height:1.15;padding:11px 10px}
  @media(max-width:640px){
    .cgrid{grid-template-columns:1fr 1fr;gap:12px}
    .mdc-ph{height:132px;padding:10px}
    .mdc-name{font-size:13px}
  }
/* ── Clip & Save (Amazon coupons) ──
   Shell matches All Deals (owner 2026-09-17): same .rd-herowrap column, tools under the page
   tabs (no duplicate H2 — tabs already name the shelf), .rbento-wrap, then quiet filters →
   .cgrid. The old .cpn-wrap island (1280 + radial wash + padded filter plate) is retired on
   desktop so Clip & Save is not a second site. */
  .cpn-wrap{max-width:none;margin:0;padding:0 0 28px;position:relative}
.cpn-head{margin:6px 2px 16px}
.cpn-h{font-family:'DM Sans',system-ui,sans-serif;font-size:var(--fs-sec);font-weight:800;letter-spacing:-.02em;margin:0 0 4px;color:var(--ink)}
.cpn-skel{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:4px}
  @media(max-width:560px){.cpn-skel{grid-template-columns:1fr}}
/* Inside the phone/app shell the body already gutters — drop the double pad. */
.wi-app .cpn-wrap{padding-left:0;padding-right:0;max-width:none}
.cpn-skel .sk{height:280px;border-radius:var(--card-r);border:1px solid var(--line);background:linear-gradient(110deg,#eef2f7 30%,#e2e8f1 50%,#eef2f7 70%);background-size:220% 100%;animation:shsShim 1.3s ease-in-out infinite}
  @media(prefers-reduced-motion:reduce){.cpn-skel .sk{animation:none;background:#eef2f7}}
/* Deal-rail / browse loading — same shimmer language as coupons (quiet paper,not bare copy). */
  .feed-skel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
  @media(max-width:900px){.feed-skel{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.feed-skel{grid-template-columns:1fr}}
.feed-skel .sk{height:168px;border-radius:var(--card-r);border:1px solid var(--line);background:linear-gradient(110deg,#eef2f7 30%,#e2e8f1 50%,#eef2f7 70%);background-size:220% 100%;animation:shsShim 1.3s ease-in-out infinite}
  @media(prefers-reduced-motion:reduce){.feed-skel .sk{animation:none;background:#eef2f7}}
.cpn-sub{color:var(--ink2);font-size:14px;max-width:66ch;line-height:1.5}
.cpn-load{padding:44px 10px;text-align:center;color:var(--ink2);font-weight:600}
/* Clip tools — quiet row under bento (All Deals spacing), not a padded filter plate. */
.cpn-filters{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;background:transparent;border:0;border-radius:0;padding:0;margin:0 0 6px;box-shadow:none}
.cpn-search{flex:0 1 220px;min-width:140px;max-width:240px;display:flex;align-items:center;gap:8px;border:1px solid #e7e6e1;border-radius:10px;padding:0 10px;background:#fff;color:var(--mute)}
.cpn-search input{flex:1;border:none;background:none;padding:8px 0;font:inherit;color:var(--ink);outline:none;font-size:13px}
.cpn-sel{border:1px solid #e7e6e1;border-radius:10px;padding:9px 12px;background:#fff;color:var(--ink);font-size:13px;font-weight:600;cursor:pointer}
.cpn-chips{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cpn-chip{border:0;border-radius:0;padding:0;font-size:13px;font-weight:600;color:#5F6872;background:none;cursor:pointer;font-family:inherit;line-height:1.3}
.cpn-chip:hover{color:#141A21;text-decoration:underline;text-underline-offset:3px}
.cpn-chip:active{transform:none}
.cpn-chip.on{background:none;border-color:transparent;color:#0B4EA2;font-weight:700}
.cpn-count{font-size:12.5px;color:var(--ink2);font-weight:600;margin:0;white-space:nowrap}
.cpn-oldnote{font-size:12px;line-height:1.35;color:#5F6872;background:transparent;border:0;border-radius:0;padding:0;margin:0 0 12px;max-width:72ch}
.cpn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  @media(max-width:900px){.cpn-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.cpn-grid{grid-template-columns:1fr}}
.cpn{background:#fff;border:1px solid var(--line);border-radius:var(--card-r);overflow:hidden;box-shadow:var(--card-sh);display:flex;flex-direction:column;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}
.cpn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
/* No Clip-only radial wash — All Deals page ground is plain paper. */
  .cpn-wrap::before{display:none;content:none}
.cpn-wrap>*{position:relative;z-index:1}
.cpn:hover{border-color:#d5dce6;box-shadow:0 1px 2px rgba(14,26,43,.06),0 10px 22px -16px rgba(14,26,43,.22)}
.cpn-ph{position:relative;height:150px;display:flex;align-items:center;justify-content:center;background:#f7f5f1;border-bottom:1px solid #f0eee9;padding:12px}
.cpn-new{position:absolute;top:8px;left:8px;background:var(--teal-deep);color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 7px;border-radius:6px}
.cpn-tech{background:#e8f0ff;color:#3559c7;font-size:10px;font-weight:800;letter-spacing:.02em;padding:2px 6px;border-radius:5px}
.cpn-more{display:block;margin:22px auto 4px;border:1px solid #e7e6e1;background:#fff;color:var(--ink);font-weight:700;font-size:13.5px;padding:11px 22px;border-radius:11px;cursor:pointer;font-family:inherit}
.cpn-more:hover{background:#faf8f5}
.cpn-ph img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.cpn-ph span{font-size:40px}
.cpn-b{padding:13px 15px 15px;display:flex;flex-direction:column;gap:9px;flex:1}
.cpn-meta{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink2);font-weight:700}
.cpn-dot{width:7px;height:7px;border-radius:50%;background:var(--buy);flex:none}
.cpn-cat{margin-left:auto;color:var(--mute);font-weight:600}
.cpn-name{font-weight:700;font-size:14px;line-height:1.35;letter-spacing:-.01em;color:var(--ink);min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cpn-rev{font-size:11.5px;color:var(--ink2);font-weight:600;margin-top:-2px}
.cpn-rev b{color:#B5820A}
.cpn-clip{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:var(--buy-bg);border:1px solid var(--buy);color:var(--buy-deep);font-weight:800;font-size:12.5px;padding:6px 11px;border-radius:999px}
.cpn-pay{display:flex;align-items:baseline;gap:9px}
.cpn-pl{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);font-weight:700}
.cpn-pv{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:23px;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.cpn-was{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--mute);text-decoration:line-through;font-variant-numeric:tabular-nums}
.cpn-verify{font-size:11px;color:var(--mute);display:flex;align-items:center;gap:5px}
.cpn-cta{margin-top:2px;border:none;border-radius:11px;background:var(--teal-deep);color:#fff;font-weight:800;font-size:14px;padding:11px;text-align:center;letter-spacing:-.01em;cursor:pointer;font-family:inherit}
.cpn-cta:active{transform:scale(.98)}
/* Clip & Save section — reuse All Deals shelf chrome (.all-deals + tools row + .ad-filter). */
.clip-save.all-deals .wbt-head{margin-bottom:8px}
.clip-save .ad-home-grid{margin:0 0 12px}
.clip-save .cs-rail,.clip-save .cgrid.cs-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;align-items:stretch}

/* ── Clip & Save v2 — uniform rail (owner 2026-09-16 card language; full-width lead dropped) ─
   Built as a SIBLING of the Verified shelf, not a lookalike: the radial studio well with
   mix-blend-mode:multiply, the store pill, the corner fold, the big orange price, the flat green
   CTA and the blue secondary are the same idioms, with the same values, as .dg-card.

   ONE deliberate difference. The Verified card's top edge is the VERDICT bar. Clip & Save carries
   coupon math and never a verdict (§1), so this edge is brand teal #14B8A6 — the documented
   Clip & Save accent — and the corner fold states a PERCENTAGE, never a verdict word. Same shape,
   separate meaning, so a coupon card can never be misread as a verdict.

   Tokens are declared on .cpn-wrap so none of this leaks to the rest of the site: --ink, --card,
   --price and --link all already exist globally with different values. */
.cpn-wrap{--cs-ink:#0d0f12;--cs-muted:#4a4f56;--cs-hair:#e4ebe7;--cs-quiet:#f3f8f5;
  --cs-buy:#0b7a45;--cs-buy-dark:#0b5c36;--cs-price:#F26400;--cs-link:#0b57d0;
  --cs-accent:#14B8A6;--cs-accent-deep:#0a5d54;
  --cs-mono:ui-monospace,SFMono-Regular,Menlo,monospace}

/* the shared studio well — identical technique to .dg-card .dg-shot */
/* Same well as the Verified card — same 112% x 92% radial from the top, same dissolve to #fff at
   the bottom edge — in Clip & Save's own hue (owner 2026-09-16). Only the HUE moves: the two tint
   stops are matched to the Verified greens by relative luminance (0.9371 vs 0.9364 and 0.8484 vs
   0.8508), so a product photo sits on exactly as much light in either shelf and only the cast
   changes, green to teal. That matters because .cs-shot img multiplies into this ground: a darker
   teal would not read as "a different colour", it would read as a dimmer photo.
   Teal is the page's own accent, already carried by the corner fold. */
.cs-shot{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:radial-gradient(112% 92% at 50% 0%,#f3f9fa 0%,#e2f0f1 46%,#fff 100%)}
.cs-shot::after{content:'';position:absolute;inset:auto 0 0 0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,transparent,#fff 92%);z-index:3}
/* multiply is what removes the white box: the proxy streams Amazon's own 300x300 product JPEGs,
   which are white-backed by construction — sampled 8/8 pure white edges on a live card — and
   white multiplied by the well IS the well. Dropped by the /api/clip-img proxy commit without
   being mentioned in it; restored because the technique is what makes the tinted well work. */
.cs-shot img{position:relative;z-index:2;mix-blend-mode:multiply;object-fit:contain;display:block}
.cs-pill{position:absolute;top:12px;left:12px;z-index:4;display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:980px;background:rgba(255,255,255,.92);
  border:1px solid rgba(13,15,18,.08);box-shadow:0 1px 3px rgba(13,15,18,.08);
  font-size:12px;font-weight:700;letter-spacing:-.014em;color:var(--cs-ink);max-width:62%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a percentage, not a verdict — see the note above */
.cs-fold{position:absolute;top:0;right:0;width:92px;height:92px;z-index:5;overflow:hidden;pointer-events:none}
.cs-fold span{position:absolute;top:17px;right:-28px;width:128px;text-align:center;transform:rotate(45deg);
  background:var(--cs-accent-deep);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.13em;
  padding:5px 0;box-shadow:0 2px 6px rgba(11,60,54,.34)}

/* actions — the pair shipped on the Verified card on 2026-09-15 */
.cs-go{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  font-family:inherit;color:#fff;background:var(--cs-buy);border-radius:9px;height:30px;padding:0 15px;
  font-size:12.5px;font-weight:800;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.cs-go:hover{background:var(--cs-buy-dark)}
.cs-copy{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;
  background:rgba(11,87,208,.07);border:1px solid rgba(11,87,208,.28);color:var(--cs-link);
  font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:8px;white-space:nowrap}
.cs-copy:hover{background:rgba(11,87,208,.14)}
.cs-copy b{font-family:var(--cs-mono);font-size:12.5px;letter-spacing:.07em;font-weight:700}
.cs-copy.is-done{background:rgba(11,122,69,.09);border-color:rgba(11,122,69,.32);color:var(--cs-buy-dark)}
.cs-added{font-size:11.5px;font-weight:600;letter-spacing:-.01em;color:var(--cs-muted)}

/* ── THE RAIL — same density as All Deals .cgrid (auto-fill minmax 260) ────────── */
.cs-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;align-items:stretch}
@media(max-width:620px){.cs-rail{grid-template-columns:minmax(0,1fr)}}
.cs-rc{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:20px;
  overflow:hidden;padding:0 0 14px;border:1px solid rgba(13,15,18,.10);
  box-shadow:0 2px 4px rgba(13,15,18,.04),0 18px 40px -24px rgba(13,15,18,.45);
  transition:transform .12s ease,box-shadow .12s ease;height:100%}
.cs-rc:hover{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(13,15,18,.05),0 24px 48px -24px rgba(13,15,18,.5)}
/* no coloured top edge — the fold carries the accent */
.cs-rc .cs-shot{height:172px;background:#fff;border-bottom:1px solid rgba(29,29,31,.08)}
.cs-rc .cs-shot img{width:74%;height:74%}
.cs-rc-store{display:block;margin:8px 0 0;font-size:12px;font-weight:500;color:#636368;line-height:1.3}

/* ── Clip & Save mobile — the All Deals card, standing on its own (owner 2026-09-16, option A) ──
   These rules were written as `.wi-app .cs-gcard …` and NONE of them reached the phone. The mobile
   shelf mounts inside WiTodayV2, whose root is <div className="tdv2"> — `.wi-app` only wraps
   WiShell, which Today does not go through. Proof on device: `.cpn-head{display:none}` never fired,
   so the page heading and its paragraph ate a third of the screen, and the cards rendered as raw
   stacked text.

   The base card styles were `.wi-app`-scoped too (.wi-gcard, .wi-gplate, .wi-gbody, .wi-gname …),
   so prefix-stripping the Clip & Save lines alone would still have left an unstyled card. This
   block therefore carries its own copy of those values — verbatim from the All Deals card it is
   meant to twin — scoped to .cs-gcard, which only this shelf renders. Nothing here can reach the
   real .wi-app screens, and All Deals is untouched.

   The --onSurface / --cardBg tokens live on .wi-app, so every one is given a literal fallback:
   outside that element they resolve to nothing. */
.cs-gcard{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0;
  background:var(--cardBg,#fff);border:1px solid rgba(29,29,31,.10);border-radius:16px;overflow:hidden;
  width:100%;text-align:left;font-family:inherit;color:inherit;box-shadow:none;position:relative;
  -webkit-tap-highlight-color:transparent}
.cs-gcard .wi-gplate{position:relative;height:132px;display:grid;place-items:center;
  background:#fff;background-image:none;overflow:hidden;border-bottom:1px solid rgba(29,29,31,.08)}
.cs-gcard .wi-gplate img{max-width:82%;max-height:112px;object-fit:contain;display:block;
  mix-blend-mode:normal}
.cs-gcard .wi-plateph{font-size:30px;opacity:.45}
.cs-gcard .wi-gbody{display:flex;flex-direction:column;gap:3px;padding:10px 12px 14px;min-width:0;flex:1}
.cs-gcard .wi-gstore{font-size:12px;font-weight:500;color:var(--onSurfaceVariant,#636368);line-height:1.3}
.cs-gcard .wi-gname{font-size:13.5px;font-weight:700;letter-spacing:-.02em;line-height:1.28;
  color:var(--onSurface,#1D1D1F);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;max-height:calc(1.28em * 2);overflow-wrap:anywhere}
.cs-gcard .wi-gpriceline{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:2px}
.cs-gcard .wi-gfloor{flex:1 1 auto}
/* the three things that make it Clip & Save rather than All Deals */
.cs-gcard .cs-gfold{position:absolute;top:0;right:0;width:78px;height:78px;z-index:5;
  overflow:hidden;pointer-events:none}
.cs-gcard .cs-gfold span{position:absolute;top:13px;right:-26px;width:110px;text-align:center;
  transform:rotate(45deg);background:#0a5d54;color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.13em;padding:4px 0;box-shadow:0 2px 6px rgba(7,16,24,.28)}
.cs-gcard .wi-gnow{font-variant-numeric:tabular-nums;color:#F26400;font-size:22px;font-weight:800;
  letter-spacing:-.04em;line-height:1.05}
.cs-gcard .cs-gcue{font-size:12px;font-weight:700;color:#0b7a45;line-height:1.25}
.cs-gcard .cs-gact{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  margin-top:auto;padding-top:8px}
.cs-gcard .cs-gact .cs-go{height:30px;padding:0 12px;font-size:12.5px;border-radius:9px}
.cs-gcard .cs-gact .cs-copy{height:30px;padding:0 10px;font-size:11.5px}
/* the shelf around the cards */
.cpn-wrap.cpn-m{padding:0 0 24px;max-width:none}
.cpn-wrap.cpn-m .cpn-head{display:none} /* the page tab already names the shelf */
/* The filter panel and the count line are gone on mobile (owner 2026-09-16). Between the page
   tabs and the first card they were spending roughly a third of the screen on chrome: a search
   box for 33 rows, three age chips, and a tally. The tabs already name the shelf and the phone
   already scrolls; the codes are what the screen is for. Desktop keeps the filters beside the
   four-up rail.
   display:none only: the underlying q / age / size state stays at its defaults, so the list
   renders unfiltered rather than depending on controls nobody can reach. */
.cpn-wrap.cpn-m .cpn-filters{display:none}
.cpn-wrap.cpn-m .cpn-count{display:none}
.cpn-wrap.cpn-m .cpn-oldnote{font-size:12px;margin:0 0 10px;padding:8px 10px}
.cpn-wrap.cpn-m .cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch;
  padding:0 4px 8px;box-sizing:border-box}
.cpn-wrap.cpn-m .cs-grid>*{min-width:0}
/* The 2-up skeleton tweak is dropped: .sk is a site-wide class and this block is deliberately not
   under .wi-app, so scoping it here would collide (check:wi catches exactly that). The site's own
   .cpn-skel already collapses to one column below 560px, and this is the loading shimmer only. */
/* the wrap also carries the desktop radial wash; it has no place behind a phone shelf */
.cpn-wrap.cpn-m::before{display:none}
.cs-rc .cs-fold{width:78px;height:78px}
.cs-rc .cs-fold span{top:13px;right:-26px;width:110px;font-size:10px;padding:4px 0}
.cs-rc-b{padding:6px 15px 0;display:flex;flex-direction:column;flex:1;min-width:0}
.cs-rc-t{margin:4px 0 0;font-size:14.5px;font-weight:800;letter-spacing:-.022em;line-height:1.28;
  color:var(--cs-ink);min-height:2.56em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cs-rc-p{display:flex;align-items:baseline;gap:9px;margin-top:11px;flex-wrap:wrap}
.cs-rc-now{font-size:29px;font-weight:800;letter-spacing:-.045em;line-height:.92;color:var(--cs-price);
  font-variant-numeric:tabular-nums}
.cs-rc-cue{font-size:12px;font-weight:700;color:var(--cs-buy)}
/* Expiry standing in for a price we do not have. It inherits the slot, so it has to undo the
   slot's price styling: display weight and --cs-price orange both say "this is an amount".
   Neutral ink at reading size says "this is when it ends". */
.cs-rc-now .cs-when,.cs-gcard .wi-gnow .cs-when{
  display:inline-block;font-weight:700;letter-spacing:-.01em;color:var(--cs-ink,#0d0f12);
  font-variant-numeric:normal}
.cs-rc-now .cs-when{font-size:13.5px;line-height:1.25}
.cs-gcard .wi-gnow .cs-when{font-size:13px;line-height:1.25}
.cs-rc-act{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:13px;padding:0 15px}
.cs-rc-act .cs-added{flex:1 0 100%;text-align:center;margin-top:2px}
/* Codes in this feed run 4 to 14 characters, and the row has to hold the LONGEST one beside a
   "View on Amazon" CTA, not the typical one. At the shipped paddings a 14-char code overflowed the
   255px content box by 5px and an 11-char code landed at exactly 0, so both wrapped. These three
   trims return 12px — enough that every code the feed currently carries sits on one line, with a
   15-char code as the first that would wrap. Wrapping stays the fallback rather than truncation:
   a half-shown checkout code is worse than a taller card. Rail only; the hero has the room. */
.cs-rc .cs-rc-act{gap:6px}
.cs-rc .cs-rc-act .cs-go{padding:0 12px}
.cs-rc .cs-rc-act .cs-copy{padding:5px 9px}
@media(prefers-reduced-motion:reduce){.cs-rc{transition:none}}
.dr{display:flex;gap:12px;padding:14px}
.dr+.dr{border-top:1px solid var(--line)}
.dr-img{width:78px;height:78px;border-radius:12px;background:#f1f4f8;flex:none;display:flex;align-items:center;justify-content:center;font-size:30px;overflow:hidden}
.dr-img img{width:100%;height:100%;object-fit:contain;padding:6px}
.dr-info{flex:1;min-width:0}
.dr-vrow{display:flex;align-items:center;gap:7px}
.dr-badge{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:11px;padding:3px 9px;border-radius:7px;letter-spacing:.02em;white-space:nowrap}
.dr-badge.buy{background:var(--buy-bg);color:var(--buy)}
.dr-badge.fair{background:var(--fair-bg);color:var(--fair)}
.dr-badge.skip{background:var(--skip-bg);color:var(--skip)}
.dr-badge.wait{background:var(--wait-bg);color:var(--wait)}
.dr-badge.unchecked{background:#eef1f4;color:#5d6675;letter-spacing:.03em}
.dr-cat{font-size:10px;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-name{font-size:14px;font-weight:600;color:var(--ink);line-height:1.28;margin:7px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dr-price{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.dr-price .now{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.dr-price .was{font-size:12.5px;color:#9aa4b2;text-decoration:line-through}
.dr-price .off{font-size:11px;font-weight:800;color:var(--alert)}
.dr-price .at{font-size:11px;color:var(--ink3);font-weight:500}
.dr-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.dr-hook{font-size:11.5px;color:var(--ink2);font-weight:500;min-width:0}
.dr-hook b{color:var(--ink2);font-weight:700}
.dr-chk{color:var(--mint);font-weight:800}
.dr-see{flex:none;border:none;background:none;color:var(--alert);font-weight:800;font-size:12px;font-family:inherit;cursor:pointer;padding:5px 0 5px 8px}
.dr-see:active{opacity:.6}
/* ===== Design v2 — home feed: paper section + white verdict cards ===== */
  .sf-rail-v{position:relative}
.sf-rail-v::before{content:"";position:absolute;left:50%;transform:translateX(-50%);width:100vw;top:-30px;bottom:-46px;background:radial-gradient(circle at 12% 8%,rgba(34,197,94,.06),transparent 34%),radial-gradient(circle at 88% 5%,rgba(59,130,246,.05),transparent 34%),radial-gradient(circle at 84% 98%,rgba(240,163,35,.045),transparent 36%),#F7F4EC;z-index:-1}
.sf-cg-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.sf-cg-htext{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;text-align:left;min-width:0}
.sf-cg-eye{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.14em;font-size:var(--fs-micro);color:#6F6959;font-weight:700;white-space:nowrap}
.sf-cg-h{font-family:'DM Sans',sans-serif;font-weight:800;font-size:var(--fs-sec);letter-spacing:-.02em;color:var(--ink);margin:0}
.sf-cg-all{border:1px solid #e2ddce;background:#fffdf8;border-radius:12px;padding:11px 18px;font-family:'DM Sans';font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;white-space:nowrap;transition:transform .12s,box-shadow .12s}
.sf-cg-all:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(16,24,40,.3)}
.vfc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px;align-items:start}
/* ── Today's-deals category rails: compact cards,horizontal scroll,per-category "View all" ── */
  .drails{display:flex;flex-direction:column;gap:18px;margin-top:4px}
/* "How it works" 3-step cards — mobile-only (from the approved mock; desktop keeps the hero demo) */
  .hiw{display:none}
  @media(max-width:640px){
    .hiw{display:block;margin:14px 16px 6px}
    .hiw-lbl{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px;text-align:center}
    .hiw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
    .hiw-step{background:var(--card);border:1px solid var(--line);border-radius:15px;box-shadow:0 1px 2px rgba(14,26,43,.05);overflow:hidden}
    .hiw-box{padding:11px 10px 12px;color:#fff}
    .hiw-box .ic{font-size:16px;line-height:1}
    .hiw-box .it{display:block;font-size:12px;font-weight:800;margin-top:8px;letter-spacing:-.02em;line-height:1.15}
    .hiw-d{font-size:10px;color:var(--ink3);margin:8px 10px 11px;line-height:1.3}
  }
/* Curated "Worth buying today" shortlist — the gated front door (real discount + best-seller) */
  .wbt{background:linear-gradient(180deg,rgba(15,157,87,.07),transparent 70%);border:1px solid rgba(15,157,87,.22);border-radius:18px;padding:16px 18px 8px;margin-bottom:6px}
.wbt-head{margin-bottom:12px}
.store-shelf{margin:18px 0 28px;padding:0 4px}
.impact-shelf .wbt-h{letter-spacing:-0.02em}
.mdc-store.im .mdc-dot{background:#0B6E4F}
.store-shelf .wbt-h{font-size:clamp(18px,2.2vw,22px)}
.mhome .store-shelf{margin:10px 14px 18px;padding:0}
.mh-in .store-shelf{margin:8px 0 16px;padding:0 2px}
/* All Deals — seller filter chips (same .hchip look as Browse; one page for Amazon/BB/WM). */
  .ad-sellers{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px;align-items:center}
.ad-sellers .hchip{font-size:12.5px;padding:7px 13px}
.ad-sellers .ad-n{font-weight:700;opacity:.72;margin-left:4px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px}
/* All Deals home chrome (owner 2026-08-25; page-nav ABOVE H1 2026-08-25): sticky page-name
     row,then title + one sub,then cards. No icon tab wall,no All-sellers pill on the H1,no Prices-as-of,no Today/Just-in section heads. */
.ad-h-mock{display:inline-flex;align-items:center;gap:10px;margin:0}
.ad-h-mock .ad-tag-ico{width:22px;height:22px;flex:none;color:#14B8A6;stroke:#14B8A6}
.ad-sub{margin:8px 0 0;max-width:58ch;font:500 13.5px/1.45 system-ui,-apple-system,sans-serif;color:#5F6872}
.ad-chk-note{margin:6px 0 0;max-width:62ch;font:500 13px/1.45 system-ui,-apple-system,sans-serif;color:#5F6872}
.ad-chk-note b{font-weight:700;color:#374151}
/* Home shelf nav — frosted bar; page names readable at desktop size (owner 2026-09-09). */
.wi-shelf-nav{
  position:sticky;top:var(--sf-header-h,58px);z-index:45;
  background:rgba(251,251,253,.78);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);
  margin:0 0 2px}
.wi-shelf-nav-inner{
  display:flex;align-items:stretch;justify-content:center;flex-wrap:nowrap;
  gap:0;max-width:1100px;margin:0 auto;padding:0 clamp(16px,3vw,28px);
  min-height:52px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.wi-shelf-nav-inner::-webkit-scrollbar{display:none}
.wi-shelf-link{
  appearance:none;background:none;border:0;margin:0;padding:0 16px;cursor:pointer;flex:0 0 auto;
  font:500 16px/52px system-ui,-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;
  letter-spacing:-.015em;color:rgba(29,29,31,.68);white-space:nowrap;position:relative;
  transition:color .18s ease}
.wi-shelf-link:hover{color:#1d1d1f}
.wi-shelf-link.on{color:#1d1d1f;font-weight:700}
.wi-shelf-link.on::after{
  content:'';position:absolute;left:16px;right:16px;bottom:0;height:2.5px;
  background:#1d1d1f;border-radius:2px 2px 0 0}
.wi-shelf-link:focus-visible{outline:2px solid #14B8A6;outline-offset:-2px;border-radius:4px}
@media (max-width:720px){
  .wi-shelf-nav-inner{justify-content:flex-start;padding:0 12px;min-height:48px}
  .wi-shelf-link{padding:0 12px;font-size:14px;line-height:48px}
  .wi-shelf-link.on::after{left:12px;right:12px}
}
.ad-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 10px}
/* Seller filter — quiet text control under the page tabs (tabs already name the shelf). */
.ad-filter{position:relative;display:inline-block;margin:0}
.ad-fbtn{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:600 13px/1.3 system-ui,-apple-system,sans-serif;color:#5F6872}
.ad-fbtn:hover{color:#141A21;text-decoration:underline;text-underline-offset:3px}
.ad-fbtn:focus-visible{outline:2px solid #14B8A6;outline-offset:3px;border-radius:3px}
.ad-fbtn.on{color:#0B4EA2}
.ad-fbtn-t{white-space:nowrap}
.ad-fmenu{position:absolute;top:calc(100% + 8px);left:0;z-index:30;min-width:210px;
  background:#fff;border:1px solid #CFD4DB;border-radius:14px;padding:6px;
  box-shadow:0 18px 44px -18px rgba(20,26,33,.38);display:grid;gap:2px}
.ad-fopt{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  cursor:pointer;background:none;border:0;border-radius:9px;padding:9px 11px;text-align:left;
  font:600 13.5px/1.2 system-ui,-apple-system,sans-serif;color:#141A21}
.ad-fopt:hover{background:#F1F4F8}
.ad-fopt:focus-visible{outline:2px solid #14B8A6;outline-offset:-2px}
.ad-fopt.on{background:#EAF3FF;color:#0B4EA2}
.ad-fopt .ad-n{font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#5F6872}
.ad-fopt.on .ad-n{color:#0B4EA2}
@media (max-width:600px){
  .ad-link{font-size:13px;padding:3px 1px}
  .ad-dot{padding:0 7px;font-size:13px}
  .ad-pagenav{padding:8px 0 9px;margin:0 0 12px}
}
.ad-empty{padding:28px 16px;text-align:center;color:var(--ink3);font-size:14px;font-weight:600;line-height:1.45}
/* Today + Just in card blocks (no section heads on the home All Deals chrome). */
  .ad-home-grid{margin:0 0 12px}
.ad-today{margin:0 0 18px}
/* retired dual-grid — kept for any leftover markup */
  .ad-justin{margin:0 0 12px}
.ad-sec-h{display:flex;flex-direction:column;gap:4px;margin:0 0 14px}
.ad-sec-t{margin:0;font:800 clamp(18px,2.2vw,22px)/1.15 'DM Sans',system-ui,sans-serif;letter-spacing:-.02em;color:#141A21}
.ad-sec-eye{font:500 13px/1.45 system-ui,-apple-system,sans-serif;color:var(--ink3,#5F6872);max-width:62ch}
/* Legacy alias — page TITLE no longer sticks; only .ad-pagenav does (owner 2026-08-25). */
  .sf-page-stick{position:static;top:auto;z-index:auto;background:transparent;
    padding:0;margin:0 0 12px;box-shadow:none}
.all-deals .wbt-head,.all-deals .wbt-head-tools{margin-bottom:8px}
/* All Deals image wells go white (owner 2026-09-16). WI_STUDIO_WALLS hashes a product id onto one
   of six pastels, so a single row put four different coloured grounds side by side and the eye read
   the WALL before the product. White is not a missing colour here: .mdc-ph img already carries
   mix-blend-mode:multiply, and multiply against white is the identity, so a white-backed product
   JPEG now composites seamlessly instead of picking up a tint cast. The hairline keeps the well
   reading as a well once the colour stops doing that job.
   Scoped to .all-deals ON PURPOSE — the same plates are used by the app rows and the store-markdowns
   shelf below this section, which keep their walls. */
.all-deals .mdc.mdc-studio .mdc-ph{background:#fff;border-bottom:1px solid rgba(29,29,31,.08)}

/* ── All Deals takes the Verified / Clip & Save card, in its own shade (owner 2026-09-16) ─────
   Same geometry, same orange price, same flat green action — so the three shelves read as one
   product — with the discount promoted out of a top-left chip and into the corner fold.

   The fold is NAVY, and that is the meaning, not decoration. Verified's fold is the verdict
   colour and Clip & Save's is brand teal; All Deals carries no verdict at all, so a neutral
   navy says "this is a listing, we have not judged it" rather than borrowing a verdict hue.
   #0e1a2b is already in this file (the monogram disc), so no new brand hex enters.

   The wells stay WHITE. The owner asked for that earlier today and it is a separate decision
   from the card shape; the Verified studio gradient is a one-line swap if parity is wanted.

   The save heart MOVES to the top-left. It lived at top:7px right:7px, which is exactly where
   the fold goes — they would have sat on top of each other. Top-left is free here because this
   card carries no store pill in the well. */
.all-deals{--ad-fold:#0e1a2b;--ad-price:#F26400;--ad-buy:#0b7a45;--ad-buy-dark:#0b5c36}
/* ── Retail banner bento (All Deals + Clip & Save) — desktop TARGET 2026-09-17;
   full-width of the parent content column (same max as listings). Never a fixed
   1240 island — empty gutters *inside* the column are a layout bug. ── */
.rbento-wrap{
  --rb-ink:#0E1A2B;--rb-teal:#14B8A6;--rb-teal-deep:#0F766E;--rb-mint:#23D17E;
  --rb-sky:#6BA3D0;--rb-peach:#E8A882;--rb-peach-soft:#F0C9B0;--rb-clay:#C45C3A;
  --rb-gold:#E8C97A;--rb-cream:#F5E6C8;--rb-paper:#FFFFFF;--rb-white:#FFFFFF;
  --rb-muted:#5B6575;--rb-strike:#9AA3B2;--rb-line:#E6E4DE;--rb-red:#D92D20;
  --rb-gap:14px;--rb-r:16px;--rb-rsm:12px;
  background:var(--rb-paper);border-radius:18px;padding:14px;margin:0 0 22px;
  box-shadow:none;
  width:100%;max-width:none;box-sizing:border-box;
}
.rbento{
  display:grid;
  grid-template-columns:minmax(200px,.9fr) minmax(420px,1.85fr) minmax(240px,1fr);
  grid-template-rows:1fr minmax(120px,132px);
  gap:var(--rb-gap);width:100%;max-width:none;min-height:520px;height:clamp(500px,32vw,560px);
  margin:0;box-sizing:border-box;
}
.rbento-left{grid-column:1;grid-row:1/3;display:grid;grid-template-rows:minmax(110px,132px) 1fr;gap:var(--rb-gap);min-height:0;min-width:0}
.rbento-mid{grid-column:2;grid-row:1;display:grid;grid-template-columns:minmax(72px,.22fr) minmax(0,1fr);gap:var(--rb-gap);min-height:0;min-width:0}
.rbento-right{grid-column:3;grid-row:1/3;display:grid;grid-template-rows:1fr 1fr;gap:var(--rb-gap);min-height:0;min-width:0}
.rbento-news{grid-column:2;grid-row:2}
.rbento-tile{
  border-radius:var(--rb-r);overflow:hidden;position:relative;background:var(--rb-white);
  min-height:0;box-shadow:0 2px 6px rgba(14,26,43,.05),0 12px 28px rgba(14,26,43,.10);
}
.rbento-promo{
  background:var(--rb-sky);display:flex;align-items:center;justify-content:space-between;
  padding:16px 12px 16px 18px;gap:6px;
}
.rbento.clipsave .rbento-promo{background:#7BB8A8}
.rbento-promo-copy{flex:1;min-width:0}
.rbento-promo-title{
  font-size:17px;font-weight:800;line-height:1.18;color:var(--rb-white);letter-spacing:-.025em;
}
.rbento-promo-title .pct{color:var(--rb-cream);display:inline-block;transition:opacity .35s ease,transform .35s ease}
.rbento-promo-title .pct.is-swapping{opacity:0;transform:translateY(4px)}
.rbento-promo-sub{margin-top:6px;font-size:11px;font-weight:600;color:rgba(255,255,255,.88)}
.rbento-promo-circle{
  width:92px;height:92px;border-radius:50%;background:var(--rb-white);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 4px 14px rgba(14,26,43,.12);transition:transform .45s ease,opacity .45s ease;
}
.rbento-promo-circle.is-swapping{opacity:0;transform:scale(.92)}
.rbento-promo-circle img{width:100%;height:100%;object-fit:cover}
.rbento-tall{display:flex;flex-direction:column;background:var(--rb-peach)}
.rbento.clipsave .rbento-tall{background:#D4A574}
.rbento-tall-copy{padding:20px 18px 8px;position:relative;z-index:2}
.rbento-tall-title{
  font-size:24px;font-weight:800;line-height:1.12;color:var(--rb-white);letter-spacing:-.03em;
}
.rbento-tall-title .pct{color:var(--rb-cream)}
.rbento-cta{
  display:inline-flex;align-items:center;margin-top:12px;background:var(--rb-white);color:var(--rb-ink);
  font-size:12px;font-weight:700;padding:8px 14px;border-radius:999px;letter-spacing:-.01em;
  border:0;cursor:pointer;font-family:inherit;
}
.rbento-tall-photo{flex:1;min-height:0;margin:8px 10px 10px;border-radius:14px;overflow:hidden;position:relative}
.rbento-tall-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 40%;
  transform:scale(1);transform-origin:center 40%;will-change:transform;
}
.rbento.motion-on .rbento-tall-photo img{animation:rbKenBurns 12s ease-in-out infinite alternate}
@keyframes rbKenBurns{from{transform:scale(1)}to{transform:scale(1.04)}}
.rbento-narrow{position:relative}
.rbento-narrow-shot{position:absolute;inset:0;overflow:hidden}
.rbento-narrow-shot img{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  transition:opacity .7s ease;transform:scale(1);transform-origin:center 35%;will-change:transform,opacity;
}
.rbento-narrow-shot img.layer-b{opacity:0}
.rbento-narrow-shot img.layer-b.is-on{opacity:1}
.rbento.motion-on .rbento-narrow-shot img{animation:rbKenBurnsN 14s ease-in-out infinite alternate}
@keyframes rbKenBurnsN{from{transform:scale(1)}to{transform:scale(1.05)}}
/* White type over a ROTATING PHOTOGRAPH, so its contrast is whatever the photo happens
   to be. Measured on the two live layers with the text hidden: median 7.05:1 but a worst
   region of 3.41:1, under the 4.5 an 11px caption needs. A text-shadow is a glow, not a
   guarantee, and the next image to rotate in could be brighter still.

   The scrim lives on the CAPTION, not on a ::after of the tile, and that is deliberate:
   check-contrast resolves a backdrop by walking ANCESTORS for a CSS background-image
   (backdropOf -> 'IMG' -> resolve by pixel). A sibling <img> and a pseudo-element are
   both invisible to it, so it fell through to the white tile and reported 1:1 — a real
   failure, but for the wrong reason, and one no colour change could have silenced.
   Painting the gradient here makes the element honest to the checker, which then
   pixel-samples what is actually on screen. Full-bleed with padding keeps the text
   exactly where it was (8px in, 10px up). */
.rbento-narrow-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px 8px 10px;
  background:linear-gradient(to top,rgba(9,11,14,.92) 0%,rgba(9,11,14,.88) 42%,transparent 100%);
  font-size:11px;font-weight:700;color:var(--rb-white);text-shadow:0 1px 8px rgba(0,0,0,.5);line-height:1.25;
}
.rbento-hero{
  display:grid;grid-template-columns:1fr 1.15fr;gap:4px;padding:26px 18px 22px 26px;position:relative;overflow:hidden;
  background:var(--rb-clay);
}
.rbento.clipsave .rbento-hero{background:#B85A3C}
.rbento-hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:2px}
.rbento-hero-title{
  font-size:clamp(24px,1.6vw,30px);font-weight:800;line-height:1.1;color:var(--rb-white);letter-spacing:-.035em;max-width:min(320px,100%);
  transition:opacity .5s ease,transform .5s ease;
}
.rbento-hero-title.is-fading{opacity:0;transform:translateY(6px)}
.rbento-hero-title .pct{color:var(--rb-gold)}
.rbento-hero-live{margin-top:10px;font-size:12px;font-weight:600;color:rgba(255,255,255,.82)}
.rbento-hero-visual{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:flex-end;padding-right:4px}
.rbento-hero-shot{
  width:100%;height:100%;max-height:320px;border-radius:16px;overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.14);position:relative;
}
.rbento-hero-shot::after{
  content:"";position:absolute;inset:0;border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none;z-index:3;
}
.rbento-hero-shot img{
  width:100%;height:100%;object-fit:contain;object-position:center;display:block;
  position:absolute;inset:0;transition:opacity .55s ease;background:#FAFAF8;
}
.rbento-hero-shot img.layer-a{z-index:1}
.rbento-hero-shot img.layer-b{z-index:2;opacity:0}
.rbento-hero-shot img.layer-b.is-on{opacity:1}
.rbento-dots{display:flex;gap:6px;margin-top:12px}
.rbento-dots button{
  width:7px;height:7px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.35);cursor:pointer;
  transition:background .25s ease,transform .25s ease;
}
.rbento-dots button.is-active{background:var(--rb-gold);transform:scale(1.15)}
.rbento-news{
  background:var(--rb-sky);display:flex;align-items:center;padding:14px 20px;gap:18px;
  border-radius:var(--rb-r);overflow:hidden;
}
.rbento.clipsave .rbento-news{background:#7BB8A8}
.rbento-news-badge{
  display:inline-flex;align-items:center;gap:6px;background:rgba(14,26,43,.18);color:var(--rb-white);
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:6px;
}
.rbento-news-body{flex:1;min-width:0}
.rbento-news-title{font-size:18px;font-weight:800;color:var(--rb-white);letter-spacing:-.02em}
.rbento-news-desc{
  margin-top:3px;font-size:12px;font-weight:560;color:rgba(255,255,255,.9);line-height:1.35;max-width:440px;
  min-height:2.7em;transition:opacity .4s ease,transform .4s ease;
}
.rbento-news-desc.is-fading{opacity:0;transform:translateY(4px)}
.rbento-news-art{width:150px;height:96px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center}
.rbento-bag{width:132px;height:92px;position:relative}
.rbento-bag svg{width:100%;height:100%;display:block}
.rbento.motion-on .rbento-chip-float{animation:rbChipFloat 3.2s ease-in-out infinite}
.rbento.motion-on .rbento-chip-float.delay{animation-delay:.9s}
@keyframes rbChipFloat{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-3px);opacity:.92}}
.rbento-rank{background:var(--rb-peach-soft);padding:12px 12px 10px;display:flex;flex-direction:column;min-height:0}
.rbento-rank.alt{background:#EDD5C4}
.rbento.clipsave .rbento-rank{background:#F0C9B0}
.rbento.clipsave .rbento-rank.alt{background:#E8B89A}
.rbento-rank-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px;gap:8px}
.rbento-rank-head h3{font-size:14px;font-weight:800;color:var(--rb-ink);letter-spacing:-.02em;line-height:1.2;margin:0}
.rbento-rank-meta{font-size:10px;font-weight:600;color:var(--rb-muted);margin-top:2px}
.rbento-chev{
  width:22px;height:22px;border-radius:50%;background:rgba(14,26,43,.07);display:flex;align-items:center;
  justify-content:center;flex-shrink:0;color:var(--rb-ink);font-size:14px;font-weight:700;line-height:1;border:0;cursor:pointer;
}
.rbento-products{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1;min-height:0}
.rbento-pcard{
  background:var(--rb-white);border-radius:var(--rb-rsm);padding:8px 8px 9px;
  display:flex;flex-direction:column;position:relative;min-height:0;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit;
}
.rbento-pcard:disabled{cursor:default}
.rbento-rank-badge{
  position:absolute;top:6px;left:6px;min-width:20px;height:20px;padding:0 5px;background:#E85D04;color:var(--rb-white);
  font-size:11px;font-weight:800;border-radius:5px;display:flex;align-items:center;justify-content:center;z-index:2;
}
.rbento-pimg{
  height:78px;display:flex;align-items:center;justify-content:center;margin:2px 0 6px;background:#FAFAF8;border-radius:8px;overflow:hidden;
}
.rbento-pimg img{max-width:92%;max-height:72px;object-fit:contain}
.rbento-ppct{font-size:13px;font-weight:800;color:var(--rb-red);letter-spacing:-.02em}
.rbento-ppct.teal{color:var(--rb-teal-deep)}
.rbento-ppct .buy{
  display:inline-block;background:var(--rb-mint);color:var(--rb-white);font-size:9px;font-weight:800;
  letter-spacing:.03em;padding:2px 5px;border-radius:4px;margin-left:3px;vertical-align:1px;
}
.rbento-pprice{margin-top:2px;font-size:13px;font-weight:800;color:var(--rb-ink)}
.rbento-pprice s{font-weight:600;font-size:11px;color:var(--rb-strike);margin-left:4px}
.rbento-pname{
  margin-top:2px;font-size:10px;font-weight:600;color:var(--rb-muted);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media(max-width:1100px){
  .rbento-wrap{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .rbento.motion-on .rbento-tall-photo img,
  .rbento.motion-on .rbento-narrow-shot img,
  .rbento.motion-on .rbento-chip-float{animation:none!important}
  .rbento-hero-title,.rbento-hero-shot img,.rbento-promo-circle,.rbento-promo-title .pct,
  .rbento-news-desc,.rbento-narrow-shot img{transition:none!important}
}

.all-deals .mdc.mdc-studio{border-radius:20px;overflow:hidden;border:1px solid rgba(13,15,18,.10);
  box-shadow:0 2px 4px rgba(13,15,18,.04),0 18px 40px -24px rgba(13,15,18,.45);
  transition:transform .12s ease,box-shadow .12s ease}
.all-deals .mdc.mdc-studio:hover{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(13,15,18,.05),0 24px 48px -24px rgba(13,15,18,.5)}
.all-deals .mdc.mdc-studio .rc-save{left:7px;right:auto}
.all-deals .mdc.mdc-studio .mdc-studio-off{top:16px;right:-30px;left:auto;width:132px;
  text-align:center;transform:rotate(45deg);background:var(--ad-fold);color:#fff;border:0;
  border-radius:0;box-shadow:0 2px 6px rgba(7,16,24,.34);padding:5px 0;z-index:5;
  font-size:10.5px;font-weight:800;letter-spacing:.13em;display:block}
.all-deals .mdc.mdc-studio .mdc-pr .mdc-now{font-size:24px;font-weight:800;letter-spacing:-.04em;
  color:var(--ad-price);line-height:1.05}
.all-deals .mdc.mdc-studio .mdc-was{font-size:12.5px}
.all-deals .mdc.mdc-studio .mdc-actions{justify-content:center}
.all-deals .mdc.mdc-studio .mdc-btn-receipt{background:var(--ad-buy);border:0;color:#fff;
  font-weight:800;font-size:12.5px;letter-spacing:-.01em;height:30px;padding:0 15px;width:auto;
  border-radius:9px;display:inline-flex;align-items:center;justify-content:center;margin:0;
  /* flex:1 1 0 upstream stretched it to the full card, which is the full-bleed shape the
     Verified CTA was narrowed away from on 2026-09-15. Sized to its label, like that one. */
  flex:0 0 auto}
.all-deals .mdc.mdc-studio .mdc-btn-receipt:hover{background:var(--ad-buy-dark);color:#fff}
@media(max-width:640px){.all-deals .mdc.mdc-studio .mdc-studio-off{top:14px;right:-32px;
  width:128px;font-size:10px;padding:4px 0}}
.vb-sec{align-items:center;padding-top:4px;padding-bottom:8px;margin:0 0 10px}
.hdrib{margin-bottom:12px}
.p-drops .wbt-head,.nonamazon-deals .wbt-head{padding-left:2px;padding-right:2px}
/* Department chips on All Deals / markdowns / Deepest — sit under the tab strip. */
  .sf-deptbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;align-items:center;position:sticky;top:108px;z-index:4;background:var(--bg,#F4F6F8);padding:8px 0 10px}
.sf-deptbar .hchip{font-size:12.5px;padding:7px 13px}
.sf-deptbar .ad-n{font-weight:700;opacity:.72;margin-left:4px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px}
/* Today's picks — one horizontal swipe row (not a wrapping grid). */
  .sf-leadrow{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 0 22px;padding:2px 2px 10px;scrollbar-width:thin}
.sf-leadrow>*{flex:0 0 min(280px,82vw);max-width:300px;scroll-snap-align:start}
.sf-leadband .hcat-title{font:800 clamp(22px,2.8vw,28px)/1.15 'DM Sans',system-ui,sans-serif;letter-spacing:-.03em}
/* Listing shelves share the category-banner language: recessed pastel band,raised white product well. */
  .hcat-tile{border-radius:18px;padding:14px 14px 16px;margin:0 0 14px;
    box-shadow:inset 0 1px 2px rgba(20,26,33,.1);overflow:hidden}
.hcat-tile .hcat-head{border-bottom:0;padding-bottom:6px;margin-bottom:10px;align-items:center}
.hcat-tile .hcat-title{font:800 17px/1.2 system-ui;letter-spacing:-.022em;color:inherit}
.hcat-tile .drail-n{background:rgba(255,255,255,.55);color:inherit;font-weight:800}
.hcat-tile .mdc,.hcat-tile .rc{
    background:transparent;border:0;box-shadow:none;overflow:visible}
.hcat-tile .mdc:hover,.hcat-tile .rc:hover{
    transform:translateY(-2px);border:0;box-shadow:none}
.hcat-tile .mdc-ph,.hcat-tile .rc-img{
    background:#fff;border-radius:12px;border:0;
    box-shadow:0 4px 11px -5px rgba(0,0,0,.3);margin:4px 4px 0}
.hcat-tile .mdc-body,.hcat-tile .rc-body{background:transparent}
.hcat-tile .mdc-ph{height:240px}
/* Studio plates on Biggest markdowns lead band — keep pastel wall + white card (owner 2026-08-30). */
  .hcat-tile .mdc.mdc-studio{background:#fff;border:1px solid rgba(29,29,31,.10);box-shadow:none;overflow:hidden;border-radius:16px}
.hcat-tile .mdc.mdc-studio:hover{box-shadow:0 4px 14px rgba(29,29,31,.08);transform:translateY(-1px)}
.hcat-tile .mdc.mdc-studio .mdc-ph{background:var(--studio-wall,#DCEDE3);
    border-radius:0;box-shadow:none;margin:0;border:0}
.hcat-tile .mdc.mdc-studio .mdc-body{background:#fff}
.hcat-tile .mdc.mdc-studio .mdc-name{color:#1D1D1F}
.hcat-tile .mdc.mdc-studio .mdc-store,.hcat-tile .mdc.mdc-studio .mdc-was{color:#6E6E73;opacity:1}
.hcat-tile .mdc.mdc-studio .mdc-now,.hcat-tile .mdc.mdc-studio .mdc-now b{color:#1D1D1F}
.hcat-tile .mdc-name,.hcat-tile .rc-name{color:inherit}
.hcat-tile .mdc-meta,.hcat-tile .mdc-seen,.hcat-tile .mdc-pl,.hcat-tile .rc-usual{color:inherit;opacity:.78}
.hcat-tile .mdc-pv.now,.hcat-tile .rc-now{color:inherit}
.p-drops .wbt{background:none;border:0;padding:0;margin:0 0 8px}
.sf-leadband{margin-bottom:18px}
.sf-leadband .sf-leadrow{margin:0}
  @media(max-width:640px){.sf-deptbar{top:96px;margin-bottom:12px}.sf-leadrow>*{flex-basis:min(220px,78vw)}.hcat-tile{padding:12px 10px 12px}.hcat-tile .mdc-ph{height:180px}}
.wbt-h{font-family:'DM Sans',sans-serif;font-weight:800;font-size:var(--fs-sec);letter-spacing:-.02em;color:var(--ink);margin:0;display:flex;align-items:center;gap:9px}
.wbt-ck{width:26px;height:26px;border-radius:8px;background:#FFEDE6;display:grid;place-items:center;font-size:15px;flex:none}
.wbt-eye{display:block;font-size:12.5px;color:var(--ink3);margin-top:6px;font-weight:600}
.wbt-eye b{color:var(--ink2)}
.wbt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;padding-bottom:10px;align-items:stretch}
.wbt-grid .rc,.wbt-grid .mdc{width:auto}
.wbt-grid .rc-img{height:200px;background:#fff}
.wbt-more{display:block;margin:2px auto 10px;border:1px solid rgba(15,157,87,.32);background:rgba(15,157,87,.07);color:var(--buy);font-family:inherit;font-weight:800;font-size:13px;border-radius:11px;padding:11px 24px;cursor:pointer;transition:background .15s}
.wbt-more:hover{background:rgba(15,157,87,.13)}
  @media(max-width:640px){.wbt{padding:14px 13px 6px}.wbt-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}}
.drail-grp{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);display:flex;align-items:center;gap:10px;margin:8px 2px 0}
.drail-grp:first-child{margin-top:0}
.drail-grp::after{content:"";flex:1;height:1px;background:var(--line)}
.drail-trend{font-size:10px;font-weight:800;color:#c2410c;background:rgba(244,80,30,.12);border:1px solid rgba(244,80,30,.3);border-radius:20px;padding:1px 8px;white-space:nowrap}
.drail{position:relative}
.drail-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 9px;gap:10px}
.drail-cat{display:flex;align-items:center;gap:8px;font-size:var(--fs-ui);font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.drail-ico{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;background:rgba(14,26,43,.06);flex:none}
.drail-n{font-size:11px;font-weight:700;color:var(--ink3);background:rgba(14,26,43,.07);border-radius:20px;padding:2px 8px}
.drail-all{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:800;color:var(--coral-deep);white-space:nowrap;cursor:pointer;padding:4px 2px}
.drail-all:hover{text-decoration:underline}
.drail-scroll{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 10px;scrollbar-width:thin}
.drail-scroll::-webkit-scrollbar{height:7px}
.drail-scroll::-webkit-scrollbar-thumb{background:rgba(14,26,43,.16);border-radius:20px}
.drail-scroll::-webkit-scrollbar-track{background:transparent}
.drail-arrow{position:absolute;top:calc(50% + 6px);width:32px;height:32px;border-radius:50%;background:var(--card);border:1px solid var(--line);box-shadow:0 8px 20px -8px rgba(16,24,40,.5);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;font-size:16px;color:var(--ink2);font-family:inherit;line-height:1;padding:0}
.drail-arrow.l{left:-8px}
.drail-arrow.r{right:-8px}
.drail-arrow:hover{color:var(--ink)}
  @media(max-width:680px){.drail-arrow{display:none}}
.rc{position:relative;flex:0 0 auto;width:210px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--card-r);overflow:hidden;transition:transform .14s,box-shadow .14s,border-color .14s;box-shadow:var(--card-sh);display:flex;flex-direction:column}
/* one-tap ♥ Save — grey heart (owner 2026-08-25); never coral flame energy on All Deals */
  .rc-save{position:absolute;top:7px;right:7px;z-index:3;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#8A93A0;background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:0 2px 6px -2px rgba(16,24,40,.18);transition:transform .12s,color .15s,background .15s}
.rc-save svg{width:15px;height:15px}
.rc-save:hover{color:#5A6472}
.rc-save.on{color:#5A6472;background:#fff;border-color:#C9D0D8}
.rc-save:active{transform:scale(.9)}
.rc-save.sm{width:24px;height:24px;top:4px;right:4px}
.rc-save.sm svg{width:12px;height:12px}
.rc:hover{transform:translateY(-1px);border-color:#d5dce6;box-shadow:0 1px 2px rgba(14,26,43,.06),0 10px 22px -16px rgba(14,26,43,.22)}
.rc:focus-visible{outline:2px solid #14B8A6;outline-offset:2px}
.rc-img{height:150px;flex:none;background:#fff;display:flex;align-items:center;justify-content:center}
.rc-img img{max-width:82%;max-height:120px;object-fit:contain}
.rc-img span{font-size:44px}
.rc-body{padding:12px 12px 14px;flex:1;display:flex;flex-direction:column;gap:8px;background:linear-gradient(160deg,#f7fafd,#eef3f9)}
.rc-store{font:650 11px/1 system-ui;color:#4A5761;letter-spacing:.01em}
.rc-name{font-size:13.5px;font-weight:600;line-height:1.3;color:var(--ink);min-height:35px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rc-price{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:0;font:600 12.5px/1.25 system-ui;color:#4A5761}
.rc-now{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:16px;font-weight:800;color:var(--ink)}
.rc-usual{font-size:12px;color:#4A5761;margin-left:0;font-weight:600;text-decoration:none}
.rc-usual .rc-uu{font-weight:700;color:#4A5761;letter-spacing:.01em}
.rc-uu{color:#4A5761;font-weight:600;margin-right:2px}
.rc-usual s{text-decoration:none;font-family:'JetBrains Mono',ui-monospace,monospace}
.rc-pill{align-self:flex-start;margin:0;font-size:10.5px;font-weight:800;color:#3F4852;background:none;border:none;padding:0}
.rc-badge{position:absolute;top:8px;left:8px;z-index:3;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;letter-spacing:-.01em;padding:4px 9px;border-radius:999px;line-height:1;
    background:#fff;color:#3F4852;border:1.5px solid rgba(20,184,166,.55);box-shadow:0 1px 2px rgba(20,26,33,.06)}
.rc-badge.hot,.rc-badge.mild{background:#fff;color:#3F4852;border-color:rgba(20,184,166,.55);box-shadow:0 1px 2px rgba(20,26,33,.06)}
.rc-badge .tri{font-size:8px;transform:translateY(1px);color:var(--teal-deep)}
.rc-cta{display:block;width:100%;margin-top:auto;border:1.5px solid #14B8A6;border-radius:10px;padding:9px 8px;font-family:inherit;font-size:12.5px;font-weight:800;color:#0F766E;background:transparent;cursor:pointer;text-align:center;transition:background .14s,transform .1s,color .14s;box-shadow:none}
.rc-cta:hover{background:rgba(20,184,166,.08);color:#0D9488}
.rc-cta:active{transform:scale(.97)}
  @media(max-width:640px){.rc{width:168px}.rc-img{height:120px}.rc-img img{max-height:96px}.rc-img span{font-size:36px}.drails{gap:16px}}
.vfc{background:#fff;border:1px solid #e8e4d8;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 12px 30px -24px rgba(16,24,40,.4)}
.vfc-shot{position:relative;height:150px;background:#f6f7f9;border-top:1px solid #eef0f2;border-bottom:1px solid #eef0f2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.vfc-shot img{max-width:96%;max-height:95%;object-fit:contain}
/* the striped placeholder only shows when there is NO product image */
  .vfc-shot:has(.vfc-ph){background:repeating-linear-gradient(45deg,#eef0f2,#eef0f2 10px,#e7eaee 10px,#e7eaee 20px)}
.vfc-ph{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:#aab2bd}
.vfc-badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:8px;padding:5px 10px;box-shadow:0 2px 8px rgba(16,24,40,.14)}
.vfc-badge .vfc-wm{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;font-weight:800;color:var(--ink);font-size:10.5px;letter-spacing:-.02em}
.vfc-badge .vfc-wm .fy{color:#23D17E}
/* mint mid — purple retired */
  .vfc-badge .vfc-sep{color:#d0d4da;font-weight:700}
.vfc-badge b{font-size:11px;font-weight:800}
.vfc-badge.buy b{color:#0E7C3F}
.vfc-badge.fair b{color:#3B82F6}
.vfc-badge.wait b{color:#E8A317}
.vfc-badge.skip b{color:#E23B3B}
.vfc-badge.unchecked .vfc-st{font-family:'DM Sans';color:#5d6675;font-weight:700;font-size:10.5px;letter-spacing:.03em}
.vfc-off{position:absolute;top:12px;right:12px;background:var(--ink);color:#fff;font-family:'DM Sans';font-weight:800;font-size:12px;padding:4px 9px;border-radius:8px}
.vfc-body{padding:14px 16px 15px;text-align:left;display:flex;flex-direction:column;flex:1}
.vfc-name{font-family:'DM Sans';font-weight:700;font-size:15.5px;line-height:1.3;color:var(--ink);margin:0;padding:14px 16px 11px;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vfc-price{display:flex;align-items:baseline;gap:9px;margin-top:9px;padding-bottom:11px;border-bottom:1px solid #eef0f2}
.vfc-now{font-family:'DM Sans';font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--ink)}
.vfc-was{font-size:14px;color:#9aa1ab;text-decoration:line-through}
.vfc-hook{display:block;width:100%;text-align:left;border:none;background:none;padding:10px 0 0;font-family:'DM Sans';font-size:13px;color:#5d6675;cursor:pointer;line-height:1.45;margin-top:10px}
.vfc-tri{font-size:10px}
.vfc.buy .vfc-tri{color:#22C55E}
.vfc.fair .vfc-tri{color:#3B82F6}
.vfc-see{color:var(--coral);font-weight:700;white-space:nowrap}
.vfc-hook:hover .vfc-see{text-decoration:underline}
/* Card animation — staggered entrance (delay set inline per card) + hover lift + image zoom */
  /* entrance plays ON SCROLL-INTO-VIEW (.vis added by IntersectionObserver) so it's actually seen —
     not on mount while below the fold. 'backwards' fill hides the card during its stagger delay;
     NO 'forwards' so the post-animation transform stays controllable by :hover. */
  .vfc{opacity:0;transform:translateY(22px);transition:transform .16s ease,box-shadow .16s ease}
.vfc.vis{opacity:1;transform:none;animation:vfcIn .6s cubic-bezier(.2,.7,.2,1) backwards}
.vfc:hover{transform:translateY(-5px);box-shadow:0 26px 48px -26px rgba(16,24,40,.5)}
.vfc-shot img{transition:transform .4s ease}
.vfc:hover .vfc-shot img{transform:scale(1.06)}
  @keyframes vfcIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.vfc{opacity:1;transform:none}.vfc.vis{animation:none}.vfc:hover{transform:none}.vfc:hover .vfc-shot img{transform:none}}
  @media(max-width:900px){.vfc-grid{grid-template-columns:repeat(2,1fr)}}
/* "How the verdict works" band (Design v2) */
  .hvw{background:#0E1A2B;color:#fff}
.hvw-in{max-width:1180px;margin:0 auto;padding:52px 40px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.hvw-l{max-width:640px}
.hvw-eye{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:#2ED37F;font-weight:700}
.hvw-h{font-family:'DM Sans',sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;line-height:1.16;color:#fff;margin:14px 0 0}
.hvw-p{font-size:15px;line-height:1.55;color:#aab4c2;margin:12px 0 0}
.hvw-cta{flex:none;background:#14B8A6;color:#042F2E;font-family:'DM Sans';font-weight:800;font-size:15px;padding:14px 24px;border-radius:13px;text-decoration:none;white-space:nowrap;transition:transform .12s,box-shadow .12s}
.hvw-cta:hover{transform:translateY(-1px);box-shadow:0 12px 28px -12px rgba(20,184,166,.55);background:#0D9488;color:#fff}
  @media(max-width:760px){.hvw-in{padding:38px 20px;flex-direction:column;align-items:flex-start}}
/* ===== Design v2 — Verdict page (aligned with site ink/mist,not cream brochure) ===== */
  .vp2{background:linear-gradient(180deg,#eef2f7 0%,var(--bg) 28%,var(--bg) 100%);min-height:100vh;min-height:100dvh}
/* dvh after vh: iOS Safari's toolbar makes 100vh taller than
     the visible viewport,so a full-height section jumps as the bar hides. Both declared so a
     browser without dvh keeps the old behaviour rather than losing the rule entirely. */
  .vp2-embedded{background:none;min-height:0}
.vp2-forbar{background:#0E1A2B}
.vp2-forin{max-width:1120px;margin:0 auto;padding:16px 40px;display:flex;align-items:center;gap:16px}
.vp2-forlbl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:#2ED37F;font-weight:700;white-space:nowrap}
.vp2-forurl{flex:1;min-width:0;background:#fff;border-radius:12px;padding:13px 16px;font-size:13.5px;color:#5d6675;font-family:'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp2-recheck{flex:none;background:var(--coral);color:#fff;border:none;border-radius:11px;padding:12px 20px;font-family:'DM Sans';font-weight:800;font-size:14px;cursor:pointer}
.vp2-wrap{max-width:1120px;margin:0 auto;padding:22px 40px 60px}
.vp2-embedded .vp2-wrap{padding:0}
.vp2-crumbs{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--ink3);margin-bottom:18px;display:flex;align-items:center;gap:4px}
.vp2-back{border:none;background:none;color:var(--ink3);font:inherit;cursor:pointer;text-transform:uppercase;letter-spacing:.1em}
.vp2-back:hover{color:var(--ink)}
.vp2-share{margin-left:auto;text-transform:none;letter-spacing:normal}
.vp2-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;display:grid;grid-template-columns:280px 1fr;gap:26px;box-shadow:var(--card-sh)}
.vp2-shot{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;position:relative}
.vp2-shot .photo,.vp2-shot img{max-width:82%;max-height:220px;object-fit:contain}
.vp2-imgwrap{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:0}
.vp2-imgwrap img,.vp2-imgwrap .photo{max-width:82%;max-height:210px;object-fit:contain}
.vp2-thumbs{flex:none;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:8px 10px 2px;position:relative;z-index:1}
.vp2-thumb{width:38px;height:38px;border-radius:8px;border:1.5px solid #e2e6ea;background:#fff;padding:2px;cursor:pointer;overflow:hidden;flex:none;transition:border-color .12s}
.vp2-thumb.on{border-color:var(--ink)}
.vp2-thumb:hover{border-color:#c0c6cf}
.vp2-thumb img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.vp2-rating{position:absolute;top:12px;left:0;right:0;text-align:center;font-size:11px;color:#8a919c;font-weight:600}
.vp2-main{min-width:0}
.vp2-eye,.vp2-peye{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:#8a919c;font-weight:700}
.vp2-name{font-family:'DM Sans';font-weight:800;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;line-height:1.2;color:var(--ink);margin:8px 0 0}
.vp2-cond{font-size:12.5px;color:#8a6d1a;background:#fdf3d6;border-radius:9px;padding:8px 12px;margin-top:12px}
.vp2-vrow{display:flex;align-items:flex-start;gap:16px;margin:16px 0 0;flex-wrap:wrap}
.vp2-stamp{flex:none;display:inline-flex;align-items:center;gap:8px;font-family:'DM Sans';font-weight:800;font-size:26px;letter-spacing:.02em;padding:8px 18px;border-radius:12px}
.vp2-sdot{width:9px;height:9px;border-radius:50%}
.vp2-stamp.skip{background:#FDECEC;color:#E23B3B}
.vp2-stamp.skip .vp2-sdot{background:#E23B3B}
.vp2-stamp.buy{background:#E7F7EE;color:#0E7C3F}
.vp2-stamp.buy .vp2-sdot{background:#22C55E}
.vp2-stamp.wait{background:#FDF3D9;color:#B26E00}
.vp2-stamp.wait .vp2-sdot{background:#E8A317}
.vp2-stamp.fair{background:#E8F0FE;color:#2563EB}
.vp2-stamp.fair .vp2-sdot{background:#3B82F6}
.vp2-reason{font-size:15px;line-height:1.5;color:#39424f;flex:1;min-width:220px}
.vp2-reason b{color:var(--ink)}
.vp2-over{color:#E23B3B;font-weight:700}
.vp2-prices{display:flex;gap:26px;flex-wrap:wrap;margin:20px 0 0;padding:16px 0;border-top:1px solid #eef0f2;border-bottom:1px solid #eef0f2}
/* Amazon IP Licence §2(i) — muted one-line stamp; "prices change" is the hyperlink to the full disclaimer. */
  .price-asof{font-size:12px;color:var(--ink3);line-height:1.45;margin:8px 0 0}
.price-asof-link{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.price-asof-link:hover{color:var(--ink2)}
.obuy-note .price-asof{margin:0;display:inline}
.hot .price-asof,.all-deals .price-asof,.wbt-head .price-asof{margin:6px 0 10px}
.vp2-pk{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;color:#8a919c;font-weight:700}
.vp2-pv{font-family:'DM Sans';font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink);margin-top:4px}
.vp2-pv.strike{color:#aab2bd;text-decoration:line-through;font-weight:600}
.vp2-pv.blue{color:#3B82F6}
.vp2-pv.green{color:#0E7C3F}
.vp2-ctarow{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.vp2-alert{background:var(--coral);color:#fff;border:none;border-radius:13px;padding:14px 22px;font-family:'DM Sans';font-weight:800;font-size:14.5px;cursor:pointer}
.vp2-alert.on{background:#0E7C3F}
/* ── Push alerts module ── */
  .pa{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:15px;padding:16px 16px 14px;box-shadow:0 10px 26px -20px rgba(16,24,40,.5)}
.pa.watching{background:linear-gradient(180deg,var(--buy-bg),#fff 60%);border-color:var(--buy-bd)}
.pa.blocked{background:linear-gradient(180deg,var(--wait-bg),#fff 62%);border-color:var(--wait-bd)}
.pa-head{display:flex;gap:11px;align-items:flex-start}
.pa-ico{font-size:22px;line-height:1.1}
.pa-title{font-weight:800;font-size:15.5px;letter-spacing:-.01em}
.pa-sub{font-size:12.8px;color:var(--ink2);margin-top:2px}
.pa-btn{width:100%;margin-top:13px;border:none;border-radius:11px;background:var(--coral);color:#fff;font-weight:800;font-size:15px;padding:13px;cursor:pointer;font-family:inherit;box-shadow:0 12px 22px -12px color-mix(in srgb,var(--coral) 55%,transparent);display:flex;align-items:center;justify-content:center;gap:8px}
.pa-btn:hover{background:var(--coral-d)}
.pa-btn:disabled{opacity:.6;cursor:default;box-shadow:none}
.eda-row{margin-top:13px}
.eda-row input{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;font-size:15px;font-family:inherit;color:var(--ink);outline:none;box-sizing:border-box}
.eda-row input:focus{border-color:var(--coral)}
.eda-row .pa-btn{margin-top:9px}
.pa.eda-done{border-color:var(--buy-bd);background:var(--buy-bg)}
.pa-foot{font-size:11px;color:var(--ink3);text-align:center;margin-top:9px}
.pa-ios{margin-top:13px;background:#f7f9fc;border:1px solid var(--line);border-radius:12px;padding:13px 13px 12px}
.pa-ios-t{font-weight:800;font-size:13.5px;display:flex;align-items:center;gap:7px}
.pa-steps{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.pa-steps li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink2)}
.pa-steps b{color:var(--ink)}
.pa-stepn{flex:none;width:20px;height:20px;border-radius:50%;background:var(--navy);color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.pa-shareico{display:inline-flex;vertical-align:-3px;width:16px;height:16px;color:var(--skip)}
.pa-why{margin-top:11px;font-size:11.5px;color:var(--ink3);border-top:1px dashed var(--line);padding-top:9px}
.pa-ws{display:flex;align-items:center;gap:9px;margin-top:12px;flex-wrap:wrap}
.pa-chip{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;padding:4px 9px;border-radius:7px;border:1px solid}
.pa-chip.wait{background:var(--wait-bg);color:var(--wait);border-color:var(--wait-bd)}
.pa-chip.buy{background:var(--buy-bg);color:var(--buy);border-color:var(--buy-bd)}
.pa-chip.skip{background:var(--skip-bg);color:var(--skip);border-color:var(--skip-bd)}
.pa-chip.fair{background:var(--fair-bg);color:var(--fair);border-color:var(--fair-bd)}
.pa-p{font-size:13px;font-weight:700}
.pa-p .was{font-weight:500;color:var(--ink3);font-size:11.5px;margin-left:5px}
.pa-manage{display:flex;gap:16px;align-items:center;margin-top:13px;border-top:1px solid var(--line);padding-top:11px;flex-wrap:wrap}
.pa-link{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--skip);cursor:pointer;padding:0}
.pa-link.off{color:var(--ink3);margin-left:auto}
.pa-msg{margin-top:10px;font-size:12.5px;border-radius:9px;padding:8px 11px;background:var(--bg);color:var(--ink2)}
.pa-msg.err{background:#fdecea;color:#9a2b23;border:1px solid #f3c2bd}
.pa.pa-ondark{background:linear-gradient(158deg,#121d31 0%,#0a1120 62%);border-color:rgba(255,255,255,.09)}
.pa.pa-ondark .pa-title{color:#fff}
.pa.pa-ondark .pa-sub{color:rgba(255,255,255,.62)}
.pa.pa-ondark .pa-foot{color:rgba(255,255,255,.42)}
.pa.pa-ondark .pa-p{color:#fff}
.pa.pa-ondark .pa-ios{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.pa.pa-ondark .pa-ios-t{color:#fff}
.pa.pa-ondark .pa-steps li{color:rgba(255,255,255,.62)}
.pa.pa-ondark .pa-steps b{color:#fff}
.pa.pa-ondark .pa-why{color:rgba(255,255,255,.42);border-top-color:rgba(255,255,255,.12)}
.pa.pa-ondark .pa-manage{border-top-color:rgba(255,255,255,.12)}
.pa.pa-ondark .pa-link.off{color:rgba(255,255,255,.5)}
.pa.pa-ondark .pa-msg{background:rgba(255,255,255,.06);color:rgba(255,255,255,.72)}
.vp2-view{display:inline-flex;align-items:center;background:#fff;border:1px solid #d8d1c0;border-radius:13px;padding:14px 22px;font-family:'DM Sans';font-weight:700;font-size:14.5px;color:var(--ink);text-decoration:none}
.vp2-view.buy{background:var(--ink);color:#fff;border-color:var(--ink)}
.vp2-card .vp2-coupon,.vp2-coupon{font-size:12.5px;color:#5d6675;background:#f6f2e7;border-radius:10px;padding:10px 13px;margin-top:14px}
.vp2-chartcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;margin-top:20px;box-shadow:var(--card-sh)}
.vp2-charth{font-family:'DM Sans';font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink);margin:5px 0 14px}
.vp2-panels{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;margin-top:20px}
.vp2-why{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.vp2-wrow{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.vp2-wrow:first-of-type{border-top:none;padding-top:14px}
.vp2-wi{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.vp2-wi.bad{background:#FDECEC;color:#E23B3B}
.vp2-wi.warn{background:#FDF3D9;color:#E8A317}
.vp2-wi.good{background:#E7F7EE;color:#0E7C3F}
.vp2-wi.info{background:#E8F0FE;color:#3B82F6}
.vp2-wt{font-size:14px;line-height:1.5;color:#5d6675}
.vp2-wt b{color:var(--ink)}
.vp2-take{background:#0E1A2B;border-radius:18px;padding:24px;color:#fff}
.vp2-peye.grn{color:#2ED37F}
.vp2-takep{font-size:15px;line-height:1.6;color:#c2cad4;margin-top:12px}
.vp2-more{margin-top:20px;display:flex;flex-direction:column;gap:14px}
.vp2-morecard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.vp2-basis{text-align:center;font-size:12px;color:var(--ink3);margin-top:22px}
  @media(max-width:820px){.vp2-card{grid-template-columns:1fr;padding:16px}.vp2-shot{min-height:190px}.vp2-panels{grid-template-columns:1fr}.vp2-forin{padding-left:18px;padding-right:18px}.vp2-wrap{padding:18px 16px 96px}.vp2-prices{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}.vp2-name{font-size:20px}.vp2-stamp{font-size:22px;padding:6px 14px}.vp2-ctarow .vp2-alert,.vp2-ctarow .vp2-view{flex:1;justify-content:center;text-align:center}}
.sf-vod{position:relative;border-radius:22px;overflow:hidden;background:radial-gradient(120% 120% at 85% 10%,#1c2c4c,#0b1220 60%);color:#fff;padding:30px 32px;box-shadow:0 34px 70px -32px rgba(11,18,32,.7);display:flex;flex-direction:column;gap:18px;cursor:pointer}
.sf-vod-glow{position:absolute;width:280px;height:280px;border-radius:50%;top:-90px;right:-70px;filter:blur(20px)}
.sf-vod-top{position:relative;display:flex;gap:9px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.sf-vpill{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.sf-vpill.g{color:#7ee3bf;background:rgba(31,157,85,.16);border:1px solid rgba(31,157,85,.35)}
.sf-vpill.note{font-family:'Inter';font-size:12px;font-weight:700;text-transform:none;letter-spacing:0}
.sf-vod-count{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:#8ea1bd;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:6px 11px;border-radius:999px}
.sf-vod-h{position:relative;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(24px,2.4vw,30px);line-height:1.08;letter-spacing:-.02em;margin:0;max-width:420px}
.sf-vod-hname{display:block;overflow-wrap:normal;word-break:normal}
/* product name on its own line — wraps only at spaces,never mid-word */
  .sf-vod-img{position:relative;border-radius:14px;overflow:hidden;background:radial-gradient(120% 120% at 50% 20%,#fbfcff,#e7ecf4);height:172px;display:flex;align-items:center;justify-content:center}
.sf-vod-img .em{font-size:80px;line-height:1;filter:drop-shadow(0 18px 26px rgba(16,24,40,.28))}
.sf-vod-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14px}
.sf-vod-name{position:absolute;left:12px;bottom:12px;font-weight:800;font-size:13.5px;color:var(--ink);background:rgba(255,255,255,.92);padding:6px 12px;border-radius:10px;box-shadow:0 8px 20px -10px rgba(0,0,0,.4);max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-vod-row{position:relative;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sf-vod-badge{display:inline-flex;align-items:center;gap:11px;border-radius:16px;padding:12px 20px;box-shadow:0 18px 40px -18px rgba(16,24,40,.5)}
.sf-vod-badge .ve{font-size:28px;line-height:1}
.sf-vod-badge .vl{font-weight:900;font-size:26px;line-height:.9;letter-spacing:-.02em;color:#fff}
.sf-vod-price{font-family:'JetBrains Mono',monospace;font-weight:900;font-size:26px}
.sf-vod-was{font-size:15px;color:#7d8aa1;text-decoration:line-through}
.sf-vod-fair{display:inline-flex;align-items:center;gap:9px;margin-top:7px;padding:7px 12px;background:rgba(31,157,85,.14);border:1px solid rgba(31,157,85,.34);border-radius:11px}
.sf-vod-fair .wm{position:relative;display:inline-block;font-weight:800;font-size:14px;line-height:1;letter-spacing:-.035em;color:#fff;padding-bottom:5px}
.sf-vod-fair .wm .fy{color:#23D17E;font-weight:600}
.sf-vod-fair .wm .sw{position:absolute;left:0;bottom:0;width:44px;height:9px}
.sf-vod-fair .lbl{font-size:12.5px;font-weight:700;color:#cdeede}
.sf-vod-fair .fp{font-family:'JetBrains Mono',monospace;font-weight:900;font-size:15px;color:#3ddc84}
.sf-vod-fair .un{font-size:11.5px;font-weight:700;color:#8fd7b4}
.sf-vod-receipt{margin-left:auto;font-weight:800;font-size:14px;color:var(--ink);background:#fff;border-radius:11px;padding:11px 18px;white-space:nowrap;text-decoration:none}
.sf-vod-basis{position:relative;display:flex;align-items:center;gap:8px;font-size:12.5px;color:#8ea1bd}
  @keyframes sfpA{0%{opacity:0}2%{opacity:1}22%{opacity:1}25%{opacity:0}100%{opacity:0}}
  @keyframes sfpB{0%,25%{opacity:0}27%{opacity:1}47%{opacity:1}50%,100%{opacity:0}}
  @keyframes sfpC{0%,50%{opacity:0}52%{opacity:1}72%{opacity:1}75%,100%{opacity:0}}
  @keyframes sfpD{0%,75%{opacity:0}77%{opacity:1}97%{opacity:1}100%{opacity:0}}
  @keyframes sfpTap{0%,13%{transform:scale(1);opacity:0}16%{opacity:.9}22%{transform:scale(1.7);opacity:0}100%{opacity:0}}
  /* reduce-motion: keep the gentle scene cross-fade (opacity only) so it still cycles for everyone;
     disable only the jarring bits — the scanline sweep + the tap-ring scale. */
  @media(prefers-reduced-motion:reduce){.sfp-tap,.sfp-line{animation:none}.sfp-line{top:48%}}
.sf-bars{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:11px;background:repeating-linear-gradient(135deg,#2a3550 0 6px,#232d46 6px 12px);display:flex;align-items:center;justify-content:center;font-size:30px}
.sf-barcode{position:absolute;left:50%;top:72%;transform:translate(-50%,-50%);width:84px;height:24px;border-radius:4px;background:#fff;padding:4px}
.sf-barcode i{display:block;width:100%;height:100%;background:repeating-linear-gradient(90deg,#0b1220 0 2px,#fff 2px 4px,#0b1220 4px 7px,#fff 7px 9px,#0b1220 9px 13px)}
.sf-bk{position:absolute;width:18px;height:18px}
.sf-scanln{position:absolute;left:12%;right:12%;height:2px;background:#ff7a1e;box-shadow:0 0 8px 1px rgba(255,122,30,.9);animation:sf-scanline 2.2s ease-in-out infinite}
  @media(prefers-reduced-motion:reduce){.sf-scanln{animation:none;top:48%}}
.sf-scan-status{position:absolute;top:12px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;color:#fff;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);padding:4px 9px;border-radius:999px}
.sf-feedhead{max-width:1280px;margin:34px auto 16px;padding:0 40px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sf-feedhead h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:28px;line-height:1;letter-spacing:-.02em;margin:0}
.sf-feedhead p{font-size:14px;color:var(--ink3);margin:8px 0 0}
.sf-feedwrap{max-width:1280px;margin:0 auto;padding:0 40px 40px}
  @media(max-width:900px){
    .sf-rail{display:flex;flex-direction:column;padding:0 22px}   /* flex column: bulletproof stacking (grid was overlapping) */
    .sf-top,.sf-tabs,.sf-feedhead,.sf-feedwrap{padding-left:22px;padding-right:22px}
    .sf-vod-h{font-size:23px}
  }
  @media(max-width:640px){
    .sf-top{padding:14px 16px 0}
    .sf-tabs{padding:0 16px;gap:20px}
    .sf-rail{padding:0 16px;gap:16px}
    .sf-sgo{padding:0 16px}
    .sf-sgo .sgt{display:none}             /* icon-only search button on phones */
    .sf-scanbtn{width:52px;animation:none;box-shadow:0 10px 26px -14px rgba(21,33,52,.85)}
    .sf-vod{padding:22px 20px;gap:15px}
    .sf-vod-top{gap:8px;margin-bottom:12px}
    .sf-vod-top .sf-vpill{white-space:nowrap}
    .sf-vod-count{margin-left:auto}
    .sf-vpill.note{display:none}            /* drop the urgency pill on phones to avoid crowding */
    .sf-vod-h{font-size:21px;line-height:1.12}
    .sf-vod-img{height:150px}
    .sf-vod-row{gap:13px}
    .sf-vod-receipt{margin-left:0}
    .sf-scan-stage{height:250px}
  }
/* ── Home premium sections (verdict explainer / scanner feature / mission quote) ── */
  .vx-sec,.sf-sec,.fq-sec{max-width:1180px;margin:0 auto;padding:26px 40px}
.vx-sec{padding-top:40px}
.vx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.vx-card{border:1px solid var(--line);border-top:4px solid;border-radius:18px;padding:22px;background:#fff;box-shadow:0 20px 44px -34px rgba(16,24,40,.5)}
.vx-card.buy{border-top-color:var(--buy)}
.vx-card.wait{border-top-color:var(--wait)}
.vx-card.skip{border-top-color:var(--skip)}
.vx-card.fair{border-top-color:var(--fair)}
.vx-tag{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:15px;padding:4px 12px;border-radius:8px;display:inline-block}
.vx-card.buy .vx-tag{background:var(--buy-bg);color:var(--buy)}
.vx-card.wait .vx-tag{background:var(--wait-bg);color:var(--wait)}
.vx-card.skip .vx-tag{background:var(--skip-bg);color:var(--skip)}
.vx-card.fair .vx-tag{background:var(--fair-bg);color:var(--fair)}
.vx-d{font-size:14px;color:var(--ink2);margin-top:13px;line-height:1.5}
.sf-in{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;background:linear-gradient(180deg,#fff,#fbfcff);border:1px solid var(--line);border-radius:24px;padding:44px;box-shadow:0 30px 60px -44px rgba(16,24,40,.5)}
.sf-h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(26px,3.2vw,34px);letter-spacing:-.02em;line-height:1.12;color:var(--ink);margin:10px 0}
.sf-p{font-size:16px;color:var(--ink2);line-height:1.55;max-width:44ch}
.sf-cta{margin-top:20px;display:inline-flex;align-items:center;gap:9px;background:linear-gradient(180deg,#1d2c46,#141f34);color:#fff;border:none;border-radius:11px;padding:13px 22px;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 12px 24px -12px rgba(20,31,52,.6)}
.sf-cta svg{width:18px;height:18px}
.sf-view{position:relative;aspect-ratio:4/3;background:radial-gradient(120% 130% at 50% -10%,#22345a,#0b1220 70%);border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 70px rgba(0,0,0,.45)}
.sf-bar{width:58%;height:78px;border-radius:4px;background:repeating-linear-gradient(90deg,#fff 0 3px,transparent 3px 7px,#fff 7px 8px,transparent 8px 14px,#fff 14px 18px,transparent 18px 22px);opacity:.92}
.sf-scan{position:absolute;left:12%;right:12%;height:2px;background:linear-gradient(90deg,transparent,var(--orange),transparent);box-shadow:0 0 14px var(--orange);animation:sfScan 2.2s ease-in-out infinite}
  @keyframes sfScan{0%,100%{top:26%}50%{top:72%}}
.sf-corner{position:absolute;width:26px;height:26px;border:3px solid rgba(255,255,255,.45)}
.sf-corner.tl{top:16px;left:16px;border-right:none;border-bottom:none;border-radius:8px 0 0 0}
.sf-corner.tr{top:16px;right:16px;border-left:none;border-bottom:none;border-radius:0 8px 0 0}
.sf-corner.bl{bottom:16px;left:16px;border-right:none;border-top:none;border-radius:0 0 0 8px}
.sf-corner.br{bottom:16px;right:16px;border-left:none;border-top:none;border-radius:0 0 8px 0}
.sf-pill{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);background:var(--buy);color:#fff;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:12px;padding:6px 14px;border-radius:999px;box-shadow:0 6px 16px rgba(31,157,85,.45)}
.fq-sec{max-width:920px;text-align:center;padding:58px 40px}
.fq-mark{font-family:'Fraunces',Georgia,serif;font-size:78px;line-height:.5;color:var(--coral);opacity:.32}
.fq-q{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(23px,3vw,31px);line-height:1.32;letter-spacing:-.01em;color:var(--ink);margin:4px 0 18px}
.fq-by{font-size:14px;color:var(--ink3);font-weight:700;letter-spacing:.02em}
  @media(prefers-reduced-motion:reduce){.sf-scan{animation:none;top:50%}}
  @media(max-width:820px){.vx-grid{grid-template-columns:1fr 1fr}.sf-in{grid-template-columns:1fr;gap:28px;padding:28px}}
/* ── Full-page Verdict (2-col: main analysis + sidebar) ── */
  .vp{max-width:1180px;margin:0 auto;padding:22px 40px 64px}
.vp-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0 18px}
.vp-bar .mshare{padding:8px 14px;font-size:13px}
.vp-back{display:inline-flex;align-items:center;min-height:44px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 16px;font-weight:700;font-size:14px;cursor:pointer;color:var(--ink2);font-family:inherit}
.vp-back:hover{border-color:#c4ccd8;color:var(--ink)}
.vp-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:26px;align-items:start}
.vp-main{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 30px 70px -46px rgba(16,24,40,.5)}
.vp-main .mhead{padding-right:0}
.vp-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:86px}
.vp-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 20px 44px -34px rgba(16,24,40,.5)}
.vp-side .pa{margin-top:0}
.vp-priceline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:16px 0 4px}
.vp-priceline .vp-now{font-family:'JetBrains Mono';font-weight:900;font-size:44px;line-height:1;color:var(--ink);letter-spacing:-.02em}
.vp-priceline .vp-was{font-family:'JetBrains Mono';font-weight:700;font-size:19px;color:var(--ink3);text-decoration:line-through}
.vp-priceline .vp-save{background:var(--buy-bg);color:var(--buy);border:1px solid var(--buy-bd);font-weight:800;font-size:12.5px;padding:5px 11px;border-radius:999px}
.vp-priceline .vp-store{font-weight:700;font-size:12px;color:var(--ink3)}
.vp-actions{display:grid;grid-template-columns:1fr;gap:12px}
.vp-actions .vp-actbtn,.vp-actions .mshare{width:100%;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 10px;font-weight:800;font-size:14px;cursor:pointer;color:var(--ink2);font-family:inherit}
.vp-actions .vp-actbtn:hover,.vp-actions .mshare:hover{border-color:#c4ccd8;color:var(--ink)}
.vp-actions .vp-actbtn.on{background:var(--buy-bg);border-color:var(--buy-bd);color:var(--buy)}
  @media(max-width:900px){.vp{padding:16px 22px 44px}.vp-grid{grid-template-columns:1fr;gap:18px}.vp-side{position:static}.vp-main{padding:22px}}
/* ── Browse / Deals page ── */
  .bp{padding-top:26px;padding-bottom:56px}
.bp-head{max-width:760px;margin:6px 0 24px}
.bp-head h1{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(30px,4vw,44px);letter-spacing:-.02em;line-height:1.06;color:var(--ink);margin-top:12px}
.bp-head p{font-size:17px;color:var(--ink2);margin-top:12px;line-height:1.5}
.nh-stage{position:relative;display:flex;align-items:center;justify-content:center}
.nh-glow{position:absolute;width:66%;height:66%;border-radius:50%;background:radial-gradient(circle,rgba(255,90,44,.20),transparent 66%);filter:blur(34px)}
.nh-cardwrap{position:relative;width:100%}
.nh-spark{position:absolute;top:100%;left:-22px;margin-top:-12px;width:206px;background:#fff;border-radius:16px;padding:13px 15px;border:1px solid #eef1f6;box-shadow:0 22px 44px -18px rgba(16,24,40,.5);transform:rotate(-2deg)}
.nh-spark .lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.nh-spark .val{font-size:13px;font-weight:700;margin-top:1px;color:var(--ink)}
.nh-spark svg{display:block;margin-top:6px}

  @media (max-width:900px){
    .nh-hero{grid-template-columns:1fr;gap:30px;padding:32px 22px 40px}
    .nh-spark{display:none}
    .nh-glow{opacity:.55}
    .nh-card{max-width:100%;min-width:0;transform:none}
    .nh-search{max-width:none}
    .nh-reveal{flex-wrap:wrap;gap:12px 18px}
    .nh-reveal .nh-rline{display:none}
    .nh-steps{grid-template-columns:1fr}
    .nh-moat-in{grid-template-columns:1fr;gap:32px;padding:48px 22px}
    .nh-nlink{display:none}
    .nh-scan{display:none}
    .nh-burger{display:inline-flex}
    .nh-nav-in,.nh-foot-in,.nh-fine{padding-left:22px;padding-right:22px}
    .nh-wrap{padding-left:22px;padding-right:22px}
  }
  @media (max-width:560px){
    .nh-nav .nh-navcta{display:none}
    .nh-hero h1{font-size:36px}
    .nh-cta{margin:44px 16px;padding:38px 22px}
    /* Amazon/Best Buy mobile: no link-farm footer under the shop. Keep one quiet legal line. */
    .nh-foot{padding:20px 0 18px;margin-top:0}
    .nh-foot-in{flex-direction:column;gap:0}
    .nh-foot-in > div:first-child .nh-foot-tag,
    .nh-foot-ext,
    .nh-cols{display:none !important}
    .nh-foot-brand{transform:scale(.85);transform-origin:left center}
    .nh-fine{margin-top:12px;padding-top:12px;font-size:11px}
  }
/* ── Mobile app-style bottom tab bar (phones only) ─────────────────────
     Turns the mobile web view into an app-like shell: fixed bottom tabs +
     raised Scan button,brand-only top title bar,"More" as a bottom sheet.
     Combined with the standalone (Add-to-Home-Screen) meta already in <head>,this reads as a native app before the store builds exist. */
  .mtab{display:none}
  @media (max-width:640px){
    /* Calm bottom nav (P1): mint active, quiet bar, mint Scan — no coral shout. */
    .mtab{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;
      position:fixed;left:0;right:0;bottom:0;z-index:35;
      height:calc(54px + env(safe-area-inset-bottom));
      padding:0 6px env(safe-area-inset-bottom);
      background:#fff;border-top:1px solid rgba(14,26,43,.08);
      box-shadow:0 -1px 0 rgba(14,26,43,.04)}
    .mtab-i{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
      height:54px;background:none;border:none;cursor:pointer;padding:0;color:#8a919c;
      font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.01em;-webkit-tap-highlight-color:transparent}
    .mtab-i svg{width:22px;height:22px;stroke-width:1.9}
    .mtab-i.on{color:#0E7C5A}
    .mtab-i:active{transform:scale(.93)}
    .mtab-ic{position:relative;display:flex}
    .mtab-n{position:absolute;top:-6px;right:-8px;min-width:14px;height:14px;padding:0 3px;border-radius:8px;
      background:#12b76a;color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
    .mtab-fab{align-self:end;display:flex;align-items:center;justify-content:center;
      width:52px;height:52px;margin:0 auto 10px;border-radius:50%;border:3px solid #fff;cursor:pointer;
      background:linear-gradient(180deg,#3AE08F,#12b76a);color:#053a2c;
      box-shadow:0 8px 18px -8px rgba(18,158,82,.5);padding:0}
    .mtab-fab svg{width:24px;height:24px;stroke-width:2.1;stroke:#053a2c}
    .mtab-fab:active{transform:scale(.93)}
    /* content clears the fixed bar */
    body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
    /* top bar becomes a clean app title bar — "More" replaces the burger */
    .nh-burger{display:none}
    .nh-nav-in{min-height:54px;height:auto;justify-content:flex-start;flex-wrap:wrap;padding:10px 16px;gap:10px}
    .nh-nav.has-search .nh-nav-search{order:3;flex:1 1 100%;max-width:none}
    /* the "More" menu opens as a bottom sheet above the tab bar */
    .nh-menu{top:auto;bottom:calc(66px + env(safe-area-inset-bottom));left:12px;right:12px;max-width:none;margin:0;
      border-radius:18px;box-shadow:0 -18px 44px -20px rgba(16,24,40,.42);animation:mSheetUp .2s ease}
    .nh-menu-bd{background:rgba(16,18,24,.3)}
  }
  @keyframes mSheetUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.nh-menu{animation:none}.mtab-i:active,.mtab-fab:active{transform:none}}
/* ── Storefront: constant sticky search + tab header across all home sections ──── */
  /* Positioning hero — the value prop above the (sticky) search cluster; scrolls away on scroll. */
  .sf-hero{position:relative;z-index:0;max-width:820px;margin:10px auto 4px;padding:18px 20px 8px;text-align:center}
.sf-hero::before{content:"";position:absolute;z-index:-1;left:50%;top:-14px;transform:translateX(-50%);width:100vw;height:calc(100% + 44px);
    background:radial-gradient(44% 74% at 20% 28%,rgba(17,185,130,.22),transparent 60%),radial-gradient(42% 66% at 82% 20%,rgba(59,130,246,.17),transparent 60%),radial-gradient(40% 60% at 62% 92%,rgba(234,179,8,.11),transparent 60%);
    filter:blur(22px);pointer-events:none;animation:sfAur 20s ease-in-out infinite}
  @keyframes sfAur{0%,100%{transform:translateX(-50%)}50%{transform:translateX(-50%) translateY(-14px) scale(1.05)}}
  @media(prefers-reduced-motion:reduce){.sf-hero::before{animation:none}}
.sf-hero-h{font-family:'Inter',system-ui,sans-serif;font-weight:800;letter-spacing:-.035em;line-height:1.03;font-size:clamp(29px,5vw,52px);color:var(--ink);margin:0 auto;max-width:15ch;text-wrap:balance}
.sf-hero-h .sf-skipword{color:var(--skip)}
.sf-hero-sub{font-size:clamp(9px,2.7vw,13px);white-space:nowrap;line-height:1.55;color:var(--ink2);margin:13px auto 0;font-weight:500;letter-spacing:-.015em}
.sf-hero-sub b{color:var(--ink);font-weight:700}
.sf-hero-sub .vb{color:var(--buy);font-weight:800}
.sf-hero-sub .vw{color:var(--wait);font-weight:800}
.sf-hero-sub .vs{color:var(--skip);font-weight:800}
.sf-hero-sub .vf{color:var(--fair);font-weight:800}
.sf-extrow{margin-top:13px;text-align:center}
/* Template A — dark brand hero band (brand-kit dark/light color separation): one bold statement,white search popping on dark navy,verdict chips. The deals feed is demoted to the light section below. */
  .sf-heroA{position:relative;z-index:0;margin:0;padding:6px 20px 10px;background:linear-gradient(160deg,#132133,#0e1a2b);color:#fff}
/* Ambient green glow sits BELOW the header so the logo/top stays clean (no disturbance around the logo). */
  /* Ambient glow across the WHOLE hero band,top to bottom (not just behind the cards): a green pool
     high on the LEFT (behind the headline),a cool blue pool high on the RIGHT,a soft green centre,and a green bottom wash under the cards. Kept subtle (alphas .10–.20) so the white text stays crisp. */
  .sf-heroA::before{content:"";position:absolute;inset:0;pointer-events:none;background:
    radial-gradient(760px 520px at 24% 16%,rgba(36,209,126,.20),transparent 62%),
    radial-gradient(720px 520px at 82% 20%,rgba(70,120,225,.17),transparent 64%),
    radial-gradient(560px 380px at 50% 52%,rgba(36,209,126,.10),transparent 60%),
    radial-gradient(1000px 520px at 50% 112%,rgba(36,209,126,.12),transparent 60%)}
.sf-heroA-in{position:relative;max-width:1060px;margin:0 auto;text-align:center}
/* approved hero header — plain wordmark (left) + burger (right),on the dark band */
  .sf-herohdr{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0 20px;text-align:left}
.sf-hh-wm{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;font-weight:800;font-size:clamp(23px,2.5vw,34px);letter-spacing:-.05em;color:#fff;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap}
.sf-hh-wm span{color:#23D17E}
.sf-hh-wm .dc{color:rgba(238,242,248,.55)}
.sf-hh-burger{display:flex;flex-direction:column;gap:5px;width:28px;padding:6px 0;background:none;border:none;cursor:pointer;flex:none}
.sf-hh-burger span{height:2.5px;width:100%;background:#fff;border-radius:2px;display:block}
/* redesign light top bar (match artifact 742aa1ff): logo · search · you */
  .rd-topwrap{background:#fff;border-bottom:1px solid var(--line)}
.rd-topbar{max-width:none;margin:0;padding:var(--chrome-pad-y) 26px;display:flex;align-items:center;gap:18px}
.rd-brand{font-weight:900;font-size:var(--wm-md);letter-spacing:-.03em;color:#0E1A2B;text-decoration:none;white-space:nowrap;flex:0 0 auto;cursor:pointer}
/* Wordmark colors live on .dk-wm .w/.f/.d — do not blanket-color every span (breaks .dk-tag). */
  .rd-brand .dc{color:#94A3B8}
/* desktop wordmark lockup (icon-512 + worthit/foryou/.com) — matches mobile */
  .rd-brand,.sf-stick-wm{display:inline-flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap;flex:0 0 auto;cursor:pointer}
.sf-stick-wm{gap:8px}
.dk-mark{border-radius:9px;display:block;flex:0 0 auto}
.dk-wm{display:inline-flex;gap:0;align-items:baseline;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1}
.rd-brand .dk-wm{font-size:var(--wm-lg)}
.sf-stick-wm .dk-wm{font-size:var(--wm-sm)}
.dk-wm .w{color:var(--navy)}
.dk-wm .f{color:var(--navy)}
/* one colour with .w — see the ONE-COLOUR WORDMARK note */
  .dk-wm .d{color:#94A3B8}
/* desktop dark ink top bar — teal wordmark mid (wi-with-scan mock; purple retired) */
  .rd-topwrap{background:linear-gradient(135deg,#071018 0%,#0E1A2B 55%,#0B1524 100%) !important;border-bottom:none}
/* One field at the top of the page: while the Snipcart hero is mounted the nav takes its ground,
   so the chrome and the banner read as a single dark field rather than two adjacent darks.
   Lives HERE, in the site sheet, next to the rule it overrides — it was written 3,800 lines lower
   inside the app's stylesheet, where check:wi flags any site class as a collision and is right to:
   website chrome defined in the app's region is exactly the drift that guard exists to catch. */
  .rd-home-chrome-hero{background:#2B2631}
  body:has(.hcwrap) .rd-topwrap{background:#2B2631 !important;border-bottom:none}
/* On the hero's ground the accent carries "foryou" — the same yellow as the submit and the
   store buttons, so the one accent means one thing everywhere: this is the part that's about you.
   NOTE: the off-home copy of these two rules lives LATE in this sheet (search .nh-topwrap) —
   `.rd-topwrap{background:rgb(var(--rd-chrome))!important}` is declared after this point and
   would otherwise win on source order. */
  body:has(.hcwrap) .rd-topwrap .rd-brand .dk-wm .f{color:#FFCC00 !important}
.rd-brand .dk-wm .w{color:#EEF2F8 !important}
.rd-brand .dk-wm .f{color:#EEF2F8 !important}
.rd-brand .dk-wm .d{color:rgba(238,242,248,.55) !important}
/* Lockup: capital Wi? + wordmark only (sticky-condensed — no tagline under the name) */
  .rd-brand,.sf-stick-wm{align-items:center}
.dk-lockup{display:inline-flex;flex-direction:row;align-items:center;gap:0;line-height:1}
.dk-tag{display:none}
/* retired from chrome; keep class harmless if markup lingers */
  /* ── brand monogram: capital Wi? (ink tile · white Wi · teal ?) — matches iOS ── */
  .amark{flex:none;display:block;border-radius:10px}
.rd-brand .amark{width:36px;height:36px;margin:-2px 0}
.sf-stick-wm .amark{width:30px;height:30px}
.amark.wi-mark text{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif}
.rd-you{color:#EEF2F8}
.rd-you svg{stroke:#EEF2F8}
.rd-topbar .sf-sgo,.sf-stickbar .sf-sgo{background:#14B8A6 !important;color:var(--teal-ink) !important}
.rd-topbar .sf-sgo svg,.sf-stickbar .sf-sgo svg{stroke:#0E1A2B !important}
.rd-topbar .sf-scanbtn{border:1.5px solid rgba(45,212,191,.65)}
/* desktop "How it works" tiles */
  .dkhiw{max-width:1100px;margin:14px auto 4px;padding:0 40px}
.dkhiw-h{text-align:center;font-weight:800;font-size:22px;color:#0E1A2B;margin:0 0 16px}
.dkhiw .mtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dkhiw .mtile{position:relative;border-radius:20px;padding:18px 16px 18px;text-align:center;min-height:216px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;opacity:0;animation:mtileIn .5s ease forwards}
.dkhiw .mt1{background:linear-gradient(160deg,#D9E8FE,#B9D4FC);animation-delay:0ms}
.dkhiw .mt2{background:linear-gradient(160deg,#CFF3E1,#A7E8C6);animation-delay:90ms}
.dkhiw .mt3{background:linear-gradient(160deg,#FFDFB8,#FFC98A);animation-delay:180ms}
.dkhiw .mt4{background:linear-gradient(160deg,#E9D6FB,#D6AEF5);animation-delay:270ms}
.dkhiw .mt-art{height:52px;width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.dkhiw .mt-s{font-size:12px;font-weight:600;color:#4b5563;margin-top:4px;line-height:1.35}
.dkhiw .mt-sbar{background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(20,31,52,.12);height:34px;width:88%;display:flex;align-items:center;gap:7px;padding:0 10px}
.dkhiw .mt-mag{width:15px;height:15px;fill:none;stroke:#2F6DF6;stroke-width:2.4;flex:0 0 auto}
.dkhiw .mt-ln{flex:1;height:5px;border-radius:3px;background:#d3d9e2}
.dkhiw .mt-caret{width:2px;height:15px;background:#2F6DF6;flex:0 0 auto;animation:mCaret 1s steps(1) infinite}
.dkhiw .mt-badges{position:relative}
.dkhiw .mt-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-6deg);display:flex;flex-direction:column;align-items:flex-start;gap:2px;color:#fff;padding:8px 15px;border-radius:12px;box-shadow:0 6px 14px rgba(20,31,52,.3);white-space:nowrap;opacity:0;animation:mBadge 4.8s ease-in-out infinite}
.dkhiw .mt-badge small{font-size:8px;font-weight:800;letter-spacing:.12em;opacity:.85}
.dkhiw .mt-badge b{font-size:16px;font-weight:800;line-height:1}
.dkhiw .b-buy{background:#0E9F6E;animation-delay:0s}
.dkhiw .b-wait{background:#FF5A2C;animation-delay:-1.2s}
.dkhiw .b-skip{background:#D93A2B;animation-delay:-2.4s}
.dkhiw .b-fair{background:#6B716D;animation-delay:-3.6s}
.dkhiw .mt-float{width:44px;height:44px;fill:none;stroke:#B4501F;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;animation:mFloat 3.2s ease-in-out infinite}
.dkhiw .mt-float circle{fill:#B4501F;stroke:none}
.dkhiw .mt-barcode{position:relative;width:78%;height:44px}
.dkhiw .mt-bars{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#7A3FBE 0 3px,transparent 3px 7px)}
.dkhiw .mt-scan{position:absolute;left:-2px;right:-2px;height:3px;border-radius:2px;background:#7A3FBE;box-shadow:0 0 9px 2px rgba(122,63,190,.75);animation:mScan 1.6s ease-in-out infinite}
  @media(max-width:640px){.dkhiw{display:none}}
  @media(prefers-reduced-motion:reduce){.dkhiw .mtile{opacity:1;animation:none;transform:none}.dkhiw .mt-caret,.dkhiw .mt-badge,.dkhiw .mt-float,.dkhiw .mt-scan{animation:none}.dkhiw .b-buy{opacity:1}.dkhiw .b-wait,.dkhiw .b-skip,.dkhiw .b-fair{opacity:0}.dkhiw .mt-float{transform:none}}
/* ===== stacked home deal sections (hdeck2) ===== */
  .hdeck2{margin:2px 0 26px}
.hdsec+.hdsec{margin-top:30px}
.hd-empty{background:#fff;border:1px solid var(--line);border-radius:var(--card-r);box-shadow:var(--card-sh);padding:22px 20px;text-align:center;max-width:520px;margin:0 auto}
.hd-empty p{margin:0;font-size:14px;line-height:1.45;color:var(--ink2)}
.hd-empty-go{margin-top:14px;display:inline-flex;align-items:center;gap:6px;background:#0E1A2B;color:#fff;border:none;border-radius:11px;padding:11px 16px;font-weight:800;font-size:13.5px;cursor:pointer}
.hd-empty-go:hover{background:#15243a}
.hdrib{display:flex;align-items:center;color:#fff;font-size:14px;font-weight:800;letter-spacing:.01em;padding:13px 20px;border-radius:14px;margin-bottom:16px}
/* ── Sale-event banner — TICKET STUB (owner-picked "Direction A",2026-08-01) ──
     A torn admission ticket: the stub carries the verified-BUY count like a seat number. The form is the
     argument — you got in because the price checked out. Pure CSS (no images/webfonts); a new event needs
     only a colour,never new artwork. The notch circles must match the PAGE background (--bg) to read as
     punched-out holes. */
  /* ── Sale-event section — HERO + RAIL (owner-picked "Design 2",2026-08-01) ──
     One panel: a motif-carrying header bar,the deepest verified drop as a hero,the rest as a scannable
     rail. Replaces "banner strip floating above a generic grid" — the old layout read as two unrelated
     things. Works at 4 products or 40 (the rail scrolls),which matters because event supply swings hard.
     Motion is a single page-load sequence + hover micro-interactions; all of it is disabled under
     prefers-reduced-motion (see the block at the end). */
  .sev-hr{position:relative;border-radius:14px;overflow:hidden;margin-bottom:16px;background:var(--card);border:1px solid rgba(18,24,43,.09);box-shadow:0 1px 2px rgba(18,24,43,.06),0 8px 24px rgba(18,24,43,.08)}
/* ── Event TIMELINE header (owner-picked,2026-08-01) ──
     Replaces the plain header bar. Forward-only: the live event sits on a raised plinth carrying its date
     range and count chips,upcoming events are outlined pills with a days-away counter. An ENDED event is
     never shown — it's the one thing on the rail a shopper can't act on. No green anywhere: green means BUY,so a green pill would read as a verdict. A `surge` (detected,not on the calendar) turns the live node
     orange and swaps the chips for its evidence. */
  /* Timeline: ink + amber (brand kit). Purple/blue retired 2026-08-02 — never mint (mint = BUY). */
  .sev-tl{position:relative;padding:20px 20px 16px;border-bottom:1px solid rgba(18,24,43,.08);overflow-x:auto;
  background:radial-gradient(60% 130% at 92% -20%,rgba(240,163,35,.38),transparent 60%),
             linear-gradient(103deg,#071018 0%,#0E1A2B 48%,#1a2836 100%)}
.sev-tl::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(90deg,transparent 0 26px,rgba(240,163,35,.45) 26px 27px,transparent 27px),
             repeating-linear-gradient(180deg,transparent 0 25px,rgba(255,255,255,.10) 25px 26px)}
.sev-tl>*{position:relative;z-index:1}
/* Desktop: full upcoming-nodes strip. Phones: live plinth only (ticket already prints dates) —
     no 640px min-width horizontal scroll husk. */
  .sev-tlin{position:relative}
.sev-tlline{position:absolute;left:0;right:0;top:74px;height:2px;background:rgba(255,255,255,.22);border-radius:2px}
.sev-tlglow{position:absolute;top:73px;left:0;height:4px;width:110px;border-radius:3px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(240,163,35,.55),transparent);animation:sevTravel 7s linear infinite}
  @keyframes sevTravel{0%{transform:translateX(-110px)}100%{transform:translateX(680px)}}
.sev-tlrow{position:relative;display:flex;justify-content:space-between;align-items:flex-start}
.sev-tn{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center;
    animation:sevRise .5s cubic-bezier(.2,.7,.3,1) both}
  @keyframes sevRise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.sev-tn.now{flex:1.5}
.sev-plinth{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 12px 12px;
    border-radius:12px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);
    box-shadow:0 6px 22px -8px rgba(0,0,0,.45);backdrop-filter:blur(8px)}
.sev-tn.surge .sev-plinth{background:rgba(226,99,44,.08);border-color:rgba(226,99,44,.3);box-shadow:0 3px 14px rgba(226,99,44,.16)}
.sev-pill b{display:inline-block;font:700 11px/1 inherit;padding:7px 13px;border-radius:20px;color:#fff;white-space:nowrap}
.sev-tn.now .sev-pill b{background:#fff;color:#0E1A2B;box-shadow:0 5px 16px -4px rgba(0,0,0,.4)}
.sev-tn.surge .sev-pill b{background:#E2632C;box-shadow:0 3px 10px rgba(226,99,44,.36)}
.sev-dt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.72)}
.sev-chips{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.sev-chip{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;font-weight:700;letter-spacing:.05em;
    padding:4px 7px;border-radius:5px;background:rgba(255,255,255,.2);color:#fff;white-space:nowrap}
.sev-tn.surge .sev-chip{background:rgba(226,99,44,.14);color:#B44A1C}
.sev-tn.up{padding-top:14px}
.sev-tn.up .sev-pill b{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.3px rgba(255,255,255,.45);padding:6px 11px;font-size:10.5px;
    transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.sev-tn.up:hover .sev-pill b{transform:translateY(-2px)}
.sev-sp{height:9px}
.sev-dot{width:11px;height:11px;border-radius:50%;position:relative;z-index:2;border:2px solid rgba(255,255,255,.55);margin-top:9px;background:rgba(255,255,255,.85)}
.sev-tn.now .sev-dot{width:16px;height:16px;margin-top:7px;background:#F0A323;box-shadow:0 0 0 5px rgba(240,163,35,.22);animation:sevPl 2.6s ease-in-out infinite}
.sev-tn.surge .sev-dot{background:#E2632C;box-shadow:0 0 0 5px rgba(226,99,44,.2)}
  @keyframes sevPl{0%,100%{box-shadow:0 0 0 5px rgba(240,163,35,.22)}50%{box-shadow:0 0 0 11px rgba(240,163,35,.06)}}
.sev-away{margin-top:9px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;font-weight:700;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
  /* one hue per event — stable by slug, never green (that's the BUY verdict colour) */
  @media(max-width:760px){
    .sev-tl{padding:15px 13px 13px;overflow-x:hidden}
    .sev-tn.up,.sev-tlline,.sev-tlglow,.sev-tn.now .sev-dot{display:none}
    .sev-tn.now{flex:1}
    .sev-plinth{padding:12px 14px 14px;border-radius:14px}
  }
  @media(prefers-reduced-motion:reduce){
    .sev-tlglow,.sev-tn,.sev-tn.now .sev-dot{animation:none}
    .sev-tn.up .sev-pill b{transition:none}
    .sev-tn.up:hover .sev-pill b{transform:none}
  }
/* the header bar carries the SEASONAL motif; the body stays clean so products read clearly.
     A new event needs no artwork — it inherits the warm-paper default below. */
  .sev-hr.ev-black-friday .sev-ey,.sev-hr.ev-cyber-monday .sev-ey,.sev-hr.ev-holiday-gifting .sev-ey{color:#F0A323}
.sev-hrb{display:grid;grid-template-columns:1.35fr 1fr}
.sev-hero{padding:18px;display:flex;flex-direction:column;gap:10px;border-right:1px solid rgba(18,24,43,.08);cursor:pointer;min-width:0}
/* Image containment copies the PROVEN `.card-img` pattern already used elsewhere in this file:
     fixed-height flex box + `width/height:100%` + object-fit on the img. The first attempt used a grid with
     `max-width/max-height:100%`,and the percentage never resolved against the grid area — the image blew
     out of its box and overflow:hidden didn't save it. Don't reinvent this; copy .card-img. */
  .sev-hero .sev-him{position:relative;height:168px;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #EEF1F5}
  /* rotating spotlight: the hero cycles through the verified BUYs. `key` on the node remounts it, which
     re-triggers this animation — cheaper and more reliable than transitioning between two states. */
  @keyframes sevSwap{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.sev-swap{animation:sevSwap .45s cubic-bezier(.2,.7,.3,1) both}
.sev-dots{display:flex;gap:5px;justify-content:center;padding:2px 0 0}
.sev-dots i{width:5px;height:5px;border-radius:50%;background:rgba(18,24,43,.18);display:block;transition:background .25s ease,transform .25s ease;cursor:pointer}
.sev-dots i.on{background:#F0A323;transform:scale(1.35)}
.sev-row.on{background:#F3F7F4;box-shadow:inset 0 0 0 1.5px rgba(15,157,87,.28)}
  @media(prefers-reduced-motion:reduce){ .sev-swap{animation:none} .sev-dots i{transition:none} }
.sev-hero .sev-him img{width:100%;height:100%;object-fit:contain;padding:10px;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.sev-hero:hover .sev-him img{transform:scale(1.05)}
.sev-htag{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#A8680A}
.sev-hnm{font-size:15px;font-weight:700;line-height:1.32;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sev-hpz{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.sev-hpz b{font-size:25px;font-weight:800;letter-spacing:-.02em}
.sev-hpz .usual{font-size:12.5px;color:#6B7085;font-weight:600}
.sev-hpz .usual s{font-size:13px;color:#8a90a0;font-weight:500}
.sev-hpz em{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:700;color:#0E7A4A;background:rgba(22,160,99,.12);padding:4px 8px;border-radius:5px}
/* Transparent rubber-stamp (not a solid fill) — product photo stays visible underneath. */
  .sev-badge{align-self:flex-start;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;font-weight:700;letter-spacing:.08em;background:transparent;color:#0E7A4A;padding:5px 9px;border-radius:5px;border:1.5px solid #16A063;box-shadow:none}
.sev-rail{padding:11px;display:flex;flex-direction:column;gap:7px;max-height:340px;overflow-y:auto;overscroll-behavior:contain}
.sev-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;background:#F5F7FB;cursor:pointer;transition:background .18s ease,transform .18s cubic-bezier(.2,.7,.3,1)}
.sev-row:hover{background:#ECF0F7;transform:translateX(3px)}
.sev-rim{width:46px;height:46px;flex:0 0 46px;border-radius:7px;background:#fff;display:grid;place-items:center;overflow:hidden}
.sev-rim img{width:100%;height:100%;object-fit:contain;padding:4px}
/* same containment pattern as .sev-him */
  .sev-rtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sev-rnm{font-size:11.5px;font-weight:600;line-height:1.3;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sev-rpz{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.sev-rpz b{font-size:13px;font-weight:800}
.sev-rpz em{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:700;color:#0E7A4A}
.sev-upb{padding:20px;font-size:13px;line-height:1.5;color:#4A5068}
/* page-load sequence: panel rises,hero fades up,rail rows stagger in */
  .sev-hr{animation:sevIn .5s cubic-bezier(.2,.7,.3,1) both}
.sev-hero{animation:sevIn .5s cubic-bezier(.2,.7,.3,1) .08s both}
.sev-row{animation:sevRow .42s cubic-bezier(.2,.7,.3,1) both}
  @keyframes sevIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes sevRow{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
  @media(max-width:760px){
    .sev-hrb{grid-template-columns:1fr}
    .sev-hero{border-right:0;border-bottom:1px solid rgba(18,24,43,.08);padding:15px}
    .sev-hero .sev-him{height:132px}
    .sev-hpz b{font-size:21px}
    .sev-rail{max-height:none;padding:10px}
  }
  @media(prefers-reduced-motion:reduce){
    .sev-hr,.sev-hero,.sev-row{animation:none !important}
    .sev-row,.sev-hero .sev-him img{transition:none}
    .sev-row:hover{transform:none}
    .sev-hero:hover .sev-him img{transform:none}
  }
/* shared title type for the event header (used by the hero+rail header bar) */
  .sev-ey{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#A8680A}
.sev-h{margin:0;font-size:22px;font-weight:800;letter-spacing:-.024em;line-height:1.06;color:inherit}
  @media(max-width:640px){ .sev-h{font-size:18px} }
.hdrib .hdrib-t{flex:1;min-width:0}
.hdrib .hdrib-sub{font-weight:600;opacity:.9}
.hdrib .hdrib-a{margin-left:auto;flex:none;white-space:nowrap;font-size:12.5px;font-weight:800;color:#fff;opacity:.96;cursor:pointer}
.rib-v{background:linear-gradient(90deg,#12B26A,#0FA890)}
.rib-c{background:linear-gradient(90deg,#E0402E,#FF7A1A)}
.rib-b{background:linear-gradient(90deg,#0E1A2B,#2B4B8F)}
/* The stray `}` that used to end this line (after the comment) made the CSS parser discard the
     NEXT rule entirely: .rib-deep never existed,so the Deepest-discounts ribbon had no background
     and its white text sat on white at 1:1 — an invisible heading. Verified by listing the parsed
     rules in the browser: .rib-v/.rib-c/.rib-b/.rib-drops were all there,.rib-deep was not. */
  .rib-drops{background:linear-gradient(90deg,#0E1A2B,#2B4B8F)}
/* ink→blue — purple stop retired */
  .rib-deep{background:linear-gradient(90deg,#B4245C,#E0402E)}
.vbsec{margin-top:2px}
.p-all .vbsec[data-sec="sec-verified-home"]{padding-top:4px;margin-bottom:4px}
.p-all .all-deals{margin-top:2px}
.p-coupons .clip-save.all-deals,.rd-herowrap.p-coupons .clip-save{margin-top:2px}
.rd-herowrap.p-coupons{background:transparent}
.hdeck2 .psq2 .ds-off{display:none}
/* section-nav (Amazon-style shelf jumps) — scrollable on small screens */
  .sf-tabs{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;-webkit-overflow-scrolling:touch}
[data-sec]{scroll-margin-top:96px}
  @media(max-width:640px){[data-sec]{scroll-margin-top:120px}}
/* ===== BrandMoment kit — wi-with-scan mock (owner 2026-08-11) =====
     One composition: headline + BUY/WAIT/SKIP pills + peer Paste/Scan CTAs.
     COLOUR RULE: mint/amber/red are the VERDICT system and appear ONLY on .bm-pill chips and
     verified BUY stamps. Brand actions (Paste / Scan / Check) use TEAL (#14B8A6) — never mint —
     so ambient chrome cannot be mistaken for a BUY verdict. */
  .bm{--bm-ink:#071018;--bm-ink2:#0E1A2B;--bm-mint:#23D17E;--bm-accent:#14B8A6;--bm-accent-hi:#5EEAD4;--bm-accent-rgb:20,184,166;--bm-amber:#F0A323;--bm-skip:#E23B3B;--bm-paper:#F7F4EE;--bm-fog:rgba(238,242,248,.78);
    position:relative;overflow:hidden;margin:0;padding:40px 44px 48px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:36px 40px;align-items:center;
    background:
      radial-gradient(58% 90% at 88% -6%,rgba(var(--bm-accent-rgb),.22),transparent 62%),
      radial-gradient(48% 70% at 6% 104%,rgba(20,184,166,.10),transparent 60%),
      linear-gradient(155deg,var(--bm-ink) 0%,var(--bm-ink2) 55%,#0B1524 100%);
    min-height:0;cursor:pointer}
  @media(min-width:861px){
    /* Hero is SIZED TO ITS CONTENT — dual Paste/Scan CTAs are denser than the old stamp demo.
       Cap stays low so Verified cards peek above the fold (affiliation first-viewport). */
    .bm{min-height:0;padding:28px 44px 32px}
  }
.bm::before{content:'';position:absolute;inset:-20% -10%;pointer-events:none;opacity:.55;
    background:conic-gradient(from 210deg at 70% 30%,transparent 0deg,rgba(var(--bm-accent-rgb),.08) 40deg,transparent 90deg,rgba(240,163,35,.05) 160deg,transparent 220deg)}
.bm::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
.bm>*{position:relative;z-index:1}
/* was max-width:560px — a cap from when the copy column shared the hero with a wider panel.
     It sat INSIDE a 720px .bm-hl,so the headline wrapped to three lines where the mock gets two
     at the same 26px. The column is the measure now; .bm-hl already bounds it. */
  .bm-copy{max-width:none}
/* No second logo in BrandMoment — header already carries amark + wordmark (was stacking two). */
  /* SF,not Fraunces (owner,15 Aug). The rule that actually paints this headline lives in
     vendor/mock-hero.css as `.bm-hl .bm-h` — the mock is the spec — but this copy exists too and
     the two must not disagree,which is the mistake the doors hairline taught. Change both. */
  .bm-h{font-family:var(--sf-display);font-weight:700;font-size:var(--fs-display);line-height:.98;letter-spacing:-.028em;color:#fff;margin:0 0 var(--sp-4);text-wrap:balance}
.bm-h em{font-style:italic;font-weight:700;color:var(--bm-accent-hi);text-shadow:0 0 40px rgba(var(--bm-accent-rgb),.35)}
.bm-s{font-size:17.5px;line-height:1.5;color:var(--bm-fog);max-width:40ch;margin:0 0 var(--sp-5);font-weight:450}
.bm-s b{color:#fff;font-weight:700}
.bm-pills{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px}
.bm-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 11px;border-radius:12px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;font-weight:700;letter-spacing:.07em;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:rgba(255,255,255,.92);backdrop-filter:blur(6px)}
.bm-pill svg{width:15px;height:15px;flex:none;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.bm-pill.buy{border-color:rgba(35,209,126,.35);background:rgba(35,209,126,.1);color:#B8F5D4}
.bm-pill.buy svg{stroke:#23D17E}
.bm-pill.wait{border-color:rgba(240,163,35,.35);background:rgba(240,163,35,.1);color:#FFE0A8}
.bm-pill.wait svg{stroke:#F0A323}
.bm-pill.skip{border-color:rgba(226,59,59,.4);background:rgba(226,59,59,.1);color:#FFC4C0}
.bm-pill.skip svg{stroke:#E23B3B}
.bm-acts{display:none}
/* retired — peer Paste/Scan cards live in .bm-pair */
  .bm-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:520px;justify-self:end;position:relative}
.bm-cta{appearance:none;border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:15.5px;padding:18px 18px;border-radius:16px;background:#14B8A6;color:#042F2E;box-shadow:0 16px 36px -14px rgba(var(--bm-accent-rgb),.55);transition:transform .15s,box-shadow .15s,background .15s;display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;min-height:108px}
.bm-cta .bm-cta-kicker{display:inline-flex;align-items:center;gap:10px;font-size:16.5px;letter-spacing:-.02em}
.bm-cta .bm-cta-sub{font-size:12.5px;font-weight:600;color:rgba(4,47,46,.72);line-height:1.35;max-width:22ch}
.bm-cta svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bm-cta:hover{transform:translateY(-2px);box-shadow:0 22px 42px -12px rgba(var(--bm-accent-rgb),.7);background:#0D9488;color:#fff}
.bm-cta:hover .bm-cta-sub{color:rgba(255,255,255,.82)}
.bm-cta:active{transform:scale(.98)}
.bm-cta.bm-cta-scan{background:transparent;color:#F0FDFA;border:1.5px solid rgba(45,212,191,.55);box-shadow:none}
.bm-cta.bm-cta-scan .bm-cta-sub{color:rgba(238,242,248,.62)}
.bm-cta.bm-cta-scan:hover{background:rgba(20,184,166,.12);border-color:rgba(45,212,191,.9);color:#fff;box-shadow:0 16px 36px -16px rgba(var(--bm-accent-rgb),.45)}
.bm-note{position:absolute;right:8px;bottom:-34px;display:inline-flex;align-items:center;gap:6px;font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:13.5px;font-weight:600;color:var(--bm-accent-hi);pointer-events:none;white-space:nowrap}
.bm-note svg{width:22px;height:18px;flex:none;stroke:var(--bm-accent-hi);fill:none;stroke-width:1.8;stroke-linecap:round;transform:rotate(12deg)}
.bm-how{appearance:none;border:0;background:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:14px;color:rgba(238,242,248,.7);padding:8px 0;display:inline-flex;align-items:center;gap:7px;min-height:44px}

/* Apple requires 44x44pt for anything tappable. Applied on touch pointers only so the
   desktop footer keeps its tight rhythm — a 44px link row looks wrong with a mouse. */
@media (pointer:coarse){
  a,button{min-height:44px}
  footer a,.ft a,.foot a{display:inline-flex;align-items:center;min-height:44px}
}
.bm-how svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bm-how:hover{color:#fff}
.bm-stage{display:none}
/* retired — dual Paste/Scan CTAs replace the stamp-slam demo card */
  /* Amazon-like listing: product photo stays clear; verdict stamp lives in its own row below. */
  .bm-card{position:relative;width:100%;background:#fff;border-radius:18px;padding:14px 14px 12px;box-shadow:0 28px 56px -24px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14);transform:rotate(-1.2deg);animation:bmFloat 5.5s ease-in-out infinite}
  @keyframes bmFloat{0%,100%{transform:rotate(-1.2deg) translateY(0)}50%{transform:rotate(-.7deg) translateY(-6px)}}
.bm-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.bm-card-tag{display:inline-flex;align-items:center;gap:5px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8A919C}
.bm-card-tag svg{width:11px;height:11px;stroke:#A8B0BA;fill:none;stroke-width:2;stroke-linecap:round}
.bm-card-store{font-size:11px;font-weight:800;color:#FF9900;letter-spacing:.01em}
/* isolation + white ground: multiply on the Amazon JPG dissolves its baked-in grey pad. */
  .bm-card-art{position:relative;isolation:isolate;height:140px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;margin:0;overflow:hidden}
.bm-card-art img{width:100%;height:100%;object-fit:contain;padding:10px 14px;display:block;mix-blend-mode:multiply}
/* Dedicated stamp row — product and verdict no longer compete for the same pixels. */
  .bm-card-vrow{display:flex;justify-content:center;align-items:center;min-height:52px;margin:4px 0 10px;padding:2px 0}
.bm-card-body{padding:0 2px}
.bm-card-name{font-weight:700;font-size:14.5px;color:#0E1A2B;line-height:1.3;margin:0 0 8px;letter-spacing:-.015em;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bm-card-pr{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-family:'JetBrains Mono',ui-monospace,monospace}
.bm-card-pr b{font-size:24px;font-weight:800;color:#0E1A2B;letter-spacing:-.03em}
.bm-card-pr .bm-usual{font-size:12px;font-weight:600;color:#8A919C}
.bm-card-pr .bm-usual s{color:#A8B0BA;font-weight:500}
.bm-card-pr em{font-style:normal;font-size:11px;font-weight:800;color:#0E7A4A;background:rgba(18,178,106,.12);padding:3px 8px;border-radius:999px}
.bm-card-pr em.weak{color:#6B7280;background:#F0F2F5}
.bm-card-claim{margin-top:10px;padding-top:9px;border-top:1px solid #EEF1F5;font-size:11.5px;font-weight:600;color:#8A919C;display:flex;align-items:center;gap:6px}
.bm-card-claim svg{width:12px;height:12px;stroke:#A8B0BA;fill:none;stroke-width:2;flex:none}
/* Stamp sits under the photo — solid enough to read,slight tilt keeps the “verdict slam” feel. */
  .bm-stamp{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:12px;border:2.5px solid;background:#fff;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:900;font-size:20px;letter-spacing:.06em;transform:rotate(-6deg) scale(.4);opacity:0;pointer-events:none;box-shadow:0 8px 20px -10px rgba(14,26,43,.35)}
.bm-stamp svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.8;stroke-linecap:round}
.bm-stamp.v-buy{color:#0B7A46;border-color:#12B26A;background:#EAF8F1}
.bm-stamp.v-wait{color:#8A5B06;border-color:#E8940C;background:#FFF6E5}
.bm-stamp.v-skip{color:#B42318;border-color:#E23B3B;background:#FDECEC}
.bm-reveal.v-buy b{color:#7EF0B0}
.bm-reveal.v-wait b{color:#FFD08A}
.bm-reveal.v-skip b{color:#FF8B82}
.bm-skel .bm-card-art,.bm-skel .bm-card-name{background:linear-gradient(90deg,#F4F6F8,#fff,#F4F6F8);background-size:200% 100%;animation:bmShim 1.3s linear infinite;border-radius:8px;color:transparent}
  @keyframes bmShim{0%{background-position:200% 0}100%{background-position:-200% 0}}
  @media(prefers-reduced-motion:reduce){.bm-skel .bm-card-art,.bm-skel .bm-card-name{animation:none}}
.bm-stamp.on{animation:bmSlam .55s cubic-bezier(.2,1.4,.4,1) forwards}
  @keyframes bmSlam{0%{opacity:0;transform:rotate(-6deg) scale(1.55)}55%{opacity:1;transform:rotate(-8deg) scale(1.06)}100%{opacity:1;transform:rotate(-6deg) scale(1)}}
.bm-card.busted .bm-card-pr em{color:#6B7280;background:#F0F2F5}
.bm-reveal{font-size:13.5px;line-height:1.45;color:var(--bm-fog);text-align:center;max-width:30ch;min-height:2.8em;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.bm-reveal.on{opacity:1;transform:none}
.bm-reveal b{color:#FF8B82;font-weight:800}
  @media(prefers-reduced-motion:reduce){
    .bm-card{animation:none}.bm-stamp{opacity:1;transform:rotate(-6deg) scale(1)}.bm-stamp.on{animation:none}.bm-reveal{opacity:1;transform:none}
  }
  @media(max-width:860px){
    .bm{grid-template-columns:1fr;padding:18px 16px 22px;gap:16px;min-height:0}
    .bm-h{font-size:clamp(28px,7.5vw,38px);margin-bottom:10px}
    .bm-s{font-size:14.5px;margin-bottom:14px;max-width:34ch}
    /* Mobile: ultra-compact hero — Verified rarity must clear the fold. */
    .bm{padding:12px 12px 10px;gap:10px}
    .bm-h{font-size:clamp(24px,6.8vw,32px);margin-bottom:6px}
    .bm-s{font-size:12.5px;margin-bottom:8px;max-width:none;line-height:1.35}
    .bm-pills{display:flex;gap:5px;margin:0}
    .bm-pill{padding:5px 8px 5px 7px;font-size:9.5px;border-radius:8px;gap:5px}
    .bm-pill svg{width:11px;height:11px}
    .bm-pair{grid-template-columns:1fr 1fr;max-width:none;justify-self:stretch;gap:7px}
    .bm-cta{min-height:0;padding:10px 10px;border-radius:12px;width:100%;gap:2px}
    .bm-cta .bm-cta-kicker{font-size:11.5px;gap:5px;letter-spacing:-.01em}
    .bm-cta .bm-cta-sub{display:none} /* save vertical space — kicker carries the action */
    .bm-cta svg{width:15px;height:15px}
    .bm-note{display:none}
  }
.mhome .bm,.bm-m{order:1;padding:14px 16px 16px;cursor:default;min-height:0}
/* ===== Instant-price-verdict banner (legacy masthead — kept for non-landing surfaces) ===== */
  /* ── Masthead (owner 2026-08-01) — FLUSH under the header,sharing its exact gradient so the two read as
   one block. Depth comes from two low-opacity light sources plus a ~5% grain layer: a large flat gradient
   reads as plastic without grain. Hairlines at 8–14% white,never solid borders. */
.ivb{position:relative;overflow:hidden;border-radius:0;padding:22px 26px 20px;display:flex;flex-wrap:wrap;
  align-items:flex-end;gap:16px 34px;cursor:pointer;margin:0;max-width:none;
  background:linear-gradient(135deg,#0E1A2B 0%,#241640 100%)}
.ivb::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 130% at 88% -18%,rgba(240,163,35,.20),transparent 62%),
             radial-gradient(48% 120% at 8% 118%,rgba(124,92,255,.24),transparent 60%)}
.ivb::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
.ivb>*{position:relative;z-index:1}
.ivb-r{flex:0 0 auto;display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.ivb-lab{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.34)}
/* verdict chips — glass with a glowing dot. Replaces three flat saturated rectangles,which read as a
   framework default and were the least premium element on the page. */
.vchip{display:inline-flex;align-items:center;gap:8px;padding:10px 15px 10px 12px;border-radius:11px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:700;letter-spacing:.09em;color:rgba(255,255,255,.9)}
.vchip i{width:7px;height:7px;border-radius:50%;display:block;flex:0 0 7px}
.vchip.v-buy i{background:#2FD98A;box-shadow:0 0 9px rgba(47,217,138,.75)}
.vchip.v-wait i{background:#F5B03F;box-shadow:0 0 9px rgba(245,176,63,.7)}
.vchip.v-skip i{background:#FF6B5A;box-shadow:0 0 9px rgba(255,107,90,.7)}
.ivb::after{content:"";position:absolute;top:-55%;right:-3%;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(96,72,196,.22),rgba(96,72,196,0) 68%);pointer-events:none}
.ivb .ivb-l{flex:1 1 340px;position:relative;z-index:1;min-width:0;max-width:640px}
.ivb .ivb-ey{display:flex;align-items:center;gap:0;color:#F0A323;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;font-size:10px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:9px}
.ivb-ey i{display:none}
/* retired: it indented the eyebrow out of alignment with the headline */
  .ivb .ivb-t{color:#fff;font-weight:800;font-size:clamp(28px,3.4vw,38px);letter-spacing:-.045em;line-height:1.02;margin-bottom:8px;text-wrap:balance}
.ivb-t em{font-style:normal;background:linear-gradient(92deg,#FFD98A,#F0A323);-webkit-background-clip:text;background-clip:text;color:transparent}
.ivb .ivb-s{color:rgba(255,255,255,.72);font-size:15px;font-weight:450;line-height:1.45;max-width:46ch}
.ivb .ivb-p{display:flex;gap:8px;position:relative;z-index:1;flex:none}
.ivb .pill{color:#fff;font-weight:800;font-size:15px;letter-spacing:.02em;padding:12px 24px;border-radius:12px}
.ivb .p-buy{background:#1FA857;box-shadow:0 10px 24px -8px rgba(31,168,87,.7)}
.ivb .p-wait{background:#F5941E;box-shadow:0 10px 24px -8px rgba(245,148,30,.65)}
.ivb .p-skip{background:#EE3B3B;box-shadow:0 10px 24px -8px rgba(238,59,59,.65)}
  @media(max-width:640px){.ivb-desktop{display:none}}
.mhome .ivb{margin:0;padding:18px 16px 16px;border-radius:0}
/* Landing composition: sticky logo+search+PageTabs → BrandMoment (web) → shelf. */
  .mhome .bm{order:1}
.mhome .sf-tabbar .sf-tabs{padding:0;gap:2px;font-size:12px;max-width:none}
.mhome .sf-tabbar .sf-tab{padding:8px 10px}
.mhome .hdeck2:not(.sevsec){order:2}
.mhome .sevsec{order:3}
.mhome .only{order:4}
.mhome .statstrip{order:5}
.mhome .feedsec{order:6}
.mhome .rband{order:7}
.mhome .ivb::after{inset:0;top:auto;right:auto;width:auto;height:auto}
/* keep the grain full-bleed */
  .mhome .ivb .ivb-ey{font-size:9.5px;letter-spacing:.2em;margin-bottom:8px}
.mhome .ivb .ivb-t{font-size:25px;line-height:1.05;letter-spacing:-.038em;margin-bottom:6px}
.mhome .ivb .ivb-s{font-size:13.5px;line-height:1.45}
/* chips become a wrapping row on mobile — a stacked column ate the whole viewport height */
  .mhome .ivb .ivb-r{flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:12px}
.mhome .ivb .ivb-lab{flex:1 1 100%;font-size:8.5px}
.mhome .ivb .vchip{padding:8px 12px 8px 10px;font-size:11px}
.mhome .ivb{gap:14px}
.mhome .ivb .ivb-l{flex:1 1 100%}
.mhome .ivb .ivb-r{margin-top:2px}
.mhome .ivb .ivb-s{font-size:14px}
.hdgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.hdeck2 .psq2{position:relative;background:linear-gradient(160deg,#f7fafd,#eef3f9);border:1px solid #EEF1F5;border-radius:16px;padding:14px;cursor:pointer;transition:box-shadow .15s,transform .15s,border-color .15s}
.hdeck2 .psq2:hover{box-shadow:0 12px 26px -16px rgba(15,26,43,.3);transform:translateY(-2px);border-color:#d5dce6}
.hdeck2 .psq2:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
/* Transparent verdict stamp — outline + tinted wash so the product image shows through. */
  .hdeck2 .psq2 .pstamp{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:4px 9px;border-radius:9px;line-height:1;transform:rotate(-7deg);font-weight:900;font-size:12px;background:rgba(255,255,255,.42);border:1.5px solid currentColor;box-shadow:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.hdeck2 .psq2 .pstamp small{font:800 6px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.13em;opacity:.85}
.hdeck2 .psq2 .pstamp.buy,.hdeck2 .psq2 .pstamp.v-buy{color:#0B7A46;border-color:#0E9F6E}
.hdeck2 .psq2 .pstamp.v-wait{color:#8A5B06;border-color:#E8940C}
.hdeck2 .psq2 .pstamp.v-skip{color:#B42318;border-color:#D93A2B}
.hdeck2 .psq2 .pstamp.v-fair{color:#3D4654;border-color:#5A6472}
.hdeck2 .psq2 .pstamp.clip{color:#B42318;border-color:#E0402E}
.hdeck2 .psq2 .im{height:160px;border-radius:11px;background:#fff;border:1px solid #EEF1F5;margin-bottom:11px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hdeck2 .psq2 .im img{max-width:100%;max-height:100%;object-fit:contain}
/* Verified shelf — premium card chrome (wi-with-scan mock + live rarity lines) */
  .vbsec .psq2{padding:12px 12px 12px;border-radius:16px;display:flex;flex-direction:column}
.vbsec .psq2 .im{height:158px;border-radius:12px;margin-bottom:10px;background:#fff;border:1px solid #EEF1F5}
.vbsec .psq2 .nm{font-size:13.5px;font-weight:700;min-height:36px;max-height:36px;margin-bottom:6px;color:#0E1A2B}
/* The PRICE is ink,not teal (2026-08-11). #0D9488 measures dE 23.1 from the WAIT verdict
     colour #0099B3 — inside the band where a colour-vision-deficient reader can confuse the two
     — and it was colouring the current price on cards that also carry BUY/WAIT/SKIP stamps. A
     price is not a status.
     Moving the HUE was tried first and does not work: searching the teal region for a colour
     both readable with white text and >=32 dE from every verdict colour returns nothing,because
     WAIT physically occupies the dark-teal space (best candidate #506A5E is a grey-green,not a
     brand colour). So the fix is where the colour is SPENT,not which colour it is. Teal stays
     on brand,CTAs and the "see the receipt" link,where it makes no claim about a price — the
     same rule §1 applies inside the app.
       price  #0D9488 -> #0E1A2B   min dE 23.1 -> 41.4,contrast on white 3.74 -> 17.48 */
  .vbsec .psq2 .pr .now{font-size:20px;font-weight:800;color:#0E1A2B;font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:-.03em}
.vbsec .psq2 .pr .usual{font-size:12.5px}
.vbsec .psq2 .pr .hd-off{font-size:12px;padding:3px 8px;border-radius:999px}
/* ── HERO — three doors ──────────────────────────────────────────────────────────────────────
   A stray `.vbsec` sat here,immediately before this comment,left over from the .vbsec block
   above. CSS treats a comment as whitespace,so the parser read the next rule as
   `.vbsec .bm-doors{...}
` — a descendant selector that can never match,because .bm-doors is
   never inside .vbsec. display:flex,flex-wrap and gap therefore NEVER applied: the doors have
   been laid out by inline flow this whole time,and only looked like a row because the pills
   carried their own padding. Removing the pill padding is what finally exposed it — the three
   doors rendered edge to edge with a measured 0px between them.
   Replaces the two big CTA cards. Search joins paste and scan because those three are what
   actually create a verdict,and the verdict page is the one carrying the affiliate link —
   so the hero should name all three rather than imply search via the field alone.
   Compact one-liners,not cards: three stacked CTA blocks pushed the shelf down the page,and the labels are self-explanatory enough that a subtitle each was just noise. */
.bm-doors{display:flex;flex-wrap:wrap;gap:10px;margin-top:0}
.bm{row-gap:12px}
.bm-door{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #E3E6EA;
  border-radius:999px;padding:0 16px 0 8px;min-height:44px;cursor:pointer;
  font:700 13.5px/1 system-ui;color:#141A21;letter-spacing:-.015em;
  box-shadow:0 1px 0 rgba(20,26,33,.05),0 6px 14px -10px rgba(20,26,33,.35);
  transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s}
.bm-door:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(20,26,33,.06),0 10px 20px -12px rgba(20,26,33,.45)}
.bm-door b{font-weight:700}
.bm-door-i{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;background:rgba(0,97,206,.1);color:#0061CE}
.bm-door-i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.bm-door-scan .bm-door-i{background:rgba(20,184,166,.16);color:#0C6E67}
/* The doors belong under the copy,not in .bm-pair's old right-hand column — they inherited
   `justify-self:end` and floated off to the right,detached from the sentence they answer. */
/* The doors sit in the RIGHT column,where .bm-pair used to live,with the note tucked inside
   them so the whole group is ONE grid child. Putting them in column 1 created two extra rows and
   grew the hero 182px,pushing the first product card from 528px to 710px — a straight regression
   against the fold work. Measured before and after,not eyeballed. */
/* column 1 again: the panel now owns column 2,so the doors sit under the copy where
   they belong — beside an empty column they had only stacked and grown the hero. */
.bm-doors{grid-column:1;justify-self:start;flex-direction:row;align-items:center;max-width:none}
.bm-anylink{margin-top:4px;font:500 12.5px/1.45 system-ui;
  color:#C2CDD7}   /* the hero is DARK at every width — a #4A5761 note here was unreadable */
@media (max-width:900px){ .bm-doors{margin-top:14px} }
@media (max-width:640px){ .bm-doors{gap:8px} .bm-door{font-size:12.5px;padding:0 13px 0 7px} }
/* ── DOORS — icon + text row under a hairline (design/mock/build-hero.mjs `.doors`/`.dr`) ────
   They shipped as three white pills. The mock draws no container at all: a 1px rule separates
   them from the field above,then each door is just its icon chip and its label. Three pills
   read as three competing buttons beside the hero's real CTA; the row reads as what it is,a
   list of the ways in. Values are the mock's own — gap 10/30,label 600 13.5,icon chip 26px at
   radius 7 (not a 28px circle).
   The gate could not see this: it counts .bm-door against .dr and got 3 = 3 either way. It now
   compares border-radius and the container's border-top,which is what actually differed.
   No rule above the doors (owner,15 Aug) — the 16px padding went with it. This block is a
   hand-written copy of the mock's values,so it OUTRANKS vendor/mock-hero.css: removing the
   border in the mock alone left the app still drawing it. Change both,or neither. */
.bm-doors{display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px;margin-top:18px}
.bm-door{background:none;border:0;box-shadow:none;border-radius:0;padding:0;min-height:0;
  font:500 12.5px/1 system-ui;color:#4A5761;letter-spacing:0;transition:color .16s}
.bm-door:hover{transform:none;box-shadow:none;color:#141A21}
.bm-door:hover b{color:#0061CE}
.bm-door b{font:600 13.5px/1 system-ui;color:#1D1D1F;letter-spacing:-.015em;transition:color .16s}
.bm-door-i{width:26px;height:26px;border-radius:7px}
.bm-door-i svg{width:14px;height:14px}
@media (max-width:640px){ .bm-doors{gap:10px 18px} .bm-door{padding:0} }
/* ── HERO SEARCH FIELD ────────────────────────────────────────────────────────────────────
   design/mock/build-hero.mjs `.field` — the primary door,above the three shortcut doors.
   It is a real form: typing sets the SAME q the header search owns and submitting calls
   search(value),so the hero answers instead of bouncing focus to the header box.
   Values taken from the mock verbatim (--ink #141A21,--ink3 #7B8794,--acc #0061CE) rather
   than re-derived,so a mock edit and a build edit stay comparable. */
.bm-field{grid-column:1;justify-self:stretch;display:flex;align-items:center;gap:9px;
  background:#fff;border:2px solid #141A21;border-radius:16px;padding:4px 4px 4px 14px;
  min-height:44px;max-width:560px;box-shadow:0 4px 12px -8px rgba(20,26,33,.45)}
.bm-field-i{color:#7B8794;display:flex;flex:none}
.bm-field-i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.bm-field-in{flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:500 15px/1 system-ui;color:#141A21;letter-spacing:-.01em}
.bm-field-in::placeholder{color:#4A5761;opacity:1}
/* Safari paints its own clear/decoration control inside type=search and it collides with the
   2px border at this height. */
.bm-field-in::-webkit-search-decoration,.bm-field-in::-webkit-search-cancel-button{-webkit-appearance:none}
.bm-field-go{display:inline-flex;align-items:center;gap:7px;background:#0061CE;color:#fff;
  border:0;cursor:pointer;font:800 14px/1 system-ui;padding:8px 14px;border-radius:12px;
  flex:none;min-height:36px}
.bm-field-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.bm-field-go:hover{background:#0055B4}
.bm-field:focus-within{box-shadow:0 4px 12px -8px rgba(20,26,33,.45),0 0 0 3px rgba(0,97,206,.22)}
@media (max-width:640px){
  .bm-field{padding:4px 4px 4px 12px;min-height:44px;max-width:none}
  .bm-field-go{padding:8px 12px;font-size:13.5px}
  .bm-field-in{font-size:16px}   /* < 16px makes iOS Safari zoom the page on focus */
}

/* ── MOBILE BROWSER PASS (owner, 15 Aug: "alligning the mobile browser view") ───────────────
   Measured on a 402px phone before changing anything. Three things were wrong, all of them
   consequences of desktop composition arriving at phone width unchanged.

   1. THE PROOF PANEL. .bm-proof is authored as the hero's RIGHT-HAND COLUMN, beside the copy.
      Below 900px the hero stacks and it is no longer beside anything — it became a 380px block
      ABOVE the headline, of which only 112px was the panel, so ~250px was empty grey. Inside it,
      the three stat tiles (USUAL / YEAR LOW / YEAR HIGH) overlapped each other with their numbers
      clipped to "$2," and "$1", and the product title sat under its own price. It pushed the
      actual value proposition — headline, sub, search — entirely below the fold.
      Removed at the SAME breakpoint the layout changes, which is the honest line: it is not a
      phone component that needs fixing, it is a column with nothing to sit beside. Desktop is
      untouched, and the trust it carried is still on the page — the verified shelf below it is
      the same real banked BUYs.

   2. THE HERO GUTTER. .bm reserves 80px of horizontal margin. On a 402px screen that is a fifth
      of the display, and it squeezed the search input to 77px — the placeholder read "Search a p".
      24px on phones.

   3. The Check-it button was taking 120px of a 258px field. Tightened so the input keeps the room. */
@media (max-width:900px){
  .bm-proof{display:none !important}
}
@media (max-width:640px){
  .bm{width:calc(100% - 24px) !important;margin-top:14px !important}
  .bm-field-go{padding:8px 12px;font-size:13px}
  .bm-hl{padding-left:0;padding-right:0}
}
/* ── HERO PROOF PANEL ──────────────────────────────────────────────────────────────────
   Three real banked BUYs,rotating. CSS-only: one keyframe,each panel offset by a slot,so
   there is no timer to leak and prefers-reduced-motion just pins the first one.
   The range bar is the element no competitor can draw — today's price plotted against the
   cheapest and dearest this product has actually been. It uses low/high,which the shelf
   payload already carries; the full 366-point chart would need per-product history and a
   price-research call per card,which the landing page must not make. */
/* Span both rows in column 2 so the panel sits BESIDE the copy AND the doors. Without the span
   it auto-placed onto its own row and the hero went 341px -> 584px,pushing the first card to
   808px — worse than the 528px production had before any of this. Measured,then fixed. */
.bm-proof{grid-column:2;grid-row:1 / span 3;justify-self:start;align-self:center;
  min-width:0;width:100%;max-width:520px}
.bm-proof-cap{display:block;font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em;text-transform:uppercase;color:#3D4654;margin-bottom:10px}
/* 188px was correct while the verdict stub was a stamp INSIDE the tag. Moving it out into its own
   torn card (.bm-pf-tagw) added ~115px to that column,and .bm-pf is position:absolute;inset:0 —
   so the panels take the STAGE's height and the extra content overflowed into .bm-proof's
   overflow:hidden. Measured: stage h=188 / scrollHeight=341,.bm-pf-tagw bottom 595 against a
   panel bottom of 538,so the stub was cut off 57px short.
   The stage cannot size to absolutely-positioned children,so this height has to be stated. */
.bm-proof-stage{position:relative;min-height:352px}
.bm-pf{position:absolute;inset:0;display:grid;grid-template-columns:168px 1fr;gap:20px;
  align-items:center;opacity:0;animation:bmPf 13.5s infinite}
@keyframes bmPf{
  0%{opacity:0;transform:translateY(6px)} 3%{opacity:1;transform:none}
  30%{opacity:1;transform:none} 33.33%{opacity:0;transform:translateY(-6px)}
  100%{opacity:0;transform:translateY(-6px)}}
.bm-pf-tag{position:relative;background:#FCFCFD;border-radius:14px;padding:22px 12px 0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  box-shadow:0 2px 0 rgba(20,26,33,.1),0 14px 26px -16px rgba(0,0,0,.6)}
.bm-pf-hole{width:26px;height:8px;border-radius:999px;background:#DFE3E9;
  box-shadow:inset 0 1.5px 2px rgba(20,26,33,.34);position:absolute;top:9px;left:50%;transform:translateX(-50%)}
.bm-pf-tag img{height:52px;width:auto;object-fit:contain;margin-bottom:7px}
.bm-pf-nm{font:600 10.5px/1.25 system-ui;color:#4A5761;margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bm-pf-pr{font:800 20px/1 system-ui;letter-spacing:-.03em;color:#141A21;margin-bottom:11px}
.bm-pf-perf{width:100%;border-top:2px dashed #CFD5DC;margin-top:auto;margin-bottom:0}
/* mock `.tgw` — holds the tag and its torn-off stub as one column,so the stub's rotation stays
   inside this grid cell and never pushes the year chart in the next one */
.bm-pf-tagw{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.bm-pf-tagw .bm-pf-tag{padding-bottom:0;width:100%}
/* TORN OFF,not printed on: its own card,its own border and shadow,sitting -5deg off-axis —
   the same rotation the mock uses (matrix 0.996195/-0.0871557). As a stamp inside the tag it read
   as ink on the ticket; the design is a stub someone tore along the perforation. */
.bm-pf-stub{margin-top:11px;transform:rotate(-5deg);background:#FCFCFD;border:1px solid #C3CBD6;
  border-radius:10px;width:100%;padding:10px 8px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  box-shadow:0 9px 18px -10px rgba(20,26,33,.6)}
.bm-pf-v{font:900 12px/1 system-ui;letter-spacing:.14em;color:#0B7C44;border:2px solid #0B7C44;
  border-radius:3px;padding:5px 9px 4px}
.bm-pf-r{font:600 10px/1.25 system-ui;color:#4A5761}
.bm-pf-range{min-width:0}
.bm-pf-rl,.bm-pf-re{display:flex;justify-content:space-between;font:600 10px/1 ui-monospace,Menlo,monospace;
  letter-spacing:.07em;text-transform:uppercase;color:#8FA0AF}
.bm-pf-re{font-size:13px;letter-spacing:-.01em;text-transform:none;color:#EEF2F8;margin-top:8px}
.bm-pf-track{display:block;position:relative;height:8px;border-radius:999px;margin-top:9px;
  background:linear-gradient(90deg,#23D17E,#2E4E62 45%,#3E5468)}
.bm-pf-track i{position:absolute;top:50%;transform:translate(-50%,-50%);width:17px;height:17px;
  border-radius:50%;background:#fff;border:4px solid #0061CE;box-shadow:0 3px 9px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){
  .bm-pf{animation:none;opacity:0} .bm-pf:first-child{opacity:1}}
/* PHONE: the same three verdicts, re-laid-out rather than hidden.
   Stacking the desktop composition costs ~200px and pushes the first product card past 700px —
   a proof panel that buries the products it vouches for is an obstacle. So on a phone the tag
   and the range bar collapse into ONE horizontal strip: thumbnail spanning the rows, name on
   one line, price beside the verdict chip, the rarity line under them, and the range reduced to
   its irreducible form — low price, dot, high price, on a single row. Same markup, same CSS-only
   rotation; only the composition changes.
   The range moves INSIDE the white card here (on desktop it sits on the dark hero ground beside
   it), so its two label colours have to be re-set for a light backdrop — #8FA0AF on white is
   2.9:1 and #EEF2F8 is invisible. check:contrast verifies both at 402px. */
@media (max-width:900px){
  .bm-proof{grid-column:1;grid-row:auto;justify-self:stretch;max-width:none;margin-top:15px}
  .bm-proof-cap{font-size:10.5px;margin-bottom:6px}
  .bm-proof-stage{min-height:112px}
  .bm-pf{grid-template-columns:1fr;gap:0;align-content:start}
  .bm-pf-tag{display:grid;grid-template-columns:46px 1fr auto;
    grid-template-areas:"img nm v" "img pr v" "img rare rare";
    column-gap:11px;row-gap:2px;align-items:center;text-align:left;
    padding:11px 13px 9px;border-radius:13px 13px 0 0;box-shadow:none}
  /* The range half only renders when hi>lo. When a product has no usable range the tag IS the
     whole card, so it has to close its own corners and carry the shadow — otherwise it ships
     with two square bottom corners and no lift. Data-dependent, so not visible in today's feed. */
  .bm-pf-tag:last-child{border-radius:13px;padding-bottom:12px;
    box-shadow:0 2px 0 rgba(20,26,33,.1),0 14px 26px -16px rgba(0,0,0,.6)}
  .bm-pf-hole{display:none}
  .bm-pf-tag img{grid-area:img;height:46px;width:46px;margin:0;grid-row:span 3;align-self:center}
  .bm-pf-nm{grid-area:nm;-webkit-line-clamp:1;font-size:11.5px;margin:0;align-self:end}
  .bm-pf-pr{grid-area:pr;font-size:17px;margin:0}
  .bm-pf-perf{display:none}
  .bm-pf-stub{display:contents}
  .bm-pf-v{grid-area:v;font-size:11px;padding:4px 8px 3px;align-self:center}
  .bm-pf-r{grid-area:rare;font-size:10px;align-self:start}
  /* second half of the same card: one row, low — dot — high */
  .bm-pf-range{background:#FCFCFD;border-radius:0 0 13px 13px;padding:0 13px 11px;
    display:flex;align-items:center;gap:9px;
    box-shadow:0 2px 0 rgba(20,26,33,.1),0 14px 26px -16px rgba(0,0,0,.6)}
  .bm-pf-rl{display:none}
  .bm-pf-track{flex:1;order:2;margin-top:0}
  .bm-pf-re{order:1;display:contents;margin-top:0;font-size:10.5px;color:#4A5761}
  .bm-pf-re b{order:3}
}
/* Hero trust line — a rule across the foot of the hero,not a second card. It spans both grid
   columns so it sits under the doors AND the proof panel. Colours are the ones .vb-trust already
   used on this same dark ground,so the contrast sweep result carries over. */
.bm-trust{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;
  margin:16px 0 0;padding-top:13px;border-top:1px solid rgba(255,255,255,.13);
  font:600 12.5px/1.45 system-ui;color:rgba(238,242,248,.82)}
.bm-trust-i{width:17px;height:17px;flex:none;stroke:#14B8A6;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.bm-trust span{flex:1 1 320px;min-width:0}
.bm-trust-a{color:#5EEAD4;font-weight:800;text-decoration:none;white-space:nowrap}
.bm-trust-a:hover{text-decoration:underline}
@media (max-width:640px){ .bm-trust{margin-top:13px;padding-top:11px;font-size:12px} }
/* ── HERO → LIGHT ────────────────────────────────────────────────────────────────────────
   The mock's hero is a WHITE CARD on the pale page ground (.hero{background:var(--card)}
),with a
   #DFE4EC panel on the right. What shipped was a dark navy/teal gradient — the single largest
   divergence on the list,and the reason the live page and the design read as different products.
   Values below are the mock's (build-hero.mjs HERO_CSS): #1D1D1F headline,#6E6E73 supporting
   copy,#E3E6EA rules,#DFE4EC panel. Every pair is re-checked by scripts/check-contrast.mjs,which is the only reason a wholesale dark→light flip is safe to do in one pass. */
.bm{
  background:#FCFCFD !important;
  max-width:var(--page-max,1180px);margin-left:auto;margin-right:auto;
  border-radius:18px;overflow:hidden;
  box-shadow:0 2px 0 rgba(20,26,33,.09),0 16px 32px -20px rgba(20,26,33,.5);
}
/* ══ MOTION SCALE + PAGE-LOAD CHOREOGRAPHY ════════════════════════════════════════════════
   Ported from design/mock/. One easing and one set of durations for the whole page,so effects
   move like a single object instead of each having been tuned alone — that consistency is most
   of what reads as considered,not the animation itself.
     --e-out  arriving: fast start,long settle       --e-in   leaving: quickly,nobody waits
     --e-soft size/layout,where overshoot looks broken
   Durations are a ratio (120 / 260 / 420,each ~2x) so a sequence stays legible at any speed.

   The page then arrives in the order you read it: chrome,the question,the way to answer it,the proof,the goods. CSS only,zero bytes,and a "backwards" fill keeps the hidden state
   INSIDE the keyframe — so under reduced motion,an old browser,or CSS that half-loaded,every
   element is simply visible. Content must never need an animation to exist. */
:root{
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-in:cubic-bezier(.5,0,.75,0);
  --e-soft:cubic-bezier(.4,0,.2,1);
  --d-fast:120ms; --d-base:260ms; --d-slow:420ms;
  --stagger:55ms;
}
/* The download links live at the right end of the PAGE-TAB strip now (owner,15 Aug),not in their
   own band across the top. The whole dark-band treatment went with the move — no background,no
   min-height,no page-wide padding — because the strip it sits in is near-white
   (rgba(255,255,255,.92)),and the old palette was built for #2D2D2F chrome. Carrying those
   colours across would have put #F5F5F7 links on white.
   For the history of the band this used to be — the backdrop-blur seam,and why headless Chrome
   could not see it — see the note at --rd-chrome-flat,which is still what paints the header.
   Ink values are the tab strip's own,so the links read as part of that strip rather than as a
   transplant: --ink3 for the lead,--ink for the links. Hover is #0061CE,NOT the --rd-acc blue —
   #2997FF measures 3.1:1 on white and misses AA,while #0061CE clears it at 5.9:1. The accent that
   works on dark chrome does not work here,which is the whole reason this block was rewritten
   rather than moved. */
.wi-promo{display:flex;align-items:center;gap:10px;flex:0 0 auto;
  color:var(--ink2);font:450 12.5px/1 system-ui;letter-spacing:-.01em;white-space:nowrap}
.wi-promo-t{color:var(--ink2)}
.wi-promo-a{color:var(--ink,#0b1220);font-weight:600;display:inline-flex;align-items:center;gap:5px;
  text-decoration:none;transition:color .16s}
.wi-promo-a:hover{color:#0061CE}
/* The tab strip is a ROW now: tabs take the space,the links sit at the far right of the same
   1720px column. .sf-tabs gives up its own max-width/margin to the row,or the two would centre
   independently and the links would drift away from the column edge. */
.sf-tabbar-row{display:flex;align-items:center;gap:20px;max-width:1720px;margin:0 auto;
  padding-right:26px}
/* The tabs must scroll THEMSELVES. Measured on a 402px phone: scrollWidth 852 against a 332px
   client,but .sf-tabs computed overflow-x:visible,so the spill made the whole .sf-tabbar the
   scroll container instead — a sticky element scrolling sideways,and the last three tabs
   (Deepest,Clip & Save,Fake Index) unreachable in practice. */
.sf-tabbar-row .sf-tabs{flex:1 1 auto;min-width:0;max-width:none;margin:0;padding-right:0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sf-tabbar-row .sf-tabs::-webkit-scrollbar{display:none}
.sf-tabbar{overflow:visible}
/* Measured, not guessed — free space to the right of the last tab was 504px at 1440, 344px at
   1280, 88px at 1024, and negative by 768. The lead needs ~183px and the two links ~212px. */
@media (max-width:1360px){ .sf-tabbar .wi-promo-t{display:none} }
@media (max-width:1279px){ .sf-tabbar .wi-promo{display:none} }
/* No arrows on either link (owner,15 Aug) — .wi-promo-x is gone with them. The hover colour is
   the affordance now,which is what carried it on the wordmark links already. */
/* The link is inline-flex with gap:5px,so the mark is a flex item and needs no baseline fudging.
   -1px pulls it a touch closer than the word gap — a glyph reads as part of its label,not as a
   third item in the row. The Apple mark's leaf puts its optical centre below its geometric one. */
.wi-promo-g{flex:none;margin-right:-1px}
/* Get-the-app nudge — phone web only,never inside the app. Brand teal action,NOT the
     verdict palette (§1): this is chrome,not a stamp. */
  .getapp{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;
    display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;
    background:var(--card);border:1px solid var(--line);
    box-shadow:0 12px 30px -12px rgba(14,26,43,.28);animation:getappUp .22s ease-out both}
  @keyframes getappUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.getapp{animation:none}}
.getapp-icon{border-radius:10px;flex:0 0 auto;display:block}
.getapp-txt{flex:1 1 auto;min-width:0}
.getapp-t{font-weight:800;font-size:14px;color:var(--ink);letter-spacing:-.01em}
.getapp-s{font-size:12.5px;color:var(--ink2);line-height:1.35;margin-top:1px}
.getapp-go{flex:0 0 auto;background:var(--rd-lockup);color:var(--teal-ink);font-weight:800;font-size:14px;
    text-decoration:none;padding:9px 18px;border-radius:999px;white-space:nowrap}
.getapp-x{flex:0 0 auto;background:none;border:0;cursor:pointer;font-size:15px;line-height:1;
    padding:8px;color:var(--ink2);min-width:36px;min-height:36px}
  @media (min-width:641px){.getapp{display:none}}
.wi-promo-a svg.wi-promo-g:first-child{translate:0 -.5px}
.wi-promo-dot{color:#5A5A5F}
@media (max-width:640px){ .wi-promo{font-size:11.5px;gap:7px;padding:5px 12px} }
@keyframes wi-rise{from{opacity:0;translate:0 10px}}
@keyframes wi-fade{from{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .wi-promo{animation:wi-fade var(--d-base) var(--e-out) backwards}
  .rd-topwrap{animation:wi-rise var(--d-base) var(--e-out) backwards}
  .sf-tabbar,.rd-nav{animation:wi-rise var(--d-base) var(--e-out) 60ms backwards}
  .bm-h{animation:wi-rise var(--d-slow) var(--e-out) 120ms backwards}
  .bm-anylink{animation:wi-rise var(--d-slow) var(--e-out) calc(120ms + var(--stagger)) backwards}
  .bm-field{animation:wi-rise var(--d-slow) var(--e-out) calc(120ms + var(--stagger)*2) backwards}
  .bm-doors{animation:wi-rise var(--d-slow) var(--e-out) calc(120ms + var(--stagger)*3) backwards}
  /* the proof panel is the payoff: it lands last, and FADES rather than moves, so the hero's
     right half does not appear to slide in from somewhere off-screen */
  .bm-proof{animation:wi-fade var(--d-slow) var(--e-soft) calc(120ms + var(--stagger)*4) backwards}
  .cbento .tile{animation:wi-rise var(--d-base) var(--e-out) backwards}
  .cbento .tile:nth-child(1){animation-delay:340ms}
  .cbento .tile:nth-child(2){animation-delay:calc(340ms + var(--stagger))}
  .cbento .tile:nth-child(3){animation-delay:calc(340ms + var(--stagger)*2)}
  .cbento .tile:nth-child(4){animation-delay:calc(340ms + var(--stagger)*3)}
}
/* ── HERO SHELL — one card,two flush halves (design/mock/build-hero.mjs `.hero`) ───────────
   Mock: `.hero{grid-template-columns:1fr 496px;overflow:hidden}
` with NO padding of its own.
   `.hl` carries the left padding; `.hr2` fills the right column edge to edge in #DFE4EC.
   .bm-trust is ours,not the mock's,so it spans both columns as its own row underneath.
   The column was a FIXED 496px here AND in the mock,so every pixel the viewport lost came out
   of the copy column: the search input measured 619px at 1440,459 at 1280,and 279 by 1100 with
   the placeholder clipped mid-word. It now clamps,matching the mock — 496 is still the ceiling,so 1440 and 1280 are untouched,and the panel gives ground before the copy does.
   This is a hand-written copy of the mock's rule and it carries !important,so it OUTRANKS
   vendor/mock-hero.css: changing the clamp in the mock alone did nothing,and the computed track
   still read `624px 496px`. Third time today an !important copy outlived its original — change
   both,or neither. */
.bm{padding:0 !important;column-gap:0 !important;row-gap:0 !important;
  grid-template-columns:1fr clamp(380px,38vw,496px) !important}
.bm-hl{padding:32px 32px 28px;display:flex;flex-direction:column;min-width:0}
.bm-proof{grid-column:2 !important;grid-row:1 !important;
  justify-self:stretch !important;align-self:stretch !important;
  width:auto !important;max-width:none !important;
  background:#DFE4EC;min-height:380px;padding:22px 20px;
  display:flex;flex-direction:column;justify-content:center}
.bm-trust{grid-column:1 / -1 !important;padding:0 32px 24px;margin:0}
/* Measured against the mock at 1280: it sits in a 30px page gutter,24px below the bar,so the
   card is 1216 wide starting at y=82. Ours was full-bleed 1280 starting at y=59 — the card read
   as a band rather than a card. Capped at 1216 so it stays the mock's width on wider screens
   instead of stretching. */
/* FULL CONTENT WIDTH (owner,15 Aug). The 1216px cap came from matching the mock,which is a
   fixed-1280 prototype — on a real screen it left a gutter down both sides while the shelf below
   already filled the page. Measured at 1920: hero 1216,shelf 1640,so the hero sat 424px narrower
   than the content under it. It now fills .rd-herowrap (max-width 1720,40px padding = 1640 inner),so hero,bento and shelf share one edge. */
.bm{margin:24px auto 0 !important;width:calc(100% - 80px) !important;max-width:1640px !important}
/* headline sizing/measure now comes from vendor/mock-hero.css — see below */
/* the field fills its column as in the mock — a 560px cap made it a third of the width */
.bm-field{max-width:none}
@media (max-width:900px){
  .bm{grid-template-columns:1fr !important}
  .bm-proof{grid-column:1 !important;min-height:0}
  .bm-hl{padding:22px 18px 18px}
  .bm-trust{padding:0 18px 18px}
}
/* REMOVED — the headline's face,size,measure and colour now come from vendor/mock-hero.css,generated from design/mock/. This block hard-coded `system-ui 40px !important` from when the
   mock's headline was sans,and its !important beat the generated sheet: the copy and the logo
   ported across but the type did not,so the page showed Fraunces' text in system-ui at 40px
   over four lines. A duplicate that only sometimes wins is worse than no duplicate at all.
   Keep the colour of the accent word here — the app still uses <em> in other hero copy. */
.bm .bm-h em{color:#0061CE !important;font-style:normal !important;font-weight:700 !important}
.bm .bm-s{color:#4A5761 !important}
.bm .bm-s b{color:#1D1D1F !important}
/* The mock's hero carries no BUY/WAIT/SKIP chip row — the three doors are the hero's vocabulary,and the verdict palette belongs on tags,not as decoration. */
.bm .bm-pills{display:none !important}
/* REMOVED — "doors: white pills need a real edge once the ground is white". Written when the
   doors WERE pills. They stopped being pills when they became the mock's icon+text row under a
   hairline,but this rule survived at (0,2,0) with !important and quietly repainted the white
   background,the 1px border and both shadows back on — so the row still rendered as three
   buttons while the rule that made it a row sat directly above it,outranked.
   Third time today a hand-written !important override outlived the thing it was written for
   (see also .bm .bm-h font-size,.bm-copy max-width). */
.bm .bm-anylink{color:#4A5761 !important}
/* the trust line moved into the hero yesterday — restate it for a light ground */
.bm .bm-trust{border-top-color:#E3E6EA !important;color:#4A5761 !important}
.bm .bm-trust-i{stroke:#0E7C74 !important}
.bm .bm-trust-a{color:#0061CE !important}
/* right-hand proof panel: the mock's .hr2 grey,so the white tag reads as a tag */
.bm .bm-proof{background:#DFE4EC;border-radius:14px;padding:20px 18px;align-self:stretch;
  display:flex;flex-direction:column;justify-content:center}
.bm .bm-proof-cap{color:#3D4654 !important}
.bm .bm-pf-rl{color:#3D4654 !important}
.bm .bm-pf-re{color:#141A21 !important}
.bm .bm-pf-tag{box-shadow:0 2px 0 rgba(20,26,33,.1),0 14px 26px -16px rgba(20,26,33,.55)}
.bm .bm-pf-hole{background:rgba(20,26,33,.18);box-shadow:inset 0 1.5px 2px rgba(20,26,33,.3)}
@media (max-width:900px){ .bm .bm-proof{padding:14px 13px} }
/* Taste skill + trust-first landing — SUPERSEDED by the honest centered dark card below
   (`.bm.bm-v2` / `.bm-honest`,owner 2026-08-25). Live styles live in the next block. */
.bm.bm-v2 .bm-field-slot{flex:1;min-width:0;position:relative;display:flex;align-items:center;align-self:stretch}
.bm.bm-v2 .bm-field-slot .wi-phanim{
  position:absolute;left:0;right:4px;top:50%;transform:translateY(-50%);
  margin:0;padding:0;border:0;background:none;pointer-events:none;z-index:0;
  font:400 15.5px/1.2 system-ui;color:#8A93A0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-align:left}
.bm.bm-v2 .bm-field-slot .wi-phanim::after{
  content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;
  vertical-align:-0.12em;background:currentColor;border-radius:1px;
  animation:wiPhCaret 1s steps(1) infinite}
.bm.bm-v2 .bm-field.wi-hb-typed .wi-phanim::after{visibility:hidden}
@media (prefers-reduced-motion:reduce){
  .bm.bm-v2 .bm-field-slot .wi-phanim::after{animation:none;opacity:.85}
}
/* ── Honest centered hero (owner 2026-08-25). Dark rounded card — NOT the split 3D layout.
   Placed AFTER earlier .bm.bm-v2 rules so it wins; !important only where those already use it. ── */
.bm.bm-v2.bm-honest,.bm.bm-v2{
  display:block !important;
  max-width:min(1120px, calc(100% - 32px));
  margin:12px auto 16px !important;
  background:
    radial-gradient(640px 420px at 12% -8%, rgba(20,184,166,.18), transparent 58%),
    radial-gradient(560px 380px at 92% 0%, rgba(20,184,166,.10), transparent 55%),
    #0B1220 !important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px !important;
  padding:clamp(40px,5vw,64px) clamp(20px,4vw,48px) clamp(32px,4vw,48px) !important;
  align-items:center !important;
  overflow:hidden !important;
  cursor:default;
  box-shadow:0 18px 40px -28px rgba(0,0,0,.55);
}
.bm.bm-v2 .bm-v2-copy{max-width:40rem;padding:0;text-align:center;margin:0 auto}
.bm.bm-v2 .bm-eyebrow{display:none !important}
/* no AMAZON · BEST BUY · WALMART · TARGET pill */
.bm.bm-v2 .bm-h,.bm.bm-v2 .bm-hl .bm-h{
  color:#FFFFFF !important;
  font:700 clamp(30px,4.6vw,52px)/1.08 system-ui,-apple-system,"Segoe UI",sans-serif !important;
  letter-spacing:-.035em !important;margin:0 !important;text-wrap:balance;
}
.bm.bm-v2 .bm-h em{color:#14B8A6 !important;font-style:normal !important;display:block}
.bm.bm-v2 .bm-anylink{
  margin:16px auto 0 !important;max-width:56ch !important;color:rgba(244,245,247,.82) !important;
  font:400 clamp(14.5px,1.1vw,16.5px)/1.5 system-ui,-apple-system,sans-serif !important;
  text-align:center !important;
}
.bm.bm-v2 .bm-v2-bar,.bm.bm-v2 .bm-field{
  margin:22px auto 0 !important;max-width:560px !important;width:100%;
  background:rgba(8,12,20,.78) !important;border-radius:999px !important;
  border:0 !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) !important;
  padding:6px 6px 6px 18px !important;min-height:52px;
  display:flex !important;align-items:center;gap:8px;
}
.bm.bm-v2 .bm-field:focus-within{box-shadow:inset 0 0 0 1px rgba(20,184,166,.55) !important}
.bm.bm-v2 .bm-field-i{color:#8A93A0}
.bm.bm-v2 .bm-field-in{color:#EDEEF0 !important;font-size:15.5px;position:relative;z-index:1;width:100%;background:transparent;border:0;outline:0}
.bm.bm-v2 .bm-field-slot .wi-phanim{color:#8A93A0 !important}
.bm.bm-v2 .bm-v2-scan{display:none !important}
.bm.bm-v2 .bm-field-go{
  background:#fff !important;color:#0B1220 !important;border-radius:999px !important;
  padding:0 18px !important;min-height:40px;font:700 14px/1 system-ui !important;
  display:inline-flex;align-items:center;gap:7px;flex:none;border:0;cursor:pointer;
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s;
}
.bm.bm-v2 .bm-field-go:hover{background:#fff !important;color:#0B1220 !important;
  box-shadow:0 12px 28px -16px rgba(255,255,255,.45)}
.bm.bm-v2 .bm-field-go:active{transform:scale(.978)}
.bm.bm-v2 .bm-field-go svg{stroke:currentColor;width:14px;height:14px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bm.bm-v2 .bm-doors{margin:22px auto 0 !important;justify-content:center;gap:10px 28px !important;flex-wrap:wrap;display:flex}
.bm.bm-v2 .bm-door{background:none;border:0;box-shadow:none;padding:0;min-height:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;color:#A6ADB8}
.bm.bm-v2 .bm-door b{color:#E8ECF0 !important;font:500 13.5px/1.2 system-ui !important}
.bm.bm-v2 .bm-door:hover b{color:#fff !important}
.bm.bm-v2 .bm-door-i{
  background:transparent !important;color:#14B8A6 !important;
  box-shadow:none;border:0 !important;border-radius:0;width:22px;height:22px;
}
.bm.bm-v2 .bm-door-i svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bm.bm-v2 .bm-fine{margin:20px 0 0;text-align:center;color:#8A919C;
  font:400 13px/1.5 system-ui,-apple-system,sans-serif}
.bm.bm-v2 .bm-share-tip{color:#A6ADB8 !important;text-align:center;margin:10px auto 0;max-width:42ch}
/* “Get it where you shop” — BrandMoment keeps the inset card; MarketingHero is flush. */
.bm.bm-v2 .bm-shop{
  margin:22px auto 0;max-width:420px;width:100%;text-align:left;
  padding:18px 16px 16px;border-radius:18px;
  background:
    repeating-linear-gradient(-32deg, transparent, transparent 11px, rgba(14,26,43,.035) 11px, rgba(14,26,43,.035) 12px),
    #EEF1F5;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 36px -28px rgba(0,0,0,.55);
}
/* Desktop MarketingHero: flush panel beside the phone — generic device glyphs, not brand marks. */
.mkh .bm-shop{
  margin:0;max-width:248px;width:248px;flex:none;text-align:left;
  padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;
  animation:none;
}
.bm.bm-v2 .bm-shop-k{
  margin:0 0 12px;text-align:center;
  font:700 11px/1.2 system-ui,-apple-system,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:#3D4654;
}
.mkh .bm-shop-k{
  margin:0 0 10px;text-align:left;
  font:700 11px/1.2 system-ui,-apple-system,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mkh-mut);
}
.bm.bm-v2 .bm-shop-list,
.mkh .bm-shop-list{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.bm.bm-v2 .bm-shop-a,
.mkh .bm-shop-a{
  display:flex;align-items:center;gap:12px;padding:11px 14px 11px 12px;
  border-radius:14px;background:#fff;text-decoration:none;color:#0E1A2B;
  /* Accent bar from the mock — inset so it tracks the card radius cleanly. */
  box-shadow:
    inset 4px 0 0 var(--shop-accent, #1D4ED8),
    0 1px 2px rgba(14,26,43,.06),
    0 10px 22px -16px rgba(14,26,43,.35);
  transition:transform .16s ease, box-shadow .16s ease;
}
.mkh .bm-shop-a{
  background:var(--mkh-surface);border:1px solid var(--mkh-hair);
  box-shadow:inset 4px 0 0 var(--shop-accent, #1D4ED8);
}
.bm.bm-v2 .bm-shop-a:hover,
.mkh .bm-shop-a:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 4px 0 0 var(--shop-accent, #1D4ED8),
    0 2px 4px rgba(14,26,43,.08),
    0 14px 26px -14px rgba(14,26,43,.4);
}
.mkh .bm-shop-a:hover{
  border-color:var(--mkh-grn);
  box-shadow:inset 4px 0 0 var(--shop-accent, #1D4ED8),0 2px 4px rgba(14,26,43,.06);
}
.bm.bm-v2 .bm-shop-a:focus-visible,
.mkh .bm-shop-a:focus-visible{outline:3px solid #14B8A6;outline-offset:2px}
.mkh .bm-shop-a:focus-visible{outline-color:var(--mkh-grn)}
.bm.bm-v2 .bm-shop-a.ios,.mkh .bm-shop-a.ios{--shop-accent:#1D4ED8;--shop-tone:#1D4ED8}
.bm.bm-v2 .bm-shop-a.android,.mkh .bm-shop-a.android{--shop-accent:#A16207;--shop-tone:#A16207}
.bm.bm-v2 .bm-shop-a.chrome,.mkh .bm-shop-a.chrome{--shop-accent:#9F1239;--shop-tone:#9F1239}
.bm.bm-v2 .bm-shop-ic,
.mkh .bm-shop-ic{
  flex:none;width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;background:#F7F8FA;
  border:1px solid rgba(14,26,43,.08);
}
.bm.bm-v2 .bm-shop-ic svg,
.mkh .bm-shop-ic svg{width:20px;height:20px;display:block}
.bm.bm-v2 .bm-shop-txt,
.mkh .bm-shop-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bm.bm-v2 .bm-shop-title,
.mkh .bm-shop-title{font:700 15px/1.15 system-ui,-apple-system,sans-serif;letter-spacing:-.02em;color:#0E1A2B}
.bm.bm-v2 .bm-shop-sub,
.mkh .bm-shop-sub{font:600 12.5px/1.25 system-ui,-apple-system,sans-serif;color:var(--shop-tone)}
.bm.bm-v2 .bm-shop-chev,
.mkh .bm-shop-chev{
  flex:none;width:18px;height:18px;color:var(--shop-tone);opacity:.9;
}
.bm.bm-v2 .bm-shop-chev svg,
.mkh .bm-shop-chev svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bm.bm-v2 .bm-shop-foot{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:13px 0 0;font:600 12.5px/1.3 system-ui,-apple-system,sans-serif;color:#3D4654;
}
.mkh .bm-shop-foot{
  display:flex;align-items:center;justify-content:flex-start;gap:7px;
  margin:12px 0 0;font:600 12.5px/1.3 system-ui,-apple-system,sans-serif;color:var(--mkh-mut);
}
.bm.bm-v2 .bm-shop-foot svg,
.mkh .bm-shop-foot svg{width:14px;height:14px;flex:none;stroke:#0B7A45;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mkh .bm-shop-foot svg{stroke:var(--mkh-grn)}
/* Compact rail beside the phone — tighter rows + stroke device glyphs. */
.mkh .bm-shop-a{padding:10px 12px 10px 10px;gap:10px}
.mkh .bm-shop-ic{width:32px;height:32px;background:transparent;border:0}
.mkh .bm-shop-ic svg{
  width:18px;height:18px;fill:none !important;stroke:var(--shop-tone,#1D4ED8);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.mkh .bm-shop-ic svg *{fill:none !important;stroke:inherit}
.mkh .bm-shop-title{font-size:14px}
.mkh .bm-shop-sub{font-size:11.5px}
.mkh .bm-shop-foot{font-size:12px}
.bm.bm-v2 .bm-platforms{display:none !important}
.bm.bm-v2 .bm-art,.bm.bm-v2 .bm-get,.bm.bm-v2 .bm-landing-grid{display:none !important}
/* Sticky header stays a sibling of the hero — never nest sticky inside a short wrapper. */
.rd-home-chrome-hero{
  background:transparent;
  border-radius:0;
  margin:0;
  box-shadow:none;
}
@media (max-width:720px){
  .bm.bm-v2{padding:28px 16px 24px !important;border-radius:18px !important;width:calc(100% - 24px);max-width:none}
  .bm.bm-v2 .bm-field{padding:5px 5px 5px 14px !important;border-radius:999px !important}
  .bm.bm-v2 .bm-doors{gap:10px 16px !important}
  .bm.bm-v2 .bm-shop{margin-top:18px;padding:14px 12px 12px;border-radius:16px}
  .bm.bm-v2 .bm-shop-a{padding:10px 12px 10px 10px;gap:10px}
  .bm.bm-v2 .bm-shop-title{font-size:14.5px}
}
.bm-v2-carousel-wrap{position:relative;margin:10px auto 0;padding:14px 0 8px;
  width:calc(100% - 80px);max-width:1640px;
  border-top:1px dashed rgba(20,26,43,.12)}
.bm-v2-rail-lab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 2px 10px;padding:0 2px}
.bm-v2-rail-lab .bm-v2-rail-k{font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:#0E7C74}
.bm-v2-rail-lab .bm-v2-rail-s{font:600 12.5px/1.3 system-ui;color:#5A6570}
.bm.bm-v2 .bm-v2-carousel{position:relative;margin:22px -4px 8px;padding:0 0 18px}
.bm-v2-dots{display:flex;justify-content:center;align-items:center;gap:6px;margin:2px 0 4px;padding:0}
.bm-v2-dots button{width:18px;height:7px;border-radius:4px;border:0;padding:0;
  background:#C9D3DE;cursor:pointer;transform:scaleX(.39);transform-origin:center;
  transition:transform .2s cubic-bezier(.16,1,.3,1),background .2s,opacity .2s}
.bm-v2-dots button.on{background:#14B8A6;transform:scaleX(1)}
.bm-v2-dots button:focus-visible{outline:2px solid #14B8A6;outline-offset:2px}
.bm.bm-v2 .bm-v2-rail,.bm-v2-carousel-wrap .bm-v2-rail{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding:4px 2px 8px;scrollbar-width:none}
.bm.bm-v2 .bm-v2-rail::-webkit-scrollbar,.bm-v2-carousel-wrap .bm-v2-rail::-webkit-scrollbar{display:none}
/* Compact: ~2 tickets + peek so All Deals clears the fold. */
.bm.bm-v2 .bm-vc,.bm-v2-carousel-wrap .bm-vc{
  flex:0 0 calc((100% - 24px) / 2.35);scroll-snap-align:start;
  position:relative;
  background:#fff;border-radius:14px;padding:12px;text-align:left;
  border:1px solid rgba(20,26,43,.08);
  box-shadow:0 6px 16px -14px rgba(20,36,64,.35);
  display:flex;flex-direction:column;align-items:stretch;min-width:0;cursor:pointer;
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s,border-color .18s}
.bm.bm-v2 .bm-vc:hover,.bm-v2-carousel-wrap .bm-vc:hover{transform:translateY(-2px);border-color:rgba(13,148,136,.35);
  box-shadow:0 12px 22px -14px rgba(20,36,64,.4)}
.bm.bm-v2 .bm-vc:focus-visible,.bm-v2-carousel-wrap .bm-vc:focus-visible{outline:3px solid #14B8A6;outline-offset:3px}
.bm.bm-v2 .bm-vc .vt-vb,.bm-v2-carousel-wrap .bm-vc .vt-vb{align-self:flex-start;margin-bottom:6px;transform:none;font-size:11px;padding:5px 8px 4px}
.bm.bm-v2 .bm-vc-off,.bm-v2-carousel-wrap .bm-vc-off{
  position:absolute;top:10px;right:10px;
  font:800 11px/1 system-ui;letter-spacing:-.01em;color:#0B7C44;
  background:#E4F8EC;border-radius:7px;padding:5px 7px;white-space:nowrap}
.bm.bm-v2 .bm-vc img,.bm-v2-carousel-wrap .bm-vc img{height:64px;width:auto;max-width:100%;object-fit:contain;margin:0 auto 8px;display:block}
.bm.bm-v2 .bm-vc-nm,.bm-v2-carousel-wrap .bm-vc-nm{
  font:600 12.5px/1.28 system-ui;color:#141A21;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.56em;margin-bottom:6px}
.bm.bm-v2 .bm-vc-spark,.bm-v2-carousel-wrap .bm-vc-spark{display:none}
.bm.bm-v2 .bm-vc-pills,.bm-v2-carousel-wrap .bm-vc-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.bm.bm-v2 .bm-vc-pill,.bm-v2-carousel-wrap .bm-vc-pill{background:#F4F6F8;border-radius:8px;padding:6px 5px;min-width:0}
.bm.bm-v2 .bm-vc-pill span,.bm-v2-carousel-wrap .bm-vc-pill span{
  display:block;font:700 8.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;text-transform:uppercase;color:#4A5761;margin-bottom:3px}
.bm.bm-v2 .bm-vc-pill b,.bm-v2-carousel-wrap .bm-vc-pill b{display:block;font:800 12.5px/1 system-ui;letter-spacing:-.02em;color:#141A21;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){
  .bm.bm-v2{width:calc(100% - 24px) !important;padding:16px 16px 0 !important;margin-top:10px !important}
  .bm-v2-carousel-wrap{width:calc(100% - 24px);padding:0 0 8px;margin-top:4px}
  .bm.bm-v2 .bm-v2-carousel{padding:0 32px 14px}
  .bm.bm-v2 .bm-vc,.bm-v2-carousel-wrap .bm-vc{flex-basis:78%}
  .bm.bm-v2 .bm-v2-scan span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bm.bm-v2 .bm-vc,.bm-v2-carousel-wrap .bm-vc{transition:none}
}
/* ── VERIFIED TAG — card anatomy copied from design/mock/build-site.mjs (.tag block,:183-256).
   The shipped card had none of this: no store tab,no punched hole above the image,no notched
   discount tag,no perforation,and the verdict stamp floated over the photo instead of living in
   the stub. The stub IS the idea — a tag ends in a perforated stub,and on a checked product the
   stub prints the verdict. Namespaced vt-* because .hole/.stub/.perf/.pill already exist in this
   stylesheet and collided once before.
   NOT built,and not faked: the swipe gallery and its dots. The mock had per-product image sets
   snapshotted into data/gallery.json; /api/verified-buys carries a single image,and inventing
   extra frames would be synthetic content on a card whose whole claim is real data (§4). */
.vtags{display:grid !important;grid-template-columns:repeat(5,1fr) !important;gap:17px !important;align-items:stretch}
.vt{position:relative;background:linear-gradient(160deg,#f7fafd,#eef3f9);border-radius:18px;padding:24px 16px 0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;text-align:center;height:100%;box-sizing:border-box;
  min-width:0;overflow:hidden;
  box-shadow:0 2px 0 rgba(20,26,33,.09),0 12px 24px -15px rgba(20,26,33,.45);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s}
.vt:hover{transform:translateY(-3px) rotate(-.35deg);
  box-shadow:0 3px 0 rgba(20,26,33,.11),0 20px 34px -17px rgba(20,26,33,.5)}
.vt:focus-visible{outline:3px solid #0061CE;outline-offset:3px}
/* ── SHELF REVEAL — scroll-linked, zero added bytes ──────────────────────────────────────
   The card's own progress through the viewport drives the reveal via the native view()
   timeline: no IntersectionObserver, no scroll listener, no timer, nothing to hydrate —
   the same reasoning that keeps the hero proof rotation CSS-only.
   Guarded twice, and the DEFAULT IS VISIBLE: a card opts in to the animation only where
   the browser has the timeline and the reader has not asked for less motion. An older
   browser, or CSS that fails to load, shows the full shelf rather than a blank grid —
   which matters here because these cards are the page's actual product.
   Animates `translate`, deliberately NOT `transform`: `.vt:hover` owns transform, and an
   animation with fill `both` outranks it in the cascade and would kill the hover lift.
   `entry 2% -> 42%` finishes the card well before it reaches the middle of the screen, so
   nothing the reader is looking at is still fading in. */
@keyframes vt-reveal{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .vtags .vt{animation:vt-reveal linear both;animation-timeline:view();animation-range:entry 2% entry 42%}
  }
}
.vt-face{position:absolute;inset:0;border-radius:18px;z-index:0}
.vt>*:not(.vt-face):not(.vt-store):not(.vt-hole){position:relative;z-index:1}
.vt-hole{position:absolute !important;z-index:4;top:11px;left:50%;transform:translateX(-50%);
  width:32px;height:10px;border-radius:999px;background:#E4E6EB;
  box-shadow:inset 0 1.5px 2px rgba(20,26,33,.34)}
/* white chip so it stays readable over a dark product photo — must beat .vt-im in the stack */
.vt-store{position:absolute !important;z-index:4;left:10px;top:22px;
  font:700 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;
  text-transform:uppercase;color:#3F4852;background:#fff;padding:5px 8px;
  border-radius:6px;border:1px solid #E3E6EA;box-shadow:0 1px 3px rgba(20,26,33,.1);
  max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vt-im{height:108px;width:100%;max-width:100%;min-width:0;overflow:hidden;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;flex:none;
  background:#fff;border-radius:12px;border:1px solid #EEF1F5}
/* Wide Amazon shots (soundbars,multi-packs) must shrink to the card — max-height alone
   left width:auto free to spill into neighboring tickets. */
.vt-im img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;flex:none}
.vt-nm{font:600 13px/1.32 system-ui;color:#141A21;margin-bottom:10px;width:100%;
  height:2.64em;min-height:2.64em;max-height:2.64em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Owner hierarchy 2026-08-25: stamp + ink reason BEFORE now/usual. Mint only on BUY fill. */
.vt-stampblk{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;
  margin:0 0 12px;flex:none;min-height:58px}
.vt-vb{display:inline-flex;align-items:center;justify-content:center;font:900 22px/1 system-ui;
  letter-spacing:.14em;text-transform:uppercase;padding:10px 16px 9px;border-radius:4px;
  transform:rotate(-4deg);position:relative;border:0}
.vt-vb::after{content:"";position:absolute;inset:3px;border:1.5px solid rgba(20,26,33,.28);
  border-radius:2px;pointer-events:none}
.vt-buy{color:#0A3D28;background:#23D17E}
/* mint fill · dark ink ≥4.5:1 */
.vt-wait{color:#141A21;background:#F0A323}
/* amber fill · ink ≥4.5:1 */
.vt-skip{color:#fff;background:#A81F1F}
.vt-fair{color:#fff;background:#3D4654}
.vt-rr{font:600 12px/1.3 system-ui;color:#141A21;margin:0;width:100%;padding:0 6px;box-sizing:border-box;
  min-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center}
.vt-pr{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0 2px;margin:0 0 8px;
  min-height:28px;width:100%;flex:none;font:600 13px/1.2 system-ui;color:#4A5761}
.vt-pr .vt-now{color:#141A21}
.vt-pr .vt-now b{font:800 22px/1 system-ui;letter-spacing:-.03em;color:#141A21}
.vt-pr .vt-usual{font:600 13px/1.2 system-ui;color:#4A5761;text-decoration:none}
/* never strike Usual */
/* Quiet savings — pale ink pill,NOT the retired blue full-width ribbon. */
.vt-save{display:inline-flex;align-items:baseline;gap:0;align-self:center;flex:none;
  margin:0 0 8px;padding:5px 11px;border-radius:999px;background:#EEF1F4;color:#141A21;
  font:650 12px/1 system-ui;letter-spacing:-.01em;white-space:nowrap}
.vt-save-lead{font-weight:800}
.vt-save-sec{font-weight:600;opacity:.78}
.vt-save-sep{opacity:.55;font-weight:600}
.vt-rare{display:block;width:100%;margin:auto 0 14px;padding:10px 8px 0;border-top:1px solid #E8EBEE;
  font:600 11.5px/1.3 system-ui;color:#3F4852;text-align:center;box-sizing:border-box;flex:none}
.vt-rare-off{visibility:hidden;min-height:1.3em}
/* Legacy ticket ribbon / spark kept for brand-moment demos that still reference the classes. */
.vt-pill{display:none}
.vt-perf{display:none}
.vt-stub{display:none}
@media (max-width:1100px){ .vtags{grid-template-columns:repeat(3,1fr) !important} }
@media (max-width:760px){ .vtags{grid-template-columns:repeat(2,1fr) !important;gap:13px !important}
  .vt-im{height:96px} .vt-vb{font-size:18px;padding:8px 12px}
  .vt-pr .vt-now b{font-size:19px} }
/* Hero chart + year stats — the mock's .prf block (build-hero.mjs :62-75). Drawn only when a
   real banked series arrives; otherwise the range bar stands in. */
.bm-pf-prf{min-width:0;color:#0061CE}
.bm-pf-cl{font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;
  text-transform:uppercase;color:#3D4654;margin-bottom:9px}
.bm-pf-chart{width:100%;height:86px;display:block}
.bm-pf-fs{display:flex;gap:8px;margin-top:12px}
.bm-pf-fs .f{flex:1;min-width:0;background:#fff;border:1px solid #E3E6EA;border-radius:9px;
  padding:8px 10px 9px;display:flex;flex-direction:column;gap:3px}
.bm-pf-fs .k{font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em;
  text-transform:uppercase;color:#3D4654}
.bm-pf-fs .v{font:800 15px/1 system-ui;letter-spacing:-.02em;color:#141A21;
  font-variant-numeric:tabular-nums}
@media (max-width:640px){ .bm-pf-fs{gap:6px} .bm-pf-fs .v{font-size:13.5px} }
/* Shelf section header — the mock's .sec pair (build-site.mjs :143-146),verbatim. */
.vb-sec{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:26px 0 14px}
.vb-sec h2{font:800 22px/1 system-ui;letter-spacing:-.028em;color:#141A21;margin:0}
.vb-sec-m{font:600 13px/1 system-ui;color:#4A5761}
.vb-bands{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;align-items:center}
.vb-bands .ad-n{font-weight:700;opacity:.72;margin-left:4px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px}
/* Verified Deals — reuse All Deals .cgrid / .mdc-studio sizing. Extra stamp,savings,research and checked-time slots are reserved so every card in a row is equal height.
   Scoped to .vbsec so All Deals CommunityCard plates are untouched. */
.vbsec.ad-home-grid .cgrid{align-items:stretch}
.vbsec .mdc.mdc-studio.vt-studio{cursor:pointer;border-radius:16px}
.vbsec .vt-studio .mdc-ph img{object-fit:contain;object-position:center;width:auto;height:auto;
  max-width:100%;max-height:100%}
.vbsec .vt-studio .vt-stampblk{
  align-items:flex-start;text-align:left;width:100%;
  min-height:4.6em;height:4.6em;flex:0 0 4.6em;margin:2px 0 0;gap:6px}
.vbsec .vt-studio .vt-vb{font-size:18px;padding:8px 12px 7px;letter-spacing:.12em}
.vbsec .vt-studio .vt-rr{
  text-align:left;white-space:normal;text-overflow:clip;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  height:2.6em;min-height:2.6em;max-height:2.6em;overflow:hidden;padding:0;width:100%}
.vbsec .vt-studio .mdc-floor{margin-top:4px}
.vbsec .vt-studio .vt-save-slot{
  min-height:1.8em;height:1.8em;flex:0 0 1.8em;
  display:flex;align-items:center;justify-content:flex-start;width:100%;margin:0}
.vbsec .vt-studio .vt-save{margin:0;align-self:flex-start}
.vbsec .vt-studio .vt-save-off{visibility:hidden}
.vbsec .vt-studio .vt-rare{
  text-align:left;margin:0;padding:6px 0 0;
  min-height:2.6em;height:2.6em;max-height:2.6em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  width:100%}
.vbsec .vt-studio .vt-checked{
  min-height:1.25em;height:1.25em;flex:0 0 1.25em;margin:0;text-align:left;width:100%}
.vbsec .vt-studio .vt-checked-off{visibility:hidden}
/* Compact horizontal Verified row (owner mock 2026-09-09) */
.vt-compact-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;
  margin:0;padding:0;list-style:none}
.vt-compact{
  display:grid;grid-template-columns:92px minmax(0,1fr);gap:0;align-items:stretch;
  background:#fff;border:1px solid rgba(11,122,69,.12);border-radius:14px;overflow:hidden;
  cursor:pointer;text-align:left;padding:0;font:inherit;color:inherit;
  box-shadow:0 2px 8px -4px rgba(11,80,48,.18);min-height:92px;
  transition:transform .16s ease,box-shadow .16s ease}
.vt-compact:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(11,80,48,.32)}
.vt-compact:focus-visible{outline:2px solid #0f9f5c;outline-offset:2px}
.vt-c-ph{position:relative;background:#fff;min-height:92px}
.vt-c-ph img{width:100%;height:100%;object-fit:contain;display:block;padding:8px;box-sizing:border-box}
.vt-c-off{
  position:absolute;right:0;bottom:0;z-index:2;
  /* --buy-deep, not #0f9f5c: white on #0f9f5c is 3.42. The token exists for this exact case —
     "the green is a background carrying white type" — and lands at 5.41. */
  background:var(--buy-deep);color:#fff;font:800 12px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:-.02em;padding:7px 9px 6px;border-radius:10px 0 0 0;
  box-shadow:0 2px 8px -3px rgba(9,80,48,.45)}
.vt-c-body{padding:10px 12px 10px 10px;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.vt-c-store{font:700 10px/1 system-ui,-apple-system,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:#3f6b55}
.vt-c-title{font:700 13.5px/1.25 system-ui,-apple-system,sans-serif;letter-spacing:-.02em;color:#141a21;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vt-c-pricerow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.vt-c-now{font:800 22px/1 system-ui,-apple-system,sans-serif;letter-spacing:-.04em;color:#e85d04}
/* #8a919c was 3.18 on white. Struck-through text is already hard to read; it does not also get
   to be low-contrast. #6B7280 -> 4.83. */
.vt-c-usual{font:500 13px/1 system-ui,-apple-system,sans-serif;color:#6B7280;text-decoration:line-through}
.vt-c-lowest{
  display:inline-flex;align-self:flex-start;margin-top:2px;padding:3px 8px;border-radius:6px;
  background:var(--buy-deep);color:#fff;font:700 11px/1.2 system-ui,-apple-system,sans-serif;letter-spacing:-.01em}
.vt-c-fairtag{
  display:inline-flex;align-self:flex-start;margin-top:2px;padding:3px 8px;border-radius:6px;
  background:#e8f0fb;color:#0a3f80;font:700 11px/1.2 system-ui,-apple-system,sans-serif;letter-spacing:-.01em;
  min-height:1.2em}
.vt-c-checked{font:500 11px/1.3 system-ui,-apple-system,sans-serif;color:#6e7682;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .vt-compact-grid{grid-template-columns:1fr;gap:10px}
  .vt-compact{grid-template-columns:84px minmax(0,1fr);min-height:84px}
  .vt-c-now{font-size:20px}
  .vb-sec h2{font-size:19px}
  .vbsec .vt-studio .vt-vb{font-size:16px;padding:7px 10px 6px}
}
/* ── CATEGORY BENTO — values copied from design/mock/build-site.mjs,not re-invented ──────
   Recessed: flat pale ground + inset shadow,no lift. Tiles are navigation; the raised tags are
   product. Six grounds,none inside the verdict palette (product invariants §1). */
.cbento{max-width:none;margin:0;padding:0}
.cbento-grid{display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;gap:12px}
.cbento .tile{border:0;text-align:left;font:inherit;color:inherit;
  border-radius:18px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:8px;
  min-height:0;overflow:hidden;box-shadow:inset 0 1px 2px rgba(20,26,33,.1)}
.cbento .tile.w2{grid-column:span 2}
.cbento .tile h3{font:800 17px/1.2 system-ui;letter-spacing:-.022em;margin:0;flex:none;
  min-height:2.4em;display:flex;align-items:flex-end}
.cbento .tile.w2 h3{font-size:20px;min-height:1.2em;align-items:center}
.cbento .tile .c{display:none}
.cbento .tile .ps{flex:none;display:flex;align-items:flex-start;gap:8px;margin:0 -2px;padding:0 20px 0 2px;
  min-width:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;
  scroll-padding-inline-end:20px;
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent)}
.cbento .tile .ps::-webkit-scrollbar{display:none}
.cbento .tile .ps-item{flex:none;width:72px;scroll-snap-align:start;display:flex;flex-direction:column;
  align-items:center;border:0;padding:0;background:none;color:inherit;cursor:pointer;font:inherit}
.cbento .tile.w2 .ps-item{width:76px}
.cbento .tile .ps-im{background:#fff;border-radius:10px;padding:6px;display:flex;align-items:center;
  justify-content:center;box-shadow:0 4px 11px -5px rgba(0,0,0,.3);
  width:72px;height:72px;box-sizing:border-box}
.cbento .tile.w2 .ps-im{width:76px;height:76px}
.cbento .tile .ps-im img{height:100%;width:100%;object-fit:contain}
.cbento .tile .ps-off{display:block;margin-top:5px;height:1.3em;font:800 10px/1.3 system-ui;letter-spacing:-.02em;
  text-align:center;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cbento .tile .go{display:inline-flex;align-items:center;gap:6px;align-self:flex-end;flex:none;
  margin:0;padding:0;border:0;background:none;color:inherit;cursor:pointer;
  font:750 12.5px/1 system-ui}
.cbento .tile .go svg{width:13px;height:13px}
.cbento .t-a,.hcat-tile.t-a{background:#C8E8F0;color:#0A3B48}
.cbento .t-b,.hcat-tile.t-b{background:#D8DBF4;color:#212961}
.cbento .t-c,.hcat-tile.t-c{background:#F3DCCB;color:#57331A}
.cbento .t-d,.hcat-tile.t-d{background:#D0EBD9;color:#104029}
.cbento .t-e,.hcat-tile.t-e{background:#D8DEE8;color:#1B2531}
.cbento .t-f,.hcat-tile.t-f{background:#EBD6E6;color:#4B2043}
/* CATEGORY PANELS -> QUIET PAPER (2026-08-19,owner-directed).
   The six tints above put four different coloured grounds side by side on the landing. That is the
   loudest thing on the page and it competes with the product shots,which are the only place colour
   should be coming from. This does NOT invent a treatment: it reuses the site's own established
   quiet-paper card (.mdc = white + --line hairline + --card-r + --card-sh),so the panels now match
   the deal cards below them instead of fighting them.
   Deliberately ADDITIVE rather than an edit of the t-* rules,because parallel edits are actively landing in
   this component (0f1c6fb,b4fec5a): this diff never touches their lines and reverting is deleting
   this block. Each rule below is declared AFTER the rule it supersedes at equal specificity,so
   ORDER is what wins -- cf. the product invariants note that an identical rule placed earlier is dead. */
.cbento .tile.t-a,.cbento .tile.t-b,.cbento .tile.t-c,.cbento .tile.t-d,.cbento .tile.t-e,.cbento .tile.t-f,.hcat-tile.t-a,.hcat-tile.t-b,.hcat-tile.t-c,.hcat-tile.t-d,.hcat-tile.t-e,.hcat-tile.t-f{
  background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--card-r);box-shadow:var(--card-sh)}
/* The product well was WHITE on a coloured ground. On paper the well vanishes and only its drop
   shadow survives,reading as a smudge under each thumb -- so the well takes the page tone and the
   shadow becomes a hairline. */
.cbento .tile .ps-im{background:var(--bg);box-shadow:none;border:1px solid var(--line)}
/* Inherited ink is too heavy for a caption and left the strip with no hierarchy. */
.cbento .tile .ps-off{color:var(--mute)}
/* Browse inherited the tint's ink and did not read as an action. Brand teal -- NOT a verdict colour
   (Sec.1) -- and --teal-deep because --teal does not clear AA as text on white. */
.cbento .tile .go{color:var(--teal-deep)}
2.71:1 on the #EFEFEF band (landing + verdict layer,desktop and
   phone). Its sibling .see was moved to --mintink in the 2026-08-16 pass; this selector was
   missed,which is the same "fixed three of four rules" shape product invariants keeps recording.
   --coral-deep was tried first and measures 4.42:1 here -- short of 4.5,because this band is
   #EFEFEF rather than white. Matching .see's --mintink instead: same role,same component
   family{color:var(--mintink)}
@media (max-width:1100px){ .cbento-grid{grid-template-columns:repeat(3,1fr)} .cbento .tile.w2{grid-column:span 3} }
@media (max-width:820px){ .cbento-grid{grid-template-columns:repeat(2,1fr)}
  .cbento .tile.w2{grid-column:span 2}
  .cbento .tile h3,.cbento .tile.w2 h3{font-size:16px;min-height:2.4em}
  .cbento .tile .ps-item,.cbento .tile.w2 .ps-item{width:68px}
  .cbento .tile .ps-im,.cbento .tile.w2 .ps-im{width:68px;height:68px} }
/* ── AA fixes found by scripts/check-contrast.mjs ──────────────────────────────────────
   All pre-existing,none introduced by the card work — the sweep simply looked where nothing
   had before. The worst two are the ones that matter most on a verified card: the CTA every
   card carries,and the price the whole "usual vs now" argument rests on. */
.psq2 .hd-see,.psq2 .hd-see *{color:#0C857A !important}
/* CTA        3.74 -> 4.51 */
/* Scoped OFF the logo chip: `.hd-seller *` also hit .hd-slogo,the Amazon "a" badge,which sits
   on a dark ground — my grey took it from legible to 3.92:1. The sweep caught my own overreach. */
.psq2 .hd-seller{color:#6A7686 !important}
/* seller     3.65 -> 4.62 */
.psq2 .hd-seller .hd-slogo,.psq2 .hd-slogo{color:#fff !important}
/* logo chip  3.92 -> 17.9  */
/* The phone tab bar is .mtab > .mtab-i,not .mh-tab — read off the DOM after the first guess
   missed. Labels are 10px,so AA wants 4.5:1 and they were shipping at 3.18. */
.mtab .mtab-i,.mtab .mtab-i span{color:#717780 !important}
/* phone nav  3.18 -> 4.51 */
.mtab .mtab-i.on,.mtab .mtab-i.on span,.mtab .mtab-i[aria-current] span{color:#0E7C5A !important}
.psq2 .usual s,.psq2 .pr s,.psq2 s{color:#6E7781 !important}
/* struck     2.47 -> 4.55 */
/* This is the rule that actually paints EVERY active tab — it carries !important,so the six
   per-tab accent colours below it never apply. Worth knowing before editing those and finding
   nothing changes; it cost me two rounds here.
   The old comment read "4.49 -> 4.62",measured against the STRIP. But an active tab paints its
   own tinted chip,and the label sits on THAT: rgb(212,232,230),where #0E6B64 is 4.99:1 at 13px.
   #0A524C is ~7:1 on the chip,same hue. */
.sf-tab.on,.sf-tab[aria-selected="true"]{color:#0A524C !important}
.bm-cta-sub{color:var(--teal-ink) !important;opacity:1 !important}
/* hero sub   3.46 -> 5.81 */

.psq2 .hd-rare{margin-top:10px;padding-top:10px}
.vbsec .psq2 .hd-rare .hd-rare-n{font-size:12.5px;color:#475569;font-weight:600}
.vt-checked{display:block;margin-top:4px;font-size:11px;line-height:1.3;color:var(--ink3);font-variant-numeric:tabular-nums}
.vbsec .psq2 .hd-see{margin-top:auto;padding-top:10px;font-size:13px;font-weight:800;color:#0D9488;display:inline-flex;align-items:center;gap:4px}
.vbsec .psq2:hover .hd-see{color:#0F766E}
.vb-skel .vb-skel-card{pointer-events:none;cursor:default}
.vb-skel .im,.vb-skel .nm,.vb-skel .pr,.vb-skel .hd-rare,.vb-skel .mdc-ph,.vb-skel .mdc-store,.vb-skel .mdc-name,.vb-skel .mdc-floor,.vb-skel .vt-stampblk,.vb-skel .vt-save-slot,.vb-skel .vt-rare,.vb-skel .vt-checked{background:linear-gradient(90deg,#F1F5F9,#fff,#F1F5F9);background-size:200% 100%;animation:vbShim 1.2s linear infinite;border-radius:8px}
.vb-skel .nm{height:36px;margin-bottom:8px}
.vb-skel .pr{height:22px;margin-bottom:8px}
.vb-skel .hd-rare{height:14px;border:0;margin-top:8px}
  @keyframes vbShim{0%{background-position:200% 0}100%{background-position:-200% 0}}
  @media(prefers-reduced-motion:reduce){.vb-skel .im,.vb-skel .nm,.vb-skel .pr,.vb-skel .hd-rare,
    .vb-skel .mdc-ph,.vb-skel .mdc-store,.vb-skel .mdc-name,.vb-skel .mdc-floor,
    .vb-skel .vt-stampblk,.vb-skel .vt-save-slot,.vb-skel .vt-rare,.vb-skel .vt-checked{animation:none}}
.vb-empty{margin:8px 0 4px;padding:22px 18px;border:1px dashed #D9E2EC;border-radius:14px;background:#F8FAFC;color:#64748B;font-size:14px;font-weight:600;line-height:1.45}
.vb-sec-head{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.vb-sec-head h2{margin:0}
.vb-eye{margin:0;max-width:62ch;font:500 13px/1.45 system-ui,-apple-system,sans-serif;color:#5F6872}
.vb-eye b{font-weight:700;color:#374151}
.vb-filt{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 14px;padding:2px 0 4px;-webkit-overflow-scrolling:touch}
.vb-filt::-webkit-scrollbar{display:none}
.vb-filt-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;
  border:1px solid #E5E7EB;border-radius:980px;background:#fff;color:#1F2937;
  font:600 13px/1 system-ui,-apple-system,sans-serif;letter-spacing:-.012em;cursor:pointer;white-space:nowrap}
/* 2.54 on white — the lowest-contrast text in the sweep. #6B7280 -> 4.83. */
.vb-filt-chip i{font-style:normal;font-weight:600;color:#6B7280;font-variant-numeric:tabular-nums}
.vb-filt-chip.on{background:#111827;border-color:#111827;color:#fff}
.vb-filt-chip.on i{color:rgba(255,255,255,.7)}
.vb-filt-clear{border:0;background:none;padding:0;font:inherit;font-weight:700;color:#0B57D0;cursor:pointer;text-decoration:underline}
.vb-count{font:600 12px/1.2 system-ui,sans-serif;color:#0F766E;letter-spacing:.02em}
.vb-paste-nudge{margin:14px 0 0;padding:14px 16px;border-radius:12px;background:#F0FDFA;border:1px solid rgba(20,184,166,.22);
    font:600 13px/1.45 system-ui,sans-serif;color:#115E59}
.vb-paste-nudge b{font-weight:800}
.vb-trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:18px 0 4px;padding:14px 16px;border-radius:14px;background:#0E1A2B;color:rgba(238,242,248,.82);font-size:13px;font-weight:600;line-height:1.4}
.vb-trust-ico{width:18px;height:18px;flex:none;stroke:#14B8A6;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vb-trust-a{margin-left:auto;color:#5EEAD4;font-weight:800;text-decoration:none;white-space:nowrap}
.vb-trust-a:hover{text-decoration:underline}
  @media(max-width:640px){.vb-trust-a{margin-left:0;flex-basis:100%}}
  /* Mobile Verified — horizontal cards so rarity + price sit ABOVE the fold (10/10 bar). */
  @media(max-width:860px){
    .vbsec{padding:0 12px 8px}
    .vbsec .hdrib{margin-bottom:10px;padding:10px 12px;border-radius:12px;font-size:12.5px}
    .vbsec .hdgrid{grid-template-columns:1fr !important;gap:8px !important}
    .vbsec .psq2{
      display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto auto auto auto;
      column-gap:12px;row-gap:0;padding:10px;border-radius:14px;align-items:start;
    }
    .vbsec .psq2 .pstamp{top:8px;left:8px;font-size:10px;padding:3px 6px;transform:rotate(-6deg)}
    .vbsec .psq2 .pstamp small{font-size:5.5px}
    .vbsec .psq2 .im{grid-column:1;grid-row:1 / span 5;width:88px;height:88px;margin:0;border-radius:10px;border:1px solid #EEF1F5}
    .vbsec .psq2 .nm{grid-column:2;min-height:0;max-height:34px;font-size:12.5px;margin:0 0 3px;-webkit-line-clamp:2}
    .vbsec .psq2 .hd-seller{grid-column:2;margin:0 0 4px;font-size:10.5px}
    .vbsec .psq2 .pr{grid-column:2;margin:0 0 2px}
    .vbsec .psq2 .pr .now{font-size:17px}
    .vbsec .psq2 .pr .usual{font-size:11px}
    .vbsec .psq2 .pr .hd-off{font-size:11px;padding:2px 6px}
    .vbsec .psq2 .hd-rare{grid-column:2;margin-top:5px;padding-top:5px}
    .vbsec .psq2 .hd-rare .hd-rare-n{font-size:12px;color:#334155;font-weight:700}
    .vbsec .psq2 .hd-rare.t0 .hd-rare-t{font-size:9px}
    .vbsec .psq2 .hd-see{grid-column:2;padding-top:5px;font-size:12px}
    .vbsec .vb-trust{margin-top:12px;padding:12px 12px;font-size:12px;border-radius:12px}
    .vb-skel .vb-skel-card{min-height:88px}
    .vb-skel .im{width:88px;height:88px}
  }
.hdeck2 .psq2 .nm{font-size:14px;font-weight:600;line-height:1.35;min-height:38px;max-height:38px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#26313F;margin-bottom:8px}
.hdeck2 .hd-seller{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#7A879A;margin-bottom:8px}
.hdeck2 .hd-seller .hd-slogo{width:15px;height:15px;border-radius:4px;background:#0E1626;color:#FF9900;font-weight:900;font-size:10px;display:flex;align-items:center;justify-content:center;line-height:1}
.hdeck2 .psq2 .pr{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 7px}
.hdeck2 .psq2 .pr .now{font-size:18px;font-weight:800;color:#0E1A2B;line-height:1.2}
.hdeck2 .psq2 .pr .usual{display:inline-flex;align-items:baseline;gap:4px;font-size:12px;color:#6b7788;font-weight:600;line-height:1.2}
.hdeck2 .psq2 .pr .usual s{font-size:12px;color:#9AA6B4;font-weight:500;line-height:1.2}
.hdeck2 .psq2 .pr .hd-off{margin-left:auto;font-size:11px;font-weight:800;color:#12B26A;background:rgba(18,178,106,.13);padding:2px 7px;border-radius:7px;display:inline-flex;align-items:baseline;gap:0;white-space:nowrap}
.hdeck2 .psq2 .pr .hd-off.off-c{color:#E0402E;background:rgba(224,64,46,.11)}
/* Rule of 100: lead figure is bold; the secondary stays visible but quieter. */
  .hdeck2 .psq2 .pr .hd-off .hd-off-lead{font-weight:900}
.hdeck2 .psq2 .pr .hd-off .hd-off-sec{font-weight:600;opacity:.78}
.hdeck2 .psq2 .pr .hd-off .hd-off-sep{opacity:.55;font-weight:600}
.hdeck2 .psq2 .hd-rare{margin-top:8px;padding-top:8px;border-top:1px solid #F0F3F6}
.hdeck2 .psq2 .hd-rare .hd-rare-n{font-size:10.5px;color:#7A879A;font-weight:600;line-height:1.3}
.hdeck2 .psq2 .hd-rare .hd-rare-n b{color:#0E1A2B;font-weight:800}
.hdeck2 .psq2 .hd-rare.t0 .hd-rare-t{display:inline-block;font:700 9.5px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:#0E1A2B;border-radius:5px;padding:3px 6px;white-space:nowrap}
  @media(max-width:640px){.hdeck2 .psq2 .hd-rare.t0 .hd-rare-t{font-size:9px;letter-spacing:.05em;padding:3px 5px}}
/* Verified shelf wins over generic .hdeck2 ink prices — teal NOW is the brand signal. */
  .hdeck2.vbsec .psq2 .pr .now{color:#0E1A2B;font-size:20px;font-weight:800;font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:-.03em}
.hdeck2.vbsec .psq2 .hd-rare .hd-rare-n{color:#475569;font-weight:700;font-size:12.5px}
.hdeck2.vbsec .psq2 .hd-see{color:#0D9488}
  @media(max-width:860px){.hdeck2.vbsec .psq2 .pr .now{font-size:17px}}
.hd-more{display:block;margin:18px auto 0;background:#fff;border:1.5px solid #E7EBF0;border-radius:12px;font-weight:800;font-size:13.5px;color:#0E1A2B;padding:12px 30px;cursor:pointer}
.hd-more:hover{border-color:#0E1A2B;background:#F7F8FA}
.hd-more .hd-more-n{color:#6B7686;font-weight:600}
  @media(max-width:640px){.hdgrid{grid-template-columns:1fr 1fr;gap:14px}.hdrib{font-size:13px;padding:11px 14px;gap:8px}.hdrib .hdrib-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hdrib .hdrib-sub{display:none}.hd-more{padding:11px 24px;font-size:13px}.hdeck2 .psq2 .im{height:130px}}
.rd-search{flex:1;min-width:0;display:flex;justify-content:center}
.rd-topbar .sf-search{width:100%;max-width:860px}
.rd-topbar .sf-sbox{max-width:760px}
.rd-search .sf-top{width:100%}
.rd-you{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;cursor:pointer;padding:0}
.rd-you svg{width:22px;height:22px;stroke:#EEF2F8;fill:none;stroke-width:2}
.rd-herowrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-gutter)}
/* All Deals (+ other storefront shelves in .rd-herowrap) use the wide column so side gutters
     match the sticky header instead of leaving empty bands outside a 1280px island. */
  .rd-herowrap.p-all,.rd-herowrap.p-verified,.rd-herowrap.p-deepest,.rd-herowrap.p-stores,.rd-herowrap.p-nonamazon,.rd-herowrap.p-coupons,/* p-verified-browse is the CATEGORY BENTO's wrapper — a separate class from p-verified,so it
     was missing from this list and sat at --page-max (1280 → 1200 inner) while the hero and the
     shelf either side of it ran to 1640. Measured at 1920: hero 1640,bento 1200,shelf 1640. */
  .rd-herowrap.p-verified-browse,/* Biggest markdowns uses .sf-rail-v,not .rd-herowrap,and it was still on --page-max: its
     content ran 80..1360 where every other page runs 40..1400. Same column for every
     destination — measured,not assumed. */
  .sf-rail-v.sf-page{
    max-width:var(--page-max-wide);
  }
  @media(max-width:640px){.rd-topbar{padding:10px 16px;gap:10px}.rd-herowrap{padding:0 14px;margin-top:0}}
/* Compact sticky bar shares the dark ink chrome (do NOT flatten tab colors back to navy/mint). */
  .sf-stick{background:linear-gradient(135deg,#071018 0%,#0E1A2B 55%,#0a1f18 100%);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 10px 28px -18px rgba(0,0,0,.55)}
.sf-stick-wm{color:#EEF2F8}
.sf-stick-wm span{color:#23D17E}
.sf-stick-wm .dc{color:rgba(238,242,248,.55)}
.sf-stick-burger span{background:#EEF2F8}
/* ===== redesign 5-hero deck (ported from the approved mock) ===== */
  .hdeck{--hd-buy:#0F9D57;--hd-teal:#0EA5A5;--hd-mint:#24D17E;--hd-ink:#0E1A2B;--hd-ink2:#48546A;--hd-line:#e6ebf2;--hd-serif:'Fraunces',Georgia,serif;--hd-mono:'JetBrains Mono',ui-monospace,monospace;margin-top:18px}
.hdeck .hcar{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.hdeck .hcar::-webkit-scrollbar{display:none}
.hdeck .hslide{flex:0 0 calc(33.333% - 11px);scroll-snap-align:start;border-radius:20px;padding:20px 20px 18px;color:#fff;min-height:436px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.hdeck .hslide.verdict{background:linear-gradient(150deg,#14b87e,#0b7d63 74%)}
.hdeck .hslide.research{background:linear-gradient(150deg,#ff8a5c,#e8461b)}
.hdeck .hslide.coupon{background:linear-gradient(150deg,#17c0a8,#0e8f8f)}
.hdeck .hslide.scan{background:linear-gradient(150deg,#5b7bff,#2338c8);cursor:pointer}
.hdeck .hslide.what{background:radial-gradient(560px 300px at 18% -4%,rgba(36,209,126,.16),transparent 58%),linear-gradient(158deg,#1a3247,#0a1420 78%)}
.hdeck .hslide::before{content:"";position:absolute;inset:0;background:radial-gradient(360px 240px at 92% 6%,rgba(255,255,255,.13),transparent 60%),radial-gradient(320px 280px at 4% 110%,rgba(0,0,0,.13),transparent 60%)}
.hdeck .hs-in{position:relative;z-index:2;display:flex;flex-direction:column;height:100%}
.hdeck .hs-eyebrow{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);padding:6px 12px;border-radius:999px}
.hdeck .hs-h{font-family:var(--hd-serif);font-weight:600;font-size:clamp(20px,1.9vw,26px);line-height:1.05;letter-spacing:-.02em;margin:12px 0 0}
.hdeck .hs-p{font-size:13px;font-weight:600;opacity:.96;margin:10px 0 0;line-height:1.4}
.hdeck .hs-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--hd-ink);font-weight:800;font-size:13px;padding:11px 18px;border-radius:999px;margin-top:auto;box-shadow:0 10px 22px -10px rgba(0,0,0,.3);cursor:pointer}
.hdeck .wd-h{font-family:var(--hd-serif);font-weight:600;font-size:clamp(24px,2.3vw,32px);line-height:1.02;letter-spacing:-.02em;margin:8px 0 0;text-align:center}
.hdeck .wd-h .g{color:#ff9e86}
.hdeck .wd-sub{font-size:11px;font-weight:600;color:#aeb9c9;text-align:center;margin:9px 0 0}
.hdeck .wd-sub .ar{color:var(--hd-mint);margin:0 3px}
.hdeck .wd-demo{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.hdeck .wd-c{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:9px 12px}
.hdeck .wd-c .k{font:800 8px var(--hd-mono);letter-spacing:.1em;color:#9fb0c4;text-transform:uppercase}
.hdeck .wd-c svg{width:100%;height:24px;margin-top:4px}
.hdeck .wd-c .note{font-size:9px;color:#c3cede;margin-top:3px}
.hdeck .wd-buy{display:flex;align-items:center;gap:11px}
.hdeck .wd-buy .pill{background:var(--hd-buy);color:#fff;font-weight:900;font-size:13px;padding:6px 12px;border-radius:8px;transform:rotate(-4deg)}
.hdeck .wd-buy .tx{flex:1;font-size:10px;color:#dfe6ef;line-height:1.25}
.hdeck .wd-buy .tx b{color:#fff}
.hdeck .wd-buy .pr{font-family:var(--hd-mono);font-weight:800;font-size:16px}
.hdeck .wd-buy .pr s{font-size:10px;color:#9fb0c4;margin-left:4px}
.hdeck .wd-store .row{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;margin-top:5px}
.hdeck .wd-store .row .p{font-family:var(--hd-mono);font-weight:700}
.hdeck .wd-store .row.top{background:rgba(36,209,126,.16);border:1px solid rgba(36,209,126,.3);border-radius:7px;padding:5px 8px}
.hdeck .scanviz{margin-top:16px;flex:1;min-height:150px;position:relative;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);overflow:hidden}
.hdeck .scanviz .bar{position:absolute;top:50%;left:26px;right:26px;transform:translateY(-50%);height:48px;background:repeating-linear-gradient(90deg,#fff 0 4px,transparent 4px 9px);opacity:.92}
.hdeck .scanviz .rt{position:absolute;width:26px;height:26px;border:3px solid #7ef0b0}
.hdeck .scanviz .a{top:14px;left:14px;border-right:0;border-bottom:0;border-radius:9px 0 0 0}
.hdeck .scanviz .b2{top:14px;right:14px;border-left:0;border-bottom:0;border-radius:0 9px 0 0}
.hdeck .scanviz .cc{bottom:14px;left:14px;border-right:0;border-top:0;border-radius:0 0 0 9px}
.hdeck .scanviz .d{bottom:14px;right:14px;border-left:0;border-top:0;border-radius:0 0 9px 0}
.hdeck .scanviz .laser{position:absolute;left:14px;right:14px;height:2px;background:#7ef0b0;box-shadow:0 0 12px #7ef0b0;top:50%;animation:hdscln 2.2s ease-in-out infinite}
.hdeck .scanviz .sc-a,.hdeck .scanviz .sc-b{position:absolute;inset:0}
.hdeck .scanviz .sc-a{animation:hdscfa 5.6s ease-in-out infinite}
.hdeck .scanviz .sc-b{display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;animation:hdscfb 5.6s ease-in-out infinite}
.hdeck .sc-hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:10.5px;font-weight:800;color:#c9f7dd;letter-spacing:.06em;text-transform:uppercase}
.hdeck .sc-card{background:#fff;border-radius:12px;padding:13px 15px;color:var(--hd-ink);box-shadow:0 14px 28px -10px rgba(0,0,0,.45);width:100%;max-width:238px}
.hdeck .sc-verd{display:inline-block;background:var(--hd-buy);color:#fff;font-weight:900;font-size:13px;padding:4px 11px;border-radius:8px;transform:rotate(-3deg)}
.hdeck .sc-nm{font-size:12px;font-weight:700;margin-top:11px;line-height:1.25}
.hdeck .sc-pr{display:flex;align-items:baseline;gap:7px;margin-top:6px}
.hdeck .sc-pr .n{font-family:var(--hd-mono);font-size:21px;font-weight:800}
.hdeck .sc-pr s{font-size:12px;color:#9aa8b8}
.hdeck .sc-note{font-size:10.5px;color:var(--hd-buy);font-weight:800;margin-top:7px}
.hdeck .rbars{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.hdeck .rbar .rt{display:flex;justify-content:space-between;font-size:11.5px;font-weight:800}
.hdeck .rbar .track{height:7px;border-radius:99px;background:rgba(255,255,255,.28);margin-top:5px;overflow:hidden}
.hdeck .rbar .fill{height:100%;border-radius:99px;background:#fff}
.hdeck .listbox{flex:1;margin-top:14px;background:#fff;border-radius:14px;padding:8px 10px 4px;color:var(--hd-ink);box-shadow:0 22px 40px -26px rgba(0,0,0,.6);display:flex;flex-direction:column}
.hdeck .lb-foot{margin-top:auto;padding:11px 0 8px;border-top:1px solid var(--hd-line);text-align:center;font-size:12px;font-weight:800;color:var(--hd-ink2);cursor:pointer}
.hdeck .pgrid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:9px}
.hdeck .psq{position:relative;background:#fff;border:1px solid var(--hd-line);border-radius:12px;padding:9px;display:flex;flex-direction:column;cursor:pointer}
.hdeck .psq .im{height:74px;border-radius:9px;background:#fff;border:1px solid #EEF1F5;display:flex;align-items:center;justify-content:center;padding:7px}
.hdeck .psq .im img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.hdeck .psq .nm{font-size:10.5px;font-weight:650;line-height:1.22;margin-top:7px;height:26px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hdeck .psq .pr{display:flex;align-items:baseline;gap:5px;margin-top:auto;padding-top:6px}
.hdeck .psq .now{font-family:var(--hd-mono);font-size:14px;font-weight:800}
.hdeck .psq s{font-size:9.5px;color:#9aa8b8}
.hdeck .pstamp{position:absolute;top:1px;left:1px;z-index:3;color:#fff;border-radius:8px;padding:4px 8px 4px 7px;transform:rotate(-4deg);font-weight:900;font-size:10.5px;line-height:1;box-shadow:0 5px 12px -4px rgba(0,0,0,.4)}
.hdeck .pstamp small{display:block;font:900 6px var(--hd-mono);letter-spacing:.1em;opacity:.85;margin-bottom:2px}
.hdeck .pstamp.buy{background:var(--hd-buy)}
.hdeck .pstamp.clip{background:var(--hd-teal)}
.hdeck .hdots{display:flex;gap:7px;justify-content:center;margin:14px 0 0}
.hdeck .hdots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:width .2s}
.hdeck .hdots i.on{width:22px;border-radius:4px;background:#fff}
  @keyframes hdscln{0%,100%{top:34%}50%{top:66%}}
  @keyframes hdscfa{0%,42%{opacity:1}52%,92%{opacity:0}100%{opacity:1}}
  @keyframes hdscfb{0%,42%{opacity:0}52%,92%{opacity:1}100%{opacity:0}}
  @media(max-width:640px){.hdeck .hslide{flex:0 0 100%;min-height:auto}.hdeck .hcar{gap:12px}}
  @media(prefers-reduced-motion:reduce){.hdeck .scanviz .sc-a,.hdeck .scanviz .sc-b,.hdeck .scanviz .laser{animation:none}.hdeck .scanviz .sc-b{opacity:0}}
/* Mobile hero carousel: HeroFlow (slide 0) + coral Scan banner (slide 1). Desktop uses display:contents
     so the wrappers vanish from layout and the hero renders EXACTLY as before (desktop untouched). */
  .hcar{display:contents}
.hcar>.hcar-slide{display:contents}
.hcar-slide.hcar-coral{display:none}
.hcar-dots{display:none}
  @media(max-width:640px){
    .hcar{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:16px -14px 0;padding:0 14px}
    .hcar::-webkit-scrollbar{height:0}
    .hcar>.hcar-slide{display:block;flex:0 0 100%;scroll-snap-align:center;min-width:0}
    .hcar-slide.hcar-coral{display:flex;flex-direction:column;justify-content:center;border-radius:22px;padding:28px 24px;background:linear-gradient(160deg,#ff8a5c 0%,#f0491d 100%);color:#fff;box-shadow:0 18px 36px -18px rgba(240,73,29,.6);min-height:210px;cursor:pointer}
    .hcb-h{font-size:31px;font-weight:800;line-height:1.04;letter-spacing:-.035em}
    .hcb-s{font-size:13px;font-weight:700;opacity:.97;margin-top:12px;line-height:1.35;max-width:22ch}
    .hcb-btn{align-self:flex-start;margin-top:18px;background:#fff;color:var(--ink);font-weight:800;font-size:13px;padding:12px 18px;border-radius:999px;box-shadow:0 6px 14px rgba(0,0,0,.16)}
    .hcar-dots{display:flex;gap:6px;justify-content:center;margin-top:12px}
    .hcar-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.32);transition:width .2s}
    .hcar-dots i.on{width:18px;border-radius:4px;background:#fff}
  }
/* "New here?" chip — now on top of the dark hero (no light-strip gap) */
  .sf-newhere-d{display:inline-flex;align-items:center;gap:6px;margin:0 auto 8px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#cdd9ea;border-radius:999px;padding:6px 15px;font-size:12.5px;font-weight:500;cursor:pointer;transition:background .14s,border-color .14s,transform .12s;animation:heroRise .6s 0s cubic-bezier(.2,.7,.2,1) both}
.sf-newhere-d b{color:#fff;font-weight:700}
.sf-newhere-d:hover{background:rgba(36,209,126,.12);border-color:rgba(36,209,126,.5);transform:translateY(-1px)}
.sf-newhere-d:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.sf-heroA-eye{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.24em;font-size:13px;color:#2ED37F;font-weight:700;animation:heroRise .6s .08s cubic-bezier(.2,.7,.2,1) both}
/* Direction C — Amazon-first "live" pill (replaces the mono eyebrow) */
  .sf-livepill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;padding:6px 15px;border-radius:999px;background:rgba(36,209,126,.1);border:1px solid rgba(36,209,126,.3);color:#9fb0c6;margin-top:12px;animation:heroRise .6s .04s cubic-bezier(.2,.7,.2,1) both}
.sf-livepill b{font-weight:700;color:#7ff0ad}
.sf-livepill .dot{width:8px;height:8px;border-radius:50%;background:#24D17E;flex:none;animation:livePulse 2.2s infinite}
.sf-livepill .soon{color:#9fb0c6;font-weight:500}
.sf-livepill .soon-sm{display:none}
  @media(max-width:640px){
    .sf-livepill{font-size:11.5px;padding:6px 13px;margin-top:16px}
    .sf-livepill .soon-lg{display:none}
    .sf-livepill .soon-sm{display:inline}
  }
  @keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(36,209,126,.5)}70%{box-shadow:0 0 0 7px rgba(36,209,126,0)}100%{box-shadow:0 0 0 0 rgba(36,209,126,0)}}
/* Direction C — editorial Fraunces serif headline */
  .sf-heroA-h{font-family:'Fraunces','Iowan Old Style',Georgia,serif;font-weight:600;letter-spacing:-.02em;line-height:1.04;font-size:clamp(38px,5.4vw,60px);color:#fff;margin:6px auto 0;max-width:16ch;text-wrap:balance}
/* text-reveal: words rise + de-blur in sequence (GSAP-SplitText look,pure CSS) */
  .sf-heroA-h .sfw{display:inline-block;opacity:0;filter:blur(9px);transform:translateY(18px);animation:sfwreveal .7s cubic-bezier(.2,.7,.2,1) forwards}
.sf-heroA-h .sfw:nth-child(1){animation-delay:.12s}
.sf-heroA-h .sfw:nth-child(2){animation-delay:.2s}
.sf-heroA-h .sfw:nth-child(3){animation-delay:.28s}
.sf-heroA-h .sfw:nth-child(4){animation-delay:.37s}
.sf-heroA-h .sfw:nth-child(5){animation-delay:.46s}
  @keyframes sfwreveal{to{opacity:1;filter:blur(0);transform:none}}
  @media(prefers-reduced-motion:reduce){.sf-heroA-h .sfw{opacity:1;filter:none;transform:none;animation:none}}
/* SKIP rendered as a glowing green "stamp" (matches the 10/10 design). */
  .sf-skipstamp{display:inline-block;border-radius:13px;padding:0 18px 6px;transform:rotate(-2.5deg);white-space:nowrap;transition:transform .16s ease,opacity .16s ease}
.sf-skipdot{width:.15em;height:.15em;border-radius:50%;background:#06331a;display:inline-block;margin-top:.05em;flex:none}
.sf-heroA-sub{font-size:clamp(13px,1.4vw,15px);line-height:1.4;color:#aeb9c8;margin:6px auto 0;max-width:680px;font-weight:400;animation:heroRise .7s .28s cubic-bezier(.2,.7,.2,1) both}
.sf-heroA-sub b{color:#e8edf4;font-weight:600}
.sf-heroA-sub .sf-sub-arw{color:#2ED37F;font-weight:700;margin:0 5px}
/* verdict chips — colored dot + label + short meaning (BUY green · WAIT amber · FAIR blue · SKIP red) */
  .sf-vchips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px auto 0;animation:heroRise .7s .3s cubic-bezier(.2,.7,.2,1) both}
.sf-newhere-btm{margin-top:16px}
/* ===== Hero "how it works" flow (HeroFlow) — Paste → 12-mo history → Verdict → Compare ===== */
  .sf-grad{background:linear-gradient(100deg,#fff 24%,#ffd9cc 52%,#ff8a6b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 6px 30px rgba(255,90,44,.22))}
.hf-band{width:100%;max-width:1080px;margin:30px auto 4px;padding:22px 24px 26px;border:1px solid rgba(14,26,43,.08);border-radius:22px;box-shadow:0 30px 70px -42px rgba(0,0,0,.75);animation:heroRise .7s .34s cubic-bezier(.2,.7,.2,1) both;
    background:
      radial-gradient(30% 72% at 13% 54%,rgba(232,113,96,.24),transparent 62%),
      radial-gradient(30% 74% at 38% 54%,rgba(64,179,106,.21),transparent 62%),
      radial-gradient(30% 74% at 62% 54%,rgba(0,176,207,.21),transparent 62%),
      radial-gradient(30% 72% at 87% 54%,rgba(150,136,240,.26),transparent 62%),
      linear-gradient(180deg,#f4f7fb,#e8eef6)}
.hf-label{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#6a778a;margin:0 0 18px;text-align:center}
.hf-flow{display:flex;align-items:stretch;justify-content:center;gap:0;width:100%}
.hf-step{flex:1 1 0;min-width:0;max-width:236px;background:linear-gradient(180deg,#0b1220,#070c16);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px 15px;min-height:172px;display:flex;flex-direction:column;gap:11px;text-align:left;transition:border-color .3s,box-shadow .3s,transform .3s}
.hf-step.active{border-color:rgba(255,90,44,.55);box-shadow:0 18px 40px -22px rgba(255,90,44,.4);transform:translateY(-3px)}
.hf-step.done{border-color:rgba(37,211,102,.35)}
.hf-top{display:flex;align-items:center;gap:9px}
.hf-num{width:24px;height:24px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:12px;font-weight:800;background:rgba(255,255,255,.09);color:#8fa1b8;transition:.3s}
.hf-step.active .hf-num{background:#ff5a2c;color:#fff}
.hf-step.done .hf-num{background:#25d366;color:#053}
.hf-ttl{font-size:12.5px;font-weight:800;color:#cdd8e6;line-height:1.2}
.hf-viz{flex:1;display:flex;flex-direction:column;justify-content:center;gap:7px;opacity:.001;transition:opacity .5s}
.hf-step.active .hf-viz,.hf-step.done .hf-viz{opacity:1}
.hf-conn{align-self:center;flex:none;width:clamp(14px,3vw,42px);height:26px;position:relative;display:flex;align-items:center}
.hf-bar{position:absolute;left:0;right:8px;height:2px;background:rgba(14,26,43,.14)}
.hf-bar i{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#e87160,#40b36a);transition:width .5s ease}
.hf-conn.on .hf-bar i{width:100%}
.hf-tip{position:absolute;right:0;color:rgba(14,26,43,.3);font-size:13px;line-height:1;transition:color .3s}
.hf-conn.on .hf-tip{color:#0F9D57}
.hf-linkchip{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;color:#dce5f0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:8px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf-cur{color:#8496ac;animation:hfblink 1s step-end infinite}@keyframes hfblink{50%{opacity:0}}
.hf-sublabel{font-size:11px;color:#8496ac;line-height:1.35}
.hf-sublabel b{color:#eef2f8;font-weight:700}
.hf-svg{width:100%;height:38px;overflow:visible}
.hf-ln{fill:none;stroke:#25d366;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hf-ar{fill:#25d366;opacity:.14}
.hf-spin{width:13px;height:13px;border:2.2px solid rgba(255,255,255,.2);border-top-color:#25d366;border-radius:50%;animation:hfsp .8s linear infinite;flex:none;display:inline-block}@keyframes hfsp{to{transform:rotate(360deg)}}
.hf-status{display:flex;align-items:center;gap:7px;font-size:11px;color:#c3d0e0;font-weight:600}
.hf-stamp{align-self:flex-start;font-weight:800;font-size:19px;padding:4px 12px 6px;border-radius:11px;transform:rotate(-3deg);display:inline-block;background:#25d366;color:#053}
.hf-stamp.pop{animation:hfstamp .5s cubic-bezier(.34,1.7,.5,1)}
  @keyframes hfstamp{0%{transform:rotate(-3deg) scale(.3);opacity:0}60%{transform:rotate(-3deg) scale(1.12)}100%{transform:rotate(-3deg) scale(1)}}
.hf-prices{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:800;font-size:16px;color:#fff}
.hf-prices .hf-was{font-size:11px;color:#8496ac;text-decoration:line-through;margin-left:6px;font-weight:400}
.hf-srow{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:600;padding:4px 8px;border-radius:7px;margin-bottom:4px;opacity:0;transform:translateX(8px);transition:.35s}
.hf-srow.in{opacity:1;transform:none}
.hf-srow.best{background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.4)}
.hf-srow.dim{color:#8496ac}
.hf-stag{font-size:8.5px;font-weight:800;padding:2px 5px;border-radius:4px;margin-right:5px}
.hf-stag.amazon{background:#ff9900;color:#111}
.hf-stag.walmart{background:#0071dc;color:#fff}
.hf-stag.bestbuy{background:#0046be;color:#fff}
.hf-amt{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:800;color:#eef2f8}
.hf-srow.dim .hf-amt{color:#8496ac}
.hf-buylink{margin-top:auto;font-size:11px;font-weight:800;color:#ff9900;padding-top:6px;opacity:0;transition:opacity .35s}
.hf-buylink.in{opacity:1}
/* ===== Multi-colour OKLCH step boxes (owner-approved,via color-expert skill) — white cards,each
     step a perceptually-uniform hue (coral·green·teal·violet at fixed OKLCH L≈.685 C≈.15) with a
     flowing gradient top edge,gel number badge,and per-hue active glow. On the light spectrum band. ===== */
  .hf-s1{--edge:#e87160;--dk:#c94e3e;--hi:#fc8876;--tint:#ffe4dd;--glow:232,113,96;--eg:linear-gradient(90deg,#e87160,#40b36a)}
.hf-s2{--edge:#40b36a;--dk:#009548;--hi:#5cc87f;--tint:#daf5e0;--glow:64,179,106;--eg:linear-gradient(90deg,#40b36a,#00b0cf)}
.hf-s3{--edge:#00b0cf;--dk:#0092b2;--hi:#00c5e3;--tint:#cff5fd;--glow:0,176,207;--eg:linear-gradient(90deg,#00b0cf,#9688f0)}
.hf-s4{--edge:#9688f0;--dk:#7968d4;--hi:#aa9eff;--tint:#ebe9ff;--glow:150,136,240;--eg:linear-gradient(90deg,#9688f0,#7968d4)}
.hf-step{position:relative;overflow:hidden;background:radial-gradient(135% 90% at 15% -8%,#ffffff,var(--tint) 78%);border:1px solid rgba(var(--glow),.34);box-shadow:0 14px 28px -16px rgba(20,30,50,.28),0 2px 6px -2px rgba(20,30,50,.12)}
.hf-step::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--eg)}
.hf-step.active{transform:translateY(-4px);border-color:rgba(var(--glow),.5);box-shadow:0 24px 46px -18px rgba(var(--glow),.55),0 0 0 1px rgba(var(--glow),.5)}
.hf-step.done{border-color:rgba(var(--glow),.4)}
.hf-num,.hf-step.active .hf-num,.hf-step.done .hf-num{background:linear-gradient(145deg,var(--hi),var(--edge) 55%,var(--dk));color:#fff;box-shadow:0 5px 12px -3px rgba(var(--glow),.6),inset 0 1px 0 rgba(255,255,255,.4)}
.hf-ttl{color:#0e1a2b}
.hf-sublabel{color:#5d6675}
.hf-sublabel b{color:#0e1a2b}
.hf-linkchip{color:#3f4b60;background:rgba(255,255,255,.72);border:1px solid rgba(var(--glow),.3)}
.hf-cur{color:#8a93a2}
.hf-status{color:#3f4b60}
.hf-ln{stroke:#009548}
.hf-ar{fill:#009548}
.hf-spin{border-color:rgba(14,26,43,.15);border-top-color:#009548}
.hf-stamp{background:#0F9D57;color:#fff}
.hf-prices{color:#0e1a2b}
.hf-prices .hf-was{color:#8a93a2}
.hf-srow{color:#0e1a2b}
.hf-srow.dim{color:#5d6675}
.hf-srow.best{background:rgba(15,157,87,.1);border-color:rgba(15,157,87,.4)}
.hf-amt{color:#0e1a2b}
.hf-srow.dim .hf-amt{color:#5d6675}
.hf-buylink{color:var(--dk)}
/* ===== Mobile hero: the BUILDING RECEIPT (<HeroFlowMobile/>,rendered at ≤820px instead of the
     horizontal .hf-flow). Stages reveal one-by-one down the card and accumulate with a ✓. Desktop keeps
     the horizontal flow above — untouched. ===== */
  .hfr{width:100%;max-width:430px;margin:20px auto 4px;background:linear-gradient(180deg,rgba(23,32,51,.96),rgba(13,19,32,.98));border:1px solid rgba(255,255,255,.1);border-radius:20px;box-shadow:0 24px 60px -34px #000;overflow:hidden;text-align:left;animation:heroRise .7s .34s cubic-bezier(.2,.7,.2,1) both}
.hfr-head{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px dashed rgba(255,255,255,.12);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8fa1b8}
.hfr-head .live{color:#25d366;display:inline-flex;align-items:center;gap:6px}
.hfr-head .live i{width:6px;height:6px;border-radius:50%;background:#25d366;display:inline-block;animation:hfblip 2s infinite}
  @keyframes hfblip{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hfr-body{padding:3px 16px 6px}
.hfr-line{display:flex;gap:12px;padding:13px 0;border-bottom:1px dashed rgba(255,255,255,.1)}
.hfr-line:last-child{border-bottom:0}
.hfr-ico{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:12px;font-weight:800;background:rgba(255,255,255,.08);color:#7f8ea3;transition:.3s}
.hfr-line.active .hfr-ico{background:#ff5a2c;color:#fff;box-shadow:0 0 0 4px rgba(255,90,44,.15)}
.hfr-line.done .hfr-ico{background:#25d366;color:#053}
.hfr-main{flex:1;min-width:0}
.hfr-t{font-size:13px;font-weight:800;color:#6a778a;transition:.3s;padding-top:4px}
.hfr-line.active .hfr-t,.hfr-line.done .hfr-t{color:#fff}
/* pending stages COLLAPSE (title only) and expand as they build — the receipt grows,no reserved gaps */
  .hfr-detail{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s,margin .4s}
.hfr-line.active .hfr-detail,.hfr-line.show .hfr-detail{max-height:240px;opacity:1;margin-top:9px}
.hfr-foot{padding:9px 16px;border-top:1px dashed rgba(255,255,255,.12);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.05em;color:#6a778a;text-align:center}
.hfr-paste{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:9px 11px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;color:#dce5f0}
.hfr-ph{color:#6a778a}
.hfr-cur{color:#8496ac;animation:hfblink 1s step-end infinite}
.hfr-status{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#c3d0e0;font-weight:600;margin-bottom:6px}
.hfr-spin{width:14px;height:14px;border:2.2px solid rgba(255,255,255,.2);border-top-color:#25d366;border-radius:50%;animation:hfsp .8s linear infinite;flex:none;display:inline-block}
.hfr-ln{fill:none;stroke:#25d366;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hfr-ar{fill:#25d366;opacity:.14}
.hfr-svg{width:100%;height:44px;overflow:visible}
.hfr-prod{display:flex;align-items:center;gap:11px}
.hfr-th{width:40px;height:40px;border-radius:10px;background:#fff;display:grid;place-items:center;font-size:22px;flex:none}
.hfr-nm{font-size:13px;font-weight:650;color:#eef2f8}
.hfr-st{font-size:11px;color:#8496ac;margin-top:1px}
.hfr-verdict{display:flex;align-items:center;gap:11px;margin-top:11px}
.hfr-stamp{font-weight:800;font-size:19px;padding:4px 12px 6px;border-radius:11px;transform:rotate(-3deg);display:inline-block;background:#25d366;color:#053}
.hfr-stamp.pop{animation:hfstamp .5s cubic-bezier(.34,1.7,.5,1)}
.hfr-vtext{font-size:12.5px;color:#c3d0e0;line-height:1.4}
.hfr-vtext b{color:#fff}
.hfr-now{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:800;color:#fff;font-size:15px}
.hfr-was{font-family:'JetBrains Mono',ui-monospace,monospace;color:#8496ac;text-decoration:line-through}
.hfr-buy{width:100%;border:0;border-radius:10px;padding:10px;font-family:inherit;font-weight:800;font-size:12.5px;cursor:pointer;margin-top:11px;color:#111;background:#ff9900}
.hfr-buy.green{color:#053;background:#25d366}
.hfr-srow{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:9px;margin-bottom:5px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);opacity:0;transform:translateX(9px);transition:.4s}
.hfr-srow.in{opacity:1;transform:none}
.hfr-srow.best{border-color:rgba(37,211,102,.5);background:rgba(37,211,102,.1)}
.hfr-s{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}
.hfr-stag{font-size:9px;font-weight:800;padding:3px 6px;border-radius:5px;color:#fff}
.hfr-stag.amazon{background:#ff9900;color:#111}
.hfr-stag.walmart{background:#0071dc}
.hfr-stag.bestbuy{background:#0046be}
.hfr-amt{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:800;font-size:13px;color:#eef2f8}
.hfr-chk{color:#25d366;font-weight:800;font-size:11px}
  @media(prefers-reduced-motion:reduce){.hf-spin,.hf-cur,.hf-band,.hfr,.hfr-spin,.hfr-cur,.hfr-head .live i{animation:none}}
.sf-vchip2{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:700;color:#e8edf4}
.sf-vchip2 i{width:8px;height:8px;border-radius:50%;flex:none}
.sf-vchip2 em{font-style:normal;font-weight:500;color:#9aa8ba;font-size:13px}
.vc2-buy i{background:#22C55E}
.vc2-wait i{background:#E8A317}
.vc2-fair i{background:#3B82F6}
.vc2-skip i{background:#E23B3B}
.sf-heroA .sf-top{max-width:920px;margin:7px auto 0;padding-top:0;padding-bottom:0;animation:heroRise .7s .2s cubic-bezier(.2,.7,.2,1) both}
.sf-trustline{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(9.5px,1.2vw,11px);color:#2ED37F;margin:8px auto 0;font-weight:500;animation:heroRise .7s .42s cubic-bezier(.2,.7,.2,1) both}
.sf-storerow{text-align:center;margin-top:6px;animation:heroRise .7s .48s cubic-bezier(.2,.7,.2,1) both}
/* compact search that rides in the sticky tab bar once the hero scrolls away */
  .sf-stick-search{border-bottom:1px solid var(--line)}
.sf-stick-search .sf-top{padding-top:11px;padding-bottom:11px;max-width:1180px}
.sf-stick-search .sf-sbox{box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 8px 22px rgba(14,26,43,.08);border:1.5px solid color-mix(in srgb, #248BF0 38%, #dfe5ee)}
.sf-stick-search .sf-scanbtn{width:56px}
  @keyframes heroRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* #4 — spatial-UI hero (desktop): layered frosted-glass panels at depth + subtle mouse parallax */
  .spx{position:relative;max-width:1140px;margin:8px auto 20px;height:180px;perspective:1500px;--px:0;--py:0;animation:heroRise .7s .34s cubic-bezier(.2,.7,.2,1) both}
.spx-orb{position:absolute;border-radius:50%;filter:blur(52px);opacity:.42;pointer-events:none;transition:transform .3s ease-out}
.spx-orb.g{width:340px;height:340px;background:#1b7f52;left:3%;top:-48px;transform:translate(calc(var(--px)*-16px),calc(var(--py)*-16px))}
.spx-orb.b{width:300px;height:300px;background:#2f4a9e;right:5%;bottom:-58px;transform:translate(calc(var(--px)*20px),calc(var(--py)*20px))}
/* cursor spotlight — a soft green light tracks the mouse (via --px/--py) and lights the frosted glass */
  .spx-spot{position:absolute;inset:-40px -8vw;z-index:0;pointer-events:none;mix-blend-mode:screen;
    background:radial-gradient(230px 230px at calc(50% + var(--px)*44%) calc(50% + var(--py)*44%),rgba(70,230,160,.16),transparent 68%)}
.spx-stage{position:relative;height:100%;transform-style:preserve-3d;display:flex;align-items:center;justify-content:center;z-index:1}
.spx-glass{position:absolute;border-radius:20px;border:1px solid rgba(255,255,255,.18);
    background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
    -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
    box-shadow:0 30px 60px -22px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.3);
    transition:transform .2s cubic-bezier(.2,.7,.2,1);text-align:left;color:#eef3f9;will-change:transform;overflow:hidden}
/* periodic glass sheen sweep — a light reflection glides across the panels */
  .spx-glass::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;background:linear-gradient(105deg,transparent,rgba(255,255,255,.13),transparent);transform:skewX(-18deg);animation:spxsheen 6.5s ease-in-out infinite}
  @keyframes spxsheen{0%,72%{left:-60%}100%{left:160%}}
.spx-k{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#cdd7e6}
.spx-hist{width:300px;height:152px;padding:14px 16px;transform:translate3d(calc(-262px + var(--px)*6px),calc(12px + var(--py)*5px),-50px) rotateY(calc(20deg + var(--px)*-6deg)) rotateX(calc(5deg + var(--py)*4deg))}
.spx-spark{width:100%;height:56px;display:block;margin:8px 0 6px}
/* self-drawing price line — the year-long line draws itself,then holds */
  .spx-spark-ln{stroke-dasharray:540;stroke-dashoffset:540;animation:spxdraw 2.4s 1.1s ease-out forwards}
  @keyframes spxdraw{to{stroke-dashoffset:0}}
  @media(prefers-reduced-motion:reduce){.spx-spark-ln{animation:none;stroke-dashoffset:0}.spx-glass::after{animation:none;display:none}}
.spx-cap{font-size:11px;color:#9fb0c4}
.spx-cmp{width:240px;padding:14px 15px;transform:translate3d(calc(262px + var(--px)*6px),calc(2px + var(--py)*5px),-40px) rotateY(calc(-20deg + var(--px)*-6deg)) rotateX(calc(5deg + var(--py)*4deg))}
.spx-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:7px 8px;border-radius:9px;margin-top:5px;font-variant-numeric:tabular-nums;color:#eef3f9}
.spx-row.win{background:rgba(36,209,126,.22);border:1px solid rgba(36,209,126,.5);font-weight:800}
.spx-tag{font-size:9px;font-weight:800;padding:2px 6px;border-radius:5px;margin-right:7px;color:#fff}
.spx-tag.amz{background:#ff9900;color:#111}
.spx-tag.wmt{background:#0071dc}
.spx-tag.bb{background:#0a3d91}
.spx-verdict{width:250px;padding:18px;transform:translate3d(calc(var(--px)*13px),calc(var(--py)*9px),64px) rotateY(calc(var(--px)*8deg)) rotateX(calc(var(--py)*-6deg));
    box-shadow:0 46px 84px -26px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.4)}
.spx-stamp{display:inline-block;font-weight:900;font-size:22px;color:#fff;background:#0F9D57;border-radius:12px;padding:6px 15px 8px;transform:rotate(-3deg);box-shadow:0 10px 22px -8px rgba(15,157,87,.7)}
.spx-vr{font-size:12.5px;color:#dbe4f0;margin-top:12px;line-height:1.4}
.spx-vr b{color:#fff}
.spx-vp{display:flex;gap:10px;align-items:baseline;margin-top:12px}
.spx-now{font-weight:850;font-size:26px;color:#fff}
.spx-was{color:#9fb0c4;text-decoration:line-through;font-size:14px}
  @media(prefers-reduced-motion:reduce){.spx{animation:none}.spx-glass,.spx-orb{transition:none}}
  /* MOBILE spatial hero — boxes scaled to fit the phone: the VERDICT sits forward-centre, history +
     cheapest-store peek from behind it (a compact spatial stack; no mouse parallax on touch). */
  @media(max-width:820px){
    .spx{max-width:none;width:100%;height:186px;margin:4px auto 14px;perspective:900px}
    .spx-orb.g{width:300px;height:300px;left:-8%;top:-40px}
    .spx-orb.b{width:240px;height:240px;right:-8%;bottom:-40px}
    /* side panels peek from the TOP corners; the verdict sits forward, front-bottom-centre → far less overlap.
       Y-offsets compacted (−58/−50/+34 → −40/−34/+26) so the cluster fits the shorter stage cleanly. */
    .spx-hist{width:162px;height:114px;padding:11px 12px;transform:translate3d(-86px,-40px,-34px) rotateY(14deg) rotateX(4deg)}
    .spx-hist .spx-spark{height:38px}
    .spx-cmp{width:150px;padding:10px 12px;transform:translate3d(92px,-34px,-32px) rotateY(-14deg) rotateX(4deg)}
    .spx-verdict{width:206px;padding:15px;transform:translate3d(0,26px,46px)}
    .spx-k{font-size:8.5px}
    .spx-stamp{font-size:18px;padding:5px 12px 6px}
    .spx-vr{font-size:11px;margin-top:9px}
    .spx-vp{margin-top:9px}.spx-now{font-size:21px}.spx-was{font-size:12px}
    .spx-row{font-size:11.5px;padding:5px 7px;margin-top:4px}.spx-tag{font-size:8px}
    .spx-cap{font-size:9.5px}
  }
  @media(prefers-reduced-motion:reduce){.sf-newhere-d,.sf-heroA-eye,.sf-heroA-h,.sf-heroA-sub,.sf-vchips,.sf-trustline,.sf-heroA .sf-top,.sf-livepill{animation:none}.sf-livepill .dot{animation:none}}
  @media(max-width:640px){.sf-heroA{padding:12px 14px 12px}.sf-heroA .sf-top{margin-top:10px}.sf-heroA-sub{max-width:40ch}.sf-vchips{gap:8px}.sf-vchip2{padding:7px 12px;font-size:12.5px}.sf-vchip2 em{display:none}
    /* mobile: hero wordmark CENTERED (burger pinned right); compact sticky bar */
    .sf-herohdr{justify-content:center;position:relative;padding:14px 0 12px}
    .sf-hh-burger{position:absolute;right:0;top:50%;transform:translateY(-50%)}}
.sf-ext{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:-.01em;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,24,40,.05);transition:transform .12s,box-shadow .12s,border-color .12s}
.sf-ext svg{width:16px;height:16px;color:var(--buy);flex:0 0 auto}
.sf-ext .ar{color:var(--ink3);transition:transform .12s}
a.sf-ext:hover{transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(16,24,40,.26);border-color:var(--buy-bd)}
a.sf-ext:hover .ar{transform:translateX(3px)}
a.sf-ext:focus-visible{outline:2px solid var(--buy);outline-offset:2px}
.sf-ext-soon{color:var(--ink3);cursor:default;background:transparent;box-shadow:none;border-style:dashed}
.sf-ext-soon svg{color:var(--ink3)}
.sf-ext-soon b{color:var(--ink2);font-weight:700}
.sf-ext-also{display:inline-flex;align-items:center;gap:4px;margin-left:13px;vertical-align:middle;font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink3);text-decoration:none}
.sf-ext-also .ar{transition:transform .12s}
.sf-ext-also:hover{color:var(--ink)}
.sf-ext-also:hover .ar{transform:translateX(2px)}
.sf-ext-also:focus-visible{outline:2px solid var(--buy);outline-offset:2px;border-radius:6px}
  @media(prefers-reduced-motion:reduce){a.sf-ext:hover{transform:none}a.sf-ext:hover .ar{transform:none}}
/* first-run onboarding — reframe + how-to + SKIP demo */
  .sf-newhere{text-align:center;margin:11px 0 2px}
.sf-newhere-btn{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 16px;font-size:12.5px;color:var(--ink2);cursor:pointer;font-weight:500;transition:transform .12s,box-shadow .12s,border-color .12s;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.sf-newhere-btn b{color:var(--ink);font-weight:700}
.sf-newhere-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(16,24,40,.22);border-color:var(--buy-bd)}
.wel-back{position:fixed;inset:0;z-index:1000;background:rgba(15,22,32,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px;animation:welfade .2s ease}
  @keyframes welfade{from{opacity:0}to{opacity:1}}
.wel{position:relative;width:100%;max-width:540px;max-height:92vh;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px 30px 26px;box-shadow:0 30px 80px -20px rgba(16,24,40,.5);animation:welpop .25s cubic-bezier(.2,.9,.3,1.2)}
  @keyframes welpop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.wel-x{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink3);font-size:14px;cursor:pointer;line-height:1}
.wel-x:hover{color:var(--ink);border-color:var(--ink3)}
.wel-eyebrow{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--buy)}
.wel-h{font-family:'Inter',system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;font-size:30px;line-height:1.08;color:var(--ink);margin:8px 0 0}
.wel-sub{font-size:15px;color:var(--ink2);line-height:1.5;margin:9px 0 0}
.wel-sub b{color:var(--ink);font-weight:700}
.wel-steps{margin:20px 0 0;display:flex;flex-direction:column;gap:13px}
.wel-step{display:flex;gap:13px;align-items:flex-start}
.wel-n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--buy-bg);color:var(--buy);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;border:1px solid var(--buy-bd)}
.wel-sc{display:flex;flex-direction:column;gap:1px}
.wel-sc b{font-size:14.5px;color:var(--ink);font-weight:700}
.wel-sc span{font-size:12.5px;color:var(--ink2);line-height:1.45}
.wvb{color:var(--buy);font-weight:800}
.wvw{color:var(--wait);font-weight:800}
.wvs{color:var(--skip);font-weight:800}
.wvf{color:var(--fair);font-weight:800}
.wel-diff{margin:20px 0 0;background:var(--skip-bg);border:1px solid var(--skip-bd);border-radius:14px;padding:15px 16px}
.wel-diff-h{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.wel-eg{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:11px 0;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:11px 13px}
.wel-eg-l{display:flex;align-items:center;gap:9px}
.wel-eg-price s{color:var(--ink3);font-size:13px}
.wel-eg-price b{color:var(--ink);font-size:19px;font-weight:800}
.wel-eg-off{background:#e8f0fe;color:var(--skip);font-weight:800;font-size:11px;padding:2px 8px;border-radius:999px}
.wel-eg-r{font-size:12.5px;color:var(--ink2);line-height:1.4;flex:1;min-width:190px}
.wel-diff-note{font-size:12.5px;color:var(--ink2);line-height:1.45;margin:2px 0 0}
.wel-cta{margin:22px 0 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wel-go{background:var(--buy);color:#fff;border:none;border-radius:12px;padding:13px 22px;font-size:15px;font-weight:700;cursor:pointer;letter-spacing:-.01em;box-shadow:0 6px 18px -6px rgba(31,157,85,.6);transition:transform .12s,box-shadow .12s}
.wel-go:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(31,157,85,.7)}
.wel-link{font-size:13px;color:var(--ink3);text-decoration:none}
.wel-link:hover{color:var(--ink2);text-decoration:underline}
  @media(max-width:560px){.wel{padding:24px 20px 22px}.wel-h{font-size:25px}.wel-sub{font-size:14px}}
  @media(prefers-reduced-motion:reduce){.wel,.wel-back{animation:none}.wel-go:hover,.sf-newhere-btn:hover{transform:none}}
/* proof stats — emphasized numbers,hairline dividers,index link */
  .sf-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin:16px auto 0;font-size:13px;color:var(--ink3);font-weight:600;row-gap:5px}
.sf-trust .s{position:relative;padding:0 14px;white-space:nowrap}
.sf-trust .s+.s::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:13px;background:var(--line)}
.sf-trust b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.sf-trust .num{color:var(--skip)}
.sf-trust-link{display:inline-flex;align-items:center;gap:5px;color:#0a7a55;font-weight:700;text-decoration:none}
.sf-trust-link:hover{text-decoration:underline}
.sf-trust-link .ar{transition:transform .15s}
.sf-trust-link:hover .ar{transform:translateX(3px)}
/* store-status pill — live Amazon + upcoming stores */
  .sf-soon{margin-top:15px;display:inline-flex;align-items:center;gap:9px;
    background:rgba(255,255,255,.66);border:1px solid var(--line);border-radius:999px;padding:4px 13px 4px 4px;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 26px -20px rgba(20,40,60,.3)}
.sf-soon .live{display:inline-flex;align-items:center;gap:6px;background:rgba(31,157,85,.11);color:var(--buy);
    font-weight:800;font-size:11px;letter-spacing:.02em;padding:5px 11px 5px 9px;border-radius:999px;border:1px solid rgba(31,157,85,.24);white-space:nowrap}
.sf-soon .live .d{width:6px;height:6px;border-radius:50%;background:#1f9d55;flex-shrink:0;box-shadow:0 0 0 3px rgba(31,157,85,.2);animation:sfPulse 2.2s ease-in-out infinite}
  @keyframes sfPulse{0%,100%{box-shadow:0 0 0 3px rgba(31,157,85,.22)}50%{box-shadow:0 0 0 6px rgba(31,157,85,0)}}
  @media(prefers-reduced-motion:reduce){.sf-soon .live .d{animation:none}}
.sf-soon .msg{font-size:12px;color:var(--ink3);font-weight:600;white-space:nowrap}
.sf-soon .msg b{color:var(--ink2);font-weight:700}
  @media(max-width:560px){
    .sf-trust{font-size:11.5px}
    .sf-trust .s{padding:0 10px}
    .sf-trust .sf-trust-link{flex-basis:100%;justify-content:center;padding-top:3px}
    .sf-trust .sf-trust-link.s::before{display:none}
    .sf-soon{gap:7px;padding-right:11px}
    .sf-soon .live{font-size:10px;padding:4px 9px 4px 8px}
    .sf-soon .msg{font-size:10.5px}
  }
/* Trending strip — swipeable discovery row */
  .trend{margin:24px 0 8px}
.trend-head{display:flex;align-items:baseline;gap:10px;margin-bottom:13px;flex-wrap:wrap}
.trend-h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(18px,2.2vw,22px);letter-spacing:-.01em;color:var(--ink);margin:0}
.trend-sub{font-size:13px;color:var(--ink3)}
.trend-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.trend-row::-webkit-scrollbar{display:none}
.trend-tile{flex:0 0 auto;width:152px;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;padding:0;text-align:left;font-family:inherit;scroll-snap-align:start;transition:transform .15s,box-shadow .15s;box-shadow:0 12px 26px -24px rgba(13,21,18,.3)}
.trend-tile:hover{transform:translateY(-3px);box-shadow:0 20px 34px -24px rgba(13,21,18,.36)}
.trend-img{position:relative;aspect-ratio:1/0.9;background:linear-gradient(180deg,#fcfdfe,#f5f7fa);display:flex;align-items:center;justify-content:center;padding:14px}
.trend-img img{max-width:100%;max-height:100%;object-fit:contain}
.trend-vb{position:absolute;left:8px;top:8px;font-size:10px;font-weight:800;padding:3px 8px;border-radius:20px;box-shadow:0 3px 10px rgba(13,21,18,.12)}
.trend-vb.buy{background:var(--buy);color:#fff}
.trend-vb.fair{background:#fff;color:var(--fair);border:1px solid #e0e4e9}
.trend-name{font-size:12.5px;font-weight:650;line-height:1.3;color:var(--ink);margin:9px 11px 12px;height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  @media(max-width:560px){.sf-hero{margin:8px auto 4px;padding:12px 12px 6px;text-align:center}}
/* #2 — unified dark search header: match the navy hero (was a light bar) so there's no seam. */
  .sf-stick{position:sticky;top:0;z-index:22;background:rgba(12,22,37,.9);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.09);box-shadow:0 10px 26px -18px rgba(0,0,0,.7)}
.sf-stick.sf-stick-nav{top:67px}
/* sticky top bar (on scroll): logo + search stay pinned */
  .sf-stickbar{display:flex;align-items:center;gap:14px;max-width:1180px;margin:0 auto;padding:8px 40px}
/* Unified navy-chip logo (owner-approved): identical to the landing hero on every light surface. */
  /* clean wordmark (no chip box) on the dark bar — mirrors the hero header */
  .sf-stick-wm{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.045em;color:#fff;white-space:nowrap;cursor:pointer;flex:none;text-decoration:none;line-height:1}
.sf-stick-wm span{color:#23D17E}
.sf-stick-wm .dc{color:rgba(238,242,248,.55)}
.sf-stickbar .sf-stick-search{flex:1;min-width:0;border-bottom:none}
.sf-stickbar .sf-stick-search .sf-top{max-width:none;padding:0}
.sf-stick-burger{display:flex;flex-direction:column;gap:4px;width:22px;padding:6px 0;background:none;border:none;cursor:pointer;flex:none}
.sf-stick-burger span{height:2.5px;width:100%;background:#c3cede;border-radius:2px;display:block}
#nh-deals{scroll-margin-top:150px}
  @media (max-width:640px){ .sf-stick.sf-stick-nav{top:53px} #nh-deals{scroll-margin-top:118px}
    /* mobile sticky bar: search + compact Scan (icon-only). Burger stays in bottom nav. */
    .sf-stickbar{padding:8px 13px;gap:8px} .sf-stick-wm{font-size:15px} .sf-stick-burger{display:none}
    .sf-stickbar .sf-stick-search{flex:1;min-width:0;width:auto}
    .sf-stickbar .sf-stick-search .sf-top,.sf-stickbar .sf-stick-search .sf-search{display:flex;align-items:stretch;gap:8px;width:100%;min-width:0}
    .sf-stickbar .sf-stick-search .sf-sbox{flex:1;min-width:0;width:auto;min-height:42px}
    .sf-stickbar .sf-scanbtn{display:flex;flex:0 0 auto;width:46px;min-width:46px;min-height:42px;padding:0;gap:0;animation:none;box-shadow:none}
    .sf-stickbar .sf-scanbtn .sf-scan-t{display:none}
    .sf-stickbar .sf-scanbtn svg{width:20px;height:20px} }
/* Inline Lucide-style icon base — scales with surrounding text unless a context overrides it */
  svg.ic{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex:0 0 auto}
/* ===== In-house canned Q&A — "Quick answers" accordion (no AI) ===== */
  .qa{max-width:1080px;margin:16px auto 0;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(14,28,52,.04),0 12px 30px -22px rgba(14,28,52,.28);overflow:hidden}
.qa-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);padding:14px 16px 6px}
.qa-h svg.ic{width:15px;height:15px;color:var(--coral)}
.qa-item{border-top:1px solid var(--line)}
.qa-item:first-of-type{border-top:none;margin-top:4px}
.qa-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:none;font:inherit;font-weight:700;font-size:14.5px;color:var(--ink);text-align:left;padding:14px 16px;cursor:pointer;transition:background .14s}
.qa-q:hover{background:var(--mist,rgba(14,28,52,.02))}
.qa-qt{display:flex;align-items:center;gap:10px;min-width:0}
.qa-qt svg.ic{width:16px;height:16px;color:var(--coral);flex:0 0 auto}
.qa-q>svg.ic{width:18px;height:18px;color:var(--ink3);transition:transform .22s ease;flex:0 0 auto}
.qa-item.open .qa-q>svg.ic{transform:rotate(180deg)}
.qa-item.open .qa-q{background:var(--mist,rgba(14,28,52,.02))}
.qa-a{padding:0 16px 16px 42px;font-size:14px;color:var(--ink2);line-height:1.55;animation:qaIn .26s cubic-bezier(.2,.8,.2,1) both}
.qa-a b{color:var(--ink);font-weight:650}
  @keyframes qaIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.qa-a{animation:none}.qa-q>svg.ic{transition:none}}
/* ===== In-house NL smart-search — premium presentation (no AI) ===== */
  .sq{max-width:1140px;padding-top:16px;animation:sqIn .5s cubic-bezier(.2,.8,.2,1) both}
  @keyframes sqIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sq-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sq-back{border:1px solid var(--line);background:var(--card);color:var(--ink2);font:inherit;font-weight:700;font-size:13px;border-radius:10px;padding:8px 14px;cursor:pointer;transition:border-color .14s,color .14s}
.sq-back:hover{border-color:var(--ink3);color:var(--ink)}
.sq-badge{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.02em;color:#0c7a4a;background:#e7f6ee;border:1px solid #bfe6d1;border-radius:999px;padding:5px 11px}
/* the "we read your request" intent panel — the premium moment */
  .sq-read{position:relative;overflow:hidden;background:linear-gradient(135deg,#0e1a2b 0%,#16273e 55%,#1c2f49 100%);border-radius:22px;padding:26px 26px 24px;box-shadow:0 30px 70px -44px rgba(14,26,43,.9);isolation:isolate}
.sq-read::before{content:"";position:absolute;z-index:-1;width:340px;height:340px;border-radius:50%;top:-160px;right:-80px;background:radial-gradient(circle,rgba(255,90,44,.34),transparent 66%);filter:blur(14px)}
.sq-read::after{content:"";position:absolute;z-index:-1;width:300px;height:300px;border-radius:50%;bottom:-170px;left:-60px;background:radial-gradient(circle,rgba(47,211,127,.26),transparent 66%);filter:blur(16px)}
.sq-eye{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.sq-q{color:#fff;font-size:clamp(19px,3vw,26px);font-weight:800;letter-spacing:-.02em;margin:7px 0 16px;line-height:1.2;text-wrap:balance}
.sq-us{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.6);margin-bottom:10px}
.sq-chips{display:flex;flex-wrap:wrap;gap:9px}
.sq-chip{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 14px;backdrop-filter:blur(6px);opacity:0;transform:translateY(8px) scale(.96);animation:sqChip .5s cubic-bezier(.2,.85,.3,1) forwards}
.sq-chip .ic{width:16px;height:16px;flex:0 0 auto;opacity:.95}
  @keyframes sqChip{to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.sq,.sq-chip,.sq-cell{animation:none!important;opacity:1!important;transform:none!important}}
.sq-count{font-size:13.5px;color:var(--ink2);font-weight:600;margin:22px 2px 14px}
.sq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
  @media(max-width:560px){.sq-grid{grid-template-columns:1fr 1fr;gap:12px}}
.sq-cell{opacity:0;transform:translateY(12px);animation:sqCell .5s cubic-bezier(.2,.8,.2,1) forwards}
  @keyframes sqCell{to{opacity:1;transform:none}}
.sq-empty{text-align:center;padding:56px 20px;color:var(--ink2)}
.sq-empty-i{font-size:40px;margin-bottom:12px}
.sq-empty-s{font-size:13.5px;color:var(--ink3);margin-top:4px}
.sq-empty-b{margin-top:18px;border:none;background:var(--coral);color:#fff;font:inherit;font-weight:800;font-size:14px;border-radius:12px;padding:12px 20px;cursor:pointer}
/* Fake Deal Index — inline stats view */
  .fx{max-width:820px;margin:8px auto 40px}
.fx-load{display:flex;align-items:center;gap:12px;color:var(--ink2);font-weight:600;padding:44px 0;justify-content:center}
.fx-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-deep)}
.fx-hero{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:10px}
.fx-pct{font-size:64px;font-weight:900;line-height:1;color:#E23B3B;letter-spacing:-.03em;font-family:'JetBrains Mono',monospace}
.fx-h{font-size:26px;font-weight:800;margin:0;color:var(--ink);letter-spacing:-.02em}
.fx-p{color:var(--ink2);font-size:15.5px;line-height:1.6;max-width:60ch;margin:16px 0 24px}
.fx-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:-8px 0 22px}
.fx-share{appearance:none;border:0;cursor:pointer;font:700 14px/1 system-ui;padding:12px 18px;border-radius:999px;
    background:var(--skipred-deep);color:#fff;box-shadow:0 10px 22px -12px rgba(196,33,33,.55)}
.fx-share:hover{filter:brightness(1.05)}
.fx-note{font-size:13px;font-weight:600;color:var(--ink3)}
.fx-cats{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.fx-cat-top{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px}
.fx-cat-pct{font-family:'JetBrains Mono',monospace;color:var(--skipred-deep);font-weight:800}
.fx-bar{height:10px;border-radius:6px;background:#eef1f6;overflow:hidden}
.fx-bar i{display:block;height:100%;background:linear-gradient(90deg,#F3A9A9,#E23B3B);border-radius:6px;transform-origin:left;animation:fxGrow .8s cubic-bezier(.22,.9,.3,1) both}
.fx-cat:nth-child(2) .fx-bar i{animation-delay:.06s}
.fx-cat:nth-child(3) .fx-bar i{animation-delay:.12s}
.fx-cat:nth-child(4) .fx-bar i{animation-delay:.18s}
.fx-cat:nth-child(5) .fx-bar i{animation-delay:.24s}
.fx-cat:nth-child(6) .fx-bar i{animation-delay:.3s}
.fx-cat:nth-child(n+7) .fx-bar i{animation-delay:.36s}
  @keyframes fxGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @media(prefers-reduced-motion:reduce){.fx-bar i{animation:none}}
.fx-foot{font-size:12.5px;color:var(--ink3);line-height:1.6;border-top:1px solid var(--line);padding-top:14px}
  @media(max-width:560px){.fx-pct{font-size:48px}.fx-h{font-size:20px}}
/* ===== On-device "You" page (account-free) — shared mobile + desktop ===== */
  .youp{max-width:640px;padding-bottom:96px}
.youp-top{display:flex;align-items:center;gap:10px;padding:6px 0 10px}
.youp-back{width:34px;height:34px;border-radius:11px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(14,26,43,.05)}
.youp-ttl{font-size:17px;font-weight:800;letter-spacing:-.02em}
.youp-hero{display:flex;align-items:center;gap:14px;background:linear-gradient(140deg,var(--ink),#16283f);color:#fff;border-radius:20px;padding:18px;box-shadow:0 14px 34px -18px rgba(14,26,43,.6)}
.youp-av{width:52px;height:52px;border-radius:50%;background:linear-gradient(150deg,#2ee88c,var(--buy));display:flex;align-items:center;justify-content:center;font-size:26px;flex:none;box-shadow:0 6px 16px -4px rgba(15,157,87,.5)}
.youp-hi{font-size:16px;font-weight:800;letter-spacing:-.01em}
.youp-sub{font-size:12px;color:#aeb9c9;margin-top:3px;line-height:1.4}
.youp-stats{display:flex;gap:10px;margin:14px 0 2px}
.youp-stat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:15px;padding:14px 8px;text-align:center;box-shadow:0 1px 2px rgba(14,26,43,.05)}
.youp-stat .n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.youp-stat .n.g{color:var(--buy)}
.youp-stat .k{font-size:10.5px;color:var(--ink3);font-weight:600;margin-top:5px;line-height:1.25}
.youp-label{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);padding:20px 2px 8px}
.youp-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:9px;cursor:pointer;box-shadow:0 1px 2px rgba(14,26,43,.05);text-decoration:none;color:var(--ink);font-family:inherit;transition:transform .12s}
.youp-row:active{transform:scale(.99)}
.youp-row .yi{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex:none;letter-spacing:-1px}
.yi-buy{background:var(--buy)}
.yi-blue{background:#2E6BF6}
.yi-ink{background:var(--ink);font-size:12px}
.yi-coral{background:var(--coral,#FF5A2C)}
.yi-amber{background:#E8940C}
.youp-row .yt{flex:1;min-width:0;display:flex;flex-direction:column}
.youp-row .yn{font-size:14px;font-weight:750;letter-spacing:-.01em}
.youp-row .ys{font-size:11.5px;color:var(--ink3);margin-top:2px;line-height:1.3}
.youp-row .ya{color:var(--ink3);font-weight:800;font-size:16px}
.youp-saved{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 0 13px 14px;margin-bottom:9px;box-shadow:0 1px 2px rgba(14,26,43,.05)}
.youp-saved-h{font-size:12.5px;font-weight:800;color:var(--ink2);margin-bottom:10px}
.youp-saved-rail{display:flex;gap:10px;overflow-x:auto;padding-right:14px}
.youp-saved-rail::-webkit-scrollbar{height:0}
.youp-sc{flex:0 0 auto;width:118px;cursor:pointer}
.youp-sc-img{height:82px;border-radius:11px;background:var(--mist,#f5f6fa);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.youp-sc-img img{max-width:82%;max-height:88%;object-fit:contain}
.youp-sc-img span{font-size:30px}
.youp-sc-nm{font-size:11px;font-weight:650;line-height:1.25;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.youp-sc-pr{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:800;margin-top:3px}
.youp-pv{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px 4px;margin-bottom:9px;box-shadow:0 1px 2px rgba(14,26,43,.05)}
.youp-pv-h{font-size:12.5px;font-weight:800;color:var(--ink2);margin-bottom:2px}
.youp-pv-note{font-weight:600;color:var(--ink3);font-size:10.5px}
.youp-pv-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--line);cursor:pointer}
.youp-pv-row:nth-child(2){border-top:none}
.youp-pv-img{width:42px;height:42px;border-radius:9px;background:var(--mist,#f5f6fa);border:1px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.youp-pv-img img{max-width:84%;max-height:84%;object-fit:contain}
.youp-pv-img span{font-size:20px}
.youp-pv-b{flex:1;min-width:0}
.youp-pv-nm{font-size:12.5px;font-weight:650;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.youp-pv-meta{font-size:10.5px;color:var(--ink3);margin-top:2px;font-family:'JetBrains Mono',ui-monospace,monospace}
.youp-v{flex:none;font-size:10.5px;font-weight:900;letter-spacing:.02em;padding:4px 10px;border-radius:999px}
.youp-v.buy{background:var(--buy-bg);color:var(--buy)}
.youp-v.wait{background:var(--wait-bg);color:var(--wait)}
.youp-v.skip{background:var(--skip-bg);color:var(--skip)}
.youp-v.fair{background:var(--fair-bg);color:var(--fair)}
.youp-clear{display:block;width:100%;margin:22px 0 8px;text-align:center;background:var(--alert-tint,#FFECE4);color:var(--alert-2,#e8461b);border:1px solid var(--alert-tint,#FFECE4);border-radius:13px;padding:13px;font-size:13px;font-weight:800;font-family:inherit;cursor:pointer}
.youp-foot{text-align:center;font-size:11px;color:var(--ink3);font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.03em;padding:6px 0 10px}
  @media(min-width:641px){.youp{margin:24px auto} .youp-back{display:none}}
/* Sticky chrome stays dark ink (BrandMoment kit). Per-tab colors live on .sf-tab.t-* — never flatten. */
.sf-stick-wm .dk-wm .w{color:#EEF2F8 !important}
.sf-stick-wm .dk-wm .f{color:#EEF2F8 !important}
.sf-stick-wm .dk-wm .d{color:rgba(238,242,248,.55) !important}
/* === artifact-fidelity pass (match 742aa1ff as-is) === */
.sf{background:var(--bg)}
.rd-topbar{padding:var(--chrome-pad-y) 26px}
/* P3: honor chrome pad token (was hard 14px override) */
.rd-logoimg{height:52px;width:auto;display:block}
.sf-rail-v::before{display:none}
.sf-rail-v{background:transparent}
.hdeck{margin-top:16px}
.hdeck .hcar{align-items:stretch}
.hdeck .hslide{flex:0 0 calc(33.333% - 11px);min-height:452px}
.hdeck .hslide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-repeat:no-repeat;background-image:radial-gradient(2px 2px at 12% 22%,rgba(255,255,255,.9),transparent 60%),radial-gradient(2px 2px at 82% 14%,rgba(255,255,255,.75),transparent 60%),radial-gradient(1.5px 1.5px at 68% 40%,rgba(255,255,255,.8),transparent 60%),radial-gradient(2.5px 2.5px at 26% 74%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1.5px 1.5px at 92% 80%,rgba(255,255,255,.8),transparent 60%),radial-gradient(2px 2px at 46% 92%,rgba(255,255,255,.65),transparent 60%);animation:hdtwinkle 4s ease-in-out infinite}
@keyframes hdtwinkle{0%,100%{opacity:.5}50%{opacity:1}}
.hdeck .hs-h,.hdeck .wd-h{font-family:'Fraunces',Georgia,serif}
/* Scan = clearly-visible dark tile next to the search */
/* the amber scan styling lives on .sf-scanbtn; this used to hard-override it back to navy — the button
   was then the same colour as the header and never read as a distinct action (owner 2026-08-01) */
.rd-topbar .sf-scanbtn{flex:0 0 auto;width:88px;min-width:88px;border-radius:15px;opacity:1}
.rd-topbar .sf-scanbtn svg{stroke:#fff !important}
.rd-topbar .sf-scanbtn .sf-scan-t,.rd-topbar .sf-scanbtn span{color:#fff !important;font-weight:800}
/* ===== MOBILE HOME (artifact 176f1b05) — scoped .mhome / .mnav,shown only <=640px ===== */
.mhome{--mk:#0E1A2B;--dim:#57657a;--slate:#6b7280;--mute:#5f6b7a;--mline:rgba(14,26,43,.08);--mline2:rgba(14,26,43,.13);--mint:#24D17E;--mint2:#12b76a;--mintink:#065f34;--minttint:#E7FBF0;--al:#FF5A2C;--al2:#e8461b;--amb:#E8940C;--amz:#E88A00;--blue:#2E6BF6;background:#fff;padding-bottom:0}
/* bottom clear is body padding for .mtab */
.mhome *{box-sizing:border-box}
.mhome .ah{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 12px}
.mhome .mwm{font-size:23px;font-weight:800;letter-spacing:-.03em;position:relative;line-height:1;display:inline-block;padding-bottom:5px}
.mhome .mwm .w{color:var(--mk)}
.mhome .mwm .f{color:var(--slate)}
.mhome .mwm .d{color:var(--mint2)}
.mhome .mwm svg{position:absolute;left:0;bottom:-1px;width:88px;height:8px}
.mhome .ib{position:relative;width:37px;height:37px;border-radius:50%;background:#fff;border:1px solid var(--mline);box-shadow:0 1px 2px rgba(14,26,43,.05),0 8px 24px rgba(14,26,43,.08);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer}
.mhome .ib .ibb{position:absolute;top:-4px;right:-4px;background:var(--al);color:#fff;font-size:8px;font-weight:900;border-radius:999px;padding:1px 5px}
.mhome .srow{display:flex;gap:10px;margin:0 16px 13px;align-items:stretch}
.mhome .srch{flex:1;display:flex;align-items:center;gap:9px;background:#fff;border:2px solid var(--mint);border-radius:16px;padding:10px 10px 10px 14px;box-shadow:0 6px 18px rgba(36,209,126,.20);color:var(--mute);font-size:14px;font-weight:500;min-width:0}
.mhome .srch svg{width:17px;height:17px;stroke:var(--mint2);fill:none;stroke-width:2.2;flex:0 0 auto}
.mhome .srch input{border:none;outline:none;background:transparent;flex:1;min-width:0;font:inherit;color:var(--mk)}
.mhome .srch .go{margin-left:auto;background:var(--mint);color:#053;font-weight:800;font-size:12px;padding:8px 14px;border-radius:11px;flex:0 0 auto;border:none;cursor:pointer}
.mhome .scanic{flex:0 0 auto;width:52px;border-radius:16px;background:var(--mk);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(14,26,43,.26);cursor:pointer}
.mhome .scanic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.mhome .hero-rail{display:flex;gap:12px;overflow-x:auto;padding:0 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.mhome .hero-rail::-webkit-scrollbar{height:0}
.mhome .banner{flex:0 0 87%;scroll-snap-align:center;border-radius:24px;padding:24px;min-height:238px;position:relative;overflow:hidden;color:#fff;box-shadow:0 12px 34px rgba(14,26,43,.16);display:flex;flex-direction:column;cursor:pointer}
.mhome .banner.brand{background:linear-gradient(158deg,#1c3150 0%,#0E1A2B 74%)}
.mhome .banner.brand::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px 260px at 18% 8%,rgba(36,209,126,.20),transparent 62%),radial-gradient(360px 300px at 96% 120%,rgba(46,107,246,.18),transparent 60%)}
.mhome .banner.brand .bl .wi{color:var(--mint)}
.mhome .banner.coral{background:linear-gradient(160deg,#ff8a5c 0%,#f0491d 100%)}
.mhome .btxt{max-width:54%;position:relative;z-index:2}
.mhome .banner .bl{font-size:23px;font-weight:800;line-height:1.05;letter-spacing:-.035em}
.mhome .banner .p{display:inline-flex;background:#fff;color:var(--mk);font-weight:800;font-size:12px;padding:10px 15px;border-radius:999px;margin-top:14px;width:max-content;box-shadow:0 6px 14px rgba(0,0,0,.14)}
.mhome .motif{position:absolute;right:-2px;bottom:-12px;width:86px;height:138px;background:#fff;border-radius:15px;transform:rotate(6deg);box-shadow:0 16px 32px rgba(0,0,0,.28);padding:11px;color:var(--mk);z-index:1}
.mhome .motif .s{position:absolute;top:-11px;left:3px;background:var(--mk);color:#fff;font-size:9.5px;font-weight:900;padding:4px 8px;border-radius:8px;transform:rotate(-6deg)}
.mhome .motif .mn{font-family:ui-monospace,Menlo,monospace;font-size:20px;font-weight:800;margin-top:13px;letter-spacing:-.02em}
.mhome .motif .mw{font-size:11px;color:var(--mute);text-decoration:line-through;margin-top:2px}
.mhome .dots{display:flex;gap:5px;justify-content:center;margin:11px 0 4px}
.mhome .dots i{width:6px;height:6px;border-radius:50%;background:var(--mline2)}
.mhome .dots i.on{width:16px;border-radius:3px;background:var(--mint)}
.mhome .herosub{text-align:center;font-size:12px;font-weight:600;color:var(--dim);padding:9px 22px 0;line-height:1.45}
.mhome .herosub b{color:var(--mk)}
.mhome .herosub .ar{color:var(--mint2);margin:0 3px;font-weight:800}
.mhome .doblk{margin:12px 16px 2px}
.mhome .doblk .lbl{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:11px;text-align:center}
.mhome .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mhome .step{background:#fff;border:1px solid var(--mline);border-radius:15px;box-shadow:0 1px 2px rgba(14,26,43,.05),0 8px 24px rgba(14,26,43,.08);overflow:hidden}
.mhome .step .ibox{padding:11px 10px 12px;color:#fff}
.mhome .step .ibox .ic{font-size:16px;line-height:1}
.mhome .step .ibox .it{display:block;font-size:12px;font-weight:800;margin-top:8px;letter-spacing:-.02em;line-height:1.15}
.mhome .step .d{font-size:10px;color:var(--dim);margin:8px 10px 11px;line-height:1.3}
/* P4: quiet mid-page promo strips — paper + ink,no neon gradient shout. */
.mhome .only{margin:16px 16px 4px;display:flex;align-items:center;gap:9px;background:#fff;color:var(--mk);border:1px solid var(--mline);border-radius:var(--card-r);box-shadow:var(--card-sh);padding:12px 14px}
.mhome .only .star{color:#0E7C5A;font-size:15px;flex:0 0 auto}
.mhome .only .tx{font-size:12.5px;font-weight:600;line-height:1.35;color:var(--dim)}
.mhome .only .tx b{color:var(--mk);font-weight:800}
.mhome .st{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 9px}
.mhome .st .h{font-family:'DM Sans',system-ui,sans-serif;font-size:var(--fs-sec);font-weight:800;letter-spacing:-.02em}
.mhome .st .v{font-size:11px;font-weight:800;background:#fff;border:1px solid var(--mline);border-radius:999px;padding:6px 12px;cursor:pointer}
.mhome .statstrip{margin:0 16px 2px;display:flex;gap:10px}
.mhome .statstrip .s{flex:1;border-radius:var(--card-r);padding:12px 13px;position:relative;overflow:hidden;color:var(--mk);background:#fff;border:1px solid var(--mline);box-shadow:var(--card-sh)}
.mhome .statstrip .s.g{background:#fff;border-color:var(--buy-bd)}
.mhome .statstrip .s.r{background:#fff;border-color:#f0c4bc}
.mhome .statstrip .s.g .n{color:#0E7C5A}
.mhome .statstrip .s.r .n{color:#D93A2B}
.mhome .statstrip .s .n{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1}
.mhome .statstrip .s .l{font-size:10.5px;font-weight:700;color:var(--dim);margin-top:5px;line-height:1.2}
.mhome .statstrip .s .em{position:absolute;right:6px;bottom:2px;font-size:22px;opacity:.12;color:inherit}
.mhome .hc{display:flex;gap:12px;overflow-x:auto;padding:0 16px 14px}
.mhome .hc::-webkit-scrollbar{height:0}
/* M3 level 1 — matches the app prototype. Border kept: with it removed the card loses
   its edge against a white shelf,and that is a bigger change than this slice intends. */
.mhome .card{flex:0 0 72%;background:#fff;border:1px solid var(--mline);border-radius:var(--card-r);box-shadow:0 1px 2px 0 rgba(0,0,0,.28),0 1px 3px 1px rgba(0,0,0,.14);overflow:hidden;position:relative;cursor:pointer}
.mhome .card .like{position:absolute;top:11px;right:11px;z-index:2;font-size:10px;color:var(--dim);text-align:center}
.mhome .card .like svg{width:18px;height:18px;stroke:var(--mute);fill:none;stroke-width:1.8;display:block;margin:0 auto}
.mhome .card .pic{height:140px;background:#fff;display:flex;align-items:center;justify-content:center;position:relative}
/* Discount badge. Derived from `usual` (our own estimate),never a retailer list price,and
   silent under 5% — a "3% under" badge is noise pretending to be news. The percentage left
   the "Usual $X · ~38% under" line so the same fact is not stated twice. 7.22:1 contrast. */
.mhome .card .pctb{position:absolute;top:9px;left:9px;z-index:2;background:#E7FBF0;color:#065f34;
  font-size:10.5px;font-weight:700;padding:4px 8px;border-radius:8px;font-variant-numeric:tabular-nums}
.mhome .card .pic img{max-width:78%;max-height:88%;object-fit:contain}
.mhome .card .in{padding:11px 12px 13px}
.mhome .card .nm{font-size:14px;font-weight:600;line-height:1.25;height:36px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mhome .card .pr{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.mhome .card .pr .n{font-family:ui-monospace,Menlo,monospace;font-size:22px;font-weight:800}
.mhome .card .usually{font-size:10.5px;color:var(--dim);font-weight:600;margin-top:5px}
.mhome .card .usually s{color:var(--mute);text-decoration:line-through;font-weight:500}
/* --mint2 (#12b76a) is a FILL colour — as white-background TYPE it measures 2.62:1. --mintink is
   already defined on .mhome for exactly this (dark green ink) and clears AA comfortably,so these
   three use it rather than introducing another green. The token itself is unchanged: it is still
   correct everywhere it paints a background. */
.mhome .card .crare{font-size:10.5px;color:var(--mintink);font-weight:700;margin-top:6px;line-height:1.3}
.mhome .card .see{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid var(--mline);font-size:11px;font-weight:800;color:var(--mintink)}
.mhome .card .see .ar{font-weight:900;font-size:13px}
.mhome .rband{margin:8px 16px 18px;display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--mline);border-left:3px solid #E23B3B;border-radius:var(--card-r);box-shadow:var(--card-sh);padding:12px 14px;cursor:pointer}
.mhome .rband .ri{font-size:16px;flex:0 0 auto;opacity:.85}
.mhome .rband .rt2{flex:1}
.mhome .rband .rt2 .a{font-size:13px;font-weight:800;color:var(--mk)}
.mhome .rband .rt2 .b{font-size:11px;color:var(--dim);margin-top:2px;line-height:1.3}
.mhome .rband .ra{color:var(--mute);font-weight:800}
/* bottom tab bar */
.mnav{position:fixed;left:0;right:0;bottom:0;height:64px;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(14,26,43,.08);display:none;align-items:center;justify-content:space-around;padding:0 8px;box-shadow:0 -4px 16px rgba(14,26,43,.05);z-index:60}
.mnav .tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;color:var(--mute,#9aa8b8);font-weight:700;flex:1;position:relative;cursor:pointer;background:none;border:none}
.mnav .tab.on{color:#12b76a}
.mnav .tab.on::before{content:"";position:absolute;top:-1px;width:26px;height:3px;border-radius:3px;background:#24D17E}
.mnav .tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mnav .tab .bdg{position:absolute;top:-7px;right:18px;background:#12b76a;color:#fff;font-size:8px;font-weight:900;border-radius:999px;padding:1px 5px}
.mnav .scanbtn{flex:0 0 auto;width:60px;height:60px;margin-top:-24px;border-radius:50%;background:linear-gradient(160deg,#2ee88c,#12b76a);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#053;box-shadow:0 10px 24px rgba(36,209,126,.5);border:4px solid #fff;cursor:pointer}
.mnav .scanbtn svg{width:24px;height:24px;stroke:#053;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.mnav .scanbtn span{font-size:8px;font-weight:900;margin-top:1px}
@media(max-width:640px){
  .mnav{display:flex}
  .sf .rd-topwrap,.sf .sf-stick,.sf .rd-herowrap,.sf-heroA{display:none !important}
  /* Search-results compact chrome must stay visible on phones (was force-hidden with all .sf-stick). */
  .sf.sf-compact .sf-stick{display:block !important;position:sticky;top:0;z-index:50}
  /* Dedicated mobile pages: sticky logo+search freeze at the top; PageTabs sit under the hero. */
  .sf.m-page .rd-herowrap{display:block !important}
  .sf.m-page .sf-stick{display:none !important}
  .sf.m-page .rd-topwrap{display:block !important;position:sticky;top:0;z-index:50}
  /* Brand row only — search is a SIBLING below (.rd-msearch), never a 3-col grid cell.
     The old grid (40px|1fr|40px) auto-placed .rd-search into the 40px gutter so the input
     collapsed to 0 and only Scan peeked through (prod bug, 2026-08). */
  .sf.m-page .rd-topbar{padding:6px 12px;gap:0;position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;flex-wrap:nowrap}
  .sf.m-page .rd-brand{z-index:1;max-width:calc(100% - 88px);position:relative;left:auto;transform:none;margin:0 auto}
  .sf.m-page .rd-brand .amark{width:34px;height:34px;margin:0 -3px 0 0}
  .sf.m-page .rd-brand .dk-wm{font-size:var(--wm-md);letter-spacing:-.04em}
  .sf.m-page .rd-brand .dk-tag{display:none} /* save header height — fold budget for Verified rarity */
  .sf.m-page .rd-brand .dk-wm .w{color:#EEF2F8 !important}
  .sf.m-page .rd-brand .dk-wm .f{color:#EEF2F8 !important}
  .sf.m-page .rd-brand .dk-wm .d{color:rgba(238,242,248,.55) !important}
  .sf.m-page .rd-you{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:2;margin:0;flex:0 0 auto;width:40px;height:40px}
  .sf.m-page .rd-msearch{display:block;width:100%;box-sizing:border-box;padding:0 12px 6px;min-width:0}
  .sf.m-page .rd-msearch .sf-top{padding:0;margin:0;max-width:none;width:100%}
  .sf.m-page .rd-msearch .sf-search{display:flex;align-items:stretch;gap:8px;width:100%;max-width:none;min-width:0}
  .sf.m-page .rd-msearch .sf-sbox{display:flex !important;flex:1 1 auto;min-width:0;width:auto;max-width:none;min-height:44px}
  .sf.m-page .rd-msearch .sf-scanbtn{flex:0 0 auto;width:62px;min-width:62px;min-height:44px;animation:none}
  .sf.m-page .rd-msearch .sf-sgo{background:#14B8A6 !important;color:var(--teal-ink) !important}
  .sf.m-page .rd-msearch .sf-sgo svg{stroke:var(--teal-ink) !important}
  .sf.m-page .sf-tabbar .sf-tabs{padding:0 8px;gap:2px;font-size:12px}
  .sf.m-page .sf-tabbar .sf-tab{padding:8px 10px}
  .sf.m-page .rd-you{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
  .sf.m-page .rd-you svg{stroke:#EEF2F8}
  .sf.m-page .wbt{display:block !important}
  .sf.m-page .sf-rail-v{display:flex !important}
  .mhome-on .sf-rail-v{display:flex !important}
  .mhome-on .hiw,.mhome-on .wbt{display:none !important}
}
@media(min-width:641px){ .mhome{display:none} }
/* #6 white bg + #35/#36 how-it-works: no empty stretch,roomier text */
.wbt{background:#fff !important;border:1px solid var(--line) !important}
.sf-rail-v::before{display:none !important}
.hiw-steps{align-items:start !important}
.hiw-d{font-size:11.5px !important;margin:9px 12px 13px !important;line-height:1.4 !important}
.hiw-box{padding:13px 13px 14px !important}
.mhome .steps{align-items:start !important}
.mhome .step .d{font-size:11px !important;margin:9px 11px 12px !important}
.mhome .step .ibox{padding:13px 12px 13px !important}
.mhome .mwm-img{height:30px;width:auto;cursor:pointer;display:block}
.rd-logoimg{height:44px}

/* #2 harmonize mobile card CTAs: category-rail .rc cards match the quiet teal receipt CTA */
@media(max-width:640px){
  .mhome-on .rc-cta{background:transparent !important;color:#0F766E !important;box-shadow:none !important;border:1.5px solid #14B8A6 !important;border-radius:10px !important;text-align:center !important;font-size:12px !important;font-weight:800 !important;padding:9px 8px !important;margin-top:9px !important}
  .mhome-on .rc{border-radius:var(--card-r) !important;box-shadow:var(--card-sh) !important}
  .mhome-on .drail-scroll .rc{flex:0 0 62% !important}
}
/* Sticky chrome: logo+search + page tabs as one block. Tabs used to sit in a
     sibling strip with overflow-x,which silently disabled position:sticky. */
.rd-topwrap{position:sticky;top:0;z-index:50;background:linear-gradient(135deg,#071018 0%,#0E1A2B 55%,#0a1f18 100%) !important;border-bottom:0;box-shadow:0 12px 32px -18px rgba(0,0,0,.55)}
/* Page tabs = page chrome,NOT a second header. Light strip under the hero; accents stay per-tab. */
.sf-tabbar{background:var(--bg,#F4F6F8);border-bottom:1px solid var(--line)}
.sf-tabbar .sf-tabs{padding:2px 26px 0;max-width:1720px;margin:0 auto;border-bottom:0;background:transparent}
.sf-tabbar .sf-tab{color:var(--ink3,#5d6675)}
.sf-tabbar .sf-tab:hover:not(.on){color:var(--ink,#0b1220);background:rgba(11,18,32,.05)}
.sf-tabbar .sf-tab.on{background:transparent}
/* Each active tab is measured against ITS OWN CHIP,not the strip — it paints its own tinted
   background,so that is what the label sits on. The browser reports a darker chip than the tint
   alone predicts (rgb(212,232,230) for verified,against a modelled 223,244,243),so these were
   set from the gate's composited numbers rather than from arithmetic. The originals ran 3.02 to
   4.44 against a 4.5 requirement at 13px. */
.sf-tabbar .sf-tab.t-all.on{background:rgba(35,209,126,.12);color:#075538}
.sf-tabbar .sf-tab.t-verified.on{background:rgba(20,184,166,.12);color:#0A524C}
.sf-tabbar .sf-tab.t-drops.on{background:rgba(240,163,35,.14);color:#7A3906}
.sf-tabbar .sf-tab.t-deepest.on{background:rgba(255,90,44,.12);color:#8B2E09}
.sf-tabbar .sf-tab.t-nonamazon.on{background:rgba(59,130,246,.12);color:#1E3A8A}
.sf-tabbar .sf-tab.t-coupons.on{background:rgba(20,184,166,.12);color:#0A524C}
.sf-tabbar .sf-tab.t-today.on{background:rgba(240,163,35,.14);color:#7A3906}
.sf-tabbar .sf-tab.t-discounts.on{background:rgba(240,163,35,.14);color:#7A3906}
.sf-tabbar .sf-tab.t-fake.on{background:rgba(226,59,59,.12);color:#8B1414}
@media(max-width:640px){
  .sf-tabbar .sf-tabs{padding:0 8px;gap:2px;font-size:12px;max-width:none}
}
.sf-stick{top:0;z-index:48}
/* compact/search mode only — carries its own logo+tabs */
.mhome .mtop{position:sticky;top:0;z-index:41;padding-top:calc(6px + env(safe-area-inset-top));box-shadow:0 12px 32px -18px rgba(0,0,0,.55)}
/* The header is position:sticky/top:0,which pins it to the VIEWPORT and so escapes
   Capacitor's iOS contentInset. Without the inset the wordmark sits under the Dynamic
   Island (~59pt) — reported on a real iPhone 17 Pro. env() is 0 anywhere there is no
   inset,so this is a no-op on desktop and in normal mobile Safari. */
/* Condense sticky chrome after a short scroll — more feed,less chrome (P1 2026-08-02). */
.rd-topwrap,.sf-stick,.mhome .mtop{transition:box-shadow .2s ease}
.rd-topwrap .rd-topbar,.rd-topwrap .rd-brand .amark,.rd-topwrap .rd-brand .dk-wm,.rd-topwrap .sf-tab,.sf-stick .sf-stickbar,.sf-stick .sf-stick-wm .amark,.sf-stick .sf-stick-wm .dk-wm,.sf-stick .sf-tab,.mhome .mtop .ah,.mhome .mtop .mwm2,.mhome .mtop .mwm2 .amark,.mhome .mtop .srow,.mhome .mtop .sf-tab{
  transition:padding .2s ease,height .2s ease,min-height .2s ease,font-size .2s ease,width .2s ease,margin .2s ease,gap .2s ease}
.rd-topwrap.scrolled{box-shadow:0 8px 22px -16px rgba(0,0,0,.65)}
.rd-topwrap.scrolled .rd-brand .amark{width:32px;height:32px;margin:-2px 0}
.rd-topwrap.scrolled .rd-brand .dk-wm{font-size:var(--wm-md)}
.sf-stick.scrolled .sf-stickbar{padding-top:6px;padding-bottom:6px}
.sf-stick.scrolled .sf-stick-wm .amark{width:26px;height:26px}
.sf-stick.scrolled .sf-stick-wm .dk-wm{font-size:15px}
.sf-stick.scrolled .sf-tab{padding:8px 11px}
.mhome .mtop.scrolled{padding-top:calc(6px + env(safe-area-inset-top));box-shadow:0 8px 22px -16px rgba(0,0,0,.65)}
@media(max-width:640px){
  .sf.m-page .rd-topwrap.scrolled .rd-brand .amark{width:32px;height:32px;margin:0 -2px 0 0}
  .sf.m-page .rd-topwrap.scrolled .rd-brand .dk-wm{font-size:var(--wm-sm)}
}
@media(prefers-reduced-motion:reduce){
  .rd-topwrap,.sf-stick,.mhome .mtop,
  .rd-topwrap .rd-topbar,.rd-topwrap .rd-brand .amark,.rd-topwrap .rd-brand .dk-wm,.rd-topwrap .sf-tab,
  .sf-stick .sf-stickbar,.sf-stick .sf-stick-wm .amark,.sf-stick .sf-stick-wm .dk-wm,.sf-stick .sf-tab,
  .mhome .mtop .ah,.mhome .mtop .mwm2,.mhome .mtop .mwm2 .amark,.mhome .mtop .srow,.mhome .mtop .sf-tab{transition:none}
}
.mhome .mwm-img{height:40px}
/* .mhome .ah grid centering is set in the Mobile hero redesign block below */
.mhome .srow{margin:0;padding:0 16px 12px}
/* ===== TASK 1 — wordmark lockup,scan-in-search,first-screenful order ===== */
.mhome{display:flex;flex-direction:column}
.mhome .mtop{order:0}
.mhome .proof{order:1}
.mhome .mhero{order:2}
.mhome .hdeck2{padding:0 16px;margin:2px 0 20px}
/* Landing order (value → nav → verdicts → sale ticket) is set above under .mhome .ivb / .msnav / .sevsec */
.mhome .mlogo{display:inline-flex;align-items:center;gap:9px;background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.mhome .mlogo-mark{width:34px;height:34px;border-radius:8px;display:block;flex:0 0 auto}
.mhome .mlogo-wm{display:inline-flex;gap:0;align-items:baseline;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;font-weight:800;font-size:19px;line-height:1;letter-spacing:-.03em}
.mhome .mlogo-wm .w{color:var(--navy)}
.mhome .mlogo-wm .f{color:var(--ink-40)}
.mhome .mlogo-wm .d{color:var(--green-light)}
.mhome .srch .mscan{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:none;border:0;padding:0;cursor:pointer}
.mhome .srch .mscan svg{width:22px;height:22px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mhome .srch .go{margin-left:0}
.mhome .proof{display:flex;align-items:center;gap:13px;margin:0 16px 12px;padding:12px 15px;background:var(--navy);border-radius:15px;text-decoration:none;-webkit-tap-highlight-color:transparent}
.mhome .proof .pn{font-family:'DM Sans',system-ui,sans-serif;font-weight:800;font-size:34px;line-height:.95;color:var(--al);flex:0 0 auto;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mhome .proof .pt{font-size:12.5px;font-weight:600;line-height:1.36;color:#cdd6e2}
.mhome .proof .pc{color:var(--green-dark);font-weight:800;white-space:nowrap}
/* ===== TASK 3 — checked-feed badges + Deal Score + section boundary ===== */
.mhome .st-chk{margin-top:2px}
.mhome .st-chk .h{color:#0E7C5A}
.mhome .st .vsub{font-size:11px;font-weight:700;color:#8a919c;margin-left:8px}
.mhome .card{position:relative}
.mhome .card .vb{position:absolute;top:10px;left:10px;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:5px 11px;border-radius:11px;transform:rotate(-4deg);line-height:1;background:rgba(255,255,255,.42);border:1.5px solid currentColor;box-shadow:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.mhome .card .vb small{font:800 6.5px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;opacity:.85}
.mhome .card .vb b{font-size:14px;font-weight:900;letter-spacing:.01em}
.mhome .card .vb-buy{color:#0B7A46;border-color:#0E9F6E}
.mhome .card .vb-skip{color:#B42318;border-color:#D93A2B}
.mhome .card .vb-wait{color:#8A5B06;border-color:#E8940C}
.mhome .card .vb-fair{color:#3D4654;border-color:#6B716D}
.mhome .card .in .pr .ds{margin-left:8px;font-size:11px;font-weight:800;color:var(--mk);background:#eef2f6;border-radius:7px;padding:2px 7px}
/* ===== TASK 4 — paste button + clipboard chip ===== */
.mhome .srow{flex-wrap:wrap;row-gap:9px}
.mhome .srch .mpaste{flex:0 0 auto;background:none;border:0;color:var(--mint2);font-weight:800;font-size:12px;padding:0 4px;cursor:pointer}
.mhome .pchip{width:100%;display:flex;align-items:center;gap:8px;margin:0;background:#eef7f1;border:1px solid #cdeede;color:#0E7C5A;font-weight:700;font-size:13px;padding:10px 13px;border-radius:12px;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
.mhome .pchip .pci{font-size:14px;flex:0 0 auto}
.mhome .pchip .pca{margin-left:auto;font-weight:800}
/* ===== TASK 5 — sticky buy bar (verdict page,mobile) ===== */
.pp-buybar{display:none}
@media(max-width:640px){
  .pp-buybar{position:fixed;left:0;right:0;bottom:calc(54px + env(safe-area-inset-bottom));z-index:55;margin:0 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#152134;color:#fff;text-decoration:none;border-radius:14px;padding:11px 16px;box-shadow:0 10px 28px rgba(14,26,43,.34)}
  .pp-buybar .pp-buybar-l{display:flex;flex-direction:column;line-height:1.15}
  .pp-buybar .pp-buybar-store{font-size:11px;font-weight:700;color:#b4becb}
  .pp-buybar .pp-buybar-price{font-size:18px;font-weight:800}
  .pp-buybar .pp-buybar-cta{font-size:15px;font-weight:800;color:#23D17F}
}
/* ===== TASK 6 — Coupons filter chip in Deals ===== */
.mhome .mchips{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 16px 12px;padding-bottom:2px}
.mhome .mchips::-webkit-scrollbar{display:none}
.mhome .mchip{flex:0 0 auto;white-space:nowrap;background:#fff;border:1px solid var(--mline2);color:var(--mk);font-weight:800;font-size:12.5px;padding:8px 13px;border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mhome .mchip.on{background:var(--mk);color:#fff;border-color:var(--mk)}
.mhome .mchip-cpn{margin-left:2px}
/* ===== TASK 9 — a11y: 16px input (no iOS zoom) + 44px tap targets ===== */
.mhome .srch{min-height:44px}
.mhome .srch input{font-size:16px}
.mhome .srch .mscan{width:40px;height:40px}
.mhome .srch .mpaste{min-height:40px;display:inline-flex;align-items:center}
.mhome .srch .go{min-height:40px;display:inline-flex;align-items:center}
.mhome .mchip{min-height:44px;display:inline-flex;align-items:center}
/* ===== Mobile hero redesign (handoff 7a) ===== */
.mhome .mtop{background:linear-gradient(135deg,#071018 0%,#0E1A2B 55%,#0a1f18 100%);box-shadow:none;border-bottom:none;padding-top:4px}
/* Full-width grid: lockup spans all columns and self-centers; bell sits in the right rail. */
.mhome .ah{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;height:56px;min-height:56px;padding:0 10px;position:relative}
.mhome .ah .ah-sp{display:block;width:40px;height:40px;grid-column:1;grid-row:1}
.mhome .mwm2{grid-column:1/-1;grid-row:1;justify-self:center;align-self:center;z-index:1;position:relative;left:auto;top:auto;transform:none;white-space:nowrap;display:inline-flex;align-items:center;gap:0;text-decoration:none;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;font-weight:800;font-size:var(--wm-md);letter-spacing:-.045em;line-height:1;max-width:calc(100% - 84px)}
/* Amark viewBox has empty side padding — pull it flush against the wordmark. */
.mhome .mwm2 .amark{width:36px;height:36px;margin:0 -5px 0 0;flex:0 0 auto;display:block;border-radius:50%;object-fit:cover}
.sf-stick-wm .amark.wi-mark{border-radius:50%;object-fit:cover}
/* One unbroken word (no flex gaps) — brand color split restored (worthit / foryou / .com). */
.mhome .mwm2 .mwm2-t{display:inline;white-space:nowrap;letter-spacing:-.045em;margin:0;padding:0}
.mhome .mwm2 .mwm2-t .w{color:#EEF2F8 !important}
.mhome .mwm2 .mwm2-t .f{color:#14B8A6 !important}
.mhome .mwm2 .dk-tag{color:rgba(148,163,184,.85);font-size:7.5px;letter-spacing:.12em}
.mhome .mwm2 .mwm2-t .d{color:rgba(238,242,248,.55) !important}
/* Alerts demoted — brand is the hero of the header bar; menu still opens from the icon. */
.mhome .ah .ib{grid-column:3;grid-row:1;justify-self:end;align-self:center;z-index:2;position:relative;background:transparent;border:0;box-shadow:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;opacity:.72}
.mhome .ah .ib svg{width:20px;height:20px}
.mhome .srow{padding:0 14px 8px}
/* HeroSearch mounts inside .srow on the mobile landing — force full-width flex so the
   input can't collapse beside Scan the way the old m-page grid did. */
.mhome .srow .sf-top{padding:0;margin:0;max-width:none;width:100%}
.mhome .srow .sf-search{display:flex;align-items:stretch;gap:8px;width:100%;min-width:0}
.mhome .srow .sf-sbox{display:flex !important;flex:1 1 auto;min-width:0;max-width:none;min-height:48px}
.mhome .srow .sf-scanbtn{flex:0 0 auto;width:52px;min-width:52px;min-height:44px;animation:none}
.mhome .srch{background:#fff;border:0;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.2);padding:6px 6px 6px 12px;gap:8px;min-height:44px}
.mhome .srch svg{stroke:#6b7280}
.mhome .srch input{color:#0E1A2B;font-size:16px}
.mhome .srch input::placeholder{color:#8a919c}
.mhome .srch .mscan{width:38px;height:38px}
.mhome .srch .mscan svg{stroke:#0E1A2B}
.mhome .srch .go{margin-left:0;background:#23D17E;color:#0E1A2B;font-weight:800;font-size:13px;padding:0 16px;min-height:40px;border-radius:11px}
.mhome .mhero{background:#fff;padding:16px 16px 6px}
.mhome .mhero-h{text-align:center;font-weight:800;font-size:18px;color:#0E1A2B;margin:2px 0 14px}
.mhome .mtiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mhome .mtile{position:relative;overflow:hidden;border-radius:20px;padding:16px 14px 15px;text-align:center;min-height:150px;display:flex;flex-direction:column;align-items:center;opacity:0;animation:mtileIn .5s ease forwards}
.mhome .mt1{background:linear-gradient(160deg,#D9E8FE,#B9D4FC);animation-delay:0ms}
.mhome .mt2{background:linear-gradient(160deg,#CFF3E1,#A7E8C6);animation-delay:90ms}
.mhome .mt3{background:linear-gradient(160deg,#FFDFB8,#FFC98A);animation-delay:180ms}
.mhome .mt4{background:linear-gradient(160deg,#E9D6FB,#D6AEF5);animation-delay:270ms}
@keyframes mtileIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.mhome .mt-art{height:58px;width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.mhome .mt-s{font-size:11.5px;font-weight:600;color:#4b5563;margin-top:4px;line-height:1.35}
.mhome .mt-sbar{background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(20,31,52,.12);height:34px;width:90%;display:flex;align-items:center;gap:7px;padding:0 10px}
.mhome .mt-mag{width:15px;height:15px;fill:none;stroke:#2F6DF6;stroke-width:2.4;flex:0 0 auto}
.mhome .mt-ln{flex:1;height:5px;border-radius:3px;background:#d3d9e2}
.mhome .mt-caret{width:2px;height:15px;background:#2F6DF6;flex:0 0 auto;animation:mCaret 1s steps(1) infinite}
@keyframes mCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.mhome .mt-badges{position:relative}
.mhome .mt-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-6deg);display:flex;flex-direction:column;align-items:flex-start;gap:2px;color:#fff;padding:8px 15px;border-radius:12px;box-shadow:0 6px 14px rgba(20,31,52,.3);white-space:nowrap;opacity:0;animation:mBadge 4.8s ease-in-out infinite}
.mhome .mt-badge small{font-size:8px;font-weight:800;letter-spacing:.12em;opacity:.85}
.mhome .mt-badge b{font-size:16px;font-weight:800;line-height:1}
.mhome .b-buy{background:#0E9F6E;animation-delay:0s}
.mhome .b-wait{background:#FF5A2C;animation-delay:-1.2s}
.mhome .b-skip{background:#D93A2B;animation-delay:-2.4s}
.mhome .b-fair{background:#6B716D;animation-delay:-3.6s}
@keyframes mBadge{0%{opacity:0}3%{opacity:1}22%{opacity:1}25%{opacity:0}100%{opacity:0}}
.mhome .mt-float{width:42px;height:42px;fill:none;stroke:#B4501F;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;animation:mFloat 3.2s ease-in-out infinite}
.mhome .mt-float circle{fill:#B4501F;stroke:none}
@keyframes mFloat{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
.mhome .mt-barcode{position:relative;width:88%;height:44px}
.mhome .mt-bars{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#7A3FBE 0 3px,transparent 3px 7px)}
.mhome .mt-scan{position:absolute;left:-2px;right:-2px;height:3px;border-radius:2px;background:#7A3FBE;box-shadow:0 0 9px 2px rgba(122,63,190,.75);animation:mScan 1.6s ease-in-out infinite}
@keyframes mScan{0%,100%{top:2px}50%{top:39px}}
.mhome .mchips .mchip2{flex:0 0 auto;white-space:nowrap;border:0;color:#fff;font-weight:800;font-size:13px;padding:0 16px;min-height:40px;border-radius:999px;cursor:pointer}
.mhome .mchips .mchip2.on{box-shadow:0 0 0 3px rgba(14,26,43,.22)}
.mhome .c-drops{background:#0E1A2B}
.mhome .c-tech{background:#2F6DF6}
.mhome .c-home{background:#0E9F6E}
.mhome .c-gaming{background:#E8590C}
.mhome .c-coupons{background:#7A3FBE}
.mhome .vfeed{display:flex;flex-direction:column;gap:12px;padding:0 16px}
.mhome .vfeed .card{width:100% !important;max-width:none !important;flex:0 0 auto}
.mhome .vmore{display:block;width:calc(100% - 32px);margin:14px 16px 4px;padding:13px;border-radius:13px;border:1px solid var(--mline2);background:#fff;color:var(--mk);font-weight:800;font-size:13.5px;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* ===== headline block (landing,mobile + desktop) ===== */
.mhome .hlwrap{order:1}
.mhome .sf-sgo{background:#14B8A6 !important;color:var(--teal-ink) !important}
.mhome .sf-sgo svg{stroke:var(--teal-ink) !important}
.hlwrap{text-align:center;margin:14px 16px 4px}
.hlpill{display:inline-block;padding:10px 18px;border-radius:14px;background:linear-gradient(120deg,#D9E8FE 0%,#CFF3E1 35%,#FFDFB8 68%,#E9D6FB 100%)}
.hlpill .hl1{font-weight:800;color:#0E1A2B;font-size:17px;line-height:1.25}
.hlpill .hl1 .hlv{color:#7A3FBE}
.hlpill .hl2{font-weight:700;font-size:12.5px;color:#6B716D;margin-top:3px}
.hlpill .hl2 .hb{color:#0E9F6E}
.hlpill .hl2 .hw{color:#FF5A2C}
.hlpill .hl2 .hs{color:#D93A2B}
@media(min-width:641px){.hlwrap{margin:20px auto 6px;max-width:1280px;padding:0 40px}.hlpill{padding:13px 28px;border-radius:14px}.hlpill .hl1,.hlpill .hl2{display:inline;font-size:20px;line-height:1.35}.hlpill .hl2{margin-top:0;margin-left:8px}}
@media(prefers-reduced-motion:reduce){
  .mhome .mtile{opacity:1;animation:none;transform:none}
  .mhome .mt-caret,.mhome .mt-badge,.mhome .mt-float,.mhome .mt-scan{animation:none}
  .mhome .b-buy{opacity:1}.mhome .b-wait,.mhome .b-skip,.mhome .b-fair{opacity:0}
  .mhome .mt-float{transform:none}
}
/* hero tiles: identical fixed height so all slides match while sliding */
.hdeck .hcar{align-items:stretch !important}
.hdeck .hslide{height:480px !important;min-height:480px !important}
.hdeck .hslide .hs-in{height:100%}
@media(max-width:640px){.hdeck .hslide{height:auto !important;min-height:440px !important}}
@media(min-width:641px){
  .hdeck .hcar{justify-content:center;align-items:flex-start}
  .hdeck .hslide{flex:0 0 calc(50% - 8px) !important;max-width:calc(50% - 8px);height:540px !important;min-height:540px !important;align-self:flex-start !important;margin:0 !important}
  .hdeck .pgrid{grid-template-columns:repeat(3,1fr)}
  .hdeck .hs-eyebrow{align-self:stretch;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:block}
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE REBUILD — design system (step 1 of the prototype port)

   App design tokens under `.wi-app`. Brand active state is TEAL `#14B8A6`
   (product invariants — purple/#6750A4 Material seed RETIRED). Neutrals stay neutral;
   verdict colours unchanged.

   SCOPING: everything is under `.wi-app`. Nothing carries that class yet, so
   this block cannot change the website or the current native home (MeshHome).
   The prototype declares these on :root; scoping them to a container is the
   one deliberate difference, because the site's own :root already defines
   --surface and friends and a bare :root copy would silently repaint
   existing native UI.

   The token NAMES are kept verbatim (--surface, --cardBg, --vBUY …) so the
   prototype's component CSS ports across unchanged in later steps.
   ══════════════════════════════════════════════════════════════════════════ */

/* Offgate / interim Logo2a size hook — class token must exist in this CSS block (check-wi orphan). */
.boot-logo{}

/* Roboto + Roboto Mono (Apache 2.0) and DM Sans for the brand wordmark.
   229-codepoint subsets — Basic Latin + Latin-1, the ceiling for the 12
   shipped languages. Served from /vendor with a version in the filename so
   the existing immutable-cache route applies; the family names are the
   prototype's own ('Rb'/'RbM'/'DMS') and deliberately do NOT collide with the
   site's existing 'Inter' / 'JetBrains Mono' / 'DM Sans' references. */
@font-face{font-family:'Rb';src:url(/vendor/roboto-1.0.0.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'RbM';src:url(/vendor/robotomono-1.0.0.woff2) format('woff2');font-weight:100 700;font-display:swap}
@font-face{font-family:'DMS';src:url(/vendor/dmsans-1.0.0.woff2) format('woff2');font-weight:800;font-display:swap}
/* Nunito 900, self-hosted rather than @import'ed from Google. The CSP does
   allow fonts.googleapis.com, but every other face here is served from our own
   origin, and a webfont request is one more third party seeing every visitor's
   IP — against the "no trackers" promise on /privacy. Same versioned filename
   trick, so it lands on the immutable-cache route. Latin subset only, matching
   what Google serves. */
@font-face{font-family:'Nunito';src:url(/vendor/nunito-900-1.0.0.woff2) format('woff2');
  font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito';src:url(/vendor/nunito-900-italic-1.0.0.woff2) format('woff2');
  font-weight:900;font-style:italic;font-display:swap}
/* Double-tap-to-zoom is the other half of the stuck-zoom report: manipulation keeps
   panning and scrolling but drops the double-tap gesture (and its 300ms click delay). */
.wi-app,.wi-scanx{touch-action:manipulation;

  /* Type scale in rem — Material-density pass (2026-09): ~12–15% below the prior
     Apple-Store airy ladder so All Deals / Verified fit more rows above the fold.
     Body ~15px (was 17 / iOS Body). Capped via clamp on the largest steps so extreme
     a11y sizes don't shatter chrome. clamp(Nrem,Nrem,Mpx) = min(Nrem, Mpx). App
     --fs-body is independent of :root --fs-body (check-wi notes the name collision).
     Companion: Android MainActivity pins WebView textZoom=100 so system Large text
     cannot re-inflate these rem tokens. No CSS zoom / transform:scale. */
  --fs-display:clamp(1.5rem,1.75rem,36px); /* was 32 design → ~28 */
  --fs-headline:clamp(1.1875rem,1.375rem,28px); /* was 26 → ~22 */
  --fs-title:clamp(1.0625rem,1.125rem,22px); /* was 21 → ~18 */
  --fs-titleSm:clamp(0.9375rem,1rem,20px); /* was 18 → ~15–16 */
  --fs-body:clamp(0.9375rem,0.9375rem,20px); /* 15 — Material body (was 17) */
  --fs-bodySm:clamp(0.8125rem,0.8125rem,16px); /* 13 (was 14) */
  --fs-label:0.75rem; /* 12 (was 12.5) */
  --fs-labelSm:0.6875rem; /* 11 — floor; nothing below this */
  --fs-callout:clamp(0.875rem,0.875rem,18px); /* 14 (was 15) */
  /* Spacing ladder — tighten ~20% so pads follow the denser type (scoped to .wi-app;
     site :root --sp-* unchanged). */
  --sp-1:3px; --sp-2:6px; --sp-3:10px; --sp-4:12px; --sp-5:18px; --sp-6:24px;
  /* M3 elevation level 1 — key layer at 30%, ambient at 15%, from Material
     Web's source. Declared once so "level 1" can never come to mean three
     slightly different shadows in three places. */
  /* Elevation for white-on-white (owner 16 Aug): soft dual-layer lift so cards,
     banners, and listings read as objects on the page — not Material's dark-surface
     recipe, and not the near-invisible 1px hairline that replaced it. */
  --e1:0 1px 2px rgba(14,26,43,.05),0 3px 10px rgba(14,26,43,.07);
  --e2:0 1px 3px rgba(14,26,43,.06),0 8px 22px rgba(14,26,43,.10);

  /* ── light — brighter Apple grey (owner-locked 2026-08-28; lift 2026-09-28) ─
     Page #FAFAFB (was #F5F5F7 — dull on phone), cards #FFF, type #1D1D1F / #55555A.
     Teal only on foryou + −%. Selected chips are solid black — never royal/cobalt --appleFill. */
  --primary:#14B8A6; --onPrimary:#042F2E;
  /* --primaryFill is what white text sits on. --primary (#14B8A6) measures 2.49:1 against white,
     which fails AA badly, so it must NEVER be a background for white type — it is correct as a
     wordmark colour and as teal-on-white text (6.76:1). --teal-deep is 4.68:1 and is the fill.
     --accent is the second accent: non-verdict emphasis only. */
  --primaryFill:var(--teal-deep); --accent:#4F46E5; --onAccent:#FFFFFF;
  /* iOS systemBlue kept for non-All-Deals CTAs (See the verdict). Chips/nav
     no longer use --appleFill / --appleSoft — those painted the blue pills. */
  --apple:#007AFF; --onApple:#FFFFFF; --appleSoft:#E8F1FF;
  --appleInk:color-mix(in srgb, var(--apple) 55%, var(--onSurface));
  --appleFill:color-mix(in srgb, var(--apple) 78%, #000);
  --primaryContainer:#CCFBF1; --onPrimaryContainer:#042F2E;
  --secondary:#0F766E; --secondaryContainer:#E6F9F6; --onSecondaryContainer:#1D1D1F;
  --tertiary:#8F485B; --tertiaryContainer:#FFD9E1;
  --error:#EF4B45; --onError:#FFFFFF;
  /* Neutrals — brighter page; white cards; Search well #F0F0F4. */
  --surface:#FAFAFB; --onSurface:#1D1D1F;
  /* Secondary ink tracks WIAPP.onSurfaceVariant — punchy on the brighter grounds. */
  --onSurfaceVariant:#55555A;
  --surfaceContainerLowest:#FFFFFF; --surfaceContainerLow:#FAFAFB;
  --surfaceContainer:#F0F0F4; --surfaceContainerHigh:#F0F0F4; --surfaceContainerHighest:#D8D8DD;
  --outline:#86868B; --outlineVariant:#E5E5EA;
  --navInactive:#55555A;

  --pageBg:#FAFAFB;
  --cardBg:#FFFFFF;
  --cardBg2:#F2F2F5;
  --imgPlate:transparent;
  --inverseSurface:#322F35; --inverseOnSurface:#F5EFF7;

  /* Verdict palette — re-solved in OKLCH for colour-vision deficiency.
     BUY-green vs SKIP-red is the most common CVD failure; the old palette
     scored dE 12.6 under deuteranopia, this scores 29. WAIT is cyan, never
     amber. FAIR carries no colour of its own in use — it renders in
     onSurface, because "ordinary" deserves ordinary text. */
  --vBUY:#016732; --vWAIT:#0099B3; --vSKIP:#430002; --vFAIR:#1D1B20;
  --onV:#ffffff;

  /* Decorative brand-hue tints. Verified >=20 dE from every verdict colour in
     both themes, so colour is welcome here and can never be mistaken for an
     answer. Only the verdict palette is reserved. */
  --t-gold:#F6E7BF;   --on-gold:#493800;
  --t-red:#FFE0D9;    --on-red:#652116;
  --t-green:#D1F2D3;  --on-green:#084716;
  --t-purple:#EEE1FF; --on-purple:#472A64;

  color-scheme:light;
  background:var(--pageBg);
  color:var(--onSurface);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,'Rb',sans-serif;
  font-size:var(--fs-body);
  line-height:1.5;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* Theme accents for dark preference.
   All Deals light Apple LOCK (owner 2026-08-28): dark / system must NOT override
   --pageBg / --cardBg / --onSurface / --surface* / --vBUY… — those stay the light
   Apple neutrals + light verdict fills from `.wi-app`, so OS dark never restores
   navy #0B1220 or royal chips on the deals shelf / shared chrome. Apple CTA
   tokens below are the only dark-preference deltas (non-All-Deals buttons). */
@media (prefers-color-scheme: dark){
  .wi-app:not([data-theme="light"]),.wi-scanx:not([data-theme="light"]){
    --apple:#0A84FF; --onApple:#FFFFFF; --appleSoft:rgba(10,132,255,.22);
    --appleInk:color-mix(in srgb, var(--apple) 55%, var(--onSurface));
    --appleFill:color-mix(in srgb, var(--apple) 78%, #000);
    color-scheme:light;
  }
}
.wi-app[data-theme="dark"],.wi-scanx[data-theme="dark"]{
    --apple:#0A84FF; --onApple:#FFFFFF; --appleSoft:rgba(10,132,255,.22);
    --appleInk:color-mix(in srgb, var(--apple) 55%, var(--onSurface));
    --appleFill:color-mix(in srgb, var(--apple) 78%, #000);
    color-scheme:light;
  }
/* ── MOBILE REBUILD — feed card + list row (step 2) ─────────────────────────
   Ported from the prototype verbatim except for the selector prefix. The two
   views are ONE component at two densities,so they share elevation and
   spacing decisions — a card that lifts beside a row that doesn't makes the
   view toggle feel like two different apps.

   DELIBERATELY ABSENT: the bare price line and its range strip. The prototype
   draws them on feed cards,but no production feed carries a price series —
   /api/hot-deals has none,/api/verified-buys has none,and history90 is three
   numbers on 6 of 366 items. A real series costs one price-research token per product
   behind an explicit button (product invariants §1). The line belongs on the verdict
   surface,where that data legitimately exists.

   ALSO ABSENT BY RULE: any verdict stamp. §1 — feed cards never carry
   BUY/WAIT/SKIP/FAIR; the call comes only from the button-gated lookup.
   ───────────────────────────────────────────────────────────────────────── */
.wi-app .wi-mono{font-family:'RbM',monospace;font-variant-numeric:tabular-nums}
.wi-app .wi-nm,.wi-app .wi-lname{text-wrap:pretty}
/* The product name is the one navigating control on a card; everything else on the
   body is inert. Reset the button chrome but NOT display — .wi-nm/.wi-lname use
   -webkit-box for the 2-line clamp,and display:block would drop it. */
.wi-app .wi-nm.wi-nmb,.wi-app .wi-lname.wi-nmb{width:100%;text-align:left;background:none;
  border:0;padding:0;margin:0;font-family:inherit;color:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.wi-app .wi-card{position:relative;background:var(--cardBg);border-radius:16px;padding:var(--sp-4);display:flex;
  flex-direction:column;gap:10px;flex:none;overflow:visible;
  box-shadow:0 8px 24px rgba(14,26,43,.09),0 1px 2px rgba(14,26,43,.04);
  border:0;
  transition:transform .12s,background .15s,box-shadow .15s;text-align:left;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif}
.wi-app[data-theme="dark"] .wi-card{
  box-shadow:0 12px 36px rgba(0,0,0,.42),0 1px 2px rgba(0,0,0,.28)}
@media (prefers-color-scheme:dark){
  .wi-app[data-theme="system"] .wi-card{
    box-shadow:0 12px 36px rgba(0,0,0,.42),0 1px 2px rgba(0,0,0,.28)}
}
/* Feed listings — Apple Store card language (owner 16 Aug): soft float,large
   radius,visual plate + calm type. Hit targets stay ≥44 via ::after. */
.wi-app .wi-card.wi-feed{padding:0 0 12px;gap:0;border-radius:16px;overflow:hidden}
.wi-app .wi-card.wi-feed .wi-pmeta{padding:10px 12px 0;gap:6px;box-sizing:border-box}
.wi-app .wi-card.wi-feed .wi-plate{height:132px;border-radius:0;margin:0;
  background:linear-gradient(180deg,var(--surfaceContainerLow) 0%,var(--cardBg) 100%)}
.wi-app .wi-card.wi-feed .wi-plate img{max-height:112px;max-width:68%}
.wi-app .wi-card.wi-feed .wi-brandline{padding:14px 18px 0;margin:0;font-size:13px;font-weight:600;
  letter-spacing:-.01em;text-transform:none;color:var(--onSurface)}
.wi-app .wi-card.wi-feed .wi-nm{padding:6px 18px 0;font-size:19px;font-weight:700;line-height:1.22;
  letter-spacing:-.022em;box-sizing:border-box}
.wi-app .wi-card.wi-feed .wi-ps{padding:8px 18px 0;gap:3px;box-sizing:border-box}
.wi-app .wi-card.wi-feed .wi-ps .wi-math{font-size:14px;color:var(--onSurfaceVariant)}
.wi-app .wi-card.wi-feed .wi-ps .wi-math b{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--onSurface)}
.wi-app .wi-card.wi-feed .wi-ps .wi-lead{font-size:13px;font-weight:500}
.wi-app .wi-card.wi-feed .wi-pill{margin:8px 16px 0;padding:4px 10px;border-radius:999px}
.wi-app .wi-card.wi-feed .wi-pill svg{width:12px;height:12px}
.wi-app .wi-watchn{font-size:var(--fs-labelSm);font-weight:500;color:var(--onSurfaceVariant);
  margin:0 0 0 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:right;flex:none;max-width:58%}
.wi-app .wi-card.wi-feed .wi-watchn{font-size:12px;font-weight:500}
.wi-app .wi-card.wi-feed .wi-seller{margin:8px 16px 0;font-size:13px;gap:5px;color:var(--onSurfaceVariant)}
.wi-app .wi-card.wi-feed .wi-seller svg{width:14px;height:14px}
.wi-app .wi-card.wi-feed .wi-cardfoot{gap:10px;padding:12px 16px 0;box-sizing:border-box}
.wi-app .wi-card.wi-feed .wi-btn.wi-sm{min-height:44px;border-radius:999px;font-size:15px;font-weight:600;
  padding:0 16px;letter-spacing:-.01em}
/* Hit 44×44; painted circle stays 40 via padding + content-box (HIG,not a visual grow). */
.wi-app .wi-card.wi-feed .wi-starb{width:44px;height:44px;padding:2px;margin:-2px;border-radius:999px;
  background-clip:content-box;-webkit-background-clip:content-box}
.wi-app .wi-card.wi-feed .wi-starb svg{width:18px;height:18px}
.wi-app .wi-card.wi-feed .wi-stamp{font-size:13px;padding:7px 11px;border-radius:12px;gap:5px;
  left:10px;bottom:10px;box-shadow:0 8px 20px -8px rgba(0,0,0,.45)}
.wi-app .wi-card.wi-feed .wi-stamp svg{width:14px;height:14px;stroke-width:3}
.wi-app .wi-card.wi-feed .wi-pctb{padding:3px 8px;border-radius:8px;font-size:12px;font-weight:600}
.wi-app .wi-card.wi-feed .wi-disc{padding:0 16px;margin-top:6px}
.wi-app .wi-card.wi-feed .wi-mnote,.wi-app .wi-card.wi-feed .wi-risk{margin:8px 16px 0}
.wi-app .wi-card.wi-feed .wi-spark{padding:4px 12px 0}
.wi-app .wi-nmb:active,.wi-app .wi-lrow .wi-nmb:active{opacity:.62}
/* Verified feed cards — owner hierarchy 2026-08-25 (mirror of .vt tickets). */
.wi-app .wi-card.wi-feed.wi-vcard{display:flex;flex-direction:column;align-items:stretch}
.wi-app .wi-card.wi-feed.wi-vcard .wi-plate{position:relative}
.wi-app .wi-vtag{position:absolute;z-index:2;left:10px;top:10px;font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;text-transform:uppercase;color:#3F4852;background:#fff;padding:5px 8px;
  border-radius:6px;border:1px solid #E3E6EA;box-shadow:0 1px 3px rgba(20,26,33,.1)}
.wi-app .wi-vstampblk{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 18px 0;text-align:center}
.wi-app .wi-vbig{display:inline-flex;align-items:center;justify-content:center;font:900 22px/1 system-ui;
  letter-spacing:.14em;text-transform:uppercase;padding:10px 16px 9px;border-radius:4px;
  transform:rotate(-4deg);border:0}
.wi-app .wi-vbig.wi-lsm{font-size:15px;padding:7px 11px;transform:rotate(-3deg);align-self:flex-start}
.wi-app .wi-vbig.wi-v-BUY{color:#0A3D28;background:#23D17E}
.wi-app .wi-vbig.wi-v-WAIT{color:#141A21;background:#F0A323}
.wi-app .wi-vbig.wi-v-SKIP{color:#fff;background:#A81F1F}
.wi-app .wi-vbig.wi-v-FAIR{color:#fff;background:#3D4654}
.wi-app .wi-vreason{font:600 13px/1.3 system-ui;color:var(--onSurface,#141A21);width:100%}
.wi-app .wi-vnow{padding:8px 18px 0;font:600 14px/1.25 system-ui;color:var(--onSurfaceVariant,#4A5761);text-align:center}
.wi-app .wi-vnow b,.wi-app .wi-vnow .wi-n{font:800 22px/1 system-ui;letter-spacing:-.03em;color:var(--onSurface,#141A21)}
.wi-app .wi-vusual{font-weight:600;text-decoration:none;color:var(--onSurfaceVariant,#4A5761)}
.wi-app .wi-card.wi-feed.wi-vcard .vt-save,.wi-app .wi-vrow .vt-save{align-self:center;margin:8px auto 0}
.wi-app .wi-vrare{padding:10px 18px 0;margin:4px 0 0;font:600 12.5px/1.3 system-ui;
  color:var(--onSurfaceVariant,#3F4852);text-align:center;border-top:1px solid var(--outlineVariant,#E8EBEE)}
/* Badge row ABOVE the photo — discount left,watching (or first-seen) right. */
.wi-app .wi-offgate{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#0E1A2B;color:#fff}
.wi-app .wi-offgate .bootwm{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;font-weight:800;font-size:clamp(1.65rem,1.85rem,2rem);letter-spacing:-.04em;line-height:1;color:#fff}
.wi-app .wi-offgate .bootwm .fy{color:var(--primary)}
.wi-app .wi-offgate .msg{font-size:16px;font-weight:600;color:rgba(255,255,255,.82)}
.wi-app .wi-pastrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--cardBg);border:0.5px solid var(--outlineVariant);border-radius:16px;
  padding:10px 12px;margin:0 0 8px;color:inherit;font:inherit;cursor:pointer;box-shadow:var(--e1)}
.wi-app .wi-pastrow img,.wi-app .wi-pastph{width:48px;height:48px;border-radius:10px;object-fit:contain;
  background:var(--cardBg);flex:none}
.wi-app .wi-pastph{display:block}
.wi-app .wi-pastm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wi-app .wi-pastn{font-size:var(--fs-bodySm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wi-app .wi-pastp{font-size:var(--fs-label);color:var(--onSurfaceVariant)}
.wi-app .wi-pastv{flex:none;font-size:11px;font-weight:800;letter-spacing:.04em;padding:4px 8px;border-radius:8px;color:#fff}
.wi-app .wi-scanvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:transparent;opacity:0;transition:opacity .2s ease}
.wi-app .wi-scanvid.wi-vid-on{opacity:1;background:#0d0d11}
.wi-app .wi-scanvid::-webkit-media-controls,.wi-app .wi-scanvid::-webkit-media-controls-enclosure,.wi-app .wi-scanvid::-webkit-media-controls-start-playback-button,.wi-app .wi-scanvid::-webkit-media-controls-overlay-play-button{display:none!important;opacity:0;pointer-events:none;-webkit-appearance:none}
/* No-camera / stream-missing empty state — guidance stays above any video layer. */
.wi-app .wi-scannocam{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;
  max-width:min(320px,88vw);margin:0 auto;padding:18px 16px;text-align:center;pointer-events:auto}
.wi-app .wi-scannocam-t{font-size:var(--fs-titleSm);font-weight:700;color:#fff;line-height:1.3}
.wi-app .wi-scannocam-s{font-size:var(--fs-bodySm,14px);color:rgba(255,255,255,.82);line-height:1.45}
.wi-app .wi-scandock{position:relative;z-index:3;padding:0 0 calc(8px + var(--wi-safe-bottom,0px))}
body.wi-live-scan .wi-scandock{visibility:visible}
/* secondaryContainer,never a verdict colour — this states a fact,it does not
   make a call. */
.wi-app .wi-pmeta{display:flex;align-items:center;gap:8px;min-width:0;width:100%}
.wi-app .wi-pctb{background:var(--secondaryContainer);color:var(--onSecondaryContainer);flex:none;
  font-size:var(--fs-labelSm);font-weight:500;padding:var(--sp-1) var(--sp-2);border-radius:9px;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.wi-app .wi-pctb.wi-pct-quiet{background:#fff;color:#3F4852;border:1.5px solid rgba(20,184,166,.55);
  font-weight:800;padding:5px 10px;border-radius:999px;box-shadow:0 1px 2px rgba(20,26,33,.06)}
.wi-app .wi-pct-tri{color:var(--teal-deep);font-size:9px}
.wi-app .wi-btn.wi-receipt{background:transparent;color:#0F766E;border:1.5px solid #14B8A6;box-shadow:none}
.wi-app[data-theme="dark"] .wi-btn.wi-receipt{color:#99F6E4}
.wi-app .wi-btn.wi-receipt:hover{background:rgba(20,184,166,.08);color:#0D9488}
.wi-app .wi-usual{font-weight:600;color:var(--onSurfaceVariant,#4A5761);text-decoration:none}
.wi-app .wi-nowlab{font-weight:600;color:var(--onSurface,#141A21)}
.wi-app .wi-seenb{color:var(--onSurfaceVariant);font-size:var(--fs-labelSm);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;margin-left:auto;min-width:0}
/* No visible plate in light mode — Amazon's white-background JPEGs sit
   straight on the white card. Dark mode still needs a light tile. */
.wi-app .wi-plate{width:100%;height:118px;border-radius:16px;display:grid;place-items:center;flex:none;
  overflow:hidden;background:var(--imgPlate);position:relative}
.wi-app .wi-plate img{max-width:58%;max-height:104px;object-fit:contain;display:block}
.wi-app .wi-plateph{font-size:52px;line-height:1;opacity:.35}
.wi-app .wi-plate-storelogo{width:72px;height:72px;object-fit:contain;opacity:1;padding:10px;border-radius:16px;background:#f4f6fa;border:1px solid var(--line,#e6ebf2)}
.wi-app .wi-brandline{font-size:var(--fs-labelSm);letter-spacing:.09em;text-transform:uppercase;
  font-weight:500;color:var(--onSurfaceVariant);margin-bottom:-8px}
.wi-app .wi-nm{font-size:var(--fs-body);font-weight:600;letter-spacing:-.022em;line-height:1.28;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;word-break:break-word}
/* The layered price story. Ours must OWN "usual" as our own estimate,and must
   attribute a retailer's list price to that retailer (product invariants §4). */
.wi-app .wi-ps{display:flex;flex-direction:column;gap:3px;flex:none}
.wi-app .wi-ps .wi-lead{font-variant-numeric:tabular-nums;font-size:var(--fs-body);font-weight:500;
  letter-spacing:-.01em;color:var(--primary)}
.wi-app .wi-ps .wi-lead.wi-over{color:var(--error)}
.wi-app .wi-ps .wi-lead.wi-flat{color:var(--onSurfaceVariant);font-weight:400;font-size:var(--fs-bodySm)}
.wi-app .wi-ps .wi-math{font-variant-numeric:tabular-nums;font-size:var(--fs-bodySm);color:var(--onSurfaceVariant)}
.wi-app .wi-ps .wi-math s{opacity:.8}
.wi-app .wi-ps .wi-math b{color:var(--onSurface);font-weight:500;font-size:var(--fs-body)}
.wi-app .wi-disc{font-size:var(--fs-labelSm);line-height:1.4;color:var(--onSurfaceVariant);opacity:.85}
/* Rarity pill — GUIDANCE,never a number and never a verdict word. */
.wi-app .wi-pill{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;border-radius:8px;
  padding:var(--sp-1) var(--sp-3);font-size:var(--fs-labelSm);font-weight:500;margin-top:1px;
  background:var(--secondaryContainer);color:var(--onSecondaryContainer)}
.wi-app .wi-pill.wi-warn{background:var(--surfaceContainerHighest);color:var(--onSurfaceVariant)}
.wi-app .wi-pill svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.wi-app .wi-seller{display:flex;align-items:center;gap:6px;font-size:var(--fs-label);
  color:var(--onSurfaceVariant);margin-top:2px;min-width:0}
.wi-app .wi-seller-txt{flex:1;min-width:0;line-height:1.45;overflow-wrap:anywhere}
.wi-app .wi-seller b{color:var(--onSurface);font-weight:500}
.wi-app .wi-seller svg{flex:none;width:15px;height:15px;margin-top:0;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.wi-app .wi-merchslot{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;flex:none;vertical-align:middle;margin:0;
  background:transparent;border:none;box-shadow:none;padding:0;overflow:visible}
.wi-app .wi-merchfallback{display:grid;place-items:center;width:18px;height:18px;
  background:transparent;border:none;box-shadow:none;padding:0}
.wi-app .wi-merchfallback svg{width:18px;height:18px;margin:0;opacity:.75}
.wi-app .wi-merchlogo{width:18px;height:18px;object-fit:contain;object-position:center;display:block;
  background:transparent;border:none;box-shadow:none;padding:0;border-radius:0}
.wi-app .wi-card.wi-feed .wi-seller .wi-merchslot,.wi-app .wi-card.wi-feed .wi-seller .wi-merchlogo{width:18px;height:18px}
.wi-app .wi-card.wi-feed .wi-seller .wi-merchslot svg{width:18px;height:18px}
.wi-app .wi-aff{opacity:.75;font-size:var(--fs-label)}
/* The card is sized by its content — the feed is one column,so there is no
   neighbour to align to. An earlier height:100% + margin-top:auto pair (added
   when the feed was wrongly a two-column grid) stretched the card to the whole
   scroll height,3085pt,and dropped the buttons to the bottom of it. */
.wi-app .wi-cardfoot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding-top:2px/* optical hairline, not --sp-1 */}
/* A store product that has not been checked yet renders TWO buttons here — "Check Verdict" and
   "View on <store>" — and the first carries wi-wide (width:100%) while the second is width:auto.
   In a nowrap flex row the first claimed the whole line and the second was pushed off the card:
   at 390pt "View on Target" wrapped to three lines and clipped at the screen edge. Only store
   products hit it,which is why the Amazon screens looked fine.
   Wrapping is the fix rather than shrinking: two full-width CTAs stacked read correctly at any
   width,where two squeezed side by side would truncate the store name — and the store name is
   the whole point of that button. */
.wi-app .wi-cardfoot > .wi-btn{max-width:100%;min-width:0}
.wi-app .wi-cardfoot .wi-starb{margin-left:auto}
.wi-app .wi-btn{min-height:52px;border-radius:14px;display:inline-grid;place-items:center;
  font-size:var(--fs-body);font-weight:600;letter-spacing:-.01em;padding:0 22px;
  transition:transform .1s,opacity .15s;justify-self:start;width:auto;
  background:none;border:0;color:inherit;cursor:pointer;font-family:inherit}
.wi-app .wi-btn:active{transform:scale(.975)}
.wi-app .wi-btn.wi-fill{background:var(--appleFill);color:var(--onApple)}
.wi-app .wi-btn.wi-out{background:var(--appleSoft);border:0;color:var(--appleInk)}
.wi-app .wi-btn.wi-sm{min-height:44px;border-radius:12px;font-size:var(--fs-bodySm);padding:0 var(--sp-4)}
/* Hit 44×44; icon/paint stays the old 36 circle (padding + content-box). Negative margin
   keeps cardfoot spacing unchanged. */
.wi-app .wi-starb{width:44px;height:44px;padding:4px;margin:-4px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:var(--onSurfaceVariant);transition:transform .12s;background:none;border:0;cursor:pointer;
  background-clip:content-box;-webkit-background-clip:content-box;position:relative;box-sizing:border-box}
.wi-app .wi-starb:active{transform:scale(.85)}
.wi-app .wi-starb.wi-on{color:var(--primary)}
.wi-app .wi-starb svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.wi-app .wi-starb.wi-on svg{fill:currentColor}
/* Hit targets (HIG 44×44). Prefer growing the element box (measurable) while keeping paint
   via padding/background-clip; overlays only where the parent is too short to host min-height
   (.wi-onb-dot,.wi-lockup). Title buttons still use an overlay — raising them would reflow
   every feed card. */
.wi-app .wi-nm.wi-nmb,.wi-app .wi-hb .wi-ph,.wi-app .wi-lockup{position:relative}
.wi-app .wi-nm.wi-nmb::after,.wi-app .wi-hb .wi-ph::after,.wi-app .wi-lockup::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,44px)}
/* Header lockup: parent topbar is ~29px — min-height alone would grow chrome. Pad to 44 and
   cancel with negative margin so getBoundingClientRect is 44 without moving neighbours. */
.wi-app .wi-head .wi-lockup.wi-lkhead{
  min-height:44px;padding:8px 4px;margin:-8px -4px;box-sizing:border-box;
  align-items:center;overflow:visible}
.wi-app .wi-cardfoot{gap:13px}
.wi-app .wi-starb:focus-visible,.wi-app .wi-btn:focus-visible,.wi-app .wi-lrow:focus-visible{
  outline:2px solid var(--apple);outline-offset:3px}
/* ── list view: detached cards (owner-locked 2026-08-27) ──
   Each deal is its own white rounded card on the grey page — ~10px gap,no shared
   well,no hairlines. Whole card is the tap (onOpen); no View pill. */
.wi-app .wi-lgroup{flex:none;display:flex;flex-direction:column;gap:8px;background:transparent;
  border:0;border-radius:0;overflow:visible;box-shadow:none}
.wi-app[data-theme="dark"] .wi-lgroup{box-shadow:none}
@media (prefers-color-scheme:dark){
  .wi-app[data-theme="system"] .wi-lgroup{box-shadow:none}
}
/* List row — denser Material-ish footprint (2026-09): title ~13.5, price ~16, thumb ~60,
   pad ~10–12, radius 12. Whole card is the tap (onOpen); no View pill. */
.wi-app .wi-lrow{display:flex;gap:12px;align-items:center;background:var(--cardBg);border-radius:12px;
  padding:10px 12px;flex:none;border:0;transition:background .15s,transform .12s;text-align:left;
  box-shadow:0 3px 12px rgba(14,26,43,.06),0 1px 2px rgba(14,26,43,.04);cursor:pointer;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif}
.wi-app .wi-lrow:active{transform:scale(.99);background:var(--cardBg2)}
.wi-app .wi-lthumb{width:60px;height:60px;border-radius:10px;flex:none;display:grid;place-items:center;
  overflow:hidden;background:var(--surfaceContainerLow);position:relative}
.wi-app .wi-lpct{display:none}
/* retired — % lives as teal −N% beside NOW,never on the photo */
.wi-app .wi-lthumb img{max-width:88%;max-height:52px;object-fit:contain;display:block}
/* Verified-only thumb stamp — reuses .wi-vbig mint/amber fills (no new brand hexes). */
.wi-app .wi-lthumb .wi-vbig.wi-lsm{position:absolute;left:4px;bottom:4px;z-index:2;
  font-size:9px;padding:4px 6px 3px;border-radius:5px;transform:rotate(-6deg);
  box-shadow:0 1px 3px rgba(14,26,43,.18);pointer-events:none;letter-spacing:.06em}
.wi-app .wi-lmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;justify-content:center}
/* Title: 1 line when it fits; wrap to 2 then ellipsis. Never reserve 2 lines (no min-height). */
.wi-app .wi-lname{font-size:13.5px;font-weight:700;letter-spacing:-.02em;line-height:1.28;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:0;max-height:calc(1.28em * 2);
  min-width:0;color:var(--onSurface);background:transparent;border:0;padding:0;margin:0;text-align:left;
  font-family:inherit;width:100%;pointer-events:none}
.wi-app .wi-lname.wi-nmb{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;min-height:0;max-height:calc(1.28em * 2);cursor:inherit}
.wi-app .wi-lat{font-size:12px;font-weight:500;color:var(--onSurfaceVariant);line-height:1.3}
.wi-app .wi-lpriceline{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:1px}
.wi-app .wi-lnow{font-variant-numeric:tabular-nums;font-size:16px;font-weight:800;letter-spacing:-.024em;
  color:var(--onSurface)}
.wi-app .wi-loff{font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;color:var(--primary,#14B8A6);
  letter-spacing:-.01em}
.wi-app .wi-lusual{font-variant-numeric:tabular-nums;font-size:13px;font-weight:500;
  color:var(--onSurfaceVariant);line-height:1.3}
.wi-app .wi-lusual s{text-decoration:line-through;text-decoration-thickness:1px}
.wi-app .wi-lrow.wi-store-row{cursor:pointer}
/* Legacy list-row pieces kept inert (View pill retired — whole card is the tap). */
.wi-app .wi-ltop,.wi-app .wi-lbody,.wi-app .wi-linfo,.wi-app .wi-lsub,.wi-app .wi-lact,.wi-app .wi-lstore-row,.wi-app .wi-lchk,.wi-app .wi-llead,.wi-app .wi-lmeta,.wi-app .wi-lstore,.wi-app .wi-lview{display:none}
.wi-app .wi-clr{margin-top:16px;color:var(--onSurfaceVariant);border-color:var(--outlineVariant)}
.wi-app .wi-clr.wi-armed{color:var(--vSKIP);border-color:var(--vSKIP);font-weight:600}
/* ── MOBILE REBUILD — product + verdict surface (step 3) ────────────────────
   The same .wi-card,further along. The prototype calls these "one component at
   three stages of completion",so the additions below are things a card grows
   INTO — a chart,a range strip,a stamp — never a second component.

   The bare line is drawn ONLY from a real price series returned by
   /api/price-history. The prototype's series() invents one from a hash of the
   ASIN when history is missing; that is a demo affordance and porting it would
   break product invariants §4 (no synthetic data styled as real history). No history,no line.
   ───────────────────────────────────────────────────────────────────────── */
.wi-app .wi-plate.wi-xl{height:186px}
/* Verdict / product page: photo stays on the existing plate; everything under it
   uses the homepage-banner panel (same gradient as .wi-onb-hero / .wi-ban-hero). */
/* .wi-body carries NO padding-top on purpose (see its rule — the pad has to sit inside the
   sticky .wi-ptabs box). So the breathing room under the header lives on this card instead,
   as a margin. Without it the 28px corners butt straight into the dark header and the card
   reads as part of the chrome rather than as a sheet laid on the page. */
.wi-app .wi-card.wi-vpage{margin-top:var(--sp-4,16px);padding:0;gap:0;border-radius:28px;overflow:hidden;
  box-shadow:0 10px 32px rgba(14,26,43,.11),0 1px 2px rgba(14,26,43,.05)}
.wi-app[data-theme="dark"] .wi-card.wi-vpage{
  box-shadow:0 12px 36px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3)}
@media (prefers-color-scheme:dark){
  .wi-app[data-theme="system"] .wi-card.wi-vpage{
    box-shadow:0 12px 36px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3)}
}
/* ── Quiet sheet (owner 2026-09-16) ─────────────────────────────────────────
   The card is one white sheet top to bottom. It used to be a flat white slab of photo
   welded to a blue-gradient body, which made the seam the loudest line on the screen and
   left the plate reading as empty rather than as a lit surface. Now the plate is a shallow
   dome and the body is plain --cardBg, so the only edges are the card's own corners.
   No copy changed — every string on this card is the one that was there before.
   The dark-preference gradient below is gone with it: the app is locked to light Apple
   neutrals (see the All Deals lock above --apple), so a navy body here was the one surface
   still fighting that lock. */
.wi-app .wi-card.wi-vpage .wi-plate.wi-xl{height:186px;border-radius:0;margin:0;
  background:radial-gradient(122% 96% at 50% 14%,#fff 0%,#f5f7fa 60%,#eceff5 100%)}
/* The plate is no longer pure white, and supplier photos are white-backed JPEGs — so the
   photo's own white square shows as a bright box on the dome. multiply is the fix the rest of
   the site already uses (Clip & Save wells, All Deals plates): white multiplied by the plate IS
   the plate, so the box disappears, while the product multiplies against a near-white value and
   is left essentially untouched. Only correct because this gradient never goes darker than
   #eceff5 — do not reuse it over a dark plate. */
.wi-app .wi-card.wi-vpage .wi-plate.wi-xl img{max-height:160px;max-width:62%;
  mix-blend-mode:multiply}
.wi-app .wi-card.wi-vpage .wi-vbelow{display:flex;flex-direction:column;gap:10px;
  padding:17px 20px 18px;background:var(--cardBg)}
/* The store chip rides on the plate. .wi-vtag's mono caps are the feed's shelf voice;
   on the product sheet it is a name, so it gets sentence case and the merchant's own mark. */
.wi-app .wi-card.wi-vpage .wi-plate .wi-vtag{left:12px;top:12px;display:inline-flex;
  align-items:center;gap:6px;font-family:inherit;font-size:12.5px;font-weight:750;line-height:1;
  letter-spacing:-.005em;text-transform:none;
  color:var(--onSurface);background:rgba(255,255,255,.95);border:1px solid rgba(29,29,31,.09);
  padding:5px 12px 5px 6px;border-radius:999px;box-shadow:0 2px 10px rgba(14,26,43,.09)}
.wi-app .wi-card.wi-vpage .wi-plate .wi-vtag .wi-merchslot,
.wi-app .wi-card.wi-vpage .wi-plate .wi-vtag .wi-merchlogo{width:16px;height:16px}
/* Only the "no price yet" line becomes a pill — it is the one case where the slot is empty and
   a bare grey sentence reads as the card having failed. A real price keeps its own weight, so
   the rule is gated on the <b> that wraps every rendered amount. */
.wi-app .wi-card.wi-vpage .wi-ps .wi-math:not(:has(b)){align-self:flex-start;
  padding:7px 13px;border-radius:999px;background:var(--surface);
  font-size:var(--fs-bodySm);font-weight:650;color:var(--onSurfaceVariant)}
/* "Verdict" over the card. It carries the gap from the header, so the card drops its own. */
.wi-app .wi-vsechead{margin-top:var(--sp-4,16px)}
.wi-app .wi-vsechead + .wi-card.wi-vpage{margin-top:0}
/* The failure line was loose red body copy on the page — it read as the app breaking rather
   than as this listing not having a price yet. Same sentence, given a surface. */
.wi-app .wi-vnote{display:flex;align-items:flex-start;gap:9px;margin-top:12px;
  padding:13px 14px;border-radius:14px;background:#FFF4F3;border:1px solid #F6CFC9;
  color:#8A2018;font-size:var(--fs-bodySm);line-height:1.45}
.wi-app .wi-vnote svg{flex:none;margin-top:2px;width:15px;height:15px}
.wi-app .wi-card.wi-vpage .wi-vphoto{display:flex;flex-direction:column;min-width:0}
.wi-app .wi-card.wi-vpage .wi-pmeta{padding:12px 16px 8px;box-sizing:border-box}
.wi-app .wi-card.wi-vpage .wi-plate .wi-shareb{top:10px;right:10px;background:rgba(255,255,255,.94);
  box-shadow:0 2px 10px rgba(14,26,43,.14)}
.wi-app .wi-plate .wi-platepct{position:absolute;top:10px;left:10px;z-index:4}
.wi-app .wi-plateseen{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:3;
  pointer-events:none;max-width:calc(100% - 20px);text-align:center;font-size:var(--fs-labelSm);
  font-weight:500;color:var(--onSurfaceVariant);background:rgba(255,255,255,.92);padding:5px 12px;
  border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 1px 4px rgba(14,26,43,.08)}
.wi-app[data-theme="dark"] .wi-plateseen{background:rgba(16,24,40,.88);color:var(--onSurface)}
@media (prefers-color-scheme:dark){
  .wi-app[data-theme="system"] .wi-plateseen{background:rgba(16,24,40,.88);color:var(--onSurface)}
}
.wi-app .wi-card.wi-vpage .wi-brandline{margin:0}
.wi-app .wi-card.wi-vpage .wi-nm{font-size:22px;font-weight:700;letter-spacing:-.022em;line-height:1.18}
.wi-app .wi-card.wi-vpage .wi-ps .wi-math{font-size:var(--fs-body);font-weight:500}
.wi-app .wi-card.wi-vpage .wi-ps .wi-math b{font-size:var(--fs-titleSm);font-weight:700}
.wi-app .wi-card.wi-vpage .wi-plate .wi-platepct{
  font-size:var(--fs-bodySm);font-weight:700;padding:6px 12px;border-radius:10px}
.wi-app .wi-card.wi-vpage .wi-cardfoot{padding-top:8px}
.wi-app .wi-card.wi-vpage .wi-sig{border-top-color:color-mix(in srgb, var(--onSurface) 14%, transparent)}
/* Clip the stamp to the photo. overflow:visible let a rotated KØB/BUY hang
   out of the plate and sit on the "% under" badge above it (iOS QA,15 Aug). */
.wi-app .wi-plate.wi-stamped{margin-bottom:0;overflow:hidden}
/* Feed stamps sit on the BOTTOM of the photo so they cannot collide with the
   discount chip in .wi-pmeta. The verdict SCREEN (.wi-in) keeps the original
   top-left placement — that card has no % badge. */
.wi-app .wi-card .wi-stamp{font-size:var(--fs-title);padding:var(--sp-3) var(--sp-4);border-radius:14px;gap:8px}
.wi-app .wi-card .wi-stamp svg{width:22px;height:22px}
.wi-app .wi-plate.wi-xl .wi-stamp{font-size:var(--fs-title);padding:var(--sp-3) var(--sp-4);border-radius:14px;gap:8px}
.wi-app .wi-plate.wi-xl .wi-stamp svg{width:28px;height:28px}
/* List-row variant: the card stamp is absolutely positioned against the image plate,which
   a compact row has no room for. Same element and same colour,set inline in the text column.
   (0,3,0) beats the base .wi-app .wi-stamp (0,2,0),so position must be reset explicitly. */
.wi-app .wi-stamp.wi-lsm{position:static;align-self:flex-start;font-size:var(--fs-label);
  padding:var(--sp-1) var(--sp-2);border-radius:9px;gap:5px;margin:1px 0 2px;box-shadow:none;letter-spacing:.02em}
.wi-app .wi-stamp.wi-lsm svg{width:14px;height:14px;stroke-width:3.2}
.wi-app .wi-stamp{position:absolute;left:8px;top:auto;bottom:8px;border-radius:14px;padding:var(--sp-3) 16px;
  font-size:var(--fs-title);font-weight:700;letter-spacing:.04em;display:flex;align-items:center;
  gap:8px;z-index:4;white-space:nowrap;box-shadow:0 10px 28px -10px rgba(0,0,0,.45);
  transform:rotate(-4deg);transform-origin:left bottom}
.wi-app .wi-stamp.wi-in{top:8px;bottom:auto;transform-origin:left top}
.wi-app .wi-stamp svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round}
/* Stamp ink,measured rather than assumed. White reads on dark BUY/SKIP fills;
   WAIT cyan (#0099B3 / #00A0BB) fails white in BOTH themes (~3.1–3.4),so WAIT
   uses dark ink. Dark BUY mint needs --onV (near-black). Do not darken --v*. */
.wi-app .wi-stamp{color:#ffffff}
.wi-app .wi-stamp.wi-v-BUY{color:var(--onV)}
.wi-app .wi-stamp.wi-v-WAIT{color:#141018}
@keyframes wiStamp{from{opacity:0;transform:rotate(-4deg) scale(1.9)}to{opacity:1;transform:rotate(-4deg) scale(1)}}
.wi-app .wi-stamp.wi-in{animation:wiStamp .42s cubic-bezier(.2,1.5,.4,1) both}
.wi-app .wi-spark svg{display:block;width:100%;overflow:visible}
.wi-app .wi-rng{font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px;
  font-size:var(--fs-labelSm);color:var(--onSurfaceVariant)}
.wi-app .wi-rng .wi-mono{padding:var(--sp-1) var(--sp-3);border-radius:9px;background:var(--primary);
  color:var(--onPrimary);font-size:var(--fs-label);font-weight:600;letter-spacing:-.01em;
  flex:none;white-space:nowrap}
.wi-app .wi-rng .wi-m{flex:1;height:3px;border-radius:2px;background:var(--outlineVariant);position:relative}
.wi-app .wi-rng .wi-m i{position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;
  transform:translateX(-50%);background:var(--onSurfaceVariant)}
.wi-app .wi-vwhy{font-size:var(--fs-bodySm);line-height:1.45;color:var(--onSurfaceVariant)}
.wi-app .wi-mstats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;flex:none}
.wi-app .wi-mtile{background:var(--cardBg2);border-radius:15px;padding:var(--sp-3) 12px;display:flex;
  flex-direction:column;gap:3px;min-width:0}
/* Marks the tile that carries the verdict colour; the tint itself is inline,because it is mixed from whichever verdict came back. */
.wi-app .wi-mnow{}
.wi-app .vchart{margin:4px 0 2px;border:1px solid var(--outlineVariant);border-radius:16px;
  padding:12px 8px 8px;background:var(--cardBg);box-shadow:none}
.wi-app .vchart-title{font-size:var(--fs-body);font-weight:700;color:var(--onSurface);letter-spacing:-.02em}
.wi-app .vchart-head .rngrow{background:var(--surfaceContainerHigh)}
.wi-app .vchart .rng{color:var(--onSurfaceVariant);min-height:32px;padding:6px 10px}
.wi-app .vchart .rng.on{background:var(--cardBg);color:var(--onSurface);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.wi-app .vchart .vc-read{color:var(--onSurfaceVariant);font-size:var(--fs-label)}
.wi-app .wi-mk{font-size:var(--fs-labelSm);color:var(--onSurfaceVariant);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.wi-app .wi-mv{font-family:'RbM',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-titleSm);
  font-weight:500;letter-spacing:-.02em}
/* Non-Amazon link: the "no verdict here" notice. Amber-tinted rather than red —
   nothing went wrong,we simply cannot judge a store listing against a year of
   Amazon prices. Ink on a soft ground so it reads as an explanation,not an error,and the label colour is --wait-deep,which clears AA on this tint (the bright
   --wait is a FILL and measures 3.05:1 as type). */
.wi-app .wi-nova{display:flex;gap:11px;align-items:flex-start;margin:2px 0 16px;
  background:#FFF7E6;border:1px solid #F3E2BC;border-radius:14px;padding:13px 14px}
.wi-app .wi-nova-i{flex:none;width:20px;height:20px;color:#8A6304;display:block}
.wi-app .wi-nova-i svg{width:20px;height:20px;display:block}
.wi-app .wi-nova-t{font-size:13.5px;line-height:1.45;color:#4B4030}
.wi-app .wi-nova-t b{display:block;font-size:14.5px;font-weight:800;color:#3A3016;margin-bottom:3px}
.wi-app[data-theme="dark"] .wi-nova{background:#2A2110;border-color:#4A3C1B}
.wi-app[data-theme="dark"] .wi-nova-t{color:#E4D7BC}
.wi-app[data-theme="dark"] .wi-nova-t b{color:#FBEFD6}
.wi-app[data-theme="dark"] .wi-nova-i{color:#F0C97A}
.wi-app .wi-mnote{font-size:var(--fs-label);line-height:1.45;color:var(--onSurfaceVariant)}
.wi-app .wi-muse-sec{margin:12px 0 0}
.wi-app .wi-muse-sec-note{margin-top:8px;font-size:var(--fs-label);line-height:1.4;color:var(--onSurfaceVariant)}
.pp .wi-muse-sec-note{margin:8px 0 0;font-size:13px;line-height:1.4;color:var(--mute,#6E6E73)}
.wi-app .osay{position:relative;overflow:hidden;flex:none;margin:10px 0 0;border:0;border-radius:28px;
  background:var(--onb-card, var(--cardBg));color:var(--onb-label, var(--onSurface));
  box-shadow:0 10px 32px rgba(14,26,43,.11),0 1px 2px rgba(14,26,43,.05);padding:0}
.wi-app[data-theme="dark"] .osay{box-shadow:0 12px 36px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3)}
@media (prefers-color-scheme:dark){
  .wi-app[data-theme="system"] .osay{box-shadow:0 12px 36px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3)}
}
.wi-app .osay-hero{position:relative;height:148px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(165deg,#E8F1FF 0%,#F5F7FA 55%,#EEF2F8 100%)}
.wi-app[data-theme="dark"] .osay-hero{background:linear-gradient(165deg,#0A2540 0%,#12263A 100%)}
@media (prefers-color-scheme:dark){
  .wi-app[data-theme="system"] .osay-hero{background:linear-gradient(165deg,#0A2540 0%,#12263A 100%)}
}
.wi-app .osay-mark{display:none}
.wi-app .osay-score{text-align:center}
.wi-app .osay-score-n{font-size:56px;font-weight:800;letter-spacing:-.04em;line-height:1;
  color:var(--onb-label, var(--onSurface))}
.wi-app .osay-score-n span{font-size:22px;font-weight:700;color:var(--onb-secondary, var(--onSurfaceVariant));margin-left:2px}
.wi-app .osay-score-k{font-size:var(--fs-label);color:var(--onb-secondary, var(--onSurfaceVariant));margin-top:6px}
.wi-app[data-theme="dark"] .osay-score-n,.wi-app[data-theme="dark"] .osay-score-k{color:#fff}
.wi-app[data-theme="dark"] .osay-score-n span{color:rgba(255,255,255,.7)}
@media (prefers-color-scheme:dark){
  .wi-app[data-theme="system"] .osay-score-n,.wi-app[data-theme="system"] .osay-score-k{color:#fff}
  .wi-app[data-theme="system"] .osay-score-n span{color:rgba(255,255,255,.7)}
}
.wi-app .osay-hero-rev{width:min(236px,74%);background:var(--onb-chip, var(--cardBg));border-radius:18px;
  padding:14px 16px 15px;box-shadow:0 10px 28px rgba(14,26,43,.14)}
.wi-app .osay-hero-stars{display:flex;justify-content:center;gap:3px;margin:0 0 10px;color:#e8933a}
.wi-app .osay-hero-stars svg{width:16px;height:16px;fill:currentColor;display:block}
.wi-app .osay-hero-stats{margin:0;font-size:13px;font-weight:600;letter-spacing:-.01em;text-align:center;
  color:var(--onb-label, var(--onSurface))}
.wi-app .osay-copy{padding:18px 20px 18px}
.wi-app .osay-h{position:relative;z-index:1;margin:0 0 4px}
.wi-app .osay-eye{font-size:13px;font-weight:600;letter-spacing:-.01em;text-transform:none;
  color:var(--onb-label, var(--onSurface));margin:0 0 4px}
.wi-app .osay-title{color:var(--onb-label, var(--onSurface));font-size:22px;font-weight:700;letter-spacing:-.022em;
  line-height:1.18;font-style:normal;font-family:inherit}
.wi-app .osay-sub,.wi-app .osay-src{position:relative;z-index:1;color:var(--onb-secondary, var(--onSurfaceVariant))}
.wi-app .osay-src{margin-top:12px;font-size:13px;line-height:1.4;text-align:center}
.wi-app .osay-sorry{margin:14px 0 0}
.wi-app .osay-sorry-h{font-size:16px;font-weight:700;letter-spacing:-.015em;line-height:1.3;
  color:var(--onb-label, var(--onSurface))}
.wi-app .osay-sorry-p{font-size:15px;font-weight:400;line-height:1.35;margin:6px 0 0;
  color:var(--onb-secondary, var(--onSurfaceVariant))}
.wi-app .osay-go{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;
  appearance:none;-webkit-appearance:none;border:0;padding:12px 16px;margin-top:14px;font:inherit;font-weight:600;
  cursor:pointer;background:var(--appleFill, var(--apple));color:#fff;border-radius:999px;font-size:16px;min-height:50px;
  letter-spacing:-.01em;line-height:1.2;text-align:center;white-space:normal;text-wrap:balance;
  box-sizing:border-box;min-width:0;max-width:100%;height:auto}
.wi-app .osay-go-nudge{animation:wiHonestPulse 1.8s ease-in-out infinite;box-shadow:0 0 0 0 rgba(36,139,240,.45)}
.wi-app .osay-go:disabled{opacity:.55;cursor:wait;animation:none;box-shadow:none}
@media (prefers-reduced-motion:reduce){
  .wi-app .osay-go-nudge{animation:none;box-shadow:none}
}
.wi-app .osay-go:hover:not(:disabled){background:var(--appleFill, var(--apple));filter:none}
.wi-app .osay-chip{color:var(--onb-secondary, var(--onSurfaceVariant));
  background:var(--onb-fill3, color-mix(in srgb, var(--onSurface) 14%, transparent));
  border:1px solid var(--outlineVariant)}
.wi-app .osay-balance{position:relative;z-index:1;margin:14px 0 12px}
.wi-app .osay-balancek{font-size:var(--fs-labelSm);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--onb-secondary, var(--onSurfaceVariant));margin:0 0 10px}
.wi-app .osay-row{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.wi-app .osay-rowtrack{flex:1;height:10px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb, var(--onSurface) 12%, transparent)}
.wi-app .osay-mixw{display:block;height:100%;background:#C7C7CC;min-width:8px;border-radius:999px}
.wi-app .osay-mixl{display:block;height:100%;background:var(--apple);min-width:8px;border-radius:999px}
.wi-app .osay-mixwlab{color:var(--onb-secondary, var(--onSurfaceVariant));font-size:var(--fs-bodySm);font-weight:700;
  flex:none;min-width:7.6em;text-align:right}
.wi-app .osay-mixllab{color:var(--apple);font-size:var(--fs-bodySm);font-weight:700;flex:none;min-width:7.6em;text-align:right}
.wi-app .osay-k{margin:12px 0 6px;text-transform:none;letter-spacing:.01em;font-weight:600;font-size:var(--fs-label)}
.wi-app .osay-k.gripes{color:var(--onb-secondary, var(--onSurfaceVariant));text-align:left}
.wi-app .osay-k.praise{color:var(--apple);text-align:right}
.wi-app .osay-voices{display:flex;flex-direction:column;gap:2px}
.wi-app .osay-ul{margin:0;padding:0 0 0 8px;list-style:none;display:flex;flex-direction:column;gap:3px}
.wi-app .osay-ul.osay-out{align-items:flex-end;padding:0 8px 0 0}
.wi-app .osay-ul li,.wi-app .osay-q{position:relative;color:inherit;font-family:inherit;font-style:normal;
  font-size:var(--fs-body);line-height:1.28;padding:9px 13px;max-width:82%;word-wrap:break-word}
.wi-app .osay-q.osay-gripe,.wi-app .osay-ul li.osay-gripe{
  background:#E9E9EB;color:#111;border:0;border-radius:18px;margin:0}
.wi-app .osay-q.osay-love,.wi-app .osay-ul li.osay-love{
  background:var(--apple);color:var(--onApple);border:0;border-radius:18px;margin:0}
.wi-app .osay-q.osay-gripe.osay-tail,.wi-app .osay-ul li.osay-gripe.osay-tail{border-bottom-left-radius:4px}
.wi-app .osay-q.osay-love.osay-tail,.wi-app .osay-ul li.osay-love.osay-tail{border-bottom-right-radius:4px}
.wi-app .osay-q.osay-gripe.osay-tail::after,.wi-app .osay-ul li.osay-gripe.osay-tail::after{
  content:"";position:absolute;left:-5px;bottom:0;width:14px;height:12px;background:#E9E9EB;
  clip-path:polygon(100% 0,100% 100%,0 100%)}
.wi-app .osay-q.osay-love.osay-tail::after,.wi-app .osay-ul li.osay-love.osay-tail::after{
  content:"";position:absolute;right:-5px;bottom:0;width:14px;height:12px;background:var(--apple);
  clip-path:polygon(0 0,100% 100%,0 100%)}
.wi-app[data-theme="dark"] .osay-q.osay-gripe,.wi-app[data-theme="dark"] .osay-ul li.osay-gripe,.wi-app[data-theme="dark"] .osay-q.osay-gripe.osay-tail::after,.wi-app[data-theme="dark"] .osay-ul li.osay-gripe.osay-tail::after{
  background:#3A3A3C;color:#fff}
@media (prefers-color-scheme:dark){
  .wi-app:not([data-theme="light"]) .osay-q.osay-gripe,
  .wi-app:not([data-theme="light"]) .osay-ul li.osay-gripe,
  .wi-app:not([data-theme="light"]) .osay-q.osay-gripe.osay-tail::after,
  .wi-app:not([data-theme="light"]) .osay-ul li.osay-gripe.osay-tail::after{background:#3A3A3C;color:#fff}
}
.wi-app .wi-ban{position:relative;overflow:hidden;flex:none;margin:10px 0 0;border:0;border-radius:28px;
  background:var(--onb-card, var(--cardBg));color:var(--onb-label, var(--onSurface));
  box-shadow:0 10px 32px rgba(14,26,43,.11),0 1px 2px rgba(14,26,43,.05);padding:0}
.wi-app[data-theme="dark"] .wi-ban{box-shadow:0 12px 36px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3)}
@media (prefers-color-scheme:dark){
  .wi-app[data-theme="system"] .wi-ban{box-shadow:0 12px 36px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3)}
}
.wi-app .wi-ban-hero{position:relative;min-height:148px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(165deg,#E8F1FF 0%,#F5F7FA 55%,#EEF2F8 100%);padding:18px 0}
.wi-app[data-theme="dark"] .wi-ban-hero{background:linear-gradient(165deg,#0A2540 0%,#12263A 100%)}
@media (prefers-color-scheme:dark){
  .wi-app[data-theme="system"] .wi-ban-hero{background:linear-gradient(165deg,#0A2540 0%,#12263A 100%)}
}
.wi-app .wi-ban-copy{padding:18px 20px 18px}
.wi-app .wi-ban-eye{font-size:13px;font-weight:600;letter-spacing:-.01em;text-transform:none;
  color:var(--onb-label, var(--onSurface));margin:0 0 4px}
.wi-app .wi-ban-h{font-size:22px;font-weight:700;letter-spacing:-.022em;line-height:1.18;
  color:var(--onb-label, var(--onSurface));margin:0}
.wi-app .wi-ban-cap{font-size:15px;font-weight:400;line-height:1.35;
  color:var(--onb-secondary, var(--onSurfaceVariant));margin:8px 0 0}
.wi-app .wi-honest{margin-top:14px}
.wi-app .wi-honest-hint{margin:0 0 8px;font-size:13px;line-height:1.35;
  color:var(--onb-secondary, var(--onSurfaceVariant))}
.wi-app .wi-honest-go{appearance:none;border:0;width:100%;background:var(--appleFill, var(--apple));color:#fff;
  font:inherit;font-size:15px;font-weight:600;min-height:44px;border-radius:12px;cursor:pointer;letter-spacing:-.01em;
  animation:wiHonestPulse 1.8s ease-in-out infinite;box-shadow:0 0 0 0 rgba(36,139,240,.45)}
.wi-app .wi-honest-go:disabled{opacity:.55;cursor:wait;animation:none;box-shadow:none}
@keyframes wiHonestPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(36,139,240,.42)}
  50%{transform:scale(1.03);box-shadow:0 0 0 10px rgba(36,139,240,0)}
}
@media (prefers-reduced-motion:reduce){
  .wi-app .wi-honest-go{animation:none;box-shadow:none}
}
.wi-app .wi-honest-beats{display:flex;flex-direction:column;gap:10px}
.wi-app .wi-honest-beat{background:var(--onb-chip, var(--surfaceContainerLowest));border-radius:12px;padding:10px 12px}
.wi-app .wi-honest-k{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--onb-secondary, var(--onSurfaceVariant));margin:0 0 4px}
.wi-app .wi-honest-t{margin:0;font-size:15px;line-height:1.4;color:var(--onb-label, var(--onSurface))}
.wi-app .wi-honest-src{margin:8px 0 0;font-size:12px;line-height:1.35;
  color:var(--onb-secondary, var(--onSurfaceVariant))}
.wi-app .wi-honest-paused{margin:0;font-size:13px;line-height:1.35;
  color:var(--onb-secondary, var(--onSurfaceVariant))}
.wi-app .wi-ban-foot{display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:13px;color:var(--onb-secondary, var(--onSurfaceVariant));padding:10px 2px 0;text-align:center}
.wi-app .wi-ban-verdict .wi-ban-foot{overflow:visible;flex-direction:column;align-items:stretch}
.wi-app .wi-ban-cta{width:100%;border:0;background:var(--appleFill, var(--apple));color:#fff;font:inherit;
  font-size:16px;font-weight:600;min-height:50px;border-radius:999px;cursor:pointer;letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;padding:12px 16px;
  line-height:1.2;text-align:center;white-space:normal;text-wrap:balance;
  box-sizing:border-box;min-width:0;max-width:100%;height:auto}
.wi-app .wi-ban-stamp{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  background:var(--onb-chip, var(--surfaceContainerLowest));color:var(--onb-label, var(--onSurface));
  font-size:17px;font-weight:700;letter-spacing:-.01em;box-shadow:0 6px 18px rgba(14,26,43,.12)}
.wi-app .wi-ban-stamp i{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none;color:#fff}
.wi-app .wi-ban-stamp i.wi-v-BUY{color:var(--onV)}
.wi-app .wi-ban-stamp i.wi-v-WAIT{color:#141018}
.wi-app .wi-ban-stamp i svg{width:12px;height:12px;display:block;stroke:currentColor;fill:none;
  stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.wi-app .wi-ban-pills{display:flex;gap:8px;justify-content:center;width:100%;padding:0 14px;box-sizing:border-box}
.wi-app .wi-ban-pill{flex:1;min-width:0;background:var(--onb-chip, var(--surfaceContainerLowest));border-radius:16px;
  padding:10px 8px;text-align:center;box-shadow:0 6px 18px rgba(14,26,43,.10)}
.wi-app .wi-ban-pk{display:block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--onb-secondary, var(--onSurfaceVariant));margin-bottom:4px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.wi-app .wi-ban-pv{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--onb-label, var(--onSurface))}
.wi-app .wi-ban .vchart{margin:12px 0 0;border:0;border-radius:0;padding:0;background:transparent;box-shadow:none}
.wi-app .wi-ban .vchart-title{display:none}
.wi-app .wi-ban .vchart-head{margin:0 0 8px}
.wi-app .wi-ban .wi-cmp{margin-top:12px}
.wi-app .wi-ban-cmp{width:min(252px,78%);background:var(--onb-chip, var(--surfaceContainerLowest));
  border-radius:18px;padding:10px 14px;box-shadow:0 10px 28px rgba(14,26,43,.14)}
.wi-app .wi-ban-cmprow{display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:.5px solid color-mix(in srgb, var(--onSurface) 12%, transparent)}
.wi-app .wi-ban-cmprow:last-child{border-bottom:0}
.wi-app .wi-ban-cmpav{position:relative;width:22px;height:22px;flex:none;border-radius:6px;overflow:hidden;
  background:var(--surfaceContainer);display:grid;place-items:center}
.wi-app .wi-ban-cmpav img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.wi-app .wi-ban-cmpav i{font-style:normal;font-size:11px;font-weight:700;color:var(--onSurfaceVariant)}
.wi-app .wi-ban-cmpn{flex:1;min-width:0;font-size:13px;font-weight:600;letter-spacing:-.01em;
  color:var(--onb-label, var(--onSurface))}
.wi-app .wi-ban-cmpbar{display:block;height:8px;border-radius:999px;background:color-mix(in srgb, var(--onSurface) 16%, transparent);
  flex:none}
.wi-app .wi-ban-cmprow:nth-child(1) .wi-ban-cmpbar{width:52px}
.wi-app .wi-ban-cmprow:nth-child(2) .wi-ban-cmpbar{width:40px}
.wi-app .wi-ban-cmprow:nth-child(3) .wi-ban-cmpbar{width:64px}
.wi-app .wi-vacts{display:flex;flex-direction:column;gap:9px;flex:none}
.wi-app .wi-alert-block{margin-top:10px}
.wi-app .wi-math-member{color:var(--blue,#2f74d0);font-weight:700}
.wi-app .wi-arow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:52px;padding:0 16px;border-radius:16px;background:var(--cardBg);box-shadow:var(--e1);
  border:0;cursor:pointer;font-family:inherit;font-size:var(--fs-bodySm);color:var(--onSurface);
  text-align:left;width:100%}
.wi-app .wi-aic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none}
.wi-app .wi-aic svg{width:18px;height:18px;color:inherit}
.wi-app .wi-alab{flex:1;min-width:0}
.wi-app .wi-arow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;color:var(--onSurfaceVariant);flex:none}
.wi-app .wi-cmp{display:flex;flex-direction:column;gap:0}
.wi-app .wi-cmpav{position:relative;width:28px;height:28px;flex:none;border-radius:9px;overflow:hidden;
  background:var(--secondaryContainer);display:grid;place-items:center}
.wi-app .wi-cmpav i{font-style:normal;font-size:var(--fs-label);font-weight:700;color:var(--onSecondaryContainer)}
.wi-app .wi-cmpav img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  background:#fff;padding:var(--sp-1)}
.wi-app .wi-cmpn{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;
  white-space:normal;overflow:visible;line-height:1.3}
.wi-app .wi-cmpstore{font-weight:650;color:var(--onSurface);letter-spacing:-.01em}
.wi-app .wi-cmpbest{flex:none;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--vBUY) 16%,transparent);
  color:var(--vBUY)}
.wi-app .wi-cmptick{display:inline-grid;place-items:center;width:14px;height:14px;flex:none;
  border-radius:50%;background:var(--vBUY);color:#fff}
.wi-app .wi-cmptick svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round}
.wi-app .wi-cmpc{flex:none;font-size:var(--fs-labelSm);font-weight:700;letter-spacing:.04em;
  padding:2px var(--sp-2);border-radius:5px;background:var(--surfaceContainerHighest);color:var(--onSurfaceVariant)}
.wi-app .wi-cmpgo{flex:none;font-size:var(--fs-label);font-weight:600;color:var(--secondary)}
.wi-app .wi-cmppr{grid-column:3;display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  font-family:'RbM',monospace;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.wi-app .wi-cmppr b{font-weight:700;font-size:var(--fs-bodySm);color:var(--onSurface)}
.wi-app .wi-cmpview{grid-column:4;flex:none;min-height:34px;padding:0 14px;border-radius:999px;
  border:0;background:var(--appleFill,var(--apple));color:var(--onApple,#fff);
  font-size:13px;font-weight:650;cursor:pointer;white-space:nowrap;line-height:34px;
  transition:opacity .15s ease, transform .15s ease}
.wi-app .wi-cmpview:hover{opacity:.92}
.wi-app .wi-cmpview:active{opacity:.88;transform:scale(.98)}
.wi-app .wi-cmpview:focus-visible{outline:2px solid var(--appleFill,var(--apple));outline-offset:2px}
.wi-app .wi-cmpview--off{visibility:hidden;pointer-events:none}
.wi-app .wi-cmpoff{font-family:inherit;font-size:10.5px;font-weight:650;letter-spacing:.01em;
  color:var(--vBUY)}
.wi-app .wi-cmpoff.wi-over{color:var(--onSurfaceVariant);font-weight:550}
.wi-app .wi-sk{display:block;border-radius:6px;background:linear-gradient(90deg,
  var(--surfaceContainerHigh) 25%,var(--surfaceContainerHighest) 37%,var(--surfaceContainerHigh) 63%);
  background-size:400% 100%;animation:wiSk 1.2s ease-in-out infinite}
.wi-app .wi-cmpav.wi-sk{border-radius:8px}
.wi-app .wi-cmpskel{pointer-events:none}
.wi-app .wi-skl{height:12px;width:42%}
.wi-app .wi-skp{height:12px;width:48px;flex:none}
@keyframes wiSk{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){.wi-app .wi-sk{animation:none}}
.wi-app .wi-card.wi-checking{border:0;background:transparent;box-shadow:none}
.wi-app .wi-checking-plate{overflow:hidden;background:var(--cardBg2)}
.wi-app .wi-checking-shimmer{width:100%;aspect-ratio:1;background:linear-gradient(90deg,
  var(--surfaceContainerHigh) 20%,var(--surfaceContainerHighest) 45%,var(--surfaceContainerHigh) 70%);
  background-size:220% 100%;animation:wiSk 1.35s ease-in-out infinite}
/* ── "The walk" — the wait IS the progress bar (owner 2026-09-16) ────────────────────────────
   Replaces the aisle scene. One rail across the bottom with four stations — greet, history,
   stores, verdict. Wi walks it left to right, the fill follows him, each station lights as he
   arrives, and the set for that step builds around him while he stands there.

   The reason this structure and not a prettier one: it DEGRADES HONESTLY. Every previous version
   was a story with a payoff, so a verdict arriving at 6s cut it off mid-sentence and a failure at
   28s cut it off mid-gavel — which is how a green BUY stamp ended up playing before a share that
   could not read a price at all. Here, position IS progress: land early and he is simply partway
   along the rail; fail late and he stops at a station. Nothing is left unpaid, because nothing
   was promised.

   The bench stays empty. The animation never states a verdict it does not have.

   It plays TWICE (24s) and holds, just inside WI_SHARE_DEADLINE_MS. Blur is never animated — this
   screen runs while the device is already busy with the fetch it is covering. */
.wi-app .wi-checking-scene{position:relative;width:100%;height:100%;min-height:180px;overflow:hidden;
  background:linear-gradient(180deg,#EEF5F4 0%,#E6F0EE 100%)}
.wi-app .wi-cs-ground{position:absolute;left:0;right:0;bottom:0;height:52px;background:#DCE9E6}
.wi-app .wi-cs-rail{position:absolute;left:20px;right:20px;bottom:44px;height:5px;border-radius:3px;
  background:#CFDEDB}
/* The fill is now a STATE, not a timeline: it moves when the stage class changes and otherwise
   holds, with a slow creep inside the current stage so the screen still reads as live. A
   transition cannot run ahead of reality the way a keyframe can. */
/* stage 0 is the resting state — declared rather than implied, so the class is real */
.wi-app .wi-checking-scene.wi-cs-a0{--wi-cs-stage:0}
/* No creep animation on the rail. An infinite animation and a transition competing for the same
   box left `width` owned by the animation origin, so the stage rules — and even an inline style —
   were silently ignored and the fill stayed pinned at 6%. The character's idle beats already say
   "still working"; the rail only has to be honest about position. */
.wi-app .wi-cs-fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
  background:linear-gradient(90deg,#14B8A6,#23D17E);width:6%;
  transition:width 1.15s cubic-bezier(.3,1,.35,1)}
.wi-app .wi-checking-scene.wi-cs-a1 .wi-cs-fill{width:30%}
.wi-app .wi-checking-scene.wi-cs-a2 .wi-cs-fill{width:66%}

.wi-app .wi-cs-stn{position:absolute;bottom:36px;width:21px;height:21px;border-radius:50%;background:#fff;
  border:3px solid #CFDEDB;display:grid;place-items:center;font-size:10px;line-height:1}
.wi-app .wi-cs-stn.n2{left:16%}.wi-app .wi-cs-stn.n3{left:52%}.wi-app .wi-cs-stn.n4{left:88%}
/* stations light on real arrival, not on a schedule */
.wi-app .wi-cs-stn{transition:border-color .4s ease}
.wi-app .wi-checking-scene.wi-cs-a1 .wi-cs-stn.n2{border-color:#23D17E}
.wi-app .wi-checking-scene.wi-cs-a2 .wi-cs-stn.n2,
.wi-app .wi-checking-scene.wi-cs-a2 .wi-cs-stn.n3{border-color:#23D17E}
.wi-app .wi-cs-lab{position:absolute;bottom:13px;font-size:9px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#8fa3a0;transform:translateX(-50%);white-space:nowrap}
.wi-app .wi-cs-lab.n2{left:18.5%}.wi-app .wi-cs-lab.n3{left:54.5%}.wi-app .wi-cs-lab.n4{left:90.5%}
.wi-app .wi-cs-walk{position:absolute;bottom:50px;left:8%;transform:translateX(-50%);
  transition:left 1.15s cubic-bezier(.3,1,.35,1)}
.wi-app .wi-checking-scene.wi-cs-a1 .wi-cs-walk{left:32%}
.wi-app .wi-checking-scene.wi-cs-a2 .wi-cs-walk{left:68%}
/* Bouncing stops when the walking does — 21 hops is exactly 9.5s. After that he shifts to the
   waiting state, which is an IDLE, not a restart: looping an idle reads as "still here", looping a
   journey reads as "we started over".

   But ONE sway on a 3s loop read as frozen — worse than looping, because frozen looks broken. A
   person waiting does several different small things, so the wait is now a 10.2s sequence of three
   distinct beats (watch, notes, glance) carried by the props below. The body keeps only a slow
   shift of weight underneath them; the variety is what says "occupied" rather than "stuck". */
/* ── animation craft on the character ────────────────────────────────────────────────────────
   Six things separate motion that reads as alive from motion that reads as a tween, and the rig
   had none of them. All six are cheap; none of them is illustration.

   1 ANTICIPATION   he crouches before he sets off, so the move is caused rather than applied
   2 FOLLOW-THROUGH the travel easing overshoots and settles instead of stopping dead
   3 OVERLAP        the cap and the magnifier run a beat behind the body on their own curves
   4 SQUASH/STRETCH volume preserved — he narrows as he stretches up, widens as he lands
   5 WEIGHT         the shadow shrinks and fades as he rises, so the ground reads as real
   6 SACCADES       eyes dart and hold on steps() rather than gliding, which is how eyes move  */
.wi-app .wi-cs-bnc{transform-origin:50% 100%;transform-box:fill-box;
  animation:wiWalkIdle 10.2s ease-in-out infinite}
.wi-app .wi-checking-scene.wi-cs-moving .wi-cs-bnc{
  animation:wiCrouch .26s cubic-bezier(.4,0,.6,1) 1,
            wiWalkBnc .44s .26s cubic-bezier(.32,0,.5,1) infinite}
@keyframes wiCrouch{0%{transform:translateY(0) scale(1,1)}
  60%{transform:translateY(3px) scale(1.07,.92)}100%{transform:translateY(0) scale(1,1)}}
/* he leans into the direction of travel and rights himself on arrival */
.wi-app .wi-cs-walk{transition:left 1.15s cubic-bezier(.34,1.24,.5,1),transform .3s ease}
.wi-app .wi-checking-scene.wi-cs-moving .wi-cs-walk{transform:translateX(-50%) rotate(5deg)}
/* 3 · the cap and the glass lag the head */
.wi-app .wi-cs-cap{transform-box:fill-box;transform-origin:50% 100%;
  animation:wiCapLag 10.2s ease-in-out infinite}
@keyframes wiCapLag{0%,100%{transform:rotate(0) translateY(0)}
  22%{transform:rotate(-3.2deg) translateY(-1px)}
  46%{transform:rotate(1.4deg) translateY(0)}
  70%{transform:rotate(-1deg) translateY(0)}}
.wi-app .wi-checking-scene.wi-cs-moving .wi-cs-cap{animation:wiCapBob .44s .08s cubic-bezier(.32,0,.5,1) infinite}
@keyframes wiCapBob{0%,100%{transform:rotate(0) translateY(0)}
  34%{transform:rotate(-6deg) translateY(-2px)}66%{transform:rotate(3deg) translateY(0)}}
.wi-app .wi-cs-mag{transform-box:fill-box;transform-origin:14% 24%;
  animation:wiMagSwing 3.4s ease-in-out infinite}
@keyframes wiMagSwing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(7deg)}}
.wi-app .wi-checking-scene.wi-cs-moving .wi-cs-mag{animation:wiMagSwing .44s .12s cubic-bezier(.32,0,.5,1) infinite}
/* 5 · the shadow reacts to his height, which is what sells the ground */
.wi-app .wi-cs-shad{transform-box:fill-box;transform-origin:center;
  animation:wiShad 10.2s ease-in-out infinite}
@keyframes wiShad{0%,100%{transform:scale(1);opacity:.14}
  16%{transform:scale(.9);opacity:.1}52%{transform:scale(.95);opacity:.12}}
.wi-app .wi-checking-scene.wi-cs-moving .wi-cs-shad{animation:wiShadHop .44s cubic-bezier(.32,0,.5,1) infinite}
@keyframes wiShadHop{0%,100%{transform:scale(1);opacity:.15}
  32%{transform:scale(.72);opacity:.07}}
/* 6 · a real blink, and a double one now and then — nothing alive blinks on a metronome */
.wi-app .wi-cs-lid{transform-box:fill-box;transform-origin:center 12%;
  animation:wiBlink 7.3s steps(1,end) infinite}
@keyframes wiBlink{0%,95.2%{transform:scaleY(0)}95.9%{transform:scaleY(1)}
  96.6%{transform:scaleY(0)}97.3%{transform:scaleY(1)}98%,100%{transform:scaleY(0)}}
@keyframes wiWalkBnc{0%{transform:translateY(0) scale(1,1)}
  28%{transform:translateY(-8px) scale(.94,1.07)}
  56%{transform:translateY(0) scale(1.08,.93)}
  78%{transform:translateY(-1px) scale(.99,1.01)}
  100%{transform:translateY(0) scale(1,1)}}
@keyframes wiWalkIdle{0%,100%{transform:translateY(0) rotate(0)}
  16%{transform:translateY(-2px) rotate(-1.8deg)}
  34%{transform:translateY(0) rotate(.6deg)}
  52%{transform:translateY(-1px) rotate(1.6deg)}
  74%{transform:translateY(0) rotate(-.8deg)}}
/* ── the waiting beats — three things to do, none of them "finished" ──────────────────────────
   A (0–3.4s)  a pocket watch swings up on its chain and he checks the time
   B (3.4–6.8s) a sheet of notes lifts off the bench and he re-reads it
   C (6.8–10.2s) both away; he looks off toward the door, the way you do when someone is late
   Nothing here can be mistaken for a result: a watch, a page and a glance are all things you do
   BECAUSE the answer has not come. */
.wi-app .wi-cs-watch{transform-box:fill-box;transform-origin:50% 0;opacity:0;
  animation:wiIdleWatch 10.2s cubic-bezier(.3,1.2,.4,1) infinite}
@keyframes wiIdleWatch{0%{opacity:0;transform:translateY(-10px) rotate(-16deg) scale(.7)}
  4%{opacity:1;transform:translateY(0) rotate(7deg) scale(1)}
  10%{transform:rotate(-5deg)}16%{transform:rotate(3deg)}22%{transform:rotate(-1deg)}
  30%{opacity:1;transform:rotate(0)}
  34%,100%{opacity:0;transform:translateY(-8px) rotate(10deg) scale(.8)}}
.wi-app .wi-cs-note{transform-box:fill-box;transform-origin:50% 100%;opacity:0;
  animation:wiIdleNote 10.2s cubic-bezier(.3,1.2,.4,1) infinite}
@keyframes wiIdleNote{0%,33%{opacity:0;transform:translateY(14px) rotate(-4deg) scale(.86)}
  38%{opacity:1;transform:translateY(0) rotate(2deg) scale(1)}
  46%{transform:rotate(-2deg)}56%{transform:rotate(1.5deg)}
  62%{opacity:1;transform:rotate(0)}
  67%,100%{opacity:0;transform:translateY(12px) rotate(-3deg) scale(.9)}}
/* the eyes follow whatever he is doing: down at the watch, across the page, then off to the door */
.wi-app .wi-cs-eyes{animation:wiIdleEyes 10.2s steps(1,end) infinite}
@keyframes wiIdleEyes{0%,4%{transform:translate(0,0)}
  12%,28%{transform:translate(-1px,2.5px)}
  38%{transform:translate(-3px,1.5px)}58%{transform:translate(3px,1.5px)}
  68%{transform:translate(0,0)}
  78%,90%{transform:translate(4px,-1px)}
  96%,100%{transform:translate(0,0)}}
/* the sets — each rises at its own station and leaves when he does */
.wi-app .wi-cs-set{position:absolute;opacity:0}
/* Each set belongs to a stage and is on screen exactly while that stage is the live one. */
.wi-app .wi-cs-set{transition:opacity .45s ease,transform .45s cubic-bezier(.2,1.3,.35,1)}
.wi-app .wi-cs-set.e1{opacity:1;transform:none}
.wi-app .wi-checking-scene.wi-cs-a1 .wi-cs-set.e1,
.wi-app .wi-checking-scene.wi-cs-a2 .wi-cs-set.e1{opacity:0;transform:translateY(14px) scale(.92)}
.wi-app .wi-checking-scene.wi-cs-a1 .wi-cs-set.e2{opacity:1;transform:none}
.wi-app .wi-checking-scene.wi-cs-a2 .wi-cs-set.e2{opacity:0;transform:translateY(14px) scale(.92)}
.wi-app .wi-checking-scene.wi-cs-a2 .wi-cs-set.e3{opacity:1;transform:none}
.wi-app .wi-cs-set.e2,.wi-app .wi-cs-set.e3,.wi-app .wi-cs-set.e4{opacity:0;transform:translateY(18px) scale(.92)}
.wi-app .wi-checking-scene.wi-cs-a2 .wi-cs-set.e4{opacity:1;transform:none;transition-delay:.35s}
.wi-app .wi-cs-pg{transform-box:fill-box;transform-origin:left center;backface-visibility:hidden}
/* the ledger keeps turning pages for as long as we are still waiting on the store */
.wi-app .wi-cs-pg.q1{animation:wiWalkFlip 2.6s cubic-bezier(.35,0,.25,1) infinite}
.wi-app .wi-cs-pg.q2{animation:wiWalkFlip 2.6s .22s cubic-bezier(.35,0,.25,1) infinite}
.wi-app .wi-cs-pg.q3{animation:wiWalkFlip 2.6s .44s cubic-bezier(.35,0,.25,1) infinite}
@keyframes wiWalkFlip{0%,26%{transform:rotateY(0)}46%,100%{transform:rotateY(-172deg)}}
.wi-app .wi-cs-tg{transform-box:fill-box;transform-origin:50% 100%}
.wi-app .wi-checking-scene.wi-cs-a2 .wi-cs-tg.v1{animation:wiWalkPop 1s cubic-bezier(.2,1.7,.35,1) 1 both}
.wi-app .wi-checking-scene.wi-cs-a2 .wi-cs-tg.v2{animation:wiWalkPop 1s .3s cubic-bezier(.2,1.7,.35,1) 1 both}
.wi-app .wi-checking-scene.wi-cs-a2 .wi-cs-tg.v3{animation:wiWalkPop 1s .6s cubic-bezier(.2,1.7,.35,1) 1 both}
.wi-app .wi-cs-tg{opacity:0}
@keyframes wiWalkPop{0%{opacity:0;transform:translateY(16px) scale(.5)}
  16%{opacity:1;transform:translateY(-4px) scale(1.12)}22%,100%{opacity:1;transform:scale(1)}}
/* The gavel is RAISED AND HELD, never struck. A gavel that falls means a decision was made, and
   this screen has not got one; a gavel that keeps falling means it was made over and over. Held
   aloft it says "about to rule", which stays true for as long as the wait lasts. */
.wi-app .wi-cs-gav{transform-box:fill-box;transform-origin:12% 88%;
  animation:wiWalkHold 2.8s ease-in-out infinite;transform:rotate(-52deg)}
@keyframes wiWalkHold{0%,100%{transform:rotate(-52deg)}50%{transform:rotate(-46deg)}}
/* no shockwave — nothing has landed */
.wi-app .wi-cs-ring{display:none}
@keyframes wiWalkRing{0%,72%{opacity:0;transform:scale(.2)}78%{opacity:.9;transform:scale(1.8)}
  90%,100%{opacity:0;transform:scale(3)}}
.wi-app .wi-cs-arm{transform-origin:22px 6px;transform-box:fill-box;
  animation:wiWalkWave .58s cubic-bezier(.4,0,.6,1) 4 both}
@keyframes wiWalkWave{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(30deg)}}
/* Reduced motion: hold him at the last station with every stop lit — the most informative frame. */
@media(prefers-reduced-motion:reduce){
  .wi-app .wi-checking-scene *{animation:none!important}
  .wi-app .wi-cs-fill{width:66%}
  .wi-app .wi-cs-walk{left:68%}
  .wi-app .wi-cs-stn{border-color:#23D17E}
  .wi-app .wi-cs-set.e4{opacity:1}
  .wi-app .wi-cs-note{opacity:1}
}
}
.wi-app .wi-checking-body{padding:14px 4px 6px;text-align:center}
.wi-app .wi-checking-store{font-size:var(--fs-labelSm,11px);font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--onSurfaceVariant);margin-bottom:6px}
.wi-app .wi-checking-msg{font-size:var(--fs-body);font-weight:600;color:var(--onSurface);min-height:1.4em}
.wi-app .wi-checking-bar{height:3px;border-radius:999px;background:var(--surfaceContainerHighest);
  margin:14px auto 0;max-width:200px;overflow:hidden}
.wi-app .wi-checking-bar i{display:block;height:100%;width:38%;border-radius:inherit;
  background:linear-gradient(90deg,var(--primary),var(--appleFill,var(--apple)));
  animation:wiCheckBar 1.4s ease-in-out infinite}
@keyframes wiCheckBar{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@media(prefers-reduced-motion:reduce){
  .wi-app .wi-checking-shimmer,.wi-app .wi-checking-bar i{animation:none}}
.wi-app .wi-checking-slow{margin-top:9px;font-size:12.5px;line-height:1.4;
  color:var(--onSurfaceVariant);animation:wiCheckFade .45s ease both}
@keyframes wiCheckFade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
/* The result,pre-drawn. Rows are staggered so the block breathes instead of pulsing as one
   slab — the stagger is what makes it read as assembling rather than blinking. */
.wi-app .wi-checking-skel{display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:22px 4px 4px;margin-top:6px;border-top:1px solid var(--outlineVariant)}
.wi-app .wi-checking-skel > *,.wi-app .wi-cskl-tiles{animation:wiCheckRise .5s ease both}
.wi-app .wi-checking-skel > *:nth-child(2){animation-delay:.06s}
.wi-app .wi-checking-skel > *:nth-child(3){animation-delay:.12s}
.wi-app .wi-checking-skel > *:nth-child(4){animation-delay:.18s}
.wi-app .wi-checking-skel > *:nth-child(5){animation-delay:.24s}
@keyframes wiCheckRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wi-app .wi-cskl-t{height:15px;width:82%;border-radius:7px}
.wi-app .wi-cskl-t2{height:15px;width:56%;border-radius:7px}
.wi-app .wi-cskl-p{height:20px;width:44%;border-radius:8px;margin-top:3px}
.wi-app .wi-cskl-tiles{display:flex;gap:10px;width:100%;margin-top:3px}
.wi-app .wi-cskl-tile{flex:1;height:56px;border-radius:12px}
.wi-app .wi-cskl-btn{height:48px;width:100%;border-radius:14px;margin-top:5px}
@media(prefers-reduced-motion:reduce){
  .wi-app .wi-checking-skel > *,.wi-app .wi-cskl-tiles,.wi-app .wi-checking-slow{animation:none}}
.wi-app a.wi-cmprow{text-decoration:none;color:inherit}
.wi-app .wi-cmprow{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;
  column-gap:10px;row-gap:0;align-items:center;padding:10px 8px;margin:0 -6px;
  border-radius:12px;border-bottom:0;font-size:var(--fs-bodySm);
  transition:background .15s ease}
.wi-app .wi-cmprow+.wi-cmprow{margin-top:2px}
.wi-app .wi-cmprow.is-best{background:color-mix(in srgb,var(--vBUY) 8%,transparent)}
.wi-app .wi-cmprow.is-link:hover{background:var(--surfaceContainerHigh)}
.wi-app .wi-cmprow.is-best.is-link:hover{background:color-mix(in srgb,var(--vBUY) 12%,transparent)}
.wi-app .wi-cmpav{grid-column:1;align-self:center}
.wi-app .wi-cmpn{grid-column:2;min-width:0}
.wi-app .wi-cmpmeta{display:none}
.wi-app .wi-cmp-more{display:flex;flex-direction:column;align-items:stretch;gap:8px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--outlineVariant,rgba(148,163,184,.35))}
.wi-app .wi-cmp-more-btn{appearance:none;border:0;cursor:pointer;font-family:inherit;
  min-height:42px;padding:0 16px;border-radius:12px;font-size:13.5px;font-weight:650;
  background:var(--surfaceContainerHigh);color:var(--onSurface);transition:opacity .15s ease}
.wi-app .wi-cmp-more-btn:hover{opacity:.9}
.wi-app .wi-cmp-more-btn:disabled{opacity:.55;cursor:default}
.wi-app .wi-cmp-more-btn--primary{background:var(--appleFill,var(--apple));color:var(--onApple,#fff)}
.wi-app .wi-cmp-more-link{appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--secondary);
  padding:6px 4px;text-align:center;text-decoration:underline;text-underline-offset:3px}
.wi-app .wi-cmp-more-link:hover{opacity:.85}
.wi-app .wi-cmp-more .wi-ban-cta{margin-top:0}
.wi-app .wi-ban-cta.wi-ban-cta-ghost{background:transparent;color:var(--appleFill,var(--apple));
  border:1.5px solid color-mix(in srgb,var(--appleFill,var(--apple)) 50%,transparent);
  min-height:44px;font-size:15px;font-weight:600}
.wi-app .wi-ban-cta.wi-ban-cta-ghost:hover{background:color-mix(in srgb,var(--appleFill,var(--apple)) 8%,transparent)}
.wi-app .wi-cmplane{margin:0}
.wi-app .wi-cmplane+.wi-cmplane{margin-top:16px;padding-top:14px;border-top:1px solid var(--outlineVariant,rgba(148,163,184,.28))}
.wi-app .wi-cmplbl{font-size:11px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;
  color:var(--onSurfaceVariant);margin:0 0 6px}
.wi-app .wi-cmplane-hd{display:flex;flex-direction:column;gap:3px;margin:0 0 10px}
.wi-app .wi-cmplane-hd .wi-cmplbl{margin:0}
.wi-app .wi-cmplane-sub{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--onSurfaceVariant);opacity:.9;line-height:1.35}
.wi-app .wi-cmplane--exact .wi-cmplbl{color:var(--primary,#1a56c4)}
.wi-app .wi-cmplane--similar .wi-cmplbl{color:var(--onSurfaceVariant)}
.wi-app .wi-cmplane-note{font-size:12px;line-height:1.45;color:var(--onSurfaceVariant);
  background:var(--surfaceContainerHigh,rgba(148,163,184,.12));border-radius:10px;padding:9px 11px;margin:0 0 10px}
.wi-app .wi-cmprow b{font-family:'RbM',monospace;font-variant-numeric:tabular-nums;font-weight:700}
.wi-app .wi-btn.wi-wide{width:100%}
.wi-app .wi-shareb{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;z-index:5;background:var(--cardBg2);color:var(--onSurfaceVariant);
  transition:transform .12s,background .15s;border:0;cursor:pointer}
.wi-app .wi-shareb:active{transform:scale(.88);background:var(--surfaceContainerHighest)}
.wi-app .wi-shareb svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* Share is a 44px circle in the top-right. First-seen AND watching both
   dock to that edge (`margin-left:auto`) — without a reserved gutter they
   render under the button (Furinno desk,18 Aug). */
.wi-app .wi-card.wi-hasshare .wi-pmeta{padding-right:56px;box-sizing:border-box}
.wi-app .wi-card.wi-hasshare .wi-seenb,.wi-app .wi-card.wi-hasshare .wi-watchn{max-width:calc(58% - 8px)}
.wi-app .wi-card.wi-vpage.wi-hasshare .wi-pmeta{padding-right:56px}
.wi-app .wi-card.wi-vpage .wi-cardfoot .wi-btn.wi-out{flex:1;min-width:0}
/* Website product/verdict: same WiApp cards,without the native shell overlay. */
/* display/height reset: header-31d once styled a "Get the app" pill as bare `.wi-app`, which
   collapsed this shell to 40px on every desktop product/verdict page. Class is now `.wi-hdr-app`;
   keep the reset so a future collision cannot re-freeze scroll. */
.wi-app.wi-webv{max-width:480px;margin:0 auto 48px;padding:0 0 28px;background:transparent;
  display:block;height:auto;min-height:0;align-items:stretch;white-space:normal;color:inherit;
  border-radius:0;gap:0;overflow-anchor:none}
.pp.pp-webv{overflow-anchor:none}
.wi-app.wi-webv .wi-webv-compare,.wi-app.wi-webv .wi-webv-chart,.wi-app.wi-webv .wi-webv-rail,.wi-app.wi-webv .wi-webv-review{min-width:0}
/* Website verdict was reading pastel: ice-blue panels,a washed View button,a mint
   "% under" chip. Punch the mixes on this surface only. Verdict stamps keep --v*. */
.wi-app.wi-webv .wi-pctb{
  background:color-mix(in srgb, var(--primary) 26%, #fff);color:#0B6B60;font-weight:700}
.wi-app.wi-webv .wi-card.wi-vpage .wi-plate .wi-platepct{
  font-size:15px;padding:7px 13px;border-radius:11px}
.wi-app.wi-webv .wi-btn.wi-out{background:var(--appleFill);color:var(--onApple)}
/* .wi-ban-hero keeps the punched website gradient — it is the marketing banner, a different
   component. The verdict card's body was split out of this pair for the quiet sheet: it is one
   white card on every surface now (website mobile, website desktop, native shell), so the
   product screen does not change identity depending on where you opened the link. */
.wi-app.wi-webv .wi-ban-hero{
  background:linear-gradient(165deg, color-mix(in srgb, var(--apple) 24%, #fff) 0%,
    color-mix(in srgb, var(--apple) 10%, #F5F7FA) 52%,
    color-mix(in srgb, var(--primary) 12%, #EEF2F8) 100%)}
.wi-app.wi-webv .wi-card.wi-vpage .wi-vbelow{background:var(--cardBg)}
/* .wi-webv punches .wi-out to a solid fill because the old pastel body washed it out. On the
   white sheet that made two identical blue slabs with no primary, so this card takes the soft
   fill back — the same pair the native shell already shows. */
.wi-app.wi-webv .wi-card.wi-vpage .wi-cardfoot .wi-btn.wi-out{
  background:var(--appleSoft);color:var(--appleInk)}
.wi-app.wi-webv .wi-ban-pill{
  background:color-mix(in srgb, var(--apple) 11%, #fff);
  box-shadow:0 6px 18px color-mix(in srgb, var(--apple) 16%, transparent)}
.wi-app.wi-webv .wi-rng .wi-m{
  height:6px;background:linear-gradient(90deg, var(--vBUY), var(--primary) 55%, var(--outlineVariant))}
.wi-app.wi-webv .wi-rng .wi-m i{width:12px;height:12px;top:-3px;box-shadow:0 0 0 3px #fff}
.wi-app.wi-webv[data-theme="dark"] .wi-ban-hero{
  background:linear-gradient(165deg,#0A2540 0%,#12263A 100%)}
@media (prefers-color-scheme:dark){
  .wi-app.wi-webv[data-theme="system"] .wi-ban-hero{
    background:linear-gradient(165deg,#0A2540 0%,#12263A 100%)}
}
@media(min-width:960px){
  .wi-app.wi-webv{
    --webv-gap:22px;--webv-rail:340px;--webv-hero:156px;--webv-ban-r:28px;
    max-width:none;width:100%;margin:0;padding:0 0 48px}
  /* One measured grid: banner (with inline verdict), chart, rail locked to rows.
     Asking/usual/year-low pills live in the product card above View on seller. */
  .wi-app.wi-webv .wi-webv-grid{
    display:grid;gap:var(--webv-gap) 24px;align-items:stretch;
    grid-template-columns:repeat(2,minmax(0,1fr));
    /* "alert" is the push/notify card. It is a direct child of this grid, and until it was named
       here it had NO area at all: auto-placement dropped it into an implicit row, sized to its own
       content (446px against the column's 916) and left-aligned, below a rail that had already
       ended. That is the orphan card with the dead L-shape beside it. Naming the row is the whole
       fix; nothing about the card itself changes. */
    grid-template-areas:"main main" "chart chart" "rail rail" "alert alert";
    max-width:1180px;margin:0 auto}
  .wi-app.wi-webv .wi-webv-main{grid-area:main;min-width:0;display:flex;flex-direction:column}
  .wi-app.wi-webv .wi-webv-chart{grid-area:chart;width:100%;min-width:0;
    display:flex;flex-direction:column}
  .wi-app.wi-webv .wi-webv-rail{grid-area:rail;min-width:0;min-height:0;
    display:flex;flex-direction:column;gap:var(--webv-gap)}
  .wi-app.wi-webv .wi-webv-compare,.wi-app.wi-webv .wi-webv-review{
    min-width:0;min-height:0;display:flex;flex-direction:column}
  /* Product banner: photo + story; verdict tucks under the photo column. */
  /* margin:0 — the desktop banner is a grid item whose gap is owned by .wi-webv;
     the mobile card's header margin would double it. */
  .wi-app.wi-webv .wi-webv-main > .wi-card.wi-vpage{
    margin-top:0;
    flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;min-height:288px;width:100%}
  .wi-app.wi-webv .wi-webv-main > .wi-card.wi-vpage:has(.wi-vverdict){
    grid-template-areas:"photo story" "verdict story"}
  .wi-app.wi-webv .wi-card.wi-vpage .wi-vphoto{grid-area:photo;display:flex;flex-direction:column;
    min-height:0;background:var(--imgPlate)}
  .wi-app.wi-webv .wi-card.wi-vpage .wi-vverdict{grid-area:verdict;min-width:0;
    border-top:1px solid color-mix(in srgb, var(--onSurface) 10%, transparent);background:var(--cardBg)}
  .wi-app.wi-webv .wi-card.wi-vpage .wi-vbelow{grid-area:story;
    display:flex;flex-direction:column;justify-content:flex-start;gap:10px;
    padding:22px 26px;box-sizing:border-box;min-height:100%}
  .wi-app.wi-webv .wi-card.wi-vpage .wi-ps .wi-math{font-size:18px}
  .wi-app.wi-webv .wi-card.wi-vpage .wi-ps .wi-math b{font-size:22px}
  .wi-app.wi-webv .wi-card.wi-vpage .wi-rng{margin-top:4px}
  .wi-app.wi-webv .wi-card.wi-vpage .wi-plate.wi-xl{flex:1;min-height:var(--webv-hero);height:auto;margin:0}
  .wi-app.wi-webv .wi-card.wi-vpage .wi-plate.wi-xl img{max-height:min(268px,76%);max-width:78%}
  .wi-app.wi-webv .wi-card.wi-vpage .wi-cardfoot{margin-top:auto;padding-top:12px}
  .wi-app.wi-webv .wi-card.wi-vpage .wi-vpricepills{margin:8px 0 0;padding:0;width:100%}
  .wi-app.wi-webv .wi-card.wi-vpage .wi-vpricepills .wi-ban-pill{
    background:color-mix(in srgb, var(--apple) 11%, #fff);
    box-shadow:0 4px 14px color-mix(in srgb, var(--apple) 14%, transparent)}
  .wi-app.wi-webv .wi-card.wi-vpage .wi-vwhy,.wi-app.wi-webv .wi-card.wi-vpage .wi-sig{display:none}
  /* Verdict under the photo column, below the % under chip. */
  .wi-app.wi-webv .wi-card.wi-vpage .wi-vverdict .wi-ban-verdict{margin:0;width:100%;
    border-radius:0;box-shadow:none;background:transparent}
  .wi-app.wi-webv .wi-card.wi-vpage .wi-vverdict .wi-ban-copy{padding:12px 16px 14px;display:flex;
    flex-direction:column;gap:4px}
  .wi-app.wi-webv .wi-card.wi-vpage .wi-vverdict .wi-ban-eye{margin:0;font-size:12px}
  .wi-app.wi-webv .wi-card.wi-vpage .wi-vverdict .wi-ban-h{margin:0;font-size:20px;line-height:1.12}
  .wi-app.wi-webv .wi-card.wi-vpage .wi-vverdict .wi-ban-cap{margin:0;font-size:14px;line-height:1.4}
  /* Bottom row + rail cards share one height model. */
  .wi-app.wi-webv .wi-webv-chart > .wi-ban,
  .wi-app.wi-webv .wi-webv-compare > .wi-ban,
  .wi-app.wi-webv .wi-webv-review > .wi-prv{
    flex:1;width:100%;height:100%;margin:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .wi-app.wi-webv .wi-ban-hero{flex:none;min-height:var(--webv-hero)}
  .wi-app.wi-webv .wi-webv-compare .wi-ban-copy{flex:1;display:flex;flex-direction:column;min-height:0}
  .wi-app.wi-webv .wi-webv-compare .wi-cmp{flex:1;display:flex;flex-direction:column;min-height:0}
  .wi-app.wi-webv .wi-webv-compare .wi-cmplane{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .wi-app.wi-webv .wi-webv-compare .wi-cmp-more{flex:none;margin-top:auto}
  .wi-app.wi-webv .wi-webv-compare > .wi-cpp{flex:1;width:100%;margin:0;min-height:0}
  .wi-app.wi-webv .wi-webv-review > .wi-prv{flex:none;width:100%;margin:0}
  .wi-app.wi-webv .wi-webv-chart > .wi-ban .wi-ban-copy{
    flex:1;display:flex;flex-direction:column;min-height:0;padding:22px 28px 24px}
  .wi-app.wi-webv .wi-webv-chart .vchart{flex:1;width:100%;min-height:280px}
  .wi-app.wi-webv .wi-webv-chart .vchart svg{width:100%;height:auto;min-height:248px}
  .wi-app.wi-webv .wi-vacts,.wi-app.wi-webv .wi-method,.wi-app.wi-webv .wi-recent{display:none}
}
/* Compact rail cards: detail opens in an animated sheet (phone) or side panel (desktop). */
@keyframes wiWebvFade{from{opacity:0}to{opacity:1}}
@keyframes wiWebvSheet{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes wiWebvPanel{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.wi-app.wi-webv .wi-webv-flyout-backdrop{
  position:fixed;inset:0;z-index:240;margin:0;padding:0;border:0;
  background:rgba(15,23,42,.28);cursor:default;animation:wiWebvFade .22s ease}
.wi-app.wi-webv .wi-webv-flyout{
  position:fixed;z-index:241;left:0;right:0;bottom:0;top:auto;
  width:100%;max-height:min(86vh,720px);
  overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border-radius:20px 20px 0 0;background:var(--card);box-shadow:0 -16px 48px rgba(15,23,42,.22);
  border:1px solid rgba(148,163,184,.35);border-bottom:0;
  animation:wiWebvSheet .34s cubic-bezier(.2,.8,.2,1)}
.wi-app.wi-webv .wi-webv-flyout > .wi-ban,.wi-app.wi-webv .wi-webv-flyout > .osay{margin:0;height:auto;min-height:0;overflow:visible}
.wi-app.wi-webv .wi-webv-flyout-x{
  position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;
  border:0;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);
  font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.12)}
.wi-app.wi-webv .wi-webv-flyout-x:hover{background:#fff}
.wi-app.wi-webv .osay.osay-rail .osay-copy{overflow:hidden}
.wi-app.wi-webv .osay.osay-flyout{margin:0;height:auto;overflow:visible}
.wi-app.wi-webv .osay-fly-busy{margin:16px 0 4px;font-size:15px;color:var(--onb-secondary, var(--onSurfaceVariant))}
@media(prefers-reduced-motion:reduce){
  .wi-app.wi-webv .wi-webv-flyout-backdrop,.wi-app.wi-webv .wi-webv-flyout{animation:none}
}
@media(min-width:1180px){
  .wi-app.wi-webv .wi-webv-flyout{
    top:64px;bottom:auto;left:min(calc(50% + 392px),calc(100vw - 416px));right:auto;
    width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 88px);
    border-radius:16px;border-bottom:1px solid rgba(148,163,184,.35);
    box-shadow:0 24px 64px rgba(15,23,42,.22);
    animation:wiWebvPanel .34s cubic-bezier(.2,.8,.2,1)}
  .wi-app.wi-webv .wi-webv-grid{
    max-width:1360px;
    grid-template-columns:repeat(2,minmax(0,1fr)) var(--webv-rail);
    /* Research spans under the product; PRODUCT REVIEW + COMPARE PRICES share the rail.
       The notify row spans ALL THREE columns. Giving it only the two main ones left a 340px
       column of nothing beside it, because the rail has no content left to put there; spanning
       the full width closes that gap instead of moving it. Measured at 1180: the card goes from
       446px wide (auto-placed, orphaned) to the full 1280. */
    grid-template-areas:"main main rail" "chart chart rail" "alert alert alert"}
  .wi-app.wi-webv .wi-webv-chart{grid-column:1 / 3}
}
/* "About this product" sat between two white 28px cards as a bare transparent strip: no ground,
   no padding, no radius, and a 14px margin against the grid's 22px rhythm. It read as loose text
   dropped on the page rather than a section. Measured off its own neighbours rather than invented
   — the hero card and the chart card are byte-identical (white, 28px, the same two-layer shadow),
   so this takes the same values and the rhythm becomes an even 22 / 22. */
.wi-app.wi-webv .wi-webv-main > .wi-psum{
  background:var(--cardBg);border-radius:28px;padding:18px 24px;margin:22px 0 0;
  box-shadow:0 10px 32px rgba(14,26,43,.11),0 1px 2px rgba(14,26,43,.05)}
.wi-app.wi-webv .wi-webv-main > .wi-psum .wi-psum-tog{min-height:44px}
/* Named so auto-placement never picks the row for it again. Outside the grid (phone widths, and
   the native shell) this selector does not apply and the card keeps its own flow position. */
.wi-app.wi-webv .wi-webv-grid > .wi-alert-block{grid-area:alert;min-width:0;margin:0}
/* PRODUCT REVIEW — paste/verdict rail (same POOR→GREAT scale as Verified cards). */
.wi-app .wi-prv{
  --prv-ink:#12211f;--prv-muted:#5c6b6c;--prv-review:#0f766e;--prv-review-soft:#b9e6e0;
  background:#fff;border-radius:22px;padding:22px 22px 18px;
  box-shadow:0 2px 20px rgba(16,32,40,.07);width:100%;box-sizing:border-box;
  font-family:Inter,"Plus Jakarta Sans","DM Sans",system-ui,sans-serif;color:var(--prv-ink);
  min-width:0}
.wi-app .wi-prv-label{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--prv-muted);
  text-transform:uppercase;margin:0 0 10px}
.wi-app .wi-prv-scale{display:flex;align-items:flex-end;gap:4px;margin:0}
.wi-app .wi-prv-step{flex:1;text-align:center;padding:7px 0;border-radius:9px;font-size:11px;
  font-weight:700;letter-spacing:.05em}
.wi-app .wi-prv-poor{background:#fbe9ec;color:#8f1b2b}
.wi-app .wi-prv-ok{background:#fdf1e2;color:#7d4a08}
.wi-app .wi-prv-good{background:#e6f4ec;color:#0b5c36}
.wi-app .wi-prv-great{background:#cdeee0;color:#08492a}
.wi-app .wi-prv-step.on{flex:1.4;padding:10px 0;border-radius:11px;background:var(--prv-review);
  box-shadow:0 6px 14px -6px rgba(15,118,110,.7)}
.wi-app .wi-prv-step.on .wi-prv-w{display:block;font-size:14px;font-weight:700;letter-spacing:.07em;color:#fff}
.wi-app .wi-prv-step.on .wi-prv-sub{display:block;margin-top:1px;font-size:10px;font-weight:600;
  letter-spacing:.04em;color:var(--prv-review-soft)}
.wi-app .wi-prv-scale.wi-prv-skel{opacity:.55}
.wi-app .wi-prv-line{margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--prv-ink)}
.wi-app .wi-prv-line strong{font-weight:700}
.wi-app .wi-prv-note{margin:10px 0 0;font-size:13px;line-height:1.4;color:var(--prv-muted)}
.wi-app .wi-prv-go{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:48px;margin-top:4px;padding:0;background:none;border:0;cursor:pointer;
  font-family:inherit;text-align:left;color:var(--prv-review)}
.wi-app .wi-prv-gol{font-size:15px;font-weight:800;letter-spacing:-.01em}
.wi-app .wi-prv-goa{font-size:18px;font-weight:700;opacity:.7}
.wi-app .wi-prv-busy{display:block;margin-top:6px;font-size:14px;color:var(--prv-muted)}
.wi-app .wi-prv-foot{margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(16,32,40,.1);
  font-size:11.5px;line-height:1.4;color:var(--prv-muted);display:flex;align-items:center;gap:5px}
.wi-app .wi-prv-foot img{width:14px;height:14px;border-radius:50%;flex:none}
/* Compare prices sidebar — product-detail rail only. Not Verified grid cards. */
.wi-app .wi-cpp{
  --cpp-ink:#12211f;--cpp-muted:#5c6b6c;--cpp-teal:#0f6b5f;--cpp-teal2:#12796d;
  --cpp-blue:#0D8279;--cpp-blueh:#0F766E;--cpp-purple:#0D8279;--cpp-purple2:#0F766E;
  --cpp-hair:rgba(16,32,40,.1);--cpp-over:#8a2f1f;
  background:#fff;border-radius:22px;padding:30px 26px 24px;
  box-shadow:0 2px 20px rgba(16,32,40,.07);width:100%;box-sizing:border-box;
  font-family:Inter,"Plus Jakarta Sans","DM Sans",system-ui,sans-serif;color:var(--cpp-ink);
  min-width:0}
.wi-app .wi-cpp-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px;gap:12px}
.wi-app .wi-cpp-title{margin:0;font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--cpp-ink);
  font-family:Inter,"Plus Jakarta Sans",system-ui,sans-serif;line-height:1.1}
.wi-app .wi-cpp-count{font:500 12px "JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;color:var(--cpp-muted);
  white-space:nowrap}
.wi-app .wi-cpp-hero{border-radius:18px;padding:20px;background:linear-gradient(135deg,#0f6b5f,#12796d);color:#fff}
.wi-app .wi-cpp-eye{font-size:11px;font-weight:700;letter-spacing:.09em;color:#fff}
.wi-app .wi-cpp-hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:14px;flex-wrap:wrap}
.wi-app .wi-cpp-hero-row > div:first-child{flex:1;min-width:min(100%,10.5rem)}
.wi-app .wi-cpp-hero-row > div:last-child{flex:none}
.wi-app .wi-cpp-hero-store{font-size:19px;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.wi-app .wi-cpp-hero-meta{display:flex;flex-wrap:wrap;gap:2px 0;font-size:13px;margin-top:4px;color:#fff;
  overflow-wrap:normal;word-break:normal;hyphens:manual}
.wi-app .wi-cpp-fact{white-space:nowrap}
.wi-app .wi-cpp-fact + .wi-cpp-fact::before{content:"· ";margin:0 .35em}
.wi-app .wi-cpp-hero-price{font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;text-align:right}
.wi-app .wi-cpp-hero-usual{font:500 11px "JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  margin-top:6px;text-align:right;color:#fff}
.wi-app .wi-cpp-cta{display:block;width:100%;margin-top:16px;background:#fff;color:#0f6b5f;font-size:15px;
  font-weight:800;padding:13px;border-radius:11px;border:0;text-align:center;text-decoration:none;
  box-sizing:border-box;min-height:44px;cursor:pointer;font-family:inherit}
.wi-app .wi-cpp-cta:hover,.wi-app .wi-cpp-cta:focus-visible{background:#e6f4f0}
.wi-app .wi-cpp-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
.wi-app .wi-cpp-row{display:flex;align-items:center;gap:10px;padding:11px 6px;min-width:0}
.wi-app .wi-cpp-logo{position:relative;width:26px;height:26px;border-radius:7px;flex:none;background:#f3f5f5;
  display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--cpp-ink);overflow:hidden}
.wi-app .wi-cpp-logo img{position:absolute;inset:0;width:26px;height:26px;object-fit:contain;display:block}
.wi-app .wi-cpp-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.wi-app .wi-cpp-name{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-app .wi-cpp-delta{font:500 11px "JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;white-space:nowrap}
.wi-app .wi-cpp-delta-under{color:var(--cpp-teal)}
.wi-app .wi-cpp-delta-over{color:var(--cpp-over)}
.wi-app .wi-cpp-delta-eq{color:var(--cpp-muted)}
.wi-app .wi-cpp-row-price{flex:none;min-width:8.6ch;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;
  text-align:right;letter-spacing:-.01em}
.wi-app .wi-cpp-view{flex:none;font-size:14px;font-weight:700;color:var(--cpp-blue);text-decoration:none;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;
  cursor:pointer;font-family:inherit;padding:0 4px}
.wi-app .wi-cpp-view:hover,.wi-app .wi-cpp-view:focus-visible{color:var(--cpp-blueh)}
.wi-app .wi-cpp-view:focus-visible{outline:2px solid var(--cpp-blue);outline-offset:2px}
.wi-app .wi-cpp-more{appearance:none;border:0;background:transparent;color:var(--cpp-blue);font:700 14px inherit;
  cursor:pointer;min-height:44px;padding:8px 6px;text-align:left}
.wi-app .wi-cpp-more:hover,.wi-app .wi-cpp-more:focus-visible{color:var(--cpp-blueh)}
.wi-app .wi-cpp-note{margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--cpp-muted)}
.wi-app .wi-cpp-div{height:1px;background:rgba(16,32,40,.1);margin:20px 0 18px}
.wi-app .wi-cpp-sim{min-width:0}
.wi-app .wi-cpp-sim-hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.wi-app .wi-cpp-sim-lbl{font-size:12px;font-weight:700;letter-spacing:.09em;color:#0D8279}
.wi-app .wi-cpp-sim-all{font-size:12px;font-weight:700;color:var(--cpp-blue);text-decoration:none}
.wi-app .wi-cpp-sim-all:hover{color:var(--cpp-blueh)}
.wi-app .wi-cpp-shelf{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;outline:none}
.wi-app .wi-cpp-shelf:focus-visible{outline:2px solid var(--cpp-teal);outline-offset:2px}
.wi-app .wi-cpp-scard{width:150px;flex:none;border:1px solid rgba(16,32,40,.1);border-radius:16px;padding:12px;
  scroll-snap-align:start;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px;
  box-sizing:border-box;background:#fff}
.wi-app .wi-cpp-scard:hover,.wi-app .wi-cpp-scard:focus-visible{border-color:#99F6E4}
.wi-app .wi-cpp-scard:focus-visible{outline:2px solid var(--cpp-teal);outline-offset:2px}
.wi-app .wi-cpp-simg{height:82px;border-radius:11px;background:#f6f7f8;display:grid;place-items:center;overflow:hidden}
.wi-app .wi-cpp-simg img{max-width:100%;max-height:82px;object-fit:contain}
.wi-app .wi-cpp-stitle{font-size:13px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.wi-app .wi-cpp-sfoot{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-top:auto}
.wi-app .wi-cpp-sprice{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.wi-app .wi-cpp-sscore{font:500 10px "JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;color:var(--cpp-purple);
  white-space:nowrap}
.wi-app .wi-cpp-scond{font-size:11px;font-weight:700;color:var(--cpp-over);letter-spacing:.02em}
.wi-app .wi-cpp-skel{min-height:320px}
.wi-app .wi-cpp-skel-hero{height:168px;border-radius:18px;background:linear-gradient(90deg,#e8eeed,#f4f7f6,#e8eeed);
  background-size:200% 100%;animation:wiCppSkel 1.2s ease infinite}
.wi-app .wi-cpp-skel-row{height:48px;margin-top:10px;border-radius:10px;background:linear-gradient(90deg,#eef1f1,#f7f8f8,#eef1f1);
  background-size:200% 100%;animation:wiCppShimmer 1.2s ease-in-out infinite}
.wi-app .wi-cpp-sim-skel{display:flex;gap:10px;overflow:hidden;padding-bottom:4px}
.wi-app .wi-cpp-sim-skel-card{flex:0 0 148px;height:168px;border-radius:14px;background:linear-gradient(90deg,#eef1f1,#f7f8f8,#eef1f1);background-size:200% 100%;animation:wiCppSkel 1.2s ease infinite}
@keyframes wiCppSkel{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){
  .wi-app .wi-cpp-skel-hero,.wi-app .wi-cpp-skel-row,.wi-app .wi-cpp-sim-skel-card{animation:none}
}
@media(max-width:899px){
  .wi-app .wi-cpp{width:100%;max-width:100%;padding:24px 18px 20px;overflow-x:hidden}
  .wi-app .wi-cpp-title{font-size:26px}
  .wi-app .wi-cpp-hero-price{font-size:32px}
  .wi-app .wi-cpp-row{flex-wrap:nowrap;gap:8px}
}
/* ── MOBILE REBUILD — shell,header,tab bar (step 4) ───────────────────── */
.wi-stage{position:fixed;inset:0;width:100%;height:100%;height:100dvh;overscroll-behavior:none}
.wi-app.wi-shell{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  overscroll-behavior:none;
  background:var(--pageBg);
  /* Safe areas as variables so a test harness can stand in for a device;
     on hardware these resolve to the real env() values. Android WebView often
     reports env(safe-area-inset-*) as 0 — MainActivity pushes real WindowInsets
     into --wi-inset-* (CSS px); take the max so iOS env() still wins there. */
  --wi-safe-top:max(env(safe-area-inset-top,0px),var(--wi-inset-top,0px));
  --wi-safe-bottom:max(env(safe-area-inset-bottom,0px),var(--wi-inset-bottom,0px))}
/* The safe-area inset lives on the header so the wordmark can collapse without
   content sliding under the Dynamic Island.
   Google-inspired (2026-08-16): light head,centered brand,pill search with
   trailing Scan (Lens analog). StatusBar style follows head luminance in paint(). */
/* Same ground as .wi-body / banner rail (transparent .wi-onb sits on --pageBg). */
/* Compact header. Move the logo down into the old logo→search gap (same total
   height) so it clears the Dynamic Island without growing the chrome.
   Route through --wi-safe-top (not raw env) so harness + Android --wi-inset-* work. */
.wi-app .wi-head{flex:none;background:var(--pageBg);
  padding:calc(14px + var(--wi-safe-top,0px)) 14px 2px;
  /* Above .wi-body (transform stacking) AND above sticky .wi-ptabs — otherwise
     feed cards can paint through the seam between search and stuck tabs. */
  position:relative;z-index:60;display:flex;flex-direction:column;gap:2px;
  /* No padding/gap transitions — animating head height mid-scroll reflows .wi-body
     and kills momentum (HIG: scroll views should not resize under the finger). */
  overflow:hidden;transition:background .2s}
/* iOS: 54px floor when env() is 0 under contentInset:never (Dynamic Island). */
html.cap-ios .wi-app .wi-head{
  padding-top:calc(4px + max(var(--wi-safe-top,0px),54px))}
/* Android: real insets from MainActivity — no 54px Island floor (that double-pads). */
html.cap-android .wi-app .wi-head{
  padding-top:calc(4px + var(--wi-safe-top,0px))}
/* Lockup hit-target padding uses negative margin — without this the wordmark reads
   flush against the search pill on native. Only when the brand row is visible. */
html.cap-ios .wi-app .wi-head:not(.wi-scrolled) .wi-hrow,html.cap-android .wi-app .wi-head:not(.wi-scrolled) .wi-hrow,html.cap-native .wi-app .wi-head:not(.wi-scrolled) .wi-hrow{
  margin-top:10px}
@media (display-mode:standalone){
  .wi-app .wi-head{padding-top:calc(4px + max(var(--wi-safe-top,0px),54px))}
  .wi-app .wi-head:not(.wi-scrolled) .wi-hrow{margin-top:10px}
}
/* Scrolled: collapse the brand row; keep safe-area + search. */
.wi-app .wi-head.wi-scrolled{padding-bottom:2px;gap:2px;
  padding-top:calc(6px + var(--wi-safe-top,0px))}
html.cap-ios .wi-app .wi-head.wi-scrolled{
  padding-top:calc(4px + max(var(--wi-safe-top,0px),54px))}
html.cap-android .wi-app .wi-head.wi-scrolled{
  padding-top:calc(4px + var(--wi-safe-top,0px))}
.wi-app .wi-topbar{display:flex;align-items:center;justify-content:center;padding:0;
  max-height:44px;width:100%;min-width:0;position:relative;overflow:visible;
  /* Instant height collapse; fade only — max-height animation reflows the feed. */
  transition:opacity .15s}
/* Owner TARGET 2026-08-31: wordmark + search stay while Today scrolls; page tabs
   stick under search. Do NOT collapse .wi-topbar on wi-scrolled (that was Image 3-era). */
.wi-app .wi-head.wi-scrolled .wi-topbar{max-height:44px;opacity:1;pointer-events:auto}
.wi-app .wi-head .wi-lockup.wi-lkhead{gap:0;align-items:baseline;flex:none;max-width:100%}
/* Letters-only Wi? + wordmark — same lockup as desktop `.rd-mg` (owner,15 Aug). */
.wi-app .wi-letters{display:inline-flex;align-items:baseline;line-height:1;flex:none;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;font-weight:800;font-size:clamp(1.5rem,1.75rem,2.125rem);letter-spacing:-.06em}
.wi-app .wi-letters .wi-wi{color:#1D1D1F}
.wi-app .wi-letters .wi-q{color:#14B8A6}
.wi-app .wi-head .wi-letters{font-size:clamp(1.1rem,1.2rem,1.35rem);letter-spacing:-.05em}
.wi-app .wi-head .wi-letters .wi-wi{color:#1D1D1F}
.wi-app .wi-head .wi-letters .wi-q{color:var(--primary)}
.wi-app .wi-head .wi-wm .wi-wm1{color:#1D1D1F}
.wi-app .wi-head .wi-wm .wi-wm2{color:#14B8A6;-webkit-text-fill-color:#14B8A6}
@media (prefers-color-scheme: dark){
  .wi-app:not([data-theme="light"]) .wi-letters .wi-wi{color:#1D1D1F}
  .wi-app:not([data-theme="light"]) .wi-letters .wi-q{color:#14B8A6}
}
.wi-app[data-theme="dark"] .wi-letters .wi-wi{color:#1D1D1F}
.wi-app[data-theme="dark"] .wi-letters .wi-q{color:#14B8A6}
.wi-app[data-theme="dark"] .wi-head .wi-letters .wi-wi{color:#1D1D1F}
.wi-app[data-theme="dark"] .wi-head .wi-letters .wi-q{color:#14B8A6}
.wi-app[data-theme="dark"] .wi-head .wi-wm .wi-wm1{color:#1D1D1F}
.wi-app[data-theme="dark"] .wi-head .wi-wm .wi-wm2{color:#14B8A6;-webkit-text-fill-color:#14B8A6}
@media (prefers-color-scheme: dark){
  .wi-app[data-theme="system"] .wi-head .wi-letters .wi-wi{color:#1D1D1F}
  .wi-app[data-theme="system"] .wi-head .wi-letters .wi-q{color:#14B8A6}
  .wi-app[data-theme="system"] .wi-head .wi-wm .wi-wm1{color:#1D1D1F}
  .wi-app[data-theme="system"] .wi-head .wi-wm .wi-wm2{color:#14B8A6;-webkit-text-fill-color:#14B8A6}
}
/* Desktop lockup ramp (15 Aug): indigo → Apple blue → cyan on "?" and "foryou".
   Guarded — without background-clip the glyphs would vanish. Fallback is flat teal. */
.wi-app,.wi-scanx,#boot{--wi-lockup-ramp:linear-gradient(120deg,#5E5CE6 0%,#0A84FF 42%,#64D2FF 100%)}
/* All Deals lockup (owner 2026-08-28): worthit #1D1D1F + flat teal foryou.
   Do NOT apply the Apple indigo→blue→cyan ramp on the WiApp header — that was
   royal-blue foryou on the live wrong shot. Ramp stays on #boot + offgate only. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .wi-app .wi-offgate .bootwm .fy,
  #boot .bootwm .fy{
    background-image:var(--wi-lockup-ramp);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
}
/* Google-style pill: one soft well; Check + Scan live inside the trailing edge. */
.wi-app .wi-hrow{display:flex;align-items:stretch;width:100%;min-width:0;gap:0}
.wi-app .wi-head .wi-hb{flex:1 1 auto;display:flex;width:auto;min-width:0;background:#F0F0F4;
  min-height:44px;padding:0 4px 0 12px;gap:8px;border:0;border-radius:999px;
  box-shadow:none;overflow:hidden;align-items:center}
.wi-app .wi-head .wi-hb:active{background:#E6E6EC}
.wi-app[data-theme="dark"] .wi-head .wi-hb{background:#F0F0F4}
.wi-app[data-theme="dark"] .wi-head .wi-hb:active{background:#E6E6EC}
@media (prefers-color-scheme: dark){
  .wi-app[data-theme="system"] .wi-head .wi-hb{background:#F0F0F4}
  .wi-app[data-theme="system"] .wi-head .wi-hb:active{background:#E6E6EC}
}
.wi-app .wi-head .wi-hb input{font-size:16px;font-weight:400;color:#1D1D1F;padding:0 8px 0 0;min-height:36px;width:100%}
.wi-app .wi-head .wi-hb input::placeholder,.wi-app .wi-head .wi-hb .wi-ph{color:#6E6E73;opacity:1;font-weight:400}
.wi-app[data-theme="dark"] .wi-head .wi-hb input{color:#1D1D1F}
.wi-app[data-theme="dark"] .wi-head .wi-hb input::placeholder{color:#6E6E73}
.wi-app .wi-hb input[type=search]::-webkit-search-cancel-button,.wi-app .wi-hb input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.wi-app .wi-hx{width:38px;height:38px;min-width:38px;max-height:38px;aspect-ratio:1;align-self:center;
  border:0;border-radius:999px;padding:0;flex:none;background:none;color:#5F6368;
  font-size:26px;font-weight:300;line-height:1;display:grid;place-items:center;
  cursor:pointer;font-family:inherit;position:relative;z-index:2;box-shadow:none;
  -webkit-appearance:none;appearance:none}
.wi-app .wi-hx::after{content:"";position:absolute;inset:-6px}
.wi-app .wi-hx:focus-visible{outline:2px solid var(--apple,#248BF0);outline-offset:2px}
.wi-app .wi-hgo{flex:none;align-self:center;height:38px;min-height:38px;padding:0 14px;border:0;border-radius:999px;
  background:transparent;color:#0B7A6E;position:relative;z-index:2;
  font:600 15px/1 inherit;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;
  -webkit-appearance:none;appearance:none;box-shadow:none}
.wi-app .wi-hgo:active{background:rgba(20,184,166,.12)}
.wi-app .wi-head .wi-hb .wi-ph{font-size:14px}
.wi-app .wi-head .wi-sic{flex:none;width:20px;height:20px;display:grid;place-items:center;
  color:#6E6E73;pointer-events:none}
.wi-app .wi-head .wi-sic svg{width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.wi-app[data-theme="dark"] .wi-head .wi-sic{color:#6E6E73}
/* align-items:stretch,not center. The pill (.wi-hb) is already min-height:44px,but the <input>
   inside it measured 36px — so an ~8px band at the top and bottom of a control that LOOKS 44px tall
   was not the input. Stretching the slot and the input makes the whole pill the hit area. This
   changes NO layout: the pill's height is unchanged,so the header geometry the sticky page tabs
   measure against is untouched. */
.wi-app .wi-head .wi-hb-slot{flex:1;min-width:0;position:relative;display:flex;align-items:stretch}
.wi-app .wi-head .wi-hb .wi-phanim{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  margin:0;padding:0;border:0;background:none;pointer-events:none;z-index:0;
  font:400 15px/1.2 inherit;color:#6E6E73;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-align:left}
.wi-app .wi-head .wi-hb .wi-phanim::after{
  content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;
  vertical-align:-0.12em;background:currentColor;border-radius:1px;
  animation:wiPhCaret 1s steps(1) infinite}
.wi-app .wi-head .wi-hb.wi-hb-typed .wi-phanim::after{visibility:hidden}
.wi-app .wi-head .wi-hb input.wi-hb-in{position:relative;z-index:1;background:transparent;
  /* Fill the pill vertically so the tap target matches what the user sees. */
  align-self:stretch;height:auto;min-height:44px}
.wi-app[data-theme="dark"] .wi-head .wi-hb .wi-phanim{color:#6E6E73}
@keyframes wiPhCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .wi-app .wi-head .wi-hb .wi-phanim::after{animation:none;opacity:.85}
}
.wi-app .wi-head .wi-ib.wi-scanin{
  width:44px;height:44px;min-width:44px;max-width:44px;min-height:44px;max-height:44px;
  aspect-ratio:1/1;border-radius:999px;flex:0 0 44px;align-self:center;padding:2px;margin:-2px;box-sizing:border-box;
  background:transparent;color:#1D1D1F;border:0;position:relative;z-index:2;
  background-clip:content-box;-webkit-background-clip:content-box}
.wi-app .wi-head .wi-ib.wi-scanin svg{width:20px;height:20px;stroke:currentColor;color:currentColor}
.wi-app .wi-head .wi-ib.wi-scanin:active{background:rgba(29,29,31,.08);transform:none}
.wi-app[data-theme="dark"] .wi-head .wi-ib.wi-scanin{color:#1D1D1F}
.wi-app .wi-head .wi-wm,.wi-app .wi-head .wi-wm span{font-size:clamp(1.65rem,1.8rem,1.95rem);letter-spacing:-.035em;font-weight:800}
/* ── brand lockup: monogram + wordmark ─────────────────────────────────────
   The monogram carries its own dark plate,so the mark stays visible in dark
   mode even though the wordmark beside it does not (owner's call,see below). */
.wi-app .wi-lockup{display:flex;align-items:baseline;gap:10px;background:none;border:0;padding:0;cursor:pointer}
.wi-app .wi-markimg{width:32px;height:32px;border-radius:9px;flex:none;display:block}
.wi-app .wi-markimg-sm{width:26px;height:26px;border-radius:7px}
.wi-app .wi-mark-fallback{display:inline-flex;align-items:center}
.wi-app .wi-mark-fallback[hidden]{display:none!important}
.wi-app .wi-phead .wi-letters{font-size:var(--fs-title)}
.wi-app .wi-lockup.wi-lksm .wi-letters{font-size:var(--fs-label);letter-spacing:-.06em}
/* Morning brief — WiApp v2 habit strip */
.wi-app .wi-brief{background:linear-gradient(145deg,#0E1A2B,#134E4A);border-radius:18px;padding:var(--sp-3) var(--sp-3) 12px;margin:0 0 12px;color:#EEF2F8;
  box-shadow:var(--e2);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif}
.wi-app .wi-brief-k{font:700 var(--fs-labelSm)/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#5EEAD4;margin-bottom:6px}
.wi-app .wi-brief-h{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;font-size:var(--fs-titleSm);font-weight:700;letter-spacing:-.02em;margin:0 0 10px;line-height:1.2}
.wi-app .wi-brief-rows{display:flex;flex-wrap:wrap;gap:6px}
.wi-app .wi-brief-chip{appearance:none;border:0;cursor:pointer;font:600 var(--fs-labelSm)/1.25 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;padding:8px var(--sp-3);border-radius:10px;background:rgba(16,185,129,.18);color:#6EE7B7;text-align:left}
.wi-app .wi-brief-chip:active{transform:scale(.98)}
.wi-app .wi-brief-empty .wi-brief-h{display:none}
.wi-app .wi-brief-p{font-size:var(--fs-body);line-height:1.35;color:rgba(238,242,248,.82);margin:0 0 12px;text-wrap:pretty}
.wi-app .wi-brief-cta{appearance:none;border:0;cursor:pointer;font:600 15px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  min-height:44px;padding:10px 16px;border-radius:999px;background:var(--primary);color:var(--onPrimary);
  display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.wi-app .wi-brief-cta:active{filter:brightness(.94)}
/* Scan aisle primary tile */
.wi-app .wi-tile.wi-t-scanpri{background:#14B8A6;color:#042F2E;border-color:transparent;box-shadow:0 14px 28px -16px rgba(20,184,166,.65)}
.wi-app .wi-tile.wi-t-scanpri .wi-sub{color:rgba(4,47,46,.72)}
.wi-app .wi-tile.wi-t-scanpri .wi-ic{color:#042F2E}
/* Letter sizes are the icon's own (556/318/397 at 1024) scaled by 44/1024,so
   the nav mark and the app icon are the same artwork at two sizes rather than
   two drawings that merely resemble each other. */
/* The WiY monogram tile was removed from the app on owner request (2026-08-10); the wordmark
   carries the lockup alone. It also happened to hold the app's ONLY measured contrast
   failure — the "Y" was rgba(255,255,255,.35) on #1B1340,3.16:1 against a 4.5 floor,in
   both themes. The mark itself is unchanged as the app icon and launch screen.
   NOTE for anyone re-adding it: .wi-mono is ALSO the plain tabular-numeric class used by the
   range bar and the verdict count,so any tile styling must stay scoped under .wi-lockup. */

/* #1B1340 in light; inverted to #F2EFF6 in dark. Kept as #1B1340 everywhere at
   first by owner request,and a light plate was declined — but on the device
   the wordmark measured 1.07:1 against #151219 and simply vanished,so the
   solid words invert. The gradient "it" is unchanged in both,and the monogram
   carries its own dark tile,so the lockup reads either way. */
/* Signature under the verdict. .wi-lksm re-scales the SAME lockup rather than
   redrawing it,so the mark on the card and the mark in the nav stay one artwork. */
.wi-app .wi-asof{margin-top:5px;color:var(--onSurfaceVariant);font-size:var(--fs-label);opacity:.85}
.wi-app .price-asof{margin-top:6px;color:var(--onSurfaceVariant);font-size:var(--fs-label);opacity:.9;line-height:1.4}
.wi-app .price-asof-link{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.wi-app .wi-sig{display:flex;align-items:center;gap:7px;margin-top:11px;padding-top:var(--sp-3);
  border-top:1px solid var(--outlineVariant);color:var(--onSurfaceVariant);font-size:var(--fs-label)}
/* The product/verdict header mark: CENTRED,and the same 26px as the home header (owner,11 Aug). Absolutely positioned rather than a flex spacer,so it is centred on the SCREEN and
   not on whatever is left after the Back button — the back label's width changes with language
   ("Back" / "Zurück" / "Tornar enrere"),and a flex-centred mark would drift with it.
   pointer-events:none so the mark can never swallow a tap meant for Back if a long translation
   brings the two close. */
.wi-app .wi-phead{position:relative;display:flex;align-items:center;min-height:44px}
.wi-app .wi-phead .wi-backrow{margin-bottom:0}
.wi-app .wi-lockup.wi-lkmd{position:absolute;left:50%;transform:translateX(-50%);
  pointer-events:auto;display:inline-flex;z-index:2}
.wi-app .wi-lockup.wi-lkmd .wi-wm,.wi-app .wi-lockup.wi-lkmd .wi-wm span{
  font-size:clamp(1.35rem,1.5rem,1.65rem);letter-spacing:-.035em;font-weight:800}
.wi-app .wi-lockup.wi-lksm{gap:6px;display:inline-flex}
.wi-app .wi-lockup.wi-lksm .wi-wm,.wi-app .wi-lockup.wi-lksm .wi-wm span{font-size:var(--fs-label)}
.wi-app .wi-wm{display:inline-flex;align-items:center;line-height:1;
  /* 22 -> 26px (owner, 11 Aug). The monogram used to sit beside it and carry half the
     lockup's presence; with the wordmark alone at 22px the header read underweight against a
     44px search field. The signature under a verdict keeps its own 12.5px via .wi-lksm.
     SF Pro Display (owner 16 Aug) — preview in Simulator before shipping. */
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;font-weight:800;font-size:var(--fs-headline);letter-spacing:-.04em}
.wi-app .wi-wm span{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;font-weight:800;font-size:var(--fs-headline);
  letter-spacing:-.04em;line-height:1}
/* WiApp wordmark = light Apple lockup: worthit #1D1D1F + flat teal foryou (owner 2026-08-28).
   No blue gradient. Dark-theme overrides below are neutralized by the All Deals light lock. */
.wi-app .wi-wm .wi-wm1{color:#1D1D1F}
.wi-app .wi-wm .wi-wm2{color:#14B8A6;font-style:normal;-webkit-text-fill-color:#14B8A6}
.wi-app .wi-wm .wi-wm3{display:none} /* legacy split removed */
@media (prefers-color-scheme: dark){
  .wi-app:not([data-theme="light"]) .wi-wm .wi-wm1{color:#1D1D1F}
  .wi-app:not([data-theme="light"]) .wi-wm .wi-wm2{color:#14B8A6;-webkit-text-fill-color:#14B8A6}
}
.wi-app[data-theme="dark"] .wi-wm .wi-wm1{color:#1D1D1F}
.wi-app[data-theme="dark"] .wi-wm .wi-wm2{color:#14B8A6;-webkit-text-fill-color:#14B8A6}
.wi-app .wi-hb{display:flex;align-items:center;gap:6px;background:var(--cardBg);border-radius:20px;
  padding:0 var(--sp-2) 0 12px;min-height:40px;flex:1;min-width:0;transition:background .15s;
  position:relative;
  box-shadow:var(--e1)}
/* was a third one-off recipe; three shadows in one block read as three materials */
.wi-app .wi-hb:active{background:var(--surfaceContainerHighest)}
.wi-app .wi-hb input{flex:1;min-width:0;background:none;border:0;outline:0;font:inherit;
  font-size:15px;color:var(--onSurface);padding:0;position:relative;z-index:1;min-height:32px}
.wi-app .wi-hb input::placeholder{color:var(--onSurface);opacity:.75}

/* ── Bone header chrome on EVERY app screen (owner 2026-09-18) ───────────────────────────────
   One light band everywhere: Today (nm2), Find, Saved, You, and product back-rows. Lockup is
   ink + teal (not white/#FFCC00). Search pill stays a raised control on bone, not a translucent
   hole punched for a dark band.
   Placed AFTER earlier light rules so lockup size/gap and the search pill win where needed. */
.wi-app{--wi-band:#fafafb}
/* .wi-phead was never a full-bleed header — it is a back-row that used to sit invisibly on the page
   ground, so it lives INSIDE .wi-body's content padding: measured at top 12, left 16, width 361 of a
   393 viewport. Giving it the band exposed that geometry as a dark rectangle floating below the
   status bar with light gutters either side.

   The band is painted by a PSEUDO-ELEMENT rather than by widening the header, because widening it
   does not work: .wi-body is a column flex container and it sizes this item on the cross axis, so
   `width` never takes. Measured — margin-left:-16px applied (x went 16 -> 0) while the used width
   stayed 361 through `width:calc(100% + 32px)`, through `max-width:none`, and through an inline
   `width:393px !important`. An absolutely positioned pseudo is outside flex sizing entirely, so
   negative left/right insets simply work, and the back row and lockup keep their original position.
   The top inset reuses `var(--sp-3) + var(--wi-safe-top)` — the same expression .wi-body itself uses
   at .wi-app.wi-noheader, so the band and the page agree on where the safe area ends. */
.wi-app .wi-phead{padding-bottom:var(--sp-3)}
/* z-index 0 with the children raised to 1 — NOT z-index:-1. A negative pseudo paints behind its
   own parent's background AND behind the ancestors' , so the band disappeared under the page. */
.wi-app .wi-phead::before{content:'';position:absolute;z-index:0;
  top:calc(-1 * (var(--sp-3) + var(--wi-safe-top,0px)));bottom:0;
  left:calc(-1 * var(--sp-4,16px));right:calc(-1 * var(--sp-4,16px));
  background:var(--wi-band)}
.wi-app .wi-phead > *{position:relative;z-index:1}


.wi-app .wi-head{background:var(--wi-band)}
.wi-app .wi-head .wi-wm .wi-wm1,.wi-app .wi-phead .wi-wm .wi-wm1{color:#1D1D1F !important;-webkit-text-fill-color:#1D1D1F}
.wi-app .wi-head .wi-wm .wi-wm2,.wi-app .wi-phead .wi-wm .wi-wm2{color:#14B8A6 !important;-webkit-text-fill-color:#14B8A6}
/* ONE lockup size everywhere (Today canonical): denser 18px/600 (was 22).
   Scan keeps its own lockup on the dark camera (see .wi-scanbrand below). */
.wi-app .wi-head .wi-wm,.wi-app .wi-phead .wi-wm,
.wi-app .wi-head .wi-wm span,.wi-app .wi-phead .wi-wm span{
  font-size:18px !important;font-weight:600 !important;letter-spacing:-.032em !important;
  line-height:1 !important}
.wi-app .wi-lockup .wi-mk,
.wi-app .wi-scanbrand .wi-mk,
.nm2 .nm2-mark,
.tdv2-mark{display:none!important}
.wi-app .wi-head .wi-lockup,.wi-app .wi-phead .wi-lockup{
  gap:7px !important;align-items:center !important}
/* Search pill on bone — soft fill + hairline, dark type. !important beats the many #E8E8ED
   theme variants that otherwise fight this control. */
.wi-app .wi-head .wi-hb{background:rgba(250,250,251,.96) !important;
  border:1px solid rgba(0,0,0,.16) !important;
  box-shadow:inset 0 0 0 0 transparent,0 2px 8px rgba(0,0,0,.04) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
.wi-app .wi-head .wi-hb:active{background:rgba(240,240,244,.98) !important}
.wi-app .wi-head .wi-hb:focus-within{border-color:rgba(20,184,166,.75) !important;
  box-shadow:0 0 0 3px rgba(20,184,166,.22) !important}
.wi-app .wi-head .wi-hb input,.wi-app .wi-head .wi-hb input.wi-hb-in{color:#1D1D1F !important}
.wi-app .wi-head .wi-hb input::placeholder{color:#55555A !important;opacity:1}
.wi-app .wi-head .wi-hb .wi-ph,.wi-app .wi-head .wi-phanim,
.wi-app .wi-head .wi-phanim::after{color:#55555A !important;opacity:1}
.wi-app .wi-head .wi-sic svg,.wi-app .wi-head .wi-scanin svg,
.wi-app .wi-head .wi-ib svg{stroke:#55555A !important;color:#55555A !important}
.wi-app .wi-head .wi-hx{color:#55555A !important}
.wi-app .wi-phead .wi-backrow,.wi-app .wi-phead .wi-backrow *{color:#55555A !important}
.wi-app .wi-phead .wi-backrow svg{stroke:#1D1D1F !important}
.wi-app .wi-hb .wi-ph{flex:1;min-width:0;font-size:var(--fs-body);color:var(--onSurface);opacity:.75;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;
  /* It is a <button>, so the UA chrome has to go or it draws a box inside the bar. */
  background:none;border:0;padding:0;font-family:inherit;appearance:none;cursor:text}
/* Hit 44×44; painted circle stays 38 (padding + content-box). */
.wi-app .wi-ib{width:44px;height:44px;padding:3px;margin:-3px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:var(--onSurfaceVariant);transition:transform .1s,background .15s;background:none;border:0;cursor:pointer;
  background-clip:content-box;-webkit-background-clip:content-box;box-sizing:border-box}
.wi-app .wi-ib:active{transform:scale(.88);background:var(--surfaceContainerHighest)}
.wi-app .wi-ib svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* Search sits beside Scan and must not be mistaken for it: tonal instead of
   filled,same 46px so the pair reads as one control cluster. */
.wi-app .wi-ib.wi-pri,.wi-app .wi-ib.wi-sec{padding:0;margin:0;background-clip:border-box;-webkit-background-clip:border-box}
.wi-app .wi-ib.wi-pri{background:var(--primary);color:var(--onPrimary);width:40px;height:40px}
.wi-app .wi-ib.wi-sec{background:var(--secondaryContainer);color:var(--onSecondaryContainer);width:40px;height:40px}
.wi-app .wi-ib.wi-pri svg,.wi-app .wi-ib.wi-sec svg{width:20px;height:20px}
/* .wi-chips / .wi-chip DELETED 2026-08-31 — the chip rail was replaced by .wi-ptabs and its
   component (WiChips) had been orphaned since,rendered by nothing. Leaving the styles behind made
   it look like a live surface. Today's shelf navigation is .wi-ptabs; wi-subhead is kept for other
   shells. check-wi still guards that WiChips is not remounted. */
.wi-app .wi-subhead{flex:none;background:var(--pageBg);z-index:28;padding:6px 0 6px}
/* Today page tabs — Verified | All Deals under the banners (owner TARGET 2026-08-31).
   Sticky inside .wi-body so they freeze under the existing WiApp header; banners scroll away.
   Full-bleed (cancel body pad); equal columns; teal underline; hairline. No black chips.
   Body uses gap:0 (not 14px) so there is NO empty flex slot under the stuck bar for
   studio plates to paint through — box-shadow alone lost to mix-blend/transform cards.
   No padding-top on the sticky nav: that empty pad was a paint hole between search and
   tab labels once cards stacked above the bar. isolation+z-index keep multiply plates under.
   Never margin-bottom:-14px or isolation:isolate on the grid (hid listings,2026-08-31). */
.wi-app .wi-ptabs{
  position:sticky;top:0;z-index:50;flex:none;isolation:isolate;
  display:flex;align-items:stretch;
  /* Full-bleed EXPLICITLY. `width:auto` did not stretch here, so the negative margins shifted the
     bar left without widening it: measured 0..1690 against a 1722 viewport, i.e. a 32px uncovered
     strip on the right — which is precisely where the white card showed through in the owner's
     screenshot. Stating the width removes the guesswork. */
  /* Full-bleed, and max-width:none is the load-bearing half. `.wi-app .wi-body > *` sets
     max-width:100%, which clamps EVERY child to the parent's content box — so no width value works
     until that is lifted. Measured: with the clamp in place the bar sat 0..1690 while the body's
     content ran to 1706, leaving a ~16px strip on the right where the white cards showed through.
     That strip is the notch in the owner's screenshot. 100vw was tried and clamped identically,
     which is what pointed at max-width rather than at the width itself.
     32px = the page inset doubled; keep it in step with the negative margin below. The parent
     clips at its PADDING box, so 100%+32 lands exactly on the viewport edge and no further. */
  max-width:none;width:calc(100% + 32px);
  margin:0 calc(-1 * var(--sp-4,16px));
  padding:0;background:var(--pageBg);
  /* Five labels do not fit 392px, so the bar scrolls sideways. scrollbar hidden — on a phone it is
     chrome, and the fade below already signals there is more. overscroll-behavior-x:contain stops
     a horizontal fling at the end of the tabs from triggering the browser's back gesture. */
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;scrollbar-width:none;
  /* Pills need breathing room and their own gap; the inline padding restores the page inset that
     the full-bleed negative margin cancels. */
  gap:6px;padding:6px var(--sp-4,12px);
  /* OPAQUE, edge to edge. The owner's screenshot showed a white notch beside "Biggest markdowns" —
     that is a white CARD showing through the bar. The band is the page grey while cards are white, so any
     gap in coverage reads as a bright hole. The feed sits in its own stacking context
     (.wi-feedstack, z-index:0, isolation:isolate) and this bar is above it at z-index:50; the fill
     is what makes that separation visible. Do not make this background transparent or partial. */
  background:var(--pageBg);
  border-bottom:1px solid rgba(0,0,0,.06)}
/* The pills no longer meet the hairline,so the row needs no underline seam. */
.wi-app .wi-ptabs::after{content:"";flex:0 0 4px}
.wi-app .wi-ptabs::-webkit-scrollbar{display:none;width:0;height:0}
/* max-width:none must OUT-SPECIFY `.wi-app .wi-body > *{max-width:100%}
`. Setting it inside the
   .wi-app .wi-ptabs rule was the same specificity (0,2,0) and the clamp is declared later,so it
   won and the bar stayed pinned to the content box — leaving the ~16px strip on the right where
   white cards showed through. `.wi-app .wi-body > .wi-ptabs` is (0,3,0) and wins outright. */
.wi-app .wi-body > .wi-ptabs{max-width:none;width:calc(100% + 32px)}
.wi-app .wi-onb + .wi-ptabs,.wi-app .wi-ask + .wi-ptabs{margin-top:calc(-1 * var(--sp-3,12px) + 2px)}
/* First child on Today (banners) — clear the search pill without body padding-top. */
.wi-app .wi-body > .wi-onb:first-child,.wi-app .wi-body > .wi-ask:first-child{margin-top:12px}
/* ...but on Today NEITHER of those :first-child rules has ever matched. The body's children are
   [.wi-ptr,.wi-sr,.wi-onb,.wi-ptabs] — the pull-to-refresh is first and the screen-reader live
   region sits between,so the banner is the THIRD child and both rules above are dead code on the
   surface they were written for.
   Worse,.wi-ptr is height:0 with margin-bottom:-12px,so it drags the next sibling 12px upward:
   measured at scrollTop 0,the banner's card top was 86.8 against a head bottom of 94.8 — the card
   sat 8px BEHIND the search pill,which is the "banners touching the search bar" report.
   This rule matches the real structure (the banner as a later sibling of .wi-ptr) at specificity
   0,4,0 so it beats `.wi-brief + .wi-onb` (0,3,0) without touching the .wi-brief case.
   WAS 22px, of which 12 cancelled .wi-ptr's negative margin and 10 were the real clearance. That
   negative margin is gone now, so this is the 10 on its own — same rendered position, one fewer
   number that only makes sense against another. */
.wi-app .wi-body > .wi-ptr ~ .wi-onb{margin-top:10px}
/* Rhythm that body gap:14px used to provide — keep under banners,not under stuck tabs. */
.wi-app .wi-body > .wi-onb,.wi-app .wi-body > .wi-ask{margin-bottom:14px}
.wi-app .wi-ptabs + .wi-sechead{margin-top:12px}
.wi-app .wi-ptabs + .wi-feedstack > .wi-sechead{margin-top:12px}
/* Everything under sticky Today tabs — one stacking context below .wi-ptabs. */
.wi-app .wi-feedstack{position:relative;z-index:0;isolation:isolate;display:flex;flex-direction:column;gap:0;min-width:0;max-width:100%}
/* flex:1 1 50% was sized for exactly two tabs. With five,each must size to its own label and the
   bar scrolls — squashing five labels into the width makes them all unreadable. */
/* OUTLINE PILLS,teal active (owner 2026-08-31,mock option 4). Was an underline tab: the label
   sat bare on the page,so with five shelves the row read as a sentence rather than as controls.
   A pill has an edge,which is what makes it look tappable. */
.wi-app .wi-ptab{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;margin:0;padding:0 12px;
  /* 40px — denser than the prior 44 while staying ≥36 Material touch floor. */
  white-space:nowrap;height:40px;min-height:40px;border-radius:999px;
  border:1px solid var(--outlineVariant,rgba(29,29,31,.12));background:transparent;
  cursor:pointer;position:relative;
  font:600 13px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  letter-spacing:-.01em;color:var(--onSurfaceVariant,#636368);text-align:center;
  display:inline-flex;align-items:center;
  transition:background .15s,color .15s,border-color .15s}
.wi-app .wi-ptab.on{background:var(--primaryFill);border-color:var(--primaryFill);color:#fff}
.wi-app .wi-ptab:active{transform:scale(.97)}
/* Price bands inside Verified — filter the trust shelf by convert-friendly caps. */
.wi-app .wi-pbands{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  flex:none;scrollbar-width:none;margin:0 calc(-1 * var(--sp-4,16px));padding:0 var(--sp-4,16px) 2px;
  touch-action:pan-x}
.wi-app .wi-pbands::-webkit-scrollbar{display:none;width:0;height:0}
.wi-app .wi-pband{flex:none;border:0;cursor:pointer;font-family:inherit;min-height:40px;padding:8px 14px;
  border-radius:999px;font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  background:var(--surfaceContainer);color:var(--onSurface);display:flex;align-items:center}
.wi-app .wi-pband:active{transform:scale(.96)}
.wi-app .wi-pband.wi-on{background:var(--primary);color:var(--onPrimary)}
/* ── Today: the ask line,the promise,the refresh (transcribed) ────────── */
.wi-app .wi-ask{display:flex;gap:10px;flex:none}
.wi-app .wi-askline{font-size:var(--fs-bodySm);color:var(--onSurfaceVariant);text-align:center;
  /* Padding was tuned for a block with the three words under it. Alone, that left the line
     stranded between the tiles and the feed with visible air on both sides. */
  padding:0 12px;margin:-2px 0 -4px;flex:none;text-wrap:pretty}
/* Today banner rail — Apple Store–style hero cards (owner refs 16 Aug).
   Tall rounded cards,visual stage + copy,neighbors peek in the carousel.
   Stamps + CTA use WiApp reserved verdict / primary tokens (design review 2026-08-21) —
   never iOS system orange/green or Apple blue for product CTAs. */
.wi-app .wi-onb{
  --onb-label:var(--onSurface); --onb-secondary:var(--onSurfaceVariant);
  --onb-sep:color-mix(in srgb, var(--onSurface) 20%, transparent);
  --onb-fill3:color-mix(in srgb, var(--onSurface) 14%, transparent);
  --onb-card:var(--cardBg); --onb-inset:var(--surfaceContainer);
  --onb-chip:var(--surfaceContainerLowest);
  position:relative;flex:none;margin:0;background:transparent;color:var(--onb-label);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif}
.wi-app[data-theme="dark"] .wi-onb,.wi-app[data-theme="system"] .wi-onb{
  --onb-sep:color-mix(in srgb, var(--onSurface) 28%, transparent);
  --onb-fill3:color-mix(in srgb, var(--onSurface) 18%, transparent)}
@media (prefers-color-scheme:dark){
  .wi-app[data-theme="system"] .wi-onb{
    --onb-sep:color-mix(in srgb, var(--onSurface) 28%, transparent);
    --onb-fill3:color-mix(in srgb, var(--onSurface) 18%, transparent)}
}
.wi-app .wi-onb + .wi-sechead{margin-top:calc(-1 * var(--sp-3, 12px) + 2px)}
/* Banner carousel: NOT overflow-x:auto — a nested horizontal scroller on Android
   Chrome WebView dead-ends vertical pans (Today couldn't scroll under a finger on
   the card). Page with transform; touch-action:pan-y lets vertical reach .wi-body. */
.wi-app .wi-onb-track{display:block;overflow:hidden;overflow-x:hidden;overflow-y:hidden;
  touch-action:pan-y;overscroll-behavior:none;
  padding:8px 16px 12px;box-sizing:border-box;width:100%;position:relative}
.wi-app .wi-onb-strip{display:flex;gap:14px;align-items:stretch;width:100%;
  will-change:transform;transition:transform .28s cubic-bezier(.2,.8,.25,1);
  touch-action:pan-y}
.wi-app .wi-onb-strip.wi-dragging{transition:none}
.wi-app .wi-brief{margin-bottom:0}
.wi-app .wi-brief + .wi-onb{margin-top:calc(-1 * var(--sp-3, 12px) + 6px)}
.wi-app .wi-body > .wi-onb:first-child{margin-top:10px}
.wi-app .wi-onb-track::-webkit-scrollbar{display:none;width:0;height:0}
.wi-app .wi-onb-card{flex:0 0 100%;scroll-snap-align:none;min-width:0;
  max-width:none;box-sizing:border-box;background:#fff;border-radius:18px;
  padding:0;display:flex;flex-direction:column;position:relative;color:#1D1D1F;
  border:0;overflow:hidden;
  /* Lifted off the page (owner 2026-08-31) — was box-shadow:none, so the white card sat flush on
     the page ground and its lower edge vanished. The value that RENDERS is on the .wi-onb-apple
     rule below, which carries !important; this is only the default for any non-Apple variant. */
  box-shadow:0 1px 2px rgba(14,26,43,.06),0 10px 26px -10px rgba(14,26,43,.18)}
.wi-app[data-theme="dark"] .wi-onb-card{
  box-shadow:0 12px 36px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3)}
@media (prefers-color-scheme:dark){
  .wi-app[data-theme="system"] .wi-onb-card{
    box-shadow:0 12px 36px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3)}
}
/* Visual stage — the Apple Store “photo half”. */
/* Share demo on the "Paste a link" banner — the whole hand-off,in four beats:
   search the product on Amazon,tap Share,pick worthitforyou,read the verdict.
   Plays the day's REAL pair from /api/banner-pair: one banked BUY,one banked SKIP
   (or WAIT when the day has none). Both runs share ONE 16s timeline with
   percentage keyframes,so the beats cannot drift apart whichever moment the card
   mounts. One product plays alone on an 8s loop; none falls back to the four
   none falls back to the four stamps. Reduced motion holds the verdict. */
.wi-app .wi-sd{position:relative;width:192px;height:188px;border-radius:18px;background:#0B1620;
  border:3px solid #0B1620;overflow:hidden;box-shadow:0 3px 10px rgba(3,22,58,.35),0 20px 36px -16px rgba(3,22,58,.7)}
.wi-app .wi-sd-run{position:absolute;inset:0;display:block}
.wi-app .wi-sd-scr{position:absolute;inset:0;background:#fff;border-radius:15px;display:flex;
  flex-direction:column;padding:9px;gap:5px;overflow:hidden}
.wi-app .wi-sd-src{display:flex;align-items:center;gap:5px;flex:none;font-size:9.5px;font-weight:700;color:#5B6D76}
.wi-app .wi-sd-src img{width:13px;height:13px;border-radius:3px;flex:none}
/* beat 1 — the search */
.wi-app .wi-sd-q{display:flex;align-items:center;gap:5px;flex:none;background:#F1F3F4;
  border-radius:999px;padding:5px 9px;overflow:hidden}
.wi-app .wi-sd-q svg{width:11px;height:11px;flex:none}
.wi-app .wi-sd-qt{font-size:9px;font-weight:600;color:#0C161A;white-space:nowrap;overflow:hidden;
  border-right:1.5px solid #0C161A;max-width:0}
/* beats 2-4 */
.wi-app .wi-sd-shot{height:64px;flex:none;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;opacity:0}
.wi-app .wi-sd-shot img{max-height:100%;max-width:100%;height:auto;width:auto;object-fit:contain;display:block}
.wi-app .wi-sd-name{flex:none;font-size:10px;font-weight:600;line-height:1.25;color:#0C161A;opacity:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wi-app .wi-sd-price{font-size:16px;font-weight:800;letter-spacing:-.025em;color:#0C161A;opacity:0;
  font-variant-numeric:tabular-nums;margin-top:auto}
.wi-app .wi-sd-share{position:absolute;right:9px;bottom:9px;width:28px;height:28px;border-radius:9px;
  background:#0A84FF;display:grid;place-items:center;opacity:0}
.wi-app .wi-sd-share svg{width:14px;height:14px}
.wi-app .wi-sd-sheet{position:absolute;left:0;right:0;bottom:0;background:#F2F3F6;
  border-radius:13px 13px 17px 17px;padding:7px 8px 10px;box-shadow:0 -6px 16px rgba(0,0,0,.16);transform:translateY(105%)}
.wi-app .wi-sd-grab{display:block;width:24px;height:3px;border-radius:2px;background:#C7CBD4;margin:0 auto 8px}
.wi-app .wi-sd-apps{display:flex;gap:7px;justify-content:space-between}
.wi-app .wi-sd-app{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:6.5px;font-weight:600;color:#5B6570;text-align:center}
.wi-app .wi-sd-app i{width:30px;height:30px;border-radius:9px;display:block}
.wi-app .wi-sd-app1{background:#31D158}
.wi-app .wi-sd-app3{background:#8E8E93}
.wi-app .wi-sd-appw{background:#1B1340 url(/wi-mark.png) center/76% no-repeat}
.wi-app .wi-sd-tap{position:absolute;width:20px;height:20px;border-radius:50%;opacity:0;
  background:rgba(10,132,255,.35);box-shadow:0 0 0 2px rgba(10,132,255,.75)}
.wi-app .wi-sd-tap1{right:13px;bottom:13px}
.wi-app .wi-sd-tap2{left:50%;margin-left:-10px;top:16px}
.wi-app .wi-sd-c{background:linear-gradient(#0B1620,#132433);align-items:center;justify-content:center;gap:8px;opacity:0}
.wi-app .wi-sd-stamp{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#0C161A;
  font-size:11px;font-weight:800;letter-spacing:.08em;padding:6px 11px;border-radius:999px;
  box-shadow:0 1px 2px rgba(4,20,48,.2),0 8px 18px -10px rgba(4,20,48,.5)}
.wi-app .wi-sd-stamp::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;background:#5D6675}
.wi-app .wi-sd-stamp.v-buy::before{background:#0F9D57}
.wi-app .wi-sd-stamp.v-skip::before{background:#E23B3B}
.wi-app .wi-sd-stamp.v-wait::before{background:#B5820A}
.wi-app .wi-sd-stamp.v-fair::before{background:#5D6675}
.wi-app .wi-sd-fact{font-size:9.5px;font-weight:600;line-height:1.4;color:#B9C7D1;text-align:center;
  padding:0 10px;font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:no-preference){
  .wi-app .wi-sd-r1{animation:wiSdA 16s linear infinite}
  .wi-app .wi-sd-r2{animation:wiSdB 16s linear infinite}
  .wi-app .wi-sd-r1 .wi-sd-qt{animation:wiSdType 16s steps(24,end) infinite}
  .wi-app .wi-sd-r2 .wi-sd-qt{animation:wiSdTypeB 16s steps(24,end) infinite}
  .wi-app .wi-sd-r1 .wi-sd-shot,.wi-app .wi-sd-r1 .wi-sd-name,
  .wi-app .wi-sd-r1 .wi-sd-price,.wi-app .wi-sd-r1 .wi-sd-share{animation:wiSdProdA 16s linear infinite}
  .wi-app .wi-sd-r2 .wi-sd-shot,.wi-app .wi-sd-r2 .wi-sd-name,
  .wi-app .wi-sd-r2 .wi-sd-price,.wi-app .wi-sd-r2 .wi-sd-share{animation:wiSdProdB 16s linear infinite}
  .wi-app .wi-sd-r1 .wi-sd-tap1{animation:wiSdT1A 16s ease-out infinite}
  .wi-app .wi-sd-r1 .wi-sd-tap2{animation:wiSdT2A 16s ease-out infinite}
  .wi-app .wi-sd-r2 .wi-sd-tap1{animation:wiSdT1B 16s ease-out infinite}
  .wi-app .wi-sd-r2 .wi-sd-tap2{animation:wiSdT2B 16s ease-out infinite}
  .wi-app .wi-sd-r1 .wi-sd-sheet{animation:wiSdShA 16s cubic-bezier(.23,1,.32,1) infinite}
  .wi-app .wi-sd-r2 .wi-sd-sheet{animation:wiSdShB 16s cubic-bezier(.23,1,.32,1) infinite}
  .wi-app .wi-sd-r1 .wi-sd-c{animation:wiSdCA 16s cubic-bezier(.23,1,.32,1) infinite}
  .wi-app .wi-sd-r2 .wi-sd-c{animation:wiSdCB 16s cubic-bezier(.23,1,.32,1) infinite}
}
/* a lone run owns the whole loop rather than sitting dark for half of it */
.wi-app .wi-sd-run:only-child{animation:none !important;opacity:1 !important}
.wi-app .wi-sd-run:only-child .wi-sd-qt{animation:wiSdType 8s steps(24,end) infinite}
.wi-app .wi-sd-run:only-child .wi-sd-shot,.wi-app .wi-sd-run:only-child .wi-sd-name,.wi-app .wi-sd-run:only-child .wi-sd-price,.wi-app .wi-sd-run:only-child .wi-sd-share{animation:wiSdProdA 8s linear infinite}
.wi-app .wi-sd-run:only-child .wi-sd-tap1{animation:wiSdT1A 8s ease-out infinite}
.wi-app .wi-sd-run:only-child .wi-sd-tap2{animation:wiSdT2A 8s ease-out infinite}
.wi-app .wi-sd-run:only-child .wi-sd-sheet{animation:wiSdShA 8s cubic-bezier(.23,1,.32,1) infinite}
.wi-app .wi-sd-run:only-child .wi-sd-c{animation:wiSdCA 8s cubic-bezier(.23,1,.32,1) infinite}
@keyframes wiSdA{0%,47%{opacity:1}50%,97%{opacity:0}100%{opacity:1}}
@keyframes wiSdB{0%,47%{opacity:0}50%,97%{opacity:1}100%{opacity:0}}
@keyframes wiSdType{0%{max-width:0}9%{max-width:100%}47%{max-width:100%}50%,100%{max-width:0}}
@keyframes wiSdTypeB{0%,50%{max-width:0}59%{max-width:100%}97%{max-width:100%}100%{max-width:0}}
@keyframes wiSdProdA{0%,10%{opacity:0}14%,46%{opacity:1}50%,100%{opacity:0}}
@keyframes wiSdProdB{0%,60%{opacity:0}64%,96%{opacity:1}100%{opacity:0}}
@keyframes wiSdT1A{0%,16%{opacity:0;transform:scale(1.5)}19%{opacity:1;transform:scale(1)}23%{opacity:0}100%{opacity:0}}
@keyframes wiSdT2A{0%,31%{opacity:0;transform:scale(1.5)}34%{opacity:1;transform:scale(1)}38%{opacity:0}100%{opacity:0}}
@keyframes wiSdT1B{0%,66%{opacity:0;transform:scale(1.5)}69%{opacity:1;transform:scale(1)}73%{opacity:0}100%{opacity:0}}
@keyframes wiSdT2B{0%,81%{opacity:0;transform:scale(1.5)}84%{opacity:1;transform:scale(1)}88%{opacity:0}100%{opacity:0}}
@keyframes wiSdShA{0%,21%{transform:translateY(105%)}26%,36%{transform:translateY(0)}41%,100%{transform:translateY(105%)}}
@keyframes wiSdShB{0%,71%{transform:translateY(105%)}76%,86%{transform:translateY(0)}91%,100%{transform:translateY(105%)}}
@keyframes wiSdCA{0%,39%{opacity:0}43%,47%{opacity:1}50%,100%{opacity:0}}
@keyframes wiSdCB{0%,89%{opacity:0}93%,97%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .wi-app .wi-sd-r2{display:none}
  .wi-app .wi-sd-sheet,.wi-app .wi-sd-tap{display:none}
  .wi-app .wi-sd-shot,.wi-app .wi-sd-name,.wi-app .wi-sd-price{opacity:1}
  .wi-app .wi-sd-qt{max-width:100%}
  .wi-app .wi-sd-c{opacity:1}
}
}

.wi-app .wi-onb-hero{position:relative;flex:none;height:178px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
/* Owner pass 2026-08-22 — four fixes to the intro cards.
   (1) The heroes were a fixed 178px whatever they held,so each card opened with a
       band of empty gradient above its artwork. They now size to their content with
       a floor,and the artwork fills the width it was given.
   (2) Seller marks on the compare card come from the favicon service the app already
       calls (storeFavicon / .obuy-fav) — no new image host,no bundled trademark art.
   (3) The desktop card's CTA is the Chrome extension button again,mark included.
   (4) The share demo names its source,because "Any Amazon link" has to LOOK like a
       link arriving from Amazon,not a product that happened to appear. */
.wi-app .wi-onb-hero{height:auto;min-height:0;padding:12px 0}
.wi-app .wi-onb-stamps{padding:0}
.wi-app .wi-sd{width:192px;height:188px}
.wi-app .wi-sd-src{display:flex;align-items:center;gap:5px;flex:none;
  font-size:9.5px;font-weight:700;letter-spacing:.01em;color:#5B6D76}
.wi-app .wi-sd-src img{width:13px;height:13px;border-radius:3px;flex:none}
.wi-app .wi-sd-shot{height:74px}
.wi-app .wi-sd-name{font-size:10.5px}
.wi-app .wi-sd-price{font-size:17px}
.wi-app .wi-onb-fav{width:15px;height:15px;border-radius:4px;object-fit:contain;
  vertical-align:-3px;margin-right:7px;background:#fff}
/* Cards 2 and 3 wear the same device frame as card 1 (owner 2026-08-22),so the
   three heroes are one height,the artwork stops floating in open gradient,and the
   three CTAs land on the same line — the track already stretches cards to equal
   height,so equal heroes are all that was missing. */
.wi-app .wi-onb-stage{position:relative;width:192px;height:188px;border-radius:18px;
  background:#0B1620;border:3px solid #0B1620;overflow:hidden;
  box-shadow:0 3px 10px rgba(3,22,58,.35),0 20px 36px -16px rgba(3,22,58,.7)}
.wi-app .wi-onb-screen{position:absolute;inset:0;background:#fff;border-radius:15px;
  display:flex;align-items:center;justify-content:center;padding:9px;overflow:hidden}
/* The screen is a PICTURE of a phone showing a light app,so it stays white in both
   themes — which means its contents must be pinned to ink here. In dark mode the
   mocks inherit light text meant for the dark card ground,and on a white screen
   that measured 1.88:1 and 1.12:1. A theme-dependent colour inside a
   theme-independent frame is the trap; pin both sides. */
.wi-app .wi-onb-screen,.wi-app[data-theme="dark"] .wi-onb-screen{background:#fff;color:#0C161A}
.wi-app .wi-onb-screen .lab,.wi-app[data-theme="dark"] .wi-onb-screen .lab{color:#5B6D76}
.wi-app .wi-onb-screen .row,.wi-app[data-theme="dark"] .wi-onb-screen .row{color:#33454E}
.wi-app .wi-onb-screen .row.win,.wi-app[data-theme="dark"] .wi-onb-screen .row.win{color:#0C161A}
.wi-app .wi-onb-screen .sep,.wi-app[data-theme="dark"] .wi-onb-screen .sep{background:#E6EBEE}
.wi-app .wi-onb-screen .wi-onb-url,.wi-app[data-theme="dark"] .wi-onb-screen .wi-onb-url{color:#5B6D76}
.wi-app .wi-onb-screen .wi-onb-pname,.wi-app[data-theme="dark"] .wi-onb-screen .wi-onb-pname{color:#0C161A}
.wi-app .wi-onb-screen .wi-onb-chrome-price,.wi-app[data-theme="dark"] .wi-onb-screen .wi-onb-chrome-price{color:#0C161A}
.wi-app .wi-onb-screen .wi-onb-chrome,.wi-app[data-theme="dark"] .wi-onb-screen .wi-onb-chrome{background:#fff}
.wi-app .wi-onb-screen .wi-onb-thumb,.wi-app[data-theme="dark"] .wi-onb-screen .wi-onb-thumb{background:#E8ECEF}
.wi-app .wi-onb-screen .wi-onb-stamp,.wi-app[data-theme="dark"] .wi-onb-screen .wi-onb-stamp{
  background:#F4F6F7;color:#0C161A}
/* the four-stamp fallback sits in the same frame,so a day with no pair still
   lines the three cards up rather than leaving card 1 short. */
.wi-app .wi-onb-stage .wi-onb-stamps{max-width:none;padding:0;gap:7px}
.wi-app .wi-onb-stage .wi-onb-stamp{font-size:11.5px;padding:6px 9px}
/* the mocks now fill the screen rather than sizing themselves against the card */
.wi-app .wi-onb-card.scan .wi-onb-pricecard{width:100%;max-width:none;margin:0;
  box-shadow:none;background:transparent;padding:0}
.wi-app .wi-onb-card.scan .wi-onb-pricecard .lab{font-size:8.5px;margin-bottom:6px;
  white-space:normal;line-height:1.25}
.wi-app .wi-onb-card.scan .wi-onb-pricecard .row{font-size:11px;padding:5px 0;gap:6px}
.wi-app .wi-onb-card.scan .wi-onb-fav{width:13px;height:13px;margin-right:5px}
.wi-app .wi-onb-card.scan .wi-onb-pricecard .row .tag{font-size:8px;padding:2px 4px;margin-left:5px}
.wi-app .wi-onb-card.chrome .wi-onb-chrome{width:100%;max-width:none;margin:0;box-shadow:none}
.wi-app .wi-onb-card.chrome .wi-onb-chrome-bar{padding:6px 8px;gap:6px}
.wi-app .wi-onb-card.chrome .wi-onb-url{font-size:8.5px}
.wi-app .wi-onb-card.chrome .wi-onb-chrome-body{padding:9px;gap:8px}
.wi-app .wi-onb-card.chrome .wi-onb-pname{font-size:9.5px;line-height:1.25}
.wi-app .wi-onb-card.chrome .wi-onb-chrome-price{font-size:12.5px}
.wi-app .wi-onb-card.chrome .wi-onb-buybadge{font-size:9px;padding:3px 6px}
.wi-app .wi-onb-card.chrome .wi-onb-thumb{width:30px;height:30px;flex:none}
/* every hero is now one frame plus its padding */
.wi-app .wi-onb-hero{min-height:0;height:auto;padding:12px 0}
/* ═══ INTRO CARDS — one family (owner-approved 2026-08-22) ═══════════════════
   All three cards carry the same device frame at the same height,their frames
   start on the same line and their buttons land on the same line. Every number
   below was MEASURED in a probe,not guessed — three separate things were pushing
   card 3 out of step and each is noted at its rule.
   The frame width is an explicit pixel value on purpose: its children are all
   position:absolute,so its intrinsic width is 0 and any auto/percentage width
   computes to 6px (the border alone). */
/* retired tutorial CTA fill — Apple-stack uses .wi-onb-link teal */
/* MEASURED: with the hero flexing,card 3's taller copy squeezed its hero to 270
   against 296 on the others,so its frame sat 26px higher. Pin every hero to the
   same height and let the copy block take the remainder — the frames now start at
   the same Y on all three,and the CTAs stay bottom-aligned.
   2026-08-30: modest shrink 268→228 so Verified peeks a little earlier (all mobile /
   both native apps). Not a tiny ticker — title + body stay readable; CTA ≥44pt. */
/* retired fixed hero height — Apple-stack photo is aspect-ratio driven */
.wi-app .wi-onb-copy{flex:1 1 auto}
/* The last 26px: card 3's foot line wraps to two lines,which makes its whole
   action block taller and pushes its button down. Reserve two lines on every card
   so the three buttons sit on the same line whatever the copy does. */
/* MEASURED the last 26px to the headline: card 3's wraps to two lines (52px) while
   1 and 2 fit on one (26px). Reserve two lines everywhere so the three buttons land
   on the same line whatever any headline does. */
/* .wi-onb-h min-height retired for Apple-stack */
.wi-app .wi-onb-foot{min-height:2.5em;align-items:flex-start}
.wi-app .wi-onb-copy{flex:0 0 auto;padding-bottom:8px}
/* The frame fills the hero. Measured: with only position:absolute children its
   intrinsic width is 0,so auto and percentage widths both computed to 6px (the
   border). An explicit pixel width is the only thing independent of the contents. */
.wi-app .wi-sd,.wi-app .wi-onb-stage{
  width:192px !important; height:188px !important;
  max-width:none !important; min-width:0 !important;
  aspect-ratio:auto !important; flex:0 0 auto !important;
  justify-self:center !important; align-self:center !important;
  margin-left:auto !important; margin-right:auto !important;
}
@media (max-width:380px){
  .wi-app .wi-sd, .wi-app .wi-onb-stage{width:180px !important; height:176px !important}
  /* retired 214px hero */
}
/* artwork grows with the frame — modest scale with the slightly smaller heroes */
.wi-app .wi-sd-shot{height:62px}
.wi-app .wi-sd-name{font-size:10.5px}
.wi-app .wi-sd-price{font-size:16px}
.wi-app .wi-sd-qt{font-size:10.5px}
.wi-app .wi-sd-src{font-size:10.5px}
.wi-app .wi-sd-share{width:32px;height:32px}
.wi-app .wi-sd-app i{width:32px;height:32px}
.wi-app .wi-sd-stamp{font-size:12px;padding:6px 12px}
.wi-app .wi-sd-fact{font-size:11px}
.wi-app .wi-onb-card.scan .wi-onb-pricecard .lab{font-size:10px}
.wi-app .wi-onb-card.scan .wi-onb-pricecard .row{font-size:12.5px;padding:6px 0}
.wi-app .wi-onb-card.scan .wi-onb-fav{width:16px;height:16px}
.wi-app .wi-onb-card.chrome .wi-onb-url{font-size:10px}
.wi-app .wi-onb-card.chrome .wi-onb-pname{font-size:11px}
.wi-app .wi-onb-card.chrome .wi-onb-chrome-price{font-size:14px}
/* MEASURED: cards 1 and 2 matched exactly (hero 324,eyebrow at 342). Card 3 sat
   25px higher because its NEW badge is in the flow and adds height to the copy
   block,which shrinks the hero above it. Float the badge so the three copy blocks
   are structurally identical and the frames line up. */
.wi-app .wi-onb-copy{position:relative}
.wi-app .wi-onb-new{position:absolute;top:-24px;left:18px;margin:0;z-index:2}
/* four sellers now — tighten the rows so they still fit the frame */
.wi-app .wi-onb-card.scan .wi-onb-pricecard .row{font-size:12.5px;padding:5px 0}
.wi-app .wi-onb-card.scan .wi-onb-pricecard .lab{font-size:9.5px;margin-bottom:5px}
.wi-app .wi-onb-card.scan .wi-onb-fav{width:15px;height:15px;margin-right:6px}
.wi-app .wi-onb-card.scan .wi-onb-pricecard .row .tag{font-size:8px;padding:2px 4px;margin-left:5px}
/* Alignment,owner 2026-08-22. My earlier width:100% here was the cause: as a flex
   item it takes the whole line,and its own contents then sit left inside it — so the
   compare card looked shoved left and the browser mock overflowed the card's right
   edge. Give each a real width and centre it,and let the inner flex rows shrink
   (min-width:0) instead of forcing the frame wider than its parent. */
.wi-app .wi-onb-card.scan .wi-onb-pricecard{width:min(230px,86%);max-width:none;margin-inline:auto}
.wi-app .wi-onb-card.chrome .wi-onb-chrome{width:min(230px,86%);max-width:none;margin-inline:auto}
.wi-app .wi-onb-chrome-body{min-width:0}
.wi-app .wi-onb-chrome-body>div{min-width:0}
.wi-app .wi-onb-chrome-bar{min-width:0}
.wi-app .wi-onb-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-app .wi-onb-pname{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
/* the compare rows: one column of names,one column of prices,whatever a row carries */
.wi-app .wi-onb-pricecard .lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wi-app .wi-onb-pricecard .row{gap:8px}
.wi-app .wi-onb-pricecard .row>span:first-child{flex:1;min-width:0;display:flex;
  align-items:center;gap:7px;overflow:hidden}
.wi-app .wi-onb-pricecard .row>span:last-child{flex:none;margin-left:auto;
  font-variant-numeric:tabular-nums;text-align:right}
.wi-app .wi-onb-pricecard .row .tag{flex:none;margin-left:6px}
/* REMOVED 2026-08-31 — six per-slide hero gradients from the RETIRED tutorial-card design
     (share pale blue,scan pale green,chrome near-black,plus dark-theme navy and dark-green for
     share/scan and their prefers-color-scheme twins).

     They were dead rules that could only ever surface as a bug,and they did. The dark pair carried
     an attribute selector,making them 0,5,0 — they OUTRANKED the apple plate at 0,4,0,so the
     plate's own colour never applied in dark mode. That went unseen only because the photo was
     full-bleed and covered the plate completely; insetting the photo exposed a navy plate on card 1
     and a dark-green one on card 2,while card 3 stayed white because `chrome` has no dark-theme
     rule and its 0,4,0 light rule loses to the later apple rule. That asymmetry is the fingerprint:
     the cascade,not the photos.

     Safe to delete rather than scope: the banner has exactly ONE render site and it always emits
     `wi-onb wi-onb-apple`,so the non-apple variant these targeted is unreachable. Do not
     reintroduce per-slide plate colours — the Apple-stack banners carry photographs and the plate
     is white on every card,in every theme. */
.wi-app .wi-onb-stamps{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0 22px;max-width:280px}
.wi-app .wi-onb-stamp{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;
  background:var(--onb-chip);color:var(--onb-label);font-size:13px;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 6px 18px rgba(14,26,43,.12)}
.wi-app .wi-onb-stamp i{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;flex:none}
.wi-app .wi-onb-stamp.buy i{background:var(--vBUY)}
.wi-app .wi-onb-stamp.wait i{background:var(--vWAIT)}
.wi-app .wi-onb-stamp.skip i{background:var(--vSKIP)}
.wi-app .wi-onb-stamp.fair i{background:var(--vFAIR)}
/* Verdict pill icons — fixed 2026-08-22.
   These squares were painted with --vBUY/--vWAIT/--vSKIP/--vFAIR,which are the
   Material ON-colour tokens: dark shades intended for TEXT sitting on a light
   container,not fills. In the light theme that rendered BUY as deep green,WAIT
   as teal and SKIP as maroon,so the four verdicts stopped reading as green /
   amber / red — and teal is the brand action colour,which §1 says must never be
   mistakeable for a verdict.
   They now use the verdict fills the rest of the product uses. Each carries a
   white glyph,so the floor here is WCAG 1.4.11 non-text contrast at 3:1:
   BUY 3.02 · WAIT 4.42 · SKIP 3.94 · FAIR 5.28. */
.wi-app .wi-onb-stamp.buy i{background:#0F9D57}
.wi-app .wi-onb-stamp.wait i{background:#B5820A}
.wi-app .wi-onb-stamp.skip i{background:#E23B3B}
.wi-app .wi-onb-stamp.fair i{background:#5D6675}
.wi-app .wi-onb-stamp svg{display:block}
.wi-app .wi-onb-pricecard{width:min(260px,78%);background:var(--onb-chip);border-radius:18px;padding:12px 14px;
  box-shadow:0 10px 28px rgba(14,26,43,.14)}
.wi-app .wi-onb-pricecard .lab{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--onb-secondary);margin-bottom:8px}
.wi-app .wi-onb-pricecard .row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;
  font-size:14px;letter-spacing:-.01em;color:var(--onb-secondary)}
.wi-app .wi-onb-pricecard .row.win{color:var(--onb-label);font-weight:600}
.wi-app .wi-onb-pricecard .row .tag{background:var(--vBUY);color:var(--onV);font-size:10px;font-weight:700;
  padding:2px 6px;border-radius:5px;margin-left:6px}
.wi-app .wi-onb-pricecard .sep{height:.5px;background:var(--onb-sep)}
.wi-app .wi-onb-chrome{width:min(270px,84%);background:rgba(255,255,255,.96);border-radius:14px;overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.35)}
.wi-app .wi-onb-chrome-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;
  background:#F0F0F4}
.wi-app .wi-onb-dots3{display:flex;gap:4px}
.wi-app .wi-onb-dots3 i{width:6px;height:6px;border-radius:999px;background:color-mix(in srgb, #000 22%, transparent);display:block}
.wi-app .wi-onb-url{flex:1;background:#fff;border-radius:999px;padding:4px 9px;font-size:11px;
  color:#636366;font-family:"SF Mono",ui-monospace,Menlo,monospace;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-app .wi-onb-ext{width:20px;height:20px;border-radius:5px;background:var(--primary);color:var(--onPrimary);
  font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.wi-app .wi-onb-chrome-body{display:flex;gap:10px;align-items:center;padding:12px}
.wi-app .wi-onb-thumb{width:34px;height:42px;border-radius:6px;background:#D1D1D6;flex:none}
.wi-app .wi-onb-pname{font-size:12px;color:#636366;line-height:1.25}
.wi-app .wi-onb-chrome-price{font-size:16px;font-weight:700;letter-spacing:-.02em;color:#1C1C1E}
.wi-app .wi-onb-buybadge{background:var(--vBUY);color:var(--onV);font-size:11.5px;font-weight:700;padding:4px 8px;border-radius:6px;flex:none}
/* Copy half — Apple Store text block. Modest shrink 2026-08-30 (not a ticker). */
.wi-app .wi-onb-copy{padding:14px 18px 4px;flex:1;display:flex;flex-direction:column;gap:0;position:relative}
.wi-app .wi-onb-eye{font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--onb-label);
  margin:0 0 3px;text-transform:none}
.wi-app .wi-onb-new{display:inline-flex;align-self:flex-start;align-items:center;background:var(--vBUY);color:var(--onV);
  font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 7px;border-radius:5px;margin-bottom:5px}
.wi-app .wi-onb-h{font-size:20px;font-weight:700;letter-spacing:-.022em;line-height:1.18;color:var(--onb-label);
  margin:0;text-wrap:pretty;padding-right:32px}
.wi-app .wi-onb-cap{font-size:14.5px;font-weight:400;line-height:1.35;color:var(--onb-secondary);margin:6px 0 0;
  text-wrap:pretty}
.wi-app .wi-onb-dismiss{position:absolute;top:14px;right:12px;z-index:2}
.wi-app .wi-onb-x{width:24px;height:24px;min-width:44px;min-height:44px;margin:-10px -10px -10px 0;flex:none;
  border:0;border-radius:999px;background:transparent;color:var(--onb-secondary);cursor:pointer;
  display:grid;place-items:center;padding:0;-webkit-tap-highlight-color:transparent}
.wi-app .wi-onb-x>span{width:24px;height:24px;border-radius:999px;background:var(--onb-fill3);
  display:grid;place-items:center;font-size:11px;line-height:1}
.wi-app .wi-onb-x:active>span{background:color-mix(in srgb, var(--onSurface) 24%, transparent)}
.wi-app .wi-onb-act{padding:10px 18px 16px;flex:none}
.wi-app .wi-onb-cta{width:100%;border:0;background:var(--primary);color:var(--onPrimary);font:inherit;
  font-size:17px;font-weight:600;min-height:48px;border-radius:999px;cursor:pointer;letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:center;gap:9px;-webkit-tap-highlight-color:transparent}
.wi-app .wi-onb-cta:active{filter:brightness(.94)}
.wi-app .wi-onb-cta svg{stroke:currentColor}
.wi-app .wi-onb-chrome-mark{width:22px;height:22px;border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.wi-app .wi-onb-chrome-mark svg{display:block}
.wi-app .wi-onb-foot{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:400;
  color:var(--onb-secondary);padding:8px 2px 0;justify-content:center}
.wi-app .wi-onb-foot svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.wi-app .wi-onb-dots{display:flex;justify-content:center;align-items:center;gap:10px;padding:10px 0 12px;
  overflow:visible;position:relative;z-index:2}
/* Dot stays 18×18; transparent ::after is the 44×44 hit region (parent row is ~20px tall). */
.wi-app .wi-onb-dot{width:18px;height:18px;border:0;padding:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;-webkit-tap-highlight-color:transparent;position:relative}
.wi-app .wi-onb-dot::after{content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
.wi-app .wi-onb-dot>i{width:5px;height:5px;border-radius:999px;background:color-mix(in srgb, var(--onSurface) 28%, transparent);display:block}
.wi-app .wi-onb-dot.wi-on>i{background:var(--primary)}
/* Apple-stack intro (owner TARGET 2026-08-31 → CTA pills ship): photo · (H+sub LEFT | teal pill RIGHT) · dots in-card. */
.wi-app .wi-onb.wi-onb-apple{background:transparent;color:#1D1D1F}
.wi-app .wi-onb.wi-onb-apple .wi-onb-track{padding:4px 16px 0}
.wi-app .wi-onb.wi-onb-apple .wi-onb-strip{gap:14px}
.wi-app .wi-onb.wi-onb-apple .wi-onb-card{
  flex:0 0 100% !important;max-width:none !important;background:#fff !important;
  /* Shadow lives HERE, not on the base .wi-onb-card rule — this variant is what actually renders
     and it carries !important, so a base-rule shadow is silently discarded. (Setting it on the base
     first is exactly what happened; computed style still read `none`.) Two layers, same recipe as
     --e1/--e2 on the deal cards: a tight contact shadow for the edge and a wide soft one for the
     lift, so the banner reads as the same class of object as the cards below it. */
  border-radius:18px !important;overflow:hidden;
  box-shadow:0 1px 2px rgba(14,26,43,.06),0 10px 26px -10px rgba(14,26,43,.18) !important}
/* Owner 2026-08-31: the plate is WHITE and the photo is an inset tile.
   The plate always painted a background,but nothing ever showed through it — each photo is a
   square asset in a square box under object-fit:cover,so it covered the plate completely and
   repainting the plate was a no-op on screen. The scene (a table,a shop aisle,a pedestal) is
   part of the PHOTOGRAPH,not a layer behind it. Insetting the photo is what actually makes the
   card read white: the margin becomes the dominant colour,and the four cards read as one set
   instead of four unrelated scenes. Background is dropped rather than re-declared so the card's
   own fill shows through — one source for the card colour,not two that can drift apart. */
.wi-app .wi-onb.wi-onb-apple .wi-onb-hero{
  position:relative;flex:none !important;height:auto !important;min-height:0 !important;
  padding:12px 12px 0 !important;margin:0;overflow:hidden;background:transparent;
  display:block !important;border-radius:18px 18px 0 0}
/* Radius on the PHOTO,not the plate — the plate's own radius only rounds the card's top
   corners,which the inset has now moved away from the image entirely.

   SCALED DOWN,NOT CROPPED (owner 2026-08-31,"reduce the banner size"). The obvious way to
   shorten this is a wider aspect-ratio under object-fit:cover,and it is wrong: all four photos
   are composed as edge-to-edge SQUARES. Card 4 carries its "It's a BUY" badge hard against the
   top and its WAIT/BUY pills hard against the bottom,so ANY vertical trim clips both — measured
   at 6/5 (75px),5/4 (90px) and 4/3 (112px),and even the gentlest one loses the badge. Card 3
   loses the phone's status bar and its bottom edge the same way. Capping the height instead keeps
   every pixel of every photo and buys the same ~78px. The image stays square,so max-height also
   sets its width; margin:auto centres it on the white plate. If new assets ever arrive with the
   subject inset from the edges,a real aspect-ratio crop becomes available — until then,do not
   "simplify" this back to aspect-ratio + cover. */
.wi-app .wi-onb.wi-onb-apple .wi-onb-photo{
  display:block;width:auto;height:auto;max-width:100%;max-height:236px;margin:0 auto;
  aspect-ratio:1/1;object-fit:cover;border-radius:14px;
  border:0;pointer-events:none;-webkit-user-drag:none;user-select:none}
/* Copy band: type stack LEFT | teal pill RIGHT · dots in-card under the row
   (owner ship — PR #171 polish onto Today; keep transform swipe from main).
   Horizontal pad MATCHES the hero's inset (12px). */
.wi-app .wi-onb.wi-onb-apple .wi-onb-copy{
  flex:0 0 auto !important;padding:14px 12px 12px !important;gap:0;
  display:flex;flex-direction:column;align-items:stretch;background:#fff;
  text-align:left;min-height:0 !important}
.wi-app .wi-onb.wi-onb-apple .wi-onb-row{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:12px;width:100%;min-width:0}
.wi-app .wi-onb.wi-onb-apple .wi-onb-text{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:0;
  text-align:left}
.wi-app .wi-onb.wi-onb-apple .wi-onb-card.wi-onb-center .wi-onb-copy,
.wi-app .wi-onb.wi-onb-apple .wi-onb-card.wi-onb-center .wi-onb-text{
  align-items:flex-start;text-align:left}
.wi-app .wi-onb.wi-onb-apple .wi-onb-h{
  font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.14;
  color:#1D1D1F !important;margin:0;padding:0 !important;min-height:0 !important;
  text-wrap:pretty}
.wi-app .wi-onb.wi-onb-apple .wi-onb-cap{
  font-size:17px;font-weight:400;letter-spacing:-.02em;line-height:1.28;
  color:#6E6E73 !important;margin:5px 0 0;text-wrap:pretty}
/* Teal filled pill — right of the H/sub row (not a centred text link / white chip). */
.wi-app .wi-onb.wi-onb-apple .wi-onb-link{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  margin:0;padding:10px 16px;border:0;border-radius:999px;
  background-color:var(--primaryFill);
  background-image:linear-gradient(135deg,
    var(--primaryFill) 0%,
    color-mix(in srgb, var(--primaryFill) 84%, #000 16%) 100%);
  color:#fff !important;font:inherit;font-size:15px;font-weight:600;
  letter-spacing:-.01em;line-height:1.2;cursor:pointer;text-align:center;
  white-space:nowrap;min-height:40px;max-width:46%;
  -webkit-tap-highlight-color:transparent;transition:transform .12s,opacity .12s}
.wi-app .wi-onb.wi-onb-apple .wi-onb-link:active{transform:scale(.98);opacity:.88}
/* Dots IN the card under the copy row — never a floating wrapper below the card. */
.wi-app .wi-onb.wi-onb-apple .wi-onb-dots{
  display:flex;justify-content:center;align-items:center;
  gap:8px;padding:12px 0 0;margin:0;flex:none;min-height:0}
.wi-app .wi-onb.wi-onb-apple .wi-onb-dot>i{
  width:7px;height:7px;background:rgba(0,0,0,.18)}
.wi-app .wi-onb.wi-onb-apple .wi-onb-dot.wi-on>i{background:var(--primary);width:7px;border-radius:999px}
.wi-app .wi-onb.wi-onb-apple .wi-onb-act,.wi-app .wi-onb.wi-onb-apple .wi-onb-eye,.wi-app .wi-onb.wi-onb-apple .wi-onb-new,.wi-app .wi-onb.wi-onb-apple .wi-onb-foot{display:none !important}
.wi-app .wi-onb-sheet-foot{display:flex;flex-direction:column;gap:10px;padding:14px 16px 0;align-items:stretch}
.wi-app .wi-onb-sheet-foot .wi-onb-cta{text-decoration:none;text-align:center}
.wi-app .wi-onb-sheet-done{align-self:center;margin-top:2px}
/* Extension preview sheet (card 3) */
.wi-onb-sheet{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;
  padding:16px;background:rgba(0,0,0,.28);animation:wiOnbSheetScrim .22s ease}
.wi-onb-sheet-card{width:100%;max-width:420px;background:var(--cardBg);border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.22);padding:0 0 16px;animation:wiOnbSheetRise .22s ease;color:var(--onSurface);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;overflow:visible}
.wi-onb-sheet-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:.5px solid var(--outlineVariant)}
.wi-onb-sheet-brand{flex:none;display:inline-flex;align-items:baseline;line-height:1;max-width:42%}
.wi-onb-sheet-brand .wi-wm,.wi-onb-sheet-brand .wi-wm span{
  font-size:13px;font-weight:800;letter-spacing:-.035em;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif}
.wi-onb-sheet-ht{flex:1;font-size:15px;font-weight:600;min-width:0}
.wi-onb-sheet-body{padding:14px 16px 0;overflow:visible}
.wi-onb-sheet-cap{font-size:13px;color:var(--onSurfaceVariant);margin:0 0 12px}
.wi-onb-sheet-prow{display:flex;gap:12px;align-items:center;overflow:visible;padding:4px 2px 8px}
.wi-onb-sheet-thumb{width:34px;height:42px;border-radius:5px;background:color-mix(in srgb, var(--onSurface) 20%, transparent);flex:none}
.wi-onb-sheet-title{font-size:13px;color:var(--onSurfaceVariant);line-height:1.25}
.wi-onb-sheet-price{font-size:17px;font-weight:600;letter-spacing:-.01em}
.wi-onb-sheet-usual{font-size:15px;font-weight:400;color:var(--onSurfaceVariant);margin-left:6px}
/* Sheet BUY — real verdict stamp: larger + tilted like feed/product stamps. */
.wi-onb-sheet .wi-onb-buybadge{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  background:var(--buy-deep,#0B7A44);color:#fff;
  font-size:17px;font-weight:800;letter-spacing:.04em;
  padding:10px 14px;border-radius:12px;
  transform:rotate(-8deg);transform-origin:center center;
  box-shadow:0 10px 28px -10px rgba(0,0,0,.45)}
.wi-onb-sheet .wi-onb-buybadge svg{width:16px;height:16px;flex:none;stroke:#fff;fill:none;
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.wi-onb-sheet-bar{margin-top:14px}
.wi-onb-sheet-track{height:6px;border-radius:999px;background:color-mix(in srgb, var(--onSurface) 14%, transparent);overflow:hidden}
.wi-onb-sheet-track>i{display:block;height:100%;width:27%;background:var(--buy-deep,#0B7A44);border-radius:999px}
.wi-onb-sheet-labs{display:flex;justify-content:space-between;font-size:13px;color:var(--onSurfaceVariant);padding-top:6px}
.wi-onb-sheet-foot{padding:14px 16px 0}
.wi-onb-sheet-foot .wi-onb-cta{min-height:50px}
@keyframes wiOnbSheetScrim{from{opacity:0}to{opacity:1}}
@keyframes wiOnbSheetRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .wi-onb-sheet,.wi-onb-sheet-card{animation:none!important}
}
.wi-app .wi-vchip{font-size:var(--fs-titleSm);font-weight:700;letter-spacing:.04em;padding:var(--sp-2) 12px;
  border-radius:14px;line-height:1.25;white-space:nowrap;color:#ffffff}
.wi-app .wi-vchip.wi-v-BUY{color:var(--onV)}
.wi-app .wi-vchip.wi-v-WAIT{color:#141018}
/* Paste sheet: one job on screen,everything else blurred behind it. */
.wi-pastewrap{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(20,16,24,.42);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wi-pastewrap{background:rgba(20,16,24,.82)}
}
.wi-pastestack{width:100%;max-width:420px;display:flex;flex-direction:column;gap:12px}
/* No panel. The blur carries the whole background and only the field is lit,so nothing competes with the one thing you are meant to look at. */
.wi-pastehead{display:flex;align-items:center;gap:8px}
.wi-pastetitle{flex:1;font-size:var(--fs-title);font-weight:500;text-align:center;color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.35)}
.wi-pasteback{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.16);color:#fff;border:0;cursor:pointer}
.wi-pasteback svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.wi-pastein{display:flex;align-items:center;gap:10px;background:#fff;border-radius:22px;
  padding:0 8px 0 var(--sp-4);min-height:44px;box-shadow:0 18px 44px -14px rgba(0,0,0,.5)}
.wi-pastein input{flex:1;min-width:0;background:none;border:0;outline:0;font:inherit;
  font-size:var(--fs-body);color:#141018;padding:0}
.wi-pastein input::placeholder{color:#6A6376}
.wi-pastein>svg{width:19px;height:19px;fill:none;stroke:#6A6376;stroke-width:2;
  stroke-linecap:round;flex:none}
/* Paste lives IN the field — it acts on the field,so it belongs to it. */
.wi-pasteinbtn{flex:none;min-height:44px;padding:0 var(--sp-4);border-radius:22px;border:0;cursor:pointer;
  font-family:inherit;font-size:var(--fs-bodySm);font-weight:600;
  background:var(--secondaryContainer,#CCFBF1);color:var(--onSecondaryContainer,#134E4A)}
.wi-pasteinbtn:active{transform:scale(.96)}
.wi-pastego{width:100%;min-height:56px;border-radius:28px;border:0;cursor:pointer;font-family:inherit;
  font-size:var(--fs-body);font-weight:500;background:#14B8A6;color:#042F2E;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.5)}
.wi-pastego[disabled]{opacity:.5}
.wi-pastehint{font-size:var(--fs-bodySm);color:rgba(255,255,255,.9);text-align:center;line-height:1.45;
  text-shadow:0 1px 10px rgba(0,0,0,.4)}
.wi-app .wi-fx{display:flex;flex-direction:column;gap:14px;flex:none}
.wi-app .wi-fx-eyebrow{font-size:var(--fs-labelSm);letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--onSurfaceVariant)}
.wi-app .wi-fx-hero{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.wi-app .wi-fx-pct{font-family:'RbM',monospace;font-size:clamp(2.5rem,3.25rem,4rem);font-weight:700;line-height:1;
  /* Was var(--vSKIP): a 52px number and twelve bars below it, all in the reserved
     SKIP colour, on a page about the market rather than about one product. */
  letter-spacing:-.04em;color:var(--onSurface)}
.wi-app .wi-fx-h{font-size:var(--fs-title);font-weight:400;line-height:1.25;margin:0;flex:1;min-width:180px}
.wi-app .wi-fx-p{font-size:var(--fs-bodySm);line-height:1.5;color:var(--onSurfaceVariant);margin:0}
.wi-app .wi-fx-p b{color:var(--onSurface);font-weight:500}
.wi-app .wi-fx-cats{display:flex;flex-direction:column;gap:11px}
.wi-app .wi-fx-cat-top{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-bodySm);
  margin-bottom:5px}
.wi-app .wi-fx-cat-pct{font-family:'RbM',monospace;font-variant-numeric:tabular-nums;
  color:var(--onSurfaceVariant)}
.wi-app .wi-fx-bar{height:7px;border-radius:4px;background:var(--outlineVariant);overflow:hidden}
.wi-app .wi-fx-bar i{display:block;height:100%;border-radius:4px;background:var(--onSurfaceVariant)}
.wi-app .wi-fx-foot{font-size:var(--fs-label);line-height:1.5;color:var(--onSurfaceVariant)}
.wi-app .wi-fx-foot a{color:var(--primary)}
.wi-app .wi-fx-actions{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.wi-app .wi-fx-share,.wi-app .wi-fx-verified{
  appearance:none;border:0;cursor:pointer;min-height:44px;padding:0 16px;border-radius:999px;
  font:600 14px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.wi-app .wi-fx-share{background:var(--primary);color:var(--onPrimary)}
.wi-app .wi-fx-verified{background:var(--surfaceContainerHighest);color:var(--onSurface)}
.wi-app .wi-fx-share:active,.wi-app .wi-fx-verified:active{transform:scale(.97)}
.wi-app .wi-ritual{
  display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:12px 14px;border-radius:16px;
  background:linear-gradient(135deg,#2A1214,#430002);color:#FCE8E6;box-shadow:var(--e2);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.wi-app .wi-ritual-pct{font-family:'RbM',ui-monospace,monospace;font-weight:700;font-size:1.65rem;line-height:1;letter-spacing:-.03em;flex:none}
.wi-app .wi-ritual-mid{flex:1;min-width:0}
.wi-app .wi-ritual-eye{font:700 10px/1 system-ui;letter-spacing:.1em;text-transform:uppercase;color:#FCA5A5;margin-bottom:4px}
.wi-app .wi-ritual-t{font:600 13.5px/1.3 system-ui;margin:0;text-wrap:pretty}
.wi-app .wi-ritual-go,.wi-app .wi-ritual-share{
  appearance:none;border:0;cursor:pointer;flex:none;min-height:40px;padding:0 12px;border-radius:999px;
  font:700 12.5px/1 system-ui;-webkit-tap-highlight-color:transparent}
.wi-app .wi-ritual-go{background:#FCE8E6;color:#430002}
.wi-app .wi-ritual-share{background:rgba(252,232,230,.16);color:#FCE8E6;margin-left:4px}
.wi-app .wi-brief-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wi-app .wi-brief-link{
  appearance:none;border:0;background:none;cursor:pointer;color:#5EEAD4;font:600 14px/1.2 system-ui;
  min-height:44px;padding:0 4px;text-decoration:underline;text-underline-offset:3px}
.wi-app .wi-catlead{font-size:var(--fs-bodySm);line-height:1.45;color:var(--onSurfaceVariant);padding:0 2px 2px}
.wi-app .wi-emptycat{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  padding:34px 24px;color:var(--onSurfaceVariant)}
.wi-app .wi-emptycat svg{width:30px;height:30px;opacity:.6;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wi-app .wi-emptycat .wi-ec1{font-size:var(--fs-body);color:var(--onSurface)}
.wi-app .wi-emptycat .wi-ec2{font-size:var(--fs-label);line-height:1.45}
/* Standalone twin of .vt — same metrics as the segmented pair so the row reads
   as one cluster,but outside .vtoggle because it isn't part of that either/or
   choice. Required,not optional: HIG says a shortcut gesture must not be the
   only way to do something,and M3 says pull-to-refresh needs an alternate
   path directly alongside the content. This is that path. */
.wi-app .wi-vt.wi-solo{background:var(--cardBg2);width:44px;height:44px;border-radius:11px;
  margin-left:-4px;box-shadow:var(--e1);transition:transform .1s,background .15s;padding:0}
.wi-app .wi-vt.wi-solo:active{transform:scale(.9);background:var(--surfaceContainerHighest)}
@keyframes wiSpin{to{transform:rotate(360deg)}}
.wi-app .wi-vt.wi-solo.wi-busy svg{animation:wiSpin .9s linear infinite}
.wi-app .wi-vtoggle{display:flex;gap:2px;background:var(--cardBg2);border-radius:11px;padding:var(--sp-1);flex:none;box-shadow:var(--e1)}
/* Hit 44×44; selected paint stays ~38×34 via padding + content-box. */
.wi-app .wi-vt{width:44px;height:44px;padding:5px 3px;border-radius:9px;display:grid;place-items:center;
  color:var(--onSurfaceVariant);background:none;border:0;cursor:pointer;position:relative;
  box-sizing:border-box;background-clip:content-box;-webkit-background-clip:content-box}
.wi-app .wi-vt.wi-on{background:var(--cardBg);color:var(--onSurface);box-shadow:none;border:0.5px solid var(--outlineVariant)}
.wi-app .wi-vt svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* Section-head tools (seller + Price sort icon + view toggle). */
/* ONE segmented group (owner 2026-08-31,mock option A). The bar used to be three separate
   containers — a seller pill,an icon button and a toggle — each with its own fill,radius and
   shadow,at three different visual weights. That is what read as clutter rather than a toolbar.
   Now they share a single track: one fill,one radius,and the ACTIVE item is the only thing that
   floats. margin-left:auto keeps the whole group right-aligned. */
.wi-app .wi-sechead-tools{display:inline-flex;align-items:center;gap:4px;flex:none;margin-left:auto;
  background:var(--cardBg2);border-radius:13px;padding:4px;box-shadow:var(--e1);max-width:100%}
/* Items inside the track: flat until selected. 44px tall for the hit area,with the paint inset to
   ~36px via padding + background-clip:content-box — the same trick .wi-vt already used,so the
   control looks light without shrinking the real tap target below 44pt. */
.wi-app .wi-sechead-tools .wi-sfbtn,.wi-app .wi-sechead-tools .wi-vt{min-height:44px;height:44px;padding:4px 12px;border-radius:14px;
  background:transparent;box-shadow:none;border:0;color:var(--onSurfaceVariant);
  background-clip:content-box;-webkit-background-clip:content-box}
/* Two DIFFERENT kinds of "active",deliberately not painted the same (owner 2026-08-31 — the bar
   was grey on grey and read as dead chrome).
   A FILTER being on is a state the reader chose and can forget about — "you are only seeing
   Amazon","you have re-sorted this". That deserves to shout,so it takes the brand teal,matching
   the page pills.
   A VIEW is a mode: one of grid/list is ALWAYS on,so painting it teal would put a permanent teal
   blob in the bar and teal would stop meaning "something is applied". It keeps the floating white
   pill and takes teal only in the ICON,which reads as current without competing.
   Mint/amber/red/blue stay out of here entirely — those are the verdict palette (§1) and chrome
   that borrows them can end up disagreeing with a stamp. */
.wi-app .wi-sechead-tools .wi-sfbtn.on{background:var(--primaryFill);color:#fff;
  box-shadow:0 1px 3px rgba(13,130,121,.30);border:0}
.wi-app .wi-sechead-tools .wi-sfbtn.on svg{color:#fff}
.wi-app .wi-sechead-tools .wi-vt.wi-on{background:var(--cardBg);color:var(--primary);
  box-shadow:0 1px 3px rgba(0,0,0,.10);border:0}
.wi-app .wi-sechead-tools .wi-sfbtn.wi-sficon{width:44px;padding:4px 3px}
/* The toggle is no longer its own container — it is two more items on the shared track. */
.wi-app .wi-sechead-tools .wi-vtoggle{background:transparent;box-shadow:none;padding:0;gap:2px;
  border-radius:0}
.wi-app .wi-sechead-tools .wi-vt{width:44px}
/* Hairline between "what is shown" (seller,sort) and "how it is shown" (grid/list) — they are
   different kinds of choice and the separator is what stops the row reading as five equal buttons. */
.wi-app .wi-sechead-tools .wi-vtoggle::before{content:"";width:1px;height:20px;flex:none;
  align-self:center;margin:0 4px 0 2px;background:rgba(0,0,0,.10)}
.wi-app[data-theme="dark"] .wi-sechead-tools .wi-vtoggle::before{background:rgba(255,255,255,.14)}
/* Active-sort count,so state is legible without opening the menu. */
.wi-app .wi-sfbtn .wi-sfdot{position:absolute;top:5px;right:5px;min-width:8px;height:8px;
  border-radius:999px;background:var(--primary)}
.wi-app .wi-sfbtn.wi-sficon{width:44px;padding:0;justify-content:center;gap:0}
.wi-app .wi-sfbtn.wi-sficon span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* All Deals seller filter (app). Tokens only — a hardcoded colour here would read correctly in
   one theme and vanish in the other,which is the exact failure mode check:contrast catches. */
.wi-app .wi-sfilter{position:relative;flex:none}
/* Title + tools wrap on narrow phones so the title never collapses to nothing. */
.wi-app .wi-sechead-f{flex-wrap:wrap;row-gap:8px}
@media (max-width:520px){
  .wi-app .wi-sechead-f .wi-sect{flex:1 1 100%}
  .wi-app .wi-sechead-f .wi-sechead-tools{margin-left:auto}
}
.wi-app .wi-sfbtn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 13px;
  border-radius:11px;border:0;cursor:pointer;background:var(--cardBg2);color:var(--onSurfaceVariant);
  font:600 var(--fs-labelLg,13px)/1 inherit;box-shadow:var(--e1);white-space:nowrap;position:relative}
.wi-app .wi-sfbtn svg{width:16px;height:16px;flex:none}
.wi-app .wi-sfbtn.on{background:var(--cardBg);color:var(--onSurface);border:0.5px solid var(--outlineVariant)}
.wi-app .wi-sfmenu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:196px;
  background:var(--cardBg);border:0.5px solid var(--outlineVariant);border-radius:14px;
  padding:6px;display:grid;gap:2px;box-shadow:var(--e1)}
.wi-app .wi-sfopt{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  min-height:42px;padding:0 11px;border:0;border-radius:10px;cursor:pointer;background:none;
  color:var(--onSurface);font:600 var(--fs-body,14px)/1.2 inherit;text-align:left}
.wi-app .wi-sfopt.on{background:var(--cardBg2)}
.wi-app .wi-sfn{color:var(--onSurfaceVariant);font-variant-numeric:tabular-nums;font-weight:500}
/* Visually hidden,still read aloud and still in the heading outline. Not display:none and
   not visibility:hidden — both remove it from the accessibility tree,which defeats the point. */
/* The extend-the-window sentinel. Zero height so it never adds rhythm; it exists to be seen
   by an observer,not by a person. */
.wi-app .wi-more{height:1px;margin:0;padding:0}
.wi-app .wi-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.wi-app .wi-sechead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;
  /* Was 10px 0 -2px. The negative bottom margin was pulling the chips up under the title to
     compensate for the .wi-res gap; with the legend gone the block just needs real space above
     it and none stolen below. 4/8/16 like everything else. */
  margin:var(--sp-4,16px) 0 var(--sp-1,4px)}
.wi-app .wi-sect{font-size:var(--fs-title);font-weight:600;letter-spacing:-.022em;color:var(--onSurface);
  flex:1;min-width:0;margin:0;text-wrap:pretty}
/* HIG-style text action (replaces the old grid/list icon cluster beside the title). */
.wi-app .wi-seelink{appearance:none;-webkit-appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:var(--fs-body);font-weight:500;color:var(--appleInk);padding:var(--sp-2) var(--sp-3);
  flex:none;border-radius:10px;min-height:44px;display:inline-flex;align-items:center}
.wi-app .wi-seelink:active{background:var(--surfaceContainerHigh)}
/* 82px reserves the tab bar's height,since it floats OVER the feed rather
   than sitting beside it — without this the last card ends up underneath.
   --wi-safe-bottom (env or Android --wi-inset-bottom) clears the system nav. */
.wi-app .wi-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  /* NO padding-top — that pad sits outside the sticky .wi-ptabs box and lets All Deals
     cards scroll through BETWEEN the search header and the stuck tabs (owner TARGET /
     product invariants WiApp Today tabs; regression after #172 restored 16px all-sides pad).
     Top spacing lives on banners / .wi-ptabs instead. Written as a 0 in the shorthand,
     not `16px` re-zeroed by a following padding-top — the pair computed the same but
     read as though the top pad were intended, and only existed to satisfy a stale test.
     gap:0 (not 14px) — a flex gap under sticky tabs is an empty paint hole; studio
     plates with mix-blend/transform draw through box-shadow covers. Spacing is on
     children (.wi-onb / .wi-ask / .wi-ptabs+.wi-sechead) instead. */
  padding:0 var(--sp-4,12px) calc(74px + var(--wi-safe-bottom,0px));display:flex;flex-direction:column;gap:0;
  overscroll-behavior-y:contain;scroll-padding-top:12px;
  /* pan-y alone blocked vertical scrolls that began on pan-x children (banner rail).
     Banner track is no longer a nested x-scroller; pan-x pan-y still fine here. */
  touch-action:pan-x pan-y;
  /* Do NOT transform/translateZ the scrollport — it creates a stacking context that
     lets mix-blend studio plates paint through sticky .wi-ptabs (peek under search). */
  /* Idle: hide like iOS overlay indicators. .wi-scrolling reveals while the finger moves. */
  scrollbar-width:thin;scrollbar-color:transparent transparent}
.wi-app .wi-body.wi-scrolling{scrollbar-color:color-mix(in srgb, var(--onSurface) 38%, transparent) transparent}
/* Flex children default to min-width:auto,so the horizontally-scrolling chips
   row widened the column instead of scrolling inside it — 27px of sideways
   scroll on a 382px screen. Every direct child is clamped instead. */
.wi-app .wi-body>*{min-width:0;max-width:100%}
.wi-app .wi-body::-webkit-scrollbar{width:0;background:transparent}
.wi-app .wi-body::-webkit-scrollbar-track{background:transparent}
.wi-app .wi-body::-webkit-scrollbar-thumb{background:transparent;border-radius:999px}
.wi-app .wi-body.wi-scrolling::-webkit-scrollbar-thumb{
  background:transparent}
@media (hover:hover) and (pointer:fine){
  .wi-app .wi-body::-webkit-scrollbar{width:3px}
  .wi-app .wi-body.wi-scrolling::-webkit-scrollbar-thumb{
    background:rgba(29,29,31,.28)
  }
}
/* Hide desktop scrollbar gutters on phone / WiApp shell (re-audit P2). */
html.wi-preview,html.cap-native,html.wi-preview body,html.cap-native body,
html.wi-preview #root,html.cap-native #root{
  scrollbar-width:none;-ms-overflow-style:none
}
html.wi-preview::-webkit-scrollbar,html.cap-native::-webkit-scrollbar,
html.wi-preview body::-webkit-scrollbar,html.cap-native body::-webkit-scrollbar,
html.wi-preview #root::-webkit-scrollbar,html.cap-native #root::-webkit-scrollbar{
  display:none;width:0;height:0
}
.wi-app,.wi-app *{scrollbar-width:thin}
.wi-app .wi-body{scrollbar-width:none;-ms-overflow-style:none}
@media (prefers-reduced-motion:reduce){
  .wi-app .wi-body{scrollbar-color:color-mix(in srgb, var(--onSurface) 28%, transparent) transparent}
  .wi-app .wi-body::-webkit-scrollbar-thumb{
    background:color-mix(in srgb, var(--onSurface) 28%, transparent)}
}
.wi-app .wi-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
/* One card per row — the Verified shelf (owner 2026-08-31). Same card as All Deals,full width,so
   the plate is the hero rather than a thumbnail. Shares .wi-grid2's min-width:0 rule below via the
   sibling selector,so a long title still cannot widen the track. */
.wi-app .wi-grid1{display:grid;grid-template-columns:1fr;gap:10px;align-items:stretch}
.wi-app .wi-grid1>*{min-width:0}
/* At full width a 5/4 plate is ~300px tall and pushes the floor off-screen,so the one-up plate is
   wider than it is tall. 16/10 keeps two cards reachable on a phone without shrinking the product. */
.wi-app .wi-grid1 .wi-gcard.wi-studio .wi-gplate{aspect-ratio:16/10}
.wi-app .wi-grid1 .wi-gcard.wi-studio .wi-gplate img{max-height:78%;max-width:62%}
/* The stamp sits on the plate,same geometry as the list row's thumb stamp (rotate -4deg,bottom
   left) so the two views read as the same object seen twice. */
.wi-app .wi-gcard.wi-gstamped .wi-gplate{overflow:hidden}
.wi-app .wi-gcard.wi-gstamped .wi-gplate .wi-vbig{position:absolute;left:10px;bottom:10px;
  z-index:4;transform:rotate(-4deg);transform-origin:left bottom;
  box-shadow:0 10px 28px -10px rgba(0,0,0,.45)}
/* The page tabs already name these two shelves,so the head carries tools only — drop the leading
   gap the removed <h2> used to occupy. */
/* No <h2> on Verified / All Deals (the page tabs name them),so the head carries tools only.
   It must NOT cancel .wi-sechead-tools' margin-left:auto — that override pulled the whole toolbar
   to the left edge,which is what made it look like stray chrome instead of a toolbar. */
.wi-app .wi-sechead-notitle{margin-top:2px;min-height:0}
/* Grid items default to min-width:auto,so a long product title makes the
   track wider than its column and the row overflows the phone. */
.wi-app .wi-grid2>*{min-width:0}
/* All Deals 2-up grid card — light Apple target (owner 2026-08-28).
   Colours via tokens (parity with WIAPP / :root) — no new brand hex literals.
   All Deals + Biggest markdowns + Deepest: studio plates (pastel wall + white floor) — see .wi-studio. */
.wi-app .wi-gcard{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0;
  background:var(--cardBg);border:0;border-radius:12px;overflow:hidden;cursor:pointer;text-align:left;
  font-family:inherit;color:inherit;width:100%;
  box-shadow:0 3px 12px rgba(29,29,31,.06),0 1px 2px rgba(29,29,31,.04);
  -webkit-tap-highlight-color:transparent;transition:transform .12s,box-shadow .15s}
.wi-app .wi-gcard:active{transform:scale(.985)}
.wi-app .wi-gplate{position:relative;height:108px;display:grid;place-items:center;
  background:var(--cardBg);overflow:hidden}
.wi-app .wi-gplate img{max-width:82%;max-height:92px;object-fit:contain;display:block}
.wi-app .wi-gplate .wi-vbig.wi-lsm{position:absolute;left:6px;bottom:6px;z-index:2}
.wi-app .wi-gbody{display:flex;flex-direction:column;gap:3px;padding:10px 12px 14px;min-width:0}
.wi-app .wi-gname{font-size:13.5px;font-weight:700;letter-spacing:-.02em;line-height:1.28;color:var(--onSurface);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  max-height:calc(1.28em * 2);overflow-wrap:anywhere}
.wi-app .wi-gstore{font-size:12px;font-weight:500;color:var(--onSurfaceVariant);line-height:1.3}
.wi-app .wi-gpriceline{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:2px}
.wi-app .wi-gnow{font-variant-numeric:tabular-nums;font-size:14px;font-weight:800;letter-spacing:-.024em;color:var(--onSurface)}
.wi-app .wi-goff{font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;color:var(--primary);letter-spacing:-.01em}
.wi-app .wi-gusual{font-variant-numeric:tabular-nums;font-size:12px;font-weight:500;color:var(--onSurfaceVariant);line-height:1.3}
.wi-app .wi-gusual s{text-decoration:line-through;text-decoration-thickness:1px}
/* Studio plates — WiApp All Deals + Biggest markdowns + Deepest (owner 2026-08-30). Mini photo studio:
   pastel WALL (~55%) + white FLOOR (~45%),product on the split,ASIN-stable wall hue.
   Amazon JPEGs are white-backed: mix-blend multiply lets the wall show around the product.
   Never a BUY/WAIT/SKIP/FAIR stamp. Verified keeps stamped list cards. */
.wi-app .wi-gcard.wi-studio{border:1px solid rgba(29,29,31,.10);box-shadow:none;
  background:#fff;border-radius:12px}
.wi-app .wi-gcard.wi-studio:active{box-shadow:none}
/* Wall is ~55% of the card: aspect plate + white floor body. Image sits on the split. */
/* Soft gradient of the SAME wall hue — no new colours,just the ones already owned working harder.
   A flat fill behind a cut-out product reads as a swatch; a gradient reads as light in a room,which
   is the whole point of calling these "studio plates". color-mix keeps it derived from the wall,so
   changing WI_STUDIO_WALLS still changes this. */
.wi-app .wi-gcard.wi-studio .wi-gplate{height:auto;aspect-ratio:5/4;display:flex;align-items:flex-end;
  background-image:linear-gradient(158deg,
    color-mix(in srgb, var(--studio-wall,#DCEDE3) 100%, #fff 0%) 0%,
    color-mix(in srgb, var(--studio-wall,#DCEDE3) 55%, #fff 45%) 100%);
  justify-content:center;background:var(--studio-wall,#DCEDE3);overflow:hidden;position:relative}
.wi-app .wi-gcard.wi-studio .wi-gplate img{position:relative;z-index:1;max-width:78%;max-height:86%;
  width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply;display:block;margin:0 auto 0;
  padding-bottom:2px}
.wi-app .wi-gcard.wi-studio .wi-gplate .wi-plateph{position:relative;z-index:1;margin-bottom:12%;
  font-size:36px;opacity:.4}
.wi-app .wi-gcard.wi-studio .wi-gbody{flex:1;background:#fff;padding:8px 10px 10px;gap:3px;
  min-height:96px;display:flex;flex-direction:column;justify-content:flex-start}
/* Unchecked All Deals / markdowns / deepest: uniform plate height,reserved type rows.
   Verified (.wi-gstamped) keeps the 16/10 one-up plate. Density pass ~25% shorter plates. */
.wi-app .wi-gcard.wi-studio:not(.wi-gstamped){height:100%}
.wi-app .wi-gcard.wi-studio:not(.wi-gstamped) .wi-gplate{flex:0 0 132px;height:132px;aspect-ratio:auto;
  align-items:center;padding:10px}
.wi-app .wi-gcard.wi-studio:not(.wi-gstamped) .wi-gplate img{max-width:100%;max-height:100%;
  padding-bottom:0;object-position:center}
.wi-app .wi-gcard.wi-studio:not(.wi-gstamped) .wi-gplate .wi-plateph{margin-bottom:0}
.wi-app .wi-gcard.wi-studio:not(.wi-gstamped) .wi-gbody{min-height:0}
.wi-app .wi-gcard.wi-studio:not(.wi-gstamped) .wi-gstore{height:1.3em;flex:0 0 1.3em}
.wi-app .wi-gcard.wi-studio:not(.wi-gstamped) .wi-gname{height:calc(1.25em * 2);max-height:calc(1.25em * 2)}
.wi-app .wi-gcard.wi-studio:not(.wi-gstamped) .wi-gfloor{min-height:2.7em;flex:0 0 2.7em}
@media(max-width:640px){
  .wi-app .wi-gcard.wi-studio:not(.wi-gstamped) .wi-gplate{flex-basis:112px;height:112px;padding:8px}
}
/* Seller first (above title),then name,then NOW / Was — discount is the top-left chip. */
.wi-app .wi-gcard.wi-studio .wi-gstore{font-size:11px;font-weight:600;letter-spacing:.01em;
  color:#6E6E73;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-app .wi-gcard.wi-studio .wi-gname{font-size:13px;font-weight:700;letter-spacing:-.02em;
  line-height:1.25;-webkit-line-clamp:2;max-height:calc(1.25em * 2);color:#1D1D1F}
.wi-app .wi-gcard.wi-studio .wi-gfloor{display:flex;flex-direction:column;align-items:stretch;
  gap:2px;margin-top:6px;min-width:0}
.wi-app .wi-gcard.wi-studio .wi-gpriceline{margin:0;gap:8px;flex:none;min-width:0;flex-wrap:nowrap;
  overflow:visible;align-items:baseline;justify-content:flex-start;width:100%}
.wi-app .wi-gcard.wi-studio .wi-gnow{font-size:15px;font-weight:800;letter-spacing:-.02em;color:#1D1D1F;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.wi-app .wi-gcard.wi-studio .wi-studio-off{position:absolute;top:6px;left:6px;z-index:3;
  display:inline-flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:-.01em;
  padding:4px 8px;border-radius:999px;line-height:1.2;font-variant-numeric:tabular-nums;
  /* The discount is the most useful number on the card and it was white-on-white with a hairline —
     invisible against the plate. --accent is non-verdict emphasis, measured 6.29:1 on white type,
     and deliberately far from mint/amber/red so it can never be read as a stamp (§1). */
  background:var(--accent);color:var(--onAccent);border:0;
  box-shadow:0 2px 8px -2px rgba(79,70,229,.45);pointer-events:none}
.wi-app .wi-gcard.wi-studio .wi-gwas{font-size:12px;font-weight:500;color:#6E6E73;line-height:1.3;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.wi-app .wi-gcard.wi-studio .wi-gwas s{text-decoration:line-through;text-decoration-thickness:1px}
.wi-app .wi-gcard.wi-studio .wi-gwas-slot{visibility:hidden}
/* Clip & Save's mobile shelf styles live with the other .cpn-* rules in the site region,
   not here: they restyle SITE classes on a SITE component, and they must not depend on
   .wi-app, which the Today screen does not provide. See "Clip & Save mobile" above. */

/* List-row thumbs on All Deals: same pastel wall + multiply (Verified thumbs untouched). */
.wi-app .wi-lrow.wi-studio .wi-lthumb{position:relative;background:linear-gradient(to bottom,var(--studio-wall,#DCEDE3) 55%,#fff 55%);
  border:1px solid rgba(29,29,31,.08)}
.wi-app .wi-lrow.wi-studio .wi-lthumb img{mix-blend-mode:multiply}
/* VERIFIED list row = the mock: a full-height plate panel on the left rather than a 72px chip,so
   the lavender reads as the same surface the grid card uses. Scoped to .wi-vrow (stamped shelves)
   so the All Deals compact row is untouched. */
.wi-app .wi-lrow.wi-studio.wi-vrow{align-items:stretch;padding:0;overflow:hidden;gap:0}
.wi-app .wi-lrow.wi-studio.wi-vrow .wi-lthumb{width:34%;max-width:120px;min-width:88px;height:auto;
  align-self:stretch;border-radius:0;background:var(--studio-wall,#E4DFF0);
  background-image:linear-gradient(158deg,
    color-mix(in srgb, var(--studio-wall,#E4DFF0) 100%, #fff 0%) 0%,
    color-mix(in srgb, var(--studio-wall,#E4DFF0) 58%, #fff 42%) 100%);
  display:grid;place-items:center;padding:8px}
.wi-app .wi-lrow.wi-studio.wi-vrow .wi-lthumb img{max-width:82%;max-height:68px;mix-blend-mode:multiply}
/* Stamp sits on the panel,bottom-left,same -4deg as the grid plate and the product page. */
.wi-app .wi-lrow.wi-studio.wi-vrow .wi-lthumb .wi-vbig{position:absolute;left:6px;bottom:6px;
  transform:rotate(-4deg);transform-origin:left bottom;z-index:3;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.40)}
/* The % chip moves to the meta line on Verified (the mock reads "Amazon · 45% off"),so it must
   not also sit on the panel. */
.wi-app .wi-lrow.wi-studio.wi-vrow .wi-lthumb .wi-studio-off{display:none}
.wi-app .wi-lrow.wi-studio.wi-vrow .wi-lmid{padding:10px 12px 11px;min-width:0;flex:1}
.wi-app .wi-lrow.wi-studio.wi-vrow .wi-lrare{margin-top:5px;font-size:12px;color:var(--onSurfaceVariant,#636368)}
/* As-of on the Verified card (owner 2026-09-07). Quieter than the rarity line above it — it is a
   timestamp, not the claim — but on the palette's own secondary ink (#6E6E73, 5.07:1), NEVER the
   lighter #86868B that failed AA on an 11px label in the All Deals light lock. It must not wear a
   verdict colour: nothing has gone wrong, we are only saying when we looked. */
.wi-app .wi-lrow.wi-studio.wi-vrow .wi-lchecked{margin-top:2px;font-size:11px;
  color:var(--onSurfaceVariant,#636368);opacity:.85}
.wi-app .wi-gcard .wi-gchecked{display:block;margin-top:4px;font-size:12px;
  color:var(--onSurfaceVariant,#636368);opacity:.85}
.wi-app .wi-lrow.wi-studio .wi-studio-off{position:absolute;top:5px;left:5px;z-index:2;
  display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:-.01em;
  padding:3px 7px;border-radius:999px;line-height:1.15;font-variant-numeric:tabular-nums;
  background:var(--accent);color:var(--onAccent);border:0;
  box-shadow:0 2px 6px -2px rgba(79,70,229,.45);pointer-events:none}
.wi-app .wi-body > .wi-grid2.wi-gdeal,.wi-app .wi-body .wi-grid2.wi-gdeal,/* .wi-grid1 was added without being listed here,so the one-up Verified grid inherited NO
   horizontal padding and its cards ran past both edges of the phone. Add any future grid
   variant to this selector too. */
.wi-app .wi-body > .wi-grid1.wi-gdeal,.wi-app .wi-body .wi-grid1.wi-gdeal{padding:0 4px 8px;box-sizing:border-box}
.wi-app .wi-nm,.wi-app .wi-lname{overflow-wrap:anywhere}
.wi-app .wi-tile{flex:1;min-width:0;border-radius:18px;padding:16px var(--sp-3);display:flex;flex-direction:column;
  gap:9px;transition:transform .12s;text-align:left;border:0;cursor:pointer;font-family:inherit}
.wi-app .wi-tile:active{transform:scale(.97)}
.wi-app .wi-tile .wi-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center}
.wi-app .wi-tile .wi-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.wi-app .wi-tile b{font-size:var(--fs-body);font-weight:500;letter-spacing:-.01em}
/* Scoped to .wi-sub,not every span — an unscoped rule also caught the .wi-ic chip
   and quietly washed every icon to 80%. */
.wi-app .wi-tile .wi-sub{font-size:var(--fs-label);line-height:1.35;opacity:.8;color:inherit}
.wi-app .wi-tile.wi-t-paste .wi-sub{opacity:.85}
/* Paste leads,Scan follows — but the hierarchy is now carried by SURFACE HEIGHT and by
   which icon is filled,not by flooding the two largest objects above the fold with brand
   colour. Regrounding the neutrals removed the tint UNDER everything; these two tiles were
   the reason the screen still read purple afterwards. --primary now appears at 44px on the
   leading icon instead of 170x110px behind the copy: the brand lands on a control,which is
   where it belongs,and the product photography below is no longer competing with it. */
/* Both tiles are the same KIND of surface now — filled,elevated,borderless — and differ by
   one tone step plus which icon is brand-filled. Last night one was filled-with-shadow and the
   other outlined-with-no-shadow,which reads as two unrelated components rather than a lead and
   a follower. That was mine,from demoting them off --primary. */
.wi-app .wi-tile.wi-t-paste{background:var(--surfaceContainerHighest);color:var(--onSurface);
  box-shadow:var(--e1)}
.wi-app .wi-tile.wi-t-paste .wi-ic{background:var(--primary);color:var(--onPrimary)}
.wi-app .wi-tile.wi-t-scan{background:var(--surfaceContainerHigh);color:var(--onSurface);
  box-shadow:var(--e1);border:0}
/* Neutral,NOT --primaryContainer. The two brand tokens invert between themes: in light
   --primary is the saturated violet and --primaryContainer the pale one; in dark --primary
   is #D2BBFF (pale) and --primaryContainer is #4C3889 (deep). Giving the SECOND tile a
   container-filled icon therefore handed it the most saturated object on the screen in dark
   mode — the exact opposite of the hierarchy,flipping by theme. One violet object leads,in both themes; the follower is neutral. */
.wi-app .wi-tile.wi-t-scan .wi-ic{background:var(--surfaceContainerHighest);color:var(--onSurfaceVariant)}
/* Translucent tab bar — the one surface Apple sanctions for the treatment
   (HIG Materials: tab bars and navigation). For "content peeking through" to
   mean anything the bar must float ABOVE the feed,so it is positioned out of
   the flex flow and .wi-body reserves the height instead. A WebView can only
   approximate it: backdrop-filter is a frosted pane,not Apple's refracting
   material. */
.wi-app .wi-nav{position:absolute;left:0;right:0;bottom:0;z-index:20;display:flex;
  /* Same bone as the header band — one chrome colour top and bottom. */
  background:var(--wi-band,#f2f2f0);
  box-shadow:0 -1px 0 rgba(0,0,0,.08);
  padding:var(--sp-2) 4px calc(var(--sp-3) + var(--wi-safe-bottom,0px))}
.wi-app[data-theme="dark"] .wi-nav{background:var(--wi-band,#f2f2f0);box-shadow:0 -1px 0 rgba(0,0,0,.08)}
@media (prefers-color-scheme: dark){
  .wi-app[data-theme="system"] .wi-nav{background:var(--wi-band,#f2f2f0);box-shadow:0 -1px 0 rgba(0,0,0,.08)}
}
.wi-app .wi-nv{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:var(--fs-labelSm);font-weight:500;color:var(--navInactive,#86868B);min-height:48px;
  justify-content:center;transition:color .15s;background:none;border:0;cursor:pointer;font-family:inherit}
.wi-app .wi-nvlab{max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.wi-app .wi-nv .wi-pl{padding:3px 16px;border-radius:12px;display:grid;place-items:center;transition:background .2s;
  background:transparent}
.wi-app .wi-nv svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.wi-app .wi-nv.wi-on{color:#1D1D1F}
.wi-app .wi-nv.wi-on .wi-pl{background:transparent}
/* no blue wash */
.wi-app .wi-nv:active .wi-pl{transform:scale(.92)}
/* Search field: brighter well #F0F0F4,no blue glow border (owner 2026-08-28; lift 2026-09-28). */
.wi-app.wi-shell{
  --wi-glass:none;
  --wi-glass-fill:#F0F0F4;
  --wi-glass-stroke:transparent;
  --wi-glass-spec:none}
.wi-app.wi-shell[data-theme="dark"]{
  --wi-glass-fill:#F0F0F4;
  --wi-glass-stroke:transparent;
  --wi-glass-spec:none}
@media (prefers-color-scheme: dark){
  .wi-app.wi-shell[data-theme="system"]{
    --wi-glass-fill:#F0F0F4;
    --wi-glass-stroke:transparent;
    --wi-glass-spec:none}
}
.wi-app.wi-shell .wi-head .wi-hb{
  min-height:48px;
  background:#F0F0F4;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:0;
  box-shadow:none}
.wi-app.wi-shell .wi-head .wi-hb:focus-within{
  border:0;
  box-shadow:0 0 0 3px color-mix(in srgb, #1D1D1F 12%, transparent)}
.wi-app.wi-shell[data-theme="dark"] .wi-head .wi-hb,.wi-app.wi-shell[data-theme="dark"] .wi-head .wi-hb:active{
  background:#F0F0F4}
@media (prefers-color-scheme: dark){
  .wi-app.wi-shell[data-theme="system"] .wi-head .wi-hb,
  .wi-app.wi-shell[data-theme="system"] .wi-head .wi-hb:active{background:#F0F0F4}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wi-app.wi-shell .wi-head .wi-hb{background:#F0F0F4}
  .wi-app.wi-shell[data-theme="dark"] .wi-head .wi-hb{background:#F0F0F4}
}
@media (prefers-reduced-transparency:reduce){
  .wi-app.wi-shell .wi-head .wi-hb{
    -webkit-backdrop-filter:none;backdrop-filter:none;background:#F0F0F4}
  .wi-app.wi-shell[data-theme="dark"] .wi-head .wi-hb{background:#F0F0F4}
}
.wi-app .wi-empty{padding:40px 20px;text-align:center;color:var(--onSurfaceVariant);font-size:var(--fs-bodySm)}
.wi-app .wi-empty b{display:block;color:var(--onSurface);font-size:var(--fs-titleSm);font-weight:500;margin-bottom:6px}
/* The verdict close. Quiet by construction — it follows the answer and must not compete
   with it,so no card,no fill,just a rule and two weights of type. */
.wi-app .wi-method{margin-top:18px;padding-top:var(--sp-3);border-top:1px solid var(--outlineVariant)}
.wi-app .wi-method b{display:block;font-size:var(--fs-bodySm);font-weight:600;color:var(--onSurface);
  margin-bottom:4px}
.wi-app .wi-method span{display:block;font-size:var(--fs-label);line-height:1.5;color:var(--onSurfaceVariant)}
/* Native verdict page — priority stack: hero → chart → buyers → compare → share/method. */
.wi-app.wi-shell .wi-webv-grid{display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.wi-app.wi-shell .wi-webv-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.wi-app.wi-shell .wi-webv-grid .wi-ban{margin-top:0}
.wi-app.wi-shell .wi-card.wi-vpage .wi-vverdict{
  border-top:1px solid color-mix(in srgb, var(--onSurface) 10%, transparent);background:var(--cardBg)}
.wi-app.wi-shell .wi-card.wi-vpage .wi-vverdict .wi-ban-verdict{
  margin:0;border-radius:0;box-shadow:none;background:transparent}
.wi-app.wi-shell .wi-card.wi-vpage .wi-vverdict .wi-ban-copy{padding:14px 18px 16px}
.wi-app.wi-shell .wi-card.wi-vpage .wi-vfootmeta{
  display:flex;flex-direction:column;gap:6px;margin-top:2px;padding-top:10px;
  border-top:1px solid color-mix(in srgb, var(--onSurface) 10%, transparent)}
.wi-app.wi-shell .wi-card.wi-vpage .wi-vfootmeta .wi-seller{margin:0;font-size:var(--fs-label)}
.wi-app.wi-shell .wi-card.wi-vpage .wi-vpricepills{margin:10px 0 6px;padding:0;width:100%}
.wi-app.wi-shell .wi-card.wi-vpage .wi-vpricepills .wi-ban-pill{
  background:color-mix(in srgb, var(--apple) 11%, var(--cardBg));
  box-shadow:0 4px 14px color-mix(in srgb, var(--onSurface) 8%, transparent)}
.wi-app.wi-shell .wi-card.wi-vpage .wi-cardfoot .wi-buygo{
  flex:1;min-width:0;background:var(--appleFill, var(--apple));color:var(--onApple)}
.wi-app.wi-shell .wi-card.wi-vpage .wi-cardfoot .wi-buy-nudge{
  animation:wiHonestPulse 1.8s ease-in-out infinite;box-shadow:0 0 0 0 rgba(36,139,240,.45)}
@media (prefers-reduced-motion:reduce){
  .wi-app.wi-shell .wi-card.wi-vpage .wi-cardfoot .wi-buy-nudge{animation:none;box-shadow:none}
}
.wi-app.wi-shell .wi-vacts{margin-top:2px}
.wi-app.wi-shell .wi-method{margin-top:10px;padding-top:14px}
/* ── Product summary: about / specs / variations ──────────────────────────────
   The bullets and the physical facts ride in on the SAME paid price-research response as the price
   history,so they cost nothing extra and they appear at the same moment the verdict does.
   Before that they are one locked line rather than five empty headings: five "not yet" boxes
   would be five apologies for one missing fetch. */
/* ── Product take — the PRODUCT stamp,beside the price stamp ──────────────────────────────
   A second,independent opinion,ALLOWED to disagree with the price verdict,so it keeps its own
   vocabulary (KEEP / PASS / MAYBE) and none of the verdict palette: mint,amber and the SKIP
   colour stay reserved for BUY/WAIT/SKIP/FAIR (§1).

   Row form to the owner's reference (2026-09-06): plain heading,hairline-separated rows,each
   row an icon + a bold label + the value. The one amber thing here is the 20px "watch out"
   triangle — a conventional warning affordance at icon size,never a stamp,a pill or type,so it
   cannot be read as a WAIT verdict. It deliberately does NOT use `--wait`.

   This layout only works if the VALUES ARE SHORT,which is why aitake.mjs caps them at 70 chars
   and asks for fragments. A long value wraps to three lines and reinstates the cramped rendering
   this replaced — the cap is part of the layout,not a tidiness rule. */
/* Quiet,not alarming. Nothing failed — we simply cannot see enough about this listing,and the
   price check above it still stands. Amber would read as a WAIT verdict (§1); this stays in ink on
   the card surface with a hairline,the same weight as any other honest note on the screen. */
.wi-app .wi-gap{margin:14px 0 0;background:var(--cardBg);border:1px solid var(--outlineVariant);
  border-radius:16px;padding:14px 16px}
.wi-app .wi-gap-h{font-size:14.5px;font-weight:700;color:var(--onSurface);margin:0 0 5px}
.wi-app .wi-gap-b{font-size:13.5px;line-height:1.5;color:var(--onSurfaceVariant);margin:0}
.wi-app .wi-gap-k{font-size:13.5px;line-height:1.5;color:var(--onSurface);margin:7px 0 0;
  font-weight:600}
.wi-app .wi-ait{margin:14px 0 0;background:var(--cardBg);border:1px solid var(--outlineVariant);
  border-radius:16px;padding:16px 16px 4px}
.wi-app .wi-ait-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:13px}
.wi-app .wi-ait-h{font-size:19px;font-weight:800;letter-spacing:-.015em;line-height:1.2;
  color:var(--onSurface);margin:0}
/* Rubber stamp: rotated,double-ruled — the headline finding,kept out of the row rhythm. */
.wi-app .wi-ait-stamp{flex:none;transform:rotate(-3deg);border:2.5px solid currentColor;
  border-radius:9px;padding:3px 10px;font-size:13.5px;font-weight:800;letter-spacing:.09em;
  line-height:1.2;text-transform:uppercase;box-shadow:inset 0 0 0 1.5px currentColor;
  background:transparent;display:inline-flex;align-items:center;gap:6px}
.wi-app .wi-ait-sign{width:15px;height:15px;flex:none;display:block}
.wi-app .wi-ait-keep{color:var(--teal-deep)}
.wi-app .wi-ait-pass{color:#9B3D34}
.wi-app .wi-ait-maybe{color:#6B7280}
.wi-app .wi-ait-line{display:grid;grid-template-columns:26px auto 1fr;gap:11px;
  align-items:start;padding:11px 0;border-top:1px solid var(--outlineVariant)}
.wi-app .wi-ait-ico{width:26px;height:26px;flex:none;display:block}
.wi-app .wi-ait-k{font-size:14.5px;font-weight:700;color:var(--onSurface);white-space:nowrap;
  line-height:1.45}
.wi-app .wi-ait-v{font-size:14.5px;line-height:1.45;color:var(--onSurface);min-width:0;
  overflow-wrap:anywhere}
/* The bottom line is the collision — the sentence that reconciles two stamps that may disagree —
   so it is the one row that carries weight. */
.wi-app .wi-ait-line.wi-ait-bl .wi-ait-v{font-weight:700}
.wi-app .wi-ait-foot{padding:9px 0 12px;border-top:1px solid var(--outlineVariant);
  font-size:11.5px;line-height:1.4;color:var(--onSurfaceVariant);
  display:flex;align-items:center;gap:5px}
/* The monogram is the brand mark,so it keeps the circular treatment the header lockup uses —
   never a square crop of the App Icon. */
.wi-app .wi-ait-mark{width:14px;height:14px;border-radius:50%;flex:none;display:block}
/* Unasked / working / cannot-answer states share the card,without its row chrome. */
.wi-app .wi-ait.wi-ait-cta{padding:4px 16px}
.wi-app .wi-ait-go{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:52px;padding:0;background:none;border:0;cursor:pointer;
  font-family:inherit;text-align:left;color:var(--teal-deep)}
.wi-app .wi-ait-gol{font-size:15px;font-weight:700;letter-spacing:-.01em}
.wi-app .wi-ait-goa{font-size:17px;font-weight:700;flex:none}
.wi-app .wi-ait-busy{display:flex;align-items:center;min-height:52px;font-size:14.5px;
  color:var(--onSurfaceVariant)}
/* Phones KEEP the three columns — the reference puts label and value on one line and stacking
   them cost a lot of height. That is only affordable because the values are now capped at 70
   chars (aitake.mjs): the icon, the gaps and the label all shrink so the VALUE column still holds
   ~30 characters a line at 390px, which is two lines for a real value. If the cap is ever raised,
   this is the rule that breaks first. */
@media (max-width:420px){
  .wi-app .wi-ait{padding:14px 14px 4px}
  .wi-app .wi-ait-line{grid-template-columns:22px auto 1fr;gap:9px;padding:10px 0}
  .wi-app .wi-ait-ico{width:22px;height:22px}
  .wi-app .wi-ait-k,.wi-app .wi-ait-v{font-size:13.5px;line-height:1.42}
  .wi-app .wi-ait-h{font-size:17.5px}
}
.wi-app .wi-psum{margin:14px 0 0}
/* Disclosure. Everything except the toggle is hidden while closed — the component has several
   return branches and React.Fragment adds no DOM node,so its children land here as direct
   children and one selector covers them all without restructuring the JSX. */
.wi-app .wi-psum:not(.wi-open) > *:not(.wi-psum-tog){display:none}
.wi-app .wi-psum-tog{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:48px;padding:0;background:none;border:0;cursor:pointer;
  font-family:inherit;color:var(--onSurface);text-align:left}
.wi-app .wi-psum-togt{font-size:12px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;
  color:var(--onSurfaceVariant)}
.wi-app .wi-psum-chev{width:18px;height:18px;flex:none;color:var(--onSurfaceVariant);
  transition:transform .18s ease}
.wi-app .wi-psum.wi-open .wi-psum-chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.wi-app .wi-psum-chev{transition:none}}
/* The first heading inside sits right under the toggle,so it does not need its own top gap. */
.wi-app .wi-psum.wi-open > .wi-psum-h:first-of-type{margin-top:2px}
.wi-app .wi-psum-h{display:flex;align-items:baseline;gap:9px;margin:0 0 11px}
.wi-app .wi-psum-h h2{font-size:12px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;
  color:var(--onSurfaceVariant);margin:0}
.wi-app .wi-psum-h .wi-psum-r{flex:1;height:1px;background:var(--outlineVariant)}
.wi-app .wi-abt{margin:0;padding:0;list-style:none}
.wi-app .wi-abt li{position:relative;padding:0 0 0 17px;margin:0 0 10px;font-size:14.5px;
  line-height:1.5;letter-spacing:-.012em;color:var(--onSurface)}
.wi-app .wi-abt li:last-child{margin:0}
.wi-app .wi-abt li:before{content:"";position:absolute;left:2px;top:9px;width:4px;height:4px;
  border-radius:50%;background:var(--onSurfaceVariant);opacity:.55}
.wi-app .wi-abt-more{display:inline-flex;align-items:center;gap:3px;margin:12px 0 0;font-size:13.5px;
  font-weight:600;letter-spacing:-.02em;background:none;border:0;padding:0;font-family:inherit;
  color:var(--vBUY);cursor:pointer}
.wi-app .wi-abt-desc{margin:13px 0 0;padding-top:12px;border-top:1px solid var(--outlineVariant);
  font-size:13.5px;line-height:1.55;color:var(--onSurfaceVariant)}
/* 2x2,hairline-ruled,no boxes. Label over value so a long dimension string can breathe. */
.wi-app .wi-specs{display:grid;grid-template-columns:1fr 1fr}
.wi-app .wi-spec{padding:13px 14px 12px}
.wi-app .wi-spec:nth-child(odd){border-right:1px solid var(--outlineVariant)}
.wi-app .wi-spec:nth-child(-n+2){padding-top:2px}
.wi-app .wi-spec:nth-child(n+3){border-top:1px solid var(--outlineVariant);padding-bottom:2px}
/* An odd number of facts left the last one alone in a half-width cell with a rule running down
   through the empty half. It spans the row instead — conspicuous on desktop,where the columns
   are ~450px each. */
.wi-app .wi-spec:last-child:nth-child(odd){grid-column:1 / -1;border-right:0}
.wi-app .wi-speck{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--onSurfaceVariant);margin:0 0 5px}
.wi-app .wi-specv{font-size:15px;font-weight:600;letter-spacing:-.022em;line-height:1.3;margin:0;
  color:var(--onSurface);font-variant-numeric:tabular-nums}
.wi-app .wi-specu{font-weight:500;color:var(--onSurfaceVariant);font-size:13px;letter-spacing:-.01em}
.wi-app .wi-swatch{display:inline-flex;align-items:center;gap:8px}
/* Other Options — colour photo cards + size pills. One layout for any variation count.
   Colour names wrap; size labels never clamp, shrink, clip, or ellipsize. */
.wi-app .wi-oseg{display:flex;flex-direction:column;gap:14px;margin:0}
.wi-app .wi-oseg fieldset{border:0;margin:0;padding:0;min-width:0}
.wi-app .wi-oseg legend{font-size:12px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;
  color:var(--onSurfaceVariant);margin:0 0 10px;padding:0}
.wi-app .wi-oseg-colours{display:flex;flex-wrap:nowrap;gap:10px;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  padding:4px 0 8px;scrollbar-width:thin}
.wi-app .wi-oseg-colours::-webkit-scrollbar{height:4px}
.wi-app .wi-oseg-card{position:relative;display:flex;flex-direction:column;align-items:stretch;
  flex:0 0 112px;width:112px;margin:0;padding:8px 8px 10px;border-radius:14px;
  text-align:left;font:inherit;color:inherit;cursor:pointer;box-sizing:border-box;
  background:var(--surfaceContainerLow);border:1.5px solid var(--outlineVariant)}
.wi-app .wi-oseg-card.on{border-width:2.5px;border-color:var(--onSurface);background:var(--surface);
  padding:7px 7px 9px}
.wi-app .wi-oseg-card:focus-within{outline:2px solid var(--primary,#14B8A6);outline-offset:2px}
.wi-app .wi-oseg-card input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;
  width:100%;height:100%;z-index:1}
.wi-app .wi-oseg-card-i{height:88px;display:grid;place-items:center;margin:0 0 8px;
  background:var(--surface);border-radius:10px;overflow:hidden}
.wi-app .wi-oseg-card-i.noimg::after{content:"";width:28px;height:22px;border-radius:5px;
  border:1.5px solid var(--outlineVariant);background:var(--surfaceContainer)}
.wi-app .wi-oseg-card-i img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;object-position:center;pointer-events:none}
.wi-app .wi-oseg-card-n{display:block;white-space:normal;overflow:visible;text-overflow:clip;
  overflow-wrap:anywhere;word-break:break-word;max-width:none;pointer-events:none;
  font-size:12.5px;font-weight:650;letter-spacing:-.018em;color:var(--onSurface);line-height:1.3}
.wi-app .wi-oseg-card-here{display:block;font-size:11px;font-weight:700;color:var(--onSurfaceVariant);
  margin-top:4px;white-space:normal;overflow:visible;text-overflow:clip;pointer-events:none}
.wi-app .wi-oseg-sizes{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  white-space:nowrap;padding:4px 0 8px;scrollbar-width:thin}
.wi-app .wi-oseg-sizes::-webkit-scrollbar{height:4px}
.wi-app .wi-oseg-pill{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;
  width:max-content;max-width:none;margin:0;padding:0;border:0;background:none;cursor:pointer}
.wi-app .wi-oseg-pill input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;
  width:100%;height:100%}
.wi-app .wi-oseg-pill-t{display:block;flex:none;width:max-content;max-width:none;
  white-space:nowrap;overflow:visible;text-overflow:clip;
  min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid var(--outlineVariant);background:transparent;
  font:600 14px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  letter-spacing:-.01em;color:var(--onSurfaceVariant);pointer-events:none}
.wi-app .wi-oseg-pill.on .wi-oseg-pill-t{background:var(--primaryFill, var(--primary, #14B8A6));
  border-color:var(--primaryFill, var(--primary, #14B8A6));color:#fff}
.wi-app .wi-oseg-pill:focus-within .wi-oseg-pill-t{outline:2px solid var(--primary,#14B8A6);
  outline-offset:2px}
.wi-app .wi-oseg-pill.off{opacity:.45;cursor:not-allowed}
.wi-app .wi-oseg-pill.off input{cursor:not-allowed}
.wi-app .wi-oseg-go{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
  min-height:44px;padding:0 16px;border-radius:999px;text-decoration:none;
  background:var(--primaryFill, var(--primary, #14B8A6));color:#fff;
  font:700 14px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.wi-app .wi-oseg-go:focus-visible{outline:2px solid var(--primary,#14B8A6);outline-offset:3px}
.wi-app .wi-oseg-here,.wi-app .wi-oseg-miss{display:block;font-size:13px;font-weight:600;
  color:var(--onSurfaceVariant);margin:0}
.wi-app .wi-opt-note{margin:0 0 10px;padding:10px 12px;border-radius:12px;
  background:var(--surfaceContainerLow);font-size:13px;font-weight:650;
  color:var(--onSurfaceVariant)}
.wi-app .wi-lock{display:flex;gap:9px;align-items:flex-start;padding:11px;border-radius:12px;
  background:var(--surfaceContainerLow);border:1px dashed var(--outlineVariant)}
.wi-app .wi-lock svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--onSurfaceVariant)}
.wi-app .wi-lock p{margin:0;font-size:12.5px;color:var(--onSurfaceVariant);line-height:1.45}
/* Pre-check: the free facts,then what a check adds. Rows,not cards — these are readings
   we already hold,and a card would promise more than a fact deserves. */
.wi-app .wi-facts{display:flex;flex-direction:column;margin:0 0 4px}
.wi-app .wi-fact{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:var(--sp-3) 0;border-bottom:1px solid var(--outlineVariant)}
.wi-app .wi-factk{font-size:var(--fs-bodySm);color:var(--onSurfaceVariant);flex:none;max-width:46%}
.wi-app .wi-factv{font-size:var(--fs-bodySm);color:var(--onSurface);font-weight:500;
  text-align:right;min-width:0;font-variant-numeric:tabular-nums}
.wi-app .wi-adds{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.wi-app .wi-add{padding:var(--sp-2) 0}
.wi-app .wi-add b{display:block;font-size:var(--fs-bodySm);font-weight:500;color:var(--onSurface)}
.wi-app .wi-add i{display:block;font-style:normal;font-size:var(--fs-label);line-height:1.4;
  color:var(--onSurfaceVariant);margin-top:2px}
.wi-app .wi-bridge-story{margin:10px 0 6px;padding:12px 14px;border:1.5px solid var(--outlineVariant,#D1D5DB);
  border-radius:12px;background:var(--surfaceContainerLow,#F8FAFC)}
.wi-app .wi-bridge-story b{display:block;color:var(--onSurface);font-size:var(--fs-bodySm);font-weight:700;margin-bottom:4px}
.wi-app .wi-bridge-story span{display:block;color:var(--onSurfaceVariant);font-size:var(--fs-label);line-height:1.45}
.wi-app .wi-risk{margin:10px 0 6px;padding:12px 14px;border:1.5px solid #B91C1C;
  background:#FEF2F2;border-radius:12px}
.wi-app .wi-risk b{display:block;color:#991B1B;font-size:var(--fs-bodySm);font-weight:700;margin-bottom:4px}
.wi-app .wi-risk span{display:block;color:#7F1D1D;font-size:var(--fs-label);line-height:1.45}
/* A past verdict,re-openable. Deliberately NOT a .wi-card: a card promises a product you
   are considering,this is a receipt for one you already checked. Thumb,name,what you paid
   and when,and the verdict as the small stamp variant. */
.wi-app .wi-pastrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:none;border:0;padding:12px 0;border-bottom:1px solid var(--outlineVariant);
  font-family:inherit;cursor:pointer}
.wi-app .wi-pastrow:active{opacity:.72}
.wi-app .wi-pastim{width:64px;height:64px;flex:none;border-radius:12px;overflow:hidden;
  background:var(--surfaceContainerHigh);display:grid;place-items:center}
.wi-app .wi-pastim img{width:100%;height:100%;object-fit:contain}
.wi-app .wi-pastm{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.wi-app .wi-pastn{font-size:var(--fs-bodySm);line-height:1.3;color:var(--onSurface);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:break-word;word-break:normal}
.wi-app .wi-pastd{font-size:var(--fs-label);color:var(--onSurfaceVariant);font-variant-numeric:tabular-nums}
.wi-app .wi-row2{display:flex;justify-content:space-between;padding:16px 0;
  border-bottom:1px solid var(--outlineVariant);align-items:center;gap:10px;
  font-size:var(--fs-body);min-height:56px;width:100%;text-align:left;
  background:none;border-left:0;border-right:0;border-top:0;cursor:pointer;
  font-family:inherit;color:var(--onSurface)}
.wi-app .wi-r2m{flex:1;min-width:0}
.wi-app .wi-r2t{display:block}
.wi-app .wi-r2s{font-size:var(--fs-labelSm);color:var(--onSurfaceVariant)}
.wi-app .wi-r2c{width:17px;height:17px;color:var(--onSurfaceVariant);flex:none}
.wi-app .wi-r2c svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.wi-app .wi-themerow{display:flex;gap:6px;flex:none;margin-bottom:8px}
.wi-app .wi-themeopt{flex:1;min-height:44px;border-radius:12px;border:1.5px solid var(--outlineVariant);
  background:none;color:var(--onSurfaceVariant);font-family:inherit;font-size:var(--fs-bodySm);
  font-weight:500;cursor:pointer;transition:background .15s,border-color .15s}
.wi-app .wi-themeopt.wi-on{background:var(--appleSoft);color:var(--appleInk);
  border-color:transparent}
.wi-app .wi-themeopt:focus-visible{outline:2px solid var(--apple,#248BF0);outline-offset:2px}
.wi-app .wi-switchrow{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;
  padding:8px 2px;margin:0 0 4px;border:0;background:none;cursor:pointer;text-align:left;
  font-family:inherit;color:inherit}
.wi-app .wi-switchrow:focus-visible{outline:2px solid var(--apple,#248BF0);outline-offset:2px;border-radius:10px}
.wi-app .wi-switchrow .wi-r2m{flex:1;min-width:0}
.wi-app .wi-switch{
  flex:none;width:51px;height:31px;border-radius:999px;padding:2px;box-sizing:border-box;
  background:color-mix(in srgb, var(--onSurface) 18%, transparent);position:relative;
  transition:background .2s}
.wi-app .wi-switch>i{
  display:block;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(14,26,43,.28);transform:translateX(0);transition:transform .2s}
.wi-app .wi-switchrow.wi-on .wi-switch{background:var(--appleFill, var(--apple, #248BF0))}
.wi-app .wi-switchrow.wi-on .wi-switch>i{transform:translateX(20px)}
.wi-app .wi-nv:focus-visible,.wi-app .wi-ib.wi-scanin:focus-visible{
  outline:2px solid var(--apple,#248BF0);outline-offset:2px}
.wi-app ::selection{background:color-mix(in srgb, var(--apple,#248BF0) 28%, transparent);color:var(--onSurface)}
.wi-app .wi-prof{display:flex;align-items:center;gap:13px;flex:none}
.wi-app .wi-avatar{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--primary);color:var(--onPrimary);font-size:var(--fs-title);font-weight:600}
.wi-app .wi-profm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wi-app .wi-profn{font-size:var(--fs-title);font-weight:500;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-app .wi-profs{font-size:var(--fs-label);color:var(--onSurfaceVariant)}
.wi-app .wi-profedit{flex:none;min-height:40px;padding:0 16px;border-radius:20px;border:1.5px solid var(--outline);
  background:none;color:var(--onSurface);font-family:inherit;font-size:var(--fs-bodySm);cursor:pointer}
.wi-app .wi-statcard{background:var(--secondaryContainer);color:var(--onSecondaryContainer);padding:var(--sp-4);gap:0}
.wi-app .wi-scl{font-size:var(--fs-label)}
.wi-app .wi-scn{font-size:var(--fs-display);font-weight:500;line-height:1}
.wi-app .wi-scs{font-size:var(--fs-labelSm);opacity:.8}
/* ── Watching / Find / Scan (transcribed) ────────────────────────────────── */
.wi-app .wi-crow{display:flex;gap:12px;align-items:flex-start}
.wi-app .wi-plate.wi-sm{width:92px;height:92px;border-radius:15px}
.wi-app .wi-plate.wi-sm img{max-width:86%;max-height:80px}
.wi-app .wi-pz{display:flex;align-items:baseline;gap:8px;margin-top:5px;flex-wrap:wrap}
.wi-app .wi-pz .wi-n{font-variant-numeric:tabular-nums;font-size:var(--fs-title);font-weight:500;letter-spacing:-.02em}
.wi-app .wi-pz .wi-u{font-variant-numeric:tabular-nums;font-size:var(--fs-bodySm);color:var(--onSurfaceVariant)}
/* Distance to the target price. The prototype scales it against the 12-month
   high; production feed data carries the year LOW (from the checked set) but
   not the high,so the bar renders only when both exist rather than inventing
   a denominator. */
.wi-app .wi-wbar{height:6px;border-radius:3px;background:var(--outlineVariant);position:relative}
.wi-app .wi-wbar i{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--primary)}
.wi-app .wi-wgap{font-size:var(--fs-labelSm);color:var(--onSurfaceVariant)}
.wi-app .wi-saved-note{font-size:var(--fs-bodySm);line-height:1.4;color:var(--onSurfaceVariant);margin:0 0 12px;text-wrap:pretty}
.wi-app .wi-saved-card{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:18px;
  background:var(--surfaceContainerHighest);margin:0 0 10px}
.wi-app .wi-saved-top{display:flex;align-items:center;gap:10px}
.wi-app .wi-saved-mid{flex:1;min-width:0}
.wi-app .wi-saved-nm{appearance:none;border:0;background:none;padding:0;margin:0;text-align:left;cursor:pointer;
  font:700 15px/1.25 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;color:var(--onSurface);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wi-app .wi-saved-meta{font-size:var(--fs-label);color:var(--onSurfaceVariant);margin-top:3px}
.wi-app .wi-saved-stamp{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:11px;
  color:#fff;font:800 12px/1 system-ui;letter-spacing:.02em;flex:none}
.wi-app .wi-saved-nostamp{font:600 12px/1.3 system-ui;color:var(--onSurfaceVariant);max-width:9ch;text-align:right}
.wi-app .wi-saved-vs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wi-app .wi-saved-pill{background:var(--surface);border-radius:12px;padding:8px 10px;min-width:0}
.wi-app .wi-saved-k{font:700 10px/1 system-ui;letter-spacing:.06em;text-transform:uppercase;color:var(--onSurfaceVariant)}
.wi-app .wi-saved-v{font:800 16px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;margin-top:4px;color:var(--onSurface)}
.wi-app .wi-saved-acts{display:flex;gap:8px;align-items:center}
.wi-app .wi-saved-check{
  appearance:none;border:0;cursor:pointer;flex:1;min-height:44px;border-radius:999px;
  background:var(--primary);color:var(--onPrimary);
  font:700 14px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.wi-app .wi-saved-check:active{filter:brightness(.95)}
.wi-app .wi-saved-rm{appearance:none;border:0;cursor:pointer;width:44px;height:44px;border-radius:999px;
  background:var(--surface);color:var(--onSurfaceVariant);display:grid;place-items:center}
.wi-app .wi-saved-rm.wi-on{color:var(--primary)}
/* Full-screen empty state — distinct from .emptycat,which sits inside a feed. */
/* Pull to refresh — four states,per M3's loading-indicator model:
   pulling -> ready -> busy -> settling. The pill is the contained treatment so
   the indicator reads against a white card. Section-head refresh was removed
   (owner 16 Aug) once PTR was reliable on Today.
   Idle must be fully invisible: a height:0 + overflow:hidden still let the
   scaled pill bleed onto the Today banner (owner screenshot 16 Aug). */
.wi-app .wi-ptr{flex:none;height:0;display:grid;place-items:center;
  overflow:hidden;pointer-events:none;z-index:4;color:var(--primary);align-self:stretch;
  /* WAS margin-bottom:-12px, to cancel .wi-body's 14px flex gap. That gap is gone —
     .wi-body is gap:0 (an empty paint hole under sticky tabs) — so the compensation cancelled
     nothing and simply dragged the next sibling 12px up, under the header. Invisible while the
     header was the page colour; the dark band made it a visible overlap on Find / Saved / You.
     The note above .wi-body > .wi-ptr ~ .wi-onb already described this pull, but patched only the
     Today banner, so every OTHER screen's first content kept sliding under the search bar.
     Fixing the cause rather than adding a third per-element patch. */
  margin-bottom:0;
  opacity:0;visibility:hidden}
.wi-app .wi-ptr.wi-show{opacity:1;visibility:visible}
.wi-app .wi-ptr.wi-ready,.wi-app .wi-ptr.wi-busy,.wi-app .wi-ptr.wi-settle{
  margin-bottom:0;opacity:1;visibility:visible}
.wi-app .wi-ptr .wi-pill2{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--surfaceContainerHighest);box-shadow:0 2px 6px rgba(0,0,0,.16);
  transform:scale(.72);transition:transform .18s cubic-bezier(.32,.72,0,1)}
.wi-app .wi-ptr.wi-ready .wi-pill2,.wi-app .wi-ptr.wi-busy .wi-pill2{transform:scale(1)}
.wi-app .wi-ptr svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;opacity:.55;transition:opacity .18s}
.wi-app .wi-ptr.wi-ready svg,.wi-app .wi-ptr.wi-busy svg{opacity:1}
.wi-app .wi-ptr.wi-settle{transition:height .26s cubic-bezier(.32,.72,0,1)}
.wi-app .wi-ptr.wi-busy svg{animation:wiSpin .9s linear infinite}
.wi-app .wi-toast{position:absolute;left:50%;bottom:calc(96px + var(--wi-safe-bottom,0px));
  transform:translateX(-50%);z-index:40;background:var(--inverseSurface);color:var(--inverseOnSurface);
  padding:var(--sp-3) var(--sp-4);border-radius:14px;font-size:var(--fs-bodySm);box-shadow:var(--e1);white-space:nowrap}
@media (prefers-reduced-motion: reduce){
  .wi-app .wi-ptr .wi-pill2,.wi-app .wi-ptr.wi-settle{transition:none}
  .wi-app .wi-ptr.wi-busy svg{animation:none}
}
.wi-app .wi-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:0 26px}
.wi-app .wi-empty svg{width:46px;height:46px;fill:none;stroke:var(--onSurfaceVariant);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.wi-app .wi-backrow{display:flex;align-items:center;gap:8px;min-height:44px;align-self:flex-start;
  color:var(--onSurfaceVariant);font-size:var(--fs-bodySm);margin-bottom:-6px;background:none;
  border:0;cursor:pointer;font-family:inherit;padding:0}
.wi-app .wi-backrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* In-app trust/legal: full-bleed article,not a nested website card.
   iOS iframes otherwise layout at ~980px so .doc sits in a centred column. */
.wi-app .wi-body.wi-docopen{overflow:hidden;gap:0;padding:0 0 calc(74px + var(--wi-safe-bottom,0px))}
.wi-app .wi-body.wi-docopen>*{max-width:none}
.wi-app .wi-body.wi-docopen>.wi-backrow{
  align-self:stretch;width:100%;margin:0;padding:4px 16px;box-sizing:border-box;
  border-bottom:1px solid color-mix(in srgb, var(--onSurface) 12%, transparent)}
html.cap-ios .wi-app .wi-body.wi-docopen>.wi-backrow{
  padding-top:calc(8px + max(var(--wi-safe-top,0px),54px))}
html.cap-android .wi-app .wi-body.wi-docopen>.wi-backrow{
  padding-top:calc(8px + var(--wi-safe-top,0px))}
.wi-app .wi-docwrap{flex:1;min-height:0;min-width:0;width:100%;display:flex;
  margin:0;border:0;border-radius:0;overflow:hidden;background:var(--surface)}
.wi-app .wi-docframe{flex:1;width:1px;min-width:100%;height:100%;min-height:0;border:0;
  background:var(--surface)}
.wi-app .wi-note{font-size:var(--fs-bodySm);line-height:1.5;color:var(--onSurfaceVariant);padding:0 4px}
.wi-app .wi-btn.wi-tonal{background:var(--secondaryContainer);color:var(--onSecondaryContainer)}
.wi-app .wi-res{display:flex;flex-direction:column;gap:11px}
/* Find home — denser Worth a look + clear space under sticky search (re-audit P1). */
.wi-app .wi-findhome{padding-top:4px;gap:10px}
.wi-app .wi-findhome .wi-sect{margin:4px 0 2px;font-size:var(--fs-body);font-weight:700}
.wi-app .wi-lookrail{display:flex;flex-direction:column;gap:8px}
.wi-app .wi-lookrail .wi-card{margin:0}
.wi-app .wi-lookrail .wi-plate{height:88px}
.wi-app .wi-lookrail .wi-nm{-webkit-line-clamp:2}
/* Scan: a dark stage with corner brackets and a sweep line. */
.wi-app .wi-scanwrap{position:absolute;inset:0;background:#0d0d11;z-index:1}
/* Live aisle scan (ML Kit startScan): camera paints BEHIND the WebView.
   Capawesome's own recipe (not Ionic): hide EVERY WebView element,then
   re-show only the aisle chrome. Transparent backgrounds alone are not enough —
   any opaque child (esp. full-bleed .wi-scanwrap #0d0d11) covers the preview.
   Key ONLY on body/html.wi-live-scan (set synchronously in openBarcode) — do
   NOT wait for React's .wi-livescan class or the stage stays black for a frame
   (or longer). Theme-paint inline bg on <html> must also clear. */
html.wi-live-scan,html.wi-live-scan body{
  background:transparent !important;
}
body.wi-live-scan{
  visibility:hidden;
  background:transparent !important;
}
body.wi-live-scan #root,body.wi-live-scan .wi-app.wi-shell,body.wi-live-scan .wi-app.wi-shell .wi-body,body.wi-live-scan .wi-scanwrap{
  background:transparent !important;
}
/* visibility:hidden on an ancestor still lets a descendant with visibility:visible
   paint — Capawesome's documented escape hatch for a custom viewfinder. */
body.wi-live-scan .wi-scanui,body.wi-live-scan .wi-nav,body.wi-live-scan .wi-toast{
  visibility:visible;
}
body.wi-live-scan .wi-ptr{display:none !important}
body.wi-live-scan .wi-scanacts{display:none !important}
/* Live aisle: no frosted tip card — viewfinder is the instruction. Cancel is a quiet
   text control in the safe-area corner (iOS Camera pattern). */
/* Scan is the one full-bleed screen: the prototype's ScanScreen renders NO
   search header,and the tab bar has to read against the dark stage rather
   than the page. */
.wi-app.wi-scanning{
  /* Shell pageBg is white in light theme; frosted tab bar composites over it and
     white labels fail. Paint the stage under the chrome (cleared for live camera). */
  background:#0d0d11;
  --wi-scan-chrome:var(--wi-safe-top,0px)}
body.wi-live-scan .wi-app.wi-shell{background:transparent !important}
.wi-app.wi-scanning .wi-body{padding-left:0;padding-right:0;
  padding-top:0;
  /* Non-live fallback: stage must be dark so white chrome clears AA. Live scan
     clears this via body.wi-live-scan (camera shows through). */
  background:#0d0d11}
body.wi-live-scan .wi-app.wi-shell .wi-body{background:transparent !important}
.wi-app.wi-noheader .wi-body{padding-top:calc(var(--sp-3) + var(--wi-safe-top,0px))}
/* Full-bleed camera: do not pad the body (that painted a black header). Island
   clearance lives on the overlay chrome. env(safe-area-inset-top) is often 0 in
   this WKWebView,so the 59pt Island floor is required on iOS — same class of bug as
   .mh-sbpad / .wi-head. Android uses real --wi-inset-top from MainActivity. */
html.cap-ios .wi-app.wi-scanning{
  --wi-scan-chrome:max(var(--wi-safe-top,0px),59px)}
html.cap-android .wi-app.wi-scanning{
  --wi-scan-chrome:var(--wi-safe-top,0px)}
html.cap-ios .wi-app.wi-scanning .wi-body,html.cap-android .wi-app.wi-scanning .wi-body,html.cap-native .wi-app.wi-scanning .wi-body{
  padding-top:0}
.wi-app.wi-scanning .wi-nav{background:rgba(20,16,24,.92);
  box-shadow:0 -1px 0 rgba(255,255,255,.10)}
.wi-app.wi-scanning .wi-nv{color:rgba(255,255,255,.72)}
.wi-app.wi-scanning .wi-nv.wi-on{color:#fff}
.wi-app.wi-scanning .wi-nv.wi-on .wi-pl{background:rgba(255,255,255,.18)}
.wi-app .wi-scanui{position:relative;z-index:2;display:flex;flex-direction:column;height:100%}
.wi-app .wi-scanhd{padding:calc(var(--sp-2) + var(--wi-safe-top,0px)) 16px 8px;color:#fff;
  font-size:var(--fs-titleSm);font-weight:500}
/* Live aisle Close — quiet corner control. Must have a non-transparent fill:
   Capawesome's camera layer sits behind a see-through WebView,and iOS hit-tests
   skip fully transparent pixels,which is why Cancel did nothing. */
.wi-app .wi-scanbrand{position:absolute;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:center;
  top:var(--wi-scan-chrome,0px);height:44px;padding:0 56px;pointer-events:none;min-width:0;overflow:hidden}
/* Pin scan wordmark ink — global .wi-wm1 theme rules must not win here. */
.wi-app .wi-scanbrand .wi-wm .wi-wm1{color:#fff !important}
.wi-app .wi-scanbrand .wi-wm .wi-wm2{color:#14B8A6 !important;-webkit-text-fill-color:#14B8A6}
.wi-app .wi-scanbrand .wi-wm,.wi-app .wi-scanbrand .wi-wm span{font-size:clamp(1.35rem,1.5rem,1.65rem);font-weight:800;letter-spacing:-.035em}
.wi-app .wi-scancancel{position:absolute;top:var(--wi-scan-chrome,0px);left:8px;right:auto;
  z-index:70;border:0;background:rgba(20,16,24,.45);color:#fff;font:inherit;font-size:18px;line-height:1;
  font-weight:600;padding:0;min-height:44px;min-width:44px;width:44px;height:44px;
  border-radius:999px;display:grid;place-items:center;pointer-events:auto;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.wi-app .wi-scancancel svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.wi-app .wi-scancancel:active{opacity:.7}
body.wi-live-scan .wi-scancancel{visibility:visible;pointer-events:auto;
  background:rgba(20,16,24,.55)}
.wi-app .wi-scanmid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:0 16px;min-height:0;touch-action:pan-y}
.wi-app .wi-scanmid.wi-has-hit{justify-content:flex-start;gap:8px;
  padding:calc(52px + var(--wi-scan-chrome,0px)) 12px 8px;overflow:hidden;touch-action:auto}
.wi-app .wi-frame{width:236px;height:150px;position:relative}
/* The stage is dark in BOTH themes,so the accent has to be the dark-theme one
   in both. --primary is #14B8A6 in light; on #0d0d11 the brackets
   almost invisible. */
/* :not(.wi-sweep) matters — a bare `span` type selector outranks .wi-sweep on
   specificity,so the scan line inherited 36x36 and rendered as a glowing box. */
.wi-app .wi-frame span:not(.wi-sweep){position:absolute;width:36px;height:36px;border-color:#5EEAD4}
.wi-app .wi-sweep{position:absolute;left:10px;right:10px;top:50%;height:2px;background:#5EEAD4;
  box-shadow:0 0 12px #5EEAD4}
/* Snap (Photo) — center dot + violet brackets; barcode keeps teal sweep line. */
.wi-app .wi-scanui.wi-ai-mode .wi-frame span:not(.wi-sweep){border-color:var(--skip-solid,#7FA0FF)}
.wi-app .wi-scanui.wi-ai-mode .wi-sweep{display:none}
.wi-app .wi-scanui.wi-ai-mode .wi-frame::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;
  margin:-4px 0 0 -4px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(127,160,255,.45);
  animation:wiAiDot 2.4s ease-in-out infinite}
@keyframes wiAiDot{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
@media (prefers-reduced-motion: reduce){ .wi-app .wi-scanui.wi-ai-mode .wi-frame::after{animation:none} }
/* The scan outcome. It replaces the aiming tip and STAYS until the next scan —
   a transient toast over a dark camera stage reads as the screen having died. */
.wi-app .wi-scanmsg{display:flex;flex-direction:column;align-items:center;gap:10px;
  max-width:300px;margin:0 auto;padding:16px var(--sp-4);border-radius:16px;text-align:center;
  background:rgba(20,16,24,.82);backdrop-filter:blur(6px)}
.wi-app .wi-scanmsg-t{font-size:var(--fs-titleSm);font-weight:600;color:#fff;line-height:1.3}
.wi-app .wi-scanmsg-s{font-size:var(--fs-label);color:rgba(255,255,255,.78);line-height:1.35}
.wi-app .wi-scanmsg .wi-btn{margin-top:2px}
/* Secondary action on the dark scan scrim,styled exactly like the camera-denied panel's
   alternates above. The unscoped .wi-out is --appleSoft on --appleInk — a LIGHT FILL,which
   on this dark panel reads as a second primary competing with "Scan again" instead of the
   quieter way out. Teal #99F6E4 is the same value the rest of the app uses for a control
   that composites on dark chrome. */
.wi-app .wi-scanmsg .wi-btn.wi-out{background:transparent;color:#99F6E4;
  border:1px solid rgba(153,246,228,.45)}
/* Native camera denied (Don’t Allow): teal brand panel — not orange web .scanx-denied
   (that copy talks about the browser address bar). One panel for Barcode + Snap. */
.wi-app .wi-camdenied{display:flex;flex-direction:column;align-items:center;gap:12px;
  width:min(340px,100%);margin:0 auto;padding:22px 18px;border-radius:20px;text-align:center;
  background:rgba(11,18,32,.94);border:1px solid rgba(20,184,166,.38);
  box-shadow:0 16px 40px -20px rgba(0,0,0,.55)}
.wi-app .wi-camdenied-t{font-size:var(--fs-titleSm);font-weight:700;color:#fff;line-height:1.3}
.wi-app .wi-camdenied-s{font-size:var(--fs-bodySm,14px);color:rgba(255,255,255,.82);line-height:1.45;
  max-width:36ch}
.wi-app .wi-camdenied .wi-btn{width:100%;margin-top:0}
.wi-app .wi-camdenied .wi-btn.wi-fill{background:#14B8A6;color:#fff;border-color:#14B8A6}
.wi-app .wi-camdenied .wi-btn.wi-fill:active{filter:brightness(.94)}
.wi-app .wi-camdenied-alts{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:2px}
.wi-app .wi-camdenied-alts .wi-btn.wi-out{background:transparent;color:#99F6E4;
  border:1px solid rgba(153,246,228,.45)}
/* In-aisle scan result: who sells it,and at what price. Not a BUY/WAIT/SKIP stamp —
   that verdict is Amazon 12-month research and lives on the product page. */
.wi-app .wi-scanhit{display:flex;flex-direction:column;align-items:stretch;gap:10px;
  width:min(400px,100%);margin:0 auto;padding:14px 14px var(--sp-3);border-radius:22px;
  background:var(--surfaceContainerLow);border:1px solid var(--outlineVariant);
  box-shadow:0 24px 48px -24px rgba(0,0,0,.55);text-align:left;color:var(--onSurface);
  max-height:100%;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.wi-app .wi-scanhit .wi-plate{margin:0 auto;width:min(132px,38%);aspect-ratio:1;
  border-radius:16px;overflow:hidden;position:relative;background:var(--cardBg);flex:none}
.wi-app .wi-scanhit .wi-plate img{width:100%;height:100%;object-fit:contain;object-position:center;
  border-radius:20px;background:#fff;display:block;padding:8px;box-sizing:border-box}
/* Full title on the scan hit — identity confirmation in-aisle needs the whole name,not a 2-line ellipsis (Blink doorbell was cutting mid-sentence). Card already scrolls. */
.wi-app .wi-scanhit-hd{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--onSurfaceVariant);margin:0;padding:2px 0 6px;position:sticky;top:0;z-index:1;
  background:var(--surfaceContainerLow)}
.wi-app .wi-scanhit-name{font-size:var(--fs-titleSm);font-weight:600;line-height:1.3;
  overflow-wrap:anywhere;word-break:break-word;display:block;-webkit-line-clamp:unset}
.wi-app .wi-scanhit-brand{font-size:var(--fs-label);color:var(--onSurfaceVariant);margin-top:-4px}
.wi-app .wi-scanhit-ph{width:100%;aspect-ratio:1;background:var(--cardBg2);border-radius:20px}
.wi-app .wi-scanhit-why{font-size:var(--fs-bodySm);line-height:1.4;color:var(--onSurfaceVariant)}
.wi-app .wi-scanhit-note{font-size:var(--fs-label);line-height:1.35;color:var(--onSurfaceVariant);
  opacity:.9}
.wi-app .wi-scanhit-stores{display:flex;flex-direction:column;gap:0;
  border:1px solid var(--outlineVariant);border-radius:14px;overflow:hidden;
  background:var(--cardBg)}
.wi-app .wi-scanhit-sh{font-size:var(--fs-label);font-weight:600;padding:var(--sp-3) 12px var(--sp-2);
  color:var(--onSurfaceVariant)}
.wi-app .wi-scanhit-row{display:grid;grid-template-columns:minmax(7.5em,1fr) auto auto;
  align-items:center;gap:8px 10px;padding:var(--sp-3) 12px;
  border-top:1px solid var(--outlineVariant);font-size:var(--fs-bodySm);min-height:44px}
.wi-app .wi-scanhit-row:first-of-type{border-top:0}
.wi-app .wi-scanhit-sn{min-width:0;font-weight:600;color:var(--onSurface);
  display:flex;align-items:center;gap:8px}
.wi-app .wi-scanhit-sn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-app .wi-scanhit-fav{width:16px;height:16px;border-radius:4px;flex:none}
.wi-app .wi-scanhit-sp{font-variant-numeric:tabular-nums;font-weight:700;color:var(--onSurface)}
.wi-app .wi-scanhit-acts{display:flex;gap:6px;justify-content:flex-end}
.wi-app .wi-scanhit-row .wi-btn{flex:none;min-height:36px;padding:0 12px;font-size:var(--fs-label)}
.wi-app .wi-scanlive{color:#fff;font-size:var(--fs-bodySm);text-align:center;min-height:1.35em;
  line-height:1.35;max-width:280px}
.wi-app .wi-scanlive.wi-busy{font-weight:600}
.wi-app .wi-scanpop{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(13,13,17,.45);pointer-events:none}
.wi-app .wi-scanpop-in{background:rgba(20,16,24,.94);color:#fff;font-size:var(--fs-titleSm);font-weight:700;
  letter-spacing:-.02em;padding:18px 28px;border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.45);
  text-align:center}
body.wi-live-scan .wi-scanpop{visibility:visible}
.wi-app .wi-scanhit .wi-btn.wi-wide{width:100%}
.wi-app[data-theme="dark"] .wi-scanhit .wi-plate img{background:#1a1620}
/* The scan sheet is the WEBSITE's component rendered inside the app,and it sits OUTSIDE
   .wi-app,so it arrived wearing the site's identity: Fraunces serif,an emoji title,orange
   viewfinder corners,a green link and a JetBrains-Mono footer — next to a Material violet app
   that reads as a different,cheaper product. These restyle it in the app's system WITHOUT
   touching the website,which keeps its own look. */
.wi-scanx .scanx{background:rgba(20,16,24,.62);backdrop-filter:blur(14px);padding:var(--sp-4)}
.wi-scanx .scanx-in{background:var(--surfaceContainerLow);border-radius:28px;padding:24px 22px var(--sp-4);
  box-shadow:0 24px 60px -20px rgba(20,16,24,.55);border:1px solid var(--outlineVariant)}
.wi-scanx .scanx-close{background:var(--surfaceContainerHighest);border:0;color:var(--onSurfaceVariant);
  width:36px;height:36px;border-radius:18px;top:20px;right:20px;font-size:var(--fs-callout)}
.wi-scanx .scanx-title{font-family:'Rb',system-ui,sans-serif;font-weight:600;font-size:var(--fs-title);
  color:var(--onSurface);letter-spacing:-.01em}
.wi-scanx .scanx-sub{color:var(--onSurfaceVariant);font-size:var(--fs-bodySm);line-height:1.45;margin:6px 0 16px}
.wi-scanx .scanx-tabs{gap:8px;margin-bottom:16px}
.wi-scanx .scanx-tab{border:0;background:var(--surfaceContainerHighest);color:var(--onSurfaceVariant);
  border-radius:99px;padding:var(--sp-3) 8px;font-size:var(--fs-bodySm);font-weight:600}
.wi-scanx .scanx-tab[aria-selected="true"]{background:var(--primary);color:var(--onPrimary)}
.wi-scanx .scanx-view{border-radius:20px;background:#141018;aspect-ratio:1/1}
/* On DEVICE this box never shows a camera — MLKit opens full-screen — so a square of empty
   navy just pushed the real controls below the fold. The live-camera view (web) keeps its
   full size; only the native placeholder shrinks to a strip. */
.wi-scanx .scanx-view.scanx-native{aspect-ratio:auto;min-height:0;height:92px;
  font-size:var(--fs-bodySm);font-weight:500;color:var(--onSurfaceVariant);background:var(--surfaceContainerHigh)}
.wi-scanx .scanx-view.scanx-native .scanx-corner,.wi-scanx .scanx-view.scanx-native .scanx-line,.wi-scanx .scanx-view.scanx-native .scanx-vignette{display:none}
.wi-scanx .scanx-corner{border-color:var(--primary);width:30px;height:30px;border-width:3px}
.wi-scanx .scanx-line{background:linear-gradient(90deg,transparent,var(--primary),transparent);
  box-shadow:0 0 14px 1px color-mix(in srgb,var(--primary) 55%,transparent)}
.wi-scanx .scanx-toppill{background:rgba(20,16,24,.72);border:0;border-radius:99px;
  font-size:var(--fs-label);font-weight:500}
.wi-scanx .scanx-shot{background:var(--primary);color:var(--onPrimary);border:0;border-radius:99px;
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-body);font-weight:600;box-shadow:none}
.wi-scanx .scanx-shot.sec{background:var(--surfaceContainerHighest);color:var(--onSurface)}
.wi-scanx .scanx-status{font-weight:500;font-size:var(--fs-bodySm);color:var(--onSurfaceVariant);margin-top:14px}
.wi-scanx .scanx-div{border-top:1px solid var(--outlineVariant);margin-top:18px}
.wi-scanx .scanx-alt{font-size:var(--fs-bodySm);color:var(--onSurfaceVariant);margin-top:14px}
.wi-scanx .scanx-alt b{color:var(--primary);font-weight:600}
/* The site prints a monospace spec line here. In the app it is noise around a camera. */
.wi-scanx .scanx-fine{display:none}
/* The pill and the status below it said the same sentence twice. The status is the live
   one (it becomes "Matching product…"),so the static pill goes. */
.wi-scanx .scanx-toppill{display:none}
.wi-app .wi-scantip{color:#fff;opacity:.9;font-size:var(--fs-bodySm);text-align:center}
.wi-app .wi-scanacts{display:flex;flex-direction:column;gap:10px;padding:0 16px var(--sp-4)}
/* Three named ways in,each with what it actually does underneath — the old pair of
   identically-styled buttons gave no clue which one a shopper wanted. */
.wi-app .wi-scanhow{color:rgba(255,255,255,.72);font-size:var(--fs-bodySm);text-align:center;margin-bottom:2px}
.wi-app .wi-actrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:16px;
  padding:var(--sp-3) var(--sp-3);color:#fff;font:inherit;cursor:pointer}
.wi-app .wi-actrow:active{background:rgba(255,255,255,.14)}
/* Fixed,not var(--primary): .wi-scanwrap paints #0d0d11 in BOTH themes,so the token
   would have flipped this row to pale lavender-on-dark-ink in dark mode — a different
   screen from the one that was signed off. Same reason the frame hard-codes #D2BBFF. */
.wi-app .wi-actrow.wi-actmain{background:#14B8A6;border-color:transparent;color:#042F2E}
.wi-app .wi-actic{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:11px;
  background:rgba(255,255,255,.16)}
.wi-app .wi-actrow.wi-actmain .wi-actic{background:rgba(0,0,0,.16)}
/* A hue per action so the three are told apart at a glance,carried by the icon tile
   rather than the row: filling all three would leave nothing reading as the default.
   Teal and pink deliberately — green/amber/red stay reserved for verdicts (§1). */
/* Were #4DD0C0 and #FFB1C3 — two one-off hexes in the whole file,and the teal sat in
   --vWAIT's (#00A0BB) own cyan family on the screen where a scan produces a verdict.
   Now the decorative tints that already exist and are verified >=20 dE from every
   verdict colour,so a tinted icon can never be read as an answer. */
/* Fixed values,NOT var(--t-*): .wi-scanwrap paints #0d0d11 in BOTH themes,so the tokens
   would flip these to #332702 / #2F213F on a near-black stage and the icons would vanish.
   Same reason the frame hard-codes #D2BBFF. Hues are the decorative tints' own,which are
   verified >=20 dE from every verdict colour. */
.wi-app .wi-actp .wi-actic{background:rgba(246,231,191,.16);color:#F6E7BF}
.wi-app .wi-actu .wi-actic{background:rgba(238,225,255,.16);color:#EEE1FF}
.wi-app .wi-actic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.wi-app .wi-actxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wi-app .wi-actxt b{font-size:var(--fs-body);font-weight:600}
.wi-app .wi-actxt i{font-style:normal;font-size:var(--fs-label);opacity:.78}
.wi-app .wi-actrow svg:last-child{width:18px;height:18px;flex:none;opacity:.6;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Scan modes — Amazon-Lens pattern: the stage stays put and a mode row at the
   bottom swaps what it is looking for,so switching costs one tap and never
   re-opens a sheet. Photo mode adds a shutter and a gallery button,because
   /api/vision-scan accepts both a capture and a library pick (a single input
   with capture="environment" blocks the library on iOS). */
.wi-app .wi-scandock{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:0 20px calc(12px + var(--wi-safe-bottom,0px));width:100%;box-sizing:border-box}
.wi-app .wi-scanmodes{display:grid;grid-template-columns:1fr 1fr;width:min(268px,86vw);gap:0;
  padding:3px;border-radius:22px;background:rgba(255,255,255,.16);justify-content:center;
  touch-action:pan-y}
.wi-app .wi-scanmode{padding:8px 12px;min-height:44px;border-radius:19px;font-size:var(--fs-bodySm);font-weight:600;
  background:transparent;color:#fff;border:0;cursor:pointer;font-family:inherit;
  transition:background .15s,color .15s;white-space:nowrap;text-align:center;
  display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.wi-app .wi-scanmode.wi-on{background:#fff;color:#141018}
.wi-app .wi-scanmode-ai{display:flex;align-items:center;justify-content:center;gap:5px}
.wi-app .wi-scanmode-ai svg{width:14px;height:14px;flex:none;opacity:.92;fill:currentColor;stroke:none}
.wi-app .wi-scanlive .wi-scanai-tag{display:inline-block;margin-right:6px;padding:2px 7px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;vertical-align:.05em;
  background:rgba(127,160,255,.28);color:#E8EEFF;border:1px solid rgba(127,160,255,.45)}
.wi-app .wi-scanui.wi-ai-mode .wi-shutter{border-color:var(--skip-solid,#7FA0FF)}
.wi-app .wi-shutrow{display:grid;grid-template-columns:48px 76px 48px;column-gap:28px;
  align-items:center;justify-content:center}
.wi-app .wi-shutter{width:76px;height:76px;border-radius:50%;padding:5px;box-sizing:border-box;
  background:transparent;border:3px solid #fff;cursor:pointer;display:grid;place-items:center;
  transition:transform .12s}
.wi-app .wi-shutter::after{content:"";width:100%;height:100%;border-radius:50%;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);transition:transform .12s}
.wi-app .wi-shutter:active{transform:scale(.96)}
.wi-app .wi-shutter:disabled{opacity:.45;cursor:default;transform:none}
.wi-app .wi-galbtn:disabled,.wi-app .wi-scansearch:disabled{opacity:.45}
.wi-app .wi-shutter:active::after{transform:scale(.84)}
.wi-app .wi-galbtn,.wi-app .wi-scansearch{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.16);color:#fff;
  display:grid;place-items:center;border:0;cursor:pointer;flex:none;padding:0}
.wi-app .wi-galbtn svg,.wi-app .wi-scansearch svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.wi-app .wi-scanname{position:absolute;left:12px;right:12px;z-index:40;
  top:calc(52px + var(--wi-scan-chrome,0px))}
.wi-app .wi-scanname-scrim{position:absolute;inset:0;z-index:35;background:rgba(0,0,0,.4)}
body.wi-live-scan .wi-scanname,body.wi-live-scan .wi-scanname-scrim{visibility:visible;pointer-events:auto}
.wi-app .wi-scanname-bar{display:flex;align-items:center;gap:6px;width:100%;min-height:48px;margin:0;
  background:#fff;border-radius:24px;padding:0 6px 0 16px;box-sizing:border-box}
.wi-app .wi-scanname-bar input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;
  font-size:var(--fs-callout);font-weight:500;color:#0E1A2B}
.wi-app .wi-scanname-bar input::placeholder{color:#6B7280;opacity:1}
@media (prefers-reduced-motion: reduce){ .wi-app .wi-shutter:active,.wi-app .wi-shutter:active::after{transform:none} }

@media (prefers-reduced-motion: reduce){
  .wi-app .wi-card,.wi-app .wi-lrow,.wi-app .wi-btn,.wi-app .wi-starb,
  .wi-app .wi-chip,.wi-app .wi-tile,.wi-app .wi-nv .wi-pl,.wi-app .wi-topbar{transition:none}
  .wi-app .wi-nmb:active,.wi-app .wi-btn:active,
  .wi-app .wi-starb:active,.wi-app .wi-lrow:active,.wi-app .wi-chip:active,
  .wi-app .wi-tile:active,.wi-app .wi-nv:active .wi-pl{transform:none}
  .wi-app .wi-stamp.wi-in{animation:none}
  .wi-app .wi-vt.wi-solo.wi-busy svg{animation:none}
}
/* Honour the one system setting we were missing. Keep it additive — darker ink,
   stronger outlines, no layout shift — so high-contrast mode doesn't invent a new UI. */
@media (prefers-contrast: more){
  .wi-app{
    --onSurface:#000;
    --onSurfaceVariant:#2A2A2A;
    --outline:#1A1A1A;
    --outlineVariant:#4A4A4A;
  }
  .wi-app[data-theme="dark"]{
    --onSurface:#fff;
    --onSurfaceVariant:#E8E8E8;
    --outline:#F0F0F0;
    --outlineVariant:#C0C0C0;
  }
  .wi-app .wi-card,.wi-app .wi-lrow,.wi-app .wi-chip,.wi-app .wi-tile,
  .wi-app .wi-btn.wi-out,.wi-app .wi-scanhit{
    border-width:2px;
  }
}

/* ── Nav Model B Today (handoff) — production shell ── */
.nm2{
  /* Card tokens match .tdv2 so T2VerdictCard (Verified / All Deals) paints as before. */
  --tdv2-ground:#FAFAFB; --tdv2-surface:#FFFFFF;
  --tdv2-ink:#0D0F12; --tdv2-ink-card:#111214;
  --tdv2-mut:#55555A; --tdv2-mut-chrome:#5C5C62;
  --tdv2-hair:#DEDEE5; --tdv2-chipbd:#DCDCE4;
  --tdv2-green:#0B7A45; --tdv2-mint:#35E0A1;
  --tdv2-orange:#B3610A; --tdv2-blue:#0059B3;
  --tdv2-st-buy:#22C55E;  --tdv2-sti-buy:#06331a;
  --tdv2-st-wait:#E8A317; --tdv2-sti-wait:#3a2a02;
  --tdv2-st-skip:var(--skipred-deep); --tdv2-sti-skip:#FFFFFF;
  --tdv2-st-fair:#6AA3F9; --tdv2-sti-fair:#08203f;
  --tdv2-buy:#0B7A45;  --tdv2-buy-t:#EAF6EF;
  --tdv2-wait:#A35F0B; --tdv2-wait-t:#FDF3E6;
  --tdv2-skip:#B3262B; --tdv2-skip-t:#FCEAEB;
  --tdv2-fair:#0059B3; --tdv2-fair-t:#EAF1FB;
  --tdv2-gutter:16px;
  --tdv2-ease:cubic-bezier(0.2,0.8,0.2,1);
  position:fixed; inset:0; z-index:40;
  background:#FAFAFB; color:#1c1c1e;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  /* Same safe-area tokens as .wi-app — Android --wi-inset-* + iOS env(). */
  --wi-safe-top:max(env(safe-area-inset-top,0px),var(--wi-inset-top,0px));
  --wi-safe-bottom:max(env(safe-area-inset-bottom,0px),var(--wi-inset-bottom,0px));
  padding-top:var(--wi-safe-top);
  /* Bottom inset lives on the tab bar (same as .wi-nav), not under the frame — otherwise the
     bar floats above a second bone strip and reads as a moving/detached footer. */
  padding-bottom:0;
}
html.cap-ios .nm2,
html.cap-native .nm2,
html.wi-preview .nm2{
  /* Floor clears Dynamic Island even if env() briefly reports 0 while the keyboard animates. */
  padding-top:max(env(safe-area-inset-top,0px),var(--wi-inset-top,0px),54px);
}
.nm2 *,.nm2 *::before,.nm2 *::after{box-sizing:border-box}
.nm2 button{font:inherit;color:inherit;appearance:none;border:0;background:none;cursor:pointer;padding:0}
.nm2 button:focus-visible{outline:2px solid #0b5fc1;outline-offset:2px}
.nm2 .page{height:100%;display:block;overflow:hidden;background:transparent}
.nm2 .phone-frame{
  position:relative;width:100%;height:100%;
  overflow:hidden;background:#FAFAFB;
  border-radius:0;isolation:isolate;touch-action:pan-y;
}
/* No faux status bar / island in production — Capacitor owns the glyphs. */
.nm2 .status-fixed,.nm2 .status-bar{display:none!important}
.nm2 .mask{top:0;height:58px}
.nm2 .header{top:0;height:58px}
.nm2 .scroll-pad{height:58px} /* header only; safe-area is on .nm2 */
/* Sticky under the fixed wordmark. Opaque bone fill so cards cannot paint through. */
.nm2 .search-chrome{position:sticky;top:58px;transform:none;background:#FAFAFB}
.nm2 *,.nm2 *::before,.nm2 *::after{
  box-sizing: border-box;
}

.nm2 html,.nm2 body,.nm2 #root{
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #111;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #1c1c1e;
}

.nm2 button{
  font: inherit;
  color: inherit;
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

.nm2 button:focus-visible{
  outline: 2px solid #0b5fc1;
  outline-offset: 2px;
}

/* Full-bleed in WiApp / Capacitor — not the handoff's centered 390×844 mock frame. */
.nm2 .page{
  height: 100%;
  display: block;
  overflow: hidden;
  background: transparent;
}

.nm2 .phone-frame{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgb(242, 242, 240);
  border-radius: 0;
  isolation: isolate;
  touch-action: pan-y;
}

/* —— layers —— */
.nm2 .ground{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(242, 242, 240);
  pointer-events: none;
}

.nm2 .scroll{
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.nm2 .ripples{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.nm2 .mask{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 58px;
  z-index: 4;
  background: rgb(242, 242, 240);
  pointer-events: none;
}

.nm2 .status-fixed{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 58px;
  z-index: 5;
  pointer-events: none;
}

.nm2 .header{
  position: absolute;
  /* No faux status bar in prod — header pins at top (safe-area is on .nm2). */
  top: 0;
  left: 0;
  right: 0;
  height: 58px;
  z-index: 6;
  display: flex;
  align-items: center;
  padding: 0 28px;
  pointer-events: none;
  background-color: rgb(242, 242, 240);
  transition: opacity 0.26s ease-out, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nm2 .tab-bar{
  /* Handoff mock sizes — production override at end of nm2 block pins bone chrome + safe area. */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

/* —— status —— */
.nm2 .status-bar{
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px 0;
  position: relative;
  pointer-events: none;
}

.nm2 .status-time{
  font-size: 15px;
  font-weight: 600;
  color: #1c1c1e;
  min-width: 54px;
}

.nm2 .dynamic-island{
  position: absolute;
  left: 50%;
  top: 11px;
  transform: translateX(-50%);
  width: 124px;
  height: 36px;
  border-radius: 20px;
  background: #000;
}

.nm2 .status-icons{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 54px;
  justify-content: flex-end;
}

.nm2 .scroll-pad{
  height: 58px; /* header only; safe-area on .nm2 */
}

.nm2 .wordmark{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: #1c1c1e;
  text-transform: lowercase;
  line-height: 1;
  pointer-events: none;
  cursor: default;
}
.nm2 .nm2-mark{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  display: block;
}
.nm2 .nm2-wm{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: #1c1c1e;
  line-height: 1;
}
.nm2 .nm2-wm i{
  font-style: normal;
  color: var(--teal, #14B8A6);
}

/* —— product ground —— */
/* Hero product lives in-flow under the glass card (see .hero-deal-stage). Deck leftovers stay gone. */
.nm2 .deck-card,
.nm2 .deck-dots,
.nm2 .deck-hit,
.nm2 .deck-hit-dots{ display: none !important; }
.nm2 .ground > .product-photo,
.nm2 .ground > .product-shadow{ display: none !important; }

.nm2 .scrim{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* —— hero —— */
.nm2 .hero-wrap{
  padding: 4px 24px 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  will-change: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.nm2 .hero-card{
  position: relative;
  overflow: hidden;
  /* No isolation — WebKit won't frost the AirPods behind the card if this is isolated. */
  width: 100%;
  box-sizing: border-box;
  padding: 6px 12px 6px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* Crystal — fill ~10%, light blur so AirPods colors punch through. */
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 24px rgba(0, 0, 0, 0.08);
}
.nm2 .hero-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 32%);
  opacity: .55;
}
.nm2 .hero-card > *:not(.hero-highlight):not(.hero-sheen):not(.hero-liquid){
  position: relative;
  z-index: 2;
}
.nm2 .hero-liquid{
  position: absolute;
  inset: -40% -25% auto;
  height: 110%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(46% 52% at 18% 12%, rgba(255,255,255,.28), rgba(255,255,255,0) 68%),
    radial-gradient(38% 44% at 82% 6%, rgba(255,255,255,.14), rgba(255,255,255,0) 65%),
    radial-gradient(70% 55% at 50% 120%, rgba(160,200,255,.08), rgba(255,255,255,0) 70%);
  mix-blend-mode: soft-light;
  opacity: .55;
}
.nm2 .hero-liquid::after{
  content: "";
  position: absolute;
  top: 6%;
  left: -45%;
  width: 42%;
  height: 75%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  animation: nm2LiquidSheen 6.8s ease-in-out infinite;
}
@keyframes nm2LiquidSheen{
  0%, 48%{ transform: translateX(0) skewX(-18deg); opacity: 0; }
  56%{ opacity: .8; }
  72%, 100%{ transform: translateX(290%) skewX(-18deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .nm2 .hero-liquid::after{ animation: none; opacity: 0; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .nm2 .hero-card{ background: rgba(255,255,255,.78); }
}

/* Hero deal block — the price line under the product photo (owner variant E, 2026-09-19).
   Sits on the ground, not on a plate: the photo above it already carries the composition and a
   second card here would compete with the glass card above. */
/* Hero deal band — FIXED height between glass card and search so rotating
   specials (different aspect ratios / was-line on/off) do not jump the search bar. */
.nm2 .hero-deal{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  height: 200px;
  min-height: 200px;
  max-height: 200px;
  box-sizing: border-box;
  padding: 6px 16px 8px;
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.nm2 .hero-deal-stage{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 124px;
  min-height: 124px;
  max-height: 124px;
  margin: 0 0 6px;
  flex: none;
  /* Isolate so multiply composites against THIS stage’s fill (synced to ground tint),
     not a white flattened scroll layer — that was the white box behind deal photos. */
  isolation: isolate;
  background: rgb(242, 242, 240);
}
.nm2 .hero-deal-stage .product-photo{
  position: relative;
  top: auto;
  left: auto;
  display: block;
  width: 160px;
  max-width: 58vw;
  height: 124px;
  max-height: 124px;
  object-fit: contain;
  object-position: center center;
  /* White-backed retailer JPEGs — multiply drops the studio white into the ground tint. */
  mix-blend-mode: multiply;
  background: transparent;
  transform: none;
  transform-origin: 50% 50%;
  margin: 0 auto;
  will-change: transform, opacity;
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 1;
}
.nm2 .hero-deal-stage .product-photo.is-deal{
  width: 210px;
  height: 168px;
  max-height: 168px;
  object-fit: contain;
  object-position: center center;
  mix-blend-mode: multiply;
  background: transparent;
}
.nm2 .hero-deal-stage .product-shadow{
  /* Contact shadow under brand plates only — deal JPEGs already read as floating after multiply. */
  display: none;
}
/* Price line under the art — display only on the landing hero (not a hit target). */
.nm2 .hero-deal-hit{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.nm2 .hero-deal-seller,
.nm2 .hero-deal-prices,
.nm2 .hero-deal-now,
.nm2 .hero-deal-was,
.nm2 .hero-deal-off,
.nm2 .hero-deal-usual{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.nm2 .hero-deal-seller{
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #1d1d1f;
  gap: 6px;
}
.nm2 .hero-deal-seller > img{ display: block; height: 13px; width: auto; }
/* The mark is a 16px disc with the seller's initial behind its favicon — the favicon covers it
   when it loads, the letter shows when it does not. Same shape the compare rows use. */
.nm2 .hero-deal-mark{
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.nm2 .hero-deal-mark i{ font-style: normal; font-size: 10px; font-weight: 700; color: #6e6e73; }
.nm2 .hero-deal-mark img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.nm2 .hero-deal-prices{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.nm2 .hero-deal-now{
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.026em;
  color: #1d1d1f;
}
.nm2 .hero-deal-was{
  font-size: 17px;
  font-weight: 500;
  color: #6e6e73;
  text-decoration: line-through;
}
.nm2 .hero-deal-off{
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #0f7a43;
  padding: 3px 8px;
  border-radius: 7px;
}
.nm2 .hero-deal-usual{ font-size: 14px; font-weight: 500; color: #6e6e73; }
/* D1 — seller · now + was + % off · usually — fixed block so missing Was/usual does not resize the band. */
.nm2 .hero-deal-d1{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  height: 62px;
  min-height: 62px;
  max-height: 62px;
  flex: none;
  overflow: hidden;
  pointer-events: none;
  text-align: center;
  box-sizing: border-box;
}
.nm2 .hero-deal-d1 .hero-deal-seller{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #1d1d1f;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  line-height: 1;
  min-height: 16px;
}
.nm2 .hero-deal-d1 .hero-deal-seller > img{
  display: block;
  height: 13px;
  width: auto;
}
.nm2 .hero-deal-d1 .hero-deal-seller-fav{
  width: 14px;
  height: 14px;
  border-radius: 3px;
  object-fit: contain;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  flex: none;
}
.nm2 .hero-deal-d1 .hero-deal-prices{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  max-width: 100%;
  row-gap: 6px;
  min-height: 28px;
}
.nm2 .hero-deal-d1 .hero-deal-now{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1d1d1f;
  line-height: 1;
}
.nm2 .hero-deal-d1 .hero-deal-was{
  font-size: 14px;
  font-weight: 500;
  color: #6e6e73;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  line-height: 1;
}
.nm2 .hero-deal-d1 .hero-deal-off{
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #0f7a43;
  padding: 3px 8px;
  border-radius: 6px;
  flex: none;
  line-height: 1;
}
.nm2 .hero-deal-d1 .hero-deal-usual{
  font-size: 12px;
  font-weight: 500;
  color: #6e6e73;
  text-align: center;
  line-height: 1.2;
  min-height: 17px;
}
/* Brand-as-filter identity under the cast plate. */
.nm2 .hero-ident{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.nm2 .hero-ident-line{
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.22;
  color: #1d1d1f;
}
.nm2 .hero-ident-brand{
  font-weight: 700;
  letter-spacing: -0.028em;
}
.nm2 .hero-ident-brand i{
  font-style: normal;
  color: var(--teal, #14B8A6);
}
.nm2 .hero-ident-sub{
  margin: 1px 0 0;
  font-size: 11.5px;
  font-weight: 500;
  color: #6e6e73;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* A feed photo is a white-background catalogue shot, unlike the transparent brand art it
   replaces. multiply drops that white into the ground so the product sits ON the tint rather
   than in a white box — the same treatment the studio plates use. */
/* Today’s special — cross-fade when the landing hero rotates products (local flag). */
.nm2 .product-photo.nm2-hero-out{
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.94);
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.3,1);
}
.nm2 .product-photo.nm2-hero-in{
  opacity: 1;
  transition: opacity .42s cubic-bezier(.2,.7,.3,1), transform .42s cubic-bezier(.2,.7,.3,1);
}
.nm2 .hero-deal.nm2-hero-out{ opacity: 0; transform: translateY(8px); transition: opacity .28s ease, transform .28s ease; }
.nm2 .hero-deal.nm2-hero-in{ opacity: 1; transform: none; transition: opacity .4s cubic-bezier(.2,.7,.3,1), transform .4s cubic-bezier(.2,.7,.3,1); }
.nm2 .hero-special-dots{
  display: flex; gap: 7px; justify-content: center; align-items: center; margin-top: 10px;
  pointer-events: auto;
}
.nm2 .hero-special-dots button{
  flex: none; width: 6px; height: 6px; min-width: 6px; min-height: 6px;
  border-radius: 50%; border: 0; padding: 0; margin: 0;
  background: rgba(0,0,0,.18); cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.nm2 .hero-special-dots button.on{ background: #1d1d1f; transform: scale(1.35); }
@media (prefers-reduced-motion: reduce){
  .nm2 .product-photo.nm2-hero-out,
  .nm2 .product-photo.nm2-hero-in,
  .nm2 .hero-deal.nm2-hero-out,
  .nm2 .hero-deal.nm2-hero-in{ transition: none; }
}

.nm2 .product-photo.is-deal{
  /* Live specials — sized by .hero-deal-stage .product-photo.is-deal above. */
  object-fit: contain;
  object-position: center center;
}

.nm2 .hero-highlight{
  position: absolute;
  left: -20%;
  right: -20%;
  top: -70%;
  height: 140%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(58% 52% at 32% 100%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 72%);
}

.nm2 .hero-sheen{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.22));
}

.nm2 .hero-title{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.05;
  text-align: center;
  color: #1c1c1e;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.nm2 .amazon-mark{
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

.nm2 .amazon-mark-lg{
  height: 11px;
  width: auto;
  margin: 0 3px;
}

.nm2 .amazon-mark-sm{
  height: 9px;
  width: auto;
}

.nm2 .hero-sub,.nm2 .hero-foot{
  margin: 0;
  text-align: center;
  color: #55565a;
}

.nm2 .hero-sub{
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
}

.nm2 .hero-foot{
  display: none; /* drops empty band under the verdicts — keeps the card short */
}

.nm2 .verdict-row{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 3px 10px;
}

.nm2 .verdict-item{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1c1c1e;
  text-transform: uppercase;
}

.nm2 .verdict-item i{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
}

/* —— featured —— */
.nm2 .featured-wrap{
  padding: 0 24px;
  will-change: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.nm2 .featured-spacer{
  height: 220px;
}

.nm2 .featured-card{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 11px 14px 12px 16px;
  border: 0;
  border-radius: 22px;
  background: #f5f6f8;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 8px 18px rgba(0, 0, 0, 0.08),
    0 24px 52px rgba(0, 0, 0, 0.14);
  transition: background 0.16s ease-out, box-shadow 0.16s ease-out;
  text-align: left;
  pointer-events: auto;
}

.nm2 .featured-card:active{
  background: #e8eaee;
}

.nm2 .featured-main{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nm2 .featured-top{
  display: flex;
  align-items: center;
  gap: 8px;
}

.nm2 .buy-pill{
  margin-left: auto;
  background: #0f7a43;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 7px;
}

.nm2 .featured-title{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.nm2 .featured-price,.nm2 .deal-price-row{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
}

.nm2 .featured-price b{
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.024em;
}

.nm2 .usually{
  font-size: 15px;
  font-weight: 500;
  color: #6e6e73;
}

.nm2 .featured-price .usually{
  font-size: 15px;
}

.nm2 .off{
  font-size: 13px;
  font-weight: 600;
  color: #0f7a43;
}

.nm2 .featured-spark{
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6e6e73;
  font-size: 13px;
  font-weight: 500;
}

.nm2 .featured-side{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  margin: -2px -4px -4px 0;
}

.nm2 .featured-chev{
  font-size: 20px;
  font-weight: 400;
  color: #55565a;
  line-height: 1;
}

.nm2 .bell-btn{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

.nm2 .bell-circle{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  display: grid;
  place-items: center;
  color: #55565a;
}

/* —— search + pages chrome (sticky under wordmark; opaque so feed cannot show through) —— */
.nm2 .chrome-gap{
  height: 8px;
}

.nm2 .search-chrome{
  position: sticky;
  top: 52px;
  z-index: 5;
  padding: 2px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgb(242, 242, 240);
  pointer-events: auto;
  transform: none;
  will-change: auto;
}

.nm2 .search-bar{
  margin: 0 20px;
  height: 40px;
  border-radius: 999px;
  padding: 0 4px 0 14px;
  gap: 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  color: #1c1c1e;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 14px rgba(0, 0, 0, 0.06);
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.nm2 .search-ph{
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #1c1c1e;
  letter-spacing: -0.01em;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: text;
  user-select: text;
}
.nm2 .search-ph::placeholder{color:#6e6e73;opacity:1}
.nm2 .search-ph::-webkit-search-cancel-button,
.nm2 .search-ph::-webkit-search-decoration{-webkit-appearance:none;appearance:none}

.nm2 .search-div{
  width: 1px;
  height: 22px;
  background: rgba(0, 0, 0, 0.10);
  flex: none;
}

.nm2 .scan-btn{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  color: #0f7a43;
  background: transparent;
  box-shadow: none;
}

.nm2 .scan-btn:hover{
  background: rgba(0, 0, 0, 0.07);
}

.nm2 .scanner{
  display: grid;
  place-items: center;
  transform: none;
  will-change: auto;
}

.nm2 .chips{
  height:38px;
  padding:0 10px 0 14px;
  gap:5px;
  display:flex;
  align-items:center;
  overflow-x:auto;
  overflow-y:hidden;
  touch-action:pan-x pan-y;
  overscroll-behavior:none;
  -webkit-overflow-scrolling:auto;
  scrollbar-width:none;
  transform: none;
  will-change: auto;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 28px),transparent);
  scroll-padding-inline:14px;
}

.nm2 .chips::-webkit-scrollbar{
  display:none;
}

/* Trailing spacer so “Fake Index” peeks instead of flush-cutting at the edge. */
.nm2 .chips::after{
  content:"";
  flex:0 0 36px;
  height:1px;
  pointer-events:none;
}

.nm2 .chip{
  height:30px;
  padding:0 12px;
  border-radius:980px;
  flex:none;
  font-size:12px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:#1c1c1e;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05);
  white-space:nowrap;
}

.nm2 .chip.on{
  background: #1c1c1e;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.nm2 .chip{
  position: relative;
  height: 30px;
  padding: 0 12px;
  border-radius: 980px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex: none;
  transition: background 0.2s ease-out, color 0.2s ease-out;
  color: #1c1c1e;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.nm2 .chip::before{
  content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  right: 0;
}

.nm2 .chip.on{
  background: #1c1c1e;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

/* —— sheet —— */
.nm2 .deal-sheet{
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.07);
  margin-top: 8px;
  padding: 6px 0 120px;
  min-height: 520px;
  /* Clear sticky search+chips (~96px under the denser wordmark). */
  scroll-margin-top: 100px;
}

.nm2 .sheet-grabber{
  width: 34px;
  height: 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.16);
  margin: 0 auto 5px;
}

.nm2 .sheet-head{
  position: sticky;
  top: 140px;
  z-index: 2;
  padding: 2px 20px 6px;
  background: #fff;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.nm2 .sheet-head h2{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.021em;
}

.nm2 .sheet-updated{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #6e6e73;
}

.nm2 .deal-row{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  min-height: 70px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease-out;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.09);
}

.nm2 .deal-row.last{
  box-shadow: none;
}

.nm2 .deal-row:active{
  background: rgba(0, 0, 0, 0.05);
}

.nm2 .deal-thumb{
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background-color: #eef0f3;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.nm2 .deal-thumb img{
  width: 40px;
  height: 44px;
  object-fit: contain;
  display: block;
  /* Prefer sharp downscale from retina tiles over CSS filter softening */
  image-rendering: auto;
  -webkit-user-drag: none;
}

.nm2 .deal-body{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nm2 .deal-title-row{
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.nm2 .deal-title{
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.28;
}

.nm2 .verdict-pill{
  flex: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 5px;
}

.nm2 .deal-price-row{
  gap: 6px;
}

.nm2 .deal-price-row b{
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.018em;
}

.nm2 .deal-price-row .usually{
  font-size: 12px;
}

.nm2 .deal-meta{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: #6e6e73;
}

/* —— skeletons —— */
.nm2 .skel-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  min-height: 70px;
}
.nm2 .skel-row.skel-card{
  background: var(--tdv2-surface, #fff);
  border-radius: 18px;
  margin: 0 0 7px;
  padding: 10px;
  min-height: 96px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 16px rgba(0,0,0,.06);
}
.nm2 .nm2-skel{
  min-height: 520px;
  padding: 0;
}

.nm2 .skel-thumb,.nm2 .skel-line{
  background: linear-gradient(90deg, #f1f0ec 0%, #f7f6f3 40%, #f1f0ec 80%);
  background-size: 400px 100%;
  animation: shimmer 1.4s linear infinite;
}

.nm2 .skel-thumb{
  width: 58px;
  height: 58px;
  border-radius: 12px;
  flex: none;
}

.nm2 .skel-lines{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nm2 .skel-line{
  height: 13px;
  border-radius: 4px;
}

@keyframes shimmer{
  from {
    background-position: -200px 0;
  }
  to {
    background-position: 260px 0;
  }
}

/* —— tabs —— */
.nm2 .tab-item{
  height: 62px;
  padding: 0 4px;
  flex: 1;
  border-top: 2px solid transparent;
  font-size: 11px;
  font-weight: 500;
  color: #6e6e73;
  transition: color 0.18s ease-out;
}

.nm2 .tab-item.on{
  border-top-color: #1c1c1e;
  color: #1c1c1e;
  font-weight: 600;
}

/* —— ripples —— Soft BUY bloom (was hard dual rings) */
.nm2 .ripple{
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 122, 67, 0.18) 0%, rgba(15, 122, 67, 0) 68%);
  pointer-events: none;
  animation: rippleOut 520ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes rippleOut{
  from {
    transform: scale(0.35);
    opacity: 0.9;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .nm2 .ripple{
    display: none;
  }
  .nm2 .skel-thumb,.nm2 .skel-line{
    animation: none;
  }
}

.nm2 .sheet-rows{display:block}
/* Listing = production T2VerdictCard cards (density pass 2026-09). */
.nm2 .deal-sheet{
  background:var(--tdv2-ground);
  border-radius:22px 22px 0 0;
  box-shadow:0 -6px 22px rgba(0,0,0,.07);
  margin-top:8px;
  padding:6px 0 110px;
  min-height:520px;
  scroll-margin-top:100px;
}
.nm2 .sheet-grabber{display:none}
.nm2 .sheet-head{
  position:sticky; top:140px; z-index:2;
  padding:4px var(--tdv2-gutter) 8px;
  background:var(--tdv2-ground);
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.nm2 .sheet-head h2{margin:0;font-size:15px;font-weight:700;letter-spacing:-.021em;color:var(--tdv2-ink)}
.nm2 .sheet-updated{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--tdv2-mut)}
.nm2 .sheet-rows.tdv2-listw{padding:0 var(--tdv2-gutter)}
/* .nm2 button{background:none} is (0,1,1) and would wipe the card fill — same trap as
   the original .tdv2 button reset. Pin surface + padding on the card itself. */
.nm2 .tdv2-card{
  background:var(--tdv2-surface);
  padding:8px;
  margin-bottom:6px;
  border-radius:12px;
  border:0;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.05);
  scroll-margin-top:108px;
}
.nm2 .chip{
  background:#fff; color:#1c1c1e;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.05);
  padding:0 12px;
}
.nm2 .chip.on{background:#1c1c1e;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22)}
/* Final production shell — must win over any handoff mock rules above. */
.nm2 .page{height:100%;display:block;overflow:hidden;background:transparent}
.nm2 .phone-frame{position:relative;width:100%;height:100%;overflow:hidden;border-radius:0}
.nm2 .header{top:0;height:52px;background:#FAFAFB}
.nm2 .mask{top:0;height:52px;background:#FAFAFB}
.nm2 .scroll-pad{height:52px}
.nm2 .search-chrome{top:52px;background:#FAFAFB;position:sticky;transform:none}
.nm2.nm2-pinned .search-chrome{top:52px;position:sticky;transform:none}
.nm2.nm2-pinned .header{opacity:1;pointer-events:none}
.nm2.nm2-pinned .mask{opacity:1}
/* All Deals / Clip / Fake — hide the ground scrim so it cannot leak behind the sheet. */
.nm2.nm2-feed .ground .scrim{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.nm2.nm2-feed .ground{background:#FAFAFB!important}
/* Force Crystal glass on the Share-any-deal banner (wins over earlier mock rules). */
.nm2 .hero-card{
  -webkit-backdrop-filter:blur(22px) saturate(180%) !important;
  backdrop-filter:blur(22px) saturate(180%) !important;
  background:rgba(255,255,255,.10) !important;
}
.nm2 .featured-spacer{height:168px}
/* Fixed bone tab bar — matches .wi-nav. Never scrolls or transforms with the hero. */
.nm2 .tab-bar{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:20;
  height:auto;
  min-height:0;
  margin:0;
  padding:6px 4px calc(8px + var(--wi-safe-bottom,0px));
  box-sizing:border-box;
  display:block;
  background:#FAFAFB;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 -1px 0 rgba(0,0,0,.08);
  pointer-events:none;
  transform:none;
}
.nm2 .tab-bar > *{pointer-events:auto}
.nm2 .tdv2-tabs{
  display:flex;
  width:100%;
  margin:0;
  padding:0;
  box-sizing:border-box;
  background:transparent;
  border-top:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.nm2 .tdv2-tab{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  height:49px;
  min-width:0;
  /* #6E6E73, not #86868B — the palette's own secondary ink. The lighter value measures 3.23:1 on
     this ground against the 4.5 a 10px label needs, and CLAUDE.md records it being corrected once
     already in the All Deals light lock. It came back with the Nav Model B tab bar. */
  color:#6E6E73;
}
.nm2 .tdv2-tab svg{
  width:22px;height:22px;display:block;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.nm2 .tdv2-tab span{
  font-size:10px;font-weight:500;letter-spacing:-.006em;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nm2 .tdv2-tab.on{color:#1D1D1F}
.nm2 .tdv2-tab.on svg.fillable{fill:currentColor;stroke-width:0}
.nm2 .tdv2-tab.on span{font-weight:600}
/* Keep list rows from painting under the tab bar; scroll-padding clears sticky chrome. */
.nm2 .scroll{
  bottom:calc(58px + var(--wi-safe-bottom,0px));
  scroll-padding-top:140px;
}
.nm2 .deal-sheet{padding-bottom:calc(28px + var(--wi-safe-bottom,0px))}
.nm2 .sheet-rows.tdv2-listw{padding-bottom:20px}
/* ── end Nav Model B Today ── */

/* ═══════════════════════════════════════════════════════════════════════════════
   Today v2 — design_handoff_mobile_app/README.md (2026-09-02).
   Behind ?today=v2 so the owner-locked Today screen (product invariants: page tabs,intro
   banner plates,studio plates,All Deals light-Apple lock) is untouched and the
   two can be compared side by side in the Simulator.

   Authored at 402 x 874pt. Every number below is a point value from the README and
   maps 1:1 to CSS px at the iPhone logical width. Contrast pairs were measured by
   the designer and several are the SECOND attempt — do not lighten the muted greys
   or the tint inks (#B3610A on white is 4.53:1,#0059B3 is 6.8:1,stamp ink on its
   own tint 4.55-5.8:1).
   ═════════════════════════════════════════════════════════════════════════════ */
.tdv2{
  /* surfaces — the "cool grey" 11b ground */
  --tdv2-ground:#FAFAFB; --tdv2-surface:#FFFFFF;
  /* Bone band behind the lockup — same chrome as nm2 Today / .wi-app. */
  --tdv2-band:#fafafb;
  --tdv2-ink:#0D0F12; --tdv2-ink-card:#111214;
  /* mut = captions. mut-chrome = the FIELD's placeholder and its search glyph, and nothing else.
     mut-chrome was #8A8E94, the handoff's placeholder colour, which measures 3.29:1 on the white
     field and fails AA — the one value in that spec that does not clear the bar it claims. #72767D
     is the lightest grey in the same cool family that clears it (4.56:1), so the placeholder still
     reads lighter than caption text. Do not use it on the grey ground: it only clears on white. */
  --tdv2-mut:#55555A; --tdv2-mut-chrome:#5C5C62;
  --tdv2-hair:#DEDEE5; --tdv2-chipbd:#DCDCE4;
  /* brand */
  --tdv2-green:#0B7A45; --tdv2-mint:#35E0A1;
  --tdv2-orange:#B3610A;   /* price, ONLY when genuinely below usual */
  --tdv2-blue:#0059B3;     /* percentage-under lead figure */
  /* verdicts — ink is the stamp border + text, tint is the stamp fill + thumbnail */
  /* The share card's OUR VERDICT seal (ogcard.mjs VC): a FILLED stamp, not an outline. Same
     fill/ink pairs so the card in the app and the card people share read as the same object. */
  --tdv2-st-buy:#22C55E;  --tdv2-sti-buy:#06331a;
  --tdv2-st-wait:#E8A317; --tdv2-sti-wait:#3a2a02;
  /* skipRed is a BRAND hex — take the token, never retype it (check:brand enforces this, and it
     is how the lockup drifted before). */
  /* SKIP carried near-black ink on the brand red: 2.88:1, the worst pair in the app and one the
     contrast sweep never caught because its fixture has no SKIP item. The red is a brand token
     and does not move; the ink goes white, which is what a dark ground wants anyway. 5.86. */
  --tdv2-st-skip:var(--skipred-deep); --tdv2-sti-skip:#FFFFFF;
  /* FAIR was the odd one out: 4.43 against siblings sitting at 6.5 (BUY) and 6.4 (WAIT). The
     blue lifts rather than the ink darkening, so the seal keeps reading as a bright chip like
     the others. 6.38 — the family's own headroom, not a scrape past the floor. */
  --tdv2-st-fair:#6AA3F9; --tdv2-sti-fair:#08203f;
  --tdv2-buy:#0B7A45;  --tdv2-buy-t:#EAF6EF;
  --tdv2-wait:#A35F0B; --tdv2-wait-t:#FDF3E6;
  --tdv2-skip:#B3262B; --tdv2-skip-t:#FCEAEB;
  --tdv2-fair:#0059B3; --tdv2-fair-t:#EAF1FB;
  /* White on all four verdict solids is 5.41 / 5.00 / 6.50 / 6.82 at 13px/700 — small text, so
     4.5:1 is the bar. Lightening any of them breaks the pill. */
  /* type — system font, per the spec. Do NOT substitute a webfont. */
  --tdv2-font:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;
  --tdv2-ease:cubic-bezier(0.2,0.8,0.2,1);
  --tdv2-gutter:16px;

  position:fixed; inset:0; z-index:40;
  display:flex; flex-direction:column;
  background:var(--tdv2-ground); color:var(--tdv2-ink);
  font-family:var(--tdv2-font); -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
/* BUILD_REVIEW item 10 (owner 2026-09-04): ONE ground for the whole screen. This band was white,which put a seam under the field and a second at the rail — three stacked zones. No background
   here at all now,so it shows .tdv2's own ground; white belongs to the cards and the field,and
   that is what makes the field read as a raised control rather than part of the page.
   Still no bottom hairline or bottom padding: the rail is the last child and paints edge to edge. */
.tdv2-top{flex:none;background:var(--tdv2-band);
  padding-top:max(env(safe-area-inset-top,0px),var(--wi-inset-top,0px))}
/* iOS: WKWebView's env() under the Island has been unreliable here before,so keep the same 54px
   floor the app header uses. Android must NOT get it — MainActivity pushes real WindowInsets into
   --wi-inset-*,and a floor on top of those double-pads (product invariants). */
html.cap-ios .tdv2-top{padding-top:max(env(safe-area-inset-top,0px),54px)}
.tdv2 *{box-sizing:border-box}
.tdv2 button{font-family:inherit;cursor:pointer;color:inherit}
/* The chrome reset is applied per-component,NOT as a blanket `.tdv2 button` rule: that selector is
   (0,1,1) and silently outranked .tdv2-card / .tdv2-chip at (0,1,0),so both — which are buttons —
   rendered with a transparent fill and the chips lost their border too. */
.tdv2-tab,.tdv2-ban button,.tdv2-lock{background:none;border:0;padding:0}
.tdv2 :focus-visible{outline:2px solid var(--tdv2-green);outline-offset:2px;border-radius:6px}

/* ── entrance: each band fades up 16pt, once per launch ── */
@keyframes tdv2Rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.tdv2-anim .tdv2-top{animation:tdv2Rise .55s 0s    var(--tdv2-ease) both}
.tdv2-anim .tdv2-rail{animation:tdv2Rise .6s  .08s  var(--tdv2-ease) both}
.tdv2-anim .tdv2-chips{animation:tdv2Rise .55s .14s  var(--tdv2-ease) both}
.tdv2-anim .tdv2-scroll{animation:tdv2Rise .6s  .2s   var(--tdv2-ease) both}
@media (prefers-reduced-motion:reduce){ .tdv2-anim *{animation:none!important} }
/* ── 1 · app bar,height 42 ── */
.tdv2-bar{display:flex;align-items:center;gap:11px;padding:14px var(--tdv2-gutter) 0;flex:none}
.tdv2-lock{display:inline-flex;align-items:center;gap:9px;text-align:left;flex:none}
.tdv2-lock:active{opacity:.66}
.tdv2-mark{width:30px;height:30px;border-radius:50%;flex:none;display:block}
.tdv2-wm{font-size:22px;font-weight:600;letter-spacing:-.032em;color:#1D1D1F}
.tdv2-wm i{font-style:normal;color:#14B8A6}
.tdv2-bell{margin-left:auto;position:relative;width:32px;height:32px;flex:none;
  display:inline-flex;align-items:center;justify-content:center}
.tdv2-bell svg{width:21px;height:21px;display:block;fill:none;stroke:#1D1D1F;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.tdv2-dot{position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:50%;
  background:var(--tdv2-green);border:2px solid var(--tdv2-band)}

/* These sit AFTER the .tdv2-bar / .tdv2-bell rules above on purpose. The first attempt put them
   in the .wi-app region ~2,000 lines earlier, where `justify-content` applied (nothing else sets
   it) but `position:absolute` on the bell silently lost to the `position:relative` declared
   below it. Same specificity, so order decided — the classic trap this file records elsewhere
   for the hero and the lockup. */
/* ── Today header: centred lockup, collapsing on scroll (owner 2026-09-15) ──────────────────────
   The lockup centres and the bell is lifted out of the flow to sit right. Centring it by
   `justify-content:center` alone would NOT work while the bell is still a flex sibling — the bell
   has width, so the lockup would be pushed left of true centre by half of it. Absolute positioning
   takes the bell out of the measurement so the lockup centres on the SCREEN, not on the space the
   bell leaves. */
.tdv2-bar{justify-content:center;position:relative}
/* The bar's own 14px top pad STACKS on the safe-area inset .tdv2-top already carries, so on a
   Dynamic Island phone the lockup started 73px down (59 inset + 14) against an island that ends
   around 48 — a visible band of nothing. The inset itself is not the place to trim: the 54px floor
   exists because WKWebView's env() under the Island has been unreliable here before, and shrinking
   it risks the clock landing on the lockup. So the bar's pad is what gives, and ONLY on the shells
   that actually have an inset — on web and the desktop preview .tdv2-top resolves to 0 and this
   14px is the only thing holding the lockup off the top edge. */
html.cap-ios .tdv2-bar,html.cap-android .tdv2-bar{padding-top:4px}
.tdv2-bell{position:absolute;right:var(--tdv2-gutter);top:50%;transform:translateY(-50%);margin-left:0}

/* Collapsed: the whole row goes, leaving the field and the chips — which is what a thumb is
   reaching for once the shelf is moving. Animating max-height rather than height because the row
   has no fixed height to animate from; padding and opacity go with it so nothing ghosts. */
.tdv2-bar{max-height:64px;opacity:1;overflow:hidden;
  transition:max-height .22s cubic-bezier(.16,1,.3,1),opacity .16s,padding-top .22s cubic-bezier(.16,1,.3,1)}
.tdv2-shrunk .tdv2-bar{max-height:0;opacity:0;padding-top:0;pointer-events:none}
/* the field carries the band's top inset once the row above it is gone, so the pill does not jump
   against the status bar */
.tdv2-fieldw{transition:padding-top .22s cubic-bezier(.16,1,.3,1)}
.tdv2-shrunk .tdv2-fieldw{padding-top:10px}
@media (prefers-reduced-motion:reduce){
  .tdv2-bar,.tdv2-fieldw{transition:none}
}
/* ── 2 · paste field,height 46 (handoff 19a) ──
   46px,not 19d's 50px: this option puts a kicker AND a pill under the field,and both need the
   vertical room. No shadow either — with the pill inset on the same gutter,the field and the pill
   read as two aligned objects on one ground,and a shadow on only one of them breaks that. */
/* Option D: the field rides INSIDE the band, so it keeps the band ground and the band pads
   below it. Padding not margin — a margin here collapses out of the coloured box. */
.tdv2-fieldw{padding:12px var(--tdv2-gutter) 14px;margin-top:0;flex:none}
.tdv2-field{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:980px;
  background:rgba(242,242,240,.62);border:1px solid rgba(0,0,0,.14);
  box-shadow:0 2px 8px rgba(0,0,0,.04)}
/* Focus the PILL, not the input inside it. The shared `.tdv2 :focus-visible` rule sets
   border-radius:6px on whatever is focused, and an outline follows its element's radius — so a
   6px rounded RECTANGLE was being drawn inside a 980px capsule, which is the inner line the owner
   saw while typing. It also painted it in --tdv2-green, the BUY stamp colour, which §1 keeps off
   ambient chrome so a verdict word cannot be confused with a control. Scoped to the field on
   purpose: that shared rule covers 32 other focusable things and correcting all of them is its own
   change. The outline is REPLACED, never just removed — a control with no focus indicator is worse
   than one with an ugly indicator. */
.tdv2-field:focus-within{border-color:rgba(20,184,166,.75);
  box-shadow:0 0 0 3px rgba(20,184,166,.22)}
.tdv2-field input:focus-visible{outline:0;border-radius:inherit}
.tdv2-field .gl{width:18px;height:18px;flex:none;fill:none;stroke:#6E6E73;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.tdv2-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:inherit;
  font-size:16px;letter-spacing:-.022em;color:#1D1D1F}
.tdv2-field input::placeholder{color:#6E6E73}
/* The native one cannot be recoloured, so it goes and ours takes its place. */
.tdv2-field input::-webkit-search-cancel-button,
.tdv2-field input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.tdv2-clr{flex:none;border:0;padding:0;background:none;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;line-height:0;cursor:pointer}
.tdv2-clr svg{width:15px;height:15px;fill:none;stroke:#6E6E73;stroke-width:2.2;stroke-linecap:round}
.tdv2-clr:active svg{stroke:#1D1D1F}
.tdv2-scanb{position:relative;flex:none;border:0;padding:0;background:none;
  /* align-items/justify-content/line-height are NOT optional, and this is a measured bug, not
     belt-and-braces: WebKit does not centre a <button>'s content the way Blink does. Chrome put the
     glyph dead centre (offset 0.0) while the same build in the simulator's WKWebView sat it 12.5pt
     high, against a divider that WAS centred. Keep all three. */
  display:flex;align-items:center;justify-content:center;line-height:0}
/* The glyph is 19px; the target must be 44. An absolutely-positioned hit area rather than padding,so the field's layout is untouched. -12.5px each side is exactly 44x44,and it cannot steal taps
   from the input: to its left sit a 10px gap,the 1px divider and another 10px gap — 21px of dead
   space against 12.5px of overhang. To the right,12.5px stays inside the field's 14px padding. */
.tdv2-scanb::after{content:"";position:absolute;inset:-12.5px}
.tdv2-scanb:active{opacity:.6}
.tdv2-scan{width:19px;height:19px;flex:none;fill:none;stroke:var(--tdv2-green);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
/* ── 3 · clipboard row,height 40 ── */
/* ── 3 · the verdict pill,option 19a (design_handoff_19a) ──
   NOT INTERACTIVE (owner 2026-09-04). The cells are plain <span>s: this is the app's promise —
   "We tell you if the deal is a BUY / WAIT / SKIP / FAIR" — set in the four colours it names,not a
   filter. The kicker and the four cells are one sentence,so they must stay adjacent in the DOM
   for a screen reader to read them in order. It is the
   same sentence the grey band used to carry,which is why there is no hover,no pressed state and
   no tint/selected pair. Do not turn these back into buttons.
   Three values are what make it read as one object rather than a system band,and all three are
   load-bearing:
     · it sits INSIDE the 20px page gutter,so its edges line up with the field and the wordmark;
     · radius 980px on the CONTAINER with overflow:hidden,so the outer two cells inherit the round
       ends — the cells are never rounded individually;
     · a 2px gap,which shows the ground through and is what separates four colours with no borders.
       1px reads as a rendering artefact,4px+ breaks the pill into four separate chips.
   Cells are flex:1 (88.5px each at 402,81.75px at 375) with SYMMETRIC 11px padding — unlike 19d's
   13/16,because the pill's round ends already optically centre the row. */
/* Centred (owner 2026-09-04). It keeps the same 20px margins as the pill rather than centring on
   the viewport,so the two are centred on the SAME axis — the sentence sits over the middle of the
   four cells,not over the middle of the screen,which are different once the gutter exists. */
/* Vertical rhythm,measured on the landing screen 2026-09-04. The biggest hole was between the
   pill and the banners: the pill's 18px bottom margin and the rail's 14px top margin stacked to a
   32px gap,the largest on the screen by 2x. Tightened here and at two smaller points; the list
   starts 20px higher as a result. */
.tdv2-kick{margin:12px var(--tdv2-gutter) 0;font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tdv2-mut);text-align:center}
.tdv2-pill{display:flex;gap:2px;margin:9px var(--tdv2-gutter) 10px;border-radius:980px;
  overflow:hidden}
.tdv2-pcell{flex:1;display:inline-flex;align-items:center;justify-content:center;padding:11px 0;
  border:0;font-size:13px;font-weight:700;letter-spacing:.06em}
/* Fill and ink stay paired at (0,2,0). These are spans now,so `.tdv2 button{color:inherit}
` no
   longer reaches them — but keep the pairing anyway: it has cost this file four times,and it costs
   nothing to be safe against the day one of these becomes a button again. */
.tdv2-pcell.tdv2-vc-buy{background:var(--tdv2-buy); color:#fff}
.tdv2-pcell.tdv2-vc-wait{background:var(--tdv2-wait);color:#fff}
.tdv2-pcell.tdv2-vc-skip{background:var(--tdv2-skip);color:#fff}
.tdv2-pcell.tdv2-vc-fair{background:var(--tdv2-fair);color:#fff}
/* Four labels stop fitting one row. Wrap to a 2x2 of ROUNDED cells rather than shrink below 13px —
   the container's pill radius comes off,since a 980px radius over two rows is not a pill any more.
   The spec puts this at ~130% text size; measured,it is nearer 280%,because flex:1 cells hold
   min-content and the pill grows rather than clipping the labels. Wired to the real condition —
   the pill overflowing its gutter — not to a text-size guess. */
.tdv2-pill.stk{flex-wrap:wrap;border-radius:0;overflow:visible}
.tdv2-pill.stk .tdv2-pcell{flex:0 0 calc(50% - 1px);border-radius:14px}
.tdv2-div{width:1px;height:20px;background:var(--tdv2-chipbd);flex:none}
.tdv2-clipw{padding:0 var(--tdv2-gutter);margin-top:8px;flex:none}
.tdv2-clip{display:flex;align-items:center;gap:9px;height:40px;padding:0 6px 0 14px;border-radius:980px;
  background:#E7F1EA;border:1px solid #D5E5DA}
.tdv2-clip .lk{width:15px;height:15px;flex:none;fill:none;stroke:var(--tdv2-green);stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round}
.tdv2-clip b{flex:1;min-width:0;font-size:14px;font-weight:600;letter-spacing:-.014em;color:#0B3D22;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tdv2-clip button{padding:7px 15px;border-radius:980px;background:var(--tdv2-green);color:#fff;
  font-size:13px;font-weight:600;white-space:nowrap;flex:none}
/* ── 4 · banner carousel — the peek IS the affordance,no dots ── */
/* scroll-padding is what keeps the first banner ON the 20px gutter,and it is not optional here.
   `scroll-snap-align:start` snaps a banner's own start edge to the SCROLLPORT's start edge,which
   ignores .tdv2-railin's padding — so the rail silently scrolled itself by exactly the gutter
   (measured: scrollLeft 20) and the first banner sat flush against the left wall while the field,pill,chips and cards all sat at 20. scroll-padding moves the snap line instead of the content.
   Both edges,so the last banner snaps against the right gutter too. */
.tdv2-rail{margin-top:8px;flex:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-padding-left:var(--tdv2-gutter);scroll-padding-right:var(--tdv2-gutter);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.tdv2-rail::-webkit-scrollbar{display:none}
.tdv2-railin{display:flex;gap:12px;padding:0 var(--tdv2-gutter)}
/* 132px,down from 152 (owner 2026-09-04). The height comes ENTIRELY out of the button and the
   cap padding — the 26px headline is untouched,because the headline is the banner's voice and
   shrinking it was not what was asked for. Measured: the cap is packed with zero slack at every
   height,padTop + copy(80) + cta + padBottom,so 10 + 80 + 33 + 9 = 132 is the floor for a 26px
   headline over two lines. Going below it means shrinking the headline. */
.tdv2-ban{position:relative;width:340px;height:auto;min-height:108px;flex:none;border-radius:22px;overflow:hidden;
  scroll-snap-align:start;background:#0A0A0A}
.tdv2-ban img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right}
/* Photo+stamp art on the right; opaque dark-left + HTML type so copy/CTA read at phone size.
   Card is taller than the 3× art (1020×354) so object-fit covers; left glyphs stay masked. */
.tdv2-ban.art .scrim{position:absolute;inset:0;pointer-events:none;
  /* Stops shifted +10 with the 65% cap: the widest headline now paints out to 61% of the card,
     where the old gradient was already down to .17 alpha. Measured against the actual photos, the
     worst white-on-art pair went 2.59:1 -> 11.68:1. */
  background:linear-gradient(90deg,#07090C 0%,#07090C 50%,rgba(7,9,12,.95) 58%,rgba(7,9,12,.45) 68%,transparent 80%)}
.tdv2-ban.art .cap{position:relative;width:65%;max-width:232px;min-height:108px;
  display:flex;flex-direction:column;justify-content:flex-start;gap:0;
  padding:10px 10px 10px 16px;color:#fff;box-sizing:border-box;z-index:1}
.tdv2-ban.art .cap .tdv2-ban-copy{min-width:0;flex:0 1 auto}
.tdv2-ban.art h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-.045em;line-height:1.08;
  text-wrap:balance}
.tdv2-ban.art p{margin:5px 0 0;font-size:15px;font-weight:500;letter-spacing:-.015em;
  line-height:1.28;color:rgba(255,255,255,.92)}
/* The 44px minimum does NOT apply here: this is a decorative <span>,and the tap target is the
   whole 340x132 card,which carries role="button",tabIndex and the click handler. Shrinking the
   pill costs no reachability — checked before touching it,because a 30px real button would be a
   genuine regression. */
.tdv2-ban.art .cta{display:inline-flex;align-items:center;justify-content:center;flex:none;
  align-self:flex-end;margin-top:6px;padding:6px 14px;min-height:28px;border-radius:980px;
  background:var(--teal-deep);color:#fff;font-size:14px;font-weight:700;letter-spacing:-.02em;
  white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tdv2-ban:not(.art) .scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(9,11,14,.86) 0%,rgba(9,11,14,.5) 36%,transparent 64%)}
.tdv2-ban:not(.art) .cap{position:absolute;left:0;right:0;bottom:0;padding:0 18px 15px;color:#fff}
.tdv2-ban:not(.art) h3{margin:0;font-size:23px;font-weight:600;letter-spacing:-.03em;line-height:1.08}
.tdv2-ban:not(.art) p{margin:3px 0 0;font-size:14px;letter-spacing:-.01em;color:rgba(255,255,255,.82)}
.tdv2-ban:not(.art) .cta{display:inline-block;margin-top:9px;padding:9px 19px;border-radius:980px;
  background:#fff;color:var(--tdv2-ink);font-size:14px;font-weight:600;white-space:nowrap}
.tdv2-live{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:5px;
  padding:6px 12px 6px 9px;border-radius:980px;background:rgba(255,255,255,.94);
  font-size:12px;font-weight:600;color:#0B3D22;white-space:nowrap}
.tdv2-live svg{width:13px;height:13px;fill:none;stroke:var(--tdv2-green);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
/* ── 5 · filter chips ── */
.tdv2-chips{position:sticky;top:0;z-index:3;margin-top:10px;flex:none;
  background:var(--tdv2-band,#f2f2f0);padding:6px 0 8px}
.tdv2-chipscr{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tdv2-chipscr::-webkit-scrollbar{display:none}
.tdv2-chipin{display:flex;gap:8px;padding:0 var(--tdv2-gutter)}
.tdv2-chip{padding:8px 17px;border-radius:980px;font-size:14px;font-weight:600;letter-spacing:-.022em;
  white-space:nowrap;background:#fff;border:1px solid rgba(0,0,0,.12);color:#1c1c1e;
  box-shadow:0 1px 2px rgba(0,0,0,.05)}
.tdv2-chip.on{background:#1c1c1e;border-color:#1c1c1e;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22)}
.tdv2-chips::after{content:"";position:absolute;top:6px;right:0;bottom:8px;width:30px;pointer-events:none;
  background:linear-gradient(to right,rgba(242,242,247,0),var(--tdv2-ground))}
/* ── 7 · verdict cards — the signature component ── */
/* One scroller for everything under the search field. The chips stick to its top so they and the
   search bar stay put on every shelf,while the banners scroll away beneath them. */
.tdv2-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain}
.tdv2-listw{padding:0 var(--tdv2-gutter)}
.tdv2-asof{display:block;margin-top:2px;font-size:11px;color:#6E6E73}
.tdv2-card{display:flex;gap:10px;padding:8px;margin-bottom:6px;border-radius:12px;border:0;
  background:var(--tdv2-surface);text-align:left;width:100%;align-items:center}
.tdv2-thumb{width:56px;height:56px;flex:none;border-radius:10px;overflow:hidden;display:grid;
  place-items:center}
.tdv2-thumb img{width:100%;height:100%;object-fit:contain}
.tdv2-body{flex:1;min-width:0}
.tdv2-trow{display:flex;align-items:flex-start;gap:8px}
/* Slickdeals' own listing title WRAPS rather than truncating — measured on their deals grid:
   15px / normal white-space / ~38px tall,so 2-3 lines. The spec's single line plus tail
   truncation was authored against "Apple AirPods Pro"; real feed titles run ~74 characters,so every
   row lost its name to the ellipsis. Format is unchanged (15px / 600 / -0.022em / 1.26) — only the
   wrap is: two lines,clamped so the card height stays bounded. */
/* 14px over THREE lines (owner 2026-09-04: the product name was not visible enough). Measured on
   the live feed,average share of the name that renders before the clamp:
       15px / 2 lines  35%      <- was
       14px / 2 lines  36%      <- size alone buys almost nothing
       15px / 3 lines  50%
       14px / 3 lines  53%      <- this
   Size was the obvious lever and is nearly useless here: the title column is 159px of a 362px card
   because the 68px thumbnail and the 95px stamp take the rest,so the limit is LINES,not points.
   The third line is a maximum,not a fixed height — cards go 106px to 106-120px,only where a title
   needs it,and the same three still clear the fold. */
.tdv2-title{flex:1;min-width:0;font-size:13.5px;font-weight:600;letter-spacing:-.022em;line-height:1.26;
  color:var(--tdv2-ink-card);white-space:normal;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow-wrap:break-word;word-break:normal;hyphens:manual}
.tdv2-ph{display:grid;place-items:center;width:100%;height:100%;font-size:10px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:rgba(29,29,31,.45);padding:6px;text-align:center;
  line-height:1.2;box-sizing:border-box}
/* The rubber stamp. Rotate the VIEW,never ship pre-rotated art and never rotate the
   text inside a straight border. */
/* Scaled from the share card's 900px-wide seal to fit an 88pt row: same structure (microlabel,glyph,verdict),same -4deg,same white inner ring and coloured glow. */
.tdv2-stamp{flex:none;display:inline-flex;flex-direction:column;align-items:center;
  padding:4px 9px 5px;border-radius:9px;border:2px solid rgba(255,255,255,.4);
  transform:rotate(-4deg)}
/* opacity:.72 was the actual bug here, and check-contrast cannot see it — it reads declared
   colours, so it scored .ev as if it were solid and reported the same 4.43 as .vv. Composited, the
   microlabel was 3.77 on BUY, 3.64 on WAIT and 3.79 on FAIR: every seal in the set failed, and the
   one the sweep flagged was not even the worst. The inks are already dark enough at full strength,
   so the fade goes rather than the colour. */
.tdv2-stamp .ev{font-size:6.5px;font-weight:800;letter-spacing:.18em;line-height:1;
  margin-bottom:2px;text-transform:uppercase}
.tdv2-stamp .vv{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:800;
  letter-spacing:.02em;line-height:1}
.tdv2-stamp .vv svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;
  stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.tdv2-stamp .vv svg.thin{stroke-width:2.6}
.tdv2-prow{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.tdv2-now{font-size:16px;font-weight:700;letter-spacing:-.026em}
/* Orange means "actually cheaper". A price that is NOT below usual stays in ink — apply
   this conditionally or the colour stops meaning anything (the SKIP row is the test case). */
.tdv2-now.under{color:var(--tdv2-orange)}
.tdv2-now.notunder{color:var(--tdv2-ink-card)}
.tdv2-usual{font-size:12px;color:var(--tdv2-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The seller's own mark,from the s2 favicon service the site already uses and the CSP already
   allows (img-src https:). No `loading="lazy"`: a lazy image inside a transformed ancestor has
   already failed to paint once in this file,and at 13px there is nothing to defer. */
.tdv2-fav{width:13px;height:13px;flex:none;border-radius:3px;object-fit:contain;
  display:inline-block;vertical-align:-2px;margin-right:4px}
.tdv2-ev{display:block;margin-top:4px;font-size:12px;color:var(--tdv2-mut);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.tdv2-ev b{font-weight:600}
/* BUILD_REVIEW item 9: two accents per card — the orange price and the verdict stamp. The
   percentage keeps its 600 weight from .tdv2-ev b and drops to caption grey; it is already the most
   specific number on the row and does not need a third colour to be found.
   NOTE: the review's own cited card reference (Mobile Feed.dc.html,10a) still renders this blue
   at `font-weight:600;color:#0059b3` — the prose and the reference file disagree. Following the
   prose,which is what the owner relayed. --tdv2-blue stays defined for the other surfaces. */
.tdv2-ev b.pct{color:var(--tdv2-mut)}
.tdv2-ev b.fake{color:var(--tdv2-skip)}
/* verdict colour pairs */
.tdv2-tint-none{background:var(--tdv2-ground)}
.tdv2-v-buy{color:var(--tdv2-buy)}
.tdv2-tint-buy{background:var(--tdv2-buy-t)}
.tdv2-v-wait{color:var(--tdv2-wait)}
.tdv2-tint-wait{background:var(--tdv2-wait-t)}
.tdv2-v-skip{color:var(--tdv2-skip)}
.tdv2-tint-skip{background:var(--tdv2-skip-t)}
.tdv2-v-fair{color:var(--tdv2-fair)}
.tdv2-tint-fair{background:var(--tdv2-fair-t)}
.tdv2-stamp.tdv2-v-buy{background:var(--tdv2-st-buy); color:var(--tdv2-sti-buy); box-shadow:0 5px 14px rgba(34,197,94,.33)}
.tdv2-stamp.tdv2-v-wait{background:var(--tdv2-st-wait);color:var(--tdv2-sti-wait);box-shadow:0 5px 14px rgba(232,163,23,.33)}
.tdv2-stamp.tdv2-v-skip{background:var(--tdv2-st-skip);color:var(--tdv2-sti-skip);box-shadow:0 5px 14px rgba(196,33,33,.33)}
.tdv2-stamp.tdv2-v-fair{background:var(--tdv2-st-fair);color:var(--tdv2-sti-fair);box-shadow:0 5px 14px rgba(59,130,246,.33)}
.tdv2-empty{margin:18px 2px;font-size:14px;color:var(--tdv2-mut)}
/* Fake Deal Index chip → honesty Index panel (same FakeIndexInline as desktop ?tab=fake),never a SKIP product shelf. Fit the shared .fx block into the Today gutter. */
  .tdv2 .fx{margin:4px 0 28px;max-width:none}
.tdv2 .fx-pct{font-size:48px}
.tdv2 .fx-h{font-size:20px}
.tdv2 .fx-p{font-size:14.5px;margin:14px 0 20px}
.tdv2 .fx-eyebrow{font-size:11px}
.tdv2-ptr{height:0;overflow:hidden;text-align:center;font-size:12px;color:var(--tdv2-mut);
  transition:height .18s var(--tdv2-ease)}
.tdv2-ptr.on{height:26px;line-height:26px}
/* ── 8 · tab bar,49 + 34 safe area ── */
.tdv2-tabs{flex:none;display:flex;border-top:1px solid rgba(0,0,0,.08);
  background:var(--tdv2-band,#f2f2f0);-webkit-backdrop-filter:none;backdrop-filter:none;
  padding-bottom:max(env(safe-area-inset-bottom,0px),var(--wi-inset-bottom,0px))}
/* The colour is on `.tdv2 .tdv2-tab`,at (0,2,0),NOT on `.tdv2-tab` at (0,1,0) — measured,not
   defensive: `.tdv2 button{color:inherit}
` is (0,1,1) and was silently winning,so every inactive
   tab rendered full ink and the muted state this rule describes never once appeared on screen.
   That is the same specificity shape that stripped the cards' and chips' backgrounds and put ink on
   the verdict rail. Any new `.tdv2-*` rule that sets `color` on a <button> needs the extra weight.
   Caption grey,not the field's placeholder grey: these are 11px labels — body text — on the grey
   tab bar,and the handoff reserves the placeholder colour for the placeholder and its glyph.
   #6E6E73 on the bar is 4.54:1; the ink it actually rendered was 17.2:1,so this LOWERS contrast
   on purpose,to restore the active/inactive distinction,and still clears AA. */
.tdv2-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:49px;
  justify-content:center}
.tdv2 .tdv2-tab{color:var(--tdv2-mut)}
.tdv2-tab svg{width:23px;height:23px;display:block;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.tdv2-tab span{font-size:11px;font-weight:500;letter-spacing:-.006em}
.tdv2 .tdv2-tab.on{color:var(--tdv2-green)}
.tdv2-tab.on svg.fillable{fill:currentColor;stroke-width:0}
.tdv2-tab.on span{font-weight:600}
/* ── Verified-deals grid (design_handoff_deals_grid) ───────────────────────────────────────────
   Step 1 tokens. Namespaced --dg-*: --ink, --muted, --buy, --price, --link, --card and --page all
   already exist in this file with different values, and taking those names would restyle the whole
   site to match one page. */
.dg{
  --dg-ink:#0d0f12; --dg-ink-soft:#3f4349; --dg-muted:#4a4f56; --dg-hairline:#e4ebe7;
  --dg-card:#ffffff; --dg-row-quiet:#f3f8f5; --dg-page:#e8f0eb; --dg-page-hair:#d5e2da;
  --dg-nav-bg:#0b1220;
  --dg-buy:#0b7a45; --dg-buy-dark:#0b5c36; --dg-buy-tint:#eaf4ee; --dg-buy-deep:#cdeee0;
  --dg-wait:#a35f0b; --dg-skip:#b3262b; --dg-fair:#0059b3;
  /* #FF6A00 measured 2.87:1 on the card's white — under the 3.0 AA floor even as large text,
     so the biggest number on the card was the least readable thing on it. #F26400 is the
     smallest same-hue step that clears it (3.18) and is the same orange to the eye. */
  --dg-price:#F26400; --dg-link:#0b57d0; --dg-review:#0f766e;
  --dg-mint:#23D17E; --dg-stamp-buy:#23D17E; --dg-cta:#2ad39a;
  --dg-font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  --dg-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  min-height:100vh;background:var(--dg-page);font-family:var(--dg-font);color:var(--dg-ink)}
.dg *,.dg *::before,.dg *::after{box-sizing:border-box}
/* Step 4 — chrome */
.dg-head{display:flex;align-items:center;gap:24px;height:68px;padding:0 40px;background:var(--dg-nav-bg);white-space:nowrap}
.dg-brand{display:inline-flex;align-items:center;gap:10px}
.dg-disc{width:30px;height:30px;border-radius:50%;background:#0e1a2b;border:1px solid rgba(255,255,255,.16);
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;letter-spacing:-.03em;line-height:1}
.dg-disc i{font-style:normal;color:#fff}.dg-disc em{font-style:normal;color:var(--dg-mint)}
.dg-wm{font-size:21px;font-weight:700;letter-spacing:-.03em;color:#fff}
.dg-searchwrap{flex:1;display:flex;justify-content:center}
.dg-search{display:flex;align-items:center;gap:10px;width:560px;padding:0 16px;height:40px;border-radius:980px;
  background:rgba(255,255,255,.06);border:1px solid rgba(53,224,161,.4)}
.dg-search span{flex:1;min-width:0;font-size:15px;letter-spacing:-.014em;color:#9aa7b8;overflow:hidden;text-overflow:ellipsis}
.dg-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:980px;
  background:var(--dg-cta);color:#06231a;font-size:14px;font-weight:700;letter-spacing:-.014em;border:0;font-family:inherit;cursor:pointer}
.dg-nav{display:flex;justify-content:center;gap:34px;padding:16px 0;background:#fff;border-bottom:1px solid var(--dg-page-hair)}
.dg-nav a{font-size:17px;font-weight:500;letter-spacing:-.014em;color:var(--dg-muted);text-decoration:none;padding-bottom:3px}
.dg-nav a.on{font-weight:700;color:var(--dg-ink);border-bottom:2.5px solid var(--dg-ink)}
.dg-body{padding:30px 40px 0}
.dg-h1{margin:0;font-size:32px;font-weight:700;letter-spacing:-.032em;line-height:1.06}
/* Step 2 — the page grid. Vertical TARGET cards: auto-fit + 340px minimum so three fit on a
   wide desk and one stacks cleanly under ~760px. */
/* Uniform card heights (owner 2026-09-07). The handoff specifies a content-driven height (~272px
   with its data) — right for two sample cards, wrong for a shelf, where measured heights ran
   234-294px and left a ragged edge down the page.

   Do NOT equalise with grid-auto-rows:1fr. It works, and it works by stretching every card to the
   tallest, which pushed them to 351px and opened a 90px void in the middle of the short ones. The
   fix is to remove the OUTLIER instead: a fixed height derived from the content, clamps on the two
   fields that vary, and a compare block whose states already share a 110px floor. Then there is no
   slack to distribute. */
/* ── Marketing hero (Hero Banner Motion spec, owner 2026-09-08) ─────────────────────────────────
   A PORT, not a redesign. Every number here came from the spec sheet and is a solved value; the
   ones with a stated reason carry it inline so a later pass cannot "tidy" them away.
   Namespaced --hbm-* / .hbm-*: the existing MarketingHero owns mkh-*, and this has to be able to sit
   beside it behind ?design=hero for a side-by-side without either one restyling the other. */
.hbm,.hcwrap{
  /* .hcwrap shares this block: the tokens are declared on .hbm, so hero C — a SIBLING root,
     not a descendant — resolved none of them and every background fell back to transparent.
     Sharing the selector reuses the same values; duplicating them would add 20 hex literals
     to a file already over the brand budget. */
  /* 65px — the bar pins where the chrome bar was, and the space it vacates stays empty. Owner's
     call: at top:0 the bar had nothing above it to give it an edge, so a translucent panel on a
     pale page read as a gap rather than a surface. --hc-pillh is this bar's own height, measured
     on pin, not guessed. */
  --hc-pin:65px; --hc-pillh:59px;
  --hbm-ground:#f1f3f6;
  /* Studio wall. WI_STUDIO_WALLS' sand — the one of the six that does not tint any verdict word. */ --hbm-navy:#0b1220; --hbm-disc:#0e1a2b; --hbm-mint:#35e0a1;
  --hbm-ink:#0d0f12; --hbm-mut:#55595f; --hbm-cap:#4a4f56;
  --hbm-hair:#dcdfe5; --hbm-div:#e6e9ee;
  --hbm-buy:#0b7a45; --hbm-buy-h:#0e9857; --hbm-buy-a:#096638;
  --hbm-wait:#a35f0b; --hbm-skip:#b3262b; --hbm-fair:#0059b3; --hbm-price:#b3610a;
  --hbm-dim:#9aa7b8; --hbm-buytint:#eaf4ee;
  --hbm-font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  --hbm-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* One expression, used verbatim on the header, hero grid, platform panel and navy band so all
     four share one left edge. Written out rather than tokenised per band for exactly that reason. */
  --hbm-gut:max(32px,calc((100% - 1520px) / 2));
  min-width:1240px;background:var(--hbm-ground);overflow:hidden;
  font-family:var(--hbm-font);color:var(--hbm-ink)}
/* Phantom horizontal scroll came from a declared width plus padding four separate times. */
.hbm *,.hbm *::before,.hbm *::after{box-sizing:border-box}

/* 1 ── header, 64px — lockup scaled so the corner mark holds weight against the search */
.hbm-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  height:64px;padding-inline:var(--hbm-gut);background:var(--hbm-navy);
  opacity:0;animation:hbmFade .5s var(--hbm-e) 0s both}
.hbm-brand{display:inline-flex;align-items:center;gap:8px}
.hbm-disc{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:var(--hbm-disc);
  border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;letter-spacing:-.03em}
.hbm-disc i{font-style:normal;color:#fff}
.hbm-disc em{font-style:normal;color:var(--hbm-mint)}
.hbm-wm{font-size:24px;font-weight:700;letter-spacing:-.035em;color:#fff;white-space:nowrap}
.hbm-search{display:flex;align-items:center;gap:10px;width:560px;height:42px;padding:0 16px;
  border-radius:980px;background:rgba(255,255,255,.06);border:1px solid rgba(53,224,161,.4)}
.hbm-search span{flex:1;min-width:0;font-size:15px;color:var(--hbm-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Cell 3 is empty ON PURPOSE — it balances the logo. Without it the field centres in the leftover
   space, ~100px right of true centre. */
.hbm-bal{display:block}

/* 2 ── hero grid: copy left fills the span; phone stays a right visual anchor */
.hbm-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.34fr);
  gap:36px;align-items:start;padding:28px var(--hbm-gut) 0}
.hbm-left{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;
  width:100%;max-width:none;padding-bottom:8px}
.hbm-h1{margin:0;font-size:46px;line-height:1.02;font-weight:700;letter-spacing:-.028em;
  white-space:nowrap}
/* The headline CLIPS, it does not wrap: each line rides up out of its own mask. */
.hbm-mask{overflow:hidden}
.hbm-mask>span{display:block;transform:translateY(112%);
  animation:hbmRise .85s var(--hbm-eh) both}
.hbm-mask:nth-of-type(1)>span{animation-delay:.2s}
.hbm-mask:nth-of-type(2)>span{animation-delay:.32s}
.hbm-hon{font-style:italic;color:var(--hbm-fair)}
.hbm-ver{color:var(--hbm-buy)}
.hbm-eyebrow{margin-top:12px;font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--hbm-cap);
  opacity:0;animation:hbmUp .6s var(--hbm-e) .6s both}
.hbm-pills{display:flex;gap:8px;margin-top:8px}
.hbm-pill{display:inline-flex;align-items:center;padding:9px 20px;border-radius:980px;color:#fff;
  font-size:15px;font-weight:700;letter-spacing:.02em;line-height:1;
  box-shadow:0 1px 2px rgba(13,15,18,.12)}
.hbm-pill.hbm-b{background:var(--hbm-buy)} .hbm-pill.hbm-w{background:var(--hbm-wait)}
.hbm-pill.hbm-s{background:var(--hbm-skip)} .hbm-pill.hbm-f{background:var(--hbm-fair)}
/* The rolling highlight is INFINITE and carries NO fill. With a delay, fill:both applies the
   loop's first keyframe backwards from t=0 and beats the entrance animation writing the same
   property — the pill would flash before it had risen. */
.hbm-pill.hbm-b{animation:hbmUp .6s var(--hbm-e) .70s both,hbmSweep 7.2s var(--hbm-e) 3.6s infinite}
.hbm-pill.hbm-w{animation:hbmUp .6s var(--hbm-e) .79s both,hbmSweep 7.2s var(--hbm-e) 5.4s infinite}
.hbm-pill.hbm-s{animation:hbmUp .6s var(--hbm-e) .88s both,hbmSweep 7.2s var(--hbm-e) 7.2s infinite}
.hbm-pill.hbm-f{animation:hbmUp .6s var(--hbm-e) .97s both,hbmSweep 7.2s var(--hbm-e) 9.0s infinite}
/* ══ Hero C — the four words, full composition (?design=fourwords) ═══════════════════════════
   A complete hero, not a band dropped into the old one: centred, no device, floating nav pill,
   eyebrow ABOVE the headline, "honest" carrying a filled pill, and the seller wall widened from
   8 to 13 marks. Prefixed hc- because hbm- is the existing hero's namespace and .hbm-band is
   already a decorative SVG band with a fixed height — reusing it clamped this grid to 56px.
   Every colour comes from the existing --hbm-* vars; no new brand values. */
/* The wall is the ground. Tiles carry a photo and a verdict badge and NOTHING else — titles and
   prices behind a headline is four competing elements per tile across forty tiles, which is what
   made it read as noise rather than proof. Stripped back, the same wall says "real products, real
   answers" quietly, and the colour comes from forty verdict washes instead of a gradient. */
/* ── Hero flanks (R3) ──────────────────────────────────────────────────────────────────────────
   Beside the FOUR WORDS, not the field. Two reasons this is better than what it replaces: the
   field is left completely unobstructed, so the one control on the page has nothing competing
   with it; and the two secondary things — the app panels and the taxonomy — end up level with
   each other, which is what they are.
   It also deletes the positioning problem. These were absolute, anchored to 50% and coupled to
   the centre column's width, which is how they ended up overlapping the headline by 216px. A
   plain three-column grid cannot overlap anything, and the breakpoint is a grid collapse rather
   than a switch from absolute back to flow. */
/* ── Verdict panel + feature cards (owner spec 2026-09-15) ────────────────────────────────────
   Replaces the three-column trio (flank · words · flank): one centred panel carrying the four
   words, two cards beneath it. Scoped under .hcwrap like the rest of the hero — unscoped
   .wify-* sits at the same specificity as site rules defined LATER in this sheet and loses on
   order, which is exactly how the first hero build rendered dark-on-dark. */
.hcwrap .wify-panel{max-width:900px;margin:clamp(22px,2.8vw,32px) auto 0;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.09);border-radius:28px;
  padding:clamp(20px,2.4vw,28px) clamp(20px,3vw,40px);position:relative;z-index:2}
/* Spec said #9c92a8. It measures 4.03:1 on this panel and 12px/600 is body text needing 4.5,
   and the landing is a GATED surface in check:contrast — the spec value fails the build. Same
   hue and saturation, lightness lifted to the first step that clears AA (4.53:1). */
.hcwrap .wify-kick{margin:0 0 clamp(10px,1.4vw,14px);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#a59cb0}
.hcwrap .wify-words{margin:0;display:flex;justify-content:center;align-items:baseline;
  flex-wrap:wrap;gap:0 clamp(14px,2.4vw,32px);font-weight:700;
  font-size:clamp(28px,4.2vw,48px);line-height:1.08;letter-spacing:-.035em}
.hcwrap .wify-w-b{color:#4fae6f}
.hcwrap .wify-w-w{color:#e8b33a}
.hcwrap .wify-w-s{color:#ef7266}
.hcwrap .wify-w-f{color:#6f9bf5}

.hcwrap .wify-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(16px,2.2vw,24px);margin:clamp(20px,2.6vw,28px) auto 0;max-width:900px;
  text-align:left;position:relative;z-index:2}
.hcwrap .wify-card{background:#2c2534;border:1px solid rgba(255,255,255,.08);border-radius:20px;
  padding:18px 22px;display:flex;align-items:center;gap:16px;color:#fff;text-decoration:none;
  transition:background .18s,border-color .18s}
.hcwrap .wify-card:hover{background:#322a3b;border-color:rgba(255,255,255,.16)}
.hcwrap .wify-ico{flex:none;width:42px;height:42px;border-radius:13px;
  background:rgba(255,200,20,.14);color:#ffc814;display:flex;align-items:center;
  justify-content:center;overflow:hidden;position:relative}
.hcwrap .wify-ico svg{width:22px;height:22px;display:block}
.hcwrap .wify-lift{animation:wifyLift 2.8s ease-in-out infinite}
.hcwrap .wify-sweep{position:absolute;left:9px;right:9px;height:2px;border-radius:2px;
  background:#ffc814;box-shadow:0 0 8px rgba(255,200,20,.8);
  animation:wifySweep 2.4s ease-in-out infinite}
.hcwrap .wify-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.hcwrap .wify-t{font-size:clamp(16px,1.6vw,18px);font-weight:700;letter-spacing:-.02em}
.hcwrap .wify-d{font-size:14px;line-height:1.45;color:#c3b9cd}

@keyframes wifyLift{
  0%,72%,100%{transform:translateY(0);opacity:1}
  30%{transform:translateY(-7px);opacity:.55}
}
@keyframes wifySweep{
  0%{transform:translateY(-9px);opacity:0}
  15%,85%{opacity:1}
  100%{transform:translateY(9px);opacity:0}
}
@media (prefers-reduced-motion:reduce){ .wify-anim{animation:none !important} }

.hcwrap .wify-foot{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;
  margin:clamp(20px,2.4vw,28px) 0 0;font-size:14.5px;color:#b0a5bb;position:relative;z-index:2}
.hcwrap .wify-foot svg{width:17px;height:17px;flex:none;color:#4fae6f}
.hcwrap .wify-foot a{color:#ffc814;font-weight:600;text-decoration:none}
.hcwrap .wify-foot a:hover{color:#ffd453}

/* ── Snipcart idiom ────────────────────────────────────────────────────────────────────────────
   Measured off snipcart.com: one dark ground, ONE saturated accent used on a single word and the
   submit, a rounded geometric sans at display weight, and a soft bloom under the fold. The ground
   is #2B2631 (theirs) rather than the header's navy because the warmth is most of what the look is;
   the header is overridden to match so the top of the page reads as one field, which is what they
   do. --hc-acc is the only saturated colour in the hero until the poster below it. */
.hcwrap{position:relative;overflow:hidden;background:var(--hc-dark);
  --hc-dark:#2B2631; --hc-acc:#FFCC00; --hc-on:#D9D5DF;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.hcwrap::after{content:"";position:absolute;left:50%;bottom:-38%;width:78%;height:86%;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(146,86,168,.42),rgba(146,86,168,0) 72%)}

.hcwrap .hc-h1{font-size:clamp(38px,6.2vw,78px);line-height:1.1;font-weight:700;letter-spacing:-.012em;
  color:#fff;margin:0 0 30px;max-width:none;text-wrap:balance}
.hcwrap .hc-acc{font-style:normal;color:var(--hc-acc)}

/* The one control. White field so it reads as the thing to use; the accent lands on the submit,
   exactly where their View demo button sits. */
.hcwrap .hc-field{display:flex;gap:9px;max-width:640px;margin:0 auto;background:#fff;border-radius:10px;
  padding:7px 7px 7px 20px;box-shadow:0 24px 54px -30px rgba(0,0,0,.66)}
.hcwrap .hc-field input{flex:1;min-width:0;border:0;outline:0;background:none;color:#2B2631;
  font:400 16px/1 'Poppins',sans-serif}
.hcwrap .hc-field input::placeholder{color:#9B95A3}
.hcwrap .hc-field button{border:0;cursor:pointer;background:var(--hc-acc);color:#2B2631;border-radius:7px;
  padding:13px 28px;font:600 16px/1 'Poppins',sans-serif;white-space:nowrap}
.hcwrap .hc-field button:hover{filter:brightness(1.06)}

/* live-with sentence + marks, on the dark */
.hcwrap .hc-strip{text-align:center;margin-top:32px;position:relative;z-index:2}
.hcwrap .hcw-live{font-size:clamp(14px,1.05vw,16px);line-height:1.6;color:var(--hc-on);font-weight:400;
  max-width:none;margin:0 auto;text-align:center;display:flex;flex-wrap:wrap;gap:6px;
  align-items:center;justify-content:center;gap:8px}
.hcwrap .hcw-lead{margin-right:4px;white-space:nowrap}
/* Discs, not boxes. These are WORDMARKS, so a circle costs width: the usable chord across a 46px
   disc is ~34px against 46px in a pill, which is why the disc is larger than the box it replaces
   rather than the same size. Anything under ~44px and "amazon" and "Lowe's" stop being readable. */
.hcwrap .hcw-live .hc-tile{width:46px;height:46px;min-width:0;padding:0;border-radius:50%;margin:0;
  vertical-align:middle;background:#fff;border-color:transparent;box-shadow:0 2px 6px rgba(0,0,0,.18);
  overflow:hidden;flex:0 0 auto}
.hcwrap .hcw-live .hc-tile img{max-width:34px;max-height:34px;transform:none;object-fit:contain}
.hcwrap .hcw-live .hc-t-txt i{font-size:10.5px}

/* ── the four words, at display scale ── */
.hcwrap .hc-fine{color:#B5AEBE}
.hcwrap .hc-fine a{color:var(--hc-acc)}
.hc-in{position:relative;z-index:47;padding:20px 32px 44px;max-width:1240px;margin:0 auto}
/* The pill pins on scroll. It cannot be position:sticky — .hcwrap sets overflow:hidden for its
   rounded ground, which makes that box the sticky container, so the pill would unstick the moment
   the hero scrolled past. Fixed escapes it (no transformed ancestor in this tree, which would
   otherwise re-trap it). .hc-navslot reserves the height so nothing jumps at the swap.

   THE STACK, measured rather than guessed (class names written without a leading dot on
   purpose — check:wi reads dotted names in comments as real selectors and calls them collisions):
     rd-topwrap    sticky  top 0    h 65  z 50   the dark chrome
     wi-shelf-nav  sticky  top 65   h 53  z 45   the Verified/All/Fake tab row
     this pill     fixed   top 118        z 44   sits under both, covering neither
   The first attempt used top:74 / z:45, which put the pill INSIDE the tab row's 65-118 band at the
   same z-index — so the tab row painted over it and only a sliver showed. 118 = 65 + 53. */
/* Platform marks in the chrome bar, ?design=fourwords only. They sit straight on the bar — no
   tile, no plate — so mark-*.png are the app-*.png files with their white plates knocked out.
   Apple's is a black silhouette, which would be a hole on a near-black bar, so that one is also
   repainted white; Android and Chrome keep their own colour. Sized by height with width auto:
   the three are 152x184, 452x474 and 392x393, and a fixed square would letterbox two of them. */
.hc-plat{display:flex;align-items:center;gap:16px}
.hc-plat a{display:inline-flex;align-items:center;justify-content:center;opacity:.82;
  transition:opacity .2s var(--hbm-e),transform .2s var(--hbm-e)}
.hc-plat a:hover{opacity:1;transform:translateY(-1px)}
.hc-plat a:focus-visible{outline:2px solid var(--hbm-mint);outline-offset:4px;border-radius:6px}
/* Apple's silhouette carries no internal detail, so it reads heavier than the other two at the
   same height; a point smaller evens them out. */
.hc-plat img{height:23px;width:auto;display:block;object-fit:contain}
.hc-plat a:first-child img{height:22px}
@media (prefers-reduced-motion:reduce){.hc-plat a{transition:none}}
.hc-sent{display:block;height:1px;width:1px;margin:0;padding:0}
.hc-navslot{position:relative}
/* Unpinned there is nothing to show: the header is carrying the search. The bar exists only as the
   pinned state, so the slot reserves no height until then.
   :not() rather than a bare .hc-nav — the main .hc-nav rule is declared BELOW this one and sets
   display:flex, so an equal-specificity rule here loses the cascade. Measured it shown at rest. */
.hc-nav:not(.hc-stuck){display:none}
.hc-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-left:14px;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);
  border:1px solid rgba(255,255,255,.85);border-radius:980px;padding:10px 10px 10px 20px;
  /* Two shadows: the cast one lifts it off the grid, the inset hairline is the lit top edge that
     makes glass read as glass rather than as a translucent rectangle. */
  box-shadow:0 10px 28px -20px rgba(13,15,18,.45), inset 0 1px 0 rgba(255,255,255,.9);
  transition:padding .28s var(--hbm-e),box-shadow .28s var(--hbm-e),top .3s var(--hbm-e),
             background-color .28s var(--hbm-e),border-color .28s var(--hbm-e)}
/* Pinned, it stops being a floating pill and becomes a bar. A centred pill leaves three gaps —
   above it, and down each side — and the deal shelf scrolls through every one of them, which is
   what the leaks in the owner's screenshot were. Full-bleed and flush under the chrome closes all
   three: header, search bar, tab row, one continuous run of frosted chrome with no seams.
   Contents stay centred on the same 1180px measure via the padding, not a wrapper element. */
/* Pinned, this sits directly under the dark header — header, search bar, tab row, three flush
   bands. It does NOT carry the lockup: that is in the header two pixels above it, and repeating
   it would be two wordmarks in 120px. */
.hc-nav.hc-stuck{position:fixed;top:var(--hc-pin);left:0;right:0;z-index:46;
  width:100%;max-width:none;margin:0;border-radius:0;border-left:0;border-right:0;
  padding:9px max(var(--hbm-gut),calc((100% - 1180px)/2));
  /* Liquid glass, same four layers as the live verdict card — and this is where it actually pays
     off, because the backdrop is the deal shelf: photographs and coloured chips, not flat grey.
     Frost is a BLUR problem, not an opacity one. At .88 only 12% of the backdrop reached the
     filter, so it rendered as flat white paint. .74 with blur(42px) is the other way round: plenty
     of backdrop, blurred far past legibility, so the shelf arrives as soft colour and never as
     readable text. Raising the alpha to kill bleed-through is the move that removes the frost. */
  background:
    linear-gradient(118deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 64%),
    rgba(255,255,255,.74);
  background-size:240% 100%,auto;
  background-position:150% 0,0 0;
  -webkit-backdrop-filter:blur(42px) saturate(190%) brightness(1.06);
  backdrop-filter:blur(42px) saturate(190%) brightness(1.06);
  border-color:transparent;
  /* A hard bottom edge. With the chrome bar gone this sits flush against the viewport top with
     nothing above it, so a translucent panel over a pale page had no boundary at all and read as
     empty space — the bar looked missing even though it was there. The hairline plus a short
     shadow give it a floor, which is what says "surface" rather than "gap". */
  border-bottom:1px solid rgba(13,15,18,.09);
  box-shadow:0 10px 24px -12px rgba(13,15,18,.26),
             0 1px 0 rgba(13,15,18,.04),
             inset 0 1px 0 rgba(255,255,255,.95),
             inset 0 -1px 0 rgba(255,255,255,.45);
  animation:hcSheen 1.1s var(--hbm-e) both;
  animation:hcDrop .34s var(--hbm-e) both}
@keyframes hcDrop{from{transform:translateY(-9px);opacity:.55}to{transform:none;opacity:1}}
.hc-nav.hc-stuck .hc-nsearch{padding:8px 16px}
/* The lensed edge. Same masked gradient border as the verdict card: lit at the top-left, falling
   away at the bottom-right, which is the cue that reads as curvature rather than a drawn outline. */
.hc-nav.hc-stuck::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.25) 44%,
             rgba(13,15,18,.08) 78%,rgba(255,255,255,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hc-nav.hc-stuck .hc-cta{padding:9px 17px}
@media (prefers-reduced-motion:reduce){
  .hc-nav{transition:none}
  .hc-nav.hc-stuck{animation:none}
}
/* The nav carries the search, not a link list. Two reasons: the page's whole proposition is
   "paste a link", so the first control a visitor meets should be the one that does it; and the
   links duplicated the tab row further down the page. */
/* The lockup only appears once pinned. At rest the hero carries the brand in its own right and a
   second wordmark 60px above the headline is noise; pinned, the chrome bar has gone and this is
   the only thing left identifying the page. Width-animated rather than display-toggled so it
   grows into place instead of snapping. */
.hc-brand{display:flex;align-items:center;gap:10px;overflow:hidden;flex:0 0 auto;
  max-width:0;opacity:0;margin-right:-14px;
  transition:max-width .38s var(--hbm-e),opacity .3s var(--hbm-e),margin-right .38s var(--hbm-e)}
.hc-nav.hc-stuck .hc-brand{max-width:0;opacity:0;margin-right:-14px}
.hc-disc{width:28px;height:28px;border-radius:50%;background:var(--hbm-disc);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:-.03em;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto}
.hc-disc em{font-style:normal;color:var(--hbm-mint)}
.hc-wm{font-size:16px;font-weight:700;letter-spacing:-.03em;color:var(--hbm-ink);white-space:nowrap}
@media (max-width:900px){.hc-nav.hc-stuck .hc-brand{max-width:0;opacity:0;margin-right:-14px}}
.hc-nsearch{flex:1 1 auto;max-width:none;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(13,15,18,.06);border-radius:980px;
  box-shadow:inset 0 1px 2px rgba(13,15,18,.05);
  padding:10px 18px;transition:border-color .2s var(--hbm-e),background-color .2s var(--hbm-e)}
.hc-nsearch:focus-within{background:rgba(255,255,255,.92);border-color:var(--hbm-buy)}
.hc-nsearch svg{flex:0 0 auto;color:var(--hbm-dim)}
.hc-nsearch input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;
  font-size:14.5px;color:var(--hbm-ink)}
.hc-nsearch input::placeholder{color:var(--hbm-mut)}
.hc-cta{background:var(--hbm-buy);color:#fff;border-radius:980px;padding:11px 20px;font-size:14px;
  font-weight:700;border:0;cursor:pointer;font-family:inherit}
.hc-cta:hover{background:var(--hbm-buy-h)}
.hc-eye{text-align:center;margin-top:44px;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  color:var(--hbm-cap)}
.hc-h1{margin:16px auto 0;text-align:center;font-size:clamp(32px,4.2vw,58px);line-height:1.06;font-weight:700;
  letter-spacing:-.03em;max-width:16ch;color:var(--hbm-ink)}
.hc-pill{display:inline-block;background:var(--hbm-fair);color:#fff;border-radius:980px;
  padding:.02em .34em .1em;line-height:1}
.hc-band{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:34px auto 0}
.hc-col{position:relative;padding:22px 20px 20px;border-radius:16px;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.93);
  box-shadow:0 10px 26px -20px rgba(13,15,18,.3);
  transition:background .45s var(--hbm-e),border-color .45s var(--hbm-e),
  transform .45s var(--hbm-e),box-shadow .45s var(--hbm-e)}
.hc-col::before{content:"";position:absolute;left:20px;right:20px;top:0;height:4px;
  border-radius:0 0 4px 4px;background:currentColor;transform:scaleX(.14);transform-origin:left;
  opacity:.72;transition:transform .55s var(--hbm-e),opacity .45s var(--hbm-e)}
/* Liquid-glass live card. Four layers, each doing one job — a flat translucent panel is not the
   effect; the effect is the EDGE behaving like a lens.
     1  backdrop blur + saturate + a touch of brightness: the material itself
     2  a specular rim, bright at the top-left and fading away — light catching a curved edge
     3  inset highlights top and bottom: thickness, so it reads as a slab not a decal
     4  a one-pass sheen when the card takes its turn, which is what makes it feel wet
   The grid ground behind is what sells it: refraction needs something to refract. */
.hc-col.hc-live{
  /* The tint layer is currentColor, which each card already sets to its own verdict token — so the
     glass takes the hue of the word it is holding and NO new hex enters this file (check:brand).
     Kept low: 14% at the top corner falling to nothing by 62%, because the glass has to stay glass.
     Past ~20% it stops refracting and reads as a coloured card with a blur on it. */
  background:
    linear-gradient(118deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.62) 50%,rgba(255,255,255,0) 66%),
    linear-gradient(152deg,color-mix(in srgb,currentColor 14%,transparent) 0%,
                           color-mix(in srgb,currentColor 5%,transparent) 38%,
                           transparent 62%),
    rgba(255,255,255,.44);
  background-size:240% 100%,auto,auto;
  background-position:150% 0,0 0,0 0;
  -webkit-backdrop-filter:blur(18px) saturate(185%) brightness(1.05);
  backdrop-filter:blur(18px) saturate(185%) brightness(1.05);
  border-color:transparent;
  transform:translateY(-6px);
  /* The drop shadow carries the hue too. A neutral shadow under a tinted slab is the tell that the
     colour is painted on rather than in the material. */
  box-shadow:0 26px 50px -30px color-mix(in srgb,currentColor 38%,rgba(13,15,18,.42)),
             0 6px 16px -10px color-mix(in srgb,currentColor 30%,transparent),
             inset 0 1px 0 rgba(255,255,255,.95),
             inset 0 -1px 0 rgba(255,255,255,.4);
  animation:hcSheen 1s var(--hbm-e) .08s both}
@keyframes hcSheen{from{background-position:150% 0,0 0,0 0}to{background-position:-50% 0,0 0,0 0}}
/* The rim. A gradient border, masked to the 1px frame only, so the top-left catches light and the
   bottom-right falls away — the cue your eye reads as curvature. */
.hc-col.hc-live::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  /* White at the very top-left (the highlight is light, not paint), then the verdict hue through
     the mid-tones where a curved edge would actually pick up the body colour, then away. */
  background:linear-gradient(135deg,rgba(255,255,255,.98),
             color-mix(in srgb,currentColor 55%,rgba(255,255,255,.22)) 38%,
             color-mix(in srgb,currentColor 22%,rgba(13,15,18,.07)) 74%,rgba(255,255,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .hc-col.hc-live{animation:none;background-position:-50% 0,0 0}
}
.hc-col.hc-live::before{transform:scaleX(1);opacity:1}
.hc-w{display:block;font-size:clamp(30px,3.1vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1;
  /* Full colour at rest (was .42). The four words ARE the product; at 42% the reserved verdict
     palette barely read and only the hovered card showed its real hue. Hover still announces
     itself through the glass panel, the gradient edge and the top rule — it never needed the
     words to start dim. */
  color:currentColor;opacity:1}
.hc-d{display:block;font-size:clamp(12.5px,1.02vw,14.5px);line-height:1.48;color:var(--hbm-mut);margin-top:15px}
.hc-col.hc-b{color:var(--hbm-buy)} .hc-col.hc-w2{color:var(--hbm-wait)}
.hc-col.hc-s{color:var(--hbm-skip)} .hc-col.hc-f{color:var(--hbm-fair)}
/* ── glass variants ───────────────────────────────────────────────────────
   Measured first: the hero ground is flat #f1f3f6 with grid lines at 4.3%, so a blurred card
   composites 8 levels off white — no tuning makes refraction visible against that. These are the
   three ways out, and only two of them are about the card at all. */
.hc-band{position:relative}
.hc-wash{display:none}

/* 1 · SOLID — no pretence of glass. The rim and the sheen still lift the live card. */
.hc-g-solid .hc-col.hc-live{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}

/* 2 · WASH — colour placed behind the band so there is something to bend. Four blurred fields in
   the verdict hues, one under each column, well below the text. */
.hc-g-wash .hc-wash{display:block;position:absolute;inset:-30px -10px;z-index:0;pointer-events:none;
  filter:blur(46px);opacity:.5}
.hc-g-wash .hc-wash i{position:absolute;top:12%;width:26%;height:74%;border-radius:50%}
.hc-g-wash .hc-wash i:nth-child(1){left:1%;background:var(--hbm-buy)}
.hc-g-wash .hc-wash i:nth-child(2){left:26%;background:var(--hbm-wait)}
.hc-g-wash .hc-wash i:nth-child(3){left:51%;background:var(--hbm-skip)}
.hc-g-wash .hc-wash i:nth-child(4){left:76%;background:var(--hbm-fair)}
.hc-g-wash .hc-col{position:relative;z-index:1}
.hc-g-wash .hc-col.hc-live{background:
  linear-gradient(118deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 66%),
  rgba(255,255,255,.62)}

/* 3 · DARK — the band on its own dark panel. Glass reads best over dark, which is why Apple shows
   it over photographs. Verdict hues are lightened with color-mix rather than new hex values, so
   the brand budget is untouched. */
.hc-g-dark{background:linear-gradient(168deg,#111a2b,#0b1220);border-radius:22px;
  padding:26px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.hc-g-dark .hc-col.hc-live{background:
  linear-gradient(118deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 66%),
  rgba(255,255,255,.11);
  box-shadow:0 26px 50px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.34),
             inset 0 -1px 0 rgba(255,255,255,.1)}
.hc-g-dark .hc-col.hc-live::after{background:linear-gradient(135deg,rgba(255,255,255,.7),
  rgba(255,255,255,.14) 44%,rgba(0,0,0,.22) 78%,rgba(255,255,255,.3))}
.hc-g-dark .hc-d{color:rgba(233,238,245,.62)}
.hc-g-dark .hc-col.hc-live .hc-d{color:rgba(233,238,245,.9)}
.hc-g-dark .hc-col.hc-b{color:color-mix(in srgb,var(--hbm-buy) 45%,#fff)}
.hc-g-dark .hc-col.hc-w2{color:color-mix(in srgb,var(--hbm-wait) 50%,#fff)}
.hc-g-dark .hc-col.hc-s{color:color-mix(in srgb,var(--hbm-skip) 50%,#fff)}
.hc-g-dark .hc-col.hc-f{color:color-mix(in srgb,var(--hbm-fair) 45%,#fff)}
.hc-sub{color:var(--hbm-ink);text-align:center;margin:34px auto 0;font-size:clamp(14.5px,1.2vw,17px);color:var(--hbm-mut);max-width:54ch}
/* At rest the search lives INSIDE the dark header, alongside the lockup and the platform marks —
   one bar, not two. Once pinned it moves out into its own frosted bar directly beneath, so the
   field gets room and the header keeps the identity. hc-searchout is applied by this hero only. */
.hc-searchout{opacity:0;pointer-events:none;transition:opacity .22s var(--hbm-e)}
.hc-searchin{transition:opacity .26s var(--hbm-e)}
/* Once the pill pins, the dark bar retires: it carries a wordmark and an install button, neither
   of which needs to hold 65px at the top of every screenful while a frozen search bar sits under
   it. The tab row slides up into the space and the pill follows — hence top:61px above, which is
   the tab row's height plus its border and a little air.

   These two classes are put ON the chrome elements by this hero and taken off again when it
   unmounts, rather than written as rules that name the site's own class names. Same effect, and
   it keeps the styling encapsulated — check:wi rejects an unscoped rule that reaches for a
   shared class, which is the right instinct: a rule like that silently restyles every page. */
/* Fallbacks are load-bearing, not tidiness. The tab row sits OUTSIDE .hcwrap, where --hc-pin and
   --hc-pillh are declared, so the bare vars do not resolve here — the calc() becomes invalid and
   `top` computes to `auto`, which silently means "do not stick at all". Measured that exact value
   before this line existed. The fallbacks must stay in step with the declarations above. */
.hc-tabs-up{top:calc(var(--hc-pin,65px) + var(--hc-pillh,59px))}
.hc-tabs-anim{transition:top .34s var(--hbm-e),background-color .3s var(--hbm-e)}
/* The tab row wears the same frost as the search bar above it. They pin together as one piece of
   chrome, so two different materials 60px apart read as a mistake. Same recipe deliberately:
   .74 white with blur(42px) — enough backdrop reaching the filter to carry colour, blurred past
   anything legible. Applied as a class by this hero, never as a rule naming the site's own
   selector, so no other page is touched. */
.hc-chrome-out{transform:translateY(-100%);opacity:0;pointer-events:none}
.hc-chrome-anim{transition:transform .34s var(--hbm-e),opacity .26s var(--hbm-e)}
.hc-tabs-glass{
  background:rgba(255,255,255,.74) !important;
  -webkit-backdrop-filter:blur(42px) saturate(190%) brightness(1.06);
  backdrop-filter:blur(42px) saturate(190%) brightness(1.06);
  border-bottom:1px solid rgba(13,15,18,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
@media (prefers-reduced-motion:reduce){
  .hc-tabs-anim{transition:none}
}
.hc-fine{display:flex;align-items:center;justify-content:center;gap:7px;margin:26px auto 0;
  font-size:12.5px;color:var(--hbm-mut);color:var(--hbm-cap)}
.hc-fine svg{flex:0 0 auto;color:var(--hbm-buy)}
.hc-fine a{color:var(--hbm-buy);text-decoration:none;font-weight:600}
.hc-fine a:hover{text-decoration:underline}
.hcw-wall{position:absolute;inset:0;z-index:0;padding:10px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(146px,1fr));grid-auto-rows:146px;gap:8px;
  align-content:start;pointer-events:none;overflow:hidden}
.hcw-t{border-radius:16px;overflow:hidden;position:relative;display:block}
.hcw-b{position:absolute;top:8px;left:8px;z-index:2;font-size:8.5px;font-weight:800;letter-spacing:.06em;
  padding:3px 7px;border-radius:999px;color:#fff;opacity:.92}
.hcw-BUY .hcw-b{background:var(--hbm-buy)}.hcw-WAIT .hcw-b{background:var(--hbm-wait)}
.hcw-SKIP .hcw-b{background:var(--hbm-skip)}.hcw-FAIR .hcw-b{background:var(--hbm-fair)}
.hcw-i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px}
.hcw-BUY .hcw-i{background:linear-gradient(158deg,#DCEFE4,#F4FBF7)}
.hcw-WAIT .hcw-i{background:linear-gradient(158deg,#FAEFD6,#FEFAF1)}
.hcw-SKIP .hcw-i{background:linear-gradient(158deg,#F8E1DF,#FDF5F4)}
.hcw-FAIR .hcw-i{background:linear-gradient(158deg,#E1EBF8,#F4F8FD)}
.hcw-NONE .hcw-i{background:linear-gradient(158deg,#EFF1F4,#F9FAFB)}
.hcw-i img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;
  /* photos only: the verdict wash and badge keep full colour, so saturation still means something */
  filter:saturate(.42) contrast(.94) opacity(.88)}
.hcw-big{grid-column:span 2;grid-row:span 2}
.hcw-skel{pointer-events:none}
.hcw-sk{border-radius:16px;height:146px;background:linear-gradient(158deg,#EEF1F5,#F8FAFC);
  animation:hcwPulse 1.6s ease-in-out infinite}
@keyframes hcwPulse{0%,100%{opacity:.6}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.hcw-sk{animation:none;opacity:.75}}

/* ── M2: the sentence with the marks set inside it ─────────────────────────────────────────── */
.hcw-live{font-size:clamp(14px,1.1vw,16.5px);line-height:2.5;color:var(--hbm-ink);font-weight:500;
  letter-spacing:-.008em;max-width:58ch;margin:0 auto;text-align:center}
.hcw-live .hc-tile{height:28px;min-width:34px;padding:0 8px;border-radius:8px;margin:0 3px;
  vertical-align:-8px;box-shadow:0 1px 2px rgba(13,15,18,.06)}
.hcw-live .hc-tile img{max-width:44px;transform:none}
.hc-t-amazon.hc-tile img{height:10px}.hc-t-walmart.hc-tile img{height:10px}
.hcw-live .hc-t-txt i{font-size:10.5px}
.hc-strip{text-align:center;margin-top:38px}
/* Inline with the marks now, not a heading above them — it reads as one sentence the logos finish. */
.hc-strip-l{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--hbm-ink);
  text-transform:uppercase;margin-right:4px;flex:0 0 auto}
/* One line. The 46ch cap broke it after "we get", which split the promise across the exact clause
   that carries it. No cap + nowrap holds it together; the phone rule below lets it wrap again, where
   one line would demand a 6px font. */
.hc-soon{font-size:clamp(12px,1.02vw,13px);color:var(--hbm-ink);margin:13px auto 0;
  max-width:none;white-space:nowrap;line-height:1.55}
/* Wordmark fallback for a seller whose mark-*.png is not in hero-assets yet. Sized to sit on the
   same baseline as the real marks so a mixed row still reads as one strip. */
.hc-t-txt i{font-style:normal;font-weight:800;font-size:12.5px;letter-spacing:-.01em;
  white-space:nowrap;color:var(--hbm-ink)}
/* Brand colours for the marks we do not have artwork for yet, so a mixed row still reads as a row
   of logos. These are the retailers' own hues — replaced automatically the moment a real
   mark-*.png lands, since the text branch only renders when the image 404s. */
.hc-t-wayfair.hc-t-txt i{color:#7B189F}
.hc-t-bh.hc-t-txt i{color:#111111}
.hc-t-chewy.hc-t-txt i{color:#1C49C2}
.hc-logos{display:flex;gap:clamp(5px,.5vw,8px);justify-content:center;align-items:center;flex-wrap:wrap}
.hc-tile{height:clamp(42px,3.3vw,52px);min-width:clamp(46px,3.7vw,58px);padding:0 clamp(7px,.8vw,12px);border-radius:13px;background:#fff;
  border:1px solid var(--hbm-hair);display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(13,15,18,.05)}
.hc-tile img{max-width:clamp(66px,6vw,92px);width:auto;object-fit:contain;display:block;
  /* the per-mark heights below are the 1636px values; scale them together rather than
     restating thirteen numbers per breakpoint. */
  transform:scale(clamp(.78,.055vw + .78,1));transform-origin:center}
/* Per-mark heights, solved from each logo's measured ink fraction and aspect so all thirteen
   carry similar weight. A shared cap cannot: Target is 76% ink at 1:1, Nordstrom 40% at 8:1. */
.hc-t-adidas img{height:19px}.hc-t-amazon img{height:14px}.hc-t-bestbuy img{height:17px}
.hc-t-homedepot img{height:20px}.hc-t-kohls img{height:14px}.hc-t-lowes img{height:15px}
.hc-t-newegg img{height:18px}.hc-t-nike img{height:18px}.hc-t-nordstrom img{height:11.5px}
.hc-t-samsung img{height:14px}.hc-t-target img{height:25px}.hc-t-walmart img{height:14px}
.hc-t-woot img{height:14px}
.hc-t-wayfair img{height:13px}.hc-t-bh img{height:26px}.hc-t-chewy img{height:15px}
/* Inside a disc the wide wordmarks need their own heights again: the chord, not the tile, is the
   limit, and each mark's ink fraction differs. Target and Home Depot are square so they can grow. */
.hcwrap .hcw-live .hc-t-amazon img{height:9px}
.hcwrap .hcw-live .hc-t-walmart img{height:9px}
.hcwrap .hcw-live .hc-t-target img{height:24px}
.hcwrap .hcw-live .hc-t-bestbuy img{height:15px}
.hcwrap .hcw-live .hc-t-homedepot img{height:24px}
.hcwrap .hcw-live .hc-t-lowes img{height:11px}
.hcwrap .hcw-live .hc-t-wayfair img{height:9px}
.hcwrap .hcw-live .hc-t-bh img{height:26px}
.hcwrap .hcw-live .hc-t-chewy img{height:11px}
.hc-more{font-size:13px;font-weight:600;color:var(--hbm-cap);margin-left:6px}
@media (max-width:1100px){
  .hc-h1{font-size:44px}.hc-w{font-size:36px}
  .hc-band{grid-template-columns:repeat(2,1fr);max-width:720px}
  .hc-nsearch{max-width:none}
}
/* Below ~680px one line would need a ~6px font, so the promise wraps again — and wraps on a
   sensible break rather than mid-clause, which is what the old 46ch cap got wrong. */
@media (max-width:680px){
  .hc-soon{white-space:normal;max-width:34ch;font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){.hc-col,.hc-col::before,.hc-w{transition:none}}
.hbm-field{display:flex;align-items:center;gap:8px;width:100%;max-width:680px;margin-top:14px;padding:5px 5px 5px 18px;
  background:#fff;border:1px solid var(--hbm-hair);border-radius:980px;
  box-shadow:0 14px 34px -22px rgba(13,15,18,.3);
  opacity:0;animation:hbmUp .8s var(--hbm-e) 1.05s both}
.hbm-field input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--hbm-ink);
  font-family:inherit;font-size:16px;letter-spacing:-.022em;padding:11px 0}
.hbm-field input::placeholder{color:var(--hbm-mut)}
.hbm-err{margin:8px 0 0;font-size:13px;color:var(--hbm-skip)}
.hbm-go{flex:0 0 auto;padding:11px 22px;border:0;border-radius:980px;background:var(--hbm-buy);
  color:#fff;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:-.014em;cursor:pointer;
  white-space:nowrap}
.hbm-go:hover{background:var(--hbm-buy-h)} .hbm-go:active{background:var(--hbm-buy-a)}
/* Store strip sits tight under the search — one left-column group, not a floating footer. */
.hbm-strip{margin-top:16px;opacity:0;animation:hbmUp .7s var(--hbm-e) 1.3s both}
.hbm-strip-l{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--hbm-cap)}
.hbm-logos{display:flex;align-items:center;gap:4px;margin-top:6px;flex-wrap:wrap}
.hbm-logo{position:relative;width:56px;height:48px;flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;overflow:visible;background:transparent;border:0;box-shadow:none}
.hbm-logo:empty{border:1px dashed var(--hbm-hair);border-radius:8px}
.hbm-logo img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;display:block;
  background:transparent}
.hbm-more{flex:0 0 auto;margin-left:4px;font-size:12px;font-weight:600;letter-spacing:-.01em;
  line-height:1.25;color:var(--hbm-cap);white-space:nowrap}

/* Phone column — top-aligned with the headline; hangs into the install band below. */
.hbm-devcell{position:relative;z-index:1;height:300px;margin:0 auto}
.hbm-dev{position:absolute;left:50%;top:0;width:402px;height:874px;margin-left:-201px;z-index:3;
  transform-origin:top center;border-radius:54px;background:#0d0f12;padding:11px;
  filter:drop-shadow(0 36px 52px rgba(13,25,20,.3));
  opacity:0;animation:hbmPhone 1s var(--hbm-e) 1.15s both}
.hbm-scr{width:100%;height:100%;border-radius:44px;background:#fff;overflow:hidden;
  padding:58px 18px 14px;box-sizing:border-box}

/* Install band — full-width under the hero, clear of the phone (no overlap). */
.hbm-plat{position:relative;z-index:2;padding:20px var(--hbm-gut) 0;
  opacity:0;animation:hbmUp .7s var(--hbm-e) 1.4s both}
.hbm-plat-l{text-align:center;font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--hbm-cap)}
.hbm-plat-c{display:flex;justify-content:center;margin-top:10px}
.hbm-panel{display:flex;align-items:stretch;gap:22px;padding:14px 22px;
  background:#fff;border:1px solid var(--hbm-hair);border-radius:18px;
  box-shadow:0 10px 26px -20px rgba(13,15,18,.4)}
.hbm-zone{display:flex;flex-direction:column;justify-content:center;gap:9px}
.hbm-zone-h{font-size:14px;font-weight:700;letter-spacing:-.018em;color:var(--hbm-ink);white-space:nowrap}
.hbm-zrow{display:flex;align-items:center;gap:8px}
.hbm-vdiv{flex:0 0 auto;width:1px;background:var(--hbm-div)}
.hbm-ppill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 7px;background:#fff;
  border:1px solid var(--hbm-hair);border-radius:980px;font-size:13px;font-weight:700;
  letter-spacing:-.016em;color:var(--hbm-ink);text-decoration:none;white-space:nowrap;
  box-shadow:0 1px 2px rgba(13,15,18,.05)}
.hbm-picon{width:26px;height:26px;flex:0 0 auto;border-radius:8px;border:1px solid #eceef2;
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  position:relative;background:#fff}
.hbm-picon:empty{border-style:dashed}
.hbm-picon img{width:100%;height:100%;object-fit:contain;display:block}
.hbm-pnote{font-size:12px;line-height:1.35;color:var(--hbm-cap);white-space:nowrap}
.hbm-fine{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;
  font-size:13px;line-height:1.4;color:var(--hbm-cap)}
.hbm-fine svg{flex:0 0 auto}
.hbm-fine a{color:var(--hbm-buy);text-decoration:none}

/* 4 ── price band */
.hbm-band{position:relative;z-index:1;height:56px}
.hbm-band svg{display:block;width:100%;height:100%}
.hbm-band-fill{opacity:0;animation:hbmFade 1s ease-out 1.9s both}
.hbm-band-line{stroke-dasharray:2600;stroke-dashoffset:2600;
  animation:hbmDraw 2s cubic-bezier(.3,.7,.2,1) 2s both}
.hbm-band-dots{opacity:0;animation:hbmFade .6s ease-out 3.8s both}

/* Stage wraps hero + platform + band so the drifting chart stays behind them only. */
.hbm-stage{position:relative;overflow:hidden}
/* ambient background — a 32s drift, two tiles phase-offset by 16s. No fill on the infinite
   animation (invariant 1). */
.hbm-bg{position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:0;animation:hbmFade 1.4s ease-out .2s both}
.hbm-bg svg{position:absolute;top:0;width:100%;height:100%;display:block}
.hbm-bg-a{left:0;animation:hbmDrift 32s linear infinite}
.hbm-bg-b{left:100%;animation:hbmDrift 32s linear -16s infinite}
.hbm-left,.hbm-devcell{position:relative;z-index:1}

/* easing tokens — values from the source file */
.hbm{--hbm-e:cubic-bezier(.2,.8,.2,1);--hbm-eh:cubic-bezier(.16,.9,.2,1);--hbm-es:cubic-bezier(.2,1.5,.4,1)}
@keyframes hbmFade{from{opacity:0}to{opacity:1}}
@keyframes hbmRise{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes hbmUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes hbmPhone{from{opacity:0;transform:translateY(56px) rotate(0deg) scale(.48)}
  to{opacity:1;transform:translateY(0) rotate(-6deg) scale(.52)}}
@keyframes hbmSweep{
  0%,100%{transform:translateY(0);box-shadow:0 1px 2px rgba(13,15,18,.12)}
  6%{transform:translateY(-4px);box-shadow:0 10px 20px -10px rgba(13,15,18,.45)}
  18%{transform:translateY(-4px);box-shadow:0 10px 20px -10px rgba(13,15,18,.45)}
  24%{transform:translateY(0);box-shadow:0 1px 2px rgba(13,15,18,.12)}}
@keyframes hbmDrift{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes hbmStamp{
  0%{opacity:0;transform:translateY(-42px) rotate(-26deg) scale(1.5)}
  55%{opacity:1;transform:translateY(0) rotate(-2deg) scale(.94)}
  74%{transform:translateY(-6px) rotate(-7deg) scale(1.02)}
  100%{opacity:1;transform:translateY(0) rotate(-5deg) scale(1)}}
@keyframes hbmDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .hbm *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* ── inside the phone ──────────────────────────────────────────────────────────────────────── */
.hbm-ptop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hbm-pbrand{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;
  letter-spacing:-.02em}
.hbm-pdisc{width:22px;height:22px;flex:0 0 auto;border-radius:50%;background:var(--hbm-disc);
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;
  letter-spacing:-.03em;line-height:1}
.hbm-pdisc i{font-style:normal;color:#fff}
.hbm-pdisc em{font-style:normal;color:var(--hbm-mint)}
.hbm-chip{flex:0 0 auto;padding:4px 10px;border-radius:980px;background:#e8f0fb;color:#0a4a8c;
  font-size:10px;font-weight:700}
.hbm-prod{display:flex;align-items:center;gap:11px;margin-top:18px}
.hbm-tile{width:52px;height:52px;flex:0 0 auto;border-radius:12px;background:#eaf1fb;overflow:hidden}
.hbm-prod>span:last-child{flex:1;min-width:0}
.hbm-seller{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;color:#6e6e73}
.hbm-pname{display:block;margin-top:3px;font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
/* Invariant 2: the price sits ABOVE the chart band and never on it. */
.hbm-pprice{margin-top:16px;font-size:38px;font-weight:700;letter-spacing:-.036em;line-height:1;
  color:var(--hbm-price)}
.hbm-pusual{margin-top:7px;font-size:12px;color:#6e6e73}
.hbm-pusual strong{color:#0b57d0;font-weight:700}
.hbm-clab{margin-top:16px;font-size:10px;font-weight:700;letter-spacing:.08em;color:#6e6e73}
.hbm-chart{margin-top:7px;display:block}
.hbm-chart svg{display:block;width:100%;height:auto}
.hbm-chart polyline.hbm-l{stroke-dasharray:520;stroke-dashoffset:520;
  animation:hbmDraw 1.5s cubic-bezier(.3,.7,.2,1) 1.5s both}
/* Invariant 6: the fade rides a wrapper, not the dot — an animation ending at opacity:1 would
   override the element's own lower opacity attribute. */
.hbm-dot{opacity:0;animation:hbmFade .5s ease-out 2.9s both}
.hbm-res{position:relative;margin-top:16px;padding:15px 16px;border-radius:16px;
  background:var(--hbm-buy);color:#fff}
.hbm-res b{display:block;font-size:15px;font-weight:400;letter-spacing:-.014em;opacity:.94}
.hbm-res>span:not(.hbm-stamp){display:block;margin-top:3px;font-size:13px;opacity:.82}
/* The stamp is pinned to the card's BOTTOM-RIGHT. */
.hbm-stamp{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border:3px solid #0b7a45;border-radius:10px;background:#fff;
  box-shadow:0 6px 16px -8px rgba(9,11,14,.5);font-size:18px;font-weight:700;letter-spacing:.09em;
  color:#0b5c36;transform-origin:60% 70%;opacity:0;
  animation:hbmStamp 1s var(--hbm-es) 3.1s both}
.hbm-stamp svg{flex:0 0 auto}
.hbm-cmp{margin-top:0}
.hbm-cmp>.hbm-clab{margin-top:16px}
.hbm-crow{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:11px;
  margin-top:6px;background:#f6f7f9}
.hbm-crow.hbm-low{margin-top:8px;background:#eaf4ee}
.hbm-cdot{position:relative;width:22px;height:22px;flex:0 0 auto;border-radius:6px;
  background:#fff;border:1px solid #eceef2;display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;font-size:10px;font-weight:700;color:#9aa3ae;line-height:1}
.hbm-cdot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
  background:#fff}
.hbm-cname{flex:1;min-width:0;font-size:13px;font-weight:500;letter-spacing:-.012em;color:var(--hbm-ink)}
.hbm-cname-low{font-weight:700;color:#0b3d22}
.hbm-clow{flex:0 0 auto;padding:2px 8px;border-radius:5px;background:#cdeee0;
  font-size:9px;font-weight:700;letter-spacing:.07em;color:#0b5c36}
.hbm-cprice{flex:0 0 auto;font-size:14px;font-weight:700;letter-spacing:-.014em;color:var(--hbm-ink)}
.hbm-cprice-low{color:#0b3d22}
.hbm-leg-wrap{margin-top:16px;padding-top:13px;border-top:1px solid #eceef2}
.hbm-leg-wrap>.hbm-clab{margin-top:0}
.hbm-leg{display:flex;gap:5px;margin-top:9px}
.hbm-leg span{flex:1;text-align:center;padding:7px 0;border-radius:980px;font-size:11px;
  font-weight:700;letter-spacing:.05em;color:#fff}
.hbm-pfoot{margin-top:13px;font-size:11px;line-height:1.4;color:#6e6e73}

/* ── Facet rail + chip toolbar (owner 2026-09-07, from the Best Buy reference) ──────────────────
   The rail and the chips are ONE filter state: a chip and its checkbox toggle the same value, so
   the two can never disagree about what is selected.
   Below 1540px the rail cannot sit beside the card without pushing it under its own 1180px
   minimum (244 rail + 28 gap + 80 body padding = 1532), so it collapses behind the Filters button
   instead of squeezing the card. Squeezing is what broke this layout before. */
/* The page column is --page-max 1280px and the card's own minimum is 1180, so a 244px rail beside
   it needs 1452 — it can never fit inside the column. The live shelf therefore breaks out to its
   own wider max and centres itself; below that width the rail is collapsed anyway. Background is
   left to the page: the preview paints --dg-page because it IS the page, an embedded section is a
   guest on one. */
.dg-embed{max-width:1680px;margin:0 auto;padding:0 var(--page-gutter,40px);background:none;min-height:0}
/* Embedded under the shelf tabs, this title is the third "Verified deals" in 70px — the tab that
   is already active says it, and a heading repeating the current tab is noise. Hidden rather than
   removed from the markup: on the standalone grid (?design=dealsgrid) it is the page's only title
   and its h1, so deleting it would leave that page headless and unlabelled for a screen reader. */
.dg-embed .dg-h1{display:none}
.dg-toolbar{display:flex;align-items:center;gap:14px;margin:12px 0 18px;padding-bottom:16px;
  border-bottom:1px solid var(--dg-page-hair)}
.dg-toolbar-idle{min-height:0}
.dg-chips{flex:1;min-width:0;display:flex;align-items:center;gap:8px;overflow-x:auto;
  scrollbar-width:none;padding:2px 0}
.dg-chips::-webkit-scrollbar{display:none}
.dg-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;
  border:1px solid var(--dg-page-hair);border-radius:980px;background:var(--dg-card);
  color:var(--dg-ink);font-family:inherit;font-size:14px;font-weight:600;letter-spacing:-.012em;
  white-space:nowrap;cursor:pointer}
.dg-chip i{font-style:normal;font-weight:600;color:var(--dg-muted);font-variant-numeric:tabular-nums}
.dg-chip.on,.dg-chip-active{background:var(--dg-ink);border-color:var(--dg-ink);color:#fff;
  padding-right:10px;gap:6px}
.dg-chip.on i{color:#fff;opacity:.7}
.dg-chip-l{min-width:0}
.dg-chip-x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;font-size:16px;font-weight:500;line-height:1;opacity:.78;
  background:rgba(255,255,255,.14)}
.dg-chip-active:hover .dg-chip-x{opacity:1;background:rgba(255,255,255,.22)}
.dg-clear{flex:0 0 auto;border:0;background:none;padding:0 4px;font-family:inherit;font-size:14px;
  font-weight:600;color:var(--dg-link);cursor:pointer}
.dg-filtbtn{display:none}
/* Sort stays pinned right on its own margin rather than depending on the chips row to push it.
   The chips row is empty until something is filtered, so relying on it to fill the space put the
   sort group wherever the filter state happened to leave it. */
.dg-toolbar .dg-sortwrap{margin-left:auto}
.dg-sortwrap{flex:0 0 auto;display:flex;align-items:center;gap:9px}
.dg-sortlbl{font-size:14px;letter-spacing:-.012em;color:var(--dg-muted)}
.dg-sort{height:36px;padding:0 11px;border:1px solid var(--dg-page-hair);border-radius:10px;
  background:var(--dg-card);color:var(--dg-ink);font-family:inherit;font-size:14px;font-weight:600;
  letter-spacing:-.012em;cursor:pointer}
.dg-layout{display:grid;grid-template-columns:244px minmax(0,1fr);gap:28px;align-items:start}
.dg-rail{position:sticky;top:18px;max-height:calc(100vh - 36px);overflow-y:auto;
  padding:4px 18px 12px;border-radius:18px;background:var(--dg-card);
  border:1px solid var(--dg-hairline)}
.dg-fgroup{padding:14px 0;border-bottom:1px solid var(--dg-hairline)}
.dg-fgroup:last-child{border-bottom:0}
.dg-fh{margin:0 0 9px;font-size:14px;font-weight:700;letter-spacing:-.014em;color:var(--dg-ink)}
.dg-fopt{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer}
.dg-fbox{width:16px;height:16px;flex:0 0 auto;margin:0;accent-color:var(--dg-review);cursor:pointer}
.dg-fname{flex:1;min-width:0;font-size:13.5px;letter-spacing:-.012em;color:var(--dg-ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-fn{flex:0 0 auto;font-size:12px;color:var(--dg-muted);font-variant-numeric:tabular-nums}
.dg-fopt.dg-zero .dg-fname,.dg-fopt.dg-zero .dg-fn{opacity:.45}
.dg-fmore{margin-top:7px;padding:0;border:0;background:none;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:-.012em;color:var(--dg-link);cursor:pointer}
.dg-fmore-sec{padding:4px 0 2px}
.dg-fmore-toggle{display:block;width:100%;margin:6px 0 4px;padding:8px 0;border:0;border-top:1px solid var(--dg-hairline);
  background:none;text-align:left;font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:-.014em;
  color:var(--dg-link);cursor:pointer}
.dg-fmore-toggle:hover{color:var(--dg-ink)}
.dg-empty{padding:26px;border-radius:18px;background:var(--dg-card);border:1px solid var(--dg-hairline);
  font-size:15px;line-height:1.5;color:var(--dg-ink-soft)}
.dg-pager{margin:22px 0 4px;text-align:center}
.dg-pager-range{font-size:15px;font-weight:700;letter-spacing:-.014em;color:var(--dg-ink)}
.dg-pager-nav{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:12px;flex-wrap:wrap}
.dg-pager-n{appearance:none;border:0;background:transparent;min-width:36px;height:36px;padding:0 8px;
  border-radius:10px;font-family:inherit;font-size:16px;font-weight:700;letter-spacing:-.02em;
  color:var(--dg-ink);cursor:pointer}
.dg-pager-n.on{background:var(--dg-link);color:#fff}
.dg-pager-n:hover:not(.on){background:rgba(11,87,208,.08)}
.dg-pager-gap{min-width:28px;text-align:center;font-size:16px;font-weight:700;color:var(--dg-ink);
  line-height:36px;user-select:none}
.dg-pager-next,.dg-pager-prev{appearance:none;width:40px;height:40px;margin-left:4px;border-radius:50%;
  border:1px solid var(--dg-page-hair);background:var(--dg-card);color:var(--dg-ink);
  font-size:22px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  padding:0 0 2px}
.dg-pager-prev{margin-left:0;margin-right:4px}
.dg-pager-next:hover,.dg-pager-prev:hover{border-color:var(--dg-ink)}
.dg-pager-next:disabled,.dg-pager-prev:disabled{opacity:.35;cursor:default}
@media (max-width:1540px){
  .dg-layout{grid-template-columns:minmax(0,1fr)}
  .dg-rail{display:none;position:static;max-height:none;overflow:visible;margin-bottom:20px}
  .dg-rail.on{display:block}
  .dg-rail.on .dg-fwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:0 26px;align-items:start}
  .dg-rail.on .dg-fgroup:last-child{border-bottom:1px solid var(--dg-hairline)}
  .dg-filtbtn{display:inline-flex}
}
/* TARGET Verified cards — Claude Deals Demo + Wi? Collision (owner: image is the contract).
   Vertical stacked cards. Mint #23D17E ONLY on BUY stamps (+ LOWEST). Orange prices.
   Store + checked pills OVERLAY the photo. Save pills STACK beside the price.
   Collision accent is the short .dg-cw-bar beside the warn copy ONLY — never a full-height
   SVG stroke (those mis-drew as vertical red rules through the card; removed 2026-09-10). */
.dg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:22px;margin-top:22px;
  align-items:stretch}
/* Embedded, the facet rail moves off the left and becomes a panel the toolbar's Filters button
   opens above the grid. Reuses the rule set the narrow breakpoint already had for this — same
   behaviour, applied at every width rather than only under 1180px, so there is one filter
   presentation on this surface instead of two.
   The 244px the rail was holding goes to the cards: 1476 wide with 22px gaps fits four at ~352px,
   and auto-fit means it falls back to three, then two, as the window narrows. */
/* The Filters button was built for the narrow breakpoint only — .dg-filtbtn is display:none by
   default and only turns on under 1540px, because a wide window always showed the rail. Embedded,
   the rail is never on the left at any width, so the button has to be present at every width or
   the filters become unreachable. */
.dg-embed .dg-filtbtn{display:inline-flex}
.dg-embed .dg-layout{grid-template-columns:minmax(0,1fr)}
.dg-embed .dg-rail{display:none;position:static;max-height:none;overflow:visible;margin-bottom:20px}
.dg-embed .dg-rail.on{display:block}
.dg-embed .dg-rail.on .dg-fwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:0 26px;align-items:start}
.dg-embed .dg-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.dg-foot{margin-top:26px;padding:16px 0 30px;border-top:1px solid var(--dg-page-hair);
  display:flex;gap:26px;font-size:13px;color:var(--dg-muted);flex-wrap:wrap}

/* Card shell — uniform height language; verdict tint on the top edge (not a side border). */
.dg-card{box-sizing:border-box;display:flex;flex-direction:column;min-width:0;position:relative;
  border-radius:24px;background:#fff;overflow:hidden;padding:0 0 14px;
  box-shadow:0 2px 4px rgba(13,15,18,.04),0 18px 40px -24px rgba(13,15,18,.45);
  border:1px solid rgba(11,122,69,.10)}
/* The coloured top edge is gone (owner 2026-09-16). It said the same thing as the corner fold
   directly beneath it — the verdict — so the card opened with the same statement twice, and the
   4px band read as chrome rather than as meaning. The fold keeps the job: it cannot be mistaken
   for a control, it survives at thumbnail size, and it is the only place the verdict is stated. */
.dg-card.dg-noreview{}

/* Photo stage — white so product photos read cleanly */
.dg-shot{position:relative;height:210px;margin:0;background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.dg-shot::after{content:'';position:absolute;left:0;right:0;bottom:0;height:56px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
.dg-shot img{max-width:78%;max-height:78%;object-fit:contain;display:block;position:relative;z-index:1}

/* Store + checked overlays */
.dg-storepill{position:absolute;top:12px;left:12px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px 5px 6px;border-radius:980px;background:rgba(255,255,255,.92);
  border:1px solid rgba(13,15,18,.08);box-shadow:0 1px 3px rgba(13,15,18,.08);
  font-size:12px;font-weight:700;letter-spacing:-.014em;color:var(--dg-ink);max-width:58%;
  backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px)}
.dg-storepill img{width:18px;height:18px;border-radius:4px;object-fit:contain;display:block;flex:0 0 auto}
.dg-storepill b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
/* Discount owns photo top-right (owner 2026-09-09); checked-ago sits under the CTA. */
.dg-pct{position:absolute;top:12px;right:12px;z-index:3;padding:5px 10px;border-radius:980px;
  background:#0f9f5c;color:#fff;font-size:12px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;
  box-shadow:0 2px 8px rgba(9,80,48,.35)}
.dg-checked-line{display:block;margin-top:8px;text-align:center;font-size:11.5px;font-weight:600;
  letter-spacing:-.01em;color:var(--dg-muted);font-variant-numeric:tabular-nums}

/* Verdict stamps — filled pills, white type (owner palette 2026-09-09). */
.dg-stamp{position:absolute;left:14px;bottom:18px;z-index:4;display:inline-flex;align-items:center;
  gap:6px;padding:8px 18px;border-radius:980px;background:#2e663a;color:#fff;border:0;
  font-size:15px;font-weight:800;letter-spacing:.1em;transform:rotate(-12deg);
  box-shadow:0 6px 16px -6px rgba(46,102,58,.55)}
.dg-stamp span{color:#fff;font-size:15px;font-weight:800;letter-spacing:.1em}
.dg-stamp.dg-v-wait{background:#9a6627;box-shadow:0 6px 16px -6px rgba(154,102,39,.55)}
.dg-stamp.dg-v-skip{background:#a82e2e;box-shadow:0 6px 16px -6px rgba(168,46,46,.55)}
.dg-stamp.dg-v-fair{background:#2555a9;box-shadow:0 6px 16px -6px rgba(37,85,169,.55)}

/* Body pad under photo */
.dg-body{padding:4px 16px 0;display:flex;flex-direction:column;flex:1;min-width:0}

.dg-title{margin:4px 0 0;font-size:17px;font-weight:800;letter-spacing:-.024em;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--dg-ink)}

/* Price + stacked save pills */
.dg-pricerow{display:flex;align-items:flex-start;gap:10px;margin-top:12px}
.dg-now{font-size:36px;font-weight:800;letter-spacing:-.045em;line-height:.92;
  color:var(--dg-price);flex:0 0 auto}/* was a hard-coded #FF6A00, which meant --dg-price did not
  actually control the price it is named for; pointed at the token so the two cannot drift again */
.dg-now.dg-flat{color:var(--dg-ink)}
.dg-savecol{display:flex;flex-direction:column;gap:5px;padding-top:4px;min-width:0}

/* ── Face-only Verified card (owner 2026-09-15) ─────────────────────────────────────────────
   The face carries one judgment: fold, price truth, year-low proof, one CTA. Review and compare
   moved into .dg-dossier. Rules live here, after the originals they replace, so order decides. */

/* Dissolve: the studio wall is built from the page's own greens and fades to card white before
   the bottom, so there is no hard line where the photo stops. The old wall was neutral-cool on a
   mint page, which is what made every shot look borrowed from a different site. */
.dg-card .dg-shot{background:radial-gradient(112% 92% at 50% 0%, #f4f9f6 0%, #e6f0ea 46%, #fff 100%)}
/* The fade sits ABOVE the photo, so the shot dissolves into the card instead of ending on a line. */
.dg-card .dg-shot:after{content:"";position:absolute;inset:auto 0 0 0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,transparent,#fff 92%);z-index:3}
/* multiply is what removes the white box. Amazon product JPEGs ship on a white ground, and white
   multiplied by the wall IS the wall — so the box disappears and the product keeps its own tone.
   The site already does exactly this on coupon, deck and brand-card art; this is that technique,
   not a new one. `isolation` keeps the blend inside the shot so it cannot reach the page. */
.dg-card .dg-shot{isolation:isolate}
.dg-card .dg-shot img{position:relative;z-index:2;mix-blend-mode:multiply}

/* the verdict as a folded corner */
.dg-stamp{display:none}
.dg-fold{position:absolute;top:0;right:0;width:82px;height:82px;z-index:3;overflow:hidden;
  border-radius:0 var(--dg-card-r,16px) 0 0;pointer-events:none}
.dg-fold span{position:absolute;top:14px;right:-25px;width:115px;text-align:center;
  transform:rotate(45deg);background:var(--dg-buy);color:#fff;font-size:11px;font-weight:800;
  letter-spacing:.14em;padding:4px 0;box-shadow:0 2px 6px rgba(11,60,36,.34)}
.dg-fold.dg-v-wait span{background:#8a6304}
.dg-fold.dg-v-skip span{background:var(--dg-skip)}
.dg-fold.dg-v-fair span{background:var(--dg-fair)}

/* one savings cue, subordinate to the price rather than a second badge rack */
.dg-was{font-size:13px;color:var(--dg-muted);text-decoration-line:line-through;
  text-decoration-thickness:1.5px;text-underline-offset:2px;font-variant-numeric:tabular-nums;
  align-self:baseline;white-space:nowrap}
.dg-was-over{text-decoration:none;color:var(--dg-skip);font-weight:650}

/* the secondary entry — quieter than the CTA above it */
/* Blue, not green (owner 2026-09-15). The card now has exactly one green — the verdict fold and
   the CTA that follows from it, both meaning "we vetted this, go buy it". A green secondary button
   read as a second, weaker BUY. Blue is already this card's non-committal hue (--dg-link on the
   compare rows, --dg-fair on the FAIR verdict), so it says "look at the evidence" without
   inventing a hex: the tint and border are alpha derivations of --dg-link itself. */
.dg-file{display:inline-flex;align-items:center;gap:6px;background:rgba(11,87,208,.07);
  border:1px solid rgba(11,87,208,.28);color:var(--dg-link);font-family:inherit;font-size:11.5px;
  font-weight:700;padding:5px 10px;border-radius:8px;cursor:pointer;transition:background .15s}
.dg-file:hover{background:rgba(11,87,208,.14)}
.dg-file svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.dg-actions{display:flex;flex-direction:column;gap:9px}
.dg-actions .dg-checked-line{order:3}

/* the case file */
.dg-scrim{position:fixed;inset:0;background:rgba(11,25,18,.44);-webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);z-index:80}
.dg-dossier{position:fixed;z-index:81;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(580px,calc(100vw - 32px));max-height:min(88vh,780px);overflow:auto;
  background:var(--dg-card);border:1px solid var(--dg-hairline);border-radius:18px;
  box-shadow:0 40px 90px -30px rgba(11,60,36,.55);text-align:left;
  animation:dgFileIn .22s cubic-bezier(.16,1,.3,1) both}
@keyframes dgFileIn{from{opacity:0;transform:translate(-50%,-47%) scale(.985)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.dg-dtab{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:13px 18px;border-bottom:1px solid var(--dg-hairline);
  background:var(--dg-row-quiet);border-radius:17px 17px 0 0}
.dg-dtab b{font-size:10.5px;font-weight:700;letter-spacing:.15em;color:var(--dg-muted)}
.dg-dx{background:none;border:0;cursor:pointer;color:var(--dg-muted);font-size:16px;
  line-height:1;font-family:inherit;padding:4px}
.dg-dbody{padding:18px}
/* inside the file the two blocks stop being cramped columns and get room */
.dg-dbody .dg-review{margin-top:0;padding-top:0;border-top:0;min-height:0}
.dg-dbody .dg-rows{min-height:0}
.dg-dclose{margin-top:16px;width:100%;background:var(--dg-cta);color:#06231a;border:0;
  border-radius:12px;padding:12px 10px;font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer}
@media (prefers-reduced-motion:reduce){.dg-dossier{animation:none}}

/* The off% badge is gone from the face, matching the mock. Three reasons and none of them is
   taste: it lived top-right, which is now the fold; moved bottom-left it sat under the shot's
   white fade and rendered washed out; and it says what the proof line already says one row
   below — "33% under usual". Two statements of one number is what the save-pill pair was, and
   this is the same fault wearing a different shape. The percentage is NOT lost. */
.dg-card .dg-pct{display:none}

/* CTA trimmed: 46px was the tallest thing in the action block and, now that the face carries less,
   it read as the loudest element on a card whose job is the verdict and the price. 40px keeps it
   the primary action and stays above the 44px touch floor via the row's own padding — the button
   is not a phone tap target here, this grid is desktop-only above DG_MIN_VW. */
/* Flat, 30px, and off the gradient (owner 2026-09-15, treatment B).
   The gradient was not only a style — it was an accessibility defect. A gradient gives the label a
   RANGE of backdrops instead of one, and the label is centred, so it sat on the MIDDLE stop. White
   measured 3.26:1 there on BUY (1.93 at the top of the pill); only the bottom third ever passed.
   Every verdict was affected, not just BUY — WAIT 2.78, SKIP 3.48, FAIR 4.10, all under the 4.5
   that 12.5px body text needs. Flattening each to the stop it already ended on fixes all four
   (5.41 / 5.00 / 6.50 / 6.82) and invents no new hex: these are the gradients' own end colours.
   Green also ties the CTA to the verdict fold above it, so the card has ONE green meaning
   "we vetted this" rather than a mint button competing with a green ribbon. */
.dg-card .dg-go{height:30px;font-size:12.5px;letter-spacing:-.01em;border-radius:9px;
  background:var(--dg-buy);box-shadow:none}
.dg-card .dg-go:hover{background:var(--dg-buy-dark)}
.dg-card .dg-go.dg-v-wait{background:#a35f0b}
.dg-card .dg-go.dg-v-skip{background:var(--dg-skip)}
.dg-card .dg-go.dg-v-fair{background:var(--dg-fair)}
/* the gloss existed to give the gradient a highlight; on a flat fill it is just a lighter band */
.dg-card .dg-go::before{display:none}

/* CTA narrowed to its label (owner 2026-09-15). width:100% was the whole problem: at four columns
   the pill spanned the card, so the loudest, widest element was the button rather than the price
   or the verdict. Sized to content it reads as an action, not a banner — and the width it gives up
   is not wasted, because the secondary entry moves up onto the same row instead of stranding a
   half-empty line beneath it. checked-ago keeps its own full-width line via flex-basis:100%, so
   the vertical rhythm of the action block is unchanged. */
.dg-card .dg-actions{flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
.dg-card .dg-go{width:auto;flex:0 0 auto;padding:0 15px}
.dg-card .dg-checked-line{flex:1 0 100%;margin-top:2px}

/* Four in a line (owner 2026-09-15). auto-fit with minmax(340px,1fr) let the count float with
   the viewport — 3 at one width, 5 at another — so the shelf never looked like a fixed set. A
   literal 4 columns holds the rhythm; the existing narrow breakpoints below still collapse it,
   so this only pins the wide case. minmax(0,1fr) not 1fr: a grid item's default min-width is
   auto, so a long unbroken title would otherwise push its column past its share. */
.dg .dg-grid,.dg-embed .dg-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){.dg .dg-grid,.dg-embed .dg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.dg .dg-grid,.dg-embed .dg-grid{grid-template-columns:minmax(0,1fr)}}
.dg-pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:8px;
  font-size:11px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;width:fit-content}
.dg-pill-drop{background:#d9e8fb;color:#0a3f80}
.dg-pill-save{background:#cdeedc;color:#0a3d28}
.dg-pill-none{background:#e8ece8;color:#5b6560}
.dg-pill-over{background:#fbe9ec;color:#8f1b2b}
.dg-trend{margin-top:7px;min-height:1.35em;font-size:12.5px;line-height:1.35;color:var(--dg-muted);letter-spacing:-.01em}

/* HIGH → USUAL → LOW spectrum */
.dg-spec{margin-top:14px}
.dg-speclabs{display:flex;justify-content:space-between;gap:6px;margin-bottom:7px}
.dg-speclabs span{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dg-muted)}
.dg-speclabs b{font-weight:800;color:var(--dg-ink);letter-spacing:-.02em;text-transform:none;font-size:11px;margin-left:3px}
.dg-track{position:relative;height:10px;border-radius:980px;
  /* Apple.com sk tokens: orange #f56300 → fill-3 → blue #0071e3 (no green). */
  background:linear-gradient(90deg,#f56300 0%,#fae9e1 48%,#f5f5f7 52%,#0071e3 100%)}
.dg-dot{position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;margin-left:-9px;
  border-radius:50%;background:var(--dg-ink);border:3px solid #fff;
  box-shadow:0 2px 8px rgba(13,15,18,.32)}
.dg-dot.dg-v-buy{background:#23D17E}
.dg-dot.dg-v-wait{background:#F0A323}
.dg-dot.dg-v-skip{background:#E23B3B}
.dg-dot.dg-v-fair{background:#2f7fd6}

/* PRODUCT REVIEW scale + COMPARE PRICES rows (design_handoff_v2). */
.dg-seclabel{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--dg-muted);text-transform:uppercase}
.dg-review{margin-top:14px;padding-top:12px;border-top:1px solid var(--dg-hairline);min-height:72px}
.dg-scale{display:flex;align-items:flex-end;gap:4px;margin-top:9px}
.dg-step{flex:1;text-align:center;padding:7px 0;border-radius:9px;font-size:11px;font-weight:700;letter-spacing:.05em}
.dg-step-poor{background:#fbe9ec;color:#8f1b2b}
.dg-step-ok{background:#fdf1e2;color:#7d4a08}
.dg-step-good{background:#e6f4ec;color:#0b5c36}
.dg-step-great{background:#cdeee0;color:#08492a}
.dg-step.on{flex:1.4;padding:10px 0;border-radius:11px;background:#0f766e;
  box-shadow:0 6px 14px -6px rgba(15,118,110,.7)}
.dg-step.on .dg-stepw{display:block;font-size:14px;font-weight:700;letter-spacing:.07em;color:#fff}
.dg-step.on .dg-stepsub{display:block;margin-top:1px;font-size:10px;font-weight:600;letter-spacing:.04em;color:#b9e6e0}
.dg-scale-skel{opacity:.55}

.dg-compare{margin-top:14px;padding-top:12px;border-top:1px solid var(--dg-hairline)}
.dg-rows{display:flex;flex-direction:column;gap:5px;margin-top:9px;min-height:110px}
.dg-crow{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:10px;
  background:var(--dg-row-quiet);text-decoration:none;color:inherit}
.dg-crow.on{background:var(--dg-buy-tint)}
.dg-rlogo{position:relative;width:30px;height:21px;flex:0 0 auto;border-radius:5px;
  background:#fff;border:1px solid var(--dg-hairline);overflow:hidden}
.dg-rlogo img{width:100%;height:100%;object-fit:contain;display:block}
.dg-rname{flex:1;min-width:56px}
.dg-rname b{display:block;font-size:13px;font-weight:600;letter-spacing:-.012em}
.dg-lowest{display:block;margin-top:2px;width:max-content;padding:1px 6px;border-radius:5px;
  background:#cdeee0;font-size:9px;font-weight:700;letter-spacing:.07em;color:#0b5c36}
.dg-rprice{flex:0 0 auto;text-align:right}
.dg-rprice b{display:block;font-size:14px;font-weight:700;letter-spacing:-.014em}
.dg-rdelta{display:block;font-size:10px;color:var(--dg-muted);white-space:nowrap}

/* Actions: centered CTA; checked-ago under it. Bell removed — BUY/FAIR open the deal;
   WAIT/SKIP already use the CTA as Notify. */
.dg-actions{display:flex;flex-direction:column;align-items:stretch;gap:0;margin-top:16px;padding:0 16px}
.dg-card > .dg-actions{/* when actions sit outside body */}
.dg-body + .dg-actions,.dg-body .dg-actions{padding:0}
.dg-go{width:100%;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 16px;border:0;border-radius:980px;color:#fff;font-family:inherit;
  font-size:14px;font-weight:800;letter-spacing:-.016em;white-space:nowrap;cursor:pointer;text-decoration:none;
  position:relative;overflow:hidden;text-align:center;
  box-shadow:0 10px 22px -10px rgba(11,122,69,.55),inset 0 1px 0 rgba(255,255,255,.35);
  background:linear-gradient(180deg,#2ad39a 0%,#1aa35c 48%,#0b7a45 100%)}
.dg-go::before{content:'';position:absolute;left:8%;right:8%;top:2px;height:42%;border-radius:980px;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0));pointer-events:none}
.dg-go.dg-v-wait{background:linear-gradient(180deg,#f0b04a 0%,#d9891a 48%,#a35f0b 100%);
  box-shadow:0 10px 22px -10px rgba(163,95,11,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.dg-go.dg-v-skip{background:linear-gradient(180deg,#f07a7a 0%,#e85a5a 48%,#b3262b 100%);
  box-shadow:0 10px 22px -10px rgba(179,38,43,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.dg-go.dg-v-fair{background:linear-gradient(180deg,#5aa0e8 0%,#2f7fd6 48%,#0059b3 100%);
  box-shadow:0 10px 22px -10px rgba(0,89,179,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.dg-go:hover{filter:brightness(1.04)}
.dg a:focus-visible,.dg button:focus-visible{outline:2px solid var(--dg-link);outline-offset:2px;border-radius:6px}

/* Month-strip helpers remain for unit tests / dgMonthStrip; the TARGET card uses .dg-spec instead. */
.dg-mstrip{display:flex;gap:6px;align-items:stretch;height:38px}
.dg-mcell{flex:1 1 0;border-radius:9px}
.dg-m0{background:#f7dde1} .dg-m1{background:#f7edd9} .dg-m2{background:#eef2e2} .dg-m3{background:#e2f0e6}
.dg-mnow{box-shadow:inset 0 0 0 2px var(--dg-buy)}
.dg-mlabs{display:flex;gap:6px;margin-top:6px}
.dg-mlabs span{flex:1 1 0;text-align:center;font-size:11px;font-weight:600;color:var(--dg-muted)}
.dg a:focus-visible,.dg button:focus-visible{outline:2px solid var(--dg-link);outline-offset:2px;border-radius:6px}
@keyframes dg-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.dg-sk{background:#eef0f4;border-radius:8px;animation:dg-pulse 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.dg-sk{animation:none}}
/* ── Listing card 40b (design_handoff_listing_40b) ──────────────────────────────────────────────
   Four-column horizontal listing: photo · identity+price+graph · review · compare+notify.
   Tokens are NAMESPACED --lc-* on purpose: --buy, --price, --link, --muted and --hairline all
   already exist in this file with different values, and the handoff's palette is its own system.
   Redefining the shared names would have restyled the whole site to match one card. */
.lc-scope{
  --lc-ink:#0d0f12; --lc-ink-soft:#3f4349; --lc-muted:#4a4f56; --lc-hairline:#eceef2;
  --lc-card:#ffffff; --lc-row-quiet:#fafbfc; --lc-page:#dfe3e8;
  --lc-buy:#0b7a45; --lc-buy-dark:#0b5c36; --lc-buy-tint:#eaf4ee; --lc-buy-badge:#cdeee0;
  --lc-wait:#a35f0b; --lc-wait-dark:#7d4a08; --lc-wait-tint:#fdf1e2;
  --lc-skip:#b3262b; --lc-skip-dark:#8f1b2b; --lc-skip-tint:#fbe9ec;
  --lc-fair:#0059b3; --lc-fair-dark:#0a3f80; --lc-fair-tint:#e8f0fb;
  --lc-price:#b3610a; --lc-link:#0b57d0; --lc-review:#0f766e; --lc-review-soft:#b9e6e0;
  --lc-poor-bg:#fbe9ec; --lc-poor-fg:#8f1b2b; --lc-ok-bg:#fdf1e2; --lc-ok-fg:#7d4a08;
  --lc-good-bg:#e6f4ec; --lc-good-fg:#0b5c36; --lc-blue-bg:#e8f0fb; --lc-blue-fg:#0a3f80;
  --lc-chart-line:#d1263a; --lc-chart-low:#0b7a45;
  --lc-pill-hi-bg:#fbeff1; --lc-pill-hi-fg:#a81b2c;
  --lc-r-card:22px; --lc-r-block:12px; --lc-r-row:10px; --lc-r-pill:980px;
  --lc-font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  --lc-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.lc-card{box-sizing:border-box;width:1240px;display:grid;
  grid-template-columns:436px 276px 254px minmax(274px,1fr);
  border-radius:var(--lc-r-card);background:var(--lc-card);overflow:hidden;
  box-shadow:0 1px 2px rgba(13,15,18,.06),0 16px 36px -24px rgba(13,15,18,.4);
  font-family:var(--lc-font);color:var(--lc-ink)}
/* No review yet: drop column 3 rather than leave an empty scale (README §4). */
.lc-card.lc-noreview{grid-template-columns:436px 276px minmax(274px,1fr)}
.lc-card *,.lc-card *::before,.lc-card *::after{box-sizing:border-box}
.lc-col{box-sizing:border-box;padding:15px 16px;border-left:1px solid var(--lc-hairline);min-width:0}
.lc-photo{position:relative;background:var(--lc-card);border-right:1px solid var(--lc-hairline)}
.lc-photo img{width:100%;height:100%;object-fit:contain;display:block}
.lc-head{display:flex;align-items:center;gap:9px}
.lc-logo{position:relative;width:34px;height:24px;flex:0 0 auto;border-radius:6px;
  background:var(--lc-card);border:1px solid var(--lc-hairline);overflow:hidden}
.lc-logo img{width:100%;height:100%;object-fit:contain;display:block}
.lc-headmeta{flex:1;min-width:0}
.lc-seller{display:block;font-size:14px;font-weight:700;letter-spacing:-.016em}
.lc-seen{display:flex;align-items:center;gap:4px;margin-top:2px}
.lc-seen span{font-size:11px;color:var(--lc-muted);white-space:nowrap}
.lc-title{margin-top:12px;font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.26}
.lc-pricerow{display:flex;align-items:center;gap:12px;margin-top:12px}
.lc-now{font-size:46px;font-weight:700;letter-spacing:-.04em;line-height:.94;color:var(--lc-price)}
/* SKIP: orange means money was saved and on SKIP none was (README §4). */
.lc-now.lc-now-flat{color:var(--lc-ink)}
.lc-stamp{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:6px 13px;
  border:2.5px solid var(--lc-buy);border-radius:10px;background:var(--lc-buy-tint);transform:rotate(-5deg)}
.lc-stamp span{font-size:17px;font-weight:700;letter-spacing:.09em;color:var(--lc-buy-dark)}
.lc-stamp.lc-v-wait{border-color:var(--lc-wait);background:var(--lc-wait-tint)}
.lc-stamp.lc-v-wait span{color:var(--lc-wait-dark)}
.lc-stamp.lc-v-skip{border-color:var(--lc-skip);background:var(--lc-skip-tint)}
.lc-stamp.lc-v-skip span{color:var(--lc-skip-dark)}
.lc-stamp.lc-v-fair{border-color:var(--lc-fair);background:var(--lc-fair-tint)}
.lc-stamp.lc-v-fair span{color:var(--lc-fair-dark)}
.lc-sum{margin-top:9px;font-size:13px;letter-spacing:-.01em;line-height:1.4;color:var(--lc-muted)}
.lc-sum strong{color:var(--lc-link)}
.lc-chart{position:relative;height:64px;margin-top:11px;border-radius:11px;overflow:hidden}
.lc-chart svg{position:absolute;inset:0;width:100%;height:100%}
.lc-cpill{position:absolute;transform:translateY(-50%);padding:3px 7px;border-radius:6px;
  font-family:var(--lc-mono);font-size:10px;font-weight:700;white-space:nowrap}
.lc-cpill-hi{left:7px;background:var(--lc-pill-hi-bg);color:var(--lc-pill-hi-fg)}
.lc-cpill-lo{right:7px;background:var(--lc-buy-tint);color:var(--lc-buy-dark)}
.lc-label{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--lc-muted)}
.lc-scale{display:flex;align-items:flex-end;gap:5px;margin-top:9px}
.lc-step{flex:1;text-align:center;padding:7px 0;border-radius:9px;font-size:11px;font-weight:700;letter-spacing:.06em}
.lc-step-poor{background:var(--lc-poor-bg);color:var(--lc-poor-fg)}
.lc-step-ok{background:var(--lc-ok-bg);color:var(--lc-ok-fg)}
.lc-step-good{background:var(--lc-good-bg);color:var(--lc-good-fg)}
.lc-step-great{background:var(--lc-good-bg);color:var(--lc-good-fg)}
/* Teal, never green: green is a PRICE verdict, teal is product quality (README §3/§5). */
.lc-step.on{flex:1.4;padding:11px 0;border-radius:11px;background:var(--lc-review);
  box-shadow:0 6px 14px -6px rgba(15,118,110,.7)}
.lc-step.on .lc-stepw{display:block;font-size:15px;font-weight:700;letter-spacing:.07em;color:#fff}
.lc-step.on .lc-stepsub{display:block;margin-top:1px;font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--lc-review-soft)}
.lc-bottom{display:flex;align-items:center;gap:8px;margin-top:11px}
.lc-bottom span{flex:1;min-width:0;font-size:15px;font-weight:700;letter-spacing:-.016em;color:var(--lc-ink)}
.lc-facets{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.lc-facet{padding:4px 10px;border-radius:var(--lc-r-pill);font-size:11px;font-weight:700;white-space:nowrap}
.lc-f-good{background:var(--lc-good-bg);color:var(--lc-good-fg)}
.lc-f-blue{background:var(--lc-blue-bg);color:var(--lc-blue-fg)}
.lc-f-ok{background:var(--lc-ok-bg);color:var(--lc-ok-fg)}
.lc-f-poor{background:var(--lc-poor-bg);color:var(--lc-poor-fg)}
.lc-trade{margin-top:10px;padding-top:9px;border-top:1px solid var(--lc-hairline);
  font-size:12px;line-height:1.4;color:var(--lc-muted)}
.lc-trade strong{color:var(--lc-ink)}
.lc-rows{display:flex;flex-direction:column;gap:5px;margin-top:9px;min-height:150px}
.lc-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--lc-r-row);
  background:var(--lc-row-quiet);text-decoration:none;color:inherit}
.lc-row.on{background:var(--lc-buy-tint)}
.lc-rlogo{position:relative;width:30px;height:21px;flex:0 0 auto;border-radius:5px;
  background:var(--lc-card);border:1px solid var(--lc-hairline);overflow:hidden}
.lc-rlogo img{width:100%;height:100%;object-fit:contain;display:block}
.lc-rname{flex:1;min-width:58px}
.lc-rname b{display:block;font-size:13px;font-weight:600;letter-spacing:-.012em}
/* LOWEST stacked UNDER the name — inline squeezes long retailer names to a sliver (README §3). */
.lc-lowest{display:block;margin-top:2px;width:max-content;padding:1px 6px;border-radius:5px;
  background:var(--lc-buy-badge);font-size:9px;font-weight:700;letter-spacing:.07em;color:var(--lc-buy-dark)}
.lc-rprice{flex:0 0 auto;text-align:right}
.lc-rprice b{display:block;font-size:14px;font-weight:700;letter-spacing:-.014em}
.lc-rdelta{display:block;font-size:10px;color:var(--lc-muted);white-space:nowrap}
.lc-onlynote{margin:6px 0 0;font-size:10.5px;line-height:1.35;color:var(--lc-muted)}
.lc-simlink,.dg-simnote a{color:var(--ink2);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.dg-simnote{margin:8px 0 0;font-size:11px;line-height:1.4;color:var(--ink3)}
.prefix-tip{margin:8px 0 0;font-size:12px;line-height:1.4;color:var(--ink3);text-align:center}
.prefix-tip b{color:var(--ink2);font-weight:700}
.lc-only{flex:1;display:flex;align-items:center;padding:12px;border:1px dashed #d8dee6;
  border-radius:var(--lc-r-block);background:var(--lc-row-quiet);font-size:12px;line-height:1.45;color:var(--lc-muted)}
.lc-notifywrap{margin-top:11px}
.lc-notify{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:12px 14px;
  border:0;border-radius:var(--lc-r-block);background:var(--lc-buy);color:#fff;font-family:inherit;
  font-size:14px;font-weight:700;letter-spacing:-.014em;white-space:nowrap;cursor:pointer}
.lc-fine{margin-top:7px;text-align:center;font-size:11px;color:var(--lc-muted)}
/* Never the browser default ring (prompt). */
.lc-card a:focus-visible,.lc-card button:focus-visible{outline:2px solid var(--lc-link);outline-offset:2px;border-radius:6px}
/* Skeleton at the REAL column widths so the row does not reflow when data lands (README §4). */
@keyframes lc-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.lc-sk{background:#eef0f4;border-radius:8px;animation:lc-pulse 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.lc-sk{animation:none}}
.lc-sk-title{height:14px;margin-top:12px}
.lc-sk-title+.lc-sk-title{margin-top:6px;width:70%}
.lc-sk-price{height:44px;width:60%;margin-top:12px}
.lc-sk-line{height:11px;margin-top:9px}
.lc-sk-chart{height:64px;margin-top:11px;border-radius:11px}
.lc-sk-head{height:24px;width:60%}
.lc-sk-row{height:37px;border-radius:var(--lc-r-row)}
.lc-sk-btn{height:45px;border-radius:var(--lc-r-block);margin-top:11px}
  .lc-sk-photo{width:100%;height:100%;border-radius:0}
/* ── compact + fluid variant (owner 2026-09-07: "reduce the size and widen it to the right") ────
   Deviates from the handoff's fixed 1240px on purpose. Two changes, and only two:

   WIDEN — the card becomes fluid. The fixed columns stay exactly as measured (436/276/254) and
   column 4 is already minmax(274px,1fr), so ALL the extra width lands on the right, which is
   what "widen it to the right" means geometrically. The 274px floor is untouched: it is a
   minimum, and this only ever adds.

   REDUCE — the photo column is what drives the card's height, so it takes the biggest cut; type
   and padding come down with it in proportion rather than being nudged independently, which is
   how a scale drifts. The chart keeps its 24%/60% band, just at a shorter height.

   NOT touched: the 274px floor, the stamp geometry, the LOWEST pill stacking, the staggered
   chart pills, and every colour role. Those are the rules README §5 says break things. */
.lc-card.lc-fluid{width:100%;max-width:none}
.lc-card.lc-sm{grid-template-columns:300px 252px 232px minmax(274px,1fr)}
.lc-card.lc-sm.lc-noreview{grid-template-columns:300px 252px minmax(274px,1fr)}
.lc-card.lc-sm .lc-col{padding:12px 13px}
.lc-card.lc-sm .lc-title{font-size:14.5px;margin-top:9px}
.lc-card.lc-sm .lc-now{font-size:34px}
.lc-card.lc-sm .lc-pricerow{gap:9px;margin-top:9px}
.lc-card.lc-sm .lc-stamp{padding:5px 10px}
.lc-card.lc-sm .lc-stamp span{font-size:14px}
.lc-card.lc-sm .lc-sum{font-size:12px;margin-top:7px}
.lc-card.lc-sm .lc-chart{height:52px;margin-top:9px}
.lc-card.lc-sm .lc-scale{margin-top:7px}
.lc-card.lc-sm .lc-step{padding:6px 0;font-size:10.5px}
.lc-card.lc-sm .lc-step.on{padding:9px 0}
.lc-card.lc-sm .lc-step.on .lc-stepw{font-size:13px}
.lc-card.lc-sm .lc-bottom{margin-top:9px}
.lc-card.lc-sm .lc-bottom span{font-size:13.5px}
.lc-card.lc-sm .lc-facets{margin-top:8px}
.lc-card.lc-sm .lc-trade{margin-top:8px;padding-top:7px;font-size:11.5px}
.lc-card.lc-sm .lc-rows{min-height:112px;margin-top:7px}
.lc-card.lc-sm .lc-row{padding:6px 8px}
.lc-card.lc-sm .lc-notifywrap{margin-top:9px}
.lc-card.lc-sm .lc-notify{padding:10px 12px;font-size:13px}
.lc-card.lc-sm .lc-fine{margin-top:6px}
/* UNIFORM ROWS (owner 2026-09-07: "all the listings in the same size"). The handoff's card is
   content-driven, which is right for one card and wrong for a shelf: real titles run 60-200
   characters and the take's lines vary, so every row landed on a different height and the shelf
   read as ragged. A fixed height plus line clamps is what makes a LIST of them scannable.

   280px is derived, not picked: 24 padding + 34 header + 54 title (3 lines at 14.5/1.26) + 40
   price + 34 summary + 52 chart + the margins between them. Change any of those and re-derive it,
   or the last element clips.

   The clamps are on the two fields that actually vary — the title and the take's lines. Nothing
   that carries a number is ever clamped: the price, the summary and the chart pills are the
   claim, and a clipped figure is a wrong figure. */
.lc-card.lc-sm{height:280px}
.lc-card.lc-sm .lc-col{overflow:hidden}
.lc-card.lc-sm .lc-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lc-card.lc-sm .lc-bottom span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc-card.lc-sm .lc-trade{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.lc-card.lc-sm .lc-photo img{height:100%}
/* ── 3-up stacked variant (owner 2026-09-07: "try adding 3 products in a line") ──────────────────
   The 40b card is a 1240px horizontal ROW; three in a line gives each ~460px, and 436+276+254+274
   cannot sit side by side in that. So the four columns STACK inside the card — photo, then
   identity/price/graph, then review, then compare. Same markup, same order, same tokens: only the
   grid axis and the dividers change, which is why the argument the columns make (price first,
   then product, then where to buy) survives the reflow.

   The handoff says the stacked design "does not exist" — this is it, built to the same rules.
   Uniform height, and the same clamp discipline as the row: clamp what varies, never a figure. */
.lc-card.lc-stack{display:flex;flex-direction:column;grid-template-columns:none;width:auto;height:100%}
/* The photo is the only fixed band; everything below flows, and the compare block is pinned to the
   bottom with margin-top:auto so the notify button lines up across the row however long a title
   or a take runs. That is what makes three cards read as one row instead of three heights. */
/* Don't chase the slack — remove it. Equal-height rows mean the TALLEST card sets the height, so
   the fix is to stop one card being much taller: a fixed photo band, clamps on the two fields that
   vary (title, take), and a compare block whose two states occupy the SAME space, so a card with
   three sellers and a card with none are the same height. With the outlier gone the slack is a few
   pixels and there is nothing to hide. Letting the photo grow instead produced a 600px image. */
.lc-card.lc-stack .lc-photo{flex:0 0 auto;height:162px;border-right:0;border-bottom:1px solid var(--lc-hairline)}
.lc-card.lc-stack .lc-photo img{height:100%;object-fit:contain}
.lc-card.lc-stack .lc-col{flex:0 0 auto;border-left:0;border-top:1px solid var(--lc-hairline);padding:11px 13px}
.lc-card.lc-stack .lc-col:first-of-type{border-top:0}
.lc-card.lc-stack .lc-col:last-of-type{margin-top:auto}
.lc-card.lc-stack .lc-title{-webkit-line-clamp:2;font-size:14px;margin-top:8px}
.lc-card.lc-stack .lc-now{font-size:28px}
.lc-card.lc-stack .lc-pricerow{margin-top:8px}
.lc-card.lc-stack .lc-sum{margin-top:6px;font-size:11.5px}
.lc-card.lc-stack .lc-chart{height:42px;margin-top:8px}
.lc-card.lc-stack .lc-scale{margin-top:6px}
.lc-card.lc-stack .lc-step{font-size:10px;padding:5px 0}
.lc-card.lc-stack .lc-step.on{padding:8px 0}
.lc-card.lc-stack .lc-step.on .lc-stepw{font-size:12px}
.lc-card.lc-stack .lc-bottom{margin-top:8px}
.lc-card.lc-stack .lc-bottom span{font-size:12.5px;-webkit-line-clamp:1}
.lc-card.lc-stack .lc-trade{-webkit-line-clamp:2;margin-top:7px;padding-top:6px;font-size:11px}
/* Both states, one height: three seller rows or the dashed panel. */
.lc-card.lc-stack .lc-rows{min-height:104px;margin-top:6px}
/* Centred, not top-aligned: the panel is a full-height block, so left-top text leaves a void
   under it that reads as missing content rather than as an answer. */
.lc-card.lc-stack .lc-only{min-height:104px;align-items:center}
.lc-card.lc-stack .lc-row{padding:5px 7px}
.lc-card.lc-stack .lc-only{padding:9px 10px;font-size:11px;line-height:1.4}
.lc-card.lc-stack .lc-notifywrap{margin-top:8px}
.lc-card.lc-stack .lc-notify{padding:9px 12px;font-size:12.5px}
/* ── DENSE variant (owner 2026-09-07: "~1000 products in Verified deals, keep them small") ──────
   1000 × the 285px showcase card is a 285,000px page. At that count the card stops being a
   showcase and becomes a LIST ROW, so this keeps the four-column horizontal structure and the
   order that carries the argument — photo · price+graph · review · compare — and takes ~55% of
   the height out of it.

   The 274px floor on column 4 is KEPT at full size. It is the one measurement README §1 says is
   load-bearing (16 icon + 8 gap + 173 nowrap label + 28 padding + 32 column padding), and below it
   the bell silently collapses to 0px while every overflow check still reports clean. Everything
   else scales; that does not.

   Minimum card width is therefore 160+248+212+274 = 894px. auto-fit at that minimum gives one row
   per line on a laptop and two on a wide display, without ever squeezing the card to force a
   second in. */
/* Height is derived, not guessed: 18 padding + 30 header + 31 title (2 lines at 12.5/1.24) + 30
   price + 14 summary + 30 chart + the margins between them = ~182. At 158 the chart was clipped
   in half, which is worse than no chart — a cut graph still reads as data.

   The SLACK goes to the review column, not to compare. Compare is a fixed 320px: it only needs to
   hold a seller row and the notify button, and stretching it to 790px on a wide screen left a
   button the width of a table while the review text stayed clamped. 320 clears README §1's 274
   floor with room, so the bell can never collapse. */
/* Every column FIXED and the card a fixed 940px (160+248+212+320). Giving the slack to compare
   produced a notify button the width of a table; giving it to the review stretched POOR/OK/GOOD/
   GREAT across 700px. There is no column that improves with 500 spare pixels, so the card simply
   does not take them — it sits at its width and the shelf packs two per line when the viewport can
   hold them. 320 for compare clears README §1's 274 floor, so the bell can never collapse.

   190 is derived: 18 padding + 30 header + 31 title (2 lines at 12.5/1.24) + 30 price + 14 summary
   + 30 chart + margins. At 158 the chart was cut in half, and a clipped graph still reads as data. */
/* TWO PER ROW at 1512 (owner 2026-09-07). Available = 1512 - 64 page padding - 10 gap = 1438, so
   each card is 715px: 120 photo + 210 identity + 165 review + 220 compare.

   220 is BELOW README §1's 274 floor, and that is safe here only because the floor was derived for
   the full-size button: 16 icon + 8 gap + 173px nowrap label at 14px + 28 padding + 32 column
   padding = 274. This variant's button is 12px, so the label measures ~148 and the same arithmetic
   gives 13 + 8 + 148 + 24 + 22 = 215. The rule the floor exists to protect — the bell collapsing
   to 0px while every overflow check still reports clean — is held by flex:0 0 auto on the icon,
   which is asserted by a test. Verified after the change: bell 13px, scrollWidth === clientWidth. */
/* 710, not 715, and the 5px matters. The page wrapper is max-width 1720 with 40px gutters, so at
   a 1512 viewport the content box is 1432px. Two 715px cards plus the 10px gap need 1440 — eight
   pixels over, and the grid silently fell back to one per row. Two 710s need 1430 and fit.
   (Written without the wrapper's class name on purpose: check-wi scans this stylesheet for rules
   and reads a bare selector in a comment as a real one — the self-matching trap again.)
   Columns: 120 photo + 208 identity + 162 review + 220 compare = 710. */
.lc-card.lc-dense{grid-template-columns:120px 208px 162px 220px;width:710px;height:198px}
.lc-card.lc-dense.lc-noreview{grid-template-columns:120px 370px 220px}
/* Bottom padding matters here: the chart is the last element in column 2, and with none it sat
   flush on the card edge so the gradient read as clipped rather than as the end of the graph. */
.lc-card.lc-dense .lc-col{padding:9px 11px 11px;overflow:hidden}
.lc-card.lc-dense .lc-photo img{padding:6px}
.lc-card.lc-dense .lc-head{gap:7px}
.lc-card.lc-dense .lc-logo{width:26px;height:19px}
.lc-card.lc-dense .lc-seller{font-size:12px}
.lc-card.lc-dense .lc-seen span{font-size:10px}
.lc-card.lc-dense .lc-title{margin-top:5px;font-size:12.5px;line-height:1.24;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc-card.lc-dense .lc-pricerow{margin-top:5px;gap:7px}
.lc-card.lc-dense .lc-now{font-size:25px}
.lc-card.lc-dense .lc-stamp{padding:3px 8px;border-width:2px}
.lc-card.lc-dense .lc-stamp span{font-size:12px}
.lc-card.lc-dense .lc-stamp svg{width:11px;height:11px}
.lc-card.lc-dense .lc-sum{margin-top:4px;font-size:10.5px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.lc-card.lc-dense .lc-chart{height:30px;margin-top:5px;border-radius:8px}
.lc-card.lc-dense .lc-cpill{font-size:8.5px;padding:2px 5px}
.lc-card.lc-dense .lc-label{font-size:9.5px}
.lc-card.lc-dense .lc-scale{margin-top:5px;gap:3px}
.lc-card.lc-dense .lc-step{padding:3px 0;font-size:8.5px;border-radius:6px}
.lc-card.lc-dense .lc-step.on{padding:5px 0;border-radius:7px}
.lc-card.lc-dense .lc-step.on .lc-stepw{font-size:10.5px}
.lc-card.lc-dense .lc-step.on .lc-stepsub{font-size:8px}
.lc-card.lc-dense .lc-bottom{margin-top:6px;gap:6px}
.lc-card.lc-dense .lc-bottom svg{width:13px;height:13px}
.lc-card.lc-dense .lc-bottom span{font-size:11.5px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.lc-card.lc-dense .lc-trade{margin-top:5px;padding-top:4px;font-size:10px;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc-card.lc-dense .lc-rows{min-height:0;margin-top:5px;gap:3px}
.lc-card.lc-dense .lc-row{padding:4px 7px;gap:7px;border-radius:8px}
.lc-card.lc-dense .lc-rlogo{width:24px;height:17px}
.lc-card.lc-dense .lc-rname b{font-size:11.5px}
.lc-card.lc-dense .lc-lowest{font-size:8px;padding:0 5px}
.lc-card.lc-dense .lc-rprice b{font-size:12px}
.lc-card.lc-dense .lc-rdelta{font-size:9px}
.lc-card.lc-dense .lc-only{padding:7px 9px;font-size:10px;line-height:1.35;align-items:center}
.lc-card.lc-dense .lc-notifywrap{margin-top:6px}
.lc-card.lc-dense .lc-notify{padding:7px 12px;font-size:12px;border-radius:9px}
.lc-card.lc-dense .lc-notify svg{width:13px;height:13px}
.lc-card.lc-dense .lc-fine{margin-top:4px;font-size:9.5px}
/* Pack as many 940px cards per line as fit — one on a laptop, two on a wide display — and never
   stretch them to fill the row. */

/* Narrower columns need a tighter scale — set here rather than by nudging each rule, so the
   proportions stay a scale instead of drifting into a pile of one-off sizes. */
.lc-card.lc-dense .lc-now{font-size:22px}
.lc-card.lc-dense .lc-title{font-size:12px;-webkit-line-clamp:2}
.lc-card.lc-dense .lc-sum{font-size:10px}
.lc-card.lc-dense .lc-stamp span{font-size:11px}
.lc-card.lc-dense .lc-step{font-size:8px}
.lc-card.lc-dense .lc-step.on .lc-stepw{font-size:10px}
.lc-card.lc-dense .lc-step.on .lc-stepsub{font-size:7.5px}
.lc-card.lc-dense .lc-bottom span{font-size:11px}
.lc-card.lc-dense .lc-trade{font-size:9.5px;-webkit-line-clamp:2}
.lc-card.lc-dense .lc-rname b{font-size:11px}
.lc-card.lc-dense .lc-rprice b{font-size:11.5px}
.lc-card.lc-dense .lc-onlynote{font-size:9.5px}
.lc-card.lc-dense .lc-notify{padding:7px 10px;font-size:12px}
.lc-card.lc-dense .lc-fine{font-size:9px}
.lc-shelf.lc-shelf-2{display:grid;grid-template-columns:repeat(auto-fit,710px);
  gap:10px;align-items:stretch;justify-content:start}
.lc-shelf.lc-shelf-3>*{min-width:0}
/* Fluid rows fill the shelf rather than sitting in a 1240px column. */
.lc-shelf.lc-shelf-fluid{align-items:stretch}
/* One full-page-width row per product — the shelf container under ?card=40b. */
.lc-shelf{display:flex;flex-direction:column;gap:16px;align-items:flex-start;overflow-x:auto}