/* ==========================================================================
   PIEVAM WEBSITE VNEXT — Editorial visual system.

   Homepage structure: hero+problem -> sources/PIEVAM/answer product flow ->
   "Was PIEVAM kann" capability wall (on-page, grouped, not a separate site)
   -> one compact "Warum PIEVAM" section (trust + "no shortage of data"
   merged) -> contact -> footer.

   Typography discipline (binding, site-wide): four tiers only.
     1. Large editorial statement   — ed-display, serif, the big claims.
     2. Section heading             — sans, 600, ~24-30px desktop / 20-24px
                                       mobile. "Was macht PIEVAM?", "Was
                                       PIEVAM kann.", "Warum PIEVAM." all use
                                       this — never a tiny mono eyebrow.
     3. Normal content               — ~16-18px desktop, never below ~16px.
     4. Labels/legends               — ~14-16px, mono or sans, uppercase OK,
                                       but never illegible.
   Only genuine meta/technical provenance (the small "BEISPIELDATEN..."
   caption, the brand claim repeated as a quiet motif, copyright) stays
   smaller than that floor.

   Scope: homepage only (`body.ed-page`). Legal pages don't load this file.

   Colour system: the neutral scale is taken verbatim from the A2 "Soft
   Technical" v0.3 card tokens so the page and the real PIEVAM card share one
   ink system:
   channel-adapters/telegram-v3-beta/tokens/pievam-cards-a2-soft-technical-v03.mjs
   ========================================================================== */

body.ed-page {
  --ed-paper:      #F4F5F5;
  --ed-paper-deep: #E9ECED;
  --ed-paper-lift: #FFFFFF;
  --ed-paper-blue: #EDF1F3;

  --ed-ink-mark: #091118;

  --ed-hero-surface:   #173A4D;
  --ed-footer-surface: #182D3B;
  --ed-flow-surface:   #193F53;
  --ed-navy-lift:      #24566F;

  --ed-text:   #0D2733;
  --ed-text-2: #516873;
  --ed-text-3: #74868E;
  --ed-rule:      #C4CED2;
  --ed-rule-soft: #D8DDDF;

  --ed-on-ink:   #F7F8F8;
  --ed-on-ink-2: #93A4AC;
  --ed-on-ink-3: #46565E;
  --ed-rule-dark: #1E2C34;
  --ed-rule-navy: rgba(247, 248, 248, .18);

  --ed-red: #F06A5E; /* Signature Red — sparingly, see below */

  --ed-sans:  Manrope, Arial, sans-serif;
  --ed-serif: "Playfair Display", Georgia, serif;
  --ed-mono:  "DM Mono", ui-monospace, monospace;

  --ed-gutter: 88px;

  background: var(--ed-paper);
  color: var(--ed-text);
}

body.ed-page * { box-sizing: border-box; }
body.ed-page img, body.ed-page svg { display: block; max-width: 100%; }
body.ed-page a { color: inherit; text-decoration: none; }
body.ed-page ul, body.ed-page ol { margin: 0; padding: 0; list-style: none; }

body.ed-page .ed-display {
  font-family: var(--ed-serif);
  font-weight: 500;
  letter-spacing: -.018em;
  line-height: .96;
  margin: 0;
}
/* Tier 2: real section headings — sans, semibold, always clearly a heading,
   never mistaken for a technical label. Used for every section's own name:
   "Was macht PIEVAM?", "Was PIEVAM kann.", "Warum PIEVAM." */
body.ed-page .ed-h2 {
  margin: 0;
  font: 600 clamp(24px, 2.2vw, 28px)/1.25 var(--ed-sans);
  letter-spacing: -.005em;
}
body.ed-page .ed-mono {
  font: 500 11px/1 var(--ed-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ed-text-3);
}
body.ed-page .ed-mono--ondark { color: var(--ed-on-ink-3); }
body.ed-page .ed-dot { color: var(--ed-red); }

