/* Amerify Hub — brand foundation v3.0.
   Sourced from Amerify-Brand-Guide-Social-Team.pdf v3.0 (verified against amerify.co, 2026-08-05).
   Light-first editorial system: white / warm white surfaces, Ink text, controlled orange (5-10%),
   volt yellow only as a thin underline beneath one payoff phrase per page. Never a highlight block.
   Existing token names are preserved so consumers do not break; their values are updated to the
   exact brand-guide values below. New tokens (volt, warm-white text, dark-card, type scale, CTA)
   are additive. */
:root {
  /* Core neutrals (brand guide exact values) */
  --amf-white: #FFFFFF;
  --amf-warm-white: #FAF7F3;
  --amf-warm-white-text: #F7F5F1;
  --amf-ink: #1A1614;
  --amf-body: #5C574F;
  --amf-black: #070605;
  --amf-dark-card: #0D0B09;
  --amf-dark-muted: #BB8579;
  --amf-line: #E9E2DD;

  /* Brand signals (orange, controlled to 5-10% of any layout) */
  --amf-orange: #EE5721;
  --amf-orange-top: #F26840;
  --amf-orange-soft: color-mix(in srgb, var(--amf-orange) 12%, var(--amf-white));

  /* Volt (payoff device only — thin underline @ 60% opacity, and Volt green success) */
  --amf-volt-yellow: #E3F009;
  --amf-volt-green: #0B8A40;

  /* Backwards-compatible aliases (do not remove — many stylesheets already use these). */
  --amf-canvas: var(--amf-warm-white);
  --amf-surface: var(--amf-white);
  --amf-slate: var(--amf-body);
  --amf-muted: var(--amf-dark-muted);
  --amf-orange-dark: color-mix(in srgb, var(--amf-orange) 82%, var(--amf-black));

  /* Semantic status */
  --amf-success: var(--amf-volt-green);
  --amf-warning: #D97706;
  --amf-danger: #DC2626;
  --amf-info: #2563EB;

  /* Typography — Fellix leads; system fonts fall back gracefully */
  --amf-font: 'Fellix', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --amf-display-font: 'Fellix', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale (brand guide v3.0) */
  --amf-hero-size: clamp(42px, 6vw, 80px);
  --amf-hero-lh: 1.05;
  --amf-hero-tracking: -0.025em;
  --amf-section-size: clamp(34px, 4vw, 60px);
  --amf-section-lh: 1.1;
  --amf-body-size: 17px;
  --amf-body-lh: 1.62;
  --amf-eyebrow-size: 13px;
  --amf-eyebrow-tracking: 0.28em;
  --amf-cta-size: 17px;
  --amf-cta-tracking: 0.1em;

  /* Global comfortable base — bumped to 17px per Aadil (reduces eye strain). */
  --amf-base-size: 17px;

  /* Radii (16-20px on cards per guide) */
  --amf-radius-sm: 8px;
  --amf-radius-md: 12px;
  --amf-radius-lg: 18px;
  --amf-radius-pill: 999px;

  /* Shadows (soft, neutral) */
  --amf-shadow-sm: 0 1px 2px rgba(26, 22, 20, .06), 0 1px 3px rgba(26, 22, 20, .04);
  --amf-shadow-md: 0 4px 12px rgba(26, 22, 20, .08);
  --amf-shadow-lg: 0 12px 36px rgba(26, 22, 20, .12);

  /* Motion — brand v3.0 removes all UI transitions. Kept as tokens so
     specific components can opt back in if a future review requires it. */
  --amf-motion-fast: 0s;
  --amf-motion-base: 0s;
  --amf-motion-slow: 0s;
}

html {
  font-family: var(--amf-font);
  font-size: var(--amf-base-size);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--amf-ink);
}

body {
  color: var(--amf-body);
  background: var(--amf-warm-white);
  line-height: var(--amf-body-lh);
}

body,
button,
input,
select,
textarea {
  font-family: var(--amf-font);
}

button,
input,
select,
textarea {
  font: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--amf-display-font);
  color: var(--amf-ink);
  text-wrap: balance;
  font-weight: 400;
}

::selection {
  color: var(--amf-ink);
  background: var(--amf-orange-soft);
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--amf-orange) 32%, transparent);
  outline-offset: 2px;
}

/* -------- Brand v3.0 utilities -------- */

/* Payoff underline — thin volt-yellow line beneath ONE payoff phrase per page.
   Never a highlight block, never wider than the phrase. */
