/* ============================================================
   Mobilabonnemang1.se — "Bytarspåret" (The Switch Track)
   Distinct design language. Bootstrap 5.3.8 base.
   Brand: indigo-navy masthead + cyan→lime signal gradient,
   white canvas, warm grey-cream cards. Funnel Display / Funnel Sans.
   ============================================================ */

/* ---------- Fonts (local woff2) ---------- */
@font-face{font-family:'Funnel Display';src:url('/fonts/mobilabonnemang1-se/funneldisplay-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Funnel Display';src:url('/fonts/mobilabonnemang1-se/funneldisplay-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Funnel Sans';src:url('/fonts/mobilabonnemang1-se/funnelsans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Funnel Sans';src:url('/fonts/mobilabonnemang1-se/funnelsans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Funnel Sans';src:url('/fonts/mobilabonnemang1-se/funnelsans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ---------- Tokens ---------- */
:root{
  --navy:#29296B;
  --navy-deep:#1E1E51;
  --navy-soft:#3A3A85;
  --cyan:#10C0BC;
  --cyan-deep:#0BA39F;
  --lime:#A6E657;
  --lime-deep:#7CC233;
  --ink:#1A1A2A;
  --muted:#65657A;
  --bg:#FFFFFF;
  --card:#F4F3EE;
  --cream:#FAF9F4;
  --line:#E7E6DD;
  --line-strong:#D9D8CE;
  --signal:linear-gradient(90deg,var(--lime),var(--cyan));
  --signal-rev:linear-gradient(90deg,var(--cyan),var(--lime));
  --radius:18px;
  --radius-lg:26px;
  --shadow:0 1px 2px rgba(26,26,42,.04),0 14px 38px -22px rgba(26,26,42,.28);
  --shadow-soft:0 1px 2px rgba(26,26,42,.04),0 8px 24px -18px rgba(26,26,42,.22);
}

/* ---------- Base ---------- */
*{-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  font-family:'Funnel Sans',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:1.04rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{
  font-family:'Funnel Display','Funnel Sans',sans-serif;
  font-weight:700;
  letter-spacing:-.018em;
  color:var(--ink);
  line-height:1.12;
}
h1{font-size:clamp(2.1rem,5vw,3.5rem);font-weight:800;letter-spacing:-.03em;}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);}
h3{font-size:clamp(1.22rem,2.2vw,1.55rem);}
a{color:var(--cyan-deep);text-decoration:none;transition:color .15s ease;}
a:hover{color:var(--navy);}
.container{max-width:1140px;}
.text-muted-warm{color:var(--muted)!important;}
.text-cyan{color:var(--cyan-deep)!important;}
.text-lime{color:var(--lime-deep)!important;}
.text-orange{color:var(--cyan-deep)!important;} /* alias used by reused partials */
.text-navy{color:var(--navy)!important;}
strong{font-weight:700;}
::selection{background:var(--lime);color:var(--navy-deep);}

/* ---------- Masthead (navy logo band) ---------- */
.masthead{
  background:
    radial-gradient(120% 140% at 50% -40%, rgba(166,230,87,.16), transparent 55%),
    radial-gradient(120% 140% at 85% 0%, rgba(16,192,188,.18), transparent 50%),
    var(--navy);
  text-align:center;
  padding:26px 16px 22px;
  position:relative;
  overflow:hidden;
}
.masthead::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--signal);
}
.masthead .brand-logo{height:74px;width:auto;max-width:90%;}
@media(max-width:575.98px){.masthead{padding:18px 14px 16px;}.masthead .brand-logo{height:52px;}}

/* ---------- Sticky nav ---------- */
.navbar.bytanav{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  padding:.5rem 0;
}
.navbar.bytanav .navbar-brand{font-family:'Funnel Display';font-weight:800;color:var(--navy);font-size:1.06rem;letter-spacing:-.02em;}
.navbar.bytanav .navbar-brand b{color:var(--lime-deep);}
.navbar.bytanav .nav-link{color:var(--ink);font-weight:500;padding:.35rem .8rem;border-radius:9px;}
.navbar.bytanav .nav-link:hover,.navbar.bytanav .nav-link:focus{color:var(--navy);background:var(--card);}
.navbar.bytanav .dropdown-menu{border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:.4rem;}
.navbar.bytanav .dropdown-item{border-radius:9px;font-weight:500;padding:.45rem .7rem;}
.navbar.bytanav .dropdown-item:hover{background:var(--card);color:var(--navy);}
.navbar.bytanav .dropdown-item.fw-semibold{color:var(--navy);}
.nav-cta{background:var(--navy);color:#fff!important;border-radius:10px;padding:.45rem 1rem!important;font-weight:700;}
.nav-cta:hover{background:var(--signal)!important;color:var(--navy-deep)!important;}
.navbar-toggler{border:1px solid var(--line);padding:.3rem .55rem;border-radius:10px;}
.navbar-toggler:focus{box-shadow:none;}

/* ---------- Track rule (signature motif) ---------- */
.track-rule,.eyebrowless-rule{
  position:relative;height:14px;width:160px;margin:0 auto 1.1rem;
}
.track-rule::before,.eyebrowless-rule::before{
  content:"";position:absolute;top:50%;left:0;right:0;height:2px;transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,var(--line-strong) 18%,var(--line-strong) 82%,transparent);
}
.track-rule::after,.eyebrowless-rule::after{
  content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px #fff,0 0 14px rgba(16,192,188,.55);
}

/* ---------- Kicker ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Funnel Sans';font-weight:700;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan-deep);margin-bottom:.7rem;
}
.kicker::before{content:"";width:22px;height:2px;background:var(--signal);border-radius:2px;}

/* ---------- Hero ---------- */
.hero{padding:54px 0 30px;position:relative;}
.hero h1{margin-bottom:.6rem;}
.hero .lead{font-size:1.18rem;color:#3a3a4d;max-width:60ch;}
.hero-trust{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.2rem;}
.pill{
  display:inline-flex;align-items:center;gap:.45rem;background:var(--card);border:1px solid var(--line);
  color:var(--ink);font-weight:500;font-size:.9rem;padding:.4rem .85rem;border-radius:999px;
}
.pill i{color:var(--cyan-deep);}

/* ---------- Sections ---------- */
.section{padding:56px 0;}
.section.bg-cream{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-head{margin-bottom:2rem;}
.section-head h2{margin-bottom:.4rem;}

/* ---------- Panels ---------- */
.panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-soft);
}
.panel-cream{background:var(--card);border-color:var(--line-strong);box-shadow:none;}
.lift{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.lift:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--cyan);}
.footer-head{font-family:'Funnel Display';font-weight:700;font-size:.98rem;color:var(--navy);margin-bottom:.6rem;}

/* ---------- Fact lists ---------- */
.fact-list{list-style:none;padding:0;margin:0;}
.fact-list li{display:flex;gap:.6rem;align-items:flex-start;padding:.32rem 0;}
.fact-list li i{color:var(--cyan-deep);flex:0 0 auto;margin-top:.18rem;}
.fact-list li .bi-check-circle-fill{color:var(--lime-deep);}
.fact-list a{color:var(--ink);font-weight:500;}
.fact-list a:hover{color:var(--navy);}

/* ---------- Buttons ---------- */
.btn{font-family:'Funnel Sans';font-weight:700;border-radius:11px;padding:.62rem 1.15rem;letter-spacing:-.01em;transition:all .16s ease;}
.btn-lg{padding:.8rem 1.3rem;font-size:1.02rem;}
.btn-primary{background:var(--navy);border:none;color:#fff;position:relative;overflow:hidden;}
.btn-primary:hover,.btn-primary:focus{background:var(--navy-deep);color:#fff;transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(41,41,107,.7);}
.btn-primary i{transition:transform .18s ease;}
.btn-primary:hover i{transform:translateX(3px);}
.btn-cta{background:var(--signal);border:none;color:var(--navy-deep)!important;font-weight:800;}
.btn-cta:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(16,192,188,.6);color:var(--navy-deep);}
.btn-outline-plum{background:#fff;border:1.5px solid var(--navy);color:var(--navy);}
.btn-outline-plum:hover{background:var(--navy);color:#fff;}
.btn-soft{background:var(--card);border:1px solid var(--line-strong);color:var(--ink);}
.btn-soft:hover{background:#fff;border-color:var(--cyan);color:var(--navy);}

/* ---------- Deal cards ---------- */
.bd-deal{position:relative;height:100%;padding-top:14px;}
.bd-rank{
  position:absolute;top:0;left:14px;z-index:3;
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-family:'Funnel Display';font-weight:800;font-size:.95rem;
  box-shadow:0 6px 14px -8px rgba(41,41,107,.8);
}
.bd-compare{
  position:absolute;top:2px;left:50%;transform:translateX(-50%);z-index:3;white-space:nowrap;
  background:var(--navy-deep);color:#fff;font-weight:700;font-size:.76rem;letter-spacing:.01em;
  padding:.28rem .7rem;border-radius:999px;border:2px solid #fff;box-shadow:var(--shadow-soft);cursor:help;
}
.bd-compare i{color:var(--lime);}
.bd-deal .card{
  height:100%;border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  box-shadow:var(--shadow-soft);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:hidden;
}
.bd-deal .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--cyan);}
.bd-deal .card-header{background:var(--card);border-bottom:1px solid var(--line);padding:1.5rem 1rem .9rem;}
.bd-company-logo{max-height:42px;max-width:62%;width:auto;object-fit:contain;}
.op-name{font-family:'Funnel Display';font-weight:700;margin-top:.5rem;color:var(--ink);}
.stars{margin-top:.45rem;line-height:1;}
.bd-deal .card-body{padding:1.15rem 1.15rem 1.3rem;}
.bd-price{font-family:'Funnel Display';font-weight:800;font-size:2.05rem;color:var(--navy);line-height:1;}
.bd-price small{font-size:.95rem;font-weight:500;color:var(--muted);}
.bd-specs{list-style:none;padding:0;margin:1rem 0 1.1rem;text-align:left;}
.bd-specs li{display:flex;align-items:center;gap:.55rem;padding:.28rem 0;font-size:.94rem;border-bottom:1px dashed var(--line);}
.bd-specs li:last-child{border-bottom:none;}
.bd-specs li i{color:var(--cyan-deep);width:1.1rem;text-align:center;}
.bd-specs .lead-spec{font-weight:700;color:var(--ink);}
.bd-specs .lead-spec i{color:var(--lime-deep);}
.bd-toggle{background:none;border:none;color:var(--muted);font-size:.85rem;font-weight:600;padding:.2rem;}
.bd-toggle:hover{color:var(--navy);}
.bd-detail-table{font-size:.9rem;margin-top:.6rem;}
.bd-detail-table td{padding:.32rem .2rem;border-bottom:1px solid var(--line);}

/* badge: right-aligned on mobile */
@media(max-width:575.98px){
  .bd-compare{left:auto;right:10px;transform:none;}
  .bd-rank{left:10px;}
}

/* ---------- Prose ---------- */
.prose{font-size:1.06rem;color:#2c2c3c;}
.prose h2{margin:1.8rem 0 .8rem;}
.prose h3{margin:1.5rem 0 .6rem;color:var(--navy);}
.prose p{margin-bottom:1.05rem;}
.prose ul,.prose ol{margin:0 0 1.1rem;padding-left:1.2rem;}
.prose li{margin-bottom:.4rem;}
.prose a:not(.btn){color:var(--cyan-deep);font-weight:600;border-bottom:1.5px solid rgba(16,192,188,.3);}
.prose a:not(.btn):hover{color:var(--navy);border-color:var(--navy);}
.prose strong{color:var(--ink);}
.prose blockquote{border-left:3px solid;border-image:var(--signal) 1;padding:.4rem 0 .4rem 1.1rem;margin:1.3rem 0;color:#2c2c3c;font-size:1.1rem;}

/* ---------- Stepper (byta-process) ---------- */
.switch-track{position:relative;margin:1.5rem 0;}
.switch-step{position:relative;padding-left:3.4rem;padding-bottom:1.6rem;}
.switch-step:last-child{padding-bottom:0;}
.switch-step::before{
  content:"";position:absolute;left:15px;top:6px;bottom:-6px;width:2px;background:var(--line-strong);
}
.switch-step:last-child::before{display:none;}
.switch-step .dot{
  position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:2px solid var(--cyan);color:var(--navy);font-family:'Funnel Display';font-weight:800;font-size:.95rem;z-index:2;
  box-shadow:0 0 0 4px #fff;
}
.switch-step h3{font-size:1.15rem;margin-bottom:.3rem;}

/* ---------- Hero/guide image ---------- */
.guide-hero-img{margin:1.6rem 0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);}
.guide-hero-img img{width:100%;height:auto;max-height:400px;object-fit:cover;display:block;}
@media(max-width:575.98px){.guide-hero-img img{max-height:240px;}}

/* ---------- Accordion ---------- */
.accordion{--bs-accordion-border-color:var(--line);--bs-accordion-border-radius:14px;--bs-accordion-btn-focus-box-shadow:none;}
.accordion-item{border:1px solid var(--line);border-radius:14px!important;margin-bottom:.7rem;overflow:hidden;background:#fff;}
.accordion-button{font-family:'Funnel Display';font-weight:700;font-size:1.05rem;color:var(--ink);background:#fff;padding:1.05rem 1.15rem;}
.accordion-button:not(.collapsed){color:var(--navy);background:var(--card);box-shadow:none;}
.accordion-button::after{background-size:1.1rem;}
.accordion-button:not(.collapsed)::after{filter:hue-rotate(120deg);}
.accordion-body{color:#2c2c3c;padding:0 1.15rem 1.15rem;}

/* ---------- Tables ---------- */
.table-clean{width:100%;border-collapse:separate;border-spacing:0;font-size:.97rem;}
.table-clean th{background:var(--navy);color:#fff;font-family:'Funnel Display';font-weight:700;padding:.7rem .85rem;text-align:left;}
.table-clean th:first-child{border-top-left-radius:12px;}
.table-clean th:last-child{border-top-right-radius:12px;}
.table-clean td{padding:.65rem .85rem;border-bottom:1px solid var(--line);}
.table-clean tr:last-child td{border-bottom:none;}
.table-clean tbody tr:nth-child(even){background:var(--cream);}
.table-responsive{border-radius:12px;}

/* ---------- Operator logo grid ---------- */
.op-logo-grid .op-logo-tile{
  display:grid;place-items:center;height:62px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.6rem;transition:all .16s ease;
}
.op-logo-tile:hover{background:#fff;border-color:var(--cyan);transform:translateY(-2px);}
.op-logo-tile img{max-height:30px;max-width:84%;object-fit:contain;}

/* operator chooser grid (homepage byta-cards) */
.op-pick-grid .op-pick{
  display:flex;align-items:center;justify-content:center;height:96px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:1rem;transition:all .18s ease;
}
.op-pick:hover{background:#fff;border-color:var(--cyan);transform:translateY(-4px);box-shadow:var(--shadow);}
.op-pick img{max-height:46px;max-width:74%;object-fit:contain;}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:.85rem;padding-top:1rem;margin-bottom:0;}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--navy);}
.breadcrumb-item.active a{color:var(--navy);font-weight:600;}
.breadcrumb-chevron .breadcrumb-item+.breadcrumb-item::before{content:"›";color:var(--line-strong);}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:rgba(255,255,255,.82);margin-top:0;}
.site-footer .footer-head{color:#fff;}
.site-footer a{color:rgba(255,255,255,.82);}
.site-footer a:hover{color:var(--lime);}
.site-footer .op-logo-tile{background:rgba(255,255,255,.95);border-color:transparent;}
.footer-disclaimer{border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.6);font-size:.85rem;}

/* ---------- Tooltip ---------- */
.tooltip{font-family:'Funnel Sans';}
.tooltip-inner{max-width:300px;background:var(--navy-deep);color:#fff;font-size:.85rem;padding:.6rem .8rem;border-radius:10px;text-align:left;line-height:1.5;}
.tooltip.bs-tooltip-top .tooltip-arrow::before{border-top-color:var(--navy-deep);}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before{border-bottom-color:var(--navy-deep);}

/* ---------- CTA strip ---------- */
.cta-strip{background:var(--navy);border-radius:var(--radius-lg);padding:2.2rem;color:#fff;position:relative;overflow:hidden;}
.cta-strip::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 140% at 90% -20%,rgba(166,230,87,.2),transparent 55%);}
.cta-strip h2,.cta-strip .h2{color:#fff;position:relative;}
.cta-strip p{color:rgba(255,255,255,.85);position:relative;}

/* ---------- Misc ---------- */
.rounded-xl{border-radius:var(--radius)!important;}
.lead{font-weight:500;}
.badge-soft{background:var(--card);color:var(--navy);border:1px solid var(--line-strong);font-weight:600;padding:.3rem .6rem;border-radius:8px;font-size:.8rem;}
hr{border-color:var(--line);opacity:1;}
.text-gradient{background:var(--signal);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* anchor offset for sticky nav */
:target{scroll-margin-top:90px;}

/* ---------- Rensning (önskemål): ta bort eyebrows, dekorlinjer, trust-pills, trasig speedometer-ikon ---------- */
.kicker{display:none!important;}
.track-rule,.eyebrowless-rule{display:none!important;}
.hero-trust{display:none!important;}
.bd-deal .bi-speedometer,.bd-specs .bi-speedometer{display:none!important;}
/* hero får lite extra luft under leadtexten när trust-pills och kicker är borta */
.hero .lead{margin-bottom:.5rem;}