/* ============================================================
   TAPPING TAGS — Global Stylesheet
   Mobile-first | Flexbox + Grid | CSS Custom Properties
   Palette sourced from live tappingtags.com Elementor/WoodMart CSS
   ============================================================ */

/* ---- Custom Properties ---- */
:root {
  /* Brand palette — exact values from live site */
  --color-dark-teal:   #00485E;   /* header, dark sections, page-hero */
  --color-primary:     #00AEEF;   /* bright cyan-blue — primary accent */
  --color-primary-mid: #26ABE2;   /* CTA buttons, links */
  --color-accent:      #00AEEF;   /* icon fills, section accents */
  --color-cta:         #26ABE2;   /* buttons */
  --color-cta-hover:   #1a8fc0;   /* button hover */
  --color-gold:        #F4A51C;   /* stars — from live site inline style */
  --color-bg-light:    #EDFAFF;   /* light blue tint sections */
  --color-bg-lighter:  #F2FBFF;   /* alternate light bg */
  --color-bg-dark:     #00485E;   /* dark sections = dark teal */
  --color-text:        #242424;   /* --wd-title-color */
  --color-text-body:   #000000;   /* --wd-text-color */
  --color-text-muted:  #7A7A7A;   /* --e-global-color-text */
  --color-text-light:  #ffffff;
  --color-border:      #E2E2E2;
  --color-success:     #5cb85c;
  --radius:            12px;      /* --wd-brd-radius */
  --radius-btn:        5px;       /* --btn-default-brd-radius */
  --radius-lg:         12px;
  --shadow:            0 4px 20px rgba(0,0,0,.08);
  --shadow-lg:         0 8px 40px rgba(0,0,0,.14);
  --transition:        0.25s ease;
  --max-w:             1140px;    /* --wd-container-w capped at 1140 */
  --header-h:          84px;      /* --wd-header-general-h */

  /* Brand-teal accent set — light-theme hero/header/trust (matches mock) */
  --royal:        #00536B;   /* brand dark teal — buttons, accents, "Just 3 Seconds" */
  --royal-dark:   #00485E;   /* hover / deeper teal */
  --royal-light:  #0a7491;   /* lighter teal */
  --navy:         #0f2350;   /* headings + logo "Tapping" */
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  font-size: 16px;
}
body {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  color: var(--color-text-body);
  line-height: 1.65;
  background: #fff;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-primary); }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ---- Typography ---- */
h1, h2, h3, h4, h5 {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-text);
}
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }
p  { font-size: 1rem; color: var(--color-text-muted); }

/* ---- Layout Utilities ---- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.section { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }
.section-dark { background: #00485E; color: #fff; }
.section-dark p { color: rgba(255,255,255,.8); }
.section-dark h2 { color: #fff; }
.section-light { background: var(--color-bg-light); }

.text-center { text-align: center; }
.text-white  { color: #fff !important; }

.section-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: .5rem;
}
.section-header {
  max-width: 640px;
  margin: 0 auto 3rem;
  text-align: center;
}
.section-header p { margin-top: .75rem; font-size: 1.05rem; }
.section-header h2 span { color: var(--color-primary); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.75rem;
  border-radius: var(--radius-btn);
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
  min-height: 48px;
  line-height: 1;
}
.btn-primary {
  background: var(--color-cta);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(38,171,226,.35);
}
.btn-outline {
  background: transparent;
  color: var(--color-cta);
  border: 2px solid var(--color-cta);
}
.btn-outline:hover {
  background: var(--color-cta);
  color: #fff;
}
.btn-white {
  background: #fff;
  color: var(--color-dark-teal);
  font-weight: 700;
}
.btn-white:hover {
  background: var(--color-bg-light);
  transform: translateY(-2px);
}
.btn-header {
  background: var(--royal);
  color: #fff;
  padding: .7rem 1.4rem;
  border-radius: 8px;
  font-size: .92rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0,72,94,.26);
}
.btn-header:hover { background: var(--royal-dark); color: #fff; transform: translateY(-1px); }

/* Buy on Amazon button */
.btn-buy {
  background: #ff9900;
  color: #111;
  font-weight: 700;
  border-radius: 50px;
  padding: .85rem 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: background var(--transition), transform var(--transition);
  min-height: 48px;
}
.btn-buy:hover { background: #e68900; transform: translateY(-2px); }
.btn-buy .amazon-icon {
  width: 20px;
  height: 20px;
  fill: #111;
  flex-shrink: 0;
}

/* ---- Header (light theme) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  height: var(--header-h);
  border-bottom: 1px solid #eef1f6;
  box-shadow: 0 1px 0 rgba(15,35,80,.04);
  transition: height var(--transition), box-shadow var(--transition);
}
.site-header.scrolled {
  height: 68px;
  box-shadow: 0 4px 16px rgba(15,35,80,.10);
}
.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* original brand logo (recolored for white header) */
.logo-link { display: inline-flex; align-items: center; }
.logo-img { height: 44px; width: auto; }

.main-nav { display: none; }
.nav-list { display: flex; gap: 1.65rem; }
.nav-link {
  position: relative;
  color: #2b3650;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-family: 'Lato', 'Roboto', sans-serif;
  padding: .25rem 0;
  transition: color var(--transition);
}
.nav-link:hover { color: var(--royal); }
.nav-link.active { color: var(--royal); }
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 3px;
  border-radius: 3px;
  background: var(--royal);
}
.btn-lock { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 520px) {
  .header-inner { gap: .6rem; }
  .logo-img { height: 36px; }
  .btn-header { padding: .55rem .85rem; font-size: .8rem; }
  .btn-header .btn-lock { width: 14px; height: 14px; }
}

/* ---- Mobile Menu Toggle ---- */
.mobile-menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
}
.mobile-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: var(--transition);
}
/* Morph the three bars into an X when the menu is open */
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile Nav Overlay ---- */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: #00485E;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: all; }
.mobile-nav-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 2rem;
  color: #fff;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav-list {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.mobile-nav-list li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--transition), transform var(--transition);
}
.mobile-nav-overlay.open .mobile-nav-list li { opacity: 1; transform: translateY(0); }
.mobile-nav-overlay.open .mobile-nav-list li:nth-child(1) { transition-delay: .06s; }
.mobile-nav-overlay.open .mobile-nav-list li:nth-child(2) { transition-delay: .12s; }
.mobile-nav-overlay.open .mobile-nav-list li:nth-child(3) { transition-delay: .18s; }
.mobile-nav-overlay.open .mobile-nav-list li:nth-child(4) { transition-delay: .24s; }
.mobile-nav-overlay.open .mobile-nav-list li:nth-child(5) { transition-delay: .3s; }
.mobile-nav-overlay.open .mobile-nav-list li:nth-child(6) { transition-delay: .36s; }
.mobile-nav-overlay.open .mobile-nav-list li:nth-child(7) { transition-delay: .42s; }
.mobile-nav-overlay.open .mobile-nav-list li:nth-child(8) { transition-delay: .48s; }
.mobile-nav-list a {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: 'Lato', 'Roboto', sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.mobile-nav-list a:hover,
.mobile-nav-list a.active { color: var(--color-primary); }
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-list li { opacity: 1; transform: none; transition: none; }
}

/* ---- Hero (light theme — photographic visual) ---- */
.hero {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  color: var(--navy);
  padding: 2.5rem 0 3.25rem;
}
.hero-bg-blob, .hero-dots { display: none; }

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

/* --- copy column --- */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: #fff;
  border: 1px solid #e6ebf5;
  color: var(--navy);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .5rem 1rem;
  border-radius: 100px;
  box-shadow: 0 6px 18px rgba(15,35,80,.08);
  margin-bottom: 1.4rem;
}
.hero-eyebrow .stars { color: var(--color-gold); letter-spacing: 1px; }
.hero-title {
  color: #0c1422;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}
.hero-title span { color: var(--royal); }
.hero-sub {
  color: #56607a;
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 32rem;
  margin-bottom: 1.5rem;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-bottom: 1.35rem;
}
.btn-lg { padding: .95rem 1.7rem; font-size: 1rem; }
.hero-cta .btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.hero .btn-primary {
  background: var(--royal);
  box-shadow: 0 12px 26px rgba(0,72,94,.28);
}
.hero .btn-primary:hover {
  background: var(--royal-dark);
  box-shadow: 0 16px 30px rgba(0,72,94,.38);
}
.btn-ghost-blue {
  background: #fff;
  color: var(--royal);
  border: 2px solid #cfe0e6;
}
.btn-ghost-blue:hover {
  background: #f1f8fb;
  color: var(--royal-dark);
  border-color: var(--royal);
  transform: translateY(-2px);
}
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
  margin-bottom: 0;
}
.hero-points li {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: #33405c;
  font-size: .84rem;
  font-weight: 600;
  white-space: nowrap;
}
.hero-points li::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--royal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 13px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.hero-proof {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  background: #eef2fb;
  border: 1px solid #e2e8f7;
  border-radius: 14px;
  padding: 1.05rem 1.3rem;
  max-width: 33rem;
}
.hero-proof .hp-stars {
  color: var(--color-gold);
  font-size: 1.05rem;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.hero-proof p {
  margin: 0;
  color: #2c3550;
  font-size: .92rem;
  font-style: italic;
  line-height: 1.45;
}
.hero-proof p span {
  display: block;
  font-style: normal;
  font-size: .8rem;
  color: #8a93a8;
  margin-top: .15rem;
}
.hero-proof .hp-quote {
  position: absolute;
  right: 1rem;
  bottom: -.35rem;
  font-size: 3.4rem;
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  color: rgba(0,83,107,.20);
}

/* --- right-side photographic background + real product cards --- */
.hero-media {
  position: relative;
  width: 100%;
  margin-top: 1.5rem;
  border-radius: 20px;
  overflow: hidden;
  min-height: 320px;
  background: #e7eef2;
}
.hero-cards {
  position: absolute;
  left: 5%;
  top: 56%;
  transform: translateY(-50%) rotate(-4deg);
  width: 42%;
  max-width: 230px;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 18px 26px rgba(10,30,50,.45));
}
.hero-float {
  position: absolute;
  z-index: 3;
  background: #fff;
  color: var(--navy);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,45,60,.22);
}
.hero-float-tap {
  top: 6%;
  right: 5%;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem 1rem;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.hero-float-tap svg { width: 16px; height: 16px; fill: var(--royal); }
.hero-float-rating {
  bottom: 8%;
  left: 5%;
  padding: .8rem 1.05rem;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.hero-float-rating .hfr-stars { color: var(--color-gold); font-size: .9rem; letter-spacing: 1px; }
.hero-float-rating strong { font-size: 1.02rem; color: var(--navy); }
.hero-float-rating .hfr-sub { font-size: .76rem; color: #8a93a8; }

/* --- hero responsive --- */
@media (min-width: 992px) {
  .hero { padding: 0; min-height: 100vh; display: flex; align-items: center; }
  .hero-grid {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    grid-template-columns: none;
    gap: 0;
    width: 100%;
    min-height: 100vh;
  }
  .hero-copy {
    width: 50%;
    max-width: 600px;
    padding: 4.5rem 2.5rem 4.5rem 0;
  }
  .hero-points { flex-wrap: nowrap; }

  /* full 100vh photographic background, bleeds to top / right / bottom edges */
  .hero-media {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: auto;
    width: 50vw;
    margin: 0;
    border-radius: 0;
    min-height: 0;
    z-index: 1;
    background-position: 50% center;
  }
  /* fade the photo's left edge into the white copy side */
  .hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0) 28%);
    pointer-events: none;
  }
  .hero-cards {
    left: 6%;
    top: 60%;
    width: 30%;
    max-width: 215px;
  }
  .hero-float-tap { top: 13%; right: 7%; }
  .hero-float-rating { bottom: 15%; left: 4%; }
}
@media (max-width: 991px) {
  .hero { padding: 2.25rem 0 3rem; display: flex; flex-direction: column; }
  .hero-grid { order: 1; }
  .hero-media { order: 2; }
  .hero-copy { text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta, .hero-points { justify-content: center; }
  .hero-media { margin: 1.75rem auto 0; max-width: 560px; min-height: 320px; }
}
@media (max-width: 420px) {
  .hero-cards { width: 66%; left: 5%; }
  .hero-float-rating { left: 4%; bottom: 6%; }
  .hero-float-tap { right: 4%; }
}

/* ---- Trust Bar (floating white card) ---- */
.trust-bar {
  background: linear-gradient(180deg, #eef4f7 0%, #ffffff 60%);
  padding: 0 0 3rem;
}
.trust-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 0;
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,55,72,.10);
  padding: 2rem 1.5rem;
  margin-top: -2.5rem;
  position: relative;
  z-index: 6;
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .55rem;
  padding: 0 1rem;
}
.trust-ic {
  color: var(--royal);
  display: inline-flex;
}
.trust-ic svg { width: 34px; height: 34px; }
.trust-text .trust-title {
  font-family: 'Lato', 'Roboto', sans-serif;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: normal;
  margin-bottom: .25rem;
}
.trust-text p:not(.trust-title) {
  font-size: .85rem;
  line-height: 1.4;
  color: #7a8499;
}
@media (min-width: 760px) {
  .trust-card {
    grid-template-columns: repeat(5, 1fr);
    padding: 2.25rem 1.25rem;
  }
  .trust-card .trust-item + .trust-item { border-left: 1px solid #eef1f6; }
}

/* legacy inline trust strip (shop.php) — horizontal white card */
.trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .9rem 2.25rem;
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,55,72,.10);
  padding: 1.2rem 1.75rem;
  margin-top: -2.5rem;
  position: relative;
  z-index: 6;
}
.trust-bar-inner .trust-item {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: .5rem;
  padding: 0;
  font-family: 'Lato', 'Roboto', sans-serif;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--navy);
}

