/* Wire 3 Buy Flow — v3 (app-LOCAL styles).
   ----------------------------------------------------------------------------
   v3 synthesizes the two prior explorations on the shared design system:
     • v1 (index.html) — the complete, working end-to-end flow: address gate +
       lead capture, details, install scheduling, review, real order submit.
     • v2 (index-v2.html) — the "speed is the spine" plan selector (peek-edge
       carousel + blue→green ramp + slider + live summary) and the Extras step
       with cart + collapsible FCC Broadband Facts.
   Everything brand-level (reset, tokens, header, footer, buttons, value-band)
   comes from the shared library — /shared/css/layouts/outward.css, loaded BEFORE
   this file. This file holds only what's genuinely specific to the buy flow.
   ============================================================================ */

/* Gate (check-availability hero + address form) styles are SHARED with the promo landing
   pages — single source of truth in wire3-shared, served at /shared/availability.css (the
   promo template links it directly; the buy flow pulls it in here). Moved out of buyflow's
   local public/ on 2026-06-21 (commit 7b3f58b); the import must point at the shared mount or
   the hero/gate render unstyled. Keep this @import before any rules. */
@import url("shared/availability.css");

/* ── Top bar: centered page title (tiered plan screen) ──────────
   The shared .site-header is a navy flex bar (logo left, actions right). Anchor a
   centered title absolutely so it floats dead-center without disturbing either end.
   Shown only on the tiered plan screen (toggled in buy.js); hidden where it would
   crowd the logo/phone on narrow widths. */
.site-header { position:relative; }
.header-plan-title { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  margin:0; color:#fff; font-family:var(--font-head); font-weight:800; font-size:1.14rem;
  letter-spacing:.01em; white-space:nowrap; pointer-events:none; }
@media (max-width:640px){ .header-plan-title { display:none; } }

/* Tiered plan page borrows the shared speed carousel but drops its range slider
   (page-only — the shared component still ships it). Cards + arrows drive selection. */
.sp-no-slider .sp-slider { display:none; }

/* Tiered-only: cards sit tight to the top bar (no on-page head; the carousel viewport
   keeps its own 40px badge clearance, so zero out the rest). */
.pe-screen.pe-tiered { padding-top:20px; }
.pe-tiered .sp-stage { margin-top:0; }

/* Tiered-only: wrap the 3 always-on benefits in a very subtle light-grey box
   (the shared .plan-feats row is boxless by default; scoped via .pe-tiered host).
   Sits BELOW the cards, above the continue block (mountShell featsBelow). */
.pe-tiered .plan-feats { width:fit-content; max-width:100%; margin:2px auto 0;
  padding:13px 28px; border:1px solid var(--grey-lt); border-radius:14px; background:var(--off-white);
  /* Emboss: top-left white highlight + bottom-right inset shadow, with a faint outer lift. */
  box-shadow:inset 1px 1px 1px rgba(255,255,255,.95), inset -1px -1px 2px rgba(13,34,64,.07), 0 1px 2px rgba(13,34,64,.05); }
@media (max-width:560px){ .pe-tiered .plan-feats { padding:12px 16px; } }
.pe-tiered .sp-summary { margin-top:28px; }   /* the feats box above it already provides air */

/* .hero / .hero-inner / .hero-title / .hero-sub live in availability.css (imported above).
   Buy-flow-only page seam below keeps the dark landing seamless under the value band: */
