/* Ronde 2: vlakke app-voorbeeldschermen zonder gloed. Thema via CSS-variabelen op .ph */
.ph{--bg:#fff;--fg:#111;--mut:#777;--acc:#1c3bff;--alert:#ff3b2f;--ok:#1a8f4e;--line:rgba(0,0,0,.16);
  position:relative;width:100%;aspect-ratio:9/19;container-type:inline-size;border:1.5px solid var(--fg);
  border-radius:11% / 5.2%;padding:2.4%;background:var(--bg)}
.ph .s{width:100%;height:100%;border-radius:9% / 4.3%;overflow:hidden;background:var(--bg);color:var(--fg);
  font-family:inherit;font-size:4.1cqw;line-height:1.3;display:flex;flex-direction:column;padding:11% 8% 7%}
.ph .hd{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;margin-bottom:9%}
.ph .hd i{font-style:normal;font-weight:500;color:var(--mut);font-size:.85em}
.ph .ring{width:58%;aspect-ratio:1;margin:4% auto 8%;border:.9cqw solid var(--c,var(--acc));border-radius:50%;display:grid;place-items:center;text-align:center}
.ph .ring b{display:block;font-size:1.45em;line-height:1.1}
.ph .ring small{display:block;color:var(--mut);margin-top:.3em;font-size:.8em}
.ph .row{display:flex;justify-content:space-between;gap:1em;padding:.85em 0;border-top:1px solid var(--line)}
.ph .row span{color:var(--mut);font-size:.85em}
.ph .row em{font-style:normal;font-weight:600;color:var(--ok);white-space:nowrap}
.ph h5{margin:0 0 .4em;font-size:1.7em;line-height:1.1;font-weight:700}
.ph p{margin:0 0 1em;color:var(--mut)}
.ph .bar{display:flex;gap:.35em;margin-bottom:7%}.ph .bar i{flex:1;height:.3em;background:var(--line)}.ph .bar i.on{background:var(--fg)}
.ph .btn{margin-top:auto;padding:.95em;text-align:center;font-weight:700;background:var(--fg);color:var(--bg)}
.ph .btn.o{background:transparent;color:var(--fg);border:1.5px solid var(--fg)}
.ph .s.al{background:var(--alert);color:#fff}.ph .s.al .hd i,.ph .s.al p,.ph .s.al .row span{color:rgba(255,255,255,.8)}
.ph .s.al .row{border-color:rgba(255,255,255,.4)}.ph .s.al .btn{background:#fff;color:var(--alert)}
.ph .s.al .big{font-size:2.6em;font-weight:800;line-height:.98;margin:12% 0 .3em;letter-spacing:-.02em}
.ph .ntf{padding:.9em 0;border-top:1px solid var(--line)}.ph .ntf b{display:block}.ph .ntf span{color:var(--mut);font-size:.85em}
.ph .lbl{margin:1.2em 0 .2em;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.tb{position:relative;width:100%;aspect-ratio:4/3;border:1.5px solid var(--fg);border-radius:4.5% / 6%;padding:2.4%;background:var(--bg);container-type:inline-size}
.tb .s{width:100%;height:100%;border-radius:3% / 4%;background:var(--bg);color:var(--fg);padding:5%;display:grid;grid-template-columns:1.2fr 1fr;gap:6%;font-size:2.5cqw;line-height:1.3;overflow:hidden}
.tb .m{display:flex;flex-direction:column;justify-content:center}
.tb .clk{font-size:4.6em;font-weight:300;letter-spacing:-.04em;line-height:1}
.tb .st{font-size:2.2em;font-weight:700;line-height:1.05;margin:.3em 0 .5em;color:var(--ok)}
.tb .l{display:flex;flex-direction:column;justify-content:center}
.tb .l div{display:flex;justify-content:space-between;padding:.8em 0;border-top:1px solid var(--line)}
.tb .l span{color:var(--mut)}