/* FinnishCitizenshipTest.com — "trail map" identity: snow, pine, lake, trail-marker orange. */
@font-face{font-family:"Barlow Condensed";font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Literata";font-weight:400;font-display:swap;src:url(/assets/fonts/literata-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Literata";font-weight:400;font-style:italic;font-display:swap;src:url(/assets/fonts/literata-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Literata";font-weight:600;font-display:swap;src:url(/assets/fonts/literata-latin-600-normal.woff2) format("woff2")}

:root{
  --snow:#EEF2EF;
  --paper:#FFFFFF;
  --pine:#10302A;
  --pine-2:#46605A;
  --lake:#1F5673;
  --lake-dark:#163F55;
  --marker:#E8561B;
  --moss:#2F7347;
  --berry:#B0262F;
  --rule:#C9D4CE;
  --rule-2:#E1E8E4;
  --sign:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --read:"Literata",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--snow);color:var(--pine);font-family:var(--read);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--lake);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--lake-dark);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--marker);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--sign);color:var(--pine);margin:0;line-height:1.02;letter-spacing:.005em}
h1{font-size:clamp(2.6rem,6vw,4.4rem);font-weight:700}
h2{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:700}
h3{font-size:1.45rem;font-weight:600;line-height:1.1}
p{margin:0 0 1em}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
@media (max-width:640px){.wrap{padding:0 16px}}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;background:#fff;padding:8px 12px;z-index:10}

