/*
   GENERATED by tools/funnelgen — DO NOT EDIT THIS FILE.
   Your changes will be lost on the next build, and the build will refuse to
   run until you move them somewhere that survives.
   
     Copy lives in:  templates/recruiting-guide/pages
     Data lives in:  clients/Athletes Acceleration/brand-wide/recruiting-guide/locations.json
     Rebuild:        double-click build.cmd
*/
/* =========================================================================
   STRUCTURE TOKENS — brand-NEUTRAL
   ---------------------------------------------------------------------
   Type scale, spacing, radii, elevation and motion. Identical for every
   brand that uses this template.

   There are NO colours and NO @font-face rules in this file, by design.
   Those live in the brand theme (brand-themes/<brand>/theme.css), which
   must be loaded ALONGSIDE this file. Loading this one alone renders an
   unstyled-looking page, because every colour and family resolves to
   nothing.

   If you are tempted to add a hex here, it belongs in the theme instead.
   ========================================================================= */

:root {
  /* =========================
     TYPE SCALE. Body
     ========================= */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  64px;
  --fs-5xl:  96px;
  --fs-hero: clamp(64px, 11vw, 168px);

  /* =========================
     SPACING (8pt-ish with tighter low-end)
     ========================= */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* =========================
     RADII
     Squared / slightly-softened corners. Never overly round.
     ========================= */
  --r-none: 0;
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-pill: 999px;

  /* =========================
     ELEVATION / SHADOWS
     Layered and subtle. Confidence, not floatiness. Negative spread keeps
     them tight. These are neutral-grey and carry no brand hue; the
     accent-tinted shadow (--shadow-accent) lives in the theme.
     ========================= */
  --shadow-1: 0 1px 2px rgba(15, 17, 21, 0.06);
  --shadow-2: 0 2px 8px rgba(15, 17, 21, 0.08), 0 1px 2px rgba(15, 17, 21, 0.04);
  --shadow-3: 0 12px 32px -8px rgba(15, 17, 21, 0.18), 0 2px 6px rgba(15, 17, 21, 0.06);
  --shadow-4: 0 28px 64px -16px rgba(15, 17, 21, 0.28);
  --inner-1:  inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* =========================
     MOTION
     Quick, confident easing. No bounce, no overshoot.
     ========================= */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:  cubic-bezier(0.6, 0.0, 0.8, 0.3);
  --ease-snap:cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* =========================================================================
   SEMANTIC TYPE RULES

   NOTE ON CLASS NAMES: .aa-display, .aa-hero, .aa-eyebrow and .aa-data are
   TYPE ROLES, not page regions. A role class styles the element it sits on,
   so putting one on a container leaks its colour, size and letter-spacing
   into every descendant. Put them on the text element itself.
   ========================================================================= */
.aa-display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;        /* Anton has one weight. Letter-spacing carries weight */
  letter-spacing: -0.005em;
  line-height: 0.9;
  text-transform: uppercase;
  /* color inherits from section context so dark sections stay white. Each
     component sets its own explicit color when needed. */
  color: inherit;
}

.aa-hero,
h1 {
  font-size: var(--fs-hero);
  line-height: 0.85;
  letter-spacing: -0.01em;
}

h2 { font-size: var(--fs-4xl); line-height: 0.9; }
h3 { font-size: var(--fs-2xl); line-height: 1.0; letter-spacing: 0; }

h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: inherit;
}

h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1.3;
  color: inherit;
}

p, body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--fg-2);
}

small, .aa-small { font-size: var(--fs-sm); color: var(--fg-3); }

.aa-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.aa-eyebrow--muted { color: var(--fg-3); }

/* Code-comment style header. Site uses lines like "// Find Your Starting Line" */
.aa-code-comment {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg-3);
  font-weight: 400;
}
.aa-code-comment::before { content: "// "; opacity: 0.5; }

/* Mono data. For metrics: +1mph, +3", 10/20/40, etc. Tabular figures are a
   brand rule — every metric is set in mono, never in the body face. */
.aa-data {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

code, kbd, pre, .aa-mono { font-family: var(--font-mono); }

/* Brand mark. Both pages override the height for their own context; this is
   the base. Inherited from the old form.css, which was deleted once GoHighLevel
   took over both forms — every input, label and submit rule in it became dead
   the moment there were no native form controls left on either page. */
.lf-logo { height: 52px; width: auto; display: block; }

/* Two-tone display word. Headlines split accent vs ink. */
.aa-display .accent,
h1 .accent, h2 .accent { color: var(--accent); }

/* Outline display word. The "stadium signage" treatment */
.aa-display .outline,
h1 .outline, h2 .outline {
  color: transparent;
  -webkit-text-stroke: 2px currentColor;
}