/* ==========================================================================
   /ecosystem/* — the Vanar ecosystem roundtable hub on the marketing site.

   Loaded per-page via the `stylesheet` prop on Base.astro, the same way
   /kickstart carries kickstart.css.

   The hero and section chrome are NOT here: they use the site's own primitives
   (hero-sec, page-hero-h1, pill-cta, sec-light) with the inline styles copied
   from src/html/kickstart.html, so those pages and these move together. This
   file only covers the three things the site has no existing recipe for — the
   section switcher, the results grid, and the empty state.

   Everything below sits inside .sec-light, so --on / --on-dim / --accent are
   already the light-band values. No fresh hex.
   ========================================================================== */

/* ---- section switcher ---------------------------------------------------- */

.eco-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 40px;
}

.eco-switch a {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-dim);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.eco-switch a:hover {
  border-color: var(--accent);
  background: #ffffff;
  color: var(--on);
}

.eco-switch a[aria-current="page"] {
  background: var(--on);
  border-color: var(--on);
  color: #f4f7f2;
}

/* ---- results grid -------------------------------------------------------- */

/* Two or three across on a desktop rather than four. Each card carries a
   1200x630 announcement graphic, and at the old 288px floor that image was
   under 250px wide, too small to read the session title inside it.

   min() guards the narrow end: a bare 420px track does not shrink below its
   floor, so on a phone the grid would be wider than the screen and the page
   would scroll sideways.

   auto-fill, not auto-fit: with one card in a row auto-fit collapses the empty
   tracks and stretches it edge to edge, which reads as a banner rather than a
   card. */
.eco-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
}

/* Card shape for the entries the island renders. Matches the white cards in
   kickstart.css: white fill, hairline, generous radius, lift on hover. */
.eco-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--hair-2);
  border-radius: 20px;
  text-decoration: none;
  color: var(--on);
  transition: border-color 0.18s, transform 0.15s, box-shadow 0.2s;
}

.eco-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -22px rgba(11, 19, 14, 0.3);
}

.eco-card-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.eco-card-title {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0;
}

.eco-card-note {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--on-dim);
  margin: 0;
}

/* ---- empty / loading state ----------------------------------------------- */

/* One state serves both "still loading" and "nothing published yet". A visitor
   cannot act on the difference, and a hub that is unreachable should read as a
   quiet page rather than a broken one. */
.eco-empty {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(34px, 6vw, 56px) 28px;
  text-align: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--hair-2);
  border-radius: 22px;
  color: var(--on-dim);
}

.eco-empty p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.eco-empty p + p {
  margin-top: 10px;
}

.eco-empty a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* The hero copies kickstart's 80px inline gutter, which is too wide on a phone
   and cannot be overridden from the markup without repeating it per page. */
@media (max-width: 860px) {
  .eco-switch a { height: 38px; padding: 0 15px; font-size: 15px; }
}

/* ---- featured roundtable (landing) --------------------------------------- */

/* Rendered by public/ecosystem.js once the hub responds. The container starts
   life as .eco-empty and the script drops that class, so the dashed empty box
   never flashes behind real content. */
.eco-featured {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px);
  background: #ffffff;
  border: 1px solid var(--hair-2);
  border-radius: 22px;
  text-align: left;
}

.eco-featured-title {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.02;
  text-transform: uppercase;
  margin: 0;
  color: var(--on);
}

.eco-featured-topic {
  margin: 0;
  font-size: 17px;
  color: var(--on-dim);
}

.eco-featured-cta {
  align-self: flex-start;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--cta-violet-emerald);
  color: #f4f2ff;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ---- team verification --------------------------------------------------- */

.eco-verify {
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}

.eco-verify-label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dim-2);
  margin-bottom: 8px;
}

.eco-verify-row {
  display: flex;
  gap: 8px;
}

.eco-verify-row input {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 18px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  background: #ffffff;
  font: inherit;
  font-size: 16px;
  color: var(--on);
}

