/* =========================================================
   MassageChairCanada — styles.css (ULTRA LUXE v4)
   ONE SOURCE OF TRUTH:
   - Amazon CTA (single version)
   - Product media sizing
   - Money pages: FULL-WIDTH HERO (.hero--banner)
   - Review pages: CONTAINED HERO + optional STEAM (.hero--contained / .hero--steam)
   - Mobile menu upgraded (drawer, no horizontal scroll)
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  /* Layout */
  --max: 1120px;
  --max-wide: 1320px;
  --gutter: clamp(16px, 3.6vw, 28px);

  /* Radius */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-2xl: 34px;

  /* Shadows */
  --shadow-soft: 0 10px 30px rgba(0,0,0,.28);
  --shadow-card: 0 18px 55px rgba(0,0,0,.35);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,.06), 0 18px 70px rgba(0,0,0,.38);

  /* Typography */
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --serif: ui-serif, "Iowan Old Style", Georgia, Cambria, "Times New Roman", Times, serif;

  --fs-0: 12px;
  --fs-1: 14px;
  --fs-2: 16px;
  --fs-3: 18px;
  --fs-4: 22px;
  --fs-5: 28px;
  --fs-6: 36px;

  /* Line heights */
  --lh-tight: 1.18;
  --lh: 1.58;

  /* Dark theme core */
  --bg: #07060a;
  --bg2:#0b0d14;
  --panel:#0f111b;
  --panel2:#121425;
  --panel3:#161a2e;

  /* Text */
  --text: #f3f5fb;
  --text2:#e6e8f2;
  --muted:#aab2c7;
  --muted2:#7f8aa6;

  /* Lines */
  --line: rgba(255,255,255,.10);
  --line2: rgba(255,255,255,.14);

  /* Gold palette */
  --gold-1: #f7e7b0;
  --gold-2: #e9c66a;
  --gold-3: #caa24a;
  --gold-4: #b38b3a;
  --gold-5: #8b6a2a;

  /* Accent */
  --accent: var(--gold-2);
  --accent2: var(--gold-3);

  /* Semantic */
  --ok: #7ef0c6;
  --warn: #ffd28e;
  --bad: #ff7c93;

  /* Controls */
  --tap: 44px;

  /* Fancy gradients */
  --g-hero:
    radial-gradient(1100px 520px at 20% -10%, rgba(233,198,106,.22), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(179,139,58,.14), transparent 58%),
    radial-gradient(800px 520px at 18% 115%, rgba(247,231,176,.10), transparent 62%),
    radial-gradient(800px 520px at 88% 115%, rgba(123,95,36,.10), transparent 62%);

  --g-card:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    radial-gradient(800px 420px at 15% 0%, rgba(233,198,106,.10), transparent 58%),
    radial-gradient(650px 360px at 90% 10%, rgba(179,139,58,.08), transparent 56%);

  --g-gold-line:
    linear-gradient(90deg,
      rgba(247,231,176,.0),
      rgba(247,231,176,.45),
      rgba(202,162,74,.55),
      rgba(179,139,58,.55),
      rgba(247,231,176,.45),
      rgba(247,231,176,.0)
    );

  --g-button:
    linear-gradient(135deg,
      rgba(247,231,176,.26),
      rgba(233,198,106,.20),
      rgba(202,162,74,.14)
    );

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ---------- Light theme ---------- */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb;
    --bg2:#ffffff;
    --panel:#ffffff;
    --panel2:#ffffff;
    --panel3:#ffffff;

    --text:#101426;
    --text2:#131a2d;
    --muted:#4c5a79;
    --muted2:#6a7896;

    --line: rgba(16,20,38,.10);
    --line2: rgba(16,20,38,.14);

    --shadow-soft: 0 10px 24px rgba(20,28,55,.10);
    --shadow-card: 0 18px 42px rgba(20,28,55,.12);
    --shadow-glow: 0 0 0 1px rgba(16,20,38,.06), 0 18px 50px rgba(20,28,55,.12);

    --g-hero:
      radial-gradient(1100px 520px at 20% -10%, rgba(233,198,106,.24), transparent 60%),
      radial-gradient(900px 520px at 90% 0%, rgba(179,139,58,.14), transparent 58%);

    --g-card:
      linear-gradient(180deg, rgba(16,20,38,.04), rgba(16,20,38,.01)),
      radial-gradient(800px 420px at 15% 0%, rgba(233,198,106,.12), transparent 58%),
      radial-gradient(650px 360px at 90% 10%, rgba(179,139,58,.10), transparent 56%);
  }
}

