:root {
  color-scheme: light;
  --bg: #f5f7f5;
  --bg-elevated: #ffffff;
  --surface: #edf1ef;
  --surface-strong: #e3e9e6;
  --text: #12221d;
  --text-soft: #53635d;
  --text-faint: #75827d;
  --line: #d7dfdb;
  --line-strong: #aab8b2;
  --brand: #087965;
  --brand-bright: #04a687;
  --brand-soft: #d9f4ec;
  --danger: #c74335;
  --danger-soft: #fae3df;
  --warn: #9b6400;
  --warn-soft: #fff0cf;
  --ink-inverse: #f3fff9;
  --shadow: 0 22px 60px rgba(19, 52, 42, .12);
  --shadow-soft: 0 10px 30px rgba(19, 52, 42, .08);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 11px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08110f;
  --bg-elevated: #101b18;
  --surface: #15231f;
  --surface-strong: #1c2e29;
  --text: #edf7f2;
  --text-soft: #a8bbb3;
  --text-faint: #7f968d;
  --line: #293c35;
  --line-strong: #486057;
  --brand: #55d9bd;
  --brand-bright: #78efd5;
  --brand-soft: #143f36;
  --danger: #ff8a7c;
  --danger-soft: #43241f;
  --warn: #ffc85f;
  --warn-soft: #3d321d;
  --ink-inverse: #07110e;
  --shadow: 0 30px 80px rgba(0, 0, 0, .38);
  --shadow-soft: 0 12px 34px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font: 500 16px/1.6 Manrope, system-ui, sans-serif; transition: background .25s ease, color .25s ease; }