.eco-verify-row input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.eco-verify-row button {
  height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--on);
  color: #f4f7f2;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.eco-verify-result {
  max-width: 560px;
  margin: 18px auto 0;
  text-align: left;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--on-dim);
}

/* Green for a confirmed member, red for anyone else. The distinction is the
   whole point of the page, so it is carried by colour AND wording, never colour
   alone. */
.eco-verify-result.is-yes {
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(29, 94, 78, 0.3);
  background: rgba(124, 231, 176, 0.12);
  color: var(--on);
}

.eco-verify-result.is-no {
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(176, 42, 42, 0.28);
  background: rgba(214, 92, 92, 0.1);
  color: var(--on);
}

/* ---- one session (detail page) ------------------------------------------- */

/* The theme: the one line saying why this conversation is happening. It leads
   on the hub's own session page, so it leads here too rather than sitting in
   the body. */
.eco-rt-theme:not(:empty) {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  color: #51564F;
  max-width: 60ch;
  margin: 30px auto 0;
}

/* Date, time, duration, place, host — one line, wrapping on narrow screens. */
.eco-rt-metaline:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  max-width: 74ch;
  margin: 22px auto 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: #6A6F68;
}

.eco-rt-sep { margin: 0 12px; opacity: .45; }

.eco-rt-note:not([hidden]) {
  margin: 18px auto 0;
  font-size: 14px;
  color: #6A6F68;
}

/* ---- countdown ----------------------------------------------------------- */

.eco-rt-countdown {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 30px auto 0;
}

.eco-rt-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 74px;
  padding: 12px 10px;
  border: 1px solid rgba(11, 19, 14, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
}

.eco-rt-unit strong {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  /* Tabular figures: without them the seconds box jitters every tick as the
     glyph widths change. */
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.eco-rt-unit span {
  margin-top: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6A6F68;
}

/* ---- body ---------------------------------------------------------------- */

.eco-rt-cover {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 40px;
  border: 1px solid var(--hair-2);
  border-radius: 20px;
}

.eco-rt-h {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--on);
  margin: 46px 0 18px;
}

/* The first heading sits directly under the hero, so it needs no gap. */
.eco-rt-h:first-child { margin-top: 0; }

.eco-rt-lede {
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--on);
  margin: 0;
  white-space: pre-wrap;
}

.eco-rt-prose {
  font-size: 16px;
  line-height: 1.62;
  color: var(--on-dim);
  margin: 0;
  white-space: pre-wrap;
}

/* ---- agenda -------------------------------------------------------------- */

.eco-rt-questions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.eco-rt-questions li {
  padding-left: 18px;
  border-left: 2px solid var(--accent);
}

.eco-rt-questions li p {
  margin: 5px 0 0;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--on);
}

/* ---- guests -------------------------------------------------------------- */

.eco-guest-head { display: flex; align-items: center; gap: 12px; }

.eco-guest-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  background: rgba(11, 19, 14, 0.06);
}

.eco-guest-avatar.is-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--on-dim);
}

.eco-guest-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Host and Tentative: small, quiet, and always carried by words rather than
   colour alone. */
.eco-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--on);
  color: #F4F7F2;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eco-tag.is-soft {
  background: transparent;
  border: 1px solid var(--hair-2);
  color: var(--on-dim);
}

/* Links inside a card (a guest's X handle) inherit the card's colour rather
   than the browser's default blue, which reads as an error next to the muted
   palette everywhere else on the page. */
.eco-card a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* A guest card is a record, not a link — .eco-card's hover lift would promise a
   destination that is not there. */
.eco-card.eco-guest:hover {
  border-color: var(--hair-2);
  transform: none;
  box-shadow: none;
}

/* ---- hero CTAs ----------------------------------------------------------- */

/* The session page builds its buttons in JS, so the two treatments the hero
   uses are named here instead of repeated as inline styles per branch. */
.pill-cta.is-solid,
.pill-cta.is-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 30px;
  border-radius: 999px;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.pill-cta.is-solid {
  background: var(--cta-violet-emerald);
  color: #F4F2FF;
}

