/* ============================================================
   Mnem marketing site — shared stylesheet.

   House style: the BÄRŌ DYNAMICS instrument plate, as shipped at
   barodynamics.org. Warm dark paper, ink linework, hairline rules,
   schematic precision, classical numerals, a single oxblood accent
   used sparingly. No gradients, no glow, squared plates, mono
   uppercase captions. The Mnem brain glyph is the one mark that
   stays ours; everything around it is drawn in the studio's ink.

   Fonts are self-hosted (Inter + Roboto Mono) — no third-party
   requests. Responsive without JS. Every legacy class name from
   the previous stylesheet still resolves, so page markup that
   predates this file keeps rendering.
   ============================================================ */

@import url("../assets/fonts/fonts.css");

:root {
  /* BÄRŌ DYNAMICS palette — verbatim from barodynamics.org */
  --paper:     #14120f;
  --paper-2:   #1c1916;
  --paper-3:   #242019;
  --ink:       #e8e4d9;
  --ink-2:     #d9d4c7;
  --ink-mute:  #a9a396;
  --ink-low:   #837d6f;
  --ink-faint: #57534a;
  --rule:      #3b372e;
  --rule-2:    #2a2621;
  --accent:    #d97757;   /* singular oxblood, used sparingly */
  --accent-hi: #eda183;   /* accent hover */

  /* functional colors, warm-harmonized */
  --ok:  #a5b87e;
  --err: #cf5f4c;

  /* inner double rule of every plate */
  --plate-inner: rgba(232, 228, 217, 0.42);
  --plate-shadow: inset 0 0 0 1px rgba(59, 55, 46, 0.78);

  /* legacy aliases kept so nothing breaks */
  --bg: var(--paper);
  --bg-soft: var(--paper-2);
  --panel: var(--paper-2);
  --panel-hi: var(--paper-3);
  --line: var(--rule);
  --line-soft: var(--rule-2);
  --text: var(--ink);
  --text-dim: var(--ink-mute);
  --accent-dim: var(--ink-faint);
  --glow: transparent;

  /* schematic plates are squared */
  --radius: 0px;
  --radius-sm: 0px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--paper);
  /* faint laid-paper grain, as on the studio site */
  background-image:
    radial-gradient(circle at 25% 35%, rgba(232, 228, 217, 0.012) 0, transparent 60%),
    radial-gradient(circle at 75% 65%, rgba(232, 228, 217, 0.012) 0, transparent 60%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* ---------- mind atlas field ----------
   The studio site sits on a faint cartographic field: contour lines,
   a survey route, measurement ticks. Ours is a lighter, static cut of
   the same drawing, fixed behind the page so the plates float over
   it. Pure CSS; a single inline SVG. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 1600px auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1400' fill='none' stroke='%23e8e4d9'%3E%3Cg stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M-40 260C220 180 380 340 620 300S980 120 1240 210 1520 380 1680 300'/%3E%3Cpath d='M-40 420C260 330 420 500 700 440S1060 260 1300 360 1500 560 1680 460'/%3E%3Cpath d='M-40 640C200 560 360 720 640 660S1000 480 1260 590 1480 780 1680 680'/%3E%3Cpath d='M-40 900C240 820 400 980 660 920S1040 740 1280 850 1520 1040 1680 940'/%3E%3Cpath d='M-40 1160C220 1080 380 1240 620 1180S980 1000 1240 1110 1520 1280 1680 1200'/%3E%3C/g%3E%3Cg stroke-opacity='0.045' stroke-width='1' stroke-dasharray='2 9'%3E%3Cpath d='M120 -20V1420M800 -20V1420M1480 -20V1420'/%3E%3C/g%3E%3Cg stroke-opacity='0.12' stroke-width='1'%3E%3Cpath d='M160 300h22M171 289v22M1380 620h22M1391 609v22M700 1010h22M711 999v22'/%3E%3C/g%3E%3Cg fill='%23d97757' fill-opacity='0.35' stroke='none'%3E%3Ccircle cx='1391' cy='620' r='2'/%3E%3Ccircle cx='171' cy='300' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

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

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(217, 119, 87, 0.45); }
a:hover { color: var(--accent-hi); border-bottom-color: var(--accent-hi); text-decoration: none; }

h1, h2, h3 { line-height: 1.2; letter-spacing: 0.01em; margin: 0 0 0.5em; }
h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.005em; }
h2 { font-size: 1.45rem; font-weight: 600; letter-spacing: 0.04em; }
h3 { font-size: 1.06rem; font-weight: 600; letter-spacing: 0.02em; }

