.premium-home {
  isolation: isolate;
  background: #05070d;
}
.premium-home .twinkle-field {
  position: fixed;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 15% 24%, #25133144, transparent 54%),
    radial-gradient(ellipse at 90% 77%, #112c473e, transparent 49%);
}
.premium-home .twinkle-field::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 11px 31px, #9cb6d170 0 .7px, transparent 1.1px) 3px 12px / 107px 133px,
    radial-gradient(circle at 61px 41px, #b1a0d080 0 .6px, transparent 1px) 34px 5px / 173px 147px,
    radial-gradient(circle at 71px 69px, #87bde44f 0 .65px, transparent 1.1px) 13px 50px / 131px 197px;
}
.premium-home .twinkle-field i:nth-child(5n) {
  width: 9px;
  height: 9px;
  margin: -3px;
  border-radius: 0;
  background: #c2e5ff;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}
.premium-home:has(.premium-hero[data-motion="off"]) .twinkle-field i {
  animation-play-state: paused;
}

.premium-home .status { background: #10131ce8; }
.premium-home .header {
  background: #080b13de;
  border-color: #aab6ee19;
}
.premium-home .brand .brand-wordmark {
  color: #e4e7fa;
  letter-spacing: -.046em;
}
.premium-home .nav .brand .brand-mark { width: 47px; height: 47px; }
.premium-home .nav .brand small { color: #aeb8d1; letter-spacing: .15em; }
.premium-home .nav nav {
  background: linear-gradient(180deg, #151927d9, #0c101bd9);
  box-shadow: inset 0 1px 0 #d1d9ff0d;
}

.premium-home .premium-hero {
  background:
    radial-gradient(ellipse at 48% -20%, #4a2e7438, transparent 59%),
    radial-gradient(ellipse at 81% 54%, #153e5b2e, transparent 53%);
}
.premium-home .premium-hero::after {
  inset: 48% -14% auto;
  width: min(1410px, 110vw);
  height: clamp(250px, 39vw, 580px);
  border-color: #b4bcfa28;
  box-shadow: 0 -2px 28px #786ed916;
}
.hero-planet {
  position: absolute;
  z-index: -1;
  top: clamp(-78px, -3vw, -32px);
  right: clamp(-250px, -13.5vw, -145px);
  display: block;
  width: clamp(360px, 36vw, 690px);
  height: auto;
  filter: drop-shadow(-15px 2px 46px #5157b53c);
  pointer-events: none;
}
.hero-planet img { display: block; width: 100%; height: auto; }
.premium-home .hero-content { padding-top: clamp(61px, 5vw, 94px); }
.premium-home .hero-kicker {
  padding: 6px 12px;
  border: 1px solid #bac0ef27;
  border-radius: 999px;
  background: #0e1525b8;
  color: #c1cdec;
}
.premium-home .premium-hero h1 {
  font-size: clamp(54px, 6vw, 108px);
  line-height: 1.04;
}
.premium-home .hero-lead { max-width: 38ch; color: #c8cadd; }
.premium-home .premium-hero .actions { margin-top: 28px; }
.premium-home .hero-rate { margin-top: 18px; }
.premium-home .hero-frame {
  max-width: 1090px;
  margin-top: clamp(35px, 3.3vw, 60px);
  border-color: #607093;
  box-shadow: 0 28px 92px #000a, 50px 26px 124px #2e81b332, -45px 22px 116px #5a43a33b;
}
.premium-home .frame-bar {
  min-height: 50px;
  background: linear-gradient(108deg, #241c37, #141e2e 76%, #172437);
  box-shadow: inset 0 1px 0 #c1c9ff18;
}
.premium-home .plans {
  background: radial-gradient(ellipse at 23% 0%, #2b19465e, transparent 58%),
    radial-gradient(ellipse at 85% 100%, #10314672, transparent 53%);
}
.premium-home .footer { background: #080b13bc; }
.premium-home .features a,
.premium-home .questions details {
  border: 1px solid #adb7fb2e;
  border-radius: 16px;
  background: #13182acf;
}
.premium-home .features a {
  padding: 16px;
  align-self: stretch;
}
.premium-home .features a:focus-visible,
.premium-home .questions details:focus-within { border-color: #b8c4f4; }
.premium-home .questions details[open] { background: #1a2235ef; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .premium-home :is(.button, .nav nav a, .footer nav a, .features a, .motion-control, .questions details) {
    transition: transform .24s cubic-bezier(.22,.8,.22,1), background-color .24s, border-color .24s, color .24s, box-shadow .24s;
  }
  .premium-home :is(.button, .motion-control):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px #7ea7ed3a;
  }
  .premium-home .button svg,
  .premium-home .brand-mark {
    transition: transform .28s cubic-bezier(.22,.8,.22,1), filter .28s;
  }
  .premium-home .button:hover svg { transform: translateX(3px); }
  .premium-home .brand:hover .brand-mark { transform: scale(1.09); filter: brightness(1.2); }
  .premium-home :is(.nav nav a, .footer nav a):hover { transform: translateY(-2px); }
  .premium-home :is(.features a, .questions details):hover {
    transform: translateY(-3px);
    border-color: #8d9fdaac;
    background-color: #1e2941;
    box-shadow: 0 12px 34px #05091490;
  }
  .premium-home :is(.text-link, .hero-frame figcaption a) > span {
    display: inline-block;
    transition: transform .24s;
  }
  .premium-home :is(.text-link, .hero-frame figcaption a):hover > span { transform: translateX(4px); }
}
@media (max-width: 850px) {
  .hero-planet { top: -56px; right: -180px; opacity: .77; }
}
@media (max-width: 640px) {
  .premium-home .nav .brand .brand-mark { width: 35px; height: 35px; }
  .premium-home .hero-content { padding-top: 57px; }
  .premium-home .premium-hero h1 { font-size: clamp(42px, 11.5vw, 66px); }
  .hero-planet { width: 275px; top: -29px; right: -143px; opacity: .46; }
  .premium-home .frame-bar { min-height: 41px; }
  .premium-home .features a { padding: 12px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .premium-home:not(:has(.premium-hero[data-motion="on"])) .twinkle-field i { animation: none; opacity: .52; }
}

/* Wireless storefront */
.premium-home .premium-hero {
  background:
    radial-gradient(ellipse at 52% -22%, #592a824d, transparent 61%),
    radial-gradient(ellipse at 83% 49%, #217dbb45, transparent 56%);
}
.premium-home .premium-hero h1 span {
  background-image: linear-gradient(105deg, #ffe2ff 7%, #c5b5ff 45%, #80eaff 96%);
}
.premium-home .premium-hero .button.primary {
  background: linear-gradient(110deg, #aee8ff, #76def7 54%, #adf2e2);
  box-shadow: 0 9px 35px #73dfff30, inset 0 1px 0 #e6faff;
}
.premium-home .premium-hero .button.primary:hover {
  background: linear-gradient(110deg, #d3f4ff, #a0ecff 54%, #c2ffef);
}
.premium-home .hero-rate {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  padding: 9px 14px;
  border: 1px solid #8ae6f947;
  border-radius: 13px;
  background: linear-gradient(115deg, #142133, #152b3a);
  text-align: left;
}
.premium-home .hero-rate strong {
  font: 750 1.55rem/1 system-ui, sans-serif;
  color: #b9efff;
  letter-spacing: -.05em;
}
.premium-home .hero-rate strong span { font-size: .52em; letter-spacing: 0; }
.premium-home .hero-rate > .hero-rate-copy { margin: 0; color: #d4e0f6; }
.hero-rate-copy a { display: block; margin-top: 3px; }

.wireless-aisles { padding-block: clamp(43px, 6vw, 85px); }
.wireless-aisles h2,
.device-spotlight h2 {
  margin: .35rem 0 1.1rem;
  font-size: clamp(32px, 4.2vw, 58px);
  font-weight: 590;
  line-height: 1.05;
  letter-spacing: -.063em;
  text-wrap: balance;
}
.wireless-aisle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 19px);
}
.wireless-aisle {
  --aisle-color: #a3e1ff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 112px;
  padding: clamp(15px, 1.8vw, 24px);
  border: 1px solid #ffffffa8;
  border-radius: 20px;
  background: linear-gradient(130deg, #f7fbff, var(--aisle-color));
  color: #101d36;
}
.wireless-aisle[data-tone="violet"] { --aisle-color: #d5c2ff; }
.wireless-aisle[data-tone="mint"] { --aisle-color: #a4f2df; }
.aisle-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: #111e36;
  color: var(--aisle-color);
  border-radius: 12px;
}
.aisle-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wireless-aisle strong,
.wireless-aisle small { display: block; }
.wireless-aisle strong { font-size: clamp(16px, 1.6vw, 22px); letter-spacing: -.035em; }
.wireless-aisle small { margin-top: 4px; color: #314259; font-size: .8rem; line-height: 1.4; }
.aisle-arrow { font-size: 1.15rem; }
.wireless-aisle:focus-visible { outline-offset: 5px; }

.device-spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  margin-block: clamp(35px, 6vw, 80px);
  overflow: hidden;
  border: 1px solid #c9e4ffbb;
  border-radius: 23px;
  background: linear-gradient(132deg, #f1edff, #bce5fa 75%, #a1e9df);
  color: #101d36;
}
.device-spotlight-copy { padding: clamp(24px, 4vw, 57px); }
.device-spotlight-copy .eyebrow { color: #304a75; }
.device-spotlight-copy > p:not(.eyebrow) { max-width: 42ch; color: #263e57; line-height: 1.55; }
.device-spotlight-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 15px 21px; margin-top: 22px; }
.device-spotlight .button { color: #ecf9ff; background: #142640; }
.device-spotlight .button:hover { background: #213e68; }
.device-spotlight .text-link { color: #173752; font-weight: 650; }
.device-spotlight a:focus-visible { outline-color: #12223c; }
.device-spotlight img { display: block; width: 100%; height: 100%; min-height: 250px; object-fit: cover; object-position: 70% center; }

.premium-home .plans .plan { border-top: 2px solid rgb(var(--plan-rgb) / .86); }
.premium-home .plans .plan-symbol {
  background: radial-gradient(circle, rgb(var(--plan-rgb) / .31), rgb(var(--plan-rgb) / .075) 70%);
  box-shadow: 0 0 32px rgb(var(--plan-rgb) / .13);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .wireless-aisle, .aisle-arrow { transition: transform .25s ease, box-shadow .25s ease; }
  .wireless-aisle:hover { transform: translateY(-4px); box-shadow: 0 12px 26px #060b20a6; }
  .wireless-aisle:hover .aisle-arrow { transform: translate(2px, -2px); }
}
@media (max-width: 820px) {
  .wireless-aisle-grid { grid-template-columns: 1fr; }
  .wireless-aisle { min-height: 80px; }
}
@media (max-width: 640px) {
  .device-spotlight { grid-template-columns: 1fr; }
  .device-spotlight img { height: auto; min-height: 0; aspect-ratio: 2; object-position: 66% center; }
}