/* Ecosystem page only: the approved 2026-10-22 redesign (docs/axiom/pages/proposals/ecosystem.md), built under
   docs/axiom/pages/proposals/IMPLEMENTATION-RULES.md, with the motion pilot's layouts (docs/motion/MOTION-AND-LAYOUT-SPEC.md
   D2, 2026-10-22): [01] SL-01 sticky split, [04] SL-04 product groups (now carousels), [06] SL-02 trio; [03] the stack
   and [05] the example were removed (owner, 2026-10-24) (the library is css/sections.css; the motion is data-motion in the page and css/motion.css).
   This file keeps only what is Ecosystem's own: the rows, tiles and steps' insides. Every font-size is a site.css type
   token; colours are site.css tokens: gold only (owner, 2026-10-22: "Wherever you use the blue, I want our brand gold
   color"): --gold-deep for the spine and rails, --gold-ink for the small numbers on white (5.32:1).
   Breakpoints: phone < 768, tablet 768-1199, desktop >= 1200, as the type scale. */

/* ---------- 01 The connected system: the head beside four layer rows on a gold spine (SL-01) ---------- */
.eco-map { display: grid; gap: 12px; }
.eco-map__row { display: grid; gap: 16px; padding: clamp(20px, 2vw, 28px); border-radius: var(--r-lg); background: var(--panel); }
.eco-map__text { display: grid; grid-template-columns: 3ch minmax(0, 1fr); column-gap: clamp(12px, 1.4vw, 20px); row-gap: 6px; align-items: baseline; }
.eco-map__n { font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.07em; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.eco-map__name { font-size: var(--t-h4); }
.eco-map__text p { grid-column: 2; color: var(--ink-2); max-width: 44ch; }
.eco-map__pills { padding-left: calc(3ch + clamp(12px, 1.4vw, 20px)); }
.eco-map__notes { margin-top: 4px; }
.eco-map__notes .footnote { margin-top: 0; }
/* brand: at most 65 characters a line; 65ch of Inter ran 84-85 (integration pass 2026-10-22), 44ch keeps it under */
.eco-map__note { margin-top: 12px; color: var(--ink-2); max-width: 44ch; }

/* the page's own text links: a 44px tall target without changing their look (the shared .link is its line box) */
.eco-pointer .link, .eco-legend__more .link { min-height: 44px; }

/* ---------- 02 Video: the shared frame and player, with a caption ---------- */
.eco-film__tag { margin-bottom: 24px; }
.eco-film__cap { margin-top: 14px; font-size: var(--t-cap); line-height: 1.5; color: var(--ink-2); }

/* ---------- 04 Products: the three Figma groups, each a heading over the product bento (SL-04) ---------- */
.eco-pointer { margin-top: 16px; }
.eco-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 5vw, 72px); }
/* each group a carousel (owner, 2026-10-24): the group may not grow to its row's full width */
.eco-group { min-width: 0; }
.eco-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: clamp(16px, 2vw, 32px); row-gap: 6px;
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.eco-group__title { font-size: var(--t-h3); }
.eco-group__line { color: var(--ink-2); max-width: 65ch; }
.eco-card__name { font-size: var(--t-h5); line-height: 1.15; }

/* ---------- 06 Status explained: one tile per status, the chip on top (SL-02 quad) ---------- */
.eco-legend__row > dt { display: flex; }
.eco-legend__row > dd { margin: 0; color: var(--ink-2); max-width: 65ch; }
.eco-legend__more { margin-top: clamp(28px, 3vw, 40px); }

/* ---------- phone < 768: one column in reading order ---------- */
@media (max-width: 767px) {
  .eco-map__text { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .eco-map__text p { grid-column: 1; }
  .eco-map__pills { padding-left: 0; }
}

/* owner, 2026-10-24: "Every layer." in the brand's wordmark gold; less room between the sections */
main > .section, main > .dsec { padding-block: clamp(36px, 4vw, 64px); }
.eco-groups { gap: clamp(32px, 3.4vw, 48px); }
/* the cards' picture: the product's emblem (or initials) on Midnight, as on the Marketplace */
.eco-card__mark { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--dark); }
.eco-card__mark img { width: 30%; height: auto; }
.eco-card__initials { color: var(--gold); font-family: var(--font-head); font-weight: 700; font-size: clamp(30px, 3vw, 46px); letter-spacing: 0.01em; }