/* Home — AgentOS enterprise landing. Local palette (mission spec); tokens.css provides spacing/radius/shadow primitives. */
.HomePage {
  --home-bg: #FFFFFF;
  --home-bg-subtle: #F8FAFC;
  --home-text: #0F172A;
  --home-text-2: #334155;
  --home-text-3: #64748B;
  --home-primary: #0284C7;
  --home-primary-bright: #0EA5E9;
  --home-primary-dark: #0369A1;
  --home-primary-subtle: #F0F9FF;
  --home-accent: #7C3AED;
  --home-border: #E2E8F0;
  --home-success: #16A34A;
  --home-warning: #B45309;
  --home-error: #DC2626;
  background: var(--home-bg);
  color: var(--home-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.HomePage :focus-visible { outline: 2px solid var(--home-primary); outline-offset: 2px; border-radius: 4px; }

.HomeContainer { max-width: 1280px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

.HomeSkip { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--home-text); color: #fff; padding: 8px 16px; border-radius: 6px; text-decoration: none; font-size: 0.875rem; transition: top 150ms ease; }
.HomeSkip:focus { top: 12px; }

/* Buttons */
.HomeBtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; padding: 10px 22px; font-weight: 600; font-size: 1rem; line-height: 1.5; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
.HomeBtn--primary { background: var(--home-primary); color: #fff; }
.HomeBtn--primary:hover { background: var(--home-primary-dark); }
.HomeBtn--secondary { background: var(--home-bg); color: var(--home-text); border-color: var(--home-border); }
.HomeBtn--secondary:hover { border-color: var(--home-primary); color: var(--home-primary); }
.HomeBtn--ghost { background: transparent; color: var(--home-text-2); border-color: transparent; padding: 10px 12px; }
.HomeBtn--ghost:hover { color: var(--home-primary); }
.HomeBtn--lg { padding: 13px 30px; font-size: 1rem; }

/* 1 · Navigation */
.HomeNav { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--home-border); }
.HomeNav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 68px; display: flex; align-items: center; justify-content: flex-start; gap: 28px; }
.HomeNav-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--home-text); flex: none; }

/* Smooth page entry (matches app pages) */
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }

#main { animation: page-in 0.28s ease-out; }

@media (prefers-reduced-motion: reduce) {
  #main { animation: none; }
}
.HomeNav-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1 1 auto; min-width: 0; }
.HomeNav-links { display: flex; align-items: center; gap: 4px; margin-right: 0; }
.HomeNav-links a { text-decoration: none; color: var(--home-text-2); font-size: 0.9375rem; font-weight: 500; padding: 8px 14px; border-radius: 6px; }
.HomeNav-links a:hover { color: var(--home-primary); background: var(--home-bg-subtle); }
.HomeNav-actions { display: flex; align-items: center; gap: 4px; }
.HomeNav-toggle { display: none; background: none; border: 1px solid var(--home-border); border-radius: 6px; padding: 8px 14px; cursor: pointer; color: var(--home-text); font-weight: 600; font-size: 0.875rem; }

/* 2 · Hero — unified composition, preview pulled tight underneath */
.Hero { text-align: center; padding: 64px 0 8px; background: var(--home-bg); position: relative; overflow: hidden; }
.Hero > .HomeContainer { width: 100%; position: relative; z-index: 1; }

/* Hero living background : static grid + drifting node field + soft glow.
   Decorative only (aria-hidden). Fully static under prefers-reduced-motion. */
.Hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background-image:
    linear-gradient(rgba(2, 132, 199, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2, 132, 199, 0.09) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center top;
  mask-image: radial-gradient(ellipse 85% 90% at 50% 30%, #000 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 90% at 50% 30%, #000 25%, transparent 100%);
}
.Hero-bg::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 600px 380px at 50% 28%, rgba(2, 132, 199, 0.12), transparent 70%);
  opacity: 0.65; animation: hero-glow 6s ease-in-out infinite alternate;
}
@keyframes hero-glow { from { opacity: 0.45; } to { opacity: 0.85; } }
.Hero-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0.9; }
.Hero-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--home-primary); border: 1px solid var(--home-border); background: var(--home-primary-subtle); border-radius: 999px; padding: 6px 16px; margin-bottom: 24px; }
.Hero h1 { 
    font-size: clamp(2rem, 4vw + 1rem, 3rem); 
    line-height: 1.2; 
    letter-spacing: -0.01em; 
    font-weight: 800; 
    max-width: 100%; 
    margin: 0 auto 12px; 
    padding: 0 12px; 
    text-wrap: balance; 
}
.Hero-lead { color: var(--home-text-2); font-size: 1.125rem; line-height: 1.65; max-width: 680px; margin: 0 auto 32px; }
.Hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }
/* Background switcher (compact pill + dropdown, language-switcher style) */
.HeroBgWrap { position: relative; display: inline-block; margin: 12px 0 0; z-index: 3; }
.HeroBgBtn { appearance: none; display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--home-border); border-radius: 999px; padding: 4px 14px; font-size: 0.75rem; font-weight: 600; color: var(--home-text-2); cursor: pointer; }
.HeroBgBtn:hover { border-color: var(--home-primary); color: var(--home-primary); }
.HeroBgDot { width: 8px; height: 8px; border-radius: 50%; background: var(--home-primary); flex: none; }
.HeroBgCaret { font-size: 0.625rem; color: var(--home-text-3); }
.HeroBgList { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 6px); min-width: 190px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--home-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); text-align: left; }
.HeroBgList li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; font-size: 0.8125rem; font-weight: 500; color: var(--home-text-2); cursor: pointer; white-space: nowrap; }
.HeroBgList li i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.HeroBgList li[aria-selected="true"] { background: var(--home-primary-subtle); color: var(--home-text); font-weight: 700; }
.HeroBgList li.is-focus { background: var(--home-bg-subtle); outline: 2px solid var(--home-primary); outline-offset: -2px; }
/* Hero → preview: clean stops, no overlap (preview starts on its own full stop) */
@media (min-width: 769px) {
  .Hero { padding-bottom: 64px; }
  .PreviewSection { margin-top: 0; padding-top: 72px; position: relative; z-index: auto; }
  .PreviewSection .ExecutionPreview { position: relative; z-index: auto; }
}
.Hero-note { margin-top: 20px; margin-bottom: 0; font-size: 0.8125rem; color: var(--home-text-3); letter-spacing: 0.02em; }
.Hero-flow { display: block; width: 1px; height: 24px; margin: 16px auto 0; background: var(--home-border); position: relative; }
.Hero-flow::after { content: ""; position: absolute; left: -3.5px; bottom: -1px; width: 8px; height: 8px; border-right: 1px solid var(--home-primary); border-bottom: 1px solid var(--home-primary); transform: rotate(45deg); }

/* Section eyebrows share the connector marker language with the hero flow line */

