/* blog-article-editorial.css
   New canonical "editorial" long-form article format for the FGO blog.
   Proof-of-format build (PR64): loaded ONLY on
   blog-how-banks-fund-business-acquisitions.html.

   Scoping: every rule sits under body.fmt-editorial so this file can be
   adopted on other blog-*.html pages later without ever touching the
   legacy assets/css/blog-article.css (34 pages depend on its selectors
   as-is). Load order: tokens.css, then this file.

   Format: centred header (eyebrow -> H1 -> standfirst -> byline -> hairline),
   then a LEFT-aligned reading column below it. Warm serif headings via
   var(--font-article) (Newsreader), body copy stays var(--font-body)
   (Hanken Grotesk), eyebrows/labels stay var(--font-mono) (JetBrains Mono).
   No numbered eyebrow markers anywhere in this format. */

.fmt-editorial {
  background: var(--cream);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

.fmt-editorial * {
  box-sizing: border-box;
}

.fmt-editorial a {
  text-decoration: none;
}

/* ---------- top bar (site identity + back link, not the article header) ---------- */
.fmt-editorial .ed-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.fmt-editorial .ed-topbar-row {
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fmt-editorial .ed-topbar-logo img {
  height: 26px;
  width: auto;
  display: block;
}

.fmt-editorial .ed-topbar-back {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
}

.fmt-editorial .ed-topbar-back:hover {
  color: var(--clay);
}

/* ---------- editorial reading scale ----------
   Measured 85 characters per line at 17px in the 660px column, against the
   design system's ~70ch guidance. Raising the body to 20px brings it to about
   72ch without touching the column width, and tightens leading to 1.7 (shorter
   lines need less). These are local to .fmt-editorial: the shared --fs-art-*
   tokens still serve blog-article.css, the newsletters and the ETA page. */
.fmt-editorial {
  --fs-ed-body: 20px;
  --fs-ed-lead: 23px;
  --lh-ed-body: 1.7;
}

/* The type step belongs where the column starts shrinking. Above 640px the
   column is still at or near its 660px cap, so stepping down there would push
   measure back up to ~80 characters rather than reduce it. */
@media (max-width: 640px) {
  .fmt-editorial {
    --fs-ed-body: 18px;
    --fs-ed-lead: 20px;
  }
}

/* ---------- article shell ---------- */
.fmt-editorial .ed-article {
  max-width: 960px;
  margin: 0 auto;
  padding: 8svh 24px 4svh;
}

/* ---------- centred header block ---------- */
.fmt-editorial .ed-header {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.fmt-editorial .ed-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 600;
  margin: 0 0 18px;
}

.fmt-editorial .ed-title {
  font-family: var(--font-article);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 20px;
  text-wrap: balance;
}

.fmt-editorial .ed-standfirst {
  font-family: var(--font-body);
  font-size: var(--fs-ed-lead);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 18px;
}

.fmt-editorial .ed-byline {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--muted);
  margin: 0;
}

.fmt-editorial .ed-byline a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fmt-editorial .ed-divider {
  width: 100%;
  max-width: 120px;
  margin: 36px auto 0;
  border: none;
  border-top: 1.5px solid var(--line);
}

/* ---------- reading column: left-aligned, narrower than the header ---------- */
.fmt-editorial .ed-body {
  max-width: 660px;
  /* .ed-header carries margin:0 auto inside the 960px shell but .ed-body never
     did, so the reading column hung 126px left of the centred header on every
     editorial article. Nothing occupies the space it was leaving on the right,
     so the offset read as a mistake rather than an asymmetric layout. */
  margin-inline: auto;
  margin-top: 6svh;
}

.fmt-editorial .ed-body h2 {
  font-family: var(--font-article);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: var(--fs-art-h2);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 3em 0 0.7em;
}

.fmt-editorial .ed-body h2:first-child {
  margin-top: 0;
}

.fmt-editorial .ed-body p {
  font-family: var(--font-body);
  font-size: var(--fs-ed-body);
  line-height: var(--lh-ed-body);
  color: var(--text-primary);
  margin: 0 0 1.4em;
}

.fmt-editorial .ed-body p b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fmt-editorial .ed-body a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.fmt-editorial .ed-body a:hover {
  color: var(--clay);
}

/* ---------- lists inside the reading column ---------- */
.fmt-editorial .ed-body ul,
.fmt-editorial .ed-body ol {
  margin: 0 0 1.4em;
  padding-left: 1.3em;
}

.fmt-editorial .ed-body li {
  font-family: var(--font-body);
  font-size: var(--fs-ed-body);
  line-height: var(--lh-ed-body);
  color: var(--text-primary);
  margin: 0 0 0.7em;
}

.fmt-editorial .ed-body li::marker {
  color: var(--clay);
}

.fmt-editorial .ed-body li b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fmt-editorial .ed-body li:last-child {
  margin-bottom: 0;
}

.fmt-editorial .ed-fork-question {
  font-family: var(--font-article);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-ed-lead);
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 1.6em 0 0.9em;
}

