/* ==== tokens.css ==== */
/* ============================================================
   Design tokens — Spectrum Authorized Retailer
   Palette sampled from the June 4, 2026 Spectrum product deck:
   navy #002241 / #001849, action blue ~#0061FF, signature
   blue→green gradient bar (#0061FF → #00B5FF → #0AC34F).
   Type: Figtree (Spectrum Sans is proprietary; closest free face).
   ============================================================ */
:root {
    /* Brand */
    --blue: #0061ff;
    --blue-dark: #0049c4;
    --blue-bright: #2e8cff;
    --cyan: #00b5ff;
    --green: #0ac34f;
    --navy: #002241;
    --navy-800: #00305c;
    --navy-900: #00182f;
    --navy-950: #001226;
    --grad: linear-gradient(90deg, #0061ff 0%, #00b5ff 52%, #0ac34f 100%);
    --grad-soft: linear-gradient(135deg, rgba(0, 97, 255, .14), rgba(0, 181, 255, .10) 50%, rgba(10, 195, 79, .12));

    /* Light surface system */
    --bg: #ffffff;
    --fg: #0e1b2c;
    --card: #ffffff;
    --muted: #f4f8fc;
    --muted-2: #eaf2fa;
    --muted-fg: #51647b;
    --border: #dfe8f2;
    --sky: #e8f1ff;

    /* Dark surface system (hero, final CTA, footer) */
    --dk-bg: var(--navy-950);
    --dk-card: rgba(255, 255, 255, .055);
    --dk-border: rgba(255, 255, 255, .14);
    --dk-fg: #f2f7ff;
    --dk-muted: #9fb3c8;

    /* Effects */
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --shadow-sm: 0 4px 14px rgba(0, 24, 47, .07);
    --shadow: 0 22px 44px rgba(0, 24, 47, .12);
    --shadow-blue: 0 18px 42px rgba(0, 97, 255, .30);
    --ring: 0 0 0 4px rgba(0, 181, 255, .35);

    /* Layout */
    --container: 1200px;
    --gutter: clamp(16px, 4vw, 32px);
    --nav-h: 76px;
    --offer-h: 38px;

    /* Type */
    --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Motion */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --t-fast: .2s;
    --t: .3s;
}

/* ==== base.css ==== */
/* ============================================================
   Base — reset, typography, buttons, shared atoms
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; color: inherit; }
p { margin: 0 0 1em; }

.spc-container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.spc-h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); }
.spc-h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); color: var(--navy); }
.spc-h3 { font-size: 1.25rem; }
.spc-lede { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--muted-fg); max-width: 640px; margin-left: auto; margin-right: auto; }

.spc-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--blue); margin: 0 0 14px;
}
.spc-eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--grad); }
.spc-eyebrow--light { color: var(--cyan); }

.spc-grad-text {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Buttons ---- */
.spc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 26px; border: 0; border-radius: var(--radius-pill);
    font-family: var(--font); font-size: 1rem; font-weight: 700; line-height: 1; white-space: nowrap;
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t) var(--ease-out), background var(--t-fast), color var(--t-fast);
    position: relative; overflow: hidden;
}
.spc-btn:active { transform: scale(.97); }
.spc-btn--blue { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.spc-btn--blue:hover { background: var(--blue-dark); color: #fff; transform: translateY(-2px); }
.spc-btn--gradient { background: var(--grad); background-size: 160% 100%; background-position: 0 0; color: #fff; box-shadow: var(--shadow-blue); }
.spc-btn--gradient:hover { background-position: 90% 0; color: #fff; transform: translateY(-2px); }
.spc-btn--dark { background: var(--navy); color: #fff; }
.spc-btn--dark:hover { background: var(--navy-800); color: #fff; transform: translateY(-2px); }
.spc-btn--ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--border); }
.spc-btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--blue); color: var(--blue); }
.spc-btn--ghostlight { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1.5px var(--dk-border); }
.spc-btn--ghostlight:hover { background: rgba(255,255,255,.16); color: #fff; }
.spc-btn--block { width: 100%; }
.spc-btn--lg { padding: 16px 32px; font-size: 1.05rem; }
.spc-btn--xl { padding: 20px 44px; font-size: 1.18rem; }

/* Sweep shine on hover (the 21st.dev-style sheen, zero idle cost) */
.spc-btn--gradient::after, .spc-btn--blue::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-18deg); transition: left .55s var(--ease-out); pointer-events: none;
}
.spc-btn--gradient:hover::after, .spc-btn--blue:hover::after { left: 130%; }

/* Pulsing ring for the final CTA */
.spc-btn__pulse {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 0 rgba(0, 181, 255, .55);
    animation: spcPulse 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes spcPulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 181, 255, .55); }
    70% { box-shadow: 0 0 0 22px rgba(0, 181, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 181, 255, 0); }
}

/* ---- Section scaffolding ---- */
.spc-section { padding: clamp(64px, 9vw, 110px) 0; position: relative; }
.spc-section--muted { background: var(--muted); }
.spc-section--dark { background: var(--dk-bg); color: var(--dk-fg); }
.spc-section--dark .spc-h2 { color: #fff; }
.spc-section--dark .spc-lede { color: var(--dk-muted); }
.spc-section__head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.spc-section__head.is-center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---- Scroll progress ---- */
.spc-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200; pointer-events: none; }
.spc-progress span { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; }

