/* ─── PAGE SECTIONS ───────────────────────────────────────── */
.page { display: none; }
.page.active { display: block; }

/* SECTION SPINE — every section's vertical rhythm comes from this ONE
   inherited rule, driven by --section-pad (base.css). Hero & pipeline are
   the only sanctioned exceptions (they manage their own offsets).
   GROWTH: a new section type inherits the spine automatically; a genuine
   new exception joins THIS list — never a per-page inline override or a
   per-component padding re-declaration. */
section, aside.references { padding: var(--section-pad); }
section.pipeline { padding: 0; }
section.hero { padding: clamp(72px, 9vw, 120px) 32px clamp(64px, 8vw, 112px); }
@media (max-width: 720px) { :root { --section-y: 48px; } }

/* SECTION SURFACE SYSTEM — the ONLY sanctioned way a section gets a
   background. ORDERING CONTRACT: default cadence silk→tonal→silk→tonal;
   .surface--charcoal = high-contrast emphasis (max 1–2 per page);
   .surface--olive = research/grounds trust anchor (max 1 per page);
   .surface--spring = conversion exit only (exactly 1, last); never two
   identical adjacent. GROWTH: a section gets a ground by adding ONE class
   in markup; a genuinely new surface is added HERE — never re-declare
   `background` on a component, page rule, or inline style. */
.surface--silk     { background: var(--color-raw-silk); }
/* .surface--tonal previously carried a 1px olive-border hairline as
   between-sections marker, then a separate tonal-cream background
   (--color-tonal-silk) as a section-mood cue. Both are removed
   (2026-05-21, principal-designer pass): the .constellation five-dot
   divider is now the SOLE between-section cue. .surface--tonal stays
   in markup so the data-section semantics are preserved, but visually
   it's identical to silk — flat, no chrome competing with the dots. */
.surface--tonal    { background: var(--color-raw-silk); }
.surface--olive    { background: var(--color-olive);    color: var(--color-raw-silk); }
.surface--charcoal { background: var(--color-charcoal);  color: var(--color-raw-silk); }
.surface--spring   { background: var(--color-spring);    color: var(--color-charcoal); }
.surface--olive .label, .surface--charcoal .label,
.surface--olive .headline-secondary, .surface--charcoal .headline-secondary { color: var(--color-spring); }
.surface--olive h1, .surface--charcoal h1,
.surface--olive h2, .surface--charcoal h2 { color: var(--color-raw-silk); }
.surface--spring .label, .surface--spring h1, .surface--spring h2,
.surface--spring .headline-secondary, .surface--spring p { color: var(--color-charcoal); }

.page-offset { padding-top: var(--nav-h); }

/* ─── BACK TO TOP — consolidated base ─────────────────────────
   Was a 32-line block inlined in every professional page (index, about,
   how-it-works, research, who-its-for) AND a near-duplicate in pages-
   individual.css. Lifted here once: the unscoped rule is the pro base
   (olive pill, raw-silk icon); the [data-audience="individual"] override
   flips colours for individual pages. The .back-to-top--on-dark modifier
   below sits on top of both via specificity. */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--uguisu);
  color: var(--rawsilk);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), background var(--duration-fast) var(--ease-out), visibility 220ms;
  z-index: 100;
  box-shadow: 0 4px 14px rgba(26,22,8,0.18);
  padding: 0;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover { background: var(--color-olive-pressed); }
.back-to-top svg { display: block; }

[data-audience="individual"] .back-to-top { background: var(--dark); color: var(--peach); }
[data-audience="individual"] .back-to-top:hover { background: var(--color-charcoal-mid); }

/* Audit §07: dark-aware modifier — toggled from js/main.js when the section
   behind the button is a dark ground — flips the pill to a raw-silk fill
   with an olive icon and a faint silk ring. Specificity 0,2,0 beats either
   `.back-to-top` base regardless of stylesheet order. */
.back-to-top.back-to-top--on-dark {
  background: var(--color-raw-silk);
  color: var(--color-olive);
  box-shadow: 0 0 0 1px var(--color-raw-silk), 0 6px 16px rgba(0, 0, 0, 0.28);
}

/* ─── Language suggestion banner ──────────────────────────────────
   Bottom-left floating toast that offers to switch to the user's
   browser language when it doesn't match the page language. Sits
   on the opposite corner from the back-to-top pill so they never
   overlap. Injected by js/main.js on first eligible visit, hidden
   forever once dismissed. */
.lang-banner {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 32px);
  padding: 10px 8px 10px 16px;
  background: var(--color-charcoal, #1a1608);
  color: var(--color-raw-silk, #f2ead8);
  font-size: 13px;
  line-height: 1.3;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  animation: lang-banner-in 240ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.lang-banner--leaving {
  animation: lang-banner-out 200ms cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes lang-banner-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lang-banner-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(6px); }
}
.lang-banner__msg { flex: 1; min-width: 0; }
.lang-banner__cta {
  color: var(--color-spring, #a8c060);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  white-space: nowrap;
}
.lang-banner__cta:hover { opacity: 0.85; }
.lang-banner__close {
  background: none;
  border: none;
  color: var(--color-raw-silk, #f2ead8);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.7;
  border-radius: 4px;
}
.lang-banner__close:hover { opacity: 1; background: rgba(255, 255, 255, 0.06); }
@media (max-width: 520px) {
  .lang-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    font-size: 12.5px;
  }
}

/* ─── CONSOLIDATED CARD VOCABULARY ────────────────────────────
   Two-radius card system + 3 padding rungs, all on the canonical
   --radius-* / --space-* ladders. Signature compositions
   (.scene-card, .fn-medallion, .ppl) layer bespoke rules on top of
   these — declared before those rules so equal-specificity overrides
   in this file and the page files win by source order. */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);              /* 12px */
}
.card--emphasis { border-radius: var(--radius-xl); }      /* 16px */
.card--pad-compact { padding: var(--space-5) var(--space-4); }   /* 20 16 */
.card--pad-default { padding: var(--space-6) var(--space-8); }   /* 24 32 */
.card--pad-roomy   { padding: var(--space-8) var(--space-10); }  /* 32 40 */

/* proc-card: full-width process diagram surface (was inline). Bespoke
   warm ground + hairline kept; radius on the canonical ladder. */
/* Frameless: this diagram sits directly on the section silk, in the
   same fashion as the "What you observe is field data" cycle figure
   (no card matting, no border, no header rule). */
.proc-card {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 0;
}

/* ─── CONSOLIDATED PILL VOCABULARY ────────────────────────────
   The genuine sprawl was the radius (20/24/999). That — and only
   that — is unified here: one --radius-full source for every
   non-pipeline pill. Each pill keeps its own size/weight/colour
   facet (those were never uniform); the 4 reg hues + dark-context
   recolours are preserved verbatim. The pipeline I/O `.chip`
   (pages-professional.css:208) is a signature and deliberately NOT
   a member of this group. */
.reg-pill, .signal-pill, .tag, .principle-tag, .ind-scale-chip {
  border-radius: var(--radius-full);
}

/* signal-pill — interactive persona pill (was inline in index.html) */
.signal-pills { display: flex; flex-wrap: wrap; gap: 10px; }

