/* ==========================================================================
   Mana Loa Health — site stylesheet
   Self-hosted fonts only. No CDN, no external stylesheet, no third-party JS.
   Palette is the captured Wix brand palette, unchanged.
   ========================================================================== */

/* --- Fonts: Source Serif 4 (display) + Inter (text) ---------------------- */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/sourceserif4-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/sourceserif4-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/sourceserif4-var-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/sourceserif4-var-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  --blue: #0A86E4;
  --blue-700: #0668B4;
  --blue-200: #85C3F2;
  --blue-100: #C2E1F8;
  --teal: #64CEBB;
  --gold: #F5C645;
  --white: #FFFFFF;
  --black: #000000;

  --ink: #000000;
  --ink-soft: rgba(0, 0, 0, 0.74);
  --ink-faint: rgba(0, 0, 0, 0.56);
  --rule: rgba(10, 134, 228, 0.18);

  --display: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  --page: 1200px;
  --read: 68ch;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  --lift-1: 0 1px 2px rgba(6, 40, 70, 0.06), 0 6px 18px rgba(6, 40, 70, 0.07);
  --lift-2: 0 2px 4px rgba(6, 40, 70, 0.08), 0 18px 48px rgba(6, 40, 70, 0.12);
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--blue-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
label:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--blue);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.2; }
h4 { font-size: 1.0625rem; letter-spacing: 0; }
p { margin: 0 0 var(--s4); }
em { font-style: italic; font-weight: 600; }
ul { margin: 0 0 var(--s4); padding-left: 1.3em; }
li { margin-bottom: 0.4em; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--blue); color: var(--white);
  padding: var(--s3) var(--s4); border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Shell -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}
.header-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding-block: var(--s3);
}
.brand { display: inline-flex; align-items: center; gap: var(--s3); }
.brand img { width: 74px; height: auto; }
.brand-name {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--black);
  line-height: 1.1;
}
.brand-tag {
  display: block; font-family: var(--text); font-size: 0.6rem;
  letter-spacing: 0.22em; color: var(--ink-faint); font-weight: 500;
  margin-top: 2px;
}
.brand, .brand:hover { text-decoration: none; }

.header-actions { display: flex; align-items: center; gap: var(--s4); }
.header-phone {
  font-weight: 600; font-size: 0.9rem; white-space: nowrap;
  text-decoration: none; color: var(--ink);
}
.header-phone:hover { color: var(--blue); }

/* Nav: own full-width row, centred. 13 uppercase items need 946px of label
   plus gaps, so the nav row is allowed wider than the 1200px content measure
   and the gap is capped to keep all 13 on one line from 1040px up. */
.nav-row { border-top: 1px solid var(--rule); }
.nav-row .wrap { max-width: 1340px; }
.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 clamp(0.55rem, 1.2vw, 1.15rem);
}
.site-nav a {
  display: block; position: relative;
  padding: 0.7rem 0; text-decoration: none;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.site-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.35rem;
  height: 2px; background: var(--blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav a:hover { color: var(--blue); }
.site-nav a:hover::after,
.site-nav a[aria-current='page']::after { transform: scaleX(1); }
.site-nav a[aria-current='page'] { color: var(--blue); }

/* CSS-only mobile menu — no JS in the nav. */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-button { display: none; }

/* 13 uppercase labels measure 946px; below ~1240 they cannot sit on one
   line, so the menu collapses rather than wrapping to a ragged second row. */
@media (max-width: 1239px) {
  .nav-button {
    display: inline-flex; align-items: center; gap: var(--s2);
    padding: 0.55rem 0.85rem; cursor: pointer;
    border: 1px solid var(--rule); border-radius: var(--r-sm);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--blue); background: var(--white);
  }
  .nav-row { max-height: 0; overflow: hidden; border-top: 0;
    transition: max-height 260ms cubic-bezier(0.22, 1, 0.36, 1); }
  .nav-toggle:checked ~ .nav-row {
    max-height: 32rem; border-top: 1px solid var(--rule);
  }
  .site-nav ul { flex-direction: column; gap: 0; padding-block: var(--s2); }
  .site-nav a { padding: 0.8rem 0; font-size: 0.82rem; }
  .site-nav li + li { border-top: 1px solid var(--rule); }
  .header-phone { display: none; }
  .header-top { padding-block: var(--s2); }
  .brand img { width: 54px; }
  .brand-name { font-size: 0.9rem; }
  .header-actions .btn {
    min-height: 44px; padding: 0.6rem 1rem; font-size: 0.74rem;
  }
}
@media (max-width: 420px) {
  .brand-name { display: none; }
  .header-actions { gap: var(--s2); }
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2); min-height: 52px;
  padding: 0.9rem 1.9rem; border: 0; border-radius: 999px;
  background: var(--blue); color: var(--white);
  font-family: var(--text); font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; box-shadow: var(--lift-1); white-space: nowrap;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms ease;
}
.btn:hover { background: var(--blue-700); color: var(--white);
  transform: translateY(-2px); box-shadow: var(--lift-2); }
