/* Markers use each source image's own coordinate space, preserving alignment
   for both the 720 × 1565 English and 1206 × 2622 Polish captures. */
.steps{--setup-select:#126e3b;--setup-off:#c7091a;margin-top:48px}
.step{grid-template-columns:minmax(0,1fr) 260px;gap:48px;padding:48px 0}
.step .copy{order:-1}
.shot{box-shadow:0 12px 28px rgba(14,14,14,.14)}
.shot img{height:auto}
.shot-marker{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.shot-marker rect{fill:rgba(18,110,59,.10);stroke:var(--setup-select);stroke-width:1.5;vector-effect:non-scaling-stroke}
.shot-marker .marker-off{fill:rgba(199,9,26,.08);stroke:var(--setup-off)}
.shot-marker .marker-cross{fill:none;stroke:var(--setup-off);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.shot-marker .off-label{fill:var(--setup-off);font:700 32px var(--font-rounded);text-anchor:end;dominant-baseline:middle}
.shot-marker[viewBox="0 0 1206 2622"] .off-label{font-size:50px}
.shot .shot-app-icon{position:absolute;left:5.138889%;top:26.389776%;width:6.111111%;height:auto;border-radius:23%;pointer-events:none}
.choice-icon{width:20px;height:20px;flex:0 0 20px;align-self:baseline;margin-top:2px;color:inherit;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.picks li{color:var(--setup-select)}
.picks li.is-off{color:var(--setup-off)}
.picks li b{color:inherit}
.picks li .em{display:inline-flex;align-items:center;justify-content:center;font-size:0;line-height:1}
.done-card{background:#242020;box-shadow:0 14px 36px rgba(36,32,32,.2)}
.setup-help-link{display:inline-block;margin-top:16px;font-size:15px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:4px}
.setup-mistakes{max-width:820px;margin:64px auto 0;padding:48px 24px 32px;border-top:1px solid var(--sand-dark)}
.setup-mistakes h2{font-family:var(--font-rounded);font-size:clamp(28px,4vw,38px);font-weight:900;line-height:1.15;margin:0 0 16px}
.setup-mistakes>p{color:var(--ink-soft);margin:0 0 32px}
.setup-mistakes .step{padding:32px 0}
.setup-mistakes .step:first-of-type{border-top:0}
.setup-mistakes .mistake-fixes{padding-left:20px;margin:16px 0 0;color:var(--ink-soft);line-height:1.6}
.setup-mistakes .mistake-fixes li+li{margin-top:12px}
.setup-mistakes .mistake-fixes strong{color:var(--ink)}
.mistake-illustration{margin:0;min-width:0}
.mistake-illustration figcaption{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.4;text-align:center}
.example-screen{padding:20px 16px;background:var(--sand);border-radius:20px;color:var(--ink-soft);font-size:14px;line-height:1.35}
.example-screen p{margin:0}
.example-label{display:block;font-family:var(--font-rounded);font-weight:700;margin-bottom:8px;color:#b00c1a}
.example-label.is-correct{margin-top:24px;color:#126e3b}
.example-notification{padding:14px 12px;border-radius:16px;background:var(--white);border:1.5px solid #c7091a}
.example-notification.is-correct{border-color:#126e3b}
.example-app{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px;font-weight:600}
.example-app img,.example-app svg{width:24px;height:24px;flex:0 0 24px;border-radius:6px}
.example-notification strong{display:block;font-weight:650;color:var(--ink);margin-bottom:4px}
.example-action{display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--sand-dark);color:#006ec6;font-weight:600}
.example-heading{font-size:22px;font-weight:750;letter-spacing:-.02em;margin-bottom:18px}
.example-automation{display:flex;align-items:flex-start;gap:10px;background:var(--white);padding:14px 12px;border:1.5px solid #126e3b;border-radius:14px}
.example-automation+.example-automation{margin-top:12px;border-color:#c7091a}
.example-automation>svg{width:22px;height:22px;flex:0 0 22px;color:var(--ink)}
.example-automation strong{display:block;color:var(--ink);font-weight:650}
.example-automation small{display:block;margin-top:6px;color:var(--ink-soft);font-size:12px}
.example-automation .example-label{margin:10px 0 0;color:#126e3b;font-size:12px}
.example-automation+.example-automation .example-label{color:#b00c1a}
@media(max-width:640px){
  .step{grid-template-columns:1fr;gap:18px}
  .step .copy{order:1}
  .step .shot{order:2}
  .setup-mistakes{margin-top:48px;padding-top:32px}
  .mistake-illustration{order:2;max-width:320px;width:100%;margin:8px auto 0}
}
