@import url("/assets/fonts.css");

/* ===========================================================
   FHG University — shared design system
   Dark mode only (matches the FHG "Systemized Operator" brand)
   =========================================================== */

:root {
  --bg: #14100c;
  --bg-elev: #1c1712;
  --bg-elev-2: #221c15;
  --bg-band: #1a1511;
  --border: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.05);
  --gold: #c9a24d;
  --gold-bright: #ddb85f;
  --gold-soft: rgba(201, 162, 77, 0.14);
  --gold-dim: rgba(201, 162, 77, 0.55);
  --text: #f3ede2;
  --text-dim: #a89f92;
  /* Raised from #706859 on Aug 26, 2026. The old value measured 3.06:1 against
     --bg-elev-2 and 3.44:1 against --bg — below the WCAG AA floor of 4.5:1 for
     normal text, on the token used for module counts, meta lines and empty
     states. #8f8572 keeps the same hue (39deg) and saturation and clears 4.63:1
     on the worst surface. scripts/contrast-guard.py now fails the build on any
     token pair below AA, so this cannot drift back. */
  --text-faint: #8f8572;
  --red-badge: #3a1f1c;
  --green-ok: #7fae6f;
  --radius: 10px;
  /* 23 Sep 2026: the estate moved to Times New Roman, matching
     fairleyholdings.com. Tinos is the metric-compatible open face that is
     self-hosted here, so the page renders identically on a machine with no
     Times installed. --mono is deliberately NOT changed: lesson code blocks
     and command output need digits and columns to align. */
  --serif: Tinos, 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', Times, serif;
  --sans: Tinos, 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', Times, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* LABEL TYPE — added 26 Aug 2026. Section eyebrows and small caps labels used
     to be set in --mono. Monospace, uppercased and tracked out reads as a
     terminal readout rather than a heading, which is the wrong register for a
     page selling a career. Same sizes, same tracking, same color — the
     typeface is the only thing that changed, so this is one line to revert.
     NUMERIC readouts (.rank-xp, .dmod-xp) deliberately stay monospace: digits
     need to align. */
  --label: Tinos, 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', Times, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Nav ---------- */

nav.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}

nav.site-nav .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  /* Aug 24, 2026: raised from 1180px. The row's own content needs ~1290px and
     none of it can shrink, so the old cap guaranteed overflow rather than
     preventing it. */
  max-width: 1340px;
  margin: 0 auto;
}

.logo {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  /* Fix (Aug 22, 2026): the logo is a flex child, and once the nav row
     grew (Compass link + theme toggle) flex shrank it until
     "FHG UNIVERSITY" wrapped onto two lines. The wordmark is a single
     unit — never let it wrap or shrink. */
  white-space: nowrap;
  flex-shrink: 0;
}
.logo span { color: var(--gold); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}
/* Step the row down before it can overflow, then hand off to the hamburger. */
/* Raised from 1320px when the dashboard CTA gained its mark (+23px). */
@media (max-width: 1400px) { .nav-links { gap: 16px; } .nav-links a.nav-item { font-size: 11.5px; letter-spacing: 0.08em; } }
.nav-links a.nav-item {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.15s;
  /* Aug 24, 2026: two-word items ("Career Outcomes") were wrapping onto a
     second line at common widths, which broke the nav's baseline and made the
     whole row read as a mistake. Nav items are labels, never paragraphs. */
  white-space: nowrap;
}
.nav-links a.nav-item:hover { color: var(--gold); }

/* Theme toggle placement — Aug 24, 2026 (owner request: put it right of Enter
   Dashboard). Done with flex `order` rather than by moving the button in the
   DOM, deliberately: .nav-links collapses into the hamburger menu below 900px,
   so a toggle moved inside it would vanish on phones until the menu is opened.
   Ordering keeps the button a direct child of .inner — always visible on
   mobile — while rendering it last on desktop. */
/* Aug 28, 2026: .inner is justify-content: space-between, which distributes
   free space BETWEEN children. On a page with a short nav — Foundations has two
   items — that flung the toggle to the viewport edge with a chasm before it,
   while the wider University nav hid the problem. `margin-left: auto` on
   .nav-links absorbs the free space in one place instead, so the trailing
   group stays together at whatever width the row happens to be. */
nav.site-nav .inner > .theme-toggle-btn { order: 3; margin-left: 18px; flex-shrink: 0; }
/* Aug 28, 2026: was 28px. .inner is justify-content: space-between, which
   distributes free space BETWEEN children — so on a page with a short nav
   (Foundations has two items) the toggle was flung to the viewport edge with a
   chasm before it, while the wider University nav hid the problem. `auto`
   absorbs the free space here instead, keeping the trailing group together at
   whatever width the row happens to be. */
nav.site-nav .inner > .nav-links { margin-left: auto; padding-left: 32px; }
/* The dashboard button is a label, not a sentence — two lines reads as a
   layout mistake at the one place a visitor is most likely to click. */
nav.site-nav .nav-links a.btn { white-space: nowrap; }
nav.site-nav .inner > .nav-links { order: 2; }
nav.site-nav .inner > .nav-toggle { order: 1; }
/* Once the hamburger is showing, revert to source order so the row reads
   logo, theme, hamburger — matched to the collapse breakpoint below. */
@media (max-width: 1300px) {
  /* .nav-links goes position:absolute at this breakpoint, so the row has only
     two flow children after the logo. Order alone does not position them —
     `margin-left: auto` on the first of the pair is what absorbs the free
     space and pushes both to the right edge. An earlier attempt to reorder
     without it left the hamburger centered and the toggle outside the row. */
  nav.site-nav .inner > .nav-toggle { order: 1; margin-left: auto; }
  nav.site-nav .inner > .theme-toggle-btn { order: 2; margin-left: 12px; }
  nav.site-nav .inner > .nav-links { margin-left: 0; order: 3; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 24px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: var(--gold-bright); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--border); }
.btn-outline:hover { border-color: var(--gold-dim); color: var(--gold); }
.btn-gold { background: var(--gold); color: #1a1410; }
.btn-gold:hover { background: var(--gold-bright); }
.btn-block { width: 100%; }

/* ---------- Hero ---------- */

.hero {
  padding: 110px 32px 90px;
  text-align: center;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.eyebrow::before, .eyebrow::after {
  content: "—";
  margin: 0 12px;
  opacity: 0.6;
}
h1.hero-headline {
  font-family: var(--serif);
  font-size: 52px;
  line-height: 1.15;
  font-weight: 400;
  max-width: 900px;
  margin: 0 auto 28px;
  color: var(--text);
}
h1.hero-headline em {
  color: var(--gold);
  font-style: italic;
}
.hero-sub {
  max-width: 620px;
  margin: 0 auto 40px;
  color: var(--text-dim);
  font-size: 15.5px;
  line-height: 1.6;
}
.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

/* ---------- Stats band ---------- */

.stats-band {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-band);
}
.stats-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  text-align: center;
  padding: 40px 16px;
  border-right: 1px solid var(--border-soft);
}
.stat:last-child { border-right: none; }
.stat .num {
  font-family: var(--serif);
  font-size: 30.5px;
  color: var(--gold);
  font-weight: 700;
}
.stat .label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 6px;
}

