/* Kinburn landing: additions on top of the design system (tokens.css, bundle.css). Tokens only, no new colours.
   Signal yellow is the warning colour: fills under black text, nodes, status and the principles block, plus one
   smaller yellow band (platform integration). Two yellow blocks is a deliberate step past the design system's one. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-4); top: var(--space-4); z-index: 10; background: var(--ground); padding: var(--space-2) var(--space-3); }
img { max-width: 100%; }

/* header */
.kb-header { position: absolute; left: 0; right: 0; top: 0; }
.kb-header .logo { display: inline-flex; color: var(--ink); }
.kb-header .logo svg { height: 22px; width: auto; display: block; }

/* hero: the agreed H1 has seven words; two lines on desktop */
.kb-hero { min-height: 0; padding-top: 64px; }
.kb-hero-c { max-width: 1180px; padding-bottom: var(--space-12); }
.kb-hero h1 { font-size: clamp(40px, 7vw, 104px); }
.hero-media { position: relative; margin: 0; }
.hero-media video { display: block; width: 100%; height: auto; }
.media-caption { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-8) 0; font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.kb-steps { padding-top: var(--space-8); }
/* phones see a cropped loop; this opens the full-width loop in full screen, to watch with the phone turned sideways */
.hero-full { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hero-full:fullscreen { opacity: 1; pointer-events: auto; background: var(--ground); }
.hero-expand { display: none; align-items: center; gap: var(--space-1); padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; }
.hero-expand svg { width: 16px; height: 16px; }

/* shared */
.kb-section.wide { max-width: 1440px; }
.lead { font-size: 20px; line-height: 1.45; color: var(--ink-muted); max-width: var(--text-max); margin: var(--space-4) 0 0; }
.kb-stage .lead { color: var(--stage-muted); }
.band { background: var(--panel-100); }
.status-outline { height: 20px; padding: 0 8px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--control-border); color: var(--ink); }
.footnote { margin-top: var(--space-6); font-size: 14px; color: var(--ink-muted); max-width: var(--text-max); }
.kb-stage .footnote { color: var(--stage-muted); }
h3 { margin: 0; font-size: 32px; line-height: 1.12; font-weight: 500; letter-spacing: -.02em; }
.sub { margin: 0 0 var(--space-4); font-size: 26px; line-height: 1.2; }

/* capabilities: rows that alternate sides; graphics keep their own proportions */
.cap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-12); align-items: center; padding: var(--space-12) 0; border-top: 1px solid var(--hairline); }
.cap:first-of-type { border-top: 0; padding-top: 0; }
.cap.flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.cap.flip .cap-text { order: 2; }
.cap-text p { margin: var(--space-4) 0 var(--space-6); font-size: 18px; line-height: 1.5; color: var(--ink-muted); max-width: 46ch; }
.cap-art { margin: 0; }
.cap-art img { display: block; width: 100%; height: auto; }
.cap-art.console img { border-radius: var(--radius-panel); box-shadow: 0 0 0 1px var(--hairline); }
.cap-art.drawing img { max-width: 620px; }
.cap-art figcaption { margin-top: var(--space-3); font-size: 13px; font-weight: 500; color: var(--ink-muted); }

/* ecosystem: a shared bus with one node per platform */
.bus { position: relative; margin: 0 0 var(--space-8); border-top: 1.5px dashed var(--ink); }
.bus span { position: relative; top: -12px; display: inline-block; padding: 0 var(--space-3) 0 0; background: var(--panel-100); font-size: 13px; font-weight: 500; }
.platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.platform { position: relative; margin: 0; background: var(--panel-200); border-radius: var(--radius-panel); padding: var(--space-4) var(--space-4) var(--space-4); display: flex; flex-direction: column; justify-content: space-between; }
.platform .node { position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 1.5px var(--ink); }
.platform img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 300; }
.platform figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); font-weight: 500; }
.platform figcaption span { font-size: 13px; color: var(--ink-faint); font-weight: 400; }
.yours { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-2); padding: var(--space-8) var(--space-8) var(--space-8) calc(var(--space-8) + 18px); background: var(--signal); color: var(--on-signal); border-radius: var(--radius-panel); overflow: hidden; }
.yours::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18px; background: repeating-linear-gradient(-45deg, var(--on-signal) 0 12px, var(--signal) 12px 24px); }
.yours h3 { font-size: 26px; }
.yours p { margin: var(--space-2) 0 0; max-width: 60ch; }
.yours .kb-btn { flex: none; }

