@charset "UTF-8";
/**
 * Wire 3 Order Form Styling — /order2 (wire3-shared brand-v5 redesign)
 *  - forked from order-form-new/order-form.scss; reshaped to the source design in
 *    ~/Documents/order-form (buy.css + vendor/wire3-shared, brandV5, DM Sans)
 *  - loads AFTER: /shared/css/layouts/outward.css (reset+tokens), /shared/availability.css
 *    (dark hero gate), bootstrap-grid, bs-stepper, nice-forms-reset, swiffy-slider,
 *    /css/order-form2/theme.css (the legacy bs/wire3 custom-property bridge)
 *  - step 2 lives in _step2.scss, steps 3/4/5 in _steps345.scss
 *
 * build: npx sass src/public/css/order-form2/order-form.scss src/public/css/order-form2/order-form.css
 */
/* ── layout ──────────────────────────────────────────────────────── */
/* overflow-x is load-bearing: the plan carousel + selection lift would otherwise
   widen the page; the iframe height sync measures #frame */
main {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;
}

#frame {
  padding-top: 16px;
  padding-bottom: 48px;
}

/* the site chrome is hidden inside embeds — the host page owns it */
.in-iframe .site-header,
.in-iframe .foot {
  display: none;
}

.in-iframe #frame {
  padding-top: 4px;
}

/* ── v3 progress band (on bs-stepper's DOM contract) ─────────────── */
/* hidden while the address gate is the active step */
#stepper.gate-active .v3-progress {
  display: none;
}

/* full-bleed navy strip flush under the header, like the source checkout chrome */
.v3-progress {
  width: 100vw;
  margin: 0 0 26px calc(50% - 50vw);
  background: radial-gradient(125% 150% at 50% 0%, var(--navy) 0%, var(--navy-mid) 100%);
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  padding: 0 20px;
  box-shadow: none;
}

/* pull the band up against the header (the #frame top padding stays for the panels) */
#frame > #stepper > .v3-progress {
  margin-top: -16px;
}

.in-iframe #frame > #stepper > .v3-progress {
  margin-top: -4px;
}

.v3-steps {
  /* neutralize bs-stepper's default header look; keep its .step/.step-trigger DOM */
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
  max-width: 560px;
  margin: 0 auto;
  padding: 15px 0;
  overflow-x: visible;
  /* the gate's node exists for bs-stepper index parity only */
}
.v3-steps .step.gate-step {
  display: none;
}
.v3-steps .step {
  flex: 1;
  text-align: center;
  position: relative;
  margin: 0;
  /* rail = per-step connectors, dot-center to dot-center — can't overhang the
     outer dots or drift from the dot line at any container width. top:10px is
     step-relative (container padding 15px + 10px = the 21px dot's center). */
}
.v3-steps .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 100%;
  height: 3px;
  background: var(--navy-line);
  z-index: 0;
  border-radius: 2px;
}
.v3-steps .step.done:not(:last-child)::after {
  background: var(--blue);
}
.v3-steps .step .step-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-body);
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
.v3-steps .step .step-trigger:hover, .v3-steps .step .step-trigger:focus, .v3-steps .step .step-trigger:active {
  background: none;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.v3-steps .step.disabled .step-trigger {
  cursor: not-allowed;
}
.v3-steps .step .dot {
  position: relative;
  z-index: 1;
  width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto 6px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  transition: all 0.2s;
}
.v3-steps .step .dot svg {
  width: 11px;
  height: 11px;
  display: none;
}
.v3-steps .step {
  /* states: active = blue fill + glow ring; done = blue fill + check */
}
.v3-steps .step.active .dot {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
}
.v3-steps .step.active .step-trigger {
  color: #fff;
  font-weight: 700;
}
.v3-steps .step.done .dot {
  background: var(--blue);
  border-color: var(--blue);
}
.v3-steps .step.done .dot svg {
  display: block;
}
.v3-steps .step.done .step-trigger {
  color: rgba(255, 255, 255, 0.85);
}
.v3-steps .step {
  /* finish node: gradient burst star, no circle */
}
.v3-steps .step.finish .dot {
  width: 23px;
  height: 23px;
  margin-top: -1px;
  background: none;
  border: none;
  box-shadow: none;
  opacity: 0.55;
}
.v3-steps .step.finish .dot svg {
  display: block;
  width: 19px;
  height: 19px;
}
.v3-steps .step.finish.active .dot, .v3-steps .step.finish.done .dot {
  opacity: 1;
}
.v3-steps .step.finish.active .dot {
  filter: drop-shadow(0 3px 7px rgba(46, 144, 224, 0.5));
}
.v3-steps .step.finish:last-child::after {
  display: none;
}
@media (max-width: 560px) {
  .v3-steps .step .step-trigger {
    font-size: 0.66em;
  }
}

/* ── step panels ─────────────────────────────────────────────────── */
/* each step partial wraps itself in .card — restyled as the source's quiet white panel */
.bs-stepper-content > .content > .card {
  background: var(--white);
  border: 1px solid var(--grey-lt);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);
  padding-top: 12px;
  padding-bottom: 24px;
}

/* the gate (step 1) is the dark hero, not a panel — it carries no .card wrapper */
#customer-info {
  padding: 0;
}

.card {
  border-radius: var(--radius);
  background: var(--white);
}
.card > fieldset {
  border: none;
}
.card .card {
  background: var(--white);
  border: 1px solid var(--grey-lt);
  border-radius: var(--radius-sm);
}

/* step headings — the source .v3-head treatment */
.step-title {
  text-align: center;
  margin: 6px auto 8px;
  animation: rise 0.5s var(--ease) both;
}
.step-title h2 {
  font-size: 2.2em;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
}
@media (max-width: 560px) {
  .step-title h2 {
    font-size: 1.72em;
  }
}

.step-title > hr {
  display: none;
}

/* ── gate hero (step 1) seams ────────────────────────────────────── */
/* availability.css owns .hero/.lf-field/.lf-consent/.form-nudge/.ac-*; these rules
   adapt it to the wizard context (full-bleed landing, per-field validation smalls) */
/* the landing is dark edge-to-edge while the gate is the active step (source
   body.landing-dark seam): navy body behind the full-bleed hero + value band */
body:has(#stepper.gate-active) {
  background: var(--navy-900);
}
body:has(#stepper.gate-active) #frame {
  padding-top: 0;
  padding-bottom: 0;
}

/* full-bleed breakout from the bootstrap container (main{overflow-x:hidden} clips
   the scrollbar-width overhang) */
.gate-hero,
#customer-info .value-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-radius: 0;
}

.gate-hero {
  overflow: hidden;
  animation: rise 0.5s var(--ease) both;
  /* hero-inner padding is owned by /shared/availability.css (incl. its tighter
     mobile rhythm — 30/14/40 ≤560px); no local override */
}

#customer-info .value-band {
  margin-top: 0;
  /* a close, not a canyon — 220px was most of a phone screen of dead navy */
  padding-bottom: 80px;
}

@media (max-width: 560px) {
  #customer-info .value-band {
    padding-bottom: 48px;
  }
}
.gate-form {
  gap: 22px;
  /* validation smalls float under each pill (TS toggles .is-invalid on inputs;
     the address <small> doubles as the locked-in note target) */
}
.gate-form .lf-group {
  position: relative;
  min-width: 0;
}
.gate-form .lf-field {
  position: relative;
  width: 100%;
  /* re-assert availability.css's pill-input reset: nice-forms-reset loads AFTER
     /shared/availability.css in the head and re-boxes bare inputs (white bg +
     border + its own background icons). color/caret need !important because
     nice-forms' `input[type=text]:required:not(:placeholder-shown):valid`
     (specificity 0,4,1) sets color to an UNDEFINED --nf-* var outside
     .nice-form-group — guaranteed-invalid → inherits the hero's WHITE. */
}
.gate-form .lf-field input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--navy) !important;
  caret-color: var(--navy) !important;
  font: 16px var(--font-body);
  padding: 13px 0;
  outline: none;
}
.gate-form .lf-field small {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 18px;
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.2;
  color: #ff9a9a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}
.gate-form .lf-field input.is-invalid + small {
  display: block;
}
.gate-form .lf-field input[readonly] + small {
  display: block;
  color: rgba(255, 255, 255, 0.65);
}
.gate-form .lf-field:has(input.is-invalid) {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25), 0 5px 14px rgba(0, 0, 0, 0.34);
}
.gate-form .lf-field:has(input.is-valid) > svg {
  color: var(--green-dk);
}
.gate-form .lf-field:has(input[readonly]) {
  opacity: 0.88;
}
.gate-form .lf-field:has(input[readonly]) input {
  color: var(--grey-mid);
  cursor: not-allowed;
}
.gate-form {
  /* extra air for the floating smalls under the two-column rows */
}
.gate-form .lf-two {
  row-gap: 22px;
}
.gate-form {
  /* re-assert availability.css's custom consent checkbox — nice-forms-reset's global
     checkbox rules (undefined --nf-* vars on the gate → UA/dark-blue widget) lose here */
}
.gate-form .lf-consent input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.gate-form .lf-consent input::before {
  content: "";
  width: 13px;
  height: 13px;
  background: var(--navy);
  clip-path: polygon(14% 44%, 0 62%, 42% 100%, 100% 18%, 84% 4%, 40% 68%);
  transform: scale(0);
  transition: transform 0.12s ease-in;
}
.gate-form .lf-consent input:checked {
  background: var(--green) !important;
  border-color: var(--green) !important;
}
.gate-form .lf-consent input:checked::before {
  transform: scale(1);
}

