/* Guruguru, alasivujen yhteinen tyyli. Tokenit ja perusosat vastaavat etusivua (index.html). */
:root{
  --bg:#F5F1E6;
  --bg-alt:#EAE3CE;
  --surface:#FFFFFF;
  --ink:#16232E;
  --ink-soft:#3B4A56;
  --brand:#1F4A73;
  --brand-dark:#153450;
  --field:#153450;
  --field-ink:#F5F1E6;
  --field-soft:#C9D6E3;
  --field-line:rgba(245,241,230,.28);
  --bot-bg:#F5F1E6;
  --bot-ink:#16232E;
  --user-bg:#FF9A5E;
  --user-ink:#241000;
  --accent:#D9550F;
  --accent-ink:#FFFFFF;
  --line:#D8CFAE;
  --focus:#1B5FB8;
  --max:1120px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111820;
    --bg-alt:#182029;
    --surface:#1E2731;
    --ink:#F3EFE2;
    --ink-soft:#C3CBD2;
    --brand:#8CB4DE;
    --brand-dark:#8CB4DE;
    --field:#1B3550;
    --bot-bg:#F3EFE2;
    --accent:#FF8A4C;
    --accent-ink:#241000;
    --line:#2C3742;
    --focus:#8CC0FF;
  }
}
:root[data-theme="dark"]{
  --bg:#111820;
  --bg-alt:#182029;
  --surface:#1E2731;
  --ink:#F3EFE2;
  --ink-soft:#C3CBD2;
  --brand:#8CB4DE;
  --brand-dark:#8CB4DE;
  --field:#1B3550;
  --bot-bg:#F3EFE2;
  --accent:#FF8A4C;
  --accent-ink:#241000;
  --line:#2C3742;
  --focus:#8CC0FF;
}

