/*
Theme Name: Trxckwrld_
Theme URI: https://trxckwrld.com
Author: Trxckwrld_
Description: Custom theme for the Trxckwrld_ trucking community website. Dark navy, light grey, and TRXCK red design system. Includes page templates for Advertise, Sponsors, Hire Drivers, Find Driving Jobs, About, Contact, and legal pages.
Version: 3.10.402
License: Proprietary
Text Domain: trxckwrld
*/

/* Trxckwrld_ — redesign per approved mockup
   Design system: dark navy #0F1620, light grey #FAFAFB, white, TRXCK red #C8102E */

:root {
  --navy: #0F1620;
  --navy-2: #16202E;
  --cream: #FAFAFB;
  --white: #FFFFFF;
  --red: #C8102E;
  --red-dark: #A00D26;
  --ink: #1A1A1A;
  --gray: #5A5A5A;
  --line: #E8E2D8;
  --radius: 12px;
  --maxw: 1320px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; height: auto; }

:root {
  --nav-h: 52px;
  --brand-red: #A21D22;
  --brand-red-on-dark: #DE464C;
  --brand-red-hover: #7F161A;
  --brand-red-tint: #FBE9EB;
}
@media (min-width: 768px) {
  :root { --nav-h: 56px; }
}

/* ---------- header ---------- */
/* Static masthead (Dee 2026-10-19): the floating / smart-hide top bar is OFF.
   It blocked reading and grabbed attention; revisit fancier furniture later.
   The header now scrolls away with the page; the mobile bottom tab bar and
   the back-to-top button carry mid-page navigation. The .header-hide rules
   and the scroll JS below are inert: top has no effect on a static header. */
.site-header {
  background: #000000;
  position: static;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.10);
  height: var(--nav-h);
}
/* Smart hide (Dee 2026-10-17): glides away scrolling down, returns scrolling up. */
.site-header.header-hide { top: calc(-1 * var(--nav-h) - 2px); }
body.admin-bar .site-header.header-hide { top: calc(46px - var(--nav-h) - 2px); }
@media (min-width: 783px) {
  body.admin-bar .site-header.header-hide { top: calc(32px - var(--nav-h) - 2px); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.site-header.scrolled {
  background: #000000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.admin-bar .site-header { top: 46px; }
@media (min-width: 783px) {
  body.admin-bar .site-header { top: 32px; }
}

/* Mobile stationary header (Dee 2026-10-17): sticky + smart-hide drifted on
   iOS as the browser toolbars collapse. On phones the header is FIXED, glued
   to the top, no transitions; body padding returns the space it leaves flow. */
@media (max-width: 768px) {
  .site-header { position: static; transform: none; transition: none; }
  .site-header.header-hide { top: 0; }
  body.admin-bar .site-header { top: 46px; }
}
.header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 20px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (min-width: 768px) {
  .header-inner { padding-inline: 40px; }
}
.logo { display: inline-block; line-height: 0; }
.logo img { height: 26px; width: auto; display: block; }
@media (min-width: 768px) {
  .logo img { height: 28px; }
}
.logo:hover { text-decoration: none; }
.header-right { display: flex; align-items: center; gap: 8px; }
.nav { display: none; }
@media (min-width: 768px) {
  .nav {
    display: flex;
    gap: 28px;
    list-style: none;
    align-items: center;
  }
}
.nav li { list-style: none; margin: 0; padding: 0; }
/* Games tab in the desktop nav (Dee 2026-10-19, reversing the mobile-only placement);
   on mobile it lives in the full-screen menu. */
.nav li.play-nav-item { display: none; }
@media (min-width: 768px) {
  .nav li.play-nav-item { display: block; }
}
@media (max-width: 767px) {
  .header-right .nav.nav-open li.play-nav-item { display: block; }
}
.nav a {
  color: rgba(255,255,255,.8);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: color .2s ease;
  text-decoration: none;
}
.nav a:hover { color: #fff; text-decoration: none; }
.nav a.active { color: #fff; text-decoration: underline; text-decoration-color: #C8102E; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav-bag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  transition: color .2s ease;
}
.nav-bag svg { width: 20px; height: 20px; }
.nav-bag:hover { color: #fff; }
.btn-header {
  background: linear-gradient(120deg, #F2F3F5, #E4E6EA);
  color: #1a1a1a;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 22px;
  border-radius: 8px;
  white-space: nowrap;
}
.btn-header:hover { background: var(--red-dark); color: var(--white); text-decoration: none; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  background-color: #0B1220;
  color: var(--white);
  padding: 0 20px 64px;
  padding-top: var(--hero-top, 28px);
  overflow: hidden;
  border: none;
  --hero-top: 28px;
  --gap-eyebrow: 14px;
  --gap-headline: 16px;
  --gap-stats: 16px;
  --gap-sub: 28px;
  --gap-buttons: 12px;
}
@media (min-width: 768px) {
  .hero {
    --hero-top: 56px;
    --gap-eyebrow: 16px;
    --gap-headline: 20px;
    --gap-sub: 32px;
    --gap-buttons: 16px;
    padding: 0 40px 80px;
    padding-top: var(--hero-top);
  }
}
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('assets/img/tedi-hero.jpg') center top/cover no-repeat;
  background-position: 70% top;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.1) 15%, rgba(0,0,0,0.35) 28%, rgba(0,0,0,0.65) 40%, rgba(0,0,0,0.9) 50%, #000 60%),
    linear-gradient(to bottom, transparent 0%, #000 60px, #000 calc(100% - 120px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.1) 15%, rgba(0,0,0,0.35) 28%, rgba(0,0,0,0.65) 40%, rgba(0,0,0,0.9) 50%, #000 60%),
    linear-gradient(to bottom, transparent 0%, #000 60px, #000 calc(100% - 120px), transparent 100%);
  mask-composite: intersect;
}
.hero::before {
  display: none;
}
.hero::before {
  display: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  text-align: left;
}
.hero-inner > * {
  max-width: 560px;
}

/* Sub-page hero: same spacing system, no min-height */
.hero-sub {
  display: block;
}
.hero-sub .hero-inner {
  width: 100%;
}
.hero .kicker {
  color: var(--brand-red-on-dark);
  font-weight: 700;
  letter-spacing: .14em;
  font-size: 12px;
  line-height: 1.3;
  text-transform: uppercase;
  margin: 0 0 var(--gap-eyebrow);
}
.hero h1 {
  font-size: clamp(34px, 9vw, 44px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--gap-headline);
  text-wrap: balance;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: none !important;
}
@media (min-width: 768px) {
  .hero h1 {
    font-size: clamp(48px, 5vw, 64px);
  }
}


/* Apple-style premium palette from Tedi hero photo */
:root {
  --mural-peach1: #F2F3F5;
  --mural-peach2: #E4E6EA;
  --mural-teal1: #7FB8B0;
  --mural-teal2: #9CCFD8;
  --mural-slate: #8FA3BF;
  --mural-crimson: #C8102E;
  --mural-tan: #D8DBE0;
  --mural-sage: #9caf88;
  --text-gray: #6E6E73;
}
.hl-green { color: var(--mural-sage); }
.hl-yellow { color: var(--mural-gold); }
.hl-blue { color: var(--mural-sky); }
.hl-purple { color: var(--mural-purple); }
.hl-teal { color: var(--mural-teal); }
.hl-orange { color: var(--mural-sunset); }
/* Gradient accent words - Apple style */
.grad-peach {
  padding-bottom: 0.08em;
  background: linear-gradient(120deg, #D96B3A, #E59A5C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-teal {
  padding-bottom: 0.08em;
  background: linear-gradient(120deg, #2F8F88, #4A9FBF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-slate {
  padding-bottom: 0.08em;
  background: linear-gradient(120deg, #8FA3BF, #b8c8e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* Subtle fade-up on scroll */
.fade-up {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.hero h1 .accent
@media (max-width: 768px) {
  .hero {
    padding: 96px 20px 0;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .hero::after {
    position: relative;
    order: 10;
    width: 100%;
    height: 420px;
    background: url('assets/img/tedi-hero.jpg') center/cover no-repeat;
    background-position: 50% 12%;
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0, rgba(0,0,0,.15) 8%, rgba(0,0,0,.45) 16%, rgba(0,0,0,.8) 26%,
      #000 36%, #000 66%, rgba(0,0,0,.7) 80%, rgba(0,0,0,.3) 92%, transparent 100%);
    mask-image: linear-gradient(to bottom,
      transparent 0, rgba(0,0,0,.15) 8%, rgba(0,0,0,.45) 16%, rgba(0,0,0,.8) 26%,
      #000 36%, #000 66%, rgba(0,0,0,.7) 80%, rgba(0,0,0,.3) 92%, transparent 100%);
  }
  .hero-sub::after {
    height: 300px;
  }
  .hero::before { display: none; }
  .hero-inner {
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .hero-inner > * { max-width: 100%; min-width: 0; }
  .hero h1 {
    font-size: clamp(34px, 9vw, 44px);
    line-height: 1.05;
  }
  .hero .btn {
    width: 100%;
    min-height: 52px;
    margin-bottom: 12px;
    text-align: center;
    justify-content: center;
  }
  /* Pull next section up to overlap the photo fade */
  .hero + * { margin-top: -40px; position: relative; z-index: 2; }
} { color: var(--red); }
.hero p.lead {
  font-size: 18px;
  line-height: 1.45;
  color: #C9CED8;
  max-width: 32ch;
  margin: 0 0 var(--gap-sub);
  text-wrap: balance;
}
@media (min-width: 768px) {
  .hero p.lead {
    font-size: 20px;
    line-height: 1.5;
    max-width: 44ch;
  }
}
.hero-btns {
  display: flex;
  flex-direction: column;
  gap: var(--gap-buttons);
  margin: 0;
}
.hero-btns .btn {
  height: 52px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  max-width: 420px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}
@media (min-width: 768px) {
  .hero-btns {
    flex-direction: row;
    gap: var(--gap-buttons);
  }
  .hero-btns .btn {
    width: auto;
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  font-size: 16px;
  padding: 14px 30px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}
.btn:hover { background: rgba(255,255,255,0.85); text-decoration: none; color: var(--navy); }
/* Buttons on light backgrounds: dark navy */
.section .btn, .tier .btn, .cta-final .btn {
  background: var(--navy);
  color: var(--white);
}
.section .btn:hover, .tier .btn:hover, .cta-final .btn:hover {
  background: #1a2535;
  color: var(--white);
}
/* Keep the featured tier CTA red */
.tier.featured .btn { background: var(--red); color: var(--white); }
.tier.featured .btn:hover { background: var(--red-dark); color: var(--white); }
.btn.outline {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.7);
  color: var(--white);
}
.btn.outline:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }
.btn.dark-outline {
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
}
.btn.dark-outline:hover { background: var(--navy); color: var(--white); }

/* ---------- stats bar ---------- */
.stats-bar { background: #0B1220; border: none; }
.stats-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 30px 24px;
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}
.stat { display: flex; align-items: center; gap: 14px; color: var(--white); }
.stat .glyph { color: #c8102e; font-size: 26px; line-height: 1; flex-shrink: 0; display: flex; align-items: center; animation: blink-red 1.5s ease-in-out infinite; }
@keyframes blink-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.stat .num { font-size: 30px; font-weight: 800; line-height: 1.1; }
.stat .label { font-size: 14px; color: rgba(255,255,255,0.65); }

/* ---------- sections ---------- */
.section { padding: 48px 24px; }
.section-inner { max-width: var(--maxw); margin: 0 auto; padding-left: 48px; padding-right: 48px; }
.section.cream { background: var(--cream); }
.section.white { background: var(--white); }
.section .kicker {
  text-align: center;
  color: var(--red);
  font-weight: 700;
  letter-spacing: 2.5px;
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section h2 {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-align: center;
  margin-bottom: 14px;
  color: var(--navy);
}
.section .sub { color: #6E6E73; font-weight: 400;
  text-align: center;
  color: var(--gray);
  font-size: 18px;
  max-width: 640px;
  margin: 0 auto 52px;
}


/* ---------- advertise fine print (under the plan cards) ---------- */
#tiers .fp-renew { margin-top: 24px; }
#tiers .fp-note { margin-top: 8px; }
@media (max-width: 768px) {
  #tiers .fp-renew, #tiers .fp-note {
    font-size: 13px;
    line-height: 1.5;
    color: #6E6E73;
    font-weight: 400;
    text-wrap: balance;
  }
  #tiers .fp-renew { margin-top: 20px; margin-bottom: 0; }
  #tiers .fp-renew a {
    display: block;
    margin-top: 4px;
    padding: 12px 0 13px;
    font-size: 14px;
    font-weight: 500;
    color: #C8102E;
  }
  #tiers .fp-note { margin-top: 8px; }
  #tiers .fp-note::before {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background: #E4E4E7;
    margin: 0 auto 8px;
  }
  #tiers .fp-note a { color: #C8102E; }
}

/* ---------- advertise closing band: even line breaks on phones ---------- */
@media (max-width: 768px) {
  .cta-band h2, .cta-band p { text-wrap: balance; }
}

/* ---------- platform columns ---------- */
.platform-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}
.platform-col { padding: 8px 20px; text-align: center; }
.platform-col .section-icon { margin: 0 auto 14px; display: flex; justify-content: center; }
.platform-col + .platform-col { border-left: 1px solid var(--line); }
.platform-col .icon { color: var(--navy); font-size: 30px; margin-bottom: 14px; }
.platform-col h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; color: var(--navy); }
.platform-col p { font-size: 16px; color: var(--gray); }

/* ---------- tier cards ---------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}
.tier {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 32px 36px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
}
.tier.featured {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(135deg, #F2F3F5, #7FB8B0) border-box;
  box-shadow: 0 16px 48px rgba(0,0,0,.08);
}
.tier .badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(120deg, #F2F3F5, #E4E6EA);
  color: #1a1a1a;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.tier h3 { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.tier .price { font-size: 46px; font-weight: 800; color: var(--navy); letter-spacing: -1px; margin: 6px 0 2px; }
.tier .per { color: var(--gray); font-size: 14px; margin-bottom: 22px; }
.tier ul { list-style: none; margin-bottom: 30px; text-align: left; flex: 1; }
.tier ul li { padding: 7px 0; font-size: 15.5px; color: #333; }
.tier ul li::before { content: "✓ "; color: #2F8F88; font-weight: 700; }
.tier .btn { width: 100%; }
.tier.featured .btn { background: var(--red); }
.tier:not(.featured) .btn { background: var(--white); color: var(--navy); border: 2px solid var(--navy); }
.tier:not(.featured) .btn:hover { background: var(--navy); color: var(--white); }

/* ---------- Advertise page pricing cards ---------- */
.ad-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
}
.ad-tier {
  background: #fff;
  border: 1px solid #E8E8ED;
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  min-width: 0;
}
.ad-tier-featured {
  border: 1px solid var(--brand-red);
  box-shadow: 0 12px 40px rgba(162,29,34,0.12);
}
.ad-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 18px;
  border-radius: 20px;
  white-space: nowrap;
}
.ad-value-pill {
  background: var(--brand-red-tint);
  color: var(--brand-red);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
  white-space: nowrap;
}
.ad-tier-premium {
  border: 1px solid #0B1220;
  box-shadow: 0 12px 40px rgba(11,18,32,0.12);
}
.ad-badge-premium {
  background: #0B1220;
}
/* Color-coded tier text */
.ad-tier-featured .ad-per-post,
.ad-tier-featured .ad-main-line {
  color: var(--brand-red);
}
.ad-tier-premium .ad-per-post,
.ad-tier-premium .ad-main-line {
  color: #0B1220;
}
.ad-tier-name {
  font-size: 18px;
  font-weight: 600;
  color: #1D1D1F;
  margin: 0 0 8px;
}
.ad-tier-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}
.ad-price-num {
  font-size: 56px;
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.03em;
  line-height: 1;
}
.ad-price-unit {
  font-size: 15px;
  color: #6E6E73;
  font-weight: 400;
  white-space: nowrap;
}
.ad-per-post {
  font-size: 14px;
  color: #6E6E73;
  margin-bottom: 20px;
}
.ad-main-line {
  font-size: 20px;
  font-weight: 600;
  color: #1D1D1F;
  margin-bottom: 4px;
  white-space: nowrap;
}
.ad-sub-line {
  font-size: 15px;
  color: #6E6E73;
  margin-bottom: 24px;
}
.ad-tier-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  width: 100%;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
  box-sizing: border-box;
  white-space: nowrap;
}
.ad-tier-btn-filled {
  background: var(--brand-red);
  color: #fff;
  border: none;
}
.ad-tier-btn-filled:hover {
  background: var(--brand-red-hover);
  color: #fff;
  text-decoration: none;
}
.ad-tier-btn-outline {
  background: #fff;
  color: #1D1D1F;
  border: 2px solid #1D1D1F;
}
.ad-tier-btn-outline:hover {
  background: #1D1D1F;
  color: #fff;
  text-decoration: none;
}
/* Advertise page: solid black nav */
body.page-template-page-advertise-php .site-header,
body.page-template-page-advertise-php .site-header.scrolled {
  background: #000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Hide floating widgets on mobile (advertise page) */
@media (max-width: 768px) {
  body.page-template-page-advertise-php [class*="floating"],
  body.page-template-page-advertise-php [class*="float-tab"],
  body.page-template-page-advertise-php [id*="floating"],
  body.page-template-page-advertise-php .crisp-client,
  body.page-template-page-advertise-php #tidio-chat,
  body.page-template-page-advertise-php .tidio-chat {
    display: none !important;
  }
  .ad-tiers {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px;
  }
  .ad-tier {
    width: 100%;
    max-width: none;
    padding: 28px 24px;
    min-height: 420px;
  }
  .ad-main-line {
    font-size: 19px;
  }
}
@media (max-width: 375px) {
  .ad-main-line {
    font-size: 18px;
  }
  .ad-price-num {
    font-size: 52px;
  }
}

/* ---------- Brands We Trust logo carousel ---------- */
.brands-section {
  padding: 96px 0;
  overflow: hidden;
}
.brands-section .section-inner {
  max-width: none;
  padding: 0;
}
.brands-headline {
  white-space: nowrap;
  text-align: center;
}
.brands-sub {
  text-align: center;
  margin-bottom: 40px;
}
.logo-grid {
  display: flex;
  gap: 80px;
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.logo-carousel-track {
  display: flex;
  gap: 80px;
  animation: logo-scroll 40s linear infinite;
  flex-shrink: 0;
  align-items: center;
  height: 64px;
}
.logo-grid:hover .logo-carousel-track {
  animation-play-state: paused;
}
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 80px)); }
}
.brand-logo {
  height: var(--bhm, 28px);
  width: auto;
  max-width: 180px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0);
  opacity: 0.55;
  transition: filter 200ms ease, opacity 200ms ease;
}
.brand-logo:hover {
  filter: none;
  opacity: 1;
}
@media (min-width: 769px) {
  .brand-logo {
    height: var(--bh, 36px);
  }
}
@media (max-width: 768px) {
  .brands-section {
    padding: 64px 0;
  }
  .brands-headline {
    white-space: normal;
    line-height: 1.06;
  }
  .logo-grid, .logo-carousel-track {
    gap: 56px;
  }
  @keyframes logo-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% - 56px)); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo-carousel-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-grid {
    -webkit-mask-image: none;
    mask-image: none;
    width: 100%;
    left: auto;
    transform: none;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ---------- steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.step {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  border: 1px solid var(--line);
}
.step .n {
  width: 44px; height: 44px;
  background: linear-gradient(120deg, #F0C9A0, #E8A87C);
  color: #1a1a1a;
  font-weight: 800;
  font-size: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.step h4 { font-size: 17px; margin-bottom: 8px; color: var(--navy); }
.step p { font-size: 15px; color: var(--gray); }

/* ---------- simple list ---------- */
.simple-list { list-style: none; max-width: 640px; margin: 0 auto; text-align: left; }
.simple-list li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 18px; }
.simple-list li:first-child { border-top: none; }
.simple-list li::before { content: "✓ "; color: #2F8F88; font-weight: 700; }

/* ---------- two col ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.two-col p { margin-bottom: 16px; color: #333; }

/* ---------- forms ---------- */
.form-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 48px 44px;
  max-width: 720px;
  margin: 0 auto;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; color: var(--navy); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: var(--cream);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--red);
  background: var(--white);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: 14px; color: var(--gray); margin-top: 16px; text-align: center; }

/* ---------- contact ---------- */
.contact-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 52px 44px;
  text-align: center;
  border: 1px solid var(--line);
  max-width: 640px;
  margin: 0 auto;
}
.contact-card .email { font-size: 28px; font-weight: 800; color: var(--red); word-break: break-all; }
.contact-card p { color: var(--gray); margin: 16px 0; }
.social-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.social-row a {
  background: var(--navy);
  color: var(--white);
  padding: 12px 26px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
}
.social-row a:hover { background: var(--red); text-decoration: none; color: var(--white); }

/* ---------- final CTA ---------- */
.cta-final {
  background:
    linear-gradient(rgba(15,22,32,0.88), rgba(15,22,32,0.88)),
    url('assets/img/tedi-hero.jpg') center 70%/cover no-repeat;
  background-color: var(--navy);
  padding: 90px 24px;
}
.cta-final-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-final .kicker {
  color: var(--red);
  font-weight: 700;
  letter-spacing: 2.5px;
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cta-final h2 { color: var(--white); font-size: 34px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 10px; }
.cta-final p { color: rgba(255,255,255,0.7); font-size: 17px; max-width: 560px; }

/* legacy cta-band kept for any page still using it */
.cta-band { background: var(--cream); color: var(--ink); text-align: center; padding: 64px 24px; }
.cta-band h2 { color: var(--ink); margin-bottom: 10px; }
.cta-band p { color: rgba(15,22,32,0.68); font-size: 18px; margin-bottom: 28px; }

/* ---------- legal ---------- */
.legal { max-width: 760px; margin: 0 auto; }
.legal h1 { font-size: 34px; margin-bottom: 8px; color: var(--navy); }
.legal h2 { font-size: 22px; margin: 32px 0 10px; text-align: left; color: var(--navy); }
.legal p, .legal li { color: #333; margin-bottom: 12px; }
.legal ul { padding-left: 24px; }
.notice {
  background: #FFF7E6;
  border: 2px solid #C9A96A;
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 24px 0 32px;
  font-size: 15px;
}
.notice strong { display: block; margin-bottom: 4px; }

/* ---------- about ---------- */
.tedi-side { border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.6); padding: 48px 24px 28px; font-size: 14px; }
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-brand img { height: 34px; width: auto; }
.footer-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-nav a { color: rgba(255,255,255,0.6); font-size: 14px; }
.footer-nav a:hover { color: var(--white); }
.footer-social { display: flex; gap: 16px; }
.footer-social a { color: rgba(255,255,255,0.6); font-size: 14px; font-weight: 600; }
.footer-social a:hover { color: var(--white); }
.copyright {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .logo-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .platform-cols { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .platform-col + .platform-col { border-left: none; border-top: 1px solid var(--line); padding-top: 32px; }
  .steps { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .two-col { grid-template-columns: 1fr; }
  .hero h1 { font-size: 38px; }
  .hero { padding: 80px 24px 70px; }
  .section { padding: 40px 24px; }
  .stats-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .stat .num { white-space: nowrap; }
  .cta-final-inner { flex-direction: column; align-items: flex-start; }
}
.menu-toggle { display: none; }

@media (max-width: 767px) {
  .header-right .nav { display: none; }
  .header-right .nav.nav-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    height: calc(100dvh - var(--nav-h));
    background: #000000;
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
    gap: 0;
    z-index: 200;
    overflow-y: auto;
    overflow-x: hidden;
    list-style: none;
    margin: 0;
  }
  .header-right .nav.nav-open li {
    width: 100%;
    opacity: 0;
    animation: nav-fade-in .3s ease forwards;
  }
  .header-right .nav.nav-open li:nth-child(1) { animation-delay: 40ms; }
  .header-right .nav.nav-open li:nth-child(2) { animation-delay: 80ms; }
  .header-right .nav.nav-open li:nth-child(3) { animation-delay: 120ms; }
  .header-right .nav.nav-open li:nth-child(4) { animation-delay: 160ms; }
  .header-right .nav.nav-open li:nth-child(5) { animation-delay: 200ms; }
  .header-right .nav.nav-open li:nth-child(6) { animation-delay: 240ms; }
  .header-right .nav.nav-open li:nth-child(7) { animation-delay: 280ms; }
  @keyframes nav-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .header-right .nav.nav-open li { animation: none; opacity: 1; }
  }
  .header-right .nav.nav-open a {
    display: flex;
    align-items: center;
    min-height: 56px;
    font-size: 28px;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
    padding: 0;
    text-decoration: none;
  }
  .header-right .nav.nav-open a.active { color: #fff; }
  .header-right { position: static; }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .menu-toggle span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: #fff;
    transition: transform .2s ease;
  }
  .menu-toggle.active span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .hero h1 { font-size: 32px; }
  .btn.outline { margin-left: 0; }
  .hero-btns { flex-direction: column; align-items: center; gap: 12px; }
  .hero-btns .btn { width: 100%; max-width: 360px; min-height: 52px; display: flex; align-items: center; justify-content: center; }
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 32px 24px; }
  .contact-card .email { font-size: 22px; }
  .footer-inner { flex-direction: column; }
  /* Mobile breathing room - more space between sections */
  .section { padding: 56px 24px; }
  .section-inner > * + * { margin-top: 24px; }
  .hero { padding: 100px 24px 80px; }
  .hero-inner > * + * { margin-top: 20px; }
  .tiers { gap: 32px; }
  .tier { padding: 36px 28px; }
  .stats-inner { gap: 32px; padding: 36px 24px; }
  /* Mobile stats: compact horizontal grid instead of vertical stack */
  .stats-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    padding: 28px 20px;
  }
  .stat { padding: 4px 0; gap: 10px; }
  .stat .num { font-size: 24px; }
  .stat .label { font-size: 12px; }
  .stat .glyph { font-size: 20px; }

  /* Mobile hero (Dee/ChatGPT spec 2026-10-15): immersive bear — artwork leads,
     gradient dissolves it into the navy, text begins inside the fade. */
  .hero { padding: 0 0 56px; }
  .hero::after { display: none; }
  .hero::before {
    content: '';
    position: relative;
    display: block;
    width: 100%;
    height: min(76svh, 700px);
    background: url('assets/img/tedi-hero.jpg') no-repeat;
    background-size: auto 118%;
    background-position: 38% 12%;
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 40px, #000 52%, rgba(0,0,0,0.55) 78%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, #000 40px, #000 52%, rgba(0,0,0,0.55) 78%, transparent 100%);
  }
  .hero-inner { padding: 0 22px; margin-top: -132px; }
  .hero-inner > * { max-width: 100%; min-width: 0; }
  .hero .kicker { max-width: 100%; font-size: 13px; margin-bottom: 22px; }
  .hero h1 { font-size: clamp(38px, 11.2vw, 46px); line-height: 1.08; margin-bottom: 21px; }
  .hero .lead { font-size: 17px; margin-bottom: 26px; }
  .hero-btns { gap: 12px; }
  .hero-btns .btn { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: center; }
  .hero .btn.outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.85); }
}

