/* ═══════════════════════════════════════════════════════════════════════
   Canvas — marketing site stylesheet
   Tokens copied verbatim from the Canvas platform design system
   (canvas_platform/app/assets/tailwind/application.css). Dark "cos" theme
   is the brand default; "canvas-light" is the light variant.
   Marketing accent discipline: green = Canvas/positive/included,
   red = self-build risk + primary CTA, amber = in-progress/accent,
   teal = the AI agent.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Theme tokens ──────────────────────────────────────────────────────── */
:root,
[data-theme="cos"] {
  color-scheme: dark;
  --surface: #0D0D0D;
  --panel: #111111;
  --mid: #1A1A1A;
  --navy: #151A1F;
  --line: #222222;
  --line-soft: #2A2A2A;
  --ink: #FFFFFF;
  --ink-soft: #C8D4E0;
  --ink-mute: #979797;
  --accent: #F0A000;      /* amber */
  --accent-ink: #0D0D0D;
  --cta: #E02040;         /* red */
  --cta-ink: #FFFFFF;
  --cta-hover: #C01A36;
  --success: #0A7A58;     /* green — Canvas signature */
  --info: #6FC2C9;        /* teal — the agent */
  --warning: #F0A000;
  --error: #E02040;
  --terminal: #000000;
  --terminal-ink: #FFFFFF;
  --blue: #4472C4;
  --violet: #7B61FF;
}

[data-theme="canvas-light"] {
  color-scheme: light;
  --surface: #FFFFFF;
  --panel: #F7F8FA;
  --mid: #EEF1F5;
  --navy: #EEF1F5;
  --line: #E2E6EC;
  --line-soft: #D7DCE4;
  --ink: #0F172A;
  --ink-soft: #475569;
  --ink-mute: #64748B;
  --accent: #B45309;
  --accent-ink: #FFFFFF;
  --cta: #E02040;
  --cta-ink: #FFFFFF;
  --cta-hover: #C01A36;
  --success: #0A7A58;
  --info: #0E7490;
  --warning: #B45309;
  --error: #E02040;
  --terminal: #000000;
  --terminal-ink: #FFFFFF;
  --blue: #2D4F9E;
  --violet: #5B3FE0;
}

/* ── Reset & base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; background: var(--surface); overflow-x: clip; }

body {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--line-soft); border-radius: 4px; }

*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mono { font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── Layout primitives ─────────────────────────────────────────────────── */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 820px; }

section { padding: 80px 0; position: relative; }
.section-alt { background: var(--mid); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--success);
  margin-bottom: 14px;
}
.eyebrow.amber { color: var(--accent); }
.eyebrow.teal { color: var(--info); }

h1, h2, h3, h4 { line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: break-word; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); margin-bottom: 16px; }
h3 { font-size: 1.18rem; font-weight: 600; }
.section-head p { font-size: 1.05rem; color: var(--ink-soft); line-height: 1.6; }

.muted { color: var(--ink-mute); }
.soft { color: var(--ink-soft); }
.text-center { text-align: center; }
.mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px;
  border-radius: 6px; border: 1px solid transparent;
  font-size: 0.95rem; font-weight: 500; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--cta); color: var(--cta-ink); }
