/* =============================================================
   copilotBC — marketing layer
   -------------------------------------------------------------
   Loaded ONLY on the marketing site. Extends core.css with:
   - editorial display type scale
   - deeper navy palette for hero / dark sections
   - cinematic motion presets
   - gradient & section-rhythm utilities
   ============================================================= */

:root {
  /* ─── Marketing palette extensions ────────────────────────── */
  /* A near-black navy for hero & manifesto sections. Distinct from
     the blue ramp so it can sit underneath blue accents without
     muddying. */
  --marketing-navy-900: #050B1F;
  --marketing-navy-800: #0A1330;
  --marketing-navy-700: #0F1D4A;

  /* Cream — used sparingly as a soft alternate background between
     navy blocks. Pulled from the old design's warm card. */
  --marketing-cream-100: #F4F1EA;
  --marketing-cream-200: #EBE5D9;

  /* Electric — for moments of emphasis only (one per section max).
     Slightly more saturated than blue-500. */
  --marketing-electric: #2E7DFF;
  --marketing-electric-glow: 0 0 80px rgba(46, 125, 255, 0.45);

  /* Section background aliases — semantic so hero/manifesto/etc.
     can swap together. */
  --marketing-bg-default: var(--color-neutral-0);
  --marketing-bg-deep:    var(--marketing-navy-900);
  --marketing-bg-soft:    var(--marketing-cream-100);

  --marketing-text-on-deep: var(--color-neutral-0);
  --marketing-text-on-deep-muted: rgba(255, 255, 255, 0.62);
  --marketing-border-on-deep: rgba(255, 255, 255, 0.10);

  /* ─── Marketing typography ────────────────────────────────── */
  /* Display sizes for hero / section headers. These are intentionally
     large; do not use them in the app. */
  /* Floors are deliberately low so the vw term governs on phones — a high
     clamp floor (e.g. 80px on display-lg) can't shrink below the screen width
     and overflows long words like "paperwork" on mobile. The vw coefficient and
     desktop max caps are unchanged, so tablet/desktop sizing is identical. */
  --marketing-display-xs:  clamp(28px,  4.5vw, 48px);
  --marketing-display-sm:  clamp(32px,  6vw,   64px);
  --marketing-display-md:  clamp(38px,  8vw,   88px);
  --marketing-display-lg:  clamp(44px,  10vw,  120px);
  --marketing-display-xl:  clamp(48px,  13vw,  176px);

  --marketing-display-leading: 0.95;
  --marketing-display-tracking: -0.035em;

  /* Eyebrow — small uppercase label that sits above section heads. */
  --marketing-eyebrow-size: var(--text-sm);
  --marketing-eyebrow-tracking: var(--tracking-widest);

  /* Lead paragraph — first paragraph after a hero, reads bigger. */
  --marketing-lead-size:    clamp(20px, 2.2vw, 26px);
  --marketing-lead-leading: 1.45;

  /* ─── Marketing rhythm ────────────────────────────────────── */
  /* Section vertical padding. Marketing sections are tall on
     purpose — give each idea its room. */
  --marketing-section-y-sm: clamp(64px,  8vw, 96px);
  --marketing-section-y-md: clamp(96px,  12vw, 160px);
  --marketing-section-y-lg: clamp(128px, 16vw, 240px);

  /* ─── Marketing motion ────────────────────────────────────── */
  /* Override the base reveal timing to feel more deliberate. */
  --reveal-duration: var(--duration-cinema-2);
  --reveal-ease:     var(--ease-confident);
  --reveal-distance: 24px;
  --reveal-stagger:  90ms;

  /* ─── Gradients (use sparingly) ───────────────────────────── */
  --marketing-gradient-deep:
    radial-gradient(120% 80% at 50% 0%,
                    var(--marketing-navy-700) 0%,
                    var(--marketing-navy-900) 60%);
  --marketing-gradient-edge:
    linear-gradient(180deg,
                    rgba(5, 11, 31, 0) 0%,
                    var(--marketing-navy-900) 100%);
}

/* ─── Display type helpers ──────────────────────────────────── */
/* Apply via class on the marketing site only. */
.display-xs, .display-sm, .display-md, .display-lg, .display-xl {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--marketing-display-leading);
  letter-spacing: var(--marketing-display-tracking);
  /* Fraunces variable axis: dial up optical size at large display. */
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}
.display-xs { font-size: var(--marketing-display-xs); }
.display-sm { font-size: var(--marketing-display-sm); }
.display-md { font-size: var(--marketing-display-md); }
.display-lg { font-size: var(--marketing-display-lg); }
.display-xl { font-size: var(--marketing-display-xl); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--marketing-eyebrow-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--marketing-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.lead {
  font-family: var(--font-ui);
  font-size: var(--marketing-lead-size);
  font-weight: var(--weight-regular);
  line-height: var(--marketing-lead-leading);
  color: var(--color-text-secondary);
  text-wrap: pretty;
  max-width: 38ch;
}

/* ─── Section primitives ────────────────────────────────────── */
.section {
  padding-block: var(--marketing-section-y-md);
  padding-inline: var(--space-6);
}
.section--sm  { padding-block: var(--marketing-section-y-sm); }
.section--lg  { padding-block: var(--marketing-section-y-lg); }
.section--deep {
  background: var(--marketing-bg-deep);
  color: var(--marketing-text-on-deep);
}
.section--deep .eyebrow { color: var(--marketing-text-on-deep-muted); }
.section--soft {
  background: var(--marketing-bg-soft);
}

.container { max-width: var(--container-wide); margin-inline: auto; }
.container--narrow { max-width: var(--container-narrow); margin-inline: auto; }
.container--prose  { max-width: var(--container-prose);  margin-inline: auto; }