.pill-cta.is-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(11, 19, 14, 0.18);
}

/* ---- landing: secondary link under the featured card --------------------- */

.eco-featured-alt {
  align-self: flex-start;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-dim);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

@media (max-width: 860px) {
  .eco-rt-unit { min-width: 60px; padding: 10px 8px; }
  .eco-rt-unit strong { font-size: 24px; }
  .eco-rt-sep { margin: 0 8px; }
}

/* ---- apply form ---------------------------------------------------------- */

.eco-form {
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
}

/* Off-screen rather than display:none — a bot reading the DOM fills what it can
   see in the markup, and some skip anything hidden outright. */
.eco-hp {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

.eco-fieldset {
  margin: 0 0 20px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--hair-2);
  border-radius: 22px;
  background: #FFFFFF;
}

.eco-fieldset legend {
  padding: 0 10px;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px);
  text-transform: uppercase;
  color: var(--on);
}

.eco-field-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.eco-field { display: flex; flex-direction: column; gap: 6px; }

/* Full width regardless of how the auto-fit grid falls: long answers and the
   session picker read badly in a half-width column. */
.eco-field.is-wide { grid-column: 1 / -1; }

.eco-field-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dim-2);
}

.eco-field-label i { color: var(--accent); font-style: normal; margin-left: 3px; }

.eco-field-hint {
  margin: 4px 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-dim);
}

.eco-field input[type="text"],
.eco-field input[type="email"],
.eco-field textarea,
.eco-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hair-2);
  border-radius: 12px;
  background: #FFFFFF;
  font: inherit;
  font-size: 15.5px;
  color: var(--on);
}

.eco-field textarea { resize: vertical; min-height: 84px; }

.eco-field input:focus,
.eco-field textarea:focus,
.eco-field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* A rejected field is marked by its border AND by the message underneath, so
   the reason survives for anyone who cannot separate the two colours. */
.eco-field.is-bad input,
.eco-field.is-bad textarea,
.eco-field.is-bad select,
[data-apply-topics].is-bad .eco-topics {
  border-color: rgba(176, 42, 42, 0.55);
}

.eco-field-err:empty { display: none; }

.eco-field-err {
  font-size: 12.5px;
  line-height: 1.45;
  color: #B02A2A;
}

.eco-form-error:not([hidden]) {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(176, 42, 42, 0.28);
  border-radius: 14px;
  background: rgba(214, 92, 92, 0.1);
  font-size: 14.5px;
  color: var(--on);
}

/* ---- yes / no pills ------------------------------------------------------ */

.eco-pills { display: flex; gap: 8px; }

.eco-pill input { position: absolute; opacity: 0; pointer-events: none; }

.eco-pill span {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-dim);
  cursor: pointer;
}

.eco-pill input:checked + span {
  background: var(--on);
  border-color: var(--on);
  color: #F4F7F2;
}

.eco-pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- topic picker -------------------------------------------------------- */

.eco-topics {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--hair-2);
  border-radius: 16px;
}

.eco-topic {
  display: flex;
  gap: 11px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}

.eco-topic:hover { background: rgba(11, 19, 14, 0.03); }

.eco-topic input { margin-top: 3px; accent-color: var(--accent); }

.eco-topic:has(input:checked) {
  border-color: var(--accent);
  background: rgba(124, 231, 176, 0.1);
}

.eco-topic span { font-size: 14.5px; line-height: 1.45; color: var(--on); }

.eco-topic em {
  display: block;
  margin-bottom: 3px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dim-2);
}

/* ---- chosen session ------------------------------------------------------ */

.eco-chosen {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 16px 0;
  padding: 16px 18px;
  border: 1px solid var(--accent);
  border-radius: 16px;
  background: rgba(124, 231, 176, 0.09);
}

.eco-chosen strong { font-size: 16.5px; color: var(--on); }
.eco-chosen span { font-size: 13.5px; line-height: 1.5; color: var(--on-dim); }