p { margin: 0 0 1em; }

.container { width: min(1080px, calc(100% - 64px)); margin-inline: auto; }
.container.narrow { width: min(760px, calc(100% - 64px)); }

.muted { color: var(--ink-mute); }
.mono { font-family: var(--mono); font-size: 0.92em; word-break: break-all; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--paper-3); color: var(--ink);
  padding: 8px 14px; border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.skip-link:focus { left: 8px; }

/* ---------- tick bands ----------
   Thin tick-marked bands at the very top and bottom of the page,
   echoing the marginal scale of the studio dial. */
.tick-band {
  height: 22px;
  background-image: repeating-linear-gradient(
    to right,
    var(--ink) 0, var(--ink) 1px,
    transparent 1px, transparent 12px
  );
  background-position: 0 50%;
  background-size: 100% 6px;
  background-repeat: repeat-x;
  position: relative;
  opacity: 0.55;
}
.tick-band::before,
.tick-band::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  border-left: 1px solid var(--ink);
}
.tick-band::before { left: 0; }
.tick-band::after  { right: 0; }

/* ---------- brand ---------- */

.brand { font-weight: 600; letter-spacing: 0.02em; }

/* brain mark — the Mnem glyph, drawn in ink linework */
.logo-brain {
  width: 22px; height: 22px; flex: none;
  color: var(--ink);
  transition: color 0.15s ease;
}

.logo {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink);
  border-bottom: none;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.logo:hover { color: var(--ink); border-bottom: none; }
.logo:hover .logo-brain { color: var(--accent); }
.logo .brand { font-family: var(--mono); font-weight: 500; letter-spacing: 0.28em; }
.logo .folio { color: var(--ink-low); letter-spacing: 0.18em; font-size: 0.66rem; }

/* crosshair — the stamp's register mark */
.crosshair {
  display: inline-block; width: 10px; height: 10px; flex: none;
  background-image:
    linear-gradient(to right,  var(--ink) 0, var(--ink) 100%),
    linear-gradient(to bottom, var(--ink) 0, var(--ink) 100%);
  background-size: 10px 1px, 1px 10px;
  background-position: center, center;
  background-repeat: no-repeat;
  opacity: 0.8;
}

/* legacy dot, kept quiet in case any page still carries it */
.logo-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
  display: inline-block; flex: none;
}

/* ---------- header stamp ----------
   Reads as the stamp band of a folio, not a web navbar: register
   mark, wordmark, folio number on the left; a numbered plate index
   in the middle; one instrument button on the right. */

.site-header {
  position: relative;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid var(--rule);
}

.header-inner,
.stamp {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 18px 0 14px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-low);
}

.site-nav,
.stamp-index {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-nav a,
.stamp-index a {
  color: var(--ink-2);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding: 4px 0 2px;
  white-space: nowrap;
}
.site-nav a:hover,
.stamp-index a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.site-nav a.active,
.stamp-index a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: none;
}
.site-nav a .rn,
.stamp-index a .rn { color: var(--accent); margin-right: 6px; }
.site-nav a.active .rn { color: inherit; }

.header-cta { flex: none; }

/* ---------- buttons ----------
   The studio button: paper plate, ink hairline, mono caps, and an
   ink/paper inversion on hover. Primary is pre-inverted. */

.btn {
  display: inline-block; text-align: center;
  padding: 14px 26px;
  border: 1px solid var(--ink);
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background-color: var(--ink); color: var(--paper); border-color: var(--ink); text-decoration: none; }
.btn:disabled { opacity: 0.55; cursor: wait; }

.btn-primary {
  background-color: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover { background-color: var(--paper); color: var(--ink); }

.btn-ghost {
  border-color: var(--rule);
  color: var(--ink-mute);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; }

.btn-small { padding: 9px 16px; font-size: 0.66rem; }
.btn-block { width: 100%; }

.btn .brand { font-family: inherit; font-weight: inherit; letter-spacing: inherit; }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 8px; }

/* ---------- plate header ----------
   Every section opens the way a plate does on the studio site:
   accent numeral, Inter label, mono legend on the right, one
   hairline underneath. */

.plate-header {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--rule);
  margin: 0 0 28px;
}
.plate-header .numeral {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  color: var(--accent);
  white-space: nowrap;
}
.plate-header .label {
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.plate-header .legend {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-low);
}
.plate-header .legend a { color: inherit; border-bottom-color: var(--ink-faint); }
.plate-header .legend a:hover { color: var(--accent); }

