/* ============================================================
   Fusion Collective — Editorial Design System
   ------------------------------------------------------------
   Loaded globally after style.css (see templates/base/base.html).
   Scoped entirely under the `.ed-` class prefix so nothing here
   can leak into existing pages. Consumed by the "editorial_*"
   StreamField blocks (see cms/core/blocks.py).

   Batch 1 scope: ed-hero, ed-pullquote, ed-break, ed-cta, ed-closer.
   Batches 2 and 3 will append additional block styles below
   a clearly marked divider.
   ============================================================ */


/* ============================================
   Merriweather — self-hosted from /static/fonts/
   (Proxima Nova is already declared in style.css)
   ============================================ */
@font-face {
  font-family: 'Merriweather';
  src: url("../fonts/merriweather-v33-latin-regular.115e2bcd9aa7.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather';
  src: url("../fonts/merriweather-v33-latin-italic.e02afa5fc636.woff2") format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather';
  src: url("../fonts/merriweather-v33-latin-700.f365ae598320.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather';
  src: url("../fonts/merriweather-v33-latin-700italic.1680612ae9f5.woff2") format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/* ============================================
   Editorial tokens
   ============================================ */
:root {
  /* Brand palette (mirrors brand-kit; hardcoded here so
     editorial.css is self-sufficient without Tailwind tokens) */
  --ed-purple:       #3D369F;
  --ed-purple-soft:  #6861B8;
  --ed-orange:       #F09C2D;
  --ed-orange-soft:  #F4B560;
  --ed-blue:         #3BA5E4;
  --ed-red:          #F02F00;
  --ed-warm-white:   #FEFAEC;
  --ed-ivory:        #F7F3E5;
  --ed-white:        #FFFFFF;

  --ed-text:         #1A1A1A;
  --ed-text-2:       #4A4A4A;
  --ed-text-muted:   #8A8A8A;
  --ed-divider:      #E3DFD0;

  /* Typography */
  --ed-font-display: 'Proxima Nova', system-ui, -apple-system, sans-serif;
  --ed-font-body:    'Proxima Nova', system-ui, -apple-system, sans-serif;
  --ed-font-accent:  'Merriweather', Georgia, 'Times New Roman', serif;

  /* Editorial type scale (clamp for fluid responsiveness) */
  --ed-display-1: clamp(2.75rem, 6vw + 1rem, 5.75rem);
  --ed-display-2: clamp(2.25rem, 4vw + 1rem, 4rem);
  --ed-display-3: clamp(1.75rem, 3vw + 0.75rem, 2.75rem);
  --ed-lede:      clamp(1.125rem, 0.75vw + 1rem, 1.375rem);
  --ed-body:      1rem;
  --ed-micro:     0.75rem;

  /* Rhythm */
  --ed-section-pad-y:   clamp(4rem, 8vw, 9rem);
  --ed-section-pad-x:   clamp(1.25rem, 4vw, 3rem);
  --ed-container-max:   72rem;
  --ed-container-narrow: 44rem;
}


/* ============================================
   Shared editorial primitives
   ============================================ */

/* The eyebrow — small uppercase lockup with a leading rule.
   Used above every editorial title. Color is overridable per-
   block via `--ed-eyebrow-color` on the block root. */
.ed-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--ed-font-display);
  font-weight: 600;
  font-size: var(--ed-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ed-eyebrow-color, var(--ed-orange));
  margin-bottom: 1.75rem;
}
.ed-eyebrow::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  background: currentColor;
}
.ed-eyebrow--centered {
  justify-content: center;
}
.ed-eyebrow--centered::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  background: currentColor;
}

/* Meta label — smaller marker used for section numbers or
   subtle typographic annotations. */
.ed-meta {
  font-family: var(--ed-font-display);
  font-weight: 500;
  font-size: var(--ed-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
}

/* Display title — the editorial workhorse. Inline <em> renders
   in Merriweather italic as an accent, consistent with the
   design mockup. */
.ed-title {
  font-family: var(--ed-font-display);
  font-weight: 900;
  font-size: var(--ed-display-1);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ed-text);
  margin: 0;
}
.ed-title em {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ed-accent-color, var(--ed-orange));
}

/* Lede — secondary paragraph after a title. */
.ed-lede {
  font-family: var(--ed-font-body);
  font-weight: 300;
  font-size: var(--ed-lede);
  line-height: 1.5;
  color: var(--ed-text-2);
  max-width: 48ch;
  margin: 2rem 0 0;
}

/* Prose — default rich-text paragraphs inside editorial blocks. */
.ed-prose {
  font-family: var(--ed-font-body);
  font-weight: 400;
  font-size: var(--ed-body);
  line-height: 1.7;
  color: var(--ed-text-2);
}
.ed-prose p { margin: 0 0 1em; }
.ed-prose p:last-child { margin-bottom: 0; }
.ed-prose em {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
}
.ed-prose strong {
  color: var(--ed-text);
  font-weight: 700;
}

/* Buttons — editorial rather than utility. */
.ed-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ed-font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  padding: 0.9rem 1.5rem;
  border-radius: 2px;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
  border: 1px solid transparent;
}
.ed-btn__arrow {
  display: inline-block;
  transition: transform 150ms ease;
}
.ed-btn:hover .ed-btn__arrow { transform: translateX(3px); }

