/* ---------------------------------------------------------------------------
     FONTS — the genuine design fonts, all self-hosted:
       • Muro               → the big hero display headline
       • BOOKmanOpti        → card titles, partner names, badges, "Take the test" pills
       • Noto Sans          → all body copy incl. section headings (replaces the
                              XD-declared Noto Nastaliq Urdu — its @font-face is
                              retained below but no rule uses it)
       • Montserrat         → references + legal text + nav "HARD FACTS"
       • Roboto             → the MENSHEALTHCARE wordmark
     NOTE: the XD's "Noto Serif Myanmar" (wordmark) is an Adobe substitution artifact —
     that font contains NO Latin glyphs (every letter of MENSHEALTHCARE maps to .notdef),
     so it cannot render the wordmark; the real wordmark font is the bold sans (Roboto).
     --------------------------------------------------------------------------- */
  @font-face{
    font-family:'Muro';
    src:url('Muro/Muro.otf') format('opentype');
    font-weight:normal; font-style:normal; font-display:swap;
    /* Muro ships CONTRADICTORY vertical metrics (unitsPerEm 1000): hhea and OS/2
       typo say ascender 750 / descender -250, while OS/2 usWinAscent/Descent say
       1000 / 0. Engines pick different tables — WebKit uses hhea, Chrome/Windows
       uses usWin — which put the baseline .143em apart, so the hero headline sat
       at a different height in Safari than in Chrome.
       Pin the metrics: ascent − descent = the font's own capHeight (714/1000),
       ascent + descent = 1em. Every engine then computes the same line box, and
       the first baseline lands on the XD's board y=293 (276px below the card top)
       — Chrome previously rendered it 17.6px LOW. Ignored by Safari <16.4, which
       falls back to hhea. Same treatment as about.html. */
    ascent-override:85.7%;
    descent-override:14.3%;
    line-gap-override:0%;
  }
  @font-face{
    /* Declaring the full weight range makes every requested weight render the true
       Light glyphs (no faux-bold synthesis). */
    font-family:'BookmanOpti';
    src:url('BookmanOpti/BOOKmanOpti-Light.otf') format('opentype');
    font-weight:100 900; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'MontserratLocal';
    src:url('Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight:100 900; font-style:normal; font-display:swap;
  }
  @font-face{
    /* Bold (700), not Black — the wordmark / HARD FACTS use a lighter bold. */
    font-family:'RobotoLocal';
    src:url('Roboto/Roboto-Bold.ttf') format('truetype');
    font-weight:700; font-style:normal; font-display:swap;
  }
  @font-face{
    /* Variable font (wght 400–700). Real Latin glyphs, so it renders the English copy. */
    font-family:'Noto Nastaliq Urdu';
    src:url('NotoNastaliqUrdu/NotoNastaliqUrdu.ttf') format('truetype');
    font-weight:400 700; font-style:normal; font-display:swap;
  }
  @font-face{
    /* Body copy. Variable font (wght 400–700): the design uses Regular and Bold only. */
    font-family:'Noto Sans';
    src:url('NotoSans/NotoSans-Variable.woff2') format('woff2');
    font-weight:400 700; font-style:normal; font-display:swap;
  }
  :root{
    --teal:#204D4C;
    --teal-2:#2E8876;   /* headline green (XD FEEL / AGAIN runs) */
    --green:#51A090;
    --blue:#AEE0E8;
    --mint:#D9ECD2;
    --teal-soft:#8BCCBF;
    --mint-2:#CFE3C8;

    --display-font:'Muro','MontserratLocal',Impact,sans-serif;                    /* FEEL UNSTOPPABLE AGAIN */
    --heading-font:'BookmanOpti','Bookman',Georgia,'Times New Roman',serif;       /* card titles, labels, buttons, badges (serif) */
    --section-font:'MontserratLocal','Helvetica Neue',Arial,sans-serif;           /* UPPERCASE section headers (bold sans) */
    /* Body copy. MontserratLocal is the 2nd fallback (self-hosted, device-independent)
       if the primary webfont ever fails to load. */
    --body-font:'Noto Sans','MontserratLocal','Helvetica Neue',Helvetica,Arial,sans-serif;
    --legal-font:'MontserratLocal','Helvetica Neue',Arial,sans-serif;             /* references + legal */
    --brand-font:'RobotoLocal','Helvetica Neue',Helvetica,Arial,sans-serif;       /* wordmark */
  }

  /* ---------------------------------------------------------------------------
     OLD-BROWSER COMPATIBILITY (~2018+): every fluid clamp() value is preceded by a
     static fallback, flex `gap` is doubled with margins, and aspect-ratio carries an
     @supports padding fallback. Modern browsers apply the later declaration.
     --------------------------------------------------------------------------- */
  *{ box-sizing:border-box; }
  body{
    margin:0;
    font-family:var(--body-font);
    color:var(--teal);
    background:#fff;
  }
  img{ max-width:100%; display:block; }
  a{ text-decoration:none; color:inherit; }

  /* NOTE: line-heights below are the exact XD ratios so the line spacing matches the
     design. Vertical spacing near body text is calibrated to the current body font's
     metrics — re-measure those values if the body font ever changes. */

  .page{ width:100%; margin:0 auto; background:#fff; overflow:hidden; }
  .wrap{
    padding-left:48px; padding-right:48px;
    padding-left:clamp(16px,4vw,72px);
    padding-right:clamp(16px,4vw,72px);
  }

  /* ---------- Buttons / pills ---------- */
  .btn-pill{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;        /* centered label, per the XD */
    border-radius:999px;
    padding:.64em 3em;             /* XD: 85px pill at 34px text → .64em vertical */
    font-family:var(--heading-font);
    font-weight:500;
    color:#fff;
    white-space:nowrap;
    line-height:1.1;
    text-transform:uppercase;      /* URINARY PROBLEMS?  /  TAKE THE TEST */
  }
  /* Bootstrap Reboot styles a:hover link-blue (specificity 0,0,1,1), which outranks
     .btn-pill (0,0,1,0) and would recolour the label on hover — hold it white.
     (The .outline variant sets its own white-on-hover, so this stays consistent.) */
  .btn-pill:hover{ color:#fff; }
  .btn-pill .arrow{
    position:absolute;
    right:.4em; top:50%;
    transform:translateY(-50%);
    /* XD: Ø62 circle in the 85px pill (font 34 → 1.82em), inset 14px (.4em) right. */
    width:1.82em; height:1.82em;
    border-radius:50%;
    background:#fff;
    display:inline-flex; align-items:center; justify-content:center;
  }
  /* Large, thick chevron matching the XD (≈60% of the circle) — an SVG so its size
     and stroke weight are exact, unlike a font glyph. Colour inherits via currentColor. */
  .btn-pill .arrow svg{
    width:60%; height:60%; display:block;
    margin-left:.08em;   /* optical-centre the rightward chevron */
  }
  .btn-pill.teal{ background:var(--teal); }
  .btn-pill.teal .arrow{ color:var(--teal); }
  .btn-pill.green{ background:var(--green); }
  .btn-pill.green .arrow{ color:var(--green); }
  /* Nav "HARD FACTS": a square-cornered outline box with a bold sans label
     (like the wordmark), matching the XD — not a rounded serif pill. */
  .btn-pill.outline{
    background:transparent;
    color:var(--teal);
    border:3px solid var(--teal);    /* XD: 3px #204D4C stroke */
    border-radius:0;
    justify-content:center;
    /* Same treatment as the wordmark: the XD declares NotoNastaliqUrdu-Bold here but
       the file's recorded render run is Helvetica-Bold (the designer's Mac
       substitution) — reproduce the actual design render. Unlike Noto Serif Myanmar,
       Nastaliq DOES ship Latin glyphs, so it must NOT be in this stack at all or it
       would paint (low-riding) Latin. Normal Latin metrics → symmetric padding. */
    font-family:'MontserratLocal','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-weight:700;
    letter-spacing:.6px;
    /* XD: 25px label in a 210×65 box (at the 1920 board). */
    font-size:16px;
    font-size:clamp(14px,1.3vw,25px);
    padding:.6em 1.2em;
    transition:background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  /* Hover / keyboard focus: fill solid teal-green with white label. */
  .btn-pill.outline:hover,
  .btn-pill.outline:focus-visible{
    background:var(--green);
    border-color:var(--green);
    color:#fff;
  }

  .badge-pill{
    display:inline-block;
    border-radius:999px;
    /* XD: 115×31 pill with an 18px BookmanOpti label (1920 board). */
    padding:.3em 2.1em;
    font-family:var(--heading-font);
    font-size:14px;
    font-size:clamp(13px,.94vw,18px);
    font-weight:600;
    letter-spacing:.5px;
  }
  .badge-pill.mint{ background:var(--mint); color:var(--teal); }
  .badge-pill.blue{ background:var(--blue); color:var(--teal); }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;              /* containing block for the top-hung nav */
    padding:16px;
    padding:clamp(12px,1.5vw,20px);
    /* XD: the hero image's top edge sits 17px below the page top (nav overlaps it). */
    padding-top:14px;
    padding-top:clamp(10px,.89vw,17px);
  }
  .hero-card{
    position:relative;
    border-radius:25px;
    overflow:hidden;
    min-height:620px;
    min-height:clamp(540px,44vw,820px);
    display:flex;
    flex-direction:column;
    background:linear-gradient(135deg,var(--blue) 0%,#dff1ea 100%);
  }
  /* The couple photo already carries a soft blue fade on its left half (where the copy
     sits); cover-position it to the right so the couple stays in view at every width. */
  .hero-card::before{
    content:"";
    position:absolute; top:0; right:0; bottom:0; left:0; inset:0; z-index:0;
    /* Anchor the crop to the TOP: the wide card crops the image vertically, and centre
       cropping cut off the silhouette's head (XD shows the image from its top edge). */
    background:url('../revamp/hero-couple-new.png') right top / cover no-repeat;
  }
  /* Legibility wash over the left third so the teal copy always reads, even when the
     cover crop shifts on narrow screens. */
  .hero-card::after{
    content:"";
    position:absolute; top:0; right:0; bottom:0; left:0; inset:0; z-index:1;
    /* Kept light so the photo's baked-in silhouette + lamp stay visible, as in the PDF. */
    background:linear-gradient(90deg, rgba(196,232,238,.38) 0%, rgba(196,232,238,.18) 38%, rgba(196,232,238,0) 62%);
    pointer-events:none;
  }
  /* Small screens: the copy sits over the photo's warm side, so the wash must carry
     the legibility — stronger and wider, still fading right so the couple shows. */
  @media (max-width:991.98px){
    .hero-card::after{
      background:linear-gradient(90deg, rgba(196,232,238,.92) 0%, rgba(196,232,238,.72) 48%, rgba(196,232,238,.15) 85%, rgba(196,232,238,0) 100%);
    }
    /* Clear the overlapping consult card (-34px..-56px) so the fine print never sits
       under it. (.hero-card prefix outweighs the later base .hero-body padding rule.) */
    .hero-card .hero-body{ padding-bottom:88px; }
    /* Narrow cover crops show only the photo's right edge (plant/frame) — pull the
       window left so the couple stays in frame. */
    .hero-card::before{ background-position:72% center; }
  }
  /* Phones: everything overlays the photo, so the wash goes vertical — strongest at
     the top (headline) and bottom (fine print), lighter mid so the couple ghosts through. */
  @media (max-width:575.98px){
    .hero-card::after{
      background:linear-gradient(180deg, rgba(196,232,238,.92) 0%, rgba(196,232,238,.68) 55%, rgba(196,232,238,.88) 100%);
    }
  }
  .hero-card > *{ position:relative; z-index:2; }

  .nav-pill{
    position:absolute; top:0; left:50%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
    z-index:3;
    background:#fff;
    border-radius:0 0 15px 15px;    /* corners [0,0,15,15] in the XD */
    /* XD: nav rect spans 1380 of the 1920 board (71.9%), centred at the PAGE top —
       the hero photo (frame line, silhouette) shows above/around it on both sides. */
    width:71.9%;
    max-width:1380px;
    padding:1rem 40px;
    padding:1rem clamp(20px,3vw,56px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
  }
  /* Tablets (768–991) keep the exact desktop nav — the base 72%-wide centred floating pill.
     Only phones need adapting: the 72% pill can't fit brand + button, so let it hang
     near-full-width from the page top and overlap the hero (brand left · button right),
     inset 16px so a thin photo sliver frames it. The base hero-body top padding clears it. */
  @media (max-width:767.98px){
    .nav-pill{
      left:16px; right:16px; width:auto;
      -webkit-transform:none; transform:none;
      padding:.72rem 20px;
      gap:.6rem;
    }
  }
  .brand{
    /* Wordmark: Roboto Bold (self-hosted). The XD-declared 'Noto Serif Myanmar' has
       no Latin glyphs (it can never render this text) and was dropped; the design file
       itself recorded rendering the wordmark in a substituted bold sans. */
    font-family:'RobotoLocal','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-weight:700;
    /* XD: 27px at the 1920 board (1.4vw reaches 27 right at 1920). */
    font-size:22px;
    font-size:clamp(16px,1.4vw,27px);
    letter-spacing:.6px;
    color:var(--teal);
  }
  /* Hold the wordmark colour on hover — Bootstrap Reboot's a:hover would turn it link-blue. */
  .brand:hover{ color:var(--teal); }

  .hero-body{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    /* Wide enough for the XD copy block (UNSTOPPABLE ≈770px at 1920 + side padding). */
    max-width:900px;
    /* Top padding clears the page-top nav, which overlaps ~83px into the card (XD). */
    padding:96px 40px 44px;
    padding:clamp(72px,5.9vw,113px) clamp(24px,4vw,64px) clamp(28px,4vw,60px);
  }
  .display-head{
    font-family:var(--display-font);
    font-weight:normal;               /* Muro ships a single heavy weight */
    /* XD text panel: Muro Regular 148px, line spacing 130 (=.878), letter spacing 0
       (at the 1920 board → 148px = 7.71vw). */
    line-height:.878;
    letter-spacing:0;
    margin:40px 0;
    font-size:110px;
    font-size:clamp(46px,7.71vw,148px);
  }
  .display-head .l1{ display:block; color:var(--teal-2); }
  .display-head .l2{ display:block; color:var(--teal); }
  .display-head .l3{ display:block; color:var(--teal-2); }
  /* Muro ships no kerning pairs, so AGAIN needs manual letter-fit: the A/G diagonals
     leave an optical void, and the first pair needs the strongest correction. Each
     span's letter-spacing closes the gap to the NEXT letter. */
  .display-head .k15{ letter-spacing:-.015em; }
  .display-head .k20{ letter-spacing:-.02em; }
  .display-head .k40{ letter-spacing:-.04em; }
  .hero-lede{
    font-family:var(--body-font);
    /* XD: 22px / line 32 at the 1920 board. */
    font-size:17px; font-size:clamp(15px,1.15vw,22px);
    line-height:1.455;                /* XD exact: 32/22 = 1.455 */
    max-width:30em;
    margin:0 0 40px;
  }
  /* XD gap button2→fine ≈72px at the 1920 board (button bottom 888 → fine cap-top ~960). */
  /* XD: 83px from the last pill's bottom to the fine print's first baseline at 1920. */
  .hero-btns{ display:flex; flex-direction:column; align-items:flex-start; margin:0 0 32px; margin:0 0 clamp(16px,2.24vw,43px); }
  .hero-btns .btn-pill{
    /* XD: BOOKmanOpti 34px at the 1920 board. */
    font-size:24px; font-size:clamp(18px,1.77vw,34px);
    /* XD: pill is 510×85 at the 1920 board (26.56vw), 15px between the two pills. */
    width:100%; max-width:440px;
    max-width:clamp(330px, 26.56vw, 510px);
    margin:0 0 15px;          /* XD: 15px between the two pills; last button clears it below */
    border:2px solid #fff;    /* XD default stroke: 2px white (3px on hover) */
    /* URINARY (1st pill): BLUEISH. Exact XD component values ("Component 1"):
       #2FBABA (top) → #204D4C at 88.8%, vertical. No drop shadow in the XD. */
    background:#204d4c;
    background:linear-gradient(180deg, #2fbaba 0%, #204d4c 88.8%);
  }
  .hero-btns .btn-pill:last-child{ margin-bottom:0; }   /* .hero-btns margin supplies the gap to the fine print */
  /* XD hover: gradient re-anchored dark→bright downward, stroke thickens to 3px,
     arrow circle turns mint. Values verbatim from the component's Hover State. */
  .hero-btns .btn-pill:hover,
  .hero-btns .btn-pill:focus{
    /* XD hover stroke = 3px, but changing border-width reflows the auto-height pill (a
       split-second jump). Keep the 2px border and add a 1px inset ring instead — same
       look, zero layout shift. */
    box-shadow:inset 0 0 0 1px #fff;
    background:#204d4c;
    background:linear-gradient(180deg, #204d4c -23.7%, #2fbaba 100%);
  }
  .hero-btns .btn-pill:hover .arrow,
  .hero-btns .btn-pill:focus .arrow{ background:#d9ecd2; }
  .hero-btns .btn-pill .arrow{ color:var(--teal); }
  /* ERECTILE (2nd pill): GREENISH ("Component 2"): #51A090 → #005544, vertical. */
  .hero-btns .btn-pill:nth-child(2){
    background:#005544;
    background:linear-gradient(180deg, #51a090 0%, #005544 100%);
  }
  .hero-btns .btn-pill:nth-child(2):hover,
  .hero-btns .btn-pill:nth-child(2):focus{
    background:#005544;
    background:linear-gradient(180deg, #005544 13.1%, #51a090 112.6%);
  }
  .hero-btns .btn-pill:nth-child(2) .arrow{ color:#005544; }
  .hero-fine{
    font-family:var(--body-font);
    /* XD: 15px / line 22 at the 1920 board. */
    font-size:14px; font-size:clamp(12px,.78vw,15px);
    line-height:1.467;                /* XD exact: 22/15 */
    opacity:.9; max-width:34em; margin:0;
  }
  /* Same colour as the surrounding fine print; underline still marks it as a link. */
  .hero-fine a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

  /* Small screens (below desktop): the copy column runs nearly full-width here, whereas
     on desktop it caps at 900px inside a wide viewport — so the display headline is left
     under-filled by the desktop's 7.71vw rate. Scale it up to keep the hero's impact, and
     tighten the CTA pills so they sit neatly under the bigger headline instead of running
     the full column width. (Placed after the base hero rules so it wins; desktop ≥992 and
     the client-checked 1920 view are untouched.) Muro runs ~5.2× the font size for the
     widest line "UNSTOPPABLE", so 13vw (cap 90) stays within the column at every width. */
  @media (max-width:991.98px){
    .display-head{
      font-size:46px;                        /* safe static fallback (Safari <13.1) */
      font-size:clamp(44px,13vw,90px);
    }
    .hero-btns .btn-pill{
      max-width:300px;                        /* safe static fallback before clamp */
      max-width:clamp(260px,34vw,360px);
    }
  }

  /* ---------- Book-a-consultation (partner strip) ---------- */
  .consult{
    background:#fff;
    border-radius:28px;                /* XD card: r=28 */
    box-shadow:0 3px 25px rgba(0,0,0,.16);   /* XD: dy 3, blur 25 (panel B; JSON r=12.5), black 16% */
    /* XD (1920 board): card top → heading BASELINE 81px, logos bottom → card bottom
       47px (card 1181×271). Calibrated to the body font's metrics so the rendered
       baselines match — re-measure if the body font ever changes. */
    /* Side padding slimmed for the narrower (1181) card so the heading fits one line;
       the partner pair centres itself and doesn't depend on it. */
    padding:34px 24px 24px;
    padding:clamp(16px,2.34vw,45px) clamp(14px,1.66vw,32px) clamp(15px,1.7vw,33px);
    /* Updated XD: card is 1181/1920 wide (61.51vw), centred. */
    width:880px; width:61.51vw;
    max-width:1181px;
    margin-left:auto; margin-right:auto;
  }
  @media (max-width:991.98px){
    /* Tablet mirrors the desktop look: card visibly narrower than the screen, centred. */
    .consult{ width:82%; }
  }
  @media (max-width:599.98px){
    .consult{
      width:auto;                      /* phones: span the wrap */
      padding-left:24px; padding-right:24px;
      padding-top:20px; padding-bottom:24px;
    }
  }
  /* Slight overlap into the hero, leaving clear space below the fine print, per the XD/PDF. */
  .consult.overlap{ margin-top:-46px; margin-top:clamp(-56px,-3.2vw,-34px); position:relative; z-index:3; }
  /* Bottom consult (updated XD): CTA panel→card 89px total, card→references 86px.
     NO negative margin here — overlapping two translucent backgrounds doubles the
     alpha and paints a visible seam line. */
  .consult-bottom{
    /* Longhands only — a `padding:0 0 x` shorthand would zero .wrap's side padding. */
    padding-top:0;
    padding-bottom:64px;
    padding-bottom:clamp(40px,4.48vw,86px);
    /* Continues the CTA section's pale blue. OPAQUE and identical to the CTA
       gradient's end colour — the two sections meet with zero possible seam. */
    background:#DDF2F5;
  }
  .consult h2{
    /* XD geometry (body font Bold, 42px, #204D4C) — displayed ALL CAPS. */
    font-family:var(--body-font);
    font-weight:700;
    color:var(--teal);
    text-transform:uppercase;
    text-align:center;
    margin:0 0 .42em;   /* XD: 31px heading-baseline→tiles gap at 1920 (baseline 1126 → tiles 1157); Noto Sans-calibrated */
    /* Back to the XD's 42px: the 48px QA override fit the old 1684 card, but reads
       edge-to-edge in the updated 1181 card. */
    font-size:30px; font-size:clamp(22px,2.19vw,42px);
    line-height:1.15;   /* caps Nastaliq's ~4.4em inline box, which inflated the card height */
  }
  /* Two partners: centre the pair as content-width tiles (the old space-between
     stretch was designed for four and left dead space on the right). */
  .partners{
    display:flex; flex-wrap:wrap;
    justify-content:center;
    margin:-6px -24px;
  }
  .partner{
    flex:0 1 auto;
    max-width:44%;
    display:flex; align-items:flex-start;  /* XD: text top-aligns to the tile; the text
                                              column's padding-top puts the name baseline
                                              28px below the tile top (1185 vs 1157) */
    padding:6px 16px;
  }
  /* Text column capped so the partner pair reads narrower than the heading. */
  .partner > div{
    max-width:200px; max-width:13.9vw;
    /* Drops the text toward the XD's name-baseline position (28px below the tile
       top at 1920, baseline 1185 vs tile top 1157), eased slightly per review. */
    padding-top:6px; padding-top:.43vw;
  }
  /* Tablets keep the desktop side-by-side pair, with a modest text cap so the
     columns stay tidy; phones (<600) stack one per row. */
  @media (max-width:991.98px){
    .partner > div{ max-width:170px; }
  }
  @media (max-width:599.98px){
    .partner{ flex:1 1 100%; max-width:100%; }
    .partner > div{ max-width:none; }
  }
  /* (The old 4-partner 2×2 grid rule at <1100px is gone — with two partners the
     pair stays content-sized and centred at every width; below 600px, one per row.) */
  @media (max-width:599.98px){
    /* One per row, with more air around each logo row. The .partners gutter margin
       must match the .partner side padding (16px) exactly, or the negative margin
       swallows any padding added to the card. */
    .partners{ margin:-6px -16px; }
    .partner{ flex:1 1 100%; max-width:100%; padding:12px 16px; }
    .partner .logo{ margin-right:18px; }
  }
  /* Tiles at the XD's own fixed sizes (112×112, Hello Doctor 124×112 at the 1920
     board), scaling with the viewport. Explicit width+height (no aspect-ratio, no
     stretch) so align-items:center can centre logo and text on each other — and it
     drops the aspect-ratio compat fallback entirely. */
  .partner .logo{
    flex:0 0 auto;
    width:88px;  width:clamp(64px,5.83vw,112px);
    height:88px; height:clamp(64px,5.83vw,112px);
    overflow:hidden;    /* square tiles (no border-radius), as in the XD */
    margin-right:20px;
    margin-right:clamp(14px,2.03vw,39px);   /* updated XD: 39px logo→text gap */
  }
  .partner .logo img{ width:100%; height:100%; object-fit:cover; display:block; }
  /* Both tiles render the same square size; the Hello Doctor art carries flat blue
     side margins, so the cover-crop to 1:1 loses nothing visible. */
  .partner .name{
    font-family:var(--heading-font);
    color:var(--green);
    font-weight:600;
    font-size:20px; font-size:clamp(17px,1.3vw,25px);
    line-height:.92;                                         /* XD exact: 23/25 = .92 (no extra leading) */
    margin:0 0 .3rem;
    display:block;
  }
  .partner .blurb{
    font-family:var(--body-font);
    font-size:14px; font-size:clamp(12.5px,.94vw,18px);   /* XD: 18px #204D4C */
    line-height:1.17;                                      /* XD: line 21 at 18px */
    margin:0;
  }

  /* ---------- Know the conditions ---------- */
  .conditions{
    /* XD: 127px from the consult card to the heading's cap top (≈112px box padding).
       No horizontal padding — the rows position themselves with exact viewport
       percentages; the section head carries its own inset. */
    /* Asymmetric: keep the heading's top space, but the gap BELOW the ED card is trimmed —
       the XD leaves only ~98px from the ED card to the CTA box (48 here + 50 on .cta). */
    /* Top ink-calibrated for Nastaliq (its tall inline box adds leading above the caps). */
    padding:73px 0 36px;
    padding:clamp(42px,5.1vw,98px) 0 clamp(24px,2.5vw,48px);
    background:linear-gradient(180deg, rgba(174,224,232,0) 0%, rgba(174,224,232,0) 55%, rgba(174,224,232,.28) 100%);
  }
  .conditions .section-head{ padding-left:20px; padding-right:20px; }
  /* XD: 113px subtitle-baseline→card (1920 board), ink-calibrated for Nastaliq. */
  .section-head{ text-align:center; margin-bottom:86px; margin-bottom:clamp(2.5rem,6.02vw,116px); }
  /* XD: heading = body font Bold 60px ALL CAPS #204D4C; subtitle 32px regular. */
  .section-head h2{
    font-family:var(--body-font);
    font-weight:700;
    text-transform:uppercase;
    font-size:48px; font-size:clamp(30px,3.13vw,60px);   /* XD: 60px at the 1920 board */
    line-height:1.1;
    margin:0 0 .425em;   /* XD: 69px heading→subtitle BASELINE gap — calibrated for Noto Sans */
  }
  .section-head p{
    font-family:var(--body-font);
    font-size:20px; font-size:clamp(15px,1.67vw,32px);   /* XD: 32px */
    line-height:1.1;                                      /* XD: line 35 at 32px */
    margin:0 auto;
    max-width:34em;    /* stacked widths: readable wrap (the manual break is off here) */
  }
  /* ≥lg the XD's manual line break controls the split (exactly 2 lines) — no width cap,
     since Montserrat runs wider than the XD's substituted Helvetica render. */
  @media (min-width:992px){
    .section-head p{ max-width:none; }
  }

  .info-card{
    background:#fff;
    /* XD: r35 at the 1920 board — scale with the layout (1.82vw) so corners don't
       read rounder on smaller screens. */
    border-radius:26px;
    border-radius:clamp(18px,1.82vw,35px);               /* XD: r=35 */
    box-shadow:0 8px 25px rgba(0,0,0,.16);             /* XD: dy 8, blur 25 (panel B; JSON r=12.5), black 16% */
    padding:36px;
    padding:clamp(24px,2.9vw,56px);   /* XD: content inset 56px (1920 board) */
    height:100%;
  }
  .info-card h3{
    font-family:var(--heading-font);
    font-size:32px; font-size:clamp(24px,2vw,35px);
    line-height:1;                                           /* XD exact: 35/35 = 1 (no extra leading) */
    margin:.7rem 0 .8rem;
  }
  .info-card .desc{
    font-family:var(--body-font);
    font-size:18px; font-size:clamp(14px,1.15vw,22px);
    line-height:1.455;                /* XD exact: 32/22 */
  }
  .info-card .desc sup{ font-size:.7em; }
  .info-card .vary{
    font-family:var(--body-font);
    font-size:18px; font-size:clamp(14px,1.15vw,22px);
    margin:1.1rem 0 0;
  }
  .check-list{ list-style:none; padding:0; margin:1.1rem 0 0; }
  .check-list li{
    /* XD: icon centre sits on the text's cap-band centre (icon centre 2058.5 vs first
       baseline 2067 → 8.5px above it). line-height 1.4 caps Nastaliq's ~4.4em inline
       box so the ink is ~centred in the row; align-items:center then centres the icon
       against it. */
    display:flex; align-items:center;
    line-height:1.4;
    font-family:var(--body-font);
    margin-bottom:.87em;              /* XD: rows on a 50px pitch at 22px text */
    font-size:18px; font-size:clamp(14px,1.15vw,22px);
  }
  .check-list li::before{
    content:""; flex:0 0 auto;
    /* XD: 33×33 icons, 14px gap to the text (1920 board). */
    width:26px; height:26px;
    width:clamp(20px,1.72vw,33px); height:clamp(20px,1.72vw,33px);
    margin-right:10px; margin-right:clamp(8px,.73vw,14px);
    /* XD: icon centre sits 8.5px above the first baseline (at 22px = .386em). With
       Noto Sans in the 1.4 line box, plain flex centring lands the icon centre .388em
       above the baseline — no nudge needed (the old .36em was Nastaliq-only). */
    position:relative; top:0;
    background:url('../revamp/check.png') center/contain no-repeat;
  }
  /* Condition photos: landscape tiles that fill the column but sit shorter than the
     text card and centre vertically beside it, as in the XD (not tall 5:4 blocks). */
  /* Photo sized to the XD frame (676×404 ≈ 5:3) and capped so it stays SHORTER and
     narrower than the text card, hugging the outer edge with the gap toward the card. */
  .media-img{
    display:block;
    width:100%; height:auto;
    aspect-ratio:676 / 404;           /* XD: 676×404 tiles */
    object-fit:cover;
    /* XD: r=35 at the 1920 board, same as the cards — scales with the layout. */
    border-radius:26px;
    border-radius:clamp(18px,1.82vw,35px);
  }
  /* XD pattern fill: cover, scale 1, offsetY 0.0673 (frame fraction) — computes to a
     23% vertical anchor. Keeps the subject's head in frame. */
  .media-bph{ object-position:center 23%; }
  /* Vertical placement per the final PDF: the BPH photo hangs from the BOTTOM of its row
     but is padded up off the card's bottom edge; the ED photo aligns to the TOP of its card. */
  .media-up{
    margin-bottom:28px;
    margin-bottom:clamp(20px,1.88vw,36px);   /* XD: photo bottom sits 36px above the card's */
  }
  @supports not (aspect-ratio: 1 / 1){
    .media-img{ height:260px; height:clamp(180px,18vw,311px); }  /* static first: no-aspect-ratio browsers may lack clamp() too */
  }

  /* Condition rows: EXACT XD percentages of the 1920 board. The two text cards
     horizontally INTERLOCK (ED card left edge 49.11% < BPH card right edge 50.94%). */
  .cond-row{ display:flex; }
  .cond-row-bph{
    align-items:flex-end;
    margin-bottom:55px; margin-bottom:3.8vw;              /* XD: 73px row gap */
  }
  .cond-row-bph .info-card{ width:42.29%; margin-left:8.65%; }   /* x166 w812 */
  .cond-row-bph .media-img{ width:35.21%; margin-left:2.92%; }   /* 56 gap, photo 676 */
  .cond-row-ed{ align-items:flex-start; }
  .cond-row-ed .media-img{ width:35.21%; margin-left:10.99%; }   /* x211 */
  .cond-row-ed .info-card{ width:42.29%; margin-left:2.92%; }    /* x943 — interlocks */
  /* Stacked: card first, photo below (previous column behaviour), centred. */
  @media (max-width:991.98px){
    .cond-row{ flex-direction:column; padding:0 20px; }
    .cond-row .info-card{ width:auto; margin:0; }
    .cond-row .media-img{ width:100%; margin:20px auto 0; }
    .cond-row-bph{ margin-bottom:40px; }
    .cond-row-ed .media-img{ order:2; }                   /* keep the card above its photo */
    .media-up{ margin-bottom:0; }      /* no lift needed once the photo stacks below the card */
  }

  /* ---------- CTA (two photo panels) ---------- */
  .cta{
    /* No horizontal padding: the panel sizes itself at 87.63% of the viewport (XD).
       Top padding trimmed to ~50px so the ED card sits ~98px above the CTA box (per XD). */
    padding:40px 0 56px;
    padding:clamp(26px,2.6vw,50px) 0 clamp(40px,5vw,80px);
    /* Start at the SAME alpha (.28) the conditions section fades to, so the two washes
       meet seamlessly. Ends OPAQUE (#DDF2F5 = .42 wash flattened over white) so the
       boundary with .consult-bottom is pixel-identical — translucent-over-translucent
       compositing can round differently and paint a faint seam line. */
    background:linear-gradient(180deg, rgba(174,224,232,.28) 0%, #DDF2F5 100%);
  }
  /* ONE panel (per the XD): a single 1682.5×829 rounded box at 87.63% of the board,
     filled with ONE combined image (faucet + banana), both cards overlaid on it. */
  .cta-panel{
    position:relative;
    width:87.63%;
    max-width:1683px;
    margin:0 auto;
    border-radius:19px;
    border-radius:clamp(14px,1.3vw,25px);        /* XD: r=25 at the 1920 board */
    overflow:hidden;
    box-shadow:0 3px 55px rgba(0,0,0,.16);     /* XD: dy 3, blur 55 (panel B; JSON r=27.5), black 16% */
  }
  .cta-bg{
    width:100%; height:auto;
    aspect-ratio:1683 / 829;                     /* XD panel proportions */
    object-fit:cover;
    display:block;
  }
  /* Cards: XD 767×303 r25 — percentages are of the PANEL (767/1682.5 etc.). */
  .cta-card{
    position:absolute;
    bottom:4.34%;                                /* 36px of the 829 panel */
    width:45.59%;
    border-radius:19px;
    border-radius:clamp(12px,1.3vw,25px);
    /* XD: 39px top, 73px sides, 29px bottom (title x1475/y3616, button ends 29 above the card edge). */
    padding:24px 28px 18px;
    padding:clamp(16px,2.03vw,39px) clamp(20px,3.8vw,73px) clamp(14px,1.51vw,29px);
    box-shadow:0 5px 15px rgba(0,0,0,.16);      /* XD: dy 5, blur 15 (panel B; JSON r=7.5), black 16% */
  }
  .cta-card.mint{ background:var(--mint); left:2.32%; }      /* 39px in from the panel */
  .cta-card.blue{ background:var(--blue); right:2.38%; }     /* 40px in from the panel */
  .cta-card h3{
    font-family:var(--heading-font);
    font-size:32px; font-size:clamp(22px,1.82vw,35px);       /* XD: 35px */
    line-height:1;                                           /* XD exact: 35/35 = 1 (no extra leading) */
    margin:0 0 .5rem;
  }
  .cta-card p{
    font-family:var(--body-font);
    font-size:16px; font-size:clamp(13px,1.15vw,22px);       /* XD: 22px / line 32 */
    line-height:1.455; margin:0 0 1.1rem;   /* XD exact: 32/22 */
  }
  /* Desktop: the .cta-item wrappers are invisible pass-throughs — zero-height static
     blocks whose absolute cards keep positioning against the panel. */
  .cta-item-photo{ display:none; }
  /* Stacked (below lg): TWO separate boxes — each condition gets its own photo + card. */
  @media (max-width:991.98px){
    .cta-panel{
      width:auto; margin:0 16px; padding:0;
      background:transparent; border-radius:0; box-shadow:none; overflow:visible;
    }
    .cta-bg{ display:none; }                    /* the combined photo is desktop-only */
    /* Each item is a rounded PORTRAIT photo panel with the card anchored at the bottom
       (mirrors the desktop XD: the whole scene shows, the card overlays its lower part).
       Pinning a fixed aspect keeps the crop identical at every width — without it the
       panel height is driven by the card text, so it turns landscape on wide phones/
       tablets and `cover` zooms into a cropped middle band. aspect-ratio yields to
       content, so long copy grows the panel instead of clipping the card. */
    .cta-item{
      position:relative;
      display:flex;
      align-items:flex-end;                     /* card sits at the bottom */
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 3px 27.5px rgba(0,0,0,.16);  /* XD panel "BG": dy 3, blur 27.5, black 16% */
      margin:0 0 20px;
      padding:26px;                             /* static fallback (Safari <13.1) */
      padding:clamp(20px,7vw,44px);             /* photo reveal on the card's sides + bottom */
      min-height:118vw;                         /* portrait fallback for Safari <15 (no aspect-ratio) */
    }
    @supports (aspect-ratio:1 / 1){
      .cta-item{ min-height:0; aspect-ratio:4 / 5; }
    }
    .cta-item:last-child{ margin-bottom:0; }
    .cta-item-photo{
      display:block;
      position:absolute;
      top:0; right:0; bottom:0; left:0;         /* fill the whole panel, behind the card */
      background-size:cover; background-repeat:no-repeat;
    }
    /* Crop anchors: keep the hero of each shot centred in the reveal above the card. */
    .cta-item-bph .cta-item-photo{ background-image:url('../revamp/cta-faucet.png'); background-position:58% center; }
    .cta-item-ed  .cta-item-photo{ background-image:url('../revamp/cta-banana.png'); background-position:center 42%; }
    /* Card overlays the photo's lower part (like desktop): full width of the padded box,
       rounded on all corners, photo showing around its top and sides. z-index lifts it
       above the absolute photo. */
    .cta-card{
      position:relative; z-index:1;
      top:auto; right:auto; bottom:auto; left:auto;
      width:100%;
      margin:0;
      border-radius:14px;
      box-shadow:0 5px 7.5px rgba(0,0,0,.16);   /* XD "Rectangle 15/16": dy 5, blur 7.5, black 16% */
    }
    /* Override the desktop offsets (higher specificity) so the stacked card sits centred. */
    .cta-card.mint{ left:auto; }
    .cta-card.blue{ right:auto; }
  }
  /* CTA "TAKE THE TEST" buttons — exact XD component values.
     Left/mint (BPH) card = "Component 9"; right/blue (ED) card = "Component 10". */
  .cta-card .btn-pill{
    /* XD: 389×73 pill (Component 9/10), 29px label; circle/padding scale via em. */
    font-size:20px; font-size:clamp(15px,1.51vw,29px);
    width:62.64%;                   /* 389 of the card's 621px CONTENT box (767 − 2×73 padding) */
    min-width:230px;
    max-width:389px;                /* never wider than the XD pill — stacked cards run
                                       full-width, so the % would otherwise stretch the
                                       short "TAKE THE TEST" label into an awkward slab. */
    border:2px solid #fff;          /* XD default stroke 2px (3px on hover) */
  }
  /* Centre the label in the space LEFT of the arrow circle (as in the XD) —
     symmetric padding would centre it across the full pill, which reads off-centre. */
  .hero-btns .btn-pill,
  .cta-card .btn-pill{ padding-left:2.8em; padding-right:4.2em; }
  /* CTA pill (389 wide): same centring point (padR − padL = 69px = 2.38em) but with
     slimmer paddings — the XD's label slot is exact-fit and our BookmanOpti runs a
     touch wider, so the label needs slack to breathe. */
  .cta .cta-card .btn-pill{ padding-left:1em; padding-right:3.38em; }
  .cta-card.mint .btn-pill{
    background:#005544;
    background:linear-gradient(180deg, #51a090 0%, #005544 100%);
  }
  .cta-card.mint .btn-pill .arrow{ color:#005544; }
  .cta-card.blue .btn-pill{
    background:#204d4c;
    background:linear-gradient(180deg, #2fbaba 0%, #204d4c 88.8%);
  }
  .cta-card.blue .btn-pill .arrow{ color:#204d4c; }

  /* XD hover states: gradient turns HORIZONTAL (each with its own geometry),
     stroke thickens to 3px, arrow disc turns mint. */
  .hero-btns .btn-pill .arrow,
  .cta-card .btn-pill .arrow{ transition:background-color .2s ease; }
  .cta-card.mint .btn-pill:hover,
  .cta-card.mint .btn-pill:focus{
    box-shadow:inset 0 0 0 1px #fff;   /* 3px-look stroke with no reflow (see hero buttons) */
    background:#005544;
    background:linear-gradient(90deg, #005544 0%, #51a090 65.3%);
  }
  .cta-card.blue .btn-pill:hover,
  .cta-card.blue .btn-pill:focus{
    box-shadow:inset 0 0 0 1px #fff;   /* 3px-look stroke with no reflow */
    background:#204d4c;
    background:linear-gradient(90deg, #204d4c 0%, #2fbaba 76.1%);
  }
  .cta-card .btn-pill:hover .arrow,
  .cta-card .btn-pill:focus .arrow{ background:#d9ecd2; }

  /* ---------- References ---------- */
  .references{
    background:var(--green);      /* #51A090, per the XD */
    color:#fff;
    /* XD: content inset 254px from BOTH edges at the 1920 board (.wrap supplies 72
       of it → 182 here); ~58px above the heading, 74px below the list. */
    /* Vertical values are ink-calibrated: the Nastaliq heading carries leading above
       its caps, so the box padding is smaller than the XD's 58/74 raw gaps. */
    padding:24px 40px 37px;
    padding:clamp(20px,1.67vw,32px) clamp(24px,9.5vw,182px) clamp(28px,2.57vw,49px);
  }
  .references h2{
    /* XD: body font Bold 42px, white, ALL CAPS. */
    font-family:var(--body-font);
    font-weight:700;
    text-transform:uppercase;
    font-size:34px; font-size:clamp(26px,2.5vw,48px);   /* 48px (intentionally above the XD's 42) */
    line-height:1.15;
    margin:0 0 .49em;   /* XD: 22px heading-baseline→list gap at 1920 */
  }
  /* Flowing paragraph with inline (1)…(4) markers — not a stacked list. */
  .references .ref-list{
    font-family:var(--legal-font);
    /* XD: Montserrat Regular 16px / 24px line height (1.5), white. */
    font-size:14px; font-size:clamp(12px,.83vw,16px);
    line-height:1.5;
    margin:0; padding:0;
    color:#fff;
    word-break:break-word;
  }
  .references a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }

  /* ---------- Footer ---------- */
  /* Geometry taken from the XD source (1920 board): logo 413px wide at x=50 with the
     address to its RIGHT (bottom-aligned); disclaimer 887px wide from x=932,
     Montserrat 14/20, pure black; white bg, no top border. */
  .site-footer{
    background:#fff;
    color:#000;
    /* XD: content starts 34px below the references band (disclaimer y4676 vs band
       bottom y4642); ~47px below the content to the page end. */
    padding:26px 0 36px;
    padding:clamp(18px,1.77vw,34px) 0 clamp(26px,2.45vw,47px);
  }
  .site-footer .inner{
    display:flex; align-items:flex-end;   /* brand group sits level with the disclaimer's bottom */
    justify-content:space-between;        /* column separation without flex `gap` (Safari <14.1) */
    flex-wrap:wrap;
  }
  .footer-brand{
    flex:0 0 auto;                 /* natural width: logo + address never separate */
    display:flex; align-items:flex-end; /* address bottom-aligned with the tagline row */
  }
  .footer-brand img{
    /* XD: the combined logo+address image renders 713px wide at the 1920 board. */
    width:535px;
    width:clamp(320px,37.14vw,713px);
    height:auto; max-width:88vw; margin:0;
  }
  .footer-brand address{
    font-family:var(--legal-font);
    font-style:normal;
    font-size:14px; font-size:clamp(12.5px,.9vw,15px);
    line-height:1.45; color:#000;
    /* Left margin replaces flex `gap` (Safari <14.1); the bottom lift scales ~.97vw
       so it holds the same proportion at 1920. */
    margin:0 0 14px 24px;
    margin:0 0 clamp(10px,.97vw,19px) clamp(16px,1.6vw,30px);
  }
  .footer-legal{
    flex:1 1 300px;                /* takes whatever the brand group leaves over */
    max-width:900px;
    margin-left:32px;              /* column separation without flex `gap` (Safari <14.1) */
    margin-left:clamp(20px,3vw,48px);
    font-family:var(--legal-font);
    /* XD: Montserrat 14 — keep the font, hold the size near 14 (was shrinking to 11). */
    font-size:13px; font-size:clamp(12.5px,.9vw,14px);
    line-height:1.45; color:#000;
  }
  .footer-legal p{ margin:0 0 .9rem; }
  .footer-legal .copy{ margin-bottom:0; }
  /* Below laptop width, skip straight to the centred stacked footer — no awkward
     in-between layout. No mobile artboard exists in the XD; centred is the
     deliberate treatment for the collapsed layout. */
  @media (max-width:991.98px){
    .site-footer .inner{ flex-direction:column; align-items:center; justify-content:center; text-align:center; }
    .footer-brand{ flex-direction:column; align-items:center; }
    .footer-brand img{ margin-left:auto; margin-right:auto; }
    /* Margins carry ALL stacked spacing (no flex `gap` — Safari <14.1). */
    .footer-brand address{ margin:12px 0 0; }
    .footer-legal{ flex:0 0 auto; margin-top:28px; margin-left:0; }   /* flex reset: row basis must not become a height */
  }

  /* =========================================================================
     LEAVING-SITE INTERSTITIAL
     Partner cards (.partner) are now links; activating one opens this modal,
     which repeats the third-party disclaimer before the user leaves the site.
     Progressive enhancement — no JS means the links navigate directly.
     Old-browser contract kept: static fallback before every clamp(), no flex
     `gap`, physical longhands before shorthand, @supports guards for flex.
     ========================================================================= */
  a.partner{ cursor:pointer; color:inherit; }
  /* Bootstrap Reboot recolours a:hover/:focus link-blue (0,0,1,1); these class rules
     outrank it so the card keeps its own colours — the name underline is the only
     hover affordance. */
  a.partner:hover, a.partner:focus{ color:inherit; }
  a.partner:hover .name{ text-decoration:underline; }
  a.partner:focus-visible{ outline:3px solid var(--green); outline-offset:4px; border-radius:8px; }

  /* Freeze background scroll while the modal is open (toggled on <html> by JS). */
  .lv-locked{ overflow:hidden; }

  .lv-overlay{
    display:none;
    position:fixed; top:0; right:0; bottom:0; left:0;
    z-index:2000;
    background:rgba(20,30,30,.55);
    padding:16px 14px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .lv-overlay.is-open{ display:block; }              /* block-centering fallback */
  @supports (display:flex){
    .lv-overlay.is-open{ display:flex; align-items:center; justify-content:center; }
  }

  .lv-dialog{
    position:relative;
    width:100%;
    max-width:900px;
    margin:auto;                                     /* centers in the fallback path */
    /* Never taller than the viewport, so the action buttons are always on-screen —
       the user shouldn't have to scroll the page to reach Continue/Cancel. */
    max-height:92vh;
    max-height:calc(100vh - 28px);
    overflow-y:auto;                                 /* fallback: whole dialog scrolls */
    background:#fff;
    border-radius:20px;
    box-shadow:0 12px 48px rgba(0,0,0,.28);
    padding:22px 24px 24px;
    padding:clamp(18px,2.2vw,34px) clamp(18px,2.4vw,42px) clamp(20px,2.4vw,38px);
    text-align:center;
    color:var(--teal);
  }
  /* With flex, lay the dialog out as a column and let ONLY the body copy scroll if a
     very short screen can't fit everything — logo, header and buttons stay visible. */
  @supports (display:flex){
    .lv-dialog{ display:flex; flex-direction:column; overflow:visible; }
    .lv-logo, .lv-title, .lv-actions{ flex:0 0 auto; }
    .lv-body{ flex:1 1 auto; min-height:0; overflow-y:auto; }
  }

  .lv-logo{
    width:170px;
    width:clamp(140px,13.5vw,210px);
    height:auto;
    margin-left:auto; margin-right:auto;
    margin-bottom:14px; margin-bottom:clamp(10px,1.2vw,18px);
  }

  /* Header — BookmanOpti, same face as the home "Benign Prostatic Hyperplasia" title. */
  .lv-title{
    font-family:var(--heading-font);
    font-weight:500;
    color:var(--teal);
    font-size:24px;
    font-size:clamp(21px,2.1vw,32px);
    line-height:1.16;
    margin:0 0 14px;
    margin:0 0 clamp(12px,1.4vw,20px);
  }

  /* Body — Noto Sans; reduced so the modal fits laptop screens (client req) AND each
     desktop line matches the mock-up's word breaks (the manual <br>s in the markup are
     desktop-only — they vanish below lg, where the copy wraps naturally). */
  .lv-body{ margin-left:auto; margin-right:auto; max-width:940px; }
  .lv-body p{
    font-family:var(--body-font);
    font-size:14px;
    font-size:clamp(13px,.8vw,14.5px);
    line-height:1.5;
    margin:0 0 12px;
    margin:0 0 clamp(9px,.9vw,16px);
  }
  .lv-body p:last-child{ margin-bottom:0; }
  .lv-italic{ font-style:italic; }

  .lv-actions{
    display:block;
    text-align:center;
    margin-top:18px;
    margin-top:clamp(14px,1.6vw,24px);
  }
  @supports (display:flex){
    .lv-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }
  }

  .lv-btn{
    display:inline-block;
    min-width:150px;
    text-align:center;
    font-family:var(--heading-font);
    font-weight:500;
    font-size:16px;
    font-size:clamp(15px,1vw,18px);
    line-height:1.1;
    border-radius:999px;
    /* Optical vertical centring: the labels have no descenders. Sit the caps a touch
       ABOVE the geometric centre (the conventional optical position for button text)
       via slightly more top / less bottom padding (equal total → height unchanged). */
    padding:.72em 2.2em .68em;
    cursor:pointer;
    /* Margins (not flex `gap`) space the buttons — Safari <14.1. */
    margin:8px 10px 0;
    transition:background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .lv-cancel{
    background:#fff;
    color:var(--teal);
    border:2px solid var(--teal);
  }
  .lv-cancel:hover,
  .lv-cancel:focus-visible{ background:var(--teal); color:#fff; }
  /* a:hover from Bootstrap Reboot (0,0,1,1) is outranked by these class rules. */
  .lv-continue{
    background:var(--teal);
    color:#fff;
    border:2px solid var(--teal);
  }
  .lv-continue:hover,
  .lv-continue:focus-visible{ background:var(--teal-2); border-color:var(--teal-2); color:#fff; }

  @media (max-width:479.98px){
    /* Phones: stack the actions full-width for easy tapping. */
    .lv-btn{ display:block; width:100%; min-width:0; margin:10px 0 0; }
    .lv-btn:first-child{ margin-top:0; }
  }

  /* Short viewports (laptops, small/landscape windows): tighten type and spacing so
     everything — including the buttons — fits without scrolling. */
  @media (max-height:720px){
    .lv-logo{ width:130px; margin-bottom:8px; }
    .lv-title{ font-size:22px; font-size:clamp(19px,1.9vw,26px); margin-bottom:9px; }
    .lv-body p{ font-size:13px; font-size:clamp(12.5px,.78vw,14px); line-height:1.42; margin-bottom:8px; }
    .lv-actions{ margin-top:12px; }
  }
  @media (max-height:560px){
    .lv-logo{ display:none; }                       /* reclaim height on very short screens */
    .lv-title{ font-size:20px; margin-bottom:7px; }
    .lv-body p{ font-size:13px; line-height:1.34; margin-bottom:6px; }
  }