:root {
  --bg: #09090b;
  --panel: #111113;
  --panel-2: #18181b;
  --line: #27272a;
  --line-bright: #3f3f46;
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --dim: #71717a;
  --blue: #3b82f6;
  --blue-light: #60a5fa;
  --green: #34d399;
  --violet: #a78bfa;
  --amber: #fbbf24;
  --red: #fb7185;
  --font: "DM Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.skip-link { position: fixed; z-index: 1000; top: 1rem; left: 1rem; transform: translateY(-200%); padding: .75rem 1rem; background: white; color: black; border-radius: .4rem; }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ambient { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(120px); opacity: .13; }
.ambient-one { width: 40rem; height: 40rem; background: #1d4ed8; top: -17rem; left: 12%; }
.ambient-two { width: 25rem; height: 25rem; background: #7c3aed; top: 32rem; right: -15rem; opacity: .09; }

.site-header { position: relative; z-index: 20; width: min(calc(100% - 3rem), var(--max)); height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(63,63,70,.58); }
.brand { display: inline-flex; align-items: center; font-size: 1.03rem; font-weight: 800; letter-spacing: -.04em; }
.brand span:last-child { color: var(--blue); }
.desktop-nav { display: flex; align-items: center; gap: 2rem; color: #c4c4cc; font-size: .88rem; }
.desktop-nav a, .footer-links a { transition: color .2s ease; }
.desktop-nav a:hover, .footer-links a:hover { color: white; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .75rem; padding: 0 1.4rem; border: 1px solid transparent; border-radius: .42rem; font-weight: 650; font-size: .92rem; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 38px; padding: 0 1rem; font-size: .82rem; }
.button-ghost { border-color: var(--line-bright); background: rgba(24,24,27,.58); }
.button-ghost:hover { background: var(--panel-2); border-color: #52525b; }
.button-primary { color: white; background: var(--blue); box-shadow: 0 12px 35px rgba(37,99,235,.23); }
.button-primary:hover { background: #4f8df7; }
.button-light { background: var(--text); color: #111; }
.menu-button, .mobile-nav { display: none; }

.hero { width: min(calc(100% - 3rem), var(--max)); margin: 0 auto; padding: 7.2rem 0 6rem; }
.hero-copy { max-width: 850px; margin: 0 auto; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; color: #c4c4cc; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.status-dot { width: .42rem; height: .42rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(52,211,153,.09), 0 0 12px rgba(52,211,153,.5); }
.hero h1 { margin: 1.6rem 0 1.5rem; font-size: clamp(4rem, 8vw, 7rem); line-height: .92; letter-spacing: -.072em; }
.hero h1 span, .section-heading h2 span { color: #a1a1aa; }
.hero-lede { max-width: 690px; margin: 0 auto; color: var(--muted); font-size: clamp(1.08rem, 1.9vw, 1.27rem); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 2rem; margin-top: 2.2rem; }
.text-link { display: inline-flex; align-items: center; gap: .65rem; color: #d4d4d8; font-size: .9rem; font-weight: 600; }
.text-link span { color: var(--blue-light); transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }
.trust-row { display: flex; align-items: center; justify-content: center; gap: 2rem; margin-top: 2.5rem; color: var(--dim); font-size: .76rem; }
.check { display: inline-grid; place-items: center; width: 1rem; height: 1rem; margin-right: .28rem; color: var(--green); font-style: normal; font-size: .7rem; border: 1px solid rgba(52,211,153,.35); border-radius: 50%; }

.product-frame { position: relative; margin-top: 5.5rem; overflow: hidden; min-height: 595px; border: 1px solid #34343a; border-radius: .8rem; background: #0c0c0e; box-shadow: 0 45px 100px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.02) inset; }
.product-frame::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(59,130,246,.05), transparent 28%, transparent 72%, rgba(139,92,246,.04)); }
.frame-topbar { position: relative; z-index: 3; height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 1rem; border-bottom: 1px solid var(--line); background: #0a0a0c; font-size: .68rem; }
.frame-brand { font-weight: 800; letter-spacing: -.04em; }.frame-brand span { color: var(--blue); }
.frame-workspace { padding: .35rem .7rem; border: 1px solid var(--line); border-radius: .28rem; color: #d4d4d8; }.frame-workspace span { margin-left: .7rem; color: var(--dim); }
.frame-actions { justify-self: end; display: flex; align-items: center; gap: .65rem; }.frame-actions > span { padding: .35rem .6rem; border-radius: .25rem; }
.saved { color: #9ca3af; }.saved i { display: inline-block; width: .35rem; height: .35rem; margin-right: .35rem; border-radius: 50%; background: var(--green); }.version { border: 1px solid var(--line); }.run { color: white; background: #7c3aed; }
.studio { position: relative; min-height: 547px; display: grid; grid-template-columns: 165px 1fr 210px; }
.studio-sidebar { z-index: 2; padding: 1rem .7rem; border-right: 1px solid var(--line); background: #0c0c0e; }
.tiny-label { display: block; margin-bottom: .65rem; color: #52525b; font-size: .54rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.variable { display: grid; grid-template-columns: 17px 1fr auto; align-items: center; gap: .35rem; padding: .48rem .42rem; color: #d4d4d8; font-size: .6rem; border-radius: .2rem; }
.variable:hover { background: var(--panel-2); }.variable b { color: #52525b; font-family: var(--mono); font-size: .48rem; font-weight: 400; }
.type-icon { display: grid; place-items: center; width: .9rem; height: .9rem; border-radius: .18rem; color: var(--violet); background: rgba(139,92,246,.13); font-style: normal; font-family: var(--mono); font-size: .48rem; }.type-icon.text { color: var(--blue-light); background: rgba(59,130,246,.13); }
.flow-list { margin: 2.5rem -.7rem 0; padding: 1rem .7rem 0; border-top: 1px solid var(--line); }.flow { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: .45rem; padding: .55rem .42rem; color: #71717a; font-size: .58rem; border-radius: .25rem; }.flow.active { color: #e4e4e7; background: #18181b; }.flow i { width: 5px; height: 5px; border-radius: 50%; background: #3f3f46; }.flow.active i { background: var(--blue); box-shadow: 0 0 6px var(--blue); }.flow b { color: var(--green); font-size: .38rem; }
.canvas { position: relative; min-width: 0; overflow: hidden; background-color: #141417; background-image: radial-gradient(#3f3f46 1px, transparent 1px); background-size: 18px 18px; }
.canvas::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 70%, rgba(9,9,11,.7)); }
.connections { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }.connections path { fill: none; stroke-width: 1.5; }.exec-line { stroke: #71717a; }.data-line { stroke: #3b82f6; stroke-dasharray: 4 4; opacity: .65; }.success-line { stroke: #34d399; }.danger-line { stroke: #f59e0b; }
.node { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 136px; overflow: hidden; border: 1px solid #3f3f46; border-radius: .3rem; background: #18181b; box-shadow: 0 9px 18px rgba(0,0,0,.3); font-size: .52rem; transform: translate(-50%,-50%); }
.node header { display: flex; align-items: center; gap: .35rem; padding: .48rem .55rem; color: #e4e4e7; border-bottom: 1px solid #303035; background: #202024; font-weight: 650; }.node > div { min-height: 25px; display: flex; align-items: center; gap: .3rem; padding: .25rem .45rem; color: #a1a1aa; }.node strong { margin-left: auto; color: #a1a1aa; font-weight: 400; }.node-icon { color: var(--blue-light); }.node-score .node-icon { color: var(--violet); }.node-approved .node-icon { color: var(--green); }.node-review .node-icon { color: var(--amber); }.node-decision { border-color: #2563eb; box-shadow: 0 0 0 1px rgba(37,99,235,.22), 0 10px 22px rgba(0,0,0,.3); }
.pin { display: inline-block; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }.pin.blue { color: var(--blue); }.pin.violet { color: var(--violet); }.pin.green { color: var(--green); }.pin.red { color: var(--red); }.pin.amber { color: var(--amber); }
.canvas-chip { position: absolute; z-index: 3; bottom: 1.1rem; left: 50%; display: flex; gap: .5rem; align-items: center; transform: translateX(-50%); padding: .5rem .75rem; color: #a1a1aa; border: 1px solid #333338; border-radius: 2rem; background: rgba(9,9,11,.88); backdrop-filter: blur(12px); font-size: .55rem; }.canvas-chip b { color: var(--green); font-family: var(--mono); font-weight: 500; }.pulse { width: .38rem; height: .38rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.inspector { z-index: 2; border-left: 1px solid var(--line); background: #0c0c0e; }.inspector-tabs { height: 38px; display: flex; align-items: center; justify-content: space-around; color: #52525b; border-bottom: 1px solid var(--line); font-size: .52rem; }.inspector-tabs b { padding: .38rem .5rem; color: #e4e4e7; border-radius: .2rem; background: var(--panel-2); }.inspector-body { padding: 1.1rem .85rem; }.inspector-body h3 { margin: 0 0 1.5rem; font-size: .78rem; }.inspector-body label { display: block; margin: .75rem 0 .3rem; color: #71717a; font-size: .5rem; }.field { display: flex; justify-content: space-between; padding: .5rem; color: #d4d4d8; border: 1px solid var(--line); border-radius: .25rem; background: #111113; font-size: .58rem; }.field span { color: #52525b; }.mono { font-family: var(--mono); }.validation-ok { display: flex; gap: .55rem; margin-top: 1.5rem; padding: .7rem; color: var(--green); border: 1px solid rgba(52,211,153,.18); border-radius: .3rem; background: rgba(6,78,59,.12); font-size: .54rem; }.validation-ok i { font-style: normal; }.validation-ok b,.validation-ok small { display: block; }.validation-ok small { margin-top: .18rem; color: #71717a; }

.outcome-strip { min-height: 120px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem max(1.5rem, calc((100vw - var(--max))/2)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0d0d0f; }
.outcome-strip p { margin: 0; color: #71717a; font-size: .82rem; }.outcome-strip div { display: flex; align-items: center; gap: 1.25rem; color: #a1a1aa; font-family: var(--mono); font-size: .63rem; letter-spacing: .08em; }.outcome-strip i { color: #3f3f46; font-style: normal; }
.section { width: min(calc(100% - 3rem), var(--max)); margin: 0 auto; padding: 8rem 0; }
.section-kicker { color: var(--blue-light); font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em; }
.problem-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 7rem; align-items: start; margin-top: 1.5rem; }
.problem h2, .section-heading h2, .security-copy h2, .use-cases h2, .cta h2 { margin: 0; font-size: clamp(2.7rem, 5vw, 4.7rem); line-height: 1.05; letter-spacing: -.055em; }.problem h2 span { color: var(--red); }.problem-copy { padding-top: .5rem; color: var(--muted); font-size: 1.05rem; line-height: 1.75; }.problem-copy p { margin: 0 0 1.4rem; }
.metric-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 5.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.metric-grid article { padding: 2.5rem 2rem 2.5rem 0; }.metric-grid article + article { padding-left: 2rem; border-left: 1px solid var(--line); }.metric-icon,.feature-icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .35rem; font-family: var(--mono); font-style: normal; }.red-bg { color: var(--red); background: rgba(244,63,94,.1); }.violet-bg { color: var(--violet); background: rgba(139,92,246,.11); }.green-bg { color: var(--green); background: rgba(16,185,129,.1); }.amber-bg { color: var(--amber); background: rgba(245,158,11,.1); }.metric-grid h3 { margin: 1.3rem 0 .65rem; font-size: 1.1rem; }.metric-grid p { margin: 0; color: var(--dim); line-height: 1.65; }

.capabilities { border-top: 1px solid var(--line); }.section-heading { display: grid; grid-template-columns: 1fr 400px; align-items: end; gap: 4rem; }.section-heading .section-kicker { margin-bottom: 1.2rem; }.section-heading > p { margin: 0 0 .5rem; color: var(--muted); line-height: 1.7; }
.capability-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; margin-top: 4.5rem; border: 1px solid var(--line); background: var(--line); }.capability { position: relative; min-height: 500px; padding: 3rem; overflow: hidden; background: #0d0d0f; }.capability-wide { grid-column: 1/-1; min-height: 520px; display: grid; grid-template-columns: .76fr 1.24fr; gap: 4rem; align-items: center; }.capability h3 { margin: 1.5rem 0 .9rem; font-size: 1.8rem; letter-spacing: -.03em; }.capability p { color: var(--muted); line-height: 1.7; }.cap-number { color: #52525b; font-family: var(--mono); font-size: .65rem; }.cap-copy { max-width: 390px; }.cap-copy ul { margin: 1.7rem 0 0; padding: 0; list-style: none; }.cap-copy li { margin: .7rem 0; color: #a1a1aa; font-size: .88rem; }.cap-copy li::before { content: "✓"; margin-right: .6rem; color: var(--green); }
.mini-canvas { position: relative; height: 320px; border: 1px solid #303035; border-radius: .5rem; background-color: #141417; background-image: radial-gradient(#34343a .8px, transparent .8px); background-size: 17px 17px; }.mini-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }.mini-canvas path { fill: none; stroke: #52525b; stroke-width: 1.4; }.mini-node { position: absolute; z-index: 2; width: 82px; padding: .7rem; border: 1px solid #3f3f46; border-radius: .25rem; background: #202024; color: #d4d4d8; font-size: .63rem; box-shadow: 0 10px 22px rgba(0,0,0,.35); }.mini-node b { margin-right: .35rem; color: var(--blue-light); }.mini-node.success b { color: var(--green); }.m1 { left: 4%; top: 42%; }.m2 { left: 30%; top: 18%; }.m3 { left: 57%; top: 42%; }.m4 { left: 80%; top: 18%; }
.feature-icon { margin-top: 3.2rem; }.compare { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 3rem; }.compare div { padding: 1rem; border: 1px solid var(--line); border-radius: .35rem; background: #111113; }.compare span,.compare b,.compare i { display: block; }.compare span { color: #71717a; font-size: .7rem; }.compare b { margin: .5rem 0 1rem; font-family: var(--mono); }.compare i { font-style: normal; font-size: .72rem; }.compare i.green { color: var(--green); }.compare i.amber { color: var(--amber); }
.approval { display: flex; align-items: center; gap: .75rem; margin-top: 3rem; padding: 1rem; border: 1px solid rgba(245,158,11,.2); border-radius: .35rem; background: rgba(120,53,15,.08); }.avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #27272a; color: #d4d4d8; font-size: .65rem; }.approval span:nth-child(2) { flex: 1; }.approval b,.approval small { display: block; }.approval b { font-size: .75rem; }.approval small { margin-top: .18rem; color: #71717a; font-size: .63rem; }.approval i { color: var(--green); font-style: normal; }
.capability-dark { background: linear-gradient(110deg,#0d0d0f 30%,#111827); }.capability-dark .text-link { margin-top: 1.5rem; }.timeline { overflow: hidden; border: 1px solid #303038; border-radius: .5rem; background: rgba(9,9,11,.7); box-shadow: 0 30px 60px rgba(0,0,0,.32); }.timeline-top { display: flex; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid var(--line); color: #71717a; font-family: var(--mono); font-size: .57rem; letter-spacing: .08em; }.timeline-top b { color: var(--green); font-weight: 500; }.timeline ol { margin: 0; padding: 1rem; list-style: none; }.timeline li { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: .65rem; min-height: 58px; position: relative; }.timeline li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 42px; bottom: -16px; width: 1px; background: #3f3f46; }.timeline li > i { display: grid; place-items: center; width: 23px; height: 23px; z-index: 2; border: 1px solid #3f3f46; border-radius: 50%; background: #111113; color: #71717a; font-style: normal; font-size: .6rem; }.timeline .done > i { color: var(--green); border-color: rgba(52,211,153,.3); }.timeline .active > i { color: white; border-color: var(--blue); background: var(--blue); box-shadow: 0 0 16px rgba(59,130,246,.4); }.timeline b,.timeline small { display: block; }.timeline b { font-size: .72rem; }.timeline small { margin-top: .2rem; color: #71717a; font-family: var(--mono); font-size: .58rem; }.timeline time { color: #52525b; font-family: var(--mono); font-size: .55rem; }

.security { padding-top: 2rem; }.security-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 6rem; padding: 5rem; border-radius: .8rem; background: #e4e4e7; color: #18181b; }.security-copy .section-kicker { color: #2563eb; }.security-copy h2 { margin: 1.2rem 0; font-size: clamp(2.6rem,4.3vw,4rem); }.security-copy p { color: #52525b; line-height: 1.7; }.security-copy .button { margin-top: 1.3rem; background: #18181b; color: white; }.security-list article { display: grid; grid-template-columns: 35px 1fr; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid #b9b9bf; }.security-list i { color: #71717a; font-family: var(--mono); font-style: normal; font-size: .65rem; }.security-list h3 { margin: 0; font-size: 1rem; }.security-list p { margin: .4rem 0 0; color: #71717a; font-size: .88rem; }

.use-cases h2 { margin-top: 1rem; max-width: 720px; }.case-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 4rem; border-top: 1px solid var(--line); }.case-grid article { position: relative; min-height: 280px; padding: 2rem 1.6rem 2rem 0; border-bottom: 1px solid var(--line); }.case-grid article + article { padding-left: 1.6rem; border-left: 1px solid var(--line); }.case-grid span { color: #52525b; font-family: var(--mono); font-size: .65rem; }.case-grid h3 { margin: 3.5rem 0 .8rem; font-size: 1.2rem; }.case-grid p { color: #71717a; font-size: .9rem; line-height: 1.65; }.case-grid i { position: absolute; right: 1.5rem; top: 2rem; color: #52525b; font-style: normal; }

.cta { position: relative; width: 100%; max-width: none; margin: 0; padding: 9rem 1.5rem; overflow: hidden; text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0b0b0d; }.cta-content { position: relative; z-index: 2; max-width: 890px; margin: 0 auto; }.cta h2 { margin: 1.5rem 0; }.cta h2 span { color: var(--blue-light); }.cta-content > p { max-width: 680px; margin: 0 auto; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }.demo-form { max-width: 565px; display: grid; grid-template-columns: 1fr auto; gap: .7rem; margin: 2.5rem auto .9rem; }.demo-form input { min-width: 0; padding: 0 1rem; color: white; border: 1px solid #3f3f46; border-radius: .42rem; outline: none; background: #18181b; }.demo-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }.form-note { font-size: .72rem !important; color: #52525b !important; }.form-note.success { color: var(--green) !important; }
.cta-orbit { position: absolute; width: 760px; height: 760px; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(59,130,246,.08); border-radius: 50%; }.cta-orbit::before,.cta-orbit::after { content: ""; position: absolute; inset: 15%; border: 1px solid rgba(59,130,246,.09); border-radius: 50%; }.cta-orbit::after { inset: 32%; }.cta-orbit span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 14px var(--blue); }.cta-orbit span:nth-child(1) { left: 10%; top: 28%; }.cta-orbit span:nth-child(2) { right: 15%; top: 60%; background: var(--violet); }.cta-orbit span:nth-child(3) { left: 45%; bottom: 4%; background: var(--green); }

footer { width: min(calc(100% - 3rem), var(--max)); margin: 0 auto; padding: 4rem 0 2rem; }.footer-main { display: flex; justify-content: space-between; gap: 3rem; }.footer-main p { color: #71717a; font-size: .85rem; }.footer-links { display: flex; gap: 2rem; color: #a1a1aa; font-size: .8rem; }.footer-bottom { display: flex; justify-content: space-between; margin-top: 4rem; padding-top: 1.5rem; color: #52525b; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .62rem; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; }.button,.text-link span { transition: none; } }

@media (max-width: 960px) {
  .desktop-nav,.site-header > .button { display: none; }.menu-button { width: 40px; height: 40px; display: grid; place-content: center; gap: 6px; border: 0; background: transparent; cursor: pointer; }.menu-button span { display: block; width: 21px; height: 1px; background: white; }.mobile-nav { position: absolute; top: 66px; right: 0; width: min(290px,calc(100vw - 3rem)); padding: 1rem; border: 1px solid var(--line); border-radius: .5rem; background: #111113; box-shadow: 0 25px 50px rgba(0,0,0,.45); }.mobile-nav.open { display: grid; }.mobile-nav a { padding: .8rem; color: #d4d4d8; border-bottom: 1px solid var(--line); }
  .studio { grid-template-columns: 130px 1fr; }.inspector { display: none; }.product-frame { min-height: 520px; }.studio { min-height: 472px; }.node { width: 118px; }.outcome-strip { align-items: flex-start; flex-direction: column; }.problem-grid,.section-heading { grid-template-columns: 1fr; gap: 2rem; }.metric-grid { grid-template-columns: 1fr; }.metric-grid article,.metric-grid article + article { padding: 2rem 0; border-left: 0; border-bottom: 1px solid var(--line); }.capability-wide { grid-template-columns: 1fr; }.security-panel { grid-template-columns: 1fr; gap: 3rem; padding: 3.5rem; }.case-grid { grid-template-columns: repeat(2,1fr); }.case-grid article:nth-child(3) { border-left: 0; padding-left: 0; }.footer-main { align-items: flex-start; flex-direction: column; }.footer-links { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .site-header,.hero,.section,footer { width: min(calc(100% - 2rem), var(--max)); }.hero { padding: 5rem 0 4rem; }.hero h1 { font-size: clamp(3.4rem,17vw,5rem); }.hero-actions { flex-direction: column; gap: 1.2rem; }.trust-row { align-items: flex-start; flex-direction: column; width: fit-content; margin: 2rem auto 0; gap: .65rem; }.product-frame { min-height: 470px; margin-top: 4rem; }.frame-topbar { grid-template-columns: 1fr auto; }.frame-workspace,.studio-sidebar { display: none; }.studio { display: block; min-height: 422px; }.canvas { height: 422px; }.frame-actions .saved,.frame-actions .version { display: none; }.node { width: 104px; font-size: .45rem; }.node header { padding: .4rem; }.node > div { min-height: 22px; padding: .2rem .35rem; }.node-start { --x: 13% !important; }.node-score { --x: 38% !important; }.node-decision { --x: 63% !important; }.node-approved,.node-review { --x: 88% !important; }.canvas-chip { white-space: nowrap; }.outcome-strip div { width: 100%; justify-content: space-between; gap: .3rem; font-size: .48rem; }.section { padding: 6rem 0; }.problem h2,.section-heading h2,.security-copy h2,.use-cases h2,.cta h2 { font-size: 2.65rem; }.capability-grid { display: block; border: 1px solid var(--line); }.capability { min-height: 0; padding: 2rem; border-bottom: 1px solid var(--line); }.capability-wide { display: block; }.mini-canvas { height: 240px; margin-top: 2.5rem; }.mini-node { width: 66px; padding: .55rem; font-size: .5rem; }.capability h3 { font-size: 1.55rem; }.capability:not(.capability-wide) { min-height: 450px; }.timeline { margin-top: 2.5rem; }.security { width: 100%; }.security-panel { padding: 3rem 1.5rem; border-radius: 0; }.case-grid { grid-template-columns: 1fr; }.case-grid article,.case-grid article + article { padding: 2rem 0; border-left: 0; }.case-grid h3 { margin-top: 2rem; }.cta { width: 100%; padding: 7rem 1rem; }.demo-form { grid-template-columns: 1fr; }.demo-form input { min-height: 50px; }.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }.footer-bottom { align-items: flex-start; flex-direction: column; gap: .8rem; }
}

.product-screenshot { margin: 4rem 0 0; scroll-margin-top: 1.5rem; }
.product-screenshot-scroll { width: 100%; }
.product-screenshot img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: .8rem; }
@media (max-width: 640px) {
  .product-screenshot { margin-top: 3rem; }
}

/* Keep the flow readable on narrow screens without widening the page. */
.product-screenshot-scroll { overflow-x: auto; }
.product-screenshot picture { display: block; min-width: 1000px; }
.flow-caption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .85rem; color: var(--muted); font-size: .875rem; }
.flow-motion-toggle { flex-shrink: 0; padding: .5rem .75rem; border: 1px solid var(--line-bright); border-radius: .4rem; background: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
.flow-motion-toggle:hover { border-color: var(--blue-light); }
.flow-motion-toggle:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }
.flow-motion-toggle[hidden] { display: none; }
@media (max-width: 600px) { .flow-caption { align-items: flex-start; font-size: .8rem; } }


/* Risk policy demonstration, styled after the product's semantic nodes. */
.capability-product { display: block; padding: 2.5rem; }
.capability-product .cap-copy { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
.capability-product .cap-number { grid-column: 1 / -1; }
.capability-product .cap-copy p { align-self: center; }
.risk-demo { margin-top: 1.5rem; border: 1px solid #3f3f46; border-radius: 10px; overflow: hidden; background: #18181b; }
.risk-demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: #101012; font-size: 16px; font-weight: 600; }
.risk-demo-bar small { margin-left: 12px; color: var(--muted); font-size: 12px; font-weight: 400; }
.risk-play { padding: 7px 10px; border: 1px solid #3f3f46; border-radius: 5px; background: #202024; color: #e4e4e7; font: 13px var(--font); cursor: pointer; }
.risk-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 20px; border-bottom: 1px solid #303036; }
.risk-cases button { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid #3f3f46; border-radius: 6px; background: #202024; color: #a1a1aa; font: 14px var(--font); cursor: pointer; text-align: left; }
.risk-cases b { margin-left: auto; font-weight: 500; white-space: nowrap; }
.risk-cases button[aria-pressed=true] { border-color: #a78bfa; background: #2b243a; color: #fafafa; }
.risk-demo button:focus-visible { outline: 2px solid #93c5fd; outline-offset: 3px; }
.risk-canvas-scroll { overflow-x: auto; }.risk-canvas { display: block; width: 100%; min-width: 690px; height: auto; }
.risk-canvas text { fill: #e4e4e7; font: 14px var(--font); }.risk-canvas .risk-node-title { fill: white; font-size: 14px; font-weight: 600; }.risk-node > rect { fill: #09090b; stroke: #52525b; }.risk-canvas .risk-score { font: 18px var(--mono); }.risk-canvas .risk-legend { fill: #a1a1aa; font-size: 12px; }.risk-node { transition: opacity .4s; }
.risk-approval,.risk-review { opacity: .35; }
.risk-demo[data-step="1"] .risk-in,.risk-demo[data-step="2"] .risk-in,.risk-demo[data-step="3"] .risk-in { stroke: #d4d4d8; }
.risk-demo[data-step="2"] .risk-condition > rect,.risk-demo[data-step="3"] .risk-condition > rect { stroke: #f59e0b; stroke-width: 2px; }
.risk-demo[data-step="3"][data-case="approve"] .risk-approval,.risk-demo[data-step="3"][data-case="review"] .risk-review { opacity: 1; }
.risk-demo[data-step="3"][data-case="approve"] .risk-yes { stroke: #6ee7b7; stroke-width: 3px; }.risk-demo[data-step="3"][data-case="review"] .risk-no { stroke: #fcd34d; stroke-width: 3px; }
.risk-result { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px; background: #111115; border-top: 1px solid #34343c; }.risk-result-label { display: block; color: #6ee7b7; font: 12px var(--mono); letter-spacing: .08em; margin-bottom: 8px; }.risk-reason { font-size: 16px; font-weight: 500; }.risk-step { color: #a1a1aa; font-size: 12px; white-space: nowrap; }.risk-demo[data-case="review"] .risk-result-label { color: #fcd34d; }
@media(max-width:640px) { .capability-product { padding: 1.25rem; }.capability-product .cap-copy { display: block; }.risk-demo-bar { flex-wrap: wrap; padding: 14px; }.risk-demo-bar small { display: block; margin: 4px 0 0; }.risk-cases { padding: 12px; gap: 8px; }.risk-cases button { flex-wrap: wrap; gap: 6px; font-size: 13px; }.risk-cases b { margin-left: 0; width: 100%; }.risk-result { padding: 16px; }.risk-step { display: none; } }
@media(prefers-reduced-motion:reduce) { .risk-node { transition: none; } }

.risk-demo[data-step="1"] .risk-calculation > rect,
.risk-demo[data-step="2"] .risk-calculation > rect,
.risk-demo[data-step="3"] .risk-calculation > rect { stroke: #60a5fa; stroke-width: 2px; }
.risk-canvas .risk-sum,.risk-canvas .risk-ratio,.risk-canvas .risk-percent { fill: #93c5fd; font-weight: 600; }

/* Account entry points */
.header-auth,.signup-actions { display:flex; align-items:center; gap:1.2rem; }
.login-link { font-size:.85rem; color:#d4d4d8; white-space:nowrap; }
.login-link:hover { color:#fff; }
.signup-actions { justify-content:center; flex-wrap:wrap; margin:2rem auto 1rem; }
.cta-content > .free-plan-note { font-size:.86rem; color:#a1a1aa; }
.cta-content > .upgrade-note { margin-top:.8rem; font-size:.8rem; }
.upgrade-note a { color:var(--blue-light); text-decoration:underline; text-underline-offset:3px; }
@media(max-width:900px) { .header-auth { display:none; } }