/* SlickRish design system — shared by the homepage and every server-rendered page.
   Brand: black + volt lime, pulled from the @slick_rish TikTok frames.
   One family (Archivo), its width axis doing the work: expanded black caps for
   headlines, prices and rank numbers; normal width for reading.
   Pink appears only where money is saved. */

:root {
  --black: #0A0A0A;
  --raised: #151515;
  --raised-2: #1E1E1E;
  --line: #2A2A2A;
  --line-2: #3A3A3A;
  --text: #F4F4EF;
  --muted: #A6A6A0;
  /* 5.26:1 on --raised, 5.70:1 on --black, 4.80:1 on --raised-2 (WCAG AA for small text). */
  --faint: #8A8A83;
  --volt: #D4FC3C;
  --volt-deep: #B8E01F;
  --volt-ink: #0A0A0A;
  --pink: #FF3D81;
  --white: #FFFFFF;

  --font: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --wide: 125%;
  --semi-wide: 112%;

  --r-lg: 22px;
  --r: 16px;
  --r-sm: 10px;
  --pill: 999px;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --head-h: 64px;

  --t-hero: clamp(2.6rem, 1.2rem + 6.4vw, 6.4rem);
  --t-h1: clamp(1.75rem, 1.2rem + 3.8vw, 4.2rem);
  --t-h2: clamp(1.45rem, 1.05rem + 1.6vw, 2.2rem);
  --t-h3: 1.08rem;
  --t-body: 1.0625rem;
  --t-small: .875rem;
  --t-tiny: .78rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 12px); }
body {
  margin: 0; background: var(--black); color: var(--text);
  font-family: var(--font); font-size: var(--t-body); line-height: 1.6;
  font-stretch: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--text); text-decoration-color: var(--volt); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--volt); }
:focus-visible { outline: 3px solid var(--volt); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--volt); color: var(--volt-ink); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--volt); color: var(--volt-ink); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 800; }
.skip:focus { left: 8px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.page { padding-top: 40px; padding-bottom: 72px; }

/* ---- Type ---- */
.display, h1, .h1 {
  font-stretch: var(--wide); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.01em; line-height: .92; margin: 0;
  /* A long single word ("ELECTRONICS") must never push the page sideways. */
  overflow-wrap: anywhere;
}
h1 { font-size: var(--t-h1); }
/* Very narrow phones: a touch less width so one long word still fits the line. */
@media (max-width: 380px) { .display, h1, .h1 { font-stretch: var(--semi-wide); } }
h2 { font-stretch: var(--semi-wide); font-weight: 850; font-size: var(--t-h2); line-height: 1.05; letter-spacing: -.01em; margin: 56px 0 16px; }
h3 { font-stretch: var(--semi-wide); font-weight: 800; font-size: var(--t-h3); line-height: 1.25; margin: 28px 0 8px; }
p { margin: 0 0 16px; }
.lede { font-size: 1.14rem; color: var(--text); max-width: 64ch; }
.muted { color: var(--muted); }
.fine { font-size: var(--t-small); color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* Long reading (guides, about): narrower measure, calmer rhythm. */
.prose { max-width: 68ch; }
.prose p, .prose li { color: #E4E4DE; line-height: 1.7; }
.prose h2 { margin-top: 52px; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 18px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--volt); font-weight: 800; }
.prose blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--volt); color: var(--text); font-weight: 600; }
.prose code { background: var(--raised-2); padding: 1px 6px; border-radius: 6px; font-size: .92em; }

/* ---- Header ---- */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(10,10,10,.92); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; gap: 20px; height: var(--head-h); }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: 26px; width: auto; }
.head-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.head-nav::-webkit-scrollbar { display: none; }
.head-nav a { white-space: nowrap; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem; padding: 8px 12px; border-radius: var(--pill); }
.head-nav a:hover, .head-nav a[aria-current="page"] { color: var(--text); background: var(--raised-2); }
.head-nav a.nav-event { color: var(--volt-ink); background: var(--volt); font-weight: 800; }
.head-nav a.nav-event:hover { background: var(--white); color: var(--volt-ink); }
.ev-short { display: none; }
/* The full nav (five links, plus the homepage's Sign up toggle) needs about
   900px. Below that only the sale pill stays, so nothing is cut off with no
   sign it scrolls. Between 901 and 1060px the links sit a little tighter. */
