/* ============================================================
   DCG v12 · Home
   Static header on a light ground. No scroll-reveals.
   Components read ground tokens (--fg / --rule / --surface),
   so nothing here needs to know which ground it sits on.
   ============================================================ */

/* ============ Header — light, static, tall ============ */
.site-header {
  position: relative; z-index: 20;
  background: var(--white); color: var(--black);
  border-bottom: 1px solid var(--grey-15);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; min-height: 96px;
}
.brand {
  display: flex; align-items: center; gap: 13px;
  font: 500 1.02rem var(--font-display);
  letter-spacing: -.015em; text-decoration: none;
}
.brand-mark { width: 30px; height: 30px; border-radius: 3px; object-fit: cover; flex: none; }
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a {
  font: 400 .88rem var(--font-body); text-decoration: none;
  color: var(--grey-70); transition: color .2s var(--ease);
}
.site-nav a:hover { color: var(--black); }
.header-cta {
  font: 500 .7rem var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: #fff;
  background: var(--signal); border-radius: var(--radius);
  padding: 13px 20px; transition: background .2s var(--ease);
}
.header-cta:hover { background: var(--black); }
@media (max-width: 1080px) {
  .header-inner { flex-wrap: wrap; gap: 14px 24px; padding-block: 20px; min-height: 0; }
  .site-nav { order: 3; width: 100%; flex-wrap: wrap; gap: 8px 22px; }
  .site-nav a { font-size: .82rem; }
}

/* ============ 01 · Hero — light ground, real image ============ */
.hero { background: var(--white); padding-block: clamp(56px, 7vw, 96px) 0; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px); align-items: center;
}
.hero .display { max-width: 15ch; }
.hero .lead { margin-top: 26px; max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-figure { min-width: 0; margin: 0; padding-block: clamp(10px, 1.8vw, 24px); }
.hero-figure .hero-art { width: 100%; height: auto; display: block; }
.hero-figure figcaption {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--rule);
  font: 500 .64rem var(--font-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-3);
}
.hero-figure figcaption b { color: var(--fg); font-weight: 500; }

/* ============ Lens switch — the one interaction on the page ============ */
.lens-bar {
  display: flex; flex-wrap: wrap; gap: 18px 26px;
  align-items: center; justify-content: space-between;
  margin-bottom: 22px; padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.lens-set { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--rule-strong); }
.lens-set button {
  appearance: none; background: none; cursor: pointer;
  border: 0; border-right: 1px solid var(--rule-strong);
  color: var(--fg-2); padding: 11px 18px;
  font: 500 .68rem var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lens-set button:last-child { border-right: 0; }
.lens-set button:hover { color: var(--fg); }
.lens-set button[aria-pressed="true"] { background: var(--fg); color: var(--ground); }
.lens-readout {
  font: 400 .8rem var(--font-body); color: var(--fg-2); max-width: 46ch;
}
.geo-frame { border: 1px solid var(--rule); padding: clamp(14px, 2vw, 26px); }
/* Below a certain width the model stops being readable. Rather than ship a
   simplified figure that misrepresents it, let the real one scroll. */
.geo-hint { display: none; margin-top: 12px; }
@media (max-width: 820px) {
  .geo-hint { display: block; }
  [data-instrument="geometry"] { overflow-x: auto; overscroll-behavior-x: contain; }
  [data-instrument="geometry"] .geo-svg { min-width: 700px; }
  .lens-set { width: 100%; }
  .lens-set button { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--rule-strong); }
  .lens-set button:last-child { border-bottom: 0; }
}
.geo-foot {
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule);
  font: 500 .64rem var(--font-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-3);
}
/* Explicit columns: with a 1px gap acting as the divider, an auto-fit
   remainder would show up as empty grey cells. 4 / 2 / 1 always divides. */
.hero-verbs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin-top: clamp(52px, 7vw, 88px);
  background: var(--grey-15);
  border-top: 1px solid var(--grey-15);
}
@media (max-width: 1000px) { .hero-verbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hero-verbs { grid-template-columns: minmax(0, 1fr); } }
.hero-verbs div { background: var(--white); padding: 24px 22px 26px; }
.hero-verbs b {
  display: block; font-family: var(--font-display); font-size: 1.16rem;
  font-weight: 600; letter-spacing: -.01em; color: var(--black); margin-bottom: 6px;
}
.hero-verbs span { font-size: .84rem; color: var(--grey-50); }