.btn-primary:hover { background: var(--cta-hover); }
.btn-secondary { background: transparent; color: var(--ink-soft); border-color: var(--line-soft); }
.btn-secondary:hover { border-color: var(--ink-mute); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { color: var(--ink); }
.btn-sm { min-height: 36px; padding: 0 16px; font-size: 0.875rem; }

/* ── Badges / status pills ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 9999px; padding: 3px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid; white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: 9999px; background: currentColor; }
.badge-running, .badge-included, .badge-ok { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); border-color: color-mix(in srgb, var(--success) 38%, transparent); }
.badge-building { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.badge-risk, .badge-failed { color: var(--cta); background: color-mix(in srgb, var(--cta) 12%, transparent); border-color: color-mix(in srgb, var(--cta) 40%, transparent); }
.badge-info { color: var(--info); background: color-mix(in srgb, var(--info) 10%, transparent); border-color: color-mix(in srgb, var(--info) 32%, transparent); }
.badge-idle { color: var(--ink-mute); background: var(--line); border-color: var(--line-soft); }
.badge .pulse { animation: canvas-pulse 2s ease-in-out infinite; }

@keyframes canvas-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes canvas-spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: canvas-spin 1.6s linear infinite; }

/* ── Header / nav ──────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 24px; height: 60px; }
.brand { display: inline-flex; align-items: baseline; gap: 8px; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.brand .brand-dot { width: 9px; height: 9px; border-radius: 9999px; background: var(--success); align-self: center; }
.brand .brand-period { color: var(--success); }
.nav-links { display: flex; gap: 4px; list-style: none; margin-left: 12px; }
.nav-links a { padding: 8px 12px; border-radius: 6px; font-size: 0.92rem; color: var(--ink-soft); transition: background .15s, color .15s; }
.nav-links a:hover { background: var(--mid); color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.lang-switch { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--ink-mute); }
.lang-switch a { padding: 2px 4px; border-radius: 4px; }
.lang-switch a.active { color: var(--ink); font-weight: 600; }
.lang-switch a:not(.active):hover { color: var(--ink-soft); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--line-soft); background: transparent; color: var(--ink-soft); }
.icon-btn:hover { color: var(--ink); border-color: var(--ink-mute); }
.icon-btn svg { width: 18px; height: 18px; }
.nav-toggle { display: none; }

/* theme icon swap */
[data-theme-icon] { display: none; }
[data-theme="cos"] [data-theme-icon="dark"] { display: block; }
[data-theme="canvas-light"] [data-theme-icon="light"] { display: block; }

/* ── Grid background motif ─────────────────────────────────────────────── */
.grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  opacity: .6;
}
.section-inner { position: relative; z-index: 1; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { padding: 88px 0 72px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.03em; margin: 18px 0 20px; }
.hero h1 .hl { color: var(--success); }
.hero .lead { font-size: 1.15rem; line-height: 1.6; color: var(--ink-soft); max-width: 560px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; font-size: 0.83rem; color: var(--ink-mute); }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust .dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--success); }

/* ── Generic card / panel ──────────────────────────────────────────────── */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.card-hover { transition: border-color .2s ease, transform .2s ease; }
.card-hover:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }

/* ── Window chrome (UI mock frame) ─────────────────────────────────────── */
.ui-mock { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px -30px rgba(0,0,0,.8); }
.ui-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--navy); border-bottom: 1px solid var(--line); }
.ui-bar .dots { display: flex; gap: 6px; }
.ui-bar .dots i { width: 11px; height: 11px; border-radius: 9999px; background: var(--line-soft); display: block; }
.ui-bar .crumb { font-size: 12px; color: var(--ink-mute); margin-left: 6px; }
.ui-bar .crumb b { color: var(--ink-soft); font-weight: 500; }
.ui-bar .ui-tab { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--accent-ink); background: var(--accent); padding: 3px 9px; border-radius: 4px; }
.ui-body { padding: 16px; }

