/* ==========================================================================
   DW WiFi · services.css · the /wifi-services page
   SERVICES builder owns this file. Shell tokens and components come from
   site.css (read only). Hex colours only (Chrome 109 drops oklch).

    1 Hero + stage + overview tiles     6 Verification: the three bands
    2 Sticky "on this page" bar         7 Health check + spectrum waterfall
    3 Service module (shared)           8 Which one / compare table
    4 Evidence card (real screens)      9 Closing CTA
    5 Predictive + site survey         10 Reduced motion, no-JS
   ========================================================================== */


/* 1 Hero ----------------------------------------------------------------- */
/* Split hero: the promise on the left, the real job photo (tight on the
   survey kit, graded so the subject reads at a glance) on the right, the
   client's own words under the buttons. The four services sit right under
   it on one solid navy panel, so their top row is on the first screen. */
.svc-hero {
  padding-top: var(--hero-top);
  padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem);
}
.svc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "shot" "proof";
  gap: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
}
.svc-hero-copy { grid-area: copy; min-width: 0; }
.hero-shot { grid-area: shot; }
.svc-proof { grid-area: proof; }
/* Below 1000px the hero stacks: promise, photo, the four services, then the
   quote (DOM order keeps the quote with the hero for screen readers; nothing
   in it is focusable, so the visual order cannot confuse tabbing). */
@media (max-width: 999px) {
  .svc-hero-inner { display: flex; flex-direction: column; }
  .svc-hero-grid { display: contents; }
  .svc-hero-inner .svc-hero-copy { order: 1; }
  .svc-hero-inner .hero-shot { order: 2; margin-top: 1.5rem; }
  .svc-hero-inner .svc-tiles { order: 3; }
  .svc-hero-inner .svc-proof { order: 4; margin-top: 2rem; }
}
.svc-hero-copy .lead {
  max-width: 31rem;
  margin-top: clamp(1rem, .8rem + .6vw, 1.35rem);
  text-wrap: pretty;
}
.svc-hero-cta { margin-top: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.svc-hero-cta .readout { font-size: .95em; }
@media (max-width: 479px) {
  .svc-hero-cta { flex-direction: column; align-items: stretch; }
}

@media (min-width: 1000px) {
  .svc-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-areas: "copy shot" "proof shot";
    grid-template-rows: auto 1fr;
    column-gap: clamp(2.5rem, 1rem + 3vw, 4.5rem);
    row-gap: 2.25rem;
  }
  .svc-hero-copy { padding-top: .25rem; }
  .svc-proof { align-self: end; }
}

/* the photo: overlaid caption on wide screens, a plain caption under it on phones */
.hero-shot { position: relative; margin: 0; min-width: 0; display: grid; }
.hero-shot-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--navy-900);
  aspect-ratio: 4 / 3;
  box-shadow: 0 2px 6px rgba(7, 27, 49, .08), 0 34px 70px -44px rgba(7, 27, 49, .55);
}
.hero-shot picture { position: absolute; inset: 0; }
.hero-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 699px) { .hero-shot-media { aspect-ratio: 1 / 1; } }
@media (min-width: 700px) and (max-width: 999px) { .hero-shot-media { aspect-ratio: 16 / 9; } }
@media (min-width: 1000px) { .hero-shot-media { aspect-ratio: auto; height: 100%; min-height: 26rem; } }

.hero-cap {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
}
.hero-cap-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime-500);
  box-shadow: 0 0 0 4px rgba(136, 174, 62, .25);
}
@media (min-width: 700px) {
  .hero-cap {
    position: absolute;
    left: clamp(.75rem, .5rem + .8vw, 1.25rem);
    bottom: clamp(.75rem, .5rem + .8vw, 1.25rem);
    z-index: 1;
    max-width: calc(100% - 1.5rem);
    padding: .45rem .85rem .45rem .7rem;
    border-radius: var(--radius-pill);
    background: rgba(7, 27, 49, .8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--white);
  }
}
@media (max-width: 699px) {
  .hero-shot-media { border-radius: var(--radius-lg); }
  .hero-cap { margin-top: .7rem; padding-left: .2rem; color: var(--fg-muted); }
  .hero-cap-dot { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(136, 174, 62, .22); }
}

/* the client's words, in full */
.svc-proof {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem 1.1rem;
  align-items: start;
  max-width: 34rem;
}
.svc-proof .logo-chip { padding: .35rem .6rem; box-shadow: 0 0 0 1px var(--rule-strong); }
.svc-proof .logo-chip img { height: 30px; }
.svc-proof blockquote { margin: 0; }
.svc-proof blockquote p { font-size: 1rem; line-height: 1.5; font-weight: 600; color: var(--fg); text-wrap: pretty; }
.svc-proof figcaption { margin-top: .3rem; font-size: .9375rem; line-height: 1.4; color: var(--fg-muted); }
.svc-proof figcaption strong { font-weight: 600; color: var(--fg); }
@media (max-width: 699px) {
  .svc-proof { grid-template-areas: "q q" "chip cap"; gap: .8rem .9rem; align-items: center; }
  .svc-proof-body { display: contents; }
  .svc-proof blockquote { grid-area: q; }
  .svc-proof .logo-chip { grid-area: chip; }
  .svc-proof .logo-chip img { height: 26px; }
  .svc-proof figcaption { grid-area: cap; margin: 0; }
}