/* the reCAPTCHA badge is hidden (the gate shows the required attribution text instead) */
.gate-captcha .grecaptcha-badge {
  display: none !important;
}

.gate-legal {
  margin-top: 10px;
  text-align: center;
  font-size: 0.72em;
  color: rgba(255, 255, 255, 0.45);
}
.gate-legal a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
}

/* resume pill rides on the dark hero */
.gate-resume {
  margin-bottom: 4px;
}
.gate-resume p {
  margin: 0;
}

.gate-captcha {
  display: flex;
  justify-content: center;
}
.gate-captcha #g-recaptcha-error {
  color: #ff9a9a;
  font-weight: 600;
  justify-content: center;
}
.gate-captcha {
  /* the invisible-badge iframe: keep it unobtrusive on dark */
}
.gate-captcha .grecaptcha-badge {
  box-shadow: none !important;
}

/* loading spinner inside the green gate CTA reads navy */
.btn-green .spinner {
  border-color: var(--navy);
  border-bottom-color: transparent;
}

/* ── components ──────────────────────────────────────────────────── */
.alert {
  --bg: var(--off-white);
  --border: 1.5px solid var(--grey-lt);
  --color: var(--navy);
  background: var(--bg);
  border: var(--border);
  color: var(--color);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: start;
  border-radius: 12px;
  padding: 1rem 1.5rem;
}
.alert.alert-success {
  --bg: var(--green-tint-200);
  --border: 1.5px solid rgba(var(--green-rgb), .5);
  --color: #3F6B00;
}
.alert {
  /* the source .plan-warn callout trio */
}
.alert.alert-danger {
  --bg: #FCE9E7;
  --border: 1.5px solid #E25B4E;
  --color: #B3261E;
  box-shadow: 0 6px 18px rgba(226, 91, 78, 0.14);
}
.alert.alert-danger hr {
  border-color: #E25B4E;
}
.alert.alert-action {
  --bg: var(--green);
  --border: none;
  --color: var(--navy);
  flex-direction: row;
  align-items: center;
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-weight: 600;
}
.alert > .alert-title {
  font-size: 1.5rem;
  font-weight: 800;
  font-family: var(--font-head);
}
.alert > hr {
  width: 100%;
}
.alert > button.dismiss {
  min-width: 24px;
  margin-left: auto;
  padding: 0;
  color: var(--color);
  opacity: 0.75;
  cursor: pointer;
}
.alert > button.dismiss .fa {
  margin: 0;
  padding: 0;
  --color: currentColor;
}
.alert > button.dismiss:hover {
  background: unset !important;
  border: unset !important;
  color: unset !important;
  opacity: 1;
}

/* invalid-field shake (source idiom; availability.css declares the keyframes) */
.nice-form-group input.shake, .alert.shake {
  animation: shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* modal — keeps bootstrap-compatible classnames (server flavor HTML targets them),
   restyled to the source .w3-modal shell */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1050;
  background: rgba(8, 18, 36, 0.52);
  backdrop-filter: blur(5px);
}
.modal.fade:not(.show) {
  opacity: 0;
}
.modal > .modal-dialog {
  width: auto;
  max-width: 780px;
  margin: 2.5rem auto;
  padding: 0 16px;
  transition: transform 0.3s var(--ease);
  transform: translateY(14px) scale(0.98);
}
.modal.show > .modal-dialog {
  transform: none;
}
.modal .modal-content {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background-color: var(--white);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.modal .modal-content > .modal-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--grey-lt);
  padding: 0.5rem 1rem;
}
.modal .modal-content > .modal-header .modal-title {
  font-size: 1.5rem;
  font-weight: 800;
  font-family: var(--font-head);
  color: var(--navy);
}
.modal .modal-content > .modal-body {
  padding: 0.75rem 1rem;
  color: var(--grey-dk);
  font-size: 0.95em;
  line-height: 1.6;
}
.modal .modal-content > .modal-body ul {
  margin-bottom: 1rem;
}
.modal .modal-content > .modal-body {
  /* mobile: air between stacked link/list rows (source policy-modal fix) */
}
@media (max-width: 560px) {
  .modal .modal-content > .modal-body {
    line-height: 1.7;
  }
  .modal .modal-content > .modal-body li {
    margin-bottom: 0.9em;
  }
}
.modal .btn-close {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--off-white);
  border: none;
  color: var(--grey-dk);
  justify-content: center;
}
.modal .btn-close::after {
  content: "×";
  font-size: 20px;
  line-height: 1;
}
.modal .btn-close:hover {
  background: var(--grey-lt);
  color: var(--navy);
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(8, 18, 36, 0.9);
  z-index: 1040;
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop.show {
  opacity: 0.5;
}

/* ── form styling + nice-form overrides (steps 3/4) ──────────────── */
/* consult https://nielsvoogt.github.io/nice-forms.css/#customization */
.nice-form-group {
  /* the source wizard .field idiom */
  --nf-input-size: 1rem;
  --nf-input-font-size: 1rem;
  --nf-input-placeholder-color: var(--grey-mid);
  --nf-input-color: var(--navy);
  --nf-input-background-color: var(--white);
  --nf-input-border-radius: 8px;
  --nf-input-border-color: #d1d5db;
  --nf-input-border-width: 1.5px;
  --nf-input-border-bottom-width: 1.5px;
  --nf-input-focus-border-color: var(--navy-mid);
  --nf-valid-input-border-color: var(--green-dk);
  --nf-valid-input-border-bottom-color: var(--green-dk);
  --nf-invalid-input-border-color: var(--red);
  --nf-invalid-input-border-bottom-color: var(--red);
}
.nice-form-group select {
  padding: 0.5rem 0.8rem;
}
.nice-form-group {
  /* styling */
  margin-top: 0.5rem;
}
.nice-form-group input:focus, .nice-form-group select:focus {
  box-shadow: 0 0 0 3px rgba(var(--navy-rgb), 0.08);
}
.nice-form-group {
  /* sizing */
}
.nice-form-group input.sm {
  height: calc(var(--nf-input-size) * 2.15);
}
.nice-form-group {
  /* labels — source micro-label idiom */
}
.nice-form-group > label, .nice-form-group .form-label {
  margin-left: 2px;
  margin-bottom: 7px;
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--grey-dk);
}
.nice-form-group > label > em, .nice-form-group .form-label > em {
  font-style: normal;
  color: var(--red);
}
.nice-form-group {
  /* errors */
}
.nice-form-group > small {
  display: none;
  font-size: 0.8em;
  margin-left: 4px;
  color: var(--red);
}
.nice-form-group > input.is-invalid + small {
  display: inline-block;
}
.nice-form-group {
  /* custom validity */
}
.nice-form-group input:required:invalid:not(:placeholder-shown) {
  border-color: var(--nf-invalid-input-border-bottom-color);
}
.nice-form-group input.is-invalid {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.nice-form-group input.is-valid {
  border-color: var(--green-dk) !important;
}
.nice-form-group {
  /* i don't want the icons! */
  --icon-padding: calc(var(--nf-input-size) * 0.75);
}
.nice-form-group input[type=email], .nice-form-group input[type=tel], .nice-form-group input[type=url], .nice-form-group input[type=password] {
  background-image: none !important;
}
.nice-form-group {
  /* keep >=16px font on xs to avoid iOS zoom */
}
@media (max-width: 575.98px) {
  .nice-form-group {
    --nf-input-size: 1rem;
  }
}

/* buttons — hub's bare-button API reskinned to the source .btn semantics:
   default = green CTA (navy ink), .btn-blue = navy primary, .outline = ghost */
button {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 1.05em;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), transform 0.1s var(--ease), box-shadow 0.15s var(--ease);
  --padding: 13px 24px;
  --border: none;
  --bg: var(--green);
  --color: var(--navy);
  padding: var(--padding);
  border: var(--border);
  background-color: var(--bg);
  color: var(--color);
  /* disabled state */
}
button:disabled {
  background-color: var(--grey-lt);
  color: var(--grey-mid);
  cursor: not-allowed;
  transform: none;
}
button {
  /* regular button hover/active */
}
button:not(:disabled):hover, button:not(:disabled):active, button:not(:disabled):focus {
  --bg: var(--green-dk);
  --color: #fff;
}
button:not(:disabled):hover {
  transform: translateY(-1px);
}
button {
  /* navy button */
}
button.btn-blue {
  --bg: var(--navy);
  --border: none;
  --color: #fff;
}
button.btn-blue:not(:disabled):hover, button.btn-blue:not(:disabled):active, button.btn-blue:not(:disabled):focus {
  --bg: var(--navy-mid);
  --color: #fff;
}
button {
  /* outline buttons → source ghost */
}
button.outline {
  --padding: 11.5px 22px; /* border compensation */
  --bg: transparent;
  --border: 1.5px solid var(--grey-lt);
  --color: var(--grey-dk);
}
button.outline > .fa {
  --color: currentColor;
}
button.outline:not(:disabled):hover, button.outline:not(:disabled):active, button.outline:not(:disabled):focus {
  background-color: var(--off-white);
  color: var(--navy);
}
button.outline:not(:disabled):hover > .fa, button.outline:not(:disabled):active > .fa, button.outline:not(:disabled):focus > .fa {
  --color: currentColor;
}
button.outline.btn-blue {
  --border: 1.5px solid var(--navy-lite);
  --color: var(--navy);
}
button.outline.btn-blue:not(:disabled):hover, button.outline.btn-blue:not(:disabled):active, button.outline.btn-blue:not(:disabled):focus {
  background-color: var(--navy);
  color: #fff;
}
button {
  /* link buttons — source .rev-edit idiom */
}
button.link {
  --padding: 4px 8px;
  --bg: transparent;
  --color: var(--blue);
  font-size: 0.95em;
  text-decoration: none;
  border-radius: 6px;
}
button.link:not(:disabled):hover, button.link:not(:disabled):focus {
  --bg: transparent;
  --color: var(--blue);
  text-decoration: underline;
  transform: none;
}
button.link:not(:disabled):active {
  --bg: rgba(46, 144, 224, .1);
  --color: var(--blue);
}
button {
  /* sizing */
}
button.sm {
  --padding: 4px 20px;
  font-size: 0.92em;
}
button {
  /* icons — arrow slides right on hover (source CTA idiom) */
}
button > .fa {
  --color: currentColor;
  margin-top: -1px;
  transition: transform 0.15s var(--ease);
}
button.animated:not(:disabled):hover > .fa, button.animated:not(:disabled):active > .fa {
  transform: translateX(3px);
}