/* pid — the ordinal caption line above a title (studio program card) */
.pid {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.32em;
  color: var(--ink-low);
  text-transform: uppercase;
  margin: 0 0 10px;
  display: flex; align-items: center; gap: 10px;
}
.pid::after { content: ""; height: 1px; flex: 1; background: var(--rule); opacity: 0.8; }
.pid .ord { color: var(--accent); }
.pid .dot { width: 4px; height: 4px; background: var(--ink-faint); border-radius: 9999px; flex: none; }

/* ---------- page hero (sub-pages) ---------- */

.page-hero { padding: 40px 0 8px; }
.page-hero .plate-header { margin-bottom: 30px; }
.page-hero h1 { max-width: 22ch; margin-bottom: 0.4em; }

.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}
.eyebrow a { color: inherit; border-bottom: none; }

.glow-text { color: var(--accent); text-shadow: none; }

.lede {
  font-size: 1.08rem;
  color: var(--ink-mute);
  max-width: 62ch;
  line-height: 1.6;
}

.hero-note {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: var(--ink-low);
  margin-top: 18px;
  max-width: 62ch;
}

/* ---------- home hero ----------
   Centered, like the studio folio: the brain mark set in an
   instrument dial, a balanced display line, a mono colophon of
   ethos lines, a dialog rule with end-stops, and a plumb-line
   scroll cue. */

.hero { padding: 64px 0 40px; text-align: center; position: relative; }

.hero-inner { display: block; }
.hero-copy { max-width: 800px; margin: 0 auto; }
.hero .cta-row { justify-content: center; margin-top: 34px; }
.hero .hero-note { margin: 20px auto 0; }

.hero-visual { display: flex; justify-content: center; margin: 0 auto 38px; }

/* memory field — the Mnem mark as an instrument dial: concentric
   hairline rings, one index dot on the sweep, the brain glyph
   engraved at the centre. Pure CSS. */
.memory-field { position: relative; width: min(300px, 62vw); aspect-ratio: 1; }

.memory-field::before {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
}
.memory-field::after {
  content: "MNEM · MEMORY FIELD";
  position: absolute; left: 50%; bottom: -30px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  color: var(--ink-low);
  white-space: nowrap;
}

/* register ticks around the outer ring */
.memory-field .mf-ticks {
  position: absolute; inset: -6px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, var(--ink-faint) 0deg 0.6deg, transparent 0.6deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 0, transparent calc(50% - 5px), #000 calc(50% - 5px));
          mask: radial-gradient(circle, transparent 0, transparent calc(50% - 5px), #000 calc(50% - 5px));
  opacity: 0.7;
}

.mf-ring {
  position: absolute; inset: 7%;
  border-radius: 50%;
  border: 1px solid var(--ink-faint);
  animation: mf-spin 46s linear infinite;
}
.mf-ring::before {
  content: ""; position: absolute; top: -3px; left: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}

.mf-core {
  position: absolute; inset: 26%;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background-color: rgba(28, 25, 22, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23e8e4d9' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M9.5 2A2.5 2.5 0 0 1 12 4.5A2.5 2.5 0 0 1 9.5 7A2.5 2.5 0 0 1 7 4.5A2.5 2.5 0 0 1 9.5 2Z'/%3E%3Cpath d='M14.5 2A2.5 2.5 0 0 1 17 4.5A2.5 2.5 0 0 1 14.5 7A2.5 2.5 0 0 1 12 4.5A2.5 2.5 0 0 1 14.5 2Z'/%3E%3Cpath d='M4.5 12.5a2.5 2.5 0 0 1 0-5'/%3E%3Cpath d='M19.5 12.5a2.5 2.5 0 0 0 0-5'/%3E%3Cpath d='M9 16.35V21'/%3E%3Cpath d='M15 16.35V21'/%3E%3Cpath d='M12 13a4 4 0 0 0-4 4'/%3E%3Cpath d='M12 13a4 4 0 0 1 4 4'/%3E%3Cpath d='M12 7v1'/%3E%3Cpath d='M8.5 9.5a4 4 0 0 0-2.83 6.83'/%3E%3Cpath d='M15.5 9.5a4 4 0 0 1 2.83 6.83'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 52%;
  box-shadow: none;
  animation: mf-breathe 9s ease-in-out infinite;
}

/* crosshair through the dial — survey axes */
.mf-axes {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rule-2) 0, var(--rule-2) 100%),
    linear-gradient(to bottom, var(--rule-2) 0, var(--rule-2) 100%);
  background-size: 100% 1px, 1px 100%;
  background-position: center, center;
  background-repeat: no-repeat;
  opacity: 0.8;
}