/* ---------- Section shell ---------- */

section.block { padding: 100px 32px; }
.section-head { text-align: center; margin-bottom: 56px; }
.section-eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
h2.section-title {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  margin: 0 0 18px;
}
.section-intro {
  max-width: 620px;
  margin: 0 auto;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---------- Foundations callout ---------- */

.foundations-card {
  max-width: 900px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--bg-elev-2), var(--bg-elev));
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.foundations-badge {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--gold-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 25px;
}
.foundations-card h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: 20px;
  margin: 0 0 8px;
  color: var(--text);
}
.foundations-card p { color: var(--text-dim); font-size: 14.5px; line-height: 1.6; margin: 0 0 14px; }
.foundations-meta { font-size: 12px; color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Track cards ---------- */

.track-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.track-card {
  flex: 0 1 340px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  transition: border-color 0.15s, transform 0.15s;
}
.track-card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.track-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--gold-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin: 0 auto 20px; /* centered above its card content (Aug 22, 2026) */
}
.track-card h3 { font-size: 16px; margin: 0 0 10px; color: var(--text); }
.track-card p { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.track-modcount { font-size: 11px; letter-spacing: 0.1em; color: var(--gold); text-transform: uppercase; }
/* Track section path on the marketing cards — Aug 24, 2026. The cards listed
   three sample module titles, which shows flavour but not shape; a prospect
   evaluating "will this get me to AZ-104" needs the structure. The cert line
   directly above already names the certs, so this shows the arc only. */
.track-path { font-size: 11px; line-height: 1.75; color: var(--text-faint, var(--text-dim)); margin-top: 8px; }
.track-path b { color: var(--text-dim); font-weight: 700; }

.track-samples {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 12.5px;
  color: var(--text-faint);
  line-height: 1.7;
}
.track-samples span { color: var(--text-dim); }

/* ---------- Ranks ---------- */

.rank-panel {
  max-width: 640px;
  margin: 0 auto 40px auto;
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 26px;
  border-bottom: 1px solid var(--border-soft);
}
.rank-row:last-child { border-bottom: none; }
.rank-left { display: flex; align-items: center; gap: 14px; }
.rank-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.rank-dot.first { background: var(--gold-soft); }
.rank-name { font-size: 14.5px; font-weight: 700; }
.rank-xp { font-family: var(--mono); font-size: 12.5px; color: var(--text-faint); }

.track-icon-row {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.track-icon-row .mini {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}

/* ---------- Pricing ---------- */

.pricing-card {
  max-width: 420px;
  margin: 0 auto;
  background: var(--bg-elev);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 44px 40px;
  text-align: center;
}
.pricing-card .price {
  font-family: var(--serif); font-weight: 400;
  font-size: 47px;
  color: var(--gold);
  margin: 20px 0 4px;
}
.pricing-card .price sup { font-size: 16px; top: -22px; position: relative; }
.pricing-card .price small { font-size: 15px; color: var(--text-faint); font-family: var(--sans); }
.pricing-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 34px;
  text-align: left;
}
/* NOT display:flex. Flex made every child element its own flex item, so an
   <li> containing <b> laid the bold text and the text after it out as two
   independently-wrapped blocks — "6 real modules" broke after "real", and
   "Full access to all 7 career tracks" dropped "all" onto its own line.
   Absolute positioning keeps the checkmark aligned and leaves the content as
   one continuous run of text. */
.pricing-list li {
  position: relative;
  text-align: left;
  padding: 9px 0 9px 24px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
.pricing-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 9px;
  color: var(--gold);
  font-weight: 700;
}
.pricing-note { margin-top: 16px; font-size: 12px; color: var(--text-faint); }

/* Two-card pricing row (University + Bundle) — added Aug 22, 2026.
   Cards keep their existing single-card styling; this wrapper just lets
   two of them sit side by side and stack cleanly on phones. */
.pricing-grid {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}
.pricing-grid .pricing-card {
  margin: 0;
  flex: 1 1 340px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
}
/* CARD FOOTERS ALIGN, LISTS DO NOT STRETCH — Aug 26, 2026.
 The rule was `ul { flex: 1 }`, which grew the LIST to fill the card. A card
 with fewer bullets therefore rendered a void between its last bullet and the
 renewal block — visible as a large dead gap in the bundle card, with the two
 buttons at different heights.
 The list should be its natural height. It is the FOOTER that should be
 pinned, so every card's call to action lands on the same line however many
 bullets sit above it. margin-top:auto on the first footer element does that
 and absorbs the difference in the one place where empty space reads as
 deliberate. */
.pricing-grid .pricing-card .pricing-list { flex: 0 0 auto; }
.pricing-grid .pricing-card .renewal-disc,
.pricing-grid .pricing-card form { margin-top: auto; }
.pricing-card.bundle { border-color: var(--gold); position: relative; }
.pricing-card .plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--bg);
  font-family: var(--label);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 5px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
.price-was {
  font-size: 14px;
  color: var(--text-faint);
  text-decoration: line-through;
  margin-right: 8px;
  font-family: var(--sans);
}

/* ---------- Testimonial / CTA ---------- */

.testimonial-band {
  border-top: 1px solid var(--border-soft);
  padding: 100px 32px;
  text-align: center;
}
.testimonial-band blockquote {
  font-family: var(--serif); font-weight: 400;
  font-style: italic;
  font-size: 29px;
  line-height: 1.4;
  max-width: 700px;
  margin: 0 auto 20px;
  color: var(--text);
}
.testimonial-band cite {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-style: normal;
}

.cta-band {
  background: var(--bg-band);
  padding: 90px 32px;
  text-align: center;
}
.cta-band .section-eyebrow { }
.cta-band h2 { font-family: var(--serif); font-weight: 400; font-size: 32.5px; margin: 8px 0 32px; }

footer.site-footer {
  background: var(--bg);
  padding: 40px 32px;
  text-align: center;
  border-top: 1px solid var(--border-soft);
}
footer.site-footer .fname { font-family: var(--serif); font-weight: 400; font-size: 14.5px; margin-bottom: 8px; }
footer.site-footer .fmeta { font-size: 11px; letter-spacing: 0.1em; color: var(--text-faint); text-transform: uppercase; }

/* Legal footer row — Aug 24, 2026. Terms, Privacy and Refunds must be reachable
   from every page: several state auto-renewal statutes test disclosure on
   whether it is "clear and conspicuous", and a policy nobody can find from the
   page they are buying on does not meet that. Understated on purpose — this is
   wayfinding, not a call to action. */
.flegal { margin-top: 14px; font-size: 11.5px; }
.flegal a { color: var(--text-faint); text-decoration: none; padding: 0 9px;
            border-right: 1px solid var(--border); }
.flegal a:last-child { border-right: 0; }
.flegal a:hover { color: var(--gold); }

/* Point-of-sale automatic-renewal disclosure — Aug 24, 2026. Sits immediately
   above the checkout button because the statutes want it visible before billing
   information is requested, and Stripe's hosted page is where the card is
   entered. Readable rather than fine print: several of these laws use "clear and
   conspicuous" as the actual legal test, and gray 9px type fails it. */