@media (min-width: 901px) and (max-width: 1060px) { .head-row { gap: 14px; } .head-nav { gap: 2px; } .head-nav a { padding: 8px 9px; } }
@media (max-width: 900px) {
  .head-nav a:not(.nav-event):not(.nav-keep) { display: none; }
}
@media (max-width: 760px) {
  .head-row { gap: 12px; }
  .logo img { height: 22px; }
  .ev-long { display: none; } .ev-short { display: inline; }
}
@media (max-width: 380px) { .head-row { gap: 10px; } .logo img { height: 19px; } .head-nav a.nav-event { padding: 6px 9px; font-size: .8rem; } }

/* ---- Hero (server pages) ---- */
.hero { border-bottom: 1px solid var(--line); padding: 40px 0 44px; }
.hero h1 { font-size: var(--t-h1); max-width: 18ch; }
.hero .eyebrow { color: var(--volt); font-weight: 800; font-size: .95rem; margin: 0 0 14px; }
.hero-lede { font-size: 1.16rem; max-width: 60ch; margin: 20px 0 0; color: #E4E4DE; }
.hero-meta { margin: 14px 0 0; color: var(--muted); font-size: var(--t-small); }
/* The volt slab. Kept for reference only: the owner rule (lime only for the
   buy button, Details underline, nav sale pill, chips/tags and focus) means
   no page renders it. Heroes are plain dark. */
.hero--volt { background: var(--volt); color: var(--volt-ink); border-bottom: 0; }
.hero--volt h1, .hero--volt .hero-lede, .hero--volt .hero-meta, .hero--volt a { color: var(--volt-ink); }
.hero--volt .eyebrow { color: var(--volt-ink); }
.hero--volt a { text-decoration-color: var(--volt-ink); }
.hero--volt .crumbs a, .hero--volt .crumbs li { color: rgba(10,10,10,.72); }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 18px; font-size: var(--t-small); color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--volt); }
/* On the lime slab, the focus ring and hovered links go ink-black (a lime ring
   on lime cannot be seen). No page uses the slab today; this is the safety net. */
.hero--volt :focus-visible { outline-color: var(--volt-ink); }
.hero--volt .crumbs a:hover, .hero--volt a:hover { color: var(--volt-ink); }

/* ---- Buttons ---- */
.btn, .card-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; font: inherit; font-weight: 800; text-decoration: none; border-radius: var(--pill); padding: 12px 20px; background: var(--volt); color: var(--volt-ink); line-height: 1.1; transition: background .15s ease, transform .15s ease; }
.btn:hover, .card-cta:hover { background: var(--white); color: var(--volt-ink); }
.btn:active, .card-cta:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-ghost:hover { background: var(--raised-2); color: var(--text); }

/* ---- Tags and chips ---- */
.src-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-tiny); font-weight: 700; padding: 3px 10px; border-radius: var(--pill); line-height: 1.5; white-space: nowrap; }
.src-tag.choice { background: var(--volt); color: var(--volt-ink); }
.src-tag.pick { color: var(--volt); box-shadow: inset 0 0 0 1.5px var(--volt); }
.src-tag.scan { color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-small); font-weight: 700; padding: 5px 12px; border-radius: var(--pill); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-2); text-decoration: none; }
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--volt); color: var(--volt); }
.chip.on { background: var(--volt); color: var(--volt-ink); box-shadow: none; }
/* Black on pink: 5.88:1 (white on pink is 3.37:1 and fails at this size). */
.badge-off { display: inline-block; background: var(--pink); color: var(--volt-ink); font-weight: 800; font-size: .82rem; padding: 3px 9px; border-radius: var(--pill); letter-spacing: .01em; }
.badge-expired { display: inline-block; background: var(--raised-2); color: var(--muted); font-weight: 700; font-size: .82rem; padding: 3px 10px; border-radius: var(--pill); }