button, input { font: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.shell { width: min(1460px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; transform: translateY(-150%); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { transform: none; }

.site-header { width: min(1540px, calc(100% - 32px)); margin: 16px auto 0; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; position: sticky; top: 12px; z-index: 20; background: color-mix(in srgb, var(--bg-elevated) 82%, transparent); border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 18px; backdrop-filter: blur(18px); box-shadow: var(--shadow-soft); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 800; letter-spacing: -.03em; font-size: 19px; }
.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid var(--brand); border-radius: 50%; position: relative; }
.brand-mark::before { content: ""; height: 8px; width: 2px; background: var(--brand); position: absolute; top: 3px; border-radius: 2px; }
.brand-mark span { width: 10px; height: 10px; background: var(--brand); border-radius: 50%; transform: translateY(5px); box-shadow: 0 0 0 3px var(--bg-elevated); }
nav { display: flex; align-items: center; gap: 26px; }
nav a { text-decoration: none; color: var(--text-soft); font-size: 14px; }
nav a:hover { color: var(--text); }
.theme-toggle { min-width: 88px; min-height: 42px; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; }
.theme-icon { width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; box-shadow: inset -4px -2px 0 var(--surface); }
.theme-label { font-size: 12px; font-weight: 700; }

.hero { min-height: 740px; padding: 120px 34px 90px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(480px, .9fr); gap: 80px; align-items: center; overflow: hidden; }
.eyebrow { margin: 0 0 16px; color: var(--brand); text-transform: uppercase; letter-spacing: .16em; font: 700 11px/1.4 "DM Mono", monospace; }
.pulse-dot { display: inline-block; width: 8px; height: 8px; margin-right: 9px; background: var(--brand); border-radius: 50%; box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 16%, transparent); }
h1, h2, h3, p { text-wrap: pretty; }
h1 { margin: 0; font-size: clamp(50px, 6.1vw, 91px); line-height: .98; letter-spacing: -.068em; max-width: 920px; }
h1 span { color: var(--text-faint); }
.hero-lede { max-width: 690px; margin: 30px 0 0; color: var(--text-soft); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.65; }
.hero-actions { display: flex; gap: 12px; margin-top: 38px; flex-wrap: wrap; }
.button { min-height: 50px; padding: 0 21px; border: 1px solid transparent; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; text-decoration: none; font-weight: 750; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--brand); color: var(--ink-inverse); box-shadow: 0 10px 30px color-mix(in srgb, var(--brand) 22%, transparent); }
.button.primary:hover { background: var(--brand-bright); }
.button.secondary { border-color: var(--line-strong); background: var(--bg-elevated); color: var(--text); }
.button.compact { min-height: 42px; padding-inline: 16px; font-size: 13px; }
.button.full { width: 100%; margin-top: 18px; }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.hero-note { margin-top: 16px; color: var(--text-faint); font-size: 12px; }
.hero-visual { position: relative; min-height: 560px; display: grid; place-items: center; }
.ambient-ring { position: absolute; border: 1px solid var(--line); border-radius: 50%; }
.ring-one { width: 540px; height: 540px; opacity: .62; }
.ring-two { width: 410px; height: 410px; opacity: .38; border-style: dashed; animation: rotate 26s linear infinite; }
.device-card { width: min(450px, 88%); padding: 26px; position: relative; z-index: 2; background: color-mix(in srgb, var(--bg-elevated) 94%, var(--brand) 6%); border: 1px solid var(--line); border-radius: 34px; box-shadow: var(--shadow); transform: rotate(-2deg); }
.device-topline { display: flex; justify-content: space-between; color: var(--text-soft); font-size: 12px; }
.connected { color: var(--brand); }
.connected::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: currentColor; border-radius: 50%; }
.temperature { margin-top: 34px; font: 500 clamp(65px, 8vw, 106px)/1 "DM Mono", monospace; letter-spacing: -.08em; }
.temperature span { font-size: .25em; color: var(--text-soft); vertical-align: top; letter-spacing: 0; }
.temperature-range { color: var(--text-soft); font-size: 12px; }
.mini-chart { width: 100%; margin-top: 16px; overflow: visible; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-area { fill: color-mix(in srgb, var(--brand) 12%, transparent); }
.chart-line { fill: none; stroke: var(--brand); stroke-width: 3; }
.preview-flow { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.flow-node { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-soft); font: 600 10px "DM Mono", monospace; }
.flow-node.done { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.preview-flow i { flex: 1; height: 1px; background: var(--line); }
.floating-proof { position: absolute; z-index: 3; padding: 13px 16px; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; }
.floating-proof b { font-size: 12px; }
.floating-proof span { color: var(--text-faint); font-size: 10px; }
.proof-human { top: 42px; right: 0; }
.proof-source { bottom: 54px; left: -8px; }

.signal-strip { border-block: 1px solid var(--line); background: var(--bg-elevated); }
.signal-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.signal-grid div { padding: 25px 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.signal-grid div:last-child { border: 0; }
.signal-grid strong { font-size: 15px; letter-spacing: -.02em; }
.signal-grid span { color: var(--text-faint); font-size: 11px; }
.section { padding-block: 120px; }
.section-heading { max-width: 790px; margin-bottom: 54px; }
.section-heading h2, .limits-grid h2 { margin: 0; font-size: clamp(38px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -.055em; }
.section-heading > p:last-child { max-width: 680px; color: var(--text-soft); font-size: 18px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step-card { min-height: 340px; padding: 30px; position: relative; overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.step-number { position: absolute; right: 20px; top: 12px; color: var(--surface-strong); font: 800 74px/1 Manrope; letter-spacing: -.08em; }
.step-icon { width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: 14px; position: relative; margin-bottom: 52px; }
.sensor-icon::before { content: ""; position: absolute; width: 8px; height: 24px; left: 19px; top: 8px; border: 2px solid var(--brand); border-radius: 5px; }
.sensor-icon::after { content: ""; position: absolute; width: 14px; height: 14px; left: 16px; bottom: 5px; background: var(--brand); border-radius: 50%; }
.review-icon::before { content: ""; position: absolute; inset: 9px 12px; border: 2px solid var(--brand); border-radius: 3px; box-shadow: 6px 6px 0 -3px var(--bg-elevated), 6px 6px 0 -1px var(--brand); }
.route-icon::before { content: ""; position: absolute; left: 10px; right: 10px; top: 23px; height: 2px; background: var(--brand); }
.route-icon::after { content: ""; position: absolute; width: 8px; height: 8px; border: 2px solid var(--brand); border-radius: 50%; left: 8px; top: 18px; box-shadow: 18px 0 0 -2px var(--bg-elevated), 18px 0 0 0 var(--brand); }
.step-card h3 { margin: 0; font-size: 24px; letter-spacing: -.035em; }
.step-card p { color: var(--text-soft); font-size: 14px; }
.step-proof { position: absolute; bottom: 24px; left: 30px; color: var(--brand); font: 600 11px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .09em; }

.demo-section { padding: 110px 0 130px; background: color-mix(in srgb, var(--surface) 70%, var(--bg)); border-block: 1px solid var(--line); }
.demo-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; }
.demo-heading h2 { margin: 0; font-size: clamp(38px, 4.2vw, 60px); letter-spacing: -.055em; line-height: 1; }
.demo-controls { display: flex; gap: 8px; }
.console-shell { overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.console-topbar { min-height: 76px; padding: 13px 20px; display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center; border-bottom: 1px solid var(--line); }
.case-identity { display: flex; align-items: center; gap: 12px; }
.case-identity div { display: flex; flex-direction: column; }
.case-identity b { font-size: 14px; }
.case-identity small { color: var(--text-faint); font: 500 10px "DM Mono", monospace; }
.status-orb { width: 13px; height: 13px; background: var(--brand); border: 3px solid var(--brand-soft); border-radius: 50%; box-shadow: 0 0 0 1px var(--brand); }
.status-orb.attention { background: var(--danger); border-color: var(--danger-soft); box-shadow: 0 0 0 1px var(--danger); }
.status-orb.waiting { background: var(--warn); border-color: var(--warn-soft); box-shadow: 0 0 0 1px var(--warn); }
.boundary-chip { padding: 8px 12px; background: var(--brand-soft); color: var(--brand); border-radius: 999px; font-size: 11px; }
.run-counter { display: flex; align-items: baseline; gap: 7px; }
.run-counter span { font: 500 24px "DM Mono", monospace; }
.run-counter small { color: var(--text-faint); }
.console-grid { display: grid; grid-template-columns: 250px minmax(460px, 1fr) 360px; min-height: 660px; }
.journey-panel, .activity-panel { padding: 24px; background: color-mix(in srgb, var(--surface) 62%, var(--bg-elevated)); }
.journey-panel { border-right: 1px solid var(--line); }
.activity-panel { border-left: 1px solid var(--line); display: flex; min-width: 0; flex-direction: column; }
.journey-panel h3, .activity-heading h3 { margin: 0; font-size: 16px; letter-spacing: -.025em; }
.panel-intro { margin: 4px 0 20px; color: var(--text-faint); font-size: 11px; }
.journey { margin: 0; padding: 0; list-style: none; }
.journey li { min-height: 64px; display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 10px; position: relative; opacity: .45; }
.journey li::after { content: ""; position: absolute; left: 14px; top: 29px; bottom: -1px; width: 1px; background: var(--line); }
.journey li:last-child::after { display: none; }
.journey li > span { width: 29px; height: 29px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 50%; font: 600 10px "DM Mono", monospace; position: relative; z-index: 1; }
.journey li div { display: flex; flex-direction: column; padding-top: 2px; }
.journey li b { font-size: 11px; }
.journey li small { color: var(--text-faint); font-size: 9px; }
.journey li.complete, .journey li.active { opacity: 1; }
.journey li.complete > span { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.journey li.complete > span::before { content: "✓"; }
.journey li.complete > span { font-size: 0; }
.journey li.complete > span::before { font-size: 11px; }
.journey li.active > span { background: var(--brand); color: var(--ink-inverse); border-color: var(--brand); box-shadow: 0 0 0 5px var(--brand-soft); }
.control-note { color: var(--text-faint); font-size: 9px; line-height: 1.45; }
.case-panel { min-width: 0; padding: 22px 28px; }
.case-tabs { display: flex; gap: 5px; padding: 4px; width: fit-content; background: var(--surface); border-radius: 10px; }
.case-tabs button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 7px; color: var(--text-faint); background: transparent; cursor: pointer; font-size: 10px; }
.case-tabs button[aria-selected="true"] { background: var(--bg-elevated); color: var(--text); box-shadow: 0 2px 7px rgba(0,0,0,.08); }
.tab-panel { padding-top: 26px; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.metric-row div { padding: 14px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.metric-row div:last-child { border: 0; }
.metric-row span { color: var(--text-faint); font-size: 9px; }
.metric-row strong { font: 500 17px "DM Mono", monospace; }
.chart-wrap { height: 300px; position: relative; padding-top: 18px; margin-top: 14px; }
.range-band { position: absolute; z-index: 0; left: 50px; right: 20px; top: 172px; height: 28px; background: var(--brand-soft); border-block: 1px dashed var(--brand); opacity: .7; }
.range-band span { position: absolute; right: 6px; top: 4px; color: var(--brand); font-size: 8px; }
#temperature-chart { width: 100%; height: 100%; position: relative; z-index: 1; overflow: visible; }
.evidence-callout { display: flex; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.evidence-callout .shield { width: 28px; height: 32px; flex: 0 0 28px; border: 2px solid var(--brand); border-radius: 14px 14px 18px 18px; }
.evidence-callout b { font-size: 11px; }
.evidence-callout p { margin: 2px 0 0; color: var(--text-soft); font-size: 10px; }
.package-preview { width: 190px; margin: 20px auto 28px; filter: drop-shadow(0 18px 18px rgba(0,0,0,.16)); }
.package-cap { width: 110px; height: 35px; margin: auto; background: #d6dedb; border-radius: 8px 8px 2px 2px; border-bottom: 5px solid #92a29c; }
.package-label { min-height: 245px; padding: 25px 19px; background: #f4f0e7; color: #10201b; border-radius: 9px 9px 28px 28px; display: flex; flex-direction: column; }
.package-label small { color: #a33b30; font: 700 7px "DM Mono", monospace; }
.package-label b { margin-top: 16px; font-size: 21px; line-height: 1.03; letter-spacing: -.04em; }
.package-label span { margin-top: 12px; color: #087965; font-weight: 700; font-size: 10px; }
.package-label i { margin-top: 4px; font-style: normal; font-size: 8px; }
.package-label code { margin-top: auto; color: #5b6863; font-size: 8px; }
.verified-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.verified-field { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; }
.verified-field span { display: block; color: var(--text-faint); font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.verified-field b { font-size: 11px; }
.verified-field small { display: block; color: var(--brand); font-size: 8px; }
.source-link { display: flex; justify-content: space-between; margin-top: 12px; padding: 11px 13px; background: var(--brand-soft); color: var(--brand); border-radius: 9px; text-decoration: none; font-size: 10px; }
.empty-review, .review-packet { min-height: 410px; padding: 42px; display: flex; flex-direction: column; justify-content: center; border: 1px dashed var(--line-strong); border-radius: 15px; background: var(--surface); }
.empty-review { text-align: center; align-items: center; }
.review-lock { width: 46px; height: 38px; margin-bottom: 18px; border: 2px solid var(--line-strong); border-radius: 9px; position: relative; }
.review-lock::before { content: ""; position: absolute; width: 22px; height: 18px; left: 10px; top: -18px; border: 2px solid var(--line-strong); border-bottom: 0; border-radius: 14px 14px 0 0; }
.empty-review h3 { margin: 0; }
.empty-review p { color: var(--text-faint); font-size: 12px; }
.review-packet h3 { margin: 0 0 18px; font-size: 24px; }
.packet-row { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.packet-row span { color: var(--text-faint); }
.human-stamp { margin-top: 20px; padding: 12px; border: 1px solid var(--brand); border-radius: 9px; color: var(--brand); font: 600 10px "DM Mono", monospace; }
.activity-heading { display: flex; justify-content: space-between; align-items: start; }
.activity-heading .eyebrow { margin-bottom: 2px; font-size: 8px; }
.live-label { padding: 4px 8px; background: var(--brand-soft); color: var(--brand); border-radius: 999px; font: 600 8px "DM Mono", monospace; }
.timeline { flex: 1; padding: 18px 0; overflow-y: auto; max-height: 540px; }
.timeline-item { display: grid; grid-template-columns: 13px 1fr; gap: 11px; padding-bottom: 18px; position: relative; }
.timeline-item::after { content: ""; position: absolute; left: 6px; top: 14px; bottom: 0; width: 1px; background: var(--line); }
.timeline-item:last-child::after { display: none; }
.timeline-dot { width: 13px; height: 13px; margin-top: 4px; background: var(--brand-soft); border: 2px solid var(--brand); border-radius: 50%; position: relative; z-index: 1; }
.timeline-item.attention .timeline-dot { background: var(--danger-soft); border-color: var(--danger); }
.timeline-item.waiting .timeline-dot { background: var(--warn-soft); border-color: var(--warn); }
.timeline-copy { min-width: 0; }
.timeline-meta { display: flex; justify-content: space-between; gap: 8px; }
.timeline-meta b { font-size: 10px; }
.timeline-meta time { color: var(--text-faint); font: 500 8px "DM Mono", monospace; }
.timeline-copy h4 { margin: 2px 0; font-size: 12px; }
.timeline-copy p { margin: 0; color: var(--text-soft); font-size: 9px; line-height: 1.5; }
.timeline-evidence { display: inline-block; margin-top: 5px; color: var(--brand); font-size: 8px; }
.audit-footer { padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; font-size: 8px; color: var(--text-faint); }
.audit-footer a { color: var(--brand); }

.evidence-section { padding-bottom: 130px; }
.source-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.source-grid a { min-height: 245px; padding: 24px; display: flex; flex-direction: column; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; transition: transform .18s ease, border-color .18s ease; }
.source-grid a:hover { transform: translateY(-4px); border-color: var(--brand); }
.source-grid span { color: var(--brand); font: 600 9px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .1em; }
.source-grid h3 { margin: 22px 0 8px; font-size: 18px; line-height: 1.2; }
.source-grid p { color: var(--text-soft); font-size: 12px; }
.source-grid b { margin-top: auto; color: var(--brand); font-size: 10px; }
.limits-section { padding: 100px 0; background: #10251f; color: #ecfaf4; }
.limits-grid { display: grid; grid-template-columns: .8fr 1fr; gap: 100px; }
.limits-grid .eyebrow { color: #78efd5; }
.limits-grid ul { margin: 0; padding: 0; list-style: none; }
.limits-grid li { padding: 17px 0 17px 34px; border-bottom: 1px solid rgba(255,255,255,.13); position: relative; color: #bdd0c8; }
.limits-grid li::before { content: "-"; position: absolute; left: 0; color: #78efd5; }
.site-footer { padding: 34px 0; background: #07110e; color: #e9f5f0; }
.footer-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 42px; align-items: center; }
.footer-grid p { margin: 0; color: #8da59b; font-size: 9px; max-width: 700px; }
.footer-grid > div:last-child { display: flex; gap: 18px; }
.footer-grid a { color: #bcd0c8; font-size: 10px; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 50; max-width: 360px; padding: 14px 17px; background: var(--text); color: var(--bg); border-radius: 12px; box-shadow: var(--shadow); transform: translateY(140%); opacity: 0; transition: .25s ease; font-size: 11px; }
.toast.show { transform: none; opacity: 1; }

.demo-subtitle { max-width: 720px; margin: 8px 0 0; color: var(--text-soft); font-size: 12px; }
.pilot-toolbar { margin-top: 18px; margin-bottom: 12px; min-height: 74px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 12px 34px rgba(0,0,0,.08); }
.pilot-toolbar label { min-width: min(440px, 48vw); display: flex; align-items: center; gap: 12px; }
.pilot-toolbar label > span { color: var(--text-faint); font: 600 9px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.pilot-toolbar select, .pilot-dialog input, .pilot-dialog select, .pilot-dialog textarea { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; }
.pilot-toolbar-actions { display: flex; align-items: center; gap: 10px; }
.pilot-toolbar-actions > a { color: var(--brand); font-size: 10px; }
.origin-chip { padding: 7px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font: 600 8px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.pilot-dialog { width: min(780px, calc(100% - 28px)); max-height: min(820px, calc(100vh - 30px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--bg-elevated); color: var(--text); box-shadow: 0 30px 100px rgba(0,0,0,.35); }
.pilot-dialog::backdrop { background: rgba(3,14,11,.72); backdrop-filter: blur(5px); }
.pilot-dialog form { padding: 24px; }
.pilot-dialog header, .pilot-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.pilot-dialog h3 { margin: 0; font-size: 26px; }
.dialog-close { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; }
.dialog-boundary { padding: 12px 14px; background: var(--brand-soft); border-left: 3px solid var(--brand); color: var(--text-soft); font-size: 11px; line-height: 1.5; }
.form-grid { margin: 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-height: 56vh; padding-right: 4px; overflow-y: auto; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; }
.form-grid label > span { color: var(--text-faint); font-size: 9px; }
.form-grid textarea { resize: vertical; line-height: 1.45; }
.form-wide { grid-column: 1 / -1; }
.pilot-dialog footer { justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--line); }
@keyframes rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; } }
@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr; padding-top: 100px; }
  .hero-copy { max-width: 950px; }
  .hero-visual { min-height: 510px; }
  .console-grid { grid-template-columns: 230px 1fr; }
  .activity-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-height: none; }
  .timeline-item { padding: 12px; border: 1px solid var(--line); border-radius: 10px; grid-template-columns: 13px 1fr; }
  .timeline-item::after { display: none; }
  .source-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .shell { width: min(100% - 28px, 1460px); }
  .site-header { width: calc(100% - 20px); top: 6px; height: 60px; padding-inline: 14px; }
  nav a { display: none; }
  .hero { min-height: auto; padding: 90px 0 60px; gap: 32px; }
  h1 { font-size: clamp(46px, 15vw, 70px); }
  .hero-lede { font-size: 16px; }
  .hero-visual { min-height: 430px; }
  .ring-one { width: 390px; height: 390px; }
  .ring-two { width: 310px; height: 310px; }
  .proof-human { top: 2px; right: 0; }
  .proof-source { bottom: 8px; left: 0; }
  .signal-grid { grid-template-columns: repeat(2, 1fr); }
  .signal-grid div:nth-child(2) { border-right: 0; }
  .signal-grid div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .section { padding-block: 82px; }
  .steps-grid, .source-grid { grid-template-columns: 1fr; }
  .step-card { min-height: 300px; }
  .demo-heading { align-items: start; gap: 20px; flex-direction: column; }
  .demo-controls { width: 100%; }
  .demo-controls { flex-wrap: wrap; }
  .demo-controls .button { flex: 1; }
  .pilot-toolbar { align-items: stretch; flex-direction: column; }
  .pilot-toolbar label { min-width: 0; width: 100%; align-items: flex-start; flex-direction: column; }
  .pilot-toolbar-actions { flex-wrap: wrap; }
  .form-grid { grid-template-columns: 1fr; }
  .form-wide { grid-column: auto; }
  .console-topbar { grid-template-columns: 1fr auto; }
  .boundary-chip { grid-column: 1 / -1; grid-row: 2; width: fit-content; }
  .console-grid { grid-template-columns: 1fr; }
  .journey-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .journey { display: grid; grid-template-columns: repeat(7, minmax(42px, 1fr)); overflow-x: auto; }
  .journey li { display: block; min-height: 72px; text-align: center; }
  .journey li::after { left: 50%; top: 14px; bottom: auto; right: -50%; width: auto; height: 1px; }
  .journey li > span { margin: auto; }
  .journey li div { display: none; }
  .case-panel { padding: 18px 14px; }
  .case-tabs { width: 100%; }
  .case-tabs button { flex: 1; padding-inline: 5px; }
  .metric-row { grid-template-columns: 1fr; }
  .metric-row div { border-right: 0; border-bottom: 1px solid var(--line); }
  .metric-row div:last-child { border: 0; }
  .timeline { grid-template-columns: 1fr; }
  .limits-grid, .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-grid > div:last-child { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .brand { font-size: 16px; }
  .theme-toggle { min-width: 74px; }
  .hero-actions .button { width: 100%; }
  .floating-proof { padding: 10px 12px; }
  .device-card { width: 95%; padding: 20px; }
  .temperature { font-size: 68px; }
}


.scale-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; }
.scale-figure { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-elevated); text-decoration: none; color: inherit; transition: border-color .2s ease; }
.scale-figure:hover, .scale-figure:focus-visible { border-color: var(--brand); }
.scale-figure b { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.045em; line-height: 1; color: var(--brand); }
.scale-figure span { font-size: 14px; line-height: 1.5; color: var(--text-soft); }
.scale-figure small { margin-top: auto; color: var(--brand); font: 600 10px "DM Mono", monospace; }
.scale-boundary { grid-column: 1 / -1; margin: 0; color: var(--text-faint); font-size: 12px; line-height: 1.5; }
@media (max-width: 760px) { .scale-strip { grid-template-columns: 1fr; } }
