/* Fit My Curve — v3 homepage additions (layered over home-v2.css) */

/* ---------- 2. immediate proof ---------- */
.v3-proof{max-width:var(--maxw);margin:0 auto;padding:5rem var(--gutter) 1rem;text-align:center}
.v3-proof h2{
  font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(1.8rem,3.4vw,2.6rem);
  letter-spacing:-.02em;margin:.4rem 0 2.4rem;
}
.v3-proof-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.v3-proof-grid > div{
  background:var(--paper);padding:1.6rem 1.4rem;text-align:left;
  display:flex;flex-direction:column;gap:.25rem;
}
.v3-proof-grid b{font-size:1.02rem;font-weight:600}
.v3-proof-grid span{font-size:.88rem;color:var(--ink-soft);line-height:1.45}
@media(max-width:760px){.v3-proof-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.v3-proof-grid{grid-template-columns:1fr}}

/* ---------- 3. show the magic ---------- */
.v3-magic{max-width:var(--maxw);margin:0 auto;padding:5rem var(--gutter) 1rem;text-align:center}
.v3-magic h2{
  font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(1.8rem,3.4vw,2.6rem);
  letter-spacing:-.02em;margin:.4rem 0 2.4rem;
}
.v3-magic-flow{
  max-width:620px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.1rem;
}
.v3-magic-you{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center}
.v3-magic-you span{
  padding:.55em 1.05em;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);font-size:.9rem;font-weight:500;
}
.v3-magic-arrow{font-size:1.6rem;color:var(--wine);line-height:1}
.v3-magic-result{
  padding:.9em 1.6em;border-radius:999px;background:var(--ink);color:#fff;
  font-size:1rem;font-weight:600;letter-spacing:.01em;
}

/* ---------- 5. how fit confidence works ---------- */
.v3-confidence{max-width:var(--maxw);margin:0 auto;padding:5.5rem var(--gutter) 1rem;text-align:center}
.v3-confidence h2{
  font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(1.8rem,3.4vw,2.6rem);
  letter-spacing:-.02em;margin:.4rem 0 .8rem;
}
.v3-confidence-lede{color:var(--ink-soft);max-width:520px;margin:0 auto 2.6rem;line-height:1.6}
.v3-conf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;text-align:left}
.v3-conf-grid article{
  border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem 1.4rem;background:var(--paper);
}
.v3-conf-grid article > span{
  display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;
  border-radius:999px;background:var(--wine);color:#fff;font-size:.9rem;font-weight:700;margin-bottom:.9rem;
}
.v3-conf-grid h3{font-size:1.05rem;font-weight:600;margin:0 0 .45rem}
.v3-conf-grid p{font-size:.9rem;color:var(--ink-soft);line-height:1.5;margin:0}
.v3-confidence-note{
  max-width:640px;margin:2.2rem auto 0;font-size:.92rem;color:var(--ink-soft);line-height:1.6;
}
@media(max-width:860px){.v3-conf-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.v3-conf-grid{grid-template-columns:1fr}}

/* ---------- 6. retailers ---------- */
.v3-shops h2{
  font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(1.7rem,3.2vw,2.4rem);
  letter-spacing:-.02em;margin:.4rem 0 1rem;
}
.v3-shops-lede{max-width:560px;margin:0 auto 2.2rem;color:var(--ink-soft);line-height:1.6}

/* ---------- specific testimonials ---------- */
.v2-reviews figcaption{display:flex;flex-direction:column;gap:.15rem}
.v2-reviews figcaption b{font-weight:600;font-size:.86rem}
.v2-reviews figcaption span{color:var(--wine);font-size:.82rem;letter-spacing:.08em}

/* ---------- quiz progress micro-copy ---------- */
.v3-quiz-progress{
  display:flex;align-items:center;gap:.8rem;margin-top:1.4rem;
  font-size:.86rem;color:var(--ink-soft);
}
.v3-quiz-progress i{
  flex:0 0 88px;height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--wine) 20%,var(--line) 20%);
}