/* ---- Product Cards (Shop / Home) ---- */
.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
.product-card {
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,55,72,.06);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
  position: relative;
}
.product-card:hover {
  box-shadow: 0 26px 54px rgba(0,55,72,.16);
  transform: translateY(-6px);
  border-color: #d9e6ec;
}
.product-card-image {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 70% at 50% 38%, #f1f8fb 0%, #e4eef3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card-image a { display: block; width: 100%; height: 100%; position: relative; }
.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease, opacity var(--transition);
}
.product-card:hover .product-card-image img { transform: scale(1.06); }
.product-card-img-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.product-card:hover .product-card-img-base { opacity: 0; }
.product-card:hover .product-card-img-hover { opacity: 1; }
.product-card-highlight {
  box-shadow: 0 0 0 3px var(--color-primary), 0 26px 54px rgba(0,55,72,.16) !important;
  border-color: var(--color-primary) !important;
}
.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #ef4444;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: .35rem .7rem;
  border-radius: 100px;
  box-shadow: 0 6px 16px rgba(239,68,68,.35);
  z-index: 1;
}
.product-card-body { padding: 1.5rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.product-card-title {
  font-family: 'Roboto', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .55rem;
  line-height: 1.3;
}
.product-card-title a { color: inherit; transition: color var(--transition); }
.product-card-title a:hover { color: var(--color-primary); }
.usecase-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(0,174,239,.12);
  border: 1px solid rgba(0,174,239,.30);
  padding: .25rem .6rem;
  border-radius: 100px;
  margin-bottom: .75rem;
}
.product-stars { color: #F4A51C; font-size: .9rem; margin-bottom: .65rem; letter-spacing: 1px; }
.product-stars span { color: var(--color-text-muted); font-size: .8rem; margin-left: .35rem; letter-spacing: 0; }
.product-price {
  margin-bottom: 1.25rem;
  display: flex;
  align-items: baseline;
  gap: .55rem;
}
.product-price .price-current { font-size: 1.55rem; font-weight: 800; color: var(--navy); font-family: 'Roboto', sans-serif; }
.product-price .price-old { font-size: .95rem; color: var(--color-text-muted); text-decoration: line-through; }
.product-card-body .btn-buy { margin-top: auto; width: 100%; justify-content: center; }

/* ---- How It Works ---- */
.how-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  counter-reset: steps;
}
.how-step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.step-number {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
}
.step-body h3 { margin-bottom: .4rem; color: var(--color-text); }
.step-body p { font-size: .95rem; }

/* ---- Features / Benefits ---- */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.feature-card {
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 16px;
  padding: 2rem 1.75rem;
  box-shadow: 0 8px 24px rgba(0,55,72,.05);
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--royal-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.feature-card:hover {
  box-shadow: 0 22px 44px rgba(0,55,72,.12);
  transform: translateY(-5px);
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--color-primary) 0%, #0a6f8c 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.15rem;
  box-shadow: 0 12px 22px rgba(0,174,239,.28);
}
.feature-icon svg { width: 28px; height: 28px; fill: #fff; stroke: #fff; }
.feature-card h3 { font-size: 1.1rem; margin-bottom: .5rem; color: var(--navy); }
.feature-card p { font-size: .92rem; }
.feature-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .85rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-primary);
  transition: gap var(--transition);
}
.feature-link:hover { gap: .5rem; }
.feature-link::after { content: "\2192"; }

/* ---- Reviews / Testimonials ---- */
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.review-card {
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 16px;
  padding: 1.6rem;
  box-shadow: 0 10px 30px rgba(0,55,72,.06);
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
}
.review-card:hover {
  box-shadow: 0 22px 44px rgba(0,55,72,.13);
  transform: translateY(-4px);
}
.review-header {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .9rem;
}
.review-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #eef3f6;
}
.review-meta { flex: 1; min-width: 0; }
.review-meta h4 { font-size: .98rem; font-weight: 600; margin-bottom: .12rem; color: var(--navy); }
.review-meta .review-date { font-size: .74rem; color: var(--color-text-muted); }
.review-verified {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .2rem;
  margin-top: .25rem;
  font-size: .7rem;
  font-weight: 700;
  color: var(--color-success);
}
.review-google { flex-shrink: 0; display: inline-flex; }
.review-google svg { width: 22px; height: 22px; }
.review-stars { color: #F4A51C; font-size: .95rem; letter-spacing: 1px; margin-bottom: .7rem; }
.review-card p { font-size: .92rem; font-style: italic; color: #3a445c; line-height: 1.55; }
.review-product-tag {
  display: inline-block;
  margin-top: .85rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--royal);
  background: rgba(0,83,107,.07);
  padding: .3rem .7rem;
  border-radius: 100px;
}

/* ---- Rating Bar ---- */
.rating-summary {
  background: var(--color-bg-light);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.rating-big {
  text-align: center;
}
.rating-big .score { font-size: 4rem; font-weight: 800; font-family: 'Roboto', sans-serif; color: var(--color-text); line-height: 1; }
.rating-big .stars { color: var(--color-gold); font-size: 1.5rem; margin: .25rem 0; }
.rating-big .count { font-size: .9rem; color: var(--color-text-muted); }
.rating-bars { flex: 1; }
.rating-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .4rem;
  font-size: .85rem;
}
.rating-row .label { width: 40px; text-align: right; color: var(--color-text-muted); }
.rating-row .bar-track { flex: 1; height: 8px; background: var(--color-border); border-radius: 4px; overflow: hidden; }
.rating-row .bar-fill { height: 100%; background: var(--color-gold); border-radius: 4px; transition: width 1s ease-out; }
.rating-row .pct { width: 36px; font-size: .78rem; color: var(--color-text-muted); }
.rating-source-note {
  flex-basis: 100%;
  text-align: center;
  font-size: .8rem;
  color: var(--color-text-muted);
  margin: 0;
}
.reviews-footnote {
  text-align: center;
  font-size: .85rem;
  color: var(--color-text-muted);
  margin-top: 2rem;
}

/* ---- FAQ ---- */
.faq-group { margin-top: 2.75rem; }
.faq-group:first-child { margin-top: 0; }
.faq-group-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark-teal);
  margin-bottom: .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
/* Reused trust bar (see shop.php) placed mid-page inside the FAQ list - cancel
   the legacy hero-overlap negative margin so it sits inline instead. */
.faq-trust-bar { margin-top: 2.75rem; }
.faq-trust-bar .trust-bar-inner { margin-top: 0; }
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: .25rem 0;
}
.faq-question {
  width: 100%;
  text-align: left;
  padding: 1.1rem .25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  transition: color var(--transition);
  min-height: 44px;
}
.faq-q-heading { margin: 0; }
.faq-question:hover { color: var(--color-primary); }
.faq-question h3 { font: inherit; color: inherit; margin: 0; }
.faq-question h4 { margin: 0; font: inherit; color: inherit; }
.faq-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: transform var(--transition), background var(--transition);
  color: var(--color-primary);
}
/* All FAQ answers are open by default site-wide (never hidden behind a click) -
   Google and AI answer engines can't read collapsed accordion content. The
   icon still gets a brief pulse on click as a small interactive touch. */
.faq-answer {
  overflow: visible;
  max-height: none;
  padding: 0 .25rem 1.1rem;
}
.faq-answer p { font-size: .95rem; }
.faq-icon.pulse { transform: scale(1.25); background: var(--color-primary); color: #fff; }

/* ---- Contact ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
.contact-info h2 { margin-bottom: 1rem; }
.contact-info p { margin-bottom: 1.5rem; font-size: 1rem; }
.contact-detail {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  font-size: .95rem;
}
.contact-detail svg { width: 20px; height: 20px; fill: var(--color-primary); flex-shrink: 0; }
.contact-detail a:hover { color: var(--color-accent); }
.contact-form { background: var(--color-bg-light); border-radius: var(--radius-lg); padding: 2rem; }
.contact-form h3 { margin-bottom: 1.5rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: .95rem;
  transition: border-color var(--transition);
  background: #fff;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-group input.is-invalid,
.form-group textarea.is-invalid { border-color: #ef4444; }
.field-error { color: #ef4444; }

.form-status.is-success { background: #dcfce7; color: #16a34a; }
.form-status.is-error   { background: #fee2e2; color: #ef4444; }

.btn.is-loading { opacity: .7; pointer-events: none; }

/* Contact page: phone link becomes a full tap-target button on mobile only */
@media (max-width: 767px) {
  .contact-phone-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 1.75rem;
    min-height: 48px;
    border-radius: var(--radius-btn);
    background: var(--color-cta);
    color: #fff;
    font-weight: 600;
    line-height: 1;
  }
  .contact-phone-cta:hover { background: var(--color-cta-hover); }
}

/* ---- Product Detail Page ---- */
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
.product-gallery { position: relative; }
.gallery-main {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-light);
  margin-bottom: 1rem;
  aspect-ratio: 1/1;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.gallery-thumbs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.gallery-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--color-border);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition);
  background: var(--color-bg-light);
}
.gallery-thumb.active, .gallery-thumb:hover { border-color: var(--color-primary); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-info h1 { margin-bottom: .75rem; }
.product-info .product-stars { font-size: 1rem; margin-bottom: 1rem; }
.product-price-detail { margin-bottom: 1.5rem; }
.product-price-detail .price-current { font-size: 2.2rem; font-weight: 800; font-family: 'Roboto', sans-serif; }
.product-price-detail .price-old { font-size: 1.1rem; color: var(--color-text-muted); text-decoration: line-through; margin-left: .5rem; }
.product-price-detail .savings-tag { display: inline-block; margin-left: .5rem; background: #dcfce7; color: #16a34a; font-size: .8rem; font-weight: 700; padding: .2rem .6rem; border-radius: var(--radius-btn); }
.variant-selector { margin-bottom: 1.5rem; }
.variant-selector label { font-size: .9rem; font-weight: 600; display: block; margin-bottom: .6rem; }
.variant-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.variant-btn {
  padding: .5rem 1.1rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-text);
  transition: border-color var(--transition), background var(--transition);
  min-height: 44px;
  background: #fff;
}
.variant-btn:hover, .variant-btn.active {
  border-color: var(--color-primary);
  background: rgba(0,174,239,.06);
  color: var(--color-primary);
}
.shop-filter { text-align: center; margin-bottom: 2.5rem; }
.shop-filter-label { font-weight: 600; margin-bottom: .75rem; }
.shop-filter .variant-options { justify-content: center; }
.product-cta-wrap { margin-bottom: 2rem; }
.product-cta-wrap .btn-buy { width: 100%; justify-content: center; font-size: 1.1rem; padding: 1rem; }
.product-guarantees {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.guarantee-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 500;
}
.guarantee-item svg { width: 18px; height: 18px; fill: var(--color-success); }
.product-tabs { margin-top: 3rem; }
.tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--color-border); margin-bottom: 2rem; overflow-x: auto; }
.tab-btn {
  padding: .85rem 1.5rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition), border-color var(--transition);
  min-height: 44px;
}
.tab-btn.active, .tab-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel p { margin-bottom: 1rem; font-size: .95rem; }
.tab-panel ul { list-style: disc; padding-left: 1.5rem; }
.tab-panel ul li { margin-bottom: .5rem; font-size: .95rem; color: var(--color-text-muted); }