/* ---------- fork diagram: single static line drawing, caption above ----------
   Graphic is pure SVG (line-work + nodes only, non-scaling-stroke so the 1.5px
   ink line stays crisp at any width). Labels are real HTML text positioned as
   percentages of the wrapper, so they stay a legible fixed size instead of
   shrinking with the SVG's viewBox scale on narrow screens. */
.fmt-editorial .ed-diagram-wrap {
  position: relative;
  margin: 0 0 1.8em;
  /* Wider than the 660px reading column on purpose. calc(100vw - 48px) only
     kept it on screen while .ed-body was flush left; now that the column is
     centred, the breakout has to centre on the column's axis rather than
     assume it starts 24px from the viewport edge. */
  width: min(900px, calc(100vw - 48px));
  left: 50%;
  transform: translateX(-50%);
}

.fmt-editorial .ed-diagram {
  display: block;
  width: 100%;
  height: auto;
}

.fmt-editorial .ed-diagram-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}

.fmt-editorial .ed-diagram-node {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}

.fmt-editorial .ed-diagram-dot {
  fill: var(--clay);
  stroke: none;
}

.fmt-editorial .ed-diagram-label {
  position: absolute;
  max-width: 26%;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  background: var(--cream);
  padding: 3px 8px;
}

.fmt-editorial .ed-diagram-label-start {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
}

.fmt-editorial .ed-diagram-label-end {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
}

.fmt-editorial .ed-diagram-label-top {
  left: 49%;
  top: 6%;
  transform: translateX(-50%);
  text-align: center;
}

.fmt-editorial .ed-diagram-label-bottom {
  left: 49%;
  top: 90%;
  transform: translateX(-50%);
  text-align: center;
}

/* ---------- two-lane comparison ---------- */
.fmt-editorial .ed-lanes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 0 0 1.6em;
}

.fmt-editorial .ed-lane {
  padding: 4px 0;
}

.fmt-editorial .ed-lane-tab {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--clay);
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--clay);
  display: inline-block;
}

.fmt-editorial .ed-lane-unsecured .ed-lane-tab {
  color: var(--text-primary);
  border-bottom-color: var(--ink);
}

.fmt-editorial .ed-lane p {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

.fmt-editorial .ed-lane-verdict {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--clay);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.fmt-editorial .ed-lane-unsecured .ed-lane-verdict {
  color: var(--text-primary);
}

/* ---------- comparison table: multi-row/column factor breakdown ----------
   For a genuine multi-factor comparison (more rows or columns than the
   two-lane component above suits). Plain table, mono uppercase headers,
   hairline row dividers, horizontal scroll on narrow screens rather than
   a squeezed layout. */
.fmt-editorial .ed-table-wrap {
  margin: 0 0 1.8em;
  overflow-x: auto;
}

.fmt-editorial .ed-table {
  width: 100%;
  border-collapse: collapse;
}

.fmt-editorial .ed-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  text-align: left;
  padding: 0 20px 10px 0;
  border-bottom: 1.5px solid var(--ink);
  white-space: nowrap;
}

.fmt-editorial .ed-table td {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-primary);
  padding: 14px 20px 14px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.fmt-editorial .ed-table th:first-child,
.fmt-editorial .ed-table td:first-child {
  padding-left: 0;
}