/* ---------- 9. final CTA ---------- */
.v3-final{
  max-width:var(--maxw);margin:0 auto;padding:6rem var(--gutter) 6.5rem;text-align:center;
  border-top:1px solid var(--line);margin-top:5rem;
}
.v3-final h2{
  font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(2rem,4vw,3rem);
  letter-spacing:-.02em;margin:0 0 .8rem;
}
.v3-final p{color:var(--ink-soft);margin:0 0 2rem;line-height:1.6}
.v3-final .v2-hero-note{margin:1.2rem 0 0}

/* ---------- problem pain list (v3 copy) ---------- */
.v3-pain{
  list-style:none;padding:0;margin:1.6rem auto 1.6rem;max-width:560px;
  display:flex;flex-direction:column;gap:.7rem;
}
.v3-pain li{
  font-size:1.05rem;color:var(--ink);line-height:1.5;
  padding-left:1.6rem;position:relative;text-align:left;
}
.v3-pain li::before{
  content:"";position:absolute;left:0;top:.55em;width:.55em;height:.55em;
  border-radius:999px;background:var(--wine);
}
.v3-pain-close{
  font-family:"Fraunces",Georgia,serif;font-size:1.3rem;font-weight:500;
  color:var(--ink);margin:0;
}

/* ---------- 'why we picked it' link ---------- */
.v2-demo-why{
  display:inline-block;margin:-.4rem 0 1rem;font-size:.9rem;font-weight:600;
  color:var(--wine);text-decoration:none;
}
.v2-demo-why:hover{text-decoration:underline}

