@import url("fonts.css");

/* ===== Palvelukortti – suomijournal.fi =====
   Formspråk: näkymä. Mörk «palkki» upptill, ljus arbetsyta, mono-etiketter, statusprickar.
*/
:root{
  --pohja:#EEF1F5;       /* kall off-white */
  --kortti:#FFFFFF;
  --muste:#0E1F2E;       /* nära svart petrol */
  --muste2:#3A4F61;
  --himmea:#6B7E8F;
  --viiva:#D3DBE3;
  --viiva2:#E6EBF0;
  --acc:#1F6F8B;         /* petrol accent */
  --acc-t:#15536A;
  --acc2:#C2410C;        /* varningsorange (länk hover, markering) */
  --ok:#2E8B57;
  --odota:#C98A00;
  --vika:#C0392B;
  --keltainen:#FFF3D1;
  --r:6px;
  --r2:12px;
  --mitta:72rem;
  --teksti:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pohja);color:var(--muste);font:400 1.0625rem/1.65 var(--teksti);
  background-image:linear-gradient(var(--viiva2) 1px,transparent 1px);background-size:100% 2.75rem;background-attachment:fixed}
img{max-width:100%;height:auto}
a{color:var(--acc-t);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--acc2)}
h1,h2,h3,h4{font-weight:800;line-height:1.2;letter-spacing:-.015em;margin:0 0 .5rem}
h1{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.6rem)}
h2{font-size:clamp(1.3rem,1.05rem + 1vw,1.7rem);margin-top:2.25rem}
h3{font-size:1.1rem;margin-top:1.5rem}
p,ul,ol,dl,table{margin:0 0 1rem}
.ohita{position:absolute;left:-9999px}
.ohita:focus{left:1rem;top:1rem;z-index:50;background:var(--muste);color:#fff;padding:.6rem 1rem;border-radius:var(--r)}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}

/* ---- palkki (dark top bar) ---- */
.palkki{background:var(--muste);color:#E9F0F6;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 7px)}
.palkki__sisa{max-width:var(--mitta);margin:0 auto;padding:.9rem 1rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.merkki{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:inherit}
.merkki__ruutu{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:var(--r);
  background:var(--acc);color:#fff;font:700 .9rem/1 var(--mono);letter-spacing:.06em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
img.merkki__ruutu{width:2.4rem;height:2.4rem;background:transparent;box-shadow:none;display:block}
.merkki__t{display:flex;flex-direction:column;line-height:1.15}
.merkki__t b{font-size:1.1rem;font-weight:800;letter-spacing:-.01em}
.merkki__t em{font:500 .72rem/1.3 var(--mono);font-style:normal;color:#8FB3C7;text-transform:uppercase;letter-spacing:.14em}
.palkki__lupaus{margin:0 0 0 auto;font:500 .82rem/1.4 var(--mono);color:#9DBACD}
@media(max-width:720px){.palkki__lupaus{display:none}}

/* ---- valikko (tabs) ---- */
.valikko{background:var(--kortti);border-bottom:1px solid var(--viiva);position:sticky;top:0;z-index:20}
.valikko__t{max-width:var(--mitta);margin:0 auto;padding:0 .5rem;list-style:none;display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:thin}
.valikko__t li{flex:0 0 auto}
.valikko__t a{display:flex;align-items:center;gap:.45rem;padding:.75rem .8rem;text-decoration:none;color:var(--muste2);
  font-weight:700;font-size:.92rem;border-bottom:3px solid transparent;white-space:nowrap}
.valikko__t a span{display:grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:3px;background:var(--viiva2);
  color:var(--muste2);font:500 .68rem/1 var(--mono)}
.valikko__t a:hover{color:var(--muste);background:#F7F9FB}
.valikko__t a[aria-current]{color:var(--acc-t);border-bottom-color:var(--acc)}
.valikko__t a[aria-current] span{background:var(--acc);color:#fff}
.valikko__hak a span{background:transparent;border:1px dashed var(--viiva)}

main{display:block}
.etu,.juttu,.lista{max-width:var(--mitta);margin:0 auto;padding:1.5rem 1rem 3rem}
.juttu,.lista{max-width:52rem}

/* ---- tervehdys ---- */
.tervehdys{display:flex;gap:1.25rem;align-items:flex-start;background:var(--kortti);border:1px solid var(--viiva);
  border-radius:var(--r2);padding:1.4rem;margin-top:1.25rem;border-top:4px solid var(--acc)}
.tervehdys__kuva{border-radius:var(--r);background:var(--viiva2);flex:0 0 auto;width:120px;height:120px;object-fit:cover}
.tervehdys__t h1{margin-top:0}
.tervehdys__lead{font-size:1.1rem;color:var(--muste2);font-weight:500}
.tervehdys__alle{margin-bottom:0}
@media(max-width:640px){.tervehdys{flex-direction:column;gap:.9rem}.tervehdys__kuva{width:84px;height:84px}}

/* ---- nyt (status strip) ---- */
.nyt{margin-top:1.75rem;background:var(--muste);color:#E6EEF4;border-radius:var(--r2);padding:1.1rem 1.25rem}
.nyt h2{margin:0 0 .7rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;color:#9DBACD;font-family:var(--mono);font-weight:500}
.nyt h2 span{color:var(--ok);font-size:.9rem}
.nyt__l{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.nyt__l li{display:grid;grid-template-columns:2.4rem 1fr;gap:.6rem;align-items:baseline;padding:.45rem 0;border-top:1px solid rgba(255,255,255,.1)}
.nyt__l li:first-child{border-top:0}
.nyt__nro{font:500 .78rem/1 var(--mono);color:#7FA3B8}
.nyt__l a{color:#fff;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.nyt__l a:hover{color:#FFD9A8;border-bottom-color:#FFD9A8}
.nyt__l em{display:block;grid-column:2;font-style:normal;font-size:.9rem;color:#9DBACD}

/* ---- hakemisto ---- */
.etuhaku{margin-top:2rem}
.hakemisto{background:var(--kortti);border:1px solid var(--viiva);border-radius:var(--r2);padding:1.1rem}
.hakemisto__haku label{display:block;font:500 .74rem/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--himmea);margin-bottom:.4rem}
.hakemisto__haku input{width:100%;padding:.7rem .85rem;border:2px solid var(--viiva);border-radius:var(--r);font:500 1rem var(--mono);background:#FBFCFD;color:var(--muste)}
.hakemisto__haku input:focus{border-color:var(--acc);outline:none;background:#fff}
.hakemisto__haku p{font-size:.85rem;color:var(--himmea);margin:.45rem 0 0}
.hakemisto__kirjaimet{display:flex;flex-wrap:wrap;gap:.25rem;margin:.9rem 0 .5rem}
.hakemisto__kirjaimet button{border:1px solid var(--viiva);background:#fff;border-radius:3px;min-width:1.9rem;padding:.25rem .35rem;
  font:500 .8rem var(--mono);color:var(--muste2);cursor:pointer}
.hakemisto__kirjaimet button:hover,.hakemisto__kirjaimet button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff}
.hakemisto__osumat ul{list-style:none;margin:.5rem 0 0;padding:0}
.hakemisto__osumat li{border-top:1px solid var(--viiva2);padding:.5rem 0}
.hakemisto__osumat a{font-weight:700;text-decoration:none}
.hakemisto__osumat a:hover{text-decoration:underline}
.hakemisto__osumat em{display:block;font-style:normal;font-size:.88rem;color:var(--himmea)}
.hakemisto__tyhja{font-size:.9rem;color:var(--himmea);padding:.6rem 0}

/* ---- hubit ---- */
.hubit__l{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.hubit__l a{display:grid;grid-template-columns:2.6rem 1fr;gap:.75rem;align-items:center;background:var(--kortti);
  border:1px solid var(--viiva);border-left:4px solid var(--acc);border-radius:var(--r);padding:.85rem;text-decoration:none;color:var(--muste)}
.hubit__l a:hover{border-left-color:var(--acc2);background:#fff}
.hubit__k{grid-row:span 2;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:var(--r);
  background:var(--muste);color:#fff;font:700 1rem/1 var(--mono)}
.hubit__l b{font-size:1.05rem}
.hubit__l em{display:block;font-style:normal;font-size:.88rem;color:var(--himmea);grid-column:2}

/* ---- rivit (card rows) ---- */
.rivit{list-style:none;margin:0;padding:0;background:var(--kortti);border:1px solid var(--viiva);border-radius:var(--r2);overflow:hidden}
.rivit__r+.rivit__r{border-top:1px solid var(--viiva2)}
.rivit__r a{display:grid;grid-template-columns:5.5rem 1fr;gap:.2rem .9rem;padding:.75rem 1rem;text-decoration:none;color:var(--muste)}
.rivit__r a:hover{background:#F7FAFC}
.rivit__k{grid-row:span 2;align-self:center;font:500 .74rem/1.2 var(--mono);color:var(--himmea);
  border-right:1px solid var(--viiva2);padding-right:.6rem;word-break:break-word}
.rivit__n{font-weight:700}
.rivit__r a:hover .rivit__n{color:var(--acc-t);text-decoration:underline}
.rivit__s{font-size:.9rem;color:var(--himmea)}
@media(max-width:560px){.rivit__r a{grid-template-columns:1fr}.rivit__k{grid-row:auto;border-right:0;padding:0}}

.poiminnat,.ohjeetetu,.hubit,.vihko{margin-top:2rem}
.poiminnat__kaikki,.vihko__kaikki{margin-top:.6rem;font-weight:700}

/* ---- vihko (notes) ---- */
.vihko__l{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.vihko__l li{background:var(--keltainen);border:1px solid #EBD9A8;border-radius:var(--r);padding:.75rem .9rem;
  display:grid;grid-template-columns:5.5rem 1fr;gap:.75rem}
.vihko__l time{font:500 .78rem/1.6 var(--mono);color:#8A6B1F}
.vihko__l p{margin:0}
@media(max-width:560px){.vihko__l li{grid-template-columns:1fr;gap:.2rem}}

/* ---- polku ---- */
.polku ol{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.3rem;font:500 .78rem var(--mono);color:var(--himmea)}
.polku li+li::before{content:"/";margin-right:.3rem;color:var(--viiva)}
.polku a{color:var(--himmea)}

/* ---- juttu ---- */
.juttu__ylaosa{margin-bottom:1rem}
.juttu__tunnus{margin:0 0 .3rem;font:500 .7rem/1 var(--mono);letter-spacing:.2em;color:var(--himmea)}
.polku{max-width:52rem;margin:0 auto;padding:1.25rem 1rem 0}
.juttu__ylaosa h1{margin-bottom:.4rem}
.juttu__runko{display:block}
.juttu__opas{display:block}
.juttu__loppu{display:block;border:0}
.juttu__yla{margin-bottom:1rem}
.nimirivi{display:flex;align-items:center;gap:.6rem;margin:.6rem 0 0}
.nimirivi__kuva img{display:block;border-radius:50%;border:2px solid var(--acc)}
.nimirivi__t{display:flex;flex-direction:column;line-height:1.3}
.nimirivi__t a{font-weight:700;text-decoration:none}
.nimirivi__t b{font:500 .78rem/1.4 var(--mono);font-weight:400;color:var(--himmea)}
.nimirivi--muu{font:500 .82rem var(--mono);color:var(--himmea);border-left:3px solid var(--viiva);padding-left:.6rem}

/* ---- ei ole -rivi ---- */
.eiole{display:flex;gap:.5rem;align-items:flex-start;margin:1rem 0 0;padding:.5rem .7rem;background:#F3F7FA;
  border:1px dashed var(--viiva);border-radius:var(--r);font-size:.88rem;color:var(--muste2)}
.eiole .eiole__i{display:grid;place-items:center;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--acc);
  color:#fff;font:700 .72rem/1 var(--mono);flex:0 0 auto;margin-top:.1rem}

/* ---- vastaus (short answer as a confirmation message) ---- */
.vastaus{background:var(--kortti);border:1px solid var(--viiva);border-left:4px solid var(--ok);border-radius:var(--r);
  padding:.9rem 1.1rem;margin:1.25rem 0;position:relative}
.vastaus__ot{margin:0 0 .25rem;font:500 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ok)}
.vastaus p:last-child{margin:0;font-size:1.08rem}

/* ---- palvelukortti ---- */
.kortti{background:var(--kortti);border:1px solid var(--viiva);border-radius:var(--r2);margin:1.5rem 0;overflow:hidden}
.kortti__yla{display:flex;align-items:center;gap:.6rem;background:var(--muste);color:#fff;padding:.7rem 1rem}
.kortti__yla h2{margin:0;font-size:1rem;color:#fff;flex:1}
.kortti__tila{width:.7rem;height:.7rem;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(46,139,87,.25);flex:0 0 auto}
.kortti__tila--odota{background:var(--odota);box-shadow:0 0 0 3px rgba(201,138,0,.25)}
.kortti__tila--vika{background:var(--vika);box-shadow:0 0 0 3px rgba(192,57,43,.25)}
.kortti__koodi{font:500 .74rem var(--mono);color:#8FB3C7;letter-spacing:.08em}
.kortti__rivit{margin:0;padding:0}
.kortti__rivi{display:grid;grid-template-columns:12rem 1fr;gap:.9rem;padding:.7rem 1rem;border-top:1px solid var(--viiva2)}
.kortti__rivi:first-child{border-top:0}
.kortti__rivi dt{margin:0;font:500 .76rem/1.6 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--himmea)}
.kortti__rivi dd{margin:0}
.kortti__rivi dd ul{margin:0;padding-left:1.1rem}
.kortti__ala{margin:0;padding:.7rem 1rem;background:#F7F9FB;border-top:1px solid var(--viiva2);font-size:.85rem;color:var(--himmea)}
@media(max-width:620px){.kortti__rivi{grid-template-columns:1fr;gap:.15rem}}

/* ---- sisältö (toc) ---- */
.sisalto{border:1px dashed var(--viiva);border-radius:var(--r);padding:.8rem 1rem;margin:1.5rem 0;background:#FAFCFD}
.sisalto p{margin:0 0 .4rem;font:500 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--himmea)}
.sisalto ol{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.sisalto li{display:grid;grid-template-columns:2rem 1fr;align-items:baseline}
.sisalto span{font:500 .75rem var(--mono);color:var(--himmea)}
.sisalto a{text-decoration:none;font-weight:500}
.sisalto a:hover{text-decoration:underline}

/* ---- teksti ---- */
.juttu__teksti h2{border-top:1px solid var(--viiva);padding-top:1.1rem}
.juttu__teksti ul,.juttu__teksti ol{padding-left:1.3rem}
.juttu__teksti li{margin-bottom:.35rem}
.juttu__teksti table{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--kortti)}
.juttu__teksti th,.juttu__teksti td{border:1px solid var(--viiva);padding:.5rem .65rem;text-align:left;vertical-align:top}
.juttu__teksti thead th{background:#F2F6F9;font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muste2)}
.taulu-wrap{overflow-x:auto;margin:1rem 0}
.taulu-note{font-size:.85rem;color:var(--himmea)}
.katkos{width:100%;border-collapse:collapse;background:var(--kortti)}
.katkos th,.katkos td{border:1px solid var(--viiva);padding:.5rem .65rem;text-align:left}
.katkos thead th{background:#F2F6F9;font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.07em}
blockquote{margin:1rem 0;padding:.6rem 1rem;border-left:4px solid var(--viiva);color:var(--muste2);background:#F8FAFC}

/* ---- lappu (Tapani note) ---- */
.lappu{background:var(--keltainen);border:1px solid #EBD9A8;border-radius:var(--r);padding:.9rem 1.1rem;margin:1.75rem 0}
.lappu__ot{margin:0 0 .3rem;font:500 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:#8A6B1F}
.lappu p:last-child{margin:0}

/* ---- jatko ---- */
.jatko{margin:2rem 0 0}
.jatko ol{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.jatko li a{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline;background:var(--kortti);
  border:1px solid var(--viiva);border-radius:var(--r);padding:.6rem .85rem;text-decoration:none;color:var(--muste)}
.jatko li a:hover{border-color:var(--acc);color:var(--acc-t)}
.jatko li b{font:500 .74rem var(--mono);color:var(--himmea);font-weight:400;white-space:nowrap}

/* ---- Tapani box ---- */
.tapani{display:flex;gap:1rem;align-items:flex-start;margin:2.25rem 0 0;padding:1.1rem;background:var(--kortti);
  border:1px solid var(--viiva);border-radius:var(--r2);border-bottom:4px solid var(--acc)}
.tapani img{border-radius:var(--r);flex:0 0 auto}
.tapani__n{margin:0;font-weight:800;font-size:1.05rem}
.tapani p{margin:.3rem 0 0;font-size:.95rem}

/* ---- muut ---- */
.muut{list-style:none;margin:0;padding:0}
.muut li{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--viiva2);padding:.45rem 0}
.muut time{font:500 .78rem var(--mono);color:var(--himmea);white-space:nowrap}
.muut__n{font-size:.85rem;color:var(--himmea)}

/* ---- kontaktvägar som lista (yhteystiedot, vinkkaa-meille) ---- */
.sj-yhteys,.sj-vinkki{list-style:none;margin:1rem 0 1.5rem;padding:0;background:var(--kortti);
  border:1px solid var(--viiva);border-radius:var(--r);overflow:hidden}
.sj-yhteys li,.sj-vinkki li{padding:.7rem .9rem;border-top:1px solid var(--viiva2);font-size:.98rem}
.sj-yhteys li:first-child,.sj-vinkki li:first-child{border-top:0}
.sj-yhteys strong,.sj-vinkki strong{display:block;font:500 .72rem/1.6 var(--mono);font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;color:var(--himmea)}

/* ---- lista / arkisto ---- */
.lista__yla{margin-bottom:1rem}
/* Hubbens text: kort ingress ovanför sidlistan, mellanrubriker som mono-etiketter – ingen textvägg. */
.lista__intro{color:var(--muste2);max-width:44rem}
.lista__intro p,.lista__lisa p{margin:0 0 .75rem;max-width:44rem}
.lista__intro h2,.lista__lisa h2{margin:1.25rem 0 .4rem;border-top:0;padding-top:0;
  font:500 .76rem/1.4 var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--himmea);
  display:flex;align-items:center;gap:.7rem}
.lista__intro h2::after,.lista__lisa h2::after{content:"";flex:1;height:1px;background:var(--viiva)}
.lista__intro h2:first-child{margin-top:.4rem}
.lista__lisa{margin-top:2rem;padding-top:.25rem;border-top:1px solid var(--viiva);color:var(--muste2)}
.lista__sivut{margin-top:1.25rem}
.lista__sivut .nav-links{display:flex;gap:.3rem;flex-wrap:wrap;font-family:var(--mono);font-size:.85rem}
.lista__sivut a,.lista__sivut .current{padding:.35rem .6rem;border:1px solid var(--viiva);border-radius:3px;background:#fff;text-decoration:none}
.lista__sivut .current{background:var(--acc);border-color:var(--acc);color:#fff}

/* ---- alapalkki ---- */
.alapalkki{background:var(--muste);color:#C9D9E4;margin-top:3rem;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 7px)}
.alapalkki__sisa{max-width:var(--mitta);margin:0 auto;padding:2rem 1rem}
.alapalkki__tapani{display:flex;gap:.8rem;align-items:center;max-width:46rem;font-size:.95rem}
.alapalkki__tapani img{border-radius:50%;border:2px solid var(--acc);flex:0 0 auto}
.alapalkki a{color:#9FD2E6}
.alapalkki a:hover{color:#FFD9A8}
.alapalkki__linkit{list-style:none;margin:1.25rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.9rem}
.alapalkki__c{margin:0;font:500 .8rem var(--mono);color:#7FA3B8}

/* ===== OBL desk boxes – palveluilmoitus + tunnistautumislomake ===== */
body .feed .obl-skin{margin:1.75rem 0;position:relative}
body .feed .obl-skin__nro{margin:0;font:500 .68rem/1 var(--mono)!important;text-transform:uppercase;letter-spacing:.16em;
  color:#fff;background:var(--muste);display:inline-block;padding:.35rem .6rem;border-radius:var(--r) var(--r) 0 0}
body .feed .obl-skin--cta>section,body .feed .obl-skin--form>section,
body .feed .obl-skin--cta>div,body .feed .obl-skin--form>div{
  background:var(--kortti)!important;border:1px solid var(--viiva)!important;border-top:3px solid var(--acc)!important;
  border-radius:0 var(--r2) var(--r2) var(--r2)!important;padding:1.1rem 1.25rem!important;box-shadow:none!important;margin:0!important}
body .feed .obl-skin [class$="m"]{background:transparent!important;border:0!important;padding:0!important;margin:0!important;box-shadow:none!important;border-radius:0!important}
body .feed .obl-skin [class$="h"]{font:800 1.15rem/1.25 var(--teksti)!important;color:var(--muste)!important;margin:0 0 .5rem!important;letter-spacing:-.01em}
body .feed .obl-skin [class$="e"],body .feed .obl-skin [class$="k"]{font:500 .7rem/1 var(--mono)!important;text-transform:uppercase!important;
  letter-spacing:.14em!important;color:var(--acc-t)!important;display:flex;align-items:center;gap:.4rem;margin:0 0 .5rem!important}
body .feed .obl-skin [class$="e"]::before,body .feed .obl-skin [class$="k"]::before{content:"";width:.55rem;height:.55rem;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 3px rgba(46,139,87,.22);flex:0 0 auto}
body .feed .obl-skin [class$="t"] p{color:var(--muste2)!important;font:400 1rem/1.6 var(--teksti)!important;margin:0 0 .6rem!important}
body .feed .obl-skin [class$="l"]{list-style:none!important;margin:.4rem 0!important;padding:0!important;display:grid;gap:.2rem}
body .feed .obl-skin [class$="l"] li{padding-left:1.4rem;position:relative;font-size:.95rem}
body .feed .obl-skin [class$="l"] li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
body .feed .obl-skin [class$="r"]{font:500 .85rem var(--mono)!important;color:var(--muste2)!important}
body .feed .obl-skin dl{display:grid;gap:.35rem;margin:.6rem 0!important}
body .feed .obl-skin dt{font:500 .72rem var(--mono)!important;text-transform:uppercase;letter-spacing:.1em;color:var(--himmea)!important}
body .feed .obl-skin dd{margin:0 0 .4rem!important}
body .feed .obl-skin button[type=submit],body .feed .obl-skin [class$="b"]{
  background:var(--acc)!important;color:#fff!important;border:0!important;border-bottom:3px solid var(--acc-t)!important;
  border-radius:var(--r)!important;padding:.7rem 1.2rem!important;font:700 .95rem var(--teksti)!important;cursor:pointer;box-shadow:none!important}
body .feed .obl-skin button[type=submit]:hover{background:var(--acc-t)!important}
body .feed .obl-skin label{display:block!important;font:500 .7rem/1 var(--mono)!important;text-transform:uppercase!important;
  letter-spacing:.12em!important;color:var(--himmea)!important;margin:0 0 .3rem!important}
body .feed .obl-skin input:not([type=hidden]),body .feed .obl-skin select,body .feed .obl-skin textarea{
  width:100%!important;background:#FBFCFD!important;border:0!important;border-bottom:2px solid var(--viiva)!important;
  border-radius:0!important;padding:.55rem .1rem!important;font:500 1rem var(--mono)!important;color:var(--muste)!important;box-shadow:none!important}
body .feed .obl-skin input:focus,body .feed .obl-skin textarea:focus,body .feed .obl-skin select:focus{border-bottom-color:var(--acc)!important;background:#fff!important;outline:none!important}
body .feed .obl-skin details{border-top:1px dashed var(--viiva)!important;margin-top:.8rem!important;padding-top:.6rem!important;background:transparent!important}
body .feed .obl-skin summary{cursor:pointer;font:500 .85rem var(--mono)!important;color:var(--acc-t)!important;list-style:none}
body .feed .obl-skin summary::-webkit-details-marker{display:none}
body .feed .obl-skin summary::before{content:"+ ";font-weight:700}
@media(max-width:560px){
  body .feed .obl-skin--cta>section,body .feed .obl-skin--form>section,
  body .feed .obl-skin--cta>div,body .feed .obl-skin--form>div{padding:.9rem!important}
}

/* ===== n8n-artiklarnas block – egen form för suomijournal.fi =====
   Formspråket är samma som resten av «Palvelukortti»: mono-etiketter, hårfina linjer,
   statusprickar och mörk petrolrad – ingen ifylld ruta med mörk vänsterkant.
   Markupen (n24-* / mm-*) kommer från n8n och rörs inte; allt nedan är temats stil. */
.juttu__teksti .n24-wrap{display:block}

/* --- statusrad överst (n24-stats-line): läses som en mätarrad --- */
.juttu__teksti .n24-stats-line{font:500 .86rem/1.7 var(--mono);color:var(--muste2);
  border-top:1px solid var(--viiva);border-bottom:1px solid var(--viiva);padding:.55rem 0;margin:1.1rem 0 1.25rem}
.juttu__teksti .n24-stats-line strong{font-weight:500;color:var(--himmea);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}

/* --- sammanfattning (n24-tldr): bandet mellan två linjer, etiketten hänger i marginalen --- */
.juttu__teksti .n24-tldr,.juttu__teksti .n24-summary,.juttu__teksti .n24-takeaway{
  position:relative;margin:1.6rem 0;padding:.85rem 0 .9rem 1.6rem;background:none;border:0;
  border-top:2px solid var(--muste);border-bottom:1px solid var(--viiva);color:var(--muste2)}
.juttu__teksti .n24-tldr::before,.juttu__teksti .n24-summary::before,.juttu__teksti .n24-takeaway::before{
  content:"";position:absolute;left:0;top:1.25rem;width:.6rem;height:.6rem;border-radius:50%;
  background:var(--acc);box-shadow:0 0 0 3px rgba(31,111,139,.2)}
.juttu__teksti .n24-tldr>strong:first-child,.juttu__teksti .n24-summary>strong:first-child{
  display:block;font:500 .72rem/1 var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.15em;
  color:var(--acc-t);margin-bottom:.4rem}
.juttu__teksti .n24-tldr-body{margin:0}

/* --- Pikakatsaus (n24-snapshot-block): rubrik som mono-etikett med linje, korten som registerkort --- */
.juttu__teksti .n24-snapshot-block{margin:2rem 0}
.juttu__teksti .n24-grid-heading{display:flex;align-items:center;gap:.75rem;border-top:0;padding-top:0;margin:0 0 .9rem;
  font:500 .76rem/1 var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--himmea)}
.juttu__teksti .n24-grid-heading::after{content:"";flex:1;height:1px;background:var(--viiva)}
.juttu__teksti .n24-grid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr))}
.juttu__teksti .n24-card{background:var(--kortti);border:1px solid var(--viiva);border-radius:var(--r);
  padding:.8rem .9rem .35rem;box-shadow:none}
.juttu__teksti .n24-card-header{display:grid;grid-template-columns:1.6rem 1fr;align-items:center;gap:.55rem;
  margin:0 0 .5rem;padding-bottom:.45rem;border-bottom:1px dashed var(--viiva)}
.juttu__teksti .n24-card-num{display:grid;place-items:center;width:1.6rem;height:1.6rem;border:1px solid var(--viiva);
  border-radius:3px;background:#F3F7FA;color:var(--acc-t);font:500 .78rem/1 var(--mono)}
.juttu__teksti .n24-card-title{font:500 .78rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--muste)}
.juttu__teksti .n24-card-body>ul{margin:0;padding:0;list-style:none}
.juttu__teksti .n24-card-body li{position:relative;padding-left:1rem;margin-bottom:.4rem;font-size:.95rem}
.juttu__teksti .n24-card-body li::before{content:"";position:absolute;left:0;top:.6rem;width:.4rem;height:1px;background:var(--acc)}

/* --- listor i brödtexten --- */
.juttu__teksti ul.n24-list{list-style:none;padding-left:0}
.juttu__teksti ul.n24-list>li{position:relative;padding-left:1.15rem}
.juttu__teksti ul.n24-list>li::before{content:"";position:absolute;left:.1rem;top:.65rem;width:.42rem;height:.42rem;
  border:1px solid var(--acc);border-radius:1px;background:#fff}
.juttu__teksti ol.n24-list,.juttu__teksti ol.n24-list-ordered{padding-left:1.4rem}
.juttu__teksti .n24-list-tight>li{margin-bottom:.3rem}

/* --- tabeller (n24-table): mörk petrolrad i huvudet, hårfina rader, inget rutnät --- */
.juttu__teksti table.n24-table,.juttu__teksti table.mm-metric-table{width:100%;border-collapse:collapse;margin:1.25rem 0;
  background:var(--kortti);border:1px solid var(--viiva);border-radius:var(--r);overflow:hidden;font-size:.95rem}
.juttu__teksti table.n24-table thead th{background:var(--muste);color:#E9F0F6;border:0;
  font:500 .72rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em;padding:.6rem .8rem;text-align:left}
.juttu__teksti table.n24-table td{border:0;border-top:1px solid var(--viiva2);padding:.6rem .8rem;vertical-align:top}
.juttu__teksti table.n24-table tbody tr:first-child td{border-top:0}
.juttu__teksti table.n24-table td:first-child{font:500 .88rem/1.5 var(--mono);color:var(--muste2);width:34%;
  background:#FAFCFD;border-right:1px solid var(--viiva2)}
.juttu__teksti .n24-table-caption,.juttu__teksti .taulu-note{font:500 .8rem var(--mono);color:var(--himmea);margin:-.6rem 0 1.25rem}
@media(max-width:560px){.juttu__teksti table.n24-table{font-size:.88rem}
  .juttu__teksti table.n24-table td,.juttu__teksti table.n24-table thead th{padding:.45rem .55rem}}

/* --- vinkar, noter, varningar: etikett i mono med statusprick, streckad överkant --- */
.juttu__teksti .n24-tip,.juttu__teksti .n24-note,.juttu__teksti .n24-warning,.juttu__teksti .n24-network-source,
.juttu__teksti .n24-source-context{margin:1.4rem 0;padding:.75rem .9rem;background:#F7FAFC;
  border:1px dashed var(--viiva);border-radius:var(--r)}
.juttu__teksti .n24-warning{background:var(--keltainen);border-color:#EBD9A8}
.juttu__teksti .n24-tip-label,.juttu__teksti .n24-note-label,.juttu__teksti .n24-warning-label{
  display:flex;align-items:center;gap:.4rem;margin:0 0 .35rem;font:500 .72rem/1 var(--mono);
  text-transform:uppercase;letter-spacing:.14em;color:var(--acc-t)}
.juttu__teksti .n24-tip-label::before,.juttu__teksti .n24-note-label::before,.juttu__teksti .n24-warning-label::before{
  content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--acc);flex:0 0 auto}
.juttu__teksti .n24-note-label::before{background:var(--ok)}
.juttu__teksti .n24-warning-label{color:#8A6B1F}
.juttu__teksti .n24-warning-label::before{background:var(--odota)}
.juttu__teksti .n24-tip p:last-child,.juttu__teksti .n24-note p:last-child,.juttu__teksti .n24-warning p:last-child{margin:0}

/* --- kysymykset (faq): frågan som rad med hängande frågetecken --- */
.juttu__teksti .n24-faq,.juttu__teksti .mm-faq{margin:1.75rem 0}
.juttu__teksti .n24-faq-item,.juttu__teksti .mm-faq-item{border-top:1px solid var(--viiva);padding:.8rem 0 .2rem}
.juttu__teksti .n24-faq-item:last-child,.juttu__teksti .mm-faq-item:last-child{border-bottom:1px solid var(--viiva)}
.juttu__teksti .n24-faq-item h3,.juttu__teksti .n24-faq-item h4,.juttu__teksti .mm-faq-item h3{
  position:relative;margin:0 0 .3rem;padding-left:1.5rem;font-size:1.02rem;font-weight:800}
.juttu__teksti .n24-faq-item h3::before,.juttu__teksti .n24-faq-item h4::before,.juttu__teksti .mm-faq-item h3::before{
  content:"?";position:absolute;left:0;top:0;font:500 .9rem/1.45 var(--mono);color:var(--acc)}
.juttu__teksti .n24-faq-item p{margin:0 0 .6rem;padding-left:1.5rem;color:var(--muste2)}
.juttu__teksti .n24-faq-heading,.juttu__teksti .n24-faq-section>h2{margin-bottom:.4rem}

/* --- plus/minus, steg, tidslinje, avslut --- */
.juttu__teksti .n24-clarity{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:1.25rem 0}
.juttu__teksti .n24-clarity-col,.juttu__teksti .n24-clarity-column{background:var(--kortti);border:1px solid var(--viiva);
  border-radius:var(--r);padding:.8rem .9rem}
.juttu__teksti .n24-clarity-col h3,.juttu__teksti .n24-clarity-column h3{margin:0 0 .4rem;font:500 .74rem/1 var(--mono);
  text-transform:uppercase;letter-spacing:.12em;color:var(--himmea)}
.juttu__teksti .n24-checks li::before{content:"";background:var(--ok);border-color:var(--ok)}
.juttu__teksti .n24-x li::before{content:"";background:var(--vika);border-color:var(--vika)}
.juttu__teksti .n24-step{display:grid;grid-template-columns:2rem 1fr;gap:.7rem;align-items:start;margin-bottom:.6rem}
.juttu__teksti .n24-step-num{display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:3px;
  background:var(--muste);color:#fff;font:500 .8rem/1 var(--mono)}
.juttu__teksti .n24-timeline{list-style:none;padding-left:0}
.juttu__teksti .n24-timeline li{position:relative;padding-left:1.4rem;border-left:0;margin-bottom:.45rem}
.juttu__teksti .n24-timeline li::before{content:"";position:absolute;left:.15rem;top:.6rem;width:.55rem;height:.55rem;
  border-radius:50%;border:1px solid var(--acc);background:#fff}
.juttu__teksti .n24-closer,.juttu__teksti .n24-closing,.juttu__teksti .n24-section-closer,.juttu__teksti .n24-closer-sentence{
  font-size:1.02rem;color:var(--muste2);border-top:1px solid var(--viiva2);padding-top:.8rem;margin-top:1.25rem}
.juttu__teksti .n24-related,.juttu__teksti .n24-related-reading{border-top:1px solid var(--viiva);padding-top:.8rem;margin-top:1.5rem}
.juttu__teksti .n24-related ul,.juttu__teksti .n24-related-reading ul{list-style:none;padding-left:0;margin:0}
.juttu__teksti .n24-related li{padding:.3rem 0;border-top:1px solid var(--viiva2)}
.juttu__teksti .n24-related li:first-child{border-top:0}
.juttu__teksti .n24-blockquote,.juttu__teksti .n24-quote{margin:1.25rem 0;padding:.2rem 0 .2rem 1rem;
  border-left:2px solid var(--acc);background:none;color:var(--muste2);font-size:1.04rem}
.juttu__teksti .n24-h2{margin-top:2.25rem}

/* --- de två mm-artiklarna (samma formspråk, färre block) --- */
.juttu__teksti .mm-block,.juttu__teksti .mm-card-compact,.juttu__teksti .mm-comparison,.juttu__teksti .mm-quick-picks{
  background:var(--kortti);border:1px solid var(--viiva);border-radius:var(--r);padding:.85rem .95rem;margin:1.25rem 0}
.juttu__teksti .mm-kicker,.juttu__teksti .mm-quick-label,.juttu__teksti .mm-store-label,.juttu__teksti .mm-metric-badge{
  font:500 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.13em;color:var(--himmea)}
.juttu__teksti .mm-quick-item{border-top:1px solid var(--viiva2);padding:.5rem 0}
.juttu__teksti .mm-quick-item:first-child{border-top:0}
.juttu__teksti .mm-quick-title{font-weight:700}
.juttu__teksti .mm-direct-answer{border-top:2px solid var(--muste);border-bottom:1px solid var(--viiva);
  padding:.8rem 0;margin:1.5rem 0;background:none}
.juttu__teksti .mm-source-note,.juttu__teksti .mm-price-note,.juttu__teksti .mm-disclosure{
  font:500 .82rem/1.6 var(--mono);color:var(--himmea)}
.juttu__teksti .mm-bar-row{display:grid;grid-template-columns:9rem 1fr 3.5rem;gap:.6rem;align-items:center;margin-bottom:.35rem}
.juttu__teksti .mm-bar-track{height:.5rem;background:var(--viiva2);border-radius:2px;overflow:hidden}
.juttu__teksti .mm-bar-fill{height:100%;background:var(--acc)}
.juttu__teksti .mm-bar-label,.juttu__teksti .mm-bar-value{font:500 .8rem var(--mono);color:var(--muste2)}
@media(max-width:560px){.juttu__teksti .mm-bar-row{grid-template-columns:1fr 3rem}
  .juttu__teksti .mm-bar-track{grid-column:1/-1}}