/* ============================================================
   KVITTOT — extraknäck.se design direction A
   Thermal receipt · kontoutdrag · Swish-notis. Paper-money world.
   ============================================================ */
:root{
  --paper:      #f4efe4;   /* page stock */
  --paper-hi:   #fdfbf4;   /* receipt stock */
  --paper-dim:  #e9e2cf;   /* section stock, darker */
  --ink:        #1b1712;   /* thermal ink */
  --ink-soft:   #55503f;
  --rule:       rgba(27,23,18,.22);
  --rule-soft:  rgba(27,23,18,.12);

  --swish:      #46b655;   /* fill green */
  --swish-deep: #1e7a33;   /* AA text green on paper */
  --swish-dark: #145425;   /* key shadows */
  --swish-bg:   #175f2b;   /* hook section */
  --swish-pale: #e3f1e0;
  --swish-glow: #8fdf9b;   /* large display text on green */

  --bankid:     #1d5c8f;   /* AA blue on paper */
  --bankid-dark:#123c60;
  --bankid-ink: #16324a;   /* terminal body */
  --lcd:        #cfe0ba;
  --lcd-ink:    #22301a;

  --mono: ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace;
  --disp: "Haettenschweiler","Arial Narrow","Franklin Gothic Medium","Impact",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--mono);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  background:
    radial-gradient(1100px 480px at 78% -8%, rgba(70,182,85,.07), transparent 62%),
    repeating-linear-gradient(0deg, rgba(27,23,18,.022) 0 1px, transparent 1px 4px),
    var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--swish-deep)}
a:focus-visible,button:focus-visible{outline:3px solid var(--bankid);outline-offset:2px;border-radius:2px}
.wrap{width:min(1160px, 100% - 2.25rem);margin-inline:auto}
.disp{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:.94;letter-spacing:.004em}

