/* ══════════════════════════════════════════════════════════════
   Availability check — the full five-step intake funnel.
   Zip → Email → Mobile → Name → Thank You.
   The funnel copy is carried over verbatim from the existing
   intake flow and must not be reworded. Single-purpose screen,
   so it gets its own small layer on top of the shared design
   system rather than a section in the page CSS.
   ══════════════════════════════════════════════════════════════ */

.checkpage{
  /* the fixed .field__fallback / .grain layers own z-index 0 and 2, so page
     content has to sit above them exactly as main/.nav do on the homepage */
  position:relative; z-index:3;
  /* body already carries padding-bottom:var(--disc-h) for the fixed
     disclosure bar, so pinning this to a full 100svh made the page exactly
     one bar taller than the screen — a dead band of background you could
     scroll into, worst on a phone where the notice wraps to three lines. */
  flex:1 0 auto;
  display:flex; flex-direction:column;
}

/* The page column is body, not .checkpage: the legal strip and the space
   reserved for the fixed disclosure bar are part of the same column. Pinning
   .checkpage on its own made the document exactly one strip plus one bar
   taller than the screen, which is the band of empty background you could
   scroll into below the footer — worst on a phone, where the notice wraps to
   three lines. box-sizing is border-box, so padding-bottom is inside the
   100svh and the total comes out exactly one screen. */
body{
  min-height:100svh;
  display:flex; flex-direction:column;
}

/* The symbols in the inline sheet carry a 256-unit viewBox and no intrinsic
   size, so an unsized <svg> fell back to the CSS default 300x150 replaced
   box. Every icon on this page is set relative to the type it sits in. */
.ico{
  width:1.15em; height:1.15em;
  flex:none;
  fill:currentColor;
  vertical-align:-.15em;
}
.ico--sm{ width:1em; height:1em; }

.checkpage__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(1rem,2.4vw,1.6rem) 0;
}
.checkpage__bar img{ height:clamp(50px,5vw,64px); width:auto; }
.checkpage__tel{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:clamp(1rem,.95rem + .35vw,1.15rem);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--gold-lt);
  text-decoration:none;
  white-space:nowrap;
}
.checkpage__tel:hover{ text-decoration:underline; text-underline-offset:4px; }

.checkpage__body{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding-block:clamp(2rem,6vw,5rem) clamp(3rem,8vw,6rem);
}

.checkcard{
  position:relative;
  width:min(100%,720px);
  padding:clamp(1.9rem,4.6vw,3.6rem);
  border-radius:var(--r-xl);
  border-color:rgba(198,218,249,.26);
  box-shadow:0 60px 130px -60px rgba(0,0,0,.95),
             0 0 90px -50px rgba(143,179,236,.6);
  text-align:center;
}
.checkcard__label{
  display:inline-flex; align-items:center; gap:.65rem;
  padding:.6rem 1.3rem .6rem 1.05rem;
  border-radius:999px;
  border:1px solid rgba(198,218,249,.4);
  background:linear-gradient(120deg,rgba(143,179,236,.16),rgba(143,179,236,.05));
  font-size:clamp(.78rem,.74rem + .22vw,.9rem);
  font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold-lt);
  margin-bottom:1.9rem;
}
.checkcard__label i{
  width:8px; height:8px; border-radius:50%;
  background:var(--gold-lt);
  animation:badgePulse 2.6s var(--ease) infinite;
}
.checkcard__title{
  font-size:clamp(2rem,1.2rem + 3.4vw,3.5rem);
  line-height:1.03;
  letter-spacing:-.04em;
  font-weight:500;
  color:var(--cream);
  text-wrap:balance;
}
.checkcard__title em{ display:block; font-style:normal; color:var(--gold-lt); }
.checkcard__copy{
  margin:1.3rem auto 0;
  max-width:46ch;
  font-size:clamp(1.06rem,1rem + .3vw,1.2rem);
  color:var(--txt-soft);
}

/* ── progress rail ─────────────────────────────────────────────
   The source funnel prints a bare percentage (46 / 71 / 96) above
   a thin bar. Same numbers, drawn as a rail that belongs to the
   card instead of floating over the header.                     */