/* ── Flow rail (Intent → Plan → Build → Test → Deploy) ─────────────────── */
.flow-rail { display: flex; flex-direction: column; gap: 2px; }
.flow-step { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; }
.flow-step .fs-ico { width: 22px; height: 22px; border-radius: 9999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.flow-step .fs-lbl { font-size: 13px; font-weight: 500; }
.flow-step .fs-sub { font-size: 11px; margin-left: auto; }
.fs-done .fs-ico { background: var(--success); color: #fff; } .fs-done .fs-lbl { color: var(--ink-soft); } .fs-done .fs-sub { color: var(--ink-mute); }
.fs-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.fs-active .fs-ico { background: var(--accent); color: #000; } .fs-active .fs-lbl { color: var(--accent); } .fs-active .fs-sub { color: var(--accent); }
.fs-idle .fs-ico { background: var(--mid); border: 1.5px solid var(--line-soft); color: var(--ink-mute); } .fs-idle .fs-lbl { color: var(--ink-mute); } .fs-idle .fs-sub { color: var(--ink-mute); }

/* ── App card (mock) ───────────────────────────────────────────────────── */
.app-card { background: var(--mid); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; transition: border-color .2s; }
.app-card:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.app-card .ac-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-card .ac-name { font-size: 0.95rem; font-weight: 600; }
.app-card .ac-meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.env-tag { font-size: 10px; color: var(--ink-mute); background: var(--line); padding: 2px 8px; border-radius: 4px; letter-spacing: 0.03em; }
.app-card .ac-foot { margin-top: 10px; font-size: 11px; color: var(--ink-mute); display: flex; align-items: center; gap: 6px; }

/* ── Agent chat panel (mock) ───────────────────────────────────────────── */
.agent-chat { display: flex; flex-direction: column; gap: 12px; }
.agent-chat .ac-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.agent-avatar { width: 22px; height: 22px; border-radius: 9999px; background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.agent-chat .ac-ctx { margin-left: auto; font-size: 11px; color: var(--ink-mute); }
.msg { display: flex; flex-direction: column; gap: 5px; }
.msg .m-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.msg-user { align-items: flex-end; }
.msg-user .m-lbl { color: color-mix(in srgb, var(--accent) 80%, transparent); }
.msg-user .bubble { background: color-mix(in srgb, var(--accent) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-radius: 10px 10px 3px 10px; padding: 9px 12px; font-size: 13px; max-width: 80%; }
.msg-agent .m-lbl { color: var(--info); }
.msg-agent .bubble { background: var(--mid); border: 1px solid var(--line); border-radius: 10px 10px 10px 3px; padding: 9px 12px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.m-action { background: color-mix(in srgb, var(--info) 5%, transparent); border: 1px solid color-mix(in srgb, var(--info) 20%, transparent); border-radius: 8px; padding: 8px 11px; font-size: 12px; color: var(--info); display: flex; align-items: center; gap: 8px; }

/* ── Generic "list with checks" (guardrails / agents) ──────────────────── */
.check-list { display: flex; flex-direction: column; gap: 2px; }
.check-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; }
.check-row + .check-row { border-top: 1px solid var(--line); }
.check-row .ck { width: 18px; height: 18px; flex-shrink: 0; color: var(--success); }
.check-row .ck-x { color: var(--cta); }
.check-row .cr-main { font-size: 13px; font-weight: 500; }
.check-row .cr-tag { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); background: var(--line); padding: 2px 8px; border-radius: 9999px; }

/* ── Deploy view (mock) ────────────────────────────────────────────────── */
.deploy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.deploy-env { background: var(--mid); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.deploy-env .de-name { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.deploy-env .de-host { font-size: 12px; margin-top: 6px; color: var(--ink-soft); }

/* ── Log output (mock) ─────────────────────────────────────────────────── */
.log-output { background: var(--terminal); color: var(--terminal-ink); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; line-height: 1.7; border-radius: 8px; padding: 14px 16px; overflow-x: auto; }
.log-output .ln { color: var(--ink-mute); display: inline-block; width: 26px; user-select: none; }
.log-stdout { color: var(--success); } .log-stderr { color: var(--cta); } .log-dim { color: var(--ink-mute); }

/* ── Persona cards ─────────────────────────────────────────────────────── */
.persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.persona .p-time { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--success); letter-spacing: 0.02em; }
.persona h3 { margin: 10px 0 8px; }
.persona p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.6; }

/* ── Dilemma (two columns) ─────────────────────────────────────────────── */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.split-2 h3 { margin-bottom: 10px; font-size: 1.15rem; }
.split-2 p { color: var(--ink-soft); line-height: 1.65; }
.split-2 .col-people h3 { color: var(--info); }
.split-2 .col-control h3 { color: var(--accent); }

/* ── Comparison centerpiece ────────────────────────────────────────────── */
.cmp-block { margin-top: 28px; }
.cmp-label { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.cmp-label .num { color: var(--ink-mute); }
.cmp-label.self .name { color: var(--ink-soft); }
.cmp-label.canvas .num { color: var(--success); } .cmp-label.canvas .name { color: var(--ink); }
.cmp-row { display: grid; grid-template-columns: repeat(4, 1fr) 0; gap: 12px; align-items: stretch; }
.cmp-stage { background: var(--navy); border: 1px solid var(--line-soft); border-radius: 8px; padding: 13px; position: relative; }
.cmp-stage .cs-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cmp-stage .cs-ico { width: 34px; height: 34px; border-radius: 9999px; background: var(--mid); border: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: center; color: var(--ink-mute); }
.cmp-stage .cs-ico svg { width: 17px; height: 17px; }
.cmp-stage h4 { font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
.cmp-stage p { font-size: 11.5px; color: var(--ink-mute); line-height: 1.45; }
.cmp-stage p .warn { color: var(--accent); } .cmp-stage p .bad { color: var(--cta); } .cmp-stage p .good { color: var(--success); }

/* Canvas container wrapping the bundle + layers */
.canvas-wrap { border: 1.5px solid var(--success); border-radius: 12px; padding: 16px; background: var(--panel); position: relative; }
.canvas-wrap .cw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.canvas-wrap .cw-head .cw-name { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--success); }
.bundle-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bundle-stage { background: var(--mid); border: 1px solid var(--line); border-radius: 8px; padding: 13px; }
.bundle-stage .cs-ico { background: var(--panel); border-color: var(--success); color: var(--success); }
.bundle-stage h4 { color: var(--ink); }
.bundle-stage p { color: var(--ink-soft); }
.layers { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.layer-bar { background: color-mix(in srgb, var(--success) 8%, transparent); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); border-radius: 7px; padding: 9px 13px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.layer-bar b { letter-spacing: 0.06em; margin-right: 8px; }
.layer-harness b { color: var(--ink); } .layer-guardrails b, .layer-management b { color: var(--success); }
.cmp-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.deploy-card { border: 1px dashed var(--success); border-radius: 10px; padding: 12px; }
.deploy-card .dc-head { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--success); margin-bottom: 8px; }
.cmp-callout { display: flex; gap: 14px; align-items: center; margin-top: 24px; background: var(--panel); border: 1px solid var(--success); border-radius: 10px; padding: 16px 20px; }
.cmp-callout .co-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--success); white-space: nowrap; }
.cmp-callout p { color: var(--ink-soft); font-size: 0.98rem; }
.cmp-divider { height: 1px; background: var(--line); border: none; margin: 28px 0; }

/* ── Deep-dive (layer) sections ────────────────────────────────────────── */
.deep-dive { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.deep-dive.reverse .dd-visual { order: -1; }
.dd-text .outcome-list { list-style: none; margin: 22px 0 0; display: flex; flex-direction: column; gap: 12px; }
.dd-text .outcome-list li { display: flex; gap: 11px; font-size: 0.98rem; color: var(--ink-soft); line-height: 1.5; }
.dd-text .outcome-list .ck { width: 18px; height: 18px; flex-shrink: 0; color: var(--success); margin-top: 2px; }
.dd-text .outcome-list b { color: var(--ink); }
.dd-how { margin-top: 22px; font-size: 0.95rem; color: var(--ink-mute); line-height: 1.6; }
.dd-how strong { color: var(--ink-soft); font-weight: 600; }

/* ── Agents grid ───────────────────────────────────────────────────────── */
.agents-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.agent-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; transition: border-color .2s; }
.agent-card:hover { border-color: color-mix(in srgb, var(--info) 35%, var(--line)); }
.agent-card h4 { font-size: 0.92rem; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.agent-card h4::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: var(--info); flex-shrink: 0; }
.agent-card p { font-size: 0.83rem; color: var(--ink-mute); line-height: 1.5; }

/* ── Two roles ─────────────────────────────────────────────────────────── */
.roles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.role-panel { background: var(--panel); border: 1.5px solid var(--success); border-radius: 12px; padding: 28px; }
.role-panel .rp-num { font-size: 1.5rem; font-weight: 700; color: var(--success); }
.role-panel h3 { font-size: 1.35rem; margin: 6px 0 10px; }
.role-panel .rp-ess { color: var(--ink-soft); line-height: 1.6; margin-bottom: 18px; }
.role-feat { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.role-feat .rf-ico { width: 34px; height: 34px; border-radius: 9999px; background: var(--mid); border: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: center; color: var(--success); flex-shrink: 0; }
.role-feat .rf-ico svg { width: 16px; height: 16px; }
.role-feat h4 { font-size: 0.98rem; font-weight: 600; margin-bottom: 3px; }
.role-feat p { font-size: 0.85rem; color: var(--ink-mute); line-height: 1.5; }

/* ── Pricing ───────────────────────────────────────────────────────────── */
.price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 26px; }
.price-card.anchor { border-color: var(--success); border-width: 1.5px; }
.price-card .pc-ico { width: 46px; height: 46px; border-radius: 9999px; background: var(--mid); border: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); margin-bottom: 16px; }
.price-card.anchor .pc-ico { border-color: var(--success); color: var(--success); }
.price-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.price-card .price { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.price-card.anchor .price { color: var(--success); }
.price-card .price small { font-size: 0.85rem; font-weight: 500; color: var(--ink-mute); }
.price-card .pc-sub { margin-top: 14px; font-size: 0.92rem; color: var(--ink-mute); line-height: 1.6; }
.price-card .pc-note { margin-top: 12px; font-size: 0.8rem; color: var(--ink-mute); }

.included-strip { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-top: 20px; background: var(--panel); border: 1px solid var(--success); border-radius: 10px; padding: 16px 20px; }
.included-strip .is-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; color: var(--success); white-space: nowrap; }
.included-strip .is-body { color: var(--ink-soft); font-size: 0.95rem; }

.usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 16px; }
.usage-col .uc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.usage-col .uc-head .uc-ico { width: 40px; height: 40px; border-radius: 9999px; background: var(--mid); border: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); }
.usage-col .uc-head h4 { font-size: 1.05rem; }
.usage-col .uc-head span { color: var(--ink-mute); font-weight: 400; font-size: 0.9rem; }

