/* Freedom RX design system v2 — crisp modern Americana
   Headline: Plus Jakarta Sans 800, tight tracking. Body: Inter.
   Accent: Source Serif 4 italic for emphasis words.
   Palette: navy #0A1E3C, red #E1252F, white/#F7F9FD, tints #EEF3FC/#FCEFF1 */
:root{
  --navy:#0A1E3C;
  --navy-mid:#122B52;
  --ink:#22314A;
  --red:#E1252F;
  --red-deep:#C11B24;
  --gold:#F0C24A;
  --go:#16A34A;          /* the "ready now" green of the Start here marker; --go-bright is its dark-panel form */
  --go-bright:#4ADE80;
  --tint-blue:#EEF3FC;
  --tint-red:#FCEFF1;
  --paper:#FFFFFF;
  --bg:#F7F9FD;
  --line:rgba(10,30,60,.14);
  --line-soft:rgba(10,30,60,.08);
  --muted:#5C6B84;
  --body-soft:#33415C;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Plus Jakarta Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --shadow-soft:0 2px 14px rgba(10,30,60,.05);
  --shadow-mid:0 10px 30px rgba(10,30,60,.08);
  --shadow-lift:0 24px 60px rgba(10,30,60,.14);
  --r-xl:28px;
  --r-lg:24px;
  --r-md:16px;
  --sp-band:clamp(88px,10vw,140px);
  --sp-head:clamp(48px,5.5vw,72px);
  --sp-gap:clamp(20px,2.4vw,30px);
  --wrap-pad:clamp(22px,4vw,40px);
}
*{margin:0;padding:0;box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
.ico-sprite{position:absolute}
.ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding-left:var(--wrap-pad);padding-right:var(--wrap-pad)}

/* ---------- top bar (rotating announcements) ---------- */
.topbar{
  background:var(--navy);color:#E8EEF8;font-size:14px;font-weight:500;letter-spacing:.01em;
  display:flex;align-items:center;height:42px;
}
.tb-slides{position:relative;flex:1;height:100%;overflow:hidden}
.tb-slide{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:0 8px;white-space:nowrap;
  opacity:0;transition:opacity .5s;pointer-events:none;
}
.tb-slide.is-on{opacity:1;pointer-events:auto}
.tb-slide b{font-weight:700;color:#fff}
.tb-slide a{
  color:var(--gold);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;transition:color .15s;
}
.tb-slide a:hover{color:#fff}
.tb-arrow{
  background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;
  height:100%;padding:0 16px;display:flex;align-items:center;transition:color .15s;
}
.tb-arrow:hover{color:#fff}
.tb-arrow .ico{width:16px;height:16px;stroke-width:2}
@media(prefers-reduced-motion:reduce){.tb-slide{transition:none}}
@media(max-width:700px){
  .topbar{font-size:12px}
  .tb-more{display:none}
  .tb-arrow{padding:0 14px}
  .tb-slide{gap:8px}
}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
}
/* The header runs wider than the 1200px page cap (added 2026-09-21): with the "Start here"
   pill the nav row needs more than the 846px that cap leaves it. */
header.site .wrap{display:flex;align-items:center;gap:36px;height:72px;max-width:1360px}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;transform:translateY(-3px)}
.logo img{height:54px;width:auto}
/* The row spaces itself (2026-09-21): the nav fills whatever width the header has left and
   shares it out evenly between the items, about 17px apart at 1200px wide and about 32px from
   1360px up. Nothing overlaps and no gap needs retuning when an item is added or renamed; the
   gap value is only the floor. "Treatments" stands a little further off once there is room,
   as the way into the whole catalog. */
nav.main{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1;min-width:0}
nav.main a.nav-explore{color:var(--muted);margin-left:clamp(0px,calc((100vw - 1240px) * .4),32px);font-weight:800}
.nav-item{display:flex;align-items:center;height:72px}
nav.main a.nav-link,nav.main a.nav-explore{
  flex-shrink:0;
  text-decoration:none;font-weight:650;font-size:14.5px;letter-spacing:.015em;color:var(--ink);
  padding:5px 0;border-bottom:2px solid transparent;transition:border-color .15s,color .15s;
}
nav.main a.nav-link:hover,.nav-item:hover>.nav-link,.nav-item:focus-within>.nav-link,nav.main a.nav-explore:hover{color:var(--navy);border-bottom-color:var(--red)}
nav.main a.btn{flex-shrink:0;padding:12px 22px;border-bottom:none;color:#fff;font-size:15px}
/* the "Start here" pill that led the row from 2026-09-21 to 2026-10-02 is gone (nav v2); its rules live in docs/versions/nav-v1.html */
nav.main a.btn:hover{border-bottom:none;color:#fff}

/* ---------- mega menu (desktop rollover; anchored to the sticky header, below the promo bar) ---------- */
.mega{
  position:absolute;left:0;right:0;top:100%;z-index:49;
  background:#fff;border-bottom:1px solid var(--line-soft);
  box-shadow:0 32px 56px -28px rgba(10,30,60,.28);
  opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;
  transition:opacity .16s ease,transform .2s ease,visibility 0s linear .28s;
}
.nav-item:hover .mega,.nav-item:focus-within .mega{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .18s ease .09s,transform .24s cubic-bezier(.16,1,.3,1) .09s,visibility 0s linear .09s;
}
/* invisible hover bridge across the promo band so the pointer can travel from the link into the panel */
.mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(var(--promo-h, 40px) + 4px)}
/* same 1360px cap as the header row, so a panel lines up with the logo and the Patient Portal button */
.mega-wrap{max-width:1360px;margin:0 auto;padding-left:var(--wrap-pad);padding-right:var(--wrap-pad)}
.mega-head{display:flex;align-items:baseline;gap:14px;padding-top:24px;margin-bottom:16px;border-bottom:1px solid var(--line-soft);padding-bottom:14px}
.mega-title{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--navy);margin:0;white-space:nowrap}
.mega-blurb{flex:1;min-width:0;font-size:13.5px;line-height:1.5;color:var(--muted);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mega-all{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;font-family:var(--display);font-weight:800;font-size:13.5px;color:var(--red);text-decoration:none}
.mega-all .ico,.mega-go .ico,.mega-foot .ico{width:13px;height:13px}
.mega-body{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:20px;padding-bottom:24px;align-items:stretch}
.mega-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mega-cards[data-n="1"]{grid-template-columns:minmax(0,340px)}
.mega-cards[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.mega-card{display:flex;flex-direction:column;gap:6px;min-width:0;border:1px solid var(--line-soft);border-radius:18px;padding:14px;text-decoration:none;background:#fff;transition:transform .15s,box-shadow .15s,border-color .15s}
.mega-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-mid);border-color:var(--line)}
.mega-media{display:flex;align-items:center;justify-content:center;height:110px;border-radius:12px;background:linear-gradient(160deg,var(--tint-blue),#fff);margin-bottom:4px}
.mega-media img{max-height:94px;max-width:82%;width:auto}
.mega-media svg{height:70px;width:auto}
.mega-chip{align-self:flex-start;font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);background:var(--tint-red);border-radius:999px;padding:3px 9px}
.mega-name{font-family:var(--display);font-weight:800;font-size:15.5px;letter-spacing:-.01em;color:var(--navy)}
.mega-tease{font-size:12.5px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mega-cta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
.mega-price{font-size:12.5px;color:var(--muted)}
.mega-price b{font-family:var(--display);font-weight:800;font-size:14.5px;color:var(--navy)}
.mega-go{display:inline-flex;align-items:center;gap:5px;font-family:var(--display);font-weight:700;font-size:12.5px;color:var(--red);white-space:nowrap}
.mega-feature{display:flex;flex-direction:column;background:linear-gradient(150deg,var(--navy-mid),var(--navy));border-radius:18px;padding:22px;color:#fff}
.mega-feye{font-family:var(--display);font-weight:800;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.mega-fpts{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:9px}
.mega-fpts li{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.88)}
.mega-fpts .ico{width:16px;height:16px;flex-shrink:0;color:var(--gold);margin-top:1px}
.mega-feature .btn{display:block;margin-top:auto;padding:12px 18px;font-size:14px}
.mega-foot{border-top:1px solid var(--line-soft);background:var(--bg)}
.mega-foot .mega-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:11px;padding-bottom:11px;font-size:12.5px;color:var(--muted)}
.mega-steps{display:flex;align-items:center;gap:22px;min-width:0;overflow:hidden}
.mega-steps span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.mega-steps b{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:var(--tint-red);color:var(--red);font-family:var(--display);font-weight:800;font-size:11px;flex-shrink:0}
.mega-foot a{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:700;color:var(--navy);text-decoration:none;white-space:nowrap;transition:color .15s}
.mega-foot a:hover{color:var(--red)}
.mega-links{display:inline-flex;align-items:center;gap:22px;flex-shrink:0}
/* resources inside the navy card (Ryan, 2026-09-25: "make sure the resources are in the mega menu in a nice way"):
   a "Resources" eyebrow and the category guide as a tappable row above the Explore button */
.mega-res{margin:0 0 14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
.mega-res .mega-feye{margin-bottom:8px}
.mega-res-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;transition:background .15s,border-color .15s}
.mega-res-link:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}
.mega-res-ic{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:rgba(240,194,74,.16);color:var(--gold)}
.mega-res-ic svg{width:17px;height:17px}
.mega-res-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega-res-txt b{font-family:var(--display);font-weight:700;font-size:12.5px;line-height:1.3;letter-spacing:0}
.mega-res-link .ico{flex:0 0 auto;width:13px;height:13px;color:rgba(255,255,255,.6);margin-left:auto}
@media(max-width:1320px){.mega-body{grid-template-columns:minmax(0,1fr) 228px;gap:16px}.mega-res-link .ico{display:none}}
@media(prefers-reduced-motion:reduce){.mega,.nav-item:hover .mega,.nav-item:focus-within .mega{transition:none}.mega-card{transition:none}}
.btn{
  display:inline-block;text-decoration:none;font-weight:700;font-family:var(--display);
  white-space:nowrap;flex-shrink:0;letter-spacing:-.01em;
  border-radius:999px;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;
  text-align:center;
}
.btn-ghost{
  border:1.5px solid var(--line);color:var(--navy);
  padding:15px 30px;font-size:16px;background:#fff;
}
.btn-ghost:hover{border-color:var(--navy);box-shadow:var(--shadow-soft)}
.btn-light{
  border:1.5px solid rgba(255,255,255,.45);color:#fff;
  padding:15px 30px;font-size:16px;background:transparent;
}
.btn-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-red{
  background:var(--red);color:#fff;padding:16px 32px;font-size:16px;
  box-shadow:0 6px 20px rgba(225,37,47,.28);
}
.btn-red:hover{background:var(--red-deep);transform:translateY(-1px);box-shadow:0 10px 28px rgba(225,37,47,.34)}
/* a treatment that is listed and priced but not yet purchasable (config COMING_SOON) */
.btn-soon{background:var(--tint-blue);color:var(--muted);padding:16px 32px;font-size:16px;cursor:default;box-shadow:none}
.btn-soon:hover{transform:none}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;background:none;border:1.5px solid var(--line);border-radius:11px;cursor:pointer;color:var(--navy);align-items:center;justify-content:center}
.mb-lines{position:relative;display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:background .2s ease}
.mb-lines::before,.mb-lines::after{content:"";position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .28s ease,top .28s ease}
.mb-lines::before{top:-6px}
.mb-lines::after{top:6px}
html.nav-open .mb-lines{background:transparent}
html.nav-open .mb-lines::before{top:0;transform:rotate(45deg)}
html.nav-open .mb-lines::after{top:0;transform:rotate(-45deg)}
@media(max-width:1199px){
  nav.main{display:none}
  .menu-btn{display:flex}
  html.nav-open{overflow:hidden}
  html.nav-open body{overflow:hidden}
}

/* ---------- mobile side panel (slide-in drawer + scrim) ---------- */
.scrim{
  position:fixed;inset:0;z-index:58;
  background:rgba(10,30,60,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;
}
html.nav-open .scrim{opacity:1;visibility:visible;transition:opacity .3s ease}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:60;
  width:min(400px,90vw);background:#fff;outline:none;
  display:flex;flex-direction:column;
  transform:translateX(103%);transition:transform .34s cubic-bezier(.16,1,.3,1);
  box-shadow:-28px 0 64px rgba(10,30,60,.3);
}
html.nav-open .drawer{transform:none}
.dw-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line-soft);flex-shrink:0}
.dw-head img{height:44px;width:auto}
.dw-close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;color:var(--navy)}
.dw-close .ico{width:16px;height:16px}
.dw-scroll{flex:1;overflow-y:auto;padding:2px 20px 18px;-webkit-overflow-scrolling:touch}
.dw-start{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 0;padding:14px 16px;text-decoration:none;background:var(--navy);border-radius:16px;box-shadow:var(--shadow-soft)}
.dw-start-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.dw-start b{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.015em;color:#fff}
.dw-start small{font-size:12.5px;line-height:1.4;color:rgba(232,238,248,.78)}
.dw-start .ico{flex-shrink:0;width:16px;height:16px;color:var(--gold);stroke-width:2.2}
.dw-trust{list-style:none;margin:16px 0 2px;padding:14px 16px;display:flex;flex-direction:column;gap:9px;background:linear-gradient(160deg,var(--tint-blue),#fff);border:1px solid var(--line-soft);border-radius:16px}
.dw-trust li{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--navy)}
.dw-trust .ico{width:16px;height:16px;color:var(--red);flex-shrink:0}
.dw-label{font-family:var(--display);font-weight:800;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:20px 0 4px}
.dw-acc{border-bottom:1px solid var(--line-soft)}
.dw-acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:none;padding:14px 0;cursor:pointer;text-align:left}
.dw-acc-btn>span{display:flex;flex-direction:column;gap:2px;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.015em;color:var(--navy)}
.dw-acc-btn>span small{font-family:var(--sans);font-weight:500;font-size:12.5px;letter-spacing:0;color:var(--muted)}
.dw-acc-btn .ico{width:15px;height:15px;color:var(--red);flex-shrink:0;transition:transform .25s ease}
.dw-acc.open .dw-acc-btn .ico{transform:rotate(90deg)}
.dw-acc-panel{overflow:hidden;max-height:0;transition:max-height .32s ease}
.dw-acc.open .dw-acc-panel{max-height:560px}
.dw-acc-panel a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0 11px 4px;font-size:15.5px;font-weight:600;color:var(--ink);text-decoration:none;border-top:1px solid var(--line-soft)}
.dw-acc-panel a span{font-size:12.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.dw-acc-panel a.dw-all{justify-content:flex-start;gap:6px;font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--red);padding-bottom:15px}
.dw-acc-panel a.dw-all .ico{width:13px;height:13px}
/* the category's guide inside the drawer panel, above View all (Ryan, 2026-09-26: "add the guide link in the menu") */
.dw-acc-panel a.dw-guide{justify-content:flex-start;gap:10px;padding:12px 0 16px 4px}
.dw-guide-ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:30px;height:30px;border-radius:9px;background:var(--tint-red);color:var(--red)}
.dw-guide-ic svg{width:15px;height:15px}
.dw-acc-panel a.dw-guide .dw-guide-t{display:flex;flex-direction:column;gap:2px;font-size:15px;font-weight:700;color:var(--navy);white-space:normal}
.dw-guide-t b{font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.dw-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.015em;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--line-soft)}
.dw-row::after{content:"\2192";font-size:17px;color:var(--red);opacity:.85}
.dw-foot{flex-shrink:0;display:flex;flex-direction:column;gap:9px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line-soft);background:#fff}
.dw-foot .btn{display:block;text-align:center;padding:14px 22px;font-size:15.5px}
.dw-micro{margin:2px 0 0;font-size:12px;color:var(--muted);text-align:center}
@media(min-width:1200px){.scrim,.drawer{display:none}}
@media(prefers-reduced-motion:reduce){.drawer,.scrim,.dw-acc-panel,.dw-acc-btn .ico,.mb-lines,.mb-lines::before,.mb-lines::after{transition:none}}

