/**
 * Homepage v5 — approved h1c-v5 redesign port.
 *
 * Source of truth: docs/design/mockups/hybrids/h1c-v5.html (approved mockup)
 * + docs/design/DESIGN.md (values canon).
 *
 * Everything is namespaced under the .hpv5 root class so nothing bleeds into
 * site chrome (header/footer stay on the existing theme CSS until the Phase 2
 * nav/footer redesign). Enqueued ONLY on templates/template-homepage-v5.php.
 *
 * Fonts are self-hosted: Inter variable latin woff2 (covers 400–800) +
 * existing Hobo woff2. No external font fetches.
 *
 * Padding discipline: media-query overrides restate the complete shorthand —
 * never a partial longhand override on top of a shorthand base.
 */

/* ── Self-hosted fonts ────────────────────────────────────────────────────── */
@font-face {
  font-family: 'InterV5';
  src: url('../fonts/inter/inter-latin-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HoboV5';
  src: url('../fonts/hobo.woff2') format('woff2'),
       url('../fonts/hobo.ttf') format('truetype');
  font-display: swap;
}

/* ── Tokens (scoped to the v5 root — DESIGN.md values) ────────────────────── */
.hpv5 {
  --navy: #1B3A5C;
  --navy-deep: #142A44;
  --red: #C41E3A;
  --red-hover: #A8172F;
  --ink: #1A2A33;
  --secondary: #475569;
  --subtle: #64748B;
  --border: #E5E7EB;
  --surface: #F9FAFB;
  --on-navy-muted: #B8C7D9;
  --success: #2F7D4A;
  --navy-tint: #EAF0F7;
  --steel: #A5B3BB;
  --hobo: 'HoboV5', 'Hobo', 'Trebuchet MS', sans-serif;
  --inter: 'InterV5', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  font-family: var(--inter);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.hpv5, .hpv5 *, .hpv5 *::before, .hpv5 *::after { box-sizing: border-box; }
.hpv5 h1, .hpv5 h2, .hpv5 h3, .hpv5 p, .hpv5 blockquote, .hpv5 figure { margin: 0; padding: 0; }
/* base.css declares `p { color:#333 }` directly on the element, which beats
   inheritance from any container — on navy sections that rendered paragraphs
   near-invisible (fork titles, consign body, review author). Restore normal
   inheritance for every paragraph inside the v5 scope. */
.hpv5 p { color: inherit; }
.hpv5 .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;
}
.hpv5 img { max-width: 100%; display: block; border: 0; }
.hpv5 a { text-decoration: none; color: inherit; }

.hpv5 .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

.hpv5 .btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--inter);
  font-weight: 700; font-size: 17px;
  padding: 17px 34px; border-radius: 12px;
  transition: background 120ms ease-in-out, transform 120ms ease-in-out;
}
.hpv5 .btn-red { background: var(--red); color: #FFFFFF; }
.hpv5 .btn-red:hover { background: var(--red-hover); color: #FFFFFF; transform: translateY(-1px); }
.hpv5 .btn-ghost {
  border: 2px solid rgba(255,255,255,.92); color: #FFFFFF;
  padding: 15px 32px;
}
.hpv5 .btn-ghost:hover { background: rgba(255,255,255,.12); color: #FFFFFF; }
.hpv5 .btn-navy-outline {
  border: 2px solid var(--navy); color: var(--navy);
  padding: 15px 32px;
  transition: background 120ms ease-in-out, color 120ms ease-in-out;
}
.hpv5 .btn-navy-outline:hover { background: var(--navy); color: #FFFFFF; }
.hpv5 .btn-white { background: #FFFFFF; color: var(--navy); }
.hpv5 .btn-white:hover { background: #EEF2F7; color: var(--navy); }

.hpv5 .ico { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Duotone icon system — two-fill technique on white circles */
.hpv5 .duo { width: 32px; height: 32px; display: block; }
.hpv5 .duo .p { fill: var(--navy); }
.hpv5 .duo .s { fill: var(--steel); }
.hpv5 .duo .w { fill: #FFFFFF; }
.hpv5 .duo-chip {
  border-radius: 50%; flex: none;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px #E8ECF1, 0 0 0 6px rgba(27,58,92,.04), 0 6px 18px rgba(27,58,92,.14);
  display: flex; align-items: center; justify-content: center;
}

/* ── 1. Announcement bar ────────────────────────────── */
.hpv5 .announce {
  background: var(--red);
  color: #FFFFFF;
  font-size: 14px; font-weight: 500;
}
.hpv5 .announce-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 9px 0;
  flex-wrap: wrap;
}
.hpv5 .announce a { font-weight: 800; letter-spacing: .01em; color: #FFFFFF; }
.hpv5 .announce .sep { opacity: .55; }
.hpv5 .announce strong { font-weight: 700; }

/* ── 2. Hero ────────────────────────────────────────── */
.hpv5 .hero {
  position: relative;
  height: 740px;
  overflow: hidden;
  color: #FFFFFF;
}
.hpv5 .hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.hpv5 .hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(27,58,92,.62) 0%,
      rgba(27,58,92,.36) 30%,
      rgba(27,58,92,.46) 60%,
      rgba(20,42,68,.88) 100%);
}
.hpv5 .hero-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%;
  padding-bottom: 84px;
}
.hpv5 .hero h1 {
  font-family: var(--hobo);
  font-weight: 400;
  font-size: 72px;
  line-height: 1.07;
  color: #FFFFFF;
  text-shadow: 0 2px 24px rgba(10,25,42,.45);
  margin-bottom: 14px;
}
.hpv5 .hero-sub {
  font-size: 20px;
  line-height: 1.55;
  font-weight: 500;
  color: rgba(255,255,255,.94);
  max-width: 700px;
  text-shadow: 0 1px 12px rgba(10,25,42,.5);
  margin-bottom: 38px;
}
.hpv5 .hero-sub strong { font-weight: 700; color: #FFFFFF; }
.hpv5 .hero-ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hpv5 .hero-phone-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 18px;
  margin-bottom: 28px;
  min-height: 56px;
  padding: 14px 32px;
  border: 2px solid rgba(255,255,255,.6);
  background: rgba(20,42,68,.5);
  border-radius: 999px;
  font-size: 18px; font-weight: 800; color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  align-self: flex-start;
  transition: background 120ms ease-in-out;
}
.hpv5 .hero-phone-btn .ico { width: 22px; height: 22px; }
.hpv5 .hero-phone-btn:hover { background: rgba(255,255,255,.14); color: #FFFFFF; }

/* ── 3. Two Ways In ─────────────────────────────────── */
.hpv5 .fork { padding: 64px 0 104px; }
.hpv5 .fork-head { text-align: center; margin-bottom: 40px; }
.hpv5 .fork-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hpv5 .fork-panel {
  position: relative; overflow: hidden;
  border-radius: 20px;
  min-height: 400px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #FFFFFF;
}
.hpv5 .fork-panel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 280ms cubic-bezier(0.2, 0, 0, 1);
}
.hpv5 .fork-panel:hover img { transform: scale(1.03); }
.hpv5 .fork-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,58,92,.10) 0%, rgba(20,42,68,.88) 78%);
}
.hpv5 .fork-body { position: relative; z-index: 2; padding: 34px 36px 36px; }
.hpv5 .fork-badge {
  display: inline-block;
  font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255,255,255,.94); color: var(--navy);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 14px;
}
.hpv5 .fork-title {
  font-family: var(--hobo); font-weight: 400;
  font-size: 31px; line-height: 1.12;
  margin-bottom: 10px;
}
.hpv5 .fork-desc {
  font-size: 16.5px; line-height: 1.55;
  color: rgba(255,255,255,.9);
  max-width: 46ch;
  margin-bottom: 18px;
}
.hpv5 .fork-arrow { font-size: 17px; font-weight: 800; letter-spacing: .01em; }

/* ── 5. The Lot, Right Now — white stat cards on navy ─ */
.hpv5 .stats {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #FFFFFF;
  padding: 76px 0 84px;
}
.hpv5 .stats-head { text-align: center; margin-bottom: 36px; }
.hpv5 .stats-eyebrow {
  font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-navy-muted);
  margin-bottom: 10px;
}
.hpv5 .stats-h {
  font-family: var(--hobo); font-weight: 400;
  font-size: 36px; line-height: 1.1;
  color: #FFFFFF;
}
.hpv5 .stats-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hpv5 .stat {
  background: #FFFFFF;
  border-radius: 16px;
  text-align: center;
  padding: 26px 10px 22px;
  box-shadow: 0 10px 30px rgba(10,25,42,.28);
}
/* Tiles are buttons (Garrett 08-17) — real links with a visible affordance. */
.hpv5 a.stat {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms ease;
}
.hpv5 a.stat:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(10,25,42,.4); }
.hpv5 a.stat:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.hpv5 .stat-go {
  display: block;
  margin-top: 8px;
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--red);
  opacity: .85;
  transition: opacity 200ms ease;
}
.hpv5 a.stat:hover .stat-go { opacity: 1; }
.hpv5 .stat-num {
  display: block;
  font-size: 38px; font-weight: 800; line-height: 1.1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hpv5 .stat-rating .stat-num { color: var(--red); }
.hpv5 .stat-num .star-inline { display: inline-block; width: 22px; height: 22px; fill: var(--red); vertical-align: -1px; margin-left: 4px; }
.hpv5 .stat-label {
  display: block; margin-top: 6px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--secondary);
}

