/* =============================================================================
   Healing Biologix — Oral Peptide Strip landing pages
   Custom-center styles for the Webflow embed. Scoped under `.hbx` so pasting
   this into a Webflow page's custom code will NOT clobber the site's globals.

   Design tokens pulled from the live Webflow CSS (healingbiologix.webflow.shared):
   navy #1d396a, green #7eccb9 / #73eacd, cool-gray #5e7192, aktiv-grotesk + Noto Sans.

   The `.pv-*` blocks at the very bottom are PREVIEW ONLY (a stand-in nav + footer
   so the page looks complete locally). On the real Webflow page the site's own
   nav + footer components sit above/below the embed and these are not used.
   ============================================================================= */

:root{
  --hb-navy:#1d396a;
  --hb-navy-darker:#162a4d;
  --hb-navy-deepgreen:#0e251f;
  --hb-cool-gray:#5e7192;
  --hb-blue:#aed3ff;
  --hb-blue-light:#dfeeff;
  --hb-green:#7eccb9;
  --hb-green-bright:#73eacd;
  --hb-green-dark:#41a48c;
  --hb-green-darker:#23584b;
  --hb-green-light:#d5f9f0;
  --hb-white:#fff;
  --hb-black:#0b1220;
  --hb-ink:#111a2b;
  --hb-muted:#5e7192;
  --hb-muted-2:#6b7a93;
  --hb-border:#e3e8f0;
  --hb-border-strong:#cbd5e6;
  --hb-paper:#f6f8fb;

  --hb-font-head:'aktiv-grotesk','Inter',system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  --hb-font-body:'Noto Sans',system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;

  --hb-container:80rem;      /* 1280px */
  --hb-pad-x:2.5rem;         /* 40px  */
  --hb-radius:20px;
  --hb-radius-sm:12px;
  --hb-radius-btn:8rem;      /* pill  */
  --hb-shadow-sm:0 2px 10px rgba(29,57,106,.06);
  --hb-shadow:0 14px 40px rgba(29,57,106,.10);
  --hb-shadow-lg:0 30px 70px rgba(14,37,31,.18);
  --hb-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- scope reset ---- */
.hbx *,.hbx *::before,.hbx *::after{box-sizing:border-box}
.hbx{
  font-family:var(--hb-font-body);
  color:var(--hb-ink);
  background:var(--hb-white);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.hbx img{max-width:100%;display:block}
.hbx a{color:inherit;text-decoration:none}
/* the hidden attribute must always win over component display rules (form-grid, panels) */
.hbx [hidden]{display:none!important}

/* ---- typography ---- */
.hbx h1,.hbx h2,.hbx h3,.hbx h4,.hbx h5{
  font-family:var(--hb-font-head);
  color:var(--hb-navy);
  line-height:1.12;
  margin:0;
  letter-spacing:-.01em;
  font-weight:600;
}
.hbx h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;color:var(--hb-navy)}
.hbx h2{font-size:clamp(2rem,3.6vw,3.25rem);font-weight:600;line-height:1.14}
.hbx h3{font-size:clamp(1.5rem,2.4vw,2.5rem);font-weight:600}
.hbx h4{font-size:1.375rem;font-weight:600;line-height:1.25}
.hbx p{margin:0}
.hbx .lede{font-size:clamp(1.05rem,1.35vw,1.3rem);color:#33415a;line-height:1.6}

.hbx .eyebrow{
  font-family:var(--hb-font-head);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--hb-green-dark);
  display:inline-flex;align-items:center;gap:.5rem;
}
.hbx .eyebrow::before{
  content:"";width:1.6rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--hb-green-bright),var(--hb-green-dark));
}

/* ---- layout ---- */
.hbx .wrap{max-width:var(--hb-container);margin:0 auto;padding:0 var(--hb-pad-x)}
.hbx .section{padding:clamp(3.5rem,7vw,7rem) 0}
.hbx .section-tight{padding:clamp(2.5rem,4vw,4rem) 0}
.hbx .center{text-align:center}
.hbx .stack>*+*{margin-top:1.1rem}

