/* ═══════════════════════════════════════════════════════════════════════════
   Mitra AI corporate site — shared stylesheet.
   All color/type/spacing values come from tokens.css (semantic tokens only);
   no raw brand hex values may appear in this file.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text-primary);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 550;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  color: var(--color-primary);
}

h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl)); }
h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl)); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { max-width: var(--measure-prose); }

a { color: inherit; text-decoration: none; }
p a, li a, .prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-border-accent);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-quick) var(--ease-luxe);
}
p a:hover, li a:hover, .prose a:hover { text-decoration-color: var(--color-accent); }

img, svg { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--wash-accent-25); }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--space-2); top: -100px; z-index: 200;
  background: var(--color-primary); color: var(--color-surface);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  transition: top var(--duration-quick) var(--ease-luxe);
}
.skip-link:focus { top: var(--space-1); }

/* ── Typographic devices ──────────────────────────────────────────────── */
.eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-2);
}

.lede {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-body);
}

.rule-gold {
  width: var(--space-6);
  height: 1px;
  border: 0;
  background: var(--color-accent);
  margin: var(--space-3) 0;
}
.rule-gold.centered { margin-left: auto; margin-right: auto; }

.prose > * + * { margin-top: var(--space-2); }
.prose h2 { margin-top: var(--space-6); }
.prose h3 { margin-top: var(--space-4); }
.prose ul, .prose ol { padding-left: var(--space-3); max-width: var(--measure-prose); }
.prose li + li { margin-top: var(--space-1); }

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
/* Glass refinement where supported — content passing beneath stays legible */
@supports (backdrop-filter: blur(1px)) {
  .site-header {
    background: color-mix(in srgb, var(--color-surface) 86%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--container-max); margin: 0 auto;
  padding: var(--space-2) var(--space-3);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  white-space: nowrap;
}
/* The Mitra seal: champagne ring, monogram in the surrounding ink color */
.logo-mark { width: 28px; height: 28px; flex: none; }
.logo-mark circle, .logo-mark path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.logo-mark .lm-ring { stroke: var(--color-accent); stroke-width: 1.25; }
.logo-mark .lm-m { stroke: currentColor; stroke-width: 1.75; }

.primary-nav ul {
  display: flex; gap: var(--space-4); list-style: none;
}
.primary-nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  padding-bottom: var(--space--1);
  border-bottom: 1px solid transparent;
  transition: color var(--duration-quick) var(--ease-luxe),
              border-color var(--duration-quick) var(--ease-luxe);
}
.primary-nav a:hover { color: var(--color-primary); border-bottom-color: var(--color-accent); }
.primary-nav a[aria-current='page'] { color: var(--color-primary); border-bottom-color: var(--color-accent); }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
  cursor: pointer; color: var(--color-primary);
}

/* Theme toggle — light/dark switch, hidden when JS cannot drive it.
   The saved theme is applied pre-paint by the inline boot script; this control
   only switches it. Semantic tokens only, so it inherits whichever theme is
   active rather than needing a per-theme rule. */
.theme-toggle {
  display: none;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
  cursor: pointer; color: var(--color-text-secondary);
  transition: color var(--duration-quick) var(--ease-luxe),
              border-color var(--duration-quick) var(--ease-luxe);
}
html.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { color: var(--color-primary); border-color: var(--color-accent); }
.theme-toggle svg { display: block; }
/* Show the icon for the theme the button switches TO, not the current one. */
.theme-toggle .icon-sun { display: none; }
[data-theme='midnight'] .theme-toggle .icon-sun { display: block; }
[data-theme='midnight'] .theme-toggle .icon-moon { display: none; }