/* ─── ROLE-CHIP — small persona/role tag (was inline in individual-how-it-works.html) ─── */
.role-chip {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.role-chip--peach  { background: rgba(224,160,122,0.28); color: #7A3E1F; border-color: rgba(224,160,122,0.45); }
.role-chip--spring { background: rgba(168,192,96,0.22); color: #3F4815; border-color: rgba(94,107,34,0.20); }
.role-chip--olive  { background: rgba(94,107,34,0.14); color: #3F4815; border-color: rgba(94,107,34,0.25); }
.role-chip--gold   { background: rgba(200,152,32,0.22); color: #6B4F10; border-color: rgba(200,152,32,0.32); }
.role-chip--sky    { background: rgba(123,167,188,0.25); color: #345566; border-color: rgba(123,167,188,0.38); }

/* ─── PROCESS-STEP-ICON — 88×88 rounded coloured anchor (was inline in who-its-for.html) ─── */
.process-step-icon { width: 88px; height: 88px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.process-step-icon--peach     { background: var(--color-peach); }
.process-step-icon--gold      { background: var(--color-gold); }
.process-step-icon--spring    { background: var(--color-spring); }
.process-step-icon--olive     { background: var(--color-olive); }
.process-step-icon--charcoal  { background: var(--color-charcoal); }

.signal-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px 8px 18px;
  border: 1.5px solid rgba(94,107,34,0.35);
  color: var(--uguisu);
  /* Audit 02: filled signal pills — pale spring fill, olive text/border. */
  background: color-mix(in srgb, var(--color-spring) 12%, transparent);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.signal-pill:hover { background: color-mix(in srgb, var(--color-spring) 22%, transparent); border-color: rgba(94,107,34,0.6); color: var(--uguisu); }
.signal-pill-arrow { flex-shrink: 0; opacity: 0.7; transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
.signal-pill:hover .signal-pill-arrow { transform: translateY(2px); opacity: 1; }

/* reg-pill — regulatory colour-coding (was inline in index.html).
   4 semantic hues + dark-context (.ctx-*) recolours kept verbatim. */
.reg-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  text-decoration: none;
  transition: opacity 150ms;
}
.reg-pill:hover { opacity: 0.75; }
.reg-pill--global  { background: rgba(200,152,32,0.1);  border: 1px solid rgba(200,152,32,0.35); color: #8A6010; }
.reg-pill--eu      { background: rgba(168,192,96,0.1);  border: 1px solid rgba(168,192,96,0.35); color: var(--uguisu); }
.reg-pill--en      { background: rgba(224,160,122,0.1); border: 1px solid rgba(224,160,122,0.35); color: #8A4A20; }
.reg-pill--other   { background: rgba(138,130,112,0.08); border: 1px dashed rgba(138,130,112,0.35); color: var(--mid); }
/* On-dark reg-pill recolours removed (2026-05-21): the regulatory block
   was demoted from charcoal to silk ground in line with the site-wide
   light-ground standard, so the base .reg-pill--* tokens at lines
   189-192 (designed for silk) now apply directly. */

/* ─── VISUAL PLACEHOLDER ──────────────────────────────────── */

/* ─── HERO ─────────────────────────────────────────────────── */
/* Hero padding is set on `section.hero` in the SECTION SPINE block above
   (it must out-specify the spine's `section` rule). This rule owns the
   hero's surface + stacking only. */
.hero { background: var(--rawsilk); position: relative; overflow: hidden; isolation: isolate; }
[data-audience="individual"] .hero { background: var(--hero-bg); }

/* Hero = headline/lede stacked above the illustration. The illustration
   is now the .nc four-step stepper (see HERO STEPPER block below). */
.hero-inner {
  max-width: var(--w-default);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero-content {
  max-width: 100%;
}

/* Audit 05: .hero-eyebrow removed — it was the lede in disguise. */
/* .hero-signature is the one full-Garamond line (homepage hero). The
   line break is markup-controlled by a literal <br> inside the H1 —
   no measure cap is needed here (the parent .hero-inner provides the
   natural ceiling at var(--w-default) = 1180px). The previous 40ch
   cap was clipping the longer half because the italic Garamond ch
   unit is narrower than the rendered char width.
   Colour stays context-driven: .hero h1 is charcoal on the light
   hero ground. */
.hero-signature { max-width: none; }
.hero h1 { color: var(--dark); }

/* ─── PROFESSIONAL PAGE COMPONENTS ───────────────────────── */
/* .impact ground comes from the .surface--tonal class in markup (demoted
   from charcoal so .regulatory is the page's single dark punch). Children
   are on-light: olive headings, secondary-dark body. */
.impact-headline { margin-bottom: 56px; }
.impact-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.impact-col h3 { font-size: var(--text-lg); color: var(--uguisu); margin-bottom: 14px; letter-spacing: var(--tracking-normal); font-weight: 500; }
.impact-col p { font-size: var(--text-sm); color: var(--fg-secondary); line-height: var(--leading-relaxed); max-width: var(--measure); }
.impact-col p + p { margin-top: 10px; }
/* (Motif-row sizing — Audit 06/§2 — lives in the per-page inline <style>
   which overrides this file; spec applied there.) */

/* Audit 06/§8: the form is the moment of decision — frame it. Tonal-silk
   card with a 1px olive hairline, sitting on the loud-spring CTA ground. */
.research-cta .research-form,
.individual-cta .research-form {
  background: var(--tonal-silk);
  border: 1px solid var(--olive-border);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 40px);
}

/* .reasoning / .serves grounds come from .surface--* in markup. */
.reasoning-intro { max-width: var(--w-narrow); margin-bottom: 64px; }
.reasoning-intro h2 { margin-bottom: 20px; }
.reasoning-intro p { font-size: var(--text-lg); line-height: var(--leading-loose); }

.serves-intro { max-width: var(--w-narrow); margin-bottom: 48px; }
.serves-intro h2 { margin-bottom: 18px; }
.serves-intro p { font-size: var(--text-base); color: var(--fg-secondary); }
/* ─── AUDIENCE TABS — uniform tile grid ───────────────────────────────
   2026-05-21: rebuilt from a hairline-underline row to a uniform tile
   grid. The previous design used .active to change the SHAPE of the
   selected tab (olive box) while the inactive four were transparent
   text+icon stacks — they read as floating, not as siblings of the
   selected one. Now every tab is the same tile; .active only swaps
   the fill. Per-audience identity colour stays on the inner icon
   tile (see :nth-child below) so the diagram-colour-language still
   reads in both states.

   Desktop ≥720px: 5 equal columns, one row.
   Phone <720px: single-column stack so the 5th tile never orphans
   into an asymmetric grid (previous 2-col phone layout left
   Infrastructure operators alone on row 3). */
.tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  border-bottom: none;
  margin-bottom: 0;
}
.tab-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  min-height: 88px;
  background: var(--color-tonal-silk);
  border: 1px solid var(--olive-hairline);
  border-radius: 10px;
  color: var(--dark);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  white-space: normal;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.tab-btn:hover {
  background: var(--color-raw-silk-dark);
  border-color: var(--olive-border);
}
/* Soft active state — tonal olive tint + olive hairline, text stays dark.
   The colored icon medallion already signals which tab is active; the tile
   doesn't need to shout. */
.tab-btn.active,
.tab-btn[aria-current="true"] {
  background: color-mix(in srgb, var(--color-olive) 10%, var(--color-tonal-silk));
  color: var(--dark);
  border-color: var(--color-olive);
}
/* Each tab's icon is a mini segment roundel — its audience signal hue.
   These survive both inactive and active states. */
.tabs .tab-btn svg {
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 9px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: box-shadow 200ms ease;
}
.tabs .tab-btn.active svg,
.tabs .tab-btn[aria-current="true"] svg { box-shadow: 0 0 0 1.5px var(--color-olive); }
.tabs .tab-btn:nth-child(1) svg { color: var(--color-raw-silk); background: var(--color-olive); }
.tabs .tab-btn:nth-child(2) svg { color: var(--color-spring);   background: var(--color-charcoal); }
.tabs .tab-btn:nth-child(3) svg { color: var(--color-charcoal); background: var(--color-gold); }
.tabs .tab-btn:nth-child(4) svg { color: var(--color-olive);    background: var(--color-peach); }
.tabs .tab-btn:nth-child(5) svg { color: var(--color-olive);    background: var(--color-spring); }
@media (max-width: 720px) {
  .tabs { grid-template-columns: 1fr; gap: 8px; }
  .tab-btn {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    padding: 10px 12px;
    gap: 12px;
  }
  .tabs .tab-btn svg { width: 32px; height: 32px; }
}
.tab-panel { display: none; padding: 48px 0 0; }
.tab-panel.active,
.tab-panel[data-active="true"] { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.tab-argument h3 { font-size: var(--text-2xl); margin-bottom: 20px; color: var(--dark); }
.tab-argument p { font-size: var(--text-base); line-height: var(--leading-loose); color: var(--color-charcoal-mid); max-width: var(--measure); }
.tab-detail h4 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--uguisu); margin-bottom: 20px; }
.tab-list { list-style: none; margin-bottom: 36px; }
.tab-list li { font-size: var(--text-sm); line-height: var(--leading-relaxed); padding: 14px 0 14px 16px; color: var(--color-charcoal-mid); position: relative; }
.tab-list li::before { content: '—'; position: absolute; left: 0; color: var(--spring); font-size: var(--text-xs); }
.pressure-item { }
.pressure-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; cursor: pointer; gap: 16px; width: 100%; margin: 0; background: none; border: none; font: inherit; color: inherit; text-align: left; }
.pressure-header svg { color: var(--uguisu); flex-shrink: 0; transition: transform var(--duration-normal) var(--ease-in-out); }
.pressure-item.open .pressure-header svg { transform: rotate(180deg); }
.pressure-title { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--dark); }
.pressure-body { display: none; padding: 0 0 16px; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--mid); }
.pressure-item.open .pressure-body { display: block; }

/* .regulatory ground = .surface--silk in markup (2026-05-21: demoted
   from charcoal to silk in line with the site-wide light-ground
   standard — the "Practitioners who establish the ecological reasoning
   layer now…" statement now reads as a calm silk band, not a dark
   emphasis punch). On-silk text colours are set on the .ctx-* rules
   in pages-professional.css. */
.frameworks-list { display: none; padding: 24px; border-top: 1px solid rgba(168,192,96,0.2); }
.frameworks-list.open { display: block; }
.timeline-collapsible { display: none; border-top: 1px solid rgba(168,192,96,0.2); }
.timeline-collapsible.open { display: block; }

/* ─── RESEARCH CTA / FORM ─────────────────────────────────── */
/* Audit §04: the closing CTA was a full spring-green wall (~744px) that
   out-saturated the footer and out-shouted the team copy above it.
   Demoted to a calm tonal-silk ground (.surface--tonal in markup);
   spring is retained only as a left-edge accent rule + the submit pill.
   Copy now uses the site's normal tonal text colours — the old
   charcoal-on-spring overrides are no longer needed. */
.research-cta { border-left: 3px solid var(--color-spring); }
.research-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; }
.research-copy h2 { margin-bottom: 22px; max-width: 22ch; }
.research-copy p { font-size: var(--text-base); line-height: var(--leading-loose); color: var(--fg-secondary); }
.research-note { font-size: var(--text-sm); color: var(--mid); margin-top: 28px; font-style: italic; }
.research-contact { font-size: var(--text-sm); color: var(--fg-secondary); margin-top: 14px; }
.research-contact a { color: var(--color-olive); text-decoration: underline; text-underline-offset: 3px; }
.research-contact a:hover { color: var(--color-charcoal); }
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--uguisu); margin-bottom: 8px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 12px 16px; background: var(--bg-surface);
  border: 1px solid var(--olive-border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--dark);
  transition: border-color 200ms; outline: none; -webkit-appearance: none;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--uguisu); }