/* ---- Blog ---- */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.blog-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.blog-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: var(--color-primary); }
.blog-card-body { padding: 1.5rem; }
.blog-date { font-size: .8rem; color: var(--color-text-muted); margin-bottom: .5rem; }
.blog-card-title { font-size: 1.1rem; font-family: 'Roboto', sans-serif; font-weight: 600; margin-bottom: .6rem; }
.blog-card-title a:hover { color: var(--color-primary); }
.blog-card p { font-size: .9rem; margin-bottom: 1rem; }
.blog-card .read-more { color: var(--color-primary); font-weight: 600; font-size: .875rem; }
.blog-card .read-more:hover { text-decoration: underline; }

/* ---- Blog card meta (date + read time + badges) ---- */
.blog-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.blog-card-meta .blog-date { margin-bottom: 0; }
.post-badge-new {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(0,174,239,.12);
  border: 1px solid rgba(0,174,239,.30);
  padding: .25rem .6rem;
  border-radius: 100px;
}
.post-category {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--color-text-muted);
  background: var(--color-border);
  padding: .25rem .6rem;
  border-radius: 100px;
}

/* ---- Blog filter bar (reuses .tab-nav / .tab-btn) ---- */
.blog-filter-bar { margin-bottom: 2.5rem; }

/* ---- Blog closing CTA line ---- */
.blog-cta {
  text-align: center;
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--color-border);
}
.blog-cta p { font-size: 1.05rem; font-weight: 600; color: var(--color-text); margin-bottom: 1.25rem; }

