/* FluxSpot V2: readability and accessible interaction overrides.
   Load after styles.css. Decorative brand color is kept separate from
   readable text, meaningful control boundaries, and keyboard focus. */
:root {
  --font-body: Manrope, Arial, sans-serif;
  --type-body: 1rem;
  --type-secondary: .875rem;
  --type-caption: .8125rem;
}
html[data-theme="dark"] {
  --muted: #b3c4be;
  --control-border: #78978b;
  --story-text: #eff4ee;
  --story-muted: #c2d2cb;
  --story-panel: #071918f2;
  --story-control: #102b24f5;
}
html[data-theme="light"] {
  --muted: #496258;
  --control-border: #687f72;
  --story-text: #173b2b;
  --story-muted: #496258;
  --story-panel: #e9eee5f5;
  --story-control: #e9eee5fa;
}
body {font-family:var(--font-body); font-size:var(--type-body); line-height:1.5}
button, input, select {font-family:inherit}
button, input, select, a, summary {touch-action:manipulation}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline:3px solid #fff;
  outline-offset:3px;
  box-shadow:0 0 0 6px #082820;
}
/* Keep focused controls clear of the fixed header, including browser zoom. */
button, input, select, a, summary, [tabindex] {scroll-margin-block:110px 32px}
.skip {font-size:16px; min-height:48px; z-index:1000}
.site-header {gap:16px}
.desktop-nav {gap:24px}
.desktop-nav a {font-size:14px; min-height:44px; display:inline-flex; align-items:center}
.header-actions {gap:16px}
.button {font-size:14px; min-height:48px; line-height:1.5; font-weight:650}
.button.small {font-size:13px; min-height:44px; padding:12px 16px}
.theme-toggle {width:44px; height:44px; flex:0 0 44px}
.menu-toggle {width:44px; height:44px; flex:0 0 44px; align-items:center}
.watch-button {font-size:14px; min-height:44px; line-height:1.5}
.video-length {font-size:12px; opacity:1; color:inherit}
.play-icon {width:36px; height:36px; font-size:11px}
.text-link {font-size:14px; min-height:44px; padding-block:12px; line-height:1.5}
.eyebrow, .hero-eyebrow {font-size:12px; letter-spacing:1.1px; line-height:1.65}
.edition {font-size:12px; opacity:1; letter-spacing:1.2px}
.hero-intro p {font-size:16px; line-height:1.65}
.hero-content {padding-top:clamp(128px,16vh,176px); padding-bottom:112px}
.hero h1 {margin-top:28px; margin-bottom:32px}
.hero-buttons {gap:24px}
.hero-foot {height:68px; font-size:12px; gap:20px}
.hero-foot a, .motion-control {min-height:44px; font-size:12px; padding-block:10px; line-height:1.5}
.hero-foot>span {opacity:1; font-size:12px}
.signal-caption {font-size:11px; line-height:1.5; letter-spacing:.9px; opacity:1}
.spot-bubble small {font-size:12px}
.tiny {font-size:12px; letter-spacing:1px}
.body-copy, .ecosystem-heading p {font-size:16px; line-height:1.75}
.orbit span {font-size:13px; line-height:1.6}
.step {opacity:1; border-top-color:var(--line); transition:border-color .25s}
.step.active {border-top-color:var(--accent)}
.step>span {font-size:13px; font-weight:650}
.step h3 {font-size:20px; line-height:1.4}
.step p {font-size:16px; line-height:1.7; max-width:380px}
.stage-top {font-size:12px; letter-spacing:.8px; line-height:1.6}
.app-stage-caption {font-size:14px; line-height:1.6; align-items:flex-start}
.app-stage-caption button {font-size:14px; min-height:44px; padding:10px 0; line-height:1.5; text-align:left}
.demo-note {font-size:13px; line-height:1.6; color:#b3c4be; display:block}
.interlude-bottom p {font-size:16px; line-height:1.7}
.coordinate {font-size:12px; letter-spacing:1px; line-height:1.8}
.audience-tabs button {font-size:12px; min-height:56px; gap:14px; padding:18px 16px}
.audience-tabs button>span:first-child {font-size:16px; line-height:1.5}
.audience-tabs button[aria-selected="true"] {font-weight:650}
.audience-tabs button[aria-selected="true"]:after {height:3px}
.visual-label {font-size:15px; line-height:1.5}
.visual-index {font-size:12px; line-height:1.6; letter-spacing:.8px}
.audience-panel[data-kind="technology"] .visual-label {font-size:14px}
.audience-copy p {font-size:16px; line-height:1.75; max-width:430px}
.audience-copy li {font-size:15px; line-height:1.65; padding:12px 0}
.questions .eyebrow {font-size:12px}
summary {font-size:16px; line-height:1.5; min-height:56px; padding:20px 0}
details p {font-size:16px; line-height:1.75}
/* A restrained closing panel replaces the large saturated mint field. */
.closing {background:#133d35; color:#e9f1ed}
.closing h2>span {color:#b2d2c5}
.closing .status-dot {background:#70f3c7; box-shadow:none}
.closing-bottom p {font-size:16px; line-height:1.7}
.closing .dark-button {background:#70f3c7; color:#08352a}
.closing .dark-button:hover {background:#a5ffdf}
.closing-mark {opacity:.065}
html[data-theme="light"] .closing {background:#e6eee9; color:#133d35}
html[data-theme="light"] .closing h2>span {color:#3e6557}
html[data-theme="light"] .closing .status-dot {background:#17694e}
html[data-theme="light"] .closing .dark-button {background:#133d35; color:#f0f6f2}
html[data-theme="light"] .closing .dark-button:hover {background:#235b45}
.footer-top p {font-size:15px; line-height:1.7}
.footer-top>div {font-size:14px; gap:6px}
.footer-top>div a {min-height:44px; display:inline-flex; align-items:center; padding-block:10px; overflow-wrap:anywhere}
.footer-bottom {font-size:13px; line-height:1.65; align-items:center; gap:16px 24px}
.footer-bottom a, .footer-bottom button {font-size:13px; min-height:44px; display:inline-flex; align-items:center; padding-block:10px; line-height:1.5; text-align:left}
/* Native dialogs retain browser modality, Escape, and keyboard handling. */
dialog {padding:56px 40px 32px; max-height:90svh}
.dialog-close {top:8px; right:10px; width:44px; height:44px; line-height:44px; min-height:44px; padding:0}
.dialog-heading p, .privacy-dialog p {font-size:16px; line-height:1.7}
form label {font-size:14px; line-height:1.5}
input, select {font-size:16px; min-height:48px; line-height:1.5; border-color:var(--control-border); padding:12px}
input::placeholder {color:var(--muted); opacity:1}
.consent {font-size:14px; min-height:44px; gap:12px; align-items:flex-start; line-height:1.6}
.consent input {width:20px; height:20px; min-height:20px; padding:0; margin:2px 0 0; flex:0 0 20px}
.form-disclosure {font-size:13px; line-height:1.7}
.form-result {font-size:16px; line-height:1.65}
.form-result p {font-size:14px; line-height:1.7}
.form-result .text-link {font-size:14px}
.form-result>.button {font-size:14px}
.request-routing {font-size:14px; line-height:1.7}
.request-routing>div {grid-template-columns:54px minmax(0,1fr)}
.request-routing dd {min-width:0; overflow-wrap:anywhere}
.video-dialog {padding:56px 20px 20px}
.video-dialog video {max-height:66svh}
.video-dialog p {font-size:14px; line-height:1.65}
/* All story copy sits on a dark/light panel rather than crossing changing
   video, road, foliage, and building tones. No text opacity is reduced. */
.journey-chapter {padding:20px 24px; background:var(--story-panel); border:1px solid var(--line); border-radius:3px; color:var(--story-text); max-width:660px}
.journey-chapter p, html[data-theme="light"] .journey-chapter p {font-size:16px; line-height:1.7; color:var(--story-muted); max-width:410px}
.journey-chapter .eyebrow, html[data-theme="light"] .journey-chapter .eyebrow {font-size:12px; color:var(--story-muted); line-height:1.6}
.chapter-detail {font-size:12px; line-height:1.6; letter-spacing:.5px; opacity:1; color:var(--story-muted); max-width:410px}
.journey-progress {width:min(51%,680px); max-width:680px; bottom:94px}
.journey-track {height:2px; margin-bottom:8px}
.journey-track>span {height:2px}
.journey-stops {gap:8px}
.journey-stops button, html[data-theme="light"] .journey-stops button {background:var(--story-control); color:var(--story-muted); border:1px solid var(--control-border); border-radius:2px; font-size:13px; line-height:1.5; padding:10px 12px; min-height:44px; gap:8px; justify-content:center; flex:1 1 0; white-space:nowrap}
.journey-stops button span {font-size:12px; opacity:1}
.journey-stops button.active, .journey-stops button:hover {color:#eafff3; border-color:#9ee9c9}
.journey-stops button.active {box-shadow:inset 0 -3px #70f3c7; font-weight:650}
html[data-theme="light"] .journey-stops button.active, html[data-theme="light"] .journey-stops button:hover {color:#133d35; border-color:#17694e}
html[data-theme="light"] .journey-stops button.active {box-shadow:inset 0 -3px #17694e}
/* Preserve the two-tone focus even when an active chapter has an inset rule. */
.journey-stops button:focus-visible, .journey-stops button.active:focus-visible,
html[data-theme="light"] .journey-stops button:focus-visible,
html[data-theme="light"] .journey-stops button.active:focus-visible {box-shadow:0 0 0 6px #082820}
.journey-note, html[data-theme="light"] .journey-note {font-size:12px; color:var(--story-muted); letter-spacing:.7px; background:var(--story-panel); padding:8px 12px; border-radius:2px; max-width:90%; line-height:1.6}
.world-label, .coverage-label {background:#10392ff5; color:#e9fff1; font-size:14px; line-height:1.45; max-width:270px; white-space:normal}
.world-label small {font-size:11px; line-height:1.5; letter-spacing:.6px; color:#c2d8cb; margin-left:0}
.coverage-label {font-size:13px; background:#10392ff5}
html[data-theme="light"] .world-label, html[data-theme="light"] .coverage-label {background:#f2fff4f5; color:#1b5c3e}
html[data-theme="light"] .world-label small {color:#3e6557}
.journey-accessible p {font-size:16px; line-height:1.75}
@media (max-width:1100px) {
  .desktop-nav {display:none}
  .header-join {display:none}
  .menu-toggle {display:flex; background:none; border:0; flex-direction:column; justify-content:center; gap:6px; padding:6px}
  .menu-toggle span {width:23px; height:1px; background:currentColor; transition:transform .25s}
  .menu-toggle[aria-expanded="true"] span:first-child {transform:translateY(3.5px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:last-child {transform:translateY(-3.5px) rotate(-45deg)}
  .mobile-nav {display:flex; flex-direction:column; gap:0; position:fixed; z-index:19; inset:88px 0 auto; background:var(--bg); padding:16px 6% 24px; border-bottom:1px solid var(--line); box-shadow:0 20px 40px #0004; max-height:calc(100svh - 88px); overflow:auto}
  .mobile-nav a, .mobile-nav button {font-size:20px; line-height:1.5; min-height:48px; padding:14px 0; border:0; border-bottom:1px solid var(--line); text-align:left; background:none; color:var(--text)}
  .mobile-nav button {font-size:16px; color:var(--accent)}
  .journey-chapter {width:47%; padding:18px 20px; top:26%}
  .journey-progress {width:54%}
  .journey-note {font-size:12px; letter-spacing:.5px}
}
@media (max-width:800px) {
  .site-header {padding:18px 5%; gap:12px}
  .site-header.scrolled {padding-block:12px}
  .brand>span {font-size:18px; letter-spacing:2px}
  .brand>svg {width:32px; height:30px}
  .header-actions {gap:10px}
  .mobile-nav {inset-block-start:80px; max-height:calc(100svh - 80px)}
  .hero-content {padding:128px 6% 120px}
  .hero h1 {font-size:clamp(44px,12.1vw,92px); line-height:1.08; margin:24px 0 28px}
  .hero-eyebrow {font-size:12px; letter-spacing:.7px}
  .hero-intro p {font-size:16px; line-height:1.65}
  .hero-buttons {gap:12px; margin-top:24px}
  .hero-buttons .button {padding:14px 20px; font-size:14px; min-height:48px; gap:20px; max-width:100%}
  .watch-button {font-size:14px}
  .hero-foot {font-size:12px; left:6%; right:6%; height:68px; gap:12px}
  .hero-foot a, .motion-control {font-size:12px; gap:8px}
  .eyebrow, .questions .eyebrow, .closing .eyebrow {font-size:12px; line-height:1.65; letter-spacing:.8px}
  .body-copy, .ecosystem-heading p {font-size:16px}
  .statement-bottom {grid-template-columns:1fr 1.4fr; gap:24px}
  .orbit span {font-size:13px}
  .step p {font-size:16px}
  .app-stage {padding:16px}
  .stage-top {font-size:12px; letter-spacing:.6px}
  .app-stage-caption {font-size:14px; flex-wrap:wrap; gap:4px 16px}
  .app-stage-caption button {font-size:14px}
  .demo-note {font-size:13px}
  .interlude-bottom p {font-size:16px}
  .coordinate {font-size:11px; letter-spacing:.5px}
  .audience-tabs {grid-template-columns:1fr; margin-bottom:28px}
  .audience-tabs button {padding:14px 12px; min-height:52px; gap:16px; font-size:12px}
  .audience-tabs button+button {border-left:0; border-top:1px solid var(--line)}
  .audience-tabs button>span:first-child {font-size:16px}
  .audience-tabs button>span:last-child {display:block}
  .audience-tabs button[aria-selected="true"]:after {inset:8px auto 8px 0; width:3px; height:auto}
  .audience-copy p {font-size:16px}
  .audience-copy li {font-size:15px}
  .visual-label {max-width:calc(100% - 32px); font-size:14px; white-space:normal; width:max-content}
  .visual-index {font-size:12px; left:18px; bottom:18px; right:18px}
  .footer-top>div {font-size:14px; gap:4px 20px; min-width:0; max-width:100%}
  .footer-top p {font-size:14px}
  .footer-bottom, .footer-bottom button, .footer-bottom a {font-size:13px}
  dialog {padding:56px 24px 28px}
  .dialog-heading h2, .privacy-dialog h2 {font-size:40px}
  .form-row {gap:0; grid-template-columns:1fr}
  .form-result {padding:16px}
  .form-result>.button {gap:14px; padding-inline:16px; font-size:14px}
  .video-dialog {padding:56px 12px 20px}
  .video-dialog video {max-height:62svh}
  .journey-chapter {top:16%; left:6%; width:88%; padding:18px 20px; max-width:none}
  .journey-chapter h2 {font-size:clamp(32px,8.6vw,60px); line-height:1.1; margin:16px 0}
  .journey-chapter p, html[data-theme="light"] .journey-chapter p {font-size:15px; line-height:1.6; max-width:100%}
  .journey-chapter .eyebrow, html[data-theme="light"] .journey-chapter .eyebrow {font-size:12px; line-height:1.5}
  .chapter-detail {font-size:12px; line-height:1.5; margin-top:16px; max-width:100%; letter-spacing:.2px}
  .journey-chapter .button {font-size:14px; min-height:48px; padding:12px 16px; margin-top:18px; gap:16px; max-width:100%}
  .journey-note {top:90px; left:6%; right:auto; font-size:11px; padding:6px 9px; letter-spacing:.3px; max-width:88%}
  .journey-progress {left:6%; width:88%; bottom:78px; max-width:none}
  .journey-stops {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px}
  .journey-stops button, html[data-theme="light"] .journey-stops button {font-size:13px; min-height:44px; padding:9px 10px; gap:8px}
  .journey-stops button span {font-size:12px}
  .world-label {font-size:13px; padding:10px 12px; max-width:220px}
  .world-label small {font-size:11px}
  .coverage-label {font-size:12px; padding:9px 11px; max-width:210px}
}
@media (max-width:430px) {
  .brand {gap:8px}
  .brand>span {font-size:16px; letter-spacing:1.5px}
  .brand>svg {width:30px; height:28px}
  .hero-content {padding-top:124px}
  .hero h1 {font-size:clamp(40px,12.1vw,52px)}
  .hero-buttons {gap:10px}
  .statement-bottom {display:flex; flex-direction:column-reverse; align-items:flex-start; gap:24px}
  .coordinate {font-size:11px; line-height:1.7; letter-spacing:0}
  .interlude-bottom {gap:20px; align-items:flex-start; flex-direction:column}
  .coordinate {text-align:left}
  .footer-top {grid-template-columns:1fr; gap:24px}
  .footer-top p {margin-left:0}
  .footer-top>div {grid-column:auto; flex-direction:column; align-items:flex-start; gap:0}
  .footer-bottom {gap:8px 20px}
  .journey-chapter {padding:15px 16px}
  .journey-chapter h2 {font-size:clamp(30px,8.8vw,38px); margin:12px 0}
  .journey-chapter p, html[data-theme="light"] .journey-chapter p {font-size:14px; line-height:1.6}
  .chapter-detail {font-size:11px; line-height:1.55; margin-top:12px}
  .journey-chapter .button {font-size:13px; gap:12px; padding:12px 14px; margin-top:14px}
}
@media (max-width:350px) {
  .site-header {gap:8px}
  .header-actions {gap:6px}
  .brand>span {font-size:15px; letter-spacing:1.2px}
  .brand>svg {width:27px; height:26px}
  .hero h1 {font-size:40px}
  .hero-buttons .button {font-size:13px; padding-inline:16px; gap:14px}
  .hero-foot a, .motion-control {font-size:11px}
  .hero-foot {gap:8px}
  .journey-stops button, html[data-theme="light"] .journey-stops button {font-size:12px; gap:6px; padding-inline:8px}
  .journey-note {font-size:10px; letter-spacing:.1px}
  .journey-chapter .eyebrow, html[data-theme="light"] .journey-chapter .eyebrow {font-size:11px}
  .journey-chapter h2 {font-size:30px}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *, *::before, *::after {animation:none!important; transition:none!important}
  .step {opacity:1}
}
.static-journey {scroll-behavior:auto}
.static-journey .step {opacity:1}
.static-journey .reveal {opacity:1!important; transform:none!important}