.ed-btn--primary {
  background: var(--ed-purple);
  color: #fff;
  border-color: var(--ed-purple);
}
.ed-btn--primary:hover {
  background: var(--ed-purple-soft);
  border-color: var(--ed-purple-soft);
}

.ed-btn--ghost {
  background: transparent;
  color: var(--ed-text);
  border-color: var(--ed-text);
}
.ed-btn--ghost:hover {
  background: var(--ed-text);
  color: #fff;
}
.ed-btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}
.ed-btn--ghost-light:hover {
  background: #fff;
  color: var(--ed-text);
}

/* Container helpers (used inside block templates). */
.ed-container {
  max-width: var(--ed-container-max);
  margin: 0 auto;
  padding-left: var(--ed-section-pad-x);
  padding-right: var(--ed-section-pad-x);
}
.ed-container--narrow {
  max-width: var(--ed-container-narrow);
}


/* ============================================
   Block: editorial_hero
   ============================================ */
.ed-hero {
  --ed-eyebrow-color: var(--ed-orange);
  background: var(--ed-warm-white);
  padding-top: var(--ed-section-pad-y);
  padding-bottom: var(--ed-section-pad-y);
  position: relative;
  overflow: hidden;
}
.ed-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
.ed-hero__meta {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.ed-hero__meta-number {
  font-family: var(--ed-font-display);
  font-weight: 900;
  font-size: 1rem;
  color: var(--ed-orange);
}
.ed-hero__title {
  /* wider cap for hero */
  font-size: var(--ed-display-1);
  max-width: 18ch;
}
.ed-hero__subtitle {
  font-family: var(--ed-font-body);
  font-weight: 300;
  font-size: clamp(1.25rem, 1.5vw + 1rem, 1.75rem);
  line-height: 1.35;
  color: var(--ed-text-2);
  max-width: 36ch;
  margin: 1.25rem 0 0;
}
.ed-hero__subtitle em {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--ed-text);
}
.ed-hero__tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ed-divider);
  max-width: 44rem;
}
@media (min-width: 700px) {
  .ed-hero__tiles { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
.ed-hero__tile {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ed-hero__tile-label {
  font-family: var(--ed-font-display);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ed-orange);
}
.ed-hero__tile-value {
  font-family: var(--ed-font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ed-text);
}
.ed-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}
/* Hero primary CTA is orange-filled (overrides the global purple .ed-btn--primary). */
.ed-hero__ctas .ed-btn--primary {
  background: var(--ed-orange);
  border-color: var(--ed-orange);
  color: var(--ed-warm-white);
}
.ed-hero__ctas .ed-btn--primary:hover {
  background: var(--ed-orange-soft);
  border-color: var(--ed-orange-soft);
}
.ed-btn--secondary {
  background: transparent;
  color: var(--ed-text);
  border-color: var(--ed-text);
}
.ed-btn--secondary:hover {
  background: var(--ed-text);
  color: var(--ed-warm-white);
}


/* ============================================
   Block: editorial_pull_quote
   ============================================ */
.ed-pullquote {
  padding-top: clamp(3rem, 6vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
  background: transparent;
}
.ed-pullquote__inner {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ed-section-pad-x);
  padding-right: var(--ed-section-pad-x);
}
.ed-pullquote--left .ed-pullquote__inner   { margin-left: 0; }
.ed-pullquote--right .ed-pullquote__inner  { margin-right: 0; }
.ed-pullquote--center .ed-pullquote__inner { text-align: center; }

.ed-pullquote__quote {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  line-height: 1.35;
  color: var(--ed-text);
  margin: 0;
  text-wrap: balance;
}
.ed-pullquote__attribution {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--ed-font-display);
  font-weight: 500;
  font-size: var(--ed-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
  margin-top: 1.75rem;
}
.ed-pullquote__attribution::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  background: currentColor;
}
.ed-pullquote--center .ed-pullquote__attribution {
  justify-content: center;
}

/* Salvo variant: attribution renders above the quote as an uppercase orange
   kicker, with a 2px orange rule on the left edge. Used when the block's
   attribution_position is 'top'. */
.ed-pullquote--attr-top .ed-pullquote__inner {
  border-left: 2px solid var(--ed-orange);
  padding-left: 1.75rem;
}
.ed-pullquote__kicker {
  font-family: var(--ed-font-display);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ed-orange);
  margin: 0 0 1.25rem;
}
.ed-pullquote--attr-top.ed-pullquote--center .ed-pullquote__inner {
  border-left: 0;
  padding-left: var(--ed-section-pad-x);
  text-align: center;
}


/* ============================================
   Block: editorial_section_break
   ============================================ */