hr {
  border: none;
  border-top: 1px solid var(--grey-lt);
}

/* checkboxes inside nice-form groups (steps 3/4; the gate consent is .lf-consent-styled) */
.nice-form-group input[type=checkbox] {
  width: 1.5rem !important;
  height: 1.5rem !important;
  padding: 0;
  border-radius: 7px;
  cursor: pointer;
  /* validity */
  background-color: var(--white);
}
.nice-form-group input[type=checkbox].is-invalid {
  --nf-invalid-input-background-color: #FDECEC;
}
.nice-form-group input[type=checkbox].is-invalid:checked {
  background-color: var(--green-dk) !important;
}
.nice-form-group input[type=checkbox].is-valid {
  --nf-valid-input-background-color: var(--green-dk);
}
.nice-form-group input[type=checkbox].untouched {
  border-color: var(--nf-input-border-color) !important;
}
.nice-form-group input[type=checkbox].untouched:hover {
  border-color: var(--nf-input-focus-border-color) !important;
}
.nice-form-group input[type=checkbox].untouched:valid {
  background-color: var(--green-dk) !important;
}
.nice-form-group input[type=checkbox].untouched {
  /* optional opt-in is always :valid, so keep it neutral while unchecked */
}
.nice-form-group input[type=checkbox].untouched:not(:checked) {
  background-color: var(--white) !important;
}
.nice-form-group input[type=checkbox] {
  /* label */
}
.nice-form-group input[type=checkbox] + label {
  line-height: 1.3;
  vertical-align: middle;
  transition: 200ms all var(--ease);
  /* consent copy is body text, not a micro-label */
  font-size: 1em;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--navy);
}
.nice-form-group input[type=checkbox].is-invalid + label {
  color: #B3261E !important;
}

input[readonly]:not(.lf-field input) {
  background-color: #f7f8fa !important;
  color: var(--grey-mid);
  cursor: not-allowed !important;
}
input[readonly]:not(.lf-field input) + small {
  display: inline-block;
  color: var(--grey-dk);
}

/* consent-checkbox helper text stays fully opaque wherever it renders */
label[for=service-opt-in] > small, label[for=marketing-opt-in] small {
  opacity: 1;
}

/* autocomplete dropdown (autocompleter lib) — source .ac-list idiom */
.autocomplete-suggestions {
  background: var(--white);
  border: none;
  border-radius: 16px;
  max-height: 284px;
  margin-top: 6px;
  padding: 6px;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  z-index: 1100;
}
.autocomplete-suggestions div[role=option] {
  margin: 0;
  padding: 0.55rem 0.9rem;
  border-radius: 11px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: background 60ms ease-out;
}
.autocomplete-suggestions div[role=option] strong {
  color: var(--navy-mid);
}
.autocomplete-suggestions div[role=option]:hover, .autocomplete-suggestions div[role=option]:focus, .autocomplete-suggestions div[role=option]:active {
  background: var(--off-white);
}
.autocomplete-suggestions .empty {
  margin: 0;
  padding: 0.55rem 0.9rem;
  font-size: 0.95rem;
  color: var(--grey-mid);
}

/* ── step partials ───────────────────────────────────────────────── */
/* ── Plan + Extras screens (/order2) ────────────────────────────────────────
 * The old combined Service Options step is split into two wizard screens
 * (source design §4.2/§4.3):
 *   #service-options → the sp-card plan carousel + #plan-summary continue bar
 *   #service-extras  → svc-trio Total Connect + xrow add-ons + svc-mybundle
 *                      promos + the sp-summary submit bar
 * Treatments ported from wire3-shared components/speed-carousel.css and the
 * order-form repo's buy.css (brand-v5 effective values). speed-carousel.css is
 * NOT loaded on /order2 — everything needed is copied here.
 * Keyframes carry an of2- prefix so they can't collide with the shared
 * reset/availability sheets (rise/radar); the shake keyframes DO come from the
 * shared /shared/availability.css.
 */
@keyframes of2-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes of2-radar {
  0% {
    transform: scale(0.28);
    opacity: 0.85;
  }
  75% {
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
/* ── plan-head heading — server flavor HTML on the Plan screen (#offers-header),
     static twin on the Extras screen (.extras-head) ── */
#service-options #offers-header,
#service-extras .extras-head {
  text-align: center;
  padding: 8px 0 2px;
  animation: of2-rise 0.5s var(--ease) both;
}
#service-options #offers-header h1, #service-options #offers-header h2,
#service-extras .extras-head h1,
#service-extras .extras-head h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.2em;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 8px;
}
#service-options #offers-header p,
#service-extras .extras-head p {
  font-size: 1.05em;
  color: var(--grey-dk);
  margin: 0 auto;
  max-width: 58ch;
}
@media (max-width: 560px) {
  #service-options #offers-header h1, #service-options #offers-header h2,
  #service-extras .extras-head h1,
  #service-extras .extras-head h2 {
    font-size: 1.72em;
  }
  #service-options #offers-header p,
  #service-extras .extras-head p {
    font-size: 0.98em;
  }
}
#service-options #offers-header:empty,
#service-extras .extras-head:empty {
  display: none;
  padding: 0;
}

/* ── shared by both screens: the navy sp-summary continue/submit bar and the
     red pick-a-plan callout ── */
#service-options, #service-extras {
  /* source .sp-summary navy bar (Plan: #plan-summary continue; Extras: submit) */
}
#service-options .sp-summary, #service-extras .sp-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 660px;
  margin: 28px auto 8px;
  padding: 18px 14px 18px 24px;
  background: var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  animation: of2-rise 0.4s var(--ease) backwards;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
#service-options .sp-summary:hover, #service-extras .sp-summary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 46px rgba(var(--navy-rgb), 0.3);
}
#service-options .sp-summary .sp-sum-main, #service-extras .sp-summary .sp-sum-main {
  min-width: 0;
}
#service-options .sp-summary .sp-sum-main b, #service-extras .sp-summary .sp-sum-main b {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.2em;
  color: #fff;
  line-height: 1.25;
}
#service-options .sp-summary .sp-sum-main span, #service-extras .sp-summary .sp-sum-main span {
  display: block;
  color: #97A9C6; /* accessible muted-on-navy (source hardcode) */
  font-size: 0.84em;
}
#service-options .sp-summary button, #service-extras .sp-summary button {
  flex: none;
}
#service-options .sp-summary, #service-extras .sp-summary {
  /* bar hover pre-darkens the CTA + slides its arrow (source idiom); the main
     sheet's bare-button API reads --bg/--color, while the shared .btn-green
     class sets background/color directly — cover both */
}
#service-options .sp-summary:hover button:not(:disabled), #service-extras .sp-summary:hover button:not(:disabled) {
  --bg: var(--green-dk);
  --color: #fff;
  background-color: var(--green-dk);
  color: #fff;
}
#service-options .sp-summary:hover button:not(:disabled) > .fa, #service-extras .sp-summary:hover button:not(:disabled) > .fa {
  transform: translateX(3px);
}
@media (max-width: 480px) {
  #service-options .sp-summary, #service-extras .sp-summary {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }
  #service-options .sp-summary .sp-sum-main, #service-extras .sp-summary .sp-sum-main {
    text-align: center;
  }
  #service-options .sp-summary button, #service-extras .sp-summary button {
    width: 100%;
    justify-content: center;
  }
}
#service-options, #service-extras {
  /* source .plan-warn callout — shown + shaken on a blocked Continue */
}
#service-options .plan-warn, #service-extras .plan-warn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 660px;
  margin: 18px auto 0;
  padding: 13px 20px;
  border-radius: 12px;
  background: #FCE9E7;
  border: 1.5px solid #E25B4E;
  color: #B3261E;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.98em;
  box-shadow: 0 6px 18px rgba(226, 91, 78, 0.14);
}
#service-options .plan-warn svg, #service-extras .plan-warn svg {
  width: 20px;
  height: 20px;
  flex: none;
}
#service-options .plan-warn, #service-extras .plan-warn {
  /* keyframes from the shared availability.css */
}
#service-options .plan-warn.shake, #service-extras .plan-warn.shake {
  animation: shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ════ PLAN SCREEN ═══════════════════════════════════════════════════════ */