/* Mobile nav overlay */
@media (max-width: 820px) {
  .primary-nav {
    display: none;
    position: fixed; inset: 0; z-index: 150;
    background: var(--color-surface);
    padding: var(--space-10) var(--space-3) var(--space-6);
  }
  .primary-nav.open { display: block; }
  .primary-nav ul { flex-direction: column; gap: var(--space-3); }
  .primary-nav a { font-size: var(--text-xl); font-family: var(--font-display); }
  .primary-nav .nav-close {
    position: absolute; top: var(--space-2); right: var(--space-3);
    background: none; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2);
    font-size: var(--text-base); color: var(--color-primary); cursor: pointer;
  }
  .nav-toggle { display: inline-flex; align-items: center; gap: var(--space-1); }
  .site-header .cta { display: none; }
}
@media (min-width: 821px) {
  .primary-nav .nav-close { display: none; }
}

/* ── Buttons — quiet by default, one high-emphasis CTA per view ───────── */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: calc(var(--space-1) + var(--space--1)) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-luxe),
              color var(--duration-base) var(--ease-luxe),
              border-color var(--duration-base) var(--ease-luxe),
              transform var(--duration-quick) var(--ease-luxe),
              box-shadow var(--duration-quick) var(--ease-luxe);
}
.btn:hover { background: var(--color-primary); color: var(--color-surface); }
.btn-primary:hover, .btn-gold:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.btn-primary:active, .btn-gold:active { transform: none; box-shadow: none; }

.btn-primary { background: var(--color-primary); color: var(--color-surface); }
.btn-primary:hover { background: var(--color-surface-deep); border-color: var(--color-surface-deep); }

.btn-gold {
  background: var(--color-accent); border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.btn-gold:hover { background: var(--color-accent-soft); border-color: var(--color-accent-soft); color: var(--color-surface); }

.btn-ghost-light { border-color: var(--color-text-muted-on-deep); color: var(--color-text-on-deep); }
.btn-ghost-light:hover { background: var(--color-text-on-deep); color: var(--color-surface-deep); }

/* ── Sections ─────────────────────────────────────────────────────────── */
/* Vertical padding only, as longhand. These rules are routinely combined with
   .container (class="section container"), and .container supplies the page
   gutter via `padding: 0 var(--space-3)`. A shorthand here would reset that
   gutter to 0 and pull the section's content 24px left of the header, the
   footer, and every sibling section. */
/* Section rhythm is one fluid value, not a fixed 96px.
   It used to be a flat --space-12 top AND bottom, which meant every pair of
   adjacent sections carried 192px of dead space at every viewport. On a wide
   desktop display, where the 1120px container already leaves the content
   column narrow, several of these sections are shorter than the gap around
   them (the Security & trust block measured 421px tall, 192px of it padding)
   and the page reads as holes with copy floating in them. One clamp keeps the
   generous feel on a laptop and stops the gaps growing into the fold on a
   large monitor. Change --section-y, not the individual rules. */
:root { --section-y: clamp(2.5rem, 4vw, 4.5rem); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section + .section { border-top: 1px solid var(--color-border); }
.section-head { max-width: 720px; margin-bottom: clamp(1.75rem, 2.5vw, 3rem); }
.section-head p { margin-top: var(--space-2); color: var(--color-text-secondary); }

/* Past ~1400px the fixed 1120px column strands the content in the middle of
   the screen, which is the other half of what reads as "too much space". */
@media (min-width: 1400px) { .container { max-width: 1280px; } }

.hero { padding-top: clamp(3rem, 5vw, 6rem); padding-bottom: var(--section-y); }
.hero .lede { margin-top: var(--space-3); max-width: 560px; }
.hero .cta-row { margin-top: var(--space-5); display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.hero .aside-note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── Signature: the pillar index (table-of-services) ──────────────────── */
.pillar-index { list-style: none; border-top: 1px solid var(--color-border); }
.pillar-index li { border-bottom: 1px solid var(--color-border); }
.pillar-index a {
  display: grid;
  grid-template-columns: var(--space-8) 1fr auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-4) var(--space-1);
  transition: background-color var(--duration-base) var(--ease-luxe);
}
.pillar-index a:hover { background: var(--wash-accent-08); }
.pillar-index .index-num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-accent-text);
  font-variant-numeric: oldstyle-nums;
}
.pillar-index .index-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-primary);
}
.pillar-index .index-desc {
  grid-column: 2;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  max-width: 52ch;
  margin-top: var(--space--1);
}
.pillar-index .index-go {
  font-size: var(--text-sm);
  color: var(--color-accent-text);
  align-self: center;
  transition: transform var(--duration-base) var(--ease-luxe);
}
.pillar-index a:hover .index-go,
.pillar-index a:focus-visible .index-go { transform: translateX(var(--space--1)); }
@media (max-width: 640px) {
  .pillar-index a { grid-template-columns: var(--space-5) 1fr; }
  .pillar-index .index-go { display: none; }
}