/* ============ 02 · Suez full-bleed ============ */
.case-bleed {
  position: relative; overflow: hidden;
  min-height: clamp(520px, 76svh, 780px);
  display: flex; align-items: flex-end;
  background: var(--black-deep); color: var(--fg);
}
.case-bleed > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 52% 44%;
  filter: grayscale(.3) contrast(1.05) brightness(.8);
}
.case-bleed::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,7,7,.7) 0%, rgba(7,7,7,.1) 26%, rgba(7,7,7,.72) 58%, rgba(7,7,7,.97) 92%),
    linear-gradient(92deg, rgba(7,7,7,.9) 0%, rgba(7,7,7,.58) 44%, transparent 80%);
}
.case-bleed .container { position: relative; z-index: 2; padding-block: clamp(48px, 6vw, 84px); }
.case-bleed .display { max-width: 20ch; }
.case-bleed .lead { margin-top: 22px; max-width: 52ch; }
.case-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; align-items: center; }
.case-credit {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 38px; padding-top: 18px;
  border-top: 1px solid var(--rule-strong);
  font: 500 .66rem var(--font-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3);
}

/* ============ Section scaffolding ============ */
/* Claim on the left, qualification on the right. */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px); align-items: start;
  margin-bottom: clamp(40px, 5vw, 60px);
}
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
/* Every section closes with somewhere to go next. */
.sec-cta {
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center;
  margin-top: clamp(34px, 4vw, 48px);
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--rule);
}
.sec-cta p { font-size: var(--step-small); color: var(--fg-3); max-width: 46ch; }

/* ============ 02b · Event vs terrain ============ */
.propagation-grid {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 4.5vw, 64px); align-items: center;
}
.chain { border-top: 1px solid var(--rule); }
.chain-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--rule);
  font: 500 .8rem var(--font-mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg-2);
}
.chain-row i { font-style: normal; color: var(--fg-3); font-size: .7rem; }
.chain-row.is-event { color: var(--flare); }

.instrument-frame { position: relative; }
.instrument-frame svg { width: 100%; height: auto; display: block; }
.instrument-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; margin-bottom: 14px; flex-wrap: wrap;
}
.instrument-title, .instrument-note {
  font: 500 .66rem var(--font-mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-3);
}

.case-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); margin-top: 40px;
}
.stat { background: var(--ground); padding: 22px 20px; }
.stat b {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 400;
  letter-spacing: -.02em; line-height: 1;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.stat b .unit { font-size: .52em; color: var(--fg-2); }
.stat > span {
  display: block; margin-top: 10px; font: 500 .64rem var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3);
}
.stat--flare b { color: var(--flare); }

.callout {
  margin-top: clamp(44px, 6vw, 72px);
  padding: clamp(30px, 4vw, 46px);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--flare);
}
.callout p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 400;
  letter-spacing: -.018em; line-height: 1.2; color: var(--fg);
  max-width: 28ch;
}
.callout span {
  display: block; margin-top: 16px;
  font: 500 .66rem var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-3);
}

/* ============ 03 · Consequential problems ============ */
.prop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.prop-chain ol { margin: 0; padding: 0; list-style: none; }
.prop-chain li {
  display: flex; align-items: baseline; gap: 9px;
  font: 500 .75rem var(--font-mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg-2); padding: 5px 0;
}
.prop-chain li::before { content: "↓"; color: var(--fg-3); font-size: .78rem; flex: none; }
.prop-chain li:first-child { color: var(--fg); }
.prop-chain li:first-child::before { content: "■"; color: var(--flare); font-size: .55rem; }
.prop-chain li:last-child { color: var(--flare); }

/* ============ 04 · Capability stack ============ */
.ladder { border-top: 1px solid var(--rule); }
.ladder-row {
  display: grid;
  grid-template-columns: minmax(48px, 74px) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px; align-items: center;
  padding: clamp(19px, 2.3vw, 27px) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: padding-left .25s var(--ease), background .25s var(--ease);
}
.ladder-row:hover { padding-left: 14px; background: var(--surface); }
.ladder-num {
  font: 400 1.05rem var(--font-mono); color: var(--fg-3);
  font-variant-numeric: tabular-nums; transition: color .25s var(--ease);
}
.ladder-row:hover .ladder-num { color: var(--signal); }
.ladder-row h3 { font-size: var(--step-2); letter-spacing: -.018em; line-height: 1.2; color: var(--fg); }
.ladder-row h3 small {
  display: block; font: 400 .84rem var(--font-body);
  letter-spacing: 0; color: var(--fg-2); margin-top: 5px;
}
.ladder-q { font: 400 .82rem var(--font-mono); color: var(--fg-3); text-align: right; }

.canon { margin-top: clamp(44px, 5vw, 68px); padding-top: clamp(30px, 4vw, 44px); border-top: 2px solid var(--fg); }
.canon p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.2rem, 2.1vw, 1.75rem); letter-spacing: -.018em;
  line-height: 1.34; color: var(--fg); max-width: 46ch;
}

