/* ==========================================================================
   HOMEPAGE SPORTS — v2 redesign (24 Aug 2026)
   ==========================================================================
   Scoped entirely under body.home-v2 so nothing here can leak onto any
   other page. Loaded only when the /  route renders with home_v2=True
   (see templates/index.html, app.py). Reuses the site's real nav, footer
   links, audio sources and API endpoints — see CLAUDE-HOMEPAGE-HANDOFF.md
   in the project docs for the full build notes.

   NO SMACKY / MASCOT IMAGES: every media area below is an empty
   .home-media[data-image-slot] div with a dark CSS fallback only. The
   owner adds background-image (or swaps in a <picture>) later without
   needing any layout change — see each .home-media rule's comment.
   ========================================================================== */

body.home-v2{
  --sg-paper: #f3f0e8;
  --sg-paper-bright: #faf8f2;
  --sg-paper-cool: #e7e8ea;
  --sg-white: #ffffff;
  --sg-ink: #101114;
  --sg-charcoal: #18191d;
  --sg-panel-dark: #111216;
  --sg-copy: #2e3035;
  --sg-muted: #66686f;
  --sg-line: #c9c7c0;
  --sg-line-dark: #34363b;
  --sg-red: #E10600;
  --sg-red-hot: #E10600;
  --sg-red-dark: #E10600;
  --sg-focus: #111216;

  --sg-font-display: "Anton", "Impact", sans-serif;
  --sg-font-condensed: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sg-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* The handoff asks for clamp(4.25rem,6.2vw,7.5rem) (68-120px) AND a
     .88fr hero column, which is ~556px at 1440px+. Measured in Anton,
     "SMACKY DELIVERS." is 828px at 120px and 552px at 80px - so the
     handoff's own two numbers cannot both hold. 80px is the real ceiling
     that keeps the reference's two-line headline inside its column. */
  --sg-display-hero: clamp(2.6rem, 5.2vw, 4.85rem);
  --sg-display-section: clamp(2.6rem, 4.6vw, 5.5rem);
  --sg-display-card: clamp(2.1rem, 3.1vw, 4rem);
  --sg-heading-small: clamp(1.5rem, 2vw, 2.35rem);
  --sg-body-large: clamp(1rem, 1.15vw, 1.25rem);
  --sg-body: 1rem;
  --sg-label: 0.875rem;
  --sg-eyebrow: 1rem;

  --sg-shell: 1440px;
  --sg-content: var(--smk-content);   /* was 1320px - now the sitewide column */
  --sg-gutter: var(--smk-gutter);     /* was clamp(20px,4vw,64px) - identical value, one source */
  /* Handoff says 88-112px desktop / 44-56px mobile. Sitting at the
     BOTTOM of that range on purpose - Andy's standing note from the Four
     Ways page is no big empty bands above and below the content. */
  --sg-section-y: clamp(48px, 6.2vw, 88px);
  --sg-card-radius: 6px;
  --sg-shadow: 0 12px 30px rgba(16, 17, 20, 0.10);
  --sg-button-shadow: 0 4px 0 #101114;

  /* !important is REQUIRED here, not defensive: smackagram.css carries
     `body{background:transparent!important}`, and an !important
     declaration beats a normal one regardless of specificity - so
     without it this page fell through to html's #0D0D0D and rendered
     black between the sections. */
  background: var(--sg-paper) !important;
  color: var(--sg-copy);
  font-family: var(--sg-font-body);

  /* The sitewide neon frame (html body{border:5px solid ...}) is a
     deliberate look on every other page. This redesign is explicitly
     meant to read brighter and more commercially polished, and a thick
     red glow wrapped around a warm off-white page fights that on sight
     — so it is switched off only here, only when v2 is on. */
  border: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.home-v2 *, body.home-v2 *::before, body.home-v2 *::after{
  box-sizing: border-box;
}

/* No sideways scrollbar on the document, ever. Individual rails (the
   Smacks-of-the-Day track, the mobile SmackZone row) scroll INSIDE
   themselves; nothing is allowed to push the page itself wider. */
body.home-v2{ overflow-x: hidden; max-width: 100vw; }

body.home-v2 .home-shell{
  background: var(--sg-paper);
}

body.home-v2 h1, body.home-v2 h2, body.home-v2 h3{
  margin: 0;
  font-family: var(--sg-font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: 0.005em;
  color: var(--sg-ink);
}

body.home-v2 p{ margin: 0; }

body.home-v2 a{ color: inherit; }

body.home-v2 :focus-visible{
  outline: 3px solid var(--sg-focus);
  outline-offset: 3px;
}
body.home-v2 .sg-away-surface :focus-visible{
  outline-color: #fff;
}

/* ---- shared layout helpers ------------------------------------------- */
body.home-v2 .sg-section{
  padding: var(--sg-section-y) var(--sg-gutter);
}
body.home-v2 .sg-inner{
  max-width: var(--sg-content);
  margin: 0 auto;
}
body.home-v2 .sg-eyebrow{
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 0 18px;
  font-family: var(--sg-font-condensed); font-weight: 700;
  font-size: var(--sg-eyebrow); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sg-red);
}
body.home-v2 .sg-eyebrow::before,
body.home-v2 .sg-eyebrow::after{
  content: ""; flex: 1 1 60px; max-width: 90px; height: 1px; background: var(--sg-line-dark);
  opacity: .5;
}
body.home-v2 .sg-away-surface .sg-eyebrow::before,
body.home-v2 .sg-away-surface .sg-eyebrow::after{ background: rgba(255,255,255,.25); }
body.home-v2 .sg-head-center{ text-align: center; max-width: 940px; margin: 0 auto; }
body.home-v2 .sg-sub{
  margin-top: 14px; font-family: var(--sg-font-condensed); font-weight: 700;
  color: var(--sg-red); text-transform: uppercase; letter-spacing: 0.03em;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}
body.home-v2 .sg-body-copy{
  margin-top: 14px; font-family: var(--sg-font-body); color: var(--sg-muted);
  font-size: var(--sg-body-large); line-height: 1.6; max-width: 58ch; margin-inline: auto;
}

/* ---- surfaces (section 2 of the spec) --------------------------------- */
body.home-v2 .sg-paper-surface{
  position: relative; isolation: isolate;
  background-color: var(--sg-paper);
  background-image:
    radial-gradient(circle, rgba(16,17,20,.055) 0 0.7px, transparent .9px),
    linear-gradient(115deg, transparent 0 72%, rgba(16,17,20,.025) 72.2% 72.5%, transparent 72.7%);
  background-size: 8px 8px, 100% 100%;
}
body.home-v2 .sg-paper-cool{ background-color: var(--sg-paper-cool); }
body.home-v2 .sg-paper-bright{ background-color: var(--sg-paper-bright); }
body.home-v2 .sg-away-surface{
  background-color: var(--sg-panel-dark);
  background-image:
    radial-gradient(circle, rgba(255,255,255,.05) 0 .65px, transparent .85px),
    linear-gradient(90deg, transparent 0 96%, rgba(225,6,0,.08) 96% 96.15%, transparent 96.2%);
  background-size: 7px 7px, 100% 100%;
  color: var(--sg-paper);
}
body.home-v2 .sg-away-surface h1,
body.home-v2 .sg-away-surface h2,
body.home-v2 .sg-away-surface h3{ color: var(--sg-paper); }

/* ---- buttons ------------------------------------------------------------ */
body.home-v2 .sg-button{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 60px; padding: 0 32px;
  border-radius: 3px; cursor: pointer;
  font: 800 1.125rem/1 var(--sg-font-condensed);
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: filter .16s ease, transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
body.home-v2 .sg-button--primary{
  border: 1px solid var(--sg-ink);
  background: var(--sg-red); color: #fff;
  box-shadow: var(--sg-button-shadow);
}
body.home-v2 .sg-button--primary:hover{
  background: var(--sg-red-hot); transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--sg-ink);
}
body.home-v2 .sg-button--primary:active{
  transform: translateY(2px); box-shadow: 0 2px 0 var(--sg-ink);
}
body.home-v2 .sg-button--secondary{
  border: 1px solid var(--sg-ink); background: var(--sg-white); color: var(--sg-ink);
  box-shadow: var(--sg-button-shadow);
}
body.home-v2 .sg-button--secondary:hover{ transform: translateY(-2px); box-shadow: 0 6px 0 var(--sg-ink); }
body.home-v2 .sg-button--secondary:active{ transform: translateY(2px); box-shadow: 0 2px 0 var(--sg-ink); }
body.home-v2 .sg-button--dark{
  border: 1px solid #000; background: var(--sg-ink); color: #fff; box-shadow: 0 4px 0 #000;
}
body.home-v2 .sg-button--dark:hover{ transform: translateY(-2px); box-shadow: 0 6px 0 #000; }
body.home-v2 .sg-button--on-red{
  background: var(--sg-ink); color: #fff; border: 1px solid #000;
  box-shadow: 0 4px 0 rgba(0,0,0,.55);
}
body.home-v2 .sg-button--on-red:hover{ transform: translateY(-2px); }
body.home-v2 .sg-link{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sg-font-condensed); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; text-decoration: none; color: inherit;
  border-bottom: 2px solid var(--sg-red); padding-bottom: 2px;
  transition: padding-left .16s ease;
}
body.home-v2 .sg-link:hover{ padding-left: 4px; }
body.home-v2 .sg-away-surface .sg-link,
body.home-v2 .sg-on-red .sg-link{ border-color: #fff; }
body.home-v2 button.sg-link{ background: none; border: none; border-bottom: 2px solid var(--sg-red); cursor: pointer; font: inherit; }

/* ---- media slots ------------------------------------------------------- */
/* Every .home-media is an intentionally IMAGE-FREE container: a dark
   charcoal-to-black gradient with restrained red edge lighting, reserving
   the final aspect ratio so nothing shifts once a real photo lands. Add
   background-image (or replace with a <picture><img loading=lazy>) using
   the filename noted above each slot. */
body.home-v2 .home-media{
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 80% 8%, rgba(225,6,0,.16), transparent 55%),
    radial-gradient(90% 70% at 15% 95%, rgba(225,6,0,.10), transparent 60%),
    linear-gradient(155deg, #202126 0%, #17181c 45%, #0c0d10 100%);
}
body.home-v2 .home-media::after{
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,.02) 26px 27px);
  pointer-events: none;
}
body.home-v2 .home-media::before{
  content: ""; position: absolute; inset: 0; border: 1px solid rgba(225,6,0,.22);
  pointer-events: none;
}

/* ==========================================================================
   HEADER (real sitewide nav, restyled to sit on the light bar)
   ========================================================================== */
/* Background and bottom edge match the sitewide nav (Andy, 24 Aug 2026).
   Was rgba(250,248,242,.96) + a 1px --sg-line rule. Both of those beat the
   sitewide rules in smackagram.css - "body.home-v2 nav" carries a class, so
   it outranks "html body nav" whichever file loads last - which is why the
   home page kept a grey hairline and a cream bar after the rest of the site
   moved to a red edge and pure white. Opaque now, so the backdrop-filter
   below no longer has anything to blur; left in place because this nav is
   sticky here (deliberately - only home-v2 scrolls with it) and the blur is
   what that was tuned against if the background ever goes translucent. */
/* BLACK NAV (Andy, 29 Aug 2026). These home-page rules carry a class, so
   they outrank the sitewide "html body nav" block in smackagram.css - which
   is exactly why the home page kept a white bar after the rest of the site
   went black. Flipped here to match, rather than deleting the block, since
   the sticky/blur behaviour below is home-page-only and still wanted. */
body.home-v2 nav{
  background: #0D0D0D;
  border-bottom: 2px solid var(--sg-red);
  color: var(--sg-copy);
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(6px);
}
body.home-v2 nav > a.brand{
  position: relative;
  font-family: var(--sg-font-display); font-weight: 400; font-size: 30px;
  color: #FFFFFF; letter-spacing: 0; -webkit-text-stroke: 0;
}
/* The short red dash that sat above the wordmark is gone (Andy, 24 Aug
   2026) - it was a home-page-only flourish and it collided with the new red
   nav edge and page frame. Rule removed rather than set to display:none so
   nothing is left to re-enable by accident. */
body.home-v2 .brand span{ color: var(--sg-red); }
body.home-v2 .nav-links{ color: #FFFFFF; }
body.home-v2 .nav-links > a,
body.home-v2 .nav-group-btn{
  color: #FFFFFF !important;
  font-family: var(--sg-font-condensed); font-weight: 700; font-size: 16px;
  letter-spacing: .04em; text-transform: uppercase;
}
body.home-v2 .nav-links > a:hover,
body.home-v2 .nav-group-btn:hover,
body.home-v2 .nav-group.is-open .nav-group-btn{ color: var(--sg-red) !important; }
body.home-v2 .nav-menu{
  background: #141416; border: 2px solid var(--sg-red);
  box-shadow: var(--sg-shadow);
}
body.home-v2 .nav-menu a{ color: #FFFFFF !important; }
body.home-v2 .nav-menu a:hover{ background: rgba(245,245,243,0.08); color: var(--sg-red) !important; }
body.home-v2 .auth-links{ color: #FFFFFF; }
body.home-v2 .auth-links a{ color: var(--sg-copy) !important; font-family: var(--sg-font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
body.home-v2 .auth-links a[href="/profile"]{ color: var(--sg-red) !important; }
body.home-v2 .nav-toggle{ color: var(--sg-ink); }
body.home-v2 .nav-drawer{ background: var(--sg-paper-bright); border-left: 1px solid var(--sg-line); }
body.home-v2 .nav-drawer a{ color: var(--sg-ink) !important; }
body.home-v2 .nav-drawer a:hover,
body.home-v2 .nav-drawer a:focus-visible{ color: var(--sg-red) !important; }
body.home-v2 .nav-drawer-close{ color: var(--sg-ink); }

/* ==========================================================================
   SECTION 1 — HERO + PROOF TICKER
   ========================================================================== */
body.home-v2 .home-hero{
  padding: clamp(40px, 6vw, 76px) var(--sg-gutter) clamp(48px, 6vw, 76px);
}
body.home-v2 .home-hero-grid{
  max-width: var(--sg-content); margin: 0 auto;
  /* The handoff's ratio, restored now that the hero type is sized to
     actually fit inside it (see --sg-display-hero). */
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 56px; align-items: center;
  min-height: 560px;
}
body.home-v2 .home-hero-copy{ max-width: 610px; }
body.home-v2 .home-hero-eyebrow{
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--sg-font-condensed); font-weight: 700; font-size: 18px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sg-red);
}
body.home-v2 .home-hero-eyebrow::before{
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sg-red);
  box-shadow: 0 0 0 4px rgba(225,6,0,.16);
}
body.home-v2 .home-hero-eyebrow::after{
  content: ""; flex: 1; height: 1px; background: var(--sg-line-dark); opacity: .4; max-width: 220px;
}
body.home-v2 .home-hero h1{
  font-size: var(--sg-display-hero); max-width: 100%;
}
body.home-v2 .home-hero-body{
  margin-top: 20px; font-size: var(--sg-body-large); line-height: 1.55;
  color: var(--sg-copy); max-width: 46ch;
}
body.home-v2 .home-hero-actions{
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px;
}
body.home-v2 .home-hero-actions .sg-button--primary{ min-width: 260px; }
body.home-v2 .home-hero-actions .sg-button--secondary{ min-width: 210px; }
body.home-v2 .home-hero-benefits{
  display: flex; gap: 22px; margin-top: 32px; flex-wrap: wrap;
}
body.home-v2 .home-hero-benefit{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sg-font-condensed); font-weight: 700; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--sg-copy);
  padding-right: 22px; border-right: 1px solid var(--sg-line);
}
body.home-v2 .home-hero-benefit:last-child{ border-right: 0; padding-right: 0; }
body.home-v2 .home-hero-benefit svg{ width: 22px; height: 22px; flex: none; color: var(--sg-red); }

body.home-v2 .home-hero-media{
  position: relative; aspect-ratio: 1.32 / 1; min-height: 520px; border-radius: 8px;
}
/* Owner will add /static/img/home/hero-smacky.webp */
body.home-v2 .home-hero-media.home-media{
  background:
    linear-gradient(90deg, rgba(225,6,0,.16), transparent 18% 82%, rgba(225,6,0,.14)),
    radial-gradient(circle at 50% 85%, rgba(225,6,0,.20), transparent 32%),
    #101114;
}

body.home-v2 .home-proof{
  max-width: var(--sg-content); margin: clamp(28px,4vw,48px) auto 0;
  border-top: 1px solid var(--sg-ink); border-bottom: 1px solid var(--sg-ink);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  min-height: 104px;
}
/* "LIVE NOW" is a marker, not a statistic - it carries no value line. */
body.home-v2 .home-proof-live .home-proof-label{ font-size: 15px; color: var(--sg-ink); }
body.home-v2 .home-proof-item{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 18px 12px; text-align: center;
  border-right: 1px solid var(--sg-line);
}
body.home-v2 .home-proof-item:last-child{ border-right: 0; }
body.home-v2 .home-proof-label{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sg-font-condensed); font-weight: 700; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sg-muted);
}
body.home-v2 .home-proof-label .home-live-dot{
  width: 8px; height: 8px; border-radius: 50%; background: var(--sg-red);
  box-shadow: 0 0 0 3px rgba(225,6,0,.18);
  animation: sgPulse 1.6s ease-in-out infinite;
}
body.home-v2 .home-proof-value{
  font-family: var(--sg-font-display); font-weight: 400; font-size: clamp(26px,3vw,34px);
  color: var(--sg-red);
}
@keyframes sgPulse{
  0%,100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .45; transform: scale(.82); }
}
@media(prefers-reduced-motion: reduce){
  body.home-v2 .home-live-dot{ animation: none; }
}

/* ==========================================================================
   SECTION 2 — MEET SMACKY AUDIO EXPLAINER
   ========================================================================== */
body.home-v2 .home-explainer-module{
  max-width: var(--sg-content); margin: clamp(32px,4vw,48px) auto 0;
  min-height: 320px; border: 1px solid var(--sg-line); border-radius: 10px;
  background: var(--sg-white); box-shadow: var(--sg-shadow);
  display: grid; grid-template-columns: 320px 1fr 180px; align-items: center;
  gap: 28px; padding: 36px clamp(24px,4vw,56px);
}
body.home-v2 .home-explainer-portrait{
  width: 300px; height: 300px; border-radius: 50%; flex: none;
  margin-left: -44px;
  border: 4px solid var(--sg-red);
  box-shadow: 0 0 0 6px rgba(225,6,0,.10), var(--sg-shadow);
}
/* Owner will add /static/img/home/audio-smacky-portrait.webp */
body.home-v2 .home-explainer-portrait.home-media{
  background: radial-gradient(circle at 40% 30%, rgba(225,6,0,.28), transparent 55%), #141519;
}
body.home-v2 .home-explainer-portrait.home-media::before{ border-radius: 50%; border-color: rgba(225,6,0,.4); }
body.home-v2 .home-explainer-body{ min-width: 0; }
body.home-v2 .home-explainer-name{
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-family: var(--sg-font-condensed); font-weight: 800; font-size: 16px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sg-red);
}
body.home-v2 .home-explainer-name svg{ width: 18px; height: 18px; }
body.home-v2 .home-waveform{
  display: flex; align-items: center; gap: 2px; height: 46px; width: 100%;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
body.home-v2 .home-waveform .bar{
  /* max-width raised from 5px: 56 bars capped at 5px filled only ~60%
     of the module's middle column and left dead space beside it. */
  flex: 1 1 0; min-width: 2px; max-width: 9px; border-radius: 2px;
  background: var(--sg-line-dark); transition: background-color .1s linear;
}
body.home-v2 .home-waveform .bar.is-elapsed{ background: var(--sg-red); }
body.home-v2 .home-explainer-time{
  text-align: center;
  font-family: var(--sg-font-display); font-weight: 400; font-size: 22px; color: var(--sg-ink);
}
body.home-v2 .home-explainer-play-wrap{
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
body.home-v2 .home-play-button{
  width: 88px; height: 88px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--sg-red); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sg-shadow); transition: transform .16s ease, background-color .16s ease;
  flex: none;
}
body.home-v2 .home-play-button:hover{ background: var(--sg-red-hot); transform: translateY(-2px); }
body.home-v2 .home-play-button svg{ width: 28px; height: 28px; }
body.home-v2 .home-play-label{
  font-family: var(--sg-font-condensed); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sg-muted);
}
body.home-v2 .home-process{
  max-width: var(--sg-content); margin: clamp(32px,4vw,48px) auto 0;
  padding-top: 28px; border-top: 1px solid var(--sg-ink);
  display: grid; grid-template-columns: repeat(3, 1fr);
}
body.home-v2 .home-process-step{
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 6px 18px; border-right: 1px solid var(--sg-line);
  font-family: var(--sg-font-condensed); font-weight: 700; font-size: 15px;
  letter-spacing: .04em; text-transform: uppercase;
}
body.home-v2 .home-process-step:last-child{ border-right: 0; }
body.home-v2 .home-process-num{
  width: 26px; height: 26px; border-radius: 50%; background: var(--sg-ink); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none;
  font-family: var(--sg-font-body); font-weight: 700; font-size: 13px;
}
body.home-v2 .home-process-step svg{ width: 20px; height: 20px; color: var(--sg-red); flex: none; }
body.home-v2 .home-process-tag{
  text-align: center; margin-top: 18px; font-family: var(--sg-font-condensed); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sg-red); font-size: 13px;
}

/* ==========================================================================
   SECTION 3 — CORE PRODUCTS
   ========================================================================== */
body.home-v2 .home-products{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
  max-width: var(--sg-content); margin: clamp(32px,4vw,48px) auto 0;
}
body.home-v2 .home-product-card{
  background: var(--sg-white); border: 1px solid var(--sg-ink); border-radius: var(--sg-card-radius);
  border-top: 3px solid var(--sg-red); box-shadow: var(--sg-shadow); overflow: hidden;
  display: flex; flex-direction: column;
}
body.home-v2 .home-product-media{ aspect-ratio: 16 / 8.5; }
/* Owner will add /static/img/home/product-send-smack.webp and
   /static/img/home/product-smackcast.webp */
body.home-v2 .home-product-content{
  padding: clamp(28px,4vw,40px); text-align: center; display: flex; flex-direction: column; align-items: center;
  flex: 1;
}
body.home-v2 .home-product-badge{
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
  font-family: var(--sg-font-condensed); font-weight: 800; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sg-red);
}
body.home-v2 .home-product-badge svg{ width: 13px; height: 13px; }
body.home-v2 .home-product-content h3{ font-size: var(--sg-display-card); }
body.home-v2 .home-product-price{
  margin-top: 8px; font-family: var(--sg-font-condensed); font-weight: 800; font-size: 20px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--sg-red);
}
body.home-v2 .home-product-blurb{
  margin-top: 14px; color: var(--sg-muted); font-size: 15px; line-height: 1.6; max-width: 40ch;
}
body.home-v2 .home-product-meta{
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sg-line); width: 100%;
  font-family: var(--sg-font-condensed); font-weight: 700; font-size: 12.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--sg-muted);
}
body.home-v2 .home-product-sample-label{
  margin-top: 18px; font-family: var(--sg-font-condensed); font-weight: 700; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sg-ink);
}
body.home-v2 .home-mini-player{
  margin-top: 12px; width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; border: 1px solid var(--sg-line); border-radius: 999px; background: var(--sg-paper);
}
body.home-v2 .home-mini-play{
  width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--sg-red); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
body.home-v2 .home-mini-play svg{ width: 13px; height: 13px; }
body.home-v2 .home-mini-wave{ flex: 1; display: flex; align-items: center; gap: 1.5px; height: 22px; cursor: pointer; }
body.home-v2 .home-mini-wave .bar{ flex: 1 1 0; min-width: 1.5px; max-width: 6px; border-radius: 1px; background: var(--sg-line-dark); }
body.home-v2 .home-mini-wave .bar.is-elapsed{ background: var(--sg-red); }
body.home-v2 .home-mini-time{ font-family: var(--sg-font-condensed); font-weight: 700; font-size: 12px; color: var(--sg-muted); flex: none; }
body.home-v2 .home-product-content .sg-button{ margin-top: 20px; width: 100%; }

/* ==========================================================================
   SECTION 4 — SMACKBOARD / DAILY SMACK FEATURE ROWS
   ========================================================================== */
body.home-v2 .home-features{
  max-width: var(--sg-content); margin: clamp(32px,4vw,48px) auto 0;
  display: flex; flex-direction: column; gap: 16px;
}
body.home-v2 .home-feature-row{
  border: 1px solid var(--sg-charcoal); border-radius: var(--sg-card-radius); box-shadow: var(--sg-shadow);
  background: var(--sg-white); overflow: hidden;
  display: grid; min-height: 340px;
}
body.home-v2 .home-feature-row.is-media-left{ grid-template-columns: 54% 46%; }
body.home-v2 .home-feature-row.is-media-right{ grid-template-columns: 42% 58%; }
body.home-v2 .home-feature-row.is-media-right .home-feature-media{ order: 2; }
body.home-v2 .home-feature-media{ min-height: 260px; }
body.home-v2 .home-feature-copy{
  padding: clamp(28px,4vw,44px); display: flex; flex-direction: column; justify-content: center;
}
body.home-v2 .home-feature-tag{
  display: inline-flex; align-items: center; gap: 8px; width: max-content; margin-bottom: 14px;
  padding: 5px 12px; border-radius: 999px; background: rgba(225,6,0,.10);
  font-family: var(--sg-font-condensed); font-weight: 800; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sg-red);
}
body.home-v2 .home-feature-tag .home-live-dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--sg-red);
  animation: sgPulse 1.6s ease-in-out infinite;
}
body.home-v2 .home-feature-copy h3{ font-size: var(--sg-display-card); }
body.home-v2 .home-feature-sub{
  margin-top: 10px; font-family: var(--sg-font-condensed); font-weight: 700; font-size: 15px;
  letter-spacing: .03em; text-transform: uppercase; color: var(--sg-red);
}
body.home-v2 .home-feature-body{ margin-top: 12px; color: var(--sg-muted); font-size: 15px; line-height: 1.6; max-width: 46ch; }
body.home-v2 .home-feature-pills{
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px;
}
body.home-v2 .home-feature-pill{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sg-font-condensed); font-weight: 700; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--sg-copy);
}
body.home-v2 .home-feature-pill svg{ width: 17px; height: 17px; color: var(--sg-red); flex: none; }
body.home-v2 .home-feature-flag{
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--sg-line);
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sg-font-condensed); font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sg-muted);
}
body.home-v2 .home-feature-flag svg{ width: 16px; height: 16px; color: var(--sg-red); }
body.home-v2 .home-feature-actions{ margin-top: 20px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
body.home-v2 .home-feature-actions .sg-button{ width: 100%; max-width: 340px; }
body.home-v2 .home-episode-player{
  display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px 16px;
  border: 1px solid var(--sg-line); border-radius: 10px; background: var(--sg-paper);
}
body.home-v2 .home-episode-title{ font-family: var(--sg-font-condensed); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--sg-ink); white-space: nowrap; }

/* ==========================================================================
   SECTION 5 — SMACKZONE (only fully dark band)
   ========================================================================== */
