/*
Theme Name: Televo
Theme URI: https://televo-uk.com/
Description: Televo IPTV landing page. Prices and WhatsApp number are editable in Appearance > Customize > Televo.
Version: 2.0.0
Requires PHP: 7.4
Text Domain: televo
*/

/* ===========================================================================
   DESIGN TOKENS — "the programme guide"
   The page borrows the visual language of a TV's electronic programme guide:
   deep broadcast-blue surfaces, a grid of channel rows, and the yellow
   highlight a remote control moves around. Yellow is reserved for "now",
   "selected" and the primary action; red only marks something live.
   Type: Fira Sans Extra Condensed (lower-third headlines) + Fira Sans (body).
   Both cover Latin, Cyrillic and Greek, i.e. all 32 site languages.
   =========================================================================== */
:root{
  --ink:        #0A1736;   /* page */
  --ink-2:      #0E1D45;   /* raised band */
  --panel:      #112352;   /* guide cells, plans */
  --panel-on:   #1A3070;   /* the programme that is on now */
  --line:       #22386E;   /* grid lines */
  --line-ui:    #4A5E98;   /* interactive boundaries, 3.1:1 on --ink */

  --fg:         #EEF2FF;   /* 15.6:1 on --ink */
  --fg-2:       #C9D2F0;
  --muted-fg:   #A9B6DE;   /* 8.4:1 on --ink */

  --signal:     #FFD23F;   /* selection / now / primary — 12.6:1 on --ink */
  --signal-hi:  #FFE07A;
  --on-signal:  #0A1736;
  --live:       #FF4D5E;
  --ok:         #5EE0A8;

  --ring:       #FFD23F;

  /* legacy aliases still referenced by inline PHP output */
  --bg: var(--ink); --card: var(--panel); --border: var(--line); --border-ui: var(--line-ui);
  --border-soft: rgba(201,210,240,.12); --accent: var(--signal); --accent-text: var(--signal);
  --on-accent: var(--on-signal); --warning: var(--signal); --success: var(--ok);

  --font-display: 'Fira Sans Extra Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Modular scale, ratio ~1.25 at the base, opening up for display sizes */
  --step--1: clamp(.84rem, .82rem + .1vw, .9rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.07rem);
  --step-1:  clamp(1.2rem, 1.13rem + .35vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.38rem + .6vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.4vw, 2.75rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.4vw, 3.9rem);
  --step-5:  clamp(2.9rem, 2rem + 4.2vw, 5.6rem);

  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;    --space-9: 6rem;

  /* Two radii only: small for controls and cells, larger for screens */
  --r-sm: 6px;
  --r-lg: 14px;
  --radius: var(--r-sm); --radius-lg: var(--r-lg); --radius-pill: 999px;

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--ink); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:transparent;
  color:var(--fg);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; line-height:1.02; margin:0 0 var(--space-4); letter-spacing:0; text-wrap:balance; }
h1{ font-size:var(--step-5); }
h2{ font-size:var(--step-4); }
h3{ font-size:var(--step-2); font-weight:600; line-height:1.15; }
h4{ font-size:var(--step-1); font-weight:600; }
p{ margin:0 0 var(--space-4); }
img,svg{ max-width:100%; }
img{ height:auto; display:block; }

a{ color:var(--signal); text-underline-offset:.22em; text-decoration-thickness:.08em; }
a:hover{ color:var(--signal-hi); }

:focus-visible{ outline:3px solid var(--ring); outline-offset:3px; border-radius:4px; }
:focus:not(:focus-visible){ outline:none; }

.skip-link{
  position:absolute; left:var(--space-4); top:-100px; z-index:200;
  background:var(--signal); color:var(--on-signal);
  padding:var(--space-3) var(--space-5); border-radius:var(--r-sm);
  font-weight:600; text-decoration:none; transition:top .18s var(--ease);
}
.skip-link:focus{ top:var(--space-4); color:var(--on-signal); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--space-5); }
@media (max-width:520px){ .wrap{ padding-inline:var(--space-4); } }
.section{ padding-block:var(--space-9); position:relative; }
.section--tight{ padding-block:var(--space-8); }

/* Section kicker: kept for its keywords, set quietly in sentence case */
.eyebrow{
  display:block; margin:0 0 var(--space-3);
  font-size:var(--step--1); font-weight:500; color:var(--signal);
}

