/* ========================================
   Clear Business Funding — Editorial Layer
   ----------------------------------------
   Loaded after pages.css. All classes use the `ed-` prefix
   to stay outside the existing BEM namespace; cascade-safe.
   Phase 1 establishes the vocabulary used by Phases 3–7.
   ======================================== */

/* ----------------------------------------------------------
   Editorial typography defaults
   ---------------------------------------------------------- */
.ed-prose {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-charcoal);
  max-width: 60em;          /* body line-length cap - balanced for readability */
}

.ed-prose p + p {
  margin-top: 1.1em;
}

.ed-prose a {
  color: var(--ink-charcoal);
  border-bottom: 1px solid var(--ink-hairline);
  transition: border-color 200ms ease;
}

.ed-prose a:hover {
  color: var(--ink-charcoal);
  border-bottom-color: var(--ink-oxblood);
}

/* ----------------------------------------------------------
   Section heads — eyebrow + Fraunces H2 + italic word
   ---------------------------------------------------------- */
.ed-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-graphite);
  margin-bottom: 16px;
}

.ed-section-head {
  margin-bottom: 48px;
  text-align: center;
}

/* Description paragraph (if present) inside a section head:
   constrain its line length and keep it centered under the H2. */
.ed-section-head > p:not(.ed-eyebrow) {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.ed-h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink-charcoal);
  margin: 0;
}

/* When an H2 sits inside a centered section head, ensure any future
   max-width constraint still keeps it horizontally centered. */
.ed-section-head .ed-h2 {
  margin-left: auto;
  margin-right: auto;
}

.ed-h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-oxblood);
}

/* ----------------------------------------------------------
   Drop cap — first-letter on a paragraph (Phase 3 + 6)
   ---------------------------------------------------------- */
.ed-dropcap::first-letter {
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: normal;
  font-size: 5.2em;
  line-height: 0.85;
  color: var(--ink-ochre);
  float: left;
  padding: 0.05em 0.12em 0 0;
  margin-top: 0.05em;
}

/* ----------------------------------------------------------
   Pull-quote — aside block with oxblood left rule
   ---------------------------------------------------------- */
.ed-pullquote {
  max-width: none;
  margin: 64px 0;
  padding: 8px 0 8px 32px;
  border-left: 2px solid var(--ink-oxblood);
}

.ed-pullquote p {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.25;
  color: var(--ink-charcoal);
  margin: 0;
}

.ed-pullquote .ed-pullquote__cite,
.ed-pullquote cite {
  display: block;
  margin-top: 16px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-graphite);
}

/* ----------------------------------------------------------
   Stat callouts — numerals only quote existing facts
   ---------------------------------------------------------- */
.ed-stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.ed-stat__num {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(64px, 8vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink-ochre);
}

.ed-stat__pre {
  color: var(--ink-charcoal);
  font-size: 0.45em;
  vertical-align: middle;
  margin-right: 0.15em;
}

.ed-stat__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-charcoal);
}

.ed-stat__caption {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-graphite);
  max-width: 24em;
}

/* ----------------------------------------------------------
   12-column grid — collapses to single col at <=768px
   ---------------------------------------------------------- */
.ed-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 32px;
  row-gap: 48px;
}

.ed-col-4  { grid-column: span 4; }
.ed-col-5  { grid-column: span 5; }
.ed-col-6  { grid-column: span 6; }
.ed-col-7  { grid-column: span 7; }
.ed-col-8  { grid-column: span 8; }
.ed-col-9  { grid-column: span 9; }
.ed-col-10 { grid-column: span 10; }
.ed-col-11 { grid-column: span 11; }
.ed-col-12 { grid-column: span 12; }

.ed-col-offset-1 { grid-column-start: 2; }
.ed-col-offset-2 { grid-column-start: 3; }

@media (max-width: 768px) {
  .ed-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 32px;
  }
  .ed-col-4,
  .ed-col-5,
  .ed-col-6,
  .ed-col-7,
  .ed-col-8,
  .ed-col-9,
  .ed-col-10,
  .ed-col-11,
  .ed-col-12 {
    grid-column: 1 / -1;
  }
  .ed-col-offset-1,
  .ed-col-offset-2 {
    grid-column-start: 1;
  }
}

/* ----------------------------------------------------------
   Manifesto — full-width italic statement above footer
   ---------------------------------------------------------- */
.ed-manifesto {
  padding: 96px 24px;
  text-align: left;
  border-top: 1px solid var(--ink-hairline);
  border-bottom: 1px solid var(--ink-hairline);
}

.ed-manifesto p {
  max-width: none;
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.3;
  color: var(--ink-charcoal);
}

.ed-manifesto p em {
  color: var(--ink-oxblood);
}

/* ----------------------------------------------------------
   Caption — image caption + author credit line
   ---------------------------------------------------------- */
.ed-caption {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-graphite);
  line-height: 1.5;
}

.ed-caption span {
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  /* Use graphite directly without opacity — opacity 0.75 blended over cream
     produced ~3.6:1 contrast (failed WCAG AA for body text). Full graphite
     reads 7.6:1 on cream and preserves the subtle credit-line cadence
     through font weight and letter-spacing instead. */
  color: var(--ink-graphite);
}

/* ----------------------------------------------------------
   Hairline rules
   ---------------------------------------------------------- */
.ed-rule {
  display: block;
  width: 96px;
  height: 1px;
  background: var(--ink-hairline);
  border: none;
  margin: 48px 0;
}

.ed-rule--full {
  width: 100%;
}

/* ----------------------------------------------------------
   Body link affordance — global ed-* link convention
   ---------------------------------------------------------- */
.ed-link {
  color: var(--ink-charcoal);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-hairline);
  transition: border-color 200ms ease;
}

.ed-link:hover {
  color: var(--ink-charcoal);
  border-bottom-color: var(--ink-oxblood);
}

.ed-link-display {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-charcoal);
  text-decoration: none;
}

.ed-link-display::after {
  content: "→";
  display: inline-block;
  transition: transform 250ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  .ed-link-display:hover::after {
    transform: translateX(4px);
  }
}

/* ----------------------------------------------------------
   Editorial buttons — 1px charcoal inner border that flashes
   oxblood on hover. Wraps motion in reduced-motion gate.
   ---------------------------------------------------------- */