.amf-payoff {
  position: relative;
  display: inline;
  color: inherit;
}
.amf-payoff::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: color-mix(in srgb, var(--amf-volt-yellow) 60%, transparent);
  border-radius: 2px;
}

/* Eyebrow label — small uppercase kicker used above section titles / on proof cards. */
.amf-eyebrow {
  font-family: var(--amf-display-font);
  font-size: var(--amf-eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--amf-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--amf-body);
}

/* Hero / section headings */
.amf-hero {
  font-family: var(--amf-display-font);
  font-size: var(--amf-hero-size);
  line-height: var(--amf-hero-lh);
  letter-spacing: var(--amf-hero-tracking);
  color: var(--amf-ink);
  font-weight: 400;
}
.amf-section {
  font-family: var(--amf-display-font);
  font-size: var(--amf-section-size);
  line-height: var(--amf-section-lh);
  color: var(--amf-ink);
  font-weight: 400;
}

/* Card — white surface, warm-gray border, soft neutral shadow, 16-20px radius. */
.amf-card {
  background: var(--amf-white);
  border: 1px solid var(--amf-line);
  border-radius: var(--amf-radius-lg);
  box-shadow: var(--amf-shadow-sm);
  padding: 24px;
}
.amf-card--dark {
  background: var(--amf-dark-card);
  border-color: color-mix(in srgb, var(--amf-white) 8%, transparent);
  color: var(--amf-warm-white-text);
}
.amf-card--dark .amf-eyebrow { color: var(--amf-dark-muted); }
.amf-card--dark h1, .amf-card--dark h2, .amf-card--dark h3 { color: var(--amf-warm-white-text); }

/* Proof card — dark surface, big orange number, small eyebrow + one-line context. */
.amf-proof {
  background: var(--amf-dark-card);
  color: var(--amf-warm-white-text);
  border-radius: var(--amf-radius-lg);
  padding: 24px 28px;
}
.amf-proof__eyebrow {
  font-family: var(--amf-display-font);
  font-size: var(--amf-eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--amf-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--amf-dark-muted);
  margin: 0 0 10px;
}
.amf-proof__number {
  font-family: var(--amf-display-font);
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
  color: var(--amf-orange);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.amf-proof__context {
  font-size: 15px;
  color: var(--amf-dark-muted);
  margin-top: 8px;
}

/* CTA pill — orange, uppercase Fellix Bold, 17px, tracking .1em. */
.amf-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  background: var(--amf-orange);
  color: var(--amf-white);
  font-family: var(--amf-display-font);
  font-size: var(--amf-cta-size);
  font-weight: 700;
  letter-spacing: var(--amf-cta-tracking);
  text-transform: uppercase;
  border: 0;
  border-radius: var(--amf-radius-pill);
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}
.amf-cta:hover { background: var(--amf-orange-top); }
.amf-cta--sm {
  padding: 10px 18px;
  font-size: 14px;
  letter-spacing: 0.08em;
}

/* Pill qualifier — small light pill with an orange dot, sets audience/scope. */
.amf-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--amf-white);
  border: 1px solid var(--amf-line);
  border-radius: var(--amf-radius-pill);
  font-size: 13px;
  color: var(--amf-ink);
  line-height: 1;
}
.amf-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amf-orange);
  flex-shrink: 0;
}
.amf-pill--muted::before { background: var(--amf-body); }

/* Count badge — used for unread/notification counts. High-contrast: Ink surface,
   white number. Reserved for counts. NEVER orange-on-orange. */
.amf-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--amf-ink);
  color: var(--amf-white);
  font-family: var(--amf-display-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--amf-radius-pill);
  letter-spacing: 0;
}
.amf-count-badge--danger { background: var(--amf-danger); color: var(--amf-white); }
.amf-count-badge--muted { background: var(--amf-body); color: var(--amf-white); }

/* Rule — thin warm-gray divider used between sections. */
.amf-rule {
  border: 0;
  border-top: 1px solid var(--amf-line);
  margin: 32px 0;
}

/* -------- Motion (removed globally per brand v3.0) --------
   Per Owais 2026-08-05: no page/nav transitions. Function over motion.
   Keeps only transient interaction feedback that reads as "the click landed"
   (opacity flicker on button press). Everything else is snapped. */
*, *::before, *::after {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}
/* Respect users who explicitly enable motion for accessibility reasons. */
@media (prefers-reduced-motion: no-preference) {
  /* Button press feedback (very short, only on active state) */
  button:active, .amf-cta:active { opacity: 0.9; }
}