/* ==========================================================================
   AmarFit — amarfit.in
   Single stylesheet. Implements design-system.md (canonical, July 2026) exactly.
   Every value references a token. No raw hex or px outside :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Colour tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- brand green scale --- */
  --green-50:  #E6FAF0;
  --green-100: #C7F4DD;
  --green-200: #8EEBBB;
  --green-300: #52DE95;
  --green-400: #1FD07A;
  --green-500: #00BF63;   /* brand primary, sampled from logo mark */
  --green-600: #00A555;
  --green-700: #008846;
  --green-800: #066B3B;
  --green-900: #0A4F2E;

  /* --- neutral / ink · WARM EVERGREEN, rev 4 (3 Aug 2026) ---
     Was a cool green-slate. The light end is now warm paper and the dark end is
     an evergreen ink rather than a neutral black. Same lightness steps, so every
     contrast pair that passed before still passes. This one change does more for
     perceived quality than anything else in this file. */
  --white:       #FFFFFF;
  --neutral-50:  #FBF9F5;
  --neutral-100: #F4F0E8;
  --neutral-200: #E6E1D6;
  --neutral-300: #CFC9BC;
  --neutral-400: #636A65;   /* rev 4.10: was #9AA69E, 2.52:1. Now 4.52:1 on every light surface */
  --neutral-500: #5F6B64;   /* rev 4.10: was #6E7C74, 4.38:1. Now 4.52:1 on every light surface */
  --neutral-600: #4F5D55;
  --neutral-700: #414F47;
  --neutral-800: #26332C;
  --neutral-900: #16241C;

  /* --- brass accent, rev 4 ---
     One accent colour, used at roughly five percent coverage: eyebrow rules,
     section numerals, quote marks, small dividers. Never on a button, never on
     a large fill. It exists so the page has somewhere warm to rest that is not
     green. */
  --brass:      #7E6336;   /* rev 4.10: was #9C7A43, 3.98:1. Now 4.58:1 on every light surface */
  --brass-2:    #C9A96B;   /* on dark surfaces only */
  --brass-soft: #EFE7D6;

  /* --- deep surface, rev 4 ---
     The inverse bands used --green-800 #066B3B, which is bright enough to read
     as an alert. This is the same hue family, far deeper. */
  --surface-deep: #102C1F;
  --line:         rgba(22, 36, 28, .13);
  --line-soft:    rgba(22, 36, 28, .07);
  --line-deep:    rgba(240, 245, 241, .16);

  /* --- semantic --- */
  --success: #00A555;  --success-soft: #E6FAF0;
  --warning: #FFB020;  --warning-soft: #FFF3DD;
  --danger:  #F0432E;  --danger-soft:  #FEE9E6;
  --info:    #2F7BF6;  --info-soft:    #E7F0FE;

  /* --- nutrition accents [APP ONLY — declared, never used on web] --- */
  --calorie: #FF6B4A;  --calorie-soft: #FFEDE8;
  --protein: #4C6EF5;  --protein-soft: #E8EDFE;
  --carb:    #FFB020;  --carb-soft:    #FFF3DD;
  --fat:     #9B6DFF;  --fat-soft:     #F0E9FF;
  --water:   #22C3E6;  --water-soft:   #E1F7FC;

  /* --- brand aliases --- */
  --brand:        var(--green-500);
  --brand-hover:  var(--green-600);
  --brand-active: var(--green-700);
  --brand-subtle: var(--green-50);
  --brand-border: var(--green-200);
  --on-brand:     var(--white);

  /* [WEB] CTA aliases. White text on deep green (decided July 30). 4.55:1, AA.
     White on green-500 stays forbidden — 2.43:1. */
  --cta-bg:        var(--green-700);
  --cta-bg-hover:  var(--green-800);
  --cta-bg-active: var(--green-900);
  --cta-text:      var(--white);

  /* --- text --- */
  --text-strong:   var(--neutral-900);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--neutral-400);   /* decorative only */
  --text-on-brand: var(--white);
  --text-link:     var(--green-700);

  /* --- surface --- */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--neutral-100);
  --surface-inverse: var(--neutral-900);
  --surface-brand:   var(--green-500);

  /* --- border --- */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-focus:   var(--green-500);

  /* --- focus ring (rgba fallback required for older Android WebViews) --- */
  --ring: rgba(0, 191, 99, 0.40);

  /* ------------------------------------------------------------------
     2. Typography
     ------------------------------------------------------------------ */
  --font-display: 'Gabarito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-stat:    'Space Grotesk', ui-monospace, 'Hanken Grotesk', system-ui, sans-serif;
  --font-metric:  var(--font-display);
  --font-heading: var(--font-display);
  --font-numeric: var(--font-stat);

  /* 2.3 Type scale [WEB] fluid */
  /* rev 4.1 (3 Aug 2026): Raj asked for the small type to come up, section
     labels especially. Every step below moved by roughly one point. The large
     end of the scale is untouched, so headline-to-body contrast is unchanged. */
  --text-2xs: 11.5px;
  --text-xs:  12.5px;
  --text-sm:  15px;
  --text-md:  18px;
  --text-lg:  20.5px;
  /* rev 4: the ceiling was too low. Headline and body sat close enough in size
     that nothing on the page announced itself. The bottom of the scale is
     unchanged so mobile does not grow. */
  --text-xl:  clamp(19px, 2.1vw, 21px);
  --text-2xl: clamp(20px, 2.2vw, 25px);
  --text-3xl: clamp(27px, 3.6vw, 42px);
  --text-4xl: clamp(34px, 4.3vw, 55px);
  --text-5xl: clamp(38px, 5.4vw, 64px);
  --text-6xl: clamp(44px, 7vw,   80px);

  /* 2.5 weights and metrics */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.015em;
  --tracking-snug:   -0.008em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ------------------------------------------------------------------
     3. Spacing and sizing — 4px grid
     ------------------------------------------------------------------ */
  --space-0:  0;      --space-8:  32px;
  --space-1:  4px;    --space-10: 40px;
  --space-2:  8px;    --space-12: 48px;
  --space-3:  12px;   --space-16: 64px;
  --space-4:  16px;   --space-20: 80px;
  --space-5:  20px;   --space-24: 96px;
  --space-6:  24px;   --space-32: 128px;

  --container-sm: 480px;
  --container-md: 768px;
  --container-lg: 1080px;
  --container-xl: 1280px;
  --gutter: 24px;

  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;

  /* 4. Radius */
  --radius-xs:     6px;
  --radius-sm:     10px;
  --radius-md:     14px;
  --radius-lg:     20px;
  --radius-xl:     28px;
  --radius-2xl:    36px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* 5. Shadow */
  /* rev 4: softened and warm-tinted. Heavy shadows on a warm paper background
     read as plastic. Hairlines carry the separation now, shadows only hint. */
  --shadow-xs:       0 1px 2px rgba(22,36,28,.05);
  --shadow-sm:       0 1px 3px rgba(22,36,28,.05);
  --shadow-md:       0 4px 12px rgba(22,36,28,.06);
  --shadow-lg:       0 10px 26px rgba(22,36,28,.07);
  --shadow-xl:       0 20px 44px rgba(22,36,28,.10);
  --shadow-brand:    0 8px 20px rgba(0,191,99,.28);
  --shadow-brand-lg: 0 14px 34px rgba(0,191,99,.34);
  --shadow-inset:    inset 0 1px 3px rgba(15,22,19,.10);
  --shadow-focus:    0 0 0 4px var(--ring);

  /* 6. Motion */
  --dur-instant: 90ms;   --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:    150ms;  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-base:    220ms;  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-slow:    360ms;  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-slower:  560ms;
  --press-scale: 0.96;
}

/* Progressive ring upgrade */
@supports (color: color-mix(in srgb, red 40%, transparent)) {
  :root {
    --ring: color-mix(in srgb, var(--green-500) 40%, transparent);
  }
}

/* --------------------------------------------------------------------------
   Base / element defaults (2.6)
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background: var(--surface-page);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-optical-sizing: auto;
  color: var(--text-strong);
  margin: var(--space-0) var(--space-0) var(--space-4);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }

h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  margin: var(--space-0) var(--space-0) var(--space-3);
}

h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-sm); }

p {
  margin: var(--space-0) var(--space-0) var(--space-4);
  max-width: 68ch;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

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

ul, ol { margin: var(--space-0) var(--space-0) var(--space-4); padding-left: var(--space-5); }
li { margin-bottom: var(--space-2); }

hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-8) var(--space-0);
}

strong { color: var(--text-strong); }

::selection { background: var(--green-200); color: var(--neutral-900); }

/* --------------------------------------------------------------------------
   2.7 Type utilities
   -------------------------------------------------------------------------- */
.amf-tnum {
  font-family: var(--font-stat);
  font-variant-numeric: tabular-nums lining-nums;
}

.amf-metric {
  font-family: var(--font-metric);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
  font-optical-sizing: auto;
  letter-spacing: var(--tracking-snug);
  line-height: 1;
  color: var(--text-strong);
}

.amf-eyebrow__icon { width: 14px; height: 14px; flex-shrink: 0; }
.amf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--brand);
}
.amf-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-circle);
  background: var(--brand);
  flex: none;
}

/* Muted helper (passes AA on white at body sizes only) */
.amf-muted { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   7.1 Button .amf-btn
   -------------------------------------------------------------------------- */
.amf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-md);
  padding: var(--space-0) 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-spring),
              background-color var(--dur-fast),
              box-shadow var(--dur-fast),
              color var(--dur-fast);
}
.amf-btn:hover { text-decoration: none; }
.amf-btn:active { transform: scale(var(--press-scale)); }
.amf-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.amf-btn[disabled], .amf-btn--disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.amf-btn--sm { height: var(--control-sm); font-size: var(--text-sm); padding: var(--space-0) var(--space-4); }
.amf-btn--lg { height: var(--control-lg); font-size: var(--text-md); padding: var(--space-0) 28px; }

.amf-btn--primary {
  background: var(--cta-bg);
  color: var(--cta-text);
  box-shadow: var(--shadow-brand);
}
.amf-btn--primary:hover { background: var(--cta-bg-hover); box-shadow: var(--shadow-brand-lg); }
.amf-btn--primary:active { background: var(--cta-bg-active); transform: scale(var(--press-scale)); }

.amf-btn--secondary {
  background: var(--brand-subtle);
  color: var(--green-700);
  border-color: var(--brand-border);
}
.amf-btn--secondary:hover { background: var(--green-100); }

.amf-btn--outline {
  background: var(--surface-card);
  color: var(--text-strong);
  border-color: var(--border-default);
}
.amf-btn--outline:hover { background: var(--neutral-50); border-color: var(--border-strong); }

.amf-btn--ghost {
  background: transparent;
  color: var(--text-body);
}
.amf-btn--ghost:hover { background: var(--neutral-100); }

.amf-btn--danger { background: var(--danger); color: var(--white); }
.amf-btn--danger:hover { background: #D93A28; }

/* Primary CTA keeps dark ink on every surface, including dark sections (decided July 30) */
.amf-section--inverse .amf-btn--primary,
.amf-footer .amf-btn--primary {
  background: var(--cta-bg);
  color: var(--cta-text);
  border-color: var(--green-400);
}
.amf-section--inverse .amf-btn--primary:hover,
.amf-footer .amf-btn--primary:hover { background: var(--cta-bg-hover); }

/* [WEB] primary CTA full-width on mobile */
.amf-btn--cta {
  width: 100%;
  height: var(--control-lg);
  font-size: var(--text-md);
}
@media (min-width: 480px) {
  .amf-btn--cta { width: auto; }
}

/* --------------------------------------------------------------------------
   7.2 Input .amf-input   [WEB: lg on mobile, 14px labels]
   -------------------------------------------------------------------------- */
.amf-field { margin-bottom: var(--space-5); }

.amf-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}

.amf-input {
  display: block;
  width: 100%;
  height: var(--control-lg);
  padding: var(--space-0) 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.amf-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}
.amf-input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: none;
}
.amf-input[disabled] {
  background: var(--neutral-100);
  opacity: .6;
}

.amf-help {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}
.amf-error {
  font-size: var(--text-xs);
  color: var(--danger);
  margin-top: var(--space-1);
}

/* --------------------------------------------------------------------------
   7.3 Checkbox .amf-check
   -------------------------------------------------------------------------- */