.ed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: transparent;
  color: var(--ink-charcoal);
  border: 1px solid var(--ink-charcoal);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.ed-btn:hover {
  border-color: var(--ink-oxblood);
  color: var(--ink-oxblood);
}

.ed-btn--filled {
  background: var(--ink-oxblood);
  border-color: var(--ink-oxblood);
  color: var(--ink-cream);
}

.ed-btn--filled:hover {
  background: var(--ink-charcoal);
  border-color: var(--ink-charcoal);
  color: var(--ink-cream);
}

/* ----------------------------------------------------------
   Quiz skeleton (Phase 5)
   ---------------------------------------------------------- */
.ed-quiz-section {
  padding: 96px 0 80px;
  background: var(--ink-cream);
}

.ed-quiz {
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

.ed-quiz__progress {
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
  list-style: none;
  padding: 0;
}

.ed-quiz__progress > li {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ed-quiz__dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--ink-hairline);
  background: transparent;
  transition: background 250ms ease, border-color 250ms ease, transform 250ms ease;
}

.ed-quiz__progress > li[data-state="active"] .ed-quiz__dot {
  background: var(--ink-oxblood);
  border-color: var(--ink-oxblood);
  transform: scale(1.15);
}

.ed-quiz__progress > li[data-state="done"] .ed-quiz__dot {
  background: var(--ink-charcoal);
  border-color: var(--ink-charcoal);
}

.ed-quiz__step {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ed-quiz__step[hidden] {
  display: none;
}

.ed-quiz__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-graphite);
  margin: 0;
}

.ed-quiz__question {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink-charcoal);
  margin: 0;
}

.ed-quiz__question em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-oxblood);
}

.ed-quiz__options {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ed-quiz__option {
  display: block;
  position: relative;
  cursor: pointer;
}

.ed-quiz__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ed-quiz__option-label {
  display: block;
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  background: transparent;
  border: 1px solid var(--ink-hairline);
  color: var(--ink-charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 200ms ease, background 200ms ease;
}

.ed-quiz__option:hover .ed-quiz__option-label {
  border-color: var(--ink-charcoal);
}

.ed-quiz__option input:checked + .ed-quiz__option-label {
  border-color: var(--ink-oxblood);
  background: rgba(122, 46, 46, 0.04);
}

.ed-quiz__option input:focus-visible + .ed-quiz__option-label {
  outline: 2px solid var(--ink-oxblood);
  outline-offset: 2px;
}

.ed-quiz__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  gap: 16px;
}

.ed-quiz__back {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-charcoal);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-hairline);
  padding: 4px 0;
  cursor: pointer;
  transition: border-color 200ms ease;
}

.ed-quiz__back:hover {
  border-bottom-color: var(--ink-oxblood);
}

.ed-quiz__back[hidden] {
  display: none;
}

.ed-quiz__next {
  margin-left: auto;
}

.ed-quiz__next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ed-quiz__result {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 0;
}

.ed-quiz__result[hidden] {
  display: none;
}

.ed-quiz__result-headline {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink-charcoal);
  margin: 0;
}

.ed-quiz__result-headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-oxblood);
}

.ed-quiz__result-body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-charcoal);
  margin: 0;
  max-width: none;
}

.ed-quiz__result-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-hairline);
}

.ed-quiz__result-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-graphite);
  margin: 0;
}

.ed-quiz__products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ed-quiz__products a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.01em;
  color: var(--ink-charcoal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.ed-quiz__products a::after {
  content: "→";
  display: inline-block;
  transition: transform 250ms ease;
  color: var(--ink-oxblood);
}

@media (prefers-reduced-motion: no-preference) {
  .ed-quiz__products a:hover::after {
    transform: translateX(4px);
  }
}

.ed-quiz__products a:hover {
  border-bottom-color: var(--ink-oxblood);
}

.ed-quiz__cta {
  align-self: flex-start;
  margin-top: 8px;
}

.ed-quiz__disclaimer {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-graphite);
  line-height: 1.6;
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ink-hairline);
}

@media (max-width: 600px) {
  .ed-quiz-section {
    padding: 64px 0 48px;
  }
  .ed-quiz__nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .ed-quiz__next {
    margin-left: 0;
  }
  .ed-quiz__back {
    align-self: flex-start;
  }
  .ed-quiz__cta {
    align-self: stretch;
    text-align: center;
  }
}

/* ----------------------------------------------------------
   Comparison matrix (Phase 5) — editorial table
   ---------------------------------------------------------- */
.ed-matrix-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ed-matrix {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--ink-cream);
  font-family: var(--font-body);
  text-align: left;
}

.ed-matrix caption {
  text-align: left;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-graphite);
  padding-bottom: 16px;
  caption-side: bottom;
  line-height: 1.5;
}

.ed-matrix thead th {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-charcoal);
  padding: 24px 24px;
  border-bottom: 1px solid var(--ink-charcoal);
  border-right: 1px solid var(--ink-hairline);
  vertical-align: bottom;
  background: var(--ink-cream);
}

.ed-matrix thead th em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-oxblood);
}

.ed-matrix thead th:last-child {
  border-right: none;
}

.ed-matrix thead th:first-child {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-graphite);
}

.ed-matrix tbody th {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-charcoal);
  padding: 24px 24px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ink-hairline);
  border-right: 1px solid var(--ink-hairline);
  background: var(--ink-cream);
}

.ed-matrix tbody td {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-charcoal);
  padding: 24px 24px;
  vertical-align: top;
  border-bottom: 1px solid var(--ink-hairline);
  border-right: 1px solid var(--ink-hairline);
}

.ed-matrix tbody td:last-child,
.ed-matrix tbody th:last-child {
  border-right: none;
}

.ed-matrix tbody tr:last-child td,
.ed-matrix tbody tr:last-child th {
  border-bottom: none;
}

.ed-matrix .ed-matrix__num {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-charcoal);
}

.ed-matrix tr.ed-matrix__row--featured th,
.ed-matrix tr.ed-matrix__row--featured td {
  color: var(--ink-oxblood);
}

.ed-matrix tr.ed-matrix__row--featured td .ed-matrix__num {
  color: var(--ink-oxblood);
}