/* ── Cards (used sparingly: news list, roles) ─────────────────────────── */
.quiet-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  transition: border-color var(--duration-base) var(--ease-luxe);
}
.quiet-card:hover { border-color: var(--color-border-accent); }
.quiet-card h3 { margin-bottom: var(--space-1); }
.quiet-card .meta { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.quiet-card p { color: var(--color-text-secondary); font-size: var(--text-sm); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); }

/* ── Product cards (products.html: outcome-first, one per product) ─────── */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.product-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  transition: border-color var(--duration-base) var(--ease-luxe);
}
.product-card:hover { border-color: var(--color-border-accent); }
.product-card-head { display: flex; align-items: center; gap: var(--space-2); }
.product-card-icon {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--wash-accent-08); color: var(--color-accent-text);
  display: flex; align-items: center; justify-content: center;
}
.product-card-icon svg { width: 22px; height: 22px; }
.product-card h3 { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-primary); }
.product-card .value-prop { font-size: var(--text-base); color: var(--color-text-secondary); }
.product-card .who-for { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.product-card .card-label { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-primary); margin-bottom: var(--space-1); }
.product-card .use-cases { padding-left: 1.15em; }
.product-card .use-cases li { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-1); }
.product-card .outcome-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.product-card .outcome-tag {
  font-size: var(--text-xs); padding: 3px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-accent); color: var(--color-accent-text); white-space: nowrap;
}
.product-card .why-use { border-top: 1px solid var(--color-border); padding-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
.product-card .why-use strong { font-family: var(--font-display); color: var(--color-primary); }
.product-card .card-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-1); }
.product-category + .product-category { margin-top: var(--space-8); }

/* ── Definition rows (membership, benefits) ───────────────────────────── */
.def-rows { border-top: 1px solid var(--color-border); }
.def-row {
  display: grid; grid-template-columns: 220px 1fr auto;
  gap: var(--space-3); align-items: baseline;
  padding: var(--space-3) var(--space-1);
  border-bottom: 1px solid var(--color-border);
}
.def-row .term { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-primary); }
.def-row .detail { color: var(--color-text-secondary); font-size: var(--text-sm); max-width: 52ch; }
.def-row .aside { font-size: var(--text-sm); color: var(--color-accent-text); white-space: nowrap; }
@media (max-width: 640px) { .def-row { grid-template-columns: 1fr; gap: var(--space-1); } }

/* ── Breadcrumbs ──────────────────────────────────────────────────────── */
.breadcrumbs { padding: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.breadcrumbs li + li::before { content: '/'; margin-right: var(--space-1); color: var(--color-border-accent); }
.breadcrumbs a { color: var(--color-text-secondary); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs [aria-current='page'] { color: var(--color-text-primary); }

/* ── Deep band (invitation / final CTA) ───────────────────────────────── */
.band-deep {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-deep);
  color: var(--color-text-on-deep);
  padding: calc(var(--section-y) * 1.15) 0;
  text-align: center;
}
/* Same champagne wash the lacquer plates carry, so the band reads as material */
.band-deep::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 50% 0%, var(--wash-accent-08), transparent 65%);
  pointer-events: none;
}
.band-deep .container { position: relative; }
.band-deep h2 { color: var(--color-text-on-deep); }
.band-deep p { color: var(--color-text-muted-on-deep); margin: var(--space-2) auto var(--space-5); max-width: 52ch; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-list { max-width: 760px; }
.faq-list details { border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0; }
.faq-list summary {
  font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-primary);
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-2);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; color: var(--color-accent-text); font-family: var(--font-body); }
.faq-list details[open] summary::after { content: '−'; }
.faq-list details p { margin-top: var(--space-2); color: var(--color-text-secondary); }

