/* ============================================================================
   brodvpn.com landing page. Loaded after brand.css.
   ========================================================================== */

/* Header anchors: smooth scroll and offset under the sticky header */
html { scroll-behavior: smooth; }
#how, #plans, #faq { scroll-margin-top: 96px; }

.page { min-width: 320px; overflow-x: clip; }

/* ---------------------------------------------------------------------------
   Header — sticky, with blur
   -------------------------------------------------------------------------- */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 245, 238, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(239, 230, 216, 0.7);
}
@supports (background: color-mix(in srgb, red, blue)) {
  .top-bar {
    background: color-mix(in srgb, var(--bv-bg) 88%, transparent);
    border-bottom-color: color-mix(in srgb, var(--bv-line) 70%, transparent);
  }
}
.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bv-sp-6);
  max-width: var(--bv-w-wide);
  margin: 0 auto;
  padding: 10px var(--bv-gutter);
}
.top-bar .site-logo { height: clamp(46px, 40px + 1vw, 52px); }
.top-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: var(--bv-fs-md);
  font-weight: 500;
}
.top-nav .nav-link { color: var(--bv-ink); font-size: inherit; font-weight: inherit; }
.top-nav .nav-link:hover { color: var(--bv-accent); }
.header-cta { font-size: var(--bv-fs-base); padding: 12px 22px; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Section shells
   -------------------------------------------------------------------------- */
.section { padding: var(--bv-section-pad) var(--bv-gutter); }
.section--surface {
  background: var(--bv-surface);
  border-top: 1px solid var(--bv-line);
  border-bottom: 1px solid var(--bv-line);
}
.section--dark {
  background: radial-gradient(1100px 500px at 85% -10%, var(--bv-dark-raise) 0%, var(--bv-ink) 55%);
  color: var(--bv-bg);
}
.section.tight-top { padding-top: var(--bv-sp-2); }
.section--flush-bottom { border-bottom: none; }
.section--flush-top { border-top: none; }
.container { max-width: var(--bv-w-wide); margin: 0 auto; }
.container--prose { max-width: var(--bv-w-prose); margin: 0 auto; }

.section-head { display: flex; flex-direction: column; gap: var(--bv-sp-3); }
.section-head--loose { gap: 28px; }
.section-stack { display: flex; flex-direction: column; gap: var(--bv-sp-8); }
.section-lead { font-size: var(--bv-fs-xl); color: var(--bv-ink-soft); max-width: 640px; text-wrap: pretty; }
.section--dark .section-lead { color: var(--bv-dark-soft); }

/* Responsive card grids — no breakpoints needed */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--bv-sp-6); }
.grid-cards--sm { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--bv-sp-5); }
.grid-cards--md { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); align-items: stretch; }

/* Card that lifts on hover */
.lift-card { transition: transform var(--bv-dur) var(--bv-ease-out), box-shadow var(--bv-dur) var(--bv-ease-out); }
.lift-card:hover { transform: translateY(-4px); box-shadow: var(--bv-shadow-lift); }