/* ---- Fine print + mandatory disclaimers ---- */
.spc-fine { font-size: .8rem; color: var(--muted-fg); line-height: 1.55; }
.spc-required-note { font-size: 1.02rem; font-weight: 700; color: var(--navy); }
/* The deck requires this note to be conspicuous — keep it light on EVERY dark surface. */
.spc-section--dark .spc-required-note,
.spc-phero .spc-required-note,
.spc-hero .spc-required-note,
.spc-band .spc-required-note { color: #dce9ff; }

.spc-disclaimers { border-top: 1px solid rgba(255,255,255,.12); margin-top: 38px; padding-top: 26px; }
.spc-disclaimers__title { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: #b9c9dc; margin-bottom: 14px; }
.spc-disclaimers__item { font-size: .76rem; line-height: 1.6; color: #93a7bd; margin-bottom: 10px; }

/* ---- Cookie consent ---- */
.spc-consent {
    position: fixed; right: 18px; bottom: 18px; z-index: 1300; max-width: 420px;
    opacity: 0; transform: translateY(16px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.spc-consent.is-in { opacity: 1; transform: none; }
.spc-consent__card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: 22px;
}
.spc-consent__card::before { content: ""; display: block; height: 4px; border-radius: 3px; background: var(--grad); margin-bottom: 14px; }
.spc-consent__title { font-size: 1.05rem; margin-bottom: 6px; color: var(--navy); }
.spc-consent__txt { font-size: .86rem; color: var(--muted-fg); margin-bottom: 14px; }
.spc-consent__row { display: flex; gap: 10px; flex-wrap: wrap; }
.spc-consent__row .spc-btn { padding: 11px 20px; font-size: .9rem; }
.spc-consent__row .spc-btn--ghostlight { color: var(--navy); background: var(--muted); box-shadow: inset 0 0 0 1.5px var(--border); }
.spc-consent__row .spc-btn--ghostlight:hover { color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }

/* ---- Mobile sticky phone bar ---- */
.spc-phonebar {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1100;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--grad); color: #fff; font-weight: 700; font-size: 1rem;
    padding: 15px 18px calc(15px + env(safe-area-inset-bottom, 0px)); border-radius: var(--radius-pill);
    box-shadow: 0 14px 34px rgba(0, 49, 130, .45);
    transform: translateY(130%); transition: transform .4s var(--ease-out);
}
.spc-phonebar.is-on { transform: none; animation: spcBarPulse 8s ease-in-out infinite 2s; }
.spc-phonebar svg { width: 19px; height: 19px; }
.spc-phonebar:hover { color: #fff; }
@keyframes spcBarPulse { 0%, 94%, 100% { transform: scale(1); } 97% { transform: scale(1.02); } }
@media (min-width: 1024px) { .spc-phonebar { display: none; } }

/* ==== animations.css ==== */
/* ============================================================
   Animations — shared motion utilities
   (.spc-reveal initial state lives in the critical inline CSS,
   gated on html.spc-js so no-JS visitors always see content.)
   ============================================================ */

/* Revealed state — the permanent resting state after any entrance.
   (The hide rule in the critical CSS excludes .is-in / .is-done.) */
.spc-reveal.is-in { opacity: 1; transform: none; }
.spc-split.is-done .spc-split__w { transform: none; }

/* Split-text heading masks */
.spc-split .spc-split__m { display: inline-block; overflow: hidden; vertical-align: bottom; }
.spc-split .spc-split__w { display: inline-block; will-change: transform; }
.spc-split .spc-split__w.is-hl {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.spc-split.is-done .spc-split__w { will-change: auto; }

/* Hover lift for cards */
.spc-lift { transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out); }
.spc-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

/* Cursor-glow cards: radial highlight follows --mx/--my (set in JS) */
[data-glow] { position: relative; }
[data-glow]::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 140, 255, .13), transparent 70%);
    opacity: 0; transition: opacity .35s ease; z-index: 0;
}
[data-glow]:hover::before { opacity: 1; }
[data-glow] > * { position: relative; z-index: 1; }

/* Gradient-border card (21st.dev style) */
.spc-gborder { position: relative; background: var(--card); border-radius: var(--radius-lg); }
.spc-gborder::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: var(--grad);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: .55; transition: opacity var(--t);
    pointer-events: none;
}
.spc-gborder:hover::after { opacity: 1; }