.fmt-editorial .ed-table tr:last-child td {
  border-bottom: none;
}

.fmt-editorial .ed-table td b {
  font-weight: 700;
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .fmt-editorial .ed-table {
    min-width: 560px;
  }
}

/* ---------- pull-quote: modular black-box component ----------
   Self-contained: deleting a .pullquote block removes it cleanly from
   an article. Defined here even where an article doesn't use it, so
   the pattern is ready for the next editorial-format rollout. */
.fmt-editorial .pullquote {
  background: var(--ink);
  color: var(--off-white);
  padding: 40px 44px;
  margin: 2.4em 0;
}

.fmt-editorial .pullquote p {
  font-family: var(--font-article);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-ed-lead);
  line-height: 1.6;
  color: var(--off-white);
  margin: 0;
}

.fmt-editorial .pq-attr {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--warm-beige);
  margin-top: 16px;
  letter-spacing: 0.03em;
}

/* ---------- four Cs definition list ---------- */
.fmt-editorial .ed-four-cs {
  margin: 0 0 1.6em;
}

.fmt-editorial .ed-four-cs > div {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.fmt-editorial .ed-four-cs > div:last-child {
  border-bottom: 1px solid var(--line);
}

.fmt-editorial .ed-four-cs dt {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--clay);
  margin: 0 0 6px;
}

.fmt-editorial .ed-four-cs dd {
  font-size: var(--fs-ed-body);
  line-height: 1.65;
  color: var(--text-primary);
  margin: 0;
}

.fmt-editorial .ed-four-cs dd b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- stat box (deal ticket) ---------- */
.fmt-editorial .ed-stat-box {
  border: 1.5px solid var(--ink);
  background: var(--cream-deep);
  padding: 18px 22px 20px;
  margin: 0 0 1.6em;
}

.fmt-editorial .ed-stat-head {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 12px;
}

.fmt-editorial .ed-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}

.fmt-editorial .ed-stat-row:last-child {
  border-bottom: none;
}

.fmt-editorial .ed-stat-label {
  color: var(--text-secondary);
}

.fmt-editorial .ed-stat-val {
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fmt-editorial .ed-stat-row.ed-stat-flag {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1.5px solid var(--ink);
  border-bottom: none;
  flex-wrap: wrap;
}

.fmt-editorial .ed-stat-flag .ed-stat-label {
  color: var(--text-primary);
  font-weight: 600;
}

.fmt-editorial .ed-stat-flag .ed-stat-val {
  color: var(--clay);
}

.fmt-editorial .ed-stat-note {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--clay);
  margin-top: 6px;
}

/* ---------- primary CTA row ---------- */
.fmt-editorial .ed-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 2.4em 0 0;
}

.fmt-editorial .ed-cta {
  display: inline-block;
  padding: 13px 26px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: -0.01em;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.fmt-editorial .ed-cta.primary {
  background: var(--ink);
  color: var(--cream);
}

.fmt-editorial .ed-cta.primary:hover {
  opacity: 0.86;
}

.fmt-editorial .ed-cta.ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}

.fmt-editorial .ed-cta.ghost:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ---------- single newsletter CTA block (the only newsletter mention on the page) ---------- */
.fmt-editorial .ed-newsletter {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 28px 30px;
  margin: 3em 0 0;
}

.fmt-editorial .ed-nl-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 700;
  margin: 0 0 10px;
}

.fmt-editorial .ed-newsletter h3 {
  font-family: var(--font-article);
  font-weight: 600;
  font-size: var(--fs-card);
  color: var(--text-primary);
  margin: 0 0 8px;
}

.fmt-editorial .ed-newsletter p {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-secondary);
  margin: 0 0 14px;
  max-width: 56ch;
}

.fmt-editorial .ed-nl-link {
  color: var(--clay);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fmt-editorial .ed-nl-link:hover {
  color: var(--accent-deep);
}

/* ---------- footer: FAQ + related reading + disclosure ---------- */
.fmt-editorial .ed-footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 6svh 24px 9svh;
  border-top: 1.5px solid var(--ink);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: 1.7;
}

.fmt-editorial .ed-fh {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 14px;
}