/* =========================================================
   Reset + Safety (anti overflow)
   ========================================================= */
*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body{
  margin:0;
  min-height:100%;
  font-family: var(--sans);
  line-height: var(--lh);
  color: var(--text);
  background:
    var(--g-hero),
    radial-gradient(1200px 700px at 50% 110%, rgba(202,162,74,.10), transparent 60%),
    var(--bg);
  overflow-x: hidden;
}

img, svg, video, canvas{
  max-width:100%;
  height:auto;
  display:block;
}

pre, code, kbd, samp{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .95em;
  overflow:auto;
  max-width: 100%;
}

a, button, input, select, textarea{ font: inherit; }

:where(h1,h2,h3,h4,p,ul,ol,li,figure,blockquote){
  overflow-wrap:anywhere;
  word-break: normal;
}

:where(table){
  width:100%;
  border-collapse: collapse;
  border-spacing:0;
}

:where(th,td){ overflow-wrap:anywhere; }

::selection{ background: rgba(233,198,106,.30); }

:focus-visible{
  outline: 3px solid rgba(233,198,106,.55);
  outline-offset: 3px;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

/* =========================================================
   Layout helpers
   ========================================================= */
.container{
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
}

.container--wide{
  width: min(100% - (var(--gutter) * 2), var(--max-wide));
  margin-inline: auto;
}

.section{
  padding: clamp(18px, 3.2vw, 30px) 0;
}

/* Full-bleed utility (one source of truth) */
.full-bleed{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* =========================================================
   Cards
   ========================================================= */
.card{
  position: relative;
  border-radius: var(--r-2xl);
  padding: clamp(18px, 3.6vw, 26px);
  background: var(--g-card), color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  overflow: hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 520px at 15% 0%, rgba(233,198,106,.10), transparent 58%);
  opacity:.8;
}

.card::after{
  content:"";
  position:absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  background: var(--g-gold-line);
  opacity:.95;
  pointer-events:none;
}

/* Optional: wider card wrapper without going 100vw */
.card--wide{
  width: min(100% - (var(--gutter) * 2), var(--max-wide));
  margin-inline: auto;
}

/* =========================================================
   Topbar / Header (luxury glass)
   - Desktop: inline pills
   - Mobile: drawer menu (no horizontal scroll)
   ========================================================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg2) 76%, transparent);
  border-bottom: 1px solid var(--line);
}

.topbar .container{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 14px 0;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  min-width: 220px;
  max-width: 60%;
}

.brand img{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.brand .name{
  display:block;
  font-weight: 820;
  letter-spacing: .2px;
  color: var(--text);
  line-height: 1.15;
}

.brand .tag{
  display:block;
  font-size: var(--fs-0);
  color: var(--muted);
  margin-top: 2px;
}

/* Nav (desktop default) */
.nav{
  margin-left: auto;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
  max-width: 60%;
}

.nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  text-decoration:none;
  color: var(--text2);
  font-size: var(--fs-1);
  border: 1px solid color-mix(in srgb, var(--line2) 70%, transparent);
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}

.nav a:hover{
  transform: translateY(-1px);
  border-color: rgba(233,198,106,.35);
  background: color-mix(in srgb, var(--panel2) 78%, transparent);
  text-decoration:none;
}

/* Mobile menu button (optional HTML)
   <button class="nav-toggle" aria-controls="mobile-nav" aria-expanded="false">
     <span class="sr-only">Menu</span> ☰
   </button>
*/
.nav-toggle{
  display:none;
  margin-left: auto;
  height: 42px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, rgba(233,198,106,.35) 60%, var(--line2));
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  color: var(--text);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:active{ transform: translateY(0); }

