/**
 * homepage-layout.css — Phase 7 — koallabs.ai homepage shell.
 *
 * Loaded only on / via the koallabs/homepage library (see koallabs.theme
 * hook_preprocess_page__front). Consumes Phase 3 tokens from style.css —
 * does NOT re-declare the token root selector.
 *
 * Scope: .hero-host wrapper, .wrap / .wrap-wide containers, .btn-primary /
 * .btn-secondary buttons, footer grid, shared utility rules. Hero variant
 * internals live in hero-variants.css; Problems/Tiers/FAQ in
 * homepage-sections.css; scrollytelling in framework-scrolly.css.
 *
 * Typography lock: approved sizes 14/16/24/48 px; approved weights 400/600.
 * Nav sticky uses -webkit-backdrop-filter before backdrop-filter (Pitfall 6).
 *
 * Port source: design_handoff_koallabs_homepage/prototype/styles.css.
 * D-16 strip applied: the dev-only variant switcher strip (prototype
 * lines 107–130) and the dev-only tweaks panel (prototype lines 132–154)
 * are not ported.
 */

/* ---------- Body baseline on front page ---------- */
body.path-frontpage {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
}

/* ---------- Layout ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.wrap-wide { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

/* ---------- Header ---------- */
/* Header styles moved to site-shell.css (global library) so they also apply
   on legacy pages. See DI-07-06 in deferred-items.md. */

/* ---------- Eyebrow ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-accent); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ''; width: 18px; height: 1px; background: var(--color-accent);
}
.eyebrow.plain::before { display: none; }

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-block; background: var(--color-accent); color: #0A0A0F;
  padding: 14px 22px; border-radius: 6px; font-weight: 600; font-size: 15px;
  border: 1px solid var(--color-accent); transition: transform .15s ease, box-shadow .2s ease;
}
.btn-primary:hover { color: #0A0A0F; transform: translateY(-1px); box-shadow: 0 10px 28px -12px rgba(0,212,170,0.5); }
.btn-secondary {
  display: inline-block; background: transparent; color: var(--color-foreground);
  padding: 14px 22px; border-radius: 6px; font-weight: 600; font-size: 15px;
  border: 1px solid var(--color-border);
  transition: border-color .15s ease, color .15s ease;
}
.btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------- Section scaffolding ---------- */
section.pad { padding: 96px 0; }
section.pad-sm { padding: 64px 0; }
h2.section-h {
  font-size: 40px; line-height: 1.1; font-weight: 600; margin: 0 0 18px; letter-spacing: -0.01em;
  max-width: 20ch;
}
p.section-lead {
  font-size: 18px; line-height: 1.6; color: var(--color-foreground-muted); margin: 0 0 48px; max-width: 58ch;
}

/* ---------- HERO variant host ---------- */
.hero-host { position: relative; }
.hero-variant { display: none; }
.hero-variant.active { display: block; }

/* ---------- Hero shared bits ---------- */
.hero-eyebrow-row {
  display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
}
.stat-pill {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--color-foreground-muted); border: 1px solid var(--color-border);
  padding: 6px 10px; border-radius: 4px;
}
.hero h1 {
  font-size: clamp(44px, 5.6vw, 72px);
  line-height: 1.02; font-weight: 600; letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--color-accent); }
.hero h1 .grad {
  background: linear-gradient(96deg, #F5F5F7 0%, #F5F5F7 60%, #8A8A9A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead {
  font-size: 18px; line-height: 1.6; color: var(--color-foreground-muted);
  max-width: 54ch; margin: 0 0 32px;
}
.hero .under-cta {
  margin-top: 18px; font-family: var(--font-mono); font-size: 12px; color: var(--color-foreground-subtle); letter-spacing: 0.06em;
}

/* ---------- Footer ---------- */
/* Footer styles moved to site-shell.css (global library) so they also apply
   on legacy pages. See DI-07-06 in deferred-items.md. */

/* ---------- Badge glyph (reused) ---------- */
.k-check { color: var(--color-accent); }