/* ---------- promo bar (persistent, sits inside the sticky header under the nav) ---------- */
:root{--promo-h:40px}
.promo{
  height:var(--promo-h);display:flex;align-items:center;
  background:var(--tint-red);border-top:1px solid rgba(225,37,47,.14);
  color:var(--navy);font-size:14px;font-weight:500;letter-spacing:.01em;
}
header.site .promo .wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;white-space:nowrap;overflow:hidden}
.promo .ico{width:18px;height:18px;color:var(--red);flex-shrink:0}
.promo b{font-weight:700}
.promo-code{
  display:inline-block;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.08em;line-height:1.2;
  color:var(--red);background:#fff;border:1.5px dashed rgba(225,37,47,.5);border-radius:6px;padding:2px 8px;
  vertical-align:1px;
}
@media(max-width:700px){
  :root{--promo-h:36px}
  .promo{font-size:12.5px;letter-spacing:0}
  header.site .promo .wrap{gap:0;padding-left:12px;padding-right:12px}
  .promo .ico{display:none}
  .promo-code{font-size:11.5px;padding:1px 6px;letter-spacing:.06em}
}
@media(max-width:340px){.promo{font-size:11.5px}}

/* ---------- mission statement band ---------- */
section.band.mission{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.mission-panel{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--navy-mid) 0%,var(--navy) 100%);
  border-radius:var(--r-xl);box-shadow:var(--shadow-lift);
  padding:clamp(36px,5vw,68px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5.5vw,88px);align-items:center;
}
.mission-panel::before{
  content:"";position:absolute;top:-140px;right:-120px;width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(238,243,252,.14) 0%,rgba(238,243,252,0) 66%);
}
.mission-panel::after{
  content:"";position:absolute;bottom:-160px;left:-120px;width:440px;height:440px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(238,243,252,.10) 0%,rgba(238,243,252,0) 66%);
}
.mission-copy{position:relative}
.mission-panel .eyebrow{color:rgba(232,238,248,.62);margin-bottom:16px}
.mission-h{color:#fff;margin-bottom:16px}
.mission-h em{color:#fff}
.mission-p{font-size:16px;color:rgba(232,238,248,.76);line-height:1.7;margin:0;max-width:30em}
.mission-cta{margin-top:32px}
.mission-points{
  position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
.mission-points li{
  display:flex;flex-direction:column;align-items:flex-start;gap:11px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:18px;
  padding:20px 20px 18px;
  transition:transform .18s,border-color .18s,background .18s;
}
.mission-points li:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.09)}
.mission-points li b{font-family:var(--display);font-weight:800;font-size:15.5px;color:#fff;letter-spacing:-.01em}
.mp-t{font-size:13px;color:rgba(232,238,248,.66);line-height:1.55}
.mp-ic{
  flex:0 0 auto;width:38px;height:38px;border-radius:12px;
  background:rgba(238,243,252,.12);color:#E8EEF8;
  display:flex;align-items:center;justify-content:center;
}
.mp-ic .ico{width:18px;height:18px}
@media(max-width:960px){.mission-panel{grid-template-columns:1fr;gap:34px}}
@media(max-width:560px){.mission-points{grid-template-columns:1fr}}
.btn-line{
  border:1.5px solid var(--navy);color:var(--navy);
  padding:15px 38px;font-size:15.5px;background:transparent;
}
.btn-line:hover{background:var(--tint-blue);box-shadow:var(--shadow-soft)}

/* ---------- popular treatments (homepage) ---------- */
.pop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pop-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-soft);padding:16px 16px 20px;text-decoration:none;transition:transform .18s,box-shadow .18s}
.pop-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-mid)}
.pop-media{background:radial-gradient(130% 110% at 78% 0%,#F2F6FD 0%,#E6EDFA 55%,#DCE6F7 100%);border:1px solid var(--line-soft);border-radius:16px;height:200px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.pop-media img{max-height:86%;max-width:70%;width:auto;height:auto;object-fit:contain}
.pop-name{font-family:var(--display);font-weight:800;font-size:17.5px;color:var(--navy);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pop-chip{background:var(--tint-blue);color:var(--navy);border:1px solid var(--line-soft);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.pop-sub{font-size:13.5px;color:var(--muted);line-height:1.55;margin:7px 0 14px}
.pop-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line-soft);padding-top:13px}
.pop-price{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--navy)}
.pop-price small{font-family:var(--sans);font-weight:600;font-size:12px;color:var(--muted);letter-spacing:0}
.pop-go{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--red)}
.pop-more{text-align:center;margin-top:38px}
@media(min-width:641px){.pop-more{display:none}}
#treatments.band{padding-bottom:clamp(36px,4.5vw,64px)}

