/* Opasartikkelit */
.readbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:90;pointer-events:none}
.readbar i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.ahead{padding:calc(68px + clamp(28px,4vw,44px)) 0 clamp(36px,5vw,64px);border-bottom:1px solid var(--line)}
.ahead h1{font-size:clamp(2.2rem,1.4rem + 3.4vw,4.6rem);margin-top:14px;max-width:20ch}
.ahead .lead{font-size:var(--s-1);color:var(--ink-2);max-width:52ch;margin-top:22px;line-height:1.5}
.phase{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;font-size:var(--s--1);font-weight:600;color:var(--ink-2)}
.phase span{background:var(--accent);color:#fff;border-radius:999px;padding:4px 12px}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:30px;font-size:.9rem;color:var(--ink-2)}
.byline img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.byline b{color:var(--ink);font-weight:600}
.byline .dot::before{content:"·";margin-right:16px;color:var(--ink-3)}

.abody{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(32px,6vw,96px);padding-top:clamp(40px,5vw,72px);align-items:start}
.toc{position:sticky;top:110px}
.toc ol{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px;counter-reset:t}
.toc li{counter-increment:t}
.toc ol a{display:flex;gap:10px;text-decoration:none;font-size:.9rem;line-height:1.35;color:var(--ink-3);padding:7px 0 7px 14px;border-left:2px solid var(--line);transition:color .3s,border-color .3s}
.toc ol a::before{content:counter(t,decimal-leading-zero);font-size:.75rem;font-weight:600;padding-top:1px}
.toc ol a:hover{color:var(--ink)}
.toc ol a.on{color:var(--ink);border-color:var(--accent)}
.toolmini{display:grid;gap:2px;margin-top:28px;padding:16px 18px;border-radius:var(--r-sm);background:var(--ink);color:var(--on-dark);text-decoration:none;transition:transform .5s var(--ease)}
.toolmini:hover{transform:translateY(-3px)}
.toolmini small{color:var(--on-dark-2);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.toolmini b{font-family:var(--font-display);font-size:1.15rem;letter-spacing:-.02em}
.toolmini span{color:var(--accent-2);font-size:.88rem;font-weight:600;margin-top:4px}
@media (max-width:960px){.abody{grid-template-columns:1fr}.toc{position:static;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}}

.prose{max-width:720px;font-size:1.08rem;line-height:1.75}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);margin-top:2.2em;scroll-margin-top:110px;letter-spacing:-.035em;line-height:1.1}
.prose ul,.prose ol{padding-left:0;list-style:none;display:grid;gap:.6em}
.prose ul li{position:relative;padding-left:28px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.68em;width:9px;height:9px;border-radius:3px;background:var(--accent)}
.prose ol.steps{counter-reset:s}
.prose ol.steps li{counter-increment:s;position:relative;padding:14px 16px 14px 60px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm)}
.prose ol.steps li::before{content:counter(s);position:absolute;left:14px;top:12px;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:.85rem;font-weight:600}
.quick{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r-sm);padding:20px 24px}
.quick .eyebrow{margin-bottom:8px}
.quick p:last-child{font-size:1.06rem}
.costbox{display:flex;gap:16px;align-items:flex-start;background:var(--ink);color:var(--on-dark);border-radius:var(--r-sm);padding:18px 22px}
.costbox .ci{flex:none;width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700}
.costbox b{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--on-dark-2)}
.costbox p{margin-top:2px;font-weight:600;font-size:1.02rem;line-height:1.5}
.costbox small{display:block;color:var(--on-dark-2);font-size:.78rem;margin-top:6px}
.tipbox{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;background:#FFF4CC;border-radius:var(--r);padding:16px 22px 16px 12px;position:relative;overflow:hidden}
.tipbox .tm{position:relative;width:96px;height:110px;display:grid;place-items:center}
.tipbox .tm span{width:52px;height:52px;border-radius:50%;background:#F5C518;color:var(--ink);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:1.5rem}
.tipbox .tm img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.tipbox b{font-family:var(--font-display);font-size:1.05rem;letter-spacing:-.02em}
.tipbox p{font-size:1rem;line-height:1.6;margin-top:4px}
@media (max-width:520px){.tipbox{grid-template-columns:64px 1fr;padding-left:8px}.tipbox .tm{width:64px;height:80px}}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.45}
.prose th,.prose td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:600;background:var(--bg)}
.prose tr:last-child td{border-bottom:0}
.prose td:last-child{font-variant-numeric:tabular-nums}
.toolcard{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;text-decoration:none;background:var(--accent-soft);border-radius:var(--r);padding:22px 24px;transition:transform .5s var(--ease)}
.toolcard:hover{transform:translateY(-3px)}
.toolcard small{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:#8A3A12}
.toolcard b{display:block;font-family:var(--font-display);font-size:1.4rem;letter-spacing:-.03em;line-height:1.2}
.toolcard p{font-size:.95rem;color:var(--ink-2);margin-top:4px;max-width:40ch;line-height:1.5}
.faqs{margin-top:3em!important}
.faqs h2{margin-bottom:.6em}
.faqs .qa summary{font-size:1.12rem}

.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(56px,7vw,96px)}
.pn a{display:grid;gap:4px;text-decoration:none;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);transition:border-color .3s,transform .5s var(--ease)}
.pn a:hover{border-color:var(--ink);transform:translateY(-3px)}
.pn small{color:var(--ink-3);font-weight:600;font-size:.8rem}
.pn b{font-family:var(--font-display);font-size:var(--s-1);letter-spacing:-.03em}
.pn .next{text-align:right;background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.pn .next small{color:var(--on-dark-2)}
@media (max-width:600px){.pn{grid-template-columns:1fr}}
.tipbox .tm:has(img) span{display:none}