.amf-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  padding: var(--space-2) var(--space-0);
  min-height: var(--control-md);
}
.amf-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 2px var(--space-0) var(--space-0);
  background: var(--surface-card);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  display: inline-grid;
  place-content: center;
}
.amf-check input[type="checkbox"]:checked {
  background: var(--brand);
  border-color: var(--brand);
}
.amf-check input[type="checkbox"]:checked::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--white);
  clip-path: polygon(12% 52%, 4% 66%, 38% 96%, 100% 16%, 86% 4%, 36% 70%);
}
.amf-check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.amf-check__label {
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--text-strong);
  line-height: var(--leading-normal);
}
.amf-check__desc {
  display: block;
  font-size: 13px;
  font-weight: var(--weight-regular);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* --------------------------------------------------------------------------
   7.4 Card .amf-card
   -------------------------------------------------------------------------- */
.amf-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base), transform var(--dur-base);
}
.amf-card--flat { box-shadow: none; }
.amf-card--md { box-shadow: var(--shadow-md); }
.amf-card--interactive { cursor: pointer; }
.amf-card--interactive:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   8.1 Container
   -------------------------------------------------------------------------- */
.amf-container {
  max-width: var(--container-lg);
  padding-inline: var(--gutter);
  margin-inline: auto;
}
.amf-container--narrow { max-width: var(--container-md); }

/* --------------------------------------------------------------------------
   8.2 Section
   -------------------------------------------------------------------------- */
.amf-section { padding-block: var(--space-16); }
@media (min-width: 768px)  { .amf-section { padding-block: var(--space-20); } }
@media (min-width: 1080px) { .amf-section { padding-block: var(--space-24); } }

.amf-section--sunken { background: var(--surface-sunken); }
.amf-section--inverse {
  background: var(--green-800);
  color: var(--text-on-brand);
}
.amf-section--inverse h1,
.amf-section--inverse h2,
.amf-section--inverse h3,
.amf-section--inverse h4 { color: var(--text-on-brand); }
.amf-section--inverse a:not(.amf-btn) { color: var(--green-200); }
.amf-section--inverse .amf-eyebrow { color: var(--green-200); }
.amf-section--inverse .amf-eyebrow::before { background: var(--green-200); }

/* --------------------------------------------------------------------------
   8.3 Hero
   -------------------------------------------------------------------------- */
.amf-hero { padding-block: var(--space-16) var(--space-12); }
@media (min-width: 768px)  { .amf-hero { padding-block: var(--space-20) var(--space-16); } }
@media (min-width: 1080px) { .amf-hero { padding-block: var(--space-24) var(--space-20); } }

.amf-hero__title {
  font-size: var(--text-4xl);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}
.amf-hero__sub {
  font-size: var(--text-lg);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}
.amf-hero__trust {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-4);
}
.amf-hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
}
@media (min-width: 480px) {
  .amf-hero__actions { flex-direction: row; align-items: center; }
}

/* Hero split with portrait (About) */
.amf-hero--split { display: grid; gap: var(--space-8); }
@media (min-width: 768px) {
  .amf-hero--split {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-12);
    align-items: center;
  }
}
.amf-hero--split img { border-radius: var(--radius-xl); width: 100%; }

/* --------------------------------------------------------------------------
   8.4 Credentials block
   -------------------------------------------------------------------------- */
.amf-credentials {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--brand-subtle);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
@media (min-width: 480px) {
  .amf-credentials { flex-direction: row; align-items: flex-start; }
}
.amf-credentials__photo {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-circle);
  object-fit: cover;
}
.amf-credentials__name {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  margin: var(--space-0);
}
.amf-credentials__quals {
  font-size: var(--text-sm);
  color: var(--text-body);
  margin: var(--space-1) var(--space-0) var(--space-2);
}
.amf-credentials__scope {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: var(--space-0);
}

/* --------------------------------------------------------------------------
   8.5 Result block (text only, no body imagery — enforced here)
   -------------------------------------------------------------------------- */
.amf-result {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.amf-result img,
.amf-result picture { display: none !important; } /* component-level enforcement */
.amf-result__metric {
  font-family: var(--font-metric);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
  font-optical-sizing: auto;
  letter-spacing: var(--tracking-snug);
  line-height: 1;
  font-size: var(--text-4xl);
  color: var(--text-strong);
}
.amf-result__unit {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--green-700);
}
.amf-result__quote {
  font-size: var(--text-md);
  color: var(--text-body);
  margin: var(--space-0);
}
.amf-result__attr {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Review card variant (Google reviews: quote + attribution, no metric) */
.amf-result--review .amf-result__quote { font-size: var(--text-md); }
.amf-result__stars {
  color: var(--green-700);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
}

/* --------------------------------------------------------------------------
   8.6 Price block
   -------------------------------------------------------------------------- */
.amf-price {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-md);
  text-align: left;
}
.amf-price__figure {
  font-family: var(--font-metric);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
  font-optical-sizing: auto;
  letter-spacing: var(--tracking-snug);
  line-height: 1;
  font-size: var(--text-5xl);
  color: var(--text-strong);
}
.amf-price__gst {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.amf-price__list {
  margin: var(--space-5) var(--space-0);
  padding: var(--space-0);
  list-style: none;
}
.amf-price__list li {
  padding-left: var(--space-6);
  position: relative;
  margin-bottom: var(--space-3);
  font-size: var(--text-md);
}
.amf-price__list li::before {
  content: "";
  position: absolute;
  left: var(--space-0);
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: var(--brand);
}
.amf-price__line {
  font-size: var(--text-sm);
  color: var(--text-body);
  margin: var(--space-2) var(--space-0);
}
.amf-price__next {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   8.7 Fit block — for / not for
   -------------------------------------------------------------------------- */
.amf-fit { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .amf-fit { grid-template-columns: 1fr 1fr; } }

.amf-fit__col {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.amf-fit__col h3 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
}
.amf-fit__col ul { list-style: none; padding: var(--space-0); margin: var(--space-0); }
.amf-fit__col li {
  padding-left: var(--space-6);
  position: relative;
  margin-bottom: var(--space-3);
}
.amf-fit__col--yes li::before {
  content: "";
  position: absolute;
  left: var(--space-0);
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background: var(--success);
}
.amf-fit__col--no li { color: var(--text-muted); }
.amf-fit__col--no li::before {
  content: "";
  position: absolute;
  left: var(--space-0);
  top: 11px;
  width: 10px;
  height: 2px;
  background: var(--text-muted);
}

/* --------------------------------------------------------------------------
   8.8 FAQ — native details/summary, no JS
   -------------------------------------------------------------------------- */
.amf-faq {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  margin-bottom: var(--space-3);
}
.amf-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--control-lg);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}
.amf-faq summary::-webkit-details-marker { display: none; }
.amf-faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.amf-faq[open] { background: var(--surface-sunken); }
.amf-faq[open] summary::after { transform: rotate(-135deg); }
.amf-faq__body { padding: var(--space-0) var(--space-5) var(--space-5); }
.amf-faq__body p { margin-bottom: var(--space-2); }

/* --------------------------------------------------------------------------
   8.9 Sticky CTA — mobile only, sales + challenge pages only
   -------------------------------------------------------------------------- */
.amf-sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--gutter);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) { .amf-sticky-cta { display: none; } }

/* --------------------------------------------------------------------------
   8.10 Header
   -------------------------------------------------------------------------- */
.amf-header {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
}
.amf-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--space-16);
  padding-block: var(--space-3);
}
.amf-header__logo { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.amf-header__logo img { height: 34px; width: auto; }
.amf-header__tagline {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: .02em;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 639.98px) {
  .amf-header__tagline { display: none; }
}
.amf-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.amf-header__nav a:not(.amf-btn) {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
}
.amf-header__nav a:not(.amf-btn):hover { color: var(--text-link); }
.amf-header__nav a[aria-current="page"] { color: var(--text-link); }
@media (max-width: 479.98px) {
  .amf-header__nav a:not(.amf-btn) { display: none; }
}

/* --------------------------------------------------------------------------
   8.11 Footer
   -------------------------------------------------------------------------- */
.amf-footer {
  background: var(--green-900);
  color: var(--green-100);
  padding-block: var(--space-16) var(--space-10);
  font-size: var(--text-sm);
}
.amf-footer a:not(.amf-btn) { color: var(--green-200); }
.amf-footer__grid { display: grid; gap: var(--space-8); }
@media (min-width: 768px) {
  .amf-footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--space-12); }
}
.amf-footer__logo img { height: 30px; width: auto; margin-bottom: var(--space-4); }
.amf-footer h3,
.amf-footer h4 {
  color: var(--white);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--space-4);
}
.amf-footer ul { list-style: none; margin: var(--space-0); padding: var(--space-0); }
.amf-footer li { margin-bottom: var(--space-3); }
.amf-footer__creds { max-width: 44ch; }
.amf-footer__bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--green-800);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--green-200);
}

/* --------------------------------------------------------------------------
   8.12 Notice
   -------------------------------------------------------------------------- */
.amf-notice {
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  margin-block: var(--space-5);
}
.amf-notice p { margin: var(--space-0); max-width: none; }
.amf-notice p + p { margin-top: var(--space-2); }
.amf-notice--info    { background: var(--info-soft);    border-left: 3px solid var(--info); }
.amf-notice--warning { background: var(--warning-soft); border-left: 3px solid var(--warning); }
.amf-notice--danger  { background: var(--danger-soft);  border-left: 3px solid var(--danger); }
.amf-notice--success { background: var(--success-soft); border-left: 3px solid var(--success); }

/* --------------------------------------------------------------------------
   9. Brand device utilities
   -------------------------------------------------------------------------- */
.amf-dot {
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  border-radius: var(--radius-circle);
  background: var(--brand);
  margin-left: 0.12em;
}
.amf-dot--sm { width: 7px; height: 7px; }
.amf-dot--lg { width: 0.5em; height: 0.5em; }

.amf-weave {
  position: relative;
  overflow: hidden;
}
.amf-weave::before {
  content: "";
  position: absolute;
  inset: -30%;
  background-image: url("../logo/logo-icon-white.svg");
  background-size: 64px 64px;
  opacity: .08;
  transform: rotate(-12deg) scale(1.3);
  pointer-events: none;
}
.amf-weave > * { position: relative; }

/* --------------------------------------------------------------------------
   Page-level layout helpers (grids used by multiple pages)
   -------------------------------------------------------------------------- */
.amf-grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) {
  .amf-grid--2 { grid-template-columns: 1fr 1fr; }
  .amf-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 480px) and (max-width: 767.98px) {
  .amf-grid--3 { grid-template-columns: 1fr 1fr; }
}

.amf-section__head { margin-bottom: var(--space-10); }
.amf-section__head p { color: var(--text-muted); font-size: var(--text-lg); }

/* Program summary card */
.amf-program {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.amf-program__price {
  font-family: var(--font-stat);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  font-size: var(--text-lg);
}
.amf-program__tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--green-700);
}
.amf-program .amf-btn { margin-top: auto; align-self: flex-start; }

/* Steps (how it works) */
.amf-steps { list-style: none; padding: var(--space-0); margin: var(--space-0); display: grid; gap: var(--space-5); counter-reset: step; }
@media (min-width: 768px) { .amf-steps--row { grid-template-columns: repeat(3, 1fr); } }
.amf-steps li {
  counter-increment: step;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-0);
}
.amf-steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-circle);
  background: var(--green-700);
  color: var(--white);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.amf-steps h3 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-2);
}
.amf-steps p { margin: var(--space-0); font-size: var(--text-sm); }

/* Week-by-week table on sales page */
.amf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.amf-table th, .amf-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.amf-table th {
  background: var(--surface-sunken);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
}
.amf-table tr:last-child td { border-bottom: none; }

/* Compact section variant for short stat strips (rev 3):
   a one-row band doesn't need full section rhythm */
.amf-section--band { padding-top: var(--space-10); padding-bottom: var(--space-10); }
@media (min-width: 768px) { .amf-section--band { padding-top: var(--space-12); padding-bottom: var(--space-12); } }

/* Image placeholder followed by an icon inside a card (rev 3):
   give the slot breathing room before the icon row */
.amf-imgslot + .amf-icon { margin-top: var(--space-4); }

/* Track tag following an icon in a deliverable card (rev 3):
   drop to its own line so it never crowds the icon */
.amf-icon + .amf-program__tag {
  display: block;
  margin-bottom: var(--space-2);
}

/* Card used as a link, e.g. the program chooser (rev 3) */
a.amf-card { color: var(--text-body); }
a.amf-card:hover { text-decoration: none; }

/* Program comparison table (rev 3) */
.amf-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.amf-table--compare { min-width: 640px; }
.amf-table--compare th:first-child,
.amf-table--compare td:first-child { font-weight: var(--weight-semibold); color: var(--text-strong); }
.amf-table--compare td { font-size: var(--text-sm); }
.amf-compare-yes { color: var(--green-700); font-weight: var(--weight-bold); }
.amf-compare-no { color: var(--text-muted); }

/* Legal pages */
.amf-legal h2 { font-size: var(--text-2xl); margin-top: var(--space-10); }
.amf-legal h3 { font-size: var(--text-xl); margin-top: var(--space-8); }
.amf-legal .amf-updated {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}

