: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;
  }
  .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)}
  /* the lede runs the full width of the section band. At 44rem it stopped
     little over halfway across a 1200px container and read as bunched to
     the left; the size goes up a step so the longer line still scans. */
  .sec-sub{margin-top:.7rem;font-size:1.06rem;color:var(--muted);max-width:none}

  /* ============ 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}}

  .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}

  /* TWO different things wear this class and they need opposite layouts.

     1. The picker strip: three .fc-item phrases that should sit in one row.
     2. A single message: a bare icon next to a paragraph.

     The base rule below is the second kind — icon left, text beside it. Making
     the base a spread-out row put the icon hard against the left edge with the
     text shoved to the right, which is what the "Pharmacist access is included"
     blip on the about page was doing. */
  .flat-callout{
    margin-top:1.5rem;
    display:flex;flex-direction:row;flex-wrap:nowrap;
    gap:.7rem;align-items:flex-start;justify-content:flex-start;
    background:var(--teal-tint);
    border:1px solid #bfe6ea;
    border-radius:12px;
    padding:.9rem 1.1rem;
    max-width:34rem;
  }

  /* The picker strip only. The three phrases plus their icons come to about
     470px against roughly 505px of column, so they make one row only if the
     type and gaps are trimmed. Below 620px nothing fits and they wrap at full
     size rather than shrinking to illegible. */
  .flat-callout:has(.fc-item){
    flex-wrap:wrap;
    gap:.5rem .95rem;align-items:center;justify-content:space-between;
    padding:.75rem .85rem;
    max-width:none;
  }
  .flat-callout .fc-item{font-size:.78rem}
  .flat-callout .fc-item svg{width:15px;height:15px}
  @media(max-width:620px){
    .flat-callout:has(.fc-item){gap:.5rem 1.2rem;padding:.9rem 1.1rem}
    .flat-callout .fc-item{font-size:.85rem}
  }
  .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;white-space:nowrap}
  .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)}
  .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}
  .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)}
  .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 ============ */
  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;
  }

  /* Readability: content reading text up ~12% (carousel/vial text left as-is) */
  .hero-sub{font-size:1.18rem}
  .sec-sub{font-size:1.18rem}
  .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}

  .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-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}}

  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}

  .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}

.foot-legal{position:relative}
@media(min-width:700px){
  .foot-legal .tw-credit{position:absolute;left:50%;transform:translateX(-50%)}
}

/* Buttons that sit together share one width. */
.cta-row.cta-row.cta-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;max-width:34rem;align-items:stretch}
.cta-row.cta-row.cta-row>*{grid-column:auto !important;width:100%;min-width:0;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:normal;flex:none}
@media(max-width:640px){.cta-row.cta-row.cta-row{grid-template-columns:1fr;max-width:none}}
@media(min-width:861px){body .btn-login,body .btn-shop{display:inline-flex;align-items:center;justify-content:center;min-width:10.25rem;box-sizing:border-box;text-align:center;padding-left:.9rem;padding-right:.9rem}}