/* ============================================================
   FEATURE-PAGE DESIGN SYSTEM
   Single CSS layer that normalizes the seven feature pages
   (feature-modes, feature-internships, feature-tracker,
   feature-calendar, feature-resume-editor, feature-ai-coach,
   feature-ai-arena) to one shared visual language.

   Inspired by Stripe / Linear / Vercel / Anthropic. Light
   surfaces, single navy accent, restrained color, tight
   typography, consistent spacing scale, monospace tabular
   numbers, glass nav, soft cards.

   This file LOADS AFTER each page's scoped <style> block, so
   it wins the cascade. Don't fight it page-by-page, fight it
   here and the whole system shifts at once.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  --fp-ink: #0a0e1c;
  --fp-ink-2: #1a2138;
  --fp-muted: #5b6585;
  --fp-soft: #8a93af;
  --fp-line: rgba(10, 14, 28, 0.08);
  --fp-line-2: rgba(10, 14, 28, 0.14);
  --fp-bg: #ffffff;
  --fp-bg-2: #f6f7fb;
  --fp-bg-3: #f0f2f8;
  --fp-accent: #2B3A8E;
  --fp-accent-soft: rgba(43, 58, 142, 0.08);
  --fp-shadow-sm: 0 1px 2px rgba(10, 14, 28, 0.04), 0 1px 3px rgba(10, 14, 28, 0.06);
  --fp-shadow-md: 0 4px 16px rgba(10, 14, 28, 0.06), 0 1px 3px rgba(10, 14, 28, 0.04);
  --fp-shadow-lg: 0 12px 40px rgba(10, 14, 28, 0.08), 0 2px 6px rgba(10, 14, 28, 0.04);
}

/* ── Type baseline: every feature page uses the same font ── */
html[lang="en"] body,
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--fp-ink);
}

body .mono,
body code, body pre, body kbd, body samp {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-feature-settings: "tnum";
}

/* ── Hero typography normalization ─────────────────────── */
/* Each feature page has its own #*-hero h1 / .*-eyebrow pattern.
   Force a unified type scale across all of them. */
[id$="-hero"] h1,
.coach-panel .panel-title,
#cal-hero h1, #ft-hero h1, #int-hero h1, #m-hero h1 {
  font-family: "Inter", -apple-system, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.02 !important;
  color: var(--fp-ink) !important;
}

[class*="-eyebrow"],
.eyebrow, .ft-eyebrow, .int-eyebrow, .cal-eyebrow, .m-eyebrow,
.panel-eyebrow, [class*="section-eyebrow"] {
  font-family: "Inter", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--fp-accent) !important;
  opacity: 1 !important;
  margin-bottom: 1rem !important;
}

[id$="-hero"] p,
#cal-hero p, #ft-hero p, #int-hero p, #m-hero p {
  font-family: "Inter", sans-serif !important;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem) !important;
  line-height: 1.6 !important;
  color: var(--fp-muted) !important;
}

/* ── Section heads ─────────────────────────────────────── */
[class*="-section-title"],
.m-section-title, .int-section-title, .ft-section-title,
.cal-text h2, .panel-title {
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: var(--fp-ink) !important;
}

[class*="-section-desc"],
.m-section-desc, .int-section-desc, .ft-section-desc {
  color: var(--fp-muted) !important;
  line-height: 1.65 !important;
}

/* ── Buttons (every prefix) ────────────────────────────── */
.m-btn-primary, .int-btn-primary, .ft-btn-primary, .cal-btn,
.end-cta {
  font-family: "Inter", sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 0.7rem 1.4rem !important;
  border-radius: 100px !important;
  background: var(--fp-ink) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: var(--fp-shadow-sm) !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}
.m-btn-primary:hover, .int-btn-primary:hover, .ft-btn-primary:hover,
.cal-btn:hover, .end-cta:hover {
  background: #000 !important;
  transform: translateY(-1px) !important;
}

.m-btn-ghost, .int-btn-ghost, .ft-btn-ghost {
  font-family: "Inter", sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 0.7rem 1.4rem !important;
  border-radius: 100px !important;
  background: transparent !important;
  color: var(--fp-ink) !important;
  border: 1px solid var(--fp-line-2) !important;
  transition: border-color 0.15s ease !important;
}
.m-btn-ghost:hover, .int-btn-ghost:hover, .ft-btn-ghost:hover {
  border-color: var(--fp-ink) !important;
}