/* Blog post full */
.blog-post-content { max-width: 760px; margin: 0 auto; }
.blog-post-content h2 { margin: 2rem 0 .75rem; scroll-margin-top: calc(var(--header-h) + 16px); }
.blog-post-content h3 { margin: 1.5rem 0 .5rem; }
.blog-post-content p { margin-bottom: 1.1rem; font-size: 1rem; }
.blog-post-content ul { list-style: disc; padding-left: 48px; margin-bottom: 1rem; }
.blog-post-content ul li { margin-bottom: .4rem; font-size: .95rem; color: var(--color-text-muted); }
.blog-meta { display: flex; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.blog-meta span { font-size: .85rem; color: var(--color-text-muted); }
.blog-author-bio { font-size: .85rem; color: var(--color-text-muted); margin-top: -1.25rem; margin-bottom: 2rem; }

/* ---- Blog post body: "Maximizing the Impact" mini-cards (page-scoped, reuses .feature-card) ---- */
.blog-post-content .maximize-grid { margin: 1.25rem 0 1.5rem; }
.blog-post-content .maximize-grid .feature-icon svg { fill: none; }
.blog-post-content .maximize-grid .feature-card h3 { margin-top: 0; }
.blog-post-content .maximize-grid .feature-card p { font-size: .92rem; margin-bottom: 0; }
@media (min-width: 768px) {
  .blog-post-content .maximize-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Blog post body: inline stat callout, reuses .stat-item/.stat-number on a light background.
   .stat-number already renders in var(--color-primary), which works fine on light backgrounds.
   Only .stat-label needs an override here (it's white by default for dark sections elsewhere). ---- */
.stat-callout { text-align: center; margin: 0 0 2rem; }
.stat-callout .stat-label { color: var(--color-text-muted); }

/* ---- Blog post body: "Keep Reading" related-posts module (page-scoped, reuses .blog-card) ---- */
.blog-post-content .keep-reading-grid { margin: 1.25rem 0 1.5rem; }
.blog-post-content .keep-reading-grid .blog-card-title { margin-top: 0; }
.blog-post-content .keep-reading-grid .blog-card p { font-size: .9rem; margin-bottom: 1rem; }

/* ---- In-article jump links + content bullet lists (48px indent) ---- */
.content-list-wrap {
  background: var(--color-bg-light);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.content-list-wrap p { margin-bottom: .5rem; font-size: .95rem; }
.blog-post-content ul.content-list { padding-left: 48px; margin-bottom: 1rem; }
.content-list li { margin-bottom: .4rem; font-size: .95rem; }
.content-list-wrap .content-list li a { color: var(--color-text-muted); }
.content-list-wrap .content-list li a:hover,
.content-list-wrap .content-list li a.active { color: var(--color-primary); font-weight: 700; }

/* ---- Blog post body: insight callout, same left-accent-border formula as
   .blog-pull-quote (teal accent instead of primary since there is no quote
   mark here, just a highlighted takeaway line). ---- */
.blog-post-content .insight-box { background: var(--color-bg-light); border-left: 4px solid var(--royal); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
.blog-post-content .insight-box p { margin-bottom: 0; font-size: 1rem; }

/* ---- Blog post body: "Common Questions" box. Always-open Q&A (H3 + plain
   <p>, no button/accordion) per the site's standing FAQ rule; only the
   visual divider borrows from .faq-item's border-bottom rhythm. ---- */
.blog-post-content .qa-box { background: var(--color-bg-light); border-radius: var(--radius); padding: 1.75rem 1.75rem 1.5rem; margin: 1.5rem 0 2rem; }
.blog-post-content .qa-item { border-bottom: 1px solid var(--color-border); padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
.blog-post-content .qa-item h3 { margin-top: 0; margin-bottom: .4rem; }
.blog-post-content .qa-item p { margin-bottom: 0; font-size: .95rem; color: var(--color-text-muted); }

/* ---- Blog post body: "Jump to" quick-nav chip row (page-scoped, reuses the
   .review-product-tag rounded-chip formula for consistency). ---- */
.blog-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
}
.blog-jump-nav a {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--royal);
  background: rgba(0,83,107,.07);
  padding: .35rem .85rem;
  border-radius: 100px;
  transition: background var(--transition), color var(--transition);
}
.blog-jump-nav a:hover { background: var(--color-primary); color: #fff; }

/* ---- Blog post: mobile-only sticky bottom CTA bar (page-scoped to
   how-to-collect-reviews-with-nfc-technology.php via .blog-sticky-cta;
   pushes the shared .back-to-top button up so the two never overlap). ---- */
.blog-sticky-cta { display: none; }
@media (max-width: 767px) {
  .blog-sticky-cta {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 940;
    background: #fff;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 20px rgba(0,0,0,.1);
    padding: .75rem 1rem;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  }
  .blog-sticky-cta .btn { width: 100%; max-width: 360px; justify-content: center; }
  .blog-sticky-cta ~ #back-to-top { bottom: 5.5rem; }
}

/* ---- Inline stat callout (blog articles) ---- */
.inline-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--color-bg-light);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.inline-stat-number { font-size: 2rem; font-weight: 800; font-family: 'Roboto', sans-serif; color: var(--color-primary); line-height: 1; flex-shrink: 0; }
.inline-stat-text { font-size: .95rem; color: var(--color-text-muted); }
.inline-stat-text a { color: var(--color-primary); font-weight: 600; }

/* ---- Blog post body: pull-quote box (reuses .review-card's white-card
   visual language: same border, radius, shadow, italic body copy) with a
   4px left accent border added to read as a quote, not a review. ---- */
.blog-pull-quote {
  background: #fff;
  border: 1px solid #eef1f6;
  border-left: 4px solid var(--color-primary);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0;
  box-shadow: 0 10px 30px rgba(0,55,72,.06);
}
.blog-pull-quote p { font-size: 1.05rem; font-style: italic; color: #3a445c; line-height: 1.55; margin-bottom: 0; }

/* ---- Blog post body: "By the Numbers" stat row, light-background variant
   of .stats-row (same 2.8rem/800/Roboto number treatment and --color-primary
   number color) boxed like .inline-stat/.content-list-wrap since blog posts
   sit on a white background, not the dark section .stats-row was built for. ---- */
.blog-stat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 4rem;
  background: var(--color-bg-light);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  margin: 0 0 1.5rem;
}
.blog-stat-item { text-align: center; }
.blog-stat-number { display: block; font-size: 2.8rem; font-weight: 800; font-family: 'Roboto', sans-serif; color: var(--color-primary); line-height: 1; }
.blog-stat-label { font-size: .85rem; color: var(--color-text-muted); margin-top: .35rem; display: block; }

/* ---- Policy Pages ---- */
.policy-content { max-width: 800px; margin: 0 auto; }
.policy-content h2 { margin: 2rem 0 .75rem; scroll-margin-top: calc(var(--header-h) + 20px); }
.policy-content h2:first-child { margin-top: 0; }
.policy-content h3 { margin: 1.25rem 0 .5rem; }
.policy-content p { margin-bottom: 1rem; font-size: .95rem; }
.policy-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.policy-content ul li { margin-bottom: .4rem; font-size: .95rem; color: var(--color-text-muted); }

/* Small section icon in front of each H2 (refunds-policy.php).
   Reuses the .feature-icon gradient-circle language at a smaller size. */
.policy-content h2 { display: flex; align-items: center; gap: .75rem; }
.policy-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, #0a6f8c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(0,174,239,.28);
}
.policy-icon svg { width: 18px; height: 18px; }

/* Freshness note under the "Last updated" line in the page hero */
.page-hero .hero-freshness-note { font-size: .85rem; color: rgba(255,255,255,.65); max-width: 520px; margin: .4rem auto 0; }

/* Shared link style so policy links aren't color-only (WCAG 1.4.1) */
.policy-link { color: var(--color-primary); text-decoration: underline; }
.policy-link:hover { color: var(--color-cta-hover); }

/* Small "copy link" marker shown on H2 hover, scoped to policy pages */
.policy-content h2 { position: relative; }
.policy-anchor {
  opacity: 0;
  margin-left: .4rem;
  font-weight: 400;
  font-size: .8em;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: opacity var(--transition);
}
.policy-content h2:hover .policy-anchor,
.policy-anchor:focus { opacity: 1; }

/* Scoped to privacy-policy.php only: darker body text for contrast (AA)
   and the site-wide 48px bullet indent standard. Other legal pages keep
   the shared .policy-content rule above untouched. */
.policy-content--dark-body p,
.policy-content--dark-body ul li { color: var(--color-text); }
.policy-content--dark-body ul { padding-left: 48px; }

/* Table-of-contents layout (privacy-policy.php only). Mobile-first:
   a horizontally scrollable pill row above the content. */
.policy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  max-width: 1040px;
  margin: 0 auto;
}
.policy-toc { min-width: 0; }
.policy-toc ul {
  list-style: none;
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  margin: 0;
  padding: 0 1.25rem 0 0;
  scrollbar-width: thin;
}
.policy-toc li { flex-shrink: 0; }
.policy-toc a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: .85rem;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: .4rem .9rem;
  transition: color var(--transition), border-color var(--transition);
}
.policy-toc a:hover,
.policy-toc a.active { color: var(--color-primary); border-color: var(--color-primary); }

/* Horizontally-scrolling pill strips (FAQ category tabs, policy TOC) need a
   visible "there's more" hint on narrow screens, since overflow-x:auto alone
   gives no cue that a strip scrolls. A right-edge fade does that without any
   JS or markup change - it stays pinned to the strip's own box, not its
   scrolled content. */
@media (max-width: 640px) {
  .tab-nav,
  .policy-toc ul {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
}

/* ---- Stats ---- */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 4rem;
}
.stat-item { text-align: center; }
.stat-number {
  display: block;
  font-size: 2.8rem;
  font-weight: 800;
  font-family: 'Roboto', sans-serif;
  color: var(--color-primary);
  line-height: 1;
}
.stat-label { font-size: .85rem; color: rgba(255,255,255,.8); margin-top: .35rem; display: block; }

/* ---- CTA Band ---- */
.cta-band {
  background: linear-gradient(135deg, #00485E 0%, #006080 100%);
  padding: 4rem 0;
  text-align: center;
  color: #fff;
}
.cta-band .container { padding-left: 1.5rem; padding-right: 1.5rem; }
.cta-band h2 { color: #fff; margin-bottom: 1rem; word-break: break-word; }
.cta-band p { color: rgba(255,255,255,.85); font-size: 1.1rem; margin-bottom: 2rem; }

/* ---- Animations ---- */
@media (prefers-reduced-motion: no-preference) {
  .anim {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .anim.in-view {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Section light bg — exact live site value ---- */
.section-light { background: #EDFAFF !important; }

/* ---- Page Hero (inner pages) ---- */
.page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 85% at 82% 0%, rgba(0,174,239,.30), transparent 60%),
    radial-gradient(ellipse 40% 70% at 10% 100%, rgba(0,174,239,.16), transparent 60%),
    linear-gradient(135deg, #00536B 0%, #00485E 55%, #013642 100%);
  color: #fff;
  padding: 4.25rem 0 3.75rem;
  text-align: center;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  opacity: .5;
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .breadcrumb { justify-content: center; }
.page-eyebrow {
  display: inline-block;
  font-family: 'Lato', 'Roboto', sans-serif;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(0,174,239,.12);
  border: 1px solid rgba(0,174,239,.30);
  padding: .4rem .9rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; }
.page-hero h1 span { color: var(--color-primary); }
.page-hero p { color: rgba(255,255,255,.85); max-width: 620px; margin: .9rem auto 0; font-size: 1.1rem; }

/* ---- Page Hero Variants (one unique look per inner page) ---- */
/* How this works: keep the normal class="page-hero" and add one more class,
   like class="page-hero page-hero--faq". The extra class changes the
   background gradient and adds one faint corner icon. Nothing else changes.
   The icon is a small SVG picture baked into the CSS background, so no HTML
   edit is needed beyond adding the class. Every icon stays very faint
   (8 percent opacity) so it never fights the white heading text. Every
   gradient still ends on a dark teal or navy stop on the side where the
   text sits, so white text stays easy to read on all pages. */

/* Shop page: price tag icon, bottom right */
.page-hero--shop {
  background:
    radial-gradient(ellipse 50% 75% at 100% 100%, rgba(38,171,226,.20), transparent 60%),
    linear-gradient(118deg, var(--royal) 0%, var(--royal-dark) 50%, #013642 100%);
}
.page-hero--shop::before {
  content: "";
  position: absolute;
  bottom: 1.25rem;
  right: 1.5rem;
  width: 150px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M12 46 L46 12 L88 12 L88 54 L54 88 Z' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='70' cy='30' r='8' fill='none' stroke='%23FFFFFF' stroke-width='6'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* About page: two overlapping people circles (team), top left */
.page-hero--about {
  background:
    radial-gradient(ellipse 50% 75% at 0% 0%, rgba(0,174,239,.22), transparent 60%),
    linear-gradient(96deg, var(--royal-light) 0%, var(--royal) 45%, var(--royal-dark) 100%);
}
.page-hero--about::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  width: 160px;
  height: 130px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='38' cy='34' r='16' fill='none' stroke='%23FFFFFF' stroke-width='6'/%3E%3Ccircle cx='62' cy='34' r='16' fill='none' stroke='%23FFFFFF' stroke-width='6'/%3E%3Cpath d='M14 88 C14 66 26 56 38 56 C50 56 62 66 62 88' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M38 88 C38 66 50 56 62 56 C74 56 86 66 86 88' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* FAQ page: big question mark, top right */
.page-hero--faq {
  background:
    radial-gradient(ellipse 50% 75% at 100% 0%, rgba(38,171,226,.20), transparent 60%),
    linear-gradient(150deg, var(--royal) 0%, var(--navy) 55%, var(--royal-dark) 100%);
}
.page-hero--faq::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  width: 140px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M28 34 C28 18 42 10 54 10 C68 10 80 18 80 32 C80 46 66 48 60 58 C56 65 56 70 56 74' fill='none' stroke='%23FFFFFF' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='56' cy='90' r='6' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Reviews page: 5 point star with a small quote mark under it, top right */
.page-hero--reviews {
  background:
    radial-gradient(ellipse 50% 75% at 100% 0%, rgba(0,174,239,.22), transparent 60%),
    linear-gradient(128deg, var(--royal-dark) 0%, var(--royal) 60%, var(--royal-light) 100%);
}
.page-hero--reviews::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  width: 150px;
  height: 180px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath d='M50 8 L61 34 L90 36 L67 54 L75 82 L50 66 L25 82 L33 54 L10 36 L39 34 Z' fill='none' stroke='%23FFFFFF' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M30 98 C30 104 26 108 22 110 M46 98 C46 104 42 108 38 110' fill='none' stroke='%23FFFFFF' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Contact page: chat bubble, bottom left */
.page-hero--contact {
  background:
    radial-gradient(ellipse 50% 75% at 0% 100%, rgba(38,171,226,.20), transparent 60%),
    linear-gradient(108deg, var(--royal) 0%, var(--royal-dark) 50%, #013642 100%);
}
.page-hero--contact::before {
  content: "";
  position: absolute;
  bottom: 1.25rem;
  left: 1.5rem;
  width: 160px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14 20 H86 A6 6 0 0 1 92 26 V64 A6 6 0 0 1 86 70 H40 L22 88 V70 H14 A6 6 0 0 1 8 64 V26 A6 6 0 0 1 14 20 Z' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Blog index page: pen nib writing icon, top right */
.page-hero--blog-index {
  background:
    radial-gradient(ellipse 50% 75% at 100% 0%, rgba(0,174,239,.22), transparent 60%),
    linear-gradient(138deg, var(--royal) 0%, var(--royal-dark) 38%, #013642 100%);
}
.page-hero--blog-index::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  width: 150px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 80 L64 36 L78 50 L34 94 L16 94 Z' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M64 36 L78 22 L92 36 L78 50' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linejoin='round'/%3E%3Cline x1='20' y1='80' x2='34' y2='94' stroke='%23FFFFFF' stroke-width='6'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Privacy policy page: shield, top right */
.page-hero--privacy-policy {
  background:
    radial-gradient(ellipse 50% 75% at 100% 0%, rgba(38,171,226,.20), transparent 60%),
    linear-gradient(160deg, var(--royal-dark) 0%, var(--navy) 55%, #013642 100%);
}
.page-hero--privacy-policy::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  width: 140px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L86 22 V50 C86 72 70 88 50 96 C30 88 14 72 14 50 V22 Z' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Refunds policy page: circular return arrow, bottom right */
.page-hero--refunds-policy {
  background:
    radial-gradient(ellipse 50% 75% at 100% 100%, rgba(0,174,239,.22), transparent 60%),
    linear-gradient(172deg, var(--royal) 0%, var(--royal-dark) 50%, var(--navy) 100%);
}
.page-hero--refunds-policy::before {
  content: "";
  position: absolute;
  bottom: 1.25rem;
  right: 1.5rem;
  width: 140px;
  height: 140px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M78 30 A38 38 0 1 1 34 16' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M34 4 L34 20 L18 20 Z' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Terms of service page: document with checklist lines, top left */
.page-hero--terms-of-service {
  background:
    radial-gradient(ellipse 50% 75% at 0% 0%, rgba(38,171,226,.20), transparent 60%),
    linear-gradient(142deg, var(--navy) 0%, var(--royal-dark) 45%, var(--royal) 100%);
}
.page-hero--terms-of-service::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  width: 130px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M24 6 H64 L80 22 V94 H24 Z' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M64 6 V22 H80' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linejoin='round'/%3E%3Cline x1='34' y1='42' x2='70' y2='42' stroke='%23FFFFFF' stroke-width='5' stroke-linecap='round'/%3E%3Cline x1='34' y1='58' x2='70' y2='58' stroke='%23FFFFFF' stroke-width='5' stroke-linecap='round'/%3E%3Cline x1='34' y1='74' x2='58' y2='74' stroke='%23FFFFFF' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Shipping policy page: shipping box, bottom right */
.page-hero--shipping-policy {
  background:
    radial-gradient(ellipse 50% 75% at 100% 100%, rgba(0,174,239,.22), transparent 60%),
    linear-gradient(114deg, var(--royal-dark) 0%, var(--royal) 55%, var(--royal-light) 100%);
}
.page-hero--shipping-policy::before {
  content: "";
  position: absolute;
  bottom: 1.25rem;
  right: 1.5rem;
  width: 160px;
  height: 140px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 30 L50 12 L90 30 L50 48 Z' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M10 30 V72 L50 90 V48' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M90 30 V72 L50 90' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Blog: Boost Business post, growth arrow over 3 bars, top right */
.page-hero--blog-boost-business {
  background:
    radial-gradient(ellipse 50% 75% at 100% 0%, rgba(38,171,226,.20), transparent 60%),
    linear-gradient(104deg, var(--royal) 0%, var(--royal-dark) 50%, #013642 100%);
}
.page-hero--blog-boost-business::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  width: 160px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='14' y='66' width='14' height='24' fill='none' stroke='%23FFFFFF' stroke-width='5'/%3E%3Crect x='40' y='50' width='14' height='40' fill='none' stroke='%23FFFFFF' stroke-width='5'/%3E%3Crect x='66' y='30' width='14' height='60' fill='none' stroke='%23FFFFFF' stroke-width='5'/%3E%3Cpath d='M14 40 L46 16 L88 24' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M72 12 L90 22 L78 38' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Blog: Enhance Engagement post, pulse line, bottom left */
.page-hero--blog-enhance-engagement {
  background:
    radial-gradient(ellipse 50% 75% at 0% 100%, rgba(0,174,239,.22), transparent 60%),
    linear-gradient(156deg, var(--royal-light) 0%, var(--royal) 45%, var(--royal-dark) 100%);
}
.page-hero--blog-enhance-engagement::before {
  content: "";
  position: absolute;
  bottom: 1.25rem;
  left: 1.5rem;
  width: 170px;
  height: 140px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M4 50 H30 L40 22 L56 78 L66 50 H96' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Blog: Improve Experience post, smiley face, top right */
.page-hero--blog-improve-experience {
  background:
    radial-gradient(ellipse 50% 75% at 100% 0%, rgba(38,171,226,.20), transparent 60%),
    linear-gradient(122deg, var(--royal-dark) 0%, var(--royal-light) 50%, var(--royal) 100%);
}
.page-hero--blog-improve-experience::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  width: 150px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%23FFFFFF' stroke-width='6'/%3E%3Ccircle cx='36' cy='42' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='64' cy='42' r='5' fill='%23FFFFFF'/%3E%3Cpath d='M32 62 C40 74 60 74 68 62' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Blog: Collect Reviews post, 3 small stars in a basket, bottom right */
.page-hero--blog-collect-reviews {
  background:
    radial-gradient(ellipse 50% 75% at 100% 100%, rgba(0,174,239,.22), transparent 60%),
    linear-gradient(168deg, var(--royal) 0%, var(--royal-dark) 55%, #013642 100%);
}
.page-hero--blog-collect-reviews::before {
  content: "";
  position: absolute;
  bottom: 1.25rem;
  right: 1.5rem;
  width: 150px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M16 46 H84 L74 88 H26 Z' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M16 46 C16 30 30 22 50 22 C70 22 84 30 84 46' fill='none' stroke='%23FFFFFF' stroke-width='6'/%3E%3Cpath d='M32 8 L34 14 L40 14 L35 18 L37 24 L32 20 L27 24 L29 18 L24 14 L30 14 Z' fill='%23FFFFFF'/%3E%3Cpath d='M50 2 L52 8 L58 8 L53 12 L55 18 L50 14 L45 18 L47 12 L42 8 L48 8 Z' fill='%23FFFFFF'/%3E%3Cpath d='M68 8 L70 14 L76 14 L71 18 L73 24 L68 20 L63 24 L65 18 L60 14 L66 14 Z' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Blog: Instant Reviews post, lightning bolt, top left */
.page-hero--blog-instant-reviews {
  background:
    radial-gradient(ellipse 50% 75% at 0% 0%, rgba(38,171,226,.20), transparent 60%),
    linear-gradient(92deg, var(--royal-light) 0%, var(--royal) 45%, var(--royal-dark) 100%);
}
.page-hero--blog-instant-reviews::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  width: 120px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M56 4 L20 56 H44 L38 96 L82 40 H58 Z' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Blog: Local SEO post, map pin, top right */
.page-hero--blog-local-seo {
  background:
    radial-gradient(ellipse 50% 75% at 100% 0%, rgba(0,174,239,.22), transparent 60%),
    linear-gradient(146deg, var(--royal-dark) 0%, var(--navy) 50%, var(--royal) 100%);
}
.page-hero--blog-local-seo::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  width: 140px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 C28 6 12 22 12 44 C12 72 50 94 50 94 C50 94 88 72 88 44 C88 22 72 6 50 6 Z' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linejoin='round'/%3E%3Ccircle cx='50' cy='42' r='14' fill='none' stroke='%23FFFFFF' stroke-width='6'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Blog: Online Reputation post, globe with grid lines, bottom left */
.page-hero--blog-online-reputation {
  background:
    radial-gradient(ellipse 50% 75% at 0% 100%, rgba(38,171,226,.20), transparent 60%),
    linear-gradient(132deg, var(--royal) 0%, var(--royal-light) 55%, var(--royal-dark) 100%);
}
.page-hero--blog-online-reputation::before {
  content: "";
  position: absolute;
  bottom: 1.25rem;
  left: 1.5rem;
  width: 150px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='42' fill='none' stroke='%23FFFFFF' stroke-width='6'/%3E%3Cellipse cx='50' cy='50' rx='18' ry='42' fill='none' stroke='%23FFFFFF' stroke-width='5'/%3E%3Cline x1='8' y1='50' x2='92' y2='50' stroke='%23FFFFFF' stroke-width='5'/%3E%3Cline x1='14' y1='30' x2='86' y2='30' stroke='%23FFFFFF' stroke-width='4'/%3E%3Cline x1='14' y1='70' x2='86' y2='70' stroke='%23FFFFFF' stroke-width='4'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Blog: Revolutionizing Feedback post, gear outline, bottom right */
.page-hero--blog-revolutionizing-feedback {
  background:
    radial-gradient(ellipse 50% 75% at 100% 100%, rgba(0,174,239,.22), transparent 60%),
    linear-gradient(164deg, var(--royal) 0%, var(--royal-dark) 50%, var(--navy) 100%);
}
.page-hero--blog-revolutionizing-feedback::before {
  content: "";
  position: absolute;
  bottom: 1.25rem;
  right: 1.5rem;
  width: 150px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='18' fill='none' stroke='%23FFFFFF' stroke-width='6'/%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linecap='round'%3E%3Cline x1='50' y1='6' x2='50' y2='20'/%3E%3Cline x1='50' y1='80' x2='50' y2='94'/%3E%3Cline x1='6' y1='50' x2='20' y2='50'/%3E%3Cline x1='80' y1='50' x2='94' y2='50'/%3E%3Cline x1='18' y1='18' x2='28' y2='28'/%3E%3Cline x1='72' y1='72' x2='82' y2='82'/%3E%3Cline x1='82' y1='18' x2='72' y2='28'/%3E%3Cline x1='28' y1='72' x2='18' y2='82'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Blog: Simplifying Review post, checkmark in a circle, top left */
.page-hero--blog-simplifying-review {
  background:
    radial-gradient(ellipse 50% 75% at 0% 0%, rgba(38,171,226,.20), transparent 60%),
    linear-gradient(110deg, var(--royal-dark) 0%, var(--royal) 45%, var(--royal-light) 100%);
}
.page-hero--blog-simplifying-review::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  width: 150px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='42' fill='none' stroke='%23FFFFFF' stroke-width='6'/%3E%3Cpath d='M30 52 L44 66 L72 34' fill='none' stroke='%23FFFFFF' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Blog: Future of Interaction post, NFC tap wave over a dot, right edge middle */
.page-hero--blog-future-interaction {
  background:
    radial-gradient(ellipse 50% 75% at 100% 50%, rgba(0,174,239,.22), transparent 60%),
    linear-gradient(178deg, var(--navy) 0%, var(--royal) 55%, var(--royal-dark) 100%);
}
.page-hero--blog-future-interaction::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  width: 150px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='78' r='7' fill='%23FFFFFF'/%3E%3Cpath d='M32 60 A26 26 0 0 1 68 60' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M20 44 A42 42 0 0 1 80 44' fill='none' stroke='%23FFFFFF' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

/* Breadcrumb-only page hero (product pages) */
.page-hero-breadcrumb {
  background: #00485E;
  padding: 1.25rem 0;
}
.page-hero-breadcrumb .breadcrumb { margin-bottom: 0; }
.page-hero-breadcrumb .breadcrumb,
.page-hero-breadcrumb .breadcrumb a,
.page-hero-breadcrumb .breadcrumb .sep { color: rgba(255,255,255,.55); }
.page-hero-breadcrumb .breadcrumb a:hover { color: #fff; }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  gap: .5rem;
  align-items: center;
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: rgba(255,255,255,.65); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { opacity: .5; }

/* ---- Footer ---- */
/* Live site: footer links section has black (#000000) background, white text */
.site-footer {
  position: relative;
  background:
    radial-gradient(ellipse 50% 80% at 85% 0%, rgba(0,174,239,.14), transparent 60%),
    linear-gradient(160deg, #013a4b 0%, #00222e 100%);
  color: rgba(255,255,255,.72);
  padding: 4rem 0 0;
}
.footer-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--royal-light), var(--color-primary));
}
.footer-inner {
  padding: 0 1.25rem 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
.footer-brand .logo-img { height: 38px; width: auto; }
.footer-brand .footer-tagline {
  color: rgba(255,255,255,.6);
  font-size: .92rem;
  line-height: 1.6;
  margin: 1rem 0 1.1rem;
  max-width: 320px;
}
.footer-brand .footer-address { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; color: rgba(255,255,255,.6); margin-bottom: 1.2rem; }
.footer-brand .footer-address a { color: rgba(255,255,255,.6); transition: color var(--transition); }
.footer-brand .footer-address a:hover { color: var(--color-primary); }
.footer-social { display: flex; gap: .6rem; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.8);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.footer-social a:hover { background: var(--color-primary); color: #fff; transform: translateY(-3px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-heading { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.footer-links ul { display: flex; flex-direction: column; gap: .6rem; }
.footer-links a { font-size: .88rem; color: rgba(255,255,255,.62); transition: color var(--transition), padding var(--transition); }
.footer-links a:hover { color: var(--color-primary); padding-left: 4px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: .82rem;
  color: rgba(255,255,255,.4);
}
.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.footer-payment { width: 168px; height: auto; opacity: .85; }
.site-footer .logo-link .logo-img { filter: none; }

/* ---- Back to top ---- */
.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--royal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0,72,94,.28);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
  z-index: 900;
}
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--royal-dark); }

/* ---- Sticky mobile buy bar (NFC card product page) ---- */
.zpd-sticky-buy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.1);
  padding: 0.6rem 0.9rem;
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  opacity: 0;
  transition: transform var(--transition), opacity var(--transition);
  pointer-events: none;
}
.zpd-sticky-buy.zpd-sticky-buy-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.zpd-sticky-buy-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.zpd-sticky-buy-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.zpd-sticky-buy-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-text);
}
.zpd-sticky-buy-btn {
  padding: 0.7rem 1.25rem;
  font-size: 0.92rem;
  white-space: nowrap;
  flex-shrink: 0;
}
body.zpd-sticky-buy-active .back-to-top { bottom: 5.5rem; }
@media (min-width: 768px) {
  .zpd-sticky-buy { display: none; }
}
@media (min-width: 640px) {
  .footer-bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */
@media (min-width: 768px) {
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }

  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .how-steps { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .product-detail-grid { grid-template-columns: 1fr 1fr; }
  .product-gallery { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }

  /* Policy page TOC: same sticky-sidebar pattern as .product-gallery above */
  .policy-layout { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
  .policy-toc { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .policy-toc ul { display: block; overflow-x: visible; padding: 0; }
  .policy-toc li { flex-shrink: initial; }
  .policy-toc a {
    display: block;
    border: none;
    border-left: 2px solid var(--color-border);
    border-radius: 0;
    padding: .4rem 0 .4rem .9rem;
  }
  .policy-toc a:hover,
  .policy-toc a.active { border-left-color: var(--color-primary); }

  .footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .rating-summary { flex-direction: row; align-items: center; }

  .trust-bar-inner { flex-wrap: nowrap; justify-content: space-around; }
}

/* ============================================================
   RESPONSIVE — 1024px
   ============================================================ */
@media (min-width: 1024px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .how-steps { grid-template-columns: repeat(3, 1fr); }
  .features-grid { grid-template-columns: repeat(3, 1fr); }
  .reviews-grid { grid-template-columns: repeat(3, 1fr); }
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   PRODUCT DETAIL PAGE — Zappycards-faithful rebuild
   Updated 2026-05-14
   ============================================================ */

/* ============================================================
   ZPD — Section 1 HERO
   ============================================================ */

.zpd-hero-section {
  padding: 2.5rem 0 3.5rem;
  background: #fff;
}

.zpd-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* Gallery column */
.zpd-gallery-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Outer wrapper — positions badges as absolute children outside the clip */
.zpd-gallery-outer {
  position: relative;
}

.zpd-gallery-main-wrap {
  background: var(--color-bg-lighter);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zpd-main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.25rem;
  display: block;
  transition: opacity var(--transition);
}

/* ---- Gallery zoom overlay (click main image to open) ---- */
.zpd-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,20,26,.92);
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.zpd-zoom-overlay.zpd-zoom-open { opacity: 1; pointer-events: all; }
.zpd-zoom-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius);
  cursor: zoom-out;
}
.zpd-zoom-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Callout badges — absolutely positioned against .zpd-gallery-outer */
.zpd-badges-overlay {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: none; /* hidden on mobile to avoid overflow */
  flex-direction: column;
  gap: 0.55rem;
  z-index: 3;
  pointer-events: none;
}

@media (min-width: 600px) {
  .zpd-badges-overlay {
    display: flex;
  }
}

.zpd-badge-pill {
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-right: none;
  border-radius: 50px 0 0 50px;
  padding: 0.55rem 0.7rem 0.55rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
  box-shadow: -3px 2px 10px rgba(0,0,0,0.10);
  white-space: nowrap;
  min-width: 110px;
}

.zpd-badge-pill svg {
  width: 22px;
  height: 22px;
  fill: var(--color-primary);
  flex-shrink: 0;
}

/* Thumbnail row with arrows */
.zpd-thumb-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.zpd-thumbs-viewport {
  flex: 1;
  overflow: hidden;
}

.zpd-thumbs-track {
  display: flex;
  gap: 0.5rem;
  transition: transform 0.3s ease;
}

.zpd-thumb {
  flex-shrink: 0;
  width: 78px;
  height: 78px;
  border-radius: 8px;
  border: 2px solid var(--color-border);
  overflow: hidden;
  background: var(--color-bg-lighter);
  padding: 0;
  cursor: pointer;
  transition: border-color var(--transition);
}

.zpd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zpd-thumb:hover { border-color: var(--color-primary); }
.zpd-thumb.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0,174,239,0.2);
}

.zpd-thumb-arrow {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.zpd-thumb-arrow:hover {
  background: var(--color-bg-light);
  border-color: var(--color-primary);
}

.zpd-thumb-arrow svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-text);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Review snippet card */
.zpd-review-snippet {
  background: var(--color-bg-lighter);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.zpd-snippet-stars {
  color: var(--color-gold);
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.zpd-snippet-quote {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-text);
  margin-bottom: 0.65rem;
  line-height: 1.5;
}

.zpd-snippet-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.zpd-snippet-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.zpd-snippet-name {
  font-weight: 700;
  color: var(--color-text);
}

.zpd-snippet-date {
  color: var(--color-text-muted);
}

/* Info column */
.zpd-info-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.zpd-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.zpd-rating-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.zpd-stars {
  color: var(--color-gold);
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.zpd-rating-score {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text);
}

.zpd-rating-link {
  color: var(--color-primary);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Highlight banner */
.zpd-highlight-banner {
  background: rgba(0,174,239,0.10);
  border: 1px solid rgba(0,174,239,0.25);
  border-radius: 50px;
  text-align: center;
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-dark-teal);
  margin-bottom: 1rem;
}

/* Checkmark bullets */
.zpd-check-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
}

.zpd-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.4;
}

.zpd-check-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.zpd-check-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Pack label */
.zpd-pack-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.6rem;
}

/* Pack selector cards */
.zpd-packs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.zpd-pack-card {
  position: relative;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transition), background var(--transition);
  display: block;
}

.zpd-pack-card:hover {
  border-color: var(--color-primary);
}

.zpd-pack-card input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.zpd-pack-card.zpd-pack-selected {
  border-color: var(--color-primary);
  background: rgba(0,174,239,0.05);
}

.zpd-pack-badge-tab {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.7rem;
  border-radius: 0 0 6px 6px;
  z-index: 1;
  white-space: nowrap;
}

.zpd-badge-popular {
  background: var(--color-primary);
  color: #fff;
}

.zpd-badge-value {
  background: var(--color-gold);
  color: #fff;
}

.zpd-pack-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
}

/* Extra top padding when the "MOST POPULAR" / "BEST VALUE" tab is present */
.zpd-pack-card:has(.zpd-pack-badge-tab) .zpd-pack-inner {
  padding-top: 1.4rem;
}

.zpd-pack-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition);
}

.zpd-pack-radio-checked,
.zpd-pack-selected .zpd-pack-radio {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: inset 0 0 0 3px #fff;
}

.zpd-pack-info {
  flex: 1;
}

.zpd-pack-qty {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
}

.zpd-pack-tier {
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.zpd-pack-per {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}

.zpd-pack-price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  flex-shrink: 0;
}

.zpd-pack-total {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text);
}

.zpd-pack-was {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.zpd-save-badge {
  background: #dcfce7;
  color: #16a34a;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

/* Free shipping bar inside pack card */
.zpd-free-shipping {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: #dcfce7;
  color: #16a34a;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-top: 1px solid #bbf7d0;
}

.zpd-free-shipping svg {
  width: 16px;
  height: 16px;
  fill: #16a34a;
  flex-shrink: 0;
}

/* Buy button in info col */
.zpd-buy-btn {
  width: 100%;
  justify-content: center;
  font-size: 1.05rem;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}

/* Price flash: brief pulse when the shopper picks a different pack */
.zpd-price-flash {
  animation: zpdPriceFlash 0.4s ease;
  border-radius: 4px;
}
@keyframes zpdPriceFlash {
  0%   { background: var(--color-primary); color: #fff; }
  100% { background: transparent; }
}

/* Trust row */
.zpd-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.zpd-trust-row span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.zpd-trust-row svg {
  width: 16px;
  height: 16px;
  fill: var(--color-primary);
  flex-shrink: 0;
}

/* Tabbed info box */
.zpd-tabs {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.zpd-tab-nav {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}

.zpd-tab-btn {
  flex: 1;
  padding: 0.75rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  text-align: center;
  min-height: 44px;
  background: #fafafa;
  cursor: pointer;
}

.zpd-tab-btn:hover { color: var(--color-primary); }
.zpd-tab-btn.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: #fff;
}

.zpd-tab-panel {
  display: none;
  padding: 1rem 1.25rem;
}

.zpd-tab-panel.active { display: block; }

.zpd-tab-steps {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.zpd-tab-steps li {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.zpd-tab-steps li strong { color: var(--color-text); }

.zpd-tab-specs {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.zpd-tab-specs li {
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.zpd-tab-specs li strong { color: var(--color-text); }


/* ============================================================
   ZPD — Section 2: 4-step grid
   ============================================================ */

.zpd-steps-section {
  padding: 5rem 0;
  background: #fff;
}

.zpd-steps-section .zpd-2tone-heading {
  text-align: center;
  margin-bottom: 3rem;
}

.zpd-steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.zpd-step-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  transition: box-shadow var(--transition), transform var(--transition);
}

.zpd-step-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.zpd-step-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-lighter);
}

.zpd-step-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zpd-step-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
  box-shadow: 0 2px 8px rgba(0,174,239,0.4);
}

.zpd-step-card h3 {
  font-size: 0.95rem;
  padding: 0.75rem 1rem 0.35rem;
  margin: 0;
}

.zpd-step-card p {
  font-size: 0.85rem;
  padding: 0 1rem 1rem;
  margin: 0;
  line-height: 1.5;
}


/* ============================================================
   ZPD — Section 3: Comparison
   ============================================================ */

.zpd-compare-section {
  padding: 5rem 0;
  background: var(--color-bg-light);
}

.zpd-compare-section .zpd-2tone-heading {
  text-align: center;
  margin-bottom: 2.5rem;
}

.zpd-compare-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.zpd-compare-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
}

.zpd-compare-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #fff;
}

.zpd-compare-card-header {
  padding: 0.75rem 1rem;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.zpd-header-others {
  background: #f3f4f6;
  color: var(--color-text-muted);
}

.zpd-header-tt {
  background: var(--color-dark-teal);
  color: #fff;
}

.zpd-compare-card ul {
  list-style: none;
  padding: 0.75rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.zpd-compare-card li {
  font-size: 0.82rem;
  color: var(--color-text);
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  line-height: 1.4;
}

.zpd-x {
  color: #ef4444;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.zpd-chk {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.zpd-compare-text { flex: 1; }

.zpd-compare-product-img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

.zpd-compare-product-img img {
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 320px;
  display: block;
  object-fit: cover;
}

.zpd-compare-google-bubble {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: #fff;
  border-radius: 12px;
  padding: 0.6rem 0.9rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  text-align: center;
  min-width: 80px;
}

.zpd-google-stars {
  color: var(--color-gold);
  font-size: 0.75rem;
}

.zpd-google-label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-top: 0.1rem;
}

.zpd-google-score {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-text);
}


/* ============================================================
   ZPD — Section 4: Results / Testimonials
   ============================================================ */

.zpd-results-section {
  padding: 5rem 0;
  background: #fff;
}

.zpd-results-section .zpd-2tone-heading {
  text-align: center;
  margin-bottom: 2.5rem;
}

.zpd-results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.zpd-result-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: #fff;
  transition: transform var(--transition), box-shadow var(--transition);
}

.zpd-result-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.zpd-result-stars {
  color: var(--color-gold);
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.zpd-result-quote {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.zpd-result-reviewer {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.zpd-result-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Monogram badge - used in place of a photo when no real customer photo is on file */
/* Selector scoped as .zpd-result-reviewer .zpd-avatar-monogram so it beats the
   generic ".zpd-result-reviewer span" rule below (block display, muted color). */
.zpd-result-reviewer .zpd-avatar-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  margin-top: 0;
}

.zpd-result-reviewer strong {
  display: block;
  font-size: 0.88rem;
  color: var(--color-text);
}

.zpd-result-reviewer span {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}


/* ============================================================
   ZPD — Section 5: Built for Every Business (3 dark cards)
   ============================================================ */

.zpd-biz-section {
  padding: 5rem 0;
  background: var(--color-bg-light);
}

.zpd-biz-section .zpd-2tone-heading {
  text-align: center;
  margin-bottom: 2.5rem;
}

.zpd-biz-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.zpd-biz-card {
  background: var(--color-dark-teal);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.zpd-biz-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.zpd-biz-card-header {
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.zpd-biz-card-header svg {
  width: 20px;
  height: 20px;
  fill: var(--color-primary);
  flex-shrink: 0;
}

.zpd-biz-card ul {
  list-style: none;
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.zpd-biz-card li {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.82);
  padding-left: 1rem;
  position: relative;
}

.zpd-biz-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
}

.zpd-shop-btn {
  padding: 0.9rem 2.5rem;
  font-size: 1rem;
}

/* Trim card padding on small screens so the pre-FAQ scroll is a bit shorter */
@media (max-width: 767px) {
  .zpd-result-card { padding: 1.1rem; }
  .zpd-biz-card ul { gap: 0.35rem; padding: 0.85rem 1.1rem 1.1rem; }
}


/* ============================================================
   ZPD — Section 6: Why Businesses (6 feature cards 3x2)
   ============================================================ */

.zpd-why-section {
  padding: 5rem 0;
  background: #fff;
}

.zpd-why-section .zpd-2tone-heading {
  text-align: center;
  margin-bottom: 2.5rem;
}

.zpd-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 480px) {
  .zpd-why-grid { grid-template-columns: 1fr 1fr; }
}

.zpd-why-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: #fff;
  transition: box-shadow var(--transition), transform var(--transition);
}

.zpd-why-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.zpd-why-icon {
  width: 48px;
  height: 48px;
  background: var(--color-bg-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.zpd-why-icon svg {
  width: 24px;
  height: 24px;
  fill: var(--color-primary);
}

.zpd-why-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.zpd-why-card h3 {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
  color: var(--color-text);
}

.zpd-why-card p {
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0;
}


/* ============================================================
   ZPD — Section 7: Choose Your Pack (4 pricing cards)
   ============================================================ */

.zpd-pricing-section {
  padding: 5rem 0;
  background: var(--color-bg-light);
}

.zpd-pricing-section .zpd-2tone-heading {
  text-align: center;
  margin-bottom: 2.5rem;
}

.zpd-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 480px) {
  .zpd-pricing-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.zpd-pricing-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: box-shadow var(--transition), transform var(--transition);
}

/* Push content down when a badge tab sits at the top */
.zpd-pricing-popular,
.zpd-pricing-value {
  padding-top: 2.25rem;
}

.zpd-pricing-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.zpd-pricing-popular {
  border-color: var(--color-primary);
  border-width: 2px;
}

.zpd-pricing-value {
  border-color: var(--color-gold);
  border-width: 2px;
}

.zpd-pricing-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.75rem;
  border-radius: 0 0 8px 8px;
  white-space: nowrap;
}

.zpd-pricing-badge-value {
  background: var(--color-gold);
}

.zpd-pricing-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin: 1rem 0 0.75rem;
}

.zpd-pricing-tier {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.zpd-pricing-qty {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 0.4rem;
}

.zpd-pricing-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: center;
}

.zpd-pricing-was {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-weight: 400;
}

.zpd-pricing-per {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: center;
}

.zpd-pricing-save {
  background: #dcfce7;
  color: #16a34a;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.zpd-pricing-features {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  width: 100%;
  text-align: left;
}

.zpd-pricing-features li {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  padding-left: 1.1rem;
  position: relative;
}

.zpd-pricing-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.8rem;
}

.zpd-pricing-buy {
  width: 100%;
  justify-content: center;
  font-size: 0.88rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-top: auto;
}


/* ============================================================
   ZPD — Section 8: FAQ
   ============================================================ */

.zpd-faq-section {
  padding: 5rem 0;
  background: #fff;
}

.zpd-faq-section .zpd-2tone-heading {
  text-align: center;
  margin-bottom: 2.5rem;
}

.zpd-faq-list {
  max-width: 820px;
  margin: 0 auto;
}


/* ============================================================
   ZPD — Section 9: CTA band
   ============================================================ */

.zpd-cta-band {
  padding: 4.5rem 0;
  background: linear-gradient(135deg, #00485E 0%, #005f7a 100%);
}

.zpd-cta-inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
  text-align: center;
}

.zpd-cta-text {
  max-width: 560px;
}

.zpd-cta-stars {
  color: var(--color-gold);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.zpd-cta-stars span {
  color: rgba(255,255,255,0.7);
  font-size: 0.88rem;
  font-weight: 600;
  margin-left: 0.35rem;
}

.zpd-cta-band .zpd-2tone-heading {
  color: #fff;
  text-align: center;
  margin-bottom: 0.75rem;
}

.zpd-cta-band .zpd-2tone-heading span {
  color: var(--color-primary);
}

.zpd-cta-band p {
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.zpd-cta-buy {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  padding: 0.9rem 1.75rem;
}

.zpd-cta-sub {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  margin: 0;
}

.zpd-cta-product-img img {
  border-radius: var(--radius-lg);
  max-width: 280px;
  display: block;
  margin: 0 auto;
}


/* ============================================================
   ZPD — 2-tone heading (shared across sections)
   ============================================================ */

.zpd-2tone-heading {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.2;
}

.zpd-2tone-heading span {
  color: var(--color-primary);
}


/* ============================================================
   ZPD — Responsive 768px
   ============================================================ */

@media (min-width: 768px) {
  .zpd-hero-grid {
    grid-template-columns: 52% 1fr;
    gap: 3rem;
    align-items: start;
  }

  .zpd-info-col {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
    align-self: start;
  }

  .zpd-steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .zpd-compare-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .zpd-compare-cards {
    flex: 1;
  }

  .zpd-compare-product-img {
    flex-shrink: 0;
    width: 300px;
  }

  .zpd-results-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .zpd-biz-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .zpd-why-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .zpd-pricing-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .zpd-cta-inner {
    flex-direction: row;
    text-align: left;
    justify-content: space-between;
    align-items: center;
  }

  .zpd-cta-band .zpd-2tone-heading {
    text-align: left;
  }
}


/* ============================================================
   ZPD — Responsive 1024px
   ============================================================ */

@media (min-width: 1024px) {
  .zpd-badges-overlay {
    gap: 0.65rem;
  }
}


/* ============================================================
   Legacy pd-* classes kept for backward compat (still in old CSS vars)
   ============================================================ */

/* ----- Hero section ----- */
.pd-hero-section {
  padding: 3rem 0 4rem;
}

.pd-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* ----- Gallery ----- */
.pd-gallery {
  /* sticky handled in media query */
}

.pd-gallery-main {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-lighter);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  border: 1px solid var(--color-border);
}

.pd-main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.25rem;
  transition: opacity 0.2s ease;
}

.pd-thumbs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  padding-bottom: 4px;
}

.pd-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  border: 2px solid var(--color-border);
  overflow: hidden;
  background: var(--color-bg-lighter);
  padding: 0;
  transition: border-color var(--transition), transform var(--transition);
  cursor: pointer;
}

.pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pd-thumb:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.pd-thumb.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0,174,239,0.25);
}

/* ----- Info column ----- */
.pd-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pd-product-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.pd-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.pd-rating-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.pd-stars {
  color: var(--color-gold);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}

.pd-rating-link {
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pd-rating-link:hover {
  color: var(--color-cta-hover);
}

.pd-rating-badge {
  background: #dcfce7;
  color: #16a34a;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pd-price-block {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.pd-price-current {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-text);
  font-family: 'Roboto', sans-serif;
  line-height: 1;
}

.pd-price-was {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.pd-savings-badge {
  background: #dcfce7;
  color: #16a34a;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-btn);
}

/* ----- Dimensions note ----- */
.pd-dims {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

/* ----- CTA ----- */
.pd-cta-wrap {
  margin-bottom: 1.5rem;
}

.pd-cta-wrap .btn-buy {
  width: 100%;
  justify-content: center;
  font-size: 1.1rem;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.pd-cta-sub {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* ----- Quick benefits list ----- */
.pd-quick-benefits {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.pd-quick-benefits li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
}

.pd-quick-benefits li svg {
  width: 18px;
  height: 18px;
  fill: var(--color-success);
  flex-shrink: 0;
}

/* ----- Trust badges in info column ----- */
.pd-trust-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.pd-trust-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-bg-lighter);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}

.pd-trust-item svg {
  width: 18px;
  height: 18px;
  fill: var(--color-success);
  flex-shrink: 0;
}

/* ----- Shared section headers ----- */
.pd-section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.pd-section-header h2 {
  margin-top: 0.35rem;
}

/* ----- Benefits grid (4-col) ----- */
.pd-benefits-section {
  padding: 5rem 0;
}

.pd-benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.pd-benefit-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
}

.pd-benefit-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.pd-benefit-icon {
  width: 64px;
  height: 64px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  flex-shrink: 0;
}

.pd-benefit-icon svg {
  width: 32px;
  height: 32px;
  fill: #fff;
  flex-shrink: 0;
  display: block;
}

.pd-benefit-icon svg path,
.pd-benefit-icon svg rect,
.pd-benefit-icon svg circle,
.pd-benefit-icon svg polygon {
  fill: #fff;
}

.pd-benefit-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.pd-benefit-card p {
  font-size: 0.9rem;
  margin: 0;
}

/* ----- How it works ----- */
.pd-how-section {
  padding: 5rem 0;
}

.pd-how-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 860px;
  margin: 0 auto;
}

.pd-how-step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.pd-how-connector {
  display: none; /* shown as vertical line on desktop */
}

.pd-step-num {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
  box-shadow: 0 4px 16px rgba(0,174,239,0.3);
}

.pd-step-body {
  flex: 1;
}

.pd-step-body h3 {
  margin-bottom: 0.5rem;
  color: var(--color-text);
  font-size: 1.1rem;
}

.pd-step-body p {
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.6;
}

/* ----- Feature rows (alternating) ----- */
.pd-features-section {
  padding: 5rem 0;
}

.pd-feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 4rem;
}

.pd-feature-row:last-child {
  margin-bottom: 0;
}

.pd-feature-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  aspect-ratio: 4 / 3;
}

.pd-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.pd-feature-text h3 {
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
}

.pd-feature-text p {
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.pd-feature-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pd-feature-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.pd-feature-list li::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ----- FAQ section ----- */
.pd-faq-section {
  padding: 5rem 0;
}

/* ----- Reviews section ----- */
.pd-reviews-section {
  padding: 5rem 0;
}

.pd-rating-summary {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 2.5rem;
}

.pd-rating-big {
  text-align: center;
  flex-shrink: 0;
}

.pd-rating-score {
  display: block;
  font-size: 4rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
  font-family: 'Roboto', sans-serif;
}

.pd-rating-stars {
  color: var(--color-gold);
  font-size: 1.5rem;
  margin: 0.35rem 0;
}

.pd-rating-big p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
}

.pd-rating-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.pd-rating-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pd-rating-label {
  width: 46px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-align: right;
  flex-shrink: 0;
}

.pd-bar-track {
  flex: 1;
  height: 8px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.pd-bar-fill {
  height: 100%;
  background: var(--color-gold);
  border-radius: 4px;
}

.pd-rating-pct {
  width: 36px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.pd-reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.pd-review-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: box-shadow var(--transition);
}

.pd-review-card:hover {
  box-shadow: var(--shadow);
}

.pd-reviews-cta-row {
  text-align: center;
}

/* ----- Responsive: 768px ----- */
@media (min-width: 768px) {
  .pd-hero-grid {
    grid-template-columns: 55% 1fr;
    gap: 3rem;
  }

  .pd-gallery {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    align-self: start;
  }

  .pd-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pd-how-steps {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
  }

  .pd-how-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    padding: 0 1.5rem;
    border-bottom: none;
  }

  .pd-how-connector {
    display: block;
    flex-shrink: 0;
    width: 48px;
    height: 2px;
    background: var(--color-border);
    margin-top: 30px; /* half of 60px step-num circle */
    align-self: flex-start;
  }

  .pd-how-step:first-child { padding-left: 0; }
  .pd-how-step:last-child { padding-right: 0; }

  .pd-feature-row {
    grid-template-columns: 1fr 1fr;
  }

  .pd-feature-row-reverse .pd-feature-img {
    order: 2;
  }

  .pd-feature-row-reverse .pd-feature-text {
    order: 1;
  }

  .pd-reviews-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pd-rating-summary {
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
  }

  .pd-rating-big {
    min-width: 130px;
  }
}

/* ----- Responsive: 1024px ----- */
@media (min-width: 1024px) {
  .pd-benefits-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  /* trust badges stay 2x2 inside the info column — 4-col is too cramped */
}

/* ============================================================
   Discount email-capture popup (includes/popup.php)
   Fires 15s after load, site-wide.
   ============================================================ */
.tt-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(0, 26, 34, .72);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.tt-popup-overlay.open {
  opacity: 1;
  visibility: visible;
}
.tt-popup {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(165deg, #00485E 0%, #00AEEF 115%);
  border-radius: 16px;
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  color: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  transform: translateY(20px) scale(.96);
  transition: transform .32s cubic-bezier(.2, .8, .25, 1);
}
.tt-popup-overlay.open .tt-popup {
  transform: translateY(0) scale(1);
}
.tt-popup-close {
  position: absolute;
  top: .55rem;
  right: .75rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.tt-popup-close:hover { background: rgba(255, 255, 255, .3); }
.tt-popup-media {
  margin: -4.25rem auto .25rem;
  width: 220px;
  max-width: 70%;
}
.tt-popup-media img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .4));
}
.tt-popup-logo {
  width: 150px;
  height: auto;
  margin: 0 auto 1rem;
  opacity: .95;
}
.tt-popup-title {
  color: #fff;
  font-size: clamp(1.9rem, 6vw, 2.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .5px;
  margin-bottom: .5rem;
  text-transform: uppercase;
}
.tt-popup-sub {
  color: rgba(255, 255, 255, .92);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.tt-popup-form { display: flex; flex-direction: column; gap: .65rem; }
.tt-popup-input {
  width: 100%;
  padding: .9rem 1rem;
  border-radius: 8px;
  border: 2px solid transparent;
  background: #fff;
  color: var(--color-text);
  font-size: 1rem;
  font-family: inherit;
  text-align: center;
}
.tt-popup-input:focus {
  outline: none;
  border-color: var(--color-gold);
}
.tt-popup-btn {
  display: block;
  width: 100%;
  padding: .95rem 1rem;
  border-radius: 8px;
  background: #11252b;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  transition: background var(--transition), transform var(--transition);
}
.tt-popup-btn:hover {
  background: #000;
  color: #fff;
  transform: translateY(-2px);
}
.tt-popup-btn-link { text-decoration: none; }
.tt-popup-dismiss {
  background: none;
  color: rgba(255, 255, 255, .85);
  font-size: .9rem;
  text-decoration: underline;
  padding: .35rem;
  margin-top: .15rem;
  min-width: 46px;
  min-height: 46px;
}
.tt-popup-dismiss:hover { color: #fff; }
.tt-popup-code {
  background: rgba(255, 255, 255, .14);
  border: 2px dashed rgba(255, 255, 255, .55);
  border-radius: 8px;
  padding: .85rem 1rem;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 3px;
  margin-bottom: 1rem;
}
@media (max-width: 480px) {
  .tt-popup { padding: 2rem 1.25rem 1.5rem; }
  .tt-popup-media { margin-top: -3.5rem; }
}

/* ---- Home page: grid stagger on scroll-in (reuses .anim/.in-view) ---- */
@media (prefers-reduced-motion: no-preference) {
  .products-grid .anim:nth-child(2) { transition-delay: .12s; }
  .products-grid .anim:nth-child(3) { transition-delay: .24s; }

  .features-grid .anim:nth-child(2) { transition-delay: .1s; }
  .features-grid .anim:nth-child(3) { transition-delay: .2s; }
  .features-grid .anim:nth-child(4) { transition-delay: .3s; }
  .features-grid .anim:nth-child(5) { transition-delay: .4s; }
  .features-grid .anim:nth-child(6) { transition-delay: .4s; }

  .reviews-grid .anim:nth-child(2) { transition-delay: .08s; }
  .reviews-grid .anim:nth-child(3) { transition-delay: .16s; }
  .reviews-grid .anim:nth-child(4) { transition-delay: .24s; }
  .reviews-grid .anim:nth-child(5) { transition-delay: .32s; }
  .reviews-grid .anim:nth-child(6) { transition-delay: .4s; }
}

/* ---- Trust bar icon lift on hover (matches .product-card:hover lift) ---- */
.trust-ic { transition: transform var(--transition); }
.trust-item:hover .trust-ic { transform: translateY(-3px); }

/* ---- Hero float badges: slow idle drift ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero-float-tap { animation: tt-float-a 3.6s ease-in-out infinite; }
  .hero-float-rating { animation: tt-float-b 4s ease-in-out infinite; }
}
@keyframes tt-float-a {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes tt-float-b {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

/* ---- Reviews: show-more panel ----
   Hidden by default; .show swaps to display:contents so the extra
   review-card items lay out as normal reviews-grid children. */
.reviews-extra { display: none; }
.reviews-extra.show { display: contents; }
.reviews-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  margin-top: 2.5rem;
}
.reviews-cta-row .btn { width: 100%; max-width: 320px; justify-content: center; }
@media (min-width: 560px) {
  .reviews-cta-row { flex-direction: row; }
  .reviews-cta-row .btn { width: auto; max-width: none; }
}

/* ---- Screen-reader-only utility (reuse site-wide, do not duplicate) ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Acrylic Tag product page: review count, static text (not a link) ---- */
.zpd-review-count {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  font-weight: 600;
}

/* ---- Acrylic Tag product page: pack card select pulse ---- */
@keyframes zpd-pack-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.015); }
  100% { transform: scale(1); }
}
.zpd-pack-pulse { animation: zpd-pack-pulse .3s ease; }