.lede{ font-size:var(--step-1); line-height:1.5; color:var(--fg-2); max-width:58ch; }
.muted{ color:var(--muted-fg); }
.section-head{ max-width:62ch; margin-bottom:var(--space-7); }
.section-head h2{ max-width:20ch; }
.section-head.center h2{ margin-inline:auto; }
.center{ text-align:center; margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:52px; padding:var(--space-3) var(--space-6);
  font-family:var(--font-body); font-size:var(--step-0); font-weight:600;
  border-radius:var(--r-sm); border:2px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn--primary{ background:var(--signal); color:var(--on-signal); }
.btn--primary:hover{ background:var(--signal-hi); color:var(--on-signal); }
.btn--ghost{ background:transparent; color:var(--fg); border-color:var(--line-ui); }
.btn--ghost:hover{ border-color:var(--signal); color:var(--fg); }
.btn--sm{ min-height:44px; padding:var(--space-2) var(--space-5); font-size:var(--step--1); }
.btn--block{ width:100%; white-space:normal; text-align:center; }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; }

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(10,23,54,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.header.is-stuck{ background:rgba(10,23,54,.96); border-bottom-color:var(--line); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); min-height:72px; }
.brand{ display:inline-flex; align-items:center; gap:var(--space-3); font-family:var(--font-display); font-weight:800; font-size:1.55rem; color:var(--fg); text-decoration:none; }
.brand:hover{ color:var(--fg); }
.brand__mark{ width:38px; height:38px; flex:none; display:block; }
.brand__mark img{ width:100%; height:100%; display:block; border-radius:8px; }

.nav{ display:none; align-items:center; gap:var(--space-6); }
.nav a{ color:var(--fg-2); text-decoration:none; font-size:.95rem; padding-block:var(--space-2); border-bottom:2px solid transparent; transition:color .18s var(--ease), border-color .18s var(--ease); }
.nav a:hover{ color:var(--fg); border-bottom-color:var(--signal); }
.header__cta{ display:none; }
@media (min-width:960px){
  .nav{ display:flex; }
  .header__cta{ display:inline-flex; }
}

.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:var(--r-sm);
  background:transparent; border:1px solid var(--line-ui); color:var(--fg); cursor:pointer;
}
.menu-toggle svg{ width:22px; height:22px; }
@media (min-width:960px){ .menu-toggle{ display:none; } }

.mobile-nav{ display:none; flex-direction:column; gap:var(--space-1); padding:var(--space-4) 0 var(--space-6); border-top:1px solid var(--line); }
.mobile-nav.is-open{ display:flex; }
.mobile-nav a{ color:var(--fg-2); text-decoration:none; padding:var(--space-3) var(--space-2); min-height:44px; display:flex; align-items:center; border-radius:var(--r-sm); }
.mobile-nav a:hover{ background:var(--panel); color:var(--fg); }
.mobile-nav .btn{ margin-top:var(--space-3); color:var(--on-signal); justify-content:center; }
@media (min-width:960px){ .mobile-nav{ display:none !important; } }

/* ---------- Hero ---------- */
.hero{ position:relative; padding-block:var(--space-8) var(--space-7); overflow:hidden; }
.hero__bg{ display:none; }
.hero__inner{ position:relative; z-index:1; display:grid; gap:var(--space-7); align-items:center; }
@media (min-width:1000px){ .hero__inner{ grid-template-columns:1.1fr .9fr; gap:var(--space-8); } }

.hero h1{ margin-bottom:var(--space-5); line-height:.95; }
.hero h1 .accent{ display:block; color:inherit; }
.hero h1 .subline{
  display:block; margin-top:var(--space-4);
  font-size:var(--step-3); font-weight:600; line-height:1.1;
  color:var(--fg-2);
}
/* "4K" is set as the quality bug a broadcaster puts in the corner */
.hero h1 .subline em{
  font-style:normal; font-weight:800;
  display:inline-block; padding:0 .22em; margin-inline:.05em;
  border:.08em solid var(--signal); border-radius:.14em;
  color:var(--signal); line-height:1.05;
}
.hero .lede{ margin-bottom:var(--space-6); }

.badge-row{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); margin-bottom:var(--space-6); }
.badge{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--step--1); font-weight:500; color:var(--fg-2); }
.badge svg{ width:16px; height:16px; flex:none; color:var(--ok); }