.checkprog{
  display:flex; align-items:center; gap:1rem;
  margin-bottom:clamp(1.8rem,4vw,2.6rem);
}
.checkprog[hidden]{ display:none; }
.checkprog__rail{
  position:relative; flex:1;
  height:4px; border-radius:999px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.checkprog__fill{
  position:absolute; inset:0 auto 0 0;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt));
  transition:width .7s var(--ease);
}
.checkprog__pct{
  flex:none;
  min-width:3.4ch;
  text-align:right;
  font-size:.86rem; font-weight:700;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  color:var(--gold-lt);
}

/* ── steps ─────────────────────────────────────────────────────
   Only one step is in the DOM flow at a time; the card grows and
   shrinks around it, and the incoming panel drifts up into place. */
.fstep[hidden]{ display:none; }
.fstep{ animation:stepIn .5s var(--ease) both; }
@keyframes stepIn{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .fstep{ animation:none; }
  .checkprog__fill{ transition:none; }
}

.fstep__title{
  font-size:clamp(1.7rem,1.1rem + 2.4vw,2.6rem);
  line-height:1.06;
  letter-spacing:-.035em;
  font-weight:500;
  color:var(--gold-lt);
  text-wrap:balance;
}

.zipform{
  display:flex; flex-direction:column; gap:1rem;
  margin-top:clamp(2rem,4vw,2.9rem);
  text-align:left;
}
.zipform__label{
  display:block;
  font-size:.86rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt-soft);
}
.zipform__field{
  width:100%;
  padding:1.15rem 1.4rem;
  border-radius:var(--r-sm);
  border:1px solid var(--edge-2);
  background:rgba(6,14,24,.66);
  color:var(--cream);
  font-family:inherit;
  font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);
  font-weight:500;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.zipform__field::placeholder{ color:var(--txt-mute); letter-spacing:.02em; font-weight:400; }
.zipform__field:focus{
  outline:none;
  border-color:rgba(198,218,249,.7);
  background:rgba(8,18,30,.85);
  box-shadow:0 0 0 4px rgba(143,179,236,.16);
}
.zipform__field[aria-invalid="true"]{ border-color:#E8807A; box-shadow:0 0 0 4px rgba(232,128,122,.16); }

/* first / last name sit side by side once there is room for two
   comfortable fields; they stack below that rather than squeeze. */
.zipform__pair{ display:grid; gap:1rem; }
@media (min-width:520px){ .zipform__pair{ grid-template-columns:1fr 1fr; } }

.zipform__error{
  font-size:.95rem;
  color:#F0A9A4;
}
.zipform__error[hidden]{ display:none; }

.zipform .btn{
  justify-content:center;
  font-size:clamp(1.05rem,.98rem + .35vw,1.2rem);
  padding:1.15rem 1.8rem;
}

/* ── consent block ─────────────────────────────────────────── */
.consent{
  margin-top:1.5rem;
  padding-top:1.4rem;
  border-top:1px solid var(--edge);
  text-align:left;
}
.consent__copy{
  font-size:.94rem;
  line-height:1.62;
  color:var(--txt-mute);
}
.consent__copy strong{ color:var(--txt-soft); font-weight:700; }
/* Consent now sits between the fields and Submit, so the button needs its
   own air rather than sitting flush against the checkbox. */
.consent + .btn{ margin-top:1.5rem; }
.consent__check{
  display:flex; align-items:flex-start; gap:.75rem;
  margin-top:1rem;
  font-size:1rem;
  color:var(--txt-soft);
  cursor:pointer;
}
/* native checkboxes render as a bright white chip on this dark card,
   so the box is drawn from scratch and the tick painted on :checked */
.consent__check input{
  appearance:none; -webkit-appearance:none;
  flex:none;
  width:22px; height:22px;
  margin:.1rem 0 0;
  border:1px solid var(--edge-2);
  border-radius:6px;
  background:rgba(6,14,24,.66);
  cursor:pointer;
  display:grid; place-content:center;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.consent__check input::after{
  content:"";
  width:11px; height:6px;
  border-left:2px solid #17244A;
  border-bottom:2px solid #17244A;
  transform:rotate(-45deg) scale(.4);
  opacity:0;
  transition:transform .25s var(--ease), opacity .2s ease;
}
.consent__check input:checked{
  background:var(--gold);
  border-color:var(--gold);
}
.consent__check input:checked::after{ opacity:1; transform:rotate(-45deg) scale(1); }
.consent__check input:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(143,179,236,.22);
}
.consent__check:hover{ color:var(--cream); }

/* ── back control ──────────────────────────────────────────── */
.stepback{
  /* block-level so it sits at the start of the line box regardless of
     the card's centred text alignment — matches the source funnel */
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  margin-top:clamp(1.6rem,3.4vw,2.2rem);
  border-radius:999px;
  border:1px solid var(--edge-2);
  background:rgba(255,255,255,.06);
  color:var(--cream);
  font-size:1.1rem;
  cursor:pointer;
  transition:background .3s ease, border-color .3s ease, transform .3s var(--ease);
}
.stepback:hover{ background:rgba(255,255,255,.13); border-color:rgba(198,218,249,.6); transform:translateX(-3px); }

/* ── thank you ─────────────────────────────────────────────── */
.thanks{ text-align:center; }
.thanks__mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:74px; height:74px;
  margin-bottom:1.6rem;
  border-radius:999px;
  border:1px solid rgba(198,218,249,.42);
  background:linear-gradient(140deg,rgba(143,179,236,.22),rgba(143,179,236,.05));
  color:var(--gold-lt);
  font-size:1.9rem;
}
.thanks__copy{
  margin:1.3rem auto 0;
  max-width:48ch;
  font-size:clamp(1.06rem,1rem + .3vw,1.2rem);
  color:var(--txt-soft);
}

