/* KeenHand — /ai-native/ landing overlay · 2026-08-01
   Loads AFTER /site.css and adds only what this page introduces.
   Same binding brand reference: Night Shift sheet (approved 2026-07-09).
   Sanctioned pairings only · ≤8% Lamplight · no gradients, no glows, no purple. */

/* ---------- tap targets: 44px effective height, layout unchanged ---------- */

.btn, .nav-cta, .cta-alt { display: inline-flex; align-items: center; min-height: 44px; }
.foot-meta a { padding: .7rem 0; }

/* ---------- nav: four section links ---------- */

.nav-links { display: flex; align-items: center; gap: 1rem; }
@media (max-width: 940px) {
  .nav-links { display: none; } /* wordmark + clock + CTA hold the bar; CTA never yields */
}
@media (max-width: 400px) {
  .nav-clock { display: none; } /* decorative; below 400px only the wordmark and CTA fit */
}

/* ---------- hero: supporting line + proof artifact ---------- */

.support { max-width: 52ch; }

.hero-fig { margin: 2.6rem 0 0; }
.hero-fig figcaption { font-size: .78rem; color: var(--fog); margin-bottom: .6rem; }
.ledger--hero { margin-top: 0; max-width: 640px; }
.ledger--hero li { font-size: .9rem; padding: .7rem 1.1rem; }

/* ---------- software-alone: the gaps list + pull quote ---------- */

.gaps {
  list-style: none; padding: 0;
  margin: 1.6rem 0 0;
  max-width: 720px;
  display: grid; gap: 0 2rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.gaps li {
  padding: .5rem 0;
  border-top: 1px solid var(--line);
  font-size: .93rem; line-height: 1.5;
}

.pull { margin: 2.6rem 0; padding-left: 1.1rem; border-left: 3px solid var(--lamp); }
.pull p {
  margin: 0;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 600; letter-spacing: -.01em; line-height: 1.35;
  max-width: 40ch;
}

/* ---------- AI-native: before/after contrast ---------- */

.contrast {
  margin: 2.4rem 0 0;
  max-width: 860px;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.contrast-card { border-radius: 9px; padding: 1.15rem 1.25rem 1.2rem; }
.contrast-card--before {
  background: var(--char);
  border: 1px solid var(--line);
  color: var(--fog);
}
.contrast-card--after {
  background: var(--card);
  border: 1px solid var(--paper-line);
  color: var(--soot);
}
.contrast-label {
  margin: 0; display: flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.contrast-card--before .contrast-label { color: var(--fog); }
.contrast-card--after .contrast-label { color: var(--patina-deep); }
.contrast-card ul { list-style: none; margin: .8rem 0 0; padding: 0; }
.contrast-card li {
  padding: .48rem 0;
  border-top: 1px solid var(--line);
  font-size: .9rem; line-height: 1.5;
}
.contrast-card--after li { border-top-color: var(--paper-line); }
.contrast-card li:first-child { border-top: none; }

/* the traits checklist reuses .rules; on this page's iron ground the cards go char */
[data-ground="iron"] .rules li { background: var(--char); }
.traits { margin-top: 2.2rem; }

/* ---------- five layers (flow) ---------- */

.flow {
  list-style: none; padding: 0;
  margin: 2.2rem 0 0;
  max-width: 720px;
  display: grid; gap: .9rem;
}
.flow li {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  background: var(--char);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 1.05rem 1.2rem 1.1rem;
}
.flow--risk { border-left: 3px solid var(--patina); }
.flow-key {
  font-weight: 900; font-stretch: 125%;
  font-size: 2rem; line-height: 1;
  color: var(--fog);
}
.flow h3 { margin: 0 0 .25rem; font-size: 1rem; color: var(--bone); }
.flow p { margin: 0; font-size: .9rem; color: var(--fog); max-width: none; line-height: 1.55; }

/* ---------- path: six steps sit 3×2 rather than orphaning ---------- */

.steps-grid--six { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- owner control ---------- */

.control-grid {
  margin: 2rem 0 0;
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.control-card {
  background: var(--card);
  border: 1px solid var(--paper-line); border-radius: 9px;
  padding: 1.05rem 1.15rem 1.15rem;
}
.control-card--stop { border-left: 3px solid var(--lamp-deep); }
.control-label {
  margin: 0; display: flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper-muted);
}
.control-card ul { list-style: none; margin: .7rem 0 0; padding: 0; }
.control-card li {
  padding: .42rem 0;
  border-top: 1px solid var(--paper-line);
  font-size: .9rem; color: var(--soot); line-height: 1.5;
}
.control-card li:first-child { border-top: none; }

.actions-intro { margin-top: 2.2rem; }
.actions-row {
  list-style: none; padding: 0;
  margin: 1rem 0 0; max-width: 680px;
  display: flex; flex-wrap: wrap; gap: .5rem;
}

/* ---------- proof: honesty card ---------- */

.honesty {
  margin-top: 2.4rem; max-width: 680px;
  background: var(--card); color: var(--soot);
  border: 1px solid var(--paper-line); border-left: 3px solid var(--lamp-deep);
  border-radius: 9px;
  padding: 1.1rem 1.25rem 1.15rem;
}
.honesty h3 { margin: 0 0 .35rem; font-size: 1rem; }
.honesty p { margin: 0; font-size: .92rem; max-width: none; line-height: 1.6; }

/* ---------- fit / not-fit ---------- */

.fit-grid {
  margin: 2.2rem 0 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.fit-card {
  background: var(--card);
  border: 1px solid var(--paper-line); border-radius: 9px;
  padding: 1.15rem 1.25rem 1.25rem;
}
.fit-card h3 { margin: 0 0 .5rem; font-size: 1rem; color: var(--soot); }
.fit-list { list-style: none; margin: 0; padding: 0; }
.fit-list li {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem;
  padding: .5rem 0;
  border-top: 1px solid var(--paper-line);
  font-size: .92rem; color: var(--soot); line-height: 1.5;
}
.fit-list li:first-child { border-top: none; }
.fit-mark { font-weight: 800; }
.fit-mark--yes { color: var(--patina-deep); }
.fit-mark--no { color: var(--paper-muted); }