/* Sticky first column at <=900px viewport */
@media (max-width: 900px) {
  .ed-matrix thead th:first-child,
  .ed-matrix tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--ink-cream);
    box-shadow: 1px 0 0 var(--ink-hairline);
  }
}

@media (max-width: 600px) {
  .ed-matrix thead th,
  .ed-matrix tbody th,
  .ed-matrix tbody td {
    padding: 18px 16px;
  }
  .ed-matrix thead th {
    font-size: 17px;
  }
}

/* Compare page — figure container */
.ed-compare-figure {
  margin: 0 0 64px;
}

/* Compare page — 3-up product columns
   Matches the .services-grid 3-up cadence on the homepage:
   1400px max-width cap, 32px gap, equal 1fr columns, hairline divider rules. */
.ed-compare-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 48px;
  max-width: none;
  margin: 0 auto;
}

.ed-compare-products__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 32px 32px 0;
  border-right: 1px solid var(--ink-hairline);
}

.ed-compare-products__col:last-child {
  border-right: none;
  padding-right: 0;
}

.ed-compare-products__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink-charcoal);
  margin: 0 0 16px;
}

.ed-compare-products__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-graphite);
  margin: 0 0 28px;
  max-width: none;
  flex: 1 1 auto;
}

.ed-compare-products__link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-oxblood);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 200ms ease;
}

.ed-compare-products__link span {
  display: inline-block;
  transition: transform 250ms ease;
}

.ed-compare-products__link:hover {
  border-bottom-color: var(--ink-oxblood);
}

@media (prefers-reduced-motion: no-preference) {
  .ed-compare-products__link:hover span {
    transform: translateX(4px);
  }
}

@media (max-width: 1024px) {
  .ed-compare-products {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }
  .ed-compare-products__col:nth-child(2) {
    border-right: none;
    padding-right: 0;
  }
  .ed-compare-products__col:last-child {
    grid-column: 1 / -1;
    border-top: 1px solid var(--ink-hairline);
    padding-top: 32px;
  }
}

@media (max-width: 768px) {
  .ed-compare-products {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 0;
  }
  .ed-compare-products__col,
  .ed-compare-products__col:nth-child(2) {
    border-right: none;
    border-top: 1px solid var(--ink-hairline);
    padding: 32px 0;
  }
  .ed-compare-products__col:first-child {
    border-top: none;
    padding-top: 0;
  }
  .ed-compare-products__col:last-child {
    grid-column: auto;
    padding-bottom: 0;
  }
}

/* ----------------------------------------------------------
   Glossary skeleton (Phase 6)
   ---------------------------------------------------------- */
.ed-term {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink-charcoal);
  margin-top: 32px;
}

.ed-definition {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-charcoal);
  margin: 8px 0 0 0;
  max-width: none;
}

.ed-cross-ref {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-graphite);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-hairline);
  transition: border-color 200ms ease, color 200ms ease;
}

.ed-cross-ref:hover {
  color: var(--ink-oxblood);
  border-bottom-color: var(--ink-oxblood);
}

/* Wrapper for entries with multiple cross-refs (e.g., Soft Credit Pull).
   Replaces the prior <br>-separated-then-adjacent pattern with proper
   inline spacing — entries flow naturally and wrap on narrow widths. */
.ed-cross-ref-list {
  display: block;
  margin-top: 8px;
}
.ed-cross-ref-list .ed-cross-ref {
  margin-top: 0;
  margin-right: 24px;
}
.ed-cross-ref-list .ed-cross-ref:last-child {
  margin-right: 0;
}

/* ----------------------------------------------------------
   Editorial figure / image treatment (Phase 3 + 7)
   ---------------------------------------------------------- */
.ed-figure {
  margin: 0;
  background: var(--ink-cream);
}

.ed-figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(0.4) contrast(1.05) brightness(0.98);
  mix-blend-mode: multiply;
}

/* ----------------------------------------------------------
   Phase 2 — Header / wordmark / hairline nav
   ----------------------------------------------------------
   Overrides the dark BEM nav with an editorial cream-on-charcoal
   hairline treatment. JS bindings are preserved by class name
   (.nav__menu, .nav__mobile-toggle, .nav__cta, .nav--scrolled).
   ---------------------------------------------------------- */
.nav {
  background: var(--ink-cream);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--ink-hairline);
  box-shadow: none;
}

.nav--scrolled {
  background: var(--ink-cream);
  box-shadow: 0 1px 0 var(--ink-hairline);
}

/* Text wordmark — replaces .nav__logo visual treatment.
   Markup: <a class="nav__logo ed-wordmark"><span>Clear Business </span><em>Funding</em></a> */
.ed-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink-charcoal);
  text-decoration: none;
}

.ed-wordmark:hover {
  color: var(--ink-charcoal);
}

.ed-wordmark span {
  font-style: normal;
  font-weight: 500;
  color: var(--ink-charcoal);
}

.ed-wordmark em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-charcoal);
  text-decoration: underline;
  text-decoration-color: var(--ink-oxblood);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

@media (max-width: 480px) {
  .ed-wordmark {
    font-size: 16px;
  }
}

/* Editorial nav links — charcoal text, hairline underline that
   swaps to oxblood on hover and active. Overrides cream/dark BEM. */
.nav__link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-charcoal);
}

.nav__link::after {
  bottom: 2px;
  height: 1px;
  background: var(--ink-oxblood);
}

.nav__link:hover {
  color: var(--ink-charcoal);
}

.nav__link--active {
  color: var(--ink-charcoal);
}

.nav__link--active::after {
  width: 100%;
}

/* Phone link — match nav-link rhythm, charcoal stroke icon */
.nav__phone {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-charcoal);
}

.nav__phone:hover {
  color: var(--ink-oxblood);
}

.nav__phone svg {
  color: var(--ink-charcoal);
}

/* Mobile toggle — charcoal in editorial palette */
.nav__mobile-toggle {
  color: var(--ink-charcoal);
}