/* ---- Acrylic Tag product page: staggered card-grid entrance ---- */
@media (prefers-reduced-motion: no-preference) {
  .zpd-steps-grid .anim:nth-child(1) { transition-delay: 0s; }
  .zpd-steps-grid .anim:nth-child(2) { transition-delay: .08s; }
  .zpd-steps-grid .anim:nth-child(3) { transition-delay: .16s; }
  .zpd-steps-grid .anim:nth-child(4) { transition-delay: .24s; }

  .zpd-results-grid .anim:nth-child(1) { transition-delay: 0s; }
  .zpd-results-grid .anim:nth-child(2) { transition-delay: .08s; }
  .zpd-results-grid .anim:nth-child(3) { transition-delay: .16s; }

  .zpd-biz-grid .anim:nth-child(1) { transition-delay: 0s; }
  .zpd-biz-grid .anim:nth-child(2) { transition-delay: .08s; }
  .zpd-biz-grid .anim:nth-child(3) { transition-delay: .16s; }

  .zpd-why-grid .anim:nth-child(1) { transition-delay: 0s; }
  .zpd-why-grid .anim:nth-child(2) { transition-delay: .08s; }
  .zpd-why-grid .anim:nth-child(3) { transition-delay: .16s; }
  .zpd-why-grid .anim:nth-child(4) { transition-delay: .24s; }
  .zpd-why-grid .anim:nth-child(5) { transition-delay: .32s; }
  .zpd-why-grid .anim:nth-child(6) { transition-delay: .4s; }

  .zpd-pricing-grid .anim:nth-child(1) { transition-delay: 0s; }
  .zpd-pricing-grid .anim:nth-child(2) { transition-delay: .08s; }
  .zpd-pricing-grid .anim:nth-child(3) { transition-delay: .16s; }
  .zpd-pricing-grid .anim:nth-child(4) { transition-delay: .24s; }
}