/* ---------- how it works: split timeline card ---------- */
/* since 2026-09-24 the card sits between the credentials band and the catalog, so it picks the tint up and fades to white */
section.band.hw{padding-top:clamp(24px,3vw,44px);padding-bottom:clamp(56px,7vw,96px);background:linear-gradient(180deg,var(--bg) 0%,#fff 24%)}
.hw-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-xl);box-shadow:var(--shadow-lift);
  padding:clamp(34px,4.5vw,60px);
  display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,5vw,84px);align-items:center;
}
.hw-left .eyebrow{margin-bottom:14px}
.hw-left h2{margin-bottom:14px}
.hw-sub{font-size:16px;color:var(--muted);line-height:1.65;margin:0}
.hw-cta{margin-top:28px;padding:14px 32px;font-size:15px}
.hw-fine{font-size:12.5px;color:var(--muted);margin-top:12px}
.hw-steps{position:relative;display:flex;flex-direction:column;gap:28px}
.hw-steps::before{content:"";position:absolute;left:19px;top:22px;bottom:22px;width:2px;background:var(--line-soft)}
.hw-step{position:relative;display:flex;gap:18px;align-items:flex-start}
.hw-dot{
  position:relative;z-index:1;flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:var(--tint-red);color:var(--red);
  font-family:var(--display);font-weight:800;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px #fff;
}
.hw-step b{display:block;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.015em;color:var(--navy);margin:8px 0 5px}
.hw-step p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0}
@media(max-width:900px){.hw-card{grid-template-columns:1fr;gap:36px}}
@media(max-width:640px){
  .hw-steps{
    flex-direction:row;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 -20px;padding:4px 20px 8px;scrollbar-width:none;
  }
  .hw-steps::-webkit-scrollbar{display:none}
  .hw-steps::before{display:none}
  .hw-step{
    flex:0 0 76%;scroll-snap-align:start;flex-direction:column;gap:12px;
    background:var(--bg);border:1px solid var(--line-soft);border-radius:16px;
    padding:18px 18px 20px;
  }
  .hw-step b{margin-top:0}
}
@media(max-width:1000px){.pop-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .pop-grid{
    display:flex;overflow-x:auto;gap:14px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-left:calc(-1 * var(--wrap-pad));margin-right:calc(-1 * var(--wrap-pad));
    padding:4px var(--wrap-pad) 18px;
    scrollbar-width:none;
  }
  .pop-grid::-webkit-scrollbar{display:none}
  .pop-card{flex:0 0 78%;scroll-snap-align:start}
}