/* ---- buttons ---- */
.hbx .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--hb-font-head);font-weight:600;font-size:1rem;
  padding:.85rem 1.6rem;border-radius:var(--hb-radius-btn);
  border:2px solid transparent;cursor:pointer;
  transition:background .22s var(--hb-ease),color .22s var(--hb-ease),
             transform .22s var(--hb-ease),box-shadow .22s var(--hb-ease),border-color .22s;
  white-space:nowrap;line-height:1;
}
.hbx .btn svg{width:1.05em;height:1.05em;transition:transform .22s var(--hb-ease)}
.hbx .btn:hover svg{transform:translateX(3px)}
.hbx .btn-primary{background:var(--hb-navy);color:#fff;box-shadow:0 10px 24px rgba(29,57,106,.22)}
.hbx .btn-primary:hover{background:var(--hb-green-darker);transform:translateY(-2px);box-shadow:0 16px 30px rgba(35,88,75,.28)}
.hbx .btn-ghost{background:transparent;color:var(--hb-navy);border-color:var(--hb-border-strong)}
.hbx .btn-ghost:hover{border-color:var(--hb-navy);background:var(--hb-navy);color:#fff}
.hbx .btn-white{background:#fff;color:var(--hb-navy-darker);box-shadow:var(--hb-shadow-sm)}
.hbx .btn-white:hover{color:var(--hb-green-darker);transform:translateY(-2px)}
.hbx .btn-lg{padding:1.05rem 2rem;font-size:1.08rem}
.hbx .btn-block{width:100%}

/* ---- chips / badges ---- */
.hbx .chip{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--hb-font-head);font-weight:600;font-size:.8rem;letter-spacing:.01em;
  padding:.4rem .85rem;border-radius:8rem;
  background:var(--hb-blue-light);color:var(--hb-navy);
  border:1px solid #d3e2f5;
}
.hbx .chip-green{background:var(--hb-green-light);color:var(--hb-green-darker);border-color:#bdeee0}
.hbx .chip svg{width:.95em;height:.95em}
.hbx .chip-row{display:flex;flex-wrap:wrap;gap:.6rem}

.hbx .pill-label{
  display:inline-block;font-family:var(--hb-font-head);font-weight:700;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:6px;
}

/* ============================ HERO (info page) ============================ */
.hbx .hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(115,234,205,.20), transparent 55%),
    radial-gradient(100% 80% at -5% 110%, rgba(174,211,255,.28), transparent 55%),
    var(--hb-paper);
  border-bottom:1px solid var(--hb-border);
  /* the Webflow site applies ~128px top padding to every <section>; override it, AND spread the hero
     background up UNDER the floating nav like the homepage. --hb-nav-h is set by hb.js to the real nav
     height (140px desktop fallback); the extra top padding keeps the content below the nav. */
  z-index:1;
  margin-top:calc(-1 * var(--hb-nav-h, 140px));
  padding:calc(var(--hb-nav-h, 140px) + clamp(1rem,2.5vw,1.75rem)) 0 clamp(2.25rem,4.5vw,3.5rem);
}
/* keep the site nav above the hero background that now bleeds up under it */
.nav_fixed{z-index:100}
.hbx .hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;
  align-items:start;padding:0;
}
/* signup + whitepaper heroes: same nav-bleed treatment (background spreads up under the nav) */
.hbx .signup-hero,.hbx .wp-hero{
  position:relative;z-index:1;
  margin-top:calc(-1 * var(--hb-nav-h, 140px));
  padding-top:calc(var(--hb-nav-h, 140px) + clamp(1rem,2.5vw,1.75rem));
}
.hbx .hero h1{margin-top:1.1rem}
.hbx .hero .lede{margin-top:1.4rem;max-width:34rem}
.hbx .hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hbx .hero-trust{display:flex;flex-wrap:wrap;gap:1.3rem;margin-top:2.2rem}
.hbx .hero-trust .t{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--hb-cool-gray);font-weight:600}
.hbx .hero-trust .t svg{width:1.15rem;height:1.15rem;color:var(--hb-green-dark)}

/* hero visual — layered depth composition, no external image */
.hbx .hero-art{position:relative;min-height:26rem}
.hbx .hero-panel{
  position:absolute;inset:0;border-radius:26px;
  background:linear-gradient(150deg,var(--hb-navy) 0%,var(--hb-navy-darker) 48%,var(--hb-navy-deepgreen) 100%);
  box-shadow:var(--hb-shadow-lg);overflow:hidden;
}
.hbx .hero-panel::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 60% at 80% 15%, rgba(115,234,205,.35), transparent 60%);
}
.hbx .strip{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) rotate(-11deg);
  width:66%;height:4.6rem;border-radius:1.4rem;
  background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(213,249,240,.86));
  box-shadow:0 24px 50px rgba(0,0,0,.32);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--hb-font-head);font-weight:700;color:var(--hb-green-darker);
  letter-spacing:.18em;font-size:.72rem;text-transform:uppercase;
  animation:hbFloat 6s ease-in-out infinite;
}
.hbx .strip::before{
  content:"";position:absolute;inset:0;border-radius:1.4rem;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:translateX(-120%);animation:hbShimmer 4.5s var(--hb-ease) infinite;
}
.hbx .float-card{
  position:absolute;background:rgba(255,255,255,.97);border-radius:16px;
  box-shadow:var(--hb-shadow-lg);padding:.9rem 1.05rem;backdrop-filter:blur(6px);
}
.hbx .float-card .fc-k{font-family:var(--hb-font-head);font-weight:700;color:var(--hb-navy);font-size:1.05rem;line-height:1}
.hbx .float-card .fc-s{font-size:.72rem;color:var(--hb-cool-gray);margin-top:.2rem;letter-spacing:.02em}
.hbx .fc-1{top:8%;left:-4%;animation:hbFloat 7s ease-in-out infinite}
.hbx .fc-2{bottom:9%;right:-3%;animation:hbFloat 8s ease-in-out .6s infinite}
.hbx .fc-badge{
  position:absolute;top:6%;right:8%;background:var(--hb-green-bright);color:var(--hb-navy-darker);
  font-family:var(--hb-font-head);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.45rem .8rem;border-radius:8rem;box-shadow:0 10px 22px rgba(0,0,0,.22);
  animation:hbFloat 6.5s ease-in-out .3s infinite;
}
@keyframes hbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hbx .strip{animation:hbFloatRot 6s ease-in-out infinite}
@keyframes hbFloatRot{0%,100%{transform:translate(-50%,-50%) rotate(-11deg)}50%{transform:translate(-50%,calc(-50% - 9px)) rotate(-11deg)}}
@keyframes hbShimmer{0%{transform:translateX(-120%)}55%,100%{transform:translateX(220%)}}

