@font-face { font-family: Switzer; src: url('./assets/Switzer-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Switzer; src: url('./assets/Switzer-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Switzer; src: url('./assets/Switzer-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('./assets/JetBrainsMono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root { color-scheme: dark; --yellow: #ffe600; --white: #f2f2ee; --muted: #9a9a9a; --line: #262626; background: #000; color: var(--white); font-family: Switzer, Arial, sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 42px; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img, svg { display: block; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--yellow); color: #000; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 7px; }
.wrap { width: min(1392px, calc(100% - 128px)); margin-inline: auto; }
.yellow { color: var(--yellow); }
.muted { color: #8f8f8f; }
.muted-heading { color: #777; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 5; padding: 12px; background: var(--yellow); color: #000; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.header { height: 112px; display: flex; align-items: center; border-bottom: 1px solid var(--line); gap: 40px; }
.brand img { width: 148px; height: auto; }
.header nav { display: flex; gap: 36px; margin-left: auto; color: #b3b3b3; font-size: 13px; }
.header nav a { transition: color .2s; }
.header nav a:hover { color: var(--white); }
.launch-status { color: var(--yellow); font-size: 13px; padding-left: 38px; margin-left: 8px; border-left: 1px solid #333; }
.hero { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); align-items: center; gap: 8px; min-height: min(830px, calc(100svh - 112px)); padding-top: 58px; padding-bottom: 82px; }
h1 { font-size: clamp(74px, 6.9vw, 106px); letter-spacing: -.06em; font-weight: 500; line-height: 1.035; }
.hero-copy > p { margin-top: 35px; font-size: 19px; color: #a5a5a5; line-height: 1.7; letter-spacing: -.012em; }
.text-link { display: inline-flex; align-items: center; gap: 30px; font-size: 14px; margin-top: 45px; padding-bottom: 12px; border-bottom: 1px solid #525252; transition: color .2s, border-color .2s; }
.text-link:hover { color: var(--yellow); border-color: var(--yellow); }
.text-link svg { transition: transform .2s; }
.text-link:hover svg { transform: translateY(3px); }
.hero-scene { min-width: 0; margin: 0 -20px 0 -12px; align-self: center; }
.assessment-scene { width: 100%; height: auto; overflow: visible; }
.scene-file { fill: #c4c4c4; font: 13px 'JetBrains Mono', monospace; }
.scene-code { fill: #d1d1cd; font: 14px 'JetBrains Mono', monospace; white-space: pre; }
.scene-app-title { fill: #eeeee9; font: 500 25px Switzer, sans-serif; letter-spacing: -.6px; }
.scene-secondary { fill: #919191; font: 13px Switzer, sans-serif; }
.scene-project { fill: #d4d4cf; font: 15px Switzer, sans-serif; }
.scene-request { fill: #e7db70; font: 13px 'JetBrains Mono', monospace; }
.hero-scene figcaption { display: flex; justify-content: space-between; gap: 20px; margin: 18px 40px 0 52px; padding-top: 20px; border-top: 1px solid #242424; color: #aaa; font-size: 12px; }
.hero-scene figcaption span:last-child { color: #888; font-size: 10px; align-self: center; }
.hero-scene { --assessment-cycle: 6s; }
.test-path { stroke-dasharray: 1; stroke-dashoffset: 0; animation: trace-test var(--assessment-cycle) linear infinite; }
.test-packet { opacity: 0; stroke-dasharray: .035 .965; animation: test-packet var(--assessment-cycle) linear infinite; }
.agent-pulse { opacity: 0; transform-origin: 0 0; animation: agent-pulse var(--assessment-cycle) ease-out infinite; }
.runtime-highlight { fill: #ffe600; fill-opacity: .055; stroke: #817722; }
.scene-response { font: 12px 'JetBrains Mono', monospace; }
.security-pending { fill: #aaa; opacity: 0; animation: pending-test var(--assessment-cycle) linear infinite; }
.security-finding { fill: #e7db70; animation: reveal-result var(--assessment-cycle) linear infinite; }
@keyframes trace-test { 0%, 23% { stroke-dashoffset: 1; opacity: .2; } 26% { opacity: 1; } 50%, 82% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: .15; } }
@keyframes test-packet { 0%, 26% { stroke-dashoffset: .04; opacity: 0; } 27% { stroke-dashoffset: .04; opacity: 1; } 51% { stroke-dashoffset: -1; opacity: 1; } 52%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes agent-pulse { 0%, 33% { opacity: 0; transform: scale(1); } 35% { opacity: .7; transform: scale(1); } 46%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes pending-test { 0%, 46%, 97%, 100% { opacity: 1; } 50%, 91% { opacity: 0; } }
@keyframes reveal-result { 0%, 50%, 94%, 100% { opacity: 0; } 55%, 86% { opacity: 1; } }
.approach { border-top: 1px solid var(--line); padding-top: 110px; padding-bottom: 132px; }
.section-intro { display: grid; grid-template-columns: 1.38fr 1fr; gap: 85px; align-items: start; margin-bottom: 83px; }
h2 { font-size: clamp(36px, 3.65vw, 56px); letter-spacing: -.045em; line-height: 1.12; font-weight: 500; }
.section-intro > p { color: #aaa; font-size: 17px; line-height: 1.8; max-width: 455px; padding-top: 4px; }
.workflow { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); gap: 64px; align-items: center; }
.workflow-tabs { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.workflow-tab { display: block; position: relative; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 34px 48px 34px 0; cursor: pointer; }
.workflow-tab:first-child { border-top: 1px solid var(--line); }
.tab-title { display: block; font-size: 24px; letter-spacing: -.025em; color: #929292; line-height: 1.2; transition: color .2s; }
.tab-description { display: block; margin-top: 12px; font-size: 15px; line-height: 1.7; color: #929292; max-width: 340px; }
.workflow-tab > svg { position: absolute; right: 3px; top: 36px; color: #4f4f4f; transition: color .2s, transform .2s; }
.workflow-tab[aria-selected='true'] .tab-title { color: #fff; }
.workflow-tab[aria-selected='true'] > svg { color: var(--yellow); transform: translateX(4px); }
.workflow-tab[aria-selected='true'] { border-bottom-color: #7c731d; }
.workflow-tab:hover .tab-title { color: #fff; }
.workflow-preview { min-width: 0; border: 1px solid #2b2b2b; background: #090909; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 28px; border-bottom: 1px solid #282828; font-size: 12px; color: #c2c2c2; }
.example-label { color: #898989; font-size: 10px; white-space: nowrap; }
.workflow-panel { min-height: 604px; padding: 30px 30px 25px; display: flex; flex-direction: column; justify-content: space-between; }
.repo-heading { display: flex; align-items: center; gap: 13px; padding-bottom: 23px; border-bottom: 1px solid #222; font-size: 16px; }
.repo-heading strong { font-weight: 500; }
.repository-demo { --repository-cycle: 20s; position: relative; display: grid; margin-top: 23px; }
.repository-tree { position: absolute; inset: 0; padding-top: 24px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #999; line-height: 2.5; opacity: 0; animation: repository-tree var(--repository-cycle) linear infinite; }
.tree-folder { color: #d1d1d1; }
.tree-indent { display: grid; margin-left: 6px; padding-left: 23px; border-left: 1px solid #2c2c2c; }
.tree-indent > :nth-child(n+2) { padding-left: 21px; }
.file-to-open { display: flex; align-items: center; justify-content: space-between; padding-right: 15px; color: #eee; border-left: 2px solid var(--yellow); background: #ffe60009; animation: select-file var(--repository-cycle) ease infinite; }
.file-to-open svg { color: var(--yellow); }
.file-editor { position: relative; min-width: 0; min-height: 418px; overflow: hidden; border: 1px solid #383838; background: #080808; animation: open-file var(--repository-cycle) cubic-bezier(.3, 0, .2, 1) infinite; }
.editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 49px; padding-inline: 20px; border-bottom: 1px solid #2b2b2b; background: #101010; }
.editor-heading > span { display: flex; gap: 12px; align-items: center; color: #d0d0d0; font: 12px 'JetBrains Mono', monospace; }
.editor-heading > span svg { color: #888; }
.editor-status { display: grid; text-align: right; font-size: 11px; white-space: nowrap; }
.editor-status > span { grid-area: 1 / 1; }
.status-inspecting { color: #a3a3a3; opacity: 0; animation: inspecting-query var(--repository-cycle) linear infinite; }
.status-risk { color: #ff8488; opacity: 0; animation: query-risk var(--repository-cycle) linear infinite; }
.status-fix { color: var(--yellow); animation: query-fix var(--repository-cycle) linear infinite; }
.query-code { position: relative; display: grid; padding-block: 20px; overflow: hidden; }
.query-before, .query-after { grid-area: 1 / 1; min-width: 0; }
.query-before { opacity: 0; animation: original-query var(--repository-cycle) linear infinite; }
.query-after { animation: query-fix var(--repository-cycle) linear infinite; }
.query-line { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 17px; padding-inline: 18px; font: 12px/27px 'JetBrains Mono', monospace; color: #d5d5d2; }
.query-line > span { color: #929292; text-align: right; user-select: none; }
.query-line > code { white-space: pre; font: inherit; }
.syntax-keyword { color: #959595; }
.vulnerable-line { animation: vulnerable-line var(--repository-cycle) linear infinite; border-left: 2px solid transparent; padding-left: 16px; }
.untrusted-input { animation: tainted-input var(--repository-cycle) linear infinite; }
.fixed-line { border-left: 2px solid #c4b222; padding-left: 16px; background: #ffe60009; }
.bound-parameter { color: var(--yellow); }
.query-scan { position: absolute; top: 0; left: 0; right: 0; height: 40px; background: linear-gradient(transparent, #ffe6000d); border-bottom: 1px solid #ffe60070; opacity: 0; animation: scan-query var(--repository-cycle) linear infinite; }
.query-explanation { display: grid; border-top: 1px solid #2b2b2b; margin-inline: 20px; padding-block: 21px; }
.query-explanation > div { grid-area: 1 / 1; display: flex; align-items: flex-start; gap: 13px; }
.query-explanation svg { flex-shrink: 0; margin-top: 1px; }
.query-explanation strong { display: block; font-size: 15px; font-weight: 500; letter-spacing: -.015em; }
.query-explanation p { font-size: 12px; color: #a5a5a5; line-height: 1.7; margin-top: 7px; max-width: 440px; }
.query-explanation p code { color: #d4d4d0; font-size: .95em; }
.explanation-inspecting { color: #ccc; opacity: 0; animation: inspecting-query var(--repository-cycle) linear infinite; }
.analysis-indicator { width: 10px; height: 10px; margin: 5px 5px 0; border: 1px solid var(--yellow); border-radius: 50%; flex-shrink: 0; }
.explanation-risk { color: #ff8488; opacity: 0; animation: query-risk var(--repository-cycle) linear infinite; }
.sql-flag { transform-origin: 3px 22px; animation: sql-flag var(--repository-cycle) ease-out infinite; }
.explanation-fix { color: var(--yellow); animation: query-fix var(--repository-cycle) linear infinite; }
@keyframes repository-tree { 0%, 13%, 99%, 100% { opacity: 1; transform: none; } 21%, 95% { opacity: 0; transform: scale(.985); } }
@keyframes select-file { 0%, 3%, 100% { background: transparent; border-color: transparent; } 9%, 95% { background: #ffe60009; border-color: var(--yellow); } }
@keyframes open-file { 0%, 13%, 100% { opacity: 0; clip-path: inset(21% 0 71% 0); transform: scale(.96); } 16% { opacity: 1; clip-path: inset(21% 0 71% 0); transform: scale(.96); } 23%, 91% { opacity: 1; clip-path: inset(0); transform: none; } 98% { opacity: 0; clip-path: inset(21% 0 71% 0); transform: scale(.96); } }
@keyframes inspecting-query { 0%, 39%, 99%, 100% { opacity: 1; } 44%, 96% { opacity: 0; } }
@keyframes scan-query { 0%, 23% { opacity: 0; transform: translateY(4px); } 25% { opacity: 1; transform: translateY(4px); } 40% { opacity: 1; transform: translateY(195px); } 43%, 100% { opacity: 0; transform: translateY(205px); } }
@keyframes original-query { 0%, 67%, 99%, 100% { opacity: 1; } 71%, 96% { opacity: 0; } }
@keyframes vulnerable-line { 0%, 40%, 97%, 100% { background: transparent; border-color: transparent; } 45%, 91% { background: #ff646910; border-color: #ff6469; } }
@keyframes tainted-input { 0%, 40%, 97%, 100% { color: #d5d5d2; } 45%, 91% { color: #ff8488; } }
@keyframes query-risk { 0%, 41%, 70%, 100% { opacity: 0; } 45%, 65% { opacity: 1; } }
@keyframes sql-flag { 0%, 41%, 100% { transform: translateY(3px) scale(.7); } 45% { transform: translateY(-1px) scale(1.1); } 49%, 95% { transform: none; } }
@keyframes query-fix { 0%, 68%, 99%, 100% { opacity: 0; } 73%, 94% { opacity: 1; } }
[data-in-view='false'] *, [data-in-view='false'] *::before, [data-in-view='false'] *::after,
html[data-page-hidden='true'] *, html[data-page-hidden='true'] *::before, html[data-page-hidden='true'] *::after { animation-play-state: paused !important; }
.preview-caption { font-size: 13px; line-height: 1.65; color: #929292; padding-top: 23px; margin-top: 17px; border-top: 1px solid #252525; }
.runtime-demo, .delivery-demo { position: relative; display: grid; min-width: 0; margin-top: 23px; }
.runtime-demo { --runtime-cycle: 18s; }
.runtime-build, .runtime-assessment { grid-area: 1 / 1; min-width: 0; min-height: 418px; border: 1px solid #383838; background: #080808; }
.simulation-heading { min-height: 49px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 20px; border-bottom: 1px solid #2b2b2b; color: #b8b8b8; font-size: 11px; background: #101010; }
.simulation-heading > span:first-child { font-family: 'JetBrains Mono', monospace; }
.build-state, .review-state { display: grid; text-align: right; }
.build-state > span, .review-state > span { grid-area: 1 / 1; }
.runtime-build { position: relative; opacity: 0; display: flex; flex-direction: column; animation: environment-build var(--runtime-cycle) linear infinite; }
.build-starting { opacity: 0; animation: environment-starting var(--runtime-cycle) linear infinite; }
.build-ready { color: var(--yellow); animation: environment-ready var(--runtime-cycle) linear infinite; }
.build-body { padding: 28px; display: flex; flex-direction: column; justify-content: center; flex: 1; }
.build-body > img { margin-bottom: 23px; }
.build-body h3, .assessment-title h3 { font-size: 27px; font-weight: 500; letter-spacing: -.035em; line-height: 1.2; }
.build-body > p { font-size: 13px; line-height: 1.7; color: #999; margin-top: 12px; }
.build-steps { display: grid; gap: 18px; margin-top: 34px; }
.build-step { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12px; color: #d3d3d3; }
.build-step > span:last-child { font: 10px 'JetBrains Mono', monospace; color: #a8a8a8; }
.build-step-check { color: var(--yellow); }
.build-checkout { animation: checkout-done var(--runtime-cycle) linear infinite; }
.build-dependencies { animation: dependencies-done var(--runtime-cycle) linear infinite; }
.build-start { animation: application-started var(--runtime-cycle) linear infinite; }
.build-progress { height: 2px; background: #262626; }
.build-progress > span { display: block; height: 100%; background: var(--yellow); transform-origin: left; animation: build-progress var(--runtime-cycle) linear infinite; }
.runtime-assessment { animation: environment-testing var(--runtime-cycle) linear infinite; }
.sandbox-ready { display: inline-flex; align-items: center; gap: 7px; color: #d2d2c8; white-space: nowrap; }
.sandbox-ready > span { width: 5px; height: 5px; border-radius: 50%; background: var(--yellow); }
.assessment-body { padding: 25px 25px 19px; }
.assessment-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.assessment-title > span { color: #999; font-size: 11px; white-space: nowrap; }
.request-exchange { display: flex; align-items: center; gap: 14px; margin: 30px 0 26px; }
.request-exchange > span { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; white-space: nowrap; color: #b8b8b8; }
.request-wire { flex: 1; height: 1px; position: relative; background: #393939; min-width: 20px; }
.request-wire > span { position: absolute; width: 9px; height: 3px; top: -1px; background: var(--yellow); opacity: 0; }
.baseline-packet { animation: baseline-packet var(--runtime-cycle) linear infinite; }
.probe-packet { animation: probe-packet var(--runtime-cycle) linear infinite; }
.http-tests { border-block: 1px solid #303030; }
.http-test { position: relative; padding: 17px 12px; }
.http-test + .http-test { border-top: 1px solid #303030; }
.http-test-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; }
.http-test-label > span:last-child { font: 11px 'JetBrains Mono', monospace; white-space: nowrap; }
.http-test-label > span:last-child > span { color: #b2b2b2; }
.http-test > code { display: block; font-size: 11px; line-height: 1.7; color: #a5a5a5; margin-top: 9px; }
.baseline-response { color: #e0e0d8; animation: baseline-response var(--runtime-cycle) linear infinite; }
.injection-test { animation: injection-request var(--runtime-cycle) linear infinite; }
.probe-response { color: #ff8488; animation: probe-response var(--runtime-cycle) linear infinite; }
.probe-response > span { color: #ff8488 !important; }
.request-progress { height: 1px; background: var(--yellow); position: absolute; bottom: 0; left: 0; width: 100%; opacity: 0; transform-origin: left; }
.baseline-progress { animation: baseline-progress var(--runtime-cycle) linear infinite; }
.probe-progress { animation: probe-progress var(--runtime-cycle) linear infinite; }
.runtime-conclusion { display: grid; padding-top: 23px; }
.runtime-conclusion > div { grid-area: 1 / 1; display: flex; align-items: flex-start; gap: 12px; }
.runtime-conclusion strong { font-size: 14px; font-weight: 500; }
.runtime-conclusion p { margin-top: 7px; font-size: 12px; line-height: 1.7; color: #a5a5a5; }
.runtime-conclusion svg { flex-shrink: 0; }
.runtime-working { color: #ccc; opacity: 0; animation: runtime-working var(--runtime-cycle) linear infinite; }
.runtime-evidence { color: #ff8488; animation: runtime-evidence var(--runtime-cycle) linear infinite; }
@keyframes environment-build { 0%, 24%, 100% { opacity: 1; transform: none; } 29%, 96% { opacity: 0; transform: scale(.97); } }
@keyframes environment-starting { 0%, 18%, 100% { opacity: 1; } 20%, 97% { opacity: 0; } }
@keyframes environment-ready { 0%, 20%, 100% { opacity: 0; } 22%, 95% { opacity: 1; } }
@keyframes checkout-done { 0%, 2%, 100% { opacity: 0; transform: translateY(5px); } 6%, 97% { opacity: 1; transform: none; } }
@keyframes dependencies-done { 0%, 9%, 100% { opacity: 0; transform: translateY(5px); } 13%, 97% { opacity: 1; transform: none; } }
@keyframes application-started { 0%, 17%, 100% { opacity: 0; transform: translateY(5px); } 21%, 97% { opacity: 1; transform: none; } }
@keyframes build-progress { 0%, 100% { transform: scaleX(0); } 6% { transform: scaleX(.25); } 14% { transform: scaleX(.62); } 22%, 96% { transform: scaleX(1); } }
@keyframes environment-testing { 0%, 26%, 100% { opacity: 0; transform: translateY(10px); } 31%, 95% { opacity: 1; transform: none; } }
@keyframes baseline-packet { 0%, 32% { left: 0; opacity: 0; } 33% { left: 0; opacity: 1; } 42% { left: calc(100% - 9px); opacity: 1; } 43%, 100% { left: calc(100% - 9px); opacity: 0; } }
@keyframes probe-packet { 0%, 50% { left: 0; opacity: 0; } 51% { left: 0; opacity: 1; } 62% { left: calc(100% - 9px); opacity: 1; } 63%, 100% { left: calc(100% - 9px); opacity: 0; } }
@keyframes baseline-response { 0%, 42%, 100% { opacity: 0; } 45%, 96% { opacity: 1; } }
@keyframes injection-request { 0%, 46%, 100% { opacity: .3; background: transparent; } 50%, 63% { opacity: 1; background: transparent; } 67%, 96% { opacity: 1; background: #ff646908; } }
@keyframes probe-response { 0%, 63%, 100% { opacity: 0; } 66%, 96% { opacity: 1; } }
@keyframes baseline-progress { 0%, 31% { transform: scaleX(0); opacity: 0; } 33% { transform: scaleX(0); opacity: .8; } 42% { transform: scaleX(1); opacity: .8; } 46%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes probe-progress { 0%, 49% { transform: scaleX(0); opacity: 0; } 51% { transform: scaleX(0); opacity: .8; } 63% { transform: scaleX(1); opacity: .8; } 67%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes runtime-working { 0%, 65%, 100% { opacity: 1; } 68%, 96% { opacity: 0; } }
@keyframes runtime-evidence { 0%, 67%, 100% { opacity: 0; transform: translateY(4px); } 71%, 94% { opacity: 1; transform: none; } }
.delivery-demo { --delivery-cycle: 20s; }
.finding-review, .finding-handoff { grid-area: 1 / 1; min-width: 0; min-height: 418px; }
.finding-review { border: 1px solid #383838; background: #080808; display: flex; flex-direction: column; opacity: 0; animation: specialist-review var(--delivery-cycle) linear infinite; }
.review-pending { opacity: 0; animation: review-pending var(--delivery-cycle) linear infinite; }
.review-approved { color: var(--yellow); animation: review-approved var(--delivery-cycle) linear infinite; }
.review-body { padding: 26px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.finding-category { color: #ff8488; font-size: 11px; margin-bottom: 12px; }
.review-body h3 { font-size: 30px; font-weight: 500; letter-spacing: -.035em; line-height: 1.15; }
.review-body > code { display: block; color: #aaa; font-size: 11px; margin-top: 14px; }
.review-checklist { border-top: 1px solid #2b2b2b; padding-top: 22px; margin-top: 26px; display: grid; gap: 18px; }
.review-check { display: flex; gap: 13px; }
.review-check-icon { color: var(--yellow); font-size: 15px; }
.review-check strong { font-weight: 500; font-size: 13px; display: block; }
.review-check div > span { display: block; font-size: 11px; line-height: 1.6; margin-top: 5px; color: #a4a4a4; }
.review-reproduction { animation: review-reproduction var(--delivery-cycle) linear infinite; }
.review-code { animation: review-code var(--delivery-cycle) linear infinite; }
.review-fix { animation: review-fix var(--delivery-cycle) linear infinite; }
.finding-handoff { animation: finding-handoff var(--delivery-cycle) linear infinite; }
.handoff-origin { display: flex; gap: 14px; align-items: center; justify-content: center; padding: 16px 12px; border: 1px solid #46442c; background: #ffe60004; }
.handoff-check { color: var(--yellow); font-size: 24px; }
.handoff-origin strong { display: block; font-weight: 500; font-size: 16px; letter-spacing: -.02em; }
.handoff-origin div > span { display: block; color: #aaa; font-size: 11px; margin-top: 7px; line-height: 1.5; }
.handoff-routes { position: relative; height: 36px; }
.route-stem { position: absolute; top: 0; left: 50%; height: 18px; border-left: 1px solid #6c6222; }
.route-left, .route-right { position: absolute; top: 18px; width: 25%; height: 18px; border-top: 1px solid #6c6222; }
.route-left { left: 25%; border-left: 1px solid #6c6222; animation: route-to-slack var(--delivery-cycle) linear infinite; }
.route-right { right: 25%; border-right: 1px solid #6c6222; animation: route-to-linear var(--delivery-cycle) linear infinite; }
.team-destinations { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.slack-destination, .linear-destination { min-width: 0; border: 1px solid #373737; background: #080808; }
.slack-destination { animation: deliver-slack var(--delivery-cycle) cubic-bezier(.2, .6, .2, 1) infinite; }
.linear-destination { animation: deliver-linear var(--delivery-cycle) cubic-bezier(.2, .6, .2, 1) infinite; }
.destination-heading { padding: 15px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid #292929; font-size: 12px; }
.destination-heading > span:first-child { display: inline-flex; gap: 8px; align-items: center; }
.destination-heading > span:last-child { font-size: 10px; color: #a2a2a2; }
.slack-message, .linear-issue { padding: 18px 17px 20px; }
.message-author { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; }
.message-author strong { font-size: 12px; font-weight: 500; }
.slack-message-content { padding-left: 12px; border-left: 2px solid #d3c324; }
.team-destinations h4 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.team-destinations p { color: #aaa; font-size: 12px; line-height: 1.7; margin-top: 13px; }
.slack-message-content > code { display: block; font-size: 9px; color: #acaca7; margin-top: 12px; overflow-wrap: anywhere; }
.finding-reference { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #dbd8b3; font-size: 10px; margin-top: 20px; }
.finding-reference > span { font-size: 15px; color: var(--yellow); }
.issue-state { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #b0b0b0; margin: 3px 0 20px; }
.issue-state > span { width: 9px; height: 9px; border: 1px solid #a5a5a5; border-radius: 50%; }
.issue-attachments { display: flex; flex-wrap: wrap; gap: 7px 12px; padding-top: 15px; margin-top: 15px; border-top: 1px solid #2d2d2d; color: #b1b1b1; font-size: 10px; }
.handoff-complete { display: flex; align-items: center; justify-content: center; gap: 9px; padding-top: 24px; color: #aaa; font-size: 11px; animation: handoff-complete var(--delivery-cycle) linear infinite; }
.handoff-complete > span { color: var(--yellow); }
@keyframes specialist-review { 0%, 36%, 100% { opacity: 1; transform: none; } 42%, 96% { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes review-pending { 0%, 26%, 100% { opacity: 1; } 28%, 97% { opacity: 0; } }
@keyframes review-approved { 0%, 29%, 100% { opacity: 0; } 31%, 96% { opacity: 1; } }
@keyframes review-reproduction { 0%, 4%, 100% { opacity: .2; transform: translateY(3px); } 9%, 97% { opacity: 1; transform: none; } }
@keyframes review-code { 0%, 13%, 100% { opacity: .2; transform: translateY(3px); } 18%, 97% { opacity: 1; transform: none; } }
@keyframes review-fix { 0%, 22%, 100% { opacity: .2; transform: translateY(3px); } 27%, 97% { opacity: 1; transform: none; } }
@keyframes finding-handoff { 0%, 40%, 100% { opacity: 0; transform: translateY(8px); } 45%, 95% { opacity: 1; transform: none; } }
@keyframes route-to-slack { 0%, 45%, 100% { opacity: .15; clip-path: inset(0 0 0 100%); } 51%, 96% { opacity: 1; clip-path: inset(0); } }
@keyframes route-to-linear { 0%, 54%, 100% { opacity: .15; clip-path: inset(0 100% 0 0); } 61%, 96% { opacity: 1; clip-path: inset(0); } }
@keyframes deliver-slack { 0%, 49%, 100% { opacity: 0; transform: translateY(12px); clip-path: inset(0 0 100% 0); } 55%, 95% { opacity: 1; transform: none; clip-path: inset(0); } }
@keyframes deliver-linear { 0%, 59%, 100% { opacity: 0; transform: translateY(12px); clip-path: inset(0 0 100% 0); } 65%, 95% { opacity: 1; transform: none; clip-path: inset(0); } }
@keyframes handoff-complete { 0%, 68%, 100% { opacity: 0; } 73%, 94% { opacity: 1; } }
.evidence-section { background: #090909; border-block: 1px solid #242424; }
.evidence-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 110px; padding-block: 118px; align-items: center; }
.evidence-copy h2 { font-size: clamp(45px, 4.8vw, 70px); margin-bottom: 32px; }
.evidence-copy p { color: #aaa; font-size: 16px; line-height: 1.8; max-width: 440px; }
.evidence-copy p + p { margin-top: 22px; }
.finding-example { min-width: 0; padding: 35px; background: #000; border: 1px solid #393939; }
.finding-heading { display: flex; justify-content: space-between; gap: 15px; font-size: 11px; color: #999; margin-bottom: 28px; }
.severity { color: var(--yellow); }
.finding-example h3 { font-size: 34px; font-weight: 500; letter-spacing: -.035em; line-height: 1.14; }
.finding-example > p { color: #999; font-size: 14px; line-height: 1.7; margin-top: 18px; max-width: 360px; }
.code-heading { display: flex; justify-content: space-between; gap: 14px; margin-top: 35px; border-top: 1px solid #333; padding: 18px 0 12px; font-size: 10px; color: #9d9d9d; }
.code-heading span:first-child { font-family: 'JetBrains Mono', monospace; }
pre { margin: 0 -35px; padding: 7px 35px 24px; overflow-x: auto; font-size: 12px; line-height: 2; }
code { font-family: 'JetBrains Mono', monospace; }
.code-muted { color: #939393; }
.code-added { color: var(--yellow); display: inline-block; background: #ffe6000d; margin-inline: -9px; padding-inline: 9px; }
.finding-footnote { border-top: 1px solid #333; padding-top: 18px; color: #a2a2a2; font-size: 12px; line-height: 1.8; }
.questions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 105px; padding-block: 126px; }
.questions h2 { font-size: 48px; }
.question-list details { border-top: 1px solid #343434; }
.question-list details:last-child { border-bottom: 1px solid #343434; }
summary { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-block: 25px; cursor: pointer; font-size: 17px; letter-spacing: -.015em; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary svg { flex-shrink: 0; color: #9b9b9b; transition: transform .2s; }
details[open] summary svg { transform: rotate(45deg); color: var(--yellow); }
.question-list details > p { margin: 0 40px 27px 0; color: #aaa; font-size: 15px; line-height: 1.8; }
.closing { display: flex; justify-content: space-between; align-items: flex-end; gap: 35px; padding: 76px 0 110px; border-top: 1px solid #333; }
.closing > p { font-size: clamp(48px, 5.9vw, 86px); font-weight: 500; letter-spacing: -.05em; line-height: 1.06; }
.closing-status { font-size: 24px; letter-spacing: -.035em; padding-bottom: 7px; white-space: nowrap; }
.footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #333; padding-block: 34px; }
.footer .brand img { width: 111px; }
.footer > span { font-size: 12px; color: #949494; }
@media (min-width: 1700px) { .hero { min-height: 900px; } }
@media (max-width: 1150px) {
  .wrap { width: calc(100% - 80px); }
  .hero { gap: 0; min-height: 680px; padding-block: 70px; }
  h1 { font-size: 6.8vw; }
  .hero-copy > p { font-size: 17px; }
  .hero-scene { margin-inline: -12px -15px; }
  .hero-scene figcaption { margin-inline: 36px 20px; font-size: 11px; gap: 10px; }
  .hero-scene figcaption span:last-child { font-size: 10px; }
  .section-intro { gap: 45px; }
  .section-intro > p { font-size: 15px; }
  .workflow { gap: 45px; }
  .tab-title { font-size: 21px; }
  .tab-description { font-size: 14px; }
  .workflow-tab { padding-right: 38px; }
  .preview-heading { padding-inline: 22px; font-size: 11px; }
  .example-label { font-size: 9px; }
  .workflow-panel { padding-inline: 22px; }
  .evidence-layout { gap: 50px; }
  .finding-example { padding: 25px; }
  pre { margin-inline: -25px; padding-inline: 25px; font-size: 9px; }
  .questions { gap: 50px; }
  .questions h2 { font-size: 41px; }
}
@media (max-width: 800px) {
  .wrap { width: calc(100% - 48px); }
  .header { height: 88px; gap: 22px; }
  .brand img { width: 125px; }
  .header nav { gap: 20px; font-size: 12px; }
  .header nav a:last-child { display: none; }
  .launch-status { font-size: 12px; padding-left: 20px; margin: 0; }
  .hero { grid-template-columns: 1fr; gap: 15px; min-height: 570px; padding-block: 80px 65px; }
  h1 { font-size: 11.6vw; }
  .hero-copy > p { font-size: 15px; }
  .hero-scene { width: 85%; max-width: 580px; margin: -25px -10px 0 auto; }
  .hero-scene figcaption { margin-inline: 45px 28px; font-size: 12px; }
  .approach { padding-block: 80px; }
  .section-intro { display: block; margin-bottom: 55px; }
  h2 { font-size: 40px; }
  .section-intro > p { margin-top: 27px; max-width: 540px; }
  .workflow { grid-template-columns: 1fr; gap: 35px; }
  .workflow-tab { padding-block: 27px; }
  .tab-title { font-size: 23px; }
  .tab-description { max-width: 88%; }
  .workflow-tab > svg { top: 29px; }
  .workflow-panel { min-height: 430px; padding: 30px; }
  .preview-heading { padding: 20px 30px; }
  .evidence-layout { grid-template-columns: 1fr; gap: 50px; padding-block: 80px; }
  .evidence-copy h2 { font-size: 53px; }
  .evidence-copy p { max-width: 550px; }
  .finding-example { padding: 30px; }
  pre { margin-inline: -30px; padding-inline: 30px; font-size: 12px; }
  .questions { grid-template-columns: 1fr; gap: 40px; padding-block: 80px; }
  .questions h2 br { display: none; }
  .questions h2 { font-size: 39px; }
  .closing { padding-block: 65px 75px; }
  .closing > p { font-size: 54px; }
  .closing-status { font-size: 18px; }
}
@media (max-width: 540px) {
  .header { gap: 12px; }
  .header nav { display: none; }
  .launch-status { margin-left: auto; border: 0; padding: 0; font-size: 12px; }
  .hero { grid-template-columns: 1fr; padding-top: 65px; padding-bottom: 56px; min-height: 0; gap: 24px; }
  h1 { font-size: clamp(48px, 12.8vw, 68px); letter-spacing: -.05em; }
  .hero-copy > p { font-size: 16px; margin-top: 27px; }
  .text-link { margin-top: 30px; font-size: 13px; gap: 25px; }
  .hero-scene { width: calc(100% + 24px); margin: 0 -12px; }
  .hero-scene figcaption { margin: 18px 22px 0; padding-top: 17px; font-size: 11px; }
  .hero-scene figcaption span:last-child { font-size: 10px; }
  h2 { font-size: 34px; }
  .section-intro h2 br { display: none; }
  .section-intro > p { font-size: 15px; line-height: 1.8; }
  .tab-title { font-size: 21px; }
  .tab-description { max-width: 100%; font-size: 14px; }
  .workflow-tab { padding-right: 30px; }
  .workflow-tab > svg { width: 18px; }
  .preview-heading { padding: 18px; gap: 10px; font-size: 10px; }
  .example-label { font-size: 8px; }
  .workflow-panel { padding: 23px 18px; min-height: 409px; }
  .repo-heading { font-size: 14px; gap: 10px; }
  .repository-tree { font-size: 11px; }
  .tree-indent { padding-left: 15px; }
  .tree-indent > :nth-child(n+2) { padding-left: 12px; }
  .file-editor { min-height: 423px; }
  .editor-heading { padding-inline: 12px; gap: 8px; }
  .editor-heading > span { font-size: 11px; gap: 7px; }
  .editor-status { font-size: 9px; }
  .query-line { font-size: 10px; line-height: 26px; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding-inline: 10px; }
  .vulnerable-line, .fixed-line { padding-left: 8px; }
  .query-explanation { margin-inline: 12px; padding-block: 18px; }
  .query-explanation > div { gap: 9px; }
  .query-explanation strong { font-size: 13px; }
  .query-explanation p { font-size: 11px; }
  .preview-caption { font-size: 12px; }
  .simulation-heading { padding-inline: 12px; font-size: 10px; gap: 8px; }
  .build-body, .review-body { padding: 23px 18px; }
  .build-body h3, .assessment-title h3 { font-size: 23px; }
  .build-body > p { font-size: 12px; }
  .build-step { font-size: 11px; gap: 7px; grid-template-columns: 14px minmax(0, 1fr) auto; }
  .build-step > span:last-child { font-size: 9px; }
  .assessment-body { padding: 23px 14px 19px; }
  .assessment-title { display: block; }
  .assessment-title > span { display: block; margin-top: 8px; }
  .request-exchange { gap: 10px; }
  .request-exchange > span { font-size: 10px; gap: 5px; }
  .request-exchange img { width: 12px; height: auto; }
  .http-test { padding-inline: 5px; }
  .http-test-label { font-size: 11px; gap: 7px; }
  .http-test-label > span:last-child { font-size: 10px; }
  .http-test > code { font-size: 10px; }
  .runtime-conclusion strong { font-size: 13px; }
  .runtime-conclusion p { font-size: 11px; }
  .review-body h3 { font-size: 27px; }
  .handoff-origin { gap: 10px; padding-inline: 10px; }
  .handoff-origin strong { font-size: 14px; }
  .handoff-origin div > span { font-size: 10px; }
  .team-destinations { grid-template-columns: 1fr; gap: 15px; }
  .handoff-routes { height: 25px; }
  .route-stem { height: 25px; }
  .route-left, .route-right { display: none; }
  .team-destinations h4 { font-size: 17px; }
  .slack-message, .linear-issue { padding: 17px; }
  .message-author { margin-bottom: 13px; }
  .handoff-complete { padding-top: 20px; font-size: 10px; }
  .evidence-copy h2 { font-size: 41px; }
  .evidence-copy p { font-size: 15px; }
  .finding-example { padding: 24px 20px; }
  .finding-example h3 { font-size: 31px; }
  .finding-example > p { font-size: 13px; }
  .finding-heading { font-size: 10px; }
  .code-heading { font-size: 9px; }
  pre { margin-inline: -20px; padding-inline: 20px; font-size: 11px; }
  .questions h2 { font-size: 34px; }
  summary { font-size: 16px; gap: 15px; line-height: 1.45; }
  .question-list details > p { font-size: 14px; margin-right: 10px; }
  .closing { flex-direction: column; align-items: flex-start; gap: 30px; }
  .closing > p { font-size: 43px; }
  .closing-status { font-size: 18px; }
  .footer { padding-block: 29px; }
  .footer .brand img { width: 103px; }
}
@media (max-width: 350px) { .wrap { width: calc(100% - 36px); } h1 { font-size: 46px; } .preview-heading { flex-wrap: wrap; gap: 5px; } .query-line { font-size: 9px; gap: 6px; padding-right: 6px; } .editor-heading > span svg { display: none; } .file-editor { min-height: 440px; } pre { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }