/* Glad stil v2 för undersidorna, 13/10 2026 (Tobbe: "se till att undersidorna får samma stil")
   Samma formspråk som startsidan: Anton-rubriker, turkos topp, svart kant + förskjuten skugga. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/css/fonts/anton.woff2) format('woff2')}
:root{--g-ink:#0f172a;--g-teal:#0d9488;--g-yel:#facc15;--g-red:#e11d48;--g-org:#f97316;--g-pur:#7c3aed;--g-anton:'Anton',Impact,'Arial Narrow Bold',sans-serif}

/* Topp */
body .page-hero{background:radial-gradient(circle at 7% 22%,rgba(250,204,21,.6) 0 7px,transparent 8px),radial-gradient(circle at 52% 90%,rgba(244,114,182,.7) 0 6px,transparent 7px),radial-gradient(circle at 93% 14%,rgba(255,255,255,.6) 0 5px,transparent 6px),linear-gradient(125deg,#0f766e 0%,#0d9488 40%,#14b8a6 65%,#7c3aed 135%);border-bottom:6px solid var(--g-yel);color:#fff}
body .page-hero::after{opacity:.12}
body .page-hero h1,body .company-hero h1{font-family:var(--g-anton);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1.02;text-wrap:balance}
body .page-hero h1{color:#fff;text-shadow:4px 4px 0 var(--g-ink);font-size:clamp(2.3rem,6vw,4rem)}
body .company-hero h1{color:var(--g-ink);font-size:clamp(2rem,5vw,3.2rem)}
body .company-hero{background:#fff;border:3px solid var(--g-ink);border-radius:18px;box-shadow:8px 8px 0 var(--g-yel);padding:22px}
body .page-hero .lead,body .page-hero p{color:#e6fffb}
body .page-hero a{color:#fde047}
body .page-hero img:not([src*="flags"]),body .company-hero .company-logo{background:#fff;border:3px solid var(--g-ink);border-radius:14px;box-shadow:6px 6px 0 var(--g-ink);padding:6px}
body .page-hero .eat-meta,body .page-hero .eat-meta *{color:#ccfbf1!important}
body .rating-box{border:3px solid var(--g-ink)!important;box-shadow:6px 6px 0 var(--g-yel)!important;border-radius:14px!important;background:var(--g-ink)!important}

/* Rubriker i innehållet */
body .content h2,body .container>h2,body section h2,body .card>h2{font-family:var(--g-anton);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;font-size:clamp(1.6rem,3.6vw,2.3rem);color:var(--g-ink)}
body .content h2::after{content:"";display:block;width:80px;height:6px;border-radius:3px;margin-top:8px;background:linear-gradient(90deg,var(--g-red) 0 25%,var(--g-yel) 25% 50%,var(--g-teal) 50% 75%,var(--g-pur) 75%)}
body .content h3{font-weight:900;color:var(--g-ink)}
body .breadcrumb a{font-weight:700}

/* Knappar */
body .cta-box .btn,body .inline-cta a,body .top-buy-btn,body .btn{background:var(--g-yel)!important;color:var(--g-ink)!important;border:3px solid var(--g-ink)!important;border-radius:14px!important;box-shadow:5px 5px 0 var(--g-ink)!important;font-weight:800}
body .cta-box .btn:hover,body .inline-cta a:hover,body .top-buy-btn:hover,body .btn:hover{transform:translate(-2px,-2px)!important;box-shadow:7px 7px 0 var(--g-ink)!important}
body .inline-cta-soft a{background:#fff!important}

/* Kort och rutor: tjock kant + färgad skugga */
body .card,body .cta-box,body .related-card,body .faq-item,body .legal-card,body .quick-answer,body .callout,body .not-for-box,body .realworld-block,body .methodology-block,body .top-buy,body .pros-cons>div{border:3px solid var(--g-ink)!important;border-radius:16px!important;box-shadow:6px 6px 0 var(--g-teal)}
body .cta-box{background:#fef9c3!important;box-shadow:8px 8px 0 var(--g-red)}
body .quick-answer{box-shadow:6px 6px 0 var(--g-yel)}
body .callout{background:#ede9fe!important;box-shadow:6px 6px 0 var(--g-pur)}
body .not-for-box{background:#ffedd5!important;box-shadow:6px 6px 0 var(--g-org)}
body .pros-cons>div:first-child{box-shadow:6px 6px 0 var(--g-teal)}
body .pros-cons>div:last-child{box-shadow:6px 6px 0 var(--g-red)}
body .related-card:nth-child(4n+2),body .card:nth-child(4n+2),body .faq-item:nth-child(4n+2){box-shadow:6px 6px 0 var(--g-org)}
body .related-card:nth-child(4n+3),body .card:nth-child(4n+3),body .faq-item:nth-child(4n+3){box-shadow:6px 6px 0 var(--g-pur)}
body .related-card:nth-child(4n),body .card:nth-child(4n),body .faq-item:nth-child(4n){box-shadow:6px 6px 0 var(--g-red)}
body .related-card:hover{transform:translate(-2px,-2px)}
body .faq-item{overflow:visible}
body .faq-item summary{font-weight:800}
body .realworld-item{border:2px solid var(--g-ink)!important;border-top:5px solid var(--g-teal)!important;border-radius:12px}

/* Rutor inne i rutor: lugnare */
body .card .card,body .card .pros-cons>div,body .card .not-for-box,body .card .callout,body .card .realworld-block,body .card .quick-answer,body .card .cta-box{border-width:2px!important;box-shadow:none!important}

/* Tabeller */
body .content table{border:3px solid var(--g-ink);border-radius:14px;border-collapse:separate;border-spacing:0;overflow:hidden}
body .content table th{background:var(--g-ink)!important;color:#fde047!important;text-transform:uppercase;letter-spacing:.04em;font-size:.8rem}

/* Bakgrund med prickar så sidan inte blir kritvit */
body .content{background-image:radial-gradient(#e2e8f0 1.2px,transparent 1.2px);background-size:22px 22px}

@media(max-width:600px){body .page-hero h1,body .company-hero h1{text-shadow:3px 3px 0 var(--g-ink)}body .card,body .related-card,body .faq-item,body .cta-box{box-shadow:4px 4px 0 var(--g-teal)}}

/* ===== Grafikkomponenter (13/10 2026) - används av diagram på undersidorna =====
   .g-fig            ram runt ett diagram (svart kant, gul skugga)
   .g-fig-h/.g-fig-sub  rubrik + underrad
   .g-bars > .g-row > b + .g-track > .g-bar[style=width:x%;background:..]   stapeldiagram
   .g-stats > .g-stat > em + span    siffertavlor
   .g-rings > .g-ring > svg + b + span   ringdiagram
   .g-steps > .g-step > em + b + span    tidslinje/steg
   .g-icons > .g-ic > i(svg) + b + span  ikonrutor
   .g-img (figure) + .g-img-wide/.g-img-r/.g-img-l/.g-img-sq   bilder i olika storlekar */
.g-fig{border:3px solid var(--g-ink);border-radius:18px;box-shadow:8px 8px 0 var(--g-yel);background:#fff;padding:22px 22px 18px;margin:1.6rem 0 2rem;clear:both}
.g-fig-h{font-family:var(--g-anton);text-transform:uppercase;font-size:1.45rem;line-height:1.1;color:var(--g-ink);margin:0 0 4px}
.g-fig-sub{font-size:.85rem;color:#475569;margin:0 0 16px}
.g-row{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:12px;align-items:center;margin-bottom:10px}
.g-row>b{font-size:.9rem;color:var(--g-ink);line-height:1.25}
.g-track{position:relative;height:34px;background:#f1f5f9;border-radius:9px;border:2px solid var(--g-ink)}
.g-bar{height:100%;min-width:10px;border-radius:7px;display:flex;align-items:center;justify-content:flex-end;padding:0 8px;font-family:var(--g-anton);font-size:1rem;letter-spacing:.02em;color:var(--g-ink);white-space:nowrap;background:var(--g-teal)}
.g-bar.g-out{justify-content:flex-start;padding:0}
.g-bar.g-out span{position:relative;left:calc(100% + 8px)}
.g-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.g-stat{border:2.5px solid var(--g-ink);border-radius:14px;padding:14px 14px 12px;background:#f0fdfa}
.g-stat:nth-child(4n+2){background:#fef9c3}.g-stat:nth-child(4n+3){background:#ede9fe}.g-stat:nth-child(4n){background:#ffe4e6}
.g-stat em{display:block;font-style:normal;font-family:var(--g-anton);font-size:1.9rem;line-height:1;color:var(--g-ink)}
.g-stat span{display:block;font-size:.82rem;color:#334155;margin-top:6px;line-height:1.35}
.g-rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;text-align:center}
.g-ring svg{width:100%;max-width:170px;height:auto}
.g-ring b{display:block;font-size:.95rem;color:var(--g-ink);margin-top:4px}
.g-ring span{font-size:.82rem;color:#475569}
.g-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.g-step{border:2.5px solid var(--g-ink);border-radius:14px;padding:14px 12px;background:#f0fdfa}
.g-step:nth-child(4n+2){background:#fef9c3}.g-step:nth-child(4n+3){background:#ede9fe}.g-step:nth-child(4n){background:#ffe4e6}
.g-step em{font-style:normal;font-family:var(--g-anton);font-size:1.5rem;color:var(--g-ink);display:block;line-height:1}
.g-step b{display:block;font-size:.88rem;margin:6px 0 2px;color:var(--g-ink)}
.g-step span{font-size:.8rem;color:#475569}
.g-icons{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.g-ic{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 12px;align-items:start;border:2.5px solid var(--g-ink);border-radius:14px;padding:12px;background:#fff}
.g-ic i{grid-row:span 2;width:48px;height:48px;border-radius:14px;border:2.5px solid var(--g-ink);display:flex;align-items:center;justify-content:center;background:var(--g-teal)}
.g-ic:nth-child(4n+2) i{background:var(--g-org)}.g-ic:nth-child(4n+3) i{background:var(--g-pur)}.g-ic:nth-child(4n) i{background:var(--g-red)}
.g-ic i svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.g-ic b{font-size:.92rem;color:var(--g-ink)}
.g-ic span{font-size:.82rem;color:#475569;line-height:1.4}
.g-img{margin:1.4rem 0 1.8rem}
.g-img img{display:block;width:100%;height:auto;border:3px solid var(--g-ink);border-radius:16px;box-shadow:7px 7px 0 var(--g-teal)}
.g-img figcaption{font-size:.8rem;color:#475569;margin-top:10px}
.g-img-wide img{aspect-ratio:16/7;object-fit:cover;box-shadow:8px 8px 0 var(--g-yel)}
.g-img-r{float:right;width:42%;margin:.3rem 0 1rem 1.4rem}
.g-img-l{float:left;width:42%;margin:.3rem 1.4rem 1rem 0}
.g-img-l img{box-shadow:7px 7px 0 var(--g-org)}
.g-img-sq{float:right;width:240px;margin:.3rem 0 1rem 1.4rem}
.g-img-sq img{aspect-ratio:1/1;object-fit:cover;border-radius:50%;box-shadow:6px 6px 0 var(--g-pur)}
.content h2{clear:both}
@media(max-width:600px){.g-row{grid-template-columns:1fr;gap:4px}.g-fig{box-shadow:5px 5px 0 var(--g-yel);padding:16px}.g-img-r,.g-img-l{float:none;width:100%;margin:1rem 0}.g-img-sq{width:160px}}