/* ==========================================================================
   The Altitude Mindset — "Flight" theme (every page)
   Loaded after site.css; everything is scoped to body.flight. It re-points
   site.css's own tokens at the dark flight palette, so existing components
   (and inline styles that use var(--ink-3) etc.) switch over without new
   markup. Homepage-only journey styles live in flight.css.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
body.flight {
  --fx-bg:        #05080F;
  --fx-bg-2:      #0A0F1A;
  --fx-surface:   rgba(220,230,242,0.035);
  --fx-surface-2: rgba(220,230,242,0.06);
  --fx-line:      rgba(220,230,242,0.10);
  --fx-line-2:    rgba(220,230,242,0.20);
  --fx-text:      #E9EEF5;
  --fx-text-2:    #C3CCD9;   /* body copy — 11.9:1 on --fx-bg */
  --fx-muted:     #9AA6B8;   /* secondary — 7.9:1 */
  --fx-gold:      #E8C468;
  --fx-gold-soft: rgba(232,196,104,0.12);
  --fx-cool:      #8EC5E8;   /* instrument glass, used sparingly */

  --fx-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --fx-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --serif: var(--fx-display);   /* site.css headings + footer pick this up */

  --fx-ease: cubic-bezier(.2,.7,.2,1);
  --fx-r: 14px;
  --fx-header: 76px;

  background: var(--fx-bg);
  color: var(--fx-text-2);
}

/* :where() keeps these at element-level specificity, so component rules
   in site.css (.scope h2, .card h3 …) still set their own sizes. */
:where(body.flight) :is(h1, h2, h3, h4) { color: var(--fx-text); }
:where(body.flight) h2 {
  font-family: var(--fx-display); font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.35rem); line-height: 1.04; letter-spacing: -0.035em;
  text-wrap: balance;
}
:where(body.flight) h3 { font-family: var(--fx-display); font-weight: 500; letter-spacing: -0.015em; }
body.flight strong { color: var(--fx-text); }
body.flight a { color: var(--fx-gold); }
body.flight a:hover { color: #F3D990; }
body.flight :focus-visible { outline: 2px solid var(--fx-gold); outline-offset: 3px; }
body.flight ::selection { background: rgba(232,196,104,0.3); color: #fff; }

/* --- 2. Shared primitives ------------------------------------------------ */
.flight .fx-sec { position: relative; padding-block: clamp(4.5rem, 10vw, 8rem); isolation: isolate; }
.flight .fx-sec--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.flight .fx-narrow { max-width: 820px; }

.flight .fx-label {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--fx-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fx-gold);
  margin-bottom: 1.1rem;
}
.flight .fx-label::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .7; }

.flight .fx-lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--fx-text-2); margin-top: 1.1rem; max-width: 58ch; }
.flight .fx-small { font-size: var(--fs-sm); color: var(--fx-muted); margin-top: 1.25rem; }

.flight .fx-head { max-width: 760px; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.flight .fx-head--center { margin-inline: auto; text-align: center; }
.flight .fx-head--center .fx-lead { margin-inline: auto; }
.flight .fx-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

.flight .fx-actions { display: flex; flex-wrap: wrap; gap: .85rem 1.25rem; align-items: center; margin-top: 2rem; }
.flight .fx-actions--center { justify-content: center; }

.flight .fx-textlink {
  color: var(--fx-text); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--fx-line-2); padding-bottom: 2px;
  transition: border-color .2s ease, color .2s ease;
}
.flight .fx-textlink:hover { color: var(--fx-gold); border-color: var(--fx-gold); }
.flight .fx-textbtn {
  background: none; border: 0; cursor: pointer; color: var(--fx-muted);
  font-size: var(--fs-sm); font-weight: 500; padding: .6rem .25rem; min-height: 44px;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fx-line-2);
}
.flight .fx-textbtn:hover { color: var(--fx-text); }
.flight .fx-textbtn:disabled { opacity: .35; cursor: default; }

.flight .fx-ticks { list-style: none; display: grid; gap: .5rem; margin-top: 1.25rem; }
.flight .fx-ticks li { display: flex; gap: .7rem; font-size: var(--fs-sm); color: var(--fx-text-2); }
.flight .fx-ticks li::before { content: ''; flex: none; width: 10px; height: 1px; background: var(--fx-gold); margin-top: .75em; }