/* ── Forms ────────────────────────────────────────────────────────────── */
.form-panel {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}
.field { margin-bottom: var(--space-3); flex: 1; }
.field label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); margin-bottom: var(--space-1); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: calc(var(--space-1) + var(--space--1)) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base); font-family: inherit;
  color: var(--color-text-primary); background: var(--color-surface-raised);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--color-focus-ring); outline-offset: 1px;
}
.field textarea { resize: vertical; min-height: 96px; }
.field-row { display: flex; gap: var(--space-3); }
@media (max-width: 640px) { .field-row { flex-direction: column; gap: 0; } }
.form-note { font-size: var(--text-xs); color: var(--color-text-muted); margin: calc(-1 * var(--space-1)) 0 var(--space-2); }
.form-error { font-size: var(--text-sm); color: var(--color-danger); margin: 0 0 var(--space-2); }
.form-success { padding: var(--space-4) 0; }
.form-success h3 { margin-bottom: var(--space-1); }
.form-success p { color: var(--color-text-secondary); }

/* ── Notices ──────────────────────────────────────────────────────────── */
.draft-banner {
  border: 1px solid var(--color-warning);
  background: var(--wash-accent-08);
  color: var(--color-warning);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  margin: var(--space-4) 0;
}
.disclaimer-note {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-8); padding-top: var(--space-3);
  font-size: var(--text-xs); color: var(--color-text-muted);
  max-width: none;
}