/* ---- Acrylic Tag product page: bigger thumbnail arrow tap target on mobile ---- */
@media (max-width: 480px) {
  .zpd-thumb-arrow {
    min-width: 36px;
    min-height: 36px;
    margin: 0 4px;
  }
}

/* ---- Terms of Service page: scoped additions ----
   Reuses the existing .policy-layout / .policy-toc / .policy-content /
   .policy-anchor pattern (see "Policy Pages" block above, already live
   on privacy-policy.php and refunds-policy.php). Nothing below touches
   those shared rules - it only adds a few small, page-scoped pieces:
   a numbered section badge, alternating tint-card wrappers, a compact
   "last updated" pill, a 48px-indent bullet list, a larger TOC tap
   target, and a "back to top" text link. None of this uses .anim. */

/* Small numbered circle in front of each H2, same flat-fill language
   as .step-number / .pd-step-num but smaller and scoped to this page
   only, so those two shared components stay untouched. */
.tos-num {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
}

/* Alternating light-tint card wrapper for every other section, mixing
   the .section-light background token with the .feature-card look
   (16px radius, 1px border, soft shadow, same padding value). */
.tos-tint-card {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  margin-bottom: 1.5rem;
}
.tos-tint-card h2:first-child { margin-top: 0; }
.tos-tint-card p:last-child,
.tos-tint-card ul:last-child { margin-bottom: 0; }