.form-field textarea { resize: vertical; min-height: 100px; }
.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E6B22' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.form-optional { font-size: var(--text-2xs); color: var(--mid); margin-left: 8px; font-style: italic; text-transform: none; letter-spacing: var(--tracking-normal); font-weight: 400; }
/* Submit confirmation — solid spring card so it lands prominently when
   the form fades out. Was a near-invisible olive-hairline panel before
   real users reported seeing "empty space" after submit. */
.form-success {
  display: none;
  padding: 28px 28px 30px;
  background: var(--color-spring);
  border: none;
  border-radius: var(--radius);
  color: var(--color-charcoal);
  margin-top: 4px;
}
.form-success__title {
  font-family: var(--font-display, var(--font-body));
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--color-charcoal);
}
.form-success__body {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  margin: 0;
  color: var(--color-charcoal);
}
.form-error {
  display: none;
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(217, 119, 87, 0.12);
  border-left: 3px solid var(--color-peach, #d97757);
  border-radius: 4px;
  color: var(--color-charcoal);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.btn[type="submit"]:disabled {
  opacity: 0.7;
  cursor: progress;
}

/* ─── INDIVIDUAL CTA ──────────────────────────────────────── */
/* Audit 02/03: the loud-spring CTA is consistent across audiences.
   Charcoal copy, olive submit (peach is the individual accent everywhere
   else, but the one loud moment is unified). */
.individual-cta { background: var(--color-spring); }
.individual-cta .label,
.individual-cta .research-copy h2,
.individual-cta .research-copy p,
.individual-cta .headline-secondary { color: var(--color-charcoal); }
.individual-cta .form-field label { color: var(--color-charcoal); }
.individual-cta .form-field input:focus, .individual-cta .form-field select:focus, .individual-cta .form-field textarea:focus { border-color: var(--uguisu); }
.individual-cta .btn--primary { background: var(--uguisu); border-color: var(--uguisu); color: var(--rawsilk); }
.individual-cta .btn--primary:hover { background: var(--color-olive-pressed); border-color: var(--color-olive-pressed); }
.individual-cta .research-note { color: var(--color-charcoal-mid); }
.individual-cta .form-field input, .individual-cta .form-field select, .individual-cta .form-field textarea { border-color: rgba(26,22,8,0.22); }

/* Audit 02: affirmative numerals on silk — italic Garamond, spring-dark.
   Gold stays for cautionary numbers; spring for gains/retention/recovery. */
.stat--affirmative {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-spring-dark);
}

/* ─── INDIVIDUAL PAGE — NEW SECTION STYLES ───────────────── */

/* Hero — individual */

/* Who it serves */
/* .ind-serves ground = .surface--* in markup; padding inherited from the section spine. */

/* For Whom — driver + scale (Direction 2) */
.ind-driver-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-8);
}
.ind-driver-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ind-driver-art {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.ind-driver-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--uguisu);
  margin-bottom: 0;
  letter-spacing: var(--tracking-normal);
}
.ind-driver-label strong {
  display: block;
  font-weight: 600;
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}
.ind-driver-reveal {
  display: block;
  font-weight: 400;
  font-size: var(--text-base);
  color: var(--fg-secondary);
}

.ind-scale-strip {
  margin-top: 32px;
  padding: var(--space-6);
  background: var(--olive-tint);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}
.ind-scale-strip-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--uguisu);
  letter-spacing: var(--tracking-normal);
  flex-shrink: 0;
  margin: 0;
}
.ind-scale-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}
.ind-scale-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--text-sm);
  padding: 6px 12px;
  background: var(--bg-surface);
  color: var(--uguisu);
  border: 1px solid var(--olive-border);
  white-space: nowrap;
  flex: 1;
  text-align: center;
}

@media (max-width: 980px) {
  .ind-driver-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ind-driver-grid { grid-template-columns: 1fr; }
}

/* How it works — explainers */
/* .ind-works ground = .surface--* in markup; padding inherited from the section spine. */
.ind-explainer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin: 0 auto 48px; max-width: var(--w-default); }
.ind-explainer-box { background: var(--bg-surface); border: 1px solid rgba(224,160,122,0.15); border-radius: var(--radius-lg); overflow: hidden; padding: var(--space-2) var(--space-1) var(--space-3); }
.ind-explainer-box h3 { font-family: var(--font-body); font-style: normal; font-weight: 500; font-size: var(--text-lg); color: var(--accent); margin: 20px 28px 14px; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
.ind-explainer-box p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-charcoal-mid); margin: 0 28px 16px; max-width: var(--measure); }
.ind-explainer-box p.lede { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--fg-secondary); font-weight: 450; margin-bottom: 18px; }
.ind-explainer-box p:last-child { margin-bottom: 24px; }

.ind-explainer-box .disclose--inline { margin: 2px 28px 24px; }
.ind-explainer-box .disclose--inline > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-normal);
  color: var(--uguisu);
  padding: 4px 0;
  transition: color var(--duration-fast) var(--ease-out),
              gap var(--duration-normal) var(--ease-out);
}
.ind-explainer-box .disclose--inline > summary::-webkit-details-marker { display: none; }
.ind-explainer-box .disclose--inline > summary:hover {
  color: var(--color-olive-deep);
  gap: 10px;
}
.ind-explainer-box .disclose--inline > summary:hover .disclose-label-more,
.ind-explainer-box .disclose--inline > summary:hover .disclose-label-less {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.ind-explainer-box .disclose--inline > summary:focus-visible {
  outline: 2px solid var(--uguisu);
  outline-offset: 3px;
  border-radius: 2px;
}
.ind-explainer-box .disclose-chev {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-normal) var(--ease-out);
  margin-top: -3px;
}
.ind-explainer-box .disclose--inline[open] .disclose-chev {
  transform: rotate(-135deg);
  margin-top: 2px;
}
.ind-explainer-box .disclose-label-less { display: none; }
.ind-explainer-box .disclose--inline[open] .disclose-label-more { display: none; }
.ind-explainer-box .disclose--inline[open] .disclose-label-less { display: inline; }
.ind-explainer-box .disclose--inline > p,
.ind-explainer-box .disclose--inline > p:last-child { margin: 14px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .ind-explainer-box .disclose-chev,
  .ind-explainer-box .disclose--inline > summary { transition: none; }
}

/* Commons — dark section */

/* Commons steps */

/* Why it matters */
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 48px; }
.reason { padding-top: 24px; }
.reason h3 { font-family: var(--font-body); font-style: normal; font-weight: 500; font-size: var(--text-xl); color: var(--dark); margin-bottom: 12px; letter-spacing: var(--tracking-snug); }
.reason p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-charcoal-mid); margin: 0; max-width: var(--measure); }

/* ─── INDIVIDUAL · OBSERVATION CYCLE DIAGRAM ─────────────────── */
/* Two-column layout: sticky pull-quote on the left, diagram on the right. */
.ind-cycle-wrap {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2.7fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
  margin: 48px auto 24px;
}
.ind-cycle-aside {
  align-self: center;          /* vertically centre against the figure */
  padding: 0;
  text-align: left;
}
.ind-cycle-heading {
  font-family: var(--font-display, var(--font-body));
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--olive, var(--color-charcoal-mid));
  margin: 0 0 14px;
  max-width: 22ch;
}
.ind-cycle-heading em {
  font-style: italic;
  font-weight: 500;
  color: var(--peach);
}
.ind-cycle-pullquote {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--color-charcoal-mid);
  margin: 0;
  max-width: 32ch;
}
.ind-cycle-pullquote + .ind-cycle-pullquote {
  margin-top: 14px;
}
.ind-cycle-pullquote em {
  font-style: normal;
  font-weight: 600;
  color: var(--peach);
}

.ind-cycle {
  position: relative;
  width: 100%;
  max-width: 940px;
  margin: 0;
  aspect-ratio: 940 / 800;
  /* establish a query container so the node icons can scale with
     the diagram's actual rendered width (since the column is narrower
     than 940px in the side-by-side layout) */
  container-type: inline-size;
}
.ind-cycle-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Each node is absolutely positioned by its icon centre.
   Coordinates match the SVG viewBox so the arrows line up. */
.ind-cycle-node {
  position: absolute;
  width: 178px;
  text-align: center;
  transform: translate(-50%, 0);
}

/* viewBox is 940 × 800. Each node icon centre maps to (left%, top%).
   top % positions the TOP of the icon (centre − icon-radius). */