/* ============================ value / mechanism ============================ */
.hbx .section-head{max-width:44rem}
.hbx .section-head.center{margin:0 auto}
.hbx .section-head h2{margin-top:1rem}
.hbx .section-head p{margin-top:1rem;color:#41506b;font-size:1.08rem}

.hbx .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.8rem}
.hbx .feature{
  background:#fff;border:1px solid var(--hb-border);border-radius:var(--hb-radius);
  padding:1.6rem;box-shadow:var(--hb-shadow-sm);
  transition:transform .3s var(--hb-ease),box-shadow .3s var(--hb-ease),border-color .3s;
}
.hbx .feature:hover{transform:translateY(-4px);box-shadow:var(--hb-shadow);border-color:#d7e2f2}
.hbx .feature .ic{
  width:3rem;height:3rem;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--hb-green-light),#eaf7ff);color:var(--hb-green-dark);
  margin-bottom:1.1rem;
}
.hbx .feature .ic svg{width:1.5rem;height:1.5rem}
.hbx .feature h4{margin-bottom:.5rem}
.hbx .feature p{color:#4a5872;font-size:.97rem}
/* icon + title on ONE line (owner) */
.hbx .feature-top{display:flex;align-items:center;gap:.85rem;margin-bottom:.7rem}
.hbx .feature-top .ic{margin-bottom:0}
.hbx .feature-top h4{margin:0}
.hbx .feature-cta{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;
  font-family:var(--hb-font-head);font-weight:600;font-size:.92rem;color:var(--hb-green-dark);
  transition:gap .2s var(--hb-ease)}
.hbx .feature-cta:hover{gap:.7rem}
.hbx .feature-cta svg{width:1.05em;height:1.05em}

/* ============================ product line ============================ */
.hbx .goalbar{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2rem;justify-content:center}
.hbx .goalbar .goal-btn{
  font-family:var(--hb-font-head);font-weight:600;font-size:.85rem;cursor:pointer;
  padding:.5rem 1.05rem;border-radius:8rem;border:1px solid var(--hb-border-strong);
  background:#fff;color:var(--hb-navy);
  transition:background .2s var(--hb-ease),color .2s var(--hb-ease),border-color .2s var(--hb-ease),transform .2s var(--hb-ease);
}
.hbx .goalbar .goal-btn:hover{background:var(--hb-paper);border-color:var(--hb-navy);transform:translateY(-2px)}
.hbx .goalbar .goal-btn.active{background:var(--hb-navy);color:#fff;border-color:var(--hb-navy)}
/* filter show/hide */
.hbx .product.is-filtered{display:none}
@keyframes hbFilterIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.hbx .product.filter-in{animation:hbFilterIn .35s var(--hb-ease) both}
@media (prefers-reduced-motion:reduce){.hbx .product.filter-in{animation:none}}

.hbx .product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.8rem}
.hbx .product{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--hb-border);border-radius:var(--hb-radius);
  padding:1.5rem;box-shadow:var(--hb-shadow-sm);overflow:hidden;
  transition:transform .3s var(--hb-ease),box-shadow .3s var(--hb-ease),border-color .3s;
}
.hbx .product::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--goal,var(--hb-navy));
  opacity:.9;
}
.hbx .product:hover{transform:translateY(-5px);box-shadow:var(--hb-shadow);border-color:#d7e2f2}
.hbx .product .p-eyebrow{
  font-family:var(--hb-font-head);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--goal,var(--hb-navy));display:flex;align-items:center;gap:.45rem;
}
.hbx .product .p-eyebrow .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--goal,var(--hb-navy))}
.hbx .product h4{margin:.7rem 0 .55rem}
.hbx .product .p-benefit{color:#4a5872;font-size:.95rem;flex:1}
.hbx .product .p-meta{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:1rem;
  font-size:.82rem;color:var(--hb-cool-gray);
}
.hbx .product .p-meta span{display:inline-flex;align-items:center;gap:.35rem}
.hbx .product .p-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid var(--hb-border);
}
.hbx .product .price{font-family:var(--hb-font-head);font-weight:700;color:var(--hb-navy);font-size:1.5rem;line-height:1}
.hbx .product .price small{display:block;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--hb-cool-gray);margin-top:.3rem}
.hbx .product .p-link{
  font-family:var(--hb-font-head);font-weight:600;font-size:.9rem;color:var(--hb-green-dark);
  display:inline-flex;align-items:center;gap:.3rem;transition:gap .2s var(--hb-ease)}
.hbx .product .p-link:hover{gap:.6rem}
.hbx .pack-chip{
  display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.02em;
  padding:.25rem .55rem;border-radius:6px;background:var(--hb-paper);color:var(--hb-cool-gray);
  border:1px solid var(--hb-border);margin-top:.9rem;
}