/* ---------- product card: will it fit? / why? / can I buy it? ---------- */
body.v2 .product-grid .card .card-fit{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:1rem 1.1rem .3rem;
}
body.v2 .product-grid .card .card-fit .match{
  position:static;font-size:.82rem;font-weight:700;padding:.35em .8em;border-radius:999px;
  background:var(--wine);color:#fff;letter-spacing:.01em;
}
body.v2 .product-grid .card .card-in{font-size:.8rem;font-weight:600;color:#2b8a5a}
body.v2 .product-grid .card .card-from{
  padding:0 1.1rem;font-size:.85rem;color:var(--ink-soft);margin:.1rem 0 .7rem;
}
body.v2 .product-grid .card .card-why{
  list-style:none;padding:0 1.1rem;margin:0 0 .7rem;display:flex;flex-direction:column;gap:.28rem;
}
body.v2 .product-grid .card .card-why li{font-size:.84rem;color:var(--ink);line-height:1.35}
body.v2 .product-grid .card .card-risk{
  padding:0 1.1rem;margin:0 0 .9rem;font-size:.8rem;color:#9a6a12;line-height:1.4;
}
body.v2 .product-grid .card .primary{
  display:block;width:auto;margin:0 1.1rem .55rem;padding:.7em 1em;border-radius:8px;
  background:transparent;color:var(--wine);border:1px solid var(--wine);
  font-weight:600;font-size:.86rem;cursor:pointer;text-align:center;
}
body.v2 .product-grid .card .primary:hover{background:rgba(122,35,64,.06)}
body.v2 .product-grid .card .card-buy{
  display:block;width:auto;margin:0 1.1rem .95rem;padding:.8em 1em;border-radius:8px;
  background:var(--ink);color:#fff;border:0;font-weight:600;font-size:.9rem;
  cursor:pointer;text-align:center;
}
body.v2 .product-grid .card .card-buy:hover{opacity:.9}

/* ---------- Fit Profile page ---------- */
.v3-profile{max-width:760px;margin:0 auto;padding:4rem var(--gutter) 6rem}
.v3-profile-head h1{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(1.9rem,3.6vw,2.6rem);letter-spacing:-.02em;margin:.3rem 0 .7rem}
.v3-profile-card{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  padding:1.6rem 1.5rem;margin-bottom:1.2rem;
}
.v3-profile-card h2{font-size:1.05rem;font-weight:600;margin:0 0 .9rem}
.v3-measure{display:flex;flex-wrap:wrap;gap:1.6rem;margin-bottom:.6rem}
.v3-measure span{font-size:.82rem;color:var(--ink-soft);line-height:1.5}
.v3-measure span b{display:block;font-size:1.15rem;color:var(--ink);font-weight:600}
.v3-profile-note{font-size:.9rem;color:var(--ink-soft);line-height:1.55;margin:.3rem 0 0}
.v3-hist{display:block;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.v3-hist:last-child{border-bottom:0}
.v3-profile-locked{opacity:.92}
.v3-locked-tag{
  margin-top:.7rem;font-size:.82rem;font-weight:600;color:var(--wine);
  background:rgba(122,35,64,.07);display:inline-block;padding:.4em .8em;border-radius:999px;
}
.v3-profile-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}

/* ==========================================================================
   EDITORIAL LAYER — top-tier fashion e-commerce design language
   big serif display · wide-tracked kickers · generous rhythm ·
   image/text splits · thin rules · product rail
   ========================================================================== */

/* ---- editorial tokens ---- */
:root{
  --rhythm:clamp(80px,10vw,144px);      /* vertical space between sections */
  --rule:1px solid var(--line);
  --track:.22em;                         /* letter-spacing for kickers */
}

body.v2.v3{background:var(--cream)}

/* ---- wide-tracked kickers, editorial style ---- */
body.v2.v3 .v2-kicker{
  font-size:.7rem;letter-spacing:var(--track);text-transform:uppercase;
  font-weight:600;color:var(--wine);margin-bottom:1rem;
}

/* ---- big display headings ---- */
body.v2.v3 .v3-proof h2,
body.v2.v3 .v3-magic h2,
body.v2.v3 .v3-confidence h2,
body.v2.v3 .v2-shops h2,
body.v2.v3 .v2-reviews h2,
body.v2.v3 .v2-how h2,
body.v2.v3 .v2-demo h2,
body.v2.v3 .v3-final h2{
  font-family:"Fraunces",Georgia,serif;font-weight:500;
  font-size:clamp(2rem,4vw,3rem);line-height:1.02;
  letter-spacing:-.028em;margin:0 0 1.2rem;
}

/* ---- section rhythm: consistent, generous ---- */
body.v2.v3 .v3-proof,
body.v2.v3 .v3-magic,
body.v2.v3 .v3-confidence,
body.v2.v3 .v2-reviews,
body.v2.v3 .v2-how,
body.v2.v3 .v2-shops{
  padding:var(--rhythm) var(--gutter);
}
body.v2.v3 .v2-demo{padding:var(--rhythm) var(--gutter)}

/* thin rules between editorial sections */
body.v2.v3 .v3-proof,
body.v2.v3 .v3-confidence,
body.v2.v3 .v2-how{
  border-top:var(--rule);
}

/* ---- HERO: full-bleed image, copy over it ---- */
body.v2.v3 .v2-hero{
  position:relative;display:block;min-height:min(88vh,760px);
  padding:0;margin:0;background:var(--ink);
  max-width:none;width:100%;          /* full-bleed: override base max-width:1280px */
}
body.v2.v3 .v2-hero-media{
  position:absolute;inset:0;border-radius:0;overflow:hidden;
  width:100%;height:100%;
}
body.v2.v3 .v2-hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 35%;
}
body.v2.v3 .v2-hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,20,22,.28) 0%,rgba(26,20,22,.12) 38%,rgba(26,20,22,.78) 100%);
}
body.v2.v3 .v2-hero-tag{display:none}
body.v2.v3 .v2-hero-copy{
  position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--gutter);min-height:inherit;display:flex;flex-direction:column;
  justify-content:flex-end;padding-bottom:clamp(2.4rem,6vw,5rem);
  padding-top:clamp(6rem,14vh,10rem);
}
body.v2.v3 .v2-hero-copy .v2-kicker{color:#f2d9e0}
body.v2.v3 .v2-hero-copy h1{
  color:#fff;font-family:"Fraunces",Georgia,serif;font-weight:500;
  font-size:clamp(2.5rem,6.2vw,4.5rem);line-height:0.94;letter-spacing:-.03em;
  margin:0 0 1.1rem;max-width:16ch;
}
body.v2.v3 .v2-hero-copy h1 em{font-style:italic;color:#f2d9e0}
body.v2.v3 .v2-hero-copy .v2-lede{
  color:rgba(255,255,255,.9);max-width:46ch;font-size:clamp(1rem,1.4vw,1.18rem);
  line-height:1.55;margin:0 0 .5rem;
}
body.v2.v3 .v2-hero-cta{margin:1.6rem 0 .8rem}
body.v2.v3 .v2-hero-note{color:rgba(255,255,255,.75)}
body.v2.v3 .v2-from{color:rgba(255,255,255,.85);margin-top:.9rem}
body.v2.v3 .v2-from b{color:#fff;font-weight:600}

/* transparent header perched over the hero */
body.v2.v3 .v2-top{
  position:absolute;top:0;left:0;right:0;z-index:20;
  background:transparent;border-bottom:1px solid rgba(255,255,255,.14);
  padding:1.15rem var(--gutter);
}
body.v2.v3 .v2-top .v2-brand{color:#fff;letter-spacing:.02em}
body.v2.v3 .v2-top .v2-nav a{color:rgba(255,255,255,.88)}
body.v2.v3 .v2-top .v2-link{color:rgba(255,255,255,.88)}
body.v2.v3 .v2-top .v2-btn-solid{background:#fff;color:var(--ink)}

/* ---- proof points: editorial 3-col list with rules ---- */
body.v2.v3 .v3-proof-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  max-width:var(--maxw);margin:2.6rem auto 0;text-align:left;
}
body.v2.v3 .v3-proof-grid > div{
  padding:1.4rem 1.6rem;border-top:var(--rule);
}
body.v2.v3 .v3-proof-grid > div:nth-child(-n+3){border-top:0}
body.v2.v3 .v3-proof-grid b{display:block;font-family:"Fraunces",Georgia,serif;font-size:1.15rem;margin-bottom:.3rem}
body.v2.v3 .v3-proof-grid span{font-size:.9rem;color:var(--ink-soft);line-height:1.5}

/* centre the pain list like an editorial pull-quote */
body.v2.v3 .v3-pain-close{
  font-size:clamp(1.3rem,2.6vw,1.9rem);margin-top:1.4rem;
}

/* ---- product demo: 50/50 split, generous ---- */
body.v2.v3 .v2-demo{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);
  align-items:center;max-width:var(--maxw);margin:0 auto;
}
body.v2.v3 .v2-demo-card{
  border-radius:var(--radius);overflow:hidden;background:var(--paper);
  box-shadow:0 24px 60px -32px rgba(26,20,22,.35);
}

/* ---- confidence steps: numbered, rule-separated ---- */
body.v2.v3 .v3-conf-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  max-width:var(--maxw);margin:2.6rem auto 0;text-align:left;
}
body.v2.v3 .v3-conf-grid article{padding:1.6rem 1.6rem 1.6rem 0;border-top:var(--rule)}
body.v2.v3 .v3-conf-grid article span{
  font-family:"Fraunces",Georgia,serif;font-size:2.6rem;color:var(--blush);
  display:block;line-height:1;margin-bottom:.6rem;
}
body.v2.v3 .v3-conf-grid h3{font-size:1.05rem;margin:0 0 .4rem}
body.v2.v3 .v3-conf-grid p{font-size:.9rem;color:var(--ink-soft);line-height:1.55;margin:0}

/* ---- retailers: logo strip in grey, evenly spaced ---- */
body.v2.v3 .v2-shop-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.6rem,4vw,3.6rem);
  font-family:"Fraunces",Georgia,serif;font-size:clamp(1.2rem,2.2vw,1.7rem);
  color:#b7aaa4;letter-spacing:.01em;margin:2rem 0 1rem;
}