/* ── Article ──────────────────────────────────────────────────────────── */
.article-head { padding: var(--space-8) 0 var(--space-6); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-6); }
.article-head .meta { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
article.post { padding-bottom: var(--space-12); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-surface-deep);
  color: var(--color-text-muted-on-deep);
  padding: var(--space-10) 0 var(--space-5);
  font-size: var(--text-sm);
  margin-top: auto;
}
.site-footer .cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--space-5); margin-bottom: var(--space-8);
}
@media (max-width: 900px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
.site-footer h2 { font-size: var(--text-xs); font-family: var(--font-body); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-on-deep); margin-bottom: var(--space-2); }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: var(--space-1); }
.site-footer a { color: var(--color-text-muted-on-deep); transition: color var(--duration-quick) var(--ease-luxe); }
.site-footer a:hover { color: var(--color-text-on-deep); }
.site-footer .brand-col .wordmark { color: var(--color-text-on-deep); }
.site-footer .brand-col p { margin-top: var(--space-2); max-width: 30ch; }
.site-footer .social { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.site-footer .social a { display: inline-flex; padding: var(--space-1); border: 1px solid var(--color-text-muted-on-deep); border-radius: var(--radius-sm); }
.site-footer .social a:hover { border-color: var(--color-text-on-deep); }
.site-footer .legal-note {
  border-top: 1px solid var(--wash-accent-14);
  padding-top: var(--space-3);
  font-size: var(--text-xs);
}
.site-footer .legal-note p { max-width: none; margin-bottom: var(--space-2); }
.site-footer .copyright { text-align: center; margin-top: var(--space-3); }

/* Page scaffold: sticky footer */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

/* ── Lacquer plates — engraved figures on midnight, the site's imagery ── */
/* One rule generates every graphic: a fine champagne line on midnight
   lacquer (the dark-theme surface used as an object on the ivory page),
   and the line always passes through a governance mark before it lands. */
.plate {
  position: relative;
  background: var(--color-surface-deep);
  border: 1px solid var(--wash-accent-25);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);
  padding: var(--space-4);
  overflow: hidden;
}
.plate::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 55% at 50% 0%, var(--wash-accent-08), transparent 65%);
  pointer-events: none;
}
.plate-figure { margin: 0; }
.plate-figure figcaption {
  margin-top: var(--space-2);
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.section .plate-figure { max-width: 860px; margin: 0 auto; }

/* Engraved line-work inside plates */
.plate-svg { width: 100%; height: auto; }
.plate-svg .ln,
.plate-svg .ln-strong,
.plate-svg .ln-faint {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plate-svg .ln        { opacity: 0.5; }
.plate-svg .ln-faint  { opacity: 0.25; }
.plate-svg .ln-strong { stroke-width: 1.5; }
.plate-svg .node { fill: var(--color-surface-deep); }
.plate-svg .lbl,
.plate-svg .lbl-gold {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  fill: var(--color-text-muted-on-deep);
  /* knockout halo so labels stay legible where they cross line-work */
  paint-order: stroke;
  stroke: var(--color-surface-deep);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.plate-svg .lbl-gold { fill: var(--color-accent); }

/* Draw-on-view: site.js measures each marked shape (getTotalLength) and
   hides it with an inline dash, then releases it when the figure enters
   view. CSS supplies only the transition, so no-JS and reduced-motion
   readers always see the finished engraving. */
@media (prefers-reduced-motion: no-preference) {
  html.js .draw [pathLength] {
    transition: stroke-dashoffset 1200ms var(--ease-luxe);
    transition-delay: var(--d, 0ms);
  }
  html.js .draw .fade { opacity: 0; }
  html.js .draw.is-drawn .fade {
    opacity: 1;
    transition: opacity 700ms var(--ease-luxe);
    transition-delay: var(--d, 900ms);
  }
}

/* ── Hero split: manifesto left, the considered reply right ───────────── */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 960px) {
  .hero-split { grid-template-columns: 1fr; gap: var(--space-6); }
}
.hero-plate .plate-kicker {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted-on-deep);
  margin-bottom: var(--space-3);
}
.hero-plate .plate-kicker::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent);
}
/* Five worked examples on one horizontal scroll-snap track.
   The track is a plain overflow scroller, so swipe, trackpad and Shift+wheel
   work before a single line of JS runs; site.js only adds the dots, the arrow
   keys and a slow auto-advance. All five slides stay in the DOM and in the
   accessibility tree: nothing is hidden, so a screen reader or a no-JS reader
   simply reads five examples in order. */
.hero-carousel { margin-top: var(--space-3); }
.hero-slides {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hero-slides::-webkit-scrollbar { display: none; }
.hero-slides:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius-sm); }
.hero-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding-right: 1px; /* keeps the snap from rounding into the next slide */
}
.slide-when {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}
.hero-ask {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-text-on-deep);
  max-width: 34ch;
}
.hero-agents {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted-on-deep);
}
/* Pushed to the bottom so the replies line up across slides of unequal length */
.hero-slide .hero-reply { margin-top: auto; }
.hero-dots {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-3);
}
.hero-dot {
  width: 28px; height: 20px;   /* 28x44 hit area around a 2px rule */
  padding: 12px 0;
  background: none; border: 0; cursor: pointer;
  box-sizing: content-box;
}
.hero-dot::before {
  content: '';
  display: block;
  height: 2px;
  background: var(--color-text-muted-on-deep);
  opacity: 0.35;
  transition: opacity var(--duration-base) var(--ease-luxe), background-color var(--duration-base) var(--ease-luxe);
}
.hero-dot:hover::before { opacity: 0.7; }
.hero-dot.is-active::before { background: var(--color-accent); opacity: 1; }
.hero-dot:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-slides { scroll-behavior: smooth; }
}
.hero-reply {
  border-top: 1px solid var(--wash-accent-25);
  padding-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted-on-deep);
  max-width: 46ch;
}
.hero-reply strong { color: var(--color-text-on-deep); font-weight: 500; }
.hero-reply .reply-meta {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ── Fact rail — quiet, true trust signals under the hero ─────────────── */
.fact-rail {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) 0;
  display: flex; flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}