/* Mobile drawer (optional HTML)
   <div class="mobile-nav" id="mobile-nav" data-open="false">
     <a ...>...</a>
   </div>
   <div class="nav-scrim" data-open="false"></div>
*/
.mobile-nav,
.nav-scrim{ display:none; }

@media (max-width: 760px){
  .topbar .container{
    flex-wrap: nowrap;
    gap: 10px;
    padding: 12px 0;
  }

  .brand{
    min-width: 0;
    max-width: calc(100% - 56px);
  }

  /* Hide desktop nav pills, show burger */
  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* Drawer */
  .mobile-nav{
    display:block;
    position: fixed;
    top: 10px;
    right: 10px;
    width: min(92vw, 380px);
    max-height: calc(100vh - 20px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-2xl);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(16,18,26,.72);
    box-shadow: 0 28px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translateY(-8px) scale(.98);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s var(--ease), opacity .18s var(--ease);
    z-index: 80;
    padding: 10px;
  }

  .mobile-nav[data-open="true"]{
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-nav a{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 16px;
    text-decoration:none;
    color: rgba(230,232,242,.96);
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    font-weight: 800;
    letter-spacing: .01em;
    margin: 8px 0;
  }
  .mobile-nav a:hover{
    border-color: rgba(233,198,106,.28);
    background: rgba(255,255,255,.06);
    text-decoration:none;
  }

  .nav-scrim{
    display:block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s var(--ease);
    z-index: 70;
  }
  .nav-scrim[data-open="true"]{
    opacity: 1;
    pointer-events: auto;
  }
}

/* =========================================================
   HERO SYSTEM
   ========================================================= */
.hero{ padding: clamp(16px, 3vw, 26px) 0 10px; }

/* =========================================================
   A) FULL-WIDTH HERO (money pages)  .hero hero--banner
   ========================================================= */
.hero--banner{ padding: 0; }

.hero--banner .hero-banner{
  position: relative;
  min-height: clamp(420px, 44vw, 660px);
  border-bottom: 1px solid var(--line);
  background: #0b0d14;
  overflow: hidden;
}

.hero--banner .hero-banner picture,
.hero--banner .hero-banner img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero--banner .hero-banner > img,
.hero--banner .hero-banner picture img{
  object-fit: cover;
  object-position: 75% 45%;
  transform: scale(1.01);
  filter: saturate(1.03) contrast(1.03);
}

.hero--banner .hero-banner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 520px at 70% 40%, rgba(233,198,106,.14), transparent 60%),
    linear-gradient(90deg,
      rgba(7,6,10,.94) 0%,
      rgba(7,6,10,.80) 40%,
      rgba(7,6,10,.22) 72%,
      rgba(7,6,10,.10) 100%
    ),
    linear-gradient(180deg, rgba(7,6,10,.55) 0%, rgba(7,6,10,.14) 55%, rgba(7,6,10,.62) 100%);
}

.hero--banner .hero-banner::after{
  content:"";
  position:absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: var(--g-gold-line);
  opacity: .85;
  pointer-events:none;
}

.hero--banner .hero-overlay{
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(14px, 2.6vw, 22px);
  align-content: start;
  padding: clamp(18px, 3.2vw, 34px) 0;
}

