/* ==========================================================================
   CurtailCast — /how page ("From space to the grid"). Loaded after
   style.css and why.css; reuses their tokens, .nav, .btn, .label, .section,
   .cta, .footer, .reveal, .tier and .tiers. Only page-specific components
   live here. The teal below is the connector/beam colour of the journey
   artwork; everything else is an existing token or a white/accent alpha.
   ========================================================================== */

.how-page {
  --teal: #2BBFC4;
  --teal-soft: rgba(43, 191, 196, .14);
  --teal-line: rgba(43, 191, 196, .55);
}

/* --------------------------------------------------------------------------
   1. Hero — satellite still, dark gradient, CSS-only star twinkle
   -------------------------------------------------------------------------- */
.how-hero {
  position: relative;
  min-height: min(82vh, 760px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--bg-deep) url("../images/hero-satellite.jpg") center 42% / cover no-repeat;
}
.how-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 11, 21, .62) 0%, rgba(7, 11, 21, .38) 38%, rgba(7, 11, 21, .9) 82%, var(--bg) 100%),
    radial-gradient(60% 50% at 50% 100%, rgba(255, 140, 66, .14), transparent 70%);
}
.how-hero__stars,
.how-hero__stars::after {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 48%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 22%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(1.2px 1.2px at 19% 61%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(1.6px 1.6px at 31% 14%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(1.1px 1.1px at 44% 48%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(1.5px 1.5px at 57% 26%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(1.2px 1.2px at 69% 68%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(1.6px 1.6px at 81% 18%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(1.1px 1.1px at 93% 52%, rgba(255,255,255,.75), transparent 70%);
  animation: twinkle 5.5s ease-in-out infinite alternate;
}
.how-hero__stars::after {
  content: "";
  bottom: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 13% 40%, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(1.5px 1.5px at 26% 82%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(1.1px 1.1px at 38% 33%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(1.4px 1.4px at 51% 74%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(1.2px 1.2px at 63% 12%, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(1.6px 1.6px at 75% 44%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(1.1px 1.1px at 88% 78%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(1.3px 1.3px at 97% 30%, rgba(255,255,255,.85), transparent 70%);
  animation: twinkle 7.5s ease-in-out -3s infinite alternate-reverse;
}
@keyframes twinkle {
  from { opacity: .35; }
  to   { opacity: 1; }
}
.how-hero__inner {
  position: relative; z-index: 1;
  padding: clamp(88px, 12vw, 150px) 0 clamp(80px, 10vw, 130px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.how-hero .label { color: var(--teal); margin-bottom: 22px; }
.how-hero__title {
  font-size: clamp(38px, 6.4vw, 78px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.045em;
  max-width: 16ch;
  text-wrap: balance;
}
.how-hero__sub {
  margin-top: 22px;
  max-width: 600px;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--text-soft);
  text-wrap: pretty;
}
.how-hero .btn { margin-top: 34px; }
.how-hero__inner > * { animation: hero-in .9s var(--ease) both; }
.how-hero__inner > :nth-child(2) { animation-delay: .08s; }
.how-hero__inner > :nth-child(3) { animation-delay: .16s; }
.how-hero__inner > :nth-child(4) { animation-delay: .24s; }

/* --------------------------------------------------------------------------
   2. Journey — five stations on one connector
   -------------------------------------------------------------------------- */
.journey { background: var(--bg); }
.journey__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 22px 32px;
}
.journey__controls { display: flex; flex-wrap: wrap; gap: 10px; }
.journey__controls .btn { gap: 10px; }
.journey__controls .btn svg { width: 12px; height: 12px; flex: 0 0 auto; }
.journey__controls [data-play] .ico-pause { display: none; }
.journey__controls [data-play].is-playing .ico-play { display: none; }
.journey__controls [data-play].is-playing .ico-pause { display: block; }

/* Stage: the aspect ratio is reserved per breakpoint so swapping the SVG
   viewBox between the horizontal and vertical layouts never shifts layout. */
.journey__stage {
  position: relative;
  margin-top: clamp(32px, 4.5vw, 60px);
  aspect-ratio: 1200 / 320;
}
.journey__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.journey__svg text { font-family: var(--font); }
.journey__svg .st__disc { fill: var(--bg-elevated); stroke: rgba(255, 255, 255, .12); stroke-width: 1; }
.journey__svg .st__halo { fill: url(#j-halo); opacity: 0; transition: opacity .6s var(--ease); }
.journey__svg .stn.is-active .st__halo { opacity: 1; }
.journey__svg .stn.is-active .st__disc { stroke: var(--teal-line); }
.journey__svg .seg { fill: rgba(255, 255, 255, .12); }
.journey__svg .seg-lit {
  fill: var(--teal);
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .7s var(--ease);
}
.journey__svg .seg-lit.is-lit { transform: scaleX(1); }
.journey.is-vert .journey__svg .seg-lit { transform-origin: center top; transform: scaleY(0); }
.journey.is-vert .journey__svg .seg-lit.is-lit { transform: scaleY(1); }

/* Scene artwork: idle states. GSAP drives the active station inline; when
   GSAP is absent or motion is reduced (.no-anim) the end states apply. */
.journey__svg .art-line { stroke: rgba(255,255,255,.55); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.journey__svg .art-faint { stroke: rgba(255,255,255,.14); stroke-width: 1; fill: none; }
.journey__svg .art-teal { stroke: var(--teal); }
.journey__svg .art-dash { stroke-dasharray: 3 5; }
.journey__svg .s1-beam { opacity: 0; }
.journey__svg .s1-land { fill: rgba(43, 191, 196, .18); stroke: var(--teal); stroke-width: 6; stroke-linejoin: round; }
.journey__svg .s2-neg, .journey__svg .s2-dot,
.journey__svg .s3-pulse, .journey__svg .s3-ring,
.journey__svg .s4-zone, .journey__svg .s4-badge, .journey__svg .s4-mail,
.journey__svg .s5-glint { opacity: 0; }
.journey__svg .s4-land { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.5); stroke-width: 6; stroke-linejoin: round; }
.no-anim .journey__svg .s1-beam { opacity: .6; }
.no-anim .journey__svg .s2-cover { display: none; }
.no-anim .journey__svg .s2-neg, .no-anim .journey__svg .s2-dot,
.no-anim .journey__svg .s4-zone, .no-anim .journey__svg .s4-badge, .no-anim .journey__svg .s4-mail { opacity: 1; }

/* Clickable stations: real buttons laid over the artwork. Position and
   size are set by how.js from the same coordinates as the SVG. */
.journey__hits { position: absolute; inset: 0; }
.st {
  position: absolute;
  left: 50%; top: 50%;
  width: 13%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.st::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--teal-line);
  opacity: 0;
  transform: scale(.94);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.st:hover::before, .st.is-active::before { opacity: 1; transform: none; }
.st:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 50%; }
.st__name {
  position: absolute;
  top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(170px, 19vw);
  text-align: center;
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--muted);
  transition: color .3s var(--ease);
}
.st__name b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.st:hover .st__name, .st.is-active .st__name { color: var(--text); }
.st.is-active .st__name b { color: var(--teal); }

@media (max-width: 719px) {
  .journey__stage { aspect-ratio: 360 / 1040; }
  .st__name {
    top: 50%; left: calc(100% + 18px);
    transform: translateY(-50%);
    text-align: left;
    max-width: 44vw;
    font-size: 15px;
  }
}
/* Without JS the buttons cannot be positioned: list them under the art. */
.no-js .journey__hits { position: static; display: grid; gap: 10px; margin-top: 20px; }
.no-js .st { position: static; width: auto; aspect-ratio: auto; transform: none; border-radius: 8px; text-align: left; padding: 8px 0; }
.no-js .st__name { position: static; transform: none; max-width: none; }

/* Explanation card: one live region, updated per station */
.journey__card {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid; gap: 16px;
  padding: 24px clamp(18px, 3vw, 32px) 26px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg));
  min-height: 176px;
}
.jcard__side .label { color: var(--teal); }
.jcard__step { margin-top: 8px; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.jcard__title { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.025em; line-height: 1.15; }
.jcard__body { margin-top: 10px; font-size: 16px; line-height: 1.65; color: var(--text-soft); max-width: 62ch; }
.jcard__body em { font-style: normal; color: var(--text); font-weight: 600; }
.journey__note { margin-top: 18px; font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 80ch; }
@media (min-width: 860px) {
  .journey__card { grid-template-columns: 180px minmax(0, 1fr); gap: 36px; align-items: start; }
}

/* --------------------------------------------------------------------------
   3. Zone map — seven mainland zones, sample values from /why
   -------------------------------------------------------------------------- */
.zmap { background: var(--bg-cool); }
.zmap__grid { margin-top: clamp(36px, 5vw, 64px); display: grid; gap: 28px; }
.zmap__stage {
  padding: clamp(12px, 2vw, 22px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg));
}
.zmap__svg { width: 100%; height: auto; display: block; overflow: visible; }
.zmap__svg text { font-family: var(--font); }
.zone {
  fill: rgba(255, 255, 255, .05);
  stroke: rgba(255, 255, 255, .38);
  stroke-width: 1.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  outline: none;
  transition: fill .25s var(--ease), stroke .25s var(--ease);
}
.zone--low  { fill: rgba(255, 255, 255, .08); }
.zone--mod  { fill: rgba(255, 140, 66, .2); }
.zone--high { fill: rgba(255, 140, 66, .46); }
.zone:hover, .zone.is-on, .zone:focus-visible { stroke: var(--teal); stroke-width: 2.2; }
.zone:hover, .zone.is-on { fill: rgba(255, 255, 255, .12); }
.zone--low:hover, .zone--low.is-on { fill: rgba(255, 255, 255, .14); }
.zone--mod:hover, .zone--mod.is-on { fill: rgba(255, 140, 66, .32); }
.zone--high:hover, .zone--high.is-on { fill: rgba(255, 140, 66, .6); }
.zmap__isles { fill: rgba(255,255,255,.045); stroke: rgba(255,255,255,.16); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.zmap__lbl { font-size: 12.5px; font-weight: 600; fill: rgba(255,255,255,.78); pointer-events: none; }
.zmap__sea { font-size: 11px; font-weight: 600; letter-spacing: .08em; fill: rgba(255,255,255,.22); pointer-events: none; }
@media (max-width: 639px) { .zmap__lbl { display: none; } }

.zmap__side { display: grid; gap: 22px; align-content: start; }
.zmap__side .tiers { margin-top: 0; }
.zcard {
  padding: 20px clamp(18px, 2.5vw, 24px) 22px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  min-height: 168px;
  font-size: 14.5px; line-height: 1.5; color: var(--text-soft);
}
.zcard__hint { color: var(--muted); }
.zcard__name { font-size: 20px; letter-spacing: -0.02em; line-height: 1.25; }
.zcard__rows { margin-top: 12px; display: grid; gap: 10px; }
.zcard__rows li {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.zcard__tech { font-weight: 700; color: var(--text); }
.zcard__score { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.zcard__score b { font-weight: 700; color: var(--text); }
.zcard__meta { grid-column: 1 / -1; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.zcard__none { margin-top: 10px; color: var(--muted); }
.zmap__foot { font-size: 13px; line-height: 1.6; color: var(--muted); }
.zmap__list { font-size: 14px; }
.zmap__list summary { cursor: pointer; color: var(--muted); padding: 6px 0; }
.zmap__list summary:hover { color: var(--text); }
.zmap__list ul { margin-top: 10px; display: grid; gap: 14px; }
.zmap__list .zcard__name { font-size: 16px; }
@media (min-width: 900px) {
  .zmap__grid { grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 48px; align-items: start; }
  .zmap__side { position: sticky; top: calc(var(--nav-h) + 24px); }
}

/* --------------------------------------------------------------------------
   4. A day with CurtailCast — click-through stepper
   -------------------------------------------------------------------------- */
.dayx { background: var(--bg-warm); }
.stepper { margin-top: clamp(36px, 5vw, 60px); max-width: 780px; }
.stepper__track { display: flex; align-items: center; }
.stepper__dot {
  position: relative; flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  padding: 0;
}
.stepper__dot::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--bg-warm);
  box-shadow: 0 0 0 3px rgba(255, 140, 66, .12);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.stepper__dot:focus-visible { border-radius: 50%; outline-offset: 0; }
.stepper__dot.is-done::before { background: rgba(255, 140, 66, .55); }
.stepper__dot.is-active::before { background: var(--accent); transform: scale(1.25); }
.stepper__line { flex: 1; position: relative; height: 1px; background: var(--border-strong); overflow: hidden; }
.stepper__line::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease);
}
.stepper__line.is-done::after { transform: none; }

.stepper__panels { margin-top: 28px; display: grid; }
.dstep {
  grid-area: 1 / 1;
  visibility: hidden; opacity: 0;
  padding: 26px clamp(18px, 3vw, 32px) 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-warm));
}
.dstep.is-active { visibility: visible; opacity: 1; }
.dstep__time {
  display: block;
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dstep--event .dstep__time { color: var(--accent); }
.dstep .label { margin-top: 10px; }
.dstep--event .label { color: var(--accent); }
.dstep__text { margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--text-soft); max-width: 46ch; }
.stepper__nav { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.stepper__nav .btn[disabled] { opacity: .4; cursor: default; transform: none; }
.stepper__nav .btn svg { width: 14px; height: 14px; }
.stepper__count { margin-left: auto; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* CTA on this page has no request form; keep the label spacing */
.cta .label { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   Reduced motion: instant states, nothing hidden, nothing looping
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .how-hero__stars, .how-hero__stars::after, .how-hero__inner > * { animation: none; }
  .journey__svg *, .st, .st::before, .st__name, .zone, .stepper__dot::before, .stepper__line::after { transition: none !important; }
}