.fact-rail span {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.fact-rail span::before {
  content: '';
  display: inline-block;
  width: var(--space-2); height: 1px;
  background: var(--color-accent);
  vertical-align: middle;
  margin-right: var(--space-1);
}

/* ── MITRA acronym — the name, set like an engraved plaque ────────────── */
.acronym { text-align: center; }
.acronym .eyebrow { margin-bottom: var(--space-4); }
.acronym-mark {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 550;
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* recentre tracked capitals */
  line-height: 1;
}
.acronym-mark .acr-l { display: inline-block; }
.acronym-definition {
  margin: var(--space-4) auto 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--color-primary);
  max-width: 32ch;
}
.acronym-definition .amp { color: var(--color-accent-text); }
.acronym .rule-gold.centered { margin-top: var(--space-4); margin-bottom: var(--space-3); }
.acronym-tagline {
  margin: 0 auto;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  max-width: none;
}
/* Letters cascade in as the plaque enters view (rides the .reveal observer) */
@media (prefers-reduced-motion: no-preference) {
  html.js .acronym .acr-l { opacity: 0; transform: translateY(0.3em); }
  html.js .acronym.is-visible .acr-l {
    opacity: 1; transform: none;
    transition: opacity var(--duration-slow) var(--ease-luxe),
                transform var(--duration-slow) var(--ease-luxe);
  }
  html.js .acronym.is-visible .acr-l:nth-child(2) { transition-delay: 70ms; }
  html.js .acronym.is-visible .acr-l:nth-child(3) { transition-delay: 140ms; }
  html.js .acronym.is-visible .acr-l:nth-child(4) { transition-delay: 210ms; }
  html.js .acronym.is-visible .acr-l:nth-child(5) { transition-delay: 280ms; }
}

/* Numbered steps inside def-rows (a real sequence: how membership begins) */
.step-num {
  font-family: var(--font-display);
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  margin-right: var(--space-1);
  font-variant-numeric: oldstyle-nums;
}

/* ── Staggered reveal for grouped children (tier rows, plate groups) ──── */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal-stagger > * { opacity: 0; transform: translateY(var(--space-2)); }
  html.js .reveal-stagger.is-visible > * {
    opacity: 1; transform: none;
    transition: opacity var(--duration-slow) var(--ease-luxe),
                transform var(--duration-slow) var(--ease-luxe);
  }
  html.js .reveal-stagger.is-visible > :nth-child(2) { transition-delay: 90ms; }
  html.js .reveal-stagger.is-visible > :nth-child(3) { transition-delay: 180ms; }
  html.js .reveal-stagger.is-visible > :nth-child(4) { transition-delay: 270ms; }
  html.js .reveal-stagger.is-visible > :nth-child(5) { transition-delay: 360ms; }
  html.js .reveal-stagger.is-visible > :nth-child(6) { transition-delay: 450ms; }
}

/* ── App showcase — the member app, framed like the lacquer plates ────── */
.app-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-6) var(--space-4);
  justify-items: center;
  align-items: start;
}
.app-phone { margin: 0; }
.app-phone .phone {
  width: min(270px, 100%);
  margin: 0 auto;
  background: var(--color-surface-deep);
  border: 1px solid var(--wash-accent-25);
  border-radius: 44px;
  padding: 10px;
  box-shadow: var(--shadow-float);
  transition: transform var(--duration-base) var(--ease-luxe),
              border-color var(--duration-base) var(--ease-luxe);
}
.app-phone:hover .phone { transform: translateY(-4px); border-color: var(--color-border-accent); }
.app-phone .phone img { width: 100%; height: auto; border-radius: 34px; display: block; }
.app-phone figcaption {
  margin: var(--space-2) auto 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  max-width: 30ch;
}
.app-note {
  margin: var(--space-5) auto 0;
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  max-width: none;
}

/* ── Ecosystem figure ─────────────────────────────────────────────────── */
.ecosystem-figure { max-width: 680px; margin: 0 auto; }
.ecosystem-figure .plate { padding: var(--space-5); }

