/* Hintaopas — jaettu brändistailaus (redesign 2026). Manrope + coral/petrol/cream/peach.
 * Periaate: iso väli sektioiden VÄLILLÄ, tiukka ryhmän SISÄLLÄ. Coral vain toiminnalle.
 * Petrol = auktoriteetti/data. Peach = lämpö/rytmi. Vihreä = säästö (kotitalousvähennys). */
*{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --coral:#FF6B47; --coral-dark:#E8543A; --coral-light:#FFE9E1;
  --petrol:#0F3D4A; --petrol-mid:#245760; --petrol-deep:#1B4A54; --petrol-light:#5A8593;
  --cream:#FFF8F2; --peach:#FDF0EB; --peach-deep:#F5CCBD; --cream-dark:#F0E8DF; --zebra:#FFFCF9;
  --border:#E8E0D5; --gray:#6B7280; --ok:#1B7A4B; --ok-bg:#F0FAF5;
  --tag-bg:#FFF7E6; --tag-text:#6B5409; --tag-border:#F0E2BC;
  --radius:16px; --maxw:1080px;
  --shadow-rest:0 1px 2px rgba(15,61,74,.04);
  --shadow-lift:0 10px 28px rgba(15,61,74,.09);
}
html{ scroll-behavior:smooth; }
body{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  background:var(--cream); color:var(--petrol); line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--petrol-mid); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:rgba(36,87,96,.35); }
a:hover{ text-decoration-color:var(--coral); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* Eyebrow — rytmittävä tagi ennen otsikoita (coralin hallittu esiintymä) */
.eyebrow{ display:block; font-size:.75rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--coral); margin-bottom:10px; }
.eyebrow.ink{ color:var(--petrol-light); }

/* Draft-banneri — hillitty, ei dominoi ensivaikutelmaa (poistuu julkaisussa) */
.draft-banner{ background:var(--tag-bg); color:var(--tag-text); border-bottom:1px solid var(--tag-border);
  font-size:.76rem; text-align:center; padding:6px 16px; font-weight:600; }

/* Topbar */
.topbar{ position:sticky; top:0; z-index:40; background:rgba(255,248,242,.9);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; padding:15px 24px; }
.brand{ font-weight:800; font-size:1.2rem; color:var(--petrol); letter-spacing:-.02em; text-decoration:none; }
.brand span{ color:var(--coral); }
.topbar nav a{ color:var(--petrol-mid); font-weight:600; font-size:.9rem; margin-left:20px; text-decoration:none; }
.topbar nav a:hover{ color:var(--petrol); }

/* Murupolku */
.crumbs{ font-size:.8rem; color:var(--gray); padding-top:18px; }
.crumbs a{ color:var(--petrol-mid); font-weight:600; }
.crumbs .sep{ margin:0 7px; color:var(--petrol-light); }

/* Hero */
.hero{ padding:84px 0 40px; }
.hero h1{ font-size:clamp(2rem,5vw,3rem); font-weight:800; line-height:1.08;
  letter-spacing:-.025em; max-width:20ch; }
.hero .lede{ margin-top:18px; font-size:clamp(1.05rem,2.4vw,1.25rem); font-weight:500;
  color:var(--petrol-deep); max-width:62ch; line-height:1.5; }
.hero .whatis{ margin-top:14px; font-size:.95rem; color:var(--gray); max-width:60ch; }
.hero-split{ display:grid; grid-template-columns:1.5fr 1fr; gap:32px; align-items:center; }
.hero-art{ display:flex; justify-content:center; }
.hero-art svg{ width:100%; max-width:300px; height:auto; }
/* Mikro-trust-rivi (ei numeroita) */
.hero-trust{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:24px; }
.hero-trust span{ display:inline-flex; align-items:center; gap:8px; font-size:.9rem;
  font-weight:600; color:var(--petrol-mid); }
.hero-trust svg{ width:18px; height:18px; stroke:var(--coral); flex:none; }

/* Answer-box — featured-snippet-pattern (luku ensin) */
.answer-box{ margin-top:26px; background:var(--peach); border:1px solid var(--peach-deep);
  border-left:4px solid var(--petrol); border-radius:14px; padding:20px 24px; max-width:66ch; }
.answer-box .eyebrow{ color:var(--petrol-light); }
.answer-box strong{ color:var(--petrol); }
.updated{ display:inline-block; margin-top:14px; font-size:.78rem; font-weight:600;
  color:var(--petrol-light); }
.updated::before{ content:'·'; margin-right:8px; color:var(--cream-dark); }