.mf-dot {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-low);
  opacity: 0.9;
  animation: mf-drift 11s ease-in-out infinite;
}
.mf-dot-1 { top: 15%; left: 24%; }
.mf-dot-2 { top: 70%; left: 12%; animation-delay: -2s; }
.mf-dot-3 { top: 22%; left: 79%; animation-delay: -4s; background: var(--accent); }
.mf-dot-4 { top: 82%; left: 68%; animation-delay: -6s; }
.mf-dot-5 { top: 48%; left: 92%; animation-delay: -3s; }

@keyframes mf-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.82; } }
@keyframes mf-spin { to { transform: rotate(360deg); } }
@keyframes mf-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, -6px); } }

/* display line + colophon */
.tagline {
  margin: 0 auto;
  max-width: 760px;
  font-family: var(--font);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.7vw, 1.8rem);
  line-height: 1.38;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.tagline .glow-text { color: var(--accent); }
.tagline .sub,
.colophon-lines {
  display: block;
  margin: 22px auto 0;
  color: var(--ink-low);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  line-height: 2.1;
  text-transform: uppercase;
}
.tagline .sub em,
.colophon-lines em { font-style: normal; color: var(--ink-mute); }

.dialog-rule {
  margin: 48px auto 0;
  max-width: 720px;
  height: 1px;
  background-color: var(--rule);
  position: relative;
}
.dialog-rule::before,
.dialog-rule::after {
  content: ""; position: absolute; top: -3px; width: 7px; height: 7px;
  border: 1px solid var(--ink); border-radius: 9999px; background-color: var(--paper);
}
.dialog-rule::before { left: -3px; }
.dialog-rule::after  { right: -3px; }

.scroll-cue {
  width: 1px; height: 44px;
  margin: 0 auto;
  background: var(--ink);
  opacity: 0.5;
  position: relative;
  transform-origin: top;
  animation: plumb-drop 1.2s cubic-bezier(0.25, 0.8, 0.3, 1) both;
  animation-delay: 400ms;
}
.scroll-cue::before,
.scroll-cue::after {
  content: ""; position: absolute; left: -3px; width: 7px; height: 1px; background: var(--ink);
}
.scroll-cue::before { top: 14px; }
.scroll-cue::after  { top: 28px; }
.scroll-cue .bob {
  position: absolute; bottom: -3px; left: -2px;
  width: 5px; height: 5px;
  border: 1px solid var(--ink); border-radius: 9999px;
  background: var(--accent);
}
@keyframes plumb-drop { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- sections ---------- */

main { counter-reset: plate; }

.section { padding: 48px 0; }

/* A section's opening h2 becomes a plate header: "§ 01" accent
   ordinal, the title, one hairline. Numbered automatically so the
   pages read as a bound folio without hand-typed numerals. */
.section > .container > h2 {
  counter-increment: plate;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  font-size: 1.45rem;
  letter-spacing: 0.04em;
}
.section > .container > h2::before {
  content: "§ " counter(plate, decimal-leading-zero);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  color: var(--accent);
  white-space: nowrap;
}
.section > .container > h2 .tag { margin-left: auto; align-self: center; }

.section h2 { padding-bottom: 8px; }

.section-lede { color: var(--ink-mute); max-width: 66ch; margin-bottom: 30px; }

.section-footnote { color: var(--ink-mute); font-size: 0.9rem; margin-top: 26px; }

/* connector strip */

.connector-strip {
  border-block: 1px solid var(--rule);
  background: rgba(28, 25, 22, 0.6);
  padding: 26px 0;
}

.strip-label {
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-low);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
}
.strip-label::after { content: ""; height: 1px; flex: 1; background: var(--rule); opacity: 0.8; }

.strip-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.strip-list a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--paper);
}
.strip-list a:hover {
  color: var(--accent); border-color: var(--ink-faint);
  border-bottom-color: var(--ink-faint);
}

/* ---------- plates (cards) ----------
   The studio card: warm paper, hairline rule, an inner double rule
   at 12px, and a quiet lift on hover. Every card, step, and price
   plate on the site shares it. */