.hero--banner .hero-box{
  background: rgba(16, 18, 26, .52);
  border: 1px solid rgba(233,198,106,.22);
  box-shadow: 0 18px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  border-radius: var(--r-2xl);
  padding: clamp(16px, 2.6vw, 22px);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero--banner .hero-side{
  border-left: 1px solid rgba(255,255,255,.08);
  padding-left: clamp(14px, 2.6vw, 22px);
  align-self: start;
}

@media (min-width: 921px){
  .hero--banner .hero-side{ margin-top: clamp(48px, 6vw, 130px); }
}

.hero--banner .hero-side .aside-box,
.hero--banner .hero-side .note{
  background: rgba(16, 18, 26, .40);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 44px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

@media (max-width: 920px){
  .hero--banner .hero-overlay{ grid-template-columns: 1fr; padding: 16px 0 20px; }
  .hero--banner .hero-side{
    margin-top: 10px;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 14px;
  }
}

@media (max-width: 760px){
  .hero--banner .hero-banner{ min-height: 560px; }
  .hero--banner .hero-banner > img{ object-position: 70% 40%; }
}

/* =========================================================
   B) CONTAINED HERO (review pages)
   ========================================================= */
.hero--contained{ padding: 22px 0 10px; }

.hero--contained .full-bleed,
.hero--contained .hero-banner{
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  min-height: unset !important;
  border: none !important;
  background: none !important;
}

.hero--contained .hero-shell{
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
}

.hero--contained .hero-card{
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  background: var(--g-card), color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Optional: STEAM layout */
.hero--contained.hero--steam .hero-steam{
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: clamp(14px, 2.2vw, 18px);
  padding: clamp(16px, 2.6vw, 22px);
  align-items: start;
}
.hero--contained.hero--steam .hero-steam__media{
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0b0d14;
  box-shadow: var(--shadow-soft);
  position: relative;
  aspect-ratio: 16 / 9;
}
.hero--contained.hero--steam .hero-steam__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.03) contrast(1.03);
  transform: scale(1.01);
}
.hero--contained.hero--steam .hero-steam__media::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(233,198,106,.10), transparent 62%),
    linear-gradient(180deg, rgba(7,6,10,.08), rgba(7,6,10,.22));
  opacity:.9;
}
.hero--contained.hero--steam .hero-steam__panel{ min-width: 0; }
@media (max-width: 920px){
  .hero--contained.hero--steam .hero-steam{ grid-template-columns: 1fr; }
}
.hero--contained.hero--steam .hero-steam__cta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
@media (max-width: 520px){
  .hero--contained.hero--steam .hero-steam__cta .btn{
    width: 100%;
    justify-content:center;
  }
}

/* =========================================================
   Typography (lux readable)
   ========================================================= */
h1{
  margin: 12px 0 10px;
  font-size: clamp(28px, 4.4vw, 52px);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
}
h2{
  margin: 0 0 10px;
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: -0.02em;
}
h3{
  margin: 18px 0 10px;
  font-size: 18px;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 12px; }

.lead{
  margin: 0 0 14px;
  max-width: 70ch;
  color: var(--text2);
  font-size: clamp(16px, 2.1vw, 18px);
}
.muted{ color: var(--muted); }

strong{
  color: color-mix(in srgb, var(--gold-1) 30%, var(--text));
  font-weight: 800;
}

/* Links */
a{
  color: color-mix(in srgb, var(--gold-2) 85%, #ffffff);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover{
  text-decoration: underline;
  text-decoration-color: rgba(233,198,106,.65);
}

/* CTA row */
.cta-row{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Mobile hero fine-tune */
@media (max-width: 760px){
  .hero-box{ border-radius: 20px; }
}
@media (max-width: 520px){
  .cta-row > .btn{
    width: 100%;
    justify-content:center;
  }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  min-height: var(--tap);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, rgba(233,198,106,.35) 60%, var(--line2));
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .01em;
  box-shadow: var(--shadow-soft);
  transition: transform .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{
  transform: translateY(-1px);
  text-decoration:none;
  background: color-mix(in srgb, var(--panel2) 78%, transparent);
  border-color: rgba(233,198,106,.45);
}
.btn:active{ transform: translateY(0); }
.btn.primary{
  background: var(--g-button), color-mix(in srgb, var(--panel2) 70%, transparent);
  border-color: rgba(233,198,106,.55);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}
.btn.primary:hover{ border-color: rgba(247,231,176,.70); }

/* -------- Amazon CTA (one version) -------- */
.btn.btn--amazon{
  position: relative;
  border-radius: 999px;
  border: 1px solid rgba(233,198,106,.70);
  color: #0b0d14;
  background: linear-gradient(135deg,
    rgba(247,231,176,1) 0%,
    rgba(233,198,106,1) 28%,
    rgba(202,162,74,1) 62%,
    rgba(247,231,176,1) 100%
  );
  box-shadow: 0 18px 50px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.10) inset;
  font-weight: 900;
  letter-spacing: .01em;
  transition: transform .16s var(--ease), filter .16s var(--ease), box-shadow .16s var(--ease);
}
.btn.btn--amazon::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.25), transparent 55%);
  opacity: .55;
  mix-blend-mode: soft-light;
}
.btn.btn--amazon::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  filter: blur(10px);
  opacity: .55;
  pointer-events:none;
}
.btn.btn--amazon:hover{
  transform: translateY(-1px);
  filter: saturate(1.05) contrast(1.05);
  box-shadow: 0 22px 65px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.14) inset;
}
.btn.btn--amazon:active{
  transform: translateY(0);
  filter: saturate(1) contrast(1);
  box-shadow: 0 14px 42px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.10) inset;
}
.btn.btn--amazon:focus-visible{
  outline: 3px solid rgba(233,198,106,.55);
  outline-offset: 3px;
}
.btn .btn-meta{
  margin-left: 10px;
  display:inline-flex;
  align-items:center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(11,13,20,.16);
  border: 1px solid rgba(11,13,20,.18);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(11,13,20,.92);
}