.fmt-editorial .ed-fh.ed-fh-related {
  margin-top: 36px;
}

.fmt-editorial .ed-footer h3.ed-fq {
  font-family: var(--font-article);
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 14px;
  max-width: 76ch;
  font-size: var(--fs-small);
}

.fmt-editorial .ed-footer .ed-fa {
  max-width: 76ch;
  margin-top: 3px;
}

.fmt-editorial .ed-footer a {
  color: var(--clay);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.fmt-editorial .ed-footer a:hover {
  opacity: 0.82;
}

.fmt-editorial .ed-footer .ed-fine {
  margin-top: 18px;
  font-size: var(--fs-caption);
  color: var(--muted);
  max-width: 76ch;
  font-family: var(--font-body);
}

/* ---------- mobile: single full-width column ---------- */
@media (max-width: 768px) {
  .fmt-editorial .ed-topbar-row,
  .fmt-editorial .ed-article,
  .fmt-editorial .ed-footer {
    padding-left: 22px;
    padding-right: 22px;
  }

  .fmt-editorial .ed-article {
    padding-top: 4svh;
  }

  .fmt-editorial .ed-body {
    /* was max-width:100%, which let the column reach 708px at exactly 768px:
       92 characters per line, wider than desktop and the worst measure on the
       site. The 660px cap now holds all the way down. */
    margin-top: 5svh;
  }

  .fmt-editorial .ed-body h2 {
    font-size: var(--fs-art-h2-m);
  }

  .fmt-editorial .ed-diagram-wrap {
    width: 100%;
  }

  .fmt-editorial .ed-lanes {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .fmt-editorial .pullquote {
    padding: 28px 26px;
  }

  .fmt-editorial .ed-stat-row {
    flex-direction: column;
    gap: 4px;
  }

  .fmt-editorial .ed-stat-val {
    white-space: normal;
  }
}

/* ============================================================
   Added for how-much-debt-can-an-acquisition-carry (PR64 batch 2):
   a topbar section-jump nav, and a preserved bespoke "instrument
   panel" device (arrival stat comparison, two-logic gauge cards, an
   interactive EBITDA sizing console) carried over from that page's
   pre-editorial bespoke build and restyled onto shared tokens/fonts.
   Scoped additively; nothing above this line is touched.
   ============================================================ */

/* ---------- topbar section-jump nav ---------- */
.fmt-editorial .ed-topbar-nav {
  display: flex;
  gap: 20px;
}

.fmt-editorial .ed-topbar-nav button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 2px 0;
  border-bottom: 2px solid transparent;
}

.fmt-editorial .ed-topbar-nav button.on {
  color: var(--clay);
  border-bottom-color: var(--clay);
  font-weight: 700;
}

.fmt-editorial .ed-topbar-nav button:hover {
  color: var(--clay);
}

@media (max-width: 680px) {
  .fmt-editorial .ed-topbar-nav {
    display: none;
  }
}

/* ---------- instrument panel shell: dark, self-contained, sits inside
   .ed-body like any other bespoke component (fork diagram, stat box).
   Dark-panel colours have no equivalent in tokens.css, so they are
   defined locally on the component rather than invented as new global
   tokens used nowhere else on the site. ---------- */
.fmt-editorial .ed-instrument {
  --dbg: #141019;
  --dtext: #F3ECDF;
  --dclay: #E0975C;
  --ddim: #9C9284;
  --dhair: #3A3430;
  --dpanel: #1D1721;
  --dtrack: #241D2A;
  background: var(--dbg);
  color: var(--dtext);
  padding: 6svh clamp(24px, 5vw, 48px);
  margin: 0 0 2.4em;
}

/* arrival: two giant readouts, live count-up on scroll into view */
.fmt-editorial .ed-arrival {
  display: grid;
  /* minmax(0,...) not 1fr: a bare 1fr floors at min-content, and the readout
     is one unbreakable token, so the columns refused to shrink and the grid
     pushed out through the panel padding instead. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 56px);
}

/* Each readout sizes against its own column, not the viewport. This is the
   actual bug: the panel width is capped (and is even wider at 768px than at
   1440px) while a vw-linked font kept growing, so the type outran its box. */
.fmt-editorial .ed-arrival > div {
  container-type: inline-size;
  min-width: 0;
}

@media (max-width: 640px) {
  .fmt-editorial .ed-arrival {
    grid-template-columns: 1fr;
    gap: 5vh;
  }
}

.fmt-editorial .ed-arrival-n {
  font-family: var(--font-article);
  font-optical-sizing: auto;
  /* "$4,000,000" renders about 5.3x the font size, so 16cqi keeps the glyphs
     near 85% of the column and leaves a real gutter at every width. The vw
     line above it is the fallback for engines without container units. */
  font-size: clamp(28px, 4.4vw, 44px);
  font-size: clamp(28px, 16cqi, 52px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--dtext);
  font-variant-numeric: tabular-nums;
}

.fmt-editorial .ed-arrival-label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ddim);
  margin-top: 10px;
}

