/* ==========================================================================
   IPTV NORDIC — Shared Design System
   Used across every page. Keep header/hero/pricing/devices/sport/footer
   patterns consistent site-wide.
   ========================================================================== */

/* Metric-matched local fallbacks: reserve the same space as Inter / Barlow
   Condensed while the web fonts load, so the font swap causes no reflow.
   Values measured against the loaded web fonts (width + vertical metrics). */
@font-face{ font-family: 'Inter Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 100 549;
  size-adjust: 106.2%; ascent-override: 91.4%; descent-override: 22.6%; line-gap-override: 0%; }
@font-face{ font-family: 'Inter Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 550 900;
  size-adjust: 102.5%; ascent-override: 94.6%; descent-override: 23.4%; line-gap-override: 0%; }
@font-face{ font-family: 'Barlow Condensed Fallback'; src: local('Arial Narrow Bold'), local('ArialNarrow-Bold'); font-weight: 600 900;
  size-adjust: 93.6%; ascent-override: 106.9%; descent-override: 21.4%; line-gap-override: 0%; }

:root{
  --navy: #001f45;
  --navy-deep: #001630;
  --blue: #065bc7;
  --blue-light: #4f9cff;
  --yellow: #ffc400;
  --white: #ffffff;
  --light: #f6f8fb;
  --text: #111827;
  --muted: #5f6670;
  --green: #21c45a;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --font-head: 'Barlow Condensed', 'Barlow Condensed Fallback', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1240px;
  --shadow-card: 0 10px 30px rgba(0,31,69,0.08);
  --shadow-lift: 0 18px 40px rgba(0,31,69,0.18);
}

*, *::before, *::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ text-decoration: none; color: inherit; }

/* In-content text links: class-less anchors inside <main> (paragraphs, lists,
   tables, FAQ answers, steps, info boxes). Buttons, cards, nav, breadcrumbs,
   footer and the sidebar TOC/related lists all keep their own styling. */