.ind-cycle-node.n1 { left: 50.0%;  top: 11.75%; }  /* centre (470, 160) */
.ind-cycle-node.n2 { left: 74.3%;  top: 32.50%; }  /* centre (698, 326) */
.ind-cycle-node.n3 { left: 65.0%;  top: 66.00%; }  /* centre (611, 594) */
.ind-cycle-node.n4 { left: 35.0%;  top: 66.00%; }  /* centre (329, 594) */
.ind-cycle-node.n5 { left: 25.7%;  top: 32.50%; }  /* centre (242, 326) */

.ind-cycle-icon {
  position: relative;
  /* 132 / 940 ≈ 14.04% of the figure's rendered width — this keeps the
     icon's edge exactly tangent to the SVG arrow endpoints at every size. */
  width: clamp(96px, 14.04cqw, 132px);
  height: clamp(96px, 14.04cqw, 132px);
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1.5px solid var(--olive-border-strong);
  box-shadow: 0 1px 0 var(--olive-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ind-cycle-icon svg {
  width: 86%;
  height: 86%;
  display: block;
}
.ind-cycle-num {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-olive);
  color: var(--bg-surface);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-surface);
}

.ind-cycle-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--color-olive);
  margin: 0 0 4px;
}
.ind-cycle-sub {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-olive);
  opacity: 0.7;
  margin: 0;
}

/* Tags: hidden by default, revealed on hover / focus / when the
   node has keyboard focus inside it. Keeps the default diagram clean
   while still surfacing the detail when invited. */
.ind-cycle-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-3px);
  transition: opacity 0.22s ease,
              max-height 0.32s ease,
              transform 0.22s ease,
              margin-top 0.22s ease;
}
.ind-cycle-node:hover .ind-cycle-tags,
.ind-cycle-node:focus-within .ind-cycle-tags {
  opacity: 1;
  max-height: 140px;
  margin-top: 10px;
  transform: translateY(0);
}
.ind-cycle-tags span {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-olive-darkest);
  background: var(--bg-surface);
  border: 1px solid var(--olive-border-strong);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* For the side nodes (n2 upper-right, n5 upper-left), the title would
   otherwise sit on the dashed guide ring. Position their text block
   beside the icon — outside the ring — instead. Width scales with the
   figure (~140 viewBox units of available space at full size). */
.ind-cycle-node.n2 .ind-cycle-text,
.ind-cycle-node.n5 .ind-cycle-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(112px, 14.9cqw, 140px);
}
.ind-cycle-node.n2 .ind-cycle-text {
  /* offset = half-icon (matches icon's clamp size) + 14px gap */
  left: calc(50% + clamp(48px, 7.02cqw, 66px) + 14px);
  text-align: left;
}
.ind-cycle-node.n5 .ind-cycle-text {
  right: calc(50% + clamp(48px, 7.02cqw, 66px) + 14px);
  text-align: right;
}
.ind-cycle-node.n2 .ind-cycle-tags { justify-content: flex-start; }
.ind-cycle-node.n5 .ind-cycle-tags { justify-content: flex-end; }

/* Subtle hover affordance on the icon itself */
.ind-cycle-icon {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ind-cycle-node:hover .ind-cycle-icon,
.ind-cycle-node:focus-within .ind-cycle-icon {
  transform: scale(1.035);
  box-shadow: 0 2px 10px var(--olive-hairline);
  border-color: var(--olive-border-strong);
}

/* Tablet — stack aside above the diagram once the side-by-side
   layout starts squeezing the diagram column. */
@media (max-width: 1024px) {
  .ind-cycle-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ind-cycle-aside {
    align-self: auto;
    text-align: center;
  }
  .ind-cycle-heading {
    margin-left: auto;
    margin-right: auto;
    max-width: 28ch;
  }
  .ind-cycle-pullquote {
    margin-left: auto;
    margin-right: auto;
    max-width: 56ch;
  }
}

/* Narrower nodes when the diagram itself becomes cramped */
@media (max-width: 900px) {
  .ind-cycle-node { width: 162px; }
  .ind-cycle-title { font-size: var(--text-sm); }
  .ind-cycle-sub { font-size: var(--text-xs); }
  .ind-cycle-tags span { font-size: var(--text-2xs); padding: 2.5px 7px; }
}

/* Mobile — abandon the pentagon, stack vertically.
   The arrows + central motif are hidden; a slimmer vertical
   numbered list does the same narrative job. */
@media (max-width: 760px) {
  .ind-cycle {
    aspect-ratio: auto;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    margin: 40px auto 16px;
  }
  .ind-cycle-bg { display: none; }
  .ind-cycle-node,
  .ind-cycle-node.n1,
  .ind-cycle-node.n2,
  .ind-cycle-node.n3,
  .ind-cycle-node.n4,
  .ind-cycle-node.n5 {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 320px;
  }
  .ind-cycle-icon { width: 120px; height: 120px; margin-bottom: 12px; }
  /* Reset the side-positioned text for n2 / n5 to the default flow. */
  .ind-cycle-node.n2 .ind-cycle-text,
  .ind-cycle-node.n5 .ind-cycle-text {
    position: static;
    transform: none;
    width: auto;
    text-align: center;
  }
  .ind-cycle-node.n2 .ind-cycle-tags,
  .ind-cycle-node.n5 .ind-cycle-tags { justify-content: center; }
  /* No hover on touch — always show tags */
  .ind-cycle-tags {
    opacity: 1;
    max-height: none;
    margin-top: 10px;
    transform: none;
    overflow: visible;
  }
  /* Subtle connector between stacked nodes */
  .ind-cycle-node + .ind-cycle-node {
    padding-top: 24px;
    background-image: linear-gradient(var(--olive-border-strong), var(--olive-border-strong));
    background-repeat: no-repeat;
    background-size: 1px 20px;
    background-position: top center;
  }
}

/* ─── TOAST ──────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--dark); color: var(--rawsilk); font-size: var(--text-sm);
  padding: 12px 24px; border-radius: 24px; z-index: 2000;
  transition: transform 300ms ease; pointer-events: none;
  border: 1px solid rgba(168,192,96,0.3);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer { background: var(--dark); padding: 40px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-wordmark .nav-wm-peren { font-size: 24px; }
.footer-wordmark .nav-wm-os    { font-size: 16px; }
.footer-meta { font-size: var(--text-xs); color: var(--on-dark-body); text-align: right; line-height: var(--leading-loose); }
.footer-meta a { color: var(--on-dark-2); text-decoration: none; }
.footer-meta a:hover { color: var(--rawsilk); }
/* Footer strapline — keep below wordmark */
.footer-strapline { font-family: var(--font-body); font-size: 9px; font-weight: 400; letter-spacing: 0.12em; color: var(--spring); opacity: 0.6; display: block; margin-top: 4px; }

/* ─── FOCUS STATES ──────────────────────────────────────────── */
.btn:focus-visible {
  outline: 2px solid var(--olive-border-strong);
  outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--olive-border-strong);
  outline-offset: 0;
}

/* ─── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page.active .hero h1 { animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.page.active .hero h1            { animation-delay: 0.12s; }


/* ─── PHOTO TREATMENT ────────────────────────────────────────── */
/* All images get a warm, slightly desaturated treatment          */
/* that pulls photography toward the Raw Silk palette             */
/* Stronger treatment for full-bleed hero/feature images */

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-inner { gap: 0; }
  .impact-cols { grid-template-columns: 1fr; gap: 32px; }
  .tab-panel.active,
  .tab-panel[data-active="true"] { grid-template-columns: 1fr; gap: 32px; }
  .research-grid { grid-template-columns: 1fr; gap: 48px; }
  .reasons { grid-template-columns: 1fr; }
  .ind-explainer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* --section-pad here was dead code (always overridden by the
     unconditional def later in source); removed in token refactor. */
  /* Phone nav layout (compact bar + hamburger panel) lives in the
     ≤760 block in base.css. Only the wordmark sizing stays here. */
  .nav-wm-peren { font-size: 28px; }
  .nav-wm-os { font-size: 18px; }
  .container { padding: 0 16px; }
  /* ── Touch-target floor — WCAG 2.5.5 ──────────────────────────────
     ONE source of truth for every interactive control on phones. The
     touch concern (min edge + centering) lives only here, driven by the
     --tap-min token; per-component padding/typography stay in their own
     rules below. GROWTH RULE: a new interactive control (new nav item,
     new button type, a control on a new page) becomes compliant by
     adding its selector to THIS list — never by re-declaring a
     min-height per component. That keeps the rule count flat as pages
     are added. */
  .nav-cta .btn,
  .tab-btn,
  .nav-dd-label,
  .nav-dd-caret-btn,
  .nav-dd-opt,
  .lang-dd-toggle,
  .lang-dd-opt,
  .nav-burger {
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Per-component sizing only (label stays ≥14px); touch floor above. */
  .nav-cta .btn { font-size: var(--text-sm); padding: 12px 18px; }
  /* .tabs / .tab-btn phone overrides removed — the audience tab tile
     grid handles its own responsive layout (≤720 single-column stack)
     in its component block above. */
  .form-field label { font-size: 13px; }
  /* Footer had no phone rule: 32px side padding + space-between forced
     the page wider than the viewport. Stack and left-align on phones. */
  footer { flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px 16px; }
  .footer-meta { text-align: left; }
}