/* the overview: four services on one solid navy panel, each jumps to its section */
.svc-tiles {
  list-style: none;
  margin: clamp(2rem, 1.2rem + 2vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: var(--radius-xl);
  background: var(--navy-900);
  color: var(--white);
  overflow: hidden;
  box-shadow: 0 30px 60px -44px rgba(7, 27, 49, .7);
}
.svc-tiles li { min-width: 0; }
.svc-tiles li + li { border-left: 1px solid rgba(255, 255, 255, .12); }
.svc-tile {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: 100%;
  padding: clamp(1.25rem, .9rem + 1vw, 1.75rem) clamp(1.25rem, .9rem + .7vw, 1.5rem);
  color: var(--white);
  text-decoration: none;
  transition: background-color .25s var(--ease-out);
}
.svc-tile:hover { background: rgba(255, 255, 255, .05); }
/* names, lines and links line up across the row even when a name wraps */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .svc-tiles li { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
    .svc-tile { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: .5rem; align-content: start; }
    .svc-tile-go { align-self: end; }
  }
}
.svc-tile:focus-visible { outline: 3px solid var(--lime-500); outline-offset: -3px; }
.svc-tile-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .45rem; }
.svc-glyph {
  flex: none;
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--lime-500);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.svc-glyph .g-fill { fill: var(--lime-500); stroke: none; }
.svc-tile-tag {
  padding: .2rem .6rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .08);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--lime-300);
  white-space: nowrap;
}
.svc-tile-name {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.375rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.svc-tile-line { font-size: 1rem; line-height: 1.5; color: #D3DCE6; }
.svc-tile-go {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: auto;
  padding-top: .6rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--lime-300);
}
.svc-tile-go .icon { width: 1.05em; height: 1.05em; transition: transform var(--dur-fast) ease; }
.svc-tile:hover .svc-tile-go .icon { transform: translateX(3px); }

@media (max-width: 1099px) {
  .svc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-tiles li + li { border-left: 0; }
  .svc-tiles li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .12); }
  .svc-tiles li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .12); }
}
@media (max-width: 699px) {
  .svc-tiles { grid-template-columns: minmax(0, 1fr); border-radius: var(--radius-lg); }
  .svc-hero-inner .svc-tiles { margin-top: 5rem; }
  .svc-tiles li:nth-child(even) { border-left: 0; }
  .svc-tiles li + li { border-top: 1px solid rgba(255, 255, 255, .12); }
  .svc-tile {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    grid-template-areas: "g name go" "g tag go" "g line go";
    column-gap: .9rem;
    row-gap: .3rem;
    align-items: start;
    padding: 1.1rem 1rem 1.15rem;
  }
  .svc-tile-top { display: contents; }
  .svc-glyph { grid-area: g; width: 36px; height: 36px; }
  .svc-tile-tag { grid-area: tag; justify-self: start; margin: .1rem 0 .15rem; font-size: .75rem; padding: .15rem .55rem; }
  .svc-tile-name { grid-area: name; font-size: 1.125rem; }
  .svc-tile-line { grid-area: line; font-size: .9375rem; }
  .svc-tile-go { grid-area: go; align-self: center; margin: 0; padding: 0; font-size: 0; }
  .svc-tile-go .icon { width: 20px; height: 20px; }
}


/* 2 Sticky "on this page" bar -------------------------------------------- */
/* Sticks under the site header while the four services and the compare block
   scroll past (its parent .svc-wrap ends before the closing CTA). */
.svc-wrap { position: relative; }
.svc-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 60;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  isolation: isolate;
}
.svc-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .svc-nav::before { background: var(--white); }
}
.svc-nav-list {
  list-style: none;
  margin: 0;
  padding: .55rem 3px;
  gap: .375rem;
  justify-content: center;
}
.svc-nav-list li { flex: none; }
.svc-nav .pill { border-color: transparent; color: var(--slate); font-weight: 500; }
.svc-nav .pill:hover { color: var(--navy-900); border-color: var(--rule-strong); }
.svc-nav .pill[aria-current="true"] { color: var(--white); }
@media (max-width: 899px) {
  .svc-nav-list { justify-content: flex-start; }
  .svc-nav .container { padding-inline: 0; }
  .svc-nav-list { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}


/* 3 Service module (shared by the four services) -------------------------- */
.svc {
  padding-block: clamp(4rem, 2.5rem + 4vw, 6.5rem);
  scroll-margin-top: 64px; /* the sticky bar, on top of the shell's header padding */
}
.svc-head {
  display: grid;
  gap: 1.1rem clamp(2rem, 1rem + 4vw, 5rem);
  align-items: end;
  margin-bottom: clamp(1.75rem, 1.1rem + 2vw, 3rem);
}
@media (min-width: 900px) { .svc-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.svc-head h2 {
  font-size: clamp(2rem, 1.35rem + 2.2vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 750;
}
.svc-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.1rem 0 0; padding: 0; }
.svc-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--fg-muted); max-width: 36em; }
.svc-head-copy { display: grid; gap: .35rem; justify-items: start; }
.svc-ref { font-size: .9375rem; }
.svc-ref .icon { width: 1.05em; height: 1.05em; }
.svc-visual { margin-bottom: clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem); }