#service-options {
  /* ── loader — the source .av-radar (rings pulse out from the pin) ── */
}
#service-options #offers-loader .av-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 36px 0 24px;
  animation: of2-rise 0.35s var(--ease) both;
}
#service-options .av-radar {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#service-options .av-radar i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(var(--green-rgb), 0.7);
  opacity: 0;
  animation: of2-radar 1.9s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
#service-options .av-radar i:nth-child(2) {
  animation-delay: 0.63s;
}
#service-options .av-radar i:nth-child(3) {
  animation-delay: 1.26s;
}
#service-options .av-radar svg {
  position: relative;
  z-index: 2;
  width: 32px;
  height: 32px;
  color: var(--green-dk);
  filter: drop-shadow(0 2px 7px rgba(var(--navy-rgb), 0.25));
}
#service-options .av-loading-text {
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.06em;
  letter-spacing: 0.01em;
}
#service-options {
  /* ── plan carousel chrome (swiffy-slider retuned for ~286px sp-cards) ── */
}
#service-options #offers-container {
  animation: of2-rise 0.5s var(--ease) backwards;
}
#service-options #offers-container > .swiffy-slider {
  /* Item-count matrix — NEVER 4 full columns (source shows ~3.2 cards max with
     arrows while slides overflow; 4 crammed columns is the flagged failure mode).
     Arrows hide only when every slide actually fits (data-slides ≤ count). */
  --swiffy-slider-item-count: 1.12;
  --swiffy-slider-item-gap: 22px;
  --swiffy-slider-item-reveal: 0px;
}
@media (min-width: 576px) {
  #service-options #offers-container > .swiffy-slider {
    --swiffy-slider-item-count: 1.6;
  }
}
@media (min-width: 768px) {
  #service-options #offers-container > .swiffy-slider {
    --swiffy-slider-item-count: 2.15;
  }
  #service-options #offers-container > .swiffy-slider[data-slides="1"] > .slider-nav, #service-options #offers-container > .swiffy-slider[data-slides="2"] > .slider-nav {
    display: none;
  }
}
@media (min-width: 992px) {
  #service-options #offers-container > .swiffy-slider {
    --swiffy-slider-item-count: 2.6;
  }
}
@media (min-width: 1200px) {
  #service-options #offers-container > .swiffy-slider {
    --swiffy-slider-item-count: 3.15;
  }
  #service-options #offers-container > .swiffy-slider[data-slides="3"] > .slider-nav {
    display: none;
  }
}
@media (min-width: 1400px) {
  #service-options #offers-container > .swiffy-slider {
    /* caps at 3.2 — with 4+ plans the last card peeks and the arrows stay */
    --swiffy-slider-item-count: 3.2;
  }
}
#service-options #offers-container > .swiffy-slider[data-slides="1"] > .slider-nav {
  display: none;
}
#service-options #offers-container > .swiffy-slider {
  /* top padding clears the floating "Most popular" pill + ribbon overhang;
     bottom clears the hover-lift shadow */
}
#service-options #offers-container > .swiffy-slider .slider-container {
  padding: 40px 12px 30px;
  list-style: none;
  margin: 0;
}
@media (max-width: 560px) {
  #service-options #offers-container > .swiffy-slider .slider-container {
    padding: 30px 8px 24px;
  }
}
#service-options #offers-container > .swiffy-slider {
  /* arrows — the source .sp-arrow 46px white circles (swiffy draws the chevron
     via a masked ::after; we recolor it with currentColor) */
}
#service-options #offers-container > .swiffy-slider > .slider-nav {
  top: 50%;
  bottom: auto;
  left: 0;
  margin: 0;
  padding: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1.5px solid var(--grey-lt);
  color: var(--navy);
  box-shadow: var(--shadow);
  opacity: 1;
  filter: none;
  transform: translateY(-50%);
  z-index: 5;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#service-options #offers-container > .swiffy-slider > .slider-nav::before {
  content: none;
}
#service-options #offers-container > .swiffy-slider > .slider-nav::after {
  width: 19px;
  height: 19px;
  margin: 0;
  background-color: currentColor;
}
#service-options #offers-container > .swiffy-slider > .slider-nav:hover, #service-options #offers-container > .swiffy-slider > .slider-nav:focus {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: translateY(-50%);
}
#service-options #offers-container > .swiffy-slider > .slider-nav.slider-nav-next {
  left: auto;
  right: 0;
}
@media (max-width: 560px) {
  #service-options #offers-container > .swiffy-slider > .slider-nav {
    width: 40px;
    height: 40px;
  }
  #service-options #offers-container > .swiffy-slider > .slider-nav::after {
    width: 17px;
    height: 17px;
  }
}
#service-options #offers-slider > li {
  display: flex;
}
#service-options #offers-slider > li > label {
  display: flex;
  width: 100%;
  cursor: pointer;
}
#service-options {
  /* ── source mobile-audit ports (re-vendor 2026-07-27) ─────────────────────
     position dots for the 1-up carousel; one-line gold ribbon; tighter card
     chrome; essentials strip re-seated above the Continue bar */
}
#service-options .sp-dots {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 2px;
}
#service-options .sp-dots .sp-dot {
  width: 24px;
  height: 24px;
  border: 0;
  --padding: 0;
  --bg: transparent;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
#service-options .sp-dots .sp-dot i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--grey-lt);
  transition: background 0.15s, transform 0.15s;
}
#service-options .sp-dots .sp-dot:hover, #service-options .sp-dots .sp-dot:focus {
  background: none;
  transform: none;
}
#service-options .sp-dots .sp-dot:hover i {
  background: var(--grey-mid);
}
#service-options .sp-dots .sp-dot.on i {
  background: var(--navy);
  transform: scale(1.3);
}
#service-options .sp-dots .sp-dot.picked i {
  background: var(--green-dk);
}
@media (max-width: 575.98px) {
  #service-options {
    /* dots show only in 1-up mode (item-count 1.12) */
  }
  #service-options .sp-dots {
    display: flex;
  }
  #service-options {
    /* one-line ribbon at 320 (source 1-up rule): slimmer amt type + tighter side
       padding — the override authors the kick/amt split, so this maps exactly */
  }
  #service-options .sp-promo {
    padding-left: 18px;
    padding-right: 18px;
  }
  #service-options .sp-promo-amt {
    font-size: 0.78em;
    letter-spacing: 0.02em;
  }
  #service-options {
    /* tighter card chrome — the card + essentials land within the first screen */
  }
  #service-options .sp-card {
    padding: 20px 18px 22px;
  }
  #service-options .sp-row {
    margin: 8px 0 10px;
  }
  #service-options {
    /* essentials strip rides ABOVE the Continue bar — below it, it scrolled past
       unseen (flex `order` re-seats only the summary + warn; feats keep their
       DOM slot after the cards) */
  }
  #service-options #plan-summary {
    order: 1;
    margin-top: 14px;
  }
  #service-options #plan-warn {
    order: 2;
  }
  #service-options #plan-feats {
    margin: 16px auto 0;
  }
}
#service-options {
  /* ── sp-card — the source plan-card anatomy ── */
}
#service-options .sp-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--white);
  border: 2px solid var(--grey-lt);
  border-radius: var(--radius);
  padding: 26px 22px 28px;
  box-shadow: var(--shadow);
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.18s var(--ease), background 0.2s;
}
#service-options #offers-slider > li > label:hover input:not(:checked) ~ .sp-card {
  border-color: var(--navy-mid);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(var(--navy-rgb), 0.12);
}
#service-options {
  /* selection: blue border + green wash — the single selection signal (no scale) */
}
#service-options #offers-slider input:checked ~ .sp-card {
  border-color: var(--blue);
  background: linear-gradient(180deg, var(--green-tint-300) 0%, var(--green-tint-200) 46%, var(--white) 100%);
}
#service-options #offers-slider input:focus-visible ~ .sp-card {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
#service-options {
  /* gradient "Most popular" pill straddling the card's top edge (from flavor.corner;
     green→blue gradient, white caps — source .sp-pop-tag/.svc-badge family). The
     slider-container's 40px top padding keeps the overhang from clipping. */
}
#service-options .sp-pop-tag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 3;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.62em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--green) 0%, var(--blue) 100%);
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
#service-options .sp-pop-tag:empty {
  display: none;
}
#service-options {
  /* gradient name pill — background is the JS-computed blue→green ramp slice */
}
#service-options .sp-name {
  display: block;
  text-align: center;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.84em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  margin-bottom: 15px;
  box-shadow: 0 2px 9px rgba(var(--navy-rgb), 0.16);
}
#service-options .sp-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 10px 0 14px;
}
#service-options .sp-div {
  width: 1px;
  height: 34px;
  align-self: center;
  background: var(--grey-lt);
  border-radius: 1px;
}
#service-options .sp-speed {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
#service-options .sp-speed b {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.9em;
  line-height: 0.9;
  letter-spacing: -0.03em;
}
#service-options .sp-speed span {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05em;
  color: var(--grey-dk);
}
#service-options {
  /* price block sits right of the .sp-div hairline, right-aligned (source layout):
     optional .was strikethrough (regularPrice) stacked ABOVE the .now price */
}
#service-options .sp-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-head);
  line-height: 1;
}
#service-options .sp-price .was {
  display: block;
  text-align: right;
  color: var(--grey-mid);
  font-weight: 600;
  font-size: 0.95em;
  text-decoration: line-through;
  margin-bottom: 3px;
}
#service-options .sp-price .was:empty {
  display: none;
}
#service-options .sp-price .now {
  color: var(--navy);
  font-weight: 800;
  font-size: 1.6em;
  letter-spacing: -0.02em;
}
#service-options .sp-price .now small {
  color: var(--grey-mid);
  font-weight: 600;
  font-size: 0.55em;
  letter-spacing: 0;
}
#service-options .sp-blurb {
  color: var(--grey-dk);
  font-size: 0.92em;
  line-height: 1.45;
  min-height: 54px;
  margin: 0 0 6px;
}
#service-options {
  /* gold satin ribbon (from flavor.topText) — verbatim source gradient + fold-backs;
     overhangs the card ±10px */
}
#service-options .sp-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 6px -32px 12px;
  padding: 4px 30px 5px;
  color: var(--navy);
  text-align: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.86em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.23) 0%, rgba(255, 255, 255, 0) 42%, rgba(122, 86, 18, 0.05) 100%), linear-gradient(105deg, #E8C04B 0%, #F8E48B 24%, #FAE99B 30%, #EBC555 52%, #E4B942 64%, #F4D975 80%, #E5BB47 100%);
  box-shadow: 0 4px 11px rgba(var(--navy-rgb), 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(122, 86, 18, 0.16);
}
#service-options .sp-promo:empty {
  display: none;
}
#service-options .sp-promo * {
  margin: 0;
}
#service-options .sp-promo b {
  font-size: 1.2em;
}
#service-options .sp-promo h1, #service-options .sp-promo h2, #service-options .sp-promo h3, #service-options .sp-promo h4, #service-options .sp-promo h5 {
  font: inherit;
  font-weight: 800;
  color: inherit;
}
#service-options .sp-promo {
  /* fold-back tails — the darker underside peeks from behind each end */
}
#service-options .sp-promo::before, #service-options .sp-promo::after {
  content: "";
  position: absolute;
  bottom: -7px;
  z-index: -1;
  border: 5px solid #B99836;
}
#service-options .sp-promo::before {
  left: 0;
  border-left-color: transparent;
  border-bottom-color: transparent;
}
#service-options .sp-promo::after {
  right: 0;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