.renewal-disc { font-size: 12px; line-height: 1.55; color: var(--text-dim);
                background: var(--bg-elev); border: 1px solid var(--border);
                border-radius: 8px; padding: 12px 14px; margin: 0 0 20px; text-align: left; }
/* 20px below, not 12 — Aug 26, 2026. The disclosure sat almost flush against the
   button beneath it, and because the Terms/Refunds/Privacy line wraps, the last
   link landed directly on top of the call to action. Two problems in one: it
   read as cramped, and a legal disclosure crowding the button it qualifies is
   the opposite of the "clear and conspicuous" test the block exists to pass. */
.renewal-disc a { color: var(--text-faint); text-decoration: underline; white-space: nowrap; }
.renewal-disc a:hover { color: var(--gold); }

/* The guarantee split — Aug 24, 2026. Two columns because the contrast IS the
   argument: what is promised sits beside what is refused, and the refusal is
   the half a competitor cannot print. Deliberately not a table; a table reads
   as comparison shopping, and this is a statement of terms. */
/* Equal columns, centered, and lifted. The 1.15fr split made the pair look
   accidentally off-center under a centered headline; equal columns read as a
   deliberate pairing. The lift matches every other card on the estate. */
/* THE OUTCOME PROMISE — redesigned 27 Aug 2026.
 *
 * This section is the whole commercial argument: what the platform will do for
 * you, and what nobody can. It was two equal white boxes with disc bullets, and
 * the right-hand one was sixty percent empty because it holds three words where
 * the left holds five sentences. Equal columns for unequal content reads as a
 * layout accident.
 *
 * Three changes, all structural rather than decorative:
 *   - Asymmetric grid. The honesty column is a counterweight, not a twin.
 *   - Custom marks. A gold tick against a muted stroke says which list is which
 *     before a word is read; identical discs say nothing.
 *   - The kicker becomes the payoff. "Anyone who guarantees you those is
 *     selling you something else" is the strongest line on the page and it was
 *     set as small italic text floating in dead space. It is now pinned to the
 *     foot of its card, above a rule, in the serif — which also balances the
 *     two columns without padding the copy out.
 */
.guarantee-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px;
                   max-width: 1000px; margin: 38px auto 0; text-align: left;
                   align-items: stretch; }
@media (max-width: 820px) { .guarantee-split { grid-template-columns: 1fr; } }

.g-col { position: relative; display: flex; flex-direction: column;
         background: var(--bg-elev); border: 1px solid var(--border);
         border-radius: var(--radius); padding: 30px 32px 28px; overflow: hidden;
         box-shadow: 0 10px 30px rgba(20,16,12,0.10);
         transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; }
/* The same gold hairline the track cards carry — this is premium surface and
   should read as part of that family, not as a plain content box. */
.g-col::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
                 background: linear-gradient(90deg, var(--gold), transparent 78%); }
.g-col:hover { transform: translateY(-3px); border-color: var(--gold-dim);
               box-shadow: 0 18px 44px rgba(20,16,12,0.16); }
.g-yes { background: linear-gradient(168deg, var(--gold-soft), transparent 46%), var(--bg-elev); }
.g-no::before { background: linear-gradient(90deg, var(--border), transparent 78%); }

.g-label { font-family: var(--label); font-size: 10px; letter-spacing: 0.12em;
           text-transform: uppercase; color: var(--gold); margin-bottom: 18px;
           line-height: 1.5; font-weight: 700; }
.g-no .g-label { color: var(--text-faint); }

.g-col ul { margin: 0; padding: 0; list-style: none; flex: 1; }
.g-col li { position: relative; padding-left: 28px; font-size: 13.5px; line-height: 1.68;
            color: var(--text-dim); margin-bottom: 13px; }
.g-col li:last-child { margin-bottom: 0; }
.g-col b { color: var(--text); font-weight: 700; }

/* A tick for what is promised. Drawn rather than typed so it cannot fall back
   to a system emoji that changes color on us. */
.g-yes li::before { content: ""; position: absolute; left: 2px; top: 6px;
                    width: 11px; height: 6px; border-left: 2px solid var(--gold);
                    border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
/* A stroke for what is not. Deliberately quiet — this list is honest, not a
   warning, and a red cross would read as a failure state. */
.g-no li::before { content: ""; position: absolute; left: 2px; top: 11px;
                   width: 12px; height: 2px; background: var(--border);
                   border-radius: 2px; }

.g-kicker { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--border-soft);
            font-family: var(--serif); font-size: 14.5px; line-height: 1.5;
            color: var(--text); font-style: normal; }
/* Primary CTA with a mark. gap rather than margin so the label stays centered
   when the button is stretched. */
/* Language picker — Aug 24, 2026. Renders from /api/locale so it cannot offer
   a language the launch gate has not cleared. A locale still in build is shown
   with its real progress rather than hidden: telling a Spanish speaker that
   nothing exists would be false, and telling them it is 0/26 terms in is true
   and gives them a reason to come back. */
/* Centered in the footer — it sat left-aligned while everything around it was
   centered, which read as a stray element rather than a footer control. */
.lang-picker { margin-top: 18px; text-align: center; }
.lp-label { font-family: var(--label); font-size: 10px; letter-spacing: 0.1em;
            text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.lp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
           gap: 8px; justify-content: center; }
.lp-item { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 13px;
           border: 1px solid var(--border); border-radius: 8px; text-decoration: none; }
.lp-live { border-color: var(--gold-dim); }
.lp-live:hover { border-color: var(--gold); }
.lp-soon { opacity: 0.72; cursor: default; }
.lp-name { font-size: 13px; color: var(--text); }
.lp-state { font-family: var(--label); font-size: 9.5px; letter-spacing: 0.05em;
            color: var(--text-faint); }
.lp-live .lp-state { color: var(--gold); }

.btn-mark { display: inline-flex; align-items: center; gap: 8px; }
.btn-mark svg { flex-shrink: 0; }

/* .g-kicker was defined TWICE in this stylesheet — once here and once with the
 * rest of the guarantee block. The later one won, so the 27 Aug restyle appeared
 * to do nothing to it. Removed; the single definition lives with the section it
 * belongs to. The stacking media query below moved there too.
 * (grep -oE "^\.[a-z-]+ *\{" assets/style.css | sort | uniq -d finds these.) */

/* "Same concept on AWS" — Aug 24, 2026. The Infrastructure track teaches cloud
   through Azure; a keyword sweep found 595 Microsoft-family mentions against 39
   for AWS, in a market where AWS is the larger platform. Rather than build a
   parallel track (double the maintenance, and it would teach console memorisation
   instead of transferable concepts), each Azure module names its AWS counterpart.
   Rendered from lib/cloud-equivalence.mts, never duplicated into lesson content. */
.aws-equiv { border: 1px solid var(--border); border-left: 3px solid var(--gold);
             border-radius: var(--radius); background: var(--bg-elev);
             padding: 18px 22px; margin: 0 0 30px; }
