/* ==========================================================================
   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 end of the file and the site returns to its rev 3 appearance exactly.
   Nothing above depends on anything below.

   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.
   -------------------------------------------------------------------------- */