.btn:active { transform: translateY(0); box-shadow: var(--lift-1); }
.btn--teal { background: var(--teal); color: var(--black); }
.btn--teal:hover { background: #4FBFAA; color: var(--black); }
.btn--on-blue { background: var(--gold); color: var(--black); }
.btn--on-blue:hover { background: #E8B72C; color: var(--black); }

/* --- Hero: two-thirds copy, image owns the right third ------------------ */

.hero { position: relative; background: var(--white); }
.hero-grid {
  display: grid; grid-template-columns: 2fr 1fr;
  min-height: min(76vh, 640px); align-items: stretch;
}
.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  text-align: left;
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1rem, 4vw, 3rem)
           clamp(3rem, 6vw, 5.5rem) clamp(1rem, 4vw, 2.5rem);
  max-width: calc(var(--page) * 0.66);
  margin-left: max(0px, calc((100vw - var(--page)) / 2));
}
.hero h1 { margin-bottom: var(--s4); }
.hero h1 span { display: block; }
.hero-sub {
  font-family: var(--display); font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.45rem);
  font-style: italic; font-weight: 600; color: var(--black);
  margin: 0 0 var(--s5); max-width: 34ch; line-height: 1.35;
}
.hero-body { max-width: 56ch; color: var(--ink-soft); }
.hero-body p:last-of-type { margin-bottom: var(--s5); }
.hero-cta { align-self: flex-start; }

.hero-media { position: relative; overflow: hidden; background: var(--blue-100); }
.hero-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(10, 134, 228, 0.22), rgba(10, 134, 228, 0));
}