#service-options {
  /* authored kicker/amount markup, sized so computed sizes match the source
     (.58em / .86em of the card em; the ribbon base above is .86em) */
}
#service-options .sp-promo-kick {
  font-weight: 800;
  font-size: 0.674em;
  letter-spacing: 0.18em;
  opacity: 0.82;
}
#service-options .sp-promo-amt {
  font-weight: 800;
  font-size: 1em;
  letter-spacing: 0.03em;
  line-height: 1.04;
}
#service-options .sp-promo-amt b {
  font-size: 1.2em;
}
#service-options {
  /* showcase slot (from flavor.showcase) — sits DIRECTLY under the gold ribbon;
     on /order2 it carries the streaming chips only (no includes bullets — source
     cards have none). Unknown-SKU flavor passes through untouched, so keep the
     wrapper quiet enough that arbitrary server HTML degrades gracefully. */
}
#service-options .sp-showcase {
  font-size: 0.9em;
  color: var(--grey-dk);
  text-align: center;
}
#service-options .sp-showcase:empty {
  display: none;
}
#service-options {
  /* licensed streaming service chips (may arrive in topText or showcase HTML).
     A chip carries EITHER the brand's logo <img> (what FlavorOverrides authors
     since 2026-09-21) or the bare wordmark text — server flavor we don't know
     about still sends text, and a 404'd logo falls back to its `alt`, so the
     text rules below stay load-bearing. */
}
#service-options .sp-promo-svcs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 14px;
}
#service-options .sp-svc {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--grey-lt);
  border-radius: 6px;
  padding: 5px 7px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.72em;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(var(--navy-rgb), 0.06);
  text-transform: none;
}
#service-options .sp-svc.netflix {
  color: #E50914;
  letter-spacing: 0.02em;
}
#service-options .sp-svc.disney {
  color: #0063E5;
}
#service-options .sp-svc.hbomax {
  color: #0042C7;
}
#service-options .sp-svc.hulu {
  color: #13B866;
}
#service-options .sp-svc.youtubetv {
  color: #FF0000;
}
#service-options .sp-svc {
  /* logo chips. Each wordmark has its own cap height and ink weight, so the
     row is balanced OPTICALLY, per brand — a single height makes Netflix
     shout and Disney+ (a near-square lockup with its arc) disappear. px, not
     em: these must not track the card's font scale away from the 5-up row's
     fit. The intrinsic viewBox ratio supplies the width, so no CLS. */
}
#service-options .sp-svc img {
  display: block;
  width: auto;
  height: 11px;
}
#service-options .sp-svc.netflix img {
  height: 9px;
}
#service-options .sp-svc.hbomax img {
  height: 10px;
}
#service-options .sp-svc.hulu img {
  height: 10px;
}
#service-options .sp-svc.disney img {
  height: 17px;
}
#service-options {
  /* legacy plan art (graceful degradation; hidden when src is empty) */
}
#service-options img.plan-image {
  max-width: 100%;
  height: auto;
  margin: 0 auto 12px;
}
#service-options img.plan-image[src=""] {
  display: none;
}
#service-options {
  /* Select-plan affordance — flips to a filled green "✓ Selected" */
}
#service-options .sp-select {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.92em;
  letter-spacing: 0.01em;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--grey-lt);
  background: var(--white);
  color: var(--navy);
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
#service-options .sp-select .sp-select-on {
  display: none;
}
#service-options #offers-slider > li > label:hover .sp-select {
  border-color: var(--navy-mid);
}
#service-options #offers-slider input:checked ~ .sp-card .sp-select {
  background: var(--green);
  border-color: var(--green);
  color: var(--navy);
  box-shadow: 0 6px 16px rgba(var(--green-rgb), 0.32);
}
#service-options #offers-slider input:checked ~ .sp-card .sp-select .sp-select-default {
  display: none;
}
#service-options #offers-slider input:checked ~ .sp-card .sp-select .sp-select-on {
  display: inline;
}
#service-options {
  /* ── plan-feats — the source boxless centered icon strip, rides UNDER the CTA
       (source §4.2 featsBelow; tiered margin 34px auto 30px) ── */
}
#service-options ul.plan-feats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 36px;
  max-width: 860px;
  margin: 34px auto 30px;
  padding: 0;
}
#service-options ul.plan-feats li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95em;
  color: var(--navy);
  white-space: nowrap;
}
#service-options ul.plan-feats li svg {
  width: 19px;
  height: 19px;
  color: var(--green-dk);
  flex: none;
}
#service-options ul.plan-feats {
  /* ≤700px: force the 2×2 wrap via a pseudo-element flex break (source §7 idiom) */
}
@media (max-width: 700px) {
  #service-options ul.plan-feats::before {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 1;
  }
  #service-options ul.plan-feats li:nth-child(-n+2) {
    order: 0;
  }
  #service-options ul.plan-feats li:nth-child(n+3) {
    order: 2;
  }
}
#service-options ul.plan-feats {
  /* ≤374px: items go full-row centered (source §7) */
}
@media (max-width: 374px) {
  #service-options ul.plan-feats::before {
    content: none;
  }
  #service-options ul.plan-feats li {
    flex-basis: 100%;
    justify-content: center;
  }
}

/* ════ EXTRAS SCREEN ═════════════════════════════════════════════════════ */
#service-extras {
  /* ── section sublabels ("Add-ons", "Promotions") ── */
}
#service-extras form h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.2em;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-align: center;
}
#service-extras form h3 .title-description {
  font-weight: 500;
  font-style: normal;
  font-size: 0.82em;
  letter-spacing: 0;
  color: var(--grey-dk);
}
#service-extras {
  /* ── Total Connect — source .svc-trio of .svc-card ── */
}
#service-extras .svc-trio {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 980px;
  margin: 0 auto 4px;
  padding: 16px 2px 6px;
}
@media (max-width: 860px) {
  #service-extras .svc-trio {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}
#service-extras .svc-trio > li {
  display: flex;
  min-width: 0;
}
#service-extras .svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--white);
  border: 2px solid var(--grey-lt);
  border-radius: var(--radius);
  padding: 24px 18px 18px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s var(--ease), background 0.15s;
}
#service-extras .svc-card:hover:not(:has(> input:checked)) {
  border-color: var(--navy-mid);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(var(--navy-rgb), 0.1);
}
#service-extras .svc-card {
  /* popular = elevated shadow + badge only, deliberately NO ring (selection owns the border) */
}
#service-extras .svc-card.is-popular {
  box-shadow: 0 10px 28px rgba(var(--navy-rgb), 0.12);
}
#service-extras .svc-card:has(> input:checked) {
  border-color: var(--blue);
  background: #F6FAFF;
  box-shadow: 0 12px 30px rgba(var(--navy-rgb), 0.14);
}
#service-extras .svc-card:has(> input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
#service-extras .svc-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 3;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.62em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--green) 0%, var(--blue) 100%);
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
#service-extras .svc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
#service-extras .svc-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.12em;
  color: var(--navy);
}
#service-extras .svc-incl {
  display: inline-block;
  background: rgba(var(--navy-rgb), 0.08);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.6em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
}
#service-extras .svc-desc {
  font-size: 0.88em;
  color: var(--grey-dk);
  line-height: 1.45;
  margin: 0 0 12px;
}
#service-extras .svc-feats {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
#service-extras .svc-feats li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88em;
  color: var(--navy);
  line-height: 1.4;
}
#service-extras .svc-feats li .fa {
  --w: 15px;
  --h: 15px;
  --color: var(--green-dk);
  width: 15px;
  height: 15px;
  margin-top: 2px;
  flex: none;
}
#service-extras .svc-feats li a {
  color: var(--blue);
  font-weight: 600;
}
#service-extras .eero-logo {
  height: 11px;
  width: auto;
  display: inline-block;
  vertical-align: baseline;
}
#service-extras .svc-buy {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
#service-extras .svc-value {
  color: var(--green-dk);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92em;
}
#service-extras {
  /* the rate is a real <button> (the TS patches its text from the UGPS addon flavor) —
     strip the global CTA look down to bold navy type */
}
#service-extras .svc-buy button.svc-rate {
  --bg: transparent;
  --border: none;
  --color: var(--navy);
  --padding: 0;
  display: inline-flex;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.35em;
  letter-spacing: -0.01em;
  color: var(--navy);
}
#service-extras .svc-buy button.svc-rate:not(:disabled):hover, #service-extras .svc-buy button.svc-rate:not(:disabled):focus, #service-extras .svc-buy button.svc-rate:not(:disabled):active {
  background: none;
  color: var(--navy);
  transform: none;
  box-shadow: none;
  text-decoration: none;
}
#service-extras {
  /* Basic tier shows the quieter "Included" rate (source .svc-rate-incl) */
}
#service-extras #tc-slide-0 .svc-buy button.svc-rate {
  font-size: 1.15em;
}
#service-extras .svc-pick {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1.5px solid var(--grey-lt);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.88em;
  color: var(--navy);
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
#service-extras .svc-pick .svc-pick-on {
  display: none;
}
#service-extras .svc-card:hover .svc-pick {
  border-color: var(--navy-mid);
}
#service-extras .svc-card:has(> input:checked) .svc-pick {
  background: var(--green);
  border-color: var(--green);
  color: var(--navy);
  box-shadow: 0 6px 16px rgba(var(--green-rgb), 0.32);
}
#service-extras .svc-card:has(> input:checked) .svc-pick .svc-pick-default {
  display: none;
}
#service-extras .svc-card:has(> input:checked) .svc-pick .svc-pick-on {
  display: inline;
}
#service-extras {
  /* ── add-ons — source .xrow extras rows ── */
}
#service-extras #addons-container .xrow-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
}
#service-extras .xrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  background: var(--white);
  border: 1.5px solid var(--grey-lt);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
