/* ======================================================================
   BroadbandSwitch.uk - styles.css
   Production landing page styles for the final index.html
   ====================================================================== */

/* ------------------------------
   Design tokens
   ------------------------------ */
:root{
  --brand:#ec86b8;           /* primary pastel pink */
  --brand-700:#e069a5;       /* darker accent */
  --brand-50:#fde9f3;        /* light pink band */
  --ink:#161616;             /* near-black text */
  --muted:#5a5a5a;           /* secondary text */
  --bg:#ffffff;              /* page background */
  --border:#efd4e3;          /* soft border for cards */
  --chip:#f2f4f7;            /* neutral chip bg */
  --chip-border:#e6e9ef;     /* neutral chip border */
  --radius:12px;             /* base radius */
  --shadow:0 1px 4px rgba(0,0,0,.06);
  --shadow-md:0 6px 20px rgba(0,0,0,.08);
  --focus:#0b57d0;           /* high-contrast focus colour */
}

/* ------------------------------
   Base
   ------------------------------ */
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font:16px/1.6 "Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{filter:brightness(.98)}
.wrap{width:min(1200px,92%);margin-inline:auto}
.small{font-size:.9rem}
.micro{font-size:.92rem;color:var(--muted)}
.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}

/* Buttons */
a.btn,.btn{
  display:inline-block;
  padding:.9rem 1.2rem;
  border-radius:var(--radius);
  border:1px solid transparent;
  text-decoration:none;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:filter .15s ease,transform .05s ease,box-shadow .15s ease,background .15s ease;
}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{filter:brightness(.96)}
.btn-primary:active{transform:translateY(1px)}
.btn-outline{background:#fff;color:#111;border-color:var(--brand)}
.btn-outline:hover{background:#fff0f7}

/* Focus */
a:focus,button:focus,input:focus,summary:focus{
  outline:3px solid var(--focus);
  outline-offset:2px;
  box-shadow:none;
}

/* Skip link */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden
}
.skip-link:focus{
  left:0;top:0;width:auto;height:auto;padding:.5rem;background:#000;color:#fff;z-index:9999
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation-duration:.001ms !important;animation-iteration-count:1 !important}
}

/* Print */
@media print{
  .site-header,.top-nav,.marquee,.hero__art,.back-to-top{display:none !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-weight:400}
}

/* ------------------------------
   Header and navigation
   ------------------------------ */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:#fff;border-bottom:1px solid #eee;
  backdrop-filter:saturate(150%) blur(4px);
}
.site-header .wrap{
  display:flex;align-items:center;gap:1rem;
  padding:.55rem 0; /* tight header to remove large space */
}
.brand a{display:flex;align-items:center;gap:.65rem;color:var(--ink)}
.brand__img{display:block;height:30px;width:auto}
@media (min-width:900px){.brand__img{height:42px}}
.brand__mark,.brand__name{display:none}

