@import url('/design/tokens.css');
@import url('/design/browser-theme.css');
@import url('/fonts/pretendard.css');

/* Avatargram / Reboot foundation. Canonical tokens live in /design/tokens.css. */
:root {font-family:var(--font-sans);color:var(--foreground);background:var(--background);font-synthesis:none;--line:var(--border)}
* {box-sizing:border-box}
html {font-feature-settings:'liga' 1,'calt' 1;scroll-behavior:smooth}
body {margin:0;-webkit-font-smoothing:antialiased}
button,input,select,textarea {font:inherit}
a {color:inherit;text-decoration:none}
button {cursor:pointer}
button:disabled {cursor:default;opacity:.5}
button,a,input,select,textarea {outline-offset:4px}
:focus-visible {outline:var(--ds-focus-ring-outline)}
::selection {background:var(--primary);color:var(--primary-foreground)}
h1,h2,h3,p {margin:0}
h1,h2,h3 {font-weight:600;text-wrap:balance;word-break:keep-all}
p {line-height:1.75;word-break:keep-all}
small {font-size:13px;color:var(--muted-foreground)}
button,.button {border:1px solid transparent;border-radius:var(--ds-radius-base);padding:7px 14px;min-height:36px;background:var(--primary);color:var(--primary-foreground);font-size:14px;line-height:20px;font-weight:500;display:inline-flex;justify-content:center;align-items:center;gap:8px;transition:background .15s,border-color .15s}
button:hover,.button:hover {background:var(--primary-hover)}
button.secondary,.button.secondary {background:var(--background);color:var(--foreground);border-color:var(--border)}
button.secondary:hover,.button.secondary:hover {background:var(--ds-background-200);border-color:var(--ds-gray-500)}
button.quiet {background:transparent;color:var(--muted-foreground);padding:6px 8px;border-color:transparent}
button.quiet:hover {background:var(--muted)}
button.danger {background:var(--destructive-subtle);color:var(--destructive-subtle-foreground)}
.muted {color:var(--muted-foreground)}
.eyebrow {font-size:14px;letter-spacing:.2em;font-weight:600;text-transform:uppercase;color:var(--ds-gray-700)}
.brand {display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;letter-spacing:-.32px}
.mark {display:grid;place-items:center;width:30px;height:30px;background:var(--primary);color:var(--primary-foreground);border-radius:var(--ds-radius-base);font-size:16px;font-weight:600}
.pill {display:inline-flex;align-items:center;gap:6px;background:var(--ds-gray-100);color:var(--muted-foreground);border:1px solid var(--border);border-radius:var(--ds-radius-base);padding:3px 7px;font-size:12px;line-height:18px;font-weight:500;white-space:nowrap}
.pill.green {background:var(--success-subtle);color:var(--success-subtle-foreground);border-color:var(--ds-green-300)}
.pill.orange {background:var(--warning-subtle);color:var(--warning-subtle-foreground);border-color:var(--ds-amber-300)}
.pill.red {background:var(--destructive-subtle);color:var(--destructive-subtle-foreground);border-color:var(--ds-red-300)}
.mono {font-family:var(--font-mono,ui-monospace,'SFMono-Regular',Consolas,monospace)}
.hidden {display:none!important}
#toast {position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--primary);color:var(--primary-foreground);padding:12px 20px;border-radius:var(--ds-radius-medium);font-size:14px;z-index:5000;box-shadow:var(--ds-shadow-large);max-width:90%;display:none}
#toast.show {display:block}

