:root{
  --azz-ochre:#C4802F;
  --azz-ochre-press:#A96C24;
  --azz-deep-teal:#1D4E4A;
  --azz-deep-teal-press:#163C39;
  --azz-canvas:#F4F1E9;
  --azz-ink-900:#2A241C;
  --azz-ink-500:#6F6759;
  --azz-surface:#FFFFFF;
  --azz-on-ochre:#FFFFFF;
  --azz-on-deep-teal:#F4F1E9;
  --azz-hairline:rgba(42,36,28,.14);
  --azz-hairline-reverse:rgba(244,241,233,.22);
  --font-headline:"Work Sans","Helvetica Neue",Arial,sans-serif;
  --font-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-hand:"Caveat","Segoe Script",cursive;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--azz-canvas);color:var(--azz-ink-900);font-family:var(--font-headline);overflow-x:hidden;}
a{color:var(--azz-ochre);}
a:hover{color:var(--azz-ochre-press);}
h1,h2,h3,p{margin:0;}
details>summary{cursor:pointer;list-style:none;}
details>summary::-webkit-details-marker{display:none;}
details>summary::marker{content:"";}

.wordmark{display:flex;align-items:center;gap:10px;font-family:var(--font-headline);font-weight:700;letter-spacing:-0.01em;}
.wordmark svg{flex-shrink:0;}
.wordmark span{white-space:nowrap;}

.cta-pill{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--azz-ochre);color:var(--azz-on-ochre);
  border:none;border-radius:999px;font-family:var(--font-headline);font-weight:600;
  cursor:pointer;transition:background .15s ease,transform .08s ease;
  text-decoration:none;
}
.cta-pill:hover{background:var(--azz-ochre-press);color:var(--azz-on-ochre);}
.cta-pill:active{transform:scale(.99);}
.cta-pill:focus-visible{outline:2px solid var(--azz-ochre);outline-offset:2px;}
.cta-pill.sm{padding:12px 26px;font-size:15px;}
.cta-pill.md{padding:17px 34px;font-size:17px;}

/* Secondary "Buy Now" pill — outline treatment so it never competes visually with the
   single filled-ochre "Download the app" CTA that appears everywhere else on the page. */