body.home-v2 .home-zone{ padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(56px, 8vw, 104px); }
body.home-v2 .home-zone .sg-eyebrow{ color: var(--sg-red); }
body.home-v2 .home-zone h2 .home-zone-red{ color: var(--sg-red); }
body.home-v2 .home-zone .sg-sub{ color: #cfd1d6; font-weight: 600; }
body.home-v2 .home-zone-grid{
  max-width: var(--sg-shell); margin: clamp(32px,4vw,48px) auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
body.home-v2 .home-zone-tile{
  display: block; text-decoration: none; border: 1px solid var(--sg-line-dark); border-radius: var(--sg-card-radius);
  overflow: hidden; background: var(--sg-panel-dark);
  transition: border-color .16s ease;
}
body.home-v2 .home-zone-tile:hover,
body.home-v2 .home-zone-tile:focus-visible{ border-color: var(--sg-red); }
body.home-v2 .home-zone-media{
  height: clamp(220px, 24vw, 430px); overflow: hidden;
}
body.home-v2 .home-zone-media.home-media{ transition: transform .22s ease; }
body.home-v2 .home-zone-tile:hover .home-zone-media.home-media,
body.home-v2 .home-zone-tile:focus-visible .home-zone-media.home-media{ transform: scale(1.025); }
body.home-v2 .home-zone-label{
  min-height: 180px; padding: 24px 20px; background: var(--sg-paper-bright); color: var(--sg-ink);
  text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* Explicit ink colour: these tiles sit INSIDE .sg-away-surface, whose
   `h3{color:var(--sg-paper)}` rule would otherwise paint them near-white
   on the label's near-white background - i.e. invisible titles. */
body.home-v2 .home-zone-label h3{ font-size: 22px; color: var(--sg-ink); }
body.home-v2 .home-zone-label p{ margin-top: 8px; font-size: 12.5px; color: var(--sg-muted); font-family: var(--sg-font-condensed); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
body.home-v2 .home-zone-cta{
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-family: var(--sg-font-condensed); font-weight: 800; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sg-red); transition: gap .16s ease;
}
body.home-v2 .home-zone-tile:hover .home-zone-cta,
body.home-v2 .home-zone-tile:focus-visible .home-zone-cta{ gap: 11px; }

/* ==========================================================================
   SECTION 6 — SMACKS OF THE DAY (reskins the existing .sotw partial)
   ==========================================================================
   The partial is shared by eight pages, so NONE of it is edited - every
   rule here is a scoped override under .home-sotd-wrap that repaints the
   dark neon "fight card" look into the reference's light scoreboard one.

   Reference 06-smacks-of-the-day.png has NO container around the rail:
   the cards sit straight on the paper with one arrow either side. The
   partial ships a grey-black panel with a red neon ring (.sotw) inside a
   dark full-bleed band (.sotw-escape), and its own duplicate heading
   (.sotw-head). All three are switched off below.
   ========================================================================== */

/* --- tighter section padding (25 Aug 2026) -------------------------------
   Andy is making a 2:1 photo-texture background for this band and wants
   the box's own whitespace brought down to sit closer to that ratio
   before it lands. This overrides the shared .sg-section padding
   (clamp(48px,6.2vw,88px), same as every other section) with a shorter
   clamp, and the block below trims the inter-element margins to match -
   the card row itself (min-height: 366px, further down) is real content
   and is left alone. */
body.home-v2 .home-sotd-wrap{
  /* TOP halved (Andy, 24 Aug 2026): was clamp(28px,4.2vw,70px), landing at
     63px on desktop; now ~31px. Every term halved so it keeps scaling
     rather than snapping to a fixed value on narrow screens.
     Gap measured is section top -> "LIVE FROM SMACKAGRAM".
     BOTTOM LEFT AS IT WAS at Andy's instruction - he asked for the top
     only here, unlike .home-zone above where both sides were halved. That
     makes this section deliberately asymmetric: ~31px top, 63px bottom. */
  padding-top: clamp(14px, 2.1vw, 35px);
  padding-bottom: clamp(28px, 4.2vw, 70px);
}

/* --- photo-texture background (25 Aug 2026) ------------------------------
   Andy's own 2:1 scoreboard-frame photo (paper tone matched to
   --sg-paper, #f3f0e8 - corner brackets, halftone dots, court/field
   line-art, its own bottom rule) replaces the flat .sg-paper-surface fill
   + dot texture for this section only. Compound selector so it beats the
   shared .sg-paper-surface rule regardless of source order, same pattern
   as .home-zone.sg-away-surface. background-color is the same paper tone
   as a letterbox fallback if the box ever renders taller than the photo's
   own 2:1. Real content (heading, rule, cards, CTA) sits on top
   unchanged - see each rule's own comment for why none of it was pulled
   just because the photo echoes it visually. */
body.home-v2 .home-sotd-wrap.sg-paper-surface{
  background-color: #f3f0e8;
  background-image: url("/static/img/home/sotd-bg.webp?v=20260825");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- the section's own heading (this page renders it, not the partial) --- */
body.home-v2 .home-sotd-head{
  max-width: var(--sg-content); margin: 0 auto; text-align: left;
}
body.home-v2 .home-sotd-eyebrow{
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-family: var(--sg-font-condensed); font-weight: 700; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sg-red);
}
body.home-v2 .home-sotd-eyebrow .home-live-ring{
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--sg-red);
  position: relative; flex: none;
}
body.home-v2 .home-sotd-eyebrow .home-live-ring::before{
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--sg-red);
}
body.home-v2 .home-sotd-head h2{ font-size: var(--sg-display-section); }
body.home-v2 .home-sotd-head .sg-sub{ margin-top: 8px; text-align: left; }
/* black scoreboard rule with the short red cut on its right end */
body.home-v2 .home-sotd-rule{
  max-width: var(--sg-content); margin: 16px auto 0; height: 4px;
  background: var(--sg-ink); position: relative;
}
body.home-v2 .home-sotd-rule::after{
  content: ""; position: absolute; right: -2px; top: -1px; width: 104px; height: 6px;
  background: var(--sg-red); clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}

/* --- kill the partial's dark band, panel, neon ring and duplicate head --- */
body.home-v2 .home-sotd-wrap .sotw-escape{
  width: 100% !important; margin: clamp(18px,2.2vw,28px) 0 0 !important; margin-left: 0 !important;
  background: none !important; border-top: 0 !important; border-bottom: 0 !important;
  padding: 0 !important;
}
body.home-v2 .home-sotd-wrap .sotw-cap{
  max-width: var(--sg-content) !important; padding: 0 !important;
}
body.home-v2 .home-sotd-wrap .sotw{
  background: none !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 0 !important; overflow: visible !important;
}
/* The page prints its own heading above; the partial's would be a second one. */
body.home-v2 .home-sotd-wrap .sotw-head{ display: none !important; }
/* THE RAIL MUST KEEP CLIPPING. This said `overflow: visible` so the arrows
   could sit outside it, which killed the partial's own overflow-x:auto -
   and since .sotw-track is width:max-content holding up to 15 cards, the
   whole row then spilled past the viewport and gave the PAGE a horizontal
   scrollbar. The arrows are positioned against .sotw-wrap (outside the
   rail), so they do not need the rail to be visible. */
body.home-v2 .home-sotd-wrap .sotw-rail{
  background: none !important; padding: 4px 0 10px !important;
  overflow-x: auto !important; overflow-y: hidden !important;
}
body.home-v2 .home-sotd-wrap .sotw-track{ padding: 0 !important; gap: 28px !important; }

/* --- arrows: solid dark discs sitting just outside the rail --- */
body.home-v2 .home-sotd-wrap .sotw-arrow{
  background: var(--sg-ink) !important; color: #fff !important; border: 0 !important;
  width: 44px !important; height: 44px !important; box-shadow: var(--sg-shadow) !important;
}
body.home-v2 .home-sotd-wrap .sotw-wrap{ overflow: visible; }
body.home-v2 .home-sotd-wrap .sotw-prev{ left: -22px !important; }
body.home-v2 .home-sotd-wrap .sotw-next{ right: -22px !important; }
/* Below ~1400px the gutter is narrower than the arrows' 22px overhang,
   so bring them back inside the rail rather than off the page. */
@media (max-width: 1400px){
  body.home-v2 .home-sotd-wrap .sotw-prev{ left: 6px !important; }
  body.home-v2 .home-sotd-wrap .sotw-next{ right: 6px !important; }
}

/* --- the card ------------------------------------------------------------ */
body.home-v2 .home-sotd-wrap .sotw-card{
  background: var(--sg-white) !important;
  border: 1px solid var(--sg-charcoal) !important;
  border-radius: var(--sg-card-radius) !important;
  box-shadow: var(--sg-shadow) !important;
  color: var(--sg-ink) !important;
  min-height: 420px !important;
  padding: 0 20px 18px !important;
  text-align: left !important;
  overflow: hidden !important;
  flex: 0 0 300px !important; max-width: 320px !important;
}
body.home-v2 .home-sotd-wrap .sotw-card:hover{ box-shadow: 0 16px 34px rgba(16,17,20,.16) !important; }
/* the partial's team-colour top wedge - replaced by the red status bar */
body.home-v2 .home-sotd-wrap .sotw-card::before{ display: none !important; }
/* the huge ghost team word: the reference uses faint ball line-art instead */
body.home-v2 .home-sotd-wrap .sotw-ghost{ display: none !important; }

/* Andy's real ball photography, matched to the SPORT of each smack
   (24 Aug 2026). data-sport is set server-side in /api/wall from the FULL
   team name - see services/team_sport.py for why the nickname alone is not
   enough (197 of 390 nicknames are shared across sports, so "Rangers",
   "Giants" and "Kings" are all genuinely ambiguous).

   TWO THINGS THAT WERE WRONG IN THE FIRST WIRE-UP, both visible on the
   live page:

   1. The art PAINTED OVER THE TEXT. ::after with z-index:0 sits in the
      same stacking context as the card's children (the partial gives them
      position:relative with z-index:auto), and a pseudo-element comes
      last in paint order - so it won. The children are given z-index:1
      below, which puts every headline, meta line and player back on top.

   2. The source files' background was #EEEEEE, not white, so the 190px
      box read as a grey rectangle stamped on a white card. The PNGs have
      since been re-keyed to real transparency - alpha derived from how
      much darker than that background each pixel is, so the artwork keeps
      the exact tone Andy drew while the background drops out completely.

   The art now fills the whole card and sits behind everything, which is
   what he asked for. */
body.home-v2 .home-sotd-wrap .sotw-card::after{
  content: ""; position: absolute; inset: 0;
  pointer-events: none; z-index: 0; opacity: 1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 62%;
  background-image: none;
}
/* Everything in the card paints above the watermark. */
body.home-v2 .home-sotd-wrap .sotw-card > *{ position: relative; z-index: 1; }

body.home-v2 .home-sotd-wrap .sotw-card[data-sport="football"]::after{
  background-image: url("/static/img/home/ball-football.png?v=20260825");
}
body.home-v2 .home-sotd-wrap .sotw-card[data-sport="basketball"]::after{
  background-image: url("/static/img/home/ball-basketball.png?v=20260825");
}
body.home-v2 .home-sotd-wrap .sotw-card[data-sport="baseball"]::after{
  background-image: url("/static/img/home/ball-baseball.png?v=20260825");
}
body.home-v2 .home-sotd-wrap .sotw-card[data-sport="soccer"]::after{
  background-image: url("/static/img/home/ball-soccer.png?v=20260825");
}
body.home-v2 .home-sotd-wrap .sotw-card[data-sport="hockey"]::after{
  background-image: url("/static/img/home/ball-hockey.png?v=20260825");
}

/* --- card contents, reordered to the reference's stacking --------------- */
/* .sotw-prod is the real "SMACKAGRAM . YESTERDAY" line. The reference puts
   that strip at the very top as a full-bleed red bar, so it is pulled out
   of the card's padding box and moved to order:-1. Its text stays REAL -
   the mockup's "TODAY . 2:14 PM" is fictional and the handoff says to use
   the real records rather than hard-code it. */
body.home-v2 .home-sotd-wrap .sotw-prod{
  order: -1 !important;
  margin: 0 -20px 18px !important; padding: 12px 16px !important;
  background: var(--sg-red) !important; color: #fff !important;
  min-height: 40px; display: flex !important; align-items: center;
  justify-content: flex-start !important; gap: 8px;
  font-family: var(--sg-font-condensed) !important; font-weight: 700 !important;
  font-size: 13px !important; letter-spacing: .1em !important; text-transform: uppercase;
  border-radius: 0 !important;
}
body.home-v2 .home-sotd-wrap .sotw-prod .dot{
  width: 9px; height: 9px; border-radius: 50%; background: #fff !important; flex: none;
  box-shadow: none !important; animation: none !important;
}
body.home-v2 .home-sotd-wrap .sotw-headline{
  order: 1; text-align: left !important;
  font-family: var(--sg-font-display) !important; font-weight: 400 !important;
  font-size: 38px !important; line-height: .94 !important; text-transform: uppercase;
  color: var(--sg-ink) !important; margin: 0 !important;
}
/* the team name inside the headline was white for the dark card */
body.home-v2 .home-sotd-wrap .sotw-team{ color: var(--sg-ink) !important; }
body.home-v2 .home-sotd-wrap .sotw-tag{
  order: 2; display: block; text-align: left !important;
  margin-top: 14px !important; padding-top: 14px !important;
  border-top: 1px solid var(--sg-line);
  font-family: var(--sg-font-condensed) !important; font-weight: 700 !important;
  font-size: 15px !important; letter-spacing: .04em !important; text-transform: uppercase;
  color: var(--sg-muted) !important; background: none !important;
}
/* flex:0 0 auto is load-bearing: the partial sets .sotw-stage{flex:1}, which
   made the stage swallow all the leftover card height and centre the player
   in the middle of it, leaving a slab of empty white underneath. Without
   the grow, margin-top:auto can actually park it at the card's bottom edge
   the way the reference shows. */
body.home-v2 .home-sotd-wrap .sotw-stage{
  order: 3; flex: 0 0 auto !important; margin-top: auto !important; padding-top: 18px !important;
  display: flex !important; flex-direction: row !important; align-items: center !important;
  gap: 14px !important;
}
body.home-v2 .home-sotd-wrap .sotw-play{
  width: 56px !important; height: 56px !important; flex: none !important;
  background: var(--sg-red) !important; box-shadow: none !important; border: 0 !important;
  margin: 0 !important;
}
body.home-v2 .home-sotd-wrap .sotw-play svg{ width: 18px !important; height: 20px !important; }
body.home-v2 .home-sotd-wrap .sotw-line{ flex: 1 !important; min-width: 0; }
body.home-v2 .home-sotd-wrap .sotw-wave{ width: 100% !important; height: 30px !important; }
/* remaining = near-black, elapsed = red, per the handoff's audio rules */
body.home-v2 .home-sotd-wrap .sotw-wave i{ background: var(--sg-line-dark) !important; }
body.home-v2 .home-sotd-wrap .sotw-wave i.on{ background: var(--sg-red) !important; }
body.home-v2 .home-sotd-wrap .sotw-t-row{
  display: flex !important; justify-content: flex-start; margin-top: 8px !important;
}
body.home-v2 .home-sotd-wrap .sotw-t,
body.home-v2 .home-sotd-wrap .sotw-t-sep{
  color: var(--sg-muted) !important; font-family: var(--sg-font-condensed) !important;
  font-weight: 700 !important; font-size: 14px !important;
}

/* --- bottom CTA band ----------------------------------------------------- */
/* Reference: label + long rule on the left, then a red block with a
   diagonal left edge running off the right side of the page. */
body.home-v2 .home-sotd-cta{
  max-width: var(--sg-content); margin: clamp(22px,3vw,36px) auto 0;
  display: grid; grid-template-columns: 1fr auto; align-items: stretch; gap: 0;
  border: 0; padding: 0;
}
body.home-v2 .home-sotd-cta-label{
  display: flex; align-items: center; gap: 20px;
  font-family: var(--sg-font-condensed); font-weight: 800; font-size: clamp(20px,2.2vw,30px);
  letter-spacing: .04em; text-transform: uppercase; color: var(--sg-ink);
  padding-right: 34px;
}
body.home-v2 .home-sotd-cta-label::after{
  content: ""; flex: 1; height: 2px; background: var(--sg-ink); min-width: 40px;
}
body.home-v2 .home-sotd-cta-btn{
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 92px; padding: 0 clamp(30px,4vw,64px) 0 clamp(48px,6vw,86px);
  background: var(--sg-red); color: #fff; text-decoration: none;
  font-family: var(--sg-font-condensed); font-weight: 800;
  font-size: clamp(16px,1.5vw,22px); letter-spacing: .07em; text-transform: uppercase;
  clip-path: polygon(46px 0, 100% 0, 100% 100%, 0 100%);
  /* bleeds off the right edge of the content column, as in the reference */
  margin-right: calc(-1 * var(--sg-gutter));
}
body.home-v2 .home-sotd-cta-btn:hover{ background: var(--sg-red-hot); }

body.home-v2 .home-sotd-empty{
  max-width: var(--sg-content); margin: clamp(32px,4vw,48px) auto 0; text-align: center;
  padding: 48px 24px; border: 1px dashed var(--sg-line); border-radius: var(--sg-card-radius);
}
body.home-v2 .home-sotd-empty h3{ font-size: 30px; }
body.home-v2 .home-sotd-empty p{ margin-top: 10px; color: var(--sg-muted); }
body.home-v2 .home-sotd-empty .sg-button{ margin-top: 18px; }

/* ==========================================================================
   SECTION 7 — FINAL CTA + FOOTER
   ========================================================================== */
body.home-v2 .home-closer{
  position: relative; overflow: hidden; min-height: 480px;
  background-color: var(--sg-red);
  background-image: radial-gradient(circle, rgba(255,255,255,.10) 0 1px, transparent 1.4px);
  background-size: 9px 9px;
  display: grid; grid-template-columns: 44% 34% 22%; align-items: center;
  padding: clamp(48px, 6vw, 72px) var(--sg-gutter);
  color: #fff;
}
body.home-v2 .home-closer-copy h2{ color: #fff; font-size: clamp(2.6rem, 5.4vw, 6.5rem); max-width: 9ch; }
body.home-v2 .home-closer-copy .sg-sub{
  margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.4); text-align: left;
  color: #fff; font-weight: 600; font-family: var(--sg-font-condensed); text-transform: uppercase; letter-spacing: .02em;
  max-width: 42ch;
}
body.home-v2 .home-closer-actions{ display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
body.home-v2 .home-closer-actions .sg-button--dark{ width: 100%; max-width: 460px; min-height: 88px; font-size: 20px; }
body.home-v2 .home-closer-actions .sg-link{ color: #fff; border-color: #fff; }
body.home-v2 .home-closer-media{
  position: relative; align-self: stretch;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
}
/* Owner will add /static/img/home/closer-smacky.webp */
body.home-v2 .home-closer-media.home-media{ background: linear-gradient(160deg,#1a1a1e,#0b0b0d); }
body.home-v2 .home-closer-media.home-media::before{ border-color: rgba(0,0,0,.4); }

body.home-v2 .home-footer{
  background: var(--sg-paper-bright); padding: clamp(40px,5vw,56px) var(--sg-gutter) 0;
}
body.home-v2 .home-footer-grid{
  max-width: var(--sg-content); margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 32px;
  padding-bottom: 40px;
}
body.home-v2 .home-footer-col{ border-left: 1px solid var(--sg-line); padding-left: 32px; }
body.home-v2 .home-footer-col:first-child{ border-left: 0; padding-left: 0; }
body.home-v2 .home-footer-brand{
  font-family: var(--sg-font-display); font-weight: 400; font-size: 32px; color: var(--sg-ink);
}
body.home-v2 .home-footer-col .social-links{ justify-content: flex-start; margin-top: 18px; padding: 0; }
body.home-v2 .home-footer-col .social-links a{
  background: var(--sg-ink); border-color: var(--sg-ink); color: #fff;
}
body.home-v2 .home-footer-col .social-links a:hover{ background: var(--sg-red); border-color: var(--sg-red); box-shadow: none; }
body.home-v2 .home-footer-heading{
  margin: 0 0 16px; font-family: var(--sg-font-condensed); font-weight: 800; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sg-muted);
}
body.home-v2 .home-footer-links{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
body.home-v2 .home-footer-links a{
  text-decoration: none; color: var(--sg-copy); font-family: var(--sg-font-condensed); font-weight: 700;
  font-size: 14.5px; letter-spacing: .02em; text-transform: uppercase;
}
body.home-v2 .home-footer-links a:hover{ color: var(--sg-red); }
body.home-v2 .home-footer-signup p{ color: var(--sg-copy); font-size: 14px; margin-bottom: 14px; }
body.home-v2 .home-signup-form{ display: flex; flex-direction: column; gap: 10px; }
body.home-v2 .home-signup-form input[type="email"]{
  height: 48px; padding: 0 14px; border: 1px solid var(--sg-ink); border-radius: 3px;
  font-family: var(--sg-font-body); font-size: 14px; background: #fff; color: var(--sg-ink);
}
body.home-v2 .home-signup-form .sg-button{ min-height: 48px; }
body.home-v2 .home-signup-note{ font-size: 12px; color: var(--sg-muted); min-height: 16px; }
body.home-v2 .home-signup-note.is-ok{ color: #1a7a3d; }
body.home-v2 .home-signup-note.is-error{ color: var(--sg-red-dark); }
body.home-v2 .home-footer-legal{
  max-width: var(--sg-content); margin: 0 auto; padding: 20px 0 24px; border-top: 1px solid var(--sg-line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
body.home-v2 .home-footer-legal-links{ display: flex; gap: 18px; flex-wrap: wrap; }
body.home-v2 .home-footer-legal-links a{
  color: var(--sg-muted); text-decoration: none; font-family: var(--sg-font-condensed); font-weight: 600;
  font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
}
body.home-v2 .home-footer-legal-links a:hover{ color: var(--sg-red); }
body.home-v2 .home-footer-tag{
  font-family: var(--sg-font-condensed); font-weight: 800; font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sg-red);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1439px){
  body.home-v2 .sg-section{ padding-left: clamp(20px,4vw,48px); padding-right: clamp(20px,4vw,48px); }
  body.home-v2 .home-hero-grid{ grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); gap: 40px; }
  /* No font-size override here any more. It was clamp(3rem,7vw,5.75rem),
     which at 1439px resolves to ~100px and overflowed the column all over
     again - the --sg-display-hero token already scales with the viewport. */
}

@media (max-width: 1023px){
  body.home-v2 .home-hero-grid{ grid-template-columns: 1fr; min-height: 0; }
  body.home-v2 .home-hero-copy{ max-width: none; }
  body.home-v2 .home-hero-media{ aspect-ratio: 16/10; min-height: 320px; order: -1; }
  body.home-v2 .home-proof{ overflow-x: auto; grid-auto-flow: column; grid-auto-columns: minmax(180px,1fr); grid-template-columns: none; scrollbar-width: none; }
  body.home-v2 .home-proof::-webkit-scrollbar{ display: none; }

  body.home-v2 .home-explainer-module{ grid-template-columns: 1fr; text-align: center; justify-items: center; }
  body.home-v2 .home-explainer-portrait{ margin-left: 0; width: 180px; height: 180px; }
  body.home-v2 .home-process{ grid-template-columns: 1fr; gap: 14px; }
  body.home-v2 .home-process-step{ border-right: 0; justify-content: flex-start; }

  body.home-v2 .home-products{ grid-template-columns: 1fr; }

  body.home-v2 .home-feature-row.is-media-left,
  body.home-v2 .home-feature-row.is-media-right{
    grid-template-columns: 1fr;
  }
  body.home-v2 .home-feature-row.is-media-right .home-feature-media{ order: 0; }

  body.home-v2 .home-zone-grid{ grid-template-columns: repeat(2, 1fr); }

  body.home-v2 .home-closer{ grid-template-columns: 1fr 1fr; }
  body.home-v2 .home-closer-media{ display: none; }

  body.home-v2 .home-footer-grid{ grid-template-columns: 1fr 1fr; row-gap: 32px; }
  body.home-v2 .home-footer-col:nth-child(3){ border-left: 0; padding-left: 0; }
}

@media (max-width: 767px){
  body.home-v2 .sg-section{ padding-top: clamp(44px,8vw,56px); padding-bottom: clamp(44px,8vw,56px); }
  body.home-v2 .sg-eyebrow::before,
  body.home-v2 .sg-eyebrow::after{ display: none; }

  body.home-v2 .home-hero h1{ font-size: clamp(2.6rem, 11vw, 4rem); line-height: .96; }
  body.home-v2 .home-hero-actions{ flex-direction: column; }
  body.home-v2 .home-hero-actions .sg-button{ width: 100%; min-width: 0; }
  body.home-v2 .home-hero-benefits{ flex-direction: column; gap: 10px; }
  body.home-v2 .home-hero-benefit{ border-right: 0; padding-right: 0; width: 100%; }
  body.home-v2 .home-hero-media{ min-height: 240px; aspect-ratio: 4/5; }

  body.home-v2 .sg-head-center h2,
  body.home-v2 .home-sotd-head h2,
  body.home-v2 .home-zone h2{ font-size: clamp(2rem, 11vw, 3rem); }

  body.home-v2 .home-explainer-module{ padding: 24px; }
  body.home-v2 .home-mini-player{ flex-wrap: wrap; }

  body.home-v2 .home-product-content{ padding: 24px; }

  body.home-v2 .home-feature-copy{ padding: 22px; }

  body.home-v2 .home-zone-grid{
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 88%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px;
  }
  body.home-v2 .home-zone-grid::-webkit-scrollbar{ display: none; }
  body.home-v2 .home-zone-tile{ scroll-snap-align: start; }

  body.home-v2 .home-sotd-wrap .sotw-rail{ overflow-x: auto !important; scroll-snap-type: x mandatory; }

  body.home-v2 .home-sotd-cta{ flex-direction: column; align-items: flex-start; }
  body.home-v2 .home-sotd-cta-btn{ width: 100%; justify-content: center; clip-path: none; border-radius: 3px; }

  body.home-v2 .home-closer{ grid-template-columns: 1fr; text-align: left; min-height: 0; padding-top: 48px; padding-bottom: 48px; }
  body.home-v2 .home-closer-copy h2{ font-size: clamp(2.3rem, 12vw, 3.5rem); max-width: none; }
  body.home-v2 .home-closer-actions{ margin-top: 24px; width: 100%; }
  body.home-v2 .home-closer-actions .sg-button--dark{ max-width: none; }

  body.home-v2 .home-footer-grid{ grid-template-columns: 1fr; }
  body.home-v2 .home-footer-col{ border-left: 0; padding-left: 0; border-top: 1px solid var(--sg-line); padding-top: 24px; }
  body.home-v2 .home-footer-col:first-child{ border-top: 0; padding-top: 0; }
  body.home-v2 .home-footer-legal{ flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px){
  body.home-v2 nav > a.brand{ font-size: 24px; }
}

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


/* ==========================================================================
   ADDITIONS FOR THE HANDOFF-EXACT COPY PASS (24 Aug 2026)
   ==========================================================================
   The first build used the site's existing wording; this pass replaced
   every string with the handoff's verbatim copy, which introduced a few
   elements the original stylesheet had no rule for. */

/* Section 3/4 headers: the handoff gives some sections a headline with no
   eyebrow above it, so the h2 needs its own top margin in those cases. */
body.home-v2 .sg-head-center h2{ font-size: var(--sg-display-section); }

/* Section 4, row B: "TODAY'S EPISODE" label above the real episode line. */
body.home-v2 .home-feature-eplabel{
  margin-top: 18px;
  font-family: var(--sg-font-condensed); font-weight: 700; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sg-ink);
}

/* Section 5: "SMACK" off-white + "ZONE" red, per the reference. */
body.home-v2 .home-zone h2{ font-size: var(--sg-display-section); }
body.home-v2 .home-zone-label p{ margin-top: 8px; }

/* Section 7 footer additions. */
body.home-v2 .home-footer-tagline{
  margin-top: 14px; font-size: 14px; color: var(--sg-muted); max-width: 32ch; line-height: 1.6;
}
body.home-v2 .home-signup-label{
  display: block; margin-bottom: 8px;
  font-family: var(--sg-font-condensed); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sg-muted);
}
body.home-v2 .home-footer-copyright{
  font-family: var(--sg-font-condensed); font-weight: 700; font-size: 12.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--sg-muted);
}
/* The signup heading is a full sentence here, not a one-word column label. */
body.home-v2 .home-footer-signup .home-footer-heading{
  font-size: 14px; letter-spacing: .04em; color: var(--sg-ink); text-transform: none;
  font-family: var(--sg-font-body); font-weight: 700; line-height: 1.4;
}

@media (max-width: 1023px){
  body.home-v2 .home-explainer-portrait{ width: 200px; height: 200px; }
  body.home-v2 .home-zone-label{ min-height: 150px; }
}


/* ==========================================================================
   SECTION 3 — matched to 03-core-products.png (24 Aug 2026)
   ==========================================================================
   Measured against the reference rather than eyeballed: the headline is
   flanked by rules, the product title fills its card, the meta strip is
   ruled top AND bottom with red bullet separators, the player is a
   rounded rect (not a pill) with a fine dense waveform, and BOTH CTAs are
   red. Spacing tightened throughout to the reference's rhythm. */

/* headline with a rule running out either side */
body.home-v2 .home-head-ruled h2{
  display: flex; align-items: center; justify-content: center; gap: clamp(18px,2.4vw,38px);
  font-size: clamp(2.7rem, 4.6vw, 5.2rem);
}
body.home-v2 .home-head-ruled h2::before,
body.home-v2 .home-head-ruled h2::after{
  content: ""; height: 2px; background: var(--sg-ink); flex: 1 1 40px; max-width: 190px;
}
body.home-v2 .sg-sub--wide{
  letter-spacing: .16em; margin-top: 6px; font-size: clamp(.95rem, 1.25vw, 1.1rem);
}

/* --- tighter section padding (25 Aug 2026) -------------------------------
   Andy is making a 1536x1024 (3:2) photo-texture background for this
   section too, same canvas as Featured Drops, so the two line up.
   Overrides the shared .sg-section padding for this section only via the
   new .home-products-wrap class - same pattern as home-sotd-wrap and
   home-drops-wrap. The two product cards (real photo slots at their own
   aspect-ratio, real copy, real mini-players) are left alone - they're
   content, not whitespace. */
body.home-v2 .home-products-wrap{
  padding-top: clamp(24px, 3.2vw, 48px);
  padding-bottom: clamp(24px, 3.2vw, 48px);
}

/* --- photo-texture background (25 Aug 2026) ------------------------------
   Andy's own 3:2 field/court-diagram photo (same paper tone and corner
   treatment as the Featured Drops and Smacks of the Day ones, built at
   the exact same 1536x1024 canvas as Featured Drops so the two line up)
   replaces the flat .sg-paper-surface fill for this section only.
   Compound selector so it beats the shared .sg-paper-surface rule
   regardless of source order, same pattern as home-sotd-wrap. The two
   product cards' own photo slots (product-send-smack.webp,
   product-smackcast.webp) are unrelated - they sit on top, unchanged. */
body.home-v2 .home-products-wrap.sg-paper-surface{
  background-color: var(--sg-paper);
  background-image: url("/static/img/home/products-bg.webp?v=20260825");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* cards sit tighter to the header in the reference */
body.home-v2 .home-products{ margin-top: clamp(16px,1.8vw,22px); gap: 32px; }

/* 44% media / 56% content, per the handoff */
body.home-v2 .home-product-media{ aspect-ratio: 16 / 8.5; }

body.home-v2 .home-product-content{
  padding: clamp(22px,2.4vw,30px) clamp(24px,2.6vw,34px) clamp(24px,2.6vw,32px);
}
body.home-v2 .home-product-badge{
  gap: 8px; margin-bottom: 6px; font-size: 13px; letter-spacing: .14em;
}
body.home-v2 .home-product-badge svg{ width: 15px; height: 15px; }

/* the reference title fills roughly the full content measure */
body.home-v2 .home-product-content h3{
  font-size: clamp(2.5rem, 3.8vw, 4.5rem); line-height: .92;
}
body.home-v2 .home-product-price{
  margin-top: 4px; font-size: clamp(1.15rem,1.5vw,1.45rem); letter-spacing: .1em;
}
body.home-v2 .home-product-blurb{
  margin-top: 12px; color: var(--sg-copy); font-size: 16px; line-height: 1.5; max-width: 34ch;
}

/* meta strip: hairline above AND below, black text, red bullets */
body.home-v2 .home-product-meta{
  margin-top: 16px; padding: 11px 0; width: 100%;
  border-top: 1px solid var(--sg-line); border-bottom: 1px solid var(--sg-line);
  color: var(--sg-ink); font-size: 14px; letter-spacing: .1em;
}
body.home-v2 .home-product-meta .sep{ color: var(--sg-red); margin: 0 4px; }

body.home-v2 .home-product-sample-label{
  margin-top: 14px; color: var(--sg-ink); font-size: 13.5px; letter-spacing: .13em;
}

/* player: rounded rectangle with a thin rule, not a pill */
body.home-v2 .home-mini-player{
  margin-top: 10px; gap: 12px; padding: 9px 14px;
  border: 1px solid var(--sg-line); border-radius: 8px; background: var(--sg-white);
}
body.home-v2 .home-mini-play{ width: 38px; height: 38px; }
body.home-v2 .home-mini-play svg{ width: 14px; height: 14px; }
/* fine, dense bars like the reference's real waveform */
body.home-v2 .home-mini-wave{ height: 30px; gap: 1px; }
body.home-v2 .home-mini-wave .bar{ min-width: 1px; max-width: 3px; border-radius: 0; }
body.home-v2 .home-mini-time{ font-size: 14px; color: var(--sg-ink); }

/* both CTAs are red in the reference, with the hard black offset */
body.home-v2 .home-product-content .sg-button{
  margin-top: 16px; min-height: 58px; font-size: 1.15rem; letter-spacing: .12em;
}

@media (max-width: 767px){
  body.home-v2 .home-head-ruled h2::before,
  body.home-v2 .home-head-ruled h2::after{ display: none; }
  body.home-v2 .home-product-content h3{ font-size: clamp(2.1rem, 9vw, 3rem); }
}


/* ==========================================================================
   SECTION 4 — matched to 04-smackboard-daily-smack.png (24 Aug 2026)
   ==========================================================================
   Differences from the first pass, all measured off the reference: the
   status badge is a SOLID red pill (was a pale pink one), the feature
   items sit on one line divided by thin vertical rules, "FREE TO ENTER"
   is centred and flanked by red rules, the CTA is flat red with no hard
   offset, the "see how it works" link is centred with a chevron, and the
   rows are shorter. Row B gets a real player for today's episode. */

body.home-v2 .sg-eyebrow--red::before,
body.home-v2 .sg-eyebrow--red::after{
  background: var(--sg-red); opacity: 1; height: 2px; max-width: 110px;
}

/* --- tighter section padding (25 Aug 2026) -------------------------------
   Andy is making a 1536x1024 (3:2) photo-texture background for this
   section, same move as Smacks of the Day. Overrides the shared
   .sg-section padding (clamp(48px,6.2vw,88px)) and the shared .sg-eyebrow
   margin (18px) for this section only - both are used by other sections
   sitewide, so both get a scoped .home-drops-wrap override rather than
   being edited at the source. The two feature rows below (real photo
   slots, real copy, min-height: 300px on the media) are left alone, same
   principle as the SmackZone card row - they're content, not whitespace. */
body.home-v2 .home-drops-wrap{
  padding-top: clamp(24px, 3.2vw, 48px);
  padding-bottom: clamp(24px, 3.2vw, 48px);
}
body.home-v2 .home-drops-wrap .sg-eyebrow{ margin-bottom: 10px; }

/* --- photo-texture background (25 Aug 2026) ------------------------------
   Andy's own 3:2 scoreboard-frame photo (same paper tone and corner-
   bracket/halftone treatment as the Smacks of the Day one) replaces the
   flat .sg-paper-bright fill for this section only. Compound selector so
   it beats the shared .sg-paper-bright rule regardless of source order.
   background-color is the same paper tone as a letterbox fallback if the
   box ever renders taller than the photo's own 3:2. The two feature rows'
   own photo slots (feature-smackboard.webp, feature-daily-smack.webp)
   are unrelated - they sit on top of this, unchanged. */
body.home-v2 .home-drops-wrap.sg-paper-bright{
  background-color: var(--sg-paper-bright);
  background-image: url("/static/img/home/drops-bg.webp?v=20260825");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.home-v2 .home-feature-lede{
  margin-top: 8px; color: var(--sg-copy); font-size: 17px; line-height: 1.5;
  max-width: 62ch; margin-inline: auto;
}

/* rows are shorter and tighter than the first build */
body.home-v2 .home-features{ margin-top: clamp(14px,1.6vw,20px); gap: 10px; }
body.home-v2 .home-feature-row{ min-height: 0; }
body.home-v2 .home-feature-media{ min-height: 300px; }
body.home-v2 .home-feature-copy{
  padding: clamp(22px,2.4vw,30px) clamp(24px,2.8vw,36px);
  justify-content: center;
}

/* solid red status pill, white text */
body.home-v2 .home-feature-tag{
  background: var(--sg-red) !important; color: #fff !important;
  padding: 6px 14px; border-radius: 999px; font-size: 12px; letter-spacing: .12em;
  margin-bottom: 12px;
}
body.home-v2 .home-feature-tag .home-live-dot{ background: #fff; }
/* row B's eyebrow trails a rule to the right, as in the reference */
body.home-v2 .home-feature-tag--rule{
  background: none !important; color: var(--sg-red) !important; padding: 0;
  width: 100%; display: flex; align-items: center; gap: 10px;
}
body.home-v2 .home-feature-tag--rule .home-live-dot{ background: var(--sg-red); }
body.home-v2 .home-feature-tag--rule::after{
  content: ""; flex: 1; height: 1px; background: var(--sg-line); max-width: 260px;
}

body.home-v2 .home-feature-copy h3{ font-size: clamp(2.2rem, 3.2vw, 3.4rem); }
body.home-v2 .home-feature-sub{
  margin-top: 8px; font-size: 15px; letter-spacing: .12em;
}
body.home-v2 .home-feature-body{
  margin-top: 12px; color: var(--sg-copy); font-size: 16px; line-height: 1.5; max-width: none;
}

/* one line, divided by thin vertical rules */
body.home-v2 .home-feature-pills{
  margin-top: 16px; gap: 0; flex-wrap: nowrap; align-items: center;
}
body.home-v2 .home-feature-pill{
  gap: 8px; padding: 0 16px; font-size: 13px; white-space: nowrap;
  color: var(--sg-ink);
}
body.home-v2 .home-feature-pill:first-child{ padding-left: 0; }
body.home-v2 .home-feature-pill + .home-feature-pill{ border-left: 1px solid var(--sg-line); }

/* centred, flanked by red rules */
body.home-v2 .home-feature-flag{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 12px; padding-top: 0; border-top: 0;
  color: var(--sg-ink); font-size: 13.5px; letter-spacing: .08em;
}
body.home-v2 .home-feature-flag::before,
body.home-v2 .home-feature-flag::after{
  content: ""; flex: 1; height: 1px; background: var(--sg-red); opacity: .55;
}

/* flat red CTA - the reference has no hard offset shadow on these */
body.home-v2 .sg-button--flatred{
  background: var(--sg-red); color: #fff; border: 0; box-shadow: none;
  width: 100%; margin-top: 16px; min-height: 60px; border-radius: 4px;
  font-size: 1.2rem; letter-spacing: .1em;
}
body.home-v2 .sg-button--flatred:hover{ background: var(--sg-red-hot); transform: none; box-shadow: none; }

body.home-v2 .home-feature-more{
  display: block; text-align: center; margin-top: 12px; text-decoration: none;
  font-family: var(--sg-font-condensed); font-weight: 700; font-size: 14px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sg-ink);
}
body.home-v2 .home-feature-more:hover{ color: var(--sg-red); }

/* --- row B: real "today's episode" player -------------------------------- */
body.home-v2 .home-episode-player{
  display: flex; align-items: center; gap: 14px; width: 100%;
  margin-top: 16px; padding: 12px 16px;
  border: 1px solid var(--sg-line); border-radius: 8px; background: var(--sg-white);
}
body.home-v2 .home-episode-play{
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  background: var(--sg-ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
body.home-v2 .home-episode-play:hover{ background: var(--sg-red); }
body.home-v2 .home-episode-play svg{ width: 16px; height: 16px; }
body.home-v2 .home-episode-mid{ flex: 1; min-width: 0; }
body.home-v2 .home-episode-title{
  display: block; margin-bottom: 5px;
  font-family: var(--sg-font-condensed); font-weight: 700; font-size: 12.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sg-ink); white-space: nowrap;
}
body.home-v2 .home-episode-wave{
  display: flex; align-items: center; gap: 1px; height: 26px; width: 100%; cursor: pointer;
}
body.home-v2 .home-episode-wave .bar{
  flex: 1 1 0; min-width: 1px; max-width: 3px; background: var(--sg-red); opacity: .55;
}
body.home-v2 .home-episode-wave .bar.is-elapsed{ background: var(--sg-red); opacity: 1; }
body.home-v2 .home-episode-time{
  flex: none; font-family: var(--sg-font-condensed); font-weight: 700; font-size: 15px;
  color: var(--sg-ink);
}

@media (max-width: 1023px){
  body.home-v2 .home-feature-pills{ flex-wrap: wrap; }
  body.home-v2 .home-feature-pill{ padding-left: 0; border-left: 0 !important; }
  body.home-v2 .home-feature-pill{ margin-right: 18px; }
}


/* ==========================================================================
   SECTION 5 — matched to 05-smackzone.png (24 Aug 2026)
   ==========================================================================
   Everything here was under-scaled in the first build. Measured off the
   reference: the SMACKZONE wordmark fills ~40% of the content width (it
   was sitting at ~21%), the subhead is roughly 1.6x bigger with wide
   tracking, and every tile label - title, tagline and CTA - was roughly
   half the size it should be.

   The split colour stays as Andy asked: SMACK off-white, ZONE red. The
   reference sets the whole wordmark off-white; his call overrides it. */

body.home-v2 .home-zone{
  position: relative; overflow: hidden;
  /* Halved (Andy, 24 Aug 2026): was clamp(52px,6.4vw,92px), which came out
     at 92px top and bottom on a desktop width. Every term is halved rather
     than just the ceiling, so the section keeps shrinking proportionally on
     narrower screens instead of collapsing to a fixed value.
     Top gap = section top -> "EXPLORE"; bottom gap = the four cards ->
     section bottom. Both sides use the same declaration, so they stay
     equal by construction rather than by two numbers kept in sync. */
  padding-top: clamp(26px, 3.2vw, 46px); padding-bottom: clamp(26px, 3.2vw, 46px);
}

/* faint red yard-line ticks up both edges, as in the reference art */
body.home-v2 .home-zone::before,
body.home-v2 .home-zone::after{
  content: ""; position: absolute; top: 8%; bottom: 8%; width: 26px;
  pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(
    180deg, rgba(225,6,0,.55) 0 2px, transparent 2px 34px);
}
body.home-v2 .home-zone::before{ left: 18px; }
body.home-v2 .home-zone::after{ right: 18px; }
@media (max-width: 1023px){
  body.home-v2 .home-zone::before,
  body.home-v2 .home-zone::after{ display: none; }
}

/* eyebrow: solid red rules, larger than the shared default */
body.home-v2 .home-zone .sg-eyebrow{
  font-size: clamp(1rem, 1.35vw, 1.35rem); letter-spacing: .3em; gap: 20px;
  margin-bottom: 10px;
}
body.home-v2 .home-zone .sg-eyebrow::before,
body.home-v2 .home-zone .sg-eyebrow::after{
  background: var(--sg-red); opacity: 1; height: 3px; max-width: 118px; flex-basis: 118px;
}

/* the wordmark, at the reference's real scale */
body.home-v2 .home-zone h2{
  font-size: clamp(3.2rem, 8.2vw, 8.5rem); line-height: .9; letter-spacing: .002em;
}
body.home-v2 .home-zone .sg-sub{
  margin-top: 14px; color: #cfd1d6; font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.8rem); letter-spacing: .13em;
}

body.home-v2 .home-zone-grid{
  margin-top: clamp(30px, 3.4vw, 46px); gap: 16px;
  max-width: var(--sg-shell);
}
body.home-v2 .home-zone-tile{ border-radius: 4px; }
body.home-v2 .home-zone-media{ height: clamp(250px, 26vw, 440px); }

/* the label block: taller, and every line roughly double its old size */
body.home-v2 .home-zone-label{
  min-height: 190px; padding: 26px 18px 24px; gap: 0;
}
body.home-v2 .home-zone-label h3{
  font-size: clamp(1.5rem, 2.4vw, 2.6rem); color: var(--sg-ink); line-height: .96;
}
body.home-v2 .home-zone-label p{
  margin-top: 12px; font-size: clamp(.85rem, 1vw, 1rem); color: var(--sg-copy);
  font-family: var(--sg-font-condensed); font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase;
}
body.home-v2 .home-zone-cta{
  margin-top: 16px; font-size: clamp(.9rem, 1.05vw, 1.05rem); letter-spacing: .1em; gap: 9px;
}
body.home-v2 .home-zone-cta svg{ width: 17px; height: 17px; }

@media (max-width: 1023px){
  body.home-v2 .home-zone-label{ min-height: 168px; padding: 22px 16px; }
}
@media (max-width: 767px){
  body.home-v2 .home-zone h2{ font-size: clamp(2.6rem, 15vw, 4.5rem); }
  body.home-v2 .home-zone .sg-sub{ font-size: clamp(1rem, 4.4vw, 1.35rem); }
}


/* ==========================================================================
   SECTION 7 — matched to 07-cta-footer.png (24 Aug 2026)
   ========================================================================== */
body.home-v2 .sg-visually-hidden{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- red conversion band (25 Aug 2026: single photo background) ---------
   Was a flat red + dot-texture fill with a separate dark diagonal panel
   layered on top for the wedge. Andy supplied one photo (red jersey
   texture fading to black) with that same red-to-black diagonal already
   baked in at roughly the same cut point, so the flat colour/texture and
   the separate wedge fill are both retired in favour of this one image.
   .home-closer-media stays in the markup below (unfilled) so a future
   Smacky photo can still drop into that same wedge region with no layout
   change - see the asset-size doc for that slot's dimensions. */
body.home-v2 .home-closer{
  position: relative; overflow: hidden; display: block; min-height: 520px;
  padding: 0;
  background-color: #0a0a0a;
  background-image: url("/static/img/home/closer-bg.webp?v=20260825");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
body.home-v2 .home-closer-inner{
  position: relative; z-index: 2;
  max-width: var(--sg-content); margin: 0 auto;
  padding: clamp(52px,6vw,86px) var(--sg-gutter);
  display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  gap: clamp(28px,4vw,60px); align-items: center; min-height: 520px;
}
body.home-v2 .home-closer-copy h2{
  color: #fff; font-size: clamp(2.6rem, 5.2vw, 5.6rem); line-height: .92; max-width: 14ch;
}
body.home-v2 .home-closer-sub{
  margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.5);
  color: #fff; font-family: var(--sg-font-condensed); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(.95rem, 1.25vw, 1.15rem); max-width: 46ch; white-space: normal;
}
body.home-v2 .home-closer-actions{
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
body.home-v2 .home-closer-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; max-width: 470px; min-height: 92px; padding: 0 34px;
  background: var(--sg-ink); color: #fff; text-decoration: none; border-radius: 4px;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  font-family: var(--sg-font-condensed); font-weight: 800;
  font-size: clamp(1.15rem,1.75vw,1.7rem); letter-spacing: .07em; text-transform: uppercase;
  transition: transform .16s ease, background-color .16s ease;
}
body.home-v2 .home-closer-btn:hover{ transform: translateY(-2px); background: #000; }
body.home-v2 .home-closer-more{
  color: #fff; text-decoration: none; border-bottom: 2px solid #fff; padding-bottom: 3px;
  font-family: var(--sg-font-condensed); font-weight: 700;
  font-size: clamp(.9rem,1.1vw,1.05rem); letter-spacing: .1em; text-transform: uppercase;
}
/* Wedge fill retired (25 Aug 2026) - the black side is now baked into
   .home-closer's own background photo. This div is kept, unfilled, as
   the reserved slot for a future Smacky photo in the same region.
   Owner will add /static/img/home/closer-smacky.webp */
body.home-v2 .home-closer-media{
  position: absolute; top: 0; right: 0; bottom: 0; width: 30%; z-index: 1;
  clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%);
  background: transparent;
}
body.home-v2 .home-closer-media::before{ border-color: rgba(0,0,0,.35); display: none; }
@media (max-width: 1023px){
  body.home-v2 .home-closer-inner{ grid-template-columns: 1fr; min-height: 0; }
  body.home-v2 .home-closer-media{ display: none; }
  body.home-v2 .home-closer-actions{ align-items: flex-start; }
}

/* --- footer -------------------------------------------------------------- */
body.home-v2 .home-footer{
  background: var(--sg-paper-bright); padding: clamp(40px,4.6vw,64px) var(--sg-gutter) 0;
}
body.home-v2 .home-footer-grid{
  max-width: var(--sg-content); margin: 0 auto;
  display: grid; grid-template-columns: 1.35fr 1fr .85fr 1.5fr; gap: 0;
  padding-bottom: clamp(28px,3.4vw,44px);
}
/* thin vertical rules between the columns, as in the reference */
body.home-v2 .home-footer-col{
  border-left: 1px solid var(--sg-line); padding: 4px clamp(20px,2.6vw,42px);
}
body.home-v2 .home-footer-col:first-child{ border-left: 0; padding-left: 0; }
body.home-v2 .home-footer-col:last-child{ padding-right: 0; }

/* wordmark: solid black, big, with its own rule under it - no tagline */
body.home-v2 .home-footer-brand{
  font-family: var(--sg-font-display); font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3.5rem); line-height: 1;
  text-transform: uppercase; color: var(--sg-ink); letter-spacing: .01em;
}
body.home-v2 .home-footer-brandcol .social-links{
  justify-content: flex-start; margin-top: 20px; padding: 18px 0 0;
  border-top: 1px solid var(--sg-line); gap: 14px; max-width: 330px;
}
body.home-v2 .home-footer-brandcol .social-links a{
  width: 42px; height: 42px;
  background: var(--sg-ink); border-color: var(--sg-ink); color: #fff;
}
body.home-v2 .home-footer-brandcol .social-links a:hover{
  background: var(--sg-red); border-color: var(--sg-red); box-shadow: none;
}
body.home-v2 .home-footer-brandcol .social-links svg{ width: 19px; height: 19px; }

body.home-v2 .home-footer-links{
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: clamp(12px,1.4vw,19px);
}
body.home-v2 .home-footer-links a{
  text-decoration: none; color: var(--sg-ink);
  font-family: var(--sg-font-condensed); font-weight: 700;
  font-size: clamp(.95rem,1.15vw,1.1rem); letter-spacing: .03em; text-transform: uppercase;
}
body.home-v2 .home-footer-links a:hover{ color: var(--sg-red); }

body.home-v2 .home-footer-signup-head{
  color: var(--sg-ink); font-family: var(--sg-font-condensed); font-weight: 700;
  font-size: clamp(.95rem,1.2vw,1.15rem); letter-spacing: .03em; text-transform: uppercase;
  margin-bottom: 14px; line-height: 1.3;
}
body.home-v2 .home-signup-form{ display: flex; flex-direction: column; gap: 12px; }
body.home-v2 .home-signup-form input[type="email"]{
  height: 54px; padding: 0 16px; border: 1px solid var(--sg-ink); border-radius: 3px;
  background: #fff; color: var(--sg-ink);
  font-family: var(--sg-font-condensed); font-weight: 600; font-size: 16px;
  letter-spacing: .04em; text-transform: uppercase;
}
body.home-v2 .home-signup-form input[type="email"]::placeholder{
  color: var(--sg-muted); text-transform: uppercase; letter-spacing: .06em;
}
body.home-v2 .home-signup-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--sg-red); color: #fff;
  font-family: var(--sg-font-condensed); font-weight: 800; font-size: 1.15rem;
  letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .16s ease;
}
body.home-v2 .home-signup-btn:hover{ background: var(--sg-red-hot); }
body.home-v2 .home-signup-btn[disabled]{ opacity: .6; cursor: default; }

/* legal row: links + copyright left, divided by rules; tagline red right */
body.home-v2 .home-footer-legal{
  max-width: var(--sg-content); margin: 0 auto;
  padding: 20px 0 26px; border-top: 1px solid var(--sg-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
body.home-v2 .home-footer-legal-links{ display: flex; align-items: center; flex-wrap: wrap; }
body.home-v2 .home-footer-legal-links a,
body.home-v2 .home-footer-legal-links .home-footer-copyright{
  color: var(--sg-ink); text-decoration: none;
  font-family: var(--sg-font-condensed); font-weight: 700;
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  padding: 0 clamp(16px,2vw,32px);
}
body.home-v2 .home-footer-legal-links a:first-child{ padding-left: 0; }
body.home-v2 .home-footer-legal-links a + a,
body.home-v2 .home-footer-legal-links .home-footer-copyright{
  border-left: 1px solid var(--sg-line);
}
body.home-v2 .home-footer-legal-links a:hover{ color: var(--sg-red); }
body.home-v2 .home-footer-tag{
  font-family: var(--sg-font-condensed); font-weight: 800; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--sg-red);
}

@media (max-width: 1023px){
  body.home-v2 .home-footer-grid{ grid-template-columns: 1fr 1fr; row-gap: 34px; }
  body.home-v2 .home-footer-col:nth-child(3){ border-left: 0; padding-left: 0; }
}
@media (max-width: 767px){
  body.home-v2 .home-footer-grid{ grid-template-columns: 1fr; }
  body.home-v2 .home-footer-col{
    border-left: 0; padding-left: 0; padding-right: 0;
    border-top: 1px solid var(--sg-line); padding-top: 24px;
  }
  body.home-v2 .home-footer-col:first-child{ border-top: 0; padding-top: 0; }
  body.home-v2 .home-footer-legal{ flex-direction: column; align-items: flex-start; }
  body.home-v2 .home-footer-legal-links a,
  body.home-v2 .home-footer-legal-links .home-footer-copyright{ padding: 0 12px; }
  body.home-v2 .home-footer-legal-links a:first-child{ padding-left: 0; }
}


/* ==========================================================================
   SECTION 1 — matched to 01-hero.png (24 Aug 2026)
   ==========================================================================
   Measured off the reference: the copy column carries ~46% (was 44%, which
   forced the headline to overflow at the size the art actually uses), the
   buttons are 300/250px, the benefit row is divided by full-height black
   rules, and the proof ticker is icon+value on one line with the label
   beneath - it had the label on top and no icons at all. */

body.home-v2 .home-hero{
  padding: 26px var(--sg-gutter) 0;
}
/* min-height:600px REMOVED (Andy, 24 Aug 2026). The grid is
   align-items:center, so a forced 600px row left BOTH columns floating in
   it: the photo (532px tall) sat 34px below the row's top, which put 60px
   of air above the photo while every other gap on the site is 26px. With
   the min-height gone the row is exactly as tall as its tallest child -
   the photo - so the photo sits flush at the top and the gap above it is
   the hero's own 26px padding, matching the 26px below.

   align-items:center is KEPT deliberately: the copy column is shorter
   than the photo, so it still centres against it, which is the balance
   the original was after. Only the artificial extra height is gone. */
body.home-v2 .home-hero-grid{
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(34px, 4vw, 60px);
  /* min-height:0 is doing real work: dropping the 600px from THIS rule
     was not enough, because the earlier .home-hero-grid block near the
     top of this file also sets min-height (560px) and simply took over.
     Zeroed explicitly here rather than edited up there, so the whole
     hero-sizing decision reads in one place. The mobile breakpoints
     already zero it the same way. */
  min-height: 0;
}
body.home-v2 .home-hero-eyebrow{
  font-size: clamp(.95rem, 1.15vw, 1.15rem); letter-spacing: .16em; margin-bottom: 20px;
}
body.home-v2 .home-hero-eyebrow::after{ max-width: 300px; background: var(--sg-ink); opacity: .75; }
body.home-v2 .home-hero h1{ line-height: .9; }
body.home-v2 .home-hero-body{
  margin-top: 22px; font-size: clamp(1rem, 1.2vw, 1.28rem); line-height: 1.5;
  color: var(--sg-copy); max-width: 52ch;
}
body.home-v2 .home-hero-actions{ gap: 18px; margin-top: 30px; }
body.home-v2 .home-hero-actions .sg-button--primary{ min-width: 300px; }
body.home-v2 .home-hero-actions .sg-button--secondary{ min-width: 250px; }

/* benefit row: full-height thin black rules between three items */
body.home-v2 .home-hero-benefits{ margin-top: 34px; gap: 0; align-items: stretch; }
body.home-v2 .home-hero-benefit{
  gap: 11px; padding: 2px clamp(16px,1.8vw,26px); border-right: 0;
  font-size: clamp(.78rem, .9vw, .9rem); letter-spacing: .05em; align-items: center;
}
body.home-v2 .home-hero-benefit:first-child{ padding-left: 0; }
body.home-v2 .home-hero-benefit + .home-hero-benefit{ border-left: 1px solid var(--sg-ink); }
body.home-v2 .home-hero-benefit:last-child{ padding-right: 0; }
body.home-v2 .home-hero-benefit svg{ width: 23px; height: 23px; }

body.home-v2 .home-hero-media{ aspect-ratio: 1.28 / 1; min-height: 520px; border-radius: 6px; }

/* --- proof ticker: icon + value on one row, label beneath ---------------- */
body.home-v2 .home-proof{
  margin-top: clamp(26px,3vw,42px); min-height: 104px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
body.home-v2 .home-proof-item{
  gap: 7px; padding: 16px 10px; border-right: 1px solid var(--sg-line);
}
body.home-v2 .home-proof-live{ border-right: 1px solid var(--sg-line); }
body.home-v2 .home-proof-live-label{
  display: flex; align-items: center; gap: 9px;
  font-family: var(--sg-font-condensed); font-weight: 800;
  font-size: clamp(.85rem,1vw,1rem); letter-spacing: .16em; text-transform: uppercase;
  color: var(--sg-red);
}
body.home-v2 .home-proof-value{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--sg-red);
}
body.home-v2 .home-proof-value svg{ width: 24px; height: 24px; flex: none; }
body.home-v2 .home-proof-value b{
  font-family: var(--sg-font-display); font-weight: 400;
  font-size: clamp(1.6rem, 2.2vw, 2.25rem); line-height: 1; letter-spacing: .01em;
}
body.home-v2 .home-proof-label{
  font-family: var(--sg-font-condensed); font-weight: 700;
  font-size: clamp(.72rem,.85vw,.85rem); letter-spacing: .1em; text-transform: uppercase;
  color: var(--sg-copy);
}

@media (max-width: 1023px){
  body.home-v2 .home-hero-benefits{ flex-wrap: wrap; }
  body.home-v2 .home-hero-benefit{ padding-left: 0; border-left: 0 !important; }
  body.home-v2 .home-hero-benefit{ flex: 0 0 100%; margin-bottom: 8px; }
}
@media (max-width: 767px){
  body.home-v2 .home-hero-media{ min-height: 260px; aspect-ratio: 4/5; }
}


/* ==========================================================================
   TOP-TO-BOTTOM AUDIT FIXES (24 Aug 2026)
   ==========================================================================
   Found by measuring the live page rather than eyeballing it. */

/* 1. THE FOOTER WAS BEING SHRINK-WRAPPED. smackagram.css carries
      `html body footer{display:flex!important; flex-direction:column;
      align-items:center}` for the sitewide footer. That turned this
      footer into a centred column flex container, so its grid row
      collapsed to 1202px and its legal row to 756px instead of both
      filling the 1320px measure - which is why the legal line sat
      floating in the middle instead of spanning the page. Equal
      !important, higher specificity, so this wins. */
body.home-v2 .home-footer{
  display: block !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 0 !important;
}

/* 2. The red band's copy sat 235px from the edge; the reference starts it
      at roughly 6% of the viewport. Drop the 1320px cap here - this band
      is full-bleed art, not a contained column. */
body.home-v2 .home-closer-inner{
  max-width: none;
  padding: clamp(48px,5.6vw,84px) clamp(28px,6vw,100px);
}
/* 3. ...and the sub was breaking to three lines; the reference is one. */
body.home-v2 .home-closer-sub{ max-width: none; }

/* 4. The two product cards' blurbs run 2 and 3 lines, which pushed their
      meta strips 24px out of alignment with each other. Reserve the
      taller of the two so every row below lines up across both cards. */
body.home-v2 .home-product-blurb{ min-height: 4.5em; max-width: 38ch; }

/* 5. Smacks-of-the-Day cards carried 134px of dead space between the meta
      line and the player. The reference card is tighter. */
body.home-v2 .home-sotd-wrap .sotw-card{ min-height: 366px !important; }

/* 6. The SmackZone yard ticks read too heavy against the tiles. */
body.home-v2 .home-zone::before,
body.home-v2 .home-zone::after{
  opacity: .3; width: 18px;
  background-image: repeating-linear-gradient(
    180deg, rgba(225,6,0,.5) 0 2px, transparent 2px 40px);
}


/* ==========================================================================
   SMALL-SCREEN GUARD — MUST STAY LAST IN THIS FILE
   ==========================================================================
   Everything below re-asserts the narrow-width rules that later
   section-matching passes accidentally overrode.

   The concrete bug this caught: the hero's
   `.sg-button--primary{min-width:300px}` (added when matching 01-hero.png)
   sits AFTER the @media(max-width:767px) block that zeroes it. Equal
   specificity, later in the source, so it won at EVERY width - including
   320px, where a 300px button inside a 280px content column pushed the
   whole page sideways. Same trap applies to any fixed width added by a
   future section pass, so new rules go ABOVE this block, never below. */

@media (max-width: 1023px){
  body.home-v2 .home-hero-grid{ grid-template-columns: 1fr !important; min-height: 0; }
  body.home-v2 .home-hero-media{ order: -1; }
  body.home-v2 .home-products{ grid-template-columns: 1fr !important; }
  body.home-v2 .home-feature-row.is-media-left,
  body.home-v2 .home-feature-row.is-media-right{ grid-template-columns: 1fr !important; }
  body.home-v2 .home-feature-row.is-media-right .home-feature-media{ order: 0; }
  body.home-v2 .home-zone-grid{ grid-template-columns: repeat(2, 1fr) !important; }
  body.home-v2 .home-closer-inner{ grid-template-columns: 1fr !important; }
}

@media (max-width: 767px){
  /* the actual overflow fix */
  body.home-v2 .home-hero-actions{ flex-direction: column; }
  body.home-v2 .home-hero-actions .sg-button,
  body.home-v2 .home-hero-actions .sg-button--primary,
  body.home-v2 .home-hero-actions .sg-button--secondary{
    width: 100% !important; min-width: 0 !important;
  }
  body.home-v2 .home-hero-benefits{ flex-direction: column; gap: 10px; }
  body.home-v2 .home-hero-benefit{
    border-left: 0 !important; padding-left: 0 !important; width: 100%;
  }
  body.home-v2 .home-proof{
    grid-auto-flow: column; grid-auto-columns: minmax(150px,1fr);
    grid-template-columns: none !important; overflow-x: auto; scrollbar-width: none;
  }
  body.home-v2 .home-proof::-webkit-scrollbar{ display: none; }

  body.home-v2 .home-feature-pills{ flex-wrap: wrap !important; }
  body.home-v2 .home-feature-pill{
    border-left: 0 !important; padding-left: 0 !important; margin-right: 16px;
  }
  body.home-v2 .home-zone-grid{
    grid-template-columns: none !important; grid-auto-flow: column;
    grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body.home-v2 .home-zone-grid::-webkit-scrollbar{ display: none; }
  body.home-v2 .home-zone-tile{ scroll-snap-align: start; }

  body.home-v2 .home-sotd-cta{ grid-template-columns: 1fr; }
  body.home-v2 .home-sotd-cta-btn{
    clip-path: none; margin-right: 0; padding: 0 24px; min-height: 68px; border-radius: 3px;
  }
  body.home-v2 .home-sotd-cta-label{ padding-right: 0; margin-bottom: 14px; }

  body.home-v2 .home-closer-btn{ max-width: none; min-height: 72px; }
  body.home-v2 .home-footer-grid{ grid-template-columns: 1fr !important; }
  body.home-v2 .home-footer-col{
    border-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
    border-top: 1px solid var(--sg-line); padding-top: 22px;
  }
  body.home-v2 .home-footer-col:first-child{ border-top: 0; padding-top: 0; }
}

@media (max-width: 480px){
  body.home-v2 .home-product-blurb{ min-height: 0; }
  body.home-v2 .home-sotd-wrap .sotw-prev,
  body.home-v2 .home-sotd-wrap .sotw-next{ display: none !important; }
}


/* ==========================================================================
   SECTION 5 — real stadium background (24 Aug 2026, swapped to red-light
   version same day)
   ==========================================================================
   Night-stadium shot replaces the flat #111216 + dot texture behind
   the SmackZone band. Original supplied at 2560x1600; the red-light
   replacement was supplied at 1586x992 (same ~1.6 aspect) and upscaled to
   match, so `cover` crops about 60px of width at desktop and nothing
   vertically, same as before.

   NO SCRIM. Measured the image under each piece of type after the
   cover-crop: mean luminance is 0-5 out of 255 behind the eyebrow, the
   wordmark, the subhead and the tile row - the bright floodlights sit in
   the top corners, well outside the centred heading. A darkening layer
   would only mute the photo for no readability gain. If the art is ever
   swapped for something brighter, add one here.

   The fine dot texture is kept over the top at low strength so the band
   still ties to the rest of the page. */
body.home-v2 .home-zone.sg-away-surface{
  background-color: #0a0a0c;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.035) 0 .65px, transparent .85px),
    url("/static/img/home/zone-bg.webp?v=20260824b");
  background-size: 7px 7px, cover;
  background-position: center, center;
  background-repeat: repeat, no-repeat;
}

/* ==========================================================================
   SMACKBOARD TICKER, retoned for the light theme (Andy, 24 Aug 2026)
   ==========================================================================
   The bar came back from the legacy homepage still wearing the dark theme:
   a solid red band, white mono text, gold lightning bolts and near-black
   #0D0D0D game cards. On the paper homepage that read as a strip of the
   old site pasted under the nav.

   Scoped to body.home-v2 ON PURPOSE. The source rules live in index.html's
   shared <style> block, which BOTH branches read - restyling them there
   would have dragged the legacy page (/home-v1) along with it. Everything
   below only overrides colour and edges; the scroll animation, the hover
   pause and every dimension stay exactly as they were.

   The bar is white like the nav and carries the same 2px red bottom edge,
   so nav + ticker read as one banded unit sitting above the hero rather
   than as two competing strips. Game cards go to the cream paper tone so
   they still separate from the bar behind them.
   ========================================================================== */
/* RED BAR (Andy, 24 Aug 2026) - was white with a red bottom edge. The bar
   is solid red now, so everything sitting ON it had to be re-picked for
   contrast against red rather than against white: nothing here is a
   leftover from the white version.

   No bottom border: the nav above already ends in a 2px red edge, and a
   red border on a red bar is invisible anyway - the two simply read as
   one continuous red band under the nav.

   Cards stay WHITE rather than going dark. White cards on red is the same
   figure/ground the rest of the site uses (white cards on paper), and it
   keeps the scores and action chips in the brand red instead of forcing
   them to some third colour that would only exist here. */
body.home-v2 .ticker-bar{
  background: var(--sg-red);
  border-top: 0;
  border-bottom: 0;
}
/* Fallback copy (the static lines shown when no games are on) - white on
   the red, which is what the legacy bar did too.

   THE CHILD COMBINATOR IS LOad-BEARING. Written as a descendant
   (".ticker-track span") this also matched every span INSIDE a game card -
   .tk-teams, .tk-score, .tk-tag, .tk-go, .tk-live are all spans - and at
   (0,2,1) it outranked the per-element ".tk-*" colours at (0,2,0). Result:
   white text on white cards, i.e. an unreadable ticker. The fallback lines
   are DIRECT children of .ticker-track while card spans are nested inside
   an <a>, so "> span" hits the fallback only and leaves the cards alone. */
body.home-v2 .ticker-track > span{ color: #fff; }
/* Was gold with a glow. White here: on red, gold reads as a third brand
   colour the theme does not have. */
body.home-v2 .ticker-track > span.ticker-bolt{
  color: #fff; text-shadow: none;
}
/* Real game cards. */
body.home-v2 .ticker-track a{
  background: var(--sg-white);
  border: 1px solid rgba(16,17,20,.10);
  color: var(--sg-copy);
}
body.home-v2 .ticker-track a:hover{ background: var(--sg-paper-bright); }
body.home-v2 .tk-live{ color: var(--sg-muted); }
body.home-v2 .tk-dot{ background: var(--sg-red); box-shadow: none; }
body.home-v2 .tk-teams{ color: var(--sg-ink); }
body.home-v2 .tk-at{ color: var(--sg-muted); }
body.home-v2 .tk-score{ color: var(--sg-red); }
body.home-v2 .tk-tag{ color: var(--sg-muted); }
body.home-v2 .tk-go{ border-color: var(--sg-red); color: var(--sg-red); }
body.home-v2 .tk-done{ color: var(--sg-muted); }

/* Nav link size on the home page (Andy, 24 Aug 2026): 16px -> 19px, and
   the auth links on the right (MY LOCKER / BILLING / MY PROFILE) get an
   explicit 17px. They had been inheriting the sitewide 14px, which in
   Barlow Condensed read noticeably smaller than the main links beside
   them. Condensed faces need a couple of px over the sitewide size to
   read at the same weight, which is why these are not simply 16px. */
body.home-v2 .nav-links > a,
body.home-v2 .nav-group-btn{ font-size: 17px; white-space: nowrap; }
body.home-v2 .auth-links a{ font-size: 16px; white-space: nowrap; }
/* 19px overflowed the bar at 1500px - the labels are UPPERCASE here and the
   logged-out state carries LOG IN + REGISTER, so this row is much wider than
   the sitewide one. The links were wrapping mid-label ("SEND A / SMACK") and
   PRICING was colliding with LOG IN. 17px with a tighter gap and nowrap
   holds one line; nowrap also stops a mid-label break ever coming back on a
   narrower desktop width. */
body.home-v2 .nav-links{ gap: 22px; }
body.home-v2 .auth-links{ gap: 16px; }

/* ==========================================================================
   PRODUCT CARDS: 3D LEDGE + HOVER LIFT (Andy, 24 Aug 2026)
   ==========================================================================
   The Send a Smack / Smackcast cards were flat - a soft ambient shadow and
   no hover state at all, so nothing signalled they were interactive.

   The solid offset shadow is the site's OWN 3D idiom, not a new one: the
   buttons already use "0 6px 0 var(--sg-ink)" with a -2px lift
   (.sg-button--secondary / --dark above). Reusing it means the cards read
   as the same physical material as the buttons inside them rather than as
   a different effect bolted on.

   How the lift works: the card rises 4px and the ledge grows by the same
   4px, so the BOTTOM of the ledge stays pinned to the page while the card
   face lifts off it. That is what sells the depth - matching the two
   numbers is the whole trick, and they must stay in step if either is
   retuned. The ambient shadow deepens at the same time to carry the
   distance.

   Deliberately restrained: 4px, not the 8-10px a "pop" usually means. The
   cards are ~600px wide and a big translate on something that size reads
   as the page jumping, not as a hover.
   ========================================================================== */
body.home-v2 .home-product-card{
  box-shadow: 0 5px 0 var(--sg-ink), var(--sg-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
body.home-v2 .home-product-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 9px 0 var(--sg-ink), 0 20px 38px rgba(16,17,20,0.16);
}

/* Somebody who has asked their system not to animate things means it - the
   depth stays, the movement does not. */
@media (prefers-reduced-motion: reduce){
  body.home-v2 .home-product-card{ transition: none; }
  body.home-v2 .home-product-card:hover{ transform: none; }
}

/* The home page's footer is <footer class="home-footer">, and
   "body.home-v2 .home-footer" (0,2,0) outranks smackagram.css's
   "html body footer" (0,0,3) - so the sitewide white/red footer rule does
   NOT reach it and it needs saying again here. Was --sg-paper-bright
   (#faf8f2), the same warm off-white the nav used to be. (Andy, 24 Aug 2026) */
body.home-v2 .home-footer{
  background: var(--sg-white);
  border-top: 2px solid var(--sg-red);
}

/* Smacky's trash-talk lines in the ticker (Andy, 24 Aug 2026). White on
   the red bar, with the attribution a step down in weight and opacity so
   the line reads first and the name second. Sized a touch larger than the
   old score cards - these are meant to be read as they go past, not
   scanned as data. */
body.home-v2 .ticker-track > span.tk-quote{
  display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap;
  font-family: var(--sg-font-body); font-weight: 600; font-size: 14px;
  letter-spacing: .01em; text-transform: none; color: #fff;
  margin-right: 16px;
}
body.home-v2 .ticker-track > span.tk-quote em{
  font-style: normal; font-family: var(--sg-font-condensed);
  font-weight: 700; font-size: 12.5px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
}

/* ==========================================================================
   BIG-DISC SAMPLE PLAYER (Andy, 24 Aug 2026)
   ==========================================================================
   Andy's pick from the four mockups: "Deep Stack's button placement with
   Seam Disc's card". The card itself is untouched - it keeps the 5px
   ledge + hover lift that already shipped - and the small pill player in
   the white half becomes a big red disc, centred, with a slim waveform +
   time underneath.

   A modifier on .home-mini-player rather than a new component: the JS
   (homepage-sports.js buildPlayer) finds .home-mini-play/-wave/-time by
   class inside the wrapper and never looks at layout, so every rule here
   is presentation only. The base .home-mini-player rules further up still
   apply to any future non-big use.

   The waveform is KEPT, slim under the disc, where the mockup dropped it:
   it is the scrubber and the progress display, and a 7:20 recap sample
   with no way to seek is a functional regression, not a styling choice. */
body.home-v2 .home-mini-player--big{
  flex-direction: column; gap: 12px; padding: 4px 0 0;
  border: 0; border-radius: 0; background: transparent;
}
body.home-v2 .home-mini-player--big .home-mini-play{
  width: 104px; height: 104px; border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 1px rgba(16,17,20,.18), 0 10px 22px rgba(225,6,0,.40);
  transition: transform .16s ease, box-shadow .16s ease;
}
body.home-v2 .home-mini-player--big .home-mini-play:hover{
  transform: scale(1.06);
  box-shadow: 0 0 0 1px rgba(16,17,20,.18), 0 14px 28px rgba(225,6,0,.48);
}
body.home-v2 .home-mini-player--big .home-mini-play svg{ width: 34px; height: 34px; }
body.home-v2 .home-mini-player--big .home-mini-play .ico-play{ margin-left: 6px; }

/* Play/pause swap. buildPlayer has toggled .is-playing on the button all
   along - nothing ever styled it, which was invisible on a 34px pill but
   would be an obvious flaw on a disc this size stuck on "play" while
   audio runs. Both icons ship in the button; CSS shows one at a time. */
body.home-v2 .home-mini-player--big .ico-pause{ display: none; }
body.home-v2 .home-mini-player--big .home-mini-play.is-playing .ico-play{ display: none; }
body.home-v2 .home-mini-player--big .home-mini-play.is-playing .ico-pause{ display: block; }

body.home-v2 .home-mini-player--big .home-mini-sub{
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 250px;
}
body.home-v2 .home-mini-player--big .home-mini-wave{ height: 24px; }

@media (prefers-reduced-motion: reduce){
  body.home-v2 .home-mini-player--big .home-mini-play{ transition: none; }
  body.home-v2 .home-mini-player--big .home-mini-play:hover{ transform: none; }
}

/* =======================================================================
   HERO: BARELY-SILVER + WHITE CARDS (Andy, 24 Aug 2026)
   =======================================================================
   The settled version of the Andy/David colour-scheme debate, arrived at
   through three rounds: flat light-silver (option C, #eef0f4) -> a
   distressed-steel texture Andy pulled from a ChatGPT "Steel & Red"
   comp -> "no real steel texture, just a barely silver look". This is
   that: NO texture image, pure CSS - a soft diagonal drift across four
   near-white silvers with a white light from the top-left. Reads white
   at a glance, silver when you look.

   What survived from the Steel & Red comp is its real idea: the hero
   copy, the stats bar and the promo photo become WHITE CARDS with the
   site's ink ledge, sitting on the silver ground. True-white cards on
   barely-silver is what makes the section read as designed rather than
   tinted - on the flat option C the text sat directly on the ground.

   background-image overrides .sg-paper-surface's halftone-dot layer
   (this selector is more specific and later); no !important needed. */
body.home-v2 .home-hero.sg-paper-surface{
  background-color: #eef0f4;
  background-image:
    radial-gradient(120% 90% at 18% 0%, rgba(255,255,255,.85), transparent 55%),
    linear-gradient(135deg, #f5f6f9 0%, #eaecf1 44%, #f1f3f6 62%, #e7e9ee 100%);
  background-size: auto, auto;
}
body.home-v2 .home-hero-copy{
  background: var(--sg-white); border: 1.5px solid var(--sg-ink); border-radius: 12px;
  padding: 38px 36px;
  box-shadow: 0 6px 0 var(--sg-ink), 0 16px 32px rgba(16,17,20,.12);
}
body.home-v2 .home-hero-media{
  border: 1.5px solid var(--sg-ink); border-radius: 12px;
  box-shadow: 0 6px 0 var(--sg-ink), 0 16px 32px rgba(16,17,20,.14);
}
/* The stats bar was open hairlines (border-top/bottom only); as a card it
   needs all four sides, so the two hairline sides are restated at the
   card weight rather than fighting the earlier rule with !important. */
body.home-v2 .home-proof{
  background: var(--sg-white);
  border: 1.5px solid var(--sg-ink);
  border-top: 1.5px solid var(--sg-ink); border-bottom: 1.5px solid var(--sg-ink);
  border-radius: 12px; padding: 12px 28px;
  box-shadow: 0 6px 0 var(--sg-ink), 0 14px 28px rgba(16,17,20,.10);
}


/* ==========================================================================
   HOMEPAGE v3 — "broadcast editorial" preview (25 Aug 2026)
   ==========================================================================
   Renders only under body.home-v3 (the /home-v2 preview route). Nothing
   above this line is touched; nothing below it can reach the live page.
   Tokens, geometry and type sizes come from CLAUDE-HOMEPAGE-HANDOFF.md
   (the 25 Aug three-frame handoff) — 1672px reference canvas.
   ========================================================================== */

body.home-v3{
  /* Surfaces */
  --sg-paper-hero:#F3EFEC; --sg-paper-products:#FCFBFA; --sg-paper-board:#FCFBFA;
  --sg-paper-card:#F7F3F0; --sg-white:#FFFFFF;
  /* Ink */
  --sg-ink:#090A0A; --sg-panel:#050607; --sg-card-black:#121212;
  --sg-charcoal:#111214; --sg-charcoal-row:#0F1012;
  --sg-copy:#202124; --sg-muted:#626262; --sg-rule:#1A1A1A;
  --sg-rule-soft:rgba(9,10,10,.30); --sg-rule-light:rgba(255,255,255,.30);
  /* Reds */
  --sg-red:#E10600; --sg-red-hero:#E10600; --sg-red-bright:#E10600;
  --sg-red-zone:#E10600; --sg-red-hover:#B80500; --sg-red-dark:#B80500;
  /* Type */
  --sg-font-display:"Anton",Impact,sans-serif;
  --sg-font-condensed:"Barlow Condensed","Arial Narrow",sans-serif;
  --sg-font-body:Inter,"Helvetica Neue",Arial,sans-serif;
  --sg-font-mono:"JetBrains Mono",ui-monospace,monospace;
  /* Layout */
  /* THIS is the block that actually governs the live homepage - it
     re-declares both tokens after the :root set at the top of the file,
     which is why the homepage ran a 1574px column while every other page
     sat between 1112 and 1280. Both now point at the sitewide scale. */
  --sg-gutter:var(--smk-gutter); --sg-content:var(--smk-content);
  --sg-shadow-card:0 12px 26px rgba(0,0,0,.16);
  /* Two-tone dark product cards (Andy handoff, 25 Aug 2026) */
  --sg-send-card:#08090A; --sg-smackcast-card:#171819;
  --sg-smackcast-cta:#F6F1EB;
  --sg-product-shadow:0 16px 34px rgba(0,0,0,.18);
  /* was clamp(3rem,5.5vw,5.7rem) = up to 91px, which overflowed the 709px
     copy column and ran the headline under the hero artwork. */
  --hero-h1:var(--smk-h1-flagship);
  /* was clamp(2.75rem,4.67vw,4.875rem) = up to 78px, against 42-48px on
     every other page's section headings. */
  --section-h2:var(--smk-h2);
  --card-h3:clamp(2.55rem,3.59vw,3.75rem);

  background:var(--sg-paper-hero);
  color:var(--sg-copy);
  font-family:var(--sg-font-body);
  overflow-x:hidden; max-width:100vw;
}
body.home-v3 *, body.home-v3 *::before, body.home-v3 *::after{ box-sizing:border-box; }
body.home-v3 h1, body.home-v3 h2, body.home-v3 h3, body.home-v3 p{ margin:0; }
body.home-v3 a{ color:inherit; }
body.home-v3 :focus-visible{ outline:3px solid var(--sg-ink); outline-offset:3px; }
body.home-v3 .v3-daily :focus-visible,
body.home-v3 .v3-zone :focus-visible,
body.home-v3 .v3-scorepanel :focus-visible,
body.home-v3 .v3-card :focus-visible,
body.home-v3 .v3-ticker :focus-visible{ outline-color:#fff; }
body.home-v3 .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Same formula as every other page's column: the gutter is SUBTRACTED from
   the width rather than padded inside a max-width box. Both give 1280 on a
   wide screen, but the padding version stayed 52px wider at 1024 and 10px
   wider at 390 - so the homepage still stepped differently from the rest
   on the way down. */
body.home-v3 .v3-shell{ width:min(var(--smk-content), calc(100% - 2*var(--smk-gutter))); margin-inline:auto; padding-inline:0; }
body.home-v3 .v3-red{ color:var(--sg-red); }
body.home-v3 .v3-white{ color:#fff; }
body.home-v3 .v3-ink{ color:var(--sg-ink); }

/* ------------------------------- NAV restyle ------------------------------ */
/* BLACK NAV (Andy, 29 Aug 2026). The LIVE home page is body.home-v3, and
   this block - not the home-v2 one above, and not smackagram.css - is what
   actually paints its bar. All three now say the same thing. */
body.home-v3 nav{
  display:flex; align-items:center; gap:26px;
  min-height:91px; height:auto; flex-wrap:wrap; row-gap:0;
  padding-inline:39px;
  background:#0D0D0D;
  /* Was 3px solid var(--sg-ink) (near-black) - directly above the red
     ticker, that black rule read as a black border/black band sitting on
     top of the ticker (Andy, 25 Aug 2026). Red matches how v2's nav edge
     already handles the same seam. */
  border-bottom:3px solid var(--sg-red);
  position:relative; z-index:40;
}
body.home-v3 nav .brand{
  font-family:var(--sg-font-display); font-size:clamp(30px,3.1vw,52px);
  line-height:.9; letter-spacing:0; color:#FFFFFF; text-decoration:none;
}
body.home-v3 nav .brand span{ color:var(--sg-red); }
body.home-v3 nav .nav-links{
  /* display comes from smackagram.css (flex >1180px, none below - the
     drawer takes over). Declaring it here broke the mobile hide. */
  align-items:center; gap:clamp(14px,1.7vw,40px);
  margin-inline:auto;
}
body.home-v3 nav .nav-links > a,
body.home-v3 nav .nav-group-btn{
  font-family:var(--sg-font-condensed); font-size:17px; font-weight:700;
  letter-spacing:.035em; text-transform:uppercase; color:#FFFFFF !important;
  background:none; border:0; cursor:pointer; padding:10px 0; text-decoration:none;
  white-space:nowrap;
}
body.home-v3 nav .nav-links > a:hover,
body.home-v3 nav .nav-group-btn:hover{ color:var(--sg-red) !important; }
body.home-v3 nav .auth-links{ align-items:center; gap:22px; }
body.home-v3 nav .auth-links a{
  font-family:var(--sg-font-condensed); font-size:17px; font-weight:700;
  letter-spacing:.035em; text-transform:uppercase; color:#FFFFFF !important;
  text-decoration:none;
}
body.home-v3 nav .auth-links a[href="/register"]{
  background:var(--sg-red); color:#fff !important;
  min-width:119px; min-height:44px; display:inline-flex; align-items:center;
  justify-content:center; padding:0 20px; border-radius:2px;
}
body.home-v3 nav .auth-links a[href="/register"]:hover{ background:var(--sg-red-hover); }
body.home-v3 nav .nav-menu{
  background:#141416; border:2px solid var(--sg-red); border-radius:2px;
}
body.home-v3 nav .nav-menu a{ color:#FFFFFF !important; font-family:var(--sg-font-condensed); text-transform:uppercase; }
body.home-v3 .nav-toggle span{ background:#FFFFFF; }

/* -------------------------------- Ticker --------------------------------- */
/* No margin-top / border-top any more (Andy, 25 Aug 2026) - both were
   var(--sg-ink), i.e. near-black (#101114), and together with the 8px gap
   they left html's own dark background (#0D0D0D) showing through, they
   read as a solid black bar sitting on top of the red ticker. Nav's own
   border-bottom just above this (see "NAV restyle" block) was changed
   from black to red for the same reason - together those two rules were
   what actually produced the black border/black space over the ticker.
   The ticker now sits flush against nav's red 3px bottom border, which is
   the only edge it needs. */
body.home-v3 .v3-ticker{
  height:50px; background:var(--sg-red-hero); color:#fff; overflow:hidden;
  display:flex; align-items:center;
  position:relative; z-index:10;
}
body.home-v3 .v3-ticker-track{
  /* margin-right on the children rather than flex gap, so the doubled
     content divides into two byte-equal halves and the -50% translate
     loops with no seam-jump. */
  display:inline-flex; align-items:center; white-space:nowrap;
  animation:v3-scroll linear infinite; will-change:transform;
  animation-duration:60s;
}
body.home-v3 .v3-ticker-track > *{ margin-right:34px; flex:none; }
@keyframes v3-scroll{ to{ transform:translateX(-50%); } }
body.home-v3 .v3-ticker:hover .v3-ticker-track,
body.home-v3 .v3-ticker:focus-within .v3-ticker-track{ animation-play-state:paused; }
body.home-v3 .v3-tk-item{
  font-family:var(--sg-font-condensed); font-size:24px; font-weight:700;
  letter-spacing:.055em; text-transform:uppercase;
}
body.home-v3 .v3-tk-item em{ font-style:normal; opacity:.92; }
body.home-v3 .v3-tk-bolt{ width:17px; height:17px; flex:none; }
@media (prefers-reduced-motion:reduce){
  body.home-v3 .v3-ticker-track{ animation:none; }
}

/* ------------------------------ Shared bits ------------------------------ */
body.home-v3 .v3-dot{
  width:11px; height:11px; border-radius:50%; background:var(--sg-red);
  display:inline-block; flex:none;
}
body.home-v3 .v3-eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--sg-font-condensed); font-size:var(--smk-eyebrow); font-weight:700;
  letter-spacing:.055em; text-transform:uppercase; color:var(--sg-red);
}
body.home-v3 .v3-eyebrow em{ font-style:normal; }
body.home-v3 .v3-eyebrow--center{ justify-content:center; }
/* Per-section eyebrow sizes from the lower-homepage handoff: board 18-20,
   daily 17-19, zone 16-18. The 22px base belongs to the hero and products
   eyebrows, which that handoff did not touch. */
body.home-v3 .v3-eyebrow--onblack{ color:var(--sg-red-bright); font-size:18px; }
body.home-v3 .v3-eyebrow--onred{ color:var(--sg-ink); font-size:17px; letter-spacing:.09em; }

body.home-v3 .v3-h1{
  font-family:var(--sg-font-display); font-weight:400; font-size:var(--hero-h1);
  line-height:.93; letter-spacing:.005em; text-transform:uppercase; color:var(--sg-ink);
  margin-top:13px; text-align:center;
  /* white-space is INHERITED as nowrap from an ancestor here, and that is
     what actually broke this headline: its authored lines measured up to
     777px inside a 614px column, could not wrap, and were painted straight
     under the hero panel - "SPORTS TRASH TALK." rendered as "SPORTS TRASH
     TA". The <br>s still give the intended three lines; this only means a
     line too long for the column wraps instead of disappearing. */
  white-space:normal; overflow-wrap:break-word;
}
body.home-v3 .v3-h2{
  font-family:var(--sg-font-display); font-weight:400; font-size:var(--section-h2);
  line-height:.95; letter-spacing:.004em; text-transform:uppercase; color:var(--sg-ink);
}
body.home-v3 .v3-h2--center{ text-align:center; margin-top:10px; }
/* Sub-line under the products headline (Andy, 25 Aug 2026). Condensed, a
   clear step down from the Anton h2 so it reads as support, not a second
   headline. LOSER is the only red word. */
body.home-v3 .v3-h2-sub{
  font-family:var(--sg-font-condensed); font-weight:700; font-size:clamp(18px,1.55vw,24px);
  letter-spacing:.085em; text-transform:uppercase; color:var(--sg-copy);
  text-align:center; margin-top:12px;
}
body.home-v3 .v3-h2--onblack{ color:#fff; font-size:clamp(2.2rem,2.85vw,2.9375rem); line-height:1.05; }
body.home-v3 .v3-h2--zone{ color:var(--sg-ink); font-size:clamp(2.3rem,3.05vw,3.1875rem); }
body.home-v3 .v3-body{ font-size:var(--smk-body); line-height:1.5; color:var(--sg-copy); }
body.home-v3 .v3-body--onblack{ color:#EDEAE6; }
body.home-v3 .v3-body--onred{ color:#14090A; }

body.home-v3 .v3-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  white-space:nowrap;
  height:var(--smk-btn-h); padding:0 30px; border-radius:2px; cursor:pointer;
  font-family:var(--sg-font-condensed); font-size:var(--smk-btn-size); font-weight:700;
  letter-spacing:.065em; text-transform:uppercase; text-decoration:none;
  transition:background-color .15s ease, transform .15s ease, color .15s ease;
  min-height:44px; min-width:44px; border:0;
}
body.home-v3 .v3-btn:hover{ transform:translateY(-1px); }
body.home-v3 .v3-btn--red{ background:var(--sg-red); color:#fff; }
body.home-v3 .v3-btn--red:hover{ background:var(--sg-red-hover); }
body.home-v3 .v3-btn--ghost{
  background:transparent; color:var(--sg-ink); border:3px solid var(--sg-ink);
}
body.home-v3 .v3-btn--ghost:hover{ background:var(--sg-ink); color:#fff; }
body.home-v3 .v3-btn--ink,
body.home-v3 .v3-btn--black{ background:var(--sg-ink); color:#fff; }
body.home-v3 .v3-btn--ink:hover, body.home-v3 .v3-btn--black:hover{ background:#000; }
/* SmackCast CTA (handoff item 9): off-white, black label and arrow, a crisp
   1px red edge. Deliberately NOT red - it is the hierarchy split between the
   two product cards, so do not "fix" it to match Send a Smack. */
body.home-v3 .v3-btn--offwhite{
  background:var(--sg-smackcast-cta); color:var(--sg-ink);
  border:1px solid var(--sg-red);
}
body.home-v3 .v3-btn--offwhite:hover{ background:#FFFFFF; }
body.home-v3 .v3-arrow--red{ color:var(--sg-red-bright); }

/* Circular play controls — the only circles on the page */
/* GLASS DOME play button (Andy's pick, 25 Aug 2026): a lit red orb -
   radial light from the upper-left, a hard glass highlight cap, and a
   shaded lower bowl, over a soft ground shadow. One rule so the hero,
   both product cards and Daily Smack all read as the same object. */
body.home-v3 .v3-play{
  position:relative; border-radius:50%; color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  border:4px solid var(--sg-ink);
  background:radial-gradient(circle at 32% 24%,
    #E10600 0%, var(--sg-red) 42%, var(--sg-red-dark) 78%, #6E0304 100%);
  box-shadow:inset 0 -10px 18px rgba(0,0,0,.45), 0 12px 22px rgba(0,0,0,.30);
  transition:filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.home-v3 .v3-play::before{   /* glass highlight cap */
  content:""; position:absolute; left:16%; right:26%; top:8%; height:34%;
  border-radius:50%; pointer-events:none; z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.05));
}
body.home-v3 .v3-play:hover{
  filter:brightness(1.08); transform:translateY(-2px);
  box-shadow:inset 0 -10px 18px rgba(0,0,0,.45), 0 16px 26px rgba(0,0,0,.34);
}
body.home-v3 .v3-play svg{ width:38%; height:38%; position:relative; z-index:3;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
body.home-v3 .v3-play .v3-ic-play{ margin-left:6%; }
body.home-v3 .v3-play .v3-ic-pause{ display:none; }
body.home-v3 .v3-play.is-playing .v3-ic-play{ display:none; }
body.home-v3 .v3-play.is-playing .v3-ic-pause{ display:block; margin-left:0; }
body.home-v3 .v3-play--hero{ width:108px; height:108px; }
body.home-v3 .v3-play--card{ width:74px; height:74px; margin-inline:14px; }
/* 110px with a THIN white ring (2px, not the 4px ink border the other
   discs carry) plus a soft red halo and a dark drop - the handoff's
   "subtle red glow and dark shadow". */
body.home-v3 .v3-play--daily{
  width:110px; height:110px; margin-inline:18px;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:inset 0 -10px 18px rgba(0,0,0,.45),
             0 0 26px 4px rgba(225,6,0,.38),
             0 12px 26px rgba(0,0,0,.5);
}

/* Waveforms */
body.home-v3 .v3-wave{
  display:flex; align-items:center; gap:2px; height:44px; flex:1; min-width:0;
  cursor:pointer;
}
body.home-v3 .v3-wave i{
  flex:1; min-width:1px; background:var(--sg-ink); opacity:.85; border-radius:1px;
}
body.home-v3 .v3-wave i.lit{ background:var(--sg-red); opacity:1; }
/* Handoff item 7: "white/gray/red waveforms". Unplayed bars are white at
   low opacity (dim RED on a near-black card was almost invisible); the
   played portion burns red, so the bar still reads as progress. */
body.home-v3 .v3-card .v3-wave i{ background:#FFFFFF; opacity:.45; }
body.home-v3 .v3-card .v3-wave i.lit{ background:var(--sg-red); opacity:1; }
body.home-v3 .v3-wave--daily i{ background:rgba(255,255,255,.72); }
body.home-v3 .v3-wave--daily i.lit{ background:var(--sg-red-bright); }
body.home-v3 .v3-audio-error{
  font-family:var(--sg-font-condensed); font-size:15px; font-weight:600;
  letter-spacing:.04em; color:var(--sg-red-dark); margin-top:6px;
}
body.home-v3 .v3-card .v3-audio-error,
body.home-v3 .v3-daily .v3-audio-error{ color:#E10600; }

/* --------------------------------- HERO ---------------------------------- */
/* FULL-BLEED HERO (Andy, 26 Aug 2026). Copy aligns to the content column,
   artwork runs to the viewport's right edge and meets the band's top and
   bottom. Grid template is the sitewide --smk-hero-cols. */
body.home-v3 .v3-shell.v3-hero-grid{
  width:100%; max-width:none; margin:0; padding:0;
  grid-template-columns:var(--smk-hero-cols); column-gap:0;
  min-height:var(--smk-hero-h);   /* the one sitewide hero band */
}
body.home-v3 .v3-hero-copy{ grid-column:copy-start / copy-end; max-width:none;
  padding-right:clamp(24px,2.6vw,44px);
  /* centred inside the fixed band, the way SmackCast's copy column is */
  display:flex; flex-direction:column; justify-content:center; }
body.home-v3 .v3-hero-panel{
  min-height:var(--smk-hero-h);
  grid-column:copy-end / full-end;
  margin-right:0; margin-left:0;   /* the bleed is the grid's job now */
  align-self:stretch;
}
body.home-v3 .v3-hero{
  /* Andy's supplied paper/yard-markings plate (25 Aug 2026). The full-width
     red line closing the hero is the section's own 4px border - unchanged. */
  background:
    url("/static/img/home/hero-paper-v3.webp?v=20260825r19") center / cover no-repeat,
    var(--sg-paper-hero);
  /* Equal breathing room around the panel (Andy, 25 Aug 2026): the same
     38px gap on top, bottom and right of the broadcast panel. */
  padding-top:0; padding-bottom:0;
  padding-inline:0; /* the legacy page's bare section{padding:64px 24px} rule
                       otherwise leaks 24px side padding in here */
  border-bottom:4px solid var(--sg-red);
}
body.home-v3 .v3-hero-grid{
  /* Panel never crosses the page's center line (Andy, 25 Aug 2026):
     copy takes the left half, the panel starts at 50% and stretches to
     match the copy column's height so it reaches near the bottom rule. */
  display:grid; grid-template-columns:48% 50%; column-gap:2%;
  align-items:stretch;
}
body.home-v3 .v3-hero-grid > *{ min-width:0; } /* a long headline can never widen the page */
body.home-v3 .v3-hero-copy{ max-width:709px; }
/* v4 hero (Andy, 25 Aug 2026): eyebrow, headline, tagline and description
   are one CENTRED stack inside the left column. The audio module and the
   two CTAs keep their existing alignment - they were explicitly preserved. */
body.home-v3 .v3-hero-tagline{
  font-family:var(--sg-font-condensed); font-weight:800;
  /* Capped at 32px: measured, 33px is where "EVERY LOSS DESERVES A RING."
     breaks onto a second line inside the 602px copy column. */
  font-size:clamp(23px,2.2vw,32px); line-height:1.1; letter-spacing:.05em;
  text-transform:uppercase; color:var(--sg-ink);
  text-align:center; margin-top:12px;
}
body.home-v3 .v3-hero-body{
  /* size / weight / line-height deliberately unchanged from the previous
     hero - only the alignment and the measure moved. max-width is the
     "controlled maximum width": it is what breaks this sentence into four
     balanced centred lines instead of three long ones. */
  font-size:var(--smk-body-flagship); font-weight:500; line-height:1.45;
  max-width:700px; margin-top:14px;
  text-align:center; margin-inline:auto;
}
/* ===================================================================
   HERO AUDIO - RING PULSE, LAYOUT B (Andy, 26 Aug 2026)
   ===================================================================
   Was a 108px glass dome in a hard-cornered 3px box. Now: rounded
   rectangle, a 72px flat-lit control with three rings pushing out of it
   while the audio runs, and the label and runtime stacked centred above
   and below - the arrangement that was already here, tightened around a
   much smaller button. Capped to the copy column's own measure so it can
   never outgrow the headline above it.
   =================================================================== */
body.home-v3 .v3-hero-audio{
  text-align:center;
  border:2px solid var(--sg-red); border-radius:14px;
  padding:13px 22px 13px; margin:16px auto 0; max-width:600px;
  cursor:pointer; transition:box-shadow .18s ease;
}
body.home-v3 .v3-hero-audio:hover{ box-shadow:0 0 22px rgba(225,6,0,.22); }
body.home-v3 .v3-hero-audio-title{
  font-family:var(--sg-font-condensed); font-size:18px; font-weight:800;
  letter-spacing:.045em; text-transform:uppercase; color:var(--sg-ink);
}
body.home-v3 .v3-hero-audio-sub{
  font-family:var(--sg-font-condensed); font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--sg-copy);
  opacity:.78; margin-top:8px;
}
body.home-v3 .v3-hero-audio-row{ display:flex; align-items:center; margin-top:10px; }
body.home-v3 .v3-hero-audio .v3-wave{ height:26px; }

/* the control itself */
body.home-v3 .v3-play--hero{
  width:60px; height:60px; margin-inline:14px; border:0;
  background:linear-gradient(180deg,#FF3A30,var(--sg-red) 38%,var(--sg-red-dark));
  box-shadow:0 8px 16px rgba(225,6,0,.34),
             inset 0 2px 0 rgba(255,255,255,.5),
             inset 0 -4px 8px rgba(0,0,0,.3);
}
body.home-v3 .v3-play--hero::before{ display:none; }  /* the old glass cap */
body.home-v3 .v3-play--hero svg{ width:20px; height:20px; }

/* three rings, only while it is actually playing */
body.home-v3 .v3-rip{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--sg-red); opacity:0; pointer-events:none;
}
body.home-v3 .v3-play--hero.is-playing .v3-rip{ animation:v3ripple 1.9s ease-out infinite; }
body.home-v3 .v3-play--hero.is-playing .v3-rip:nth-child(2){ animation-delay:.63s; }
body.home-v3 .v3-play--hero.is-playing .v3-rip:nth-child(3){ animation-delay:1.26s; }
/* The ring starts ON the disc's edge - anything smaller is red-on-red and
   invisible - and pushes out from there. */
@keyframes v3ripple{
  0%  { transform:scale(1);    opacity:.85; }
  100%{ transform:scale(1.85); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  body.home-v3 .v3-play--hero.is-playing .v3-rip{ animation:none; opacity:.35; }
}
/* .v3-hero-actions is gone from the markup - rules kept out of the way. */

}

/* --------------------------------------------------------------------
   NARROW: the full-bleed hero grid is a DESKTOP arrangement. Its rule
   (body.home-v3 .v3-shell.v3-hero-grid) is two classes deep, so it beat
   the existing @media(max-width:1023px) stack rule and left the copy
   column pinned at 47% of the viewport - 165px at phone width. Restate
   the stack at the same specificity so it wins inside the query.
   -------------------------------------------------------------------- */
@media (max-width:1023px){
  body.home-v3 .v3-shell.v3-hero-grid{
    grid-template-columns:1fr; row-gap:36px;
    width:min(var(--smk-content), calc(100% - 2 * var(--smk-gutter)));
    margin-inline:auto; padding-inline:0;
  }
  body.home-v3 .v3-hero-copy{ grid-column:1 / -1; padding-right:0;
    margin-inline:auto; }   /* the copy stack is centre-set - keep it centred */
  body.home-v3 .v3-hero-panel{ grid-column:1 / -1; }
}

body.home-v3 .v3-btn--ghost.is-playing{ background:var(--sg-ink); color:#fff; }
/* .v3-proof (REAL CALL / PERSONALIZED / ANONYMOUS / LESS THAN $1) was
   removed with the v4 hero - rules deleted with the markup so nothing is
   left to re-enable by accident. */

/* Broadcast panel */
body.home-v3 .v3-hero-panel{
  /* Andy's supplied panel plate (25 Aug 2026): dark field + red broadcast
     rings baked into the image. The CSS-built grid/rings it replaces are
     retired below; every overlay (status, lockup, corners, ticks, eq,
     Smacky) stays layered on top exactly as before. --sg-panel underpaints
     while the image loads. */
  position:relative; background:
    url("/static/img/home/hero-panel-v3.webp") center / cover no-repeat,
    var(--sg-panel);
  border-top:3px solid var(--sg-red);
  min-height:520px; height:auto;
  /* THE NEGATIVE-MARGIN BLEED IS GONE (Andy, 26 Aug 2026). It used to drag
     the panel's right edge out to 38px from the viewport; the panel now sits
     in the shared hero grid's art track, which already runs to the edge. Left
     in, it pulled a further 312px past the viewport and put the homepage into
     horizontal scroll. */
  margin-right:0; margin-left:0;
}
body.home-v3 .v3-panel-rings{ display:none; } /* rings are in the plate now */
body.home-v3 .v3-corner{
  position:absolute; width:26px; height:26px; pointer-events:none;
  border:0 solid rgba(255,255,255,.75);
}
body.home-v3 .v3-corner.tl{ top:18px; left:18px; border-top-width:2px; border-left-width:2px; }
body.home-v3 .v3-corner.tr{ top:18px; right:18px; border-top-width:2px; border-right-width:2px; }
body.home-v3 .v3-corner.bl{ bottom:18px; left:18px; border-bottom-width:2px; border-left-width:2px; }
body.home-v3 .v3-corner.br{ bottom:18px; right:18px; border-bottom-width:2px; border-right-width:2px; }
body.home-v3 .v3-panel-status{
  position:absolute; top:26px; left:30px; display:flex; align-items:center; gap:10px;
  font-family:var(--sg-font-condensed); font-size:18px; font-weight:700;
  letter-spacing:.09em; color:#fff; z-index:3;
}
body.home-v3 .v3-panel-incoming{ position:absolute; top:22px; right:30px; text-align:right; z-index:3; }
body.home-v3 .v3-panel-incoming-label{
  font-family:var(--sg-font-mono); font-size:13px; font-weight:500;
  letter-spacing:.1em; color:rgba(255,255,255,.8);
}
body.home-v3 .v3-panel-lockup{
  font-family:var(--sg-font-display); font-size:30px; line-height:1; color:#fff; margin-top:2px;
}
body.home-v3 .v3-panel-lockup span{ color:var(--sg-red-bright); }
body.home-v3 .v3-panel-minwave{ width:150px; height:14px; margin-top:8px; margin-left:auto;
  background:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 4px);
  opacity:.7; mask-image:linear-gradient(0deg,transparent 0,black 30%,black 70%,transparent 100%);
}
body.home-v3 .v3-hero-panel picture{
  position:absolute; left:0; right:0; top:6%; bottom:-3%;
  display:flex; align-items:flex-end; justify-content:center; z-index:2;
}
body.home-v3 .v3-hero-smacky{
  max-height:100%; max-width:74%; width:auto; height:auto; object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.18));
}
body.home-v3 .v3-panel-ticks{ position:absolute; left:30px; bottom:24px; display:flex; gap:7px; z-index:3; }
body.home-v3 .v3-panel-ticks i{ width:26px; height:6px; background:#3A3A3A; }
body.home-v3 .v3-panel-ticks i.on{ background:var(--sg-red-bright); }
body.home-v3 .v3-panel-eq{ position:absolute; right:30px; bottom:20px; display:flex; align-items:flex-end; gap:4px; z-index:3; }
body.home-v3 .v3-panel-eq i{ width:4px; background:rgba(255,255,255,.7); }
body.home-v3 .v3-panel-eq i:nth-child(1){height:8px} body.home-v3 .v3-panel-eq i:nth-child(2){height:14px}
body.home-v3 .v3-panel-eq i:nth-child(3){height:10px} body.home-v3 .v3-panel-eq i:nth-child(4){height:16px}
body.home-v3 .v3-panel-eq i:nth-child(5){height:7px}

/* ------------------------------- PRODUCTS -------------------------------- */
body.home-v3 .v3-products{
  /* Andy's supplied paper/field-markings plate (25 Aug 2026), full-bleed
     behind the section. The red lines bounding it are the existing 4px
     section dividers - the hero's border-bottom above, this section's
     border-bottom below - deliberately NOT widened. */
  background:
    url("/static/img/home/products-paper-v3.webp?v=20260825b") center / cover no-repeat,
    var(--sg-paper-products);
  padding:40px 0 44px;
  border-bottom:4px solid var(--sg-red);
}
body.home-v3 .v3-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:53px;
  margin-top:56px; align-items:stretch;
}
body.home-v3 .v3-card{
  position:relative; border:3px solid var(--sg-ink); border-radius:2px;
  box-shadow:var(--sg-product-shadow); padding:36px;
  display:flex; flex-direction:column; overflow:hidden;
  /* isolation: the microphone art blends with mix-blend-mode:screen and must
     blend against ITS OWN CARD, not whatever is painted behind the section.
     Without a stacking context here the blend reaches the page background. */
  isolation:isolate;
  transition:transform .22s ease, box-shadow .22s ease;
}
/* Slight 3D pop on hover. The red/pink glow that used to sit behind the card
   is GONE (two-tone dark handoff, item 5: "Remove every red/pink glow") -
   the lift and a deeper neutral shadow carry the interaction now. */
body.home-v3 .v3-card:hover{
  transform:perspective(1100px) translateY(-6px) scale(1.012);
  box-shadow:0 22px 40px rgba(0,0,0,.26);
}
@media (prefers-reduced-motion:reduce){
  body.home-v3 .v3-card:hover{ transform:none; }
}
body.home-v3 .v3-card::before{ /* inner red keyline */
  content:""; position:absolute; inset:9px; border:1px solid var(--sg-red);
  pointer-events:none; border-radius:1px;
}
/* TWO-TONE DARK (Andy handoff, 25 Aug 2026). Both cards are dark; the right
   one is deliberately a step LIGHTER so the pair reads as two tones rather
   than one slab. This replaces the r11 decision that put both cards on the
   paper theme - the handoff reverses it, on Andy's approved reference
   (reference-02-products-two-tone-dark-final.png). */
body.home-v3 .v3-card--send{ background:var(--sg-send-card); color:#fff; }
body.home-v3 .v3-card--cast{ background:var(--sg-smackcast-card); color:#fff; }
body.home-v3 .v3-card-status{
  display:flex; align-items:center; gap:9px; justify-content:flex-start;
  font-family:var(--sg-font-condensed); font-size:18px; font-weight:700;
  letter-spacing:.07em; color:#fff;
  border-bottom:1px solid var(--sg-red); padding-bottom:14px; margin-bottom:22px;
  position:relative; z-index:2;
}
body.home-v3 .v3-card-title{
  font-family:var(--sg-font-display); font-weight:400; font-size:var(--card-h3);
  line-height:.96; text-transform:uppercase; position:relative; z-index:2;
}
body.home-v3 .v3-card-copy{
  font-size:20px; font-weight:500; line-height:1.5; margin-top:18px;
  max-width:520px; position:relative; z-index:2;
}
body.home-v3 .v3-card .v3-card-copy{ color:#E9E7E4; }
body.home-v3 .v3-card-copy-red{ color:var(--sg-red-bright); font-weight:700; line-height:1.32; }
body.home-v3 .v3-card-meta{
  display:flex; gap:14px; flex-wrap:wrap;
  font-family:var(--sg-font-condensed); font-size:18px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; margin-top:26px;
  position:relative; z-index:2;
}
body.home-v3 .v3-card-meta em{ font-style:normal; color:var(--sg-red); }
body.home-v3 .v3-card-player{ text-align:center; margin-top:26px; position:relative; z-index:2; }
body.home-v3 .v3-card-player-label{
  font-family:var(--sg-font-condensed); font-size:18px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; margin-bottom:12px;
}
body.home-v3 .v3-card-player-row{ display:flex; align-items:center; }
body.home-v3 .v3-card-player-time{ font-family:var(--sg-font-mono); font-size:15px; font-weight:500; margin-top:10px; }
body.home-v3 .v3-card-player-cap{
  font-family:var(--sg-font-condensed); font-size:16px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; margin-top:4px;
}
body.home-v3 .v3-card-foot{
  display:flex; align-items:center; justify-content:center; gap:20px;
  border-top:1px solid var(--sg-rule-light); padding-top:24px; margin-top:auto;
  position:relative; z-index:2;
}
body.home-v3 .v3-card .v3-card-foot{ border-top-color:rgba(255,255,255,.3); }
body.home-v3 .v3-card-player{ margin-top:auto; padding-top:26px; }
body.home-v3 .v3-card-price{
  font-family:var(--sg-font-condensed); font-size:22px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:#fff;
  margin-top:10px; position:relative; z-index:2;
}
/* Tagline under the price (Andy, 30 Aug 2026: "the future of sports trash
   talk"). Bold white condensed line between the price and the description,
   matching the reference card. */
body.home-v3 .v3-card-hook{
  font-family:var(--sg-font-condensed); font-size:23px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; color:var(--sg-red-bright);
  margin-top:16px; line-height:1.15; text-align:center;
  position:relative; z-index:2;
}
body.home-v3 .v3-btn--card{ height:62px; font-size:22px; padding:0 48px; min-width:320px; }
/* Decorative product art (two-tone dark handoff, 25 Aug 2026). Both sit
   BEHIND the copy at z-index 0 - every text/control block in the card
   already carries z-index 2. The old multiply + 205deg mask treatment is
   gone with the paper cards: these two sources are cut for a dark card. */
body.home-v3 .v3-card-watermark{
  position:absolute; pointer-events:none; user-select:none; z-index:0;
}
/* Handset: a real transparent PNG, so it needs no blend mode and no mask -
   just opacity. Mirrored so it faces INWARD toward the copy (Andy: mirror in
   CSS, never ship a second bitmap). */
/* Placement is MEASURED, not eyeballed. Both sources carry a lot of empty
   space around the object, so a plain `right:12px` left the handset ~45px
   short of the frame while its earpiece still crossed the red status rule.
   Measured transparent/dark margins: the phone's visible metal ends 30.3%
   of the image width short of the right edge and starts 4.3% down; the mic
   is 15.3% and 6.4%. The calc()s below cancel those margins against the
   rendered width, so the VISIBLE art (not the file's edge) lands ~15px from
   the padding box - clear of the 9px red keyline by ~5px - at every width
   the clamp produces. `top` puts the visible art ~16px BELOW the status
   rule, which sits about 72px down (36px card padding + the 18px status
   line + its 14px padding-bottom). */
body.home-v3 .v3-card-watermark--phone{
  --art-w:clamp(210px,19vw,275px);
  width:var(--art-w); height:auto; opacity:.78;
  top:70px; right:calc(15px - 0.303 * var(--art-w));
}
body.home-v3 .v3-card-watermark--phone img{
  width:100%; height:auto; display:block;
  transform:scaleX(-1); transform-origin:center;
}
/* Microphone: NOT transparent - it ships with a near-black field matched to
   the charcoal card, which a blend mode has to erase.
   LIGHTEN, NOT SCREEN. The handoff says screen, but measured: the source
   field is rgb(21,21,21) and this card is rgb(23,24,25). screen() of those
   is ~rgb(42,42,42) - visibly LIGHTER than the card, so the art rendered as
   an obvious grey rectangle in the corner (verified in a real render).
   lighten() takes max() per channel, which resolves to exactly the card
   colour, so the field disappears completely while every pixel of metal
   brighter than the card survives. Same intent, correct operator.
   .v3-card sets isolation:isolate so this blend cannot reach the section
   background behind the card. */
body.home-v3 .v3-card-watermark--mic{
  --art-w:clamp(235px,21vw,315px);
  width:var(--art-w); height:auto;
  top:58px; right:calc(15px - 0.153 * var(--art-w));
  opacity:.58; mix-blend-mode:lighten;
}
body.home-v3 .v3-card-watermark--mic img{
  width:100%; height:auto; display:block;
}
/* ------------------------- PRODUCT FEATURE LISTS -------------------------
   Two numbered lists under the two product cards, separated by one 2px red
   rule in the centre gap (Andy, 25 Aug 2026).

   Grid is 1fr / 2px / 1fr with the SAME 53px column gap the cards use, so
   the outer edge of each list lines up exactly with the outer edge of the
   card above it, while the centre gap opens to 108px - the "generous"
   middle the brief asked for. Do not swap this for a two-column grid with a
   border-left: the divider has to be its own track to sit dead centre.

   No boxes, panels, cards or outer borders in here by design - the product
   cards stay dominant, and this reads as editorial copy, not another row of
   tiles. */
body.home-v3 .v3-features{
  display:grid; grid-template-columns:1fr 2px 1fr; column-gap:53px;
  align-items:stretch;
  margin-top:56px;   /* clear space below the product cards */
}
body.home-v3 .v3-flist{ list-style:none; margin:0; padding:0; min-width:0; }
body.home-v3 .v3-fitem{ padding:25px 0; }
body.home-v3 .v3-fitem:first-child{ padding-top:0; }
body.home-v3 .v3-fitem:last-child{ padding-bottom:0; }
/* Faint hairline BETWEEN items only - never around them. */
body.home-v3 .v3-fitem + .v3-fitem{ border-top:1px solid rgba(9,10,10,.12); }
body.home-v3 .v3-fnum{
  display:block;
  font-family:var(--sg-font-display); font-weight:400; font-size:36px;
  line-height:1; letter-spacing:.01em; color:var(--sg-red);
}
body.home-v3 .v3-fhead{
  font-family:var(--sg-font-condensed); font-weight:800; font-size:17px;
  line-height:1.2; letter-spacing:.06em; text-transform:uppercase;
  color:#0A0A0A; margin-top:8px;
}
body.home-v3 .v3-fdesc{
  font-family:var(--sg-font-body); font-weight:400; font-size:15px;
  line-height:1.45; color:#252525; margin-top:5px;
}
/* The divider: its own grid track, stretched to the height of the taller
   list. It cannot reach the cards or the section's red baseline - the 56px
   margin above and the closer line below keep it clear of both. */
body.home-v3 .v3-fdivider{ background:var(--sg-red); width:2px; align-self:stretch; }

body.home-v3 .v3-closer{
  display:flex; align-items:center; gap:24px; margin-top:44px;
  font-family:var(--sg-font-mono); font-size:17px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sg-ink);
  justify-content:center; white-space:nowrap;
}
body.home-v3 .v3-closer-rule{ flex:1; height:1px; background:var(--sg-ink); position:relative; }
body.home-v3 .v3-closer-rule:first-child::after,
body.home-v3 .v3-closer-rule:last-child::before{
  content:""; position:absolute; top:-1px; width:22px; height:3px; background:var(--sg-red);
}
body.home-v3 .v3-closer-rule:first-child::after{ right:0; }
body.home-v3 .v3-closer-rule:last-child::before{ left:0; }

/* ==========================================================================
   LOWER HOMEPAGE — SMACK BOARD / DAILY SMACK / SMACK ZONE / CLOSING
   Rebuilt to Andy's 25 Aug 2026 lower-homepage handoff.
   Square corners throughout, thin red rules between sections, no gradients
   or decorative shadows. The stadium-bezel scoreboard frame that used to
   live here (metal gradient, corner screws, 10px radius) was retired by
   that handoff - it calls for a flat #050607 panel with a red top edge.
   ========================================================================== */

/* ------------------------------ SMACK BOARD ------------------------------ */
body.home-v3 .v3-board{
  background:
    url("/static/img/home/board-paper-v3.webp?v=20260827w") center / cover no-repeat,
    var(--sg-paper-board);
  padding:46px 0;
  border-bottom:3px solid var(--sg-red);
}
body.home-v3 .v3-board-grid{
  display:grid; grid-template-columns:42% 58%; column-gap:3%;
  align-items:center;
}
body.home-v3 .v3-board-grid > *{ min-width:0; }
body.home-v3 .v3-h2--board{ font-size:clamp(2.6rem,4.55vw,4.75rem); line-height:.9; margin-top:16px; }
body.home-v3 .v3-board-lede{
  font-size:clamp(17px,1.2vw,20px); line-height:1.35; max-width:500px; margin-top:20px;
}
body.home-v3 .v3-board-copy .v3-btn{ margin-top:28px; }

/* Smack Board CTA (Andy, 25 Aug 2026). Was .v3-btn--outline - an off-white
   face with a 2px black edge and a black label. Now a solid red face with the
   same geometry, so the section's rhythm is unchanged and only the colour
   moves. Renamed rather than layered because .v3-btn--red is declared ~450
   lines earlier and would have lost to the outline rules on source order;
   .v3-btn--outline had exactly one consumer, this button, so nothing else
   changes. */
body.home-v3 .v3-btn--board{
  background:var(--sg-red); color:#fff;
  border:2px solid var(--sg-ink); border-radius:0;
  height:auto; font-size:18px; padding:14px 28px;
}
body.home-v3 .v3-btn--board:hover{ background:var(--sg-red-hover); color:#fff; }
body.home-v3 .v3-btn--board .v3-arrow,
body.home-v3 .v3-btn--board:hover .v3-arrow{ color:#fff; }

/* The panel: flat near-black, square, one red top edge. */
body.home-v3 .v3-scorepanel{
  background:#050607; color:#fff;
  border-top:4px solid var(--sg-red); border-radius:0;
  padding:26px 46px 30px;
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}
body.home-v3 .v3-scorepanel-head{
  font-family:var(--sg-font-condensed); font-size:18px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:#fff;
  padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.25);
}
body.home-v3 .v3-scorerow{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto;
  align-items:center; gap:18px; padding:20px 0;
  border-bottom:1px solid rgba(255,255,255,.25);
  transition:background-color .15s ease;
}
body.home-v3 .v3-scorerow:last-child{ border-bottom:0; }
/* A hover tint, NOT a card - no radius, no border, no lift. */
body.home-v3 .v3-scorerow:hover{ background:var(--sg-charcoal-row); }
body.home-v3 .v3-sr-league{
  font-family:var(--sg-font-condensed); font-size:14px; font-weight:800;
  letter-spacing:.1em; color:var(--sg-red-bright);
}
body.home-v3 .v3-sr-teams{ display:flex; align-items:center; gap:14px; min-width:0; }
body.home-v3 .v3-sr-team{ display:flex; align-items:center; gap:14px; flex:none; }
body.home-v3 .v3-sr-team b{
  font-family:var(--sg-font-display); font-weight:400; font-size:clamp(28px,2.5vw,42px);
  line-height:1; text-transform:uppercase; color:#fff; white-space:nowrap;
}
body.home-v3 .v3-sr-score{
  font-family:var(--sg-font-display); font-weight:400; font-size:clamp(30px,2.85vw,48px);
  line-height:1; color:#fff; flex:none;
}
body.home-v3 .v3-sr-vs{
  font-family:var(--sg-font-display); font-size:clamp(20px,1.7vw,28px);
  color:rgba(255,255,255,.75); flex:none;
}
/* flex:none is LOAD-BEARING. Without it the 1px rule is a shrinkable flex
   item, and on the row whose numbers run widest (DAL 20 | SF 24) the line
   collapsed to exactly 0px while every other row kept its divider - a
   one-row-only bug that is invisible in code review and obvious in a
   render. Measured: width 1px on row 1, 0px on row 2. */
body.home-v3 .v3-sr-div{
  width:1px; flex:none; align-self:stretch;
  background:rgba(255,255,255,.25); min-height:34px;
}
body.home-v3 .v3-sr-state{
  font-family:var(--sg-font-mono); font-size:clamp(14px,1.05vw,17px); font-weight:500;
  letter-spacing:.03em; text-transform:uppercase; color:#fff; white-space:nowrap;
  margin-left:auto;
}
/* Short muted divider immediately before the action - deliberately NOT a
   full-height border on the action itself. */
body.home-v3 .v3-sr-sep{ width:1px; height:22px; background:rgba(255,255,255,.25); }
body.home-v3 .v3-sr-action{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sg-font-condensed); font-size:clamp(17px,1.45vw,23px); font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--sg-red-bright);
  text-decoration:none; white-space:nowrap; min-height:44px;
}
body.home-v3 .v3-sr-action:hover{ color:var(--sg-red-hover); }
body.home-v3 .v3-sr-ring{ width:20px; height:20px; flex:none; }
body.home-v3 .v3-sr-empty{
  font-family:var(--sg-font-condensed); font-size:19px; letter-spacing:.04em;
  text-transform:uppercase; color:#EDEAE6; padding:26px 0 12px;
}

/* ------------------------------ DAILY SMACK ------------------------------ */
body.home-v3 .v3-daily{
  position:relative; overflow:hidden;
  background:var(--sg-panel);
  padding:44px 0; color:#fff;
  border-bottom:3px solid var(--sg-red);
  min-height:224px;
}
/* Stadium lights at the two far edges + a faint perspective field under the
   player. All one pseudo-free layer at very low opacity - decorative only,
   and the first thing dropped at phone width. */
body.home-v3 .v3-daily-lights{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(closest-side at 0% 22%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(closest-side at 100% 22%, rgba(255,255,255,.10), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 76px);
  background-size:44% 78%, 44% 78%, 100% 46%;
  background-position:left top, right top, center bottom;
  background-repeat:no-repeat, no-repeat, no-repeat;
}
body.home-v3 .v3-daily-grid{
  display:grid; grid-template-columns:30% 40% 30%;
  align-items:center;
  position:relative; z-index:1;
}
body.home-v3 .v3-daily-grid > *{ min-width:0; }
body.home-v3 .v3-daily-copy .v3-body{ margin-top:14px; }
body.home-v3 .v3-daily-player-row{ display:flex; align-items:center; justify-content:center; }
body.home-v3 .v3-daily-time{
  font-family:var(--sg-font-mono); font-size:18px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; text-align:center;
  margin-top:14px; color:#fff;
}
body.home-v3 .v3-daily-verdict-label{
  font-family:var(--sg-font-condensed); font-size:18px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--sg-red-bright);
}
body.home-v3 .v3-quote{
  font-family:var(--sg-font-condensed); font-size:clamp(24px,2.05vw,34px); font-weight:500;
  line-height:1.15; color:#fff; margin:10px 0 0;
}
/* Red text, no box (handoff). Still a real <button> - it drives the audio. */
body.home-v3 .v3-daily-cta{
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:0; padding:0; margin-top:16px; cursor:pointer;
  font-family:var(--sg-font-condensed); font-size:clamp(18px,1.35vw,22px); font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--sg-red-bright);
  min-height:44px; border-bottom:2px solid transparent;
  transition:border-color .15s ease, transform .15s ease;
}
body.home-v3 .v3-daily-cta:hover{ border-bottom-color:var(--sg-red-bright); transform:translateX(3px); }
body.home-v3 .v3-daily-empty{
  grid-column:1 / -1; font-family:var(--sg-font-condensed); font-size:20px;
  letter-spacing:.04em; color:#EDEAE6; text-transform:uppercase; text-align:center;
  position:relative; z-index:1;
}

/* ------------------------------- SMACK ZONE ------------------------------ */
body.home-v3 .v3-zone{
  position:relative; background:var(--sg-red); color:var(--sg-ink);
  padding:40px 0 44px; overflow:hidden; min-height:232px;
  border-bottom:0;   /* the black closing strip is the next edge */
}
body.home-v3 .v3-zone-ghost{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--sg-font-display); font-size:clamp(140px,18vw,300px);
  line-height:1; white-space:nowrap; color:transparent;
  -webkit-text-stroke:2px rgba(255,152,142,.30); pointer-events:none; user-select:none;
}
body.home-v3 .v3-zone-grid{
  display:grid; grid-template-columns:34% 66%;
  align-items:center; position:relative; z-index:1;
}
body.home-v3 .v3-zone-intro{ padding-right:30px; }
body.home-v3 .v3-zone-intro .v3-h2{ margin-top:10px; color:#fff; }
body.home-v3 .v3-zone-intro .v3-body{ margin-top:12px; }
body.home-v3 .v3-zone-intro .v3-btn{
  margin-top:24px; height:auto; font-size:18px; padding:13px 28px; border-radius:0;
}
body.home-v3 .v3-zone-nav{ display:grid; grid-template-columns:repeat(4,1fr); }
body.home-v3 .v3-zone-item{
  display:flex; flex-direction:column; gap:6px; text-decoration:none;
  border-left:1px solid var(--sg-ink); padding:14px 22px; min-height:164px;
  color:var(--sg-ink); transition:color .15s ease;
}
body.home-v3 .v3-zone-num{
  font-family:var(--sg-font-display); font-size:clamp(34px,3.2vw,52px);
  line-height:1; color:var(--sg-ink);
}
body.home-v3 .v3-zone-name{
  font-family:var(--sg-font-display); font-size:clamp(24px,2.15vw,34px);
  line-height:1; color:#fff; transition:color .15s ease;
}
body.home-v3 .v3-zone-desc{
  font-family:var(--sg-font-body); font-size:16px; font-weight:500;
  line-height:1.3; color:#fff;
}
body.home-v3 .v3-zone-arrow{
  font-size:24px; margin-top:auto; color:var(--sg-ink);
  transition:transform .15s ease;
}
body.home-v3 .v3-zone-item:hover .v3-zone-name{ color:#FFF3F1; }
body.home-v3 .v3-zone-item:hover .v3-zone-arrow{ transform:translateX(5px); }

/* --------------------------- CLOSING STATEMENT --------------------------- */
body.home-v3 .v3-statement{
  background:var(--sg-ink); color:#fff;
  font-family:var(--sg-font-display); font-weight:400;
  font-size:clamp(28px,3.5vw,58px); line-height:1.1; letter-spacing:.06em;
  text-transform:uppercase; text-align:center;
  padding:18px 24px; margin:0; white-space:nowrap;
}
body.home-v3 .v3-statement .v3-red{ color:var(--sg-red-bright); }

/* ------------------------------ RESPONSIVE ------------------------------- */
/* The full link set is wide; between the drawer breakpoint and full
   desktop, tighten type before anything can collide (handoff 12). */
@media (max-width:1500px) and (min-width:1181px){
  body.home-v3 nav .nav-links > a,
  body.home-v3 nav .nav-group-btn,
  body.home-v3 nav .auth-links a{ font-size:16px; letter-spacing:.03em; }
  body.home-v3 nav .brand{ font-size:34px; }
}
/* Below 1181px smackagram.css hides .nav-links/.auth-links and shows the
   toggle + drawer; restated here inside the v3 scope so no later v3 rule
   can ever out-rank the hide. */
@media (max-width:1180px){
  body.home-v3 nav .nav-links,
  body.home-v3 nav .auth-links{ display:none; }
}
@media (max-width:1439px){
  body.home-v3 nav{ padding-inline:32px; }
  body.home-v3 .v3-board-grid{ padding-inline:32px; }
  body.home-v3 .v3-cards{ gap:32px; }
  body.home-v3 .v3-card{ padding:30px; }
}
@media (max-width:1100px){
  body.home-v3 .v3-board-grid{ grid-template-columns:1fr; row-gap:34px; }
}
@media (max-width:1023px){
  body.home-v3 .v3-hero-grid{ grid-template-columns:1fr; row-gap:36px; }
  body.home-v3 .v3-hero-copy{ max-width:640px; }
  body.home-v3 .v3-hero-panel{ height:auto; min-height:420px; margin-right:0; }
  body.home-v3 .v3-cards{ grid-template-columns:1fr; gap:28px; }
  /* Stacked: the SAME divider element turns horizontal and, because it sits
     between the two lists in source order, it lands between them as a grid
     row with no extra markup. It is not hidden - without it the two lists
     ran straight together and read as one 01-04-01-04 list (seen in a real
     390px render), since the gap between them was smaller than the gap
     between items inside them. */
  body.home-v3 .v3-features{ grid-template-columns:1fr; row-gap:40px; margin-top:48px; }
  body.home-v3 .v3-fdivider{ width:auto; height:2px; align-self:auto; }
  body.home-v3 .v3-daily-grid{ grid-template-columns:1fr; row-gap:30px; padding-inline:32px; text-align:left; }
  body.home-v3 .v3-daily-empty{ grid-column:auto; text-align:left; }
  body.home-v3 .v3-zone-grid{ grid-template-columns:1fr; row-gap:30px; }
  body.home-v3 .v3-zone-nav{ grid-template-columns:1fr 1fr; border-top:1px solid var(--sg-ink); }
  body.home-v3 .v3-zone-item{ border-left:0; border-bottom:1px solid var(--sg-ink); }
  body.home-v3 .v3-zone-item:nth-child(2n){ border-left:1px solid var(--sg-ink); }
}
@media (max-width:767px){
  /* padding-inline override removed - the shared gutter handles this now. */
  /* min-height + aspect-ratio conflict: below ~672px viewport the 420px
     floor would force the panel wider than the screen. Width drives now,
     and a squarer ratio keeps Smacky readable at phone size. */
  body.home-v3 .v3-hero-panel{ min-height:0; width:100%; aspect-ratio:4/3; }
  body.home-v3 .v3-panel-incoming{ display:none; } /* cramped at phone width; LINE OPEN carries the state */
  body.home-v3 nav{ min-height:68px; padding-inline:20px; }
  body.home-v3 nav .brand{ font-size:36px; }
  /* font-size removed - --smk-h1 covers this range now. overflow-wrap stays:
     it is the safety net for a long unbroken word on a narrow phone. */
  body.home-v3 .v3-h1{ line-height:.98; overflow-wrap:anywhere; }

  body.home-v3 .v3-play--hero{ width:62px; height:62px; margin-inline:10px; }


  body.home-v3 .v3-card{ padding:24px 20px; }
  body.home-v3 .v3-card-copy{ font-size:17px; }
  /* Phone width: the card is one narrow column, so the art has nowhere to
     sit that is not behind running copy. Verified in a real 390px render -
     at the desktop opacities the handset crossed REAL CALL / PERSONALIZED /
     ANONYMOUS and the microphone sat straight through "The scoreboard names
     the loser". So here both drop to a faint corner ghost, bled off the
     right edge and anchored low, behind the player rather than the
     paragraphs. Copy legibility wins over the decoration at this width. */
  body.home-v3 .v3-card-watermark--mic{
    /* -10px, not -18px: at -18 the visible metal ended 8.3px from the frame,
       i.e. right on top of the 9px red keyline. -10 puts it at ~16px. */
    top:auto; bottom:8px; right:-10px; width:172px; opacity:.20;
  }
  body.home-v3 .v3-card-watermark--phone{
    top:auto; bottom:8px; right:-14px; width:132px; opacity:.22;
  }
  body.home-v3 .v3-card-foot{ flex-wrap:wrap; }
  body.home-v3 .v3-closer{ white-space:normal; text-align:center; font-size:13px; letter-spacing:.12em; gap:14px; }
  body.home-v3 .v3-board-grid{ padding-inline:0; } /* .v3-shell already pads */
  body.home-v3 .v3-btn{ padding-inline:16px; }
  /* No row reflow here any more. The handoff is explicit: let the board
     scroll sideways rather than crush its columns - see the 900px block.
     The old rules folded each row into a 2x2 grid, which broke the
     scoreboard read (score and status stopped sharing a baseline). */
  body.home-v3 .v3-scorepanel{ padding:18px 20px 20px; }
  body.home-v3 .v3-play--daily{ width:92px; height:92px; }
  body.home-v3 .v3-zone-nav{ grid-template-columns:1fr; }
  body.home-v3 .v3-zone-item{ border-left:0 !important; min-height:0; flex-direction:row; align-items:center; gap:16px; }
  body.home-v3 .v3-zone-item .v3-zone-arrow{ margin-top:0; margin-left:auto; }
}
/* Handoff breakpoint 1: below ~900px. The scoreboard keeps its column
   structure and scrolls sideways instead of collapsing, and the closing
   statement is allowed to break into two centred lines. */
@media (max-width:900px){
  body.home-v3 .v3-scorerows{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  body.home-v3 .v3-scorerow{ min-width:600px; }
  body.home-v3 .v3-daily-player-row{ justify-content:center; }
  body.home-v3 .v3-statement{ white-space:normal; }
  body.home-v3 .v3-statement .v3-red{ display:block; }
}
/* Handoff breakpoint 2: below ~600px. Display headings come down ~40%, the
   decorative stadium lights are dropped entirely (clutter at this size),
   and every action stays a 44px target. */
@media (max-width:600px){

  body.home-v3 .v3-h2{ font-size:clamp(26px,7.4vw,34px); }
  body.home-v3 .v3-h2--board{ font-size:clamp(26px,7.4vw,34px); }
  body.home-v3 .v3-statement{ font-size:clamp(22px,6.6vw,30px); letter-spacing:.04em; }
  body.home-v3 .v3-daily-lights{ display:none; }
  body.home-v3 .v3-sr-action,
  body.home-v3 .v3-zone-item,
  body.home-v3 .v3-daily-cta{ min-height:44px; }
}
@media (prefers-reduced-motion:reduce){
  body.home-v3 .v3-btn:hover, body.home-v3 .v3-play:hover{ transform:none; }
  body.home-v3 .v3-zone-item:hover .v3-zone-arrow{ transform:none; }
}


/* =========================================================================
   DESKTOP HERO v5 - smackagram-homepage-hero-claude-handoff-v1
   (Andy, 26 Aug 2026)
   =========================================================================
   620px EXACTLY, border included: a 47/53 split, then a 76px black step
   strip, then the 3px red rule. Laid out as a flex column so the strip is
   a fixed 76px and the split takes whatever is left - the arithmetic can
   never drift when the copy changes.

   Desktop only. No new breakpoints; below 1024 the existing stacked rules
   still apply and --smk-hero-h resolves to `auto`, so the section grows
   with its content and the strip keeps its 76px.

   Everything here is scoped to .v3-hero--v5 so the previous hero rules
   further up the file stay inert rather than half-applying.
   ========================================================================= */
body.home-v3 .v3-hero--v5{
  /* min-height, not height: at every desktop width this resolves to exactly
     620px, but if a narrow window ever squeezes the copy past the split the
     section grows by a few pixels instead of clipping the sentence. */
  /* LITERALS, not var()/calc(). Chrome computed this block correctly with
     min-height:var(--smk-hero-h) and min-height:calc(var(...) - 76px - 3px);
     Safari did not, and a value I cannot verify in the engine that is
     actually breaking is a value that does not belong here. 620 = 541 row +
     76 strip + 3 rule. */
  height:620px;
  min-height:620px;
  box-sizing:border-box;
  border-bottom:3px solid var(--sg-red);
  display:flex; flex-direction:column;
}
body.home-v3 .v3-hero--v5 .v3-shell.v3-hero-grid{
  /* NO min-height:0 here. That is what let this row be clamped to the
     leftover 541px while the copy inside it kept going - the step strip
     then painted straight over the middle of the paragraph and the button
     landed below it. With the default min-height:auto the row can never be
     smaller than its content, so a browser whose text metrics run a few
     pixels long grows the hero instead of breaking the layout. */
  /* flex-shrink:0 and an explicit floor. The floor also has to be stated
     here because the earlier band rule sets min-height:620px on this same
     element - leaving it unstated made the ROW 620 and the hero 699. */
  flex:1 0 auto;
  height:541px;
  min-height:541px;
  /* the handoff's split, on the viewport - not on the content column */
  grid-template-columns:47% 53%;
  width:100%; max-width:none; margin:0; padding:0; column-gap:0;
}
body.home-v3 .v3-hero--v5 .v3-hero-copy{
  grid-column:1 / 2;
  max-width:none;   /* clears the old 709px cap from the v4 hero */
  min-height:541px; /* matches the row; grows with the copy if it ever has to */
  display:flex; flex-direction:column; justify-content:center;
  padding:30px clamp(26px, 3.3vw, 54px) 22px; min-width:0;
  text-align:left;
}
/* One measure for the whole stack, centred in the panel. Headline and
   eyebrow sit left on it; summary, button and proof line centre on it. */
body.home-v3 .v3-hero--v5 .v3-hero-copy > *{
  max-width:570px; width:100%; margin-inline:auto;
}
body.home-v3 .v3-hero--v5 .v3-hero-panel{
  grid-column:2 / 3;
  /* EXPLICIT 541px, measured from Safari (26 Aug 2026).
     This was `height:auto; align-self:stretch`, and Safari reported:
        row h=541   panel h=1161   smacky 757x1100
     A stretched grid item's height is definite in Chrome but NOT in
     Safari, so `max-height:100%` on the artwork resolved to no limit at
     all: the image took its own aspect ratio (757 x 1100), the panel grew
     to fit it, and the row was dragged to 1161 - which is why the step
     strip landed in the middle of the paragraph and Smacky covered three
     sections. A literal height is definite in every engine, so the
     percentage resolves and the picture is sized BY the band. */
  height:541px;
  min-height:541px;
  align-self:stretch;
  /* belt and braces: the artwork is sized by the band, and even if a future
     change gave the panel an auto height, nothing can spill out of it. */
  overflow:hidden;
}
/* The v4 panel deliberately let Smacky hang 3% below its own bottom edge -
   harmless when the panel WAS the bottom of the hero. The step strip sits
   there now, so those 17px were being clipped off his shoes. The handoff is
   explicit that the shoes are never cropped: feet land exactly on the
   panel's bottom edge instead, right above the strip. */
body.home-v3 .v3-hero--v5 .v3-hero-panel picture{
  top:5%; bottom:0;
}

/* ---- eyebrow ---- */
body.home-v3 .v3-hero--v5 .v3-eyebrow--hero{
  font-family:var(--sg-font-condensed); font-weight:700;
  font-size:16px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--sg-red); text-align:left; margin:0 auto 14px;
  display:block;
}

/* ---- headline ---- */
body.home-v3 .v3-hero--v5 .v3-h1{
  /* handoff range is 68-74px; 68 is what lets the three headline lines,
     the summary, the button and the proof line all sit inside 541px. */
  font-size:clamp(40px, 3.8vw, 62px);
  line-height:.92; letter-spacing:0;
  text-align:left; margin:0 auto;   /* keeps the shared 570px measure */
}

/* ---- three-line summary ---- */
body.home-v3 .v3-hero--v5 .v3-hero-body{
  font-size:17px; line-height:1.42; font-weight:400;
  color:#242424;   /* the handoff's charcoal, not the darker --sg-charcoal */
  /* wider than the 570px stack measure on purpose: this is the width the
     three-line balance in the reference needs. */
  max-width:632px; text-align:center; margin:16px auto 0;
}

/* ---- the one button ---- */
body.home-v3 .v3-hero--v5 .v3-hero-cta{
  width:380px; max-width:100%; height:74px; margin:18px auto 0;
  display:flex; align-items:center; gap:18px; padding:0 24px;
  background:var(--sg-red); color:#fff; border:0; border-radius:3px;
  cursor:pointer; text-align:left;
  box-shadow:0 4px 12px rgba(9,9,9,.18);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.home-v3 .v3-hero--v5 .v3-hero-cta:hover{
  background:#F51309; transform:translateY(-1px);
  box-shadow:0 7px 16px rgba(9,9,9,.22);
}
body.home-v3 .v3-hero--v5 .v3-hero-cta:focus-visible{
  outline:3px solid var(--sg-ink); outline-offset:3px;
}
body.home-v3 .v3-hero--v5 .v3-hero-cta-ic{
  width:44px; height:44px; flex:none; border-radius:50%;
  background:#fff; color:var(--sg-red);
  display:inline-flex; align-items:center; justify-content:center;
}
body.home-v3 .v3-hero--v5 .v3-hero-cta-ic svg{ width:19px; height:19px; }
body.home-v3 .v3-hero--v5 .v3-hero-cta .v3-ic-play{ margin-left:3px; }
body.home-v3 .v3-hero--v5 .v3-hero-cta .v3-ic-pause{ display:none; }
/* dimensions never change between states - only which glyph is shown */
body.home-v3 .v3-hero--v5 .v3-hero-cta.is-playing .v3-ic-play{ display:none; }
body.home-v3 .v3-hero--v5 .v3-hero-cta.is-playing .v3-ic-pause{ display:block; margin-left:0; }
body.home-v3 .v3-hero--v5 .v3-hero-cta-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
/* both label lines stay on one line - the button is a fixed 74px and a
   wrapped label would push its own text out of the box. */
body.home-v3 .v3-hero--v5 .v3-hero-cta-main,
body.home-v3 .v3-hero--v5 .v3-hero-cta-sub{ white-space:nowrap; }
body.home-v3 .v3-hero--v5 .v3-hero-cta-main{
  font-family:var(--sg-font-condensed); font-weight:700; font-size:21px;
  letter-spacing:.03em; text-transform:uppercase; line-height:1;
}
body.home-v3 .v3-hero--v5 .v3-hero-cta-sub{
  font-family:var(--sg-font-condensed); font-weight:600; font-size:12.5px;
  letter-spacing:.07em; text-transform:uppercase; line-height:1; opacity:.94;
}

/* ---- confidence line ---- */
body.home-v3 .v3-hero--v5 .v3-hero-proof{
  font-family:var(--sg-font-condensed); font-weight:700; font-size:13.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--sg-ink);
  text-align:center; margin:14px auto 0;
}
body.home-v3 .v3-hero--v5 .v3-hero-proof .v3-sep{ color:var(--sg-red); margin:0 9px; }

/* ---- right panel labels ---- */
body.home-v3 .v3-hero--v5 .v3-panel-sig{
  position:absolute; top:24px; right:30px; z-index:3; text-align:right;
}
body.home-v3 .v3-hero--v5 .v3-panel-sig-name{
  font-family:var(--sg-font-condensed); font-weight:700; font-size:26px;
  letter-spacing:.05em; text-transform:uppercase; color:#fff; margin:0;
  line-height:1;
}
body.home-v3 .v3-hero--v5 .v3-panel-sig-role{
  font-family:var(--sg-font-condensed); font-weight:600; font-size:12px;
  letter-spacing:.13em; text-transform:uppercase; color:#fff; opacity:.82;
  margin:7px 0 0; line-height:1;
}
body.home-v3 .v3-hero--v5 .v3-panel-sig-role::after{
  content:""; display:block; height:2px; background:var(--sg-red);
  margin-top:7px;
}

/* ---- three-step strip ---- */
body.home-v3 .v3-hero-steps{
  flex:0 0 76px; height:76px; min-height:76px;
  background:var(--sg-ink);
  display:grid; grid-template-columns:repeat(3, 1fr);
  align-items:stretch;
}
body.home-v3 .v3-hero-step{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:0 24px; min-width:0;
}
body.home-v3 .v3-hero-step + .v3-hero-step{ border-left:1px solid var(--sg-red); }
body.home-v3 .v3-hero-step-n{
  font-family:var(--sg-font-display); font-weight:400; font-size:46px;
  line-height:.8; color:var(--sg-red); flex:none;
}
body.home-v3 .v3-hero-step-c{ display:flex; flex-direction:column; gap:4px; min-width:0; }
body.home-v3 .v3-hero-step-t{
  font-family:var(--sg-font-condensed); font-weight:700; font-size:19px;
  letter-spacing:.03em; text-transform:uppercase; color:#fff; line-height:1;
}
body.home-v3 .v3-hero-step-d{
  font-size:14.5px; line-height:1.2; color:#C9C6C2;
}

/* Below the desktop breakpoint the split stacks (existing rules) - the
   strip goes to one column per row rather than three squeezed ones. This
   is the desktop template's own narrow behaviour, not the mobile site. */
@media (max-width:1023px){
  body.home-v3 .v3-hero--v5{ height:auto; min-height:0; }
  body.home-v3 .v3-hero--v5 .v3-shell.v3-hero-grid{ grid-template-columns:1fr; height:auto; min-height:0; }
  body.home-v3 .v3-hero--v5 .v3-hero-copy{ grid-column:1 / -1; padding:34px 24px 26px; }
  body.home-v3 .v3-hero--v5 .v3-hero-copy{ min-height:0; }
  body.home-v3 .v3-hero--v5 .v3-hero-panel{ grid-column:1 / -1; height:360px; min-height:360px; }
  body.home-v3 .v3-hero-steps{ flex:none; height:auto; grid-template-columns:1fr; }
  body.home-v3 .v3-hero-step{ justify-content:flex-start; padding:16px 24px; }
  body.home-v3 .v3-hero-step + .v3-hero-step{ border-left:0; border-top:1px solid var(--sg-red); }
}


/* =========================================================================
   DESKTOP HERO v6 (Andy, 26 Aug 2026)
   =========================================================================
   One black band, 650px exactly, edge to edge. Copy left, Smacky right,
   stadium fading to black between them. No white panel, no divider.

   HEIGHTS ARE LITERAL, NEVER var()/calc(), and the artwork is absolutely
   positioned. Both of those are scar tissue from v5: Safari does not treat a
   stretched box's height as definite, so `max-height:100%` on an in-flow
   image resolved to NO LIMIT there - the artwork took its own aspect ratio
   and dragged the whole hero to 1161px while Chrome looked perfect. Out of
   flow, with a literal height on the layer, it cannot happen in any engine.
   ========================================================================= */
body.home-v3 .v6-hero{
  position:relative;
  width:100%;
  height:650px; min-height:650px; max-height:650px;
  box-sizing:border-box;
  margin:0;
  overflow:hidden;
  background:#050505;
  border:0; border-bottom:3px solid #E10600; border-radius:0;
}

/* ---- artwork layer: one image, swap the src and nothing else changes ---- */
body.home-v3 .v6-hero .v6-art{
  position:absolute; right:0; bottom:0; top:0;
  width:100%; pointer-events:none; z-index:3;
}
body.home-v3 .v6-hero .v6-art picture{
  position:absolute; right:0; bottom:0; display:block;
  height:100%;
}
body.home-v3 .v6-hero .v6-art-img{
  display:block;
  height:100%; width:auto; max-width:none;
  object-fit:contain; object-position:right bottom;
}

/* ---- the last of the fade, over the artwork's own baked-in one ---- */
body.home-v3 .v6-hero .v6-fade{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(90deg,
    #050505 0%, #050505 46%, rgba(5,5,5,.98) 52%, rgba(5,5,5,.82) 59%,
    rgba(5,5,5,.35) 70%, rgba(5,5,5,.08) 100%);
}

/* ---- copy ---- */
body.home-v3 .v6-hero .v6-copy{
  position:absolute; z-index:6;
  /* Andy, 26 Aug: moved 15% of the way from its old 7.5vw toward the hero's
     centre line. */
  left:14vw;
  /* Vertically CENTRED rather than pinned at top:62px. With the top pinned,
     every line-height change ate the space under the button - at 1920 with
     the new headline spacing only 22px would have been left. Centred, the
     block rebalances itself whatever the headline does. */
  top:50%; transform:translateY(-50%);
  width:min(750px, 52vw); max-width:none;
  text-align:left;
}
body.home-v3 .v6-hero .v6-red{ color:#E10600; }

/* Matched to the DAILY SMACK / NEW EVERY MORNING eyebrow further down the
   page (Andy, 26 Aug). Read off that element's computed style rather than
   guessed: Barlow Condensed 18px / 700 / .055em / 27px, uppercase, #E10600,
   flex with a 12px gap. The only thing that differs now is the LED, which is
   this hero's own. */
body.home-v3 .v6-hero .v6-eyebrow{
  font-family:'Barlow Condensed','Roboto Condensed','Arial Narrow',sans-serif;
  font-size:18px; font-weight:700; line-height:27px; letter-spacing:.055em;
  text-transform:uppercase; color:#E10600;
  margin:0 0 19px;
  display:flex; align-items:center; gap:12px;
}
body.home-v3 .v6-hero .v6-eyebrow .v6-sep{ margin:0; font-style:normal; font-weight:700; }

/* ---- LIVE-LINE LED (Andy, 26 Aug) ----
   A call-waiting indicator, not a decoration: a lit red core with a halo
   that breathes out and fades, on a slow 1.6s cycle so it reads as "the
   line is open" rather than as an alert. The halo is a box-shadow, so it
   costs no layout and cannot shift the text beside it. */
body.home-v3 .v6-hero .v6-dot{
  width:11px; height:11px; flex:none; border-radius:50%;
  background:#E10600;
  box-shadow:0 0 0 0 rgba(225,6,0,.55), 0 0 8px 2px rgba(225,6,0,.75);
  animation:v6led 1.6s ease-in-out infinite;
}
@keyframes v6led{
  0%   { opacity:1;   box-shadow:0 0 0 0    rgba(225,6,0,.55), 0 0 8px 2px rgba(225,6,0,.75); }
  55%  { opacity:.28; box-shadow:0 0 0 7px  rgba(225,6,0,0),   0 0 4px 1px rgba(225,6,0,.25); }
  100% { opacity:1;   box-shadow:0 0 0 0    rgba(225,6,0,.55), 0 0 8px 2px rgba(225,6,0,.75); }
}
/* Anyone who has asked the OS to stop animation gets the lit state, held. */
@media (prefers-reduced-motion:reduce){
  body.home-v3 .v6-hero .v6-dot{ animation:none; opacity:1; }
}

body.home-v3 .v6-hero .v6-h1{
  font-family:'Anton', Impact, 'Arial Narrow', sans-serif;
  font-size:clamp(70px, 4.65vw, 92px);
  font-weight:400;              /* Anton's native weight - never embolden */
  /* 1.02, up from the spec's .88 (Andy, 26 Aug): at .88 these three heavy
     uppercase lines read as one solid block with the caps almost touching. */
  line-height:1.02; letter-spacing:-.018em;
  text-transform:uppercase; color:#F5F2EC;
  margin:0;
  white-space:nowrap;           /* the three supplied breaks, and only those */
  -webkit-text-stroke:0; text-shadow:none;
}

body.home-v3 .v6-hero .v6-line{
  font-family:'Barlow Condensed','Roboto Condensed','Arial Narrow',sans-serif;
  font-size:28px; font-weight:900; line-height:1; letter-spacing:.025em;
  text-transform:uppercase; color:#F5F2EC;
  margin:22px 0 14px;
}

body.home-v3 .v6-hero .v6-desc{
  font-family:'Inter', Arial, sans-serif;
  font-size:20px; font-weight:500; line-height:1.48; letter-spacing:-.01em;
  color:#D2CFCA; margin:0;
  /* The spec asks for BOTH max-width:570px and a three-line wrap. At 20px
     Inter those fight: measured, 550px and up gives two lines and 530px is
     the widest that still breaks into the three specified lines. The wrap
     was the stated intent, so the measure follows it. */
  max-width:530px;
}

/* ---- the one CTA ---- */
body.home-v3 .v6-hero .v6-cta{
  display:flex; align-items:center;
  width:440px; height:82px; margin:21px 0 0;
  padding:10px 20px 10px 16px;
  background:linear-gradient(180deg,#E5160C 0%,#C90B05 100%);
  border:1px solid #F23830; border-radius:5px;
  cursor:pointer; text-align:left;
  box-shadow:0 10px 26px rgba(225,6,0,.18), inset 0 1px 0 rgba(255,255,255,.16);
  transition:background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
body.home-v3 .v6-hero .v6-cta:hover{
  background:#F0180F; transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(225,6,0,.24), inset 0 1px 0 rgba(255,255,255,.16);
}
body.home-v3 .v6-hero .v6-cta:active{
  transform:translateY(0);
  box-shadow:0 6px 18px rgba(225,6,0,.16), inset 0 1px 0 rgba(255,255,255,.16);
}
body.home-v3 .v6-hero .v6-cta:focus-visible{
  outline:3px solid #F5F2EC; outline-offset:3px;
}
body.home-v3 .v6-hero .v6-cta-disc{
  width:58px; height:58px; flex-shrink:0; border-radius:50%;
  background:#F5F2EC; color:#E10600; margin-right:20px;
  border:1.5px solid #0B0B0B;   /* thin black keyline (Andy, 26 Aug) */
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
}
body.home-v3 .v6-hero .v6-cta-disc svg{ width:20px; height:20px; }
/* optical centring: a triangle looks left-heavy dead centre */
body.home-v3 .v6-hero .v6-cta .v3-ic-play{ margin-left:2px; }
body.home-v3 .v6-hero .v6-cta .v3-ic-pause{ display:none; }
/* the box never changes size between states - only the glyph does */
body.home-v3 .v6-hero .v6-cta.is-playing .v3-ic-play{ display:none; }
body.home-v3 .v6-hero .v6-cta.is-playing .v3-ic-pause{ display:block; margin-left:0; }
body.home-v3 .v6-hero .v6-cta-txt{ display:flex; flex-direction:column; min-width:0; }
body.home-v3 .v6-hero .v6-cta-main{
  font-family:'Barlow Condensed','Roboto Condensed','Arial Narrow',sans-serif;
  font-size:27px; font-weight:800; line-height:1; letter-spacing:.015em;
  color:#0B0B0B; text-transform:uppercase; white-space:nowrap;
}
body.home-v3 .v6-hero .v6-cta-sub{
  font-family:'Barlow Condensed','Roboto Condensed','Arial Narrow',sans-serif;
  font-size:16px; font-weight:700; line-height:1; letter-spacing:.12em;
  color:#0B0B0B; text-transform:uppercase;
  margin-top:8px; white-space:nowrap;
}
body.home-v3 .v6-hero .v3-audio-error{ color:#F5F2EC; margin:10px 0 0; }

/* ---- narrow desktop ----
   Measured, not guessed. Anton is condensed, so the headline's real INK is
   only 503px wide at its 70px floor - far narrower than its 750px box. The
   artwork therefore stays full height all the way down to 1320px with 49px
   of clearance to spare. Only below that does Smacky's pointing hand start
   to reach the text, and 94% is what buys the gap back. */
@media (max-width:1399px){
  body.home-v3 .v6-hero .v6-art picture{ height:93%; }
}
@media (max-width:1319px){
  body.home-v3 .v6-hero .v6-art picture{ height:90%; }
  body.home-v3 .v6-hero .v6-copy{ left:10vw; }
}

/* ---- below the desktop breakpoint the fixed band is released ---- */
@media (max-width:1023px){
  body.home-v3 .v6-hero{
    height:auto; min-height:0; max-height:none;
    padding:38px 0 0;
  }
  body.home-v3 .v6-hero .v6-copy{
    position:static; width:auto; padding:0 24px 26px;
    left:auto; top:auto; transform:none;
  }
  body.home-v3 .v6-hero .v6-h1{ white-space:normal; font-size:clamp(38px,7vw,70px); }
  body.home-v3 .v6-hero .v6-art{ position:relative; height:340px; width:100%; }
  body.home-v3 .v6-hero .v6-art picture{ height:100%; }
  body.home-v3 .v6-hero .v6-fade{ display:none; }
  body.home-v3 .v6-hero .v6-cta{ width:100%; max-width:440px; }
}

/* =======================================================================
   SMACKS OF THE DAY on the v3 homepage (Andy, 26 Aug 2026)
   =======================================================================
   Replaces the two 01-04 feature lists that sat under the product cards.

   Same shared partial eight other pages include; the white-card /
   ball-watermark treatment is the one written for the v2 homepage. Its
   rules are twinned here rather than edited in place, so the v2 page keeps
   working byte for byte and this whole thing lifts out in one piece.

   ONLY TOP-LEVEL RULES ARE TWINNED. The first attempt also copied rules
   out of @media blocks and dropped them at top level - the mobile
   "full-width, no clip-path" CTA rule then applied at every width and the
   Browse button stretched to 1165px. Anything responsive stays with its
   own query, untouched.
   ======================================================================= */

/* Six custom properties the ported rules reference are declared only inside
   the v2 token block, so on this page they resolved to nothing - and a
   declaration with an undefined var() is INVALID, not ignored. That is why
   the waveform bars vanished: `background: var(--sg-line-dark)` painted
   transparent on a white card. Declared on the wrapper, with the v2 values
   read off the live v2 page. */
body.home-v3 .home-sotd-wrap{
  --sg-card-radius:6px;
  --sg-display-section:clamp(2.6rem, 4.6vw, 5.5rem);
  --sg-line:#c9c7c0;
  --sg-line-dark:#34363b;
  --sg-red-hot:#E10600;
  --sg-shadow:0 12px 30px rgba(16,17,20,.10);
}
body.home-v3 .home-sotd-wrap.sg-section{
  padding:56px clamp(20px, 4vw, 64px);
}
/* NO BACKGROUND OF ITS OWN (Andy, 26 Aug). It was painting its own paper
   plus a sotd-bg image on top of the services section's paper - two
   competing backgrounds, which is what made it read as a boxed-off panel.
   Transparent, so the cards float on the services background. */
body.home-v3 .home-sotd-wrap{
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  isolation:auto;
}
/* v2 sets the display face on a bare `body.home-v2 h1,h2,h3`, too broad to
   twin - restated for this wrapper's heading alone. */
body.home-v3 .home-sotd-wrap .home-sotd-head h2{
  font-family:'Anton', Impact, 'Arial Narrow', sans-serif;
  font-weight:400; font-size:clamp(2rem, 11vw, 4.14rem);
  line-height:.94; letter-spacing:.005em; text-transform:uppercase;
  color:#101114; margin:0;
}
/* .sg-sub is v2-scoped too - same treatment, this wrapper only. */
body.home-v3 .home-sotd-wrap .home-sotd-head .sg-sub{
  font-family:'Barlow Condensed','Roboto Condensed','Arial Narrow',sans-serif;
  font-size:20px; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:#E10600; margin-top:8px;
}

body.home-v3 .home-sotd-wrap{
  padding-top: clamp(14px, 2.1vw, 35px);
  padding-bottom: clamp(28px, 4.2vw, 70px);
}
body.home-v3 .home-sotd-wrap.sg-paper-surface{
  background-color: #f3f0e8;
  background-image: url("/static/img/home/sotd-bg.webp?v=20260825");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body.home-v3 .home-sotd-head{
  max-width: var(--sg-content); margin: 0 auto; text-align: left;
}
body.home-v3 .home-sotd-eyebrow{
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-family: var(--sg-font-condensed); font-weight: 700; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sg-red);
}
body.home-v3 .home-sotd-eyebrow .home-live-ring{
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--sg-red);
  position: relative; flex: none;
}
body.home-v3 .home-sotd-eyebrow .home-live-ring::before{
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--sg-red);
}
body.home-v3 .home-sotd-head h2{
  font-size: var(--sg-display-section);
}
body.home-v3 .home-sotd-head .sg-sub{
  margin-top: 8px; text-align: left;
}
body.home-v3 .home-sotd-rule{
  max-width: var(--sg-content); margin: 16px auto 0; height: 4px;
  background: var(--sg-ink); position: relative;
}
body.home-v3 .home-sotd-rule::after{
  content: ""; position: absolute; right: -2px; top: -1px; width: 104px; height: 6px;
  background: var(--sg-red); clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
body.home-v3 .home-sotd-wrap .sotw-escape{
  width: 100% !important; margin: clamp(18px,2.2vw,28px) 0 0 !important; margin-left: 0 !important;
  background: none !important; border-top: 0 !important; border-bottom: 0 !important;
  padding: 0 !important;
}
body.home-v3 .home-sotd-wrap .sotw-cap{
  max-width: var(--sg-content) !important; padding: 0 !important;
}
body.home-v3 .home-sotd-wrap .sotw{
  background: none !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 0 !important; overflow: visible !important;
}
body.home-v3 .home-sotd-wrap .sotw-head{
  display: none !important;
}
body.home-v3 .home-sotd-wrap .sotw-rail{
  background: none !important; padding: 4px 0 10px !important;
  overflow-x: auto !important; overflow-y: hidden !important;
}
body.home-v3 .home-sotd-wrap .sotw-track{
  padding: 0 !important; gap: 28px !important;
}
body.home-v3 .home-sotd-wrap .sotw-arrow{
  background: var(--sg-ink) !important; color: #fff !important; border: 0 !important;
  width: 44px !important; height: 44px !important; box-shadow: var(--sg-shadow) !important;
}
body.home-v3 .home-sotd-wrap .sotw-wrap{
  overflow: visible;
}
/* Pushed OUTSIDE the content column (Andy, 26 Aug) - the wrapper's own
   padding, plus up to 44px more, so they sit in the page margin either
   side of the cards rather than on the column's edge. The extra is a
   clamp so it shrinks on narrow screens instead of running off-canvas. */
body.home-v3 .home-sotd-wrap .sotw-prev{
  left: calc(-1 * (clamp(20px, 4vw, 64px) + clamp(0px, 3vw, 44px))) !important;
}
body.home-v3 .home-sotd-wrap .sotw-next{
  right: calc(-1 * (clamp(20px, 4vw, 64px) + clamp(0px, 3vw, 44px))) !important;
}
body.home-v3 .home-sotd-wrap .sotw-card{
  background: var(--sg-white) !important;
  border: 1px solid var(--sg-charcoal) !important;
  border-radius: var(--sg-card-radius) !important;
  box-shadow: var(--sg-shadow) !important;
  color: var(--sg-ink) !important;
  min-height: 420px !important;
  padding: 0 20px 18px !important;
  text-align: left !important;
  overflow: hidden !important;
  flex: 0 0 300px !important; max-width: 320px !important;
}
body.home-v3 .home-sotd-wrap .sotw-card:hover{
  box-shadow: 0 16px 34px rgba(16,17,20,.16) !important;
}
body.home-v3 .home-sotd-wrap .sotw-card::before{
  display: none !important;
}
body.home-v3 .home-sotd-wrap .sotw-ghost{
  display: none !important;
}
body.home-v3 .home-sotd-wrap .sotw-card::after{
  content: ""; position: absolute; inset: 0;
  pointer-events: none; z-index: 0; opacity: 1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 62%;
  background-image: none;
}
body.home-v3 .home-sotd-wrap .sotw-card > *{
  position: relative; z-index: 1;
}
body.home-v3 .home-sotd-wrap .sotw-card[data-sport="football"]::after{
  background-image: url("/static/img/home/ball-football.png?v=20260825");
}
body.home-v3 .home-sotd-wrap .sotw-card[data-sport="basketball"]::after{
  background-image: url("/static/img/home/ball-basketball.png?v=20260825");
}
body.home-v3 .home-sotd-wrap .sotw-card[data-sport="baseball"]::after{
  background-image: url("/static/img/home/ball-baseball.png?v=20260825");
}
body.home-v3 .home-sotd-wrap .sotw-card[data-sport="soccer"]::after{
  background-image: url("/static/img/home/ball-soccer.png?v=20260825");
}
body.home-v3 .home-sotd-wrap .sotw-card[data-sport="hockey"]::after{
  background-image: url("/static/img/home/ball-hockey.png?v=20260825");
}
body.home-v3 .home-sotd-wrap .sotw-prod{
  order: -1 !important;
  margin: 0 -20px 18px !important; padding: 12px 16px !important;
  background: var(--sg-red) !important; color: #fff !important;
  min-height: 40px; display: flex !important; align-items: center;
  justify-content: flex-start !important; gap: 8px;
  font-family: var(--sg-font-condensed) !important; font-weight: 700 !important;
  font-size: 13px !important; letter-spacing: .1em !important; text-transform: uppercase;
  border-radius: 0 !important;
}
body.home-v3 .home-sotd-wrap .sotw-prod .dot{
  width: 9px; height: 9px; border-radius: 50%; background: #fff !important; flex: none;
  box-shadow: none !important; animation: none !important;
}
body.home-v3 .home-sotd-wrap .sotw-headline{
  order: 1; text-align: left !important;
  font-family: var(--sg-font-display) !important; font-weight: 400 !important;
  font-size: 38px !important; line-height: .94 !important; text-transform: uppercase;
  color: var(--sg-ink) !important; margin: 0 !important;
}
body.home-v3 .home-sotd-wrap .sotw-team{
  color: var(--sg-ink) !important;
}
body.home-v3 .home-sotd-wrap .sotw-tag{
  order: 2; display: block; text-align: left !important;
  margin-top: 14px !important; padding-top: 14px !important;
  border-top: 1px solid var(--sg-line);
  font-family: var(--sg-font-condensed) !important; font-weight: 700 !important;
  font-size: 15px !important; letter-spacing: .04em !important; text-transform: uppercase;
  color: var(--sg-muted) !important; background: none !important;
}
body.home-v3 .home-sotd-wrap .sotw-stage{
  order: 3; flex: 0 0 auto !important; margin-top: auto !important; padding-top: 18px !important;
  display: flex !important; flex-direction: row !important; align-items: center !important;
  gap: 14px !important;
}
body.home-v3 .home-sotd-wrap .sotw-play{
  width: 56px !important; height: 56px !important; flex: none !important;
  background: var(--sg-red) !important; box-shadow: none !important; border: 0 !important;
  margin: 0 !important;
}
body.home-v3 .home-sotd-wrap .sotw-play svg{
  width: 18px !important; height: 20px !important;
}
body.home-v3 .home-sotd-wrap .sotw-line{
  flex: 1 !important; min-width: 0;
}
body.home-v3 .home-sotd-wrap .sotw-wave{
  width: 100% !important; height: 30px !important;
}
body.home-v3 .home-sotd-wrap .sotw-wave i{
  background: var(--sg-line-dark) !important;
}
body.home-v3 .home-sotd-wrap .sotw-wave i.on{
  background: var(--sg-red) !important;
}
body.home-v3 .home-sotd-wrap .sotw-t-row{
  display: flex !important; justify-content: flex-start; margin-top: 8px !important;
}
body.home-v3 .home-sotd-wrap .sotw-t,
body.home-v3 .home-sotd-wrap .sotw-t-sep{
  color: var(--sg-muted) !important; font-family: var(--sg-font-condensed) !important;
  font-weight: 700 !important; font-size: 14px !important;
}
body.home-v3 .home-sotd-cta{
  max-width: var(--sg-content); margin: clamp(22px,3vw,36px) auto 0;
  display: grid; grid-template-columns: 1fr auto; align-items: stretch; gap: 0;
  border: 0; padding: 0;
}
body.home-v3 .home-sotd-cta-label{
  display: flex; align-items: center; gap: 20px;
  font-family: var(--sg-font-condensed); font-weight: 800; font-size: clamp(20px,2.2vw,30px);
  letter-spacing: .04em; text-transform: uppercase; color: var(--sg-ink);
  padding-right: 34px;
}
body.home-v3 .home-sotd-cta-label::after{
  content: ""; flex: 1; height: 2px; background: var(--sg-ink); min-width: 40px;
}
body.home-v3 .home-sotd-cta-btn{
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 92px; padding: 0 clamp(30px,4vw,64px) 0 clamp(48px,6vw,86px);
  background: var(--sg-red); color: #fff; text-decoration: none;
  font-family: var(--sg-font-condensed); font-weight: 800;
  font-size: clamp(16px,1.5vw,22px); letter-spacing: .07em; text-transform: uppercase;
  clip-path: polygon(46px 0, 100% 0, 100% 100%, 0 100%);
  
  margin-right: calc(-1 * var(--sg-gutter));
}
body.home-v3 .home-sotd-cta-btn:hover{
  background: var(--sg-red-hot);
}
body.home-v3 .home-sotd-empty{
  max-width: var(--sg-content); margin: clamp(32px,4vw,48px) auto 0; text-align: center;
  padding: 48px 24px; border: 1px dashed var(--sg-line); border-radius: var(--sg-card-radius);
}
body.home-v3 .home-sotd-empty h3{
  font-size: 30px;
}
body.home-v3 .home-sotd-empty p{
  margin-top: 10px; color: var(--sg-muted);
}
body.home-v3 .home-sotd-empty .sg-button{
  margin-top: 18px;
}
body.home-v3 .home-sotd-wrap .sotw-card{
  min-height: 366px !important;
}

/* -----------------------------------------------------------------------
   "OUR TRASH-TALKING SERVICES." - section title (Andy, 26 Aug)
   -----------------------------------------------------------------------
   It was the SMALLEST of the four section titles on this page - 37px here
   against 41 / 44 / 65 for the other three - which is why it did not read
   as one. .v3-h2--center is used by this heading alone.
   ----------------------------------------------------------------------- */
body.home-v3 .v3-h2.v3-h2--center{
  font-size:clamp(42px, 4.5vw, 66px);
  line-height:.94; letter-spacing:-.008em; margin-top:14px;
}
body.home-v3 .v3-h2--center + .v3-h2-sub{
  font-size:clamp(18px, 1.85vw, 27px); margin-top:12px;
}

/* The arrows now sit on the content column's own edges - exactly where the
   BROWSE THE SMACK FEED button used to end - rather than 22px inside the
   rail. The offset is the wrapper's own horizontal padding, so it tracks the
   column at every width instead of being a fixed guess. */
body.home-v3 .home-sotd-wrap .sotw-wrap{ overflow:visible !important; }


/* -------------------------------------------------------------------------
   SMACKS OF THE DAY CARD - homepage layout (Andy, 26 Aug 2026)
   -------------------------------------------------------------------------
   Title, then a hairline, then the line about THIS roast, then a big centred
   play button with the waveform and the clock stacked under it.

   Scoped to the homepage wrapper only. The same partial is included by seven
   other pages and they keep the side-by-side player they already have.
   ------------------------------------------------------------------------- */

/* NO RULE ADDED HERE (Andy, 26 Aug). The card already draws one - it is a
   border-TOP on .sotw-tag, part of the original design. Adding a border-
   bottom to the headline as well gave two black lines 14px apart. The
   existing one stays; this block only tightens the space around it. */
body.home-v3 .home-sotd-wrap .sotw-headline{
  margin-bottom:0;
}
body.home-v3 .home-sotd-wrap .sotw-tag{
  margin-top:12px !important;
  padding-top:12px !important;
}

/* the line about this particular smack */
body.home-v3 .home-sotd-wrap .sotw-tag{
  display:block; text-align:left;
}

/* player: one centred column instead of a row */
/* The player sits just under the copy, not pinned to the card's floor.
   margin-top:auto pushed it to the bottom of a card whose min-height was
   366px, which is where the dead space in the middle came from. */
body.home-v3 .home-sotd-wrap .sotw-stage{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  margin-top:18px !important;
  width:100% !important;
}
/* Floor lowered to match: the card is now sized by its content. */
body.home-v3 .home-sotd-wrap .sotw-card{
  min-height:0 !important;
}
body.home-v3 .home-sotd-wrap .sotw-play{
  width:84px !important; height:84px !important;
  flex:none !important; margin:0 !important;
  display:inline-flex !important; align-items:center; justify-content:center;
}
body.home-v3 .home-sotd-wrap .sotw-play svg{
  width:30px !important; height:34px !important;
  margin-left:4px;            /* optical centre - a triangle reads left-heavy */
}
body.home-v3 .home-sotd-wrap .sotw-line{
  display:flex !important; flex-direction:column !important;
  align-items:center !important; gap:8px !important;
  width:100% !important; margin:0 !important;
}
body.home-v3 .home-sotd-wrap .sotw-wave{
  width:100% !important; margin:0 !important;
}
body.home-v3 .home-sotd-wrap .sotw-t-row{
  display:flex !important; justify-content:center !important;
  width:100% !important; margin:0 !important;
}

/* The services section now ENDS on the Smacks of the Day rail (Andy,
   26 Aug): "SAME SMACKY. DIFFERENT DAMAGE." is gone, so the padding that
   used to sit under it would leave a dead band before the section's bottom
   edge. The wrapper keeps its top padding and drops its bottom one, and the
   section closes right below the cards. */
body.home-v3 .home-sotd-wrap.sg-section{
  padding-bottom:0;
}
body.home-v3 .v3-products{
  padding-bottom:34px;
}


/* -------------------------------------------------------------------------
   PRODUCT CARDS - player alignment + tighter lead-in (Andy, 26 Aug 2026)
   -------------------------------------------------------------------------
   MEASURED on the live page at 1661px. Both cards are already exactly 780px
   tall - the cards were never mismatched. What was off was the player INSIDE
   them:

       send:  copy 180px, player starts 454px down
       cast:  copy 120px, player starts 424px down   <- 30px higher

   SmackCast's blurb is two lines shorter, and the card had been papering over
   it with margin-top:30px on the player and the foot, which only moved the
   problem. Pinning the player with margin-top:auto pushes it to the bottom of
   the column in BOTH cards, directly above the foot - and since the player
   (200px) and foot (87px) are identical in each, the play buttons and
   waveforms land on the same line no matter how long the copy is.
   ------------------------------------------------------------------------- */
body.home-v3 .v3-card-player{
  margin-top:auto !important;
  margin-bottom:0 !important;
}
body.home-v3 .v3-card-foot{
  margin-top:26px !important;
}

/* Half the air between "PICK HOW THE LOSER HEARS ABOUT IT" and the cards -
   measured 62px from the text's ink to the top of the cards, now ~31px. */
body.home-v3 .v3-cards{
  margin-top:26px;
}

/* The player's two lines swapped places (Andy, 26 Aug): the short tag
   ("A REAL CALL" / "WEEKLY RECAP") sits above the waveform, and the
   instruction ("HEAR A REAL CALL" / "HEAR A REAL ROAST") now closes the
   block underneath it. Both centred on the player. */
body.home-v3 .v3-card-player-label,
body.home-v3 .v3-card-player-time,
body.home-v3 .v3-card-player-cap{
  text-align:center;
}
body.home-v3 .v3-card-player-cap{
  font-size:18px;
  letter-spacing:.09em;
  margin-top:8px;
}
body.home-v3 .v3-card-player-label{
  font-size:16px;
  letter-spacing:.1em;
  opacity:.86;
}


/* -------------------------------------------------------------------------
   SMACKS OF THE DAY - one identical card layout, centred head, CTA back
   (Andy, 26 Aug 2026)
   -------------------------------------------------------------------------
   MEASURED BEFORE, five cards at 1440 (offsets from each card's own top):

       EAGLES        play 235   time ends 390   39px of air below it
       DIAMONDBACKS  play 251   time ends 406   24px
       JETS          play 256   time ends 411   19px
       KNICKS        play 215   time ends 370   60px
       MAPLE LEAFS   play 215   time ends 370   60px

   The rail stretches every card to the tallest one, so the cards were the
   same height while everything INSIDE them floated - the play button moved
   41px between cards and the space under the clock swung from 19px to 60px.
   The cause is that both blocks above the player are content-sized: the
   title runs 2 or 3 lines depending on the team name, and the hook line runs
   1 to 3 depending on the smack.

   Fix: give those two blocks a FIXED height - the title three lines, the
   hook two, each clamped - so the player starts at the same offset in every
   card, and let the card be sized by that instead of by its tallest sibling.
   ------------------------------------------------------------------------- */

/* title: always a three-line box, whatever the team name */
body.home-v3 .home-sotd-wrap .sotw-headline{
  display:-webkit-box !important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  height:108px !important;          /* 3 x 38px x .94 */
  margin:0 !important;
}
/* the hook line under the rule: always a two-line box */
body.home-v3 .home-sotd-wrap .sotw-tag{
  display:-webkit-box !important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  box-sizing:border-box;
  height:53px !important;           /* 12 pad + 1 rule + 2 x 20px */
  margin-top:12px !important;
  padding-top:12px !important;
}
/* player now starts at the same y in every card, so it does not need to be
   pushed anywhere - no auto margin, no stretch. */
body.home-v3 .home-sotd-wrap .sotw-stage{
  margin-top:12px !important;
  padding-top:0 !important;
}
/* card sized by its own content; the clock sits 18px off the bottom rule in
   every card instead of 19-60px. */
body.home-v3 .home-sotd-wrap .sotw-card{
  min-height:0 !important;
  padding:0 20px 18px !important;
}

/* ---- head: centred, no eyebrow, no black rule ---- */
body.home-v3 .home-sotd-wrap .home-sotd-head--center{
  text-align:center;
}
body.home-v3 .home-sotd-wrap .home-sotd-head--center h2,
body.home-v3 .home-sotd-wrap .home-sotd-head--center .sg-sub{
  text-align:center;
}
body.home-v3 .home-sotd-wrap .home-sotd-head--center h2 .v3-red{
  color:var(--sg-red);
}
body.home-v3 .home-sotd-wrap .home-sotd-eyebrow,
body.home-v3 .home-sotd-rule{
  display:none !important;
}

/* ---- gap to the product cards above, tightened ---- */
body.home-v3 .home-sotd-wrap.sg-section{
  padding-top:10px !important;
  padding-bottom:0 !important;
}

/* ---- HEAR MORE DAMAGE band restored under the rail ---- */
body.home-v3 .home-sotd-cta{
  margin-top:34px;
}
/* the red button was landing ON the section's bottom divider */
body.home-v3 .v3-products{
  padding-bottom:40px;
}


/* -------------------------------------------------------------------------
   SMACKS OF THE DAY - second pass (Andy, 26 Aug 2026)
   -------------------------------------------------------------------------
   MEASURED on the live page at 1661px, all 15 cards in the rail:

     - every title renders at TWO lines; the box reserved THREE, so all
       fifteen cards carried 36px of dead air above the hairline
     - the hook ran 1 line x2, 2 x7, 3 x4, 4 x1, 5 x1 - the two-line clamp
       was cutting SIX of the fifteen off mid-sentence
     - three cards fitted the rail; the fourth showed 168 of its 300px and
       the next arrow sat 68px ON TOP of it
     - the CTA's black rule met the red button with a 0px gap
     - the lead-in from the product cards had been cut to 10px, too tight

   Title box down to two lines, hook box up to three, four whole cards in
   the rail, and the two spacing fixes. Net card height 422 -> 406.
   ------------------------------------------------------------------------- */

/* two lines, not three - the rare long team name shrinks itself instead
   (fitTitles() in _smacks_of_the_day.html) */
body.home-v3 .home-sotd-wrap .sotw-headline{
  -webkit-line-clamp:2;
  height:72px !important;           /* 2 x 38px x .94 */
}
/* the red kicker was wrapping to two lines in the cards with a longer
   product + date string, which moved everything under it */
body.home-v3 .home-sotd-wrap .sotw-prod{
  height:45px !important; min-height:0 !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* three lines, not two - 6 of 15 hooks were losing their punchline */
body.home-v3 .home-sotd-wrap .sotw-tag{
  -webkit-line-clamp:3;
  height:74px !important;           /* 12 pad + 1 rule + 3 x 20.25 */
}

/* FOUR WHOLE CARDS, no half card under the arrow.
   The track is a flex row whose width is its CONTENT (4892px at 15 cards),
   so a percentage basis on the card is useless. As a column grid the track
   keeps the rail's own width, columns overflow to the right for scrolling,
   and calc() finally resolves against something meaningful. */
@media (min-width:1024px){
  body.home-v3 .home-sotd-wrap .sotw-track{
    display:grid !important;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 84px) / 4);   /* 3 gaps of 28px */
    gap:28px !important;
    /* the partial sets width:max-content on the track, which as a grid
       container made 100% resolve against its own 5166px content width -
       the calc fed itself. */
    width:auto !important;
  }
  body.home-v3 .home-sotd-wrap .sotw-card{
    max-width:none !important;
    min-width:0 !important;
  }
}

/* the black rule was running straight into the red button */
body.home-v3 .home-sotd-cta{
  gap:24px;
}

/* 10px under the product cards was over-tightened */
body.home-v3 .home-sotd-wrap.sg-section{
  padding-top:28px !important;
}


/* -------------------------------------------------------------------------
   DAILY SMACK - breathing room between the three columns (Andy, 26 Aug 2026)
   -------------------------------------------------------------------------
   MEASURED at 1661: the grid is 30% / 40% / 30% of a 1280 shell with NO
   column gap, so the three columns butt straight up against each other:

       copy   191 -> 575
       player 575 -> 1087      left wave starts ON the copy column's edge
       quote 1087 -> 1471      right wave ends ON the quote's edge

   The waveform is centred in its own column but the column is full-bleed,
   so the bars run into the headline on one side and Smacky's verdict on the
   other. A real gap, and a narrower middle column to pay for it.
   ------------------------------------------------------------------------- */
body.home-v3 .v3-daily-grid{
  grid-template-columns:1fr minmax(0, 430px) 1fr;
  column-gap:clamp(32px, 3.6vw, 60px);
}


/* -------------------------------------------------------------------------
   CHOOSE YOUR DAMAGE - new full-section plate (Andy, 26 Aug 2026)
   -------------------------------------------------------------------------
   Replaces products-paper-v3.webp.

   FIRST PLATE (v4, 1078x1460 portrait) was wrong for this box. MEASURED: the
   section is 1661x1771 at Andy's width - aspect 0.94 against the plate's
   0.74 - so cover had to scale it 1.54x and throw away 479px of height, and
   both frame rules went with it. That is the blow-up he spotted.

   v5 is 1254x1254 square (aspect 1.00). Cover now scales 1.41x and crops
   111px of width instead of 479px of height, so the framing survives.
   CENTRED rather than top-anchored: this plate is framed on all four edges,
   unlike v4 which only had rules top and bottom.
   ------------------------------------------------------------------------- */
body.home-v3 .v3-products{
  background:
    url("/static/img/home/products-paper-v5.webp?v=20260827w") center center / cover no-repeat,
    var(--sg-paper-products) !important;
}


/* -------------------------------------------------------------------------
   DAILY SMACK - stadium plate (Andy, 26 Aug 2026)
   -------------------------------------------------------------------------
   MEASURED: the band is 1661x423 at Andy's width (aspect 3.93) over a flat
   #050607. The plate is 2600x700 (aspect 3.71), so cover lands at 0.64x -
   DOWNscaled, which is why this one stays crisp where the first Choose Your
   Damage plate did not.

   .v3-daily-lights is switched off with it: it was a CSS stand-in for
   exactly this - two white radial glows top left and top right plus a tick
   pattern along the bottom - and it fights the real lights in the plate.
   ------------------------------------------------------------------------- */
body.home-v3 .v3-daily{
  background:
    url("/static/img/home/daily-plate-v1.webp?v=20260826b") center center / cover no-repeat,
    #050607;
}
body.home-v3 .v3-daily-lights{
  display:none;
}


/* -------------------------------------------------------------------------
   HERO ARTWORK: cover the band, don't hang off the right edge
   (Andy, 26 Aug 2026)
   -------------------------------------------------------------------------
   WHY THE ZOOM BROKE IT. The plate was an <img> sized by the band's HEIGHT
   (height:100%, width:auto) and pinned to the RIGHT edge. The copy is
   positioned in vw. So the two had nothing to do with each other, and the
   distance between the headline and Smacky swung wildly with the window -
   which is exactly what browser zoom changes. MEASURED, subject's left edge
   against the headline's right edge:

       2200px    347px of empty black between them
       1920px    135px
       1661px     10px
       1440px   -124px   <- the headline runs INTO him
       1280px   -180px

   Zoom out, gap. Zoom in, collision. Both are the same bug.

   The plates are full-bleed compositions now, faded in the file, so they are
   treated as one: the art fills the band and the subject holds its position
   in the frame at every width. 1866x843 over a 650px band is 2.214 against
   2.215 at 1440 - the plate and the band are the same shape, so at Andy's
   size nothing is cropped at all; wider windows trim top and bottom evenly.
   ------------------------------------------------------------------------- */
body.home-v3 .v6-hero .v6-art{ position:absolute; inset:0; width:100%; }
body.home-v3 .v6-hero .v6-art picture{
  position:absolute; inset:0;
  width:100%; height:100%;
}
body.home-v3 .v6-hero .v6-art-img{
  width:100%; height:100%;
  max-width:none;
  object-fit:cover; object-position:center center;
}
/* the two narrow-desktop art rules existed to buy clearance from Smacky's
   pointing hand. Cover makes them meaningless - the subject no longer moves
   relative to the copy. */
@media (max-width:1399px){ body.home-v3 .v6-hero .v6-art picture{ height:100%; } }
@media (max-width:1319px){ body.home-v3 .v6-hero .v6-art picture{ height:100%; } }
@media (max-width:1023px){
  body.home-v3 .v6-hero .v6-art{ position:relative; inset:auto; height:340px; }
  body.home-v3 .v6-hero .v6-art picture{ position:absolute; inset:0; height:100%; }
}


/* ---- headline keeps scaling below 1400 ---------------------------------
   MEASURED off the plate itself, not guessed: it is pure black (luma 0) out
   to 36% of its width and the subject's bright edge starts at 52%. With the
   art covering the band, that edge sits at a FIXED 52% of the band at every
   width - which is the whole point of the change above.

   The headline did not hold up its end. Its clamp floors at 70px, so below
   about 1400 it stopped shrinking while the band kept narrowing, and its ink
   walked into that 52% line. Letting it keep scaling under 1400 restores the
   clearance without touching Andy's own size at 1440 and up. */
@media (max-width:1399px){
  body.home-v3 .v6-hero .v6-h1{ font-size:clamp(48px, 5.2vw, 70px); }
}


/* ---- copy moves in as the band narrows ---------------------------------
   MEASURED per page against the subject's 52% line. With the art covering
   the band, home / Smack Lab / Smack Battle clear at every width, but the
   two longest headlines did not:

                     1920   1661   1440   1366   1280
       SmackCast      +16    +15    -14    -40     -1
       Send a Smack    -7     -7    -34    -60    -21

   Their headlines are two long lines rather than three short ones, so their
   ink runs further right at the same type size. Rather than shrink the type
   - which would change the homepage at Andy's own 1661 - the copy moves
   toward the left edge once the band drops under 1500. That buys 5vw, which
   is 72px at 1440 and 68px at 1366, and clears every page. Nothing above
   1500 moves at all. */
@media (max-width:1499px){
  body.home-v3 .v6-hero .v6-copy{ left:9vw; }
}


/* ---- homepage paragraph measure (Andy, 27 Aug 2026) ---------------------
   The new hero paragraph is ~330 characters against the old ~140. At the
   shared 530px measure it wrapped to SIX lines, and the copy block only had
   79px of slack inside the 650px band (38 above, 41 below at 1661) - it
   would have overflowed. Widening the measure holds it to five lines and
   keeps the block the same height it was, so every gap above and below is
   unchanged. Measured against the artwork: the paragraph's right edge still
   clears the plate's 52% subject line. */
body.home-v3 .v6-hero .v6-desc{
  max-width:600px;
  /* the deleted line carried the whole gap under the headline (22 + 28 + 14).
     The paragraph has margin:0, so without it the two blocks touched -
     measured, h1 -> desc was 0px. */
  margin-top:20px;
}
/* MEASURED at 1280: a 600px measure puts the paragraph's right edge 47px INTO
   the plate's subject. Above 1400 there is room for it; below, the paragraph
   goes back to the shared 530. */
@media (max-width:1399px){
  body.home-v3 .v6-hero .v6-desc{ max-width:530px; }
}


/* ---- paragraph measure narrows with the band (Andy, 27 Aug 2026) --------
   MEASURED, paragraph's right edge against the plate's 52% subject line, on
   every page:

              1440   1280   1200   1100   1024
     most      +89    +23     -9    -50    -82
     meet      +49    -17    -49    -74   -106

   The measure was a flat 530px while the copy's left edge is 9vw and the
   subject sits at vw/2 + 29 - so below about 1250 the paragraph walked into
   the artwork on EVERY page. A fluid cap tracks it instead: 530 is still the
   measure everywhere it fits, and under ~1360 it follows the band. */
body.home-v3 .v6-hero .v6-desc{
  max-width:min(530px, 39vw);
}

/* the homepage's longer paragraph keeps its wider measure where there is
   room for it; below 1400 it takes the shared fluid cap above. */
@media (min-width:1400px){
  body.home-v3 .v6-hero .v6-desc{ max-width:600px; }
}


/* -------------------------------------------------------------------------
   HOMEPAGE HERO - headline, paragraph and player all on one centre line
   (Andy, 27 Aug 2026)
   -------------------------------------------------------------------------
   Same mechanism as the SmackCast hero. The copy column is a flat
   min(750px, 52vw) box and the headline's ink is narrower than that, so
   centring inside the box would sit everything off the headline's own centre.
   width:fit-content shrinks the box to its widest child - the nowrap
   headline - and then the auto margins are exact.

   The kicker stays left: it is the page's status line, not part of the
   centred block.
   ------------------------------------------------------------------------- */
body.home-v3 .v6-hero .v6-copy{
  width:fit-content;
  max-width:min(750px, 52vw);
}
body.home-v3 .v6-hero .v6-h1{
  text-align:center;
}
body.home-v3 .v6-hero .v6-desc{
  text-align:center;
  margin-left:auto; margin-right:auto;
}
body.home-v3 .v6-hero .v6-cta{
  margin-left:auto; margin-right:auto;
}
body.home-v3 .v6-hero .v3-audio-error{ text-align:center; }


/* ---- 4px back from the disc's gutter (Andy, 27 Aug 2026) ----------------
   MEASURED: the label box inside the 440px button is 324px and the homepage's
   sub line is 327px of ink, so the ellipsis guard was clipping it to
   "HOW SMACKAGRAM WORKS - 0:4...". Trimming the disc's right margin from 20
   to 16 gives the box 328px. The button, the disc and the type are all
   unchanged - only the gutter between them. */
body.home-v3 .v6-hero .v6-cta-disc{ margin-right:16px; }


/* twin of the shared rule - see smackagram.css */
body.home-v3 .v6-hero .v6-nobreak{ white-space:nowrap; }


/* -------------------------------------------------------------------------
   LEAGUE STRIP under the hero (Andy, 27 Aug 2026)
   -------------------------------------------------------------------------
   A single line of leagues immediately below the hero's 3px red rule. It
   sits on the paper of the products section, so the type is ink and the
   separators are the sitewide red. Flex with a gap rather than typed-in
   dashes, so it wraps cleanly on a narrow window instead of leaving an
   orphan dash at the end of a line.
   ------------------------------------------------------------------------- */
body.home-v3 .v6-leagues{
  margin:0;
  /* -40px cancels the section's own top padding so the strip sits tight
     under the hero's red rule; the section plate shows through it. */
  padding:14px clamp(20px, 4vw, 64px) 0;
  margin-top:-40px;
  background:none;
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  /* SIZED TO MATCH /send-a-smack (Andy, 29 Aug 2026: "copy that size and
     place that same size under the hero on the main page"). The launcher's
     .sas-leagues runs 18px with clamp(18,1.9vw,30) gaps; this was 15px
     with tighter gaps - same strip, two sizes, now one. */
  gap:0 clamp(18px, 1.9vw, 30px);
  font-family:'Barlow Condensed','Roboto Condensed','Arial Narrow',sans-serif;
  font-size:18px; font-weight:700; line-height:1.7;
  letter-spacing:.16em; text-transform:uppercase;
  /* was #101114 (ink, calibrated for the old paper plate) - the section
     went flat black in the 29 Aug sitewide theme pass and this strip was
     missed, leaving near-black text on a near-black band (Andy, 30 Aug
     2026: "make nfl mlb nba and the rest of the sports teams... white"). */
  color:#F5F5F3;
}
body.home-v3 .v6-leagues span{ white-space:nowrap; }
/* the separator is drawn, not typed - a wrapped line never ends on a dash */
body.home-v3 .v6-leagues span + span::before{
  content:"\2013";
  color:#E10600;
  margin-right:clamp(18px, 1.9vw, 30px);
  letter-spacing:0;
}
/* the strip is now the section's first child rather than a sibling, so it
   sits on the section's own paper plate instead of a flat colour band. */
body.home-v3 .v6-leagues + .v3-shell{ margin-top:26px; }


/* -------------------------------------------------------------------------
   PRODUCT CARDS - centred, artwork out, player tightened
   (Andy, 27 Aug 2026)
   -------------------------------------------------------------------------
   The handset and the microphone are gone, so the copy no longer has to sit
   left to keep clear of them - title, price and the feature line all centre.
   The player loses its kicker and its timecode, and closes up.

   The artwork elements are HIDDEN, not deleted from the template: they carry
   data-asset-slot hooks and a mix-blend-mode:screen treatment that is
   specific to each card's ink, and both would have to be rebuilt from
   scratch to bring them back.
   ------------------------------------------------------------------------- */
body.home-v3 .v3-card-watermark{ display:none !important; }

/* ---- centred copy ---- */
body.home-v3 .v3-card-title,
body.home-v3 .v3-card-price,
body.home-v3 .v3-card-copy,
body.home-v3 .v3-card-meta{
  text-align:center;
}
body.home-v3 .v3-card-meta{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:0 10px;
}

/* ---- player: kicker and timecode out ---- */
body.home-v3 .v3-card-player-label,
body.home-v3 .v3-card-player-time{
  display:none !important;
}
/* "HEAR A REAL CALL" / "HEAR A REAL ROAST" close up under the button - the
   26px they used to sit below the timecode is now the whole gap. */
body.home-v3 .v3-card-player-cap{
  margin-top:12px !important;
}
/* the player block lifts, and both cards lift by the SAME amount, so the two
   buttons stay on one line. */
body.home-v3 .v3-card-player{
  padding-top:14px !important;
}

/* ---- and the boxes come down in height (Andy, 27 Aug 2026) --------------
   With the artwork, the kicker and the timecode out, the cards were carrying
   the same 724px they had when all three were in. MEASURED at 1440 before:

     card 724   play button at 431   "HEAR A REAL..." at 517
     grey rule at 598   button ends 39px above the card's floor

   The height comes off the padding and the two gaps around the grey rule -
   nothing that holds copy is touched, so no line reflows. Both cards take
   the same reduction, so the two play buttons stay level with each other. */
body.home-v3 .v3-card{
  padding:28px 30px 26px;
}
body.home-v3 .v3-card-foot{
  margin-top:18px !important;
  padding-top:18px;
}

/* ---- the feature line sits on the same line in both cards ---------------
   MEASURED on the live page: the two lines were 60px apart -

       send   "REAL CALL / PERSONALIZED / ANONYMOUS"      427px down
       cast   "REAL SCORES / FULL LEAGUE / SHAREABLE"     367px down

   because Send a Smack's description runs six lines and SmackCast's runs
   four, and the slack in the card sat BELOW the feature line (the player
   carried margin-top:auto). Moving that auto margin up to the feature line
   puts the slack between the description and the features instead, so the
   features, the player and the button all bottom-align together and the two
   cards line up across the row. */
body.home-v3 .v3-card-meta{
  margin-top:auto !important;
  /* auto eats ALL the slack on the taller card, so on Send a Smack the
     feature line ended up touching the last line of the description.
     Padding is a floor the auto margin cannot take away, and it is the same
     on both cards, so they stay aligned. */
  padding-top:20px;
}
body.home-v3 .v3-card-player{
  margin-top:0 !important;
}



/* =========================================================================
   PRODUCT CARDS - CONCEPT 06, "INCOMING CALL" (Andy, 27 Aug 2026)
   =========================================================================
   Picked from the ten concepts. The card IS the phone screen: handset notch,
   red edge, deep corners, black glass, and the play button inside a ring that
   pulses like a live call. The waveforms either side of it were already here
   and already animate on play - concept 06 just gives them a reason to be
   there.

   NOTHING IN THE MARKUP MOVED except two labels. Same elements, same ids,
   same audio wiring - this is a restyle, so play/pause, seeking and the
   "one player at a time" reset are untouched.
   ========================================================================= */
body.home-v3 .v3-card{
  border:2px solid var(--sg-red) !important;
  border-radius:30px !important;
  background:#000 !important;
  padding:22px 26px 26px !important;
  box-shadow:0 26px 54px rgba(0,0,0,.65),
             inset 0 0 0 1px rgba(255,255,255,.05),
             0 0 44px rgba(225,6,0,.16) !important;
}

/* the handset notch. ::before was the old artwork hook and is free now that
   the phone and the microphone are gone. */
body.home-v3 .v3-card::before{
  content:""; display:block !important; position:static !important;
  width:108px; height:7px; border-radius:6px; background:#26282C;
  margin:0 auto 16px; z-index:3;
}

body.home-v3 .v3-card-status{
  justify-content:center !important; text-align:center;
}

/* ---- the call ring ----
   A second ring breathing out from the play button, on the same 1.6s cycle
   as the hero's LED so the two read as one system. It is a ::after on the
   button, so it costs no layout and cannot move the waveforms either side. */
body.home-v3 .v3-card-player-row{ position:relative; justify-content:center; }
body.home-v3 .v3-play--card{ position:relative; z-index:3; }
body.home-v3 .v3-play--card::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--sg-red); pointer-events:none;
  animation:v6ring 1.6s ease-out infinite;
}
@keyframes v6ring{
  0%   { transform:scale(.94); opacity:.85; }
  100% { transform:scale(1.55); opacity:0; }
}
/* The ring keeps pulsing through playback (Andy, 27 Aug) - it is the card's
   heartbeat, not a "call waiting" state. */
@media (prefers-reduced-motion:reduce){
  body.home-v3 .v3-play--card::after{ animation:none; opacity:.5; }
}

/* ---- the waveform MOVES while it plays ----
   The bars already lit up red behind the playhead, which shows progress but
   does not read as sound. While the card's own button carries .is-playing -
   put there by the shared controller - every bar in that card's two waves
   gets a staggered bounce, so the pair either side of the button behave like
   one live meter.

   :has() scopes it to the card whose button is playing, so pressing one card
   never animates the other. Every bar is an <i>, built by wirePlayer().
   The stagger comes from nth-child rather than JS - no timers, no work per
   frame beyond the compositor. */
@keyframes v6bars{
  0%,100% { transform:scaleY(.55); }
  50%     { transform:scaleY(1.25); }
}
body.home-v3 .v3-card:has(.v3-play--card.is-playing) .v3-wave i{
  transform-origin:center;
  animation:v6bars .62s ease-in-out infinite;
}
body.home-v3 .v3-card:has(.v3-play--card.is-playing) .v3-wave i:nth-child(3n+1){ animation-duration:.78s; }
body.home-v3 .v3-card:has(.v3-play--card.is-playing) .v3-wave i:nth-child(3n+2){ animation-duration:.54s; }
body.home-v3 .v3-card:has(.v3-play--card.is-playing) .v3-wave i:nth-child(4n){   animation-delay:.14s; }
body.home-v3 .v3-card:has(.v3-play--card.is-playing) .v3-wave i:nth-child(5n){   animation-delay:.29s; }
body.home-v3 .v3-card:has(.v3-play--card.is-playing) .v3-wave i:nth-child(7n){   animation-delay:.42s; }
@media (prefers-reduced-motion:reduce){
  body.home-v3 .v3-card:has(.v3-play--card.is-playing) .v3-wave i{ animation:none; }
}

/* ---- both feet are red now ---- */
body.home-v3 .v3-card-foot .v3-btn--card{
  background:var(--sg-red) !important;
  color:#fff !important;
  border:2px solid var(--sg-red) !important;
  border-radius:999px !important;
}
body.home-v3 .v3-card-foot .v3-btn--card:hover{
  background:var(--sg-red-bright, #F0180F) !important;
  border-color:var(--sg-red-bright, #F0180F) !important;
}
body.home-v3 .v3-card-foot{ border-top-color:rgba(225,6,0,.35) !important; }

/* TWO-TONE, KEPT (Andy, 27 Aug 2026). The pair was deliberately two shades
   before concept 06 - #08090A for Send a Smack against #171819 for SmackCast
   - and painting both #000 flattened that. SmackCast goes back to being the
   lighter of the two: charcoal glass against the darker handset beside it,
   so the cards still read as a pair without being identical. */
body.home-v3 .v3-card--cast{
  background:#191A1D !important;
}


/* ---- HOMEPAGE HERO PARAGRAPH: narrower measure, smaller type
   (Andy, 28 Aug 2026: "THIS TEXT IS REALLY WIDE ... KEEP MORE OF A CENTERED
   FROM BELOW THE TEXT ABOVE IT") ------------------------------------------
   The measure was 600px at 20px Inter - about 72 characters a line, which is
   past the comfortable reading measure and reads as a slab under a centred
   headline rather than a centred block.

   BOTH LEVERS, because narrowing alone makes it worse. Measured at 1920,
   where the hero has the least slack:

     20px / 600px (was)   5 lines   178px tall   button clears the band by 31px
     20px / 520px         6 lines   178px        17px
     20px / 420px         7 lines   207px         2px   <- about to overflow
     18px / 480px (now)   5 lines   133px        39px

   So dropping the type one step is what BUYS the narrower measure: 480px at
   18px is ~53 characters a line, a 26% narrower measure than before, and the
   block is 45px SHORTER than it was, so the button gains 8px of clearance
   instead of losing 14.

   Centring is explicit rather than inherited. The copy column is
   width:fit-content around the nowrap headline, so auto margins put the
   paragraph on the headline's own centre line - which is what "centered from
   below the text above it" asks for.

   39vw is kept from the rule above: it is the guard that stops the paragraph
   walking into the artwork below ~1250, and a narrower measure only ever
   helps it. */
body.home-v3 .v6-hero .v6-desc{
  max-width:min(480px, 39vw);
  font-size:18px;
  margin-left:auto; margin-right:auto;
}
@media (min-width:1400px){
  body.home-v3 .v6-hero .v6-desc{ max-width:480px; }
}


/* =========================================================================
   PRODUCT CARDS - 3D SLAB EDGES (Andy, 29 Aug 2026)
   =========================================================================
   "Can you make these cards 3D edges like we just did on the mobile site.
    So the card on the left has a 3D edge on the outside and the same for
    the card on the right. Make this have a slight neon glow border."

   THE SECTION STAYS ON PAPER. Black was tried and shown, and Andy's call
   was to keep the ground as it is - so the field-markings plate, the ink
   heading and the whole Smacks-of-the-Day block below are untouched. Only
   the two cards change, which is also why this is a handful of lines: they
   were already near-black objects, so the slab and the glow have the dark
   ground they need without the section moving.

   THE SLAB IS A PROPERTY OF POSITION, NOT OF STATE. Four hard box-shadows,
   ZERO blur, stepping down and away in darkening greys, then a red one at
   the far edge where the rim light would catch the slab. The first card's
   goes LEFT and the last card's goes RIGHT, so each sits on that card's
   OUTSIDE edge and the pair reads as two objects lit from between them.
   Blur any of the four and it stops being an edge and becomes a smudge.

   `--slab` carries the direction so one shadow stack serves both cards. On
   mobile this started as a state override and was wrong in exactly one of
   four states for three rounds before it became positional - hence the
   `:last-child` here rather than a per-card class.

   THE GLOW IS ON THE BORDER, not a second outline inside it. The card
   already carries `border:2px solid var(--sg-red)`; this adds a tight rim
   and two soft blooms outside it and leaves the border alone. Kept
   deliberately restrained - "slight" was the word, and a wide bloom on a
   white ground reads as a pink halo rather than neon.
   ========================================================================= */
body.home-v3 .v3-cards .v3-card{ --slab:-1; }
body.home-v3 .v3-cards .v3-card:last-child{ --slab:1; }

body.home-v3 .v3-cards .v3-card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -26px 46px -30px rgba(0,0,0,1),
    /* the slab - hard offsets, no blur */
    calc(var(--slab) *  4px)  5px 0 #191A1C,
    calc(var(--slab) *  8px) 10px 0 #121315,
    calc(var(--slab) * 12px) 15px 0 #0B0C0D,
    calc(var(--slab) * 15px) 18px 0 rgba(225,6,0,.32),
    /* the ground shadow, then the neon */
    0 34px 54px -24px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,72,64,.34),
    0 0 14px rgba(225,6,0,.42),
    0 0 30px -4px rgba(225,6,0,.24) !important;
}

/* ---------------------------------------------------------------------------
   MOBILE'S PULSING RED RAILS ON THE TWO HOMEPAGE CARDS (Andy, 29 Aug 2026:
   "make the waveforms the same as the Send a Smack card on the mobile
   homepage - the pulsing red waveforms - keep the button the size it is").
   Send a Smack + SmackCast only; the Daily Smack strip keeps its own look,
   and the 74px play disc is untouched. Values copied from mobile's
   .cw-wave, glow for glow, and the two staggered durations are what stop
   the pulse reading as one synchronized blink.
--------------------------------------------------------------------------- */
@keyframes sg-card-bars{ 0%,100%{ transform:scaleY(.55); } 50%{ transform:scaleY(1); } }
body.home-v3 .v3-card--send .v3-wave i,
body.home-v3 .v3-card--cast .v3-wave i{
  background:#E10600; opacity:.6; border-radius:2px;
  box-shadow:0 0 6px rgba(225,6,0,.55);
  transform-origin:center;
  animation:sg-card-bars 1.5s ease-in-out infinite;
}
body.home-v3 .v3-card--send .v3-wave i:nth-child(3n+1),
body.home-v3 .v3-card--cast .v3-wave i:nth-child(3n+1){ animation-duration:1.9s; }
body.home-v3 .v3-card--send .v3-wave i:nth-child(3n+2),
body.home-v3 .v3-card--cast .v3-wave i:nth-child(3n+2){ animation-duration:1.25s; }
body.home-v3 .v3-card--send .v3-wave i.lit,
body.home-v3 .v3-card--cast .v3-wave i.lit{
  background:#FF6B62; opacity:1;
  box-shadow:0 0 11px rgba(255,80,72,1), 0 0 22px rgba(225,6,0,.75);
}
/* ...AND ON THE DAILY SMACK TOO (Andy, same minute): same pulsing red
   rails, same lit state, the 110px disc keeps its size - the mobile
   treatment overrides the white .v3-wave--daily bars set further up. The
   later position in this file is what wins that tie. */
body.home-v3 .v3-wave--daily i{
  background:#E10600; opacity:.6; border-radius:2px;
  box-shadow:0 0 6px rgba(225,6,0,.55);
  transform-origin:center;
  animation:sg-card-bars 1.5s ease-in-out infinite;
}
body.home-v3 .v3-wave--daily i:nth-child(3n+1){ animation-duration:1.9s; }
body.home-v3 .v3-wave--daily i:nth-child(3n+2){ animation-duration:1.25s; }
body.home-v3 .v3-wave--daily i.lit{
  background:#FF6B62; opacity:1;
  box-shadow:0 0 11px rgba(255,80,72,1), 0 0 22px rgba(225,6,0,.75);
}
@media (prefers-reduced-motion:reduce){
  body.home-v3 .v3-card--send .v3-wave i,
  body.home-v3 .v3-card--cast .v3-wave i,
  body.home-v3 .v3-wave--daily i{ animation:none; }
}


/* -------------------------------------------------------------------------
   OUR TRASH-TALKING SERVICES - ALL BLACK (Andy, 30 Aug 2026)
   -------------------------------------------------------------------------
   The section carried Andy's paper/field-markings plate over #FCFBFA. Both
   go; the band is flat black like the rest of the site now.

   Only the section ground and its two headings change. The product cards
   were ALREADY dark with white type (.v3-card--send / --cast), which is why
   this is four declarations and not a re-theme - they were dark slabs on
   paper, and they are dark slabs on black.

   !important on the background because the 27 Aug plate rule further up
   carries it too; without matching it here the artwork stays.
   ------------------------------------------------------------------------- */
body.home-v3 .v3-products{
  background-image:none !important;
  background-color:#0D0D0D !important;
}
/* --sg-ink (#090A0A) and --sg-copy (#2e3035) were calibrated for the paper
   this section used to sit on. */
body.home-v3 .v3-products .v3-h2{ color:#F5F5F3; }
body.home-v3 .v3-products .v3-h2-sub{ color:#B9BBBF; }

/* =========================================================================
   SMACKS OF THE DAY — dark cards to match the Smack Feed (Andy, 31 Aug 2026)
   -------------------------------------------------------------------------
   The homepage SotD cards were white; they now go dark like the Smack Feed
   cards, with light type, a red left accent, and the feed's own dark-tuned
   ball art as a very subtle watermark — so they sit naturally in the black
   theme. Appended last so it wins the earlier white-card v3 rules.
   Plus: "of the Day" turned white (was unreadable charcoal, Smacks stays
   red), and a little more air between the section and the product cards.
   ========================================================================= */
body.home-v3 .home-sotd-wrap .sotw-card{
  background:#141416 !important;
  border:1px solid rgba(245,245,243,.14) !important;
  border-left:5px solid var(--sg-red) !important;
  color:#F5F5F3 !important;
  box-shadow:0 14px 30px rgba(0,0,0,.42) !important;
}
body.home-v3 .home-sotd-wrap .sotw-card:hover{
  box-shadow:0 18px 40px rgba(0,0,0,.58) !important;
}
body.home-v3 .home-sotd-wrap .sotw-headline,
body.home-v3 .home-sotd-wrap .sotw-team{ color:#F5F5F3 !important; }
body.home-v3 .home-sotd-wrap .sotw-tag{
  color:#9A9A96 !important; border-top-color:rgba(245,245,243,.14) !important;
}
body.home-v3 .home-sotd-wrap .sotw-t,
body.home-v3 .home-sotd-wrap .sotw-t-sep{ color:#9A9A96 !important; }
body.home-v3 .home-sotd-wrap .sotw-wave i{ background:rgba(245,245,243,.26) !important; }
body.home-v3 .home-sotd-wrap .sotw-wave i.on{ background:var(--sg-red) !important; }

/* Ball watermark: the feed's dark-tuned art, held very subtly in the back. */
body.home-v3 .home-sotd-wrap .sotw-card::after{ opacity:.16 !important; }
body.home-v3 .home-sotd-wrap .sotw-card[data-sport="football"]::after{
  background-image:url("/static/img/feed/ball-football.png?v=20260824") !important; }
body.home-v3 .home-sotd-wrap .sotw-card[data-sport="basketball"]::after{
  background-image:url("/static/img/feed/ball-basketball.png?v=20260824") !important; }
body.home-v3 .home-sotd-wrap .sotw-card[data-sport="baseball"]::after{
  background-image:url("/static/img/feed/ball-baseball.png?v=20260824") !important; }
body.home-v3 .home-sotd-wrap .sotw-card[data-sport="soccer"]::after{
  background-image:url("/static/img/feed/ball-soccer.png?v=20260824") !important; }
body.home-v3 .home-sotd-wrap .sotw-card[data-sport="hockey"]::after{
  background-image:url("/static/img/feed/ball-hockey.png?v=20260824") !important; }

/* Heading: "of the Day" reads white now; "Smacks" keeps the red span. */
body.home-v3 .home-sotd-wrap .home-sotd-head--center h2{ color:#F5F5F3 !important; }
body.home-v3 .home-sotd-wrap .home-sotd-head--center h2 .v3-red{ color:var(--sg-red) !important; }

/* A little more room between the product cards above and this section. */
body.home-v3 .home-sotd-wrap.v3-sotd.sg-section{ padding-top:40px !important; }


/* =========================================================================
   SMACK ZONE — three featured cards (Andy, 4 Sep 2026)
   =========================================================================
   DESKTOP ONLY. Scoped under body.home-v3, which is the live desktop
   homepage; templates/mobile/index.html is a separate design and is not
   touched by anything in here. The point of the exercise is the reverse
   direction: desktop was the odd one out, so it now matches the phone.

   Replaces two sections that used to sit here -- the horizontal Daily
   Smack player band and the red numbered Feed/Battle/Lab/Meet Smacky
   directory. Their old rules (.v3-daily*, .v3-zone*) are left in the file
   above rather than surgically cut out: they no longer match any markup,
   they cost nothing, and leaving them means this change can be reverted
   by restoring one block of HTML instead of reassembling CSS from a diff.

   NEW CLASS NAMESPACE (zone3-) on purpose. Reusing .v3-zone-* would have
   meant inheriting a red section background, a 34%/66% grid and four
   numbered columns, all of which had to be overridden anyway -- and any
   rule missed would have shown up as a half-old, half-new section.
   ========================================================================= */

body.home-v3 .zone3{
  position:relative; overflow:hidden;
  background:var(--sg-ink);
  padding:78px 0 90px;
  /* Sits between the light Smack Board above and the black closing
     statement below, so the top edge is the only one that needs marking. */
  border-top:3px solid var(--sg-red);
}
/* Subtle red energy behind the lettering. Two soft pools rather than one
   even wash, so the section has a light source instead of a tint. */
body.home-v3 .zone3::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(58% 44% at 22% 12%, rgba(225,6,0,.20), transparent 70%),
    radial-gradient(52% 40% at 82% 6%,  rgba(225,6,0,.14), transparent 72%),
    radial-gradient(80% 55% at 50% 108%, rgba(225,6,0,.10), transparent 70%);
}
/* The light rays from the Option 3 reference: two soft beams raking down
   from the top corners. Very low contrast on purpose -- it should read as
   atmosphere behind the lettering, not as a graphic of its own. */
body.home-v3 .zone3::after{
  content:""; position:absolute; left:0; right:0; top:0; height:52%;
  pointer-events:none; z-index:0;
  background:
    linear-gradient(196deg, rgba(225,6,0,.13) 0 6%, transparent 6.5% 100%),
    linear-gradient(164deg, rgba(225,6,0,.10) 0 5%, transparent 5.5% 100%),
    linear-gradient(206deg, rgba(255,255,255,.05) 0 3%, transparent 3.5% 100%);
  background-repeat:no-repeat;
}

/* THE GHOSTED WORDMARK.
   Outline only, no fill, at roughly a tenth of full strength -- it has to
   read as depth behind the content and never as a second headline. Sits
   high in the section so it runs behind the heading and the top of the
   cards, which are the only places it has room to be seen. */
body.home-v3 .zone3-ghost{
  position:absolute; left:50%; top:96px; transform:translateX(-50%);
  z-index:0; pointer-events:none; user-select:none; white-space:nowrap;
  font-family:var(--sg-font-display); font-weight:400; line-height:.8;
  font-size:clamp(96px, 14.5vw, 268px); letter-spacing:.015em;
  color:transparent;
  /* Red-tinted outline, per the Option 3 reference, held at the low end of
     the 8-15% Andy specced -- the reference sits far heavier than that and
     would fight the headline sitting on top of it. */
  -webkit-text-stroke:2px rgba(255,86,74,.15);
  text-stroke:2px rgba(255,86,74,.15);
}
/* Safari on older versions ignores text-stroke on transparent text and
   paints a solid block. A near-black fill keeps it invisible there rather
   than dropping a giant white slab across the section. */
@supports not (-webkit-text-stroke: 2px #000){
  body.home-v3 .zone3-ghost{ color:rgba(255,255,255,.05); }
}

/* Andy asked for a 1320-1380 column here specifically -- wider than the
   sitewide 1280 -- so three ~428px cards land at the size he specced. */
body.home-v3 .zone3-inner{
  position:relative; z-index:1;
  width:min(1360px, calc(100% - 2*var(--smk-gutter)));
  margin-inline:auto;
}

body.home-v3 .zone3-h2{
  font-family:var(--sg-font-display); font-weight:400;
  font-size:clamp(2.4rem, 4.1vw, 4.1rem); line-height:.98;
  letter-spacing:.012em; text-transform:uppercase; text-align:center;
  color:#fff; margin:0 0 46px;
}
body.home-v3 .zone3-h2-red{ color:var(--sg-red); }

/* Equal columns, and every card the height of the tallest one. */
body.home-v3 .zone3-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:28px; align-items:stretch;
}

body.home-v3 .zone3-card{
  display:flex; flex-direction:column; height:100%;
  background:#0A0A0B; color:#fff; text-decoration:none;
  border:1px solid rgba(225,6,0,.55); border-radius:16px; overflow:hidden;
  /* A constant faint red halo, as in the Option 1 reference -- the cards
     sit in the section's light rather than on top of it. */
  box-shadow:0 18px 44px rgba(0,0,0,.55), 0 0 24px rgba(225,6,0,.14);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.home-v3 .zone3-card:hover{
  transform:translateY(-4px); border-color:var(--sg-red);
  box-shadow:0 22px 54px rgba(0,0,0,.62), 0 0 30px rgba(225,6,0,.24);
}

/* SQUARE, exactly as the phone crops it. The source art is square (or
   near enough), so cover has almost nothing to throw away and Smacky is
   framed the same way on both designs -- which is the entire point of
   this redesign. At a ~428px card that is ~64% of the card's height,
   inside the 55-65% Andy asked for. */
body.home-v3 .zone3-media{
  position:relative; display:block; overflow:hidden; line-height:0;
}
body.home-v3 .zone3-img{
  display:block; width:100%; height:auto; aspect-ratio:1 / 1;
  object-fit:cover; object-position:center;
}
@supports not (aspect-ratio: 1 / 1){
  body.home-v3 .zone3-img{ height:420px; }
}
/* The picture fades into the copy rather than stopping at a hard line. */
body.home-v3 .zone3-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 58%, rgba(10,10,11,.85) 88%, #0A0A0B 100%);
}

body.home-v3 .zone3-body{
  display:flex; flex-direction:column; flex:1 1 auto;
  /* Pulled up under the fade, the same trick the phone card uses, so the
     copy reads as part of the picture instead of a caption below it. */
  margin-top:-46px; position:relative; z-index:1;
  padding:0 26px 36px;
}
body.home-v3 .zone3-tag{
  align-self:flex-start; display:inline-block; margin-bottom:12px;
  padding:6px 12px; border-radius:999px; background:var(--sg-red);
  font-family:var(--sg-font-mono); font-weight:700; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:#fff;
}
body.home-v3 .zone3-title{
  display:block; font-family:var(--sg-font-display); font-weight:400;
  font-size:clamp(1.7rem, 2.05vw, 2.35rem); line-height:1;
  letter-spacing:.01em; text-transform:uppercase; color:#fff;
}
body.home-v3 .zone3-copy{
  display:block; flex:1 1 auto;
  font-family:var(--sg-font-body); font-size:16px; line-height:1.6;
  color:#D6D6D2; margin-top:12px;
}
body.home-v3 .zone3-copy b{ color:#fff; font-weight:700; }
/* margin-top:auto is what lines the three buttons up along the bottom
   however much copy sits above them. */
body.home-v3 .zone3-cta{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:56px; margin-top:26px; padding:16px 20px;
  border-radius:13px; background:var(--sg-red); color:#fff;
  font-family:var(--sg-font-body); font-weight:800; font-size:15.5px;
  letter-spacing:.04em; text-transform:uppercase; text-align:center;
  box-shadow:0 12px 30px -12px rgba(225,6,0,.8);
  transition:background-color .15s ease;
}
body.home-v3 .zone3-card:hover .zone3-cta{ background:var(--sg-red-hover); }
body.home-v3 .zone3-cta .v3-arrow{ transition:transform .15s ease; }
body.home-v3 .zone3-card:hover .zone3-cta .v3-arrow{ transform:translateX(4px); }

/* The sitewide focus ring is near-black, which is invisible here. The old
   .v3-zone rule handled this for the section it replaced; this is the
   same fix for the new namespace. */
body.home-v3 .zone3 :focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* ---------------------------- responsive ---------------------------- */
@media (max-width:1100px){
  body.home-v3 .zone3{ padding:60px 0 68px; }
  body.home-v3 .zone3-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; }
  /* Two up, then one centred underneath rather than stranded at the left. */
  body.home-v3 .zone3-card:last-child{ grid-column:1 / -1; max-width:calc(50% - 12px); margin-inline:auto; }
  body.home-v3 .zone3-ghost{ top:70px; }
}
@media (max-width:760px){
  body.home-v3 .zone3{ padding:46px 0 54px; }
  body.home-v3 .zone3-h2{ margin-bottom:32px; }
  body.home-v3 .zone3-grid{ grid-template-columns:1fr; gap:22px; }
  body.home-v3 .zone3-card:last-child{ grid-column:auto; max-width:none; margin-inline:0; }
  body.home-v3 .zone3-body{ padding:0 20px 22px; }
  body.home-v3 .zone3-ghost{ top:44px; font-size:clamp(64px, 20vw, 130px); }
}
@media (prefers-reduced-motion: reduce){
  body.home-v3 .zone3-card,
  body.home-v3 .zone3-cta,
  body.home-v3 .zone3-cta .v3-arrow{ transition:none; }
  body.home-v3 .zone3-card:hover{ transform:none; }
  body.home-v3 .zone3-card:hover .zone3-cta .v3-arrow{ transform:none; }
}


/* =========================================================================
   THE SMACKIVERSE — 2x2 card grid (Andy, 4 Sep 2026)
   =========================================================================
   DESKTOP ONLY, scoped under body.home-v3. templates/mobile/index.html is
   untouched -- this is the desktop twin of the phone's chapter 3, built to
   match it rather than to replace it.

   Everything is carried over from the phone's .sv-* cards: the artwork out
   of static/img/smackiverse/, the eyebrow / two-tone title / copy /
   text-link CTA, copy left and art bleeding off the right under a mask,
   the 1.5px red rim and the stacked slab shadow. The 2x2 grid is the only
   real difference, and the card keeps the phone's proportions so the
   existing square art crops the same way it already does there.

   Sits directly under .zone3 and is separated from it by this section's
   own border-top -- that red rule IS the divider Andy asked for.
   ========================================================================= */

body.home-v3 .sv3{
  position:relative; overflow:hidden;
  background:#050506;
  padding:74px 0 92px;
  border-top:3px solid var(--sg-red);
}
/* Arena lighting: two pools from the top corners and a floor bounce, the
   same treatment as the Smack Zone above so the two read as one stretch of
   the page rather than two black sections that happen to be adjacent. */
body.home-v3 .sv3::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(54% 40% at 16% 4%,  rgba(225,6,0,.17), transparent 72%),
    radial-gradient(54% 40% at 84% 4%,  rgba(225,6,0,.17), transparent 72%),
    radial-gradient(90% 46% at 50% 104%, rgba(225,6,0,.12), transparent 74%);
}
/* A faint truss line across the top -- structure, not decoration for its
   own sake, and low enough that the cards stay the focal point. */
body.home-v3 .sv3::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  pointer-events:none; z-index:0;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.10) 0 34px, transparent 34px 70px);
}

body.home-v3 .sv3-inner{
  position:relative; z-index:1;
  width:min(1360px, calc(100% - 2*var(--smk-gutter)));
  margin-inline:auto;
}

body.home-v3 .sv3-head{ text-align:center; margin-bottom:40px; }
body.home-v3 .sv3-kicker{
  font-family:var(--sg-font-body); font-weight:800;
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:#8E8B88; margin:0 0 12px;
}
body.home-v3 .sv3-h2{
  font-family:var(--sg-font-display); font-weight:400;
  font-size:clamp(2.4rem, 4.1vw, 4.1rem); line-height:.95;
  letter-spacing:.012em; text-transform:uppercase; color:#fff; margin:0;
}
body.home-v3 .sv3-h2-red{ color:var(--sg-red); }

body.home-v3 .sv3-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:28px; align-items:stretch;
}

/* The card's proportions are the phone's, scaled up: a ~2:1 box, art
   occupying the right 62%. That ratio is not arbitrary -- the artwork is
   square with the subject in its right half, and this is the crop it was
   drawn for. Changing the card's aspect re-crops all four images. */
body.home-v3 .sv3-card{
  position:relative; display:block; overflow:hidden; text-decoration:none;
  min-height:clamp(300px, 24vw, 356px);
  border-radius:20px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.10'/></svg>"),
    radial-gradient(120% 90% at 0% 0%, #1B1C1E 0%, #121315 42%, #08090A 100%);
  border:1.5px solid rgba(232,20,12,.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 26px 44px -20px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,72,64,.24),
    0 0 14px rgba(225,6,0,.34),
    0 0 34px -4px rgba(225,6,0,.24);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* Andy: "hover state can slightly brighten red border/glow -- do not
   over-animate." A brighter rim and 2px of lift, nothing else. */
body.home-v3 .sv3-card:hover{
  transform:translateY(-2px);
  border-color:#FF3C33;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 28px 50px -20px rgba(0,0,0,.92),
    0 0 0 1px rgba(255,72,64,.40),
    0 0 20px rgba(225,6,0,.50),
    0 0 44px -4px rgba(225,6,0,.34);
}

/* The art sits UNDER the copy as one layer, so the card has no internal
   seam and the copy can overlap the picture's dark side. The mask runs
   transparent at the box's left edge to solid at 55% of its width, which
   is why the artwork spec puts the subject in the right half. */
body.home-v3 .sv3-art{
  position:absolute; inset:0 0 0 38%; z-index:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 26%, #000 55%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 26%, #000 55%);
}
body.home-v3 .sv3-art img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}

body.home-v3 .sv3-body{
  position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; gap:2px;
  height:100%; max-width:58%; padding:32px 36px;
}
body.home-v3 .sv3-eyebrow{
  font-family:var(--sg-font-body); font-weight:800;
  font-size:12.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sg-red-bright);
}
/* Inter 900, NOT the Anton used for section headings -- this is the
   phone's own treatment for these titles and the point is to match it. */
body.home-v3 .sv3-title{
  font-family:var(--sg-font-body); font-weight:900;
  font-size:clamp(30px, 2.5vw, 44px); line-height:.98; letter-spacing:-.02em;
  text-transform:uppercase; margin-top:8px;
  text-shadow:0 3px 0 rgba(0,0,0,.6), 0 8px 18px rgba(0,0,0,.8);
}
body.home-v3 .sv3-title .w{ color:#fff; }
body.home-v3 .sv3-title .r{ color:var(--sg-red); }
body.home-v3 .sv3-copy{
  font-family:var(--sg-font-body); font-size:16px; line-height:1.5;
  color:#D7D4D1; margin-top:12px; text-shadow:0 2px 8px rgba(0,0,0,.9);
}
/* A text link with an arrow, as on the phone -- deliberately NOT the
   filled button the Smack Zone cards use. Two card rows of identical red
   buttons stacked on each other would flatten the page's hierarchy. */
body.home-v3 .sv3-cta{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  margin-top:12px;
  font-family:var(--sg-font-body); font-weight:800;
  font-size:13.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sg-red-bright);
}
body.home-v3 .sv3-cta em{ font-style:normal; transition:transform .15s ease; }
body.home-v3 .sv3-card:hover .sv3-cta em{ transform:translateX(4px); }

/* The sitewide focus ring is near-black and would vanish on this section. */
body.home-v3 .sv3 :focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* ---------------------------- responsive ---------------------------- */
@media (max-width:1100px){
  body.home-v3 .sv3{ padding:58px 0 68px; }
  body.home-v3 .sv3-grid{ gap:22px; }
  body.home-v3 .sv3-body{ padding:26px 28px; max-width:60%; }
}
@media (max-width:860px){
  body.home-v3 .sv3-grid{ grid-template-columns:1fr; }
  body.home-v3 .sv3-card{ min-height:264px; }
}
@media (max-width:560px){
  body.home-v3 .sv3{ padding:44px 0 52px; }
  body.home-v3 .sv3-head{ margin-bottom:28px; }
  body.home-v3 .sv3-card{ min-height:212px; border-radius:16px; }
  body.home-v3 .sv3-body{ padding:20px 20px; max-width:70%; }
  body.home-v3 .sv3-copy{ font-size:14px; }
}
@media (prefers-reduced-motion: reduce){
  body.home-v3 .sv3-card,
  body.home-v3 .sv3-cta em{ transition:none; }
  body.home-v3 .sv3-card:hover{ transform:none; }
  body.home-v3 .sv3-card:hover .sv3-cta em{ transform:none; }
}