.aws-head { font-family: var(--label); font-size: 10.5px; letter-spacing: 0.1em;
            text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.aws-row + .aws-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.aws-concept { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.aws-pair { font-size: 13.5px; line-height: 1.7; color: var(--text-dim); }
.aws-plat { font-family: var(--label); font-size: 9.5px; letter-spacing: 0.08em;
            text-transform: uppercase; color: var(--text-faint); margin-right: 4px; }
.aws-arrow { color: var(--gold); margin: 0 8px; }
.aws-caveat { font-size: 12.5px; line-height: 1.65; color: var(--text-faint);
              margin: 8px 0 0; font-style: italic; }
.aws-foot { font-size: 12px; line-height: 1.6; color: var(--text-faint);
            margin: 16px 0 0; padding-top: 13px; border-top: 1px solid var(--border); }

/* "Who is responsible for this site" block — Aug 23, 2026.
   Added against Google's Search Quality Rater Guidelines (v. Sept 11, 2025).
   The guidelines are blunt about this: for YMYL pages, "a complete lack of
   information about who is responsible for the website and its content"
   warrants a LOWEST quality rating. University publishes salary figures and
   career-outcome claims, which sits it close enough to YMYL that the bar
   applies — and until now these pages carried only a copyright line: no
   named operator, no contact route, no link to an About page. The same
   guidelines name Trust as the most important part of E-E-A-T ("untrustworthy
   pages have low E-E-A-T no matter how Experienced, Expert, or Authoritative
   they may seem"), so this is the highest-leverage thing on the page for it. */
footer.site-footer .fwho { max-width: 640px; margin: 18px auto 0; padding-top: 18px;
  border-top: 1px solid var(--border-soft); font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }
footer.site-footer .fwho b { color: var(--text); font-weight: 700; }
footer.site-footer .fwho a { color: var(--gold); text-decoration: none; }
footer.site-footer .fwho a:hover { text-decoration: underline; }
footer.site-footer .fcontact { margin-top: 10px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
  font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; }

@media (max-width: 860px) {
  .track-card { flex-basis: 100%; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  h1.hero-headline { font-size: 34px; }
  .foundations-card { flex-direction: column; text-align: center; }
}

/* ===========================================================
   Dashboard-specific
   =========================================================== */

.dash-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid var(--border-soft);
}
.dash-profile { display: flex; align-items: center; gap: 14px; }
.dash-streak { font-size: 12.5px; color: var(--text-dim); }
.dash-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  border: 1px solid var(--gold-dim);
}

.dash-hero {
  padding: 44px 32px 30px;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.dash-hero .rank-badge { display: flex; align-items: center; gap: 16px; }
.rank-medal { font-size: 30.5px; }
/* 23 Sep 2026: the rank titles were <h1>. #universitySection and #compassSection
   unhide independently, so a member enrolled in both rendered two page headings
   at once — and a rank name ("Cadet") is a label, not what the document is about.
   Demoted to .rank-title; the page carries one hidden h1 that names it. */
.dash-hero h1, .dash-hero .rank-title { font-family: var(--serif); font-weight: 400; font-size: 23.5px; margin: 0 0 4px; }
.dash-hero .sub { color: var(--text-dim); font-size: 13.5px; }
.xp-bar-wrap { min-width: 260px; }
.xp-bar-track {
  width: 100%; height: 6px; border-radius: 3px;
  background: var(--bg-elev-2);
  overflow: hidden;
  margin-top: 8px;
}
.xp-bar-fill { height: 100%; background: var(--gold); }
.xp-bar-label { font-size: 11px; color: var(--text-faint); display: flex; justify-content: space-between; margin-top: 6px; }

.dash-body { max-width: 1100px; margin: 0 auto; padding: 10px 32px 80px; }
.dash-section-title { font-family: var(--serif); font-weight: 400; font-size: 18px; margin: 40px 0 18px; }
.dash-summary { font-size: 13px; color: var(--text-faint); margin-bottom: 6px; }

.dtrack {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 18px;
  overflow: hidden;
}
/* The track the dashboard leads with.
   Which track that is is declared by `featured: true` on exactly ONE track in
   curriculum.mts and carried through buildProfile. This rule is the treatment
   only — it must never be the place the decision lives, or the stylesheet and
   the curriculum become two answers to the same question. */
.dtrack-featured {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-dim), 0 10px 30px rgba(0, 0, 0, 0.18);
}
.dtrack-featured .dtrack-head { background: var(--gold-soft); }
.dtrack-featured-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-left: 10px;
  white-space: nowrap;
}
.dtrack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  cursor: pointer;
  gap: 16px;
}
.dtrack-head-left { display: flex; align-items: center; gap: 14px; }
.dtrack-progress-mini { font-size: 12px; color: var(--text-faint); min-width: 130px; text-align: right; }
.dtrack-bar-track { width: 100px; height: 5px; border-radius: 3px; background: var(--bg-elev-2); overflow: hidden; display: inline-block; margin-right: 8px; vertical-align: middle; }
.dtrack-bar-fill { height: 100%; background: var(--gold); }
.dtrack-modules { border-top: 1px solid var(--border-soft); }
.dmod {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 22px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px;
}
.dmod:last-child { border-bottom: none; }
.dmod-title { display: flex; align-items: center; gap: 10px; color: var(--text-dim); }
.dmod.done .dmod-title { color: var(--text); }
.dmod-status { font-size: 13px; }
.dmod-xp { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); min-width: 50px; text-align: right; }
.status-done { color: var(--green-ok); }
.status-next { color: var(--gold); }
.status-locked { color: var(--text-faint); }

.badge-shelf { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; justify-content: center; }
.badge-chip {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  text-align: center;
  min-width: 130px;
}
.badge-chip.earned { border-color: var(--gold-dim); }
.badge-chip .bicon { font-size: 20px; margin-bottom: 6px; }
.badge-chip .bname { font-size: 12px; font-weight: 700; }
.badge-chip .btrack { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.badge-chip.locked { opacity: 0.35; }

/* Lock overlay for unauthenticated visitors */
.lock-screen {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 32px;
}
.lock-icon { font-size: 36px; margin-bottom: 24px; color: var(--gold); }
.lock-screen h1, .lock-screen .lock-title { font-family: var(--serif); font-weight: 400; font-size: 27px; margin: 0 0 14px; max-width: 560px; }
.lock-screen p { color: var(--text-dim); max-width: 480px; margin: 0 0 30px; line-height: 1.6; }
.lock-preview {
  filter: blur(5px);
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}
.hidden { display: none !important; }

/* ---------- Accessibility: focus states ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Mobile nav ---------- */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 16px;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  cursor: pointer;
}
/* Hamburger at 1120px, not 760px (Aug 24, 2026). The row cannot shrink —
   logo and every nav item are nowrap — so between 760px and ~1300px it was
   overflowing the page by up to 470px rather than collapsing. */