/* Section scaffolding — one connected story: intent → execution → orchestration → process → capabilities → control → result */
.SectionEyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--home-primary); }
.SectionEyebrow::before { content: ""; width: 22px; height: 2px; background: var(--home-primary); border-radius: 1px; }
.SectionEyebrow--center { justify-content: center; }
.SectionEyebrow--center::after { content: ""; width: 22px; height: 2px; background: var(--home-primary); border-radius: 1px; }
.SectionTitle { font-size: clamp(2.25rem, 3vw + 1rem, 3rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 750; margin-bottom: 8px; }
.SectionLead { color: var(--home-text-2); font-size: 1.125rem; max-width: 680px; margin-bottom: 24px; }
.PreviewSection .SectionTitle, .PreviewSection .SectionLead,
.Orchestration .SectionTitle, .Orchestration .SectionLead { text-align: left; }
.PreviewSection { padding: 72px 0 72px; background: var(--home-bg-subtle); border-bottom: 1px solid var(--home-border); }
.PreviewSection .HomeContainer { max-width: 1360px; }
.Orchestration, .HowWorks, .Capabilities, .Trust { padding: 72px 0; }
.HowWorks, .Trust { background: var(--home-bg-subtle); border-top: 1px solid var(--home-border); border-bottom: 1px solid var(--home-border); }

/* 3 · Execution preview : hero-level, ~90% container, two-column interior */
/* 24 · reserve preview height to avoid CLS (desktop layout is stable) */
.ExecutionPreview { background: #fff; border: 1px solid var(--home-border); border-radius: 12px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); overflow: hidden; width: 100%; margin: 0 auto; font-size: 0.875rem; min-height: 480px; }
.ExecutionPreview-bar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--home-border); }
.ExecutionPreview-dots { display: inline-flex; gap: 6px; }
.ExecutionPreview-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--home-border); }
.ExecutionPreview-title { font-weight: 650; font-size: 0.875rem; }
/* 16 · approval-gate caption directly under the preview bar */
.PreviewGate { margin: 0; padding: 8px 20px; font-size: 0.75rem; font-weight: 600; color: var(--home-text-3); border-bottom: 1px solid var(--home-border); background: #fff; }
.ExecutionPreview-status { margin-left: auto; font-size: 0.75rem; font-weight: 700; color: var(--home-primary); background: var(--home-primary-subtle); border: 1px solid var(--home-border); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.StatusDot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: currentColor; }
.StatusDot--running { background: var(--home-primary-bright); animation: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes nodePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12); border-color: var(--home-primary-bright); }
  50% { box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.06); border-color: var(--home-primary); }
}
.ExecutionPreview-body { display: grid; grid-template-columns: 320px 1fr; align-items: stretch; }
.ExecutionPreview-side { border-right: 1px solid var(--home-border); background: var(--home-bg-subtle); display: flex; flex-direction: column; min-width: 0; }
.ExecutionPreview-request { margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--home-border); font-size: 0.875rem; }
.ExecutionPreview-request span { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--home-text-3); margin-bottom: 2px; }
.ExecutionPreview-request strong { display: block; font-size: 0.9375rem; font-weight: 650; color: var(--home-text); line-height: 1.45; }
.ExecutionPreview-requestMeta { margin-top: 6px; font-size: 0.75rem; letter-spacing: 0; text-transform: none; font-weight: 500; }
.ExecutionPreview-main { min-width: 0; display: flex; flex-direction: column; }
.ExecutionPreview-graphTitle { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--home-text-3); margin: 0; padding: 16px 20px 0; }
/* Mobile-first run summary: status / owner / next action, full graph behind toggle */
.RunSummary { display: none; }
.GraphToggle { display: none; }
.PreviewMetrics-note { margin: 0; padding: 10px 20px 0; font-size: 0.75rem; color: var(--home-text-3); border-top: 1px solid var(--home-border); }
.FlowRetry { margin-top: 10px !important; font-size: 0.8125rem !important; background: var(--home-bg-subtle); border: 1px solid var(--home-border); border-left: 3px solid var(--home-warning) !important; border-radius: 6px; padding: 8px 12px !important; }
.FlowRetry em { font-style: normal; font-weight: 700; }

.ExecutionPreview-scroll { overflow-x: auto; padding: 16px 20px 20px; }
/* Vertical node graph: DOM list + CSS connectors, screen-reader labelled via aria-label */
.AgentGraph { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; min-width: 0; }
.AgentGraph > li { position: relative; padding-bottom: 22px; padding-left: 26px; }
.AgentGraph > li:last-child { padding-bottom: 0; }
.AgentGraph > li::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: -2px; width: 2px; background: var(--home-border); }
.AgentGraph > li:last-child::before { display: none; }
.AgentGraph > li::after { content: ""; position: absolute; left: 4px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--home-border); }
.AgentGraph > li:has(.is-done)::after, .AgentGraph > li:has(.AgentNode.is-done)::after { border-color: var(--home-success); }
.AgentNode { background: #fff; border: 1px solid var(--home-border); border-radius: 8px; padding: 12px 14px; font-size: 0.8125rem; display: flex; flex-direction: column; gap: 2px; opacity: 0.55; transition: opacity 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out; }
.AgentNode ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.AgentNode--fan { border: none; padding: 0 0 22px 26px; background: none; }
.AgentNode--fan::after { border-color: var(--home-primary-bright); }
.AgentNode--fan .AgentNode { min-height: 0; }
.AgentNode-name { font-weight: 700; font-size: 0.8125rem; color: var(--home-text); }
.AgentNode-detail { color: var(--home-text-3); font-size: 0.75rem; }
.AgentNode-state { margin-top: auto; padding-top: 6px; font-size: 0.75rem; font-weight: 700; color: var(--home-text-3); }
.AgentNode.is-done { opacity: 1; border-left: 3px solid var(--home-success); }
.AgentNode.is-done .AgentNode-state { color: var(--home-success); }
.AgentNode.is-active { opacity: 1; border-left: 3px solid var(--home-primary-bright); animation: none; }
.AgentNode.is-active .AgentNode-state { color: var(--home-primary); }
.AgentNode.is-pending { opacity: 0.92; border-left: 3px solid var(--home-border); }
.AgentNode.is-pending .AgentNode-state { color: var(--home-text-3); }
.AgentNode--validate.is-pending { border-left-color: var(--home-warning); }
.AgentNode--result { border-style: dashed; border-left-width: 1px; }
.AgentNode--result.is-active { border-style: solid; border-left: 3px solid var(--home-accent); animation: none; }
.AgentNode--result.is-active .AgentNode-state { color: var(--home-accent); }

.ExecutionPreview-metrics { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-top: 1px solid var(--home-border); }
.ExecutionPreview-metrics div { padding: 14px 20px; border-left: 1px solid var(--home-border); }
.ExecutionPreview-metrics div:first-child { border-left: none; }
.ExecutionPreview-metrics dt { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--home-text-3); }
.ExecutionPreview-metrics dd { margin: 0; font-size: 1.5rem; font-weight: 750; letter-spacing: -0.01em; }
.ExecutionPreview-progress { padding: 0 20px 16px; }
.ProgressTrack { height: 8px; background: var(--home-primary-subtle); border: 1px solid var(--home-border); border-radius: 999px; overflow: hidden; }
.ProgressTrack span { display: block; height: 100%; width: 0; background: var(--home-primary); border-radius: 999px; transition: width 200ms ease-out; }

.ExecutionPreview-feed { padding: 14px 16px 16px; font-size: 0.75rem; }
.ExecutionPreview-feed h3 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--home-text-3); margin-bottom: 8px; }
.ExecutionPreview-feed ul { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--home-border); border-radius: 8px; overflow: hidden; background: #fff; }
.ExecutionPreview-feed li { display: flex; gap: 10px; padding: 6px 12px; border-top: 1px solid var(--home-border); color: var(--home-text-2); }
.ExecutionPreview-feed li:first-child { border-top: none; }
.ExecutionPreview-feed time { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.75rem; color: var(--home-text-3); white-space: nowrap; padding-top: 2px; }
.ExecutionPreview-feed em { font-style: normal; font-weight: 700; font-size: 0.75rem; }
/* 5 · inline Show all toggle for the activity feed */
.FeedToggleWrap { margin: 8px 0 0; }
.FeedToggle { appearance: none; background: none; border: none; padding: 4px 0; font-size: 0.75rem; font-weight: 700; color: var(--home-primary-dark); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.FeedToggle:hover { color: var(--home-primary); }

/* 4 · Orchestration flow : connector diagram, not cards */
.OrchScrollHint { display: none; margin: 0 0 8px; font-size: 0.8125rem; font-weight: 600; color: var(--home-text-3); }
.Orchestration-scroll { overflow-x: auto; padding-bottom: 8px; }
.OrchFlow { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 0; min-width: 0; }
.OrchFlow > li { flex: 1 1 0; position: relative; padding-right: 30px; min-width: 0; display: flex; }
.OrchFlow > li.OrchNode--agents { flex: 2 1 0; }
.OrchFlow > li:not(:last-child)::after { content: ""; position: absolute; top: 52px; right: 7px; width: 16px; height: 2px; background: var(--home-primary-bright); }
.OrchFlow > li:not(:last-child)::before { content: ""; position: absolute; top: 48.5px; right: 7px; width: 7px; height: 7px; border-right: 2px solid var(--home-primary); border-top: 2px solid var(--home-primary); transform: rotate(45deg); }
.OrchNode { background: #fff; border: 1px solid var(--home-border); border-radius: 10px; padding: 16px; height: 100%; min-height: 190px; flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; }
.OrchNode-kicker { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--home-primary); margin-bottom: 6px; }
.OrchNode strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.OrchNode-sub { font-size: 0.8125rem; color: var(--home-text-3); }
.OrchNode--goal { border-top: 3px solid var(--home-text); }
.OrchNode--orch { border-top: 3px solid var(--home-primary); }
.OrchNode--agents { border-top: 3px solid var(--home-primary-bright); padding-bottom: 12px; }
.OrchNode--agents ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; flex: 1 1 auto; align-content: stretch; }
.OrchNode--agents li { display: grid; gap: 2px; font-size: 0.8125rem; background: var(--home-bg-subtle); border: 1px solid var(--home-border); border-left: 3px solid var(--home-primary-bright); border-radius: 6px; padding: 8px 10px; }
.OrchNode--agents li + li { border-top: 2px solid var(--home-border); }
.OrchTool { color: var(--home-text-3); font-size: 0.75rem; }
.OrchState { font-size: 0.75rem; font-weight: 700; }
.OrchState--done { color: var(--home-success); }
.OrchState--running { color: var(--home-primary); }
.OrchNode--synth { border-top: 3px solid var(--home-accent); }
.OrchNode--result { border-top: 3px solid var(--home-success); background: var(--home-bg-subtle); }