.ed-break {
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
  position: relative;
}
.ed-break--warm   { background: var(--ed-warm-white); color: var(--ed-text); }
.ed-break--purple { background: var(--ed-purple);     color: #fff; }
.ed-break--dark   { background: #0B0B12;              color: #fff; }

.ed-break__inner {
  max-width: var(--ed-container-max);
  margin: 0 auto;
  padding-left: var(--ed-section-pad-x);
  padding-right: var(--ed-section-pad-x);
  text-align: center;
}
.ed-break__title {
  font-family: var(--ed-font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: inherit;
  margin: 0;
  text-wrap: balance;
}
/* RichTextBlock wraps content in <p>; bare `p { color: ... }` in style.css
   (specificity 0,0,1 direct-match) otherwise beats the inherited color on
   .ed-break__title. Bump to (0,1,1) by targeting <p> children explicitly.
   color: inherit keeps the three .ed-break background variants (warm/purple/dark)
   working without per-variant overrides. */
.ed-break__title p {
  color: inherit;
  margin: 0;
}
.ed-break__title em {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--ed-accent-color, var(--ed-orange));
}
/* On dark backgrounds, default accent color to orange too,
   but allow override via --ed-accent-color. */
.ed-break--purple, .ed-break--dark {
  --ed-eyebrow-color: #fff;
}
.ed-break--purple .ed-eyebrow,
.ed-break--dark .ed-eyebrow {
  opacity: 0.85;
}

/* Continuous-section variant: when aside_body is present, switch from the
   centered single-column layout to a 2-column header (title left, aside right
   on ≥900px). Inner text-align drops from center to left. */
.ed-break--with-aside .ed-break__inner {
  text-align: left;
}
.ed-break__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 900px) {
  .ed-break__grid {
    grid-template-columns: 7fr 5fr;
    gap: 4rem;
  }
}
.ed-break__aside {
  font-family: var(--ed-font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 50ch;
  color: rgba(255, 255, 255, 0.75);
}
.ed-break--warm .ed-break__aside { color: var(--ed-text-2); }
.ed-break__aside p { color: inherit; margin: 0 0 0.75em; }
.ed-break__aside p:last-child { margin-bottom: 0; }
.ed-break__aside a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================================
   Block: editorial_cta
   ============================================ */
.ed-cta {
  background: var(--ed-warm-white);
  padding-top: var(--ed-section-pad-y);
  padding-bottom: var(--ed-section-pad-y);
}
.ed-cta__inner {
  max-width: var(--ed-container-max);
  margin: 0 auto;
  padding-left: var(--ed-section-pad-x);
  padding-right: var(--ed-section-pad-x);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: end;
}
@media (min-width: 900px) {
  .ed-cta__inner {
    grid-template-columns: 1.25fr 1fr;
    gap: 4rem;
  }
}
.ed-cta__title {
  font-family: var(--ed-font-display);
  font-weight: 900;
  font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ed-text);
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.ed-cta__title em {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--ed-orange);
}
.ed-cta__body {
  margin-top: 1.5rem;
  font-family: var(--ed-font-body);
  font-weight: 400;
  font-size: var(--ed-body);
  line-height: 1.7;
  color: var(--ed-text-2);
  max-width: 44ch;
}
.ed-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}


/* ============================================
   Block: editorial_koan_closer
   ============================================ */
.ed-closer {
  background: var(--ed-warm-white);
  padding-top: var(--ed-section-pad-y);
  padding-bottom: var(--ed-section-pad-y);
}
.ed-closer__inner {
  max-width: var(--ed-container-narrow);
  margin: 0 auto;
  padding-left: var(--ed-section-pad-x);
  padding-right: var(--ed-section-pad-x);
  text-align: center;
}
.ed-closer__title {
  font-family: var(--ed-font-display);
  font-weight: 900;
  font-size: clamp(2rem, 3vw + 1rem, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ed-text);
  margin: 0;
  text-wrap: balance;
}
.ed-closer__title em {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--ed-text);
}
.ed-closer__body {
  margin-top: 2rem;
  font-family: var(--ed-font-body);
  font-weight: 400;
  font-size: var(--ed-body);
  line-height: 1.75;
  color: var(--ed-text-2);
}
.ed-closer__body p { margin: 0 0 1em; }
.ed-closer__body p:last-child { margin-bottom: 0; }
.ed-closer__koan {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--ed-divider);
}
.ed-closer__koan p {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 1vw + 0.75rem, 1.375rem);
  line-height: 1.4;
  color: var(--ed-text);
  margin: 0 0 0.5em;
}
.ed-closer__koan p:last-child {
  margin-bottom: 0;
  font-weight: 700;
  font-style: normal;
  font-family: var(--ed-font-display);
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 3vw, 2.5rem);
  color: var(--ed-orange);
}


/* ============================================
   Accessibility + motion
   ============================================ */
.ed-btn:focus-visible,
.ed-eyebrow:focus-visible {
  outline: 2px solid var(--ed-orange);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ed-btn,
  .ed-btn__arrow {
    transition: none;
  }
}


/* ============================================================
   BATCH 2 BLOCKS
   (methodology_steps, editorial_card_grid,
    comparison_ledger, sticky_list_grid)
   ============================================================ */


/* ============================================
   Block: methodology_steps
   — 4-step horizontal infographic ("Sentinel Workflow")
   — Templates pass step count via inline style:
     <div class="ed-methodology__steps" style="--ed-step-count: 4;">
   ============================================ */