/* -------- Product media sizing -------- */
.product-media{ margin: 14px 0 16px; }
.product-media img{
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: var(--r-xl);
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow-soft);
}

/* =========================================================
   Hero Aside (legacy support)
   ========================================================= */
.hero-aside{
  border-left: 1px solid var(--line);
  padding-left: clamp(14px, 3vw, 22px);
}

.aside-box{
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel2) 82%, transparent);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.aside-box h2{
  margin:0 0 10px;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.aside-box ul{
  margin:0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
}

.note{
  margin-top: 14px;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, rgba(233,198,106,.35) 55%, var(--line));
  background: color-mix(in srgb, var(--panel2) 84%, transparent);
  color: var(--muted);
  padding: 12px 14px;
  position: relative;
}

.note::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(247,231,176,.85), rgba(202,162,74,.85));
}

@media (max-width: 920px){
  .hero-aside{
    border-left:none;
    padding-left:0;
    border-top: 1px solid var(--line);
    padding-top: 16px;
  }
}

/* =========================================================
   VIDEO (premium wide but controlled)
   ========================================================= */
.video-wrap{
  position: relative;
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow-soft);
}
.video-wrap iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* controlled wide */
.video-wrap--wide{
  width: min(100% - (var(--gutter) * 2), var(--max-wide));
  max-width: var(--max-wide);
  margin: 18px auto 0;
  border-radius: 18px;
  box-shadow: var(--shadow-glow);
  background: rgba(0,0,0,.25);
}
@media (max-width: 760px){
  .video-wrap--wide{
    width: min(100% - (var(--gutter) * 2), var(--max));
    margin-top: 14px;
    border-radius: 16px;
  }
}

/* =========================================================
   Tables (no overflow, lux)
   ========================================================= */
.table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel2) 74%, transparent);
  box-shadow: var(--shadow-soft);
  margin-top: 12px;
}
.table-wrap::after{
  content:"";
  display:block;
  height: 1px;
  background: var(--g-gold-line);
  opacity: .65;
}

table{ min-width: 820px; }

th, td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  text-align:left;
  vertical-align: top;
}

th{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted2);
  background: color-mix(in srgb, var(--panel3) 78%, transparent);
  position: sticky;
  top: 0;
  z-index: 1;
}

td{
  font-size: 14px;
  color: var(--text2);
}

.rank{
  font-weight: 900;
  color: color-mix(in srgb, var(--gold-1) 35%, var(--text));
}

@media (max-width: 760px){
  .table-wrap{ border-radius: var(--r-lg); }
  th, td{ padding: 12px 10px; }
}

/* =========================================================
   Product blocks
   ========================================================= */
.product{
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 18px;
  position: relative;
}

.product:first-child{
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.product-head{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:flex-start;
  justify-content: space-between;
}

.badges{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items:center;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, rgba(233,198,106,.25) 60%, var(--line));
  background: color-mix(in srgb, var(--panel2) 76%, transparent);
  color: color-mix(in srgb, var(--gold-1) 25%, var(--muted));
  font-size: 12px;
  white-space: nowrap;
}

ul{
  margin: 0 0 12px;
  padding-left: 18px;
  color: var(--text2);
}
li{ margin: 6px 0; }