/* ---------- pricing: honest receipt ---------- */
.pricing-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(48px,6vw,100px);align-items:center}
.pricing-copy .eyebrow{margin-bottom:14px}
.pricing-sub{font-size:17px;color:var(--muted);line-height:1.7;margin:0;max-width:30em}
.pricing-cta{margin-top:28px;padding:14px 32px;font-size:15px}
.price-note{font-size:13px;color:var(--muted);line-height:1.6;margin-top:22px;max-width:34em}
.receipt-wrap{display:flex;justify-content:center}
.receipt{
  position:relative;width:min(430px,100%);background:#fff;
  border:1px solid var(--line-soft);border-radius:14px 14px 0 0;
  box-shadow:var(--shadow-lift);
  padding:30px 30px 34px;transform:rotate(1.2deg);
}
.receipt::after{
  content:"";position:absolute;left:0;right:0;bottom:-13px;height:14px;
  background:conic-gradient(from -45deg at 50% 0,#fff 90deg,transparent 0) 0 0/26px 14px repeat-x;
  filter:drop-shadow(0 3px 3px rgba(10,30,60,.05));
}
.rc-head{display:flex;flex-direction:column;align-items:center;gap:3px;border-bottom:1.5px dashed var(--line);padding-bottom:16px;margin-bottom:8px}
.rc-head b{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.14em;color:var(--navy)}
.rc-head span{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rc-row{display:flex;align-items:baseline;gap:10px;padding:11px 0;font-size:14.5px}
.rc-row span{color:var(--ink);flex-shrink:0}
.rc-row i{flex:1;border-bottom:1.5px dotted var(--line);transform:translateY(-3px)}
.rc-row b{font-family:var(--display);font-weight:800;color:var(--navy);flex-shrink:0}
.rc-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-top:1.5px dashed var(--line);margin-top:8px;padding-top:16px;
}
.rc-total span{font-family:var(--display);font-weight:800;font-size:15px;color:var(--navy)}
.rc-total b{font-family:var(--display);font-weight:800;font-size:15px;color:var(--red)}
.rc-stamp{
  position:absolute;top:16px;right:-14px;transform:rotate(9deg);
  border:2px solid var(--red);color:var(--red);border-radius:8px;
  font-family:var(--display);font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;background:rgba(255,255,255,.9);opacity:.85;
}
@media(max-width:900px){
  .pricing-grid{grid-template-columns:1fr;gap:44px}
  .receipt{transform:rotate(0)}
  .rc-stamp{top:-13px;right:10px}
}

/* ---------- pricing band $0 tile (homepage) ---------- */
.pricing-visit{max-width:660px;margin:0 auto 26px}
.pricing-visit .eh-plans-label{text-align:center;margin-bottom:10px}
.price-note{text-align:center;font-size:13.5px;color:var(--muted);margin-top:22px}

/* ---------- type ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--display);
  font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--red);
  margin-bottom:22px;
}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
h1{
  font-family:var(--display);font-weight:800;color:var(--navy);
  font-size:clamp(2.9rem,5.6vw,4.6rem);
  line-height:1.06;letter-spacing:-.03em;margin-bottom:26px;
}
h1 em{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--red);letter-spacing:-.015em}
h2{
  font-family:var(--display);font-weight:800;color:var(--navy);
  font-size:clamp(2.1rem,3.7vw,3rem);line-height:1.1;letter-spacing:-.025em;margin-bottom:18px;
}
h2 em{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--red);letter-spacing:-.01em}
section.band{padding-top:var(--sp-band);padding-bottom:var(--sp-band)}
section.band.tintbg{
  background:
    radial-gradient(52% 44% at 82% 8%,rgba(238,243,252,.9) 0%,rgba(238,243,252,0) 100%),
    linear-gradient(180deg,#FFFFFF 0%,var(--bg) 16%,var(--bg) 84%,#FFFFFF 100%);
}
.sec-head{max-width:680px;margin-bottom:var(--sp-head)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head p{font-size:18.5px;color:var(--muted);line-height:1.65}

/* ---------- noom-style photo hero (homepage) ---------- */
.nhero{position:relative;overflow:hidden;background:var(--navy)}
.nhero-bg,.nhero-bg img{position:absolute;inset:0;width:100%;height:100%}
.nhero-bg img{object-fit:cover;object-position:center 32%}
.nhero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(10,30,60,.38) 0%,rgba(10,30,60,.08) 46%,rgba(10,30,60,.30) 100%),
    linear-gradient(0deg,rgba(10,30,60,.58) 0%,rgba(10,30,60,0) 46%);
}
.nhero-inner{
  position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(560px,76vh,820px);padding-top:44px;padding-bottom:clamp(36px,5vw,60px);
}
.nhero-title{
  color:#fff;margin-bottom:0;line-height:1.08;
  font-size:clamp(2.6rem,4.9vw,4.1rem);text-shadow:0 2px 24px rgba(10,30,60,.35);
}
.nhero-title .nh-l1,.nhero-title .nh-l2{display:block}
.nhero-title em{display:block;color:var(--gold);white-space:nowrap}
@media(min-width:1024px){
  .nhero-title{font-size:clamp(2.35rem,3.4vw,3.8rem)}
  /* reserve the card column so the headline can never run under the cards */
  .nhero-inner{padding-right:calc(min(400px,36vw) + 56px)}
}
.nhero-cards{
  position:absolute;right:var(--wrap-pad);top:50%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;gap:18px;width:min(400px,36vw);
}
.nhero-card{
  position:relative;display:block;border-radius:24px;overflow:hidden;
  padding:22px 24px 20px;text-decoration:none;
  box-shadow:0 24px 60px rgba(10,30,60,.28);
  transition:transform .18s,box-shadow .18s;
}
.nhero-card:hover{transform:translateY(-4px);box-shadow:0 32px 76px rgba(10,30,60,.36)}
.nc-dark{
  background:linear-gradient(150deg,rgba(18,43,82,.60) 0%,rgba(10,30,60,.68) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.06),0 24px 60px rgba(10,30,60,.30);
}
.nc-light{
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(28px) saturate(1.4);backdrop-filter:blur(28px) saturate(1.4);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.14),0 24px 60px rgba(10,30,60,.26);
}
.nhero-card::before{
  content:"";position:absolute;right:-70px;bottom:-90px;width:250px;height:250px;border-radius:50%;pointer-events:none;
}
.nc-dark::before{background:radial-gradient(circle,rgba(240,194,74,.22) 0%,rgba(240,194,74,0) 68%)}
.nc-light::before{background:radial-gradient(circle,rgba(238,243,252,1) 0%,rgba(238,243,252,0) 68%)}
.nc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.nc-tag{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.12em;border-radius:999px;padding:4px 11px}
.nc-dark .nc-tag{background:var(--gold);color:var(--navy)}
.nc-light .nc-tag{background:var(--navy);color:#fff}
.nc-dark .nc-price{color:var(--gold)}
.nc-light .nc-price{color:var(--red)}
.nc-title{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;margin:0 0 5px;max-width:11em;position:relative}
.nc-dark .nc-title{color:#fff}
.nc-light .nc-title{color:var(--navy)}
.nc-copy{font-size:13.5px;line-height:1.5;margin:0 0 16px;max-width:16em;position:relative}
.nc-dark .nc-copy{color:rgba(232,238,248,.82)}
.nc-light .nc-copy{color:var(--muted)}
.nc-btn{
  display:inline-flex;align-items:center;gap:7px;background:var(--red);color:#fff;border-radius:999px;
  padding:10px 18px;font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 6px 18px rgba(225,37,47,.32);transition:background .15s,gap .15s;position:relative;
}
.nc-btn .ico{width:13px;height:13px;stroke-width:2.4}
.nhero-card:hover .nc-btn{background:var(--red-deep);gap:11px}
.nc-fine{font-size:12px;font-weight:600;margin:11px 0 0;position:relative}
.nc-dark .nc-fine{color:rgba(232,238,248,.6)}
.nc-light .nc-fine{color:var(--muted)}
.nc-render{position:absolute;right:-12px;bottom:-18px;width:140px;transform:rotate(8deg);filter:drop-shadow(0 12px 22px rgba(10,30,60,.3));transition:transform .25s}
.nhero-card:hover .nc-render{transform:rotate(4deg) translateY(-3px)}
@media(max-width:1024px){
  .nhero::after{
    background:
      linear-gradient(180deg,rgba(10,30,60,.55) 0%,rgba(10,30,60,.14) 42%,rgba(10,30,60,.30) 100%);
  }
  .nhero-inner{justify-content:flex-start;min-height:0;padding-top:clamp(48px,7vw,72px)}
  .nhero-title{margin-bottom:26px;max-width:14em}
  .nhero-cards{position:static;transform:none;width:100%;max-width:520px}
}
@media(max-width:640px){
  .nhero-cards{gap:14px}
  .nc-render{width:112px}
  .nc-fine{padding-right:96px}
}

/* ---------- homepage: the treatment concierge at the hero (locked 2026-09-21) ----------
   Desktop: the guide card (guide.js, data-intro="compact") rises --hg-ov into the hero; the
   headline and the two product cards move up to clear it; the trust ticker sits below the
   card, capped with a top rule. 1024px and down: a short photo hero with the headline, the
   card right under it, then a build-generated copy of the two product cards (.hg-phone). */
:root{--hg-ov:190px}
.hguide{position:relative;z-index:5;padding-bottom:clamp(28px,3vw,40px)}
.hguide .frxg{max-width:940px}
.hguide .frxg-win{box-shadow:0 24px 70px rgba(10,30,60,.22),0 2px 10px rgba(10,30,60,.08)}
.hguide-cards{display:none}
/* the homepage ticker was removed on 2026-09-26 (it repeated the credentials strip right under it); the strip now caps the concierge card */
.hguide-cards ~ .cred{border-top:1px solid var(--line-soft)}
@media(min-width:1025px){
  .hguide{margin-top:calc(-1 * var(--hg-ov))}
  .nhero.has-guide .nhero-inner{min-height:clamp(620px,76vh,820px);padding-bottom:calc(var(--hg-ov) + 30px)}
  .nhero.has-guide .nhero-cards{top:calc((100% - var(--hg-ov)) / 2);gap:14px}
  .nhero.has-guide .nhero-card{padding:18px 22px 16px}
  .nhero.has-guide .nc-copy{display:none}
  .nhero.has-guide .nc-top{margin-bottom:9px}
  .nhero.has-guide .nc-title{margin-bottom:12px}
  .nhero.has-guide .nc-fine{margin-top:9px}
  .nhero.has-guide .nc-render{width:118px;bottom:-22px}
  .hguide .frxg-head{padding-top:11px;padding-bottom:11px}
  /* the raised headline sits over lighter parts of the photo: a deeper left wash keeps it legible */
  .nhero.has-guide::after{
    background:
      linear-gradient(90deg,rgba(10,30,60,.62) 0%,rgba(10,30,60,.30) 30%,rgba(10,30,60,.06) 52%,rgba(10,30,60,.30) 100%),
      linear-gradient(0deg,rgba(10,30,60,.66) 0%,rgba(10,30,60,0) 56%);
  }
}
/* short laptop screens: a shorter hero and slimmer product cards keep the chips in view */
@media(min-width:1025px) and (max-height:800px){
  .nhero.has-guide .nhero-inner{min-height:560px}
  .nhero.has-guide .nhero-cards{gap:12px}
  .nhero.has-guide .nhero-card{padding:15px 20px 14px}
  .nhero.has-guide .nc-fine{display:none}
  .nhero.has-guide .nc-title{font-size:19px;margin-bottom:10px}
  .nhero.has-guide .nc-render{width:96px;bottom:-16px}
  .nhero.has-guide .nhero-title{font-size:clamp(2.1rem,3vw,3.2rem)}
}
@media(max-width:1024px){
  :root{--hg-ov:44px}
  .nhero.has-guide .hg-desk{display:none}
  .nhero.has-guide .nhero-inner{padding-bottom:calc(var(--hg-ov) + 18px)} /* 26px until the seal joined the value line (2026-09-24); the goal chips stay above the phone fold */
  .nhero.has-guide .nhero-title{margin-bottom:0}
  .hguide{margin-top:calc(-1 * var(--hg-ov));padding-bottom:22px}
  .hguide-cards{display:block;padding-bottom:30px}
  .hguide-cards .nhero-cards{position:static;transform:none;width:100%;max-width:520px;margin:0 auto}
}
/* tablets: the two product cards sit side by side under the guide, as wide as the guide card */
@media(min-width:700px) and (max-width:1024px){
  .hguide-cards .nhero-cards{flex-direction:row;align-items:stretch;gap:16px;max-width:940px}
  .hguide-cards .nhero-card{flex:1 1 0;min-width:0}
}
/* while each of those cards is under about 400px wide, the vial shrinks and the price line wraps clear of it */
@media(min-width:700px) and (max-width:900px){
  .hguide-cards .nc-render{width:112px}
  .hguide-cards .nc-fine{padding-right:96px}
}

/* ---------- homepage conversion pass (Ryan, 2026-09-24: "we want to increase conversion") ----------
   The hero states the offer and carries one primary button; a credentials band and the
   how-it-works card sit under the ticker, ahead of the catalog; the mission panel is a
   facts row; phones get a sticky bottom bar once the concierge has scrolled by. */
.nhero-kicker{font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.88);margin:0 0 14px;line-height:1.5;text-shadow:0 1px 12px rgba(10,30,60,.4)}
/* the LegitScript seal sits in the concierge card's header corner (Ryan, 2026-09-24; it was in the hero value line for
   one deploy). The wrapper matches the card's width so the corner lines up; once the conversation starts the Back and
   Start over tools take that corner, so the seal fades out (:has, as the buybar rules already rely on). */
.hguide-box{position:relative;max-width:940px;margin:0 auto}
.hg-seal{position:absolute;right:18px;top:11px;z-index:6;display:inline-flex;transition:opacity .15s,transform .15s}
.hg-seal:hover{transform:translateY(-1px)}
.hg-seal img{height:44px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(10,30,60,.18))}
.hguide-box:has(.frxg-win:not(.is-idle)) .hg-seal{opacity:0;pointer-events:none}
@media(max-width:700px){.hg-seal{right:12px;top:10px}.hg-seal img{height:36px}}
.nhero-ctas{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px}
.nhero-ctas .btn-red{padding:15px 30px;font-size:15.5px;box-shadow:0 10px 28px rgba(225,37,47,.32)}
.nhero-how{font-family:var(--display);font-weight:700;font-size:15px;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.45);text-shadow:0 1px 12px rgba(10,30,60,.4)}
.nhero-how:hover{text-decoration-color:#fff}
@media(max-width:640px){
  /* "Modern healthcare" stays on one line down to 360px wide phones (headline changed 2026-09-24) */
  .nhero.has-guide .nhero-title{font-size:clamp(2rem,9.6vw,2.6rem)}
  /* per-photo focal points (Ryan, 2026-09-25: "ensure on mobile the hero image is always positioned so the
     people are not cut off"): the phone band shows less than half of a portrait file, and the boardwalk
     couple stand in the top quarter of theirs, so that photo is anchored higher than the default 32% */
  .nhero-bg[data-photo="boardwalk"] img{object-position:center 23%}
  /* and the band keeps an 80px strip above the value line so faces sit above the text, not behind it */
  .nhero.has-guide .nhero-inner{padding-top:80px}
}
@media(min-width:641px) and (max-width:1024px){
  /* tablets show the landscape files in a short band; both new photos have heads near the top edge */
  .nhero-bg[data-photo="cafe"] img,.nhero-bg[data-photo="boardwalk"] img{object-position:center 8%}
}
@media(max-width:1024px){
  .nhero-ctas{display:none} /* the sticky bar and the concierge carry the phone CTA */
  .nhero-kicker{font-size:11px;letter-spacing:.12em;margin-bottom:10px}
}
.cred{background:var(--bg);border-bottom:1px solid var(--line-soft)}
.cred .wrap{display:flex;align-items:center;justify-content:center;gap:12px 34px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.cred span{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:14px;color:var(--navy);white-space:nowrap}
.cred span .ico{width:17px;height:17px;color:var(--red);stroke-width:1.9;flex-shrink:0}
.cred-seal{display:inline-flex;align-items:center}
.cred-seal img{height:54px;width:auto;display:block}
/* phones (Ryan, 2026-09-25: "this looks horrible on mobile"): the seal centred on its own row, then the
   four credentials as one aligned column (a two-column grid wrapped two of the labels unevenly at 375px) */
@media(max-width:640px){
  .cred .wrap{display:grid;grid-template-columns:max-content;justify-content:center;justify-items:start;gap:9px;padding-top:16px;padding-bottom:16px}
  .cred-seal{justify-self:center;margin-bottom:6px}
  .cred-seal img{height:46px}
  .cred span{font-size:13.5px;line-height:1.25;gap:9px}
}
.mission-panel.is-compact{grid-template-columns:1fr;gap:24px;padding:clamp(28px,3.6vw,44px) clamp(28px,4vw,52px)}
.mission-panel.is-compact .eyebrow{margin-bottom:8px}
.mission-panel.is-compact .mission-h{font-size:clamp(22px,2.4vw,30px);margin:0}
.mission-panel.is-compact .mission-points{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.mission-panel.is-compact .mission-points{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mission-panel.is-compact .mission-points{grid-template-columns:1fr}}
.hbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.94);box-shadow:0 -1px 0 rgba(10,30,60,.06),0 -14px 40px rgba(10,30,60,.12);transform:translateY(110%);transition:transform .25s ease}
@supports((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hbar{background:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(247,249,253,.7) 100%);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5)}
}
.hbar.is-on{transform:none}
html.nav-open .hbar{display:none}
.hbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.hbar-t{font-family:var(--display);font-weight:800;font-size:14.5px;color:var(--navy);line-height:1.2;min-width:0}
.hbar-t small{display:block;font-family:var(--sans);font-weight:500;font-size:12px;color:var(--muted);margin-top:2px}
.hbar .btn{flex:0 0 auto;padding:12px 20px;font-size:14px;white-space:nowrap}
body.hbar-on{padding-bottom:72px}
@media(min-width:1025px){.hbar{display:none}body.hbar-on{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){.hbar{transition:none}}

/* ---------- homepage: ongoing care + lab work (2026-09-28, from the Hims / Ro review) ----------
   Two sections after the catalog: what happens after the first box (six cards, each tagged with when
   it applies), then the testosterone lab options (generated from build.js LABS between the
   BUILD:HOME-LABS markers) beside the Rythm device. Phones get a compact one-column list for the care
   cards, so nothing important hides in a side-scroller. */
/* "You're not alone" (2026-09-28): four population figures from the learn guides, each tile linking to its guide,
   with the sources printed under the grid (generated between BUILD:HOME-STATS) */
section.band.hstats{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px)}
.hstats .sec-head{max-width:720px}
.hstats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hstat{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-soft);padding:24px 22px 20px;text-decoration:none;color:inherit;transition:transform .18s,box-shadow .18s}
.hstat:hover{transform:translateY(-4px);box-shadow:var(--shadow-mid)}
.hstat-big{font-family:var(--display);font-weight:800;font-size:clamp(38px,4vw,52px);letter-spacing:-.03em;line-height:1;color:var(--navy)}
.hstat-t{display:block;flex:1;font-size:14.5px;line-height:1.55;color:var(--muted);margin-top:12px;text-wrap:pretty}
.hstat-t sup{font-size:.68em;font-weight:700;color:var(--red-deep);margin-left:2px;line-height:0}
.hstat .ln-meter{display:block;margin-top:16px}
.hstat .ln-meter-fill{display:block}
.hstat-go{display:block;margin-top:14px;font-family:var(--display);font-weight:700;font-size:13.5px;line-height:1.35;color:var(--navy)}
.hstat-go .ico{display:inline-block;width:13px;height:13px;margin-left:5px;vertical-align:-1px;stroke-width:2.4;color:var(--red);transition:transform .18s}
.hstat-nw{white-space:nowrap} /* the arrow stays with the last word */
.hstat:hover .hstat-go{color:var(--red)}
.hstat:hover .hstat-go .ico{transform:translateX(3px)}
.hstats-src{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:24px auto 0;max-width:980px;font-size:12.5px;line-height:1.55;color:var(--muted);text-align:center}
.hstats-src b{color:var(--navy);font-weight:700}
.hstats-src a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(92,107,132,.4)}
.hstats-src a:hover{color:var(--red)}
.hstats-note{max-width:56em;margin:8px auto 0;text-align:center;font-size:12.5px;line-height:1.55;color:var(--muted)}
@media(max-width:960px){.hstats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){
  .hstats-grid{gap:10px}
  .hstat{padding:18px 16px 16px;border-radius:18px}
  .hstat-big{font-size:34px}
  .hstat-t{font-size:13px;margin-top:8px}
  .hstat .ln-meter{margin-top:12px}
  .hstat-go{font-size:12.5px;margin-top:10px}
  .hstats-src{justify-content:flex-start;text-align:left}
  .hstats-note{text-align:left}
}
@media(prefers-reduced-motion:reduce){.hstat,.hstat-go .ico{transition:none}.hstat:hover{transform:none}.hstat:hover .hstat-go .ico{transform:none}}
section.band.care{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px)}
.care .sec-head{max-width:760px}
.care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.care-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:22px 22px 24px;box-shadow:var(--shadow-soft);transition:transform .18s,box-shadow .18s}
.care-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-mid)}
.care-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.care-ic{flex:0 0 auto;width:44px;height:44px;border-radius:13px;background:var(--tint-red);color:var(--red);display:flex;align-items:center;justify-content:center}
.care-ic svg{width:21px;height:21px}
.care-when{font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);background:var(--tint-blue);border-radius:999px;padding:4px 10px;white-space:nowrap}
.care-card h3{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.015em;color:var(--navy);margin:0 0 6px;line-height:1.3}
.care-card p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0}
.care-card p a{color:var(--navy);font-weight:600;word-break:break-word}
.care-fine{text-align:center;font-size:13.5px;color:var(--muted);margin:26px auto 0;max-width:52em}
.care-fine a{color:var(--navy);font-weight:700;white-space:nowrap}
.care-fine a:hover{color:var(--red)}
@media(max-width:960px){.care-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .care-grid{grid-template-columns:1fr;gap:10px}
  .care-card{display:grid;grid-template-columns:40px 1fr;column-gap:14px;padding:16px 16px 17px;border-radius:18px}
  .care-card:hover{transform:none}
  .care-top{display:contents}
  .care-ic{grid-row:1 / span 3;width:40px;height:40px;border-radius:12px}
  .care-ic svg{width:19px;height:19px}
  .care-when{justify-self:start;margin-bottom:7px;font-size:10px;padding:3px 9px}
  .care-card h3{font-size:16px;margin-bottom:4px}
  .care-card p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.care-card{transition:none}.care-card:hover{transform:none}}