.buy-pill{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border-radius:999px;font-family:var(--font-headline);font-weight:600;
  cursor:pointer;transition:background .15s ease,transform .08s ease;
  text-decoration:none;padding:13px 28px;font-size:15px;width:100%;margin-top:4px;
}
.buy-pill:active{transform:scale(.99);}
.p-card.ochre .buy-pill{border:1.5px solid var(--azz-ochre);color:var(--azz-ochre);}
.p-card.ochre .buy-pill:hover{background:var(--azz-ochre);color:#fff;}
.p-card.teal .buy-pill{border:1.5px solid var(--azz-deep-teal);color:var(--azz-deep-teal);}
.p-card.teal .buy-pill:hover{background:var(--azz-deep-teal);color:var(--azz-canvas);}

.badge{display:inline-flex;align-items:center;padding:9px 18px;border-radius:999px;font-size:14px;font-weight:600;font-family:var(--font-headline);}
.badge.reverse{background:rgba(244,241,233,.14);color:var(--azz-canvas);border:1px solid var(--azz-hairline-reverse);}
.badge.ochre{background:var(--azz-ochre);color:#fff;}
.badge.teal{background:var(--azz-deep-teal);color:var(--azz-canvas);}

/* Official Apple/Google badge artwork — used as-is per both companies' brand guidelines
   (no recoloring, no rebuilding from scratch), so this is just a sizing wrapper, not a
   custom pill like the rest of the page's buttons. */
.store-badge-link{display:inline-flex;align-items:center;}
.store-badge-link img{display:block;height:44px;width:auto;}

/* Shared peeking-card carousel: powers both the hero's app-screenshot stack and the coach
   section's nutritionist photos (stackCarousel.js drives both from the same code). Native
   touch-swipeable (CSS scroll-snap, no drag/gesture math) with dot pagination and a slow
   auto-advance, pausing whenever the client actually touches/scrolls it themselves so the
   auto-advance never fights a manual swipe. Each slide is deliberately narrower than the
   track (72%) so the previous/next slides peek in from either side, scaled down and dimmed,
   the visual cue that this is swipeable rather than a single static image. */
.stack-carousel{width:100%;max-width:400px;margin:0 auto;display:flex;flex-direction:column;gap:16px;align-items:center;}
.stack-track{
  width:100%;
  display:flex;align-items:center;gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-block:10px;
}
.stack-track::-webkit-scrollbar{display:none;}
.stack-card{
  flex:0 0 72%;aspect-ratio:776/1748;
  scroll-snap-align:center;scroll-snap-stop:always;
  transform:scale(.8);opacity:.5;
  transition:transform .35s ease,opacity .35s ease;
}
.stack-card.is-active{transform:scale(1);opacity:1;}
.stack-dots{display:flex;gap:8px;}
.stack-dots .dot{width:8px;height:8px;border-radius:999px;border:none;padding:0;background:rgba(244,241,233,.35);cursor:pointer;transition:background .2s ease,transform .2s ease;}
.stack-dots .dot.is-active{background:var(--azz-ochre);transform:scale(1.3);}

.device-frame{
  position:relative;width:100%;height:100%;
  background:linear-gradient(155deg,#48484a,#1c1c1e 55%);
  border-radius:15%/7%;
  padding:3.2%;
  box-shadow:0 24px 48px -20px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08);
}
.device-frame .screen{position:relative;width:100%;height:100%;border-radius:12%/5.5%;overflow:hidden;background:#000;}
.device-frame .screen img{width:100%;height:100%;object-fit:cover;display:block;}
.device-frame .notch{
  position:absolute;top:3.2%;left:50%;transform:translateX(-50%);
  width:30%;height:2.8%;background:#000;border-radius:999px;z-index:5;
}

/* Coach section's stack-card variant: a plain portrait photo (no phone bezel, these are real
   headshots) with a deep-teal gradient rising from the bottom so the frame reads as part of
   the section's own teal background rather than a photo dropped on top of it. */
.stack-card.photo{aspect-ratio:4/5;border-radius:16px;overflow:hidden;position:relative;border:1px solid var(--azz-hairline-reverse);}
.stack-card.photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.stack-card.photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to top, var(--azz-deep-teal) 0%, rgba(29,78,74,.9) 22%, rgba(29,78,74,.4) 48%, transparent 75%);
}
.coach-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:18px 16px 14px;
  display:flex;flex-direction:column;gap:3px;
  z-index:2;pointer-events:none;text-align:left;
}
.coach-name{
  font-family:var(--font-headline);
  font-size:18px;
  font-weight:700;
  color:var(--azz-canvas);
  line-height:1.2;
  letter-spacing:-0.01em;
}
.coach-role{
  font-family:var(--font-headline);
  font-size:13px;
  font-weight:600;
  color:var(--azz-ochre);
  line-height:1.2;
}

header.site{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px clamp(24px,5vw,72px);background:var(--azz-canvas);}

section{padding:clamp(56px,8vw,96px) clamp(24px,5vw,72px);}

.hero{
  background:var(--azz-deep-teal);color:var(--azz-on-deep-teal);
  display:grid;grid-template-columns:minmax(320px,1fr) minmax(300px,440px);
  gap:clamp(32px,6vw,72px);align-items:center;
}
.hero-copy{display:flex;flex-direction:column;gap:28px;align-items:flex-start;}
.hook{font-weight:700;font-size:clamp(34px,5vw,56px);line-height:1.08;letter-spacing:-0.022em;text-wrap:balance;}
.hook .accent{color:var(--azz-ochre);}
.body-lg{font-family:var(--font-body);font-weight:400;font-size:clamp(18px,2.2vw,22px);line-height:1.5;max-width:480px;text-wrap:pretty;}
.badge-row{display:flex;gap:12px;flex-wrap:wrap;}