.table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.table th, .table td { padding: 11px 14px; text-align: left; font-size: 0.92rem; border-bottom: 1px solid var(--line); }
.table thead th { background: var(--mid); color: var(--ink); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.table td { color: var(--ink-soft); }
.table td:last-child, .table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.table tr:last-child td { border-bottom: none; }
.table .ok { color: var(--success); font-weight: 600; }

.est-box { margin-top: 16px; background: var(--panel); border: 1.5px solid var(--success); border-radius: 10px; padding: 16px 18px; }
.est-box .eb-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--success); }
.est-box .eb-val { font-size: 1.5rem; font-weight: 700; margin: 4px 0; font-variant-numeric: tabular-nums; }
.est-box .eb-sub { font-size: 0.82rem; color: var(--ink-mute); }

.price-foot { margin-top: 24px; text-align: center; font-size: 1rem; color: var(--ink-soft); }
.price-foot b { color: var(--success); }

.onprem { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; margin-top: 24px; background: var(--mid); border: 1px solid var(--line); border-radius: 12px; padding: 24px 28px; }
.onprem .op-price { font-size: 1.7rem; font-weight: 700; text-align: right; }
.onprem .op-price small { display: block; font-size: 0.82rem; font-weight: 400; color: var(--ink-mute); margin-top: 2px; }