.hlabs-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(36px,5vw,80px);align-items:center}
.hlabs-copy .eyebrow{margin-bottom:14px}
.hlabs-copy h2{margin-bottom:14px}
.hlabs-sub{font-size:16.5px;color:var(--muted);line-height:1.65;margin:0;max-width:36em}
.hlabs-opts{list-style:none;margin:26px 0 0;padding:0;background:#fff;border:1px solid var(--line-soft);border-radius:20px;box-shadow:var(--shadow-soft);overflow:hidden}
.hlabs-opt{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 18px;border-top:1px solid var(--line-soft)}
.hlabs-opt:first-child{border-top:0}
.hlabs-ic{width:40px;height:40px;border-radius:12px;background:var(--tint-blue);color:var(--navy);display:flex;align-items:center;justify-content:center}
.hlabs-ic svg{width:20px;height:20px}
.hlabs-main b{display:block;font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--navy);line-height:1.3}
.hlabs-main small{display:block;font-size:13px;color:var(--muted);line-height:1.5;margin-top:3px}
.hlabs-main a{color:var(--navy);font-weight:700;white-space:nowrap}
.hlabs-main a:hover{color:var(--red)}
.hlabs-price{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--navy)}
.hlabs-fine{font-size:12.5px;color:var(--muted);line-height:1.6;margin:14px 2px 0}
.hlabs-ctas{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:24px}
.hlabs-more{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:700;font-size:15px;color:var(--navy);text-decoration:none}
.hlabs-more .ico{width:14px;height:14px;stroke-width:2.4;color:var(--red);transition:transform .18s}
.hlabs-more:hover .ico{transform:translateX(3px)}
.hlabs-visual{position:relative;margin:0}
.hlabs-stage{position:relative;display:flex;align-items:flex-start;justify-content:center;padding-top:7%;aspect-ratio:4/4.6;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lift);
  background:radial-gradient(60% 50% at 50% 42%,rgba(238,243,252,.2) 0%,rgba(238,243,252,0) 70%),linear-gradient(150deg,var(--navy-mid) 0%,var(--navy) 100%)}
.hlabs-stage img{height:66%;width:auto;filter:drop-shadow(0 26px 34px rgba(0,0,0,.35))}
.hlabs-cap{position:absolute;left:18px;right:18px;bottom:18px;display:flex;flex-direction:column;gap:3px;background:rgba(255,255,255,.95);border-radius:16px;padding:13px 16px;box-shadow:var(--shadow-mid);font-size:13px;line-height:1.5;color:var(--muted)}
.hlabs-cap b{font-family:var(--display);font-weight:800;font-size:14px;color:var(--navy)}
@media(max-width:900px){
  .hlabs-grid{grid-template-columns:1fr;gap:28px}
  .hlabs-stage{aspect-ratio:auto;height:260px;align-items:center;padding-top:0}
  .hlabs-stage img{height:84%}
  .hlabs-cap{position:static;margin-top:12px;box-shadow:none;border:1px solid var(--line-soft)}
}
@media(max-width:640px){
  .hlabs-opt{grid-template-columns:36px minmax(0,1fr) auto;gap:12px;padding:13px 14px}
  .hlabs-ic{width:36px;height:36px;border-radius:11px}
  .hlabs-ic svg{width:18px;height:18px}
  .hlabs-main b{font-size:14.5px}
  .hlabs-price{font-size:16.5px}
  .hlabs-stage{height:220px}
}
@media(prefers-reduced-motion:reduce){.hlabs-more .ico{transition:none}.hlabs-more:hover .ico{transform:none}}

/* ---------- hero ---------- */
.hero{
  padding:clamp(60px,6.5vw,96px) 0 clamp(68px,7.5vw,108px);overflow:hidden;
  background:
    radial-gradient(46% 52% at 78% 28%,rgba(238,243,252,.85) 0%,rgba(238,243,252,0) 100%),
    linear-gradient(180deg,var(--bg) 0%,#FFFFFF 85%);
}
.hero .wrap{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(40px,5.5vw,84px);align-items:center}
.hero p.lead{font-size:clamp(18px,1.5vw,20px);line-height:1.62;color:var(--muted);max-width:31em;margin-bottom:36px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:42px}
.hero-checks{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:14px 36px}
.hero-checks li{list-style:none;display:flex;gap:12px;align-items:center;font-weight:600;font-size:15.5px;white-space:nowrap}
.hero-checks .ck{color:var(--red);flex-shrink:0;display:flex;font-size:15px}
.hero-visual{position:relative}
.hero-photo{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-lift);aspect-ratio:4/4.6;
}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(255,255,255,0) 55%,rgba(10,30,60,.30) 100%);
}
.hero-chip{
  position:absolute;z-index:2;background:rgba(255,255,255,.97);border:1px solid var(--line-soft);
  border-radius:18px;box-shadow:var(--shadow-mid);
  display:flex;align-items:center;gap:14px;padding:14px 20px 14px 14px;
}
.hero-chip img{width:44px;height:auto}
.hero-chip .hc-t{font-family:var(--display);font-size:14.5px;font-weight:800;line-height:1.3;color:var(--navy);letter-spacing:-.01em}
.hero-chip .hc-t small{display:block;font-family:var(--sans);font-weight:500;color:var(--muted);font-size:12.5px;letter-spacing:0}
.hc-price{left:-34px;bottom:44px}
.hc-doc{right:-26px;top:38px;padding:14px 20px}
.hc-doc .hc-ic{
  width:42px;height:42px;border-radius:50%;background:var(--tint-blue);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;
}
.hc-doc .hc-ic .ico{stroke-width:1.7}
@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-checks{grid-template-columns:1fr}
  .hero-photo{aspect-ratio:4/3.4}
  .hc-price{left:14px;bottom:18px}
  .hc-doc{right:14px;top:18px}
}

/* ---------- trust ticker ---------- */
.trust{border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);overflow:hidden}
.trust .track{
  display:flex;align-items:center;width:max-content;
  padding-top:22px;padding-bottom:22px;
  animation:ticker 36s linear infinite;
}
.trust:hover .track{animation-play-state:paused}
.trust .t-item{
  display:flex;align-items:center;gap:12px;padding-top:12px;padding-bottom:12px;
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.005em;color:var(--navy);
  white-space:nowrap;padding:0 34px;position:relative;
}
.trust .t-item::after{
  content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--red);opacity:.5;
}
.trust .t-ic{
  width:38px;height:38px;border-radius:50%;background:var(--tint-blue);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;
}
.trust .t-ic .ico{stroke-width:1.7}
.trust a.t-item{text-decoration:none;transition:color .15s}
.trust a.t-item:hover{color:var(--red)}
.trust a.t-item:hover .t-ic{background:var(--tint-red);color:var(--red)}
@keyframes ticker{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .trust .track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:14px 0}
  .trust .track > [aria-hidden]{display:none}
}