/* Teal band, as on the captured hero, carrying no second CTA. */
.hero-band {
  background: var(--teal); color: var(--black);
  font-family: var(--text); font-weight: 600; font-size: 0.86rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.hero-band .wrap { padding-block: var(--s4); text-align: center; }

.hero--narrow .hero-grid { grid-template-columns: 1fr; min-height: 0; }
.hero--narrow .hero-copy {
  margin-inline: auto; max-width: var(--page); width: 100%;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.hero--narrow .hero-body, .hero--narrow .hero-sub { max-width: var(--read); }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  /* Cap the stacked hero image so the h1 and the CTA stay near the top. */
  .hero-media { order: -1; aspect-ratio: 16 / 9; max-height: 34vh; }
  .hero-media img { position: static; height: 100%; }
  .hero-copy { margin-left: 0; max-width: none; padding-block: var(--s5) var(--s6); }
  .hero-body p:last-of-type { margin-bottom: var(--s4); }
}

/* --- Sections ----------------------------------------------------------- */

.section {
  padding-block: clamp(2.75rem, 6vw, 5.5rem);
  scroll-margin-top: 7rem;   /* clear the sticky header on anchor jumps */
}
.section--tint { background: var(--blue-100); }
.section--brand { background: var(--blue); color: var(--white); }
.section--brand h2, .section--brand h3 { color: var(--white); }
.section--brand a { color: var(--gold); }
.section--brand .section-body { color: rgba(255, 255, 255, 0.92); }
.section--brand .note { color: var(--gold); }

/* Centred section headers, site-wide. Hero copy stays left. */
.section-header { text-align: center; margin-bottom: var(--s6); }
.section-header h2 { margin-inline: auto; max-width: 30ch; }
.section-lead {
  font-family: var(--display); font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  line-height: 1.35; color: var(--black); max-width: 42ch;
  margin: var(--s4) auto 0; text-align: center;
}
.section--brand .section-lead { color: var(--white); }

.section-body { max-width: var(--read); margin-inline: auto; }
.section-body h3 { margin: var(--s5) 0 var(--s3); }
.section-body > *:first-child { margin-top: 0; }
.section-body ul { padding-left: 0; list-style: none; }
.section-body ul li {
  position: relative; padding-left: 1.6em; margin-bottom: 0.55em;
}
.section-body ul li::before {
  content: ''; position: absolute; left: 0.25em; top: 0.68em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
}
.section--brand .section-body ul li::before { background: var(--gold); }

.note {
  font-size: 0.95rem; color: var(--ink-faint); font-style: italic;
  margin-bottom: var(--s4);
}
.sig { font-style: italic; color: var(--ink-soft); margin-bottom: var(--s4); }
.sig span { display: block; }

.section-cta { text-align: center; margin-top: var(--s6); }

.reviewed-by {
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: 0.82rem; color: var(--ink-faint);
  max-width: var(--read); margin-inline: auto; text-align: center;
}
.section--brand .reviewed-by {
  color: rgba(255, 255, 255, 0.78); border-top-color: rgba(255, 255, 255, 0.22);
}

/* --- Card component (every repeated card on the site) ------------------- */

.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1rem, 2.2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.cards:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.card {
  display: flex; flex-direction: column;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--lift-1); overflow: hidden;
}
.card-media { background: var(--blue-100); aspect-ratio: 3 / 2; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: clamp(1.25rem, 2.2vw, 1.9rem); }
.card-body > *:last-child { margin-bottom: 0; }
.card .card-title {
  color: var(--blue); margin-bottom: var(--s3);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.2;
}
.card-price {
  display: block; font-family: var(--text); font-weight: 700;
  font-size: 1.05rem; color: var(--black);
  font-variant-numeric: tabular-nums; margin-bottom: var(--s4);
}
.card-flag {
  display: inline-block; margin-bottom: var(--s3);
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 0.95rem; color: var(--blue-700);
}
/* Styled by role, not by tag: the card's own sub-headings sit at h3 or h4
   depending on whether the section above them has a header, and must read the
   same either way. */
.card .card-body h2:not(.card-title),
.card .card-body h3:not(.card-title),
.card .card-body h4:not(.card-title) {
  font-family: var(--text); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
  margin: var(--s4) 0 var(--s2); line-height: 1.3;
}
.card ul { list-style: none; padding-left: 0; }
.card ul li { position: relative; padding-left: 1.4em; margin-bottom: 0.4em;
  font-size: 0.97rem; }
.card ul li::before {
  content: ''; position: absolute; left: 0.2em; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
}
.card .note { margin-top: var(--s4); }

/* --- Portraits: subject breaks the frame -------------------------------- */

/* The offset block sits INSIDE the wrapper's own padding, so the subject can
   break its photo boundary without the block overflowing the viewport. */
.portrait {
  position: relative; max-width: 24rem; margin: 0 auto var(--s6);
  padding: 0 1.25rem 1.25rem 0;
}
.portrait::before {
  content: ''; position: absolute; left: 1.25rem; right: 0;
  top: 1.5rem; bottom: 0;
  background: var(--blue-200); border-radius: var(--r-lg); z-index: 0;
}
.portrait img {
  position: relative; z-index: 1; width: 100%;
  border-radius: var(--r-lg); box-shadow: var(--lift-2);
}
.pair {
  display: grid; gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  max-width: 44rem; margin: 0 auto var(--s6);
}
.pair img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--lift-1); }

.quotebox {
  max-width: 44ch; margin-inline: auto; text-align: center;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--blue-100); border-radius: var(--r-lg);
}
.quotebox p {
  font-family: var(--display); font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.5; color: var(--black);
}
.quotebox p:last-child { margin-bottom: 0; font-style: italic; font-weight: 600;
  color: var(--blue-700); }

