/* Device mockups drawn in HTML/CSS (src/partials/dev-*.html). Not screenshots, so they never go out of date. */
/* ---------- Devices ---------- */
.dev { text-align: left; container-type: inline-size; position: relative; width: 100%; font-family: var(--sans); color: #1d1d1f; }
.dev * { box-sizing: border-box; }
.dev h4 { margin: 0; color: #1d1d1f; font-weight: 650; letter-spacing: -.01em; }
.dev small { color: #6b7790; }
.dev .chip { background: #e5f2ea; color: #17714f; border-radius: 99px; padding: .3em .85em; font-size: .85em; font-weight: 600; white-space: nowrap; }

.laptop { filter: drop-shadow(0 50px 50px rgba(0, 0, 0, .35)); }
.laptop .lid { background: linear-gradient(180deg, #232a39, #0b0f18); border: 1px solid rgba(255, 255, 255, .14); border-radius: 2.4cqw 2.4cqw .5cqw .5cqw; padding: 1.4cqw 1.4cqw 1.7cqw; }
.laptop .scr { aspect-ratio: 16 / 10; border-radius: .7cqw; overflow: hidden; background: #fbfbfd; font-size: 1.28cqw; line-height: 1.3; }
.laptop .base { position: relative; height: 1.9cqw; width: 114%; margin-left: -7%; background: linear-gradient(180deg, #e7e9ef, #b3b9c4 65%, #8e95a2); border-radius: 0 0 3cqw 3cqw / 0 0 1.5cqw 1.5cqw; }
.laptop .base::before { content: ""; position: absolute; top: 0; left: 50%; width: 13%; height: .65cqw; transform: translateX(-50%); background: rgba(0, 0, 0, .22); border-radius: 0 0 1cqw 1cqw; }

.mw { display: grid; grid-template-columns: 17% 1fr; height: 100%; }
.mw .side { background: #1d1d1f; color: #c7c7cc; padding: 1.5em 1em; display: flex; flex-direction: column; gap: .35em; }
.mw .side .lg { display: flex; align-items: center; gap: .55em; font-weight: 650; color: #f5f5f7; margin-bottom: 1.1em; font-size: 1.1em; }
.mw .side .lg i { width: 1.1em; height: 1.1em; border-radius: 50%; border: 2px solid #f5f5f7; display: block; }
.mw .side b { font-weight: 500; padding: .55em .7em; border-radius: .6em; }
.mw .side b.on { background: rgba(255, 255, 255, .14); color: #fff; }
.mw .main { padding: 1.5em 1.8em; display: flex; flex-direction: column; gap: 1em; min-width: 0; }
.mw .hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
.mw .hd h4 { font-size: 1.55em; }
.mw .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8em; }
.mw .kpis div, .mw .stages .st { background: #fff; border: 1px solid #e5e5ea; border-radius: .8em; padding: .8em .9em; }
.mw .kpis strong { display: block; font-size: 2.1em; line-height: 1.1; font-weight: 650; letter-spacing: -.02em; }
.mw .kpis .warn { color: #b4531d; }
.mw .stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8em; height: 8em; }
.mw .stages .st { position: relative; }
.mw .stages .st i { position: absolute; left: .9em; right: .9em; bottom: .9em; height: calc(var(--h) * .62); border-radius: .5em; background: linear-gradient(180deg, #2e90fa, #0071e3); }
.mw .stages .st i.g { background: linear-gradient(180deg, #2fa87f, #12805f); }
.mw .rowsl { display: grid; gap: .7em; align-content: center; flex: 1; }
.mw .lab { font-size: .8em; letter-spacing: .1em; text-transform: uppercase; color: #6b7790; font-weight: 600; margin-top: .2em; }
.mw .rowsl div { display: flex; align-items: center; gap: 1em; }
.mw .rowsl span { width: 9.5em; color: #3d4b66; }
.mw .rowsl u { display: block; flex: 1; height: .55em; border-radius: 9px; background: #e5e5ea; position: relative; overflow: hidden; }
.mw .rowsl u::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, #0071e3, #2e90fa); border-radius: 9px; }

.tablet { filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .4)); }
.tablet .frame { background: linear-gradient(160deg, #232a39, #0b0f18); border: 1px solid rgba(255, 255, 255, .16); border-radius: 4.2cqw; padding: 2.4cqw; }
.tablet .scr { aspect-ratio: 4 / 3; border-radius: 2cqw; overflow: hidden; background: #fbfbfd; font-size: 2.15cqw; line-height: 1.3; }
.mw.form { display: flex; flex-direction: column; gap: .75em; padding: 1.5em 1.7em; height: 100%; }
.form .hd h4 { font-size: 1.25em; }
.form .crit { display: grid; grid-template-columns: 7.5em 1fr 2em 3.4em; align-items: center; gap: .9em; background: #fff; border: 1px solid #e5e5ea; border-radius: .8em; padding: .6em .9em; }
.form .crit div:first-child span { font-weight: 600; display: block; }
.form .crit strong { font-size: 1.2em; font-weight: 650; text-align: right; }
.form .crit em { font-style: normal; font-size: .78em; font-weight: 600; background: #eef2fb; color: #0071e3; border-radius: 99px; padding: .2em .6em; text-align: center; }
.form .sl { height: .5em; border-radius: 9px; background: #e5e5ea; position: relative; }
.form .sl i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, #0071e3, #2e90fa); border-radius: 9px; }
.form .sl i::after { content: ""; position: absolute; right: -.4em; top: 50%; width: .9em; height: .9em; transform: translateY(-50%); border-radius: 50%; background: #fff; border: 2px solid #0071e3; }
.form .band { background: #f0f6ff; border-left: 3px solid #0071e3; border-radius: .4em; padding: .55em .8em; color: #46566f; }
.form .band b { color: #0a1a33; margin-right: .4em; }
.form .fb { background: #fff; border: 1px solid #e5e5ea; border-radius: .8em; padding: .6em .9em; flex: 1; }
.form .fb p { margin: .25em 0 0; color: #2c3b57; }
.form .tot { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.form .tot strong { font-size: 2em; font-weight: 650; letter-spacing: -.02em; margin-left: auto; }
.form .tot u { text-decoration: none; background: #0071e3; color: #fff; border-radius: 99px; padding: .55em 1.1em; font-weight: 600; }

.phone { filter: drop-shadow(0 36px 34px rgba(0, 0, 0, .4)); }
.phone .frame { position: relative; background: linear-gradient(160deg, #2a3140, #06090f); border: 1px solid rgba(255, 255, 255, .18); border-radius: 13cqw; padding: 3.2cqw; }
.phone .isl { position: absolute; top: 6.4cqw; left: 50%; transform: translateX(-50%); width: 27cqw; height: 7.4cqw; border-radius: 99px; background: #000; z-index: 3; }
.phone .scr { position: relative; aspect-ratio: 9 / 19.2; border-radius: 10cqw; overflow: hidden; background: #f2f6f4; font-size: 4.5cqw; line-height: 1.25; }
.wg { display: flex; flex-direction: column; height: 100%; }
.wg .sb { display: flex; justify-content: space-between; padding: 1.3em 1.9em .3em; font-weight: 650; font-size: .82em; }
.wg .top { display: flex; justify-content: space-between; align-items: center; padding: 1.5em 1.2em .3em; }
.wg .top h4 { font-size: 1.45em; }
.wg .top small { font-size: .8em; color: #5b6b66; }
.wg .av { width: 2.2em; height: 2.2em; border-radius: 50%; background: #d6457f; color: #fff; display: grid; place-items: center; font-weight: 700; }
.wg .av.t { background: #2c6bdb; }
.wg .hero { margin: .7em 1em 0; padding: 1.1em 1.1em 1.2em; border-radius: 1.3em; color: #fff; background: linear-gradient(135deg, #0b4f3d, #178a67 62%, #c9a24a 135%); }
.wg .hero small { color: rgba(255, 255, 255, .86); font-size: .82em; display: block; }
.wg .hero strong { display: block; font-size: 3.5em; line-height: 1.05; font-weight: 650; letter-spacing: -.03em; margin: .1em 0 .3em; }
.wg .hero .bar { height: .45em; border-radius: 9px; background: rgba(255, 255, 255, .28); margin-bottom: .6em; position: relative; overflow: hidden; }
.wg .bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: #fff; border-radius: 9px; }
.wg .list { margin: .9em 1em 0; }
.wg .list > b { display: block; font-size: .74em; letter-spacing: .1em; text-transform: uppercase; color: #5b6b66; font-weight: 650; }
.wg .it { display: flex; align-items: center; gap: .7em; padding: .7em .8em; margin-top: .5em; background: #fff; border: 1px solid #e0e8e4; border-radius: .95em; }
.wg .it > span:nth-child(2) { flex: 1; font-weight: 600; }
.wg .it small { display: block; font-weight: 400; font-size: .72em; color: #6b7a75; }
.wg .it em { font-style: normal; font-weight: 650; }
.wg .ck { width: 1.3em; height: 1.3em; border-radius: 50%; border: 2px solid #b6c3bd; flex: none; position: relative; }
.wg .ck.on { background: #12805f; border-color: #12805f; }
.wg .ck.on::after { content: ""; position: absolute; left: .38em; top: .12em; width: .3em; height: .6em; border: solid #fff; border-width: 0 .13em .13em 0; transform: rotate(45deg); }
.wg .ck.lock { background: #e9ecf0; border-color: #c7ced6; }
.wg .it.priv { opacity: .7; border-style: dashed; }
.wg .pot { margin: .8em 1em 0; background: #fff; border: 1px solid #e0e8e4; border-radius: 1.1em; padding: .9em 1em; }
.wg .pot small { font-size: .78em; color: #5b6b66; }
.wg .pot strong { display: block; font-size: 1.55em; font-weight: 650; margin: .1em 0 .45em; }
.wg .pot strong span { font-size: .55em; font-weight: 500; color: #5b6b66; }
.wg .pot .bar { height: .45em; border-radius: 9px; background: #dbe7e2; position: relative; overflow: hidden; }
.wg .pot .bar i { background: #12805f; }

/* ---------- Device groups ---------- */
.comp { position: relative; margin: 0 auto; }
.comp-hero { width: min(100%, 1040px); }
.comp-hero .laptop { width: 84%; margin-left: 2%; }
.comp-hero .phone { position: absolute; right: 1%; bottom: -1.5%; width: 17.5%; }
.comp-mw { width: min(100%, 1040px); padding-bottom: 5%; }
.comp-mw .laptop { width: 82%; }
.comp-mw .tablet { position: absolute; right: 0; bottom: 0; width: 40%; }
.comp-wg { display: flex; justify-content: center; gap: 4%; width: min(100%, 640px); }
.comp-wg .phone { width: 38%; }
.comp-wg .phone + .phone { margin-top: 12%; }
.half .art .phone { width: min(46%, 220px); }
.stage-fade::after { content: ""; position: absolute; inset: auto 0 0 0; height: 18%; background: linear-gradient(transparent, var(--fade, #0a1a33)); pointer-events: none; }
@media (max-width: 640px) { .comp-hero .phone { width: 22%; } .comp-mw .tablet { width: 46%; } }