/* ============================================================
   Be Health — public site
   Palette comes from CSS variables injected by the layout from
   Admin → Theme & site. No build step: plain CSS, served as-is.
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream,#F6EFE0);
  color:var(--ink,#22352A);
  font-family:"Figtree","Avenir Next","Segoe UI",system-ui,sans-serif;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  font-weight:600;letter-spacing:-.01em;
}
a{color:var(--forest,#4A7150)}
img,svg{max-width:100%}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.narrow{max-width:600px}
.muted{color:color-mix(in srgb, var(--ink) 62%, var(--cream))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* checkout: a compact one-line summary of what's being bought */
.co-summary{display:flex;align-items:center;gap:12px;border:1px solid var(--hairline);
  border-radius:14px;overflow:hidden;margin-bottom:18px;background:#fff;padding:8px 14px 8px 8px}
.co-summary-img{flex:0 0 48px;width:48px;height:48px;border-radius:10px;overflow:hidden;background:var(--sage)}
.co-summary-img img{width:100%;height:100%;object-fit:cover;display:block}
.co-summary-body{flex:1;min-width:0}
.co-summary-body h2{margin:0;font-size:1rem;font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-summary-sub{font-size:.8rem;color:color-mix(in srgb, var(--ink) 60%, #fff)}
.co-summary-price{flex:0 0 auto}
.co-summary-price strong{font-size:1.2rem;font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1}

/* checkout: cart add-ons list under the main summary */
.co-addons{border:1px solid var(--hairline);border-radius:14px;padding:12px 16px;margin-bottom:18px;background:#fff}
.co-addons-head{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:color-mix(in srgb, var(--ink) 55%, #fff);margin-bottom:8px}
.co-addons-row{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;padding:5px 0;color:var(--ink)}
.co-addons-total{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--hairline);margin-top:6px;padding-top:9px;font-size:1rem}
.co-addons-total strong{font-family:"Fraunces",Georgia,serif}

/* checkout: collapsible offer code */
.offer-toggle{margin:14px 0 4px;border:1px solid var(--hairline);border-radius:12px;padding:0}
.offer-toggle summary{list-style:none;cursor:pointer;padding:12px 16px;font-weight:600;font-size:.9rem;
  color:var(--forest);display:flex;align-items:center;gap:8px}
.offer-toggle summary::-webkit-details-marker{display:none}
.offer-toggle summary::before{content:"＋";font-weight:700}
.offer-toggle[open] summary::before{content:"−"}
.offer-toggle[open] summary{border-bottom:1px solid var(--hairline)}
.offer-toggle>input{margin:0 16px 16px;width:calc(100% - 32px)}
.mt{margin-top:24px}

/* ---------- announcement ---------- */
.announce{
  background:var(--forest,#4A7150);color:var(--cream,#F6EFE0);
  text-align:center;font-size:.86rem;padding:9px 16px;letter-spacing:.02em;
}

/* ---------- header + megamenu ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.site-header>.wrap{display:flex;align-items:center;gap:8px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.25rem;
  color:var(--ink);text-decoration:none;font-family:"Fraunces",Georgia,serif;margin-right:20px}
.brand svg{width:34px;height:34px}

nav.main{display:flex;align-items:center;gap:2px;flex:1}
nav.main>.navitem{position:relative}
nav.main>.navitem>a,nav.main>.navitem>button{
  display:block;padding:10px 14px;color:var(--ink);text-decoration:none;
  font-weight:600;font-size:.94rem;background:none;border:none;cursor:pointer;
  font-family:inherit;border-radius:10px;
}
nav.main>.navitem>a:hover,nav.main>.navitem>button:hover{background:color-mix(in srgb, var(--sage) 45%, transparent)}

.mega{
  position:absolute;left:50%;transform:translateX(-50%) translateY(8px);top:100%;
  min-width:560px;background:#fff;border-radius:20px;
  border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow:0 24px 60px -12px rgba(34,53,42,.25);
  padding:26px;display:grid;grid-template-columns:200px 1fr;gap:22px;
  opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;
}
.navitem:hover .mega,.navitem:focus-within .mega{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.mega .intro h4{margin:0 0 6px;font-size:1.05rem}
.mega .intro p{margin:0 0 14px;font-size:.86rem;color:color-mix(in srgb, var(--ink) 60%, #fff)}
.mega .intro a{font-size:.88rem;font-weight:600}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega ul a{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-size:.92rem;
}
.mega ul a:hover{background:color-mix(in srgb, var(--sage) 40%, #fff)}
.mega ul .price{font-weight:700;font-size:.85rem;color:var(--forest);white-space:nowrap}
.mega .all{margin-top:8px;border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent);padding-top:10px}

.header-actions{display:flex;align-items:center;gap:10px}
.header-actions a{text-decoration:none;font-weight:600;font-size:.93rem;color:var(--ink)}
.btn{
  display:inline-block;background:var(--forest,#4A7150);color:#fff;border:none;cursor:pointer;
  padding:13px 28px;border-radius:999px;font-weight:600;font-size:1rem;text-decoration:none;
  font-family:"Figtree",system-ui,sans-serif;transition:transform .15s ease,box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px color-mix(in srgb, var(--forest) 60%, transparent)}
.btn.light{background:var(--cream);color:var(--forest)}
.btn.ghost{background:transparent;color:var(--forest);border:1.5px solid var(--forest)}
.btn.ghost:hover{background:color-mix(in srgb, var(--forest) 8%, transparent);box-shadow:none}
.btn.small{padding:8px 18px;font-size:.88rem}
.btn.teal{background:var(--teal)}

.mobile-nav,.mobile-lang-switch{display:none}
@media(max-width:900px){
  nav.main{display:none}
  .header-actions{display:none}

  /* quick language switch, sits to the left of the hamburger */
  .mobile-lang-switch{display:block;position:relative;margin-left:auto}
  .mobile-lang-switch summary{
    list-style:none;cursor:pointer;font-weight:700;font-size:.9rem;letter-spacing:.02em;
    display:flex;align-items:center;gap:4px;padding:8px 10px;border-radius:999px;
    color:var(--ink);
  }
  .mobile-lang-switch summary::-webkit-details-marker{display:none}
  .mobile-lang-switch[open] summary svg{transform:rotate(180deg)}
  .mobile-lang-switch>div{
    position:absolute;right:0;top:calc(100% + 6px);background:#fff;z-index:70;
    border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);border-radius:14px;
    padding:6px;min-width:130px;box-shadow:0 20px 34px -18px rgba(34,53,42,.35);display:grid;gap:2px;
  }
  .mobile-lang-switch a{display:block;padding:9px 12px;border-radius:9px;text-decoration:none;
    color:var(--ink);font-weight:600;font-size:.92rem}
  .mobile-lang-switch a.on{background:color-mix(in srgb, var(--mint) 30%, transparent)}

  .mobile-nav{display:block;margin-left:8px}
  .mobile-nav summary{list-style:none;cursor:pointer;padding:6px 2px;display:flex;align-items:center;color:var(--ink)}
  .mobile-nav summary::-webkit-details-marker{display:none}
  .mobile-nav[open] summary{opacity:.6}
  .mobile-nav>div{
    position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    padding:18px 24px;display:grid;gap:4px;box-shadow:0 30px 40px -20px rgba(34,53,42,.3);
    max-height:calc(100dvh - 72px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .mobile-nav a{display:block;padding:10px 4px;text-decoration:none;color:var(--ink);font-weight:600}

  .mobile-submenu{border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent)}
  .mobile-submenu summary{
    list-style:none;cursor:pointer;padding:10px 4px;font-weight:600;color:var(--ink);
    display:flex;align-items:center;justify-content:space-between;
  }
  .mobile-submenu summary::-webkit-details-marker{display:none}
  .mobile-submenu summary::after{content:'+';font-weight:400;color:color-mix(in srgb, var(--ink) 62%, var(--cream))}
  .mobile-submenu[open] summary::after{content:'–'}
  .mobile-submenu>div{display:grid;padding:0 0 8px 12px}
  .mobile-submenu>div>a{padding:8px 4px;font-weight:500}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:88px 0 96px}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero{padding:56px 0 64px}}
.hero h1{
  font-size:clamp(2.4rem,5.6vw,4.1rem);line-height:1.06;margin:0 0 22px;
  font-weight:560;text-wrap:balance;
}
.hero h1 em{font-style:italic;color:var(--forest)}
.hero p.lede{font-size:1.18rem;max-width:54ch;margin:0 0 30px;color:color-mix(in srgb, var(--ink) 78%, var(--cream))}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .note{font-size:.85rem;margin-top:16px}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;z-index:1;pointer-events:none}
.blob.b1{width:480px;height:480px;background:var(--sage);top:-140px;right:-80px}
.blob.b2{width:380px;height:380px;background:var(--teal);bottom:-160px;right:22%;opacity:.35}
.blob.b3{width:300px;height:300px;background:var(--mint);top:30%;left:-120px;opacity:.4}

/* hero visual card stack */
.hero-visual{position:relative;min-height:360px}
.hcard{
  position:absolute;background:#fff;border-radius:18px;padding:18px 20px;
  box-shadow:0 18px 44px -14px rgba(34,53,42,.28);
  border:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  font-size:.9rem;
}
.hcard h5{margin:0 0 8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;
  color:color-mix(in srgb, var(--ink) 55%, #fff);font-family:"Figtree",sans-serif;font-weight:700}
.hcard.c1{top:6%;left:4%;width:62%}
.hcard.c2{top:38%;right:0;width:58%}
.hcard.c3{bottom:4%;left:10%;width:56%}
@media(max-width:900px){.hero-visual{display:none}}
.mrow{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent);font-variant-numeric:tabular-nums}
.mrow:last-child{border:none}
.mrow .ok{color:var(--forest);font-weight:700}
.mrow .hi{color:#B05E62;font-weight:700}
.spark{height:44px;display:flex;align-items:flex-end;gap:5px}
.spark i{flex:1;background:var(--mint);border-radius:3px 3px 0 0}
.spark i.t{background:var(--teal)}
.avatar-row{display:flex;align-items:center;gap:12px}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--sage);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--forest)}
.joinbtn{display:inline-block;margin-top:10px;background:var(--forest);color:#fff;border-radius:999px;padding:7px 16px;font-size:.82rem;font-weight:600;text-decoration:none}

/* ---------- stat band ---------- */
.stats{background:var(--forest);color:var(--cream);padding:40px 0}
.stats .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px;text-align:center}
.stats b{display:block;font-size:2.3rem;font-family:"Fraunces",Georgia,serif;font-weight:600;font-variant-numeric:tabular-nums}
.stats span{font-size:.9rem;opacity:.85}

/* ---------- sections ---------- */
section.block{padding:76px 0}
section.block.tint{background:color-mix(in srgb, var(--sage) 38%, var(--cream))}
section.block.deep{background:var(--forest);color:var(--cream)}
.eyebrow{
  font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  color:var(--teal);margin:0 0 10px;font-family:"Figtree",sans-serif;
}
.deep .eyebrow{color:var(--mint)}
h2.title{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:0 0 14px;text-wrap:balance;font-weight:560;line-height:1.15}
.section-head{max-width:640px;margin-bottom:40px}
.section-head p{color:color-mix(in srgb, var(--ink) 70%, var(--cream));margin:0}
.deep .section-head p{color:color-mix(in srgb, var(--cream) 80%, transparent)}
.split-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.split-head .section-head{margin-bottom:0}

.grid{display:grid;gap:20px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid.cols-4{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

.card{
  background:#fff;border:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius:20px;padding:26px;
  box-shadow:0 2px 4px rgba(34,53,42,.04),0 14px 34px -18px rgba(34,53,42,.14);
}

/* category showcase */
.cat-card{
  border-radius:24px;padding:34px 28px;min-height:230px;display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink);position:relative;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -18px rgba(34,53,42,.3)}
.cat-card h3{font-size:1.5rem;margin:0 0 8px;font-weight:560}
.cat-card p{margin:0 0 14px;font-size:.94rem;max-width:34ch;color:color-mix(in srgb, var(--ink) 75%, transparent)}
.cat-card .go{margin-top:auto;font-weight:700;font-size:.9rem}
.cat-card.women{background:linear-gradient(135deg,var(--sage),color-mix(in srgb, var(--sage) 40%, #fff))}
.cat-card.men{background:linear-gradient(135deg,var(--mint),color-mix(in srgb, var(--mint) 35%, #fff))}
.cat-card.everyone{background:linear-gradient(135deg,var(--teal),color-mix(in srgb, var(--teal) 30%, #fff))}
.cat-card.plans{background:linear-gradient(135deg,color-mix(in srgb, var(--forest) 82%, #fff),var(--forest));color:var(--cream)}
.cat-card.plans p{color:color-mix(in srgb, var(--cream) 82%, transparent)}
.cat-card .count{
  position:absolute;top:22px;right:24px;font-size:.75rem;font-weight:700;
  background:color-mix(in srgb, #fff 60%, transparent);border-radius:999px;padding:4px 12px;
}
.cat-card.plans .count{background:color-mix(in srgb, #fff 22%, transparent)}

/* how it works */
.how{counter-reset:step;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;position:relative}
.how .step{position:relative;padding:26px 26px 26px 0}
.how .step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:"Fraunces",Georgia,serif;font-size:2.6rem;font-weight:560;
  color:var(--teal);display:block;margin-bottom:10px;line-height:1;
}
.how .step h3{margin:0 0 8px;font-size:1.12rem}
.how .step p{margin:0;font-size:.93rem;color:color-mix(in srgb, var(--ink) 68%, var(--cream))}
.how .step::after{
  content:"";position:absolute;top:44px;right:20px;left:auto;width:calc(100% - 84px);
  height:1.5px;background:color-mix(in srgb, var(--teal) 45%, transparent);
}
.how .step:last-child::after{display:none}
@media(max-width:640px){.how .step::after{display:none}}

/* package cards */
.pkg{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);
  transition:transform .2s ease,box-shadow .2s ease}
.pkg:hover{transform:translateY(-4px);box-shadow:0 22px 44px -16px rgba(34,53,42,.25)}
.pkg .cat{align-self:flex-start;font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;padding:4px 13px;border-radius:999px;font-family:"Figtree",sans-serif}
.pkg .cat.mens{background:color-mix(in srgb, var(--mint) 55%, #fff);color:var(--forest)}
.pkg .cat.womens{background:color-mix(in srgb, var(--sage) 70%, #fff);color:var(--forest)}
.pkg .cat.unisex{background:color-mix(in srgb, var(--teal) 40%, #fff);color:var(--forest)}
.pkg .cat.kids{background:#F0E6C9;color:#77661F}
.pkg .cat.services{background:color-mix(in srgb, var(--forest) 14%, #fff);color:var(--forest)}
.pkg h3{margin:2px 0;font-size:1.22rem;line-height:1.3;font-weight:560}
.pkg.pkg-hover .pkg-reveal{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .3s ease,opacity .25s ease}
.pkg.pkg-hover:hover .pkg-reveal,.pkg.pkg-hover:focus-visible .pkg-reveal{max-height:120px;opacity:1}
.pkg .desc{color:color-mix(in srgb, var(--ink) 64%, #fff);font-size:.9rem;margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pkg .meta{display:flex;gap:14px;font-size:.83rem;color:color-mix(in srgb, var(--ink) 58%, #fff);flex-wrap:wrap}
.pkg .meta span{display:flex;align-items:center;gap:5px}
.pkg .bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:12px;
  border-top:1px solid color-mix(in srgb, var(--ink) 8%, transparent)}
.pkg .price{font-weight:700;font-size:1.3rem;font-family:"Fraunces",Georgia,serif}
.pkg .price small{font-weight:500;font-size:.82rem;color:color-mix(in srgb, var(--ink) 55%, #fff);font-family:"Figtree",sans-serif}
.pkg .go{font-weight:700;font-size:.88rem;color:var(--forest)}

/* filter chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 34px}
.chips a{
  padding:9px 22px;border-radius:999px;border:1.5px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background:transparent;color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:600;
  transition:all .15s ease;
}
.chips a:hover{border-color:var(--forest)}
.chips a.on{background:var(--forest);border-color:var(--forest);color:var(--cream)}

/* biomarker categories strip */
.marker-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.marker-cat{background:color-mix(in srgb, #fff 55%, transparent);border-radius:16px;padding:18px;
  border:1px solid color-mix(in srgb, var(--ink) 8%, transparent)}
.marker-cat b{display:block;margin-bottom:4px;font-size:.95rem}
.marker-cat span{font-size:.8rem;color:color-mix(in srgb, var(--ink) 60%, var(--cream))}
.deep .marker-cat{background:color-mix(in srgb, #fff 10%, transparent);border-color:color-mix(in srgb, #fff 16%, transparent)}
.deep .marker-cat b{color:var(--cream)}
.deep .marker-cat span{color:color-mix(in srgb, var(--cream) 65%, transparent)}

/* FAQ */
details.faq{border-bottom:1px solid color-mix(in srgb, var(--ink) 14%, transparent);padding:6px 0}
details.faq summary{
  padding:18px 40px 18px 0;font-weight:600;font-size:1.06rem;cursor:pointer;list-style:none;
  position:relative;font-family:"Fraunces",Georgia,serif;
}
details.faq summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;color:var(--teal);font-family:"Figtree",sans-serif;transition:transform .2s;
}
details.faq[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details.faq .body{padding:0 0 20px;color:color-mix(in srgb, var(--ink) 72%, var(--cream));max-width:64ch}

/* CTA band */
.cta-band{
  background:linear-gradient(120deg,var(--forest),color-mix(in srgb, var(--forest) 70%, var(--teal)));
  color:var(--cream);border-radius:28px;padding:64px 48px;text-align:center;position:relative;overflow:hidden;
}
.cta-band h2{font-size:clamp(1.8rem,4vw,2.7rem);margin:0 0 14px;font-weight:560}
.cta-band p{margin:0 auto 28px;max-width:46ch;opacity:.88}

/* ---------- package detail ---------- */
.pkg-hero{padding:60px 0 44px;position:relative;overflow:hidden}
.pkg-hero .crumbs{font-size:.85rem;margin-bottom:18px}
.pkg-hero .crumbs a{text-decoration:none}
.pkg-hero h1{font-size:clamp(1.8rem,3.6vw,2.6rem);margin:0 0 16px;font-weight:560;line-height:1.1;max-width:20ch}
.pkg-hero .lede{font-size:1.1rem;max-width:56ch;color:color-mix(in srgb, var(--ink) 75%, var(--cream));white-space:pre-line}
.pkg-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:44px}
@media(max-width:860px){.pkg-hero-grid{grid-template-columns:1fr;row-gap:32px}}
.bento-2col{grid-template-columns:repeat(2,1fr)}
@media(min-width:1180px){.bento-2col{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.bento-2col{grid-template-columns:1fr}}
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start;padding-bottom:70px}
@media(max-width:900px){.detail-grid{grid-template-columns:1fr}.detail-grid .buybox{position:static}}
/* the buybox moved into the hero, so the details area is a single column */
.detail-grid--single{grid-template-columns:minmax(0,1fr);max-width:820px;padding-top:56px}
/* the booking card sitting in the hero (not sticky here) */
.pkg-hero-grid .buybox{position:static;top:auto}
/* featured image: full container width, rounded corners (lives inside .wrap) */
.pkg-image-band{width:100%;margin:0}
.pkg-image-band img{width:100%;height:auto;max-height:480px;object-fit:cover;display:block;border-radius:26px}

/* "What's measured": a clean stack of collapsible group rows instead
   of a dense multi-column card grid — collapsed shows the group name +
   marker count, expands to reveal every marker. */
.marker-accordion{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  border:1px solid var(--hairline)}
.marker-group{border-bottom:1px solid var(--hairline);background:#fff}
.marker-group:last-child{border-bottom:none}
.marker-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:18px 20px}
.marker-group>summary::-webkit-details-marker{display:none}
.marker-group .mg-name{font-weight:600;font-size:1.05rem;color:var(--ink);flex:1}
.marker-group .mg-count{font-size:.85rem;color:color-mix(in srgb, var(--ink) 60%, var(--cream));
  white-space:nowrap}
.marker-group .mg-chevron{color:color-mix(in srgb, var(--ink) 55%, var(--cream));display:flex;
  transition:transform .2s ease}
.marker-group[open] .mg-chevron{transform:rotate(180deg)}
.marker-group[open]>summary{background:color-mix(in srgb, var(--sage) 22%, #fff)}
.marker-group .mg-list{list-style:none;margin:0;padding:2px 20px 18px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:6px 24px}
@media(max-width:560px){.marker-group .mg-list{grid-template-columns:1fr}}
.marker-group .mg-list li{font-size:.92rem;color:color-mix(in srgb, var(--ink) 78%, var(--cream));
  padding:5px 0;border-bottom:1px dashed color-mix(in srgb, var(--ink) 8%, transparent)}
.buybox{position:sticky;top:88px}
.buybox .price{font-size:2.2rem;font-family:"Fraunces",Georgia,serif;font-weight:600}
.buybox .price small{font-size:.9rem;font-family:"Figtree",sans-serif;color:color-mix(in srgb, var(--ink) 55%, #fff)}
.includes{list-style:none;padding:0;margin:16px 0 20px}
.includes li{padding:8px 0 8px 30px;position:relative;font-size:.95rem;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 7%, transparent)}
.includes li:last-child{border:none}
.includes li::before{
  content:"";position:absolute;left:2px;top:14px;width:16px;height:16px;border-radius:50%;
  background:var(--mint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5 7 11l5-6' fill='none' stroke='%2322352A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}
details.group{
  background:#fff;border:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius:16px;margin-bottom:12px;overflow:hidden;
}
details.group summary{padding:16px 22px;font-weight:600;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center}
details.group summary .n{
  font-size:.78rem;background:color-mix(in srgb, var(--sage) 55%, #fff);
  border-radius:999px;padding:3px 12px;font-weight:700;color:var(--forest);
}
details.group .body{padding:0 22px 18px;color:color-mix(in srgb, var(--ink) 68%, #fff);font-size:.92rem}
.marker-list{columns:2;gap:30px;margin:0;padding-left:18px}
@media(max-width:640px){.marker-list{columns:1}}

/* journey progress */
.journey-bar{display:flex;gap:5px;margin:16px 0;flex-wrap:wrap}
.journey-bar span{flex:1 1 56px;height:9px;border-radius:5px;background:color-mix(in srgb, var(--ink) 10%, transparent)}
.journey-bar span.done{background:var(--forest)}
.journey-label{font-size:.87rem;color:color-mix(in srgb, var(--ink) 60%, var(--cream))}
.status-pill{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:color-mix(in srgb, var(--sage) 55%, #fff);border-radius:999px;padding:5px 14px;color:var(--forest);
  font-family:"Figtree",sans-serif;
}

/* forms */
label{display:block;font-weight:600;font-size:.9rem;margin:16px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],
input[type=tel],input[type=number],select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius:12px;font:inherit;background:#fff;color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:transparent}
textarea{min-height:90px}
.check{display:flex;gap:10px;align-items:flex-start;margin:12px 0;font-size:.92rem;font-weight:400}
.check input{margin-top:4px}
.error{color:#B05E62;font-size:.86rem;margin-top:5px}
.flash{
  background:var(--mint);color:var(--ink);padding:14px 20px;border-radius:14px;
  margin:20px 0;font-weight:600;
}

/* results table */
table.values{border-collapse:collapse;width:100%;font-size:.92rem;font-variant-numeric:tabular-nums}
table.values th,table.values td{text-align:left;padding:10px 12px;border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent)}
table.values th{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:color-mix(in srgb, var(--ink) 55%, #fff)}
.flag{font-weight:700}
.flag.low,.flag.borderline{color:#B98A2E}
.flag.high,.flag.critical{color:#B05E62}
.flag.normal{color:var(--forest)}

/* notifications */
.notif{padding:13px 0;border-bottom:1px solid color-mix(in srgb, var(--ink) 9%, transparent);font-size:.93rem;display:block}
.notif .when{color:color-mix(in srgb, var(--ink) 55%, #fff);font-size:.8rem;display:flex;align-items:center;gap:8px;margin-top:2px}
.notif.unread{font-weight:600}
a.notif-link{text-decoration:none;color:inherit;cursor:pointer;padding-left:12px;padding-right:12px;
  margin-left:-12px;margin-right:-12px;border-radius:12px;transition:background .15s ease}
a.notif-link:hover{background:color-mix(in srgb, var(--sage) 32%, transparent)}
.notif-go{color:var(--teal);font-weight:700}

/* account */
.account-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start}
@media(max-width:860px){.account-grid{grid-template-columns:1fr}.buybox{position:static}}
h1.page{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:44px 0 20px;font-weight:560}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:color-mix(in srgb, var(--cream) 78%, transparent);margin-top:90px;padding:60px 0 40px;font-size:.92rem}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
@media(max-width:820px){footer.site .cols{grid-template-columns:1fr 1fr}}
footer.site h5{color:var(--cream);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;margin:0 0 14px;font-family:"Figtree",sans-serif}
footer.site a{color:color-mix(in srgb, var(--cream) 78%, transparent);text-decoration:none;display:block;padding:4px 0}
footer.site a:hover{color:var(--cream)}
footer.site .brandline{display:flex;align-items:center;gap:10px;color:var(--cream);
  font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.3rem;margin-bottom:12px}
footer.site .fineprint{border-top:1px solid color-mix(in srgb, var(--cream) 15%, transparent);
  margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem;
  color:color-mix(in srgb, var(--cream) 55%, transparent)}

/* ---------- reveal animations ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}
  .reveal.d2{transition-delay:.16s}
  .reveal.d3{transition-delay:.24s}
  .hcard{animation:floaty 7s ease-in-out infinite}
  .hcard.c2{animation-delay:1.8s}
  .hcard.c3{animation-delay:3.4s}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
}

/* ---------- care-need cards (Midi-style: image, name, learn more) ---------- */
.need-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.need-card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border-radius:22px;overflow:hidden;
  background:#fff;border:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  transition:transform .2s ease,box-shadow .2s ease}
.need-card:hover{transform:translateY(-4px);box-shadow:0 24px 46px -18px rgba(34,53,42,.28)}
.need-card .visual{aspect-ratio:4/3;background:linear-gradient(135deg,var(--sage),var(--mint));
  display:flex;align-items:flex-end;padding:16px;position:relative}
.need-card:nth-child(3n) .visual{background:linear-gradient(135deg,var(--mint),var(--teal))}
.need-card:nth-child(3n+1) .visual{background:linear-gradient(135deg,var(--sage),color-mix(in srgb, var(--cream) 60%, var(--sage)))}
.need-card .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.need-card .visual .q{position:relative;z-index:2;font-family:"Fraunces",Georgia,serif;font-size:1.15rem;
  font-weight:560;color:var(--ink);background:color-mix(in srgb, var(--cream) 88%, transparent);
  padding:8px 14px;border-radius:12px;line-height:1.3}
.need-card .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.need-card .body h3{margin:0;font-size:1.25rem;font-weight:560}
.need-card .body p{margin:0;font-size:.9rem;color:color-mix(in srgb, var(--ink) 64%, #fff);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.need-card .learn{margin-top:auto;align-self:flex-start;border:1.5px solid var(--ink);border-radius:999px;
  padding:8px 22px;font-weight:600;font-size:.9rem}
.need-card:hover .learn{background:var(--ink);color:var(--cream)}

/* pill feature rows (DoHealth style) */
.pill-rows{display:flex;flex-direction:column;gap:14px}
.pill-row{display:grid;grid-template-columns:56px 200px 1fr;gap:20px;align-items:center;
  background:linear-gradient(120deg,color-mix(in srgb, var(--sage) 70%, #fff),color-mix(in srgb, var(--sage) 25%, #fff));
  border-radius:999px;padding:22px 34px}
.pill-row:nth-child(2){background:linear-gradient(120deg,color-mix(in srgb, var(--mint) 65%, #fff),color-mix(in srgb, var(--mint) 22%, #fff))}
.pill-row:nth-child(3){background:linear-gradient(120deg,color-mix(in srgb, var(--teal) 55%, #fff),color-mix(in srgb, var(--teal) 18%, #fff))}
.pill-row b{font-size:1.15rem;font-family:"Fraunces",Georgia,serif;font-weight:600}
.pill-row p{margin:0;font-size:.92rem;color:color-mix(in srgb, var(--ink) 74%, #fff)}
.pill-row .ic{width:44px;height:44px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center}
.pill-row .ic svg{width:22px;height:22px;stroke:var(--cream)}
@media(max-width:760px){.pill-row{grid-template-columns:44px 1fr;border-radius:28px}.pill-row p{grid-column:1/-1}}

/* ---- Testimonials & Careers: the generic "features" block reads badly as
   pills, so on these two pages we render the same items as clean cards. ---- */
.cms-page--testimonials .pill-rows,
.cms-page--careers .pill-rows{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;
}
.cms-page--testimonials .pill-row,
.cms-page--careers .pill-row{
  display:block;background:#fff;border:1px solid var(--hairline);
  border-radius:22px;padding:28px 30px;box-shadow:0 1px 2px rgba(20,32,25,.04);
}
.cms-page--testimonials .pill-row:nth-child(n),
.cms-page--careers .pill-row:nth-child(n){background:#fff}
.cms-page--testimonials .pill-row .ic,
.cms-page--careers .pill-row .ic{display:none}

/* Testimonials: quote first (serif, big), test name as a quiet attribution. */
.cms-page--testimonials .pill-row b{
  display:block;font-size:1.22rem;line-height:1.4;font-weight:500;color:var(--ink);
}
.cms-page--testimonials .pill-row p{
  margin:14px 0 0;font-size:.85rem;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--teal);
}

/* Careers: role title prominent, description below, left border accent. */
.cms-page--careers .pill-row{border-left:4px solid var(--mint)}
.cms-page--careers .pill-row b{
  display:block;font-size:1.25rem;line-height:1.25;color:var(--ink);
}
.cms-page--careers .pill-row p{margin:10px 0 0;font-size:.95rem;line-height:1.55}

/* ---- Team: tall photo cards with a frosted-glass info overlay ---- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:8px}
.team-card{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/5;
  background:var(--sage);display:flex;align-items:flex-end}
.team-card .team-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.team-card.no-photo{align-items:center;justify-content:center}
.team-card .team-initial{font-family:"Fraunces",Georgia,serif;font-size:4rem;font-weight:600;
  color:color-mix(in srgb, var(--forest) 70%, #fff)}
.team-card .team-info{position:relative;z-index:2;width:calc(100% - 24px);margin:12px;
  background:rgba(20,32,25,.42);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:16px 18px;color:#fff}
.team-card.no-photo .team-info{background:rgba(20,32,25,.7)}
.team-card .team-info h3{margin:0;font-size:1.15rem;font-weight:600;color:#fff}
.team-card .team-info .role{margin:4px 0 0;font-size:.86rem;font-weight:600;color:rgba(255,255,255,.9)}
.team-card .team-info .bio{margin:8px 0 0;font-size:.85rem;line-height:1.45;color:rgba(255,255,255,.82)}
@media(max-width:520px){.team-grid{grid-template-columns:1fr}}

/* icon helpers (no emojis) */
.ico{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;vertical-align:-3px;margin-right:6px}

/* photo hero (when a hero image is set in Theme settings) */
.hero.photo{padding:0;min-height:0;display:block}
.hero.photo .bg{position:absolute;inset:0;z-index:0}
.hero.photo .bg img{width:100%;height:100%;object-fit:cover}
/* Overlay removed at the client's request — see the .hero-card note
   below. This older selector is kept neutralized so no dark wash
   survives from either rule. */
.hero.photo .bg::after{content:none}
.hero.photo h1,.hero.photo p.lede{color:var(--hero-text)}
.hero.photo h1 em{color:var(--hero-accent)}
.hero.photo .note{color:var(--hero-text-soft)}

/* CMS page blocks */
.cms-hero{padding:80px 0;position:relative;overflow:hidden}
.cms-hero.with-img{min-height:480px;display:flex;align-items:flex-end;padding:0}
.cms-hero.with-img .bg{position:absolute;inset:0}
.cms-hero.with-img .bg img{width:100%;height:100%;object-fit:cover}
.cms-hero.with-img .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,32,25,.15),rgba(20,32,25,.55))}
.cms-hero.with-img .wrap{position:relative;z-index:2;padding-top:120px;padding-bottom:70px;color:#fff}
.cms-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);margin:0 0 14px;font-weight:560;max-width:20ch}
.cms-prose{max-width:68ch;font-size:1.04rem}
.cms-prose img{border-radius:18px}
.imgtext{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.imgtext img{border-radius:24px;width:100%;object-fit:cover;aspect-ratio:4/3}
@media(max-width:800px){.imgtext{grid-template-columns:1fr}}

/* header logo image */
.brand img{height:40px;width:auto;display:block}

/* account niceties */
.doc-row{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:13px 0;border-bottom:1px solid color-mix(in srgb, var(--ink) 9%, transparent);font-size:.94rem}
.doc-row:last-child{border:none}

/* ============ v4: premium scale-up ============ */
body{font-size:17.5px}
.wrap{max-width:1240px}
section.block{padding:110px 0}
h2.title{font-size:clamp(1.6rem,3vw,2.3rem)}
.section-head{max-width:720px;margin-bottom:52px}
.section-head p{font-size:1.08rem}
.hero{padding:110px 0 120px}
.hero h1{font-size:clamp(2.2rem,6vw,4.8rem)}
@media(max-width:640px){.hero{padding:56px 0 64px}}
.stats{padding:56px 0}
.stats b{font-size:2.9rem}
.btn.xl{padding:18px 46px;font-size:1.12rem}
.cta-band{padding:90px 56px;border-radius:36px}
.card{border-radius:24px;padding:30px}
.need-card,.cat-card{border-radius:26px}

/* slot picker */
.slot-picker{margin:8px 0 4px}
.sp-days{display:flex;gap:9px;overflow-x:auto;padding:6px 2px 12px;scrollbar-width:thin}
.sp-day{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;
  border:1.5px solid color-mix(in srgb, var(--ink) 15%, transparent);border-radius:16px;
  background:#fff;padding:10px 15px;cursor:pointer;font-family:inherit;color:var(--ink);min-width:66px;
  transition:all .15s ease}
.sp-day small{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:color-mix(in srgb, var(--ink) 55%, #fff)}
.sp-day b{font-size:1.25rem;font-variant-numeric:tabular-nums}
.sp-day:hover:not(:disabled){border-color:var(--forest)}
.sp-day.on{background:var(--forest);border-color:var(--forest);color:#fff}
.sp-day.on small{color:color-mix(in srgb, var(--cream) 75%, transparent)}
.sp-day:disabled{opacity:.35;cursor:not-allowed}
.sp-slots{display:flex;flex-wrap:wrap;gap:9px;padding-top:6px;min-height:44px}
.sp-slot{border:1.5px solid color-mix(in srgb, var(--ink) 15%, transparent);border-radius:999px;
  background:#fff;padding:9px 20px;cursor:pointer;font-family:inherit;font-weight:600;font-size:.94rem;
  color:var(--ink);font-variant-numeric:tabular-nums;transition:all .15s ease}
.sp-slot:hover{border-color:var(--forest)}
.sp-slot.on{background:var(--forest);border-color:var(--forest);color:#fff}
.sp-hint{font-size:.9rem;margin:8px 0 0}

/* sliders */
.slider-wrap{position:relative}
.slider{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 22px;
  scrollbar-width:none}
.slider::-webkit-scrollbar{display:none}
.slider>*{flex:0 0 min(320px,82vw);scroll-snap-align:start}
.slider-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
.slider-nav button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);
  background:transparent;color:var(--ink);cursor:pointer;font-size:1.15rem;display:flex;
  align-items:center;justify-content:center;transition:all .15s ease}
.slider-nav button:hover{background:var(--ink);color:var(--cream)}

/* marquee */
.marquee{overflow:hidden;border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent);padding:20px 0;background:var(--cream)}
.marquee .track{display:flex;gap:0;width:max-content;animation:marquee 36s linear infinite}
.marquee span{font-family:"Fraunces",Georgia,serif;font-size:1.35rem;white-space:nowrap;padding:0 26px;
  color:color-mix(in srgb, var(--ink) 82%, var(--cream))}
.marquee i{color:var(--teal);font-style:normal;padding:0 4px}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee .track{animation:none}}

/* arch media section (DoHealth's big oval) */
.arch{position:relative;border-radius:48% 48% 26px 26px / 32% 32% 26px 26px;overflow:hidden;
  min-height:520px;display:flex;align-items:flex-end;justify-content:center}
.arch img,.arch video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arch::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,32,25,0) 30%,rgba(20,32,25,.55))}
.arch .quote{position:relative;z-index:2;color:#fff;font-family:"Fraunces",Georgia,serif;
  font-size:clamp(1.3rem,2.6vw,2rem);max-width:26ch;text-align:center;padding:0 24px 64px;font-weight:500;line-height:1.35}

/* audience strip (Women / Men / Kids) — fixed 3:4 portrait cards */
.aud-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.aud-card{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:3/4;display:flex;
  align-items:flex-end;text-decoration:none;color:#fff;transition:transform .2s ease}
/* on phones the four cards scroll horizontally and snap one per view */
@media(max-width:760px){
  .aud-scroll{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:0 0 4px;margin-right:calc(-1 * (50vw - 50%));scrollbar-width:none}
  .aud-scroll::-webkit-scrollbar{display:none}
  /* trailing spacer so the last card isn't flush to the screen edge */
  .aud-scroll::after{content:"";flex:0 0 24px}
  .aud-scroll .aud-card{flex:0 0 66%;scroll-snap-align:start}
  .aud-section{padding-top:48px !important;padding-bottom:56px !important}
  /* "How can we help?" — trim the big block bottom padding on phones */
  section.block#help{padding-top:28px !important;padding-bottom:24px !important}
}
.aud-card:hover{transform:translateY(-5px)}
.aud-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aud-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,32,25,0) 45%,rgba(20,32,25,.72))}
.aud-card .inner{position:relative;z-index:2;padding:26px;width:100%}
.aud-card h3{margin:0;font-size:1.6rem;font-weight:560;color:#fff}
.aud-card .go{font-weight:700;font-size:.9rem;border-bottom:1.5px solid rgba(255,255,255,.6);
  padding-bottom:2px;display:inline-block;margin-top:8px}

/* testimonials */
.testi{background:#fff;border-radius:26px;padding:32px;border:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  display:flex;flex-direction:column;gap:16px}
.testi p{margin:0;font-family:"Fraunces",Georgia,serif;font-size:1.12rem;line-height:1.5;font-style:italic}
.testi .who{display:flex;align-items:center;gap:12px;font-size:.9rem;margin-top:auto}
.testi .who .avatar{width:44px;height:44px;font-size:.95rem}
.testi .stars{color:var(--forest);letter-spacing:2px;font-size:.9rem}

/* upsell strip on package pages */
.pairs{background:color-mix(in srgb, var(--sage) 32%, var(--cream));border-radius:28px;padding:36px}
.pairs h2{margin-top:0}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-info{display:flex;flex-direction:column;gap:18px}
.contact-info .item{display:flex;gap:14px;align-items:flex-start}
.contact-info .item .ic{width:44px;height:44px;flex:none;border-radius:50%;background:var(--sage);
  display:flex;align-items:center;justify-content:center}
.contact-info .item .ic svg{width:20px;height:20px;stroke:var(--forest);fill:none;stroke-width:1.8}

/* inline CTA between sections */
.mini-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:#fff;border:1px solid color-mix(in srgb, var(--ink) 9%, transparent);border-radius:999px;
  padding:18px 18px 18px 34px;box-shadow:0 14px 34px -18px rgba(34,53,42,.16)}
.mini-cta b{font-family:"Fraunces",Georgia,serif;font-size:1.15rem;font-weight:560}
@media(max-width:640px){.mini-cta{border-radius:26px}}

/* ============ v5: Stitch "Vitality & Grace" system ============ */
:root{--hairline:#e2e7e3;--mintchip:#a4f1df}
body{background:var(--cream);letter-spacing:.005em}
h1,h2,h3{font-weight:500;letter-spacing:0}
.hero h1 em,em.acc{font-style:italic;color:inherit}

/* buttons: ink pills */
.btn{background:var(--ink);border-radius:999px;font-weight:600;letter-spacing:.01em}
.btn:hover{box-shadow:0 10px 24px -10px rgba(6,27,14,.5)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid color-mix(in srgb, var(--ink) 35%, transparent)}
.btn.ghost:hover{border-color:var(--ink);background:transparent}
.btn.light{background:#fff;color:var(--ink)}
.btn.mint{background:var(--mintchip);color:var(--ink)}

/* chip labels: "ACTIVE PROTOCOL" style */
.chiplabel{display:inline-block;background:var(--mintchip);color:var(--ink);font-size:.68rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;
  padding:6px 14px;margin-bottom:18px;font-family:"Hanken Grotesk",sans-serif}
.hero.photo .chiplabel{background:color-mix(in srgb, var(--mintchip) 88%, transparent)}

/* hairline card language */
.card,.need-card,.testi,details.group{border-color:var(--hairline);box-shadow:none}
.card:hover,.pkg:hover{box-shadow:0 18px 40px -22px rgba(6,27,14,.25)}
.eyebrow{color:var(--teal);letter-spacing:.18em}

/* header: white, hairline, dark CTA */
.site-header{background:color-mix(in srgb, #fff 88%, transparent);border-bottom:1px solid var(--hairline)}
.header-actions .btn.small:not(.ghost){background:var(--ink);padding:10px 22px}
.announce{background:var(--ink)}

/* care-need chip row under hero */
.chip-row{display:flex;gap:10px;overflow-x:auto;padding:22px 0;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip-row a{flex:0 0 auto;border:1px solid var(--hairline);background:#fff;border-radius:999px;
  padding:11px 24px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.93rem;
  transition:all .15s ease}
.chip-row a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* stats band: light mint, ink text */
.stats{background:var(--sage);color:var(--ink)}
.stats b{color:var(--ink)}
.stats span{color:color-mix(in srgb, var(--ink) 65%, var(--sage))}

/* bento grid */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bento{grid-template-columns:1fr}}
.bento>*{border-radius:22px;padding:28px;min-height:200px;position:relative;overflow:hidden;
  border:1px solid var(--hairline);background:#fff;display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink)}
.bento .span2{grid-column:span 2}
.bento .rows2{grid-row:span 2}
@media(max-width:560px){.bento .span2{grid-column:span 1}}
.bento .b-dark{background:var(--forest);color:#fff;border-color:transparent}
.bento .b-dark .muted,.bento .b-dark p{color:rgba(255,255,255,.72)}
.bento .b-mint{background:var(--mintchip);border-color:transparent}
.bento .b-soft{background:var(--sage);border-color:transparent}
.bento .b-photo{padding:0;justify-content:flex-end;min-height:300px}
.bento .b-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bento .b-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,27,14,0) 40%,rgba(6,27,14,.62))}
.bento .b-photo .inner{position:relative;z-index:2;padding:26px;color:#fff}
.bento .b-photo .inner h3{color:#fff}
/* top-right circle arrow: outline only, no filled background */
.bento .b-arrow{position:absolute;top:18px;right:18px;z-index:3;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1rem;background:transparent;
  border:1.5px solid color-mix(in srgb, currentColor 35%, transparent);transition:all .2s ease}
.bento .b-photo .b-arrow{color:#fff;border-color:rgba(255,255,255,.8)}
.bento a:hover .b-arrow{background:color-mix(in srgb, currentColor 12%, transparent)}
.bento .b-photo:hover .b-arrow{background:rgba(255,255,255,.18)}
.bento h3{margin:0 0 8px;font-size:1.35rem;font-weight:500}
.bento p{margin:0;font-size:.92rem;color:color-mix(in srgb, var(--ink) 62%, #fff);line-height:1.55}
.bento .foot{margin-top:auto;padding-top:16px;display:flex;justify-content:space-between;align-items:center;font-size:.9rem;font-weight:600}
.bento .count{font-size:.72rem;font-weight:700;letter-spacing:.08em;background:color-mix(in srgb, #fff 55%, transparent);
  border-radius:999px;padding:4px 12px;align-self:flex-start;margin-bottom:12px;text-transform:uppercase}
.bento .b-dark .count{background:rgba(255,255,255,.14);color:#fff}
.bento details{margin-top:12px}
.bento details summary{cursor:pointer;font-weight:600;font-size:.88rem;list-style:none}
.bento details summary::after{content:" +"}
.bento details[open] summary::after{content:" –"}
.bento details ul{columns:2;gap:20px;padding-left:16px;font-size:.85rem;margin:10px 0 0}
.bento .b-dark details ul{color:rgba(255,255,255,.85)}

/* insight cards (mint icon tiles) */
.insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.insight{border:1px solid var(--hairline);border-radius:20px;padding:26px;background:#fff}
.insight .tile{width:44px;height:44px;border-radius:12px;
  background:color-mix(in srgb, var(--mint) 55%, #fff);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.insight .tile svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.7}
.insight b{font-family:"EB Garamond",Georgia,serif;font-size:1.2rem;font-weight:500;display:block;margin-bottom:6px}
.insight p{margin:0;font-size:.9rem;color:color-mix(in srgb, var(--ink) 62%, #fff)}

/* journey band: dark, numbered circles */
.journey-band{background:var(--forest);color:#fff;border-radius:28px;padding:64px 48px;text-align:center}
.journey-band h2{color:#fff;margin:0 0 6px;font-size:clamp(1.6rem,3vw,2.3rem);font-weight:500}
.journey-band>p{color:rgba(255,255,255,.65);margin:0 auto 44px;max-width:52ch}
.journey-band.journey-band--light{
  background:#fff;color:var(--ink);border:1px solid var(--hairline);
}
.journey-band--light h2{color:var(--ink)}
.journey-band--light>p{color:color-mix(in srgb, var(--ink) 62%, #fff)}
.journey-band--light .num{border-color:color-mix(in srgb, var(--ink) 20%, transparent);
  background:color-mix(in srgb, var(--ink) 5%, transparent);color:var(--ink)}
.journey-band--light .js p{color:color-mix(in srgb, var(--ink) 58%, #fff)}
.journey-band--light .js.hot .num{background:var(--mintchip);color:var(--ink);border-color:transparent}
.journey-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px;position:relative}
.journey-steps .js{display:flex;flex-direction:column;align-items:center;gap:14px}
.journey-steps .num{width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;font-family:"EB Garamond",Georgia,serif;
  font-size:1.1rem;background:rgba(255,255,255,.05)}
.journey-steps .js.hot .num{background:var(--mintchip);color:var(--ink);border-color:transparent}
.journey-steps b{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.journey-steps p{margin:0;font-size:.85rem;color:rgba(255,255,255,.6);max-width:24ch}

/* how-it-works: hairline top columns, thin numbers */
.how .step{border-top:1px solid color-mix(in srgb, var(--ink) 18%, transparent);padding-top:22px;padding-right:34px}
.how .step::before{font-size:1rem;color:var(--teal);font-family:"Hanken Grotesk",sans-serif;
  font-weight:600;letter-spacing:.1em;margin-bottom:16px}
.how .step::after{display:none}

/* "what we actually look at" — icon-tile bento, lead card links to a real test */
.measure-section{background:color-mix(in srgb, var(--sage) 28%, var(--cream))}
.measure-bento{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.measure-bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.measure-bento{grid-template-columns:1fr}}
.measure-bento>a,.measure-bento>div{text-decoration:none;color:inherit}
.m-icon{width:46px;height:46px;border-radius:14px;background:color-mix(in srgb, var(--ink) 7%, transparent);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex:none}
.m-icon svg{width:22px;height:22px;stroke:var(--forest);fill:none;stroke-width:1.7}
.b-dark .m-icon{background:rgba(255,255,255,.14)}
.b-dark .m-icon svg{stroke:#fff}
.b-mint .m-icon,.b-soft .m-icon{background:rgba(255,255,255,.5)}
.measure-bento h3{font-size:1.15rem;margin-bottom:6px}
.measure-bento p{font-size:.88rem}

/* footer: near-black, 4 columns */
footer.site{background:var(--ink)}

/* trusted line */
.trusted{display:flex;align-items:center;gap:10px;font-size:.85rem;margin-top:18px;color:color-mix(in srgb, var(--ink) 62%, #fff)}
.hero.photo .trusted{color:rgba(255,255,255,.85)}
.trusted .dots{display:flex}
.trusted .dots span{width:26px;height:26px;border-radius:50%;background:var(--sage);
  border:2px solid #fff;margin-left:-8px;display:flex;align-items:center;justify-content:center;
  font-size:.6rem;font-weight:700;color:var(--forest)}
.trusted .dots span:first-child{margin-left:0}

/* account bento */
.acct-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:26px}
@media(max-width:900px){.acct-bento{grid-template-columns:1fr}}
.ring{--pct:75;width:130px;height:130px;border-radius:50%;
  background:conic-gradient(var(--teal) calc(var(--pct)*1%), color-mix(in srgb, var(--ink) 8%, transparent) 0);
  display:flex;align-items:center;justify-content:center;margin:10px auto}
.ring>div{width:104px;height:104px;border-radius:50%;background:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
.ring b{font-family:"EB Garamond",Georgia,serif;font-size:1.9rem;font-weight:500;line-height:1}
.ring small{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb, var(--ink) 55%, #fff)}
.dark-card{background:var(--forest);color:#fff;border-radius:22px;padding:26px;border:none}
.dark-card .muted{color:rgba(255,255,255,.65)}
.dark-card h2,.dark-card h3,.dark-card .title{color:#fff}

/* ============ v6: fixes + bento everywhere ============ */
/* header: the CTA pill uses the brand green (not heavy black); Log in
   and My account stay plain links; Log out is a subtle outline. */
.header-actions a.btn.small{background:var(--forest);color:#fff}
.header-actions a.btn.small:hover{background:color-mix(in srgb, var(--forest) 88%, #000)}
.header-actions form .btn{background:transparent;color:var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 30%, transparent)}

/* hero: align text to the grid like every other section; visual cards on the right */
.hero.photo .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;
  padding-top:120px;padding-bottom:90px}
@media(max-width:900px){.hero.photo .wrap{grid-template-columns:1fr}}
.hero.photo .hero-visual{display:block;min-height:400px}
@media(max-width:900px){.hero.photo .hero-visual{display:none}}
.hero.photo .hcard{border:none}

/* care-need bento: title-first, reveal on hover */
.needs-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:172px;gap:16px}
@media(max-width:980px){.needs-bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.needs-bento{grid-template-columns:1fr;grid-auto-rows:auto}}
.nb{position:relative;border-radius:22px;border:1px solid var(--hairline);background:#fff;
  padding:26px;min-height:170px;display:flex;flex-direction:column;justify-content:flex-end;
  text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .2s ease}
.nb:hover{transform:translateY(-4px)}
.nb.span2{grid-column:span 2}
/* taller photo tile — spans two rows so the image has room to breathe */
.nb.tall{grid-row:span 2}
@media(max-width:560px){.nb.span2{grid-column:span 1}.nb.tall{grid-row:auto;min-height:260px}}
.nb .face{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;justify-content:flex-end;
  transition:opacity .2s ease}
.nb h3{margin:0;font-size:1.45rem;font-weight:500}
.nb .arrow{position:absolute;top:20px;right:22px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid color-mix(in srgb, currentColor 30%, transparent);display:flex;align-items:center;
  justify-content:center;font-size:1rem;transition:all .25s ease;background:inherit}
.nb .more{position:absolute;inset:0;z-index:4;background:var(--forest);color:#fff;padding:26px;
  display:flex;flex-direction:column;justify-content:flex-end;opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility 0s linear .25s}
.nb .more b{font-family:"EB Garamond",Georgia,serif;font-size:1.3rem;font-weight:500;font-style:italic;margin-bottom:8px}
.nb .more p{margin:0;font-size:.87rem;color:rgba(255,255,255,.75);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nb:hover .more,.nb:focus-visible .more{opacity:1;visibility:visible;transition-delay:0s}
.nb:hover .arrow,.nb:focus-visible .arrow{color:#fff;background:var(--forest);border-color:rgba(255,255,255,.4)}
.nb.dark{background:var(--forest);color:#fff}
.nb.mint{background:var(--mintchip)}
.nb.soft{background:var(--sage)}
/* puzzle photo tile: featured image with a dark tint + white text */
.nb.photo{color:#fff;border-color:transparent}
.nb.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.nb.photo::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(16,24,20,.15) 30%,rgba(16,24,20,.72))}
.nb.photo .face,.nb.photo .arrow{color:#fff}
.nb.photo .arrow{border-color:rgba(255,255,255,.5)}
.nb.photo:hover .arrow{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6)}

/* promo strip: be:health be:nice be:you be:well */
.promo-strip{padding:76px 0;text-align:center}
.promo-strip .words{display:flex;justify-content:center;gap:clamp(14px,4vw,48px);flex-wrap:wrap;
  font-family:"EB Garamond",Georgia,serif;font-size:clamp(1.6rem,4.4vw,3rem);font-weight:500}
.promo-strip .words span{color:color-mix(in srgb, var(--ink) 28%, transparent);transition:color .3s ease}
.promo-strip .words span i{font-style:italic}
.promo-strip .words span.lit,.promo-strip .words span:hover{color:var(--ink)}
.promo-strip .words span b{color:var(--teal);font-weight:500}

/* quiz */
.quiz-shell{max-width:720px;margin:0 auto;padding:32px 24px 100px}
.quiz-step{display:none}
.quiz-step.on{display:block;animation:rise .35s ease}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.quiz-progress{display:flex;gap:6px;margin-bottom:34px}
.quiz-progress span{flex:1;height:5px;border-radius:3px;background:color-mix(in srgb, var(--ink) 10%, transparent)}
.quiz-progress span.done{background:var(--teal)}
.quiz-options{display:grid;gap:12px;margin-top:26px}
.quiz-options.cols{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.qopt{border:1px solid var(--hairline);border-radius:18px;background:#fff;padding:20px 24px;
  cursor:pointer;font-family:inherit;font-size:1.02rem;font-weight:600;color:var(--ink);
  text-align:left;transition:all .15s ease;display:flex;justify-content:space-between;align-items:center}
.qopt small{display:block;font-weight:400;font-size:.85rem;color:color-mix(in srgb, var(--ink) 58%, #fff);margin-top:3px}
.qopt:hover{border-color:var(--ink)}
.qopt.on{background:var(--ink);color:#fff}
.qopt.on small{color:rgba(255,255,255,.7)}
.quiz-back{background:none;border:none;color:var(--ink);cursor:pointer;font-family:inherit;
  font-weight:600;padding:0;margin-bottom:18px;opacity:.65}

/* how-it-works page icon circles */
.hiw-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px}
.hiw-cols .col small{color:var(--teal);font-weight:600;letter-spacing:.1em}
.hiw-cols .icirc{width:64px;height:64px;border-radius:50%;background:var(--mintchip);
  display:flex;align-items:center;justify-content:center;margin:16px 0 18px}
.hiw-cols .icirc svg{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:1.7}
.hiw-cols h3{margin:0 0 8px;font-size:1.2rem}
.hiw-cols p{margin:0;font-size:.92rem;color:color-mix(in srgb, var(--ink) 62%, #fff)}
.checkline{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.checkline .ci{width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:center}
.checkline .ci svg{width:17px;height:17px;stroke:var(--teal);fill:none;stroke-width:2}
.checkline b{display:block;font-family:"EB Garamond",Georgia,serif;font-size:1.15rem;font-weight:500}
.checkline p{margin:2px 0 0;font-size:.92rem;color:color-mix(in srgb, var(--ink) 62%, #fff)}

/* ============ v7: one consistent corner radius across the whole site ============ */
.card,.need-card,.cat-card,.aud-card,.testi,.insight,.bento>*,.nb,
.pairs,.journey-band,.cta-band,.dark-card,details.group,.mega{border-radius:28px}
.hcard,.qopt,.chip-row a,details.faq,table.values,.buybox{border-radius:18px}
.pkg,.b-photo,.b-dark,.b-mint,.b-soft{border-radius:28px}
.hero.photo .bg,.hero.photo .bg img{border-radius:0} /* full-bleed hero stays edge-to-edge */

/* promo headline in the hero: be:health · be:nice · be:you · be:well */
.hero-promo{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em .34em;font-size:clamp(1.8rem,3.6vw,3rem);margin-bottom:14px}
.hero-promo b{font-weight:600}
.hero-promo em{font-style:italic;color:var(--hero-accent)}
.hero-promo span{opacity:.4;font-size:.7em;font-family:"Hanken Grotesk",sans-serif;align-self:center}
@media(max-width:640px){.hero-promo span{display:none}}

/* ============ v8: flat header, inset rounded hero card, animated default bg ============ */

/* header: flat white, hairline only, no blur/tint; active link gets an underline */
.site-header{
  position:sticky;top:0;z-index:60;
  background:#fff;backdrop-filter:none;
  border-bottom:1px solid var(--hairline);
}
nav.main>.navitem>a,nav.main>.navitem>button{border-radius:0;padding:8px 16px;position:relative}
nav.main>.navitem>a:hover,nav.main>.navitem>button:hover{background:none;color:var(--teal)}
nav.main>.navitem>a.active,nav.main>.navitem>button.active{font-weight:700}
nav.main>.navitem>a.active::after,nav.main>.navitem>button.active::after{
  content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:2px;background:var(--ink);
}
.header-actions a.btn.small{border-radius:999px}
.header-actions form .btn{border-radius:999px}

/* hero: an inset full-bleed card with generous rounded corners and margin
   to the viewport edge, matching the approved reference layout */
.hero.photo{
  padding:14px 0 0 !important;min-height:0 !important;display:block !important;
}
/* hero background sits at container level — same width/gutter as the
   sections below it, not full-bleed to the screen edge.
   No vertical padding on the wrap — the card must sit tight under the menu. */
.hero.photo .wrap{display:block;padding-top:0;padding-bottom:0;margin-top:0}
.hero-card{
  position:relative;overflow:hidden;border-radius:32px;
  margin:0;min-height:55vh;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
@media(max-width:640px){
  .hero.photo{padding-top:16px}
  .hero-card{border-radius:22px}
}
.hero-card .bg{position:absolute;inset:0;z-index:0}
.hero-card .bg img,.hero-card .bg video,.hero-card .bg iframe{
  position:absolute;top:50%;left:50%;width:100%;height:100%;
  min-width:100%;min-height:100%;transform:translate(-50%,-50%);object-fit:cover;
}
.hero-card .bg iframe{width:177.78vh;height:56.25vw;min-width:100%;min-height:100%}
/* Overlay removed at the client's request — the hero photo shows with
   no dark cast. Legibility now depends on the uploaded photo being
   light enough for the white heading; if a darker photo is set later,
   reinstate a bottom gradient here. */
.hero-card .bg::after{content:none}
.hero-card .content{position:relative;z-index:2;padding:36px 32px 48px;max-width:820px;color:var(--hero-text)}
.hero-card .content .lede{color:var(--hero-text-soft);margin-left:auto;margin-right:auto}
.hero-card .content .trusted{justify-content:center;color:var(--hero-text-soft)}
.hero-card .content .cta-row{justify-content:center}
.hero-card h1{text-align:center}
@media(max-width:640px){.insights-section{padding:44px 0 20px !important}
  .chip-row{padding:18px 0}}
/* secondary page hero: shorter, content sits centered with even contrast
   (not flex-end like the homepage), since these headlines aren't always
   near the bottom of the image */
.hero-card--page{min-height:52vh;max-height:560px;align-items:center}
.hero-card--page .bg::after{
  background:linear-gradient(180deg,rgba(14,21,18,.58) 0%,rgba(14,21,18,.62) 60%,rgba(14,21,18,.7) 100%)}
.hero-card--page .content{padding:32px}
@media(max-width:640px){
  .hero-card--page{min-height:0;padding-top:0;padding-bottom:0;min-height:46vh}
}

@media(max-width:640px){
  .hero-card .content{padding:0 20px 44px}
  .hero-card h1{font-size:clamp(1.7rem,8vw,2.4rem)}
  .hero-card .hero-promo{font-size:clamp(1.5rem,7.5vw,2.2rem);gap:.2em .3em}
  .hero-card .lede{font-size:1rem;margin-bottom:20px}
  .hero-card .trusted{flex-direction:column;gap:6px;font-size:.78rem;text-align:center}
  .hero-card .cta-row{flex-direction:column;width:100%}
  .hero-card .cta-row .btn{width:100%;text-align:center}
}
.btn.hero-ghost{background:color-mix(in srgb, var(--hero-text) 16%, transparent);color:var(--hero-text);
  border:1px solid color-mix(in srgb, var(--hero-text) 50%, transparent);backdrop-filter:blur(2px)}
.btn.hero-ghost:hover{background:color-mix(in srgb, var(--hero-text) 26%, transparent);box-shadow:none}

/* animated gradient default background — used when no photo/video is set */
.hero-card .bg.animated{
  background:linear-gradient(120deg,var(--forest),var(--teal) 45%,var(--sage) 75%,var(--mintchip));
  background-size:300% 300%;animation:heroGradient 18s ease infinite;
}
@keyframes heroGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.hero-card .bg.animated::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 20% 30%, rgba(255,255,255,.14) 0, transparent 45%),
                    radial-gradient(circle at 80% 70%, rgba(255,255,255,.1) 0, transparent 40%);
}
@media (prefers-reduced-motion: reduce){.hero-card .bg.animated{animation:none}}

/* care-need page: clear separation between hero, packages and journey */
.pkg-hero-title{font-size:clamp(1.8rem,3.6vw,2.6rem);margin:0 0 16px;font-weight:560;line-height:1.1;max-width:22ch}
section.care-packages{padding:32px 0 64px;background:none}
section.care-packages .crumbs{margin:0 0 22px}
section.care-journey{padding:64px 0 90px}

/* ============ v9: language switch, deeper section spacing ============ */
.lang-switch{position:relative;margin-right:4px}
.lang-switch summary{
  list-style:none;cursor:pointer;font-weight:700;font-size:.82rem;letter-spacing:.04em;
  color:var(--ink);border-radius:999px;padding:7px 14px;
  display:flex;align-items:center;gap:4px;
}
.lang-switch summary::after{content:"⌄";font-size:.85em;opacity:.6}
.lang-switch[open] summary::after{content:"⌃"}
.lang-switch>div{
  position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--hairline);
  border-radius:14px;padding:6px;min-width:150px;box-shadow:0 20px 40px -16px rgba(14,21,18,.25);z-index:70;
}
.lang-switch>div a{
  display:block;padding:9px 12px;border-radius:9px;text-decoration:none;color:var(--ink);
  font-size:.92rem;font-weight:500;
}
.lang-switch>div a:hover{background:color-mix(in srgb, var(--sage) 45%, transparent)}
.lang-switch>div a.on{background:var(--ink);color:#fff;font-weight:700}

.mobile-lang{display:flex;gap:8px;flex-wrap:wrap;padding-top:14px;margin-top:10px;
  border-top:1px solid var(--hairline)}
.mobile-lang a{padding:7px 14px;border:1px solid var(--hairline);border-radius:999px;
  text-decoration:none;color:var(--ink);font-size:.85rem;font-weight:600}
.mobile-lang a.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- account shell (sidebar + pages) ---------- */
.acct-layout{display:grid;grid-template-columns:250px 1fr;gap:32px;align-items:start;padding-top:34px;padding-bottom:60px}
.acct-nav{position:sticky;top:96px;background:#fff;border-radius:20px;padding:18px 14px;
  border:1px solid color-mix(in srgb, var(--ink) 9%, transparent)}
.acct-me{display:flex;gap:12px;align-items:center;padding:6px 10px 16px;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 9%, transparent);margin-bottom:10px}
.acct-me b{display:block;line-height:1.2}
.acct-me small{font-size:.78rem}
.acct-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.acct-avatar.initial{display:flex;align-items:center;justify-content:center;background:var(--forest,#4A7150);
  color:var(--cream,#F6EFE0);font-weight:700;font-size:1.15rem}
.acct-nav nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;
  color:inherit;text-decoration:none;font-size:.95rem;margin-bottom:2px}
.acct-nav nav a svg{width:19px;height:19px;opacity:.7;flex:none}
.acct-nav nav a:hover{background:color-mix(in srgb, var(--forest) 8%, transparent)}
.acct-nav nav a.on{background:var(--forest,#4A7150);color:var(--cream,#F6EFE0);font-weight:600}
.acct-nav nav a.on svg{opacity:1}
.acct-badge{margin-left:auto;background:var(--coral,#E8927C);color:#fff;font-style:normal;font-size:.72rem;
  font-weight:700;min-width:20px;height:20px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.acct-logout{border-top:1px solid color-mix(in srgb, var(--ink) 9%, transparent);margin-top:10px;padding:10px 10px 0}
.acct-logout button{background:none;border:none;color:inherit;opacity:.65;cursor:pointer;font:inherit;font-size:.88rem;padding:0}
.acct-logout button:hover{opacity:1}
.acct-main{min-width:0}
.acct-main h1.page{margin-top:0}
.flash.ok{background:color-mix(in srgb, var(--forest) 14%, #fff);border:1px solid color-mix(in srgb, var(--forest) 30%, transparent);
  color:var(--ink);padding:12px 18px;border-radius:14px;margin-bottom:20px;font-size:.93rem}
@media(max-width:900px){
  .acct-layout{grid-template-columns:1fr;padding-top:20px}
  .acct-nav{position:static;padding:8px 0;background:transparent;border:none;box-shadow:none;
    overflow:hidden;min-width:0}
  .acct-me,.acct-logout{display:none}
  /* a clean horizontal scroll strip of pill tabs — the row scrolls
     inside its container instead of pushing the whole page wide */
  .acct-nav nav{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .acct-nav nav::-webkit-scrollbar{display:none}
  .acct-nav nav a{flex:0 0 auto;white-space:nowrap;padding:9px 14px;background:#fff;
    border:1px solid var(--hairline)}
  .acct-nav nav a svg{width:17px;height:17px}
  .acct-nav nav a .acct-badge{margin-left:6px}
}

/* order journey progress */
.journey{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.journey span{font-size:.74rem;padding:5px 11px;border-radius:99px;
  background:color-mix(in srgb, var(--ink) 6%, transparent);color:color-mix(in srgb, var(--ink) 60%, transparent)}
.journey span.done{background:color-mix(in srgb, var(--forest) 16%, transparent);color:var(--forest)}
.journey span.now{background:var(--forest);color:var(--cream);font-weight:600}

/* message thread */
.msg-thread{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.msg{max-width:72%;padding:12px 16px;border-radius:18px;font-size:.95rem;line-height:1.5}
.msg small{display:block;opacity:.6;font-size:.74rem;margin-top:5px}
.msg.mine{align-self:flex-end;background:var(--forest,#4A7150);color:var(--cream,#F6EFE0);border-bottom-right-radius:6px}
.msg.team{align-self:flex-start;background:#fff;border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);border-bottom-left-radius:6px}
.msg-form{display:flex;gap:10px;align-items:flex-end}
.msg-form textarea{flex:1;min-height:52px;resize:vertical}

/* profile avatar picker */
.avatar-pick{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.avatar-pick .acct-avatar{width:72px;height:72px;font-size:1.7rem}

/* upsell strip on overview */
.suggest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.suggest-grid{grid-template-columns:1fr}}
.suggest-grid .card h3{margin:.2rem 0 .35rem;font-size:1.05rem}
.suggest-grid .price{font-weight:700}

/* locations / team blocks */
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.loc-grid{grid-template-columns:1fr}}
.loc-grid .acct-avatar.initial{display:flex}

/* ---------- notification bell (header) ---------- */
.bell{position:relative;display:inline-flex;align-items:center;color:inherit;padding:4px}
.bell svg{width:21px;height:21px}
.bell-dot{position:absolute;top:-3px;right:-5px;background:var(--coral,#E8927C);color:#fff;font-style:normal;
  font-size:.64rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 4px}

/* ---------- calm overview ---------- */
.acct-h2{font-size:1.15rem;margin:34px 0 12px}
.next-step{background:var(--forest,#4A7150);color:var(--cream,#F6EFE0);border-radius:22px;
  padding:30px 32px;margin-top:8px}
.next-step .chip{display:inline-block;background:color-mix(in srgb, var(--cream) 18%, transparent);
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:99px}
.next-step h2{font-family:'EB Garamond',Georgia,serif;font-weight:500;font-size:1.9rem;margin:12px 0 4px}
.next-step .when{font-size:1.05rem;margin:0 0 4px;opacity:.92}
.next-step .text{opacity:.78;font-size:.94rem;max-width:52ch;margin:4px 0 0}
.next-step .btn{margin-top:18px}

.journey-row{display:flex;align-items:center;gap:16px;background:#fff;border-radius:16px;
  border:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  padding:14px 18px;margin-bottom:10px;text-decoration:none;color:inherit}
.journey-row:hover{border-color:color-mix(in srgb, var(--forest) 45%, transparent)}
.dot-track{display:flex;gap:4px;flex:none}
.dot-track i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb, var(--ink) 12%, transparent)}
.dot-track i.done{background:color-mix(in srgb, var(--forest) 55%, transparent)}
.dot-track i.now{background:var(--forest);transform:scale(1.5)}
.jr-body{min-width:0;flex:1}
.jr-body b{display:block;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr-body small{color:color-mix(in srgb, var(--ink) 55%, var(--cream));font-size:.8rem;text-transform:capitalize}
.jr-go{opacity:.4}
@media(max-width:640px){.dot-track{display:none}}

.two-up{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
@media(max-width:760px){.two-up{grid-template-columns:1fr}}
.quiet-link{display:inline-block;margin-top:10px;font-size:.88rem;font-weight:600;text-decoration:none}

.suggest{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.suggest b{font-size:1rem}
.suggest small{line-height:1.45}
.suggest-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px}
.suggest-foot .quiet-link{margin:0}
.offer-line{margin-top:22px;font-size:.9rem;color:color-mix(in srgb, var(--ink) 70%, var(--cream));
  border-left:3px solid var(--forest);padding-left:12px}

/* ============ polished sign-up funnel ============ */
.auth-flow{max-width:500px;margin:0 auto;padding:40px 24px 80px;min-height:60vh;
  display:flex;align-items:flex-start;justify-content:center}
.auth-flow--wide{max-width:600px}
.auth-card{width:100%;background:#fff;border:1px solid var(--hairline);border-radius:24px;
  padding:34px 32px;box-shadow:0 30px 60px -40px rgba(34,53,42,.35)}
@media(max-width:560px){.auth-card{padding:26px 20px;border-radius:20px}}

/* step indicator */
.auth-steps{display:flex;align-items:center;gap:0;margin-bottom:26px}
.auth-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;position:relative}
.auth-step::after{content:"";position:absolute;top:14px;left:50%;width:100%;height:2px;
  background:var(--hairline);z-index:0}
.auth-step:last-child::after{display:none}
.auth-step .dot{width:29px;height:29px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.8rem;font-weight:700;background:#fff;color:color-mix(in srgb, var(--ink) 40%, #fff);
  border:2px solid var(--hairline);position:relative;z-index:1}
.auth-step .lbl{font-size:.68rem;font-weight:600;letter-spacing:.02em;color:color-mix(in srgb, var(--ink) 45%, #fff);
  text-align:center}
.auth-step.on .dot{background:var(--forest);color:#fff;border-color:var(--forest)}
.auth-step.on .lbl{color:var(--ink)}
.auth-step.done .dot{background:color-mix(in srgb, var(--forest) 18%, #fff);color:var(--forest);border-color:var(--forest)}
.auth-step.done::after{background:var(--forest)}

.auth-head{margin-bottom:22px}
.auth-head h1{margin:0 0 6px;font-size:1.55rem;font-weight:500;font-family:"Fraunces",Georgia,serif}
.auth-head p{margin:0;font-size:.92rem;color:color-mix(in srgb, var(--ink) 62%, #fff);line-height:1.5}

.auth-form{display:flex;flex-direction:column;gap:16px}
.auth-form .field{display:flex;flex-direction:column;gap:6px}
.auth-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:460px){.auth-form .field-row{grid-template-columns:1fr}}
.auth-form label{font-weight:600;font-size:.9rem;color:var(--ink)}
.auth-form input,.auth-form select,.auth-form textarea{width:100%}
.auth-form .hint{font-size:.8rem;color:color-mix(in srgb, var(--ink) 55%, #fff)}
.auth-submit{margin-top:8px;width:100%;justify-content:center;text-align:center}

.auth-form .check{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;
  color:color-mix(in srgb, var(--ink) 72%, #fff);line-height:1.45;cursor:pointer}
.auth-form .check input{width:auto;margin-top:2px;flex:none}

.code-input{font-size:1.9rem !important;letter-spacing:.5em;text-align:center;font-weight:600;
  padding:16px 0 !important}

.auth-note.ok{background:color-mix(in srgb, var(--forest) 12%, #fff);
  border:1px solid color-mix(in srgb, var(--forest) 30%, transparent);color:var(--forest);
  padding:11px 16px;border-radius:12px;font-size:.9rem;margin-bottom:16px}

.auth-alt{margin:20px 0 0;text-align:center;font-size:.9rem;color:color-mix(in srgb, var(--ink) 60%, #fff)}
.auth-alt a{color:var(--forest);font-weight:600;text-decoration:none}

.auth-actions{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:16px}
.linkbtn{background:none;border:none;padding:0;cursor:pointer;font:inherit;font-size:.88rem;
  font-weight:600;color:var(--forest);text-decoration:none}
.linkbtn.muted{color:color-mix(in srgb, var(--ink) 55%, #fff);font-weight:500;text-decoration:underline}
.auth-skip{text-align:center;margin-top:16px}

.auth-divider{display:flex;align-items:center;gap:14px;margin:8px 0 2px;
  font-family:"Fraunces",Georgia,serif;font-size:1.1rem}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--hairline)}

/* smart "get the app" banner (mobile only, JS-shown) */
#app-banner{position:fixed;left:0;right:0;bottom:0;z-index:900;
  background:var(--ink);color:var(--cream);box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.app-banner-inner{display:flex;align-items:center;gap:12px;padding:12px 16px;
  max-width:600px;margin:0 auto}
.app-banner-icon{width:42px;height:42px;border-radius:11px;flex:none;object-fit:cover}
.app-banner-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.app-banner-text strong{font-size:.95rem}
.app-banner-text span{font-size:.78rem;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-banner-cta{flex:none;background:var(--mint);color:var(--ink);text-decoration:none;
  font-weight:700;font-size:.85rem;padding:9px 18px;border-radius:999px}
.app-banner-close{flex:none;background:none;border:none;color:var(--cream);opacity:.6;
  font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px}

/* cart button + drawer */
.cart-btn{position:relative;background:none;border:none;cursor:pointer;color:var(--ink);padding:6px;display:flex;align-items:center}
.cart-btn svg{width:23px;height:23px}
.cart-count{position:absolute;top:-2px;right:-4px;background:var(--forest);color:#fff;font-style:normal;
  font-size:.62rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.cart-drawer{position:fixed;inset:0;z-index:1000}
.cart-backdrop{position:absolute;inset:0;background:rgba(20,32,25,.45)}
.cart-panel{position:absolute;top:0;right:0;bottom:0;width:min(400px,92vw);background:var(--cream);
  box-shadow:-20px 0 60px -20px rgba(0,0,0,.4);display:flex;flex-direction:column;animation:cartIn .22s ease}
@keyframes cartIn{from{transform:translateX(100%)}to{transform:none}}
.cart-panel-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--hairline)}
.cart-panel-head strong{font-family:"Fraunces",Georgia,serif;font-size:1.2rem}
.cart-x{background:none;border:none;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--ink);opacity:.6}
.cart-items{flex:1;overflow-y:auto;padding:12px 22px}
.cart-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.cart-row-name{flex:1;font-weight:600;font-size:.95rem}
.cart-row-price{font-weight:600;font-family:"Fraunces",Georgia,serif}
.cart-row-x{background:none;border:none;font-size:1.3rem;color:color-mix(in srgb,var(--ink) 45%,#fff);cursor:pointer;line-height:1}
.cart-empty{padding:40px 22px;text-align:center;color:color-mix(in srgb,var(--ink) 55%,#fff);font-size:.92rem}
.cart-foot{padding:18px 22px;border-top:1px solid var(--hairline)}
.cart-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:1.05rem}
.cart-total-row strong{font-family:"Fraunces",Georgia,serif;font-size:1.4rem}
.cart-note{text-align:center;font-size:.78rem;color:color-mix(in srgb,var(--ink) 55%,#fff);margin:10px 0 0}

/* package page: "pairs well with" upsell — add-to-cart under each card */
.pair-item{display:flex;flex-direction:column}
.pair-add{margin-top:10px;width:100%;justify-content:center}

/* "How can we help" — horizontal snap-scrolling colour cards. It lives
   inside .wrap (which already insets it to the container gutter), so the
   first card starts at the normal container margin. Only the RIGHT side
   bleeds out to the screen edge so cards scroll off-screen. */
.help-scroll{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding:4px 0 10px;
  margin-right:calc(-1 * (50vw - 50%));scrollbar-width:none}
.help-scroll::-webkit-scrollbar{display:none}
/* trailing spacer so the last card isn't flush to the screen edge */
.help-scroll::after{content:"";flex:0 0 24px}
.help-card{position:relative;flex:0 0 auto;width:210px;min-height:150px;scroll-snap-align:start;
  border-radius:22px;padding:24px;display:flex;align-items:flex-end;text-decoration:none;
  color:var(--ink);transition:transform .2s ease}
.help-card:hover{transform:translateY(-4px)}
.help-card h3{margin:0;font-size:1.35rem;font-weight:500;line-height:1.2}
.help-card.b-mint{background:var(--mintchip)}
.help-card.b-soft{background:var(--sage)}
.help-card.b-dark{background:var(--forest);color:#fff}
.help-card .b-arrow{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  border:1px solid color-mix(in srgb, currentColor 30%, transparent);transition:all .2s ease}
.help-card.b-dark .b-arrow{border-color:rgba(255,255,255,.5)}
.help-card:hover .b-arrow{background:color-mix(in srgb, currentColor 12%, transparent)}
@media(max-width:560px){.help-card{width:170px;min-height:130px;padding:20px}.help-card h3{font-size:1.2rem}}

/* care page: image-left package rows */
.pkg-rows{display:flex;flex-direction:column;gap:14px}
.pkg-row{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--hairline);
  border-radius:18px;padding:14px;text-decoration:none;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.pkg-row:hover{transform:translateY(-2px);box-shadow:0 16px 30px -20px rgba(34,53,42,.35)}
.pkg-row-img{flex:0 0 88px;width:88px;height:88px;border-radius:14px;overflow:hidden;background:var(--sage)}
.pkg-row-img img{width:100%;height:100%;object-fit:cover;display:block}
.pkg-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.pkg-row-body strong{font-size:1.15rem;font-weight:500;font-family:"Fraunces",Georgia,serif}
.pkg-row-desc{font-size:.9rem;color:color-mix(in srgb, var(--ink) 62%, #fff);line-height:1.4}
.pkg-row-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.pkg-row-price{font-weight:700;font-family:"Fraunces",Georgia,serif;font-size:1.2rem}
@media(max-width:560px){
  .pkg-row{gap:12px;padding:12px}
  .pkg-row-img{flex-basis:64px;width:64px;height:64px}
  .pkg-row-body strong{font-size:1.02rem}
  .pkg-row-desc{display:none}
}

/* catalog: small quiz CTA card */
.quiz-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--forest);color:var(--cream);border-radius:18px;padding:18px 22px;
  text-decoration:none;max-width:520px}
.quiz-cta strong{display:block;font-size:1.05rem;font-weight:600}
.quiz-cta span{font-size:.9rem;opacity:.85}
.quiz-cta .quiz-cta-icon{flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}

/* uniform white package tiles with a cover image — shared by catalog +
   care pages (site/_pkg-tile.blade.php). Only the button is coloured. */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:22px}
.pkg-tile{display:flex;flex-direction:column;border-radius:20px;text-decoration:none;color:var(--ink);
  background:#fff;border:1px solid var(--hairline);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.pkg-tile:hover{transform:translateY(-4px);box-shadow:0 18px 34px -22px rgba(34,53,42,.35)}
.pkg-tile-img{display:block;aspect-ratio:16/10;background:var(--sage);overflow:hidden}
.pkg-tile-img img{width:100%;height:100%;object-fit:cover;display:block}
.pkg-tile-body{display:flex;flex-direction:column;padding:16px 18px}
.pkg-tile-markers{font-size:.8rem;color:color-mix(in srgb, var(--ink) 55%, #fff)}
.pkg-tile h3{margin:4px 0 0;font-size:1.15rem;font-weight:500;line-height:1.2}
.pkg-tile-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.pkg-tile-price{font-size:1.4rem;font-weight:600;font-family:"Fraunces",Georgia,serif}
.pkg-tile-btn{flex:0 0 auto;background:var(--forest);color:#fff;font-weight:600;font-size:.82rem;
  padding:8px 14px;border-radius:999px;white-space:nowrap;transition:background .2s ease}
.pkg-tile:hover .pkg-tile-btn{background:color-mix(in srgb, var(--forest) 88%, #000)}
@media(max-width:560px){.pkg-grid{grid-template-columns:1fr 1fr;gap:12px}.pkg-tile-body{padding:12px}.pkg-tile h3{font-size:1rem}.pkg-tile-price{font-size:1.15rem}.pkg-tile-btn{padding:7px 10px;font-size:.74rem}}

/* package hero right column: booking card + pairs-well-with under it */
.pkg-hero-side{display:flex;flex-direction:column;gap:18px}
.pairs-side{background:#fff;border:1px solid var(--hairline);border-radius:20px;padding:18px 20px}
.pairs-side .eyebrow{margin-bottom:10px}
.pair-side-item{padding:10px 0;border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent)}
.pair-side-item:last-child{border-bottom:none;padding-bottom:0}
.pair-side-link{display:flex;justify-content:space-between;gap:10px;align-items:center;
  text-decoration:none;color:var(--ink);font-weight:500;font-size:.95rem}
.pair-side-link b{font-family:"Fraunces",Georgia,serif;white-space:nowrap}
.pair-side-add{display:inline-block;margin-top:6px;font-size:.8rem;font-weight:600;color:var(--forest);
  text-decoration:none}
.pair-side-add:hover{text-decoration:underline}

/* buy card: inline Details + Book */
.buy-actions{display:flex;gap:10px;margin-top:4px}
.buy-actions .btn{flex:1;text-align:center;justify-content:center}
/* Details: a plain underlined text link, no border/pill */
.details-link{display:inline-block;background:none;border:none;padding:0;margin-top:12px;cursor:pointer;
  font:inherit;font-size:.9rem;font-weight:600;color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.details-link:hover{opacity:.75}

/* off-canvas "What's measured" panel */
.offcanvas{position:fixed;inset:0;z-index:1000}
.offcanvas-backdrop{position:absolute;inset:0;background:rgba(20,32,25,.45)}
.offcanvas-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,94vw);background:var(--cream);
  box-shadow:-20px 0 60px -20px rgba(0,0,0,.4);display:flex;flex-direction:column;animation:ocIn .22s ease}
@keyframes ocIn{from{transform:translateX(100%)}to{transform:none}}
.offcanvas-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;
  border-bottom:1px solid var(--hairline)}
.offcanvas-head strong{font-family:"Fraunces",Georgia,serif;font-size:1.2rem}
.offcanvas-x{background:none;border:none;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--ink);opacity:.6}
.offcanvas-body{flex:1;overflow-y:auto;padding:16px 22px}
.offcanvas-foot{padding:16px 22px;border-top:1px solid var(--hairline)}

/* checkout: two-panel split — cover image left, booking form right */
.checkout-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:calc(100vh - 72px);max-width:100%;overflow-x:hidden}
.checkout-photo{background-size:cover;background-position:center;min-height:320px}
.checkout-form-side{background:#fff;display:flex;justify-content:center;overflow-y:auto;min-width:0}
.checkout-inner{width:100%;max-width:520px;padding:48px 40px 60px;box-sizing:border-box}
.checkout-head{padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--hairline)}
.checkout-head .co-summary-sub{display:block;font-size:.8rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--forest);margin-bottom:6px}
.checkout-head h1{font-size:1.5rem;font-weight:560;margin:0;line-height:1.2}
.checkout-price{font-family:"Fraunces",Georgia,serif;font-size:1.9rem;font-weight:600;margin-top:8px}
.checkout-form-side label{display:block;font-weight:600;font-size:.9rem;margin:16px 0 6px}
.checkout-form-side input,.checkout-form-side select{width:100%;box-sizing:border-box}
/* selected lab address + directions */
.lab-address{margin-top:12px;background:var(--sage);border-radius:12px;padding:12px 14px;
  display:flex;flex-direction:column;gap:6px}
.lab-address-text{font-size:.9rem;color:var(--ink)}
.lab-address-dir{font-size:.85rem;font-weight:600;color:var(--forest);text-decoration:none;align-self:flex-start}
.lab-address-dir:hover{text-decoration:underline}
@media(max-width:900px){
  /* single column, no cover image on mobile — keeps the page short */
  .checkout-split{grid-template-columns:1fr;min-height:0}
  .checkout-photo{display:none}
  .checkout-inner{padding:24px 18px 48px}
}

/* ===== checkout wizard ===== */
.wiz-progress{display:flex;gap:6px;margin:18px 0 22px}
.wiz-progress span{flex:1;height:4px;border-radius:2px;background:var(--hairline)}
.wiz-progress span.on{background:var(--forest)}
/* JS drives step visibility via the [hidden] attribute (set on all but the
   first in the markup, so there's no flash if JS is slow). */
.wiz-step{animation:wizIn .25s ease}
.wiz-step[hidden]{display:none !important}
/* .btn sets display:inline-block, which outranks the [hidden] attribute's
   default display:none — so hidden wizard buttons need this to actually hide. */
.wiz-foot .btn[hidden]{display:none !important}
@keyframes wizIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wiz-h{font-size:1.15rem;font-weight:560;margin:0 0 14px}
.wiz-foot{display:flex;gap:10px;margin-top:24px}
.field-bad{border-color:var(--danger,#c0392b) !important}
/* selection chips under the header */
.checkout-selection{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sel-chip{background:var(--mintchip);color:var(--ink);border-radius:999px;padding:5px 12px;
  font-size:.82rem;font-weight:600}
/* month calendar */
.cal{border:1px solid var(--hairline);border-radius:16px;padding:14px;background:#fff}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-head strong{text-transform:capitalize;font-size:1rem}
.cal-nav{background:none;border:1px solid var(--hairline);border-radius:8px;width:32px;height:32px;
  cursor:pointer;font-size:1.1rem;color:var(--ink);line-height:1}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}
.cal-weekdays span{text-align:center;font-size:.68rem;font-weight:600;color:var(--muted,#8a978f);text-transform:uppercase}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-day{aspect-ratio:1;border:none;background:none;border-radius:50%;cursor:pointer;font-size:.9rem;
  color:var(--ink);display:flex;align-items:center;justify-content:center}
.cal-day:disabled{opacity:.25;cursor:default}
.cal-day.free{background:color-mix(in srgb,var(--mintchip) 60%,#fff);font-weight:600}
.cal-day.on{background:var(--forest);color:#fff;font-weight:700}
.cal-times{display:flex;flex-wrap:wrap;gap:8px}
.cal-time{padding:10px 14px;border-radius:12px;border:1.5px solid var(--hairline);background:#fff;
  cursor:pointer;font-weight:600;font-size:.9rem;color:var(--ink)}
.cal-time.on{background:var(--forest);color:#fff;border-color:var(--forest)}

/* quiz: bundle (book together) alternatives */
.quiz-bundle{display:flex;flex-direction:column;gap:8px}
.qbundle{display:flex;align-items:center;gap:12px;border:1.5px solid var(--hairline);border-radius:14px;
  padding:12px 14px;cursor:pointer}
.qbundle:has(.qbundle-cb:checked){border-color:var(--forest);background:color-mix(in srgb,var(--mintchip) 40%,#fff)}
.qbundle-cb{width:20px;height:20px;flex:0 0 auto}
.qbundle-name{display:flex;flex-direction:column;font-weight:600}
.qbundle-name small{font-weight:400;color:color-mix(in srgb,var(--ink) 60%,#fff);font-size:.82rem;margin-top:2px}

/* ============ Portal: clean sans headings (no marketing serif here) ======
   The shared site layout sets a display SERIF on h1/h2/h3 for the marketing
   pages. Inside the account area we want the calm, app-like sans instead —
   scoped so the public site keeps its identity. */
.acct-layout h1,.acct-layout h2,.acct-layout h3,.acct-layout .title,.acct-layout .page,
.acct-layout .next-step h2,.acct-layout .acct-h2,.acct-layout .ring b{
  font-family:"Figtree","Avenir Next",system-ui,sans-serif!important;letter-spacing:-.01em}
.acct-layout h1.page{font-weight:700}
.acct-layout .next-step h2{font-weight:700;letter-spacing:-.02em}

/* ============ Portal order chat (matches the mobile app) ============ */
.ochat{max-width:680px;margin:0 auto}
.ochat-head{margin-bottom:6px}
.ochat-head .back{font-size:.9rem}
.ochat-head h1{margin:10px 0 3px;font-size:clamp(1.4rem,3.2vw,1.9rem);line-height:1.15;font-weight:700;text-wrap:balance}
.ochat-head .sub{color:color-mix(in srgb,var(--ink) 58%,#fff);font-size:.86rem;margin:0}

/* journey: slim bar + a short word under each step */
.ojourney{margin:18px 0 26px}
.ojourney-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.ojourney-top b{font-size:.82rem;letter-spacing:.01em}
.ojourney-top .pct{font-size:.8rem;font-weight:700;color:var(--forest);font-variant-numeric:tabular-nums}
.ojourney-bar{display:flex;gap:4px}
.ojourney-bar i{flex:1;height:6px;border-radius:3px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden;position:relative}
.ojourney-bar i.on{background:var(--forest)}
.ojourney-bar i.done-all{background:var(--teal,#1FA79B)}
/* the CURRENT step — half-filled + a gentle moving shimmer, so it clearly
   reads as "in progress, not finished yet" rather than complete. */
.ojourney-bar i.doing{background:linear-gradient(90deg,var(--forest) 0%,var(--forest) 50%,color-mix(in srgb,var(--forest) 22%,transparent) 50%,color-mix(in srgb,var(--forest) 22%,transparent) 100%)}
.ojourney-bar i.doing::after{content:"";position:absolute;inset:0;width:40%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 55%,transparent),transparent);
  animation:ojshimmer 1.8s ease-in-out infinite}
@keyframes ojshimmer{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@media(prefers-reduced-motion:reduce){.ojourney-bar i.doing::after{animation:none}}
.ojourney-steps{display:flex;margin-top:6px}
.ojourney-steps span{flex:1;text-align:center;font-size:.72rem;font-weight:600;
  color:color-mix(in srgb,var(--ink) 48%,#fff)}
.ojourney-steps span.reached{color:var(--ink)}
.ojourney-steps span.active{color:var(--forest);font-weight:700}
.ojourney.cancelled .ojourney-bar i{background:color-mix(in srgb,#C2412F 40%,#fff)}
.ojourney.cancelled .ojourney-top b{color:#C2412F}

/* single-column conversation — the chat leads, nothing competes beside it */
.ochat-body{display:block}
.omain{display:flex;flex-direction:column}

/* bubbles — roomy, so package names never wrap awkwardly */
.obubble{display:flex;gap:10px;align-items:flex-end;margin-bottom:12px;max-width:100%}
.obubble .ava{width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--hairline);background:#fff}
/* a real lab logo is contained (never cropped); the fallback is a monogram */
.obubble img.ava{object-fit:contain;padding:3px;background:#fff}
.obubble .ava.mono{background:var(--forest);color:#fff;font-weight:700;font-size:.8rem;
  letter-spacing:-.02em;border-color:transparent;font-family:"Figtree",sans-serif}
.obubble .msg{background:#fff;border:1px solid var(--hairline);border-radius:18px;
  border-bottom-left-radius:6px;padding:13px 16px;font-size:1rem;line-height:1.5;
  max-width:82%;box-shadow:0 1px 2px rgba(20,32,27,.03)}
.obubble .msg strong{font-weight:700}
.obubble .cal{display:inline-block;margin-top:10px;font-size:.84rem;font-weight:700;color:var(--forest);
  text-decoration:underline;text-underline-offset:2px}

/* supportive note: info icon, tinted card, NO logo — aligns under the bubbles */
.onote{display:flex;gap:9px;margin:0 0 12px 44px;max-width:calc(82% + 0px);
  background:color-mix(in srgb,var(--forest) 7%,#fff);border-radius:14px;padding:11px 14px}
.onote svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px;color:var(--forest);opacity:.9}
.onote p{margin:0;font-size:.9rem;line-height:1.5;color:color-mix(in srgb,var(--ink) 70%,#fff)}
.onote p strong{color:var(--ink)}

/* the primary action sits right under the conversation, aligned to the bubbles */
.oactions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px 44px}
.oactions form{margin:0}
.oactions .btn{padding:13px 30px}

/* results card — compact, flagged-first, expandable (like the app) */
.ocard{background:#fff;border:1px solid var(--hairline);border-radius:16px;padding:16px 18px;margin-bottom:14px}
.ocard h3{margin:0 0 4px;font-size:1rem}
.ocard .rhead{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.ocard .pill{font-size:.72rem;font-weight:700;border-radius:999px;padding:3px 10px;
  background:color-mix(in srgb,var(--forest) 12%,#fff);color:var(--forest)}
.ocard .pill.flag{background:color-mix(in srgb,#C2412F 12%,#fff);color:#B05E62}
.ocard details{margin-top:10px}
.ocard details summary{cursor:pointer;font-weight:600;font-size:.88rem;color:var(--forest);list-style:none}
.ocard details summary::-webkit-details-marker{display:none}
.ocard details summary::after{content:" ↓";font-size:.8rem}
.ocard details[open] summary::after{content:" ↑"}

/* collapsible "Order details" — closed by default, calm when open */
.odetails{margin-top:14px;border:1px solid var(--hairline);border-radius:16px;background:#fff;overflow:hidden}
.odetails>summary{display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;padding:15px 18px;font-weight:600;font-size:.95rem;list-style:none}
.odetails>summary::-webkit-details-marker{display:none}
.odetails>summary .chev{width:18px;height:18px;transition:transform .2s ease;color:var(--ink);opacity:.5}
.odetails[open]>summary .chev{transform:rotate(180deg)}
.odetails-body{padding:0 18px 18px;display:flex;flex-direction:column;gap:16px;
  border-top:1px solid var(--hairline);padding-top:16px}
.od-h{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:color-mix(in srgb,var(--ink) 50%,#fff);margin:0 0 7px;font-weight:700}
.odetails .includes{margin:0;padding-left:18px}
.odetails .includes li{margin-bottom:4px;font-size:.92rem}

/* ============ Portal: orders list rows + in-range stat ============ */
/* Order rows reuse .dot-track from the home journey rows. */
.order-row{display:flex;align-items:center;gap:16px;background:#fff;border-radius:16px;
  border:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  padding:14px 18px;margin-bottom:10px;text-decoration:none;color:inherit}
.order-row:hover{border-color:color-mix(in srgb, var(--forest) 45%, transparent)}
.or-body{min-width:0;flex:1}
.or-body b{display:block;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.or-body small{color:color-mix(in srgb, var(--ink) 55%, var(--cream));font-size:.8rem}
.or-go{opacity:.4}
.dot-track.cancelled i{background:color-mix(in srgb,#C2412F 35%,#fff)!important;transform:none!important}

/* slim in-range bar — replaces the .ring donut */
.range-stat{margin-top:4px}
.range-top{display:flex;align-items:baseline;gap:8px}
.range-top b{font-size:1.6rem;font-weight:600;line-height:1;color:var(--forest)}
.range-top .muted{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.range-bar{height:6px;border-radius:4px;background:color-mix(in srgb,var(--ink) 10%,transparent);
  margin-top:8px;overflow:hidden}
.range-bar i{display:block;height:100%;border-radius:4px;background:var(--forest)}

/* ============ Portal order thread (real two-way chat on the order) ======= */
.othread{display:flex;flex-direction:column;gap:10px;margin:8px 0 14px}
.othread-msg{display:flex;max-width:82%}
.othread-msg.me{align-self:flex-end}
.othread-msg.them{align-self:flex-start;gap:10px;align-items:flex-end}
.othread-msg .ava{width:30px;height:30px;flex:0 0 auto;font-size:.72rem}
.othread-msg .ot-name{display:block;font-size:.72rem;font-weight:600;color:var(--forest);margin:0 0 3px 2px}
.ot-bubble{padding:11px 15px;font-size:.96rem;line-height:1.45;border-radius:18px}
.othread-msg.me .ot-bubble{background:var(--forest);color:#fff;border-bottom-right-radius:6px}
.othread-msg.them .ot-bubble{background:color-mix(in srgb,var(--ink) 5%,#fff);border:1px solid var(--hairline);
  color:var(--ink);border-bottom-left-radius:6px}

/* compose bar — pinned feel at the bottom of the conversation */
.ot-compose{display:flex;gap:8px;align-items:center;margin-top:8px;
  background:#fff;border:1px solid var(--hairline);border-radius:999px;padding:6px 6px 6px 18px}
.ot-compose input{flex:1;border:0;background:transparent;font-size:.98rem;font-family:inherit;
  color:var(--ink);outline:none;padding:8px 0}
.ot-compose input::placeholder{color:color-mix(in srgb,var(--ink) 45%,#fff)}
.ot-compose button{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:var(--forest);color:#fff;display:grid;place-items:center;transition:transform .12s ease}
.ot-compose button:hover{transform:scale(1.06)}
.ot-compose button svg{width:19px;height:19px}

/* ============ Portal: professional vertical rhythm between sections ====== */
/* Generous, consistent spacing so the account pages breathe. */
.acct-main .page{margin-top:0;margin-bottom:14px}
.acct-main .next-step{margin-bottom:0}
.acct-main .acct-h2{margin-top:80px;margin-bottom:20px}
.acct-main .two-up{margin-top:80px}
.acct-main .suggest-grid{margin-top:24px}
.acct-main .offer-line{margin-top:56px}
/* the order chat page: clear separation before results / details / thread */
.omain .title{margin-top:56px}
.othread{margin-top:40px}
.odetails{margin-top:40px}
@media(max-width:640px){
  .acct-main .acct-h2,.acct-main .two-up{margin-top:52px}
  .omain .title,.othread,.odetails{margin-top:36px}
}

/* ============ Portal: compact appointments rows ============ */
.appt-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:#fff;border:1px solid var(--hairline);border-radius:14px;padding:14px 18px;margin-bottom:8px}
.appt-row.past{opacity:.82}
.appt-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.appt-main b{font-size:.98rem}
.appt-sub{font-size:.84rem;color:color-mix(in srgb,var(--ink) 55%,#fff);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46ch}
.appt-side{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.appt-when{font-size:.88rem;color:color-mix(in srgb,var(--ink) 60%,#fff);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.appt-status{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,#fff);
  color:color-mix(in srgb,var(--ink) 55%,#fff)}
.appt-status.done{background:color-mix(in srgb,var(--forest) 14%,#fff);color:var(--forest)}
.appt-status.cancelled,.appt-status.no_show{background:color-mix(in srgb,#C2412F 12%,#fff);color:#B05E62}
.appt-empty{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--hairline);border-radius:14px;padding:16px 18px;margin-bottom:8px}
@media(max-width:560px){
  .appt-row{flex-direction:column;align-items:flex-start;gap:8px}
  .appt-side{width:100%;justify-content:space-between}
}

/* ============ Portal smart-chat: in-bubble buttons, invoice, booking ===== */
/* action chips inside a bubble */
.obtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.obtns form{margin:0}
.obtn{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:.92rem;border-radius:999px;padding:10px 18px;
  text-decoration:none;transition:transform .12s ease,box-shadow .12s ease}
.obtn.primary{background:var(--ink);color:#fff}
.obtn.primary:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(6,27,14,.5)}
.obtn.ghost{background:transparent;color:var(--ink);border:1.5px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.obtn.ghost:hover{border-color:var(--ink)}

/* wide bubble for results (needs room for the table) */
.msg-wide{max-width:100%!important;width:100%}
.msg-wide .title{margin-top:0!important}
.msg-wide .ocard{border:0;padding:0;margin:0}
.msg-wide .ocard + .ocard{margin-top:14px;border-top:1px solid var(--hairline);padding-top:14px}

/* invoice bubble */
.oinvoice{max-width:100%!important}
.oinv-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.oinv-head svg{width:26px;height:26px;color:var(--forest);flex:0 0 auto}
.oinv-head b{display:block;font-size:1rem}
.oinv-head .muted{font-size:.9rem}

/* inline booking panel (opens under a chip) */
.obook{background:#fff;border:1px solid var(--hairline);border-radius:16px;padding:18px;
  margin:2px 0 18px 44px;max-width:calc(82% + 0px)}
.obook-lbl{display:block;font-size:.8rem;font-weight:600;margin:0 0 7px}
.obook-lbl:not(:first-child){margin-top:16px}
.obook-select{width:100%;padding:11px 12px;border:1.5px solid var(--hairline);
  border-radius:12px;font-family:inherit;font-size:.95rem;background:#fff}

/* ============ Calendar-grid picker (like the app) ============ */
.calpick{margin-top:6px}
.calpick-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.calpick-month{font-size:.98rem;font-weight:700}
.calpick-nav{border:1px solid var(--hairline);background:#fff;border-radius:10px;
  width:34px;height:34px;font-size:1.3rem;line-height:1;cursor:pointer;color:var(--ink)}
.calpick-nav:hover{border-color:var(--forest);color:var(--forest)}
.calpick-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.calpick-dow span{text-align:center;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:color-mix(in srgb,var(--ink) 45%,#fff)}
.calpick-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.calpick-day{aspect-ratio:1;border:0;background:color-mix(in srgb,var(--ink) 4%,#fff);
  border-radius:10px;font-family:inherit;font-size:.9rem;font-weight:600;color:var(--ink);
  cursor:pointer;transition:background .12s ease}
.calpick-day:hover:not(:disabled){background:color-mix(in srgb,var(--forest) 16%,#fff)}
.calpick-day:disabled{opacity:.3;cursor:default;background:transparent}
.calpick-day.on{background:var(--forest);color:#fff}
.calpick-times{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.calpick-hint{font-size:.85rem;margin:0}
.calpick-time{border:1px solid var(--hairline);background:#fff;border-radius:10px;
  padding:8px 14px;font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer;color:var(--ink)}
.calpick-time:hover{border-color:var(--forest)}
.calpick-time.on{background:var(--forest);color:#fff;border-color:var(--forest)}

/* the calendar "Add to calendar" chip gets a small icon now */
.obubble .cal{display:inline-flex;align-items:center;gap:6px}
.obubble .cal svg{width:15px;height:15px}
@media(max-width:640px){.obook,.onote{margin-left:0;max-width:100%}}

/* ============ Portal chat timeline: day separators + timestamps ========== */
.ochat-daysep{display:flex;align-items:center;justify-content:center;margin:18px 0 12px}
.ochat-daysep span{font-size:.72rem;font-weight:600;letter-spacing:.02em;
  color:color-mix(in srgb,var(--ink) 48%,#fff);
  background:color-mix(in srgb,var(--ink) 5%,#fff);border-radius:999px;padding:4px 12px}
/* inline timestamp on bot event bubbles */
.obubble .msg time.ot-time{display:block;margin-top:6px;font-size:.7rem;
  color:color-mix(in srgb,var(--ink) 42%,#fff);font-variant-numeric:tabular-nums}
/* timestamp inside message bubbles */
.ot-bubble time{display:block;margin-top:4px;font-size:.66rem;opacity:.7;
  font-variant-numeric:tabular-nums;text-align:right}
.othread-msg.them .ot-bubble time{text-align:left;color:color-mix(in srgb,var(--ink) 42%,#fff)}

/* ============ Portal chat: results heading, join hint/countdown ========= */
/* Results heading inside the chat bubble — modest, not a page title. */
.ores-h{font-size:1.05rem;font-weight:700;margin:0 0 12px}
/* small description under the Join button (moved in from a note bubble) */
.ojoin-hint{font-size:.82rem;color:color-mix(in srgb,var(--ink) 55%,#fff);margin:9px 0 0;line-height:1.4}
/* Join countdown button — live state pulses gently when it's time */
.obtn.ojoin.live{background:var(--forest);box-shadow:0 0 0 0 color-mix(in srgb,var(--forest) 55%,transparent);
  animation:ojoinpulse 2s ease-out infinite}
@keyframes ojoinpulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--forest) 45%,transparent)}
  70%{box-shadow:0 0 0 10px color-mix(in srgb,var(--forest) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--forest) 0%,transparent)}
}
@media(prefers-reduced-motion:reduce){.obtn.ojoin.live{animation:none}}

/* ============ Offers: campaign strip, struck prices, badges ============ */
.campaign-strip{background:var(--ink);color:var(--cream,#F6EFE0);text-align:center;
  padding:9px 16px;font-size:.88rem;font-weight:600;display:flex;gap:10px;
  align-items:center;justify-content:center;flex-wrap:wrap}
.campaign-until{opacity:.7;font-weight:500;font-size:.82rem}
/* the old price, struck through, wherever a campaign is discounting */
.price-was{color:color-mix(in srgb,var(--ink) 42%,#fff);font-weight:400;
  margin-right:6px;text-decoration:line-through}
.price-badge{display:inline-block;background:var(--mintchip,#a4f1df);color:var(--ink);
  border-radius:999px;padding:2px 10px;font-size:.7rem;font-weight:700;
  letter-spacing:.02em;vertical-align:middle;margin-left:6px}
.price-offer{font-size:.82rem;font-weight:500;margin-top:6px;
  color:color-mix(in srgb,var(--ink) 65%,#fff)}
.price-offer .price-badge{margin-left:0;margin-right:6px}
/* review/checkout discount line */
.rv-row.rv-discount{color:var(--forest)}
.rv-row.rv-discount .rv-price{color:var(--forest)}