/* Mobile menu drawer — keep cream, not dark */
@media (max-width: 1024px) {
  .nav__menu {
    background: var(--ink-cream);
    border-top: 1px solid var(--ink-hairline);
  }

  .nav__link {
    font-size: 18px;
  }

  /* Mobile dropdown items: render as a clean indented sub-list under
     the parent label. Without this, the About + Loans dropdowns can
     stack visually flat against the parent label and read awkwardly. */
  .nav__dropdown-menu {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-top: 8px;
    margin-bottom: 8px;
    border-left: 1px solid var(--ink-hairline);
    margin-left: 14px;
  }

  .nav__dropdown-item {
    padding: 10px 18px;
  }

  .nav__dropdown-item strong {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink-charcoal);
  }

  /* The dropdown trigger arrow rotates indicating it's expanded
     — purely visual polish, since the menu is always open in mobile. */
  .nav__dropdown > .nav__link svg {
    transform: rotate(0);
    opacity: 0.55;
  }
}

/* Dropdown panel — already cream-on-cream from token aliases.
   Just refine the border to use the hairline token explicitly. */
.nav__dropdown-menu {
  background: var(--ink-cream);
  border: 1px solid var(--ink-hairline);
  box-shadow: 0 8px 24px rgba(27, 26, 23, 0.06);
}

/* ----------------------------------------------------------
   Phase 2 — Footer manifesto sits above the existing 3-col grid.
   Footer grid markup is preserved as-is.
   ---------------------------------------------------------- */
.footer .ed-manifesto {
  border-top: none;
  border-bottom: 1px solid var(--ink-hairline);
  padding-left: 0;
  padding-right: 0;
}

/* ----------------------------------------------------------
   Phase 3 — Homepage editorial composition
   ---------------------------------------------------------- */

/* Eyebrow accent variant (oxblood) for the hero */
.ed-eyebrow--accent {
  color: var(--ink-oxblood);
  font-weight: 600;
}

/* Hero — single centered column composition. */
.ed-hero {
  padding: 140px 0 96px;
  background: var(--ink-cream);
  position: relative;
}

.ed-hero__grid {
  align-items: center;
  row-gap: 56px;
}

.ed-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: none;
}

/* Centered hero stack — eyebrow + H1 + subhead anchored at the top,
   loan-selector below as a deliberate framed card. Content is
   horizontally centered within the column. */
.ed-hero--centered .ed-hero__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 24px;
  max-width: none;
  margin: 0 auto;
}

.ed-hero--centered .ed-hero__stack .loan-selector {
  margin-top: 24px;
}

.ed-hero__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink-charcoal);
  margin: 0;
}

.ed-hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-oxblood);
}

.ed-hero__lede {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-graphite);
  max-width: none;
  margin: 0;
}

.ed-hero__cta {
  align-self: flex-start;
}

.ed-hero__selector .loan-selector,
.ed-hero--centered .loan-selector {
  margin-left: auto;
  margin-right: auto;
  max-width: 760px;
  width: 100%;
  border: 1px solid var(--ink-hairline);
  box-shadow:
    0 1px 0 rgba(27, 26, 23, 0.04),
    0 8px 24px rgba(27, 26, 23, 0.06);
}

@media (max-width: 768px) {
  .ed-hero {
    padding: 112px 0 64px;
  }
  .ed-hero--centered .ed-hero__stack {
    gap: 20px;
  }
  .ed-hero__cta {
    align-self: stretch;
    text-align: center;
  }
}

/* Editorial figure — full-bleed cream surround, caption inside container */
.ed-figure--full {
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--ink-cream);
}

.ed-figure--full img {
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: cover;
}

.ed-figure--full .ed-caption {
  margin-top: 12px;
  padding-bottom: 8px;
}

/* Drop-cap intro section — narrow, generous spacing */
.ed-intro {
  padding: 80px 0 64px;
}

.ed-intro__prose {
  max-width: none;
}

.ed-intro__prose p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-charcoal);
  margin: 0;
}

/* Why Clear Business Funding — symmetric 4-up editorial grid */
.ed-why__grid {
  list-style: none;
  margin: 0;
  padding: 48px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(32px, 3vw, 56px);
  row-gap: 48px;
  border-top: 1px solid var(--ink-hairline);
  align-items: start;
}

.ed-why__row {
  margin: 0;
  padding: 0;
}

.ed-why__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-charcoal);
  margin: 0 0 12px;
}

.ed-why__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-graphite);
  margin: 0;
}

@media (max-width: 1024px) {
  .ed-why__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
}

@media (max-width: 600px) {
  .ed-why__grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
    padding-top: 32px;
  }
}

/* Pull-quote band — centered, full-width container */
.ed-pullquote-band {
  padding: 32px 0 64px;
}

.ed-pullquote--center {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Stat callouts band */
.ed-stats {
  padding: 64px 0 96px;
  border-top: 1px solid var(--ink-hairline);
}

.ed-stats__grid {
  row-gap: 64px;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.ed-stat__num {
  /* Tighten on the homepage band so three numerals breathe in 4/4/4 */
  font-size: clamp(28px, 4vw, 56px);
}

/* Inverted section-head — for cream-on-deep loan card section */
.ed-section-head--inverted .ed-eyebrow {
  color: rgba(244, 239, 230, 0.65);
}

.ed-section-head--inverted .ed-h2 {
  color: var(--ink-cream);
}

.ed-section-head--inverted .ed-h2 em {
  color: var(--ink-ochre);
}

/* Loan section — cream editorial section with stats lead-in */
.ed-loans {
  border-top: 1px solid var(--ink-hairline);
}

/* Stats inside .ed-loans render as a lead-in band — ochre numerals on cream,
   charcoal labels, graphite captions, hairline divider into the section head.
   Override .ed-grid's clamp column-gap so the 3 stats align column-for-column
   with the .services-grid cards below (both 3-up at 32px gap, 1400px cap). */
.ed-loans .ed-stats__grid {
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 48px;
  max-width: none;
  margin: 0 auto 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--ink-hairline);
}

.ed-loans .ed-stats__grid .ed-col-4 {
  grid-column: auto;
}

/* Stats moved inside .ed-loans as a lead-in band on dark.
   Keeps Fraunces ochre numerals; flips label/caption for legibility on deep. */
.ed-stats__grid--inverted {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 32px;
  row-gap: 48px;
  max-width: none;
  margin: 0 auto 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(244, 239, 230, 0.12);
}

.ed-stat--inverted .ed-stat__label {
  color: rgba(244, 239, 230, 0.7);
}

.ed-stat--inverted .ed-stat__caption {
  color: rgba(244, 239, 230, 0.6);
}

@media (max-width: 768px) {
  .ed-loans .ed-stats__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 32px;
    margin-bottom: 48px;
    padding-bottom: 40px;
  }
  .ed-stats__grid--inverted {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 32px;
    margin-bottom: 48px;
    padding-bottom: 40px;
  }
}

