/* Ratum — delad design + tillgänglighets-CSS. En sanning för alla sidor. */
:root{
  --navy:#14315f; --navy-dark:#0f2447;
  --ink:#1a2230; --muted:#4a5160; --line:#d8dde6;
  --bg:#ffffff; --soft:#f6f4ee; --soft2:#efece3;
  --link:#1d4f86; --accent-soft:#cdddf0;
}
*{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:1.125rem;line-height:1.65}
.wrap{max-width:64rem;margin:0 auto;padding:0 1.5rem}
.narrow{max-width:44rem;margin:0 auto;padding:0 1.5rem}
a{color:var(--link);text-underline-offset:.15em;overflow-wrap:anywhere}
a:hover{text-decoration-thickness:2px}
p,li{overflow-wrap:break-word}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto;color:var(--navy)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:0;top:-3.5rem;background:var(--navy);color:#fff;
  padding:.75rem 1rem;z-index:10;text-decoration:none;transition:top .15s}
.skip:focus{top:0}
@media (prefers-reduced-motion:reduce){.skip{transition:none}}

.topbar{height:.35rem;background:var(--navy)}
header{border-bottom:1px solid var(--line);background:var(--bg)}
.bar{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;align-items:center;padding:1rem 0}
.brand{font-weight:700;font-size:1.2rem;letter-spacing:-.01em;color:var(--navy);
  text-decoration:none}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin:0;padding:0}
nav a{color:var(--muted);text-decoration:none;display:inline-block;padding:.5rem .15rem}
nav a:hover,nav a:focus-visible{color:var(--navy);text-decoration:underline}
nav a[aria-current="page"]{color:var(--navy);font-weight:600;
  text-decoration:underline;text-decoration-thickness:2px}

main{padding:0}
section{padding:3.5rem 0;border-bottom:1px solid var(--line)}
section.alt{background:var(--soft)}
section:last-of-type{border-bottom:0}
.page-header{background:var(--soft);border-bottom:1px solid var(--line);padding:3rem 0 2.5rem}
h1{font-size:2.3rem;line-height:1.18;letter-spacing:-.02em;margin:0 0 .4em}
h2{font-size:1.6rem;line-height:1.25;letter-spacing:-.01em;margin:0 0 .7em}
h3{font-size:1.15rem;margin:1.5em 0 .3em}
p{margin:0 0 1em;max-width:42rem}
.lead{font-size:1.3rem;color:var(--ink)}
.sub{color:var(--muted)}
strong{color:var(--ink)}

.hero{background:var(--soft);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;gap:2rem;align-items:center}
.hero img{border-radius:10px;border:1px solid var(--line)}
.cta{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;
  font-weight:600;padding:.9rem 1.5rem;border-radius:6px;min-height:44px;margin:.6rem 0}
.cta:hover{background:var(--navy-dark)}

.chain{background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:1.2rem 1.4rem;margin:1.3em 0;max-width:42rem}
.chain ol{margin:.3em 0;padding-left:1.3em}
.chain li{margin:.4em 0}
ul.plain{padding-left:1.2em;max-width:42rem}
ul.plain li{margin:.45em 0}

.tiers{display:grid;gap:1rem;margin:1.4em 0}
.tier{background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:1.2rem 1.3rem}
.tier h3{margin:.1em 0 .3em;color:var(--navy)}
.tier .no{color:var(--muted);font-size:.97rem;margin:0}
.intyg-grid{display:grid;gap:2rem;align-items:start}
.intyg-grid img{border-radius:10px;border:1px solid var(--line)}
.hero-grid>*,.intyg-grid>*{min-width:0}
.price{font-size:1.5rem;font-weight:700;color:var(--navy);margin:.6em 0 .2em}

