/* NORDFIND — oppaat, jaettu tyylitiedosto
   Käyttää samoja muuttujia kuin pääsivusto (index.html). */

:root{
  --ink:      #16123a;
  --ink-soft: #4b4670;
  --muted:    #7a759b;
  --bg:       #eeeaf7;
  --surface:  #ffffff;
  --line:     #ddd6ee;
  --indigo:   #3d2fd6;
  --signal:   #ff5a1f;
  --r:        14px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family:'Instrument Sans',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:760px; margin:0 auto; padding:0 20px; }
.wrap-wide{ max-width:1080px; margin:0 auto; padding:0 20px; }

/* ---------- Header ---------- */
.site-head{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.head-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-top:14px; padding-bottom:14px;
}
.logo{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800; font-size:22px; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; line-height:1.1;
}
.logo em{ font-style:normal; color:var(--indigo); }
.logo-sub{
  display:block; font-family:'JetBrains Mono',monospace;
  font-size:10px; font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-top:2px;
}
.head-nav{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.head-nav a{
  font-size:14px; font-weight:600; color:var(--ink-soft);
  text-decoration:none; white-space:nowrap;
  padding:8px 14px; border-radius:999px;
  border:1px solid transparent;
  transition:border-color .15s, color .15s, background-color .15s;
}
.head-nav a:hover{ color:var(--indigo); border-color:var(--line); }
.head-nav a.on{ color:var(--indigo); background:#eeeafa; }
.head-nav a.btn-outline{
  border-color:var(--indigo); color:var(--indigo);
}
.head-nav a.btn-outline:hover{
  background:var(--indigo); color:#fff;
}
.lang-select{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  padding:8px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--ink);
  cursor:pointer;
  transition:border-color .15s;
}
.lang-select:hover{ border-color:var(--indigo); }
.lang-select:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; }

/* ---------- Breadcrumb ---------- */
.crumb{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding:22px 0 0;
}
.crumb a{ color:var(--muted); text-decoration:none; }
.crumb a:hover{ color:var(--indigo); }

/* ---------- Article ---------- */
.post-head{ padding:14px 0 26px; }
.post-kicker{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--signal); margin-bottom:12px;
}
h1{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800; letter-spacing:-.03em; line-height:1.12;
  font-size:clamp(28px,5.2vw,44px); margin-bottom:14px;
}
.post-lead{ font-size:18px; color:var(--ink-soft); }
.post-meta{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.06em; color:var(--muted);
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
}

article{ padding-bottom:40px; }
article h2{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800; letter-spacing:-.02em; line-height:1.2;
  font-size:clamp(21px,3.4vw,27px); margin:38px 0 12px;
}
article h3{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:600; font-size:18px; margin:26px 0 8px;
}
article p{ margin-bottom:16px; }
article ul, article ol{ margin:0 0 18px 22px; }
article li{ margin-bottom:7px; }
article a{ color:var(--indigo); text-decoration:underline; text-underline-offset:2px; }
article strong{ font-weight:600; color:var(--ink); }

/* ---------- Verdict / callout box ---------- */
.callout{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--signal);
  border-radius:var(--r); padding:18px 20px; margin:26px 0;
}
.callout h3{ margin-top:0; }
.callout p:last-child{ margin-bottom:0; }

/* ---------- Comparison table ---------- */
.cmp{
  width:100%; border-collapse:collapse; margin:22px 0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; font-size:15px;
}
.cmp th, .cmp td{
  padding:11px 13px; text-align:left;
  border-bottom:1px solid var(--line); vertical-align:top;
}
.cmp thead th{
  background:var(--ink); color:#fff; font-weight:600; font-size:13px;
}
.cmp tbody tr:last-child td{ border-bottom:none; }
.cmp td:first-child{ font-weight:600; color:var(--ink-soft); }

/* ---------- Product card (inline in article) ---------- */
.pick{
  display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 18px; margin:18px 0;
  text-decoration:none; color:inherit; transition:border-color .15s;
}
.pick:hover{ border-color:var(--indigo); }
.pick-label{
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.pick-name{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:600;
  font-size:17px; margin:5px 0 4px; color:var(--ink);
}
.pick-price{ font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--indigo); }

