/* Lakes Area WiFi: landing page styles (v2.1)
   Mobile-first. One file, no framework. See RESEARCH-MEMO.md → "Web craft standards applied".
   Type: fluid sizes with clamp() in rem, so browser text-size settings still scale everything (web.dev Learn Design: Typography). */

/* ---------- Fonts: self-hosted Poppins (OFL), latin subset, 3 weights ---------- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/poppins-700.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/poppins-800.woff2) format('woff2')}
/* Metric-matched local fallback so the swap to Poppins barely moves text (web.dev: Optimize CLS → font fallbacks with size-adjust).
   Poppins metrics: ascender 1050, descender 350, line gap 100 per 1000 em. */
@font-face{font-family:'Poppins Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans'),local('DejaVu Sans');size-adjust:112%;ascent-override:93.75%;descent-override:31.25%;line-gap-override:8.93%}

:root{
  --navy:#000;             /* true black on the website (Justin, Sept 25). The mailer keeps its printer-recommended off-black #151922 */
  --navy-2:#1d1d1f;
  --cream:#fff; --gray:#f5f5f7; --ink:#1d1d1f; --muted:#424245; --muted2:#424245; --apple-blue:#0066cc; /* Apple's white, light gray, near-black text and link blue */
  --line:#d2d2d7; --soft:#f5f5f7; --white:#fff; --on-dark:#d7d9de; --on-dark-2:#b9bdc6;
  --focus:#1d5fd6; --focus-on-dark:#ffd84d;
  --radius:14px; --wrap:1140px;
  --font:Poppins,'Poppins Fallback',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* fluid type scale (min at 320px, max at ~1280px) */
  --fs-body:clamp(1.125rem,1.08rem + .2vw,1.1875rem);      /* 18 → 19px (GOV.UK body = 19px) */
  --fs-small:clamp(1rem,.97rem + .15vw,1.0625rem);          /* 16 → 17px */
  --fs-fine:1rem;                                           /* 16px, smallest text on the page (audit: all body text 16px+) */
  --fs-h2:clamp(1.875rem,1.4rem + 2.2vw,2.75rem);           /* 30 → 44px */
  --fs-h3:clamp(1.25rem,1.15rem + .5vw,1.5rem);             /* 20 → 24px */
  --fs-hero:clamp(3.25rem,1.6rem + 7.5vw,6.25rem);          /* 52 → 100px */
  --fs-phone:clamp(2.375rem,1.7rem + 3vw,3.5rem);           /* 38 → 56px */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-bottom:96px;scroll-padding-top:16px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.55;padding-bottom:84px}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-underline-offset:.15em}