body.landing-dark { background:#0B1E3A; }
#landing .value-band { margin-top:0; }

/* Address gate (.leadform / .lf-field / .ac-* / .av-* / .lf-consent / .form-nudge / .addr-note)
   and the `shake` keyframe now live in availability.css (imported above), shared with the promo
   landing pages. Only the WIZARD's shake users stay local (the gate selectors moved out): */
.field input.shake, .plan-warn.shake { animation:shake .42s cubic-bezier(.36,.07,.19,.97) both; }

/* ── Page wrap + section heads ─────────────────────────────────── */
/* width:100% + min-width:0 are load-bearing: .v3-wrap is a flex item of <body>
   (display:flex column), so its default min-width:auto floors it at the carousel
   track's min-content width and blows the page out horizontally on mobile. An
   explicit width + min-width:0 lets it shrink so the overflow:hidden carousel clips. */
.v3-wrap { width:100%; max-width:1180px; min-width:0; margin:0 auto; padding:38px 20px 24px; }
.wizard.v3-wrap { max-width:1040px; padding-bottom:64px; }
.v3-head { text-align:center; margin:6px auto 30px; max-width:660px; animation:rise .5s var(--ease) both; }
.v3-head h1 { font-size:2.2em; line-height:1.1; margin:0 0 10px; color:var(--navy); }
.v3-head p { color:var(--grey-dk); font-size:1.05em; max-width:600px; margin:0 auto; }

/* ── Progress band (navy checkout chrome, from v2) ─────────────── */
.v3-progress { background:radial-gradient(125% 150% at 50% 0%, var(--navy) 0%, var(--navy-mid) 100%); border-top:1px solid rgba(255,255,255,.07); padding:0 20px; }
.v3-progress[hidden] { display:none; }
.v3-steps { position:relative; display:flex; align-items:flex-start; gap:0; max-width:560px; margin:0 auto; padding:15px 0; }
.v3-steps .step { flex:1; text-align:center; position:relative; color:rgba(255,255,255,.5); font-size:.78em; font-weight:600; }
.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,.35); color:#fff; transition:all .2s; }
.v3-steps .step .dot svg { width:11px; height:11px; }
.v3-steps .step.active .dot { background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.16); }
.v3-steps .step.done .dot { background:var(--blue); border-color:var(--blue); color:#fff; }
.v3-steps .step.active { color:#fff; font-weight:700; }
.v3-steps .step.done { color:rgba(255,255,255,.85); cursor:pointer; }
.v3-steps .step.finish .dot { width:23px; height:23px; margin-top:-1px; background:none; border:none; box-shadow:none; }
.v3-steps .step.finish .dot svg { width:19px; height:19px; }
.v3-steps .step.finish:not(.active) .dot { opacity:.55; }
.v3-steps .step.finish.active .dot { filter:drop-shadow(0 3px 7px rgba(46,144,224,.5)); }
/* One continuous base track behind every circle (no per-segment junction breaks). */
.v3-steps::before { content:''; position:absolute; top:25px; left:10%; right:10%; height:3px; background:#3A5374; z-index:0; border-radius:2px; }
/* Blue overlay marks completed connectors, drawn over the base track. */
.v3-steps .step.done::after { content:''; position:absolute; top:11px; left:50%; width:100%; height:3px; background:var(--blue); z-index:0; border-radius:2px; }
.v3-steps .step:last-child::after { display:none; }
@media (max-width:560px){ .v3-steps .step .lbl { display:none; } }

/* Live summary bar on the Plan screen — the whole bar is the continue affordance. */
.sp-summary { max-width:660px; margin:46px auto 0; background:var(--navy); color:#fff; border-radius:var(--radius);
  padding:18px 14px 18px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; box-shadow:var(--shadow-lg);
  cursor:pointer; transition:transform .14s var(--ease), box-shadow .2s; }
.sp-summary:hover { transform:translateY(-2px); box-shadow:0 14px 46px rgba(13,34,64,.30); }
.sp-summary:hover .btn-green { background:var(--green-dk); color:#fff; }
.sp-sum-main b { font-family:var(--font-head); font-weight:800; font-size:1.2em; display:block; }
.sp-sum-main span { display:block; color:var(--grey-mid); font-size:.84em; margin-top:3px; }
.sp-summary .btn { white-space:nowrap; }
.sp-summary .btn svg { width:18px; height:18px; transition:transform .15s; }
.sp-summary .btn:hover svg { transform:translateX(3px); }

/* Plan-pick nudge — the old one-line .addr-note was styled for the dark landing hero
   (#ff9a9a text) and all but vanished on the light plan screen. This is a full callout
   band under the Continue bar: tinted, bordered, icon + bold copy, shaken on each
   blocked Continue. Hidden until needed; picking a plan re-hides it. */
.plan-warn { display:flex; align-items:center; justify-content:center; gap:10px;
  max-width:660px; margin:14px auto 0; padding:13px 20px; border-radius:12px;
  background:#FCE9E7; border:1.5px solid #E25B4E; color:#B3261E;
  font-weight:700; font-size:.98em; box-shadow:0 6px 18px rgba(226,91,78,.14); }
.plan-warn[hidden] { display:none; }
.plan-warn svg { width:20px; height:20px; flex:none; }
@media (max-width:480px){ .sp-summary{ flex-direction:column; align-items:stretch; text-align:center; } .sp-summary .btn{ width:100%; } }

/* ── Wizard grid: panel + persistent cart sidebar (from v1) ────── */
.wizard[hidden] { display:none; }
.wzgrid { display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start; }
.panel { background:var(--white); border:1px solid var(--grey-lt); border-radius:var(--radius); padding:28px; box-shadow:0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06); }
.panel h3 { font-size:1.2em; margin-bottom:6px; color:var(--navy); }
.panel h3 .optional { font-family:var(--font-body); font-weight:600; font-size:.58em; text-transform:uppercase; letter-spacing:.6px; color:var(--grey-mid); margin-left:8px; vertical-align:middle; }
.panel .hint { color:var(--grey-dk); margin-bottom:20px; font-size:.95em; }
.panel-sep { height:1px; background:var(--grey-lt); margin:26px 0 22px; }
.wznav { display:flex; justify-content:space-between; gap:12px; margin-top:24px; }
.wznav .btn-ghost { flex:0 0 auto; }
.wznav .btn-primary, .wznav .btn-green { flex:1; }
/* Subtle in-flow "save & finish later" link under the wizard nav. */
.wz-save { display:block; width:100%; margin-top:14px; padding:6px; background:none; border:0;
  cursor:pointer; color:var(--grey-dk); font:inherit; font-weight:600; font-size:.92em;
  text-decoration:underline; text-underline-offset:3px; }
.wz-save:hover { color:var(--navy); }

/* ── Extras rows (from v2) ─────────────────────────────────────── */
.extras-list { display:flex; flex-direction:column; gap:12px; margin-top:4px; }
.xrow { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 16px; border:1.5px solid var(--grey-lt);
  border-radius:var(--radius-sm); cursor:pointer; transition:border-color .15s, background .15s; }
.xrow:hover:not(.is-included) { border-color:var(--navy-lite); }
.xrow.is-added { border-color:var(--navy); background:#F6FAFF; }
.xrow.is-included { background:var(--off-white); cursor:default; }
.xrow-main { flex:1; min-width:0; }
.xrow-name { display:flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:700; color:var(--navy); font-size:1em; }
.xrow.is-included .xrow-name { color:var(--grey-dk); }
.xrow-desc { color:var(--grey-dk); font-size:.86em; margin-top:3px; line-height:1.4; }
.xrow.is-included .xrow-desc { color:var(--grey-mid); }
.xtag { font-family:var(--font-head); font-weight:700; font-size:.6em; letter-spacing:.05em; text-transform:uppercase;
  color:var(--green-dk); background:rgba(125,196,0,.15); padding:3px 8px; border-radius:20px; }
.xrow-side { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.xprice { font-family:var(--font-head); font-weight:700; color:var(--navy); white-space:nowrap; font-size:.95em; }
.xprice.free { color:var(--green-dk); }
.xcheck { width:24px; height:24px; border-radius:7px; border:2px solid var(--grey-lt); background:#fff; color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; }
.xcheck svg { width:14px; height:14px; opacity:0; transition:opacity .15s; }
.xrow.is-added .xcheck { background:var(--navy); border-color:var(--navy); }
.xrow.is-included .xcheck { background:var(--grey-mid); border-color:var(--grey-mid); }
.xrow.is-added .xcheck svg, .xrow.is-included .xcheck svg { opacity:1; }

/* ── Details form (from v1) ────────────────────────────────────── */
.field { margin-bottom:16px; }
.field label { display:block; font-weight:700; font-size:.78em; letter-spacing:.5px; text-transform:uppercase; color:var(--grey-dk); margin-bottom:7px; }
.field input, .field select { width:100%; border:1.5px solid #d1d5db; border-radius:8px; background:var(--white); color:var(--navy); font:15px var(--font-body); padding:13px 14px; outline:none; transition:border-color .15s, box-shadow .15s; }
.field input:focus { border-color:var(--navy-mid); box-shadow:0 0 0 3px rgba(13,34,64,.08); }
.field input.bad { border-color:var(--red); box-shadow:0 0 0 3px rgba(220,38,38,.12); }
.field.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field.two.addr { grid-template-columns:2.4fr 1fr; }   /* service address wide, unit narrow */

/* ── Details: terms acceptance box + policy modals ── */
.terms-box { border:1.5px solid var(--grey-lt); border-radius:10px; padding:14px 16px; background:var(--off-white); }
.terms-box.bad { border-color:var(--red); box-shadow:0 0 0 3px rgba(220,38,38,.12); }
.terms-box.shake { animation:shake .42s cubic-bezier(.36,.07,.19,.97) both; }
.terms-links { display:flex; flex-wrap:wrap; gap:6px 22px; margin-bottom:11px; }
.terms-links a { font-weight:700; color:var(--blue, #2E90E0); text-decoration:none; border-bottom:1.5px solid rgba(46,144,224,.35); padding-bottom:1px; }
.terms-links a:hover { border-bottom-color:currentColor; }
.terms-accept { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.terms-accept input { width:17px; height:17px; margin:1px 0 0; flex-shrink:0; accent-color:var(--green); cursor:pointer; }
.terms-accept span { font-size:.9em; line-height:1.45; color:var(--navy); }
.terms-accept .req { color:var(--red); margin-left:2px; }
/* The dialog itself doesn't scroll — only .policy-body does — so the title and the
   close (×) stay visible at any scroll position. */
.policy-dialog { max-width:780px; display:flex; flex-direction:column; overflow:hidden; }
.policy-dialog h2 { flex-shrink:0; margin:0 36px 14px 0; color:var(--navy); font-size:1.4em; }
.policy-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:10px; font-size:.92em; line-height:1.6; color:var(--grey-dk); }
.policy-body h1, .policy-body h2, .policy-body h3, .policy-body h4 { color:var(--navy); line-height:1.25; margin:1.4em 0 .5em; }
.policy-body h1 { font-size:1.25em; } .policy-body h2 { font-size:1.15em; } .policy-body h3 { font-size:1.04em; }
.policy-body p, .policy-body li { margin:0 0 .8em; }
.policy-body ul, .policy-body ol { padding-left:22px; }
.policy-body a { color:var(--blue, #2E90E0); }
.policy-body table { width:100%; border-collapse:collapse; font-size:.95em; }
.policy-body td, .policy-body th { border:1px solid var(--grey-lt); padding:6px 9px; text-align:left; }
.policy-loading { color:var(--grey-mid); }
.sublabel { font-weight:700; font-size:.78em; letter-spacing:.5px; text-transform:uppercase; color:var(--grey-dk); margin:0 0 7px; }

/* ── Install slots (from v1) ───────────────────────────────────── */
.time-slots { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.time-slot { border:1.5px solid var(--grey-lt); border-radius:10px; padding:14px 12px; text-align:center; cursor:pointer; transition:all .15s; }
.time-slot:hover { border-color:var(--navy-mid); }
.time-slot.selected { border-color:var(--blue); background:rgba(46,144,224,.06); }
.time-slot b { font-family:var(--font-head); color:var(--navy); display:block; font-size:.95em; }
.time-slot small { color:var(--grey-dk); }

/* ── Review rows (from v1) ─────────────────────────────────────── */
.rev-row { display:flex; gap:12px; align-items:flex-start; border:1.5px solid var(--grey-lt); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:10px; }
.rev-row .rev-k { font-family:var(--font-head); font-weight:700; color:var(--navy); font-size:.82em; text-transform:uppercase; letter-spacing:.4px; min-width:88px; }
.rev-row .rev-v { color:var(--grey-dk); font-size:.95em; flex:1; }
.rev-row .rev-edit { background:none; border:0; color:var(--blue); font-family:var(--font-head); font-weight:700; font-size:.85em; cursor:pointer; flex-shrink:0; }
.rev-row .rev-edit:hover { text-decoration:underline; }

/* ── Cart sidebar (from v1 .summary) + Broadband Facts (from v2) ─ */
.summary { background:var(--white); border:1px solid var(--grey-lt); border-radius:var(--radius); padding:0 20px 20px; box-shadow:0 1px 3px rgba(0,0,0,.06); position:sticky; top:88px; overflow:hidden; }
.summary .hero-band { background:linear-gradient(135deg,var(--navy) 0%,#1C3F6E 100%); border-radius:0 0 10px 10px; padding:16px 18px; margin:0 -20px 16px; color:#fff; }
.summary .hero-band .lbl { font-size:.62em; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,.6); }
.summary .hero-band .pname { font-family:var(--font-head); font-size:1.5em; font-weight:800; letter-spacing:-.5px; margin-top:2px; }
.summary .hero-band .ptier { font-size:.82em; color:rgba(255,255,255,.75); font-weight:600; margin-top:2px; }
.summary h4 { font-size:.68em; text-transform:uppercase; letter-spacing:.08em; color:var(--grey-mid); margin-bottom:12px; font-weight:700; }
.summary .row { display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; font-size:.92em; }
.summary .row .v { font-family:var(--font-head); font-weight:700; color:var(--navy); }
.summary .row .k { color:var(--grey-dk); }
.summary .divider { border-top:1px solid var(--grey-lt); margin:8px 0; }
.summary .total { display:flex; justify-content:space-between; font-family:var(--font-head); font-size:1.15em; font-weight:800; }
.summary .total .v { color:var(--green-dk); }
.summary .note { font-size:.78em; color:var(--grey-mid); margin-top:10px; line-height:1.5; }
.summary .empty { color:var(--grey-mid); font-size:.9em; padding:8px 0; }

/* FCC Broadband Facts label — collapsed by default; header + Monthly Price stay
   visible at point of sale, detail expands on click. */
.bbl { background:#fff; border:2px solid #000; border-radius:4px; font-family:Arial,Helvetica,sans-serif; color:#000; margin:14px 0 0; }
.bbl-header { border-bottom:5px solid #000; padding:9px 11px; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; transition:background .15s; }
.bbl-header:hover { background:rgba(0,0,0,.02); }
.bbl-header-stack { flex:1; min-width:0; }
.bbl-title { font-weight:900; font-size:15px; letter-spacing:-.3px; line-height:1.1; }
.bbl-plan { font-weight:600; font-size:10px; margin-top:3px; line-height:1.3; }
.bbl-chevron { flex-shrink:0; transition:transform .2s; }
.bbl-section { padding:7px 11px; border-bottom:1px solid #000; }
.bbl-section-last { border-bottom:none; }
.bbl-section-label { font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.5px; }
.bbl-section-price { padding:9px 11px; }
.bbl-price-amt { font-weight:900; font-size:21px; line-height:1; margin-top:3px; }
.bbl-price-note { font-size:10px; color:#333; margin-top:5px; line-height:1.4; }
.bbl-row { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:3px 0; font-size:10.5px; }
.bbl-row-head { font-weight:800; font-size:11px; padding:4px 0; border-bottom:1px solid #000; margin-bottom:4px; text-transform:uppercase; letter-spacing:.3px; }
.bbl-row-sub { font-weight:700; font-size:9px; text-transform:uppercase; letter-spacing:.4px; color:#444; margin-top:6px; margin-bottom:2px; }
.bbl-row-item > span:first-child { flex:1; min-width:0; }
.bbl-row-item > span:last-child { font-weight:700; flex-shrink:0; }
.bbl-row-note { font-size:9.5px; color:#333; line-height:1.5; margin-top:4px; }
.bbl-row-note a { color:#0066CC; text-decoration:underline; }
.bbl-fcc-mark { font-size:9px; color:#666; margin-top:8px; font-style:italic; }
/* Link to the verbatim UGPS-supplied FCC Broadband Facts PDF (authoritative copy). */
.bbl-pdf-link { margin-top:8px; }
.bbl-pdf-link a { font-size:10px; font-weight:700; color:#0066CC; text-decoration:none; }
.bbl-pdf-link a:hover { text-decoration:underline; }

.cart-continue { width:100%; margin-top:18px; }
.cart-continue svg { width:18px; height:18px; flex-shrink:0; transition:transform .15s; }
.cart-continue:hover svg { transform:translateX(3px); }

/* ── Success (from v1) ─────────────────────────────────────────── */
.success { text-align:center; padding:8px 0; }
.success .ic { width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--green),#a3e635); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:34px; }
.success h3 { font-size:1.5em; color:var(--navy); margin-bottom:8px; }
.success p { color:var(--grey-dk); margin-bottom:20px; max-width:460px; margin-left:auto; margin-right:auto; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width:820px){
  .wzgrid { grid-template-columns:1fr; }
  .summary { position:static; }
  .time-slots { grid-template-columns:1fr; }
}
@media (max-width:560px){
  .v3-wrap { padding:28px 16px 48px; }
  .v3-head { margin-bottom:24px; }
  .v3-head h1 { font-size:1.72em; }
  .v3-head p { font-size:.98em; }
  .sp-summary { margin-top:34px; padding:16px 16px; }
  .field.two { grid-template-columns:1fr; }
  .pe-extras, .pe-tiles { max-width:none; }
}

/* ════════ Plan + Extras combined screen (split-test slot) ════════
   The add-ons now sit inline beneath the plan selector on the entry screen.
   Reuses .extras-list / .xrow from the old Extras panel; only the section
   header + spacing + Variant B's list layout are new. */

.pe-extras { max-width:660px; margin:44px auto 0; }
.pe-extras:empty { margin:0; }
.pe-extras-head { text-align:center; margin:0 0 18px; }
.pe-extras-head h2 { font-family:var(--font-head); font-weight:800; font-size:1.4em; color:var(--navy); margin:0 0 6px; }
.pe-extras-head p { color:var(--grey-dk); font-size:.96em; max-width:540px; margin:0 auto; line-height:1.4; }

/* Variant "tiles" — horizontal radio-selected plan rows (the v1 layout, on v3 tokens) */
.pe-tiles { max-width:680px; margin:8px auto 0; display:flex; flex-direction:column; gap:12px; }
.pe-tile { display:flex; align-items:center; gap:16px; border:2px solid var(--grey-lt); border-radius:14px; padding:18px 20px;
  background:#fff; cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s; }
.pe-tile:hover { border-color:var(--navy-mid); }
.pe-tile.selected { border-color:var(--blue); background:#F6FAFF; box-shadow:0 6px 20px rgba(13,34,64,.07); }
.pe-tile-radio { width:22px; height:22px; border-radius:50%; border:2px solid var(--grey-lt); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:border-color .15s, background .15s; }
.pe-tile.selected .pe-tile-radio { border-color:var(--blue); background:var(--blue); }
.pe-tile-radio i { width:9px; height:9px; border-radius:50%; background:#fff; opacity:0; transition:opacity .15s; }
.pe-tile.selected .pe-tile-radio i { opacity:1; }
.pe-tile-main { flex:1; min-width:0; }
.pe-tile-line { display:flex; align-items:center; flex-wrap:wrap; gap:4px 0; }
.pe-tile-name { font-family:var(--font-head); font-weight:800; color:var(--navy); font-size:1.12em; }
.pe-tile-badge { display:inline-block; background:var(--navy); color:#fff; font-family:var(--font-head); font-size:.64em; font-weight:800; letter-spacing:.02em; padding:3px 9px; border-radius:6px; margin-left:9px; }
.pe-tile-meta { font-size:.86em; color:var(--grey-dk); margin-top:5px; }
.pe-tile-price { font-family:var(--font-head); font-size:1.5em; font-weight:800; color:var(--navy); flex-shrink:0; white-space:nowrap; }
.pe-tile-price span { font-size:.46em; color:var(--grey-mid); font-weight:700; }
.pe-tile-was { font-size:.5em; color:var(--grey-mid); text-decoration:line-through; font-weight:700; margin-right:7px; }

/* Variant "static" — the speed cards shown all at once as an equal comparison grid.
   No carousel scale/centering (that left a lopsided row): equal columns, equal heights,
   the includes list shares a baseline, and selection is a ring + small lift (no reflow). */
.pe-static { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; align-items:stretch; margin:14px auto 0; max-width:1100px; }
.pe-static .sp-card { display:flex; flex-direction:column; width:100%; min-width:0; cursor:pointer;
  opacity:1; transform:none;                              /* undo the carousel resting fade/shrink */
  transition:border-color .15s, box-shadow .15s, transform .15s, opacity .15s; }
.pe-static .sp-card:hover:not(.is-selected) { opacity:1; border-color:var(--navy-mid); transform:translateY(-3px); box-shadow:0 10px 26px rgba(13,34,64,.12); }
.pe-static .sp-card.is-selected { transform:translateY(-3px); box-shadow:0 16px 40px rgba(13,34,64,.16); }   /* blue border + wash come from the shared .is-selected */
@media (max-width:900px){ .pe-static { grid-template-columns:repeat(2, 1fr); max-width:580px; } }
@media (max-width:520px){ .pe-static { grid-template-columns:1fr; max-width:360px; } }

/* ════════ Service tiers on the Install step (Basic Connect bar + Total Connect duo) ════════
   Forced choice — nothing is preselected. Basic Connect is a full-width horizontal
   "included" bar; Total Connect / Total Connect MAX compare side-by-side beneath it, with
   Total Connect carrying the plan-page "Most popular" gradient pill + ring. The running
   total + Broadband Facts live in the cart sidebar. */
.svc-basic { display:flex; align-items:center; gap:18px; margin-top:14px; border:2px solid var(--grey-lt); border-radius:14px;
  padding:15px 18px; background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s; }
.svc-basic:hover:not(.selected) { border-color:var(--navy-mid); transform:translateY(-2px); box-shadow:0 8px 22px rgba(13,34,64,.10); }
.svc-basic.selected { border-color:var(--blue); background:#F6FAFF; box-shadow:0 12px 30px rgba(13,34,64,.14); }
.svc-basic-main { flex:1; min-width:0; }
.svc-basic .svc-desc { margin-top:4px; }
.svc-basic .svc-pick { flex-shrink:0; }
.svc-incl { display:inline-block; vertical-align:2px; margin-left:8px; padding:3px 10px; border-radius:999px;
  background:rgba(125,196,0,.16); color:var(--green-dk); font-size:.6em; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }

/* Informational free-streaming (MyBundle) line on the Extras step — not selectable, reads as
   "included with your plan". */
.svc-mybundle { display:flex; align-items:center; gap:16px; margin-top:14px; padding:15px 18px;
  border:1.5px solid rgba(125,196,0,.4); border-radius:14px; background:linear-gradient(180deg,#F8FCEF,#F2F9E4); }
.svc-mybundle-ic { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:11px; background:#fff; border:1px solid rgba(125,196,0,.4); color:var(--green-dk); }
.svc-mybundle-ic svg { width:22px; height:22px; }
.svc-mybundle-main { flex:1; min-width:0; }
.svc-mybundle .svc-desc { margin-top:4px; }

.svc-duo { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch; margin:18px 0 0; }
.svc-card { position:relative; display:flex; flex-direction:column; border:2px solid var(--grey-lt); border-radius:14px; padding:20px 18px 18px;
  background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s; }
.svc-card:hover:not(.selected) { border-color:var(--navy-mid); transform:translateY(-2px); box-shadow:0 8px 22px rgba(13,34,64,.10); }
.svc-card.selected { border-color:var(--blue); background:#F6FAFF; box-shadow:0 12px 30px rgba(13,34,64,.14); }
/* Most-popular treatment lifted from the plan page: gradient pill badge + 2px gradient ring
   (mask trick, as speed-carousel's .sp-card.is-popular). The ring yields to the hover border
   and to the BLUE selected border (the one selection signal across the flow). */
.svc-card.is-popular { border-color:transparent; box-shadow:0 10px 28px rgba(13,34,64,.12); }
.svc-card.is-popular::before { content:""; position:absolute; inset:-2px; border-radius:14px; padding:2px; pointer-events:none;
  background:linear-gradient(135deg,var(--green) 0%,var(--blue) 100%); transition:opacity .15s;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude; }
.svc-card.is-popular:hover:not(.selected) { border-color:var(--navy-mid); }
.svc-card.is-popular:hover:not(.selected)::before, .svc-card.is-popular.selected::before { opacity:0; }
.svc-card.is-popular.selected { border-color:var(--blue); }
.svc-badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); white-space:nowrap; z-index:2;
  background:linear-gradient(135deg,var(--green) 0%,var(--blue) 100%); color:#fff; font-family:var(--font-head); font-weight:800;
  font-size:.62em; letter-spacing:.08em; text-transform:uppercase; padding:5px 14px; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.28); }
.svc-name { font-family:var(--font-head); font-weight:800; color:var(--navy); font-size:1.12em; }
.svc-value { color:var(--green-dk); font-family:var(--font-head); font-weight:700; font-size:.92em; }
.svc-desc { color:var(--grey-dk); font-size:.88em; line-height:1.45; margin-top:8px; }
.svc-feats { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.svc-feats li { display:flex; align-items:flex-start; gap:9px; font-size:.86em; color:var(--navy); line-height:1.4; }
.svc-feats li svg { width:15px; height:15px; color:var(--green-dk); flex-shrink:0; margin-top:2px; }
/* Value + price row pinned above the Select affordance; price echoes the plan-card scale. */
.svc-buy { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:auto; padding-top:16px; }
.svc-rate { font-family:var(--font-head); font-weight:800; color:var(--navy); font-size:1.7em; line-height:1; }
.svc-rate small { font-size:.5em; font-weight:700; color:var(--grey-dk); }
/* Select / Selected affordance — same idiom as the plan card's button. */
.svc-pick { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:12px; padding:10px 18px;
  border:1.5px solid var(--grey-lt); border-radius:999px; font-family:var(--font-head); font-weight:800; font-size:.88em;
  color:var(--navy); transition:background .15s, border-color .15s, color .15s; }
.svc-basic .svc-pick { margin-top:0; }
.svc-card:hover .svc-pick, .svc-basic:hover .svc-pick { border-color:var(--navy-mid); }
.svc-pick svg { width:14px; height:14px; }
.svc-pick-on { display:none; align-items:center; gap:7px; }
.selected .svc-pick { background:var(--green); border-color:var(--green); color:var(--navy); box-shadow:0 6px 16px rgba(125,196,0,.32); }
.selected .svc-pick-off { display:none; }
.selected .svc-pick-on { display:inline-flex; }
@media (max-width:760px){
  .svc-duo { grid-template-columns:1fr; }
  .svc-basic { flex-direction:column; align-items:stretch; gap:12px; }
}

/* ════════ DEMO CONTROLS (DEMO_MODE only — not part of the shipped audience build) ════════ */
.demo-dock { position:fixed; right:18px; bottom:18px; z-index:9999; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.demo-fab { width:52px; height:52px; border-radius:50%; border:none; background:var(--navy); color:var(--green); box-shadow:0 8px 28px rgba(0,0,0,.35); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .15s, box-shadow .15s; }
.demo-fab:hover { transform:translateY(-2px); box-shadow:0 12px 34px rgba(0,0,0,.45); }
.demo-fab.open { background:var(--green); color:var(--navy); }
.demo-fab svg { width:24px; height:24px; }
.demo-panel { width:264px; background:var(--navy); color:#fff; border-radius:14px; padding:16px; box-shadow:0 18px 50px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.08); }
.demo-panel[hidden] { display:none; }
.demo-h { font-family:var(--font-head); font-weight:800; font-size:.96em; margin-bottom:15px; display:flex; flex-direction:column; }
.demo-h span { font-family:var(--font-body); font-weight:700; font-size:.66em; color:var(--green); letter-spacing:.06em; text-transform:uppercase; margin-top:4px; }
.demo-sec { margin-bottom:15px; }
.demo-lbl { font-size:.66em; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:8px; }
.demo-btns { display:flex; flex-direction:column; gap:6px; }
.demo-b { text-align:left; padding:9px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#fff; font:600 .85em var(--font-body); cursor:pointer; transition:background .12s, border-color .12s; }
.demo-b:hover { background:rgba(255,255,255,.12); }
.demo-b:disabled { opacity:.5; cursor:wait; }
.demo-b.on { background:var(--green); border-color:var(--green); color:var(--navy); font-weight:800; }
.demo-restart { width:100%; padding:9px; border-radius:8px; border:1px solid rgba(255,255,255,.14); background:transparent; color:rgba(255,255,255,.82); font:600 .82em var(--font-body); cursor:pointer; transition:background .12s; }
.demo-restart:hover { background:rgba(255,255,255,.08); }

/* ════════ PAYMENT — folded into the Review/Finish step (no extra wizard step).
   UX mock only; IT replaces #cbFields with Chargebee.js hosted fields (docs/PAYMENT_HANDOFF.md). ════════ */
.pay-today { display:flex; flex-direction:column; gap:8px; border:1.5px solid var(--green); border-radius:var(--radius-sm);
  background:linear-gradient(180deg, rgba(125,196,0,.12), rgba(125,196,0,.04)); padding:15px 18px; margin-top:22px; }
.pay-today-row { display:flex; align-items:baseline; justify-content:space-between; }
.pay-today-row span:first-child { font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:.5px; font-size:.78em; color:var(--navy); }
.pay-today-amt { font-family:var(--font-head); font-weight:800; font-size:1.5em; color:var(--navy); }
.pay-today-note { font-size:.9em; line-height:1.5; color:var(--grey-dk); }
.pay-card { margin-top:2px; }
.pay-cardline { position:relative; }
.pay-cardline input { padding-right:86px; }
.pay-secure { position:absolute; right:12px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; gap:5px;
  font-size:.72em; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--grey-mid); pointer-events:none; }
.pay-secure svg { width:13px; height:13px; }
.pay-billaddr[hidden] { display:none; }
.pay-auth { font-size:.8em; line-height:1.5; color:var(--grey-mid); margin:12px 0 0; }

/* Richer order confirmation (the post-order success state). */
.success-meta { max-width:430px; margin:0 auto 18px; text-align:left; border:1.5px solid var(--grey-lt); border-radius:var(--radius-sm); overflow:hidden; }
.success-meta .sm-row { display:flex; justify-content:space-between; gap:12px; padding:11px 16px; border-bottom:1px solid var(--grey-lt); font-size:.92em; }
.success-meta .sm-row:last-child { border-bottom:0; }
.success-meta .sm-k { font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.4px; font-size:.84em; color:var(--navy); }
.success-meta .sm-v { color:var(--grey-dk); text-align:right; }
.success-next { font-size:.92em; }