/* Contact cards (rev 3) — icon tile + label + value, whole card clickable */
.amf-contact-card h3 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-1);
}
.amf-contact-card__val {
  color: var(--text-link);
  font-weight: var(--weight-semibold);
  margin: var(--space-0);
}
.amf-contact-card__sub {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0;
}

/* Contact page rows */
.amf-contact-list { list-style: none; padding: var(--space-0); margin: var(--space-0); }
.amf-contact-list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-0);
  border-bottom: 1px solid var(--border-subtle);
  margin: var(--space-0);
}
.amf-contact-list li:last-child { border-bottom: none; }
.amf-contact-list .amf-contact-list__label {
  flex: none;
  width: 132px;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  font-size: var(--text-sm);
  padding-top: 2px;
}

/* Utility spacers used sparingly in pages */
.amf-mt-0  { margin-top: var(--space-0); }
.amf-mt-4  { margin-top: var(--space-4); }
.amf-mt-6  { margin-top: var(--space-6); }
.amf-mt-8  { margin-top: var(--space-8); }
.amf-mt-10 { margin-top: var(--space-10); }
.amf-mb-0  { margin-bottom: var(--space-0); }
.amf-mb-4  { margin-bottom: var(--space-4); }
.amf-mb-6  { margin-bottom: var(--space-6); }
.amf-mb-8  { margin-bottom: var(--space-8); }
.amf-center-sm { text-align: center; }

.amf-nowrap { white-space: nowrap; }

.amf-more { font-weight: var(--weight-bold); font-size: var(--text-md); }

/* Skip link for keyboard users */
.amf-skip {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  background: var(--surface-card);
  color: var(--text-link);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 100;
}
.amf-skip:focus { left: var(--space-2); }


/* --------------------------------------------------------------------------
   Visual layer v2.1 — photo frames, tinted heroes, stats band, icons
   (all values from existing tokens)
   -------------------------------------------------------------------------- */
.amf-hero--tint {
  background: linear-gradient(180deg, var(--green-50), var(--surface-page));
}

.amf-photo {
  position: relative;
  z-index: 0;
}
.amf-photo img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.amf-photo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--space-5) calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--green-200);
}
.amf-photo::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--space-5));
  left: calc(-1 * var(--space-5));
  width: 96px;
  height: 96px;
  background-image: radial-gradient(var(--green-300) 2.5px, transparent 2.5px);
  background-size: 16px 16px;
  opacity: .7;
}

.amf-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-body);
  box-shadow: var(--shadow-sm);
}
.amf-hero__badge img {
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-circle);
  object-fit: cover;
}
.amf-hero__badge strong { display: block; color: var(--text-strong); }

.amf-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-6);
}
@media (min-width: 768px) { .amf-stats { grid-template-columns: repeat(4, 1fr); } }
.amf-stat__num {
  font-family: var(--font-metric);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
  font-optical-sizing: auto;
  letter-spacing: var(--tracking-snug);
  line-height: 1;
  font-size: var(--text-4xl);
  color: var(--white);
}
.amf-stat__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--green-100);
}

.amf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-sm);
  background: var(--brand-subtle);
  border: 1px solid var(--brand-border);
  color: var(--green-700);
  margin-bottom: var(--space-4);
}
.amf-icon svg { width: var(--space-6); height: var(--space-6); }

.amf-cta-band { text-align: left; }
.amf-cta-band h2 { font-size: var(--text-3xl); }
.amf-cta-band .amf-btn { margin-top: var(--space-4); }

.amf-coach { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 768px) { .amf-coach { grid-template-columns: 2fr 3fr; gap: var(--space-16); } }


/* --------------------------------------------------------------------------
   v2.2 — sticky nav with dropdown, journey ribbon, image slots, next strips
   -------------------------------------------------------------------------- */
.amf-header {
  position: sticky;
  top: 0;
  z-index: 60;
}

/* Desktop nav (>=768px) */
.amf-header__nav { display: none; }
@media (min-width: 768px) {
  .amf-header__nav { display: flex; align-items: center; gap: var(--space-5); }
}

/* Programs dropdown — details-based, no JS */
.amf-dd { position: relative; }
.amf-dd summary {
  list-style: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-0);
}
.amf-dd summary::-webkit-details-marker { display: none; }
.amf-dd summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.amf-dd[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.amf-dd summary:hover { color: var(--text-link); }
.amf-dd__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
}
.amf-dd__panel a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}
.amf-dd__panel a:hover { background: var(--brand-subtle); color: var(--text-link); text-decoration: none; }
.amf-dd__panel a span {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: var(--weight-regular);
}

/* Mobile menu — details-based, no JS */
.amf-mnav { display: block; }
@media (min-width: 768px) { .amf-mnav { display: none; } }
.amf-mnav > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-md);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.amf-mnav > summary::-webkit-details-marker { display: none; }
.amf-mnav__panel {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--gutter) var(--space-5);
  display: flex;
  flex-direction: column;
}
.amf-mnav__panel a {
  display: block;
  padding: var(--space-3) var(--space-2);
  min-height: var(--control-md);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  border-bottom: 1px solid var(--border-subtle);
}
.amf-mnav__panel a:last-child { border-bottom: none; }
.amf-mnav__panel a.amf-mnav__sub {
  padding-left: var(--space-6);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
}
.amf-mnav__label {
  padding: var(--space-3) var(--space-2) var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
}

/* Journey ribbon */
.amf-journey {
  list-style: none;
  padding: var(--space-0);
  margin: var(--space-0);
  display: grid;
  gap: var(--space-6);
  counter-reset: leg;
}
@media (min-width: 768px) { .amf-journey { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); position: relative; } }
@media (min-width: 768px) {
  .amf-journey::after {
    content: "";
    position: absolute;
    top: 3px; right: 0;
    width: 14px; height: 14px;
    border-radius: var(--radius-circle);
    background: var(--brand);
    box-shadow: var(--shadow-brand);
  }
}
.amf-journey li { position: relative; margin: var(--space-0); padding-left: var(--space-8); }
@media (min-width: 768px) { .amf-journey li { padding-left: var(--space-0); padding-top: var(--space-8); } }
/* connector line */
.amf-journey li::before {
  content: "";
  position: absolute;
  left: 9px; top: var(--space-6); bottom: calc(-1 * var(--space-6));
  width: 2px;
  background: var(--brand-border);
}
.amf-journey li:last-child::before { display: none; }
@media (min-width: 768px) {
  .amf-journey li::before {
    left: var(--space-6); right: calc(-1 * var(--space-4)); top: 9px; bottom: auto;
    width: auto; height: 2px;
  }
  .amf-journey li:last-child::before {
    display: block;
    left: var(--space-6); right: 0;
  }
}
/* node dot */
.amf-journey li::after {
  content: "";
  position: absolute;
  left: 3px; top: var(--space-1);
  width: 14px; height: 14px;
  border-radius: var(--radius-circle);
  background: var(--brand);
  box-shadow: var(--shadow-brand);
}
@media (min-width: 768px) { .amf-journey li::after { left: var(--space-1); top: 3px; } }
.amf-journey__card {
  display: block;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  color: var(--text-body);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base), transform var(--dur-base);
  height: 100%;
}
.amf-journey__card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.amf-journey__tag {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--green-700);
  margin-bottom: var(--space-1);
}
.amf-journey__name {
  display: block;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.amf-journey__price {
  display: block;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}
.amf-journey__desc { display: block; font-size: var(--text-sm); margin-top: var(--space-2); }

/* Image placeholder slots — replaced by real images later */
.amf-imgslot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  background: var(--brand-subtle);
  border: 2px dashed var(--brand-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  color: var(--green-700);
  min-height: 160px;
}
.amf-imgslot strong { font-size: var(--text-sm); color: var(--green-800); }
.amf-imgslot span { font-size: var(--text-xs); color: var(--text-muted); max-width: 32ch; }
.amf-imgslot--sq    { aspect-ratio: 1 / 1; }
.amf-imgslot--photo { aspect-ratio: 3 / 2; min-height: 0; }
.amf-imgslot--wide  { aspect-ratio: 16 / 6; }
.amf-imgslot--video { aspect-ratio: 16 / 9; }
.amf-imgslot--tall  { aspect-ratio: 9 / 16; max-width: 280px; margin-inline: auto; }

/* Next-step strip */
.amf-next {
  background: var(--brand-subtle);
  border-top: 1px solid var(--brand-border);
  padding-block: var(--space-8);
}
.amf-next .amf-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.amf-next__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--green-700);
  display: block;
}
.amf-next__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}

/* 2-col media rows used with slots */
.amf-media { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 768px) { .amf-media { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }


/* --------------------------------------------------------------------------
   v2.4 — avatars, hero ticks, floating WhatsApp, card accents, footer polish
   -------------------------------------------------------------------------- */
/* Review avatars */
.amf-avatar {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-circle);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
}
.amf-avatar--1 { background: var(--green-100); color: var(--green-900); }
.amf-avatar--2 { background: var(--green-800); color: var(--white); }
.amf-avatar--3 { background: var(--green-500); color: var(--neutral-900); }
.amf-result__head { display: flex; align-items: center; gap: var(--space-3); }
.amf-result__who { display: block; font-weight: var(--weight-bold); color: var(--text-strong); font-size: var(--text-sm); line-height: var(--leading-snug); }
.amf-result__src { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.amf-result__src .amf-stars { color: var(--green-700); letter-spacing: var(--tracking-wide); }
.amf-result--review { border-left: 3px solid var(--green-200); }

/* Hero benefit ticks */
.amf-ticks { list-style: none; padding: var(--space-0); margin: var(--space-5) var(--space-0) var(--space-8); display: flex; flex-direction: column; gap: var(--space-2); }
@media (min-width: 480px) { .amf-ticks { flex-direction: row; flex-wrap: wrap; gap: var(--space-3) var(--space-5); } }
.amf-ticks li { margin: var(--space-0); display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-body); }
.amf-ticks li::before {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  border-radius: var(--radius-circle);
  background-color: var(--brand-subtle);
  border: 1px solid var(--brand-border);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008846' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9.5'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Floating WhatsApp button */
.amf-wa {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  width: 56px; height: 56px;
  border-radius: var(--radius-circle);
  background: var(--cta-bg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-brand-lg);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast);
}
.amf-wa:hover { transform: scale(1.06); text-decoration: none; box-shadow: var(--shadow-brand-lg); }
.amf-wa:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.amf-wa svg { width: 30px; height: 30px; fill: var(--cta-text); }
@media (max-width: 767.98px) {
  .amf-sticky-cta ~ .amf-wa { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

/* Card accents — vibrant but quiet */
.amf-grid > .amf-card { border-top: 3px solid var(--green-200); }
.amf-grid > .amf-card:hover { border-top-color: var(--brand); }
.amf-price { border-color: var(--brand-border); }
.amf-faq:hover { border-color: var(--brand-border); }
.amf-journey__card:hover { border-color: var(--brand-border); }
.amf-credentials { box-shadow: var(--shadow-sm); }
.amf-section--sunken { border-block: 1px solid var(--border-subtle); }
.amf-steps li { border-top: 3px solid var(--green-200); }

/* Footer polish */
.amf-footer__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  background: var(--green-800);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-12);
}
.amf-footer__cta strong { color: var(--white); font-size: var(--text-lg); }
.amf-footer__ctasub { display: block; font-size: var(--text-sm); color: var(--green-100); }
.amf-footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.amf-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-10); height: var(--space-10);
  border-radius: var(--radius-circle);
  border: 1px solid var(--green-800);
  color: var(--green-200);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.amf-footer__social a:hover { background: var(--green-800); color: var(--white); text-decoration: none; }
.amf-footer__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------------------
   Rev 6 (August 1, 2026) — Start Here rebuild
   7.6 Form card + 8.16 voice-note block. Tokens only, no new colours.
   The Start Here registration page is edited 4 times a month, so its form
   and the Day 0 voice-note block are real components here, never page CSS.
   -------------------------------------------------------------------------- */
/* 7.6 Form card .amf-form — wraps .amf-field/.amf-input/.amf-check/.amf-btn */
.amf-form {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.amf-form__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: var(--space-0) var(--space-0) var(--space-1);
}
.amf-form__sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: var(--space-0) var(--space-0) var(--space-5);
}
.amf-form .amf-btn { width: 100%; }
.amf-form__foot {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: var(--space-3) var(--space-0) var(--space-0);
}

/* 8.16 Voice-note block .amf-voice — Day 0 welcome message on the
   challenge thank-you page. Photo above an <audio> player so it reads
   as Amar speaking. */
