:root{
  --yellow:#ffd400;
  --yellow2:#ffb800;
  --orange:#ff7a00;
  --green:#2ee27d;
  --blue:#2d8cff;
  --red:#ff4f58;
  --black:#05070a;
  --bg:#080b0f;
  --panel:#111820;
  --panel2:#19232d;
  --line:#2b3642;
  --text:#f8fafc;
  --muted:#aeb8c5;
  --max:1240px;
  --radius:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black)}
body{
  margin:0;
  color:var(--text);
  font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 8% 3%,rgba(255,212,0,.19),transparent 25rem),
    radial-gradient(circle at 92% 10%,rgba(255,122,0,.12),transparent 28rem),
    radial-gradient(circle at 52% 88%,rgba(45,140,255,.07),transparent 34rem),
    linear-gradient(180deg,#07090d,#0b1016 48%,#05070a);
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:999;background:white;color:black;padding:.8rem;border-radius:8px}

.notice-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:.45rem 1rem;
  background:linear-gradient(90deg,var(--yellow),#ffe669,var(--yellow2));
  color:#080808;
  font-size:.8rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.055em;
  text-align:center;
}
.notice-bar a{text-decoration:underline;text-underline-offset:3px}

.site-header{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  gap:1rem;
  min-height:76px;
  padding:.7rem max(1rem,calc((100vw - var(--max))/2));
  background:rgba(7,10,14,.9);
  backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 42px rgba(0,0,0,.3);
}

