@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--accent:#7154de;--dark:#1e2239;--ink:#23293d;--muted:#72788a;--bg:#f5f6fa;--line:#e7e9f0;--soft:color-mix(in srgb,var(--accent) 10%,white)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 'DM Sans',system-ui,sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer;background:white;color:inherit;border:1px solid var(--line);padding:11px 18px;border-radius:10px;font-weight:600;transition:transform .15s,box-shadow .15s}button:hover{box-shadow:0 5px 15px #1d213c0d;transform:translateY(-1px)}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button:disabled{opacity:.5;cursor:default}a{color:var(--accent)}h1,h2,h3,h4{font-family:Manrope,system-ui;letter-spacing:-.04em;line-height:1.18;margin:0}h1{font-size:clamp(30px,3vw,46px);font-weight:800}h2{font-size:26px}h3{font-size:20px}p{margin:10px 0 18px}.muted{color:var(--muted)}.eyebrow,.breadcrumb,.rail-label{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.eyebrow{color:var(--accent)}.primary{background:var(--accent);border-color:transparent;color:white}.secondary{background:var(--soft);border-color:transparent;color:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#shell{display:grid;grid-template-columns:218px minmax(0,1fr);min-height:100vh}.sidebar{background:#1d2035;color:#c4c7d7;padding:35px 22px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}.flow-logo{color:white;text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.18em;line-height:1.3}.flow-logo>span{display:block;font-family:Manrope;font-size:44px;letter-spacing:-.07em}.logo-dot{color:#bba8ff}.rail-label{margin:47px 12px 16px;color:#878ba5}.sidebar nav{display:grid;gap:7px}.sidebar nav button{text-align:left;border:0;background:transparent;color:#b8bdd3;display:flex;gap:13px;font-size:17px;padding:12px}.sidebar nav button span{font-size:13px}.sidebar nav button.active{background:#ffffff12;color:white}.rail-bottom{margin-top:auto;padding-top:25px;font-size:11px}.rail-bottom p{font-size:10px;color:#8d93ac}.demo-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#baa7ff;margin-right:5px}.rail-export{font-size:11px;background:transparent;color:#dadcf0;border-color:#ffffff21;width:100%}.workspace{min-width:0}.topbar{height:83px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px;background:white;gap:16px}.breadcrumb{color:#9094a3;font-size:10px;letter-spacing:.1em}.breadcrumb span{color:#33394e}.top-actions{display:flex;gap:12px;align-items:center}.top-actions select{background:#f5f6fa;border:0;font-size:12px;padding:10px 14px;border-radius:8px;max-width:240px}.top-actions button{font-size:12px}main{padding:38px 42px 48px;max-width:1700px;margin:auto}.page-intro{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px;gap:20px}.page-intro p{color:var(--muted);max-width:640px;margin-bottom:0}.page-intro .eyebrow{display:block;margin-bottom:10px}.pill{font-size:10px;padding:6px 10px;display:inline-block;background:var(--soft);color:var(--ink);border-radius:20px;font-weight:600}.studio-grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:25px;align-items:start}.panel{border:1px solid var(--line);border-radius:17px;background:white;padding:25px;box-shadow:0 4px 18px #1a1d3503}.panel h3{margin-bottom:20px}.panel h4{font-size:14px;margin:25px 0 12px}.panel label,form>label{display:block;font-size:12px;font-weight:600;margin-bottom:14px}input:not([type=checkbox]),select,textarea{display:block;width:100%;border:1px solid var(--line);border-radius:8px;background:#fcfcfe;padding:10px 12px;color:var(--ink);margin-top:6px}input[type=color]{min-height:43px;padding:5px}input[type=checkbox]{accent-color:var(--accent);width:17px;height:17px;flex-shrink:0}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.upload{font-size:10px!important}.checkline{display:flex!important;align-items:center;gap:9px;font-weight:400!important;margin-bottom:10px!important}.form-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.form-actions button{font-size:12px}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;font-size:12px}.preview-toolbar select{width:auto;margin:0;padding:7px 12px;font-size:11px}.preview-frame{border:8px solid #202439;border-radius:21px;background:white;overflow:hidden;box-shadow:0 20px 40px #242b4a1c}.board{background:#f4f6f7;padding:22px;min-height:550px}.board-head{display:flex;align-items:center;gap:18px;margin-bottom:22px}.brand{font-weight:800;font-size:24px;font-family:Manrope;letter-spacing:-.04em;color:var(--dark);max-width:35%;overflow-wrap:anywhere}.brand img{width:135px;max-height:52px;object-fit:contain}.board-greeting{flex:1}.board-greeting span{font-size:8px;letter-spacing:.12em;color:#7e8792;font-weight:700;text-transform:uppercase}.board-greeting strong{display:block;font-family:Manrope;font-size:14px;letter-spacing:-.035em}.clock{text-align:right;font-size:9px;color:#778090}.clock strong{display:block;font-size:22px;line-height:1.3;color:var(--dark)}.board-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.tile{padding:19px;text-align:left;min-height:205px;border:1px solid #ffffffdd;border-radius:13px;background:white;box-shadow:0 7px 16px #26304a0a;display:flex;flex-direction:column;overflow:hidden}.tile-top{display:flex;justify-content:space-between;align-items:center;font-size:9px;gap:10px}.tile-icon{font-size:21px}.tile h3{font-size:18px;margin:21px 0 8px;overflow-wrap:anywhere}.tile p{font-size:10px;margin:0;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tile-open{border-top:1px solid #25314916;margin-top:auto;padding-top:9px;font-size:9px;display:flex;justify-content:space-between;align-items:center}.tile-open b{font-size:18px}.tile:nth-child(4n+1){background:var(--dark);color:white}.tile:nth-child(4n+1) .tile-open{border-color:#ffffff20}.tile:nth-child(4n+2){background:var(--soft)}.tile:first-child{background:var(--accent);color:var(--on-accent,white)}.tile:first-child .tile-open{border-color:#ffffff40}.weather-main{display:flex;align-items:center;justify-content:space-between;margin:10px 0}.weather-main strong{font-size:30px;font-family:Manrope;letter-spacing:-.06em}.weather-main span{font-size:29px}.weather-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:0 0 12px}.weather-metrics span{background:#ffffff9c;border-radius:7px;padding:6px;font-size:8px}.weather-metrics b{display:block;font-size:12px}.board-foot{display:flex;justify-content:space-between;font-size:8px;color:#7e8792;padding-top:16px;gap:15px}.preview-caption{display:flex;justify-content:space-between;padding:17px 2px;font-size:11px;color:var(--muted)}.value-strip{margin-top:15px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.value-strip>div{background:white;border:1px solid var(--line);border-radius:12px;padding:17px}.value-strip b{display:block;font-family:Manrope;font-size:18px}.value-strip span{font-size:11px;color:var(--muted)}.note-box{background:var(--soft);padding:17px 20px;border-radius:12px;font-size:12px;margin:20px 0;color:var(--ink)}.workspace-footer{padding:20px 42px;border-top:1px solid var(--line);font-size:10px;color:#8c91a0;display:flex;justify-content:space-between;gap:20px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.cards .panel{display:flex;flex-direction:column}.cards h3{margin:15px 0 10px}.cards p{font-size:13px;color:var(--muted);flex:1}.cards button{font-size:12px}.content-list{display:grid;gap:13px}.content-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px;background:white;border:1px solid var(--line);border-radius:13px}.content-row h3{font-size:18px;margin:8px 0}.content-row p{font-size:12px;color:var(--muted);margin:0}.screen-visual{background:var(--dark);color:white;border:6px solid #dddfe8;border-radius:10px;min-height:100px;display:grid;place-items:center;font-size:13px;font-weight:700}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:25px 0}.steps article{background:white;border:1px solid var(--line);border-radius:15px;padding:26px}.step-number{color:var(--accent);font-size:33px;font-family:Manrope;font-weight:800}.steps h3{margin:15px 0 10px}.steps p{font-size:13px;color:var(--muted)}.sales-hero{padding:45px;border-radius:23px;background:var(--dark);color:white;position:relative;overflow:hidden}.sales-hero h1{max-width:700px;font-size:48px}.sales-hero p{max-width:650px;color:#d2d5e0}.sales-hero .eyebrow{color:#c1b0ff;display:block;margin-bottom:16px}.sales-hero .primary{margin-top:15px}.sales-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}ul{padding-left:20px}li{margin:10px 0}dialog{border:0;border-radius:22px;padding:30px;max-width:760px;width:calc(100% - 36px);max-height:88vh;overflow:auto;color:var(--ink);box-shadow:0 35px 100px #0004}dialog::backdrop{background:#10172b80;backdrop-filter:blur(6px)}.dialog-top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:25px}.dialog-top button{padding:8px 12px}.dialog-bottom{font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin-top:30px}.detail-prose{white-space:pre-wrap;font-size:18px;line-height:1.8}.detail-city{color:var(--muted);margin-bottom:20px}#detailContent h1{font-size:34px;margin-bottom:25px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#20263a;color:white;padding:14px 24px;border-radius:12px;font-size:13px;z-index:100}.full-display #shell{display:block}.full-display .sidebar,.full-display .topbar,.full-display .workspace-footer{display:none}.full-display main{padding:0;max-width:none}.full-display .display-toolbar{position:fixed;bottom:0;left:0;right:0;height:57px;background:white;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:8px 24px;z-index:5}.display-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:15px}.display-toolbar select{width:auto;margin:0;font-size:12px}.display-toolbar button{font-size:12px;padding:7px 15px}.display-toolbar>div{display:flex;gap:10px;align-items:center}.full-display .board{min-height:calc(100dvh - 57px);padding:3vh 3vw}.full-display .board-head{height:10vh;margin-bottom:2vh}.full-display .brand{font-size:clamp(25px,3vw,66px)}.full-display .brand img{width:clamp(135px,14vw,300px);max-height:9vh}.full-display .board-greeting span{font-size:clamp(9px,.8vw,20px)}.full-display .board-greeting strong{font-size:clamp(15px,1.7vw,38px)}.full-display .clock{font-size:clamp(10px,.9vw,23px)}.full-display .clock strong{font-size:clamp(22px,2.5vw,55px)}.full-display .board-grid{gap:1.5vh 1.3vw;grid-template-columns:repeat(3,minmax(0,1fr))}.full-display .tile{min-height:0;height:31vh;padding:2.1vh 1.8vw;border-radius:1.2vw}.full-display .tile-top{font-size:clamp(11px,1vw,25px)}.full-display .tile h3{font-size:clamp(20px,2vw,46px);margin:2.4vh 0 1vh}.full-display .tile p{font-size:clamp(12px,1.05vw,25px)}.full-display .tile-open{font-size:clamp(11px,1vw,25px);padding-top:1vh}.full-display .tile-icon{font-size:clamp(22px,2.2vw,50px)}.full-display .board-foot{font-size:clamp(9px,.8vw,20px);padding-top:1.7vh}.full-display .weather-main{margin:1vh 0}.full-display .weather-main strong{font-size:clamp(28px,3.5vw,75px)}.full-display .weather-main span{font-size:clamp(26px,3vw,70px)}.full-display .weather-metrics span{font-size:clamp(10px,.85vw,22px)}.full-display .weather-metrics b{font-size:clamp(14px,1.35vw,33px)}.full-display .weather-metrics{margin-bottom:1vh}.full-display .tile.weather h3{margin:1vh 0 0;font-size:clamp(18px,1.6vw,35px)}.full-display .tile.weather p{display:none}.full-display .board-grid:has(.tile:nth-child(7)) .tile{height:22vh}.full-display .board-grid:has(.tile:nth-child(7)) .tile h3{font-size:clamp(18px,1.7vw,40px);margin:1vh 0}.full-display .board-grid:has(.tile:nth-child(7)) .tile p{display:none}.full-display .board-grid:has(.tile:nth-child(7)) .weather-main strong{font-size:2.5vw}.full-display .board-grid:has(.tile:nth-child(7)) .weather-metrics{margin:0}.display-label{font-size:11px;color:var(--muted)}.empty{padding:30px;background:white;border-radius:15px}.status-warn{color:#94651c}.section-title{margin:32px 0 20px}.profile-controls{display:flex;gap:10px;flex-wrap:wrap}.file-import{display:none!important}@media(min-width:1800px){.studio-grid{grid-template-columns:380px 1fr}.board{min-height:680px}.tile{min-height:260px}.tile h3{font-size:24px}.tile p{font-size:13px}.tile-top,.tile-open{font-size:12px}.weather-main strong{font-size:42px}.weather-metrics span{font-size:11px}.weather-metrics b{font-size:16px}}@media(max-width:1100px){#shell{grid-template-columns:175px 1fr}.sidebar{padding:25px 15px}.topbar{padding:0 24px}main{padding:28px 24px}.studio-grid{grid-template-columns:280px minmax(0,1fr)}.board-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.board{padding:14px}.board-greeting{display:none}.cards{grid-template-columns:repeat(2,1fr)}.full-display .board-greeting{display:block}.full-display .board-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:800px){#shell{display:block}.sidebar{position:static;width:100%;height:auto;padding:16px 20px}.flow-logo>span{font-size:27px}.rail-label,.rail-bottom{display:none}.sidebar nav{display:flex;overflow:auto;margin-top:16px;gap:5px}.sidebar nav button{white-space:nowrap;padding:9px}.sidebar nav button span{font-size:11px}.topbar{padding:12px 20px;height:auto;flex-wrap:wrap}.breadcrumb{font-size:9px}.studio-grid{grid-template-columns:1fr}.board-greeting{display:block}.page-intro{display:block}.page-intro .pill{margin-top:16px}.value-strip{margin-bottom:20px}.cards,.steps,.sales-columns{grid-template-columns:1fr}.sales-hero{padding:27px}.sales-hero h1{font-size:33px}.workspace-footer{padding:20px;display:block}.full-display .board-head{height:auto;min-height:90px}.full-display .board-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.full-display .tile{height:auto;min-height:225px;border-radius:13px;padding:20px}.full-display .board{padding:20px 20px 70px;min-height:100vh}.full-display .tile h3{font-size:22px}.full-display .tile p{font-size:13px}.full-display .board-greeting strong{font-size:14px}.full-display .board-grid:has(.tile:nth-child(7)) .tile{height:auto;min-height:190px}.full-display .board-grid:has(.tile:nth-child(7)) .weather-main strong{font-size:28px}.full-display .display-toolbar{height:auto;min-height:57px;padding:8px;flex-wrap:wrap;gap:6px}.display-label{display:none}}@media(max-width:450px){main{padding:25px 16px}.board-grid{grid-template-columns:1fr 1fr}.tile{padding:13px;min-height:210px}.tile h3{font-size:16px}.board-greeting{display:none}.full-display .brand{max-width:60%}.full-display .board-greeting{display:none}.full-display .tile{min-height:210px;padding:14px}.full-display .tile h3{font-size:18px}.full-display .weather-metrics{grid-template-columns:1fr}.weather-metrics b{font-size:11px}.full-display .weather-metrics span{padding:3px 5px}.full-display .weather-metrics b{display:inline;margin-right:5px}.preview-caption{gap:10px}.content-row{align-items:start}.top-actions{width:100%}.top-actions select{flex:1}.value-strip{gap:6px}.value-strip>div{padding:12px}.value-strip b{font-size:15px}}
/* Seitsemän moduulin näkymässä sää pysyy luettavana myös kolmessa rivissä. */
@media(min-width:801px){.full-display .board-grid:has(.tile:nth-child(7)) .weather .tile-top{font-size:clamp(10px,.85vw,22px)}.full-display .board-grid:has(.tile:nth-child(7)) .weather .tile-icon{font-size:1.5vw}.full-display .board-grid:has(.tile:nth-child(7)) .weather h3{font-size:clamp(15px,1.3vw,34px);margin:0}.full-display .board-grid:has(.tile:nth-child(7)) .weather-main{margin:0}.full-display .board-grid:has(.tile:nth-child(7)) .weather-main strong{font-size:clamp(24px,2.2vw,55px)}.full-display .board-grid:has(.tile:nth-child(7)) .weather-main>span{font-size:2vw}.full-display .board-grid:has(.tile:nth-child(7)) .weather-metrics span{padding:3px 6px;font-size:clamp(9px,.65vw,18px)}.full-display .board-grid:has(.tile:nth-child(7)) .weather-metrics b{font-size:clamp(12px,1vw,25px)}.full-display .board-grid:has(.tile:nth-child(7)) .weather .tile-open{font-size:clamp(9px,.7vw,18px);padding-top:3px}}
@media(min-width:801px) and (max-height:900px){.full-display .board-grid:has(.tile:nth-child(7)) .tile{padding:1vh 1.4vw}.full-display .board-grid:has(.tile:nth-child(7)) .weather h3{display:none}.full-display .board-grid:has(.tile:nth-child(7)) .weather .tile-icon{font-size:18px}.full-display .board-grid:has(.tile:nth-child(7)) .weather-main{line-height:1.1}.full-display .board-grid:has(.tile:nth-child(7)) .weather-main strong{font-size:27px}.full-display .board-grid:has(.tile:nth-child(7)) .weather-metrics span{line-height:1.1;padding:3px}.full-display .board-grid:has(.tile:nth-child(7)) .weather .tile-open{line-height:1.1}.full-display .board-grid:has(.tile:nth-child(7)) .weather .tile-open b{font-size:14px}}
.primary{color:var(--on-accent,white)}.tile:nth-child(4n+1),.sales-hero,.screen-visual{color:var(--on-dark,white)}.sales-hero p{color:inherit;opacity:.8}.sales-hero .eyebrow{color:inherit;opacity:.8}.tile:first-child{color:var(--on-accent,white)}