/* ---- Price ---- */
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.price-now { font-stretch: var(--semi-wide); font-weight: 900; font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.price-now.price-na { font-size: 1rem; font-weight: 700; font-stretch: 100%; color: var(--muted); }
.price-was { color: var(--faint); font-weight: 600; }
.price-stamp { margin-top: 6px; font-size: var(--t-tiny); color: var(--muted); }
.price-stamp a { color: var(--muted); }
.price-check { font-weight: 800; color: var(--volt); text-decoration: none; }
.coupon-line { margin: 0; font-size: var(--t-small); color: var(--text); }
.coupon-line code { font-family: var(--font); font-weight: 800; letter-spacing: .04em; padding: 2px 8px; border-radius: var(--pill); box-shadow: inset 0 0 0 1.5px var(--volt); color: var(--volt); }

/* ---- Deal cards ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 18px 0 8px; }
.card { position: relative; display: flex; flex-direction: column; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.card.is-pick { border-color: #3d4a17; }
.card.is-choice { border-color: var(--volt); }
.card .shot { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--white); overflow: hidden; }
.card .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.card .shot .ph { display: grid; place-items: center; height: 100%; font-stretch: var(--wide); font-weight: 900; font-size: 3rem; color: #d9d9d4; }
.badge-store { position: absolute; left: 10px; bottom: 10px; background: var(--black); color: var(--text); font-size: var(--t-tiny); font-weight: 700; padding: 3px 9px; border-radius: var(--pill); }
.card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 16px; flex: 1; }
.card-title { font-stretch: 100%; font-weight: 700; font-size: .98rem; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-title a { text-decoration: none; }
.card-title a:hover { color: var(--volt); }
.rish-says { margin: 0; font-size: var(--t-small); color: #DADAD4; }
.rish-says b { color: var(--volt); font-weight: 800; }
.cta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: auto; padding-top: 6px; }
.card-cta { padding: 10px 16px; font-size: .92rem; white-space: nowrap; }
.card-more { font-size: var(--t-small); color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--volt); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.card-more:hover { color: var(--volt); }
/* Top 10: the rank is the loudest thing on the card. Every product sits on a
   plain white tile (products are photographed on white; tinting them looks
   wrong), with the rank in black. Volt is kept for actions: the buy button
   and the Details underline. */
.card .rank { position: absolute; z-index: 2; left: 10px; bottom: 8px; font-stretch: var(--wide); font-weight: 900; font-size: 3.4rem; line-height: .78; color: var(--volt-ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; pointer-events: none; }
/* The photo sits above the number, never under it. */
.grid.ranked .card .shot img { padding: 12px 12px 58px; }
.grid.ranked .card .badge-store { left: auto; right: 10px; }

/* The feature: one pick, TikTok frame. White panel, giant number, photo.
   Like the ranked tiles, the photo sits above the number, never over it: the
   image keeps a bottom inset as tall as the numeral (which starts 6px up and
   is .78 of its font size tall; the panel pads 24px). */
.feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin: 18px 0 28px; }
.feature-panel { --num: clamp(6rem, 3rem + 10vw, 11rem); --num-inset: calc(var(--num) * .78 - 12px); position: relative; background: var(--white); min-height: 340px; display: flex; align-items: flex-end; justify-content: flex-end; padding: 24px; }
.feature-panel .big-num { position: absolute; z-index: 1; left: 22px; bottom: 6px; font-stretch: var(--wide); font-weight: 900; font-size: var(--num); line-height: .78; color: var(--volt-ink); letter-spacing: -.03em; pointer-events: none; }
.feature-panel img { position: relative; width: 62%; max-height: calc(260px + var(--num-inset)); object-fit: contain; object-position: center bottom; padding-bottom: var(--num-inset); }
.feature-body { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 12px; }
.feature-body .of { color: var(--volt); font-weight: 800; font-size: var(--t-small); }
.feature-body h2, .feature-body h3 { margin: 0; font-stretch: var(--wide); font-weight: 900; text-transform: uppercase; font-size: clamp(1.3rem, 1rem + 1.3vw, 2rem); line-height: 1; }
.feature-body h2 a, .feature-body h3 a { text-decoration: none; }
.feature-body h2 a:hover, .feature-body h3 a:hover { color: var(--volt); }
.feature-body .price-now { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.8rem); font-stretch: var(--wide); }
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; }
  .feature-panel { min-height: 240px; }
  .feature-panel img { width: 58%; max-height: calc(190px + var(--num-inset)); }
}