#service-extras .xrow:hover:not(:has(> input:checked)) {
  border-color: var(--navy-mid);
}
#service-extras .xrow:has(> input:checked) {
  border-color: var(--navy);
  background: #F6FAFF;
}
#service-extras .xrow:has(> input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
#service-extras .xrow-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: none;
}
#service-extras .xrow-img[src=""] {
  display: none;
}
#service-extras .xrow-main {
  flex: 1;
  min-width: 0;
  text-align: left;
}
#service-extras .xrow-main .xrow-title {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1em;
  color: var(--navy);
}
#service-extras .xrow-main .xrow-desc {
  font-size: 0.88em;
  color: var(--grey-dk);
  line-height: 1.4;
}
#service-extras .xrow-main .xrow-desc p {
  margin: 0;
}
#service-extras .xprice {
  flex: none;
  margin-left: auto;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.02em;
  color: var(--navy);
  white-space: nowrap;
}
#service-extras .xprice.free {
  color: var(--green-dk);
  letter-spacing: 0.04em;
}
#service-extras {
  /* 24px checkbox chip → navy fill when added */
}
#service-extras .xcheck {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1.5px solid var(--grey-lt);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
#service-extras .xcheck .fa {
  --w: 13px;
  --h: 13px;
  --color: #fff;
  width: 13px;
  height: 13px;
  opacity: 0;
  transition: opacity 0.15s;
}
#service-extras .xrow:has(> input:checked) .xcheck,
#service-extras .svc-mybundle:has(> input:checked) .xcheck {
  background: var(--navy);
  border-color: var(--navy);
}
#service-extras .xrow:has(> input:checked) .xcheck .fa,
#service-extras .svc-mybundle:has(> input:checked) .xcheck .fa {
  opacity: 1;
}
#service-extras {
  /* ── promos — source .svc-mybundle green included bar ── */
}
#service-extras #promos-container .promo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
}
#service-extras .svc-mybundle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid rgba(var(--green-rgb), 0.4);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--green-tint-100), var(--green-tint-200));
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#service-extras .svc-mybundle:hover {
  border-color: rgba(var(--green-rgb), 0.75);
}
#service-extras .svc-mybundle:has(> input:checked) {
  border-color: var(--green-dk);
  box-shadow: 0 6px 16px rgba(var(--green-rgb), 0.18);
}
#service-extras .svc-mybundle:has(> input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
#service-extras {
  /* informational included line (#mybundle-line) — non-interactive, but carries the
     selected-card idiom: green ✓ "Included" chip + FREE as its rate (source port) */
}
#service-extras #mybundle-line {
  margin-top: 14px;
}
#service-extras #mybundle-line .svc-mybundle {
  cursor: default;
}
#service-extras #mybundle-line .svc-rate-free {
  display: inline-block;
  margin-left: 8px;
  vertical-align: 1px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  color: var(--green-dk);
}
#service-extras #mybundle-line .svc-pick {
  flex: none;
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.88em;
  background: var(--green);
  border: 1.5px solid var(--green);
  color: var(--navy);
  box-shadow: 0 6px 16px rgba(var(--green-rgb), 0.32);
}
#service-extras #mybundle-line .svc-pick .svc-pick-on {
  display: inline;
}
@media (max-width: 560px) {
  #service-extras #mybundle-line .svc-mybundle {
    flex-wrap: wrap;
  }
  #service-extras #mybundle-line .svc-pick {
    flex-basis: 100%;
    justify-content: center;
  }
}
#service-extras .svc-mybundle-ic {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(var(--navy-rgb), 0.1);
}
#service-extras .svc-mybundle-ic svg {
  width: 22px;
  height: 22px;
  color: var(--green-dk);
}
#service-extras .svc-mybundle-ic img {
  max-width: 30px;
  max-height: 26px;
  object-fit: contain;
}
#service-extras .svc-mybundle-ic img[src=""] {
  display: none;
}
#service-extras .svc-mybundle-ic {
  /* flavor image (when present) replaces the default TV icon */
}
#service-extras .svc-mybundle-ic:has(img:not([src=""])) svg {
  display: none;
}
#service-extras .svc-mybundle-main {
  flex: 1;
  min-width: 0;
  text-align: left;
}
#service-extras .svc-mybundle-main .svc-mybundle-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#service-extras .svc-mybundle-main .svc-desc {
  margin: 2px 0 0;
}
#service-extras .svc-mybundle-main .svc-desc p {
  margin: 0;
}
#service-extras {
  /* "Promotion Eligibility" modal trigger — quiet blue underline link */
}
#service-extras button.svc-learnmore {
  --bg: transparent;
  --border: none;
  --color: var(--blue);
  --padding: 0;
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin-top: 6px;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85em;
  color: var(--blue);
  cursor: pointer;
  border-bottom: 1.5px solid rgba(46, 144, 224, 0.35);
}
#service-extras button.svc-learnmore:not(:disabled):hover, #service-extras button.svc-learnmore:not(:disabled):focus, #service-extras button.svc-learnmore:not(:disabled):active {
  background: none;
  color: var(--blue);
  border-bottom-color: var(--blue);
  transform: none;
  text-decoration: none;
}

/* ============================================================================
   order2 — Details + Success restyle (source Details §4.4 + Success idiom)
   Scoped entirely under #service-confirmation / #scheduling. The old #payment
   panel is GONE — Review + Payment merged into the Details step (order placed
   there), so the former #payment rules live under #service-confirmation now.
   Imported AFTER the legacy blocks in order-form.scss; where the legacy
   sheet's specificity could win regardless of order, selectors here are
   deliberately bumped (tbody, div.form-control.CbHosted, fieldset.form-sec,
   #fcc-compliance-wrapper).
   Tokens come from /shared (brand-v5): --navy, --navy-mid, --green-dk,
   --green-bright, --grey-lt/-mid/-dk, --off-white, --blue, --red,
   --navy-rgb, --green-rgb, --radius-sm, --ease, --font-head/--font-body.
   Deliberate hardcodes per source spec: #d1d5db inputs, #f7f8fa addr box,
   #000 FCC frame, rgba(46,144,224,.35) link underlines,
   rgba(220,38,38,.12) invalid ring.
   ========================================================================== */