/* ---- reviews: editorial quote blocks ---- */
body.v2.v3 .v2-review-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.4rem);
  max-width:var(--maxw);margin:2.6rem auto 0;text-align:left;
}
body.v2.v3 .v2-review-grid figure{
  margin:0;padding:1.8rem 1.7rem;background:var(--paper);
  border-radius:var(--radius);border:var(--rule);
}
body.v2.v3 .v2-review-grid blockquote{
  margin:0 0 1.2rem;font-family:"Fraunces",Georgia,serif;font-size:1.12rem;
  line-height:1.5;color:var(--ink);
}
body.v2.v3 .v2-review-grid figcaption b{display:block;font-size:.82rem;font-weight:600;color:var(--ink-soft)}

/* ---- how it works: big numerals, rule-separated ---- */
body.v2.v3 .v2-steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  max-width:var(--maxw);margin:2.6rem auto 0;text-align:left;
}
body.v2.v3 .v2-steps article{padding:1.8rem 1.6rem 1.8rem 0;border-top:var(--rule)}
body.v2.v3 .v2-step-n{
  font-family:"Fraunces",Georgia,serif;font-size:3rem;line-height:1;
  color:var(--ink);display:block;margin-bottom:.8rem;
}
body.v2.v3 .v2-steps h3{font-size:1.05rem;margin:0 0 .4rem}
body.v2.v3 .v2-steps p{font-size:.9rem;color:var(--ink-soft);line-height:1.55;margin:0}