/* ---- checkboxes + submit ------------------------------------------------- */

.eco-checks { display: grid; gap: 10px; margin-top: 16px; }

.eco-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.eco-check input { margin-top: 3px; accent-color: var(--accent); }
.eco-check span { font-size: 14.5px; line-height: 1.5; color: var(--on); }

.eco-form-foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}

.eco-form-foot .eco-field { width: 100%; max-width: 640px; text-align: left; }
.eco-form-foot button { border: 0; cursor: pointer; }
.eco-form-foot button[disabled] { opacity: .6; cursor: progress; }

.eco-done { text-align: center; align-items: center; }
.eco-done .eco-featured-cta { align-self: center; }

/* ---- section headings inside a content band ------------------------------ */

/* The landing page and the index stack several sections in one `sec-light`
   band. Two bands would show a seam: the band's gradient restarts per section,
   so the join is visible where they meet. */
.eco-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 64px 0 22px;
}

.eco-sec-head:first-child { margin-top: 0; }

.eco-sec-h {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--on);
  margin: 0;
}

.eco-sec-h.is-lead { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.02; }

.eco-sec-note {
  flex: 1 1 260px;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--on-dim);
}

.eco-sec-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.eco-count {
  margin: -8px 0 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dim-2);
}

/* ---- richer cards -------------------------------------------------------- */


.eco-card-cover {
  display: block;
  width: calc(100% + 44px);
  height: auto;
  margin: -22px -22px 4px;
  border-radius: 19px 19px 0 0;
  object-fit: cover;
}

.eco-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.eco-card-tags.is-wrap { margin: 0 0 20px; }

.eco-card-note.is-people {
  font-size: 13.5px;
  color: var(--on-dim-2);
}

/* Pushed to the bottom so a row of cards lines its actions up regardless of
   how much each one has to say. */
.eco-card-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 12px;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.eco-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hair-2);
  font-size: 13px;
}

/* ---- project cards ------------------------------------------------------- */

.eco-project-head { display: flex; align-items: flex-start; gap: 12px; }

.eco-project-logo {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  object-fit: cover;
  background: rgba(11, 19, 14, 0.06);
}

.eco-project-logo.is-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--on-dim);
}

.eco-project-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

/* ---- guest / project chips ----------------------------------------------- */

.eco-chips {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.eco-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--hair-2);
  border-radius: 16px;
  background: #FFFFFF;
  text-decoration: none;
  color: var(--on);
  transition: border-color .18s, transform .15s;
}

a.eco-chip:hover { border-color: var(--accent); transform: translateY(-2px); }

.eco-chip-id { min-width: 0; display: flex; flex-direction: column; }
.eco-chip-id strong { font-size: 14.5px; font-weight: 500; }

.eco-chip-id span {
  font-size: 12.5px;
  color: var(--on-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- why these conversations --------------------------------------------- */

.eco-why {
  display: grid;
  gap: 24px;
  margin: 64px 0 0;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--hair-2);
  border-radius: 24px;
  background: #FFFFFF;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.eco-why-body p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--on-dim); }

.eco-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--hair-2);
}

.eco-stat strong {
  display: block;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: var(--accent);
}

.eco-stat span {
  display: block;
  margin-top: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dim-2);
}

/* ---- closing invitation -------------------------------------------------- */

.eco-invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 64px 0 0;
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 48px);
  border-radius: 24px;
  background: var(--ink);
  text-align: center;
}