.how{background:var(--azz-canvas);}
.how h2{font-weight:600;font-size:clamp(30px,4vw,44px);line-height:1.1;letter-spacing:-0.01em;margin-bottom:48px;max-width:640px;text-wrap:balance;}
.steps{display:flex;flex-direction:column;gap:32px;max-width:760px;}
.step{display:flex;gap:24px;align-items:flex-start;}
.step-num{width:44px;height:44px;border-radius:999px;background:var(--azz-ink-900);color:var(--azz-canvas);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:17px;}
.step-num.accent{background:var(--azz-ochre);color:#fff;}
.step-text{display:flex;flex-direction:column;gap:6px;padding-top:6px;}
.step-text h3{font-weight:600;font-size:20px;line-height:1.3;}
.step-text p{font-family:var(--font-body);font-weight:400;font-size:17px;line-height:1.55;color:var(--azz-ink-500);}

.coach{background:var(--azz-deep-teal);color:var(--azz-on-deep-teal);display:grid;grid-template-columns:minmax(280px,1fr) minmax(260px,420px);gap:clamp(32px,5vw,64px);align-items:center;}
.coach-copy{display:flex;flex-direction:column;gap:24px;align-items:flex-start;}
.coach-copy h2{font-weight:600;font-size:clamp(30px,4vw,44px);line-height:1.1;text-wrap:balance;}
.coach-copy p{font-family:var(--font-body);font-weight:400;font-size:clamp(18px,2vw,22px);line-height:1.55;max-width:520px;color:rgba(244,241,233,.9);text-wrap:pretty;}

.testimonials{background:var(--azz-canvas);display:flex;flex-direction:column;gap:48px;}
.testimonials h2{font-weight:600;font-size:clamp(30px,4vw,44px);line-height:1.1;max-width:640px;text-wrap:balance;}

/* Continuously auto-scrolling strip of all 21 quotes (7 nutritionists x 3 clients), rather than
   a static wrapping grid — with that many quotes, a marquee keeps the section a fixed height
   and always moving instead of turning into a long wall of cards. Standard two-strip technique:
   .t-track appears twice back to back (the second copy is aria-hidden, purely visual), both
   animated identically, so the moment the first strip finishes sliding fully out of view the
   second is already sitting exactly where the first started, and the loop reads as seamless.
   The edge mask fades cards in/out at the container edges instead of a hard clip. */
.t-marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.t-track{display:flex;gap:28px;flex-shrink:0;animation:t-scroll 100s linear infinite;}
.t-marquee:hover .t-track{animation-play-state:paused;}
@keyframes t-scroll{from{transform:translateX(0);}to{transform:translateX(-100%);}}
@media (prefers-reduced-motion: reduce){.t-track{animation:none;}}

.t-card{background:var(--azz-surface);border:1px solid var(--azz-hairline);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:20px;flex:0 0 320px;}
/* Client quotes read as handwritten notes, distinct from the rest of the page's two set
   typefaces, in the brand's ochre accent rather than the default ink color, so this section
   reads as personal testimony rather than more body copy. */
.t-card blockquote{margin:0;font-family:var(--font-hand);font-weight:600;font-size:26px;line-height:1.3;color:var(--azz-ochre);}
.t-card .credit{font-size:14px;color:var(--azz-ink-500);font-weight:500;}

.pricing{background:var(--azz-canvas);display:flex;flex-direction:column;gap:40px;}
.pricing-head{display:flex;flex-direction:column;gap:16px;max-width:640px;}
.pricing-head h2{font-weight:600;font-size:clamp(30px,4vw,44px);line-height:1.1;text-wrap:balance;}
.pricing-head p{font-family:var(--font-body);font-size:19px;line-height:1.55;color:var(--azz-ink-500);text-wrap:pretty;}
.p-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;}
.p-card{background:var(--azz-surface);border-radius:20px;padding:36px;display:flex;flex-direction:column;gap:20px;position:relative;}
.p-card.ochre{border:2px solid var(--azz-ochre);}
.p-card.teal{border:2px solid var(--azz-deep-teal);}
.p-card .intro-badge{position:absolute;top:-16px;left:32px;}
.p-name{display:flex;flex-direction:column;gap:4px;}
.p-name .name{font-weight:600;font-size:22px;line-height:1.3;}
.p-name .desc{font-family:var(--font-body);font-size:15px;line-height:1.4;color:var(--azz-ink-500);}
.p-price{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:8px;}
.p-price .big{font-weight:700;font-size:40px;letter-spacing:-0.01em;}
.p-price .unit{font-family:var(--font-body);font-weight:400;font-size:17px;color:var(--azz-ink-500);}
.p-price .was{font-weight:500;font-size:14px;color:var(--azz-ink-500);text-decoration:line-through;white-space:nowrap;}
.p-features{display:flex;flex-direction:column;gap:12px;}
.p-feature{display:flex;gap:10px;align-items:flex-start;}
.p-feature svg{stroke-width:1.75;width:20px;height:20px;flex-shrink:0;margin-top:2px;}
.p-feature span{font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--azz-ink-900);}
.p-card.ochre .p-feature svg{color:var(--azz-ochre);}
.p-card.teal .p-feature svg{color:var(--azz-deep-teal);}
.p-caption{font-size:12px;color:var(--azz-ink-500);font-weight:500;}
.p-loading{grid-column:1/-1;text-align:center;color:var(--azz-ink-500);font-size:14px;padding:40px 0;}