/* --- FAQ ---------------------------------------------------------------- */

.faq { max-width: var(--read); margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--rule); padding-block: var(--s4);
}
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 1.1rem; font-weight: 600;
  color: var(--blue); display: flex; gap: var(--s3); align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; margin-left: auto; font-family: var(--text);
  font-weight: 400; color: var(--ink-faint); flex: none;
}
.faq details[open] summary::after { content: '\2212'; }
.faq .faq-num {
  font-family: var(--text); font-size: 0.85rem; font-weight: 700;
  color: var(--teal); flex: none;
}
.faq-answer { padding-top: var(--s3); color: var(--ink-soft); }
.faq-answer p:last-child { margin-bottom: 0; }

/* --- Blog index --------------------------------------------------------- */

.chips { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }
.chips li {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 999px; padding: 0.4rem 1rem;
  font-size: 0.85rem; font-weight: 600; color: var(--blue-700); margin: 0;
}
.post-index { list-style: none; margin: 0; padding: 0;
  max-width: 54rem; margin-inline: auto; }
.post-index li {
  display: flex; gap: var(--s4); align-items: baseline;
  padding-block: var(--s3); border-bottom: 1px solid var(--rule); margin: 0;
}
.post-index .post-n {
  font-size: 0.8rem; font-weight: 700; color: var(--teal);
  font-variant-numeric: tabular-nums; flex: none; min-width: 2.2ch;
  text-align: right;
}
.post-index .post-t { font-family: var(--display); font-size: 1.05rem;
  line-height: 1.35; color: var(--black); }

/* --- Contact form ------------------------------------------------------- */

.form { max-width: 34rem; margin-inline: auto; }
.field { margin-bottom: var(--s4); }
.field label {
  display: block; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: var(--s2);
}
.field .req { color: var(--blue-700); }
.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field textarea {
  width: 100%; padding: 0.85rem 1rem;
  font-family: var(--text); font-size: 1rem; color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.22); border-radius: var(--r-sm);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--blue); }
.check { display: flex; gap: var(--s3); align-items: flex-start;
  margin-bottom: var(--s5); }
.check input { margin-top: 0.4rem; width: 1.1rem; height: 1.1rem; flex: none; }
.check label { text-transform: none; letter-spacing: 0;
  font-weight: 500; font-size: 0.97rem; color: var(--ink); margin: 0; }
.form-actions { text-align: center; }
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}
.form-msg {
  margin-bottom: var(--s4); padding: var(--s3) var(--s4);
  border-radius: var(--r-sm); font-size: 0.95rem;
  background: var(--white); border-left: 4px solid var(--teal);
}
.form-msg--bad { border-left-color: #C2410C; }

/* --- Draft banner ------------------------------------------------------- */

.draft-banner {
  background: var(--gold); color: var(--black);
  border-bottom: 2px solid rgba(0, 0, 0, 0.18);
}
.draft-banner .wrap { padding-block: var(--s4); }
.draft-banner strong {
  display: block; font-family: var(--display); font-size: 1.1rem;
  margin-bottom: var(--s2);
}
.draft-banner p { margin: 0; font-size: 0.95rem; max-width: 72ch; }
.lorem { color: var(--ink-faint); }
.link-slot {
  margin-bottom: var(--s4); padding: var(--s4);
  border: 1px dashed var(--blue); border-radius: var(--r-md);
  background: var(--white);
}
.link-slot strong { display: block; color: var(--blue-700); }
.link-slot span { font-size: 0.9rem; color: var(--ink-faint); }

/* --- Testimonial component (built, not rendered until authorized) ------- */

.testimonials {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1rem, 2.2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.testimonial {
  padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--r-lg);
  background: var(--blue-200); color: var(--black); box-shadow: var(--lift-1);
}
.testimonial:nth-child(even) { background: var(--blue); color: var(--white); }
.testimonial .mark {
  font-family: var(--display); font-size: 2.5rem; line-height: 0.6;
  display: block; margin-bottom: var(--s3); opacity: 0.5;
}
.testimonial blockquote { margin: 0 0 var(--s4); font-size: 1rem; }
.testimonial cite {
  font-style: normal; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* --- Footer ------------------------------------------------------------- */

.site-footer { background: var(--blue); color: var(--white); }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--gold); }