.grid { display: grid; gap: 18px; counter-reset: card; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card,
.steps li,
.price-card,
.metric,
.cta-plate,
.person {
  position: relative;
  isolation: isolate;
  background-color: rgba(20, 18, 15, 0.96);
  border: 1px solid var(--rule);
  box-shadow: var(--plate-shadow);
  transition: border-color 180ms ease, box-shadow 220ms ease, transform 160ms ease;
}
.card::before,
.steps li::after,
.price-card::before,
.metric::before,
.cta-plate::before,
.person::before {
  content: "";
  position: absolute; inset: 12px;
  border: 1px solid var(--plate-inner);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.card > *, .steps li > *, .price-card > *, .metric > *, .cta-plate > *, .person > * {
  position: relative; z-index: 1;
}
.card:hover,
.steps li:hover,
.price-card:hover,
.metric:hover,
.cta-plate:hover,
.person:hover {
  border-color: rgba(232, 228, 217, 0.62);
  box-shadow: inset 0 0 0 1px rgba(232, 228, 217, 0.34), 0 12px 28px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

.card { padding: 28px 28px 20px; }
.card h3 { color: var(--ink); margin-bottom: 12px; }
.card p { color: var(--ink-2); font-size: 0.92rem; line-height: 1.6; }
.card p:last-child { margin-bottom: 0; }

/* index line above the card title: "§ 01 ————" */
.grid .card { counter-increment: card; }
.grid .card > h3:first-child::before {
  content: "§ " counter(card, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.32em;
  color: var(--ink-low);
  margin-bottom: 14px;
  text-transform: uppercase;
  /* trailing hairline, drawn from the right edge to just past the ordinal */
  background: linear-gradient(var(--rule), var(--rule)) no-repeat right center;
  background-size: calc(100% - 4.4em) 1px;
}

.feature-grid .card { border-top: 1px solid var(--rule); }

/* steps */

.steps {
  list-style: none; counter-reset: step;
  margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.steps li { counter-increment: step; padding: 26px 28px; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--accent);
  margin-bottom: 14px;
  position: relative; z-index: 1;
}
.steps li h3 { margin-bottom: 10px; }
.steps li p { color: var(--ink-2); font-size: 0.92rem; line-height: 1.6; margin-bottom: 0; }

.steps.steps-compact { grid-template-columns: 1fr; gap: 12px; }
.steps.steps-compact li { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; padding: 18px 22px; }
.steps.steps-compact li::before { margin-bottom: 0; align-self: start; margin-top: 4px; }
.steps.steps-compact li h3 { grid-column: 2; margin-bottom: 2px; }
.steps.steps-compact li p { grid-column: 2; }

/* ---------- metric plate ----------
   "Verified performance" on the studio site: mono value with a
   dagger footnote, a plain-language label, a mono source line,
   and method notes folded beneath. Values are filled from
   compare-data.json — no hand-typed numbers. */

.metric-plate { border: 0; background: transparent; }
.metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.metric { padding: 26px 24px; text-align: left; }
.metric .value {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.55rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  font-variant-numeric: tabular-nums;
}
.metric .value .fn {
  font-size: 0.85rem;
  color: var(--ink-faint);
  text-decoration: none;
  border: 0;
  vertical-align: super;
  margin-left: 3px;
}
.metric .value .fn:hover { color: var(--accent); }
.metric .value [data-metric]:empty::before { content: "—"; color: var(--ink-faint); }
.metric .label { font-size: 0.78rem; color: var(--ink-mute); line-height: 1.5; }
.metric .src {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 12px;
}

.method-notes {
  margin-top: 18px;
  border-top: 1px solid var(--rule-2);
  padding: 10px 0 0;
  border-bottom: none;
}
.method-notes > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0;
}
.method-notes > summary::-webkit-details-marker { display: none; }
.method-notes > summary::after { content: none; }
.method-notes > summary:hover { color: var(--accent-hi); }
.method-notes[open] {
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  padding: 10px 18px 14px;
}
.method-notes ol { margin: 12px 0 0; padding: 0 0 0 26px; max-width: 72ch; }
.method-notes li { font-size: 0.8rem; line-height: 1.6; color: var(--ink-mute); margin-bottom: 8px; }
.method-notes li::marker { font-family: var(--mono); font-size: 0.68rem; color: var(--accent); }
.method-notes p { color: var(--ink-mute); font-size: 0.8rem; margin: 12px 0 0; }

/* ---------- CTA plate ----------
   The studio's integration plate: a single centred plate, rule
   under the title, prose, one button. */

.cta-band {
  margin: 30px 0 0;
  padding: 24px 0 8px;
  border: 0;
  background: transparent;
  text-align: left;
}
.cta-inner,
.cta-plate {
  position: relative;
  margin: 0 auto;
  max-width: 720px;
  padding: 36px 36px 32px;
  background-color: var(--paper-2);
  border: 1px solid var(--rule);
  box-shadow: var(--plate-shadow);
}
.cta-inner::before {
  content: "";
  position: absolute; inset: 12px;
  border: 1px solid var(--plate-inner);
  opacity: 0.9;
  pointer-events: none;
}
.cta-inner > * { position: relative; }
.cta-band h2,
.cta-plate h2 {
  margin: 0 0 12px;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.cta-band p,
.cta-plate p { color: var(--ink-2); font-size: 0.96rem; line-height: 1.6; max-width: 540px; margin: 0 0 22px; }
.cta-band .cta-row,
.cta-plate .cta-row { justify-content: flex-start; margin: 0; }
.cta-quote {
  display: block;
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  max-width: 600px;
}
.cta-attr {
  display: block;
  margin: 4px 0 24px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---------- pricing ---------- */

.pricing-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; align-items: stretch;
  counter-reset: plan;
}

.price-card {
  display: flex; flex-direction: column;
  padding: 30px;
  counter-increment: plan;
}
.price-card > h2 {
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  padding: 0;
  border-bottom: none;
}
.price-card > h2::before {
  content: "№ " counter(plan, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.32em;
  color: var(--accent);
  margin-bottom: 14px;
  background: linear-gradient(var(--rule), var(--rule)) no-repeat right center;
  background-size: calc(100% - 4.4em) 1px;
}
.price-card .btn { margin-top: auto; }

.price-card.featured { border-color: var(--accent); }
.price-card.featured::before { border-color: rgba(217, 119, 87, 0.35); }

.flag {
  position: absolute; top: -11px; right: 20px;
  background: var(--paper);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 3px 10px;
  z-index: 2;
}

.price { margin: 6px 0 2px; }
.price .amount { font-family: var(--mono); font-size: 2.2rem; font-weight: 500; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.price .per { color: var(--ink-mute); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; margin-left: 6px; }
.price-note { color: var(--ink-low); font-size: 0.84rem; }

.checklist { list-style: none; margin: 14px 0 22px; padding: 0; }
.checklist li {
  position: relative;
  padding: 5px 0 5px 24px;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.55;
}
.checklist li::before {
  content: "";
  position: absolute; left: 2px; top: 0.95em;
  width: 10px; height: 1px;
  background: var(--accent);
}

/* Two-plan pricing grid: Personal (featured, with reservation) + Business. */
.pricing-grid-2 {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  max-width: 980px;
  margin: 0 auto;
}

/* founding-seat reservation, sits at the foot of the Personal plate */
.reserve-form {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.reserve-form .btn { margin-top: 4px; }
.reserve-title {
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.reserve-count {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-low);
  margin-bottom: 14px;
}
.reserve-count [data-reserve] { color: var(--ink); }
.reserve-fine { color: var(--ink-low); font-size: 0.78rem; margin-top: 12px; }

label.field { display: block; }
.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-low);
  margin-bottom: 7px;
}
.check {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px;
  align-items: start;
  margin: 0 0 16px;
  color: var(--ink-2);
  font-size: 0.86rem; line-height: 1.5;
  cursor: pointer;
}
.check input[type="checkbox"] {
  width: 16px; height: 16px; margin: 3px 0 0;
  accent-color: var(--accent);
  padding: 0;
}
.check strong { color: var(--ink); font-weight: 500; }

/* partner callout under the pricing grid */
.partner-callout {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px; align-items: center;
  max-width: 980px;
  margin: 28px auto 0;
  padding: 26px 30px;
}
.partner-callout h3 { font-size: 1.05rem; margin: 4px 0 8px; }
.partner-callout p:last-child { color: var(--ink-2); font-size: 0.92rem; margin: 0; }
@media (max-width: 620px) { .partner-callout { grid-template-columns: 1fr; } }

/* partner trial page */
.trial-card { max-width: 560px; }
.trial-done { margin-top: 18px; }
.trial-done .brand { font-weight: 600; }

.seat-row { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.seat-row label { color: var(--ink-mute); font-size: 0.92rem; }
.seat-row input { width: 90px; }

.card-footnote { font-size: 0.84rem; margin: 12px 0 0; }

/* FAQ — the studio's drafting-style expander */

details {
  border-bottom: 1px solid var(--rule-2);
  padding: 6px 0;
}
details summary {
  cursor: pointer;
  font-weight: 600;
  padding: 12px 0 12px 26px;
  list-style: none;
  position: relative;
  color: var(--ink);
}
details summary::-webkit-details-marker { display: none; }
details summary::before {
  content: "+";
  position: absolute; left: 2px; top: 10px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 1rem; font-weight: 400;
}
details[open] summary::before { content: "−"; }
details summary:hover { color: var(--accent-hi); }
details p { color: var(--ink-mute); margin: 0 0 16px 26px; font-size: 0.95rem; }
details[open]:not(.method-notes) {
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  padding: 6px 18px 4px;
  margin: 4px 0;
}

/* ---------- forms ---------- */

.form { margin: 8px 0 22px; }

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-low);
  margin-bottom: 7px;
}

input, textarea, select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 11px 14px;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ink-low);
  box-shadow: inset 0 0 0 1px var(--ink-faint);
}
textarea { resize: vertical; }

.status {
  margin: 14px 0 0;
  padding: 11px 15px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  font-size: 0.92rem;
}
.status.is-ok { border-color: rgba(165, 184, 126, 0.5); color: var(--ok); }
.status.is-error { border-color: rgba(207, 95, 76, 0.5); color: var(--err); }

/* ---------- account ---------- */

.account-card { margin-bottom: 18px; }
.account-card h2 { font-size: 1.15rem; letter-spacing: 0.04em; padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; }

.kv { margin: 0; display: grid; gap: 10px; }
.kv > div {
  display: grid; grid-template-columns: 130px 1fr; gap: 12px;
  align-items: baseline;
}
.kv dt {
  color: var(--ink-low);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.kv dd { margin: 0; }

.badge {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper);
}
.badge.is-inactive { color: var(--err); border-color: rgba(207, 95, 76, 0.5); background: transparent; }

.device-list { list-style: none; margin: 12px 0 6px; padding: 0; }
.device-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 4px;
  border-top: 1px solid var(--rule-2);
}
.device-list .device-name { font-weight: 600; }
.device-list .device-id { color: var(--ink-low); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; }
.device-list .btn { margin-left: auto; }
.device-list .empty { color: var(--ink-mute); border-top: none; }

.account-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 4px; }