.checkcard__foot{
  display:flex; align-items:flex-start; gap:.85rem;
  margin-top:clamp(1.9rem,4vw,2.6rem);
  padding-top:1.6rem;
  border-top:1px solid var(--edge);
  text-align:left;
  font-size:1rem;
  color:var(--txt-soft);
}
.checkcard__foot span[aria-hidden]{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:999px;
  border:1px solid rgba(198,218,249,.3);
  background:rgba(143,179,236,.12);
  color:var(--gold-lt);
  font-size:.95rem; font-weight:700;
}

.checkpage__back{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1.6rem;
  font-size:1rem;
  color:var(--txt-mute);
  text-decoration:none;
}
.checkpage__back:hover{ color:var(--gold-lt); }

@media (max-width:560px){
  .checkpage__bar{ flex-direction:column; align-items:flex-start; gap:.7rem; }
  .checkcard{ text-align:left; }
  .checkcard__title{ text-wrap:pretty; }
  .checkcard__copy{ margin-inline:0; }
  .thanks{ text-align:left; }
  .thanks__copy{ margin-inline:0; }
}

/* ══════════════════════════════════════════════════════════════
   Light-ground adaptation.
   Everything above was written for the previous dark page: white
   borders at low alpha, near-black field backgrounds, cream type.
   On the bone ground those read as invisible or as heavy grey
   slabs, so each of them is restated here rather than edited in
   place — this block is what to delete if the page ever goes dark
   again.
   ══════════════════════════════════════════════════════════════ */

.checkcard{
  border-color:var(--rule-soft);
  box-shadow:0 40px 90px -60px rgba(22,24,26,.42);
}

.checkcard__label{
  border-color:rgba(14,92,74,.24);
  background:var(--emerald-t);
  color:var(--emerald);
}

.checkcard__title,
.fstep__title{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.022em;
  color:var(--ink);
}
.checkcard__title em,
.fstep__title{ color:var(--emerald); }

.checkprog__rail{ background:var(--bone-2); }

/* A form field has to read as an opening in the page, not a slab
   laid on top of it: paper ground, hairline edge, ink text. */