/* Process diagram ("PerenOS reasons from your site conditions…") —
   inline-styled as a rigid 3-column grid; stack it on phones so the
   180px node circles and their captions don't overflow the card. */
/* Stack the 3-col process diagram at ≤900 (was 760): 761–800 it
   overflowed the card on tablets. */
@media (max-width: 900px) {
  .proc-card { padding: 0 !important; }
  .proc-head { flex-wrap: wrap; gap: 10px; }
  .proc-head h3 { font-size: var(--text-lg) !important; }
  .proc-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .proc-line { display: none !important; }
}

/* ─── ECOLOGY SECTION ─────────────────────────────────────── */

/* Why-it-matters graph */

/* Hero diagram */


/* ════════════════════════════════════════════════════════════════
   PIPELINE COMPONENT  (formerly inline; migrated from index.html)
   ──────────────────────────────────────────────────────────────── */

/* Pipeline section wrapper */
.pipeline { padding: 0 24px clamp(72px, 9vw, 128px); background: var(--rawsilk); }
.pipeline-inner { max-width: var(--w-default); margin: 0 auto; margin-top: calc(-1 * clamp(32px, 4vw, 56px)); position: relative; z-index: 1; }

/* ─── Pipeline component ─────────────────────────────────────────
   2026-05-21: removed the floating-card chrome (lighter bg-surface
   ground, olive hairline, radius). The diagram now sits flat on the
   surrounding silk so the four stages read as part of the page rather
   than as a contained appliance. Padding is kept for breathing room
   but reduced on the sides since the silk now extends past the
   diagram naturally — the column gives its own measure. */
.ppl {
  font-family: var(--font-body);
  background: transparent;
  padding: 32px 0 24px;
  width: 100%;
}

/* Title */
.ppl-title {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: var(--text-xl);
  color: var(--uguisu);
  margin: 0 0 28px;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  border-left: 3px solid var(--uguisu);
  padding-left: 14px;
}

/* ─── I/O rows ────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: var(--leading-snug);
}

.chip svg { flex-shrink: 0; }

/* ─── Dividers ────────────────────────────────────────────────── */
.div {
  height: 1px;
  background: var(--olive-hairline);
  margin: 16px 0;
}

/* ─── Stage grid ──────────────────────────────────────────────── */
.stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

/* ─── Stage card ──────────────────────────────────────────────── */
.stage {
  background: transparent;
  border: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 28px 0 0;
  position: relative;
}

.stage:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 56px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--olive-border);
}

.stage-head {
  padding: 0 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  width: 100%;
}