main a:not([class]):not(.breadcrumbs a, .toc a, .related-content a){
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(6,91,199,0.45);
  transition: color .15s ease, text-decoration-color .15s ease;
}
main a:not([class]):not(.breadcrumbs a, .toc a, .related-content a):hover{
  color: var(--navy);
  text-decoration-color: currentColor;
}
main a:not([class]):not(.breadcrumbs a, .toc a, .related-content a):focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
  text-decoration-color: currentColor;
}
/* Same links on dark navy sections */
:is(.hero, .page-hero, .pricing, .content-section.navy, .sport, .cta-box) a:not([class]):not(.breadcrumbs a, .toc a, .related-content a){
  color: var(--yellow);
  text-decoration-color: rgba(255,196,0,0.5);
}
:is(.hero, .page-hero, .pricing, .content-section.navy, .sport, .cta-box) a:not([class]):not(.breadcrumbs a, .toc a, .related-content a):hover{
  color: var(--white);
  text-decoration-color: currentColor;
}
:is(.hero, .page-hero, .pricing, .content-section.navy, .sport, .cta-box) a:not([class]):not(.breadcrumbs a, .toc a, .related-content a):focus-visible{
  outline-color: var(--yellow);
}
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4{ font-family: var(--font-head); font-weight: 700; margin: 0; line-height: 1.05; }
p{ margin: 0; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link{
  position: absolute; left: -999px; top: 0;
  background: var(--yellow); color: var(--navy); padding: 10px 16px;
  z-index: 999; font-weight: 700;
}
.skip-link:focus{ left: 10px; top: 10px; }

/* Buttons */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-sm{ padding: 9px 18px; font-size: 0.85rem; }
.btn-lg{ padding: 16px 28px; font-size: 1rem; }
.btn-block{ width: 100%; }

.btn-yellow{ background: var(--yellow); color: var(--navy); }
.btn-yellow:hover{ box-shadow: 0 10px 24px rgba(255,196,0,0.35); }

.btn-outline-white{ background: transparent; border-color: rgba(255,255,255,0.5); color: var(--white); }
.btn-outline-white:hover{ background: rgba(255,255,255,0.1); border-color: var(--white); }

.btn-outline-blue{ background: var(--white); border-color: var(--blue); color: var(--blue); }
.btn-outline-blue:hover{ background: var(--blue); color: var(--white); }

.btn-green{ background: var(--green); color: var(--white); }
.btn-green:hover{ box-shadow: 0 10px 24px rgba(33,196,90,0.35); }

.btn-navy-outline{ background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-navy-outline:hover{ background: var(--navy); color: var(--white); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position: sticky; top: 0; z-index: 500;
  background: var(--white);
  border-bottom: 1px solid #eef1f6;
  transition: box-shadow .2s ease;
}
.site-header.scrolled{ box-shadow: 0 4px 20px rgba(0,31,69,0.08); }

.header-inner{
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
  gap: 20px;
}

.logo{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-icon{ display: inline-flex; }
.logo-text{ font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; letter-spacing: 0.5px; }
.logo-navy{ color: var(--navy); }
.logo-blue{ color: var(--blue); }

.main-nav ul{ display: flex; align-items: center; gap: 18px; }
.nav-link{
  font-size: 0.85rem; font-weight: 600; color: var(--text);
  padding: 6px 0; position: relative; white-space: nowrap;
}
.nav-link::after{
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--yellow); transition: width .2s ease;
}
.nav-link:hover::after, .nav-link.active::after{ width: 100%; }
.nav-link.active{ color: var(--navy); }

.header-actions{ display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.hamburger{
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: none; cursor: pointer;
  padding: 0;
}
.hamburger span{ width: 24px; height: 2.5px; background: var(--navy); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.hamburger.open span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity: 0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

/* ==========================================================================
   HERO (homepage)
   ========================================================================== */
.hero{
  position: relative;
  overflow: hidden;
  min-height: 660px;
  display: flex;
  align-items: center;
  isolation: isolate;
  background-image: url('../images/hero-nordic.webp');
  background-size: cover;
  background-position: 72% center;
  background-repeat: no-repeat;
}
@media (max-width: 768px){
  .hero{ background-image: url('../images/hero-nordic-mobile.webp'); }
}
@media (min-width: 1081px){
  .hero{ min-height: 700px; }
}
.hero-overlay{
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(2, 15, 32, 0.94) 0%,
    rgba(2, 15, 32, 0.88) 25%,
    rgba(2, 15, 32, 0.55) 42%,
    rgba(2, 15, 32, 0.12) 56%,
    rgba(2, 15, 32, 0) 68%
  );
}

.hero-inner{
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 40px 30px;
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(0, 610px) 1fr;
  align-items: center;
  gap: 0;
}

.hero-content{
  max-width: 610px;
  position: relative;
  z-index: 2;
}

.badge-yellow{
  display: inline-block;
  background: var(--yellow); color: var(--navy);
  font-weight: 800; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 6px;
  margin-bottom: 18px;
}

.hero-title{
  font-size: clamp(2.6rem, 5.2vw, 4.2rem);
  letter-spacing: 1px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.txt-white{ color: var(--white); }
.txt-yellow{ color: var(--yellow); }
.txt-blue-light{ color: var(--blue-light); }

.hero-sub{
  color: #dbe6f5; font-size: 1.1rem; font-weight: 500;
  margin-bottom: 20px;
  max-width: 560px;
}

.hero-features{
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-bottom: 18px;
}
.hero-features li{
  color: var(--white); font-weight: 600; font-size: 0.92rem;
  display: flex; align-items: center; gap: 6px;
}
.hero-features .check{ color: var(--yellow); font-weight: 800; }

.hero-tagline{
  color: #b9c8de; font-size: 0.95rem; margin-bottom: 26px;
}

.hero-cta{ display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }

.trust-row{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px;
}
.trust-item{ display: flex; align-items: flex-start; gap: 8px; }
.trust-icon{ font-size: 1.1rem; }
.trust-item strong{ display: block; color: var(--white); font-size: 0.82rem; font-weight: 700; }
.trust-item small{ display: block; color: #9fb2ca; font-size: 0.74rem; }

/* ==========================================================================
   FEATURE STRIP
   ========================================================================== */
.feature-strip{ padding: 64px 0; background: var(--white); }
.feature-grid{
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px;
}
.feature-col{ text-align: center; }
.feat-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(6,91,199,0.08); color: var(--blue);
  font-size: 1.6rem; margin-bottom: 14px;
}
.feature-col h3{ font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.feature-col p{ font-size: 0.85rem; color: var(--muted); line-height: 1.5; }

/* ==========================================================================
   GENERIC CONTENT SECTIONS (used on every page)
   ========================================================================== */
.content-section{ padding: 80px 0; }
.content-section.alt{ background: var(--light); }
.content-section.navy{ background: linear-gradient(160deg, var(--navy), var(--navy-deep)); }
.content-section .eyebrow{
  display: block; color: var(--blue); font-weight: 800; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px;
}
.content-section.navy .eyebrow{ color: var(--yellow); }
.content-section h2{
  color: var(--navy); font-size: clamp(1.7rem,3vw,2.35rem);
  text-transform: uppercase; letter-spacing:0.4px; margin-bottom:18px;
}
.content-section.navy h2{ color: var(--white); }
.content-section.navy h3{ color: var(--white); }
.content-section.navy p{ color: #b9c8de; }
.content-section h3{ color: var(--navy); font-size:1.15rem; margin-bottom:10px; }
.content-section p{ color: var(--muted); font-size:0.95rem; line-height:1.75; margin-bottom:16px; max-width: 780px; }
.content-section p.lead{ font-size: 1.08rem; color: var(--text); margin-bottom: 28px; }
.content-section p:last-child{ margin-bottom:0; }
.content-section ul.checklist{ margin: 0 0 16px; }
.content-section ul.checklist li{ color:var(--text); font-size:0.92rem; padding:6px 0; display:flex; gap:8px; align-items:flex-start; }
.content-section ul.checklist li::before{ content:"✓"; color:var(--blue); font-weight:800; }
.content-section.navy ul.checklist li{ color: var(--white); }

.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:start; }
.three-col{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.section-head{ max-width: 720px; margin: 0 0 40px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.link-card{
  display:block; background:var(--white); border:1px solid #e7ecf3; border-radius: var(--radius-md);
  padding: 26px 24px; box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .15s ease;
}
.link-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.link-card .card-icon{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:12px; margin-bottom:14px;
  background: rgba(6,91,199,0.08); color:var(--blue); font-size:1.3rem;
}
.link-card h3{ color:var(--navy); font-size:1.05rem; margin-bottom:8px; }
.link-card p{ color:var(--muted); font-size:0.88rem; margin-bottom:0; }
.link-card .card-arrow{ color:var(--blue); font-weight:700; font-size:0.85rem; margin-top:10px; display:inline-block; }
.link-card a.card-arrow{ padding:6px 0; margin-top:4px; margin-bottom:-6px; }

.center-cta{ text-align:center; margin-top:40px; }
.text-center{ text-align:center; }
.mt-40{ margin-top:40px; }

/* ==========================================================================
   ICON FEATURE GRID (breaks long text blocks into scannable cards)
   ========================================================================== */
.icon-feature-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; margin: 8px 0 32px; }
.icon-feature{ display:flex; flex-direction:column; gap:4px; }
.icon-feature .feat-icon{ margin-bottom:6px; }
.icon-feature h3{ font-family: var(--font-body); font-size:0.98rem; color:var(--navy); margin-bottom:4px; }
.icon-feature p{ font-size:0.85rem; color:var(--muted); margin-bottom:0; max-width:none; }

/* Highlight card — emphasised benefit list, pairs with plain text column */

/* ==========================================================================
   PROCESS STEPS (connected numbered steps — "How it works")
   ========================================================================== */
.process-steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:0; margin-top:12px; position:relative; }
.process-step{ position:relative; padding: 0 28px; text-align:center; }
.process-step:first-child{ padding-left:0; }
.process-step:last-child{ padding-right:0; }
.process-step::after{
  content:""; position:absolute; top:29px; right:-14px; width:28px; height:2px;
  background: rgba(255,255,255,0.25);
}
.content-section:not(.navy) .process-step::after{ background: #dde5f0; }
.process-step:last-child::after{ display:none; }
.process-num{
  width:58px; height:58px; border-radius:50%; background:var(--yellow); color:var(--navy);
  font-family:var(--font-head); font-weight:800; font-size:1.5rem;
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}
.process-step h3{ font-size:1.05rem; margin-bottom:8px; }
.process-step p{ font-size:0.88rem; max-width:none; margin: 0 auto; }
.content-section.navy .process-step p{ color:#b9c8de; }

/* ==========================================================================
   MEDIA PLACEHOLDER (reserved slots for future photography)
   ========================================================================== */

/* Drop-in replacement for .media-placeholder once a real photo exists — same
   rounded/overflow-hidden container, image fills it without distortion. */
.media-photo-wrap{
  border-radius: var(--radius-lg); overflow:hidden; display:block;
  aspect-ratio: 4/3;
}
.media-photo-wrap.ratio-3-2{ aspect-ratio: 3/2; }
.media-photo{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Product/composite shots on a transparent or white background must never be
   cropped — contain instead of cover, so every device stays fully visible. */
.media-photo--contain{ object-fit:contain; }

/* Devices-section override only: this specific photo should be the dominant
   visual element in the right column (~480–560px on desktop). Scoped to
   .devices so it doesn't affect other future uses of .media-photo(-wrap)
   elsewhere on the page. Sizing comes from the image's own intrinsic ratio
   (width:100%, height:auto) instead of the generic fixed-aspect-ratio box. */
.devices .media-photo-wrap{
  aspect-ratio: auto;
  overflow: visible;
  max-width: 560px;
}
.devices .media-photo{
  height: auto;
  max-width: 560px;
}

/* ==========================================================================
   COUNTRY CARDS (Nordic coverage section)
   ========================================================================== */
.country-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; margin-top:8px; }
.country-card{
  display:block; background:var(--white); border:1px solid #e7ecf3; border-radius: var(--radius-md);
  padding:26px 22px; box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .15s ease;
}
.country-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.country-badge{
  width:48px; height:48px; border-radius:50%; margin-bottom:14px;
  background: var(--navy); color:var(--yellow);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:800; font-size:0.95rem; letter-spacing:0.02em;
}
.country-card h3{ color:var(--navy); font-size:1.05rem; margin-bottom:8px; }
.country-card p{ color:var(--muted); font-size:0.85rem; margin-bottom:12px; max-width:none; }
.country-card .card-arrow{ color:var(--blue); font-weight:700; font-size:0.83rem; }

/* Placeholder badge for missing business data */

/* Breadcrumbs + interior page hero */
.page-hero{
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  padding: 56px 0 52px;
  position: relative;
}
.page-hero h1{
  color: var(--white);
  font-size: clamp(2rem, 4vw, 2.9rem);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}
.page-hero p{ color: #c3d2e6; font-size: 1rem; max-width: 640px; }

.breadcrumbs{ margin-bottom: 20px; }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.breadcrumbs li{ display:flex; align-items:center; gap:6px; font-size:0.78rem; color:#9fb2ca; }
.breadcrumbs a{ color:#9fb2ca; }
.breadcrumbs a:hover{ color: var(--yellow); }
.breadcrumbs li:not(:last-child)::after{ content:"/"; margin-left:6px; color:#5a6f8c; }
.breadcrumbs li[aria-current="page"]{ color: var(--white); }

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing{ background: var(--navy); padding: 80px 0; }
.section-title-light{
  color: var(--white); text-align: center; font-size: clamp(1.8rem, 3vw, 2.4rem);
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 44px; position: relative; padding-bottom: 16px;
}
.section-title-light::after{
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 64px; height: 3px; background: var(--yellow); border-radius: 2px;
}

.pricing-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.price-card{
  background: var(--white); border-radius: var(--radius-md);
  padding: 28px 22px 24px; text-align: center;
  box-shadow: var(--shadow-card);
  position: relative;
  display: flex; flex-direction: column;
  transition: transform .2s ease;
}
.price-card:hover{ transform: translateY(-6px); }
.price-card.popular{
  border: 2px solid var(--yellow);
  background: linear-gradient(165deg, rgba(255,196,0,0.14), var(--navy) 32%, var(--navy-deep) 100%);
  transform: translateY(-10px);
  box-shadow: 0 0 26px rgba(255,196,0,0.18), 0 20px 44px rgba(0,0,0,0.35);
}
.price-card.popular:hover{ transform: translateY(-14px); }
.popular-tag{
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--yellow); color: var(--navy);
  font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 5px 14px; border-radius: 20px; white-space: nowrap;
}
.plan-name{ font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.plan-price{ margin-bottom: 6px; color: var(--navy); }
.plan-price .amount{ font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; }
.plan-price .per{ font-size: 0.85rem; color: var(--muted); font-weight: 500; }
.plan-desc{ font-size: 0.78rem; color: var(--muted); line-height: 1.4; margin-bottom: 20px; min-height: 2.6em; }
.plan-feats{ display: flex; flex-direction: column; gap: 3px; text-align: left; margin-bottom: 22px; flex: 1; }
.plan-feats li{
  display: flex; align-items: center; gap: 10px;
  font-size: 0.83rem; color: var(--text); padding: 6px 0;
}
.plan-feats li::before{
  content: "\2713";
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--yellow); color: var(--navy);
  font-size: 0.62rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* Text-contrast overrides for the dark "popular" card only — the other three
   plan cards keep their white background and are untouched by these rules. */
.price-card.popular .plan-name{ color:#b9c8de; }
.price-card.popular .plan-price{ color: var(--white); }
.price-card.popular .plan-price .amount{ color: var(--yellow); }
.price-card.popular .plan-price .per{ color:#b9c8de; }
.price-card.popular .plan-desc{ color:#b9c8de; }
.price-card.popular .plan-feats li{ color: var(--white); }

.pricing-note{
  text-align: center; color: #b9c8de; font-size: 0.85rem; margin-top: 36px;
}
.pricing-note a{ color: var(--yellow); font-weight: 700; }
.pricing-note strong{ color: var(--white); }

/* Monthly-equivalent line under the billed total (the total stays dominant) */
.plan-equiv{ font-size: 0.8rem; font-weight: 700; color: var(--blue); margin-bottom: 10px; }
.price-card.popular .plan-equiv{ color: var(--white); }

/* Free-trial prompt under the pricing grid */
.pricing-trial{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px;
  max-width: 760px; margin: 24px auto 0; padding: 20px 24px;
  border: 1px solid rgba(255,196,0,0.45); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04);
}
.pricing-trial strong{ display: block; color: var(--white); font-size: 1rem; margin-bottom: 4px; }
.pricing-trial span{ color: #b9c8de; font-size: 0.88rem; }
.pricing-trial-actions{ display: flex; flex-wrap: wrap; gap: 10px; }

/* Compact fact chips in an interior page hero */
.value-chips{ display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 22px; }
.value-chips li{
  color: var(--white); font-size: 0.8rem; font-weight: 600;
  padding: 6px 12px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06);
}
.value-chips li::before{ content: "\2713  "; color: var(--yellow); font-weight: 800; }

/* ==========================================================================
   DEVICES
   ========================================================================== */
.devices{ padding: 80px 0; background: var(--white); }
.devices-inner{
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center;
}
.section-title-dark{
  color: var(--navy); font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 20px;
}
.device-list{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.device-item{ display: flex; flex-direction: column; gap: 3px; }
.dev-icon{ font-size: 1.6rem; margin-bottom: 4px; }
.device-item strong{ font-size: 0.9rem; color: var(--navy); }
.device-item small{ font-size: 0.76rem; color: var(--muted); }
/* Homepage device picker: each tile links to its device guide */
.device-pick-label{ font-weight: 700; color: var(--navy); font-size: 1rem; margin-bottom: 12px; }
a.device-item{
  padding: 12px 14px; min-width: 0;
  border: 1px solid #e3e9f2; border-radius: var(--radius-sm); background: var(--white);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .6s ease;
}
a.device-item:hover, a.device-item:focus-visible{ border-color: var(--blue); box-shadow: var(--shadow-card); transform: translateY(-2px); }

/* ==========================================================================
   SPORT
   ========================================================================== */
.sport{ background: linear-gradient(160deg, var(--navy), var(--navy-deep)); padding: 80px 0; }
.sport-inner{
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center;
}
.sport-title{
  font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--white);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 18px;
}
.sport-text p{ color: #b9c8de; font-size: 0.95rem; line-height: 1.65; margin-bottom: 26px; max-width: none; }

.sport-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.sport-card{
  aspect-ratio: 4/3; border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 14px;
  position: relative; overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}
.sport-card span{
  color: var(--white); font-weight: 700; font-size: 0.85rem;
  position: relative; z-index: 2;
}
.sport-card .sc-icon{
  font-size: 1.5rem; font-weight: 400; margin-bottom: 8px; opacity: 0.85;
}
.sport-card::before{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent 60%);
}
/* Real photo layer: sits behind the ::before dark overlay and above the
   sc-1..sc-4 gradient background, so a missing/slow-loading image never
   shows a broken-image icon - the gradient + icon is the permanent fallback. */
.sport-card-img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; display: block;
}
.sc-1{ background: linear-gradient(150deg, #1a3a8f, #0a1530); }
.sc-2{ background: linear-gradient(150deg, #2a7a3f, #0a2010); }
.sc-3{ background: linear-gradient(150deg, #1a5a8f, #0a1c30); }
.sc-4{ background: linear-gradient(150deg, #c0392b, #3a0f0a); }
.sc-5{ background: linear-gradient(150deg, #7a1a1a, #200505); }
.sc-6{ background: linear-gradient(150deg, #3a3a3a, #0a0a0a); }

/* ==========================================================================
   SOCIAL PROOF + CTA
   ========================================================================== */
.social-cta{ background: linear-gradient(160deg, var(--navy), var(--navy-deep)); padding: 80px 0; }
.social-cta-inner{
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; align-items: center;
}
.social-proof h3{ font-size: 1.4rem; color: var(--white); margin-bottom: 10px; text-transform: uppercase; }
.social-proof p{ color: #b9c8de; font-size: 0.88rem; margin-bottom: 12px; }

.cta-block{
  background: var(--white); border-radius: var(--radius-md);
  padding: 32px 36px; box-shadow: var(--shadow-lift);
}
.cta-block-top{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.cta-block h3{ font-size: 1.2rem; color: var(--navy); margin-bottom: 6px; text-transform: uppercase; }
.cta-block p{ color: var(--muted); font-size: 0.85rem; max-width: 360px; }
.cta-buttons{ display: flex; gap: 12px; flex-wrap: wrap; }
.cta-chip-row{ display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:22px; padding-top:22px; border-top:1px solid #eef1f6; }
.cta-chip{ display:flex; align-items:center; gap:8px; }
.cta-chip .chip-icon{
  width:26px; height:26px; border-radius:50%; background: rgba(6,91,199,0.08); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:0.8rem; flex-shrink:0;
}
.cta-chip span{ color:var(--navy); font-size:0.82rem; font-weight:700; }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq-list{ max-width: 820px; }
.faq-item{ border-bottom: 1px solid #e7ecf3; }
.faq-question{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 18px 4px; font-family: var(--font-body); font-weight:700; font-size:0.98rem; color:var(--navy);
}
.faq-question .icon{ font-size:1.1rem; color:var(--blue); transition: transform .2s ease; flex-shrink:0; }
.faq-item.open .faq-question .icon{ transform: rotate(45deg); }
.faq-answer{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.faq-answer p{ padding: 0 4px 18px; color: var(--muted); font-size:0.9rem; line-height:1.7; max-width:none; }
.faq-item.open .faq-answer{ max-height: 600px; }

/* ==========================================================================
   BLOG CARDS
   ========================================================================== */
.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.blog-card{
  background:var(--white); border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-card); display:flex; flex-direction:column;
}
.blog-card-img{
  aspect-ratio: 16/9; background: linear-gradient(150deg, #dbe6f5, #eef2f8);
  display:flex; align-items:center; justify-content:center; color:#9fb2ca; font-size:0.8rem; font-weight:600;
}
img.blog-card-img{
  width:100%; height:auto; object-fit:cover; display:block;
}
.blog-card-body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-card-tag{ color:var(--blue); font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; }
.blog-card h3{ color:var(--navy); font-size:1.05rem; }
.blog-card p{ color:var(--muted); font-size:0.85rem; flex:1; max-width:none; }
.blog-card .card-arrow{ color:var(--blue); font-weight:700; font-size:0.83rem; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.contact-card{
  background:var(--white); border-radius: var(--radius-md); padding:28px 24px;
  text-align:center; box-shadow: var(--shadow-card);
}
.contact-card .contact-icon{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin: 0 auto 16px; font-size:1.5rem;
}
.contact-card.whatsapp .contact-icon{ background: rgba(33,196,90,0.12); color:var(--green); }
.contact-card.telegram .contact-icon{ background: rgba(6,91,199,0.1); color:var(--blue); }
.contact-card.email .contact-icon{ background: rgba(255,196,0,0.15); color:#8a6d00; }
.contact-card h3{ color:var(--navy); font-size:1.05rem; margin-bottom:8px; }
.contact-card p{ color:var(--muted); font-size:0.85rem; margin-bottom:18px; max-width:none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--navy-deep); padding: 64px 0 0; }
.footer-top{
  display: grid; grid-template-columns: 1.3fr repeat(5, 1fr); gap: 28px;
  padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand p{ color: #93a3bb; font-size: 0.85rem; line-height: 1.6; margin: 16px 0 20px; max-width: 280px; }
.logo-footer .logo-text{ font-size: 1.3rem; }
.footer-col h4{
  color: var(--white); font-family: var(--font-body); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px;
}
.footer-col ul{ display: flex; flex-direction: column; gap: 11px; }
.footer-col a{ color: #93a3bb; font-size: 0.85rem; transition: color .15s ease; }
.footer-col a:hover{ color: var(--yellow); }

.footer-bottom{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 22px; padding-bottom: 22px; /* keep .container side padding */
}
.footer-legal{ display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-legal a{ color: #93a3bb; font-size: 0.8rem; display: inline-block; padding: 6px 0; }
.footer-legal a:hover{ color: var(--white); }
.copyright{ color: #6b7a93; font-size: 0.78rem; }

/* WhatsApp float */
.whatsapp-float{
  position: fixed; right: 24px; bottom: 24px; z-index: 400;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--green); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(33,196,90,0.4);
  transition: transform .2s ease, opacity .25s ease, visibility .25s;
}
.whatsapp-float:hover{ transform: scale(1.08); }
/* Set by main.js while the float would cover a hero CTA button (homepage or interior page hero) */
.whatsapp-float.is-deferred{ opacity: 0; visibility: hidden; pointer-events: none; }

/* Scroll reveal */
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity: 1; transform: translateY(0); }

/* ==========================================================================
   HUB PAGES (devices/, installation/, apps/, sports/, guides/, blog/ …)
   ========================================================================== */
.content-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:8px; }
.guide-card{
  display:flex; flex-direction:column; gap:10px;
  background:var(--white); border:1px solid #e7ecf3; border-radius: var(--radius-md);
  padding:24px 22px; box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .15s ease;
}
.guide-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.guide-card .guide-icon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background: rgba(6,91,199,0.08); color:var(--blue); font-size:1.35rem; margin-bottom:4px;
}
.guide-card h3{ color:var(--navy); font-size:1.02rem; }
.guide-card p{ color:var(--muted); font-size:0.87rem; margin-bottom:0; flex:1; max-width:none; }
.guide-card .card-arrow{ color:var(--blue); font-weight:700; font-size:0.83rem; margin-top:4px; }
.guide-card .guide-tag{ color:var(--blue); font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; }

/* Sport category thumbnail (used only on /sports/ cards). Reuses the sc-1..sc-4
   gradient classes as the fallback tint so it never shows a broken-image icon
   when the real photo isn't in place yet. */
.guide-card .sport-thumb{
  aspect-ratio: 16/9; border-radius: var(--radius-sm); overflow: hidden;
  position: relative; margin-bottom: 2px;
}
.guide-card .sport-thumb img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.w-full{ width:100%; }
.h-auto{ height:auto; }
.rounded-xl{ border-radius: var(--radius-lg); }
.content-section.article-featured{ padding: 32px 0 0; }

/* ==========================================================================
   ARTICLE / GUIDE LAYOUT (two-column: content + sidebar)
   ========================================================================== */
.article-layout{
  display:grid; grid-template-columns: 1fr 300px; gap:48px; align-items:start;
}
.article-main{ min-width:0; }
.article-main h2{ color:var(--navy); font-size:1.4rem; text-transform:uppercase; letter-spacing:0.3px; margin:36px 0 14px; }
.article-main h2:first-child{ margin-top:0; }
.article-main h3{ color:var(--navy); font-size:1.1rem; margin:24px 0 10px; }
.article-main p{ color:var(--muted); font-size:0.95rem; line-height:1.75; margin-bottom:16px; max-width:none; }
.article-main ul:not(.checklist):not(.steps):not(.plan-feats){ margin:0 0 18px; padding-left:0; }
.article-main ul:not(.checklist):not(.steps):not(.plan-feats) li{
  color:var(--text); font-size:0.92rem; padding:5px 0 5px 22px; position:relative; line-height:1.6;
}
.article-main ul:not(.checklist):not(.steps):not(.plan-feats) li::before{
  content:"—"; position:absolute; left:0; color:var(--blue); font-weight:700;
}

.article-sidebar{ position:sticky; top:96px; display:flex; flex-direction:column; gap:20px; }
.sidebar-box{
  background:var(--light); border:1px solid #e7ecf3; border-radius: var(--radius-md); padding:20px 22px;
}
.sidebar-box h4{ color:var(--navy); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:14px; }

/* Table of contents */
.toc ul{ display:flex; flex-direction:column; gap:8px; }
.toc a{ color:var(--muted); font-size:0.85rem; line-height:1.4; display:block; }
.toc a:hover{ color:var(--blue); }

/* Related content */
.related-content ul{ display:flex; flex-direction:column; gap:10px; }
.related-content a{ color:var(--blue); font-weight:600; font-size:0.85rem; line-height:1.4; display:block; }
.related-content a:hover{ text-decoration: underline; }

/* CTA box (sidebar or inline) */
.cta-box{
  background: linear-gradient(160deg, var(--navy), var(--navy-deep));
  border-radius: var(--radius-md); padding:24px 22px; text-align:center;
}
.cta-box h4{ color:var(--white); font-size:1.05rem; text-transform:uppercase; letter-spacing:0.3px; margin-bottom:8px; }
.cta-box p{ color:#b9c8de; font-size:0.82rem; margin-bottom:16px; max-width:none; }
.cta-box .btn{ width:100%; }

/* Info / warning callout boxes */
.info-box, .warning-box{
  border-radius: var(--radius-sm); padding:16px 20px; margin:0 0 20px; font-size:0.88rem; line-height:1.6;
  max-width:none;
}
.info-box{ background:#eaf2fe; border:1px solid #c6ddfa; color:#0a3a7a; }
.info-box strong, .warning-box strong{ display:block; margin-bottom:4px; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.04em; }
.warning-box{ background:#fff4e5; border:1px solid #f3d9a8; color:#7a4d00; }

/* Numbered step list (HowTo-style guides) */
.steps{ counter-reset: step; display:flex; flex-direction:column; gap:18px; margin-bottom:20px; }
.steps li{
  counter-increment: step; position:relative; padding-left:44px; min-height:32px;
  color:var(--text); font-size:0.92rem; line-height:1.7;
}
.steps li::before{
  content: counter(step); position:absolute; left:0; top:0;
  width:30px; height:30px; border-radius:50%; background:var(--yellow); color:var(--navy);
  font-weight:800; font-size:0.85rem; display:flex; align-items:center; justify-content:center; font-family:var(--font-head);
}
.steps li strong{ display:block; color:var(--navy); font-size:0.95rem; margin-bottom:2px; }

/* Comparison table */
.table-scroll{ overflow-x:auto; margin-bottom:20px; }
.comparison-table{ width:100%; border-collapse:collapse; font-size:0.88rem; min-width:520px; }
.comparison-table th, .comparison-table td{ padding:12px 16px; text-align:left; border-bottom:1px solid #e7ecf3; }
.comparison-table thead th{ background:var(--navy); color:var(--white); font-family:var(--font-body); font-weight:700; text-transform:uppercase; font-size:0.72rem; letter-spacing:0.05em; }
.comparison-table tbody tr:nth-child(even){ background:var(--light); }
.comparison-table td{ color:var(--muted); }
.comparison-table td:first-child{ color:var(--navy); font-weight:700; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px){
  .hero{ min-height: 600px; }
  .hero-inner{ padding: 32px 24px; }
  .hero-overlay{
    background: linear-gradient(
      90deg,
      rgba(2, 15, 32, 0.95) 0%,
      rgba(2, 15, 32, 0.9) 30%,
      rgba(2, 15, 32, 0.6) 48%,
      rgba(2, 15, 32, 0.15) 62%,
      rgba(2, 15, 32, 0) 74%
    );
  }
  .trust-row{ grid-template-columns: repeat(2, 1fr); }
  .feature-grid{ grid-template-columns: repeat(3, 1fr); }
  .devices-inner{ grid-template-columns: 1fr; }
  .sport-inner{ grid-template-columns: 1fr; }
  .social-cta-inner{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
  .two-col, .three-col, .content-grid{ grid-template-columns: 1fr; }
  .blog-grid, .contact-grid{ grid-template-columns: 1fr 1fr; }
  .article-layout{ grid-template-columns: 1fr; }
  .article-sidebar{ position:static; flex-direction:row; flex-wrap:wrap; }
  .article-sidebar .sidebar-box{ flex:1; min-width:240px; }
  .icon-feature-grid{ grid-template-columns: repeat(2,1fr); }
  .country-grid{ grid-template-columns: repeat(2,1fr); }
  .process-steps{ grid-template-columns: 1fr; gap:32px; }
  .process-step{ padding:0; }
  .process-step::after{ display:none; }
}

/* Header nav has its own breakpoint (wider than the 860px content breakpoint
   below): the full desktop nav — logo + 9 menu items + Gratis Test button —
   needs ~940px minimum to lay out on one line without overflowing. Switching
   to the mobile hamburger menu at 860px left a gap (roughly 861–920px) where
   the desktop nav was forced to stay but no longer fit, pushing the header
   past the viewport edge and causing horizontal scroll on the whole page.
   1000px gives a safe margin above that measured minimum. */
@media (max-width: 1000px){
  .main-nav{
    position: fixed; top: 76px; left: 0; right: 0; bottom: 0;
    background: var(--white);
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y: auto;
    z-index: 400;
  }
  .main-nav.open{ transform: translateX(0); }
  .main-nav ul{ flex-direction: column; align-items: flex-start; gap: 0; padding: 20px 24px; }
  .main-nav li{ width: 100%; border-bottom: 1px solid #eef1f6; }
  .main-nav .nav-link{ display: block; padding: 16px 0; font-size: 0.95rem; }
  .hamburger{ display: flex; }
}

/* At very narrow phone widths, logo + visible Gratis Test button + hamburger
   need a few px of trimmed spacing (not smaller text) to avoid overflow. */
@media (max-width: 400px){
  .header-inner{ gap: 12px; }
  .header-actions{ gap: 8px; }
  .header-actions .btn-sm{ padding: 9px 14px; }
}
/* Very small phones (≤360px): keep logo, CTA and menu button inside the viewport */
@media (max-width: 360px){
  .container{ padding: 0 16px; }
  .header-inner{ gap: 8px; }
  .logo{ gap: 6px; }
  .logo-icon svg{ width: 28px; height: 28px; }
  .logo-text{ font-size: 1.25rem; }
  .header-actions{ gap: 6px; }
  .header-actions .btn-sm{ padding: 8px 10px; font-size: 0.8rem; }
  .hamburger{ width: 36px; }
}

@media (max-width: 860px){
  .pricing-grid{ grid-template-columns: 1fr 1fr; }
  .price-card.popular{ order: -1; grid-column: 1 / -1; transform: translateY(0); }
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .device-list{ grid-template-columns: repeat(2, 1fr); }
  .sport-grid{ grid-template-columns: repeat(2, 1fr); }
  .cta-block-top{ flex-direction: column; align-items: flex-start; }
  .icon-feature-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px){
  .hero{ padding: 48px 0; min-height: 560px; background-position: 30% center; }
  .hero-inner{ display: block; padding: 0 24px; min-height: 0; }
  .hero-content{ width: 100%; max-width: 100%; margin: 0; }
  .hero-overlay{
    background: linear-gradient(
      180deg,
      rgba(2, 18, 38, 0.9) 0%,
      rgba(2, 18, 38, 0.88) 60%,
      rgba(2, 18, 38, 0.75) 100%
    );
  }
  .hero-cta{ flex-direction: column; }
  .hero-cta .btn{ width: 100%; }
  .trust-row{ grid-template-columns: 1fr 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .price-card.popular{ grid-column: auto; }
  .feature-grid{ grid-template-columns: 1fr 1fr; }
  .device-list{ grid-template-columns: 1fr 1fr; }
  .sport-grid{ grid-template-columns: 1fr 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; }
  .blog-grid, .contact-grid{ grid-template-columns: 1fr; }
  .article-sidebar{ flex-direction:column; }
  .comparison-table{ min-width:460px; }
  .pricing-trial{ padding: 18px; }
  .pricing-trial-actions, .pricing-trial-actions .btn{ width: 100%; }
  .icon-feature-grid, .country-grid{ grid-template-columns: 1fr; }
  .cta-chip-row{ flex-direction: column; gap:12px; }
}

/* Homepage hero on small phones: tighten spacing (not the H1) so the primary
   CTA stays above the fold at 320x800. Scoped to .hero, which only index.html uses. */
@media (max-width: 400px){
  .hero{ padding-top: 28px; }
  .hero .badge-yellow{ margin-bottom: 12px; }
  .hero .hero-sub{ font-size: 1rem; line-height: 1.55; margin-bottom: 14px; }
  .hero .hero-features{ gap: 8px 18px; margin-bottom: 12px; }
  .hero .hero-tagline{ font-size: 0.9rem; margin-bottom: 18px; }
  .hero .hero-cta{ gap: 12px; }
}

/* ===== SEO final touches (2026-11-03) ===== */
/* Snabbsvar: dark navy short-answer card directly under the homepage hero */
.quick-answer-section{ padding: 48px 0 8px; }
.quick-answer{
  background: linear-gradient(160deg, var(--navy), var(--navy-deep));
  border-left: 5px solid var(--yellow); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift); padding: 28px 32px; max-width: 900px; margin: 0 auto;
}
.quick-answer h2{ color: var(--white); font-size: clamp(1.35rem,2.4vw,1.75rem); margin-bottom: 12px; }
.quick-answer p{ color: #dbe6f5; font-size: 1rem; line-height: 1.75; margin: 0; }
@media (max-width: 600px){
  .quick-answer-section{ padding: 32px 0 0; }
  .quick-answer{ padding: 22px 20px; }
}

/* Approximate SEK amount on the pricing cards (written by seo/tools/sek-prices.py) */
.plan-sek{ font-size: 0.85rem; font-weight: 600; color: var(--muted); margin: -2px 0 6px; }
.price-card.popular .plan-sek{ color: #b9c8de; }

/* "Vad behöver du för att titta?" - navy section, same look as "Så Fungerar" */
.content-section.navy.watch-section p.lead{ color: #dbe6f5; }
.watch-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; }
.watch-card{
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md); padding: 28px;
}
.watch-card h3{ margin-bottom: 14px; }
.speed-list, .app-list{ list-style: none; margin: 0 0 16px; padding: 0; }
.speed-list li, .app-list li{
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 0.95rem; color: var(--white);
}
.speed-list li:last-child, .app-list li:last-child{ border-bottom: 0; }
.speed-list strong{ color: var(--white); }
.speed-list span{ font-weight: 700; color: var(--yellow); white-space: nowrap; }
.app-list a{ font-weight: 700; color: var(--yellow); }
.app-list small{ color: #b9c8de; font-size: 0.82rem; text-align: right; }
.watch-card p a{ color: var(--yellow); }
@media (max-width: 768px){
  .watch-grid{ grid-template-columns: 1fr; }
  .watch-card{ padding: 22px 20px; }
}