.ed-methodology {
  background: transparent;
  padding-top: var(--ed-section-pad-y);
  padding-bottom: var(--ed-section-pad-y);
  border-top: 1px solid var(--ed-divider);
}
.ed-methodology__header {
  max-width: var(--ed-container-max);
  margin: 0 auto 5rem;
  padding-left: var(--ed-section-pad-x);
  padding-right: var(--ed-section-pad-x);
}
.ed-methodology__title {
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: var(--ed-display-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ed-text);
  max-width: 24ch;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.ed-methodology__title em {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--ed-purple);
}
.ed-methodology__note {
  font-family: var(--ed-font-body);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--ed-text-muted);
  margin: 0;
}
.ed-methodology__steps {
  max-width: var(--ed-container-max);
  margin: 0 auto;
  padding-left: var(--ed-section-pad-x);
  padding-right: var(--ed-section-pad-x);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  position: relative;
}
@media (min-width: 900px) {
  .ed-methodology__steps {
    grid-template-columns: repeat(var(--ed-step-count, 4), 1fr);
    gap: 0;
  }
  .ed-methodology__steps::before {
    content: "";
    position: absolute;
    left: var(--ed-section-pad-x);
    right: var(--ed-section-pad-x);
    top: 2.5rem;
    height: 1px;
    background: var(--ed-orange);
    opacity: 0.5;
  }
}

.ed-methodology-step {
  position: relative;
  padding-right: 2rem;
}
@media (min-width: 900px) {
  .ed-methodology-step { padding: 0 2.5rem; }
  .ed-methodology-step:first-child { padding-left: 0; }
  .ed-methodology-step:not(:last-child) {
    border-right: 1px solid var(--ed-divider);
  }
}
.ed-methodology-step__dot {
  display: none;
}
@media (min-width: 900px) {
  .ed-methodology-step__dot {
    display: block;
    position: absolute;
    top: 2rem;
    left: 2.5rem;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--ed-warm-white);
    border: 2px solid var(--ed-orange);
    z-index: 2;
  }
  .ed-methodology-step:first-child .ed-methodology-step__dot { left: 0; }
}
.ed-methodology-step__number {
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  color: var(--ed-orange);
  margin-bottom: 3rem;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
.ed-methodology-step__title {
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ed-text);
  margin: 0 0 0.75rem;
}
.ed-methodology-step__body {
  font-family: var(--ed-font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ed-text-2);
  margin: 0;
}


/* ============================================
   Block: editorial_card_grid
   — N-up card grid with connecting dividers
   — Templates pass card count via inline style:
     <div class="ed-cardgrid__grid" style="--ed-card-count: 3;">
   ============================================ */
.ed-cardgrid {
  padding-top: var(--ed-section-pad-y);
  padding-bottom: var(--ed-section-pad-y);
}
.ed-cardgrid__header {
  max-width: var(--ed-container-max);
  margin: 0 auto 3rem;
  padding-left: var(--ed-section-pad-x);
  padding-right: var(--ed-section-pad-x);
}
.ed-cardgrid__title {
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: var(--ed-display-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ed-text);
  max-width: 22ch;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.ed-cardgrid__title em {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--ed-text-2);
}
.ed-cardgrid__lede {
  font-family: var(--ed-font-body);
  font-weight: 300;
  font-size: var(--ed-lede);
  line-height: 1.5;
  color: var(--ed-text-2);
  max-width: 60ch;
  margin: 1.5rem 0 0;
}
.ed-cardgrid__grid {
  max-width: var(--ed-container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--ed-divider);
}
@media (min-width: 720px) {
  .ed-cardgrid__grid {
    grid-template-columns: repeat(var(--ed-card-count, 3), 1fr);
  }
}

.ed-cardgrid-card {
  padding: 3rem 2.5rem;
  border-bottom: 1px solid var(--ed-divider);
  position: relative;
  background: transparent;
}
@media (min-width: 720px) {
  .ed-cardgrid-card {
    border-right: 1px solid var(--ed-divider);
    border-bottom: none;
  }
  .ed-cardgrid-card:last-child {
    border-right: none;
  }
}
.ed-cardgrid-card__number {
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  color: var(--ed-orange);
  margin-bottom: 2rem;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
.ed-cardgrid-card__stat {
  font-family: var(--ed-font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ed-purple);
  margin-bottom: 0.5rem;
}
.ed-cardgrid-card__title {
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ed-text);
  margin: 0 0 1.25rem;
}
.ed-cardgrid-card__body {
  font-family: var(--ed-font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ed-text-2);
  margin: 0;
}
.ed-cardgrid-card__body em {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
}


/* ============================================
   Block: comparison_ledger
   — Three-column contrast table
   — Column 3 (sentinel) gets the orange accent bar
   ============================================ */
.ed-ledger {
  background: var(--ed-warm-white);
  padding-top: var(--ed-section-pad-y);
  padding-bottom: var(--ed-section-pad-y);
  border-top: 1px solid var(--ed-divider);
}
.ed-ledger__inner {
  max-width: 62rem;
  margin: 0 auto;
  padding-left: var(--ed-section-pad-x);
  padding-right: var(--ed-section-pad-x);
}
.ed-ledger__title {
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: var(--ed-display-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ed-text);
  max-width: 22ch;
  margin: 0 0 3.5rem;
  text-wrap: balance;
}
.ed-ledger__title em {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--ed-orange);
}
.ed-ledger__table {
  border-top: 2px solid var(--ed-text);
  border-bottom: 1px solid var(--ed-divider);
}
.ed-ledger__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--ed-divider);
}
@media (min-width: 720px) {
  .ed-ledger__head {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 2rem;
  }
}
.ed-ledger__head-cell {
  font-family: var(--ed-font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.ed-ledger__head-cell--label    { color: var(--ed-text-muted); }
.ed-ledger__head-cell--baseline { color: var(--ed-text-2); }
.ed-ledger__head-cell--sentinel { color: var(--ed-purple); }
.ed-ledger__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--ed-divider);
}
.ed-ledger__row:last-child { border-bottom: none; }
@media (min-width: 720px) {
  .ed-ledger__row {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 2rem;
    align-items: baseline;
  }
}
.ed-ledger__label {
  font-family: var(--ed-font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--ed-text);
}
.ed-ledger__cell {
  font-family: var(--ed-font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ed-text-2);
  position: relative;
}
.ed-ledger__cell--accent {
  color: var(--ed-text);
  padding-left: 1.25rem;
}
.ed-ledger__cell--accent::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em; bottom: 0.45em;
  width: 2px;
  background: var(--ed-orange);
}