.logo{width:176px;height:auto}
.nav{display:flex;align-items:center;gap:1rem;margin-left:auto}
.nav a{font-size:.9rem;font-weight:760;color:#d8dee6}
.nav a:hover{color:var(--yellow)}
.header-actions{display:flex;gap:.55rem}
.menu{display:none;margin-left:auto;background:none;border:0;color:white;font-size:1.55rem}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:48px;
  padding:.82rem 1.08rem;
  border:1px solid transparent;
  border-radius:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.025em;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-yellow{background:linear-gradient(135deg,var(--yellow),#fff078);color:#080808;box-shadow:0 12px 30px rgba(255,212,0,.18)}
.btn-dark{background:#101720;border-color:#34404d;color:white}
.btn-outline{background:rgba(255,212,0,.05);border-color:rgba(255,212,0,.5);color:var(--yellow)}
.btn-green{background:var(--green);color:#06130b}

.hero{
  position:relative;
  min-height:calc(100svh - 114px);
  display:grid;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(4,6,9,.98),rgba(4,6,9,.86) 52%,rgba(4,6,9,.36)),
    radial-gradient(circle at 75% 35%,rgba(255,212,0,.25),transparent 25rem);
}
.hero:after{
  content:"MEMBERS";
  position:absolute;
  right:-3vw;
  bottom:-2vw;
  font-size:min(16vw,13rem);
  font-weight:1000;
  letter-spacing:-.08em;
  color:rgba(255,255,255,.035);
  line-height:.8;
}

.grid-overlay{
  position:absolute;
  inset:0;
  opacity:.34;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(90deg,#000,transparent 85%);
}

.hero-inner{
  position:relative;
  z-index:3;
  width:min(var(--max),calc(100% - 2rem));
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);
  gap:2.5rem;
  align-items:center;
  padding:4rem 0;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  width:max-content;
  padding:.45rem .7rem;
  border:1px solid rgba(255,212,0,.45);
  border-radius:999px;
  background:rgba(255,212,0,.08);
  color:var(--yellow);
  font-size:.73rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.eyebrow:before{
  content:"";
  width:.58rem;
  height:.58rem;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 16px var(--green);
  animation:pulse 1.6s infinite;
}
@keyframes pulse{50%{transform:scale(1.35);opacity:.55}}

h1,h2,h3{line-height:1.03;margin:0 0 1rem}
h1{font-size:clamp(3.2rem,7vw,7.1rem);letter-spacing:-.068em;max-width:10ch}
h2{font-size:clamp(2.3rem,5vw,4.8rem);letter-spacing:-.055em}
h3{font-size:1.3rem}
.gradient{
  background:linear-gradient(90deg,var(--yellow),#ff9b15,#fff2a3);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{max-width:62ch;color:#c9d1da;font-size:clamp(1.05rem,1.75vw,1.3rem)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.5rem 0}
.hero-proof{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;color:#d0d7df;font-size:.9rem}
.hero-proof span:before{content:"✓";color:var(--yellow);font-weight:1000;margin-right:.38rem}

.join-panel{
  border:1px solid rgba(255,255,255,.13);
  border-radius:28px;
  background:linear-gradient(155deg,rgba(26,35,45,.97),rgba(9,13,18,.98));
  box-shadow:0 35px 100px rgba(0,0,0,.48);
  overflow:hidden;
  animation:panelIn .8s .12s both;
}
@keyframes panelIn{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
.join-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem 1.2rem;
  border-bottom:1px solid var(--line);
}
.live{display:flex;align-items:center;color:#58e99a;font-size:.84rem;font-weight:900}
.live:before{content:"";width:.62rem;height:.62rem;margin-right:.42rem;border-radius:50%;background:#45e987;box-shadow:0 0 16px #45e987}
.join-body{padding:1.2rem}
.join-steps{display:grid;gap:.65rem}
.join-step{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:.75rem;
  align-items:center;
  padding:.8rem;
  border:1px solid #2c3743;
  border-radius:13px;
  background:#0c131a;
}
.join-step b{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:var(--yellow);color:#080808}
.join-step span{font-weight:820}
.price-preview{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.55rem;
  margin-top:.85rem;
}
.price-preview a{
  padding:.8rem .55rem;
  border:1px solid #2d3844;
  border-radius:12px;
  background:#0b1117;
  text-align:center;
}
.price-preview a:hover{border-color:var(--yellow)}
.price-preview b{display:block;color:var(--yellow);font-size:1.2rem}
.price-preview small{color:var(--muted)}

.trust-strip{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  background:linear-gradient(90deg,#ffca00,#ffe262,#ffb900);
  color:#080808;
}
.trust-strip div{padding:1rem;text-align:center;border-right:1px solid rgba(0,0,0,.14)}
.trust-strip b{display:block;font-size:1.04rem}
.trust-strip span{font-size:.77rem;font-weight:780}

section{padding:6rem max(1rem,calc((100vw - var(--max))/2))}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:2rem}
.section-head h2{max-width:13ch}
.section-head p{max-width:56ch;color:var(--muted)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card,.benefit,.plan,.review,.faq-card,.info-card{
  position:relative;
  overflow:hidden;
  padding:1.4rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  transition:.24s;
}
.card:hover,.benefit:hover,.plan:hover,.review:hover,.faq-card:hover,.info-card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,212,0,.65);
}
.card:before,.benefit:before,.plan:before,.review:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,212,0,.08),transparent);
  transform:translateX(-125%);
  transition:.7s;
}
.card:hover:before,.benefit:hover:before,.plan:hover:before,.review:hover:before{transform:translateX(125%)}
.benefit:nth-child(2){border-top:3px solid var(--orange)}
.benefit:nth-child(3){border-top:3px solid var(--blue)}
.benefit:nth-child(4){border-top:3px solid var(--green)}
.benefit:nth-child(5){border-top:3px solid var(--red)}
.benefit:nth-child(6){border-top:3px solid var(--yellow)}
.icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  margin-bottom:1rem;
  border-radius:13px;
  background:rgba(255,212,0,.1);
  border:1px solid rgba(255,212,0,.3);
  color:var(--yellow);
  font-weight:1000;
}
.card p,.benefit p,.plan p,.review p,.faq-card p,.info-card p{color:var(--muted)}

.value-panel{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:2rem;
  align-items:center;
  padding:clamp(2rem,5vw,4.5rem);
  border-radius:30px;
  background:linear-gradient(135deg,#ffd400,#ffad00);
  color:#080808;
}
.value-panel h2{max-width:11ch}
.saving-cards{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.saving-cards div{padding:1rem;border-radius:13px;background:rgba(0,0,0,.09);border:1px solid rgba(0,0,0,.15)}
.saving-cards b{display:block;font-size:1.35rem}

.coverage{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:center;
}
.coverage-map{
  position:relative;
  min-height:450px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:28px;
  background:
    linear-gradient(rgba(255,212,0,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,212,0,.07) 1px,transparent 1px),
    radial-gradient(circle at 50% 50%,rgba(255,212,0,.22),transparent 26%),
    #080c11;
  background-size:42px 42px,42px 42px,auto,auto;
}
.ring{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:2px solid rgba(255,212,0,.36);
  border-radius:50%;
  animation:ring 3s ease-in-out infinite;
}
.r1{width:150px;height:150px}.r2{width:280px;height:280px;animation-delay:.5s}.r3{width:400px;height:400px;animation-delay:1s}
@keyframes ring{50%{transform:translate(-50%,-50%) scale(1.045);box-shadow:0 0 45px rgba(255,212,0,.2)}}
.pin{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:92px;height:92px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--yellow),#fff078);
  color:#080808;
  font-weight:1000;
  text-align:center;
  line-height:1.05;
  box-shadow:0 0 60px rgba(255,212,0,.42);
}
.map-label{position:absolute;padding:.55rem .7rem;border:1px solid rgba(255,212,0,.4);border-radius:999px;background:rgba(0,0,0,.78);font-size:.78rem;font-weight:850}
.label-1{left:9%;top:22%}.label-2{right:9%;top:20%}.label-3{left:12%;bottom:20%}.label-4{right:12%;bottom:22%}.label-5{left:42%;top:9%}

.checks{display:grid;gap:.7rem;margin-top:1.2rem}
.check{
  position:relative;
  padding:.9rem .9rem .9rem 2.8rem;
  border:1px solid #2c3743;
  border-radius:13px;
  background:#0c131a;
  color:#dce3eb;
}
.check:before{content:"✓";position:absolute;left:1rem;color:var(--yellow);font-weight:1000}

.postcode-checker{
  margin-top:1.1rem;
  padding:1rem;
  border:1px solid rgba(255,212,0,.32);
  border-radius:14px;
  background:rgba(255,212,0,.05);
}
.postcode-form{display:grid;grid-template-columns:1fr auto;gap:.55rem;margin-top:.65rem}
.postcode-form input{
  min-height:50px;
  padding:.8rem .9rem;
  border:1px solid #34404c;
  border-radius:11px;
  background:#0b1117;
  color:#fff;
  font-weight:800;
}
.postcode-form input:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 4px rgba(255,212,0,.08)}

.area-cloud{display:flex;flex-wrap:wrap;gap:.65rem}
.area-cloud a{
  padding:.7rem .9rem;
  border:1px solid #2b3742;
  border-radius:999px;
  background:#101720;
  color:#d7dee6;
}
.area-cloud a:hover{border-color:var(--yellow);color:var(--yellow)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.step{
  min-height:250px;
  padding:1.35rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
}
.step b{
  width:48px;height:48px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:var(--yellow);
  color:#080808;
  margin-bottom:1rem;
}
.step p{color:var(--muted)}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.plan{padding:1.45rem}
.plan.featured{
  border-color:var(--yellow);
  box-shadow:0 30px 85px rgba(255,212,0,.13);
  transform:translateY(-6px);
}
.plan-badge{
  display:inline-flex;
  padding:.45rem .65rem;
  margin-bottom:.8rem;
  border-radius:999px;
  background:var(--yellow);
  color:#080808;
  font-size:.72rem;
  font-weight:1000;
  text-transform:uppercase;
}
.price{font-size:3rem;color:var(--yellow);font-weight:1000;letter-spacing:-.05em}
.price small{font-size:.85rem;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.55rem}
.plan li{position:relative;padding-left:1.6rem;color:#d9e0e7}
.plan li:before{content:"✓";position:absolute;left:0;color:var(--yellow);font-weight:1000}
.stripe-box{margin-top:1rem;padding:1rem;border:1px dashed rgba(255,212,0,.36);border-radius:16px;background:#0a1016}
.plan-note{margin-top:.65rem;color:#82909d;font-size:.78rem}

.compare{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:2rem;
  align-items:center;
}
.compare-table{border:1px solid var(--line);border-radius:18px;overflow:hidden}
.compare-row{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:1rem;border-top:1px solid var(--line);background:#101720}
.compare-row:first-child{border-top:0}
.compare-row b{color:var(--yellow)}

.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.stars{color:var(--yellow);letter-spacing:.14em}
.reviewer{font-weight:900}.review-source{font-size:.78rem;color:#7f8c99}

.faq-list{display:grid;gap:.7rem}
details{
  padding:1rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:#101720;
}
summary{cursor:pointer;font-weight:900}
details p{color:var(--muted)}

.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.guide-card{
  min-height:190px;
  padding:1.3rem;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
}
.guide-card p{color:var(--muted)}
.guide-card a{color:var(--yellow);font-weight:950}

.page-hero{
  padding:5rem max(1rem,calc((100vw - var(--max))/2));
  background:radial-gradient(circle at 82% 15%,rgba(255,212,0,.17),transparent 26rem);
  border-bottom:1px solid var(--line);
}
.breadcrumbs{color:var(--muted);font-size:.85rem;margin-bottom:1rem}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:2rem}
.prose h2{font-size:2.25rem;margin-top:2.4rem}
.prose h3{margin-top:1.6rem}
.prose p,.prose li{color:#c9d1da}
.sidebar{position:sticky;top:100px;height:max-content}
.side-panel{padding:1.25rem;border:1px solid var(--line);border-radius:16px;background:#111820;margin-bottom:1rem}
.side-panel a{display:block;margin:.55rem 0}

.site-footer{
  display:grid;
  grid-template-columns:1.25fr repeat(3,1fr);
  gap:2rem;
  padding:4rem max(1rem,calc((100vw - var(--max))/2));
  border-top:1px solid var(--line);
  background:#05070a;
}
.footer-logo{width:190px}
.site-footer a,.site-footer p{display:block;color:var(--muted);margin:.45rem 0}
.site-footer a:hover{color:var(--yellow)}
.footer-bottom{grid-column:1/-1;padding-top:1.2rem;border-top:1px solid var(--line);color:#778390;font-size:.84rem}
.credit{font-weight:900;color:#fff!important}.credit strong{color:var(--yellow)}

.mobile-dock{display:none}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:1020px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;padding:1rem;background:#0a0e13;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .menu{display:block}
  .header-actions .login-link{display:none}
  .hero-inner,.value-panel,.coverage,.compare,.content-grid{grid-template-columns:1fr}
  .hero{min-height:auto}
  .grid-3,.plans,.reviews,.guide-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .trust-strip{grid-template-columns:repeat(3,1fr)}
  .site-footer{grid-template-columns:1fr 1fr}
}

@media(max-width:680px){
  body{padding-bottom:68px}
  .notice-bar{font-size:.7rem}
  .site-header{
    min-height:66px;
    padding-top:max(.65rem,env(safe-area-inset-top));
    padding-left:max(.8rem,env(safe-area-inset-left));
    padding-right:max(.8rem,env(safe-area-inset-right));
  }
  .logo{width:138px}
  .header-actions{display:none}
  .hero{min-height:calc(100svh - 100px)}
  .hero-inner{width:min(100% - 1.2rem,var(--max));padding:2.4rem 0;gap:1.2rem}
  h1{font-size:clamp(3rem,15vw,4.5rem)}
  h2{font-size:clamp(2.3rem,11vw,3.6rem)}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr}
  .hero-actions .btn:first-child{grid-column:1/-1}
  .price-preview{grid-template-columns:1fr 1fr}
  .price-preview a:last-child{grid-column:1/-1}
  .trust-strip{grid-template-columns:1fr 1fr}
  .trust-strip div:last-child{grid-column:1/-1}
  section{padding:4.2rem 1rem}
  .section-head{display:block}
  .grid-3,.plans,.reviews,.guide-grid,.steps{grid-template-columns:1fr}
  .plan.featured{transform:none}
  .saving-cards{grid-template-columns:1fr}
  .coverage-map{min-height:340px}
  .r1{width:110px;height:110px}.r2{width:210px;height:210px}.r3{width:300px;height:300px}
  .pin{width:76px;height:76px;font-size:.8rem}
  .postcode-form{grid-template-columns:1fr}
  .site-footer{grid-template-columns:1fr}
  .mobile-dock{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:80;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    padding-bottom:env(safe-area-inset-bottom);
    background:#080c11;
    border-top:1px solid #303b47;
    box-shadow:0 -15px 38px rgba(0,0,0,.35);
  }
  .mobile-dock a{
    min-height:62px;
    display:grid;
    place-items:center;
    text-align:center;
    font-size:.75rem;
    font-weight:950;
  }
  .mobile-dock a:first-child{background:var(--yellow);color:#080808}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}


/* =========================================================
   V3 MOBILE-FIRST REBUILD
   ========================================================= */

html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

main,section,header,footer,article,aside,div{
  min-width:0;
}

img,svg,video,iframe,stripe-buy-button{
  max-width:100%;
}

stripe-buy-button{
  display:block;
  width:100%;
  min-width:0;
}

.stripe-box{
  width:100%;
  max-width:100%;
  overflow:hidden;
}

.mobile-only{display:none}

/* Tablet */
@media(max-width:820px){
  .notice-bar{
    min-height:32px;
    padding:.34rem .65rem;
    font-size:.67rem;
    line-height:1.25;
    letter-spacing:.035em;
  }

  .site-header{
    min-height:62px;
    padding:.55rem .8rem;
  }

  .logo{
    width:126px;
  }

  .menu{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid #303b47;
    border-radius:11px;
    background:#101720;
    font-size:1.25rem;
  }

  .hero{
    min-height:auto;
  }

  .hero-inner{
    width:100%;
    padding:2rem .9rem 1.5rem;
    gap:1rem;
  }

  .hero:after{
    display:none;
  }

  h1{
    max-width:none;
    font-size:clamp(2.6rem,11vw,4rem);
    line-height:.95;
    letter-spacing:-.055em;
  }

  h2{
    font-size:clamp(2rem,8.5vw,3rem);
    line-height:1;
  }

  .lead{
    font-size:1rem;
    line-height:1.55;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:.55rem;
    margin:1.1rem 0;
  }

  .hero-actions .btn,
  .btn{
    width:100%;
    min-height:52px;
    padding:.82rem .75rem;
    font-size:.82rem;
  }

  .hero-proof{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.55rem;
    margin-top:.8rem;
    font-size:.78rem;
  }

  .hero-proof span{
    padding:.65rem;
    border:1px solid #293541;
    border-radius:10px;
    background:#0b1117;
  }

  .join-panel{
    width:100%;
    border-radius:20px;
  }

  .join-head{
    padding:.9rem;
    font-size:.86rem;
  }

  .join-body{
    padding:.85rem;
  }

  .join-steps{
    gap:.5rem;
  }

  .join-step{
    grid-template-columns:36px 1fr;
    padding:.65rem;
    border-radius:11px;
  }

  .join-step b{
    width:36px;
    height:36px;
    border-radius:9px;
  }

  .join-step span{
    font-size:.82rem;
  }

  .price-preview{
    display:flex;
    gap:.5rem;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:inline mandatory;
    padding-bottom:.2rem;
  }

  .price-preview a{
    min-width:112px;
    flex:0 0 112px;
    scroll-snap-align:start;
  }

  .trust-strip{
    display:flex;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:inline mandatory;
    scrollbar-width:none;
  }

  .trust-strip::-webkit-scrollbar{
    display:none;
  }

  .trust-strip div{
    min-width:155px;
    flex:0 0 155px;
    scroll-snap-align:start;
    padding:.8rem .65rem;
  }

  section{
    width:100%;
    padding:3.35rem .9rem;
  }

  .section-head{
    margin-bottom:1.25rem;
  }

  .section-head p{
    font-size:.92rem;
  }

  .grid-3,
  .plans,
  .reviews,
  .guide-grid,
  .steps{
    grid-template-columns:1fr;
    gap:.75rem;
  }

  .card,
  .benefit,
  .plan,
  .review,
  .faq-card,
  .info-card,
  .step{
    width:100%;
    padding:1rem;
    border-radius:17px;
  }

  .benefit{
    display:grid;
    grid-template-columns:46px 1fr;
    gap:.75rem;
    align-items:start;
  }

  .benefit .icon{
    grid-row:1/3;
    margin:0;
    width:46px;
    height:46px;
    border-radius:11px;
  }

  .benefit h3,
  .benefit p{
    margin:0;
  }

  .benefit p{
    margin-top:.3rem;
    font-size:.88rem;
  }

  .value-panel{
    padding:1.15rem;
    border-radius:20px;
    gap:1rem;
  }

  .value-panel h2{
    max-width:none;
  }

  .saving-cards{
    grid-template-columns:1fr 1fr;
    gap:.55rem;
  }

  .saving-cards div{
    padding:.75rem;
    border-radius:11px;
  }

  .saving-cards b{
    font-size:1.05rem;
  }

  .coverage{
    gap:1rem;
  }

  .checks{
    gap:.55rem;
  }

  .check{
    padding:.75rem .7rem .75rem 2.35rem;
    font-size:.86rem;
  }

  .check:before{
    left:.8rem;
  }

  .postcode-checker{
    padding:.8rem;
  }

  .postcode-form{
    grid-template-columns:1fr;
  }

  .postcode-form input{
    width:100%;
  }

  .coverage-map{
    min-height:260px;
    border-radius:18px;
  }

  .r1{width:85px;height:85px}
  .r2{width:165px;height:165px}
  .r3{width:245px;height:245px}

  .pin{
    width:68px;
    height:68px;
    font-size:.72rem;
  }

  .map-label{
    padding:.4rem .5rem;
    font-size:.65rem;
  }

  .label-1{left:4%;top:18%}
  .label-2{right:4%;top:16%}
  .label-3{left:6%;bottom:16%}
  .label-4{right:6%;bottom:18%}
  .label-5{left:38%;top:5%}

  .area-cloud{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:.5rem;
    padding-bottom:.25rem;
    scroll-snap-type:inline mandatory;
    scrollbar-width:none;
  }

  .area-cloud::-webkit-scrollbar{
    display:none;
  }

  .area-cloud a{
    flex:0 0 auto;
    white-space:nowrap;
    scroll-snap-align:start;
    padding:.62rem .8rem;
    font-size:.8rem;
  }

  .steps .step{
    min-height:auto;
    display:grid;
    grid-template-columns:42px 1fr;
    gap:.7rem;
  }

  .steps .step b{
    grid-row:1/3;
    width:42px;
    height:42px;
    margin:0;
  }

  .steps .step h3,
  .steps .step p{
    margin:0;
  }

  .steps .step p{
    margin-top:.25rem;
    font-size:.88rem;
  }

  .plans{
    gap:1rem;
  }

  .plan{
    padding:1rem;
  }

  .plan.featured{
    transform:none;
    order:-1;
  }

  .plan-badge{
    margin-bottom:.55rem;
  }

  .price{
    font-size:2.55rem;
    margin-bottom:.5rem;
  }

  .plan ul{
    margin:.75rem 0;
    gap:.45rem;
  }

  .plan li{
    font-size:.88rem;
  }

  .stripe-box{
    padding:.65rem;
    border-radius:12px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .plan-note{
    font-size:.72rem;
  }

  .compare{
    gap:1rem;
  }

  .compare-row{
    padding:.8rem;
    font-size:.84rem;
  }

  .reviews{
    gap:.75rem;
  }

  .review{
    padding:1rem;
  }

  details{
    padding:.85rem;
    border-radius:12px;
  }

  summary{
    font-size:.92rem;
  }

  .guide-card{
    min-height:auto;
    padding:1rem;
    border-radius:15px;
  }

  .content-grid{
    grid-template-columns:1fr;
    gap:1rem;
  }

  .sidebar{
    position:static;
  }

  .page-hero{
    padding:2.7rem .9rem;
  }

  .page-hero h1{
    font-size:clamp(2.5rem,12vw,3.7rem);
  }

  .prose h2{
    font-size:1.65rem;
    margin-top:1.8rem;
  }

  .prose p,
  .prose li{
    font-size:.94rem;
  }

  .site-footer{
    grid-template-columns:1fr;
    gap:1.25rem;
    padding:2.5rem .9rem calc(5rem + env(safe-area-inset-bottom));
  }

  .footer-logo{
    width:150px;
  }

  .mobile-dock{
    grid-template-columns:1.15fr 1fr 1fr;
  }

  .mobile-dock a{
    min-height:58px;
    font-size:.72rem;
  }
}

/* Small iPhones */
@media(max-width:390px){
  .notice-bar{
    font-size:.62rem;
  }

  .logo{
    width:116px;
  }

  .site-header{
    min-height:58px;
  }

  h1{
    font-size:2.6rem;
  }

  h2{
    font-size:2rem;
  }

  .eyebrow{
    max-width:100%;
    white-space:normal;
    font-size:.64rem;
  }

  .hero-proof{
    grid-template-columns:1fr;
  }

  .saving-cards{
    grid-template-columns:1fr;
  }

  .map-label{
    display:none;
  }

  .coverage-map{
    min-height:230px;
  }

  .r3{
    width:215px;
    height:215px;
  }

  .price-preview a{
    min-width:100px;
    flex-basis:100px;
  }
}