/* ============================================================================
   home-v2.css — the ShirtMath homepage, rebuilt to the owner-approved rendering.

   SCOPE IS THE WHOLE POINT. Every rule below is scoped to `#view-home.home-v2`
   or gated behind `body:has(#view-home.on)`. Nothing here touches :root, .card,
   .btn, headings, the body background or any layout primitive, because Matches,
   Scan, Closet, Account and Build the Look are all built on those and a global
   edit here silently redecorates five other surfaces.

   The palette is white / navy / cobalt / coral and is DELIBERATELY not the
   site-wide cream + terracotta. BIBLE B1 pins cream/terracotta for the product
   surfaces; the owner's homepage rendering supersedes it for this one view only,
   which is exactly why the tokens are local custom properties rather than an
   override of the global ones.

   NEVER add `overflow-x: hidden` to body or any ancestor. That killed
   position:sticky on Matches once already (see match-shell.css:12). The homepage
   uses `clip` for the same reason, and it needs it because the full-bleed bands
   below run to the viewport edge.
   ========================================================================== */

#view-home.home-v2 {
  /* surfaces */
  --hv-canvas:#FAFAF7;
  --hv-surface:#FFFFFF;
  --hv-surface-soft:#F5F8FC;
  --hv-mist:#EAF2FF;
  /* ink */
  --hv-ink:#102A43;
  --hv-navy:#061B30;
  --hv-navy-2:#0B2945;
  --hv-muted:#617386;
  /* for small type on the mist / soft bands, where #617386 lands at 4.3:1 */
  --hv-muted-ink:#4B5D71;
  --hv-line:#D9E3EC;
  /* action */
  --hv-cobalt:#2F65F5;
  --hv-cobalt-hover:#2354D8;
  --hv-coral:#FF624F;
  --hv-coral-hover:#E14A38;
  --hv-success:#18765A;
  /* shape + rhythm */
  --hv-r-s:10px;
  --hv-r-m:16px;
  --hv-r-l:24px;
  --hv-max:1360px;
  --hv-gutter:max(24px, calc((100% - var(--hv-max)) / 2));
  /* type */
  --hv-disp:"Fraunces", Georgia, serif;
  --hv-body:"Karla", system-ui, sans-serif;
  --hv-mono:"DM Mono", ui-monospace, Menlo, monospace;
  --hv-ease:cubic-bezier(.22,.61,.36,1);

  background:var(--hv-canvas);
  color:var(--hv-ink);
  font-family:var(--hv-body);
  font-size:16px;
  line-height:1.55;
}

/* The homepage runs edge to edge. `main` is shared, so the release is gated on
   the home view being the visible one; every other view keeps its own column. */