/* Sektiot — iso vertikaalirytmi */
section.block{ padding:64px 0; }
h2{ font-size:clamp(1.5rem,3.6vw,1.875rem); font-weight:700; letter-spacing:-.015em; margin-bottom:8px; }
.sub{ color:var(--petrol-mid); font-size:1rem; margin-bottom:28px; max-width:60ch; }

/* Hintataulukko — näyttää viralliselta hinnastolta */
.price-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; font-size:.97rem; box-shadow:var(--shadow-rest); }
.price-table thead th{ background:var(--petrol); color:var(--cream); font-weight:700;
  font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; }
.price-table th,.price-table td{ padding:14px 18px; text-align:left; border-bottom:1px solid var(--border); }
.price-table tbody tr:nth-child(even){ background:var(--zebra); }
.price-table tr:last-child td{ border-bottom:none; }
.price-table td.price{ font-weight:800; font-size:1.05rem; color:var(--petrol);
  text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.price-table tr.discount td.price{ color:var(--ok); }
.price-table tr.discount{ background:var(--ok-bg); }
.tag-demo{ display:inline-block; font-size:.62rem; font-weight:700; color:var(--tag-text); background:var(--tag-bg);
  border-radius:6px; padding:1px 6px; margin-left:6px; vertical-align:middle; text-transform:uppercase; }
.sources{ font-size:.8rem; color:var(--gray); margin-top:12px; line-height:1.6; }
.sources a{ color:var(--petrol-mid); }
/* Hintaperusta-huomautus taulukon alla (ALV / kotitalousvähennys) — yhtenäinen joka sivulla */
.price-basis{ font-size:.8rem; color:var(--petrol-light); margin-top:12px; line-height:1.5; max-width:72ch; }
/* "Mihin nämä luvut perustuvat" -avattava */
.src-details{ margin-top:12px; }
.src-details summary{ cursor:pointer; font-size:.82rem; font-weight:700; color:var(--petrol-mid);
  list-style:none; display:inline-flex; align-items:center; gap:6px; }
.src-details summary::-webkit-details-marker{ display:none; }
.src-details summary::before{ content:'?'; display:inline-grid; place-items:center; width:18px; height:18px;
  border-radius:50%; background:var(--peach); color:var(--petrol); font-size:.72rem; font-weight:800; }
.src-details p{ margin-top:8px; font-size:.82rem; color:var(--gray); line-height:1.6; }

/* Arviolaskuri — "kelluva työkalu" */
.estimator{ background:var(--peach); border:1px solid var(--peach-deep); border-radius:var(--radius); padding:26px; }
.estimator .row{ display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; }
.field{ flex:1 1 180px; }
.field label{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--petrol-mid); margin-bottom:6px; }
.field input,.field select{ width:100%; padding:12px 14px; border:1.5px solid var(--cream-dark);
  border-radius:10px; font:inherit; background:#fff; color:var(--petrol); }
.field input:focus,.field select:focus{ outline:none; border-color:var(--petrol);
  box-shadow:0 0 0 3px rgba(36,87,96,.12); }
/* Checkboxit pill-toggleina */
.check-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.check-row label{ font-size:.88rem; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:#fff; border:1.5px solid var(--cream-dark); border-radius:999px; padding:8px 14px;
  transition:border-color .15s, background .15s; }
.check-row label:hover{ border-color:var(--petrol-light); }
.check-row label:has(input:checked){ background:var(--cream); border-color:var(--petrol); font-weight:600; }
.check-row input{ accent-color:var(--coral); }
.estimate-out{ margin-top:20px; padding:18px 22px; background:#fff; border:1px solid var(--peach-deep);
  border-radius:12px; display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.estimate-out .amount{ font-size:2.25rem; font-weight:800; color:var(--petrol);
  font-variant-numeric:tabular-nums; display:inline-block; transition:color .15s; }
.estimate-out .amount.flash{ animation:est-pulse .42s ease-out; }
.estimate-out .note{ font-size:.78rem; color:var(--gray); max-width:34ch; }
@keyframes est-pulse{ 0%{ transform:scale(1.07); color:var(--coral); } 100%{ transform:scale(1); } }
.est-trust{ margin-top:16px; font-size:.78rem; color:var(--gray); line-height:1.5;
  border-top:1px dashed var(--peach-deep); padding-top:14px; }

/* "Mihin hinta perustuu" + faktalohkot */
.factor-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.factor{ background:var(--peach); border:1px solid var(--peach-deep); border-radius:14px; padding:22px; }
.factor h3{ font-size:1.05rem; font-weight:700; margin-bottom:6px; }
.factor p{ font-size:.92rem; color:var(--petrol-mid); }
.factor svg{ width:24px; height:24px; stroke:var(--petrol); margin-bottom:12px; }
/* Faktalaatikko (Hyvä tietää) */
.factbox{ background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow-rest); }
.factbox .fact{ padding:16px 0; border-bottom:1px solid var(--cream-dark); }
.factbox .fact:last-child{ border-bottom:none; padding-bottom:0; }
.factbox .fact:first-child{ padding-top:0; }
.factbox h3{ font-size:1.05rem; font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:10px; }
.factbox h3 svg{ width:20px; height:20px; stroke:var(--coral); flex:none; }
.factbox p{ font-size:.94rem; color:var(--petrol-mid); }
.factbox .net{ color:var(--ok); font-weight:700; }

/* UKK */
.faq details{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:4px 20px;
  margin-bottom:10px; box-shadow:var(--shadow-rest); }
.faq summary{ cursor:pointer; font-weight:700; padding:14px 0; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; float:right; color:var(--petrol); font-weight:800; }
.faq details[open] summary::after{ content:'–'; }
.faq details p{ padding:0 0 16px; color:var(--petrol-mid); font-size:.95rem; }

/* CTA-bändi — sivun ainoa "kuuma" coral */
.cta{ background:var(--petrol); color:var(--cream); border-radius:20px; padding:44px 32px; text-align:center; }
.cta h2{ color:#fff; }
.cta p{ color:#CFE0E5; max-width:54ch; margin:10px auto 22px; }
.btn{ display:inline-block; background:var(--coral); color:#fff; font-weight:700; padding:16px 32px;
  border-radius:12px; font-size:1.05rem; text-decoration:none;
  transition:transform .15s, box-shadow .15s, background .15s; }
.btn:hover{ background:var(--coral-dark); transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(255,107,71,.35); text-decoration:none; }
.cta .fine{ margin-top:14px; font-size:.82rem; color:#9FBCC4; }
.badge0{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,233,225,.15);
  color:#FFD9CE; font-weight:700; font-size:.82rem; padding:6px 14px; border-radius:999px;
  margin-bottom:16px; border:1px solid rgba(255,255,255,.12); }
.badge0 svg{ width:15px; height:15px; stroke:#FFD9CE; }

/* Footer */
footer{ border-top:1px solid var(--border); margin-top:64px; padding:32px 0; color:var(--gray); font-size:.85rem; }
footer .wrap{ display:flex; flex-direction:column; gap:12px; }
.foot-links{ display:flex; flex-wrap:wrap; gap:8px 18px; }
footer a{ color:var(--petrol-mid); }
.foot-note{ max-width:74ch; line-height:1.55; }
.foot-copy{ color:var(--petrol-light); }

/* Service-hub-kortit */
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.svc-card{ position:relative; background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:24px; text-decoration:none; box-shadow:var(--shadow-rest);
  transition:transform .18s, box-shadow .18s, border-color .18s; display:block; }
.svc-card:hover{ transform:translateY(-2px); border-color:#BCCDD2; box-shadow:var(--shadow-lift); text-decoration:none; }
.svc-card .ic{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px;
  background:var(--peach); margin-bottom:14px; }
.svc-card .ic svg{ width:24px; height:24px; stroke:var(--petrol); }
.svc-card h3{ font-size:1.125rem; font-weight:700; color:var(--petrol); letter-spacing:-.01em; }
.svc-card p{ font-size:.9rem; color:var(--petrol-mid); margin-top:4px; }
.svc-card .price-hint{ display:block; margin-top:12px; font-size:.85rem; font-weight:700;
  color:var(--petrol); font-variant-numeric:tabular-nums; }
.svc-card .go{ position:absolute; right:22px; bottom:22px; color:var(--petrol-light);
  transition:transform .18s, color .18s; }
.svc-card:hover .go{ transform:translateX(4px); color:var(--coral); }
.svc-card.soon{ opacity:.5; pointer-events:none; }

/* Mobiilin kelluva CTA-palkki */
.sticky-cta{ display:none; }
@media(max-width:720px){
  .sticky-cta{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:rgba(255,248,242,.96); backdrop-filter:blur(10px);
    border-top:1px solid var(--border); padding:10px 14px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  .sticky-cta-btn{ display:block; background:var(--coral); color:#fff; font-weight:700;
    text-align:center; padding:13px 16px; border-radius:12px; font-size:1rem; text-decoration:none; }
  .sticky-cta-btn:hover{ background:var(--coral-dark); text-decoration:none; }
  body.has-sticky-cta{ padding-bottom:84px; }
}

@media(max-width:760px){
  .hero{ padding:48px 0 24px; }
  .hero-split{ grid-template-columns:1fr; gap:8px; }
  .hero-art{ order:-1; max-width:200px; margin:0 auto; }
  section.block{ padding:44px 0; }
  .estimate-out .amount{ font-size:1.8rem; }
  .topbar nav a:first-child{ display:none; }
  /* Hintataulukko → kortit mobiilissa */
  .price-table thead{ display:none; }
  .price-table, .price-table tbody, .price-table tr, .price-table td{ display:block; width:100%; }
  .price-table tr{ border-bottom:1px solid var(--border); padding:8px 0; }
  .price-table tr:nth-child(even){ background:transparent; }
  .price-table td{ border:none; padding:4px 18px; }
  .price-table td.price{ text-align:left; font-size:1.15rem; }
}

/* Hub-haku — instant client-side haku+vastaus (vain etusivu) */
.search-section{ padding:8px 0 0; }
.search-wrap{ max-width:680px; }
.search-label{ display:block; font-size:.75rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--coral); margin-bottom:10px; }
.search-box{ display:flex; align-items:center; gap:12px; background:#fff;
  border:1.5px solid var(--cream-dark); border-radius:14px; padding:4px 18px;
  box-shadow:var(--shadow-rest); transition:border-color .15s, box-shadow .15s; }
.search-box:focus-within{ border-color:var(--petrol); box-shadow:0 0 0 3px rgba(36,87,96,.12); }
.search-box svg{ width:22px; height:22px; stroke:var(--petrol-light); flex:none; }
.search-box input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit;
  font-size:1.05rem; color:var(--petrol); padding:14px 0; }
.search-box input::placeholder{ color:var(--petrol-light); }
.search-hint{ margin-top:10px; font-size:.8rem; color:var(--gray); }
.search-results{ margin-top:18px; display:grid; gap:10px; }
.s-count{ font-size:.82rem; font-weight:700; color:var(--petrol-mid); }
.s-res{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px 20px;
  text-decoration:none; box-shadow:var(--shadow-rest);
  transition:transform .15s, box-shadow .15s, border-color .15s; }
.s-res:hover{ transform:translateY(-2px); border-color:#BCCDD2; box-shadow:var(--shadow-lift); text-decoration:none; }
.s-res-main h3{ font-size:1.05rem; font-weight:700; color:var(--petrol); }
.s-res-desc{ font-size:.86rem; color:var(--petrol-mid); margin-top:2px; }
.s-res-side{ text-align:right; flex:none; }
.s-res-price{ display:block; font-weight:800; color:var(--petrol); font-variant-numeric:tabular-nums; white-space:nowrap; }
.s-res-go{ display:block; font-size:.78rem; font-weight:700; color:var(--coral); margin-top:4px; }
.s-empty{ background:var(--peach); border:1px solid var(--peach-deep); border-radius:14px; padding:22px 24px; }
.s-empty p{ color:var(--petrol-mid); margin-bottom:14px; font-size:.95rem; line-height:1.55; }
.s-empty strong{ color:var(--petrol); }
.s-cta-link{ display:inline-block; margin-top:6px; font-size:.9rem; font-weight:700;
  color:var(--coral); text-decoration:none; }
.s-cta-link:hover{ text-decoration:underline; }
/* Tier 2 — Keikkamo-kategoriat (ei hintaa, ohjaa tarvepyyntöön) */
.s-subhead{ margin:20px 0 2px; font-size:.78rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--petrol-light); }
.s-cat{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--zebra); border:1px solid var(--border); border-radius:12px; padding:13px 18px;
  text-decoration:none; transition:border-color .15s, background .15s; }
.s-cat:hover{ border-color:var(--petrol-light); background:#fff; text-decoration:none; }
.s-cat-main h3{ font-size:.98rem; font-weight:700; color:var(--petrol); }
.s-cat-parent{ font-size:.78rem; color:var(--gray); margin-top:1px; }
.s-cat-go{ font-size:.78rem; font-weight:700; color:var(--coral); white-space:nowrap; flex:none; }
@media(max-width:560px){
  .s-res, .s-cat{ flex-direction:column; align-items:flex-start; gap:8px; }
  .s-res-side{ text-align:left; }
}

@media(prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .estimate-out .amount.flash{ animation:none; }
  .svc-card, .btn, .svc-card .go, .s-res, .s-cat{ transition:none; }
}