@charset "UTF-8";
/* Adapted from Trineon UI: marketing layout, no runtime dependencies. */
:root{--navy:#152b35;--ink:#20313b;--muted:#6b7a83;--line:#e5eaed;--teal:#007f9e;--bg:#f4f6f8}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.65}
.site-header{background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.header-inner{max-width:1100px;width:calc(100% - 76px);margin:auto;padding:20px 0}
.brand{display:flex;gap:12px;align-items:center;font-weight:750;letter-spacing:2px;font-size:18px;color:white}
.brand small{display:block;font-size:12px;font-weight:500;letter-spacing:3px;color:#cfdae0}
.brand-mark{width:48px;height:48px;padding:4px;border-radius:10px;background:#fff;flex-shrink:0}
.brand-mark img{width:100%;height:100%;display:block;object-fit:contain}
main{max-width:1100px;width:calc(100% - 76px);margin:0 auto;padding:44px 0}
h1,h2,p{margin-top:0}
h1{font-size:34px;letter-spacing:-1.2px;line-height:1.2;margin-bottom:32px}
h2{font-size:19px;letter-spacing:-.4px;line-height:1.4}
a{color:var(--teal);text-underline-offset:4px}
a:focus-visible{outline:3px solid var(--teal);outline-offset:5px}
.question-section{background:#fff;border:1px solid var(--line);border-radius:10px;padding:32px;margin-bottom:24px}
.question-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.question-card{border-top:1px solid var(--line);padding-top:22px}
.question-card svg{display:block;width:40px;height:40px;color:var(--teal);margin-bottom:18px}
.question-card h2{font-size:23px;line-height:1.4;font-weight:400;margin:0}
.question-card h2 span{display:block;color:var(--teal);font-weight:650}
.intro{max-width:730px;margin:0 0 22px;line-height:1.75}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--teal);background:var(--teal);padding:13px 20px;border-radius:8px;font-weight:600;color:#fff;text-decoration:none;max-width:100%;min-height:48px}
.button:hover{background:#00677f;border-color:#00677f}
.whatsapp-icon{flex:0 0 22px}
.products{display:grid;grid-template-columns:1fr 1.4fr;gap:12px 40px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px;margin-top:16px}
main>.button+.products{margin-top:36px}
.products h2{margin:0}
.products p{margin:0}
.products .experience{grid-column:2;font-size:14px;color:#52616a;border-left:2px solid var(--teal);padding-left:12px;margin-top:4px}
.coffee{background:#eef4f8;border:1px solid #dbe6ed;border-radius:10px;padding:28px;margin-top:24px}
.coffee h2{font-size:25px;margin-bottom:14px}
.coffee p{max-width:740px;margin-bottom:18px}
strong{font-weight:600}
address{font-style:normal;font-weight:600}
.coffee .booking{font-size:14px;margin:5px 0 0}
.closing{margin-top:24px;padding:36px;background:#eef4f8;color:var(--ink);border:1px solid #dbe6ed;border-radius:10px}
.closing h1{font-size:34px;letter-spacing:-1.2px;line-height:1.25;max-width:760px;margin-bottom:18px}
.closing h1 span{color:var(--teal)}
.closing p{color:var(--ink);margin-bottom:24px}
.closing a:focus-visible{outline-color:var(--teal)}
@media(max-width:760px){
.header-inner,main{width:calc(100% - 36px)}
.header-inner{padding:16px 0}
main{padding:25px 0}
.question-section{padding:24px 20px}
h1{font-size:29px;margin-bottom:24px}
.question-grid{grid-template-columns:1fr;gap:20px}
.question-card{display:flex;align-items:center;gap:18px;padding-top:18px}
.question-card svg{flex:0 0 34px;width:34px;height:34px;margin:0}
.question-card h2{font-size:21px}
.products{grid-template-columns:1fr;padding:22px;gap:12px}
.products .experience{grid-column:1}
.coffee{padding:24px}
.coffee h2{font-size:23px}
.closing{padding:28px 24px}
.closing h1{font-size:29px}
}
@media(forced-colors:active){.button{border:2px solid ButtonText}}

main > .closing:first-child { margin-top: 0; margin-bottom: 24px; }

.official-brand { width: 340px; max-width: 100%; margin: 0 auto; }
.official-brand img { display: block; width: 100%; height: auto; object-fit: contain; }
@media (max-width: 760px) { .official-brand { width: 270px; } }

.final-contact { margin-top: 24px; }

.help-section { margin: 32px 0 24px; }
.help-section > h2 { font-size: 28px; margin-bottom: 14px; }
.products h3 { font-size: 19px; letter-spacing: -.4px; line-height: 1.4; margin: 0; }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.product-grid .products { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 26px 24px; }
.product-icon { color: var(--teal); margin-bottom: 4px; }
.product-icon svg { display: block; width: 44px; height: 44px; }
.product-grid .products h3 { font-size: 21px; }
.product-grid .products .experience { margin-top: auto; padding-top: 4px; }
@media (max-width: 760px) {
  .product-grid { grid-template-columns: 1fr; gap: 16px; }
  .product-grid .products { padding: 24px; }
}

.help-section > h2 { text-align: center; }

.why-section { margin: 40px 0 24px; }
.why-section > h2 { text-align: center; font-size: 28px; margin-bottom: 24px; }
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.why-item { background: transparent; border: 0; border-radius: 0; padding: 16px 0; }
.why-item h3 { color: var(--ink); font-size: 21px; letter-spacing: -.4px; margin: 0 0 14px; }
.why-item p { margin: 0; }
@media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; gap: 16px; } }

.why-item .product-icon { margin-bottom: 16px; }

@media (min-width: 761px) { .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (min-width: 761px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 761px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.contact-info { margin-top: 24px; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.contact-info h2 { font-size: 25px; margin-bottom: 16px; }
.contact-info address { font-weight: 400; line-height: 1.9; overflow-wrap: anywhere; }

.contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; align-items: start; }
.contact-map { display: block; width: 100%; height: 300px; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 760px) { .contact-layout { grid-template-columns: 1fr; gap: 22px; } }
.map-container { min-width: 0; } .map-link { margin: 10px 0 0; font-size: 14px; }

.why-section { margin-top: 56px; margin-bottom: 40px; }
.why-grid { column-gap: 48px; row-gap: 20px; }
.experience-highlight { display: flex; align-items: center; gap: 28px; padding: 24px 0; margin-bottom: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.experience-year { color: var(--teal); font-size: 64px; line-height: 1.1; letter-spacing: -3px; }
.experience-highlight p { margin: 0; max-width: 530px; font-size: 18px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.button-call { background: #fff; color: var(--teal); }
.button-call:hover { background: #eaf2f7; }
@media (max-width: 760px) {
  .experience-highlight { gap: 20px; align-items: flex-start; flex-direction: column; }
  .experience-year { font-size: 52px; }
  .why-grid { gap: 12px; }
}
/* Perustelut avoimina riveinä, erillään palvelukorteista. */
.why-grid { display: block; }
.why-item { display: grid; grid-template-columns: 44px minmax(160px, .7fr) minmax(0, 1.7fr); gap: 24px; align-items: start; padding: 28px 0; }
.why-item + .why-item { border-top: 1px solid var(--line); }
.why-item .product-icon { margin: 0; }
.why-item h3 { margin: 6px 0 0; }
.why-item p { margin: 4px 0 0; }
@media (max-width: 760px) {
  .why-item { grid-template-columns: 36px minmax(0, 1fr); gap: 12px 16px; padding: 24px 0; }
  .why-item .product-icon svg { width: 36px; height: 36px; }
  .why-item h3 { margin-top: 2px; }
  .why-item p { grid-column: 2; margin: 0; }
}

/* Taustakuvan voi vaihtaa tästä; vaalea peite pitää tekstin luettavana. */
.closing {
  background-color: #eef4f8;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 760px) { .closing { background-position: 65% center; } }

/* Koko sivun merimaisema; sisältöpinnat säilyvät luettavina. */
body {
  background-color: var(--bg);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.site-header { background: rgba(255,255,255,.92); }
.closing { background: rgba(238,244,248,.96); }
.why-section { background: rgba(255,255,255,.92); padding: 28px; border-radius: 10px; }
.help-section > h2 { background: rgba(255,255,255,.92); padding: 14px 20px; border-radius: 10px; }
@media (max-width: 760px) {
  .why-section { padding: 24px 20px; }
}

.service-area{margin:32px 0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px}
.area-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.area-heading h2{font-size:28px;margin:0 0 6px}.area-heading p{margin:0;color:var(--teal)}
.area-maps{display:grid;grid-template-columns:1fr 1.5fr;gap:32px;align-items:center;margin-top:20px}
.finland-map{display:block;width:100%;height:390px}
.finland-land{fill:#eef4f8;stroke:#95afbf;stroke-width:1.3;vector-effect:non-scaling-stroke}
.area-detail svg{display:block;width:100%;height:auto}
.area-detail text{font:10px Inter,"Segoe UI",Arial,sans-serif;fill:#20313b;paint-order:stroke;stroke:#fff;stroke-width:2.5px;stroke-linejoin:round}
.area-detail .raahe-label{font-weight:700;font-size:12px}
.radar-area{fill:#007f9e;fill-opacity:.06;stroke:#007f9e;stroke-opacity:.5;stroke-width:1;stroke-dasharray:3 3}
.radar-ring{fill:none;stroke:#007f9e;stroke-opacity:.22;stroke-width:.7}
.radar-sweep{transform-origin:0px 0px;animation:radar-turn 12s linear infinite}
@keyframes radar-turn{to{transform:rotate(360deg)}}
.radar-toggle{display:flex;align-items:center;gap:8px;font-size:14px;min-height:48px;cursor:pointer}
.radar-toggle input{width:18px;height:18px;accent-color:var(--teal)}
.closing:has(#radar-pause:checked) .radar-sweep{animation-play-state:paused}
.area-note{font-size:14px;margin:14px 0 0;color:#52616a}
@media(max-width:760px){.service-area{padding:24px 20px}.area-maps{grid-template-columns:1fr;gap:16px}.finland-map{height:220px}.area-heading h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){.radar-sweep{animation:none}.radar-toggle{display:none}}

.closing { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: center; }
.hero-copy { min-width: 0; }
.hero-copy p { margin-bottom: 0; }
.hero-radar { min-width: 0; }
.hero-radar .radar-toggle { justify-content: flex-end; }
@media(max-width:760px) { .closing { grid-template-columns: 1fr; gap: 24px; } }

.radar-city text { opacity: 0; animation: city-reveal 12s linear infinite; animation-delay: var(--city-delay); }
@keyframes city-reveal { 0%, 8% { opacity: 1; } 30%, 100% { opacity: 0; } }
.closing:has(#radar-pause:checked) .radar-city text { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .radar-city text { animation: none; opacity: 1; } }

.workflow-demo{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px;margin:28px 0}
.workflow-heading h2{font-size:26px;margin:0 0 8px}.workflow-heading p{margin:0}
.workflow-animation{display:block;width:100%;height:auto;margin:18px auto 0;max-width:850px}
.workflow-caption{font:18px "Segoe UI",Arial,sans-serif;fill:#52616a}
.workflow-app-title{font:600 16px "Segoe UI",Arial,sans-serif;fill:#20313b}
.workflow-app-text{font:14px "Segoe UI",Arial,sans-serif;fill:#20313b}
.workflow-note{font-size:14px;color:#52616a;margin:8px 0 0}
.workflow-pause{width:18px;height:18px;accent-color:var(--teal);vertical-align:middle;margin:20px 8px 0 0}
.workflow-pause-label{display:inline-block;font-size:14px;padding:10px 0;vertical-align:middle;margin-top:10px;cursor:pointer}
.workflow-before{animation:workflow-before 10s ease-in-out infinite}
.workflow-transfer{animation:workflow-transfer 10s ease-in-out infinite}
.workflow-row{animation:workflow-row 10s ease-in-out infinite}
.workflow-row-2{animation-name:workflow-row-two}.workflow-row-3{animation-name:workflow-row-three}
@keyframes workflow-before{0%,20%,95%,100%{opacity:1}45%,82%{opacity:.15}}
@keyframes workflow-transfer{0%,22%{opacity:0;transform:translateX(0)}28%{opacity:1}48%{opacity:0;transform:translateX(105px)}100%{opacity:0;transform:translateX(105px)}}
@keyframes workflow-row{0%,32%,100%{opacity:.12}42%,85%{opacity:1}}
@keyframes workflow-row-two{0%,42%,100%{opacity:.12}52%,85%{opacity:1}}
@keyframes workflow-row-three{0%,52%,100%{opacity:.12}62%,85%{opacity:1}}
.workflow-pause:checked ~ .workflow-animation *{animation-play-state:paused}
@media(max-width:600px){.workflow-demo{padding:22px 16px}.workflow-heading h2{font-size:23px}.workflow-animation{min-height:220px}.workflow-caption{font-size:22px}}
@media(prefers-reduced-motion:reduce){.workflow-animation *{animation:none!important}.workflow-transfer{opacity:0}.workflow-pause,.workflow-pause-label{display:none}.workflow-before{opacity:.35}}

/* Sarjakuvamainen, kahden ruudun havainnollistus. */
.comic-story{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);gap:12px;align-items:center;max-width:900px}
.comic-panel{position:relative;border:3px solid var(--ink);border-radius:8px;background:#fff;box-shadow:5px 5px 0 var(--ink);padding:42px 8px 6px;overflow:hidden}
.comic-before{background:#f4f6f8}.comic-after{background:#eaf2f7}
.comic-tag{position:absolute;top:0;left:0;padding:7px 14px;background:var(--ink);color:#fff;font-size:13px;font-weight:800;letter-spacing:1px}
.comic-after .comic-tag{background:var(--teal)}
.comic-panel svg{width:100%;height:auto;display:block}
.comic-speech{font:700 19px "Segoe UI",Arial,sans-serif;fill:#20313b}
.comic-small{font:600 17px "Segoe UI",Arial,sans-serif;fill:#20313b}
.comic-ringing{font:900 italic 22px "Segoe UI",Arial,sans-serif;fill:#007f9e;animation:comic-ring 10s infinite}
.comic-question-mark{font:800 42px "Segoe UI",Arial,sans-serif;fill:#007f9e}
.comic-transition{font-size:40px;font-weight:800;text-align:center;color:var(--teal)}
.comic-phone{transform-origin:36px 36px;animation:comic-phone 10s ease-in-out infinite}
.comic-papers{transform-origin:38px 50px;animation:comic-papers 10s ease-in-out infinite}
.comic-answer{transform-origin:180px 60px;animation:comic-answer 10s ease-in-out infinite}
.comic-success{animation:comic-answer 10s ease-in-out infinite}
@keyframes comic-phone{0%,4%,8%,12%,16%,20%,100%{transform:rotate(0)}2%,10%,18%{transform:rotate(-9deg)}6%,14%{transform:rotate(9deg)}}
@keyframes comic-papers{0%,12%,100%{transform:translateY(0) rotate(0)}6%,18%{transform:translateY(-6px) rotate(-4deg)}26%,85%{transform:translateY(0) rotate(0)}}
@keyframes comic-ring{0%,20%{opacity:1}25%,90%{opacity:0}100%{opacity:1}}
@keyframes comic-answer{0%,48%,100%{opacity:0;transform:scale(.94)}60%,86%{opacity:1;transform:scale(1)}}
.workflow-pause:checked ~ .comic-story *{animation-play-state:paused}
@media(max-width:600px){.comic-story{grid-template-columns:1fr;gap:12px;max-width:360px}.comic-transition{transform:rotate(90deg);line-height:1;height:36px}.comic-panel{margin-right:5px}.comic-speech{font-size:19px}}
@media(prefers-reduced-motion:reduce){.comic-story *{animation:none!important}.comic-answer,.comic-success{opacity:1}.comic-ringing{opacity:0}.comic-story .workflow-before{opacity:1}}

.official-brand{display:block}
.site-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 16px;padding:0 20px 20px}
.site-nav a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 16px;text-decoration:none;font-weight:600;border-radius:8px}
.site-nav a:hover{background:#eaf2f7}
.site-nav a[aria-current="page"]{background:var(--teal);color:white}
.service-link{margin-top:auto;padding-top:12px;font-weight:600}
.service-link span{margin-left:8px}
.subpage-intro{max-width:760px;margin:0 0 32px}
.subpage-intro h1{margin-bottom:18px}
.subpage-intro p{font-size:18px;margin:0}
.subpage .product-grid{margin-bottom:32px}
.product-grid .products h2{font-size:21px;max-width:none}
#yhteystiedot{scroll-margin-top:24px}
@media(max-width:600px){.site-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 18px 18px}.site-nav a{font-size:14px;padding:10px 8px;text-align:center}.subpage-intro p{font-size:16px}}

/* Pääviesti etusijalle, tutka tukevaksi yksityiskohdaksi. */
.closing { grid-template-columns: 1.3fr 1fr; }
.hero-radar { width: 100%; max-width: 360px; justify-self: end; }
.radar-sweep { opacity: .55; }
@media (max-width: 760px) { .closing { grid-template-columns: 1fr; } .hero-radar { max-width: 340px; justify-self: center; } }

/* Yhtenäinen, kevyt päävalikko kaikilla sivuilla. */
.site-header { background: #fff; border-bottom: 1px solid #e5eaed; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 12px 0; }
.official-brand { width: 210px; max-width: 28%; margin: 0; flex-shrink: 0; }
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px 24px; padding: 0; flex-wrap: wrap; }
.site-nav a { position: relative; background: transparent; border-radius: 0; padding: 14px 0; min-height: 48px; color: #52616a; font-size: 15px; font-weight: 500; text-decoration: none; transition: color .18s ease; }
.site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; border-radius: 2px; background: var(--teal); transform: scaleX(0); transition: transform .18s ease; }
.site-nav a:hover { background: transparent; color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(.45); }
.site-nav a[aria-current="page"] { background: transparent; color: var(--ink); font-weight: 650; }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 900px) {
 .header-inner { flex-direction: column; gap: 2px; padding: 10px 0 12px; }
 .official-brand { width: 190px; max-width: 70%; }
 .site-nav { justify-content: center; gap: 8px 24px; }
}
@media (max-width: 600px) {
 .site-nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 2px 20px; padding: 0; }
 .site-nav a { font-size: 14px; padding: 12px 2px; text-align: center; }
 .site-nav a::after { left: 20%; right: 20%; bottom: 3px; }
}
@media(prefers-reduced-motion:reduce) { .site-nav a, .site-nav a::after { transition: none; } }

.problem-solutions { margin: 40px 0; }
.comparison-head, .comparison-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.comparison-head { padding: 0 24px 18px; }
.comparison-head h2 { font-size: 26px; margin: 0; }
.comparison-head h2:last-child { color: var(--teal); }
.comparison-row { border-top: 1px solid var(--line); padding: 28px 24px; background: #fff; }
.comparison-row:last-child { border-bottom: 1px solid var(--line); }
.comparison-row h3 { font-size: 21px; line-height: 1.4; letter-spacing: -.4px; margin: 0 0 12px; }
.comparison-row p { margin: 0; }
.solution { border-left: 3px solid #b7d3df; padding-left: 24px; }
.solution h3 { color: #00677f; }
.solution a { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600; }
.comparison-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #52616a; margin-bottom: 10px; }
@media(max-width:760px) {
 .comparison-head { display: none; }
 .comparison-row { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
 .solution { padding-left: 18px; }
 .comparison-row h3 { font-size: 20px; }
}

/* Kolme selkeästi erotettua lähtötila–tavoitetila-kokonaisuutta. */
.problem-solutions { display: grid; gap: 24px; margin: 40px 0; }
.comparison-row { grid-template-columns: minmax(0,1fr) 80px minmax(0,1fr); gap: 28px; align-items: center; padding: 32px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.comparison-row:last-child { border: 1px solid var(--line); }
.comparison-row .problem, .comparison-row .solution { min-width: 0; }
.comparison-row .problem { color: #52616a; }
.comparison-row .problem h3 { color: var(--ink); }
.comparison-row .solution { border: 0; padding: 24px; border-radius: 8px; background: #eef4f8; }
.comparison-label { font-size: 12px; font-weight: 650; letter-spacing: .13em; margin-bottom: 14px; }
.solution .comparison-label { color: #00677f; }
.comparison-arrow { color: var(--teal); }
.comparison-arrow svg { display: block; width: 80px; height: 40px; }
.arrow-track { stroke: #95afbf; stroke-width: 2; stroke-linecap: round; }
.arrow-tip { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media(max-width:900px) and (min-width:761px) { .comparison-row { grid-template-columns: minmax(0,1fr) 48px minmax(0,1fr); gap: 16px; padding: 24px; } .comparison-arrow svg { width: 48px; } }
@media(max-width:760px) {
 .problem-solutions { gap: 20px; }
 .comparison-row { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; }
 .comparison-arrow { justify-self: center; height: 56px; display: grid; place-items: center; }
 .comparison-arrow svg { width: 56px; height: 28px; transform: rotate(90deg); }
 .comparison-row .solution { padding: 20px; }
}

/* Yksi jatkuva pinta; rivit erottuvat jakoviivoilla. */
.problem-solutions { gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.comparison-row, .comparison-row:last-child { position: relative; border: 0; border-radius: 0; background: transparent; padding: 36px 32px; }
.comparison-row + .comparison-row::before { content: ''; position: absolute; top: 0; left: 32px; right: 32px; height: 1px; background: var(--line); }
.comparison-row .solution { background: transparent; border-radius: 0; padding: 0; }
.comparison-arrow svg { display: block; width: 100%; height: auto; }
@media(max-width:760px) {
 .problem-solutions { gap: 0; }
 .comparison-row { padding: 28px 24px; gap: 18px; }
 .comparison-row + .comparison-row::before { left: 24px; right: 24px; }
 .comparison-row .solution { padding: 0; }
 .comparison-arrow { width: 64px; height: 64px; }
 .comparison-arrow svg { width: 64px; height: auto; transform: rotate(90deg); }
}

/* Aloitus ja ongelma–ratkaisuosio lähemmäs toisiaan. */
main > .closing:first-child { margin-bottom: 0; }
.closing + .problem-solutions { margin-top: 12px; }

/* Etusivun aloitus suoraan yläpalkin alle. */
main:has(> .closing:first-child) { padding-top: 0; }

/* Tiivis etusivu: kahvikutsu lähemmäs ensimmäistä näkymää. */
main:has(> .closing) .comparison-row { padding: 14px 24px; gap: 20px; grid-template-columns: minmax(0,1fr) 56px minmax(0,1fr); }
main:has(> .closing) .comparison-row h3 { font-size: 18px; line-height: 1.3; margin: 0; }
main:has(> .closing) .solution a { margin-top: 4px; font-size: 14px; }
main:has(> .closing) .comparison-arrow svg { max-height: 38px; }
main:has(> .closing) .problem-solutions { margin-bottom: 12px; }
main:has(> .closing) > .coffee { margin-top: 12px; padding: 22px 28px; }
main:has(> .closing) > .closing { padding: 20px 28px; }
main:has(> .closing) .hero-radar { max-width: 328.9px; }
.site-header .official-brand { width: 150px; }
.site-header .header-inner { padding-top: 6px; padding-bottom: 6px; }
@media(max-width:760px) {
 main:has(> .closing) .comparison-row { grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr); padding: 16px 12px; gap: 10px; }
 main:has(> .closing) .comparison-row h3 { font-size: 16px; }
 main:has(> .closing) .comparison-arrow { width: 28px; height: auto; }
 main:has(> .closing) .comparison-arrow svg { width: 28px; transform: none; }
 main:has(> .closing) > .closing { padding: 24px 20px; }
 main:has(> .closing) .hero-radar { max-width: 388.7px; }
}

/* Tietosuojaseloste ja yhteinen alatunniste. */
.privacy-page { max-width: 820px; }
.privacy-page h1 { margin-bottom: 12px; }
.privacy-meta { color: var(--muted); font-size: 14px; }
.privacy-note { padding: 20px; border: 1px solid #dbe6ed; border-radius: 10px; background: #eef4f8; margin: 24px 0 32px; }
.privacy-page section { margin: 28px 0; }
.privacy-page h2 { font-size: 21px; margin-bottom: 12px; }
.privacy-page a { overflow-wrap: anywhere; }
.privacy-footer { max-width: 1100px; width: calc(100% - 76px); margin: 0 auto; padding: 18px 0 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
@media (max-width: 600px) { .privacy-page, .privacy-footer { width: calc(100% - 32px); } }

/* Teams-ajanvaraus yhteydenottopainikkeiden rinnalla. */
.contact-actions { align-items: flex-start; }
.booking-action { display: flex; flex-direction: column; align-items: center; gap: 5px; max-width: 100%; }
.booking-action .button { text-align: center; }
.booking-action svg { flex-shrink: 0; }
.booking-details { color: var(--muted); font-size: 13px; line-height: 1.5; }

/* Juoksurata yhdistää ongelmien ja ratkaisujen puolet. */
.solution-track { padding: 8px 16px 0; border-bottom: 1px solid var(--line); }
.solution-track svg { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .solution-track { padding: 8px 4px 0; } .solution-track svg { min-height: 58px; } }

/* WhatsAppin oma vihreä ja tumma, luettava teksti. */
.button.button-whatsapp { background: #a5dcb7; border-color: #8ccda2; color: #102d1b; }
.button.button-whatsapp:hover { background: #8fcea5; border-color: #77bc90; color: #102d1b; }

.problem-solutions .problem-detail { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

.problem-solutions .solution-detail { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* Toiminnanohjauksen esittelysivu. */
.erp-back { display: inline-block; margin-bottom: 20px; font-size: 14px; }
.erp-hero { background: #eef4f8; border: 1px solid #dbe6ed; border-radius: 12px; padding: 40px; }
.erp-eyebrow { color: var(--teal); font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.erp-hero h1 { font-size: clamp(30px, 4vw, 48px); margin-bottom: 20px; }
.erp-hero > p:not(.erp-eyebrow) { max-width: 720px; font-size: 18px; }
.erp-tags { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 24px; font-size: 14px; font-weight: 600; }
.erp-tags span { border-left: 3px solid var(--teal); padding-left: 10px; }
.erp-features { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.erp-features article { padding: 28px; background: white; border: 1px solid var(--line); border-radius: 10px; }
.erp-page h2 { font-size: 23px; line-height: 1.3; }
.erp-features p:last-child, .erp-choice p:last-child { margin-bottom: 0; }
.erp-core { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; padding: 32px 0; border-block: 1px solid var(--line); }
.erp-core-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 14px; color: var(--teal); }
.erp-core-flow span:not([aria-hidden]), .erp-core-flow strong { background: white; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; }
.erp-choice { max-width: 780px; padding: 32px 0 8px; }
@media(max-width:760px) { .erp-hero { padding: 24px; } .erp-features, .erp-core { grid-template-columns: 1fr; } .erp-features article { padding: 22px; } .erp-core { gap: 8px; } .erp-page { overflow-wrap: anywhere; } }

/* Sama ylävalikon koko ja rytmi jokaisella sivulla. */
.site-header .header-inner { gap: 20px; }
.site-header .site-nav { gap: 6px 32px; }
.site-header .site-nav a { font-size: 14px; font-weight: 500; }
.site-header .site-nav a[aria-current="page"] { font-weight: 500; }
@media (max-width: 1050px) { .site-header .header-inner { flex-direction: column; gap: 2px; } .site-header .site-nav { justify-content: center; } }
@media (max-width: 600px) { .site-header .site-nav { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2px 12px; } .site-header .site-nav a { overflow-wrap: anywhere; } }

/* Varaa vierityspalkin tila myös lyhyillä sivuilla: keskitys ei hypi. */
html { overflow-y: scroll; }
@supports (scrollbar-gutter: stable) { html { overflow-y: auto; scrollbar-gutter: stable; } }

/* Havainnollistava paikannus- ja geofencing-kartta. */
.erp-map-demo { margin: 24px 0; background: white; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.erp-map-copy { padding: 28px 28px 8px; max-width: 820px; }
.erp-map-caption { color: var(--muted); font-size: 14px; }
.erp-map-figure { margin: 0; }
.erp-map-figure svg { display: block; width: 100%; height: auto; }
.erp-map-figure figcaption { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 16px 28px; font-size: 14px; }
.erp-map-figure figcaption span { display: flex; align-items: center; gap: 8px; }
.map-key-area { width: 22px; height: 14px; border: 2px dashed #007f9e; background: #eef4f8; }
.map-key-car { width: 12px; height: 12px; border: 2px solid #007f9e; border-radius: 50%; }
@media(max-width:600px) { .erp-map-copy { padding: 20px 20px 4px; } .erp-map-figure figcaption { padding: 14px 20px; } }

/* GPS-esittely ja kartta vierekkäin leveillä näytöillä. */
.erp-map-demo { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 24px; padding: 28px; }
.erp-map-demo .erp-map-copy { padding: 0; }
.erp-map-demo .erp-map-figure { min-width: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.erp-map-demo .erp-map-figure figcaption { padding: 12px 14px; gap: 8px 16px; font-size: 12px; }
@media(max-width:760px) { .erp-map-demo { grid-template-columns: minmax(0,1fr); padding: 20px; gap: 16px; } }

/* Yhteinen kahvi- ja Teams-banneri kaikilla sivuilla. */
main > .coffee, main:has(> .closing) > .coffee { margin-top: 24px; padding: 24px 28px; }
main > .coffee h2 { font-size: 25px; line-height: 1.4; margin-bottom: 14px; }
main > .coffee p { max-width: 740px; margin-bottom: 18px; }
@media(max-width:600px) { main > .coffee, main:has(> .closing) > .coffee { padding: 22px 20px; } }

/* Järjestelmän kolmikerroksinen pyramidi. */
.erp-pyramid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); align-items: center; gap: 32px; margin: 24px 0; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.erp-pyramid-copy p:last-child { margin-bottom: 0; }
.erp-pyramid-graphic { display: block; width: 100%; height: auto; max-width: 540px; justify-self: center; }
@media(max-width:760px) { .erp-pyramid { grid-template-columns: minmax(0,1fr); padding: 22px; gap: 18px; } }

/* Työjonon havainnollistus, ei interaktiivinen käyttöliittymä. */
.erp-work-example { margin: 24px 0; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.erp-work-copy { max-width: 680px; }
.work-board { margin: 24px 0 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #f4f6f8; }
.work-board figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 16px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.work-board figcaption > span { font-size: 12px; color: #52616a; }
.work-board-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding: 20px; }
.work-lane { min-width: 0; }
.work-lane h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 15px; }
.work-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; }
.work-dot-wait { background: #82929a; }.work-dot-active { background: #007f9e; }.work-dot-done { background: #168348; }
.work-count { margin-left: auto; color: #52616a; font-size: 12px; font-weight: 500; }
.work-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.work-card-id { font-size: 11px; letter-spacing: .6px; color: #52616a; }
.work-card h4 { font-size: 15px; line-height: 1.4; margin: 6px 0; }
.work-card p { font-size: 13px; color: #52616a; margin: 0 0 16px; }
.work-card-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.work-person { background: #eef4f8; border-radius: 4px; padding: 2px 8px; }
.work-status { display: block; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: #00718c; }
.work-status-done { color: #167340; }
@media(max-width:760px) { .erp-work-example { padding: 22px; } .work-board-columns { grid-template-columns: minmax(0,1fr); padding: 16px; gap: 14px; } .work-lane + .work-lane { border-top: 1px solid var(--line); padding-top: 16px; } }

/* Yhdistetyn palvelusivun osiot. */
.services-page .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.services-expert { margin-top: 36px; }
.services-expert > p { max-width: 760px; }
.services-expert .products h3 { margin: 0; font-size: 21px; line-height: 1.4; }
.services-page [id] { scroll-margin-top: 24px; }
@media(max-width:760px) { .services-page .product-grid { grid-template-columns: minmax(0,1fr); } }

/* Hieman tilaa valikon oikealle puolelle leveässä näkymässä. */
@media(min-width:1051px) { .site-header .site-nav { margin-right: 48px; } }

/* Palvelusivun kolme pääkohtaa. */
.services-three { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.services-three article { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 28px; scroll-margin-top: 24px; }
.services-three .service-number { display: block; font-size: 14px; font-weight: 600; color: var(--teal); margin-bottom: 20px; }
.services-three h2 { font-size: 23px; line-height: 1.3; margin-bottom: 16px; }
.services-three p { margin-bottom: 0; }
@media(max-width:900px) { .services-three { grid-template-columns: minmax(0,1fr); } }

.services-three .service-icon { display: block; width: 44px; height: 44px; margin-bottom: 20px; color: var(--teal); }

.services-three .service-points { margin: 0; padding-left: 20px; }
.services-three .service-points li + li { margin-top: 10px; }
.services-three .service-points li::marker { color: var(--teal); }

.services-three .service-note { margin: 18px 0 0; }

.services-page .service-engagement { margin: 28px 0; padding: 24px 0; border-top: 1px solid var(--line); }
.service-engagement h2 { font-size: 23px; margin-bottom: 12px; }
.service-engagement p { max-width: 780px; margin-bottom: 0; }

/* Etusivun suuremmat, haalean vihreät nuolet. */
main:has(> .closing) .comparison-row { grid-template-columns: minmax(0,1fr) 72px minmax(0,1fr); }
main:has(> .closing) .comparison-arrow { width: 72px; height: auto; }
main:has(> .closing) .comparison-arrow svg { width: 72px; height: 64px; max-height: 64px; }
@media(max-width:760px) { main:has(> .closing) .comparison-row { grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr); } main:has(> .closing) .comparison-arrow { width: 40px; } main:has(> .closing) .comparison-arrow svg { width: 40px; height: 40px; max-height: 40px; } }

/* Kahvikutsu: teksti vasemmalla, tasaleveät yhteydenotot oikealla. */
main > .coffee { display: grid; grid-template-columns: minmax(0,1fr) 370px; column-gap: 32px; align-items: start; }
main > .coffee > h2 { grid-column: 1; grid-row: 1; }
main > .coffee > p { grid-column: 1; grid-row: 2; margin-bottom: 0; }
main > .coffee > .contact-actions { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: stretch; justify-content: center; align-self: center; gap: 12px; margin: 0; width: 100%; }
.coffee .booking-action { width: 100%; align-items: stretch; }
.coffee .booking-details { text-align: center; }
.coffee .contact-actions .button { width: 100%; box-sizing: border-box; }
@media(max-width:900px) { main > .coffee { grid-template-columns: minmax(0,1fr); row-gap: 16px; } main > .coffee > h2 { margin-bottom: 0; } main > .coffee > .contact-actions { grid-column: 1; grid-row: 3; width: 100%; max-width: 370px; } }

/* Teams-varauksen hieman vaaleampi sininen. */
.coffee .booking-action .button { background: #acd7e2; border-color: #91c4d2; color: #152b35; }
.coffee .booking-action .button:hover { background: #95cad8; border-color: #7bb5c5; color: #152b35; }

main > .coffee > .contact-page-link { grid-column: 1; grid-row: 3; margin: 12px 0 0; }
@media(max-width:900px) { main > .coffee > .contact-page-link { grid-row: 4; } }

.erp-automatic { margin: 24px 0; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.erp-automatic p { max-width: 780px; margin-bottom: 0; }
@media(max-width:760px) { .erp-automatic { padding: 22px; } }

/* Tapahtumapohjaisen automaation havainnollistus. */
.event-flow { margin: 26px 0 0; padding: 24px; border: 1px solid var(--line); background: #f4f6f8; border-radius: 10px; }
.event-flow figcaption { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.event-flow-grid { display: grid; grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1.1fr); gap: 14px; align-items: center; }
.event-flow-step { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.event-flow svg { width: 32px; height: 32px; flex-shrink: 0; color: var(--teal); }
.event-flow-step strong { font-size: 16px; line-height: 1.4; }
.event-flow-step > span { color: #52616a; font-size: 13px; }
.event-flow-arrow { color: var(--teal); font-size: 28px; text-align: center; }
.event-flow-engine { background: #eaf2f7; border: 1px solid #dbe6ed; padding: 18px; border-radius: 8px; }
.event-flow-results { display: grid; gap: 10px; }
.event-flow-results > div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.event-flow-results svg { width: 24px; height: 24px; }
.erp-automatic .event-flow > p { margin: 20px 0 0; font-size: 13px; color: #52616a; }
@media(max-width:760px) { .event-flow { padding: 18px; } .event-flow-grid { grid-template-columns: minmax(0,1fr); gap: 12px; } .event-flow-arrow { transform: rotate(90deg); justify-self: center; } }

/* Rauhallinen tarve–ratkaisu-asettelu ilman nuolia. */
main:has(> .closing) .comparison-clean .comparison-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0; padding: 0; align-items: stretch; }
.comparison-clean .comparison-row .problem, .comparison-clean .comparison-row .solution { padding: 20px 24px; min-width: 0; }
.comparison-clean .comparison-row .solution { border-left: 2px solid #9cc5d4; background: #deedf4; border-radius: 0; }
.comparison-clean .comparison-row + .comparison-row::before { left: 0; right: 0; }
@media(max-width:760px) { .comparison-clean .comparison-row .problem, .comparison-clean .comparison-row .solution { padding: 16px 14px; } }
@media(max-width:480px) { main:has(> .closing) .comparison-clean .comparison-row { grid-template-columns: minmax(0,1fr); } .comparison-clean .comparison-row .solution { border-left: 0; border-top: 2px solid #9cc5d4; } }

/* Tarve ja ratkaisu samassa valkoisessa rivissä, ilman ikoneja. */
main:has(> .closing) .comparison-stacked .comparison-row { display: block; padding: 24px 28px; background: #fff; }
.comparison-stacked .comparison-row .problem, .comparison-stacked .comparison-row .solution { padding: 0; border: 0; background: transparent; }
.comparison-stacked .comparison-row .solution { margin-top: 14px; }
main:has(> .closing) .comparison-stacked .problem h3 { font-size: 20px; }
main:has(> .closing) .comparison-stacked .solution h3 { font-size: 16px; font-weight: 600; }
.comparison-stacked .problem-detail, .comparison-stacked .solution-detail { max-width: 800px; }
.comparison-stacked .comparison-row + .comparison-row::before { left: 28px; right: 28px; }
@media(max-width:760px) { main:has(> .closing) .comparison-stacked .comparison-row { padding: 20px; } .comparison-stacked .comparison-row + .comparison-row::before { left: 20px; right: 20px; } }

/* Alkuperäinen rinnakkainen asettelu ilman nuolia. */
main:has(> .closing) .comparison-plain .comparison-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 92px; padding: 14px 24px; background: #fff; }
.comparison-plain .comparison-row .solution { padding: 0; margin: 0; border: 0; background: transparent; }
@media(max-width:760px) { main:has(> .closing) .comparison-plain .comparison-row { column-gap: 50px; padding: 16px 12px; } }

/* Etusivun tarpeet ja ratkaisut samalle aloituskorkeudelle. */
main:has(> .closing) .comparison-plain .comparison-row { align-items: start; text-align: left; }
.comparison-plain .comparison-row .problem, .comparison-plain .comparison-row .solution { align-self: start; text-align: left; }

.erp-safety { margin: 24px 0; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.erp-safety p { max-width: 780px; }
.erp-safety p:last-child { margin-bottom: 0; }
@media(max-width:760px) { .erp-safety { padding: 22px; } }

/* Turvallisuushavainnon käsittely havainnekuvana. */
.safety-demo { margin: 26px 0 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #f4f6f8; }
.safety-demo figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 16px 20px; background: white; border-bottom: 1px solid var(--line); }
.safety-demo figcaption span { font-size: 12px; color: #52616a; }
.safety-demo-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; align-items: center; padding: 24px; }
.safety-demo-layout > svg { display: block; width: 100%; height: auto; }
.safety-record-heading { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.safety-record-heading > span { font-size: 11px; letter-spacing: .6px; color: var(--teal); font-weight: 600; }
.safety-record-heading > strong { font-size: 19px; }
.safety-steps { list-style: none; padding: 0; margin: 0; }
.safety-steps li { display: flex; gap: 12px; position: relative; padding-bottom: 20px; }
.safety-steps li:last-child { padding-bottom: 0; }
.safety-steps li:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 1px; background: #c7d7df; }
.safety-step-dot { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #deedf4; color: #006b85; font-size: 13px; font-weight: 600; }
.safety-step-done { background: #dceee1; color: #24663c; }
.safety-steps strong { font-size: 14px; }
.erp-safety .safety-steps p { font-size: 13px; line-height: 1.5; color: #52616a; margin: 4px 0 0; }
@media(max-width:760px) { .safety-demo-layout { grid-template-columns: minmax(0,1fr); padding: 18px; gap: 22px; } }

/* Yhtenäinen vaaleansininen aloitus palveluille ja yhteystiedoille. */
.page-title-banner { background: #eef4f8; border: 1px solid #dbe6ed; border-radius: 12px; padding: 40px; margin-bottom: 24px; }
.page-title-banner h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.2; margin: 0; }
@media(max-width:760px) { .page-title-banner { padding: 24px; } }

/* Työjonon mobiilikäyttöliittymän havainnollistus. */
.erp-work-example { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 36px; }
.mobile-work-demo { margin: 0; min-width: 0; }
.work-phone { max-width: 330px; margin: auto; border: 7px solid #20313b; border-radius: 32px; overflow: hidden; background: #f4f6f8; text-align: left; }
.work-phone-status { display: flex; justify-content: space-between; padding: 9px 18px 4px; background: #fff; font-size: 10px; font-weight: 600; }
.work-phone-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; background: #fff; font-size: 13px; font-weight: 700; letter-spacing: 2px; border-bottom: 1px solid var(--line); }
.work-phone-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #eaf2f7; color: var(--teal); letter-spacing: 0; }
.work-phone-content { padding: 16px; }
.work-phone-greeting { font-size: 12px; color: #52616a; margin: 0 0 2px; }
.work-phone-content h3 { font-size: 24px; line-height: 1.3; margin: 0 0 14px; }
.work-phone-tabs { display: flex; gap: 18px; font-size: 12px; margin-bottom: 16px; border-bottom: 1px solid #dbe3e7; }
.work-phone-tabs > span { padding-bottom: 8px; }
.work-phone-tabs .is-active { border-bottom: 2px solid var(--teal); color: var(--teal); font-weight: 600; }
.work-phone-tabs b { font-size: 10px; }
.work-phone .work-card { padding: 14px; }
.work-phone .work-card-current { border-color: #9cc5d4; }
.work-phone-card-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 10px; color: #52616a; margin-bottom: 10px; }
.work-phone-badge { background: #e2f1f5; color: #006780; padding: 3px 7px; border-radius: 4px; font-weight: 600; }
.work-phone-badge.badge-wait { background: #f1eee5; color: #74591c; }
.work-phone-progress { height: 4px; margin-top: 14px; background: #eaf2f7; border-radius: 2px; }
.work-phone-progress span { display: block; width: 55%; height: 100%; background: var(--teal); border-radius: 2px; }
.work-phone-action { display: flex; justify-content: space-between; color: var(--teal); font-size: 12px; font-weight: 600; margin-top: 12px; }
.work-phone-complete { display: flex; gap: 10px; align-items: center; font-size: 12px; padding: 8px 2px; }
.work-phone-complete > span { color: #267343; font-size: 20px; }
.work-phone-complete div { display: flex; flex-direction: column; }
.work-phone-complete div > span { font-size: 11px; color: #52616a; }
.work-phone-nav { display: flex; justify-content: space-around; background: #fff; border-top: 1px solid var(--line); padding: 8px; }
.work-phone-nav > span { display: flex; flex-direction: column; align-items: center; color: #687b85; font-size: 20px; }
.work-phone-nav small { font-size: 10px; }
.work-phone-nav .is-active { color: var(--teal); }
.work-phone-home { height: 4px; width: 90px; border-radius: 4px; background: #20313b; margin: 7px auto; }
.mobile-work-demo figcaption { text-align: center; font-size: 12px; color: #52616a; margin-top: 12px; }
@media(max-width:760px) { .erp-work-example { grid-template-columns: minmax(0,1fr); gap: 24px; } }

.erp-maintenance { margin: 24px 0; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.erp-maintenance p { max-width: 780px; }
.erp-maintenance p:last-child { margin-bottom: 0; }
@media(max-width:760px) { .erp-maintenance { padding: 22px; } }

/* Kunnossapidon käyttötieto ja automaattinen huoltotyö. */
.maintenance-demo { margin: 26px 0 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #f4f6f8; }
.maintenance-demo figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 16px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.maintenance-demo figcaption > span { font-size: 12px; color: #52616a; }
.maintenance-demo-grid { display: grid; grid-template-columns: minmax(0,1fr) 32px minmax(0,1.3fr); gap: 24px; padding: 24px; align-items: center; }
.maintenance-machine { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.maintenance-machine > svg { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto 12px; }
.maintenance-machine-title { display: flex; flex-direction: column; gap: 4px; }
.maintenance-machine-title > span, .maintenance-hours > span { font-size: 12px; color: #52616a; }
.maintenance-hours { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.maintenance-hours > strong { font-size: 30px; line-height: 1.2; }
.maintenance-hours small { font-size: 16px; font-weight: 500; }
.maintenance-meter { height: 7px; border-radius: 4px; background: #eaf2f7; overflow: hidden; }
.maintenance-meter span { display: block; width: 100%; height: 100%; background: #007f9e; }
.erp-maintenance .maintenance-threshold { margin: 8px 0 0; color: #00677f; font-size: 13px; }
.maintenance-flow-arrow { font-size: 30px; color: var(--teal); text-align: center; }
.maintenance-created { min-width: 0; }
.maintenance-label { color: var(--teal); font-size: 11px; font-weight: 600; letter-spacing: .6px; }
.maintenance-created h3 { font-size: 22px; margin: 6px 0; }
.erp-maintenance .maintenance-created > p { margin: 0 0 14px; color: #52616a; font-size: 14px; }
.maintenance-created dl { margin: 0; font-size: 13px; }
.maintenance-created dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.maintenance-created dt { color: #52616a; }.maintenance-created dd { margin: 0; font-weight: 600; }
.maintenance-reminder { display: flex; gap: 12px; padding: 14px; margin-top: 20px; background: #eaf2f7; border: 1px solid #dbe6ed; border-radius: 8px; }
.maintenance-reminder svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--teal); }
.maintenance-reminder div { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.maintenance-reminder span { color: #52616a; font-size: 12px; }
.erp-maintenance .maintenance-demo-note { margin: 0; padding: 0 24px 20px; font-size: 13px; color: #52616a; }
@media(max-width:760px) { .maintenance-demo-grid { grid-template-columns: minmax(0,1fr); padding: 18px; gap: 16px; } .maintenance-flow-arrow { transform: rotate(90deg); justify-self: center; } }

.erp-recurring { margin: 24px 0; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.erp-recurring p { max-width: 780px; }
.erp-recurring p:last-child { margin-bottom: 0; }
@media(max-width:760px) { .erp-recurring { padding: 22px; } }

/* Toistuvien työtehtävien havainnekuva */
.recurring-demo { margin: 26px 0 0; overflow: hidden; border: 1px solid #d8e4eb; border-radius: 12px; background: #f3f8fb; }
.recurring-demo figcaption { padding: 17px 22px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #eaf4fa; color: #152b35; font-weight: 600; }
.recurring-demo figcaption span { font-size: 12px; color: #52616a; font-weight: 400; }
.recurring-demo-grid { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 26px; padding: 24px; align-items: center; }
.recurring-rule { display: flex; flex-direction: column; gap: 10px; color: #152b35; }
.recurring-rule svg { color: #007f9e; }
.recurring-rule > strong { font-size: 19px; }
.recurring-rule > span, .recurring-rule small { font-size: 13px; color: #52616a; }
.recurring-sites { display: flex; flex-wrap: wrap; gap: 6px; margin: 5px 0; }
.recurring-sites span { background: #fff; border: 1px solid #d8e4eb; border-radius: 5px; padding: 4px 7px; font-size: 12px; }
.recurring-weeks { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.recurring-week { background: #fff; border: 1px solid #d8e4eb; border-radius: 8px; overflow: hidden; }
.recurring-week-heading { padding: 12px; border-bottom: 1px solid #e2eaf0; display: flex; flex-direction: column; gap: 3px; }
.recurring-week-heading span { color: #007f9e; font-size: 12px; }
.recurring-week-heading strong { font-size: 14px; }
.recurring-job { margin: 9px 8px; padding: 9px 7px; background: #eef6fa; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.recurring-job i { width: 3px; height: 18px; background: #007f9e; flex-shrink: 0; }
.recurring-created { display: block; padding: 3px 12px 12px; color: #52616a; font-size: 11px; }
.erp-recurring .recurring-continuation { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: #007f9e; text-align: center; }
@media(max-width:900px) { .recurring-demo-grid { grid-template-columns: minmax(0,1fr); } }
@media(max-width:480px) { .recurring-demo-grid { padding: 14px; } .recurring-weeks { grid-template-columns: minmax(0,1fr); } .recurring-week { display: grid; grid-template-columns: 100px 1fr; padding-bottom: 8px; } .recurring-week-heading { grid-row: span 4; border: 0; } .recurring-job { margin: 4px 8px; } .recurring-created { grid-column: 2; } }

.plowing-map { margin:26px 0 0; border:1px solid #d8e4eb; border-radius:12px; overflow:hidden; background:#f3f8fb; }
.plowing-map figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:17px 22px; background:#eaf4fa; }
.plowing-map figcaption span { font-size:12px; color:#52616a; }
.plowing-map svg { display:block; width:100%; height:auto; }
.plowing-legend { display:flex; flex-wrap:wrap; gap:24px; padding:15px 22px; background:white; font-size:13px; }
.plowing-legend span { display:flex; align-items:center; gap:8px; }
.plowing-legend i { display:inline-block; width:12px; height:12px; border-radius:3px; }
.plowing-done { background:#47896a; }.plowing-active { background:#b38734; }.plowing-waiting { background:#8091a4; }
@media(max-width:600px) { .plowing-map svg { min-height:250px; } .plowing-legend { gap:12px; padding:12px; } }

.erp-onboarding { margin:24px 0; padding:28px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.erp-onboarding > p:not(.erp-eyebrow) { max-width:850px; }
.erp-onboarding-pricing { display:grid; grid-template-columns:1.3fr 1fr; gap:28px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.erp-onboarding-pricing h3 { margin:0 0 12px; }
.erp-onboarding-pricing h3 span { font-size:14px; font-weight:400; white-space:nowrap; }
.erp-onboarding-pricing p { margin:0; }
@media(max-width:760px) { .erp-onboarding { padding:22px; } .erp-onboarding-pricing { grid-template-columns:1fr; gap:22px; } }

.service-engagement #engagement-title { display:flex; align-items:center; gap:12px; }
.engagement-check { flex-shrink:0; }

.contact-photo { margin:20px 0 0; }
.contact-photo img { display:block; width:100%; height:auto; border-radius:8px; }
.contact-photo figcaption { margin-top:8px; font-size:13px; color:#52616a; }

.billing-info { margin:24px 0; padding:28px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.billing-info h2 { margin-top:0; }
.billing-details { margin:20px 0 0; }
.billing-details > div { display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; padding:8px 0; }
.billing-details dt { color:#52616a; }
.billing-details dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
@media(max-width:600px) { .billing-info { padding:22px; } .billing-details > div { grid-template-columns:1fr; gap:3px; } }

.contact-details-with-photo { min-width:0; }
.contact-details-with-photo + .map-container { display:flex; flex-direction:column; align-self:stretch; }
.contact-details-with-photo + .map-container .contact-map { flex:1; min-height:300px; }
@media(max-width:760px) { .contact-details-with-photo + .map-container .contact-map { flex:none; height:300px; } }

/* Tiivis Näin me ajattelemme -osio */
.why-section { margin:24px 0; padding:20px 24px; }
.why-section > h2 { margin:0 0 12px; }
.why-section .why-item { grid-template-columns:30px minmax(155px,.7fr) minmax(0,1.7fr); gap:16px; padding:14px 0; align-items:start; }
.why-section .why-item .product-icon svg { width:30px; height:30px; }
.why-section .why-item h3 { margin:2px 0 0; font-size:18px; }
.why-section .why-item p { margin:0; line-height:1.5; }
.why-section .why-item:last-child { padding-bottom:0; }
@media(max-width:760px) {
 .why-section { padding:18px; }
 .why-section .why-item { grid-template-columns:26px minmax(0,1fr); gap:5px 12px; padding:12px 0; }
 .why-section .why-item .product-icon { grid-row:span 2; }
 .why-section .why-item .product-icon svg { width:26px; height:26px; }
 .why-section .why-item h3 { margin:0; }
 .why-section .why-item p { grid-column:2; }
}

.contact-info.contact-unified { margin-top:0; padding:32px; background:#eef4f8; border:1px solid #dbe6ed; border-radius:12px; }
.contact-unified > h1 { font-size:clamp(30px,4vw,48px); line-height:1.2; margin:0 0 26px; }
@media(max-width:760px) { .contact-info.contact-unified { padding:24px; } .contact-unified > h1 { margin-bottom:20px; } }

/* Mobiilitarkistus: pitkät sanat ja ongelma–ratkaisuparit. */
@media(max-width:600px) {
 main h1, main h2, main h3, .coffee .button { overflow-wrap:anywhere; }
 main:has(> .closing) .comparison-plain .comparison-row { grid-template-columns:minmax(0,1fr); row-gap:12px; padding:18px 16px; }
 .coffee .contact-actions .button { min-width:0; padding:12px; text-align:center; }
 .work-phone-tabs { flex-wrap:wrap; gap:8px 14px; }
 .work-phone-card-top { flex-wrap:wrap; }
}

/* Suostumus: Google Analytics latautuu vain hyväksynnän jälkeen. */
.analytics-consent { position:fixed; z-index:1000; bottom:16px; left:50%; transform:translateX(-50%); width:calc(100% - 32px); max-width:700px; max-height:85vh; overflow:auto; padding:22px; background:#fff; border:1px solid #bfd0da; border-radius:12px; box-shadow:0 6px 30px #152b3526; }
.analytics-consent[hidden], .consent-settings[hidden] { display:none; }
.analytics-consent h2 { margin:0 0 8px; font-size:21px; }
.analytics-consent p { margin:0 0 16px; font-size:14px; }
.consent-actions { display:flex; gap:12px; flex-wrap:wrap; }
.consent-actions button { flex:1 1 200px; min-height:44px; border:1px solid #007f9e; background:#eef4f8; color:#152b35; border-radius:6px; padding:10px 14px; font:inherit; cursor:pointer; }
.consent-actions button:hover { background:#dcecf4; }
.consent-settings { border:0; padding:8px; background:transparent; color:#007f9e; font:inherit; text-decoration:underline; cursor:pointer; }
.consent-actions button:focus-visible, .consent-settings:focus-visible { outline:3px solid #007f9e; outline-offset:3px; }
.privacy-footer { flex-wrap:wrap; }

.contact-layout > .contact-photo { margin:0; min-width:0; }

.work-phone-logo { display: block; width: 125px; max-width: 65%; height: auto; }

/* Contact details and billing alongside the office photo and map. */
.contact-details, .contact-location { min-width: 0; }
.contact-location { display: grid; gap: 18px; }
.contact-location .contact-photo { margin: 0; }
.contact-location .contact-map { width: 100%; box-sizing: border-box; }
.contact-details .billing-info { margin: 24px 0 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.contact-details .billing-info h2 { font-size: 22px; }
.contact-details .billing-details > div { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; font-size: 14px; }
@media(max-width:460px) { .contact-details .billing-details > div { grid-template-columns: 1fr; gap: 3px; } }

/* Smaller office photo and map, with matching widths. */
.contact-location { width: 85%; justify-self: start; }
.contact-location .contact-map { height: 255px; }

/* Center the office photo and map in the right half. */
.contact-unified .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.contact-location { justify-self: center; }
@media(max-width:760px) { .contact-unified .contact-layout { grid-template-columns: minmax(0, 1fr); } }

/* Lift the office photo slightly on desktop. */
@media(min-width:761px) { .contact-location .contact-photo { margin-top: -24px; } }

.contact-map-figure { margin: 0; min-width: 0; }
.contact-map-figure figcaption { margin-top: 8px; font-size: 13px; color: #52616a; }

/* Scale the phone illustration and its layout footprint together. */
.mobile-work-demo .work-phone { width: 330px; max-width: 100%; zoom: 0.75; }

/* The illustration follows the text height, without adding row height. */
@media(min-width:761px) {
 .erp-work-example { align-items: stretch; }
 .mobile-work-demo { position: relative; overflow: hidden; }
 .work-phone-fit { position: absolute; top: 0; left: 50%; width: 344px; transform: translateX(-50%) scale(var(--phone-fit-scale, .3)); transform-origin: top center; }
 .work-phone-fit .work-phone { zoom: 1; width: 330px; }
}

@media(min-width:761px) { .erp-work-copy { align-self: start; } }