/* Presentation: the same centered, monochrome hierarchy as Avatargram. */
.marketing {background:var(--background)}
.topnav {height:72px;display:flex;align-items:center;justify-content:space-between;max-width:1024px;margin:auto;padding:0 24px}
.marketing .brand {font-size:14px;letter-spacing:-.28px}
.navlinks {display:flex;align-items:center;gap:24px;font-size:14px;color:var(--muted-foreground)}
.navlinks>a:not(.button):hover {text-decoration:underline;text-underline-offset:4px;color:var(--foreground)}
.marketing .button {border-radius:9999px;padding:12px 24px;font-size:16px;line-height:24px;font-weight:400;min-height:48px}
.navlinks .button {padding:8px 18px;min-height:36px;font-size:14px;line-height:20px}
.hero {padding:96px 24px 64px;max-width:1024px;margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-copy {width:100%}
.hero h1 {font-size:var(--text-heading-56);line-height:1.14;font-weight:var(--text-heading-56--font-weight);letter-spacing:var(--text-heading-56--letter-spacing);margin:24px auto;max-width:900px}
.hero h1 em {font-style:normal;color:var(--foreground)}
.hero p {font-size:18px;line-height:28px;color:var(--muted-foreground);max-width:600px;margin:auto;text-wrap:balance}
.hero .actions {margin:32px 0 20px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.hero-note {font-size:14px;line-height:22px;color:var(--muted-foreground)}
.workflow-intro {margin-top:56px;max-width:760px;width:100%;border:1px solid var(--border);border-radius:var(--ds-radius-medium);background:var(--background);box-shadow:var(--ds-shadow-border-small);text-align:left}
.workflow-label {padding:16px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted-foreground)}
.workflow-request {padding:24px;font-size:18px;line-height:28px;letter-spacing:-.2px;text-align:center;text-wrap:balance}
.workflow-steps {display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border)}
.workflow-step {padding:18px 20px;display:flex;align-items:start;gap:10px;border-right:1px solid var(--border)}
.workflow-step:last-child {border-right:0}
.flow-num {width:22px;height:22px;flex-shrink:0;border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;font-size:12px;color:var(--muted-foreground)}
.workflow-step strong {display:block;font-size:14px;font-weight:600;line-height:22px}
.workflow-step span {display:block;font-size:12px;color:var(--muted-foreground);margin-top:3px;line-height:18px}
.strip {border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--background)}
.strip-inner {max-width:1024px;margin:auto;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:14px;color:var(--muted-foreground)}
.strip strong {font-size:16px;font-weight:600;color:var(--foreground)}
.section {max-width:1024px;margin:auto;padding:80px 24px}
.section-heading {display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:32px}
.section-heading h2 {font-size:32px;letter-spacing:-.64px;line-height:40px;margin-top:16px}
.section-heading p {font-size:16px;color:var(--muted-foreground);max-width:380px;line-height:26px}
.compare-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px}
.compare-card {border:1px solid var(--border);border-radius:var(--ds-radius-medium);background:var(--background);overflow:hidden;box-shadow:var(--ds-shadow-small)}
.compare-card header {padding:20px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.compare-card h3 {font-size:20px;line-height:28px;letter-spacing:-.4px;margin-top:6px}
.compare-card video {display:block;width:100%;aspect-ratio:16/10;background:var(--ds-gray-100)}
.compare-card footer {padding:20px;font-size:14px;color:var(--muted-foreground);line-height:24px}
.compare-card.to-be {border-color:var(--ds-gray-500)}
.video-caption {display:flex;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--border);font-size:13px;color:var(--muted-foreground)}
.video-caption a {text-decoration:underline;text-underline-offset:4px}
.record-note {background:var(--ds-background-200);border:1px solid var(--border);padding:16px 20px;border-radius:var(--ds-radius-base);font-size:13px;line-height:22px;margin-top:24px;color:var(--muted-foreground)}
.record-note strong {font-weight:500;text-decoration:underline;text-underline-offset:3px}
.systems {display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.system-card {display:block;padding:24px 20px;border:1px solid var(--border);border-radius:var(--ds-radius-medium);background:var(--background);transition:border-color .15s,box-shadow .15s}
.system-card:hover {border-color:var(--ds-gray-500);box-shadow:var(--ds-shadow-small)}
.system-card .sys-icon {width:36px;height:36px;border:1px solid var(--border);border-radius:var(--ds-radius-base);display:grid;place-items:center;font-size:16px;font-weight:600;margin-bottom:24px;background:var(--muted);color:var(--foreground)}
.system-card h3 {font-size:16px;line-height:24px;letter-spacing:-.32px;margin:10px 0}
.system-card p {font-size:14px;line-height:24px;color:var(--muted-foreground);margin-bottom:20px}
.system-card .path {font-size:13px;color:var(--muted-foreground)}
.architecture {border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:48px 0;display:grid;grid-template-columns:.95fr 1.05fr;gap:56px}
.architecture h2 {font-size:32px;line-height:40px;letter-spacing:-.64px;margin:16px 0 24px}
.architecture p {color:var(--muted-foreground);font-size:16px;line-height:26px}
.architecture .button {font-size:14px;line-height:20px;min-height:40px;padding:10px 20px}
.layers {display:grid;gap:12px}
.layer {padding:16px 20px;border:1px solid var(--border);border-radius:var(--ds-radius-base);display:flex;justify-content:space-between;gap:16px;align-items:center;background:var(--background)}
.layer strong {font-size:14px;font-weight:600}
.layer span {font-size:13px;color:var(--muted-foreground);line-height:20px}
.layer:first-child {border-color:var(--ds-gray-500);background:var(--ds-background-200)}
.feature-row {display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px}
.feature-row h3 {font-size:16px;letter-spacing:-.32px;margin-bottom:12px}
.feature-row p {font-size:14px;line-height:24px;color:var(--muted-foreground)}
.bottom-cta {max-width:976px;margin:auto;border-top:1px solid var(--border);text-align:center;padding:80px 24px;background:var(--background)}
.bottom-cta h2 {font-size:32px;letter-spacing:-.64px;line-height:40px;margin-bottom:20px}
.bottom-cta p {color:var(--muted-foreground);margin-bottom:32px}
.site-footer {max-width:1024px;margin:auto;border-top:1px solid var(--border);padding:32px 24px;display:flex;justify-content:space-between;gap:24px;font-size:13px;color:var(--muted-foreground);line-height:22px}
.guide {max-width:1024px;margin:64px auto 80px;padding:0 24px}
.guide h1 {font-size:40px;line-height:48px;letter-spacing:-1.2px;margin:24px 0}
.guide h2 {font-size:24px;line-height:32px;letter-spacing:-.48px;margin:48px 0 20px}
.guide p {font-size:16px;line-height:28px;color:var(--muted-foreground);margin-bottom:20px}
.guide ul,.guide ol {line-height:2;color:var(--muted-foreground);font-size:16px;padding-left:24px}
.guide pre {background:var(--ds-background-200);color:var(--foreground);padding:24px;border:1px solid var(--border);border-radius:var(--ds-radius-base);overflow:auto;font-size:14px;line-height:24px}
.guide table {width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px}
.guide td,.guide th {white-space:normal;overflow-wrap:anywhere;border-bottom:1px solid var(--border);padding:16px;text-align:left;line-height:24px}
.guide td:first-child,.guide th:first-child {width:28%}

/* Work surfaces: shared neutral tokens, with color reserved for actual status. */
.demo-bar {min-height:40px;background:var(--ds-background-200);color:var(--muted-foreground);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 24px;font-size:12px;line-height:20px}
.demo-bar a {color:var(--foreground)}
.demo-bar .bar-links {display:flex;gap:20px}
.demo-bar a:hover {text-decoration:underline;text-underline-offset:3px}
.shell {min-height:calc(100vh - 40px);display:grid;grid-template-columns:220px 1fr}
.sidebar {background:var(--background);border-right:1px solid var(--border);padding:24px 16px;display:flex;flex-direction:column}
.sidebar .brand {margin:0 8px 32px;font-size:16px}
.nav-item {padding:10px 12px;min-height:40px;font-size:14px;color:var(--muted-foreground);border-radius:var(--ds-radius-base);margin-bottom:4px;display:flex;gap:12px;align-items:center}
.nav-item.active {color:var(--foreground);background:var(--ds-gray-100);font-weight:500}
.sidebar-bottom {margin-top:auto;padding:24px 8px 0;border-top:1px solid var(--border)}
.avatar {width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--ds-gray-100);border:1px solid var(--border);color:var(--muted-foreground);font-size:12px}
.user {display:flex;gap:10px;align-items:center;font-size:13px}
.user small {display:block;margin-top:4px;font-size:12px}
.workspace {min-width:0;background:var(--ds-background-200)}
.app-top {height:72px;background:var(--background);border-bottom:1px solid var(--border);padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.app-top strong {font-size:14px;font-weight:600}
.app-top .right {display:flex;align-items:center;gap:12px}
.app-content {padding:28px 32px;max-width:1600px;margin:auto}
.page-title {display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}
.page-title h1 {font-size:28px;line-height:36px;letter-spacing:-.56px}
.page-title p {font-size:14px;color:var(--muted-foreground);margin-top:8px}
.breadcrumb {font-size:12px;color:var(--muted-foreground);margin-bottom:16px}
.stats {display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.stat {background:var(--background);border:1px solid var(--border);border-radius:var(--ds-radius-medium);padding:20px 24px}
.stat span {font-size:13px;color:var(--muted-foreground)}
.stat strong {display:block;font-size:28px;line-height:36px;font-weight:600;margin:12px 0 4px;letter-spacing:-.56px}
.panel {background:var(--background);border:1px solid var(--border);border-radius:var(--ds-radius-medium);overflow:hidden;margin-bottom:20px}
.panel-heading {padding:20px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px}
.panel-heading h2 {font-size:16px;line-height:24px;letter-spacing:-.32px}
.search {width:260px;padding:7px 12px;min-height:36px;border:1px solid var(--input);border-radius:var(--ds-radius-base);font-size:14px;background:var(--background)}
.table-wrap {overflow:auto}
table {border-collapse:collapse;width:100%;font-size:14px}
th {text-align:left;font-size:12px;font-weight:500;color:var(--muted-foreground);background:var(--ds-background-200);padding:12px 20px;border-bottom:1px solid var(--border);white-space:nowrap}
td {padding:18px 20px;border-bottom:1px solid var(--border);white-space:nowrap}
tr:last-child td {border-bottom:0}
td .secondary {padding:5px 10px;min-height:32px;font-size:12px;line-height:20px}
.cell-main {font-weight:500;margin-bottom:5px}
.cell-sub {font-size:12px;color:var(--muted-foreground)}
.two-col {display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.detail {padding:24px}
.detail dl {display:grid;grid-template-columns:110px 1fr;gap:18px;font-size:14px;margin:0}
.detail dt {color:var(--muted-foreground)}
.detail dd {margin:0;font-weight:500;overflow-wrap:anywhere}
.detail-actions {display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.note {background:var(--ds-background-200);border:1px solid var(--border);border-radius:var(--ds-radius-base);padding:16px;font-size:14px;line-height:24px;color:var(--muted-foreground)}
.note.warning {background:var(--warning-subtle);color:var(--warning-subtle-foreground);border-color:var(--ds-amber-300)}
.note.success {background:var(--success-subtle);color:var(--success-subtle-foreground);border-color:var(--ds-green-300)}
.form {padding:24px;display:grid;gap:20px}
.field label {display:block;font-size:14px;font-weight:500;margin-bottom:8px}
.field input,.field select,.field textarea {width:100%;padding:9px 12px;min-height:40px;border:1px solid var(--input);border-radius:var(--ds-radius-base);background:var(--background);font-size:14px;color:var(--foreground)}
.field small {display:block;margin-top:8px}
.form-row {display:grid;grid-template-columns:1fr 1fr;gap:20px}
.check-row {display:flex;gap:8px;align-items:start;font-size:14px;line-height:22px;color:var(--muted-foreground)}
.check-row input {margin-top:4px;accent-color:var(--primary)}
.empty {padding:36px 24px;text-align:center;color:var(--muted-foreground);font-size:14px;line-height:24px}
.gate {max-width:520px;margin:80px auto;padding:32px;background:var(--background);border:1px solid var(--border);border-radius:var(--ds-radius-medium);box-shadow:var(--ds-shadow-small)}
.gate h1 {font-size:28px;line-height:36px;letter-spacing:-.56px;margin:24px 0 16px}
.gate p {color:var(--muted-foreground);font-size:15px;line-height:26px}
.gate .permissions {margin:24px 0;padding:20px;background:var(--ds-background-200);border:1px solid var(--border);border-radius:var(--ds-radius-base);font-size:14px;line-height:26px}
.gate .field {margin:24px 0}
.gate button {width:100%;min-height:40px}
.consent-state {font-size:12px;line-height:20px;margin-top:12px;color:var(--muted-foreground)}
.control-row {display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.control-row label {font-size:12px;color:var(--muted-foreground);display:flex;gap:8px;align-items:center}
.control-row input {accent-color:var(--primary)}

/* Agent is a light work surface, sharing the same card and control semantics. */
.agent-page {background:var(--background);color:var(--foreground)}
.agent-grid {display:grid;grid-template-columns:minmax(350px,1.05fr) minmax(360px,1fr);gap:24px;height:calc(100vh - 172px);min-height:600px}
.chat-panel {background:var(--background);border:1px solid var(--border);border-radius:var(--ds-radius-medium);display:flex;flex-direction:column;min-height:0}
.chat-head {padding:20px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.chat-head h2 {font-size:16px;line-height:24px}
.chat-body {padding:24px;flex:1;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--ds-gray-500) transparent}
.welcome {padding:24px 0 32px}
.welcome h1 {font-size:32px;line-height:40px;letter-spacing:-.64px;margin:24px 0 16px}
.welcome p {color:var(--muted-foreground);font-size:16px;line-height:26px;max-width:420px}
.spark {font-size:26px;color:var(--foreground)}
.suggestions {display:grid;gap:12px;margin-top:32px}
.suggestion {justify-content:start;text-align:left;background:var(--background);color:var(--foreground);border:1px solid var(--border);padding:12px 16px;font-size:14px;font-weight:400;line-height:24px;min-height:48px}
.suggestion:hover {background:var(--ds-background-200);border-color:var(--ds-gray-500)}
.chat-message {padding:16px 20px;border:1px solid var(--border);border-radius:var(--ds-radius-medium);background:var(--background);margin-bottom:20px;font-size:14px;line-height:24px;white-space:pre-wrap}
.chat-message.user-message {background:var(--ds-background-200);margin-left:32px}
.message-label {font-size:12px;line-height:18px;letter-spacing:.06em;color:var(--muted-foreground);margin-bottom:8px}
.chat-input {padding:20px;border-top:1px solid var(--border)}
.chat-input form {display:flex;align-items:end;gap:12px}
.chat-input textarea {flex:1;min-width:0;resize:none;background:var(--background);border:1px solid var(--input);border-radius:var(--ds-radius-base);color:var(--foreground);padding:12px;font-size:14px;line-height:22px;height:76px}
.chat-input small {display:block;margin-top:12px;font-size:12px;line-height:18px}
.agent-right {overflow:auto;display:flex;flex-direction:column;gap:20px;scrollbar-width:thin;scrollbar-color:var(--ds-gray-500) transparent}
.agent-card {flex-shrink:0;border:1px solid var(--border);background:var(--background);border-radius:var(--ds-radius-medium);overflow:hidden}
.agent-card header {padding:20px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px}
.agent-card h2 {font-size:16px;line-height:24px}
.agent-card .card-body {padding:24px}
.connected-systems {display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.connected-system {border:1px solid var(--border);background:var(--background);padding:12px;border-radius:var(--ds-radius-base);font-size:14px;line-height:22px}
.connected-system:hover {background:var(--ds-background-200)}
.connected-system span {display:block;font-size:12px;color:var(--muted-foreground);margin-top:8px;line-height:18px}
.plan-grid {display:grid;grid-template-columns:1fr 1fr;gap:20px;font-size:14px;line-height:22px;margin-bottom:24px}
.plan-grid span {display:block;color:var(--muted-foreground);font-size:12px;margin-bottom:8px}
.step {display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px;line-height:24px}
.step:last-child {border-bottom:0}
.step-circle {width:24px;height:24px;border:1px solid var(--ds-gray-500);border-radius:50%;display:grid;place-items:center;color:var(--muted-foreground);font-size:12px;flex-shrink:0}
.step.done .step-circle {background:var(--success-subtle);color:var(--success-subtle-foreground);border-color:var(--ds-green-300)}
.step div:nth-child(2) {flex:1}
.agent-note {background:var(--ds-background-200);border:1px solid var(--border);padding:16px;border-radius:var(--ds-radius-base);font-size:13px;color:var(--muted-foreground);line-height:22px;margin:20px 0}
.approve {width:100%;min-height:40px;margin-top:16px}
.trace details {border-bottom:1px solid var(--border);padding:14px 0}
.trace details:last-child {border-bottom:0}
.trace summary {font-size:12px;line-height:20px;cursor:pointer;color:var(--foreground);overflow-wrap:anywhere}
.trace pre {font-size:12px;line-height:20px;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ds-background-200);border:1px solid var(--border);padding:16px;border-radius:var(--ds-radius-base);color:var(--muted-foreground);max-height:260px;overflow:auto}
.error-box {padding:16px;background:var(--destructive-subtle);color:var(--destructive-subtle-foreground);border:1px solid var(--ds-red-300);border-radius:var(--ds-radius-base);font-size:14px;line-height:24px;margin-top:16px}
.metric-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px}
.metric-card {padding:24px;background:var(--background);border:1px solid var(--border);border-radius:var(--ds-radius-medium)}
.metric-card h3 {font-size:16px;line-height:24px;margin-bottom:24px}
.metric-values {display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.metric-values strong {font-size:24px;line-height:32px;font-weight:600;display:block;margin-bottom:8px}
.metric-values span {font-size:12px;color:var(--muted-foreground)}
.verification {display:grid;gap:12px;font-size:14px;line-height:22px;margin-top:24px}
.verification div {display:flex;justify-content:space-between;gap:16px}
.modal-backdrop {position:fixed;inset:0;background:#0009;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px}
.modal {background:var(--background);padding:24px;border:1px solid var(--border);border-radius:var(--ds-radius-modal);max-width:480px;width:100%;color:var(--foreground);box-shadow:var(--ds-shadow-modal)}
.modal h2 {font-size:20px;line-height:28px;letter-spacing:-.4px;margin-bottom:16px}
.modal p {font-size:14px;color:var(--muted-foreground);margin-bottom:24px}
.modal-actions {display:flex;gap:12px;justify-content:end}

@media(min-width:1500px) {.app-content{padding:32px 40px}.agent-grid{height:calc(100vh - 180px)}}
@media(max-width:1100px) {
  .shell{grid-template-columns:185px 1fr}.app-content{padding:24px}.agent-grid{grid-template-columns:1fr;height:auto}.chat-panel{min-height:600px}.two-col{grid-template-columns:1fr}.architecture{gap:32px}.navlinks{gap:20px}.systems{grid-template-columns:1fr 1fr}
}
@media(max-width:740px) {
  .topnav{height:64px;padding:0 24px}.navlinks>a:not(.button){display:none}.navlinks .button{padding:7px 14px;min-height:36px;font-size:14px}.hero{padding:64px 24px 48px}.hero h1{font-size:40px;line-height:46px;letter-spacing:-1.2px;margin:24px auto}.hero p{font-size:16px;line-height:26px}.hero .actions{margin-top:28px}.hero-note{font-size:13px}.workflow-intro{margin-top:40px}.workflow-label{padding:14px 16px;font-size:11px}.workflow-request{padding:20px 16px;font-size:16px;line-height:26px}.workflow-steps{grid-template-columns:1fr}.workflow-step{border-right:0;border-bottom:1px solid var(--border);padding:14px 16px}.workflow-step:last-child{border-bottom:0}.workflow-step span{margin-top:1px}.strip-inner{padding:20px 24px;flex-wrap:wrap;gap:16px}.strip-inner>span:first-child{width:100%}.section{padding:56px 24px}.section-heading{display:block}.section-heading h2{font-size:24px;line-height:32px;letter-spacing:-.48px}.section-heading p{margin-top:20px;font-size:14px;line-height:24px}.compare-grid,.architecture,.feature-row,.metric-grid{grid-template-columns:1fr}.compare-card header{padding:20px 16px}.compare-card h3{font-size:18px;line-height:26px}.compare-card footer{padding:20px 16px}.video-caption{padding:12px 16px}.architecture{padding:40px 0;gap:32px}.architecture h2{font-size:24px;line-height:32px;letter-spacing:-.48px}.systems{gap:12px}.system-card{padding:20px 16px}.system-card p{font-size:13px;line-height:22px}.system-card .sys-icon{margin-bottom:20px}.feature-row{gap:32px}.bottom-cta{padding:56px 24px}.bottom-cta h2{font-size:24px;line-height:32px}.site-footer{padding:24px;flex-wrap:wrap;gap:12px}.demo-bar{padding:8px 12px;gap:8px;flex-wrap:wrap}.demo-bar .bar-links{gap:12px;font-size:11px}.shell{display:block}.sidebar{display:none}.app-top{height:64px;padding:0 16px}.app-top .right .pill{display:none}.app-content{padding:20px 16px}.page-title{align-items:start;flex-wrap:wrap}.page-title h1{font-size:24px;line-height:32px}.stats{gap:8px}.stat{padding:16px 12px}.stat strong{font-size:24px;line-height:32px}.stat span{font-size:12px}.stat small{font-size:12px}.panel-heading{padding:16px;flex-wrap:wrap}.search{width:100%}.form-row{grid-template-columns:1fr}.detail dl{grid-template-columns:88px 1fr;gap:16px}.agent-grid{min-height:0;display:block}.agent-right{margin-top:20px;gap:20px}.chat-panel{min-height:560px}.chat-body{padding:20px}.welcome h1{font-size:28px;line-height:36px}.connected-systems{gap:8px}.connected-system{padding:12px 8px;font-size:12px}.gate{margin:40px 16px;padding:24px}.guide{padding:0 24px;margin-top:48px}.guide h1{font-size:32px;line-height:40px;letter-spacing:-.96px}.guide h2{margin-top:40px}.guide td,.guide th{padding:12px 10px}.control-row{margin-top:4px}.layer{display:block}.layer span{display:block;margin-top:8px}.metric-values strong{font-size:22px}.plan-grid{gap:16px}.agent-card .card-body{padding:20px}.agent-card header{padding:16px 20px}
}
@media(prefers-reduced-motion:reduce) {html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}