/* Shared light presentation for the marketing site and interactive demo. */
:root {
  color-scheme: light;
  --ks-ink: #17283d;
  --ks-muted: #566477;
  --ks-line: #dce3eb;
  --ks-surface: #f5f7fa;
  --ks-red: #c83432;
  --ks-red-soft: #fff0ee;
}
body { background: #fff; color: var(--ks-ink); padding-top: 122px; }
body, button, input, select { font-family: Arial, Helvetica, sans-serif; }
p { color: var(--ks-muted); }
h1, h2, h3 { font-weight: 600; letter-spacing: -.045em; }
h2 { font-size: clamp(35px, 3.5vw, 48px); line-height: 1.12; }
.dim, .hero h1 .dim { color: #627186; }
.red, .section-index, .small-cross, .closing-plan { color: var(--ks-red); }
.eyebrow { color: #536175; font-size: 10px; letter-spacing: .1em; }
.red-dash { background: var(--ks-red); }
.section-shell { width: calc(100% - 64px); max-width: 1312px; padding-inline: 48px; }
.button { border-radius: 6px; font-size: 14px; font-weight: 600; min-height: 50px; gap: 22px; }
.button-red, .demo-kill-button { color: #fff; background: var(--ks-red); border-color: var(--ks-red); }
.button-red:hover, .demo-kill-button:hover { background: #ac2928; border-color: #ac2928; }
.button-outline { border-color: var(--ks-line); }
.button-outline:hover { background: var(--ks-surface); border-color: #9aa9b9; }
.text-link { font-size: 13px; color: var(--ks-ink); font-weight: 500; }
.text-link:hover { color: var(--ks-red); }
:is(button, a, summary, select, input):focus-visible { outline-color: var(--ks-red); }
.skip-link { background: var(--ks-ink); color: #fff; }

/* A white floating navigation bar, with a quieter shadow and larger links. */
.floating-header, .floating-header.has-scrolled {
  background: #ffffffef; border-color: var(--ks-line); color: var(--ks-ink);
  box-shadow: 0 6px 24px #17283d09; border-radius: 12px; padding-inline: 24px;
}
.floating-header .brand { font-size: 25px; }
.brand-sub, .floating-header .brand-sub { color: #617085; font-size: 7px; letter-spacing: 2.2px; }
.brand-icon { color: var(--ks-red); }
.floating-header .desktop-nav { gap: 28px; }
.floating-header .nav-link { font-size: 13px; color: #45546a; }
.floating-header .nav-link:hover, .floating-header .nav-link.is-current,
.floating-header .nav-link[aria-expanded="true"] { color: var(--ks-red); }
.floating-header .header-cta { font-size: 12px; min-height: 42px; border-radius: 6px; }
.nav-dropdown-panel { background: #fff; border-color: var(--ks-line); box-shadow: 0 18px 48px #17283d1c; width: 350px; }
.dropdown-caption { color: var(--ks-muted); font-size: 9px; }
.floating-header .nav-dropdown-panel a { color: var(--ks-ink); font-size: 14px; }
.floating-header .nav-dropdown-panel a:hover { background: var(--ks-surface); }
.dropdown-symbol { color: var(--ks-red); background: var(--ks-red-soft); border-color: #f2d3d0; }
.nav-dropdown-panel small { color: var(--ks-muted); font-size: 11px; }
.dropdown-arrow { color: #6a7a8d; }
.nav-dropdown-panel p { color: var(--ks-muted); font-size: 10px; border-color: var(--ks-line); }
.floating-header .menu-toggle span { background: var(--ks-ink); }
.floating-header .mobile-nav:not([hidden]) { background: #fff; border-color: var(--ks-line); box-shadow: 0 15px 40px #17283d1a; }
.floating-header .mobile-nav a, .floating-header .mobile-nav button { color: var(--ks-ink); }
.floating-header .mobile-nav a span { color: #6a7b8e; }
.floating-header .mobile-nav .mobile-demo-link { color: var(--ks-red); border-color: var(--ks-line); }

/* Light hero with generous white gutters and one focused product visual. */
.hero {
  grid-template-columns: 1fr 1fr; gap: 40px; min-height: 620px;
  padding-block: 38px; border: 1px solid #e7ebf0; border-radius: 18px;
  background: var(--ks-surface); margin-top: 8px;
}
.hero-copy { padding: 24px 0; }
.hero .eyebrow { margin-bottom: 26px; font-size: 10px; }
.hero h1 { font-size: clamp(54px, 5.4vw, 76px); line-height: 1.05; letter-spacing: -.06em; }
.hero-description { color: var(--ks-muted); font-size: 16px; line-height: 1.85; margin-top: 26px; }
.hero-actions { gap: 22px; margin-top: 30px; flex-wrap: wrap; }
.hero-actions .button { font-size: 13px; padding-inline: 20px; }
.hero-actions .text-link { font-size: 12px; gap: 12px; }
.launch-note { color: #596a7d; font-size: 9px; margin-top: 30px; line-height: 1.7; }
.tiny-ring { border-color: #758398; }
.note-divider { color: #aeb8c4; }
.hero-art {
  height: 520px; min-width: 0; margin: 0; transform: none; max-width: none;
  background: radial-gradient(ellipse at 50% 40%, #26394c, #142131 75%);
  border: 1px solid #2b3e52; border-radius: 12px; overflow: hidden;
}
.art-grid { background-image: linear-gradient(#8298af14 1px,transparent 1px),linear-gradient(90deg,#8298af14 1px,transparent 1px); }
.orbit { border-color: #9cb3cc24; }
.art-topline, .art-bottomline { color: #b3c2d3; left: 24px; right: 24px; font-size: 8px; }
.art-topline { top: 25px; }
.art-bottomline { bottom: 63px; font-size: 7px; }
.art-caption { color: #a5b7cb; font-size: 7px; bottom: 23px; letter-spacing: .1em; }
.art-coordinates { opacity: .85; }
.hardware-wrap { transform: translateY(-6px) scale(.93); }
.hardware-plate { background: linear-gradient(135deg,#65717b,#384550 38%,#303c46 75%,#4b5861); border-color: #81909b; box-shadow: 1px 1px 0 #8c9aa6,2px 4px 0 #26323d,4px 9px 0 #1b2833,6px 15px 0 #13212d,10px 22px 20px #0008,inset 1px 2px 4px #ffffff12; }
.plate-top, .plate-killswitch { color: #d4dde5; }
.plate-top { border-color: #cbd5df30; }
.plate-caption { color: #b2c0cd; }
.switch-housing { background: conic-gradient(from 12deg,#bec8cf,#6a7781,#e0e6eb,#717e88,#bac4cd,#5b6872,#bec8cf); }
.screw { background: radial-gradient(ellipse at 35% 25%,#8b969e,#3b4650 70%); }

.principles-strip { min-height: 116px; gap: 24px; border-color: var(--ks-line); margin-top: 24px; }
.principles-strip > p { color: var(--ks-muted); font-size: 12px; }
.strip-symbol { color: var(--ks-red); }
.principles-strip > div { color: var(--ks-ink); font-size: 13px; border-color: var(--ks-line); }
.strip-label { color: #67768a; font-size: 9px; }
.manifesto, .about-section, .approach, .demo-section { border-color: var(--ks-line); }
.manifesto { padding-block: 88px; gap: 65px; }
.manifesto h2 { font-size: clamp(32px, 3.2vw, 43px); }
.manifesto-copy { padding-top: 28px; max-width: 470px; }
.manifesto-copy p, .about-copy p { font-size: 15px; line-height: 1.9; }
.manifesto-copy strong { color: var(--ks-ink); font-weight: 600; }
.services { padding-block: 88px; }
.section-heading { margin-bottom: 36px; }
.section-heading > p { color: var(--ks-muted); font-size: 14px; line-height: 1.8; }
.service-grid { border: 0; gap: 16px; }
.service-card, .service-card:first-child, .service-card:nth-child(3), .service-card:nth-child(4) {
  padding: 25px 22px; border: 1px solid var(--ks-line); border-radius: 10px;
  background: #fff; display: flex; flex-direction: column;
}
.service-card:hover { background: #fcfcfd; border-color: #bac6d3; box-shadow: 0 8px 28px #17283d08; }
.service-top { margin-bottom: 32px; gap: 10px; }
.service-top .mono { color: #5b6b7f; font-size: 8px; line-height: 1.8; }
.service-top svg { color: var(--ks-red); width: 28px; height: 28px; flex-shrink: 0; }
.service-card h3 { font-size: 28px; margin-bottom: 18px; }
.product-subtitle { color: var(--ks-muted); font-size: 15px; line-height: 1.5; letter-spacing: -.015em; margin-top: 10px; }
.service-card p { color: var(--ks-muted); font-size: 13px; line-height: 1.85; min-height: 0; margin-bottom: 23px; }
.service-tags { color: #5a6a7e; font-size: 8px; line-height: 1.7; letter-spacing: 0; margin-top: auto; }
.service-tags span:before { color: var(--ks-red); }
.section-footnote { color: #617185; font-size: 10px; line-height: 1.8; }
.solutions { padding-top: 0; padding-bottom: 88px; }
.solutions-layout { gap: 65px; }
.solution-tabs { border-color: var(--ks-line); }
.solution-tabs button { color: #5b6b80; font-size: 13px; }
.solution-tabs button[aria-selected="true"] { color: var(--ks-ink); border-color: var(--ks-red); }
.solution-kicker { color: var(--ks-red); font-size: 9px; }
.solution-panel h3 { font-size: 32px; line-height: 1.2; }
.solution-panel > p { font-size: 14px; line-height: 1.9; }
.solution-panel li { color: var(--ks-muted); font-size: 13px; }
.solution-panel li:before { color: var(--ks-red); }
.solution-content > .text-link { font-size: 13px; }
.solution-visual { background: var(--ks-surface); border-color: var(--ks-line); border-radius: 12px; padding: 26px; }
.solution-visual-top { color: #5e6e82; font-size: 8px; }
.mini-status i { background: #2e8064; }
.solution-node { background: #fff; border-color: #cdd7e2; border-radius: 7px; max-width: 310px; }
.solution-node > div { color: var(--ks-ink); font-size: 14px; }
.solution-node small { color: var(--ks-muted); font-size: 10px; }
.solution-node-icon { color: #5c718a; }
.solution-node-human { border-color: #e3aaa5; background: var(--ks-red-soft); }
.solution-node-human .solution-node-icon, .node-key { color: var(--ks-red); }
.solution-node-human small { color: #8b514d; }
.solution-flow > span:first-child { background: #a7b6c7; }
.flow-caption { color: #5f7288; font-size: 7px; }
.solution-infrastructure { max-width: 310px; }
.solution-infrastructure span { background: #fff; color: #4e6178; border-color: #cdd7e2; border-radius: 4px; font-size: 8px; }
.solution-visual-foot { color: #5f7186; font-size: 10px; }

/* The small simulation stays visually distinct from the marketing content. */
.demo-section { padding-block: 0 88px; gap: 65px; }
.demo-intro > p:not(.eyebrow) { font-size: 15px; }
.demo-disclaimer { color: #617185; font-size: 12px; }
.info-icon { border-color: #8797a9; }
.demo-intro .text-link { font-size: 13px; }
.console { color: #e9f0f8; background: #142131; border-color: #34475d; border-radius: 12px; box-shadow: 0 15px 45px #17283d16; }
.console-bar, .console-footer { background: #1e3044; border-color: #3b4e64; color: #bbc9d8; }
.console-bar { font-size: 8px; }
.console-footer { font-size: 7px; }
.demo-badge { color: #d0dbe7; border-color: #70849a; font-size: 7px; }
.console-label { color: #a4b7cd; font-size: 8px; }
.agent-heading h3 { color: #e1eaf5; font-size: 13px; }
.agent-status { font-size: 10px; }
.topology-human { color: #cdd9e6; font-size: 9px; }
.topology-agent { background: #273f50; border-color: #7994a7; color: #e1eaf4; font-size: 9px; }
.topology-tools > span { border-color: #50657c; color: #bfcede; font-size: 8px; }
.console-event { background: #101b29; border-color: #34485f; color: #c4d1e2; font-size: 10px; }
.console-hint { color: #afbed0; font-size: 8px; }
.demo-kill-button { font-size: 12px; }
.console.is-stopped .demo-kill-button { background: #2c4156; color: #e9f0f8; border-color: #6f859b; }
.console.is-stopped .demo-kill-button:hover { background: #3b536b; }
.shutdown-steps:not([hidden]) { color: #b8c9d9; font-size: 8px; }
.approach { padding-block: 88px; }
.approach h2 { font-size: clamp(34px, 3.4vw, 46px); }
.approach-grid article { border-color: var(--ks-line); }
.approach-number { color: var(--ks-red); font-size: 12px; margin-bottom: 25px; }
.approach-grid h3 { font-size: 26px; }
.approach-grid p { font-size: 14px; max-width: 340px; }
.approach-note, .demo-coverage { background: var(--ks-surface); border-color: var(--ks-line); border-radius: 8px; }
.approach-note > span, .demo-coverage > span { color: var(--ks-red); }
.approach-note p { color: var(--ks-muted); font-size: 12px; }
.testimonials { margin-top: 32px; padding-block: 64px; background: var(--ks-surface); border: 1px solid #e5eaf0; border-radius: 14px; gap: 65px; }
.testimonials h2 { font-size: clamp(36px, 3.5vw, 48px); }
.testimonials-intro { font-size: 14px; }
.customer-story { background: #fff; border-color: var(--ks-line); border-radius: 10px; }
.story-symbol { color: #b9c8d8; }
.story-badge { background: #f5f7fa; color: #56677e; border-color: var(--ks-line); font-size: 8px; }
.customer-story h3 { font-size: 29px; }
.customer-story p { color: var(--ks-muted); font-size: 14px; }
.customer-story .text-link { font-size: 13px; }
.about-section { padding-block: 88px; gap: 65px; }
.about-section h2 { font-size: clamp(34px, 3.3vw, 46px); }
.about-copy { max-width: 470px; padding-top: 30px; }
.about-signoff { color: #5a6e86; font-size: 9px; }
.about-company-link { margin-top: 24px; }
.founder-contact { margin-top: 18px; font-size: 12px; }
.investor-overview-secondary { margin-top: 18px; font-size: 12px; }
.about-mark { color: #294b72; opacity: .04; }
.faq { padding-block: 88px; gap: 65px; }
.faq h2 { font-size: clamp(36px, 3.5vw, 48px); }
.faq details, .faq details:first-child { border-color: var(--ks-line); }
.faq summary { color: var(--ks-ink); font-size: 15px; }
.faq summary span { color: #63768d; }
.faq details p { color: var(--ks-muted); font-size: 14px; }
.closing { margin-inline: auto; padding-block: 40px 44px; background: var(--ks-surface); border: 1px solid var(--ks-line); border-radius: 14px; }
.closing-top .eyebrow { color: #5d6e82; font-size: 10px; }
.closing-mark { color: #9aabbe; font-size: 52px; }
.closing h2 { font-size: clamp(48px, 6vw, 78px); line-height: 1.05; }
.closing h2 .dim { color: #67788d; }
.closing-bottom p { color: var(--ks-muted); font-size: 15px; }
.site-footer { padding-top: 48px; padding-bottom: 30px; }
.footer-main { border-color: var(--ks-line); }
.footer-main > p { color: var(--ks-muted); font-size: 12px; }
.footer-main > .text-link { color: var(--ks-ink); font-size: 12px; }
.footer-site-links { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-left: auto; }
.footer-site-links .text-link { color: var(--ks-ink); font-size: 12px; gap: 12px; }
.footer-site-links .text-link:hover, .footer-site-links [aria-current="page"] { color: var(--ks-red); }
.footer-bottom { color: #617185; font-size: 10px; }
.footer-bottom button { color: #52657d; font-size: 11px; }
.footer-bottom button:hover { color: var(--ks-red); }
.footer-status { font-size: 8px; }

/* Forms and dialogs use the same light surfaces. */
.plan-dialog, .privacy-dialog { background: #fff; color: var(--ks-ink); border-color: #ccd7e3; border-radius: 14px; color-scheme: light; box-shadow: 0 25px 100px #14273e40; }
.plan-dialog::backdrop, .privacy-dialog::backdrop { background: #10223870; backdrop-filter: blur(5px); }
.dialog-top { border-color: var(--ks-line); }
.dialog-close { color: #61758d; }
.dialog-description { color: var(--ks-muted); font-size: 14px; }
.plan-dialog label, .plan-dialog legend { color: #334861; font-size: 13px; }
.plan-dialog label > span:not(.check-label span) { color: #697b90; }
.plan-dialog input:not([type=checkbox]), .plan-dialog select { color: var(--ks-ink); background: #fff; border-color: #bac8d7; border-radius: 5px; font-size: 14px; }
.plan-dialog input::placeholder { color: #718198; }
.check-label input { accent-color: var(--ks-red); }
.form-note { color: #62758c; font-size: 9px; }
.plan-dialog li { color: var(--ks-muted); font-size: 13px; }
.plan-dialog li strong { color: var(--ks-ink); font-size: 14px; }
.recovery-checklist { border-color: var(--ks-line); }
.recovery-checklist > div { color: #4e637b; font-size: 13px; }
.recovery-checklist span { color: #287258; }

/* Light demo-page framing around the operational visualization. */
.demo-main { max-width: 1312px; width: calc(100% - 64px); padding: 24px 48px 0; }
.demo-back { color: #5c6e85; font-size: 12px; }
.demo-back:hover { color: var(--ks-red); }
.lab-intro { gap: 65px; padding-bottom: 48px; }
.lab-intro .eyebrow { font-size: 10px; }
.lab-intro h1 { font-size: clamp(48px, 5.1vw, 70px); line-height: 1.08; }
.lab-intro-copy > p:first-child { color: var(--ks-muted); font-size: 15px; }
.simulation-label { color: #52657e; font-size: 9px; }
.simulation-note { color: #65768c; font-size: 11px; }
.scenario-heading .eyebrow { font-size: 10px; }
.reset-tour { color: #536b85; font-size: 12px; }
.reset-tour:hover { color: var(--ks-red); }
.scenario-choice { background: #fff; color: var(--ks-ink); border-color: var(--ks-line); border-radius: 8px; }
.scenario-choice:hover { border-color: #a5b5c7; }
.scenario-choice[aria-pressed="true"] { background: var(--ks-red-soft); color: var(--ks-ink); border-color: #dc8e88; }
.scenario-icon, .scenario-choice[aria-pressed="true"] .scenario-icon { color: var(--ks-red); }
.scenario-choice > span:nth-child(2) { font-size: 13px; }
.scenario-choice small, .scenario-choice[aria-pressed="true"] small { color: var(--ks-muted); font-size: 11px; }
.scenario-radio { border-color: #a4b2c3; }
.scenario-choice[aria-pressed="true"] .scenario-radio { background: var(--ks-red); border-color: var(--ks-red); box-shadow: inset 0 0 0 2px var(--ks-red-soft); }
.command-center { background: #142131; color: #eff4fa; border-color: #354b63; border-radius: 12px; box-shadow: 0 14px 40px #17283d18; }
.lab-topbar, .lab-bottomline { background: #203248; border-color: #3a5068; }
.lab-topbar { font-size: 9px; }
.lab-console-name { color: #c6d5e7; }
.lab-run-id, .lab-bottomline { color: #a9bcd3; font-size: 8px; }
.lab-state { color: #bee0cb; border-color: #648877; font-size: 8px; }
.network-panel, .network-metrics { border-color: #3c5067; }
.network-panel h2 { color: #dce7f5; }
.network-panel .console-label { font-size: 8px; }
.network-legend { color: #b3c5da; font-size: 8px; }
.execution-boundary rect { fill: #263b4c50; stroke: #526f88; }
.execution-boundary text { fill: #a1b8ce; }
.authority-node rect { fill: #2a4055; stroke: #849fb9; }
.authority-node circle, .authority-node path { stroke: #c6d9ec; }
.node-title { fill: #dae7f5; }
.node-description, .node-status { fill: #a6bfd4; }
.agent-node rect { fill: #294855; stroke: #74a1b1; }
.agent-node .node-title { fill: #e3f0f8; }
.agent-node-glyph { fill: #a9d5db; }
.child-node rect, .access-node rect { fill: #21364a; stroke: #54738e; }
.path-annotation { fill: #dfb89c; }
.network-metrics > div > span:last-child { color: #d2e2f3; font-size: 11px; }
.metric-label { color: #a4bad0; font-size: 7px; }
.override-panel { background: #1d3043; }
.command-center .eyebrow { color: #bfd0e2; }
.override-panel > p { color: #bacbdd; font-size: 12px; }
.human-channel { color: #c0ddcd; font-size: 7px; }
.incident-button { background: #2c4359; color: #e0ebf7; border-color: #6b8299; font-size: 12px; }
.incident-button:hover { background: #3a536e; }
.override-summary { color: #b8cce0; font-size: 9px; }
.download-incident { color: #dce8f5; border-color: #58718c; font-size: 11px; }
.shutdown-progress { background: #1a2c3e; border-color: #3b5068; }
#progress-label { color: #afc3d9; font-size: 7px; }
.shutdown-timeline li { border-color: #526d85; }
.shutdown-timeline li > div { color: #c5d6e8; font-size: 10px; }
.shutdown-timeline small { color: #a0b8cf; font-size: 8px; }
.phase-number { color: #9fb7ce; font-size: 8px; }
.incident-log { background: #101c2b; border-color: #3b5068; }
.incident-log-heading { color: #aec2da; font-size: 7px; }
#event-log li { font-size: 9px; }
.log-number { color: #92a9c3; }
.log-event { color: #bfd0e4; }
.lab-bottomline { border-color: #3b5068; }
.demo-explainer .eyebrow { font-size: 10px; }
.demo-explainer h2 { font-size: clamp(34px, 3.4vw, 46px); }
.demo-explainer .section-heading > p { color: var(--ks-muted); font-size: 13px; }
.explainer-grid article { border-color: var(--ks-line); }
.explainer-grid article > span { color: var(--ks-red); font-size: 10px; }
.explainer-grid h3 { font-size: 26px; }
.explainer-grid p { color: var(--ks-muted); font-size: 14px; }
.demo-coverage p { color: var(--ks-muted); font-size: 12px; }
.demo-closing { background: var(--ks-surface); border-color: var(--ks-line); border-radius: 12px; }
.demo-closing .eyebrow { color: #5a6e86; font-size: 9px; }
.demo-closing h2 { font-size: 33px; }
.demo-closing .button { font-size: 13px; }

@media (max-width: 1150px) {
  .section-shell, .demo-main { width: calc(100% - 48px); padding-inline: 32px; }
  .floating-header .desktop-nav { gap: 21px; }
  .floating-header .nav-link { font-size: 12px; }
  .hero { gap: 28px; }
  .hero h1 { font-size: clamp(48px, 5.5vw, 63px); }
  .hero-art { height: 490px; }
  .hardware-wrap { transform: translateY(-4px) scale(.85); }
  .hero-description { font-size: 15px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 18px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-top .mono { font-size: 9px; }
  .service-card { padding: 26px; }
  .service-card h3 { font-size: 29px; }
  .service-card p { font-size: 14px; }
  .service-tags { font-size: 9px; }
  .manifesto, .solutions-layout, .demo-section, .testimonials, .about-section, .faq, .lab-intro { gap: 40px; }
  .solution-tabs button { font-size: 12px; padding-inline: 10px; }
  .solution-panel h3 { font-size: 28px; }
  .flow-caption { font-size: 6px; }
  .lab-intro h1 { font-size: 56px; }
  .scenario-choice { padding: 15px 13px; gap: 9px; }
  .scenario-choice > span:nth-child(2) { font-size: 12px; }
  .scenario-choice small { font-size: 10px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-block: 34px; gap: 26px; }
  .hero-copy { padding: 10px 0; }
  .hero h1 { font-size: 66px; }
  .hero-actions { flex-direction: row; align-items: center; }
  .hero-art { height: 450px; }
  .hardware-wrap { transform: translateY(-4px) scale(.9); }
  .manifesto, .demo-section, .testimonials, .about-section, .faq { grid-template-columns: 1fr; gap: 30px; }
  .manifesto-copy, .about-copy { padding-top: 0; max-width: 100%; }
  .principles-strip { grid-template-columns: repeat(3, 1fr); padding-block: 23px; gap: 20px 10px; }
  .principles-strip > p { grid-column: 1 / -1; margin: 0; }
  .principles-strip > div { padding-left: 16px; }
  .principles-strip > div:nth-child(2) { border: 0; padding-left: 0; }
  .solutions-layout { gap: 30px; }
  .solution-tabs button { font-size: 10px; }
  .solution-panel h3 { font-size: 26px; }
  .solution-visual { padding-inline: 18px; }
  .solution-visual-top { font-size: 7px; }
  .solution-node { padding: 14px 10px; }
  .solution-node small { font-size: 8px; }
  .flow-caption { font-size: 5px; }
  .console { width: 100%; max-width: 650px; }
  .console-bar, .console-bar > span:first-child { font-size: 8px; }
  .lab-intro { grid-template-columns: 1fr; gap: 25px; }
  .lab-intro-copy { max-width: 650px; }
  .lab-intro h1 { font-size: 62px; }
}
@media (max-width: 700px) {
  body { padding-top: 100px; }
  .section-shell, .demo-main { width: calc(100% - 28px); padding-inline: 22px; }
  .floating-header, .floating-header.has-scrolled { padding-inline: 16px; border-radius: 10px; }
  .floating-header .brand { font-size: 23px; }
  .floating-header .brand-sub { font-size: 6px; letter-spacing: 1.8px; }
  .floating-header .header-cta { font-size: 10px; padding-inline: 12px; min-height: 36px; }
  .nav-dropdown-panel { max-width: calc(100vw - 36px); }
  .hero { margin-top: 0; padding-block: 26px; border-radius: 12px; }
  .hero h1 { font-size: clamp(39px, 11.5vw, 62px); }
  .hero .eyebrow { font-size: 8px; gap: 9px; margin-bottom: 24px; }
  .hero-description { font-size: 14px; margin-top: 22px; }
  .hero-actions { gap: 17px; margin-top: 24px; }
  .hero-actions .button { font-size: 12px; min-height: 48px; padding-inline: 16px; gap: 16px; }
  .hero-actions .text-link { font-size: 12px; }
  .launch-note { font-size: 8px; margin-top: 25px; gap: 7px; }
  .note-divider { margin-inline: 4px; }
  .hero-art { height: 390px; }
  .hardware-wrap { transform: translateY(0) scale(.76); }
  .art-topline { font-size: 7px; left: 15px; right: 15px; top: 19px; }
  .art-bottomline { left: 15px; right: 15px; bottom: 55px; font-size: 6px; }
  .art-coordinates { display: none; }
  .art-caption { bottom: 18px; font-size: 6px; }
  .principles-strip { margin-top: 20px; min-height: 145px; }
  .principles-strip > div { font-size: 11px; padding-left: 10px; }
  .strip-label { font-size: 7px; letter-spacing: .03em; }
  .principles-strip > p { font-size: 11px; }
  .manifesto, .services, .approach, .about-section, .faq { padding-block: 60px; }
  .section-heading h2, .testimonials h2, .demo-intro h2, .about-section h2, .faq h2, .manifesto h2, .approach h2 { font-size: 34px; }
  .section-heading > p { font-size: 13px; margin-top: 20px; }
  .section-heading .eyebrow, .manifesto .eyebrow, .about-section .eyebrow, .testimonials .eyebrow, .faq .eyebrow, .demo-intro .eyebrow { font-size: 8px; }
  .manifesto-copy p, .about-copy p { font-size: 14px; }
  .service-grid { grid-template-columns: 1fr; gap: 14px; }
  .service-card, .service-card:first-child, .service-card:nth-child(3), .service-card:nth-child(4) { padding: 24px; }
  .service-top { margin-bottom: 22px; }
  .service-top .mono { font-size: 9px; }
  .service-card h3 { font-size: 29px; }
  .product-subtitle { font-size: 16px; margin-top: 8px; }
  .service-card p { font-size: 14px; margin-bottom: 20px; }
  .service-tags { font-size: 9px; }
  .section-footnote { font-size: 10px; }
  .solutions { padding-bottom: 60px; }
  .solutions-layout { grid-template-columns: 1fr; }
  .solution-tabs button { font-size: 11px; padding-inline: 6px; }
  .solution-panel { min-height: 0; }
  .solution-panel h3 { font-size: 28px; }
  .solution-panel > p { font-size: 14px; }
  .solution-panel li { font-size: 12px; }
  .solution-visual { padding: 24px 18px; }
  .solution-node { padding: 15px 12px; }
  .solution-node > div { font-size: 13px; }
  .solution-node small { font-size: 9px; }
  .solution-visual-top { font-size: 7px; }
  .flow-caption { font-size: 6px; }
  .demo-section { padding-block: 0 60px; }
  .demo-intro > p:not(.eyebrow) { font-size: 14px; }
  .demo-disclaimer { font-size: 11px; }
  .console-bar, .console-bar > span:first-child { font-size: 7px; }
  .console-footer { font-size: 6px; }
  .agent-heading h3 { font-size: 11px; }
  .console-label { font-size: 7px; }
  .agent-status { font-size: 8px; }
  .console-body { padding-inline: 16px; }
  .agent-topology { padding-inline: 8px; }
  .topology-tools { width: 100%; gap: 5px; }
  .topology-tools > span { font-size: 7px; padding-inline: 5px; min-width: 0; flex: 1; }
  .console-event { font-size: 9px; }
  .demo-kill-button { font-size: 11px; }
  .approach-grid h3 { font-size: 25px; }
  .approach-grid p { font-size: 14px; }
  .approach-number { margin-top: 4px; margin-bottom: 0; }
  .approach-note { align-items: flex-start; }
  .approach-note p { font-size: 11px; }
  .testimonials { padding-block: 35px; margin-top: 22px; }
  .testimonials-intro, .customer-story p { font-size: 14px; }
  .customer-story { padding: 24px; }
  .customer-story h3 { font-size: 27px; }
  .about-signoff { font-size: 8px; }
  .faq summary { font-size: 14px; }
  .faq details p { font-size: 13px; }
  .closing { padding-block: 28px; margin-inline: auto; }
  .closing-top .eyebrow { font-size: 7px; max-width: 210px; }
  .closing-mark { font-size: 37px; }
  .closing h2 { font-size: clamp(38px, 9.4vw, 58px); }
  .closing-bottom p { font-size: 14px; }
  .footer-main { gap: 20px; }
  .footer-main > p { font-size: 11px; }
  .footer-site-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; margin-left: 0; gap: 18px; }
  .footer-site-links .text-link { font-size: 11px; gap: 8px; }
  .footer-bottom { font-size: 10px; }
  .footer-status { font-size: 7px; }
  .plan-dialog h2, .privacy-dialog h2 { font-size: 32px; }
  .dialog-top .eyebrow { font-size: 7px; }
  .lab-intro { padding-bottom: 34px; }
  .lab-intro h1 { font-size: clamp(38px, 10.5vw, 58px); }
  .lab-intro .eyebrow { font-size: 8px; }
  .lab-intro-copy > p:first-child { font-size: 14px; }
  .simulation-label { font-size: 7px; }
  .simulation-note { font-size: 10px; }
  .scenario-heading .eyebrow { font-size: 7px; }
  .reset-tour { font-size: 10px; }
  .scenario-choice { padding: 15px 12px; }
  .scenario-choice > span:nth-child(2) { font-size: 13px; }
  .scenario-choice small { font-size: 11px; }
  .lab-topbar { padding-inline: 15px; }
  .lab-console-name { font-size: 6px; }
  .lab-state { font-size: 6px; }
  .network-panel .console-label { font-size: 6px; }
  .network-panel h2 { font-size: 11px; }
  .network-legend { font-size: 6px; }
  .mobile-authority { background: #294156; border-color: #7895b0; color: #dce9f6; font-size: 8px; }
  .mobile-authority-label { color: #b3c9df; font-size: 6px; }
  .mobile-agent-boundary { border-color: #557790; background: #223c5140; }
  .mobile-boundary-label { color: #a6c1d9; font-size: 6px; }
  .mobile-primary { background: #294855; border-color: #7ea5b7; }
  .mobile-primary > div, .mobile-child-nodes > div { color: #d7e8f8; }
  .mobile-primary small, .mobile-child-nodes small { color: #accedc; font-size: 6px; }
  .mobile-child-nodes > div, .mobile-access-nodes > div { background: #20394e; border-color: #597b98; }
  .mobile-child-nodes > div { font-size: 9px; }
  .mobile-access-nodes > div { color: #d4e4f4; font-size: 7px; }
  .mobile-access-nodes small { color: #acc3d9; font-size: 5px; }
  .metric-label { font-size: 5px; }
  .network-metrics > div > span:last-child { font-size: 8px; }
  .override-panel { border-color: #3b5068; }
  .override-panel h2 { font-size: 32px; }
  .override-panel > p { font-size: 13px; }
  .human-channel { font-size: 6px; }
  .override-summary { font-size: 9px; }
  .progress-heading .eyebrow { font-size: 7px; }
  #progress-label { font-size: 6px; }
  .shutdown-timeline li > div { font-size: 12px; }
  .shutdown-timeline small { font-size: 9px; }
  .incident-log-heading { font-size: 6px; }
  #event-log li { font-size: 8px; grid-template-columns: 12px 42px 1fr; }
  .lab-bottomline { font-size: 5px; }
  .demo-explainer h2 { font-size: 34px; }
  .demo-explainer .eyebrow { font-size: 8px; }
  .explainer-grid h3 { font-size: 25px; }
  .explainer-grid p { font-size: 14px; }
  .demo-coverage p { font-size: 11px; }
  .demo-closing { padding: 26px 22px; }
  .demo-closing h2 { font-size: 28px; }
  .demo-closing .button { font-size: 12px; }
}
@media (max-width: 380px) {
  .section-shell, .demo-main { padding-inline: 18px; }
  .hero h1 { font-size: 39px; }
  .hero .eyebrow { font-size: 7px; }
  .hero-art { height: 345px; }
  .hardware-wrap { transform: translateY(-2px) scale(.65); }
  .launch-note { font-size: 7px; }
  .principles-strip > div { font-size: 9px; }
  .strip-label { font-size: 6px; }
  .service-card, .service-card:first-child, .service-card:nth-child(3), .service-card:nth-child(4) { padding: 21px; }
  .solution-tabs button { font-size: 9px; }
  .solution-panel h3 { font-size: 25px; }
  .solution-node small { font-size: 8px; }
  .solution-visual-top, .flow-caption { font-size: 5px; }
  .solution-infrastructure span { font-size: 7px; }
  .console-bar, .console-bar > span:first-child { font-size: 6px; }
  .console-footer { font-size: 5px; }
  .customer-story { padding: 21px; }
  .customer-story h3 { font-size: 24px; }
  .footer-main > p { margin-left: 0; }
  .footer-status { font-size: 6px; }
  .lab-intro h1 { font-size: 36px; }
  .lab-intro .eyebrow { font-size: 7px; }
  .lab-console-name { font-size: 5px; }
  .network-panel h2 { font-size: 9px; }
  .network-legend { font-size: 5px; }
  .mobile-child-nodes > div { font-size: 8px; }
  .mobile-access-nodes > div { font-size: 6px; }
}