.amf-voice {
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}
.amf-voice img {
  width: var(--space-24);
  height: var(--space-24);
  border-radius: var(--radius-circle);
  object-fit: cover;
  display: block;
  margin: var(--space-0) auto var(--space-4);
  box-shadow: var(--shadow-sm);
}
.amf-voice__name {
  font-family: var(--font-stat);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-0) var(--space-0) var(--space-1);
}
.amf-voice__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: var(--space-0) var(--space-0) var(--space-4);
}
.amf-voice audio {
  display: block;
  width: 100%;
  margin-inline: auto;
}
.amf-voice__hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: var(--space-4) var(--space-0) var(--space-0);
}

/* --------------------------------------------------------------------------
   6.1 Reduced motion — mandatory
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   REV 4 · PREMIUM REFINEMENT LAYER          added 3 August 2026
   --------------------------------------------------------------------------
   Raj, 3 Aug: "still want the website to be professional. yet better looking.
   and this time completely in English. and want premium text yet easy to
   understand."

   Everything above this line is the original stylesheet with three edits made
   in place: the neutral scale is warm, the type scale is taller, and the
   shadow ramp is softer. This block does the rest.

   ⚠️ THIS BLOCK IS SELF-CONTAINED AND REVERSIBLE. Delete from this comment to
   the start of SECTION 10 (EXPLANATORY GRAPHICS, added 10 August 2026) and the
   site returns to its rev 3 appearance exactly. Nothing above depends on
   anything below.

   ⚠️ AMENDED 10 August 2026. This used to read "delete to the end of the file".
   Section 10 was appended after this block, so following the old instruction
   would silently strip six diagrams from five pages. Section 10 is NOT part of
   the rev 4 visual pass and is not reverted with it.

   The principle behind every rule here: the site looked like a dashboard
   because separation was carried by borders, shadows and a bright green. It
   is carried by hairlines, space and type weight now. #00BF63 survives on the
   logo and on buttons and nowhere else.
   ========================================================================== */

:root {
  /* The green glow under every primary button and journey dot was the single
     loudest thing on the page. Redefining the token kills all of them at once
     rather than overriding nine call sites. */
  --shadow-brand:    0 2px 8px rgba(16, 44, 31, .12);
  --shadow-brand-lg: 0 6px 18px rgba(16, 44, 31, .16);

  /* CTA one notch deeper. White on this is 5.9:1, comfortably AA. */
  --cta-bg:        #00703C;
  --cta-bg-hover:  #005B31;
  --cta-bg-active: #004A28;
}

/* --------------------------------------------------------------------------
   Type · headings drop from 800 to 700 and tighten
   At 55px, weight 800 in Gabarito is heavy enough to read as shouting. 700
   with tighter tracking reads as confident instead.
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.07;
}
h2 { line-height: 1.11; }
h3 { font-weight: 700; letter-spacing: -.014em; line-height: 1.3; }

/* Lead paragraph under a section heading. Slightly larger, capped measure. */
.amf-section__head p,
.amf-hero__sub {
  font-size: clamp(18px, 1.55vw, 20.5px);
  line-height: 1.62;
  max-width: 62ch;
  color: var(--text-body);
}
.amf-section__head { margin-bottom: var(--space-12); }

/* --------------------------------------------------------------------------
   Eyebrow · a brass hairline, not a green dot
   The dot put saturated brand green at the top of every single section.
   -------------------------------------------------------------------------- */
.amf-eyebrow {
  gap: 14px;
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: .17em;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}
.amf-eyebrow::before {
  width: 26px;
  height: 1px;
  border-radius: 0;
  background: var(--brass);
}
.amf-section--inverse .amf-eyebrow { color: rgba(240, 245, 241, .68); }
.amf-section--inverse .amf-eyebrow::before { background: var(--brass-2); }

/* --------------------------------------------------------------------------
   Section rhythm · more air
   -------------------------------------------------------------------------- */
.amf-section { padding-block: var(--space-20); }
@media (min-width: 768px)  { .amf-section { padding-block: 108px; } }
@media (min-width: 1080px) { .amf-section { padding-block: 132px; } }

.amf-section--sunken {
  background: var(--neutral-100);
  border-block: 1px solid var(--line-soft);
}

/* Deep bands: evergreen, not the bright green-800 they used to be. */
.amf-section--inverse { background: var(--surface-deep); }
.amf-section--inverse a:not(.amf-btn) { color: var(--brass-2); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.amf-hero { padding-block: var(--space-16) var(--space-16); }
@media (min-width: 1080px) { .amf-hero { padding-block: 104px 112px; } }

/* The green gradient wash is gone. Warm paper carries the hero now. */
.amf-hero--tint { background: var(--surface-page); }

@media (min-width: 768px) {
  .amf-hero--split { grid-template-columns: 1.12fr .88fr; gap: var(--space-16); }
}

.amf-hero__title { margin-bottom: var(--space-6); }
.amf-hero__sub { margin-bottom: var(--space-8); }

/* --------------------------------------------------------------------------
   Photography · a brass plate behind, no green, no dot grid, no heavy shadow
   -------------------------------------------------------------------------- */
.amf-photo img {
  border-radius: 3px;
  box-shadow: none;
  filter: saturate(.94) contrast(1.02);
}
.amf-photo::before {
  inset: var(--space-7, 28px) calc(-1 * var(--space-5)) calc(-1 * var(--space-6)) var(--space-6);
  border-radius: 3px;
  background: var(--brass-soft);
}
/* the green dot-grid ornament in the top-left corner */
.amf-photo::after { display: none; }

/* --------------------------------------------------------------------------
   Cards · hairline, near-flat. The 3px green cap on every grid card goes.
   -------------------------------------------------------------------------- */
.amf-card {
  border-color: var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: var(--space-6);
}
.amf-card:hover { box-shadow: none; }
.amf-card--interactive:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--neutral-400);
}
.amf-grid > .amf-card { border-top: 1px solid var(--line); }
.amf-grid > .amf-card:hover { border-top-color: var(--neutral-400); }
.amf-steps li { border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   ⚠️ IMAGE PLACEHOLDERS · hidden site-wide
   These grey "IMAGE #2 · Why weight loss stalls after 40" boxes were shipping
   on the live homepage. A placeholder makes a finished page look unfinished,
   and no amount of colour work survives one on screen.

   Hidden here rather than deleted from the markup so the briefs inside them
   are not lost. When a real photograph exists, replace the .amf-imgslot div
   with a <picture> and the layout is unchanged.
   -------------------------------------------------------------------------- */
.amf-imgslot { display: none !important; }

/* --------------------------------------------------------------------------
   Journey ribbon · brass nodes instead of glowing green dots
   -------------------------------------------------------------------------- */
.amf-journey li::after,
.amf-journey::after {
  width: 9px; height: 9px;
  background: var(--brass);
  box-shadow: none;
}
@media (min-width: 768px) {
  .amf-journey li::after { top: 6px; }
  .amf-journey::after { top: 6px; }
}
.amf-journey li::before { background: var(--line); }
.amf-journey__card {
  border-color: var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
}
.amf-journey__card:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--neutral-400);
}
.amf-journey__tag {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--brass);
}

/* --------------------------------------------------------------------------
   Programs
   -------------------------------------------------------------------------- */