.faq{background:var(--azz-canvas);display:flex;flex-direction:column;gap:40px;}
.faq h2{font-weight:600;font-size:clamp(30px,4vw,44px);line-height:1.1;text-wrap:balance;}

/* Category filter pills — outline by default (same treatment as .buy-pill), filled ochre
   when active. Uses [hidden] on non-matching <details> rather than re-rendering the list, so
   the border-bottom lives on .faq-list itself (not :last-child) since which item is visually
   last changes with the filter. */
.faq-filters{display:flex;flex-wrap:wrap;gap:10px;}
.faq-pill{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1.5px solid var(--azz-hairline);border-radius:999px;
  font-family:var(--font-headline);font-weight:600;font-size:14px;color:var(--azz-ink-500);
  padding:9px 18px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.faq-pill:hover{border-color:var(--azz-ochre);color:var(--azz-ink-900);}
.faq-pill.is-active{background:var(--azz-ochre);border-color:var(--azz-ochre);color:#fff;}
.faq-pill.is-active:hover{background:var(--azz-ochre-press);border-color:var(--azz-ochre-press);color:#fff;}

.faq-list{display:flex;flex-direction:column;max-width:760px;border-bottom:1px solid var(--azz-hairline);}
.faq-list details{border-top:1px solid var(--azz-hairline);padding:24px 0;}
.faq-list details[hidden]{display:none;}
.faq-list summary{font-weight:600;font-size:19px;line-height:1.3;}
.faq-list p{margin-top:16px;font-family:var(--font-body);font-weight:400;font-size:17px;line-height:1.6;color:var(--azz-ink-500);}

footer.site{background:var(--azz-deep-teal);color:var(--azz-on-deep-teal);display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;padding:clamp(56px,8vw,96px) clamp(24px,5vw,72px) 48px;}
footer.site h2{font-weight:700;font-size:clamp(30px,4vw,44px);line-height:1.15;max-width:640px;text-wrap:balance;}
.disclaimer{font-size:14px;color:rgba(244,241,233,.9);max-width:480px;}
.legal-links{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;}
.legal-links a{font-size:14px;font-weight:500;color:rgba(244,241,233,.75);text-decoration:underline;text-underline-offset:2px;}
.legal-links a:hover{color:var(--azz-canvas);}
.copyright{font-size:14px;font-weight:500;color:rgba(244,241,233,.55);}

/* Checkout modal */
.modal-overlay{position:fixed;inset:0;background:rgba(42,36,28,.55);display:none;align-items:center;justify-content:center;padding:24px;z-index:100;}
.modal-overlay.open{display:flex;}
.modal-card{background:var(--azz-surface);border-radius:20px;padding:36px;max-width:400px;width:100%;display:flex;flex-direction:column;gap:20px;position:relative;max-height:90vh;overflow-y:auto;}
.modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:999px;border:none;background:var(--azz-canvas-muted,#EBE6D9);color:var(--azz-ink-900);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.modal-card h3{font-weight:600;font-size:20px;line-height:1.3;}
.modal-card label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;color:var(--azz-ink-500);}
.modal-card input{width:100%;min-width:0;font-family:var(--font-headline);font-size:16px;padding:12px 14px;border-radius:10px;border:1px solid var(--azz-hairline);background:var(--azz-canvas);color:var(--azz-ink-900);}
.modal-card input:focus{outline:2px solid var(--azz-ochre);outline-offset:1px;}
.phone-row{display:flex;gap:8px;align-items:stretch;min-width:0;}
.phone-prefix{display:flex;align-items:center;justify-content:center;padding:0 12px;border-radius:10px;background:var(--azz-canvas-muted,#EBE6D9);font-weight:600;color:var(--azz-ink-900);flex-shrink:0;}
.phone-row input{flex:1;min-width:0;}
.modal-error{font-size:14px;color:#B84A3A;min-height:20px;}
.modal-hint{font-size:13px;color:var(--azz-ink-500);}
.modal-card .cta-pill{width:100%;padding:14px;}
.modal-card .cta-pill[disabled]{opacity:.6;cursor:default;}
.modal-card button.link{background:none;border:none;color:var(--azz-ochre);font-family:var(--font-headline);font-size:14px;font-weight:600;cursor:pointer;padding:0;align-self:flex-start;}

@media (max-width:760px){
  .hero,.coach{grid-template-columns:1fr;}
  .coach .stack-carousel{max-width:340px;margin:0 auto;}
}

/* Legal pages (terms, privacy, refund) — same site chrome (header/footer), a plain reading
   layout for the document itself. Deliberately narrower max-width than the marketing
   sections since this is dense text meant to be read, not a scannable layout. */
.legal-hero{background:var(--azz-deep-teal);color:var(--azz-on-deep-teal);display:flex;flex-direction:column;gap:8px;}
.legal-hero .back-link{color:rgba(244,241,233,.75);font-size:14px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;}
.legal-hero .back-link:hover{color:var(--azz-canvas);}
.legal-hero h1{font-weight:700;font-size:clamp(30px,4vw,44px);line-height:1.1;}
.legal-hero .updated{font-size:14px;color:rgba(244,241,233,.7);}
.legal-doc{background:var(--azz-canvas);display:flex;justify-content:center;}
.legal-doc-inner{max-width:720px;width:100%;font-family:var(--font-body);font-size:17px;line-height:1.65;color:var(--azz-ink-900);}
.legal-doc-inner h2{font-family:var(--font-headline);font-weight:600;font-size:22px;line-height:1.3;margin:40px 0 12px;color:var(--azz-ink-900);}
.legal-doc-inner h2:first-child{margin-top:0;}
.legal-doc-inner h3{font-family:var(--font-headline);font-weight:600;font-size:17px;margin:24px 0 8px;}
.legal-doc-inner p{margin:0 0 14px;}
.legal-doc-inner ul{margin:0 0 14px;padding-left:22px;}
.legal-doc-inner li{margin-bottom:6px;}
.legal-doc-inner strong{font-family:var(--font-headline);font-weight:600;}
.legal-doc-inner a{text-decoration:underline;}
.legal-doc-inner .intro{font-size:19px;color:var(--azz-ink-500);}