@media (max-width: 1300px) {
  nav.site-nav .inner { position: relative; flex-wrap: wrap; }
  .nav-toggle { display: flex; }
  /* Aug 28, 2026: .dash-profile no longer collapses here. It holds four small
     items — Tracks, streak, avatar — and fits comfortably at desktop widths.
     Collapsing it at 1300px put a hamburger on the dashboard at full width,
     where a member is already inside the product and has no marketing nav to
     open. It now collapses at 760px with the rest of the phone layout. */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border-soft);
    flex-direction: column;
    /* Aug 28, 2026: centered rather than flex-start. The open menu drops from a
       hamburger sitting at the right edge, and a left-hugging list under it
       reads as two unrelated things. Centering gives the panel its own axis. */
    align-items: center;
    gap: 4px;
    padding: 10px 32px 20px;
    z-index: 60;
  }
  .nav-links.open { display: flex; }
  .nav-links a.nav-item, .nav-links a.btn {
    width: 100%;
    padding: 12px 0;
    text-align: center;
  }
  .dash-nav .nav-toggle { display: none; }
}

/* The dashboard's own collapse. Its row is short, so it survives to phone
   widths where the marketing nav cannot. */
@media (max-width: 760px) {
  .dash-nav { flex-wrap: wrap; position: relative; }
  .dash-nav .nav-toggle { display: flex; }
  .dash-profile {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border-soft);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 32px 20px;
    z-index: 60;
  }
  .dash-profile.open { display: flex; }
  .dash-profile a.nav-item { width: 100%; padding: 12px 0; }
  .dash-avatar, .dash-streak { margin-top: 4px; }
}

/* ---------- Loading / error states ---------- */
@keyframes fhg-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.skeleton {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  animation: fhg-pulse 1.4s ease-in-out infinite;
}
.skeleton-line { height: 14px; border-radius: 4px; background: var(--bg-elev-2); margin: 10px 0; }
.state-banner {
  max-width: 640px;
  margin: 40px auto;
  padding: 20px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}
.state-banner.error { border-color: rgba(200, 90, 80, 0.4); }
.state-banner a { color: var(--gold); text-decoration: underline; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--bg-elev-2);
  border: 1px solid var(--gold-dim);
  color: var(--text);
  padding: 13px 22px;
  border-radius: 8px;
  font-size: 13.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Continue-learning card ---------- */
.continue-card {
  max-width: 1100px;
  margin: 0 auto 8px;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--bg-elev-2), var(--bg-elev));
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.continue-card .cc-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.continue-card .cc-title { font-family: var(--serif); font-weight: 400; font-size: 17px; }
.continue-card .cc-track { font-size: 12.5px; color: var(--text-faint); margin-top: 4px; }

/* ---------- Dashboard search ---------- */
.dash-search {
  max-width: 1100px;
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}
.dash-search input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-size: 14px;
  font-family: var(--sans);
}
.dash-search input:focus { outline: none; }
.dash-search .si { color: var(--text-faint); }
.dmod-link { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dmod.filtered-out { display: none; }
.dmod.locked-row { cursor: default; }
.dmod-row-link { color: inherit; text-decoration: none; display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; padding: 13px 22px; margin: -13px -22px; }
.dmod-row-link:hover .dmod-title { color: var(--gold); }

/* ---------- Lesson player ---------- */
.lesson-shell { max-width: 880px; margin: 0 auto; padding: 44px 32px 100px; }
.breadcrumb { font-size: 12px; color: var(--text-faint); margin-bottom: 22px; letter-spacing: 0.04em; }
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--gold); }
.lesson-eyebrow { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
h1.lesson-title { font-family: var(--serif); font-size: 30.5px; font-weight: 400; margin: 0 0 14px; line-height: 1.2; }
.lesson-meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--text-faint); font-size: 12.5px; margin-bottom: 12px; }
.lesson-summary { color: var(--text-dim); font-size: 15.5px; line-height: 1.7; margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--border-soft); }

.lesson-prose h2 { font-family: var(--serif); font-size: 19px; font-weight: 400; margin: 38px 0 14px; color: var(--text); }
.lesson-prose p { color: var(--text-dim); font-size: 15px; line-height: 1.75; margin: 0 0 14px; }
.lesson-prose ul { color: var(--text-dim); font-size: 15px; line-height: 1.75; padding-left: 22px; margin: 0 0 14px; }
.lesson-prose li { margin-bottom: 6px; }
.lesson-prose strong { color: var(--text); }

.lesson-panel {
  margin-top: 44px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--gold-soft), var(--bg-elev) 40%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 30px;
}
/* Premium hairline (Aug 22, 2026) — reading surface, so no hover lift:
   just the same gold signature the rest of the brand carries. */
.lesson-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.75;
}
.lesson-panel h3 { font-family: var(--serif); font-weight: 400; font-size: 15.5px; margin: 0 0 16px; }
.lesson-panel + .lesson-panel { margin-top: 20px; }
.takeaway-list, .checklist-list { list-style: none; margin: 0; padding: 0; }
.takeaway-list li { display: flex; gap: 10px; font-size: 14px; color: var(--text-dim); padding: 7px 0; line-height: 1.6; }
.takeaway-list li::before { content: "★"; color: var(--gold); flex-shrink: 0; }
.checklist-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-dim); padding: 8px 0; border-bottom: 1px solid var(--border-soft); line-height: 1.5; }
.checklist-list li:last-child { border-bottom: none; }
.checklist-list input[type="checkbox"] { margin-top: 3px; accent-color: var(--gold); width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }
.checklist-list label { cursor: pointer; }
.checklist-list li.checked label { color: var(--text-faint); text-decoration: line-through; }

.notes-box textarea {
  width: 100%;
  min-height: 140px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  padding: 14px 16px;
  resize: vertical;
}
.notes-box textarea:focus { outline: none; border-color: var(--gold-dim); }
.notes-save-state { font-size: 11px; color: var(--text-faint); margin-top: 8px; height: 14px; }

.lesson-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.lesson-nav-link { font-size: 13px; color: var(--text-dim); display: flex; flex-direction: column; gap: 3px; max-width: 220px; }
.lesson-nav-link .lnl-dir { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.lesson-nav-link:hover .lnl-title { color: var(--gold); }
.lesson-nav-link.disabled { visibility: hidden; }

.mark-complete-btn[disabled] { opacity: 0.55; cursor: default; }
.complete-badge { display: inline-flex; align-items: center; gap: 8px; color: var(--green-ok); font-size: 13px; font-weight: 700; }

/* ---------- Certificate ---------- */
.certificate-wrap { max-width: 900px; margin: 60px auto 100px; padding: 0 32px; }
.certificate {
  border: 2px solid var(--gold-dim);
  border-radius: 4px;
  padding: 70px 60px;
  text-align: center;
  background: linear-gradient(135deg, var(--bg-elev-2), var(--bg));
  position: relative;
  /* Premium glow (Aug 22, 2026) — the credential should feel like the
     most valuable object on the platform. Print styles are unaffected. */
  box-shadow: 0 0 0 1px var(--gold-soft), 0 24px 60px rgba(0,0,0,0.25);
}
@media print { .certificate { box-shadow: none; } }
.certificate::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--border);
  pointer-events: none;
}
.certificate .cert-eyebrow { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 30px; }
.certificate .cert-lion { font-size: 40px; margin-bottom: 20px; }
/* 23 Sep 2026: these two lines were <h1>. They are sentence fragments —
   "FHG University certifies that" / "has successfully completed the" —
   and both rendered at once, so the page had two top-level headings and
   neither was a heading. They are now .cert-line paragraphs with the same
   rule, and the page carries one visually hidden h1 that says what the
   document is. Nothing moved on screen. */