.amf-program__tag {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--brass);
}
.amf-program__price {
  font-family: var(--font-stat);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.01em;
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   Stats band
   -------------------------------------------------------------------------- */
.amf-stat__num {
  font-family: var(--font-stat);
  font-weight: var(--weight-semibold);
  letter-spacing: -.02em;
}
.amf-stat__label { color: rgba(240, 245, 241, .68); }

/* --------------------------------------------------------------------------
   Reviews · a quote, not a box
   -------------------------------------------------------------------------- */
.amf-result--review {
  border-left: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding-inline: 0;
}
.amf-result__quote {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: -.014em;
  line-height: 1.5;
  color: var(--text-strong);
}
.amf-result--review .amf-result__quote { font-size: clamp(18px, 1.9vw, 21px); }
.amf-result__src .amf-stars { color: var(--brass); }

/* Avatars: brass and ink, no bright green fills */
.amf-avatar { width: 40px; height: 40px; font-size: var(--text-sm); }
.amf-avatar--1 { background: var(--brass-soft); color: var(--brass); }
.amf-avatar--2 { background: var(--surface-deep); color: var(--white); }
.amf-avatar--3 { background: var(--neutral-200); color: var(--text-strong); }

/* --------------------------------------------------------------------------
   FAQ · hairline rows
   -------------------------------------------------------------------------- */
.amf-faq {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin-bottom: 0;
}
.amf-faq:hover { border-color: var(--line); border-bottom-color: var(--line); }
.amf-faq[open] { background: transparent; }
.amf-faq summary {
  padding-inline: 0;
  padding-block: var(--space-6);
  font-size: 18.5px;
  letter-spacing: -.014em;
}
.amf-faq summary::after { border-color: var(--brass); }
.amf-faq__body { padding: 0 0 var(--space-6); max-width: 72ch; }

/* --------------------------------------------------------------------------
   Header · warm and translucent
   -------------------------------------------------------------------------- */
.amf-header {
  background: rgba(251, 249, 245, .9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.amf-header__nav a:not(.amf-btn) { font-weight: var(--weight-medium); }

/* --------------------------------------------------------------------------
   Buttons · flat, no glow
   -------------------------------------------------------------------------- */
.amf-btn { border-radius: 8px; }
.amf-btn--primary { box-shadow: none; }
.amf-btn--primary:hover { box-shadow: none; }
.amf-btn--secondary,
.amf-btn--outline { border-color: var(--line); }
.amf-btn--secondary:hover,
.amf-btn--outline:hover { border-color: var(--text-strong); }

/* Floating WhatsApp button */
.amf-wa { box-shadow: var(--shadow-md); }
.amf-wa:hover { box-shadow: var(--shadow-lg); }

/* Hero ticks: keep the tick, calm the ring */
.amf-ticks li::before {
  background-color: transparent;
  border-color: var(--line);
}

/* --------------------------------------------------------------------------
   Footer · evergreen
   -------------------------------------------------------------------------- */
.amf-footer { background: var(--surface-deep); }
.amf-footer a:not(.amf-btn) { color: rgba(240, 245, 241, .72); }
.amf-footer a:not(.amf-btn):hover { color: var(--white); }
.amf-footer__cta {
  background: transparent;
  border: 1px solid var(--line-deep);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.amf-footer__ctasub { color: rgba(240, 245, 241, .68); }
.amf-footer__creds { color: rgba(240, 245, 241, .72); }
.amf-footer h3,
.amf-footer h4 {
  font-size: 12px;
  letter-spacing: .13em;
  color: var(--white);
}
.amf-footer__social a { border-color: var(--line-deep); color: rgba(240, 245, 241, .72); }
.amf-footer__social a:hover { background: rgba(240, 245, 241, .1); color: var(--white); }
.amf-footer__bottom { border-top-color: var(--line-deep); }

/* --------------------------------------------------------------------------
   Comparison table · hairlines
   -------------------------------------------------------------------------- */
.amf-table--compare td { border-color: var(--line-soft); }
.amf-compare-yes { color: var(--cta-bg); font-weight: var(--weight-semibold); }

/* --------------------------------------------------------------------------
   8.17 Editorial numbered list  ·  NEW in rev 4
   Used by the homepage "The reason" section. Three claims, hairline
   separated, numeral in brass. Deliberately not a card grid: this is the
   section that has to feel like reading rather than browsing.
   -------------------------------------------------------------------------- */
.amf-reason {
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.amf-reason > li {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 820px) {
  .amf-reason > li {
    grid-template-columns: 88px 1fr 1.35fr;
    gap: var(--space-10);
    align-items: start;
    padding-block: var(--space-10);
  }
}
.amf-reason__n {
  font-family: var(--font-stat);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: .05em;
  color: var(--brass);
  padding-top: 5px;
}
.amf-reason h3 { max-width: 22ch; margin-bottom: 0; }
.amf-reason p { margin: 0; }

/* 8.18 Measurement grid  ·  NEW in rev 4. Sits on .amf-section--inverse. */
.amf-meas {
  display: grid;
  gap: 0;
  margin-top: var(--space-12);
  border-top: 1px solid var(--line-deep);
}
@media (min-width: 760px) {
  .amf-meas { grid-template-columns: repeat(4, 1fr); border-top: 0; }
}
.amf-meas > div { padding-block: var(--space-6); border-bottom: 1px solid var(--line-deep); }
@media (min-width: 760px) {
  .amf-meas > div {
    padding: 0 var(--space-6);
    border-bottom: 0;
    border-left: 1px solid var(--line-deep);
  }
  .amf-meas > div:first-child { padding-left: 0; border-left: 0; }
}
.amf-meas__n {
  display: block;
  font-family: var(--font-stat);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--brass-2);
  letter-spacing: .08em;
  margin-bottom: var(--space-3);
}
.amf-meas h3 { margin-bottom: var(--space-2); }
.amf-meas p { font-size: var(--text-sm); line-height: 1.55; color: rgba(240, 245, 241, .68); margin: 0; }

/* 8.19 Pull quote · NEW in rev 4 */
.amf-pull {
  margin: var(--space-8) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.45;
  letter-spacing: -.015em;
  font-weight: var(--weight-medium);
  color: var(--text-strong);
  max-width: 34ch;
}

/* 8.20 Text link with a brass rule · NEW in rev 4 */
.amf-tlink {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px;
}
.amf-tlink:hover { color: var(--brass); text-decoration: none; }

/* 8.18b Measurement note · the honest-limits paragraph under .amf-meas */
.amf-meas__note {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-deep);
  max-width: 70ch;
  color: rgba(240, 245, 241, .72);
}

/* Stat strip: --text-4xl is the H1 size now, which is far too loud for a
   four-up credibility band. Pinned to its own smaller ramp. */
.amf-stat__num { font-size: clamp(27px, 3vw, 38px); }

/* Hero byline: was a green-bordered pill with a shadow, which read as a form
   field sitting under the buttons. A hairline rule above it does the same job
   and keeps the hero quiet. */
.amf-hero__badge {
  display: flex;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-6) 0 0;
  margin-top: var(--space-8);
  max-width: 46ch;
}
.amf-hero__badge img { width: 46px; height: 46px; flex: none; }
.amf-hero__badge strong {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 15.5px;
  margin-bottom: 2px;
}
.amf-hero__badge span { line-height: 1.45; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   8.21 Build credit  ·  added 3 August 2026
   Sits under the legal row on every page. Deliberately the quietest thing in
   the footer: an agency credit that competes with the medical disclaimer above
   it would be reading the room badly.
   -------------------------------------------------------------------------- */
.amf-footer__build {
  margin: var(--space-4) var(--space-0) var(--space-0);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(240, 245, 241, .5);
}
.amf-footer__build a {
  color: rgba(240, 245, 241, .72);
  border-bottom: 1px solid var(--line-deep);
  padding-bottom: 1px;
}
.amf-footer__build a:hover { color: var(--white); text-decoration: none; }

/* --------------------------------------------------------------------------
   8.22 Hero figure with caption  ·  added 3 August 2026
   Raj: "amar's image is at 2 places .. if main hero image is there, cant the
   intro be there rather than a small repeating image?"

   He is right. The hero carried the full portrait on the right AND a 40px
   circular crop of the same photograph in the byline under the buttons. The
   credentials now sit as a caption on the portrait itself, which is where a
   reader expects to find out who they are looking at.

   ⚠️ .amf-hero__badge is NOT retired. Six other pages still use it, and on
   those pages there is no large portrait for the caption to attach to, so the
   thumbnail is doing real work there. This class is the homepage variant only.

   The caption clears the brass plate behind the photo, which overhangs the
   image by 24px at the bottom. Do not reduce margin-top below --space-8.
   -------------------------------------------------------------------------- */
.amf-herofig { margin: 0; }
.amf-herofig__cap {
  margin-top: var(--space-10);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-muted);
}
.amf-herofig__cap b {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 16.5px;
  letter-spacing: -.01em;
  color: var(--text-strong);
  margin-bottom: 3px;
}

/* ==========================================================================
   REV 4.1 · 3 August 2026
   Raj: "see if the fonts are small and need to make a little bigger,
   specially the section breaks" · "no significant difference between the
   program deliverables" · "your five days should be showing deliverables
   better way"
   ========================================================================== */

/* --- section labels come up, since they mark every section break ---------- */
.amf-eyebrow {
  font-size: 12.5px;
  letter-spacing: .16em;
}
.amf-eyebrow::before { width: 30px; }

/* Lead paragraph under a section heading, one step larger */
.amf-section__head p,
.amf-hero__sub {
  font-size: clamp(19px, 1.65vw, 22px);
  line-height: 1.6;
}

.amf-faq summary { font-size: 20px; }
.amf-herofig__cap { font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   8.23 Program spec  ·  .amf-spec
   The six program cards read as interchangeable because each was a heading,
   a paragraph and a price. A paragraph cannot be compared across cards; a
   labelled row in the same position on every card can.

   The three labels never change. Only the values do. That is the whole point:
   a visitor reads "Plan" on all six cards and sees instantly that four of them
   say "no personal plan" and two say "written for you".

   ⚠️ Keep the labels identical and in the same order on every card. The moment
   one card says "Your plan" and another says "Diet", the comparison breaks and
   this becomes decoration.
   -------------------------------------------------------------------------- */
.amf-spec {
  margin: var(--space-5) var(--space-0);
  padding: var(--space-4) var(--space-0) var(--space-1);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--space-3);
}
/* Labels sit above values, not beside them. In a three-up card grid the cards
   are ~250px wide and a side-by-side label column forced "Amar's time" onto
   two lines on every card. Stacked reads cleaner and stays scannable, because
   the labels still land at the same vertical rhythm across all six cards. */
.amf-spec > div { display: block; }
.amf-spec dt {
  margin-bottom: 2px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0;
}
.amf-spec dd {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-body);
}
/* the value that actually separates this card from the one beside it */
.amf-spec dd b {
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
}
/* a value that is deliberately a limitation, said plainly */
.amf-spec dd.amf-spec--none { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   8.24 Day-by-day deliverables  ·  .amf-days
   Replaces the three-column table on the Start Here page. A table told her
   the theme and the task; it never told her what actually arrives on her
   phone, which is the thing she is deciding about.

   Each row: the day, what lands, what she does with it.
   -------------------------------------------------------------------------- */
.amf-days {
  list-style: none;
  margin: var(--space-8) var(--space-0) var(--space-0);
  padding: 0;
  border-top: 1px solid var(--line);
}
.amf-days > li {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 820px) {
  .amf-days > li {
    grid-template-columns: 96px 1.15fr 1fr;
    gap: var(--space-8);
    align-items: start;
    padding-block: var(--space-7, 28px);
  }
}
.amf-days__d {
  font-family: var(--font-stat);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
  padding-top: 3px;
}
.amf-days__t {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -.014em;
  color: var(--text-strong);
  line-height: 1.25;
}
.amf-days__t span {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--text-muted);
}
/* what physically arrives on her phone that day */
.amf-days__get { margin: 0; }
.amf-days__get li {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding-left: 26px;
  position: relative;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.amf-days__get { padding: 0; }
.amf-days__get li::before {
  content: "";
  position: absolute;
  left: 0; top: .48em;
  width: 13px; height: 1px;
  background: var(--brass);
}
.amf-days__get li b { color: var(--text-strong); font-weight: var(--weight-semibold); }

/* the live session row carries a little more weight */
.amf-days > li.amf-days--live .amf-days__d { color: var(--cta-bg); }

/* the task line inside a day row */
.amf-days__task {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-body);
}
.amf-days__task b {
  display: block;
  font-family: var(--font-stat);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 3px;
}
/* day zero sits above the five, so it reads as the thing that happens on signup */
.amf-days--zero { background: var(--surface-sunken); }
.amf-days--zero .amf-days__d { color: var(--text-muted); }

/* Price qualifier ("next cohort ...", "per 12 weeks") should not compete with
   the number itself now that the base size is 18px. */
.amf-program__price .amf-muted {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}

/* ==========================================================================
   REV 4.2 · 3 August 2026 · premium program cards
   Raj: "the program deliverables should differ from each other · programs
   should look premium."

   Two moves. First, one program is deliberately elevated instead of six cards
   sharing equal weight, because equal weight makes the visitor do the ranking
   herself and that was the original complaint. 40+ Transform is the chosen
   one: it is the core of the master plan and it scales, since a single live
   session serves the whole cohort where Private cannot.

   Second, the price stops being a line of text and becomes a price: its own
   figure, on its own rule, with the qualifier beneath rather than beside it.
   ========================================================================== */

/* --- the price block ------------------------------------------------------ */
.amf-program__price {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-stat);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--text-strong);
  margin-bottom: var(--space-4);
}
.amf-program__price .amf-muted {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  line-height: 1.4;
}

/* --- the elevated card ---------------------------------------------------- */
.amf-program--feature {
  background: var(--surface-deep);
  border-color: var(--surface-deep);
}
.amf-program--feature h3,
.amf-program--feature .amf-program__price,
.amf-program--feature .amf-spec dd b { color: var(--white); }
.amf-program--feature p { color: rgba(240, 245, 241, .78); }
.amf-program--feature .amf-program__tag { color: var(--brass-2); }
.amf-program--feature .amf-spec { border-top-color: var(--line-deep); }
.amf-program--feature .amf-spec dt { color: rgba(240, 245, 241, .48); }
.amf-program--feature .amf-spec dd { color: rgba(240, 245, 241, .82); }
.amf-program--feature .amf-program__price { border-top-color: var(--line-deep); }
.amf-program--feature .amf-program__price .amf-muted { color: rgba(240, 245, 241, .6); }
.amf-program--feature .amf-icon {
  background: rgba(240, 245, 241, .1);
  border-color: var(--line-deep);
  color: var(--brass-2);
}
.amf-program--feature .amf-btn--primary { background: var(--green-500); color: var(--neutral-900); }
.amf-program--feature .amf-btn--primary:hover { background: var(--green-400); }
/* the grid rule adds a 1px cap to every card; on the dark one it would show */
.amf-grid > .amf-card.amf-program--feature { border-top-color: var(--surface-deep); }
.amf-grid > .amf-card.amf-program--feature:hover { border-top-color: var(--brass); }

/* the badge that says why this card is darker */
.amf-program__flag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: var(--font-stat);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--surface-deep);
  background: var(--brass-2);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  margin-bottom: var(--space-4);
}

/* --- the 1:1 tier · a brass cap rather than a dark fill, so it reads as
       expensive without competing with the elevated card ------------------- */
.amf-grid > .amf-card.amf-program--premium { border-top: 2px solid var(--brass); }
.amf-grid > .amf-card.amf-program--premium:hover { border-top-color: var(--brass); }

/* --- the ₹499-credited-to-Transform mechanic ------------------------------
   The pricing research called this the single strongest device against price
   shock: it turns a ₹9,999 decision into a ₹9,500 one taken AFTER two weeks of
   living the method. It was buried in the refund policy. It is surfaced on the
   Reset card, the Reset page and the Transform price block now.
   -------------------------------------------------------------------------- */
.amf-program__credit,
.amf-price__credit {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  background: var(--brass-soft);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-body);
}
.amf-program__credit b,
.amf-price__credit b { color: var(--text-strong); font-weight: var(--weight-semibold); }
.amf-program__credit { margin-bottom: var(--space-4); }

/* ==========================================================================
   REV 4.3 · 3 August 2026
   Raj: Private must be visibly worth more than Transform · say how many plans
   she actually gets · add a therapeutic consultation tier · highlight the
   benefit on each card · the 12-week timeline section is empty.
   ========================================================================== */

/* --- 8.25 Benefits on a program card · .amf-program__wins -----------------
   The spec rows say what the program IS. These say what she GETS OUT of it.
   Kept to three lines: any more and the card stops being scannable, which was
   the whole point of the spec block above it.
   -------------------------------------------------------------------------- */
.amf-program__wins {
  list-style: none;
  margin: var(--space-4) var(--space-0) var(--space-0);
  padding: 0;
}
.amf-program__wins li {
  position: relative;
  margin: 0 0 var(--space-2);
  padding-left: 25px;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-body);
}
.amf-program__wins li::before {
  content: "";
  position: absolute;
  left: 0; top: .34em;
  width: 14px; height: 8px;
  border-left: 1.8px solid var(--brass);
  border-bottom: 1.8px solid var(--brass);
  transform: rotate(-45deg);
}
.amf-program--feature .amf-program__wins li { color: rgba(240, 245, 241, .86); }
.amf-program--feature .amf-program__wins li::before {
  border-left-color: var(--brass-2);
  border-bottom-color: var(--brass-2);
}

/* --- 8.26 Phase timeline · .amf-timeline ----------------------------------
   Built because "The 12 weeks at a glance" on transform.html was an empty
   section: its only content was an .amf-imgslot placeholder for an
   infographic that does not exist, and rev 4 hid every imgslot site-wide.
   A heading over nothing is worse than no section, so this replaces it with
   real content that also states the delivery cadence.
   -------------------------------------------------------------------------- */
.amf-timeline {
  list-style: none;
  margin: var(--space-10) var(--space-0) var(--space-0);
  padding: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 860px) {
  .amf-timeline { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 0; }
}
.amf-timeline > li {
  margin: 0;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 860px) {
  .amf-timeline > li {
    padding: var(--space-6) var(--space-6) var(--space-2) 0;
    border-bottom: 0;
    border-top: 2px solid var(--line);
  }
  .amf-timeline > li:first-child { border-top-color: var(--brass); }
}
.amf-timeline__w {
  display: block;
  font-family: var(--font-stat);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-2);
}
.amf-timeline h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.amf-timeline p {
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: 0;
  color: var(--text-body);
}
.amf-timeline__note {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 74ch;
}

