:root {
  --paper: #f3ede1;
  --paper-deep: #e9dfcf;
  --ink: #191815;
  --muted: #756f66;
  --line: #cfc4b3;
  --rust: #a94f2b;
  --rust-dark: #7d341d;
  --green: #2f6b4f;
  --code: #20211f;
  --white: #fffdf8;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.site-header {
  height: 76px;
  padding: 0 clamp(24px, 5vw, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 750;
}
.wordmark { text-decoration: none; display: flex; align-items: center; gap: 10px; }
.mark-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rust); }
.site-header nav { display: flex; gap: clamp(18px, 3vw, 38px); }
.site-header nav a { text-decoration: none; color: var(--muted); transition: color .2s; }
.site-header nav a:hover { color: var(--rust); }

.hero {
  min-height: 600px;
  padding: clamp(70px, 10vw, 138px) clamp(24px, 8vw, 128px) 92px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.eyebrow, .kicker { margin: 0 0 24px; color: var(--rust); font-weight: 800; font-size: 11px; letter-spacing: .24em; }
.live-pulse { display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 5px rgba(169,79,43,.12); }
.hero h1 { max-width: 820px; margin: 0; font: 400 clamp(64px, 8.5vw, 126px)/.82 var(--serif); letter-spacing: -.06em; }
.hero h1 em { font-weight: 400; color: var(--rust); }
.hero-copy { width: min(540px, 100%); margin: 50px 0 0 2px; color: #514c45; font: italic 21px/1.6 var(--serif); }
.route-sketch { position: absolute; width: min(390px, 30vw); right: 7vw; bottom: 95px; display: grid; grid-template-columns: 88px 1fr 124px; align-items: center; gap: 15px; }
.route-source { border: 1.5px solid var(--ink); border-radius: 54px 54px 3px 3px; height: 180px; display: flex; justify-content: flex-end; flex-direction: column; padding: 20px 13px; font-size: 9px; letter-spacing: .13em; line-height: 1.5; }
.route-source span { width: 9px; height: 9px; background: var(--rust); border-radius: 50%; margin: 0 auto 33px; }
.route-lines { height: 150px; display: flex; flex-direction: column; justify-content: space-between; }
.route-lines i { height: 1px; width: 100%; background: var(--ink); display: block; transform-origin: left; }
.route-lines i:nth-child(1) { transform: rotate(-10deg); }
.route-lines i:nth-child(2) { background: var(--rust); }
.route-lines i:nth-child(3) { transform: rotate(10deg); }
.route-destinations { height: 172px; display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.route-destinations .active { color: var(--rust); }

.demo-section { padding: 95px clamp(18px, 5vw, 76px) 120px; background: var(--white); }
.section-heading { max-width: 1380px; margin: 0 auto 35px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.section-heading h2, .story-intro h2 { margin: 0; font: 400 clamp(42px, 5vw, 72px)/.96 var(--serif); letter-spacing: -.035em; }
.section-heading > p { color: var(--muted); font-size: 13px; }
.section-heading .kicker { margin-bottom: 13px; }

.demo-frame { max-width: 1380px; min-height: 670px; margin: 0 auto; display: grid; grid-template-columns: 270px minmax(400px, 1fr) 390px; border: 1px solid #bcb3a6; background: var(--paper); box-shadow: 0 25px 65px rgba(42,34,22,.08); }
.step-rail { border-right: 1px solid var(--line); padding: 28px 0; }
.visit-id { padding: 0 26px 24px; border-bottom: 1px solid var(--line); }
.visit-id span { display: block; color: var(--muted); font-size: 9px; letter-spacing: .2em; font-weight: 800; margin-bottom: 8px; }
.visit-id code { font: 12px var(--mono); }
.step-rail ol { list-style: none; margin: 0; padding: 14px 0; }
.step-rail li { min-height: 86px; padding: 18px 25px; display: grid; grid-template-columns: 35px 1fr 8px; align-items: center; gap: 8px; color: #8d867d; position: relative; }
.step-rail li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.step-rail li.current { color: var(--ink); background: rgba(255,253,248,.72); }
.step-rail li.current::before { background: var(--rust); }
.step-rail li.done { color: var(--ink); }
.step-rail li b { font: 10px var(--mono); color: inherit; }
.step-rail li span { font-size: 13px; font-weight: 750; line-height: 1.3; }
.step-rail li small { display: block; margin-top: 5px; font-size: 10px; color: #8d867d; font-weight: 500; }
.step-rail li i { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
.step-rail li.done i { background: var(--green); border-color: var(--green); }

.workbench { display: flex; min-width: 0; flex-direction: column; border-right: 1px solid var(--line); }
.workbench-topline { height: 69px; border-bottom: 1px solid var(--line); padding: 0 28px; display: flex; justify-content: space-between; align-items: center; }
.status-chip, .identity-state { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 9px; letter-spacing: .12em; font-weight: 800; }
.status-chip span:first-child { width: 7px; height: 7px; border-radius: 50%; background: #a4998b; }
.status-chip span:first-child.online { background: var(--green); box-shadow: 0 0 0 4px rgba(47,107,79,.1); }
.identity-state span { padding: 7px 9px; border: 1px solid var(--line); }
.identity-state span:last-child { color: var(--rust); }
.stage { flex: 1; padding: 44px clamp(28px, 4vw, 58px) 26px; }
.stage-number { color: #9a9287; font: 10px var(--mono); letter-spacing: .12em; }
.stage-route { margin: 36px 0 11px; color: var(--rust); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.stage h3 { max-width: 600px; margin: 0; font: 400 clamp(34px, 3vw, 51px)/1.03 var(--serif); letter-spacing: -.03em; }
.stage > p:not(.stage-route) { max-width: 630px; margin: 21px 0 32px; color: #666057; font: 16px/1.65 var(--serif); }
.stage-detail { max-width: 620px; }
.endpoint-preview { min-height: 62px; padding: 18px; display: flex; align-items: center; gap: 17px; border: 1px solid var(--line); background: rgba(255,253,248,.58); }
.endpoint-preview span { color: var(--rust); font: 800 10px var(--mono); }
.endpoint-preview code { overflow: hidden; text-overflow: ellipsis; font: 12px var(--mono); white-space: nowrap; }
.address-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.address-form label { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.address-form label:first-child { grid-column: 1 / -1; }
.address-form input { width: 100%; margin-top: 6px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 0; color: var(--ink); background: var(--white); outline: none; font-size: 13px; }
.address-form input:focus { border-color: var(--rust); box-shadow: 0 0 0 2px rgba(169,79,43,.1); }
.grant-choice { padding: 20px; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--rust); background: rgba(169,79,43,.055); }
.grant-choice div span { display: block; color: var(--rust); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.grant-choice div strong { display: block; margin-top: 6px; font: 22px var(--serif); }
.grant-choice code { color: var(--muted); font: 10px var(--mono); }
.result-card { padding: 20px; border-left: 3px solid var(--green); background: rgba(47,107,79,.06); }
.result-card span { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.result-card strong { display: block; margin-top: 7px; font: 25px var(--serif); }

.action-row { min-height: 88px; padding: 18px 28px; display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--line); }
.button, .text-button { border: 0; cursor: pointer; }
.button { min-height: 48px; padding: 0 18px; font-size: 11px; font-weight: 800; letter-spacing: .07em; transition: transform .18s, background .18s; }
.button:hover:not(:disabled) { transform: translateY(-2px); }
.button-primary { color: var(--white); background: var(--rust); }
.button-primary:hover:not(:disabled) { background: var(--rust-dark); }
.button-primary span { margin-left: 18px; }
.button-secondary { border: 1px solid var(--line); background: transparent; color: var(--ink); }
.button:disabled { cursor: wait; opacity: .55; }
.text-button { margin-left: auto; padding: 8px 0; color: var(--muted); background: transparent; font-size: 10px; text-decoration: underline; text-underline-offset: 4px; }

.inspector { min-width: 0; color: #e8e2d8; background: var(--code); display: flex; flex-direction: column; }
.inspector-tabs { height: 69px; padding: 0 24px; display: flex; gap: 26px; align-items: end; border-bottom: 1px solid #3c3d39; }
.inspector-tabs button { height: 43px; border: 0; border-bottom: 2px solid transparent; color: #8f918a; background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.inspector-tabs button.selected { color: #f4efe5; border-color: var(--rust); }
.inspector-meta { padding: 20px 23px 5px; display: flex; justify-content: space-between; color: #888b83; font: 9px var(--mono); letter-spacing: .12em; }
.inspector-meta button { border: 0; color: #b6b8b0; background: transparent; cursor: pointer; font: 9px var(--mono); }
.inspector pre { flex: 1; min-height: 350px; margin: 0; padding: 17px 23px; overflow: auto; white-space: pre-wrap; word-break: break-word; color: #d4c8b8; font: 11px/1.7 var(--mono); }
.privacy-note { margin: 12px 20px 20px; padding: 16px; display: flex; gap: 12px; border: 1px solid #484944; color: #989a93; }
.privacy-note > span { color: #d77a51; }
.privacy-note p { margin: 0; font: 11px/1.5 var(--sans); }
.privacy-note strong { display: block; margin-bottom: 3px; color: #d0d1cb; font-size: 10px; letter-spacing: .08em; }

.session-story { padding: 120px clamp(24px, 8vw, 128px); display: grid; grid-template-columns: minmax(280px, .8fr) minmax(400px, 1.3fr); gap: clamp(70px, 10vw, 160px); border-bottom: 1px solid var(--line); }
.story-intro > p:last-child { max-width: 440px; margin-top: 31px; color: var(--muted); font: 17px/1.7 var(--serif); }
.event-stream { position: relative; padding-left: 40px; }
.event-stream::before { content: ""; position: absolute; left: 10px; top: 12px; bottom: 12px; width: 1px; background: var(--line); }
.empty-event, .event { min-height: 82px; display: grid; grid-template-columns: 45px 1fr; gap: 15px; position: relative; }
.empty-event > span, .event > span { color: var(--rust); font: 10px var(--mono); }
.empty-event > span::before, .event > span::before { content: ""; position: absolute; left: -34px; top: 4px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--paper); background: var(--rust); box-shadow: 0 0 0 1px var(--rust); }
.empty-event p { margin: 0; color: var(--muted); font: italic 17px var(--serif); }
.event h3 { margin: 0 0 7px; font: 22px var(--serif); }
.event p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.event .route-tag { display: inline-block; margin-left: 8px; color: var(--rust); font: 800 8px var(--sans); letter-spacing: .14em; }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.principles article { min-height: 300px; padding: 62px clamp(25px, 5vw, 72px); border-right: 1px solid var(--line); }
.principles article:last-child { border-right: 0; }
.principles span { color: var(--rust); font: 10px var(--mono); }
.principles h3 { margin: 50px 0 12px; font: 35px var(--serif); }
.principles p { max-width: 320px; margin: 0; color: var(--muted); font: 15px/1.65 var(--serif); }
footer { min-height: 110px; padding: 38px clamp(24px, 5vw, 76px); display: flex; justify-content: space-between; align-items: center; color: #8c857b; font-size: 9px; font-weight: 750; letter-spacing: .16em; }

@media (max-width: 1150px) {
  .route-sketch { opacity: .24; right: -40px; width: 360px; }
  .demo-frame { grid-template-columns: 220px 1fr; }
  .inspector { grid-column: 1 / -1; min-height: 460px; }
  .inspector pre { min-height: 300px; }
}
@media (max-width: 760px) {
  .site-header { height: auto; min-height: 70px; padding: 19px 20px; }
  .site-header nav a:not(:last-child) { display: none; }
  .hero { min-height: 560px; padding: 80px 23px 70px; }
  .hero h1 { font-size: clamp(56px, 18vw, 82px); }
  .hero-copy { margin-top: 36px; font-size: 18px; }
  .route-sketch { display: none; }
  .demo-section { padding: 70px 12px 80px; }
  .section-heading { padding: 0 10px; align-items: start; flex-direction: column; }
  .demo-frame { grid-template-columns: 1fr; }
  .step-rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .step-rail ol { display: grid; grid-template-columns: repeat(5, 1fr); padding: 0; overflow: auto; }
  .step-rail li { min-width: 58px; min-height: 62px; padding: 15px 7px; display: flex; justify-content: center; }
  .step-rail li span, .step-rail li i { display: none; }
  .step-rail li::before { top: auto; right: 0; width: auto; height: 3px; }
  .visit-id { padding: 17px 19px; }
  .workbench { border-right: 0; }
  .workbench-topline { padding: 0 18px; }
  .stage { min-height: 485px; padding: 33px 22px 25px; }
  .stage h3 { font-size: 38px; }
  .address-form { grid-template-columns: 1fr; }
  .address-form label:first-child { grid-column: auto; }
  .grant-choice { align-items: start; flex-direction: column; gap: 14px; }
  .action-row { padding: 15px 17px; flex-wrap: wrap; }
  .button { flex: 1; }
  .text-button { width: 100%; margin: 2px auto 0; }
  .session-story { padding: 85px 24px; grid-template-columns: 1fr; gap: 50px; }
  .principles { grid-template-columns: 1fr; }
  .principles article { min-height: 250px; border-right: 0; border-bottom: 1px solid var(--line); }
  footer { align-items: flex-start; flex-direction: column; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}