/* Pros/Cons grid */
.proscons{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}
@media (max-width: 840px){
  .proscons{ grid-template-columns: 1fr; }
}

.pc{
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel2) 80%, transparent);
  padding: 14px 14px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  position: relative;
}
.pc::after{
  content:"";
  position:absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  background: var(--g-gold-line);
  opacity:.55;
}
.pc strong{
  display:block;
  margin-bottom: 8px;
  font-weight: 900;
}

/* CTA line under products */
.cta{
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.cta .muted{ font-size: 14px; }

@media (max-width: 520px){
  .cta{
    flex-direction: column;
    align-items: stretch;
  }
  .cta .btn{ width: 100%; }
}

/* =========================================================
   Grid helpers
   ========================================================= */
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   Footer
   ========================================================= */
.footer{
  padding: 28px 0 46px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.footer a{
  color: var(--text);
  opacity: .92;
}
.footer a:hover{ opacity: 1; }

/* =========================================================
   Accessibility / Utilities
   ========================================================= */
.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;
}
.sr-only:focus{
  position: fixed;
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 10px 12px;
  margin: 0;
  clip: auto;
  background: color-mix(in srgb, var(--panel2) 88%, transparent);
  border: 1px solid rgba(233,198,106,.35);
  border-radius: 12px;
  z-index: 9999;
}

/* =========================================================
   Extra overflow guards
   ========================================================= */
main, header, footer, section, article, nav, div{ max-width: 100%; }
.table-wrap, .card{ max-width: 100%; }
:where(a, span, strong){ min-width: 0; }
a{ word-break: break-word; overflow-wrap:anywhere; }

/* Optional: nicer scrollbars (webkit) */
@media (hover:hover){
  ::-webkit-scrollbar{ height: 10px; width: 10px; }
  ::-webkit-scrollbar-track{ background: color-mix(in srgb, var(--panel2) 70%, transparent); }
  ::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, rgba(247,231,176,.35), rgba(202,162,74,.35));
    border: 2px solid color-mix(in srgb, var(--panel2) 70%, transparent);
    border-radius: 999px;
  }
}

/* =========================================================
   Steam hero: IMAGE ON THE RIGHT (desktop only)
   Add class: hero--steam-right
   Works with CSS Grid (no order hacks)
   ========================================================= */
@media (min-width: 921px){
  .hero--contained.hero--steam.hero--steam-right .hero-steam{
    /* LEFT = panel (BIG), RIGHT = media (SMALL) */
    grid-template-columns: 1.55fr 0.85fr;
    grid-template-areas: "panel media";
    align-items: start;
  }

  .hero--contained.hero--steam.hero--steam-right .hero-steam__panel{
    grid-area: panel;
    min-width: 0;
  }

  .hero--contained.hero--steam.hero--steam-right .hero-steam__media{
    grid-area: media;
    margin-left: auto;
    max-width: 520px;  /* Steam-like capsule size */
  }
}

/* =========================================================
   Steam hero mobile polish (perfect stacking)
   Goal: Media first, then right-side notes, then text panel
   ========================================================= */
@media (max-width: 920px){
  /* Stack order */
  .hero--contained.hero--steam.hero--steam-right .hero-steam{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "panel";
    gap: 0;
    padding: 0;
    align-items: stretch;
  }

  .hero--contained.hero--steam.hero--steam-right .hero-steam__media{
    grid-area: media;
    padding: clamp(14px, 3.2vw, 18px);
    overflow: visible;
  }

  .hero--contained.hero--steam.hero--steam-right .hero-steam__panel{
    grid-area: panel;
    padding: clamp(14px, 3.2vw, 18px);
    border-right: none !important;
    border-top: 1px solid rgba(255,255,255,.10);
  }

  /* Make header image box full width on mobile */
  .hero--contained.hero--steam.hero--steam-right .hero-steam__media > div[aria-label="Header image"]{
    max-width: 100% !important;
  }
}

/* Extra small phones */
@media (max-width: 520px){
  .hero--contained.hero--steam.hero--steam-right .hero-steam__panel,
  .hero--contained.hero--steam.hero--steam-right .hero-steam__media{
    padding: 14px;
  }
}