.fmt-editorial .ed-arrival-gap {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ddim);
  margin-top: 3.6vh;
  padding-top: 2.2vh;
  border-top: 1px solid var(--dhair);
}

.fmt-editorial .ed-arrival-gap .ed-num {
  color: var(--dclay);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* two-logic gauge cards */
.fmt-editorial .ed-gauge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 4.5svh;
}

@media (max-width: 640px) {
  .fmt-editorial .ed-gauge-grid {
    grid-template-columns: 1fr;
  }
}

.fmt-editorial .ed-gauge-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ddim);
  margin-bottom: 10px;
}

.fmt-editorial .ed-gauge-formula {
  font-family: var(--font-article);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(21px, 2.6vw, 28px);
  color: var(--dtext);
  margin-bottom: 14px;
}

.fmt-editorial .ed-gauge-earn .ed-gauge-formula {
  color: var(--dclay);
}

.fmt-editorial .ed-gauge-p {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--ddim);
  margin: 0;
}

.fmt-editorial .ed-gauge-p b {
  color: var(--dtext);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* the interactive sizing console */
.fmt-editorial .ed-console {
  margin-top: 4.5svh;
  background: var(--dpanel);
  border: 1px solid var(--dhair);
  padding: 26px clamp(20px, 4vw, 36px) 30px;
}

.fmt-editorial .ed-console-lead {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--ddim);
  margin: 0 0 20px;
}

.fmt-editorial .ed-console-note {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--ddim);
  margin-top: 16px;
  letter-spacing: 0.02em;
}

.fmt-editorial .ed-console-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.fmt-editorial .ed-console-label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dclay);
}

.fmt-editorial .ed-console-ebitda {
  font-family: var(--font-article);
  font-optical-sizing: auto;
  font-size: clamp(19px, 2.4vw, 24px);
  color: var(--dtext);
  font-variant-numeric: tabular-nums;
}

.fmt-editorial .ed-console-slider {
  width: 100%;
  margin: 14px 0 6px;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--dtrack);
  border: 1px solid var(--dhair);
  outline: none;
}

.fmt-editorial .ed-console-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--dclay);
  border: 1.5px solid var(--dtext);
  cursor: pointer;
}

.fmt-editorial .ed-console-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--dclay);
  border: 1.5px solid var(--dtext);
  cursor: pointer;
  border-radius: 0;
}

.fmt-editorial .ed-console-slider:focus-visible {
  outline: 2px solid var(--dclay);
  outline-offset: 3px;
}

.fmt-editorial .ed-console-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--ddim);
  margin-bottom: 10px;
}

.fmt-editorial .ed-console-price {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ddim);
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--dhair);
}

.fmt-editorial .ed-console-price b {
  color: var(--dtext);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fmt-editorial .ed-console-row {
  margin-bottom: 18px;
}

.fmt-editorial .ed-console-row:last-of-type {
  margin-bottom: 0;
}

.fmt-editorial .ed-console-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  margin-bottom: 7px;
}

.fmt-editorial .ed-console-row-name {
  font-weight: 700;
  color: var(--dtext);
}

.fmt-editorial .ed-console-row-sub {
  color: var(--ddim);
}

.fmt-editorial .ed-console-row-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--dtext);
}

.fmt-editorial .ed-console-track {
  background: var(--dbg);
  border: 1.5px solid var(--dhair);
  height: 30px;
  position: relative;
  overflow: visible;
}