.svc-body {
  display: grid;
  gap: 2.25rem clamp(1.5rem, .75rem + 2.5vw, 3.25rem);
  padding-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .svc-body { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 899px) {
  .svc-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-body > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 640px) { .svc-body.svc-body-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-body.svc-body-2 > :last-child { grid-column: auto; } }
.svc-col { min-width: 0; }
.svc-col > h3 {
  margin-bottom: 1.1rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* numbered steps */
.svc-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 1rem; }
.svc-steps > li {
  position: relative;
  padding-left: 2.6rem;
  counter-increment: s;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--fg-muted);
}
.svc-steps > li strong { color: var(--fg); font-weight: 600; }
.svc-steps > li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: -.05rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 500;
}
.surface-deep .svc-steps > li::before { background: var(--lime-500); color: var(--navy-950); }

/* deliverables: named documents */
.docs { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.doc {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: var(--panel);
}
.surface-paper .doc { background: var(--white); box-shadow: 0 1px 2px rgba(7, 27, 49, .05); }
.doc p { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); }
.doc p strong { display: block; margin-bottom: .15rem; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 650; color: var(--fg); }
.doc-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: .45rem;
  border-radius: 10px;
  background: var(--navy-900);
  fill: none;
  stroke: var(--white);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.doc-icon .doc-fold { stroke: var(--lime-500); }
.surface-deep .doc-icon { background: var(--navy-800); }

/* supply-and-install line under the predictive deliverables */
.svc-install { margin-top: 1rem; padding: .9rem 1.1rem .35rem; border-radius: var(--radius); border: 1px dashed var(--rule-strong); }
.svc-install p { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); }
.svc-install .link-arrow { font-size: .9375rem; }

/* prep list + CTA */
.prep, .kit { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.prep li {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  font-size: var(--fs-small);
  line-height: 1.5;
  font-weight: 500;
}
.prep .icon { width: 1.25rem; height: 1.25rem; margin-top: .1rem; color: var(--accent-text); stroke-width: 2.5; }
.prep-key {
  padding: .75rem .9rem;
  border-radius: var(--radius-sm);
  background: var(--arc-20);
  color: var(--navy-900);
}
.prep-key .icon { color: var(--lime-ink-deep); }
.svc-cta { margin-top: 1.5rem; display: grid; gap: .5rem; justify-items: start; }
.svc-cta .btn { margin-bottom: .25rem; }
.svc-cta-note { font-size: .875rem; line-height: 1.5; color: var(--fg-muted); }
.svc-call { gap: .55rem; font-size: .9375rem; }
.svc-call .icon { width: 1.1rem; height: 1.1rem; color: var(--accent-text); }
@media (max-width: 479px) { .svc-cta .btn { width: 100%; } }

/* "on the day" kit list (site survey) */
.kit li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg);
}
.kit .icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: .45rem;
  border-radius: 10px;
  background: var(--white);
  color: var(--navy-900);
  stroke-width: 1.6;
  box-shadow: 0 1px 2px rgba(7, 27, 49, .06);
}


/* Wide-screen rhythm. Tuned at 1440 x 900 so that, frame by frame, the
   sticky header and the "on this page" bar (136px) only ever sit over
   whitespace: section heads, evidence cards and the three-column bodies each
   land wholly inside one screen. Re-measure if anything above #verify changes. */
@media (min-width: 1280px) {
  .svc-hero { padding-bottom: 3rem; }
  #predict { padding-top: 5.5rem; padding-bottom: 4.875rem; }
  #predict .svc-visual { margin-bottom: 8.125rem; }
  #site .svc-head { margin-bottom: 10.375rem; }
  #site .svc-visual { margin-bottom: 8.25rem; }
  #site { padding-bottom: 4.5rem; }
  #site .site-client { margin-top: 2rem; }
  #verify { padding-top: 3.125rem; }
  #verify .svc-head { margin-bottom: 10rem; }
}
/* the same idea at 390 x 844: the heat map lands whole on the third screen */
@media (max-width: 599px) {
  #predict { padding-top: 3rem; }
}