/* Orchestration legend : one-line border-color key, symbol + word never color-alone */
.OrchLegend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; font-size: 0.8125rem; font-weight: 600; color: var(--home-text-2); }
.OrchLegend span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.OrchSwatch { display: inline-block; width: 18px; height: 4px; border-radius: 2px; }
.OrchSwatch--goal { background: var(--home-text); }
.OrchSwatch--orch { background: var(--home-primary); }
.OrchSwatch--agents { background: var(--home-primary-bright); }
.OrchSwatch--synth { background: var(--home-accent); }
.OrchSwatch--result { background: var(--home-success); }

/* 5 · How it works : vertical connected node flow */
.FlowSteps { list-style: none; margin: 0; padding: 0; max-width: 720px; position: relative; }
.FlowSteps::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 2px; background: var(--home-border); }
.FlowStep { position: relative; padding: 0 0 20px 44px; }
.FlowStep:last-child { padding-bottom: 0; }
.FlowStep-dot { position: absolute; left: 4px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--home-border); }
.FlowStep.is-done .FlowStep-dot { border-color: var(--home-success); background: var(--home-success); box-shadow: inset 0 0 0 3px #fff; }
.FlowStep.is-active .FlowStep-dot { border-color: var(--home-primary-bright); box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15); animation: none; }
.FlowStep-card { background: #fff; border: 1px solid var(--home-border); border-radius: 10px; padding: 20px 24px; }
.FlowStep.is-active .FlowStep-card { border-left: 3px solid var(--home-primary-bright); }
.FlowStep.is-done .FlowStep-card { border-left: 3px solid var(--home-success); }
.FlowStep-kicker { display: block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--home-primary); margin-bottom: 6px; }
.FlowStep-card h3 { font-size: 1.125rem; margin: 0 0 8px; }
.FlowStep-card p { font-size: 0.9375rem; color: var(--home-text-2); margin: 0; }
.FlowBranch { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.FlowBranch li { display: grid; gap: 2px; background: var(--home-bg-subtle); border: 1px solid var(--home-border); border-radius: 8px; padding: 10px 12px; font-size: 0.8125rem; position: relative; }
.FlowBranch li::before { content: ""; position: absolute; left: -8px; top: 50%; width: 8px; height: 2px; background: var(--home-primary-bright); }
.FlowBranch li:first-child::before { display: none; }
.FlowBranch strong { font-size: 0.875rem; }
.FlowBranch span { color: var(--home-text-3); font-size: 0.75rem; }
/* 12 · one-line recap closing the How rail */
.FlowRecap { margin: 16px 0 0; font-size: 0.875rem; font-weight: 600; color: var(--home-text-2); max-width: 720px; }

/* 6 · Capabilities (asymmetric: lead panel + knowledge/tools split + full-width visibility strip) */
.Capabilities-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.Capability { background: #fff; border: 1px solid var(--home-border); border-radius: 10px; padding: 28px; }
.Capability h3 { font-size: 1.125rem; margin-bottom: 8px; }
.Capability p { color: var(--home-text-2); font-size: 0.9375rem; margin-bottom: 0; }
.Capability--lead { grid-row: span 2; border-top: 3px solid var(--home-primary); }
.Capability--lead p { font-size: 1rem; margin-bottom: 16px; }
.Capability--lead ul { margin: 0; padding-left: 20px; color: var(--home-text-2); font-size: 0.9375rem; display: grid; gap: 6px; }
.Capability--wide { grid-column: 1 / -1; padding: 20px 24px; display: grid; grid-template-columns: 220px 1fr; gap: 6px 24px; align-items: baseline; border-left: 3px solid var(--home-primary-bright); }
.Capability--wide h3 { margin-bottom: 0; }
.Capability--wide p { max-width: 760px; }

/* 7 · Trust : each pillar with a compact operational artifact */
.Trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.Trust-grid article { background: #fff; border: 1px solid var(--home-border); border-radius: 10px; padding: 22px; display: flex; flex-direction: column; }
.Trust-grid h3 { font-size: 1.125rem; margin-bottom: 8px; }
.Trust-grid p { color: var(--home-text-2); font-size: 0.9375rem; }
.TrustArtifact { margin: 12px 0 0; border: 1px solid var(--home-border); border-radius: 8px; background: var(--home-bg-subtle); font-size: 0.8125rem; }
.TrustTimeline { list-style: none; padding: 0; overflow: hidden; }
.TrustTimeline li { display: flex; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--home-border); color: var(--home-text-2); }
.TrustTimeline li:first-child { border-top: none; }
.TrustTimeline time { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.75rem; color: var(--home-text-3); white-space: nowrap; }
.TrustTimeline em { font-style: normal; font-weight: 700; font-size: 0.75rem; }
.TrustGate { padding: 12px; }
.TrustGate-title { font-weight: 700; font-size: 0.8125rem; margin: 0 0 8px; color: var(--home-text); }
.TrustGate-actions { display: flex; gap: 8px; }
.TrustGate-btn { padding: 8px 16px; font-size: 0.875rem; }
.TrustGate-note { margin: 8px 0 0; font-size: 0.75rem; color: var(--home-text-3); }
.TrustMap { margin-left: 0; margin-right: 0; padding: 0; overflow: hidden; }
.TrustMap div { padding: 8px 12px; border-top: 1px solid var(--home-border); }
.TrustMap div:first-child { border-top: none; }
.TrustMap dt { font-weight: 700; font-size: 0.8125rem; color: var(--home-text); }
.TrustMap dd { margin: 0; font-size: 0.75rem; color: var(--home-text-3); }

/* 8 · Final CTA — story conclusion + deployment strip as compact footer */
.FinalCta { text-align: center; padding: 88px 0 72px; }
.FinalCta h2 { font-size: clamp(2rem, 3vw + 1rem, 3rem); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 12px; }
.FinalCta p { color: var(--home-text-2); font-size: 1.125rem; max-width: 640px; margin: 0 auto 24px; }
.CtaDemo { max-width: 680px; margin: 0 auto 32px; text-align: left; background: #fff; border: 1px solid var(--home-border); border-radius: 12px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); overflow: hidden; }
.CtaDemo-goal { margin: 0; padding: 16px 20px; font-size: 0.9375rem; font-style: italic; color: var(--home-text); border-bottom: 1px solid var(--home-border); background: var(--home-bg-subtle); }
.CtaDemo-steps { list-style: none; margin: 0; padding: 12px 20px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.CtaDemo-steps li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; border: 1px solid var(--home-border); border-radius: 8px; padding: 8px 12px; opacity: 0.55; }
.CtaDemo-steps li span { font-size: 0.75rem; font-weight: 700; }
.CtaDemo-steps li.is-done { opacity: 1; border-left: 3px solid var(--home-success); }
.CtaDemo-steps li.is-done span { color: var(--home-success); }
.CtaDemo-steps li.is-active { opacity: 1; border-left: 3px solid var(--home-primary-bright); animation: none; }
.CtaDemo-steps li.is-active span { color: var(--home-primary); }
.CtaDemo-replay { margin: 0; padding: 0 20px 16px; }
.CtaDemo-replay .HomeBtn { padding: 8px 16px; font-size: 0.875rem; }
/* 17 · dual-path commitment labels + microcopy */
.CtaPaths { align-items: flex-start; }
.CtaPath { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.CtaPath-label { font-size: 0.75rem; font-weight: 500; color: var(--home-text-3); }
.CtaMicro { margin: 12px auto 0 !important; font-size: 0.8125rem !important; color: var(--home-text-3) !important; }
.HomeFooter { border-top: 1px solid var(--home-border); padding: 28px 0; font-size: 0.875rem; color: var(--home-text-3); background: #fff; }
.HomeFooter-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.HomeFooter nav { display: flex; gap: 20px; }
.HomeFooter a { color: var(--home-text-2); text-decoration: none; font-weight: 500; }
.HomeFooter a:hover { color: var(--home-primary); text-decoration: underline; }

/* Product touches: ticker + stack strip + use-case tabs + deploy strip (mission palette) */
/* 6 · hero ticker removed — the preview metrics row is the single truth row (no duplication) */

.StackStrip { margin-top: 24px; text-align: left; background: #fff; border: 1px solid var(--home-border); border-radius: 10px; padding: 16px 20px; }
.StackStrip-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--home-text-3); margin: 0 0 4px; }
/* 11 · one static muted connector line, no chips */
.StackStrip-line { margin: 0; padding-top: 12px; border-top: 1px solid var(--home-border); font-size: 0.875rem; color: var(--home-text-3); }

.CapTabs { margin-top: 20px; background: #fff; border: 1px solid var(--home-border); border-radius: 10px; padding: 20px 24px 24px; }
.CapTabs-title { font-size: 1rem; margin: 0 0 12px; }
.CapTabs-list { display: flex; gap: 8px; flex-wrap: wrap; }
.CapTab { appearance: none; background: #fff; border: 1px solid var(--home-border); border-radius: 999px; padding: 8px 18px; font-weight: 600; font-size: 0.875rem; color: var(--home-text-2); cursor: pointer; }
.CapTab:hover { border-color: var(--home-primary); color: var(--home-primary); }
.CapTab.is-selected { background: var(--home-primary); border-color: var(--home-primary); color: #fff; }
.CapPanel { margin-top: 16px; }
.CapPanel-copy { color: var(--home-text-2); font-size: 0.9375rem; margin: 0 0 12px; max-width: 640px; }
.CapPanel-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.CapPanel-metrics div { background: var(--home-bg-subtle); border: 1px solid var(--home-border); border-radius: 8px; padding: 10px 14px; }
.CapPanel-metrics dt { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--home-text-3); }
.CapPanel-metrics dd { margin: 2px 0 0; font-size: 1.25rem; font-weight: 750; font-variant-numeric: tabular-nums; }
/* 15 · tiny sample tag on every tab metric */
.SampleTag { display: inline-block; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--home-text-3); border: 1px solid var(--home-border); border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; }
.CapPanel-next { margin: 12px 0 0; font-size: 0.875rem; }
.CapPanel-next a { color: var(--home-primary-dark); font-weight: 600; text-decoration: none; }
.CapPanel-next a:hover { color: var(--home-primary); text-decoration: underline; }

.DeployStrip { max-width: 880px; margin: 32px auto 0; text-align: left; background: #fff; border: 1px solid var(--home-border); border-radius: 10px; padding: 14px 16px; }
.DeployStrip-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--home-text-3); margin: 0 0 10px; text-align: center; }
.DeployStrip-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.DeployStrip-list li { display: grid; gap: 2px; background: var(--home-bg-subtle); border: 1px solid var(--home-border); border-radius: 8px; padding: 10px 12px; font-size: 0.8125rem; }
.DeployStrip-list strong { font-size: 0.875rem; }
.DeployStrip-list span { color: var(--home-text-3); font-size: 0.75rem; }
.DeployAudit { margin: 10px 0 0; font-size: 0.75rem; color: var(--home-text-3); background: var(--home-bg-subtle); border-top: 1px solid var(--home-border); padding: 8px 4px 0; overflow-x: auto; white-space: nowrap; }
.DeployAudit code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.75rem; color: var(--home-text-2); user-select: all; }
.DeployAudit-label { font-weight: 700; color: var(--home-text); }
/* 18 · copyable audit log */
.AuditCopy { appearance: none; background: #fff; border: 1px solid var(--home-border); border-radius: 6px; padding: 2px 10px; font-size: 0.75rem; font-weight: 600; color: var(--home-primary-dark); cursor: pointer; margin-left: 8px; }
.AuditCopy:hover { border-color: var(--home-primary); }
.AuditConfirm { font-size: 0.75rem; font-weight: 600; color: var(--home-success); margin-left: 8px; }

@media (prefers-reduced-motion: reduce) {
  .HomePage *, .HomePage *::before, .HomePage *::after { transition: none !important; animation: none !important; }
  .ProgressTrack span { width: 72% !important; }
  .AgentNode, .CtaDemo-steps li { opacity: 1 !important; }
}

/* Responsive : graphs scroll horizontally, never shrink-to-fit */
@media (max-width: 1024px) {
  .ExecutionPreview-body { grid-template-columns: 280px 1fr; }
  .AgentNode ul { grid-template-columns: 1fr; }
  .Capabilities-grid { grid-template-columns: 1fr 1fr; }
  .Capability--lead { grid-row: auto; grid-column: 1 / -1; }
  .Capability--wide { grid-template-columns: 1fr; gap: 4px; }
  .Trust-grid { grid-template-columns: 1fr; max-width: 640px; }
}
@media (max-width: 768px) {
  .HomeContainer { padding-left: 20px; padding-right: 20px; }
  .HomeNav-inner { padding: 0 20px; height: 64px; }
  .HomeNav-toggle { display: inline-block; }
  /* Single dropdown panel: the nav itself is the panel, no magic offsets */
  .HomeNav-nav.is-open { position: absolute; top: 64px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--home-border); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 4px; }
  .HomeNav-nav.is-open .HomeNav-links, .HomeNav-nav.is-open .HomeNav-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; }
  .HomeNav-nav.is-open .HomeNav-links a { padding: 12px 8px; border-top: 1px solid var(--home-border); }
  .HomeNav-nav.is-open .HomeNav-links a:first-child { border-top: none; }
  .HomeNav-links, .HomeNav-actions { display: none; }
  .Hero { padding: 56px 0 0; }
  .Hero h1 { letter-spacing: -0.02em; }
  .Hero-ctas .HomeBtn { flex: 1 1 100%; }
  .Orchestration, .HowWorks, .Capabilities, .Trust { padding: 64px 0; }
  .PreviewSection { padding: 48px 0 56px; }
  .ExecutionPreview-body { grid-template-columns: 1fr; }
  .ExecutionPreview-side { border-right: none; border-bottom: 1px solid var(--home-border); }
  /* Core graph is fluid — no forced min-width sideways scan. Only the wide
     orchestration diagram keeps a scroll region, with a visible hint. */
  .AgentGraph { min-width: 0; }
  .RunSummary { display: grid; gap: 4px; margin: 12px 20px 0; padding: 10px 12px; background: var(--home-bg-subtle); border: 1px solid var(--home-border); border-radius: 8px; font-size: 0.8125rem; color: var(--home-text-2); }
  .RunSummary strong { color: var(--home-text); }
  .GraphToggle { display: inline-flex; align-items: center; justify-content: center; margin: 12px 20px 0; appearance: none; background: #fff; border: 1px solid var(--home-border); border-radius: 8px; padding: 10px 14px; font-weight: 600; font-size: 0.875rem; color: var(--home-primary-dark); cursor: pointer; }
  .GraphToggle:hover { border-color: var(--home-primary); }
  .ExecutionPreview-scroll.is-collapsed { display: none; }
  .OrchFlow { min-width: 900px; }
  .OrchScrollHint { display: block; }
  .Orchestration-scroll:focus-visible, .ExecutionPreview-scroll:focus-visible { outline: 2px solid var(--home-primary); outline-offset: 2px; }
  .ExecutionPreview { min-height: 0; }
  .ExecutionPreview-metrics { grid-template-columns: 1fr 1fr; }
  .ExecutionPreview-metrics div:nth-child(3) { border-left: none; }
  .ExecutionPreview-metrics div { border-top: 1px solid var(--home-border); }
  .ExecutionPreview-metrics div:nth-child(-n+2) { border-top: none; }
  .Capabilities-grid { grid-template-columns: 1fr; }
  /* Core metrics wrap as a 2x2 grid — no sideways scroll for core content */
  .CapTabs-list { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .CapTab { white-space: nowrap; }
  .DeployStrip-list { grid-template-columns: 1fr; }
  .FinalCta { padding: 72px 0; }
  .HomeFooter-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 390px) {
  .Hero-note { font-size: 0.75rem; }
  .CapPanel-metrics { grid-template-columns: 1fr; }
  .ExecutionPreview-metrics { grid-template-columns: 1fr 1fr; }
  .ExecutionPreview-metrics dd { font-size: 1.25rem; }
  .FlowBranch { grid-template-columns: 1fr; }
  .CtaDemo-steps { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .HomePage *, .HomePage *::before, .HomePage *::after { transition: none !important; animation: none !important; }
  .ProgressTrack span { width: 72%; }
  .AgentNode, .CtaDemo-steps li { opacity: 1; }
}

/* ===== Motion system (purposeful only, ≤200ms ease-out, opacity + ≤12px translate, stagger ≤120ms) ===== */
:root { --home-ease: cubic-bezier(0.2, 0.7, 0.3, 1); }

/* 1 · Nav slides down on load */
@keyframes HomeNavDrop { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.HomeNav { animation: HomeNavDrop 200ms var(--home-ease) both; }

/* 1 · Eyebrow fades in (no scale) */
@keyframes HomeEyebrowPop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.Hero-eyebrow { animation: HomeEyebrowPop 200ms var(--home-ease) 60ms both; }

/* 1 · H1 staggered fade-up per line (≤12px, stagger ≤120ms total) */
@keyframes HomeLineUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.Hero-line { display: block; overflow: hidden; }
.Hero-line > span { display: block; opacity: 0; animation: HomeLineUp 200ms var(--home-ease) forwards; }
.Hero-line:nth-child(1) > span { animation-delay: 40ms; }
.Hero-line:nth-child(2) > span, .Hero-line:nth-of-type(2) > span { animation-delay: 80ms; }
/* lines are consecutive spans: second span gets later delay */
#hero-title .Hero-line + .Hero-line > span { animation-delay: 80ms; }
.Hero-lead, .Hero-ctas, .Hero-note { animation: HomeLineUp 200ms var(--home-ease) both; }
.Hero-lead { animation-delay: 100ms; }
.Hero-ctas { animation-delay: 110ms; }
.Hero-note { animation-delay: 120ms; }

/* 1+5 · CTA lift on hover (transform only, no layout shift, no scale) */
.HomeBtn { transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease-out, box-shadow 150ms ease-out; }
.Hero-ctas .HomeBtn:hover, .FinalCta .HomeBtn:hover, .TrustGate-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12); }
.Hero-ctas .HomeBtn:active, .FinalCta .HomeBtn:active, .TrustGate-btn:active { transform: translateY(0); box-shadow: none; }

/* 5 · Shared reveal-on-scroll utility (≤200ms ease-out) */
.Reveal { opacity: 0; transform: translateY(12px); transition: opacity 200ms ease-out, transform 200ms ease-out; transition-delay: var(--reveal-delay, 0ms); }
.Reveal.is-in { opacity: 1; transform: none; }

/* 2 · Activity feed rows slide in staggered */
.ExecutionPreview-feed li { transition: opacity 200ms ease-out, transform 200ms ease-out; }
.ExecutionPreview-feed li.is-feed-hidden { opacity: 0; transform: translateX(10px); }
.ExecutionPreview-feed li.is-feed-in { opacity: 1; transform: none; }

/* 2 · Graph nodes: sequential activation slides slightly (transform only, opacity already in base) */
.AgentNode { transform: translateY(4px); }
.AgentNode.is-done, .AgentNode.is-active, .AgentNode.is-pending { transform: none; }

/* 3 · Orchestration nodes reveal along flow direction (≤12px, ≤200ms) */
.OrchFlow > li { transition: opacity 200ms ease-out, transform 200ms ease-out; }
.OrchFlow > li.is-flow-hidden { opacity: 0; transform: translateX(12px); }
.OrchFlow > li.is-flow-in { opacity: 1; transform: none; }

/* 3 · Parallel branch fades in (opacity + small rise, no scale) */
.OrchNode--agents ul, .FlowBranch { transition: opacity 200ms ease-out, transform 200ms ease-out; }
.OrchNode--agents ul.is-branch-hidden, .FlowBranch.is-branch-hidden { opacity: 0; transform: translateY(8px); }
.OrchNode--agents ul.is-branch-in, .FlowBranch.is-branch-in { opacity: 1; transform: none; }

/* 3 · Branch hover: border tint only (title attr carries text, zero layout shift) */
.OrchNode--agents li, .FlowBranch li { transition: border-color 150ms ease, background 150ms ease; cursor: default; }
.OrchNode--agents li:hover, .FlowBranch li:hover { border-color: var(--home-primary); background: var(--home-primary-subtle); }
.OrchNode--agents li:focus-visible, .FlowBranch li:focus-visible { outline: 2px solid var(--home-primary); outline-offset: 2px; }

/* 3 · Connectors fade in (opacity only, no scale) */
.OrchFlow > li:not(:last-child)::after { opacity: 0; transition: opacity 200ms ease-out; }
.OrchFlow.is-connectors-in > li:not(:last-child)::after { opacity: 1; }
.OrchFlow > li:not(:last-child)::before { opacity: 0; transition: opacity 200ms ease-out 100ms; }
.OrchFlow.is-connectors-in > li:not(:last-child)::before { opacity: 1; }
.FlowSteps::before { opacity: 0; transition: opacity 200ms ease-out; }
.FlowSteps.is-connectors-in::before { opacity: 1; }
.AgentGraph > li::before { opacity: 0; transition: opacity 200ms ease-out; }
.AgentGraph.is-connectors-in > li::before { opacity: 1; }

/* 4 · Cards slide in staggered (opacity + ≤12px, stagger ≤120ms) */
.Capability, .Trust-grid article { transition: opacity 200ms ease-out, transform 200ms ease-out; transition-delay: var(--reveal-delay, 0ms); }
.Capability.is-card-hidden, .Trust-grid article.is-card-hidden { opacity: 0; transform: translateY(12px); }
.Capability.is-card-in, .Trust-grid article.is-card-in { opacity: 1; transform: none; }

/* 4 · Use-case tab cross-fade */
.CapPanel { transition: opacity 200ms ease-out; }
.CapPanel.is-tab-fade { opacity: 0; }
.CapPanel.is-tab-in { opacity: 1; }

/* 4 · Trust timeline fades in vertically (opacity only, no scale) */
.TrustTimeline { position: relative; }
.TrustTimeline::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--home-primary); opacity: 0; transition: opacity 200ms ease-out; }
.TrustTimeline.is-timeline-in::before { opacity: 1; }
.TrustTimeline li { transition: opacity 200ms ease-out, transform 200ms ease-out; }
.TrustTimeline li.is-tl-hidden { opacity: 0; transform: translateY(8px); }
.TrustTimeline li.is-tl-in { opacity: 1; transform: none; }

/* 4 · Gate buttons reflect state */
.TrustGate-btn[aria-pressed="true"] { border-color: var(--home-primary); color: var(--home-primary); background: var(--home-primary-subtle); }
.TrustGate-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* 5 · Demo checklist ticks progressively */
.CtaDemo-steps li { transition: opacity 200ms ease-out, transform 200ms ease-out, border-color 200ms ease-out; }
.CtaDemo-steps li.is-check-hidden { opacity: 0; transform: translateY(8px); }
.CtaDemo-steps li.is-check-in { opacity: 0.55; transform: none; }
.CtaDemo-steps li.is-check-in.is-done { opacity: 1; }
.CtaDemo-steps li.is-check-in.is-active { opacity: 1; }

/* 5 · Scrollspy highlights nav item of section in view (text+background, never color alone) */
.HomeNav-links a.is-current { color: var(--home-primary); background: var(--home-bg-subtle); box-shadow: inset 0 -2px 0 var(--home-primary); }

/* 24 · offscreen artifacts stay static until their section is in view (JS adds .is-in) */
.ExecutionPreview.is-in .AgentNode.is-active, .CtaDemo.is-in li.is-active,
.FlowSteps.is-in .FlowStep.is-active .FlowStep-dot { animation: nodePulse 2s ease-in-out infinite; }
.ExecutionPreview.is-in .StatusDot--running { animation: pulse 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .HomeNav, .Hero-eyebrow, .Hero-line > span, .Hero-lead, .Hero-ctas, .Hero-note { animation: none !important; opacity: 1 !important; transform: none !important; }
  .Reveal, .OrchFlow > li, .Capability, .Trust-grid article,
  .ExecutionPreview-feed li, .TrustTimeline li, .CtaDemo-steps li,
  .OrchNode--agents ul, .FlowBranch, .CapPanel { opacity: 1 !important; transform: none !important; transition: none !important; }
  .OrchFlow > li:not(:last-child)::after, .OrchFlow > li:not(:last-child)::before,
  .FlowSteps::before, .AgentGraph > li::before, .TrustTimeline::before { opacity: 1 !important; transform: none !important; }
  .ProgressTrack span { width: 72% !important; }
}

/* ===== Content-driven section rhythm: viewport fill ONLY for hero + preview ===== */
/* Short sections (trust, CTA) take natural height + their existing section padding —
   no stretched flex centering, no peeking headings. Long sections flow top-down. */
html { scroll-behavior: smooth; scroll-padding-top: 68px; }
main > section {
  scroll-margin-top: 68px;
  box-sizing: border-box;
}
/* 1 · Hero keeps full-viewport fill, vertically centered */
.Hero {
  min-height: calc(100vh - 68px);
  min-height: calc(100svh - 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.Hero > .HomeContainer { width: 100%; }
/* 2 · Preview keeps large presence, grows with content */
.PreviewSection {
  min-height: calc(100vh - 68px);
  min-height: calc(100svh - 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.PreviewSection > .HomeContainer { width: 100%; }
/* 3 · All other sections: natural height, block flow, top-aligned (existing
   per-section padding sets the rhythm: 72px orchestration/how/cap/trust,
   88px/72px final CTA) */
.Orchestration, .HowWorks, .Capabilities, .Trust, .FinalCta { display: block; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y proximity; }
  main > section { scroll-snap-align: start; scroll-snap-stop: normal; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  main > section { scroll-snap-align: none; }
}
@media (hover: none) {
  html { scroll-snap-type: none; }
  main > section { scroll-snap-align: none; }
}
@media (max-width: 768px) {
  html { scroll-padding-top: 64px; }
  main > section { scroll-margin-top: 64px; }
  .Hero, .PreviewSection {
    min-height: calc(100vh - 64px);
    min-height: calc(100svh - 64px);
  }
}

/* ===== Horizontal overflow guard: page never scrolls sideways; wide diagrams keep internal scroll ===== */
html, body { overflow-x: clip; }
.HomePage { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
.HomePage img, .HomePage svg, .HomePage canvas, .HomePage video { max-width: 100%; }
.HomeContainer, .HomeNav-inner { max-width: min(1280px, 100%); box-sizing: border-box; }
.HomePage main, .HomePage section, .HomePage article, .HomePage div { min-width: 0; }
.ExecutionPreview, .CtaDemo, .CapTabs, .DeployStrip, .StackStrip, .Capability, .Trust-grid article { max-width: 100%; }
.ExecutionPreview-scroll, .Orchestration-scroll, .DeployAudit, .CapTabs-list { max-width: 100%; }
.ExecutionPreview-feed li, .TrustTimeline li { min-width: 0; overflow-wrap: anywhere; }
.ExecutionPreview-feed time, .TrustTimeline time { flex: none; }
.TrustGate-actions { flex-wrap: wrap; }

/* LangSwitch — compact EN|VI segmented button in nav, next to Sign in.
   Real buttons + aria-pressed; wraps, never clips (VI strings run longer). */
.LangSwitch { display: inline-flex; align-items: center; flex: none; background: var(--home-bg-subtle); border: 1px solid var(--home-border); border-radius: 999px; padding: 2px; margin-right: 6px; }
.LangSwitch-btn { appearance: none; border: none; background: transparent; border-radius: 999px; padding: 6px 12px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--home-text-3); cursor: pointer; line-height: 1.4; white-space: nowrap; }
.LangSwitch-btn:hover { color: var(--home-primary); }
.LangSwitch-btn[aria-pressed="true"] { background: #fff; color: var(--home-text); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); outline: 1px solid var(--home-border); }
/* VI headline/lead may wrap longer — allow wrapping everywhere, never clip. */
.HomePage h1, .HomePage h2, .HomePage h3, .HomePage p, .HomePage li, .HomePage span, .HomePage a { overflow-wrap: break-word; }
.Hero h1, .SectionTitle, .FinalCta h2 { text-wrap: balance; }
@media (max-width: 768px) {
  .HomeNav-nav.is-open .LangSwitch { align-self: flex-start; margin: 4px 0 8px; }
}
@media (max-width: 390px) {
  .LangSwitch-btn { padding: 6px 10px; }
  .Hero h1 { font-size: clamp(2rem, 11vw, 2.75rem); }
}

/* ============================================================
   FULLSCREEN SECTION EXPERIENCE (Home only)
   One viewport per section. No page scroll, no scrollbar.
   Single controller in home.js :: goToSection(index).
   ============================================================ */
html, body { height: 100%; overflow: hidden !important; overscroll-behavior: none; }
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
body.HomePage { height: 100vh; height: 100svh; overflow: hidden !important; }

/* Fixed header above slides */
.HomePage .HomeNav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; animation: HomeNavDrop 200ms var(--home-ease) both; }

/* Stage = exactly one viewport; slides stack absolutely */
.FsStage {
  position: relative; height: 100vh; height: 100svh; overflow: hidden;
  padding-top: 68px; box-sizing: border-box; background: var(--home-bg);
}
.FsSection {
  position: absolute; top: 68px; left: 0; right: 0; bottom: 0;
  height: calc(100vh - 68px); height: calc(100svh - 68px);
  overflow: hidden; box-sizing: border-box;
  padding: clamp(8px, 2vh, 28px) 0 clamp(8px, 2vh, 24px);
  display: flex; flex-direction: column; justify-content: center;
  visibility: hidden; pointer-events: none; opacity: 0;
  transform: translateY(48px);
  transition: transform 680ms cubic-bezier(0.22, 0.9, 0.28, 1), opacity 680ms cubic-bezier(0.22, 0.9, 0.28, 1), visibility 0ms linear 680ms;
}
.FsSection.is-active {
  visibility: visible; pointer-events: auto; opacity: 1; transform: none; z-index: 2;
  transition: transform 680ms cubic-bezier(0.22, 0.9, 0.28, 1), opacity 680ms cubic-bezier(0.22, 0.9, 0.28, 1), visibility 0ms;
}
.FsSection.is-before { transform: translateY(-48px); }
.FsSection.is-after { transform: translateY(48px); }
/* Incoming content rises slightly for a premium step feel */
.FsSection.is-active .FsFit { animation: FsRise 680ms cubic-bezier(0.22, 0.9, 0.28, 1) both; }
@keyframes FsRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.FsFit { width: 100%; max-height: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
/* Safety: if viewport is very short, allow inner scroll contained in the slide (never the page) */
.FsFit--scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.FsFit--scroll::-webkit-scrollbar { display: none; }

/* Neutralize legacy flow rules that would break the slide model */
.PreviewSection, .Orchestration, .HowWorks, .Capabilities, .Trust, .FinalCta { padding-top: 0; padding-bottom: 0; }
.Hero { padding: 0; min-height: 0; text-align: center; }
.PreviewSection { min-height: 0; }
.SectionTitle { font-size: clamp(1.4rem, 2.2vh + 1rem, 2.4rem); margin-bottom: 4px; }
.SectionLead { font-size: clamp(0.875rem, 1vh + 0.7rem, 1.05rem); margin-bottom: 12px; }
.SectionEyebrow { margin-bottom: 6px; }
.Hero h1 { font-size: clamp(2rem, 5vh + 1.2rem, 3.6rem); margin-bottom: 10px; }
.Hero-lead { font-size: clamp(0.9375rem, 1.2vh + 0.75rem, 1.1rem); margin-bottom: 16px; }
.Hero-note { margin-top: 10px; }
.Hero > .HomeContainer { width: 100%; }

/* Hero intent strip fills the lower visual field */
.IntentStrip {
  list-style: none; margin: 16px auto 0; padding: 10px 18px; display: flex; align-items: center;
  justify-content: center; gap: 14px; max-width: 640px;
  background: #fff; border: 1px solid var(--home-border); border-radius: 12px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.IntentStrip li { display: flex; flex-direction: column; gap: 0; }
.IntentStrip strong { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.IntentStrip span { font-size: 0.75rem; color: var(--home-text-3); }
.IntentStrip-arrow { color: var(--home-primary); font-weight: 800; }
.HeroBgWrap { margin: 8px 0 0; }

/* Scroll cue: subtle, disappears after first navigation */
.ScrollCue {
  appearance: none; background: none; border: none; cursor: pointer; margin: 10px auto 0;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0;
  color: var(--home-text-3); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.ScrollCue-arrow { font-size: 1rem; color: var(--home-primary); animation: CueBob 1.8s ease-in-out infinite; }
@keyframes CueBob { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(5px); opacity: 1; } }
.FsStage.has-moved .ScrollCue { opacity: 0.35; }
.FsStage.has-moved .ScrollCue-arrow { animation: none; }

/* Section 02: execution preview sized to the viewport */
#execution .ExecutionPreview { min-height: 0; font-size: 0.8125rem; }
#execution .ExecutionPreview-body { grid-template-columns: 270px 1fr; }
#execution .ExecutionPreview-request { padding: 8px 16px; }
#execution .ExecutionPreview-feed { padding: 8px 12px 10px; }
#execution .ExecutionPreview-feed li { padding-top: 5px; padding-bottom: 5px; }
#execution .ExecutionPreview-scroll { padding: 10px 16px 12px; }
#execution .AgentGraph > li { padding-bottom: 6px; }
#execution .AgentNode { padding: 4px 12px; }
#execution .ExecutionPreview-metrics div { padding: 4px 16px; }
#execution .ExecutionPreview-metrics dd { font-size: 1rem; }
#execution .PreviewMetrics-note { display: none; }
#execution .RunSummary { display: none; }
#execution .GraphToggle { display: none; }
/* Slide mode: progress becomes a slim bar pinned to the card foot (role kept) */
#execution .ExecutionPreview { position: relative; padding-bottom: 16px; }
#execution .ExecutionPreview-progress { padding: 0; position: absolute; left: 0; right: 0; bottom: 0; }
#execution .ProgressTrack { border: none; border-radius: 0; height: 4px; background: var(--home-primary-subtle); }
#execution .PreviewGate { padding-top: 6px; padding-bottom: 6px; }
#execution .ExecutionPreview-graphTitle { font-size: 0.6875rem; padding-top: 4px; }
@media (min-width: 769px) {
  /* Slide mode shows the 3 latest events; the expander would break the fit */
  #execution .FeedToggleWrap { display: none; }
}
/* Section 02 title kept deliberately smaller than other section titles */
#execution .SectionTitle { font-size: clamp(1.15rem, 1.6vh + 0.85rem, 1.7rem); }
#execution .SectionLead { margin-bottom: 8px; }

/* Section 03: orchestration fills viewport */
#orchestration .OrchNode { min-height: 0; padding: 12px; }
#orchestration .OrchFlow > li:not(:last-child)::after { top: 44px; }
#orchestration .OrchFlow > li:not(:last-child)::before { top: 40.5px; }
#orchestration .StackStrip--compact { margin-top: 12px; padding: 10px 16px; }
#orchestration .OrchLegend { margin-top: 8px; }

/* Section 04: horizontal process rail (simpler than orchestration graph) */
.FlowSteps--rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; max-width: none; }
.FlowSteps--rail::before { left: 12px; right: 12px; top: 11px; bottom: auto; height: 2px; width: auto; }
.FlowSteps--rail .FlowStep { padding: 28px 8px 0 0; }
.FlowSteps--rail .FlowStep:last-child { padding-right: 0; }
.FlowSteps--rail .FlowStep-dot { left: 4px; top: 4px; }
.FlowSteps--rail .FlowStep-card { padding: 12px 14px; }
.FlowSteps--rail .FlowStep-card h3 { font-size: 0.9375rem; margin-bottom: 4px; }
.FlowSteps--rail .FlowStep-card p { font-size: 0.75rem; line-height: 1.5; }
.FlowSteps--rail .FlowBranch { grid-template-columns: 1fr; }
.FlowSteps--rail .FlowRetry { display: none; }
.FlowRecap { margin-top: 10px; font-size: 0.8125rem; }

/* Section 05: asymmetric capabilities, compact */
.Capabilities-grid--fs { grid-template-columns: 1.25fr 1fr 1fr; gap: 12px; }
.Capability--lead { grid-row: auto; }
.Capabilities-grid--fs .Capability { padding: 16px 18px; }
.Capabilities-grid--fs .Capability h3 { font-size: 0.9375rem; }
.Capabilities-grid--fs .Capability p { font-size: 0.8125rem; }
.Capabilities-grid--fs .Capability--lead ul { font-size: 0.8125rem; margin-top: 8px; }
.CapStat { margin: 8px 0 0 !important; font-size: 0.8125rem !important; color: var(--home-primary-dark) !important; font-weight: 700; }
.CapStat strong { font-size: 0.9375rem; }
.CapTabs--fs { margin-top: 12px; padding: 12px 16px 14px; }
.CapTabs--fs .CapPanel-copy { font-size: 0.8125rem; margin-bottom: 8px; }
.CapTabs--fs .CapPanel-metrics div { padding: 8px 12px; }
.CapTabs--fs .CapPanel-metrics dd { font-size: 1.05rem; }

/* Section 06: control + CTA combined */
.Trust-grid--compact { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.Trust-grid--compact article { padding: 14px 16px; }
.Trust-grid--compact h3 { font-size: 0.9375rem; margin-bottom: 4px; }
.Trust-grid--compact p { font-size: 0.8125rem; }
.Trust-grid--compact .TrustGate { padding: 8px 10px; }
.TrustAudit { margin: 8px 0 0; font-size: 0.6875rem; color: var(--home-text-3); background: var(--home-bg-subtle); border: 1px solid var(--home-border); border-radius: 8px; padding: 8px 10px; overflow: hidden; }
.TrustAudit code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.6875rem; color: var(--home-text-2); user-select: all; }
.ControlCta { text-align: center; margin-top: 12px; border-top: 1px solid var(--home-border); padding-top: 12px; }
.ControlCta-title { font-size: clamp(1.2rem, 2vh + 0.9rem, 1.8rem); letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 10px; text-wrap: balance; }
.ControlCta .CtaMicro { margin: 8px 0 0; font-size: 0.75rem; color: var(--home-text-3); }

/* Legacy FinalCta leftovers (kept harmless if referenced) */
.CtaDemo, .DeployStrip { display: none; }

/* Fixed dots + counter: navigation, not a scrollbar */
.FsNav {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
/* Clear lane for the fixed nav so dots never sit on content */
@media (min-width: 769px) {
  .FsSection .HomeContainer { padding-right: 76px; }
}
/* Honor the JS feed toggle: hidden rows stay hidden (overrides display:flex) */
#execution .ExecutionPreview-feed li[hidden] { display: none !important; }
/* Tall screens: densify so slides feel intentional, not airy */
@media (min-width: 769px) and (min-height: 800px) {
  .Capabilities-grid--fs .Capability { padding: 22px; }
  .CapTabs--fs { padding: 18px 22px 20px; }
  #orchestration .OrchNode { padding: 16px; }
}
/* Section 02: keep metrics + progress inside the viewport */
#execution .ExecutionPreview-graphTitle { padding-top: 8px; }
#execution .RunSummary { margin-top: 6px; padding: 6px 12px; }
#execution .ExecutionPreview-metrics div { padding: 6px 16px; }
#execution .ExecutionPreview-metrics dd { font-size: 1.05rem; }
#execution .ExecutionPreview-progress { padding-bottom: 8px; }
/* Small screens: cap the hero headline by width (not vh) + lane for dots */
@media (max-width: 768px) {
  .Hero h1 { font-size: clamp(1.9rem, 10vw, 2.6rem); }
  .FsSection .HomeContainer { padding-right: 44px; }
  .IntentStrip { max-width: 100%; }
  .IntentStrip li { min-width: 0; }
}
.FsCounter { margin: 0; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; color: var(--home-text-3); font-variant-numeric: tabular-nums; }
.FsDots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.FsDots button {
  appearance: none; background: none; border: none; cursor: pointer; padding: 4px;
  display: flex; align-items: center; gap: 8px;
}
.FsDots button i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--home-text-3); background: transparent; transition: background 200ms ease, border-color 200ms ease, transform 200ms ease; }
.FsDots button span {
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--home-text-3); opacity: 0; transform: translateX(4px); transition: opacity 200ms ease, transform 200ms ease;
}
.FsDots button:hover span, .FsDots button:focus-visible span { opacity: 1; transform: none; }
.FsDots button.is-current i { background: var(--home-primary); border-color: var(--home-primary); transform: scale(1.25); }
.FsDots button.is-current span { opacity: 1; transform: none; color: var(--home-text); }

/* Slim footer lives only on the final slide — never adds page scroll */
.FsFooter {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff;
  border-top: 1px solid var(--home-border); padding: 8px 0; font-size: 0.75rem;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 300ms ease, transform 300ms ease, visibility 0ms linear 300ms;
}
.FsFooter.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms ease, transform 300ms ease; }
.FsFooter nav { gap: 12px; }

/* Kill legacy snap/smooth that would fight the controller */
html { scroll-behavior: auto !important; scroll-snap-type: none !important; scroll-padding-top: 0; }
main > section { scroll-margin-top: 0; scroll-snap-align: none !important; }

/* Short viewports: tighten further so content still fits one screen */
@media (max-height: 760px) {
  .FsSection { padding-top: 6px; padding-bottom: 6px; }
  .Hero-lead, .SectionLead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .IntentStrip { margin-top: 10px; padding: 8px 14px; }
  .HeroBgWrap, .ScrollCue { margin-top: 6px; }
  .FlowSteps--rail .FlowStep-card p { display: none; }
  .Trust-grid--compact article > p:first-of-type { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Tablet / mobile */
@media (max-width: 1024px) {
  .Capabilities-grid--fs { grid-template-columns: 1fr 1fr; }
  .Capabilities-grid--fs .Capability--lead { grid-column: 1 / -1; }
  .Capabilities-grid--fs .Capability--lead ul { display: none; }
  .FlowSteps--rail { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .FlowSteps--rail::-webkit-scrollbar { display: none; }
  .FlowSteps--rail .FlowStep { min-width: 150px; }
}
@media (max-width: 768px) {
  .FsStage { padding-top: 64px; }
  .FsSection { top: 64px; height: calc(100vh - 64px); height: calc(100svh - 64px); justify-content: flex-start; }
  .FsFit { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: 12px; }
  .FsFit::-webkit-scrollbar { display: none; }
  .HomeContainer { padding-left: 20px; padding-right: 20px; }
  .FsNav { right: 8px; }
  .FsDots button span { display: none; }
  .IntentStrip { flex-wrap: wrap; gap: 8px 12px; }
  #execution .ExecutionPreview-body { grid-template-columns: 1fr; }
  #execution .ExecutionPreview-side { border-right: none; border-bottom: 1px solid var(--home-border); }
  #execution .RunSummary { display: grid; grid-template-columns: 1fr; }
  .Trust-grid--compact { grid-template-columns: 1fr; }
  .Trust-grid--compact article:nth-child(1) { display: none; }
  .ControlCta { border-top: none; padding-top: 4px; }
  .Hero-ctas .HomeBtn { flex: 1 1 100%; }
  .FsFooter nav { flex-wrap: wrap; gap: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .FsSection { transition: none !important; }
  .FsSection.is-active .FsFit { animation: none !important; }
  .ScrollCue-arrow { animation: none !important; }
  .HomePage *, .HomePage *::before, .HomePage *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Logged-in nav: avatar + Dashboard button (injected by renderAuthState) */
.HomeAuth {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.HomeAuth-avaWrap {
  position: relative;
}

.HomeAuth-ava {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--home-border);
  background: var(--home-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.HomeAuth-ava.has-photo {
  background-size: cover;
  background-position: center;
  border-color: var(--home-primary);
}

.HomeAuth-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--home-bg);
  border: 1px solid var(--home-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  min-width: 150px;
  padding: 4px;
  z-index: 50;
}

.HomeAuth-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 8px 10px;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--home-text);
  border-radius: 7px;
  cursor: pointer;
}

.HomeAuth-menu button:hover {
  background: var(--home-bg-subtle);
}

/* ===== Dark mode: VS Code black, forced contrast ===== */
.ThemeToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--home-border);
  background: var(--home-bg);
  color: var(--home-text-2);
  cursor: pointer;
  flex-shrink: 0;
}

.ThemeToggle:hover {
  border-color: var(--home-primary);
  color: var(--home-primary);
}

.ThemeToggle-moon {
  display: none;
}

html.dark .ThemeToggle-sun {
  display: none;
}

html.dark .ThemeToggle-moon {
  display: block;
}

html.dark {
  --home-bg: #1E1E1E;
  --home-bg-subtle: #252526;
  --home-text: #FFFFFF;
  --home-text-2: #CCCCCC;
  --home-text-3: #A6A6A6;
  --home-primary-subtle: #123653;
  --home-border: #3E3E3E;
}

html.dark body {
  background: #1E1E1E;
}

html.dark .HomeNav,
html.dark .HeroBgBtn,
html.dark .HeroBgList,
html.dark .ExecutionPreview,
html.dark .AgentNode,
html.dark .OrchNode,
html.dark .FlowStep-card,
html.dark .Capability,
html.dark .Trust-grid article,
html.dark .CtaDemo,
html.dark .StackStrip,
html.dark .CapTabs,
html.dark .CapTab,
html.dark .DeployStrip,
html.dark .AuditCopy,
html.dark .IntentStrip,
html.dark .FsFooter,
html.dark .HomeNav-nav.is-open {
  background: #252526;
}

html.dark .LangSwitch-btn[aria-pressed="true"] {
  background: #3E3E3E;
  color: #fff;
}