:root{
  --kp-blue:#005588;
  --kp-blue-dark:#00416c;
  --kp-blue-nav:#0077aa;
  --kp-blue-nav-light:#0088bf;
  --kp-bg:#dfe8ee;
  --kp-panel:#ffffff;
  --kp-panel-soft:#f5f8fa;
  --kp-soft:#e8f2f6;
  --kp-text:#003366;
  --kp-muted:#385b70;
  --kp-border:#bfd0d9;
  --kp-dark-border:#1c3b4d;
  --kp-shadow:0 2px 8px rgba(0,0,0,.10);
  --kp-radius:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--kp-bg);
  color:var(--kp-text);
  font-size:18px;
}
a{color:var(--kp-blue-nav)}
img{max-width:100%}

.site-header{
  width:100%;
  background:var(--kp-blue-dark);
  color:#fff;
  text-align:center;
  padding:14px 14px 16px;
  border-top:2px solid #7d4513;
}
.site-header__inner,
.site-nav__inner,
main,
.footer-inner{width:min(1140px,calc(100vw - 32px));margin:0 auto}
.site-logo{
  display:inline-block;
  color:#fff;
  text-decoration:none;
}
.site-logo__text{
  display:block;
  font-size:clamp(2.35rem,5.1vw,3.45rem);
  font-weight:900;
  line-height:1.04;
  letter-spacing:-.03em;
  text-shadow:0 2px 0 rgba(0,0,0,.15);
}
.site-tagline{
  margin:8px 0 0;
  color:#ebf8ff;
  font-size:1.18rem;
  font-weight:700;
}
.site-nav{
  position:sticky;
  top:0;
  z-index:20;
  width:100%;
  background:var(--kp-blue-nav);
  box-shadow:0 2px 5px rgba(0,0,0,.12);
}
.site-nav__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px;
  width:min(1440px,calc(100vw - 12px));
  padding:7px 4px;
  white-space:normal;
  overflow:visible;
}
.site-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 1 auto;
  min-width:0;
  color:#fff;
  padding:7px clamp(6px,.7vw,11px);
  text-decoration:none;
  font-weight:700;
  font-size:clamp(.82rem,1.05vw,1.05rem);
  line-height:1.15;
  white-space:nowrap;
  border-radius:6px;
}
.site-nav a:hover,.site-nav a.active{background:#eaf6fb;color:var(--kp-blue)}

main{margin:28px auto 52px}
main.narrow,.narrow{width:min(840px,calc(100vw - 32px))}

.hero,.page-hero,.feature-card,.route-card,.status-grid article,.panel,.split-section,.mobile-section,.notice-panel,.info-band,.ok,.error{
  background:var(--kp-panel);
  border:1px solid var(--kp-border);
  border-radius:var(--kp-radius);
  box-shadow:var(--kp-shadow);
}
.hero,.page-hero,.status-grid,.feature-grid,.route-grid,.gallery,.gallery-admin,.mobile-section,.split-section,.notice-panel,.info-band,.panel,.ok,.error{
  width:min(1080px,100%);
  margin-left:auto;
  margin-right:auto;
}
.hero,.page-hero{padding:30px;margin-bottom:20px}
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:30px;
  align-items:center;
}
.hero__content{max-width:760px}
.hero-preview{
  background:var(--kp-panel-soft);
  border:1px solid var(--kp-border);
  border-radius:var(--kp-radius);
  padding:12px;
  text-align:center;
}
.hero-preview a{display:block;position:relative}
.hero-preview img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
  object-position:top center;
  border-radius:6px;
  border:1px solid var(--kp-border);
  background:#fff;
}
.hero-preview span{display:block;margin-top:10px;font-weight:800;color:var(--kp-blue-dark);font-size:1rem}
.eyebrow{
  display:inline-block;
  margin:0 0 12px;
  padding:6px 11px;
  background:#eef7fb;
  color:var(--kp-blue-dark);
  border:1px solid var(--kp-border);
  border-radius:6px;
  font-size:1rem;
  font-weight:800;
}
h1,h2,h3{color:var(--kp-text);line-height:1.13}
h1{margin:0 0 14px;font-size:clamp(2.8rem,5.7vw,4.15rem);letter-spacing:-.04em}
h2{margin:0 0 12px;font-size:clamp(2rem,3.5vw,2.95rem);letter-spacing:-.025em}
h3{margin:0 0 10px;font-size:1.36rem}
p{line-height:1.58}
.lead{font-size:1.22rem;font-weight:700;margin:0 0 14px;color:#113e5a}
.hero p:not(.eyebrow),.page-hero p:not(.eyebrow),.split-section p,.mobile-text p:not(.eyebrow),.panel p,.feature-card p,.route-card em,.status-grid span,.gallery figcaption,.phone-gallery figcaption,.section-heading p:not(.eyebrow){color:var(--kp-muted)}
.hero-actions,.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.button,button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  background:var(--kp-blue-nav);
  color:#fff!important;
  padding:10px 18px;
  border:0;
  border-radius:6px;
  text-decoration:none;
  font-weight:800;
  font:inherit;
  cursor:pointer;
}
.button:hover,button:hover{background:#005f88}
.button.secondary{background:#fff;color:var(--kp-blue)!important;border:1px solid var(--kp-border)}
.button.light{background:#fff;color:var(--kp-blue)!important;white-space:nowrap}

.status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 auto 30px}
.status-grid article{padding:20px;background:#fff}
.status-grid strong{display:block;font-size:1.2rem;margin-bottom:6px;color:var(--kp-blue-dark)}

.section-heading{text-align:center;max-width:860px;margin:40px auto 18px}
.section-heading.compact{margin-top:34px}
.feature-grid,.route-grid{display:grid;gap:16px}
.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 auto 24px}
.short-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.feature-card{padding:22px;background:#fff}
.icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;border-radius:8px;background:var(--kp-soft);font-size:1.5rem;border:1px solid var(--kp-border)}
.route-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin:28px auto}
.route-card{display:grid;grid-template-rows:auto auto 1fr;gap:8px;text-decoration:none;color:var(--kp-text);background:#fff;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.route-card:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgba(0,0,0,.16)}
.route-card img{display:block;width:100%;height:160px;object-fit:cover;object-position:top center;background:#e8eef2;border-bottom:1px solid var(--kp-border)}
.route-card .route-body{padding:16px}
.route-card span{display:inline-block;margin-bottom:8px;padding:5px 9px;border-radius:5px;background:var(--kp-soft);color:var(--kp-blue);font-weight:900;font-size:.92rem}
.route-card strong{display:block;font-size:1.16rem;line-height:1.25;color:var(--kp-text)}
.route-card em{display:block;margin-top:8px;font-style:normal;line-height:1.45;font-size:1rem}

.split-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.82fr);gap:24px;padding:24px;margin:24px auto 18px;align-items:start}
.soft-list{background:#f9fbfc;border:1px solid var(--kp-border);border-radius:var(--kp-radius);padding:18px}
.soft-list ul,.panel ul{margin:0;padding-left:22px;line-height:1.65;color:var(--kp-muted)}
.notice-panel{padding:22px;margin:24px auto;background:#fff8d9;border-color:#d0bf71}
.notice-panel p{margin:0;color:#5f5524}
.info-band{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:24px;background:var(--kp-blue);color:#fff;border-color:var(--kp-blue-dark);margin-top:28px}
.info-band h2{color:#fff}.info-band p{margin:0;color:#e8f6fb;max-width:800px}
.panel{padding:24px;margin:18px auto;background:#fff}
form.panel{max-width:none}
label{display:grid;gap:6px;font-weight:800;margin:14px 0;color:var(--kp-text)}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--kp-border);border-radius:6px;background:#fff;color:var(--kp-text);font:inherit}
textarea{resize:vertical}
small{display:block;margin:4px 0 12px;color:var(--kp-muted)}
.ok,.error{padding:18px;margin:18px auto;background:#fff}.ok{border-color:#57966d;background:#e8f8ee}.error{border-color:#aa6b6b;background:#fff0f0}

.gallery{display:grid;gap:16px;margin:18px auto 30px}
.gallery-web,.gallery-admin{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:center}
.gallery figure,.phone-gallery figure{margin:0;background:#fff;border:1px solid var(--kp-border);border-radius:var(--kp-radius);box-shadow:var(--kp-shadow);overflow:hidden}
.gallery a,.phone-gallery a{display:block;position:relative;background:#eef4f8;text-decoration:none}
.gallery a::after,.phone-gallery a::after,.hero-preview a::after{
  content:'Avaa kuva';position:absolute;right:8px;bottom:8px;background:rgba(0,51,102,.86);color:#fff;padding:4px 8px;border-radius:5px;font-size:.78rem;font-weight:900;opacity:0;transition:opacity .15s ease
}
.gallery a:hover::after,.phone-gallery a:hover::after,.hero-preview a:hover::after{opacity:1}
.gallery img{display:block;width:100%;height:175px;object-fit:cover;object-position:top center;transition:transform .15s ease;background:#fff}
.gallery figure:hover img,.phone-gallery figure:hover img,.hero-preview a:hover img{transform:scale(1.015)}
.gallery figcaption,.phone-gallery figcaption{padding:11px 12px;font-size:.95rem;line-height:1.42}
.mobile-section{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;padding:24px;margin:24px auto 30px;align-items:center}
.mobile-section.standalone{margin-top:0}
.phone-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.phone-gallery img{display:block;width:100%;height:270px;object-fit:cover;object-position:top center;background:#f4f8fa}

footer{background:var(--kp-blue-dark);color:#fff;text-align:center;padding:18px;margin-top:42px}
.footer-inner{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;color:#dff4fb}
.footer-inner strong{color:#fff}
.honeypot{position:absolute;left:-9999px;opacity:0;height:1px;width:1px;overflow:hidden}
.kp-lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1000;background:rgba(0,22,38,.86);padding:20px}
.kp-lightbox.is-open{display:flex}
.kp-lightbox__dialog{position:relative;width:min(1120px,100%);max-height:96vh;background:#fff;border-radius:10px;border:1px solid #b9cbd4;box-shadow:0 20px 50px rgba(0,0,0,.45);overflow:hidden;display:grid;grid-template-rows:1fr auto}
.kp-lightbox__img-wrap{display:flex;align-items:center;justify-content:center;background:#082a3e;min-height:180px;overflow:auto}
.kp-lightbox__img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto}
.kp-lightbox__caption{padding:12px 52px 12px 14px;color:var(--kp-text);font-weight:800;background:#fff}
.kp-lightbox__close{position:absolute;right:10px;bottom:8px;min-height:36px;padding:6px 11px;border-radius:6px;background:var(--kp-blue-nav);color:#fff;font-size:1.1rem;line-height:1}

@media(max-width:1000px){
  .hero{grid-template-columns:1fr}
  .hero-preview{max-width:460px}
  .feature-grid,.short-grid,.status-grid,.gallery-web,.gallery-admin{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mobile-section,.split-section,.info-band{grid-template-columns:1fr;flex-direction:column;align-items:flex-start}
}
@media(max-width:760px){
  body{font-size:16px}
  .site-header{padding:16px 10px 14px}
  .site-logo__text{font-size:2.35rem}
  .site-tagline{font-size:1rem}
  .site-nav__inner{justify-content:center;width:calc(100vw - 8px);gap:3px;padding:6px 2px}
  .site-nav a{font-size:.9rem;padding:7px 8px}
  main,.site-header__inner,.footer-inner{width:min(100vw - 20px,1140px)}
  main{margin-top:18px}
  .hero,.page-hero,.split-section,.mobile-section,.info-band,.panel{padding:18px}
  h1{font-size:2.45rem}h2{font-size:1.9rem}
  .feature-grid,.short-grid,.status-grid,.route-grid,.gallery-web,.gallery-admin,.phone-gallery{grid-template-columns:1fr}
  .gallery img{height:170px}
  .phone-gallery{max-width:340px;margin-left:auto;margin-right:auto}
}
@media(max-width:520px){
  .site-nav__inner{justify-content:flex-start;padding-left:4px;padding-right:4px}
  .site-nav a{font-size:.86rem;padding:6px 7px}
}
@media(max-width:430px){
  .site-logo__text{font-size:2.05rem}
  h1{font-size:2.05rem}
  .hero-preview img,.gallery img,.phone-gallery img,.route-card img{height:auto}
}


/* Rekisteröinti ja ylläpito */
.form-grid.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.signup-form h2{margin-top:26px;border-top:1px solid var(--kp-border);padding-top:20px}
.signup-form h2:first-of-type{margin-top:0;border-top:0;padding-top:0}
.choice-box{display:grid;gap:8px;background:var(--kp-panel-soft);border:1px solid var(--kp-border);border-radius:var(--kp-radius);padding:14px}
.choice-box label,.checkline{display:flex;gap:10px;align-items:flex-start;font-weight:700}
.choice-box input,.checkline input{width:auto;margin-top:4px}
.hint{background:var(--kp-soft);border:1px solid var(--kp-border);border-radius:8px;padding:12px}

.company-fields{
  display:grid;
  gap:14px;
  margin:10px 0 0;
  padding:14px;
  background:var(--kp-panel-soft);
  border:1px solid var(--kp-border);
  border-radius:var(--kp-radius);
}
.company-fields.is-hidden{display:none}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:11px 10px;border-bottom:1px solid var(--kp-border);text-align:left;vertical-align:top}
th{background:var(--kp-soft);color:var(--kp-text);font-weight:900}
.inline-actions{display:flex;gap:6px;flex-wrap:wrap}
.inline-actions button{min-height:34px;padding:6px 9px;font-size:.9rem}
.danger{color:#9b1c1c}
@media(max-width:760px){.form-grid.two{grid-template-columns:1fr}}
.slug-status{
  margin:14px 0 12px;
  border-radius:10px;
  padding:14px 16px;
  font-weight:900;
  border:2px solid var(--kp-border);
  background:var(--kp-panel-soft);
  box-shadow:0 2px 7px rgba(0,0,0,.08);
}
.slug-preview{
  margin:-4px 0 12px;
  border-radius:8px;
  padding:10px 12px;
  font-weight:700;
  border:1px solid var(--kp-border);
  background:var(--kp-panel-soft);
  color:var(--kp-muted);
}
.slug-status.is-idle{background:#f5f8fa;color:var(--kp-muted);border-color:var(--kp-border)}
.slug-status.is-checking{background:#fff8d9;color:#6a5b18;border-color:#d6c36c}
.slug-status.is-good{background:#dff6e7;color:#105c34;border-color:#39a765}
.slug-status.is-bad{background:#ffe3e3;color:#8f1111;border-color:#d04444}
button.is-disabled,button:disabled{opacity:.55;cursor:not-allowed}
.email-status{
  margin:14px 0 12px;
  border-radius:10px;
  padding:14px 16px;
  font-weight:900;
  border:2px solid #d04444;
  background:#ffe3e3;
  color:#8f1111;
  box-shadow:0 2px 7px rgba(0,0,0,.08);
}
.email-status.is-hidden{display:none}
.email-status.is-bad{display:block;background:#ffe3e3;color:#8f1111;border-color:#d04444}

.status-ok{display:inline-block;margin-left:8px;color:#0a6d2b;font-weight:800}
.status-bad{display:inline-block;margin-left:8px;color:#9b1111;font-weight:800}
.status-note{display:inline-block;margin-left:8px;color:#7a5a00;font-weight:800}
.path-panel code,.error code{background:#f1f5f7;border:1px solid #d5e0e6;border-radius:4px;padding:2px 5px}

.install-progress-widget{
  margin:22px 0;
  padding:18px;
  border:1px solid #9fb8c5;
  border-radius:12px;
  background:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.install-progress-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.install-progress-title{display:flex;align-items:center;gap:10px;font-weight:900;color:#003366;font-size:1.08rem}
.install-progress-percent{font-weight:900;color:#003366;background:#e8f2f6;border:1px solid #bfd0d9;border-radius:999px;padding:5px 11px;min-width:64px;text-align:center}
.install-spinner{width:22px;height:22px;border-radius:50%;border:3px solid #b8d2df;border-top-color:#0077aa;display:inline-block;animation:kp-spin .8s linear infinite;flex:0 0 22px}
.install-progress.is-done .install-spinner,.install-progress.is-failed .install-spinner{animation:none;border-color:#2f8f46;background:#2f8f46;position:relative}
.install-progress.is-done .install-spinner::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.82rem;font-weight:900}
.install-progress.is-failed .install-spinner{border-color:#b95757;background:#b95757}
.install-progress.is-failed .install-spinner::after{content:'✕';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.82rem;font-weight:900}
.install-progress-bar{height:24px;background:#d4e4ec;border:1px solid #9fb8c5;border-radius:999px;overflow:hidden;margin:12px 0 8px;position:relative}
.install-progress-fill{height:100%;background:#0077aa;width:0;transition:width .35s ease;position:relative;overflow:hidden;border-radius:999px}
.install-progress.is-working .install-progress-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.18) 75%,transparent 75%,transparent);background-size:34px 34px;animation:kp-progress-stripes 1s linear infinite}
.install-progress-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#385b70;font-size:.95rem;font-weight:700}
.install-progress-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.install-step{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #bfd0d9;border-radius:8px;background:#fff;color:#385b70;transition:background .2s,border-color .2s,transform .2s}
.install-step-mark{width:25px;height:25px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#e8f2f6;font-weight:900;color:#003366;flex:0 0 25px}
.install-step.is-current{border-color:#d6aa37;background:#fff8de;color:#4c3d07;transform:translateX(2px)}
.install-step.is-current .install-step-mark{background:#d6aa37;color:#fff}
.install-step-spinner{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.55);border-top-color:#fff;display:inline-block;animation:kp-spin .75s linear infinite}
.install-step.is-done{border-color:#79ad83;background:#ecf8ef;color:#214c2b}
.install-step.is-done .install-step-mark{background:#2f8f46;color:#fff}
.install-step.is-failed{border-color:#b95757;background:#fff0f0;color:#8d1f1f}
.install-step.is-failed .install-step-mark{background:#b95757;color:#fff}
.install-ready{margin-top:20px;padding:18px;border:1px solid #79ad83;background:#ecf8ef;border-radius:8px}
.install-error{margin-top:20px;padding:16px;border:1px solid #b95757;background:#fff0f0;color:#8d1f1f;border-radius:8px}
.install-mail-warning{color:#8d1f1f;font-weight:700}
.install-mail-ok{color:#225d31;font-weight:700}
@keyframes kp-spin{to{transform:rotate(360deg)}}
@keyframes kp-progress-stripes{from{background-position:0 0}to{background-position:34px 0}}
@media(max-width:560px){.install-progress-head{align-items:flex-start;flex-direction:column}.install-progress-percent{min-width:0}}
.is-hidden{display:none!important}

/* Adminin vaiheittainen asennus */

.admin-install-overlay[hidden]{display:none!important}
.admin-install-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,20,35,.58);display:none;align-items:center;justify-content:center;padding:18px}
.admin-install-overlay.is-open{display:flex}
.admin-install-box{width:min(760px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:14px;border:1px solid #9fb8c5;box-shadow:0 18px 60px rgba(0,0,0,.35);padding:22px}
.admin-install-box h2{margin:0 0 8px;color:#003366}
.admin-install-password{border:1px solid #bfd0d9;background:#f6fbfd;border-radius:10px;padding:14px;margin-top:14px}
.admin-install-password label{display:block;margin:10px 0;font-weight:800;color:#003366}
.admin-install-password input{width:100%;box-sizing:border-box;padding:10px;border:1px solid #9fb8c5;border-radius:8px;font-size:1rem}
.admin-install-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.admin-install-progress{margin-top:14px}
.admin-muted{color:#4c6270;font-size:.94rem}

/* Asiakasportaali ja rekisteröinnin tilauskortit */
.plan-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:16px 0 10px}
.plan-choice-card{display:block;margin:0;padding:16px;border:2px solid var(--kp-border);border-radius:12px;background:#fff;box-shadow:var(--kp-shadow);cursor:pointer}
.plan-choice-card input{width:auto;margin-right:8px}
.plan-choice-card:has(input:checked),.plan-choice-card.is-selected{border-color:var(--kp-blue-nav);background:#eef8fc}
.plan-choice-title{display:block;font-size:1.35rem;font-weight:900;color:var(--kp-blue-dark);margin:6px 0}
.plan-choice-price{display:block;font-weight:900;color:var(--kp-text);margin:4px 0 8px}
.plan-choice-desc,.plan-choice-limits{display:block;color:var(--kp-muted);line-height:1.45;font-weight:600}
.plan-choice-limits{margin-top:10px;padding-top:10px;border-top:1px solid var(--kp-border)}
.hint{color:var(--kp-muted);font-size:.98rem}
.portal-site-card{margin-bottom:22px}
.portal-site-head{display:flex;gap:18px;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--kp-border);padding-bottom:14px;margin-bottom:16px}
.portal-status{min-width:190px;background:#eef7fb;border:1px solid var(--kp-border);border-radius:10px;padding:12px;text-align:center}
.portal-status strong{display:block;font-size:1.25rem;color:var(--kp-blue-dark)}
.portal-status span{display:block;color:var(--kp-muted);font-size:.95rem;margin-top:4px}
.portal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0}
.portal-grid article{background:#f8fbfd;border:1px solid var(--kp-border);border-radius:10px;padding:14px}
.portal-grid article h3{margin-top:0}
.portal-meter{width:100%;height:12px;background:#dbe8ef;border-radius:999px;overflow:hidden;border:1px solid var(--kp-border)}
.portal-meter span{display:block;height:100%;background:var(--kp-blue-nav)}
.portal-feature-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;margin:12px 0 16px}
.portal-feature-list span{display:block;border:1px solid var(--kp-border);border-radius:8px;padding:8px 10px;font-weight:800;background:#fff;color:var(--kp-muted)}
.portal-feature-list .is-on{background:#e8f8ee;border-color:#b7dec1;color:#175c36}
.portal-feature-list .is-off{opacity:.72;background:#f5f5f5}
.table-wrap{overflow-x:auto}
.portal-table{width:100%;border-collapse:collapse;background:#fff}
.portal-table th,.portal-table td{border-bottom:1px solid var(--kp-border);text-align:left;padding:10px;vertical-align:top}
.portal-table th{background:#eef7fb;color:var(--kp-blue-dark)}
@media(max-width:760px){.portal-site-head{display:block}.portal-status{text-align:left;margin-top:12px}.portal-grid{grid-template-columns:1fr}.plan-choice-grid{grid-template-columns:1fr}}

/* Ylläpidon leveä työtila */
body.admin-page .site-header__inner,
body.admin-page .site-nav__inner,
body.admin-page main,
body.admin-page .page-hero,
body.admin-page .panel,
body.admin-page .notice-panel,
body.admin-page .info-band,
body.admin-page .ok,
body.admin-page .error{
  width:min(100%,calc(100vw - 28px));
  max-width:none;
}
body.admin-page main{
  margin-top:10px;
  margin-bottom:32px;
}
body.admin-page .page-hero,
body.admin-page .panel,
body.admin-page .ok,
body.admin-page .error,
body.admin-page .notice-panel{
  margin-left:auto;
  margin-right:auto;
}
body.admin-page .table-wrap{
  width:100%;
  max-width:none;
  overflow-x:auto;
}
body.admin-page .table-wrap table{
  min-width:100%;
}
@media(min-width:1400px){
  body.admin-page .site-header__inner,
  body.admin-page .site-nav__inner,
  body.admin-page main,
  body.admin-page .page-hero,
  body.admin-page .panel,
  body.admin-page .notice-panel,
  body.admin-page .info-band,
  body.admin-page .ok,
  body.admin-page .error{
    width:calc(100vw - 48px);
  }
}
@media(max-width:760px){
  body.admin-page .site-header__inner,
  body.admin-page .site-nav__inner,
  body.admin-page main,
  body.admin-page .page-hero,
  body.admin-page .panel,
  body.admin-page .notice-panel,
  body.admin-page .info-band,
  body.admin-page .ok,
  body.admin-page .error{
    width:calc(100vw - 16px);
  }
}
.portal-plan-change{margin-top:12px;padding-top:10px;border-top:1px solid var(--kp-border);display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.portal-plan-change label{font-weight:800;min-width:min(100%,260px)}
.portal-plan-change select{width:100%;box-sizing:border-box}
.kp-ad{margin:18px 0;border:1px solid var(--kp-border);border-radius:10px;background:#fff;box-shadow:0 1px 8px rgba(0,0,0,.05);overflow:hidden}
.kp-ad__link{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--kp-text);padding:12px}
.kp-ad__image{width:min(220px,34vw);aspect-ratio:16/9;background:#eef7fb;border-radius:8px;overflow:hidden;flex:0 0 auto}
.kp-ad__image img{width:100%;height:100%;object-fit:cover;display:block}
.kp-ad__body{display:grid;gap:4px;min-width:0}
.kp-ad__body small{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--kp-muted);font-weight:900}
.kp-ad__body strong{font-size:1.05rem;color:var(--kp-blue-dark)}
.kp-ad__body span{color:var(--kp-muted);line-height:1.35}
.kp-ad--adsense{padding:10px}
.kp-ad__adsense small{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--kp-muted);font-weight:900;margin:0 0 6px}
.kp-ad__adsense ins{max-width:100%}
@media(max-width:640px){.kp-ad__link{align-items:flex-start}.kp-ad__image{width:110px;aspect-ratio:1/1}.kp-ad__body strong{font-size:1rem}}

/* Kalastusrajoitus- ja saalisilmoitusmuistutusten esittely */
.safety-showcase .lead-small{
  max-width:900px;
  font-size:1.05rem;
  line-height:1.65;
}
.safety-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:20px;
}
.safety-card{
  overflow:hidden;
  border:1px solid var(--kp-border);
  border-radius:var(--kp-radius);
  background:#fff;
  box-shadow:0 3px 10px rgba(15,61,89,.08);
}
.safety-card>a{
  display:block;
  overflow:hidden;
  background:#eaf2f6;
  border-bottom:1px solid var(--kp-border);
}
.safety-card img{
  display:block;
  width:100%;
  height:300px;
  object-fit:cover;
  object-position:top center;
  transition:transform .15s ease;
}
.safety-card>a:hover img{transform:scale(1.012)}
.safety-card__body{padding:18px}
.safety-card__body h3{
  margin:0 0 10px;
  color:var(--kp-blue-dark);
  line-height:1.25;
}
.safety-card__body p{
  margin:0 0 10px;
  line-height:1.58;
  color:var(--kp-muted);
}
.safety-card__body p:last-child{margin-bottom:0}
.settings-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:18px;
  padding:14px 16px;
  border:1px solid #acd2e2;
  border-radius:10px;
  background:#eef8fc;
  color:var(--kp-text);
  line-height:1.5;
}
.settings-note strong{color:var(--kp-blue-dark);white-space:nowrap}
@media(max-width:900px){
  .safety-grid{grid-template-columns:1fr}
  .safety-card img{height:auto}
}
@media(max-width:640px){
  .settings-note{display:block}
  .settings-note strong{display:block;margin-bottom:4px;white-space:normal}
}


/* Toimivan demon esittely */
.demo-cta{
  background:#0a7a4a;
  border:1px solid #075f39;
}
.demo-cta:hover{background:#08643e}
.demo-highlight{
  width:min(1080px,100%);
  margin:0 auto 30px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(230px,300px);
  gap:24px;
  align-items:center;
  padding:26px;
  border:1px solid #89bda2;
  border-radius:var(--kp-radius);
  background:linear-gradient(135deg,#f4fff8 0%,#e5f6ed 100%);
  box-shadow:var(--kp-shadow);
}
.demo-highlight h2{margin-bottom:12px}
.demo-highlight p{color:#315b49;margin:0 0 12px}
.demo-reset-note{
  padding:11px 13px;
  border-left:4px solid #0a7a4a;
  border-radius:5px;
  background:rgba(255,255,255,.75);
}
.demo-highlight__actions{display:grid;gap:10px}
.demo-highlight__actions .button{width:100%;text-align:center}
.demo-credentials{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
.demo-credential{
  padding:13px 15px;
  border:1px solid #9ac8af;
  border-radius:8px;
  background:#fff;
}
.demo-credential span{
  display:block;
  margin-bottom:5px;
  color:#486859;
  font-size:.88rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.demo-credential strong{
  display:block;
  color:#075f39;
  font-size:1.3rem;
  word-break:break-word;
}
.route-card--demo{border-color:#89bda2}
.route-card--demo span{background:#e5f6ed;color:#075f39}
.demo-page-hero{border-color:#89bda2;background:linear-gradient(135deg,#fff 0%,#f0fbf5 100%)}
.demo-access-grid{
  width:min(1080px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.demo-access-grid .panel{width:100%;margin:0}
.demo-login-card{border-color:#89bda2}
.demo-credentials--large{margin:20px 0}
.demo-credentials--large .demo-credential{padding:18px}
.demo-credentials--large .demo-credential strong{font-size:1.75rem}
.demo-login-button{width:100%;margin-top:2px}
.demo-info-card ul{margin-top:16px}
.demo-notice h2{font-size:1.55rem;margin-bottom:8px;color:#5f5524}
.info-band__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.button.light.button-light-outline{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.75)!important}
.button.light.button-light-outline:hover,
.button.light.button-light-outline:focus{background:rgba(255,255,255,.12)!important;color:#fff!important}
@media(max-width:800px){
  .demo-highlight{grid-template-columns:1fr}
  .demo-highlight__actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-access-grid{grid-template-columns:1fr}
  .info-band__actions{justify-content:flex-start}
}
@media(max-width:560px){
  .demo-highlight{padding:18px}
  .demo-highlight__actions,.demo-credentials{grid-template-columns:1fr}
}


/* Ilmainen perusjärjestelmä ja valinnaiset lisäominaisuudet */
.pricing-highlight{
  width:min(1080px,100%);
  margin:0 auto 30px;
  padding:26px;
  border:1px solid #9bc4d5;
  border-radius:var(--kp-radius);
  background:linear-gradient(135deg,#f7fcff 0%,#eaf6fb 100%);
  box-shadow:var(--kp-shadow);
}
.pricing-highlight__intro{max-width:850px}
.pricing-highlight__intro h2{margin-bottom:10px}
.pricing-highlight__intro p{color:var(--kp-muted);line-height:1.62}
.pricing-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:20px;
}
.pricing-summary-card{
  padding:20px;
  border:1px solid var(--kp-border);
  border-radius:12px;
  background:#fff;
}
.pricing-summary-card--free{border-color:#86c6a4;background:#f5fff9}
.pricing-summary-card--extra{border-color:#b7c8d2;background:#fbfdfe}
.pricing-summary-label{
  display:inline-block;
  margin-bottom:8px;
  padding:5px 9px;
  border-radius:999px;
  background:#e4f3ea;
  color:#075f39;
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.pricing-summary-card--extra .pricing-summary-label{background:#eaf2f6;color:var(--kp-blue-dark)}
.pricing-summary-card h3{margin:0 0 10px;color:var(--kp-blue-dark)}
.pricing-summary-card ul,.pricing-check-list{margin:0;padding-left:20px}
.pricing-summary-card li,.pricing-check-list li{margin:7px 0;line-height:1.45}
.pricing-highlight__footer{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid #bdd6e1;
}
.pricing-highlight__footer p{margin:0;max-width:780px;line-height:1.55}
.pricing-highlight__footer .button{flex:0 0 auto}
.pricing-inline-panel .button{margin-top:8px}
.pricing-page-hero{background:linear-gradient(135deg,#fff 0%,#eef9f3 100%);border-color:#91c8aa}
.pricing-detail-grid{
  width:min(1080px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.pricing-detail-grid .panel{width:100%;margin:0}
.pricing-detail-card--free{border-color:#86c6a4;background:#f7fff9}
.pricing-detail-card--paid{border-color:#a9c8d6;background:#f8fcfe}
.pricing-detail-card h2{margin-top:2px}
.pricing-check-list{margin-top:16px}
.pricing-explanation{margin-top:22px}
.pricing-unknown-note h2{margin-bottom:8px}
.signup-free-note{
  display:grid;
  gap:5px;
  margin:20px 0;
  padding:14px 16px;
  border:1px solid #86c6a4;
  border-radius:10px;
  background:#f2fff7;
  line-height:1.48;
}
.signup-free-note strong{color:#075f39}
.signup-free-note a{font-weight:800}
.demo-pricing-note{margin-top:20px}
@media(max-width:800px){
  .pricing-summary-grid,.pricing-detail-grid{grid-template-columns:1fr}
  .pricing-highlight__footer{display:block}
  .pricing-highlight__footer .button{display:inline-block;margin-top:14px}
}
@media(max-width:560px){
  .pricing-highlight{padding:18px}
}

/* Kolmen muistutustoiminnon esittely */
.safety-grid--three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.safety-grid--three .safety-card img{
  height:235px;
  object-fit:cover;
  object-position:top center;
}
.safety-card__body a{
  color:var(--kp-blue-dark);
  font-weight:800;
}
.safety-card__body a:hover{text-decoration:none}
.official-service-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin-top:18px;
  padding:13px 15px;
  border:1px solid #cbdce5;
  border-radius:10px;
  background:#f7fbfd;
  color:var(--kp-text);
}
.official-service-links strong{color:var(--kp-blue-dark)}
.official-service-links a{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:6px 11px;
  border:1px solid #9fc4d5;
  border-radius:999px;
  background:#fff;
  color:var(--kp-blue-dark);
  font-weight:800;
  text-decoration:none;
}
.official-service-links a:hover{background:#eaf6fb}
@media(max-width:1080px){
  .safety-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .safety-grid--three{grid-template-columns:1fr}
  .safety-grid--three .safety-card img{height:auto}
  .official-service-links{align-items:stretch}
  .official-service-links strong{width:100%}
  .official-service-links a{justify-content:center}
}

/* 1.0.125 – Android-sovelluksen uusi esittelysivu */
.app-page-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(330px,.72fr);
  gap:34px;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(135deg,#ffffff 0%,#edf8fc 62%,#dff1f7 100%);
  border-color:#91bdcf;
}
.app-page-hero__content{position:relative;z-index:2}
.app-version-note{
  margin:18px 0 0;
  max-width:760px;
  font-size:.96rem;
  color:var(--kp-muted);
}
.app-hero-phones{
  position:relative;
  min-height:510px;
  max-width:420px;
  width:100%;
  margin:0 auto;
}
.app-phone{
  position:absolute;
  display:block;
  width:235px;
  border:9px solid #0d2c3e;
  border-radius:28px;
  overflow:hidden;
  background:#0d2c3e;
  box-shadow:0 18px 38px rgba(0,48,78,.24);
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease;
}
.app-phone::before{
  content:'';
  position:absolute;
  z-index:2;
  top:5px;
  left:50%;
  width:64px;
  height:8px;
  border-radius:999px;
  background:#0d2c3e;
  transform:translateX(-50%);
}
.app-phone img{display:block;width:100%;height:auto;background:#fff}
.app-phone--front{left:4px;top:32px;z-index:2;transform:rotate(-4deg)}
.app-phone--back{right:0;top:2px;z-index:1;transform:rotate(5deg) scale(.94)}
.app-phone:hover{z-index:3;transform:translateY(-5px) rotate(0deg);box-shadow:0 24px 46px rgba(0,48,78,.32)}
.app-capability-strip{
  width:min(1080px,100%);
  margin:0 auto 34px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.app-capability-strip article{
  padding:16px;
  border:1px solid var(--kp-border);
  border-radius:10px;
  background:#fff;
  box-shadow:var(--kp-shadow);
}
.app-capability-strip strong{display:block;margin-bottom:6px;color:var(--kp-blue-dark);line-height:1.25}
.app-capability-strip span{display:block;color:var(--kp-muted);font-size:.94rem;line-height:1.45}
.app-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.app-flow{margin-top:34px}
.app-flow__heading{margin-top:0}
.app-flow__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.app-flow__steps article{
  display:flex;
  gap:14px;
  padding:18px;
  border:1px solid var(--kp-border);
  border-radius:10px;
  background:var(--kp-panel-soft);
}
.app-flow__steps article>span{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--kp-blue);
  color:#fff;
  font-weight:900;
  font-size:1.2rem;
}
.app-flow__steps h3{margin:0 0 6px}
.app-flow__steps p{margin:0;color:var(--kp-muted)}
.app-showcase-grid{
  width:min(1080px,100%);
  margin:18px auto 34px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.app-showcase-grid figure{height:100%;display:flex;flex-direction:column}
.app-showcase-grid a{background:#dceaf0}
.app-showcase-grid img{
  width:100%;
  height:500px;
  object-fit:cover;
  object-position:top center;
}
.app-showcase-grid figcaption{display:grid;gap:5px;min-height:112px}
.app-showcase-grid figcaption strong{color:var(--kp-blue-dark);font-size:1.04rem}
.app-showcase-grid figcaption span{color:var(--kp-muted);font-size:.92rem;line-height:1.42}
.app-official-section{align-items:center}
.app-official-links{padding:0;border:0;background:transparent}
.app-official-links a{text-decoration:none;background:#f7fbfd}
.app-status-note{background:#f4fbff;border-color:#93bfd1}
.text-link{font-weight:800}

/* 1.0.125 – keskeneräisen hinnoittelun neutraali esittely */
.pricing-page-hero--undecided{
  background:linear-gradient(135deg,#fff 0%,#f3f8fb 100%);
  border-color:#aabfc9;
}
.pricing-open-panel{max-width:900px;text-align:left}
.pricing-principles-grid{
  width:min(1080px,100%);
  margin:0 auto 22px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.pricing-principles-grid .panel{margin:0;width:100%}
.pricing-principles-grid h3{color:var(--kp-blue-dark)}
.pricing-principles-grid p{margin-bottom:0}

@media(max-width:980px){
  .app-page-hero{grid-template-columns:1fr}
  .app-hero-phones{min-height:465px;max-width:390px;margin-top:4px}
  .app-phone{width:215px}
  .app-capability-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-flow__steps{grid-template-columns:1fr}
}
@media(max-width:800px){
  .app-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:700px}
  .pricing-principles-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .app-page-hero{gap:18px}
  .app-hero-phones{min-height:400px;max-width:330px}
  .app-phone{width:185px;border-width:7px;border-radius:23px}
  .app-phone--front{left:0;top:24px}
  .app-phone--back{right:0;top:0}
  .app-capability-strip,.app-feature-grid,.app-showcase-grid{grid-template-columns:1fr}
  .app-showcase-grid{max-width:355px}
  .app-showcase-grid img{height:auto}
  .app-showcase-grid figcaption{min-height:0}
}
@media(max-width:390px){
  .app-hero-phones{min-height:355px;max-width:292px}
  .app-phone{width:165px}
}