@font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --cream: #f8fafc;
  --paper: #f6f7f7;
  --stone: #e5e7eb;
  --midnight: #080f1a;
  --slate: #1f2937;
  --graphite: #374151;
  --muted: #6b7585;
  --amber: #f59e0b;
  --amber-ink: #a95a00;
  --red: #ff6b63;
  --green: #62d994;
  --font: "Poppins", "Avenir Next", Avenir, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --focus: 3px solid var(--amber);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--midnight); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body::-webkit-scrollbar { width: 11px; }
body::-webkit-scrollbar-track { background: var(--stone); }
body::-webkit-scrollbar-thumb { border: 3px solid var(--stone); border-radius: 99px; background: var(--graphite); }
::selection { background: #ffd27b; color: var(--midnight); }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: var(--focus); outline-offset: 3px; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; translate: 0 -160%; padding: 10px 14px; border-radius: 8px; background: var(--midnight); color: white; text-decoration: none; transition: translate 160ms cubic-bezier(.2,0,0,1); }
.skip-link:focus { translate: 0; }

.site-header { height: clamp(58px, 4.04vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 0 clamp(28px, 3.8vw, 60px); border-bottom: 1px solid #dfe3e8; background: rgba(248,250,252,.97); }
.wordmark { color: var(--midnight); font-size: 34px; font-weight: 700; letter-spacing: -.045em; line-height: 1; text-decoration: none; }
.wordmark span { color: var(--amber-ink); }
.site-nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 38px); }
.site-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--slate); font-size: 15px; font-weight: 600; text-decoration: none; text-underline-offset: 7px; }
.site-nav a:hover { color: var(--midnight); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; }
.site-nav svg { width: 17px; height: 17px; }