/* ---------- download ---------- */

.download-ready { margin: 26px 0; padding-bottom: 22px; }
.download-ready h2 { font-size: 1.15rem; letter-spacing: 0.04em; }

/* ---------- docs & prose ---------- */

.docs-body h2 { margin-top: 40px; font-size: 1.2rem; padding-bottom: 8px; border-bottom: 1px solid var(--rule-2); }
.docs-body h2:first-child { margin-top: 0; }
.docs-body h3 { margin-top: 28px; color: var(--ink); }
.docs-body p, .docs-body li { color: var(--ink-2); }

pre {
  background: #0f0e0b;
  border: 1px solid var(--rule-2);
  box-shadow: var(--plate-shadow);
  padding: 16px 18px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.55;
}
code { font-family: var(--mono); font-size: 0.9em; color: var(--ink-2); background: var(--paper-3); padding: 1px 5px; }
pre code { color: var(--ink-2); background: transparent; padding: 0; }

.docs-grid .card h3 a { color: inherit; border-bottom: none; }
.docs-grid .card h3 a:hover { color: var(--accent); }

.prose { padding: 40px 0 60px; }
.prose .plate-header { margin-bottom: 30px; }
.prose h1 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.prose h2 { font-size: 1.15rem; letter-spacing: 0.04em; margin-top: 38px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-2); }
.prose p, .prose li { color: var(--ink-mute); }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--ink); }