/* "Last updated" pill in the page hero - same tinted-pill color
   treatment as .post-badge-new, sized for a full sentence instead of
   a one-word tag and without the all-caps treatment. */
.tos-updated-pill {
  display: inline-flex;
  align-items: center;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(0,174,239,.12);
  border: 1px solid rgba(0,174,239,.30);
  padding: .45rem 1rem;
  border-radius: 100px;
  margin-top: .9rem;
}

/* Bullet list inside a rewritten/new section: site-wide 48px indent
   standard. Scoped to its own class so the 24px .policy-content ul
   rule used by privacy-policy.php / shipping-policy.php is untouched. */
.tos-list { list-style: disc; padding-left: 48px; margin-bottom: 1rem; }
.tos-list li { margin-bottom: .4rem; font-size: .95rem; color: var(--color-text-muted); }

/* Bigger tap target on the shared .policy-toc links for this page only. */
.policy-toc.tos-toc-lg a { min-height: 44px; }

/* Self-contained "back to top" link at the bottom of the page content
   (separate from the shared floating .back-to-top button). Real 44px
   tap target for one-handed mobile use. */
.tos-back-top { text-align: center; margin-top: 2.5rem; }
.tos-back-top a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .6rem 1.1rem;
}

/* ---- Page Hero Variants: real AI-designed background art ---- */
/* Layered on top of the gradient fallback above (kept as instant paint
   + safety net if an image ever fails to load). Desktop art is 21:9,
   mobile art is 1:1 - matches the hero band's actual measured shape at
   each breakpoint (1440x344 desktop, 390x365 mobile), so nothing gets
   forced into the wrong ratio. A dark teal overlay keeps white text
   readable over every photo. */