.hero__reassure{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); margin-top:var(--space-5); font-size:var(--step--1); color:var(--muted-fg); }
.hero__reassure span{ display:inline-flex; align-items:center; gap:var(--space-2); }
.hero__reassure svg{ width:15px; height:15px; color:var(--ok); flex:none; }

/* The television: a bezel, a live bug, and the picture */
.device-mock{ position:relative; }
.screen{
  border-radius:var(--r-lg); overflow:hidden;
  background:#050B1C; padding:10px;
  border:1px solid var(--line);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.4) inset;
}
.screen__bar{
  position:absolute; z-index:2; top:22px; left:22px; right:22px;
  display:flex; align-items:center; gap:var(--space-2);
}
.screen__bar .dot:not(.dot--live){ display:none; }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--line-ui); flex:none; }
.dot--live{ background:var(--live); box-shadow:0 0 0 3px rgba(255,77,94,.25); }
.screen__label, .screen__q{
  font-family:var(--font-display); font-weight:600; font-size:.95rem; line-height:1;
  padding:5px 8px; border-radius:4px; background:rgba(5,11,28,.78); color:#fff;
}
.screen__label{ margin-left:-2px; }
.screen__q{ margin-left:auto; color:var(--on-signal); background:var(--signal); }
.screen__bar .dot--live{ margin-right:-2px; }
.screen__body{ display:block; }
.screen .photo-frame{ border:0; border-radius:6px; box-shadow:none; }
.screen .photo-frame::after{ background:linear-gradient(180deg, rgba(5,11,28,.45), transparent 30%); }

.chip{
  display:inline-flex; align-items:center;
  font-size:var(--step--1); font-weight:500;
  padding:4px 10px; border-radius:4px;
  background:var(--panel); border:1px solid var(--line); color:var(--fg-2); white-space:nowrap;
}

/* ---------- Programme guide (the signature) ----------
   Columns: a channel cell, then a 12-unit timeline covering 2 hours.
   JS writes the visitor's local times into the ruler and positions the
   "now" line; without JS the grid still reads as a guide. */
.guide{ padding-block:var(--space-6) var(--space-8); }
.guide__board{
  --ch: 240px;
  position:relative;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--ink-2); overflow:hidden;
}
.guide__ruler, .guide__row{ display:grid; grid-template-columns:var(--ch) 1fr; }
.guide__ruler{ border-bottom:1px solid var(--line); min-height:44px; }
.guide__corner{
  display:flex; align-items:center; gap:var(--space-2);
  padding-inline:var(--space-4); border-right:1px solid var(--line);
  font-size:var(--step--1); font-weight:500; color:var(--fg-2);
}
.guide__times{ display:grid; grid-template-columns:repeat(4,1fr); }
.guide__times span{
  display:flex; align-items:center; padding-inline:var(--space-3);
  border-left:1px solid var(--line);
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  color:var(--muted-fg); font-variant-numeric:tabular-nums;
}
.guide__times span:first-child{ border-left:0; }
.guide__row + .guide__row{ border-top:1px solid var(--line); }
.guide__ch{
  min-width:0;
  padding:var(--space-4); border-right:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center;
}
.guide__n{
  margin:0; font-family:var(--font-display); font-weight:800;
  font-size:var(--step-3); line-height:1; color:var(--fg);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere; hyphens:auto;
}
.guide__l{ margin:var(--space-1) 0 0; font-size:var(--step--1); color:var(--muted-fg); }
.guide__slots{
  list-style:none; margin:0; padding:6px;
  display:grid; grid-template-columns:repeat(12,1fr); gap:6px;
}
.guide__slots li{
  grid-column:span var(--span,4);
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  padding:var(--space-3) var(--space-4); margin:0; min-height:72px;
  border-radius:var(--r-sm); background:var(--panel);
  font-weight:500; color:var(--fg-2); line-height:1.25;
}
.guide__slots li.is-on{ background:var(--panel-on); color:var(--fg); font-weight:600; }
.guide__bar{
  position:absolute; left:0; bottom:0; height:3px; width:var(--progress,40%);
  background:var(--signal);
}
.guide__now{
  position:absolute; top:0; bottom:0; width:2px; z-index:2;
  left:calc(var(--ch) + (100% - var(--ch)) * var(--now,.38));
  background:var(--signal); pointer-events:none;
  box-shadow:0 0 0 1px rgba(10,23,54,.5);
}
.guide__clock{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  padding:3px 7px; border-radius:4px;
  background:var(--signal); color:var(--on-signal);
  font-family:var(--font-display); font-weight:800; font-size:1rem; line-height:1.1;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.guide__clock:empty{ display:none; }
@media (max-width:760px){
  .guide__board{ --ch: 112px; }
  .guide__ch{ padding:var(--space-3); }
  .guide__n{ font-size:var(--step-2); }
  .guide__slots{ grid-template-columns:1fr; }
  .guide__slots li{ grid-column:auto; min-height:44px; padding:var(--space-2) var(--space-3); font-size:var(--step--1); }
  .devices-grid .device-card{ padding:var(--space-5) var(--space-4); }
  .guide__ruler{ grid-template-columns:1fr; }
  .guide__corner{ border-right:0; }
  .guide__times, .guide__now{ display:none; }
  .guide__corner{ padding-inline:var(--space-3); font-size:.8rem; }
}

/* ---------- Generic grids ---------- */
.grid{ display:grid; gap:var(--space-5); }
.grid--2, .grid--3, .grid--4{ grid-template-columns:1fr; }
@media (min-width:660px){
  .grid--2, .grid--3, .grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1000px){
  .grid--3{ grid-template-columns:repeat(3,1fr); }
  .grid--4{ grid-template-columns:repeat(4,1fr); }
}

.card{
  background:var(--panel); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--space-6);
}
.card h3{ margin-bottom:var(--space-3); }
.card p:last-child{ margin-bottom:0; }

