:root{
  --land:#ece2c6;
  --land-2:#ddd0ae;
  --land-3:#d3c49e;
  --sea:#bcd6cf;
  --sea-2:#a3c6be;
  --ink:#191c1b;
  --ink-2:#3a3830;
  --x:#c3302a;
  --x-dark:#962019;
  --mint:#62e3c4;
  --pos:#0b5246;
  --m:clamp(16px,3.2vw,40px);
  --display:"Bricolage Grotesque",sans-serif;
  --text:"Figtree",sans-serif;
  /* tyyppiasteikko: display / h2 / h3 / lead / body / small */
  --t-display:clamp(52px,6.6vw,100px);
  --t-h2:clamp(44px,5.4vw,80px);
  --t-lead:20px;
  --t-body:17px;
  --t-small:16px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scrollbar-color:var(--ink-2) var(--land)}
body{overflow-x:clip;margin:0;background:var(--land);color:var(--ink);font:400 var(--t-body)/1.55 var(--text);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
::selection{background:var(--x);color:var(--land)}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--x);outline-offset:3px}
img{display:block;max-width:100%}
.wrap{padding-inline:var(--m);max-width:1440px;margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:800;letter-spacing:-.02em;line-height:.92;margin:0;text-wrap:balance}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--x);color:#fff;font:700 16px/1 var(--text);padding:15px 24px;border:0;border-radius:999px;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s var(--ease)}
.btn:hover{background:var(--x-dark);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.ink{background:var(--ink)}
.btn.ink:hover{background:#000}

/* Aarni: logon kuvitus pyöreänä merkkinä, ainoa paikka jossa minttu esiintyy */
.aarni{display:block;border-radius:50%;overflow:hidden;background:var(--mint);aspect-ratio:1}
.aarni img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;transform:scale(1.18)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--sea-2)}
.hero .map{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;object-position:78% 30%;animation:drift 40s var(--ease) both}
@keyframes drift{from{transform:scale(1.08) translate(-1%,1%)}to{transform:scale(1) translate(0,0)}}
.bar{position:relative;z-index:3;display:flex;align-items:center;gap:16px;padding-block:16px;font-weight:500;font-size:16px}
.bar .brand{background:var(--land);padding:6px 14px 6px 8px;border-radius:999px}
.bar .brand img{height:38px;width:auto}
.bar nav{display:flex;gap:6px;margin-left:auto;background:var(--land);border-radius:999px;padding:6px}
.bar nav a{text-decoration:none;padding:9px 14px;border-radius:999px;transition:background .2s}
.bar nav a:hover{background:var(--land-2)}
.menu{display:none;position:relative;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;background:var(--land);border-radius:999px;padding:12px 18px;font-weight:700;display:flex;align-items:center;gap:10px}
.menu summary::-webkit-details-marker{display:none}
.menu summary i{display:grid;gap:4px}
.menu summary i b{display:block;width:18px;height:3px;background:var(--ink);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.menu[open] summary i b:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu[open] summary i b:nth-child(2){opacity:0}
.menu[open] summary i b:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu .panel{position:absolute;right:0;top:calc(100% + 8px);width:min(300px,calc(100vw - 32px));background:var(--ink);padding:14px 12px;margin:0;border-radius:0;gap:2px;display:grid;clip-path:polygon(0 2%,97% 0,100% 98%,3% 100%)}
.menu .panel a{text-decoration:none;font-size:20px;font-weight:700;padding:14px 16px;border-radius:12px;color:var(--land)}
.menu .panel a:hover{background:#2e3331}
.menu .panel a.go{background:var(--x);color:#fff;margin-top:6px;text-align:center}
.menu .panel a.go:hover{background:var(--x-dark)}
.hero .grid{position:relative;z-index:1;display:grid;grid-template-columns:5fr 7fr;gap:clamp(20px,2.4vw,36px);align-items:start;padding-block:clamp(20px,4vw,56px) clamp(48px,6vw,96px)}
.sheet{position:relative;background:var(--land);padding:clamp(24px,3vw,44px);clip-path:polygon(0 0,97% 1%,100% 0,99% 52%,100% 100%,3% 99%,0 100%,1% 48%)}
.sheet h1{font-size:var(--t-display)}
.lede{font-size:var(--t-lead);max-width:34ch;margin:20px 0 28px}
.filter{border:0;padding:0;margin:0}
.filter legend{font-weight:700;margin-bottom:12px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{padding:12px 18px;border-radius:999px;background:var(--land-2);font-weight:500;cursor:pointer;transition:background .2s,color .2s,transform .2s var(--ease)}
.chips label:hover{background:var(--land-3)}
.chips label:active{transform:scale(.96)}
.chips input:checked + label{background:var(--ink);color:var(--land)}
.chips input:focus-visible + label{outline:3px solid var(--x);outline-offset:2px}
.guide{display:flex;align-items:center;gap:16px;margin-top:30px}
.guide .aarni{width:84px;flex:none}
.guide p{font-size:var(--t-small);color:var(--ink-2);max-width:32ch}
.guide b{color:var(--ink)}

/* reitti */
.route{background:var(--sea) url(../img/contours.svg) center/cover no-repeat;padding:28px clamp(18px,2.4vw,36px) 22px;clip-path:polygon(0 1%,4% 0,32% .8%,61% 0,88% 1%,100% 0,100% 99%,93% 100%,67% 99.2%,38% 100%,9% 99%,0 100%)}
.route h2{font-size:clamp(28px,2.6vw,40px);line-height:1}
.route .count{font-size:var(--t-small);color:var(--ink-2);margin:4px 0 10px}
.stops{list-style:none;margin:0;padding:0;position:relative}
.stops .trail{position:absolute;left:clamp(18px,1.7vw,24px);top:30px;bottom:30px;border-left:4px dotted var(--ink);transform-origin:top;animation:trail 1.4s .3s var(--ease) both}
@keyframes trail{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.stop{position:relative;display:grid;grid-template-columns:52px 104px 1fr auto;gap:8px 20px;align-items:center;padding:18px 0;transition:opacity .35s var(--ease)}
.stop.off{opacity:.3}
.x{width:52px;height:52px;display:grid;place-items:center;background:var(--sea);position:relative;z-index:1}
.x{color:var(--x)}
.x svg{width:34px;height:34px;animation:pop .5s var(--ease) both;animation-delay:calc(.5s + var(--i) * .12s)}
@keyframes pop{from{transform:scale(.6) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
.stop.off .x{color:var(--ink-2)}
.logo{width:104px;height:76px;border-radius:8px;display:grid;place-items:center;overflow:hidden}
.logo img{max-width:86%;max-height:78%;object-fit:contain}
.logo.fit{position:relative}
.logo.fit img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);max-width:none;max-height:none;object-fit:contain}
.logo.full img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover}
.logo.dark{background:#16191a}.logo.light{background:#fff}.logo.navy{background:#0d1640}.logo.violet{background:#8a17e8}
.offer b{display:block;font-family:var(--display);font-variation-settings:"wdth" 85;font-size:clamp(21px,1.9vw,27px);line-height:1.3;letter-spacing:-.01em}
.terms{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:17px;color:var(--ink-2);margin-top:4px}
.terms .name{font-weight:700;color:var(--ink)}
.terms .free{color:var(--pos);font-weight:700}
details.more-info{grid-column:2/-1;min-width:0;font-size:var(--t-small)}
details.more-info summary{cursor:pointer;color:var(--ink-2);font-weight:500;width:max-content;min-height:44px;display:flex;align-items:center;gap:8px}
details.more-info summary::-webkit-details-marker{display:none}
details.more-info summary::before{content:"";width:0;height:0;border-left:7px solid currentColor;border-block:5px solid transparent;transition:transform .2s var(--ease)}
details.more-info[open] summary::before{transform:rotate(90deg)}
details.more-info summary{list-style:none}
details.more-info summary:hover{color:var(--ink)}
details.more-info p{margin-top:6px;max-width:60ch}
details.more-info[open] summary{color:var(--ink);margin-bottom:12px}
.info{background:var(--land);padding:clamp(18px,2vw,26px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"perus bonus" "maksut maksut" "kotiutus kotiutus" "fine fine";gap:22px 32px;align-items:start;animation:unfold .4s var(--ease) both}
@keyframes unfold{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.info h3{font-family:var(--display);font-variation-settings:"wdth" 85;font-weight:800;font-size:22px;line-height:1.1;margin:0 0 8px;color:var(--ink)}
.info .facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.info .fact{background:var(--land-2);border-radius:10px;padding:10px 12px;min-width:0}
.info .fact.wide{grid-column:1/-1}
.info .fact dt{font-size:14px;color:var(--ink-2);line-height:1.3}
.info .fact dd{margin:2px 0 0;font-weight:700;color:var(--ink);line-height:1.35;overflow-wrap:break-word}
.info .flags{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}
.info .flags li{display:flex;align-items:flex-start;gap:8px;font-size:15px;line-height:1.35;min-width:0}
.info .flags svg{width:18px;height:18px;flex:none;margin-top:1px}
.info .flags .yes{color:var(--ink)}.info .flags .yes svg{color:var(--pos)}
.info .flags .no{color:var(--ink-2)}.info .flags .no svg{color:var(--x-dark)}
.info .tabs{display:none}
.info .pay{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.info .pay li{background:var(--land-2);border-radius:999px;padding:6px 12px;font-weight:500}
.info .pane[data-tab=Perus]{grid-area:perus}.info .pane[data-tab=Bonus]{grid-area:bonus}.info .pane[data-tab=Maksut]{grid-area:maksut}.info .pane[data-tab=Kotiutus]{grid-area:kotiutus}
.info .pane[data-tab=Kotiutus] .facts{grid-template-columns:repeat(4,minmax(0,1fr))}
.info .pane[data-tab=Kotiutus] .fact.wide{grid-column:auto}
.info .fine{grid-area:fine;color:var(--ink-2);margin:0}
.stop .btn{font-size:19px;padding:20px 34px;min-width:178px;animation:beckon 2.6s 2s var(--ease) 2}
@keyframes beckon{50%{transform:scale(1.04)}}
.more{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 16px;margin-top:12px;font-size:var(--t-small)}
.more a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- pay n play ---------- */
.pnp{background:var(--sea-2) url(../img/contours.svg) center/cover no-repeat;padding-block:clamp(88px,11vw,170px)}
.pnp .grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(24px,6vw,96px);align-items:center}
.pnp h2,.calc h2,.post h2{font-size:var(--t-h2)}
.pnp .grid>div>p,.calc .grid>div>p{max-width:34ch;font-size:var(--t-lead);margin-top:20px}
.pnp ul{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:10px;font-weight:500}
.pnp li{display:flex;gap:12px;align-items:center}
.pnp li svg{width:22px;height:22px;flex:none;color:var(--x)}
.slip{background:var(--land);padding:30px 32px 56px;width:100%;max-width:520px;justify-self:end;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),95% 100%,90% calc(100% - 14px),85% 100%,80% calc(100% - 14px),75% 100%,70% calc(100% - 14px),65% 100%,60% calc(100% - 14px),55% 100%,50% calc(100% - 14px),45% 100%,40% calc(100% - 14px),35% 100%,30% calc(100% - 14px),25% 100%,20% calc(100% - 14px),15% 100%,10% calc(100% - 14px),5% 100%,0 calc(100% - 14px))}
.slip h3{font:700 var(--t-body) var(--text);margin:20px 0 4px}
.slip h3:first-child{margin-top:0}
.ln{display:flex;gap:10px;padding:5px 0}
.ln span:last-child{white-space:nowrap}
.ln i{flex:1;border-bottom:4px dotted var(--land-2);margin-bottom:7px}
.slip .res{display:flex;flex-wrap:wrap;gap:4px 24px;justify-content:space-between;background:var(--ink);color:var(--land);font-weight:700;padding:12px 32px;margin:22px -32px 0}

/* ---------- kartta-nauha ---------- */
.band{position:relative;height:clamp(320px,48vw,600px);overflow:hidden;background:var(--sea-2);margin:0}
.band img{width:100%;height:100%;object-fit:cover;object-position:80% 70%;transform:scale(1.06);transform-origin:70% 60%}
.band figcaption{position:absolute;left:var(--m);bottom:var(--m);background:var(--land);padding:12px 18px;font-size:var(--t-small);max-width:44ch}

/* ---------- laskuri ---------- */
.calc{padding-block:clamp(88px,11vw,170px)}
.calc .grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(24px,6vw,96px);align-items:center}
.calcbox{background:var(--sea) url(../img/contours.svg) center/cover no-repeat;padding:clamp(24px,3vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.calcbox label{display:block;font-weight:700;margin-bottom:8px}
.calcbox input{width:100%;font:700 26px var(--text);font-variant-numeric:tabular-nums;padding:12px 14px;border:0;border-radius:8px;background:var(--land);color:var(--ink)}
.calcbox input:focus-visible{outline:3px solid var(--x)}
.calcbox .result{grid-column:1/3;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;background:var(--land-2);margin:4px calc(-1 * clamp(24px,3vw,44px)) calc(-1 * clamp(24px,3vw,44px));padding:24px clamp(24px,3vw,44px)}
.calcbox output{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:800;font-size:var(--t-h2);line-height:1;color:var(--ink)}
.calcbox .result span{font-size:var(--t-lead)}
.calcbox .presets{grid-column:1/3;display:flex;gap:8px;flex-wrap:wrap;font-size:var(--t-small)}
.calcbox .presets button{font:500 var(--t-small) var(--text);background:var(--land);border:0;border-radius:999px;padding:9px 16px;min-height:44px;cursor:pointer;transition:background .2s}
.calcbox .presets button:hover{background:#fff}

/* ---------- aarreposti ---------- */
.post{background:var(--sea) url(../img/contours.svg) center/cover no-repeat;padding-block:clamp(88px,11vw,170px)}
.post .grid{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.post .grid>div{display:grid;justify-items:center;width:100%}
.post p.lead{font-size:var(--t-lead);margin-top:18px;max-width:34ch}
.post form{display:flex;gap:10px;margin-top:30px;width:100%;max-width:620px}
.post input{flex:1;min-width:0;font:500 18px var(--text);padding:16px 20px;border:0;border-radius:999px;background:#fff;color:var(--ink)}
.post input::placeholder{color:#6b665a}
.post small{display:block;margin-top:14px;font-size:var(--t-small);color:var(--ink-2)}

/* ---------- footer ---------- */
footer{background:var(--land);padding-block:72px 32px}
footer .mark{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:800;font-size:clamp(72px,18.5vw,280px);line-height:.8;letter-spacing:-.03em;color:var(--ink)}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;margin-top:44px;font-size:var(--t-small)}
footer .resp{display:flex;align-items:center;gap:14px;font-weight:700}
footer .resp a,footer nav a{display:inline-flex;align-items:center;min-height:44px}
footer .age{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--land);font-weight:800}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer .credits{margin-top:28px;font-size:var(--t-small);color:var(--ink-2);max-width:70ch}

/* sisääntulot */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0) * 80ms)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

@media (max-width:900px){
  .bar nav,.bar>.btn{display:none}
  .menu{display:block}
  .hero .grid{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:8px}
  .pnp .grid,.calc .grid,.post .grid{grid-template-columns:minmax(0,1fr)}
  .sheet{padding:22px 20px}
  .lede{font-size:17px;margin:14px 0 18px}
  .chips{gap:6px}
  .chips label{white-space:nowrap;padding:10px 15px}
  .guide{margin-top:16px;gap:12px}
  .guide .aarni{width:52px}
  .guide p{font-size:15px;line-height:1.4}
  .guide p span{display:none}
  .route{padding-top:22px}
  .stop{grid-template-columns:40px 72px minmax(0,1fr);gap:10px 14px}
  .x{width:40px}
  .stop .logo{width:72px;height:54px}
  .stop .offer{grid-column:3/4}
  .stop .btn{grid-column:2/4}
  details.more-info{grid-column:1/-1}
  details.more-info summary{margin-left:52px}
  .info{position:relative;z-index:2}
  .stop .btn{justify-self:stretch;width:100%;font-size:19px;padding:19px 24px}
  .info{grid-template-columns:minmax(0,1fr);grid-template-areas:"perus" "bonus" "maksut" "kotiutus" "fine"}
  .slip{justify-self:stretch;max-width:none}
  .slip .res{flex-direction:column;align-items:flex-start}
  .slip .res span:last-child{font-weight:500;opacity:.85}
  .calcbox{grid-template-columns:1fr}
  .calcbox .result,.calcbox .presets{grid-column:1/2}
  .post form{flex-direction:column}
}
@media (max-width:640px){
  .info{display:block;padding:14px}
  .info .pane[data-tab=Kotiutus] .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .info .pane[data-tab=Kotiutus] .fact.wide{grid-column:1/-1}
  .info .tabs{display:flex;gap:4px;background:var(--land-2);border-radius:999px;padding:4px;margin-bottom:14px}
  .info .tabs button{flex:1;min-width:0;min-height:44px;border:0;border-radius:999px;background:transparent;font:700 14px/1 var(--text);color:var(--ink-2);cursor:pointer;padding:0 4px;transition:background .2s,color .2s}
  .info .tabs button[aria-selected=true]{background:var(--ink);color:var(--land)}
  .info .tabs button:focus-visible{outline:3px solid var(--x);outline-offset:1px}
  .info.tabbed .pane:not(.on){display:none}
  .info.tabbed .pane h3{font-size:19px;margin-bottom:10px}
  .info .fine{margin-top:12px}
}
@media (max-width:480px){
  .info{padding:18px 16px}
  .stop .offer b{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}
.post .form-status{margin-top:10px;font-weight:700;min-height:1.55em}
.more a{gap:6px}
.more a svg{width:18px;height:18px;transition:transform .2s var(--ease)}
.more a:hover svg{transform:translateX(3px)}