/* ── Fit list ──────────────────────────────────────────────────────────── */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fit-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 22px; }
.fit-card h3 { font-size: 1.05rem; color: var(--success); margin-bottom: 8px; }
.fit-card p { color: var(--ink-soft); line-height: 1.6; }

/* ── Book ──────────────────────────────────────────────────────────────── */
.book-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 48px; align-items: center; }
.book-cover img { border-radius: 8px; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
.book-grid .lead { font-size: 1.12rem; color: var(--ink-soft); line-height: 1.6; }
.book-grid p { color: var(--ink-soft); line-height: 1.65; margin-top: 14px; }

/* ── Contact / CTA ─────────────────────────────────────────────────────── */
.cta-box { max-width: 760px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 40px; }
.cta-box h2 { text-align: center; }
.cta-box > p { text-align: center; color: var(--ink-soft); max-width: 560px; margin: 0 auto 28px; line-height: 1.6; }
.form-row { display: grid; gap: 16px; }
.form-row.two { grid-template-columns: 1fr 1fr; }
.form-row + .form-row { margin-top: 16px; }
.field label { display: block; font-size: 0.82rem; color: var(--ink-mute); margin-bottom: 6px; }
.field input, .field textarea { width: 100%; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 6px; padding: 11px 13px; color: var(--ink); font-size: 0.95rem; font-family: inherit; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.field textarea { resize: vertical; min-height: 96px; }
.form-actions { margin-top: 22px; text-align: center; }
.form-note { margin-top: 14px; text-align: center; font-size: 0.8rem; color: var(--ink-mute); }
.form-note a { color: var(--ink-soft); text-decoration: underline; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer { background: var(--panel); border-top: 1px solid var(--line); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; }
.footer-brand p { margin-top: 14px; max-width: 380px; color: var(--ink-mute); font-size: 0.92rem; line-height: 1.6; }
.footer-col h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin-bottom: 14px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-col a { color: var(--ink-soft); font-size: 0.92rem; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-mute); }

/* ── Legal pages ───────────────────────────────────────────────────────── */
.legal { max-width: 760px; margin: 0 auto; padding: 56px 0; }
.legal h1 { font-size: 1.9rem; margin-bottom: 24px; }
.legal h2 { font-size: 1.25rem; margin: 32px 0 12px; }
.legal p, .legal li { color: var(--ink-soft); line-height: 1.7; margin-bottom: 10px; }
.legal ul { padding-left: 22px; }
.legal a { color: var(--info); text-decoration: underline; }
.legal .placeholder { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 1px 6px; border-radius: 4px; font-size: 0.9em; }

/* ── Nav active state ──────────────────────────────────────────────────── */
.nav-links a.active { color: var(--ink); background: var(--mid); }

/* ── Two-promise cards (Home) ──────────────────────────────────────────── */
.promise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.promise-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 30px; transition: border-color .2s ease, transform .2s ease; }
.promise-card:hover { border-color: color-mix(in srgb, var(--success) 45%, var(--line)); transform: translateY(-2px); }
.promise-card .pm-ico { width: 48px; height: 48px; border-radius: 12px; background: color-mix(in srgb, var(--success) 12%, transparent); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); color: var(--success); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.promise-card .pm-ico svg { width: 24px; height: 24px; }
.promise-card .pm-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--success); margin-bottom: 8px; }
.promise-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.promise-card p { color: var(--ink-soft); line-height: 1.6; flex: 1; }
.promise-card .pm-link { margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--success); }
.promise-card .pm-link svg { width: 16px; height: 16px; transition: transform .2s ease; }
.promise-card:hover .pm-link svg { transform: translateX(3px); }