/* =========================================================
   HOME HERO PATCH (uses existing .hero--banner system)
   ========================================================= */

/* 1) Better contrast + glow for HOME */
.hero--banner .hero-banner::before{
  background:
    radial-gradient(1100px 560px at 65% 35%, rgba(233,198,106,.18), transparent 62%),
    radial-gradient(900px 520px at 20% 10%, rgba(247,231,176,.08), transparent 60%),
    linear-gradient(90deg,
      rgba(7,6,10,.96) 0%,
      rgba(7,6,10,.82) 42%,
      rgba(7,6,10,.24) 74%,
      rgba(7,6,10,.12) 100%
    ),
    linear-gradient(180deg, rgba(7,6,10,.52) 0%, rgba(7,6,10,.10) 52%, rgba(7,6,10,.66) 100%);
}

/* 2) Make the hero box feel more “gold luxury” */
.hero--banner .hero-box{
  border-color: rgba(233,198,106,.28);
  box-shadow: 0 22px 80px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06);
}

/* 3) Slightly larger headline on desktop (home only) */
@media (min-width: 921px){
  .hero--banner h1{ font-size: clamp(34px, 3.6vw, 58px); }
}

/* 4) Mobile: keep it punchy */
@media (max-width: 760px){
  .hero--banner .hero-banner{ min-height: 600px; }
}

/* =========================================================
   MONEY PAGE PATCHES (Best Massage Chair page)
   Add to END of styles.css
   ========================================================= */

/* Utility widths used in HTML */
.max-65ch{ max-width: 65ch; }

/* Small kicker line used above H1 */
.kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, rgba(233,198,106,.28) 60%, var(--line));
  background: color-mix(in srgb, var(--panel2) 70%, transparent);
  color: color-mix(in srgb, var(--gold-1) 18%, var(--muted));
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: var(--shadow-soft);
}

/* “At a glance” cards row (used in hero) */
.at-a-glance{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 900px){
  .at-a-glance{ grid-template-columns: 1fr; }
}

/* Sticky mobile CTA (conversion booster) */
.sticky-cta{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 999;
  display: none; /* desktop off */
  border-radius: 999px;
  border: 1px solid rgba(233,198,106,.22);
  background: color-mix(in srgb, var(--bg2) 72%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 26px 90px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 10px;
}

.sticky-cta .row{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
}

.sticky-cta .label{
  font-size: 13px;
  color: rgba(230,232,242,.92);
  line-height: 1.2;
  padding-left: 6px;
}

.sticky-cta .label strong{
  color: rgba(247,231,176,.92);
}

.sticky-cta .btn{
  white-space: nowrap;
  min-height: 44px;
  padding: 10px 14px;
}

@media (max-width: 760px){
  .sticky-cta{ display:block; }
  body{ padding-bottom: 92px; } /* room for sticky bar */
}

/* Very small phones: tighten */
@media (max-width: 380px){
  .sticky-cta{ left: 10px; right: 10px; bottom: 10px; }
  .sticky-cta .label{ font-size: 12px; }
  .sticky-cta .btn{ padding: 10px 12px; }
}

/* =========================================================
   Alternatives layout (image 800x800 in right capsule)
   HTML uses: .alt-grid .alt-content .alt-media
   ========================================================= */

/* Desktop/tablet: 2 columns (text + square media) */
.alt-grid{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(14px, 2.2vw, 18px);
  align-items: start;
}

/* The right “square capsule” */
.alt-media{
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(233,198,106,.22);
  background: rgba(11,13,20,.35);
  box-shadow: var(--shadow-soft);
  position: relative;
  aspect-ratio: 1 / 1;        /* forces square */
  max-width: 460px;           /* keeps it elegant */
  margin-left: auto;          /* hugs right edge */
}

/* Image fills the square neatly */
.alt-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  filter: saturate(1.03) contrast(1.03);
}

/* Luxury overlay glow */
.alt-media::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(233,198,106,.10), transparent 62%),
    linear-gradient(180deg, rgba(7,6,10,.08), rgba(7,6,10,.22));
  opacity:.9;
}