/* 4 Evidence card ----------------------------------------------------------
   One component for every real screen on the page: a rounded card, the
   screen cropped to the one detail that matters, numbered pins on the
   detail, and the same numbers explained beside it in plain words.
   Real screens are never recoloured; the pins sit on top. */
.ev {
  min-width: 0;
  container-type: inline-size;
  padding: clamp(.75rem, .55rem + .7vw, 1.25rem);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
.surface-paper .ev { box-shadow: 0 1px 2px rgba(7, 27, 49, .05), 0 12px 32px -24px rgba(7, 27, 49, .35); }
.surface-deep .ev { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.ev-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .2rem 1rem;
  padding: .2rem .25rem .85rem;
}
.ev-title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.ev-src { font-size: .8125rem; color: var(--fg-muted); }
.ev-fig { margin: 0; display: grid; gap: 1rem; }
.ev-media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--rule-strong), 0 14px 30px -22px rgba(7, 27, 49, .45);
}
.ev-media img { display: block; width: 100%; height: auto; }
.surface-deep .ev-media { background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }

/* pins: navy disc, white ring, so they read on any colour of the screen */
.ev-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  font-family: var(--font-text);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2.5px var(--white), 0 4px 12px rgba(7, 27, 49, .45);
  pointer-events: none;
  transition: transform .2s var(--ease-out), background-color .2s ease;
}
.ev-pin::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--lime-500);
  opacity: 0;
}
.surface-deep .ev-pin { background: var(--lime-500); color: var(--navy-950); box-shadow: 0 0 0 2.5px var(--navy-950), 0 4px 12px rgba(0, 0, 0, .5); }
.ev-pin.is-hot { transform: scale(1.18); background: var(--lime-ink-deep); }
.surface-deep .ev-pin.is-hot { background: var(--white); }
@media (max-width: 599px) {
  .ev-pin { left: var(--xm, var(--x)); top: var(--ym, var(--y)); width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: .75rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .is-in .ev-pin::after { animation: ev-ping 1.6s var(--ease-out) 2; }
  .is-in .ev-pin:nth-of-type(2)::after { animation-delay: .25s; }
  .is-in .ev-pin:nth-of-type(3)::after { animation-delay: .5s; }
}
@keyframes ev-ping { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.9); } }

.ev-side { min-width: 0; display: grid; gap: 1rem; align-content: start; padding: 0 .25rem .25rem; }
.ev-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ev-notes li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-muted);
}
.ev-notes li > span { padding-top: .1rem; }
.ev-notes b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  font-size: .8125rem;
  font-weight: 700;
}
.surface-deep .ev-notes b { background: var(--lime-500); color: var(--navy-950); }
.ev-notes strong { color: var(--fg); font-weight: 600; }
.ev-cap { display: block; font-size: .8125rem; line-height: 1.5; color: var(--fg-muted); }