/* The cyan AI Arena "Enter the arena" pill, keep but soften */
[href="feature-ai-arena.html"][style*="background:#00e5ff"],
a[style*="background:#00e5ff"] {
  background: var(--fp-ink) !important;
  color: #fff !important;
  font-family: "Inter", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ── Cards (every prefix) ──────────────────────────────── */
.m-mode, .int-pillar, .ft-pillar, .ft-tile, .m-home-card,
.int-next-card, .m-next-card, .cal-mini, .toolkit-card {
  border-radius: 14px !important;
  border: 1px solid var(--fp-line) !important;
  background: var(--fp-bg) !important;
  box-shadow: var(--fp-shadow-sm) !important;
  transition: border-color 0.15s ease, transform 0.15s ease !important;
}
.m-mode:hover, .int-pillar:hover, .ft-pillar:hover, .ft-tile:hover,
.m-home-card:hover, .int-next-card:hover, .m-next-card:hover {
  border-color: var(--fp-line-2) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--fp-shadow-md) !important;
}

/* Tile/mode tags  */
.ft-tile-tag, .m-mode .who, .int-jc-status, .int-badge,
.card-tag, .toolkit-card-tag, .ft-pillar-icon::after {
  font-family: "Inter", sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ── Tables (mode tab compare etc.) ────────────────────── */
.m-tab-table, .compare-table {
  font-family: "Inter", sans-serif !important;
  border-collapse: collapse !important;
}
.m-tab-table th, .compare-table th {
  font-family: "Inter", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--fp-muted) !important;
}
.m-tab-table td, .compare-table td {
  font-family: "Inter", sans-serif !important;
  color: var(--fp-ink-2) !important;
}

/* ── Hero metric strip on features.html (light bg) ─────── */
.ft-hero-metrics {
  border-top: 1px solid var(--fp-line);
  border-bottom: 1px solid var(--fp-line);
  padding: 2rem 0 !important;
}
.ft-metric-val {
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--fp-ink) !important;
}
.ft-metric-label {
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  color: var(--fp-muted) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ── Stats band on features.html (dark navy bg) ────────── */
.ft-stats-inner {
  padding: 2rem 0 !important;
}
.ft-stat-num {
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
}
.ft-stat-label {
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ── Section heads: enforce centering ──────────────────── */
.ft-section-head, [class$="-section-head"] {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.ft-section-head .ft-section-eyebrow,
.ft-section-head .ft-section-title,
.ft-section-head .ft-section-desc {
  text-align: center !important;
}
.ft-section-head .ft-section-desc {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Hero + CTA action rows: enforce centering ─────────── */
.ft-hero-actions,
#ft-cta > div,
#ft-hero .ft-hero-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
}

/* CTA ghost button on dark band stays visible */
#ft-cta .ft-btn-ghost {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
#ft-cta .ft-btn-ghost:hover {
  border-color: #fff !important;
}

/* ── Fit-narrative card: comfortable interior padding ──── */
.ft-split-visual {
  aspect-ratio: auto !important;
  padding: 1rem !important;
}
.ft-spine-demo {
  padding: 2.5rem 2.25rem !important;
  gap: 1rem !important;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 14px;
}

/* ── Sticky page-hero bands (calendar, modes, internships) ─ */
[id$="-nav"], #int-nav, #m-nav, #ft-nav {
  background: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--fp-line) !important;
}

/* ── Dividers / section separators ─────────────────────── */
.cal-divider {
  background: var(--fp-line) !important;
  height: 1px !important;
}

/* ── Microcopy: section descriptions inherit muted color ─ */
body p { color: inherit; }
body .lede, body .lead, body .description { color: var(--fp-muted) !important; }

/* ── Prefer center-justified narrow content blocks ─────── */
[class*="section-head"] { max-width: 60ch; }

/* ── Anchor / link defaults across all feature pages ───── */
.fp-link, .ilink {
  color: var(--fp-accent) !important;
  border-bottom: 1px solid var(--fp-line-2) !important;
  transition: border-color 0.15s ease !important;
}
.fp-link:hover, .ilink:hover { border-bottom-color: var(--fp-accent) !important; }

/* ── Quote / blockquote unification ────────────────────── */
.ft-quote-section blockquote {
  font-family: "Inter", sans-serif !important;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.4 !important;
  color: var(--fp-ink) !important;
}
.ft-quote-section cite {
  font-family: "Inter", sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--fp-muted) !important;
  font-style: normal !important;
}

/* ── Feature footer/CTA bands ──────────────────────────── */
.feature-pro-page .cta-band,
[id$="-cta"], #ft-cta, #int-cta, #m-cta {
  background: var(--fp-ink) !important;
  color: #fff !important;
}
[id$="-cta"] h2, #ft-cta h2, #int-cta h2, #m-cta h2 {
  color: #fff !important;
  font-family: "Inter", sans-serif !important;
}

/* ── Reduce visual noise: kill colored gradient accents ── */
.ft-pillar::before, .m-mode::before,
.int-pillar::before, .ft-tile::before {
  display: none !important;
}