/* ---------- Blog index listing ---------- */
.list-head{ padding:34px 0 8px; }
.post-grid{ display:grid; gap:16px; padding:18px 0 50px; }
@media(min-width:720px){ .post-grid{ grid-template-columns:1fr 1fr; } }

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:20px 22px;
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:border-color .15s, transform .15s;
}
.card:hover{ border-color:var(--indigo); transform:translateY(-2px); }
.card-kicker{
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--signal);
}
.card h2{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  letter-spacing:-.02em; font-size:20px; line-height:1.25; margin:9px 0 8px;
}
.card p{ font-size:15px; color:var(--ink-soft); margin-bottom:14px; }
.card-date{
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--muted); margin-top:auto;
}

.empty-note{
  background:var(--surface); border:1px dashed var(--line);
  border-radius:var(--r); padding:22px; color:var(--muted); font-size:15px;
}

/* ---------- Footer ---------- */
.site-foot{
  background:var(--ink); color:#c7c2e0;
  padding:34px 0 26px; margin-top:40px;
}
.foot-inner{
  display:flex; flex-wrap:wrap; gap:16px 22px;
  align-items:center; justify-content:space-between;
}
.site-foot .foot-nav{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap;
}
.site-foot .foot-nav a{
  color:#f1eefc; font-weight:600; font-size:14.5px;
  text-decoration:none; display:inline-flex; align-items:center;
  margin:0 22px 9px 0;
}
.site-foot .foot-nav a::before{ margin-right:7px; }
.site-foot .foot-nav a::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--signal); flex:0 0 auto;
}
.site-foot .foot-nav a:hover{ color:var(--signal); text-decoration:underline; }
.foot-copy{
  border-top:1px solid rgba(255,255,255,.14);
  margin-top:20px; padding-top:16px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; color:#8b85ad;
}

.disclosure{
  font-size:13px; color:var(--muted);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:14px 16px; margin:30px 0 0;
}

/* ================= Kansikaruselli oppaat-sivulla ================= */
.hero-slider{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  margin:22px 0 30px;
  background:var(--ink);
}
.hero-slide{
  display:none;
  position:relative;
  min-height:320px;
  text-decoration:none;
  color:#fff;
}
.hero-slide.on{ display:block; }
@media(min-width:800px){ .hero-slide{ min-height:420px; } }