.certificate h1, .certificate .cert-line { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--text-dim); margin: 0 0 8px; letter-spacing: 0.04em; }
.certificate .cert-name { font-family: var(--serif); font-weight: 400; font-size: 38px; color: var(--text); margin: 14px 0; }
.certificate .cert-track { font-family: var(--serif); font-weight: 700; font-size: 21.5px; color: var(--gold); margin: 18px 0; font-style: italic; }
.certificate .cert-date { font-size: 12.5px; color: var(--text-faint); margin-top: 30px; letter-spacing: 0.08em; text-transform: uppercase; }
.certificate-actions { text-align: center; margin-top: 30px; display: flex; gap: 14px; justify-content: center; }
@media print {
  nav, .certificate-actions, footer { display: none !important; }
  body { background: #fff; }
  .certificate { border-color: #c9a24d; background: none; }
  .certificate .cert-name, .certificate h1, .certificate .cert-line { color: #1a1410; }
}

@media (max-width: 640px) {
  .lesson-shell { padding: 32px 20px 80px; }
  h1.lesson-title { font-size: 26px; }
  .certificate { padding: 44px 24px; }
  .certificate .cert-name { font-size: 27px; }
}


.nav-badge {
  font-family: var(--label);
  font-size: 8.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--bg);
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 6px;
  position: relative;
  top: -1px;
}

html[data-theme="light"] {
  --bg: #faf7f0; --bg-elev: #ffffff; --bg-elev-2: #f3ede0; --bg-band: #f0e9d8;
  --border: rgba(20,16,12,0.09); --border-soft: rgba(20,16,12,0.05);
  /* Darkened Aug 26, 2026. #a9812f measured 2.96:1 on --bg-band — below AA even
     for LARGE text, so no font size made it compliant, on a color used for the
     11px mono eyebrows and the "Aligned to:" cert lines. Gold on a light ground
     always has to run darker than gold on a dark one; the dark theme keeps
     #c9a24d at 7.04:1 and is untouched. */
  --gold: #836424; --gold-bright: #856421; --gold-soft: rgba(169,129,47,0.12); --gold-dim: rgba(169,129,47,0.45);
  --text: #14100c; --text-dim: #4a4038; --text-faint: #736758; /* was #786b5c — 4.44:1 on white, 4.41:1 on --bg-band; both under AA */
}
body { transition: background-color .2s ease, color .2s ease; }

/* ===========================================================
   Premium layer — Aug 22, 2026 (owner request: "give every page the
   same premium feel" as the fairleyholdings.com redesign).
   Everything here uses existing tokens only, so both themes
   (University dark-gold, Compass light) inherit it correctly.
   =========================================================== */

/* -- Card treatment: soft gold gradient wash, gold top accent,
      hover lift with sheen sweep. Applied to the marketing cards
      in place, and available as .prem-panel for tool pages. -- */
.track-card, .pricing-card, .foundations-card, .prem-panel, .resume-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--gold-soft), var(--bg-elev) 42%);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.track-card::before, .pricing-card::before, .foundations-card::before, .prem-panel::before, .resume-section::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.75;
}
.track-card::after, .pricing-card::after, .foundations-card::after, .prem-panel::after, .resume-section::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60px; left: -90px;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.07), transparent);
  transform: skewX(-12deg); pointer-events: none;
}
@media (pointer: fine) {
  .track-card:hover, .pricing-card:hover, .foundations-card:hover, .prem-panel:hover, .resume-section:hover {
    transform: translateY(-5px);
    border-color: var(--gold-dim);
    box-shadow: 0 18px 44px rgba(0,0,0,0.22), 0 4px 18px var(--gold-soft);
  }
  .track-card:hover::after, .pricing-card:hover::after, .foundations-card:hover::after, .prem-panel:hover::after, .resume-section:hover::after {
    animation: premSheen 1.1s ease-out 1;
  }
}
@keyframes premSheen { from { left: -90px; } to { left: 115%; } }
.pricing-card.bundle {
  box-shadow: 0 0 0 1px var(--gold-dim), 0 16px 44px rgba(0,0,0,0.18);
  /* Fix (Aug 22, 2026): the premium layer's overflow:hidden was clipping
     the "Best Value" badge, which straddles the top border at -12px. The
     bundle card trades the sheen sweep (which needs the clip) for a
     visible badge — the ring + gradient + lift stay. */
  overflow: visible;
}
.pricing-card.bundle::after { content: none; }

/* -- Institutional card — Aug 24, 2026 --------------------------------------
   Was a bordered box of small gray text at the end of the pricing section,
   which read as a footnote. Institutional is a real revenue line with real
   margin, so it gets a real card: the same elevation, ring and badge treatment
   the bundle uses, in the ink band so it reads as a different KIND of purchase
   rather than a third consumer tier competing with the two above it. */
.inst-card-band { background: var(--bg-band); border-top: 1px solid var(--border);
                  border-bottom: 1px solid var(--border); margin-top: 64px; padding: 56px 24px; }
.inst-promo { max-width: 760px; margin: 0 auto; background: var(--bg-elev);
              border: 1px solid var(--gold); border-radius: var(--radius);
              padding: 40px 40px 34px; text-align: center; position: relative;
              box-shadow: 0 0 0 1px var(--gold-dim), 0 18px 50px rgba(0,0,0,0.28); }
.inst-promo .plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--bg); font-family: var(--label); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400;
  padding: 5px 14px; border-radius: 20px; white-space: nowrap; }
.inst-promo h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 3vw, 29px);
                 margin: 10px 0 12px; line-height: 1.2; }
.inst-promo .lede { font-size: 14.5px; line-height: 1.7; color: var(--text-dim);
                    max-width: 560px; margin: 0 auto 24px; }
.inst-price-row { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.inst-price-row .from { font-family: var(--label); font-size: 11px; letter-spacing: 0.1em;
                        text-transform: uppercase; color: var(--text-faint); }
.inst-price-row .amt { font-family: var(--serif); font-weight: 400; font-size: 39.5px; color: var(--gold); line-height: 1; }
.inst-price-row .per { font-size: 14px; color: var(--text-faint); }
.inst-promo .seats { font-size: 12.5px; color: var(--text-faint); margin: 0 0 26px; }
.inst-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
               text-align: left; margin: 0 0 28px; padding: 24px 0 0; border-top: 1px solid var(--border); }
.inst-points div { font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.inst-points b { display: block; color: var(--text); font-size: 13.5px; margin-bottom: 4px; }
.inst-promo .who { font-size: 12.5px; color: var(--text-faint); margin: 18px 0 0; line-height: 1.6; }
@media (max-width: 700px) {
  .inst-points { grid-template-columns: 1fr; gap: 16px; }
  .inst-promo { padding: 34px 24px 28px; }
}

/* -- Numbered ladder (the fairleyholdings.com "01–04" flow) -- */
.pnum-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px;
               position: relative; margin: 52px auto 6px; max-width: 920px; }
