/* Boio Bredband + Mobil: undersidor (laddas efter bredband.css, som har tokens, typsnitt, knappar,
   kort och Prisbandet). Här: växlaren Bredband | Mobil, brödsmulor, sidrubrik, sektioner, FAQ, CTA,
   ordmärke, foto, annonsetikett och 404. Mobil först (375), dator från 1100 px. Rosa bara på
   huvudknappen och nyckeltal; allt annat bläck, kräm och varmgrått. */

/* växlaren */
.vx{display:inline-flex;background:var(--tint);border-radius:var(--r-f);padding:4px}
.vx a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-f);font-weight:600;font-size:15px;text-decoration:none;color:var(--ink-2)}
.vx a:hover{color:var(--ink)}
.vx a.on{background:var(--ink);color:#fff}
.vx a:focus-visible,.crumbs a:focus-visible,.faq summary:focus-visible{outline:3px solid var(--rosa-mork);outline-offset:2px}

/* brödsmulor */
.crumbs{padding:4px 16px 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--ink-2)}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"/";margin:0 8px;color:var(--line)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none;font-weight:600}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* sidrubrik */
.sidrubrik{padding:16px 16px 0}
.sidrubrik h1{font-size:min(44px,10vw);line-height:.98;overflow-wrap:break-word}
.sidrubrik .lead{margin-top:16px}
.sidrubrik .foto{margin-top:28px}
.foto{width:100%;height:280px;object-fit:cover;border-radius:var(--r-l);background:#c9c2bd}

/* sektioner och löptext */
.sida section{padding-top:64px}
.sek h2{font-size:32px;text-wrap:balance}
.sek-body{margin-top:16px}
.prosa p{color:var(--ink-2)}
.prosa p+p,.prosa ul,.prosa ol{margin-top:12px}
.prosa ul{padding-left:20px}
.prosa li{font-size:17px;line-height:1.55;color:var(--ink-2)}
.prosa strong{color:var(--ink)}
.prosa a,.faq .svar a{color:var(--ink);font-weight:600;text-decoration-thickness:1px;text-underline-offset:3px}
.sek .seg4{margin-top:12px}
.ordmarke{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.annons{display:block;margin-top:16px;font-size:13px;font-weight:600;color:var(--ink-2)}
.annons+.btn,.annons+.btn-line{margin-top:6px}

/* FAQ */
.faq h2{font-size:32px;text-wrap:balance}
.faq-list{margin-top:20px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:14px 0;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-family:var(--disp);font-weight:700;font-size:20px;line-height:1.2;letter-spacing:-.01em}
.faq summary::after{content:"";flex:none;width:14px;height:14px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.faq .svar{padding:0 0 20px}
.faq .svar p{color:var(--ink-2)}
.faq .svar p+p{margin-top:10px}

/* CTA */
.cta-in{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:28px 20px}
.cta-h{font-family:var(--disp);font-weight:800;font-size:28px;line-height:1.05;letter-spacing:-.025em}
.cta-in p:not(.cta-h){margin-top:10px;color:var(--ink-2)}
.cta-in .btn{width:100%;margin-top:20px}

/* 404 */
.fel{padding-top:40px}
.fel-act{display:grid;gap:10px;margin-top:28px}
.fel-act .btn,.fel-act .btn-line{width:100%;margin:0}

@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ================= DATOR ================= */
@media (min-width:1100px){
  .sida .top{padding:24px 80px}
  .vx a{padding:0 22px;font-size:16px}
  .crumbs{padding:0 80px}
  .sidrubrik{padding:24px 80px 0;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end}
  .sidrubrik .sr-text{grid-column:1/10}
  .sidrubrik h1{font-size:clamp(64px,6.4vw,96px);line-height:.92;letter-spacing:-.045em}
  .sidrubrik .lead{font-size:21px;margin-top:24px}
  .sidrubrik.med-foto .sr-text{grid-column:1/7;padding-bottom:16px;min-width:0}
  .sidrubrik.med-foto h1{font-size:clamp(52px,5vw,76px)}
  .sidrubrik.med-foto .foto{grid-column:7/13;margin:0;height:560px}
  .foto{height:520px}
  .sida section{padding:120px 80px 0}
  .sek h2,.faq h2{font-size:56px}
  .sek.delad,.faq{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
  .sek.delad h2,.faq h2{grid-column:1/6}
  .sek.delad .sek-body{grid-column:7/12;margin-top:0}
  .faq-list{grid-column:7/13;margin-top:0}
  .faq summary h3{font-size:24px}
  .faq summary{min-height:80px}
  .sek .mlist{margin-top:32px}
  .sek .mcards{grid-template-columns:repeat(3,1fr)}
  .sek .mcard.first{grid-column:auto;display:block}
  .sek .mcard.first .y1 strong{font-size:44px}
  .sek .mcard.first .mini i{height:8px}
  .sek .mcard.first .btn{margin-top:20px}
  .cta-in{padding:56px 64px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center}
  .cta-h{grid-column:1/7;font-size:48px}
  .cta-in p:not(.cta-h){grid-column:1/7;grid-row:2;font-size:19px}
  .cta-in .btn{grid-column:9/13;grid-row:1/3;margin:0;width:auto}
  .fel{padding-top:80px;padding-bottom:40px}
  .fel-act{display:flex;gap:16px}
  .fel-act .btn,.fel-act .btn-line{width:auto;padding:0 32px}
}

/* ================= OPERATÖR, GUIDE, INFO (pages/operator.ts, guide.ts, info.ts) =================
   Tabell "jämfört med andra", nyckeltal, två-kolumnsruta, steglista och länkkort "Läs mer". */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.op-lead{font-size:17px;line-height:1.5;color:var(--ink-2);max-width:40em}
.op-pris{display:grid;gap:12px;margin-top:24px}
.op-sido{display:grid;gap:12px;align-content:start}
.op-etikett{font-size:14px;font-weight:600;color:var(--ink-2);margin:12px 0 -4px 4px}
.op-sido .op-etikett:first-child{margin-top:12px}
.sek-body>.listnote{margin-top:16px}
.prosa h3{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.prosa ol.steg{list-style:none;padding:0;counter-reset:steg;display:grid;gap:12px}
.steg li{counter-increment:steg;position:relative;padding:18px 20px 18px 64px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m)}
.steg li::before{content:counter(steg);position:absolute;left:18px;top:16px;width:32px;height:32px;border-radius:var(--r-f);background:var(--ink);color:#fff;font-family:var(--disp);font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center}
.steg b{color:var(--ink)}
.prosa ul+p,.prosa ol+p{margin-top:16px}
.nyckel div:nth-child(3):last-child{grid-column:1/-1}

/* jämförelsetabell */
.jtab-wrap{margin-top:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:4px 16px}
.jtab{width:100%;border-collapse:collapse;font-size:16px}
.jtab thead th{font-size:14px;font-weight:600;color:var(--ink-2);text-align:right;padding:14px 0 10px;border-bottom:2px solid var(--ink)}
.jtab thead th:first-child{text-align:left}
.jtab tbody th{text-align:left;font-weight:400;padding:14px 8px 14px 0;vertical-align:top}
.jtab tbody th a,.jtab tbody th b{font-family:var(--disp);font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.jtab tbody th a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;display:inline-flex;min-height:28px;align-items:center}
.jtab tbody th span{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.jtab td{text-align:right;padding:14px 0 14px 10px;font-weight:600;white-space:nowrap;vertical-align:top}
.jtab tbody tr+tr th,.jtab tbody tr+tr td{border-top:1px solid var(--line)}
.jtab tr.on th b,.jtab tr.on td:nth-child(2){color:var(--rosa-mork)}
.jtab tr.on th::before{content:"Den här sidan";display:block;font-size:14px;font-weight:600;color:var(--rosa-mork);margin-bottom:2px}
.jtab.hast td{font-family:var(--disp);font-weight:800;font-size:24px}

/* nyckeltal */
.nyckel{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.nyckel div{background:var(--tint);border-radius:var(--r-m);padding:18px 18px 16px;min-width:0}
.nyckel dd{font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:-.03em;line-height:1.05;color:var(--ink);order:-1;overflow-wrap:anywhere}
.nyckel div{display:flex;flex-direction:column;gap:6px}
.nyckel dt{font-size:14px;font-weight:600;color:var(--ink-2)}

/* två rutor */
.tva{display:grid;gap:12px}
.tva>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:24px 20px}
.tva>div:first-child{background:var(--rosa-ljus);border-color:transparent}
.tva p{margin-top:8px}

/* läs mer */
.lasmer h2{font-size:32px}
.lasmer ul{list-style:none;display:grid;gap:10px;margin-top:20px}
.lasmer a{display:flex;flex-direction:column;justify-content:center;min-height:72px;padding:14px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);text-decoration:none;color:var(--ink)}
.lasmer a:hover{border-color:var(--ink)}
.lasmer a:focus-visible{outline:3px solid var(--rosa-mork);outline-offset:2px}
.lasmer b{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.01em}
.lasmer span{font-size:15px;color:var(--ink-2);margin-top:2px}

@media (min-width:1100px){
  .prosa li{font-size:19px}
  .nyckel div:nth-child(3):last-child{grid-column:auto}
  .nyckel{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .op-pris{grid-template-columns:7fr 5fr;gap:24px;margin-top:40px;align-items:start}
  .op-sido .op-etikett:first-child{margin-top:0}
  .op-pris .card.big .y1 strong{font-size:72px}
  .op-lead{font-size:19px}
  .jtab-wrap{padding:8px 32px}
  .jtab{font-size:17px}
  .jtab tbody th a,.jtab tbody th b{font-size:22px}
  .jtab td{font-size:19px;padding:18px 0 18px 24px}
  .jtab tbody th{padding:18px 8px 18px 0}
  .nyckel dd{font-size:40px}
  .tva{grid-template-columns:1fr 1fr;gap:24px}
  .tva>div{padding:40px}
  .prosa h3{font-size:28px}
  .lasmer{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
  .lasmer h2{grid-column:1/6;font-size:56px}
  .lasmer ul{grid-column:7/13;margin-top:0}
}

/* ================= nätväljaren (/bredband #nat) och nätsidorna (/bredband/nat/:nat) =================
   pages/nat-valjare.ts + pages/nat.ts. Rutorna är neutrala (kort, bläck); rosa bara på knappar och
   nyckeltalet i korten. Mobil: två rutor i bredd. Dator: fyra. */
#nat,#priser,#hitta,#operatorer{scroll-margin-top:16px}
.nv-hitta{list-style:none;margin-top:24px;border-top:2px solid var(--ink)}
.nv-hitta li{display:grid;grid-template-columns:124px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.nv-hitta b{font-family:var(--disp);font-weight:800;font-size:18px;letter-spacing:-.02em;line-height:1.2}
.nv-hitta span{font-size:16px;line-height:1.4;color:var(--ink-2)}
.nv-grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}
.nv-grid li{display:flex}
.nv{display:flex;flex-direction:column;width:100%;min-height:116px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);text-decoration:none;color:var(--ink)}
.nv b{font-family:var(--disp);font-weight:800;font-size:19px;line-height:1.1;letter-spacing:-.02em}
.nv span{font-size:14px;line-height:1.35;color:var(--ink-2);margin-top:4px}
.nv em{font-style:normal;font-size:14px;font-weight:700;margin-top:auto;padding-top:10px}
.nv:hover{border-color:var(--ink)}
.nv:focus-visible{outline:3px solid var(--rosa-mork);outline-offset:2px}
.natandra h2{font-size:32px}
.natpris .natfart{margin-top:24px}
.natpris .natfart button{min-height:64px}
.natpris .natavgift{margin-top:20px}
.natpris .natavgift a{font-weight:700;color:var(--ink)}
.natlist .cards{margin-top:20px}
.natsok{margin-top:20px}
#hitta .prosa ul+p{margin-top:16px}
.natlistor{display:grid;gap:12px;margin-top:28px}
.natlista{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:22px 20px}
.natlista h3{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.02em;margin-bottom:6px}
.natlista dl div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.natlista dl div:last-child{border-bottom:0}
.natlista dt{font-weight:600;font-size:16px}
.natlista dd{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.02em}
.natlista-not{margin-top:16px;font-size:15px;line-height:1.45;color:var(--ink-2)}

@media (min-width:1100px){
  .natval .nv-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end}
  .natval .nv-head h2{grid-column:1/8}
  .natval .nv-head .lead{grid-column:9/13;margin:0}
  .nv-hitta{display:grid;grid-template-columns:repeat(3,1fr);column-gap:24px;margin-top:48px}
  .nv-hitta li{grid-template-columns:1fr;gap:6px;padding:20px 0 0;border-bottom:0}
  .nv-hitta b{font-size:24px}
  .nv-hitta span{font-size:17px}
  .nv-grid{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
  .nv{min-height:152px;padding:24px 26px;border-radius:var(--r-l)}
  .nv b{font-size:26px}
  .nv span{font-size:16px}
  .nv em{font-size:15px}
  .natandra h2{font-size:56px}
  .natpris .natfart,.natpris .natlist,.natpris .natlistor,.natpris .natlista-not{grid-column:1/13}
  .natpris .natfart{grid-column:1/8;margin-top:40px}
  .natpris .natfart button{min-height:80px}
  .natlist .cards{margin-top:32px}
  .natlist .more-bb{margin-top:24px}
  .natlistor{grid-column:1/7;margin-top:48px}
  .natlistor.natlistor-tva{grid-column:1/13;grid-template-columns:1fr 1fr;gap:24px}
  .natlista{padding:32px 36px}
  .natpris .natlista-btn{grid-column:1/13;justify-self:start;width:auto;padding:0 28px}
  .natsok{display:inline-flex;width:auto;padding:0 28px}
}

/* ===== Mobil: operatörssidor, guider och infosidor (lib/boio-mobil/pages/operator.ts, guide.ts, info.ts) ===== */
.mo-src{font-weight:600;color:var(--ink);text-underline-offset:3px}
/* sidrubrik med nyckeltal: H1 + ingress, och kortet "Billigast första året" */
.mo-hero .mo-nyckel{margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:24px 20px}
.mo-l{font-size:14px;font-weight:600;color:var(--ink-2)}
.mo-tal{font-family:var(--disp);font-weight:800;font-size:60px;line-height:1;letter-spacing:-.04em;color:var(--rosa-mork);margin-top:4px}
.mo-sub{font-size:15px;line-height:1.45;color:var(--ink-2);margin-top:8px}
.mo-fakta{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.mo-fakta dt{font-size:14px;font-weight:600;color:var(--ink-2)}
.mo-fakta dd{font-size:17px;font-weight:600;margin-top:2px}
.mo-pris .mlist{margin-top:24px}
.mo-pris .mcard .op b{font-size:22px}
.mcard .op em{font-style:normal;font-size:14px;font-weight:600;color:var(--ink-2);text-align:right}
/* faktakolumnerna på stora kortet: Surf får mest plats, ord bryts aldrig mitt i */
.mo-pris .mcard.first .facts{grid-template-columns:1.4fr 1fr 1fr}
.mcard.first .facts dd{overflow-wrap:break-word;hyphens:manual}
/* hjälten med foto (operatörssidorna): mobil H1, ingress, prisrutan, foto */
.mo-hero-bild .foto{margin-top:24px;height:240px}
/* rader: rubrik + text, som "när"-listan på /bredband */
.mo-rader{margin-top:4px;border-top:2px solid var(--ink)}
.sek>.mo-rader{margin-top:20px}
.mo-rader>div{padding:16px 0;border-bottom:1px solid var(--line)}
.mo-rader dt{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.015em}
.mo-rader dd{margin-top:4px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.mo-rader dd b{color:var(--ink)}
.mo-rader dt a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin:-8px 0}
.mo-rader dt a:hover{text-decoration:underline}
.mo-mg{margin-top:20px}
.mo-mg>summary{padding:8px 20px;text-align:center;line-height:1.3}
.mo-mg .mcards{margin-top:12px}
/* jämförelse per surfnivå */
.mo-jmf{margin-top:24px;border-top:2px solid var(--ink)}
.mo-jmf-rad{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;padding:20px 0;border-bottom:1px solid var(--line)}
.mo-jmf-niva{grid-column:1/3}
.mo-jmf-niva b{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:-.02em}
.mo-jmf-niva span{margin-left:10px;font-size:15px;color:var(--ink-2)}
.mo-jmf small{display:block;font-size:14px;font-weight:600;color:var(--ink-2);line-height:1.35}
.mo-jmf strong{display:block;font-family:var(--disp);font-weight:800;font-size:28px;letter-spacing:-.025em;line-height:1.1;margin-top:4px}
.mo-jmf-bast strong{color:var(--rosa-mork)}
.mo-jmf-bast span{display:block;font-size:15px;color:var(--ink-2);margin-top:2px}
.mo-jmf-bast a{color:var(--ink);font-weight:600}
.mo-jmf-egen:only-of-type{grid-column:auto}
/* en rosa siffra per rad: den billigaste. Näst billigast är neutral. */
.mo-jmf-vinner strong{color:var(--rosa-mork)}
.mo-jmf-bast.mo-jmf-nast strong{color:var(--ink)}
.mo-esim dd b{margin-right:4px}

@media (min-width:1100px){
  .mo-hero{align-items:end}
  .mo-hero .sr-text{grid-column:1/8;padding-bottom:12px;min-width:0}
  .mo-hero h1{font-size:clamp(56px,5.2vw,80px)}
  .mo-hero .mo-nyckel{grid-column:9/13;margin:0;padding:36px 36px 32px}
  .mo-hero.mo-hero-bild{align-items:stretch;row-gap:40px}
  .mo-hero-bild .sr-text{grid-column:1/11;grid-row:1}
  .mo-hero-bild .foto{grid-column:1/8;grid-row:2;height:480px;margin:0}
  .mo-hero.mo-hero-bild .mo-nyckel{grid-column:8/13;grid-row:2;display:flex;flex-direction:column;justify-content:center}
  .mo-tal{font-size:84px}
  .mo-pris .mlist{margin-top:40px}
  .mo-rabatt .mo-rader,.mo-rabatt .mo-mg{max-width:1040px}
  .mo-rader>div{display:grid;grid-template-columns:200px 1fr;column-gap:24px;padding:20px 0}
  .mo-rader dd{margin-top:0;font-size:17px}
  .sek.delad .mo-rader>div{grid-template-columns:150px 1fr}
  .mo-mg .mcards{grid-template-columns:repeat(3,1fr)}
  .mo-jmf{margin-top:40px}
  .mo-jmf-rad{grid-template-columns:3fr 4fr 5fr;column-gap:24px;align-items:center;padding:28px 0}
  .mo-jmf-niva{grid-column:auto}
  .mo-jmf-niva b{display:block;font-size:32px}
  .mo-jmf-niva span{display:block;margin:4px 0 0}
  .mo-jmf strong{font-size:40px}
}

/* ===== Mobil: jämförelsen /mobilabonnemang och ämnessidorna (lib/boio-mobil/pages/start.ts, amnen.ts, amnen-delar.ts) ===== */
.mj-hjalte .sr-text .btn{width:100%;margin-top:24px}
.mj-foto{margin-top:28px}
.mj-foto .foto{margin:0;height:300px}
.mj-sticker{top:auto;bottom:12px;right:12px;width:132px;height:132px}
.mj-sticker{line-height:1.15}
/* /mobilabonnemang på mobil: listan direkt under rubriken, bilden med klistermärket under listan (fråga 23, 12/10).
   Samma bild i DOM:en (ingen dubbelnedladdning); bara ordningen ändras. Dator från 1100 px är oförändrad. */
@media (max-width:1099.98px){
  .mj-topp{display:flex;flex-direction:column}
  .mj-topp>.mj-hjalte{display:contents}
  .mj-topp .sr-text{padding:16px 16px 0}
  .mj-topp>.mj-jamfor{order:1;padding-top:48px}
  .mj-topp .mj-foto{order:2;margin:48px 16px 0}
}
.mj-head .lead{margin-top:10px}
.mj-sek .q{margin-top:24px}
.mj-sek .seg4{margin-top:12px}
.mj-sek .mlist{margin-top:20px}
.mj-kort-grid{margin-top:20px}
.mlist .mj-kort-grid{margin-top:0}
.mj-kort .op em{max-width:60%;color:var(--ink-2)}
.mj-kort .price{margin-top:10px;gap:20px}
.mj-kort:not(.first) .y2 strong{font-size:19px}
.mj-kort .band{margin-top:16px}
.mj-kort.first .facts{grid-template-columns:1.4fr 1fr 1fr}
.mj-kort .facts dd{overflow-wrap:break-word;hyphens:manual}
.mj-sek .seg4 button small{display:block;font-size:14px;color:var(--ink-2);margin-top:4px;line-height:1.3}
.mj-sek .seg4 button[aria-pressed=true] small{color:#e6d9cf}
.mj-alla{margin-top:8px}
.mj-etikett{font-size:14px;font-weight:700;color:var(--rosa-mork);margin-bottom:6px}
.mj-ensam{margin-top:24px}
.mj-prosa{margin-top:16px}
.mj-kalla{margin-top:14px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.mj-kalla a{color:var(--ink);font-weight:600}
.mj-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* tabell: på mobil ett block per rad */
.mj-tab{margin-top:20px}
.mj-tab table{width:100%;border-collapse:collapse}
.mj-tab caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mj-tab thead{display:none}
.mj-tab tbody{display:grid;gap:10px}
.mj-tab tr{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:18px 18px 8px}
.mj-tab th[scope=row]{grid-column:1/-1;text-align:left;font-weight:400}
.mj-tab th[scope=row] b{display:block;font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.02em}
.mj-tab th[scope=row] span{display:block;font-size:15px;color:var(--ink-2);margin-top:2px}
.mj-tab td{font-size:16px;font-weight:600;line-height:1.35}
.mj-tab td[data-l]::before{content:attr(data-l);display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:2px}
.mj-tab td:empty{display:none}
.mj-tab .mj-y1{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.02em}
.mj-tab tbody tr:first-child .mj-y1{color:var(--rosa-mork)}
.mj-sek .seg4.mj-n3{grid-template-columns:repeat(3,1fr)}
.mj-sek .seg4.mj-n3 button{padding:12px}
.mj-sek .seg4.mj-n3 button span{font-size:13px}
.mj-tab .mj-ut{grid-column:1/-1}
.mj-tlank{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--ink);text-underline-offset:3px}
.mj-tab3 td[data-l="Enligt operatören"],.mj-tab3 td[data-l="Med bindning"],.mj-tab3 td[data-l="Utan bindning"]{grid-column:1/-1}
.mj-tab td[data-l="Ingår"]{grid-column:1/-1}

/* familjeräkningen (familj) och vad bindningen sparar (utan-bindningstid) */
.mj-famtal{margin-top:20px;padding:24px;border-radius:var(--r-l);background:var(--rosa-ljus)}
.mj-famtal-l{font-size:15px;font-weight:600;color:var(--ink-2)}
.mj-famtal-tal{font-family:var(--disp);font-weight:800;font-size:52px;letter-spacing:-.035em;line-height:1.05;color:var(--rosa-mork);margin-top:6px}
.mj-famtal-sub{font-size:16px;margin-top:4px}
.mj-tab-fam td[data-l="Surf"]{grid-column:1/-1}
.mj-spar .y1 strong{font-size:36px;color:var(--ink)}
.mj-head+.mcards .mj-spar:first-child .y1 strong{color:var(--rosa-mork)}
.mj-spar-rader{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:10px}
.mj-spar-rader dt{font-size:14px;font-weight:600;color:var(--ink-2)}
.mj-spar-rader dd{margin:2px 0 0;font-size:15px;font-weight:600;line-height:1.35}

/* operatörernas egna erbjudanden */
.mj-erb{list-style:none;margin-top:20px;border-top:2px solid var(--ink)}
.mj-erb li{padding:18px 0 8px;border-bottom:1px solid var(--line)}
.mj-erb .ordmarke{font-size:22px;display:block}
.mj-erb p{margin-top:6px;color:var(--ink-2);font-size:16px;line-height:1.5}

/* du behåller ditt nummer: bento */
.mj-keep-in{background:var(--tint);border-radius:var(--r-l);padding:28px 20px}
.mj-keep h2{font-size:32px}
.mj-keep-text p{margin-top:12px;color:var(--ink-2)}
.mj-keep-text .btn-line{margin-top:20px}
.mj-bento{display:grid;gap:8px;margin-top:24px}
.mj-bento div{background:var(--card);border-radius:var(--r-m);padding:18px 20px}
.mj-bento dt{font-family:var(--disp);font-weight:800;font-size:36px;letter-spacing:-.03em;line-height:1}
.mj-bento div:first-child dt{color:var(--rosa-mork)}
.mj-bento dd{margin-top:8px;font-size:15px;line-height:1.4;color:var(--ink-2)}

/* länkar till ämnessidorna */
.mj-lankar{list-style:none;margin-top:20px;border-top:2px solid var(--ink)}
.mj-lankar a{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px;min-height:72px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.mj-lankar a::after{content:"";grid-column:2;grid-row:1/3;width:12px;height:12px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg);margin-right:4px}
.mj-lankar b{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.01em;line-height:1.15}
.mj-lankar span{font-size:15px;color:var(--ink-2);margin-top:2px}
.mj-lankar a:hover b{text-decoration:underline;text-underline-offset:4px}
.mj-lankar a:focus-visible{outline:3px solid var(--rosa-mork);outline-offset:2px}

/* steg */
.mj-steg{margin-top:20px}
.mj-steg a{color:var(--ink);font-weight:600}

@media (min-width:1100px){
  .mj-hjalte{align-items:stretch}
  .sidrubrik.mj-rubrik.med-foto h1{font-size:clamp(48px,4.4vw,64px)}
  /* startsidans hjälte som /bredband: stor H1 på krämfärgad yta som går in över fotots nedre vänstra hörn */
  .sidrubrik.mj-hjalte h1{font-size:clamp(64px,6.4vw,96px)}
  .sidrubrik.mj-hjalte .sr-text{grid-column:1/9;grid-row:1;position:relative;z-index:2;background:var(--bg);padding:36px 40px 0 0;border-radius:0 var(--r-l) 0 0}
  .mj-hjalte .mj-foto{grid-column:5/13;grid-row:1}
  .mj-hjalte .mj-foto .foto{height:680px}
  .mj-steg li{font-size:19px}
  .mj-hjalte .sr-text{align-self:end}
  .mj-hjalte .sr-text .btn{width:auto;margin-top:32px}
  .mj-foto{grid-column:7/13;margin:0;position:relative}
  .mj-foto .foto{height:600px}
  .mj-sticker{top:40px;bottom:auto;right:40px;width:164px;height:164px}
  .mj-sticker small,.mj-sticker span{font-size:15px}
  .mj-sticker b{font-size:31px}
  .mj-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end}
  .mj-head h2{grid-column:1/8;font-size:56px}
  .mj-head .lead{grid-column:9/13;margin:0}
  .mj-head h2:only-child{grid-column:1/11}
  .mj-sek .q{margin-top:40px;font-size:20px}
  .mj-sek .seg4.mj-n3{grid-template-columns:repeat(3,1fr)}
  .mj-sek .seg4.mj-n2{grid-template-columns:repeat(2,1fr)}
  .mj-sek .mlist{margin-top:32px}
  .mj-kort-grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .mj-kort-grid.mj-fyra{grid-template-columns:repeat(4,1fr)}
  .mj-kort-grid .mj-kort.first{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start;padding:40px}
  .mj-kort.first>*{grid-column:1/6}
  .mj-kort.first .op,.mj-kort.first .price,.mj-kort.first .then,.mj-kort.first .facts,.mj-kort.first .terms,.mj-kort.first .mj-etikett{grid-column:1/6;grid-row:auto}
  .mj-kort.first .btn{grid-column:1/6;grid-row:auto;align-self:start;width:100%;margin-top:24px}
  .mj-kort.first .band{grid-column:7/13;grid-row:1/6;margin:0;align-self:center}
  .mj-kort.first .band .bar{gap:6px}
  .mj-kort.first .band .bar i{height:72px;border-radius:16px}
  .mj-kort.first .key{margin-top:16px;font-size:15px}
  .mj-kort.first .key b{font-size:24px;letter-spacing:-.02em}
  .mj-kort.first .y1 strong{font-size:84px}
  .mj-kort.first .y2 strong{font-size:32px}
  .mj-kort.first .price{gap:36px;margin-top:20px}
  .mj-kort.first .facts{margin-top:24px}
  .mj-ensam .mj-kort.first{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;padding:40px}
  .mj-kort:not(.first){display:flex;flex-direction:column}
  .mj-kort:not(.first) .btn-line{margin-top:auto}
  /* Med etiketten "Annons": etikett och knapp trycks ned tillsammans, 6 px emellan. */
  .mj-kort:not(.first) .annons{margin-top:auto}
  .mj-kort:not(.first) .annons+.btn-line{margin-top:6px}
  .mj-kort:not(.first) .facts{margin-bottom:16px}
  .mj-sek.mj-delad{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
  .mj-delad .mj-head{grid-column:1/6;display:block}
  .mj-delad .mj-head h2{font-size:48px}
  .mj-delad>:not(.mj-head){grid-column:7/13}
  .mj-delad .mj-prosa,.mj-delad .mj-steg{margin-top:0}
  .mj-delad .mj-ensam{grid-column:1/13;margin-top:48px}
  .mj-tab{margin-top:40px}
  .mj-tab thead{display:table-header-group}
  .mj-tab tbody{display:table-row-group}
  .mj-tab tr{display:table-row;background:none;border:0;padding:0}
  .mj-tab thead th{text-align:left;font-size:14px;font-weight:600;color:var(--ink-2);padding:0 16px 12px 0;border-bottom:2px solid var(--ink)}
  .mj-tab tbody th,.mj-tab td{padding:18px 16px 18px 0;border-bottom:1px solid var(--line);vertical-align:middle}
  .mj-tab td[data-l]::before{display:none}
  .mj-tab td:empty{display:table-cell}
  .mj-tab .mj-ut{text-align:right;padding-right:0}
  .mj-tab .mj-y1{font-size:26px}
  .mj-erb{display:grid;grid-template-columns:repeat(3,1fr);column-gap:24px;margin-top:40px}
  .mj-famtal{margin-top:40px;padding:36px 40px;max-width:640px}
  .mj-famtal-tal{font-size:72px}
  .mj-spar .y1 strong{font-size:40px}
  .mj-erb li{padding:24px 0 12px}
  .mj-keep-in{padding:56px 64px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
  .mj-keep-text{grid-column:1/6}
  .mj-keep h2{font-size:48px}
  .mj-keep-text .btn-line{width:auto;display:inline-flex;padding:0 28px}
  .mj-bento{grid-column:7/13;margin:0;grid-template-columns:1fr 1fr;gap:12px}
  .mj-bento div{padding:24px}
  .mj-bento div:first-child{grid-column:1/-1}
  .mj-bento div:first-child dt{font-size:72px}
  .mj-bento dt{font-size:40px}
  .mj-keep .mj-kalla{grid-column:7/13}
  .mj-lankar{display:grid;grid-template-columns:repeat(3,1fr);column-gap:24px;margin-top:40px}
  .mj-lankar a{min-height:96px}
  .mj-lankar b{font-size:24px}
}

/* ===== Bredband: ämnessidor (lib/boio-bredband/pages/amnen.ts, amnen-hastighet.ts, amnen-data.ts) =====
   Prislistan per stadsnät (.am-lista), nätkort (.am-nlista), tabell per nät (.am-nt), länklistor. */
.am-intro{margin-top:16px;color:var(--ink-2);max-width:640px}
.sek>.sek-body>.am-intro:first-child{margin-top:0}
.sek .cards,.sek .am-lista,.sek .am-nlista{margin-top:24px}
.am-lank{margin-top:12px}
.am-lank a,.am-lankar a,.am-hlista a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prosa .am-lankar,.am-lankar{list-style:none;padding:0;margin-top:16px;border-top:1px solid var(--line)}
.am-lankar li{border-bottom:1px solid var(--line)}
.am-lankar a{width:100%;text-decoration:none}
.am-lankar a::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--ink);border-top:2px solid var(--ink);transform:rotate(45deg)}
.prosa .am-hlista,.am-hlista{list-style:none;padding:0;margin-top:12px;border-top:2px solid var(--ink)}
.am-hlista li{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:4px 0}
.am-hlista span{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.am-k .op em{font-style:normal}
.am-ul+p{margin-top:12px}
.prosa .am-nlista,.prosa .am-lista,.sek-body .am-nlista,.sek-body .am-lista{padding-left:0}
.am-nat{color:var(--ink)}

/* prislistan: en kompakt rad per nät/operatör. Hela raden är en länk (≥ 44 px). Mobil: vem till
   vänster, första året stort till höger, mini-bandet i full bredd under. Villkor i en panel under listan. */
.am-lista{list-style:none;padding:0;display:grid;gap:8px}
.am-rad{display:block}
.am-rlank{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:start;min-height:44px;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);text-decoration:none;color:var(--ink)}
.am-rlank:hover{border-color:var(--ink)}
.am-rlank:focus-visible{outline:3px solid var(--rosa-mork);outline-offset:2px}
.am-vem{display:flex;flex-direction:column;gap:2px;min-width:0}
.am-nat{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.am-plats{font-size:14px;color:var(--ink-2)}
.am-op{font-size:15px;color:var(--ink-2)}
.am-op .ordmarke{font-size:16px}
.am-vem .am-op:first-child .ordmarke{font-size:20px}
.am-fakta{font-size:14px;color:var(--ink-2)}
.am-pris{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.am-pris small{display:block;font-size:14px;font-weight:600;color:var(--ink-2)}
.am-y1 strong{display:block;font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:-.03em;line-height:1.05;color:var(--ink);white-space:nowrap}
.am-rad:first-child .am-y1 strong{color:var(--rosa-mork)}
.am-y2{display:block;margin-top:6px}
.am-y2 b{display:block;font-weight:700;font-size:15px}
.am-mer{grid-column:1/-1;display:block;margin-top:10px}
.am-mer .then{display:block;margin:0;font-size:14px}
.am-mer .mini{display:flex;margin-top:8px}
.am-mer .mini i{height:5px}
.am-extra{display:block;margin-top:6px;font-size:14px;font-weight:600;color:var(--ink)}
.am-gor{grid-column:1/-1;display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:12px;border:2px solid var(--ink);border-radius:var(--r-m);font-weight:700;font-size:16px}
.am-k .am-extra{margin-top:8px}
.am-villkor{margin-top:10px}
.am-villkor ul{list-style:none;padding:0;display:grid;gap:10px;margin-top:4px}
.am-villkor li{font-size:14px;line-height:1.45;color:var(--ink-2)}
.am-villkor li b{color:var(--ink)}
.prosa .am-villkor ul{padding-left:0}

/* nätkort: namn, ort, kännetecken, adressök */
.am-nlista{list-style:none;padding:0;display:grid;gap:12px}
.am-ninfo{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:22px 20px;display:flex;flex-direction:column}
.am-ninfo .ordmarke{font-size:24px;line-height:1.1}
.am-ninfo p{margin-top:10px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.am-na{display:inline-flex;align-items:center;min-height:44px;margin-top:auto;padding-top:8px;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.am-tips{margin-top:16px;max-width:640px}

/* alla operatörer i ett nät */
.am-ntgrupp{margin-top:20px;border-top:2px solid var(--ink)}
.am-nt{border-bottom:1px solid var(--line)}
.am-nt>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;cursor:pointer;list-style:none;font-weight:700;font-size:17px}
.am-nt>summary::-webkit-details-marker{display:none}
.am-nt>summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.am-nt[open]>summary::after{transform:translateY(3px) rotate(-135deg)}
.am-nt>summary:focus-visible,.am-lankar a:focus-visible,.am-na:focus-visible{outline:3px solid var(--rosa-mork);outline-offset:2px}
.am-ntwrap{overflow-x:auto;padding-bottom:16px}
.am-ntab{width:100%;border-collapse:collapse;font-size:15px}
.am-ntab th,.am-ntab td{text-align:left;padding:10px 8px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.am-ntab thead th{font-size:14px;font-weight:600;color:var(--ink-2)}
.am-ntab td{font-weight:600}
.am-ntab td:nth-child(2){color:var(--ink)}
.am-nta{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;white-space:normal}
@media (prefers-reduced-motion:reduce){.am-nt>summary::after{transition:none}}

@media (min-width:1100px){
  .am-intro{font-size:19px}
  .sek .cards,.sek .am-lista,.sek .am-nlista{margin-top:40px}
  .sek .cards{grid-template-columns:7fr 5fr}
  .am-lista{gap:12px}
  .am-rlank{grid-template-columns:3fr 3.4fr 4fr 2fr;column-gap:32px;align-items:center;padding:24px 32px;border-radius:var(--r-l)}
  .am-nat{font-size:24px}
  .am-pris{flex-direction:row;align-items:baseline;gap:24px;text-align:left}
  .am-y1 strong{font-size:34px}
  .am-y2{margin-top:0}
  .am-y2 b{font-family:var(--disp);font-size:20px;letter-spacing:-.02em}
  .am-mer{grid-column:auto;margin-top:0}
  .am-mer .mini i{height:6px}
  .am-gor{grid-column:auto;margin-top:0}
  .am-rlank:hover .am-gor{background:var(--ink);color:#fff}
  .am-villkor{margin-top:16px}
  .am-nlista{grid-template-columns:repeat(3,1fr);gap:24px}
  .am-ninfo{padding:28px 30px}
  .sek .am-par .cards{grid-template-columns:1fr 1fr}
  .am-ntab{font-size:16px}
  .am-ntab th,.am-ntab td{padding-right:24px}
}

/* ===== Bredband: rättningar 6 okt (nyckelkort i sidrubriken, nätväljaren, startsidans mobilingång) ===== */
/* nyckelkort: sidans viktigaste siffra med Prisbandet, där sidan saknar eget foto (ui/block.ts nyckelkort) */
.sr-kort{margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:24px 20px}
.sk-l{font-size:14px;font-weight:600;color:var(--ink-2)}
.sk-tal{font-family:var(--disp);font-weight:800;font-size:56px;line-height:1;letter-spacing:-.04em;color:var(--rosa-mork);margin-top:6px}
.sk-vem{margin-top:8px;font-size:16px;font-weight:600;line-height:1.4}
.sk-vem span{display:block;font-weight:500;color:var(--ink-2);font-size:15px}
.sr-kort .mini{margin-top:16px}
.sr-kort .band{margin-top:18px}
.sk-text{margin-top:12px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.sk-a{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-weight:700;color:var(--ink);text-underline-offset:3px}
.sk-a:focus-visible{outline:3px solid var(--rosa-mork);outline-offset:2px}
@media (max-width:1099.98px){.sr-kort.sk-dator{display:none}}

/* nätväljaren: två stora rutor (flest operatörer) och en kompakt lista i två kolumner */
.nv-val .nv-grid{grid-template-columns:1fr;margin-top:24px}
.nv-stor{min-height:0}
.nv-stor strong{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--disp);font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1;color:var(--rosa-mork)}
.nv-stor strong small{display:block;margin-top:4px;font-family:var(--text);font-size:14px;font-weight:600;letter-spacing:0;color:var(--ink-2)}
.nv-lista{list-style:none;padding:0;margin-top:8px;border-top:2px solid var(--ink)}
.nv-rad{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:baseline;min-height:56px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.nv-rad b{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.15}
.nv-rad span{grid-column:1;font-size:14px;color:var(--ink-2)}
.nv-rad em{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-size:14px;font-weight:700;white-space:nowrap}
.nv-rad:hover b{text-decoration:underline;text-underline-offset:3px}
.nv-rad:focus-visible{outline:3px solid var(--rosa-mork);outline-offset:2px}
.prosa .nv-lista,.prosa .nv-grid{padding-left:0}
.natlista-under{font-size:14px;line-height:1.4;color:var(--ink-2);margin:-2px 0 6px}
.am-var{display:block;font-size:14px;font-weight:500;color:var(--ink-2);white-space:normal;margin-top:-6px;padding-bottom:4px}

/* startsidan: kort ingång till /mobilabonnemang */
.mob-ing .mob-body .lead{margin-top:12px}
.mob-ing .mob-body .btn{width:100%;margin-top:22px}

@media (min-width:1100px){
  .sidrubrik.med-kort .sr-text{grid-column:1/8;padding-bottom:16px;min-width:0}
  .sidrubrik.med-kort h1{font-size:clamp(52px,5vw,76px)}
  .sidrubrik.med-kort{align-items:end}
  .sr-kort{grid-column:8/13;margin:0;padding:36px 36px 30px}
  .sk-tal{font-size:84px}
  .sk-vem{font-size:17px}
  .sr-kort .mini i{height:8px}
  .sr-kort .band .bar i{height:16px}
  .nyckel dd{font-size:34px}
  .nv-val{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start;margin-top:40px}
  .nv-val .nv-grid{grid-column:1/7;grid-template-columns:1fr 1fr;gap:16px;margin-top:0}
  .nv-val .nv-lista{grid-column:7/13;margin-top:0;display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
  .nv-val .nv-grid:only-child,.nv-val .nv-lista:only-child{grid-column:1/13}
  .nv-stor{min-height:260px}
  .nv-stor strong{margin-top:auto;font-size:44px}
  .nv-rad{min-height:64px}
  .mob-ing{padding:96px 0}
  .mob-ing .mob-in{align-items:center}
  .mob-ing .mob-photo{position:static;grid-row:1;height:560px;min-height:0;max-height:none}
  .mob-ing .mob-body{grid-column:7/12;align-self:center}
  .mob-ing .mob-body .btn{width:auto;margin-top:32px}
}

/* ===== Bredband: nät- och operatörssidor med eget foto + nyckelkort (ui/block.ts sidrubrik bild+kort) ===== */
/* Mobil: H1, ingress, foto (nyckelkortet är dator-only, priskortet följer direkt under). Dator: H1, ingress och
   nyckelkortet i vänstra halvan, fotot fyller hela högra halvan i samma höjd. */
@media (min-width:1100px){
  .sidrubrik.med-bildkort{grid-template-rows:auto 1fr;align-items:stretch}
  .sidrubrik.med-bildkort .sr-text{grid-column:1/7;grid-row:1;padding-bottom:0}
  .sidrubrik.med-bildkort .sr-kort{grid-column:1/7;grid-row:2;align-self:end;margin-top:36px}
  .sidrubrik.med-bildkort .foto{grid-column:7/13;grid-row:1/3;height:100%;min-height:560px;margin:0}
}
/* Granskningen 7/10: på mobil ska priset synas inom första skärmen, inte under ett foto. Nyckelkortet visas
   därför också på mobil, direkt under ingressen, och fotot blir en lägre remsa (16:9, högst 200 px) efter det. */
@media (max-width:1099.98px){
  .sidrubrik.med-bildkort .sr-kort.sk-dator{display:block}
  .sidrubrik.med-bildkort .foto{height:auto;aspect-ratio:16/9;max-height:200px;margin-top:20px}
}

/* Loggorna (ui/logga.ts) i rader, tabeller och nätkort. I tabellerna flyter loggan till vänster om namnet,
   så att cellen förblir en tabellcell på dator och en rad i gridden på mobil. */
.am-op:has(>.oplogo){display:flex;align-items:center;gap:10px;margin-top:4px}
.am-vem .am-op:first-child:has(>.oplogo){margin-top:0}
.am-ninfo>.oplogo{margin-bottom:14px}
.mj-erb-h{display:flex;align-items:center;gap:10px}
.mj-erb .mj-erb-h .ordmarke{display:inline}
.jtab tbody th>.oplogo,.am-ntab tbody th>.oplogo{float:left;margin:0 10px 0 0}
/* Namnet i en egen spalt bredvid loggan, så att ett långt namn ("Tele2, kabel-tv-nätet") radbryts där och inte under loggan. */
.jtab tbody th:has(>.oplogo)>a,.jtab tbody th:has(>.oplogo)>b{min-height:32px;display:flex;align-items:center;margin-left:42px}
.jtab tbody th:has(>.oplogo) span:not(.oplogo){margin-left:42px}
/* Mobil: smal kolumn. Detaljraden under loggan får hela bredden. */
@media (max-width:599px){.jtab tbody th:has(>.oplogo)>span:not(.oplogo):last-child{margin-left:0;clear:left;padding-top:4px}}
.am-ntab tbody th:has(>.oplogo){white-space:nowrap}
.am-ntab tbody th>.oplogo{margin-top:6px}
.am-ntab tbody th:has(>.oplogo) .am-var{margin-left:42px}
.mj-tab th[scope=row]>.oplogo{float:left;margin:2px 12px 0 0}
.mj-tab th[scope=row]:has(>.oplogo)::after{content:"";display:block;clear:both}
.nv>.oplogo{margin:0 0 12px}
.nv-rad:has(>.oplogo){grid-template-columns:32px 1fr auto}
.nv-rad>.oplogo{grid-column:1;grid-row:1/3;align-self:center;margin:0}
.nv-rad:has(>.oplogo) b,.nv-rad:has(>.oplogo) span:not(.oplogo){grid-column:2}
.nv-rad:has(>.oplogo) em{grid-column:3}

/* Nätsidor: portalen som textlänk under partnerknappen (granskningen 11/10) */
.natportal{margin-top:10px;font-size:14px;line-height:1.4;color:var(--ink-2,inherit)}
.natportal a{display:inline-block;padding:8px 0}

/* Köpknappen under priset i operatörshjälten (granskningen 11/10) */
.sk-knapp,.mo-ut{margin-top:16px}
.sk-knapp .annons,.mo-ut .annons{margin:0 0 6px}
.sk-knapp .btn,.mo-ut .btn{width:100%;justify-content:center}

/* Kontantkortets stora kort: samma pris varje laddning, så stapeln är en tunn hel linje och priset per laddning bär
   högerkolumnen (inte ett 72 px rosa block utan innehåll). Hallon eller Vimla: två kort sida vid sida. */
@media (min-width:1100px){
  .mj-kort.first .band.kk .bar i{height:10px;border-radius:5px}
  .mj-kort.first .band.kk .key{margin-top:18px;font-size:28px;letter-spacing:-.01em}
  .mj-kort-grid.mj-tva{grid-template-columns:repeat(2,1fr)}
}