/* ============================================================
   AirCheck Auto — /sign-up
   Loads AFTER styles.css and inherits its tokens. Same register:
   a controlled regulatory instrument. The form is the record card
   from the home page, being filled out.
   ============================================================ */

/* Several components below set `display`, which would otherwise beat the
   [hidden] attribute this page uses to gate the reader, the timeline and the
   confirmation. Keep this first. */
[hidden] { display: none !important; }

/* ---------- 1. Page frame ---------- */
.page-signup {
  --dock-h: 0px;
  background: var(--paper);
  padding-bottom: var(--dock-h);
}

/* Slim masthead: the flow keeps the brand but drops the site nav */
.masthead--flow .masthead__inner { gap: 20px; }
.masthead__tag {
  margin-left: 16px; padding-left: 16px;
  border-left: 1px solid var(--rule-strong);
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.masthead__back {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--forest);
  border-bottom: 1px solid transparent; padding-bottom: 3px;
  transition: border-color .2s ease;
}
.masthead__back:hover { border-color: var(--leaf); }

/* ---------- 2. Progress rail ---------- */
.rail {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.rail__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 52px;
}
.rail__steps { display: flex; align-items: center; gap: 0; flex: 1; min-width: 0; }
.rail__step {
  display: flex; align-items: center; gap: 10px;
  padding-right: 26px; margin-right: 26px;
  border-right: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color .3s ease;
}
.rail__step:last-child { border-right: 0; padding-right: 0; margin-right: 0; }
.rail__step b {
  display: grid; place-items: center;
  width: 22px; height: 22px; flex: none;
  border: 1px solid var(--rule-strong); border-radius: 50%;
  font-weight: 500; font-size: 10px; color: var(--muted);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.rail__step.is-active { color: var(--forest); }
.rail__step.is-active b { border-color: var(--leaf); color: var(--forest); }
.rail__step.is-active.is-done b { border-color: var(--leaf-deep); }
.rail__step.is-done b {
  background: var(--leaf-deep); border-color: var(--leaf-deep); color: #fff;
  font-size: 0;
}
.rail__step.is-done b::after { content: "\2713"; font-size: 11px; }
.rail__meter {
  font-family: var(--mono); flex: none;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.rail__meter b { color: var(--leaf-deep); font-weight: 600; }

/* ---------- 3. Page head ---------- */
.enroll-head { padding-block: 64px 44px; }
.enroll-head h1 {
  font-size: clamp(40px, 6vw, 74px);
  line-height: .95;
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.038em;
}
.enroll-head h1 em {
  font-style: normal; color: var(--leaf-deep);
  box-shadow: inset 0 -0.085em 0 rgba(60, 168, 42, .34);
}
.enroll-head__lede {
  max-width: 64em; margin-top: 24px;
  font-size: 18.5px; line-height: 1.6;
}

.demo-note {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px;
  max-width: 62em; margin-top: 30px; padding: 14px 18px;
  border: 1px dashed var(--rule-strong); border-radius: 4px;
  background: rgba(2, 69, 47, .026);
  font-size: 13px; line-height: 1.55; color: var(--muted);
}
.demo-note__tag {
  padding: 3px 9px; border-radius: 2px;
  background: var(--forest); color: #fff;
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
}

/* ---------- 4. Two-column shell ---------- */
.enroll {
  display: grid; grid-template-columns: minmax(0, 1fr) 356px;
  gap: 72px; align-items: start;
  padding-bottom: 108px;
}
.enroll__steps { min-width: 0; }
.enroll__aside { position: sticky; top: calc(var(--nav-h) + 76px); }

/* ---------- 5. Steps ---------- */
.step {
  border-top: 1px solid var(--rule);
  padding-block: 46px;
  scroll-margin-top: calc(var(--nav-h) + 70px);
}
.step:first-child { border-top: 0; padding-top: 8px; }
.step__head h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.03em;
}
.step__lede { max-width: 38em; margin-top: 14px; font-size: 15.5px; color: var(--muted); }
.step__body { margin-top: 34px; }

/* A locked step is legible but inert until the one before it is answered */
.js .step.is-locked { position: relative; }
.js .step.is-locked .step__head { opacity: .42; }
.js .step.is-locked .step__body {
  max-height: 0; overflow: hidden; opacity: 0; margin-top: 0;
  transition: max-height .5s cubic-bezier(.22, .61, .36, 1), opacity .3s ease, margin-top .4s ease;
}
.js .step:not(.is-locked) .step__body {
  max-height: 5200px; opacity: 1;
  transition: max-height .7s cubic-bezier(.22, .61, .36, 1), opacity .5s ease .1s, margin-top .4s ease;
}
.js .step.is-locked::after {
  content: "Locked"; position: absolute; top: 48px; right: 0;
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #93a79c;
}

.step__foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px;
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.step__foot-note {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .085em; text-transform: uppercase;
  line-height: 1.5; color: var(--muted);
}
.btn[disabled], .btn.is-off {
  background: #c3cfc7; color: #66786e;
  box-shadow: none; cursor: not-allowed; pointer-events: none;
}

/* ---------- 6. Form controls ---------- */
.field-row { display: block; }
.field-row + .field-row { margin-top: 22px; }
.field-row--tight { margin-top: 24px; }

.lbl {
  display: block; margin-bottom: 9px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.inp {
  width: 100%; min-height: 54px;
  padding: 14px 16px;
  border: 1px solid var(--rule-strong); border-radius: 4px;
  background: var(--white);
  color: var(--forest);
  font-family: var(--sans); font-size: 16px; font-weight: 500;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  -webkit-appearance: none; appearance: none;
}
.inp:hover { border-color: rgba(2, 69, 47, .44); }
.inp:focus {
  outline: none;
  border-color: var(--leaf-deep);
  box-shadow: 0 0 0 3px rgba(60, 168, 42, .17);
}
.inp::placeholder { color: #9aada3; font-weight: 400; }
.inp--mono {
  font-family: var(--mono); font-size: 15px;
  letter-spacing: .09em; text-transform: uppercase;
}
.inp--date { font-family: var(--mono); font-size: 15px; letter-spacing: .04em; }

select.inp {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--forest) 50%),
    linear-gradient(135deg, var(--forest) 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.inp.is-filled {
  /* background-color, not background: the shorthand resets background-image
     and takes the select arrow with it. */
  background-color: rgba(60, 168, 42, .05);
  border-color: rgba(60, 168, 42, .48);
}
/* A field the notice reader wrote into keeps a mark until it is edited */
.field-row.is-read .lbl::after {
  content: "scanned";
  margin-left: 10px; padding: 2px 7px;
  border-radius: 2px;
  background: rgba(60, 168, 42, .16); color: var(--leaf-deep);
  font-size: 9px; letter-spacing: .1em;
}

.help {
  margin-top: 9px;
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.help__link {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--leaf-deep);
  font: inherit; font-weight: 600;
  border-bottom: 1px solid rgba(60, 168, 42, .5);
}
.help__link:hover { color: var(--forest); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pair + .field-row { margin-top: 22px; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* Labels are different lengths and some carry a badge, so a wrapped label in
   one column must not shove its input out of line with the others. */
.trio .field-row, .pair .field-row { display: flex; flex-direction: column; }
.trio .field-row > .inp, .pair .field-row > .inp { margin-top: auto; }
.trio--addr { grid-template-columns: 1fr 178px 112px; margin-top: 22px; }
.trio--contact { grid-template-columns: 1.05fr 1.3fr .95fr; }
.help--span { margin-top: 10px; }

/* A quiet rule-and-label that separates the two addresses without shouting */
.sub {
  display: flex; align-items: center; gap: 16px;
  margin: 34px 0 20px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.sub span { flex: none; }
.sub::after {
  content: ""; flex: 1; height: 1px;
  background-image: linear-gradient(to right, var(--rule-strong) 1px, transparent 1px);
  background-size: 5px 1px;
}

.check--slim { margin-top: 24px; padding: 14px 16px; font-size: 13.5px; }
.check--slim input { width: 19px; height: 19px; }

/* The second address is visibly subordinate to the checkbox that revealed it */
.ship {
  margin-top: 4px; padding-left: 20px;
  border-left: 2px solid rgba(60, 168, 42, .4);
}
.ship .sub { margin-top: 24px; }

/* A locked select is not a broken one — it says "Step 01 decided this" */
select.inp:disabled {
  background-color: rgba(2, 69, 47, .05);
  color: var(--forest);
  opacity: 1; cursor: not-allowed;
  background-image: none; padding-right: 16px;
}

.oos__note {
  margin-top: 22px; padding: 16px 18px;
  border: 1px dashed var(--rule-strong); border-left: 3px solid var(--leaf-deep);
  border-radius: 4px;
  background: rgba(60, 168, 42, .06);
  font-size: 13.5px; line-height: 1.58; color: var(--muted);
}
.oos__note p + p { margin-top: 9px; }
.oos__note b { color: var(--forest); font-weight: 600; }

.done__flag {
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 56em; margin-top: 34px; padding: 16px 18px;
  border: 1px dashed var(--rule-strong); border-left: 3px solid var(--leaf-deep);
  border-radius: 4px;
  background: rgba(60, 168, 42, .06);
  font-size: 14.5px; line-height: 1.55; color: var(--muted);
}
.done__flag-mark { color: var(--leaf); font-size: 9px; margin-top: .4em; }
.done__flag b { color: var(--forest); font-weight: 600; }
.trio .field-row + .field-row { margin-top: 0; }

.check {
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: 30px; padding: 18px;
  border: 1px solid var(--rule); border-radius: 4px;
  background: rgba(2, 69, 47, .026);
  font-size: 14px; line-height: 1.55; color: var(--muted);
  cursor: pointer;
}
.check input {
  flex: none; width: 21px; height: 21px; margin: 1px 0 0;
  accent-color: var(--leaf-deep); cursor: pointer;
}

/* ---------- 7. The state map ---------- */
/* Real Census state geometry, Albers-projected (see us-states.js). Drawn on
   the same hairline plotting grid the rest of the site uses, so it reads as
   an instrument panel rather than an infographic. */
/* The picker below the map is optional markup, so the gap between them belongs
   to the picker. On the map it would just be dead space when the picker is not
   there. */
.map { margin-bottom: 0; }
.picker { margin-top: 30px; }
.map__legend {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.key { display: inline-flex; align-items: center; gap: 9px; }
.key i { width: 11px; height: 11px; border-radius: 2px; }
.key--live i { background: var(--leaf); }
.key--next i { background: rgba(60, 168, 42, .26); border: 1.5px dashed var(--leaf-deep); }
.key--soon i { background: rgba(2, 69, 47, .06); border: 1px solid var(--rule-strong); }

.map__plate {
  position: relative;
  padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: 5px;
  background-color: var(--white);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 34px 34px;
  background-position: center;
}
.map__svg { display: block; width: 100%; height: auto; overflow: visible; }

.st {
  fill: rgba(2, 69, 47, .055);
  stroke: rgba(2, 69, 47, .26);
  stroke-width: 1;
  stroke-linejoin: round;
  /* Strokes stay hairline-crisp at every map size, which matters a lot
     between a 730px desktop column and a 330px phone. */
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill .16s ease, stroke .16s ease;
}
.st:hover { fill: rgba(2, 69, 47, .15); stroke: var(--forest); }
.st.is-live {
  fill: var(--leaf);
  stroke: var(--forest);
  stroke-width: 1.4;
}
.st.is-live:hover { fill: var(--leaf-bright); }

/* Coming soon: a dashed edge rather than a new hue. The palette is one colour
   on purpose, and a broken outline reads as provisional without inventing a
   second brand colour for a state that is not open yet. */
.st.is-soon {
  fill: rgba(60, 168, 42, .26);
  stroke: var(--leaf-deep);
  stroke-width: 1.4;
  stroke-dasharray: 5 3;
}
.st.is-soon:hover { fill: rgba(60, 168, 42, .42); }
.co.is-live .co__box { fill: var(--leaf); stroke: var(--forest); }
.co.is-live .co__txt { fill: #06301b; font-weight: 600; }
.co.is-soon .co__box {
  fill: rgba(60, 168, 42, .26);
  stroke: var(--leaf-deep);
  stroke-dasharray: 5 3;
}
.co.is-soon .co__txt { fill: var(--forest); }
.co:focus { outline: none; }
.co:focus-visible .co__box { stroke: var(--leaf-deep); stroke-width: 2.6; }
.st.is-picked, .st.is-live.is-picked {
  fill: var(--forest); stroke: var(--forest-deep); stroke-width: 1.6;
}
.st:focus { outline: none; }
.st:focus-visible { stroke: var(--leaf-deep); stroke-width: 2.6; }

/* A ring that keeps the two live states findable at a glance. It fades in and
   out rather than animating `r`: an SVG geometry animation forces the whole
   51-path map through layout and repaint every frame, which pins the main
   thread. Opacity on a composited layer costs nothing. */
.map__halo {
  fill: none; stroke: var(--leaf); stroke-width: 0;
  vector-effect: non-scaling-stroke;
  opacity: .1;
  will-change: opacity;
  animation: halo 2.8s ease-in-out infinite;
}
@keyframes halo {
  0%, 100% { opacity: .15; }
  50%      { opacity: .7; }
}
.map__tag {
  font-family: var(--mono); font-size: 22px; font-weight: 600;
  letter-spacing: .06em; fill: #06301b; pointer-events: none;
  text-anchor: middle; dominant-baseline: middle;
}
.st.is-picked + .map__tag, .map__tag.is-picked { fill: #fff; }

/* Call-outs for the states too small to hit: DC, DE, RI and the rest */
.co__lead { stroke: var(--rule-strong); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.co__box {
  fill: var(--white); stroke: var(--rule-strong); stroke-width: 1;
  vector-effect: non-scaling-stroke;
  cursor: pointer; transition: fill .16s ease, stroke .16s ease;
}
.co:hover .co__box { fill: rgba(2, 69, 47, .12); stroke: var(--forest); }
.co.is-picked .co__box { fill: var(--forest); stroke: var(--forest); }
.co__txt {
  font-family: var(--mono); font-size: 20px; letter-spacing: .06em;
  fill: var(--muted); text-anchor: middle; dominant-baseline: middle;
  pointer-events: none;
}
.co.is-picked .co__txt { fill: #fff; }

.map__readout {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 13px; padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
}
.map__readout-name { color: var(--forest); font-weight: 500; }
.map__readout-tag { color: var(--muted); }
.map__readout.is-live .map__readout-tag { color: var(--leaf-deep); }
.map__readout.is-soon .map__readout-tag { color: #6a7f5f; }

/* Fast-path chips — the primary target on a phone */
.picker__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  min-height: 74px; padding: 15px 18px;
  border: 1px solid var(--rule-strong); border-radius: 4px;
  background: var(--white);
  cursor: pointer; text-align: left;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.chip b {
  font-family: var(--sans); font-size: 18px; font-weight: 600;
  font-variation-settings: "wdth" 103; letter-spacing: -0.018em;
  color: var(--forest);
}
.chip span {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.chip:hover {
  border-color: var(--leaf); transform: translateY(-2px);
  box-shadow: 0 14px 26px -18px rgba(2, 69, 47, .7);
}
.chip.is-picked {
  background: var(--forest); border-color: var(--forest);
  box-shadow: 0 14px 26px -18px rgba(2, 69, 47, .9);
}
.chip.is-picked b { color: #fff; }
.chip.is-picked span { color: var(--leaf-bright); }

.waitlist.is-soon { border-left-style: dashed; }
.waitlist {
  margin-top: 26px; padding: 22px;
  border: 1px solid var(--rule); border-left: 3px solid var(--leaf);
  border-radius: 4px;
  background: rgba(2, 69, 47, .03);
}
.waitlist__head {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.waitlist__head span { color: var(--leaf); font-size: 8px; margin-right: 6px; }
.waitlist__head b { color: var(--forest); font-weight: 600; }
.waitlist__copy { margin-top: 12px; font-size: 14.5px; line-height: 1.58; color: var(--muted); }
.waitlist__row { display: flex; gap: 12px; margin-top: 18px; }
.waitlist__row .inp { flex: 1; min-width: 0; }
.waitlist__row .btn { flex: none; min-height: 54px; }
.waitlist__done {
  display: flex; align-items: center; gap: 9px; margin-top: 14px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .085em; text-transform: uppercase;
  color: var(--leaf-deep);
}

/* ---------- 8. Notice reader ---------- */
.scan {
  position: relative;
  border: 1px solid var(--rule-strong); border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 78% 8%, rgba(90, 201, 63, .14), transparent 58%),
    linear-gradient(162deg, #0a4e36, var(--forest-deep));
}
.scan::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(circle at 70% 20%, #000 20%, transparent 80%);
  mask-image: radial-gradient(circle at 70% 20%, #000 20%, transparent 80%);
}
.scan.is-dragover { box-shadow: inset 0 0 0 2px var(--leaf-bright); }

.scan__pitch { position: relative; z-index: 1; padding: 34px 32px 32px; }
.scan__eyebrow {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--leaf-bright);
}
.scan__eyebrow span { font-size: 8px; }
.scan__pitch h3 {
  margin: 16px 0 10px;
  color: #fff; font-size: clamp(24px, 3vw, 32px);
  font-variation-settings: "wdth" 105; letter-spacing: -0.028em;
}
.scan__pitch > p { max-width: 40em; font-size: 15px; line-height: 1.6; color: var(--on-dark); }
.scan__actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 26px;
  margin-top: 26px;
}
.scan__trigger {
  background: var(--leaf-bright); color: var(--forest-deep);
  cursor: pointer; box-shadow: 0 14px 28px -14px rgba(90, 201, 63, .8);
}
.scan__trigger:hover { background: #6ddb51; }
.scan__icon { display: inline-flex; }
.scan__actions .link-arrow {
  color: var(--leaf-bright); border-color: rgba(90, 201, 63, .45);
  background: none; padding: 0 0 4px; cursor: pointer;
  font-family: var(--sans);
}
.scan__actions .link-arrow:hover { color: #fff; border-color: var(--leaf-bright); }
.scan__drophint {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(183, 204, 195, .8);
}

.scan__stage {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; border-top: 1px solid rgba(255, 255, 255, .14);
}

/* The document under the reader */
.reader {
  position: relative; overflow: hidden;
  min-height: 300px;
  background: #061e14;
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.reader__doc { position: relative; height: 100%; }
.reader__doc img {
  width: 100%; height: 100%; min-height: 300px;
  /* contain, not cover: the detected line boxes are mapped through the
     letterbox, and cropping would put them off the text. */
  object-fit: contain; object-position: center;
  filter: grayscale(.35) contrast(1.06);
}
.reader__doc--photo { background: #0a2a1c; }

/* The sample notice, drawn rather than photographed */
.notice {
  height: 100%; min-height: 300px; padding: 20px 22px;
  background: #f6f5ee; color: #2c2c28;
  font-family: var(--mono); font-size: 9px; line-height: 1.5;
  transform: rotate(-.6deg) scale(1.03);
}
.notice__seal {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 9px; border-bottom: 2px solid #2c2c28;
}
.notice__seal i {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: 1.5px solid #2c2c28;
  display: grid; place-items: center;
  font-size: 7px; font-style: normal; letter-spacing: .04em;
}
.notice__seal b { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.notice__seal em { font-style: normal; display: block; font-size: 7.5px; color: #66665e; letter-spacing: .06em; }
.notice__title {
  margin: 12px 0 10px; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.notice__rows { display: grid; gap: 5px; }
.notice__row { display: flex; gap: 8px; }
.notice__row b { flex: none; width: 74px; font-weight: 400; color: #77776d; letter-spacing: .04em; }
.notice__row span { font-weight: 600; letter-spacing: .05em; }
.notice__foot {
  margin-top: 12px; padding-top: 9px; border-top: 1px solid #c9c9bd;
  font-size: 7.5px; color: #77776d; line-height: 1.45;
}
.notice__barcode {
  display: flex; gap: 1.5px; height: 22px; margin-top: 10px; align-items: stretch;
}
.notice__barcode i { display: block; background: #2c2c28; }

/* Sweep, reticle, and the boxes the reader claims to have found */
.reader__sweep {
  position: absolute; left: 0; right: 0; height: 34%;
  background: linear-gradient(to bottom, transparent, rgba(90, 201, 63, .3) 72%, rgba(120, 255, 90, .95));
  box-shadow: 0 0 22px rgba(90, 201, 63, .6);
  opacity: 0; pointer-events: none;
}
.reader.is-scanning .reader__sweep { opacity: 1; animation: sweep 1.15s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes sweep {
  0%   { transform: translateY(-120%); }
  100% { transform: translateY(330%); }
}
.reader__reticle {
  position: absolute; inset: 12px; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
  background:
    linear-gradient(var(--leaf-bright), var(--leaf-bright)) 0 0 / 18px 1.5px no-repeat,
    linear-gradient(var(--leaf-bright), var(--leaf-bright)) 0 0 / 1.5px 18px no-repeat,
    linear-gradient(var(--leaf-bright), var(--leaf-bright)) 100% 0 / 18px 1.5px no-repeat,
    linear-gradient(var(--leaf-bright), var(--leaf-bright)) 100% 0 / 1.5px 18px no-repeat,
    linear-gradient(var(--leaf-bright), var(--leaf-bright)) 0 100% / 18px 1.5px no-repeat,
    linear-gradient(var(--leaf-bright), var(--leaf-bright)) 0 100% / 1.5px 18px no-repeat,
    linear-gradient(var(--leaf-bright), var(--leaf-bright)) 100% 100% / 18px 1.5px no-repeat,
    linear-gradient(var(--leaf-bright), var(--leaf-bright)) 100% 100% / 1.5px 18px no-repeat;
}
.reader.is-scanning .reader__reticle { opacity: .9; }

.reader__boxes { position: absolute; inset: 0; pointer-events: none; }
.reader.is-sample .reader__boxes { transform: rotate(-.6deg) scale(1.03); }
.box {
  position: absolute;
  border: 1.5px solid var(--leaf-bright);
  background: rgba(90, 201, 63, .14);
  border-radius: 2px;
  opacity: 0; transform: scale(.94);
  transition: opacity .28s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
}
.box.is-on { opacity: 1; transform: scale(1); }
.box b {
  /* To the right of the box, not above it — above covers the line the reader
     just claimed to read. */
  position: absolute; left: calc(100% + 5px); top: 50%;
  transform: translateY(-50%);
  padding: 2px 6px; border-radius: 2px;
  background: var(--leaf-bright); color: #06301b;
  font-family: var(--mono); font-size: 8px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
}

.reader__side { padding: 24px 26px 26px; display: flex; flex-direction: column; }
.reader__status {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--leaf-bright);
}
.reader__status::before {
  content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--leaf-bright);
  animation: pulse 1.6s ease-out infinite;
}
.reader__status.is-done::before { animation: none; }
.reader__log { display: grid; gap: 2px; }
.reader__log li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .09);
  font-family: var(--mono); font-size: 11px;
  opacity: 0; transform: translateY(5px);
  animation: log-in .32s ease forwards;
}
@keyframes log-in { to { opacity: 1; transform: none; } }
.reader__log li b {
  flex: none; width: 82px;
  font-weight: 400; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(183, 204, 195, .75);
}
.reader__log li span { color: #fff; font-weight: 500; letter-spacing: .04em; }
.reader__redo {
  margin-top: auto; padding: 11px 0 0; align-self: flex-start;
  background: none; border: 0; border-bottom: 1px solid rgba(90, 201, 63, .5);
  color: var(--leaf-bright); cursor: pointer;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.reader__redo:hover { color: #fff; }

/* ---------- 9. Manual entry ---------- */
.or {
  display: flex; align-items: center; gap: 20px;
  margin: 34px 0 30px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #93a79c;
}
.or::before, .or::after {
  content: ""; flex: 1; height: 1px;
  background-image: linear-gradient(to right, var(--rule-strong) 1px, transparent 1px);
  background-size: 5px 1px;
}

.tabs__bar {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--rule); border-radius: 4px;
  background: rgba(2, 69, 47, .04);
}
.tabs__tab {
  padding: 10px 18px; border: 0; border-radius: 3px;
  background: none; cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  transition: background .2s ease, color .2s ease;
}
.tabs__tab:hover { color: var(--forest); }
.tabs__tab.is-active { background: var(--forest); color: #fff; }
.tabs__pane { margin-top: 22px; }

.vin { position: relative; }
.vin .inp { padding-right: 76px; }
.vin__count {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: #9aada3; pointer-events: none;
}
.vin__count b { color: var(--forest); font-weight: 500; }

.decode {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 14px; padding: 14px 16px;
  border-radius: 4px; border-left: 3px solid var(--leaf);
  background: rgba(60, 168, 42, .07);
  font-size: 14px; line-height: 1.5; color: var(--muted);
}
.decode b {
  display: block; font-size: 16px; font-weight: 600; color: var(--forest);
  font-variation-settings: "wdth" 103; letter-spacing: -0.015em;
}
.decode small {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.decode::before {
  content: "\2713"; flex: none;
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: var(--leaf-deep); color: #fff;
  font-size: 12px; font-weight: 700;
}
.decode.is-bad { border-left-color: #b3541e; background: rgba(179, 84, 30, .08); }
.decode.is-bad::before { content: "!"; background: #b3541e; }
.decode.is-bad b { color: #8a3f14; }

/* ---------- 10. Due-date timeline ---------- */
.due { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--rule); }
.timeline { margin: 30px 0 0; }
.timeline__bar {
  position: relative; height: 3px; margin: 40px 0 62px;
  background: var(--rule);
  border-radius: 2px;
}
.timeline__fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: linear-gradient(to right, var(--leaf-deep), var(--leaf));
  border-radius: 2px;
  transition: width .8s cubic-bezier(.22, .61, .36, 1), left .8s cubic-bezier(.22, .61, .36, 1);
}
.timeline__pip { position: absolute; top: 0; display: block; }
.timeline__pip i {
  position: absolute; top: -6px; left: -7px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--leaf-deep);
}
.timeline__pip b, .timeline__pip em {
  position: absolute; left: -7px; white-space: nowrap;
  font-family: var(--mono); font-style: normal;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
}
.timeline__pip b { bottom: 20px; color: var(--muted); }
.timeline__pip em { top: 20px; color: var(--forest); font-weight: 600; letter-spacing: .05em; }
.timeline__pip--a { left: 6%; }
.timeline__pip--b { left: 100%; }
.timeline__pip--b i { border-color: var(--forest); background: var(--forest); }
.timeline__pip--b b, .timeline__pip--b em { left: auto; right: -7px; text-align: right; }
.timeline figcaption {
  font-family: var(--mono);
  font-size: 10.5px; line-height: 1.55; letter-spacing: .085em; text-transform: uppercase;
  color: var(--muted);
}
.timeline figcaption b { color: var(--leaf-deep); font-weight: 600; }
.timeline.is-tight figcaption b { color: #b3541e; }
.timeline.is-tight .timeline__fill { background: linear-gradient(to right, #b3541e, #d4791f); }
.timeline.is-tight .timeline__pip i { border-color: #b3541e; }
.timeline.is-tight .timeline__pip--b i { background: #b3541e; }

/* ---------- 11. Live record ---------- */
.record--live { transform: none; }
.record--live::before { inset: 12px -12px -12px 12px; }
.record--live .record__fields { padding: 10px 20px 4px; }
.record--live .field dd { transition: color .25s ease; }
.record--live .field dd.is-empty { color: #a9bab1; font-weight: 400; }
.record--live .field dd.is-new { animation: fill-flash .9s ease; }
@keyframes fill-flash {
  0%   { background: rgba(90, 201, 63, .5); }
  100% { background: transparent; }
}
.status--draft { color: #d9c98a; }
.status--draft i { background: #d9c98a; animation: none; }
.status--ready { color: var(--leaf-bright); }
.status--ready i { background: var(--leaf-bright); }

/* ---------- 12. Confirmation ---------- */
.done { padding-block: 84px 110px; border-top: 1px solid var(--rule); }
.done__inner h2 { font-size: clamp(34px, 4.6vw, 60px); }
.done__lede { max-width: 34em; margin-top: 20px; font-size: 17.5px; color: var(--muted); }
.done__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0 34px; margin-top: 44px;
  border-top: 1px solid var(--rule);
}
.done__grid .field--stack { grid-template-columns: 1fr; gap: 7px; }
.done__grid dd {
  font-family: var(--mono) !important; font-size: 15px !important;
  font-weight: 500 !important; color: var(--forest) !important;
  letter-spacing: .03em;
}
.chain--done { margin-top: 62px; }
.chain--done::before { transform: scaleX(1); }
.done__actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px 30px;
  margin-top: 56px;
}

/* ---------- 13. Mobile action dock ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
  display: none; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: rgba(250, 249, 244, .96);
  border-top: 1px solid var(--rule-strong);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  box-shadow: 0 -12px 30px -22px rgba(2, 69, 47, .9);
}
.dock__meter { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dock__meter b {
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  color: var(--leaf-deep);
}
.dock__meter span {
  font-size: 13.5px; font-weight: 500; color: var(--forest);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dock__btn { flex: none; padding: 14px 20px; }

/* ---------- 14. Slim footer ---------- */
.colophon--slim { padding-top: 0; }
.colophon--slim .colophon__bottom { border-top: 0; }

/* ---------- 15. Responsive ---------- */
@media (max-width: 1100px) {
  .enroll { grid-template-columns: minmax(0, 1fr) 312px; gap: 48px; }
}

@media (max-width: 940px) {
  .enroll { grid-template-columns: 1fr; gap: 48px; padding-bottom: 72px; }
  .enroll__aside { position: static; }
  .record--live { max-width: 520px; }
  .scan__stage { grid-template-columns: 1fr; }
  .reader { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .map__plate { padding: 8px 6px; }
  .map__tag { font-size: 30px; }
  .co__txt { font-size: 26px; }
}

@media (max-width: 760px) {
  .page-signup { --dock-h: 82px; }
  .dock { display: flex; }

  .masthead__tag { display: none; }
  .masthead__back { font-size: 10px; }

  .rail__inner { min-height: 46px; gap: 12px; }
  .rail__step span { display: none; }
  .rail__step.is-active span { display: inline; }
  .rail__step { padding-right: 14px; margin-right: 14px; }
  /* The em-rule after the step number dangles once the label wraps below it */
  .part b::after { display: none; }
  .part { gap: 4px 10px; margin-bottom: 18px; }

  .enroll-head { padding-block: 40px 30px; }
  .demo-note { margin-top: 24px; font-size: 12.5px; }

  .step { padding-block: 36px; }
  .step__body { margin-top: 26px; }
  .js .step.is-locked::after { top: 34px; }
  /* The dock carries the action on a phone; the inline button is redundant */
  .step__foot .btn { display: none; }
  .step__foot { margin-top: 30px; padding-top: 20px; }

  .pair, .trio { grid-template-columns: 1fr; gap: 18px; }
  .trio--addr { grid-template-columns: 1fr 108px; gap: 14px 12px; }
  .trio--addr .field-row:first-child { grid-column: 1 / -1; }
  .ship { padding-left: 14px; }
  .sub { margin: 26px 0 16px; }
  .pair .field-row + .field-row,
  .trio--addr .field-row + .field-row { margin-top: 0; }

  .scan__pitch { padding: 26px 22px 24px; }
  .scan__drophint { display: none; }
  .scan__actions { gap: 14px 20px; }
  .scan__trigger { width: 100%; justify-content: center; }
  .reader { min-height: 260px; }
  .reader__doc img { min-height: 260px; }
  .reader__side { padding: 20px 22px 22px; }

  .picker__chips { grid-template-columns: 1fr; }
  .waitlist__row { flex-direction: column; }
  .waitlist__row .btn { justify-content: center; }

  .timeline__bar { margin: 38px 0 58px; }
  .timeline__pip b, .timeline__pip em { font-size: 9px; }

  .done { padding-block: 60px 80px; }
  .done__grid { grid-template-columns: 1fr 1fr; gap: 0 24px; }
}

@media (max-width: 560px) {
  .map__callouts { display: none; }
  .map__tag { font-size: 52px; }
}

@media (max-width: 420px) {
  .rail__meter { display: none; }
  .done__grid { grid-template-columns: 1fr; }
  .trio--addr { grid-template-columns: 1fr 96px; }
  .trio--contact { gap: 16px; }
  .tabs__bar { display: flex; width: 100%; }
  .tabs__tab { flex: 1; padding: 11px 8px; font-size: 9.5px; }
}

/* ---------- 16. Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  .map__halo { animation: none; opacity: .5; }
  .reader.is-scanning .reader__sweep { animation: none; opacity: .45; }
  .reader__log li { opacity: 1; transform: none; animation: none; }
  .record--live .field dd.is-new { animation: none; }
  .js .step .step__body { transition: none; }
}

@media print {
  .rail, .dock, .scan, .map, .masthead--flow { display: none !important; }
  .js .step.is-locked .step__body { max-height: none; opacity: 1; }
  .enroll { grid-template-columns: 1fr; }
}