.pnum-ladder::before { content: ""; position: absolute; top: 23px; left: 11%; right: 11%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold), transparent); opacity: 0.45; }
.pnum-step { position: relative; padding: 0 10px; text-align: center; }
.pnum-num { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gold);
  background: var(--bg-elev); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
  font-family: var(--label); font-size: 13px; letter-spacing: 0.08em; color: var(--gold);
  position: relative; z-index: 1; transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
.pnum-step:hover .pnum-num { background: var(--gold); color: var(--bg); box-shadow: 0 0 0 6px var(--gold-soft); }
.pnum-step h4 { font-family: var(--serif); font-weight: 400; font-size: 14.5px; margin: 0 0 8px; color: var(--text); }
.pnum-step p { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin: 0 0 10px; }
.pnum-step a { color: var(--gold); font-size: 12.5px; }
@media (max-width: 760px) {
  .pnum-ladder { grid-template-columns: repeat(2, 1fr); gap: 30px 12px; }
  .pnum-ladder::before { display: none; }
}

/* -- Corner ribbon for a featured card -- */
.prem-ribbon { position: absolute; top: 24px; right: -44px; transform: rotate(38deg);
  background: var(--gold); color: var(--bg); font-family: var(--label); font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 52px; z-index: 2; }

/* -- Tool-page hero: the shared header band for Resume Builder /
      ATS Review / Interview Prep, so the three read as one suite -- */
/* .tool-hero / .tool-eyebrow / .tool-rule REMOVED Aug 25, 2026.
   Defined here as if shared, used by resume-builder.html alone, and now
   replaced everywhere by .tool-head. Left in place it would read as an
   available component and quietly re-diverge the three career tools the next
   time one of them needed a header. */
/* -- Suite cross-nav: the three career tools as small premium tiles -- */
.suite-nav { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.suite-tile { flex: 0 1 200px; padding: 18px 16px; text-align: center; border-radius: var(--radius);
  border: 1px solid var(--border); background: linear-gradient(180deg, var(--gold-soft), var(--bg-elev) 50%);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.suite-tile:hover { transform: translateY(-3px); border-color: var(--gold-dim); box-shadow: 0 10px 26px rgba(0,0,0,0.2); }
.suite-tile .ic { font-size: 18px; margin-bottom: 8px; }
.suite-tile .t { font-family: var(--serif); font-weight: 400; font-size: 14.5px; color: var(--text); }
.suite-tile .s { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; line-height: 1.5; }

/* -- Premium form focus: gold glow on any input across the platform -- */
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--gold-dim) !important;
  box-shadow: 0 0 0 3px var(--gold-soft);
}

/* -- Scroll reveal, JS-gated: pages add .fhg-js on <html> from
      /assets/premium.js. Without JS everything stays visible. -- */
html.fhg-js .reveal { opacity: 0; transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease; }
html.fhg-js .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .track-card::after, .pricing-card::after, .foundations-card::after, .prem-panel::after, .resume-section::after { display: none; }
  html.fhg-js .reveal { opacity: 1; transform: none; transition: none; }
  .track-card:hover, .pricing-card:hover, .foundations-card:hover, .prem-panel:hover, .resume-section:hover, .suite-tile:hover { transform: none; }
}

/* ===========================================================================
   TOOL PAGE COMPONENTS — Aug 25, 2026
   Shared layout language for Resume Builder, ATS Review and Interview Prep.

   WHY THESE EXIST. The three career tools each grew their own layout, so the
   same idea — "here is a step, here is why it matters" — was expressed three
   different ways and none of them looked like the curriculum surfaces the same
   person uses every day. This is one set of components, defined once.

   WHAT WAS BORROWED, AND WHAT DELIBERATELY WAS NOT. The structural patterns
   here are lifted from an interface the owner flagged as good (Resend's domain
   setup): a step rail down the left, advice placed BESIDE the field it
   concerns rather than beneath it, progressive disclosure of advanced options,
   and an icon badge anchoring the page.

   The PALETTE is deliberately not borrowed. That interface is monochrome; FHG
   is gold-on-dark with a serif voice, and it is the same voice on Compass, on
   University and on every curriculum card. Adopting someone else's colors to
   fix someone else's layout problem would have broken the consistency this
   change exists to create. Structure travels; identity does not.
   =========================================================================== */

/* --- Page anchor: the arrival moment --------------------------------------
   REVISED Aug 25, 2026. The first version was a left-aligned row — badge
   beside the title — which was clear and completely unceremonious. The pages
   it replaced opened centered: mono eyebrow, serif headline, a short gold rule
   beneath. That composition is what made them feel like arriving somewhere.

   The mistake was treating this as a choice between the two. It is not:
   premium is PACING, not decoration. A centered hero is an arrival; a left-
   aligned rail is a working surface. A page wants both, in that order.

   So the head is centered and ceremonial, and the rail below it stays exactly
   as functional as it was. It also now matches the marketing pages, which is
   the consistency the split was breaking. */
.tool-head { text-align: center; margin: 0 auto 40px; max-width: 640px; }
.tool-eyebrow {
  font-family: var(--label); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 18px;
}
.tool-badge {
  width: 54px; height: 54px;
  border-radius: 13px;
  background: var(--gold-soft);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 22.5px;
  margin: 0 auto 18px;
}
.tool-head-text { min-width: 0; }
.tool-head h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 3.4vw, 33px); line-height: 1.18; margin: 0 0 12px; color: var(--text);
}
.tool-head p {
  font-size: 14.5px; line-height: 1.75; color: var(--text-dim);
  margin: 0 auto; max-width: 56ch;
}
/* The rule closes the arrival and opens the working area. Same gradient the
   marketing heroes use, so the two read as one estate. */
.tool-rule {
  width: 64px; height: 2px; margin: 26px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* --- Two-column: content, with advice in the gutter ----------------------- */
/* The gutter is the point. Guidance printed under a field is read after the
   mistake has been made; guidance beside it is read while making the choice. */
.tool-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 34px; align-items: start; }
.tool-main { min-width: 0; }
.tool-gutter { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; }

/* --- The step rail -------------------------------------------------------- */
.tool-rail { position: relative; padding-left: 30px; }
.tool-rail::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 1px; background: var(--border);
}
.tool-step { position: relative; padding-bottom: 34px; }
.tool-step:last-child { padding-bottom: 0; }
.tool-step::before {
  content: ""; position: absolute; left: -30px; top: 6px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border);
}
.tool-step.active::before { border-color: var(--gold); background: var(--gold); }
.tool-step.done::before { border-color: var(--gold-dim); background: var(--gold-dim); }

/* --- Section: title, one description line, then the body ------------------ */
.tool-section-title { font-family: var(--serif); font-weight: 400; font-size: 16px; color: var(--text); margin: 0 0 5px; }
.tool-section-desc { font-size: 13px; line-height: 1.6; color: var(--text-faint); margin: 0 0 16px; max-width: 60ch; }