.hero-slide img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.hero-slide .shade{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(22,18,58,.92) 0%, rgba(22,18,58,.55) 45%, rgba(22,18,58,.15) 100%);
}
.hero-slide .txt{
  position:relative;
  padding:28px 26px 30px;
  min-height:320px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
@media(min-width:800px){ .hero-slide .txt{ min-height:420px; padding:36px 40px 40px; max-width:70%; } }

.hero-slide .kick{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:#ffb08c; margin-bottom:10px;
}
.hero-slide h2{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800; letter-spacing:-.025em; line-height:1.12;
  font-size:clamp(24px,4.4vw,40px); color:#fff; margin:0 0 10px;
}
.hero-slide p{
  color:#d8d2f0; font-size:15px; line-height:1.55; margin:0 0 14px; max-width:62ch;
}
.hero-slide .go{
  font-size:14px; font-weight:600; color:#fff;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px; padding:9px 18px;
  align-self:flex-start;
}
.hero-slide:hover .go{ background:var(--signal); border-color:var(--signal); }

.slider-dots{
  position:absolute; right:16px; bottom:16px;
  display:flex; gap:7px; z-index:3;
}
.slider-dots button{
  width:9px; height:9px; padding:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.7); background:transparent;
  cursor:pointer;
}
.slider-dots button[aria-current="true"]{ background:#fff; }

/* ================= Kuvat artikkelin sisalla ================= */
figure.shot{ margin:26px 0; }
figure.shot img{
  width:100%; height:auto; display:block;
  border-radius:var(--r); border:1px solid var(--line);
  background:var(--surface);
}
figure.shot figcaption{
  font-size:13px; color:var(--muted); margin-top:8px; line-height:1.5;
}

/* kortin kansikuva listauksessa */
.card-img{
  display:block; width:100%; aspect-ratio:16/9;
  object-fit:cover; border-radius:10px;
  margin:-4px 0 12px; border:1px solid var(--line);
}

/* ---------- Artikkelin pääkuva ---------- */
.post-hero{
  margin:0 0 26px;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  aspect-ratio:16/7;
}
.post-hero img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* ---------- Tuotekortti kuvalla ---------- */
.pick{
  display:flex; align-items:center; gap:15px;
}
.pick-thumb{
  flex:0 0 74px; width:74px; height:74px;
  border-radius:10px; overflow:hidden;
  background:var(--bg); border:1px solid var(--line);
}
.pick-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pick-text{ display:flex; flex-direction:column; min-width:0; }

/* ---------- Kuva artikkelin sisällä ---------- */
figure.inline-shot{
  margin:26px 0;
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:var(--surface);
}
figure.inline-shot img{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
figure.inline-shot figcaption{
  padding:9px 14px; font-size:13px; color:var(--muted);
  border-top:1px solid var(--line);
}

/* ---------- Vaihtuva nostokuva listaussivulla ---------- */
.rotator{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--ink);
  margin:18px 0 8px;
  aspect-ratio:16/8;
}
@media(max-width:640px){ .rotator{ aspect-ratio:4/3; } }

.rot-slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity .7s ease;
  text-decoration:none; color:#fff;
  display:block;
}
.rot-slide.on{ opacity:1; }
.rot-slide img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.rot-shade{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(22,18,58,.92) 0%, rgba(22,18,58,.55) 45%, rgba(22,18,58,.12) 100%);
}
.rot-body{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 28px;
}
.rot-kicker{
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--signal);
}
.rot-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800; letter-spacing:-.02em; line-height:1.15;
  font-size:clamp(21px,3.6vw,34px);
  margin:7px 0 6px; color:#fff;
}
.rot-sub{
  font-size:15px; color:#d5cff0; max-width:62ch;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rot-dots{
  position:absolute; right:18px; top:16px;
  display:flex; gap:7px; z-index:3;
}
.rot-dots button{
  width:9px; height:9px; padding:0; border-radius:999px;
  border:1px solid rgba(255,255,255,.65); background:transparent;
  cursor:pointer;
}
.rot-dots button.on{ background:#fff; }

/* ---------- Artikkelikortin kuva ---------- */
img.card-img{
  width:calc(100% + 44px);
  margin:-20px -22px 14px;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  background:var(--bg);
}

/* ---------- Yhteydenottolomake ---------- */
.contact-form{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:24px 24px 26px; margin:8px 0 8px;
}
.field{ margin-bottom:18px; }
.field label{
  display:block; font-size:14px; font-weight:600;
  color:var(--ink); margin-bottom:6px;
}
.field .opt{ font-weight:400; color:var(--muted); }
.field .req{ color:var(--signal); }
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:15px;
  padding:11px 13px;
  border:1px solid var(--line); border-radius:10px;
  background:var(--bg); color:var(--ink);
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--indigo); outline-offset:1px; background:var(--surface);
}
.form-privacy{ font-size:13px; color:var(--muted); margin:0 0 18px; }
.submit-btn{
  font:inherit; font-size:15px; font-weight:600;
  background:var(--indigo); color:#fff;
  border:none; border-radius:999px;
  padding:13px 26px; cursor:pointer;
}
.submit-btn:hover{ filter:brightness(1.08); }
.hp{ position:absolute; left:-9999px; }

.sent-note{
  background:#e8f5e9; border:1px solid #bcdfc0;
  border-left:3px solid #2e7d32;
  border-radius:var(--r); padding:16px 20px; margin:0 0 22px;
}
.sent-note h3{ margin:0 0 5px; font-size:17px; }
.sent-note p{ margin:0; }

/* ---------- Yhteydenottolomake (tiivis) ---------- */
.contact-box{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px 20px;
  margin:26px 0 10px;
}
.contact-box h2{ margin:0 0 4px; font-size:19px; }
.contact-box > p{ font-size:14px; color:var(--ink-soft); margin-bottom:14px; }

.field-row{ display:grid; gap:10px; }
@media(min-width:560px){ .field-row{ grid-template-columns:1fr 1fr; } }