/* ── Interactive comparison toggle ─────────────────────────────────────── */
.cmp-switch { display: inline-flex; padding: 4px; gap: 2px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 9999px; }
.cmp-switch button { appearance: none; background: transparent; border: none; color: var(--ink-mute); font-size: 0.9rem; font-weight: 600; padding: 8px 20px; border-radius: 9999px; transition: background .2s ease, color .2s ease; }
.cmp-switch button:hover { color: var(--ink-soft); }
.cmp-toggle[data-mode="self"]   .cmp-switch button[data-mode="self"]   { background: var(--cta); color: var(--cta-ink); }
.cmp-toggle[data-mode="canvas"] .cmp-switch button[data-mode="canvas"] { background: var(--success); color: #fff; }

.cmp-stage-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
.cmp-stage-row .arrow { display: none; }
/* pipeline stage shared base already from .cmp-stage; toggle adds state styling */
.cmp-toggle .cmp-stage { transition: border-color .25s ease, background .25s ease; }
.cmp-toggle .cmp-stage .cs-ico { transition: border-color .25s ease, color .25s ease; }
.cmp-toggle .cmp-stage h4 { transition: color .25s ease; }
.cmp-toggle .stage-self { display: block; } .cmp-toggle .stage-canvas { display: none; }
.cmp-toggle .risk-badge { display: inline-flex; } .cmp-toggle .ok-badge { display: none; }

/* CANVAS mode: stages turn green/included, self text hides */
.cmp-toggle[data-mode="canvas"] .cmp-stage { border-color: color-mix(in srgb, var(--success) 50%, var(--line)); background: color-mix(in srgb, var(--success) 6%, var(--navy)); }
.cmp-toggle[data-mode="canvas"] .cmp-stage .cs-ico { border-color: var(--success); color: var(--success); }
.cmp-toggle[data-mode="canvas"] .cmp-stage h4 { color: var(--ink); }
.cmp-toggle[data-mode="canvas"] .stage-self { display: none; } .cmp-toggle[data-mode="canvas"] .stage-canvas { display: block; }
.cmp-toggle[data-mode="canvas"] .risk-badge { display: none; } .cmp-toggle[data-mode="canvas"] .ok-badge { display: inline-flex; }

/* The three layers + isolated deployment: revealed only in canvas mode */
.cmp-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s ease, opacity .35s ease, margin-top .35s ease; margin-top: 0; }
.cmp-reveal > .cmp-reveal-inner { overflow: hidden; min-height: 0; }
.cmp-toggle[data-mode="canvas"] .cmp-reveal { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }
.cmp-layers { display: flex; flex-direction: column; gap: 8px; }
.cmp-foot { margin-top: 18px; min-height: 1.4em; font-size: 0.98rem; }
.cmp-foot .foot-self { color: var(--ink-mute); } .cmp-foot .foot-canvas { color: var(--ink-soft); display: none; }
.cmp-foot .foot-canvas b { color: var(--success); }
.cmp-toggle[data-mode="canvas"] .cmp-foot .foot-self { display: none; } .cmp-toggle[data-mode="canvas"] .cmp-foot .foot-canvas { display: block; }