/* --- 3. Buttons ---------------------------------------------------------- */
/* One component, two emphases. The gold fill is the only "loud" thing on
   the page, so it always means the next step. */
.flight .btn {
  border-radius: 10px; font-weight: 600; letter-spacing: .01em;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .25s var(--fx-ease), box-shadow .25s ease;
}
.flight .fx-btn--primary, .flight .btn.btn--primary {
  background: var(--fx-gold); color: #0A0F1A; border-color: transparent;
  box-shadow: 0 0 0 1px rgba(232,196,104,.35), 0 10px 30px -12px rgba(232,196,104,.55);
}
.flight .fx-btn--primary:hover, .flight .btn.btn--primary:hover {
  background: #F1D37F; color: #0A0F1A;
  box-shadow: 0 0 0 1px rgba(232,196,104,.6), 0 14px 38px -12px rgba(232,196,104,.7);
}
.flight .fx-btn--ghost {
  background: rgba(220,230,242,.03); color: var(--fx-text); border: 1px solid var(--fx-line-2);
}
.flight .fx-btn--ghost:hover { color: #fff; border-color: rgba(232,196,104,.6); background: var(--fx-gold-soft); }
.flight .fx-btn--lg { padding: 1.1rem 1.9rem; font-size: 1.02rem; }
.flight .btn span[aria-hidden] { transition: transform .25s var(--fx-ease); }
.flight .btn:hover span[aria-hidden] { transform: translateX(3px); }
.flight .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

/* --- 4. Header, drawer, climb bar, mobile bar ---------------------------- */
.flight .site-header { background: rgba(5,8,15,.78); border-bottom-color: var(--fx-line); }
.flight .nav__menu a { color: var(--fx-muted); }
.flight .nav__menu a:hover { color: var(--fx-text); }
.flight .nav__toggle span, .flight .nav__toggle span::before, .flight .nav__toggle span::after { background: var(--fx-text); }
.flight .nav__toggle[aria-expanded="true"] span { background: transparent; }
.flight .nav__drawer { background: var(--fx-bg-2); border-top-color: var(--fx-line); }
.flight .nav__drawer a { color: var(--fx-text); border-bottom-color: var(--fx-line); }

.fx-climbbar { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120; pointer-events: none; }
.fx-climbbar span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--climb, 0));
  background: linear-gradient(90deg, rgba(232,196,104,.2), var(--fx-gold));
}