/* ============================================
   Block: sticky_list_grid
   — 2-column asymmetric: sticky aside + auto-numbered list
   — List numbers are CSS-counter-driven (no template input needed)
   — Aside sticky offset overridable via --ed-sticky-top
   ============================================ */
.ed-sticky {
  padding-top: var(--ed-section-pad-y);
  padding-bottom: var(--ed-section-pad-y);
  border-top: 1px solid var(--ed-divider);
}
.ed-sticky__grid {
  max-width: var(--ed-container-max);
  margin: 0 auto;
  padding-left: var(--ed-section-pad-x);
  padding-right: var(--ed-section-pad-x);
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
@media (min-width: 900px) {
  .ed-sticky__grid {
    grid-template-columns: 5fr 7fr;
    gap: 6rem;
    align-items: start;
  }
}
.ed-sticky__aside {
  position: relative;
}
@media (min-width: 900px) {
  .ed-sticky__aside {
    position: sticky;
    top: var(--ed-sticky-top, 80px);
  }
}
.ed-sticky__aside-title {
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: var(--ed-display-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ed-text);
  margin: 0 0 2rem;
  text-wrap: balance;
}
.ed-sticky__aside-title em {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--ed-orange);
}
.ed-sticky__aside-body {
  font-family: var(--ed-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ed-text-2);
  margin: 0;
}
.ed-sticky__aside-body p { margin: 0 0 1em; }
.ed-sticky__aside-body p:last-child { margin-bottom: 0; }

.ed-sticky__list {
  display: grid;
  gap: 3rem;
  counter-reset: ed-sticky-counter;
}
.ed-sticky__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ed-divider);
}
.ed-sticky__item:first-child {
  border-top: 2px solid var(--ed-orange);
}
.ed-sticky__item-number {
  counter-increment: ed-sticky-counter;
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--ed-orange);
  font-variant-numeric: tabular-nums;
  padding-top: 0.3em;
  text-transform: uppercase;
}
.ed-sticky__item-number::before {
  content: counter(ed-sticky-counter, decimal-leading-zero) " /";
}
.ed-sticky__item-title {
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ed-text);
  margin: 0 0 1rem;
}
.ed-sticky__item-body {
  font-family: var(--ed-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ed-text-2);
  margin: 0;
}
.ed-sticky__item-body em {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
}


/* ============================================================
   BATCH 3 BLOCKS
   (editorial_faq, editorial_stat_row,
    incident_scroller editorial variant, editorial_manifesto)
   ============================================================ */


/* ============================================
   Block: editorial_faq
   — Accordion using native <details>/<summary>
   — Caret rotates on open; no JS required
   — Answers constrained to prose column width
   ============================================ */