/* Marquee (track duplicated in markup) */
.spc-marquee { overflow: hidden; position: relative; }
.spc-marquee::before, .spc-marquee::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.spc-marquee::before { left: 0; background: linear-gradient(90deg, var(--mq-fade, #fff), transparent); }
.spc-marquee::after { right: 0; background: linear-gradient(-90deg, var(--mq-fade, #fff), transparent); }
.spc-marquee__track {
    display: flex; align-items: center; gap: 48px; width: max-content;
    animation: spcMarquee var(--mq-dur, 36s) linear infinite;
    padding-right: 48px;
}
.spc-marquee.is-paused .spc-marquee__track { animation-play-state: paused; }
.spc-marquee:hover .spc-marquee__track { animation-play-state: paused; }
@keyframes spcMarquee { to { transform: translateX(-50%); } }

/* Floating chips (hero / device panels) */
.spc-float { animation: spcFloat 7s ease-in-out infinite; }
.spc-float.f2 { animation-duration: 8.5s; animation-delay: .8s; }
.spc-float.f3 { animation-duration: 9.5s; animation-delay: 1.6s; }
@keyframes spcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Slow aurora drift (hero backdrop) */
@keyframes spcAurora {
    0%, 100% { transform: translate3d(-4%, -2%, 0) scale(1); }
    50% { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

/* Scanning beam sweep */
@keyframes spcBeam { 0% { transform: translateX(-130%) skewX(-14deg); } 100% { transform: translateX(330%) skewX(-14deg); } }

/* Gentle dash draw for connector lines */
@keyframes spcDash { to { stroke-dashoffset: 0; } }

/* Subtle grid shimmer for dark sections */
.spc-griddots {
    position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: radial-gradient(rgba(120, 170, 255, .14) 1px, transparent 1.4px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(75% 70% at 50% 35%, #000, transparent);
    mask-image: radial-gradient(75% 70% at 50% 35%, #000, transparent);
}


/* ============================================================
   LITE MODE (html.spc-lite) — low-end devices; set by
   interactions.js (hardware heuristic, FPS probe, or ?lite=1).
   ============================================================ */
html.spc-lite * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.spc-lite .spc-nav.is-scrolled { background: rgba(0, 18, 38, .97); }

/* ==== nav.css ==== */
/* ============================================================
   Navbar — navy glass over hero, solid after scroll + offer bar
   ============================================================ */
.spc-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: transparent;
    transition: background var(--t) ease, box-shadow var(--t) ease;
}
.spc-nav__offer {
    height: var(--offer-h); display: flex; align-items: center; justify-content: center;
    background: var(--grad); color: #fff; font-size: .82rem; padding: 0 12px;
    text-align: center; overflow: hidden;
}
.spc-nav__offer p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spc-nav__offer a { color: #fff; text-decoration: underline; font-weight: 700; }
.spc-nav__offer-short { display: none; }
@media (max-width: 767px) {
    /* The full promo line clips ~280px on phones — swap to the short variant. */
    .spc-nav__offer-long { display: none; }
    .spc-nav__offer-short { display: inline; }
}

.spc-nav__inner {
    height: var(--nav-h);
    display: flex; align-items: center; gap: 28px;
    max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
}
.spc-nav.is-scrolled { background: rgba(0, 18, 38, .88); backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0, 10, 25, .35); }

.spc-nav__brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.spc-nav__brand img { width: 190px; height: auto; }

.spc-nav__links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.spc-nav__link {
    display: inline-block; padding: 9px 14px; border-radius: var(--radius-pill);
    color: #d7e5f5; font-size: .95rem; font-weight: 600; position: relative;
    transition: color var(--t-fast), background var(--t-fast);
}
.spc-nav__link::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
    background: var(--grad); border-radius: 2px; transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .3s var(--ease-out);
}
.spc-nav__link:hover { color: #fff; }
.spc-nav__link:hover::after, .spc-nav__link.is-active::after { transform: scaleX(1); }
.spc-nav__link.is-active { color: #fff; }

.spc-nav__call {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--blue); color: #fff; font-weight: 700; font-size: .95rem;
    padding: 11px 20px; border-radius: var(--radius-pill); box-shadow: var(--shadow-blue);
    transition: background var(--t-fast), transform var(--t-fast);
}
.spc-nav__call:hover { background: var(--blue-dark); color: #fff; }
.spc-nav__call svg { width: 17px; height: 17px; }

.spc-nav__mcall {
    display: none; width: 44px; height: 44px; border-radius: 50%;
    background: var(--blue); color: #fff; align-items: center; justify-content: center;
    box-shadow: var(--shadow-blue);
}
.spc-nav__mcall svg { width: 19px; height: 19px; }
.spc-nav__mcall:hover { color: #fff; }

.spc-nav__toggle {
    display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 10px;
}
.spc-nav__toggle span { width: 24px; height: 2.5px; border-radius: 2px; background: #fff; transition: transform var(--t), opacity var(--t); }
.spc-nav.is-open .spc-nav__toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.spc-nav.is-open .spc-nav__toggle span:nth-child(2) { opacity: 0; }
.spc-nav.is-open .spc-nav__toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.spc-nav__drawer {
    background: var(--navy-950); border-top: 1px solid var(--dk-border);
    padding: 14px var(--gutter) 22px; display: flex; flex-direction: column; gap: 2px;
}
/* The hidden attribute must always win — author display:flex would otherwise
   override the UA's display:none and the drawer renders as a second menu. */
.spc-nav__drawer[hidden] { display: none !important; }
@media (min-width: 1024px) { .spc-nav__drawer { display: none !important; } }
.spc-nav__dlink { padding: 13px 10px; color: #d7e5f5; font-weight: 600; border-radius: 10px; }
.spc-nav__dlink:hover, .spc-nav__dlink.is-active { background: rgba(255,255,255,.07); color: #fff; }
.spc-nav__dcall {
    margin-top: 12px; text-align: center; background: var(--grad); color: #fff; font-weight: 700;
    padding: 14px; border-radius: var(--radius-pill);
}
.spc-nav__dcall:hover { color: #fff; }

@media (max-width: 1023px) {
    .spc-nav__links, .spc-nav__call { display: none; }
    .spc-nav__mcall { display: inline-flex; margin-left: auto; }
    .spc-nav__toggle { display: inline-flex; }
    .spc-nav__brand img { width: 158px; }
}

/* ==== hero.css ==== */
/* ============================================================
   Hero — immersive navy stage: WebGL spectrum wave, aurora,
   cursor spotlight, beam, ZIP panel, floating offer chips
   ============================================================ */
.spc-hero {
    position: relative;
    min-height: clamp(640px, 96vh, 880px);
    display: flex; align-items: center;
    background:
        radial-gradient(110% 90% at 78% -10%, #07335f 0%, transparent 52%),
        radial-gradient(80% 70% at 12% 110%, #04263f 0%, transparent 55%),
        var(--navy-950);
    color: var(--dk-fg);
    overflow: hidden;
    padding-top: calc(var(--nav-h) + var(--offer-h));
}

/* WebGL / 2D canvas mount */
.spc-hero__canvas { position: absolute; inset: 0; z-index: 0; }
.spc-hero__canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Aurora glow drifting behind everything */
.spc-hero__aurora {
    position: absolute; z-index: 0; inset: -20% -10%; pointer-events: none; opacity: .85;
    background:
        radial-gradient(38% 42% at 26% 28%, rgba(0, 97, 255, .34), transparent 70%),
        radial-gradient(30% 36% at 74% 22%, rgba(0, 181, 255, .22), transparent 70%),
        radial-gradient(26% 30% at 62% 78%, rgba(10, 195, 79, .16), transparent 72%);
    filter: blur(10px);
    animation: spcAurora 16s ease-in-out infinite;
}

/* Cursor spotlight (vars set by JS) */
.spc-hero__spot {
    position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(560px circle at var(--spot-x, 60%) var(--spot-y, 38%), rgba(64, 150, 255, .16), transparent 70%);
}

/* Scanning beam */
.spc-hero__beam {
    position: absolute; z-index: 1; top: 0; bottom: 0; width: 22%; left: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(0, 181, 255, .07), transparent);
    animation: spcBeam 12s ease-in-out infinite 3s;
}

.spc-hero .spc-griddots { z-index: 1; }

.spc-hero__inner { position: relative; z-index: 3; max-width: 740px; padding: clamp(48px, 7vw, 84px) 0; }

.spc-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(0, 181, 255, .12); border: 1px solid rgba(0, 181, 255, .35);
    color: #9ed6ff; font-size: .82rem; font-weight: 700; letter-spacing: .06em;
    padding: 8px 16px; border-radius: var(--radius-pill); margin-bottom: 22px;
}
.spc-hero__eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }

.spc-hero__title { font-size: clamp(2.5rem, 5.8vw, 4.35rem); color: #fff; margin-bottom: 18px; }
.spc-hero__sub { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--dk-muted); max-width: 600px; margin-bottom: 30px; }
.spc-hero__sub strong { color: #fff; }

/* Hero title + subhead paint at full opacity from the first frame (audit
   2026-09-30, TECH-13). The .spc-hero__rise entrance (critical CSS in
   spectrum/parts/head.php, repeated in internet.css, tv.css, voice.css)
   fades them in from opacity 0, and Chrome does not count invisible text
   as painted, so LCP waited 0.9-1.3 s on the animation. Here the rise is
   a transform-only slide; the eyebrow, the ZIP panel/CTA and every scroll
   reveal keep their fades. The section-scoped selectors outrank all of
   those rules, including the ones printed after this stylesheet.
   H1s with data-split are left alone: interactions.js re-hides their
   words for its word-by-word entrance, so showing them first would flash. */
.spc-hero .spc-hero__title.spc-hero__rise,
.spc-hero .spc-hero__sub.spc-hero__rise,
.spc-phero .spc-phero__title.spc-hero__rise:not([data-split]),
.spc-phero .spc-phero__sub.spc-hero__rise { opacity: 1; animation-name: spcRiseY; }
@keyframes spcRiseY { to { transform: none; } }

/* ZIP panel */
.spc-hero__panel {
    background: rgba(255, 255, 255, .06); border: 1px solid var(--dk-border);
    backdrop-filter: blur(12px); border-radius: var(--radius-lg);
    padding: 22px; max-width: 560px; position: relative; overflow: hidden;
}
.spc-hero__panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); }
.spc-hero__panel-title { font-size: 1.02rem; font-weight: 700; color: #fff; margin-bottom: 12px; }
.spc-hero__form { display: flex; gap: 10px; }
.spc-hero__form input {
    flex: 1; min-width: 0; padding: 15px 18px; border-radius: var(--radius-pill);
    border: 1.5px solid rgba(255,255,255,.22); background: rgba(0, 18, 38, .55);
    color: #fff; font-family: var(--font); font-size: 1rem; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.spc-hero__form input::placeholder { color: #7e93aa; }
.spc-hero__form input:focus { outline: none; border-color: var(--cyan); box-shadow: var(--ring); }
.spc-hero__form input.is-error { border-color: #ff6b6b; box-shadow: 0 0 0 4px rgba(255, 107, 107, .25); }
.spc-hero__note { font-size: .82rem; color: var(--dk-muted); margin: 10px 2px 0; }
.spc-hero__note a { color: #9ed6ff; }

/* Floating offer chips (right side, desktop) */
.spc-hero__chips { position: absolute; z-index: 2; right: clamp(8px, 6vw, 90px); top: 50%; transform: translateY(-50%); display: grid; gap: 18px; }
.spc-chip {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255, 255, 255, .07); border: 1px solid var(--dk-border);
    backdrop-filter: blur(10px); border-radius: 16px; padding: 14px 18px;
    box-shadow: 0 18px 40px rgba(0, 10, 25, .35);
    max-width: 252px;
}
.spc-chip__icon {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.spc-chip__icon svg { width: 20px; height: 20px; }
.spc-chip__icon.i-blue { background: linear-gradient(135deg, #0061ff, #00b5ff); }
.spc-chip__icon.i-green { background: linear-gradient(135deg, #00b5ff, #0ac34f); }
.spc-chip__icon.i-navy { background: linear-gradient(135deg, #0a3e74, #0061ff); }
.spc-chip__t { font-size: .92rem; font-weight: 700; color: #fff; line-height: 1.3; }
.spc-chip__s { display: block; font-size: .76rem; font-weight: 500; color: var(--dk-muted); margin-top: 2px; }

/* Trust marquee strip pinned to hero bottom */
.spc-hero__strip {
    position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
    border-top: 1px solid rgba(255,255,255,.09);
    background: rgba(0, 14, 30, .55); backdrop-filter: blur(8px);
    --mq-fade: #00101f;
    padding: 13px 0;
}
.spc-hero__strip .spc-marquee__track { gap: 56px; }
.spc-hero__strip span { display: inline-flex; align-items: center; gap: 9px; font-size: .86rem; font-weight: 600; color: #b9cde2; white-space: nowrap; }
.spc-hero__strip svg { width: 15px; height: 15px; color: var(--green); flex-shrink: 0; }

/* Scroll cue */
.spc-hero__cue {
    position: absolute; z-index: 3; left: 50%; bottom: 64px; transform: translateX(-50%);
    width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.3); border-radius: 14px;
}
.spc-hero__cue::after {
    content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; border-radius: 3px;
    background: var(--cyan); transform: translateX(-50%);
    animation: spcCue 2s ease-in-out infinite;
}
@keyframes spcCue { 0%, 100% { transform: translate(-50%, 0); opacity: 1; } 60% { transform: translate(-50%, 14px); opacity: 0; } }

@media (max-width: 1180px) { .spc-hero__chips { display: none; } }
@media (max-width: 767px) {
    .spc-hero { min-height: 92vh; }
    .spc-hero__form { flex-direction: column; }
    .spc-hero__form .spc-btn { width: 100%; }
    .spc-hero__cue { display: none; }
    /* ZIP panel ahead of the intro paragraph on phones (audit 2026-09-30,
       TECH-17). In source order the Check availability button sat at
       789-833px on a 390x844 screen, under the docked cookie bar (769-844).
       Moving the panel up, with less space above the eyebrow, puts the
       form on the first screen of every common phone down to 375x667; the
       paragraph follows directly below it. */
    .spc-hero__inner { display: flex; flex-direction: column; padding-top: 28px; }
    .spc-hero__eyebrow { align-self: flex-start; margin-bottom: 16px; }
    .spc-hero__panel { order: 1; margin-bottom: 24px; }
    .spc-hero__sub { order: 2; margin-bottom: 0; }
}

/* Page heroes (subpages) — compact navy band */
.spc-phero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(90% 120% at 80% -20%, #07335f 0%, transparent 55%),
        var(--navy-950);
    color: var(--dk-fg);
    padding: calc(var(--nav-h) + var(--offer-h) + clamp(44px, 7vw, 84px)) 0 clamp(44px, 7vw, 76px);
}
.spc-phero__canvas { position: absolute; inset: 0; z-index: 0; opacity: .55; }
.spc-phero__canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.spc-phero .spc-container { position: relative; z-index: 2; }
.spc-phero__title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); color: #fff; }
.spc-phero__sub { color: var(--dk-muted); max-width: 640px; font-size: clamp(1rem, 1.5vw, 1.16rem); }
.spc-phero__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; }

/* ==== sections.css ==== */
/* ============================================================
   Sections — shared component classes for all pages
   (plan cards, bento, steps, bundles, FAQ, pricing tables,
   final CTA, footer)
   ============================================================ */

/* ---- Offer trio (home, under hero) ---- */
.spc-offers { padding: clamp(56px, 8vw, 92px) 0 0; }
.spc-offers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.spc-offer {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 28px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden;
}
.spc-offer__media { margin: -28px -28px 4px; overflow: hidden; }
.spc-offer__media img { width: 100%; height: 168px; object-fit: cover; display: block; transition: transform 4s var(--ease-out); }
.spc-offer:hover .spc-offer__media img { transform: scale(1.07); }
.spc-offer__icon {
    width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
    color: #fff; background: var(--grad); box-shadow: var(--shadow-blue);
    margin-top: -50px; position: relative; z-index: 1; border: 3px solid var(--card);
}
.spc-offer__icon svg { width: 25px; height: 25px; }
.spc-offer__title { font-size: 1.3rem; color: var(--navy); margin: 4px 0 0; }
.spc-offer__badge {
    align-self: flex-start; font-size: .82rem; font-weight: 700; color: var(--blue);
    background: var(--sky); padding: 5px 12px; border-radius: var(--radius-pill);
}
.spc-offer__desc { color: var(--muted-fg); font-size: .96rem; margin: 0; flex: 1; }
.spc-offer__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--blue); }
.spc-offer__cta svg { width: 17px; height: 17px; transition: transform var(--t-fast) var(--ease-out); }
.spc-offer__cta:hover svg { transform: translateX(5px); }

/* ---- Stats band ---- */
.spc-stats { padding: clamp(48px, 7vw, 80px) 0; }
.spc-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
.spc-stat { padding: 22px 10px; border-radius: var(--radius); }
.spc-stat__num { display: block; font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.spc-stat__num .spc-grad-text { font-weight: 800; }
.spc-stat__unit { font-size: .6em; font-weight: 700; margin-left: 2px; }
.spc-stat__label { display: block; margin-top: 6px; font-size: .9rem; color: var(--muted-fg); font-weight: 600; }

/* ---- Internet plan cards ---- */
.spc-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.spc-plan {
    position: relative; display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 30px 26px 26px;
    transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), border-color var(--t);
}
.spc-plan:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: rgba(0, 97, 255, .35); }
.spc-plan.is-popular {
    background: linear-gradient(180deg, #042c55 0%, var(--navy) 100%);
    color: var(--dk-fg); border-color: rgba(0, 181, 255, .4);
    box-shadow: 0 26px 56px rgba(0, 34, 65, .45);
}
.spc-plan.is-popular .spc-plan__name, .spc-plan.is-popular .spc-plan__amt { color: #fff; }
.spc-plan__flag {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--grad); color: #fff; font-size: .76rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; padding: 7px 16px; border-radius: var(--radius-pill); white-space: nowrap;
    box-shadow: var(--shadow-blue);
}
.spc-plan__speed {
    display: inline-flex; align-items: baseline; gap: 6px; align-self: flex-start;
    font-size: .85rem; font-weight: 700; color: var(--blue);
    background: var(--sky); padding: 5px 12px; border-radius: var(--radius-pill); margin-bottom: 14px;
}
.spc-plan.is-popular .spc-plan__speed { background: rgba(0, 181, 255, .16); color: #9ed6ff; }
.spc-plan__name { font-size: 1.18rem; color: var(--navy); margin-bottom: 4px; }
.spc-plan__tag { font-size: .9rem; color: var(--muted-fg); margin-bottom: 16px; }
.spc-plan.is-popular .spc-plan__tag { color: var(--dk-muted); }
.spc-plan__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.spc-plan__cur { font-size: 1.3rem; font-weight: 700; color: var(--navy); }
.spc-plan.is-popular .spc-plan__cur { color: #fff; }
.spc-plan__amt { font-size: 3.2rem; font-weight: 800; letter-spacing: -0.04em; color: var(--navy); line-height: 1; }
.spc-plan__per { font-size: .92rem; color: var(--muted-fg); font-weight: 600; }
.spc-plan.is-popular .spc-plan__per { color: var(--dk-muted); }
.spc-plan__guarantee { font-size: .84rem; font-weight: 700; color: var(--green); margin-bottom: 16px; }
.spc-plan__feats { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; flex: 1; }
.spc-plan__feats li { display: flex; gap: 10px; font-size: .93rem; color: var(--fg); align-items: flex-start; }
.spc-plan.is-popular .spc-plan__feats li { color: #dce9f8; }
.spc-plan__feats svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--green); margin-top: 3px; }
.spc-plan__fine { margin-top: 18px; }

/* ---- Promo / savings band (dark gradient) ---- */
.spc-band {
    position: relative; overflow: hidden; border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 160% at 85% -30%, rgba(0, 97, 255, .5), transparent 60%),
        radial-gradient(90% 130% at 8% 120%, rgba(10, 195, 79, .25), transparent 55%),
        var(--navy-900);
    color: var(--dk-fg); padding: clamp(34px, 5vw, 56px);
}
.spc-band::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--grad); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .5; pointer-events: none; }
.spc-band__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; align-items: center; }
.spc-band__title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); color: #fff; }
.spc-band__txt { color: var(--dk-muted); font-size: 1.02rem; }
.spc-band__num {
    text-align: center; font-weight: 800; letter-spacing: -0.04em;
    font-size: clamp(3.6rem, 7vw, 5.6rem); line-height: 1;
}
.spc-band__numlabel { display: block; margin-top: 8px; font-size: .95rem; font-weight: 600; color: var(--dk-muted); letter-spacing: 0; }

/* ---- Photo column inside the guarantee band ---- */
.spc-band--photo .spc-band__grid { grid-template-columns: 1.05fr .95fr; align-items: stretch; }
.spc-band__photo { position: relative; border-radius: 18px; overflow: hidden; min-height: 300px; }
.spc-band__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s var(--ease-out); }
.spc-band--photo:hover .spc-band__photo img { transform: scale(1.06); }
.spc-band__photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(200deg, rgba(0, 18, 38, 0) 30%, rgba(0, 18, 38, .72) 88%);
}
.spc-band__photochip {
    position: absolute; z-index: 1; left: 18px; bottom: 18px; right: 18px;
    display: flex; align-items: center; gap: 14px;
    background: rgba(0, 18, 38, .72); border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(10px); border-radius: 16px; padding: 14px 18px;
}
.spc-band__photonum { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.spc-band__photolabel { font-size: .82rem; color: var(--dk-muted); line-height: 1.45; }

/* ---- Cinematic media strip (TV section) ---- */
.spc-tvstrip {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    height: clamp(200px, 28vw, 320px); margin-top: 26px;
}
.spc-tvstrip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s var(--ease-out); }
.spc-tvstrip:hover img { transform: scale(1.05); }
.spc-tvstrip::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0, 18, 38, .05) 40%, rgba(0, 18, 38, .68) 100%);
}
.spc-tvstrip__chip {
    position: absolute; z-index: 1; left: 22px; bottom: 20px; right: 22px;
    color: #fff; font-weight: 700; font-size: clamp(1rem, 1.8vw, 1.25rem);
    text-shadow: 0 2px 14px rgba(0, 10, 25, .55);
}

/* ---- Bento photo cell ---- */
.spc-bento__cell--photo { padding: 0; min-height: 230px; border: 0; }
.spc-bento__cell--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 5s var(--ease-out); }
.spc-bento__cell--photo:hover img { transform: scale(1.06); }
.spc-bento__cell--photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(185deg, rgba(0, 18, 38, .02) 35%, rgba(0, 18, 38, .78) 95%);
}
.spc-bento__caption {
    position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 16px;
    color: #fff; font-size: .95rem; font-weight: 700; line-height: 1.45;
    text-shadow: 0 2px 12px rgba(0, 10, 25, .5);
}

/* ---- Bento grid (21st.dev-style feature mosaic) ---- */
.spc-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.spc-bento__cell {
    position: relative; overflow: hidden; border-radius: var(--radius-lg);
    background: var(--card); border: 1px solid var(--border); padding: 26px;
    display: flex; flex-direction: column; gap: 8px;
    transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
.spc-bento__cell:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.spc-bento__cell.is-3 { grid-column: span 3; }
.spc-bento__cell.is-2 { grid-column: span 2; }
.spc-bento__cell.is-4 { grid-column: span 4; }
.spc-bento__cell.is-6 { grid-column: 1 / -1; }
.spc-bento__cell.is-dark { background: var(--navy); border-color: var(--navy-800); color: var(--dk-fg); }
.spc-bento__cell.is-dark h3 { color: #fff; }
.spc-bento__cell.is-dark p { color: var(--dk-muted); }
.spc-bento__kpi { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; color: var(--navy); line-height: 1; }
.spc-bento__cell.is-dark .spc-bento__kpi { color: #fff; }
.spc-bento__cell h3 { font-size: 1.08rem; color: var(--navy); margin: 0; }
.spc-bento__cell p { font-size: .92rem; color: var(--muted-fg); margin: 0; }
.spc-bento__icon { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--grad); margin-bottom: 6px; }
.spc-bento__icon svg { width: 21px; height: 21px; }
.spc-bento__media { margin: 14px -26px -26px; margin-top: auto; padding-top: 14px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; }
.spc-bento__media img { width: 100%; height: 180px; object-fit: cover; display: block; }

/* ---- Steps (how it works) ---- */
.spc-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: spcstep; }
.spc-steps__line { position: absolute; top: 44px; left: 8%; right: 8%; height: 2px; z-index: 0; }
.spc-steps__line svg { width: 100%; height: 100%; display: block; }
.spc-step {
    position: relative; z-index: 1; background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px; text-align: center;
}
.spc-step__num {
    counter-increment: spcstep; width: 56px; height: 56px; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; font-size: 1.25rem;
    box-shadow: var(--shadow-blue);
}
.spc-step__num::before { content: counter(spcstep); }
.spc-step h3 { font-size: 1.12rem; color: var(--navy); }
.spc-step p { font-size: .93rem; color: var(--muted-fg); margin: 0; }

/* ---- Step media headers ---- */
.spc-step__media { margin: -28px -28px 18px; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.spc-step__media img { width: 100%; height: 132px; object-fit: cover; display: block; transition: transform 4s var(--ease-out); }
.spc-step:hover .spc-step__media img { transform: scale(1.07); }
.spc-step .spc-step__num { margin-top: -44px; position: relative; z-index: 1; border: 3px solid var(--card); }

/* ---- Light split band (distinct closer for subpages — image right) ---- */
.spc-splitband {
    display: grid; grid-template-columns: 1.1fr .9fr; align-items: stretch; overflow: hidden;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.spc-splitband__body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: flex-start; }
.spc-splitband__body h2, .spc-splitband__body h3 { color: var(--navy); font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin: 0; }
.spc-splitband__body p { color: var(--muted-fg); margin: 0; }
.spc-splitband__kpi { font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.spc-splitband__media { position: relative; min-height: 260px; }
.spc-splitband__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spc-splitband__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.16), transparent 35%); }
@media (max-width: 860px) {
    .spc-splitband { grid-template-columns: 1fr; }
    .spc-splitband__media { min-height: 200px; order: -1; }
}

/* ---- TV plan grid alignment: CTAs anchor to the card bottom ---- */
.spc-plan .spc-btn--block { margin-top: auto; }

/* ---- Bundle cards ---- */
.spc-bundle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.spc-bundle {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 28px; display: flex; flex-direction: column; gap: 12px;
}
.spc-bundle__name { font-size: 1.08rem; color: var(--navy); min-height: 2.6em; }
.spc-bundle__price { display: flex; align-items: baseline; gap: 6px; }
.spc-bundle__amt { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.04em; color: var(--navy); line-height: 1; }
.spc-bundle__per { font-size: .9rem; color: var(--muted-fg); font-weight: 600; }
.spc-bundle__lock { font-size: .82rem; font-weight: 700; color: var(--green); }
.spc-bundle__bits { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; flex: 1; }
.spc-bundle__bits li { display: flex; gap: 9px; font-size: .9rem; color: var(--fg); }
.spc-bundle__bits svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--blue); margin-top: 4px; }
.spc-bundle__lock svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
.spc-bundle__bits--icons li { align-items: flex-start; }
.spc-bundle__bicon {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sky); color: var(--blue);
}
.spc-bundle__bicon svg { width: 15px; height: 15px; margin-top: 0; }

/* ---- Roll-off pricing table + modal ---- */
.spc-rolloff { width: 100%; border-collapse: collapse; font-size: .94rem; }
.spc-rolloff th, .spc-rolloff td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.spc-rolloff th { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-fg); }
.spc-rolloff td:first-child { font-weight: 700; color: var(--navy); }
.spc-rolloff__save { color: var(--green); font-weight: 700; }
.spc-pricing-link { font-size: .88rem; font-weight: 700; color: var(--blue); text-decoration: underline; background: none; border: 0; padding: 0; }

.spc-modal {
    position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 14, 30, .66); backdrop-filter: blur(6px); padding: 20px;
    opacity: 0; transition: opacity .3s ease;
}
/* hidden must ALWAYS win or the invisible overlay blocks every click on the page. */
.spc-modal[hidden] { display: none !important; }
.spc-modal.is-in { opacity: 1; }
.spc-modal__card {
    background: #fff; border-radius: var(--radius-lg); max-width: 680px; width: 100%;
    max-height: 86vh; overflow: auto; padding: 30px; position: relative;
    transform: translateY(14px); transition: transform .3s var(--ease-out);
}
.spc-modal.is-in .spc-modal__card { transform: none; }
.spc-modal__close {
    position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--border); background: #fff; font-size: 1.1rem; color: var(--muted-fg);
}
.spc-modal__close:hover { color: var(--navy); border-color: var(--navy); }
.spc-modal__title { color: var(--navy); font-size: 1.3rem; margin-bottom: 14px; }

/* ---- App logo / trust marquee row (light sections) ---- */
.spc-applist { --mq-fade: var(--muted); padding: 8px 0; }
.spc-applist span {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .98rem; font-weight: 700; color: var(--navy); white-space: nowrap;
}
.spc-applist .sep { width: 6px; height: 6px; border-radius: 50%; background: var(--grad); padding: 0; }

/* ---- FAQ ---- */
.spc-faq { max-width: 860px; margin: 0 auto; }
.spc-faq__list { display: grid; gap: 12px; }
.spc-faq__item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color var(--t); }
.spc-faq__item.is-open { border-color: rgba(0, 97, 255, .4); box-shadow: var(--shadow-sm); }
.spc-faq__q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: none; border: 0; text-align: left; padding: 18px 20px;
    font-family: var(--font); font-size: 1.02rem; font-weight: 700; color: var(--navy);
}
.spc-faq__q svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--blue); transition: transform var(--t) var(--ease-out); }
.spc-faq__item.is-open .spc-faq__q svg { transform: rotate(180deg); }
.spc-faq__a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease-out); }
.spc-faq__a p { padding: 0 20px 18px; margin: 0; color: var(--muted-fg); font-size: .96rem; }
.spc-faq__a a { font-weight: 700; }
.spc-faq__cta { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; flex-wrap: wrap; }
.spc-faq__cta p { margin: 0; font-weight: 700; color: var(--navy); }

