@layer reset, base, layout, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input { font: inherit; }
  button { cursor: pointer; }
}

@layer base {
  :root { color-scheme: dark; --night:#08151b; --night-2:#0d2028; --panel:#142a32; --line:#39525a; --text:#edf3ed; --muted:#aebfbd; --teal:#89dfd1; --orange:#f18a59; --lime:#d1e99a; --shell:min(1380px, calc(100% - 88px)); }
  body { background: var(--night); color: var(--text); font-family: "Aptos", "Segoe UI", system-ui, sans-serif; font-size: 16px; line-height: 1.55; overflow-x: hidden; }
  h1, h2, h3, p { margin: 0; }
  h1, h2, h3 { line-height: 1.06; letter-spacing: -.055em; }
  h1, h2 { font-weight: 750; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: var(--teal); }
  button { color: inherit; }
  :focus-visible { outline: 3px solid #f7ae75; outline-offset: 4px; }
  ::selection { background: var(--teal); color: var(--night); }
  .skip-link { position: fixed; z-index: 100; left: 16px; top: -100px; padding: 10px 16px; background: var(--teal); color: var(--night); font-weight: 800; }
  .skip-link:focus { top: 14px; }
  .section-shell { width: var(--shell); margin-inline: auto; }
  .section-kicker, .eyebrow, .control-label, .feature-no, .feature-status, .image-topline, .image-bottomline, .mission-line, .planner-header, .phase-kicker, .network-index, .story-tag { font-size: .71rem; letter-spacing: .16em; font-weight: 800; text-transform: uppercase; }
  .section-kicker { color: var(--orange); margin-bottom: 18px; }
  .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 48px; margin-bottom: 48px; }
  .section-heading h2, .field-intro h2, .story-copy h2, .final-inner h2 { font-size: clamp(2.9rem, 5.6vw, 6.1rem); }
  h2 em, h1 em { color: var(--teal); font-style: normal; }
  .section-heading > p { max-width: 400px; color: var(--muted); font-size: 1.06rem; }
  .button, .outline-button { display: inline-flex; justify-content: space-between; align-items: center; gap: 25px; min-height: 55px; padding: 14px 20px; border-radius: 5px; font-weight: 800; font-size: .95rem; transition: transform .22s ease, background-color .22s ease, border-color .22s ease; }
  .button:hover, .outline-button:hover { transform: translateY(-3px); color: var(--night); }
  .button-bright { background: var(--teal); color: var(--night); border: 1px solid var(--teal); }
  .button-bright:hover { background: #aff7e9; }
  .button-orange { background: var(--orange); color: #10212a; border: 1px solid var(--orange); }
  .button-orange:hover { background: #ffab80; }
  .outline-button { background: transparent; border: 1px solid #8ba5a7; color: var(--text); }
  .outline-button:hover { background: #dceee8; border-color: #dceee8; }
}

@layer layout {
  .site-header { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 86px; padding: 12px max(44px, calc((100% - 1380px) / 2)); background: #08171c; border-bottom: 1px solid #2a454d; }
  .brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; color: var(--text); line-height: .91; font-size: 1.25rem; letter-spacing: .055em; font-weight: 950; }
  .brand > span > span { display: block; color: var(--teal); }
  .brand small { display: block; margin-top: 5px; font-size: .52rem; letter-spacing: .29em; color: #9aacaa; }
  .desktop-nav, .header-actions { display: flex; align-items: center; gap: clamp(17px, 2.5vw, 38px); }
  .desktop-nav a, .header-sign-in { font-size: .84rem; font-weight: 730; color: #c5d4d0; }
  .desktop-nav a:hover, .header-sign-in:hover { color: var(--teal); }
  .header-cta { display: inline-flex; align-items: center; gap: 15px; color: #0b1d22; background: var(--teal); padding: 11px 16px; border-radius: 4px; font-size: .84rem; font-weight: 850; white-space: nowrap; }
  .header-cta:hover { background: #aef5e6; color: #0b1d22; }
  .mobile-menu { display: none; }

  .hero { position: relative; isolation: isolate; min-height: 760px; background: radial-gradient(circle at 46% 30%, #16333a 0, transparent 40%), linear-gradient(125deg, #07151b 12%, #0e2830 100%); overflow: hidden; }
  .hero-grid { position: absolute; inset: 0; pointer-events: none; z-index: -1; background-image: linear-gradient(#36646a29 1px, transparent 1px), linear-gradient(90deg, #36646a29 1px, transparent 1px); background-size: 66px 66px; mask-image: linear-gradient(to right, transparent, #000 80%); }
  .hero-inner { width: var(--shell); margin: auto; display: grid; grid-template-columns: minmax(450px, .92fr) minmax(540px, 1.08fr); align-items: center; gap: clamp(26px, 4vw, 70px); padding: 65px 0 46px; }
  .hero-copy { position: relative; z-index: 2; }
  .eyebrow { display: flex; align-items: center; gap: 12px; color: var(--teal); white-space: nowrap; font-size: .68rem; }
  .signal-dot, .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 16px var(--teal); flex: 0 0 auto; }
  .eyebrow-line { width: 24px; height: 1px; background: #739b9c; }
  .hero h1 { margin-top: 27px; font-size: clamp(4rem, 5.4vw, 6.65rem); max-width: 770px; letter-spacing: -.078em; }
  .hero h1 em { color: var(--orange); }
  .hero-lede { max-width: 540px; margin-top: 30px; color: #c8d7d2; font-size: clamp(1.1rem, 1.45vw, 1.35rem); line-height: 1.65; }
  .hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 34px; }
  .text-link, .quiet-link { color: #d7e8df; font-size: .92rem; font-weight: 800; border-bottom: 1px solid #6c8986; padding-bottom: 4px; }
  .text-link:hover, .quiet-link:hover { border-color: var(--teal); }
  .hero-proof { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 68px; padding-top: 19px; border-top: 1px solid #416068; color: #b7c9c5; font-size: .76rem; }
  .hero-proof span { max-width: 120px; line-height: 1.3; }
  .hero-proof strong { display: block; margin-bottom: 4px; color: var(--teal); font-size: 1.7rem; letter-spacing: -.04em; }

  .hero-art { position: relative; min-height: 620px; border: 1px solid #4e7479; border-radius: 13px; overflow: hidden; box-shadow: 0 35px 90px #0008, 0 0 0 8px #9ec9bd0a; background: #18343b; }
  .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 88% 51%; filter: saturate(.82) brightness(.94) contrast(1.05); }
  .hero-photo-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #06131c94 0, #0b25361e 42%, #071a22d1 100%), linear-gradient(100deg, #09424b70, transparent 55%); }
  .hero-contours { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #c3eee86c; stroke-width: 1; opacity: .7; }
  .hero-contours .hero-route { stroke: #ffad75; stroke-width: 2.8; stroke-dasharray: 8 7; opacity: .95; }
  .terrain-point { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #f6b47c; box-shadow: 0 0 0 7px #f6b47c38, 0 0 26px #f6b47c; }
  .point-one { top: 67%; left: 20%; }.point-two { top: 49%; left: 57%; }.point-three { top: 31%; left: 79%; }
  .compass-rose { position: absolute; top: 74px; right: 35px; width: 92px; height: 92px; border: 1px solid #d9f2e887; border-radius: 50%; display: grid; place-items: center; background: #081d26a6; }
  .compass-rose::before, .compass-rose::after { content: ""; position: absolute; width: 1px; height: 114px; background: #d9f2e859; }
  .compass-rose::after { transform: rotate(90deg); }
  .compass-rose span { position: absolute; top: -20px; font-size: .7rem; font-weight: 800; }
  .compass-rose i { display: block; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 29px solid var(--orange); filter: drop-shadow(0 0 7px var(--orange)); transform: translateY(-6px); }
  .image-topline, .image-bottomline { position: absolute; left: 26px; right: 26px; display: flex; justify-content: space-between; gap: 10px; color: #dcefe9; text-shadow: 0 2px 8px #000; font-size: .61rem; }
  .image-topline { top: 27px; }.image-bottomline { bottom: 23px; }
  .image-card { position: absolute; left: 27px; bottom: 67px; width: min(410px, calc(100% - 54px)); display: flex; gap: 14px; align-items: center; padding: 17px 18px; background: #091b20e8; border: 1px solid #8acabd8c; border-radius: 7px; backdrop-filter: blur(12px); }
  .image-card-icon { display: grid; place-items: center; width: 50px; height: 50px; flex: 0 0 auto; border-radius: 50%; color: var(--orange); background: #284448; font-size: 2.5rem; }
  .image-card small, .image-card strong, .image-card span:not(.image-card-icon) { display: block; }
  .image-card small { color: var(--teal); font-size: .66rem; letter-spacing: .14em; font-weight: 850; }
  .image-card strong { font-size: 1.15rem; margin: 2px 0; }
  .image-card div > span { font-size: .78rem; color: #b2c7c2; }
  .hero-scroll { width: var(--shell); margin: 0 auto; padding-bottom: 22px; display: flex; align-items: center; gap: 14px; color: #9dbbb7; letter-spacing: .17em; font-weight: 800; font-size: .62rem; }
  .scroll-line { width: 68px; height: 1px; background: #9bb6b0; }

  .rehearsal, .toolkit, .network { padding-top: 116px; padding-bottom: 118px; }
  .simulator-frame { border: 1px solid #46646a; border-radius: 11px; overflow: hidden; background: #10242b; box-shadow: 0 32px 80px #0005; }
  .simulator-topbar, .planner-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #bad1ca; font-size: .68rem; }
  .simulator-topbar { padding: 15px 22px; background: #071b22; border-bottom: 1px solid #46646a; letter-spacing: .12em; font-weight: 800; }
  .simulator-topbar > span:first-child { display: flex; align-items: center; gap: 12px; color: var(--teal); }
  .pulse-dot { width: 6px; height: 6px; animation: pulse 2.5s ease-in-out infinite; }
  .simulator-layout { display: grid; grid-template-columns: minmax(260px, .33fr) minmax(0, .67fr); }
  .scenario-column { padding: 28px 20px; background: #0c2027; border-right: 1px solid #446269; }
  .control-label { color: #9fbbb7; margin-bottom: 17px; font-size: .67rem; }
  .scenario-controls { display: grid; gap: 9px; }
  .scenario-button { width: 100%; text-align: left; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 10px 13px; border: 1px solid #39545b; border-radius: 5px; background: #132a31; transition: background-color .2s, transform .2s, border-color .2s; }
  .scenario-button:hover { background: #1a3a42; transform: translateX(2px); }
  .scenario-button.is-active { border-color: var(--teal); background: #21434a; box-shadow: inset 3px 0 var(--teal); }
  .scenario-num { align-self: start; padding-top: 4px; color: var(--orange); font-size: .72rem; letter-spacing: .1em; font-weight: 850; }
  .scenario-name { flex: 1; font-weight: 850; font-size: .96rem; }
  .scenario-name small { display: block; color: #a8beb9; font-weight: 450; font-size: .78rem; margin-top: 3px; }
  .scenario-button > span:last-child { font-size: 1.15rem; color: var(--teal); }
  .signal-toggle-block { margin-top: 35px; padding-top: 28px; border-top: 1px solid #38555d; }
  .signal-toggle-block p:not(.control-label) { color: #b4c9c2; font-size: .9rem; line-height: 1.5; margin-bottom: 17px; }
  .signal-switch { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 9px 13px; background: #1a343b; border: 1px solid #5c8885; border-radius: 5px; color: var(--teal); font-weight: 850; }
  .switch-track { display: block; width: 37px; height: 22px; border-radius: 12px; background: var(--teal); padding: 3px; transition: background .2s; }
  .switch-thumb { display: block; width: 16px; height: 16px; border-radius: 50%; background: #143139; transform: translateX(15px); transition: transform .2s; }
  .signal-switch[aria-checked="false"] { color: #ffb586; border-color: #9d6b5d; }
  .signal-switch[aria-checked="false"] .switch-track { background: #f19468; }
  .signal-switch[aria-checked="false"] .switch-thumb { transform: translateX(0); }
  .signal-toggle-block > small { display: block; margin-top: 13px; color: #8da8a3; font-size: .72rem; }
  .mission-panel { display: grid; grid-template-columns: minmax(230px, .42fr) minmax(350px, .58fr); min-height: 600px; }
  .mission-graphic { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 48%, #316374 0, #16404a 32%, #0a242e 70%), linear-gradient(#52707815 1px, transparent 1px), linear-gradient(90deg, #52707815 1px, transparent 1px); }
  .mission-graphic[data-scene="signal"] { background: radial-gradient(circle at 50% 48%, #8b674c 0, #594333 29%, #20313a 65%, #0a242e 100%); }
  .mission-graphic[data-scene="travel"] { background: radial-gradient(circle at 50% 48%, #557958 0, #2a524f 32%, #0a242e 75%); }
  .mission-grid { position: absolute; inset: 0; background-image: linear-gradient(#88b4ae27 1px, transparent 1px), linear-gradient(90deg, #88b4ae27 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle, #000 25%, transparent 83%); }
  .mission-ring { position: absolute; border: 1px solid #bbf3e888; border-radius: 50%; left: 50%; top: 46%; transform: translate(-50%,-50%); }
  .ring-a { width: 230px; height: 230px; box-shadow: 0 0 0 50px #caefe80a, 0 0 0 100px #caefe807; }
  .ring-b { width: 110px; height: 110px; border-style: dashed; animation: spin 35s linear infinite; }
  .mission-center { position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 76px; height: 76px; border: 2px solid var(--teal); border-radius: 50%; background: #081d24; box-shadow: 0 0 35px #80dec354; color: var(--teal); font-size: 3rem; }
  .mission-graphic[data-scene="signal"] .mission-center { border-color: #ffb480; color: #ffb480; box-shadow: 0 0 35px #f4a6667a; }
  .mission-graphic[data-scene="travel"] .mission-center { border-color: #d8e9a0; color: #d8e9a0; box-shadow: 0 0 35px #d8e9a066; }
  .mission-orbit-marker { position: absolute; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; border: 1px solid #caf1e7; background: #112c35; color: #d9f2e8; font-size: .68rem; font-weight: 800; }
  .marker-a { left: 23%; top: 30%; }.marker-b { right: 14%; top: 29%; }.marker-c { left: 34%; bottom: 28%; }
  .mission-graphic-caption { position: absolute; bottom: 20px; left: 20px; color: #c3dfd7; font-size: .63rem; letter-spacing: .13em; font-weight: 750; }
  .mission-graphic-caption b { color: var(--orange); }
  .mission-content { padding: 30px clamp(22px, 3vw, 42px) 28px; }
  .mission-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--teal); font-size: .66rem; }
  .mission-badge { padding: 6px 8px; border: 1px solid #657d7a; border-radius: 3px; color: #b8ccc5; font-size: .58rem; }
  .mission-content h3 { max-width: 390px; margin-top: 23px; font-size: clamp(2.2rem, 3vw, 3.4rem); }
  .mission-content > p { color: #bbcdc7; margin-top: 14px; max-width: 440px; }
  .mission-checks { display: grid; gap: 9px; margin-top: 25px; }
  .mission-checks > div { display: flex; align-items: start; gap: 11px; color: #deebe3; font-size: .86rem; }
  .mission-checks > div span { color: var(--orange); font-weight: 850; }
  .availability { margin-top: 24px; border-top: 1px solid #3b5960; border-bottom: 1px solid #3b5960; }
  .availability > div { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
  .availability > div + div { border-top: 1px solid #345159; }
  .availability-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 4px; background: #27474c; color: var(--teal); font-size: 1.3rem; }
  .availability > div > span:nth-child(2) { flex: 1; min-width: 0; }
  .availability strong, .availability small { display: block; line-height: 1.25; }
  .availability strong { font-size: .82rem; }.availability small { color: #a6bdb7; font-size: .7rem; margin-top: 3px; }
  .availability b { border: 1px solid #7aa89b; color: var(--teal); font-size: .58rem; border-radius: 3px; padding: 5px 6px; letter-spacing: .08em; }
  .availability b.is-offline { border-color: #bd745c; color: #ffad83; }
  .mission-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 13px 18px; margin-top: 23px; }
  .mission-actions .button { min-height: 45px; padding: 9px 12px; font-size: .76rem; gap: 8px; }
  .quiet-link { font-size: .73rem; }
  .rehearsal-note { margin-top: 17px; color: #9fb9b2; font-size: .8rem; max-width: 930px; }
  .rehearsal-note span { color: var(--orange); padding-right: 6px; }

  .toolkit { padding-top: 18px; }
  .feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
  .feature-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 485px; padding: 29px; overflow: hidden; border-radius: 8px; border: 1px solid #5a7778; background: #142b32; transition: transform .25s ease, border-color .25s ease; }
  .feature-card:hover { transform: translateY(-5px); border-color: var(--teal); color: var(--text); }
  .feature-no { position: relative; z-index: 1; color: #b8d8cc; }
  .feature-icon { position: absolute; top: 15px; right: 33px; font-size: 4rem; color: #91e2cf; }
  .feature-copy { position: relative; z-index: 1; max-width: 480px; }
  .feature-status { color: var(--teal); font-size: .63rem; }
  .feature-card h3 { margin-top: 9px; font-size: clamp(2.1rem, 3.2vw, 3.65rem); }
  .feature-card p { max-width: 390px; margin-top: 14px; color: #c6d6d0; font-size: .91rem; }
  .feature-action { display: inline-flex; align-items: center; gap: 20px; margin-top: 21px; border-bottom: 1px solid #bde6d7; padding-bottom: 6px; font-size: .82rem; font-weight: 850; }
  .feature-map { background: radial-gradient(circle at 75% 27%, #3d695b, transparent 45%), #152f33; }
  .feature-map-lines { position: absolute; inset: 16px 0 0 38%; transform: rotate(-13deg); opacity: .66; }
  .feature-map-lines i { position: absolute; border: 1px solid #b1e5d0; border-radius: 47% 53% 62% 38% / 46% 43% 57% 54%; width: 250px; height: 155px; top: calc(11% + var(--i, 0) * 27px); left: calc(4% + var(--i, 0) * 10px); }
  .feature-map-lines i:nth-child(1) { --i:0; }.feature-map-lines i:nth-child(2) { --i:1; }.feature-map-lines i:nth-child(3) { --i:2; }.feature-map-lines i:nth-child(4) { --i:3; }
  .feature-map-lines b { position: absolute; display: block; left: 35%; top: 18%; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 7px #fba7733b, 0 0 25px var(--orange); }
  .feature-power img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.57) saturate(.65); transition: transform .5s ease; }
  .feature-power:hover img { transform: scale(1.03); }
  .feature-power::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #101d1ff5 2%, #10232542 80%), linear-gradient(90deg,#0f2629aa,transparent); }
  .feature-power .feature-no, .feature-power .feature-copy { z-index: 1; }
  .feature-power .feature-status { color: #ffbd90; }
  .feature-knowledge { background: radial-gradient(circle at 80% 30%, #3d5058,transparent 42%), #152531; }
  .knowledge-glyph { position: absolute; top: 42px; right: 60px; font-size: clamp(5rem, 10vw, 11rem); font-weight: 900; letter-spacing: -.15em; line-height: 1; color: #b0e1d722; }
  .knowledge-glyph span { font-size: .4em; color: #f99d6f66; }
  .feature-people { background: radial-gradient(circle at 52% 29%, #3e5960, transparent 55%), #13252d; }
  .people-graphic { position: absolute; top: 74px; right: 38px; left: 38px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: #d5ece1; opacity: .75; }
  .people-graphic span { display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid #a8d8c7; border-radius: 50%; font-size: .6rem; font-weight: 800; letter-spacing: .08em; background: #36545b; }
  .people-graphic i { width: 26px; height: 1px; background: #a8d8c7; }

  .field-card-section { position: relative; isolation: isolate; background: #d9e8dd; color: #12282d; overflow: hidden; }
  .field-card-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 15% 75%, #add1c1, transparent 32%), repeating-linear-gradient(0deg, #60887a1a 0 1px, transparent 1px 38px), repeating-linear-gradient(90deg, #60887a1a 0 1px, transparent 1px 38px); opacity: .7; }
  .field-card-inner { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); align-items: center; gap: clamp(35px, 7vw, 110px); padding-top: 120px; padding-bottom: 120px; }
  .field-intro .section-kicker { color: #ae5c38; }
  .field-intro h2 em { color: #336d66; }
  .field-intro > p:not(.section-kicker) { max-width: 480px; margin-top: 24px; font-size: 1.06rem; color: #40595a; }
  .field-progress { margin-top: 57px; max-width: 420px; }
  .field-progress > div { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 9px; font-size: .67rem; font-weight: 850; letter-spacing: .09em; }
  .field-progress strong { font-size: 1.05rem; letter-spacing: normal; }
  progress { width: 100%; height: 10px; border: 0; border-radius: 5px; overflow: hidden; appearance: none; background: #67888245; }
  progress::-webkit-progress-bar { background: #6a8d874a; } progress::-webkit-progress-value { background: #eb8656; } progress::-moz-progress-bar { background: #eb8656; }
  .field-intro .field-disclaimer { font-size: .78rem !important; margin-top: 14px !important; }
  .field-planner { padding: 25px; border: 1px solid #7a9b8e; border-radius: 9px; background: #f6f8ee; box-shadow: 0 30px 65px #2944413f; }
  .print-sheet { display: none; }
  .planner-header { padding-bottom: 16px; border-bottom: 1px solid #a1b3a5; color: #416463; }
  .phase-controls { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 22px; }
  .phase-controls button { min-height: 52px; padding: 10px; border: 1px solid #a2b4a9; background: #e6eee5; color: #25433f; border-radius: 4px; font-weight: 800; text-align: left; }
  .phase-controls button span { color: #9d694b; font-size: .65rem; padding-right: 6px; }
  .phase-controls button.is-active { background: #183c3d; border-color: #183c3d; color: #f3f8eb; }
  .phase-controls button.is-active span { color: #ffbb89; }
  .phase-kicker { margin-top: 29px; color: #a45a36; font-size: .64rem; }
  #phase-title { margin-top: 8px; font-size: clamp(1.7rem, 2.4vw, 2.65rem); }
  #phase-desc { margin-top: 12px; color: #4b6260; font-size: .87rem; }
  #phase-checks { margin: 23px 0 0; padding: 0; border: 0; display: grid; gap: 8px; }
  #phase-checks legend { margin-bottom: 10px; font-size: .7rem; color: #446560; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
  #phase-checks label { display: flex; align-items: start; gap: 12px; padding: 11px 13px; min-height: 50px; border: 1px solid #bed0c0; border-radius: 4px; background: #fcfdf6; color: #24403d; font-size: .84rem; cursor: pointer; }
  #phase-checks label:hover { border-color: #4d8980; }
  #phase-checks input { appearance: none; width: 18px; height: 18px; border: 2px solid #59897e; border-radius: 3px; flex: 0 0 auto; margin: 2px 0 0; background: white; }
  #phase-checks input:checked { background: #2b776d; border-color: #2b776d; box-shadow: inset 0 0 0 3px #fff; }
  #phase-checks label:has(input:checked) { background: #e6f3e7; }
  .planner-bottom { display: flex; justify-content: space-between; gap: 10px; padding-top: 18px; margin-top: 18px; border-top: 1px solid #adbeaf; font-size: .72rem; }
  .planner-bottom a { font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
  .planner-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
  .planner-actions .button, .planner-actions .outline-button { min-height: 47px; font-size: .76rem; padding: 10px 13px; }
  .planner-actions .outline-button { color: #1c4744; border-color: #698e85; }
  .planner-actions .outline-button:hover { background: #21544f; color: white; }

  .connection-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(45px,7vw,105px); align-items: center; padding-top: 115px; padding-bottom: 120px; }
  .story-visual { position: relative; min-height: 560px; padding: 28px; border: 1px solid #648789; border-radius: 50% 50% 7px 7px / 14% 14% 7px 7px; background: radial-gradient(circle at 48% 50%, #517979 0, #1b3b44 37%, #0e252d 68%), repeating-radial-gradient(circle at 48% 50%, transparent 0 25px, #94c9c014 26px 27px); overflow: hidden; }
  .story-visual::before { content:""; position:absolute; inset: 38px; border:1px solid #8ebbb567; border-radius: 50%; }
  .story-visual::after { content:""; position:absolute; inset: 76px; border:1px dashed #8ebbb577; border-radius: 50%; }
  .story-tag { position: relative; z-index: 2; color: var(--teal); }
  .story-disc { position: absolute; inset: 105px; border-radius: 50%; background: radial-gradient(circle, #28515a 0, #1b3a43 56%, #0f252d 58%); border: 1px solid #92c7b9; box-shadow: 0 0 0 30px #83c6b610, inset 0 0 90px #0a242c; }
  .story-disc::before, .story-disc::after { content: ""; position: absolute; inset: 13%; border: 1px solid #abdfc397; border-radius: 50%; }
  .story-disc::after { inset: 29%; background: #d8eee2; box-shadow: 0 0 50px #9cdccc70; }
  .story-disc span { position: absolute; z-index: 3; display: grid; place-items: center; width: 86px; height: 86px; border: 1px solid #9bd5c9; border-radius: 50%; background: #102f38; font-size: .61rem; font-weight: 850; letter-spacing: .06em; }
  .story-disc span:nth-child(1) { top: -14px; left: 50%; transform: translateX(-50%); }
  .story-disc span:nth-child(2) { bottom: 25px; left: -24px; }.story-disc span:nth-child(3) { bottom: 25px; right: -24px; }
  .story-visual > p { position: absolute; z-index: 2; bottom: 24px; left: 25px; right: 25px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .68rem; letter-spacing: .15em; font-weight: 850; }
  .story-visual > p strong { color: var(--orange); font-size: 1.3rem; letter-spacing: -.01em; }
  .story-copy > p:not(.section-kicker) { margin-top: 24px; max-width: 510px; color: #bfd0c9; font-size: 1.02rem; }
  .story-copy ol { list-style: none; margin: 28px 0; padding: 0; max-width: 510px; }
  .story-copy li { display: flex; align-items: start; gap: 15px; padding: 13px 0; border-top: 1px solid #3d595d; }
  .story-copy li span { color: var(--orange); font-size: .78rem; font-weight: 850; }
  .story-copy li p { color: #dce9e1; font-size: .89rem; }
  .story-copy > small { display: block; margin-top: 15px; max-width: 450px; color: #8eaaa3; font-size: .75rem; }

  .network { padding-top: 90px; border-top: 1px solid #355058; }
  .network-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; }
  .network-grid > a { position: relative; display: flex; flex-direction: column; min-height: 255px; padding: 22px; border: 1px solid #516e72; border-radius: 5px; background: #10262d; transition: background .2s, transform .2s; }
  .network-grid > a:hover { background: #204249; color: var(--text); transform: translateY(-3px); }
  .network-grid > a.is-current { background: #21423e; border-color: #83c9aa; }
  .network-index { color: var(--orange); font-size: .62rem; }
  .network-grid strong { margin-top: 29px; font-size: clamp(1.45rem,2.15vw,2.3rem); line-height: 1.05; letter-spacing: -.06em; }
  .network-grid p { color: #b2cbc2; font-size: .81rem; margin-top: 12px; }
  .network-grid a > span:last-child { margin-top: auto; padding-top: 18px; color: var(--teal); font-size: .75rem; font-weight: 850; }
  .network-grid b { margin-left: 12px; }
  .network-account { margin-top: 16px; padding: 22px 27px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border: 1px solid #6f8d87; border-radius: 5px; background: #1c3738; }
  .network-account span { color: var(--teal); font-size: .67rem; letter-spacing: .12em; font-weight: 850; }
  .network-account p { margin-top: 4px; color: #c2d5ca; font-size: .82rem; }
  .network-account a { min-width: max-content; padding: 12px 17px; background: var(--teal); color: #102328; font-weight: 850; border-radius: 4px; font-size: .8rem; }
  .network-account a:hover { background: #b1f5e6; }

  .final-cta { position: relative; overflow: hidden; background: radial-gradient(circle at 78% 51%, #37675c, transparent 33%), linear-gradient(135deg, #183736, #10232a); border-top: 1px solid #4b716d; border-bottom: 1px solid #4b716d; }
  .final-cta::after { content: ""; position: absolute; right: -80px; top: -200px; width: 700px; height: 700px; border: 1px solid #a3d8b96b; border-radius: 50%; box-shadow: 0 0 0 70px #99ddc309, 0 0 0 140px #99ddc309, 0 0 0 210px #99ddc309; pointer-events: none; }
  .final-inner { position: relative; z-index: 1; padding-top: 110px; padding-bottom: 115px; }
  .final-inner h2 { max-width: 920px; }
  .final-inner > p:not(.section-kicker) { max-width: 520px; margin-top: 22px; color: #d0ded4; }
  .final-inner > div { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 31px; }
  .final-inner > small { display: block; margin-top: 18px; color: #aac1b5; }
  .site-footer { width: var(--shell); margin: 0 auto; padding: 45px 0 27px; }
  .footer-main { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; align-items: start; }
  .footer-main > p { max-width: 300px; color: #a8bdb6; font-size: .85rem; }
  .footer-links { display: flex; flex-wrap: wrap; gap: 12px 18px; justify-content: flex-end; font-size: .8rem; font-weight: 750; }
  .footer-fine { display: flex; align-items: start; justify-content: space-between; gap: 30px; margin-top: 51px; padding-top: 21px; border-top: 1px solid #365057; color: #8daaa2; font-size: .72rem; }
  .footer-fine details { max-width: 570px; }
  .footer-fine summary { cursor: pointer; color: #c2d8cb; text-decoration: underline; text-underline-offset: 3px; }
  .footer-fine details p { margin-top: 12px; }
  .footer-fine details a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
}

@layer responsive {
  @media (max-width: 1270px) {
    .desktop-nav { gap: 14px; }.desktop-nav a { font-size: .75rem; }.header-actions { gap: 16px; }
    .hero-inner { grid-template-columns: minmax(390px,.9fr) minmax(490px,1.1fr); }
    .hero h1 { font-size: clamp(4rem,5.1vw,5.8rem); }
    .hero-art { min-height: 580px; }
    .mission-panel { grid-template-columns: minmax(180px,.35fr) minmax(340px,.65fr); }
  }
  @media (max-width: 1080px) {
    :root { --shell:min(100% - 56px, 950px); }
    .site-header { padding-inline: 28px; }.desktop-nav, .header-actions { display: none; }.mobile-menu { display: block; position: relative; }
    .mobile-menu summary { display: flex; flex-direction: column; justify-content: space-between; width: 44px; height: 44px; padding: 12px 9px; border: 1px solid #769a92; border-radius: 3px; cursor: pointer; list-style: none; }
    .mobile-menu summary::-webkit-details-marker { display: none; }.mobile-menu summary span { width: 100%; height: 2px; background: #d8eee4; }
    .mobile-menu nav { position: absolute; top: 54px; right: 0; width: min(300px, calc(100vw - 30px)); display: grid; padding: 12px; background: #122b32; border: 1px solid #799d95; border-radius: 5px; box-shadow: 0 20px 50px #0008; }
    .mobile-menu nav a { padding: 11px 13px; min-height: 44px; font-size: .91rem; font-weight: 750; }.mobile-menu nav a + a { border-top: 1px solid #47646a; }
    .hero-inner { display: block; padding-top: 85px; }.hero-copy { max-width: 800px; }.hero h1 { max-width: 780px; font-size: clamp(4.3rem,8vw,6rem); }.hero-lede { max-width: 670px; }
    .hero-proof { margin-top: 39px; }.hero-art { margin-top: 55px; min-height: 520px; }.hero-scroll { padding-top: 10px; }
    .simulator-layout { grid-template-columns: 1fr; }.scenario-column { border-right: 0; border-bottom: 1px solid #446269; }.scenario-controls { grid-template-columns: repeat(3,1fr); }.scenario-button { min-height: 92px; }.scenario-button > span:last-child { display: none; }
    .signal-toggle-block { display: grid; grid-template-columns: 1fr 160px; align-items: center; gap: 0 20px; }.signal-toggle-block > small { grid-column: 1/-1; }
    .mission-panel { grid-template-columns: .42fr .58fr; min-height: 560px; }
    .network-grid { grid-template-columns: repeat(2,1fr); }.network-grid > a { min-height: 210px; }
    .story-visual { min-height: 500px; }.story-disc { inset: 100px 65px; }
  }
  @media (max-width: 760px) {
    :root { --shell:calc(100% - 36px); }
    .site-header { min-height: 72px; padding-inline: 18px; }.brand { font-size: 1rem; }.brand img { width: 37px; height: 37px; }
    .hero-inner { padding-top: 59px; }.eyebrow { white-space: normal; flex-wrap: wrap; font-size: .59rem; }.hero h1 { font-size: clamp(3.6rem, 13vw, 5.5rem); margin-top: 20px; }.hero-lede { font-size: 1.04rem; line-height: 1.55; margin-top: 20px; }
    .hero-actions { gap: 17px; }.hero-proof { gap: 15px; }.hero-proof span { max-width: 100px; font-size: .65rem; }.hero-proof strong { font-size: 1.4rem; }
    .hero-art { min-height: 450px; margin-top: 40px; }.image-topline, .image-bottomline { left: 15px; right: 15px; }.image-topline span:last-child { display: none; }.compass-rose { width: 58px; height: 58px; right: 19px; top: 55px; }.compass-rose::before, .compass-rose::after { height: 76px; }.compass-rose i { border-left-width: 6px; border-right-width: 6px; border-bottom-width: 19px; }.compass-rose span { top: -18px; }.image-card { bottom: 55px; left: 16px; width: calc(100% - 32px); }.hero-scroll { padding-top: 20px; }
    .rehearsal, .toolkit, .network { padding-top: 78px; padding-bottom: 80px; }.section-heading { display: block; margin-bottom: 31px; }.section-heading h2, .field-intro h2, .story-copy h2, .final-inner h2 { font-size: clamp(2.7rem, 10vw, 4.5rem); }.section-heading > p { margin-top: 18px; font-size: .95rem; }
    .simulator-topbar span:last-child { display: none; }.scenario-column { padding: 20px 14px; }.scenario-controls { grid-template-columns: 1fr; gap: 7px; }.scenario-button { min-height: 62px; }.scenario-button > span:last-child { display: inline; }.signal-toggle-block { display: block; margin-top: 20px; padding-top: 20px; }.signal-switch { max-width: 180px; }
    .mission-panel { display: block; min-height: 0; }.mission-graphic { height: 225px; }.ring-a { width: 170px; height: 170px; }.ring-b { width: 80px; height: 80px; }.mission-center { width: 56px; height: 56px; font-size: 2.2rem; }.mission-content { padding: 21px 17px 25px; }.mission-content h3 { font-size: 2.4rem; }.mission-line { font-size: .58rem; }.mission-badge { font-size: .51rem; }
    .feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: 420px; padding: 21px; }.feature-card h3 { font-size: 2.6rem; }
    .field-card-inner { display: block; padding-top: 75px; padding-bottom: 79px; }.field-intro { margin-bottom: 32px; }.field-progress { margin-top: 30px; }.field-planner { padding: 18px; }.phase-controls button { font-size: .75rem; min-height: 48px; }.phase-controls button span { display: block; }
    .connection-story { display: flex; flex-direction: column; gap: 36px; padding-top: 77px; padding-bottom: 79px; }.story-visual { order: 2; width: 100%; min-height: 440px; }.story-disc { inset: 90px 85px; }.story-copy { order: 1; }.story-visual > p { font-size: .55rem; }
    .network-grid { grid-template-columns: 1fr 1fr; }.network-grid > a { min-height: 245px; padding: 17px; }.network-grid strong { margin-top: 20px; font-size: 1.5rem; }.network-grid p { font-size: .76rem; }.network-account { display: block; padding: 20px; }.network-account a { display: inline-block; margin-top: 16px; }
    .final-inner { padding-top: 82px; padding-bottom: 83px; }.final-cta::after { width: 340px; height: 340px; right: -210px; top: 40px; }.site-footer { padding-top: 35px; }.footer-main { display: block; }.footer-main > p { margin-top: 20px; }.footer-links { justify-content: flex-start; margin-top: 21px; }.footer-fine { display: block; margin-top: 35px; }.footer-fine details { margin-top: 18px; }
  }
  @media (max-width: 490px) {
    .hero h1 { font-size: clamp(3.15rem, 13vw, 4.5rem); }.hero-actions { display: grid; justify-content: start; }.hero-art { min-height: 350px; }.image-card { padding: 11px; }.image-card-icon { width: 38px; height: 38px; font-size: 2rem; }.image-card strong { font-size: .91rem; }.image-card div > span { font-size: .66rem; }.point-one, .point-two, .point-three { display: none; }
    .network-grid { grid-template-columns: 1fr; }.network-grid > a { min-height: 180px; }.people-graphic span { width: 58px; height: 58px; }.people-graphic { right: 17px; left: 17px; }.story-disc { inset: 96px 48px; }.story-disc span { width: 69px; height: 69px; font-size: .52rem; }.planner-bottom { display: block; }.planner-bottom a { display: block; margin-top: 8px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
  @media print {
    body { color: #111; background: white; font-size: 11pt; }
    .site-header, .hero, .rehearsal, .toolkit, .connection-story, .network, .final-cta, .site-footer, .field-intro, .field-planner, .field-card-bg { display: none !important; }
    .field-card-section, .field-planner { background: white; box-shadow: none; color: #111; }
    .field-card-inner { display: block; width: 100%; padding: 0; }.field-intro h2 { font-size: 30pt; }.field-intro > p { color: #333; }
    .print-sheet { display: block; padding: 0; }
    .print-sheet h2 { font-size: 28pt; margin: 0 0 8px; }
    .print-sheet > p { margin-bottom: 20px; }
    .print-sheet section { break-inside: avoid; border-top: 1px solid #555; padding-top: 12px; margin-top: 16px; }
    .print-sheet h3 { font-size: 16pt; }
    .print-sheet ul { list-style: none; padding: 0; }
    .print-sheet li { margin: 8px 0; }
  }
}

@keyframes pulse { 50% { box-shadow: 0 0 2px var(--teal); opacity: .6; } }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }