:root{
    --navy:#021d38;
    --navy-2:#0d2b4c;
    --navy-3:#123a63;
    --teal:#24afbc;
    --teal-deep:#0e8794;
    --teal-tint:#e5f6f8;
    --ice:#f3f9fa;
    --paper:#ffffff;
    --ink:#122438;
    --muted:#5a6b7d;
    --line:#d7e4e8;
    --gray-hex:#818282;
    --radius:14px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
  }
  body{
    font-family:'Public Sans',system-ui,sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:'IBM Plex Mono',monospace}
  button{font-family:inherit;cursor:pointer}
  a{color:inherit}
  img{max-width:100%;display:block}
  :focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px}
  .hidden{display:none!important}

  /* ============ HEADER (matches the ThriveMedRX store chrome) ============ */
  header.site{
    background:var(--navy);
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:1rem clamp(1rem,4vw,3rem);
    position:sticky;top:0;z-index:100;
  }
  .logo{
    font-family:'Sora',sans-serif;
    font-weight:700;font-size:1.35rem;letter-spacing:-.02em;color:#fff;
    display:inline-flex;align-items:center;gap:.35rem;text-transform:lowercase;
    text-decoration:none;
  }
  .logo .med{color:var(--teal)}
  .logo .rx{font-weight:800}
  .logo .rx sub{font-size:.6em;font-weight:800}
  .logo svg{margin-left:.15rem}
  .logo-img{height:34px;width:auto;display:block}
  nav.site-nav{display:flex;gap:1.6rem;font-size:.85rem;font-weight:500;color:#fff}
  nav.site-nav a{text-decoration:none}
  nav.site-nav a:hover{color:#fff}
  .nav-item{position:relative}
  .nav-item>a{display:inline-flex;align-items:center;gap:.28rem}
  .nav-item>a::after{content:"\25BE";font-size:.66em;opacity:.6}
  .nav-item .dropdown{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:.7rem}
  .nav-item:hover .dropdown,.nav-item:focus-within .dropdown{display:block}
  .dropdown-inner{background:var(--navy-2);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.45rem;min-width:230px;box-shadow:0 18px 44px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:.06rem}
  .dropdown-inner a{padding:.5rem .8rem;border-radius:8px;color:#c8dae3;font-size:.85rem;white-space:nowrap;font-weight:500}
  .dropdown-inner a:hover{background:rgba(36,175,188,.16);color:#fff}
  .head-actions{display:flex;align-items:center;gap:.7rem}
  .btn-login{
    background:transparent;color:#dcecf1;border:1.5px solid rgba(255,255,255,.28);
    border-radius:10px;padding:.5rem 1rem;font-size:.8rem;font-weight:600;text-decoration:none;
  }
  .btn-login:hover{border-color:var(--teal);color:var(--teal)}
  .btn-shop{
    background:var(--teal);color:#fff;border:none;border-radius:10px;
    padding:.55rem 1.15rem;font-size:.8rem;font-weight:700;text-decoration:none;
    transition:background .15s ease;
  }
  .btn-shop:hover{background:var(--teal-deep)}
  .menu-btn{display:none;background:none;border:none;padding:.4rem}
  .menu-btn span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;border-radius:2px}
  @media(max-width:860px){
    nav.site-nav{display:none}
    .btn-login{display:none}
    .menu-btn{display:block}
  }
  .mobile-nav{
    display:none;background:var(--navy-2);padding:.75rem clamp(1rem,4vw,3rem) 1.1rem;
    flex-direction:column;gap:.8rem;font-size:.95rem;font-weight:600;color:#dcecf1;
    position:fixed;left:0;right:0;top:66px;z-index:99;max-height:calc(100vh - 66px);overflow-y:auto;box-shadow:0 20px 34px -14px rgba(0,0,0,.55);
  }
  .mobile-nav a{text-decoration:none;padding:.35rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .mobile-nav.open{display:flex}

  /* ============ TICKER (store-style marquee) ============ */
  .ticker{
    background:#fff;border-bottom:1px solid var(--line);
    overflow:hidden;white-space:nowrap;
  }
  .ticker-track{
    display:inline-flex;align-items:center;gap:3rem;
    padding:.7rem 0;
    animation:tick 38s linear infinite;
    will-change:transform;
  }
  @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .tick-item{
    display:inline-flex;align-items:center;gap:.6rem;
    font-family:'Sora',sans-serif;font-size:.78rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--navy);
  }
  .tick-item svg{flex-shrink:0}
  @media (prefers-reduced-motion: reduce){
    .ticker-track{animation:none;flex-wrap:wrap;white-space:normal;padding:.7rem 1rem;gap:1rem}
    .ticker-track .dup{display:none}
  }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 78%,var(--navy-3) 100%);
    color:#e8f3f6;
    overflow:hidden;
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    background-image:url("data:image/svg+xml,%3Csvg width='120' height='138' viewBox='0 0 120 138' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 3 L58 19 L58 51 L30 67 L2 51 L2 19 Z' fill='none' stroke='%2324afbc' stroke-opacity='.12' stroke-width='2'/%3E%3Cpath d='M90 71 L118 87 L118 119 L90 135 L62 119 L62 87 Z' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='2'/%3E%3C/svg%3E");
    background-size:120px 138px;
  }
  .hero-inner{
    position:relative;z-index:1;
    display:grid;grid-template-columns:1.15fr .85fr;
    gap:clamp(2rem,5vw,4.5rem);align-items:center;
    max-width:1200px;margin:0 auto;
    padding:clamp(1.25rem,3vw,2.5rem) clamp(1rem,4vw,3rem) clamp(2.5rem,6vw,5rem);
  }
  @media(max-width:880px){.hero-inner{grid-template-columns:1fr}}
  .hero .eyebrow{
    display:inline-flex;align-items:center;gap:.5rem;
    font-size:clamp(.5rem,2.25vw,.85rem);letter-spacing:.16em;text-transform:uppercase;
    color:#8f9698;font-weight:700;margin-bottom:1.1rem;white-space:nowrap;
    text-shadow:1px 0 0 #021d38,-1px 0 0 #021d38,0 1px 0 #021d38,0 -1px 0 #021d38;
  }
  .hero .eyebrow::before{content:"";width:22px;height:2px;background:#8f9698;box-shadow:0 0 0 1px #021d38}
  @media(max-width:640px){
    .hero .eyebrow{letter-spacing:.09em;gap:.35rem}
    .hero .eyebrow::before{width:14px}
  }
  /* the eyebrow never wraps, so the longest strings need the tracking back on narrow phones */
  @media(max-width:400px){
    .hero .eyebrow{letter-spacing:.05em}
  }
  h1{
    font-family:'Sora',sans-serif;
    font-size:clamp(2.1rem,4.6vw,3.4rem);
    font-weight:800;letter-spacing:-.03em;line-height:1.07;color:#fff;
  }
  h1 em{font-style:normal;color:var(--teal)}
  .hero-sub{margin-top:1.2rem;font-size:1.05rem;color:#b9d2db;max-width:36rem}
  .hero-ctas{display:flex;gap:.8rem;margin-top:1.8rem;flex-wrap:wrap}
  /* equal-size hero buttons side-by-side on desktop, stacked full-width on mobile */
  .hero .hero-ctas{max-width:32rem}
  .hero .hero-ctas .btn-primary,.hero .hero-ctas .btn-ghost-light{flex:1 1 0;justify-content:center;text-align:center}
  @media(max-width:600px){
    .hero .hero-ctas{flex-direction:column;max-width:none}
    .hero .hero-ctas .btn-primary,.hero .hero-ctas .btn-ghost-light{flex:none;width:100%}
  }
  .btn-primary{
    display:inline-block;background:var(--teal);color:#fff;border:none;border-radius:10px;
    padding:.95rem 2rem;font-size:.95rem;font-weight:700;text-decoration:none;
    transition:background .15s ease;text-align:center;
  }
  .btn-primary:hover{background:var(--teal-deep)}
  .btn-ghost-light{
    display:inline-block;background:transparent;color:#e8f3f6;border:1.5px solid rgba(255,255,255,.3);
    border-radius:10px;padding:.95rem 1.5rem;font-size:.95rem;font-weight:600;text-decoration:none;
  }
  .btn-ghost-light:hover{border-color:var(--teal);color:var(--teal)}
  .hero-points{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.7rem}
  .hero-points li{
    list-style:none;display:inline-flex;align-items:center;gap:.45rem;
    font-size:.8rem;color:#b9d2db;font-weight:500;
  }
  .hero-points svg{flex-shrink:0}
  .hero-media{position:relative}
  .hero-media img{
    border-radius:var(--radius);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
    max-height:520px;width:100%;object-fit:cover;object-position:50% 45%;
  }
  .hero-badge{
    position:absolute;left:-14px;bottom:22px;
    background:#fff;color:var(--navy);border-radius:12px;
    box-shadow:0 14px 34px -12px rgba(2,29,56,.5);
    padding:.95rem 1.25rem;display:flex;gap:1rem;align-items:center;
  }
  /* Home and Weight Loss share one badge treatment — they sat at different
     sizes because each page carried its own variant. */
  .hero-badge .hb-title{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
  .hero-badge .hb-sub{display:block;font-size:.72rem;font-weight:400;color:var(--muted);margin-top:.15rem}
  .hero-badge .hb-big{font-family:'Sora',sans-serif;font-weight:800;font-size:2.1rem;letter-spacing:-.03em;white-space:nowrap}
  .hero-badge .hb-big span{font-size:.85rem;font-weight:600;color:#5a6b7d}
  @media(max-width:880px){.hero-badge{left:10px}}

  /* ============ TRUST STRIP ============ */
  .trust{
    background:var(--ice);border-bottom:1px solid var(--line);
    padding:1.4rem clamp(1rem,4vw,3rem);
  }
  .trust-inner{
    max-width:1200px;margin:0 auto;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem;
  }
  .trust-item{display:flex;gap:.7rem;align-items:flex-start}
  .trust-item svg{flex-shrink:0;margin-top:.15rem}
  .trust-item h3{font-size:.85rem;font-weight:700;color:var(--navy);font-family:'Sora',sans-serif;letter-spacing:-.01em}
  .trust-item p{font-size:.75rem;color:var(--muted);margin-top:.15rem}

  /* ============ SECTION SHARED ============ */
  section{scroll-margin-top:5.5rem}
  .sec-pad{padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,4vw,3rem)}
  .sec-inner{max-width:1200px;margin:0 auto}
  .sec-eyebrow{
    display:inline-flex;align-items:center;gap:.5rem;
    font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--teal-deep);font-weight:700;margin-bottom:.8rem;
  }
  .sec-eyebrow::before{content:"";width:22px;height:2px;background:var(--teal)}
  h2.sec-head{
    font-family:'Sora',sans-serif;
    font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;letter-spacing:-.02em;
    color:var(--navy);
  }
  h2.sec-head em{font-style:normal;color:var(--teal)}
  .sec-sub{margin-top:.7rem;font-size:.98rem;color:var(--muted);max-width:44rem}

  /* ============ PRODUCT SWITCHER ============ */
  .switcher-wrap{
    position:sticky;top:64px;z-index:50;
    background:var(--ice);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin-top:2rem;
  }
  .switcher{
    display:flex;gap:.4rem;overflow-x:auto;
    padding:.65rem clamp(1rem,4vw,3rem);
    max-width:1200px;margin:0 auto;
    scrollbar-width:none;
  }
  .switcher::-webkit-scrollbar{display:none}
  .switcher .label{
    font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--muted);align-self:center;white-space:nowrap;margin-right:.5rem;font-weight:600;
  }
  .chip{
    border:1px solid var(--line);
    background:#fff;
    border-radius:999px;
    padding:.45rem 1rem;
    font-size:.82rem;font-weight:600;
    color:var(--muted);
    white-space:nowrap;
    transition:all .18s ease;
  }
  .chip:hover{border-color:var(--teal);color:var(--teal-deep)}
  .chip.active{background:var(--navy);border-color:var(--navy);color:#fff}

  /* ============ PRODUCT PANELS (sliding) ============ */
  .panels{overflow:hidden}
  .panel{
    display:none;
    grid-template-columns:1.1fr .9fr;
    gap:clamp(2rem,5vw,4.5rem);
    padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,3rem);
    max-width:1200px;margin:0 auto;
    align-items:start;
  }
  .panel.active{display:grid;animation:slideIn .4s ease}
  @keyframes slideIn{
    from{opacity:0;transform:translateX(calc(var(--dir,1) * 42px))}
    to{opacity:1;transform:none}
  }
  @media(max-width:880px){.panel{grid-template-columns:1fr}}
  /* new picker layout: headline+photo left, tagline+pricing right (columns top-align) */
  .panel:has(.pk-left){grid-template-columns:.95fr 1.05fr;align-items:start}
  .pk-head{grid-column:1/-1}
  @media(min-width:881px){.panel:has(.pk-head){row-gap:0}.pk-head{margin-bottom:1.3rem}}
  .pk-left{display:flex;flex-direction:column}
  .pk-left .vial-stage{margin-top:1.3rem}
  .pk-head ~ .pk-left .vial-stage{margin-top:0}
  .pk-right{display:flex;flex-direction:column}
  .pk-head ~ .pk-right .tagline{margin-top:0}
  @media(max-width:880px){.panel:has(.pk-left){grid-template-columns:1fr}.pk-left .vial-stage{margin-top:1.6rem}}

  /* The Semaglutide-only breathing-room overrides that used to live here are
     gone. They existed to compensate for a shorter tagline, and once the
     taglines were removed they only served to make Semaglutide's blocks and
     gaps differ from Tirzepatide's on tab switch. Each page now sets one
     shared rule covering both GLP-1 panels — see the desktop density block in
     index.html and weight-loss.html. */
  .panel .eyebrow{
    display:inline-flex;align-items:center;gap:.5rem;
    font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--teal-deep);font-weight:700;margin-bottom:1rem;
  }
  .panel .eyebrow::before{content:"";width:22px;height:2px;background:var(--teal)}
  h3.product-name{
    font-family:'Sora',sans-serif;
    font-size:clamp(1.8rem,3.8vw,2.7rem);
    font-weight:800;letter-spacing:-.03em;line-height:1.08;
    color:var(--navy);
  }
  .tagline{margin-top:1rem;font-size:1.02rem;color:var(--muted);max-width:34rem}

  .flat-callout{
    margin-top:1.5rem;
    display:flex;flex-direction:column;gap:.5rem;align-items:stretch;
    background:var(--teal-tint);
    border:1px solid #bfe6ea;
    border-radius:12px;
    padding:.9rem 1.1rem;
    max-width:34rem;
  }
  .flat-callout svg{flex-shrink:0;margin-top:.15rem}
  .flat-callout p{font-size:.85rem;color:var(--ink)}
  .flat-callout .fc-item{display:flex;align-items:center;gap:.6rem;margin:0}
  .flat-callout .fc-item strong{color:var(--teal-deep)}
  .flat-callout strong{color:var(--teal-deep)}

  .pharm-block{margin-top:2rem}
  .plan-label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:.7rem}
  .pharms{display:flex;flex-direction:column;gap:.6rem;max-width:34rem}
  .pharm-card{
    display:flex;justify-content:space-between;align-items:center;gap:1rem;
    border:1.5px solid var(--line);background:#fff;border-radius:12px;
    padding:.9rem 1.1rem;text-align:left;width:100%;
    transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .pharm-card:hover{border-color:var(--teal)}
  /* Semaglutide offers two products against tirzepatide's three. This invisible
     third slot keeps the plan cards and the buttons at the same height on both
     tabs — without it the whole lower half jumps when you switch on a phone. */
  /* Inherits .pharm-card's box rather than restating it. It used to carry its
     own border/padding plus a min-height calculated against the DEFAULT
     padding — but on desktop the real cards tighten via the panel override
     while the spacer did not, so it stood taller than the cards it was
     spacing and dropped the Semaglutide column out of line. */
  .pharm-spacer{visibility:hidden;pointer-events:none}
  .pharm-card.selected{
    border-color:var(--teal);background:var(--teal-tint);
    box-shadow:0 0 0 1px var(--teal);
  }
  .pharm-card .ph-left{display:flex;flex-direction:column;gap:.3rem}
  .pharm-card .ph-name{font-weight:700;font-size:.95rem;color:var(--navy);font-family:'Sora',sans-serif;letter-spacing:-.01em}
  .pharm-card .ph-form{
    display:inline-flex;align-self:flex-start;
    font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--teal-deep);background:#fff;border:1px solid #bfe6ea;
    border-radius:999px;padding:.15rem .55rem;
  }
  .pharm-card .ph-right{text-align:right;flex-shrink:0}
  .pharm-card .ph-from{font-family:'Sora',sans-serif;font-weight:800;font-size:1.05rem;color:var(--navy)}
  .pharm-card .ph-from span{font-family:'Public Sans';font-size:.72rem;font-weight:500;color:var(--muted)}
  .pharm-card .ph-avail{font-size:.68rem;color:var(--muted);margin-top:.15rem}

  .plan-block{margin-top:1.6rem}
  .plans-group{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;max-width:34rem}
  @media(max-width:480px){.plans-group{grid-template-columns:1fr}}
  .plan-card{
    position:relative;
    border:1.5px solid var(--line);background:#fff;border-radius:12px;
    padding:1.1rem 1.15rem .95rem;text-align:left;
    transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .plan-card:hover{border-color:var(--teal)}
  .plan-card.selected{
    border-color:var(--teal);background:var(--teal-tint);
    box-shadow:0 0 0 1px var(--teal);
  }
  .plan-card .p-name{font-weight:700;font-size:.9rem;color:var(--navy)}
  .plan-card .p-price{
    font-family:'Sora',sans-serif;font-weight:800;font-size:1.55rem;
    color:var(--navy);margin-top:.35rem;letter-spacing:-.02em;
  }
  .plan-card .p-price span{font-family:'Public Sans';font-size:.78rem;font-weight:500;color:var(--muted);letter-spacing:0}
  .plan-card .p-note{font-size:.72rem;color:var(--muted);margin-top:.3rem}
  .badge{
    position:absolute;top:-9px;right:12px;
    background:var(--teal);color:#fff;
    font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    padding:.2rem .55rem;border-radius:999px;
  }
  .radio-dot{
    position:absolute;top:14px;right:14px;width:16px;height:16px;border-radius:50%;
    border:2px solid var(--line);background:#fff;
  }
  .plan-card.selected .radio-dot{border-color:var(--teal);background:var(--teal);box-shadow:inset 0 0 0 3px #fff}

  .cta-row{display:flex;gap:.8rem;margin-top:1.6rem;flex-wrap:wrap}
  /* Two equal buttons that line up with the two plan cards above them. */
  .panel .cta-row .btn-primary,
  .panel .cta-row .btn-ghost-cta{flex:1 1 0;justify-content:center;text-align:center;white-space:nowrap}
  /* Outline counterpart to the filled primary — teal border and text so it
     reads as a button. The previous --line border was too pale to register. */
  .btn-ghost-cta{
    display:inline-flex;align-items:center;justify-content:center;
    font-family:'Sora',sans-serif;font-weight:700;font-size:.95rem;
    padding:.95rem 1.4rem;border-radius:10px;text-decoration:none;
    border:2px solid var(--teal);background:#fff;color:var(--teal-deep);
    transition:background .15s ease, color .15s ease;
  }
  .btn-ghost-cta:hover{background:var(--teal);color:#fff}
  /* Sized so "CLICK HERE" stays on the same line as the question. */
  .pharm-link{
    margin-top:.9rem;font-size:.78rem;color:var(--muted);white-space:nowrap;
  }
  .pharm-link a{color:var(--teal-deep);font-weight:700;text-decoration:underline}
  @media(max-width:600px){
    .panel .cta-row{flex-direction:column}
    .panel .cta-row .btn-primary,
    .panel .cta-row .btn-ghost-cta{flex:none;width:100%;white-space:normal}
    /* too narrow to hold one line at any readable size — let it wrap */
    .pharm-link{white-space:normal;font-size:.85rem}
  }
  .btn-ghost{
    display:inline-block;background:transparent;color:var(--navy);border:1.5px solid var(--line);
    border-radius:10px;padding:.95rem 1.5rem;font-size:.95rem;font-weight:600;text-decoration:none;
  }
  .btn-ghost:hover{border-color:var(--navy)}
  .rx-note{margin-top:1rem;font-size:.78rem;color:var(--muted);display:flex;gap:.5rem;align-items:flex-start;max-width:32rem}
  .rx-note svg{flex-shrink:0;margin-top:.1rem}

  /* ============ RX PANEL ============ */
  .rx-panel{position:relative}
  .vial-stage{
    position:relative;
    background:
      linear-gradient(165deg, rgba(2,29,56,.03), rgba(36,175,188,.06)),
      var(--ice);
    border:1px solid var(--line);
    border-radius:var(--radius) var(--radius) 0 0;
    display:flex;justify-content:center;align-items:center;
    padding:1.4rem;
    min-height:300px;overflow:hidden;
  }
  .vial-stage::before{
    content:"";position:absolute;inset:0;
    background-image:url("data:image/svg+xml,%3Csvg width='84' height='96' viewBox='0 0 84 96' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 2 L41 13 L41 35 L21 46 L1 35 L1 13 Z' fill='none' stroke='%2324afbc' stroke-opacity='.13' stroke-width='1.5'/%3E%3Cpath d='M63 50 L83 61 L83 83 L63 94 L43 83 L43 61 Z' fill='none' stroke='%23021d38' stroke-opacity='.08' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size:84px 96px;
  }
  .vial-stage > img{
    position:relative;z-index:1;display:block;
    height:420px;width:auto;max-width:100%;object-fit:contain;border-radius:10px;
  }
  .vial-stage img{box-shadow:0 20px 40px -18px rgba(2,29,56,.35)}
  /* one master vial photo, medication name printed on its blank label via
     percentage coordinates inside an aspect-locked frame */
  .vial-wrap{position:relative;z-index:1;height:420px;aspect-ratio:1087/1447;max-width:100%}
  .vial-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:10px}
  .vial-print{
    position:absolute;z-index:2;top:51.5%;left:35.4%;width:34.2%;
    line-height:1.05;color:var(--navy);font-family:'Sora',sans-serif;text-align:left;
  }
  .vial-print strong{
    display:block;font-size:14px;font-weight:800;letter-spacing:-.045em;
    text-transform:uppercase;white-space:nowrap;overflow:hidden;
  }
  .vial-print .vp-method{
    display:block;margin-top:5px;color:var(--teal-deep);
    font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  }
  .vial-print .vp-chip{
    display:inline-block;margin-top:6px;background:var(--teal-deep);color:#fff;
    border-radius:4px;padding:3px 6px;font-size:7.5px;font-style:normal;
    font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  }
  .rx-label{
    background:#fff;
    border:1px solid var(--line);
    border-top:2px dashed var(--line);
    border-radius:0 0 var(--radius) var(--radius);
    padding:1.25rem 1.4rem;
    font-family:'IBM Plex Mono',monospace;
    font-size:.78rem;
  }
  .rx-label .rx-head{
    display:flex;justify-content:space-between;align-items:center;
    padding-bottom:.7rem;margin-bottom:.7rem;border-bottom:1px solid var(--line);
  }
  .rx-label .rx-title{font-weight:600;color:var(--navy);letter-spacing:.04em}
  .rx-label .rx-sym{font-family:'Sora',sans-serif;font-size:1.35rem;font-weight:800;color:var(--teal)}
  .rx-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.2rem}
  .rx-field .k{color:var(--muted);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
  .rx-field .v{color:var(--ink);font-weight:500;margin-top:.1rem}
  .rx-barcode{
    margin-top:1rem;height:26px;
    background:repeating-linear-gradient(90deg,var(--navy) 0 2px,transparent 2px 5px,var(--navy) 5px 6px,transparent 6px 10px);
    opacity:.8;border-radius:2px;
  }

  /* ============ INCLUDED (navy band) ============ */
  section.included{
    position:relative;
    background:var(--navy);color:#dcedf2;
    overflow:hidden;
  }
  section.included::before{
    content:"";position:absolute;top:-40px;right:-30px;width:340px;height:340px;
    background-image:url("data:image/svg+xml,%3Csvg width='120' height='138' viewBox='0 0 120 138' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 3 L58 19 L58 51 L30 67 L2 51 L2 19 Z' fill='none' stroke='%2324afbc' stroke-opacity='.35' stroke-width='2'/%3E%3Cpath d='M90 71 L118 87 L118 119 L90 135 L62 119 L62 87 Z' fill='none' stroke='%23ffffff' stroke-opacity='.14' stroke-width='2'/%3E%3C/svg%3E");
    background-size:120px 138px;
    opacity:.9;
  }
  section.included .sec-inner{position:relative;z-index:1}
  section.included h2.sec-head{color:#fff}
  .inc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem;margin-top:2rem}
  .inc-item{border-top:1px solid rgba(255,255,255,.16);padding-top:1.1rem}
  .inc-item h3{font-size:.95rem;font-weight:600;margin-bottom:.4rem;color:#fff}
  .inc-item p{font-size:.85rem;color:#a9c3cf}

  /* ============ HOW IT WORKS ============ */
  .how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.25rem;margin-top:2rem}
  .step{
    background:var(--ice);border:1px solid var(--line);border-radius:var(--radius);
    padding:1.4rem;
  }
  .step .num{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--teal-deep);letter-spacing:.12em;margin-bottom:.7rem;font-weight:600}
  .step h3{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:.4rem;font-family:'Sora',sans-serif;letter-spacing:-.01em}
  .step p{font-size:.85rem;color:var(--muted)}

  /* ============ SPLIT SECTIONS ============ */
  .split{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(2rem,5vw,4rem);align-items:center;
    max-width:1200px;margin:0 auto;
  }
  @media(max-width:880px){.split{grid-template-columns:1fr}}
  .split img{
    border-radius:var(--radius);width:100%;
    max-height:520px;object-fit:cover;
    object-position:50% 12%; /* portrait photos: anchor crop near the top so faces survive short containers */
    box-shadow:0 24px 48px -20px rgba(2,29,56,.35);
  }
  .split-list{margin-top:1.4rem;display:flex;flex-direction:column;gap:1rem}
  .split-list li{list-style:none;display:flex;gap:.75rem;align-items:flex-start}
  .split-list svg{flex-shrink:0;margin-top:.2rem}
  .split-list h3{font-size:.95rem;font-weight:700;color:var(--navy);font-family:'Sora',sans-serif;letter-spacing:-.01em}
  .split-list p{font-size:.85rem;color:var(--muted);margin-top:.15rem}
  section.beyond{background:var(--navy);color:#dcedf2}
  section.beyond h2.sec-head{color:#fff}
  section.beyond .sec-sub{color:#a9c3cf}
  section.beyond .split-list h3{color:#fff}
  section.beyond .split-list p{color:#a9c3cf}

  /* ============ FAQ ============ */
  section.faq .sec-inner{max-width:840px}
  .faq-group{margin-top:2rem}
  .faq-group h3{
    font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);
    margin-bottom:.4rem;
  }
  details{border-bottom:1px solid var(--line)}
  summary{
    list-style:none;display:flex;justify-content:space-between;align-items:center;
    padding:1.1rem 0;font-weight:600;font-size:.95rem;color:var(--navy);cursor:pointer;gap:1rem;
  }
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";font-family:'IBM Plex Mono',monospace;font-size:1.1rem;color:var(--teal);flex-shrink:0}
  details[open] summary::after{content:"–"}
  details p{padding:0 0 1.2rem;font-size:.88rem;color:var(--muted);max-width:44rem}

  /* ============ CTA BAND ============ */
  .cta-band{
    background:linear-gradient(135deg,var(--teal-deep),var(--teal));
    color:#fff;text-align:center;
    padding-top:.6rem;padding-bottom:.85rem;
  }
  .cta-band h2{
    font-family:'Sora',sans-serif;font-size:clamp(1.5rem,3vw,2.2rem);
    font-weight:800;letter-spacing:-.02em;
  }
  .cta-band p{margin-top:.7rem;font-size:.95rem;color:#e2f7f9;max-width:38rem;margin-left:auto;margin-right:auto}
  .cta-band .btn-white{
    display:inline-block;margin-top:1.6rem;
    background:#fff;color:var(--teal-deep);border-radius:10px;
    padding:1rem 2.4rem;font-size:.95rem;font-weight:800;text-decoration:none;
    font-family:'Sora',sans-serif;
    transition:transform .15s ease, box-shadow .15s ease;
    box-shadow:0 14px 30px -12px rgba(2,29,56,.4);
  }
  .cta-band .btn-white:hover{transform:translateY(-2px);box-shadow:0 20px 38px -14px rgba(2,29,56,.5)}
  .cta-band .cta-fine{margin-top:1rem;font-size:.72rem;color:#d3f1f4}
  .fine-br{display:none}
  @media(max-width:600px){.fine-br{display:inline}}

  /* ============ FOOTER ============ */
  footer{background:#041526;color:#8ba4b4;padding:clamp(2.5rem,5vw,4rem) clamp(1rem,4vw,3rem) 2rem}
  .foot-inner{max-width:1200px;margin:0 auto}
  .foot-top{
    display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;
    padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.08);
  }
  @media(max-width:720px){.foot-top{grid-template-columns:1fr}}
  .foot-tag{margin-top:.9rem;font-size:.85rem;max-width:26rem}
  footer h4{
    font-family:'Sora',sans-serif;font-size:.8rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:1rem;
  }
  .foot-links{display:flex;flex-direction:column;gap:.6rem;font-size:.85rem}
  .foot-links a{text-decoration:none}
  .foot-links a:hover{color:#fff}
  .disclaimer{font-size:.7rem;line-height:1.6;margin-top:2rem;color:#6d8595}
  .foot-legal{
    margin-top:1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
    font-size:.72rem;color:#6d8595;
  }

  /* reveal on scroll */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none}}

  /* ============ NAVY SECTIONS — hexagons on every navy band ============ */
  /* big navy hero = faint hexagons full-width (.hero::before, above).
     navy banners lower on the page = right-side alternating cluster (matches .included). */
  section.beyond{position:relative;overflow:hidden}
  section.beyond::before{
    content:"";position:absolute;top:-40px;right:-30px;width:340px;height:340px;
    background-image:url("data:image/svg+xml,%3Csvg width='120' height='138' viewBox='0 0 120 138' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 3 L58 19 L58 51 L30 67 L2 51 L2 19 Z' fill='none' stroke='%2324afbc' stroke-opacity='.35' stroke-width='2'/%3E%3Cpath d='M90 71 L118 87 L118 119 L90 135 L62 119 L62 87 Z' fill='none' stroke='%23ffffff' stroke-opacity='.14' stroke-width='2'/%3E%3C/svg%3E");
    background-size:120px 138px;opacity:.9;pointer-events:none;
  }
  section.beyond .split{position:relative;z-index:1}

  /* ============ CTA rows — equal button heights when side by side ============ */
  .cta-row{align-items:stretch}
  .cta-row .btn-primary,.cta-row .btn-ghost,.cta-row .btn-ghost-light,.cta-row .btn-white{
    display:inline-flex;align-items:center;justify-content:center;
  }

  /* ============================================================
     REFINEMENTS — readability, contrast, equal buttons, hexagon strip
     ============================================================ */
  /* Readability: content reading text up ~12% (carousel/vial text left as-is) */
  .hero-sub{font-size:1.18rem}
  .sec-sub{font-size:1.1rem}
  .inc-item p{font-size:.95rem}
  .inc-item h3{font-size:1.03rem}
  .step p{font-size:.95rem}
  .step h3{font-size:1.08rem}
  .trust-item h3{font-size:.95rem}
  .trust-item p{font-size:.85rem}
  .split-list p{font-size:.96rem}
  .split-list h3{font-size:1.03rem}
  .hero-points li{font-size:.9rem}
  details summary{font-size:1.03rem}
  details p{font-size:.98rem}
  .foot-links{font-size:.92rem}
  .foot-tag{font-size:.92rem}
  /* Accessibility: legal/fine-print was too small + too faint */
  .cta-fine{font-size:.9rem;color:#3f4f5e}
  .disclaimer{font-size:.8rem;color:#8399a8}
  .rx-note{font-size:.85rem}
  /* Equal-size paired CTA buttons (bottom-of-page mismatch) */
  .cta-row .btn-primary,.cta-row .btn-ghost,.cta-row .btn-ghost-light,.cta-row .btn-white{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:3.4rem;padding:.5rem 1.9rem;font-size:1rem;
  }
  .cta-row .btn-white{margin-top:0}
  /* Hexagons: full-height right-edge strip on navy bars (was a fading top-right blob) */
  section.beyond::before,section.included::before{
    content:"";position:absolute;top:0;right:0;bottom:0;left:auto;height:auto;
    width:clamp(200px,32vw,380px);
    background-image:url("data:image/svg+xml,%3Csvg width='120' height='138' viewBox='0 0 120 138' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 3 L58 19 L58 51 L30 67 L2 51 L2 19 Z' fill='none' stroke='%2324afbc' stroke-opacity='.32' stroke-width='2'/%3E%3Cpath d='M90 71 L118 87 L118 119 L90 135 L62 119 L62 87 Z' fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='2'/%3E%3C/svg%3E");
    background-size:120px 138px;background-repeat:repeat;background-position:top right;
    opacity:.9;pointer-events:none;
    -webkit-mask-image:linear-gradient(to left,#000 55%,transparent);
    mask-image:linear-gradient(to left,#000 55%,transparent);
  }

  /* inc-item cards: DARK text by default (light backgrounds); navy sections override to light */
  .inc-item{border-top-color:var(--line)}
  .inc-item h3{color:var(--navy)}
  .inc-item p{color:var(--muted)}
  section.included .inc-item,section.beyond .inc-item{border-top-color:rgba(255,255,255,.16)}
  section.included .inc-item h3,section.beyond .inc-item h3{color:#fff}
  section.included .inc-item p,section.beyond .inc-item p{color:#a9c3cf}

  /* carousel: 'Start intake' + live pharmacy/plan readout — LOCKED-width cells (ch-sized to longest value so it never resizes) */
  .rx-readout{display:inline-flex;align-items:stretch;gap:.9rem;border:1.5px solid #bfe6ea;background:var(--teal-tint);border-radius:10px;padding:.4rem .95rem;min-height:3.4rem;font-family:'IBM Plex Mono',monospace}
  .rx-cell{display:flex;flex-direction:column;justify-content:center;gap:.14rem}
  .rx-cell:first-child{border-right:1px solid #bfe6ea;padding-right:.9rem}
  .rx-k{display:inline-flex;align-items:center;gap:.3rem;font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);font-weight:700}
  .rx-k::before{content:"";flex:none;width:4px;height:4px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 1.5px rgba(36,175,188,.22)}
  .rx-v{display:inline-block;font-size:.82rem;font-weight:600;color:var(--navy);white-space:nowrap}
  .cta-pharm{min-width:10ch}
  .cta-plan{min-width:14ch}
  /* carousel CTA: tight grid package aligned to the plan cards above */
  .panel .cta-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;max-width:34rem;margin-top:1.6rem;align-items:stretch}
  .panel .cta-row .btn-primary{grid-column:1;width:100%}
  .panel .cta-row .rx-readout{grid-column:2;width:100%}
  .panel .cta-row .rx-cell:last-child{flex:1}
  .panel .cta-row .btn-ghost{grid-column:1 / -1;width:100%}
  /* plan picker: grayed 'unavailable' 3-month for month-only pharmacies (stable height, no mobile jump) */
  .plan-card.unavail{opacity:.7;cursor:not-allowed;pointer-events:none;background:var(--ice);border-style:dashed;border-color:var(--line)}
  .plan-card.unavail .p-name{color:var(--muted)}
  .plan-card.unavail .p-note{color:var(--muted);margin-top:.35rem}
  .plan-card.unavail.selected{border-color:var(--muted);box-shadow:none;background:var(--ice)}
  /* carousel — mobile: one column, full-width readout, smaller button text */
  @media(max-width:600px){
    .panel .cta-row{grid-template-columns:1fr}
    .panel .cta-row > *{grid-column:1 / -1 !important}
    .panel .cta-row .rx-readout{width:100%}
    .panel .cta-row .cta-pharm,.panel .cta-row .cta-plan{min-width:0}
    .panel .cta-row .rx-cell{min-width:0}
    .panel .cta-row .btn-primary,.panel .cta-row .btn-ghost{font-size:.82rem;padding-left:.7rem;padding-right:.7rem}
  }


  /* editorial split photos (lifestyle) fill their cell — cover-cropped, rounded */
  .split picture{display:block}
  .split picture img{border-radius:var(--radius);width:100%;height:100%;max-height:520px;object-fit:cover;box-shadow:0 24px 48px -20px rgba(2,29,56,.35)}
  @media(max-width:880px){.split picture img{max-height:340px}}

  /* hard guard: nothing may push the page sideways on mobile (kills the 'right shaved off' bug for good) */
  html,body{overflow-x:clip;max-width:100%}

  /* comparison-card bullet lists (weight-loss #compare) */
  .inc-item .cmp-list{margin:.55rem 0 0;padding-left:1.05rem;list-style:disc}
  .inc-item .cmp-list li{margin-bottom:.4rem;line-height:1.45}
  .inc-item .cmp-list li:last-child{margin-bottom:0}

  /* ── Contact modal ──────────────────────────────────────────────
     Lives here rather than inline on one page: the contact section has
     already moved once (about -> resources) and left these behind, which
     rendered the modal as a bare close button. Shared means it follows. */
  .cm-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:1.2rem;background:rgba(8,21,38,.72);backdrop-filter:blur(3px)}
  .cm-overlay.open{display:flex}
  .cm-panel{width:100%;max-width:30rem;background:linear-gradient(160deg,var(--navy),var(--navy-2));border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:2rem clamp(1.2rem,4vw,2.1rem) 1.7rem;box-shadow:0 40px 80px -20px rgba(0,0,0,.6);position:relative;max-height:92vh;overflow-y:auto}
  .cm-close{position:absolute;top:.7rem;right:.9rem;background:none;border:0;color:#9fb6c2;font-size:1.7rem;line-height:1;cursor:pointer;padding:.1rem .4rem}
  .cm-close:hover{color:#fff}
  .cm-logo{display:block;height:30px;margin:0 auto .9rem}
  .cm-title{font-family:'Sora',sans-serif;font-size:1.35rem;font-weight:800;color:#fff;text-align:center;letter-spacing:-.01em;margin-bottom:1.2rem}
  .cm-row{display:flex;gap:.7rem}
  .cm-row .cm-field{flex:1}
  .cm-field{margin-bottom:.7rem}
  .cm-field input,.cm-field textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:.72rem .8rem;color:#fff;font-family:inherit;font-size:.95rem}
  .cm-field input::placeholder,.cm-field textarea::placeholder{color:#8ba4b4}
  .cm-field input:focus,.cm-field textarea:focus{outline:none;border-color:var(--teal);background:rgba(255,255,255,.09)}
  .cm-field textarea{min-height:96px;resize:vertical}
  .cm-honey{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
  .cm-submit{width:100%;margin-top:.4rem;background:var(--teal);color:#fff;border:0;border-radius:10px;padding:.85rem;font-family:'Sora',sans-serif;font-weight:700;font-size:.95rem;cursor:pointer;transition:filter .15s}
  .cm-submit:hover{filter:brightness(1.08)}
  .cm-submit:disabled{opacity:.6;cursor:default}
  .cm-msg{text-align:center;color:#bfe3e8;font-size:.88rem;margin-top:.8rem;min-height:1.1rem}
  .cm-msg.err{color:#ff9b8a}