/* ---------- treatment cards ---------- */
#treatments{background:linear-gradient(180deg,#fff 0%,var(--bg) 10%,#FFFFFF 38%)} /* follows the white how-it-works band (2026-09-24) */
.tx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-gap)}
.tx-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:36px 34px 30px;text-decoration:none;display:flex;flex-direction:column;
  transition:transform .18s,box-shadow .18s,border-color .18s;position:relative;
  box-shadow:var(--shadow-soft);
}
.tx-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:rgba(10,30,60,.2)}
.tx-cat{font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
.tx-card h3{font-family:var(--display);font-weight:800;font-size:24px;line-height:1.14;margin-bottom:8px;letter-spacing:-.02em;color:var(--navy)}
.tx-med{font-size:15px;color:var(--muted);font-weight:600;margin-bottom:16px}
.tx-tease{font-size:15.5px;color:var(--muted);line-height:1.58;margin-bottom:28px}
.tx-foot{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line-soft);padding-top:20px}
.tx-price{line-height:1.15;font-family:var(--display);font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.tx-price small{font-family:var(--sans);font-size:13.5px;color:var(--muted);font-weight:600;letter-spacing:0}
.tx-go{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--navy);transition:color .15s}
.tx-card:hover .tx-go{color:var(--red)}
.tx-cta{background:var(--navy);border-color:var(--navy);grid-column:span 2}
.tx-cta .tx-cat{color:var(--gold)}
.tx-cta h3{color:#fff}
.tx-cta .tx-tease{color:rgba(232,238,248,.75);max-width:36em}
.tx-cta .tx-foot{border-top-color:rgba(232,238,248,.18)}
.tx-cta .tx-contact{font-family:var(--display);font-size:18px;font-weight:800;color:#fff;letter-spacing:-.01em}
.tx-cta .tx-go{color:#9DBBF3}
.tx-cta:hover .tx-go{color:#fff}
@media(max-width:960px){.tx-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tx-grid{grid-template-columns:1fr}.tx-cta{grid-column:auto}}

/* ---------- values band ---------- */
.values .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(44px,6vw,88px);align-items:center}
.values-copy p{font-size:17.5px;line-height:1.75;color:var(--body-soft);margin-bottom:22px;max-width:34em}
.values-copy p.vc-lead{font-family:var(--serif);font-size:clamp(20px,1.8vw,23px);font-style:italic;color:var(--navy);line-height:1.6}
.values-sign{margin-top:34px;display:flex;align-items:center;gap:16px}
.values-sign .vs-flag{
  width:48px;height:48px;border-radius:50%;background:var(--tint-red);color:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;
}
.values-sign .vs-flag .ico{stroke-width:1.7}
.values-sign .vs-t{font-family:var(--display);font-weight:800;font-size:15.5px;color:var(--navy);letter-spacing:-.01em}
.values-sign .vs-t small{display:block;font-family:var(--sans);font-weight:500;color:var(--muted);font-size:14px;letter-spacing:0}
.values-mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:18px}
.values-mosaic .vm{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-mid)}
.values-mosaic .vm img{width:100%;height:100%;object-fit:cover}
.values-mosaic .vm-big{grid-column:1/3;aspect-ratio:16/10.5}
.values-mosaic .vm-a{aspect-ratio:1/1}
.values-mosaic .vm-b{aspect-ratio:1/1}
@media(max-width:920px){.values .wrap{grid-template-columns:1fr}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-gap)}
.step{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:42px 36px 38px;box-shadow:var(--shadow-soft);position:relative;
}
.step .num{
  width:52px;height:52px;border-radius:50%;background:var(--tint-red);color:var(--red);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:22px;font-weight:800;
  line-height:1;margin-bottom:24px;
}
.step h3{font-family:var(--display);font-size:21px;font-weight:800;margin-bottom:12px;line-height:1.22;letter-spacing:-.02em;color:var(--navy)}
.step p{color:var(--muted);font-size:16px;line-height:1.62}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

/* ---------- compare ---------- */
/* ---------- versus panel (homepage compare) ---------- */
.vs-panel{position:relative;display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r-xl);box-shadow:var(--shadow-lift)}
.vs-side{padding:clamp(32px,4.2vw,58px)}
.vs-them{
  background:#fff;border:1px solid var(--line-soft);border-right:0;
  border-radius:var(--r-xl) 0 0 var(--r-xl);
}
.vs-us{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--navy-mid) 0%,var(--navy) 100%);
  border-radius:0 var(--r-xl) var(--r-xl) 0;
}
@property --vsbb{syntax:'<angle>';inherits:false;initial-value:0deg}
.vs-us::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--vsbb),
    rgba(238,243,252,.13) 0deg,rgba(238,243,252,.13) 296deg,
    rgba(240,194,74,.55) 326deg,#fff 342deg,rgba(240,194,74,.55) 352deg,
    rgba(238,243,252,.13) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:vsbb-spin 5.5s linear infinite;
}
@keyframes vsbb-spin{to{--vsbb:360deg}}
@media(prefers-reduced-motion:reduce){.vs-us::after{animation:none}}
.vs-us::before{
  content:"";position:absolute;top:-130px;right:-110px;width:380px;height:380px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(238,243,252,.12) 0%,rgba(238,243,252,0) 66%);
}
.vs-side h3{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;margin:0 0 10px}
.vs-them h3{color:var(--muted)}
.vs-us h3{color:#fff;position:relative}
.vs-side ul{list-style:none;margin:0;padding:0;position:relative}
.vs-side li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;font-size:15px;line-height:1.55;border-bottom:1px solid var(--line-soft)}
.vs-side li:last-child{border-bottom:0}
.vs-them li{color:var(--muted)}
.vs-us li{color:rgba(232,238,248,.88);border-bottom-color:rgba(255,255,255,.10)}
.vs-mk{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:-2px}
.vs-them .vs-mk{background:var(--tint-red);color:var(--red)}
.vs-us .vs-mk{background:rgba(238,243,252,.14);color:#E8EEF8}
.vs-mk .ico{width:14px;height:14px;stroke-width:2.2}
.vs-badge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:62px;height:62px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.02em;color:var(--navy);
  box-shadow:var(--shadow-mid);border:1px solid var(--line-soft);
}
.vs-cta{margin-top:26px;padding:13px 30px;font-size:14.5px;position:relative}
@media(max-width:860px){
  .vs-panel{
    display:flex;align-items:stretch;gap:14px;
    border-radius:0;box-shadow:none;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-left:calc(-1 * var(--wrap-pad));margin-right:calc(-1 * var(--wrap-pad));
    padding:8px var(--wrap-pad) 22px;
    scrollbar-width:none;
  }
  .vs-panel::-webkit-scrollbar{display:none}
  .vs-side{flex:0 0 84%;scroll-snap-align:center;border-radius:var(--r-lg);padding:26px 24px 28px}
  .vs-them{border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-mid)}
  .vs-us{border-radius:var(--r-lg);box-shadow:var(--shadow-lift)}
  .vs-side h3{font-size:20px}
  .vs-side li{padding:13px 0;font-size:14.5px}
  .vs-badge{
    position:relative;left:auto;top:auto;transform:none;
    flex:0 0 auto;align-self:center;margin:0 -38px;
  }
  .vs-cta{margin-top:20px}
}

