/* Rocket Fibre order flow — tokens from docs/WEBSITE-STYLE.md, page
   anatomy from the approved Fibre Finder mock (Lovable, 2026-07-11):
   deep gradient header band, white middle with badge + big centred
   title + pill postcode input, product cards with big pink speed
   numeral, gradient CTA band above the site footer. */
/* The site kit declares Univia Pro (commercial, not self-hostable);
   Tom picked self-hosted Poppins for this surface (2026-07-11). This
   file loads last, so these override kit.css for the chrome too. */
:root {
  --e-global-typography-primary-font-family: "Poppins";
  --e-global-typography-secondary-font-family: "Poppins";
  --e-global-typography-text-font-family: "Poppins";
  --e-global-typography-accent-font-family: "Poppins";
}

:root {
  --text: #333333;
  --accent: #D52A9F;
  --blue: #4871DB;
  --orange: #FF9A2E;
  --surface: #F7F7F5;
  --card: #FFFFFF;
  --grad: linear-gradient(100deg, var(--accent) 23%, var(--blue) 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* the hidden attribute must always win — author display rules (flex
   grids, address blocks) otherwise override the UA's [hidden] and
   "hidden" fields render anyway */
[hidden] { display: none !important; }
/* Form controls default to the platform UI font in every browser —
   force them onto the page font so new screens can't drift. */
input, button, select, textarea, optgroup { font-family: inherit; }
body {
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--card);
  line-height: 1.55;
  display: flex; flex-direction: column; min-height: 100vh;
}
.wrap { width: min(1100px, 92vw); margin: 0 auto; }

/* Gradient band = the site header, pulled down deep so the brand pop
   reads before the white middle takes over. */
.top-band { background: var(--grad); padding-bottom: clamp(3.5rem, 9vw, 7rem); }
/* The site header pulls following content up under itself
   (--margin-bottom:-131px / -144px) to float over hero imagery.
   Order pages have none, so neutralise it. */
.top-band .elementor-element-f1b0d8e { --margin-bottom: 0px; }

.order-main {
  flex: 1; padding: 3rem 0 4.5rem;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 46vh;
}

/* --- hero / page headings (white middle, black text) ---------------- */
.hero { text-align: center; padding: 1.2rem 0 0.6rem; }
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.08; margin-bottom: 0.9rem;
}
.hero.hero-xl h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); line-height: 1.04; }
.hero.hero-lg h1 { font-size: clamp(2.4rem, 6vw, 3.9rem); line-height: 1.06; }
.hero .hl { color: var(--accent); }
.addr-note { margin-top: 0.6rem; font-size: 0.9rem; font-weight: 600; color: #000; }
.addr-note .addr { text-transform: uppercase; }
.sub { color: #555; font-size: 1.05rem; max-width: 42rem; margin: 0 auto 0.4rem; }
.sub.small { font-size: 0.9rem; }
.sub.dark { color: #000; }

/* --- postcode checker: pill input with round go button -------------- */
.checker { text-align: center; }
.postcode-form {
  display: flex; align-items: center; gap: 0.4rem;
  background: var(--card); border: 1px solid rgba(51, 51, 51, 0.14);
  border-radius: 999px; padding: 0.4rem;
  max-width: 38rem; margin: 1.8rem auto 0;
  box-shadow: 0 20px 60px -30px var(--accent);
}
.postcode-form:focus-within { border-color: var(--accent); }
.postcode-form input[type=text] {
  flex: 1; min-width: 0; border: none; background: transparent;
  font-size: 1.15rem; padding: 0.85rem 1.4rem; text-transform: uppercase;
  font-family: inherit; color: var(--text);
}
.postcode-form input[type=text]:focus { outline: none; }
.postcode-form .go {
  flex: none; width: 3.4rem; height: 3.4rem; border-radius: 50%;
  border: none; background: var(--accent); color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.postcode-form .go:hover { filter: brightness(1.1); }
.postcode-form .go svg { width: 1.3rem; height: 1.3rem; }

/* --- buttons --------------------------------------------------------- */
.cta {
  font-size: 1rem; font-weight: 700; color: #fff; background: var(--grad);
  border: none; border-radius: 999px; padding: 0.8rem 1.8rem; cursor: pointer;
}
.cta:hover { filter: brightness(1.08); }
.cta-link { display: inline-block; text-decoration: none; margin-top: 1rem; }
.form-error {
  background: #fdecec; color: #b3261e; border: 1px solid #f5c2c0;
  border-radius: 12px; padding: 0.6rem 1rem; display: inline-block; margin-top: 0.8rem;
}
.back-link {
  display: inline-block; color: #777; text-decoration: none;
  font-size: 0.9rem; margin-bottom: 0.6rem;
}
.back-link:hover { color: var(--text); }

/* --- cards ------------------------------------------------------------ */
.picker-card, .form-card, .result-card {
  background: var(--card); border: 1px solid rgba(51, 51, 51, 0.10);
  border-radius: 18px; padding: 1.6rem 1.8rem;
  margin: 0 auto 2.5rem; max-width: 34rem;
  box-shadow: 0 24px 60px -45px rgba(51, 51, 51, 0.55);
}
.result-card { text-align: center; padding: 2.2rem 2rem; }
.result-card h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.5rem; }

/* Address picker: 60% of the 1100px wrap (Tom sized it by eye,
   2026-07-11), filter box on top, first ~8 rows visible then scroll
   inside the box (row ≈ 3rem: 1.55rem line + 1.4rem pad). width:100%
   is load-bearing: order-main is a column flexbox and the auto
   margins opt this card out of stretch, so without it the card
   shrinks to fit-content; max-width then caps it. */
.picker-card.addresses { width: 100%; max-width: 41.25rem; }
.addr-search {
  width: 100%; font-size: 1rem; padding: 0.65rem 1.2rem;
  border: 2px solid #ddd; border-radius: 999px; margin-bottom: 0.9rem;
  font-family: inherit; color: var(--text);
}
.addr-search:focus { outline: none; border-color: var(--accent); }
.premises-scroll { max-height: 24rem; overflow-y: auto; }
.no-match { color: #777; padding: 0.8rem 0.4rem; }

.premises-list { list-style: none; }
.premises-list li { border-bottom: 1px solid #f0eeea; }
.premises-list li:last-child { border-bottom: none; }
.premises-list a {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  text-align: center; padding: 0.7rem 0.4rem;
  color: var(--text); text-decoration: none; font-weight: 600;
}
.premises-list a:hover { color: var(--accent); }
.chev { color: var(--accent); font-size: 1.3rem; }

/* Full-screen branded progress screen (postcode search + availability
   check — markup in _check_overlay.html). Opaque brand gradient so the
   page underneath never bleeds through, drifting light specks, and a
   rocket riding the tip of the progress bar. */
.check-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: linear-gradient(120deg, #B3208A 0%, var(--accent) 32%, var(--blue) 100%);
  background-size: 200% 200%;
  animation: check-sky 12s ease-in-out infinite;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem; overflow: hidden;
}
.check-overlay[hidden] { display: none; }
@keyframes check-sky {
  0%, 100% { background-position: 0% 40%; }
  50% { background-position: 100% 60%; }
}
/* light specks drifting down = the rocket climbing; each star is a
   bright core inside a soft halo so they read as shining, not dust */
.check-overlay::before, .check-overlay::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: -420px; bottom: 0; pointer-events: none;
  background-size: 420px 420px;
  animation: check-drift 24s linear infinite;
}
.check-overlay::before {
  background-image:
    radial-gradient(10px 10px at 12% 18%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(3px 3px at 12% 18%, #fff, transparent 60%),
    radial-gradient(8px 8px at 63% 32%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(3.5px 3.5px at 63% 32%, #fff, transparent 60%),
    radial-gradient(7px 7px at 92% 12%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(2.5px 2.5px at 92% 12%, #fff, transparent 60%);
}
/* second layer, offset phase + twinkle */
.check-overlay::after {
  background-image:
    radial-gradient(8px 8px at 38% 64%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(2.5px 2.5px at 38% 64%, #fff, transparent 60%),
    radial-gradient(9px 9px at 81% 76%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(3px 3px at 81% 76%, #fff, transparent 60%),
    radial-gradient(7px 7px at 24% 88%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(2.5px 2.5px at 24% 88%, #fff, transparent 60%);
  animation: check-drift 24s linear infinite, check-twinkle 2.2s ease-in-out infinite alternate;
}
@keyframes check-drift { to { transform: translateY(420px); } }
@keyframes check-twinkle {
  from { opacity: 1; }
  to { opacity: 0.35; }
}
.check-box {
  position: relative; width: min(30rem, 100%);
  text-align: center; color: #fff;
}
.check-logo {
  width: min(200px, 55%); height: auto;
  margin-bottom: 2.2rem;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.18));
}
.check-box h2 {
  font-size: clamp(1.5rem, 4.5vw, 1.9rem); font-weight: 800;
  letter-spacing: -0.01em; color: #fff;
}
.check-addr {
  display: inline-block; margin-top: 0.7rem; padding: 0.28rem 1rem;
  border-radius: 999px; background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff; font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.05em;
}
.check-addr:empty { display: none; }
.check-bar {
  position: relative; margin-top: 2.2rem; height: 0.7rem;
  border-radius: 999px; background: rgba(255,255,255,0.22);
  /* no overflow clip — the rocket rides above the bar */
}
.check-fill {
  position: relative; width: 0; min-width: 2rem; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.35), var(--orange));
  box-shadow: 0 0 16px rgba(255, 154, 46, 0.75);
  transition: width 0.15s linear;
}
.check-rocket {
  position: absolute; right: -2.4rem; top: 50%; width: 5.4rem;
  margin-top: -1.35rem; height: 2.7rem;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
  animation: check-bob 1.6s ease-in-out infinite alternate;
}
@keyframes check-bob {
  from { transform: translateY(-8%); }
  to { transform: translateY(8%); }
}
.check-flame {
  transform-box: fill-box; transform-origin: right center;
  animation: check-flame 0.45s ease-in-out infinite alternate;
}
@keyframes check-flame {
  from { transform: scaleX(1); }
  to { transform: scaleX(0.7); }
}
.check-pct {
  margin-top: 1.1rem; font-weight: 800; color: #fff;
  font-size: clamp(2.2rem, 7vw, 2.9rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.check-stage { margin-top: 0.5rem; color: rgba(255,255,255,0.85); font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) {
  .check-overlay, .check-overlay::before, .check-overlay::after,
  .check-rocket, .check-flame {
    animation: none;
  }
}

/* --- product cards ----------------------------------------------------- */
.product-section { margin-top: 2.4rem; }
.product-section h2 {
  font-size: 1.45rem; font-weight: 800; text-align: center;
  letter-spacing: -0.01em;
}
/* The package area breaks out of the 1100px wrap so more cards fit
   on screen at once (Tom, 2026-07-13). */
.product-section {
  width: min(1500px, 96vw);
  position: relative; left: 50%; transform: translateX(-50%);
}
/* Filter rows top-left of the package area: contract length on one
   line, gaming / non-gaming on the next. Pills, active = gradient. */
.filter-bar {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.6rem; margin: 1rem 0 0.2rem;
}
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.filter-label {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #999;
  min-width: 7.5rem;
}
/* Segmented toggle: grey pill track, the active option slides to a
   gradient fill. */
.filter-toggle {
  display: inline-flex; background: var(--surface);
  border: 1px solid rgba(51, 51, 51, 0.14); border-radius: 999px;
  padding: 0.25rem;
}
.filter-btn {
  border: none; border-radius: 999px; background: transparent;
  color: #666; cursor: pointer;
  padding: 0.42rem 1.2rem; font-family: inherit;
  font-size: 0.85rem; font-weight: 700;
  transition: background 0.18s ease, color 0.18s ease;
}
.filter-btn:hover:not(.on) { color: var(--accent); }
.filter-btn.on {
  background: var(--grad); color: #fff;
  box-shadow: 0 2px 10px -3px var(--accent);
}
.no-combo { text-align: center; color: #777; padding: 1.4rem 0; }

/* One horizontal row per section — arrows page through the packages
   instead of the page growing downward. Cards keep a fixed width and
   snap; touch devices just swipe. */
.carousel { display: flex; align-items: center; gap: 0.5rem; margin: 1.2rem 0 1.6rem; }
.cards-track {
  flex: 1; display: flex; gap: 1.25rem; padding: 0.8rem 0.2rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
/* a row with few cards (e.g. a CityFibre-only area) centres in the
   viewport: the auto margins on these zero-size end items absorb the
   spare space and collapse once the row overflows into a scroll —
   justify-content: center would make the leftmost cards unreachable,
   and the toggles can hide the first card, so child margins can't
   be trusted either */
.cards-track::before, .cards-track::after { content: ""; margin: auto; }
.cards-track::-webkit-scrollbar { display: none; }
.cards-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.car-btn {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid rgba(51, 51, 51, 0.18); background: var(--card);
  color: var(--accent); font-size: 1.6rem; line-height: 1; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding-bottom: 0.2rem;
}
.car-btn:hover:not(:disabled) { border-color: var(--accent); }
.car-btn:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 560px) { .car-btn { display: none; } }
/* Card anatomy from the approved package_details mock (Tom,
   2026-07-13): purple banner pill, big uppercase package name (the
   WHMCS product name), grey £X/month, Download/Upload speed box,
   icon feature list, promo box, outline Select Package pill. */
.product-card {
  background: var(--card); border: 1px solid rgba(51, 51, 51, 0.10);
  border-radius: 18px; padding: 1.2rem 1.1rem 1.3rem;
  box-shadow: 0 30px 80px -55px var(--accent);
  display: flex; flex-direction: column; text-align: center;
  position: relative;
  flex: 0 0 clamp(17rem, 82vw, 19.5rem); scroll-snap-align: start;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 34px 80px -45px var(--accent);
  border-color: rgba(213, 42, 159, 0.35);
}
.product-card .gaming-badge {
  position: absolute; top: -0.7rem; right: 1rem;
  border-radius: 999px; padding: 0.2rem 0.8rem;
  background: var(--grad); color: #fff;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.product-card.gaming { border-color: rgba(213, 42, 159, 0.45); }
.card-banner {
  background: var(--accent); color: #fff; border-radius: 999px;
  padding: 0.4rem 0.8rem; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.3;
}
.pkg-name {
  margin-top: 0.9rem; font-size: 1.3rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.1;
}
.price-line { margin-top: 0.4rem; font-size: 1.5rem; font-weight: 700; color: #000; }
.price-line .per { font-size: 1rem; font-weight: 600; color: #000; }
.price-note { display: block; font-size: 0.75rem; font-weight: 600; color: #999; }
.speed-box {
  display: flex; gap: 0.4rem; background: var(--surface);
  border-radius: 14px; padding: 0.8rem 0.4rem; margin-top: 0.9rem;
}
.speed-cell { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.45rem; }
.speed-cell svg { width: 1.6rem; height: 1.6rem; color: var(--accent); flex: none; }
.speed-txt { text-align: left; }
.speed-txt .lbl { display: block; font-size: 0.7rem; color: #777; line-height: 1.2; }
.speed-txt .val { display: block; font-size: 0.98rem; font-weight: 800; line-height: 1.25; }
.product-card .feature-list {
  list-style: none; flex: 1; width: fit-content; text-align: left;
  margin: 0.9rem auto 0; font-size: 0.83rem; font-weight: 600;
}
.product-card .feature-list li { display: flex; align-items: center; gap: 0.55rem; padding: 0.26rem 0; border: none; }
.product-card .feature-list .fi {
  flex: none; width: 1.1rem; height: 1.1rem; color: var(--accent);
  font-weight: 800; font-size: 0.95rem; line-height: 1.1rem; text-align: center;
}
.promo-box {
  display: flex; align-items: center; gap: 0.7rem; text-align: left;
  background: linear-gradient(100deg, rgba(213, 42, 159, 0.09), rgba(72, 113, 219, 0.09));
  border-radius: 14px; padding: 0.75rem 0.85rem; margin-top: 0.9rem;
}
.promo-box svg { width: 2rem; height: 2rem; color: var(--accent); flex: none; }
.promo-box strong { display: block; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; line-height: 1.3; }
.promo-box span { display: block; font-size: 0.74rem; color: #555; line-height: 1.35; }
.product-card form { margin-top: 1rem; }
.product-card .cta { width: 100%; }
.product-card .cta.select {
  background: var(--card); color: #777; border: 2px solid #ccc;
  text-transform: uppercase; letter-spacing: 0.04em;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.product-card .cta.select:hover:not([disabled]) {
  background: var(--grad); color: #fff; border-color: transparent;
}
.product-card .cta[disabled] { opacity: 0.55; cursor: not-allowed; }

/* --- details form ------------------------------------------------------ */
.details-form { display: flex; flex-direction: column; gap: 1rem; }
.details-form label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; font-size: 0.95rem; }
.details-form input[type=text], .details-form input[type=email],
.details-form input[type=tel], .details-form textarea {
  font-size: 1rem; padding: 0.6rem 0.8rem; border: 2px solid #ddd; border-radius: 12px;
  font-family: inherit;
}
.details-form input:focus, .details-form textarea:focus, .details-form select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(213, 42, 159, 0.13);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.details-form .check { flex-direction: row; align-items: flex-start; gap: 0.6rem; font-weight: 500; }
.details-form .check input { margin-top: 0.25rem; }
.addr-block {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--surface); border-radius: 12px; padding: 1rem 1.1rem;
}
.addr-find { align-items: end; }
.addr-find-btn { align-self: end; padding: 0.6rem 1.2rem; font-size: 0.85rem; }
.addr-status { font-size: 0.82rem; color: #777; }
.addr-pick-wrap select {
  font-size: 1rem; padding: 0.6rem 0.8rem; border: 2px solid #ddd;
  border-radius: 12px; font-family: inherit; width: 100%;
}
/* titled form sections (Tom, 2026-08-02: "give the signup forms a
   little spark") — each section is its own soft warm panel with a
   gradient dot on the legend and a gentle brand glow while you're
   typing in it. Special sections keep their own colours on top of
   this (ots-panel magenta, port-panel blue, golive green). Legends
   float so the panel border draws unbroken (default legends sit in
   the fieldset's top border and carve a gap out of it). */
.details-form .form-section {
  border: 1px solid #ece7df; border-radius: 16px;
  background: linear-gradient(180deg, #fbfaf7, #fff);
  padding: 1.1rem 1.2rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.details-form .form-section:focus-within {
  border-color: rgba(213, 42, 159, 0.35);
  box-shadow: 0 16px 44px -34px rgba(213, 42, 159, 0.55);
}
.details-form .form-section legend {
  float: left; width: 100%; font-weight: 800; font-size: 1rem;
  margin-bottom: 0.9rem;
}
.details-form .form-section legend::before {
  content: ""; display: inline-block; width: 0.6rem; height: 0.6rem;
  border-radius: 50%; background: var(--grad); margin-right: 0.55rem;
}
.details-form .form-section .form-section-body { clear: both; display: flex; flex-direction: column; gap: 1rem; }
.option-col { display: flex; flex-direction: column; gap: 0.55rem; }
.option-hint { font-weight: 400; font-size: 0.85rem; color: #777; margin-left: 0.35rem; }
.details-form .marketing legend { font-weight: 700; font-size: 0.88rem; margin-bottom: 0.6rem; }
.marketing-row { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.details-form .check.inline { flex-direction: row; align-items: center; }
.summary-box { background: var(--surface); border-radius: 12px; padding: 1rem 1.2rem; }
.summary-box h3 { font-size: 0.95rem; margin-bottom: 0.4rem; }
.summary-box .feature-list { list-style: none; text-align: left; font-size: 0.95rem; }
.summary-box .feature-list li { padding: 0.3rem 0; border-bottom: 1px solid #eae7e2; }
.summary-box .feature-list li:last-child { border-bottom: none; }

/* --- checkout wizard (5-step flow, screenshots 2026-07-18) ------------- */
.wizard {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 0.4rem; margin: 0.4rem auto 1.6rem; max-width: 46rem;
}
.wiz-step {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  text-decoration: none; min-width: 4.4rem;
}
.wiz-dot {
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.85rem; font-weight: 800;
  background: var(--surface); color: #999;
  border: 2px solid #ddd;
}
.wiz-step.done .wiz-dot { background: var(--grad); color: #fff; border-color: transparent; }
.wiz-step.current .wiz-dot {
  background: var(--grad); color: #fff; border-color: transparent;
  box-shadow: 0 0 0 4px rgba(213, 42, 159, 0.18);
}
.wiz-lbl {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: #999; text-align: center;
}
.wiz-step.current .wiz-lbl { color: var(--text); }
a.wiz-step:hover .wiz-lbl { color: var(--accent); }
.wiz-bar { flex: 1; height: 3px; border-radius: 999px; background: #e4e2de; margin-top: 1rem; min-width: 1.4rem; }
.wiz-bar.done { background: var(--grad); }
@media (max-width: 560px) { .wiz-lbl { display: none; } .wiz-step { min-width: 0; } }

/* --- order steps: main column + Order Summary sidebar ------------------ */
.order-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1.6rem; align-items: start; margin-bottom: 2.5rem;
}
@media (max-width: 880px) { .order-grid { grid-template-columns: 1fr; } }
.order-main-col { display: flex; flex-direction: column; gap: 1.4rem; }
.page-error { display: block; max-width: 46rem; margin: 0 auto 1.4rem; text-align: center; }
.step-card {
  background: var(--card); border: 1px solid rgba(51, 51, 51, 0.10);
  border-radius: 18px; padding: 1.4rem 1.6rem;
  box-shadow: 0 24px 60px -45px rgba(51, 51, 51, 0.55);
}
.step-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 0.9rem; }
/* The cooling-off notice on the review step. It sits directly above the
   accept form and has to survive being scrolled past on the way to the
   tick boxes, so it borrows the pink note treatment already used inside
   the acknowledgement pop-up rather than inventing a new one. */
.notice-card {
  background: #fdf0f8; border-color: #f2cbe4;
  border-left: 4px solid var(--accent);
}
.notice-card .step-title { color: var(--accent); }
.notice-card p {
  font-size: 0.88rem; line-height: 1.55; margin-bottom: 0.65rem;
}
.notice-card p:last-child { margin-bottom: 0; }
/* The connect-when choice. It decides whether the customer keeps a
   cancellation right, so it reads as a decision on the page, not as
   another tick box in the run of them. */
.connect-when { border: 2px solid var(--accent); border-radius: 12px;
  padding: 0.9rem 1rem; margin-bottom: 1rem; }
.connect-when legend {
  font-weight: 800; font-size: 0.95rem; padding: 0 0.4rem;
  color: var(--accent);
}
.connect-when-opt {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.85rem; line-height: 1.5; font-weight: 500;
  padding: 0.5rem 0.2rem;
}
.connect-when-opt + .connect-when-opt {
  border-top: 1px solid rgba(213, 42, 159, 0.2);
}
.connect-when-opt input { margin-top: 0.25rem; accent-color: var(--accent);
  flex: none; }
.connect-when-opt strong { font-weight: 800; }
.addon-cat-hint { font-size: 0.85rem; color: #555; margin: -0.5rem 0 0.9rem; }
.step-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.step-nav .cta.prev {
  background: var(--card); color: #777; border: 2px solid #ccc; text-decoration: none;
}
.step-nav .cta.prev:hover { color: var(--accent); border-color: var(--accent); filter: none; }
.cta.ghost { background: var(--card); color: var(--accent); border: 2px solid var(--accent); }
.edit-link { font-size: 0.85rem; color: var(--accent); font-weight: 700; text-decoration: none; }
.edit-link:hover { text-decoration: underline; }
.field-hint { font-weight: 500; font-size: 0.78rem; color: #999; }

/* Order Summary sidebar */
.order-summary {
  background: var(--card); border: 1px solid rgba(51, 51, 51, 0.10);
  border-radius: 18px; padding: 1.3rem 1.4rem;
  box-shadow: 0 24px 60px -45px rgba(51, 51, 51, 0.55);
  position: sticky; top: 1rem;
}
.order-summary h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.8rem; }
.sum-line {
  display: flex; justify-content: space-between; gap: 0.8rem;
  padding: 0.35rem 0; font-size: 0.88rem;
}
.sum-line small { display: block; color: #999; font-size: 0.75rem; font-weight: 500; }
.sum-pkg { font-weight: 700; }
.sum-total {
  border-top: 1px solid #eee; margin-top: 0.3rem; padding-top: 0.55rem;
  color: var(--blue); font-weight: 800;
}
.sum-due {
  background: var(--surface); border-radius: 12px;
  padding: 0.7rem 0.8rem; margin-top: 0.7rem; font-weight: 800;
}
.sum-note { margin-top: 0.7rem; font-size: 0.78rem; color: #555; }

/* Router choice + add-on cards */
.router-included { display: flex; gap: 0.7rem; align-items: flex-start; }
.router-included .fi { color: var(--accent); font-weight: 800; font-size: 1.2rem; }
.router-included span:not(.fi) { display: block; font-size: 0.85rem; color: #555; }
.router-warn { font-size: 0.9rem; margin-bottom: 0.9rem; }
.router-note { font-size: 0.9rem; color: #555; margin-bottom: 0.9rem; }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .choice-row { grid-template-columns: 1fr; } }
.choice-card {
  display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer;
  border: 2px solid #ddd; border-radius: 14px; padding: 0.9rem 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.choice-card:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 10px 30px -20px var(--accent);
}
.choice-card input { margin-top: 0.25rem; accent-color: var(--accent); }
.choice-card.slim { padding: 0.6rem 0.8rem; }
.choice-card.slim .choice-body em { margin-top: 0.15rem; }
.ship-title { font-size: 0.95rem; font-weight: 800; margin: 1.1rem 0 0.6rem; }

/* Home-phone porting panel (Tom, 2026-08-02): its own visually
   distinct section in the brand blue (#4871DB tints) — port paperwork
   reads as one task, and the inputs match the site's details-form
   styling instead of bare browser boxes. */
.port-panel {
  display: flex; flex-direction: column; gap: 1rem;
  background: #eef2fc; border: 1px solid #c9d6f4; border-radius: 14px;
  padding: 1.1rem 1.2rem; margin-top: 1rem;
}
.port-panel .port-title {
  font-size: 1rem; font-weight: 800; margin: 0; color: var(--blue);
}
.port-panel .port-hint {
  font-size: 0.88rem; color: #44598f; margin: -0.55rem 0 0;
}
.port-panel label {
  display: flex; flex-direction: column; gap: 0.3rem;
  font-weight: 600; font-size: 0.95rem;
}
.port-panel input[type=text], .port-panel input[type=tel],
.port-panel select {
  font-size: 1rem; padding: 0.6rem 0.8rem; border: 2px solid #c9d6f4;
  border-radius: 12px; font-family: inherit; background: var(--card);
}
.port-panel input[type=file] {
  font-size: 0.9rem; padding: 0.5rem 0.6rem; border: 2px dashed #c9d6f4;
  border-radius: 12px; background: var(--card);
}
.port-panel input:focus, .port-panel select:focus {
  outline: none; border-color: var(--blue);
}
.port-panel .check {
  flex-direction: row; align-items: flex-start; gap: 0.6rem;
  font-weight: 500;
}
.port-panel .check input { margin-top: 0.25rem; }
.port-panel .field-hint { font-weight: 400; color: #44598f; }
.port-panel .addr-find { align-items: end; }
.port-panel .addr-find-btn { align-self: end; padding: 0.6rem 1.2rem; font-size: 0.85rem; }
.port-panel .addr-status { font-size: 0.82rem; color: #44598f; }
.port-panel .addr-pick-wrap select { width: 100%; }
.choice-body strong { display: block; font-size: 0.92rem; }
.choice-body span { display: block; font-size: 0.78rem; color: #555; margin-top: 0.2rem; }
.choice-body em { display: block; font-style: normal; font-weight: 800; color: var(--accent); margin-top: 0.4rem; }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.addon-card {
  border: 1px solid rgba(51, 51, 51, 0.14); border-radius: 14px;
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem;
}
/* white background so uploaded product shots (white-bg JPEGs) blend
   straight into the card (Tom, 2026-07-18) */
.addon-img {
  width: 100%; height: 11rem; object-fit: contain;
  background: #fff; border-radius: 10px;
}
.addon-points { list-style: none; font-size: 0.79rem; color: #555; }
.addon-points li {
  padding: 0.16rem 0 0.16rem 1.2rem; position: relative; text-align: left;
}
.addon-points li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--accent); font-weight: 800;
}
.addon-card.inc { background: var(--surface); }
.addon-head { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; }
.addon-head h3 { font-size: 0.98rem; font-weight: 800; }
.addon-price { font-weight: 800; color: var(--accent); white-space: nowrap; }
.addon-price span { font-size: 0.72rem; color: #999; font-weight: 600; }
.addon-desc { font-size: 0.8rem; color: #555; flex: 1; display: flex; gap: 0.45rem; }
.addon-desc .fi { color: var(--accent); font-weight: 800; }
.addon-inc-note { font-size: 0.78rem; font-weight: 700; color: var(--blue); }
.addon-check { position: absolute; opacity: 0; pointer-events: none; }
.addon-btn {
  display: block; text-align: center; cursor: pointer;
  border: 2px solid #ccc; border-radius: 999px; padding: 0.55rem 1rem;
  font-size: 0.82rem; font-weight: 800; color: #777;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.addon-btn:hover { color: var(--accent); border-color: var(--accent); }
.addon-btn .when-on { display: none; }
.addon-check:checked + .addon-btn { background: var(--grad); color: #fff; border-color: transparent; }
.addon-check:checked + .addon-btn .when-on { display: inline; }
.addon-check:checked + .addon-btn .when-off { display: none; }
.addon-check:focus-visible + .addon-btn { outline: 2px solid var(--accent); outline-offset: 3px; }
.addon-qty {
  display: none; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 700; color: #555;
}
.addon-check:checked ~ .addon-qty { display: flex; }
.addon-qty select {
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
  padding: 0.3rem 0.5rem; border: 2px solid #ddd; border-radius: 10px;
}
.addon-qty select:focus { outline: none; border-color: var(--accent); }

/* No-router popup */
.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(30, 30, 40, 0.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  width: min(30rem, 100%); background: #fff; border-radius: 20px;
  padding: 1.8rem 1.8rem 1.6rem;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.5);
}
.modal-box h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: 0.7rem; }
.modal-box p { font-size: 0.9rem; margin-bottom: 0.7rem; }
.modal-note { background: var(--surface); border-radius: 12px; padding: 0.7rem 0.9rem; }
.modal-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
.modal-actions .cta { width: 100%; }

/* Review / contract summary */
.review-list { display: flex; flex-direction: column; }
.review-list > div {
  display: grid; grid-template-columns: 11rem 1fr; gap: 0.8rem;
  padding: 0.45rem 0; border-bottom: 1px solid #f0eeea; font-size: 0.9rem;
}
.review-list > div:last-child { border-bottom: none; }
.review-list dt { color: #777; font-weight: 600; }
@media (max-width: 520px) { .review-list > div { grid-template-columns: 1fr; gap: 0.1rem; } }
.terms-list { list-style: none; font-size: 0.85rem; }
.terms-list li { padding: 0.35rem 0 0.35rem 1.3rem; position: relative; }
.terms-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.accept-card { border-color: rgba(213, 42, 159, 0.4); }
.accept-check { margin-bottom: 1rem; font-size: 0.92rem; }

/* Terms & conditions acknowledgements (review step).
   ONE element, two presentations: without JS it stays the bordered
   block below (so the tick boxes are reachable and the server's check
   is passable); review.html adds .tc-ack-modal and it becomes the
   pop-up. Keep both sets of rules together — editing one alone is how
   the no-JS path quietly breaks. */
.tc-ack {
  margin: 0 0 1rem; border: 2px solid rgba(213, 42, 159, 0.35);
  border-radius: 14px; padding: 1rem 1.1rem; background: #fdf0f8;
}
.tc-ack-box h2 { font-size: 1.05rem; font-weight: 800; margin-bottom: 0.4rem; }
.tc-ack-box > p { font-size: 0.88rem; margin-bottom: 0.8rem; }
.tc-ack-note { display: flex; flex-direction: column; gap: 0.7rem; }
.tc-ack-check {
  display: flex; flex-direction: row; align-items: flex-start; gap: 0.6rem;
  font-size: 0.88rem; font-weight: 500; line-height: 1.45;
  border-radius: 10px; padding: 0.35rem 0.4rem;
}
.tc-ack-check input { margin-top: 0.2rem; accent-color: var(--accent); flex: none; }
.tc-ack-check.tc-ack-missing {
  background: #fde8ef; box-shadow: inset 0 0 0 2px var(--accent);
}
.tc-ack-actions { margin-top: 1rem; }
.tc-ack-actions .cta { width: 100%; }

.tc-ack.tc-ack-modal {
  position: fixed; inset: 0; z-index: 60; margin: 0; border: none;
  border-radius: 0; padding: 1.2rem; background: rgba(30, 30, 40, 0.55);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto;
}
.tc-ack-modal .tc-ack-box {
  width: min(30rem, 100%); background: #fff; border-radius: 20px;
  padding: 1.8rem 1.8rem 1.6rem;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.5);
}
.tc-ack-modal .tc-ack-box h2 { font-size: 1.3rem; color: var(--accent); }
.tc-ack-modal .tc-ack-note {
  background: #fdf0f8; border: 1px solid #f2cbe4; border-radius: 12px;
  padding: 0.8rem 0.9rem;
}
/* The optional request inside the pop-up. It has to READ as optional:
   its own heading, separated from the boxes above by a rule, and no
   pink note panel, which in here signals "you must tick this". */
.tc-ack-optional {
  margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid rgba(213, 42, 159, 0.25);
}
.tc-ack-optional h3 {
  font-size: 0.92rem; font-weight: 800; margin-bottom: 0.45rem;
}
.tc-ack-optional .hint {
  font-size: 0.8rem; color: #6b6b73; margin: 0.35rem 0 0 1.55rem;
}

body.modal-open { overflow: hidden; }

.tc-ack-state {
  margin: -0.4rem 0 1rem; font-size: 0.85rem; color: #5a7a52;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.tc-ack-state::before { content: "✓"; font-weight: 800; color: var(--accent); }
.tc-ack-state a { color: var(--accent); }

/* --- gradient CTA band above the site footer --------------------------- */
.cta-band { background: var(--grad); color: #fff; text-align: center; padding: 4.2rem 1rem 4.8rem; }
.cta-band h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; }
.cta-band p { color: rgba(255, 255, 255, 0.88); max-width: 36rem; margin: 0.9rem auto 2rem; }
.btn-white {
  display: inline-block; background: #fff; color: var(--accent);
  border-radius: 999px; padding: 0.85rem 2.2rem; text-decoration: none;
  font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
}
.btn-white:hover { background: rgba(255, 255, 255, 0.92); }

/* --- switch step (One Touch Switch) ------------------------------------ */
.switch-choice { margin-bottom: 1.2rem; }
.switch-choice .cta { margin-top: 0.9rem; }
.switch-wait { text-align: center; padding: 3rem 1.5rem; }
.spinner {
  width: 44px; height: 44px; margin: 0 auto 1.2rem;
  border: 4px solid rgba(213, 42, 159, 0.18); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.switch-services { list-style: none; margin-bottom: 1rem; }
.switch-services li { padding: 0.55rem 0; border-bottom: 1px solid #eee; }
.switch-services li:last-child { border-bottom: none; }
.ok-badge, .warn-badge {
  display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.6rem;
  border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ok-badge { background: rgba(29, 185, 84, 0.14); color: #14813c; }
.warn-badge { background: rgba(240, 165, 0, 0.16); color: #9a6b00; }
.switch-hints { font-size: 0.92rem; padding-left: 1.2rem; margin-bottom: 1.2rem; }
.switch-hints li { margin-bottom: 0.45rem; }
.inline-form { display: inline; }

/* --- go-live date slot chips (details page) ---------------------------- */
/* One Touch Switch section (Tom, 2026-08-02): its own clearly-branded
   panel at the top of the details page, in the accent-magenta family so
   it reads as a distinct part of the journey (phone porting = blue,
   go-live dates = green). Inputs match the details-form styling. */
.ots-panel, .details-form .form-section.ots-panel {
  background: #fdf0f8; border: 1px solid #f2cbe4; border-radius: 14px;
  padding: 1.1rem 1.2rem !important; margin-bottom: 0.4rem;
}
.ots-panel legend {
  color: var(--accent); padding-top: 0.2rem;
}
.ots-panel .ots-hint {
  font-size: 0.9rem; color: #8f2f6e; margin: -0.2rem 0 0.9rem;
}
.ots-panel .choice-card { background: var(--card); }
.ots-panel input[type=text], .ots-panel select {
  border-color: #f2cbe4;
}
.ots-panel input:focus, .ots-panel select:focus {
  border-color: var(--accent) !important;
}
.ots-panel select {
  font-size: 1rem; padding: 0.6rem 0.8rem; border: 2px solid #f2cbe4;
  border-radius: 12px; font-family: inherit; background: var(--card);
  width: 100%;
}
.ots-panel .field-hint { color: #8f2f6e; }
/* "Skip the switch" (Tom, 2026-08-02): the skip is offered wherever
   the OTS part is on screen, and always confirms through the branded
   liability pop-up below — pure CSS :target so it works without JS.
   Openers are <a href="#ots-skip-modal"> inside an #ots-skip-open row
   (the Go back link returns there). */
.ots-skip-row {
  margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed #e8cdde;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem;
}
.ots-skip-row p { margin: 0; font-size: 0.88rem; color: #8f2f6e; }
.skip-link { color: var(--accent); font-weight: 700; }
.ots-skip-modal { display: none; }
.ots-skip-modal:target { display: flex; }
.ots-modal-box::before {
  content: ""; display: block; height: 6px; border-radius: 999px;
  background: var(--grad); margin-bottom: 1.1rem;
}
.ots-modal-box h2 { color: var(--accent); }
.ots-modal-note { border: 1px solid #f2cbe4; background: #fdf0f8; }
.ots-modal-note p:last-child { margin-bottom: 0; }
.ots-modal-box .check {
  display: flex; flex-direction: row; align-items: flex-start;
  gap: 0.6rem; font-weight: 500; font-size: 0.88rem; margin-top: 1rem;
}
.ots-modal-box .check input { margin-top: 0.25rem; accent-color: var(--accent); }
.ots-modal-box .modal-actions .cta { text-align: center; text-decoration: none; }
/* compact read-only banner on the details page — the switch is
   authenticated before this page; only a summary + change link */
.ots-summary { padding: 0.8rem 1rem !important; font-size: 0.92rem; }
.ots-summary p { margin: 0; }
.ots-summary a { color: var(--accent); font-weight: 700; }

/* OFNL go-live guidance (Tom, 2026-08-02): scenario note + green
   date chips — the green shade marks the dates the customer can
   actually have (14-day migration window / weekday-only installs). */
.golive-note {
  background: #eefaf1; border: 1px solid #bfe3c9; border-radius: 12px;
  padding: 0.8rem 1rem; margin: 0.2rem 0 0.4rem;
  font-size: 0.9rem; color: #1f6b33;
}
.golive-note p { margin: 0; }
.golive-note strong { color: #145225; }
.golive-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0.9rem; }
.golive-chip {
  border: 2px solid #bfe3c9; background: #eefaf1; color: #1f6b33;
  border-radius: 999px; padding: 0.45rem 0.9rem; font-size: 0.85rem;
  font-weight: 600; font-family: inherit; cursor: pointer;
}
.golive-chip:hover { border-color: #2e9e50; }
.golive-chip.selected { background: #2e9e50; border-color: #2e9e50; color: #fff; }
.golive-chip.more { background: #fff; border-style: dashed; }
.golive-chip[disabled] { opacity: 0.6; cursor: default; }

.slot-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0.9rem; }
.slot-chip {
  border: 1.5px solid rgba(213, 42, 159, 0.35); background: #fff;
  border-radius: 999px; padding: 0.45rem 1rem; font-size: 0.85rem;
  cursor: pointer; color: #444;
}
.slot-chip:hover { border-color: var(--accent); }
.slot-chip.selected { background: var(--accent); border-color: var(--accent); color: #fff; }

/* single-column order pages (switch step: no summary sidebar) —
   centre the column instead of leaving it in the left grid track */
.order-grid.single { grid-template-columns: minmax(0, 46rem); justify-content: center; }