/* Process section — uses .section vertical rhythm; no overrides needed. */

/* Trust strip — hairline cells, no card backgrounds.
   Uses .section vertical rhythm for uniform cadence with neighbors. */
.ed-trust-strip {
  padding-top: 32px;
}

.ed-trust {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: none;
  border-top: 1px solid var(--ink-hairline);
  border-bottom: 1px solid var(--ink-hairline);
}

.ed-trust__cell {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 32px 24px;
  background: transparent;
  border-right: 1px solid var(--ink-hairline);
}

.ed-trust__cell:last-child {
  border-right: none;
}

.ed-trust__icon {
  flex-shrink: 0;
  color: var(--ink-charcoal);
  margin-top: 2px;
}

.ed-trust__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.ed-trust__copy strong {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-charcoal);
  text-transform: none;
}

.ed-trust__copy span {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-graphite);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .ed-trust {
    grid-template-columns: 1fr;
  }
  .ed-trust__cell {
    border-right: none;
    border-bottom: 1px solid var(--ink-hairline);
  }
  .ed-trust__cell:last-child {
    border-bottom: none;
  }
}

/* Final CTA — italic word title polish */
.ed-cta__title {
  margin-bottom: 12px;
}

/* ==========================================================
   Phase 4 — Loan product page components
   Three pages share the editorial vocabulary; differentiation
   comes from grid composition + photo theme + the dominant
   editorial component (rate-card vs. drop-cap vs. numbered list).
   ========================================================== */

/* ----------------------------------------------------------
   Page-level hero containers (shared)
   ---------------------------------------------------------- */
.ed-product-hero {
  padding: 120px 0 64px;
  background: var(--ink-cream);
  position: relative;
}

.ed-product-hero__grid {
  align-items: center;
  row-gap: 56px;
}

.ed-product-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: none !important;
}

.ed-product-hero__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink-charcoal);
  margin: 0;
}

.ed-product-hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-oxblood);
}

.ed-product-hero__lede {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-graphite);
  max-width: none;
  margin: 0;
}

.ed-product-hero__cta {
  align-self: flex-start;
}

@media (max-width: 768px) {
  .ed-product-hero {
    padding: 96px 0 64px;
  }
  .ed-product-hero__cta {
    align-self: stretch;
    text-align: center;
  }
}

/* ----------------------------------------------------------
   Term Loan — "The Reservoir" hero stat (used on LOC page)
   Shared section heading
   ---------------------------------------------------------- */
.ed-product-section {
  padding: 96px 0;
}

.ed-product-section--narrow {
  padding: 64px 0;
}

/* ----------------------------------------------------------
   Term Loan — horizontal benefit timeline
   ---------------------------------------------------------- */
.ed-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--ink-hairline);
  border-bottom: 1px solid var(--ink-hairline);
}

.ed-timeline__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 24px 32px 0;
  border-right: 1px solid var(--ink-hairline);
  position: relative;
}

.ed-timeline__item:last-child {
  border-right: none;
  padding-right: 0;
}

.ed-timeline__item:nth-child(n+2) {
  padding-left: 24px;
}

.ed-timeline__icon {
  color: var(--ink-charcoal);
  width: 24px;
  height: 24px;
}

.ed-timeline__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink-charcoal);
  margin: 0;
}

.ed-timeline__body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-graphite);
  margin: 0;
}

@media (max-width: 1024px) {
  .ed-timeline {
    grid-template-columns: repeat(3, 1fr);
  }
  .ed-timeline__item:nth-child(3n) {
    border-right: none;
  }
  .ed-timeline__item:nth-child(n+4) {
    border-top: 1px solid var(--ink-hairline);
  }
}

@media (max-width: 600px) {
  .ed-timeline {
    grid-template-columns: 1fr;
  }
  .ed-timeline__item {
    border-right: none;
    border-bottom: 1px solid var(--ink-hairline);
    padding: 24px 0;
  }
  .ed-timeline__item:nth-child(n+2) {
    padding-left: 0;
  }
  .ed-timeline__item:nth-child(n+4) {
    border-top: none;
  }
  .ed-timeline__item:last-child {
    border-bottom: none;
  }
}

/* ----------------------------------------------------------
   Rate-card — typeset, annual-report figure
   Shared between Term Loan (default) and Acquisition
   (with --inheritance modifier)
   ---------------------------------------------------------- */
.ed-rate-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--ink-cream);
  border: 1px solid var(--ink-hairline);
  padding: 48px 40px;
}

.ed-rate-card__title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-graphite);
  margin: 0 0 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink-hairline);
}

.ed-rate-card__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ed-rate-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ink-hairline);
}

.ed-rate-card__row:last-child {
  border-bottom: none;
}

.ed-rate-card__label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-charcoal);
  flex-shrink: 0;
}

.ed-rate-card__value {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-charcoal);
  text-align: right;
  letter-spacing: -0.01em;
}

.ed-rate-card__caption {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-graphite);
  line-height: 1.5;
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--ink-hairline);
}

/* Acquisition variant — 2px ochre top border to differentiate */
.ed-rate-card--inheritance {
  border-top: 2px solid var(--ink-ochre);
}

@media (max-width: 600px) {
  .ed-rate-card {
    padding: 32px 24px;
  }
  .ed-rate-card__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .ed-rate-card__value {
    text-align: left;
  }
}

/* ----------------------------------------------------------
   LOC — hero stat (centered, dominant)
   ---------------------------------------------------------- */
.ed-stat--hero {
  align-items: center;
  text-align: center;
  margin: 32px auto 0;
  gap: 0;
  display: flex;
  flex-direction: column;
}

.ed-stat--hero .ed-stat__num {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(140px, 18vw, 240px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink-charcoal);
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}