.top-nav{margin-left:auto;display:flex;gap:1rem}
.top-nav a{padding:.55rem .8rem;border-radius:10px}
.top-nav a:hover{background:#f7f7f7}
.top-nav a.btn-primary{padding:.8rem 1rem}

/* ------------------------------
   Section bands
   ------------------------------ */
.band-white{background:#fff}
.band-pink{background:var(--brand-50)}
.band-grey{background:#f3f3f3}

/* ------------------------------
   Hero
   ------------------------------ */
.hero--pink{
  --hero-bg:var(--brand-50);
  --hero-accent:var(--brand);
  background:var(--hero-bg);
  position:relative;overflow:clip;border-bottom:4px solid #e9c8d9;
}
.hero__inner{
  min-height:clamp(480px,64vh,640px);
  display:grid;grid-template-columns:1fr;align-items:end;
  padding:clamp(.8rem,2vw,1.2rem) 0 clamp(.8rem,2vw,1rem); /* smaller top padding */
  position:relative;
}
@media (min-width:960px){
  .hero__inner{grid-template-columns:1.05fr .95fr;column-gap:clamp(1rem,3vw,2rem)}
}
.hero__copy{max-width:780px;z-index:2}
.hero__title{margin:0 0 .65rem;font-weight:800;font-size:clamp(2.1rem,4.3vw,3.25rem);line-height:1.12;letter-spacing:-.2px}
.hero__title-accent{position:relative;display:inline-block}
.hero__title-accent::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:10px;
  background:linear-gradient(90deg,rgba(236,134,184,.45),rgba(236,134,184,.05));border-radius:8px
}
.hero__lead{margin:.15rem 0 .9rem;font-size:clamp(1rem,1.3vw,1.125rem);color:#2a2a2a;max-width:70ch}
.hero__cta-row{display:flex;gap:.6rem;flex-wrap:wrap;margin:.15rem 0 .55rem}
.hero__bullets{margin:.5rem 0 .35rem;padding-left:1.15rem}
.hero__bullets li{margin:.3rem 0}
.hero__disclaimer{margin-top:.15rem}
.hero__art{position:relative;min-height:220px}
.hero__art img{
  position:absolute;right:clamp(-12px,-1vw,0);bottom:0;width:clamp(380px,56vw,760px);
  height:auto;object-fit:contain;object-position:right bottom;transform:translateZ(0);
  filter:drop-shadow(0 8px 28px rgba(0,0,0,.08));pointer-events:none;user-select:none
}
/* decorative glow */
.hero--pink::before,.hero--pink::after{
  content:"";position:absolute;z-index:1;border-radius:50%;filter:blur(35px);opacity:.45;pointer-events:none
}
.hero--pink::before{
  width:42vw;max-width:520px;aspect-ratio:1;left:-12vw;bottom:-18vh;
  background:radial-gradient(closest-side,rgba(236,134,184,.35),transparent 70%)
}
.hero--pink::after{
  width:30vw;max-width:420px;aspect-ratio:1;right:-8vw;bottom:-12vh;
  background:radial-gradient(closest-side,rgba(236,134,184,.28),transparent 70%)
}
.hero .btn.btn-primary{padding:.95rem 1.15rem;border-radius:12px}

/* ------------------------------
   Trust strip
   ------------------------------ */
.trust-strip{background:#fff;border-top:3px solid var(--brand-700)}
.trust-strip .wrap{display:flex;gap:1rem;align-items:center;justify-content:center;padding:.7rem 0;flex-wrap:wrap}
.trust-stars{display:inline-flex;gap:.15rem}
.trust-stars svg{width:18px;height:18px;fill:var(--brand)}
.trust-strip a{font-weight:800;text-decoration:underline}

/* ------------------------------
   Section titles
   ------------------------------ */
.section-title{margin:0 0 .9rem;font-weight:800}

/* ------------------------------
   How switching works (steps)
   ------------------------------ */
.steps{padding:2.2rem 0}
.i-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
@media (min-width:900px){.i-grid{grid-template-columns:repeat(4,1fr)}}
.i-card{
  background:#fff;border:1px solid #eee;border-radius:12px;padding:1.1rem;
  box-shadow:var(--shadow);transition:box-shadow .15s ease,transform .05s ease
}
.i-card:hover{box-shadow:var(--shadow-md)}
.i-card h3{margin:.15rem 0 .4rem;font-size:1.06rem}
.i-more{margin-top:.6rem}
.i-more>summary{list-style:none;cursor:pointer;font-weight:700;padding:.45rem 0;border-top:1px dashed #eee}
.i-more>summary::-webkit-details-marker{display:none}
.i-more[open]>summary{color:#000}
.i-more ul{margin:.5rem 0 0;padding-left:1.1rem}
.i-foot{grid-column:1/-1;margin-top:.6rem}

/* ------------------------------
   Compare section + widget
   ------------------------------ */
#compare{background:#f3f3f3}
.compare-head{padding:2rem 0 1rem}
.stickee-outer{width:90%;margin:0 auto 2rem}
.stickee-wrap{background:transparent;border:none;padding:0;box-shadow:none}
/* Font hint for non-iframe widget subtrees (cannot penetrate cross-origin iframes) */
#stickee-widget,#stickee-widget *{font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important}
#stickeeHost iframe{font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important}

/* ------------------------------
   Speed tools
   ------------------------------ */
#speed-tools.tools .tools__head{margin-bottom:.6rem}
#speed-tools.tools .tools__intro{margin:.3rem 0 0}
#speed-tools.tools .tools__badges{display:flex;gap:.4rem;flex-wrap:wrap;margin:.3rem 0 .5rem;padding:0;list-style:none}
#speed-tools.tools .tools__badges li{background:var(--brand-50);border:1px solid #f3cfe2;color:#111;padding:.25rem .55rem;border-radius:999px;font-size:.85rem;font-weight:700}
#speed-tools.tools .tools__cards{display:grid;grid-template-columns:1fr;gap:.8rem;margin:.6rem 0 1.6rem}
@media (min-width:960px){#speed-tools.tools .tools__cards{grid-template-columns:repeat(3,1fr)}}
#speed-tools.tools .tools__card{background:#fff;border:1px solid #eee;border-radius:12px;padding:1rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.45rem;min-height:100%}
#speed-tools.tools .tools__h{margin:0;font-size:1.05rem;font-weight:800}
#speed-tools.tools .tools__p{margin:0 0 .1rem}
#speed-tools.tools .tools__cta{margin-top:auto}
#speed-tools.tools .tools__cta-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:auto}
#speed-tools.tools .tools__cta.tools__cta--ghost{background:var(--brand-50);border:1px solid #f3cfe2;color:#111}
#speed-tools.tools .tools__cta.tools__cta--ghost:hover{filter:brightness(.98)}
#speed-tools.tools .tools__details{margin-top:.2rem}
#speed-tools.tools .tools__details>summary{list-style:none;cursor:pointer;font-weight:700;padding:.45rem 0;border-top:1px dashed #eee}
#speed-tools.tools .tools__details>summary::-webkit-details-marker{display:none}
#speed-tools.tools .tools__list{margin:.45rem 0 0;padding-left:1.1rem}
#speed-tools.tools .tools__troubleshoot>summary{list-style:none;cursor:pointer;font-weight:800;background:#fff;border:1px solid #eee;border-radius:12px;padding:.7rem 1rem;box-shadow:var(--shadow)}
#speed-tools.tools .tools__troubleshoot>summary::-webkit-details-marker{display:none}
#speed-tools.tools .tools__troubleshoot[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
#speed-tools.tools .tools__ts-grid{background:#fff;border:1px solid #eee;border-top:none;border-bottom-left-radius:12px;border-bottom-right-radius:12px;padding:.7rem 1rem;display:grid;grid-template-columns:1fr;gap:.35rem}
@media (min-width:800px){#speed-tools.tools .tools__ts-grid{grid-template-columns:1fr 1fr}}

/* ------------------------------
   Providers marquee
   ------------------------------ */
.providers{padding:2rem 0}
.hint{color:#555;margin:.25rem 0 1rem}
.marquee{
  overflow:hidden;position:relative;background:#fff;border:1px solid var(--border);border-radius:12px;margin:1rem 0;padding:.35rem .2rem
}
.marquee__belt{display:flex;width:max-content;gap:1.25rem;align-items:center}
.marquee__row{display:inline-flex;gap:1.25rem;align-items:center}
.marquee a{display:grid;place-items:center;padding:.25rem .5rem}
.marquee img{height:52px;width:auto;display:block;image-rendering:auto}
.marquee__track{display:inline-block;white-space:nowrap;will-change:transform;animation:marquee-left 28s linear infinite}
.marquee--rtl .marquee__track{animation-name:marquee-right}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ------------------------------
   Generic explain blocks + cards
   ------------------------------ */
.explain{padding:2.2rem 0}
.card-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:900px){.card-grid{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid #eee;border-radius:12px;padding:1.1rem;box-shadow:var(--shadow)}
.card h3{margin:.2rem 0 .35rem;font-size:1.06rem}

/* Alternative comparison cards */
.alt-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
@media (min-width:900px){.alt-grid{grid-template-columns:repeat(4,1fr)}}
.alt-card{
  display:grid;grid-template-rows:auto 1fr auto;gap:.6rem;
  background:var(--chip);border:1px solid var(--chip-border);border-radius:12px;padding:1rem;text-align:center
}
.alt-card img{max-height:42px;width:auto;margin:0 auto}
.alt-card h3{margin:.25rem 0 .15rem;font-size:1.06rem}
.alt-card p{margin:0;color:#333;font-size:.95rem}
.alt-card .btn{margin-top:.55rem}
.chip--dark{background:#141518;border-color:#141518}
.chip--dark p,.chip--dark h3{color:#f5f7fb}

/* ------------------------------
   Testimonials (card style reused inside marquee)
   ------------------------------ */
.testimonials{padding:2rem 0}
.q-card{
  min-width:300px;max-width:520px;flex:0 0 86%;
  border:1px solid var(--border);border-radius:16px;
  background:linear-gradient(180deg,#fff 0,#fff 70%,#fdf3f8 100%);
  padding:1.2rem 1.2rem 1rem;box-shadow:var(--shadow);display:grid;gap:.5rem
}
@media (min-width:760px){.q-card{flex-basis:48%}}
@media (min-width:1100px){.q-card{flex-basis:32%}}
.q-stars{color:var(--brand);font-size:1.1rem;letter-spacing:.1rem}
.q-quote{font-size:1.05rem;line-height:1.45}
.q-meta{font-size:.9rem;color:#555}

/* ------------------------------
   Speed band (What speed do I need?)
   ------------------------------ */
.speed-band{background:var(--brand);color:#fff;padding:2rem 0}
.speed-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
@media (min-width:900px){.speed-grid{grid-template-columns:repeat(4,1fr)}}
.speed-card{background:#fff;color:#111;border-radius:12px;padding:1rem;border:1px solid #ffd9ea;box-shadow:var(--shadow)}
.speed-card h3{margin:.1rem 0 .4rem}
.speed-card ul{margin:.35rem 0 0;padding-left:1.2rem}

/* ------------------------------
   FAQs (details-based)
   ------------------------------ */
.faq-list{display:grid;gap:1.25rem;margin-top:1.25rem}
details.faq-item{
  background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:var(--shadow)
}
details.faq-item[open]{box-shadow:var(--shadow-md)}
details.faq-item > summary{
  font-weight:800;font-size:1.06rem;padding:1rem 1.1rem;list-style:none;cursor:pointer;border-radius:12px
}
details.faq-item > summary::-webkit-details-marker{display:none}
details.faq-item > div{padding:0 1.1rem 1rem}
details.faq-item ul,details.faq-item ol{margin:.4rem 0 0;padding-left:1.1rem}

/* ------------------------------
   Footer
   ------------------------------ */
.site-footer{background:#f8f6f8;border-top:1px solid #eee;padding:2rem 0}
.footer-cols{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:900px){.footer-cols{grid-template-columns:2fr 2fr 1.2fr 1.2fr}}
.partner-list,.legal-list{list-style:none;margin:0;padding:0}
.partner-list li,.legal-list li{margin:.35rem 0}
.copyright{text-align:center;margin-top:1rem;color:#555}

/* ------------------------------
   Back to top
   ------------------------------ */
.back-to-top{
  position:fixed;bottom:1.5rem;right:1.5rem;width:3.25rem;height:3.25rem;
  background:var(--brand);color:#fff;border:none;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:pointer;z-index:1000;
  transition:filter .15s ease,transform .05s ease
}
.back-to-top::after{content:"↑";font-size:1.2rem;line-height:1}
.back-to-top.show{display:flex}
.back-to-top:hover{filter:brightness(.96)}
.back-to-top:active{transform:translateY(1px)}

/* ============================
   Additional refinements
   ============================ */

/* Testimonials marquee tweaks */
.marquee.t-marquee{background:transparent;border:none;padding:.5rem 0}
.marquee.t-marquee .marquee__belt{gap:1rem}
.marquee.t-marquee .marquee__track{animation-duration:40s}
@media (min-width:900px){
  .marquee.t-marquee .marquee__track{animation-duration:55s}
}
.marquee.t-marquee .q-card{max-width:520px}

/* FAQ caret indicator */
details.faq-item > summary{position:relative;padding-right:2rem}
details.faq-item > summary::after{
  content:"▾";position:absolute;right:.9rem;top:50%;
  transform:translateY(-50%) rotate(0);transition:transform .2s ease;color:#888
}
details.faq-item[open] > summary::after{transform:translateY(-50%) rotate(180deg);color:#444}

/* Links inside coloured bands */
.speed-band a{color:#fff;text-decoration:underline}
.speed-band a:hover{filter:brightness(1.05)}

/* Footer small tweaks */
.site-footer h3{margin:.1rem 0 .6rem}
.site-footer address a{color:inherit;text-decoration:underline}
.partner-list li a:hover,.legal-list li a:hover{text-decoration:underline}

/* Provider hint link underline */
.hint a{text-decoration:underline}

/* Responsive refinements */
@media (max-width:599.98px){
  .hero__title{font-size:2rem}
  .hero__art img{width:min(74vw,520px);right:-12px}
  .site-footer .btn{width:100%}
}

/* --- Testimonials wrapping fix --- */
.marquee.t-marquee .q-card{
  /* Use a fixed-ish width per card but allow content to wrap */
  flex: 0 0 auto;
  width: clamp(320px, 44vw, 520px);
  min-width: 0;                 /* important for flex/grid text wrapping */
}

.marquee.t-marquee .q-card .q-quote,
.marquee.t-marquee .q-card p{
  white-space: normal;          /* allow multi-line text */
  overflow-wrap: anywhere;      /* break long words/URLs if needed */
  word-wrap: break-word;
  hyphens: auto;
}

/* keep the ticker smooth */
.marquee.t-marquee .marquee__track{ animation-duration: 50s; }
.marquee.t-marquee .marquee__belt{ display: inline-flex; gap: 1rem; }


/* 1) Hide the hero image on smaller screens (when the layout stacks) */
@media (max-width: 959.98px){
  .hero__art{ display:none; }          /* hide the artwork */
  .hero__inner{ min-height:auto; }     /* avoid forced tall hero when image is hidden */
}

/* If you prefer a different cutoff, change 959.98px to 799.98px or 699.98px */

/* 2) Remove the gap at the bottom of the hero so the image touches the band edge */
.hero--pink .hero__inner{ padding-bottom:0; }   /* kill the bottom padding */
.hero--pink .hero__art img{
  bottom:-1px;                                  /* nudge to cover any sub-pixel gap */
  /* keep other existing rules (position:absolute; object-fit:contain; etc.) */
}