/* Boio Försäkring – undersidor del A (flytt, hyresrätt, bostadsrätt, villa, vad kostar, vad ingår, i test).
   Samma språk som R1: foton leder, fet Hubot, bläck/varmvitt. Jade bara på huvudknapp, fotorand och ETT nyckeltal (pris-kortet).
   Mobil först (375), dator från 900 px. Inga inline-stilar (CSP): diagram är SVG med attribut. */

/* Sidrubrik: knapp + grafik i stället för foto */
@media (max-width:899px){.sidrubrik{grid-template-columns:minmax(0,1fr)}.sidrubrik h1{font-size:clamp(36px,10.4vw,56px)}}
.sr-cta{margin-top:26px}
.sr-cta .btn{width:100%;justify-content:center}
.sr-graf{display:grid}
.med-graf .sr-graf>*{align-self:center}

/* Löptext och sektioner */
.brod{color:var(--ink);font-size:17px;max-width:52ch;margin-top:14px}
.brod-not{color:var(--grey);font-size:16px;margin-top:22px}
.sek-vit{background:var(--white)}
.sek .lead{max-width:44ch}
.duo-grid{display:grid;gap:32px}
.duo-grid>*,.amne-co-grid>*,.delar>*,.ansvar>*{min-width:0}
@media (max-width:899px){h2{overflow-wrap:break-word}}
.duo-grid .pil-lank{margin-right:24px}
.kort{background:var(--white);border-radius:28px;padding:24px 20px}
.sek-vit .kort{background:var(--paper)}
.kort-ink,.sek-vit .kort-ink{background:var(--mint);color:var(--ink)}
.kort-tal{font:800 88px/1 var(--head);font-stretch:110%;letter-spacing:-.04em}
.kort-text{font-size:18px;line-height:1.4;margin-top:10px;max-width:30ch}
.kort-fot{font-size:14px;color:rgba(21,19,31,.72);margin-top:18px}
.kort-rubrik{font:800 22px/1.1 var(--head);font-stretch:108%;word-spacing:.12em;margin-bottom:12px}
.fraga-lista{padding-left:22px;display:grid;gap:12px;font-size:17px;line-height:1.4}
.fraga-lista li::marker{font-weight:700;color:var(--jade-d)}

/* Diagram (SVG) */
.graf{margin:0}
.graf svg{width:100%;height:auto;overflow:visible}
.graf figcaption{font-size:14px;color:var(--grey);margin-top:12px}
.g-namn{font:600 21px var(--body);fill:var(--ink)}
.g-tal{font:700 21px var(--body);fill:var(--ink);font-variant-numeric:tabular-nums}
.g-mitt{text-anchor:middle}
.g-bak{fill:var(--paper)}
.sek-vit .g-bak,.kort .g-bak{fill:#ece8df}
.g-stapel{fill:var(--ink)}
.g-ljus{fill:#cfc9bd}
.graf-res{margin-top:22px;max-width:520px}
.graf-res .g-namn,.graf-res .g-tal{font-size:17px}

/* Lagcitat */
.lag{margin:16px 0 0;padding:4px 0 0 18px;border-left:3px solid var(--ink)}
.lag p{font:500 18px/1.45 var(--body);color:var(--ink);max-width:56ch}
.lag footer{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;font-size:14px}
.lag footer b{font-weight:700}

/* Ansvar: två kort sida vid sida */
.ansvar{display:grid;gap:14px;margin-top:8px}
.ansvar-kort{background:var(--white);border-radius:28px;padding:26px 22px}
.sek-vit .ansvar-kort{background:var(--paper)}
.ansvar-du{background:var(--mint);color:var(--ink)}
.sek-vit .ansvar-du{background:var(--mint)}
.ansvar-du .lag{border-color:var(--jade-d)}
.ansvar-du .lag p,.ansvar-du .lag footer{color:var(--ink)}
.ansvar-du .kalla,.ansvar-du .kalla-flera a{color:rgba(21,19,31,.72);text-decoration-color:rgba(21,19,31,.25)}
.ansvar-du .pil-lank{color:var(--jade-d)}
.ansvar-vem{font:700 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin-bottom:12px}
.ansvar-kort h3{font-size:26px;margin-bottom:6px}
.ak-text{font-size:16px;line-height:1.5;margin-top:8px;opacity:.85}
.punkt{list-style:none;margin-top:14px;display:grid}
.punkt li{padding:12px 0;border-top:1px solid var(--line);font-size:16px}
.ansvar-du .punkt li{border-color:rgba(21,19,31,.12)}

/* Hemförsäkringens delar på vit bakgrund */
.parts-vit{margin-top:0;background:var(--white);border-radius:28px;padding:4px 22px;border-top:0}
.parts-vit .part:last-child{border-bottom:0}

/* Tre kort (flytta ihop) */
.tre-grid{display:grid;gap:12px}
.tre{background:var(--paper);border-radius:24px;padding:24px 22px}
.tre-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);font:800 15px/1 var(--head);margin-bottom:16px}
.tre h3{margin-bottom:8px}
.tre p{color:var(--grey);font-size:16px}
.tre .pil-lank{margin-top:14px;font-size:16px}