.ed-stat--hero .ed-stat__num::after {
  content: "";
  display: block;
  width: 64%;
  height: 2px;
  background: var(--ink-ochre);
  margin: 12px auto 0;
}

.ed-stat--hero .ed-stat__label {
  margin-top: 16px;
  color: var(--ink-graphite);
}

/* LOC — centered hero variant */
.ed-product-hero--centered {
  text-align: center;
}

.ed-product-hero--centered .ed-product-hero__copy {
  align-items: center;
  margin: 0 auto;
  max-width: none;
}

.ed-product-hero--centered .ed-product-hero__title,
.ed-product-hero--centered .ed-product-hero__lede {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.ed-product-hero--centered .ed-product-hero__cta {
  align-self: center;
}

/* ----------------------------------------------------------
   LOC — alternating column narrative
   ---------------------------------------------------------- */
.ed-narrative {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 96px;
}

.ed-narrative__row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 32px;
  row-gap: 32px;
  align-items: center;
}

.ed-narrative__copy {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ed-narrative__visual {
  grid-column: span 8;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Flip on every other row */
.ed-narrative__row:nth-child(even) .ed-narrative__copy {
  order: 2;
  grid-column: span 4 / -1;
}

.ed-narrative__row:nth-child(even) .ed-narrative__visual {
  order: 1;
  grid-column: 1 / span 8;
}

.ed-narrative__index {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--ink-graphite);
  text-transform: uppercase;
}

.ed-narrative__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink-charcoal);
  margin: 0;
}

.ed-narrative__body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-charcoal);
  margin: 0;
  max-width: 28em;
}

.ed-narrative__numeral {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(120px, 16vw, 220px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink-ochre);
  text-align: center;
  width: 100%;
}

.ed-narrative__visual .ed-figure {
  width: 100%;
}

@media (max-width: 768px) {
  .ed-narrative {
    gap: 64px;
  }
  .ed-narrative__row {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .ed-narrative__copy,
  .ed-narrative__visual,
  .ed-narrative__row:nth-child(even) .ed-narrative__copy,
  .ed-narrative__row:nth-child(even) .ed-narrative__visual {
    grid-column: 1 / -1;
    order: initial;
  }
}

/* ----------------------------------------------------------
   Acquisition — full-bleed cream hero variant
   ---------------------------------------------------------- */
.ed-product-hero--bleed .ed-product-hero__title {
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1;
}

/* ----------------------------------------------------------
   Acquisition — numbered editorial list
   ---------------------------------------------------------- */
.ed-numbered-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ed-numbered-list__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 32px;
  align-items: baseline;
  padding: 40px 0;
  border-bottom: 1px solid var(--ink-hairline);
}

.ed-numbered-list__item:first-child {
  border-top: 1px solid var(--ink-hairline);
}

.ed-numbered-list__num {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 80px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink-ochre);
}

.ed-numbered-list__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ed-numbered-list__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink-charcoal);
  margin: 0;
}

.ed-numbered-list__body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-charcoal);
  margin: 0;
  max-width: none;
}

@media (max-width: 600px) {
  .ed-numbered-list__item {
    grid-template-columns: 1fr;
    row-gap: 12px;
    padding: 32px 0;
  }
  .ed-numbered-list__num {
    font-size: 56px;
  }
}

/* ----------------------------------------------------------
   Shared "Who is this for" — editorial polish, 2-col preserved
   ---------------------------------------------------------- */
.ed-who {
  padding: 96px 0;
}

.ed-who__grid {
  row-gap: 48px;
  column-gap: 64px;
}

.ed-who__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ed-who__heading {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-charcoal);
  margin: 0 0 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink-hairline);
}

.ed-who__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ed-who__list li {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-charcoal);
  padding-left: 22px;
  position: relative;
}

.ed-who__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 1px;
  background: var(--ink-oxblood);
}

/* ----------------------------------------------------------
   Product page CTA — italic word title
   Centered: title, lede, and button row align horizontally
   center within the section so the treatment matches the
   homepage final CTA across every page that uses this block.
   ---------------------------------------------------------- */
.ed-product-cta {
  padding: 96px 0 120px;
  border-top: 1px solid var(--ink-hairline);
  background: var(--ink-cream);
  text-align: center;
}

.ed-product-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

.ed-product-cta__inner > .ed-product-hero__lede {
  margin-left: auto;
  margin-right: auto;
}

.ed-product-cta__buttons {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 600px) {
  .ed-product-cta__inner {
    align-items: stretch;
  }
  .ed-product-cta__buttons {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }
}

/* ==========================================================
   Phase 6 — New page components
   lending-philosophy / industries / glossary / faq regroup
   ========================================================== */

/* ----------------------------------------------------------
   Article (lending-philosophy)
   Single-column long-read editorial; max-width prose inside.
   ---------------------------------------------------------- */
.ed-article {
  padding: 32px 0 96px;
}

.ed-article__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.ed-article__hero-figure {
  margin: 48px 0 56px;
}

.ed-article__hero-figure img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

.ed-article__intro {
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 32px;
  max-width: none;
}

.ed-article__intro::first-letter {
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: normal;
  font-size: 5.2em;
  line-height: 0.85;
  color: var(--ink-ochre);
  float: left;
  padding: 0.05em 0.12em 0 0;
  margin-top: 0.05em;
}

.ed-principle {
  margin: 0;
  padding: 0;
}

.ed-principle__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-graphite);
  margin: 0 0 12px;
}

.ed-principle__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink-charcoal);
  margin: 0 0 20px;
}

.ed-principle__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-oxblood);
}

.ed-principle__body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-charcoal);
  margin: 0;
  max-width: none;
}

.ed-principle__body + .ed-principle__body {
  margin-top: 1.1em;
}

.ed-article__close {
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ed-article__close-links {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-hairline);
}

@media (max-width: 768px) {
  .ed-article {
    padding: 48px 0 64px;
  }
  .ed-article__close-links {
    flex-direction: column;
    gap: 16px;
  }
}

/* ----------------------------------------------------------
   Industries — 3-up tile grid (no photos per tile, hero only)
   ---------------------------------------------------------- */
.ed-industries-section {
  padding: 64px 0 96px;
}