/* Tier color accents */
.tier h3.tier-green, h3.tier-green { color: #2F8F88; }
.tier h3.tier-blue, h3.tier-blue { color: #4A9FBF; }
.tier h3.tier-red, h3.tier-red { color: var(--red); }

/* Dark impact section */
.section.dark {
  background: var(--navy);
  color: var(--white);
}
.section.dark h2 { color: var(--white); }
.section.dark .sub { color: #6E6E73; font-weight: 400; color: rgba(255,255,255,0.8); }
.section.dark .kicker { color: var(--red); }

/* Email popup */
.email-popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.email-popup-overlay.show { display: flex; }
.email-popup {
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  padding: 36px 30px 32px;
  max-width: 450px;
  width: 100%;
  text-align: center;
  position: relative;
  animation: popup-in 0.3s ease;
}
.email-popup .popup-logo { width: 118px; height: auto; margin: 0 auto 18px; display: block; }
.email-popup .kicker {
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
@keyframes popup-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.email-popup .close-btn {
  position: absolute;
  top: 10px; right: 14px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
  color: rgba(255,255,255,0.55);
}
.email-popup h3 { margin: 0 0 10px; font-size: 31px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.email-popup p { color: rgba(255,255,255,0.72); font-size: 16px; line-height: 1.55; margin: 0 0 24px; }
.email-popup form { display: flex; flex-direction: column; gap: 12px; }
.email-popup input[type="email"] {
  height: 52px;
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 16px;
  width: 100%;
}
.email-popup input[type="email"]::placeholder { color: rgba(255,255,255,0.45); }
.email-popup input[type="email"]:focus {
  border-color: var(--red);
  outline: none;
}
.email-popup .btn {
  height: 52px;
  border: none;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}
.email-popup .btn:hover { background: var(--red-dark); }

/* --- Subtle animations and icons --- */

/* --- App-feel micro-motion (3.10.138) --- */
.bell-wrap { position: relative; }
.nav-bell {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: rgba(255,255,255,.85);
  transition: color .2s ease;
}
.nav-bell svg { width: 20px; height: 20px; }
.nav-bell:hover { color: #fff; }
/* Featured tier pop + glow (Dee 2026-10-14): the Most Popular card stands out in place, nothing sweeps across */
.tier.featured { animation: trxck-tier-glow 3.4s ease-in-out infinite; }
/* Entrance pop for the featured tier: one soft settle when it scrolls into view */
.tier.featured.visible { animation: trxck-tier-glow 3.4s ease-in-out infinite, trxck-tier-in 1.05s ease-out both, trxck-tier-pop .8s ease-out .18s 1; }
@keyframes trxck-tier-pop {
  0% { transform: scale(.97); }
  55% { transform: scale(1.015); }
  100% { transform: scale(1); }
}
@keyframes trxck-tier-glow {
  0%, 100% { box-shadow: 0 16px 48px rgba(0,0,0,.08); }
  50% { box-shadow: 0 18px 54px rgba(74,159,191,.32); }
}
/* Premium tier dark pulse (Dee 2026-10-15): Best Value gets its own halo —
   same 3.4s breathing rhythm as Growth's red, in dark navy-black. */
.tier:has(.badge-premium) { animation: trxck-tier-glow-red 3.4s ease-in-out infinite; }
.tier:has(.badge-premium).visible { animation: trxck-tier-glow-red 3.4s ease-in-out infinite, trxck-tier-in 1.05s ease-out both; }
@keyframes trxck-tier-glow-red {
  0%, 100% { box-shadow: 0 16px 48px rgba(0,0,0,.08); }
  50% { box-shadow: 0 18px 54px rgba(200,16,46,.30); }
}
/* Starter tier green pulse (Dee 2026-10-15): completes the trio — each plan card
   breathes in its own color on the same 3.4s rhythm. */
.tier:has(.tier-green) { animation: trxck-tier-glow-green 3.4s ease-in-out infinite; }
.tier:has(.tier-green).visible { animation: trxck-tier-glow-green 3.4s ease-in-out infinite, trxck-tier-in 1.05s ease-out both; }
@keyframes trxck-tier-glow-green {
  0%, 100% { box-shadow: 0 16px 48px rgba(0,0,0,.08); }
  50% { box-shadow: 0 18px 54px rgba(47,143,136,.32); }
}
.bell-item.seen { opacity: .72; }
.bell-item.seen .bell-dot { display: none; }
/* Marketplace motion (Dee 2026-10-14): cards rise staggered, logos settle,
   tags pop once, cards press under the thumb. In place and vertical only. */
.company-card-apply.fade-up { transition-delay: 55ms; }
/* Homepage word cascade (Dee 2026-10-15): the red eyebrow lands first, then the
   headline, then what's after it — slower, premium pace, reading order. */
@keyframes trxck-hp-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hp-rise.visible { animation: trxck-hp-rise 1.25s ease-out backwards; animation-delay: var(--hd, 0ms); }
.hp-rise { transition: none !important; backface-visibility: hidden; }
.hero-dot { color: #FF4650 !important; -webkit-text-fill-color: #FF4650 !important; }
.btn-arrow { display: inline-block; margin-left: 8px; transition: transform .25s ease; }
.btn:hover .btn-arrow, .btn:active .btn-arrow { transform: translateX(3px); }
.stats-bar .stat:nth-child(2) { transition-delay: .07s; }
.stats-bar .stat:nth-child(3) { transition-delay: .14s; }
.stats-bar .stat:nth-child(4) { transition-delay: .21s; }
.stats-bar .stat:nth-child(5) { transition-delay: .28s; }
.stats-bar .stat:nth-child(6) { transition-delay: .35s; }
/* Desktop Tetris landing for the community cards (Dee 2026-10-15): each card
   falls into its slot in order — Facebook, Instagram, TikTok, Discord. */
@keyframes trxck-card-drop {
  0% { opacity: 0; transform: translateY(-36px); }
  70% { opacity: 1; transform: translateY(1px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (min-width: 1024px) {
  .community-card.hp-rise.visible { animation-name: trxck-card-drop; animation-duration: .6s; animation-timing-function: ease-in; }
  .community-card--facebook.hp-rise.visible { animation-delay: 500ms; }
  .community-card--instagram.hp-rise.visible { animation-delay: 780ms; }
  .community-card--tiktok.hp-rise.visible { animation-delay: 1060ms; }
  .community-card--discord.hp-rise.visible { animation-delay: 1340ms; }
}
.company-card:active { scale: .985; }
.company-card { transition: transform .25s ease, scale .15s ease-out; }
.company-card.visible { animation: trxck-mp-rise .95s ease-out backwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes trxck-mp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.company-card.visible .company-card-logo img { animation: trxck-mp-settle .85s ease-out both; }
@keyframes trxck-mp-settle { from { scale: 1.06; } to { scale: 1; } }
.company-card.visible .company-card-tag { animation: trxck-mp-tagpop .6s ease-out .2s both; }
@keyframes trxck-mp-tagpop { from { scale: .55; opacity: 0; } to { scale: 1; opacity: 1; } }
/* Pricing tier reveal (Dee 2026-10-14): slow fade in place, gentle stagger.
   Cards are hidden until the tier observer marks them visible. */
.tier-in { opacity: 0; }
@media (scripting: none) { .tier-in { opacity: 1; } }
.tier.visible { animation: trxck-tier-in 1.05s ease-out both; }
@keyframes trxck-tier-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.tiers > .tier.visible:nth-child(3) { animation-delay: .24s; }
/* About + Sponsors scroll reveals (Dee 2026-10-15): cards rise with a
   small stagger, same family as the marketplace. */
.about-cards .about-card.fade-up:not(.visible):nth-child(2) { transition-delay: 70ms; }
.about-cards .about-card.fade-up:not(.visible):nth-child(3) { transition-delay: 140ms; }
.audience-bars .audience-row.fade-up:not(.visible):nth-child(2) { transition-delay: 90ms; }
/* Sponsors data motion (Dee 2026-10-15): comparison bars draw themselves
   when their block arrives; stat wall cascades. Nothing colorful, all calm. */
.audience-bar { transform-origin: left center; }
.audience-bars.visible .audience-bar { animation: trxck-bar-grow 1.15s ease-out both; }
@keyframes trxck-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stat-wall-grid .stat-wall-item.fade-up:not(.visible):nth-child(2) { transition-delay: 70ms; }
.stat-wall-grid .stat-wall-item.fade-up:not(.visible):nth-child(3) { transition-delay: 140ms; }
.stat-wall-grid .stat-wall-item.fade-up:not(.visible):nth-child(4) { transition-delay: 210ms; }
.founder-photo.visible { animation: trxck-mp-settle .9s ease-out both; }
.bell-badge {
  position: absolute;
  top: 2px;
  right: 0;
  z-index: 3;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  border: 2px solid #000;
  background: #F02849;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 13px;
  text-align: center;
  box-sizing: content-box;
}
@keyframes badge-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes bell-wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-11deg); }
  60% { transform: rotate(7deg); }
  80% { transform: rotate(-4deg); }
}
.nav-bell.wiggle svg { animation: bell-wiggle .7s ease-in-out 1; transform-origin: 50% 0; }
@keyframes bell-wiggle-soft {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(8deg); }
  40% { transform: rotate(-6deg); }
  60% { transform: rotate(4deg); }
  80% { transform: rotate(-2deg); }
}
.nav-bell.wiggle-soft svg { animation: bell-wiggle-soft .7s ease-in-out 1; transform-origin: 50% 0; }
.bell-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(320px, 86vw);
  background: #fff;
  color: #1D1D1F;
  border: 1px solid #E8E8E8;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(11,18,32,.22);
  padding: 10px;
  z-index: 1200;
  text-align: left;
}
.bell-panel[hidden] { display: none; }
.bell-panel.open { animation: panel-in .22s ease both; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.bell-panel-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6E6E73;
  padding: 6px 10px 8px;
}
.bell-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  color: #1D1D1F;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.bell-item:hover { background: #F5F5F7; text-decoration: none; }
.bell-dot { width: 8px; height: 8px; border-radius: 50%; background: #F02849; flex-shrink: 0; }
.bell-item-name { flex: 1; }
.bell-new {
  background: #F02849;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  border-radius: 999px;
  padding: 2px 6px;
}
.bell-all {
  display: block;
  padding: 10px;
  margin-top: 4px;
  border-top: 1px solid #F0F0F0;
  color: #C8102E;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.nav-new-pill {
  display: inline-block;
  background: #F02849;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 7px;
  vertical-align: 2px;
  animation: badge-pop .45s cubic-bezier(.2,.9,.3,1.4) .3s both;
}
@media (max-width: 767px) {
  .header-right { gap: 0; }
  .nav-bell, .nav-bag, .menu-toggle { width: 38px; height: 38px; }
}
@media (max-width: 768px) {
  .bell-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 64px;
    width: auto;
  }
}
.tag-flame {
  display: inline-block;
  margin-right: 4px;
  font-size: 11px;
  animation: flame-flicker 1.7s ease-in-out infinite;
}
@keyframes flame-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50% { transform: scale(1.18) rotate(3deg); }
}
.btn:active { transform: scale(.97); }
.faq details { interpolate-size: allow-keywords; }
.faq details::details-content {
  height: 0;
  overflow: hidden;
  transition: height .32s ease, content-visibility .32s allow-discrete;
}
.faq details[open]::details-content { height: auto; }
@media (prefers-reduced-motion: reduce) {
  .bell-badge, .nav-new-pill { animation: none; }
  .nav-bell.wiggle svg { animation: none; }
  .nav-bell.wiggle-soft svg { animation: none; }
  .tag-flame { animation: none; }
  .bell-panel.open { animation: none; }
  .tier.featured, .tier.featured.visible { animation: none; }
  .company-card.visible .company-card-logo img, .company-card.visible .company-card-tag { animation: none; }
  .company-card:active { scale: none; }
  .tier-in { opacity: 1; }
  .tier.visible { animation: none; }
  .company-card.visible { animation: none; }
  .audience-bars.visible .audience-bar, .founder-photo.visible { animation: none; }
  .faq details::details-content { transition: none; }
  .btn:active { transform: none; }
}

.fade-in {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.fade-in.visible {
  opacity: 1;
}
@media (scripting: none) {
  .fade-in, .fade-up { opacity: 1; transform: none; }
  .hp-rise.visible { animation: none; }
}
.platform-col, .tier, .social-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.platform-col:hover, .tier:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.social-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  text-decoration: none;
}
.social-card:hover *,
.bento-tile:hover,
.bento-tile:hover * {
  text-decoration: none !important;
}
.section-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.section-icon svg {
  width: 26px;
  height: 26px;
}
.kicker-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kicker-icon svg {
  width: 18px;
  height: 18px;
}
.btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(200,16,46,0.25);
}
.stat-number {
  font-variant-numeric: tabular-nums;
}

/* Keyword highlights - Apple style, brand palette */
.hl-green { color: #15803D; font-weight: 700; }
.hl-amber { color: #d4a017; font-weight: 700; }

@media (max-width: 700px) {
  .merch-sidebyside { grid-template-columns: 1fr !important; gap: 24px !important; text-align: center; }
  .merch-sidebyside ul { align-items: center; }
  .merch-sidebyside .merch-card { justify-self: center; }
}

/* ---------- mobile hero: consistent stacked banner (767px and under) ---------- */
@media (max-width: 767px) {
  .hero {
    background: #0B1220;
    padding: 96px 0 0;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
  }
  .hero::before { display: none !important; }

  /* Photo: natural proportions, edge to edge, short top fade */
  .hero::after {
    content: '';
    position: relative;
    order: 10;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    margin-top: 16px;
    background: url('assets/img/tedi-hero.jpg') center/cover no-repeat;
    background-position: 50% 0%;
    padding-top: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.5) 3%,
      #000 6%, #000 62%, rgba(0,0,0,.7) 78%, rgba(0,0,0,.3) 91%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.5) 3%,
      #000 6%, #000 62%, rgba(0,0,0,.7) 78%, rgba(0,0,0,.3) 91%, transparent 100%);
  }
  .hero-sub::after {
    height: 360px;
    padding-top: 0;
    background-position: 50% 0;
  }

  .hero-inner {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }
  .hero-inner > * { max-width: 100% !important; min-width: 0 !important; }

  /* Eyebrow: fits on one line */
  .hero .kicker {
    font-size: 12px !important;
    letter-spacing: .14em;
    text-wrap: balance;
    margin-bottom: 16px !important;
  }

  /* Headline */
  .hero h1 {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.05 !important;
    margin-bottom: 16px !important;
  }

  /* Subhead: plain, no colored words */
  .hero p.lead,
  .hero .lead {
    color: #C9CED8 !important;
    font-weight: 400 !important;
    margin-bottom: 28px !important;
  }
  .hero p.lead span,
  .hero .lead span {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    color: inherit !important;
    font-weight: inherit !important;
  }

  /* Buttons */
  .hero .btn {
    width: 100%;
    min-height: 52px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .hero .btn:last-of-type { margin-bottom: 0; }

  /* Next section overlaps the bottom fade */
  .hero + * { margin-top: -32px; position: relative; z-index: 2; }
}

/* Headline gradient: one bright gradient on the key phrase, all pages, all screens */
.hero h1 .grad-headline {
    background-image: linear-gradient(90deg, #C9CED8 0%, #9AA3B2 55%, #7A828F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    display: inline;
    padding-bottom: .1em;
  }
}

/* ---------- About page ---------- */
.about-stats-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 20px;
}
.about-stats-single {
  display: block;
  text-align: center;
  padding: 40px 20px;
}
.about-stats-single .about-stat {
  border: none !important;
}
.about-stat {
  text-align: center;
  padding: 20px 12px;
  color: #fff;
}
.about-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.1); }
.about-stat:nth-child(1), .about-stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.1); }
.about-stat .num { font-size: 32px; font-weight: 800; line-height: 1.1; }
.about-stat .label { font-size: 13px; color: #9AA3B2; margin-top: 6px; }

.about-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  margin: 32px auto 0;
}
.about-card {
  background: #fff;
  border: 1px solid #E8E8ED;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  text-align: left;
}
.about-card-check {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: #E3F2F0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-card-check svg { width: 14px; height: 14px; }
.about-card strong { display: block; font-size: 18px; color: #1D1D1F; margin-bottom: 4px; }
.about-card span { font-size: 16px; line-height: 1.5; color: #6E6E73; }
.grad-teal-text {
  background-image: linear-gradient(90deg, #2F8F88, #4A9FBF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-size: 28px !important;
}

.founder-photo {
  width: min(100%, 340px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 28px;
  display: block;
  margin: 0 auto;
}

.about-join {
  background: #0B1220;
  background-image: radial-gradient(ellipse at 50% 0%, rgba(200,16,46,.18), transparent 60%);
  padding: 64px 20px;
  text-align: center;
}
.about-join .kicker { color: #FF6B7D; }
.about-join h2 { color: #fff; margin-bottom: 32px; }
.about-join-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.btn-join-primary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; max-width: 360px; height: 52px;
  background: #fff; color: #0B1220; border-radius: 999px;
  font-size: 16px; font-weight: 700; text-decoration: none;
}
.btn-join-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; max-width: 360px; height: 52px;
  background: transparent; color: #fff; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.5);
  font-size: 16px; font-weight: 700; text-decoration: none;
}
@media (min-width: 768px) {
  .about-join-btns { flex-direction: row; justify-content: center; }
  .btn-join-primary, .btn-join-secondary { width: auto; min-width: 200px; }
}

@media (max-width: 767px) {
  .about-section { padding: 64px 20px !important; }
  .about-section h2 {
    font-size: clamp(30px, 8vw, 40px) !important;
    line-height: 1.08 !important;
    text-wrap: balance;
  }
  .about-section .sub {
    font-size: 17px !important;
    line-height: 1.5 !important;
    max-width: 34ch;
    margin-inline: auto;
    text-wrap: pretty;
  }
  .about-section .kicker { margin-bottom: 14px !important; }
  .about-section h2 { margin-bottom: 16px !important; }
  .section.dark .kicker { color: #FF6B7D !important; }
  .about-dark-p { color: #C9CED8 !important; }
  .about-cards { width: 100%; }
}

/* ---------- Footer redesign ---------- */
.site-footer {
  background: #0B1220;
  padding: 56px 20px calc(32px + env(safe-area-inset-bottom));
  text-align: center;
}
.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.footer-brand img { width: 150px; height: auto; }
.footer-tagline {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  max-width: 22ch;
  text-align: left;
  text-wrap: balance;
  margin: 0;
}
.footer-brand-col {
  text-align: left;
}
.grad-peach {
  background-image: linear-gradient(90deg, #FFE2C2, #F7B07A, #EE7F6B);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.footer-social {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  margin-top: 24px;
}
.footer-social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C9CED8;
  transition: background .2s ease, color .2s ease;
}
.footer-social a svg { width: 20px; height: 20px; }
.footer-social a:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.footer-hours {
  margin-top: 15px;
  text-align: center;
}
.footer-hours::before {
  content: "";
  display: block;
  width: 40%;
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 0 auto 12px;
}
.faq-search { margin-bottom: 22px; }
.faq-search-label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0B1220; margin-bottom: 8px; }
.faq-search-input { width: 100%; padding: 13px 16px; font-size: 16px; border: 1px solid #D8DBE0; border-radius: 10px; background: #FFFFFF; color: #0B1220; }
.faq-search-input:focus { outline: none; border-color: #C8102E; box-shadow: 0 0 0 3px rgba(200,16,46,.12); }
.faq-search-count { font-size: 13px; color: #6B7280; margin-top: 8px; }
.faq-search-none { margin-top: 12px; padding: 14px 16px; border: 1px dashed #D8DBE0; border-radius: 10px; font-size: 14px; color: #4B5563; text-align: center; }
.footer-hours-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A93A3;
  margin-bottom: 10px;
}
.footer-hours-line {
  font-size: 15px;
  line-height: 1.7;
  color: #C9CED8;
}
.footer-hours-time { white-space: nowrap; }
.footer-hours-note {
  font-size: 12px;
  color: #8A93A3;
  margin-top: 10px;
  text-wrap: balance;
}
@media (min-width: 769px) {
  .footer-note-break { display: none; }
}
@media (max-width: 768px) {
  .footer-hours-note {
    max-width: 260px;
    margin-inline: auto;
    text-align: center;
  }
}
.footer-social a:focus-visible,
.footer-nav a:focus-visible,
.copyright a:focus-visible {
  outline: 2px solid #FF6B7D;
  outline-offset: 2px;
}
.footer-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin-top: 32px;
  text-align: center;
}
.footer-nav a {
  color: #C9CED8;
  font-size: 16px;
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s ease;
}
.footer-nav a:hover { color: #fff; }
.footer-nav-col2 { margin-top: 14px; }
.footer-divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 32px auto 24px;
  max-width: 1120px;
}
.copyright {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  font-size: 13px;
  color: #8A93A3;
}
.legal-links {
  display: flex;
  gap: 20px;
}
.legal-links a {
  color: #8A93A3;
  text-decoration: none;
  transition: color .2s ease;
}
.legal-links a:hover { color: #fff; }

/* Newsletter band */
.newsletter-section { padding: 64px 20px 48px !important; }
.newsletter-section h2 { line-height: 1.08; }
.newsletter-section .kit-form-wrapper { max-width: 520px; }
.newsletter-msg {
  font-size: 14px;
  margin-top: 12px;
  text-align: center;
  display: none;
}
.newsletter-msg.success { display: block; color: #9ED3CB; }
.newsletter-msg.error { display: block; color: #FF6B7D; }

@media (min-width: 768px) {
  .site-footer { padding: 80px 40px 40px; text-align: left; }
  .footer-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
    align-items: start;
  }
  .footer-brand img { width: 160px; }
  .footer-social { justify-content: flex-start; }
  .footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 48px;
    margin-top: 0;
    text-align: left;
    align-content: start;
    grid-column: 2 / 4;
  }
  .footer-nav a {
    min-height: 0;
    justify-content: flex-start;
    grid-column: auto !important;
  }
  .copyright {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (max-width: 767px) {
  .seva-fields.formkit-fields {
    flex-direction: column !important;
  }
  .seva-fields .formkit-field,
  .seva-fields .formkit-submit {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto;
  }
  .seva-fields .formkit-submit {
    height: 52px;
  }
  .seva-fields .formkit-input {
    height: 52px;
    font-size: 16px !important;
  }
}

/* Marketplace how it works */
.marketplace-how {
  text-align: center;
  padding: 56px 20px;
  max-width: 900px;
  margin: 0 auto;
}
.marketplace-how h2 {
  font-size: clamp(30px, 8vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
  color: #1D1D1F;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .marketplace-how { padding: 80px 20px; }
}
.marketplace-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.marketplace-step {
  background: #F5F5F7;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.step-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 14px;
  background: rgba(200,16,46,.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-icon svg { width: 22px; height: 22px; }
.why-clock { display: flex; justify-content: center; margin-bottom: 18px; }
.marketplace-step strong { display: block; font-size: 18px; color: #1D1D1F; margin-bottom: 4px; }
.marketplace-step span { font-size: 16px; line-height: 1.5; color: #6E6E73; }
.marketplace-page .always-on { color: #EA580C; }
.millions-accent { color: #15803D; }
.marketplace-tagline { text-align: center; font-size: 24px; font-weight: 700; color: #1D1D1F; max-width: 640px; margin: 0 auto; line-height: 1.3; text-wrap: balance; }
@media (min-width: 768px) { .marketplace-tagline { font-size: 28px; } }
.marketplace-why { text-align: center; padding: 56px 20px 8px; max-width: 900px; margin: 0 auto; }
.marketplace-why h2 { font-size: clamp(30px, 8vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; color: #1D1D1F; margin-bottom: 12px; }
.marketplace-why-sub { font-size: 18px; color: #6E6E73; line-height: 1.5; margin: 0 auto 40px; max-width: 560px; text-wrap: balance; }
.marketplace-reasons { display: flex; flex-direction: column; gap: 12px; text-align: left; }
@media (min-width: 768px) {
  .marketplace-why { padding: 80px 20px 8px; }
  .marketplace-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (min-width: 768px) {
  .marketplace-steps { flex-direction: row; gap: 16px; }
  .marketplace-step { flex: 1; }
}

/* ---------- Contact page ---------- */
.contact-scroll-btn { scroll-margin-top: calc(var(--nav-h) + 16px); }
html { background: #0B1220; } scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.contact-body {
  background: #FAFAFB;
  padding: 64px 20px;
}
.contact-grid {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-form-card {
  background: #fff;
  border: 1px solid #E8E8ED;
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 12px 40px rgba(11,18,32,.06);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.form-row-2 { display: flex; flex-direction: column; gap: 0; }
.form-field { margin-bottom: 20px; }
.form-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1D1D1F;
  margin-bottom: 8px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  height: 52px;
  border-radius: 14px;
  padding: 0 16px;
  font-size: 16px;
  border: 1px solid #D2D2D7;
  background: #fff;
  color: #1D1D1F;
  font-family: inherit;
}
.form-field textarea {
  height: auto;
  min-height: 140px;
  padding: 14px 16px;
  resize: vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #C8102E;
  box-shadow: 0 0 0 3px rgba(200,16,46,.15);
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.field-error {
  display: block;
  font-size: 13px;
  color: #C8102E;
  margin-top: 6px;
  min-height: 0;
}
.field-error:not(:empty) { min-height: 18px; }
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: #C8102E;
}
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.btn-contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border-radius: 999px;
  border: none;
  background: #C8102E;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease;
}
.btn-contact-submit:hover { background: #E5384F; }
.btn-contact-submit:disabled { opacity: .6; cursor: not-allowed; }
.form-note {
  font-size: 13px;
  color: #6E6E73;
  text-align: center;
  margin-top: 16px;
}
.form-banner {
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  margin-bottom: 16px;
}
.form-banner-error {
  background: rgba(200,16,46,.08);
  color: #C8102E;
  border: 1px solid rgba(200,16,46,.2);
}
.contact-success { text-align: center; padding: 40px 20px; }
.success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #E3F2F0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.success-icon svg { width: 28px; height: 28px; }
.success-title { font-size: 24px; font-weight: 700; color: #1D1D1F; margin-bottom: 8px; }
.success-text { font-size: 16px; color: #6E6E73; }

.contact-email-card {
  background: #fff;
  border: 1px solid #E8E8ED;
  border-radius: 28px;
  padding: 24px;
  text-align: center;
}
.contact-email-card .email {
  display: inline-block;
  font-size: clamp(18px, 5.2vw, 24px);
  font-weight: 700;
  color: #C8102E;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  text-decoration: none;
  margin: 12px 0;
}
.contact-email-card .email:hover { text-decoration: none; }

.contact-social {
  max-width: 1120px;
  margin: 64px auto 0;
  text-align: center;
}
.contact-social h2 {
  font-size: clamp(30px, 8vw, 40px);
  line-height: 1.08;
  margin-bottom: 12px;
  color: #1D1D1F;
}
.contact-social .sub {
  font-size: 17px;
  line-height: 1.5;
  color: #6E6E73;
  margin-bottom: 28px;
}
.social-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.social-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #E8E8ED;
  color: #1D1D1F;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.social-card-btn svg { width: 20px; height: 20px; }
.social-card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border-color: #D2D2D7;
  text-decoration: none;
}
.social-card-btn:focus-visible {
  outline: 2px solid #C8102E;
  outline-offset: 2px;
}
.social-cards .social-card-btn:last-child { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .social-cards { grid-template-columns: repeat(5, 1fr); }
  .social-cards .social-card-btn:last-child { grid-column: auto; }
}
@media (min-width: 1024px) {
  .contact-body { padding: 96px 40px; }
  .contact-grid {
    max-width: 640px;
  }
  .contact-form-card { padding: 40px; }
  .form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .btn-contact-submit { width: auto; min-width: 200px; }
}

@media (max-width: 767px) {
  .site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 56px;
  }
  .footer-inner {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-brand-col {
    margin-bottom: 0;
  }
  .footer-hours {
    margin-bottom: 24px;
  }
  .footer-inner > * {
    width: 100%;
    box-sizing: border-box;
  }
  .footer-brand-col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-brand img {
    width: 150px;
    height: auto;
    margin-inline: auto;
    display: block;
  }
  .footer-tagline {
    margin-top: 12px;
    text-align: center;
  }
  .footer-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    width: 100%;
  }
  .footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 4px;
    column-gap: 16px;
    width: 100%;
    max-width: 360px;
    margin: 12px auto 0;
    padding: 0;
    list-style: none;
    justify-items: stretch;
  }
  .footer-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 0 8px;
    text-align: center;
  }
  .footer-divider {
    width: 100%;
    margin: 32px 0 24px;
  }
  /* Remove any second divider */
  .footer-inner + .footer-divider + .footer-divider,
  .site-footer .footer-divider ~ .footer-divider {
    display: none;
  }
  .copyright {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}

@media (max-width: 767px) {
  .marketplace-how {
    padding: 56px 20px;
  }
  .marketplace-how h2 {
    line-height: 1.08;
    margin-bottom: 40px;
  }
  .marketplace-steps {
    gap: 16px;
  }
  .marketplace-step {
    padding: 20px;
    border-radius: 28px;
    background: #F5F5F7;
  }
  .marketplace-step strong {
    font-size: 18px;
    line-height: 1.25;
    margin-bottom: 4px;
  }
  .marketplace-step span {
    font-size: 15px;
    line-height: 1.5;
  }
  .marketplace-step > div:last-child {
    min-width: 0;
  }
  .step-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: #FDECEF;
  }
}

/* Hero headlines are solid color (gradient spans removed from templates) */

/* Hero stats line (Sponsors) */
.hero-stats {
  font-size: 14px;
  line-height: 1.45;
  color: #9AA3B2;
  margin: 0 0 var(--gap-sub);
}

/* Hero buttons use brand red */
.hero .btn {
  background: var(--brand-red);
  color: #fff;
  border: none;
}
.hero .btn:hover {
  background: var(--brand-red-hover);
  color: #fff;
}
.hero .btn.outline {
  background: #fff;
  color: #0B1220;
  border: none;
}
.hero .btn.outline:hover {
  background: rgba(255,255,255,.9);
  color: #0B1220;
}

/* Marketplace hero stays centered and light */
.marketplace-hero {
  text-align: center;
}
.marketplace-hero .hero-inner,
.marketplace-page .marketplace-hero {
  text-align: center;
}
.marketplace-hero .kicker {
  color: var(--brand-red);
}
.marketplace-hero h1 {
  color: #1D1D1F;
  margin-left: auto;
  margin-right: auto;
}
.marketplace-hero .lead {
  color: #6E6E73;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  /* Community tiles: full width on mobile */
  .bento-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 0 20px;
  }
  .bento-tile {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding: 24px !important;
    box-sizing: border-box;
    min-width: 0;
  }
  /* Facebook tile stats: two columns */
  .fb-big-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    align-items: end;
    margin-bottom: 20px;
  }
  .fb-big-num,
  .fb-views-num {
    font-size: clamp(28px, 9vw, 40px) !important;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    min-width: 0;
    padding-right: .15em;
    display: inline-block;
    max-width: 100%;
    overflow: visible;
  }
  .fb-big-label {
    font-size: 14px !important;
    line-height: 1.3;
    color: #6E6E73;
    margin-top: 4px !important;
    text-align: left;
  }
  .fb-desc {
    font-size: 18px !important;
    line-height: 1.35;
    margin-bottom: 8px !important;
  }
  .fb-benefit {
    font-size: 16px !important;
    line-height: 1.5;
    color: #6E6E73;
    margin-bottom: 24px !important;
  }
  .fb-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    border-radius: 999px;
    padding: 0 20px;
    font-size: 16px;
    white-space: nowrap;
    box-sizing: border-box;
  }
  /* Tile link arrows: never wrap alone */
  .bento-tile .tile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    min-height: 44px;
    text-decoration: none;
    margin-top: 24px;
  }
  .bento-tile .tile-link svg {
    width: 16px;
    height: 16px;
    flex: none;
  }
  .bento-tile .tile-link span {
    white-space: nowrap;
  }
}
@media (max-width: 359px) {
  .bento-tile .tile-link span {
    white-space: normal;
  }
}

/* Tile links: arrow never wraps alone (all screens) */
.bento-tile .tile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  min-height: 44px;
  text-decoration: none;
  margin-top: 24px;
}
.bento-tile .tile-link svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform .2s ease;
}
.bento-tile .tile-link:hover svg {
  transform: translateX(3px);
}
.bento-tile .tile-link:hover {
  text-decoration: none;
}
.bento-tile .tile-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
@media (min-width: 360px) {
  .bento-tile .tile-link > span {
    white-space: nowrap;
  }
}

/* ---------- Merch section redesign ---------- */
.merch-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--brand-red);
  text-align: center;
  margin-bottom: 14px;
}
.merch-headline {
  font-size: clamp(34px, 9vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #1D1D1F;
  line-height: 1.1;
  text-align: center;
  margin: 0 0 32px;
  text-wrap: balance;
}
.merch-headline-line2 {
  display: block;
}
.merch-tile {
  background: #F5F5F7;
  border-radius: 28px;
  padding: 32px 24px;
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .merch-tile { padding: 48px 40px; }
}
.merch-product-name {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #1D1D1F;
  margin: 0 0 12px;
}
@media (min-width: 768px) {
  .merch-product-name { font-size: 32px; }
}
.merch-desc {
  font-size: 17px;
  line-height: 1.45;
  color: #6E6E73;
  max-width: 30ch;
  margin: 0 auto 12px;
  text-wrap: balance;
}
.merch-price {
  font-size: 20px;
  font-weight: 600;
  color: #1D1D1F;
  margin: 0 0 24px;
}
.shopify-buy-wrapper {
  margin: 0 auto 32px;
  max-width: 360px;
}
/* Override Shopify wrapper alignment */
.shopify-buy__btn-wrapper,
.shopify-buy__product {
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
  text-align: center !important;
  max-width: 100% !important;
}
.merch-photo {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  margin-inline: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: transform .4s ease;
}
@media (min-width: 768px) {
  .merch-photo { max-width: 460px; }
  .merch-photo:hover { transform: scale(1.03); }
}

/* ---------- Advertise page redesign ---------- */
.hero-proof {
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-red-on-dark);
  margin: 16px 0 24px;
  letter-spacing: 0.02em;
}
.tier-rows {
  margin: 24px 0;
  text-align: left;
}
.tier-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid #E8E8ED;
  font-size: 15px;
}
.tier-row:last-child {
  border-bottom: none;
}
.tier-row span {
  color: #6E6E73;
}
.tier-row strong {
  font-weight: 600;
  color: #1D1D1F;
  text-align: right;
  margin-left: 16px;
}
.tier .badge {
  background: var(--brand-red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 16px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 16px;
}
.tier.featured {
  border: 1px solid var(--brand-red);
}
.btn-outline {
  background: transparent;
  border: 2px solid var(--brand-red);
  color: var(--brand-red);
}
.btn-outline:hover {
  background: var(--brand-red);
  color: #fff;
}
.btn-small {
  font-size: 14px;
  padding: 10px 24px;
  margin-top: 12px;
}
.btn-white {
  background: #fff;
  color: #1D1D1F;
}
.btn-white:hover {
  background: #F5F5F7;
}
.rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}
.rule-card {
  background: #F5F5F7;
  border-radius: 16px;
  padding: 24px;
  text-align: left;
}
.rule-card h4 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
}
.rule-card p {
  font-size: 15px;
  color: #6E6E73;
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .rules-grid {
    grid-template-columns: 1fr;
  }
}
.faq {
  margin-top: 24px;
  text-align: left;
}
.faq details {
  border-bottom: 1px solid #E8E8ED;
  padding: 16px 0;
}
.faq summary {
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-size: 24px;
  font-weight: 400;
  color: var(--brand-red);
}
.faq details[open] summary::after {
  content: "–";
}
.faq details p {
  margin: 12px 0 0;
  color: #6E6E73;
  font-size: 16px;
  line-height: 1.5;
}
.cta-band {
  background: var(--cream);
  position: relative;
  overflow: hidden;
  padding: 80px 24px;
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(162,29,34,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.cta-band-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}
.cta-band h2 {
  color: var(--ink);
  font-size: clamp(32px, 6vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.cta-band p {
  color: rgba(15,22,32,0.68);
  font-size: 18px;
  margin: 0 0 32px;
}
.cta-band .btn-white {
  background: var(--red);
  color: #fff;
}
.cta-band .cta-secondary {
  margin: 24px 0 0;
  font-size: 15px;
}
.cta-band .cta-secondary a {
  color: rgba(15,22,32,0.6);
  text-decoration: none;
}
.cta-band .cta-secondary a:hover {
  color: var(--ink);
}

/* Shared clean page header (Advertise, Sponsors, About, Marketplace) */
.page-header-clean {
  background: #fff;
  text-align: center;
  padding: 48px 20px 36px;
}
@media (min-width: 768px) {
  .page-header-clean {
    padding: 72px 40px 56px;
  }
}
.page-header-clean .page-header-inner {
  max-width: 760px;
  margin: 0 auto;
}
.page-header-clean .kicker {
  color: var(--brand-red);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
  line-height: 1.3;
}
.page-header-clean h1 {
  color: #1D1D1F;
  font-size: clamp(34px, 9vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 0 0 16px;
  text-wrap: balance;
  text-shadow: none;
}
@media (min-width: 768px) {
  .page-header-clean h1 {
    font-size: clamp(48px, 5vw, 64px);
  }
}
.page-header-clean .lead {
  color: #6E6E73;
  font-size: 18px;
  line-height: 1.5;
  max-width: 640px;
  margin: 0 auto;
  text-wrap: balance;
  text-shadow: none;
}
.page-header-clean .page-header-btns {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Dropdown menu (Community) */
.main-nav .menu-item-has-children {
  position: relative;
}
.main-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #0B0D10;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.main-nav .menu-item-has-children:hover .sub-menu,
.main-nav .menu-item-has-children:focus-within .sub-menu {
  display: block;
}
.main-nav .sub-menu li {
  margin: 0;
}
.main-nav .sub-menu a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
}
.main-nav .sub-menu a:hover {
  background: rgba(255,255,255,0.1);
}
/* Park Your Listing card first on mobile */
@media (max-width: 767px) {
  .company-card-apply {
    order: -1;
  }
}
/* Mobile submenu (Community dropdown) */
@media (max-width: 767px) {
  .header-right .nav .sub-menu,
  .main-nav .sub-menu {
    position: static !important;
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .header-right .nav .sub-menu li,
  .main-nav .sub-menu li {
    padding-left: 24px !important;
    border-left: 2px solid rgba(255,255,255,0.15);
    margin-left: 16px !important;
  }
  .header-right .nav .sub-menu a,
  .main-nav .sub-menu a {
    padding: 12px 16px !important;
    font-size: 16px !important;
    color: rgba(255,255,255,0.75) !important;
    display: block !important;
  }
}
/* Hide header CTA on mobile (Advertise page) - plans are right below */
@media (max-width: 767px) {
  .page-template-page-advertise-php .page-header-clean .page-header-btns {
    display: none;
  }
}
/* Proof strip (Advertise, Sponsors) */
.proof-strip {
  background: #0B1220;
  padding: 24px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.proof-strip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(200,16,46,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.proof-strip-inner {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}
.proof-stat-num {
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
}
.proof-stat-label {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  margin-top: 4px;
}
@media (max-width: 600px) {
  .proof-strip-inner {
    gap: 24px;
  }
}
/* Contact compact bear banner */
.contact-hero-compact {
  position: relative;
  background-color: #0B1220;
  color: #fff;
  overflow: hidden;
  min-height: 240px;
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  .contact-hero-compact {
    min-height: 320px;
  }
}
.contact-hero-compact::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  background: url('assets/img/tedi-hero.jpg') right top/cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%);
  mask-image: linear-gradient(to right, transparent 0%, #000 30%);
}
.contact-hero-compact .hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: left;
  width: 100%;
}
.contact-hero-compact .hero-inner > * {
  max-width: 560px;
}


/* Hide Community menu item on mobile only */
@media (max-width: 767px) {
  .community-menu-item { display: none !important; }
}

/* Merch headline colors: new colors, city orange, state green */
.hl-orange { color: #EA580C; }
.hl-green { color: #177245; }

/* Color coded tier names: Starter teal, Growth red, Premium navy */
.ad-tier .ad-tier-name { color: #2F8F88; }
.ad-tier-featured .ad-tier-name { color: var(--brand-red); }
.ad-tier-premium .ad-tier-name { color: #0B1220; }

.company-card-logo img { width: 100%; height: 100%; object-fit: contain; padding: 16px; box-sizing: border-box; }

/* About page testimonials */
.testimonial-carousel { max-width: 760px; margin: 40px auto 0; }
.testimonial-slide { display: none; background: #fff; border: 1px solid #E8E8ED; border-radius: 20px; padding: 40px 36px; text-align: center; }
.testimonial-slide.is-active { display: block; animation: testimonialFade 0.45s ease; }
@keyframes testimonialFade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 768px) { .testimonial-slides { min-height: 330px; } .testimonial-slide .testimonial-quote { font-size: 19px; } .testimonial-slide .testimonial-quote::before { text-align: center; } }
.testimonial-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 24px; }
.testimonial-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #E8E8ED; background: #fff; color: var(--brand-red); font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 3px; }
.testimonial-arrow:hover { border-color: var(--brand-red); }
.testimonial-dots { display: flex; gap: 8px; }
.testimonial-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: #D8D8DE; cursor: pointer; padding: 0; }
.testimonial-dot.is-active { background: var(--brand-red); }
.testimonial-quote { font-size: 16.5px; line-height: 1.65; color: #333; margin: 0 0 20px; }
.testimonial-quote::before { content: "\201C"; display: block; font-size: 44px; line-height: 0.6; color: var(--brand-red); font-weight: 800; margin-bottom: 14px; }
.testimonial-name { font-weight: 700; color: #1D1D1F; font-size: 15.5px; }
.testimonial-role { color: #6E6E73; font-size: 14px; margin-top: 2px; }

/* Partner offers */
.partner-offers { margin: 8px 0 28px; }
.partner-offers h2 { font-size: 24px; font-weight: 800; color: #1D1D1F; margin: 0 0 16px; }
.offer-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border: 1.5px solid #E8E8ED; border-radius: 14px; margin-bottom: 10px; font-weight: 600; font-size: 16px; color: #1D1D1F; text-decoration: none; background: #fff; transition: border-color .15s ease, color .15s ease; }
.offer-row:hover { border-color: var(--brand-red); color: var(--brand-red); }
.offer-arrow { color: var(--brand-red); font-weight: 800; }

.verified-seal { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.verified-seal svg { width: 100%; height: 100%; display: block; }

/* Sponsors page: hero, stat wall, audience bars */
.sponsors-hero {
  background:
    linear-gradient(rgba(11,18,32,0.45), rgba(11,18,32,0.62)),
    url('assets/img/earth-hero.jpg') center right/cover no-repeat;
  background-color: #000;
  padding: 110px 24px 90px;
  text-align: center;
}
.sponsors-hero-line { color: #fff; font-size: 22px; font-weight: 700; margin: -12px auto 30px; }
.sponsors-hero h1 { color: #fff; font-size: clamp(42px, 6vw, 68px); margin: 10px 0 18px; }
.sponsors-hero .kicker { color: var(--brand-red); }
.sponsors-hero .lead { color: rgba(255,255,255,0.85); font-size: 18px; text-wrap: balance; max-width: 640px; margin: 0 auto 30px; }
.stat-wall { background: #0B1220; padding: 56px 24px; }
.stat-wall-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; text-align: center; }
.stat-wall-num { color: #fff; font-size: clamp(44px, 5vw, 64px); font-weight: 800; line-height: 1; }
.stat-wall-num-full { font-size: clamp(30px, 9.5vw, 64px); letter-spacing: -0.01em; }
.stat-wall-label { color: rgba(255,255,255,0.65); font-size: 15px; margin-top: 10px; }
.audience-bars { max-width: 720px; margin: 36px auto 0; text-align: left; }
.audience-row { margin-bottom: 22px; }
.audience-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.audience-name { font-weight: 700; color: #1D1D1F; font-size: 16px; }
.audience-num { font-weight: 700; color: var(--brand-red); font-size: 16px; }
.audience-track { background: #F0F0F3; border-radius: 999px; height: 16px; overflow: hidden; }
.audience-bar { background: var(--brand-red); height: 100%; border-radius: 999px; min-width: 14px; }
.audience-note { color: #6E6E73; font-size: 15px; margin-top: 6px; }

.cta-final-earth {
  background:
    linear-gradient(rgba(11,18,32,0.42), rgba(11,18,32,0.30)),
    url('assets/img/earth-arc.jpg') center/cover no-repeat;
  background-color: #000;
}

/* Mobile: dim the earth-arc light burst behind the final CTA text (Dee 2026-10-14) */
@media (max-width: 768px) {
  .cta-final-earth {
    background:
      linear-gradient(rgba(11,18,32,0.84), rgba(11,18,32,0.78)),
      url('assets/img/earth-arc.jpg') center/cover no-repeat;
  }
}

.stat-wall-sub {
  text-align: center;
  color: #E03A3A;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin: 44px 0 20px;
}
.stat-wall-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .stat-wall-grid-3 { grid-template-columns: 1fr; }
}

/* ---------- Merch carousel ---------- */
.merch-carousel-wrap { position: relative; max-width: 1200px; margin: 0 auto; }
.merch-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.merch-track::-webkit-scrollbar { display: none; }
.merch-card { flex: 0 0 84%; scroll-snap-align: start; text-align: center; }
.merch-photo-frame { background: #F5F5F7; border-radius: 24px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 16px; }
.merch-photo-frame img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; display: block; }
.merch-card-name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: #1D1D1F; margin: 0 0 6px; line-height: 1.25; min-height: 2.5em; display: flex; align-items: flex-start; justify-content: center; }
.merch-card-price { font-size: 17px; font-weight: 600; color: #1D1D1F; margin: 0 0 8px; }
.merch-view { font-size: 15px; font-weight: 600; color: #C8102E; text-decoration: none; }
.merch-view:hover { text-decoration: none; }
.merch-arrow { display: none; }
.merch-section .merch-shop-all-btn { max-width: 360px; margin: 36px auto 0; }
@media (min-width: 768px) {
  .merch-track { overflow-x: auto; padding: 4px 52px 12px; }
  .merch-card { flex-basis: calc((100% - 48px) / 4); }
  .merch-arrow { display: flex; align-items: center; justify-content: center; position: absolute; top: 38%; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #E8E8ED; box-shadow: 0 4px 14px rgba(0,0,0,.08); font-size: 26px; line-height: 1; color: #1D1D1F; cursor: pointer; z-index: 2; }
  .merch-arrow-prev { left: 0; }
  .merch-arrow-next { right: 0; }
  .merch-arrow:hover { background: #F5F5F7; }
}

/* Homepage hero mobile spacing tightening (2026-10-13). Mobile only.
   Scoped to body.home so no other page and no desktop layout changes. */
@media (max-width: 768px) {
  body.home .hero {
    padding-top: 67px; /* nav to eyebrow space: 96px down about 30% */
  }
  body.home .hero .kicker,
  body.home .hero h1,
  body.home .hero p.lead {
    text-wrap: balance; /* no single orphan word line endings */
  }
  body.home .hero p.lead {
    margin-bottom: 14px; /* subheadline to buttons gap: 28px down 50% */
  }
  body.home .hero-btns {
    gap: 12px; /* gap between the two buttons */
  }
  body.home .hero .btn {
    height: 44px; /* buttons: 52px down about 15% */
    min-height: 44px;
  }
  body.home .hero::after {
    /* Clear 28px gap between the buttons and the photo (2026-10-13 fix).
       Was -12px ("bear sits closer"), which pulled the photo up under the
       Join the Community button so it covered the top of the bear's cap.
       The mask's top fade lives inside this box, so the cap still fades
       softly out of the navy below the gap, fully visible. */
    margin-top: 28px;
  }
}

/* Homepage mobile tightening part 2 (2026-10-13): platform headline, bear
   bottom fade, stats grid. Mobile only, homepage only. The peach freight
   word and the 1 Mission tile content are untouched. */
@media (max-width: 768px) {
  body.home .platform-section h2 {
    line-height: 1.1;
    text-wrap: balance;
    margin-top: 17px; /* eyebrow to headline gap: 24px down about 30% */
  }
  body.home .platform-section .sub {
    margin-top: 17px; /* headline to subheadline gap: 24px down about 30% */
  }
  /* Bear photo: fully faded into the navy by 88% so the bottom lands soft
     with no hard edge where the stats bar overlaps. Photo itself unchanged. */
  body.home .hero::after {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.5) 3%,
      #000 6%, #000 58%, rgba(0,0,0,.6) 70%, rgba(0,0,0,.25) 80%, transparent 88%);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.5) 3%,
      #000 6%, #000 58%, rgba(0,0,0,.6) 70%, rgba(0,0,0,.25) 80%, transparent 88%);
  }
  body.home .stats-inner {
    row-gap: 17px; /* stats rows: 20px down about 15% */
  }
  body.home .stat {
    align-items: center;
  }
  body.home .stat .glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(2px); /* centers the dot ink with the number and label */
  }
}

/* Brands We Trust: split subheadline and talk line (2026-10-13).
   Link uses the site's existing text link style (merch View links):
   red, semibold, underline on hover. Applies at all widths. */
.brands-section .brands-sub { margin-bottom: 12px; }
.brands-section .brands-talk { margin-top: 0; }
.brands-talk-link { font-weight: 600; color: #C8102E; text-decoration: none; }
.brands-talk-link:hover { text-decoration: none; }

/* Homepage hero desktop photo placement (2026-10-13). Desktop only
   (769px and up), homepage only. The photo renders at its natural
   proportions (1206x1544) at full hero height on the right, no cover
   crop. Left edge fades into the navy; top and bottom fades match the
   previous treatment. Mobile hero is untouched. */
@media (min-width: 1151px) {
  body.home .hero {
    min-height: clamp(460px, 24.4vw, 700px);
  }
  body.home .hero::after {
    left: auto;
    right: 0;
    height: 100%;
    width: clamp(531px, 36.7vw, 940px);
    background-size: auto 47vw;
    background-position: right top;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, rgba(0,0,0,.45) 10%, #000 24%),
      linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 120px), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, rgba(0,0,0,.45) 10%, #000 24%),
      linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 120px), transparent 100%);
    mask-composite: intersect;
  }
  body.home .hero-inner > * {
    max-width: 740px;
  }
}
/* Narrow desktop band: smaller photo and text column so the bear's
   face and the truck stay fully clear of the text. */
@media (min-width: 769px) and (max-width: 1150px) {
  body.home .hero {
    min-height: 500px;
  }
  body.home .hero::after {
    left: auto;
    right: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1206 / 1544;
    background-size: cover;
    background-position: center;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, rgba(0,0,0,.45) 10%, #000 24%),
      linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 120px), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, rgba(0,0,0,.45) 10%, #000 24%),
      linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 120px), transparent 100%);
    mask-composite: intersect;
  }
  body.home .hero-inner > * {
    max-width: 340px;
  }
}

/* ---------- 3.10.22 desktop hero layout fixes (769px and up only; mobile untouched) ---------- */
@media (min-width: 769px) {
  /* Long, soft navy gradient over the photo's left edge: no visible start line.
     Solid #0B1220 at the left easing to fully transparent by 58% of the hero
     width (about 740px at 1280 wide, over 1100px at 1920). The bear and the
     truck sit right of that zone and stay fully clear of it. */
  .hero::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to right,
      #0B1220 0%,
      rgba(11, 18, 32, 0.94) 18%,
      rgba(11, 18, 32, 0.60) 32%,
      rgba(11, 18, 32, 0.28) 45%,
      rgba(11, 18, 32, 0) 58%);
  }
  /* Align hero text with the nav logo: drop the hero's own side padding and
     give the inner container the header's exact geometry (1120px container,
     40px inline padding), so both start at the same left offset. */
  .hero {
    padding-left: 0;
    padding-right: 0;
  }
  .hero-inner {
    padding-inline: 40px;
  }
  /* Wider text column so the headline reads on two lines. */
  .hero-inner > * {
    max-width: 740px;
  }
}
/* At 1280 the full-size headline crowds the photo; step it down slightly
   there instead of narrowing the column. */
@media (min-width: 769px) and (max-width: 1400px) {
  .hero h1 {
    font-size: 56px;
  }
}

/* ---------- 3.10.24 hero headline wrap + premium footer (desktop) ---------- */
@media (min-width: 769px) {
  /* text-wrap: balance rewrapps the hero headline into three lines in the
     wide column; natural wrap gives the intended two lines. */
  .hero h1 {
    text-wrap: wrap;
  }
  /* Premium footer layout: brand left, links in two calm columns,
     copyright bar split left and right. */
  .site-footer {
    text-align: left;
    padding: 56px 40px 36px;
  }
  .footer-inner {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr 1.4fr;
    gap: 48px;
    align-items: start;
  }
  .footer-hours {
    margin-top: 0;
    text-align: left;
  }
  .footer-hours::before { display: none; }
  .footer-logo img {
    width: 150px;
    height: auto;
    display: block;
  }
  .footer-tagline {
    margin-top: 16px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    max-width: 26ch;
  }
  .footer-nav {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    gap: 14px 72px;
    margin-top: 0;
    grid-column: 3;
    text-align: left;
  }
  .footer-nav a {
    min-height: 0;
    font-size: 15px;
    justify-content: flex-start;
    color: rgba(255, 255, 255, 0.72);
  }
  .footer-divider {
    margin: 48px auto 24px;
  }
  .copyright {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ---------- 3.10.78 desktop footer: hours as middle column; stack 769-1024 ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .footer-inner { grid-template-columns: 1fr 1.2fr; }
  .footer-hours { grid-column: 1; grid-row: 2; margin-top: 28px; }
  .footer-nav { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- 3.10.29 mobile footer logo size ---------- */
@media (max-width: 768px) {
  /* The footer logo had no mobile size and rendered at full natural
     width; cap it by height to match the header logo. */
  .footer-logo img {
    height: 28px;
    width: auto;
  }
}

/* ---------- 3.10.31 header nav trim ---------- */
@media (min-width: 769px) {
  /* Desktop header carries Home, Advertise, Marketplace, Contact.
     About lives in the footer only (About Us). Contact stays at the
     top on purpose: the operation runs heavily through email, so the
     contact path must be one tap from anywhere. The mobile menu
     keeps the full list. */
  .site-header .nav li:has(> a[href$="/about/"]) {
    display: none;
  }
}
/* Shop word restored to the header nav (Dee 2026-10-14): the bag icon that used to cover for it was removed, so the word carries the store now. */

/* ---------- 3.10.35 Premium Best Value badge ---------- */
/* Growth wears the red Most Popular badge; Premium wears navy. */
.tier .badge.badge-premium {
  background: #0B1220;
}

/* ---------- 3.10.36 Premium card border ---------- */
/* The Best Value card carries a navy border like the featured card
   carries red. */
.tier:has(.badge-premium) {
  border: 1px solid #0B1220;
}

/* Ad Ready page: tighter header-to-form spacing, narrower desktop card, note rhythm (3.10.87) */
body.page-template-page-ad-ready-php .page-header-clean { padding-bottom: 0; }
body.page-template-page-ad-ready-php .contact-body { padding-top: 40px; }
body.page-template-page-ad-ready-php .form-note { margin-top: 12px; }
body.page-template-page-ad-ready-php .btn-contact-submit + .form-note { margin-top: 20px; }
@media (min-width: 768px) {
  body.page-template-page-ad-ready-php .contact-body { padding-top: 56px; }
}
@media (min-width: 769px) {
  body.page-template-page-ad-ready-php .contact-grid { max-width: 560px; }
}

.company-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.company-card-tag { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #fff; padding: 4px 10px; border-radius: 999px; }
.company-card-tag.tag-top-pick { background: #A21D22; }
.company-card-tag.tag-trending { background: #EA580C; }
.company-card-tag.tag-job { background: #15803D; }
.company-card-tag.tag-new { background: #1D1D1F; }

/* Sponsors page spacing + readability pass (3.10.123) */
body.page-template-page-sponsors-php .sponsors-hero { padding: 80px 24px 48px; }
body.page-template-page-sponsors-php .stat-wall { padding: 41px 24px; }
body.page-template-page-sponsors-php .section { padding-top: 24px; padding-bottom: 35px; }
body.page-template-page-sponsors-php .cta-final { padding: 65px 24px; }
body.page-template-page-sponsors-php h1,
body.page-template-page-sponsors-php h2 { line-height: 1.12; text-wrap: balance; }
body.page-template-page-sponsors-php .section h2 { margin-bottom: 18px; }
body.page-template-page-sponsors-php .section .sub { line-height: 1.6; text-wrap: pretty; margin-bottom: 24px; }
body.page-template-page-sponsors-php .cta-final .kicker { color: var(--brand-red-on-dark); font-weight: 800; }
body.page-template-page-sponsors-php .sponsors-hero .kicker { text-transform: uppercase; letter-spacing: 2.5px; font-size: 13px; }

/* Report a Company page (3.10.124) */
.report-header { background: #0B1220; padding: 88px 24px 56px; text-align: center; }
.report-header .kicker { color: var(--brand-red-on-dark); font-weight: 700; letter-spacing: 2.5px; font-size: 13px; text-transform: uppercase; margin-bottom: 12px; }
.report-header h1 { color: #fff; }
.report-header .lead { color: rgba(255,255,255,0.85); }
.report-commitments { background: #fff; border: 1px solid #E9E4DA; border-top: 4px solid var(--brand-red); border-radius: 16px; padding: 24px 28px; margin-bottom: 24px; }
.report-commitments h2 { margin-top: 0; font-size: 20px; }
.report-commitments ul { line-height: 1.65; padding-left: 20px; margin-bottom: 0; }
.report-error { background: #FDECEC; border-radius: 10px; padding: 12px 16px; line-height: 1.5; }
#trxck-report-form input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 22px; margin: 0; padding: 0; }
#trxck-report-form .form-field label:has(input[type="checkbox"]) { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
#trxck-report-form .field-note { font-size: 14px; color: #6E6E73; margin-top: 6px; }
.report-submit { background: var(--brand-red); color: #fff; width: 100%; border-radius: 999px; padding: 16px 30px; font-size: 17px; }
.report-commitments ul { line-height: 1.5 !important; }
.report-commitments li { margin-bottom: 10px; }
.report-commitments li:last-child { margin-bottom: 0; }

/* Mobile homepage hero — IMMERSIVE (Dee/ChatGPT spec 2026-10-15, final word):
   the bear leads. The Oct 13 patches stacked text first with the photo at
   order 10; this flips the photo to the top of the flex column, stretches it
   to 76% of the viewport, and pulls the text up into its gradient fade. */
@media (max-width: 768px) {
  body.home .hero { padding-top: 0; padding-bottom: 52px; }
  body.home .hero::after {
    order: -1;
    margin-top: 0;
    height: 128vw;
    max-height: 600px;
    min-height: 0;
    padding-top: 0;
    background-size: auto 140%;
    background-position: 32% 0%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 52%, rgba(0,0,0,0.55) 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 52%, rgba(0,0,0,0.55) 78%, transparent 100%);
  }
  body.home .hero-inner { margin-top: -132px; position: relative; z-index: 2; }
  body.home .hero .btn { height: 54px; min-height: 54px; }
  body.home .hero .btn.outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.85); }
  body.home .hero h1 { font-size: clamp(44px, 13vw, 52px); }
  body.home .hero .kicker { margin-bottom: 20px; }
  body.home .hero .kicker::after { content: ''; display: block; width: 64px; height: 5px; border-radius: 3px; background: var(--brand-red-on-dark); margin-top: 13px; }
}


/* Header dropdowns (Dee 2026-10-15, Hemut borrow #1): hover panels on the
   desktop nav — quick fade + small drop, rounded, soft shadow. The little
   red bar (our homepage hero motif) marks the hovered row. */
@media (min-width: 768px) {
  .nav li.has-drop { position: relative; }
  .nav-chev { display: inline-flex; margin-left: 5px; vertical-align: middle; transition: transform .2s ease; }
  .nav li.has-drop:hover .nav-chev, .nav li.has-drop:focus-within .nav-chev { transform: rotate(180deg); }
  .nav-drop { position: absolute; left: 50%; top: calc(100% + 14px); transform: translate(-50%, 8px); width: 320px; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(11,18,32,.20), 0 2px 8px rgba(11,18,32,.08); padding: 8px; opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; z-index: 120; }
  .nav-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .nav li.has-drop:hover .nav-drop, .nav li.has-drop:focus-within .nav-drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s, 0s, 0s; }
  .nav-drop-item { display: flex; align-items: center; gap: 12px; position: relative; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
  .nav-drop-item:hover { background: #F5F6F8; }
  .nav-drop-item::before { content: none; }
  .nav-drop-title { display: block; font-size: 15px; font-weight: 600; color: #0B1220; line-height: 1.3; }
  .nav-drop-desc { display: block; font-size: 12.5px; font-weight: 400; color: #6E6E73; margin-top: 1px; }
  .nav-drop-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; color: var(--brand-red); }
  .nav-drop-ico svg { width: 21px; height: 21px; display: block; }
  .nav-drop-text { display: block; min-width: 0; }
}
@media (max-width: 767px) {
  .nav-drop, .nav-chev { display: none; }
}


/* Red bar draw-in (Dee 2026-10-15): the hero bar is the one lateral mover he
   allows — it draws left to right like a pen stroke after the eyebrow lands.
   Also longer now (96px), and present on desktop too, not just mobile. */
@keyframes trxck-bar-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
body.home .hero .kicker::after {
  content: ''; display: block; width: 96px; height: 5px; border-radius: 3px;
  background: var(--brand-red-on-dark); margin-top: 13px;
  transform-origin: left center;
  animation: trxck-bar-draw .7s cubic-bezier(.2,.75,.3,1) .45s both;
}
@media (prefers-reduced-motion: reduce) {
  body.home .hero .kicker::after { animation: none; }
}


/* Red bar rollout (Dee 2026-10-15): one bar per page, headline moment only —
   same 96px draw as the homepage hero. Deep red on light headers, bright on
   the dark Sponsors hero; profiles carry it under the company name. */
.page-header-clean .kicker::after, .marketplace-hero .kicker::after, .sponsors-hero .kicker::after, .partner-title::after {
  content: ''; display: block; width: 96px; height: 5px; border-radius: 3px;
  background: var(--brand-red); margin-top: 13px;
  transform-origin: left center;
  animation: trxck-bar-draw .7s cubic-bezier(.2,.75,.3,1) .45s both;
}
.page-header-clean .kicker::after, .marketplace-hero .kicker::after, .sponsors-hero .kicker::after { margin-left: auto; margin-right: auto; }
.sponsors-hero .kicker::after { background: var(--brand-red-on-dark); }
@media (prefers-reduced-motion: reduce) {
  .page-header-clean .kicker::after, .marketplace-hero .kicker::after, .sponsors-hero .kicker::after, .partner-title::after { animation: none; }
}


/* Page transitions, Advertise + Marketplace (Dee 2026-10-15): heroes cascade
   on arrival, sections rise on scroll. --fd staggers a reveal, then drops
   away the moment the element lands so hovers never inherit the lag. */
.fade-up[style*="--fd"]:not(.visible) { transition-delay: var(--fd); }


/* Solo hero stat (Dee 2026-10-15): the strip is the billion alone now —
   centered, sized up. Self-limiting: styles apply only while it's solo. */
.stats-inner > .stat:only-child > div { display: flex; align-items: baseline; column-gap: 0.26em; flex-wrap: wrap; justify-content: center; font-size: clamp(20px, 6.3vw, 40px); font-weight: 800; color: #fff; line-height: 1.15; }
.stats-inner > .stat:only-child .num, .stats-inner > .stat:only-child .label { font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: normal; }

/* 3.10.195: solo stat spans the full strip width; the line never wraps */
.stats-inner > .stat:only-child { grid-column: 1 / -1; }
.stats-inner > .stat:only-child > div { flex-wrap: nowrap; font-size: clamp(16px, 4.4vw, 40px); }
.stats-inner > .stat:only-child .num, .stats-inner > .stat:only-child .label { white-space: nowrap; }

/* Park Your Listing gold pulse (Dee 2026-10-15): the gold card breathes like the
   pricing tiers do, same 3.4s rhythm, gold halo. One rule in style.css so the
   marketplace page and its category twin can never drift apart on this. */
.company-card-apply { animation: trxck-apply-glow 3.4s ease-in-out infinite; }
@keyframes trxck-apply-glow {
  0%, 100% { box-shadow: 0 16px 48px rgba(0,0,0,.08); }
  50% { box-shadow: 0 18px 54px rgba(245,166,35,.38); }
}
@media (prefers-reduced-motion: reduce) { .company-card-apply { animation: none; } }

/* Sponsor inquiry form (3.10.202): notices + file field on the shared form card. */
.form-notice { border-radius: 14px; padding: 16px 18px; margin-bottom: 20px; font-size: 15px; line-height: 1.55; }
.form-notice p { margin: 6px 0 0; }
.form-notice .success-title { font-size: 20px; font-weight: 800; }
.form-notice-ok { background: #FFF7E0; border: 1.5px solid #F5A623; }
.form-notice-err { background: #FDECEF; border: 1.5px solid var(--brand-red); }
.form-field .form-helper { font-size: 13px; color: #6E6E73; margin: 6px 0 0; }
.form-field .form-optional { font-weight: 400; color: #6E6E73; }
.file-control { display: flex; align-items: center; gap: 12px; border: 1px solid #D2D2D7; border-radius: 14px; padding: 8px; min-height: 52px; box-sizing: border-box; background: #fff; }
.file-choose { background: #F5F5F7; border: 1px solid #D2D2D7; border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 600; color: #1D1D1F; cursor: pointer; white-space: nowrap; margin: 0; }
.file-name { font-size: 14px; color: #6E6E73; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-field input.file-input-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: none; padding: 0; }

/* Blur-rise headline words (3.10.203): word spans are born hidden and sharpen in
   when their headline scrolls into view (JS-split in footer.php). --hd carries the
   headline's cascade offset, --wi is each word's turn. No JS = plain headline. */
.blur-rise .w { display: inline-block; opacity: 0; transform: translateY(55%); filter: blur(3px); }
.blur-rise.visible .w { animation: trxck-word-in .95s cubic-bezier(.2,.75,.3,1) both; animation-delay: calc(var(--hd, 0ms) + var(--wi, 0) * 85ms); }
@keyframes trxck-word-in { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.blur-rise .w:has(> .merch-headline-line2) { display: block; }
@media (prefers-reduced-motion: reduce) {
  .blur-rise .w { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
}

/* Solo stat centering fix (3.10.213): the base .stat is itself a flex row, so the
   sentence was riding at flex-start inside its full-width cell. Center the cell's
   content and the sentence sits dead center under the hero buttons. */
.stats-inner > .stat:only-child { justify-content: center; }

/* Inline prose links read as links: brand red, color only (3.10.226) */
.section p a:not([class]), .section li a:not([class]),
.contact-body p a:not([class]), .contact-body li a:not([class]),
.page-header-clean p a:not([class]), p.sub a:not([class]),
.partner-about .body a:not([class]) {
  color: var(--brand-red);
}
.section p a:not([class]):hover, .contact-body p a:not([class]):hover { color: var(--red-dark); }

/* Advertise mobile top pass (3.10.232, copy unified in 3.10.233): mobile spacing only, desktop untouched */
@media (max-width: 768px) {
  body.page-template-page-advertise-php .page-header-clean { padding-top: 44px; }
  body.page-template-page-advertise-php #tiers { padding-top: 20px !important; }
  body.page-template-page-advertise-php #tiers h2 { font-size: clamp(28px, 8.6vw, 32px); line-height: 1.15; margin-bottom: 24px; }
  body.page-template-page-advertise-php #tiers .tiers-line { display: none; }
}

/* Merch mobile spacing (3.10.235): tighten the card text stack on mobile only.
   Kills the name's reserved second line, locks name->price and price->View at 8px,
   and brings View->Shop All to ~32px (20px button margin + 12px track padding). */
@media (max-width: 768px) {
  body.home .merch-card-name { min-height: 0; margin-bottom: 8px; }
  body.home .merch-card-price { margin-bottom: 8px; }
  body.home .merch-section .merch-shop-all-btn { margin-top: 20px; }
}

/* Advertise tier card structure (3.10.236): Best-for line, per-ad line, bridge line.
   Spacing rhythm: name->bestfor 6px, bestfor->price 20px, price->per 8px, per->per-ad 8px. */
.tier h3 { margin-bottom: 6px; }
.tier-bestfor { font-size: 14px; color: var(--gray); margin: 0 0 14px; }
.tier .price { margin-bottom: 8px; }
.tier .per { margin-bottom: 8px; }
.tier-perad { font-size: 14px; color: var(--gray); margin: 0 0 22px; }
.tier-bridge { border-top: 1px solid var(--line); padding-top: 16px; margin: 0 0 4px; font-weight: 700; font-size: 15.5px; color: #333; text-align: left; }
.tier-note { font-size: 13px; color: var(--gray); text-align: center; margin: 14px 0 0; }
/* Price suffix format (3.10.240): big number, smaller /ad or /month on the same line. */
.price-per { font-size: 20px; font-weight: 600; color: var(--gray); letter-spacing: 0; }
.tier-list-solo { margin-top: 14px; }

/* Partners page pass (3.10.245, Dee spec): intro heading + line, seam fix,
   page-local transitions. Hidden states exist ONLY under body.sp-js
   (added by the page's own script) - no JS, everything visible. */
body.page-template-page-sponsors-php .section .partners-intro-h {
  font-size: clamp(32px, 8.4vw, 50px); font-weight: 800; color: var(--ink);
  line-height: 1.12; text-wrap: balance; margin: 0 0 12px;
}
body.page-template-page-sponsors-php .partners-intro-p {
  font-size: clamp(24px, 6.4vw, 30px); color: #6E6E73; font-weight: 400;
  line-height: 1.4; text-wrap: balance; margin: 0;
}
body.page-template-page-sponsors-php .partners-intro-sec { padding-bottom: 8px; }

/* Earth settles in on its own layer; same image, same gradient. */
body.page-template-page-sponsors-php .sponsors-hero { position: relative; overflow: hidden; background-image: none; background-color: #000; }
body.page-template-page-sponsors-php .sponsors-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(rgba(11,18,32,0.45), rgba(11,18,32,0.62)), url('assets/img/earth-hero.jpg') center right/cover no-repeat;
}
body.page-template-page-sponsors-php .sponsors-hero .section-inner { position: relative; z-index: 1; }
body.sp-js.page-template-page-sponsors-php .sponsors-hero::before { animation: sp-earth-in 1.6s ease-out both; }
@keyframes sp-earth-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }

/* Hero load sequence: fade + 20px rise, 800ms, staggered via --spd. */
body.sp-js .sp-hero-el { opacity: 0; }
body.sp-js .sponsors-hero .sp-hero-el { animation: sp-rise .8s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--spd, 0s); }
@keyframes sp-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
body.sp-js.page-template-page-sponsors-php .sponsors-hero .kicker::after { animation: sp-bar-in .8s cubic-bezier(.22,1,.36,1) .1s both; }
@keyframes sp-bar-in { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }

/* Below the hero: one-time scroll reveals, 24px / 600ms. */
body.sp-js .sp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
body.sp-js .sp-reveal.sp-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  body.sp-js .sp-hero-el, body.sp-js .sp-reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  body.sp-js.page-template-page-sponsors-php .sponsors-hero::before,
  body.sp-js.page-template-page-sponsors-php .sponsors-hero .kicker::after { animation: none !important; }
}

/* Listing Application pass (3.10.246): checkmark list in the price card,
   tighter header-to-card gap, wider mobile form. */
.apply-checks { list-style: none; margin: 0 auto 20px; padding: 0; max-width: 420px; text-align: left; }
.apply-checks li { padding: 7px 0; font-size: 15.5px; color: #333; }
.apply-checks li::before { content: "\2713  "; color: #2F8F88; font-weight: 700; }
body.page-template-page-listing-application-php .page-header-clean { padding-bottom: 24px; }
body.page-template-page-listing-application-php .section { padding-top: 24px; }
@media (max-width: 767px) {
  body.page-template-page-listing-application-php .section-inner { padding-left: 0; padding-right: 0; }
}

/* Tier card polish (3.10.247): exact 4px price-suffix gap, hanging-indent
   checkmarks, wider cards on mobile, orphan-safe wraps. Shared by the
   Advertise page and homepage plan cards (.tier component). */
.price-per { margin-left: 4px; }
.tier ul li { position: relative; padding-left: 25px; text-wrap: pretty; }
.tier ul li::before { content: "\2713"; position: absolute; left: 0; top: 7px; }
.tier-bestfor { text-wrap: balance; }
.tier-note { text-wrap: balance; }
@media (max-width: 768px) {
  .section-inner:has(> .tiers) { padding-left: 0; padding-right: 0; }
}

/* Bell dismiss (3.10.250): per-item x, stored per device. Row is now a div
   with an inner link so the button never triggers navigation. */
.bell-item { transition: opacity .18s ease; }
.bell-item-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.bell-item-link:hover { text-decoration: none; }
.bell-dismiss {
  flex-shrink: 0; width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: transparent; color: #AEAEB2; font-size: 15px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.bell-dismiss:hover { background: #ECECF0; color: #1D1D1F; }
.bell-item.dismissing { opacity: 0; }
.bell-empty { padding: 10px; color: #6E6E73; font-size: 14px; font-weight: 500; }

/* Marketplace bottom alignment (3.10.251): on mobile the why / how-it-works /
   FAQ / pricing sections share one 24px side margin so their edges line up. */
@media (max-width: 767px) {
  .marketplace-why, .marketplace-how, .marketplace-pricing { padding-left: 24px; padding-right: 24px; }
  body.post-type-archive-partner .section-inner, body.tax-partner_category .section-inner { padding-left: 24px; padding-right: 24px; }
}

/* Promo code box pulse (3.10.255, Dee's pick): the deal breathes gold on the
   same 3.4s rhythm as the rest of the pulse family. .promo-box exists only
   on partner profiles, and only when the company has a code in hand. */
.promo-box { animation: trxck-promo-glow 3.4s ease-in-out infinite; }
@keyframes trxck-promo-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
  50% { box-shadow: 0 0 24px 2px rgba(245,166,35,.38); }
}
@media (prefers-reduced-motion: reduce) { .promo-box { animation: none; } }

/* Mobile tab bar (3.10.262; floating-icon revision per Dee - icons only,
   no words, Facebook-style dock): a black pill floating over the page bottom,
   mobile only. Active icon in red with a dot under it. */
.tab-bar { display: none; }
@media (max-width: 768px) {
  body { padding-bottom: 96px; }
  .tab-bar {
    display: flex; position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 900;
    align-items: center; gap: 14px; padding: 10px 16px;
    background: rgba(8,8,10,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.10); border-radius: 999px;
    box-shadow: 0 14px 34px rgba(0,0,0,.35);
  }
  .tab-item {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer; position: relative; border-radius: 50%;
    color: #C9C9CE; text-decoration: none; padding: 0; -webkit-tap-highlight-color: transparent;
  }
  .tab-item svg { width: 24px; height: 24px; }
  .tab-item:active { background: rgba(255,255,255,.13); transform: scale(.92); }
  .tab-item { transition: transform .12s ease, background .12s ease; }
  .tab-item.active { color: #FF5A5F; }
  .tab-item.active::after {
    content: ""; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--red);
  }
}

/* Mobile dropdown panels inline (3.10.272): on phones the header dropdowns open
   as static sub-lists inside the full-screen menu instead of hiding, so panel
   items (incl. Deals) are reachable on mobile. */
@media (max-width: 767px) {
  .nav-drop { display: block; position: static; width: auto; background: transparent; box-shadow: none; border-radius: 0; padding: 2px 0 8px 18px; opacity: 1; visibility: visible; transform: none; }
  .nav-drop::before { display: none; }
  .nav-drop-item { display: flex; align-items: center; gap: 12px; position: relative; padding: 8px 10px; border-radius: 10px; text-decoration: none; }
  .nav-drop-item::before { content: none; }
  .nav-drop-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; color: var(--brand-red-on-dark); }
  .nav-drop-ico svg { width: 21px; height: 21px; display: block; }
  .nav-drop-text { display: block; min-width: 0; }
  .nav-drop-title { display: block; font-size: 15.5px; font-weight: 600; color: #fff; line-height: 1.3; }
  .nav-drop-desc { display: block; font-size: 12.5px; font-weight: 400; color: rgba(255,255,255,.6); margin-top: 1px; }
}

/* Mobile drop items: beat the open-menu link rule (3.10.277). The generic
   .nav.nav-open a rule (flex, 28px, no padding) was flattening the dropdown
   items into one-line rows and crushing their padding. */
@media (max-width: 767px) {
  .header-right .nav.nav-open .nav-drop { padding-left: 6px; }
  .header-right .nav.nav-open a.nav-drop-item { display: flex; align-items: center; gap: 12px; min-height: 0; padding: 10px 10px; font-size: 16px; }
  .header-right .nav.nav-open .nav-drop-title { display: block; font-size: 16px; font-weight: 600; color: #fff; line-height: 1.3; }
  .header-right .nav.nav-open .nav-drop-desc { display: block; font-size: 13px; font-weight: 400; color: rgba(255,255,255,.55); margin-top: 2px; line-height: 1.4; }
  .header-right .nav.nav-open .nav-drop-item::before { content: none; }
}

/* Launch promo lines on the subscription cards (Dee 2026-10-16): plain on Growth, gold strip on Premium. */
.tier-promo { font-size: 14.5px; font-weight: 600; color: #1D1D1F; text-align: center; margin: 14px 0 0; }
.tier-promo b { color: var(--red); font-weight: 800; }
.tier-promo-gold { background: #FFF3D6; border: 1.5px dashed #F5A623; border-radius: 10px; padding: 9px 12px; color: #8a5a00; }
.tier-promo-gold b { color: #8a5a00; }

/* Slashed launch pricing at the top of the subscription cards (Dee 2026-10-16). */
.price-was { color: #8E8E93; text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 3px; font-size: .52em; font-weight: 700; margin-right: 12px; vertical-align: baseline; }
.price-launch-note { font-size: 13.5px; color: #6E6E73; margin: 6px 0 0; text-align: center; }

/* Solo hero stat, longer line (Dee 2026-10-16): smaller on mobile and desktop, always one line. */
.stats-inner > .stat:only-child > div { font-size: clamp(13px, 4vw, 30px); flex-wrap: nowrap; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .tab-bar { transition: none; }
}

/* Slashed price row alignment (Jarvis pass on the relayed spec, Dee 2026-10-16):
   struck price up to .72em, both prices on one baseline, centered flex row,
   responsive size so the row never wraps on a phone. Growth and Premium alike. */
.tier .price:has(.price-was) { display: flex; align-items: baseline; justify-content: center; column-gap: 14px; font-size: clamp(38px, 11vw, 56px); }
.tier .price .price-was { font-size: .72em; margin-right: 0; text-decoration-thickness: 3px; }

/* Menu open: the dock ducks out of the way (Dee 2026-10-16) so the last menu
   items are reachable; the panel also gains bottom room as insurance. */
@media (max-width: 768px) {
  body.menu-open .tab-bar { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(16px); }
  .header-right.nav.nav-open { padding-bottom: 128px; }
}

/* Back to top: a small chat-style lift button. It sits in the header's shadow
   layer (z-index 90, below the z-index 100 header stack that contains the
   full-screen menu and bell panel). One global offset (3.10.400): the button
   is permanently parked above the floating nav pill — the pill's 16px bottom
   offset + its 66px height + a 16px air gap = 98px, plus the iOS safe-area
   inset — aligned to the 24px right margin, so it can never sit on the pill
   or on a page button (e.g. the marketplace closing band) at any width. */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: calc(98px + env(safe-area-inset-bottom));
  z-index: 90;
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14181F;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(11,18,32,.08);
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(11,18,32,.18);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  -webkit-tap-highlight-color: transparent;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}
.back-to-top:hover { background: #ffffff; border-color: rgba(11,18,32,.16); }
.back-to-top:focus-visible { outline: 2px solid #0B1220; outline-offset: 3px; }
.back-to-top:active { transform: translateY(0) scale(.96); }
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}

/* Mobile menu compaction + Shop family fix (Dee 2026-10-16): headers and rows
   a size down so the whole menu breathes; nothing hidden, fewer scrolls. */
@media (max-width: 768px) {
  .header-right .nav.nav-open a:not(.nav-drop-item) { font-size: 24px; min-height: 48px; }
  .header-right .nav.nav-open a.nav-drop-item { padding-top: 8px; padding-bottom: 8px; }
  .header-right .nav.nav-open .nav-drop-title { font-size: 15.5px; }
}

/* Native shop front (Dee 2026-10-16): browse here, check out on Shopify. */
.shop-sec { padding-top: 8px; }
.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 1080px; margin: 0 auto; }
@media (min-width: 768px) { .shop-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1100px) { .shop-grid { grid-template-columns: repeat(4, 1fr); } }
.shop-card { display: block; background: #fff; border: 1px solid #ECECF0; border-radius: 18px; overflow: hidden; text-decoration: none; box-shadow: 0 6px 20px rgba(11,18,32,.05); }
.shop-card-img { display: block; aspect-ratio: 1 / 1; background: #F5F5F7; overflow: hidden; position: relative; }
.shop-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 12px; box-sizing: border-box; mix-blend-mode: multiply; }
.shop-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 13px 15px 15px; }
.shop-card-name { font-size: 15.5px; font-weight: 600; color: #0B1220; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-card-price { font-size: 15px; font-weight: 400; color: #6E6E73; white-space: nowrap; }
.shop-note { text-align: center; color: #6E6E73; font-size: 14.5px; margin: 30px auto 0; max-width: 560px; }

/* 3.10.301 SHOP SPEC PASS (Dee 2026-10-16): eyebrow matches the other pages
   (small caps, letter-spaced, red bar already draws via .marketplace-hero
   .kicker::after), category chips mirror the Marketplace component, cards
   stack name over a gray price, sold-out and New states, dock clearance. */
body.page-template-page-shop-php .marketplace-hero { padding-left: 24px; padding-right: 24px; }
body.page-template-page-shop-php .marketplace-hero .kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; line-height: 1.3; }
body.page-template-page-shop-php .marketplace-hero .lead { text-wrap: balance; }
.shop-sec { padding-bottom: 120px; }
.shop-cats { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding: 0 24px 8px; margin: 0 auto 24px; max-width: 1080px; scroll-snap-type: x proximity; scrollbar-width: none; }
.shop-cats::-webkit-scrollbar { display: none; }
.shop-cats a { flex: none; height: 44px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 999px; background: #F5F5F7; color: #1D1D1F; text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; scroll-snap-align: start; transition: all 200ms ease; }
.shop-cats a:hover { background: #E8E8ED; }
.shop-cats a.active { background: #1D1D1F; color: #fff; }
.shop-cats a:focus-visible { outline: 2px solid #C8102E; outline-offset: 2px; }
.shop-card { position: relative; transition: transform .25s ease, box-shadow .25s ease; }
@media (min-width: 1024px) { .shop-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(11,18,32,.10); } }
.shop-card-img .img2 { position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease; }
@media (min-width: 1024px) { .shop-card:hover .shop-card-img .img2 { opacity: 1; } }
.shop-card.soldout .shop-card-img img { opacity: .45; }
.shop-card-soldout { font-size: 13px; color: #6E6E73; }
.shop-card-new { position: absolute; top: 10px; left: 10px; z-index: 2; background: #1D1D1F; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.shop-empty { text-align: center; color: #6E6E73; font-size: 15.5px; margin: 24px auto 8px; }
.shop-all-wrap { text-align: center; margin: 36px auto 0; }
.shop-all-btn { display: inline-block; min-width: 240px; text-align: center; }

/* Price row restyle (Dee 2026-10-16, 3.10.302): the old price matches the new
   price in size and weight, in the light brand gray, with ONE diagonal red
   slash drawn over it (no line-through). New price and /month are grouped in
   .price-now so the only space between them is the 4px .price-per margin;
   the old 14px flex column-gap now sits only between old and new price.
   Both prices shrink together via the clamp so the row stays on one line
   at 375px and 360px. Applies to the shared .tier cards (Advertise page
   and homepage). */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.tier .price:has(.price-was) { font-size: clamp(36px, 10.6vw, 50px); flex-wrap: nowrap; white-space: nowrap; }
.tier .price .price-was { position: relative; display: inline-block; font-size: 1em; font-weight: inherit; color: #8E8E93; text-decoration: none; margin-right: 0; white-space: nowrap; }
.tier .price .price-was::after { content: ""; position: absolute; left: -4%; top: 50%; width: 108%; height: .07em; background: var(--red); border-radius: 2px; transform: translateY(-50%) rotate(-20deg); }
.tier .price .price-now { white-space: nowrap; }

/* About page rebuild (Dee spec, 2026-10-16, 3.10.303): six sections, 24px
   mobile margins, one soft reveal system. Transition values live in the
   variables on .about-v2 so other pages can reuse them:
   --ab-dur (duration), --ab-rise (upward distance), --ab-ease (easing),
   --ab-stagger (hero step), --ab-stagger-tile (stat tile step).
   Per-element delay comes from the inline --d custom property.
   Reveals are gated on the .js class (added by an inline script in the
   template) so content is fully visible if JavaScript fails. */
.about-v2 {
  --ab-dur: 1000ms;
  --ab-rise: 12px;
  --ab-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ab-stagger: 150ms;
  --ab-stagger-tile: 120ms;
}
.js .about-v2 .ab-rv { opacity: 0; transform: translateY(var(--ab-rise)); transition: opacity var(--ab-dur) var(--ab-ease), transform var(--ab-dur) var(--ab-ease); transition-delay: var(--d, 0s); }
.js .about-v2 .ab-rv.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .about-v2 .ab-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .about-v2 .testimonial-slide { transition: none !important; }
}
.about-v2 .section-inner { padding-left: 0; padding-right: 0; }
.about-v2 .ab-sec { padding: 64px 24px; }
@media (min-width: 769px) { .about-v2 .ab-sec { padding: 112px 24px; } }
.about-v2 .ab-gray { background: #F5F5F7; }
.about-v2 .ab-col { max-width: 680px; margin-left: auto; margin-right: auto; }
.about-v2 .ab-center { text-align: center; }
.about-v2 .ab-sec .kicker { margin-bottom: 12px; }
.about-v2 .ab-sec h2 { font-size: clamp(30px, 8vw, 40px); line-height: 1.15; text-wrap: balance; margin-bottom: 16px; }
.about-v2 .ab-body p { font-size: 17px; line-height: 1.55; color: #6E6E73; text-wrap: pretty; margin: 0; }
.about-v2 .ab-body p + p { margin-top: 16px; }
.about-v2 .ab-body p.ab-close-line { font-size: 19px; line-height: 1.5; color: #1D1D1F; font-weight: 600; text-align: center; }
.about-v2 .ab-stats { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; max-width: 1080px; margin: 0 auto; }
@media (min-width: 769px) { .about-v2 .ab-stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 769px) { .about-v2 .ab-stat b { font-size: clamp(36px, 11vw, 56px); } }
.about-v2 .ab-stat { background: #F5F5F7; border-radius: 16px; padding: 24px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.about-v2 .ab-stat b { display: block; font-size: clamp(36px, 11vw, 48px); font-weight: 800; color: #1D1D1F; letter-spacing: -1px; line-height: 1; white-space: nowrap; }
.about-v2 .ab-stat span { font-size: 15px; color: #6E6E73; margin-top: 8px; white-space: nowrap; }
.about-v2 .ab-caption { text-align: center; font-size: 14px; color: #6E6E73; margin: 16px 0 0; }
.about-v2 .ab-body p.ab-mid { text-align: center; }
.about-v2 .ab-impact-lede { text-align: center; font-size: 17px; line-height: 1.55; color: #6E6E73; margin: 10px auto 0; max-width: 560px; }
/* Extra top room on the testimonials section so the floating dock never sits on its eyebrow or headline on phones. */
@media (max-width: 768px) { .about-v2 .ab-sec.ab-words { padding-top: 128px; } }
.about-v2 .testimonial-carousel { max-width: 760px; margin: 0 auto; }
.about-v2 .testimonial-slides { display: grid; }
.about-v2 .testimonial-slide { grid-area: 1 / 1; display: block; opacity: 0; pointer-events: none; transition: opacity .5s ease; animation: none; }
.about-v2 .testimonial-slide.is-active { opacity: 1; pointer-events: auto; }
.about-v2 .testimonial-quote { font-size: 17px; line-height: 1.5; }
@media (max-width: 768px) {
  .about-v2 .testimonial-slide { padding: 32px 24px; }
  .about-v2 .about-join { padding-bottom: 136px; }
}

/* ===== 3.10.304: verified seal alignment + shop hero spacing ===== */
.partner-name-row { display: inline-flex; align-items: center; gap: .3em; }
.partner-name-row .verified-seal { width: .58em; height: .58em; transform: translateY(-.04em); }
.partner-company .partner-name-row .verified-seal { width: 1em; height: 1em; }
.shop-hero { padding-top: 56px; padding-bottom: 0; }
.shop-hero .kicker::after { margin-top: 12px; }
.shop-hero h1 { margin-top: 24px; margin-bottom: 0; }
.shop-hero .lead { margin-top: 12px; margin-bottom: 0; }
.shop-sec { padding-top: 24px; }
.shop-cats { margin-bottom: 0; padding-bottom: 0; }
.shop-grid { margin-top: 28px; }
@media (min-width: 769px) {
  .shop-hero { padding-top: 96px; }
  .shop-sec { padding-top: 32px; }
  .shop-grid { margin-top: 40px; }
  .shop-cats { justify-content: center; overflow-x: visible; }
}

/* ===== 3.10.306: shop email capture card ===== */
.shop-mail-card { background: #0B1220; border-radius: 20px; padding: 40px 32px; text-align: center; max-width: 1080px; margin: 48px auto 0; }
.shop-mail-card h2 { color: #fff; font-size: 26px; font-weight: 800; margin: 0 0 10px; }
.shop-mail-card p { color: rgba(255,255,255,.7); font-size: 16.5px; line-height: 1.6; margin: 0 auto 24px; max-width: 520px; }
.shop-mail-card .kit-form-wrapper { max-width: 500px; margin: 0 auto; }
@media (max-width: 767px) { .shop-mail-card { padding: 32px 24px; } }

/* ===== 3.10.396: site-wide deal banner + shop deals, slash prices, size pills, direct Buy =====
   All deal content (banner line, band, shelf, codes, prices) is driven by inc/deals.php. */
.deal-banner { display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px; background: #14161A; color: #F4F1EA; font-size: 13px; font-weight: 600; letter-spacing: .01em; line-height: 1; text-decoration: none; white-space: nowrap; overflow: hidden; transition: background 200ms ease; }
.deal-banner:hover { background: #1D2026; text-decoration: none; }
.deal-banner:focus-visible { outline: 2px solid #C8102E; outline-offset: -2px; }
.deal-banner-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #D9A441; animation: deal-pulse 2.6s ease-in-out infinite; }
@keyframes deal-pulse { 0% { box-shadow: 0 0 0 0 rgba(217,164,65,.50); } 55% { box-shadow: 0 0 0 6px rgba(217,164,65,0); } 100% { box-shadow: 0 0 0 0 rgba(217,164,65,0); } }
@media (prefers-reduced-motion: reduce) { .deal-banner-dot { animation: none; } }
.deal-banner-seg { white-space: nowrap; }
.deal-banner-ship { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.deal-banner-sep { flex: none; opacity: .45; }
.deal-banner-cta { flex: none; color: #E8B54D; text-decoration: underline; text-underline-offset: 3px; }
.deal-banner-full { display: flex; align-items: center; gap: 8px; min-width: 0; }
.deal-banner-short { display: none; }
@media (max-width: 640px) {
  .deal-banner { height: 36px; font-size: clamp(10px, 2.85vw, 12px); gap: 6px; padding: 0 10px; }
  .deal-banner-dot { display: none; }
  .deal-banner-full { display: none; }
  .deal-banner-short { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
  .deal-banner-short .deal-banner-cta { flex: none; }
}
.shop-deals { max-width: 1080px; margin: 28px auto 0; background: #0B1220; border-radius: 18px; padding: 22px 24px; }
.shop-deals-head { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.shop-deals-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) { .shop-deals-row { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.shop-deal strong { display: block; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.3; }
.shop-deal span { display: block; color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.45; margin-top: 3px; }
.shop-card-price s { color: #6E6E73; font-weight: 400; }
.shop-card-price-deal { white-space: normal; }
.shop-card-dealprice { color: #C8102E; font-weight: 700; }
.shop-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.shop-size { min-width: 40px; height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid #D8D8DE; background: #fff; color: #1D1D1F; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background 200ms ease, color 200ms ease, border-color 200ms ease; }
.shop-size:hover { border-color: #1D1D1F; }
.shop-size.active { background: #1D1D1F; border-color: #1D1D1F; color: #fff; }
.shop-size:disabled { opacity: .35; cursor: not-allowed; }
.shop-size:focus-visible { outline: 2px solid #C8102E; outline-offset: 2px; }
.shop-buy { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; height: 44px; padding: 0 26px; margin-top: 12px; border-radius: 999px; background: #C8102E; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; transition: transform .2s ease, background 200ms ease; }
.shop-buy:hover { background: #A50D26; text-decoration: none; }
.shop-buy:active { transform: scale(.97); }
.shop-buy:focus-visible { outline: 2px solid #0B1220; outline-offset: 2px; }

/* ===== 3.10.308: mobile menu icons, bigger and centered (<=768px only) ===== */
@media (max-width: 768px) {
  .header-right .nav.nav-open a.nav-drop-item { display: flex; align-items: center; gap: 16px; padding: 14px 0; min-height: 64px; }
  .header-right .nav.nav-open .nav-drop-ico { width: 28px; height: 28px; margin: 0; transform: none; }
  .header-right .nav.nav-open .nav-drop-ico svg { width: 26px; height: 26px; display: block; }
  .header-right .nav.nav-open .nav-drop-text { display: flex; flex-direction: column; gap: 2px; }
  .header-right .nav.nav-open .nav-drop-desc { margin-top: 0; }
}

/* ===== 3.10.310: desktop footer structure (>=769px). Mobile keeps its layout;
   the only <=768 rules here hide the new desktop column headings and set the
   gap between the two link groups. ===== */
@media (min-width: 769px) {
  .site-footer { padding: 56px 24px 40px; }
  .footer-inner {
    display: grid;
    grid-template-columns: 1.5fr 1.15fr 0.75fr 0.95fr;
    column-gap: 48px;
    align-items: start;
  }
  .footer-hours { margin-top: 0; text-align: left; }
  .footer-hours::before { display: none; }
  .footer-tagline { letter-spacing: 0; }
  .footer-nav { display: flex; flex-direction: column; gap: 14px; margin-top: 0; text-align: left; }
  .footer-nav .footer-nav-title { margin-bottom: 0; }
  .footer-nav a { display: block; min-height: 0; white-space: nowrap; }
  .footer-divider { margin: 32px auto 0; }
  .copyright { flex-direction: row; justify-content: space-between; align-items: center; padding-top: 32px; }
  .legal-links a { font-size: 13px; }
  .newsletter-section { padding-bottom: 16px !important; }
  .newsletter-section > p { text-wrap: balance; }
  .newsletter-section .formkit-fields { align-items: center; }
}
@media (min-width: 769px) and (max-width: 1099px) {
  .footer-inner { column-gap: 28px; grid-template-columns: 1.35fr 1.1fr 0.75fr 0.95fr; }
  .footer-hours-time { white-space: normal; }
}
@media (max-width: 768px) {
  .footer-nav-title { display: none; }
  .footer-nav-company { margin-top: 14px; }
}

/* ===== 3.10.311: mobile footer tidy-up (<=768px only; desktop untouched).
   Headings shown over each link group, both groups on one shared column grid
   so the words share left edges, gaps tightened, and the dock clearance
   strip under the footer painted navy. ===== */
@media (max-width: 768px) {
  .footer-nav-title { display: block; grid-column: 1 / -1; text-align: center; margin-bottom: 0; }
  .footer-nav { margin-top: 8px; grid-template-columns: 0.82fr 1.18fr; }
  .footer-nav a { justify-content: flex-start; }
  .site-footer { box-shadow: 0 140px 0 #0B1220; }
}

/* ===== 3.10.313: mobile footer centered system (<=768px only; desktop
   untouched). Everything centers; link groups are centered 2-col grids with
   the odd last link spanning; 60% dividers between groups; deep bottom
   padding so the floating dock never covers the legal links. ===== */
@media (max-width: 768px) {
  .site-footer { padding: 56px 24px calc(120px + env(safe-area-inset-bottom)); }
  .footer-brand-col { text-align: center; }
  .footer-tagline { text-align: center; margin-inline: auto; }
  .footer-social { justify-content: center; }
  .footer-inner { gap: 0; }
  .footer-hours::before { width: 60%; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 23px; }
  .footer-nav::before { content: ""; grid-column: 1 / -1; justify-self: center; width: 60%; height: 1px; background: rgba(255,255,255,.08); }
  .footer-nav a { justify-content: center; font-size: 17px; min-height: 48px; white-space: nowrap; }
  /* 3.10.351: the 3.10.313 last-child span rule is REMOVED (owner catch
     2026-10-17): with Games inserted, it stranded Shop as a centered
     full-width orphan. Explore is now three clean rows of two:
     Home|About Us, Advertise|Marketplace, Games|Shop. */
  .copyright { font-size: 14px; }
  .legal-links { gap: 24px; }
  .legal-links a { font-size: 14px; }
}
@media (max-width: 400px) {
  .footer-nav-company { grid-template-columns: 1fr; }
}

/* ===== 3.10.317: mobile dropdown rows unified (<=768px only). One shared
   style for every subline and title, identical row geometry and edges in
   every section. Desktop keeps its styles; only the subline TEXT is shared
   (single source in functions.php). Icons untouched. ===== */
@media (max-width: 768px) {
  .header-right .nav.nav-open .nav-drop { padding-left: 6px; padding-right: 0; }
  .header-right .nav.nav-open a.nav-drop-item { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 12px 0; }
  .header-right .nav.nav-open .nav-drop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .header-right .nav.nav-open .nav-drop-title { display: block; font-size: 16px; font-weight: 600; color: #FFFFFF; line-height: 1.3; white-space: nowrap; }
  .header-right .nav.nav-open .nav-drop-desc { display: block; font-size: 15px; font-weight: 400; color: #C9CED8; line-height: 1.35; white-space: nowrap; margin-top: 0; }
}

/* ===== 3.10.319: Advertise guidelines simplified (relayed spec 2026-10-17).
   3 cards (template), note reworded + restyled, mobile cards pulled to 24px
   screen margins (the -48px grid margins exactly cancel the section-inner's
   48px side padding; the section's own 24px remains), desktop 3-across. Card
   background, radius, fonts and colors unchanged from the base rules. ===== */
.rules-grid + p.sub { font-size: 14px; color: #6E6E73; text-align: center; margin-top: 24px; }
@media (min-width: 769px) {
  .rules-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (max-width: 768px) {
  body.page-template-page-advertise-php .rules-grid { grid-template-columns: 1fr; gap: 12px; margin-left: -48px; margin-right: -48px; }
  body.page-template-page-advertise-php .rule-card { padding: 24px; }
  body.page-template-page-advertise-php .rule-card h4 { font-size: 20px; line-height: 1.2; margin-bottom: 8px; white-space: nowrap; }
  body.page-template-page-advertise-php .rule-card p { font-size: 16px; line-height: 1.5; color: #6E6E73; text-wrap: pretty; }
  body.page-template-page-advertise-php .rules-grid + p.sub { padding-bottom: 48px; }
}

/* ===== 3.10.398: MERCH PAGE MAKEOVER (relayed spec, Dee-approved via Jarvis's
   recommendations, Oct 20, 2026). Clean tap-target cards, product sheet buy
   flow, pill-format deal prices, compact deals card, navy announcement bar,
   one spacing scale (8/16/24/32/48/64). Nothing above this block is edited;
   these rules win by file order at equal specificity. ===== */

/* Announcement bar: brand navy, distinct from the pure-black header. */
.deal-banner { background: #0B1220; }
.deal-banner:hover { background: #16233C; }

/* Hero rhythm: 40 below the header to the MERCH label, 16 label to headline,
   12 headline to subline (kept), 32 subline to the deals card. */
.shop-hero { padding-top: 40px; }
body.page-template-page-shop-php .marketplace-hero .kicker { margin-bottom: 0; }
.shop-hero h1 { margin-top: 16px; }
.shop-sec { padding-top: 0; padding-bottom: calc(104px + env(safe-area-inset-bottom)); }

/* Deals card, compacted: three tidy rows with hairline dividers on mobile;
   a slim three-offer strip on desktop. Every fact kept, second lines tightened
   in page-shop.php. */
.shop-deals { max-width: 1200px; margin-top: 32px; margin-bottom: 24px; padding: 12px 18px; }
.shop-deals-head { margin-bottom: 6px; }
.shop-deals-row { gap: 0; }
.shop-deal { padding: 7px 0; border-top: 1px solid rgba(255,255,255,.12); }
.shop-deal:first-child { border-top: 0; padding-top: 2px; }
.shop-deal:last-child { padding-bottom: 2px; }
.shop-deal strong { font-size: 15px; line-height: 1.25; }
.shop-deal span { font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
@media (min-width: 769px) {
  .shop-deals { padding: 14px 24px; }
  .shop-deals-row { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .shop-deal { padding: 2px 20px; border-top: 0; border-left: 1px solid rgba(255,255,255,.12); }
  .shop-deal:first-child { border-left: 0; padding-left: 0; }
  .shop-deal:last-child { padding-bottom: 2px; padding-right: 0; }
}

/* Filter row: scrolls to the screen edge on mobile with a soft fade on the
   right edge; 44px pills (kept), 8px gap. Desktop: centered, no fade. */
@media (max-width: 768px) {
  .shop-cats {
    margin-left: -24px; margin-right: -24px; margin-bottom: 0;
    padding: 2px 24px 10px; max-width: none; gap: 8px;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
  }
}
@media (min-width: 769px) {
  .shop-cats { max-width: 1200px; gap: 8px; }
}

/* Grid: 2 columns mobile, 3 at 769-1099, 4 at 1100+, max ~1200 centered. */
.shop-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 1200px; margin-top: 24px; }
@media (min-width: 769px) { .shop-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .shop-grid { grid-template-columns: repeat(4, 1fr); } }

/* Cards: image, name, price. The whole card is the tap target. Uniform height
   per row comes from the grid stretch plus the flex column and a reserved
   two-line name area, so price lines up across neighbors. */
.shop-card { display: flex; flex-direction: column; height: 100%; border-radius: 20px; box-shadow: 0 2px 10px rgba(11,18,32,.04); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.shop-card.soldout { cursor: default; }
.shop-card:active { transform: scale(.98); }
.shop-card:focus-visible { outline: 2px solid #C8102E; outline-offset: 2px; }
.shop-card-img img { padding: 12%; }
.shop-card.soldout .shop-card-img img { opacity: .55; }
.shop-card-soldout-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: #1D1D1F; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.shop-card-body { flex: 1 1 auto; }
.shop-card-name { min-height: 2.6em; }
.shop-card-sale { color: #1D1D1F; font-weight: 700; }
.shop-code-pill { display: inline-block; background: #C8102E; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; vertical-align: 2px; }

/* Newsletter card joins the same 1200 column. Its function is unchanged. */
.shop-mail-card { max-width: 1200px; }

/* Product sheet: bottom sheet on mobile, centered modal at 769px and up.
   Fade plus a small upward rise only. Nothing slides left or right. */
body.shop-sheet-open { overflow: hidden; }
.shop-sheet-root[hidden] { display: none !important; }
.shop-sheet-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(11,18,32,.52); opacity: 0; transition: opacity .25s ease; }
.shop-sheet {
  position: fixed; z-index: 301; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 24px 24px 0 0;
  max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  opacity: 0; transform: translateY(16px);
  transition: opacity .28s ease, transform .28s ease;
}
.shop-sheet-root.is-open .shop-sheet-backdrop { opacity: 1; }
.shop-sheet-root.is-open .shop-sheet { opacity: 1; transform: translateY(0); }
@media (min-width: 769px) {
  .shop-sheet {
    left: 50%; top: 50%; right: auto; bottom: auto;
    width: min(560px, calc(100vw - 48px)); max-height: 88dvh;
    border-radius: 24px; padding: 24px;
    transform: translate(-50%, calc(-50% + 16px));
  }
  .shop-sheet-root.is-open .shop-sheet { transform: translate(-50%, -50%); }
}
.shop-sheet-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid #ECECF0; background: #fff; color: #1D1D1F; font-size: 20px; line-height: 1; cursor: pointer; }
.shop-sheet-close:focus-visible { outline: 2px solid #C8102E; outline-offset: 2px; }
.shop-sheet-img { display: block; aspect-ratio: 1 / 1; background: #F5F5F7; border-radius: 16px; overflow: hidden; }
.shop-sheet-img img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 8%; box-sizing: border-box; mix-blend-mode: multiply; }
.shop-sheet-name { font-size: 20px; font-weight: 700; color: #0B1220; line-height: 1.3; margin-top: 16px; }
.shop-sheet-price { font-size: 16px; color: #6E6E73; margin-top: 6px; }
.shop-sheet-price s { color: #6E6E73; font-weight: 400; }
.shop-sheet-sizelabel { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6E6E73; margin-top: 18px; }
.shop-sheet-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.shop-sheet-size { min-height: 44px; padding: 6px 4px; border-radius: 12px; border: 1px solid #D8D8DE; background: #fff; color: #1D1D1F; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background 200ms ease, color 200ms ease, border-color 200ms ease; }
.shop-sheet-size:hover { border-color: #1D1D1F; }
.shop-sheet-size.active { background: #1D1D1F; border-color: #1D1D1F; color: #fff; }
.shop-sheet-size:disabled { opacity: .35; cursor: not-allowed; }
.shop-sheet-size:focus-visible { outline: 2px solid #C8102E; outline-offset: 2px; }
.shop-sheet-onesize { margin-top: 10px; font-size: 15px; font-weight: 600; color: #1D1D1F; }
.shop-sheet-hint { margin-top: 10px; font-size: 13.5px; color: #6E6E73; }
.shop-sheet-buy { display: flex; width: 100%; min-width: 0; height: 52px; margin-top: 20px; font-size: 16px; }
.shop-sheet-buy.is-disabled { background: #E8E8ED; color: #6E6E73; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .shop-sheet, .shop-sheet-backdrop { transition: none; }
}