/* the recorded flight in numbers: stage, readout type, thin warning-yellow rules (allowed on stage) */
.record { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); margin: 0; }
.record div { display: flex; flex-direction: column; border-top: 2px solid var(--signal); padding-top: var(--space-4); }
.record dt { order: 2; font-size: 14px; color: var(--stage-muted); margin-top: var(--space-2); }
.record dd { margin: 0; white-space: nowrap; font-size: clamp(36px, 4vw, 60px); font-weight: 300; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--stage-ink); }
.record dd .u { font-size: .42em; margin-left: .25em; letter-spacing: 0; color: var(--stage-muted); }
.record dd.cond { order: 3; margin-top: var(--space-1); white-space: normal; font-size: 13px; font-weight: 400; letter-spacing: 0; line-height: 1.3; color: var(--stage-muted); }
.kb-section-head .status-outline { display: inline-flex; align-items: center; margin-bottom: var(--space-4); font-size: 13px; font-weight: 500; }

/* how matching works */
.how { list-style: none; margin: 0 0 var(--space-12); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.how li { border-top: 1px solid var(--hairline); padding-top: var(--space-4); }
.how b { display: block; font-weight: 300; font-size: 30px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: var(--space-1); }
.player { margin: 0; }
.player video { display: block; width: 100%; height: auto; border-radius: var(--radius-panel); background: var(--panel-300); }
.player figcaption { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-4); font-size: 14px; color: var(--ink-muted); }
.player figcaption b { font-weight: 500; color: var(--ink); }

/* how we work: the feedback loop; the static SVG carries the meaning, the loop only guides attention */
.loop { margin: 0 0 var(--space-12); }
.loop video, .loop img { display: block; width: 100%; height: auto; }
.loop .mobile { display: none; }
.loop [hidden] { display: none !important; }
.status { margin: 0; }
.status div { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-6); border-top: 1px solid var(--hairline); padding: var(--space-4) 0; }
.status dt { font-size: 30px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.status dd { margin: 0; font-size: 20px; line-height: 1.45; align-self: center; }

/* principles: solid yellow, edged with warning tape */
.principles { position: relative; background: var(--signal); color: var(--on-signal); }
.principles::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(-45deg, var(--on-signal) 0 14px, var(--signal) 14px 28px); }
.principles .lead { color: var(--on-signal); }
.principles ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.principles li { border-top: 2px solid var(--on-signal); padding-top: var(--space-4); font-size: 20px; line-height: 1.45; font-weight: 500; }
.principles li b { display: block; font-weight: 300; font-size: 30px; margin-bottom: var(--space-2); }

/* contact form: design-system Field, extended to select and textarea with the same tokens */
.contact-form { max-width: 880px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-4); margin-bottom: var(--space-8); }
.form-grid .wide { grid-column: 1 / -1; }
.kb-field select, .kb-field textarea { padding: var(--space-3); background: var(--panel-300); border: 1px solid var(--control-border); border-radius: var(--radius-control); color: var(--ink); font: 400 16px/1.5 var(--font-sans); }
.kb-field select { height: 44px; padding-top: 0; padding-bottom: 0; }
.kb-field textarea { resize: vertical; min-height: 140px; }
.kb-field.is-error select, .kb-field.is-error textarea { border-color: var(--ink); border-width: 2px; }
.kb-field.is-error small::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 1px var(--ink); }
.kb-label .opt { color: var(--ink-faint); font-weight: 400; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.note { font-size: 14px; color: var(--ink-muted); }
.form-status { margin: var(--space-4) 0 0; font-size: 16px; min-height: 1.5em; }

/* footer */
.kb-footer .logo svg { height: 28px; width: auto; display: block; color: var(--ink); }
.kb-footer-cols .kb-label { display: block; margin-bottom: var(--space-2); }
.origin { max-width: var(--text-max); color: var(--ink-muted); margin: 0; }

/* responsive */
@media (max-width: 1100px) {
  .platforms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .record { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-8); }
  .how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cap, .cap.flip { grid-template-columns: 1fr; gap: var(--space-6); }
  .cap.flip .cap-text { order: 0; }
  .principles ol { grid-template-columns: 1fr; }
  .yours { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .kb-section { padding: var(--space-16) var(--space-4); }
  .kb-hero-c { padding: var(--space-12) var(--space-4) var(--space-8); }
  .media-caption { padding: var(--space-3) var(--space-4) 0; }
  .kb-steps { padding: var(--space-6) var(--space-4) var(--space-8); grid-template-columns: 1fr 1fr; }
  h3 { font-size: 26px; }
  .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform { padding: var(--space-3); }
  .platform figcaption { flex-direction: column; gap: 0; font-size: 14px; }
  .record { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how { grid-template-columns: 1fr; }
  .status div { grid-template-columns: 1fr; gap: var(--space-1); }
  .form-grid { grid-template-columns: 1fr; }
  .yours { padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 18px); }
  .kb-footer { padding: var(--space-12) var(--space-4) var(--space-6); }
}
@media (max-width: 700px) { .hero-expand { display: inline-flex; } .loop .desktop { display: none; } .loop .mobile { display: block; max-width: 360px; } }
@media (max-width: 480px) { .record { grid-template-columns: 1fr; } }