/* header */
.top{background:var(--paper);border-bottom:3px solid var(--pine)}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:66px}
.brand{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--pine);font-family:var(--sign);font-weight:700;font-size:1.45rem;letter-spacing:.01em;white-space:nowrap}
.brand:hover{color:var(--pine)}
.brand small{font-weight:500;color:var(--pine-2);font-size:1.05rem}
.nav{display:flex;gap:24px;margin-left:auto}
.nav a{font-family:var(--sign);font-weight:600;font-size:1.15rem;color:var(--pine);text-decoration:none;padding:4px 0;border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--marker)}
@media (max-width:820px){.top .wrap{flex-wrap:wrap;gap:2px 18px;padding-top:10px}.nav{margin-left:0;width:100%;overflow-x:auto;padding-bottom:8px;gap:20px;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav a{white-space:nowrap}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sign);font-weight:700;font-size:1.2rem;letter-spacing:.02em;padding:12px 22px;border:2px solid var(--pine);background:var(--pine);color:#fff;text-decoration:none;cursor:pointer;border-radius:0}
.btn:hover{background:var(--lake-dark);border-color:var(--lake-dark);color:#fff;text-decoration:none}
.btn-orange{background:var(--marker);border-color:var(--marker)}
.btn-orange:hover{background:#C7440F;border-color:#C7440F}
.btn-line{background:transparent;color:var(--pine)}
.btn-line:hover{background:var(--pine);color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* hero */
.hero{position:relative;padding:60px 0 56px;overflow:hidden;border-bottom:1px solid var(--rule)}
.hero::before{content:"";position:absolute;inset:0;background:url(/assets/img/contours.svg) right -120px center/1100px auto no-repeat;opacity:.9;pointer-events:none}
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.hero h1{font-size:clamp(3rem,8vw,6.2rem);line-height:.92;max-width:8ch}
.hero .lead{font-size:1.18rem;max-width:34em;margin:22px 0 26px;color:var(--pine-2)}
.countdown{display:flex;align-items:baseline;gap:12px;margin-top:22px;font-family:var(--sign)}
.countdown b{font-size:2.6rem;font-weight:700;color:var(--marker);line-height:1}
.countdown span{font-size:1.15rem;font-weight:500;color:var(--pine-2);line-height:1.2}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero::before{background-position:center top;opacity:.55}}

/* trail route (the citizenship path) */
.route{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:stop;position:relative}
.route::before{content:"";position:absolute;left:14px;right:14px;top:14px;border-top:3px dashed var(--pine-2)}
.route li{position:relative;padding:44px 18px 0 0}
.route li::before{counter-increment:stop;content:counter(stop);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--paper);border:4px solid var(--marker);font:700 .95rem/22px var(--sign);text-align:center;color:var(--pine)}
.route li.now::before{background:var(--marker);color:#fff}
.route h3{font-size:1.35rem;margin-bottom:6px}
.route p{font-size:.97rem;margin:0;color:var(--pine-2)}
@media (max-width:820px){.route{grid-template-columns:1fr}.route::before{left:14px;right:auto;top:14px;bottom:14px;border-top:0;border-left:3px dashed var(--pine-2)}.route li{padding:0 0 26px 48px}}

/* sections */
.sec{padding:56px 0}
.sec + .sec{border-top:1px solid var(--rule)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.sec-head p{margin:8px 0 0;max-width:40em;color:var(--pine-2)}
.sec-head a{font-family:var(--sign);font-weight:600;font-size:1.15rem}

/* topic boards (like trail signposts) */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.post{display:block;background:var(--paper);border-left:6px solid var(--lake);padding:18px 20px;text-decoration:none;color:var(--pine)}
.post:hover{border-left-color:var(--marker);color:var(--pine)}
.post h3{margin-bottom:6px}
.post p{margin:0;font-size:.95rem;color:var(--pine-2)}
.post .n{display:block;font-family:var(--sign);font-weight:600;color:var(--lake);margin-top:10px}

/* page head */
.head{padding:44px 0 26px}
.crumbs{font-family:var(--sign);font-weight:500;font-size:1.05rem;color:var(--pine-2);margin-bottom:12px}
.crumbs a{color:var(--pine-2)}
.head h1{max-width:20ch}
.head .lead{font-size:1.15rem;color:var(--pine-2);max-width:40em;margin:14px 0 0}
.meta{font-family:var(--sign);font-size:1.05rem;color:var(--pine-2);margin-top:10px}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start;padding-bottom:20px}
@media (max-width:940px){.layout{grid-template-columns:1fr}}
.card{background:var(--paper);padding:30px 34px;margin-bottom:28px}
@media (max-width:640px){.card{padding:22px 18px}}

/* reading */
.prose{max-width:68ch}
.prose h2{font-size:2rem;margin:1.5em 0 .45em}
.prose h3{margin:1.3em 0 .35em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1em}
.prose li{margin:.35em 0}
.prose table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.97rem}
.prose th,.prose td{text-align:left;border-bottom:1px solid var(--rule);padding:8px 10px 8px 0;vertical-align:top}
.prose th{font-family:var(--sign);font-weight:600;font-size:1.1rem}
.note{font-size:.92rem;color:var(--pine-2)}
.fact{border:2px solid var(--pine);padding:16px 20px;margin:0 0 1.4em;background:#F7FAF8}
.fact strong{font-family:var(--sign);font-size:1.2rem;display:block;margin-bottom:2px}
.fact p:last-child{margin:0}

/* quiz */
.quiz{background:var(--paper);margin-bottom:28px}
.quiz-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline;padding:16px 28px;background:var(--pine);color:#fff}
.quiz-head b{font-family:var(--sign);font-size:1.4rem;font-weight:700}
.quiz-head span{font-family:var(--sign);font-size:1.05rem;color:#C9DAD3}
.quiz-body{padding:6px 28px 14px}
@media (max-width:640px){.quiz-head,.quiz-body{padding-left:16px;padding-right:16px}}
.q{padding:20px 0;border-bottom:1px solid var(--rule-2)}
.q:last-child{border-bottom:0}
.q-top{font-family:var(--sign);font-weight:600;color:var(--lake);font-size:1rem;margin-bottom:2px}
.q-text{font-weight:600;font-size:1.06rem;margin:0 0 10px;line-height:1.45}
.opts{display:grid;gap:6px}
.opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:#F5F8F6;border:1px solid var(--rule-2);padding:10px 12px;font:inherit;font-size:1rem;color:var(--pine);cursor:pointer;line-height:1.4}
.opt:hover{border-color:var(--pine-2)}
.dot{flex:0 0 18px;width:18px;height:18px;border-radius:50%;border:3px solid var(--pine-2);margin-top:2px;background:#fff;transition:background .15s,border-color .15s}
.opt.picked .dot{background:var(--marker);border-color:var(--marker)}
.answered .opt{cursor:default}
.answered .opt:hover{border-color:var(--rule-2)}
.opt.right{background:#E7F2EA;border-color:var(--moss);font-weight:600}
.opt.right .dot{background:var(--moss);border-color:var(--moss)}
.opt.wrong{background:#F8E9EA;border-color:var(--berry);color:var(--berry)}
.opt.wrong .dot{background:var(--berry);border-color:var(--berry)}
.q-result{margin:8px 0 0;font-size:.93rem;min-height:1.2em}
.q-result.ok{color:var(--moss)}.q-result.no{color:var(--berry)}
.score{display:none;padding:14px 28px;border-top:3px solid var(--pine);font-family:var(--sign);font-size:1.25rem;font-weight:600}
.score.show{display:block}
@media (max-width:640px){.score{padding:12px 16px}}

/* partner box */
.partner{background:var(--paper);border-top:6px solid var(--marker);padding:24px 26px;margin-bottom:28px}
.partner h3{margin-bottom:8px}
.partner p{font-size:.97rem;color:var(--pine-2)}
.partner .price{font-family:var(--sign);font-size:1.6rem;font-weight:700;color:var(--pine);display:block;margin:4px 0 14px}
.partner .fine{font-size:.85rem;margin:10px 0 0}
.partner-wide{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center}
.partner-wide .price{margin:0}
@media (max-width:760px){.partner-wide{grid-template-columns:1fr}}

/* lists */
.links{list-style:none;margin:0 0 1.2em;padding:0}
.links li{border-bottom:1px solid var(--rule)}
.links a{display:block;padding:12px 0;text-decoration:none;color:var(--pine);font-family:var(--sign);font-weight:600;font-size:1.25rem;line-height:1.15}
.links a small{display:block;font-family:var(--read);font-weight:400;font-size:.92rem;color:var(--pine-2);margin-top:3px}
.links a:hover{color:var(--lake)}

/* FAQ */
.faq details{border-bottom:1px solid var(--rule);background:var(--paper);padding:0 22px}
.faq details+details{margin-top:6px}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font-family:var(--sign);font-weight:600;font-size:1.3rem;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--marker);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq details p{max-width:66ch}

/* warm-up in hero */
.warm{background:var(--paper);box-shadow:0 18px 40px -28px rgba(16,48,42,.6)}
.warm .quiz-body{min-height:250px}
.warm-foot{padding:0 28px 22px}
.warm-end b{display:block;font-family:var(--sign);font-size:2.2rem;line-height:1;margin:18px 0 8px}
.warm-end p{color:var(--pine-2)}
@media (max-width:640px){.warm-foot{padding:0 16px 16px}}

/* full test */
.test-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 28px;background:var(--pine);color:#fff;font-family:var(--sign);font-size:1.2rem}
.timer{font-weight:700;font-variant-numeric:tabular-nums}
.timer.low{color:#FFB08A}
.track{display:grid;grid-template-columns:repeat(auto-fill,30px);gap:5px;padding:14px 28px;border-bottom:1px solid var(--rule-2)}
.stop{width:30px;height:30px;border-radius:50%;border:2px solid var(--pine-2);background:#fff;font:600 .8rem/1 var(--sign);color:var(--pine);cursor:pointer;padding:0}
.stop.done{background:var(--pine);border-color:var(--pine);color:#fff}
.stop.cur{outline:3px solid var(--marker);outline-offset:1px}
.test-q{padding:20px 28px 6px}
.test-q .q{border:0;padding-top:0}
.test-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 28px 22px}
.result{padding:26px 28px}
.verdict{font-family:var(--sign);font-weight:700;font-size:2.6rem;line-height:1;margin:0 0 8px}
.verdict.pass{color:var(--moss)}.verdict.fail{color:var(--berry)}
.review li{margin:0 0 12px}
.review .yours{color:var(--berry)}.review .corr{color:var(--moss)}
@media (max-width:640px){.track,.test-q,.test-nav,.result,.test-top{padding-left:16px;padding-right:16px}}

/* contact */
.form{display:grid;gap:16px;max-width:560px}
.form label{display:grid;gap:6px;font-family:var(--sign);font-weight:600;font-size:1.15rem}
.form input,.form textarea{font:inherit;font-family:var(--read);font-size:1rem;padding:12px 14px;border:2px solid var(--pine-2);background:#fff;color:var(--pine);border-radius:0}
.form textarea{min-height:160px;resize:vertical}
.form-msg{display:none;padding:12px 14px}
.form-msg.ok{display:block;background:#E7F2EA;color:var(--moss)}
.form-msg.err{display:block;background:#F8E9EA;color:var(--berry)}

/* footer */
.foot{background:var(--pine);color:#C9DAD3;margin-top:40px;padding:40px 0 46px;font-size:.93rem}
.foot a{color:#fff}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:32px}
.foot .brand{color:#fff;margin-bottom:12px}
.foot .brand small{color:#C9DAD3}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 6px}
.foot h4{font-family:var(--sign);font-weight:600;font-size:1.15rem;color:#fff;margin:0 0 10px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.posts{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.posts{grid-template-columns:1fr}}
.layout .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.layout .posts{grid-template-columns:1fr}}
.layout .card.prose{max-width:none}