/* Scoped to the How Apogee Works explainer. */
.coverage-story { padding: 60px 0 64px; background: #fff; }
.coverage-story__inner { width: min(calc(100% - 64px), 1280px); margin: auto; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: clamp(32px, 4vw, 68px); align-items: center; }
.coverage-story h1 { font-size: clamp(40px, 4.3vw, 59px); line-height: 1.06; letter-spacing: -.045em; margin: 0 0 22px; max-width: 12ch; }
.coverage-story h1 span { display: block; color: var(--aura-green-800); }
.coverage-story__lead { font-size: 21px; line-height: 1.5; max-width: 36ch; margin: 0 0 26px; }
.coverage-story__steps { display: grid; gap: 0; }
.coverage-story__steps button { display: grid; grid-template-columns: 32px 1fr 24px; gap: 12px; align-items: center; text-align: left; width: 100%; border: 0; border-top: 1px solid #d8dfd4; border-radius: 0; padding: 14px 12px; background: #fff; color: #454e54; font: 600 18px/1.35 var(--font-body); cursor: pointer; transition: background .2s, color .2s; }
.coverage-story__steps button[aria-pressed="true"] { background: #eff6e9; color: #29481a; box-shadow: inset 3px 0 #7bc043; }
.coverage-story__steps button > span:first-child { font: 400 17px/1.35 var(--font-mono); color: #617056; }
.coverage-story__steps button > span:last-child { justify-self: end; }
.coverage-story__steps button:hover { background: #f3f7f0; }
.coverage-story__steps button:focus-visible, .coverage-story a:focus-visible { outline: 3px solid #183256; outline-offset: 4px; }
.coverage-story__explanation { margin-top: 24px; }
.coverage-story.is-enhanced .coverage-story__explanation { min-height: 151px; }
.coverage-story__explanation h2 { margin: 0 0 9px; font-size: 21px; letter-spacing: -.02em; }
.coverage-story__explanation p { margin: 0; font-size: 18px; line-height: 1.55; }
.coverage-story__explanation > div + div { margin-top: 20px; }
.coverage-story.is-enhanced .coverage-story__explanation > div { margin: 0; }
.coverage-story__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 26px; }
.coverage-story__partner-link { display: inline-flex; align-items: center; gap: 10px; color: #29481a; font-weight: 600; font-size: 18px; text-decoration: none; border-bottom: 1px solid #b4cba5; padding: 8px 0; }
.coverage-story__figure { margin: 0; min-width: 0; }
.coverage-scene { position: relative; isolation: isolate; width: 100%; height: 430px; overflow: hidden; border: 1px solid #e1e7dd; border-radius: 24px; background-color: #fcfdfb; background-image: radial-gradient(#d8dfd4 .85px, transparent .85px); background-size: 20px 20px; box-shadow: 0 18px 50px -30px #18325630; }
.coverage-scene__drawing { position: absolute; inset: 0; width: 100%; height: 100%; }
.coverage-scene__area-key { position: absolute; top: 22px; left: 24px; display: flex; gap: 9px; align-items: center; color: #355923; font-size: 17px; z-index: 2; }
.coverage-scene__area-key i { width: 12px; height: 12px; border: 1px solid #5f8b44; background: #d8eacb; border-radius: 50%; }
.coverage-node { position: absolute; width: 140px; transform: translate(-50%, -50%); text-align: center; font-size: 17px; line-height: 1.25; color: #25343c; }
.coverage-node__art { width: 100px; height: 110px; display: grid; place-items: center; margin: auto auto 12px; border: 1px solid #d6dfd3; border-radius: 20px; background: #fff; box-shadow: 0 9px 22px -12px #18325645; }
.coverage-node__art svg { width: 84px; height: 94px; }
.coverage-node--ap { left: 84px; top: 218px; }
.coverage-node--client { left: 62%; top: 218px; }
.coverage-node--apogee .coverage-node__art { border-color: #8ab96a; box-shadow: 0 0 0 5px #7bc04315, 0 9px 22px -12px #18325645; }
.coverage-node--apogee { color: #355923; }
.coverage-scene__path-label { position: absolute; left: 36%; transform: translate(-50%, -50%); white-space: nowrap; background: #f7faf3ed; border-radius: 5px; padding: 2px 7px; font-size: 17px; line-height: 1.3; }
.coverage-scene__path-label--out { top: 156px; color: #315780; }
.coverage-scene__path-label--back { top: 292px; color: #355923; }
.coverage-scene__cable-label { position: absolute; transform: translate(-50%, -50%); color: #525e65; font-size: 17px; white-space: nowrap; }
.coverage-scene__status { position: absolute; bottom: 24px; left: 24px; display: flex; align-items: center; gap: 8px; font-size: 17px; line-height: 1.3; color: #355923; background: #fff; border: 1px solid #b9d4a6; padding: 9px 14px; border-radius: 10px; }
.coverage-story[data-step="1"] .coverage-scene__status { color: #80500c; border-color: #d7b684; }
.coverage-story[data-step="1"] .coverage-scene__path-label--back { color: #80500c; }
.coverage-story figcaption { display: grid; gap: 10px; margin-top: 22px; font-size: 17px; line-height: 1.5; color: #5c656b; }
.coverage-story figcaption strong { font-weight: 500; color: #25343c; }
.coverage-story [hidden] { display: none !important; }
.how-apogee__partner .coverage-story__actions { margin-top: 0; }
.how-apogee__partner .coverage-story__partner-link { color: #fff; }
@media (max-width: 1100px) {
 .coverage-story__inner { grid-template-columns: 1fr; width: min(calc(100% - 48px), 800px); gap: 38px; }
 .coverage-story__copy { max-width: none; }
 .coverage-story h1 { max-width: 20ch; }
 .coverage-story h1 span { display: inline; }
 .coverage-story__lead { max-width: 52ch; }
 .coverage-story__steps { grid-template-columns: repeat(3, 1fr); gap: 8px; }
 .coverage-story__steps button { grid-template-columns: 1fr; gap: 7px; padding: 13px; border: 1px solid #d8dfd4; border-radius: 10px; align-content: start; }
 .coverage-story__steps button > span:last-child { display: none; }
 .coverage-story.is-enhanced .coverage-story__explanation { min-height: 112px; }
}
@media (max-width: 520px) {
 .coverage-story { padding: 34px 0 40px; }
 .coverage-story__inner { width: calc(100% - 36px); gap: 28px; }
 .coverage-story h1 { font-size: clamp(36px, 9vw, 45px); }
 .coverage-story h1 span { display: block; }
 .coverage-story__lead { font-size: 19px; }
 .coverage-story__steps button { font-size: 17px; padding: 11px 8px; }
 .coverage-story.is-enhanced .coverage-story__explanation { min-height: 164px; }
 .coverage-scene { height: 570px; border-radius: 18px; }
 .coverage-scene__area-key { top: 17px; left: 17px; }
 .coverage-scene__status { bottom: 18px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
 .coverage-node { width: 124px; }
 .coverage-node__art { width: 84px; height: 92px; margin-bottom: 6px; border-radius: 16px; }
 .coverage-node__art svg { width: 72px; height: 80px; }
 .coverage-scene__path-label { font-size: 17px; padding: 2px 4px; }
 .how-apogee__partner .coverage-story__actions { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .coverage-story *, .coverage-story *::before, .coverage-story *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

.coverage-story:not(.is-enhanced) .coverage-scene { display: none; }

@media (max-width: 1100px) {
 .coverage-story__inner { gap: 0; }
 .coverage-story__copy { display: contents; }
 .coverage-story__copy > .aura-eyebrow { order: 1; }
 .coverage-story h1 { order: 2; }
 .coverage-story__lead { order: 3; }
 .coverage-story__steps { order: 4; }
 .coverage-story__figure { order: 5; margin-top: 24px; }
 .coverage-story__explanation { order: 6; }
 .coverage-story__actions { order: 7; }
}

@media (max-width: 520px) { .coverage-node > span { display: block; width: 170px; margin-left: -23px; white-space: nowrap; } }
@media (max-width: 520px) {
 .coverage-scene__cable-label { width: 48px; white-space: normal; text-align: center; line-height: 1.2; }
}

/* Keep the starting reach visible while the second comparison expands. */
.coverage-scene { height: 478px; }
.coverage-story__play { margin-top: 16px; padding: 8px 0; border: 0; background: transparent; color: #355923; font: 600 17px/1.4 var(--font-body); text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 5px; }
.coverage-story__play:focus-visible { outline: 3px solid #183256; outline-offset: 4px; }
.coverage-scene__original-key { position: absolute; top: 51px; left: 24px; z-index: 2; display: flex; gap: 9px; align-items: center; color: #626d65; font-size: 17px; }
.coverage-scene__original-key i { width: 12px; height: 12px; border: 1px dashed #87938a; border-radius: 50%; }
.coverage-scene__distance-label { position: absolute; transform: translate(-50%, -50%); color: #58655b; font-size: 17px; white-space: nowrap; background: #fcfdfbe6; padding: 0 5px; }
.coverage-scene [data-coverage-packet-out] { filter: drop-shadow(0 0 5px #31578080); }
.coverage-scene [data-coverage-packet-back] { filter: drop-shadow(0 0 5px #7bc04380); }
.coverage-story[data-phase="moving"] [data-coverage-out], .coverage-story[data-phase="moving"] [data-coverage-back] { opacity: .3; }
.coverage-story[data-phase="sending"] .coverage-scene__path-label--out { color: #fff; background: #315780; }
.coverage-story[data-phase="replying"] .coverage-scene__path-label--back { color: #fff; background: #3c6822; }
.coverage-story[data-step="1"][data-phase="replying"] .coverage-scene__path-label--back { background: #80500c; }
@media (max-width: 1100px) { .coverage-story__play { order: 4; } }
@media (max-width: 520px) {
 .coverage-scene { height: 630px; }
 .coverage-scene__original-key { left: 17px; top: 43px; }
 .coverage-scene__distance-label { font-size: 17px; }
}