.zipform__field{
  background:var(--paper);
  border-color:var(--rule);
  color:var(--ink);
}
.zipform__field:focus{
  border-color:var(--emerald);
  background:#fff;
  box-shadow:0 0 0 4px var(--emerald-t);
}
.zipform__field[aria-invalid="true"]{ border-color:#B3453D; box-shadow:0 0 0 4px rgba(179,69,61,.12); }
.zipform__error{ color:#8F332C; }

/* The page's only primary action must not be bone-on-bone. */
.zipform .btn--gold{ --btn-bg:var(--ink); --btn-fg:var(--bone); }
@media (hover:hover) and (pointer:fine){
  .zipform .btn--gold:hover{ --btn-bg:var(--emerald); --btn-fg:var(--bone); }
}

.consent__check input{
  background:var(--paper);
  border-color:var(--rule);
}
.consent__check input::after{
  border-left-color:var(--bone);
  border-bottom-color:var(--bone);
}
.consent__check input:focus-visible{ box-shadow:0 0 0 4px var(--emerald-t); }
.consent__check:hover{ color:var(--ink); }

.stepback{
  background:var(--paper);
  border-color:var(--rule);
  color:var(--ink);
}
.stepback:hover{ background:var(--bone-2); border-color:var(--emerald); }

.thanks__mark,
.checkcard__foot span[aria-hidden]{
  border-color:rgba(14,92,74,.22);
  background:var(--emerald-t);
  color:var(--emerald);
}

.checkpage__tel{ color:var(--emerald); }
.checkpage__back:hover{ color:var(--emerald); }

/* ══════════════════════════════════════════════════════════════
   Round 4 (2026-09-28): "dull and white". The page takes the site's
   emerald, adds one warm third colour (the gold of the logo's laurel)
   for everything that means "go", and gets a scene beside the card:
   the visitor's area being scanned, one location lighting per step.
   ══════════════════════════════════════════════════════════════ */
:root{ --sun:#E2AE3A; --sun-d:#C8922A; --sun-t:rgba(226,174,58,.18); }

body{
  background:
    radial-gradient(60% 50% at 88% 12%, rgba(226,174,58,.16), transparent 70%),
    radial-gradient(70% 60% at 6% 96%, rgba(14,106,78,.16), transparent 70%),
    var(--bone);
}
.checkpage__bar{ justify-content:flex-start; }
.checkpage__body{ padding-block:clamp(.5rem,2vw,1.5rem) clamp(2.5rem,6vw,4.5rem); align-items:stretch; }

.checkstage{
  width:min(100%,1180px); margin-inline:auto;
  display:grid; gap:0;
  grid-template-columns:minmax(0,1fr);
  border-radius:18px; overflow:hidden;
  background:var(--card);
  box-shadow:0 50px 110px -60px rgba(7,53,39,.55), 0 0 0 1px rgba(10,70,52,.10);
}
@media (min-width:980px){ .checkstage{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); } }

/* ── the scene ─────────────────────────────────────────────── */
.checkscene{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:220px;
  background:#073527;
}
@media (min-width:980px){ .checkscene{ min-height:640px; } }
.checkscene::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(90% 70% at 50% 45%, rgba(14,106,78,.0), rgba(4,30,22,.55) 100%);
}
.checkscene{
  background:
    radial-gradient(120% 90% at 30% 10%, #0E5A43 0%, #073527 55%, #04261C 100%);
}

/* ── the network map ────────────────────────────────────────
   The fifty states drawn in, then one city per state lighting up in
   turn, each with a short label, until the whole country is covered.
   The first digit of the ZIP picks the region; the map moves to it and
   the nearest cities connect, one per step. */
.netmap{
  position:absolute; z-index:0; inset:0;
  display:grid; place-items:center;
  padding:clamp(14px,4%,36px);
}
.netmap svg{ width:100%; height:auto; max-height:100%; overflow:visible; }
.netmap__cam{
  transform-box:view-box;
  transition:transform 1.6s cubic-bezier(.65,0,.35,1);
}
.netmap__state{
  fill:rgba(239,243,241,.05); stroke:rgba(239,243,241,.30); stroke-width:.8; vector-effect:non-scaling-stroke; stroke-linejoin:round;
  opacity:0; transition:opacity .9s ease var(--d), fill 1.2s ease;
}
.netmap.is-drawn .netmap__state{ opacity:1; }
.netmap__state.is-covered{ fill:rgba(226,174,58,.13); }
.netmap__city{ opacity:0; }
.netmap__city.is-on{ opacity:1; }
.netmap__site{
  fill:var(--sun);
  transform-box:fill-box; transform-origin:center; transform:scale(0);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1);
}
.netmap__city.is-on .netmap__site{ transform:scale(1); }
.netmap__city.is-lit .netmap__site{ transform:scale(1.6); filter:drop-shadow(0 0 4px rgba(226,174,58,.85)); }
.netmap__ring{
  fill:none; stroke:var(--sun); stroke-width:1.4; opacity:0;
  transform-box:fill-box; transform-origin:center;
}
.netmap__city.is-on .netmap__ring,
.netmap__city.is-ping .netmap__ring{ animation:cityRing 1.3s cubic-bezier(.2,.7,.3,1) both; }
@keyframes cityRing{ 0%{ transform:scale(.3); opacity:.95; } 100%{ transform:scale(3.2); opacity:0; } }
.netmap__label{ opacity:0; transform-box:fill-box; transition:opacity .45s ease; }
.netmap__label.is-in{ opacity:1; }
.netmap__label text{
  font:600 24px/1 var(--sans, 'Satoshi', system-ui, sans-serif); letter-spacing:.01em;
  fill:var(--white, #FEFAEA);
  paint-order:stroke; stroke:rgba(4,40,29,.85); stroke-width:6px; stroke-linejoin:round;
}
/* the visitor's own ZIP: drawn inside the zoomed camera, so its type is
   set smaller and reads at about the size of the roll-call labels */
/* scaled with the camera: it has to pivot on its own anchor, not on its box */
.netmap__label--home{ transform-box:view-box; }
.netmap__label--home text{ font-size:11.5px; font-weight:700; stroke-width:3.2px; letter-spacing:.02em; }
.netmap__link{
  fill:none; stroke:var(--sun); stroke-width:1.1; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; opacity:.8; stroke-width:.5;
  transition:stroke-dashoffset 1s cubic-bezier(.65,0,.35,1);
}
.netmap__link.is-drawn{ stroke-dashoffset:0; }
.netmap__city > *, .netmap__home{ transition-property:transform, opacity; }
.netmap__home{ opacity:0; transition:opacity .8s ease .6s; }
.netmap.is-located .netmap__home{ opacity:1; }
.netmap__core{ fill:var(--white, #FEFAEA); stroke:var(--sun); stroke-width:2; }
.netmap__halo{ fill:none; stroke:var(--sun); stroke-width:1; opacity:.55; }
.netmap__pulse{
  fill:none; stroke:var(--sun); stroke-width:1.2;
  transform-box:fill-box; transform-origin:center;
  animation:netPulse 2.8s cubic-bezier(.2,.7,.3,1) infinite;
}
.netmap__pulse + .netmap__pulse{ animation-delay:1.4s; }
@keyframes netPulse{ 0%{ transform:scale(.4); opacity:.9; } 100%{ transform:scale(4.2); opacity:0; } }
/* the scan: one wave out from the visitor's area */
.netmap__wave{
  fill:none; stroke:rgba(226,174,58,.7); stroke-width:1.4; opacity:0;
  transform-box:fill-box; transform-origin:center;
}
.checkstage.is-scanning .netmap__wave{ animation:netWave 1.8s cubic-bezier(.25,.6,.3,1) both; }
@keyframes netWave{ 0%{ transform:scale(.2); opacity:.95; } 100%{ transform:scale(9); opacity:0; } }

/* ── the card ──────────────────────────────────────────────── */
.checkstage .checkcard{
  width:auto; margin:0;
  border:0; border-radius:0; box-shadow:none;
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(226,174,58,.10), transparent 60%),
    var(--card);
  padding:clamp(1.8rem,4.4vw,3.6rem) clamp(1.4rem,4.4vw,3.8rem);
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}

.checkcall{
  align-self:center;
  display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:center;
  gap:.35rem .6rem;
  margin:0 auto clamp(1.3rem,3vw,1.9rem);
  padding:.7rem 1.25rem;
  border-radius:999px;
  background:var(--green); color:var(--on-green);
  text-decoration:none;
  font-size:clamp(1rem,.95rem + .3vw,1.15rem); font-weight:700; letter-spacing:-.005em;
  box-shadow:0 12px 26px -14px rgba(7,53,39,.8);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.checkcall .ico{ color:var(--sun); }
.checkcall__who{ color:var(--sun); }
.checkcall__num{ white-space:nowrap; font-variant-numeric:tabular-nums; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; }
@media (hover:hover) and (pointer:fine){ .checkcall:hover{ transform:translateY(-2px); background:var(--green-l); } }
.checkcall:active{ transform:scale(.98); }

.checkcard__label{ margin-bottom:1.4rem; }
.checkcard__label i{ background:var(--sun); }
.checkcard__title{ font-weight:500; font-size:clamp(2.3rem,1.3rem + 3.8vw,4rem); }
.checkcard__title em{
  color:var(--green);
  background:linear-gradient(transparent 70%, var(--sun-t) 70%, var(--sun-t) 92%, transparent 92%);
  padding-inline:.08em; justify-self:center;
}

/* progress: gold on a soft rail */
.checkprog__rail{ height:8px; background:rgba(10,70,52,.10); }
.checkprog__fill{ background:linear-gradient(90deg, var(--green-l), var(--sun)); }
.checkprog__pct{ color:var(--green); }

/* the one colour that means "go" */
.zipform .btn--gold{
  --btn-bg:var(--sun); --btn-fg:#0E1112;
  box-shadow:0 14px 30px -16px rgba(200,146,42,.9);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .zipform .btn--gold:hover{ --btn-bg:var(--green); --btn-fg:var(--on-green); transform:translateY(-2px);
    box-shadow:0 18px 34px -16px rgba(7,53,39,.8); }
}
.zipform .btn--gold:active{ transform:scale(.98); }
.zipform__field:focus{ border-color:var(--green); box-shadow:0 0 0 4px var(--sun-t); }
.consent__check input:checked{ background:var(--green); border-color:var(--green); }

/* ── submit effect ────────────────────────────────────────── */
.fstep.is-leaving{ animation:stepOut .35s var(--ease) both; }
@keyframes stepOut{ to{ opacity:0; transform:translateY(-10px) scale(.98); } }
.scanning{
  position:absolute; inset:0; z-index:4;
  display:grid; place-items:center;
  background:rgba(255,252,242,.94);
  animation:fadeIn .3s ease both;
}
.scanning[hidden]{ display:none; }
.scanning > *{ grid-area:1/1; }
.scanning__track{
  width:min(220px,60%); height:3px; border-radius:3px; overflow:hidden;
  background:rgba(10,70,52,.12);
}
.scanning__bar{
  display:block; width:38%; height:100%; border-radius:inherit;
  background:linear-gradient(90deg, var(--green-l), var(--sun));
  animation:scanBar 1.1s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes scanBar{ from{ transform:translateX(-110%); } to{ transform:translateX(290%); } }
@keyframes fadeIn{ from{ opacity:0; } }

/* the thank-you check draws itself */
.thanks__mark{
  width:92px; height:92px; border:0; background:none; padding:0;
}
.thanks__mark svg{ width:100%; height:100%; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.thanks__mark circle{
  stroke:var(--sun); stroke-width:3; fill:var(--sun-t);
  stroke-dasharray:151; stroke-dashoffset:151;
  animation:draw .7s .1s var(--ease) forwards;
}
.thanks__mark path{
  stroke:var(--green); stroke-width:4;
  stroke-dasharray:36; stroke-dashoffset:36;
  animation:draw .45s .7s var(--ease) forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.thanks .checkcard__title{ animation:stepIn .6s .5s var(--ease) both; }
.thanks__copy{ animation:stepIn .6s .7s var(--ease) both; }

@media (max-width:560px){
  .checkcall{ flex-wrap:nowrap; gap:.4rem; padding:.65rem .95rem; font-size:.9rem; white-space:nowrap; }
  .checkcard__title em{ justify-self:start; }
}
@media (prefers-reduced-motion:reduce){
  .netmap__cam{ transition:none; }
  .netmap__pulse,.netmap__ring{ animation:none !important; }
  .netmap__state,.netmap__site{ transition:none; }
  .checkstage.is-scanning .netmap__wave{ animation:none; }
  .thanks__mark circle,.thanks__mark path{ animation:none; stroke-dashoffset:0; }
  .thanks .checkcard__title,.thanks__copy{ animation:none; }
}