/* ==========================================================================
   WAVEIE — "TOTAL" EDITION
   Layout language modelled on Total by Verizon (totalwireless.com):
     · 1232px content column
     · 16px radius cards with 1px hairline borders instead of heavy shadows
     · fully-pill buttons: accent fill with ink text / ink fill with white text
     · large 48px headings at weight 700 with positive letter-spacing
     · bento = a row of tall 2:3 portrait tiles, then a wide tile + two squares
   Brand values are Waveie's: #0012B5 blue, #FF931E orange, real logo.
   ========================================================================== */
:root{
  /* ink + surfaces */
  --ink:#00072E;
  --ink-2:#1A1C35;
  
  --slate:#4A5068;
  --slate-2:#666666;
  --line:#B2B2B2;
  --line-soft:#E4E6EE;
  --bg:#FFFFFF;
  --bg-2:#F6F7FA;
  --bg-3:#EFEFEF;

  /* brand */
  --blue:#0012B5;
  --blue-700:#2020E0;
  --blue-50:#EEF1FF;
  --orange:#FF931E;
  --orange-600:#EA580C;
  --orange-50:#FFF4E6;
  --mint:#00C8B7;
  --teal:#00C8B7;   /* alias: several components reference --teal */
  --mint-50:#E6FCF4;
  --green:#12A150;

  --g-blue:linear-gradient(140deg,#000A6B,#0012B5 55%,#2A1BC4);
  --g-orange:linear-gradient(135deg,#FFA93E,#EA580C);
  
  --g-ink:linear-gradient(150deg,#00072E,#141A4A);
  --g-teal:linear-gradient(140deg,#12D3C0,#0A8F86);
  --g-purple:linear-gradient(140deg,#6357E8,#2A1BC4);
  --g-mint:linear-gradient(140deg,#12D3C0,#0A8F86);
  --g-green:linear-gradient(140deg,#22C55E,#12A150);

  --r:16px; --r-sm:10px; --r-lg:20px; --r-pill:9999px;
  --sh-1:0 1px 2px rgba(0,7,46,.04);
  --sh-2:0 6px 22px rgba(0,7,46,.10);
  --sh-3:0 18px 46px rgba(0,7,46,.16);
  --wrap:1232px;
  --ease:cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,h5{margin:0;font-weight:700;line-height:1.12;letter-spacing:.01em}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem);letter-spacing:-.005em}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:clamp(1.15rem,1.5vw,1.375rem)}
h4{font-size:1.0625rem;font-weight:700}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--blue-700);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.wrap-wide{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
/* One vertical rhythm.
   The gap a reader sees between two bands is the sum of the first band's
   bottom padding and the second's top padding — so mixing .sect (78px) with
   .sect-sm (49px) and .hero (30/18px) produced gaps of 48, 67, 98, 126, 127
   and 156px down the homepage. Every band now carries the same half-gap, so
   any two adjacent bands are the same distance apart wherever they appear. */
:root{--sect-y:clamp(40px,4.4vw,64px)}
.sect{padding:var(--sect-y) 0}
.sect-sm{padding:var(--sect-y) 0}
.bg2{background:var(--bg-2)}
.bg3{background:var(--bg-3)}
.center{text-align:center}
.balance{text-wrap:balance}
.accent{color:var(--orange)}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:700;
  letter-spacing:.02em;color:var(--blue);background:var(--blue-50);padding:8px 16px;border-radius:var(--r-pill)}
.eyebrow.warm{color:#B45309;background:var(--orange-50)}
.eyebrow.mint{color:#00655C;background:var(--mint-50)}
.eyebrow.ghost{color:#fff;background:rgba(255,255,255,.18)}
.head{max-width:720px;margin-bottom:clamp(26px,3vw,40px)}
.head.mid{margin-inline:auto;text-align:center}
.head h2{margin:14px 0 12px}
.head p{color:var(--slate);font-size:clamp(1rem,1.1vw,1.125rem)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:1rem;padding:14px 30px;border-radius:var(--r-pill);white-space:nowrap;
  transition:transform .16s var(--ease),background .18s,color .18s,box-shadow .18s}
.btn:hover{transform:translateY(-1px)}
.btn .ar{transition:transform .2s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
/* accent fill, ink text — Total's primary */
.btn-orange{background:var(--orange);color:var(--ink)}
.btn-orange:hover{background:#FFA23C}
/* ink fill, white text — Total's secondary */
.btn-blue{background:var(--ink);color:#fff}
.btn-blue:hover{background:#121A52}
.btn-white{background:#fff;color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-glass{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.btn-glass:hover{background:#fff;color:var(--ink)}
.btn-sm{padding:10px 20px;font-size:.9375rem}
.btn-lg{padding:16px 34px;font-size:1.0625rem}
.tlink{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--ink);
  border-bottom:2px solid var(--ink);padding-bottom:1px;transition:gap .18s,color .18s,border-color .18s}
.tlink:hover{gap:11px;color:var(--blue-700);border-color:var(--blue-700)}
.tlink.on-dark{color:#fff;border-color:#fff}

/* ---------------------------------------------------------------- utility + header */
.util{background:var(--ink);color:rgba(255,255,255,.78);font-size:.8125rem}
.util .wrap{display:flex;align-items:center;gap:4px;height:42px;white-space:nowrap}
.util a{padding:7px 12px;border-radius:var(--r-pill);font-weight:600;white-space:nowrap;transition:background .18s,color .18s}
.util a:hover{background:rgba(255,255,255,.12);color:#fff}
.util a.on{color:#fff;background:rgba(255,255,255,.14)}
.util .sep{width:1px;height:15px;background:rgba(255,255,255,.2);margin-inline:6px}
.util .right{margin-left:auto;display:flex;align-items:center;gap:2px}
.util .ph{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:#fff}

.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line-soft);
  transition:box-shadow .22s}
.hdr.stuck{box-shadow:0 2px 14px rgba(0,7,46,.08)}
.hdr > .wrap{display:flex;align-items:center;gap:10px;height:72px}
.logo{flex:none;display:flex;align-items:center}
.logo svg{height:32px;width:auto}
.mainnav{display:flex;align-items:center;gap:2px;margin-left:26px}
.mainnav > .item{position:relative}
.mainnav > .item > a,.mainnav > .item > button{display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:.9688rem;padding:10px 15px;border-radius:var(--r-pill);
  transition:background .16s,color .16s}
.mainnav > .item > a:hover,.mainnav > .item > button:hover{background:var(--bg-2)}
.mainnav > .item > a.on{color:var(--blue-700)}
.mainnav .caret{transition:transform .2s}
.mainnav .item:hover .caret{transform:rotate(180deg)}

.mega{position:absolute;top:calc(100% + 11px);left:-12px;transform:translateY(-6px);
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 20px 48px rgba(8,18,45,.15),0 2px 8px rgba(8,18,45,.06);
  padding:10px;width:600px;opacity:0;visibility:hidden;pointer-events:none;z-index:60;
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;
  display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mega.one{width:334px;grid-template-columns:1fr}
/* bridge the gap so the panel survives the trip from the label */
.mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:13px}
.item:hover .mega,.item:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:none}

.mega > a{display:flex;gap:12px;padding:11px 12px;border-radius:10px;align-items:flex-start;
  transition:background .14s}
.mega > a:hover{background:var(--bg-2)}
.mega .mi{width:36px;height:36px;border-radius:9px;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--g-blue)}
.mega .mi.c-orange{background:var(--g-orange)}
.mega .mi.c-teal{background:linear-gradient(140deg,#12D3C0,#0A8F86)}
.mega .mi.c-purple{background:linear-gradient(140deg,#6357E8,#2A1BC4)}
.mega .mi svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.mega b{display:block;font-size:.9063rem;font-weight:700;line-height:1.35;margin-bottom:1px}
.mega > a > span + span > span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:.8125rem;color:var(--slate-2);line-height:1.42}
.mega .foot{grid-column:1/-1;border-top:1px solid var(--line-soft);margin-top:6px;
  padding:13px 12px 4px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.mega .foot span{font-size:.8438rem;color:var(--slate);line-height:1.4}
.mega .foot .tlink{white-space:nowrap;flex:none;font-size:.875rem;padding-bottom:3px}
/* one-column panels have no room for a side-by-side footer */
.mega.one .foot{flex-direction:column;align-items:flex-start;gap:10px}

.hdr > .wrap > .right{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
.iconbtn{width:42px;height:42px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;
  transition:background .16s;position:relative}
.iconbtn:hover{background:var(--bg-2)}
.iconbtn .dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px #fff}
.signin{font-weight:700;font-size:.9375rem;padding:10px 14px;border-radius:var(--r-pill)}
.signin:hover{background:var(--bg-2)}
.burger{display:none;width:44px;height:44px;border-radius:10px;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1.5px var(--line)}
.mnav{display:none;background:#fff;border-top:1px solid var(--line-soft);
  max-height:calc(100dvh - 118px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.mnav.open{display:block}
.mnav > .wrap{display:block;padding-block:10px 26px}
.mnav a{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:16px 4px;font-weight:700;font-size:1.0625rem;border-bottom:1px solid var(--line-soft)}
.mnav a::after{content:"";width:8px;height:8px;border-right:2.5px solid var(--line);
  border-bottom:2.5px solid var(--line);transform:rotate(-45deg);flex:none}
.mnav a.btn::after,.mnav a.sub::after{display:none}
.mnav a.btn{justify-content:center;border-bottom:0;margin-top:16px}
.mnav a.sub{justify-content:flex-start;color:var(--slate)}

/* ---------------------------------------------------------------- announcement */
.announce{background:var(--ink);color:#fff;border-top:1px solid rgba(255,255,255,.10)}
.announce .wrap{display:flex;align-items:center;justify-content:center;gap:14px;padding-block:12px;
  flex-wrap:wrap;text-align:center;font-size:.9375rem}
.announce .when{color:var(--mint);font-weight:700}
.announce a{border-bottom:2px solid rgba(255,255,255,.5);font-weight:700}
.announce a:hover{border-color:#fff}

/* ---------------------------------------------------------------- hero tiles */
.hero{padding:var(--sect-y) 0}
/* the two promo bands at the top read as one stacked pair, so they keep a
   deliberately tighter gap than the standard rhythm */
.hero + .hero{padding-top:0}
.htiles{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.htile{position:relative;border-radius:var(--r);overflow:hidden;min-height:clamp(420px,44vw,560px);
  display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(26px,2.6vw,40px);color:#fff;
  transition:transform .3s var(--ease)}
.htile:hover{transform:translateY(-4px)}
.htile .bgi{position:absolute;inset:0;z-index:0}
.htile .bgi img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.htile:hover .bgi img{transform:scale(1.05)}
.htile .veil{position:absolute;inset:0;z-index:1}
.htile.v-blue .veil{background:linear-gradient(180deg,rgba(0,7,46,.25),rgba(0,18,181,.88))}
.htile.v-ink .veil{background:linear-gradient(180deg,rgba(0,7,46,.20),rgba(0,7,46,.90))}
.htile > *:not(.bgi):not(.veil):not(.wavemark):not(.gwart){position:relative;z-index:2}
.htile .kick{font-size:.8125rem;font-weight:700;letter-spacing:.02em;color:var(--orange);margin-bottom:12px}
.htile h2{color:#fff;font-size:clamp(1.7rem,2.6vw,2.35rem);margin-bottom:12px}
.htile p{color:rgba(255,255,255,.86);font-size:.9688rem;max-width:34rem}
.htile .btn{margin-top:22px;align-self:flex-start}
.htile .fine{margin-top:14px;font-size:.75rem;color:rgba(255,255,255,.62);max-width:34rem;line-height:1.5}

/* ---------------------------------------------------------------- start row */
.startrow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.startrow a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;font-weight:700;font-size:1.0625rem;
  transition:border-color .18s,background .18s,transform .2s var(--ease)}
.startrow a:hover{border-color:var(--ink);background:var(--bg-2);transform:translateY(-3px)}
.startrow svg{flex:none;stroke:var(--ink);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- shared benefits */
.benefits{border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,3vw,40px)}
.benefits h2{font-size:clamp(1.5rem,2.2vw,2rem);margin-bottom:26px}
.benefits ul{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.benefits li{display:flex;flex-direction:column;gap:12px;font-size:.9375rem;font-weight:600;line-height:1.45}
.benefits .bi{width:44px;height:44px;border-radius:12px;background:var(--mint-50);display:flex;align-items:center;justify-content:center}
.benefits .bi svg{width:22px;height:22px;stroke:#00655C;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- plan picker */
.picker{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.stepper{display:flex;align-items:center;gap:14px}
.stepper .lbl{font-weight:700;font-size:1rem}
.stepper .ctrl{display:flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:var(--r-pill);padding:4px}
.stepper button{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;font-weight:700;transition:background .16s}
.stepper button:hover:not(:disabled){background:var(--bg-2)}
.stepper button:disabled{opacity:.3;cursor:not-allowed}
.stepper .n{min-width:34px;text-align:center;font-weight:700;font-size:1.0625rem}
.ptabs{display:inline-flex;border-bottom:2px solid var(--line-soft);gap:4px}
.ptabs button{padding:12px 22px;font-weight:700;font-size:1rem;color:var(--slate);position:relative;
  transition:color .18s}
.ptabs button.on{color:var(--ink)}
.ptabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--ink);border-radius:2px}
.pane{display:none}
.pane.on{display:block;animation:fadeUp .32s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- plan cards */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plans.three{grid-template-columns:repeat(3,1fr)}
.plans.four{grid-template-columns:repeat(4,1fr)}
.plan{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;background:#fff;
  display:flex;flex-direction:column;transition:border-color .2s,box-shadow .22s,transform .22s var(--ease)}
.plan:hover{border-color:var(--ink);box-shadow:var(--sh-2);transform:translateY(-3px)}
.plan.pop{border:1px solid var(--line);box-shadow:0 10px 30px rgba(10,20,50,.09)}
.plan .flag{position:absolute;top:-13px;left:26px;background:var(--orange);color:var(--ink);
  font-size:.75rem;font-weight:700;padding:6px 14px;border-radius:var(--r-pill)}
.plan .flag.ink{background:var(--ink);color:#fff}
.plan .pn{font-size:1.375rem;font-weight:700;letter-spacing:-.01em}
.plan .pd{color:var(--slate);font-size:.9063rem;margin-top:6px;min-height:42px;line-height:1.5}
.plan .pp{display:flex;align-items:baseline;gap:4px;margin:20px 0 2px}
.plan .pp .num{font-size:2.9rem;font-weight:700;letter-spacing:-.02em;line-height:1}
.plan .pp .per{color:var(--slate);font-size:1rem;font-weight:600}
.plan .sub{color:var(--slate-2);font-size:.8438rem;min-height:36px;line-height:1.45}
.plan .btn{width:100%;margin:18px 0 22px}
.plan .inc{font-weight:700;font-size:.9375rem;padding-top:20px;border-top:1px solid var(--line-soft)}
.plan ul{display:grid;gap:12px;margin-top:16px;flex:1 1 auto}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:.9063rem;line-height:1.5}
.plan li svg{flex:none;margin-top:4px;width:16px;height:16px;fill:none;stroke:var(--green);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.plan li.no{color:var(--slate-2)}
.plan li.no svg{stroke:var(--line)}
.plan details{margin-top:18px}
.plan details summary{list-style:none;cursor:pointer;font-weight:700;font-size:.9063rem;
  display:inline-flex;align-items:center;gap:8px;border-bottom:2px solid var(--ink);padding-bottom:2px}
.plan details summary::-webkit-details-marker{display:none}
.plan details summary svg{transition:transform .2s}
.plan details[open] summary svg{transform:rotate(180deg)}
.plan details ul{margin-top:16px}

/* ---------------------------------------------------------------- bento (Total's shape) */
.bento-a{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bento-b{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:24px}
.bento-b .w2{grid-column:span 2}
.tile{position:relative;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  justify-content:flex-end;padding:28px;color:#fff;min-height:200px;
  transition:transform .3s var(--ease),box-shadow .3s}
.tile:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
.tile.tall{min-height:clamp(400px,32vw,510px)}
.tile.sq{min-height:300px}
.tile .bgi{position:absolute;inset:0;z-index:0}
.tile .bgi img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tile:hover .bgi img{transform:scale(1.06)}
.tile .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,7,46,.06) 0%,rgba(0,7,46,.55) 52%,rgba(0,7,46,.90) 100%)}
.tile > *:not(.bgi):not(.veil){position:relative;z-index:2}
.tile h3{color:#fff;margin-bottom:8px}
.tile p{font-size:.9063rem;color:rgba(255,255,255,.85);line-height:1.5}
.tile .tlink{margin-top:16px;align-self:flex-start;color:#fff;border-color:#fff}
.tile.solid{color:#fff}
.tile.s-blue{background:var(--g-blue)}
.tile.s-ink{background:var(--g-ink)}
.tile.s-orange{background:var(--g-orange);color:var(--ink)}
.tile.s-orange p{color:rgba(0,7,46,.78)}
.tile.s-orange h3{color:var(--ink)}
.tile.s-orange .tlink{color:var(--ink);border-color:var(--ink)}
.tile.s-mint{background:var(--mint-50);color:var(--ink)}
.tile.s-mint h3{color:var(--ink)}
.tile.s-mint p{color:var(--slate)}
.tile.s-mint .tlink{color:var(--ink);border-color:var(--ink)}
.tile.plain{background:#fff;border:1px solid var(--line);color:var(--ink)}
.tile.plain h3{color:var(--ink)}
.tile.plain p{color:var(--slate)}
.tile.plain .tlink{color:var(--ink);border-color:var(--ink)}
.tile .ti{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;
  align-items:center;justify-content:center;margin-bottom:auto}
.tile.plain .ti,.tile.s-mint .ti{background:var(--blue-50)}
.tile .ti svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.tile.plain .ti svg,.tile.s-mint .ti svg{stroke:var(--blue)}
.tile .stat{font-size:clamp(2rem,3vw,2.8rem);font-weight:700;letter-spacing:-.02em;line-height:1;margin-bottom:8px}

/* ---------------------------------------------------------------- promo pair */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}

/* ---------------------------------------------------------------- device row */
.devices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.device{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:border-color .2s,box-shadow .22s,transform .22s var(--ease)}
.device:hover{border-color:var(--ink);box-shadow:var(--sh-2);transform:translateY(-3px)}
.device .kick{background:var(--mint-50);color:#00655C;font-size:.8125rem;font-weight:700;padding:11px 20px;text-align:center}
.device .ph{aspect-ratio:16/11;overflow:hidden;background:var(--bg-2)}
.device .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.device:hover .ph img{transform:scale(1.05)}
.device .bd{padding:24px;display:flex;flex-direction:column;flex:1}
.device h3{margin-bottom:8px}
.device p{color:var(--slate);font-size:.9063rem;flex:1}
.device .price{margin-top:16px;display:flex;align-items:baseline;gap:10px}
.device .price b{font-size:1.5rem;font-weight:700}
.device .price s{color:var(--slate-2);font-size:.9375rem}
.device .btn{margin-top:16px}

/* ---------------------------------------------------------------- coverage / checker */
.cov{border-radius:var(--r);overflow:hidden;background:var(--g-blue);color:#fff;padding:clamp(28px,3.4vw,52px)}
.cov-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,3vw,48px);align-items:center}
.cov h2{color:#fff;margin:14px 0 12px}
.cov p{color:rgba(255,255,255,.85)}
.zip{display:flex;gap:10px;background:#fff;padding:8px;border-radius:var(--r-pill);margin-top:24px;max-width:460px}
.zip .fld{display:flex;align-items:center;gap:10px;flex:1;padding-left:18px;min-width:0}
.zip input{border:0;outline:0;background:none;width:100%;font-size:1rem;font-weight:600;color:var(--ink);min-width:0}
.leg{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px}
.leg div{display:flex;align-items:center;gap:8px;font-size:.875rem;color:rgba(255,255,255,.85)}
.leg i{width:11px;height:11px;border-radius:50%}
#covMapHome,#covMap{position:absolute;inset:0}
.leaflet-container{font:inherit!important;background:#E8EDF5}
.map-mark{position:absolute;right:14px;bottom:14px;z-index:500;background:#fff;border-radius:8px;
  padding:6px 11px;font-size:.6875rem;font-weight:700;letter-spacing:.04em}

.checker{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,3.2vw,42px);
  max-width:760px;margin-inline:auto}
.checker .ci{width:60px;height:60px;border-radius:16px;background:var(--g-blue);display:flex;align-items:center;
  justify-content:center;margin:0 auto 18px}
.checker .ci svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.checker h2{text-align:center;font-size:clamp(1.5rem,2.2vw,1.9rem)}
.checker > p{text-align:center;color:var(--slate);margin-top:10px}
.addr{display:flex;align-items:center;gap:12px;margin-top:24px;background:#fff;border:2px solid var(--line);
  border-radius:var(--r-pill);padding:5px 5px 5px 22px;transition:border-color .2s}
.addr:focus-within{border-color:var(--ink)}
/* the live checker's empty-field state: the field itself goes red and its
   placeholder becomes the instruction, rather than a separate error line */
.addr:has(input.invalid){border-color:#E02B2B}
.addr input.invalid::placeholder{color:#E02B2B;opacity:1}
.addr input{flex:1;border:0;outline:0;background:none;font-size:1.0313rem;padding:14px 0;min-width:0}
.addr .go{width:44px;height:44px;border-radius:50%;background:var(--bg-2);display:flex;align-items:center;justify-content:center;flex:none}
.checker .cta{width:100%;margin-top:14px}
.checker .rea{display:flex;gap:24px;justify-content:center;margin-top:18px;flex-wrap:wrap;font-size:.875rem;color:var(--slate)}
.checker .rea span{display:flex;align-items:center;gap:8px}
.checker .rea svg{stroke:var(--green);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cov-err{margin-top:14px;background:#FEF2F2;color:#991B1B;border:1px solid #FECACA;border-radius:var(--r-sm);
  padding:13px 17px;font-size:.9063rem;display:none}
.cov-err.show{display:block}
.spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;display:none}
.loading .spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.result{display:none;margin-top:32px}
.result.show{display:block;animation:fadeUp .4s var(--ease)}
.res-grid{display:grid;grid-template-columns:1fr 1.1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.res-left{padding:clamp(24px,2.6vw,34px)}
.res-ok{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--mint-50);color:#00655C;
  font-weight:700;padding:12px;border-radius:var(--r-pill);font-size:.9375rem;margin-bottom:20px}
.res-left h3{text-align:center;font-size:1.1rem}
.res-addr{text-align:center;color:var(--blue-700);font-weight:700;font-size:1rem;margin-top:8px;line-height:1.45}
.gauge{width:164px;height:164px;margin:24px auto;position:relative}
.gauge svg{transform:rotate(-90deg)}
.gauge .track{fill:none;stroke:var(--bg-3);stroke-width:12}
.gauge .bar{fill:none;stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset 1.1s var(--ease),stroke .4s}
.gauge .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge .val b{font-size:2rem;font-weight:700;line-height:1}
.gauge .val span{font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-2);margin-top:5px}
.res-badges{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rb{border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:15px;text-align:center}
.rb b{display:block;font-size:1.0625rem;font-weight:700}
.rb span{font-size:.75rem;color:var(--slate-2);font-weight:600}
.rb .bars{display:flex;align-items:flex-end;gap:3px;height:22px;justify-content:center;margin-bottom:6px}
.rb .bars i{width:5px;border-radius:2px;background:var(--green)}
.rb .bars i.off{background:var(--line)}
.res-speed{margin-top:14px;background:var(--bg-2);border-radius:var(--r-sm);padding:17px}
.res-speed .t{display:flex;align-items:baseline;justify-content:space-between}
.res-speed .t span{font-size:.9063rem;color:var(--slate);font-weight:600}
.res-speed .t b{font-size:1.3rem;font-weight:700;color:var(--blue)}
.res-speed .meter{height:9px;border-radius:99px;background:var(--line-soft);margin-top:11px;overflow:hidden}
.res-speed .meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#0012B5,#2020E0 60%,#00C8B7);transition:width 1.1s var(--ease)}
.res-again{width:100%;margin-top:14px}
.res-map{position:relative;min-height:400px;background:var(--bg-3)}

/* ---------------------------------------------------------------- tables */
.tbl{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl-scroll{overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;min-width:860px}
table.cmp th,table.cmp td{padding:16px 18px;border-bottom:1px solid var(--line-soft);font-size:.9063rem;text-align:center}
table.cmp thead th{background:var(--bg-2);font-weight:700}
table.cmp thead th.pop{background:transparent;color:var(--ink)}
table.cmp tbody th{text-align:left;font-weight:700;background:#fff;position:sticky;left:0}
table.cmp td.pop{background:transparent;font-weight:700}
table.cmp .y{stroke:var(--green);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
table.cmp .dash{color:var(--line)}
table.cmp tbody tr:hover td:not(.pop){background:var(--bg-2)}

/* ---------------------------------------------------------------- faq / footnotes */
.faq{display:grid;gap:0;max-width:900px;margin-inline:auto;border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{list-style:none;cursor:pointer;padding:24px 4px;font-weight:700;font-size:1.0625rem;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  transition:transform .22s var(--ease)}
.faq summary .pm svg{stroke:var(--ink);fill:none;stroke-width:2.4;stroke-linecap:round}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .a{padding:0 4px 24px;color:var(--slate);font-size:.9375rem;max-width:62ch}

.notes{border-top:1px solid var(--line-soft);padding-top:26px;font-size:.75rem;color:var(--slate-2);line-height:1.7}
.notes p{margin-bottom:10px;max-width:none}
.notes b{color:var(--ink)}

/* ---------------------------------------------------------------- support tiles */
.shout{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.shout a{border:1px solid var(--line);border-radius:var(--r);padding:28px;
  transition:border-color .2s,box-shadow .22s,transform .22s var(--ease)}
.shout a:hover{border-color:var(--ink);box-shadow:var(--sh-2);transform:translateY(-3px)}
.shout .si{width:46px;height:46px;border-radius:12px;background:var(--mint-50);display:flex;align-items:center;
  justify-content:center;margin-bottom:18px}
.shout .si svg{width:22px;height:22px;stroke:#00655C;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.shout h4{margin-bottom:8px}
.shout p{color:var(--slate);font-size:.9063rem}
.shout .tlink{margin-top:16px}

/* ---------------------------------------------------------------- footer */
footer.site{background:var(--ink);color:rgba(255,255,255,.72);padding-top:clamp(44px,5vw,72px)}
footer.site .top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:34px;padding-bottom:40px}
footer.site .fb svg{height:32px;width:auto;margin-bottom:18px}
footer.site .fb p{font-size:.9063rem;max-width:23rem;line-height:1.7}
footer.site h5{color:#fff;font-size:.9375rem;font-weight:700;margin-bottom:16px}
footer.site ul{display:grid;gap:11px}
footer.site a{font-size:.9063rem;transition:color .18s}
footer.site a:hover{color:#fff}
.socs{display:flex;gap:10px;margin-top:20px}
.socs a{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.09);display:flex;
  align-items:center;justify-content:center;transition:background .2s,transform .2s var(--ease)}
.socs a:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.socs svg{stroke:#fff;fill:none;stroke-width:2}
footer.site .legal{border-top:1px solid rgba(255,255,255,.10);padding:24px 0;font-size:.75rem;line-height:1.7;color:#8A90A6}
footer.site .legal b{color:#fff}
footer.site .bot{border-top:1px solid rgba(255,255,255,.10);padding:20px 0;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.8125rem}
footer.site .bot nav{display:flex;gap:20px;flex-wrap:wrap}

/* ---------------------------------------------------------------- reveal + mobile bar */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line-soft);
  transform:translateY(110%);transition:transform .3s var(--ease)}
.mbar.up{transform:translateY(0)}
.mbar .btn{flex:1;padding:15px 16px;font-size:.9375rem}
.mbar .btn.call{flex:0 0 56px;padding:15px 0}
.scroll-hint,.tbl-hint{display:none;align-items:center;justify-content:center;gap:8px;margin-top:12px;
  font-size:.8125rem;font-weight:700;color:var(--slate-2)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1120px){
  .benefits ul{grid-template-columns:repeat(3,1fr)}
  .plans.four{grid-template-columns:repeat(2,1fr)}
  .bento-a{grid-template-columns:repeat(2,1fr)}
  .bento-b{grid-template-columns:repeat(2,1fr)}
  .bento-b .w2{grid-column:span 2}
  .devices,.shout,.startrow{grid-template-columns:1fr 1fr}
  .cov-grid,.pair,.res-grid{grid-template-columns:1fr}
  .mega{min-width:500px}
  footer.site .top{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:900px){
  .mainnav,.hdr > .wrap > .right .signin,.hdr > .wrap > .right .btn{display:none}
  .burger{display:flex}
  .mbar{display:flex}
  footer.site{padding-bottom:78px}
  .htiles{grid-template-columns:1fr;gap:20px}
  .util a{padding:12px;display:inline-flex;align-items:center;min-height:44px}
  .util .wrap{height:50px;overflow-x:auto;scrollbar-width:none}
  .util .wrap::-webkit-scrollbar{display:none}
  .util a[href="coverage.html"],.util a[href="support.html"],.util a[hreflang="es"],.util .sep{display:none}
  .util .right .sep{display:block}
  .hdr > .wrap{height:66px}
  .logo{min-height:44px;align-items:center}
  .crumb a,.tlink,.shout a,footer.site a{min-height:44px}
  footer.site ul{gap:2px}
  footer.site ul a{display:flex;align-items:center;padding:11px 0}
  .res-map{min-height:300px;order:-1}
}
@media (max-width:760px){
  /* superseded by --sect-y, which already clamps to 40px at this width;
     leaving 44px here reintroduced an 84/88px alternation on phones */
  h2{font-size:clamp(1.7rem,7vw,2.1rem)}
  .benefits ul{grid-template-columns:1fr 1fr;gap:18px}
  .startrow,.devices,.shout{grid-template-columns:1fr}
  .bento-a,.bento-b{grid-template-columns:1fr;gap:16px}
  .bento-b .w2{grid-column:span 1}
  .tile.tall{min-height:340px}
  .tile.sq{min-height:240px}
  .htile{min-height:400px;padding:24px}
  .benefits{padding:24px 20px}
  .picker{flex-direction:column;align-items:stretch;gap:18px}
  .ptabs{overflow-x:auto;scrollbar-width:none}
  .ptabs::-webkit-scrollbar{display:none}
  /* Plans stack on a phone. This was a swipe carousel with an 84vw peek; a
     horizontal scroll hides two of the three plans behind a gesture nothing
     on the page teaches, and it fights the page's own vertical scroll. */
  .plans,.plans.three,.plans.four{grid-auto-flow:row;grid-auto-columns:auto;
    grid-template-columns:1fr;overflow-x:visible;gap:16px;padding:0;
    scroll-snap-type:none;scroll-padding-inline:0}
  .plan{scroll-snap-align:none}
  .plan .pd,.plan .sub{min-height:0}
  /* the comparison table still scrolls sideways, so its hint stays */
  .tbl-hint{display:flex}
  .scroll-hint{display:none}
  .zip{flex-direction:column;border-radius:var(--r);padding:12px}
  .zip .btn{width:100%}
  .addr{flex-direction:column;align-items:stretch;border-radius:var(--r);padding:12px}
  .addr .go{display:none}
  footer.site .top{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* ==========================================================================
   COMPAT LAYER — restyles the components carried over from the other pages
   into the Total language: hairline borders, 16px radii, ink/orange pills.
   ========================================================================== */
/* bottom padding is half the standard gap, so a page hero sits the same
   distance from the band below it as any two bands sit from each other */
.phero{position:relative;overflow:hidden;padding:clamp(34px,4vw,60px) 0 var(--sect-y);
  border-bottom:1px solid var(--line-soft);background:#fff}
.phero h1{margin:14px 0 14px}
.phero p.lead{color:var(--slate);font-size:clamp(1rem,1.2vw,1.125rem);max-width:44rem}
.phero .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.crumb{display:flex;gap:8px;align-items:center;font-size:.8125rem;color:var(--slate-2);font-weight:600;margin-bottom:8px}
.crumb a:hover{color:var(--blue-700)}
.crumb svg{opacity:.5}

/* generic card-ish blocks -> hairline card */
.prod,.deal,.tcard,.scard,.hc,.step,.card,.pt-wrap,.cmp-wrap,.tbl-wrap,.checker,.benefits,.res-grid{
  border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:none}
.prod:hover,.deal:hover,.tcard:hover,.scard:hover,.hc:hover,.step:hover{
  border-color:var(--ink);box-shadow:var(--sh-2);transform:translateY(-3px)}
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.prods.g3{grid-template-columns:repeat(3,1fr)}
.prods.g4{grid-template-columns:repeat(4,1fr)}
.prod{overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .22s,transform .22s var(--ease)}
.prod .ph{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--bg-2)}
.prod .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.prod:hover .ph img{transform:scale(1.05)}
.prod .tag{position:absolute;top:14px;left:14px;z-index:2;background:#fff;color:var(--ink);font-size:.75rem;
  font-weight:700;padding:6px 12px;border-radius:var(--r-pill)}
.prod .tag.hot{background:var(--orange);color:var(--ink)}
.prod .bd{padding:24px;display:flex;flex-direction:column;flex:1}
.prod .bd > .eyebrow{align-self:flex-start}
.prod h3{margin-bottom:8px}
.prod p{color:var(--slate);font-size:.9063rem;flex:1}
.prod .price{margin-top:16px;font-weight:700;font-size:1.4rem}
.prod .price small{font-size:.8125rem;color:var(--slate-2);font-weight:600}
.prod .go{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9375rem;
  border-bottom:2px solid var(--ink);align-self:flex-start;padding-bottom:2px}

.deals{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.deal{overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .22s,transform .22s var(--ease)}
.deal .ribbon{background:var(--mint-50);color:#00655C;font-size:.8125rem;font-weight:700;padding:11px 18px;
  display:flex;align-items:center;gap:8px;justify-content:center}
.deal .ribbon.hot{background:var(--orange);color:var(--ink)}
.deal .ph{aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.deal .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.deal:hover .ph img{transform:scale(1.05)}
.deal .bd{padding:24px;display:flex;flex-direction:column;flex:1}
.deal .kick{font-size:.8125rem;font-weight:700;color:var(--slate-2);margin-bottom:10px}
.deal h3{margin-bottom:10px}
.deal p{color:var(--slate);font-size:.9063rem;flex:1}
.deal .terms{margin-top:14px;font-size:.75rem;color:var(--slate-2)}
.deal .terms a{text-decoration:underline}

/* bento from the other pages -> Total tiles */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(190px,auto);gap:24px;grid-auto-flow:dense}
.bx{position:relative;border-radius:var(--r);overflow:hidden;padding:28px;display:flex;flex-direction:column;
  justify-content:flex-end;transition:transform .3s var(--ease),box-shadow .3s;isolation:isolate;color:#fff}
.bx:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
.bx .bgimg{position:absolute;inset:0;z-index:-2}
.bx .bgimg img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.bx:hover .bgimg img{transform:scale(1.06)}
.bx .scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,7,46,.08),rgba(0,7,46,.58) 52%,rgba(0,7,46,.92))}
.bx h3,.bx h4{color:#fff;margin-bottom:7px}
.bx p{font-size:.9063rem;line-height:1.5;color:rgba(255,255,255,.85)}
.bx.g-blue{background:var(--g-blue)}
.bx.g-orange{background:var(--g-orange);color:var(--ink)}
.bx.g-orange h3,.bx.g-orange h4{color:var(--ink)}
.bx.g-orange p{color:rgba(0,7,46,.78)}
.bx.g-purple{background:linear-gradient(135deg,#2020E0,#0012B5)}
.bx.g-teal{background:linear-gradient(135deg,#00C8B7,#00655C)}
.bx.g-dark{background:var(--g-ink)}
.bx.plain{background:#fff;border:1px solid var(--line);color:var(--ink)}
.bx.plain h3,.bx.plain h4{color:var(--ink)}
.bx.plain p{color:var(--slate)}
.bx .bic{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;
  align-items:center;justify-content:center;margin-bottom:auto}
.bx.plain .bic{background:var(--blue-50)}
.bx .bic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.bx.plain .bic svg{stroke:var(--blue)}
.bx.g-orange .bic{background:rgba(0,7,46,.14)}
.bx.g-orange .bic svg{stroke:var(--ink)}
.bx .corner{position:absolute;top:22px;right:22px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;transition:.22s}
.bx.plain .corner{background:var(--bg-2)}
.bx:hover .corner{background:#fff;transform:rotate(-45deg)}
.bx .corner svg{stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .22s}
.bx:hover .corner svg,.bx.plain .corner svg{stroke:var(--ink)}
.bx .stat{font-size:clamp(2rem,3vw,2.8rem);font-weight:700;letter-spacing:-.02em;line-height:1;margin-bottom:8px}
.c2{grid-column:span 2}.c3{grid-column:span 3}.r2{grid-row:span 2}
.bx.tall{min-height:400px}

/* dark panels */
.bundle,.fcta{position:relative;border-radius:var(--r);overflow:hidden;background:var(--g-ink);color:#fff;
  padding:clamp(28px,3.4vw,52px);box-shadow:none}
.fcta{text-align:center}
.bundle::after,.fcta::before,.fcta::after{display:none}
.bundle h2,.fcta h2{color:#fff;margin:14px 0 12px}
.bundle p,.fcta p{color:rgba(255,255,255,.85)}
.fcta p{max-width:44rem;margin:14px auto 0}
.fcta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.fcta .fine{margin-top:18px;font-size:.75rem;color:rgba(255,255,255,.6)}
.bundle-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3vw,48px);align-items:center}
.bundle .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.calc{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:26px}
.calc h4{color:#fff;margin-bottom:16px}
.calc .line{display:flex;align-items:center;justify-content:space-between;padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.14);font-size:.9063rem}
.calc .line b{font-weight:700}
.calc .line.save{color:#7DE3AE}
.calc .total{display:flex;align-items:baseline;justify-content:space-between;padding-top:18px}
.calc .total span{font-weight:700}
.calc .total b{font-size:2.2rem;font-weight:700}
.calc .note{margin-top:8px;font-size:.75rem;color:rgba(255,255,255,.6)}
.savebadge{display:inline-flex;flex-direction:column;align-items:center;background:var(--orange);color:var(--ink);
  border-radius:var(--r);padding:14px 24px;margin-top:18px}
.savebadge b{font-size:1.7rem;font-weight:700;line-height:1}
.savebadge span{font-size:.75rem;font-weight:700;margin-top:4px}
.bd-list{display:grid;gap:10px;margin-top:22px}
.bd-list li{display:flex;gap:10px;align-items:flex-start;font-size:.9375rem;color:rgba(255,255,255,.9)}
.bd-list svg{flex:none;margin-top:4px;width:16px;height:16px;fill:none;stroke:#7DE3AE;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.preview-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,147,30,.2);
  border:1px solid rgba(255,147,30,.45);color:#FFD9A8;border-radius:var(--r-pill);padding:7px 16px;
  font-size:.75rem;font-weight:700}
.preview-tag.solid{background:var(--orange-50);border-color:rgba(255,147,30,.5);color:#B45309}

/* streaming */
.stream-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.sv-card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-sm);
  padding:20px 14px;display:flex;align-items:center;justify-content:center;min-height:88px;transition:background .22s}
.sv-card:hover{background:rgba(255,255,255,.18)}
.sv-card img{width:auto;filter:brightness(0) invert(1)}
.sv-card img[alt="HBO Max"]{height:36px}
.sv-card img[alt="Hulu"]{height:24px}
.sv-card img[alt="Disney+"]{height:42px}
.sv-card img[alt="Netflix"]{height:20px}
.slogos{display:flex;gap:clamp(18px,3vw,40px);align-items:center;flex-wrap:wrap;justify-content:center;margin-top:24px}
.slogos img{height:28px;width:auto}
.slogo-chip{position:relative;display:flex;align-items:center;justify-content:center;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 16px;min-width:94px;min-height:50px}
.slogo-chip.dk{background:var(--ink);border-color:var(--ink)}
.slogo-chip img{width:auto}
.slogo-chip img[alt="HBO Max"]{height:26px}
.slogo-chip img[alt="Hulu"]{height:17px}
.slogo-chip img[alt="Disney+"]{height:30px}
.slogo-chip img[alt="Netflix"]{height:15px}
.slogo-chip .addon-tag{position:absolute;top:-9px;right:-8px;background:var(--ink);color:#fff;font-size:.625rem;
  font-weight:700;font-style:normal;padding:3px 8px;border-radius:var(--r-pill)}
.stream-inc .lbl{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;
  color:#B45309;background:var(--orange-50);padding:7px 14px;border-radius:var(--r-pill);margin-bottom:14px}
.chips-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chip-note{font-size:.8125rem;color:var(--slate-2);margin-top:12px}
.plan .stream-mini{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:14px 0 0;
  background:var(--orange-50);border-radius:var(--r-sm);padding:12px}
.plan .stream-mini .t{width:100%;font-size:.6875rem;font-weight:700;color:#B45309;margin-bottom:2px}
.plan .stream-mini span{background:#fff;border-radius:6px;padding:6px 9px;display:flex;align-items:center;min-height:32px}
.plan .stream-mini span.dk{background:var(--ink)}
.plan .stream-mini img{height:15px;width:auto}
.plan .stream-mini img[alt="HBO Max"]{height:19px}
.plan .stream-mini img[alt="Disney+"]{height:21px}

/* wide Elite card from plans.html */
.plan-wide{position:relative;background:#fff;border:2px solid var(--ink);border-radius:var(--r);margin-top:26px;
  overflow:hidden;display:grid;grid-template-columns:minmax(260px,.86fr) 1.35fr minmax(212px,.66fr)}
.plan-wide .flag{position:absolute;top:0;left:36px;background:var(--orange);color:var(--ink);font-size:.75rem;
  font-weight:700;padding:7px 18px;border-radius:0 0 10px 10px;z-index:2}
.pw-a{padding:44px 30px 32px;background:var(--bg-2);border-right:1px solid var(--line-soft)}
.pw-a .pn{font-size:1.6rem;font-weight:700}
.pw-a .pd{color:var(--slate);font-size:.9375rem;margin-top:8px}
.pw-a .pp{display:flex;align-items:baseline;gap:4px;margin:20px 0 4px}
.pw-a .pp .num{font-size:3rem;font-weight:700;letter-spacing:-.02em}
.pw-a .pp .cur{font-size:1.4rem;font-weight:700;align-self:flex-start;margin-top:8px}
.pw-a .pp .per{color:var(--slate);font-size:1rem;font-weight:600}
.pw-a .sub{color:var(--slate-2);font-size:.8438rem}
.pw-a .save{display:inline-flex;align-items:center;gap:8px;margin-top:16px;background:var(--mint-50);color:#00655C;
  border-radius:var(--r-pill);padding:9px 16px;font-size:.8438rem;font-weight:700}
.pw-b{padding:44px 32px 32px;display:flex;flex-direction:column;gap:20px}
.gw{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.gw .box{display:flex;align-items:center;gap:11px;background:var(--blue-50);border-radius:var(--r-sm);padding:13px 17px}
.gw .box svg{width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gw .box b{display:block;font-size:.875rem;font-weight:700;line-height:1.2}
.gw .box span{font-size:.75rem;color:var(--slate-2)}
.gw .plus{font-weight:700;font-size:1.2rem;color:var(--slate-2)}
.pw-b ul{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.pw-b li{display:flex;gap:10px;align-items:flex-start;font-size:.9063rem}
.pw-b li svg{flex:none;margin-top:4px;width:16px;height:16px;fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pw-c{padding:44px 28px 32px;background:var(--bg-2);border-left:1px solid var(--line-soft);
  display:flex;flex-direction:column;justify-content:center;gap:14px}
.pw-c .btn{width:100%}
.pw-c .note{font-size:.75rem;color:var(--slate-2);text-align:center;line-height:1.5}

/* misc carried-over components */
.tabs{display:inline-flex;border-bottom:2px solid var(--line-soft);gap:4px;margin-inline:auto;background:none;padding:0;border-radius:0}
.tabs button{padding:12px 22px;font-weight:700;font-size:1rem;color:var(--slate);position:relative;
  border-radius:0;background:none;box-shadow:none}
.tabs button.on{color:var(--ink);background:none;box-shadow:none}
.tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--ink);border-radius:2px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{padding:30px;transition:border-color .2s,box-shadow .22s,transform .22s var(--ease)}
.step .n{width:44px;height:44px;border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.1rem;margin-bottom:16px;background:var(--ink)}
.step:nth-child(2) .n{background:var(--orange);color:var(--ink)}
.step:nth-child(3) .n{background:var(--blue)}
.step p{color:var(--slate);font-size:.9375rem;margin-top:8px}
.tstm{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{padding:26px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s,box-shadow .22s,transform .22s var(--ease)}
.stars{display:flex;gap:2px}
.stars svg{width:16px;height:16px;fill:var(--orange)}
.tcard q{font-size:1rem;line-height:1.6;quotes:none}
.who{display:flex;align-items:center;gap:12px;margin-top:auto}
.who img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.who b{display:block;font-size:.9375rem;font-weight:700}
.who span{font-size:.8125rem;color:var(--slate-2)}
.sup{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.scard{display:flex;gap:16px;align-items:flex-start;padding:26px;transition:border-color .2s,box-shadow .22s,transform .22s var(--ease)}
.scard .si{width:46px;height:46px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--mint-50)}
.scard .si svg{width:22px;height:22px;stroke:#00655C;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.scard p{color:var(--slate);font-size:.9063rem;margin-top:5px}
.help{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.help.g3{grid-template-columns:repeat(3,1fr)}
.hc{padding:26px;transition:border-color .2s,box-shadow .22s,transform .22s var(--ease)}
.hc .si{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:var(--blue-50)}
.hc .si svg{width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.hc ul{display:grid;gap:9px;margin-top:14px}
.hc ul a{font-size:.9063rem;color:var(--slate);display:flex;align-items:center;gap:8px}
.hc ul a:hover{color:var(--blue-700)}
.status{display:flex;align-items:center;gap:14px;background:var(--mint-50);border:1px solid #A7F3D0;color:#00655C;
  border-radius:var(--r);padding:16px 22px;font-size:.9375rem;flex-wrap:wrap}
.status .d{width:11px;height:11px;border-radius:50%;background:var(--green);flex:none}
.awards{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);padding:clamp(28px,3.4vw,48px);text-align:center}
.awards h3{margin-bottom:10px}
.awards p{color:var(--slate);max-width:44rem;margin-inline:auto}
.awards .logos{display:flex;gap:clamp(20px,4vw,48px);justify-content:center;align-items:center;flex-wrap:wrap;margin-top:28px}
.awards .logos span{font-weight:700;font-size:1rem;color:var(--slate-2)}
.search-big{display:flex;gap:10px;background:#fff;padding:8px;border-radius:var(--r-pill);border:2px solid var(--line)}
.search-big input{border:0;outline:0;background:none;width:100%;font-size:1rem;min-width:0;padding:12px 0}
table.pt{width:100%;border-collapse:collapse;min-width:900px}
table.pt th,table.pt td{padding:16px 18px;border-bottom:1px solid var(--line-soft);font-size:.9063rem;text-align:center}
table.pt thead th{background:var(--bg-2);font-weight:700;position:sticky;top:0;z-index:2}
table.pt thead th.pop{background:transparent;color:var(--ink)}
table.pt tbody th{text-align:left;font-weight:700;background:#fff;position:sticky;left:0;z-index:1}
table.pt td.pop{background:transparent;font-weight:700}
table.pt tbody tr:hover td{background:var(--bg-2)}
table.pt .y{stroke:var(--green);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
table.pt .dash{color:var(--line);font-weight:700}
.pt-scroll,.cmp-scroll,.tbl-scroll{overflow-x:auto}
.led td .sw{width:16px;height:16px;border-radius:50%;display:inline-block;vertical-align:-3px;margin-right:10px}
.zipres{margin-top:14px;display:none;gap:10px;align-items:flex-start;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r-sm);padding:14px 17px;font-size:.9375rem;max-width:520px}
.zipres.show{display:flex}
.usmap{width:100%;height:auto}

@media (max-width:1120px){
  .prods,.prods.g4,.deals{grid-template-columns:repeat(2,1fr)}
  .prods.g3,.help,.help.g3,.tstm,.sup,.steps{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:repeat(2,1fr)}
  .c3{grid-column:span 2}
  .bundle-grid,.pw-b ul{grid-template-columns:1fr}
  .plan-wide{grid-template-columns:1fr 1fr}
  .pw-c{grid-column:1/-1;border-left:0;border-top:1px solid var(--line-soft);flex-direction:row;
    align-items:center;justify-content:space-between;padding:24px 32px}
  .pw-c .btn{width:auto;min-width:220px}
}
@media (max-width:760px){
  .prods,.prods.g3,.prods.g4,.deals,.help,.help.g3,.tstm,.sup,.steps,.bento{grid-template-columns:1fr}
  .c2,.c3{grid-column:span 1}
  .bx.tall,.bx.r2{min-height:280px}
  .plan-wide{grid-template-columns:1fr}
  .pw-a{border-right:0;border-bottom:1px solid var(--line-soft)}
  .pw-c{flex-direction:column;align-items:stretch;padding:24px}
  .pw-c .btn{width:100%}
  .stream-grid{grid-template-columns:repeat(2,1fr)}
  .bundle,.fcta{padding:28px 20px}
}
@media (max-width:900px){ .tile .tlink,.announce a{min-height:44px} }
@media (max-width:900px){ .hc ul a{min-height:44px;padding:6px 0} }

/* ==========================================================================
   V2 — EXPANDED BENTO VARIATIONS
   Six distinct arrangements so the page never repeats the same rhythm.
   ========================================================================== */

/* C · feature mosaic: one tall hero tile beside a 2x2 of smaller tiles */
.bento-c{display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-auto-rows:minmax(190px,1fr);gap:24px}
.bento-c .lead{grid-row:span 2}

/* D · stat strip: four compact tiles carrying a number each */
.bento-d{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* E · offset: a wide tile then three under it */
.bento-e{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bento-e .full{grid-column:1/-1}

/* F · split tile: photo one side, copy the other, inside a single card */
.split-tile{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:#fff;transition:border-color .2s,box-shadow .22s,transform .22s var(--ease)}
.split-tile:hover{border-color:var(--ink);box-shadow:var(--sh-2);transform:translateY(-3px)}
.split-tile.rev .st-ph{order:2}
.split-tile .st-ph{position:relative;min-height:340px;overflow:hidden;background:var(--bg-2)}
.split-tile .st-ph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  transition:transform .55s var(--ease)}
.split-tile:hover .st-ph img{transform:scale(1.04)}
.split-tile .st-bd{padding:clamp(28px,3vw,46px);display:flex;flex-direction:column;justify-content:center}
.split-tile .st-bd h3{font-size:clamp(1.3rem,2vw,1.75rem);margin-bottom:12px}
.split-tile .st-bd p{color:var(--slate);font-size:.9688rem}
.split-tile .st-bd .tlink{margin-top:20px;align-self:flex-start}
.split-tile.dark{background:var(--g-ink);border-color:transparent;color:#fff}
.split-tile.dark h3{color:#fff}
.split-tile.dark p{color:rgba(255,255,255,.85)}
.split-tile.dark .tlink{color:#fff;border-color:#fff}

/* stat tile */
.tile.stat-tile{justify-content:center;text-align:center;align-items:center;min-height:220px}
.tile.stat-tile .stat{font-size:clamp(2.4rem,4vw,3.4rem);margin-bottom:6px}
.tile.stat-tile p{max-width:22rem}

/* quote tile */
.tile.quote-tile{justify-content:flex-end}
.tile.quote-tile q{font-size:1.0625rem;line-height:1.6;quotes:none;display:block;margin-bottom:16px}
.tile.quote-tile .qw{display:flex;align-items:center;gap:11px}
.tile.quote-tile .qw img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.tile.quote-tile .qw b{display:block;font-size:.9063rem}
.tile.quote-tile .qw > span > span{font-size:.8125rem;opacity:.72}
.tile.quote-tile .qw .av{flex:none;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:.8125rem;letter-spacing:.02em;
  background:linear-gradient(140deg,var(--blue,#0012b5),var(--teal,#00C8B7));color:#fff;opacity:1}
.tile.quote-tile.s-mint .qw .av,.tile.quote-tile.plain .qw .av{color:#fff}

/* checklist tile */
.tile .checks{display:grid;gap:10px;margin-top:14px}
.tile .checks li{display:flex;gap:10px;align-items:flex-start;font-size:.9063rem;line-height:1.45}
.tile .checks svg{flex:none;margin-top:3px;width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.9}

/* logo/press strip */
.press{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.press .wrap{display:flex;align-items:center;gap:clamp(20px,4vw,54px);padding-block:26px;
  flex-wrap:wrap;justify-content:center}
.press .lbl{font-size:.8125rem;font-weight:700;color:var(--slate-2)}
.press span.n{font-weight:700;font-size:1.05rem;color:var(--slate-2);transition:color .2s}
.press span.n:hover{color:var(--ink)}

/* comparison strip: us vs them, Total-ish bar chart */
.vs{border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,3vw,40px)}
.vs-rows{display:grid;gap:16px;margin-top:24px}
.vs-row{display:grid;grid-template-columns:150px 1fr 90px;gap:16px;align-items:center}
.vs-row .nm{font-weight:700;font-size:.9375rem}
.vs-row .bar{height:38px;border-radius:var(--r-pill);background:var(--bg-2);
  border:1px solid var(--line);overflow:hidden}
.vs-row .bar i{display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,#C9CCD6,#AAAFBE);transition:width 1s var(--ease)}
.vs-row.us .bar i{background:var(--g-blue)}
.vs-row.us .nm{color:var(--blue)}
.vs-row .amt{font-weight:700;text-align:right;font-size:1.0625rem}
.vs .note{margin-top:18px;font-size:.75rem;color:var(--slate-2)}

/* step rail */
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rail .r{padding:28px 26px;border-right:1px solid var(--line-soft);position:relative}
.rail .r:last-child{border-right:0}
.rail .n{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:.9375rem;margin-bottom:14px}
.rail h4{margin-bottom:6px}
.rail p{color:var(--slate);font-size:.9063rem}

@media (max-width:1120px){
  .bento-c{grid-template-columns:1fr 1fr}
  .bento-c .lead{grid-row:span 1;min-height:340px}
  .bento-d{grid-template-columns:repeat(2,1fr)}
  .bento-e{grid-template-columns:repeat(2,1fr)}
  .rail{grid-template-columns:1fr 1fr}
  .rail .r:nth-child(2n){border-right:0}
  .rail .r:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
}
@media (max-width:760px){
  .bento-c,.bento-d,.bento-e{grid-template-columns:1fr;gap:16px}
  .bento-e .full{grid-column:span 1}
  .split-tile,.split-tile.rev{grid-template-columns:1fr}
  .split-tile .st-ph,.split-tile.rev .st-ph{order:0;min-height:230px}
  .rail{grid-template-columns:1fr}
  .rail .r{border-right:0;border-bottom:1px solid var(--line-soft)}
  .rail .r:last-child{border-bottom:0}
  .vs-row{grid-template-columns:110px 1fr 70px;gap:10px}
  .vs-row .nm{font-size:.8438rem}
}

/* ==========================================================================
   IMAGELESS TILE BACKGROUNDS
   Soft gradient washes + a low-contrast motif, the way Total treats tiles
   that carry no photography. All CSS — no extra image requests.
   ========================================================================== */
.tile[class*="bg-"]{position:relative;isolation:isolate}
.tile[class*="bg-"]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}

/* glow · a soft off-centre light source */
.bg-glow::before{background:
  radial-gradient(680px 420px at 82% -10%,rgba(255,255,255,.26),transparent 62%),
  radial-gradient(520px 380px at 4% 108%,rgba(255,147,30,.30),transparent 60%)}
.tile.s-mint.bg-glow::before,.tile.plain.bg-glow::before{background:
  radial-gradient(620px 400px at 84% -12%,rgba(0,18,181,.10),transparent 62%),
  radial-gradient(460px 340px at 0% 106%,rgba(0,200,183,.22),transparent 60%)}

/* rings · concentric arcs, a nod to the Waveie wavemark */
.bg-rings::before{background-image:
  repeating-radial-gradient(circle at 92% 8%,rgba(255,255,255,.10) 0 1px,transparent 1px 44px)}
.tile.s-mint.bg-rings::before,.tile.plain.bg-rings::before{background-image:
  repeating-radial-gradient(circle at 92% 8%,rgba(0,18,181,.09) 0 1px,transparent 1px 44px)}

/* dots · fine grid, fading out toward the copy */
.bg-dots::before{background-image:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px);
  background-size:18px 18px;
  -webkit-mask-image:linear-gradient(200deg,#000 0%,rgba(0,0,0,.25) 62%,transparent 88%);
  mask-image:linear-gradient(200deg,#000 0%,rgba(0,0,0,.25) 62%,transparent 88%)}
.tile.s-mint.bg-dots::before,.tile.plain.bg-dots::before{
  background-image:radial-gradient(rgba(0,18,181,.16) 1.4px,transparent 1.4px)}

/* waves · stacked sine bands built from layered radial gradients */
.bg-waves::before{background-image:
  radial-gradient(120% 62px at 50% 0,transparent 60%,rgba(255,255,255,.11) 61%),
  radial-gradient(120% 62px at 50% 96px,transparent 60%,rgba(255,255,255,.09) 61%),
  radial-gradient(120% 62px at 50% 192px,transparent 60%,rgba(255,255,255,.07) 61%),
  radial-gradient(120% 62px at 50% 288px,transparent 60%,rgba(255,255,255,.05) 61%);
  background-repeat:no-repeat}
.tile.s-mint.bg-waves::before,.tile.plain.bg-waves::before{background-image:
  radial-gradient(120% 62px at 50% 0,transparent 60%,rgba(0,18,181,.10) 61%),
  radial-gradient(120% 62px at 50% 96px,transparent 60%,rgba(0,18,181,.08) 61%),
  radial-gradient(120% 62px at 50% 192px,transparent 60%,rgba(0,18,181,.06) 61%),
  radial-gradient(120% 62px at 50% 288px,transparent 60%,rgba(0,18,181,.05) 61%)}

/* blob · one oversized soft shape bleeding off a corner */
.bg-blob::before{background:
  radial-gradient(58% 62% at 100% 0%,rgba(255,255,255,.16),transparent 68%),
  radial-gradient(46% 52% at -12% 100%,rgba(255,255,255,.12),transparent 66%)}
.tile.s-mint.bg-blob::before,.tile.plain.bg-blob::before{background:
  radial-gradient(58% 62% at 100% 0%,rgba(0,18,181,.10),transparent 68%),
  radial-gradient(46% 52% at -12% 100%,rgba(0,200,183,.22),transparent 66%)}

/* grid · architectural hairlines */
.bg-grid::before{background-image:
  linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 100% at 100% 0,#000,transparent 72%);
  mask-image:radial-gradient(120% 100% at 100% 0,#000,transparent 72%)}
.tile.s-mint.bg-grid::before,.tile.plain.bg-grid::before{background-image:
  linear-gradient(rgba(0,18,181,.09) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,18,181,.09) 1px,transparent 1px)}

/* the orange tile reads on ink, so its motifs invert */
.tile.s-orange.bg-glow::before{background:
  radial-gradient(640px 420px at 86% -10%,rgba(255,255,255,.42),transparent 62%),
  radial-gradient(460px 340px at 0% 106%,rgba(0,7,46,.14),transparent 60%)}
.tile.s-orange.bg-rings::before{background-image:
  repeating-radial-gradient(circle at 92% 8%,rgba(0,7,46,.10) 0 1px,transparent 1px 44px)}
.tile.s-orange.bg-dots::before{background-image:radial-gradient(rgba(0,7,46,.16) 1.4px,transparent 1.4px);
  background-size:18px 18px}
.tile.s-orange.bg-grid::before{background-image:
  linear-gradient(rgba(0,7,46,.09) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,7,46,.09) 1px,transparent 1px)}
.tile.s-orange.bg-blob::before{background:
  radial-gradient(58% 62% at 100% 0%,rgba(255,255,255,.34),transparent 68%),
  radial-gradient(46% 52% at -12% 100%,rgba(0,7,46,.12),transparent 66%)}

/* same treatment for the compat bento tiles on the other pages */
.bx[class*="bg-"]{position:relative}
.bx[class*="bg-"]::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.bx.bg-glow::after{background:
  radial-gradient(680px 420px at 82% -10%,rgba(255,255,255,.24),transparent 62%),
  radial-gradient(520px 380px at 4% 108%,rgba(255,147,30,.26),transparent 60%)}
.bx.bg-dots::after{background-image:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px);
  background-size:18px 18px;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 88%);mask-image:linear-gradient(200deg,#000,transparent 88%)}
.bx.bg-rings::after{background-image:repeating-radial-gradient(circle at 92% 8%,rgba(255,255,255,.10) 0 1px,transparent 1px 44px)}
.bx.bg-grid::after{background-image:
  linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 100% at 100% 0,#000,transparent 72%);
  mask-image:radial-gradient(120% 100% at 100% 0,#000,transparent 72%)}

/* ==========================================================================
   IMAGE FALLBACKS — if a photo can't load, the holder keeps its shape and
   fills with brand colour instead of showing a broken-image glyph.
   ========================================================================== */
.bgi.img-off, .bgimg.img-off, .st-ph.img-off, .ph.img-off{
  background:linear-gradient(150deg,var(--ink) 0%,#141a4a 46%,var(--blue,#0012b5) 100%);
}
.ph.img-off, .st-ph.img-off{ min-height:220px }

/* ==========================================================================
   BROADBAND FACTS — FCC consumer-disclosure label, expandable on each plan.
   Deliberately typeset like the FDA-style label the FCC modelled it on:
   heavy rules, condensed rows, no brand colour inside the label body.
   ========================================================================== */
.bbf{margin-top:18px;border-top:1px solid var(--line-soft);padding-top:14px}
.bbf > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:10px;font-weight:700;font-size:.8125rem;
  letter-spacing:.01em;color:var(--slate);padding:4px 0;min-height:36px}
.bbf > summary::-webkit-details-marker{display:none}
.bbf > summary:hover{color:var(--ink)}
.bbf > summary .lbl{display:flex;align-items:center;gap:8px}
.bbf > summary .lbl svg{flex:none;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.bbf > summary .cv{flex:none;width:22px;height:22px;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--line);transition:transform .22s var(--ease)}
.bbf > summary .cv svg{stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round}
.bbf[open] > summary .cv{transform:rotate(180deg)}

.bbf-card{margin-top:12px;border:2px solid #000330;border-radius:6px;background:#fff;
  color:#000330;padding:12px 12px 10px;font-size:.75rem;line-height:1.35;
  letter-spacing:0;text-align:left}
.bbf-card *{letter-spacing:0}
.bbf-card .ttl{font-size:1.25rem;font-weight:800;line-height:1.1;margin:0 0 2px}
.bbf-card .prov{font-weight:700;font-size:.8125rem}
.bbf-card .plan-nm{font-size:.75rem}
.bbf-card .svc{font-size:.6875rem;color:#4A4F66;margin-bottom:6px}
.bbf-card hr{border:0;margin:6px 0}
.bbf-card hr.thick{border-top:7px solid #000330}
.bbf-card hr.med{border-top:3px solid #000330}
.bbf-card hr.thin{border-top:1px solid #000330}

.bbf-card .r{display:flex;justify-content:space-between;gap:10px;padding:3px 0;
  border-bottom:1px solid #D8DAE4}
.bbf-card .r:last-child{border-bottom:0}
.bbf-card .r > span:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.bbf-card .r.big{font-size:.9375rem;font-weight:800;border-bottom:0;padding:4px 0;gap:6px}
.bbf-card .r.big > span:last-child{font-size:1.0625rem}
.bbf-card .r.ind{padding-left:12px;color:#333A5C}
.bbf-card .r.ind2{padding-left:22px;color:#4A4F66;font-size:.7188rem}
.bbf-card .sec{font-weight:800;font-size:.8125rem;padding:5px 0 3px}
.bbf-card .sub{font-weight:700;font-size:.75rem;padding:4px 0 2px}
.bbf-card .fine{font-size:.6875rem;color:#4A4F66;padding:3px 0}
.bbf-card a{color:#0012b5;text-decoration:underline;text-underline-offset:2px}
.bbf-card .pid{font-size:.6563rem;color:#4A4F66;word-break:break-all;padding-top:6px}
.bbf-card .yes{font-weight:700}

/* the Elite label sits in a wider column — let it use two columns there */
.plan-wide .bbf-card{columns:2;column-gap:26px;column-rule:1px solid #D8DAE4}
.plan-wide .bbf-card > *{break-inside:avoid}
.plan-wide .bbf-card .hdblock{column-span:all}
@media (max-width:900px){ .plan-wide .bbf-card{columns:1} }

@media (max-width:900px){
  .bbf-card{font-size:.8125rem}
  .bbf-card .r{padding:7px 0}
  .bbf-card a{display:inline-block;padding:7px 0;line-height:1.3}
  .bbf-card .fine a,.bbf-card .r a{min-height:24px}
}

/* ==========================================================================
   GATEWAY — annotated product presentation
   The device sits on a full-width stage so the leader lines have room; specs
   and the rear panel sit underneath in two columns.
   ========================================================================== */
.gwhero{border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3vw,44px) clamp(20px,3vw,44px) clamp(24px,3vw,40px);
  background:linear-gradient(168deg,#FFFFFF 0%,#F8FAFD 56%,#EFF3F9 100%)}

.gw-stage{position:relative;display:grid;place-items:center;
  padding:clamp(8px,2vw,20px) 0 clamp(16px,2.4vw,28px)}
/* the child combinator stopped matching once the shot was wrapped in a
   <picture> — display:contents removes the box, not the DOM nesting */
.gw-stage img{width:clamp(180px,20vw,262px);height:auto;display:block;
  filter:drop-shadow(0 26px 44px rgba(16,24,48,.14))}

.gw-note{position:absolute;top:0;display:flex;align-items:center;gap:14px;
  font-size:.875rem;font-weight:700;color:var(--ink)}
.gw-note .ln{flex:1 1 auto;min-width:26px;height:1px;background:var(--line);position:relative}
.gw-note .ln::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;
  background:var(--teal);transform:translateY(-50%);box-shadow:0 0 0 3px rgba(0,200,183,.16)}
.gw-note .tx{flex:none;max-width:15rem}
.gw-note small{display:block;font-weight:500;color:var(--slate-2);font-size:.8125rem;margin-top:2px}
.gw-note.l{left:0;right:calc(50% + clamp(70px,7.6vw,100px));justify-content:flex-end}
.gw-note.l .tx{order:1;text-align:right}
.gw-note.l .ln{order:2}
.gw-note.l .ln::after{right:-3px}
.gw-note.r{right:0;left:calc(50% + clamp(70px,7.6vw,100px))}
.gw-note.r .ln::after{left:-3px}

.gw-under{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px);align-items:start;
  border-top:1px solid var(--line);padding-top:clamp(24px,3vw,36px)}
.gw-copy .eyebrow{margin-bottom:14px}
.gw-copy h3{font-size:clamp(1.3125rem,2.1vw,1.75rem);font-weight:700;line-height:1.16;letter-spacing:.01em}
.gw-copy > p{color:var(--slate);margin-top:12px}
.gw-specs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.gw-specs li{background:#fff;padding:14px 16px}
.gw-specs b{display:block;font-size:.9375rem}
.gw-specs span{display:block;font-size:.8125rem;color:var(--slate-2);margin-top:2px}
.gw-ports{margin-top:18px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:16px 18px 12px}
.gw-ports img{width:100%;height:auto;display:block}
.gw-ports p{font-size:.75rem;color:var(--slate-2);margin-top:4px}

.prod .gwshot{display:grid;place-items:center;padding:24px 0 6px;
  background:linear-gradient(170deg,#FBFCFE,#EEF2F9);border-radius:12px;margin-bottom:20px}
.prod .gwshot img{height:clamp(150px,15vw,186px);width:auto;
  filter:drop-shadow(0 14px 26px rgba(16,24,48,.12))}
.prod .gwshot.two{grid-auto-flow:column;gap:16px}
.prod .gwshot.two img{height:clamp(120px,12vw,148px)}
/* the real unit is a narrower shape than the drawing it replaced, so the
   two-up pair can sit closer together without touching */
.prod .gwshot.two{gap:8px}

@media (max-width:1080px){
  .gw-note{font-size:.8125rem;gap:10px}
  .gw-note small{font-size:.75rem}
}
@media (max-width:860px){
  /* leader lines stop working once the stage narrows — become a plain list */
  .gw-stage{padding-bottom:0}
  .gw-note{position:static;gap:10px;margin:0}
  .gw-note .ln{display:none}
  .gw-note .tx{max-width:none}
  .gw-note.l{justify-content:flex-start}
  .gw-note.l .tx{text-align:left}
  .gw-notes{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-top:24px;width:100%}
  .gw-under{grid-template-columns:1fr}
}
@media (max-width:560px){
  .gw-specs{grid-template-columns:1fr}
  .gw-notes{grid-template-columns:1fr}
}

/* the gateway is a vector, so its card slot gets a lit stage rather than a crop */
/* `height:100%` on a grid item whose row track is sized by that same item is
   circular, so it resolved to the intrinsic height and `overflow:hidden` simply
   cropped the difference. That was survivable with the old 360x520 drawing; the
   real unit is 670x1258 and the cards showed only the top third of it. Centring
   absolutely against the box removes the circularity, and works whatever the
   photograph's proportions turn out to be. */
.device .ph.gwph,.prod .ph.gwph,.deal .ph.gwph{background:linear-gradient(168deg,#FCFDFE 0%,#F1F4FA 62%,#E8EDF6 100%);
  position:relative;padding:14px 0;overflow:hidden}
.device .ph.gwph img,.prod .ph.gwph img,.deal .ph.gwph img{position:absolute;
  inset:14px 0;margin:auto;width:auto;height:auto;
  max-width:100%;max-height:calc(100% - 28px);object-fit:contain;
  transition:transform .45s var(--ease);
  filter:drop-shadow(0 16px 28px rgba(16,24,48,.13))}
.device:hover .ph.gwph img,.prod:hover .ph.gwph img,.deal:hover .ph.gwph img{transform:translateY(-4px) scale(1.03)}

/* ==========================================================================
   $1 MEMBERSHIP — the one big promo bento. Built in the shape carriers use
   for a hero offer: an oversized number lockup on a colour field, with the
   explanation and the CTA on a white panel beside it.
   ========================================================================== */
.joinbento{display:grid;grid-template-columns:1.62fr 1fr;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:#fff;min-height:clamp(320px,30vw,420px)}

.jb-art{position:relative;display:flex;align-items:center;
  padding:clamp(28px,4vw,58px);color:#fff;background:var(--blue,#0012b5);isolation:isolate}
.jb-art::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(760px 520px at 84% -14%,rgba(255,255,255,.24),transparent 62%),
             radial-gradient(560px 420px at 2% 110%,rgba(255,147,30,.34),transparent 60%)}
.jb-art::after{content:"";position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.14) 1.4px,transparent 1.4px);
  background-size:20px 20px;
  -webkit-mask-image:linear-gradient(215deg,#000 0%,rgba(0,0,0,.3) 58%,transparent 86%);
          mask-image:linear-gradient(215deg,#000 0%,rgba(0,0,0,.3) 58%,transparent 86%)}

.jb-lock{display:flex;align-items:flex-start;gap:clamp(10px,1.4vw,20px);line-height:.86}
.jb-cur{font-size:clamp(34px,4.4vw,66px);font-weight:800;letter-spacing:-.01em;
  margin-top:clamp(8px,1.2vw,18px)}
.jb-num{font-size:clamp(110px,14.5vw,208px);font-weight:800;letter-spacing:-.045em;
  margin-top:-.06em}
.jb-words{font-size:clamp(32px,4.4vw,64px);font-weight:800;letter-spacing:-.02em;
  margin-top:clamp(10px,1.4vw,22px)}
.jb-sub{margin-top:clamp(14px,1.8vw,26px);font-size:clamp(16px,1.5vw,25px);font-weight:600;
  color:rgba(255,255,255,.86);letter-spacing:-.01em}

.jb-copy{padding:clamp(26px,3vw,46px);display:flex;flex-direction:column;justify-content:center}
.jb-eyebrow{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slate);margin-bottom:14px}
.jb-copy h2{font-size:clamp(1.75rem,3vw,2.75rem);font-weight:800;line-height:1.05;
  letter-spacing:-.015em;margin-bottom:14px}
.jb-copy > p{color:var(--slate);max-width:30rem;margin-bottom:20px}
.jb-copy .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.jb-fine{margin-top:18px;font-size:.75rem;color:var(--slate-2);line-height:1.6;max-width:32rem}
.jb-perks{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:7px}
.jb-perks li{position:relative;padding-left:25px;font-size:.9063rem;font-weight:600}
.jb-perks li svg{position:absolute;left:0;top:3px;stroke:var(--teal,#00C8B7);fill:none;
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:960px){
  .joinbento{grid-template-columns:1fr}
  .jb-art{padding:clamp(26px,7vw,40px) clamp(22px,6vw,34px)}
  .jb-lock{gap:8px}
  .jb-num{font-size:clamp(96px,26vw,160px)}
  .jb-words{font-size:clamp(30px,8.4vw,52px)}
  .jb-cur{font-size:clamp(28px,7vw,48px)}
}

/* v3: no rule between the plans hero and the grid */
.phero.bare{border-bottom:0}

/* v3 fix: the desktop nav needs ~1140px of header. Below that it overflowed the
   viewport between 900 and 1120 — switch to the burger across that range too. */
@media (max-width:1140px){
  .mainnav,
  .hdr > .wrap > .right .signin,
  .hdr > .wrap > .right .btn{display:none}
  .burger{display:flex}
}


/* ==========================================================================
   v3.1 — nav polish, billing toggle, membership strip
   ========================================================================== */

/* the dropdown trigger now reads as connected to its panel */
.mainnav > .item > button{position:relative;color:var(--ink)}
.mainnav > .item > button:hover{background:var(--bg-2)}
.mainnav > .item:hover > button,
.mainnav > .item:focus-within > button{background:var(--blue-50);color:var(--blue-700)}
.mainnav > .item > a:focus-visible,
.mainnav > .item > button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mainnav .caret{opacity:.55;transition:transform .2s var(--ease),opacity .2s}
.mainnav > .item:hover .caret,.mainnav > .item:focus-within .caret{opacity:1}

/* a notch tying the panel to the trigger */
.mega::after{content:"";position:absolute;top:-7px;left:30px;width:13px;height:13px;
  background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:rotate(45deg);border-radius:2px 0 0 0}
.mega{padding-top:12px}
.mega .mi{transition:transform .18s var(--ease)}
.mega > a:hover .mi{transform:scale(1.06)}
.mega > a b{transition:color .14s}
.mega > a:hover b{color:var(--blue-700)}
.mega > a{position:relative}
.mega > a::after{content:"";position:absolute;right:12px;top:50%;width:14px;height:14px;
  transform:translateY(-50%) translateX(-4px);opacity:0;transition:.16s var(--ease);
  background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230012b5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.mega > a:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.mega > a > span + span{padding-right:20px}

/* monthly / annual toggle, in place of the gateway stepper */
.billtoggle{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.billtoggle .lbl{font-weight:700;font-size:.9375rem}
.seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:4px;gap:4px}
.seg button{border:0;background:none;font:inherit;font-weight:700;font-size:.875rem;
  color:var(--slate);padding:9px 18px;border-radius:var(--r-pill);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;min-height:40px;
  transition:background .16s,color .16s,box-shadow .16s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(10,20,50,.14)}
.seg button em{font-style:normal;font-size:.6875rem;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;background:var(--mint-50,#E6FCF4);color:#0A7A55;
  border-radius:var(--r-pill);padding:3px 8px}
.seg button.on em{background:var(--orange);color:var(--ink)}
.plan .billnote{font-size:.8125rem;color:var(--slate-2);margin-top:-6px;margin-bottom:14px;
  min-height:1.2em}
.plan .billnote b{color:#0A7A55}

/* $1 membership strip on the plans page */
.memberstrip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:18px 22px;margin-bottom:22px}
.memberstrip .mm{flex:none;display:grid;place-items:center;width:56px;height:56px;
  border-radius:14px;background:var(--g-blue);color:#fff;font-weight:800;font-size:1.375rem;
  letter-spacing:-.03em}
.memberstrip div{flex:1;min-width:260px}
.memberstrip b{display:block;font-size:1rem}
.memberstrip span{display:block;font-size:.875rem;color:var(--slate);margin-top:2px}
.memberstrip .tlink{flex:none;font-size:.875rem}

@media (max-width:760px){
  .mega::after{display:none}
  .memberstrip{padding:16px}
  .billtoggle{width:100%;justify-content:space-between}
}


/* ==========================================================================
   CHECKOUT — three steps and a confirmation, on one page
   ========================================================================== */
.ck{display:grid;grid-template-columns:1fr 396px;gap:clamp(20px,2.6vw,34px);align-items:start}
.ck-back{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9375rem;
  color:var(--slate);margin-bottom:20px;min-height:44px}
.ck-back:hover{color:var(--ink)}
.ck-card{border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:clamp(22px,2.6vw,32px);margin-bottom:18px}
.ck-card > h2{font-size:clamp(1.25rem,2vw,1.625rem);font-weight:700;letter-spacing:-.01em}
.ck-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ck-head .pr{text-align:right;flex:none}
.ck-head .pr b{display:block;font-size:clamp(2rem,3.4vw,2.75rem);font-weight:800;
  letter-spacing:-.03em;line-height:1;color:var(--blue)}
.ck-head .pr span{display:block;font-size:.8125rem;color:var(--slate-2);margin-top:5px}
.ck-speed{display:flex;align-items:center;gap:14px;margin-top:20px;padding:16px 18px;
  border-radius:12px;background:var(--mint-50,#E6FCF4)}
.ck-speed .ic{width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,#12D3C0,#0A8F86)}
.ck-speed .ic svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.ck-speed b{display:block;font-size:1.0625rem}
.ck-speed span{display:block;font-size:.8125rem;color:var(--slate)}

.ck-inc{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.ck-inc div{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:11px;
  background:var(--bg-2)}
.ck-inc svg{flex:none;width:17px;height:17px;stroke:var(--teal);fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.ck-inc b{display:block;font-size:.9063rem}
.ck-inc span{display:block;font-size:.8125rem;color:var(--slate-2);margin-top:1px}

.ck-who{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.ck-who span{border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 15px;
  font-size:.875rem;font-weight:600;color:var(--slate)}

.ck-quote{border-left:3px solid var(--orange);padding-left:18px;margin-top:4px}
.ck-quote q{quotes:none;display:block;font-size:1.0625rem;line-height:1.6}
.ck-quote cite{display:block;font-style:normal;font-size:.8125rem;color:var(--slate-2);margin-top:10px}
.ck-stars{color:var(--orange);letter-spacing:2px;font-size:.875rem;margin-bottom:8px}

/* right rail */
.ck-rail{position:sticky;top:96px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;padding:clamp(20px,2.2vw,26px);box-shadow:0 10px 30px rgba(10,20,50,.06)}
.ck-steps{display:flex;align-items:center;gap:6px;margin-bottom:20px}
.ck-steps i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:.75rem;font-weight:800;font-style:normal;background:var(--bg-3);color:var(--slate-2)}
.ck-steps span{font-size:.75rem;font-weight:700;color:var(--slate-2);white-space:nowrap}
.ck-steps .st{display:flex;align-items:center;gap:7px}
.ck-steps .ln{flex:1;height:1px;background:var(--line);min-width:10px}
.ck-steps .st.on i{background:var(--blue);color:#fff}
.ck-steps .st.on span{color:var(--ink)}
.ck-steps .st.done i{background:var(--teal);color:var(--ink)}
.ck-rail h3{font-size:1.125rem;font-weight:700;margin-bottom:14px;display:flex;
  align-items:center;justify-content:space-between;gap:12px}
.ck-rail h3 button{font-size:.8125rem;font-weight:700;color:var(--slate);
  display:inline-flex;align-items:center;gap:5px;min-height:32px}
.ck-rail h3 button:hover{color:var(--ink)}
.ck-line{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line-soft);font-size:.9063rem}
.ck-line:last-of-type{border-bottom:0}
.ck-line .v{font-weight:700;white-space:nowrap}
.ck-line .free{color:#0A7A55;font-weight:800;font-size:.8125rem;letter-spacing:.04em}
.ck-line s{color:var(--slate-2);font-weight:400;margin-right:6px}
.ck-line.one .k{color:var(--blue-700);font-weight:700}
.ck-total{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  border-top:2px solid var(--ink);margin-top:10px;padding-top:14px}
.ck-total b{font-size:1.0625rem}
.ck-total .amt{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--blue)}
.ck-then{font-size:.8125rem;color:var(--slate-2);margin-top:4px}
.ck-promo{margin-top:18px}
.ck-promo .lbl{font-size:.6875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-2);text-align:center;display:block;margin-bottom:8px}
.ck-promo .in{display:flex;gap:8px}
.ck-promo input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font:inherit;font-size:.875rem;text-transform:uppercase}
.ck-promo input:focus{outline:2px solid var(--blue);outline-offset:1px}
.ck-promo button{flex:none;border:1px solid var(--line);border-radius:10px;padding:0 16px;
  font-weight:700;font-size:.875rem;background:var(--bg-2);min-height:44px}
.ck-promo button:hover{background:var(--bg-3)}
.ck-promo .msg{font-size:.8125rem;margin-top:8px;min-height:1.2em}
.ck-promo .msg.ok{color:#0A7A55;font-weight:600}
.ck-promo .msg.no{color:#A32B1A}
.ck-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}
.ck-trust div{text-align:center;font-size:.6875rem;font-weight:700;color:var(--slate)}
.ck-trust svg{width:19px;height:19px;stroke:var(--teal);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;margin:0 auto 5px;display:block}
.ck-rail .btn{width:100%;justify-content:center}
.ck-terms{font-size:.75rem;color:var(--slate-2);text-align:center;margin-top:12px;line-height:1.55}

/* form steps */
.ck-step{display:none}
.ck-step.on{display:block}
.ck-sect{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.ck-sect .ic{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--g-blue)}
.ck-sect .ic svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.ck-sect b{display:block;font-size:1.1875rem;font-weight:700;letter-spacing:-.01em}
.ck-sect span{display:block;font-size:.875rem;color:var(--slate)}
.fld{display:grid;gap:6px;margin-bottom:16px}
.fld label{font-size:.8125rem;font-weight:700}
.fld input,.fld select{border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font:inherit;font-size:.9375rem;background:#fff;color:var(--ink);width:100%}
.fld input:focus,.fld select:focus{outline:2px solid var(--blue);outline-offset:1px}
.fld input[aria-invalid="true"]{border-color:#C4362A;background:#FFF7F6}
.fld .err{font-size:.75rem;color:#A32B1A;font-weight:600;min-height:1em}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld-row.three{grid-template-columns:2fr 1fr 1fr}
.ck-sub{font-size:.6875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-2);display:flex;align-items:center;gap:8px;margin:24px 0 14px}
.ck-sub::after{content:"";flex:1;height:1px;background:var(--line)}
.ck-demo{border:1px solid #EAC98A;background:#FFFAF2;border-radius:12px;padding:14px 16px;
  font-size:.8125rem;color:#7A5A18;margin-bottom:20px;line-height:1.6}
.ck-demo b{color:#6B4A0C}

/* confirmation */
.ck-done{text-align:center;padding:clamp(28px,4vw,54px) clamp(20px,3vw,40px)}
.ck-done .tick{width:74px;height:74px;border-radius:50%;background:var(--mint-50,#E6FCF4);
  display:grid;place-items:center;margin:0 auto 22px}
.ck-done .tick svg{width:36px;height:36px;stroke:#0A7A55;fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.ck-done h2{font-size:clamp(1.5rem,3vw,2.125rem);font-weight:800;letter-spacing:-.02em;
  margin-bottom:10px}
.ck-done > p{color:var(--slate);max-width:34rem;margin:0 auto 22px}
.ck-ref{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:9px 18px;font-weight:700;font-size:.9375rem;
  margin-bottom:26px}
.ck-ref span{color:var(--slate-2);font-weight:600}
.ck-next{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left;margin-top:8px}
.ck-next div{border:1px solid var(--line);border-radius:12px;padding:18px}
.ck-next .n{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.8125rem;margin-bottom:10px}
.ck-next b{display:block;font-size:.9375rem;margin-bottom:4px}
.ck-next p{font-size:.8125rem;color:var(--slate);margin:0}

@media (max-width:1000px){
  .ck{grid-template-columns:1fr}
  .ck-rail{position:static;order:-1}
  .ck-inc{grid-template-columns:1fr}
  .ck-next{grid-template-columns:1fr}
}
@media (max-width:560px){
  .fld-row,.fld-row.three{grid-template-columns:1fr}
  .ck-steps span{display:none}
  .ck-steps{gap:4px}
}

/* the rail collapses to a receipt once the order is placed */
.ck-rail.done .ck-trust,.ck-rail.done .ck-terms{display:none}
.ck-rail.done .ck-total .amt{color:#0A7A55}

/* inline legal links in the checkout terms line need a touch target */
@media (max-width:900px){ .ck-terms a{display:inline-block;padding:6px 0} }


/* ==========================================================================
   ONE banner — the membership promo as a wide rectangle at the top of the page
   ========================================================================== */
/* the four perks compress into an inline strip so the banner stays short */
.jb-chips span{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:5px 10px;font-size:.7188rem;font-weight:700;color:var(--slate)}
.jb-chips svg{width:12px;height:12px;stroke:var(--teal);fill:none;stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round}

@media (max-width:960px){
  .joinbento.wide{grid-template-columns:1fr}
  .joinbento.wide .jb-num{font-size:clamp(72px,20vw,124px)}
  .joinbento.wide .jb-words{font-size:clamp(22px,6.4vw,38px)}
}

/* ==========================================================================
   HERO TILE TREATMENTS
   Swap the class on .htiles to change the whole hero:
     (none)          the original photography
     .art            no photography — brand fields with the wave mark
     .product        the gateway and the streaming marks do the work
     .mixed          one photograph, one brand field
   ========================================================================== */
.htiles.art .htile,.htiles.product .htile{min-height:clamp(360px,36vw,460px)}
.htiles.mixed .htile{min-height:clamp(400px,40vw,500px)}

/* the oversized wave mark, bleeding off a corner */
.htile .wavemark{position:absolute;z-index:1;pointer-events:none;
  right:-14%;bottom:-18%;width:86%;opacity:.16}
.htile .wavemark svg{width:100%;height:auto;display:block}
.htile.v-ink .wavemark{opacity:.13;right:auto;left:-18%;bottom:-24%;width:80%}

/* photoless fields */
.htiles.art .htile .bgi,.htiles.product .htile .bgi{display:none}
.htiles.art .htile.v-blue,.htiles.product .htile.v-blue{background:var(--g-blue)}
.htiles.art .htile.v-ink,.htiles.product .htile.v-ink{background:var(--g-ink)}
.htiles.art .htile .veil,.htiles.product .htile .veil{
  background:radial-gradient(720px 480px at 84% -12%,rgba(255,255,255,.20),transparent 62%),
             radial-gradient(520px 400px at -4% 108%,rgba(255,147,30,.26),transparent 60%)}
.htiles.art .htile.v-ink .veil{
  background:radial-gradient(700px 460px at 12% -14%,rgba(0,18,181,.72),transparent 62%),
             radial-gradient(460px 380px at 96% 104%,rgba(0,200,183,.22),transparent 62%)}
/* a faint dot field over the top so the flat colour has some tooth */


/* product treatment: the gateway sits in the price tile, the streaming marks
   in the bundle tile */
.htile .gwart{position:absolute;right:clamp(18px,3.4vw,52px);bottom:14px;z-index:1;
  width:clamp(96px,11.5vw,146px);pointer-events:none;
  filter:drop-shadow(0 28px 46px rgba(0,0,0,.34))}
.htile .gwart img{width:100%;height:auto;display:block}
.htile .streamart{position:relative;z-index:2;display:flex;gap:9px;margin-top:20px;
  pointer-events:none;flex-wrap:wrap}
.htile .streamart span{background:#fff;border-radius:11px;display:grid;place-items:center;
  padding:10px 14px;box-shadow:0 10px 22px rgba(0,0,0,.24);min-width:82px}
.htile .streamart span.dk{background:#0B1030}
.htile .streamart img{max-width:100%;max-height:22px;width:auto;height:auto;display:block}
.htiles.product .htile.v-blue p,.htiles.product .htile.v-blue .fine{max-width:min(26rem,62%)}
.htiles.product .htile.v-blue h2{max-width:min(24rem,64%)}

@media (max-width:900px){
  .htile .gwart{width:112px;right:10px;opacity:.9}
  .htile .streamart{width:132px;gap:7px;right:12px;bottom:14px}
  .htiles.product .htile.v-blue p,.htiles.product .htile.v-blue .fine,
  .htiles.product .htile.v-blue h2{max-width:none}
  .htile .streamart span{min-width:0;padding:8px 11px}
  .htile .wavemark{opacity:.1}
}

/* the photo treatments keep their photographs and hide the drawn art */
.htiles:not(.art):not(.product) .htile .wavemark,
.htiles:not(.product) .htile .gwart,
.htiles:not(.product) .htile .streamart{display:none}
.htiles.mixed .htile.v-ink .bgi{display:none}
.htiles.mixed .htile.v-ink{background:var(--g-ink)}
.htiles.mixed .htile.v-ink .wavemark{display:block}
.htiles.mixed .htile.v-ink .veil{
  background:radial-gradient(700px 460px at 12% -14%,rgba(0,18,181,.7),transparent 62%),
             radial-gradient(460px 380px at 96% 104%,rgba(0,200,183,.2),transparent 62%)}


/* ==========================================================================
   ONE banner — proportioned against T-Mobile's promo card
   card 2.8:1 · art panel ~60% · numeral ~25% of card height
   ========================================================================== */
.joinbento.wide{grid-template-columns:1fr clamp(390px,37%,500px);
  min-height:clamp(330px,29vw,424px)}
.joinbento.wide .jb-art{padding:clamp(24px,2.8vw,44px) clamp(26px,3vw,52px)}
.joinbento.wide .jb-lock{align-items:center;gap:clamp(8px,1.1vw,16px);line-height:1}
.joinbento.wide .jb-cur{font-size:clamp(30px,3vw,46px);margin-top:0;align-self:center;
  transform:translateY(-.14em)}
.joinbento.wide .jb-num{font-size:clamp(84px,8.4vw,126px);margin-top:0;line-height:.78}
.joinbento.wide .jb-words{font-size:clamp(28px,3.9vw,58px);margin-top:0;align-self:center;
  line-height:1.04;letter-spacing:-.025em}
.joinbento.wide .jb-sub{margin-top:clamp(14px,1.6vw,24px);font-size:clamp(15px,1.15vw,19px)}

.joinbento.wide .jb-copy{padding:clamp(24px,2.6vw,38px) clamp(24px,2.8vw,42px)}
.joinbento.wide .jb-eyebrow{margin-bottom:12px;font-size:.875rem;letter-spacing:.05em}
.joinbento.wide .jb-copy h2{font-size:clamp(1.5rem,2.5vw,2.125rem);line-height:1.04;
  margin-bottom:9px}
.joinbento.wide .jb-copy > p{margin-bottom:13px;font-size:.9063rem;max-width:30rem}
.joinbento.wide .jb-fine{margin-top:12px;font-size:.6875rem;max-width:30rem}
.jb-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;max-width:30rem}

@media (max-width:1080px){
  .joinbento.wide{grid-template-columns:1fr clamp(340px,40%,420px);min-height:0}
}
@media (max-width:960px){
  .joinbento.wide{grid-template-columns:1fr}
  .joinbento.wide .jb-num{font-size:clamp(76px,21vw,124px)}
  .joinbento.wide .jb-words{font-size:clamp(24px,6.6vw,44px)}
  .joinbento.wide .jb-cur{font-size:clamp(26px,6vw,42px)}
}

/* ==========================================================================
   HERO TILE PATTERNS
   Six pattern-and-gradient treatments. Put one on .htiles alongside the
   layout class, e.g. <div class="htiles product p-rings">.
   ========================================================================== */

/* the squiggle is retired — kept in the markup only for the legacy option */
.htile .wavemark{display:none}
.htiles.legacy-wave .htile .wavemark{display:block}

/* every pattern paints into ::after, above the gradient veil, below the copy */
.htiles[class*="p-"] .htile::after{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none}

/* 1 · DOT FIELD — even grid of dots, faded off one corner */
.htiles.p-dots .htile::after{
  background-image:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px);
  background-size:20px 20px;
  -webkit-mask-image:linear-gradient(205deg,#000 0%,rgba(0,0,0,.28) 58%,transparent 88%);
          mask-image:linear-gradient(205deg,#000 0%,rgba(0,0,0,.28) 58%,transparent 88%)}

/* 2 · SIGNAL RINGS — concentric arcs radiating from a corner, like coverage */
.htiles.p-rings .htile::after{
  background-image:repeating-radial-gradient(circle at 94% 6%,
    rgba(255,255,255,.13) 0 1.5px,transparent 1.5px 52px);
  -webkit-mask-image:radial-gradient(120% 110% at 94% 6%,#000 10%,transparent 78%);
          mask-image:radial-gradient(120% 110% at 94% 6%,#000 10%,transparent 78%)}
.htiles.p-rings .htile.v-ink::after{
  background-image:repeating-radial-gradient(circle at 6% 94%,
    rgba(255,255,255,.12) 0 1.5px,transparent 1.5px 52px);
  -webkit-mask-image:radial-gradient(120% 110% at 6% 94%,#000 10%,transparent 78%);
          mask-image:radial-gradient(120% 110% at 6% 94%,#000 10%,transparent 78%)}

/* 3 · HAIRLINE GRID — architectural, quiet, fades to nothing */
.htiles.p-grid .htile::after{
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(90% 80% at 82% 10%,#000,transparent 76%);
          mask-image:radial-gradient(90% 80% at 82% 10%,#000,transparent 76%)}

/* 4 · HALFTONE — dots that grow across the tile, a printed-gradient feel */
.htiles.p-halftone .htile::after{
  background-image:radial-gradient(rgba(255,255,255,.20) 2.6px,transparent 2.6px),
                   radial-gradient(rgba(255,255,255,.13) 1.5px,transparent 1.5px),
                   radial-gradient(rgba(255,255,255,.08) .9px,transparent .9px);
  background-size:38px 38px,26px 26px,17px 17px;
  background-position:0 0,9px 9px,4px 13px;
  -webkit-mask-image:linear-gradient(160deg,transparent 12%,#000 92%);
          mask-image:linear-gradient(160deg,transparent 12%,#000 92%)}

/* 5 · MESH — no pattern at all, four soft colour sources blended */
.htiles.p-mesh .htile .veil{
  background:radial-gradient(680px 520px at 84% -10%,rgba(120,150,255,.55),transparent 62%),
             radial-gradient(560px 460px at -6% 108%,rgba(255,147,30,.36),transparent 60%),
             radial-gradient(480px 420px at 16% -14%,rgba(0,200,183,.26),transparent 58%),
             linear-gradient(168deg,rgba(0,7,46,.34),rgba(0,18,181,.72))}
.htiles.p-mesh .htile.v-ink .veil{
  background:radial-gradient(660px 500px at 10% -12%,rgba(0,18,181,.82),transparent 62%),
             radial-gradient(520px 440px at 96% 106%,rgba(0,200,183,.32),transparent 60%),
             radial-gradient(420px 380px at 62% 44%,rgba(124,58,237,.28),transparent 62%),
             linear-gradient(168deg,rgba(0,7,46,.5),rgba(0,7,46,.92))}
.htiles.p-mesh .htile::after{
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 70%);
          mask-image:linear-gradient(200deg,#000,transparent 70%)}

/* 6 · DIAGONAL HATCH — fine 45° rule, tightest of the set */
.htiles.p-hatch .htile::after{
  background-image:repeating-linear-gradient(52deg,
    rgba(255,255,255,.085) 0 1.4px,transparent 1.4px 13px);
  -webkit-mask-image:linear-gradient(200deg,#000 0%,rgba(0,0,0,.3) 62%,transparent 90%);
          mask-image:linear-gradient(200deg,#000 0%,rgba(0,0,0,.3) 62%,transparent 90%)}

/* the gradient field the patterns sit on, for the photoless layouts */
.htiles.art .htile.v-blue,.htiles.product .htile.v-blue{background:var(--g-blue)}
.htiles.art .htile.v-ink,.htiles.product .htile.v-ink{background:var(--g-ink)}


/* ==========================================================================
   SERVICE NAME CHIPS — the services are named in type rather than shown as
   brand logos, so nothing depends on a brand portal approving artwork.
   ========================================================================== */
.svcs{display:flex;flex-wrap:wrap;gap:8px}
.svcchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:#fff;padding:7px 14px;font-size:.875rem;
  font-weight:700;color:var(--ink);white-space:nowrap}
.svcchip svg{width:13px;height:13px;flex:none;stroke:var(--teal);fill:none;stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round}
.svcchip.add{border-style:dashed;color:var(--slate)}
.svcchip.add em{font-style:normal;font-size:.75rem;font-weight:800;color:var(--blue-700)}
/* on the dark tiles */
.htile .svcs,.tile .svcs,.s-ink .svcs{margin-top:20px}
.htile .svcchip,.s-ink .svcchip{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);
  color:#fff;backdrop-filter:blur(4px)}
.htile .svcchip.add,.s-ink .svcchip.add{color:rgba(255,255,255,.8)}
.htile .svcchip.add em,.s-ink .svcchip.add em{color:var(--orange)}
@media (max-width:560px){
  .svcchip{font-size:.8125rem;padding:6px 12px}
}

/* named service cards on the streaming page */
.sv-card{border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(255,255,255,.07);
  padding:16px 14px;text-align:center;display:flex;flex-direction:column;justify-content:center;
  min-height:84px}
.sv-card b{display:block;font-size:1rem;font-weight:800;letter-spacing:-.01em;color:#fff}
.sv-card span{display:block;font-size:.75rem;color:rgba(255,255,255,.66);margin-top:4px}

/* ==========================================================================
   MOBILE CLEANUP — the utility strip, announcement bar, tile rhythm and
   the alignment details that were reading as sloppy on a phone.
   ========================================================================== */
@media (max-width:760px){
  /* utility strip: horizontal scroller instead of an overflowing row */
  .util .wrap{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    gap:2px;height:40px;padding-inline:16px}
  .util .wrap::-webkit-scrollbar{display:none}
  .util a{padding:6px 10px;font-size:.75rem}
  .util .right{margin-left:8px}
  .util .sep{margin-inline:4px}

  /* announcement: one compact line that truncates, not a centred paragraph */
  .announce .wrap{justify-content:flex-start;gap:8px;padding-block:9px;
    flex-wrap:nowrap;overflow:hidden}
  .announce .when{flex:none;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase}
  .announce .wrap > span:not(.when){flex:1;min-width:0;font-size:.8125rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .announce a{flex:none;font-size:.8125rem;border-bottom-width:1px}

  /* underlines that ran wider than their text */
  .tlink{align-self:flex-start}
  .jb-copy .row .tlink{margin-top:2px}

  /* tiles get a consistent rhythm rather than each picking its own height */
  .htiles{gap:16px}
  .htile{min-height:0;padding:26px 22px}
  .htile h2{font-size:clamp(1.5rem,7.2vw,2rem);margin-bottom:10px}
  .htile p{font-size:.9375rem}
  .htile .btn{margin-top:20px;width:100%;justify-content:center}
  .htile .fine{margin-top:16px;font-size:.6875rem}
  .htile .gwart{display:none}

  /* the ONE banner reads as one column, aligned left throughout */
  .joinbento.wide .jb-art{padding:28px 22px 26px}
  .joinbento.wide .jb-copy{padding:24px 22px 26px}
  .joinbento.wide .jb-lock{gap:8px}
  .joinbento.wide .jb-sub{margin-top:14px;font-size:.9375rem;max-width:22rem}
  .joinbento.wide .jb-copy h2{font-size:clamp(1.5rem,7.4vw,2rem)}
  .joinbento.wide .jb-copy > p{font-size:.9063rem}
  .joinbento.wide .row{flex-direction:column;align-items:stretch;gap:12px}
  .joinbento.wide .row .btn{width:100%;justify-content:center}
  .joinbento.wide .row .tlink{align-self:flex-start}

  /* split tiles: photo on top, copy under, nothing centred by accident */
  .split-tile,.split-tile.rev{grid-template-columns:1fr}
  .split-tile.rev .st-ph{order:-1}
  .split-tile .st-ph{min-height:200px}
  .split-tile .st-bd{padding:24px 22px}
  .split-tile .st-bd h3{font-size:clamp(1.25rem,6vw,1.625rem);margin-top:12px}
  .split-tile .st-bd p{font-size:.9375rem}

  /* section heads align left on a phone; centred short lines look accidental */
  .head.mid{text-align:left}
  .head.mid p{margin-inline:0}
  .center p,.center{text-align:left}
  .svcs{justify-content:flex-start}
  .svcs.rv[style*="center"]{justify-content:flex-start !important}

  /* stat and mosaic tiles stop fighting for height */
  .bento-d .tile,.bento-c .tile,.bento-e .tile{min-height:180px}
  .stat-tile .stat{font-size:clamp(2rem,11vw,2.75rem)}
  .vs-row{grid-template-columns:1fr;gap:6px}
  .vs-row .amt{text-align:left}
  .vs-row .bar{height:26px}
}

@media (max-width:560px){
  .joinbento.wide .jb-words{font-size:clamp(24px,7.4vw,34px)}
  .joinbento.wide .jb-num{font-size:clamp(68px,22vw,104px)}
  .joinbento.wide .jb-cur{font-size:clamp(24px,7vw,34px)}
  .memberstrip{flex-direction:column;align-items:flex-start;gap:12px}
  .memberstrip .mm{width:48px;height:48px;font-size:1.125rem}
}

@media (max-width:760px){
  /* the announcement link reads as text, not a boxed control, on a phone */
  .announce .wrap{align-items:center}
  .announce a{border-bottom:0;text-decoration:underline;text-underline-offset:3px;
    align-self:center;color:#fff}
  /* the utility scroller gets an edge fade so the cut-off reads as scrollable */
  .util{position:relative}
  .util::after{content:"";position:absolute;right:0;top:0;bottom:0;width:34px;
    pointer-events:none;background:linear-gradient(90deg,transparent,var(--ink))}
}

/* pills are content-width even inside a column flex parent */
.split-tile .st-bd > .eyebrow,
.gw-copy > .eyebrow,
.jb-copy > .jb-eyebrow,
.prod .bd > .eyebrow{align-self:flex-start}
.split-tile .st-bd h3{margin-top:14px}

/* two-up content split that actually collapses on a phone
   (these were inline styles, which no media query could reach) */
.split2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3vw,48px);align-items:center}
@media (max-width:860px){ .split2{grid-template-columns:1fr;gap:26px} }


/* ==========================================================================
   v3 ADDITIONS
   Four components ported from the v3.1 experiment:
     1 · the address field (header + sticky bar)
     2 · plan-card capacity rows and the step-up nudge
     3 · the plan sizer
     4 · the sticky availability bar
   Nothing else from v3.1 is carried over.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · ADDRESS FIELD — one component, used in the header and the sticky bar
   -------------------------------------------------------------------------- */
.acheck{display:flex;gap:8px;align-items:stretch}
.acheck .fieldwrap{position:relative;flex:1;min-width:0}
.acheck input{width:100%;height:52px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff;padding:0 18px 0 46px;font:inherit;font-size:.9375rem;font-weight:600;
  color:var(--ink);transition:border-color .16s,box-shadow .16s}
.acheck input::placeholder{color:var(--slate-2);font-weight:500}
.acheck input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-50)}
.acheck .pin{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  stroke:var(--slate-2);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none}
.acheck .btn{height:52px;flex:none;white-space:nowrap}
.acheck .btn .spin{display:none;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:aspin .7s linear infinite}
.acheck.busy .btn .spin{display:block}
.acheck.busy .btn .lbl,.acheck.busy .btn .ar{display:none}
@keyframes aspin{to{transform:rotate(360deg)}}
.acheck-err{display:none;margin-top:9px;font-size:.8125rem;font-weight:600;color:#C81E3C}
.acheck-err.on{display:block}

/* the header instance — replaces the "Check availability" link */
.hdr .hcheck{display:flex;align-items:center;gap:8px}
.hdr .hcheck input{width:200px;height:40px;border-radius:var(--r-pill);padding:0 14px 0 38px;
  font-size:.8125rem;background:var(--bg-2);
  transition:width .22s var(--ease),border-color .16s,background .16s,box-shadow .16s}
.hdr .hcheck input:focus{width:264px;background:#fff}
.hdr .hcheck .pin{left:14px;width:15px;height:15px}
.hdr .hcheck .btn{height:40px}
@media(max-width:1300px){.hdr .hcheck input{width:158px}}
@media(max-width:1140px){.hdr .hcheck{display:none}}

/* --------------------------------------------------------------------------
   2 · PLAN CARD — capacity rows and the step-up nudge
   Megabits are a bad unit for a decision, so each card also says what the
   speed means in people, devices and simultaneous streams.
   -------------------------------------------------------------------------- */
.cap{margin:16px 0 0;border:1px solid var(--line-soft);border-radius:var(--r-sm);overflow:hidden}
.cap div{display:flex;align-items:center;gap:10px;padding:9px 13px;font-size:.8125rem;
  border-bottom:1px solid var(--line-soft)}
.cap div:last-child{border-bottom:0}
.cap svg{width:15px;height:15px;flex:none;stroke:var(--blue);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.cap b{font-weight:800;margin-left:auto;color:var(--ink);white-space:nowrap}
.cap span{color:var(--slate)}
.cap .fits{background:var(--bg-2);font-weight:700;color:var(--ink)}
.cap .fits svg{stroke:var(--orange)}


/* the cards must stay in register once the capacity block is added */
.plans .plan .cap{margin-top:auto}
@media(max-width:900px){.plans .plan .cap{margin-top:16px}}
@media(max-width:760px){.cap div{padding:8px 12px;font-size:.78125rem}}

/* --------------------------------------------------------------------------
   3 · THE SIZER
   -------------------------------------------------------------------------- */
.sizer{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden;
  display:grid;grid-template-columns:1.15fr .85fr}
.sz-q{padding:clamp(24px,3vw,40px)}
.sz-q h3{margin-bottom:6px}
.sz-q > p{font-size:.9375rem;color:var(--slate);margin-bottom:24px;max-width:44ch}
.szq{margin-bottom:20px}
.szq > p{font-size:.8125rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--slate-2);margin-bottom:9px}
.szopts{display:flex;flex-wrap:wrap;gap:8px}
.szopts button{border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  padding:9px 16px;min-height:44px;font-size:.875rem;font-weight:700;color:var(--slate);
  transition:border-color .16s,background .16s,color .16s}
.szopts button:hover{border-color:var(--ink);color:var(--ink)}
.szopts button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.szopts.multi button.on{background:var(--ink);border-color:var(--ink)}

.sz-out{background:var(--g-ink);color:#fff;padding:clamp(24px,3vw,40px);position:relative;
  overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.sz-out::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-radial-gradient(circle at 94% 6%,rgba(255,255,255,.13) 0 1.5px,transparent 1.5px 52px);
  -webkit-mask-image:radial-gradient(120% 110% at 94% 6%,#000 10%,transparent 78%);
          mask-image:radial-gradient(120% 110% at 94% 6%,#000 10%,transparent 78%)}
.sz-out > *{position:relative;z-index:2}
.sz-out .lbl{font-size:.75rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mint);margin-bottom:12px}
.sz-out .nm{font-size:clamp(1.9rem,3vw,2.6rem);font-weight:800;letter-spacing:-.02em;line-height:1}
.sz-out .pr{font-size:1.0625rem;font-weight:700;margin-top:8px;color:rgba(255,255,255,.9)}
.sz-out .why{font-size:.875rem;color:rgba(255,255,255,.75);margin-top:14px;line-height:1.55}
.sz-out .btn{margin-top:20px;align-self:flex-start}
.sz-out .alt{margin-top:14px;font-size:.8125rem;color:rgba(255,255,255,.6)}
.sz-out .alt a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media(max-width:880px){.sizer{grid-template-columns:1fr}}
@media(max-width:760px){.sz-q,.sz-out{padding:24px 22px}}

/* --------------------------------------------------------------------------
   4 · STICKY AVAILABILITY BAR
   -------------------------------------------------------------------------- */
.availbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px);border-top:1px solid var(--line);
  box-shadow:0 -6px 26px rgba(0,7,46,.10);transform:translateY(110%);
  transition:transform .3s var(--ease);padding:12px 0}
.availbar.on{transform:translateY(0)}
.availbar .wrap{display:flex;align-items:center;gap:18px}
.availbar .lead{font-size:.9375rem;font-weight:700;flex:none}
.availbar .lead em{display:block;font-style:normal;font-size:.75rem;font-weight:500;color:var(--slate)}
.availbar .acheck{flex:1;max-width:560px;margin-left:auto}
.availbar .acheck input,.availbar .acheck .btn{height:44px}
.availbar .close{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--slate-2)}
.availbar .close:hover{background:var(--bg-2);color:var(--ink)}
.availbar .close svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round}
@media(max-width:900px){
  .availbar .lead em{display:none}
  .availbar .lead{font-size:.875rem}
}
@media(max-width:620px){
  .availbar{padding:10px 0}
  .availbar .wrap{gap:10px;padding-inline:16px}
  .availbar .lead{display:none}
  .availbar .acheck{flex-direction:row;gap:8px;width:100%;max-width:none}
  .availbar .acheck .fieldwrap{flex:1 1 auto;min-width:0}
  .availbar .acheck input{width:100%;padding-left:38px;font-size:.8125rem}
  .availbar .acheck .pin{left:14px}
  .availbar .acheck .btn{flex:0 0 auto;width:auto;padding-inline:18px}
  .availbar .close{width:30px;height:30px}
}
/* The existing mobile quick-action bar linked to the coverage page; the
   sticky bar carries the actual field, so it supersedes it. The call action
   stays reachable from the utility bar and the footer. */
@media(max-width:760px){
  body:has(#availBar) .mbar{display:none}
}
/* no :has() — hide it outright rather than stacking two fixed bars */
@supports not selector(:has(*)){
  @media(max-width:760px){ .mbar{display:none} }
}


/* v3 fix — the capacity block must be the same height on every card, or the
   longer "fits" lines push the CTA out of register across the row. */
.plans .cap .fits{min-height:58px}   /* two lines, so every card's cap is 178px */
@media(max-width:900px){
  .plans .cap .fits{min-height:0}
}


/* ==========================================================================
   v3 TWEAKS
   ========================================================================== */

/* 1 · the ONE numeral carries the whole banner, so it should dominate the
   lockup rather than merely match the words beside it */
.joinbento.wide .jb-num{font-size:clamp(108px,10.8vw,164px);line-height:.76}
@media(max-width:960px){ .joinbento.wide .jb-num{font-size:clamp(96px,26vw,158px)} }
@media(max-width:560px){ .joinbento.wide .jb-num{font-size:clamp(86px,27vw,132px)} }

/* the currency mark and the words re-centre against the taller numeral */
.joinbento.wide .jb-cur{transform:translateY(-.22em)}

/* 2 · logo up 10% (32px -> 35.2px) */
.logo svg{height:35.2px}

/* 3 · the Broadband Facts label and the capacity block are two different
   kinds of information; they need air between them */
.plan details.bbf + .cap,
.plan details + .cap{margin-top:26px}
@media(max-width:760px){ .plan details.bbf + .cap,.plan details + .cap{margin-top:20px} }


/* v3 fix — between 760px and ~900px the three plan cards share the row, so
   the capacity rows have to be able to compress. Without this the nowrap
   value forced the grid wider than the viewport. */
.cap div{min-width:0}
.cap span{min-width:0;flex:1 1 auto}
.cap b{white-space:normal;text-align:right;flex:0 1 auto}
@media(max-width:1000px){
  .plans.three .cap div{flex-wrap:wrap;gap:2px 8px}
  .plans.three .cap b{margin-left:auto}
}


/* v3 fix (pre-existing) — the Elite card's "Streaming · LocalRoam" badge is
   absolutely positioned and was wider than the card itself between 760 and
   ~1000px, pushing the whole plans grid past the viewport. Bound it to the
   card and let it wrap. */
.plan .flag{max-width:calc(100% - 52px);white-space:normal;line-height:1.25}
@media(max-width:1000px){
  .plan .flag{left:16px;max-width:calc(100% - 32px);font-size:.6875rem;padding:5px 11px}
}


/* v3 fix (pre-existing) — `1fr` defaults to min-width:auto, so a card whose
   content had a hard minimum blew the track wider than its share. At 768px
   the three tracks summed to 729px inside a 720px grid and the last card
   ran off the viewport. minmax(0,1fr) lets the tracks actually divide. */
@media(min-width:761px){
  .plans,.plans.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plans.four{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1120px){ .plans.four{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  /* was the 84vw swipe carousel; plans stack on a phone now */
  .plans,.plans.three,.plans.four{grid-auto-flow:row;grid-auto-columns:auto;
    grid-template-columns:1fr}
}


/* ==========================================================================
   v3 FIX PASS
   ========================================================================== */

/* 1 · PLAN HOVER
   .plan.pop redeclared `border` at the same specificity as .plan but AFTER
   .plan:hover in source order, so the Plus card kept its resting border on
   hover while the others darkened. Give the hover state its own weight and
   let every card lift the same way. */
.plan.pop{border:1px solid var(--line)}
.plan:hover,.plan.pop:hover{border-color:var(--ink);box-shadow:var(--sh-2);
  transform:translateY(-3px)}
.plan,.plan.pop{transition:border-color .2s,box-shadow .22s,transform .22s var(--ease)}


/* 5 · MAP STACKING
   Leaflet ships panes at z-index 400-700 and its controls at 800-1000, all of
   which outrank the sticky header. Contain the whole map so nothing inside it
   can paint over site chrome. */
/* The map fills its parent via `position:absolute; inset:0`. An earlier
   version of this rule forced `position:relative`, which detached inset and
   collapsed the map to zero height — tiles loaded but nothing was visible.
   `isolation:isolate` alone creates the stacking context that keeps Leaflet's
   400-1000 z-indexes from painting over the header, and needs no position
   change to do it. */
.map,#covMap,#covMapHome,.leaflet-container{z-index:0;isolation:isolate}
/* The ODbL credit is required on any OpenStreetMap-derived basemap, so it has
   to render — but it is one line of 10px text in the corner, deliberately
   nothing like the block CARTO was stamping across the tiles. */
.leaflet-control-attribution{font-size:10px!important;line-height:1.5;
  background:rgba(255,255,255,.72)!important;padding:1px 7px!important;
  color:var(--slate-2)!important;border-radius:6px 0 0 0}
.leaflet-control-attribution a{color:var(--slate)!important;text-decoration:none}
.maplibregl-ctrl-attrib,.maplibregl-ctrl-logo{display:none!important}
.hdr{z-index:1000}
.availbar{z-index:1001}

/* 6 · MAP STYLING — matched to the live waveie.com checker
   CARTO light_all basemap, brand-blue coverage circle, custom teardrop pin
   with a pulse. Measured off waveie.com/coverage.html. */
.leaflet-container{font:inherit!important;background:#F2F4F8}

/* The pin and its pulse, copied from the live checker's own rules.
   The container must be positioned: the pulse is absolute, and without a
   positioned parent it anchored to the map pane instead of the pin. The pulse
   also scales to 2, not 1 — at scale(1) it never grew past the pin and read as
   a static ring rather than a ping. */
.custom-marker-container{position:relative;width:40px;height:40px;transition:background .5s}
.marker-pulse{position:absolute;left:-12px;top:-12px;width:60px;height:60px;border-radius:50%;
  background:rgba(0,18,181,.3);animation:marker-pulse-anim 2s ease-out infinite}
@keyframes marker-pulse-anim{
  0%{transform:scale(.5);opacity:1}
  100%{transform:scale(2);opacity:0}
}
.custom-marker{width:36px;height:36px;
  background:linear-gradient(135deg,#0012B5,#1E40AF);
  border:3px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 15px rgba(0,18,181,.4)}
.custom-marker::after{content:"";width:10px;height:10px;
  border-radius:50%;background:#fff;transform:rotate(45deg)}

/* The live checker's result map is a picture — nothing on it responds to the
   cursor. Scoped to #covMap only: the homepage map is a different component
   with clickable metro popups, and must stay interactive. */
#covMap{pointer-events:none}
#covMap .leaflet-control-container{display:none}
@media(prefers-reduced-motion:reduce){ .marker-pulse{animation:none;opacity:.35} }

/* 11 · LED SWATCHES
   `.led td .sw` scoped the swatch to table cells, but the markup puts them in
   the row header — so every swatch rendered as a zero-width span and the
   colour key was invisible. */
.led .sw{width:16px;height:16px;border-radius:50%;display:inline-block;
  vertical-align:-3px;margin-right:10px;flex:none;
  box-shadow:0 0 0 1px rgba(0,7,46,.10) inset}

/* 12 · TABLE CORNERS
   .pt-wrap is a 16px hairline card, but the scroller inside it was unclipped,
   so the table's square corners and its grey sticky header sat proud of the
   rounded edge. Clip the scroller to the same radius and stop the last row
   drawing a rule against the card border. */
.pt-wrap{overflow:hidden}
.pt-scroll,.cmp-scroll,.tbl-scroll{border-radius:inherit}
table.pt tbody tr:last-child th,table.pt tbody tr:last-child td{border-bottom:0}
table.pt thead th:first-child{border-top-left-radius:var(--r)}
table.pt thead th:last-child{border-top-right-radius:var(--r)}
/* the LED table is narrower than the plan comparison and does not need 900px.
   It also has no reason to stick either its header row or its first column —
   sticky cells paint their own background and their own border-bottom, which
   is what was breaking the row rules into visible steps partway across. */
.led table.pt{min-width:560px}
.led table.pt th,.led table.pt td{text-align:left;vertical-align:top}
.led table.pt thead th,.led table.pt tbody th{position:static;white-space:nowrap}
.led table.pt tbody th{background:transparent}

/* 9 · SEARCH */
.searchpanel{position:fixed;inset:0;z-index:1200;display:none;
  background:rgba(0,7,46,.42);backdrop-filter:blur(3px)}
.searchpanel.on{display:block}
.searchpanel .sp-box{max-width:640px;margin:14vh auto 0;background:#fff;
  border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden}
.searchpanel .sp-top{display:flex;align-items:center;gap:12px;padding:18px 20px;
  border-bottom:1px solid var(--line-soft)}
.searchpanel .sp-top svg{width:19px;height:19px;flex:none;stroke:var(--slate-2);fill:none;
  stroke-width:2.3;stroke-linecap:round}
.searchpanel input{flex:1;border:0;outline:0;font:inherit;font-size:1.0625rem;font-weight:600;
  color:var(--ink);background:transparent;min-width:0}
.searchpanel input::placeholder{color:var(--slate-2);font-weight:500}
.searchpanel .sp-esc{flex:none;font-size:.6875rem;font-weight:800;color:var(--slate-2);
  border:1px solid var(--line);border-radius:6px;padding:4px 8px}
.searchpanel .sp-results{max-height:52vh;overflow-y:auto;padding:8px}
.searchpanel .sp-results a{display:block;padding:12px 14px;border-radius:var(--r-sm)}
.searchpanel .sp-results a:hover,.searchpanel .sp-results a.on{background:var(--bg-2)}
.searchpanel .sp-results b{display:block;font-size:.9375rem}
.searchpanel .sp-results span{display:block;font-size:.8125rem;color:var(--slate);margin-top:2px}
.searchpanel .sp-empty{padding:26px 20px;text-align:center;color:var(--slate);font-size:.9375rem}
@media(max-width:560px){ .searchpanel .sp-box{margin:8vh 16px 0} }


/* ==========================================================================
   ICON TILES — one system, everywhere
   Every rounded icon tile on the site now uses the same four modifiers. The
   modifier sets the tile fill AND the icon colour together, so an icon can
   never end up dark-on-dark (which is what made "Setup & installation" and
   "RV & Road Trips" look empty) or coloured-on-coloured.
   ========================================================================== */
.si,.ti,.ci,.uci{width:46px;height:46px;border-radius:12px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue-50)}
.si > svg,.ti > svg,.ci > svg,.uci > svg{width:22px;height:22px;fill:none;
  stroke:var(--blue);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* the four fills — white icon on a saturated tile, every time */
.si.c-blue,.ti.c-blue,.uci.c-blue{background:var(--g-blue)}
.si.c-orange,.ti.c-orange,.uci.c-orange{background:var(--g-orange)}
.si.c-teal,.ti.c-teal,.uci.c-teal{background:var(--g-teal)}
.si.c-purple,.ti.c-purple,.uci.c-purple{background:var(--g-purple)}
.si[class*="c-"] > svg,.ti[class*="c-"] > svg,.uci[class*="c-"] > svg{stroke:#fff}

/* the soft variants keep a tinted tile and a matching icon */
.si.s-blue{background:var(--blue-50)} .si.s-blue > svg{stroke:var(--blue)}
.si.s-teal{background:var(--mint-50)} .si.s-teal > svg{stroke:#00655C}
.si.s-orange{background:var(--orange-50)} .si.s-orange > svg{stroke:var(--orange-600)}

/* the older per-context rules must not out-rank the modifiers */
.hc .si[class*="c-"],.scard .si[class*="c-"],.shout .si[class*="c-"]{background:inherit}
.hc .si.c-blue,.scard .si.c-blue,.shout .si.c-blue{background:var(--g-blue)}
.hc .si.c-orange,.scard .si.c-orange,.shout .si.c-orange{background:var(--g-orange)}
.hc .si.c-teal,.scard .si.c-teal,.shout .si.c-teal{background:var(--g-teal)}
.hc .si.c-purple,.scard .si.c-purple,.shout .si.c-purple{background:var(--g-purple)}
.hc .si[class*="c-"] svg,.scard .si[class*="c-"] svg,.shout .si[class*="c-"] svg{stroke:#fff}

/* 4 · the coverage hero should run straight into the checker */
.phero.bare{border-bottom:0}

/* 5 · the map's corner mark carries the logo, not the word */
.map-mark{display:flex;align-items:center;padding:7px 12px}
.map-mark svg{height:15px;width:auto;display:block}

/* ---------------------------------------------------------------- AUTO PAY
   Same component as the billing period control — it is the same kind of
   choice, so it gets the same shape. The only difference is that it can be
   disabled, which annual billing does. */
/* the badge inherits the billing control's colours exactly — same component,
   same states, so nothing about it should read as a different kind of thing */
.autopay.off{opacity:.5}
.autopay.off .seg{background:var(--bg-3)}
.autopay.off .seg button{cursor:not-allowed}
.autopay.off .seg button.on{box-shadow:none}

/* Both segmented controls must break the same way. Below 760px the billing
   seg was wide enough to wrap under its label while the shorter Auto Pay seg
   stayed inline, so the two read as different components. Stack both. */
@media(max-width:760px){
  .billtoggle{width:100%;flex-direction:column;align-items:stretch;gap:8px}
  .billtoggle .seg{width:100%}
  .billtoggle .seg button{flex:1;justify-content:center}
}
/* the savings badge must never wrap — at full width it was breaking across
   three lines and inflating the control */
.seg button em{white-space:nowrap}
.seg button{white-space:nowrap}
@media(max-width:420px){
  .seg button{padding:9px 12px;font-size:.8125rem;gap:6px}
  .seg button em{font-size:.625rem;padding:3px 6px}
}

/* --------------------------------------------------------------- PICKER ROOM
   The plan cards hang their "Most popular" flag at top:-13px, so the picker's
   28px bottom margin left only ~15px of real clearance and the badge sat on
   top of the toggles. Give the row space that accounts for the overhang, and
   let the two controls cluster as a pair with the link pushed to the far
   right rather than three items scattered by space-between. */
.picker{margin-bottom:46px;gap:32px;row-gap:18px}
.picker .billtoggle{flex:0 0 auto}
.picker > .tlink{margin-left:auto}
/* the homepage picker carries only the link */
.picker.solo{justify-content:flex-end;margin-bottom:32px}

@media(max-width:1140px){
  .picker{gap:24px;margin-bottom:44px}
}
@media(max-width:1120px){
  /* Billing (405px) + Auto Pay (331px) + the link (227px) plus gaps needs
     ~1035px of row. Below that the three items wrap into an ugly two-line
     arrangement, so stack them deliberately instead. */
  .picker{flex-direction:column;align-items:flex-start;gap:16px}
  .picker > .tlink{margin-left:0}
  .picker.solo{align-items:flex-end}
}
@media(max-width:760px){
  .picker{margin-bottom:38px}
}

/* A page needs exactly one h1 for screen readers and search. The homepage
   opens on a promo bento whose headline is not the page's subject, so the
   real h1 is stated once, off-screen, without touching the layout. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ------------------------------------------------------- v4 HEADER FITTING
   A fifth nav item (Mobile) pushed logo + nav + controls to 1284px inside a
   1232px container, so the header overflowed at every width between the
   burger breakpoint and ~1500px. The nav itself is not the thing to cut —
   it is the address field, whose placeholder can shorten without losing
   meaning. Tighten both just enough, only in the band where it is needed. */
/* applies at every width — the header must stay inside the 1232 grid so it
   lines up with the page content beneath it, not just avoid viewport overflow */
.mainnav{margin-left:16px;gap:0}
.mainnav > .item > a,.mainnav > .item > button{padding:10px 11px;font-size:.9375rem}
.hdr .hcheck input{width:150px}
.hdr .hcheck input:focus{width:230px}
.hdr > .wrap > .right{gap:6px}
@media(max-width:1240px){
  .mainnav > .item > a,.mainnav > .item > button{padding:10px 9px;font-size:.9063rem}
  .hdr .hcheck input{width:124px}
  .hdr .signin{display:none}
}

/* ==========================================================================
   PLACEHOLDER FLAGS
   Wraps any figure that is not yet verifiable. Deliberately loud: the layout
   stays intact so the page can be reviewed, but no invented number can ship
   by accident. One switch hides them all for a clean screenshot.
   ========================================================================== */
.phold{position:relative;outline:2px dashed #E0A800;outline-offset:3px;border-radius:6px}
.phold::before{content:"PLACEHOLDER";position:absolute;top:-9px;left:8px;z-index:5;
  background:#E0A800;color:#241A00;font-size:9px;font-weight:900;letter-spacing:.1em;
  padding:2px 6px;border-radius:4px;line-height:1.3;pointer-events:none}
.phold[data-ph]:hover::after{content:attr(data-ph);position:absolute;bottom:calc(100% + 14px);left:0;
  z-index:70;background:var(--ink);color:#fff;font-size:11px;font-weight:600;letter-spacing:0;
  padding:7px 10px;border-radius:6px;white-space:normal;width:max-content;max-width:260px;
  line-height:1.4;box-shadow:var(--sh-2)}
.htile .phold::before,.s-ink .phold::before,.jb-art .phold::before{background:#FFC53D;color:#241A00}
body.ph-off .phold{outline:0}
body.ph-off .phold::before{display:none}
/* inside a table cell the outline would fight the row rules */
td.phold{outline-offset:-3px}

.pholdbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#FFF8E1;
  border:1px solid #E0A800;border-radius:var(--r-sm);padding:12px 16px;font-size:.8125rem;
  color:#5C4400;font-weight:600;margin-top:18px}
.pholdbar b{color:#241A00}
.pholdbar button{margin-left:auto;border:1px solid #E0A800;border-radius:var(--r-pill);
  padding:6px 14px;font-size:.75rem;font-weight:800;color:#5C4400;background:#fff}
.pholdbar button:hover{background:#E0A800;color:#241A00}
@media(max-width:560px){
  .pholdbar{padding:10px 13px;gap:8px;font-size:.6875rem;line-height:1.45}
  .pholdbar button{margin-left:0;padding:5px 11px;min-height:34px}
}
/* on a price the outline sits between the figure and its sub-line, so it
   needs to hug rather than bleed into the text below */
.pp.phold{outline-offset:1px;margin-bottom:8px;width:fit-content}
.jb-num.phold{outline-offset:2px}

/* a plain tick list outside a plan card (used on the mobile BYOD section) */
.featlist{display:grid;gap:12px}
.featlist li{display:flex;gap:11px;align-items:flex-start;font-size:.9375rem;color:var(--ink-2)}
.featlist svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:var(--green);fill:none;
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* the bundled price sits under the headline rate, in brand blue, so both
   numbers are visible at once rather than hidden behind a toggle */
.bundleline{margin-top:4px;font-size:.9375rem;color:var(--slate);line-height:1.5;min-height:44px}
.bundleline b{color:var(--blue);font-weight:800}
.plan .flag.ink{background:var(--ink);color:#fff}
@media(max-width:900px){.bundleline{min-height:0}}


/* The plan's speed is the first bullet rather than a boxed callout — it reads
   as part of the list but keeps enough weight to scan across the row, which
   is the one thing the box did well. */
.plan ul li.lead-spec{font-weight:700;color:var(--ink)}
.plan ul li.lead-spec svg{stroke:var(--blue)}


/* ==========================================================================
   COVERAGE — the "Checking Coverage..." state
   The radar rings, the step rows and their timing are the live checker's own,
   captured from waveie.com/coverage.html rather than re-invented: two 96px
   rings on a 2s ease-out sweep to scale(2.5), the second delayed by half a
   cycle, with the logo held above them.
   ========================================================================== */
/* it replaces the checker in place, so it wears the checker's frame */
.cov-loading{display:none;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(30px,4vw,52px) 20px;
  max-width:760px;margin-inline:auto;text-align:center}
.cov-loading.show{display:block}
.lp-wrap{width:224px;height:224px;margin:0 auto 30px;
  display:flex;align-items:center;justify-content:center}
.logo-pulse-container{position:relative;display:inline-flex;align-items:center;
  justify-content:center;width:96px;height:96px}
.logo-pulse-container::before,.logo-pulse-container::after{content:"";position:absolute;
  width:96px;height:96px;border-radius:50%;border:3px solid rgba(0,18,181,.6);
  animation:radar-sweep 2s ease-out infinite}
.logo-pulse-container::after{animation-delay:1s}
@keyframes radar-sweep{
  0%{transform:scale(1);opacity:.8}
  100%{transform:scale(2.5);opacity:0}
}
.logo-pulse{position:relative;z-index:10}
.logo-pulse svg{width:96px;height:auto;display:block}

.cov-loading .lp-head{font-size:1.5rem;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 24px}
.check-steps{max-width:320px;margin:0 auto;display:grid;gap:16px;text-align:left}
.check-step{display:flex;align-items:center;gap:16px;
  opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.check-step.visible{opacity:1;transform:translateY(0)}
.step-icon{flex:none;width:40px;height:40px;border-radius:50%;background:#E5E7EB;
  display:flex;align-items:center;justify-content:center;transition:background .3s}
.step-icon svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.check-step.completed .step-icon{background:linear-gradient(135deg,#22C55E,#16A34A)}
.check-step .step-lbl{font-weight:500;color:var(--slate)}

@media(prefers-reduced-motion:reduce){
  .logo-pulse-container::before,.logo-pulse-container::after{animation:none;opacity:.3}
  .check-step{transition:none}
}


/* ==========================================================================
   SLIDING HERO (sample — index-slider.html only)
   The slideshow mechanics are the live site's: three slides cross-fading on
   opacity over 1.2s, one every 7s, under a left-weighted dark veil so the
   type stays legible whichever photo is showing.
   ========================================================================== */
.shero{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:70vh;padding:clamp(48px,7vw,96px) 0 var(--sect-y)}
.hero-slideshow{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease-in-out;
  background-size:cover;background-position:50% 50%}
.hero-slide.active{opacity:1}
/* Matched to the live site's wash as closely as the type allows. Mean
   luminance of the hero image across its full width, averaged over all three
   photos (higher = brighter; the bare photograph is 0.312):

     live's flat 60/40 wash   0.160  +0%   white 0.87x FAILS   orange 1.52:1
     this                     0.154  -4%   white 1.03x ok      orange 1.78:1
     earlier attempt          0.136 -15%   white 1.27x ok      orange 2.17:1
     first attempt            0.106 -34%   white 2.22x ok      orange 3.03:1

   The angle matters more than the strength: putting the darkness where the
   glyphs are rather than spreading it evenly buys legibility almost for free.
   A flat wash needed to be 17% darker to reach what this does at 4%.

   The orange heading line sits at 1.78:1 against a 3:1 guideline. The live
   site is at 1.52:1, so this is no worse — but it is the one thing here below
   the bar, and it only clears it at roughly a third less brightness. Setting
   that line white instead would let everything pass at this wash. */
.shero-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,
    rgba(13,20,40,.68) 0%,
    rgba(13,20,40,.45) 44%,
    rgba(13,20,40,.15) 70%,
    rgba(13,20,40,0) 90%)}
.shero-in{position:relative;z-index:2}

/* 16ch forced "everywhere you need it" onto a third line; the live hero keeps
   it to two, and the explicit <br> already controls where the break falls. */
.shero-h{color:#fff;font-size:clamp(2.2rem,5.4vw,3.9rem);line-height:1.04;
  letter-spacing:-.025em;margin:0 0 16px;max-width:23ch}
.shero-h em{font-style:normal;color:var(--orange);display:block}
.shero-sub{color:rgba(255,255,255,.9);font-size:clamp(1rem,1.25vw,1.1875rem);
  line-height:1.55;max-width:46ch;margin:0 0 28px}
.shero-row{display:flex;gap:12px;flex-wrap:wrap}

.slide-dots{display:flex;gap:8px;margin-top:34px}
/* the dot moves on the same 1.2s clock as the cross-fade, so the indicator
   and the picture read as one motion rather than two */
.slide-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.45);transition:width 1.2s ease-in-out,background 1.2s ease-in-out}
.slide-dot:hover{background:rgba(255,255,255,.7)}
.slide-dot.active{width:24px;border-radius:6px;background:#fff}

@media(max-width:760px){
  .shero{min-height:85vh}
  /* the text runs full width on a phone, so the scrim does too */
  .shero-veil{background:linear-gradient(180deg,rgba(13,20,40,.60),rgba(13,20,40,.52) 50%,rgba(13,20,40,.68))}
  .shero-h{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide{transition:none}
}


/* The gateway shots are served as <picture> for the WebP. Without this the
   <picture> becomes the grid item / flex child instead of the <img>, so rules
   like `.ph.gwph img{height:100%}` resolve against an auto-height inline box
   and collapse to intrinsic size — the product cards rendered 712px tall
   inside a 16/11 frame. display:contents takes the wrapper out of layout so
   every existing rule keeps addressing the image itself. */
picture{display:contents}


/* ==========================================================================
   SUPPORT — Ookla Speedtest Custom embed
   The iframe is a fixed-height third-party widget; it gets the site's card
   frame so it does not read as a pasted-in box, and an aspect floor on narrow
   screens so the gauge is never clipped.
   ========================================================================== */
/* The live site frames the Ookla embed at 960px. The gauge is laid out for
   roughly that width, so the frame stays constrained even though the cards
   below it run the full content column. */
.st-frame{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:#fff;max-width:960px;margin-inline:auto}
.st-frame iframe{display:block;width:100%;height:650px;border:0}

.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;
  margin:clamp(20px,2.6vw,32px) 0 0}
/* a column, so the closing note sits on the floor of both cards and the two
   notes line up with each other rather than floating at different heights */
.st-card{border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column}
.st-card h3{margin-bottom:16px}

.st-tiers{display:grid;gap:10px}
/* A fixed first column: with `auto` every row sized itself independently, so the
   plan names and the speeds landed at four different x positions. */
.st-tier{display:grid;grid-template-columns:5.5rem 1fr auto;align-items:center;gap:12px;
  padding:11px 14px;border-radius:var(--r-sm);background:var(--bg-2)}
.st-tier b{font-size:.9375rem}
.st-tier span{color:var(--slate);font-size:.875rem}
.st-tier em{font-style:normal;font-weight:650;font-size:.8125rem;color:var(--slate-2);white-space:nowrap}

.st-tips{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.st-tips li{display:flex;gap:11px;align-items:flex-start;font-size:.9375rem;line-height:1.5}
.st-tips svg{flex:none;margin-top:3px;stroke:var(--green)}

.st-note{margin-top:auto;padding-top:16px;font-size:.8125rem;line-height:1.6;color:var(--slate-2)}
.st-note .tlink{font-size:.8125rem}

@media(max-width:860px){
  .st-grid{grid-template-columns:1fr}
  .st-frame iframe{height:600px}
  .st-tier{grid-template-columns:1fr auto;row-gap:2px;align-items:baseline}
  .st-tier span{grid-column:1/-1}
}


/* ==========================================================================
   LEGAL + ABOUT — long-form documents
   A sticky contents rail beside the prose, and type sized for reading rather
   than scanning. Everything here is scoped to .legal-wrap so it cannot reach
   the marketing pages.
   ========================================================================== */
.legal-wrap{display:grid;grid-template-columns:clamp(210px,20%,258px) minmax(0,1fr);
  gap:clamp(28px,4vw,58px);align-items:start}

.legal-toc{position:sticky;top:96px}
.legal-toc p{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:750;color:var(--slate-2);margin:0 0 12px}
.legal-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  counter-reset:toc;max-height:calc(100vh - 150px);overflow-y:auto}
.legal-toc li{counter-increment:toc}
.legal-toc a{display:block;padding:7px 10px;border-radius:8px;font-size:.8438rem;
  line-height:1.4;color:var(--slate);font-weight:600;transition:background .16s,color .16s}
.legal-toc a::before{content:counter(toc) ". ";color:var(--slate-2);font-weight:700}
.legal-toc a:hover{background:var(--bg-2);color:var(--ink)}

.legal-doc{max-width:74ch}
.legal-doc h2{font-size:clamp(1.25rem,1.9vw,1.5rem);letter-spacing:-.012em;
  margin:clamp(34px,3.6vw,48px) 0 12px;scroll-margin-top:100px}
.legal-doc h2:first-child{margin-top:0}
.legal-doc h3{font-size:1.0625rem;margin:24px 0 8px}
.legal-doc p{color:var(--slate);font-size:.9688rem;line-height:1.72;margin:0 0 14px}
.legal-doc p strong,.legal-doc li strong{color:var(--ink);font-weight:700}
.legal-doc ul,.legal-doc ol{margin:0 0 16px;padding-left:22px;display:grid;gap:9px}
.legal-doc li{color:var(--slate);font-size:.9688rem;line-height:1.7}
.legal-doc a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.legal-doc a:hover{color:var(--blue-700)}
.legal-doc hr{border:0;border-top:1px solid var(--line-soft);margin:34px 0}

/* a defined term, and the plain-English gloss that sits beside the legalese */
.legal-doc dl{margin:0 0 16px;display:grid;gap:12px}
.legal-doc dt{font-weight:700;color:var(--ink);font-size:.9375rem}
.legal-doc dd{margin:3px 0 0;color:var(--slate);font-size:.9375rem;line-height:1.68}

.legal-note{border-left:3px solid var(--blue);background:var(--blue-50);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:16px 20px;margin:0 0 18px}
.legal-note p{margin:0;color:var(--ink);font-size:.9063rem;line-height:1.65}
.legal-note.warn{border-left-color:var(--orange-600);background:var(--orange-50)}
.legal-note.plain{border-left-color:var(--teal);background:var(--mint-50)}
.legal-note b{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:6px;color:var(--slate-2)}

.legal-meta{display:flex;gap:22px;flex-wrap:wrap;font-size:.8125rem;color:var(--slate-2);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:14px 0;margin:0 0 clamp(26px,3vw,38px)}
.legal-meta b{color:var(--ink)}

table.legal-tbl{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:.9063rem}
table.legal-tbl th,table.legal-tbl td{text-align:left;padding:11px 14px;
  border-bottom:1px solid var(--line-soft);vertical-align:top}
table.legal-tbl th{font-weight:700;color:var(--ink);background:var(--bg-2)}
table.legal-tbl td{color:var(--slate)}
table.legal-tbl tr:last-child td{border-bottom:0}

@media(max-width:900px){
  .legal-wrap{grid-template-columns:1fr}
  .legal-toc{position:static;border-bottom:1px solid var(--line-soft);padding-bottom:18px}
  .legal-toc ol{grid-template-columns:1fr 1fr;max-height:none;overflow:visible}
}
@media(max-width:560px){ .legal-toc ol{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- about */
.ab-lead{font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.62;color:var(--slate);max-width:62ch}
.ab-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
  margin:clamp(28px,3.4vw,44px) 0}
.ab-stat{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:22px 24px}
.ab-stat b{display:block;font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:700;
  letter-spacing:-.025em;line-height:1;color:var(--blue)}
.ab-stat span{display:block;margin-top:9px;font-size:.875rem;line-height:1.5;color:var(--slate)}
@media(max-width:860px){.ab-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.ab-vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ab-val{border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:clamp(22px,2.6vw,30px)}
.ab-val h3{margin:14px 0 8px}
.ab-val p{color:var(--slate);font-size:.9375rem;line-height:1.62;margin:0}
@media(max-width:860px){.ab-vals{grid-template-columns:1fr}}


/* numbered troubleshooting list on the speed test page */
.stepnum{list-style:none;margin:0;padding:0;counter-reset:sn;display:grid;gap:14px}
.stepnum li{counter-increment:sn;display:grid;grid-template-columns:32px 1fr;
  column-gap:16px;row-gap:0;align-items:start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px}
.stepnum li::before{content:counter(sn);grid-column:1;grid-row:1 / span 2;
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--g-blue);color:#fff;font-weight:800;font-size:.9375rem;line-height:1}
.stepnum b{grid-column:2;grid-row:1;display:block;font-size:1rem;margin-bottom:5px}
.stepnum span{grid-column:2;grid-row:2;display:block;color:var(--slate);
  font-size:.9375rem;line-height:1.62}