a:hover{color:#000;text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.hero :focus-visible,.dark :focus-visible,.topbar :focus-visible,.ribbon :focus-visible,footer :focus-visible{outline-color:var(--focus-on-dark)}
h1,h2,h3{margin:0;line-height:1.15;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:100;background:#fff;color:#000;padding:12px 16px;border-radius:8px;font-weight:700}
.icon{width:22px;height:22px;flex:none}
.nowrap{white-space:nowrap}

/* ---------- Buttons (min 56px tall: WCAG 2.5.8 needs 24px, 2.5.5 AAA 44px; older users need more) ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:10px 22px;line-height:1.2;text-align:center;border-radius:12px;font-weight:800;font-size:1.1875rem;text-decoration:none;letter-spacing:.2px;border:2px solid transparent;cursor:pointer;font-family:inherit}
.btn-light{background:#fff;color:#000}
.btn-light:hover{background:#e9eaec;color:#000}
.btn-outline-light{border-color:#fff;color:#fff;background:transparent}
.btn-outline-light:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--soft);color:#000}
.btn-dark:hover{background:#000;color:#fff}

/* ---------- Offer ribbon (matches the back of the mailer) ---------- */
.ribbon{background:#fff;color:#000;text-align:center;font-size:var(--fs-fine);font-weight:700;line-height:1.35}
.ribbon a{display:block;padding:11px 16px;color:#000;text-decoration:none}
.ribbon a:hover span{text-decoration:underline}
.ribbon b{font-weight:800}
/* Offer auto-expiry (class set in <head> from Nov 1, 2026) */
html:not(.offer-over) [data-offer-ended],.offer-over [data-offer-live]{display:none!important}

/* ---------- Top bar ---------- */
.topbar{background:var(--navy);color:#fff;border-bottom:1px solid #2c2c2e}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:10px;padding-bottom:10px}
.logo{display:block;padding:4px 0}
.logo img{width:150px}
.top-call{display:flex;align-items:center;justify-content:center;gap:10px;min-width:52px;height:52px;border-radius:26px;background:#fff;color:#000;text-decoration:none;font-weight:800}
.top-call span{display:none}

/* ---------- Hero ---------- */
.hero{background:var(--navy);color:#fff}
.hero-wrap{padding:0}
.hero-media img{width:100%;height:clamp(200px,56vw,300px);object-fit:cover;object-position:40% 42%}
.hero-copy{padding:26px 20px 30px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.hero h1{font-size:var(--fs-hero);line-height:1;font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.fixbox{border:3px solid #fff;border-radius:6px;padding:3px}
.fixbox span{display:block;border:1.5px solid #fff;border-radius:4px;padding:6px 16px;font-size:clamp(1.625rem,1.4rem + 1vw,2rem);font-weight:700;line-height:1.2}
.tagline{font-size:clamp(1.1875rem,1.1rem + .4vw,1.375rem);color:var(--on-dark);font-weight:700}
.phone-big{display:inline-flex;align-items:center;min-height:48px;font-size:var(--fs-phone);font-weight:800;color:#fff;text-decoration:none;letter-spacing:-.01em;line-height:1.1;white-space:nowrap}
.phone-big:hover{color:#fff;text-decoration:underline}
.cta-stack{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px}
.trustline{font-size:var(--fs-fine);font-weight:700;color:var(--on-dark-2);line-height:1.5}
.outcome{font-size:var(--fs-small);color:var(--on-dark);font-style:italic;max-width:30em}
.owner-chip{display:flex;align-items:center;gap:14px;text-align:left;background:var(--navy-2);border:1px solid #3a3a3c;border-radius:999px;padding:8px 22px 8px 8px}
.owner-chip img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.owner-chip strong{display:block;font-size:1.0625rem;line-height:1.25}
.owner-chip small{display:block;font-size:var(--fs-fine);color:var(--on-dark-2);line-height:1.3}
.hero-badge{display:none}

/* ---------- Trust badges ---------- */
.badges{background:var(--cream);border-bottom:1px solid var(--line)}
.badges ul{list-style:none;padding:22px 20px;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:var(--wrap);margin:0 auto}
.badges li{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:700;line-height:1.3}
.badges .icon{width:42px;height:42px;padding:9px;border-radius:50%;background:var(--ink);color:var(--cream)}

/* ---------- Sections ---------- */
.sec{padding:48px 0}
.sec h2{font-size:var(--fs-h2);font-weight:800;margin-bottom:14px}
.lead{font-size:var(--fs-body);color:var(--muted);max-width:40em}
.lead strong{color:var(--ink)}
.cards{display:grid;gap:16px;margin-top:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.card h3{font-size:var(--fs-h3);font-weight:800;margin-bottom:8px}
.card p{font-size:var(--fs-small);color:var(--muted)}
.num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--cream);font-weight:800;font-size:1.125rem;flex:none}
.card .num{margin-bottom:12px}
/* How-it-works drawing (inline SVG, labels sized so they stay 16px+ even at 320px wide) */
.how-grid{display:grid;gap:14px;margin-top:24px;grid-template-areas:"steps"}
.how-fig{grid-area:fig;margin:0;padding-top:6px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.how-svg{display:block;width:100%;height:auto}
.before{grid-area:before;display:flex;align-items:center;gap:14px;background:var(--soft);border-radius:var(--radius);padding:12px 16px}
.before svg{flex:none;width:84px;height:auto}
.before p{font-size:var(--fs-small);color:var(--muted);line-height:1.45}
.before strong{color:var(--ink)}
.how-steps{grid-area:steps;list-style:none;margin:0;padding:0;display:grid;gap:12px}
.how-steps li{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.how-steps li > div{display:contents}
.how-steps h3{font-size:var(--fs-h3);font-weight:800}
.how-steps p{grid-column:1/-1;margin-top:6px}
.how-steps p{font-size:var(--fs-small);color:var(--muted)}
.num.n2{background:#b3530b;color:#fff}
.fallback-note{margin-top:18px;font-size:var(--fs-small);color:var(--muted2);max-width:44em}

/* Latency */
.latency{margin-top:36px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 16px}
.latency h3{font-size:var(--fs-h3);font-weight:800;margin-bottom:6px}
.latency .def{font-size:var(--fs-small);color:var(--muted2);margin-bottom:18px}
.stats{display:grid;gap:12px;margin-bottom:18px}
.stat{background:var(--soft);border-radius:12px;padding:14px 16px}
.stat b{display:block;font-size:1.625rem;font-weight:800;line-height:1.15}
.stat span{display:block;font-size:var(--fs-small);color:var(--muted);line-height:1.4}
.latency figure{margin:0}
.latency figure a{display:block;border-radius:10px;overflow:hidden;background:#000}
.latency figcaption{font-size:var(--fs-fine);color:var(--muted2);margin-top:10px;line-height:1.5}

/* Comparison table */
.compare{margin-top:36px}
.compare h3{font-size:var(--fs-h3);font-weight:800;margin-bottom:12px}
.table-wrap{border:1.5px solid var(--ink);border-radius:12px;overflow:hidden;background:#fff}
table{width:100%;border-collapse:collapse;table-layout:fixed}
col.c1{width:26%}
th,td{padding:12px 10px;font-size:1rem;line-height:1.4;text-align:left;vertical-align:top;overflow-wrap:anywhere}
thead th{font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
thead th:nth-child(2){background:var(--line)}
thead th:nth-child(3){background:var(--navy);color:#fff}
tbody tr{border-top:1px solid var(--line)}
tbody th{font-weight:700}
tbody td:nth-child(2){color:var(--muted)}
tbody td:nth-child(3){background:var(--soft);font-weight:700}
.source{font-size:var(--fs-fine);color:var(--muted2);margin-top:10px;line-height:1.5}
.source a{color:var(--muted2)}

/* Guarantee + offer (dark, mailer navy) */
.dark{background:var(--navy);color:#fff}
.dark a:not(.btn){color:#fff}
.offer-guarantee{padding:48px 0 56px}
.og-grid{display:grid;gap:48px;align-items:start}
.guarantee{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.guarantee img{width:min(320px,80vw)}
.guarantee .big{font-size:clamp(1.3125rem,1.2rem + .6vw,1.625rem);line-height:1.35;font-weight:700;max-width:34em}
.guarantee .big em{font-style:normal;font-weight:800;white-space:nowrap;border-bottom:3px solid #fff}
.rule{width:64px;height:2px;background:#86868b}
.guarantee p.body{font-size:var(--fs-small);color:var(--on-dark);max-width:38em}
.guarantee p.body strong{color:#fff}
.offer{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.tag{background:#fff;color:#000;padding:6px 12px;font-size:1.1875rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
.offer-box{width:100%;max-width:580px;border:3px solid #fff;border-radius:10px;padding:4px}
.offer-box > div{border:1.5px solid #fff;border-radius:7px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:8px}
.offer-box .o1{font-size:clamp(1.625rem,1.4rem + 1vw,2rem);font-weight:800;line-height:1.2}
.offer-box .o2{font-size:1.1875rem;font-weight:700;line-height:1.3}
.offer-box hr{width:80%;border:0;height:2px;background:#fff;margin:2px 0}
.ends{font-size:var(--fs-fine);font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--on-dark)}
.offer p{font-size:var(--fs-small);color:var(--on-dark);max-width:36em}
.offer .tag{color:#000;font-size:1.1875rem}
.offer .terms{font-size:var(--fs-fine);color:var(--on-dark-2)}
.offer .btn{width:100%;max-width:420px;margin-top:6px}

/* Steps */
.steps{display:grid;gap:22px;margin:22px 0 0;padding:0;list-style:none}
.step{display:flex;gap:16px;align-items:flex-start}
.step h3{font-size:var(--fs-h3);font-weight:800;margin-bottom:4px}
.step p{font-size:var(--fs-small);color:var(--muted)}

/* Family box */
.family{border:2px dashed #86868b;border-radius:var(--radius);padding:26px 22px;display:flex;flex-direction:column;gap:12px}
.family h2{font-size:clamp(1.625rem,1.4rem + 1vw,2rem);line-height:1.15}
.family p{font-size:var(--fs-small);color:var(--muted)}
.family a{font-weight:800;display:inline-flex;align-items:center;min-height:44px}

/* Deciding together + What we'll never do */
.together{display:grid;gap:28px;align-items:start}
.couple{display:flex;flex-direction:column;gap:16px}
.couple h2{font-size:var(--fs-h2)}
.couple > p{font-size:var(--fs-body);color:var(--muted);max-width:36em}
.couple-ctas{display:flex;flex-direction:column;gap:12px;max-width:460px}
.share-alt{font-size:1rem;color:var(--muted2)}
.share-alt a{display:inline-block;padding:10px 0}
.never{background:#fff;border:1px solid var(--line);border-left:6px solid var(--ink);border-radius:var(--radius);padding:24px 22px}
.never h3{font-size:var(--fs-h3);font-weight:800;margin-bottom:12px}
.never ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.never li{position:relative;padding-left:34px;font-size:var(--fs-small);color:var(--muted);line-height:1.45}
.never li::before{content:"";position:absolute;left:0;top:.1em;width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);background:linear-gradient(45deg,transparent 45%,var(--ink) 45%,var(--ink) 55%,transparent 55%)}

/* Closing call section */
.closing{padding:56px 0 64px;text-align:center}
.closing .wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.closing h2{font-size:var(--fs-h2)}
.closing p{font-size:var(--fs-small);color:var(--on-dark)}
.closing-ctas{display:flex;flex-direction:column;gap:12px;width:100%;max-width:460px}
.closing .closing-note{color:var(--on-dark-2)}

/* Story */
.story{display:grid;gap:22px;align-items:center}
.story figure{margin:0}
.story img{width:100%;aspect-ratio:7/5;object-fit:cover}
.story figcaption{font-size:var(--fs-fine);color:var(--muted2);margin-top:8px}
.story p{color:var(--muted);margin-bottom:12px;max-width:36em}
.story .sig{font-size:1.3125rem;font-weight:700;color:var(--ink)}

/* Video slot */
.video-frame{position:relative;border-radius:var(--radius);overflow:hidden;background:#000;aspect-ratio:7/5}
.video-frame img,.video-frame video{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;border:0;background:linear-gradient(to top,rgba(21,25,34,.85),rgba(21,25,34,.15) 60%);color:#fff;font:inherit;font-weight:800;font-size:1.125rem;cursor:pointer;padding:16px}
.play[hidden]{display:none}
.play svg{width:84px;height:84px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.4))}
.play span{background:rgba(21,25,34,.8);padding:6px 14px;border-radius:999px}
.play:hover svg{transform:scale(1.05)}
.transcript{margin-top:10px;font-size:var(--fs-small)}
.transcript summary{cursor:pointer;font-weight:700;padding:8px 0}

/* Service area */
.towns{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:18px 0 0}
.towns li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-weight:700;font-size:1rem;display:flex;align-items:center;gap:8px}
.towns li.home{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.towns .icon{width:18px;height:18px}
.towns li:has(> a){padding:0}
.towns a{display:flex;align-items:center;min-height:44px;padding:8px 16px;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;border-radius:999px}
.towns a:hover{text-decoration-thickness:2px;background:var(--soft)}
.area-sub{font-size:var(--fs-small);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:22px 0 -6px}
.area-more{margin-top:16px;font-size:var(--fs-small);color:var(--muted)}
.area-more a{font-weight:700;display:inline-block;padding:10px 0}

/* Reviews placeholder */
.reviews-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:12px;max-width:760px}
.g-head{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.125rem}
.g-head svg{width:26px;height:26px}
.reviews-card p{font-size:var(--fs-small);color:var(--muted)}

.duo{display:grid}
.duo .sec{padding-top:0}

/* FAQ: plain headings + answers, always visible (no accordions to hunt through) */
.faq{display:grid;margin-top:10px}
.faq > div{padding:18px 0;border-bottom:1px solid var(--line)}
.faq h3{font-size:1.1875rem;font-weight:800;margin-bottom:6px;line-height:1.3}
.faq p{font-size:var(--fs-small);color:var(--muted)}

/* Form */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;max-width:640px;margin:0 auto}
.form-card h2{font-size:clamp(1.625rem,1.4rem + 1vw,2rem);margin-bottom:8px}
.form-card > p,.form-intro{font-size:var(--fs-small);color:var(--muted)}
form{display:flex;flex-direction:column;gap:18px;margin:0}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:1.0625rem;font-weight:700}
.field label small,.hint{font-weight:400;color:var(--muted2);font-size:var(--fs-fine)}
input{height:58px;padding:0 14px;font-size:1.1875rem;border:2px solid #86868b;border-radius:10px;background:#fff;color:var(--ink);font-family:inherit;width:100%}
input:focus{border-color:var(--ink)}
input[aria-invalid="true"]{border-color:#8f1216}
.form-error{display:none;color:#8f1216;font-weight:700;font-size:1rem;background:#fdeceb;border-left:4px solid #8f1216;padding:10px 12px;border-radius:6px}
.form-error.show{display:block}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:1rem;color:var(--muted);line-height:1.5}
.consent .icon{width:20px;height:20px;margin-top:3px}
.consent a{font-weight:700}
/* Optional text-consent checkbox: big tap target, never pre-checked */
.field.check{flex-direction:row;align-items:flex-start;gap:12px;background:var(--soft);border-radius:10px;padding:14px}
.field.check input{width:26px;height:26px;min-height:0;flex:none;margin:2px 0 0;accent-color:var(--ink);padding:0}
.field.check label{font-size:1rem;font-weight:400;line-height:1.5;color:var(--muted)}
.field.check .opt{font-size:1rem;font-weight:700;color:var(--ink)}
/* "Which rooms have bad WiFi?" picker: real checkboxes styled as big chips (52px tall, whole chip is the tap target) */
.rooms{border:0;margin:0;padding:0;min-width:0}
.rooms legend{font-size:1.0625rem;font-weight:700;padding:0;margin-bottom:4px}
.rooms legend small{font-weight:400;color:var(--muted2);font-size:var(--fs-fine)}
.rooms .if-text,.rooms-said:empty{display:none}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.chip{position:relative;display:block;max-width:100%}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;z-index:1}
.chip span{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 18px 10px 14px;border:2px solid #86868b;border-radius:999px;background:#fff;color:var(--ink);font-size:1.0625rem;font-weight:700;line-height:1.25}
.chip span::before{content:"";flex:none;width:22px;height:22px;border:2px solid var(--ink);border-radius:6px;background:#fff center/16px 16px no-repeat}
.chip:hover span{border-color:var(--ink)}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.chip input:checked + span::before{border-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23151515' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.chip input:focus-visible + span{outline:3px solid var(--focus);outline-offset:3px}
.rooms-said{margin-top:12px;font-weight:700;font-size:var(--fs-small);background:var(--soft);border-left:4px solid var(--ink);border-radius:6px;padding:10px 12px}
/* Spam trap (honeypot): off-screen, never seen by people */
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
/* Form fallback: shown while the Formspree ID is still the placeholder (one edit to the form action flips both) */
.form-fallback{display:none;flex-direction:column;align-items:center;text-align:center;gap:14px}
.form-fallback > p:first-child{font-size:var(--fs-small);color:var(--muted);margin-top:4px}
.form-fallback .phone-big{color:var(--ink)}
.form-fallback .phone-big:hover{color:#000}
.fallback-ctas{display:flex;flex-direction:column;gap:12px;width:100%;max-width:460px}
/* Not connected yet: hide the form, but (with JavaScript) keep the room picker so it can pre-fill the text message */
html:not(.js) form[action*="YOUR_FORM_ID"],form[action*="YOUR_FORM_ID"] > :not(.rooms){display:none}
form[action*="YOUR_FORM_ID"]{margin:14px 0 22px}
form[action*="YOUR_FORM_ID"] .rooms .if-form{display:none}
form[action*="YOUR_FORM_ID"] .rooms .if-text{display:inline}
form[action*="YOUR_FORM_ID"] ~ .form-fallback{display:flex}
.or-call{font-size:var(--fs-small);text-align:center;color:var(--muted)}
.or-call a{font-weight:800}
.thanks{display:none;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:20px 0}
.thanks.show{display:flex}
.thanks h3{font-size:1.625rem;font-weight:800}
.thanks p{font-size:var(--fs-small);color:var(--muted)}

/* Footer */
footer{background:var(--navy);color:var(--on-dark);padding:40px 0 30px}
footer .cols{display:grid;gap:26px}
footer h2{font-size:1.4375rem;color:#fff;margin-bottom:8px}
footer h3{font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:var(--on-dark-2);margin-bottom:8px}
footer p,footer li{font-size:1rem;line-height:1.6}
footer a{color:var(--on-dark)}
footer .f-phone{font-size:1.625rem;font-weight:800;color:#fff;text-decoration:none;display:inline-block;margin:4px 0;padding:4px 0}
footer .f-links a{display:inline-flex;align-items:center;min-height:44px}
footer ul{list-style:none;padding:0;margin:0}
.f-areas{display:flex;flex-wrap:wrap;column-gap:18px}
.f-areas li{display:flex;align-items:center;min-height:44px}
.f-areas a{display:inline-flex;align-items:center;min-height:44px}
.fine{margin-top:28px;padding-top:18px;border-top:1px solid #2c2c2e}
.fine p{font-size:var(--fs-fine);color:var(--on-dark-2)}

/* Sticky mobile call bar. html{scroll-padding-bottom} keeps focused items from hiding behind it (WCAG 2.2 SC 2.4.11). */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(244,242,238,.97);border-top:1px solid var(--line);display:flex;gap:10px}
.callbar{transition:transform .25s ease,visibility .25s}
.callbar.is-hidden{transform:translateY(110%);visibility:hidden}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;border-radius:12px;font-size:1.125rem;font-weight:800;text-decoration:none}
.callbar .c1{background:var(--ink);color:var(--cream)}
.callbar .c2{border:2px solid var(--ink);color:var(--ink)}

/* Simple content pages (privacy) */
.page{padding:40px 0 56px}
.page .wrap{max-width:760px}
.page h1{font-size:var(--fs-h2);margin-bottom:16px}
.page h2{font-size:var(--fs-h3);margin:28px 0 8px}
.page p,.page li{color:var(--muted);margin-bottom:10px}

/* Town and lake pages (areas/) */
.area-hero{background:var(--navy);color:#fff;padding:34px 0 40px}
.area-hero .wrap{display:flex;flex-direction:column;gap:16px}
.area-hero h1{max-width:17em}
.area-hero h1{font-size:clamp(2.125rem,1.5rem + 3vw,3.5rem);font-weight:800;line-height:1.1}
.area-hero .area-intro{font-size:var(--fs-body);color:var(--on-dark);max-width:38em}
.crumb a{color:var(--on-dark);font-size:var(--fs-fine);font-weight:700;display:inline-flex;align-items:center;min-height:44px}
.area-offer{border:3px solid #fff;border-radius:10px;padding:4px;max-width:560px}
.area-offer p{border:1.5px solid #fff;border-radius:7px;padding:12px 16px;font-size:var(--fs-small);line-height:1.4}
.area-offer b{font-weight:800}
.area-hero .cta-stack{max-width:560px}
.area-form-link{font-size:var(--fs-small)}
.area-form-link a{color:#fff;font-weight:700;display:inline-block;padding:10px 0}
.spots{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px;max-width:760px}
.spots li{background:#fff;border:1px solid var(--line);border-left:6px solid var(--ink);border-radius:var(--radius);padding:16px 18px;font-size:var(--fs-small);color:var(--muted);line-height:1.5}
.spots strong{color:var(--ink);display:block;font-size:1.1875rem;margin-bottom:2px}
.area-note{margin-top:18px;max-width:40em;color:var(--muted)}
.area-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.area-list a{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;text-decoration:none;color:var(--ink)}
.area-list a:hover{border-color:var(--ink)}
.area-list b{display:block;font-size:var(--fs-h3);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.area-list span{display:block;font-size:var(--fs-small);color:var(--muted);margin-top:2px}
.area-page h2{font-size:var(--fs-h2);font-weight:800}

/* ---------- Tablet ---------- */
@media (min-width:700px){
  .badges ul{grid-template-columns:repeat(4,1fr)}
  .cards,.stats{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr);gap:28px}
  .step{flex-direction:column}
  .faq{grid-template-columns:1fr 1fr;column-gap:48px}
  .area-list{grid-template-columns:1fr 1fr}
  footer .cols{grid-template-columns:1.3fr 1fr 1fr}
  th,td{padding:14px 16px;font-size:1rem}
  col.c1{width:22%}
  thead th{font-size:1rem}
}
/* ---------- Desktop ---------- */
@media (min-width:960px){
  body{padding-bottom:0}
  html{scroll-padding-bottom:0}
  .callbar{display:none}
  .logo img{width:180px}
  .top-call{padding:12px 24px;font-size:1.125rem}
  .top-call span{display:inline}
  .hero .hero-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding:40px 20px 60px}
  .hero-copy{order:1;align-items:flex-start;text-align:left;padding:0}
  .hero-media{order:2;position:relative}
  .hero-media img{height:auto;aspect-ratio:4/3.3;border-radius:18px}
  .cta-stack{flex-direction:row;max-width:560px}
  .cta-stack .btn{flex:1}
  .hero-badge{display:flex;position:absolute;left:-26px;bottom:-26px;width:150px;height:150px;border-radius:50%;background:#fff;color:#000;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:800;line-height:1.1;box-shadow:0 10px 30px rgba(0,0,0,.35);border:5px solid var(--navy);outline:2px solid #fff}
  .hero-badge b{font-size:2.5rem;line-height:1}
  .hero-badge span{font-size:.875rem;text-transform:uppercase;letter-spacing:.03em;padding:0 14px}
  .sec{padding:76px 0}
  .story{grid-template-columns:1fr 1.1fr;gap:56px}
  .family{padding:34px 40px}
  .latency{padding:32px}
  .offer-guarantee{padding:72px 0}
  .og-grid{grid-template-columns:1fr 1fr;gap:64px}
  .form-card{padding:36px 40px}
  .together{grid-template-columns:1.2fr 1fr;gap:56px}
  .closing-ctas,.fallback-ctas{flex-direction:row;flex-wrap:wrap}
  .couple-ctas{display:grid;align-self:flex-start;max-width:none}
  .couple-ctas .btn{white-space:nowrap}
  .closing-ctas,.fallback-ctas{max-width:560px}.closing-ctas .btn,.fallback-ctas .btn{flex:1}
  .duo{grid-template-columns:1fr 1fr;gap:56px}
  .how-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"steps steps";grid-template-rows:auto;gap:18px 32px;align-items:start}
  .area-hero{padding:48px 0 56px}
  .area-hero .cta-stack{flex-direction:row}
}
@media (min-width:1200px){.hero-media img{aspect-ratio:4/3}}
@media (max-width:560px){
  /* Comparison table becomes stacked cards so text stays 16px without cramped columns */
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap th,.table-wrap td{display:block;width:auto}
  .table-wrap thead,.table-wrap colgroup{display:none}
  .table-wrap tr{border-bottom:1px solid var(--line);padding:10px 0}
  .table-wrap tbody th{padding:6px 12px;font-size:1.0625rem}
  .table-wrap td{padding:6px 12px;border:0}
  .table-wrap td::before{content:attr(data-label) ": ";font-weight:700;color:var(--ink)}
  .table-wrap tbody td:nth-child(3){border-radius:8px}
}
@media (max-width:360px){
  .badges ul{grid-template-columns:1fr}
}
/* Honor "reduce motion": no smooth scrolling, no transitions. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Windows High Contrast / forced colors: keep button edges visible. */
@media (forced-colors:active){.btn,.callbar a,.top-call{border:2px solid ButtonText}.chip input:checked + span::before{background:Highlight;border-color:Highlight}.chip input:focus-visible + span{outline-color:Highlight}}
@media print{.callbar,.ribbon,.skip{display:none}body{padding:0;background:#fff}.hero,.dark,footer,.topbar{background:#fff;color:#000}}

/* ---------- The proof (#proof): definitions, before/after speed tests, one day of real use ---------- */
.proof .pudding{font-style:italic;font-weight:800}
.proof .pudding strong{font-weight:800}
.proof-defs .card{display:flex;flex-direction:column;gap:6px}
.proof-defs .card h3{margin-bottom:0}
.proof-defs .ico{width:52px;height:52px;padding:12px;border-radius:50%;background:var(--ink);color:var(--cream);margin-bottom:6px;flex:none}
.proof-defs .most{font-weight:800;color:var(--ink)}
.proof-note{margin-top:20px;max-width:40em;color:var(--muted)}
.proof-h3{font-size:var(--fs-h3);font-weight:800;margin-top:40px}
.proof-big{font-size:clamp(1.75rem,1.4rem + 1.6vw,2.5rem);font-weight:800;margin-top:48px}
.proof-big strong{font-weight:800}
.proof-intro{margin-top:10px;max-width:40em;color:var(--muted)}
.proof-pair{display:grid;gap:16px;margin-top:22px}
.proof-pair figure,.proof-graph{margin:0}
.proof-pair img,.proof-graph img{width:100%;border-radius:12px;background:#000}
.proof-pair figcaption,.proof-graph figcaption{font-size:var(--fs-small);color:var(--muted);margin-top:8px;line-height:1.45}
.proof-pair figcaption b{color:var(--ink)}
.proof-stats{margin-top:18px}
.proof-stats .stat{background:#fff;border:1px solid var(--line)}
.stat b span{display:inline;font-size:inherit;color:inherit;line-height:inherit}
.proof-end{display:grid;gap:8px;margin-top:30px}
.proof-graph{max-width:820px}
.proof-points{margin-top:14px}
.proof-graph img{background:#000}
.proof-points li{color:var(--ink);font-weight:700}
.proof-ctas{margin-top:24px}
@media (max-width:699px){
  /* phones: the graph runs edge to edge so its labels stay as large as possible */
  .proof-graph{margin:0 -20px}
  .proof-graph img{border-radius:0}
  .proof-graph figcaption{padding:0 20px}
}
@media (min-width:700px){.proof-pair{grid-template-columns:1fr 1fr;gap:24px}}
@media (min-width:960px){
  .proof-end{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:start}
  .proof-points{margin-top:0}
  .proof-ctas{flex-direction:column}
}
.proof-two{margin-top:18px;color:var(--ink)}
.proof-plan{grid-column:1/-1;border-left:6px solid var(--ink)!important}
.proof-plan b{font-size:clamp(1.5rem,1.3rem + 1vw,2rem)}
.proof-plan b span{display:block}
@media (min-width:700px){.proof-plan b span{display:inline}.proof-plan b span + span::before{content:" · "}}
.proof-plan span{margin-top:4px;font-size:var(--fs-body);color:var(--ink)}

/* ---------- Apple-style stat blocks in #proof (Sept 25, 2026) ----------
   Modeled on apple.com/iphone-18-pro: the "Compare with" row (small gray "Up to" / big white value / small gray qualifier
   with a footnote number) and the battery tile (big stat on the left, gray paragraph with one white highlighted sentence).
   Apple's measured sizes are 12px / 28px / 12px with #6e6e73 gray. We scale up for older eyes: nothing under 16px,
   and gray #a1a1a6 on black (about 8:1) instead of Apple's #6e6e73 (about 4:1, fails WCAG AA at small sizes).
   True black band, Apple's #161617 tiles. Visitor's system font (San Francisco on Apple devices). No Apple files, logos or slogans. */
.astats{--sys:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--g:#a1a1a6;--w:#f5f5f7;
  background:#000;color:var(--w);font-family:var(--sys);margin:28px calc(50% - 50vw) 0;padding:64px 20px 56px}
.astats-inner{max-width:980px;margin:0 auto;display:grid;gap:18px}
.astats p,.astats ul{margin:0}
.astat-title{font-family:var(--sys);font-size:clamp(2.25rem,1.5rem + 3.6vw,4rem);font-weight:600;line-height:1.08;letter-spacing:-.02em;color:var(--w);text-align:center;margin:0 0 30px}
.astat-compare-label{text-align:center;font-size:1.1875rem;font-weight:600;color:var(--w)}
.astat-compare-pill{justify-self:center;border:1px solid #6e6e73;border-radius:999px;padding:12px 26px;font-size:1.1875rem;font-weight:500;color:var(--w);min-height:48px;display:flex;align-items:center}
.astat-row{list-style:none;padding:0;display:grid;gap:34px;margin:30px 0 40px!important;text-align:center}
.astat-row li{display:flex;flex-direction:column;align-items:center;gap:6px}
.astat-pre{font-size:1rem;font-weight:600;color:var(--g)}
.astat-val{font-size:clamp(2.25rem,2rem + .8vw,2.5rem);font-weight:600;line-height:1.05;letter-spacing:-.01em;color:var(--w)}
.astat-post{font-size:1.0625rem;font-weight:600;line-height:1.35;color:var(--g);max-width:16em}
.astat-tile{background:#161617;border-radius:28px;padding:40px 28px;display:grid;gap:26px}
.astat-tile-num{display:flex;flex-direction:column;gap:6px}
.astat-big{font-size:clamp(3rem,2.4rem + 2.4vw,4rem);font-weight:600;line-height:1.02;letter-spacing:-.02em;color:var(--w)}
.astat-tile-text{font-size:clamp(1.25rem,1.1rem + .7vw,1.625rem);font-weight:600;line-height:1.4;color:var(--g);letter-spacing:-.005em}
.astat-tile-text strong{color:var(--w);font-weight:600}
.astats sup{font-size:.62em;line-height:0;vertical-align:super}
.astats sup a{color:inherit;text-decoration:none;padding:2px 3px}
.astats sup a:focus-visible{outline:3px solid var(--focus-on-dark);border-radius:4px}
.astat-bars{background:#161617;border-radius:28px;padding:36px 28px;display:grid;gap:22px}
.astat-bars-title{font-size:1.3125rem;font-weight:600;color:var(--w);letter-spacing:-.01em}
.abar-head{display:flex;justify-content:space-between;gap:12px;font-size:1.1875rem;font-weight:600;color:var(--w);margin-bottom:10px}
.abar-head span{color:var(--g)}
.abar-track{height:14px;border-radius:7px;background:#2c2c2e;overflow:hidden}
.abar-fill{height:100%;border-radius:7px;background:#6e6e73}
.abar-win{background:linear-gradient(90deg,#2997ff,#30d158)}
.proof-receipts{margin-top:44px}
.proof-fn{list-style:none;counter-reset:fn;margin:40px 0 0;padding:22px 0 0;border-top:1px solid var(--line);font-size:1rem;line-height:1.5;color:var(--muted)}
.proof-fn li{counter-increment:fn;max-width:52em;scroll-margin-top:90px}
.proof-fn li::before{content:counter(fn) ". "}
@media (min-width:760px){
  .astats{padding:96px 40px 80px}
  .astat-row{grid-template-columns:repeat(3,1fr);gap:24px}
  .astat-tile{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding:56px 56px;gap:48px}
  .astat-bars{padding:44px 56px}
}

/* ---------- $99 WiFi Rescue Call page (rescue-call/) ---------- */
.rescue-eyebrow{font-size:var(--fs-small);font-weight:700;color:var(--on-dark);letter-spacing:.01em}
.rescue-price{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.rescue-price-num{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:clamp(4rem,3rem + 5vw,6rem);font-weight:700;line-height:1;letter-spacing:-.03em;color:#fff;margin:0}
.rescue-price-text{font-size:var(--fs-body);font-weight:700;color:#fff;max-width:14em;margin:0}
.rescue-guarantee{font-size:var(--fs-body);color:var(--on-dark);margin:0}
.rescue-guarantee strong{color:#fff}
.rescue-cards .card h3{font-size:var(--fs-h3);font-weight:800;margin-bottom:6px}
.rescue-cards .card p{font-size:var(--fs-small);color:var(--muted);margin:0}

/* ---------- Hotspots visual in #proof (original drawing, true black, Apple-style) ---------- */
.hotspots{background:#000;color:#f5f5f7;margin:36px calc(50% - 50vw) 0;padding:60px 20px 52px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.hotspots>*{max-width:980px;margin-left:auto;margin-right:auto}
.hs-title{font-family:inherit;font-size:clamp(2.25rem,1.5rem + 3.6vw,4rem);font-weight:600;line-height:1.08;letter-spacing:-.02em;text-align:center;color:#f5f5f7;margin-bottom:18px}
.hs-lead{font-size:clamp(1.1875rem,1.1rem + .5vw,1.4375rem);font-weight:600;line-height:1.45;color:#a1a1a6;text-align:center;max-width:36em;margin-bottom:34px}
.hs-pair{display:grid;gap:18px}
.hs-fig{margin:0;background:#161617;border-radius:28px;padding:26px 20px 24px}
.hs-svg{display:block;width:100%;height:auto}
.hs-fig figcaption{margin-top:14px;font-size:1.0625rem;font-weight:600;line-height:1.4;color:#a1a1a6;text-align:center}
.hs-fig figcaption b{display:block;font-size:1.3125rem;color:#f5f5f7;margin-bottom:2px}
.hs-note{margin-top:18px;font-size:1rem;color:#a1a1a6;text-align:center;max-width:40em}
@media (min-width:760px){.hotspots{padding:96px 40px 80px}.hs-pair{grid-template-columns:1fr 1fr;gap:20px}}
.ux7{margin-top:0}
.ux7 .hs-lead{margin:0 auto 6px}

/* ---------- In-Wall HD on a stand (light Apple-style product tile) ---------- */
.iwhd{background:#f5f5f7;margin:0 calc(50% - 50vw);padding:56px 20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.iwhd-inner{max-width:980px;margin:0 auto;display:grid;gap:28px;align-items:center}
.iwhd-pic img{display:block;width:100%;height:auto;border-radius:28px}
.iwhd .iwhd-eyebrow,.ports .iwhd-eyebrow{color:#6e6e73;text-align:left;margin:0 0 8px;font-size:1.0625rem}
.iwhd-title{font-family:inherit;font-size:clamp(2rem,1.5rem + 2.4vw,3.25rem);font-weight:600;line-height:1.08;letter-spacing:-.02em;color:#1d1d1f;margin:0 0 16px}
.iwhd-body{font-size:clamp(1.1875rem,1.1rem + .4vw,1.375rem);font-weight:600;line-height:1.45;color:#6e6e73;margin:0 0 20px}
.iwhd-body strong{color:#1d1d1f;font-weight:600}
.iwhd-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.iwhd-list li{font-size:1.125rem;font-weight:600;color:#424245;line-height:1.4;padding-left:18px;border-left:3px solid #0071e3}
.iwhd-list b{color:#1d1d1f}
.iwhd sup{font-size:.62em;line-height:0}.iwhd sup a{color:inherit;text-decoration:none;padding:2px 3px}
@media (min-width:900px){.iwhd{padding:96px 40px}.iwhd-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}

/* ---------- "HOW we fix that?" band: black, with the same stamp box as the hero's "We can fix that." ---------- */
#how.sec{padding-top:0}
.how-band{background:#000;color:#fff;margin:0 calc(50% - 50vw) 36px;padding:64px 20px 56px;text-align:center}
.how-band h2{display:flex;flex-direction:column;align-items:center;gap:18px;margin:0 auto 22px!important;font-size:inherit}
.how-stamp{display:inline-block;border:3px solid #fff;border-radius:8px;padding:4px}
.how-stamp>span{display:block;border:1.5px solid #fff;border-radius:5px;padding:10px 26px;font-size:clamp(2.25rem,1.6rem + 3vw,3.75rem);font-weight:800;line-height:1.1;color:#fff;letter-spacing:-.01em}
.how-stamp em{font-style:italic;font-weight:800;letter-spacing:.01em;padding-right:.12em}
.how-sub{display:block;font-size:clamp(1.375rem,1.1rem + 1.2vw,2rem);font-weight:800;line-height:1.2;color:#fff;max-width:18em}
.how-band .lead{color:var(--on-dark);margin:0 auto;max-width:34em}
.how-band .lead strong{color:#fff}
@media (min-width:760px){.how-band{padding:96px 40px 80px}}

/* ---------- Four ports, four wired devices (follows the In-Wall HD tile; same light panel) ---------- */
.ports{background:#f5f5f7;margin:0 calc(50% - 50vw);padding:0 20px 64px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.ports-inner{max-width:980px;margin:0 auto;display:grid;gap:24px;align-items:center}
.ports-fig{margin:0;background:#fff;border-radius:28px;padding:28px 22px}
.ports-svg{display:block;width:100%;max-width:480px;height:auto;margin:0 auto}
.ports-key{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ports-key li{display:flex;align-items:center;gap:12px;font-size:1.0625rem;font-weight:600;color:#424245;line-height:1.35}
.ports-key .k{flex:none;width:34px;height:6px;border-radius:3px}
.ports-key .k-in{background:#ff9f0a}.ports-key .k-out{background:#0071e3}
.ports sup{font-size:.62em;line-height:0}.ports sup a{color:inherit;text-decoration:none;padding:2px 3px}
@media (min-width:900px){.ports{padding:0 40px 96px}.ports-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}

/* ---------- Justin's social links in the story ---------- */
.social{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.social-btn{min-height:52px;padding:0 22px;gap:10px;font-size:1.0625rem}
.social-btn[hidden]{display:none}
.social-btn .icon{width:22px;height:22px}

/* ---------- "Our journey" / What's next (Justin's copy) ---------- */
.journey{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.journey h3{font-size:var(--fs-h3);font-weight:800;margin:18px 0 8px;color:var(--ink)}
.journey p{margin-bottom:12px}
.journey strong{color:var(--ink)}
.journey-lead{font-weight:700;color:var(--ink)!important}
.journey .stay{font-size:1.5rem;font-weight:800;color:var(--ink)!important;margin-top:6px}
[data-needs-video][hidden]{display:none}
.hotspots-sec .hotspots{margin-top:0}
.astats-sec .astats{margin-top:0}

/* ---------- Why you need this (Justin's copy) ---------- */
.why{background:#fff;padding:72px 20px}
.why-inner{max-width:760px;margin:0 auto}
.why-title{font-size:clamp(2rem,1.5rem + 2.4vw,3.25rem);font-weight:800;line-height:1.12;color:var(--ink);margin:0 0 26px;letter-spacing:-.01em}
.why-title strong{font-weight:800}
.why p{font-size:clamp(1.1875rem,1.12rem + .3vw,1.3125rem);line-height:1.6;color:var(--muted);margin:0 0 18px}
.why p strong{color:var(--ink)}
.why-q{list-style:none;padding:0;margin:26px 0;display:grid;gap:14px}
.why-q li{font-size:clamp(1.1875rem,1.12rem + .3vw,1.3125rem);font-weight:700;line-height:1.5;color:var(--ink);padding:16px 20px;background:var(--gray);border-left:5px solid var(--ink);border-radius:0 12px 12px 0}
.why-card{background:#000;color:#fff;border-radius:28px;padding:44px 26px;margin-top:40px}
.why-card-title{font-size:clamp(2rem,1.5rem + 2.6vw,3.5rem);font-weight:800;line-height:1.08;color:#fff;margin:0 0 26px;letter-spacing:-.01em}
.why-lines{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:18px}
.why-lines li{font-size:clamp(1.25rem,1.1rem + .8vw,1.625rem);line-height:1.4;color:#fff;padding-left:18px;border-left:3px solid #2997ff}
.why-card .why-purpose{color:var(--on-dark);margin-bottom:10px}
.why-card .why-final{font-size:clamp(1.375rem,1.2rem + .9vw,1.875rem);line-height:1.35;color:#fff;margin:0}
.why-card .why-final strong{color:#fff}
.why-big{display:block;font-size:clamp(2.5rem,1.6rem + 4.4vw,4.75rem);line-height:1.05;font-weight:800;margin-top:10px;letter-spacing:-.015em;
  background:linear-gradient(90deg,#2997ff,#30d158);-webkit-background-clip:text;background-clip:text;color:transparent!important}
@media (forced-colors:active){.why-big{background:none;color:CanvasText!important}}
@media (min-width:760px){.why{padding:110px 40px}.why-card{padding:64px 56px}}
.astat-big2{font-size:clamp(1.875rem,1.5rem + 1.6vw,2.625rem);font-weight:600;line-height:1.1;letter-spacing:-.015em;color:var(--w)}

/* ---------- Cost comparison (replaces the cable-runs table) ---------- */
.costs{margin-top:48px}
.cost-title{font-size:clamp(1.875rem,1.4rem + 2.2vw,3rem);font-weight:800;line-height:1.1;color:var(--ink);margin:0 0 24px;letter-spacing:-.01em}
.cost-grid{display:grid;gap:16px}
.cost-card{border-radius:28px;padding:34px 26px;display:flex;flex-direction:column;gap:6px}
.cost-them{background:var(--gray);color:var(--ink)}
.cost-ours{background:#000;color:#fff}
.cost-card p{margin:0}
.cost-eyebrow{font-size:1.0625rem;font-weight:700;color:var(--muted)}
.cost-ours .cost-eyebrow{color:var(--on-dark)}
.cost-num{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:clamp(2.5rem,2rem + 2.4vw,3.75rem);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:8px 0 4px!important}
.cost-num[hidden]{display:none}
.cost-num-word{font-size:clamp(2.25rem,1.8rem + 2vw,3.25rem)}
.cost-sub{font-size:1.0625rem;font-weight:600;color:var(--muted)}
.cost-ours .cost-sub{color:var(--on-dark)}
.cost-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.cost-list li{font-size:1.125rem;font-weight:600;line-height:1.4;padding-left:16px;border-left:3px solid #86868b}
.cost-ours .cost-list li{border-left-color:#30d158}
.cost-list strong{color:inherit}
.cost-card sup{font-size:.62em;line-height:0}.cost-card sup a{color:inherit;text-decoration:none;padding:2px 3px}
.cost-cta{margin-top:22px}
@media (min-width:760px){.cost-grid{grid-template-columns:1fr 1fr;gap:20px}.cost-card{padding:44px 40px}}

.cost-table{width:100%;border-collapse:collapse;margin-top:18px;font-size:1.0625rem}
.cost-table th,.cost-table td{padding:11px 0;border-top:1px solid rgba(134,134,139,.35);vertical-align:top;line-height:1.35}
.cost-table th{text-align:left;font-weight:600;padding-right:14px}
.cost-table td{text-align:right;font-weight:700;white-space:nowrap}
.cost-them .cost-table th{color:#424245}.cost-them .cost-table td{color:var(--ink)}
.cost-ours .cost-table th{color:var(--on-dark)}.cost-ours .cost-table td{color:#fff}
.cost-table .cost-total th,.cost-table .cost-total td{color:#fff;font-weight:800;border-top:2px solid #fff}
.cost-ours .cost-num{background:linear-gradient(90deg,#2997ff,#30d158);-webkit-background-clip:text;background-clip:text;color:transparent}
.cost-ours .cost-sub strong{color:#fff}
.cost-offer{margin-top:16px!important;font-size:1.125rem;font-weight:600;color:var(--on-dark)}
.cost-offer strong{color:#fff}
@media (forced-colors:active){.cost-ours .cost-num{background:none;color:CanvasText}}
.cost-note{font-size:1.1875rem;font-weight:700;color:var(--ink);margin:-8px 0 8px;max-width:40em}
.cost-basis{font-size:1.0625rem;color:var(--muted);margin:0 0 20px}
.astat-second{margin-top:26px}
.receipts-sec .proof-two{margin-top:0}
.astat-pill-win{border:2.5px solid #30d158!important;font-weight:700!important;box-shadow:0 0 0 4px rgba(48,209,88,.18)}
.astat-compare-pill{text-align:center;justify-content:center}
.astat-vs{text-align:center;font-size:1.5rem;font-weight:700;font-style:italic;color:#a1a1a6;margin:2px 0!important}
.astat-pill-lose{border:2.5px solid #8e8e93!important;font-weight:700!important}

/* ---------- And how does it look? + Our method ---------- */
.look{margin-top:64px}
.look-title{font-size:clamp(2rem,1.5rem + 2.4vw,3.25rem);font-weight:800;line-height:1.08;color:var(--ink);margin:0 0 10px;letter-spacing:-.01em}
.look-sub{font-size:clamp(1.1875rem,1.1rem + .4vw,1.375rem);color:var(--muted);margin:0 0 22px}
.look-sub strong{color:var(--ink)}
.look-fig{margin:0 0 26px}
.look-fig img{display:block;width:100%;height:auto;border-radius:28px}
.look-fig figcaption{margin-top:10px;font-size:1rem;color:var(--muted)}
.look>p{font-size:clamp(1.1875rem,1.12rem + .3vw,1.3125rem);line-height:1.6;color:var(--muted);max-width:40em;margin:0 0 16px}
.look>p strong{color:var(--ink)}
.method{background:#000;color:#fff;border-radius:28px;padding:44px 24px;margin-top:30px;text-align:center}
.method p{margin:0}
.method-q{font-size:clamp(1.5rem,1.3rem + 1vw,2rem);font-weight:700;color:#a1a1a6;font-style:italic}
.method-icons{display:flex;align-items:center;justify-content:center;gap:18px;margin:22px 0}
.method-ico{width:clamp(96px,22vw,140px);height:auto}
.method-plus{font-size:2.5rem;font-weight:800;color:#a1a1a6}
.method-a{font-size:clamp(1.75rem,1.3rem + 2.2vw,3rem);font-weight:800;line-height:1.12;letter-spacing:-.01em;color:#fff}
.method-that{margin-top:14px!important;font-size:clamp(2.25rem,1.6rem + 3vw,4rem);line-height:1.05;
  background:linear-gradient(90deg,#2997ff,#30d158);-webkit-background-clip:text;background-clip:text;color:transparent}
.method-that strong{font-weight:800}
.method-if{margin-top:18px!important;font-size:clamp(1.1875rem,1.1rem + .5vw,1.4375rem);line-height:1.45;color:var(--on-dark);max-width:30em;margin-left:auto!important;margin-right:auto!important}
.method-if strong{color:#fff}
@media (forced-colors:active){.method-that{background:none;color:CanvasText}}
@media (min-width:760px){.method{padding:64px 48px}}
.look-studio img{background:#000}
.method-pic img{display:block;width:100%;max-width:760px;height:auto;margin:22px auto;border-radius:20px}
.abar-lose{background:linear-gradient(90deg,#ff9f0a,#ff453a)}
.vary{font-size:1rem;line-height:1.4;color:var(--muted);text-align:center;margin:18px 0 0!important}
.astats .vary,.dark .vary{color:#a1a1a6}
.costs .vary{text-align:left}
.look-sec .look{margin-top:0}
.receipts-sec .proof-big{margin-top:0}
.pudding-sub{display:block;font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);font-weight:600;font-style:italic;color:var(--muted);margin-top:6px}
.receipts-sec .proof-end{margin-top:36px}
.receipts-sec .proof-big{font-size:clamp(2.5rem,1.8rem + 3.4vw,4.25rem);line-height:1.05;letter-spacing:-.01em}
.receipts-sec .proof-intro{margin-bottom:22px}
.proof-tests-intro{margin-top:48px!important}
/* usage graph shown large, full width, points below it */
.proof-end-wide{display:block!important}
.proof-end-wide .proof-graph{max-width:1100px;margin:0 auto 24px}
.proof-end-wide .proof-graph img{border-radius:28px}
@media (max-width:699px){.proof-end-wide .proof-graph{margin:0 -20px 24px}.proof-end-wide .proof-graph img{border-radius:0}}
@media (min-width:900px){.proof-end-wide>div{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.proof-end-wide .proof-ctas{flex-direction:column}}

/* ---------- Usage + dead-zone charts (SVG drawn by script at real width) ---------- */
.dzc-fig .dzc{background:#131416;border-radius:28px;padding:16px 10px 6px;min-height:300px}
.dzc svg{display:block;width:100%;height:auto;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.dzc-legend{list-style:none;padding:0;margin:14px 0 6px;display:flex;flex-wrap:wrap;gap:10px 22px}
.dzc-legend li{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:600;color:var(--ink)}
.dzc-legend .k{display:inline-block;width:28px;height:6px;border-radius:3px}
.dzc-legend .k-hatch{height:14px;border-radius:3px;background:repeating-linear-gradient(45deg,#ff3b6b 0 3px,rgba(255,59,107,.28) 3px 8px)}
.dz-block{margin-top:48px}
.dz-title{font-size:clamp(1.875rem,1.4rem + 2.2vw,3rem);font-weight:800;line-height:1.1;color:var(--ink);margin:0 0 12px;letter-spacing:-.01em}
.dz-lead{font-size:clamp(1.1875rem,1.12rem + .3vw,1.3125rem);line-height:1.55;color:var(--muted);max-width:40em;margin:0 0 20px}
.dz-lead strong{color:var(--ink)}
@media (max-width:699px){.proof-end-wide .dzc-fig{margin:0 0 24px}.dzc-fig .dzc{border-radius:20px;padding:12px 4px 4px}}
.method-alt{margin-top:34px;padding-top:26px;border-top:1px solid #3a3a3c}
.method-alt-q{font-size:clamp(1.5rem,1.3rem + 1vw,2rem);font-weight:800;color:#fff;line-height:1.15}
.method-alt-a{margin-top:12px!important;font-size:clamp(1.1875rem,1.1rem + .5vw,1.4375rem);line-height:1.45;color:var(--on-dark);max-width:30em;margin-left:auto!important;margin-right:auto!important}
.method-alt-nw{margin-top:6px!important;font-size:clamp(1.375rem,1.2rem + .9vw,1.875rem);color:#30d158}
.method-alt-note{margin-top:12px!important;font-size:1.0625rem;line-height:1.45;color:#a1a1a6;max-width:30em;margin-left:auto!important;margin-right:auto!important}
.cost-was{font-size:1.125rem;font-weight:600;color:var(--on-dark);margin:0 0 6px!important}
.cost-was s{color:#a1a1a6}
.story-kicker{grid-column:1/-1;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.25rem);font-weight:600;color:var(--ink);margin:0 0 -6px;letter-spacing:-.01em}
.story-kicker strong{font-weight:800}
.story .story-long p{font-size:1.0625rem;line-height:1.6;margin-bottom:12px}
.story .story-long strong{color:var(--ink)}
.story .story-long .sig{font-size:1.25rem;line-height:1.3;margin-top:6px}
.num.n2{background:var(--ink)!important;color:#fff!important}

/* ---------- Offer + guarantee, Apple style ---------- */
.offer-apple{background:#000;color:#f5f5f7;padding:88px 20px 80px;text-align:center;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.oa-inner{max-width:980px;margin:0 auto}
.offer-apple p{margin:0}
.oa-eyebrow{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);font-weight:600;color:#a1a1a6;letter-spacing:.01em}
.oa-title{font-family:inherit;font-size:clamp(4.5rem,3rem + 8vw,9rem);font-weight:700;line-height:1;letter-spacing:-.035em;margin:14px 0 10px}
.oa-grad{background:linear-gradient(90deg,#2997ff,#30d158);-webkit-background-clip:text;background-clip:text;color:transparent}
.oa-sub{font-size:clamp(1.375rem,1.1rem + 1.3vw,2.125rem);font-weight:600;color:#f5f5f7;letter-spacing:-.01em}
.oa-tiles{display:grid;gap:16px;margin:48px 0 16px;text-align:left}
.oa-tile{background:#161617;border-radius:28px;padding:32px 26px}
.oa-k{font-size:1.0625rem;font-weight:600;color:#a1a1a6}
.oa-v{font-size:clamp(1.75rem,1.4rem + 1.4vw,2.375rem);font-weight:700;line-height:1.1;letter-spacing:-.015em;color:#f5f5f7;margin:6px 0 12px!important}
.oa-d{font-size:1.125rem;font-weight:500;line-height:1.5;color:#a1a1a6}
.oa-guarantee{background:#161617;border-radius:28px;padding:28px 26px;text-align:left}
.oa-guarantee .body{font-size:clamp(1.1875rem,1.1rem + .4vw,1.375rem);font-weight:600;line-height:1.5;color:#f5f5f7;margin:0}
.oa-guarantee strong{color:#fff}
.oa-terms{margin-top:28px!important;font-size:1rem;color:#a1a1a6}
.oa-cta{display:inline-flex;margin-top:22px;min-width:280px}
.oa-cta .icon{width:22px;height:22px}
@media (forced-colors:active){.oa-grad{background:none;color:CanvasText}}
@media (min-width:760px){.offer-apple{padding:120px 40px 110px}.oa-tiles{grid-template-columns:1fr 1fr;gap:20px}.oa-tile,.oa-guarantee{padding:40px 36px}}
.oa-v-big{font-size:clamp(2.25rem,1.7rem + 2.4vw,3.25rem);line-height:1.05;margin-top:0!important}
.costs-sec .costs{margin-top:0}
.cost-quote{margin-top:14px!important;font-size:1.0625rem;line-height:1.45;color:var(--on-dark)}
.cost-quote strong{color:#fff}

/* Desktop: photo sits at the top next to the long story and stays in view while reading (2026-09-26) */
@media (min-width:960px){
  .story{align-items:start;row-gap:28px}
  .story .story-media{position:sticky;top:32px}
}

/* "What's next" as its own full-width panel under the story (2026-09-26) */
.story-after .journey{margin-top:40px;padding:28px 22px;border-top:0;background:#f5f5f7;border-radius:22px}
.story-after .journey p{max-width:none}
.story-after .journey-lead{font-size:1.25rem;line-height:1.35;margin-bottom:4px}
.story-after .journey-body h3{margin-top:14px}
@media (min-width:960px){
  .story-after .journey{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;padding:48px 52px;margin-top:56px}
  .story-after .journey-lead{font-size:clamp(1.5rem,1.1rem + 1vw,2rem);line-height:1.25;margin:0;align-self:center}
  .story-after .journey-body h3{margin-top:0}
}

/* Social buttons in each network's colors, white icon + text (2026-09-26) */
.social-btn.social-fb,.social-btn.social-ig{color:#fff;border:0}
.social-btn.social-fb{background:#1877f2}
.social-btn.social-fb:hover{background:#0f63d6}
.social-btn.social-ig{background:linear-gradient(45deg,#f58529 0%,#dd2a7b 45%,#8134af 75%,#515bd4 100%)}
.social-btn.social-ig:hover{filter:brightness(.93)}
.social-btn.social-fb:focus-visible,.social-btn.social-ig:focus-visible{outline:3px solid #1d1d1f;outline-offset:3px}
@media (forced-colors:active){.social-btn.social-fb,.social-btn.social-ig{border:2px solid ButtonText}}