/* ── STEP · Details (contact + payment + terms | cart aside) ───────────── */
#service-confirmation {
  /* step head — centered title + reassurance sub-line (source .v3-head) */
}
#service-confirmation .details-head p {
  margin: 0 auto 4px;
  max-width: 560px;
  font-size: 1.05em;
  line-height: 1.5;
  color: var(--grey-dk);
}
#service-confirmation {
  /* two-column shell: form panel | sticky cart aside (source .wzgrid) */
}
#service-confirmation .details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
  max-width: 1040px;
  margin: 8px auto 0;
}
@media (max-width: 820px) {
  #service-confirmation .details-grid {
    grid-template-columns: 1fr;
  }
}
#service-confirmation {
  /* ── left panel: hairline .form-sec sections ─────────────────────────── */
}
#service-confirmation .details-panel {
  min-width: 0;
  /* fieldsets → .form-sec hairline sections; legend is a static
     .form-sec-title (quiet heading, NOT a floating pill) */
}
#service-confirmation .details-panel fieldset.form-sec {
  position: static;
  margin: 28px 0 0;
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid var(--grey-lt);
  border-radius: 0;
  background: none;
  min-width: 0;
}
#service-confirmation .details-panel fieldset.form-sec.form-sec-first, #service-confirmation .details-panel fieldset.form-sec:first-of-type {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}
#service-confirmation .details-panel fieldset.form-sec > legend {
  position: static;
  float: none;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  padding: 0;
  background: none;
  font-family: var(--font-head);
  font-size: 1.08em;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--navy);
}
#service-confirmation .details-panel {
  /* micro-labels (.78em caps grey) — covers the pc-card wrappers that sit
     outside .nice-form-group */
}
#service-confirmation .details-panel .form-label,
#service-confirmation .details-panel .nice-form-group > label {
  display: block;
  margin: 0 0 7px;
  font-family: var(--font-body);
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--grey-dk);
}
#service-confirmation .details-panel .form-label em,
#service-confirmation .details-panel .nice-form-group > label em {
  font-style: normal;
  color: var(--red);
}
#service-confirmation .details-panel .form-label,
#service-confirmation .details-panel .nice-form-group > label {
  /* "(optional)" suffix stays lowercase + quiet */
}
#service-confirmation .details-panel .form-label .lbl-optional,
#service-confirmation .details-panel .nice-form-group > label .lbl-optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--grey-mid);
}
#service-confirmation .details-panel {
  /* consent/terms copy is body text, NOT a micro-label (out-specifies the rule above) */
}
#service-confirmation .details-panel .terms-box.nice-form-group > label {
  font-size: 1em;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--navy);
  line-height: 1.35;
}
#service-confirmation .details-panel .terms-box.nice-form-group > label small {
  display: block;
  margin-top: 2px;
  font-size: 0.82em;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--grey-mid);
}
#service-confirmation .details-panel .nice-form-group {
  margin-top: 14px;
}
#service-confirmation .details-panel {
  /* text inputs → source .field idiom */
}
#service-confirmation .details-panel input.form-control,
#service-confirmation .details-panel input#referral-email {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  background-color: var(--white, #fff);
  font-family: var(--font-body);
  font-size: 16px; /* 16px is load-bearing: iOS zooms on <16px input focus */
  color: var(--navy);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
#service-confirmation .details-panel input.form-control::placeholder,
#service-confirmation .details-panel input#referral-email::placeholder {
  color: var(--grey-mid);
}
#service-confirmation .details-panel input.form-control:focus,
#service-confirmation .details-panel input#referral-email:focus {
  outline: none;
  border-color: var(--navy-mid);
  box-shadow: 0 0 0 3px rgba(var(--navy-rgb), 0.08);
}
#service-confirmation .details-panel input.form-control.is-invalid,
#service-confirmation .details-panel input#referral-email.is-invalid {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
#service-confirmation .details-panel select.form-select {
  width: 100%;
  padding: 12px 34px 12px 14px; /* right air for the nice-forms arrow */
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  background-color: var(--white, #fff);
  font-family: var(--font-body);
  font-size: 16px; /* 16px is load-bearing: iOS zooms on <16px input focus */
  color: var(--navy);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
#service-confirmation .details-panel select.form-select:focus {
  outline: none;
  border-color: var(--navy-mid);
  box-shadow: 0 0 0 3px rgba(var(--navy-rgb), 0.08);
}
#service-confirmation .details-panel {
  /* read-only service-address display box (source .addr-fixed) */
}
#service-confirmation .details-panel .addr-fixed {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--grey-lt);
  border-radius: 8px;
  background: #f7f8fa;
  font-family: var(--font-body);
  font-size: 16px; /* 16px is load-bearing: iOS zooms on <16px input focus */
  line-height: 1.45;
  color: var(--navy);
}
#service-confirmation .details-panel {
  /* Confirmation line under a prefilled referral code. NOT a <small>: inside a
     .nice-form-group that element is the red validation message and stays
     display:none until .is-invalid lands on the input. */
}
#service-confirmation .details-panel .referral-note {
  margin: 6px 0 0;
  font-size: 0.86em;
  line-height: 1.45;
  color: var(--grey-mid);
}
#service-confirmation .details-panel .referral-note strong {
  color: var(--navy);
}
#service-confirmation .details-panel {
  /* Chargebee hosted-field wrappers — runtime classes .focus/.is-invalid/
     .is-valid land on these divs (double class beats the legacy
     .form-control.CbHosted block regardless of import order) */
}
#service-confirmation .details-panel div.form-control,
#service-confirmation .details-panel div.form-control.CbHosted {
  padding: 13px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  background-color: var(--white, #fff);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
#service-confirmation .details-panel div.form-control.focus,
#service-confirmation .details-panel div.form-control.CbHosted.focus {
  border-color: var(--navy-mid);
  box-shadow: 0 0 0 3px rgba(var(--navy-rgb), 0.08);
}
#service-confirmation .details-panel div.form-control.is-invalid,
#service-confirmation .details-panel div.form-control.CbHosted.is-invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
#service-confirmation .details-panel div.form-control.is-valid,
#service-confirmation .details-panel div.form-control.CbHosted.is-valid {
  border-color: var(--green-dk);
}
#service-confirmation {
  /* terms links → source terms-links idiom (blue, soft underline) */
}
#service-confirmation .review-links {
  gap: 22px;
  margin-bottom: 6px;
}
#service-confirmation .review-links > a {
  font-family: var(--font-body);
  font-size: 0.98em;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(46, 144, 224, 0.35);
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
#service-confirmation .review-links > a:hover, #service-confirmation .review-links > a:focus {
  font-weight: 700;
  text-decoration: none;
  border-bottom-color: var(--blue);
}
#service-confirmation {
  /* the source's single quiet terms box: policy links row + compact accept lines */
}
#service-confirmation .terms-box {
  background: var(--off-white);
  border: 1.5px solid var(--grey-lt);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#service-confirmation .terms-box:has(input.is-invalid) {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
#service-confirmation .terms-box.shake {
  animation: shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
