/* Homepage stories: progressive enhancement, no automatic rotation. */
.cv-connected header .brand { font-weight:800; letter-spacing:-.045em; line-height:1.1 }
.story-hero [hidden] { display:none!important }
.cv-connected .story-hero { padding-top:32px }
.story-tabs { display:flex; width:fit-content; max-width:100%; margin:0 auto 40px; gap:4px; padding:5px; border:1px solid #294155; border-radius:99px; background:#0c1b2a }
.story-tabs button { border:0; background:transparent; border-radius:99px; color:#b5c6d6; padding:13px 23px; font:600 15px/1.2 'Inter Tight',sans-serif; cursor:pointer; min-height:48px }
.story-tabs button span { font:11px 'JetBrains Mono',monospace; margin-right:9px; opacity:.7 }
.story-tabs button[aria-selected="true"] { background:#d8f9ff; color:#092234; box-shadow:0 2px 16px #16cef018 }
.story-tabs button:hover:not([aria-selected="true"]) { background:#152e42; color:#fff }
.story-hero button:focus-visible { outline:3px solid #16cef0; outline-offset:4px }
.story-copy { min-height:298px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start }
.story-hero .story-copy h2 { font-size:clamp(40px,5.5vw,76px); line-height:1.04; letter-spacing:-.04em; margin:0 0 22px }
.story-copy h2 span { color:#16cef0 }
.story-copy .cv-eyebrow { margin-bottom:16px }
.story-copy .cv-intro { font-size:clamp(18px,1.7vw,21px); max-width:720px; margin-bottom:23px; min-height:63px }
.story-copy .cv-actions { margin-top:auto }
.story-beta { border:1px solid #456071; padding:3px 7px; border-radius:4px; font-size:10px; margin-left:8px; vertical-align:middle }
.story-panel .cv-house { margin-top:28px }
.story-panel .cv-house img { border-radius:20px; aspect-ratio:1672 / 941; object-fit:cover }
.story-panel .cv-house figcaption { margin:10px 0 0 }
.story-qualification { font-size:13px; color:#aab8ca; line-height:1.6; max-width:880px; margin:16px auto 0; text-align:center }
.story-stage { position:relative; margin:28px 0 0; aspect-ratio:1672 / 941; border-radius:20px; border:1px solid #294357; background:radial-gradient(ellipse at 60% 20%,#103c50,transparent 65%),#0a1b2a }
.story-stage figcaption { position:absolute; bottom:17px; left:20px; right:20px; font-size:12px; color:#aab8ca; text-align:center }
.story-navigation { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #294155; padding:23px 0 27px; gap:15px }
.story-navigation p { margin:0; display:flex; align-items:center; gap:23px; text-align:left }
.story-count { font:12px/1.5 'JetBrains Mono',monospace; color:#d8f9ff }
.story-hint { font-size:13px; color:#9cb1c6 }
.story-navigation>div { display:flex; gap:8px }
.story-navigation button { width:44px; height:44px; border-radius:50%; border:1px solid #436074; background:#0c2131; color:#d8f9ff; font-size:22px; cursor:pointer }
.story-navigation button:hover { background:#1b3b4d }
.story-panel:not([role="tabpanel"]) + .story-panel { margin-top:70px }
.away-stage { display:grid; grid-template-columns:1.05fr .45fr 1fr; align-items:center; padding:55px 36px 68px; text-align:left; overflow:hidden }
.scene-label { display:block; color:#80b6cb; font:11px/1.6 'JetBrains Mono',monospace; letter-spacing:.12em; margin-bottom:20px }
.away-home img { width:100%; height:auto; border-radius:12px; border:1px solid #355267; display:block }
.scene-caption { padding:20px 0 0 }
.scene-caption strong { display:block; font-size:23px; letter-spacing:-.02em; margin-bottom:8px }
.scene-caption>span { display:block; font-size:15px; color:#aabed0; line-height:1.5 }
.away-connection { text-align:center; position:relative; color:#72dfee; align-self:center }
.connection-line { display:block; overflow:hidden; white-space:nowrap; width:100%; position:absolute; top:23px }
.connection-lock { display:grid; place-items:center; width:46px; height:46px; border:1px solid #2e8d9d; background:#0e3140; border-radius:50%; position:relative; margin:0 auto 15px; font-size:26px }
.away-connection strong { font-size:12px; line-height:1.5; font-weight:500 }
.quality-preview { display:flex; gap:12px; align-items:center; padding:22px 16px; background:#122e42; border:1px solid #366075; border-radius:14px; margin:12px 0; box-shadow:0 16px 32px #0002 }
.quality-preview strong { display:block; font-size:20px; letter-spacing:-.02em; margin-bottom:5px }
.quality-preview div>span { display:block; font-size:12px; color:#b5c6d6 }
.quality-icon { font-size:32px; color:#61d4f0 }
.quality-estimate { margin-left:auto; font:24px/1.2 'Inter Tight',sans-serif; font-weight:600; color:#8aebed; white-space:nowrap }
.quality-estimate small { display:block; font:10px/1.8 'JetBrains Mono',monospace; color:#aabed0 }
.audio-preview { background:#143635; border-color:#32615b }
.audio-wave { display:flex; align-items:center; gap:3px; height:30px }
.audio-wave i { display:block; width:3px; height:14px; background:#83d8c2; border-radius:3px }
.audio-wave i:nth-child(2n) { height:25px }
.audio-wave i:nth-child(3) { height:35px }
.away-choices>p { margin:22px 0 0; font-size:18px; line-height:1.5; color:#bfd1df }
.library-stage { overflow:hidden; text-align:left; background:radial-gradient(ellipse at 70% 30%,#11424d,transparent 60%),#0b1b2c }
.library-desktop { position:absolute; left:6%; top:12%; width:72%; border:1px solid #49657b; border-radius:12px; background:#101c2a; box-shadow:0 25px 50px #0006; overflow:hidden }
.library-desktop img { width:100%; height:auto; display:block }
.device-topline { display:flex; align-items:center; gap:9px; padding:10px 14px; font:9px 'JetBrains Mono',monospace; color:#a7bdcc }
.device-topline i { background:#65cfc2; width:6px; height:6px; border-radius:50% }
.library-phone { position:absolute; width:19%; right:7%; top:9%; border:5px solid #324c60; border-radius:25px; box-shadow:0 20px 45px #0009; overflow:hidden; background:#10151d }
.library-phone img { width:100%; height:auto; display:block }
.library-sync { position:absolute; bottom:10%; left:11%; display:flex; align-items:center; gap:15px; padding:16px 24px; background:#10302fee; border:1px solid #4a877b; box-shadow:0 16px 28px #0005; border-radius:13px }
.library-sync>span { font-size:34px; color:#8ee3d3 }
.library-sync strong { display:block; font-size:21px; margin-bottom:5px }
.library-sync div>span { font-size:12px; color:#b6cbd2 }
.cv-connected .story-tools { padding:72px 0 48px }
.story-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:32px }
.story-section-heading h2 { font-size:clamp(30px,3.5vw,46px); letter-spacing:-.03em; line-height:1.08; margin:0 }
.story-section-heading .cv-eyebrow { font-size:11px; margin-bottom:15px }
.story-section-heading>p { max-width:330px; color:#b1c1d1; font-size:17px; line-height:1.6; margin:0 }
.story-tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
.story-tool { border:1px solid #2b4255; background:#0b1b2a; border-radius:18px; padding:24px; overflow:hidden; scroll-margin-top:120px }
.tool-label { display:block; color:#83c7de; font:10px/1.6 'JetBrains Mono',monospace; letter-spacing:.1em; margin:23px 0 10px }
.story-tool h3 { font-size:27px; line-height:1.1; letter-spacing:-.025em; margin:0 0 13px }
.story-tool p { color:#c1ccda; font-size:16px; line-height:1.65; margin:0 0 14px }
.story-tool .tool-note { font-size:12px; color:#9bafc0; margin-bottom:0 }
.story-text-link { display:inline-block; font-size:15px; font-weight:600; color:#7fd9ef; text-decoration:none; padding:5px 0 }
.story-text-link:hover { text-decoration:underline }
.tool-art { height:160px; position:relative; border-radius:10px; overflow:hidden; background:#122d3d }
.upscale-art { display:flex; align-items:center; justify-content:center; gap:25px; background:radial-gradient(ellipse at 75% 50%,#194d58,transparent 65%),#102637 }
.upscale-art>span { position:relative; z-index:1; color:#8babbb; font:26px 'JetBrains Mono',monospace }
.upscale-art .upscale-arrow { color:#66afbe; font-size:35px }
.upscale-art .upscale-target { color:#bcffff; font-size:58px; letter-spacing:-.08em; text-shadow:0 0 25px #58dae965 }
.detail-lines { position:absolute; inset:0; opacity:.22; background:repeating-linear-gradient(0deg,transparent 0 15px,#6eb2be 16px,transparent 17px),repeating-linear-gradient(90deg,transparent 0 15px,#6eb2be 16px,transparent 17px); mask-image:linear-gradient(90deg,transparent,#000) }
.pip-art { background:#0c202d; padding:15px }
.pip-main { position:relative; height:100%; border:1px solid #52896d; border-radius:7px; background:repeating-linear-gradient(90deg,#173c32 0 32px,#1a4638 32px 64px); overflow:hidden }
.pip-main>span { position:absolute; top:12px; left:12px; font:8px 'JetBrains Mono',monospace; color:#cce6d5 }
.field-lines { position:absolute; border:1px solid #8cb79866; inset:38px 24px 14px }
.field-lines:after { content:''; position:absolute; top:0; left:50%; bottom:0; width:1px; background:#8cb79866 }
.pip-inset { position:absolute; bottom:9px; right:9px; width:40%; height:55%; border:2px solid #c4f1f7; border-radius:5px; background:linear-gradient(35deg,#705031,#ab7750); display:grid; place-content:center; text-align:center; font:8px/1.5 'JetBrains Mono',monospace; color:#fff }
.pip-swap { position:absolute; top:7px; right:7px; width:27px; height:27px; border-radius:50%; background:#d8f9ff; color:#092234; display:grid; place-items:center }
.guide-art { padding:22px; display:flex; flex-direction:column; justify-content:center; gap:12px; background:linear-gradient(140deg,#10283c,#182b41) }
.guide-art>div { display:flex; gap:7px; align-items:center }
.guide-chip { font:8px 'JetBrains Mono',monospace; color:#c1e9f2; background:#23506a; border-radius:4px; padding:9px; min-width:91px }
.guide-art i { width:24px; height:24px; border-radius:4px; background:#36546f }
.guide-art>div:nth-child(2) .guide-chip { background:#3e3f6a }
.guide-art>div:nth-child(3) .guide-chip { background:#28615a }
.offline-tool { grid-column:1/-1; display:flex; align-items:center; gap:28px; padding:28px 32px }
.offline-tool .tool-label { margin-top:0 }
.offline-tool h3 { font-size:25px }
.offline-tool p { margin-bottom:7px }
.offline-symbol { flex-shrink:0; display:grid; place-items:center; width:76px; height:76px; border-radius:50%; font-size:39px; background:#193246; color:#8bdbed; border:1px solid #375b71 }
.cv-connected .away-explainer { padding:52px 0 64px; background:#0b1b29; border-block:1px solid #263e50 }
.away-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin:42px 0 28px }
.away-steps article { border-top:1px solid #3d6276; padding-top:20px }
.away-steps article>span { color:#72c9df; font:11px 'JetBrains Mono',monospace }
.away-steps h3 { font-size:24px; letter-spacing:-.02em; margin:17px 0 10px }
.away-steps p { font-size:16px; line-height:1.65; color:#b9cada; margin:0 }
.away-explainer .story-qualification { text-align:left; margin-left:0; margin-bottom:13px }
@media(max-width:1000px) {
  .away-stage { padding:30px 22px 55px; grid-template-columns:1fr .28fr 1fr }
  .quality-preview { padding:15px 12px; gap:8px }
  .quality-preview strong { font-size:17px }
  .quality-estimate { font-size:21px }
  .quality-icon,.audio-wave { display:none }
  .scene-caption strong { font-size:20px }
  .scene-caption>span { font-size:13px }
  .story-tool { padding:18px }
  .story-tool h3 { font-size:23px }
  .guide-art { padding:15px }
  .guide-art i { width:18px }
}
@media(max-width:700px) {
  .cv-connected .story-hero { padding-top:24px }
  .story-tabs { width:100%; gap:2px; margin-bottom:30px; padding:4px }
  .story-tabs button { flex:1; padding:10px 6px; font-size:12px; white-space:nowrap; min-height:44px }
  .story-tabs button span { display:none }
  .story-copy { min-height:345px }
  .story-hero .story-copy h2 { font-size:clamp(36px,8.4vw,52px) }
  .story-copy .cv-intro { min-height:108px; font-size:18px }
  .story-copy .cv-eyebrow { font-size:10px }
  .story-copy .cv-actions { gap:10px }
  .story-copy .btn { padding:12px 16px; font-size:14px }
  .story-panel .cv-house img { aspect-ratio:1; object-fit:cover }
  .story-stage { aspect-ratio:1; border-radius:14px }
  .story-panel .cv-house img { border-radius:14px }
  .story-stage figcaption { bottom:10px; left:10px; right:10px; font-size:10px }
  .story-panel .cv-house figcaption { font-size:11px }
  .story-qualification { font-size:11px; min-height:53px }
  .away-stage { grid-template-columns:1fr 1.1fr; gap:12px; padding:20px 15px 42px }
  .away-connection { display:none }
  .scene-label { font-size:8px; letter-spacing:.07em; margin-bottom:12px }
  .scene-caption { padding-top:12px }
  .scene-caption strong { font-size:17px; line-height:1.15 }
  .scene-caption>span { font-size:11px }
  .quality-preview { padding:13px 10px; display:block; margin:8px 0; border-radius:9px }
  .quality-preview strong { font-size:17px }
  .quality-preview div>span { font-size:10px }
  .quality-estimate { display:block; font-size:20px; margin-top:10px }
  .quality-estimate small { display:inline; margin-left:5px; font-size:8px }
  .away-choices>p { display:none }
  .library-desktop { left:4%; top:17%; width:82% }
  .library-phone { width:27%; right:5%; top:11%; border-width:3px; border-radius:14px }
  .device-topline { font-size:6px; padding:7px }
  .library-sync { bottom:14%; left:7%; gap:9px; padding:11px 13px }
  .library-sync>span { font-size:24px }
  .library-sync strong { font-size:16px }
  .library-sync div>span { font-size:9px }
  .story-navigation { padding:18px 0 22px }
  .story-navigation p { display:block }
  .story-count { font-size:10px }
  .story-hint { display:block; font-size:10px; margin-top:5px }
  .story-section-heading { display:block }
  .story-section-heading>p { margin-top:18px; max-width:none; font-size:16px }
  .story-tool-grid,.away-steps { grid-template-columns:1fr }
  .story-tool { padding:24px }
  .tool-art { height:190px }
  .story-tool h3 { font-size:27px }
  .guide-art { padding:26px }
  .guide-art i { width:32px }
  .offline-tool { gap:16px; padding:24px; align-items:flex-start }
  .offline-symbol { width:42px; height:42px; font-size:26px }
  .offline-tool h3 { font-size:25px }
  .cv-connected .story-tools { padding-top:42px }
  .away-steps { gap:25px; margin-top:30px }
}
@media(prefers-reduced-motion:no-preference) {
  .story-tabs button { transition:background .15s ease,color .15s ease }
  .story-panel[role="tabpanel"]:not([hidden]) { animation:story-reveal .22s ease-out }
  @keyframes story-reveal { from { opacity:.6 } to { opacity:1 } }
}
.party-scene { margin:0; padding:26px; border-radius:18px; border:1px solid #345267; background:radial-gradient(ellipse at top right,#174151,transparent 75%),#0d2130 }
.party-scene-heading { margin-bottom:26px }
.party-scene-heading .scene-label { font-size:10px; margin-bottom:10px }
.party-live { font:11px 'JetBrains Mono',monospace; color:#84e1c8 }
.party-screens { display:grid; grid-template-columns:1fr 24px 1fr; gap:8px; align-items:center }
.party-screens img { width:100%; height:auto; display:block; border-radius:6px; border:1px solid #456578 }
.party-screens div>span { display:block; margin-top:12px; color:#d6e8f0; font-size:17px }
.party-screens small { display:block; font:8px/2 'JetBrains Mono',monospace; color:#80afbf }
.party-link { color:#72dfee; font-size:24px; text-align:center }
.party-message { display:flex; align-items:center; gap:10px; border:1px solid #3b5d6b; border-radius:10px; background:#163341; margin:22px 0 15px; padding:12px }
.party-avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#506678; color:#fff; font-size:14px }
.party-message p { margin:0; color:#d9e4e9; font-size:14px }
.party-message strong { display:block; font-size:10px; color:#92bdce; margin-bottom:3px }
.party-scene figcaption { color:#9eb5c6; font-size:11px; line-height:1.5 }