/* Icon roundel */
.stage-ico {
  width: 112px;
  height: 112px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stage-ico svg {
  width: 90px;
  height: 90px;
}

.i1 { background: var(--uguisu); }
.i2 { background: var(--dark); }
.i3 { background: var(--gold); }
.i4 { background: var(--peach); }

/* Number + title row */
.stage-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.stage-title {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  margin: 0;
  display: block;
}

.stage:nth-child(1) .stage-title { color: var(--uguisu); }
.stage:nth-child(2) .stage-title { color: var(--color-charcoal-mid); }
.stage:nth-child(3) .stage-title { color: var(--color-gold-dark); }
.stage:nth-child(4) .stage-title { color: var(--color-peach-dark); }

/* Example block */

/* Tags */

.tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px 7px;
  white-space: nowrap;
  line-height: var(--leading-normal);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ─── Stage-level IO chips ─────────────────────────────────────── */
.stage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* ─── Epistemic refusal ───────────────────────────────────────── */
.refusal {
  padding: 11px 15px;
  background: rgba(26, 22, 8, 0.04);
  border-radius: 8px;
  border-left: 2.5px solid rgba(26, 22, 8, 0.18);
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.ppl-example {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(200, 152, 32, 0.32);
  background: rgba(200, 152, 32, 0.08);
  padding: 14px 0 16px;
  margin-top: 22px;
  border-radius: 4px;
}

.ppl-example-col {
  padding: 0 12px;
  border-right: 1px solid rgba(200, 152, 32, 0.18);
}

.ppl-example-col:last-child {
  border-right: none;
}

.ppl-example-label {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 6px;
}

.ppl-example-text {
  font-size: var(--text-2xs);
  font-style: italic;
  color: rgba(26, 22, 8, 0.75);
  line-height: var(--leading-normal);
}

.ppl-example-text strong {
  font-style: normal;
  font-weight: 600;
  color: var(--color-charcoal);
}

.ppl-example-text .ex-metric {
  font-style: normal;
  font-weight: 500;
  color: var(--color-gold);
}

/* ─── Footer ──────────────────────────────────────────────────── */
.ppl-footer {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ppl-fn {
  font-size: var(--text-2xs);
  color: rgba(26, 22, 8, 0.3);
  font-style: italic;
}

.ppl-logo { line-height: 1; }
.ppl-logo em   { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--uguisu); }
.ppl-logo span { font-family: var(--font-body); font-weight: 500; font-size: 10.5px; color: var(--uguisu); letter-spacing: 0.3px; }

/* ─── Responsive ─────────────────────────────────────────────── */
/* Collapse the 4-col pipeline at ≤900 (was 720): between 721–887 the
   4 stages overflowed the viewport on tablets. */
@media (max-width: 900px) {
  .stages { grid-template-columns: 1fr 1fr; gap: 24px; }
  .stage { padding: 0; }
  .stage:not(:last-child)::after { display: none; }
}

@media (max-width: 520px) {
  .ppl { padding: 18px; }
  .stages { grid-template-columns: 1fr; gap: 32px; }
  .stage { padding: 0; text-align: left; align-items: flex-start; }
  .stage-head { flex-direction: row; align-items: flex-start; gap: 16px; }
}

/* ─── SECTION NAV (multi-page IA) ──────────────────────────────
   Primary page navigation row inside <nav>, below .nav-top.
   Audience-themed via --accent-light (spring on professional,
   light-peach on individual through [data-audience]). */
.nav-pages {
  display: flex; gap: 28px; align-items: center;
  padding: 10px 32px;
  border-top: 1px solid var(--olive-hairline, rgba(94,107,34,.22));
  background: var(--rawsilk, var(--color-raw-silk));
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
}
.nav-page-link {
  font-size: 14px; letter-spacing: .01em; text-decoration: none;
  color: var(--fg-tertiary, #6A6030);
  padding: 4px 1px; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav-page-link:hover { color: var(--color-olive, var(--color-olive)); }
.nav-page-link.active {
  color: var(--color-olive, var(--color-olive)); font-weight: 500;
  border-bottom-color: var(--accent-light, var(--color-spring));
}
nav.scrolled .nav-pages {
  background: var(--dark, var(--color-charcoal));
  border-top-color: var(--on-dark-hairline, rgba(242,234,216,.16));
}
nav.scrolled .nav-page-link { color: var(--on-dark-body, rgba(242,234,216,.78)); }
nav.scrolled .nav-page-link:hover,
nav.scrolled .nav-page-link.active { color: var(--rawsilk, var(--color-raw-silk)); }
@media (max-width: 760px) {
  .nav-pages { gap: 16px; padding: 10px 16px; overflow-x: auto;
    -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .nav-page-link { font-size: 13px; }
}

/* ── HERO STEPPER (.nc) ──────────────────────────────────────────
   The hero section on index.html + individual.html. Narrates
   PerenOS's reasoning end-to-end: 01 Read · 02 Brief · 03 Generate
   · 04 Submit/Tend. Single shared component (partials/hero-cs.html);
   audience-aware via the global `--accent` token already set on the
   `<html data-audience>` root (see base.css). Audience-specific
   content blocks are gated via `[data-aud="…"]` selectors below —
   no JS toggling, no `hidden` attribute juggling. Stepper logic
   (click + arrow keys) lives in js/hero-carousel.js. Earlier
   .hero-cs / .hero-cs__* / .carousel-data-panel system removed
   wholesale; the new model paginates a process, not example outputs.
   ── */

  /* Outer wrapper inherits the hero plate margin the old .hero-cs had. */
  .hero-cs {
    margin: clamp(40px, 5vw, 64px) 0 0;
    padding: 0;
  }
  /* Visually-hide pattern stays available if the partial ever
     reintroduces a caption (currently it doesn't). */
  .hero-cs__cap {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
  }

  /* ── Audience gating: pure CSS, driven by the page-level
     `<html data-audience>` already in partials/head.html. No runtime
     toggling, no `hidden` attribute. The `display: none !important`
     is required because some children below set `display: flex/grid`,
     which would otherwise win over a UA `[hidden]{display:none}` rule. */
  [data-audience="professional"] .nc [data-aud="ind"],
  [data-audience="individual"]   .nc [data-aud="pro"] { display: none !important; }

  /* ── .nc shell — accent inherits site-wide `--accent` so the
     Individual page's peach flows through automatically. */
  .nc {
    --nc-accent:        var(--accent);
    --nc-accent-soft:   rgba(94,107,34,0.08);
    --nc-accent-border: rgba(94,107,34,0.32);
    font-family: var(--font-ui, 'Space Grotesk', sans-serif);
    color: var(--fg-primary);
  }
  [data-audience="individual"] .nc {
    --nc-accent-soft:   rgba(224,160,122,0.12);
    --nc-accent-border: rgba(224,160,122,0.42);
  }

  /* ── Stepper — directional, not peer. Replaces dots.
     scroll-margin-top clears the 57px fixed site-nav (plus breathing
     room) when JS scrolls the band into view on step change — so the
     user lands at the new panel's top, not mid-panel. */
  .nc-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-bottom: 18px;
    background: transparent;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    scroll-margin-top: 80px;
  }
  .nc-step {
    appearance: none;
    background: transparent;
    border: none;
    border-top: 2px solid transparent;
    border-left: 1px solid var(--border-light);
    padding: 14px 12px 12px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--fg-tertiary);
    transition: color 180ms var(--ease-out, ease-out),
                border-color 180ms var(--ease-out, ease-out),
                background 180ms var(--ease-out, ease-out);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .nc-step:first-child { border-left: none; }
  .nc-step:hover { color: var(--fg-primary); background: var(--nc-accent-soft); }
  .nc-step:focus-visible {
    outline: 2px solid var(--nc-accent);
    outline-offset: -2px;
  }
  .nc-step[aria-current="true"] {
    color: var(--fg-primary);
    border-top-color: var(--nc-accent);
    background: var(--bg-surface);
  }
  .nc-step-num {
    font-size: 10px;
    letter-spacing: 0.16em;
    font-variant-numeric: tabular-nums;
    color: var(--nc-accent);
    font-weight: 500;
  }
  .nc-step-label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: var(--tracking-snug);
    color: inherit;
  }
  .nc-step-hint {
    font-size: 11px;
    color: var(--fg-muted);
    line-height: 1.4;
    font-weight: 400;
    margin-top: 1px;
  }

  /* ── Stage — where the active step renders ── */
  .nc-stage {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    min-height: 480px;
  }
  .nc-stage-panel { display: none; }
  .nc-stage-panel[data-active="true"] { display: block; }

  /* Common header strip across all steps */
  .nc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px 12px;
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
  }
  .nc-head-eyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nc-accent);
    font-weight: 500;
  }
  .nc-head-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(22px, 2.4vw, 30px);
    color: var(--fg-primary);
    margin: 4px 0 0;
    line-height: 1.1;
    flex: 1 1 auto;
    min-width: 0;
  }
  .nc-head-meta {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
  }

  /* ── Step 01 · Diagnostic — figure + side inputs panel.
     Figure on the left (the main reading); inputs as a narrow column
     on the right (what fed it). The figure no longer eats the whole
     viewport — it's bounded by the column ratio. Mobile stacks them
     vertically (see the @media block at the bottom). */
  .nc-diag-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: stretch;
  }
  .nc-diag-figure {
    padding: 20px 0 24px 24px;
    background: transparent;
    display: flex;
    align-items: center;
    min-width: 0;
  }
  .nc-diag-img {
    display: block;
    width: 100%;
    height: auto;
    /* Cap so the diagnostic figure fits in a typical desktop viewport
       without scrolling once the case-study panel is at viewport top.
       Allowance: nav (~70) + stepper (~115) + nc-head (~85) + breathing
       room ≈ 300px reserved for surrounding chrome. object-fit: contain
       preserves the SVG aspect when the height is clamped; the background
       tone matches the SVG's sky so any letterboxing reads as part of
       the illustration. */
    max-height: calc(100vh - 312px);
    object-fit: contain;
    /* No background fill — the SVG's semi-transparent sky/soil gradients
       compose directly over the panel surface so the illustration
       dissolves into the card instead of sitting as a rectangle on top. */
  }
  .nc-diag-inputs {
    padding: 20px 24px 24px;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-left: 1px solid var(--border-light);
    min-width: 0;
  }
  .nc-diag-inputs-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .nc-diag-inputs-label {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--nc-accent);
    font-weight: 500;
  }
  .nc-diag-inputs-meta {
    font-size: 12px;
    line-height: 1.5;
    color: var(--fg-tertiary);
    letter-spacing: 0.01em;
    max-width: 32ch;
  }
  /* Chips stack vertically inside the narrow side panel — each becomes
     a full-width row, so the eye runs down the list rather than across. */
  .nc-diag-chips {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
  }
  .nc-diag-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    font-size: 11.5px;
    color: var(--fg-primary);
    line-height: 1.2;
    letter-spacing: 0.01em;
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .nc-diag-chip svg { width: 12px; height: 12px; color: var(--nc-accent); flex-shrink: 0; }
  .nc-diag-chip em { font-style: normal; color: var(--fg-muted); font-size: 10.5px; margin-left: auto; padding-left: 8px; flex-shrink: 0; }
  .nc-diag-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px dashed var(--nc-accent-border);
    color: var(--nc-accent);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    width: 100%;
    margin-top: 4px;
    transition: background 150ms var(--ease-out, ease-out),
                border-color 150ms var(--ease-out, ease-out);
  }
  .nc-diag-upload:hover { background: var(--nc-accent-soft); border-style: solid; }
  .nc-diag-upload svg { width: 12px; height: 12px; }

  /* ── Step 02 · Brief ── */
  .nc-brief { padding: 26px 24px 28px; }
  .nc-brief-intro {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--fg-secondary);
    margin: 0 0 18px;
    max-width: 60ch;
  }
  /* Pro: function constraint chips. Each card attaches to a community. */
  .nc-func-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 22px;
  }
  .nc-func {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    padding: 14px 14px 14px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    align-items: start;
  }
  .nc-func-mark {
    width: 22px; height: 22px;
    border: 1px solid var(--nc-accent-border);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--nc-accent);
    font-size: 13px;
    font-weight: 500;
    background: var(--bg-surface);
    margin-top: 1px;
  }
  .nc-func-name {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.25;
    color: var(--fg-primary);
    margin: 0 0 3px;
  }
  .nc-func-meta {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--fg-tertiary);
    margin: 0;
    letter-spacing: 0.01em;
  }
  .nc-func-deliver {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px dashed var(--border-light);
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--fg-secondary);
    display: flex;
    align-items: baseline;
    gap: 6px;
    letter-spacing: 0.01em;
  }
  .nc-func-deliver::before {
    content: "\21B3";
    color: var(--nc-accent);
    font-weight: 500;
    margin-right: 2px;
  }
  .nc-func-deliver strong {
    font-weight: 500;
    color: var(--fg-primary);
  }
  .nc-brief-note {
    font-size: 12px;
    line-height: 1.55;
    color: var(--fg-muted);
    margin: 0;
    letter-spacing: 0.01em;
    padding-top: 14px;
  }
  /* Ind: homeowner quote cards. EB Garamond italic, with PerenOS's
     read footed underneath as small sans-serif. */
  .nc-quotes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 18px;
  }
  .nc-quote {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    padding: 18px 18px 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .nc-quote::before {
    content: "\201C";
    position: absolute;
    top: -6px;
    left: 14px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 44px;
    line-height: 1;
    color: var(--nc-accent);
    background: var(--bg-primary);
    padding: 0 6px;
  }
  .nc-quote-text {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.35;
    color: var(--fg-primary);
    margin: 4px 0 0;
    letter-spacing: -0.005em;
    /* Push only the first line past the absolute-positioned open-quote glyph. */
    text-indent: 36px;
  }
  .nc-quote-read {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
    font-size: 11px;
    line-height: 1.4;
    color: var(--fg-tertiary);
    letter-spacing: 0.02em;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: baseline;
  }
  .nc-quote-read-label {
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nc-accent);
    font-weight: 500;
    margin-right: 4px;
  }
  .nc-quote-read-fn {
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--fg-secondary);
    font-weight: 500;
  }
  .nc-quote-read-place {
    font-size: 10.5px;
    color: var(--fg-muted);
    letter-spacing: 0.02em;
  }

  /* ── Step 03 · All communities, one stage ── */
  .nc-comm { padding: 22px 24px 26px; }
  .nc-comm-intro {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .nc-comm-intro p { margin: 0; font-size: 14px; color: var(--fg-secondary); max-width: 56ch; }
  .nc-comm-intro span {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nc-accent);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .nc-comm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .nc-comm-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 14px;
    padding: 14px 14px 14px 12px;
    min-width: 0;
    transition: border-color 150ms var(--ease-out, ease-out),
                background 150ms var(--ease-out, ease-out);
  }
  .nc-comm-card:hover { border-color: var(--nc-accent-border); }
  .nc-comm-thumb {
    width: 86px;
    height: 86px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    overflow: hidden;
    flex-shrink: 0;
  }
  .nc-comm-thumb svg { width: 100%; height: 100%; display: block; }
  .nc-comm-body { min-width: 0; }
  .nc-comm-fn {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nc-accent);
    font-weight: 500;
    margin: 0 0 2px;
  }
  .nc-comm-name {
    font-weight: 500;
    font-size: 14.5px;
    line-height: 1.2;
    color: var(--fg-primary);
    margin: 0 0 8px;
    letter-spacing: -0.005em;
  }
  .nc-comm-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 8px;
    margin-bottom: 4px;
  }
  .nc-comm-row dt {
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-muted);
    font-weight: 500;
    padding-top: 3px;
  }
  .nc-comm-row dd {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--fg-primary);
  }
  .nc-comm-row dd em { font-style: italic; color: var(--fg-secondary); }
  .nc-comm-conf {
    margin-top: 8px;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nc-accent);
    font-weight: 500;
  }
  .nc-comm-conf span {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 6px;
    border: 1px solid var(--nc-accent-border);
    border-radius: 2px;
    font-size: 9px;
  }

  /* ── Step 04 (Pro) · Documents — and (Ind) · Observation log ── */
  .nc-out { padding: 24px; }
  .nc-out-intro {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--fg-secondary);
    margin: 0 0 18px;
    max-width: 58ch;
  }
  .nc-docs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
  }
  .nc-doc {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 12px;
    padding: 14px 14px 14px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    text-decoration: none;
    color: var(--fg-primary);
    align-items: center;
    transition: border-color 150ms var(--ease-out, ease-out),
                background 150ms var(--ease-out, ease-out);
  }
  .nc-doc:hover { border-color: var(--nc-accent-border); background: var(--nc-accent-soft); }
  .nc-doc svg { width: 18px; height: 18px; color: var(--nc-accent); }
  .nc-doc-name {
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.2;
    color: var(--fg-primary);
    margin: 0 0 2px;
  }
  .nc-doc-ext {
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--fg-tertiary);
  }
  .nc-doc-meta {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nc-accent);
    font-weight: 500;
  }
  .nc-docs-policy-label {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nc-accent);
    font-weight: 500;
    margin: 22px 0 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
  }
  /* Ind: observation log */
  .nc-obs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 18px;
  }
  .nc-obs-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    padding: 14px 14px 14px 12px;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 14px;
    align-items: start;
  }
  .nc-obs-date {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 32px;
    line-height: 1;
    color: var(--nc-accent);
    text-align: center;
  }
  .nc-obs-month {
    font-family: var(--font-ui);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-top: 4px;
    font-weight: 500;
    display: block;
  }
  .nc-obs-head {
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.25;
    color: var(--fg-primary);
    margin: 0 0 4px;
  }
  .nc-obs-body {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fg-secondary);
    margin: 0;
  }
  .nc-obs-tag {
    display: inline-block;
    margin-top: 6px;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 2px;
    font-weight: 500;
  }
  /* Tag variants — each observation type gets its own brand-palette accent.
     Baseline / Function / Adapt / Record. */
  .nc-obs-tag--baseline {
    color: var(--color-olive);
    background: rgba(168,192,96,0.18);
    border: 1px solid rgba(168,192,96,0.45);
  }
  .nc-obs-tag--function {
    color: var(--color-olive);
    background: rgba(94,107,34,0.10);
    border: 1px solid rgba(94,107,34,0.40);
  }
  .nc-obs-tag--adapt {
    color: #8A4A20;
    background: rgba(224,160,122,0.14);
    border: 1px solid rgba(224,160,122,0.45);
  }
  .nc-obs-tag--record {
    color: #6B4F10;
    background: rgba(200,152,32,0.12);
    border: 1px solid rgba(200,152,32,0.42);
  }

  /* ── Bottom controls — Prev/Next + position counter. Hairline pill
     buttons that match the existing site language. Inherit accent
     from the .nc shell so peach flows on Individual. Prev auto-disables
     on step 0 and Next on the last step (JS toggles the `disabled`
     attribute; CSS just visually communicates the state). */
  .nc-ctrl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    padding: 0 4px;
  }
  .nc-ctrl-btn {
    background: transparent;
    border: 1px solid var(--nc-accent-border);
    color: var(--nc-accent);
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    transition: border-color 150ms var(--ease-out, ease-out),
                background 150ms var(--ease-out, ease-out),
                color 150ms var(--ease-out, ease-out);
  }
  .nc-ctrl-btn:hover,
  .nc-ctrl-btn:focus-visible {
    border-color: var(--nc-accent);
    background: var(--nc-accent-soft);
  }
  .nc-ctrl-btn:disabled {
    opacity: 0.32;
    cursor: not-allowed;
    background: transparent;
  }
  .nc-ctrl-pos {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }

  /* ── Phone: ≤720w. Same DOM, restyled. ── */
  @media (max-width: 720px) {
    .hero-cs { margin-top: 32px; }
    /* Stepper becomes a horizontal chip row that fits a 360w viewport. */
    .nc-steps {
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
    }
    .nc-step {
      padding: 10px 6px 9px;
      gap: 2px;
      border-left-width: 1px;
    }
    .nc-step-num   { font-size: 9px; }
    .nc-step-label { font-size: 11.5px; line-height: 1.2; }
    .nc-step-hint  { display: none; }
    /* Mobile: turn the stage into a horizontal scroll-snap track so
       swiping between panels is the primary interaction. Real users
       on phones expect to swipe a multi-step UI — click on the 1–4
       buttons still works and stays in sync via IntersectionObserver
       in hero-carousel.js. align-items: flex-start so panels keep
       their own natural heights instead of all stretching to the
       tallest panel (which left a lot of empty space below shorter
       panels); JS sets stage height to match the active panel and
       smoothly transitions on swipe. */
    .nc-stage {
      min-height: 0;
      display: flex;
      align-items: flex-start;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      touch-action: pan-x pan-y;
      transition: height 320ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .nc-stage::-webkit-scrollbar { display: none; }
    /* Override desktop's display:none — all panels render side-by-side
       and the scroll position decides which one is visible. */
    .nc-stage-panel,
    .nc-stage-panel[data-active="true"] {
      display: block;
      flex: 0 0 100%;
      width: 100%;
      align-self: flex-start;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }
    .nc-head {
      padding: 14px 16px 10px;
      gap: 6px;
    }
    .nc-head-title { font-size: 20px; }
    /* Step 01 — stack figure + inputs vertically. Inputs ABOVE the
       figure so the chips are reachable without scrolling past a tall
       image. Chips flow horizontally again at this width. */
    .nc-diag-body {
      grid-template-columns: 1fr;
    }
    .nc-diag-inputs {
      order: 1;
      border-left: none;
      border-bottom: 1px solid var(--border-light);
      padding: 14px 16px 16px;
    }
    .nc-diag-figure {
      order: 2;
      padding: 12px 16px 16px;
    }
    .nc-diag-chips {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
    }
    .nc-diag-chip,
    .nc-diag-upload {
      width: auto;
    }
    .nc-diag-chip em { margin-left: 2px; padding-left: 0; }
    /* Step 02 — funcs + quotes both stack to single column */
    .nc-brief { padding: 18px 16px 20px; }
    .nc-func-grid,
    .nc-quotes { grid-template-columns: 1fr; }
    /* Step 03 — community grid single column */
    .nc-comm { padding: 16px 16px 20px; }
    .nc-comm-grid { grid-template-columns: 1fr; }
    /* Step 04 — single column docs + obs */
    .nc-out { padding: 16px; }
    .nc-obs-grid { grid-template-columns: 1fr; }
  }

/* ─── About pillars ───────────────────────────────────────────────
   Purpose / Mission / Vision / Governance as a colour-language small
   multiple: one saturated palette tile per item with a multi-hue
   icon, mirroring the diagram register rather than four flat blocks.
   A sanctioned per-item use of the palette (discrete tiles), not a
   five-colour composition. */
.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.about-pillar {
  padding: 32px 32px 34px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about-pillar__icon { display: block; width: 40px; height: 40px; }
.about-pillar__icon svg { display: block; width: 40px; height: 40px; }
.about-pillar__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}
.about-pillar__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0;
}
.about-pillar--purpose    { background: var(--color-olive); }
.about-pillar--purpose .about-pillar__title,
.about-pillar--purpose .about-pillar__body { color: var(--color-raw-silk); }
.about-pillar--mission    { background: var(--color-spring); }
.about-pillar--mission .about-pillar__title { color: var(--color-charcoal); }
.about-pillar--mission .about-pillar__body  { color: #25210F; }
.about-pillar--vision     { background: var(--color-peach); }
.about-pillar--vision .about-pillar__title { color: #2B1B0E; }
.about-pillar--vision .about-pillar__body  { color: #2B1B0E; }
@media (max-width: 760px) {
  .about-pillars { grid-template-columns: 1fr; gap: 16px; }
  .about-pillar { padding: 26px 22px 28px; }
}

/* ─── RESEARCH PAGE — page-specific layouts only ──────────────────
   Type comes from the canonical system (h1.page-title, h2.declarative,
   h3, p, .label in base.css). The only thing this section adds is
   layout: the 4-col foundations grid and the side-by-side closing
   pair. Per the site-wide line audit, no section hairlines —
   the constellation between sections is the only divider. */

/* Foundations grid — 4 typographic columns, no card chrome. Each
   column is anchored by its icon at the top (no hairline rule). */
.research-foundations__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
}
.research-foundation {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.research-foundation__icon {
  width: 28px;
  height: 28px;
  color: var(--color-olive);
  margin-bottom: 4px;
}
.research-foundation__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 980px) {
  .research-foundations__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 600px) {
  .research-foundations__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* Principle blocks — just a measure constraint. */
.research-principle {
  max-width: var(--measure);
  margin: 0;
}

/* Two-column variant: pull-quote in the narrow left column, body
   paragraphs in the wider right column. Stacks on phones. */
.research-principle--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  max-width: none;
}
.research-principle__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2vw, 30px);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-olive);
  margin: 0;
  border-left: 2px solid var(--olive-border-strong);
  padding-left: clamp(16px, 1.5vw, 22px);
  max-width: 22ch;
}
.research-principle__body { max-width: var(--measure); }
.research-principle__body p + p { margin-top: 1em; }
@media (max-width: 720px) {
  .research-principle--split { grid-template-columns: 1fr; }
  .research-principle__quote { max-width: var(--measure); }
}