/* The signature point — PIEVAM's recurring brand marker, lifted from the
   mark itself. It closes a statement or a transformation; it is never a
   generic bullet. */
body.ed-page .ed-point {
  display: inline-block;
  width: .34em; height: .34em;
  margin-left: .5em;
  border-radius: 50%;
  background: var(--ed-red);
  vertical-align: baseline;
}
/* The availability dot is a different mark with a different rule: it always
   means exactly one thing ("available in PIEVAM today"), so it is always
   exactly the same physical size — fixed pixels, never em-relative, so it
   can never visually vary by surrounding font-size, tier or breakpoint. */
body.ed-page .ed-cap-dot {
  display: inline-block;
  width: 8px; height: 8px; min-width: 8px; min-height: 8px;
  border-radius: 50%;
  background: var(--ed-red);
  margin-right: 9px;
  vertical-align: middle;
  flex: 0 0 8px;
}

/* ==========================================================================
   NAV
   ========================================================================== */
body.ed-page .ed-nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 104px;
  padding: 0 var(--ed-gutter);
  background: var(--ed-paper);
}
body.ed-page .ed-nav-brand { display: inline-flex; align-items: center; }
body.ed-page .ed-nav-brand img { height: 21px; width: auto; }
body.ed-page .ed-nav-links { display: flex; align-items: center; gap: 40px; }
body.ed-page .ed-nav-links a {
  font: 600 13px/1 var(--ed-sans);
  letter-spacing: .01em;
  color: var(--ed-text-2);
  white-space: nowrap;
}
body.ed-page .ed-nav-links a:hover { color: var(--ed-text); }
body.ed-page .ed-nav-cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-left: 16px; color: var(--ed-text) !important;
}
body.ed-page .ed-nav-cta .ed-point { width: 6px; height: 6px; margin-left: 0; }
body.ed-page .ed-lang {
  display: inline-flex; align-items: center; gap: .38rem;
  color: var(--ed-text-3); font: 600 11px/1 var(--ed-mono);
  letter-spacing: .08em; flex: 0 0 auto;
}
body.ed-page .ed-lang a { padding: .3rem .1rem; color: inherit; }
body.ed-page .ed-lang a[aria-current="page"] { color: var(--ed-text); }
body.ed-page .ed-lang a:hover { color: var(--ed-text); }

/* ==========================================================================
   01 HERO — brand moment. CSS Grid: text column, problem block and brand-P
   panel are three named grid areas, the panel spanning both rows so the
   two-tone split survives while the text side is a normal, content-driven
   flow — no forced near-fullscreen height.
   ========================================================================== */
body.ed-page .ed-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "col    stage"
    "problem stage";
}
body.ed-page .ed-hero-stage {
  grid-area: stage;
  position: relative;
  overflow: hidden;
  background: var(--ed-hero-surface);
}
body.ed-page .ed-hero-mark { position: absolute; top: 8%; left: -8%; width: 150%; height: auto; }
body.ed-page .ed-hero-col {
  grid-area: col;
  padding: 108px 56px 0 var(--ed-gutter);
}
body.ed-page .ed-hero-copy { margin: 0; }
body.ed-page .ed-hero-title {
  font-size: clamp(34px, 3.9vw, 58px);
  line-height: 1.06;
}
body.ed-page .ed-hero-title span { display: block; }
body.ed-page .ed-hero-body {
  margin: .22em 0;
  max-width: 32ch;
  font-size: .68em;
  color: var(--ed-text-2);
}
body.ed-page .ed-hero-claim {
  margin: 32px 0 0;
  font: 500 12px/1 var(--ed-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-text-3);
}