/* ---------- people (business contact) ---------- */

.people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.person { padding: 24px 26px; }
.person .role {
  font-family: var(--mono);
  font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-low); margin-bottom: 10px;
}
.person .name { font-weight: 600; font-size: 1.1rem; letter-spacing: 0.02em; margin-bottom: 8px; }
.person .lines { display: grid; gap: 4px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ink-mute); }
.person .lines a { color: var(--ink-2); border-bottom-color: var(--ink-faint); }
.person .lines a:hover { color: var(--accent); }

/* ---------- plate rail ----------
   A fixed hairline ruler on the right edge. Each tick is a section
   anchor; the tick of the section in view extends and turns oxblood.
   Active state is set by app.js. */

.plate-rail {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex; flex-direction: column; gap: 20px;
  padding: 14px 0 14px 10px;
  border-left: 1px solid var(--rule);
}
.plate-rail a {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  border: 0;
  height: 14px;
  padding-right: 12px;
  text-decoration: none;
}
.plate-rail .tick {
  display: block; width: 14px; height: 1px;
  background: var(--ink-faint);
  transition: width 200ms ease, background-color 200ms ease;
}
.plate-rail .tag {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-low);
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 180ms ease, transform 180ms ease;
  white-space: nowrap;
  border: 0; padding: 0;
}
.plate-rail a:hover .tag { opacity: 1; transform: none; }
.plate-rail a:hover .tick { width: 26px; background: var(--ink); }
.plate-rail a.is-active .tick { width: 26px; background: var(--accent); }
.plate-rail a.is-active .tag { color: var(--accent); }
@media (max-width: 1240px) { .plate-rail { display: none; } }