.field{ margin-bottom:10px; }
.field label{
  display:block; font-size:12px; font-weight:600;
  color:var(--muted); margin-bottom:4px;
}
.field input[type=text],
.field input[type=email],
.field textarea{
  width:100%;
  font:inherit; font-size:14px;
  color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:9px;
  padding:9px 11px;
}
.field textarea{ min-height:86px; resize:vertical; }
.field input:focus, .field textarea:focus{
  outline:2px solid var(--indigo); outline-offset:1px; background:var(--surface);
}
.consent{
  display:flex; gap:9px; align-items:flex-start;
  font-size:13px; line-height:1.45; color:var(--muted); margin:10px 0 14px;
}
.consent input{ margin-top:2px; flex:0 0 auto; width:15px; height:15px; }
.btn-send{
  font:inherit; font-size:14px; font-weight:600;
  background:var(--indigo); color:#fff;
  border:0; border-radius:999px; padding:10px 22px; cursor:pointer;
}
.btn-send:hover{ filter:brightness(1.08); }
.btn-send[disabled]{ opacity:.55; cursor:default; }
.form-note{ font-size:12px; color:var(--muted); margin-top:9px; }
.form-msg{
  margin-top:14px; padding:12px 15px; border-radius:10px;
  font-size:14px; display:none;
}
.form-msg.ok{ display:block; background:#e8f5e9; color:#1b5e20; border:1px solid #c8e6c9; }
.form-msg.err{ display:block; background:#fdecea; color:#8a1c12; border:1px solid #f5c6c2; }
.hp{ position:absolute; left:-9999px; }

/* ================= Duo-nosto: kaksi opasta rinnakkain ================= */
.duo{ position:relative; margin:18px 0 26px; }
.duo-view{ overflow:hidden; border-radius:var(--r); }
.duo-track{
  display:flex;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.duo-card{
  flex:0 0 100%;
  min-width:0;
  padding-right:0;
  text-decoration:none; color:#fff;
}
.duo-inner{
  position:relative; display:block;
  border-radius:var(--r); overflow:hidden;
  background:var(--ink);
  aspect-ratio:16/10;
}
.duo-card img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.duo-shade{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(22,18,58,.94) 0%, rgba(22,18,58,.58) 48%, rgba(22,18,58,.12) 100%);
}
.duo-body{
  position:absolute; left:0; right:0; bottom:0;
  padding:20px 22px 22px;
}
.duo-kicker{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#ffb08c; margin-bottom:7px;
}
.duo-title{
  display:block;
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800; letter-spacing:-.02em; line-height:1.15;
  font-size:clamp(19px,2.3vw,26px); color:#fff; margin-bottom:6px;
}
.duo-sub{
  display:block; font-size:14px; line-height:1.5; color:#d5cff0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.duo-go{
  display:inline-block; margin-top:12px;
  font-size:13px; font-weight:600; color:#fff;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px; padding:7px 15px;
}
.duo-card:hover .duo-go{ background:var(--signal); border-color:var(--signal); }

@media(min-width:760px){
  .duo-card{ flex:0 0 50%; padding-right:16px; }
  .duo-inner{ aspect-ratio:4/3; }
  .duo-body{ padding:22px 24px 24px; }
}

.duo-dots{
  display:flex; gap:7px; justify-content:center;
  margin-top:14px;
}
.duo-dots button{
  width:9px; height:9px; padding:0; border-radius:999px;
  border:1px solid var(--muted); background:transparent; cursor:pointer;
}
.duo-dots button.on{ background:var(--ink); border-color:var(--ink); }

/* ================= Nostot: kaksi rinnakkain, yksi karuselli ================= */
.featured{ position:relative; margin:20px 0 26px; }

.feat-page{ display:none; }
.feat-page.on{ display:block; }
.feat-page:after{ content:""; display:table; clear:both; }

.feat-card{
  position:relative;
  display:block;
  float:none;
  width:100%;
  margin:0 0 14px;
  overflow:hidden;
  border-radius:var(--r);
  background:var(--ink);
  text-decoration:none;
  color:#fff;
  padding-top:62%;              /* kuvasuhde ilman aspect-ratiota */
  transition:transform .15s;
}
@media(min-width:700px){
  .feat-card{ float:left; width:49%; padding-top:32%; margin-bottom:0; }
  .feat-card + .feat-card{ float:right; }
}
.feat-card:hover{ transform:translateY(-2px); }

.feat-card img{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.feat-shade{
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:linear-gradient(to top, rgba(22,18,58,.94) 0%, rgba(22,18,58,.6) 48%, rgba(22,18,58,.12) 100%);
}
.feat-body{
  position:absolute; left:0; right:0; bottom:0;
  padding:18px 20px 20px;
  display:block;
}
.feat-kicker{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#ffb08c; margin-bottom:6px;
}
.feat-title{
  display:block;
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800; letter-spacing:-.02em; line-height:1.15;
  font-size:clamp(18px,2.2vw,24px);
  color:#fff; margin-bottom:5px;
}
.feat-sub{
  display:block;
  font-size:13.5px; line-height:1.45; color:#d5cff0;
  max-height:2.9em; overflow:hidden;
}

.feat-dots{
  display:block; text-align:center; clear:both; padding-top:14px;
}
.feat-dots button{
  width:9px; height:9px; padding:0; margin:0 4px; border-radius:999px;
  border:1px solid var(--muted); background:transparent;
  cursor:pointer; display:inline-block;
}
.feat-dots button[aria-current="true"]{ background:var(--ink); border-color:var(--ink); }




























































/* === OSASTOLINKIT ALKAA (generoitu) === */
/* ---------- Osastolinkit oppaan lopussa ---------- */
.dept-links{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); padding:20px 22px; margin:34px 0 26px;
}
.dept-links h2{ margin:0 0 6px; font-size:19px; }
.dept-links p{ margin:0 0 14px; color:var(--ink-soft); font-size:15px; }
.dept-links ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:9px; }
.dept-links a{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border:1px solid var(--line); border-radius:999px;
  font-size:14px; font-weight:600; color:var(--ink-soft); text-decoration:none;
}
.dept-links a span{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); }
.dept-links a:hover{ border-color:var(--indigo); color:var(--indigo); }
/* === OSASTOLINKIT LOPPUU === */