.page-hero--shop {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/shop-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--shop {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/shop-mobile.jpg");
    background-position: center;
  }
}

.page-hero--about {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/about-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--about {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/about-mobile.jpg");
    background-position: center;
  }
}

.page-hero--faq {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/faq-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--faq {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/faq-mobile.jpg");
    background-position: center;
  }
}

.page-hero--reviews {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/reviews-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--reviews {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/reviews-mobile.jpg");
    background-position: center;
  }
}

.page-hero--contact {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/contact-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--contact {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/contact-mobile.jpg");
    background-position: center;
  }
}

.page-hero--blog-index {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-index-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--blog-index {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-index-mobile.jpg");
    background-position: center;
  }
}

.page-hero--privacy-policy {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/privacy-policy-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--privacy-policy {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/privacy-policy-mobile.jpg");
    background-position: center;
  }
}

.page-hero--refunds-policy {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/refunds-policy-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--refunds-policy {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/refunds-policy-mobile.jpg");
    background-position: center;
  }
}

.page-hero--terms-of-service {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/terms-of-service-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--terms-of-service {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/terms-of-service-mobile.jpg");
    background-position: center;
  }
}

.page-hero--shipping-policy {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/shipping-policy-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--shipping-policy {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/shipping-policy-mobile.jpg");
    background-position: center;
  }
}

.page-hero--blog-boost-business {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-boost-business-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--blog-boost-business {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-boost-business-mobile.jpg");
    background-position: center;
  }
}

.page-hero--blog-enhance-engagement {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-enhance-engagement-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--blog-enhance-engagement {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-enhance-engagement-mobile.jpg");
    background-position: center;
  }
}

.page-hero--blog-improve-experience {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-improve-experience-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--blog-improve-experience {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-improve-experience-mobile.jpg");
    background-position: center;
  }
}

.page-hero--blog-collect-reviews {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-collect-reviews-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--blog-collect-reviews {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-collect-reviews-mobile.jpg");
    background-position: center;
  }
}

.page-hero--blog-instant-reviews {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-instant-reviews-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--blog-instant-reviews {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-instant-reviews-mobile.jpg");
    background-position: center;
  }
}

.page-hero--blog-local-seo {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-local-seo-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--blog-local-seo {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-local-seo-mobile.jpg");
    background-position: center;
  }
}

.page-hero--blog-online-reputation {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-online-reputation-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--blog-online-reputation {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-online-reputation-mobile.jpg");
    background-position: center;
  }
}

.page-hero--blog-revolutionizing-feedback {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-revolutionizing-feedback-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--blog-revolutionizing-feedback {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-revolutionizing-feedback-mobile.jpg");
    background-position: center;
  }
}

.page-hero--blog-simplifying-review {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-simplifying-review-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--blog-simplifying-review {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-simplifying-review-mobile.jpg");
    background-position: center;
  }
}

.page-hero--blog-future-interaction {
  background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-future-interaction-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .page-hero--blog-future-interaction {
    background-image: linear-gradient(rgba(1,54,66,.55), rgba(1,54,66,.72)), url("/assets/images/heroes/blog-future-interaction-mobile.jpg");
    background-position: center;
  }
}

/* ---- Home: "See It In Action" full-bleed photo band ---- */
/* Image is a real 21:9 (1584x672) photo, never cropped after the fact - the
   box height is scaled to viewport width with the same ratio (clamp), so
   object-fit:cover has nothing to crop away at normal widths, only at the
   very extreme min/max clamp bounds. Kept as a direct child of the section
   (outside .container), same full-bleed technique already used by .hero-media. */
.action-scene-media {
  position: relative;
  width: 100%;
  margin-top: 3rem;
  overflow: hidden;
  min-height: clamp(220px, 42.8vw, 620px);
}
.action-scene-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.action-scene-badge {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  color: var(--navy);
  border-radius: 100px;
  padding: .65rem 1.15rem;
  font-size: .85rem;
  font-weight: 700;
  box-shadow: 0 18px 40px rgba(0,45,60,.28);
}
.action-scene-badge svg { width: 18px; height: 18px; color: var(--color-success, #1a9c5c); flex-shrink: 0; }
@media (max-width: 640px) {
  .action-scene-media { margin-top: 2rem; }
  .action-scene-badge { left: 1rem; bottom: 1rem; padding: .55rem .9rem; font-size: .78rem; }
}