/* ---------- footer ----------
   The studio colophon: a motto line in italic, then a mono row.
   Our link columns sit above it, set as stamp indices. */

.site-footer {
  margin-top: 72px;
  border-top: 1px solid var(--rule);
  background: transparent;
  padding: 44px 0 0;
  font-size: 0.92rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.footer-logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.footer-logo .logo-brain { width: 19px; height: 19px; }
.footer-logo .brand { font-family: var(--mono); font-weight: 500; letter-spacing: 0.28em; }
.footer-about p { font-size: 0.88rem; }
.footer-about a { color: var(--ink-2); border-bottom-color: var(--ink-faint); }
.footer-about a:hover { color: var(--accent); }

.footer-col h3 {
  font-family: var(--mono);
  font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-low);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.footer-col h3::after { content: ""; height: 1px; flex: 1; background: var(--rule); opacity: 0.8; }
.footer-col h3 .rn { color: var(--accent); }
.footer-col a {
  display: block; color: var(--ink-mute); padding: 3px 0; border-bottom: none;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.footer-col a:hover { color: var(--accent); border-bottom: none; }

.motto {
  font-family: var(--font);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  text-align: center;
  margin: 40px 0 18px;
}

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px;
  padding: 18px 0 26px;
  border-top: 1px solid var(--rule-2);
  color: var(--ink-low);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.footer-bottom p { margin: 0; }
.footer-bottom .accent { color: var(--accent); }
.footer-bottom .brand { font-weight: 500; letter-spacing: inherit; }
.site-footer .tick-band { margin-top: 0; }

/* ---------- compare page ---------- */

.compare-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.compare-table th,
.compare-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.compare-table th:first-child,
.compare-table td:first-child { white-space: nowrap; }
/* Reference/citation tables carry long system names and sources: those must
   wrap inside the plate rather than push the table past its inner rule. */
.compare-table.wrap-labels th:first-child,
.compare-table.wrap-labels td:first-child { white-space: normal; overflow-wrap: anywhere; }
.compare-table .muted { overflow-wrap: anywhere; }
.card > .compare-table { max-width: 100%; }
.compare-table th {
  color: var(--ink-low);
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.compare-table .num { font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 0.86em; }
.compare-table tfoot th,
.compare-table tr.total th { color: var(--accent); }
.compare-table tr.total th.num { color: var(--ink); }
.card > .compare-table { margin-top: 4px; }

.tag {
  display: inline-block;
  padding: 1px 8px;
  font-family: var(--mono);
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--rule);
  color: var(--ink-mute);
  white-space: nowrap;
  vertical-align: middle;
}
.tag.self { border-color: var(--ink-faint); color: var(--ink-2); }
.tag.ours { border-color: rgba(217, 119, 87, 0.55); color: var(--accent); }

.honesty-list { margin: 8px 0 0; padding-left: 20px; }
.honesty-list li { margin: 7px 0; color: var(--ink-2); }
.honesty-list li::marker { font-family: var(--mono); color: var(--accent); font-size: 0.8em; }

/* ---------- responsive ---------- */

@media (max-width: 940px) {
  .header-cta { display: none; }
  .site-nav, .stamp-index { gap: 14px; margin-left: 0; width: 100%; }
  .memory-field { width: min(260px, 62vw); }
  .grid-3, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-grid, .pricing-grid-2 { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 15.5px; }
  .container, .container.narrow { width: calc(100% - 40px); }
  .hero { padding-top: 40px; }
  .grid-2, .grid-3, .steps, .metric-row { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .header-inner, .stamp { gap: 12px; }
  .logo .folio { display: none; }
  .site-nav, .stamp-index { gap: 10px 14px; font-size: 0.6rem; letter-spacing: 0.14em; }
  .plate-header .legend { margin-left: 0; width: 100%; }
  .section > .container > h2 { font-size: 1.25rem; }
  .kv > div { grid-template-columns: 1fr; gap: 2px; }
  .device-list li { flex-wrap: wrap; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .cta-inner, .cta-plate { padding: 26px 22px 24px; }
  .card, .steps li, .price-card { padding-left: 22px; padding-right: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mf-core, .mf-ring, .mf-dot, .scroll-cue { animation: none; }
  .btn, .btn:hover, .card, .steps li, .price-card, .metric, .cta-plate, .person, .logo-brain, .plate-rail .tick, .plate-rail .tag { transition: none; }
}