/* --- Advice card ---------------------------------------------------------- */
.tool-hint {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px 17px;
}
.tool-hint .label {
  font-family: var(--label); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 8px;
}
.tool-hint p { font-size: 12.5px; line-height: 1.65; color: var(--text-dim); margin: 0; }
.tool-hint p + p { margin-top: 9px; }
.tool-hint.warn { border-color: #6b4a4a; }
.tool-hint.warn .label { color: #c96f6f; }

/* --- Progressive disclosure ----------------------------------------------- */
.tool-more { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 14px; }
.tool-more > summary {
  cursor: pointer; list-style: none; font-size: 13px; color: var(--gold);
  display: flex; align-items: center; gap: 7px;
}
.tool-more > summary::-webkit-details-marker { display: none; }
.tool-more > summary::before { content: "\203A"; transition: transform 0.18s; display: inline-block; font-size: 15px; }
.tool-more[open] > summary::before { transform: rotate(90deg); }
.tool-more-body { padding-top: 16px; }

/* --- Readiness card: same language as .track-card, in-app ----------------- */
/* Consistency with the curriculum cards is the requirement here, so this
   reuses the card's surface, border, radius and hover rather than inventing
   a fourth card style. Left-aligned instead of centered because it carries a
   progress bar and a rank, not a marketing pitch. */
.tool-card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 26px;
  transition: border-color 0.15s, transform 0.15s;
}
.tool-card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.tool-card-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.tool-card h3 { font-family: var(--serif); font-weight: 400; font-size: 15.5px; margin: 0; color: var(--text); }
.tool-card-rank { display: flex; align-items: center; gap: 9px; }
.tool-card-rank .medal { font-size: 19px; }
.tool-card-rank .name { font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold); font-family: var(--label); }
.tool-bar { height: 5px; background: var(--border); border-radius: 100px; overflow: hidden; margin: 12px 0 8px; }
.tool-bar span { display: block; height: 100%; background: var(--gold); border-radius: 100px; transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.tool-bar-label { font-size: 11.5px; color: var(--text-faint); display: flex; justify-content: space-between; gap: 10px; }
.tool-card-note { font-size: 13px; line-height: 1.65; color: var(--text-dim); margin: 14px 0 0; }

@media (max-width: 900px) {
  /* First attempt moved the WHOLE gutter above the content. Rendering it on a
     390px viewport showed why that is wrong: three advice cards stacked before
     the first control pushed "Choose your target" most of a screen down, so the
     page opened on guidance instead of on the thing to do.
     
     `display: contents` dissolves the gutter so its cards become grid items in
     their own right, which lets the ACTIONABLE one lead and the evergreen
     guidance fall after the content it explains. */
  .tool-layout { grid-template-columns: 1fr; gap: 22px; }
  .tool-gutter { display: contents; }
  .tool-hint.warn { order: -1; }
  .tool-main { order: 0; }
  .tool-hint { order: 1; }
}
@media (max-width: 560px) {
  .tool-badge { width: 46px; height: 46px; font-size: 19px; border-radius: 11px; }
  .tool-eyebrow { font-size: 10px; letter-spacing: 0.14em; }
  .tool-head h1 { font-size: 20px; }
  .tool-rail { padding-left: 24px; }
  .tool-step::before { left: -24px; }
  .tool-card { padding: 20px; }
}

/* Label hidden visually but not from assistive technology. Used where a
   .tool-section-title already states the field name on screen, so a visible
   <label> would read as a duplicate to sighted users while removing it
   entirely would strip the field's accessible name. clip-path rather than
   display:none, because display:none removes it from the accessibility tree —
   which is the exact thing this must not do. */
.visually-hidden-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The flagship nav item — Aug 25, 2026.
   The nav sorts alphabetically so it is predictable, which put Tracks last.
   Position is not the only way to say "start here": gold and a little extra
   weight restore the hierarchy without fighting the ordering. Deliberately
   restrained — one item carries this, and the moment a second one does, the
   signal is worth nothing. */
.nav-item.nav-flagship { color: var(--gold); font-weight: 700; }
.nav-item.nav-flagship:hover { color: var(--gold-bright); }

/* THE ARC — Aug 25, 2026.
   Three steps, equal weight, with the joins as punctuation rather than
   decoration. Deliberately NOT cards: cards would make these look like three
   products you choose between, and the whole point is that it is one path in
   an order. Flat panels with a shared rule read as a sequence. */
.arc-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0; align-items: stretch; }
.arc-step {
  display: block; text-decoration: none; padding: 22px 20px;
  border-top: 2px solid var(--border); transition: border-color 0.18s;
}
.arc-step:hover { border-top-color: var(--gold); }
.arc-key {
  font-family: var(--label); font-size: 10.5px; letter-spacing: 0.22em;
  color: var(--gold); margin-bottom: 9px;
}
.arc-name { font-family: var(--serif); font-weight: 400; font-size: 16px; color: var(--text); margin-bottom: 7px; }
.arc-note { font-size: 13px; line-height: 1.65; color: var(--text-faint); }
.arc-join {
  display: flex; align-items: center; padding: 22px 14px 0;
  color: var(--gold-dim); font-size: 15px;
}

@media (max-width: 820px) {
  /* Stacked, and the arrows go away — vertical order already says "then". */
  .arc-row { grid-template-columns: 1fr; }
  .arc-join { display: none; }
  .arc-step { padding: 18px 0; }
}




/* ---------- Proof section ----------
   Position 2, directly under the hero. Credibility placed there is the most
   replicated finding in the conversion research. FHG has no testimonials and
   may not invent any, so the section names what the product cannot do — which
   is the only version that could honestly be published. */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
              margin: 40px auto 0; max-width: 1000px; }
@media (max-width: 900px) { .proof-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .proof-grid { grid-template-columns: 1fr; } }
.proof-card { text-align: center; padding: 26px 22px; border: 1px solid var(--border);
              border-radius: var(--radius); background: var(--bg-elev); }
.proof-title { margin: 0 0 10px; font-family: var(--serif); font-size: 17px;
               font-weight: 400; line-height: 1.35; color: var(--text); }
.proof-body { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--text-dim); }
.headline-md { font-family: var(--serif); font-size: 34px; font-weight: 400;
               line-height: 1.2; color: var(--text); margin-bottom: 14px; }
.section-lede { max-width: 60ch; margin: 0 auto; text-align: center; font-size: 16px;
                line-height: 1.75; color: var(--text-dim); }
.section-note { max-width: 62ch; margin: 34px auto 0; text-align: center;
                font-size: 13.5px; line-height: 1.7; color: var(--text-faint); }

/* The record-type line. Added 26 Sep 2026 with the three-way split of
   "certificate": every page that shows an FHG completion record, an exam
   preparation map, or somebody's issuer-awarded credential says which of the
   three it is, in one sentence declared once in lib/record-types.mts. */
.record-type {
  max-width: 560px;
  margin: 18px auto 0;
  padding: 10px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dim);
  text-align: center;
}