/* ============ 05 · Framework / Reachability ============ */
.framework-grid {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(34px, 5vw, 72px); align-items: center;
}
.epistemic { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }

.sig-line {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.9rem);
  font-weight: 400; letter-spacing: -.024em; line-height: 1.16; color: var(--fg);
}
.sig-line .neq { color: var(--flare); padding-inline: .08em; }
.sig-line + .sig-line { margin-top: .08em; }
.sig-note { margin-top: clamp(28px, 3.5vw, 40px); max-width: 50ch; color: var(--fg-2); font-size: var(--step-lead); }

/* ============ 06 · Sandbox / consoles ============ */
.product-grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(34px, 5vw, 68px); align-items: center;
}
.console { border: 1px solid var(--rule); background: var(--surface); overflow: hidden; }
.console-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 16px; border-bottom: 1px solid var(--rule);
  font: 500 .62rem var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3);
}
.console-bar i { font-style: normal; color: var(--fg-2); }
.console-media {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover; object-position: center top;
}
.console-media--tall { aspect-ratio: 4 / 3; }
.console-figure { display: block; width: 100%; aspect-ratio: 16 / 9; padding: 14px; }
.console-figure svg { width: 100%; height: 100%; display: block; }

.product-quote {
  margin: 26px 0 0; padding: 0 0 0 20px;
  border-left: 2px solid var(--signal);
  font-family: var(--font-display); font-size: var(--step-3);
  font-weight: 400; line-height: 1.44; letter-spacing: -.012em;
  color: var(--fg); max-width: 40ch;
}
.fork-list { margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.fork-list li {
  list-style: none; display: grid; grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--rule);
  font-size: var(--step-small); color: var(--fg-2);
}
.fork-list li b { color: var(--fg); font-weight: 500; }
.fork-list .m { color: var(--fg-3); font: 400 .72rem var(--font-mono); }

/* ============ 08 · Motifs ============ */
.motif-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); gap: 14px; }
.motif { padding: 20px 20px 22px; border: 1px solid var(--rule); }
.motif h4 {
  font: 500 .66rem var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg); margin-bottom: 9px;
}
.motif p { font-size: .83rem; color: var(--fg-2); }

/* ============ 07 · What you receive ============ */
.receive-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
@media (max-width: 1080px) { .receive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .receive-grid { grid-template-columns: minmax(0, 1fr); } }
.receive { background: var(--surface); padding: 28px 26px 30px; }
.receive .n { display: block; font: 400 .72rem var(--font-mono); color: var(--fg-3); margin-bottom: 14px; }
.receive h3 { font-size: 1.08rem; letter-spacing: -.014em; margin-bottom: 8px; color: var(--fg); }
.receive p { font-size: var(--step-small); color: var(--fg-2); }

/* ============ 09 · Public proof ============ */