/* Checklista + sidokort */
.check-kort{grid-template-columns:1fr}
.check-sido{background:var(--paper);margin:0 22px 22px;border-radius:22px;padding:22px;display:grid;gap:6px;align-content:start}
.check-sido p{color:var(--grey);font-size:16px}
.check-sido .pil-lank{margin-top:8px}

/* Banner (ny hyresrätt, köpa hus) */
.banner{background:var(--white);border-radius:28px;padding:28px 22px;display:grid;gap:18px}
.banner h2{font-size:clamp(30px,8vw,48px);margin-bottom:12px}
.banner p{color:var(--grey);font-size:17px;max-width:52ch}
.banner .lag p{color:var(--ink)}
.banner-l{display:flex;flex-direction:column;align-items:flex-start}
.banner-l .pil-lank{margin-top:14px}

/* Bostadsrätt: genomskärning */
.snitt{margin:0;background:var(--white);border-radius:28px;padding:18px}
.snitt svg{width:100%;height:auto}
.snitt figcaption{font-size:14px;color:var(--grey);margin:10px 4px 2px}
.s-hus{fill:var(--paper);stroke:#cfc9bd;stroke-width:2}
.s-lgh{fill:var(--white);stroke:var(--ink);stroke-width:3}
.s-ror{stroke:#b9b2a5;stroke-width:6;stroke-linecap:round}
.s-del{fill:var(--mint);stroke:var(--jade-d);stroke-width:2}
.s-txt{font:700 20px var(--body);fill:var(--ink);text-anchor:middle}
.s-rubrik{font:800 30px var(--head);fill:var(--ink);text-anchor:middle}
.s-sma{font:500 19px var(--body);fill:var(--grey);text-anchor:middle}
.s-ljus{fill:#8c867b}

/* Vad kostar: nyckeltalet (sidans enda jade-yta utöver knappen) */
.pris-kort{background:var(--mint);border-radius:32px;padding:28px 24px;position:relative;overflow:hidden}
.pris-etikett{font:600 15px/1.3 var(--body);color:#2d3a33}
.pris-tal{font:800 96px/1 var(--head);font-stretch:108%;letter-spacing:-.045em;margin:14px 0 10px;color:var(--ink)}
.pris-tal small{font:700 22px/1 var(--body);letter-spacing:0;margin-left:8px}
.pris-not{font-size:16px;color:#2d3a33;max-width:34ch;margin-bottom:10px}
.pris-kort .kalla{color:#2d3a33}
.faktorer{list-style:none;display:grid;gap:10px;margin-top:8px}
.faktorer li{background:var(--white);border-radius:22px;padding:20px;display:grid;grid-template-columns:40px 1fr;gap:2px 12px}
.faktor-n{grid-row:1/3;font:800 15px/1.7 var(--head);color:var(--grey)}
.faktorer b{font:800 19px/1.25 var(--head);font-stretch:106%;word-spacing:.14em}
.faktorer span:last-child{color:var(--grey);font-size:16px}
.faktorer .du-styr{background:var(--mint);color:var(--ink)}
.faktorer .du-styr span:last-child,.faktorer .du-styr .faktor-n{color:rgba(21,19,31,.72)}
.satt-grid{display:grid;gap:12px}
.satt{background:var(--paper);border-radius:26px;padding:26px 22px;display:flex;flex-direction:column}
.satt-n{font:800 44px/1 var(--head);font-stretch:110%;color:#cfc9bd;margin-bottom:14px}
.satt h3{margin-bottom:8px}
.satt p{color:var(--grey);font-size:16px}
.satt .kallor{margin-top:12px}
.satt .pil-lank{margin-top:14px;font-size:16px}
#rakna .ex{background:var(--white)}

/* Vad ingår: delarna som bento */
.delar-sek{padding-top:24px}
.delar{display:grid;gap:12px}
.del{background:var(--white);border-radius:28px;padding:26px 22px;scroll-margin-top:24px}
.del-n{display:block;font:800 15px/1 var(--head);color:var(--grey);margin-bottom:18px}
.del h2{font-size:clamp(30px,8vw,44px);margin-bottom:12px}
.del>p{color:var(--grey);font-size:17px;max-width:52ch}
.del .kallor{margin-top:12px}
.del-stor{background:var(--mint);color:var(--ink)}
.del-stor>p,.del-stor .del-n{color:rgba(21,19,31,.72)}
.del-stor .kalla,.del-stor .kalla-flera a{color:rgba(21,19,31,.72);text-decoration-color:rgba(21,19,31,.25)}
.del-stor .pil-lank{color:var(--jade-d)}
.del-bred .graf figcaption{max-width:60ch}

/* I test */
.skala-kort{background:var(--white);border-radius:32px;padding:28px 24px}
.skala{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:18px 0}
.skala span{height:64px;border-radius:14px;background:var(--paper);display:grid;place-items:end center;padding-bottom:10px;font:800 20px/1 var(--head)}
.skala span:nth-child(n+2){background:#ece8df}.skala span:nth-child(n+4){background:#d9d3c7}.skala span:last-child{background:var(--ink);color:#fff}
.skala-text{font-size:16px;color:var(--grey);margin-bottom:8px;max-width:36ch}
.vikt-graf svg{display:block}
.vikt-lista{list-style:none;display:grid;gap:10px;margin-top:18px}
.vikt-lista li{display:grid;grid-template-columns:14px 56px 1fr;gap:10px;align-items:center;font-size:16px}
.vikt-lista i{width:14px;height:14px;border-radius:4px}
.v-mork{background:var(--ink)}.v-ljus{background:#cfc9bd}
.itest td{vertical-align:top}
.itest .pc{display:grid;margin-bottom:8px}
.itest .pc b{font-size:22px}
.itest .pc small{font-size:13px;color:var(--grey);line-height:1.3}
.itest .ingen{color:var(--grey)}
.itest .t-ut .go{font-size:14px}
@media (max-width:899px){
  .itest thead{display:none}
  .itest,.itest tbody,.itest tr,.itest th,.itest td{display:block}
  .itest tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--line)}
  .itest th,.itest td{border:0;padding:0}
  .itest th[scope=row]{grid-column:1/-1;font-size:19px;margin-bottom:6px}
  .itest td:nth-child(2)::before{content:"Grund";display:block;font-size:12px;color:var(--grey);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
  .itest td:nth-child(3)::before{content:"Stor/tillägg";display:block;font-size:12px;color:var(--grey);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
  .itest .t-ut{grid-column:1/-1;text-align:left}
  .itest .t-ut .go{justify-content:flex-start}
}

/* Bolagen på ämnessidorna */
.amne-co{padding:72px 0}
.amne-co-grid{display:grid;gap:8px}
.amne-co-side .pil-lank{margin:0 0 18px}

/* Läs vidare */
.las{padding:72px 0}
.las-h{font-size:clamp(28px,7vw,40px);margin-bottom:22px}
.las-grid{list-style:none;display:grid;gap:10px}
.las-kort{display:grid;grid-template-columns:1fr 24px;gap:2px 12px;align-items:center;background:var(--white);border-radius:22px;padding:20px;text-decoration:none;color:var(--ink);transition:transform .25s var(--ease)}
.las-kort b{font:800 20px/1.15 var(--head);font-stretch:106%;word-spacing:.12em}
.las-kort span{grid-column:1;color:var(--grey);font-size:15px}
.las-kort svg{grid-row:1/3;grid-column:2;width:22px;height:22px;color:var(--jade-d)}
.las-kort:hover{transform:translateY(-2px)}

/* Dator */
@media (min-width:900px){
  .sr-cta .btn{width:auto;height:64px;padding:0 30px 0 32px;font-size:18px}
  .sr-cta{margin-top:34px}
  .duo-grid{grid-template-columns:5fr 6fr;gap:72px;align-items:center}
  .duo-grid h2{font-size:clamp(40px,3.7vw,54px)}
  .amne-co-side h2{font-size:clamp(40px,3.4vw,50px)}
  .duo-omvand{grid-template-columns:6fr 5fr}
  .duo-omvand>.kort{order:-1}
  .kort{padding:36px 36px}
  .kort-tal{font-size:132px}
  .ansvar{grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
  .ansvar-kort{padding:40px 40px 36px}
  .ansvar-kort h3{font-size:30px}
  .tre-grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .tre{padding:32px 30px}
  .check-kort{grid-template-columns:7fr 4fr;align-items:stretch}
  .check-sido{margin:24px 24px 24px 0;padding:36px 32px;align-content:center}
  .banner{grid-template-columns:7fr 4fr;gap:64px;padding:56px 64px;border-radius:40px;align-items:center}
  .banner h2{font-size:52px}
  .snitt{padding:28px;border-radius:36px}
  .pris-kort{padding:48px 48px 44px;border-radius:40px}
  .pris-tal{font-size:168px;margin:22px 0 18px}
  .pris-tal small{font-size:28px}
  .faktorer{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
  .faktorer li{padding:28px 26px}
  .satt-grid{grid-template-columns:repeat(4,1fr);gap:16px}
  .satt{padding:32px 28px}
  .delar{grid-template-columns:repeat(6,1fr);gap:20px}
  .del{grid-column:span 2;padding:36px 34px;border-radius:32px}
  .del-stor{grid-column:span 4;display:flex;flex-direction:column;justify-content:flex-end;min-height:420px}
  .del-stor h2{font-size:64px}
  .del:nth-child(3),.del:nth-child(4){grid-column:span 3}
  .del-bred{grid-column:span 6;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:end}
  .del-bred .graf-res{grid-column:2;grid-row:1/5;margin:0;justify-self:end;width:100%}
  .del-bred .kallor{grid-column:1}
  .skala-kort{padding:48px;border-radius:40px}
  .skala span{height:120px;font-size:26px}
  .skala span:nth-child(2){height:130px}.skala span:nth-child(3){height:140px}.skala span:nth-child(4){height:150px}.skala span:nth-child(5){height:160px}.skala span:nth-child(6){height:170px}
  .skala{align-items:end;margin:28px 0}
  .amne-co{padding:120px 0}
  .amne-co-grid{grid-template-columns:5fr 7fr;gap:72px;align-items:start}
  .amne-co-side{position:sticky;top:32px}
  .las{padding:96px 0}
  .las-grid{grid-template-columns:repeat(4,1fr);gap:16px}
  .las-kort{padding:26px 24px;min-height:150px;align-content:space-between}
}