/* SRC-04 guided narrative. Scoped to .v2-page so established views keep their layout. */
.v2-page { --v2-navy:#102b39; --v2-deep:#092330; --v2-cyan:#99e3e1; --v2-orange:#e7ae70; color:var(--ink-900); }
.v2-page * { box-sizing:border-box; }
.v2-hero { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(300px,.96fr); min-height:470px; overflow:hidden; border-radius:26px; background:var(--v2-navy); color:#fff; box-shadow:0 18px 45px rgba(9,35,48,.14); }
.v2-hero-copy { padding:clamp(30px,5vw,70px); position:relative; z-index:1; }
.v2-kicker { display:inline-flex; align-items:center; gap:9px; color:#c9e9e6; font-size:12px; font-weight:700; letter-spacing:.02em; }
.v2-kicker-dot { width:8px; height:8px; background:#70d9c2; border-radius:50%; box-shadow:0 0 0 5px rgba(112,217,194,.12); }
.v2-hero h1 { margin:26px 0 18px; color:#fff; font-size:clamp(35px,4vw,61px); line-height:1.3; letter-spacing:-.025em; font-weight:800; }
.v2-hero h1 em { font-style:normal; color:var(--v2-cyan); }
.v2-hero p { color:#c6d9df; font-size:15px; line-height:2; max-width:560px; }
.v2-hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; }
.v2-cta,.v2-cta-outline { border-radius:11px; padding:12px 19px; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; min-height:45px; }
.v2-cta { border:1px solid var(--v2-cyan); background:var(--v2-cyan); color:var(--v2-deep); }
.v2-cta:hover { background:#c1f2ec; }
.v2-cta-outline { color:#e6f4f4; border:1px solid #7695a0; background:transparent; }
.v2-cta-outline:hover { background:rgba(255,255,255,.1); }
.v2-cta span { margin-inline-start:16px; }
.v2-hero-caption { margin-top:33px; font:11px var(--font-mono); color:#8faeb7; direction:ltr; text-align:right; }
.v2-hero-art { min-height:450px; position:relative; overflow:hidden; background:radial-gradient(circle at 68% 25%,#2a6070 0%,transparent 42%),linear-gradient(125deg,#103d4c,#071f2d 72%); }
.v2-art-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(178,224,225,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(178,224,225,.08) 1px,transparent 1px); background-size:44px 44px; transform:skewY(-8deg) scale(1.3); }
.v2-art-route { position:absolute; width:84%; height:2px; right:9%; top:53%; background:linear-gradient(90deg,#67d7d1,#e9b773); transform:rotate(-22deg); box-shadow:0 0 20px #6edfd179; }
.v2-art-route::before,.v2-art-route::after { content:""; position:absolute; height:2px; background:#72ccc7; width:42%; transform-origin:right; right:30%; }
.v2-art-route::before { transform:rotate(32deg); top:-1px; }.v2-art-route::after { transform:rotate(-32deg); top:1px; }
.v2-art-route span { position:absolute; top:-6px; width:14px; height:14px; border:3px solid #a1eee6; background:#0e3946; border-radius:50%; box-shadow:0 0 0 7px rgba(106,213,209,.14); }
.v2-art-route span:nth-child(1){right:2%}.v2-art-route span:nth-child(2){right:31%}.v2-art-route span:nth-child(3){right:65%}.v2-art-route span:nth-child(4){right:92%;border-color:#e8b375}
.v2-art-card { position:absolute; background:rgba(13,44,57,.86); border:1px solid rgba(179,222,219,.24); border-radius:17px; box-shadow:0 20px 45px #00182166; backdrop-filter:blur(9px); padding:17px 20px; display:flex; flex-direction:column; gap:6px; }
.v2-art-card small { color:#a8c4ca; font-size:11px; }.v2-art-card span { color:#b9ced2; font-size:11px; }.v2-art-card b { color:#fff; font-size:16px; }
.v2-art-card.main { right:18%; top:14%; min-width:210px; }.v2-art-card.main strong { color:#b7f0e5; font-size:35px; line-height:1.2; direction:ltr; text-align:right; }
.v2-art-card.secondary { right:7%; bottom:14%; }.v2-art-card.tertiary { left:8%; bottom:20%; }
.v2-source-band { display:flex; gap:18px; align-items:flex-start; margin:20px 0 0; border:1px solid #d9e8e8; background:#f5faf9; border-radius:14px; padding:15px 20px; }
.v2-source-mark { white-space:nowrap; border-radius:7px; background:#d9eeea; color:#176152; padding:5px 10px; font-size:11px; font-weight:800; }
.v2-source-band p { margin:0; font-size:12px; line-height:1.9; color:#4d6570; }
.v2-source-band b { color:#194751; }
.v2-section { scroll-margin-top:78px; margin-top:clamp(56px,7vw,90px); }
.v2-heading { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:24px; }
.v2-section-number { display:block; color:#168076; font-size:11px; font-weight:800; letter-spacing:.03em; margin-bottom:11px; }
.v2-heading h2,.v2-next h2 { margin:0; font-size:clamp(24px,2.7vw,36px); color:#123746; line-height:1.4; letter-spacing:-.02em; }
.v2-heading p { margin:7px 0 0; color:#627883; font-size:13px; line-height:1.9; max-width:690px; }
.v2-source-ref { color:#71848c; font:11px var(--font-mono); direction:ltr; white-space:nowrap; }
.v2-modules { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.v2-module-card { width:100%; min-width:0; text-align:right; border:1px solid #dce8e9; border-radius:18px; background:#fff; padding:18px 16px; cursor:pointer; min-height:268px; display:flex; flex-direction:column; align-items:stretch; transition:transform .15s,border-color .15s,box-shadow .15s; }
.v2-module-card:hover { transform:translateY(-3px); border-color:#7bb9b5; box-shadow:0 12px 28px rgba(20,87,94,.09); }.v2-module-card.is-selected { border-color:#167d77; background:linear-gradient(180deg,#f4fbfa,#fff 63%); box-shadow:inset 0 3px #167d77,0 9px 25px rgba(20,87,94,.1); }
.v2-module-no { color:#0b6e6b; font:700 17px var(--font-mono); direction:ltr; text-align:right; }.v2-module-sub { color:#748993; font-size:10px; margin-top:7px; }
.v2-module-card strong { color:#163d4c; font-size:15px; margin:7px 0 13px; }.v2-module-list { display:flex; flex-direction:column; gap:8px; color:#516671; font-size:11px; line-height:1.5; }
.v2-module-list span { display:flex; align-items:start; gap:7px; }.v2-module-list span::before { content:""; flex:none; width:5px; height:5px; border-radius:50%; background:#36a098; margin-top:6px; }
.v2-module-count { margin-top:auto; padding-top:17px; color:#217d76; font-size:11px; font-weight:800; display:flex; justify-content:space-between; }
.v2-module-detail { background:#123847; border-radius:16px; color:#d4e9ec; padding:20px 24px; margin-top:12px; min-height:119px; }
.v2-detail-kicker { color:#77c8bc; font-size:11px; font-weight:700; }.v2-module-detail h3 { color:#fff; margin:6px 0; font-size:17px; }.v2-module-detail p { margin:0; font-size:12px; line-height:1.9; }
.v2-engine-bridge { margin-top:12px; border:1px solid #dce8e9; border-radius:16px; padding:23px 24px; display:flex; justify-content:space-between; align-items:center; gap:28px; background:#fff; }
.v2-bridge-index { font-size:11px; font-weight:800; color:#a16629; }.v2-engine-bridge h3 { font-size:18px; color:#123847; margin:5px 0; }.v2-engine-bridge p { max-width:760px; margin:0; color:#617782; font-size:12px; line-height:1.9; }
.v2-bridge-link { flex:none; color:#0c5e5b; background:#e5f4f1; padding:11px 15px; border-radius:9px; font-size:12px; font-weight:800; }.v2-bridge-link:hover { background:#d0ebe6; text-decoration:none; }
.v2-tier-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.v2-tier { min-height:147px; padding:20px; background:#fff; border:1px solid #dce8e9; border-radius:16px; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.v2-tier::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:#177b78; }.v2-tier:nth-child(2)::before{background:#279e8e}.v2-tier:nth-child(3)::before{background:#56ad99}.v2-tier:nth-child(4)::before{background:#dba86e}
.v2-tier:not(:last-child)::after { content:"←"; position:absolute; left:11px; top:17px; color:#85a8a8; font-size:20px; }
.v2-tier span { font-size:11px; color:#33837c; font-weight:800; }.v2-tier b { color:#143e4b; font-size:19px; margin:12px 0 7px; }.v2-tier small { color:#637984; line-height:1.7; font-size:11px; }
.v2-tier-after { display:flex; align-items:center; gap:14px; width:fit-content; max-width:100%; border:1px solid #d8e7e9; border-radius:13px; padding:13px 17px; margin-top:12px; background:#f9fcfb; }
.v2-ticket-symbol { display:grid; place-items:center; width:36px; height:36px; border-radius:9px; background:#dbefec; color:#126e68; font-size:21px; }.v2-tier-after div { display:flex; flex-direction:column; gap:3px; }.v2-tier-after b { color:#16414b; font-size:13px; }.v2-tier-after small { color:#6c828b; font-size:11px; }.v2-tier-after .v2-source-ref { margin-inline-start:12px; }
.v2-secondary-lane { display:flex; gap:16px; align-items:center; margin-top:13px; border:1px dashed #d2bc99; border-radius:13px; background:#fcf7ee; padding:13px 17px; font-size:11px; color:#725935; line-height:1.8; }.v2-secondary-lane b { flex:none; color:#925b1e; font-size:12px; }
.v2-conflict-picker { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }.v2-conflict-picker button { padding:9px 14px; border-radius:9px; border:1px solid #d4e1e4; background:#fff; color:#4f6874; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; }.v2-conflict-picker button.active { background:#154656; border-color:#154656; color:#fff; }.v2-conflict-picker button:hover:not(.active) { border-color:#358e8b; color:#176863; }
.v2-conflict-panel { border:1px solid #dbe7e8; border-radius:18px; padding:24px; background:#fff; }.v2-conflict-top { display:flex; justify-content:space-between; align-items:start; gap:14px; }.v2-conflict-top h3 { margin:5px 0 0; font-size:20px; color:#153c49; }.v2-conflict-explain { color:#536e79; font-size:12px; line-height:1.9; margin:8px 0 20px; }
.v2-result { border-radius:100px; padding:6px 11px; white-space:nowrap; font-size:11px; font-weight:800; }.v2-result.danger { background:#fbe8e2; color:#a03c28; }.v2-result.success { background:#e0f2e9; color:#247351; }
.v2-visual-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:14px; }.v2-resource-card,.v2-space-card { min-width:0; border:1px solid #e1ebec; border-radius:13px; background:#f8fbfb; padding:17px; }
.v2-card-overline { color:#6d8791; text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.02em; }.v2-tick-row { display:flex; justify-content:space-between; margin:24px 74px 7px 0; color:#84969d; font-size:10px; direction:ltr; }
.v2-track-row { display:flex; align-items:center; gap:8px; margin:10px 0; }.v2-track-label { width:67px; flex:none; color:#3d5964; font-size:10px; font-weight:700; }.v2-track { height:20px; flex:1; position:relative; background:repeating-linear-gradient(90deg,#e8eff0 0,#e8eff0 calc(25% - 1px),#ccdadd calc(25% - 1px),#ccdadd 25%); border-radius:4px; overflow:hidden; direction:ltr; }.v2-track-bar { position:absolute; top:3px; height:14px; background:#2b8b87; border-radius:4px; }.v2-track-bar.alt { background:#e5a364; }
.v2-graph { display:flex; align-items:center; justify-content:center; margin-top:27px; gap:8px; }.v2-graph-node { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#2b8b87; color:#fff; font-size:12px; font-weight:800; }.v2-graph-node.alt { background:#d8894d; }.v2-graph-edge { flex:0 1 110px; color:#69828c; font-size:10px; text-align:center; border-top:2px dashed #a9bfc3; padding-top:5px; }.v2-graph-edge.on { border-top:2px solid #c55f4a; color:#a44d3d; }
.v2-time-svg { width:100%; height:auto; margin-top:5px; overflow:visible; }.v2-time-svg line { stroke:#dce8e8; stroke-width:1; }.v2-time-svg text { fill:#778c95; font-size:12px; direction:ltr; text-anchor:middle; }.v2-time-svg .row-label { font-size:11px; text-anchor:end; }.v2-time-svg path { fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }.v2-time-svg .train-a { stroke:#298b87; }.v2-time-svg .train-b { stroke:#df9657; }.v2-time-svg .train-dot-a { fill:#298b87; }.v2-time-svg .train-dot-b { fill:#df9657; }
.v2-footnote { color:#748994; font-size:11px; line-height:1.9; margin:12px 0 0; }.v2-allocation-strip { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px; background:#e9f3f2; border-radius:12px; padding:16px; margin-top:12px; color:#176666; font-size:11px; font-weight:800; }
.v2-example-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:14px; }.v2-calculator { border:1px solid #dde9e9; background:#fff; border-radius:18px; padding:24px; }.v2-calc-top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:23px; }.v2-calc-top span { color:#21776e; background:#e7f5f0; border-radius:100px; font-size:11px; font-weight:800; padding:5px 10px; }.v2-calc-top span.changed { color:#775d33; background:#f9eed8; }.v2-calc-top button { border:0; background:transparent; color:#1c6969; font-family:inherit; font-size:11px; font-weight:700; text-decoration:underline; cursor:pointer; }
.v2-range { display:block; margin:0 0 23px; }.v2-range>span { display:flex; justify-content:space-between; color:#435e69; font-size:12px; font-weight:700; }.v2-range output { color:#114e57; font-size:16px; font-weight:800; }.v2-range input { width:100%; margin-top:12px; accent-color:#14827a; cursor:pointer; }
.v2-calc-conditions { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }.v2-calc-conditions span { border-radius:7px; background:#f2f7f7; color:#637b85; font-size:10px; padding:7px 9px; }.v2-calc-conditions b { color:#274c5a; }
.v2-number-result { border-radius:18px; background:linear-gradient(150deg,#154958,#0b303f 70%); color:#fff; padding:30px; display:flex; flex-direction:column; justify-content:center; min-height:337px; }.v2-number-result .v2-card-overline { color:#a2d8d0; }.v2-number-large { margin:20px 0; display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; }.v2-number-large strong { font-size:clamp(39px,5vw,62px); line-height:1; letter-spacing:-.03em; color:#b9f0e6; direction:ltr; }.v2-number-large span { color:#d5e7e8; font-size:14px; }.v2-equation { display:flex; align-items:center; gap:9px; flex-wrap:wrap; border-top:1px solid #457280; border-bottom:1px solid #457280; padding:14px 0; color:#bdd6db; font-size:12px; }.v2-equation b { color:#fff; font-size:15px; }.v2-number-result p { font-size:11px; color:#bdcfd4; line-height:1.9; margin:17px 0 0; }
.v2-roadmap { border-top:1px solid #dbe8e8; padding-top:45px; }.v2-phase-list { padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.v2-phase-list li { border:1px solid #dce8e8; background:#fff; border-radius:11px; padding:14px; display:flex; align-items:center; gap:11px; color:#425f6b; font-size:11px; }.v2-phase-list span { display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:8px; background:#e3f2f0; color:#137169; font-size:14px; }.v2-phase-list b { font-weight:700; }
.v2-next { margin:70px 0 15px; background:#e7f2ef; border-radius:20px; padding:32px; display:flex; justify-content:space-between; align-items:center; gap:25px; }.v2-next p { font-size:12px; line-height:1.9; color:#5a7380; max-width:610px; }.v2-next>div:last-child { display:flex; gap:8px; flex-wrap:wrap; }.v2-next button { border:1px solid #1b7771; color:#fff; background:#166c68; border-radius:9px; padding:10px 14px; font-family:inherit; font-size:11px; font-weight:700; cursor:pointer; }.v2-next button:last-child { background:transparent; color:#136b65; }
.v2-page button:focus-visible,.v2-page a:focus-visible,.v2-page input:focus-visible { outline:3px solid #e5ac60; outline-offset:3px; }
@media (max-width:1120px) { .v2-modules { grid-template-columns:repeat(3,minmax(0,1fr)); }.v2-hero-art { min-height:430px; } }
@media (max-width:800px) { .v2-hero { grid-template-columns:1fr; }.v2-hero-copy { padding:32px; }.v2-hero-art { min-height:270px; }.v2-art-card.main { top:10%; }.v2-art-card.secondary { bottom:9%; }.v2-art-card.tertiary { bottom:13%; }.v2-modules { grid-template-columns:repeat(2,minmax(0,1fr)); }.v2-tier-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.v2-visual-grid,.v2-example-grid { grid-template-columns:1fr; }.v2-phase-list { grid-template-columns:repeat(2,minmax(0,1fr)); }.v2-engine-bridge,.v2-next { align-items:stretch; flex-direction:column; }.v2-bridge-link { width:fit-content; } }
@media (max-width:520px) { .v2-hero { border-radius:18px; }.v2-hero-copy { padding:27px 22px; }.v2-hero h1 { font-size:35px; }.v2-hero-art { min-height:240px; }.v2-art-card { padding:10px 12px; border-radius:11px; }.v2-art-card.main { right:10%; top:12%; min-width:165px; }.v2-art-card.main strong { font-size:24px; }.v2-art-card.secondary { right:5%; bottom:8%; }.v2-art-card.tertiary { left:4%; bottom:12%; }.v2-art-card b { font-size:12px; }.v2-art-card small,.v2-art-card span { font-size:9px; }.v2-source-band { flex-direction:column; gap:9px; }.v2-heading { align-items:start; flex-direction:column; gap:7px; }.v2-modules { grid-template-columns:1fr; }.v2-module-card { min-height:0; }.v2-tier-grid { grid-template-columns:1fr; }.v2-tier { min-height:120px; }.v2-tier::after { display:none; }.v2-tier-after { align-items:start; }.v2-tier-after .v2-source-ref { display:none; }.v2-secondary-lane { align-items:start; flex-direction:column; gap:3px; }.v2-conflict-panel { padding:16px; }.v2-conflict-top { align-items:start; flex-direction:column; }.v2-tick-row { margin-right:65px; }.v2-allocation-strip { font-size:10px; }.v2-calculator,.v2-number-result { padding:20px; }.v2-calc-top { align-items:start; flex-direction:column; }.v2-phase-list { grid-template-columns:1fr; }.v2-next { padding:23px; } }
@media (prefers-reduced-motion:reduce) { .v2-page * { scroll-behavior:auto !important; transition:none !important; } }