.icon-badge{ width:28px; height:28px; margin-bottom:var(--space-4); color:var(--signal); }
.icon-badge svg{ width:28px; height:28px; display:block; }

/* ---------- Key features: the channel list ---------- */
.keyfeat{ display:grid; gap:var(--space-7); align-items:start; }
@media (min-width:1000px){ .keyfeat{ grid-template-columns:.9fr 1.1fr; gap:var(--space-8); } }
.keyfeat__media h2{ margin-bottom:var(--space-5); }
.keyfeat__media .photo-frame{ margin-bottom:var(--space-6); max-height:560px; }
.keyfeat__media .photo-frame img{ aspect-ratio:4/3.4; }
.keyfeat__note{ font-size:var(--step--1); color:var(--muted-fg); margin-top:var(--space-4); }
@media (min-width:1000px){ .keyfeat__media{ position:sticky; top:100px; } }

.featlist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); counter-reset:ch 100; }
.featlist li{
  counter-increment:ch;
  display:grid; grid-template-columns:3.2rem 1fr; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-2); margin:0; min-height:56px;
  border-bottom:1px solid var(--line);
  font-weight:500; color:var(--fg);
}
/* Channel numbers 101, 102… — the list is presented as a channel line-up */
.featlist li::before{
  content:counter(ch);
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  color:var(--muted-fg); font-variant-numeric:tabular-nums;
}
.featlist__bullet{ display:none; }
.featlist li.is-premium{ background:linear-gradient(90deg, rgba(255,210,63,.12), transparent 70%); box-shadow:inset 3px 0 0 var(--signal); }
.featlist li.is-premium::before{ color:var(--signal); }
.featlist__text{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); }
.featlist__badge{
  font-size:.78rem; font-weight:600; white-space:nowrap;
  padding:2px 8px; border-radius:4px;
  background:var(--signal); color:var(--on-signal);
}

/* ---------- Devices: one strip, four columns ---------- */
.devices-grid{
  gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--ink-2);
}
.devices-grid .device-card{
  background:transparent; border:0; border-radius:0;
  padding:var(--space-6) var(--space-5); text-align:left;
}
.devices-grid .device-card + .device-card{ border-top:1px solid var(--line); }
@media (min-width:660px){
  .devices-grid .device-card + .device-card{ border-top:0; }
  .devices-grid .device-card:nth-child(n+3){ border-top:1px solid var(--line); }
  .devices-grid .device-card:nth-child(even){ border-left:1px solid var(--line); }
}
@media (min-width:1000px){
  .devices-grid .device-card:nth-child(n+3){ border-top:0; }
  .devices-grid .device-card + .device-card{ border-left:1px solid var(--line); }
}
.device-card h3{ font-size:var(--step-2); margin-bottom:var(--space-2); }
.device-card p{ font-size:var(--step--1); color:var(--muted-fg); margin:0; }