/* ── Reveal on scroll — deliberate, reduced-motion aware ──────────────── */
/* Hidden state only applies once JS has stamped html.js (inline head script),
   so content is never invisible for no-JS readers or crawlers. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(var(--space-2)); }
  html.js .reveal.is-visible {
    opacity: 1; transform: none;
    transition: opacity var(--duration-slow) var(--ease-luxe),
                transform var(--duration-slow) var(--ease-luxe);
  }
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ── Lead-form authentication & consent (ADR 0002) ─────────────────────── */
.lead-steps { display: flex; gap: var(--space-3); list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.lead-steps .step {
  font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted); padding-bottom: 2px; border-bottom: 1px solid var(--color-border);
}
.lead-steps .step.is-current { color: var(--color-primary); border-bottom-color: var(--color-accent); }
.lead-steps .step.is-done { color: var(--color-text-secondary); border-bottom-color: var(--color-accent); }
/* Without JS the lead flow cannot run at all (ADR 0002 requires a verified-phone
   identity, which is browser work), so a step indicator pointing at a form that
   will never appear is noise. The <noscript> note carries the explanation. */
html:not(.js) .lead-steps { display: none; }
.auth-gate p { margin: 0 0 var(--space-2); color: var(--color-text-secondary); }
.auth-gate .auth-note, .signed-in-bar, .consent-note {
  font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2);
}
.signed-in-bar { margin: 0 0 var(--space-2); }
.linklike {
  background: none; border: none; padding: 0; font: inherit; font-size: inherit;
  color: var(--color-primary); text-decoration: underline; cursor: pointer;
}
.consent { border: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); }
.consent legend { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); padding: 0 var(--space-1); }
.consent label { display: flex; gap: var(--space-1); align-items: baseline; font-size: var(--text-sm); color: var(--color-text-secondary); margin: var(--space-1) 0; }
.consent input[type="checkbox"] { flex: none; }
.field-error { font-size: var(--text-xs); color: var(--color-danger); margin: 2px 0 0; }

/* ── Cookie & storage notice banner (injected by site.js) ──────────────── */
.storage-notice {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  justify-content: center; padding: var(--space-2) var(--space-3);
  background: var(--color-surface); border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.06);
}
.storage-notice p {
  margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary);
  max-width: 60ch;
}
.storage-notice a { color: var(--color-primary); }
.storage-notice .notice-dismiss { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .storage-notice { animation: notice-rise 320ms ease-out; }
  @keyframes notice-rise {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}

/* ── News cards, article hero, pagination, tags (scripts/publish-news.mjs
   generates this markup; see NEWS_PUBLISHING.md) ───────────────────────── */
.news-card { display: flex; flex-direction: column; }
.news-card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-tile);
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3);
}
.news-card-media img { width: 100%; height: 100%; object-fit: cover; }
.news-card-cat { color: var(--color-accent-text); font-weight: 600; }
.news-card h2 { margin-top: var(--space-1); margin-bottom: var(--space-1); font-size: var(--text-xl); }
.news-card-byline { color: var(--color-text-muted); font-size: var(--text-xs); }
.news-card-readmore { display: none; } /* decorative duplicate of the title link; see aria-hidden in render.mjs */

.news-hero-media {
  aspect-ratio: 16 / 9;
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0;
  border-radius: 0;
}
@media (min-width: 640px) {
  .news-hero-media { border-radius: var(--radius-lg); margin: var(--space-4) 0 0; }
}

.news-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-4); padding: 0; }
.news-tags li {
  font-size: var(--text-xs); color: var(--color-text-secondary);
  background: var(--color-surface-tile); border-radius: var(--radius-pill);
  padding: 0.25rem var(--space-2);
}
.back-to-news { margin-top: var(--space-6); }

.pagination {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border);
}
.pagination-status { color: var(--color-text-muted); font-size: var(--text-sm); }
.pagination a { font-weight: 600; }

.related-articles { border-top: 1px solid var(--color-border); }