/* A separate presentation layer; content and interactions use the original site. */
.v2 .bench-method-disclosure { margin-top: 28px; border-top: 1px solid var(--rule); }
.v2 .bench-method-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; list-style: none; cursor: pointer; }
.v2 .bench-method-disclosure > summary::-webkit-details-marker { display: none; }
.v2 .bench-method-disclosure > summary h3 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.v2 .bench-method-disclosure > summary > span::before { content: '+'; font: 20px var(--mono); color: var(--graphite); }
.v2 .bench-method-disclosure[open] > summary > span::before { content: '−'; }
.v2 .bench-method-disclosure .bench-method { margin: 0; padding: 0 0 24px; border: 0; }
.v2 { background: var(--paper); }
.v2 .btn:where(:not(.nav .btn)) { border-radius: 999px; letter-spacing: .055em; font: 11px/1.5 var(--mono); padding: 16px 24px; }
.v2 .btn-small:where(:not(.nav .btn)) { font-size: 11px; padding: 12px 19px; }
.v2 .motion-toggle { font-size: 9px; border: 0; padding: 8px 0; }
.intro-scroll { height: 220svh; min-height: 0; }
.intro-sticky { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: clip; padding: 0; }
.intro-scene { --intro-progress: 0; height: 100%; position: relative; isolation: isolate; overflow: clip; display: grid; place-items: center; background: var(--paper); clip-path: inset(var(--clip-top, 0px) var(--clip-x, 0px) var(--clip-bottom, 0px) round var(--clip-radius, 0px)); will-change: clip-path; }
.intro-scene::after { content: none; }
.intro-scene .hero-copy { position: relative; z-index: 3; text-align: center; max-width: 750px; padding: 120px 28px 110px; transform: translateY(var(--copy-y, 0%)) scale(var(--copy-scale, 1)); opacity: var(--copy-opacity, 1); will-change: transform, opacity; }
.intro-scene .eyebrow { justify-content: center; font-size: 10px; color: var(--graphite); margin-bottom: 27px; }
.intro-scene h1 { font-weight: 400; font-size: clamp(64px, 6.8vw, 92px); line-height: .98; letter-spacing: -.065em; margin-bottom: 27px; text-wrap: balance; }
.intro-scene h1 em { display: inline; }
.intro-scene .hero-sub { max-width: 48ch; font-size: 16px; line-height: 1.8; margin: 0 auto 30px; color: var(--graphite); }
.intro-scene .hero-cta { justify-content: center; gap: 25px; }
.intro-scene .hero-cta .btn { background: var(--ink); border-color: var(--ink); box-shadow: none; }
.intro-scene .hero-cta .btn:hover { background: var(--signal); border-color: var(--signal); }
.intro-scene .textlink { font: 11px/1.7 var(--mono); }
.intro-scene .hero-note { margin-top: 25px; font-size: 9px; }
.intro-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.intro-halo { display: none; }
.intro-mark { position: absolute; width: clamp(340px, 38vw, 600px); height: auto; left: -10%; top: 12%; overflow: visible; transform: translateX(calc(var(--art-progress, 0) * -100%)) rotate(-18deg) scale(calc(1 + var(--art-progress, 0) * .15)); filter: none; }
.mark-surface { stroke: var(--rule); stroke-width: 4; animation: mark-arrive 1.8s cubic-bezier(.2,.7,.2,1) both; }
.mark-shadow, .mark-highlight { display: none; }
.intro-lines { position: absolute; z-index: 0; width: 46%; right: -24%; top: 15%; height: 70%; overflow: visible; fill: none; stroke: var(--rule); stroke-width: 1; transform: translateX(calc(var(--art-progress, 0) * 100%)) scale(calc(1 + var(--art-progress, 0) * .15)); }
.intro-lines .intro-pulse { stroke: var(--fog); stroke-dasharray: 8 92; animation: intro-packet 7s linear infinite; }
.orbit { position: absolute; z-index: 1; right: -45px; width: 200px; height: 68px; display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 12px; background: var(--paper); border: 1px solid color-mix(in srgb, var(--rule) 70%, var(--paper)); box-shadow: none; font: 9px var(--mono); color: var(--graphite); transform: translateX(calc(var(--art-progress, 0) * 100vw)) scale(calc(1 + var(--art-progress, 0) * .15)); animation: orbit-arrive 1.8s both; }
.orbit-symbol { display: grid; place-items: center; flex: 0 0 32px; font: 18px var(--display); color: var(--graphite); width: 32px; height: 32px; background: color-mix(in srgb, var(--bone) 65%, var(--paper)); border-radius: 8px; }
.orbit > span:not(.orbit-symbol) { min-width: 0; line-height: 1.5; }
.orbit i { flex: 0 0 4px; width: 4px; height: 4px; margin-left: auto; border-radius: 50%; background: color-mix(in srgb, var(--signal) 65%, var(--paper)); }
.orbit-a { top: 26%; right: -4%; }
.orbit-b { top: 47%; right: -2%; transform: translateX(calc(var(--art-progress, 0) * 100vw)) scale(calc(1 + var(--art-progress, 0) * .15)); animation-delay: .15s; }
.orbit-c { top: 69%; right: -5%; animation-delay: .3s; }
.intro-scroll-cue { position: absolute; z-index: 6; bottom: 33px; left: 50%; transform: translateX(-50%); text-align: center; color: color-mix(in srgb, var(--graphite) calc((1 - var(--intro-progress)) * 100%), var(--paper)); text-decoration: none; font-size: 9px; letter-spacing: .04em; white-space: nowrap; }
.intro-scroll-cue span { display: block; font: 24px var(--body); margin-top: 10px; animation: cue-drift 2s ease-in-out infinite; }
.intro-corner { position: absolute; left: 36px; bottom: 35px; color: var(--graphite); font-size: 9px; }
.intro-scene .hero-copy > * { animation: copy-arrive 1.1s cubic-bezier(.16,1,.3,1) both; }
.intro-scene .hero-copy > :nth-child(2) { animation-delay: .15s; }
.intro-scene .hero-copy > :nth-child(3) { animation-delay: .3s; }
.intro-scene .hero-copy > :nth-child(4) { animation-delay: .45s; }
.intro-scene .hero-copy > :nth-child(5) { animation-delay: .6s; }
.route-preview { padding-top: 50px; padding-bottom: 100px; }
.v2 .hero-demo { max-width: 780px; margin: 0 auto; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: none; }
.v2 .route-canvas { aspect-ratio: 780 / 420; }
.v2 .routing-svg { height: 100%; width: 100%; }
.v2 .label-left { left: 28%; }
.v2 .label-right { left: 72%; }
.v2 .demo-top, .v2 .demo-bottom, .v2 .demo-caption { padding-inline: 27px; }
.v2 .stats { border: 1px solid var(--rule); border-radius: 24px; background: #f1f1ea; overflow: hidden; }
.v2 .stat, .v2 .stat:first-child { padding: 33px; }
.v2 .stat-foot .cost-caption { display: block; margin-top: 4px; }
.v2 .num { font-size: clamp(32px, 3.7vw, 50px); }
.v2 .stat-foot { text-align: center; }
.v2 .section { padding-block: 115px; }
.v2 .section-heading { display: block; max-width: 720px; margin: 0 auto 55px; text-align: center; }
.v2 .section-heading .eyebrow { justify-content: center; padding: 0; }
.v2 h2 { font-weight: 400; font-size: clamp(38px, 4.3vw, 60px); letter-spacing: -.05em; }
.v2 .section-intro { margin-inline: auto; }
.v2 .sample-tabs { max-width: 820px; margin: 0 auto 28px; padding: 5px; border: 1px solid var(--rule); border-radius: 100px; background: #eeeee780; gap: 5px; }
.v2 .sample-tab { border: 0; border-radius: 100px; padding: 13px 22px; font-size: 14px; }
.v2 .sample-tab:first-child { border: 0; }
.v2 .sample-tab[aria-pressed="true"] { background: white; color: var(--ink); box-shadow: 0 3px 10px #272b1710; }
.v2 .sample-tab[aria-pressed="true"] .tab-num { color: var(--signal); }
.v2 .inspector-shell { border-radius: 24px; overflow: hidden; box-shadow: none; }
.v2 .inspect-step { border-radius: 10px; }
.v2 .journey-layout { gap: 90px; }
.v2 .journey-visual { border-radius: 25px; overflow: hidden; box-shadow: none; }
.v2 .journey-step { min-height: 390px; }
.v2 .journey-title { font-size: 34px; }
.v2 .journey-step.is-active .journey-title { color: var(--signal); }
.v2 .technical-notes { border-radius: 16px; padding-inline: 22px; background: #f0f1eb; }
.v2 .audit-section { border-radius: 40px; margin: 0 24px; background: #171a15; }
.v2 .audit-terminal { border-radius: 20px; overflow: hidden; }
.v2 .audit-copy h2 { font-size: clamp(45px,5vw,68px); }
.v2 .bench-selection { border-radius: 22px; }
.v2 .bench-table-wrap { border-radius: 18px; }
.v2 .bench-filters button { border-radius: 100px; }
.v2 .code-block { border-radius: 22px; overflow: hidden; }
.v2 .endcap { position: relative; margin: 0 24px; border-radius: 32px; background: var(--bone); overflow: hidden; }
.v2 .endcap > .sheet { position: relative; }
.v2 .endcap h2 { max-width: 850px; margin-inline: auto; }
.v2-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.v2-revealed, .v2-reveal:focus-within { opacity: 1; transform: none; }
.motion-paused .v2-reveal { opacity: 1; transform: none; }
.motion-paused .intro-scroll { height: auto; min-height: 0; }
.motion-paused .intro-sticky { position: relative; }
html:not(.js) .intro-scroll { height: auto; min-height: 0; }
html:not(.js) .intro-sticky { position: relative; }
html:not(.js) .intro-scene { clip-path: none; }
/* The second scroll scene is a quiet invitation to the local routing demo. */
.intro-demo-teaser { display: none; position: absolute; inset: 0; z-index: 5; background: var(--ink); color: var(--paper); flex-direction: column; align-items: center; justify-content: center; padding: 0; text-align: center; opacity: var(--demo-opacity, 0); will-change: opacity; }
html.js:not(.motion-paused) .intro-demo-teaser { display: flex; }
.intro-demo-teaser[inert], .intro-scene .hero-copy[inert] { pointer-events: none; }
.intro-demo-teaser .teaser-mark { width: 39px; height: 51px; color: var(--signal); margin-bottom: 28px; flex: 0 0 auto; }
.intro-demo-teaser .teaser-mark svg { width: 100%; height: 100%; }
.intro-demo-teaser .eyebrow { margin-bottom: 21px; color: var(--paper); }
.v2 .intro-demo-teaser h2 { font-weight: 400; color: var(--paper); font-size: clamp(28px, 4.5vw, 64px); line-height: 1.04; letter-spacing: -.065em; max-width: 20ch; margin: 0 0 24px; text-wrap: balance; }
.intro-demo-teaser .teaser-content > p:not(.eyebrow):not(.teaser-note) { max-width: 43ch; font-size: 16px; line-height: 1.8; color: color-mix(in srgb, var(--paper) 78%, var(--ink)); margin: 0 0 29px; }
.intro-demo-teaser .btn { justify-content: center; gap: 14px; min-height: 54px; background: var(--paper); color: var(--ink); border-color: var(--paper); }
.intro-demo-teaser .btn:hover { background: var(--signal); border-color: var(--signal); color: var(--paper); }
.demo-open svg { width: 15px; height: 15px; flex: 0 0 auto; }
.intro-demo-teaser .teaser-note { margin: 18px 0 0; font: 9px/1.7 var(--mono); color: color-mix(in srgb, var(--paper) 68%, var(--ink)); }
.intro-scene .demo-open[hidden], html.js:not(.motion-paused) .intro-demo-teaser[hidden] { display: none; }
.motion-paused .intro-scene .hero-copy, html:not(.js) .intro-scene .hero-copy { transform: none; opacity: 1; }
.motion-paused .intro-art *, html:not(.js) .intro-art * { transform: none; }
.motion-paused .intro-sticky { height: auto; min-height: 0; }
.motion-paused .intro-scene { display: block; height: auto; clip-path: none; }
.motion-paused .intro-scene .hero-copy { min-height: 100svh; margin-inline: auto; display: flex; flex-direction: column; justify-content: center; }
.motion-paused .intro-demo-teaser { position: relative; display: flex; opacity: 1; transform: none; min-height: 80svh; }
.motion-paused .intro-scroll-cue { display: none; }
@media(max-width: 640px) {
 .intro-demo-teaser { padding: 0; }
 .intro-demo-teaser .teaser-mark { width: 30px; height: 40px; margin-bottom: 25px; }
 .v2 .intro-demo-teaser h2 { font-size: clamp(23px, 6.4vw, 38px); margin-bottom: 14px; }
 .intro-demo-teaser .teaser-content > p:not(.eyebrow):not(.teaser-note) { font-size: 14px; max-width: 31ch; }
 .intro-demo-teaser .teaser-note { font-size: 8px; max-width: 35ch; }
}
@keyframes mark-arrive { from { stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; } to { stroke-dasharray: 100; stroke-dashoffset: 0; opacity: 1; } }
@keyframes mark-finish { 0%,35% { opacity: 0; } 100% { opacity: 1; } }
@keyframes copy-arrive { from { opacity: 0; transform: translateY(28px); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes orbit-arrive { from { opacity: 0; margin-right: -80px; } to { opacity: 1; margin-right: 0; } }
@keyframes intro-packet { from { stroke-dashoffset: 100; } to { stroke-dashoffset: -100; } }
@keyframes cue-drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media(min-width: 1500px) { .intro-mark { left: -10%; } .orbit-a { right: 2%; } .orbit-b { right: 4%; } .orbit-c { right: 1%; } }
@media(max-width: 1100px) {
 .intro-mark { left: -18%; opacity: .85; }
 .orbit { right: -125px; }
 .orbit-b { right: -105px; }
 .intro-scene .hero-copy { max-width: 660px; }
}
@media(max-width: 860px) {
 .intro-scroll { min-height: 0; height: 220svh; }
 .intro-sticky { min-height: 0; }
 .intro-mark { width: 310px; left: -195px; top: 18%; opacity: .5; }
 .intro-lines { opacity: .5; }
 .orbit { width: 155px; height: 58px; right: -105px; padding: 11px; gap: 9px; }
 .orbit-b { right: -120px; }
 .intro-scene h1 { font-size: clamp(62px, 9vw, 82px); }
 .intro-scene .hero-copy { padding: 135px 42px 120px; max-width: 630px; }
 .intro-scene .hero-sub { font-size: 15px; }
 .v2 .section { padding-block: 85px; }
 .v2 .journey-layout { gap: 35px; }
 .v2 .journey-title { font-size: 26px; }
 .v2 .audit-section, .v2 .endcap { margin-inline: 12px; border-radius: 24px; }
 .v2 .sample-tab { padding: 13px; font-size: 12px; gap: 10px; }
 .v2 .stat, .v2 .stat:first-child { padding: 24px; }
}
@media(max-width: 640px) {
 .v2 .motion-toggle { font-size: 8px; }
 .v2 .sheet:not(.nav-in) { padding-inline: 22px; }
 .intro-sticky { height: 100svh; min-height: 0; }
 .intro-scene .hero-copy { padding: 120px 23px 130px; }
 .intro-scene h1 { font-size: clamp(51px, 12.8vw, 78px); letter-spacing: -.065em; }
 .intro-scene .eyebrow { font-size: 8px; gap: 7px; }
 .intro-scene .hero-sub { font-size: 14px; max-width: 36ch; }
 .intro-scene .hero-cta { gap: 20px; }
 .intro-scene .hero-cta .btn { padding: 14px 20px; font-size: 12px; }
 .intro-scene .hero-note { font-size: 7px; }
 .intro-mark { width: 170px; left: -68px; top: auto; bottom: -45px; opacity: .65; }
 .intro-lines { top: auto; bottom: -6%; height: 30%; right: -25%; width: 75%; }
 .orbit { top: auto; bottom: 34px; width: 155px; right: -45px; height: 54px; font-size: 8px; }
 .orbit-b, .orbit-c { display: none; }
 .intro-halo { top: auto; bottom: -400px; }
 .intro-corner { display: none; }
 .intro-scroll-cue { bottom: 36px; font-size: 8px; }
 .route-preview { padding-block: 30px 65px; }
 .v2 .route-canvas { aspect-ratio: 520 / 420; }
 .v2 .label-left { left: 17.3%; }
 .v2 .label-right { left: 82.7%; }
 .v2 .hero-demo { border-radius: 18px; }
 .v2 .demo-top, .v2 .demo-bottom, .v2 .demo-caption { padding-inline: 18px; }
 .v2 .stats { border-radius: 18px; }
 .v2 .stat, .v2 .stat:first-child { padding: 24px; }
 .v2 .section-heading { text-align: left; margin-bottom: 30px; }
 .v2 .section-heading .eyebrow { justify-content: flex-start; }
 .v2 .sample-tabs { border-radius: 18px; grid-template-columns: 1fr; }
 .v2 .sample-tab { border-radius: 12px; padding: 13px 15px; font-size: 14px; }
 .v2 .inspector-shell { border-radius: 18px; }
 .v2 .journey-layout { gap: 20px; }
 .v2 .journey-visual { border-radius: 16px; }
 .v2 .journey-step { min-height: 290px; }
 .v2 .journey-title { font-size: 25px; }
 .v2 .audit-layout { padding-inline: 22px; }
 .v2 .endcap .sheet { padding-inline: 22px; }
}
@media(max-height: 600px) and (min-width: 641px) {
 .intro-scene .hero-copy { padding: 90px 28px 35px; }
 .intro-scene h1 { font-size: clamp(38px, 6vw, 60px); margin-bottom: 12px; }
 .intro-scene .eyebrow { margin-bottom: 12px; }
 .intro-scene .hero-sub { font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
 .intro-scene .hero-note, .intro-scroll-cue, .intro-demo-teaser .teaser-mark { display: none; }
 .intro-demo-teaser { padding: 0; }
 .v2 .intro-demo-teaser h2 { font-size: clamp(32px, 5vw, 52px); margin-bottom: 14px; }
 .intro-demo-teaser .teaser-content > p:not(.eyebrow):not(.teaser-note) { margin-bottom: 12px; line-height: 1.5; }
 .intro-demo-teaser .btn { min-height: 44px; padding: 10px 18px; }
 .intro-demo-teaser .teaser-note { margin-top: 10px; }
}
@media(prefers-reduced-motion: reduce) {
 html:not(.js) .v2 *, html:not(.js) .v2 *::before, html:not(.js) .v2 *::after { animation: none !important; transition: none !important; }
}

/* A shared board connects the inspector panels and their live routing diagram. */
.v2 .inspector-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: stretch; border: 1px solid var(--rule); border-radius: 24px; overflow: clip; background: var(--white); }
.v2 .inspector-workspace .inspector-shell { min-width: 0; border: 0; border-radius: 0; }
.v2 .inspector-workspace .inspector-input, .v2 .inspector-workspace .inspector-route { padding: 24px; }
.v2 .inspector-workspace .inspect-step { font-size: 10px; padding-inline: 8px; }
.v2 .inspector-workspace .request-text { font-size: 15px; line-height: 1.7; }
.v2 .inspector-workspace .route-preview { display: flex; align-items: center; min-width: 0; padding: 16px; border-left: 1px solid var(--rule); background: var(--paper); }
.v2 .inspector-workspace .hero-demo { width: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; }
.v2 .inspector-workspace .route-canvas { aspect-ratio: 520 / 420; }
.v2 .inspector-workspace .route-label { font-size: 9px; }
.v2 .inspector-workspace .label-left { left: 17.3%; }
.v2 .inspector-workspace .label-right { left: 82.7%; }
.v2 .inspector-workspace .demo-top { padding: 11px 0; gap: 8px; flex-wrap: wrap; }
.v2 .inspector-workspace .demo-bottom { padding: 14px 0; }
.v2 .inspector-workspace .demo-caption { display: none; }
@media(max-width: 1100px) {
 .v2 .inspector-workspace { grid-template-columns: 1fr; }
 .v2 .inspector-workspace .route-preview { justify-content: center; border-left: 0; border-top: 1px solid var(--rule); }
 .v2 .inspector-workspace .hero-demo { max-width: 420px; }
}
@media(max-width: 640px) {
 .v2 .inspector-workspace { border-radius: 18px; }
 .v2 .inspector-workspace .inspector-input, .v2 .inspector-workspace .inspector-route { padding: 20px; }
 .v2 .inspector-workspace .inspect-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(min-width: 1101px) and (max-width: 1200px) {
 .v2 .inspector-workspace .inspect-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}