/* Platform logos are dark-on-white artwork, so they sit on a white plate */
.logo-wall{
  background:#FFFFFF; border-radius:var(--r-lg);
  max-width:760px; margin:var(--space-6) auto 0; padding:var(--space-5);
}
.logo-wall img{ display:block; width:100%; height:auto; }

.app-strip{
  margin-top:var(--space-5);
  display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; justify-content:center;
}
.app-strip__label{ font-size:var(--step--1); color:var(--muted-fg); margin-right:var(--space-2); }

/* ---------- Why Televo: a 3×2 spec sheet ---------- */
.spec-grid{
  gap:0; border-top:1px solid var(--line);
}
.spec-grid .card{
  background:transparent; border:0; border-radius:0;
  border-bottom:1px solid var(--line);
  padding:var(--space-6) var(--space-5) var(--space-6) 0;
}
@media (min-width:660px){
  .spec-grid .card:nth-child(even){ padding-left:var(--space-6); border-left:1px solid var(--line); }
}
@media (min-width:1000px){
  .spec-grid .card:nth-child(even){ padding-left:0; border-left:0; }
  .spec-grid .card:not(:nth-child(3n+1)){ padding-left:var(--space-6); border-left:1px solid var(--line); }
}
.spec-grid .card p{ color:var(--fg-2); }

/* ---------- Photo frames ---------- */
.photo-frame{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--panel);
}
.photo-frame img{ display:block; width:100%; height:100%; object-fit:cover; }
.photo-frame::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 60%, rgba(10,23,54,.55)); }

/* ---------- Pricing ---------- */
.price-grid{ display:grid; gap:var(--space-4); grid-template-columns:1fr; align-items:stretch; }
@media (min-width:680px){ .price-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .price-grid{ grid-template-columns:repeat(4,1fr); } }

.plan{ min-width:0; position:relative; display:flex; flex-direction:column; height:100%; padding:var(--space-5); background:var(--ink-2); }
.plan--featured{ background:var(--panel-on); border:2px solid var(--signal); }
.plan__term{ font-family:var(--font-display); font-size:var(--step-3); font-weight:800; margin-bottom:var(--space-1); }
.plan__sub{ font-size:var(--step--1); color:var(--muted-fg); margin-bottom:var(--space-5); }
.plan--featured .plan__sub{ color:var(--signal); font-weight:500; }

.plan__wasrow{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-2); min-height:26px; }
.plan__was{ font-size:var(--step--1); color:var(--muted-fg); text-decoration:line-through; text-decoration-thickness:.08em; }
.plan__badge{ font-size:.8rem; font-weight:600; white-space:nowrap; padding:2px 8px; border-radius:4px; background:rgba(94,224,168,.14); color:var(--ok); }

.plan__price{ display:flex; align-items:flex-start; gap:3px; margin-bottom:var(--space-5); font-variant-numeric:tabular-nums; }
.plan__price .cur{ font-family:var(--font-display); font-size:var(--step-2); font-weight:600; margin-top:.2em; color:var(--fg-2); }
.plan__price .amt{ font-family:var(--font-display); font-size:var(--step-4); font-weight:800; line-height:.9; }
.plan__price .cur--after{ margin-left:4px; }
.plan__price--long .amt{ font-size:var(--step-4); }

.plan__inclabel{
  font-size:var(--step--1); font-weight:600; color:var(--fg-2);
  padding-top:var(--space-5); margin:var(--space-5) 0 var(--space-3);
  border-top:1px solid var(--line);
}
.plan__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2); font-size:var(--step--1); }
.plan__list li{ display:flex; gap:var(--space-2); align-items:flex-start; color:var(--fg-2); }
.plan__list li.is-key{ font-weight:600; color:var(--fg); }
.plan__list svg{ width:16px; height:16px; color:var(--ok); flex:none; margin-top:3px; }

.price-note{ margin:var(--space-5) auto 0; max-width:70ch; text-align:center; font-size:var(--step--1); color:var(--muted-fg); }

/* Guarantees: one quiet strip instead of four coloured tiles */
.benefits{
  display:grid; grid-template-columns:1fr; margin-top:var(--space-7);
  border-block:1px solid var(--line);
}
@media (min-width:620px){ .benefits{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .benefits{ grid-template-columns:repeat(4,1fr); } }
.benefit{
  display:grid; grid-template-columns:auto 1fr; column-gap:var(--space-3); align-items:start;
  padding:var(--space-5) var(--space-4);
}
@media (min-width:1040px){ .benefit + .benefit{ border-left:1px solid var(--line); } }
.benefit__icon{ grid-row:span 2; width:24px; height:24px; color:var(--signal); margin-top:2px; }
.benefit__icon svg{ width:24px; height:24px; display:block; }
.benefit h3{ font-size:var(--step-1); margin:0; }
.benefit p{ margin:0; font-size:var(--step--1); color:var(--muted-fg); }

/* ---------- Steps: a programme progress bar ---------- */
.steps{ display:grid; gap:var(--space-6); position:relative; }
@media (min-width:860px){
  .steps{ grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
  .steps::before{
    content:""; position:absolute; left:0; right:0; top:21px; height:4px; border-radius:2px;
    background:linear-gradient(90deg, var(--signal) 0 50%, var(--line) 50%);
  }
}
.step{ position:relative; }
.step__n{
  position:relative; z-index:1;
  width:46px; height:46px; border-radius:50%; margin-bottom:var(--space-4);
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:1.4rem;
  background:var(--ink); color:var(--signal); border:3px solid var(--signal);
}
.step:last-child .step__n{ color:var(--muted-fg); border-color:var(--line-ui); }
.step h3{ font-size:var(--step-2); }
.step p{ color:var(--fg-2); margin:0; max-width:36ch; }

/* ---------- Reviews ---------- */
.quotes-grid{ gap:var(--space-4); }
.quote-card{ margin:0; display:flex; flex-direction:column; gap:var(--space-4); background:var(--ink-2); padding:var(--space-5); }
.quote-card__mark{ width:22px; height:22px; color:var(--signal); flex:none; }
.quote-card blockquote{ margin:0; color:var(--fg); font-size:var(--step-0); line-height:1.55; flex:1; }
.quote-card figcaption{ font-size:var(--step--1); color:var(--muted-fg); }

/* ---------- FAQ ---------- */
.faq{ max-width:860px; margin-inline:auto; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none;
  padding:var(--space-5) var(--space-2); min-height:44px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  font-weight:600; font-size:var(--step-1); line-height:1.3;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--signal); }
.faq summary .chev{ width:22px; height:22px; flex:none; color:var(--signal); transition:transform .22s var(--ease); }
.faq details[open] summary .chev{ transform:rotate(180deg); }
.faq .faq__a{ padding:0 var(--space-2) var(--space-5); color:var(--fg-2); max-width:68ch; }
.faq .faq__a p:last-child{ margin-bottom:0; }
.faq .faq__a ul{ margin:0 0 var(--space-4); padding-left:1.2rem; }
.faq .faq__a ul:last-child{ margin-bottom:0; }
.faq .faq__a li{ margin-bottom:var(--space-2); }
.faq .faq__a li::marker{ color:var(--signal); }
.faq .faq__a strong{ color:var(--fg); font-weight:600; }
@media (prefers-reduced-motion: reduce){ .faq summary .chev{ transition:none; } }

/* ---------- Final call to action ---------- */
.photo-band{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-lg); padding:var(--space-9) var(--space-6); text-align:center;
  border:1px solid var(--line);
}
.photo-band__bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.photo-band::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,23,54,.7), rgba(10,23,54,.92)); }
.photo-band h2{ margin-inline:auto; max-width:18ch; }
.photo-band .lede{ margin-inline:auto; margin-bottom:var(--space-6); }
.photo-band .btn-row{ justify-content:center; }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); background:#07112A; padding-block:var(--space-8) var(--space-6); margin-top:var(--space-9); }
.footer__grid{ display:grid; gap:var(--space-7); }
@media (min-width:760px){ .footer__grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; } }
.footer h4{ font-family:var(--font-body); font-size:var(--step--1); font-weight:600; color:var(--fg); margin-bottom:var(--space-4); }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-3); }
.footer a{ color:var(--muted-fg); text-decoration:none; font-size:var(--step--1); }
.footer a:hover{ color:var(--signal); text-decoration:underline; }
.footer__brandcol p{ color:var(--muted-fg); font-size:var(--step--1); max-width:38ch; }
.footer__bottom{ margin-top:var(--space-7); padding-top:var(--space-5); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between; align-items:center; font-size:var(--step--1); color:var(--muted-fg); }

