/* 02 / HARDWARE: the Strata Wi-Fi Flasher. Heading, price, a Buy now jump and the shipping line; a full-width studio
   band that fades in from the page colour, where leader lines point at the device's real parts; then the order card
   (#wifi-buy): quantity, ship-to region and subtotal in one row, then Buy now. Shipping is never priced on this page:
   Stripe checkout adds it for the region chosen here.
   Everything is visible without JavaScript and with reduced motion; landing-wifi-flasher.js draws the lines in, links
   each callout to its hotspot, and runs the order card: quantity, subtotal and Buy now, which opens Stripe Checkout.
   The site's CSP (style-src 'self') blocks inline styles, so every position is set here.

   Diagram coordinates: every hotspot, leader end and callout is placed in % of the studio render (1600 x 893). The
   window of the render that is shown is --cx/--cy (left/top edge) and --cw/--ch (width/height), in the same %. Desktop
   shows the whole render; tablets and phones show a tighter window around the device, so it is larger there. */
.wifi-flasher-section {
  --wifi-card: #0d1114;
  --wifi-edge: #2a3238;
  --wifi-hair: #262e35;
  --wifi-warm: #3d2b22;
  --wifi-soft: #b6bcc2;
  --wifi-dim: #8f9aa3;
  --wifi-studio: #05070a;
  border-top: 1px solid #2a2f34;
}
:where(.wifi-flasher-section) :is(figure, dl, dd, ol, fieldset) { margin: 0; }
.wifi-icon { display: inline-block; flex: none; vertical-align: middle; }
.wifi-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wifi-kicker { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; color: var(--orange); font: 600 .72rem/1.6 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.wifi-kicker::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px #ff642824, 0 0 12px #ff6428; }
.wifi-flasher-section :is(.wifi-lead, .wifi-part-title, .wifi-nojs, .wifi-hint) { text-wrap: pretty; }

/* ---------- Orange action (the page's .directory-action look; .button gives it landing.js's hover lift) ---------- */
.wifi-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.4rem; min-height: 47px; padding: .75rem 1.15rem; border: 1px solid var(--orange); border-radius: 5px; background: var(--orange); color: #151719; font: 750 .9375rem/1.2 var(--body); white-space: nowrap; cursor: pointer; transition: background .2s, box-shadow .2s; }
.wifi-cta:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.wifi-cta .wifi-icon { transition: transform .2s cubic-bezier(.22,1,.36,1); }

/* ---------- Intro: eyebrow and h2 | lead, price and Buy now ---------- */
.wifi-top { padding-top: 6rem; padding-bottom: clamp(.5rem, 1.5vw, 1.5rem); }
.wifi-intro { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 1.75rem 4rem; align-items: start; margin-bottom: 0; }
.wifi-intro h2 { margin: 0; }
.wifi-lead { max-width: 33rem; margin: 0 0 1.5rem; color: var(--muted); font-size: 1.0625rem; line-height: 1.85; }
.wifi-lead strong { color: #e6eaed; font-weight: 600; }
.wifi-price { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .85rem 1.25rem; padding: .85rem .85rem .85rem 1.25rem; border: 1px solid var(--wifi-warm); border-radius: 12px; background: linear-gradient(110deg, #ff64281a, #ff642806 55%, transparent), var(--wifi-card); }
.wifi-price-figure, .wifi-buy-price { display: inline-flex; align-items: baseline; gap: .7rem; margin: 0; white-space: nowrap; }
.wifi-price-amount { color: #fff; font: 400 clamp(2.1rem, 2.8vw, 2.6rem)/1 var(--brand); letter-spacing: -.01em; }
.wifi-price-unit { color: #d7dde1; font-size: .9375rem; font-weight: 600; }
.wifi-price-unit small { margin-left: .25rem; color: var(--wifi-dim); font-size: .6875rem; font-weight: 650; letter-spacing: .12em; }
.wifi-jump { min-width: 9.5rem; }
.wifi-offer-note { margin: .8rem 0 0 .1rem; color: var(--wifi-dim); font-size: .8125rem; line-height: 1.6; text-wrap: pretty; }

/* ---------- Studio band: the anatomy ---------- */
/* The band fades from the page colour into the render's near-black and back, over about 120-160px, so the intro,
   the band and the order card read as one run; 03 / MODULE SUPPORT keeps the only hard line. The render's own top and
   bottom fade out over the same distance (mask below), so its floor glow dissolves instead of stopping at an edge. */
.wifi-studio {
  --fade-top: clamp(6.5rem, 2rem + 8.4vw, 10.4rem);
  --fade-bottom: clamp(4.5rem, 8.4vw, 8.4rem);
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--ink), var(--wifi-studio) var(--fade-top), var(--wifi-studio) calc(100% - var(--fade-bottom)), var(--ink));
}
.wifi-anatomy {
  --cx: 0; --cy: 0; --cw: 100; --ch: 100;
  --lw: 16rem;     /* callout width at most */
  --lgap: 15px;    /* leader end to callout text */
  --ledge: 2rem;   /* callout to the band's edge, at least */
  position: relative; max-width: 1600px; margin-inline: auto;
}
.wifi-anatomy-title { position: absolute; z-index: 3; top: clamp(1.5rem, 3vw, 2.6rem); left: 0; right: 0; display: flex; justify-content: center; margin: 0; font: inherit; pointer-events: none; }
.wifi-anatomy-title .wifi-kicker { margin: 0; color: #d4dade; letter-spacing: .2em; }
.wifi-diagram { position: relative; }
.wifi-stage { position: relative; overflow: hidden; aspect-ratio: 1600 / 893; }
/* The render and the leader layer share one box: the whole render, offset by the shown window. */
.wifi-stage-img, .wifi-leaders {
  position: absolute; display: block; max-width: none;
  left: calc(var(--cx) / var(--cw) * -100%); top: calc(var(--cy) / var(--ch) * -100%);
  width: calc(100 / var(--cw) * 100%); height: calc(100 / var(--ch) * 100%);
}
/* Mask: the side edges (for bands wider than 1600px) intersected with a fade at the top and bottom of the shown
   window (--fi / --fo, a share of the window's height). The render's top 15% is empty studio, so the fade never
   touches the device. */
.wifi-stage-img {
  --fi: .15; --fo: .15;
  --w0: calc(var(--cy) * 1%); --w1: calc((var(--cy) + var(--ch)) * 1%);
  object-fit: cover; transform-origin: 50% 45%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent var(--w0), #000 calc((var(--cy) + var(--ch) * var(--fi)) * 1%), #000 calc((var(--cy) + var(--ch) * (1 - var(--fo))) * 1%), transparent var(--w1));
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent var(--w0), #000 calc((var(--cy) + var(--ch) * var(--fi)) * 1%), #000 calc((var(--cy) + var(--ch) * (1 - var(--fo))) * 1%), transparent var(--w1));
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* One slow light sweep across the orange body after the draw-in (landing-wifi-flasher.js adds .wifi-sweeping). Overlay
   blending brightens the orange and leaves the near-black studio as it is; the render itself never moves, so the
   hotspots stay on their parts. */
.wifi-sweep { position: absolute; top: -10%; bottom: -10%; left: 0; width: 18%; pointer-events: none; background: linear-gradient(90deg, transparent, #ffffff85 50%, transparent); mix-blend-mode: overlay; opacity: 0; transform: translateX(150%) skewX(-14deg); }
.wifi-anatomy.wifi-sweeping .wifi-sweep { animation: wifi-sweep 1.9s cubic-bezier(.45,.05,.3,1) both; }
@keyframes wifi-sweep {
  0% { opacity: 0; transform: translateX(150%) skewX(-14deg); }
  14%, 82% { opacity: 1; }
  100% { opacity: 0; transform: translateX(470%) skewX(-14deg); }
}
.wifi-leaders { z-index: 1; overflow: visible; pointer-events: none; }
/* Leaders are drawn in render units (1600 wide), so the stroke steps up as the band narrows to stay about 1px.
   Each leader is one dash as long as the leader (--len, in render units; pathLength is not used because Chromium
   scales the dash array by it but not the offset): offset 0 shows the whole leader, offset --len hides it. */
.wifi-leader { --sw: 1.25; fill: none; stroke: #e9edf0; stroke-opacity: .62; stroke-width: var(--sw); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len) 2000; stroke-dashoffset: 0; transition: stroke-opacity .25s, stroke-width .25s, opacity .25s; }

/* Hotspots: a 44px hit area around the visible dot. Desktop shows a ringed dot; tablets and phones a numbered disc. */
.wifi-hot-1 { --x: 42.7; --y: 20.4; }
.wifi-hot-2 { --x: 43; --y: 41; }
.wifi-hot-3 { --x: 62.3; --y: 67.2; }
.wifi-hot-4 { --x: 47.5; --y: 63; }
.wifi-hot {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; translate: -50% -50%;
  left: calc((var(--x) - var(--cx)) / var(--cw) * 100%); top: calc((var(--y) - var(--cy)) / var(--ch) * 100%);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: opacity .25s, scale .3s cubic-bezier(.22,1,.36,1);
}
.wifi-hot-dot { position: relative; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid #fff; border-radius: 50%; background: #05070a73; box-shadow: 0 0 0 1px #05070a59, 0 2px 10px #0008; color: transparent; font: 750 0px/1 var(--body); transition: background .25s, border-color .25s, box-shadow .25s, scale .3s cubic-bezier(.22,1,.36,1); }
.wifi-hot-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; transition: background .25s; }
/* The pulse: a thin ring that widens and fades, staggered per hotspot. */
.wifi-hot-dot::after { content: ""; position: absolute; inset: -1.5px; border: 1px solid #fff; border-radius: 50%; opacity: 0; pointer-events: none; animation: wifi-pulse 3.6s cubic-bezier(.2,.7,.3,1) infinite; animation-delay: var(--pd, 0s); }
.wifi-hot-2 { --pd: .9s; }
.wifi-hot-3 { --pd: 1.8s; }
.wifi-hot-4 { --pd: 2.7s; }
@keyframes wifi-pulse {
  0% { opacity: .7; transform: scale(1); }
  55%, 100% { opacity: 0; transform: scale(var(--ps, 2.6)); }
}

/* Callouts (desktop): absolutely placed so the first row sits on the leader's horizontal run. */
.wifi-parts { padding: 0; list-style: none; }
.wifi-part-1 { --x: 27.5; --y: 13.66; }
.wifi-part-2 { --x: 72.5; --y: 21.05; }
.wifi-part-3 { --x: 72.5; --y: 73.91; }
.wifi-part-4 { --x: 27.5; --y: 69.76; }
.wifi-part { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .7rem; border-radius: 6px; outline: none; transition: opacity .25s; }
.wifi-part-num { display: inline-grid; place-items: center; color: var(--orange); font: 400 .8125rem/1 var(--brand); letter-spacing: .02em; transition: color .25s, background .25s, border-color .25s; }
.wifi-part-name { color: #c4ccd2; font: 650 .6875rem/1.5rem var(--body); letter-spacing: .16em; text-transform: uppercase; }
.wifi-part-title { grid-column: 1 / -1; margin-top: .35rem; color: #f4f5f5; font-size: 1.1875rem; font-weight: 650; line-height: 1.35; letter-spacing: -.015em; transition: color .25s; }
.wifi-part:focus-visible { outline: 2px solid var(--orange); outline-offset: 8px; }

/* ECU, TCU and CPC flashing: not a part, so a plaque under the device rather than a hotspot. */
.wifi-plaque { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: .75rem; row-gap: .2rem; margin: 0; color: #e6eaed; font-size: .9375rem; font-weight: 600; line-height: 1.5; text-align: center; }
.wifi-plaque-icon { color: var(--orange); }
.wifi-plaque-link { display: inline-flex; align-items: center; gap: .4rem; color: #c9d1d7; font-size: .8125rem; font-weight: 600; text-decoration: underline; text-decoration-color: #ff642899; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.wifi-plaque-link .wifi-icon { color: var(--orange); }

/* Linked highlight (landing-wifi-flasher.js): hovering or focusing a callout, or hovering or tapping a hotspot, lights
   that pair and its leader and steps the others back. */
.wifi-anatomy.wifi-has-active .wifi-part:not(.is-active) { opacity: .4; }
.wifi-anatomy.wifi-has-active .wifi-leader:not(.is-active) { opacity: .28; }
.wifi-anatomy.wifi-has-active .wifi-hot:not(.is-active) { opacity: .45; }
.wifi-leader.is-active { stroke-opacity: 1; stroke-width: calc(var(--sw) * 1.6); }
@media (max-width: 1439px) { .wifi-leader { --sw: 1.5; } }
@media (max-width: 1100px) { .wifi-leader { --sw: 1.8; } }
.wifi-hot.is-active .wifi-hot-dot { scale: 1.3; border-color: #fff; background: var(--orange); box-shadow: 0 0 0 1px #05070a80, 0 0 22px #ff6428b3; }
.wifi-part.is-active .wifi-part-title { color: #fff; }
.wifi-part.is-active .wifi-part-num { color: #ff8a5c; }

/* Draw-in (landing-wifi-flasher.js adds .wifi-armed while the band is off screen, then .wifi-drawing as it arrives): the
   render brightens, the hotspots appear, each leader draws from its part to its callout, then the callout fades in. */
.wifi-anatomy.wifi-armed .wifi-stage-img { opacity: .3; transform: scale(1.035); }
.wifi-anatomy.wifi-armed .wifi-hot { opacity: 0; scale: .4; }
.wifi-anatomy.wifi-armed .wifi-leader { stroke-dashoffset: var(--len); }
.wifi-leader-1 { --len: 268; }
.wifi-leader-2 { --len: 546; }
.wifi-leader-3 { --len: 188; }
.wifi-leader-4 { --len: 345; }
.wifi-anatomy.wifi-armed :is(.wifi-part, .wifi-plaque, .wifi-anatomy-title) { opacity: 0; }
.wifi-anatomy.wifi-armed .wifi-part { translate: 0 6px; }
.wifi-anatomy.wifi-drawing .wifi-stage-img { transition: opacity 1.5s cubic-bezier(.22,1,.36,1), transform 2.2s cubic-bezier(.22,1,.36,1); }
.wifi-anatomy.wifi-drawing .wifi-anatomy-title { transition: opacity .8s ease .15s; }
.wifi-anatomy.wifi-drawing .wifi-hot { transition: opacity .35s ease var(--dh), scale .55s cubic-bezier(.34,1.56,.64,1) var(--dh); }
.wifi-anatomy.wifi-drawing .wifi-leader { transition: stroke-dashoffset .75s cubic-bezier(.65,0,.35,1) var(--dl); }
.wifi-anatomy.wifi-drawing .wifi-part { transition: opacity .55s ease var(--dp), translate .7s cubic-bezier(.22,1,.36,1) var(--dp); }
.wifi-anatomy.wifi-drawing .wifi-plaque { transition: opacity .7s ease 1.9s; }
.wifi-hot-1, .wifi-leader-1, .wifi-part-1 { --dh: .45s; --dl: .7s; --dp: 1.25s; }
.wifi-hot-2, .wifi-leader-2, .wifi-part-2 { --dh: .6s; --dl: .85s; --dp: 1.4s; }
.wifi-hot-3, .wifi-leader-3, .wifi-part-3 { --dh: .75s; --dl: 1s; --dp: 1.55s; }
.wifi-hot-4, .wifi-leader-4, .wifi-part-4 { --dh: .9s; --dl: 1.15s; --dp: 1.7s; }

/* Desktop and laptop: callouts around the device, on the leaders. */
@media (min-width: 901px) {
  .wifi-anatomy { padding-top: 2rem; }
  .wifi-hot-dot { font-size: 0; }
  .wifi-parts { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
  .wifi-part {
    position: absolute; width: min(var(--lw), 27.5% - var(--lgap) - var(--ledge)); margin-top: -.75rem; pointer-events: auto;
    top: calc((var(--y) - var(--cy)) / var(--ch) * 100%);
    left: calc((var(--x) - var(--cx)) / var(--cw) * 100% + var(--lgap));
  }
  /* Callouts left of the device read right to left from the leader: name then number, right-aligned. */
  .wifi-part-left { left: auto; right: calc(100% - (var(--x) - var(--cx)) / var(--cw) * 100% + var(--lgap)); grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
  .wifi-part-left .wifi-part-num { grid-column: 2; grid-row: 1; }
  .wifi-part-left .wifi-part-name { grid-column: 1; grid-row: 1; }
  /* The leader's end: a small dot just outside the callout. */
  .wifi-part::before { content: ""; position: absolute; top: calc(.75rem - 3px); left: calc(-1 * var(--lgap) - 3px); width: 6px; height: 6px; border-radius: 50%; background: #e9edf0; box-shadow: 0 0 0 3px #05070a; transition: background .25s, box-shadow .25s; }
  .wifi-part-left::before { left: auto; right: calc(-1 * var(--lgap) - 3px); }
  .wifi-part.is-active::before { background: var(--orange); box-shadow: 0 0 0 3px #05070a, 0 0 12px #ff6428; }
  .wifi-plaque { position: absolute; z-index: 2; left: 50%; bottom: 4.2%; translate: -50% 0; width: max-content; max-width: calc(100% - 4rem); padding: .65rem 1.25rem .65rem 1.05rem; border: 1px solid #ffffff14; border-radius: 999px; background: #0a0d10d9; box-shadow: 0 12px 34px #0009; white-space: nowrap; }
  .wifi-plaque-link { margin-left: .35rem; }
}

/* ---------- Order card (#wifi-buy) ---------- */
/* One wide card under the band: title and price; then quantity, ship-to region and subtotal in one row; then the fine
   print beside Buy now. The form lays itself out by its own width (container queries), so the row becomes two
   columns and then one without depending on the page breakpoints. */
.wifi-buy-wrap { padding-top: clamp(3rem, 5vw, 4.5rem); padding-bottom: 6rem; }
.wifi-buy { overflow: hidden; border: 1px solid var(--wifi-warm); border-top: 2px solid var(--orange); border-radius: 12px; background: radial-gradient(70% 140% at 100% 0%, #ff64281a, transparent 62%), var(--wifi-card); }
.wifi-buy-form { container: wifi-form / inline-size; display: flex; flex-direction: column; min-width: 0; padding: clamp(1.75rem, 3.2vw, 2.75rem) clamp(1.75rem, 3.6vw, 3.25rem); }
.wifi-buy-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; padding-bottom: 1.6rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--line); }
.wifi-buy-head .wifi-kicker { margin-bottom: .7rem; }
.wifi-buy-title { margin: 0; font: 400 clamp(1.45rem, 2.1vw, 1.9rem)/1.2 var(--brand); letter-spacing: -.01em; text-transform: uppercase; }
.wifi-buy-price .wifi-price-amount { font-size: clamp(1.9rem, 2.4vw, 2.3rem); }

.wifi-buy-fields { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(12rem, 16rem); gap: 1.5rem clamp(2rem, 4vw, 3.5rem); align-items: start; }
.wifi-field { min-width: 0; padding: 0; border: 0; }
.wifi-label { display: block; float: none; margin: 0 0 .6rem; padding: 0; color: #b9c3cb; font-size: .75rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.wifi-hint { margin: .55rem 0 0; color: var(--wifi-dim); font-size: .8125rem; line-height: 1.5; }

.wifi-stepper { display: inline-flex; align-items: stretch; height: 50px; border: 1px solid #36424c; border-radius: 5px; background: #0d1216; }
.wifi-stepper:focus-within { border-color: #4f5d68; }
.wifi-step { display: grid; place-items: center; width: 48px; padding: 0; border: 0; background: transparent; color: #e6eaed; cursor: pointer; transition: color .15s, background .15s; }
.wifi-step:first-child { border-radius: 4px 0 0 4px; }
.wifi-step:last-child { border-radius: 0 4px 4px 0; }
.wifi-step[hidden] { display: none; }
.wifi-step[aria-disabled="true"] { color: #56616a; cursor: default; }
.wifi-step:focus-visible, .wifi-qty-input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; position: relative; z-index: 1; }
.wifi-qty-input { width: 4.5rem; min-width: 0; margin: 0; padding: 0 .25rem; border: 0; border-inline: 1px solid #263038; background: transparent; color: #fff; font: 400 1.25rem/1 var(--brand); text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.wifi-qty-input::-webkit-inner-spin-button, .wifi-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Without the script there are no - / + buttons: the field stands alone. */
.wifi-step[hidden] + .wifi-qty-input, .wifi-qty-input:only-child { width: 6rem; border-inline: 0; }

.wifi-ship { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; max-width: 30rem; }
.wifi-ship-option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .65rem; min-height: 50px; padding: .55rem .9rem; border: 1px solid #36424c; border-radius: 5px; background: #0d1216; color: #dfe6ec; font-size: .9375rem; font-weight: 600; line-height: 1.3; cursor: pointer; transition: border-color .15s, background .15s; }
.wifi-ship-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wifi-ship-mark { position: relative; width: 16px; height: 16px; border: 1.5px solid #6b7782; border-radius: 50%; transition: border-color .15s; }
.wifi-ship-mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--orange); transform: scale(0); transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.wifi-ship-option:has(input:checked) { border-color: var(--orange); background: linear-gradient(110deg, #ff642817, #ff642805), #0d1216; }
.wifi-ship-option:has(input:checked) .wifi-ship-mark { border-color: var(--orange); }
.wifi-ship-option:has(input:checked) .wifi-ship-mark::after { transform: scale(1); }
.wifi-ship-option:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Subtotal: the devices only; its amount sits on the 50px control line, so it reads level with the stepper. */
.wifi-subtotal { text-align: right; }
.wifi-subtotal[hidden] { display: none; }
.wifi-subtotal-amount { margin: 0; color: #fff; font: 400 clamp(1.9rem, 2.4vw, 2.3rem)/50px var(--brand); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wifi-subtotal-amount small { margin-left: .35rem; color: var(--wifi-dim); font: 650 .6875rem/1 var(--body); letter-spacing: .12em; }
.wifi-nojs { grid-column: 1 / -1; margin: 0; color: var(--wifi-soft); font-size: .9375rem; line-height: 1.7; }

/* Buy now sits under the subtotal, in its column; it appears only with the script. */
.wifi-buy-foot { grid-column: 3; display: flex; }
.wifi-buy-foot:not(:has(> :not([hidden]))) { display: none; }
.wifi-buy-button { flex: 1 1 auto; min-width: 0; min-height: 54px; font-size: 1rem; }
.wifi-buy-button:disabled { cursor: progress; opacity: .72; }
.wifi-buy-status { margin: 0; color: #e6eaed; font-size: .875rem; line-height: 1.6; }
.wifi-buy-status:not(:empty) { display: flex; gap: .65rem; margin-top: 1rem; padding: .8rem 1rem; border: 1px solid #ff642859; border-radius: 6px; background: #ff642812; }
.wifi-buy-status:not(:empty)::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .55em; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px #ff642824; }

/* A narrower card (tablets): quantity and ship-to side by side, the subtotal on its own line under them. */
@container wifi-form (max-width: 50rem) {
  .wifi-buy-fields { grid-template-columns: auto minmax(0, 1fr); }
  .wifi-subtotal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--wifi-hair); text-align: left; }
  .wifi-subtotal .wifi-label { margin: 0; }
  .wifi-subtotal-amount { order: 2; margin-left: auto; line-height: 1.2; }
  .wifi-subtotal .wifi-hint { order: 3; flex-basis: 100%; margin-top: .35rem; text-align: right; }
  .wifi-buy-foot { grid-column: 1 / -1; }
}
/* Phones: everything in one column. */
@container wifi-form (max-width: 34rem) {
  .wifi-buy-fields { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
}
@container wifi-form (max-width: 24rem) {
  .wifi-ship { grid-template-columns: minmax(0, 1fr); }
}

@media (hover: hover) and (pointer: fine) {
  .wifi-cta:hover { background: #ff7e4d; box-shadow: 0 6px 24px #ff642833; }
  .wifi-jump:hover .wifi-icon { transform: translateY(2px); }
  .wifi-plaque-link:hover { color: #fff; text-decoration-color: var(--orange); }
  .wifi-step:not([aria-disabled="true"]):hover { background: #ffffff0d; color: #fff; }
  .wifi-ship-option:hover { border-color: #55636e; }
  .wifi-ship-option:has(input:checked):hover { border-color: var(--orange); }
}
/* Touch: the plaque link gets a 44px target without moving the layout. */
@media (pointer: coarse) {
  .wifi-plaque-link { padding-block: 12px; margin-block: -12px; }
}
@media (forced-colors: active) {
  .wifi-hot-dot, .wifi-ship-mark { forced-color-adjust: none; }
  .wifi-leader { stroke: CanvasText; }
  .wifi-sweep { display: none; }
  .wifi-ship-option:has(input:checked) { outline: 2px solid Highlight; }
}

@media (max-width: 1100px) {
  .wifi-top { padding-top: 4.8rem; }
  .wifi-intro { gap: 1.75rem 2.5rem; }
  .wifi-anatomy { --lw: 15rem; --lgap: 12px; }
  .wifi-part-title { font-size: 1.0625rem; }
  .wifi-part-name { letter-spacing: .13em; }
  .wifi-buy-wrap { padding-bottom: 4.8rem; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .wifi-plaque { padding-block: .55rem; font-size: .875rem; }
}

/* Tablets and phones: numbered hotspots on a closer crop, and a numbered list below. */
@media (max-width: 900px) {
  .wifi-intro { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .wifi-lead, .wifi-intro-copy { max-width: 36rem; }

  .wifi-anatomy { --cx: 16; --cy: 5; --cw: 68; --ch: 86; }
  .wifi-anatomy-title { position: static; justify-content: flex-start; width: calc(100% - 4rem); margin: 2.75rem auto 0; }
  .wifi-stage { aspect-ratio: 108800 / 76798; }
  .wifi-leaders { display: none; }
  .wifi-stage-img { --fi: .14; --fo: .2; }
  .wifi-hot-dot::after { --ps: 1.9; }
  .wifi-hot-dot { width: 30px; height: 30px; color: #fff; font-size: .6875rem; letter-spacing: .02em; background: #05070ab8; }
  .wifi-hot-dot::before { display: none; }
  .wifi-hot.is-active .wifi-hot-dot { color: #151719; scale: 1.15; }
  .wifi-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; width: calc(100% - 4rem); margin: 0 auto; }
  .wifi-part { grid-template-columns: 30px minmax(0, 1fr); column-gap: .9rem; align-items: start; padding: 1.15rem 0; border-top: 1px solid #1c2227; }
  .wifi-part-num { grid-row: 1 / span 3; width: 30px; height: 30px; border: 1.5px solid #ffffffd9; border-radius: 50%; color: #fff; font: 750 .6875rem/1 var(--body); }
  .wifi-part-name { grid-column: 2; line-height: 1.6; }
  .wifi-part-title { grid-column: 2; }
  .wifi-part-title { margin-top: .15rem; }
  .wifi-part.is-active .wifi-part-num { border-color: var(--orange); background: var(--orange); color: #151719; }
  .wifi-part:focus-visible { outline-offset: 4px; }
  .wifi-plaque { justify-content: flex-start; width: calc(100% - 4rem); margin: 0 auto; padding: 1.15rem 0 2.75rem; border-top: 1px solid #1c2227; text-align: left; }
  .wifi-plaque-text { flex: 1 1 14rem; }

}
@media (max-width: 760px) {
  /* The platform list above already ends on a rule here (the desktop demo is hidden). */
  .wifi-flasher-section { border-top: 0; }
  .wifi-top { padding-top: 3.6rem; padding-bottom: .5rem; }
  .wifi-lead { font-size: 1rem; margin-bottom: 1.25rem; }

  .wifi-anatomy { --cx: 25; --cy: 7; --cw: 50; --ch: 82; }
  .wifi-stage { aspect-ratio: 80000 / 73226; }
  .wifi-anatomy-title, .wifi-parts, .wifi-plaque { width: calc(100% - 2.5rem); }
  .wifi-anatomy-title { margin-top: 2.25rem; }
  .wifi-parts { grid-template-columns: minmax(0, 1fr); }
  .wifi-part { padding: 1rem 0; }
  .wifi-part-title { font-size: 1rem; }
  .wifi-plaque { padding: 1rem 0 2.25rem; font-size: .875rem; }

  .wifi-buy-wrap { padding-top: 2.75rem; padding-bottom: 3.6rem; }
  .wifi-buy-form { padding: 1.5rem 1.25rem 1.4rem; }
  .wifi-buy-head { align-items: flex-start; flex-direction: column; gap: .6rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
}
@media (max-width: 520px) {
  .wifi-price { padding: .8rem .8rem .8rem 1.1rem; column-gap: .75rem; }
}
@media (max-width: 420px) {
  .wifi-price { flex-direction: column; align-items: stretch; }
  .wifi-jump { width: 100%; }
}
@media (max-width: 380px) {
  .wifi-anatomy-title, .wifi-parts, .wifi-plaque { width: calc(100% - 2rem); }
  .wifi-buy-form { padding-inline: 1rem; }
}

/* Reduced motion: landing.css stops every animation and transition; the script never arms the draw-in. This also
   shows the finished state if the preference changes while armed. */
@media (prefers-reduced-motion: reduce) {
  .wifi-anatomy.wifi-armed :is(.wifi-stage-img, .wifi-hot, .wifi-part, .wifi-plaque, .wifi-anatomy-title) { opacity: 1; transform: none; scale: none; translate: none; }
  .wifi-anatomy.wifi-armed .wifi-hot { translate: -50% -50%; }
  .wifi-anatomy.wifi-armed .wifi-leader { stroke-dashoffset: 0; }
}
@media print {
  .wifi-sweep { display: none; }
  .wifi-anatomy.wifi-armed :is(.wifi-stage-img, .wifi-hot, .wifi-part, .wifi-plaque, .wifi-anatomy-title) { opacity: 1; transform: none; scale: none; }
  .wifi-anatomy.wifi-armed .wifi-leader { stroke-dashoffset: 0; }
}