/* --- 8.27 the consultation tier ------------------------------------------
   Sits between the self-serve tiers and the coached ones. It is a paid
   assessment, not a program, so it gets its own quiet marker rather than the
   feature fill or the brass cap.
   -------------------------------------------------------------------------- */
.amf-grid > .amf-card.amf-program--consult { border-top: 2px solid var(--green-700); }
.amf-grid > .amf-card.amf-program--consult:hover { border-top-color: var(--green-700); }
.amf-program--consult .amf-program__tag { color: var(--green-700); }

/* Notices were on the cool semantic palette (blue / green / amber fills) from
   the original token set. Against warm paper they read as pasted in from a
   different site. Rewarmed here: a tinted panel with a coloured edge, so they
   still signal "read this" without breaking the page. */
.amf-notice {
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}
.amf-notice--info    { background: var(--neutral-100); border-left: 3px solid var(--brass); }
.amf-notice--success { background: var(--brass-soft);  border-left: 3px solid var(--cta-bg); }
.amf-notice--warning { background: var(--brass-soft);  border-left: 3px solid var(--brass); }
.amf-notice p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   REV 4.4 · 3 August 2026 · nav breakpoint
   The Therapeutic Nutrition Consultation was promoted out of the Programs
   dropdown to its own top-level item, and "Programs" became "Weight Loss
   Programs". That takes the desktop nav to eight items.

   It was switching on at 768px, where "Weight Loss Programs", "Therapeutic
   Nutrition" and "New Mom Program" each wrapped onto two lines and the header
   grew to three rows. The hamburger now holds until 1280px, and above that
   every label is kept on a single line.

   ⚠️ Raised 1150px → 1280px on 6 August 2026. Eight nowrap nav items plus the
   button need roughly 1270px, so every window between 1150px and 1278px got a
   sideways-scrolling page with the "Start Here · Free" button hanging off the
   right edge. A 1280px screen with the browser not maximised landed there
   constantly. 1280px is the first width measured clean.

   ⚠️ Adding a ninth nav item will break this again. Raise the breakpoint, or
   move something back into the dropdown.
   -------------------------------------------------------------------------- */
.amf-header__nav { display: none; }
@media (min-width: 1280px) {
  .amf-header__nav { display: flex; align-items: center; gap: 22px; }
  .amf-header__nav a:not(.amf-btn),
  .amf-dd > summary { white-space: nowrap; }
}
.amf-mnav { display: block; }
@media (min-width: 1280px) { .amf-mnav { display: none; } }

/* The header shares .amf-container, which caps at --container-lg (1080px).
   With eight nav items that leaves roughly 860px for the links and the button,
   and they need about 920px. The header alone gets the wider cap; body content
   stays at 1080px so the reading measure is unaffected. */
.amf-header .amf-container { max-width: var(--container-xl); }
@media (min-width: 1280px) { .amf-header__nav { gap: 20px; } }

/* --------------------------------------------------------------------------
   REV 4.4 · Deep-band legibility fixes
   Two separate white-on-white / dark-on-dark bugs on .amf-section--inverse.

   1. `.amf-section__head p` hard-sets `--text-body` (a dark neutral). That
      declaration beat the band's inherited `color`, so the lead paragraph
      under every inverse heading rendered near-black on evergreen — visible
      only as a faint smudge. Seen on consultation.html and index.html.

   2. A white `.amf-card` sitting inside a deep band inherited the band's
      white text colour, so the card's <h3> and body copy were white on
      white — the cards looked completely empty. Seen on consultation.html
      "Where this sits" (Start Here / 40+ Transform / AmarFit Private).
      Gold accents also used --brass-2, the on-dark gold, on a white surface.
   -------------------------------------------------------------------------- */

/* 1 · lead paragraph on a deep band */
.amf-section--inverse .amf-section__head p { color: rgba(240, 245, 241, .78); }

/* 2 · light cards on a deep band get normal ink back */
.amf-section--inverse .amf-card { color: var(--text-body); }
.amf-section--inverse .amf-card h1,
.amf-section--inverse .amf-card h2,
.amf-section--inverse .amf-card h3,
.amf-section--inverse .amf-card h4 { color: var(--text-strong); }
.amf-section--inverse .amf-card p,
.amf-section--inverse .amf-card li,
.amf-section--inverse .amf-card dd { color: var(--text-body); }
.amf-section--inverse .amf-card .amf-muted,
.amf-section--inverse .amf-card .amf-spec dt { color: var(--text-muted); }

/* on-light gold inside those cards, not the on-dark gold */
.amf-section--inverse .amf-card .amf-program__tag,
.amf-section--inverse .amf-card .amf-eyebrow,
.amf-section--inverse .amf-card .amf-icon { color: var(--brass); }
.amf-section--inverse .amf-card .amf-eyebrow::before { background: var(--brass); }
.amf-section--inverse .amf-card a:not(.amf-btn) { color: var(--brass); }
.amf-section--inverse .amf-card .amf-tlink { border-bottom-color: var(--brass); }

/* --------------------------------------------------------------------------
   REV 4.5 · Price block button spacing
   `.amf-cta-band .amf-btn` already gets margin-top; `.amf-price` never did,
   so the primary CTA and the "Have a question?" outline button below it sat
   flush against each other with no gap. Scoped to .amf-price only.
   -------------------------------------------------------------------------- */
.amf-price .amf-btn + .amf-btn { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   REV 4.6 · CTA buttons no longer overflow narrow phones
   `.amf-btn` is `white-space: nowrap` with a fixed height, so a long label
   ("Have a question? WhatsApp us" = 368px, "Book the consultation · ₹1,500")
   pushed past the right edge of a 390px screen and gave the page a
   horizontal scrollbar. Pre-existing on the price block; would have doubled
   once the closing band got the same pair of buttons.

   Below 480px the CTA pairs go full width and are allowed to wrap onto a
   second line. Scoped to the three places that carry long CTA labels, so
   nav, form and inline buttons are untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 479.98px) {
  .amf-price .amf-btn,
  .amf-cta-band .amf-btn,
  .amf-hero__actions .amf-btn {
    display: flex;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: var(--control-lg);
    padding-block: 13px;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   REV 4.7 · Team grid  ·  used by section 10b on index-b.html
   Amar's card plus three associate dieticians. Unused on every other page,
   so this block is inert until the variant is chosen.
   -------------------------------------------------------------------------- */
.amf-team {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 560px)  { .amf-team { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .amf-team { grid-template-columns: repeat(4, 1fr); } }

.amf-team__card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--surface-card);
}
.amf-team__card--lead { border-color: var(--brass); }

/* square photo well · a real photograph and the silhouette share it exactly */
.amf-team__ph {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--brass-soft);
  margin-bottom: var(--space-4);
}
.amf-team__ph img,
.amf-team__ph picture { display: block; width: 100%; height: 100%; object-fit: cover; }

/* placeholder silhouette · deliberate brand shape, never a grey box */
.amf-team__sil { display: block; width: 100%; height: 100%; fill: var(--brass); opacity: .38; }

.amf-team__name {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-1);
  color: var(--text-strong);
}
.amf-team__role {
  font-family: var(--font-mono, inherit);
  font-size: 12.5px;
  font-weight: var(--weight-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 var(--space-2);
}
.amf-team__yrs {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  margin: 0 0 var(--space-2);
}
.amf-team__focus {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
}

/* every unfilled slot is visibly unfinished on purpose, so the page cannot
   be published by accident with "name to come" still sitting in it */
.amf-team__tocome {
  border-bottom: 2px dashed var(--brass);
  color: var(--text-muted);
  font-style: italic;
  font-weight: var(--weight-regular);
}

.amf-team__note {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 68ch;
}

/* ==========================================================================
   RAZORPAY PAYMENT BUTTON  ·  added 5 Aug 2026
   Razorpay's embed injects its own <button> into this form and cannot be
   restyled to match .amf-btn. This wrapper only controls placement, so the
   embed sits correctly inside .amf-hero__actions (a flex row) and does not
   inherit stray form margins. Do not try to override the inner button:
   Razorpay regenerates it on load and any override silently breaks.
   ========================================================================== */
.amf-rzp { margin: 0; display: inline-flex; align-items: center; }
.amf-rzp > * { margin: 0 !important; }
.amf-hero__actions .amf-rzp { flex: 0 0 auto; }
.amf-rzp__fallback[hidden] { display: none !important; }

/* ==========================================================================
   TIGHTER VERTICAL RHYTHM FOR SHORT-HERO PAGES  ·  added 5 Aug 2026
   The marketing pages want the big open hero: 112px under it, 132px above the
   next section, 244px of paper in between. On a thank-you page the hero is
   four short lines and that gap reads as a broken page rather than as air.

   Two reusable modifiers, not page-scoped. Use them together, on the hero and
   on the section immediately after it, and only on pages whose hero is short:
     <section class="amf-hero amf-hero--tint amf-hero--compact">
     <section class="amf-section amf-section--tight">

   They must stay after the 1080px blocks that set .amf-hero and .amf-section
   padding, because that is the only reason they win. Do not move them up the
   file. Each touches one edge only, so the opposite edge keeps the design
   system's spacing.
   ========================================================================== */
.amf-hero--compact  { padding-block-end: var(--space-10); }
.amf-section--tight { padding-block-start: var(--space-10); }

/* --------------------------------------------------------------------------
   REV 4.8 · 6 August 2026 · horizontal overflow, 320px to 768px
   Ten pages scrolled sideways on a phone. Two root causes, neither of them
   layout-specific, which is why the breakages were scattered across pages
   that look nothing like each other.

   1 · `.amf-btn` is `white-space: nowrap` with a fixed height. Any label
       wider than its column pushed the page open. REV 4.6 fixed this, but
       only below 480px, and the measured breakages are AT 480px and above:
       after-delivery +304px ("New Mom Program · Apply on WhatsApp"),
       circle +147px and reset +74px ("Questions? WhatsApp us"),
       consultation +29px, home +188px (the hero button pair at 480px, where
       .amf-hero__actions turns into a flex row).

   2 · Grid and flex children default to `min-width: auto`, so they refuse to
       shrink below their own content. That is what held the program cards
       and the comparison table wider than a 320px screen: home +36px,
       results and private +7 to 15px.

   The button rules are unconditional rather than inside a media query on
   purpose. `white-space: normal` changes nothing until a label actually runs
   out of room, and `height: auto` with `min-height` keeps a button that still
   fits pixel-identical to before. So this cannot regress the desktop view.
   -------------------------------------------------------------------------- */

/* 1 · long CTA labels may wrap at any width instead of overflowing */
.amf-price .amf-btn,
.amf-cta-band .amf-btn,
.amf-hero__actions .amf-btn {
  max-width: 100%;
  height: auto;
  min-height: var(--control-lg);
  padding-block: 13px;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}

/* 2 · the CTA row itself wraps rather than forcing one line */
.amf-hero__actions { flex-wrap: wrap; }

/* 3 · grid and flex children are allowed to shrink below their content */
.amf-grid > *,
.amf-hero__actions > * { min-width: 0; }

/* 4 · long unbroken strings break rather than push the page open.
       contact.html at 320px: facebook.com/amarfit.official was +50px. */
.amf-contact-card__val,
.amf-contact-card__sub { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   REV 4.9 · 6 August 2026 · honeypot field
   Used by the registration form on challenge.html. Kept out of the visual
   flow and out of the tab order, but NOT display:none, because some bots
   skip hidden fields and the whole point is that they fill it in.
   -------------------------------------------------------------------------- */
.amf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   REV 4.10 · 6 August 2026 · WCAG AA contrast on small text
   Three tokens carried the muted greys and the gold used for eyebrows,
   captions, prices, helper text, spec labels, tags and star ratings. All
   three failed WCAG AA (4.5:1) on all four light surfaces:

     --neutral-500  #6E7C74  4.38 on white, 3.56 on brass-soft
     --neutral-400  #9AA69E  2.52 on white, 2.05 on brass-soft
     --brass        #9C7A43  3.98 on white, 3.23 on brass-soft

   Each was darkened along its own hue until it cleared 4.5:1 against
   brass-soft #EFE7D6, the darkest light surface any of them sits on, so they
   now pass on white, page, sunken and brass-soft alike. Hue and character are
   unchanged; only lightness moved. This matters more here than on most sites:
   the audience is largely over 45, reading on a phone in daylight.

   ⚠️ --brass-2 #C9A96B is the on-dark gold and is deliberately untouched. It
   is only ever used on --surface-deep, where it already passes.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   10. EXPLANATORY GRAPHICS · added 10 August 2026
   --------------------------------------------------------------------------
   Six components that draw what the pages previously only described. They
   exist because the restructure introduced shapes prose is bad at: "any four
   of ten", "six plans across twelve weeks", "two routes off one program".

   RULES THEY ALL FOLLOW
   · No raw hex, ever. Spacing, colour, type and motion are always tokens.
     A few raw px survive where no token exists: hairlines and hairline-like
     borders (1px, 2px), three icon sizes (14/15/17px) and one grid minmax
     (140px). Those are the complete list; add no more.
   · Drawn, never illustrated. Grids, rules, badges and SVG ticks. There is no
     illustration style here for anyone to have to match later.
   · The markup carries the meaning. Nothing is injected by script, so every
     diagram renders and reads with JavaScript off. Script only ever adds
     optional behaviour on top of a complete diagram.
   · Real buttons where something is clickable, so keyboard and screen reader
     work without extra wiring.
   · Motion is small and always inside a prefers-reduced-motion guard.

   ⚠️ These are content, not decoration. If a program's delivery changes, the
   diagram is as wrong as the paragraph next to it. Grep the class name.
   ========================================================================== */

/* --------------------------------------------------------------------------
   10.1 · .amf-week — the class week. transform.html
   Ten sessions, two every weekday, come to any four. Day-major (one row per
   weekday) at every width: it reads like a schedule and never transposes, so
   there is one layout to maintain rather than two.
   No clock times, by decision. The grid shows the SHAPE.
   -------------------------------------------------------------------------- */
.amf-week {
  margin: var(--space-8) var(--space-0);
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.amf-week__grid { display: grid; grid-template-columns: auto 1fr 1fr; gap: var(--space-2); align-items: stretch; }
.amf-week__head {
  font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--neutral-500);
  padding: var(--space-0) var(--space-1) var(--space-2); align-self: end;
}
.amf-week__day {
  display: flex; align-items: center; padding-right: var(--space-3);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: var(--neutral-700); white-space: nowrap;
}
.amf-week__slot {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: var(--space-2); min-height: var(--space-12); padding: var(--space-3) var(--space-2);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: var(--neutral-600); background: var(--neutral-50);
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-out);
}
.amf-week__slot:hover { background: var(--green-50); border-color: var(--green-200); color: var(--neutral-800); }
.amf-week__slot:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.amf-week__slot:active { transform: scale(.98); }
/* --cta-bg, not --brand. Line 79 of this file forbids white on green-500 at
   2.43:1; --cta-bg (green-700) is the site's white-on-green surface at 5.9:1.
   The focus ring is composed WITH the brand shadow rather than replaced by it,
   because these two selectors have equal specificity and the pressed state
   would otherwise win and leave a keyboard user with no visible focus. */
.amf-week__slot[aria-pressed="true"] { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--white); box-shadow: var(--shadow-brand); }
.amf-week__slot[aria-pressed="true"]:hover { background: var(--cta-bg-hover); border-color: var(--cta-bg-hover); color: var(--white); }
.amf-week__slot:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.amf-week__slot[aria-pressed="true"]:focus-visible { box-shadow: var(--shadow-focus), var(--shadow-brand); }
.amf-week__tick { width: 15px; height: 15px; flex: none; opacity: 0; transform: scale(.6); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring); }
.amf-week__slot[aria-pressed="true"] .amf-week__tick { opacity: 1; transform: scale(1); }
.amf-week__slot--released { animation: amf-week-release var(--dur-slow) var(--ease-out); }
@keyframes amf-week-release {
  0%   { background: var(--green-100); border-color: var(--green-200); }
  100% { background: var(--neutral-50); border-color: var(--line); }
}
/* Shared by every figure in section 10 — .amf-week, .amf-cal and .amf-cycle all
   open with the same one-line explanation, so it is not owned by any of them. */