.ed-faq {
  background: transparent;
  padding-top: var(--ed-section-pad-y);
  padding-bottom: var(--ed-section-pad-y);
  border-top: 1px solid var(--ed-divider);
}
.ed-faq__header {
  max-width: var(--ed-container-max);
  margin: 0 auto 4rem;
  padding-left: var(--ed-section-pad-x);
  padding-right: var(--ed-section-pad-x);
}
.ed-faq__title {
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: var(--ed-display-3);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ed-text);
  margin: 0;
  max-width: 28ch;
  text-wrap: balance;
}
.ed-faq__title em {
  font-family: var(--ed-font-body);
  font-style: italic;
  font-weight: 400;
  color: var(--ed-purple);
}
.ed-faq__lede {
  font-family: var(--ed-font-body);
  font-weight: 400;
  font-size: var(--ed-lede);
  line-height: 1.55;
  color: var(--ed-text-2);
  margin-top: 1.5rem;
  max-width: 52ch;
}
.ed-faq__list {
  max-width: var(--ed-container-max);
  margin: 0 auto;
  padding-left: var(--ed-section-pad-x);
  padding-right: var(--ed-section-pad-x);
  border-top: 2px solid var(--ed-text);
  counter-reset: ed-faq-counter;
}
.ed-faq__item {
  border-bottom: 1px solid var(--ed-divider);
}
.ed-faq__question {
  /* <summary> element */
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem 0;
  font-family: var(--ed-font-display);
  font-weight: 600;
  font-size: clamp(1.125rem, 1vw + 0.9rem, 1.375rem);
  line-height: 1.3;
  color: var(--ed-text);
  transition: color 150ms ease;
}
.ed-faq__question::before {
  counter-increment: ed-faq-counter;
  content: counters(ed-faq-counter, "", decimal-leading-zero);
  font-family: var(--ed-font-display);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--ed-orange);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ed-faq__question::-webkit-details-marker {
  display: none;
}
.ed-faq__question::marker {
  display: none;
  content: "";
}
.ed-faq__question:hover {
  color: var(--ed-orange);
}
.ed-faq__question:focus-visible {
  outline: 2px solid var(--ed-orange);
  outline-offset: 4px;
}
.ed-faq__question-text {
  flex: 1;
  text-wrap: pretty;
}
.ed-faq__caret {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  position: relative;
  transition: transform 200ms ease;
}
.ed-faq__caret::before,
.ed-faq__caret::after {
  content: "";
  position: absolute;
  background: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ed-faq__caret::before {
  width: 1rem;
  height: 2px;
}
.ed-faq__caret::after {
  width: 2px;
  height: 1rem;
  transition: transform 200ms ease;
  transform: translate(-50%, -50%);
}
.ed-faq__item[open] .ed-faq__caret {
  transform: rotate(45deg);
  color: var(--ed-orange);
}
.ed-faq__answer {
  padding: 0 0 2rem;
  max-width: 68ch;
  font-family: var(--ed-font-body);
  font-weight: 400;
  font-size: var(--ed-body);
  line-height: 1.7;
  color: var(--ed-text-2);
}
.ed-faq__answer em {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--ed-text);
}
.ed-faq__answer p + p {
  margin-top: 1rem;
}
.ed-faq__answer a {
  color: var(--ed-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ed-faq__answer a:hover {
  color: var(--ed-orange);
}
@media (prefers-reduced-motion: reduce) {
  .ed-faq__caret,
  .ed-faq__caret::after,
  .ed-faq__question {
    transition: none;
  }
}


/* ============================================
   Block: editorial_stat_row
   — N-cell horizontal "key numbers" row
   — Templates pass cell count via inline style:
     <div class="ed-statrow__grid" style="--ed-stat-count: 3;">
   — Large Merriweather figures; Proxima Nova labels
   ============================================ */
.ed-statrow {
  background: var(--ed-ivory);
  padding-top: var(--ed-section-pad-y);
  padding-bottom: var(--ed-section-pad-y);
}
.ed-statrow__header {
  max-width: var(--ed-container-max);
  margin: 0 auto 3.5rem;
  padding-left: var(--ed-section-pad-x);
  padding-right: var(--ed-section-pad-x);
  text-align: center;
}
.ed-statrow__title {
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: var(--ed-display-3);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ed-text);
  margin: 0 auto;
  max-width: 28ch;
  text-wrap: balance;
}
.ed-statrow__title em {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--ed-orange);
}
.ed-statrow__lede {
  font-family: var(--ed-font-body);
  font-weight: 400;
  font-size: var(--ed-lede);
  line-height: 1.55;
  color: var(--ed-text-2);
  margin: 1.25rem auto 0;
  max-width: 44ch;
}
.ed-statrow__grid {
  max-width: var(--ed-container-max);
  margin: 0 auto;
  padding-left: var(--ed-section-pad-x);
  padding-right: var(--ed-section-pad-x);
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 800px) {
  .ed-statrow__grid {
    grid-template-columns: repeat(var(--ed-stat-count, 3), 1fr);
    gap: 0;
  }
}
.ed-statrow__cell {
  text-align: center;
  padding: 1rem 1.5rem;
}
@media (min-width: 800px) {
  .ed-statrow__cell {
    border-left: 1px solid var(--ed-divider);
  }
  .ed-statrow__cell:first-child {
    border-left: none;
  }
}
.ed-statrow__value {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.75rem, 5vw + 1rem, 4.75rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ed-orange);
  margin: 0;
}
.ed-statrow__value--red    { color: var(--ed-red); }
.ed-statrow__value--purple { color: var(--ed-purple); }
.ed-statrow__value--blue   { color: var(--ed-blue); }
.ed-statrow__label {
  display: block;
  margin-top: 1rem;
  font-family: var(--ed-font-display);
  font-weight: 500;
  font-size: var(--ed-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ed-text-2);
}
.ed-statrow__caption {
  margin-top: 0.5rem;
  font-family: var(--ed-font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ed-text-muted);
}


/* ============================================
   Block: incident_scroller (editorial variant)
   — Editorial skin for the existing chyron block.
   — Single template forks on value.style; this CSS styles
     only the editorial branch (.ed-incident-scroller).
   — Defaults to the mockup's full-bleed purple chyron.
   — Self-contained scroll animation (no Tailwind deps).
   ============================================ */