.alt-content{ min-width: 0; }

/* Responsive: stack, image first (like your hero steam behavior) */
@media (max-width: 920px){
  .alt-grid{
    grid-template-columns: 1fr;
  }
  .alt-media{
    max-width: 520px;
    margin: 10px auto 0;  /* centered */
    order: -1;            /* image first */
  }
}

/* =========================================================
   HERO NOTES UNDER IMAGE (for .hero-notes inside hero-steam__media)
   ========================================================= */

/* Allow the media column to contain image + notes */
.hero--contained.hero--steam .hero-steam__media{
  display: flex;
  flex-direction: column;
  gap: 12px; /* space between image and notes */
  height: auto; /* important: don't force only the 16:9 box */
  aspect-ratio: auto; /* override previous 16:9 lock */
}

/* Keep the picture as the “capsule” */
.hero--contained.hero--steam .hero-steam__media picture{
  display:block;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0b0d14;
  box-shadow: var(--shadow-soft);
  position: relative;
  aspect-ratio: 16 / 9;
}

/* Image fills the capsule */
.hero--contained.hero--steam .hero-steam__media picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.03) contrast(1.03);
  transform: scale(1.01);
}

/* Glow overlay on the picture (not the whole column) */
.hero--contained.hero--steam .hero-steam__media picture::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(233,198,106,.10), transparent 62%),
    linear-gradient(180deg, rgba(7,6,10,.08), rgba(7,6,10,.22));
  opacity:.9;
}

/* Notes block under the image */
.hero-notes{
  display: grid;
  gap: 12px;
}

/* =========================================================
   PREMIUM HUB — HERO IMAGE ONLY (no overlay)
   Add to END of styles.css
   ========================================================= */

/* 1) Image-only hero: remove padding */
.hero--banner.hero--image-only{ padding: 0; }

/* 2) Set a cinematic height that works on iPhone */
.hero--banner.hero--image-only .hero-banner{
  min-height: clamp(240px, 34vw, 520px);
}

/* 3) Kill the readability overlays (they were for text) */
.hero--banner.hero--image-only .hero-banner::before,
.hero--banner.hero--image-only .hero-banner::after{
  content: none !important;
}

/* 4) Make sure any accidental overlay content is never shown */
.hero--banner.hero--image-only .hero-overlay,
.hero--banner.hero--image-only .hero-box,
.hero--banner.hero--image-only .hero-side{
  display: none !important;
}

/* 5) Nice cropping by default */
.hero--banner.hero--image-only .hero-banner picture img,
.hero--banner.hero--image-only .hero-banner > img{
  object-position: 55% 45% !important;
  transform: none !important;
  filter: saturate(1.03) contrast(1.03);
}

/* 6) Mobile tune: shorter so it doesn't feel like a full screen ad */
@media (max-width: 760px){
  .hero--banner.hero--image-only .hero-banner{
    min-height: clamp(220px, 58vw, 380px);
  }
  .hero--banner.hero--image-only .hero-banner picture img,
  .hero--banner.hero--image-only .hero-banner > img{
    object-position: 60% 45% !important;
  }
}

/* =========================================================
   FIX — Steam media = image capsule + notes under (stable)
   Scope: only when .hero-notes exists
   Paste at END of styles.css
   ========================================================= */

.hero--contained.hero--steam .hero-steam__media{
  /* reset the old “capsule container” behavior */
  aspect-ratio: auto;
  height: auto;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Make the picture the actual 16:9 capsule */
.hero--contained.hero--steam .hero-steam__media > picture{
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0b0d14;
  box-shadow: var(--shadow-soft);
}

/* Image fills capsule */
.hero--contained.hero--steam .hero-steam__media > picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.03) contrast(1.03);
  transform: scale(1.01);
}

/* Glow overlay on picture only */
.hero--contained.hero--steam .hero-steam__media > picture::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(233,198,106,.10), transparent 62%),
    linear-gradient(180deg, rgba(7,6,10,.08), rgba(7,6,10,.22));
  opacity:.9;
}

/* Notes under image */
.hero-notes{
  display: grid;
  gap: 12px;
}