.fmt-editorial .ed-console-band {
  position: absolute;
  top: 0;
  bottom: 0;
  transition: left 0.25s ease, width 0.25s ease;
}

.fmt-editorial .ed-console-band-price {
  background: rgba(243, 236, 223, 0.22);
  border-left: 2px solid var(--dtext);
  border-right: 2px solid var(--dtext);
}

.fmt-editorial .ed-console-band-earn {
  background: rgba(224, 151, 92, 0.32);
  border-left: 2px solid var(--dclay);
  border-right: 2px solid var(--dclay);
}

.fmt-editorial .ed-console-gap {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ddim);
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1.5px solid var(--dhair);
}

.fmt-editorial .ed-console-gap b {
  color: var(--dclay);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .fmt-editorial .ed-console-row-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fmt-editorial .ed-console-band {
    transition: none;
  }
}

/* ---------- recovery-discount strip: three-stat summary (section within
   .ed-body, outside the dark instrument panel) ---------- */
.fmt-editorial .ed-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.8em 0 0;
}

@media (max-width: 640px) {
  .fmt-editorial .ed-strip {
    grid-template-columns: 1fr;
  }
}

.fmt-editorial .ed-strip-item {
  background: var(--ink);
  padding: 20px 22px 22px;
}

.fmt-editorial .ed-strip-val {
  font-family: var(--font-article);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(21px, 2.4vw, 27px);
  color: var(--warm-beige);
  font-variant-numeric: tabular-nums;
}

.fmt-editorial .ed-strip-label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--off-white);
  opacity: 0.7;
  margin-top: 6px;
}

.fmt-editorial .ed-strip-cap {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-top: 14px;
}

/* ============================================================
   Added for share-sale-vs-asset-sale (PR64 batch 3): a generic
   ink-accent alias for the two-lane comparison (this article's two
   lanes are share sale vs asset sale, not secured vs unsecured, so a
   neutrally-named second-lane variant is reused instead of the
   proof page's ed-lane-unsecured), plus the bespoke "settlement
   line" device: a static two-column ledger (crossed-or-stays-behind
   per item, the always-visible no-JS/reduced-motion/mobile form)
   and, when motion is allowed on wider screens, a sticky
   scroll-driven crossing animation carried over from the page's
   pre-editorial bespoke build and restyled onto shared tokens/fonts.
   Scoped additively; nothing above this line is touched.
   ============================================================ */

/* ---------- two-lane comparison: generic ink-accent alias ---------- */
.fmt-editorial .ed-lane-b .ed-lane-tab {
  color: var(--text-primary);
  border-bottom-color: var(--ink);
}

.fmt-editorial .ed-lane-b .ed-lane-verdict {
  color: var(--text-primary);
}

/* ---------- visually-hidden utility ---------- */
.fmt-editorial .ed-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.fmt-editorial .ed-noscript-note {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-top: 10px;
}

/* ---------- settlement ledgers: static fallback (default, no-JS +
   reduced-motion + mobile form of the settlement-line device) ---------- */
.fmt-editorial .ed-ledgers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 1.8em 0;
}

@media (max-width: 680px) {
  .fmt-editorial .ed-ledgers {
    grid-template-columns: 1fr;
  }
}

.fmt-editorial .ed-ledger {
  border: 1.5px solid var(--line);
  background: var(--cream);
  padding: 18px 20px 20px;
}

.fmt-editorial .ed-ledger-share {
  border-color: var(--ink);
}

.fmt-editorial .ed-ledger-asset {
  border-color: var(--clay);
}