/* ============================ trust strip ============================ */
.hbx .trust{background:var(--hb-paper);border-top:1px solid var(--hb-border);border-bottom:1px solid var(--hb-border)}
.hbx .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.hbx .trust-item{display:flex;gap:.85rem;align-items:flex-start}
.hbx .trust-item .ic{color:var(--hb-green-dark);flex:none;margin-top:.1rem}
.hbx .trust-item .ic svg{width:1.5rem;height:1.5rem}
.hbx .trust-item b{font-family:var(--hb-font-head);color:var(--hb-navy);font-size:1rem;display:block}
.hbx .trust-item span{font-size:.85rem;color:var(--hb-cool-gray)}

/* ============================ CTA band ============================ */
.hbx .ctaband{position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--hb-navy) 0%,var(--hb-navy-darker) 55%,var(--hb-navy-deepgreen) 100%);
  color:#fff;border-radius:26px;padding:clamp(2.5rem,5vw,4rem);
  box-shadow:var(--hb-shadow-lg);
}
.hbx .ctaband::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 120% at 90% 10%,rgba(115,234,205,.28),transparent 60%);pointer-events:none}
.hbx .ctaband .eyebrow{color:var(--hb-green-bright)}
.hbx .ctaband h2{color:#fff;position:relative}
.hbx .ctaband p{color:#c9d6ee;position:relative;margin-top:1rem;max-width:38rem;font-size:1.08rem}
.hbx .ctaband .hero-cta{position:relative}

/* ============================ compliance disclaimer ============================ */
.hbx .disclaimer{background:#0d1a30;color:#9fb0cc;font-size:.8rem;line-height:1.7}
.hbx .disclaimer .wrap{padding-top:2.2rem;padding-bottom:2.2rem}
.hbx .disclaimer b{color:#cdd8ec;font-family:var(--hb-font-head)}
.hbx .disclaimer .dl-marks{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.hbx .disclaimer .dl-marks .chip{background:rgba(255,255,255,.06);color:#cfe0d9;border-color:rgba(255,255,255,.12)}

/* ============================ SIGN-UP page ============================ */
.hbx .signup-hero{
  background:
    radial-gradient(100% 90% at 90% -20%, rgba(115,234,205,.18), transparent 55%),
    var(--hb-paper);
  border-bottom:1px solid var(--hb-border);
}
.hbx .signup-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:start}
.hbx .form-card{
  background:#fff;border:1px solid var(--hb-border);border-radius:var(--hb-radius);
  box-shadow:var(--hb-shadow);padding:clamp(1.5rem,3vw,2.4rem);
}
.hbx .form-card h3{font-size:1.4rem}
.hbx .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.6rem}
.hbx .field{display:flex;flex-direction:column;gap:.4rem}
.hbx .field.col-2{grid-column:span 2}
.hbx .field label{font-family:var(--hb-font-head);font-weight:600;font-size:.85rem;color:var(--hb-navy)}
.hbx .field label .req{color:#c0392b;margin-left:.15rem}
.hbx .field .hint{font-size:.75rem;color:var(--hb-cool-gray);font-weight:400}
.hbx .field input,.hbx .field select,.hbx .field textarea{
  font-family:var(--hb-font-body);font-size:.98rem;color:var(--hb-ink);
  padding:.75rem .9rem;border:1.5px solid var(--hb-border-strong);border-radius:11px;
  background:#fff;transition:border-color .2s,box-shadow .2s;width:100%;
}
.hbx .field textarea{resize:vertical;min-height:5.5rem}
.hbx .field input:focus,.hbx .field select:focus,.hbx .field textarea:focus{
  outline:none;border-color:var(--hb-navy);box-shadow:0 0 0 4px rgba(29,57,106,.10);
}
.hbx .field input.invalid,.hbx .field select.invalid{border-color:#c0392b;box-shadow:0 0 0 4px rgba(192,57,43,.08)}
.hbx .field .err{font-size:.75rem;color:#c0392b;display:none}
.hbx .field .err.show{display:block}

.hbx .prodpick{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.hbx .prodpick label{
  cursor:pointer;font-family:var(--hb-font-head);font-weight:600;font-size:.82rem;
  padding:.5rem .85rem;border-radius:8rem;border:1.5px solid var(--hb-border-strong);color:var(--hb-navy);
  transition:all .18s var(--hb-ease);user-select:none;
}
.hbx .prodpick input{position:absolute;opacity:0;width:0;height:0}
.hbx .prodpick input:checked+span,.hbx .prodpick label:has(input:checked){}
.hbx .prodpick label.on{background:var(--hb-navy);color:#fff;border-color:var(--hb-navy)}
.hbx .check{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:#33415a}
.hbx .check input{margin-top:.2rem;width:1.05rem;height:1.05rem;flex:none;accent-color:var(--hb-navy)}
.hbx .form-actions{margin-top:1.6rem}
.hbx .form-note{font-size:.78rem;color:var(--hb-cool-gray);margin-top:.9rem;text-align:center}

.hbx .aside .aside-card{
  background:#fff;border:1px solid var(--hb-border);border-radius:var(--hb-radius);
  padding:1.6rem;box-shadow:var(--hb-shadow-sm);
}
.hbx .aside .aside-card+.aside-card{margin-top:1.2rem}
.hbx .aside h4{margin-bottom:1rem}
.hbx .steps{list-style:none;padding:0;margin:0;counter-reset:s}
.hbx .steps li{position:relative;padding-left:2.6rem;margin-bottom:1.1rem;font-size:.95rem;color:#41506b}
.hbx .steps li:last-child{margin-bottom:0}
.hbx .steps li::before{
  counter-increment:s;content:counter(s);position:absolute;left:0;top:-.1rem;
  width:1.85rem;height:1.85rem;border-radius:50%;
  background:var(--hb-navy);color:#fff;font-family:var(--hb-font-head);font-weight:700;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
}
.hbx .steps li b{color:var(--hb-navy);font-family:var(--hb-font-head);display:block;margin-bottom:.1rem}
.hbx .miniline{display:flex;flex-wrap:wrap;gap:.4rem}
.hbx .miniline .m{font-size:.78rem;font-weight:600;color:var(--hb-cool-gray);padding:.3rem .6rem;border:1px solid var(--hb-border);border-radius:8rem}

/* ============================ ORDER WIZARD (sign-up page) ============================ */
/* step progress — circle steps, You -> We -> You cadence */
.hbx .wz-steps{list-style:none;margin:0 0 2rem;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.hbx .wz-step{position:relative;display:flex;align-items:center;gap:.75rem;padding:0 .5rem}
/* connector: fills the gap AFTER this step's label up to the next circle; none after the last step */
.hbx .wz-step::after{content:"";flex:1 1 1rem;min-width:.75rem;height:2px;margin-left:.5rem;background:var(--hb-border-strong)}
.hbx .wz-step:last-child::after{display:none}
.hbx .wz-num{position:relative;z-index:1;flex:none;width:2.7rem;height:2.7rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:2px solid var(--hb-border-strong);color:var(--hb-cool-gray);
  font-family:var(--hb-font-head);font-weight:700;font-size:1.05rem;transition:all .25s var(--hb-ease)}
.hbx .wz-num .wz-check{width:1.3rem;height:1.3rem;display:none}
.hbx .wz-label{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.hbx .wz-label b{font-family:var(--hb-font-head);color:var(--hb-navy);font-size:.95rem;font-weight:600}
.hbx .wz-label span{font-size:.78rem;color:var(--hb-cool-gray)}
.hbx .wz-step.is-active .wz-num{background:var(--hb-navy);border-color:var(--hb-navy);color:#fff;box-shadow:0 0 0 4px rgba(29,57,106,.12)}
.hbx .wz-step.is-done .wz-num{background:var(--hb-green-dark);border-color:var(--hb-green-dark);color:#fff;cursor:pointer}
.hbx .wz-step.is-done .wz-num .wz-n{display:none}
.hbx .wz-step.is-done .wz-num .wz-check{display:block}
.hbx .wz-step.is-done{cursor:pointer}
.hbx .wz-step.is-done::after{background:var(--hb-green-dark)}

/* panels */
.hbx .wz-panel[hidden]{display:none}
.hbx .wz-panel.is-active{animation:hbReveal .45s var(--hb-ease) both}
.hbx .wz-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.6rem}
.hbx .wz-sub{color:#4a5872;font-size:.95rem;margin-top:.5rem}

/* order layout */
.hbx .order-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:1.6rem;align-items:start}
.hbx .order-main{min-width:0}

/* product rows with qty steppers */
.hbx .prod-rows{margin-top:1.4rem;display:flex;flex-direction:column;gap:.7rem}
.hbx .prod-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1rem;
  padding:.9rem 1rem;border:1.5px solid var(--hb-border);border-radius:14px;background:#fff;
  transition:border-color .2s var(--hb-ease),box-shadow .2s var(--hb-ease)}
.hbx .prod-row.on{border-color:var(--hb-navy);box-shadow:0 0 0 3px rgba(29,57,106,.10)}
.hbx .prod-dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--goal,var(--hb-navy))}
.hbx .prod-info{display:flex;flex-direction:column;min-width:0}
.hbx .prod-info b{font-family:var(--hb-font-head);color:var(--hb-navy);font-size:.98rem;font-weight:600}
.hbx .prod-info span{font-size:.8rem;color:var(--hb-cool-gray)}
.hbx .prod-price{font-family:var(--hb-font-head);font-weight:700;color:var(--hb-navy);font-size:1.05rem;white-space:nowrap}
.hbx .prod-price small{font-size:.68rem;font-weight:600;color:var(--hb-cool-gray)}
.hbx .qty{display:inline-flex;align-items:center;border:1.5px solid var(--hb-border-strong);border-radius:8rem;overflow:hidden}
.hbx .qbtn{width:2.1rem;height:2.1rem;border:0;background:#fff;color:var(--hb-navy);font-size:1.15rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.hbx .qbtn:hover{background:var(--hb-paper)}
.hbx .qval{width:2.4rem;text-align:center;border:0;border-left:1.5px solid var(--hb-border);border-right:1.5px solid var(--hb-border);
  font-family:var(--hb-font-head);font-weight:700;color:var(--hb-navy);font-size:.95rem;padding:.45rem 0;background:#fff}
.hbx .qval:focus{outline:none}
.hbx .wz-empty{display:none;margin-top:1rem;font-size:.88rem;color:#c0392b;font-weight:600}
.hbx .wz-empty.show{display:block}

/* order summary */
.hbx .order-summary-wrap{position:sticky;top:1.5rem}
.hbx .order-summary{background:var(--hb-paper);border:1px solid var(--hb-border);border-radius:var(--hb-radius);padding:1.5rem}
.hbx .order-summary h4{margin-bottom:1rem}
.hbx .os-lines{display:flex;flex-direction:column;gap:.6rem}
.hbx .os-line{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.9rem;color:#41506b}
.hbx .os-line b{color:var(--hb-navy);font-family:var(--hb-font-head)}
.hbx .os-empty{font-size:.9rem;color:var(--hb-cool-gray)}
.hbx .os-total{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--hb-border-strong);
  font-family:var(--hb-font-head);color:var(--hb-navy)}
.hbx .os-total b{font-size:1.5rem}
.hbx .os-note{margin-top:1rem;font-size:.78rem;color:var(--hb-cool-gray);line-height:1.5}

/* payment (Stripe mount point) */
.hbx .pay-card{margin-top:1rem;border:1.5px dashed var(--hb-border-strong);border-radius:14px;background:var(--hb-paper)}
.hbx .pay-placeholder{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.3rem}
.hbx .pay-placeholder>svg{width:1.9rem;height:1.9rem;color:var(--hb-navy);flex:none}
.hbx .pay-placeholder b{display:block;font-family:var(--hb-font-head);color:var(--hb-navy);font-size:.98rem}
.hbx .pay-placeholder span{font-size:.85rem;color:var(--hb-cool-gray)}
.hbx .pay-badge{margin-left:auto;flex:none;font-family:var(--hb-font-head);font-weight:700;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--hb-green-darker);background:var(--hb-green-light);border:1px solid #bdeee0;
  padding:.3rem .6rem;border-radius:6px}

@media (max-width:960px){
  .hbx .order-grid{grid-template-columns:1fr}
  .hbx .order-summary-wrap{position:static}
  .hbx .wz-label span{display:none}
}
@media (max-width:600px){
  .hbx .wz-steps{gap:0}
  .hbx .wz-label{display:none}
  .hbx .wz-step{justify-content:center}
  .hbx .prod-row{grid-template-columns:auto 1fr;row-gap:.6rem}
  .hbx .prod-price{grid-column:1/2;justify-self:start}
  .hbx .qty{grid-column:2/3;justify-self:end}
}

/* post-submit success */
/* Submit failure notice — must be impossible to miss: the alternative is the
   clinic assuming they signed up when we never stored anything. */
.hbx .form-error{
  display:none;margin-bottom:1rem;padding:.85rem 1rem;border-radius:.6rem;
  background:#fdecec;border:1px solid #f3b4b4;color:#8f1d1d;
  font-size:.92rem;line-height:1.5;text-align:left;
}
.hbx .form-error.show{display:block;animation:hbPop .4s var(--hb-ease)}

.hbx .success{display:none;text-align:center;padding:1rem}
.hbx .success.show{display:block;animation:hbPop .5s var(--hb-ease)}
.hbx .success .ok{
  width:4rem;height:4rem;border-radius:50%;margin:0 auto 1.3rem;
  background:var(--hb-green-light);color:var(--hb-green-dark);
  display:flex;align-items:center;justify-content:center;
}
.hbx .success .ok svg{width:2rem;height:2rem}
.hbx .success h3{margin-bottom:.7rem}
.hbx .success p{color:#41506b;max-width:26rem;margin:0 auto}
@keyframes hbPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

/* ============================ WHITE PAPERS / FAQs page ============================ */
.hbx .wp-hero{
  background:
    radial-gradient(100% 90% at 90% -20%, rgba(115,234,205,.18), transparent 55%),
    var(--hb-paper);
  border-bottom:1px solid var(--hb-border);
}
.hbx .wp-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center}
.hbx .wp-hero-art{position:relative;min-height:13rem}
.hbx .wp-doc{
  position:absolute;width:9rem;height:11.4rem;border-radius:14px;background:#fff;
  border:1px solid var(--hb-border);box-shadow:var(--hb-shadow);
}
.hbx .wp-doc-1{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);z-index:3;
  display:flex;align-items:center;justify-content:center;color:var(--hb-green-dark);
  background:linear-gradient(160deg,#fff,#f3fbf8);animation:hbFloat 7s ease-in-out infinite}
.hbx .wp-doc-1 svg{width:3.1rem;height:3.1rem}
.hbx .wp-doc-2{left:50%;top:50%;transform:translate(-64%,-48%) rotate(-11deg);z-index:2;
  background:linear-gradient(160deg,#fff,#eef4fb);animation:hbFloat 8s ease-in-out .5s infinite}
.hbx .wp-doc-3{left:50%;top:50%;transform:translate(-36%,-52%) rotate(7deg);z-index:1;
  background:linear-gradient(160deg,#fff,#eef4fb);animation:hbFloat 8.5s ease-in-out .3s infinite}

.hbx .wp-toolbar{
  position:sticky;top:1rem;z-index:20;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:#fff;border:1px solid var(--hb-border);border-radius:14px;
  box-shadow:var(--hb-shadow);padding:.85rem 1.1rem;margin-bottom:2rem;
}
.hbx .wp-selectall{display:flex;align-items:center;gap:.55rem;cursor:pointer;
  font-family:var(--hb-font-head);font-weight:600;font-size:.9rem;color:var(--hb-navy)}
.hbx .wp-selectall input{width:1.1rem;height:1.1rem;accent-color:var(--hb-navy);cursor:pointer}
.hbx .wp-count{font-size:.9rem;color:var(--hb-cool-gray);font-weight:600;margin-right:auto}
.hbx .wp-count b{color:var(--hb-navy)}
.hbx .wp-toolbar .btn{padding:.7rem 1.4rem}
.hbx .wp-toolbar .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none;background:var(--hb-navy)}
.hbx .wp-dl-error{display:none;margin:-1rem 0 1.6rem;padding:.85rem 1rem;border-radius:.6rem;
  background:#fdecec;border:1px solid #f3b4b4;color:#8f1d1d;font-size:.9rem;line-height:1.5}
.hbx .wp-dl-error.show{display:block}

.hbx .wp-group{margin-top:.5rem}
.hbx .wp-group+.wp-group{margin-top:2.6rem}
.hbx .wp-group-head{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
  padding-bottom:.9rem;margin-bottom:1.4rem;border-bottom:2px solid var(--hb-border)}
.hbx .wp-group-head h3{font-size:1.4rem}
.hbx .wp-group-note{font-size:.88rem;color:var(--hb-cool-gray)}
.hbx .wp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}

.hbx .wp-card{
  position:relative;display:flex;flex-direction:column;cursor:pointer;
  background:#fff;border:1.5px solid var(--hb-border);border-radius:var(--hb-radius);
  padding:1.3rem 1.4rem 1.1rem;box-shadow:var(--hb-shadow-sm);
  transition:transform .22s var(--hb-ease),box-shadow .22s var(--hb-ease),border-color .22s var(--hb-ease);
}
.hbx .wp-card:hover{transform:translateY(-3px);box-shadow:var(--hb-shadow);border-color:var(--hb-border-strong)}
.hbx .wp-check{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.hbx .wp-card-body{display:flex;gap:.95rem;align-items:flex-start}
.hbx .wp-doc-ic{flex:none;width:2.75rem;height:2.75rem;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--hb-green-light),#eaf7ff);color:var(--hb-green-dark)}
.hbx .wp-doc-ic svg{width:1.45rem;height:1.45rem}
.hbx .wp-doc-ic-alt{background:linear-gradient(140deg,#e9f0fb,#f3f7ff);color:var(--hb-navy)}
.hbx .wp-card-main{flex:1;min-width:0}
.hbx .wp-title{display:block;font-family:var(--hb-font-head);font-weight:600;color:var(--hb-navy);
  font-size:1.02rem;line-height:1.25}
.hbx .wp-title .wp-year{color:var(--hb-green-dark);font-weight:700}
.hbx .wp-desc{display:block;color:#4a5872;font-size:.9rem;line-height:1.5;margin-top:.4rem}
.hbx .wp-meta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.75rem;
  font-size:.76rem;color:var(--hb-cool-gray);font-weight:600}
.hbx .wp-tag{display:inline-block;padding:.22rem .55rem;border-radius:6px;
  background:var(--hb-paper);border:1px solid var(--hb-border);letter-spacing:.02em}
.hbx .wp-tick{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;
  border:2px solid var(--hb-border-strong);color:#fff;background:transparent;
  display:flex;align-items:center;justify-content:center;transition:all .18s var(--hb-ease)}
.hbx .wp-tick svg{width:.95rem;height:.95rem;opacity:0;transition:opacity .18s var(--hb-ease)}
.hbx .wp-single{align-self:flex-start;margin-top:1rem;padding-top:.9rem;
  border-top:1px solid var(--hb-border);width:100%;
  font-family:var(--hb-font-head);font-weight:600;font-size:.85rem;color:var(--hb-green-dark);
  transition:color .18s var(--hb-ease)}
.hbx .wp-single:hover{color:var(--hb-green-darker)}
/* selected state — driven by :has() and by the .on class hb.js adds for older engines */
.hbx .wp-card.on,.hbx .wp-card:has(.wp-check:checked){
  border-color:var(--hb-navy);box-shadow:0 0 0 3px rgba(29,57,106,.12),var(--hb-shadow)}
.hbx .wp-card.on .wp-tick,.hbx .wp-card:has(.wp-check:checked) .wp-tick{
  background:var(--hb-navy);border-color:var(--hb-navy)}
.hbx .wp-card.on .wp-tick svg,.hbx .wp-card:has(.wp-check:checked) .wp-tick svg{opacity:1}

.hbx .wp-next{
  display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;
  margin-top:2.8rem;padding:1.8rem 2rem;border-radius:var(--hb-radius);
  background:var(--hb-paper);border:1px solid var(--hb-border);
}
.hbx .wp-next h4{color:var(--hb-navy)}
.hbx .wp-next p{color:#4a5872;font-size:.95rem;margin-top:.35rem}
.hbx .wp-next-cta{display:flex;gap:.7rem;flex-wrap:wrap}

@media (max-width:960px){
  .hbx .wp-hero-grid{grid-template-columns:1fr}
  .hbx .wp-hero-art{display:none}
  .hbx .wp-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .hbx .wp-toolbar{position:static}
  .hbx .wp-next{flex-direction:column;align-items:flex-start}
}

/* ============================ reveal motion (CSS-only entrance) ============================ */
/* Content animates in on load via a CSS keyframe -- NO JavaScript needed to become visible.
   This renders in the Webflow Designer (CSS animations run there) and can never get stuck
   hidden if hb.js fails to load. hb.js still adds .is-visible; harmless, kept for compat. */
@keyframes hbReveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hbx .reveal{animation:hbReveal .7s var(--hb-ease) both}
.hbx .reveal.is-visible{opacity:1;transform:none}
.hbx .reveal-d1{animation-delay:.08s}
.hbx .reveal-d2{animation-delay:.16s}
.hbx .reveal-d3{animation-delay:.24s}
.hbx .reveal-d4{animation-delay:.32s}
.hbx .reveal-d5{animation-delay:.40s}

@media (prefers-reduced-motion:reduce){
  .hbx .reveal{opacity:1;transform:none;transition:none;animation:none}
  .hbx .strip,.hbx .float-card,.hbx .fc-badge,.hbx .strip::before{animation:none}
  .hbx .btn:hover{transform:none}
}

/* ============================ responsive ============================ */
@media (max-width:960px){
  :root{--hb-pad-x:1.5rem}
  .hbx .hero-grid,.hbx .signup-grid{grid-template-columns:1fr;gap:2.2rem}
  .hbx .hero-art{min-height:20rem;order:-1}
  .hbx .feature-grid,.hbx .product-grid{grid-template-columns:repeat(2,1fr)}
  .hbx .trust-grid{grid-template-columns:repeat(2,1fr);gap:1.6rem}
}
@media (max-width:600px){
  .hbx .feature-grid,.hbx .product-grid,.hbx .trust-grid{grid-template-columns:1fr}
  .hbx .form-grid{grid-template-columns:1fr}
  .hbx .field.col-2{grid-column:span 1}
  .hbx .hero-cta{flex-direction:column;align-items:stretch}
  .hbx .hero-cta .btn{width:100%}
}

/* =============================================================================
   PREVIEW-ONLY  (nav + footer stand-ins). NOT part of the Webflow embed.
   On the real page, Webflow's own nav + footer components are used instead.
   ============================================================================= */
.pv-body{margin:0;background:#fff}
.pv-nav-outer{position:sticky;top:0;z-index:99;padding:1rem 0;background:transparent}
.pv-nav{
  max-width:80rem;margin:0 auto;padding:.75rem 1rem .75rem 1.5rem;
  background-image:linear-gradient(#162a4dcc,#0e251fcc);backdrop-filter:blur(6px);
  border-radius:500px;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  box-shadow:0 12px 30px rgba(14,37,31,.25);
}
.pv-nav .pv-brand{font-family:'aktiv-grotesk','Inter',sans-serif;font-weight:700;color:#fff;font-size:1.15rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.5rem}
.pv-nav .pv-brand .lg{width:1.9rem;height:1.9rem;border-radius:7px;background:linear-gradient(140deg,#7eccb9,#41a48c);display:flex;align-items:center;justify-content:center;color:#0e251f;font-weight:800;font-size:1rem}
.pv-nav .pv-links{display:flex;align-items:center;gap:.35rem}
.pv-nav .pv-links a{font-family:'aktiv-grotesk','Inter',sans-serif;color:#fff;font-weight:600;font-size:.92rem;padding:.55rem .8rem;border-radius:8rem;transition:background .2s}
.pv-nav .pv-links a:hover{background:rgba(255,255,255,.12)}
.pv-nav .pv-cta{background:#fff;color:#162a4d;padding:.55rem 1.1rem;border-radius:8rem;font-weight:700;font-family:'aktiv-grotesk','Inter',sans-serif;font-size:.9rem}
.pv-nav .pv-login{border:2px solid rgba(255,255,255,.5);color:#fff;padding:.5rem 1rem;border-radius:8rem;font-weight:600;font-family:'aktiv-grotesk','Inter',sans-serif;font-size:.9rem}
.pv-navnote{max-width:80rem;margin:.5rem auto 0;padding:0 1.5rem;font-size:.7rem;color:#9aa7bd;font-style:italic;font-family:'Noto Sans',sans-serif}

.pv-footer{background:#1d396a;color:#fff;padding:4rem 0 2rem}
.pv-footer .wrap{max-width:80rem;margin:0 auto;padding:0 2.5rem}
.pv-footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem}
.pv-footer .fbrand{font-family:'aktiv-grotesk','Inter',sans-serif;font-weight:700;font-size:1.3rem}
.pv-footer .fbrand p{font-family:'Noto Sans',sans-serif;font-weight:400;font-size:.9rem;color:#aec4e6;margin-top:.7rem;max-width:20rem}
.pv-footer h5{font-family:'Noto Sans',sans-serif;font-weight:600;font-size:.95rem;margin:0 0 1rem;color:#fff}
.pv-footer a{display:block;color:#c3d2ea;font-size:.9rem;padding:.3rem 0;text-decoration:none}
.pv-footer a:hover{color:#fff}
.pv-footer .fbottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.15);font-size:.85rem;color:#aec4e6;flex-wrap:wrap}
@media (max-width:900px){
  .pv-nav .pv-links{display:none}
  .pv-footer .fgrid{grid-template-columns:1fr 1fr;gap:2rem}
}