/* Tighten the gap between the research hero and the first content
   section — the two stacked section paddings otherwise produce a
   166px void between the hero h2 and the pull-quote/body. */
.research-intro + .research-traditions { padding-top: clamp(20px, 2vw, 32px); }

/* Closing pair (refusal + governance) — side-by-side on desktop. */
.research-principles__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 4vw, 72px);
}
@media (max-width: 760px) {
  .research-principles__row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ─── PAGE-NEXT — in-sequence "continue to next page" affordance ────
   One section-spine band at the bottom of each non-terminal page in
   an audience sequence. Pro: Platform → Reasoning → For practitioners.
   Individual: Platform → Reasoning → Who it's for. The terminal page
   has no .page-next (book-call CTA + footer take it home).
   The audience accent is driven entirely by var(--accent), which the
   [data-audience="individual"] cascade in base.css already flips to
   peach. So this component has NO audience-specific overrides — the
   token does the work. */
.page-next .page-next__link {
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  margin-left: auto;          /* sit at the right edge of .container */
  text-decoration: none;
  color: var(--dark);
  padding-top: clamp(20px, 2.5vw, 32px);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.page-next .container {
  display: flex;
  justify-content: flex-end;  /* keep the link group right-aligned */
}
.page-next .page-next__link:hover { transform: translateX(6px); }
.page-next .page-next__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 8px;
  border-radius: 4px;
}
.page-next__title {
  font-family: var(--font-body);
  font-size: clamp(var(--text-lg), 1.6vw, var(--text-xl));
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--dark);
}
.page-next__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 5.6vw, 72px);
  height: clamp(56px, 5.6vw, 72px);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--accent);
  flex-shrink: 0;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}