/* colour key for a heat map, sampled from the software's own legend */
.ev-key { display: grid; gap: .4rem; }
.ev-key-label { font-size: .875rem; font-weight: 600; color: var(--fg); }
.ev-key-bar { display: block; height: 10px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(7, 27, 49, .12); }
.ev-key-heat { background: linear-gradient(90deg, #FA0400 0%, #FE6307 14%, #FDBD13 28%, #E9FD1A 40%, #90FC12 52%, #05FB37 64%, #02FC8E 74%, #00FFE9 84%, #00D6FF 92%, #1E7BFF 100%); }
.ev-key-ends { display: flex; justify-content: space-between; gap: .5rem; font-size: .8125rem; color: var(--fg-muted); }
.ev-key-ends .readout { color: var(--fg); font-size: .75rem; }

/* side-by-side once the card is wide enough to hold the screen at its own size */
@container (min-width: 36rem) {
  .ev-fig { grid-template-columns: minmax(0, var(--ev-media-w, 23.75rem)) minmax(0, 1fr); align-items: start; gap: 1.5rem; }
  .ev-side { padding-top: .25rem; }
}


/* 5 Predictive + site survey ----------------------------------------------- */
.predict-visual {
  display: grid;
  gap: clamp(1rem, .6rem + 1.2vw, 1.5rem);
  align-items: stretch;
}
@media (min-width: 1200px) { .predict-visual { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ev-heat { --ev-media-w: 26rem; }

.walls { display: grid; gap: .75rem; align-content: start; }
.walls .ev-head { padding-bottom: 0; }
.walls-intro { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); padding-inline: .25rem; }
.tools { margin: 0 0 .25rem; padding-inline: .25rem; display: grid; gap: .4rem; }
.tools-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.tools-row img {
  height: 34px;
  width: auto;
  padding: 3px 6px;
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--rule-strong);
  box-sizing: content-box;
}
.tools figcaption { font-size: .8125rem; color: var(--fg-muted); }
.wall {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  align-content: start;
  padding: .45rem 1rem .45rem .6rem;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(7, 27, 49, .05);
}
.wall svg { width: 100%; height: auto; overflow: visible; }
.wall figcaption { font-size: .875rem; line-height: 1.45; color: var(--fg-muted); }
.wall figcaption strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 650; color: var(--fg); margin-bottom: .1rem; }
.wall-block { fill: var(--navy-900); }
.wall-mortar { stroke: rgba(255, 255, 255, .28); stroke-width: 1; fill: none; }
.ap { fill: var(--navy-900); }
.ap-ring { fill: none; stroke: var(--navy-900); stroke-opacity: .25; stroke-width: 1.5; }
.ray, .ray-fade { fill: none; stroke: var(--lime-ink); stroke-width: 3; stroke-linecap: round; }
.ray { stroke-dasharray: 7 6; }
.ray-out { stroke-opacity: .75; }
.ray-in, .ray-fade { stroke: var(--lime-300); }
.ray-in { stroke-opacity: 1; }
.ah { fill: var(--lime-ink); }
@media (prefers-reduced-motion: no-preference) {
  .ray { animation: ray-flow 1.4s linear infinite; }
}
@keyframes ray-flow { to { stroke-dashoffset: -26; } }
@media (min-width: 600px) and (max-width: 1199px) {
  .walls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .walls > .ev-head, .walls-intro, .tools { grid-column: 1 / -1; }
  .wall { grid-template-columns: minmax(0, 1fr); gap: .6rem; padding: .75rem .75rem .9rem; align-items: start; }
}
@media (max-width: 599px) {
  .walls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .walls > .ev-head, .walls-intro, .tools { grid-column: 1 / -1; }
  .tools { margin-bottom: .35rem; }
  .tools-row img { height: 30px; }
  .wall { grid-template-columns: minmax(0, 1fr); gap: .5rem; padding: .55rem .55rem .8rem; border-radius: var(--radius-sm); align-items: start; }
  .wall figcaption { font-size: .8125rem; line-height: 1.4; }
  .wall figcaption strong { font-size: .9375rem; }
}

/* site survey: real photo + the method storyboard */
.site-visual {
  display: grid;
  gap: clamp(1.25rem, .75rem + 1.5vw, 2rem);
  align-items: start;
}
@media (min-width: 900px) { .site-visual { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.site-photo { margin: 0; min-width: 0; }
.site-photo picture { display: block; overflow: hidden; border-radius: var(--radius-lg); background: var(--navy-900); aspect-ratio: 4 / 5; }
.site-photo img { width: 100%; height: 100%; object-fit: cover; }
.site-photo figcaption { margin-top: .8rem; font-size: .875rem; line-height: 1.5; color: var(--fg-muted); }
.story { min-width: 0; }
.story-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, .5rem + .8vw, 1.25rem);
}
.story-card {
  position: relative;
  min-width: 0;
  padding: clamp(.75rem, .6rem + .5vw, 1rem) clamp(.75rem, .6rem + .5vw, 1rem) clamp(1rem, .8rem + .6vw, 1.35rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(7, 27, 49, .05), 0 12px 32px -24px rgba(7, 27, 49, .35);
}
.story-card .plan { width: 100%; height: auto; margin-bottom: .9rem; border-radius: 10px; }
.story-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  font-size: .8125rem;
}
.story-card h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; padding-inline: .25rem; }
.story-card p:last-child { margin-top: .35rem; padding-inline: .25rem; font-size: .9rem; line-height: 1.5; color: var(--fg-muted); }
.story-note { margin-top: .8rem; font-size: .875rem; color: var(--fg-muted); }
/* the plan drawing */
.plan-floor { fill: #F7F9F5; stroke: var(--navy-900); stroke-width: 2; }
.plan-wall { fill: none; stroke: var(--navy-900); stroke-width: 3; stroke-linecap: round; }
.plan-rack { fill: rgba(12, 43, 77, .14); stroke: rgba(12, 43, 77, .55); stroke-width: 1; }
.plan-ap { fill: var(--navy-900); stroke: var(--white); stroke-width: 2.5; }
.plan-ap.is-old { fill: #8a9aab; }
.plan-ring { fill: none; stroke: var(--lime-ink); stroke-width: 2; }
.plan-ring.r2 { stroke-opacity: .6; }
.plan-ring.r3 { stroke-opacity: .3; }
.plan-route { fill: none; stroke: var(--navy-900); stroke-width: 1.75; stroke-dasharray: 4 4; stroke-linejoin: round; }
.plan-route.is-old { stroke-opacity: .3; }
.plan-dots circle { fill: var(--navy-900); stroke: var(--white); stroke-width: 1.5; }
.plan-move { fill: none; stroke: var(--lime-ink); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.plan-final circle { fill: var(--navy-900); stroke: var(--white); stroke-width: 2.5; }
@media (prefers-reduced-motion: no-preference) {
  .story-card .plan-ring { transform-box: fill-box; transform-origin: center; animation: ring-pulse 3.2s var(--ease-out) infinite; }
  .story-card .plan-ring.r2 { animation-delay: .25s; }
  .story-card .plan-ring.r3 { animation-delay: .5s; }
}
@keyframes ring-pulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.06); } }
@media (max-width: 599px) {
  .site-photo picture { aspect-ratio: 1 / 1; }
  .story-card { padding: .6rem .6rem .9rem; border-radius: var(--radius); }
  .story-card .plan { margin-bottom: .65rem; border-radius: 8px; }
  .story-n { width: 1.4rem; height: 1.4rem; font-size: .75rem; }
  .story-card h3 { gap: .45rem; align-items: flex-start; font-size: .9375rem; padding-inline: .15rem; }
  .story-card h3 .story-n { margin-top: .05rem; }
  .story-card p:last-child { font-size: .8125rem; padding-inline: .15rem; }
}


