/* ============================================================
   Corivo mobile refresh — consolidated layer.
   Loaded LAST (after site.css + elevate.css) so it wins the cascade.
   Desktop (>=701px) is intentionally untouched except global :active
   press states and the footer <details> restore block.
   Breakpoint: <=700px, flexing 360-430px. box-sizing:border-box everywhere.
   ============================================================ */

/* ---- Global (all widths): touch press states ---- */
.btn:active{background:var(--cobalt-active);color:#fff}
.btn-white:active{background:var(--mist);color:var(--cobalt-active)}
.btn-outline:active{background:rgba(20,23,43,.1)}
.btn-outline-light:active{background:rgba(250,248,244,.16)}

/* ---- Sticky bottom CTA bar (fixed; hidden on desktop) ---- */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;align-items:center;
  padding:12px 16px;padding-bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px));
  background:rgba(250,248,244,.96);border-top:1px solid var(--mist);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.stickycta .sc-copy{flex:1;min-width:0}
.stickycta .sc-title{font:700 15px var(--font-display);color:var(--ink);letter-spacing:-.01em}
.stickycta .sc-sub{font-size:12px;color:var(--ink-70)}
.stickycta .btn{height:44px;min-height:44px;padding:0 22px;font-size:15px;flex:none}

/* ---- Responsive copy variants ---- */
.m-only{display:none}                 /* shown only <=700px (mobile mockup copy) */
.btn.m-only{display:none}             /* buttons keep inline-flex on mobile, not revert */
.nav-links .login-m{display:none}

/* ============================================================
   MOBILE (<=700px)
   Footer columns stay plain <div>s (desktop byte-identical); the
   accordion is progressive enhancement — site.js adds .js-acc to
   collapse them. Without JS the links simply stay expanded.
   ============================================================ */
@media (max-width:700px){
  .m-only{display:revert}
  .btn.m-only{display:inline-flex}
  .d-only{display:none}

  /* ---------- Global mobile rhythm (spec = 52px section padding, not elevate's 80px) ---------- */
  .el .sec{padding:52px 0}
  .el .sec-tight{padding:44px 0}

  /* ---------- Shared ink CTA band (all pages) ---------- */
  .el .band-ink.sec-tight .wrap{flex-direction:column;align-items:flex-start;gap:18px}
  .el .band-ink.sec-tight .btn{width:100%}

  /* ---------- Shared header: 60px ---------- */
  .nav{height:60px;gap:12px}
  .nav .logo img{height:30px}
  header.site .nav-cta{gap:8px;margin-left:auto}  /* right-align Get Started + hamburger */
  header.site .nav-cta .btn-sm{height:44px;min-height:44px;padding:0 18px;font-size:15px}
  .hamburger{width:44px;height:44px;padding:0}
  /* Log in moves into the opened hamburger menu */
  .nav-links .login-m{display:block;padding:12px 0;color:var(--ink);text-decoration:none;font-weight:500;font-size:16px}

  /* ---------- Sticky CTA: revealed once hero exits ---------- */
  .stickycta{display:flex;transform:translateY(130%);transition:transform .2s var(--ease-out);visibility:hidden}
  .stickycta.show{transform:none;visibility:visible}

  /* ---------- Shared footer: accordion link columns ---------- */
  .foot-top{padding:44px 0 20px}
  .foot-brand{flex-direction:row;align-items:center;width:100%;justify-content:space-between}
  .foot-brand-txt img{height:32px!important}
  .foot-cols{flex-direction:column;margin-left:0;gap:0;width:100%}
  .foot-col{min-width:0;width:100%;gap:0;border-bottom:1px solid rgba(250,248,244,.15)}
  .foot-col .label{display:flex;align-items:center;justify-content:space-between;
    min-height:48px;margin:0;font:600 14px var(--font-body);letter-spacing:0;text-transform:none;opacity:1}
  .foot-col>a{padding:10px 0;font-size:15px}
  /* JS-enhanced: header toggles the column */
  .foot-col.js-acc .label{cursor:pointer}
  .foot-col.js-acc .label::after{content:"";flex:none;width:9px;height:9px;margin-right:2px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);transition:transform .15s var(--ease-out)}
  .foot-col.js-acc.open .label::after{transform:translateY(1px) rotate(-135deg)}
  .foot-col.js-acc>a{display:none}
  .foot-col.js-acc.open>a{display:block}
  .foot-col.js-acc.open>a:last-child{padding-bottom:16px}
  .foot-legal{padding:24px 0 32px}
}