/* ---- Final CTA ---- */
.spc-final {
    position: relative; overflow: hidden; text-align: center;
    background:
        radial-gradient(90% 130% at 50% -40%, #0a3e74 0%, transparent 60%),
        var(--navy-950);
    color: var(--dk-fg); padding: clamp(72px, 10vw, 120px) 0;
}
.spc-final__glow {
    position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%);
    width: min(820px, 90vw); height: 320px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(0, 97, 255, .35), transparent 75%);
    filter: blur(20px);
}
.spc-final__inner { position: relative; z-index: 1; }
.spc-final__title { color: #fff; font-size: clamp(2rem, 4.6vw, 3.3rem); }
.spc-final__sub { color: var(--dk-muted); max-width: 560px; margin: 0 auto 30px; }
.spc-final__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.spc-final__hours { color: var(--dk-muted); font-size: .9rem; margin: 0; }

/* ---- Footer ---- */
.spc-footer { background: var(--navy-950); color: var(--dk-muted); padding: clamp(48px, 7vw, 72px) 0 32px; border-top: 1px solid rgba(255,255,255,.07); }
.spc-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; margin-bottom: 38px; }
.spc-footer__brand img { width: 190px; margin-bottom: 14px; }
.spc-footer__tag { font-size: .9rem; line-height: 1.6; }
.spc-footer__nav { display: flex; flex-direction: column; gap: 9px; }
.spc-footer__nav h3, .spc-footer__contact h3 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #8fa6bd; margin-bottom: 6px; }
.spc-footer__nav a { color: #c6d6e8; font-size: .93rem; transition: color var(--t-fast), transform var(--t-fast); }
.spc-footer__nav a:hover { color: #fff; transform: translateX(3px); }
.spc-footer__phone { display: inline-block; font-size: 1.35rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
.spc-footer__phone:hover { color: var(--cyan); }
.spc-footer__hours { font-size: .85rem; margin: 0 0 6px; }
.spc-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; }
.spc-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 16px; }
.spc-footer__legal a, .spc-footer__cookies { color: #c6d6e8; font-size: .88rem; font-weight: 600; }
.spc-footer__legal a:hover { color: #fff; }
.spc-footer__cookies { background: none; border: 0; padding: 0; text-decoration: underline; }
.spc-footer__cookies:hover { color: #fff; }
.spc-footer__copy { font-size: .8rem; color: #7e93aa; margin: 0; }
@media (max-width: 1023px) { .spc-footer { padding-bottom: 110px; } }

/* ==== search.css ==== */
/* ============================================================
   Search page — availability results
   ============================================================ */
.spc-srch { padding: clamp(48px, 7vw, 80px) 0 clamp(64px, 9vw, 100px); min-height: 50vh; }
.spc-srch__head { max-width: 760px; margin-bottom: 34px; }
.spc-srch__loc { color: var(--blue); }

.spc-srch__loading { display: flex; align-items: center; gap: 14px; color: var(--muted-fg); font-weight: 600; padding: 40px 0; }
.spc-srch__spinner {
    width: 26px; height: 26px; border-radius: 50%;
    border: 3px solid var(--sky); border-top-color: var(--blue);
    animation: spcSpin 0.9s linear infinite;
}
@keyframes spcSpin { to { transform: rotate(360deg); } }

/* Spectrum feature card */
.spc-scard {
    position: relative; overflow: hidden;
    background:
        radial-gradient(110% 150% at 88% -30%, rgba(0, 97, 255, .42), transparent 58%),
        radial-gradient(80% 120% at 0% 130%, rgba(10, 195, 79, .2), transparent 55%),
        var(--navy-900);
    color: var(--dk-fg); border-radius: var(--radius-lg);
    padding: clamp(28px, 4.5vw, 46px); margin-bottom: 34px;
}
.spc-scard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--grad); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .5; pointer-events: none; }
.spc-scard__badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(10, 195, 79, .15); border: 1px solid rgba(10, 195, 79, .45); color: #7ce8a8;
    font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: 7px 14px; border-radius: var(--radius-pill); margin-bottom: 16px;
}
.spc-scard__title { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.spc-scard__sub { color: var(--dk-muted); max-width: 660px; }
.spc-scard__sub a { color: #9ed6ff; font-weight: 700; }
.spc-scard__plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0 14px; }
.spc-scard__plan {
    background: rgba(255, 255, 255, .06); border: 1px solid var(--dk-border); border-radius: var(--radius);
    padding: 16px 18px; display: flex; flex-direction: column; gap: 3px;
    transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast);
}
.spc-scard__plan:hover { transform: translateY(-4px); border-color: rgba(0, 181, 255, .5); }
.spc-scard__pname { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9ed6ff; }
.spc-scard__pspeed { font-size: 1.25rem; font-weight: 800; color: #fff; }
.spc-scard__pprice { font-size: 1.05rem; font-weight: 800; color: #fff; }
.spc-scard__pprice i { font-style: normal; font-weight: 500; font-size: .76rem; color: var(--dk-muted); margin-left: 4px; }
.spc-scard__note { font-size: .85rem; color: var(--dk-muted); }
.spc-scard__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.spc-scard__hint { font-size: .85rem; color: var(--dk-muted); }
.spc-scard--alt { background: var(--navy-900); }

/* Other providers */
.spc-srch__others { margin-top: 10px; }
.spc-srch__otitle { font-size: 1.2rem; color: var(--navy); }
.spc-srch__osub { font-size: .84rem; color: var(--muted-fg); margin-bottom: 18px; }
.spc-srch__ogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.spc-ocard {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px 18px; display: flex; flex-direction: row; align-items: center; gap: 14px;
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.spc-ocard:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.spc-ocard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.spc-ocard__name { font-weight: 700; color: var(--navy); font-size: .98rem; }
.spc-ocard__meta { font-size: .84rem; color: var(--muted-fg); }
.spc-ocard__cov { font-size: .78rem; font-weight: 700; color: var(--blue); }

/* Carrier identity chip: brand-tinted monogram + animated tech badge */
.spc-oavatar {
    position: relative; flex-shrink: 0;
    width: 46px; height: 46px; border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .82rem; letter-spacing: .02em;
}
.spc-obadge {
    position: absolute; right: -7px; bottom: -7px;
    width: 22px; height: 22px; border-radius: 8px;
    background: #fff; border: 1px solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
}
.spc-obadge svg { width: 13px; height: 13px; display: block; }

/* Tech glyph animations */
.spc-anim-flow .flow {
    stroke-dasharray: 6 5;
    animation: spcFlowDash 1.4s linear infinite;
}
@keyframes spcFlowDash { to { stroke-dashoffset: -22; } }

.spc-anim-arcs .a1, .spc-anim-arcs .a2, .spc-anim-arcs .a3 {
    animation: spcArcPulse 2.1s ease-in-out infinite;
}
.spc-anim-arcs .a2 { animation-delay: .3s; }
.spc-anim-arcs .a3 { animation-delay: .6s; }
@keyframes spcArcPulse { 0%, 100% { opacity: .25; } 35% { opacity: 1; } }

.spc-anim-orbit .orb {
    transform-origin: 12px 12px;
    animation: spcOrbit 3.2s linear infinite;
}
@keyframes spcOrbit { to { transform: rotate(360deg); } }

/* Empty / error panes */
.spc-srch__empty, .spc-srch__error {
    background: var(--muted); border: 1px dashed var(--border); border-radius: var(--radius-lg);
    padding: 38px; text-align: center; color: var(--muted-fg);
}
.spc-srch__empty a, .spc-srch__error a { font-weight: 700; }

@media (max-width: 900px) {
    .spc-scard__plans, .spc-srch__ogrid { grid-template-columns: 1fr; }
}

/* ==== responsive.css ==== */
/* ============================================================
   Responsive — global breakpoints (component files handle
   their own where local)
   ============================================================ */
@media (max-width: 1023px) {
    .spc-offers__grid, .spc-plan-grid, .spc-bundle-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
    .spc-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .spc-band__grid { grid-template-columns: 1fr; text-align: left; }
    .spc-band__num { text-align: left; }
    .spc-steps { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .spc-steps__line { display: none; }
    .spc-bento { grid-template-columns: 1fr 1fr; }
    .spc-bento__cell.is-2, .spc-bento__cell.is-3, .spc-bento__cell.is-4 { grid-column: span 2; }
    .spc-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .spc-stats__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .spc-bento { grid-template-columns: 1fr; }
    .spc-bento__cell.is-2, .spc-bento__cell.is-3, .spc-bento__cell.is-4 { grid-column: span 1; }
    .spc-footer__top { grid-template-columns: 1fr; gap: 26px; }
    /* Cookie notice: a compact bar docked to the bottom edge (audit
       2026-09-30, TECH-17). The full card covered 30% of a 390x844 screen,
       on top of the hero ZIP/call box. The bar is one line (title + Cookie
       Policy link) over the two buttons, under 10% of the screen. The
       sentence stays in the markup for screen readers but is clipped from
       view, its link lifted out beside the title. When the sticky call bar
       slides in, the notice moves up above it. */
    .spc-consent { left: 0; right: 0; bottom: 0; max-width: none; }
    .spc-phonebar.is-on ~ .spc-consent.is-in { transform: translateY(calc(-76px - env(safe-area-inset-bottom, 0px))); }
    .spc-consent__card { position: relative; padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0, 20, 60, .18); }
    .spc-consent__card::before { display: none; }
    .spc-consent__title { font-size: .9rem; line-height: 20px; margin: 0 0 6px; padding-right: 7.6em; }
    .spc-consent__txt { height: 1px; margin: -1px 0 0; overflow: hidden; color: transparent; }
    .spc-consent__txt a { position: absolute; top: 4px; right: 12px; padding: 2px 0; font-size: .85rem; font-weight: 700; line-height: 20px; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
    .spc-consent__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .spc-consent__row .spc-btn { min-height: 36px; padding: 8px 12px; font-size: .88rem; }
    .spc-final .spc-btn--xl { width: 100%; }
}