.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-gap);align-items:stretch}
.cmp{border-radius:var(--r-lg);padding:clamp(36px,4vw,52px)}
.cmp h3{font-family:var(--display);font-size:24px;font-weight:800;margin-bottom:28px;letter-spacing:-.02em}
.cmp ul{list-style:none;display:grid;gap:17px}
.cmp li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;line-height:1.55}
.cmp .mk{flex-shrink:0;display:flex;font-size:15px;margin-top:5px}
.cmp-them{background:#fff;border:1px solid var(--line-soft);color:var(--muted)}
.cmp-them h3{color:var(--navy)}
.cmp-them .mk{color:#C4626A}
.cmp-us{background:var(--navy);color:#E8EEF8;box-shadow:var(--shadow-lift)}
.cmp-us h3{color:#fff}
.cmp-us .mk{color:#9DBBF3}
.cmp-us li{color:rgba(232,238,248,.92)}
@media(max-width:860px){.compare{grid-template-columns:1fr}}

/* ---------- privacy ---------- */
.priv .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(44px,6vw,88px);align-items:center}
.priv-media{
  position:relative;border-radius:var(--r-xl);max-width:540px;aspect-ratio:1;
  border:1px solid var(--line-soft);box-shadow:var(--shadow-mid);
}
/* the delivery photo replaced the CSS-drawn box on 2026-09-25 (Ryan: "replace this with /images/Freedom-RX-Delivery.png"); served as a JPEG made with sips at quality 80 */
.priv-photo{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--r-xl)}
.pbox-chip{
  position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  background:#fff;border-radius:999px;padding:11px 18px;
  font-family:var(--display);font-weight:700;font-size:13px;color:var(--navy);
  box-shadow:var(--shadow-mid);
}
.pbox-chip .ico{width:15px;height:15px;color:var(--red)}
.priv-sub{font-size:18.5px;color:var(--muted);max-width:30em}
.priv ul{list-style:none;display:grid;gap:19px;margin-top:34px}
.priv li{display:flex;gap:15px;align-items:flex-start;font-size:17px;font-weight:600}
.priv .ck{color:var(--red);flex-shrink:0;display:flex;font-size:15.5px;margin-top:5px}
@media(max-width:920px){.priv .wrap{grid-template-columns:1fr}}

/* ---------- pricing table ---------- */
.price-scroll{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line-soft);box-shadow:var(--shadow-mid);background:#fff}
table.pricing{width:100%;border-collapse:collapse;min-width:780px;font-size:16.5px}
table.pricing th{
  text-align:left;font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);padding:20px 30px;border-bottom:1px solid var(--line);background:var(--tint-blue);
}
table.pricing td{padding:22px 30px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.pricing tr:last-child td{border-bottom:none}
table.pricing tbody tr{transition:background .12s}
table.pricing tbody tr:hover{background:rgba(238,243,252,.5)}
table.pricing .pc-name{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em}
table.pricing .pc-name a{text-decoration:none;color:var(--navy)}
table.pricing .pc-name a:hover{color:var(--red)}
table.pricing .pc-med{color:var(--muted)}
table.pricing .pc-price{font-family:var(--display);font-size:21px;font-weight:800;white-space:nowrap;color:var(--navy);letter-spacing:-.01em}
table.pricing .pc-mo{color:var(--muted);white-space:nowrap}
table.pricing .pc-cta a{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--navy);text-decoration:none;white-space:nowrap}
table.pricing .pc-cta a:hover{color:var(--red)}
.price-note{margin-top:26px;font-size:15px;color:var(--muted);max-width:740px;line-height:1.65}

/* ---------- guarantee ---------- */
.guarantee .inner{
  background:linear-gradient(150deg,var(--navy-mid) 0%,var(--navy) 90%);
  border-radius:var(--r-xl);color:#E8EEF8;padding:clamp(56px,7vw,84px) clamp(36px,6vw,76px);
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(36px,4.5vw,60px);align-items:center;
  box-shadow:var(--shadow-lift);
}
.guarantee .seal{
  width:156px;height:156px;border-radius:50%;flex-shrink:0;
  border:2px solid rgba(240,194,74,.7);color:var(--gold);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;line-height:1.45;
  background:rgba(240,194,74,.06);
}
.guarantee .seal .big{font-family:var(--display);font-size:44px;font-weight:800;letter-spacing:-.02em;text-transform:none;line-height:1}
.guarantee h2{color:#fff;margin-bottom:16px}
.guarantee p{color:rgba(232,238,248,.8);font-size:18px;max-width:32em;line-height:1.68}
@media(max-width:960px){.guarantee .inner{grid-template-columns:1fr;text-align:center}
.guarantee .seal{margin:0 auto}.guarantee p{margin:0 auto}}

/* ---------- faq ---------- */
.faqx-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(48px,6vw,96px);align-items:start}
.faqx-intro{position:sticky;top:calc(96px + var(--promo-h))}
.faqx-intro .eyebrow{margin-bottom:14px}
.faqx-intro h2{margin-bottom:14px}
.faqx-sub{font-size:16.5px;color:var(--muted);line-height:1.65;margin:0;max-width:26em}
.faqx-card{
  position:relative;overflow:hidden;display:flex;gap:16px;align-items:flex-start;
  background:linear-gradient(150deg,var(--navy-mid) 0%,var(--navy) 100%);
  border-radius:20px;padding:24px;margin-top:30px;max-width:420px;
  box-shadow:var(--shadow-mid);
}
.faqx-card::before{
  content:"";position:absolute;top:-90px;right:-70px;width:230px;height:230px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(238,243,252,.14) 0%,rgba(238,243,252,0) 66%);
}
.faqx-ic{
  flex:0 0 auto;width:42px;height:42px;border-radius:13px;
  background:rgba(238,243,252,.13);color:#E8EEF8;
  display:flex;align-items:center;justify-content:center;
}
.faqx-ic .ico{width:19px;height:19px}
.faqx-card b{display:block;font-family:var(--display);font-weight:800;font-size:16px;color:#fff;line-height:1.35;margin-top:9px}
.faqx-card p{font-size:13.5px;color:rgba(232,238,248,.72);line-height:1.55;margin:4px 0 12px}
.faqx-card a{font-family:var(--display);font-weight:700;font-size:13.5px;color:#fff;text-decoration:underline;text-underline-offset:3px}
.faqx-card a:hover{color:var(--gold)}
@media(max-width:960px){.faqx-grid{grid-template-columns:1fr;gap:36px}.faqx-intro{position:static}}
.faq-list{display:grid;gap:14px}
details.faq{border-left:3px solid transparent;transition:border-color .15s,background .15s}
details.faq[open]{border-left-color:var(--red);background:linear-gradient(90deg,rgba(238,243,252,.55) 0%,#fff 60%)}
details.faq{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);
  box-shadow:var(--shadow-soft);overflow:hidden;transition:box-shadow .15s;
}
details.faq[open]{box-shadow:var(--shadow-mid)}
details.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:22px;
  padding:24px 32px;font-family:var(--display);font-weight:700;font-size:17.5px;letter-spacing:-.015em;color:var(--navy);
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary .tog{
  font-size:24px;color:var(--red);font-weight:400;transition:transform .2s;flex-shrink:0;
  font-family:var(--sans);line-height:1;
}
details.faq[open] summary .tog{transform:rotate(45deg)}
details.faq .faq-body{padding:0 32px 26px;color:var(--muted);font-size:16.5px;line-height:1.72}
details.faq .faq-body a{color:var(--navy);font-weight:700}

/* ---------- final cta ---------- */
.final{position:relative;overflow:hidden;padding-top:clamp(64px,11vw,150px);padding-bottom:clamp(64px,11vw,150px)}
.final .bgimg{position:absolute;inset:0;z-index:0}
.final .bgimg img{width:100%;height:100%;object-fit:cover}
/* the porch photo's left third is an out-of-focus tree that read as mush on wide screens (Ryan, 2026-09-28: "this image
   looks bad on the left"); from 1025px up the photo is zoomed in from its right edge, so the tree drops out and the flag
   sits at the left instead. Narrower screens already crop to the porch. Keyed to the file, so other pages' photos are untouched. */
@media(min-width:1025px){.final .bgimg img[src$="americana-porch.jpg"]{transform:scale(1.28);transform-origin:100% 45%}}
.final .bgimg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,30,60,.84) 0%,rgba(10,30,60,.6) 55%,rgba(10,30,60,.88) 100%);
}
.final .inner{position:relative;z-index:1;text-align:center;max-width:780px;margin:0 auto}
.final h2{font-size:clamp(2.3rem,4.6vw,3.7rem);color:#fff}
.final h2 em{color:var(--gold)}
.final h2{text-wrap:balance;margin-bottom:14px}
.final p{font-size:19px;color:rgba(255,255,255,.85);margin-bottom:36px;line-height:1.6;text-wrap:pretty}
.final .hero-ctas{justify-content:center;margin-bottom:0}
.final-card{
  position:relative;z-index:1;overflow:hidden;text-align:center;
  max-width:820px;margin:0 auto;
  background:linear-gradient(150deg,rgba(18,43,82,.55) 0%,rgba(10,30,60,.68) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-xl);
  padding:clamp(40px,5.5vw,64px) clamp(26px,5vw,64px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 18px 40px -32px rgba(255,255,255,.35),0 30px 80px rgba(4,12,26,.45);
}
.final-card .eyebrow{color:rgba(232,238,248,.68);margin-bottom:16px}
.final-card p{max-width:34em;margin-left:auto;margin-right:auto}
.final-row{
  display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:center;
  margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
}
.final-row span{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.01em;color:rgba(232,238,248,.85);
}
.final-row .ico{width:17px;height:17px;color:rgba(232,238,248,.75);flex-shrink:0}
@media(max-width:640px){
  .final-card{text-align:left}
  .final-card p{margin-left:0}
  .final .final-card .hero-ctas{justify-content:flex-start}
  .final-row{justify-content:flex-start;gap:12px 22px}
}

/* ---------- condition page ---------- */
.cond-hero{padding:clamp(56px,7vw,96px) 0 clamp(72px,8vw,110px)}
.cond-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(44px,5.5vw,80px);align-items:start}
.cond-hero h1{font-size:clamp(2.5rem,4.5vw,3.8rem)}
.cond-hero p.lead{font-size:19px;color:var(--muted);line-height:1.65;margin-bottom:36px;max-width:30em}
.crumb{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:30px;letter-spacing:.01em}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--red)}
.buy-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lift);padding:clamp(34px,3.5vw,46px);position:sticky;top:calc(114px + var(--promo-h));
}
.buy-card .bc-med{font-size:15.5px;font-weight:600;color:var(--muted);margin-bottom:8px}
.buy-card .bc-price{font-family:var(--display);font-size:54px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--navy)}
.buy-card .bc-cad{font-size:15px;color:var(--muted);font-weight:600;margin:10px 0 4px}
.buy-card .bc-mo{display:inline-block;background:var(--tint-blue);color:var(--navy);font-family:var(--display);font-weight:800;font-size:13.5px;border-radius:999px;padding:6px 15px;margin:12px 0 26px}
.buy-card ul{list-style:none;display:grid;gap:13px;margin-bottom:30px;border-top:1px solid var(--line-soft);padding-top:26px}
.buy-card li{display:flex;gap:12px;font-size:15.5px;font-weight:600;align-items:flex-start}
.buy-card .ck{color:var(--red);flex-shrink:0;display:flex;font-size:15px;margin-top:3px}
.buy-card .btn{width:100%}
.buy-card .bc-fine{margin-top:18px;font-size:13.5px;color:var(--muted);text-align:center;line-height:1.55}
@media(max-width:920px){.cond-hero .wrap{grid-template-columns:1fr}.buy-card{position:static}}

.about-cond .wrap{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(44px,6vw,88px);align-items:center}
.about-img{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lift);aspect-ratio:4/4.4}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-cond h2{margin-bottom:24px}
.about-cond .about-body p{font-size:17.5px;line-height:1.78;color:var(--body-soft);margin-bottom:22px;max-width:36em}
.safety{
  margin-top:40px;background:#fff;border-left:4px solid var(--red);
  border-radius:0 var(--r-md) var(--r-md) 0;box-shadow:var(--shadow-soft);
  padding:32px 36px;max-width:40em;
}
.safety h3{font-family:var(--display);font-size:19px;font-weight:800;margin-bottom:12px;letter-spacing:-.015em;color:var(--navy)}
.safety p{font-size:16.5px;color:var(--muted);margin:0;line-height:1.7}
@media(max-width:920px){.about-cond .wrap{grid-template-columns:1fr}.about-img{aspect-ratio:16/10}}

/* ---------- footer ---------- */
footer.site{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--navy-mid) 0%,var(--navy) 48%,#07162B 100%);
  color:rgba(232,238,248,.82);
  padding:clamp(40px,5vw,64px) 0 44px;font-size:15.5px;
}
footer.site::before{
  content:"";position:absolute;top:-180px;right:-140px;width:520px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(238,243,252,.09) 0%,rgba(238,243,252,0) 66%);
}
footer.site::after{
  content:"";position:absolute;bottom:-220px;left:-160px;width:560px;height:560px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(238,243,252,.06) 0%,rgba(238,243,252,0) 66%);
}
footer.site .wrap{position:relative;z-index:1}
.f-mast{
  display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;
  padding-bottom:clamp(26px,3vw,38px);margin-bottom:clamp(34px,4vw,48px);
  border-bottom:1px solid rgba(232,238,248,.14);
}
.f-state{
  font-family:var(--display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(26px,3.4vw,42px);line-height:1.12;color:#fff;margin:0;text-wrap:balance;
}
.f-state em{font-family:var(--serif);font-style:italic;font-weight:600;letter-spacing:-.01em;color:var(--gold)}
.f-mast .btn-light{flex-shrink:0}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(36px,4.5vw,60px);margin-bottom:clamp(48px,6vw,72px)}
footer.site .f-brand .logochip{display:inline-block;background:#fff;padding:13px 19px;border-radius:14px;margin-bottom:22px}
footer.site .f-brand img{height:44px;width:auto}
footer.site .f-brand p{font-size:15px;line-height:1.68;color:rgba(232,238,248,.6);max-width:26em}
.f-mail{display:block;width:fit-content;margin-top:16px;font-weight:600;font-size:15px}
footer.site .f-legit{display:inline-block;margin-top:20px}
footer.site .f-legit img{height:72px;width:auto;transition:opacity .15s}
footer.site .f-legit:hover img{opacity:.85}
footer.site h4{
  display:flex;align-items:center;gap:10px;
  color:#fff;font-family:var(--display);font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:22px;
}
footer.site h4::before{content:"";width:20px;height:2px;background:var(--red);flex-shrink:0}
footer.site ul{list-style:none;display:grid;gap:13px}
footer.site a{color:rgba(232,238,248,.82);text-decoration:none;transition:color .15s}
footer.site a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:1.5px;text-underline-offset:4px}
footer.site a.btn{color:#fff;text-decoration:none}
footer.site a.btn:hover{text-decoration:none}
.f-legal{border-top:1px solid rgba(232,238,248,.16);padding-top:40px;display:grid;gap:18px}
.f-legal p{font-size:13.5px;line-height:1.68;color:rgba(232,238,248,.5)}
.f-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14px;color:rgba(232,238,248,.6);margin-top:6px}
.f-row b{font-family:var(--display);font-weight:700;color:rgba(232,238,248,.88)}
.f-tx{grid-column:span 2}
.f-tx-list{display:grid;grid-auto-flow:column;grid-template-columns:1fr 1fr;column-gap:24px}
.f-sub + .f-sub{margin-top:30px}
/* the Guides section under the treatments list (Ryan, 2026-09-26: "the guides should be in the footer ... as a section") */
.f-tx .f-guides{margin-top:30px}
@media(max-width:960px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
  footer.site{font-size:14.5px;padding-top:30px}
  .f-state{font-size:22px;line-height:1.22}
  footer.site .cols{grid-template-columns:1fr 1fr;gap:30px 18px;margin-bottom:36px}
  footer.site .f-brand{grid-column:1/-1}
  footer.site .f-brand .logochip{padding:10px 15px;margin-bottom:14px}
  footer.site .f-brand img{height:36px}
  footer.site .f-brand p{font-size:13.5px}
  .f-mail{margin-top:12px;font-size:14px}
  footer.site .f-legit{margin-top:16px}
  footer.site .f-legit img{height:52px}
  footer.site h4{font-size:11.5px;letter-spacing:.12em;white-space:nowrap;gap:8px}
  footer.site h4::before{width:14px}
  footer.site .f-tx{grid-column:1/-1}
  .f-tx-list{column-gap:18px}
  footer.site .f-last{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:30px 18px}
  .f-sub + .f-sub{margin-top:0}
  footer.site h4{margin-bottom:13px}
  footer.site ul{gap:9px}
  .f-mast{padding-bottom:18px;margin-bottom:24px}
  .f-legal{padding-top:26px;gap:12px}
  .f-legal p{font-size:12.5px;line-height:1.6}
  .f-row{flex-direction:column;gap:5px;align-items:flex-start}
}