body.ed-page .ed-hero-problem {
  grid-area: problem;
  padding: 32px 56px 64px var(--ed-gutter);
  margin-top: 40px;
  border-top: 1px solid var(--ed-rule);
}
body.ed-page .ed-hero-problem-label { margin: 0 0 16px; }
body.ed-page .ed-hero-problem-statement {
  margin: 0;
  max-width: 30ch;
  font-family: var(--ed-serif);
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.18;
  letter-spacing: -.012em;
  color: var(--ed-text);
}
body.ed-page .ed-hero-problem-text {
  margin: 16px 0 0;
  max-width: 54ch;
  font: 400 16px/1.6 var(--ed-sans);
  color: var(--ed-text-2);
}

/* ==========================================================================
   02 SOURCES -> PIEVAM -> ANSWER — geometry matched to the approved
   reference mockup (Toms_Mock.png): the three groups share one horizontal
   centre line (not top-aligned), and the gaps around the two arrows are
   real, generous space — part of the composition, not a squeezed seam.
   Column shares are the mockup's own measured proportions: sources ~21%,
   arrow gap ~10%, PIEVAM ~30%, arrow+dot gap ~11%, answer ~28%.
   ========================================================================== */
body.ed-page .ed-flow { padding: 112px 0 120px; background: var(--ed-flow-surface); color: var(--ed-on-ink); }
body.ed-page .ed-flow .ed-mono { color: #B7C9D4; }
body.ed-page .ed-flow-label { color: #B7C9D4 !important; }
body.ed-page .ed-flow-h {
  margin: 0 var(--ed-gutter) 48px;
  color: var(--ed-on-ink);
}
body.ed-page .ed-flow-grid {
  margin: 0 var(--ed-gutter);
  display: grid;
  grid-template-columns:
    minmax(0, 21fr)
    minmax(0, 10fr)
    minmax(0, 30fr)
    minmax(0, 11fr)
    minmax(0, 28fr);
  /* The mockup's three groups share one horizontal centre line. */
  align-items: center;
}
body.ed-page .ed-flow-label { color: var(--ed-on-ink-3); margin: 0 0 20px; }

/* Six separate inputs, each with a small reduced line-icon so they read as
   distinct signals arriving, not as a table of names. */
body.ed-page .ed-flow-sources ul { display: grid; gap: 11px; }
body.ed-page .ed-flow-sources li {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px;
  border: 1px solid rgba(247, 248, 248, .26);
  border-radius: 10px;
  background: rgba(247, 248, 248, .09);
  font: 500 16px/1.25 var(--ed-sans);
  color: var(--ed-on-ink);
}
body.ed-page .ed-flow-sources .ed-flow-icon {
  flex: 0 0 auto; width: 19px; height: 19px;
  stroke: #AEC0C9;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The two connectors: a visible arrow where the sources enter PIEVAM, a
   visible line ending in the one signature-red point where PIEVAM's
   reading becomes an answer. Each sits centred in its own generous gap
   column — free space on both sides, never touching a box edge. */
body.ed-page .ed-flow-arrow,
body.ed-page .ed-flow-connector {
  display: flex; justify-content: center;
  color: #93A9B5;
}
body.ed-page .ed-flow-arrow svg,
body.ed-page .ed-flow-connector svg { width: min(100%, 84px); height: 18px; display: block; }
body.ed-page .ed-flow-arrow svg line,
body.ed-page .ed-flow-arrow svg path,
body.ed-page .ed-flow-connector svg line {
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The centre is the real mark in a calm, clearly bounded layer — a compact
   engine, not an oversized showpiece: per the mockup, PIEVAM is the visual
   focal point through position and clarity, not through claiming 40% of
   the section. */
body.ed-page .ed-flow-core {
  text-align: center;
  padding: 40px clamp(18px, 2vw, 28px) 32px;
  background: rgba(247, 248, 248, .045);
  border: 1px solid rgba(247, 248, 248, .16);
  border-radius: 20px;
}
body.ed-page .ed-flow-core-logo { width: 100%; max-width: 240px; height: auto; margin: 0 auto; }
body.ed-page .ed-flow-core-claim {
  margin: 20px 0 0;
  font: 500 12px/1.4 var(--ed-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: #C6D5DE;
}
body.ed-page .ed-flow-verbs {
  margin: 24px auto 0;
  padding-top: 20px;
  max-width: 320px;
  border-top: 1px solid var(--ed-rule-navy);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
body.ed-page .ed-flow-verbs li {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font: 500 11px/1.2 var(--ed-mono);
  letter-spacing: .05em; text-transform: uppercase;
  color: #C6D5DE;
}
body.ed-page .ed-flow-verbs svg {
  width: 19px; height: 19px;
  stroke: #9FB4C1;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Right column: a real answer container, bordered like the PIEVAM panel. */
body.ed-page .ed-flow-answer-box {
  padding: 24px clamp(16px, 1.6vw, 22px) 20px;
  background: rgba(247, 248, 248, .045);
  border: 1px solid rgba(247, 248, 248, .16);
  border-radius: 18px;
}
body.ed-page .ed-thread { margin: 0; }
body.ed-page .ed-thread-question {
  margin: 0 0 12px;
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.32;
  color: #C6D5DE;
}
body.ed-page .ed-thread-verdict {
  margin: 0 0 18px;
  font: 400 16px/1.55 var(--ed-sans);
  color: var(--ed-on-ink);
}
body.ed-page .ed-thread-card { margin: 0; }
body.ed-page .ed-thread-card img {
  width: 100%; height: auto; display: block;
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(9, 17, 24, .36);
}
body.ed-page .ed-flow-answer-note {
  margin: 16px 0 0;
  font: 500 11px/1.5 var(--ed-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: #9FB4C1;
}

/* ==========================================================================
   03 WAS PIEVAM KANN — the capability wall, directly on the homepage,
   organised into four named groups so a visitor sees structure, not a word
   cloud. Two size tiers only: a handful of important capabilities read
   larger, everything else stays comfortably readable — never a third,
   near-illegible micro-tier.
   ========================================================================== */
body.ed-page .ed-cap-home { padding: 100px var(--ed-gutter) 108px; background: var(--ed-paper); }
body.ed-page .ed-cap-home-h { margin: 0; color: var(--ed-text); }
body.ed-page .ed-cap-home-lead {
  margin: 20px 0 0;
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 1.05;
  max-width: 15ch;
}
/* The transition line: small, quiet — it is not a statement, just the
   bridge into the second strong statement below it. */
body.ed-page .ed-cap-home-insight-intro {
  margin: 26px 0 0;
  font: 500 16px/1.4 var(--ed-sans);
  letter-spacing: .01em;
  color: var(--ed-text-3);
}
/* The second strong statement — nearly as large as "Die Funktionen liefern
   die Fakten.", two full lines ("DEINE Erkenntnisse." / "DEIN Gesamtbild."),
   same size for both, full contrast. This is not a subhead, it is the
   second half of the section's core claim. */
body.ed-page .ed-cap-home-insight {
  margin: 8px 0 0;
  font-size: clamp(32px, 4.2vw, 62px);
  line-height: 1.08;
  max-width: 17ch;
  color: var(--ed-text);
}
body.ed-page .ed-cap-home-meaning {
  margin: 26px 0 0;
  max-width: 48ch;
  font: 400 18px/1.58 var(--ed-sans);
  color: var(--ed-text-2);
}
body.ed-page .ed-cap-home-note {
  margin: 34px 0 0;
  font: 500 14px/1.5 var(--ed-mono);
  letter-spacing: .04em;
  color: var(--ed-text-3);
}
/* Both statuses that appear in the wall below, explained once, up front. */
body.ed-page .ed-cap-home-legend {
  margin: 16px 0 0;
  display: flex; flex-wrap: wrap;
  gap: 8px 24px;
}
body.ed-page .ed-cap-home-legend-item {
  display: inline-flex; align-items: center;
  font: 500 15px/1 var(--ed-sans);
  color: var(--ed-text-2);
}
body.ed-page .ed-cap-home-legend-item .ed-cap-dot { margin-right: 9px; }

/* Four groups, four columns on desktop. Each group: a quiet mono label,
   then its own list — available capabilities first, in-development ones
   appended at the end of the same list. One size, one colour, one line
   logic for every item in the wall; only the dot's colour marks status. */
body.ed-page .ed-cap-groups {
  margin: 52px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
}
body.ed-page .ed-cap-group-label {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ed-rule);
  font: 600 14px/1.3 var(--ed-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ed-text-3);
}
body.ed-page .ed-cap-group-list { display: grid; gap: 14px; }
body.ed-page .ed-cap-item {
  display: flex; align-items: baseline;
  font-family: var(--ed-serif);
  font-weight: 500;
  line-height: 1.22;
  color: var(--ed-text);
  font-size: clamp(20px, 1.8vw, 24px);
}
body.ed-page .ed-cap-item .ed-cap-dot { align-self: center; }
/* Neutral marker: same fixed size as the availability dot, different
   colour — clearly a point, clearly not "available today". */
body.ed-page .ed-cap-dot--neutral { background: var(--ed-text-3); }

/* ==========================================================================
   04 WARUM PIEVAM — trust and "no shortage of data" merged into one compact,
   substantial section.
   ========================================================================== */
body.ed-page .ed-trust { padding: 84px 0 88px; background: var(--ed-ink-mark); color: var(--ed-on-ink); }
body.ed-page .ed-trust-h2 { margin: 0 var(--ed-gutter) 20px; color: var(--ed-on-ink); }
body.ed-page .ed-trust-h {
  margin: 0 var(--ed-gutter);
  font-size: clamp(40px, 4.8vw, 68px);
  line-height: 1.04;
  color: var(--ed-on-ink);
}
body.ed-page .ed-trust-lead {
  margin: 32px var(--ed-gutter) 0;
  max-width: 48ch;
  font: 400 18px/1.55 var(--ed-sans);
  color: var(--ed-on-ink-2);
}
body.ed-page .ed-trust-terms {
  margin: 44px var(--ed-gutter) 0;
  padding-top: 26px;
  border-top: 1px solid var(--ed-rule-dark);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 28px;
}
body.ed-page .ed-trust-term {
  display: block; margin-bottom: 8px;
  font: 600 15px/1.2 var(--ed-sans);
  letter-spacing: .02em;
  color: var(--ed-on-ink);
}
body.ed-page .ed-trust-term-q {
  display: block;
  font: 400 15px/1.45 var(--ed-sans);
  color: var(--ed-on-ink-2);
}

body.ed-page .ed-about-section {
  margin: 56px var(--ed-gutter) 0;
  padding-top: 40px;
  border-top: 1px solid var(--ed-rule-dark);
  text-align: left;
}
body.ed-page .ed-about-h {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.16;
  color: var(--ed-on-ink);
}
body.ed-page .ed-about-text {
  margin: 14px 0 0;
  max-width: 44ch;
  font: 400 16px/1.55 var(--ed-sans);
  color: var(--ed-on-ink-2);
}
body.ed-page .ed-principles-row {
  margin: 28px 0 0;
  display: flex; flex-wrap: wrap;
  gap: 10px 32px;
}
body.ed-page .ed-principles-row li {
  font: 600 14px/1.2 var(--ed-sans);
  letter-spacing: .02em;
  color: var(--ed-on-ink-2);
}

/* ==========================================================================
   05 CONTACT — real addresses, no form.
   ========================================================================== */
body.ed-page .ed-contact { padding: 120px 0 140px; background: var(--ed-paper-lift); }
body.ed-page .ed-contact-h { margin: 0 var(--ed-gutter) 56px; font-size: clamp(38px, 4.4vw, 62px); line-height: 1.04; }
body.ed-page .ed-contact-grid {
  margin: 0 var(--ed-gutter);
  padding-top: 32px;
  border-top: 1px solid var(--ed-rule);
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: baseline;
  gap: 28px 48px;
}
body.ed-page .ed-contact-note { margin: 0; max-width: 34ch; font: 400 17px/1.6 var(--ed-sans); color: var(--ed-text-2); }
body.ed-page .ed-contact-links { display: flex; gap: 56px; flex-wrap: wrap; }
body.ed-page .ed-contact-links span { display: block; font: 500 11px/1 var(--ed-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ed-text-3); }
body.ed-page .ed-contact-links strong { display: block; margin-top: 10px; font: 400 18px/1 var(--ed-sans); color: var(--ed-text); }
body.ed-page .ed-contact-links a:hover strong { color: var(--ed-text-2); }

/* ==========================================================================
   06 FOOTER
   ========================================================================== */
body.ed-page .ed-close { padding: 130px 0 64px; background: var(--ed-footer-surface); color: var(--ed-on-ink); }
body.ed-page .ed-close-logo { margin: 0 var(--ed-gutter); width: min(620px, calc(100% - 2 * var(--ed-gutter))); height: auto; }
body.ed-page .ed-close-claim { margin: 74px var(--ed-gutter) 0; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.06; color: var(--ed-on-ink); max-width: 18ch; }
body.ed-page .ed-close-foot {
  margin: 110px var(--ed-gutter) 0;
  padding-top: 26px;
  border-top: 1px solid var(--ed-rule-navy);
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 12px 24px;
}
body.ed-page .ed-close-legal { display: flex; gap: 18px; flex-wrap: wrap; }
body.ed-page .ed-close-legal a { font: 500 11px/1 var(--ed-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ed-on-ink-3); }
body.ed-page .ed-close-legal a:hover { color: var(--ed-on-ink-2); }

/* Utility colours scoped to the homepage; legal pages keep styles.css. */
body.ed-page :focus-visible { outline: 2px solid var(--ed-red); outline-offset: 4px; }
body.ed-page ::selection { background: var(--ed-red); color: var(--ed-on-ink); }
body.ed-page .skip-link { background: var(--ed-red); color: var(--ed-on-ink); }

/* ==========================================================================
   TABLET — the five-column product graphic is the piece that breaks first.
   ========================================================================== */
@media (max-width: 1100px) {
  body.ed-page { --ed-gutter: 48px; }
  body.ed-page .ed-flow-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: stretch; }
  body.ed-page .ed-flow-arrow,
  body.ed-page .ed-flow-connector {
    width: 100%; height: 48px;
    display: flex; align-items: center; justify-content: center;
  }
  body.ed-page .ed-flow-arrow svg,
  body.ed-page .ed-flow-connector svg { width: 44px; height: 16px; transform: rotate(90deg); }

  body.ed-page .ed-cap-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   MOBILE — re-cut, not stacked. The sources -> PIEVAM -> answer graphic
   stays readable as a vertical sequence.
   ========================================================================== */
@media (max-width: 900px) {
  body.ed-page { --ed-gutter: 24px; }

  body.ed-page .ed-nav { height: auto; min-height: 76px; flex-wrap: wrap; row-gap: 10px; padding-top: 14px; padding-bottom: 14px; }
  body.ed-page .ed-nav-brand img { height: 18px; }
  body.ed-page .ed-nav-links {
    order: 3; width: 100%;
    flex-wrap: wrap;
    row-gap: 10px; column-gap: 18px;
  }
  body.ed-page .ed-nav-links a { font-size: 12px; }
  body.ed-page .ed-nav-cta { margin-left: 0; }

  body.ed-page .ed-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "col"
      "stage"
      "problem";
  }
  body.ed-page .ed-hero-col { padding: 0 var(--ed-gutter); }
  body.ed-page .ed-hero-copy { margin: 28px 0 38px; }
  body.ed-page .ed-hero-title { font-size: 28px; line-height: 1.22; }
  /* A calmer, explicit size instead of the desktop .68em ratio — the
     inherited ~19px was wrapping the explanation into 6+ short, choppy
     lines in a 342px column. 16px wraps it into 3 natural lines. */
  body.ed-page .ed-hero-body { max-width: none; font-size: 16px; margin: .3em 0; }
  body.ed-page .ed-hero-claim { margin-top: 22px; font-size: 11px; }
  /* The brand-P panel stays a strong element but no longer overwhelms the
     viewport: noticeably shorter, so the text carries the hero again. */
  body.ed-page .ed-hero-stage { height: 260px; }
  body.ed-page .ed-hero-mark { top: -40%; left: -12%; width: 95%; }
  body.ed-page .ed-hero-problem { margin-top: 0; padding: 34px var(--ed-gutter) 8px; }
  body.ed-page .ed-hero-problem-statement { font-size: 20px; max-width: none; }
  body.ed-page .ed-hero-problem-text { font-size: 16px; max-width: none; }

  body.ed-page .ed-flow { padding-top: 88px; padding-bottom: 92px; }
  body.ed-page .ed-contact { padding-top: 84px; padding-bottom: 90px; }
  body.ed-page .ed-trust { padding: 88px 0 92px; }

  body.ed-page .ed-flow-h { margin-bottom: 36px; font-size: 22px; }

  body.ed-page .ed-flow-core { padding: 36px 22px 30px; }
  body.ed-page .ed-flow-core-logo { max-width: 220px; }
  body.ed-page .ed-flow-core-claim { margin-top: 18px; }
  body.ed-page .ed-flow-verbs { margin-top: 22px; padding-top: 20px; gap: 8px; }
  body.ed-page .ed-flow-verbs li { font-size: 10px; gap: 8px; }
  body.ed-page .ed-flow-verbs svg { width: 18px; height: 18px; }

  body.ed-page .ed-flow-answer-box { padding: 22px 18px 18px; }
  body.ed-page .ed-thread-question { font-size: 17px; }
  body.ed-page .ed-thread-verdict { font-size: 16px; }

  body.ed-page .ed-cap-home { padding: 84px var(--ed-gutter) 92px; }
  body.ed-page .ed-cap-home-h { font-size: 22px; }
  body.ed-page .ed-cap-home-lead { font-size: 32px; max-width: none; }
  body.ed-page .ed-cap-home-insight-intro { margin-top: 22px; }
  body.ed-page .ed-cap-home-insight { font-size: 26px; max-width: none; }
  body.ed-page .ed-cap-home-meaning { font-size: 16px; }
  body.ed-page .ed-cap-groups { grid-template-columns: minmax(0, 1fr); margin-top: 40px; gap: 32px; }
  body.ed-page .ed-cap-item { overflow-wrap: break-word; word-break: break-word; font-size: 19px; }

  body.ed-page .ed-trust-h2 { font-size: 22px; }
  body.ed-page .ed-trust-h { font-size: 38px; }
  body.ed-page .ed-trust-lead { margin-top: 30px; font-size: 16px; }
  body.ed-page .ed-trust-terms { margin-top: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
  body.ed-page .ed-about-section { margin-top: 44px; padding-top: 32px; }
  body.ed-page .ed-about-h { font-size: 24px; max-width: none; }
  body.ed-page .ed-about-text { font-size: 16px; }
  body.ed-page .ed-principles-row { margin-top: 22px; gap: 10px 24px; }

  body.ed-page .ed-contact-h { margin-bottom: 44px; font-size: 32px; }
  body.ed-page .ed-contact-grid { flex-direction: column; align-items: flex-start; gap: 32px; }
  body.ed-page .ed-contact-links { gap: 28px; }

  body.ed-page .ed-close { padding: 88px 0 44px; }
  body.ed-page .ed-close-logo { width: calc(100% - 2 * var(--ed-gutter)); }
  body.ed-page .ed-close-claim { margin-top: 48px; font-size: 29px; max-width: none; }
  body.ed-page .ed-close-foot { margin-top: 72px; flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  body.ed-page * { scroll-behavior: auto !important; }
}