.flight .mobilebar { background: rgba(5,8,15,.94); border-top-color: var(--fx-line); }
.flight .site-footer { background: #03060B; border-top: 1px solid var(--fx-line); }


/* Dark form fields (every page) */
.flight .field label { color: var(--fx-text-2); }
.flight .field input, .flight .field select, .flight .field textarea {
  background: rgba(220,230,242,.04); border-color: var(--fx-line-2); color: var(--fx-text); border-radius: 10px;
}
.flight .field input::placeholder, .flight .field textarea::placeholder { color: #7C889A; }
.flight .field input:focus, .flight .field select:focus, .flight .field textarea:focus { border-color: var(--fx-gold); box-shadow: 0 0 0 3px rgba(232,196,104,.16); }
.flight .field select option { background: var(--fx-bg-2); color: var(--fx-text); }
.flight .field .hint { color: var(--fx-muted); }
.flight .field__error { color: #F2A38F; font-size: var(--fs-xs); margin-top: .35rem; }
.flight .form__status.is-ok { color: #8FD7A8; }
.flight .form__status.is-error { color: #F2A38F; }
.flight .form__deliver { color: var(--fx-gold); }


/* FAQ */
.flight .faq details { background: var(--fx-surface); border-color: var(--fx-line); border-radius: 12px; }
.flight .faq details[open] { border-color: var(--fx-line-2); background: var(--fx-surface-2); }
.flight .faq summary { color: var(--fx-text); font-weight: 500; }
.flight .faq summary::after { border-color: var(--fx-gold); }
.flight .faq .answer { color: var(--fx-text-2); }

/* --- Site tokens re-pointed at the flight palette ------------------------ */
body.flight {
  --paper: #05080F;
  --surface: #0B111D;
  --muted: #0A0F1A;
  --ink: #E9EEF5;
  --ink-2: #C3CCD9;
  --ink-3: #9AA6B8;
  --on-dark: #C3CCD9;
  --on-dark-muted: #9AA6B8;
  --line: rgba(220,230,242,0.10);
  --line-strong: rgba(220,230,242,0.20);
  --line-dark: rgba(220,230,242,0.12);
  /* navy was the ink of the light theme (links, strokes, primary fill):
     on dark it becomes the gold accent. Dark *backgrounds* that used navy
     are overridden component by component below. */
  --navy-800: #E8C468;
  --navy-700: #F1D37F;
  --navy-600: #F1D37F;
  --navy-900: #03060B;
  --gold-ink: #E8C468;
  --gold-600: #D9B457;
  --gold-100: rgba(232,196,104,0.12);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 12px 34px rgba(0,0,0,.45);
}
:where(body.flight) h1 {
  font-family: var(--fx-display); font-weight: 500; letter-spacing: -0.04em; line-height: 1.02;
  font-size: clamp(2.3rem, 5.6vw, 4.2rem); text-wrap: balance;
}
body.flight h1 em, .flight .hero h1 em { font-style: normal; color: var(--fx-gold); }
.flight .lead { color: var(--fx-text-2); }

/* Eyebrows read as instrument labels, matching the homepage */
.flight .eyebrow {
  font-family: var(--fx-mono); font-weight: 500; font-size: .74rem; letter-spacing: .16em; color: var(--fx-gold);
}
.flight .eyebrow::before { background: var(--fx-gold); }

/* Bands: one continuous night sky instead of alternating stripes */
.flight .band-paper, .flight .band-surface { background: transparent; }
.flight .band-muted { background: var(--fx-bg-2); }
.flight .band-dark { background: var(--fx-bg-2); border-block: 1px solid var(--fx-line); }
.flight .band-dark h1, .flight .band-dark h2, .flight .band-dark h3, .flight .band-dark h4, .flight .band-dark strong { color: var(--fx-text); }
.flight .skip-link { background: var(--fx-gold); color: #0A0F1A; }
.flight .skip-link:focus { color: #0A0F1A; }
.flight .nav__menu a[aria-current="page"] { color: var(--fx-gold); }

/* Inner-page opening section: the same horizon + navigation grid as the
   homepage cockpit, drawn in CSS so no page needs new markup. */
.flight main > section:first-child:not(.fx-hero) { position: relative; isolation: isolate; overflow: hidden; }
.flight main > section:first-child:not(.fx-hero)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 60% at 70% 0%, rgba(142,197,232,.07), transparent 60%),
    radial-gradient(70% 45% at 50% 82%, rgba(232,196,104,.06), transparent 70%),
    linear-gradient(180deg, #05080F 0%, #081022 60%, #05080F 100%);
}
.flight main > section:first-child:not(.fx-hero)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(5rem, 16%, 9rem); z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(232,196,104,.35), transparent) top / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(142,197,232,.07) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(180deg, rgba(142,197,232,.06) 0 1px, transparent 1px 44px);
  -webkit-mask: linear-gradient(180deg, #000, transparent 95%); mask: linear-gradient(180deg, #000, transparent 95%);
  transform: perspective(500px) rotateX(38deg); transform-origin: 50% 0;
}
.flight #main > section:first-child, .flight main > section:first-child:not(.fx-hero) { padding-bottom: clamp(4rem, 9vw, 6.5rem); }

/* Buttons */
.flight .btn.btn--gold { background: var(--fx-gold); color: #0A0F1A; box-shadow: 0 0 0 1px rgba(232,196,104,.35), 0 10px 30px -12px rgba(232,196,104,.55); }
.flight .btn.btn--gold:hover { background: #F1D37F; color: #0A0F1A; }
.flight .btn.btn--ghost { background: rgba(220,230,242,.03); color: var(--fx-text); border-color: var(--fx-line-2); }
.flight .btn.btn--ghost:hover { color: #fff; border-color: rgba(232,196,104,.6); background: var(--fx-gold-soft); }
.flight .link-arrow { color: var(--fx-gold); }

/* Cards and lists */
.flight .card, .flight .post, .flight .tier, .flight .proof-img, .flight .creds li, .flight .starthere a, .flight .testimonial, .flight .offer {
  background: var(--fx-surface); border-color: var(--fx-line);
}
.flight .card--link:hover, .flight .post:hover { border-color: rgba(232,196,104,.45); box-shadow: none; }
.flight .card__icon { background: var(--fx-gold-soft); }
.flight .card__icon svg, .flight .post__thumb svg, .flight .guarantee svg { stroke: var(--fx-gold); }
.flight .post__thumb { background: var(--fx-bg-2); }
.flight .post__thumb img { opacity: .92; }
.flight .problems li::before { background: var(--fx-gold); }
.flight .process li { border-top-color: rgba(232,196,104,.45); }
.flight .step { background: var(--fx-surface); border-color: var(--fx-line); }
.flight .step:hover { background: var(--fx-surface-2); border-color: rgba(232,196,104,.45); }
.flight .step h3 { color: var(--fx-text); }
.flight .step p { color: var(--fx-text-2); }
.flight .step__n { -webkit-text-stroke-color: var(--fx-gold) !important; font-family: var(--fx-display) !important; }
.flight .offer__aside { background: var(--fx-bg-2); }
.flight .tier--free { border-color: rgba(232,196,104,.6); }
.flight .tier--free .tier__tag { background: var(--fx-gold-soft); color: var(--fx-gold); }
.flight .tier .amount, .flight .pricecard .v { font-family: var(--fx-display); font-weight: 500; letter-spacing: -0.02em; }
.flight .guarantee, .flight .pattern-picker__result { background: rgba(232,196,104,.06); border: 1px solid rgba(232,196,104,.3); }
.flight .guarantee p, .flight .pattern-picker__result p { color: var(--fx-text-2); }
.flight .scope { background: transparent; border-color: var(--fx-line-2); }
.flight .scope li svg { stroke: var(--fx-muted); }
.flight .hero__portrait { border: 1px solid var(--fx-line); background: var(--fx-bg-2); }
.flight .hero__badge { background: rgba(5,8,15,.85); border-color: var(--fx-line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.flight .trust { background: transparent; border-block: 1px solid var(--fx-line); }
.flight .trust svg { stroke: var(--fx-gold); }
.flight .pattern-pill { background: var(--fx-surface); border-color: var(--fx-line); color: var(--fx-text-2); }
.flight .pattern-pill[aria-pressed="true"] { background: rgba(232,196,104,.08); border-color: rgba(232,196,104,.6); color: var(--fx-text); }

/* Dark CTA panels that used navy as their fill */
.flight .magnet, .flight .finalcta {
  background: radial-gradient(80% 120% at 100% 0%, rgba(232,196,104,.08), transparent 60%), var(--fx-bg-2);
  border: 1px solid var(--fx-line); color: var(--fx-text-2);
}
.flight .magnet h2, .flight .finalcta h2 { color: var(--fx-text); }
.flight .magnet .field input { background: rgba(220,230,242,.04); border-color: var(--fx-line-2); }

/* Social row on light backgrounds becomes the dark variant */
.flight .social--light a { border-color: var(--fx-line-2); }
.flight .social--light svg { stroke: var(--fx-text-2); }
.flight .social--light a:hover { border-color: var(--fx-gold); background: var(--fx-gold-soft); }
.flight .social--light a:hover svg { stroke: var(--fx-gold); }

/* Images with light backgrounds (certificates) sit on a soft plate */
.flight .proof-img img { background: #F8F6F0; }

/* Print stays black on white */
@media print {
  body.flight { background: #fff; color: #000; --ink: #000; --ink-2: #222; --ink-3: #444; }
  .flight main > section:first-child:not(.fx-hero)::before, .flight main > section:first-child:not(.fx-hero)::after, .fx-climbbar { display: none !important; }
}

/* Outcome Frame worksheet: numbers sat in navy circles */
.flight .of-n { background: var(--fx-gold); color: #0A0F1A; }
.flight .of-sheet { background: var(--fx-surface); }
.flight .of-err { color: #F2A38F; }
.flight .of-q.has-error textarea { border-color: #F2A38F; }