:focus-visible{outline:3px solid #1D4FD7;outline-offset:2px;border-radius:4px}


/* ---- mobile polish (audited 2026-09-03) ---- */
#treatments,#how,#pricing,#faq{scroll-margin-top:calc(84px + var(--promo-h))}
@media(max-width:640px){
  :root{--sp-band:56px;--sp-head:36px}
  #treatments.band{padding-top:44px}
  .sec-head p{font-size:16.5px}
  .mission-h{font-size:1.9rem}
  details.faq summary{padding:20px 22px}
  details.faq .faq-body{padding:0 22px 22px}
  .final .final-card .hero-ctas{flex-direction:column;align-items:stretch}
  .final .final-card .hero-ctas .btn{width:100%}
}
@media(max-width:480px){
  .final h2{font-size:clamp(1.9rem,8vw,2.3rem)}
}

/* ==================== hero version 2 + nav version 2 (locked 2026-10-02) ====================
   Built on the scratch copy on 2026-10-02 and locked the same day ("lock it in and push live").
   Version 1 of both is saved in docs/versions/ (hero-v1.html, nav-v1.html). The .nhero base
   rules above still apply; the .has-guide / .hguide-cards rules above are now unused. */
/* ===== HERO V2 ===== */
.nhero.v2 .nhero-inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);align-items:center;column-gap:clamp(28px,4vw,56px);
  min-height:clamp(440px,52vh,560px);padding-top:30px;padding-bottom:30px;padding-right:var(--wrap-pad); /* hugs the card grid (Ryan, 2026-10-02: "reduce the hero padding above and below") */
}
.nhero.v2::after{
  background:
    linear-gradient(90deg,rgba(10,30,60,.68) 0%,rgba(10,30,60,.34) 34%,rgba(10,30,60,.10) 56%,rgba(10,30,60,.36) 100%),
    linear-gradient(0deg,rgba(10,30,60,.58) 0%,rgba(10,30,60,0) 52%);
}
.nhero.v2 .h2-copy{position:relative;z-index:2;max-width:30em}
.nhero.v2 .nhero-title{font-size:clamp(2.1rem,3.2vw,3.3rem);margin-bottom:0}
.nhero.v2 .nhero-ctas{margin-top:24px}

/* six compact cards: tag, name, from-price, render; the whole card is the link */
.h2-grid{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nhero.v2 .nhero-card{
  display:flex;flex-direction:column;justify-content:center;min-height:112px;
  padding:16px 104px 15px 18px;border-radius:20px;
}
.nhero.v2 .nhero-card::before{width:180px;height:180px;right:-50px;bottom:-70px}
.nhero.v2 .nc-tag{align-self:flex-start;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;padding:3px 9px;margin-bottom:9px;position:relative}
.nhero.v2 .nc-title{font-size:17.5px;line-height:1.15;margin:0 0 7px;max-width:none}
.nhero.v2 .nc-fine{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;font-weight:600}
.nhero.v2 .nc-fine b{font-family:var(--display);font-weight:800;font-size:13.5px;letter-spacing:-.01em}
.nhero.v2 .nc-dark .nc-fine b{color:var(--gold)}
.nhero.v2 .nc-light .nc-fine b{color:var(--red)}
.nhero.v2 .nc-fine .ico{width:12px;height:12px;stroke-width:2.6;transition:transform .18s}
.nhero.v2 .nhero-card:hover .nc-fine .ico{transform:translateX(3px)}
.nhero.v2 .nc-render{width:96px;right:-8px;bottom:-14px;transform:rotate(8deg)}
.nhero.v2 .nhero-card:hover .nc-render{transform:rotate(4deg) translateY(-3px)}
/* the concierge card: a chat mark where the others carry a render */
.h2-ask-ic{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:var(--tint-red);color:var(--red);display:flex;align-items:center;justify-content:center}
.h2-ask-ic svg{width:24px;height:24px}

/* the concierge below the hero: no rise, a normal band with the credentials strip after it */
.hguide.v2{margin-top:0;padding-top:clamp(30px,4vw,52px);padding-bottom:clamp(28px,3vw,40px);scroll-margin-top:calc(84px + var(--promo-h))}
.hguide.v2 .frxg-head{padding-top:11px;padding-bottom:11px}
.hguide.v2 ~ .cred{border-top:1px solid var(--line-soft)}

/* short laptop screens */
@media(min-width:1025px) and (max-height:800px){
  .nhero.v2 .nhero-inner{min-height:0;padding-top:26px;padding-bottom:26px}
  .nhero.v2 .nhero-card{min-height:96px;padding-top:13px;padding-bottom:12px}
  .nhero.v2 .nc-tag{margin-bottom:7px}
  .nhero.v2 .nc-render{width:84px}
  .nhero.v2 .nhero-title{font-size:clamp(2rem,2.9vw,3rem)}
}

/* tablets: copy on top, the grid under it, still on the photo */
@media(max-width:1024px){
  .nhero.v2::after{
    background:
      linear-gradient(180deg,rgba(10,30,60,.55) 0%,rgba(10,30,60,.22) 40%,rgba(10,30,60,.42) 100%);
  }
  .nhero.v2 .nhero-inner{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;min-height:0;padding-top:clamp(48px,7vw,72px);padding-bottom:36px}
  .nhero.v2 .h2-copy{max-width:none;margin-bottom:26px}
  .nhero.v2 .nhero-title{margin-bottom:0;max-width:14em}
  .nhero.v2 .nhero-ctas{display:none} /* the cards and the sticky bar carry the CTA */
  .h2-grid{width:100%;max-width:760px}
  .hguide.v2{margin-top:0;padding-top:28px;padding-bottom:22px}
}
/* phones: a two-row side-swiping rail (the catalog's phone pattern), three columns of 62vw cards, so each
   card has room for its name, price and render, and all six sit above the fold with the next column peeking */
@media(max-width:640px){
  .nhero.v2 .nhero-inner{padding-top:80px;padding-bottom:18px}
  .nhero.v2 .h2-copy{margin-bottom:18px}
  .h2-grid{
    display:grid;grid-template-columns:none;grid-auto-flow:column;grid-template-rows:1fr 1fr;grid-auto-columns:62vw;gap:10px;
    width:auto;max-width:none;margin:0 calc(-1 * var(--wrap-pad));padding:4px var(--wrap-pad) 12px; /* width:auto so the negative margins widen the rail to the screen edge instead of only shifting it */
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:var(--wrap-pad);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .h2-grid::-webkit-scrollbar{display:none}
  .nhero.v2 .nhero-card{
    scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1fr) 58px;grid-template-rows:auto auto auto;column-gap:8px;align-items:center;
    min-height:0;padding:12px 10px 12px 14px;border-radius:16px;
  }
  .nhero.v2 .nhero-card::before{width:140px;height:140px;right:-46px;bottom:-56px}
  .nhero.v2 .nc-tag{grid-column:1;grid-row:1;align-self:start;font-size:9.5px;letter-spacing:.09em;padding:2px 8px;margin-bottom:7px;white-space:nowrap}
  .nhero.v2 .nc-title{grid-column:1;grid-row:2;font-size:15px;line-height:1.15;margin-bottom:5px}
  .nhero.v2 .nc-fine{grid-column:1;grid-row:3;font-size:11.5px;gap:5px;white-space:nowrap}
  .nhero.v2 .nc-fine b{font-size:12.5px}
  .nhero.v2 .nc-render,.h2-ask-ic{grid-column:2;grid-row:1/4;position:static;justify-self:end;align-self:center}
  .nhero.v2 .nc-render{width:56px;transform:rotate(8deg);filter:drop-shadow(0 6px 12px rgba(10,30,60,.3))}
  .nhero.v2 .nhero-card:hover .nc-render{transform:rotate(8deg)}
  .h2-ask-ic{width:40px;height:40px;transform:none}
  .h2-ask-ic svg{width:21px;height:21px}
}
@media(max-width:360px){
  .h2-grid{grid-auto-columns:68vw}
}

/* ===== NAV V2 ===== */
/* with the pill gone the row has room again; the category links lead with the outcome people search for
   ("Weight Loss" first), then How it works, then a quiet Log in and the one red button, which now starts a
   visit instead of opening the patient portal (the portal is for existing patients; new visitors are the
   conversion) */
nav.main .nav-right{display:flex;align-items:center;gap:20px;flex-shrink:0;margin-left:8px}
nav.main a.nav-login{flex-shrink:0;text-decoration:none;font-weight:650;font-size:14.5px;letter-spacing:.015em;color:var(--muted);padding:5px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
nav.main a.nav-login:hover{color:var(--navy);border-bottom-color:var(--red)}
nav.main a.btn.nav-cta{padding:12px 20px;font-size:14.5px;box-shadow:0 8px 20px rgba(225,37,47,.26)}
nav.main a.btn.nav-cta:hover{box-shadow:0 10px 24px rgba(225,37,47,.34)}
nav.main a.nav-explore{margin-left:0;color:var(--ink);font-weight:650}

/* the catalog follows the hero directly (2026-10-02): no eyebrow, a tighter top, and the concierge band after it
   picks up the tint the catalog fades out to */
.nhero.v2 + .band#treatments{padding-top:clamp(40px,5vw,64px)}
#treatments + .hguide.v2{padding-top:clamp(20px,3vw,36px)}