/* a regular client, at the foot of the site survey */
.site-client {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.75rem;
  align-items: center;
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  padding: clamp(1.1rem, .9rem + .6vw, 1.5rem) clamp(1.1rem, .8rem + 1vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(7, 27, 49, .05), 0 12px 32px -24px rgba(7, 27, 49, .35);
}
.site-client .logo-chip { padding: .4rem .7rem; box-shadow: 0 0 0 1px var(--rule-strong); }
.site-client .logo-chip img { height: 40px; }
.site-client p { max-width: 62rem; font-size: 1rem; line-height: 1.55; color: var(--fg-muted); }
.site-client p strong { color: var(--fg); font-weight: 650; }
@media (max-width: 599px) {
  .site-client { grid-template-columns: minmax(0, 1fr); }
  .site-client .logo-chip { justify-self: start; }
  .site-client .logo-chip img { height: 32px; }
  .site-client p { font-size: .9375rem; }
}


/* 6 Verification: the three bands, one real crop each ---------------------- */
/* One evidence card, three spec rows: band | the real crop at ~1.5x | what it means */
.bands-intro { max-width: 46em; padding: 0 .25rem 1rem; font-size: var(--fs-small); line-height: 1.55; color: var(--fg-muted); }
.bands { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.band {
  min-width: 0;
  display: grid;
  gap: .7rem;
  padding: .75rem;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(7, 27, 49, .05);
}
.band-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .15rem .75rem;
  padding-inline: .25rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.band-width { font-size: .8125rem; font-weight: 500; letter-spacing: 0; color: var(--fg-muted); }
.band-media {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: .4rem 0;
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--rule);
  overflow: hidden;
}
.band-media img { display: block; width: 100%; max-width: 34rem; height: auto; }
.band-24 .band-media img { width: 70%; max-width: 23.5rem; }
.band-say { padding-inline: .25rem; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); }
.band-say .readout { color: var(--fg); font-weight: 500; }
@media (max-width: 599px) {
  .ev-bands { padding: .5rem; }
  .ev-bands .ev-head, .bands-intro { padding-inline: .5rem; }
  .band { padding: .6rem .5rem .75rem; gap: .6rem; }
  .band-media { padding: .3rem 0; }
}
@container (min-width: 50rem) {
  .band { grid-template-columns: 10rem minmax(0, 34rem) minmax(0, 1fr); align-items: center; gap: 1.5rem; padding: .75rem 1.25rem .75rem .75rem; }
  .band-name { flex-direction: column; align-items: flex-start; font-size: 1.75rem; }
  .band-media { padding: .6rem 0; box-shadow: none; }
}
/* the whole chart, on demand, panning inside its own box on phones */
.bands-more { margin: .5rem .25rem 0; }
.bands-more summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
}
.bands-more summary::-webkit-details-marker { display: none; }
.bands-more summary span { text-decoration: underline; text-decoration-color: var(--link-line, var(--lime-ink)); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.bands-more summary:hover span { text-decoration-color: currentColor; }
.bands-more summary .icon { width: 1.1em; height: 1.1em; transition: transform var(--dur-fast) ease; }
.bands-more[open] summary .icon { transform: rotate(180deg); }
.bands-more summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.bands-chart { margin: .5rem 0 .25rem; }
.bands-chart .pan { box-shadow: 0 0 0 1px var(--rule); }
.bands-chart figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; margin-top: .4rem; font-size: .875rem; color: var(--fg-muted); }
.bands-chart figcaption .link-arrow { font-size: .9375rem; }
.bands-chart figcaption .icon { width: 1.05em; height: 1.05em; }


