/* Toimeen product mockups shared by every page: app window, tables, chips, mail, buttons,
   text-and-visual rows, the phone, sector evidence cards. Moved out of home.html (26.10.2026). */
/* section rhythm */
.sec{padding-block:128px;position:relative}
.head{display:grid;gap:16px;justify-items:center;text-align:center;max-width:820px;margin:0 auto 56px;position:relative}
.head::before{content:"";position:absolute;z-index:-1;inset:-60px -120px;background:radial-gradient(closest-side,rgba(14,26,23,.72),rgba(14,26,23,0))}
.head .lead,.lead{color:#C3D0CA;font-size:19px;max-width:36em}
.center{display:grid;justify-items:center}

/* ---------- the app window: light product UI in a frame ---------- */
.screen{--app-canvas:#F3F5F2;--app-card:#FFFFFF;--app-line:#DDE3DF;--app-line-2:#EBEFEC;--app-ink:#0E1A17;--app-ink-2:#4A5A53;--app-ink-3:#5E6D66;--app-sel:#EEF4F0;
  width:min(1080px,100%);background:var(--app-canvas);color:var(--app-ink);border-radius:14px;overflow:hidden;text-align:left;font-size:13.5px;position:relative;
  box-shadow:0 0 0 1px rgba(243,245,242,.16),0 24px 48px -16px rgba(0,0,0,.55),0 80px 120px -40px rgba(0,0,0,.6)}
.halo{position:relative;width:min(1080px,100%)}
.halo::before{content:"";position:absolute;inset:-60px -80px;z-index:-1;background:radial-gradient(closest-side,rgba(214,229,220,.11),transparent 70%)}
.wbar{height:40px;background:#E6EBE7;border-bottom:1px solid var(--app-line);display:grid;grid-template-columns:80px 1fr 80px;align-items:center;padding:0 14px}
.dots{display:flex;gap:7px}.dots i{width:10px;height:10px;border-radius:50%;background:#C9D1CC}
.url{justify-self:center;font:500 11.5px var(--mono);color:var(--app-ink-3);background:#F3F5F2;border:1px solid var(--app-line);border-radius:6px;padding:3px 14px}
.wbody{display:grid;grid-template-columns:196px minmax(0,1fr);height:560px}
.wbody.noside{grid-template-columns:minmax(0,1fr)}
.side{background:var(--yo);color:#C3D0CA;padding:16px 10px;display:grid;align-content:start;gap:2px}
.side .wm{height:15px;margin:2px 8px 18px}
.side small{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#6F877C;padding:4px 10px}
.side span{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;font-size:13.5px}
.side span.on{background:var(--koivu);color:var(--yo);font-weight:600}
.main{padding:22px 24px;display:grid;grid-template-rows:auto 1fr;gap:16px;min-width:0;min-height:0}
.mh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mh h3{font-size:20px;color:var(--app-ink)}
.mh .meta{font-size:13px;color:var(--app-ink-3);margin-top:3px}
.mh .kpis{display:flex;gap:16px;font:500 13px var(--mono);color:var(--app-ink-2)}
.mh .kpis b{color:var(--app-ink)}
.pane{min-height:0}
.card{background:var(--app-card);border:1px solid var(--app-line);border-radius:10px;box-shadow:0 1px 2px rgba(14,26,23,.06);min-width:0}
.card.pad{padding:16px 18px}
.label{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--app-ink-3)}
.split{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;height:100%}
.split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split.wide{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}

/* tables and chips */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--app-ink-3);text-align:left;height:32px;padding:0 12px;border-bottom:1px solid var(--app-line)}
.tbl td{height:40px;padding:0 12px;border-bottom:1px solid var(--app-line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.tbl tr.sel td{background:var(--app-sel)}.tbl tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--kuusi)}
.tbl tr.wait td:first-child{box-shadow:inset 3px 0 0 var(--majakka)}
.tbl tr.click{cursor:pointer}.tbl tr.click:hover td{background:#F6F8F7}
.chip{display:inline-block;font:500 11.5px/1 var(--mono);padding:4px 7px;border-radius:4px;white-space:nowrap;transition:background-color 240ms,color 240ms}
.chip.wait{background:var(--majakka);color:var(--yo)}
.chip.ok{background:#DCEBE2;color:#1E5C48}
.chip.risk{background:#F6E1DE;color:#8E2A22}
.chip.neutral{background:#EEF1EE;color:#4A5A53}
.chip.flip{animation:pulse 360ms var(--e-out)}
@keyframes pulse{50%{transform:scale(1.07)}}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* mail */
.mlist{display:grid;align-content:start;overflow:hidden}
.mrow{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:9px 14px;border-bottom:1px solid var(--app-line-2);opacity:.25;transition:opacity .4s,background-color .3s}
.mrow.in{opacity:1}
.mrow.on{background:var(--app-sel);box-shadow:inset 3px 0 0 var(--majakka)}
.mrow .av{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font:600 11px var(--mono);background:#E6EBE7;color:var(--app-ink-2)}
.mrow b{display:flex;justify-content:space-between;gap:8px;font-weight:600;font-size:13.5px}
.mrow b time{font:500 11.5px var(--mono);color:var(--app-ink-3)}
.mrow span{display:block;font-size:12.5px;color:var(--app-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .chip{display:inline-block;margin-top:6px;opacity:0;transition:opacity .3s}
.mrow.sorted .chip{opacity:1}
.draft{display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:16px 18px;min-height:0}
.dmeta{display:grid;gap:3px;font-size:12.5px;color:var(--app-ink-2)}
.dmeta b{font-size:15px;color:var(--app-ink)}
.paper{border:1px solid var(--app-line-2);border-radius:8px;background:#FBFCFB;padding:14px 16px;font-size:14px;line-height:1.6;white-space:pre-wrap;overflow:hidden}
.caret{display:inline-block;width:2px;height:1em;background:var(--app-ink);vertical-align:-.15em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.b1{font:600 14px var(--body);border:0;border-radius:9px;padding:10px 16px;background:var(--kuusi);color:var(--koivu);cursor:pointer;transition:transform var(--d2) var(--e-out),background-color var(--d2),box-shadow var(--d2)}
.b1:hover{background:#246B54;transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(14,26,23,.6)}
.b1:active{transform:scale(.98)}
.b1.done{background:#DCEBE2;color:#1E5C48;box-shadow:none;transform:none;cursor:default}
.b2{font:600 14px var(--body);border:1px solid var(--app-line);border-radius:9px;padding:9px 14px;background:#fff;color:var(--app-ink);cursor:pointer;transition:border-color var(--d2),transform var(--d2) var(--e-out)}
.b2:hover{border-color:#B9C4BE;transform:translateY(-1px)}
.b3{font:600 14px var(--body);border:0;background:none;color:var(--puolukka);cursor:pointer;padding:9px 6px}
.b3:hover{text-decoration:underline}
.b1:focus-visible,.b2:focus-visible,.b3:focus-visible{outline:2px solid var(--kuusi);outline-offset:2px}
.fade{opacity:0;transition:opacity .4s}.fade.show{opacity:1}
.inv{display:grid;gap:12px;padding:18px;align-content:start}
.inv .tot{display:grid;grid-template-columns:auto auto;gap:4px 24px;justify-self:end;font-size:13.5px}
.inv .tot b{font-size:16px}

/* text and visual side by side */
.duo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;max-width:1120px;margin-inline:auto}
.duo.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.duo .txt{display:grid;gap:16px;align-content:center;position:relative}
.duo .txt::before{content:"";position:absolute;z-index:-1;inset:-50px -60px;background:radial-gradient(closest-side,rgba(14,26,23,.7),rgba(14,26,23,0))}
.ticks{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:16px}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:12px}
.ticks li::before{content:"";width:12px;height:12px;margin-top:6px;background:var(--kuusi-2)}
.ticks b{display:block;font:600 17px var(--display);color:var(--koivu)}
.ticks span{color:#B9C6C0;font-size:15.5px}
.screen.sm .wbody{height:520px}
.bars{display:flex;gap:4px;align-items:flex-end;height:110px;margin-top:10px}
.bars i{flex:1;height:var(--h);border-radius:2px 2px 0 0;transform-origin:bottom;transform:scaleY(var(--g,1));transition:transform .9s var(--e-out);background:linear-gradient(var(--puolukka) 0 var(--late),var(--kuusi) var(--late) 100%)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--app-ink-3);margin-top:8px}
.legend i{display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:2px}
.quote{border-left:3px solid var(--majakka);padding:8px 12px;background:#FBFCFB;font-size:13px;line-height:1.55;color:var(--app-ink-2)}
.why{font-size:13.5px;line-height:1.6;color:var(--app-ink-2)}

/* channels: alternating rows */
.rows{display:grid;gap:120px;max-width:1120px;margin-inline:auto}
.rows .duo.tg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.phone{width:310px;height:620px;border-radius:46px;background:#0A1310;padding:12px;box-shadow:0 0 0 1px rgba(243,245,242,.18),0 40px 80px -30px rgba(0,0,0,.7);justify-self:center;position:relative}
.phone .scr{height:100%;border-radius:36px;overflow:hidden;background:#DCE6DF;display:grid;grid-template-rows:auto minmax(0,1fr)}
.phone header{display:flex;gap:10px;align-items:center;padding:16px 16px 12px;background:#fff;border-bottom:1px solid #E1E8E4;color:var(--yo)}
.phone header b{font-size:14.5px;display:block}
.phone header span{font-size:11.5px;color:#66756E}
.thread{display:flex;flex-direction:column;gap:8px;justify-content:flex-end;overflow:hidden;padding:12px}
.msg{max-width:86%;padding:9px 12px;border-radius:14px 14px 14px 4px;font-size:13px;line-height:1.45;background:#fff;color:var(--yo);box-shadow:0 1px 1px rgba(14,26,23,.08);animation:slideup .4s var(--e-out) both}
.msg.me{align-self:flex-end;background:var(--kuusi);color:var(--koivu);border-radius:14px 14px 4px 14px}
.msg .q{border-left:3px solid var(--majakka);padding-left:8px;margin-top:6px;color:#4A5A53;font-size:12.5px}
.msg .btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.msg .btns span{text-align:center;padding:7px;border-radius:8px;background:#EEF4F0;color:var(--kuusi);font-weight:600;font-size:12.5px;transition:background-color .3s,color .3s}
.msg .btns span.hit{background:var(--kuusi);color:var(--koivu)}
@keyframes slideup{from{opacity:0;transform:translateY(10px)}}
.tap{position:absolute;width:34px;height:34px;border-radius:50%;background:rgba(14,26,23,.25);transform:scale(0);pointer-events:none}
.tap.on{animation:tap .6s ease-out}
@keyframes tap{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.6);opacity:0}}
/* sectors */
.secbar{display:flex;justify-content:center;margin-bottom:28px}
.ev{display:grid;gap:10px;min-height:0;align-content:start}
.prop{display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:16px 18px;box-shadow:inset 3px 0 0 var(--majakka),0 1px 2px rgba(14,26,23,.06)}
.prop h4{margin:0;font:600 16px var(--display);letter-spacing:-.01em}
.tbl tr.miss td{background:#FBF1EF}
.tbl tr.miss td:first-child{box-shadow:inset 3px 0 0 var(--puolukka)}
.tbl tr.hl td{animation:hl 1.6s var(--e-out) 1}
@keyframes hl{0%{background:#F6E1DE}100%{background:#FBF1EF}}


.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1120px;margin-inline:auto}
.more{display:inline-flex;gap:8px;margin-top:26px;color:var(--koivu);font-weight:600;text-decoration:none}
.more:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:980px){
  .duo,.duo.flip,.rows .duo.tg{grid-template-columns:minmax(0,1fr);gap:36px}
  .duo.flip .vis{order:2}
  .wbody{grid-template-columns:minmax(0,1fr);height:auto}.side{display:none}
  .split,.split.even,.split.wide{grid-template-columns:minmax(0,1fr);height:auto}
  .cards3{grid-template-columns:minmax(0,1fr)}
  .sec{padding-block:80px}
  .tbl .hide-s{display:none}
  .wbar{grid-template-columns:60px 1fr 0}
}
@media (max-width:420px){.phone{width:min(300px,100%);height:600px}}