.page-next .page-next__link:hover .page-next__arrow {
  background: var(--accent);
  color: var(--color-raw-silk);
  border-color: var(--accent);
}
@media (max-width: 600px) {
  .page-next__arrow {
    width: 48px;
    height: 48px;
  }
}

/* ─── CONSTELLATION DIVIDER ─────────────────────────────────────────
   Five brand-palette dots in a row — olive · spring · peach · gold ·
   raw-silk — used as a signature divider. The dots ARE the divider:
   no connecting line, no hairline.

   Two placements:
   1. Default (between major sections): replaces the .surface--tonal
      border-top hairline. Dots are centered.
   2. variant="flourish" (below hero H1): tighter top/bottom padding,
      left-aligned so it sits under the H1 like a typographic
      colophon.

   Design discipline: this motif appears at most ~2-3 times per page.
   Each occurrence is a deliberate signature moment, not wallpaper.
   The five-dot rhythm is what makes it identifiable — don't dilute it
   by adding a sixth dot or reordering, and don't reuse the dot
   vocabulary inside cards/components.

   The fifth dot (raw-silk) wears an inset olive ring so it stays
   visible on the silk ground — the only deviation from solid fill. */
.constellation {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Was justify-content: center — real users mistook the centred dots
     for swipe pagination. Left-aligned reads as a section ornament.
     Padding-inline uses max() so on wide viewports the dots' left edge
     lands at the same x as the hero H1 / flourish variant (i.e. the
     centred 1180px container's outer edge), and on narrow viewports
     falls back to the standard 32px gutter. */
  justify-content: flex-start;
  padding-block: clamp(28px, 4vw, 44px);
  padding-inline: max(32px, calc((100% - var(--w-default, 1180px)) / 2));
  margin: 0;
  list-style: none;
}
.constellation--flourish {
  justify-content: flex-start;
  padding: clamp(14px, 1.8vw, 22px) 0 clamp(20px, 2.4vw, 28px);
}
.constellation__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}
.constellation__dot--olive  { background: var(--color-olive); }
.constellation__dot--spring { background: var(--color-spring); }
.constellation__dot--peach  { background: var(--color-peach); }
.constellation__dot--gold   { background: var(--color-gold); }
.constellation__dot--silk   {
  background: var(--color-raw-silk);
  box-shadow: inset 0 0 0 1px rgba(94, 107, 34, 0.42);
}

/* ════════════════════════════════════════════════════════════════
   SWIPE STEPPER — shared mobile-only behaviour
   ────────────────────────────────────────────────────────────────
   Any section can opt into the hero's swipe pattern by tagging its
   scroll container with `data-swipe-track` and each panel with
   `data-swipe-panel`. JS lives in js/swipe-stepper.js. At ≤720px the
   track becomes a horizontal scroll-snap carousel; above 720px the
   section falls back to its own desktop layout (grid, tabs, etc.) and
   this layer is inert.

   The `.swipe-nav` block is a shared bottom-nav (dots + Prev/Next +
   position) for new consumers; it stays hidden on desktop. The hero
   keeps its own .nc-steps / .nc-ctrl markup — this layer doesn't
   touch it. */

@media (max-width: 720px) {
  [data-swipe-track] {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    transition: height 320ms cubic-bezier(0.4, 0, 0.2, 1);
    gap: 0;
  }
  [data-swipe-track]::-webkit-scrollbar { display: none; }
  [data-swipe-track] > [data-swipe-panel] {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* Shared dot/Prev-Next nav. Hidden on desktop; revealed at ≤720px.
   The base.css rule `nav { position: fixed; border-left: 5px solid uguisu }`
   targets the site's top nav by tag, so when this swipe-nav is a <nav>
   element it inherits both. Reset position/border so the swipe-nav sits
   in normal flow with no chrome. */
.swipe-nav {
  display: none;
  position: static;
  border-left: none;
}
@media (max-width: 720px) {
  .swipe-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
  }
  .swipe-nav-dots {
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .swipe-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid var(--olive-border, rgba(94, 107, 34, 0.35));
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
  }
  .swipe-dot[aria-current="true"] {
    background: var(--uguisu, var(--color-olive));
    border-color: var(--uguisu, var(--color-olive));
    transform: scale(1.15);
  }
  .swipe-dot:focus-visible {
    outline: 2px solid var(--uguisu, var(--color-olive));
    outline-offset: 2px;
  }
  .swipe-ctrl {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: var(--text-2xs);
    color: var(--color-charcoal);
  }
  .swipe-prev, .swipe-next {
    appearance: none;
    border: 1px solid var(--olive-border, rgba(94, 107, 34, 0.35));
    background: transparent;
    color: inherit;
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    min-height: 36px;
  }
  .swipe-prev:disabled, .swipe-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .swipe-pos {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    opacity: 0.75;
  }
}

/* ─── Per-section opt-ins ──────────────────────────────────────── */

/* Pipeline diagram (how-it-works.html §.pipeline). Desktop keeps the
   4-col grid (≤900 → 2-col, set above). At ≤720, the .stages grid
   becomes a swipe track and each .stage is one panel. The standalone
   .ppl-example row is hidden — each stage carries its own example
   text in a .stage-example block that's only shown on mobile. */
@media (max-width: 720px) {
  .pipeline .ppl-example { display: none; }
  .stages[data-swipe-track] {
    grid-template-columns: none;
    gap: 0;
  }
  .stages[data-swipe-track] > .stage {
    padding: 0 16px;
    text-align: left;
    align-items: stretch;
  }
  .stage-example {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(200, 152, 32, 0.32);
    background: rgba(200, 152, 32, 0.08);
    border-radius: 4px;
    font-size: var(--text-2xs);
    font-style: italic;
    color: rgba(26, 22, 8, 0.75);
    line-height: var(--leading-normal);
  }
  .stage-example-label {
    display: block;
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 6px;
    font-style: normal;
  }
  .stage-example strong { font-style: normal; font-weight: 600; color: var(--color-charcoal); }
  .stage-example .ex-metric { font-style: normal; font-weight: 500; color: var(--color-gold); }
}
.stage-example { display: none; }
@media (max-width: 720px) { .stage-example { display: block; } }

/* Practitioner tabs (who-its-for.html §.serves). On desktop the tab
   pattern is unchanged (one panel visible at a time). At ≤720, the
   panel container becomes the swipe track and the .tab-btn row above
   doubles as the step nav (already there). */
.serves .tab-panels { position: relative; }
@media (max-width: 720px) {
  .serves .tab-panels[data-swipe-track] { display: flex; }
  .serves .tab-panel[data-swipe-panel] {
    display: block; /* override the tab-style display:none on inactive panels */
    opacity: 1;
  }
}

/* Individual driver cards (individual-who-its-for.html §.ind-driver-grid).
   Desktop layout untouched; at ≤720, the grid becomes a swipe track and
   each card is one panel. */
@media (max-width: 720px) {
  .ind-driver-grid[data-swipe-track] {
    grid-template-columns: none;
    gap: 0;
  }
  .ind-driver-grid[data-swipe-track] > .ind-driver-card {
    margin: 0;
  }
}