/* ---------- Reveal: a short fade, nothing more ---------- */
.reveal{ opacity:0; transition:opacity .6s var(--ease); }
.reveal.is-in{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transition:none !important; } }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Scroll-driven background ----------
   The JS swaps these per section; the palettes now stay within the
   broadcast-blue family so the page shifts tone without changing brand. */
@property --bg-a    { syntax:'<color>'; inherits:true; initial-value:rgba(46,86,190,.30); }
@property --bg-b    { syntax:'<color>'; inherits:true; initial-value:rgba(10,23,54,0); }
@property --bg-base { syntax:'<color>'; inherits:true; initial-value:#0A1736; }
:root{
  --bg-a:rgba(46,86,190,.30); --bg-b:rgba(10,23,54,0); --bg-base:#0A1736;
  transition:--bg-a 1.1s var(--ease), --bg-b 1.1s var(--ease), --bg-base 1.1s var(--ease);
}
.bg-shift{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 80% -10%, var(--bg-a), transparent 65%),
    radial-gradient(900px 700px at 0% 110%, var(--bg-b), transparent 65%),
    var(--bg-base);
}
@media (prefers-reduced-motion: reduce){ :root{ transition:none; } }

/* ---------- WhatsApp floating button (brand green #25D366) ---------- */
.wa-fab{
  position:fixed; z-index:150;
  right:max(20px, env(safe-area-inset-right));
  bottom:max(20px, env(safe-area-inset-bottom));
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#FFFFFF; text-decoration:none;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  transition:background-color .2s var(--ease);
}
.wa-fab:hover{ background:#1FBE5A; color:#FFFFFF; }
.wa-fab svg{ width:33px; height:33px; }
@media (max-width:520px){
  .wa-fab{ width:54px; height:54px; }
  .wa-fab svg{ width:29px; height:29px; }
}

/* ---------- Language picker ---------- */
.lang-switch{ position:relative; margin-left:auto; }
@media (min-width:960px){
  .nav{ margin-inline:auto; }
  .lang-switch{ margin-left:0; }
}
.lang-switch__btn{
  list-style:none; display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:0 var(--space-3); border-radius:var(--r-sm);
  border:1px solid var(--line); color:var(--fg-2); cursor:pointer;
  font-size:.9rem; font-weight:600;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.lang-switch__btn::-webkit-details-marker{ display:none; }
.lang-switch__btn:hover, .lang-switch[open] .lang-switch__btn{ color:var(--fg); border-color:var(--line-ui); }
.lang-switch__btn svg{ width:18px; height:18px; flex:none; }
.lang-switch__btn .lang-switch__chev{ width:14px; height:14px; transition:transform .18s var(--ease); }
.lang-switch[open] .lang-switch__chev{ transform:rotate(180deg); }
.lang-switch__menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:120;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px;
  width:min(340px, calc(100vw - 32px)); max-height:min(70vh, 520px); overflow:auto;
  margin:0; padding:var(--space-2); list-style:none;
  background:var(--panel); border:1px solid var(--line-ui); border-radius:var(--r-sm);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
@media (max-width:959px){
  .lang-switch{ position:static; }
  .lang-switch__menu{ top:calc(100% - 4px); left:16px; right:16px; width:auto; }
}
.lang-switch__menu a{ display:flex; align-items:center; min-height:40px; padding:0 var(--space-3); border-radius:4px; color:var(--fg-2); text-decoration:none; font-size:.92rem; }
.lang-switch__menu a:hover{ background:var(--panel-on); color:var(--fg); }
.lang-switch__menu a[aria-current]{ color:var(--signal); font-weight:600; }
.lang-switch__menu a:focus-visible{ outline:2px solid var(--ring); outline-offset:-2px; }

/* Phones & tablets: the picture comes first, right under the header */
@media (max-width:999px){
  .hero{ padding-top:var(--space-5); }
  .hero__inner{ gap:var(--space-6); }
  .hero__inner > .device-mock{ order:-1; }
}