*{box-sizing:border-box;}
html{background:var(--bg); scrollbar-color:var(--brand) var(--bg-alt);}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  caret-color:var(--accent);
  font-family:'Atkinson Hyperlegible','Segoe UI',Arial,sans-serif;
  font-size:20px;
  line-height:1.65;
}
::selection{background:var(--user-bg); color:var(--user-ink);}
h1,h2,h3{
  font-family:'Archivo','Segoe UI',Arial,sans-serif;
  font-weight:800;
  text-wrap:balance;
  line-height:1.15;
  letter-spacing:-0.015em;
  margin:0;
}
p{margin:0;}
a{color:inherit; text-underline-offset:.18em; text-decoration-thickness:1.5px;}
a:hover{text-decoration-thickness:2.5px;}
img{max-width:100%; display:block;}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:8px;}
.vh{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
code{font-family:ui-monospace,Consolas,monospace; font-size:.88em; background:var(--bg-alt); padding:.1em .35em; border-radius:6px;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 20px;}

/* Header */
header.site{padding:16px 0;}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.logo{display:flex; align-items:center; gap:12px; font-family:'Archivo',sans-serif; font-weight:800; font-size:1.35rem; color:var(--brand-dark); text-decoration:none;}
.logo-mark{width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center; background:#FFFFFF; border-radius:14px; padding:5px; box-shadow:0 2px 6px -2px rgba(0,0,0,.25);}
.logo-mark img{width:100%; height:100%; object-fit:contain;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:14px 28px; min-height:60px;
  border-radius:999px; border:0;
  font-family:'Archivo',sans-serif; font-weight:700; font-size:1.1rem;
  text-decoration:none; cursor:pointer;
  background:var(--accent); color:var(--accent-ink);
  transition:transform .15s cubic-bezier(.2,.8,.2,1), filter .15s;
}
.btn:hover{filter:brightness(1.08);}
.btn:active{transform:scale(.97);}
.btn svg{width:18px; height:18px; flex:none;}
header.site .btn{min-height:52px; padding:10px 22px; font-size:1rem;}

/* Page head */
.page-head{padding:28px 0 56px;}
.crumbs{margin:0 0 28px; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px 10px; font-family:'Archivo',sans-serif; font-weight:700; font-size:.98rem; color:var(--ink-soft);}
.crumbs li + li::before{content:""; display:inline-block; width:7px; height:7px; margin-right:10px; border-right:2px solid currentColor; border-top:2px solid currentColor; transform:translateY(-2px) rotate(45deg); opacity:.6;}
.crumbs a{color:var(--brand-dark);}
.page-head h1{font-size:clamp(2.1rem, 6.4vw, 3.4rem); max-width:18ch;}
.page-head .lede{margin-top:20px; font-size:1.2rem; color:var(--ink-soft); max-width:40rem;}
.meta{margin-top:18px; font-size:.95rem; color:var(--ink-soft);}

/* Reading layout: otsikko vasemmalla, teksti oikealla leveällä näytöllä */
.doc{padding:0 0 88px;}
.part{padding:36px 0; border-top:1px solid var(--line); display:grid; gap:14px;}
.part:last-child{border-bottom:1px solid var(--line);}
.part h2{font-size:1.6rem; line-height:1.2;}
.prose{max-width:40rem; color:var(--ink-soft);}
.prose > * + *{margin-top:16px;}
.prose b, .prose strong{color:var(--ink);}
.prose a{color:var(--brand-dark);}
.prose ul, .prose ol{margin:16px 0 0; padding:0; list-style:none;}
.prose ul:not([class]) li{padding:8px 0 8px 30px; position:relative; line-height:1.55;}
.prose ul:not([class]) li::before{content:""; position:absolute; left:4px; top:1.05em; width:12px; height:2px; background:var(--brand);}
.prose .answer{color:var(--ink); font-size:1.12rem;}

.aside{background:var(--bg-alt); border-radius:22px; padding:22px 24px; color:var(--ink-soft); font-size:1.02rem; max-width:46rem;}
.aside b{color:var(--ink);}

/* FAQ (sama kuin etusivulla) */
.faq{max-width:48rem;}
details{border-top:1px solid var(--line); padding:20px 0;}
details:last-of-type{border-bottom:1px solid var(--line);}
summary{font-family:'Archivo',sans-serif; font-weight:700; font-size:1.15rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:44px;}
summary::-webkit-details-marker{display:none;}
summary::after{content:""; flex:none; width:14px; height:14px; border-right:3px solid var(--brand); border-bottom:3px solid var(--brand); transform:rotate(45deg) translateY(-4px); transition:transform .2s;}
details[open] summary::after{transform:rotate(225deg) translateY(-4px);}
details p{margin-top:14px; color:var(--ink-soft); font-size:1.05rem; max-width:44rem;}

section.band{padding:72px 0;}
section.band.alt{background:var(--bg-alt);}
section.band h2{font-size:clamp(1.75rem, 4.6vw, 2.6rem);}
.sub{margin-top:16px; color:var(--ink-soft); font-size:1.12rem; max-width:40rem;}

/* Footer (sama kuin etusivulla) */
footer{background:var(--field); color:var(--field-ink); padding:72px 0 40px;}
footer .footer-title{font-family:'Archivo','Segoe UI',Arial,sans-serif; font-weight:800; font-size:clamp(1.75rem, 4.6vw, 2.6rem); line-height:1.15; letter-spacing:-0.015em; text-wrap:balance; color:var(--field-ink);}
footer .sub{color:var(--field-soft);}
footer .cta{margin-top:30px; display:flex; flex-direction:column; align-items:flex-start; gap:12px;}
footer .cta-note{font-size:1rem; color:var(--field-soft);}
footer .cta-note b{color:var(--field-ink);}
.fine{margin-top:56px; padding-top:24px; border-top:1px solid var(--field-line); color:var(--field-soft); font-size:.92rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.fine a[aria-current="page"]{color:var(--field-ink); text-decoration:none; font-weight:700;}

@media (min-width: 900px){
  .wrap{padding:0 40px;}
  header.site{padding:22px 0;}
  .page-head{padding:40px 0 72px;}
  .part{grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:64px; padding:44px 0;}
  .part h2{position:sticky; top:24px; align-self:start;}
  section.band{padding:104px 0;}
}
@media (max-width: 899px){
  footer .cta{align-items:stretch;}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
}

/* Ohjesivut */
.steps{margin:0; padding:0; list-style:none; counter-reset:s; max-width:46rem;}
.steps > li{counter-increment:s; position:relative; padding:28px 0 28px 76px; border-top:1px solid var(--line);}
.steps > li:last-child{border-bottom:1px solid var(--line);}
.steps > li::before{content:counter(s); position:absolute; left:0; top:24px; width:52px; height:52px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-family:'Archivo',sans-serif; font-weight:800; font-size:1.5rem; font-variant-numeric:tabular-nums;}
.steps h3{font-size:1.3rem; line-height:1.25;}
.steps p{margin-top:10px; color:var(--ink-soft);}
.steps p b{color:var(--ink);}
.steps .if{margin-top:14px; padding:14px 18px; border-radius:16px; background:var(--bg-alt); font-size:1rem;}
.steps .if b{color:var(--ink);}
.steps .if a{color:var(--brand-dark);}
.steps .ok{margin-top:14px; font-size:1rem; color:var(--ink-soft);}

.help{margin-top:56px; background:var(--field); color:var(--field-ink); border-radius:28px; padding:32px 28px; max-width:46rem; box-shadow:0 24px 48px -24px rgba(0,0,0,.35);}
.help h2{font-size:1.6rem; color:var(--field-ink);}
.help p{margin-top:12px; color:var(--field-soft);}
.help .btn{margin-top:22px;}

.related{margin:0; padding:0; list-style:none; display:grid; gap:12px;}
.related a{display:grid; grid-template-columns:1fr auto; gap:4px 16px; align-items:center; padding:20px 24px; border-radius:22px; background:var(--surface); text-decoration:none; transition:background-color .15s, transform .15s cubic-bezier(.2,.8,.2,1);}
.related a::after{content:""; grid-column:2; grid-row:1 / span 2; width:12px; height:12px; border-right:3px solid var(--accent); border-top:3px solid var(--accent); transform:rotate(45deg);}
.related a:hover{background:var(--bg-alt);}
.related a:active{transform:scale(.99);}
.related b{font-family:'Archivo',sans-serif; font-size:1.15rem;}
.related span{color:var(--ink-soft); font-size:1rem;}
@media (min-width: 900px){
  .related.three{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 520px){
  .steps > li{padding-left:0; padding-top:88px;}
}