.amf-fig__legend { max-width: none; margin: var(--space-0) var(--space-0) var(--space-5); font-family: var(--font-body); font-size: var(--text-sm); color: var(--neutral-600); }
.amf-week__status {
  display: flex; align-items: baseline; gap: var(--space-2);
  margin: var(--space-5) var(--space-0) var(--space-0); padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--neutral-600);
}
.amf-week__count { font-family: var(--font-stat); font-size: var(--text-md); font-weight: 700; color: var(--neutral-800); font-variant-numeric: tabular-nums; }
.amf-week__count--met { color: var(--brand-active); }

/* --------------------------------------------------------------------------
   10.2 · .amf-cal — the fortnight calendar. kickstart.html
   Fourteen days, ten of them class days. The weekends are the point: they
   answer "is this every single day?" before anyone has to ask.
   -------------------------------------------------------------------------- */
.amf-cal {
  margin: var(--space-8) var(--space-0); padding: var(--space-6);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.amf-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); }
.amf-cal__dow {
  font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--neutral-500);
  text-align: center; padding-bottom: var(--space-1);
}
.amf-cal__day {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-1); min-height: var(--space-16); padding: var(--space-2) var(--space-1);
  background: var(--green-50); border: 1px solid var(--green-200);
  border-radius: var(--radius-sm); text-align: center;
}
.amf-cal__day--off { background: var(--neutral-50); border-color: var(--line); border-style: dashed; }
.amf-cal__n { font-family: var(--font-stat); font-size: var(--text-sm); font-weight: 700; color: var(--green-900); font-variant-numeric: tabular-nums; }
.amf-cal__day--off .amf-cal__n { color: var(--neutral-400); }
.amf-cal__what { font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 600; color: var(--green-800); line-height: 1.25; }
.amf-cal__day--off .amf-cal__what { color: var(--neutral-400); font-weight: 400; }
.amf-cal__key { margin: var(--space-0); max-width: none; display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line-soft); font-family: var(--font-body); font-size: var(--text-xs); color: var(--neutral-600); }
.amf-cal__keyitem { display: flex; align-items: center; gap: var(--space-2); }
.amf-cal__sw { width: 14px; height: 14px; flex: none; border-radius: var(--radius-xs); background: var(--green-50); border: 1px solid var(--green-200); }
.amf-cal__sw--off { background: var(--neutral-50); border-color: var(--line); border-style: dashed; }

/* --------------------------------------------------------------------------
   10.3 · .amf-track — a sequence of stages joined by a rule.
   Reused three ways so the site has one grammar for "this then this":
     transform.html    six fortnights across twelve weeks
   challenge.html and consultation.html were considered and deliberately left
   alone: both already use .amf-days for exactly this, and a second diagram
   saying the same thing is decoration.
   Horizontal from 48rem up, vertical below, because five stages side by side
   on a phone is four illegible stages.
   -------------------------------------------------------------------------- */
.amf-track > li, .amf-ladder > li { margin-bottom: var(--space-0); }
.amf-track { list-style: none; margin: var(--space-8) var(--space-0); padding: var(--space-0); display: grid; gap: var(--space-4); }
.amf-track__step { position: relative; padding: var(--space-5); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.amf-track__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--space-8); height: var(--space-8); padding: var(--space-0) var(--space-2);
  margin-bottom: var(--space-3); border-radius: var(--radius-pill);
  background: var(--green-50); border: 1px solid var(--green-200);
  font-family: var(--font-stat); font-size: var(--text-xs); font-weight: 700;
  color: var(--green-900); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.amf-track__step--now .amf-track__badge { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--white); }
.amf-track__t { display: block; margin-bottom: var(--space-1); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; color: var(--neutral-900); }
.amf-track__d { display: block; font-family: var(--font-body); font-size: var(--text-xs); color: var(--neutral-600); line-height: 1.45; }
/* Shared, like .amf-fig__legend: the closing note under a figure belongs to no
   single component. Used under .amf-track and under .amf-ladder. */
.amf-fig__note { margin: var(--space-0); max-width: none; font-family: var(--font-body); font-size: var(--text-sm); color: var(--neutral-600); }
@media (min-width: 62rem) {
  /* 62rem, not 48rem: the Transform track has SIX steps, and at 768px each
     column is ~70px of usable width, which turns every description into a
     narrow tower. Below this the track stays stacked, which reads fine. */
  .amf-track { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-3); }
  .amf-track__step::after {
    content: ""; position: absolute; top: calc(var(--space-5) + var(--space-4));
    right: calc(var(--space-3) * -1); width: var(--space-3); height: 1px;
    background: var(--line); z-index: 0;
  }
  .amf-track__step:last-child::after { display: none; }
}

/* --------------------------------------------------------------------------
   10.4 · .amf-ladder — the programs, and the one fork. index.html
   The restructure put a branch in the middle of the ladder. Drawn once here,
   it stops the home page having to explain it twice in prose.
   -------------------------------------------------------------------------- */
.amf-ladder { list-style: none; margin: var(--space-8) var(--space-0); padding: var(--space-0); display: grid; gap: var(--space-3); }
.amf-ladder__rung {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center;
  padding: var(--space-4) var(--space-5); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out);
}
a.amf-ladder__rung:hover { border-color: var(--green-300); box-shadow: var(--shadow-md); transform: translateY(-1px); }
a.amf-ladder__rung:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.amf-ladder__step { font-family: var(--font-stat); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-400); }
.amf-ladder__name { display: block; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; color: var(--neutral-900); }
.amf-ladder__sub { display: block; font-family: var(--font-body); font-size: var(--text-xs); color: var(--neutral-600); }
.amf-ladder__price { font-family: var(--font-stat); font-size: var(--text-sm); font-weight: 700; color: var(--neutral-800); white-space: nowrap; font-variant-numeric: tabular-nums; }
.amf-ladder__fork { display: grid; gap: var(--space-3); padding-left: var(--space-6); border-left: 2px solid var(--green-200); }
.amf-ladder__forklabel { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; color: var(--neutral-500); padding-left: var(--space-6); }

/* --------------------------------------------------------------------------
   10.5 · .amf-cycle — what repeats every month. circle.html
   Circle is the one product that is not a finite programme, so it gets a loop
   rather than a track.
   -------------------------------------------------------------------------- */
.amf-cycle { margin: var(--space-8) var(--space-0); padding: var(--space-6); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.amf-cycle__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.amf-cycle__item { padding: var(--space-4); background: var(--green-50); border: 1px solid var(--green-200); border-radius: var(--radius-sm); text-align: center; }
.amf-cycle__n { display: block; font-family: var(--font-stat); font-size: var(--text-lg); font-weight: 700; color: var(--green-900); line-height: 1.1; }
.amf-cycle__l { display: block; margin-top: var(--space-1); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; color: var(--green-800); }
.amf-cycle__repeat { margin: var(--space-0); max-width: none; display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line-soft); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--neutral-600); }
/* --cta-bg rather than --brand: green-500 on white is 2.43:1, under the 3:1
   floor for meaningful graphics. This icon is aria-hidden and the text beside
   it says the same thing, so it would be exempt — but matching the rest of the
   section costs nothing and removes the need to remember the exemption. */
.amf-cycle__loop { width: 17px; height: 17px; flex: none; color: var(--cta-bg); }

/* --------------------------------------------------------------------------
   10.6 · .amf-scale — two shapes of coaching time. private.html
   Bars are proportional to real hours. Transform is deliberately the LONGER
   bar: the page's argument is that Private is a different thing, not a bigger
   one, and a chart that flattered Private would undercut the sentence beside
   it.
   -------------------------------------------------------------------------- */
.amf-scale { margin: var(--space-8) var(--space-0); display: grid; gap: var(--space-5); }
.amf-scale__row { display: grid; gap: var(--space-2); }
.amf-scale__label { margin: var(--space-0); max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--neutral-800); }
.amf-scale__hrs { font-family: var(--font-stat); font-size: var(--text-sm); font-weight: 700; color: var(--neutral-600); font-variant-numeric: tabular-nums; }
.amf-scale__bar { display: flex; height: var(--space-8); border-radius: var(--radius-sm); overflow: hidden; background: var(--neutral-100); }
.amf-scale__fill { display: flex; align-items: center; min-width: 0; overflow: hidden; padding: var(--space-0) var(--space-3); font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 600; color: var(--white); background: var(--neutral-400); white-space: nowrap; }
.amf-scale__fill--solo { background: var(--cta-bg); }
.amf-scale__foot { margin: var(--space-0); font-family: var(--font-body); font-size: var(--text-xs); color: var(--neutral-500); }