body:has(#view-home.home-v2.on) main { max-width:none; padding:0; }
/* clip, never hidden — `hidden` establishes a scroll container and breaks sticky */
body:has(#view-home.home-v2.on) { overflow-x:clip; }
/* the shared cream footer belongs to the other views; home ships its own navy one */
body:has(#view-home.home-v2.on) > main > footer { display:none; }
/* the page-wide graph-paper texture is part of the old world — off on home only.
   It is painted twice: a fixed grain on body::before and a fixed grid on body
   itself, so both have to go or it shows through every transparent section. */
body:has(#view-home.home-v2.on)::before { display:none; }
body:has(#view-home.home-v2.on) { background-image:none; background-color:#FAFAF7; }
/* and a third: redesign-system.css paints a blueprint grid on #view-home::before */
#view-home.home-v2::before { display:none; }

#view-home.home-v2 h1,
#view-home.home-v2 h2,
#view-home.home-v2 h3,
#view-home.home-v2 h4 { font-family:var(--hv-disp); color:var(--hv-ink); margin:0; }

#view-home.home-v2 p { margin:0; }

#view-home.home-v2 :focus-visible {
  outline:2px solid var(--hv-cobalt);
  outline-offset:3px;
  border-radius:4px;
}

.hv-wrap {
  max-width:var(--hv-max);
  margin:0 auto;
  padding-inline:24px;
}

.hv-eyebrow {
  font-family:var(--hv-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--hv-muted);
  margin:0;
}

/* --------------------------------------------------------------- buttons --- */
#view-home.home-v2 .hv-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; min-height:48px; padding:0 26px;
  border-radius:var(--hv-r-s);
  border:1.5px solid transparent;
  font-family:var(--hv-body); font-size:15.5px; font-weight:600;
  letter-spacing:.005em; white-space:nowrap; cursor:pointer;
  transition:background-color .18s var(--hv-ease), border-color .18s var(--hv-ease),
             color .18s var(--hv-ease), transform .18s var(--hv-ease);
}
#view-home.home-v2 .hv-btn-coral { background:var(--hv-coral); border-color:var(--hv-coral); color:#FFFFFF; }
#view-home.home-v2 .hv-btn-coral:hover { background:var(--hv-coral-hover); border-color:var(--hv-coral-hover); transform:translateY(-1px); }
#view-home.home-v2 .hv-btn-onnavy { background:transparent; border-color:rgba(255,255,255,.45); color:#FFFFFF; }
#view-home.home-v2 .hv-btn-onnavy:hover { border-color:#FFFFFF; background:rgba(255,255,255,.08); transform:translateY(-1px); }
#view-home.home-v2 .hv-btn-outline { background:transparent; border-color:var(--hv-line); color:var(--hv-ink); }
#view-home.home-v2 .hv-btn-outline:hover { border-color:var(--hv-cobalt); color:var(--hv-cobalt); transform:translateY(-1px); }
#view-home.home-v2 .hv-textlink {
  display:inline-flex; align-items:center; gap:7px; min-height:44px;
  background:none; border:0; padding:0;
  font-family:var(--hv-body); font-size:15px; font-weight:600; color:var(--hv-cobalt);
  cursor:pointer;
}
#view-home.home-v2 .hv-textlink:hover { color:var(--hv-cobalt-hover); text-decoration:underline; text-underline-offset:4px; }

/* ==================================================== 2. SPLIT HERO ======== */
.hv-hero {
  display:grid;
  grid-template-columns:45fr 55fr;
  min-height:640px;
  background:var(--hv-surface-soft);
  border-bottom:1px solid var(--hv-line);
}

.hv-hero-copy {
  background:var(--hv-navy);
  color:#FFFFFF;
  display:flex; flex-direction:column; justify-content:center;
  gap:22px;
  padding:72px 56px 72px var(--hv-gutter);
}
#view-home.home-v2 .hv-hero-copy h1 {
  color:#FFFFFF;
  font-weight:500;
  font-size:clamp(31px, 3.15vw, 45px);
  line-height:1.06;
  letter-spacing:-.02em;
}
#view-home.home-v2 .hv-hero-copy h1 .hv-h1-b { display:block; color:#BFD4FF; }
#view-home.home-v2 .hv-hero-lede {
  font-size:17px; line-height:1.55; color:rgba(255,255,255,.78);
  max-width:44ch;
}
.hv-hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }

/* --- the studio panel: one large garment with live measurement guides ------ */
.hv-hero-studio {
  position:relative;
  background:
    radial-gradient(120% 100% at 15% 0%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    var(--hv-mist);
  display:grid;
  grid-template-columns:minmax(0,1fr) 236px;
  gap:22px;
  align-items:center;
  padding:44px 24px 44px 34px;
}
.hv-hero-figwrap { display:flex; flex-direction:column; align-items:center; gap:14px; min-width:0; }
.hv-hero-figure { display:flex; align-items:center; justify-content:center; width:100%; min-width:0; }
.hv-hero-figure svg { width:100%; height:auto; max-height:452px; display:block; }
.hv-hero-caption {
  font-family:var(--hv-mono); font-size:10.5px; letter-spacing:.1em; line-height:1.5;
  text-transform:uppercase; color:var(--hv-muted-ink); text-align:center; margin:0;
}

/* live cobalt guide styling — one place, so the SVG stays free of inline colour */
.hv-guide-line { stroke:var(--hv-cobalt); stroke-width:1.25; fill:none; vector-effect:non-scaling-stroke; }
.hv-guide-tick { stroke:var(--hv-cobalt); stroke-width:1.25; vector-effect:non-scaling-stroke; }
.hv-guide-shape { fill:rgba(47,101,245,.06); stroke:var(--hv-navy-2); stroke-width:1.5; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.hv-guide-label {
  font-family:var(--hv-mono); font-size:9.5px; letter-spacing:.1em;
  fill:var(--hv-cobalt-hover); text-transform:uppercase;
}
.hv-guide-val { font-family:var(--hv-mono); font-size:11px; fill:var(--hv-navy); letter-spacing:0; }
.hv-guide-rib { fill:none; stroke:var(--hv-navy-2); stroke-width:1.1; opacity:.5; vector-effect:non-scaling-stroke; }

/* the three comparison garments, stacked at the right of the studio panel */
.hv-hero-compare { display:flex; flex-direction:column; gap:12px; }
.hv-cmp {
  position:relative;
  display:flex; align-items:center; gap:12px;
  width:100%; text-align:left;
  background:var(--hv-surface);
  border:1px solid var(--hv-line);
  border-radius:var(--hv-r-m);
  padding:9px 11px 9px 9px;
  cursor:pointer;
  transition:border-color .18s var(--hv-ease), box-shadow .18s var(--hv-ease), transform .18s var(--hv-ease);
}
.hv-cmp:hover { border-color:var(--hv-cobalt); box-shadow:0 10px 24px -18px rgba(16,42,67,.5); transform:translateY(-1px); }
.hv-cmp-img {
  position:relative; flex:none; width:56px; aspect-ratio:1/1.1;
  background:var(--hv-surface); border-radius:8px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
/* the badge is lifted out of the row so a brand name never has to be truncated */
#view-home.home-v2 .hv-cmp .hv-badge {
  position:absolute; right:10px; top:50%; transform:translateY(-50%); z-index:2;
  width:40px; height:40px; background:var(--hv-mist);
}
#view-home.home-v2 .hv-cmp .hv-badge b { font-size:11.5px; }
#view-home.home-v2 .hv-cmp .hv-badge span { font-size:6.5px; }
.hv-cmp-img img { width:100%; height:100%; object-fit:contain; }
.hv-cmp-meta { min-width:0; flex:1; padding-right:46px; }
.hv-cmp-brand {
  display:block; font-size:13px; font-weight:700; color:var(--hv-ink); line-height:1.25;
}
.hv-cmp-note {
  display:block; font-family:var(--hv-mono); font-size:10px; letter-spacing:.02em;
  color:var(--hv-muted); margin-top:3px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hv-cmp-note-foot {
  font-family:var(--hv-mono); font-size:9.5px; letter-spacing:.04em; line-height:1.5;
  color:var(--hv-muted-ink); margin-top:8px; text-align:center;
}
.hv-badge {
  flex:none; width:46px; height:46px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--hv-mist); border:1.5px solid var(--hv-cobalt); color:var(--hv-navy);
}
.hv-badge b { font-family:var(--hv-mono); font-size:12.5px; line-height:1; font-weight:500; }
.hv-badge span { font-family:var(--hv-mono); font-size:7.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--hv-cobalt-hover); margin-top:1px; }

/* =================================================== 3. TRUST STRIP ======== */
.hv-trust { background:var(--hv-surface); border-bottom:1px solid var(--hv-line); }
.hv-trust .hv-wrap {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:36px;
  padding-block:44px;
}
.hv-trust-item { display:flex; align-items:flex-start; gap:14px; }
.hv-trust-item svg { flex:none; width:26px; height:26px; fill:none; stroke:var(--hv-cobalt); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.hv-trust-item h3 { font-family:var(--hv-body); font-size:15px; font-weight:700; letter-spacing:.005em; }
.hv-trust-item p { font-size:13.5px; color:var(--hv-muted); line-height:1.45; margin-top:3px; }

/* ================================================== 4. MATCHES GRID ======== */
.hv-section { padding-block:64px; }
.hv-section-head {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  margin-bottom:28px;
}
.hv-section-head h2 {
  font-weight:500; font-size:clamp(26px, 2.5vw, 36px); line-height:1.1;
  letter-spacing:-.02em; text-wrap:balance;
}
.hv-section-head p { font-size:14.5px; color:var(--hv-muted); margin-top:7px; max-width:56ch; }

.hv-matchgrid { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:16px; }

.hv-pcard {
  position:relative; display:flex; flex-direction:column;
  background:var(--hv-surface); border:1px solid var(--hv-line);
  border-radius:var(--hv-r-m); overflow:hidden;
  transition:border-color .18s var(--hv-ease), box-shadow .18s var(--hv-ease), transform .18s var(--hv-ease);
}
.hv-pcard:hover { border-color:var(--hv-cobalt); box-shadow:0 16px 34px -24px rgba(16,42,67,.55); transform:translateY(-2px); }
.hv-pcard-img {
  position:relative; aspect-ratio:1/1.12; background:var(--hv-surface);
  border:0; padding:0; width:100%; cursor:pointer; display:block; overflow:hidden;
}
.hv-pcard-img img { width:100%; height:100%; object-fit:contain; padding:8px; }
.hv-pcard .hv-badge {
  position:absolute; top:10px; left:10px; z-index:2;
  background:rgba(255,255,255,.94); backdrop-filter:blur(3px);
}
.hv-pcard-body { padding:11px 13px 14px; display:flex; flex-direction:column; gap:3px; }
.hv-pcard-brand {
  font-family:var(--hv-mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--hv-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hv-pcard-name {
  font-family:var(--hv-body); font-size:13.5px; font-weight:600; line-height:1.32;
  color:var(--hv-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.64em;
}
.hv-pcard-price { font-family:var(--hv-mono); font-size:13px; color:var(--hv-ink); margin-top:2px; }
.hv-pcard-deltas {
  display:grid; grid-template-columns:repeat(4, 1fr); column-gap:8px; row-gap:0;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--hv-line);
}
.hv-d { display:flex; flex-direction:column; gap:1px; min-width:0; }
.hv-d-k {
  font-family:var(--hv-mono); font-size:8.5px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--hv-muted); white-space:nowrap;
}
.hv-d-v { font-family:var(--hv-mono); font-size:11.5px; color:var(--hv-ink); font-variant-numeric:tabular-nums; }
.hv-d-v.snug  { color:#B4442C; }
.hv-d-v.roomy { color:#2F65F5; }
.hv-d-v.match { color:var(--hv-success); }
/* a plain measurement, not a difference */
.hv-d-v.raw { color:var(--hv-ink); }
.hv-pcard-nomeas {
  margin-top:10px; padding-top:10px; border-top:1px solid var(--hv-line);
  font-family:var(--hv-mono); font-size:10px; letter-spacing:.05em; color:var(--hv-muted);
}
.hv-pcard-oos {
  position:absolute; right:10px; top:10px; z-index:2;
  font-family:var(--hv-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--hv-navy); color:#fff; padding:3px 7px; border-radius:5px;
}

/* ==================================================== 5. CATEGORIES ======== */
.hv-cats { background:var(--hv-surface); border-block:1px solid var(--hv-line); }
.hv-catgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.hv-cat {
  display:flex; flex-direction:column; align-items:center; gap:0;
  background:var(--hv-surface-soft); border:1px solid var(--hv-line);
  border-radius:var(--hv-r-m); padding:22px 18px 18px;
  cursor:pointer; text-align:center;
  transition:border-color .18s var(--hv-ease), background-color .18s var(--hv-ease), transform .18s var(--hv-ease);
}
.hv-cat:hover { border-color:var(--hv-cobalt); background:var(--hv-mist); transform:translateY(-2px); }
.hv-cat-img {
  width:100%; height:168px; display:flex; align-items:flex-end; justify-content:center;
  margin-bottom:16px;
}
.hv-cat-img img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.hv-cat-img.hv-cat-noimg svg { width:74px; height:74px; fill:none; stroke:var(--hv-cobalt); stroke-width:1.3; stroke-linejoin:round; }
.hv-cat-foot { display:flex; align-items:center; justify-content:center; gap:8px; }
.hv-cat-name { font-family:var(--hv-body); font-size:15.5px; font-weight:700; color:var(--hv-ink); }
.hv-cat-foot svg { width:15px; height:15px; fill:none; stroke:var(--hv-cobalt); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hv-cat-n { font-family:var(--hv-mono); font-size:11px; letter-spacing:.05em; color:var(--hv-muted-ink); margin-top:6px; }
.hv-cat[aria-pressed="true"] { border-color:var(--hv-cobalt); background:var(--hv-mist); }

/* ======================================================== 6. BRANDS ======== */
.hv-brands { background:var(--hv-mist); padding-bottom:0; }
.hv-brands .hv-section { padding-block:58px 28px; }
.hv-brandrow {
  display:grid; grid-template-columns:repeat(6, 1fr);
  border-top:1px solid rgba(16,42,67,.13);
  border-bottom:1px solid rgba(16,42,67,.13);
}
.hv-brand {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:none; border:0; border-left:1px solid rgba(16,42,67,.13);
  padding:26px 12px; cursor:pointer; min-height:104px;
  transition:background-color .18s var(--hv-ease);
}
.hv-brand:first-child { border-left:0; }
/* redesign-system.css sizes .brand-card for the old 158px rail; the class stays
   so the app's own brand->Matches handler keeps working, the sizing does not. */
#view-home.home-v2 .hv-brand.brand-card { width:auto; flex:auto; }
.hv-brand:hover { background:rgba(255,255,255,.62); }
.hv-brand-name {
  font-family:var(--hv-disp); font-weight:500; font-size:17px; line-height:1.15;
  color:var(--hv-navy); letter-spacing:-.01em; text-align:center;
}
.hv-brand-n { font-family:var(--hv-mono); font-size:11px; letter-spacing:.05em; color:var(--hv-muted-ink); }

/* ================================================== 7. HOW IT WORKS ======== */
.hv-hiw { background:var(--hv-surface); border-top:1px solid var(--hv-line); }
.hv-hiw .hv-wrap {
  display:grid; grid-template-columns:46fr 54fr; gap:56px; align-items:center;
  padding-block:72px;
}
.hv-hiw-shot {
  position:relative; background:var(--hv-surface-soft);
  border:1px solid var(--hv-line); border-radius:var(--hv-r-l);
  padding:30px 30px 42px; aspect-ratio:4/3.5;
}
.hv-hiw-canvas { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.hv-hiw-canvas svg { width:100%; height:100%; }
.hv-hiw-shot-cap {
  position:absolute; left:0; right:0; bottom:16px; text-align:center; margin:0;
  font-family:var(--hv-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--hv-muted-ink);
}
.hv-hiw-copy h2 { font-weight:500; font-size:clamp(26px, 2.5vw, 38px); line-height:1.08; letter-spacing:-.02em; }
.hv-steps { list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:20px; }
.hv-steps li { display:grid; grid-template-columns:38px 1fr; gap:16px; align-items:start; }
.hv-step-n {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--hv-mist); color:var(--hv-cobalt-hover);
  font-family:var(--hv-mono); font-size:13.5px;
}
.hv-steps h3 { font-family:var(--hv-body); font-size:15.5px; font-weight:700; }
.hv-steps p { font-size:14.5px; color:var(--hv-muted); line-height:1.5; margin-top:3px; }
.hv-hiw-cta { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:30px; }

/* ==================================================== 8. FIT PROOF ========= */
.hv-proof { background:var(--hv-canvas); border-top:1px solid var(--hv-line); }
.hv-proof .hv-wrap {
  display:grid; grid-template-columns:40fr 60fr; gap:56px; align-items:center;
  padding-block:72px;
}
.hv-proof-copy h2 { font-weight:500; font-size:clamp(26px, 2.5vw, 38px); line-height:1.08; letter-spacing:-.02em; }
.hv-proof-copy p { font-size:16px; color:var(--hv-muted); line-height:1.6; margin-top:16px; max-width:46ch; }
.hv-proof-pair {
  display:grid; grid-template-columns:1fr 44px 1fr; gap:0; align-items:center;
}
.hv-proof-eq {
  display:flex; align-items:center; justify-content:center;
  font-family:var(--hv-mono); font-size:22px; color:var(--hv-cobalt);
}
/* the relationship between the two cards is stated in words for screen readers,
   never left to a glyph alone */
#view-home.home-v2 .hv-sr {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.hv-mcard {
  background:var(--hv-surface); border:1px solid var(--hv-line);
  border-radius:var(--hv-r-m); padding:20px 20px 14px;
}
.hv-mcard-head {
  font-family:var(--hv-mono); font-size:10px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--hv-cobalt); padding-bottom:10px; border-bottom:1px solid var(--hv-line);
}
.hv-mcard-sub {
  font-size:13.5px; font-weight:600; color:var(--hv-ink); margin-top:11px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.7em;
}
.hv-mrow {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:9px 0; border-top:1px solid var(--hv-line);
  font-family:var(--hv-mono); font-size:13px;
}
.hv-mrow:first-of-type { border-top:0; }
.hv-mrow-k { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--hv-muted); }
.hv-mrow-v { color:var(--hv-ink); font-variant-numeric:tabular-nums; }
.hv-proof-note { font-family:var(--hv-mono); font-size:10.5px; color:var(--hv-muted); margin-top:14px; line-height:1.5; }

/* ====================================================== 9. FOOTER ========== */
.hv-footer { background:var(--hv-navy); color:rgba(255,255,255,.72); }
.hv-footer .hv-wrap { padding-block:56px 30px; }
.hv-footer-top { display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr)); gap:40px; }
.hv-footer-mark {
  font-family:var(--hv-disp); font-size:22px; font-weight:600; color:#FFFFFF;
  letter-spacing:-.01em;
}
.hv-footer-blurb { font-size:14px; line-height:1.6; color:rgba(255,255,255,.66); margin-top:12px; max-width:38ch; }
.hv-footer h3 {
  font-family:var(--hv-mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.68); margin-bottom:14px;
}
.hv-footer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.hv-footer li button,
.hv-footer li a {
  background:none; border:0; padding:5px 0; min-height:34px;
  font-family:var(--hv-body); font-size:14px; color:rgba(255,255,255,.72);
  text-align:left; cursor:pointer; text-decoration:none;
  transition:color .16s var(--hv-ease);
}
.hv-footer li button:hover,
.hv-footer li a:hover { color:#FFFFFF; text-decoration:underline; text-underline-offset:3px; }
.hv-footer-note {
  font-size:13px; line-height:1.55; color:rgba(255,255,255,.62); margin-top:16px; max-width:30ch;
}
.hv-footer-bottom {
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:flex-start;
}
.hv-footer-legal {
  font-family:var(--hv-mono); font-size:11px; line-height:1.7;
  color:rgba(255,255,255,.66); max-width:88ch;
}
.hv-footer-copy { font-family:var(--hv-mono); font-size:11px; color:rgba(255,255,255,.66); white-space:nowrap; }
#view-home.home-v2 .hv-footer :focus-visible { outline-color:#8FB4FF; }

/* ============================================= HEADER (shared skin) ======== */
/* SMPAGES-V1: one definition,
three more surfaces. How it works,
Account
   overview and My closet set body[data-smp-route] and wear the SAME header the
   homepage already ships. A third copy of these declarations would drift; Matches
   keeps its own deliberate pill-button variant in matches-v2.css. */
/* Scoped with :has so Matches / Scan / Closet / Account keep the cream header
   they were designed against. Only the homepage wears the white/navy one. */
body:has(#view-home.home-v2.on) .topbar,
body[data-smp-route] .topbar {
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #D9E3EC;
}
body:has(#view-home.home-v2.on) .topbar-in,
body[data-smp-route] .topbar-in {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  height:72px; max-width:1360px; padding-inline:24px; gap:20px;
}
body:has(#view-home.home-v2.on) .wordmark,
body[data-smp-route] .wordmark {
  font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:20px;
  font-variation-settings:normal; letter-spacing:-.015em; text-transform:none;
  color:#061B30; gap:9px;
}
body:has(#view-home.home-v2.on) .wordmark .rule-icon,
body[data-smp-route] .wordmark .rule-icon { border-color:#2F65F5; }
body:has(#view-home.home-v2.on) .wordmark .rule-icon::before,
body[data-smp-route] .wordmark .rule-icon::before,
body:has(#view-home.home-v2.on) .wordmark .rule-icon::after,
body[data-smp-route] .wordmark .rule-icon::after { background:#2F65F5; }
body:has(#view-home.home-v2.on) nav.tabs,
body[data-smp-route] nav.tabs {
  margin:0; justify-self:center; gap:4px; flex-wrap:nowrap;
}
body:has(#view-home.home-v2.on) .tab,
body[data-smp-route] .tab {
  position:relative; background:none; border:0; border-radius:0;
  font-family:"Karla", system-ui, sans-serif; font-size:14.5px; font-weight:600;
  color:#617386; padding:10px 14px;
}
body:has(#view-home.home-v2.on) .tab:hover,
body[data-smp-route] .tab:hover { background:none; color:#102A43; }
body:has(#view-home.home-v2.on) .tab[aria-current="true"],
body[data-smp-route] .tab[aria-current="true"] {
  background:none; color:#061B30; border-color:transparent;
}
body:has(#view-home.home-v2.on) .tab[aria-current="true"]::after,
body[data-smp-route] .tab[aria-current="true"]::after {
  content:""; position:absolute; left:14px; right:14px; bottom:2px;
  height:2px; background:#2F65F5; border-radius:2px;
}
body:has(#view-home.home-v2.on) .topbar-act,
body[data-smp-route] .topbar-act { justify-self:end; gap:14px; }
body:has(#view-home.home-v2.on) .topbar-scan,
body[data-smp-route] .topbar-scan {
  background:var(--hv-coral); border:1.5px solid var(--hv-coral); color:#FFFFFF;
  border-radius:10px; min-height:42px; padding:0 20px;
  font-family:"Karla", system-ui, sans-serif; font-size:14.5px; font-weight:600;
  display:inline-flex; align-items:center;
}
body:has(#view-home.home-v2.on) .topbar-scan:hover,
body[data-smp-route] .topbar-scan:hover { background:var(--hv-coral-hover); border-color:var(--hv-coral-hover); transform:translateY(-1px); }/* points move into the account menu on home; the pill itself stays in the DOM so
   renderPts() keeps working untouched on every other view. */
body:has(#view-home.home-v2.on) .score-pill { display:none; }
body:has(#view-home.home-v2.on) .sm-acct-btn,
body[data-smp-route] .sm-acct-btn {
  border-radius:10px; min-height:42px; padding:0 16px; font-size:14.5px; font-weight:600;
  font-family:"Karla", system-ui, sans-serif;
  background:transparent; border:1.5px solid #D9E3EC; color:#102A43;
}
body:has(#view-home.home-v2.on) .sm-acct-btn:hover,
body[data-smp-route] .sm-acct-btn:hover { border-color:#2F65F5; color:#2F65F5; }
body:has(#view-home.home-v2.on) .sm-acct-btn.primary,
body[data-smp-route] .sm-acct-btn.primary {
  background:#0B2945; border-color:#0B2945; color:#FFFFFF;
}
body:has(#view-home.home-v2.on) .sm-acct-btn.primary:hover,
body[data-smp-route] .sm-acct-btn.primary:hover { background:#061B30; border-color:#061B30; }
body:has(#view-home.home-v2.on) .sm-acct-ctl,
body[data-smp-route] .sm-acct-ctl { display:flex; gap:8px; align-items:center; }
body:has(#view-home.home-v2.on) .sm-avatar,
body[data-smp-route] .sm-avatar {
  width:40px; height:40px; border-radius:50%;
  background:#EAF2FF; border:1.5px solid #2F65F5; color:#0B2945;
  font-family:"Karla", system-ui, sans-serif; font-size:13.5px; font-weight:700;
}
.sm-menu .hv-pts {
  font-family:"DM Mono", ui-monospace, monospace; font-size:11px;
  letter-spacing:.06em; color:#617386; padding:8px 14px;
  border-bottom:1px solid rgba(16,42,67,.1);
}

@media (max-width:1320px) {
  body:has(#view-home.home-v2.on) .topbar-in {
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    align-items:center;
    height:auto; padding:10px 20px 6px; gap:8px 12px;
  }
  body:has(#view-home.home-v2.on) .wordmark { grid-row:1; grid-column:1; font-size:18px; }
  body:has(#view-home.home-v2.on) .topbar-act {
    grid-row:1; grid-column:2; justify-self:end; gap:8px;
  }
  body:has(#view-home.home-v2.on) nav.tabs {
    grid-row:2; grid-column:1 / -1; justify-self:start;
    max-width:100%; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  body:has(#view-home.home-v2.on) nav.tabs::-webkit-scrollbar { display:none; }
  body:has(#view-home.home-v2.on) .tab { padding:8px 10px; font-size:14px; }
  body:has(#view-home.home-v2.on) .tab[aria-current="true"]::after { left:10px; right:10px; }
  body:has(#view-home.home-v2.on) .topbar-scan { min-height:38px; padding:0 14px; font-size:13.5px; }
  body:has(#view-home.home-v2.on) .sm-acct-btn { min-height:38px; padding:0 12px; font-size:13.5px; }
  body:has(#view-home.home-v2.on) .sm-avatar { width:36px; height:36px; }
}
@media (max-width:430px) {
  body:has(#view-home.home-v2.on) .topbar-in { padding:9px 16px 5px; gap:6px 8px; }
  body:has(#view-home.home-v2.on) .wordmark { font-size:16.5px; gap:7px; }
  body:has(#view-home.home-v2.on) .topbar-scan { padding:0 11px; font-size:13px; }
  body:has(#view-home.home-v2.on) .sm-acct-btn { padding:0 10px; font-size:13px; }
}

/* ==================================================== RESPONSIVE =========== */
@media (max-width:1240px) {
  .hv-matchgrid { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .hv-hero-studio { grid-template-columns:minmax(0,1fr) 200px; gap:18px; padding-left:26px; }
  #view-home.home-v2 .hv-cmp .hv-badge { right:8px; width:38px; height:38px; }
  .hv-cmp-meta { padding-right:42px; }
}
@media (max-width:940px) {
  .hv-hero { grid-template-columns:1fr; min-height:0; }
  .hv-hero-copy { padding:56px 24px 48px; }
  .hv-hero-studio {
    grid-template-columns:1fr; gap:22px; padding:36px 24px 40px;
  }
  .hv-hero-figure svg { max-height:340px; }
  .hv-hiw .hv-wrap,
  .hv-proof .hv-wrap { grid-template-columns:1fr; gap:36px; }
  .hv-footer-top { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:920px) {
  .hv-brandrow { grid-template-columns:repeat(3, 1fr); }
  .hv-brand:nth-child(4) { border-left:0; }
  .hv-brand:nth-child(-n+3) { border-bottom:1px solid rgba(16,42,67,.13); }
}
@media (max-width:760px) {
  .hv-trust .hv-wrap { grid-template-columns:1fr; gap:20px; padding-block:26px; }
  .hv-section { padding-block:44px; }
  .hv-section-head { flex-direction:column; align-items:flex-start; gap:12px; }
  .hv-matchgrid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .hv-catgrid { grid-template-columns:repeat(2, 1fr); gap:12px; }
  .hv-cat-img { height:118px; }
  .hv-hiw .hv-wrap, .hv-proof .hv-wrap { padding-block:48px; }
  .hv-proof-pair { grid-template-columns:1fr; gap:0; }
  .hv-proof-eq { padding:10px 0; }
  .hv-footer-top { grid-template-columns:1fr; gap:26px; }
  .hv-footer-note {
  font-size:13px; line-height:1.55; color:rgba(255,255,255,.62); margin-top:16px; max-width:30ch;
}
.hv-footer-bottom { flex-direction:column; gap:12px; }
}
@media (max-width:480px) {
  .hv-hero-copy { padding:40px 20px 36px; }
  #view-home.home-v2 .hv-hero-copy h1 { font-size:clamp(29px, 8.2vw, 37px); }
  .hv-hero-studio { padding:28px 20px 32px; }
  .hv-wrap { padding-inline:20px; }
  .hv-brandrow { grid-template-columns:repeat(2, 1fr); }
  .hv-brand:nth-child(odd) { border-left:0; }
  .hv-brand:nth-child(-n+4) { border-bottom:1px solid rgba(16,42,67,.13); }
  .hv-pcard-deltas { grid-template-columns:repeat(2, 1fr); row-gap:8px; }
}

@media (prefers-reduced-motion:reduce) {
  #view-home.home-v2 *,
  #view-home.home-v2 *::before,
  #view-home.home-v2 *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  #view-home.home-v2 .hv-btn:hover,
  #view-home.home-v2 .hv-pcard:hover,
  #view-home.home-v2 .hv-cat:hover,
  #view-home.home-v2 .hv-cmp:hover { transform:none; }
}