.steps{counter-reset:step;list-style:none;padding:0;max-width:42rem}
.steps li{position:relative;padding:0 0 1.2em 3rem;margin:0}
.steps li::before{counter-increment:step;content:counter(step);
  position:absolute;left:0;top:0;width:2rem;height:2rem;border-radius:50%;
  background:var(--navy);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:1rem}

.faq{border:1px solid var(--line);border-radius:10px;background:var(--bg);
  margin:.8em 0;max-width:46rem}
.faq summary{cursor:pointer;padding:1rem 1.2rem;font-weight:600;color:var(--navy);
  list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;font-weight:700;font-size:1.3rem;
  line-height:1}
.faq[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:3px solid var(--navy);outline-offset:-3px}
.faq .body{padding:0 1.2rem 1.1rem}
.faq .body p{margin:.2em 0 .6em}

address{font-style:normal;color:#c2cfe2;margin:1em 0 0}
.contact a{display:inline-block;padding:.45rem 0;font-weight:600}

footer{background:var(--navy);color:#dde6f2;padding:2.75rem 0;font-size:1rem}
footer h2{color:#fff;font-size:1.15rem;margin:0 0 .4em}
footer a{color:#fff;display:inline-block;padding:.55rem 0;text-underline-offset:.15em}
footer address a{display:inline}
footer .legal{margin-top:1.1em;color:#c2cfe2;font-size:.95rem}

.tier.feat{border-color:var(--navy);border-width:2px}
.tier .pris{font-size:1.35rem;font-weight:700;color:var(--navy);margin:.3em 0}
.tier .per{color:var(--muted);font-size:.97rem}
dl.spec{margin:1.2em 0;max-width:42rem}
dl.spec div{display:flex;flex-wrap:wrap;gap:.2rem 1rem;padding:.6rem 0;
  border-bottom:1px solid var(--line)}
dl.spec dt{font-weight:600;color:var(--navy);flex:0 0 14rem}
dl.spec dd{margin:0;flex:1 1 16rem}
.statusbox{border:2px solid var(--navy);border-radius:10px;padding:1.2rem 1.4rem;
  background:var(--bg);margin:1.3em 0;max-width:42rem}
.statusbox .stat{display:inline-block;font-weight:700;color:#0f4d2e;
  background:#e3f3ea;border:1px solid #aacfb9;border-radius:6px;
  padding:.25rem .7rem;margin:0 0 .5em}
.statusbox .stat.review{color:#6a4b00;background:#fbf2da;border-color:#d8c389}
.statusbox .stat.revoked{color:#7a1f1f;background:#f7e3e3;border-color:#d8a0a0}
.example-note{background:var(--soft2);border:1px solid var(--line);
  border-radius:8px;padding:.9rem 1.1rem;margin:1.2em 0;color:var(--muted)}
.embed{background:#0f2447;color:#eaf0f8;border-radius:8px;padding:1rem 1.1rem;
  overflow-x:auto;font-size:.95rem;line-height:1.5;max-width:42rem}
.embed code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre;color:#eaf0f8}
.ratum-badge{display:inline-flex;align-items:center;gap:.6rem;
  text-decoration:none;border:1px solid var(--line);border-radius:8px;
  padding:.5rem .8rem;background:var(--bg);color:var(--ink);max-width:18rem}
.ratum-badge:hover{border-color:var(--navy)}
.ratum-badge .rb-mark{display:flex;align-items:center;justify-content:center;
  width:2.1rem;height:2.1rem;border-radius:50%;background:var(--navy);
  color:#fff;font-weight:700;flex:0 0 auto}
.ratum-badge .rb-txt{font-size:.9rem;line-height:1.3;font-weight:600;color:var(--navy)}
.ratum-badge .rb-txt small{display:block;font-weight:400;color:var(--muted);
  font-size:.82rem}
@media (min-width:56rem){
  .hero-grid{grid-template-columns:1.05fr .95fr}
  .tiers{grid-template-columns:1fr 1fr 1fr}
  .intyg-grid{grid-template-columns:1.1fr .9fr}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}