/* ── Section scaffolding ────────────────────────────── */
.hpv5 .section { padding: 104px 0; }
.hpv5 .eyebrow {
  font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 12px;
}
.hpv5 .section-h {
  font-family: var(--hobo);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: 14px;
}
.hpv5 .section-sub { font-size: 18px; color: var(--secondary); max-width: 62ch; }
.hpv5 .section-head { margin-bottom: 44px; }
.hpv5 .section-head.center { text-align: center; }
.hpv5 .section-head.center .section-sub { margin: 0 auto; }
.hpv5 .section-head-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  margin-bottom: 44px;
}
.hpv5 .see-all {
  font-weight: 700; font-size: 16px; color: var(--navy);
  white-space: nowrap; padding-bottom: 6px;
  border-bottom: 2px solid var(--navy);
}

/* Branded transition divider (v5 / N5) */
.hpv5 .divider { display: flex; align-items: center; gap: 20px; max-width: 460px; margin: 0 auto 44px; }
.hpv5 .divider-line { flex: 1; height: 1px; background: var(--steel); opacity: .55; }
.hpv5 .divider-seal {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px #E8ECF1, 0 4px 14px rgba(27,58,92,.18);
}
.hpv5 .divider-seal img { width: 100%; height: 100%; object-fit: cover; }
.hpv5 .section.tight-top { padding: 52px 0 104px; }