/* Seven works: one deliberate interface feature, then six equal reading cards. */
.dossier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dossier{min-width:0;padding:0;overflow:hidden;display:flex;text-decoration:none}
.dossier--feature{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:stretch}
.dossier-body{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-width:0;padding:clamp(24px,2.5vw,32px)}
.dossier-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;width:100%;margin-bottom:20px}
.dossier-kind{font:500 .64rem/1.6 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#bdbdbd}
.dossier-number{font:400 .65rem/1.6 var(--font-mono);color:#8a8a8a}
.dossier h3{font-size:1.4rem;line-height:1.2;color:var(--fg)}
.dossier--feature h3{font-size:clamp(1.6rem,2.4vw,2rem)}
.dossier p{margin-top:16px;margin-bottom:28px;color:var(--fg-2);font-size:.9rem;line-height:1.7}
.dossier-link{display:block;margin-top:auto;padding-top:18px;border-top:1px solid var(--rule);width:100%;font-size:.8rem;line-height:1.5;color:var(--fg)}
.dossier-link>span{display:inline-block;margin-left:6px}
.dossier:hover .dossier-link{text-decoration:underline;text-underline-offset:4px}
.dossier-interface{margin:0;padding:20px;border-left:1px solid var(--rule);display:flex;flex-direction:column;justify-content:center;gap:12px;background:#101010;min-width:0}
.dossier-interface img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain}
.dossier-interface figcaption{font:400 .64rem/1.6 var(--font-mono);color:#bdbdbd;letter-spacing:.05em}
@media(max-width:1000px){.dossier-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.dossier-grid,.dossier--feature{grid-template-columns:1fr}.dossier-interface{border-left:0;border-top:1px solid var(--rule)}.dossier-body{padding:24px}}

.progression {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  margin-top: clamp(30px, 3.5vw, 42px);
}
@media (max-width: 900px) { .progression { grid-template-columns: minmax(0, 1fr); } }
.progression div { background: var(--ground); padding: 18px 20px; }
.progression span {
  display: block; font: 500 .62rem var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg); margin-bottom: 7px;
}
.progression p { font-size: .81rem; color: var(--fg-3); }

/* ============ 10 · Research at the edge ============ */
.edge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 296px), 1fr)); gap: 20px; }
.edge { padding: 32px 30px 34px; }
.edge h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -.018em;
  line-height: 1.18; color: var(--fg); margin-block: 13px 12px;
}
.edge p { color: var(--fg-2); font-size: var(--step-small); }
.edge .link { margin-top: 22px; }
.leash { margin: 20px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.leash li {
  list-style: none; display: grid; grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px; align-items: baseline; padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font: 500 .72rem var(--font-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-2);
}
.leash li i { font-style: normal; color: var(--fg-3); font-size: .66rem; }

/* ============ 12/13 · Technology ============ */
.tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.infra { padding: 30px 28px 32px; }
.infra h3 { font-size: 1.32rem; letter-spacing: -.018em; color: var(--fg); margin-block: 12px 10px; }
.infra p { color: var(--fg-2); font-size: var(--step-small); }
.infra .link { margin-top: 20px; }

/* ============ 11 · Applications ============ */
.apps-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
/* Seven items into four columns: the last one takes the remaining pair. */
.apps-grid .app:last-child { grid-column: span 2; }
@media (max-width: 1080px) {
  .apps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .apps-grid .app:last-child { grid-column: 1 / -1; }
}
@media (max-width: 780px) { .apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) {
  .apps-grid { grid-template-columns: minmax(0, 1fr); }
  .apps-grid .app:last-child { grid-column: auto; }
}
.app {
  background: var(--surface); padding: 24px 22px 26px;
  text-decoration: none; display: block; transition: background .2s var(--ease);
}
.app:hover { background: var(--grey-05); }
.app span { display: block; font: 400 .68rem var(--font-mono); color: var(--fg-3); margin-bottom: 12px; }
.app h3 { font-size: 1.02rem; letter-spacing: -.014em; margin-bottom: 7px; color: var(--fg); }
.app p { font-size: .82rem; color: var(--fg-2); }

/* ============ Differentiation table ============ */
.diff-wrap { overflow-x: auto; }
.diff { width: 100%; border-collapse: collapse; min-width: 560px; font-size: var(--step-small); }
.diff th, .diff td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--rule); }
.diff th { font: 500 .64rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.diff td:first-child { color: var(--fg-2); width: 40%; }
.diff tr.is-dcg td { color: var(--fg); }
.diff tr.is-dcg td:first-child {
  color: var(--fg); font-weight: 500;
  border-left: 2px solid var(--signal); padding-left: 14px;
}

/* ============ 14/15 · Pilot ============ */
.pilot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 84px); }
.pilot-ledger { margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.pilot-ledger li {
  list-style: none; display: grid; grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
  font-size: var(--step-small); color: var(--fg-2);
}
.pilot-ledger li b { color: var(--fg); font-weight: 500; }
.pilot-ledger li .n { font: 400 .72rem var(--font-mono); color: var(--fg-3); }
.pilot-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ============ Footer ============ */
.site-footer { background: var(--black-deep); color: var(--fg-2); padding: 68px 0 36px; }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--rule);
}
.footer-grid h4 {
  font: 500 .64rem var(--font-mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 15px;
}
.footer-grid a { display: block; color: var(--fg-2); text-decoration: none; font-size: var(--step-small); padding: 4px 0; }
.footer-grid a:hover { color: var(--fg); }
.footer-brand p { margin-top: 14px; max-width: 34ch; font-size: var(--step-small); }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 24px; font: 500 .66rem var(--font-mono); letter-spacing: .1em; color: var(--fg-3);
}

/* ============ Responsive ============ */
@media (max-width: 1000px) {
  .hero-grid, .propagation-grid, .product-grid,
  .pilot-grid, .framework-grid { grid-template-columns: minmax(0, 1fr); }
  .ladder-row { grid-template-columns: 44px minmax(0, 1fr); }
  .ladder-q { grid-column: 2; text-align: left; margin-top: 4px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .case-stats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) { .brand span { display: none; } }
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-brand .brand span { display: inline; }
}

/* The brand mark is a dark PNG. On the near-black footer it disappears,
   so it is inverted to white there — the header keeps the original. */
.site-footer .brand-mark { filter: brightness(0) invert(1); }