@media (max-width: 30rem) {
  .amf-week { padding: var(--space-4); }
  .amf-week__slot { font-size: var(--text-xs); min-height: var(--space-10); padding: var(--space-2) var(--space-1); }
  .amf-week__day { font-size: var(--text-xs); padding-right: var(--space-2); }
  .amf-cal { padding: var(--space-3); }
  .amf-cal__grid { gap: var(--space-1); }
  .amf-cal__day { min-height: var(--space-12); padding: var(--space-1); }
  /* The class label is dropped on the narrowest screens rather than shrunk.
     Rev 4.10 darkened three tokens specifically because this audience is
     largely over 45 reading on a phone in daylight; setting 10px type here
     would give back more than that change won. The colour of the cell and the
     key below it still carry the meaning. */
  .amf-cal__what {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .amf-cal__day { justify-content: center; }
  .amf-cycle, .amf-ladder__rung { padding: var(--space-4); }
  .amf-ladder__rung { grid-template-columns: 1fr auto; }
  .amf-ladder__step { grid-column: 1 / -1; }
  .amf-ladder__fork, .amf-ladder__forklabel { padding-left: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .amf-week__slot, .amf-week__tick, .amf-ladder__rung { transition: none; }
  .amf-week__slot--released { animation: none; }
  a.amf-ladder__rung:hover { transform: none; }
}

/* ==========================================================================
   11. THE STARTING NUMBERS TOOL · .amf-tool · added 10 August 2026
   --------------------------------------------------------------------------
   Home page only. Takes height, waist and age; returns the first two of the six
   numbers section 4 of index.html says we track every fortnight.

   ⚠️ READ THE WARNING AT index.html SECTION 4 BEFORE CHANGING THIS.
   That comment forbids blood numbers on this page because they move it from
   nutrition education into implied medical treatment. A risk score does the
   same job by a different route, so this tool deliberately does NOT produce
   one. It reports the measurement and states the published guideline beside
   it. It never bands, rates, diagnoses, or predicts.

   Specifically it must never:
     · output a risk category ("high risk", "obese", "danger zone")
     · predict a weight, a kilo count or a timeline
     · imply a condition, or that the person should be worried
   It reflects numbers the person gave us, next to a number anyone can look up.

   BMI is deliberately absent. The whole page argues weight is the wrong number
   to lead with; a BMI readout would re-enthrone it.
   ========================================================================== */
.amf-tool {
  margin: var(--space-8) var(--space-0) var(--space-0);
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.amf-tool__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
.amf-tool__unit { font-family: var(--font-body); font-size: var(--text-xs); color: var(--neutral-500); font-weight: 400; }
.amf-tool__actions { margin-top: var(--space-5); }

/* --- the gate. Shown only once the three inputs are valid ---------------- */
.amf-tool__gate { display: none; margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line-soft); }
.amf-tool.is-asking .amf-tool__gate { display: block; }
.amf-tool.is-asking .amf-tool__actions { display: none; }

/* --- the unit switch. One control for both measurements: letting height and
       waist use different units is a data-entry accident waiting to happen. -- */
.amf-tool__units { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.amf-tool__unitslabel { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--neutral-700); }
.amf-tool__seg { display: inline-flex; gap: var(--space-1); padding: var(--space-1); background: var(--neutral-100); border-radius: var(--radius-pill); }
/* The <span> is the pill, not the <label>, so the selected state uses the
   adjacent-sibling selector and works in every browser. An earlier version used
   :has() on the label, which would have left anyone on an older browser unable
   to see which unit was selected. */
.amf-tool__seg label { position: relative; display: inline-flex; }
.amf-tool__seg input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.amf-tool__seg span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--space-16); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: var(--neutral-600); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.amf-tool__seg input:hover + span { color: var(--neutral-900); }
.amf-tool__seg input:checked + span { background: var(--cta-bg); color: var(--white); }
.amf-tool__seg input:focus-visible + span { box-shadow: var(--shadow-focus); }

/* --- the result ---------------------------------------------------------- */
.amf-tool__out { display: none; margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line-soft); }
.amf-tool.is-asking .amf-tool__out, .amf-tool.is-done .amf-tool__out { display: block; }
/* Once unlocked, both the gate and the calculate button go: the card now
   updates live as the measurements are edited, so neither has a job left. */
.amf-tool.is-done .amf-tool__gate, .amf-tool.is-done .amf-tool__actions { display: none; }

/* LOCKED. The card is computed and rendered, then blurred until the details
   are given — Raj's instruction, 10 Aug 2026: show that the result exists
   rather than showing nothing at all.
   ⚠️ This is a friction device, not security. The numbers are in the DOM and
   anyone who opens devtools can read them. That is fine and expected; do not
   be tempted to "fix" it by moving the maths server side, which would cost a
   round trip and still be trivially replayable.
   The values are aria-hidden while locked so a screen reader user gets the
   same experience as everyone else rather than an inconsistent one. */
.amf-tool__card { transition: filter var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out); }
.amf-tool.is-asking .amf-tool__card { filter: blur(7px); opacity: .55; pointer-events: none; user-select: none; }
.amf-tool__lock {
  display: none; align-items: flex-start; gap: var(--space-3);
  margin: var(--space-0) var(--space-0) var(--space-5); padding: var(--space-4);
  background: var(--green-50); border: 1px solid var(--green-200); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--green-900);
}
.amf-tool.is-asking .amf-tool__lock { display: flex; }
.amf-tool__lockicon { width: 19px; height: 19px; flex: none; margin-top: 1px; color: var(--cta-bg); }

.amf-tool__rows { display: grid; gap: var(--space-2); margin: var(--space-0) var(--space-0) var(--space-5); }
.amf-tool__row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-2); padding: var(--space-4) var(--space-5);
  background: var(--neutral-50); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.amf-tool__row--lead { background: var(--green-50); border-color: var(--green-200); padding: var(--space-5); }
.amf-tool__k { font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; color: var(--neutral-700); }
.amf-tool__v { font-family: var(--font-stat); font-size: var(--text-2xl); font-weight: 700; color: var(--neutral-900); font-variant-numeric: tabular-nums; line-height: 1.15; }
.amf-tool__row--lead .amf-tool__k { font-size: var(--text-md); color: var(--green-900); }
.amf-tool__row--lead .amf-tool__v { font-size: var(--text-3xl); color: var(--green-900); }
.amf-tool__say { margin: var(--space-0) var(--space-0) var(--space-3); font-family: var(--font-body); font-size: var(--text-md); color: var(--neutral-700); line-height: 1.55; }
/* The age context is secondary to the measurement, and should read as such. */
.amf-tool__meta { margin: var(--space-0); font-family: var(--font-body); font-size: var(--text-sm); color: var(--neutral-500); line-height: 1.5; }

/* The boundary is one visible line now, with the detail in a <details> below,
   so it no longer needs to look like a block of small print. The visible line
   is the part that matters and it is never collapsed — see the markup note. */
.amf-tool__bound {
  margin: var(--space-5) var(--space-0) var(--space-0); max-width: none;
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--neutral-600); line-height: 1.5;
}
.amf-tool__err { margin: var(--space-3) var(--space-0) var(--space-0); font-family: var(--font-body); font-size: var(--text-sm); color: var(--danger); }

/* No JavaScript, no tool. The section falls back to a plain paragraph rather
   than showing inputs that cannot compute anything. */
.amf-tool__nojs { margin: var(--space-0); font-family: var(--font-body); font-size: var(--text-sm); color: var(--neutral-600); }
.amf-tool__live { display: none; }
.amf-tool.is-ready .amf-tool__live { display: block; }
.amf-tool.is-ready .amf-tool__nojs { display: none; }

@media (max-width: 30rem) {
  .amf-tool { padding: var(--space-4); }
}

/* ==========================================================================
   REV 4.11 · 3 September 2026 · .amf-bigstat
   The undivided-attention figure on private.html and programs.html. It sits
   beside .amf-scale and splits the job with it: the BARS carry hours per week,
   this carries the twelve-week total. They are separate because at true scale
   a 90-minute bar next to an 1,800-minute one is five percent wide and
   unreadable, and stretching it would have made an honest sentence look
   dishonest.
   ⚠️ If the class model or the session count changes again, the two numbers
   here and the two .amf-scale bars must be re-derived TOGETHER. They are the
   same claim measured two ways.
   ========================================================================== */
.amf-bigstat {
  margin: var(--space-8) var(--space-0);
  padding: var(--space-6);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.amf-bigstat__head {
  margin: var(--space-0) var(--space-0) var(--space-5);
  max-width: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
}
.amf-bigstat__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 40rem) {
  .amf-bigstat__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
.amf-bigstat__cell {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.amf-bigstat__cell--hero { border-color: var(--brand-border); box-shadow: var(--shadow-sm); }
.amf-bigstat__num {
  font-family: var(--font-stat);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--neutral-600);
  font-variant-numeric: tabular-nums;
}
.amf-bigstat__cell--hero .amf-bigstat__num { color: var(--green-700); font-size: var(--text-5xl); }
.amf-bigstat__cap { font-family: var(--font-body); font-size: var(--text-xs); color: var(--neutral-600); }
.amf-bigstat__foot {
  margin: var(--space-5) var(--space-0) var(--space-0);
  max-width: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--neutral-500);
}

/* The comparison table scrolls sideways on a phone and is keyboard-focusable,
   so it needs a visible focus ring of its own. */
.amf-scroll:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.amf-table--compare thead th { font-size: var(--text-sm); line-height: var(--leading-snug); }
.amf-table--compare thead th .amf-muted { font-weight: var(--weight-regular); }

/* ==========================================================================
   REV 4.12 · 3 September 2026 · two horizontal-overflow fixes, found while
   rebuilding the fortnight and class-week diagrams.

   1 · .amf-cal__grid used repeat(7, 1fr). An `fr` track is minmax(auto, 1fr),
       so every column is floored at its own min-content and all seven then
       equalise to the widest. "Weekend" in the header row set that floor at
       68px, so the grid demanded 7 x 68 plus gaps whatever the screen was.
       Measured: 320px broke by 91px BEFORE the September relabel and by 207px
       after it, because "Weekday" is wider than the "Class" it replaced. A
       pre-existing bug that the relabel made loud. minmax(0, 1fr) lets the
       tracks shrink; desktop is unchanged, there is room there.
   2 · Once the tracks can shrink, the header labels no longer fit their own
       column below 480px, so they are hidden there exactly as .amf-cal__what
       already is, and for the reason stated in that rule: shrinking the type
       would cost this audience more than it gains. The colour of each cell and
       the key underneath still carry the meaning.
   3 · "Not sure which route? WhatsApp us" on transform.html sits in a bare <p>,
       so REV 4.6's wrap fix, scoped to .amf-price, .amf-cta-band and
       .amf-hero__actions, never reached it. 416px wide on a 390px screen.
   ========================================================================== */
.amf-cal__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 30rem) {
  .amf-cal__dow {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 479.98px) {
  p > .amf-btn--lg {
    display: flex;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: var(--control-lg);
    padding-block: 13px;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   REV 4.13 · 3 September 2026 · .amf-week__grid, same root cause as 4.12(1).
   The class-week picker sized its slot columns from content, so "Evening" set
   an 89px floor and a 320px screen broke by 23px. The September rebuild made
   the grid shorter (four slots, not ten) but not narrower, because the floor
   is per column. The day-label column stays auto so row labels are never cut.
   -------------------------------------------------------------------------- */
.amf-week__grid { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 30rem) {
  .amf-week__slot > span { overflow: hidden; text-overflow: ellipsis; }
}

/* ==========================================================================
   REV 4.14 · 3 September 2026 · .amf-cal gets three day states, not two.
   ⚠️ THIS IS A HONESTY FIX, NOT A STYLING ONE. The fortnight diagram was built
   when Kickstart ran a class EVERY weekday, so "green cell" and "class day"
   were the same thing and two states were enough. From September it is four
   classes in fourteen days: ten weekday cells stayed green while the key
   beneath them said "Four coached classes". The picture contradicted its own
   legend, and on a phone, where .amf-cal__what is hidden, colour is the ONLY
   thing a reader has.
   Now: green = a class, brass = the 15-minute 1:1 call, plain = guidance only,
   dashed = weekend. If the class count changes again, the cell modifiers in
   kickstart.html and the four key swatches must move together.
   ========================================================================== */
.amf-cal__day--plain { background: var(--surface-card); border-color: var(--border-subtle); }
.amf-cal__day--plain .amf-cal__n { color: var(--neutral-700); }
.amf-cal__day--plain .amf-cal__what { color: var(--neutral-600); font-weight: 400; }
.amf-cal__day--call { background: var(--brass-soft); border-color: var(--brass); }
.amf-cal__day--call .amf-cal__n,
.amf-cal__day--call .amf-cal__what { color: var(--brass); }
.amf-cal__sw--plain { background: var(--surface-card); border-color: var(--border-subtle); border-style: solid; }
.amf-cal__sw--call { background: var(--brass-soft); border-color: var(--brass); border-style: solid; }

/* --------------------------------------------------------------------------
   REV 4.15 · 3 September 2026 · a "not included" row in a price list.
   .amf-price__list li carries a green brand dot, which is exactly wrong on a
   line saying something is absent. Added for Kickstart, which now states "no
   diet plan written for you" inside the list rather than only in a notice
   further down the page, because a buyer coming straight from an ad reads the
   price block and often nothing else.
   -------------------------------------------------------------------------- */
.amf-price__list li.amf-price__none { color: var(--text-muted); }
.amf-price__list li.amf-price__none::before { background: var(--neutral-300); }