.ed-industries-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 32px;
  row-gap: 56px;
  border-top: 1px solid var(--ink-hairline);
  padding-top: 56px;
}

.ed-industry-tile {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ed-industry-tile__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink-charcoal);
  margin: 0;
}

.ed-industry-tile__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-oxblood);
}

.ed-industry-tile__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-charcoal);
  margin: 0;
  max-width: 28em;
  flex-grow: 1;
}

.ed-industry-tile__link {
  align-self: flex-start;
}

.ed-industries-disclaimer {
  margin: 80px auto 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--ink-hairline);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-graphite);
  line-height: 1.6;
  max-width: none;
  text-align: center;
}

@media (max-width: 1024px) {
  .ed-industry-tile {
    grid-column: span 6;
  }
}

@media (max-width: 768px) {
  .ed-industries-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
  }
  .ed-industry-tile {
    grid-column: 1 / -1;
  }
}

/* ----------------------------------------------------------
   Glossary — sticky letter sidebar (1024+) + alphabetical list
   ---------------------------------------------------------- */
.ed-glossary-section {
  padding: 64px 0 96px;
}

.ed-glossary-layout {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 48px;
  row-gap: 32px;
  align-items: start;
}

.ed-glossary-aside {
  display: none;
}

@media (min-width: 1024px) {
  .ed-glossary-layout {
    grid-template-columns: 160px 1fr;
  }
  .ed-glossary-aside {
    display: block;
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

.ed-glossary-aside__title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-graphite);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink-hairline);
}

.ed-glossary-aside__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ed-glossary-aside__list li {
  border-bottom: 1px solid var(--ink-hairline);
}

.ed-glossary-aside__list li:last-child {
  border-bottom: none;
}

.ed-glossary-aside__list a {
  display: block;
  padding: 10px 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-charcoal);
  text-decoration: none;
  transition: color 200ms ease;
}

.ed-glossary-aside__list a:hover {
  color: var(--ink-oxblood);
}

.ed-glossary-list {
  margin: 0;
  padding: 0;
}

.ed-glossary-letter {
  margin: 0 0 48px;
}

.ed-glossary-letter__heading {
  display: block;
  margin: 0 0 12px;
  padding: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--ink-ochre);
  border-bottom: 1px solid var(--ink-hairline);
  scroll-margin-top: 96px;
}

.ed-glossary-letter dl {
  margin: 0;
}

/* Scroll-margin so anchored terms don't tuck under the sticky nav */
.ed-term {
  scroll-margin-top: 96px;
}

.ed-term:first-of-type {
  margin-top: 16px;
}

.ed-glossary-disclaimer {
  margin: 64px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--ink-hairline);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-graphite);
  line-height: 1.6;
}

/* ----------------------------------------------------------
   FAQ stage groups (regroup of faq.html into 3 stages)
   ---------------------------------------------------------- */
.ed-faq-stage {
  margin: 0 0 80px;
}

.ed-faq-stage:last-of-type {
  margin-bottom: 0;
}

.ed-faq-stage__head {
  margin: 0 0 32px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--ink-charcoal);
}

.ed-faq-stage__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-graphite);
  margin: 0 0 12px;
}

.ed-faq-stage__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink-charcoal);
  margin: 0;
}

.ed-faq-stage__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-oxblood);
}

/* ==========================================================
   Wide-viewport spacing audit (Phase 8)
   ----------------------------------------------------------
   Container is now fluid (--spacing-container: 100%) so .container
   fills the viewport with clamp(24px, 4vw, 96px) side padding. The
   components below were originally tuned for a 1200px container —
   without inner caps they stretch absurdly at >=1440px viewports
   (cards float apart, copy columns sit miles from photos, tables
   get sparse). These rules apply targeted max-widths to the inner
   grids/components so the visual proportions stay editorial while
   the surrounding container stays full-bleed.
   ========================================================== */

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

/* Homepage hero — 5/7 grid stretches the loan-selector column at
   1920px; cap the inner grid so copy and selector stay related. */