/* Scroll reveal: opacity is dropped only when JS confirms it will run
   (html.js-anim), so content never gets stuck invisible without JS. */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s var(--bv-ease-out);
}
.js-anim .reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
@keyframes bv-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(24px, -18px) scale(1.06); }
}
.hero-section {
  position: relative;
  max-width: var(--bv-w-wide);
  margin: 0 auto;
  padding: 56px var(--bv-gutter) 72px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: center;
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: bv-drift 14s ease-in-out infinite;
}
.hero-blob--tr {
  top: -140px; right: -60px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(245, 194, 150, 0.5), transparent 65%);
}
.hero-blob--bl {
  bottom: -160px; left: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(226, 83, 31, 0.14), transparent 65%);
  animation-duration: 18s;
  animation-direction: reverse;
}
.hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; }
.hero-copy h1 { font-size: var(--bv-fs-h1); line-height: 1.18; }
.hl-underline { background: linear-gradient(transparent 62%, var(--bv-peach) 62%); }
.badge-free {
  background: var(--bv-peach);
  color: var(--bv-ink);
  font-weight: 600;
  font-size: var(--bv-fs-sm);
  padding: 8px 16px;
  border-radius: var(--bv-r-pill);
}
.badge-row { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-sub { font-size: var(--bv-fs-2xl); line-height: var(--bv-lh); color: var(--bv-ink-soft); max-width: 520px; text-wrap: pretty; }
.hero-green { font-size: var(--bv-fs-md); color: var(--bv-ok); font-weight: 600; }
.hero-cta-group { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hero-note { font-size: var(--bv-fs-sm); color: var(--bv-ink-mute); }
.hero-perks {
  display: flex;
  /* Tight row gap: on mid widths the row wraps, and full section-size gaps
     between wrapped lines read as a layout bug */
  gap: 10px var(--bv-sp-6);
  font-size: var(--bv-fs-base);
  color: var(--bv-ink-mute);
  flex-wrap: wrap;
}
.hero-perks strong { color: var(--bv-accent); font-size: var(--bv-fs-lg); }
.hero-media { position: relative; z-index: 1; display: flex; justify-content: center; }
.hero-img {
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--bv-r-2xl);
  display: block;
  background: #F5E9DA;
  filter: drop-shadow(0 24px 40px rgba(43, 32, 24, 0.18));
}

/* ---------------------------------------------------------------------------
   Feature lists with tinted icon tiles
   -------------------------------------------------------------------------- */
.feat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bv-sp-4);
  font-size: var(--bv-fs-xl);
  line-height: 1.4;
}
.feat-li { display: flex; align-items: center; gap: var(--bv-sp-4); }
.feat-ic {
  width: 40px;
  height: 40px;
  border-radius: var(--bv-r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feat-ic svg { width: 22px; height: 22px; }
/* Decorative icon micro-palette */
.feat-ic--red    { background: #FDE8E8; color: #E5484D; }
.feat-ic--orange { background: #FDEEE5; color: var(--bv-accent); }
.feat-ic--violet { background: #EFEAFE; color: #7A5AF0; }
.feat-ic--pink   { background: #FDECF5; color: #D6409F; }
.feat-ic--blue   { background: #E8F0FE; color: #2F6BEA; }
.feat-ic--green  { background: #E7F6EF; color: #17976A; }
/* On the dark card */
.feat-ic--peach  { background: rgba(245, 194, 150, 0.16); color: var(--bv-peach); }
.feat-ic--mint   { background: rgba(123, 196, 127, 0.18); color: var(--bv-ok-soft); }
.feat-ic--cream  { background: rgba(234, 221, 201, 0.16); color: #EADDC9; }

/* Light and dark cards of the first block */
.duo-card {
  background: var(--bv-surface);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-r-xl);
  padding: clamp(26px, 20px + 1.5vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.duo-card h2 { font-size: clamp(20px, 18px + 0.6vw, 24px); }
.duo-card--dark { background: var(--bv-ink); color: var(--bv-bg); border: none; }
.duo-card--dark .feat-list { color: #EADDC9; }
.duo-card__note { font-size: var(--bv-fs-base); line-height: 1.5; color: var(--bv-dark-soft); margin-top: 6px; }

/* ---------------------------------------------------------------------------
   "Why BrodVPN"
   -------------------------------------------------------------------------- */
.why-card {
  background: var(--bv-bg);
  border-radius: var(--bv-r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.why-card p { font-size: var(--bv-fs-md); line-height: 1.5; color: var(--bv-ink-soft); }
.why-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--bv-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-card__icon--orange { background: #FFF0E6; color: var(--bv-accent); }
.why-card__icon--green  { background: #E7F6EF; color: #17976A; }
.why-card__icon--blue   { background: #E8F0FE; color: #2F6BEA; }
.why-card__icon--violet { background: #F0EBFE; color: #6D4BE0; }

/* ---------------------------------------------------------------------------
   "Why we are called Brod"
   -------------------------------------------------------------------------- */
.brod-block { display: flex; flex-direction: column; gap: var(--bv-sp-4); }
.brod-kicker {
  font-size: var(--bv-fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bv-ink-faint);
  font-weight: 600;
}
.brod-word {
  font-family: var(--bv-font-display);
  font-size: clamp(42px, 30px + 3.2vw, 64px);
  line-height: 1;
  font-weight: 700;
  color: var(--bv-ink);
}
.brod-word .dot { color: var(--bv-accent); }
.brod-def {
  font-family: var(--bv-font-mono);
  font-size: var(--bv-fs-md);
  letter-spacing: 0.06em;
  color: var(--bv-ink-faint);
}
.brod-sum { font-size: 21px; line-height: 1.5; font-weight: 600; margin-top: 6px; text-wrap: pretty; }

/* ---------------------------------------------------------------------------
   "3 steps to connect" — dark section
   -------------------------------------------------------------------------- */
.steps-block { display: flex; flex-direction: column; gap: 44px; }
.step-tile {
  border: 1px solid var(--bv-dark-line);
  border-radius: var(--bv-r-lg);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: var(--bv-sp-4);
  transition: border-color var(--bv-dur) ease, transform var(--bv-dur) var(--bv-ease-out);
}
.step-tile:hover { border-color: var(--bv-accent); transform: translateY(-2px); }
.step-tile__num {
  font-family: var(--bv-font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--bv-accent);
}
.step-tile h3 { font-size: 21px; }
.step-tile p { font-size: var(--bv-fs-md); line-height: var(--bv-lh); color: var(--bv-dark-soft); }
.step-tile .ok { color: var(--bv-ok-soft); font-weight: 700; }
.how-note {
  background: var(--bv-dark-raise);
  border-radius: var(--bv-r-md);
  padding: 22px 28px;
  display: flex;
  gap: var(--bv-sp-4);
  align-items: flex-start;
  max-width: 720px;
}
.how-note__emoji { font-size: 22px; line-height: 1; }
.how-note p { font-size: var(--bv-fs-base); line-height: var(--bv-lh); color: var(--bv-dark-soft); }
.cta-note { font-size: var(--bv-fs-sm); color: var(--bv-dark-soft); }

/* ---------------------------------------------------------------------------
   Reviews — horizontal snap rail
   -------------------------------------------------------------------------- */
.reviews-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bv-sp-5);
  flex-wrap: wrap;
}
.reviews-sub { font-size: var(--bv-fs-base); color: var(--bv-ink-mute); }
.rail-btns { display: flex; gap: var(--bv-sp-3); }
.rail-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--bv-ink);
  background: transparent;
  color: var(--bv-ink);
  font-size: 22px;
  cursor: pointer;
  transition: background var(--bv-dur) ease, color var(--bv-dur) ease, transform var(--bv-dur) var(--bv-ease-spring);
}
.rail-btn:hover { background: var(--bv-ink); color: var(--bv-bg); }
.rail-btn:active { transform: scale(0.94); }

.reviews-rail {
  display: flex;
  gap: var(--bv-sp-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--bv-gutter));
  padding: 12px max(var(--bv-gutter), calc(50% - 190px)) 16px;
}
.reviews-rail::-webkit-scrollbar { display: none; }
.review-card {
  flex: 0 0 380px;
  scroll-snap-align: center;
  background: var(--bv-surface);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-r-xl);
  padding: 32px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  will-change: transform, opacity;
}
.review-card blockquote {
  margin: 0;
  font-size: var(--bv-fs-lg);
  line-height: 1.6;
  flex: 1;
}
.review-card figcaption { display: flex; align-items: center; gap: var(--bv-sp-4); }
.review-card__avatar {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 50%;
  object-fit: cover;
}
.review-card__who { font-size: var(--bv-fs-base); color: var(--bv-ink-mute); }
.review-card__who strong { color: var(--bv-ink); display: block; font-size: var(--bv-fs-md); }

/* ---------------------------------------------------------------------------
   Plans
   -------------------------------------------------------------------------- */
.plan-card {
  background: var(--bv-surface);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-r-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: var(--bv-sp-4);
}
.plan-card h3 { font-size: var(--bv-fs-xl); font-weight: 600; color: var(--bv-ink-mute); }
.plan-card__price { display: flex; align-items: baseline; gap: var(--bv-sp-2); }
.plan-card__num { font-family: var(--bv-font-display); font-size: 40px; font-weight: 700; }
.plan-card__unit { font-size: var(--bv-fs-md); color: var(--bv-ink-mute); }
.plan-card__note { font-size: var(--bv-fs-base); color: var(--bv-ink-soft); }
.plan-card > .btn-primary, .plan-card > .btn-outline { margin-top: auto; }

.plan-card--best {
  position: relative;
  background: var(--bv-ink);
  color: var(--bv-bg);
  border: none;
  box-shadow: var(--bv-shadow-sheet);
}
.plan-card--best h3, .plan-card--best .plan-card__unit { color: var(--bv-dark-soft); }
.plan-card--best .plan-card__num { color: var(--bv-accent); }
.plan-card--best .plan-card__note { color: var(--bv-dark-soft); }
.plan-card--best .plan-card__note s { color: var(--bv-dark-soft); white-space: nowrap; }
.plan-card--best .plan-card__note strong { color: var(--bv-bg); font-size: var(--bv-fs-lg); white-space: nowrap; }
.plan-badge {
  position: absolute;
  top: -14px; left: 32px;
  background: var(--bv-accent);
  color: var(--bv-accent-ink);
  font-size: var(--bv-fs-xs);
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--bv-r-pill);
}
.plans-ok { font-size: var(--bv-fs-md); font-weight: 600; color: var(--bv-ok); }
.plans-fineprint { font-size: var(--bv-fs-base); color: var(--bv-ink-mute); }
.plans-fineprint strong { color: var(--bv-ink); }

/* ---------------------------------------------------------------------------
   Devices — chip links
   -------------------------------------------------------------------------- */
.device-chips { display: flex; gap: var(--bv-sp-3); flex-wrap: wrap; }
.chip--device {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bv-ink);
  text-decoration: none;
  background: var(--bv-bg);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-r-pill);
  padding: 12px 22px;
  font-size: var(--bv-fs-md);
  font-weight: 600;
  transition: background var(--bv-dur) ease, color var(--bv-dur) ease, border-color var(--bv-dur) ease;
}
.chip--device:hover { background: var(--bv-ink); border-color: var(--bv-ink); color: var(--bv-bg); }

/* ---------------------------------------------------------------------------
   "Risk-free", support, FAQ
   -------------------------------------------------------------------------- */
.risk-card {
  /* Flat sub-block inside the devices section: card chrome (border + shadow)
     on the same white surface read as a stray plate. */
  margin-top: var(--bv-sp-4);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.risk-card h3 { font-size: clamp(22px, 20px + 0.7vw, 26px); }
.risk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Fixed 2×2: four facts in auto-fit columns left a lone item + a hole. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bv-sp-4);
  font-size: var(--bv-fs-md);
  line-height: 1.45;
  color: var(--bv-ink-soft);
}
@media (max-width: 720px) {
  .risk-list { grid-template-columns: 1fr; }
}

.support-card {
  /* Lives at the end of the FAQ section (cream) — white card like the
     FAQ items around it */
  max-width: var(--bv-w-prose);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--bv-surface);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-r-xl);
  padding: clamp(24px, 20px + 1vw, 32px) clamp(24px, 20px + 1.5vw, 36px);
  flex-wrap: wrap;
}
.support-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 96px;
  box-shadow: 0 6px 18px rgba(43, 32, 24, 0.15);
}
.support-card__text { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: var(--bv-sp-2); }
.support-card__text h3 { font-size: 22px; }
.support-card__text p { font-size: var(--bv-fs-lg); line-height: var(--bv-lh); color: var(--bv-ink-soft); }

/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: var(--bv-sp-3); }
.faq-item {
  background: var(--bv-surface);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-r-md);
  padding: 22px 26px;
  transition: border-color var(--bv-dur-fast) ease;
}
.faq-item:hover { border-color: var(--bv-accent); }
.faq-item summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bv-sp-4);
  font-size: var(--bv-fs-xl);
  font-weight: 600;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chevron {
  color: var(--bv-accent);
  font-size: 24px;
  font-weight: 400;
  transition: transform 0.2s var(--bv-ease-out);
}
.faq-item[open] .faq-chevron { transform: rotate(45deg); }
.faq-item p {
  font-size: var(--bv-fs-md);
  line-height: 1.6;
  color: var(--bv-ink-soft);
  margin: 14px 0 0;
}
.faq-item[open] > p { animation: bv-fadein 0.35s ease; }
/* Link from a short FAQ answer to the full guide — the FAQ stays the summary. */
.faq-more {
  display: inline-block;
  margin-top: var(--bv-sp-3);
  font-size: var(--bv-fs-sm);
  font-weight: 600;
  color: var(--bv-accent);
  text-decoration: none;
}
.faq-more:hover { color: var(--bv-accent-strong); text-decoration: underline; }
.faq-item[open] > .faq-more { animation: bv-fadein 0.35s ease; }

/* ---------------------------------------------------------------------------
   Final CTA and footer
   -------------------------------------------------------------------------- */
.final-cta-section { background: var(--bv-ink); color: var(--bv-bg); padding: 88px var(--bv-gutter); }
.final-cta-section .container--prose {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}
.final-cta-section h2 { font-size: clamp(26px, 22px + 1.3vw, 36px); }
.final-logo { height: 64px; width: auto; }
.final-lead { font-size: var(--bv-fs-xl); line-height: var(--bv-lh); color: var(--bv-dark-soft); max-width: 520px; text-wrap: pretty; }
.final-cta-row { display: flex; align-items: center; gap: var(--bv-sp-4); flex-wrap: wrap; justify-content: center; }
.final-guarantee { font-size: var(--bv-fs-base); color: var(--bv-ok-soft); font-weight: 600; text-wrap: pretty; }

/* .site-footer is a shared component defined in brand.css (used by the landing
   and the content pages alike). No page-specific footer rules here. */

/* ---------------------------------------------------------------------------
   Floating help button and sticky mobile CTA
   -------------------------------------------------------------------------- */
.float-help {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  z-index: 55;
  box-shadow: var(--bv-shadow-float);
}

/* Sticky CTA: html.has-sticky-cta is toggled by scroll (see _setupStickyCta);
   slides up with a fade; ignores taps while hidden. */
.sticky-cta-bar {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.sticky-cta-bar .btn-primary { pointer-events: auto; box-shadow: var(--bv-shadow-float); }
html.has-sticky-cta .sticky-cta-bar {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ---------------------------------------------------------------------------
   Responsive: structural changes clamp() cannot cover
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .hero-section {
    grid-template-columns: 1fr;
    padding-top: 28px;
    padding-bottom: var(--bv-sp-2);
    gap: 36px;
  }
  .hero-img { max-width: 210px; }
  /* Perks under the CTA: one per line with a bullet (desktop keeps the row) */
  .hero-perks { flex-direction: column; gap: 10px; }
  .hero-perks > span::before { content: '•'; color: var(--bv-accent); font-weight: 700; margin-right: 10px; }
  .top-bar__inner { gap: var(--bv-sp-4); }
  .plan-card--best { order: -1; }
  .float-help { font-size: var(--bv-fs-sm); padding: 12px 18px; }
  /* While the bar is visible, the help button sits above it, not under it */
  html.has-sticky-cta .float-help { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 540px) {
  .top-nav .nav-link { display: none; }
  /* Compact header CTA: one word, no wrapping */
  .header-cta { font-size: var(--bv-fs-sm); padding: 10px 18px; }
  .header-cta .cta-word { display: none; }
  /* The cabinet link stays reachable for existing customers */
  .top-nav .nav-cp { display: inline; font-size: var(--bv-fs-sm); }
  .top-nav .nav-cp .nav-cp-full { display: none; }
  .top-nav .nav-cp .nav-cp-short { text-transform: capitalize; }
  .review-card { flex: 0 0 84vw; padding: 26px; }
  /* Buttons: keep the primary CTA prominent but stop it overflowing */
  .btn-lg { font-size: var(--bv-fs-md); padding: 16px 26px; }
  .hero-copy { gap: var(--bv-sp-4); }
  /* Tighter hero: green reassurance line right after the CTA, perks below */
  .hero-green { order: 1; }
  .hero-perks { order: 2; }
}

/* On desktop the reviews read as a clean left-aligned row: neutralise the
   carousel paddings and the JS tilt/dim (great only on a phone). */
@media (min-width: 721px) {
  .reviews-rail { margin: 0; padding: 12px 4px 16px; }
  .review-card { transform: none !important; opacity: 1 !important; scroll-snap-align: start; }
  /* Gestalt: a dot before EVERY perk (not between them) — a between-only
     separator lands at the start of the line when the row wraps */
  .hero-perks > span::before { content: '·'; color: var(--bv-accent); font-weight: 700; margin-right: 10px; }
  /* Sticky CTA is a mobile-only pattern */
  .sticky-cta-bar { display: none; }
}