/* Skulaa – sivuston yhteiset tyylit */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#F3F3EF}
*{box-sizing:border-box}
img{max-width:100%}
a{color:#0E2239}
a:hover{color:#B83A0E}
:focus-visible{outline:3px solid #FF5B1F;outline-offset:3px}
[hidden]{display:none !important}

/* Tumman taustan ruudukko */
.gridbg{background-image:linear-gradient(rgba(243,243,239,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(243,243,239,.055) 1px,transparent 1px);background-size:64px 64px}

/* Linkit ja painikkeet */
.navlink:hover{color:#FF5B1F !important}
.flink:hover{color:#FF5B1F !important}
.case-link:hover{color:#B83A0E !important}
.btn-o{transition:background-color .2s ease,transform .2s ease}
.btn-o:hover{background-color:#FF7A45 !important;color:#0E2239 !important;transform:translateY(-1px)}
.btn-n:hover{background-color:#1D3B5E !important;color:#F3F3EF !important}
.btn-ghost:hover{background-color:rgba(243,243,239,.1) !important;color:#F3F3EF !important}

/* Kortit */
.lift{transition:transform .25s ease,box-shadow .25s ease}
.lift:hover{transform:translateY(-4px);box-shadow:0 28px 56px -28px rgba(14,34,57,.35)}

/* Usein kysyttyä */
.faq-q:hover{color:#B83A0E !important}
summary.faq-q{list-style:none}
summary.faq-q::-webkit-details-marker{display:none}
details[open] .faq-ikoni{transform:rotate(45deg)}

/* Tarjous: paketin valinta */
.paketti-kortti.valittu{box-shadow:0 0 0 3px #FF5B1F,0 30px 60px -30px rgba(14,34,57,.5)}
.valittu-merkki{display:none !important}
.valittu .valittu-merkki{display:inline-flex !important}
.opt{transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.opt:hover{border-color:#0E2239 !important}
.opt[aria-pressed="true"]{background-color:#0E2239 !important;color:#F3F3EF !important;border-color:#0E2239 !important}

/* Lomake */
.field::placeholder{color:#7A8494}
.field:focus{outline:3px solid rgba(255,91,31,.45);outline-offset:1px;border-color:#0E2239 !important}
.piilo{position:absolute !important;left:-10000px !important;width:1px;height:1px;overflow:hidden}

@media (max-width:760px){.hide-sm{display:none !important}}

/* Kapeat tietokonenäytöt: koko valikko mahtuu yhdelle riville */
@media (min-width:901px) and (max-width:1120px){
  .ylapalkki{column-gap:20px !important}
  .paa-toiminnot .hide-sm{display:none !important}
  .paa-nav a{padding:0 12px !important}
}

/* Puhelimet ja tabletit: logo ja tarjousnappi ylhäällä, sivulinkit aina näkyvissä rivinä alla */
@media (max-width:900px){
  .ylapalkki{column-gap:12px !important;row-gap:10px !important;padding-top:14px !important;padding-bottom:12px !important}
  .ylapalkki img{height:38px !important}
  .paa-toiminnot{order:2}
  .paa-toiminnot a.btn-o{min-height:42px !important;padding:0 16px !important;font-size:14px !important}
  .paa-nav{order:3;width:100%;flex-wrap:nowrap !important;justify-content:space-between;gap:2px !important;padding-top:8px;border-top:1px solid rgba(243,243,239,.14);overflow-x:auto;scrollbar-width:none}
  .paa-nav::-webkit-scrollbar{display:none}
  .paa-nav a{flex:none;white-space:nowrap;min-height:44px !important;padding:0 10px !important;font-size:15px !important}
}

@media (max-width:360px){
  .paa-nav a{padding:0 7px !important;font-size:14px !important}
}

@media (max-width:560px){
  .hinta-pallo{width:100px !important;height:100px !important;top:6px !important;right:-2px !important}
  .hinta-pallo span:nth-child(2){font-size:23px !important}
  .hinta-pallo span:nth-child(1),.hinta-pallo span:nth-child(3){font-size:11px !important}
}