/* ---- final CTA: dark, full-bleed, centred ---- */
body.v2.v3 .v3-final{
  background:var(--ink);color:#fff;text-align:center;
  padding:var(--rhythm) var(--gutter);margin-top:var(--rhythm);
}
body.v2.v3 .v3-final h2{color:#fff}
body.v2.v3 .v3-final p{color:rgba(255,255,255,.82);max-width:44ch;margin:0 auto 1.8rem}
body.v2.v3 .v3-final .v2-btn-solid{background:#fff;color:var(--ink)}
body.v2.v3 .v3-final .v2-hero-note{color:rgba(255,255,255,.7)}

/* ---- responsive ---- */
@media(max-width:900px){
  body.v2.v3 .v2-demo{grid-template-columns:1fr}
  body.v2.v3 .v3-proof-grid,
  body.v2.v3 .v3-conf-grid,
  body.v2.v3 .v2-steps{grid-template-columns:1fr 1fr}
  body.v2.v3 .v3-conf-grid article:nth-child(-n+2),
  body.v2.v3 .v2-steps article:nth-child(-n+2){border-top:0}
  body.v2.v3 .v2-review-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  body.v2.v3 .v3-proof-grid,
  body.v2.v3 .v3-conf-grid,
  body.v2.v3 .v2-steps{grid-template-columns:1fr}
  body.v2.v3 .v3-conf-grid article:nth-child(n+2),
  body.v2.v3 .v2-steps article:nth-child(n+2){border-top:var(--rule)}
  body.v2.v3 .v2-hero{min-height:min(92vh,680px)}
}

/* HOME-SCREEN BUDGET + OCCASION INPUTS (moved out of the quiz) */
body.v2.v3 .v3-home-inputs{max-width:760px;margin:0 auto;padding:3rem var(--gutter) 4rem}
body.v2.v3 .v3-home-inputs .budget-grid,
body.v2.v3 .v3-home-inputs .occasion-grid{display:flex;flex-wrap:wrap;gap:.6rem}
body.v2.v3 .v3-home-inputs .budget-grid button,
body.v2.v3 .v3-home-inputs .occasion-grid button{
  background:transparent;color:var(--ink);border:1px solid var(--line);
  border-radius:0;padding:.7em 1.25em;font-size:.95rem;cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
body.v2.v3 .v3-home-inputs .budget-grid button:hover,
body.v2.v3 .v3-home-inputs .occasion-grid button:hover{border-color:var(--wine)}
body.v2.v3 .v3-home-inputs .budget-grid button.selected,
body.v2.v3 .v3-home-inputs .occasion-grid button.active{
  background:var(--ink);color:#fff;border-color:var(--ink);
}
body.v2.v3 .v3-home-inputs .v2-quiz-go{margin-top:1.8rem}

/* =========================================================
   RESEARCH APPLIED (Oct 2026) — tokens from Zara, H&M, Uniqlo,
   Farfetch, Dior, Chanel, Balenciaga, Hermès + CRO studies
   ========================================================= */

/* BUTTONS: research = max contrast wins, 4.5:1 min, shape square.
   Zara/H&M/Uniqlo/Farfetch all use black fill + white text, 0px corners. */
body.v2.v3 .v2-btn-solid{
  background:var(--ink);color:#fff;border:0;border-radius:0;
  font-weight:500;letter-spacing:.02em;text-transform:none;
  padding:.95em 1.8em;transition:background .18s ease,transform .18s ease;
}
body.v2.v3 .v2-btn-solid:hover{background:#000}
/* on dark surfaces, invert so contrast stays maximal */
body.v2.v3 .v2-top .v2-btn-solid,
body.v2.v3 .v3-final .v2-btn-solid,
body.v2.v3 .v2-hero-copy .v2-btn-solid{background:#fff;color:var(--ink)}
body.v2.v3 .v2-top .v2-btn-solid:hover,
body.v2.v3 .v3-final .v2-btn-solid:hover,
body.v2.v3 .v2-hero-copy .v2-btn-solid:hover{background:var(--blush)}

/* OUTLINE buttons: 1px hairline, square (Dior/Chanel/Farfetch house style) */
body.v2.v3 .v2-btn-ghost,
body.v2.v3 .v2-btn-outline{
  background:transparent;color:var(--ink);border:1px solid var(--ink);
  border-radius:0;font-weight:500;letter-spacing:.02em;
}
body.v2.v3 .v2-btn-ghost:hover,
body.v2.v3 .v2-btn-outline:hover{background:var(--ink);color:#fff}

/* CARDS: square corners, hairline border, NO soft drop shadow (Hermès flat / Uniqlo) */
body.v2.v3 .v2-review-grid figure,
body.v2.v3 .v2-demo-card,
body.v2.v3 .v3-profile-card{
  border-radius:0;box-shadow:none;border:1px solid var(--line);background:var(--paper);
}
body.v2.v3 .v2-demo-card{box-shadow:0 30px 70px -40px rgba(26,20,22,.28)}

/* KICKERS: 10-13px uppercase tracked — the dominant tier across every site studied */
body.v2.v3 .v2-kicker{
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
}

/* NAV: 13px uppercase tracked (Zara's dominant nav tier) */
body.v2.v3 .v2-top .v2-nav a{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
}

/* PRICE / PRODUCT TYPE: keep body at Inter, product names in Fraunces */
body.v2.v3 .product-grid .card h3{
  font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.06rem;letter-spacing:-.01em;
}

/* 8px-BASED SPACING (research: 8/16/24/32/48) */
body.v2.v3 .v3-profile-card{padding:2rem}
body.v2.v3 .v2-review-grid figure{padding:2rem}

/* Hero video loop — desktop only, fades in over the still poster.
   Covers the ENTIRE hero (inset:0 of .v2-hero-media which is absolute inset:0),
   centred crop so no letterbox/edge is ever visible on wide laptops. */
body.v2.v3 .hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 35%;
  opacity:0;transition:opacity .9s ease;pointer-events:none;
  background:transparent;
}
body.v2.v3 .hero-video.is-ready{opacity:1}
/* MOBILE HEADER: keep the brand + CTA on one line, no overflow.
   The desktop nav is hidden by home-v2.css (max-width:620px); here we
   shrink the solid CTA so it never runs past the viewport edge. */
@media(max-width:620px){
  body.v2.v3 .v2-top{gap:.6rem;padding:1rem var(--gutter);flex-wrap:nowrap}
  body.v2.v3 .v2-nav{display:none}
  body.v2.v3 .v2-actions{gap:.5rem;min-width:0}
  body.v2.v3 .v2-actions .v2-link{display:none}
  body.v2.v3 .v2-top .v2-btn-solid{padding:.7em 1.1em;font-size:.82rem;white-space:nowrap}
  body.v2.v3 .v2-brand{font-size:1.2rem}
}
@media(max-width:400px){
  body.v2.v3 .v2-top .v2-btn-solid{padding:.65em .9em;font-size:.78rem}
  body.v2.v3 .v2-brand{font-size:1.1rem}
}

/* hide video entirely on mobile — the still image carries the hero there */
@media(max-width:899px){body.v2.v3 .hero-video{display:none}}
@media(prefers-reduced-motion:reduce){body.v2.v3 .hero-video{display:none}}

/* =========================================================
   SEO SIZING ARTICLE PAGES (.si-*) — Oct 2026
   ========================================================= */
body.v2.v3 .si-main{background:var(--cream)}
body.v2.v3 .si-crumb{max-width:820px;margin:0 auto;padding:1.6rem var(--gutter) 0;font-size:.82rem;color:var(--ink-soft)}
body.v2.v3 .si-crumb a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
body.v2.v3 .si-crumb span{margin:0 .35rem}
body.v2.v3 .si-wrap{max-width:820px;margin:0 auto;padding:1.6rem var(--gutter) 5rem}
body.v2.v3 .si-kicker{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--wine);margin:0 0 .9rem}
body.v2.v3 .si-wrap h1{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 1.2rem;color:var(--ink)}
body.v2.v3 .si-wrap h2{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.15;margin:2.8rem 0 1rem;color:var(--ink)}
body.v2.v3 .si-wrap p{font-size:1.05rem;line-height:1.7;color:var(--ink);margin:0 0 1.1rem}
body.v2.v3 .si-lede{font-size:1.15rem;line-height:1.65}
body.v2.v3 .si-answer{background:#fff;border:1px solid var(--line);border-left:4px solid var(--wine);padding:1.6rem 1.8rem;margin:1.8rem 0}
body.v2.v3 .si-answer h2{margin:0 0 .9rem;font-size:1.25rem}
body.v2.v3 .si-answer ul{margin:0;padding-left:1.1rem}
body.v2.v3 .si-answer li{margin:.5rem 0;line-height:1.6}
body.v2.v3 .si-tablewrap{overflow-x:auto;margin:1.4rem 0}
body.v2.v3 .si-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);font-size:1rem}
body.v2.v3 .si-table caption{text-align:left;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:.6rem .2rem;caption-side:top}
body.v2.v3 .si-table th,body.v2.v3 .si-table td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
body.v2.v3 .si-table thead th{background:var(--ink);color:#fff;font-weight:500;font-size:.85rem;letter-spacing:.04em}
body.v2.v3 .si-table tbody tr:nth-child(even){background:#faf7f4}
body.v2.v3 .si-table tbody td:first-child{font-weight:600}
body.v2.v3 .si-src{font-size:.86rem;color:var(--ink-soft)}
body.v2.v3 .si-src a{color:var(--wine)}
body.v2.v3 .si-callout{background:#fff;border:1px solid var(--line);padding:1.3rem 1.5rem;margin:1.6rem 0;font-size:1.02rem}
body.v2.v3 .si-steps{padding-left:1.3rem;margin:1.2rem 0}
body.v2.v3 .si-steps li{margin:.7rem 0;line-height:1.65;font-size:1.05rem}
body.v2.v3 .si-cta{background:var(--ink);color:#fff;padding:2.4rem 2rem;margin:3rem 0 1.4rem;text-align:center}
body.v2.v3 .si-cta h2{color:#fff;margin:0 0 .7rem;font-size:1.5rem}
body.v2.v3 .si-cta p{color:rgba(255,255,255,.85);margin:0 0 1.3rem}
body.v2.v3 .si-cta .v2-btn-solid{background:#fff;color:var(--ink)}
body.v2.v3 .si-cta-note{font-size:.85rem !important;color:rgba(255,255,255,.7) !important;margin:.9rem 0 0 !important}
body.v2.v3 .si-related{margin-top:3rem;border-top:1px solid var(--line);padding-top:1.6rem}
body.v2.v3 .si-related h2{font-size:1.15rem;margin:0 0 .8rem}
body.v2.v3 .si-related a{color:var(--wine)}

/* =========================================================
   MOBILE MENU — hamburger + slide-down drawer  (Oct 2026)
   Fixes: on phones the whole .v2-nav was hidden with NO
   replacement, so the logo was the only way home.
   ========================================================= */
body.v2.v3 .v2-menu-toggle{
  display:none;                 /* desktop: never shown */
  margin-left:auto;             /* push to the right of the header */
  width:44px;height:44px;
  border:1px solid var(--line);border-radius:8px;background:#fff;
  cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
body.v2.v3 .v2-menu-toggle span{
  display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;
}
body.v2.v3 .v2-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.v2.v3 .v2-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
body.v2.v3 .v2-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* the drawer itself */
body.v2.v3 .v2-mobile-menu{
  display:none;position:fixed;left:0;right:0;top:0;z-index:40;
  background:var(--cream);border-bottom:1px solid var(--line);
  padding:4.4rem var(--gutter) 1.4rem;
  box-shadow:0 18px 40px rgba(26,20,22,.12);
  transform:translateY(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
}
body.v2.v3 .v2-mobile-menu.open{transform:translateY(0)}
body.v2.v3 .v2-mobile-menu a{
  display:block;padding:.95rem .2rem;font-size:1.08rem;color:var(--ink);
  border-bottom:1px solid var(--line);text-decoration:none;
}
body.v2.v3 .v2-mobile-menu a:last-child{border-bottom:none}
body.v2.v3 .v2-mobile-menu a:active{color:var(--wine)}

@media(max-width:620px){
  body.v2.v3 .v2-menu-toggle{display:flex}
  body.v2.v3 .v2-mobile-menu{display:block}
}


/* The header must stay ABOVE the drawer so the hamburger (close) stays
   clickable while the menu is open. Drawer is z:40; header wins. */
@media(max-width:620px){
  body.v2.v3 .v2-top{z-index:70}
}


/* =========================================================
   CLUSTER / ARTICLE PAGES have NO hero. The v3 header is
   position:absolute (floats over the hero) — with no hero it
   floats over the breadcrumb and they collide. On these pages
   (marked body.has-article) the header becomes a normal
   static, opaque top bar so content flows cleanly below it.
   ========================================================= */
body.v2.v3.has-article .v2-top{
  position:sticky;top:0;z-index:70;
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
body.v2.v3.has-article .v2-top .v2-brand{color:var(--wine);letter-spacing:.02em}
body.v2.v3.has-article .v2-top .v2-nav a{color:var(--ink)}
body.v2.v3.has-article .v2-top .v2-link{color:var(--ink)}
body.v2.v3.has-article .v2-top .v2-btn-solid{background:var(--ink);color:#fff;border-color:var(--ink)}
body.v2.v3.has-article .si-crumb{padding-top:1.2rem}


/* Header brand = real logo image (dark plum+pink, legible on cream & white) */
.v2-brand .v2-logo{display:block;height:44px;width:auto}
@media(max-width:620px){
  .v2-brand .v2-logo{height:34px}
}

/* =========================================================
   Oct 2026 — Ibby (laptop): put the hero COPY on the RIGHT.
   Video stays full-bleed; copy becomes a right-hand panel so
   "Find My Fit" + the words are visible on the right.
   Phone keeps the current stacked layout.
   ========================================================= */
@media(min-width:900px){
  body.v2.v3 .v2-hero-copy{
    align-items:flex-end;           /* push the column to the right edge */
    text-align:left;
  }
  /* push the whole copy column into the RIGHT half of the hero */
  body.v2.v3 .v2-hero-copy{
    padding-left:52%;
  }
  body.v2.v3 .v2-hero-copy > *{
    max-width:34rem;
    width:100%;
    margin-left:auto;
    margin-right:0;
  }
  /* keep the copy readable over the video with a soft right-side scrim */
  body.v2.v3 .v2-hero-media::after{
    background:
      linear-gradient(90deg,rgba(26,20,22,.05) 45%,rgba(26,20,22,.55) 72%,rgba(26,20,22,.82) 100%),
      linear-gradient(180deg,rgba(26,20,22,.25) 0%,rgba(26,20,22,.10) 40%,rgba(26,20,22,.70) 100%);
  }
  /* restore the CTA + note + brand line that must be SEEN on the right */
  body.v2.v3 .v2-hero-copy .v2-hero-cta,
  body.v2.v3 .v2-hero-copy .v2-hero-note,
  body.v2.v3 .v2-hero-copy .v2-from{display:revert}
}