@media (prefers-reduced-motion: reduce) {
  .cmp-reveal, .cmp-toggle .cmp-stage, .promise-card { transition: none; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .hero-grid, .deep-dive, .book-grid { grid-template-columns: 1fr; gap: 36px; }
  .deep-dive.reverse .dd-visual { order: 0; }
  .roles-grid, .split-2, .usage-grid, .footer-grid { grid-template-columns: 1fr; }
  .agents-grid, .persona-grid, .price-cards { grid-template-columns: 1fr 1fr; }
  .cmp-row, .bundle-row { grid-template-columns: 1fr 1fr; }
  .cmp-row { grid-template-columns: 1fr 1fr 0; }
  .promise-grid { grid-template-columns: 1fr; }
  .cmp-stage-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  section { padding: 56px 0; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav { gap: 12px; }
  .nav-actions { gap: 8px; }
  .site-header .nav-actions .btn-primary { display: none; } /* hero has its own CTA */
  .nav-links.open { display: flex; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; background: var(--panel); border-bottom: 1px solid var(--line); padding: 12px 24px; gap: 2px; }
  .agents-grid, .persona-grid, .price-cards, .fit-grid, .cmp-row, .bundle-row, .deploy-grid, .cmp-aside, .form-row.two, .cmp-stage-row { grid-template-columns: 1fr; }
  .cta-box { padding: 26px 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .onprem { flex-direction: column; align-items: flex-start; }
  .onprem .op-price { text-align: left; }
}