/* Aspire Partners Brand Kit v1
   Sampled from the approved video title cards. Shared by the landing page,
   the fit form, and the Showroom. Change values here, all three update. */

:root {
  /* Core palette, sampled from title card */
  --ap-ink:        #0a1330;
  --ap-ink-lift:   #101c44;
  --ap-ink-panel:  #14224f;
  --ap-blue:       #0763ac;
  --ap-blue-hover: #0a7bd1;
  --ap-blue-bright:#1e9fe6;
  --ap-depth:      #013186;

  /* Gold is reserved for the Upgrade to Pro CTA only. Never use elsewhere. */
  --ap-gold:       #f2b134;

  /* Neutrals */
  --ap-white:      #ffffff;
  --ap-mist:       #cddcec;
  --ap-mist-dim:   #8ea6c4;
  --ap-line:       rgba(255,255,255,0.14);
  --ap-line-soft:  rgba(255,255,255,0.08);

  /* Type */
  --ap-font: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Display scale, uppercase, weight 800, tight tracking.
     Matches the title card metrics (stroke to cap ratio 0.242). */
  --ap-display-1: clamp(2.05rem, 6.6vw, 3.9rem);
  --ap-display-2: clamp(1.6rem, 5.2vw, 2.75rem);
  --ap-display-3: clamp(1.25rem, 3.6vw, 1.75rem);

  /* Rhythm */
  --ap-radius: 6px;
  --ap-rule: 4px;
  --ap-gut: clamp(20px, 5vw, 40px);
  --ap-section: clamp(56px, 9vw, 104px);
  --ap-maxw: 1180px;
}

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

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

body {
  margin: 0;
  background: var(--ap-ink);
  color: var(--ap-white);
  font-family: var(--ap-font);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* ---- Display type ---- */
.ap-display,
.ap-display-2,
.ap-display-3 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.98;
  margin: 0;
}
.ap-display   { font-size: var(--ap-display-1); }
.ap-display-2 { font-size: var(--ap-display-2); line-height: 1.02; }
.ap-display-3 { font-size: var(--ap-display-3); line-height: 1.08; letter-spacing: -0.01em; }

/* ---- The accent rule.
   Signature structural device, lifted straight off the title card.
   Marks every section and doubles as the form progress indicator. ---- */
.ap-rule {
  border-left: var(--ap-rule) solid var(--ap-blue);
  border-radius: 0;
  padding-left: 16px;
}
.ap-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ap-blue-bright);
  margin: 0 0 10px;
}

/* ---- Layout ---- */
.ap-wrap { width: 100%; max-width: var(--ap-maxw); margin: 0 auto; padding: 0 var(--ap-gut); }
.ap-section { padding: var(--ap-section) 0; }
.ap-lede { font-size: clamp(1rem, 2.4vw, 1.2rem); color: var(--ap-mist); max-width: 62ch; }

/* ---- Buttons ---- */
.ap-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ap-blue);
  color: var(--ap-white);
  font-family: var(--ap-font);
  font-size: 1.02rem; font-weight: 700;
  letter-spacing: 0.01em;
  padding: 17px 30px;
  min-height: 56px;
  border: 0; border-radius: var(--ap-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease;
}
.ap-btn:hover { background: var(--ap-blue-hover); }
.ap-btn:active { transform: scale(0.99); }
.ap-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.ap-btn-ghost {
  background: transparent; color: var(--ap-white);
  border: 1px solid var(--ap-line);
}
.ap-btn-ghost:hover { background: rgba(255,255,255,0.06); }

/* Reserved. Upgrade to Pro only. */
.ap-btn-pro { background: var(--ap-gold); color: var(--ap-ink); }
.ap-btn-pro:hover { background: #ffc352; }

/* ---- Focus, keyboard visible everywhere ---- */
:focus-visible {
  outline: 3px solid var(--ap-blue-bright);
  outline-offset: 3px;
}

/* ---- Surfaces ---- */
.ap-panel {
  background: var(--ap-ink-panel);
  border: 1px solid var(--ap-line-soft);
  border-radius: 10px;
}

/* ---- Choice controls, shared by the fit form ---- */
.ap-choice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left;
  background: var(--ap-ink-lift);
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  color: var(--ap-white);
  font-family: var(--ap-font); font-size: 1rem; font-weight: 500;
  padding: 16px 18px; min-height: 58px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.ap-choice:hover { border-color: var(--ap-blue-bright); background: #16255a; }
.ap-choice[aria-pressed="true"] {
  border-color: var(--ap-blue-bright);
  background: rgba(30,159,230,0.14);
}

/* ---- Fields ---- */
.ap-field { display: block; margin-bottom: 14px; }
.ap-label {
  display: block; font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ap-mist-dim); margin-bottom: 7px;
}
.ap-input {
  width: 100%;
  background: var(--ap-ink-lift);
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  color: var(--ap-white);
  font-family: var(--ap-font); font-size: 1rem;
  padding: 15px 16px; min-height: 54px;
}
.ap-input::placeholder { color: #6b83a6; }
.ap-input:focus { border-color: var(--ap-blue-bright); }

/* ---- Legal ---- */
.ap-fine {
  font-size: 0.8rem; line-height: 1.55;
  color: var(--ap-mist-dim);
}
.ap-tagline {
  font-size: 0.82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ap-mist);
}

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