/* ============================================================
   HOME (frame 2a) — scoped to body.home, mobile only
   ============================================================ */
@media (max-width:700px){
  /* ---- Hero ---- */
  .home .hero{padding:44px 0 24px}
  .home #pathZone>.hero+.sec{padding-top:32px!important}   /* was inline 64px — too big a hero->section gap */
  .home .hero .hero-grid{display:block}
  .home .hero-grid>svg:first-of-type{width:52px;height:52px;margin-bottom:18px}
  .home .hero h1{font-size:38px;line-height:1.06;margin-bottom:16px}
  .home .hero-sub{gap:22px;margin-top:0}
  .home .hero-sub p{font-size:17px!important}
  .home .hero-sub .btn{width:100%;height:52px}
  .home .hero-sub .anchor{display:none}

  /* ---- How it works: static numbered path rail ---- */
  .home #pathZone{counter-reset:step}
  .home .sec-head{display:block;margin-bottom:18px}   /* space below 'See the full walkthrough' before the steps */
  .home .sec-head h2{margin-bottom:8px}
  .home .anchor{display:none}                          /* invisible path-node markers */
  .home .station{counter-increment:step;grid-template-columns:34px 1fr;gap:16px;padding:0 0 28px;align-items:start}
  .home .station::before{content:"";position:absolute;left:13px;top:13px;bottom:-13px;width:2px;
    transform:translateX(-50%);background:var(--cobalt);opacity:.22;border-radius:2px;z-index:0}
  .home .station:last-child{padding-bottom:0}
  .home .station:last-child::before{display:none}
  .home .station .st-node{grid-column:1;grid-row:1;justify-self:start;
    width:26px;height:26px;border-radius:50%;background:var(--paper);border:2px solid var(--cobalt);
    box-shadow:0 0 0 4px var(--paper);display:grid;place-items:center;position:relative;z-index:1}
  .home .station .st-node::after{content:counter(step);font:700 12px var(--font-body);color:var(--cobalt);line-height:1}
  .home .station .st-node.live{background:var(--cobalt);border-color:var(--cobalt)}
  .home .station .st-node.live::after{color:#fff}
  .home .station .st-copy{grid-column:2;grid-row:1;justify-self:start;max-width:none}
  .home .station .st-copy .label{display:none}         /* "Step N" — number is in the node */
  .home .station .st-copy h3{font-size:19px}
  .home .station .st-copy p{font-size:16px}

  /* ---- Treatments: tappable rows w/ chevron ---- */
  .home .grid-4{gap:10px}
  .home .grid-4 .card{display:grid!important;grid-template-columns:1fr auto;align-items:center;
    column-gap:12px;padding:16px 18px}
  .home .grid-4 .card .badge-coaching{display:none}
  .home .grid-4 .card h3{grid-column:1;grid-row:1;font-size:19px}
  .home .grid-4 .card p{grid-column:1;grid-row:2;font-size:13px;margin:0}
  .home .grid-4 .card>span:last-child{display:block;grid-column:2;grid-row:1/3;align-self:center;justify-self:end;
    width:10px;height:10px;font-size:0;flex:none;
    border-right:2px solid var(--cobalt);border-bottom:2px solid var(--cobalt);transform:rotate(-45deg)}

  /* ---- Cobalt coaching band ---- */
  .home .band-cobalt.sec .split-auto{display:block}
  .home .band-cobalt.sec svg{width:52px;height:52px;margin-bottom:16px}
  .home .band-cobalt .anchor{display:none}
  .home .band-cobalt .btn{width:100%;margin-top:4px}

  /* ---- BMI card: keep 3 fields in one row ---- */
  .home #bmi .row-fields{flex-wrap:nowrap;gap:10px}
  .home #bmi .row-fields .field{flex:1 1 0}
  .home #bmi .row-fields .field:last-child{flex:1.3 1 0}

  /* ---- Pricing block ---- */
  .home .g75.split-center{display:block}
  .home .price-big{font-size:44px;line-height:1;margin-bottom:8px}
  .home .inc-list{margin-top:22px}

  /* ---- Testimonials: one-at-a-time swipe (scroll-snap) ---- */
  .home #testi .grid-3{display:flex;grid-template-columns:none;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 -20px;padding:4px 20px}
  .home #testi .grid-3::-webkit-scrollbar{display:none}
  .home #testi .grid-3 .card{flex:0 0 86%;scroll-snap-align:center;padding:24px}
  .home #testi .grid-3 .card p{font-style:normal;font-size:17px;font-weight:500;line-height:1.45;color:var(--ink)}
  .home .swipe-dots{display:flex;gap:6px;justify-content:center;margin-top:16px}
  .home .swipe-dots i{width:6px;height:6px;border-radius:50%;background:var(--mist);transition:width .15s var(--ease-out)}
  .home .swipe-dots i.on{background:var(--cobalt);width:18px;border-radius:3px}

  /* ---- Ink CTA band w/ mark ---- */
  .home .band-ink.sec-tight .wrap{flex-direction:column;align-items:flex-start;gap:18px}
  .home .band-ink .m-mark{display:block}
  .home .band-ink .btn{width:100%}
}
/* ============================================================
   HOW IT WORKS (frame 3a) — body.hiw, mobile only
   ============================================================ */
@media (max-width:700px){
  .hiw .hero{padding:44px 0 40px}
  .hiw .hero h1{font-size:38px;line-height:1.06;margin-bottom:14px}
  .hiw .hero-sub{gap:22px}
  .hiw .hero-sub p{font-size:17px!important}
  .hiw .hero-sub .btn{width:100%}
  .hiw .anchor{display:none}

  /* Journey steps ride the numbered vertical rail (real photos kept) */
  .hiw #pathZone{counter-reset:jstep}
  .hiw .jstep{counter-increment:jstep;display:grid;grid-template-columns:34px 1fr;gap:0 16px;
    padding:0 0 40px;position:relative;align-items:start}
  .hiw .jstep:last-child{padding-bottom:0}
  .hiw .jstep::before{content:"";position:absolute;left:13px;top:13px;bottom:-13px;width:2px;
    transform:translateX(-50%);background:var(--cobalt);opacity:.22;border-radius:2px;z-index:0}
  .hiw .jstep:last-child::before{display:none}
  .hiw .jstep .jnode{display:grid;position:relative;left:0!important;top:auto;grid-column:1;grid-row:1;justify-self:start;
    width:26px;height:26px;margin:0;border-radius:50%;background:var(--paper);border:2px solid var(--cobalt);
    box-shadow:0 0 0 4px var(--paper);place-items:center;z-index:1}
  .hiw .jstep .jnode::after{content:counter(jstep);font:700 12px var(--font-body);color:var(--cobalt);line-height:1}
  .hiw .jstep .jnode.live{background:var(--cobalt);border-color:var(--cobalt)}
  .hiw .jstep .jnode.live::after{color:#fff}
  .hiw .jstep .jtext{grid-column:2;grid-row:1;z-index:1}
  .hiw .jstep .bignum{display:none}
  .hiw .jstep .jtext h2{font-size:23px;line-height:1.2;margin-bottom:8px}
  .hiw .jstep .jtext p{font-size:16px}
  .hiw .jstep .jmedia{grid-column:2;grid-row:2;margin-top:14px}
  .hiw .jstep .jmedia img{border-radius:12px;min-height:150px;object-fit:cover}

  /* "What happens after" + questions spacing */
  .hiw .grid-3{gap:22px}
}

/* ============================================================
   GET STARTED (frame 3d) — body.gst, mobile only. No sticky bar.
   ============================================================ */
@media (max-width:700px){
  .gst .hero{padding:44px 0 28px}
  .gst .hero h1{font-size:33px!important;line-height:1.08;max-width:none}
  .gst .hero p{font-size:16px!important}
  .gst #startForm{padding:22px!important}
  .gst #startForm .row-fields{flex-direction:column;gap:16px;margin-bottom:0}
  .gst #startForm .row-fields .field{flex:0 0 auto}
  .gst #startForm .btn{width:100%}
}

/* ============================================================
   PRICING (frame 3b) — body.pri, mobile only. Art wall dropped.
   ============================================================ */
@media (max-width:700px){
  .pri .hero{padding:44px 0 20px}
  .pri .hero h1{font-size:38px!important;line-height:1.06}
  .pri .g57{display:block}
  .pri .fpwall{display:none}                 /* decorative fine-print wall dropped on mobile */
  .pri .price-panel{background:#fff;border:1px solid var(--cobalt);border-radius:16px;padding:26px 22px;gap:0}
  .pri .price-panel .price-big{font-size:52px!important;margin-bottom:16px}
  .pri .price-panel .inc-list{margin:0 0 16px!important}
  .pri .price-panel .price-cta{width:100%;margin-bottom:12px}
  .pri .price-panel p.small{font-size:12px}
  .pri .g75.split-start{display:block}
  .pri .g75.split-start .card{padding:22px;margin-top:18px}
}

/* ============================================================
   COACHING (frame 3c) — body.coa, mobile only.
   Desktop phone frame -> flat chat card on mobile (.m-only).
   ============================================================ */
@media (max-width:700px){
  .coa .hero{padding:44px 0 32px}
  .coa .hero h1{font-size:38px!important;line-height:1.06}
  .coa .hero p{font-size:17px!important}
  .coa .coach-chat{margin-top:20px}
  .coa .coach-chat .cc-bub{font-size:14px;border-radius:12px 12px 12px 4px;padding:10px 12px;max-width:85%}
  .coa .coach-chat .cc-me{background:var(--cobalt);color:#fff;border-radius:12px 12px 4px 12px;align-self:flex-end}
  .coa .band-cobalt.sec p{font-size:16px}
  .coa .ghostwrap .img-slot{min-height:180px}
}

/* ============================================================
   FAQ (frame 4a) — body.faq, mobile only. Jump chips + groups.
   ============================================================ */
.faq-chips{display:none}
@media (max-width:700px){
  .faq .hero{padding:44px 0 8px}
  .faq .hero .wrap{text-align:left!important}
  .faq .hero h1{font-size:38px}
  .faq .hero p{font-size:17px!important}
  .faq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
  .faq-chips .chip{display:inline-flex;align-items:center;min-height:44px;
    border-radius:999px;border:1px solid var(--mist);background:#fff;color:var(--ink);
    font:600 13px var(--font-body);padding:0 16px;text-decoration:none}
  .faq-chips .chip-on{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
  .faq .sec h2{font-size:22px!important;margin:32px 0 4px!important}
  .faq [id^="faq-"]{scroll-margin-top:72px}
}

/* ============================================================
   TREATMENT TEMPLATE (frame 4b) — body.tx (semaglutide, tirzepatide), mobile only.
   ============================================================ */
@media (max-width:700px){
  .tx .hero{padding:44px 0 32px}
  .tx .hero h1{font-size:38px!important;line-height:1.06}
  .tx .hero p{font-size:17px!important}
  .tx .hero .btn{width:100%}
  .tx .g57.split-start{display:block}
  .tx .g57 .card{padding:22px!important;margin-top:18px}
  .tx .panel-sage{padding:16px 18px;font-size:14px}
}

/* ============================================================
   WEIGHT LOSS HUB (frame 4c) — body.wl, mobile only.
   ============================================================ */
@media (max-width:700px){
  .wl .hero{padding:44px 0 24px}
  .wl .hero h1{font-size:38px;line-height:1.06}
  .wl .hero p{font-size:17px!important}
  .wl .grid-4{gap:10px}
  .wl .grid-4 .card{display:grid!important;grid-template-columns:1fr auto;align-items:center;
    column-gap:12px;row-gap:2px;padding:16px 18px}
  .wl .grid-4 .card .label{grid-column:1;grid-row:1;margin-bottom:2px}
  .wl .grid-4 .card h3{grid-column:1;grid-row:2;font-size:19px}
  .wl .grid-4 .card p{grid-column:1;grid-row:3;font-size:13px;margin:0}
  .wl .grid-4 .card>span:last-child{display:block;grid-column:2;grid-row:1/4;align-self:center;justify-self:end;
    width:10px;height:10px;font-size:0;
    border-right:2px solid var(--cobalt);border-bottom:2px solid var(--cobalt);transform:rotate(-45deg)}
  .wl .panel-sage{font-size:14px;padding:16px 18px}
}

/* ============================================================
   THE APP (frame 4d) — body.app, mobile only.
   Phone frames flatten to full-width cards (real app screens kept);
   text leads, card follows. Hero phone dropped.
   ============================================================ */
@media (max-width:700px){
  .app .hero{padding:44px 0 20px}
  .app .hero h1{font-size:38px!important;line-height:1.06}
  .app .hero p{font-size:17px!important}
  .app .hero .btn{width:100%}
  .app .hero .g75>div:last-child{display:none}      /* drop hero phone */
  .app .tour-step .phone-hold{order:2;margin:0}
  .app .tour-step .phone,.app .tour-step .phone-sm{width:100%;background:transparent;padding:0;
    box-shadow:none;border-radius:0;margin:0}
  .app .tour-step .scr{height:auto;border-radius:18px;box-shadow:0 12px 30px -18px rgba(20,23,43,.5)}
  .app .tour-step .scr-status{display:none}
  .app .tour-step .scr-body{padding:18px 16px;gap:12px}
}

/* ============================================================
   CONTENT PAGES (frames 5a about / 5b contact / 5c blog / 5e reviews)
   + legal/article reading type scale (5d). Mobile only.
   ============================================================ */
@media (max-width:700px){
  .ab .hero h1,.ct .hero h1,.bl .hero h1,.rv .hero h1{font-size:38px;max-width:none}
  .ab .hero h1 .dotp{display:none} /* long centered headline orphans the coral dot */
  .ab .hero p,.ct .hero p,.bl .hero p,.rv .hero p{font-size:17px!important}
  /* Contact: stacked form card, full-width send */
  .ct .split{display:block}
  .ct #contactForm{padding:22px!important}
  .ct #contactForm .btn{width:100%;align-self:stretch!important}
  .ct #contactForm+div{margin-top:14px}
  /* Blog index (frame 5c): featured image card + compact rows */
  .bl .grid-3{gap:0;grid-template-columns:1fr}
  .bl .blog-feat{margin-bottom:8px}
  .bl .card:not(.blog-feat){background:transparent;border:none;border-radius:0;box-shadow:none;
    padding:0!important;border-bottom:1px solid var(--mist)}
  .bl .card:not(.blog-feat):hover{transform:none;box-shadow:none}
  .bl .card:not(.blog-feat) .img-slot{display:none}
  .bl .card:not(.blog-feat) p.small{display:none}
  .bl .card:not(.blog-feat)>a{display:flex!important;align-items:center;gap:12px;min-height:44px;padding:14px 0}
  .bl .card:not(.blog-feat)>a>div{padding:0!important;flex:1}
  .bl .card:not(.blog-feat) h3{font:600 16px/1.35 var(--font-display);letter-spacing:-.01em;margin:0 0 4px}
  .bl .card:not(.blog-feat) .label{margin:0}
  .bl .card:not(.blog-feat)>a::after{content:"";flex:none;width:9px;height:9px;
    border-right:2px solid var(--cobalt);border-bottom:2px solid var(--cobalt);transform:rotate(-45deg)}
  /* Reviews: centered placeholder card */
  .rv .card{padding:36px 24px!important}
  /* Reading type scale — legal .el-doc pages (content in main .wrap) */
  .el-doc main p,.el-doc .inner p{font-size:16px;line-height:1.65}
  .el-doc main h2,.el-doc .inner h2{font-size:22px!important}
  /* Blog articles + editorial-policy keep the locked article scale (17px) */
  .el-doc .article .inner p,.el-doc .article .inner li{font-size:17px;line-height:1.7}
}

/* ============================================================
   EMPLOYERS (emp, marketing) + EMPLOYER INTEREST (empf, form) — mobile only
   ============================================================ */
@media (max-width:700px){
  /* Employers marketing page — sticky CTA ("Offer it to your team.") uses the shared .stickycta */
  .emp .hero{padding:44px 0 32px}
  .emp .hero h1{font-size:38px!important;line-height:1.08}
  .emp .hero p{font-size:17px!important}
  .emp .hero .btn{width:100%}
  /* Content-rebuild additions: stat cards stack via .grid-3 rule; the ink "bind" band's
     inline 2-col grid must be overridden to a single column on mobile. */
  .emp .emp-bind{grid-template-columns:1fr!important;gap:20px!important}
  .emp .emp-stats{gap:16px}
  .emp .emp-figs{grid-template-columns:1fr!important;border-top:0}
  .emp .emp-figs>div{border-right:0!important;border-top:1px solid var(--mist);padding:26px 0!important}
  .emp .emp-herostats{gap:24px 40px}
  /* Employer interest form page — no sticky bar (page is the CTA), like get-started */
  .empf .hero h1{font-size:33px!important;line-height:1.1}
  .empf .hero p{font-size:17px!important}
  .empf #employerForm{padding:22px!important}
  .empf #employerForm .btn{width:100%}
}

/* swipe dots + ink mark hidden on desktop */
.swipe-dots{display:none}
.band-ink .m-mark{display:none}

/* ---- Respect reduced motion for the sticky bar ---- */
@media (prefers-reduced-motion:reduce){
  .stickycta{transition:none}
}