.ed-hero__grid {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* Product hero (Term Loan, Compare, Industries, Lending Philosophy)
   — 4/8 or 6/6 grid; without a cap the photo column exceeds 1300px
   on 1920 viewports and the copy column is too narrow proportionally. */
.ed-product-hero__grid {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* Acquisition hero (full-bleed cream + large italic title) — copy
   inside the bleed should not run the full viewport width. */
.ed-product-hero--bleed .ed-product-hero__copy {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* Hero photo cap — cinematic, never let term-loan / compare / industries
   hero figures grow into wall-sized prints on wide screens. The natural
   1.5:1 aspect at col-8 within a 1500-capped grid resolves to ~645px
   tall; cap at 720px so the photo never clips on a 1500-wide grid but
   still avoids ballooning if the cap is ever loosened. */
.ed-product-hero .ed-figure img,
.ed-compare-figure img {
  max-height: 720px;
  object-fit: cover;
}

/* ---------- Asymmetric editorial grids ---------- */

/* Why CBF — symmetric 4-up. Cap at 1400 to align with .services-grid,
   .process-steps, .ed-trust, and .ed-stats__grid for one continuous
   vertical column of content widths down the homepage. */
.ed-why__grid {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* LOC alternating narrative — flips left/right with a giant numeral.
   Without a cap each row spans 1700+px and the copy floats far from
   the numeral. */
.ed-narrative {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* Acquisition page below-hero 7/5 grid (prose + portrait photo) and
   any other ad-hoc .ed-grid usage that lives directly under .container.
   The 12-col grid has no inherent max width — give it a cohesive cap. */
.ed-product-section .ed-grid,
.ed-who__grid {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* ed-grid column gap — 32px feels tight when content spans 1500+px.
   Scale up on wide viewports while preserving the 32px floor so
   medium viewports (~1024-1280) keep the original cadence. Gated
   above 768 so the existing mobile collapse (column-gap: 0) wins. */
@media (min-width: 769px) {
  .ed-grid {
    column-gap: clamp(32px, 3vw, 56px);
  }
}

/* ---------- Card / tile grids ---------- */

/* Homepage 3-up product cards — at 1920 each card was ~570px wide
   and floated apart. Cap so cards stay related. */
.services-grid {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* Industries 3-up tile grid — same issue, 10 tiles get sparse. */
.ed-industries-grid {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* Generic numbered grid utilities used on rates-fees, eligibility,
   how-it-works, faq. Without a cap, .grid-3 / .grid-4 stretch each
   card to 450px+ and they read as standalone billboards. */
.grid-2,
.grid-3,
.grid-4 {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* Process steps (homepage + how-it-works) — 4-up, similar problem. */
.process-steps {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Editorial components on product pages ---------- */

/* Term-loan benefit timeline — 6-up. Cells fill ~250px each at 1500px
   which feels tight but cohesive; without a cap it's 320px each and
   reads as a billboard rather than a timeline. */
.ed-timeline {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* Acquisition numbered list — 120px numeral column + body. At full
   width the body line-length runs over the body cap (36em) into
   white space; the cap on the list itself keeps the rule lines
   from drifting apart. */
.ed-numbered-list {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Tables / matrices ---------- */

/* Compare matrix — at 1920px each cell becomes 380+ px wide and the
   table reads sparse. Cap to keep rate values close enough to compare. */
.ed-matrix-wrap {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Trust strip ---------- */

/* Trust strip already capped at 1400px (line 1324). At 1500 it would
   feel slightly more relaxed against the surrounding 100% container.
   Keep at 1400px — it balances the .ed-stats__grid cap at 1400. */

/* ---------- Stat callouts ---------- */

/* .ed-stats__grid is already capped at 1400px (line 1280). Keep. */

/* ---------- Pull-quote band ---------- */

/* .ed-pullquote-band — pullquote inside is already 32em capped via
   .ed-pullquote (line 88). The band itself is fluid; vertical rhythm
   is fine. No fix needed. */

/* ---------- Footer ---------- */

/* Footer should fill the page like the rest, but the 3-col link grid
   at 1920px puts ~600px between columns and the fact-line wraps weird.
   Cap the footer's inner content so it stays a cohesive block. */
.footer > .container {
  max-width: none;
}

/* Manifesto block — already 24em on the inner <p>; the manifesto's
   container is fluid which is the intended full-bleed border treatment.
   No cap needed on the wrapper. */

/* Fact-line wraps awkwardly when the container is very wide. Cap it
   so it stays one or two lines max, matching the manifesto cadence. */
.footer__fact-line {
  max-width: none;
}

/* ---------- CTA sections (homepage + product) ---------- */

/* .cta-section__content already centers itself with text-align: center
   and max-width: 600px on the text block. The container around it is
   100% — the content centers fine. The decorative ::before radial-
   gradient is positioned at right: -10% so it follows viewport, which
   reads OK at any width. No fix needed. */

/* Product page final CTA — has .ed-product-hero__lede inside; copy
   already capped via .ed-product-hero__lede max-width: 32em. */

/* ---------- Glossary ---------- */

/* Glossary 1024+ layout — 160px sidebar + 1fr terms list. At 1920 the
   terms column gets 1500+ px. Cap the layout so dl rows stay readable. */
.ed-glossary-layout {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- FAQ stage groups ---------- */

/* FAQ accordion is already capped at 800px (.faq, line 1001). The
   .ed-faq-stage__head's bottom-border rule, when fluid, extends to
   the full viewport — at 1920 the rule sits ~1750px wide while the
   accordion below (800px) sits centered, creating a visual disconnect.
   Cap and center the stage so the title hairline stays related to the
   accordion that follows. */
.ed-faq-stage {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Section vertical rhythm ---------- */

/* .section padding was 120px top/bottom — at wider content this feels
   slightly squashed vertically once horizontal content stretches.
   Scale up on wide desktop while preserving the 120px floor so 1024–
   1280 keeps the original cadence and mobile (72px from a separate
   rule) is unaffected. */
@media (min-width: 1024px) {
  :root {
    --spacing-section: clamp(120px, 8.5vw, 160px);
  }
}

/* ---------- Page-header (legal, rates-fees, how-it-works, etc.) ---------- */

/* .page-header__content already capped at 800px (components.css). Good. */

/* ---------- Mobile / tablet safety ---------- */

/* All caps above are max-widths — they collapse to 100% under their
   threshold automatically. The clamp() on .ed-grid column-gap and the
   :root --spacing-section clamp are also responsive-safe. */

/* ----------------------------------------------------------
   Phase-7 microinteractions
   Reveal classes wired by js/animations.js. The end-state is the
   default in case JS fails to run; transitions only kick in when
   the page has motion enabled.
   ---------------------------------------------------------- */

/* Default end-state. Always visible without JS, always visible
   under reduced-motion (the JS drops the .revealed class on first
   paint, which matches this end-state anyway). */
.reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* Pre-reveal: fade-up, then settle. */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* Slower, longer slide for pull-quotes — they should feel deliberate. */
  .ed-pullquote.reveal {
    transform: translateY(36px);
    transition-duration: 1.2s;
  }

  /* Drop-cap intro: the most premium reveal — start slightly lower,
     finish unhurried. */
  .ed-dropcap.reveal,
  .ed-prose.reveal {
    transform: translateY(28px);
    transition-duration: 1.05s;
  }

  /* Editorial photos: very subtle — they read as static prints, the
     fade is barely-there but adds an editorial cadence. */
  .ed-figure.reveal {
    transform: translateY(18px);
    transition-duration: 1.1s;
  }
}

/* Parallax containment — keep transform bounded so the photo never
   pokes outside its figure crop box. */
[data-parallax] {
  will-change: transform;
}
.ed-figure[data-parallax] {
  /* Slight overflow guard: the parallax range is small (a few px),
     but the figure's aspect-ratio crop holds the visible bounds. */
  overflow: hidden;
}

/* Magnetic button — visual cue is the cursor-follow translate from JS,
   but transitions on the back-out should feel premium not snap. */
.btn--magnetic {
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              background-color 200ms ease,
              border-color 200ms ease;
  will-change: transform;
}

/* Reduced-motion: drop will-change and any transform leftover the JS
   may have written before the matchMedia check resolved. */
@media (prefers-reduced-motion: reduce) {
  .btn--magnetic,
  [data-parallax] {
    transform: none !important;
    will-change: auto;
  }
}

/* ----------------------------------------------------------
   Reduced-motion respect
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}