.eco-invite .eco-sec-h,
.eco-invite .eco-card-eyebrow { color: #F4F7F2; }

.eco-invite p {
  max-width: 58ch;
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(244, 247, 242, 0.72);
}

.eco-featured-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.eco-featured-actions .eco-featured-cta,
.eco-featured-actions .eco-featured-alt { align-self: auto; margin-top: 0; }

/* ---- verification warnings ----------------------------------------------- */

.eco-warnings {
  display: grid;
  gap: 16px;
  margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.eco-warnings .eco-card { text-align: left; }
.eco-warnings .eco-card:hover { border-color: var(--hair-2); transform: none; box-shadow: none; }

/* ==========================================================================
   NEXT ROUNDTABLE panel (public/ecosystem-featured.js)

   Dark on purpose. It sits inside the light content band and has to read as
   the one thing on the page you act on, and the hub's own version of this
   panel is dark, so the two surfaces announce a session the same way.
   Tokens are the dark-band values used elsewhere on this site, not the hub's.
   ========================================================================== */

.eco-fx {
  position: relative;
  overflow: hidden;
  margin: 0 0 8px;
  border-radius: 26px;
  background: var(--ink);
  isolation: isolate;
}

/* Glow and grid, matching the hero treatment on the page above it. */
.eco-fx::before,
.eco-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.eco-fx::before {
  background: radial-gradient(760px 460px at 88% -8%, rgba(124, 231, 176, 0.22), transparent 62%);
}

.eco-fx::after {
  background-image:
    linear-gradient(rgba(244, 247, 242, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 247, 242, 0.045) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 6%, #000 26%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 70% 6%, #000 26%, transparent 78%);
}

.eco-fx-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(26px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.eco-fx-main { min-width: 0; }
.eco-fx-side { min-width: 0; }

/* ---- left column --------------------------------------------------------- */

.eco-fx-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.eco-fx-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(244, 247, 242, 0.16);
  border-radius: 8px;
  background: rgba(244, 247, 242, 0.06);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(244, 247, 242, 0.62);
}

.eco-fx-chip.is-live {
  border-color: rgba(124, 231, 176, 0.4);
  background: rgba(124, 231, 176, 0.14);
  color: var(--accent);
}

.eco-fx-title {
  margin: 20px 0 0;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.eco-fx-theme {
  max-width: 46ch;
  margin: 20px 0 0;
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--accent);
}

.eco-fx-desc {
  max-width: 52ch;
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(244, 247, 242, 0.68);
}

.eco-fx-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 30px;
  font-size: 14px;
  color: rgba(244, 247, 242, 0.74);
}

.eco-fx-fact { display: inline-flex; align-items: center; gap: 8px; }
.eco-fx-fact svg { flex: none; color: var(--accent); }

/* ---- countdown ----------------------------------------------------------- */

.eco-fx-countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(244, 247, 242, 0.1);
}

.eco-cd-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 247, 242, 0.45);
}

.eco-cd-unit { display: inline-flex; align-items: baseline; gap: 2px; }

.eco-cd-unit strong {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  /* Tabular figures: without them the seconds jump sideways on every tick. */
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}

.eco-cd-unit i {
  font-style: normal;
  font-size: 12px;
  color: rgba(244, 247, 242, 0.45);
  margin-right: 10px;
}

/* ---- actions ------------------------------------------------------------- */

.eco-fx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.eco-fx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(244, 247, 242, 0.2);
  border-radius: 12px;
  background: transparent;
  color: #F4F7F2;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .18s, background .18s;
}

.eco-fx-btn:hover { border-color: rgba(124, 231, 176, 0.5); background: rgba(244, 247, 242, 0.06); }

.eco-fx-btn.is-solid {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}

.eco-fx-btn.is-solid:hover { background: #8FF3C4; border-color: #8FF3C4; }

/* ---- right column: the seats --------------------------------------------- */

.eco-fx-cover {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 24px;
  border: 1px solid rgba(244, 247, 242, 0.1);
  border-radius: 14px;
}

.eco-fx-side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.eco-fx-count {
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 247, 242, 0.4);
}

.eco-fx-seats { display: grid; gap: 10px; }

.eco-fx-seat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(244, 247, 242, 0.1);
  border-radius: 14px;
  background: rgba(244, 247, 242, 0.04);
  text-decoration: none;
  transition: border-color .18s, background .18s;
}

a.eco-fx-seat:hover {
  border-color: rgba(124, 231, 176, 0.32);
  background: rgba(244, 247, 242, 0.07);
}