.hero { position: relative; height: clamp(726px, 50.44vw, 800px); overflow: hidden; padding: clamp(50px, 3.47vw, 55px) clamp(28px, 3.6vw, 58px) 0; }
.hero__copy { position: relative; z-index: 4; width: min(31vw, 470px); }
.hero__eyebrow { display: flex; align-items: center; gap: 15px; margin: 0 0 34px; color: #60697a; font-size: 11px; font-weight: 600; letter-spacing: .27em; text-transform: uppercase; }
.hero__eyebrow span { width: 37px; height: 4px; border-radius: 99px; background: var(--amber); }
.hero h1 { margin: 0; color: var(--midnight); font-size: clamp(42px, 3.45vw, 55px); font-weight: 700; letter-spacing: -.037em; line-height: 1.06; }
.hero h1 em { color: var(--amber-ink); font-style: normal; white-space: nowrap; }
.hero__support { max-width: 470px; margin: 20px 0 22px; color: #3f4c61; font-size: clamp(15px, 1.07vw, 17px); line-height: 1.55; }
.hero__actions { display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 13px 14px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; transition: transform 160ms cubic-bezier(.2,0,0,1), background-color 160ms cubic-bezier(.2,0,0,1), border-color 160ms cubic-bezier(.2,0,0,1); }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button svg { width: 20px; height: 20px; }
.button--primary { background: var(--amber); color: var(--midnight); }
.button--primary svg { stroke-width: 2; }
.button--primary:hover { background: #ffb12e; }
.button--secondary { border-color: #b8c1cf; background: rgba(248,250,252,.7); color: var(--midnight); white-space: nowrap; }
.button--secondary:hover { border-color: var(--graphite); }
.button--secondary svg { fill: currentColor; stroke: none; }
.readiness { display: flex; align-items: center; gap: 9px; margin: 13px 0 0; color: #667286; font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.readiness span { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); opacity: .72; }
.workspace-scroll-hint { display: none; }
.hero__support a, .relationship__statement a, .status-section a, .faq a, .guide-content a { color: #92500a; text-underline-offset: 3px; }
.hero__support a:hover, .relationship__statement a:hover, .status-section a:hover, .faq a:hover, .guide-content a:hover { color: var(--midnight); }
.hero__support a:focus-visible, .relationship__statement a:focus-visible, .status-section a:focus-visible, .faq a:focus-visible, .guide-content a:focus-visible, .capture-details a:focus-visible { outline: var(--focus); outline-offset: 3px; }
.workspace--capture { height: auto; aspect-ratio: 1600 / 1067; }
.workspace--capture > img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.workspace--capture .simulation-badge { right: 11px; }
.capture-details { padding-block: 96px 110px; border-bottom: 1px solid #cdd3dc; }
.capture-details__intro { max-width: 66ch; }
.capture-details__intro h2 { margin: 0 0 17px; font-size: clamp(38px, 4vw, 60px); letter-spacing: -.035em; line-height: 1.1; }
.capture-details__intro p { margin: 0; color: #46546a; font-size: 16px; line-height: 1.7; }
.capture-details__grid { display: grid; grid-template-columns: 1fr .6fr 1fr; gap: 24px; align-items: start; margin-top: 45px; }
.capture-details figure { min-width: 0; margin: 0; }
.capture-details a { display: block; overflow: hidden; border-radius: 10px; background: var(--midnight); }
.capture-details img { display: block; width: 100%; height: auto; }
.capture-details figcaption, .guide-preview figcaption { margin-top: 12px; color: #526075; font-size: 13px; line-height: 1.5; }
.guide-preview { max-width: 560px; margin: 30px 0 0; }
.guide-preview a { display: block; border-radius: 10px; overflow: hidden; background: var(--midnight); }
.guide-preview img { display: block; width: 100%; height: auto; }

.mascot-story { position: absolute; z-index: 3; left: clamp(45px, 4.5vw, 72px); bottom: 20px; width: min(30vw, 460px); height: 355px; }
.mascot-story img { position: absolute; right: -84px; bottom: -32px; width: 354px; height: 372px; object-fit: cover; object-position: center; filter: drop-shadow(0 15px 15px rgba(8,15,26,.17)); }
.mascot-story__bubble { position: absolute; z-index: 2; top: 42px; left: 28px; width: 195px; padding: 29px 24px 35px; border-radius: 24px; background: #e6e9ed linear-gradient(var(--amber), var(--amber)) no-repeat 24px calc(100% - 17px) / 22px 3px; color: #334158; font-size: 14px; line-height: 1.55; }
.mascot-story__bubble::after { content: ""; position: absolute; right: 25px; bottom: -26px; border: 22px solid transparent; border-top-color: #e6e9ed; rotate: -18deg; }
.mascot-story__bubble::before { content: "//"; position: absolute; top: 12px; left: 20px; color: #98a3b3; font-family: var(--mono); font-style: italic; }
.mascot-story__signoff { position: absolute; z-index: 2; left: 8px; bottom: 13px; rotate: -4deg; color: #172030; }
.mascot-story__signoff::after { content: ""; display: block; width: 23px; height: 3px; margin: 8px 0 0 5px; border-radius: 99px; background: var(--amber); }
.mascot-story__signoff strong { display: block; font-family: cursive; font-size: 32px; font-weight: 500; line-height: .95; }
.mascot-story__signoff span { display: block; margin: 10px 0 0 8px; color: #3d4a61; font-family: cursive; font-size: 16px; font-style: italic; line-height: 1.45; }

.workspace { position: absolute; z-index: 2; top: 61px; right: clamp(32px, 3.2vw, 52px); width: min(64vw, 1026px); height: 677px; margin: 0; border-radius: 14px; background: var(--midnight); color: #edf1f5; box-shadow: 0 20px 48px rgba(8,15,26,.20), 0 4px 14px rgba(8,15,26,.10); font-size: 12px; }
.simulation-badge { position: absolute; z-index: 5; top: -24px; right: 11px; display: inline-flex; align-items: center; gap: 7px; min-height: 29px; padding: 5px 10px; border: 1px solid #788294; border-radius: 7px; background: var(--slate); color: #f7f8fa; font-family: var(--mono); font-size: 11px; }
.simulation-badge span { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.workspace__titlebar { height: 40px; display: flex; align-items: center; padding: 8px 16px; border-bottom: 1px solid #283243; }
.workspace__brand { font-size: 21px; font-weight: 700; letter-spacing: -.04em; }
.workspace__brand em { color: var(--amber); font-style: normal; }
.workspace__body { display: grid; grid-template-columns: 18.5% 40.5% 41%; height: calc(100% - 40px); min-width: 0; }
.workspace__rail, .workspace__transcript, .workspace__changes { min-width: 0; overflow: hidden; }
.workspace__rail { position: relative; padding: 14px 12px; border-right: 1px solid #2c3545; background: #111b2b; border-radius: 0 0 0 14px; }
.new-chat { width: 100%; height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #445064; border-radius: 7px; background: #273347; color: #fff; font: 600 12px var(--font); text-align: left; }
.new-chat svg { width: 16px; height: 16px; }
.new-chat kbd { margin-left: auto; color: #b7c0ce; font: 11px var(--mono); }
.app-label { margin: 18px 4px 9px; color: #c2c9d4; font-size: 11px; }
.conversation-list, .rail-utilities, .tool-list, .changed-files ul { margin: 0; padding: 0; list-style: none; }
.conversation-list li { position: relative; display: grid; gap: 2px; padding: 10px; color: #ebeff4; }
.conversation-list li strong { overflow: hidden; font-size: 11px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.conversation-list li span { color: #8f9bad; font-size: 10px; }
.conversation-list .is-active { border-radius: 6px; background: #283449; }
.conversation-list .is-active::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 6px 0 0 6px; background: var(--amber); }
.rail-utilities { position: absolute; right: 12px; bottom: 14px; left: 12px; display: grid; gap: 7px; }
.rail-utilities li { display: flex; align-items: center; gap: 9px; padding: 5px; color: #acb7c5; font-size: 10px; }
.rail-utilities svg { width: 15px; height: 15px; }
.panel-header { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #2d3646; color: #f6f7f8; }
.panel-header strong { font-size: 12px; }
.panel-header svg { width: 17px; height: 17px; }
.workspace__transcript { position: relative; border-right: 1px solid #2c3545; background: #091523; }
.transcript-scroll { height: calc(100% - 128px); padding: 18px 18px 8px; overflow: hidden; }
.message { display: grid; grid-template-columns: 30px 1fr; gap: 10px; margin-bottom: 15px; }
.message p { margin: 5px 0 0; color: #e3e8ef; font-size: 11px; line-height: 1.55; }
.avatar { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #aab4c4; color: #344054; font-size: 12px; }
.avatar--pipkin { border: 1px solid #e2e7ec; background: #080f1a; color: var(--amber); }
.tool-list { display: grid; gap: 5px; margin-top: 13px; }
.tool-list li { display: grid; grid-template-columns: 18px auto 1fr auto; align-items: center; gap: 7px; min-height: 37px; padding: 7px 9px; border-radius: 6px; background: #1c293a; }
.tool-list svg { width: 15px; height: 15px; }
.tool-list code { overflow: hidden; color: #95a0b0; font: 9px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.tool-list b { color: var(--green); font-size: 12px; }
.tool-list i { width: 15px; height: 15px; border: 3px solid #445064; border-top-color: var(--amber); border-radius: 50%; }
.message .agent-summary { margin-top: 13px; }
.composer { position: absolute; right: 18px; bottom: 17px; left: 18px; height: 86px; padding: 14px; border: 1px solid #5a6577; border-radius: 9px; background: #172538; color: #b9c1cd; }
.composer small { position: absolute; bottom: 12px; left: 14px; color: #8b96a7; font: 8px var(--mono); }
.composer b { position: absolute; right: 10px; bottom: 10px; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 6px; background: var(--amber); color: var(--midnight); font-size: 18px; font-weight: 400; }
.workspace__changes { padding: 0 12px 12px; background: #0d1926; border-radius: 0 0 14px; }
.workspace__changes .panel-header { margin: 0 -12px; padding-inline: 16px; }
.diff { margin-top: 10px; overflow: hidden; border: 1px solid #344052; border-radius: 7px; background: #0c1724; }
.diff__path { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-bottom: 1px solid #344052; font: 9px var(--mono); }
.diff__path span { color: var(--amber); font-size: 16px; }
.diff__meta { padding: 8px 10px 5px; color: #8a96a8; font: 8px var(--mono); }
.diff pre { margin: 0; color: #dfe6ec; font: 8px/1.55 var(--mono); white-space: pre-wrap; }
.diff pre span, .diff pre del, .diff pre ins { display: block; padding: 0 8px; text-decoration: none; }
.diff pre del { background: #4a242b; color: #ff938f; }
.diff pre ins { background: #15392f; color: #b4f0cf; }
.changed-files { margin-top: 10px; overflow: hidden; border: 1px solid #344052; border-radius: 7px; }
.changed-files header { display: flex; justify-content: space-between; padding: 9px 10px; border-bottom: 1px solid #344052; color: #b9c2ce; font-size: 9px; }
.changed-files li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; min-height: 28px; padding: 4px 8px; border-bottom: 1px solid #253143; }
.changed-files li:last-child { border-bottom: 0; }
.changed-files li > b { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 3px; background: #be8115; color: #172030; }
.changed-files li:nth-child(2) > b { background: #45976d; }
.changed-files code { overflow: hidden; font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.changed-files li span { font: 9px var(--mono); }
.changed-files ins { color: var(--green); text-decoration: none; }
.changed-files del { color: var(--red); text-decoration: none; }

.annotation-strip { height: clamp(116px, 8.07vw, 128px); display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; border-top: 1px solid #d8dde4; background: var(--cream); padding: 0 clamp(28px, 3.2vw, 51px); }
.annotation-strip article { min-height: 74px; display: grid; grid-template-columns: 86px 1fr; align-items: start; gap: 28px; padding: 0 26px; border-right: 1px solid #cbd2dc; }
.annotation-strip article:first-child { padding-left: 0; }
.annotation-strip article:last-child { border-right: 0; }
.annotation-strip article > span { color: #a8b0bd; font-size: 50px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.annotation-strip article > div { padding-left: 28px; border-left: 1px solid #cbd2dc; }
.annotation-strip h2 { margin: 2px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.annotation-strip p { max-width: 330px; margin: 0; color: #4c596e; font-size: 13px; line-height: 1.45; }

.section-shell { width: min(1440px, calc(100% - 96px)); margin-inline: auto; }
.relationship { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(70px, 10vw, 160px); align-items: end; padding-block: 150px 170px; }
.relationship__statement h2, .status-section h2, .faq h2, .closing h2 { margin: 0; font-size: clamp(40px, 4.4vw, 68px); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; }
.relationship__statement h2 span { color: #7b8493; }
.relationship__statement > p { max-width: 61ch; margin: 31px 0 0; color: #46546a; font-size: 17px; line-height: 1.7; }
.relationship__statement .direction-note { display: inline-block; margin-top: 20px; padding: 9px 12px; border-radius: 6px; background: var(--stone); color: #485469; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.workflow { margin: 0; padding: 0; list-style: none; counter-reset: workflow; }
.workflow li { position: relative; display: grid; grid-template-columns: 88px 1fr; align-items: baseline; gap: 22px; padding: 21px 0; border-top: 1px solid #cdd3dc; counter-increment: workflow; }
.workflow li:last-child { border-bottom: 1px solid #cdd3dc; }
.workflow li::before { content: "0" counter(workflow); position: absolute; top: 25px; right: 0; color: #b1b8c3; font-family: var(--mono); font-size: 11px; }
.workflow span { color: #7a8495; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.workflow strong { color: var(--midnight); font-size: clamp(24px, 2.3vw, 35px); font-weight: 600; letter-spacing: -.025em; }

.status-section { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(60px, 8vw, 128px); align-items: start; padding-block: 130px; border-top: 1px solid #cdd3dc; }
.status-section__intro { position: sticky; top: 40px; }
.status-section__intro > p { max-width: 45ch; margin: 25px 0 0; color: #4b586d; font-size: 16px; line-height: 1.7; }
.status-section__intro .reviewed { margin-top: 35px; color: #667286; font-family: var(--mono); font-size: 12px; }
.status-table-wrap { overflow-x: auto; border-top: 3px solid var(--midnight); }
.status-table-wrap::-webkit-scrollbar { height: 8px; }
.status-table-wrap::-webkit-scrollbar-thumb { border-radius: 99px; background: var(--graphite); }
table { width: 100%; border-collapse: collapse; min-width: 650px; }
th, td { padding: 25px 22px; border-bottom: 1px solid #cdd3dc; text-align: left; vertical-align: top; }
thead th { color: #7b8492; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
thead th:first-child { width: 31%; }
tbody th { color: var(--midnight); font-size: 15px; font-weight: 600; }
tbody td { position: relative; padding-left: 49px; color: #49576b; font-size: 15px; line-height: 1.6; }
.status-dot { position: absolute; top: 31px; left: 22px; width: 9px; height: 9px; border-radius: 50%; background: #a6afbb; }
.status-dot--active { background: var(--amber); box-shadow: 0 0 0 5px #fff0cc; }
.status-dot--observed { background: #4e9a72; box-shadow: 0 0 0 5px #dfeee6; }

.faq { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(60px, 8vw, 128px); padding-block: 130px 160px; border-top: 1px solid #cdd3dc; }
.faq__heading > p { max-width: 39ch; margin: 25px 0 0; color: #4b586d; font-size: 16px; line-height: 1.7; }
.faq__list { border-top: 3px solid var(--midnight); }
.faq details { border-bottom: 1px solid #cdd3dc; }
.faq summary { min-height: 76px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding: 18px 4px; color: var(--midnight); font-size: 19px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #bfc6d0; border-radius: 50%; color: #667286; font-size: 20px; transition: rotate 160ms cubic-bezier(.2,0,0,1), background-color 160ms cubic-bezier(.2,0,0,1); }
.faq details[open] summary span { rotate: 45deg; background: var(--amber); color: var(--midnight); border-color: var(--amber); }
.faq details p { max-width: 65ch; margin: -2px 58px 26px 4px; color: #536075; font-size: 15px; line-height: 1.7; }

.closing { width: calc(100% - 40px); display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 34px; margin: 0 auto 20px; padding: clamp(48px, 6vw, 90px); border-radius: 14px; background: var(--midnight); color: var(--cream); }
.closing__mark { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid #515c6c; border-radius: 14px; color: var(--amber); }
.closing__mark svg { width: 31px; height: 31px; }
.closing h2 { font-size: clamp(38px, 4.4vw, 66px); }
.closing p { max-width: 62ch; margin: 17px 0 0; color: #aeb8c6; font-size: 15px; line-height: 1.7; }
.closing__actions { display: grid; justify-items: start; gap: 18px; min-width: 210px; }
.closing .button { min-width: 205px; }
.text-link { color: #cfd6df; font-size: 13px; font-weight: 600; text-decoration: none; text-underline-offset: 6px; }
.text-link:hover { color: white; text-decoration: underline; text-decoration-color: var(--amber); }

.site-footer { min-height: 110px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 24px clamp(28px, 4vw, 64px); }
.wordmark--footer { font-size: 27px; }
.site-footer p { margin: 0; color: #667286; font-size: 12px; }
.site-footer nav { display: flex; gap: 25px; }
.site-footer nav a { color: #46546a; font-size: 12px; font-weight: 600; text-decoration: none; }
.site-footer nav a:hover { color: var(--midnight); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 5px; }

.guide { width: min(1300px, calc(100% - 96px)); margin-inline: auto; }
.guide-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: end; padding: 105px 0 100px; border-bottom: 1px solid #cdd3dc; }
.guide-hero h1 { margin: 0; font-size: clamp(48px, 6vw, 82px); letter-spacing: -.04em; line-height: 1.02; }
.guide-hero h1 em { color: var(--amber-ink); font-style: normal; }
.guide-hero > p { max-width: 48ch; margin: 0; color: #47556b; font-size: 17px; line-height: 1.75; }
.guide-grid { display: grid; grid-template-columns: 240px 1fr; gap: clamp(60px, 9vw, 130px); padding-block: 80px 140px; }
.guide-nav { position: sticky; top: 32px; align-self: start; }
.guide-nav > p { margin: 0 0 17px; color: #667286; font-size: 11px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.guide-nav ol { margin: 0; padding: 0; list-style: none; counter-reset: guide; }
.guide-nav li { counter-increment: guide; }
.guide-nav a { display: grid; grid-template-columns: 27px 1fr; padding: 9px 0; color: #59667a; font-size: 12px; font-weight: 600; text-decoration: none; }
.guide-nav a::before { content: "0" counter(guide); color: #667286; font-family: var(--mono); }
.guide-nav a:hover { color: var(--midnight); }
.guide-content { max-width: 850px; }
.guide-content section { padding-block: 0 80px; scroll-margin-top: 32px; }
.guide-content section + section { padding-top: 80px; border-top: 1px solid #cdd3dc; }
.guide-content h2 { margin: 0 0 24px; font-size: clamp(30px, 3vw, 43px); letter-spacing: -.03em; line-height: 1.1; }
.guide-content > section > p { max-width: 70ch; margin: 0 0 20px; color: #4c596e; font-size: 16px; line-height: 1.75; }
.notice { display: grid; grid-template-columns: 9px 1fr; gap: 18px; margin-bottom: 25px; padding: 22px 24px; border-radius: 12px; background: #fff3d7; }
.notice > span { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--amber); }
.notice strong { display: block; margin-bottom: 5px; font-size: 15px; }
.notice p { margin: 0; color: #5f5035; font-size: 14px; line-height: 1.6; }
.check-list { display: grid; gap: 0; margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid #cdd3dc; }
.check-list li { position: relative; padding: 18px 0 18px 38px; border-bottom: 1px solid #cdd3dc; color: #445167; font-size: 15px; line-height: 1.6; }
.check-list li::before { content: ""; position: absolute; top: 21px; left: 10px; width: 6px; height: 11px; border-right: 2px solid #2f7552; border-bottom: 2px solid #2f7552; rotate: 45deg; }
.section-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-heading-row h2 { margin: 0; }
.simulation-badge--inline { position: static; flex: 0 0 auto; }
.command-hold { display: grid; gap: 8px; margin-top: 30px; padding: 22px 24px; border-radius: 10px; background: var(--midnight); color: var(--cream); }
.command-hold span { color: #b8c2d0; font-family: var(--mono); font-size: 11px; }
.command-hold strong { font-size: 15px; font-weight: 500; }
.command-hold pre { max-width: 100%; overflow-x: auto; margin: 0; padding: 4px 0; color: var(--cream); font: 13px/1.7 var(--mono); tab-size: 2; }
.guide-content code { font-family: var(--mono); font-size: .9em; overflow-wrap: anywhere; }
.command-hold code { font-size: inherit; overflow-wrap: normal; }
.expect-list { margin: 35px 0 0; border-top: 3px solid var(--midnight); }
.expect-list > div { display: grid; grid-template-columns: 180px 1fr; gap: 30px; padding: 22px 0; border-bottom: 1px solid #cdd3dc; }
.expect-list dt { font-size: 14px; font-weight: 600; }
.expect-list dd { margin: 0; color: #526075; font-size: 14px; line-height: 1.65; }
.text-link--dark { color: var(--midnight); }
.text-link--dark:hover { color: var(--midnight); }

.error-page { min-height: 100vh; background: var(--midnight); color: var(--cream); }
.error-shell { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; padding: clamp(32px, 5vw, 72px); }
.wordmark--inverse { align-self: flex-start; color: var(--cream); }
.error-copy { position: relative; z-index: 2; margin: auto 0; }
.error-copy > p { margin: 0 0 26px; color: var(--amber); font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
.error-copy h1 { max-width: 760px; margin: 0; font-size: clamp(58px, 8vw, 116px); letter-spacing: -.04em; line-height: .98; }
.error-copy > span { display: block; max-width: 47ch; margin-top: 28px; color: #9faab9; font-size: 16px; line-height: 1.7; }
.error-copy nav { display: flex; align-items: center; gap: 26px; margin-top: 35px; }
.error-shell > img { position: absolute; right: -4vw; bottom: -18vh; width: min(53vw, 760px); height: auto; opacity: .7; }

@keyframes workspace-settle {
  from { transform: translateY(8px); box-shadow: 0 10px 24px rgba(8,15,26,.14), 0 2px 7px rgba(8,15,26,.08); }
  to { transform: translateY(0); box-shadow: 0 20px 48px rgba(8,15,26,.20), 0 4px 14px rgba(8,15,26,.10); }
}
.workspace { animation: workspace-settle 540ms cubic-bezier(.16,1,.3,1) both; }
.tool-list i { animation: running 1.4s linear infinite; }
@keyframes running { to { rotate: 1turn; } }

@media (max-width: 1500px) and (min-width: 1101px) {
  .workspace { right: 24px; scale: .91; transform-origin: top right; }
  .mascot-story { scale: .91; transform-origin: bottom left; }
}

@media (max-width: 1350px) and (min-width: 1101px) {
  .workspace { scale: .82; }
  .mascot-story { scale: .84; }
}

@media (max-width: 1100px) {
  .site-nav { gap: 14px; }
  .workspace { right: 24px; width: 64vw; }
  .hero { padding-inline: 28px; }
  .hero__copy { width: 34vw; }
  .hero__actions { align-items: stretch; flex-direction: column; width: 270px; }
  .readiness { white-space: normal; }
}

@media (max-width: 900px) {
  .site-header { height: auto; min-height: 74px; flex-wrap: wrap; padding: 16px 24px; }
  .site-nav { width: 100%; gap: 3px 20px; }
  .site-nav a { min-height: 44px; font-size: 13px; }

  .hero { height: auto; display: flex; flex-direction: column; overflow: visible; padding: 64px 24px 0; }
  .hero__copy { order: 1; width: 100%; }
  .hero__eyebrow { margin-bottom: 25px; }
  .hero h1 { max-width: 690px; font-size: clamp(45px, 8vw, 66px); }
  .hero__support { max-width: 620px; font-size: 16px; }
  .hero__actions { width: auto; align-items: center; flex-direction: row; }
  .readiness { max-width: 50ch; }

  .workspace { position: relative; order: 2; top: auto; right: auto; width: 100%; height: 620px; margin-top: 74px; overflow-x: auto; overflow-y: hidden; border-radius: 14px; overscroll-behavior-inline: contain; }
  .workspace--capture { height: auto; aspect-ratio: auto; }
  .workspace--capture > img { width: 940px; height: auto; max-width: none; }
  .workspace--capture .simulation-badge { position: sticky; top: 8px; left: calc(100% - 185px); width: max-content; margin-bottom: -29px; visibility: visible; }
  .workspace::-webkit-scrollbar { height: 9px; }
  .workspace::-webkit-scrollbar-track { background: #172334; }
  .workspace::-webkit-scrollbar-thumb { border: 2px solid #172334; border-radius: 99px; background: #687487; }
  .workspace__titlebar, .workspace__body { width: 940px; }
  .workspace__body { grid-template-columns: 178px 381px 381px; }
  .capture-details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .simulation-badge--inline { visibility: visible; }
  .workspace-scroll-hint { order: 2; display: flex; align-items: center; gap: 9px; margin: 12px 0 0; color: #667286; font: 12px/1.5 var(--mono); }
  .workspace-scroll-hint span { color: var(--amber-ink); font-size: 16px; }

  .mascot-story { position: relative; order: 3; left: auto; bottom: auto; width: min(100%, 520px); height: 400px; margin: 35px auto 0; }
  .mascot-story img { right: 0; bottom: -2px; width: 330px; height: 345px; }
  .mascot-story__signoff { left: 5px; }

  .annotation-strip { height: auto; grid-template-columns: 1fr; padding: 0 24px; }
  .annotation-strip article { min-height: 122px; grid-template-columns: 70px 1fr; align-items: center; gap: 20px; padding: 24px 0; border-right: 0; border-bottom: 1px solid #cbd2dc; }
  .annotation-strip article:last-child { border-bottom: 0; }
  .annotation-strip article > div { padding-left: 22px; }

  .section-shell, .guide { width: calc(100% - 48px); }
  .relationship, .status-section, .faq { grid-template-columns: 1fr; gap: 65px; padding-block: 100px; }
  .workflow li { grid-template-columns: 75px 1fr; }
  .status-section__intro { position: static; }
  .faq { padding-bottom: 120px; }
  .closing { grid-template-columns: 64px 1fr; }
  .closing__actions { grid-column: 2; }
  .site-footer { flex-wrap: wrap; }

  .guide-hero { grid-template-columns: 1fr; gap: 35px; padding-block: 75px; }
  .guide-grid { grid-template-columns: 1fr; gap: 60px; }
  .guide-nav { position: static; padding-bottom: 30px; border-bottom: 1px solid #cdd3dc; }
  .guide-nav ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; }

  .error-shell > img { right: -18vw; bottom: -8vh; width: 78vw; opacity: .42; }
}

@media (max-width: 640px) {
  .site-header { padding-inline: 20px; }
  .wordmark { font-size: 30px; }
  .site-nav { gap: 0 13px; }
  .site-nav a { font-size: 12px; }
  .site-nav a svg { display: none; }

  .hero { padding: 52px 20px 0; }
  .hero__eyebrow { gap: 10px; font-size: 9px; letter-spacing: .2em; }
  .hero__eyebrow span { width: 25px; height: 3px; }
  .hero h1 { font-size: clamp(41px, 12vw, 54px); line-height: 1.02; }
  .hero h1 br { display: none; }
  .hero__support { margin-top: 22px; font-size: 15px; }
  .hero__actions { display: grid; grid-template-columns: 1fr; }
  .button { width: 100%; }
  .readiness { margin-top: 16px; font-size: 12px; }

  .workspace { width: calc(100vw - 40px); height: 560px; margin-top: 65px; }
  .workspace--capture { height: auto; }
  .workspace__titlebar, .workspace__body { width: 860px; }
  .workspace__body { grid-template-columns: 168px 346px 346px; }
  .transcript-scroll { padding-inline: 14px; }
  .workspace--capture > img { width: 860px; }
  .capture-details { padding-block: 70px; }
  .capture-details__grid { grid-template-columns: 1fr; }

  .mascot-story { height: 370px; margin-top: 18px; }
  .mascot-story img { right: -15px; width: 290px; height: 305px; }
  .mascot-story__bubble { top: 36px; left: 0; width: 178px; padding-inline: 20px; font-size: 13px; }
  .mascot-story__signoff { bottom: 18px; }

  .annotation-strip { padding-inline: 20px; }
  .annotation-strip article { grid-template-columns: 54px 1fr; gap: 14px; }
  .annotation-strip article > span { font-size: 40px; }
  .annotation-strip article > div { padding-left: 16px; }

  .section-shell, .guide { width: calc(100% - 40px); }
  .relationship, .status-section, .faq { gap: 48px; padding-block: 78px; }
  .relationship__statement h2, .status-section h2, .faq h2 { font-size: 39px; }
  .relationship__statement > p { font-size: 15px; }
  .workflow li { grid-template-columns: 65px 1fr; gap: 12px; padding: 18px 0; }
  .workflow strong { font-size: 24px; }
  th, td { padding-block: 20px; }
  .faq summary { font-size: 16px; }
  .faq details p { margin-right: 4px; }

  .closing { width: calc(100% - 20px); grid-template-columns: 1fr; gap: 24px; padding: 38px 28px; }
  .closing__mark { width: 54px; height: 54px; }
  .closing h2 { font-size: 39px; }
  .closing__actions { grid-column: auto; width: 100%; }
  .closing .button { width: 100%; }

  .site-footer { align-items: flex-start; flex-direction: column; padding: 40px 20px; }
  .site-footer nav { flex-wrap: wrap; }

  .guide-hero { padding-block: 58px; }
  .guide-hero h1 { font-size: 48px; }
  .guide-hero > p { font-size: 15px; }
  .guide-grid { padding-block: 52px 90px; }
  .guide-nav ol { grid-template-columns: 1fr; }
  .guide-content section { padding-bottom: 58px; }
  .guide-content section + section { padding-top: 58px; }
  .section-heading-row { align-items: flex-start; flex-direction: column; }
  .expect-list > div { grid-template-columns: 1fr; gap: 8px; }

  .error-shell { padding: 28px 20px; }
  .error-copy h1 { font-size: 54px; }
  .error-copy nav { align-items: flex-start; flex-direction: column; }
  .error-shell > img { right: -28vw; bottom: -1vh; width: 105vw; opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}