.ed-incident-scroller {
  background: var(--ed-purple);
  color: var(--ed-warm-white);
  padding-top: calc(var(--ed-section-pad-y) * 0.75);
  padding-bottom: calc(var(--ed-section-pad-y) * 0.9);
  overflow: hidden;
  position: relative;
  /* Escape flex_page.html's .container — chyron is full-bleed by design. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.ed-incident-scroller--dark {
  background: #0B0B12;
  color: var(--ed-warm-white);
}
.ed-incident-scroller__header {
  max-width: var(--ed-container-max);
  margin: 0 auto 2rem;
  padding-left: var(--ed-section-pad-x);
  padding-right: var(--ed-section-pad-x);
  text-align: center;
}
.ed-incident-scroller__title {
  font-family: var(--ed-font-display);
  font-weight: 600;
  font-size: clamp(1rem, 0.5vw + 0.85rem, 1.125rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(254, 250, 236, 0.85);
  margin: 0;
}
.ed-incident-scroller--dark .ed-incident-scroller__title {
  color: rgba(254, 250, 236, 0.75);
}
.ed-incident-scroller__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(3rem, 8vw, 8rem);
  z-index: 2;
  pointer-events: none;
}
.ed-incident-scroller__fade--left {
  left: 0;
  background: linear-gradient(to right, var(--ed-purple), transparent);
}
.ed-incident-scroller__fade--right {
  right: 0;
  background: linear-gradient(to left, var(--ed-purple), transparent);
}
.ed-incident-scroller--dark .ed-incident-scroller__fade--left {
  background: linear-gradient(to right, #0B0B12, transparent);
}
.ed-incident-scroller--dark .ed-incident-scroller__fade--right {
  background: linear-gradient(to left, #0B0B12, transparent);
}
.ed-incident-scroller__track {
  display: flex;
  gap: 0;
  animation: ed-incident-scroll var(--ed-scroll-duration, 60s) linear infinite;
  will-change: transform;
}
.ed-incident-scroller__track--paused {
  animation-play-state: paused;
}
@keyframes ed-incident-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ed-incident-scroller__track {
    animation: none;
  }
}
.ed-incident-scroller__item {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 2.25rem;
  border-right: 1px solid rgba(254, 250, 236, 0.14);
  font-family: var(--ed-font-display);
  font-size: 1rem;
  line-height: 1.4;
  white-space: nowrap;
}
.ed-incident-scroller--dark .ed-incident-scroller__item {
  border-right-color: rgba(254, 250, 236, 0.12);
}
.ed-incident-scroller__date {
  font-weight: 500;
  font-size: var(--ed-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(254, 250, 236, 0.6);
}
.ed-incident-scroller--dark .ed-incident-scroller__date {
  color: rgba(254, 250, 236, 0.55);
}
.ed-incident-scroller__company {
  font-weight: 600;
  color: var(--ed-warm-white);
}
.ed-incident-scroller--dark .ed-incident-scroller__company {
  color: var(--ed-warm-white);
}
.ed-incident-scroller__cost {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--ed-orange);
}


/* ============================================
   Block: editorial_manifesto
   — Brand-purple callout with polychromatic typographic accents
   — Phrase-level color via inline <span class="ed-accent-*">
   — Bg: var(--ed-purple) (#3D369F — mirrors mockup .section--continuous)
   ============================================ */
.ed-manifesto {
  background: var(--ed-purple);
  color: var(--ed-warm-white);
  padding-top: var(--ed-section-pad-y);
  padding-bottom: var(--ed-section-pad-y);
}
.ed-manifesto__inner {
  max-width: var(--ed-container-narrow);
  margin: 0 auto;
  padding-left: var(--ed-section-pad-x);
  padding-right: var(--ed-section-pad-x);
}
.ed-manifesto .ed-eyebrow {
  --ed-eyebrow-color: var(--ed-orange);
  margin-bottom: 2rem;
}
.ed-manifesto__headline {
  font-family: var(--ed-font-display);
  font-weight: 900;
  font-size: var(--ed-display-2);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ed-warm-white);
  margin: 0 0 2.75rem;
  text-wrap: balance;
}
/* RichTextBlock wraps content in <p>; bare `p { color: ... }` in style.css
   (specificity 0,0,1 direct-match) otherwise beats the parent color above
   via inheritance. Bump to (0,1,1) by targeting <p> children explicitly. */