/* === MAINOSMERKINNAT ALKAA (generoitu) === */
/* ---------- Mainosmerkinnat (Adtractionin saannot 3 ja 4) ---------- */
/* Sama ulkoasu kuin osastosivuilla: oranssi pallo ennen tekstia. */
.ad-strip{
  background:var(--ink); color:#c7c2e0; text-align:center;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; padding:7px 12px;
}
.ad-strip span::before{content:"● "; color:var(--signal)}
.pick-label{ color:var(--signal); }
/* === MAINOSMERKINNAT LOPPUU === */

/* === NAVI ALKAA (generoitu) === */
/* ---------- Ylapalkin painikkeet: sama ulkoasu kaikilla sivutyypeilla ---------- */
.head-inner{ justify-content:flex-start; flex-wrap:wrap; gap:14px 22px; }
.head-nav{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.head-nav a, .head-nav .lang-select, .head-nav a.btn-outline, .head-nav a.head-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 16px;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14px; font-weight:600; line-height:1; white-space:nowrap;
  color:var(--ink-soft); background:var(--surface);
  border:1px solid var(--line); border-radius:999px;
  text-decoration:none; cursor:pointer;
  transition:border-color .15s, color .15s, background-color .15s;
}
.head-nav a:hover, .head-nav .lang-select:hover, .head-nav a.btn-outline:hover{
  color:var(--indigo); border-color:var(--indigo); background:var(--surface);
}
/* nykyinen sivu tummana, jotta kayttaja nakee missa on */
.head-nav a.on, .head-nav a.on:hover{
  background:var(--indigo); border-color:var(--indigo); color:#fff;
}
.head-nav a:focus-visible, .head-nav .lang-select:focus-visible{
  outline:2px solid var(--indigo); outline-offset:2px;
}
.lang-select{ appearance:none; -webkit-appearance:none; padding-right:16px; }
@media (max-width:560px){
  .head-nav a, .head-nav .lang-select{ height:34px; padding:0 13px; font-size:13px; }
}
/* === NAVI LOPPUU === */