.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper-hi);padding:.6rem 1rem;z-index:99;font-family:var(--mono)}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- payment-terminal keys (CTAs) ---------- */
.key{
  display:inline-block;font-family:var(--mono);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:.95rem;text-decoration:none;text-align:center;
  padding:.95rem 1.5rem;border-radius:7px;cursor:pointer;border:0;
  background:var(--ink);color:var(--paper-hi);
  box-shadow:0 4px 0 #000, inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .08s ease-out, box-shadow .08s ease-out;
}
.key:hover{filter:brightness(1.12)}
.key:active{transform:translateY(3px);box-shadow:0 1px 0 #000, inset 0 1px 0 rgba(255,255,255,.14)}
.key--green{background:var(--swish-deep);box-shadow:0 4px 0 var(--swish-dark), inset 0 1px 0 rgba(255,255,255,.2)}
.key--green:active{box-shadow:0 1px 0 var(--swish-dark)}
.key--blue{background:var(--bankid);box-shadow:0 4px 0 var(--bankid-dark), inset 0 1px 0 rgba(255,255,255,.2)}
.key--blue:active{box-shadow:0 1px 0 var(--bankid-dark)}
.key--paper{background:var(--paper-hi);color:var(--swish-bg);box-shadow:0 4px 0 rgba(0,0,0,.5)}
.key--paper:active{box-shadow:0 1px 0 rgba(0,0,0,.5)}
.textlink{
  font-family:var(--mono);font-weight:700;font-size:.95rem;color:var(--bankid);
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px;
}
.textlink:hover{color:var(--bankid-dark)}

/* ---------- rubber stamps ---------- */
.stamp{
  position:absolute;z-index:5;pointer-events:none;
  font-family:var(--disp);text-transform:uppercase;color:var(--ink);
  border:3px solid currentColor;border-radius:.4em;
  padding:.32em .55em .28em;line-height:1;text-align:center;
  transform:rotate(var(--tilt,-7deg));
  opacity:.85;
  -webkit-mask-image:repeating-linear-gradient(45deg,#000 0 3px,rgba(0,0,0,.68) 3px 6px);
          mask-image:repeating-linear-gradient(45deg,#000 0 3px,rgba(0,0,0,.68) 3px 6px);
}
.stamp b{display:block;font-size:1.5em;letter-spacing:.06em}
.stamp span{display:block;font-family:var(--mono);font-weight:700;font-size:.62em;letter-spacing:.3em;margin-top:.35em}
.stamp--green{color:var(--swish-deep)}
.stamp--paper{color:var(--paper-hi);opacity:.9}
@media (prefers-reduced-motion: no-preference){
  .stamp{transition:transform .3s cubic-bezier(.22,.9,.34,1), opacity .3s ease-out}
  .stamp:not(.inked){opacity:0;transform:rotate(var(--tilt,-7deg)) scale(1.7)}
}

/* ---------- perforation + torn edges ---------- */
.perf{
  height:14px;
  background:radial-gradient(circle at 9px 7px, var(--perf-bg,var(--paper-dim)) 4px, transparent 4.6px);
  background-size:24px 14px;background-repeat:repeat-x;background-position:center;
}
.riv{
  height:13px;position:relative;z-index:2;
  background:conic-gradient(from 135deg at 50% 0, var(--riv-c,var(--paper)) 90deg, transparent 0) 0 0 / 26px 13px repeat-x;
}

/* ---------- annons strip + header ---------- */
.annons{
  background:var(--ink);color:var(--paper);
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  text-align:center;padding:.45rem .75rem;
}
.annons em{font-style:normal;color:var(--swish-glow)}
header.site{
  position:sticky;top:0;z-index:40;
  background:var(--paper);
  border-bottom:1.5px dashed var(--rule);
}
.site-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.logo{font-size:1.45rem;color:var(--ink);text-decoration:none;display:flex;align-items:baseline;gap:.15em}
.logo .kr{color:var(--swish-deep)}
nav.main{overflow-x:auto;scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
nav.main ul{display:flex;gap:1.4rem;list-style:none;white-space:nowrap}
nav.main a{
  font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:2px dotted transparent;padding-bottom:2px;
}
nav.main a:hover{color:var(--swish-deep);border-bottom-color:var(--swish-deep)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(2.6rem,6vw,5rem) 0 clamp(3rem,6vw,4.5rem)}
.hero-grid{display:grid;gap:2.75rem;align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.12fr .88fr;gap:3.5rem}}
.kicker{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--paper-hi);background:var(--swish-deep);padding:.35rem .7rem;border-radius:3px;
  margin-bottom:1.3rem;
}
h1{font-size:clamp(2.5rem,6.4vw,4.7rem);max-width:13ch}
h1 .grön{color:var(--swish-deep)}
.hero-sub{
  margin-top:1.4rem;max-width:52ch;font-size:.98rem;color:var(--ink-soft);
  border-left:3px solid var(--swish);padding-left:1rem;
}
.hero-sub strong{color:var(--ink)}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem;align-items:center}

/* Swish-notis */
.notis-zon{position:relative;padding:1.25rem .25rem 0}
.notis-zon::before{ /* faded receipt behind the phone notis */
  content:"";position:absolute;inset:-6% 6% 10% 14%;z-index:0;
  background:
    repeating-linear-gradient(0deg, rgba(27,23,18,.06) 0 2px, transparent 2px 14px),
    var(--paper-hi);
  transform:rotate(4deg);
  box-shadow:0 18px 34px -22px rgba(27,23,18,.55);
}
.notis{
  position:relative;z-index:2;max-width:410px;margin-inline:auto;
  background:#fffefa;border-radius:22px;padding:1.05rem 1.15rem;
  box-shadow:0 22px 44px -18px rgba(27,23,18,.4), 0 2px 6px rgba(27,23,18,.12);
  display:flex;gap:.85rem;align-items:flex-start;
  transform:rotate(-1.5deg);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; /* the phone speaks system, not receipt */
}
@media (prefers-reduced-motion: no-preference){
  .notis{transition:transform .55s cubic-bezier(.2,.9,.3,1), opacity .55s ease-out}
  body:not(.pling) .notis{transform:rotate(-1.5deg) translateY(-26px);opacity:0}
}
.notis-badge{
  flex:0 0 46px;height:46px;border-radius:12px;background:var(--swish);
  color:#fff;font-weight:800;font-size:1.35rem;display:grid;place-items:center;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.16);
}
.notis-body{flex:1;min-width:0}
.notis-topp{display:flex;justify-content:space-between;gap:.5rem;font-size:.72rem;color:#8a8577;text-transform:uppercase;letter-spacing:.06em}
.notis-rubrik{font-size:1.12rem;font-weight:700;margin-top:.15rem;color:#171512}
.notis-rubrik b{color:var(--swish-deep)}
.notis-rad{font-size:.88rem;color:#4d493f;margin-top:.1rem}
.notis-caption{
  position:relative;z-index:2;max-width:430px;margin:1.4rem auto 0;
  font-family:var(--serif);font-size:.98rem;line-height:1.6;color:var(--ink-soft);
  padding-left:1.1rem;border-left:2px solid var(--swish-glow);
}

.notis-caption strong{color:var(--ink)}
.stamp-hero{top:-1.4rem;right:clamp(0rem,3vw,2.5rem);--tilt:-8deg;font-size:clamp(.85rem,1.6vw,1.15rem)}

/* ---------- trust strip ---------- */
.trust{background:var(--ink);color:var(--paper);--riv-c:var(--ink)}
.trust ul{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem 2.6rem;padding:1.05rem 0;
  font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.trust li::before{content:"✓ ";color:var(--swish-glow)}

/* ---------- kuponger (categories) ---------- */
.kuponger{padding:clamp(3rem,7vw,5.5rem) 0 clamp(3.4rem,7vw,5.5rem)}
.sekt-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem 1.5rem;margin-bottom:2.2rem}
.sekt-head h2{font-size:clamp(1.9rem,4vw,3rem)}
.sekt-head p{font-size:.85rem;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase}
.kupong-grid{display:grid;gap:1.4rem}
@media(min-width:820px){
  .kupong-grid{grid-template-columns:repeat(4,1fr)}
  .kupong--stor{grid-column:1 / -1}
  .kupong:nth-child(2){grid-column:span 2}
  .kupong:nth-child(4){grid-column:span 2}
  .kupong:nth-child(3),.kupong:nth-child(5){grid-column:span 2}
}
@media(min-width:1080px){
  .kupong:nth-child(2),.kupong:nth-child(3),.kupong:nth-child(4),.kupong:nth-child(5){grid-column:span 1}
}
.kupong{
  position:relative;display:flex;text-decoration:none;color:var(--ink);
  background:
    repeating-linear-gradient(0deg, rgba(27,23,18,.03) 0 1px, transparent 1px 5px),
    var(--paper-hi);
  box-shadow:0 12px 26px -18px rgba(27,23,18,.5), 0 1px 3px rgba(27,23,18,.1);
  border-radius:3px;
}
.kupong:nth-child(odd){transform:rotate(-.4deg)}
.kupong:nth-child(even){transform:rotate(.35deg)}
@media (prefers-reduced-motion: no-preference){
  .kupong{transition:transform .18s ease-out, box-shadow .18s ease-out}
  .kupong:hover{transform:translateY(-4px) rotate(0deg);box-shadow:0 20px 32px -18px rgba(27,23,18,.55)}
}
.stub{
  flex:0 0 3rem;display:flex;align-items:center;justify-content:center;
  border-right:2px dashed var(--rule);position:relative;
}
.stub i{
  font-style:normal;writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:.68rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft);
}
.stub::after{ /* scissors on the tear line */
  content:"✂";position:absolute;top:.35rem;right:-.62rem;font-size:.8rem;color:var(--ink-soft);opacity:.75;
  background:var(--paper-hi);line-height:1;
}
.kupong-body{padding:1.25rem 1.3rem 1.35rem;flex:1}
.kupong-body h3{font-family:var(--disp);text-transform:uppercase;font-size:1.6rem;line-height:.95}
.kupong-body p{font-size:.86rem;color:var(--ink-soft);margin:.55rem 0 .9rem;max-width:46ch}
.kupong-body .gå{font-size:.82rem;font-weight:700;letter-spacing:.05em;color:var(--swish-deep);text-transform:uppercase}
.kupong:hover .gå{text-decoration:underline;text-underline-offset:4px}
.kupong--stor .kupong-body{display:grid;gap:.35rem 2rem;align-content:center}
@media(min-width:820px){
  .kupong--stor .kupong-body{grid-template-columns:auto 1fr auto;align-items:center}
  .kupong--stor .kupong-body p{margin:0}
  .kupong--stor .kupong-body h3{font-size:2.1rem}
}
.kupong--stor .märke{
  justify-self:start;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--swish-deep);border:1.5px solid var(--swish-deep);border-radius:3px;padding:.2rem .5rem;
  margin-top:.4rem;
}

/* ---------- kontoutdrag ---------- */
.utdrag-sektion{background:var(--paper-dim);padding:clamp(3rem,7vw,5.5rem) 0 clamp(3.6rem,7vw,6rem);position:relative}
.utdrag-sektion .sekt-head{justify-content:center;text-align:center;flex-direction:column;align-items:center;gap:.4rem}
.kvitto{
  position:relative;max-width:780px;margin:0 auto;
  background:
    repeating-linear-gradient(0deg, rgba(27,23,18,.028) 0 1px, transparent 1px 5px),
    var(--paper-hi);
  box-shadow:0 30px 50px -30px rgba(27,23,18,.6), 0 2px 5px rgba(27,23,18,.12);
  transform:rotate(-.3deg);
  --perf-bg:var(--paper-dim);
}
.kvitto-inre{padding:1.6rem clamp(1rem,4vw,2.4rem) 2.1rem}
.kvitto-head{text-align:center;border-bottom:2px dashed var(--rule);padding-bottom:1.1rem;margin-bottom:.4rem}
.kvitto-head .disp{font-size:1.7rem}
.kvitto-head p{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-top:.3rem}
.kvitto-head p b{color:var(--ink)}
table.utdrag{width:100%;border-collapse:collapse;font-size:.9rem}
table.utdrag caption{
  caption-side:top;text-align:left;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);padding:.9rem 0 .5rem;
}
table.utdrag th{
  text-align:left;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1.5px solid var(--ink);padding:.5rem .5rem .45rem .25rem;font-weight:700;
}
table.utdrag td{
  padding:.72rem .5rem .72rem .25rem;border-bottom:1px dotted var(--rule);vertical-align:top;
}
table.utdrag td:first-child{font-weight:700}
table.utdrag .not{font-size:.78rem;color:var(--ink-soft)}
tr.svea{background:var(--swish-pale)}
tr.svea td{border-bottom:1px solid var(--swish-deep)}
tr.svea td:first-child{color:var(--swish-bg)}
tr.svea td:first-child::before{content:"► ";color:var(--swish-deep)}
tr.svea .not{color:var(--swish-bg);font-weight:700}
.summa{
  margin-top:1.5rem;border:2px dashed var(--ink);padding:1.05rem 1.15rem;
  display:grid;gap:.3rem;
}
.summa b{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase}
.summa p{font-size:.92rem;line-height:1.6}
.summa p em{font-style:normal;background:linear-gradient(transparent 62%, rgba(70,182,85,.35) 62%)}
.kvitto-cta{margin-top:1.6rem;text-align:center}
.kvitto-cta .små{display:block;margin-top:.7rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.stamp-kvitto{right:-.7rem;bottom:6.5rem;--tilt:6deg;font-size:clamp(.72rem,1.4vw,.95rem)}
/* stacked rows on narrow screens */
@media(max-width:560px){
  table.utdrag thead{position:absolute;left:-9999px}
  table.utdrag tr{display:block;border-bottom:2px dashed var(--rule);padding:.55rem 0}
  table.utdrag td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.22rem .1rem;text-align:right}
  table.utdrag td::before{content:attr(data-l);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;text-align:left;padding-top:.2em}
  tr.svea{display:block;outline:2px solid var(--swish-deep);outline-offset:-1px}
  tr.svea td{border:0}
  .stamp-kvitto{right:.2rem;bottom:10rem}
}

/* ---------- swish hook ---------- */
.hook{background:var(--swish-bg);color:#eef6ea;position:relative;--riv-c:var(--paper-dim)}
.hook .riv-top{--riv-c:var(--paper-dim)}
.hook-grid{display:grid;gap:2.5rem;padding:clamp(3rem,7vw,5.5rem) 0;align-items:center}
@media(min-width:900px){.hook-grid{grid-template-columns:1.05fr .95fr;gap:4rem}}
.hook .kicker{background:var(--paper-hi);color:var(--swish-bg)}
.hook h2{font-size:clamp(2.1rem,4.6vw,3.6rem);max-width:16ch}
.hook p.stor{margin-top:1.3rem;font-size:1rem;max-width:50ch;line-height:1.7}
.hook p.stor b{color:#fff}
.hook p.stor .rakt{background:rgba(253,251,244,.16);padding:.05em .25em}
.hook-cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.hook-andra{margin-top:1.6rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#bcd8b9}
.prislapp{position:relative;text-align:center;padding:2rem 0}
.prislapp .fran{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:#bcd8b9}
.prislapp .belopp{font-size:clamp(5rem,13vw,9.5rem);color:var(--swish-glow);display:block;margin:.05em 0}
.prislapp .belopp small{font-size:.35em;vertical-align:.9em;letter-spacing:0}
.prislapp .under{font-size:.82rem;color:#dcecd8;border-top:1.5px dashed rgba(253,251,244,.4);display:inline-block;padding-top:.7rem;max-width:34ch}
.stamp-hook{top:.2rem;right:clamp(.2rem,4vw,3rem);--tilt:8deg;font-size:.8rem}

/* ---------- calculator terminal ---------- */
.kalkyl{padding:clamp(3.2rem,7vw,5.5rem) 0}
.kalkyl-grid{display:grid;gap:2.75rem;align-items:center}
@media(min-width:900px){.kalkyl-grid{grid-template-columns:1fr auto;gap:5rem}}
.kalkyl h2{font-size:clamp(2rem,4.4vw,3.2rem);max-width:14ch}
.kalkyl .brop{margin-top:1.2rem;max-width:50ch;font-size:.95rem;color:var(--ink-soft)}
.kalkyl .brop b{color:var(--ink)}
.kalkyl-cta{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.terminal{
  width:min(330px,100%);margin-inline:auto;background:var(--bankid-ink);
  border-radius:20px;padding:1.15rem 1.15rem 1.35rem;
  box-shadow:0 30px 46px -24px rgba(22,50,74,.75), inset 0 1px 0 rgba(255,255,255,.12);
}
.terminal-label{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:#9db8cc;text-align:center;margin-bottom:.8rem}
.lcd{
  background:var(--lcd);border-radius:8px;padding:.75rem .9rem .6rem;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.35);
  font-family:var(--mono);color:var(--lcd-ink);
}
.lcd-rad{font-size:1.45rem;font-weight:700;text-align:right;min-height:1.5em;overflow:hidden;white-space:nowrap}
.lcd-sub{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;opacity:.75;text-align:right;margin-top:.15rem}
.knappar{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-top:1rem}
.knappar button, .knappar a{
  font-family:var(--mono);font-weight:700;font-size:1.05rem;
  padding:.72rem 0;border-radius:6px;border:0;cursor:pointer;text-align:center;text-decoration:none;
  background:#e8eef4;color:var(--ink);
  box-shadow:0 3px 0 #90a4b5, inset 0 1px 0 #fff;
}
.knappar button:active, .knappar a:active{transform:translateY(2px);box-shadow:0 1px 0 #90a4b5}
.knappar .k-c{background:#f3ddd6;color:#8c2f1b;box-shadow:0 3px 0 #bf8d80, inset 0 1px 0 #fff}
.knappar .k-ok{background:var(--swish);color:#fff;box-shadow:0 3px 0 var(--swish-dark), inset 0 1px 0 rgba(255,255,255,.35)}

/* ---------- footer ---------- */
footer.slut{background:var(--ink);color:var(--paper);--riv-c:var(--paper);text-align:center}
.slut-inre{padding:clamp(2.8rem,6vw,4.5rem) 0 3rem;display:grid;justify-items:center;gap:1.5rem}
.slut .tack{font-size:.95rem;letter-spacing:.28em;text-transform:uppercase}
.slut .doktrin{font-size:.85rem;color:#c9c2ae;max-width:44ch}
.slut .doktrin b{color:var(--swish-glow)}
.slut nav ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem 2.2rem}
.slut nav a{color:var(--paper);font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:5px}
.slut nav a:hover{color:var(--swish-glow)}
.slut .annonsrad{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#a49d88;border:1.5px dashed rgba(244,239,228,.35);padding:.5rem 1rem}
.streckkod{
  width:230px;height:46px;
  background:
    repeating-linear-gradient(90deg,
      var(--paper) 0 2px, transparent 2px 5px,
      var(--paper) 5px 6px, transparent 6px 11px,
      var(--paper) 11px 14px, transparent 14px 16px,
      var(--paper) 16px 17px, transparent 17px 22px);
}
.slut .kod{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:#a49d88;margin-top:-.9rem}

@media(max-width:480px){
  .site-inner{flex-direction:column;align-items:flex-start;gap:.5rem;padding-bottom:.55rem}
  nav.main{width:100%}
  .hero-cta .key{width:100%}
  .hook-cta .key{width:100%}
}
/* ---------- NEJ-graft (from C, receipt idiom) — anti-hype trust moment ---------- */
.nej{background:var(--paper-dim);padding:clamp(2.2rem,5vw,3.5rem) 0;text-align:center}
.nej .kicker{color:var(--ink-soft)}
.nej-rad{display:inline-flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center;margin:.6rem 0 1rem}
.nej-fejk{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.8rem,5.2vw,3.4rem);color:var(--ink-soft);
  position:relative;opacity:.72}
.nej-fejk::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.16em;background:#c0392b;transform:rotate(-3deg)}
.nej-stamp{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.6rem,4.6vw,3rem);color:var(--paper-hi);
  background:#c0392b;padding:.05em .38em;border-radius:.14em;transform:rotate(-4deg);box-shadow:0 3px 0 #7c241a}
.nej p.nej-sub{max-width:52ch;margin:0 auto 1.2rem;color:var(--ink-soft)}

/* ---------- ARTICLE READING LAYER (serif body; mono stays for data) ---------- */
:root{ --serif:"Georgia","Iowan Old Style","Times New Roman",serif; }
.article{padding:clamp(1.4rem,3vw,2.2rem) 0 0}
.article .wrap{width:min(760px,100% - 2.25rem)}
.article-head{margin-bottom:1.8rem}
.article-head .kicker{color:var(--swish-deep)}
.article-head h1{font-family:var(--disp);text-transform:uppercase;line-height:1.0;
  font-size:clamp(1.7rem,4.4vw,2.6rem);margin:.5rem 0 .7rem;max-width:22ch;letter-spacing:.004em}
.article-head .meta{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.article-body{font-family:var(--serif);font-size:1.075rem;line-height:1.72;color:#241f17}
.article-body h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.4rem,3.5vw,2rem);
  margin:2.2rem 0 .7rem;letter-spacing:.01em;line-height:1.02}
.article-body h3{font-family:var(--mono);font-weight:700;font-size:1.05rem;margin:1.6rem 0 .5rem;letter-spacing:.01em}
.article-body p{margin:0 0 1.05rem}
.article-body a{color:var(--swish-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.article-body ul,.article-body ol{margin:0 0 1.1rem 1.2rem}
.article-body li{margin:.3rem 0}
.article-body table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.9rem;margin:1.4rem 0;
  background:var(--paper-hi);border:1px solid var(--rule)}
.article-body th,.article-body td{padding:.6rem .7rem;border-bottom:1px dashed var(--rule-soft);text-align:left;vertical-align:top}
.article-body th{background:var(--paper-dim);text-transform:uppercase;font-size:.72rem;letter-spacing:.08em}
.article-body img{border:1px solid var(--rule);background:var(--paper-hi);padding:.4rem;border-radius:3px}
.article-body blockquote{border-left:3px solid var(--swish-deep);margin:1.2rem 0;padding:.4rem 0 .4rem 1.1rem;color:var(--ink-soft)}
.article-body .wp-block-buttons,.article-body .wp-block-button{margin:1.2rem 0}

/* ---------- jämför-hub ---------- */
.jamfor .jf-lede{font-family:var(--serif);font-size:1.1rem;color:var(--ink-soft);max-width:56ch}
.jf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(1.2rem,3vw,2rem);margin:2rem 0 1rem}
.jf-kol{background:var(--paper-hi);border:1px solid var(--rule);border-radius:4px;padding:1.2rem 1.3rem}
.jf-kol h2{font-size:1.1rem;text-transform:uppercase;letter-spacing:.02em;margin-bottom:.7rem;color:var(--ink)}
.jf-kol ul{list-style:none}
.jf-kol li{border-bottom:1px dashed var(--rule-soft)}
.jf-kol li:last-child{border-bottom:0}
.jf-kol a{display:block;padding:.5rem 0;font-family:var(--mono);font-weight:700;font-size:.92rem;color:var(--swish-deep);text-decoration:none}
.jf-kol a:hover{color:var(--swish-dark);padding-left:.3rem;transition:padding .12s}

/* ---------- kategori-arkiv ---------- */
.kat-lista{list-style:none;margin-top:1.5rem}
.kat-lista li{border-bottom:1px dashed var(--rule)}
.kat-lista a{display:block;padding:1rem .2rem;text-decoration:none}
.kat-lista a:hover{background:var(--paper-hi)}
.kat-t{display:block;font-family:var(--disp);text-transform:uppercase;font-size:1.15rem;color:var(--ink);letter-spacing:.01em}
.kat-x{display:block;font-family:var(--serif);font-size:.95rem;color:var(--ink-soft);margin-top:.2rem}

/* ============================================================
   --ek-* TRANSLATION LAYER — maps the WordPress theme variables
   the article content relies on into the KVITTOT receipt palette.
   Keeps every inline-styled card/table/badge/button structurally
   intact while recolouring it to the paper-money world.
   ============================================================ */
.article-body{
  --ek-bg:            var(--paper);
  --ek-bg-warm:       var(--paper-hi);
  --ek-bg-soft:       var(--paper-dim);
  --ek-bg-green:      var(--swish-pale);
  --ek-surface:       var(--paper-hi);
  --ek-text:          var(--ink);
  --ek-text-main:     var(--ink);
  --ek-text-mid:      var(--ink-soft);
  --ek-text-light:    var(--ink-soft);
  --ek-border:        var(--rule);
  --ek-border-light:  var(--rule-soft);
  --ek-forest:        var(--swish-deep);
  --ek-forest-deep:   var(--swish-bg);
  --ek-amber:         var(--swish-deep);   /* CTAs → Swish green, not amber */
  --ek-amber-light:   var(--swish-pale);
  --ek-sage-light:    var(--swish-pale);
  --ek-radius:        4px;
  --ek-radius-pill:   999px;
  --ek-font-display:  var(--disp);
  --ek-font-body:     var(--serif);
}
/* structural safety nets — some blocks assumed theme defaults */
.article-body .ek-card{
  background:var(--paper-hi)!important;border:1px solid var(--rule);
  border-radius:4px;box-shadow:0 2px 10px rgba(27,23,18,.05);
}
.article-body .ek-card-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.1rem;margin:1.6rem 0;
}
.article-body .ek-section-header{margin:2.2rem 0 1rem}
.article-body .ek-section-header h2{margin:0}
.article-body .ek-compare-table{overflow-x:auto;margin:1.4rem 0;
  border:1px solid var(--rule);border-radius:4px;background:var(--paper-hi)}
.article-body .ek-compare-table table{margin:0;border:0}
.article-body .ek-compare-table thead tr{background:var(--swish-bg)!important;color:#fff!important}
.article-body .ek-compare-table th{color:#fff!important;border:0}
.article-body .ek-trust{background:var(--paper-dim);border-radius:4px;
  padding:.9rem 1rem!important;margin:1.4rem 0!important}
.article-body .ek-trust span{color:var(--ink)!important;font-family:var(--mono);
  font-size:.82rem!important;letter-spacing:.02em}
.article-body .ek-btn-primary{
  background:var(--swish-deep)!important;color:#fff!important;
  border-radius:6px!important;font-family:var(--mono)!important;font-weight:700!important;
  box-shadow:0 3px 0 var(--swish-dark);transition:filter .1s}
.article-body .ek-btn-primary:hover{filter:brightness(1.1)}
/* any leftover white text on light bg → force readable */
.article-body [style*="color:white"],.article-body [style*="color:#fff"]{color:var(--ink)}
.article-body .ek-card [style*="color:white"],.article-body .ek-btn-primary,
.article-body .ek-compare-table thead [style*="color:white"],
.article-body [style*="var(--ek-forest"] [style*="color:white"]{color:#fff}
/* badges (🏆 Bäst) — amber pill became green pill */
.article-body span[style*="background:var(--ek-amber)"]{background:var(--swish-deep)!important;color:#fff!important}

/* ============================================================
   POLISH PASS 2 — Josef's tweaks (2026-07-12)
   ============================================================ */
/* 1. subpage headers centered (article masthead) */
.article-head{text-align:center}
.article-head h1{margin-inline:auto}
.article .article-head .kicker{display:block}

/* 2. dark-green hero: highlighted (ek-forest/amber) text was unreadable → glow */
.article-body [style*="ek-forest-deep"] em,
.article-body [style*="ek-forest-deep"] [style*="var(--ek-forest)"],
.article-body [style*="ek-forest-deep"] [style*="var(--ek-amber)"],
.article-body [style*="forest-deep"] [style*="1e7a33"]{ color:var(--swish-glow)!important }

/* 3. pills must never wrap into circles (999px radius + tall = circle) */
.article-body a[style*="radius-pill"]{ white-space:nowrap; border-radius:999px }
.article-body div[style*="justify-content: center"][style*="flex-wrap"]{ align-items:center; row-gap:12px }

/* 4. skatt calculator (.ek-sc-*) → clean readable light card */
.article-body [class*="ek-sc"]{ color:var(--ink) }
.article-body .ek-sc, .article-body [class*="ek-sc-calc"], .article-body [class*="ek-sc-wrap"]{
  background:var(--paper-hi)!important; border:1px solid var(--rule); border-radius:6px;
  padding:clamp(1.2rem,3vw,2rem)!important; color:var(--ink)!important }
.article-body [class*="ek-sc"] label{ color:var(--ink)!important; font-family:var(--mono); font-weight:700; font-size:.85rem }
.article-body [class*="ek-sc"] input,
.article-body [class*="ek-sc"] select{
  background:#fff!important; color:var(--ink)!important; border:1px solid var(--rule)!important;
  border-radius:4px; padding:.6rem .7rem; font:inherit; width:100% }
.article-body [class*="ek-sc"] select option{ background:#fff; color:var(--ink) }
.article-body [class*="ek-sc-results"] > div,.article-body [class*="ek-sc-result"]{
  background:var(--paper-dim)!important; color:var(--ink)!important; border:1px solid var(--rule) }
.article-body [class*="ek-sc"] [style*="color:white"]{ color:var(--ink)!important }
.article-body [class*="ek-sc"] strong{ color:var(--swish-deep)!important }

/* 5. footer: breathing room on top + separated nav links */
footer.slut{ padding-top:clamp(2.6rem,6vw,4rem) }
footer.slut .slut-nav{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.2rem .9rem; margin:1rem 0 }
footer.slut .slut-nav .sep{ color:var(--swish-glow); opacity:.5 }

/* 6. swish notis caption — a proper receipt note (less odd) */
.notis-caption{
  background:var(--paper-hi); border:1px solid var(--rule); border-left:3px solid var(--swish);
  border-radius:4px; padding:.9rem 1.1rem!important; box-shadow:0 2px 8px rgba(27,23,18,.05);
  max-width:430px; text-align:left }