/* ── 6. Category mosaic ─────────────────────────────── */
.hpv5 .mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.hpv5 .tile {
  position: relative; overflow: hidden; border-radius: 20px;
  display: block;
}
.hpv5 .tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 280ms cubic-bezier(0.2, 0, 0, 1);
}
.hpv5 .tile:hover img { transform: scale(1.03); }
/* Zoom-crop for studio shots with branding bands (e.g. factory photo watermarks) */
.hpv5 .tile img.tile-zoom { transform: scale(1.52); }
.hpv5 .tile:hover img.tile-zoom { transform: scale(1.56); }
.hpv5 .tile-lg { grid-column: span 7; height: 420px; }
.hpv5 .tile-md { grid-column: span 5; height: 420px; }
.hpv5 .tile-sm { grid-column: span 3; height: 280px; }
.hpv5 .tile-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,58,92,0) 46%, rgba(20,42,68,.72) 100%);
}
.hpv5 .tile-plate {
  position: absolute; left: 22px; bottom: 22px; right: 22px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: rgba(27,58,92,.90);
  border-radius: 12px;
  padding: 14px 20px;
  color: #FFFFFF;
}
.hpv5 .tile-plate .t-name { font-size: 19px; font-weight: 700; letter-spacing: .01em; }
.hpv5 .tile-plate .t-count { font-size: 13px; font-weight: 600; color: var(--on-navy-muted); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hpv5 .tile-sm .tile-plate { left: 16px; right: 16px; bottom: 16px; padding: 12px 16px; flex-direction: column; gap: 2px; }
.hpv5 .tile-sm .tile-plate .t-name { font-size: 17px; }
.hpv5 .tile-sm .tile-plate .t-count { font-size: 12px; }

/* ── 7. Shop by Budget ──────────────────────────────── */
.hpv5 .budget { background: var(--surface); }
.hpv5 .budget-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.hpv5 .budget-tile {
  background: #FFFFFF; border-radius: 20px; overflow: hidden;
  box-shadow: 0 4px 30px rgba(0,0,0,.08);
  display: flex; flex-direction: column; align-items: stretch;
  border: 1px solid var(--border);
  transition: box-shadow 180ms ease-in-out, transform 180ms ease-in-out;
}
.hpv5 .budget-tile:hover { box-shadow: 0 10px 44px rgba(0,0,0,.14); transform: translateY(-3px); }
.hpv5 .budget-photo { position: relative; aspect-ratio: 16 / 7; overflow: hidden; display: block; }
.hpv5 .budget-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 280ms cubic-bezier(0.2, 0, 0, 1);
}
.hpv5 .budget-tile:hover .budget-photo img { transform: scale(1.04); }
.hpv5 .budget-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,58,92,.04) 30%, rgba(20,42,68,.55) 100%);
}
.hpv5 .budget-unit-chip {
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  background: rgba(255,255,255,.95); color: var(--navy);
  font-size: 12.5px; font-weight: 700; line-height: 1.35;
  padding: 6px 13px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 10px rgba(10,25,42,.25);
  max-width: calc(100% - 28px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hpv5 .budget-body {
  padding: 22px 26px 24px;
  display: flex; flex-direction: column; align-items: flex-start; flex: 1;
}
.hpv5 .budget-lbl {
  font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 2px;
}
.hpv5 .budget-price {
  font-size: 42px; font-weight: 800; color: var(--red);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 6px;
}
.hpv5 .budget-sub { font-size: 16px; color: var(--secondary); margin-bottom: 20px; }
.hpv5 .budget-go {
  margin-top: auto;
  display: flex; align-items: center; gap: 12px;
  font-size: 16px; font-weight: 800; color: var(--red);
}
.hpv5 .budget-go .arr {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--red); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  transition: background 120ms ease-in-out;
}
.hpv5 .budget-tile:hover .budget-go .arr { background: var(--red-hover); }

/* ── 8. Featured inventory ──────────────────────────── */
.hpv5 .lot-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 15px 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.hpv5 .lot-count { font-size: 15.5px; font-weight: 600; color: var(--secondary); }
.hpv5 .lot-count strong { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.hpv5 .lot-toolbar .see-all { padding-bottom: 2px; }
.hpv5 .chip-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 36px;
}
.hpv5 .chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 15px; font-weight: 600; color: var(--secondary);
  transition: border-color 120ms ease-in-out, box-shadow 120ms ease-in-out;
}
.hpv5 .chip strong { color: var(--navy); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 16px; }
.hpv5 .chip:hover { border-color: var(--navy); }
.hpv5 .chip-all { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.hpv5 .chip-all strong { color: #FFFFFF; }
.hpv5 .chip-all:hover { background: var(--navy-deep); }

/* v5 card-styling wrapper — bbi_render_card output restyled to the flat v5
   language. The plugin's glassmorphism (backdrop-filter, translucent bg,
   radius 24) is overridden here, scoped to this grid only. */
.hpv5 .hpv5-units {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.hpv5 .hpv5-units .bbi-card {
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(0,0,0,.08);
  transition: box-shadow 180ms ease-in-out, transform 180ms ease-in-out;
  display: flex; flex-direction: column;
  margin: 0;
}
.hpv5 .hpv5-units .bbi-card:hover {
  box-shadow: 0 8px 40px rgba(0,0,0,.12);
  transform: translateY(-3px);
}
.hpv5 .hpv5-units .bbi-card-img-wrap { border-radius: 0; }
.hpv5 .hpv5-units .bbi-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.hpv5 .hpv5-units .bbi-card-title,
.hpv5 .hpv5-units .bbi-card-title a {
  font-family: var(--inter);
  font-size: 20px; font-weight: 800; line-height: 1.3;
  color: var(--ink);
}
.hpv5 .hpv5-units .bbi-card-stock { font-size: 15px; color: var(--secondary); font-weight: 500; }
.hpv5 .hpv5-units .bbi-price,
.hpv5 .hpv5-units .bbi-price-sale {
  color: var(--red);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hpv5 .fine {
  margin-top: 34px; text-align: center;
  font-size: 13.5px; color: var(--subtle);
}
.hpv5 .lot-cta { text-align: center; margin-top: 36px; }

/* ── 9. Personas (all four) ─────────────────────────── */
.hpv5 .personas { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.hpv5 .persona {
  background: #FFFFFF; border-radius: 20px;
  box-shadow: 0 4px 30px rgba(0,0,0,.08);
  padding: 34px 34px 32px;
  display: flex; flex-direction: column;
}
.hpv5 .persona-icon {
  width: 60px; height: 60px;
  margin-bottom: 20px;
}
.hpv5 .persona-icon .duo { width: 30px; height: 30px; }
.hpv5 .persona-label {
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 10px;
}
.hpv5 .persona-quote {
  font-family: var(--inter);
  font-size: 20px; font-weight: 700; line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 14px;
}
.hpv5 .persona-pain { font-size: 16.5px; font-weight: 400; color: var(--secondary); line-height: 1.6; margin-bottom: 12px; }
.hpv5 .persona-solve { font-size: 16.5px; color: var(--ink); font-weight: 500; line-height: 1.6; margin-bottom: 22px; }
.hpv5 .persona-cta {
  margin-top: auto;
  font-size: 15.5px; font-weight: 700; color: var(--navy);
}
.hpv5 .persona-cta:hover { color: var(--red); }

/* ── 10. Boat Fit Quiz — its own section ────────────── */
.hpv5 .help { background: var(--surface); }
.hpv5 .quiz-band {
  background: #FFFFFF; border-radius: 20px;
  box-shadow: 0 4px 30px rgba(0,0,0,.08);
  padding: 46px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.hpv5 .help-h {
  font-family: var(--hobo); font-weight: 400;
  font-size: 33px; line-height: 1.15;
  margin-bottom: 14px;
}
.hpv5 .quiz-band .eyebrow { margin-bottom: 10px; }
.hpv5 .quiz-band .help-h { margin-bottom: 10px; }
/* Toy Finder flip word — brand-red, gentle swap; JS skips it under reduced motion. */
.hpv5 .flip-wrap { display: inline-block; color: var(--red); }
.hpv5 .flip-word { display: inline-block; transition: opacity 240ms ease, transform 240ms ease; }
.hpv5 .flip-word.is-out { opacity: 0; transform: translateY(0.35em); }
.hpv5 .quiz-band p.body { font-size: 16.5px; color: var(--secondary); max-width: 52ch; }
.hpv5 .quiz-band .btn { flex: none; }

/* ── 19. Ask Skippy — its own section ───────────────── */
.hpv5 .help-skippy {
  background: var(--navy); border-radius: 20px;
  color: #FFFFFF;
  padding: 44px 48px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.hpv5 .skippy-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.hpv5 .skippy-head img { width: 54px; height: 54px; border-radius: 50%; }
.hpv5 .skippy-badge {
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-navy-muted);
  margin-bottom: 4px;
}
.hpv5 .help-skippy .help-h { margin-bottom: 0; color: #FFFFFF; }
.hpv5 .help-skippy p.body { font-size: 16px; color: rgba(255,255,255,.88); margin-bottom: 26px; max-width: 56ch; }
.hpv5 .ask-form { display: flex; gap: 10px; width: 100%; margin: 0 0 14px; }
.hpv5 .ask-input {
  flex: 1; min-width: 0;
  font-family: var(--inter); font-size: 16px;
  padding: 15px 18px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
  color: #FFFFFF;
}
.hpv5 .ask-input::placeholder { color: rgba(255,255,255,.6); }
.hpv5 .ask-btn {
  font-family: var(--inter); font-weight: 700; font-size: 16px;
  background: var(--red); color: #FFFFFF;
  border: 0; border-radius: 12px;
  padding: 15px 26px; cursor: pointer;
  transition: background 120ms ease-in-out;
  white-space: nowrap;
}
.hpv5 .ask-btn:hover { background: var(--red-hover); }
.hpv5 .ask-hint { font-size: 13.5px; color: var(--on-navy-muted); }

/* ── 11. Reviews navy band ──────────────────────────── */
.hpv5 .review { background: var(--navy); color: #FFFFFF; padding: 112px 0; }
.hpv5 .review-inner { max-width: 820px; margin: 0 auto; text-align: center; padding: 0 32px; }
.hpv5 .review .eyebrow { color: var(--on-navy-muted); }
.hpv5 .review-seal {
  display: flex; align-items: center; justify-content: center;
  width: 88px; height: 88px; border-radius: 50%;
  margin: 0 auto 26px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.4), 0 6px 16px rgba(0,0,0,.35);
  background: #FFFFFF;
}
.hpv5 .review-seal svg { width: 42px; height: 42px; display: block; }
.hpv5 .review-h {
  font-family: var(--hobo); font-weight: 400;
  font-size: 42px; line-height: 1.12;
  color: #FFFFFF;
  margin-bottom: 22px;
}
.hpv5 .review-stars { display: flex; gap: 6px; justify-content: center; margin-bottom: 26px; }
.hpv5 .star { width: 22px; height: 22px; fill: #FFFFFF; flex: none; }
.hpv5 .review blockquote {
  font-size: 25px; line-height: 1.5; font-weight: 500;
  margin-bottom: 28px;
}
.hpv5 .review-author { font-size: 16px; font-weight: 700; letter-spacing: .02em; }
.hpv5 .review-source { font-size: 14.5px; font-weight: 500; color: var(--on-navy-muted); margin-top: 4px; }
.hpv5 .review-rating {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 30px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: 15.5px; font-weight: 600; color: var(--on-navy-muted);
}
.hpv5 .review-rating strong { color: #FFFFFF; font-size: 17px; font-variant-numeric: tabular-nums; }
.hpv5 .review-link { display: inline-block; margin-top: 22px; font-weight: 700; font-size: 16px; color: #FFFFFF; border-bottom: 2px solid rgba(255,255,255,.55); padding-bottom: 4px; }

/* ── 12. Why — six cards ────────────────────────────── */
.hpv5 .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.hpv5 .why-card {
  background: #FFFFFF; border-radius: 20px;
  box-shadow: 0 4px 30px rgba(0,0,0,.08);
  padding: 32px 30px;
  transition: box-shadow 180ms ease-in-out, transform 180ms ease-in-out;
}
.hpv5 .why-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,.12); transform: translateY(-3px); }
.hpv5 .why-icon {
  position: relative;
  width: 68px; height: 68px;
  margin-bottom: 22px;
}
.hpv5 .why-icon .duo { width: 34px; height: 34px; }
.hpv5 .why-num {
  position: absolute; top: -7px; right: -9px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--red); color: #FFFFFF;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  font-variant-numeric: tabular-nums;
}
.hpv5 .why-title { font-size: 19px; font-weight: 800; line-height: 1.35; margin-bottom: 10px; }
.hpv5 .why-body { font-size: 15.5px; color: var(--secondary); line-height: 1.6; }

/* ── 13. Comparison table ───────────────────────────── */
.hpv5 .cmp-scroll { overflow-x: auto; border-radius: 20px; box-shadow: 0 4px 30px rgba(0,0,0,.08); }
.hpv5 .cmp-hint { display: none; text-align: center; font-size: 13px; font-weight: 600; color: var(--subtle); margin-bottom: 14px; }
.hpv5 .cmp {
  width: 100%; border-collapse: collapse;
  background: #FFFFFF;
  font-size: 15.5px;
  min-width: 860px;
}
.hpv5 .cmp th, .hpv5 .cmp td { padding: 16px 22px; text-align: left; border-top: 1px solid var(--border); }
.hpv5 .cmp thead th { border-top: 0; padding: 22px; vertical-align: middle; }
.hpv5 .cmp tbody th { width: 26%; font-weight: 700; color: var(--ink); }
.hpv5 .cmp td.td-us { width: 22%; }
.hpv5 .cmp td.td-them { width: 17.3%; }
.hpv5 .cmp thead .th-us {
  background: var(--navy); color: #FFFFFF;
  font-size: 17px; font-weight: 800;
}
.hpv5 .cmp thead .th-us .th-tag {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-navy-muted); margin-bottom: 2px;
}
.hpv5 .cmp thead .th-them { font-size: 15px; font-weight: 700; color: var(--secondary); }
.hpv5 .cmp thead .th-them span { display: block; font-size: 12.5px; font-weight: 500; color: var(--subtle); }
.hpv5 .cmp .td-us { background: #F2F6FB; font-weight: 600; color: var(--ink); }
.hpv5 .cmp .yes {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--success); vertical-align: -5px;
}
.hpv5 .cmp .yes svg { width: 12px; height: 12px; stroke: #FFFFFF; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hpv5 .cmp .no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  vertical-align: -5px;
}
.hpv5 .cmp .no svg { width: 11px; height: 11px; stroke: var(--secondary); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.hpv5 .cmp .td-them { color: var(--secondary); }
.hpv5 .cmp-cta { display: flex; gap: 16px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }

/* Mobile stacked comparison — no swipe needed */
.hpv5 .cmp-stack { display: none; }
.hpv5 .cmp-row {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: 0 2px 14px rgba(0,0,0,.05);
}
.hpv5 .cmp-row + .cmp-row { margin-top: 12px; }
.hpv5 .cmp-q { font-size: 15.5px; font-weight: 800; line-height: 1.35; margin-bottom: 12px; }
.hpv5 .cmp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hpv5 .cmp-chip {
  display: flex; align-items: center; gap: 9px;
  border-radius: 12px; padding: 11px 12px;
  font-size: 13px; font-weight: 700; line-height: 1.3;
}
.hpv5 .cmp-chip .mark {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.hpv5 .cmp-chip .mark svg { width: 12px; height: 12px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hpv5 .cmp-chip-us {
  background: #EAF4ED;
  border: 1px solid rgba(47,125,74,.4);
  color: var(--ink);
}
.hpv5 .cmp-chip-us .mark { background: var(--success); }
.hpv5 .cmp-chip-us .mark svg { stroke: #FFFFFF; stroke-width: 3; }
.hpv5 .cmp-chip-them {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--subtle);
}
.hpv5 .cmp-chip-them .mark { background: #FFFFFF; border: 1px solid var(--border); }
.hpv5 .cmp-chip-them .mark svg { stroke: var(--subtle); stroke-width: 2.5; }
.hpv5 .cmp-note { margin-top: 14px; font-size: 12.5px; color: var(--subtle); text-align: center; line-height: 1.5; }

/* ── 14. Financing navy band ────────────────────────── */
.hpv5 .financing {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 110%, rgba(244,196,120,.14) 0%, rgba(244,196,120,0) 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #FFFFFF; padding: 104px 0; text-align: center;
}
.hpv5 .financing-mark {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--hobo);
  font-size: clamp(110px, 16vw, 230px);
  line-height: .92;
  color: rgba(255,255,255,.075);
  pointer-events: none; user-select: none;
  white-space: nowrap;
}
.hpv5 .financing .wrap { position: relative; z-index: 1; }
.hpv5 .financing .eyebrow { color: var(--on-navy-muted); }
.hpv5 .financing-h {
  font-family: var(--hobo); font-weight: 400;
  font-size: 40px; line-height: 1.12;
  color: #FFFFFF;
  max-width: 24ch; margin: 0 auto 18px;
}
.hpv5 .financing-sub {
  font-size: 17.5px; color: rgba(255,255,255,.9);
  max-width: 66ch; margin: 0 auto 36px;
}
.hpv5 .financing-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* v5 / N9: American flag accent under financing CTAs */
.hpv5 .fin-flag { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hpv5 .fin-flag-line { width: 72px; height: 1px; background: rgba(255,255,255,.32); }
.hpv5 .fin-flag svg { width: 120px; height: auto; display: block; opacity: .92; }

/* ── 15. Sell or Trade split ────────────────────────── */
.hpv5 .sell { background: var(--surface); }
.hpv5 .sell-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.hpv5 .sell-copy .section-h { margin-bottom: 18px; }
.hpv5 .sell-copy p { font-size: 17px; color: var(--secondary); line-height: 1.65; margin-bottom: 30px; }
.hpv5 .sell-cards { display: flex; flex-direction: column; gap: 18px; }
.hpv5 .sell-copy .btn { font-size: 18px; padding: 19px 40px; }
.hpv5 .sell-card {
  position: relative; overflow: hidden;
  display: flex; gap: 20px; align-items: flex-start;
  background: #FFFFFF; border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 30px rgba(0,0,0,.08);
  padding: 26px 28px;
  transition: box-shadow 180ms ease-in-out, transform 180ms ease-in-out;
}
.hpv5 .sell-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,.12); transform: translateY(-2px); }
.hpv5 .sell-card-pop { border: 2px solid var(--red); padding: 26px 56px 26px 28px; }
.hpv5 .sell-ribbon {
  position: absolute; top: 17px; right: -42px;
  transform: rotate(45deg);
  background: var(--red); color: #FFFFFF;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 44px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.hpv5 .sell-card-photo {
  width: 76px; height: 76px; flex: none; border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(27,58,92,.15);
}
.hpv5 .sell-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.hpv5 .sell-card-label { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.hpv5 .sell-card-desc { font-size: 15px; color: var(--secondary); line-height: 1.55; }

/* ── 16. Consign ────────────────────────────────────── */
.hpv5 .consign { background: var(--navy-deep); color: #FFFFFF; }
.hpv5 .consign .eyebrow { color: var(--on-navy-muted); }
.hpv5 .consign .section-h { color: #FFFFFF; }
.hpv5 .consign-head { text-align: center; margin-bottom: 34px; }
.hpv5 .consign-hook {
  display: flex; align-items: center; justify-content: center;
  gap: 36px; flex-wrap: wrap;
  margin-bottom: 40px;
}
.hpv5 .hook-card {
  background: #FFFFFF; color: var(--ink);
  border-radius: 20px;
  box-shadow: 0 10px 44px rgba(0,0,0,.35);
  padding: 26px 38px 24px;
  display: flex; align-items: center; gap: 30px;
}
.hpv5 .hook-stat { text-align: center; }
.hpv5 .hook-num {
  display: block;
  font-family: var(--hobo); font-weight: 400;
  font-size: 92px; line-height: 1;
}
.hpv5 .hook-num.zero { color: #94A3B8; }
.hpv5 .hook-num.forty { color: var(--red); }
.hpv5 .hook-lbl {
  display: block; margin-top: 8px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--secondary);
  max-width: 16ch;
}
.hpv5 .hook-vs {
  font-size: 13px; font-weight: 800; letter-spacing: .14em;
  color: var(--subtle); text-transform: uppercase;
}
.hpv5 .consign-photo {
  position: relative; overflow: hidden; flex: none;
  width: 330px; border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0,0,0,.4);
  margin: 0;
}
.hpv5 .consign-photo img { width: 100%; height: 208px; object-fit: cover; }
.hpv5 .consign-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,58,92,.06) 38%, rgba(20,42,68,.82) 100%);
}
.hpv5 .consign-photo figcaption {
  position: absolute; left: 16px; right: 16px; bottom: 13px; z-index: 1;
  font-size: 12.5px; font-weight: 700; color: #FFFFFF;
  text-align: center; line-height: 1.4; letter-spacing: .02em;
}
.hpv5 .consign-body {
  max-width: 760px; margin: 0 auto 44px;
  text-align: center;
  font-size: 17px; color: rgba(255,255,255,.88); line-height: 1.65;
}
.hpv5 .consign-body p + p { margin-top: 16px; }
.hpv5 .consign-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 44px; }
.hpv5 .consign-card {
  background: #FFFFFF; color: var(--ink); border-radius: 20px;
  box-shadow: 0 8px 34px rgba(0,0,0,.3);
  padding: 32px 30px;
  text-align: left;
}
.hpv5 .consign-card-icon {
  width: 56px; height: 56px;
  margin-bottom: 18px;
}
.hpv5 .consign-card-icon .duo { width: 28px; height: 28px; }
/* v5 / N10: red-white-blue duotone — owner-directed, consign trio only */
.hpv5 .duo-rwb { box-shadow: 0 0 0 1px rgba(196,30,58,.38), 0 0 0 6px rgba(196,30,58,.06), 0 6px 18px rgba(27,58,92,.14); }
.hpv5 .duo-rwb .duo .s { fill: var(--red); }
.hpv5 .consign-card-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.hpv5 .consign-card-desc { font-size: 15px; color: var(--secondary); line-height: 1.6; }
.hpv5 .consign-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ── 17. FAQ ────────────────────────────────────────── */
.hpv5 .faq-list {
  max-width: 800px; margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 4px 30px rgba(0,0,0,.08);
  padding: 10px 32px;
}
.hpv5 .faq-item { border-bottom: 1px solid var(--border); }
.hpv5 .faq-item:last-child { border-bottom: 0; }
.hpv5 .faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-size: 17.5px; font-weight: 700; line-height: 1.4;
  padding: 25px 2px;
}
.hpv5 .faq-item summary::-webkit-details-marker { display: none; }
/* v5 / N7: section title + open question title share brand navy */
.hpv5 .faq-sec .section-h { color: var(--navy); }
.hpv5 .faq-item details[open] summary { color: var(--navy); }
.hpv5 .faq-item summary svg { width: 20px; height: 20px; stroke: var(--navy); stroke-width: 2.5; fill: none; stroke-linecap: round; flex: none; transition: transform 180ms ease-in-out; }
.hpv5 .faq-item details[open] summary svg { transform: rotate(45deg); }
.hpv5 .faq-a { padding: 0 2px 28px; font-size: 16px; line-height: 1.65; color: var(--secondary); max-width: 68ch; }
.hpv5 .faq-more {
  max-width: 800px; margin: 28px auto 0;
  background: var(--navy); color: #FFFFFF;
  border-radius: 20px;
  padding: 30px 34px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
}
.hpv5 .faq-more strong { display: block; font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.hpv5 .faq-more span { display: block; font-size: 15px; color: var(--on-navy-muted); max-width: 44ch; }
.hpv5 .faq-more .btn { flex: none; }

/* ── OEM strip ──────────────────────────────────────── */
.hpv5 .oem { padding: 72px 0; background: #FFFFFF; border-top: 1px solid var(--border); }
.hpv5 .oem-brand { display: block; margin: 0 auto 34px; height: 64px; width: auto; }
.hpv5 .oem-label {
  text-align: center; font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--subtle);
  margin-bottom: 32px;
}
.hpv5 .oem-row {
  display: flex; align-items: center; justify-content: center;
  gap: 72px; flex-wrap: wrap;
}
.hpv5 .oem-row img { height: 44px; width: auto; }
.hpv5 .oem-row img.tall { height: 56px; }

/* ── 18. Final CTA ──────────────────────────────────── */
.hpv5 .final { position: relative; overflow: hidden; background: var(--navy); color: #FFFFFF; padding: 112px 0; text-align: center; }
.hpv5 .final-mark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, 94%); height: auto;
  opacity: .35; pointer-events: none; user-select: none;
}
.hpv5 .final .wrap { position: relative; z-index: 1; }
.hpv5 .final-h {
  font-family: var(--hobo); font-weight: 400;
  font-size: 44px; line-height: 1.12;
  color: #FFFFFF;
  max-width: 22ch; margin: 0 auto 18px;
}
.hpv5 .final-sub {
  font-size: 18px; color: rgba(255,255,255,.9);
  max-width: 60ch; margin: 0 auto 38px;
}
.hpv5 .final-sub strong { color: #FFFFFF; }
.hpv5 .final-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hpv5 .final-ctas .btn { font-size: 16px; padding: 15px 28px; }
.hpv5 .final-ctas .btn-primary-slot { font-size: 17px; }
.hpv5 .final-hours { margin-top: 30px; font-size: 15px; font-weight: 600; color: var(--on-navy-muted); }

@media (prefers-reduced-motion: reduce) {
  .hpv5 * { transition: none !important; }
}

/* ── Tablet ─────────────────────────────────────────── */
@media (max-width: 1023px) {
  .hpv5 .hero h1 { font-size: 56px; }
  .hpv5 .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .hpv5 .personas, .hpv5 .why-grid, .hpv5 .consign-grid, .hpv5 .budget-grid, .hpv5 .hpv5-units { gap: 18px; }
  .hpv5 .why-grid { grid-template-columns: 1fr 1fr; }
  .hpv5 .sell-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .hpv5 { font-size: 16px; }
  .hpv5 .wrap { padding: 0 20px; }

  .hpv5 .announce-inner {
    flex-wrap: nowrap; white-space: nowrap;
    gap: 7px; font-size: 12px; padding: 8px 0;
  }
  .hpv5 .announce .hide-m { display: none; }
  .hpv5 .hero h1 br { display: none; }

  .hpv5 .hero { height: 660px; }
  .hpv5 .hero-img { object-position: 58% 42%; }
  .hpv5 .hero-scrim {
    background:
      linear-gradient(180deg,
        rgba(27,58,92,.68) 0%,
        rgba(27,58,92,.52) 30%,
        rgba(27,58,92,.62) 60%,
        rgba(20,42,68,.92) 100%);
  }
  .hpv5 .hero h1 { font-size: 42px; margin-bottom: 10px; }
  .hpv5 .hero-sub { font-size: 16.5px; margin-bottom: 26px; }
  .hpv5 .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .hpv5 .btn { width: 100%; padding: 16px 20px; }
  .hpv5 .hero-phone-btn { align-self: stretch; width: 100%; margin-top: 12px; margin-bottom: 26px; min-height: 58px; font-size: 18px; }

  .hpv5 .fork { padding: 44px 0 64px; }
  .hpv5 .fork-head { margin-bottom: 26px; }
  .hpv5 .fork-grid { grid-template-columns: 1fr; gap: 16px; }
  .hpv5 .fork-panel { min-height: 320px; }
  .hpv5 .fork-body { padding: 24px 22px 26px; }
  .hpv5 .fork-title { font-size: 26px; }
  .hpv5 .fork-desc { font-size: 15.5px; }

  .hpv5 .stats { padding: 60px 0 64px; }
  .hpv5 .stats-head { margin-bottom: 24px; }
  .hpv5 .stats-h { font-size: 29px; }
  .hpv5 .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hpv5 .stat { padding: 20px 8px 17px; border-radius: 14px; }
  .hpv5 .stat-num { font-size: 28px; }
  .hpv5 .stat-num .star-inline { width: 18px; height: 18px; }
  .hpv5 .stat-label { font-size: 10.5px; }

  .hpv5 .section { padding: 64px 0; }
  .hpv5 .section-h { font-size: 31px; }
  .hpv5 .section-sub { font-size: 16.5px; }
  .hpv5 .section-head, .hpv5 .section-head-row { margin-bottom: 30px; }
  .hpv5 .section-head-row { flex-direction: column; align-items: flex-start; gap: 14px; }

  .hpv5 .mosaic { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hpv5 .tile-lg { grid-column: span 2; height: 300px; }
  .hpv5 .tile-md { grid-column: span 2; height: 250px; }
  .hpv5 .tile-sm { grid-column: span 1; height: 200px; }
  .hpv5 .tile-plate, .hpv5 .tile-sm .tile-plate {
    left: 12px; right: 12px; bottom: 12px;
    padding: 10px 14px;
    flex-direction: column; gap: 2px;
  }
  .hpv5 .tile-plate .t-name, .hpv5 .tile-sm .tile-plate .t-name { font-size: 15.5px; }
  .hpv5 .tile-plate .t-count { font-size: 11px; white-space: normal; }
  .hpv5 .tile-lg .tile-plate, .hpv5 .tile-md .tile-plate { flex-direction: row; align-items: baseline; }

  .hpv5 .budget-grid { grid-template-columns: 1fr; gap: 16px; }
  .hpv5 .budget-photo { aspect-ratio: 16 / 6; }
  .hpv5 .budget-body { padding: 18px 22px 20px; }
  .hpv5 .budget-price { font-size: 36px; }
  .hpv5 .budget-sub { margin-bottom: 14px; }

  .hpv5 .lot-toolbar { padding: 14px 18px; }
  .hpv5 .chip-row { gap: 8px; margin-bottom: 28px; }
  .hpv5 .chip { padding: 10px 16px; font-size: 13.5px; }
  .hpv5 .chip strong { font-size: 14.5px; }

  .hpv5 .hpv5-units { grid-template-columns: 1fr; gap: 22px; }
  .hpv5 .hpv5-units .bbi-card-title, .hpv5 .hpv5-units .bbi-card-title a { font-size: 19px; }

  .hpv5 .personas { grid-template-columns: 1fr; gap: 20px; }
  .hpv5 .persona { padding: 26px 24px; }
  .hpv5 .persona-quote { font-size: 19px; }
  .hpv5 .persona-pain, .hpv5 .persona-solve { font-size: 16px; }

  .hpv5 .quiz-band { flex-direction: column; align-items: flex-start; gap: 22px; padding: 30px 26px; }
  .hpv5 .help-skippy { padding: 30px 26px; }
  .hpv5 .help-h { font-size: 27px; }
  .hpv5 .ask-form { flex-direction: column; }
  .hpv5 .ask-btn { width: 100%; }

  .hpv5 .review { padding: 64px 0; }
  .hpv5 .review-seal { width: 72px; height: 72px; margin-bottom: 20px; }
  .hpv5 .review-seal svg { width: 34px; height: 34px; }
  .hpv5 .divider { margin-bottom: 28px; gap: 16px; }
  .hpv5 .divider-seal { width: 48px; height: 48px; }
  .hpv5 .section.tight-top { padding: 36px 0 64px; }
  .hpv5 .fin-flag { margin-top: 40px; gap: 18px; }
  .hpv5 .review-h { font-size: 31px; }
  .hpv5 .review blockquote { font-size: 19px; }

  .hpv5 .why-grid { grid-template-columns: 1fr; gap: 20px; }
  .hpv5 .why-card { padding: 26px 24px; }

  .hpv5 .cmp-scroll, .hpv5 .cmp-hint { display: none; }
  .hpv5 .cmp-stack { display: block; }
  .hpv5 .cmp-cta { margin-top: 30px; }

  .hpv5 .financing { padding: 64px 0; }
  .hpv5 .financing-h { font-size: 31px; }
  .hpv5 .financing-sub { font-size: 16px; }
  .hpv5 .financing-mark { font-size: 112px; color: rgba(255,255,255,.095); justify-content: flex-start; padding: 26px 0 0; }

  .hpv5 .sell-card { padding: 22px 20px; gap: 15px; }
  .hpv5 .sell-card-pop { padding: 22px 48px 22px 20px; }
  .hpv5 .sell-card-photo { width: 64px; height: 64px; }
  .hpv5 .sell-copy .btn { font-size: 17px; padding: 17px 24px; }

  .hpv5 .consign-hook { gap: 24px; margin-bottom: 32px; }
  .hpv5 .hook-card { padding: 20px 24px 18px; gap: 20px; width: 100%; justify-content: center; }
  .hpv5 .hook-num { font-size: 68px; }
  .hpv5 .hook-lbl { font-size: 11px; }
  .hpv5 .consign-photo { width: 100%; }
  .hpv5 .consign-photo img { height: 190px; }
  .hpv5 .consign-grid { grid-template-columns: 1fr; gap: 20px; }
  .hpv5 .consign-body { font-size: 16px; }

  .hpv5 .faq-list { padding: 4px 20px; }
  .hpv5 .faq-item summary { font-size: 16px; padding: 20px 2px; gap: 16px; }
  .hpv5 .faq-a { padding: 0 2px 24px; font-size: 15.5px; }
  .hpv5 .faq-more { padding: 26px 22px; }
  .hpv5 .faq-more strong { font-size: 18px; }
  /* v5 / N3: CTA renders one line at 390 */
  .hpv5 .faq-more .btn { font-size: 15px; padding: 15px 10px; white-space: nowrap; }

  .hpv5 .oem { padding: 44px 0; }
  .hpv5 .oem-brand { height: 44px; margin-bottom: 26px; }
  .hpv5 .oem-row { gap: 32px; }
  .hpv5 .oem-row img { height: 32px; }
  .hpv5 .oem-row img.tall { height: 42px; }

  .hpv5 .final { padding: 64px 0; }
  .hpv5 .final-mark { display: none; }
  .hpv5 .final-h { font-size: 31px; }
  .hpv5 .final-sub { font-size: 16.5px; }
}

/* ── Footer seam (this sheet is enqueued ONLY on this template) ──────────────
   header-footer.css gives .tbb-footer a light background, a 3px blue
   border-top, and top padding; design-polish.css adds an animated 3px glow
   line. After the navy final CTA those render as a stray blue rule + white
   band (Garrett 08-17). Collapse the gap so the footer's own navy lead band
   sits flush against the navy final section. Classic pages are untouched. */
body .tbb-footer { padding-top: 0; border-top: 0; }
body .tbb-footer::before { display: none; }