.fmt-editorial .ed-ledger-head {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.fmt-editorial .ed-ledger-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fmt-editorial .ed-ledger-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.fmt-editorial .ed-ledger-row:last-child {
  border-bottom: none;
}

.fmt-editorial .ed-ledger-item {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.fmt-editorial .ed-ledger-item.ed-ledger-dim {
  color: var(--muted);
}

.fmt-editorial .ed-ledger-status {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}

.fmt-editorial .ed-ledger-status.ed-ledger-cross {
  color: var(--text-primary);
}

.fmt-editorial .ed-ledger-status.ed-ledger-stay {
  color: var(--muted);
}

.fmt-editorial .ed-ledger-note {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-top: 14px;
}

.fmt-editorial .ed-ledger-verdict {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.fmt-editorial .ed-ledger-share .ed-ledger-verdict {
  color: var(--text-primary);
}

.fmt-editorial .ed-ledger-asset .ed-ledger-verdict {
  color: var(--clay);
}

/* ---------- settlement crossing: animated sticky scrollytelling stage
   (motion allowed, JS-driven; hidden by default until script confirms
   motion + viewport width, see the page's own script block) ---------- */
.fmt-editorial .ed-cross-outer {
  display: none;
  position: relative;
  height: 350svh;
  background: var(--cream);
  /* The stage is designed full-bleed: 100svh sticky, its own background and
     top/bottom rules, and a canvas sized min(92vw, 960px). It was sitting
     inside the 660px reading column, so overflow:hidden on the sticky cut 150px
     off each side and clipped the first and last card. Break it out of the
     column. No transform here on purpose: a transformed ancestor would change
     the containing block the sticky child resolves against. */
  margin-inline: calc(50% - 50vw);
}

.fmt-editorial .ed-cross-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--cream-deep);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4svh, 26px);
}

.fmt-editorial .ed-cross-wrap {
  position: relative;
  width: min(92vw, 960px);
  height: min(64svh, 600px);
}

.fmt-editorial .ed-cross-markers {
  position: absolute;
  top: -6px;
  right: 0;
  display: flex;
  gap: 6px;
  z-index: 3;
}

.fmt-editorial .ed-cross-markers span {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-deep);
}

.fmt-editorial .ed-cross-markers span.on {
  border-color: var(--ink);
  color: var(--text-primary);
}

.fmt-editorial .ed-cross-phase {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-article);
  font-optical-sizing: auto;
  font-size: clamp(26px, 4.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  opacity: 0;
}

.fmt-editorial .ed-cross-grid {
  position: absolute;
  top: 19%;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  align-items: start;
  z-index: 2;
}

@media (max-width: 768px) {
  .fmt-editorial .ed-cross-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 14px;
  }
}

.fmt-editorial .ed-cross-card {
  border: 1.5px solid var(--ink);
  background: var(--cream);
  padding: 8px 7px 9px;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  line-height: 1.32;
  color: var(--text-secondary);
  text-align: center;
  font-weight: 600;
  will-change: transform;
}

.fmt-editorial .ed-cross-card.ed-cross-is-flag {
  border-width: 2px;
}

.fmt-editorial .ed-cross-card .ed-cross-tick {
  display: block;
  margin-top: 3px;
  font-size: 0.8em;
  color: var(--ink);
  letter-spacing: 0.04em;
}

.fmt-editorial .ed-cross-card.ed-cross-is-pinned {
  opacity: 0.42;
}

.fmt-editorial .ed-cross-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ink);
  z-index: 1;
}

.fmt-editorial .ed-cross-side {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  z-index: 2;
}

.fmt-editorial .ed-cross-side.ed-cross-seller {
  top: calc(50% - 22px);
  left: 0;
  color: var(--text-primary);
}

.fmt-editorial .ed-cross-side.ed-cross-buyer {
  top: calc(50% + 9px);
  right: 0;
  color: var(--clay);
}

/* The cards animate down to 70% of the canvas height, and the verdict and note
   used to sit inside that same canvas pinned by percentage. They were always
   going to meet: card travel and text band were competing for the lower half,
   and it got worse as the canvas shrank on a short window. The text now lives
   OUTSIDE the animated canvas, in normal flow beneath it inside the sticky
   frame, so no percentage has to be guessed and nothing can land on it. */
.fmt-editorial .ed-cross-foot {
  width: min(92vw, 960px);
  max-width: 100%;
  display: grid;
  gap: 8px;
}

.fmt-editorial .ed-cross-verdict {
  position: static;
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 700;
  color: var(--text-primary);
  opacity: 0;
  margin: 0 auto;
}

.fmt-editorial .ed-cross-note {
  position: static;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--muted);
  opacity: 0;
}