/* 7 Health check + the spectrum waterfall --------------------------------- */
.svc-health .chip { background: rgba(255, 255, 255, .09); }
.health-visual {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
@media (min-width: 960px) { .health-visual { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.health-copy { min-width: 0; }
.health-copy > * + * { margin-top: 1rem; }
.health-h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.015em; font-weight: 700; }
.health-copy p { color: var(--fg-muted); max-width: 34em; }
.health-copy p strong { color: var(--white); font-weight: 600; }
.health-cta { margin-top: 1.75rem !important; }
.health-copy .svc-cta-note { margin-top: .9rem; }
@media (max-width: 479px) { .health-cta .btn { flex: 1 1 100%; } }

.sa {
  margin: 0;
  min-width: 0;
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: var(--radius-lg);
  background: var(--navy-900);
  color: var(--white);
  box-shadow: 0 40px 80px -48px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.sa-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.sa-title { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 650; }
.sa-live { width: 8px; height: 8px; border-radius: 50%; background: var(--lime-300); }
@media (prefers-reduced-motion: no-preference) {
  .sa-live { animation: sa-live 1.6s steps(2, jump-none) infinite; }
}
.sa.is-paused .sa-live { animation: none; background: rgba(255, 255, 255, .35); }
@keyframes sa-live { 0% { opacity: 1; } 100% { opacity: .35; } }
.sa-controls { display: flex; gap: .5rem; align-items: center; }
.sa-bands { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .07); }
.sa-bands button, .sa-pause {
  min-height: 44px;
  padding: 0 .9rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--fog);
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sa-bands button:hover, .sa-pause:hover { color: var(--white); }
.sa-bands button[aria-pressed="true"] { background: var(--lime-500); color: var(--navy-950); }
.sa-pause { min-width: 64px; border: 1px solid rgba(255, 255, 255, .2); }
.sa-bands button:focus-visible, .sa-pause:focus-visible { outline: 2px solid var(--lime-300); outline-offset: 2px; }
.sa-screen { position: relative; overflow: hidden; border-radius: var(--radius); background: #061629; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.sa-trace { display: block; width: 100%; height: clamp(84px, 9vw, 120px); }
.sa-fall { display: block; width: 100%; height: clamp(150px, 17vw, 230px); }
.sa-axis { position: relative; height: 30px; margin-top: 2px; }
.sa-axis span { position: absolute; top: 6px; transform: translateX(-50%); font-family: var(--font-mono); font-size: .6875rem; color: rgba(255, 255, 255, .55); white-space: nowrap; }
.sa-axis span.is-key { color: var(--white); }
.sa-axis .mk {
  top: -30px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lime-500);
  color: var(--navy-950);
  font-family: var(--font-text);
  font-size: .75rem;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(6, 22, 41, .6);
}
.sa-axis-title { display: flex; justify-content: space-between; font-size: .6875rem; color: rgba(255, 255, 255, .5); margin-top: 2px; }
.sa-notes { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; }
.sa-notes li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .65rem; align-items: start; font-size: .875rem; line-height: 1.5; color: var(--fog); }
.sa-notes b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lime-500); color: var(--navy-950); font-size: .75rem; font-weight: 700; }
.sa-notes li { transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.sa.is-switching .sa-notes li { opacity: 0; transform: translateY(6px); }
.sa-foot { margin-top: .85rem; font-size: .8125rem; color: rgba(255, 255, 255, .6); }
@media (max-width: 599px) {
  .sa { padding: 1rem .875rem .9rem; border-radius: var(--radius); }
  .sa-controls { width: 100%; justify-content: space-between; }
  .sa-bands button { padding: 0 .7rem; }
}

.svc-health .svc-body { border-top-color: rgba(255, 255, 255, .12); }
.ev-capture { --ev-media-w: 33rem; margin-top: clamp(2rem, 1.25rem + 2vw, 3rem); }


/* 8 Which one do I need? + compare table --------------------------------- */
.svc-compare { background: var(--paper); --panel: var(--white); --accent-text: var(--lime-ink-deep); --link-line: var(--lime-ink-deep); }

.picker {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
@media (min-width: 960px) { .picker { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; } }
.picker-qs { display: grid; gap: 1rem; align-content: start; }
.picker-q {
  margin: 0;
  padding: clamp(1.1rem, .9rem + .8vw, 1.6rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(7, 27, 49, .05);
}
.picker-q > legend {
  float: left;
  width: 100%;
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 650;
  line-height: 1.3;
}
.picker-q > legend + * { clear: both; }
.picker-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  font-size: .8125rem;
}
.picker-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.picker-opts .pill { white-space: normal; text-align: left; font-weight: 600; background: var(--white); }
.picker-opts .pill[aria-pressed="true"] { background: var(--navy-900); }
.picker-wait { font-size: var(--fs-small); color: var(--fg-muted); }
.picker-result {
  min-width: 0;
  border-radius: var(--radius-lg);
  background: var(--navy-950);
  color: var(--white);
  --fg: var(--white);
  --fg-muted: var(--fog);
  --link: var(--white);
  --link-line: var(--lime-500);
  --focus: var(--lime-500);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.25rem);
  display: grid;
  align-content: center;
}
.picker-empty { display: grid; gap: 1rem; justify-items: start; max-width: 26rem; }
.picker-empty p { color: var(--fog); font-size: var(--fs-small); }
.picker-empty-mark { width: 48px; height: 48px; fill: none; stroke: var(--lime-500); stroke-width: 3; stroke-linecap: round; }
.pick-name { font-family: var(--font-display); font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; }
.pick-why { margin-top: .6rem; color: var(--fog); }
.pick-sub { margin-top: 1.25rem; font-size: .9375rem; font-weight: 600; }
.pick-prep { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .45rem; }
.pick-prep li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--fs-small); color: var(--white); }
.pick-prep .icon { width: 1.15rem; height: 1.15rem; margin-top: .15rem; color: var(--lime-300); stroke-width: 2.5; }
.pick-actions { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; margin-top: 1.5rem; }
.pick-actions .link-arrow { color: var(--white); }
@media (max-width: 479px) { .pick-actions .btn { width: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .picker-result.is-new .pick-body { animation: pick-in .45s var(--ease-out); }
}
@keyframes pick-in { from { opacity: .001; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.compare-title { margin-bottom: 1.1rem; font-size: 1.25rem; font-weight: 700; }
.compare-wrap { background: var(--white); border-color: var(--rule-strong); }
.compare-wrap:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 3px; }
.compare { font-size: .9375rem; line-height: 1.45; }
.compare th, .compare td { padding: .95rem 1rem; }
.compare thead th { background: var(--white); vertical-align: bottom; font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.25; padding-block: .5rem; }
.compare thead th a {
  display: flex;
  align-items: flex-end;
  min-height: 44px;
  padding-block: .35rem;
  color: var(--navy-900);
  text-decoration: none;
}
.compare thead th a:hover { text-decoration: underline; text-decoration-color: var(--lime-ink); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.compare-corner { background: var(--white); }
.compare tbody th { width: 13rem; font-weight: 600; color: var(--navy-900); }
.compare tbody td { color: var(--slate); }
.compare tbody tr:nth-child(odd) > * { background: #FAFBF9; }
/* keep the row labels visible while the table scrolls sideways */
.compare tbody th, .compare-corner { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--rule); }
.compare tbody th { background: var(--white); }
.compare tbody tr:nth-child(odd) > th { background: #FAFBF9; }
.compare .yes { display: inline-flex; gap: .4rem; align-items: flex-start; color: var(--navy-900); font-weight: 600; }
.compare .yes .icon { width: 1.15rem; height: 1.15rem; margin-top: .1rem; color: var(--lime-ink); stroke-width: 2.75; }
/* slate: 7.08:1 on white, 6.9:1 on the striped rows (AA at 14px) */
.compare .no { display: inline-flex; gap: .45rem; align-items: center; color: var(--slate); font-size: .875rem; }
.no-mark { width: .7rem; height: .7rem; border-radius: 50%; border: 1.5px solid #8494A5; flex: none; }
.compare [data-col].is-pick { background: var(--arc-20) !important; }
.compare thead th.is-pick { box-shadow: inset 0 3px 0 var(--lime-ink); }
.compare-hint { display: none; margin-top: .7rem; font-size: .875rem; color: var(--fg-muted); }
@media (max-width: 899px) {
  .compare-hint { display: block; }
  .compare tbody th { width: 9.5rem; }
}


/* 9 Closing CTA ---------------------------------------------------------- */
.svc-final { padding-block: clamp(4rem, 2rem + 5vw, 7rem); }
.svc-final-band { position: relative; overflow: hidden; isolation: isolate; padding: clamp(2rem, 1rem + 4vw, 4.5rem); }
.svc-final-loops {
  position: absolute;
  right: -4%;
  top: 50%;
  z-index: -1;
  width: min(46%, 30rem);
  height: auto;
  transform: translateY(-50%);
  opacity: .16;
  pointer-events: none;
}
.svc-final-band .cta-band-copy p { color: var(--fog); max-width: 48ch; }
.svc-final-alt { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0 1.25rem; font-size: .9375rem; color: var(--fog); }
.svc-final-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--lime-500);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}
.svc-final-link:hover { text-decoration-color: currentColor; }
.svc-final-link .icon { width: 1.1rem; height: 1.1rem; color: var(--lime-300); flex: none; }
@media (min-width: 900px) { .svc-final-band .cta-band-actions { max-width: 30rem; } .svc-final-alt { justify-content: flex-end; } }
@media (max-width: 899px) { .svc-final-loops { width: 70%; right: -22%; top: 0; transform: none; opacity: .1; } }


/* 10 Reduced motion + no-JS ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ray, .story-card .plan-ring, .sa-live, .picker-result.is-new .pick-body, .ev-pin::after { animation: none !important; }
  .sa-notes li, .ev-pin { transition: none; }
}
.no-js .picker, .no-js .sa { display: none; }
.no-js .compare-hint { display: none; }