#service-confirmation .terms-links {
  display: flex;
  gap: 22px;
}
#service-confirmation .terms-links a {
  font-family: var(--font-body);
  font-size: 0.95em;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(46, 144, 224, 0.35);
  transition: border-color 0.15s var(--ease);
}
#service-confirmation .terms-links a:hover, #service-confirmation .terms-links a:focus {
  border-bottom-color: var(--blue);
}
#service-confirmation {
  /* compact accept line: native 17px checkbox (accent green) + body text.
     nice-forms-reset styles bare checkboxes globally — re-assert the native widget. */
}
#service-confirmation .terms-accept {
  display: grid;
  /* 22px matches the landing consent checkbox and clears the WCAG 2.5.8 24px
     floor once the label's tap area counts; 17px read as a fiddly target */
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  margin: 0;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--navy);
  line-height: 1.45;
}
#service-confirmation .terms-accept input[type=checkbox] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0;
  padding: 0;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0;
  accent-color: var(--green);
  cursor: pointer;
}
#service-confirmation .terms-accept input[type=checkbox].is-invalid {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-radius: 3px;
}
#service-confirmation .terms-accept em {
  font-style: normal;
  color: var(--red);
}
#service-confirmation .terms-accept small {
  display: block;
  margin-top: 3px;
  font-size: 0.82em;
  font-weight: 400;
  line-height: 1.45;
  color: var(--grey-mid);
}
#service-confirmation {
  /* billing same-as-service toggle sits between the card fields and the (hidden) address block */
}
#service-confirmation .billing-same-box {
  margin: 16px 0 4px;
}
#service-confirmation {
  /* Mobile order summary above the authorize moment (≤820px only — the cart aside
     stacks BELOW the CTA there, so the total was never visible when authorizing). */
}
#service-confirmation .pay-summary {
  display: none;
}
@media (max-width: 820px) {
  #service-confirmation .pay-summary {
    display: block;
    border: 1.5px solid var(--grey-lt);
    border-radius: 10px;
    background: var(--off-white);
    padding: 4px 16px;
    margin-top: 22px;
  }
  #service-confirmation .pay-summary .prow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    font-size: 0.92em;
    color: var(--grey-dk);
  }
  #service-confirmation .pay-summary .prow b {
    color: var(--navy);
    font-family: var(--font-head);
    font-weight: 700;
  }
  #service-confirmation .pay-summary .prow + .prow {
    border-top: 1px solid var(--grey-lt);
  }
  #service-confirmation .pay-summary .prow.total {
    font-family: var(--font-head);
    font-weight: 800;
    color: var(--navy);
  }
  #service-confirmation .pay-summary .prow.total b {
    color: var(--green-dk);
    font-size: 1.12em;
  }
}
#service-confirmation {
  /* submit row + staged error alerts */
}
#service-confirmation .details-actions {
  display: flex;
}
#service-confirmation #details-message .alert {
  position: relative;
}
#service-confirmation #details-message .alert .alert-title {
  font-family: var(--font-head);
  font-size: 1.15em;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding-right: 34px;
}
#service-confirmation #details-message .alert .dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  margin: 0;
  min-width: 0;
}
#service-confirmation {
  /* ── right aside: order-summary cart (source §4.4 sidebar) ───────────── */
  /* k/v lines are .crow (NOT .row: bootstrap-grid owns .row in this template and
     its `.row > *` width:100% would stack the k/v spans). */
}
#service-confirmation .pay-cart {
  padding: 0 20px 20px;
  background: var(--white, #fff);
  border: 1px solid var(--grey-lt);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  /* sticky stays inside the measured flow (iframe height-sync safe; the
     sync means the frame rarely scrolls, so this is standalone-only air) */
}
@media (min-width: 820px) {
  #service-confirmation .pay-cart {
    position: sticky;
    top: 88px;
  }
}
@media (max-width: 820px) {
  #service-confirmation .pay-cart {
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
  }
}
#service-confirmation .pay-cart {
  /* navy gradient head, full-bleed against the card padding */
}
#service-confirmation .pay-cart .hero-band {
  margin: 0 -20px 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: 0 0 10px 10px;
}
#service-confirmation .pay-cart .hero-band .lbl {
  display: block;
  font-family: var(--font-head);
  font-size: 0.62em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.6);
}
#service-confirmation .pay-cart .hero-band .pname {
  display: block;
  font-family: var(--font-head);
  font-size: 1.5em;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.25;
  color: var(--white, #fff);
}
#service-confirmation .pay-cart .hero-band .ptier {
  display: block;
  font-size: 0.82em;
  color: rgba(255, 255, 255, 0.75);
}
#service-confirmation .pay-cart {
  /* 'Monthly charges' micro-label */
}
#service-confirmation .pay-cart h4 {
  margin: 0 0 2px;
  font-family: var(--font-head);
  font-size: 0.68em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-mid);
}
#service-confirmation .pay-cart {
  /* k/v lines */
}
#service-confirmation .pay-cart .crow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 0.92em;
}
#service-confirmation .pay-cart .crow .k {
  color: var(--grey-dk);
}
#service-confirmation .pay-cart .crow .v {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}
#service-confirmation .pay-cart .crow {
  /* promo explainer sub-line under a row label */
}
#service-confirmation .pay-cart .crow .crow-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.85em;
  line-height: 1.35;
  color: var(--grey-mid);
}
#service-confirmation .pay-cart .divider {
  height: 1px;
  margin: 6px 0;
  background: var(--grey-lt);
}
#service-confirmation .pay-cart .crow.total {
  font-family: var(--font-head);
  font-size: 1.15em;
  font-weight: 800;
}
#service-confirmation .pay-cart .crow.total .k {
  color: var(--navy);
}
#service-confirmation .pay-cart .crow.total .v {
  color: var(--green-dk);
}
#service-confirmation .pay-cart .note {
  margin: 10px 0 0;
  font-size: 0.78em;
  line-height: 1.45;
  color: var(--grey-mid);
}
#service-confirmation {
  /* FCC broadband label — deliberately un-branded frame per source .bbl;
     lives inside the cart aside (non-hub) or its own column (hub) */
}
#service-confirmation #fcc-compliance-wrapper img.fcc-label {
  display: block;
  width: 100%;
  max-width: min(350px, 100%);
  margin: 0 auto;
  border: 2px solid #000;
  border-radius: 4px;
  background: var(--white, #fff);
}
#service-confirmation {
  /* ── customerHub: old plan-change confirm experience ─────────────────── */
  /* summary blocks → quiet hairline sections (no nested-card chrome) */
}
#service-confirmation .summary-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#service-confirmation div.form-sec {
  border-top: 1px solid var(--grey-lt);
  padding-top: 20px;
}
#service-confirmation div.form-sec-first {
  border-top: 0;
  padding-top: 4px;
}
#service-confirmation {
  /* section titles — kill the 85% hack, adopt .form-sec-title type */
}
#service-confirmation .summary-card .summary-title {
  font-size: 100%;
  margin-bottom: 10px;
}
#service-confirmation .summary-card .summary-title h2 {
  font-family: var(--font-head);
  font-size: 1.15em;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--navy);
  margin: 0;
}
#service-confirmation .summary-card .summary-title hr {
  display: none;
}
#service-confirmation {
  /* summary table — label col = micro-label idiom, value col = quiet navy.
     DOM contract: TS writes row.children[1] innerHTML — style only. */
}
#service-confirmation #summary-table {
  width: 100%;
  border-collapse: collapse;
}
#service-confirmation #summary-table tbody tr > td {
  padding: 7px 0;
}
#service-confirmation #summary-table tbody tr > td:first-child {
  font-family: var(--font-body);
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--grey-dk);
  vertical-align: top;
  white-space: nowrap;
  padding-right: 18px;
  padding-top: 9px; /* optically align caps label with .95em value */
}
#service-confirmation #summary-table tbody tr > td + td {
  font-size: 0.95em;
  color: var(--navy);
  line-height: 1.45;
}
#service-confirmation #summary-table td .promo-explainer {
  display: block;
  margin: 2px 0 4px;
  font-size: 0.82em;
  font-style: normal;
  color: var(--grey-mid);
  line-height: 1.35;
}
#service-confirmation {
  /* price column → cart hero-band: navy gradient panel, caps labels,
     font-head w800 amounts. h4/strong DOM + ids untouched (TS writes by id). */
}
#service-confirmation .price-hero {
  gap: 14px;
  padding: 20px 22px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: var(--radius-sm, 10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#service-confirmation .price-hero h4 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  font-family: var(--font-head);
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.6);
}
#service-confirmation .price-hero h4 strong {
  font-family: var(--font-head);
  font-size: 2.1em;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-transform: none;
  color: var(--white, #fff);
}
#service-confirmation .price-hero {
  /* due-today accent — green-bright on navy (never green-dk: contrast) */
}
#service-confirmation .price-hero strong#pay-now {
  color: var(--green-bright);
}

/* ── STEP · Scheduling → source .success idiom ──────────────────────────── */
#scheduling .success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 16px 28px;
  animation: rise 0.5s var(--ease) both;
}
#scheduling .success .ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-bright));
  box-shadow: 0 8px 26px rgba(var(--green-rgb), 0.35);
  margin-bottom: 18px;
}
#scheduling .success .ic svg {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--navy);
}
#scheduling .success h3 {
  font-family: var(--font-head);
  font-size: 1.5em;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 10px;
}
#scheduling .success > p {
  color: var(--grey-dk);
  font-size: 0.98em;
  line-height: 1.55;
  max-width: 460px;
  margin: 0 auto;
}
#scheduling .success .success-meta {
  width: 100%;
  max-width: 460px;
  margin-top: 26px;
  padding: 12px 18px 6px;
  border: 1.5px solid var(--grey-lt);
  border-radius: var(--radius-sm, 10px);
  text-align: left;
}
#scheduling .success .success-meta .sm-head {
  font-family: var(--font-body);
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--grey-dk);
  padding-bottom: 8px;
}
#scheduling .success .success-meta .sm-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--grey-lt);
  /* narrow: right-aligned values wrap awkwardly — stack label over value */
}
@media (max-width: 480px) {
  #scheduling .success .success-meta .sm-row {
    flex-direction: column;
    gap: 3px;
  }
  #scheduling .success .success-meta .sm-row .sm-v {
    text-align: left;
  }
}
#scheduling .success .success-meta .sm-k {
  flex: 0 0 auto;
  min-width: 88px;
  font-family: var(--font-head);
  font-size: 0.82em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--navy);
}
#scheduling .success .success-meta .sm-v {
  font-size: 0.95em;
  color: var(--grey-dk);
  text-align: right;
}
#scheduling .success .success-meta .sm-v a {
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(46, 144, 224, 0.35);
  transition: border-color 0.15s var(--ease);
}
#scheduling .success .success-meta .sm-v a:hover {
  border-bottom-color: var(--blue);
}

/* ── utility classes ─────────────────────────────────────────────── */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.w-100 {
  width: 100%;
}

.w-50 {
  width: 50%;
}

.h-100 {
  height: 100%;
}

.h-0 {
  height: 0;
  overflow: hidden;
}

.mw-small {
  max-width: 225px;
}

.align-middle {
  vertical-align: middle !important;
}

.text-start {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-wrap-balance {
  text-wrap: balance;
}

.text-decoration-line-through {
  text-decoration: line-through;
}

.text-blue {
  color: var(--navy);
}

.text-lime {
  color: var(--green-dk);
}

.text-green {
  color: var(--green-dk);
}

.text-error {
  color: var(--red);
}

.fst-italic {
  font-style: italic;
}

.bg-white {
  background-color: var(--white);
}

.fa {
  --w: 24px;
  --h: 24px;
  --lh: 24px;
  --color: currentColor;
  width: var(--w);
  height: var(--h);
  line-height: var(--lh);
  fill: var(--color);
  flex: none;
}
.fa.blue {
  --color: var(--navy);
}
.fa.lime {
  --color: var(--green-dk);
}
.fa.sm {
  --w: 20px;
  --h: 20px;
  --lh: 20px;
}
.fa.md {
  --w: 48px;
  --h: 48px;
  --lh: 48px;
}
.fa.lg {
  --w: 64px;
  --h: 64px;
  --lh: 64px;
}

.lh-1 {
  line-height: 1;
}

.lh-1p2 {
  line-height: 1.2;
}

.lh-1p5 {
  line-height: 1.5;
}

.fs-6 {
  font-size: 1rem;
}

img[src=""] {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* loading spinner for button state, from https://cssloaders.github.io/ */
.spinner {
  width: 22px;
  height: 22px;
  margin-top: -1px;
  border: 4px solid currentColor;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: spin 1s infinite linear;
  flex: none;
}

/* ── animations ──────────────────────────────────────────────────── */
/* rise + shake keyframes ship with the shared reset/availability.css */
.fade {
  transition: opacity 0.15s linear;
}

.fade-out {
  animation: fadeOut 300ms forwards;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    display: none;
  }
}

/*# sourceMappingURL=order-form.css.map */