/* Suvereniteetti: neljä vaihtoehtoa, samat kuusi kysymystä yhdessä taulukossa.
   Ruudussa lyhyt vastaus ja tarvittaessa perustelu. AIvantagen sarake vihreällä.
   Kapealla sama sisältö kysymys kerrallaan. */
.cmp{margin-top:56px}
.cmp .m{flex:none;position:relative;display:inline-block;width:22px;height:22px;border-radius:50%}
.cmp .m.ok{background:rgba(31,203,79,.16)}
.cmp .m.x{background:rgba(240,73,55,.13)}
.cmp .m.ok::after{content:"";position:absolute;left:7px;top:5px;width:5px;height:9px;border:solid var(--g2);border-width:0 2px 2px 0;transform:rotate(45deg)}
.cmp .m.x::before,.cmp .m.x::after{content:"";position:absolute;left:10px;top:6px;width:2px;height:10px;background:#F07A6A;border-radius:1px}
.cmp .m.x::before{transform:rotate(45deg)}.cmp .m.x::after{transform:rotate(-45deg)}

/* leveä taulukko */
.cmp-t{display:grid;grid-template-columns:minmax(120px,.6fr) repeat(4,minmax(0,1fr))}
.cmp-r{display:contents}
.cmp-r>div{padding:14px 18px;border-top:1px solid rgba(56,70,74,.75)}
.cmp-h>div{border-top:0;padding-top:20px;padding-bottom:16px}
.cmp-h b{display:block;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:17px;line-height:1.2;color:var(--tx)}
.cmp-h span{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:var(--mu)}
.cmp-r>[role=rowheader]{padding-left:0;display:flex;align-items:center;font-family:var(--disp);font-stretch:112%;font-weight:600;font-size:14px;color:var(--mu)}
.cmp-r>[role=cell]{display:flex;align-items:center;gap:12px;font-size:15.5px;line-height:1.4;color:var(--tx)}
.cmp-r>[role=cell] b{display:block;font-weight:600}
.cmp-r>[role=cell] small{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--mu)}
.cmp-r>[role=cell].win small{color:#BFE3CB}
.cmp-r>[role=cell] .m{margin-top:-1px}
/* AIvantage-sarake: vihreä pohja ylhäältä alas, ylä- ja alareuna pyöristettynä */
.cmp-t .win{background:rgba(31,203,79,.07);box-shadow:inset 1px 0 rgba(31,203,79,.45),inset -1px 0 rgba(31,203,79,.45)}
.cmp-h .win{border-radius:10px 10px 0 0;box-shadow:inset 1px 0 rgba(31,203,79,.45),inset -1px 0 rgba(31,203,79,.45),inset 0 1px rgba(31,203,79,.45)}
.cmp-h .win b{color:var(--g2)}
.cmp-h .win span{color:#CFEFD9}
.cmp-r:last-child .win{border-radius:0 0 10px 10px;box-shadow:inset 1px 0 rgba(31,203,79,.45),inset -1px 0 rgba(31,203,79,.45),inset 0 -1px rgba(31,203,79,.45)}
.cmp-t .win{border-top-color:rgba(31,203,79,.25)}
.cmp-l{display:none}

@media (max-width:1020px){
  .cmp{margin-top:32px}
  .cmp-t{display:none}
  .cmp-l{display:block}
  .cmp-lq+.cmp-lq{margin-top:22px}
  .cmp-lq h3{font-size:17px;margin:0 0 8px}
  .cmp-lq ul{list-style:none;margin:0;padding:0}
  .cmp-lq li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;align-items:center;padding:9px 12px;border-top:1px solid rgba(56,70,74,.7)}
  .cmp-lq li .m{grid-row:1/span 3}
  .cmp-lq li em{font-style:normal;font-size:13.5px;font-weight:600;color:var(--mu)}
  .cmp-lq li b{font-size:15.5px;font-weight:600;line-height:1.4;color:var(--tx)}
  .cmp-lq li small{margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--mu)}
  .cmp-lq li.win small{color:#BFE3CB}
  .cmp-lq li.win{background:rgba(31,203,79,.08);border:1px solid rgba(31,203,79,.45);border-radius:10px;margin-top:6px}
  .cmp-lq li.win em{color:var(--g2)}
}

/* Säännöt päättävät: reititysanimaatio, solmujen nimet HTML:nä kankaan päällä */
.rt{position:relative;height:360px;margin-top:56px}
.rt canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rt-l{position:absolute;max-width:250px}
.rt-l span{display:block;font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu2)}
.rt-l b{display:block;margin-top:6px;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:17px;line-height:1.25;color:var(--tx)}
.rt-l small{display:block;margin-top:5px;font-size:14px;line-height:1.4;color:var(--mu)}
.rt-app{left:0;top:50%;transform:translateY(-50%)}
.rt-gate{left:41%;top:calc(50% + 62px);transform:translateX(-50%);text-align:center}
.rt-gate span{color:var(--g)}
.rt-fi{right:0;top:6%;width:250px}
.rt-fi span{color:var(--g)}
.rt-cl{right:0;bottom:6%;width:250px}
@media (max-width:1020px){
  .rt{height:620px;margin-top:36px}
  .rt-l{max-width:none;text-align:center;left:50%;transform:translateX(-50%);width:min(320px,90%)}
  .rt-app{top:0}
  .rt-gate{top:178px;left:calc(50% + 46px);transform:none;text-align:left;width:calc(50% - 46px)}
  .rt-fi{top:auto;bottom:0;left:25%;right:auto;width:44%}
  .rt-cl{bottom:0;left:75%;right:auto;width:44%}
  .rt-fi b,.rt-cl b{font-size:15px}
  .rt-fi small,.rt-cl small{font-size:13px}
}

.cmp-r>[role=cell],.cmp-lq li{position:relative}
.cmp-r>[role=cell] .info-pop{left:8px;right:-8px}

/* otsikot: nimi ja lause kumpikin yhdellä rivillä, kaikki sarakkeet yhtä korkeat */
.cmp-h>div b,.cmp-h>div span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Suvereniteetti-hero: maailmankartta-animaatio (sv-hero.js) koko heron taustana */
.hero.sub{position:relative}
.hero.sub::after{display:none}
.hero.sub{padding-bottom:104px}
.hero.sub + .divider + #ongelma{padding-top:clamp(48px,6vw,88px)}
.hero-world{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-world canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:1020px){.hero-world{position:relative;inset:auto;z-index:0;height:min(110vw,460px);margin:40px calc(-1*var(--gut)) 0}}