/* An unfilled seat is drawn as an outline, so the difference between a person
   and a vacancy survives without reading the words. */
.eco-fx-seat.is-open {
  border-style: dashed;
  border-color: rgba(244, 247, 242, 0.14);
  background: transparent;
}

.eco-fx-avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  background: rgba(244, 247, 242, 0.08);
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
}

.eco-fx-avatar.is-open {
  border: 1px dashed rgba(244, 247, 242, 0.18);
  background: transparent;
  font-size: 13px;
  color: rgba(244, 247, 242, 0.3);
}

.eco-fx-seat-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }

.eco-fx-seat-id strong {
  font-size: 14.5px;
  font-weight: 500;
  color: #FFFFFF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eco-fx-seat-id span {
  font-size: 12.5px;
  color: rgba(244, 247, 242, 0.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eco-fx-seat.is-open .eco-fx-seat-id strong { color: rgba(244, 247, 242, 0.45); }
.eco-fx-seat.is-open .eco-fx-seat-id span { color: rgba(244, 247, 242, 0.3); }

.eco-fx-handle {
  flex: none;
  font-size: 12px;
  color: rgba(244, 247, 242, 0.4);
}

a.eco-fx-seat:hover .eco-fx-handle { color: var(--accent); }

.eco-fx-seatcta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

@media (max-width: 900px) {
  .eco-fx-grid { grid-template-columns: 1fr; }
  .eco-cd-unit strong { font-size: 25px; }
}

/* ==========================================================================
   Small screens and touch

   Measured on a 390px viewport: nothing overflows horizontally, so this is
   about what a finger can actually hit, plus one Safari behaviour worth
   designing around.

   Prose links inside a sentence are left alone. Growing an inline link to
   44px breaks the line it sits in, and a paragraph with 44px-tall words is a
   worse page than one with a small link in it.
   ========================================================================== */

@media (max-width: 900px) {
  /* iOS Safari zooms the page when a focused field's text is under 16px, and
     does not zoom back out afterwards. The apply form was at 15.5px, which is
     close enough to look identical and still trigger it. */
  /* The base rule is written as `.eco-field input[type="text"]`, so it carries
     an attribute selector this has to match to win.
     Text entry only: `.eco-field input[type]` would also catch the consent
     checkbox sitting in a .eco-field wrapper and stretch it to 44px tall. */
  .eco-field input[type="text"],
  .eco-field input[type="email"],
  .eco-field input[type="url"],
  .eco-field input[type="tel"],
  .eco-field textarea,
  .eco-field select,
  .eco-verify-row input {
    font-size: 16px;
    min-height: 44px;
  }

  /* Checkboxes and radios ship at 13px. The label beside them is part of the
     control, so the row is what gets the height rather than the box. */
  .eco-check,
  .eco-topic {
    min-height: 44px;
    align-items: center;
  }

  /* The box itself, not the pill. A .eco-pill's radio is visually hidden and
     its sibling span IS the control — sizing that span to 20px collapses the
     Yes/No pills into dots. */
  .eco-check input[type="checkbox"],
  .eco-check input[type="radio"],
  .eco-topic input[type="checkbox"] {
    flex: none;
    width: 20px;
    height: 20px;
  }

  /* Pills are the tappable thing in their own right. */
  .eco-pill span {
    min-height: 44px;
  }

  .eco-topic input {
    margin-top: 0;
  }

  /* Standalone actions: the section links ("All sessions →"), the seat call to
     action, and the links on a project card were 14-18px tall. */
  .eco-sec-link,
  .eco-fx-seatcta,
  .eco-featured-alt,
  .eco-card-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* A card's links sit in a row of their own, so the taller targets need the
     row to breathe rather than overlap. */
  .eco-card-links {
    gap: 4px 20px;
  }

  /* The heading and its "full archive" link stop sharing a baseline once the
     link is 44px tall. */
  .eco-sec-head {
    align-items: center;
  }
}