.ed-manifesto__headline p {
  color: var(--ed-warm-white);
  margin: 0;
}
.ed-manifesto__headline em {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
}
.ed-manifesto__body {
  font-family: var(--ed-font-accent);
  font-weight: 400;
  font-size: clamp(1.125rem, 0.75vw + 1rem, 1.375rem);
  line-height: 1.6;
  color: rgba(254, 250, 236, 0.88);
}
.ed-manifesto__body p {
  color: rgba(254, 250, 236, 0.88);
  margin: 0 0 1.5rem;
}
.ed-manifesto__body p:last-child {
  margin-bottom: 0;
}
.ed-manifesto__body strong {
  font-weight: 700;
  color: var(--ed-warm-white);
}
.ed-manifesto__subhead {
  display: block;
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 2.25rem 0 0.5rem;
}
.ed-manifesto__rule {
  border: none;
  border-top: 1px solid rgba(254, 250, 236, 0.18);
  margin: 3rem 0;
}
.ed-manifesto__closer {
  font-family: var(--ed-font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  line-height: 1.4;
  color: var(--ed-orange);
  margin: 2rem 0 0;
  text-wrap: balance;
}

/* Phrase-level color accents for inline <span> use in
   RichTextBlock content. Editors apply these via
   <span class="ed-accent-purple">…</span>, etc.
   Defaults are tuned for dark/ink backgrounds. */
.ed-accent-purple { color: var(--ed-purple-soft); }
.ed-accent-blue   { color: var(--ed-blue); }
.ed-accent-orange { color: var(--ed-orange); }
.ed-accent-red    { color: var(--ed-red); }

/* Same accents usable on light backgrounds (e.g. inside
   editorial_faq answers or stat_row captions). Default
   above works on dark; these overrides strengthen on light. */
.ed-faq .ed-accent-purple,
.ed-statrow .ed-accent-purple,
.ed-cta .ed-accent-purple     { color: var(--ed-purple); }

/* Manifesto sits on a brand-purple bg, so ed-accent-purple
   cannot resolve to a purple shade (would disappear).
   Map it to warm-white bold so the purple-tagged sub-head
   and inline accents still read as emphasis. */
.ed-manifesto .ed-accent-purple {
  color: var(--ed-warm-white);
  font-weight: 700;
}


/* ============================================
   Block: sentinel contact form (/sentinel/contact/)
   — GeneralFormPage rendered with editorial styling
     when parent == Sentinel (pk=56).
   — Fields built by Wagtail FormBuilder; template
     wraps them in .ed-contact__* classes.
   ============================================ */
.ed-contact {
  background: var(--ed-warm-white);
  padding-top: var(--ed-section-pad-y);
  padding-bottom: var(--ed-section-pad-y);
  color: var(--ed-text);
}
.ed-contact__inner {
  max-width: 48rem;
}
.ed-contact__header {
  margin-bottom: 3rem;
}
.ed-contact__title {
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: var(--ed-display-3);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ed-text);
  margin: 0.5rem 0 0;
  max-width: 24ch;
  text-wrap: balance;
}
.ed-contact__intro {
  font-family: var(--ed-font-body);
  font-size: var(--ed-lede);
  line-height: 1.55;
  color: var(--ed-text-2);
  margin-top: 1.5rem;
  max-width: 52ch;
}

/* Honeypot — kept off-screen, aria-hidden, tabindex=-1 in template.
   Absolute positioning prevents layout impact; 1x1 px + hidden overflow
   keeps it invisible; bots parsing the DOM still see a normal
   <input type="text"> and fill it. */
.ed-contact__hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.ed-contact__form {
  display: grid;
  gap: 2rem;
}
.ed-contact__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ed-contact__field--multiline .ed-contact__input {
  min-height: 6rem;
}
.ed-contact__label,
.ed-contact__field--group legend {
  font-family: var(--ed-font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ed-text);
  margin: 0;
  padding: 0;
}
.ed-contact__req {
  color: var(--ed-orange);
  margin-left: 0.25rem;
}
.ed-contact__input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ed-divider);
  padding: 0.6rem 0;
  font-family: var(--ed-font-body);
  font-size: 1rem;
  color: var(--ed-text);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ed-contact__input:focus {
  outline: 0;
  border-bottom-color: var(--ed-orange);
  box-shadow: 0 2px 0 0 var(--ed-orange);
}
.ed-contact__input--textarea {
  border: 1px solid var(--ed-divider);
  padding: 0.75rem 0.9rem;
  resize: vertical;
  line-height: 1.5;
}
.ed-contact__input--textarea:focus {
  border-color: var(--ed-orange);
  box-shadow: 0 0 0 1px var(--ed-orange);
}
.ed-contact__input--error {
  border-color: var(--ed-red, #C62828);
}
.ed-contact__help {
  font-family: var(--ed-font-body);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ed-text-muted);
  margin: 0;
}
.ed-contact__error {
  font-family: var(--ed-font-body);
  font-size: 0.875rem;
  color: var(--ed-red, #C62828);
  margin: 0;
}

.ed-contact__field--group {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ed-contact__choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 1.5rem;
  margin-top: 0.25rem;
}
@media (min-width: 600px) {
  .ed-contact__choices {
    grid-template-columns: 1fr 1fr;
  }
}
.ed-contact__choices ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: contents;
}
.ed-contact__choices li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--ed-font-body);
  font-size: 1rem;
  color: var(--ed-text);
}
.ed-contact__choices input[type="checkbox"],
.ed-contact__choices input[type="radio"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--ed-orange);
  flex-shrink: 0;
}

.ed-contact__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ed-divider);
}
.ed-contact__required-note {
  font-family: var(--ed-font-body);
  font-size: 0.8125rem;
  color: var(--ed-text-muted);
  margin: 0;
}
.ed-contact__required-note span {
  color: var(--ed-orange);
}

/* Submit button — orange fill to match the hero primary CTA
   (scoped under .ed-contact__submit rather than .ed-btn--primary
   so the global .ed-btn--primary stays purple). */
.ed-contact__submit.ed-btn {
  background: var(--ed-orange);
  border-color: var(--ed-orange);
  color: var(--ed-warm-white);
}
.ed-contact__submit.ed-btn:hover {
  background: var(--ed-orange-soft);
  border-color: var(--ed-orange-soft);
}

/* Landing page (post-submission) */
.ed-contact--landing .ed-contact__thankyou {
  font-family: var(--ed-font-body);
  font-size: var(--ed-lede);
  line-height: 1.6;
  color: var(--ed-text-2);
  max-width: 52ch;
}
.ed-contact__back {
  margin-top: 2.5rem;
}
.ed-contact__back .ed-link {
  font-family: var(--ed-font-display);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--ed-orange);
  text-decoration: none;
}
.ed-contact__back .ed-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}