.fmt-editorial .ed-cross-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .fmt-editorial .ed-cross-outer {
    display: none !important;
  }
}

/* ============================================================
   Added for vendor-finance-vs-deferred (PR64 batch 3): the bespoke
   CLAUSE-FLIP device (a real heads-of-agreement clause with a single
   toggleable term, deferred payment vs vendor finance, each backed
   by its own assessment card) plus a reusable ink-bordered callout
   box (used here for the clause device and the three-question test,
   general enough to reuse on future articles), carried over from the
   page's pre-editorial bespoke build and restyled onto shared
   tokens/fonts. Scoped additively; nothing above this line is
   touched.
   ============================================================ */

/* ---------- reusable ink-bordered callout box ---------- */
.fmt-editorial .ed-callout {
  border: 1.5px solid var(--ink);
  background: var(--cream-deep);
  padding: 26px clamp(20px, 4vw, 36px) 30px;
  margin: 1.6em 0;
}

.fmt-editorial .ed-callout p {
  margin: 0;
}

.fmt-editorial .ed-marker {
  color: var(--text-primary);
  font-weight: 700;
}

/* ---------- the clause-flip device ---------- */
.fmt-editorial .ed-clause-line {
  font-family: var(--font-article);
  font-optical-sizing: auto;
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.6;
  color: var(--text-primary);
  max-width: 60ch;
  margin: 0;
}

.fmt-editorial .ed-clause-line b {
  color: var(--text-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fmt-editorial .ed-clause-toggle {
  display: inline-block;
  border: 1.5px solid var(--clay);
  background: var(--cream);
  color: var(--clay);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 10px;
  margin: 0 2px;
  min-height: 34px;
  line-height: 1.5;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fmt-editorial .ed-clause-toggle:hover {
  border-color: var(--ink);
}

.fmt-editorial .ed-clause-toggle:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}

.fmt-editorial .ed-clause-term-sep {
  color: var(--muted);
  font-weight: 400;
}

.fmt-editorial .ed-flip-hint {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--muted);
  margin-top: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}

.fmt-editorial .ed-assess-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 2.4em;
}

.fmt-editorial .ed-assess-grid[data-collapsed] {
  grid-template-columns: 1fr;
  max-width: 600px;
}

@media (max-width: 680px) {
  .fmt-editorial .ed-assess-grid {
    grid-template-columns: 1fr;
  }
}

.fmt-editorial .ed-assess {
  border: 1.5px solid var(--line);
  background: var(--cream);
  padding: 18px 20px 20px;
}

.fmt-editorial .ed-assess-deferred {
  border-color: var(--clay);
}

.fmt-editorial .ed-assess-vendor {
  border-color: var(--ink);
}

.fmt-editorial .ed-assess-label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.fmt-editorial .ed-assess p {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.fmt-editorial .ed-assess-verdict {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.fmt-editorial .ed-assess-deferred .ed-assess-verdict {
  color: var(--clay);
}

.fmt-editorial .ed-assess-vendor .ed-assess-verdict {
  color: var(--text-primary);
}

/* ============================================================
   Added for vendor-finance-vs-bank-finance (PR64 batch 3): a
   "companion piece" card, an inline embedded preview of a sibling
   article (real linked H1 plus a one-line dek), for articles whose
   distinguishing feature is close cross-referencing to another piece
   in the series. General enough to reuse wherever a future article
   wants to feature one specific companion read inline rather than
   waiting for the footer's related-reading list. Scoped additively;
   nothing above this line is touched.
   ============================================================ */
.fmt-editorial .ed-companion {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 22px 26px 24px;
  margin: 1.8em 0;
}

.fmt-editorial .ed-companion-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 700;
  margin: 0 0 10px;
}

.fmt-editorial .ed-companion-title {
  font-family: var(--font-article);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: var(--fs-card);
  line-height: 1.3;
  margin: 0 0 8px;
}

.fmt-editorial .ed-companion-title a {
  color: var(--text-primary);
  text-decoration: none;
}

.fmt-editorial .ed-companion-title a:hover {
  color: var(--clay);
}

.fmt-editorial .ed-companion-dek {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-secondary);
  margin: 0;
}