/* ---- Blocks ---- */
.disclose { font-size: var(--t-small); color: var(--muted); border-left: 3px solid var(--line-2); padding: 2px 0 2px 14px; margin: 14px 0 18px; max-width: 90ch; }
.disclose a { color: var(--muted); }
.box { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; margin: 22px 0; }
.box h2, .box h3 { margin-top: 0; }
.box > :last-child { margin-bottom: 0; }
/* Owner rule: lime is only for the buy button, the Details underline, the nav
   sale pill, chips/tags and focus. So no lime-filled boxes: a box that needs
   to stand out gets a lime rule down its left edge. .box.volt is kept as the
   same treatment so an old page that still uses it is never a lime slab. */
.box.accent, .box.volt { border-left: 4px solid var(--volt); }
.facts { width: 100%; border-collapse: collapse; margin: 18px 0 8px; font-size: .98rem; }
.facts th, .facts td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts th { color: var(--muted); font-weight: 600; width: 34%; }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.steps li { counter-increment: step; position: relative; padding: 14px 16px 14px 60px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-sm); }
.steps li::before { content: counter(step); position: absolute; left: 16px; top: 8px; font-stretch: var(--wide); font-weight: 900; font-size: 1.8rem; color: var(--volt); line-height: 1.1; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; list-style: none; font-weight: 800; font-stretch: var(--semi-wide); padding: 14px 32px 14px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 8px; font-size: 1.6rem; color: var(--volt); font-weight: 700; }
.faq details[open] summary::after { content: '−'; }
.faq details p { color: #DADAD4; margin: 0 0 16px; max-width: 70ch; }
.link-list { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 16px 0; }
.tile { display: block; padding: 18px 18px 20px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; }
.tile:hover { border-color: var(--volt); color: var(--text); }
.tile b { display: block; font-stretch: var(--semi-wide); font-weight: 850; font-size: 1.15rem; margin-bottom: 4px; }
.tile span { color: var(--muted); font-size: var(--t-small); }
.empty { padding: 28px; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--muted); }

/* ---- Signup ---- */
.signup { margin: 56px 0 8px; padding: 28px; border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--line); }
.signup h2 { margin-top: 0; }
.sub-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 12px; }
.sub-row input { flex: 1 1 220px; min-width: 0; font: inherit; color: var(--text); background: var(--black); border: 1.5px solid var(--line-2); border-radius: var(--pill); padding: 12px 18px; }
.sub-row input:focus { border-color: var(--volt); outline: none; }
.sub-consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-tiny); color: var(--muted); margin: 8px 0; line-height: 1.5; }
.sub-consent input { accent-color: var(--volt); margin-top: 3px; flex: none; }
.sub-consent a { color: var(--muted); }
.sub-msg { min-height: 1.4em; font-weight: 700; margin: 8px 0 0; }
.sub-msg.ok { color: var(--volt); } .sub-msg.bad { color: var(--pink); }
.channels { list-style: none; padding: 0; margin: 18px 0 6px; display: grid; gap: 6px; font-size: var(--t-small); color: var(--muted); }

/* ---- Footer ---- */
.site-foot { border-top: 1px solid var(--line); margin-top: 40px; padding: 48px 0 56px; color: var(--muted); font-size: var(--t-small); }
.foot-disclose { max-width: 90ch; margin-bottom: 28px; }
.foot-disclose b { color: var(--text); }
.f-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
.f-col h2 { font-size: .95rem; margin: 0 0 10px; color: var(--text); font-stretch: var(--semi-wide); }
.f-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.f-col a, .foot-row a { color: var(--muted); text-decoration: none; }
.f-col a:hover, .foot-row a:hover { color: var(--volt); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.foot-row .socials { display: flex; gap: 16px; flex-wrap: wrap; }
.foot-mark { height: 22px; width: auto; margin-bottom: 18px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}