.footer-main {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(16rem, 1fr) 2fr;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.footer-brand {
  background: var(--blue-100); border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.5vw, 2rem); text-align: center; color: var(--black);
}
.footer-brand img { width: min(190px, 70%); margin: 0 auto var(--s4); }
.footer-brand p { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: var(--s3); }
.footer-brand a { color: var(--blue-700); word-break: break-word; }
.footer-brand a:hover { color: var(--blue); }

.footer-cols {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.footer-cols h3 {
  font-family: var(--display); font-size: 1.1rem; color: var(--white);
  margin-bottom: var(--s3);
}
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li { margin-bottom: 0.45em; font-size: 0.94rem; }
.footer-cols .ico { display: flex; gap: var(--s3); align-items: center; }
.footer-cols .ico img { width: 20px; height: 20px; flex: none;
  filter: brightness(0) invert(1); }

.footer-accent {
  color: var(--gold); font-size: 0.95rem; max-width: 46ch;
  margin-top: var(--s4);
}

.social { list-style: none; display: flex; gap: var(--s3); padding: 0;
  margin: var(--s4) 0 0; }
.social li { margin: 0; }
.social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.14);
  transition: background-color 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.social a:hover { background: var(--gold); transform: translateY(-2px); }
.social img { width: 20px; height: 20px; }
.social a:hover img { filter: brightness(0); }

.footer-nav { border-top: 1px solid rgba(255, 255, 255, 0.22); }
.footer-nav ul {
  list-style: none; margin: 0; padding: var(--s5) 0;
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  justify-content: center;
}
.footer-nav li { margin: 0; }
.footer-nav a {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-block: var(--s5); text-align: center;
  font-size: 0.85rem; color: rgba(255, 255, 255, 0.82);
}
.footer-bottom ul {
  list-style: none; margin: 0 0 var(--s3); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); justify-content: center;
}
.footer-bottom li { margin: 0; }

@media (max-width: 880px) {
  .footer-main { grid-template-columns: 1fr; }
}

/* --- Lead capture (/guide) and the download slot ----------------------- */

.hero-form { align-self: flex-start; width: 100%; max-width: 32rem; }
.hero-form .form { margin-inline: 0; }
.form--lead { max-width: 32rem; }
.field .opt {
  font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--ink-faint);
}
.lead-mobile .check--sms {
  margin: var(--s3) 0 0; padding-left: var(--s3);
  border-left: 3px solid var(--blue-200);
}
/* The texting consent only exists once a number does, and there is still no
   form JavaScript: an empty tel input is showing its placeholder, so
   :placeholder-shown on the preceding sibling is the whole test. The server
   drops texting consent independently when no mobile arrives. */
.lead-mobile input[type='tel']:placeholder-shown ~ .check--sms {
  display: none;
}
.check--health { margin-bottom: var(--s5); }
.check--health label {
  font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft);
}
.link-slot-inline {
  color: var(--blue-700); font-weight: 600;
  border-bottom: 1px dashed var(--blue);
}
.consent-link { color: var(--blue-700); }

.dl-slot {
  margin-bottom: var(--s4); padding: var(--s5);
  border: 2px dashed var(--blue); border-radius: var(--r-md);
  background: var(--white); text-align: center;
}
.dl-slot strong {
  display: block; font-family: var(--display); font-size: 1.1rem;
  color: var(--blue-700); margin-bottom: var(--s2);
}
.dl-slot span {
  display: block; font-size: 0.9rem; color: var(--ink-faint);
  max-width: 52ch; margin-inline: auto;
}
.dl-slot--ready { border-style: solid; border-color: var(--blue-200); }

@media (max-width: 880px) {
  .hero-form { max-width: none; }
}

/* --- Print -------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .hero-band, .btn { display: none !important; }
  body { color: #000; font-size: 11pt; }
}