/* WPO Quick Scanner — light theme matching the "Landing Audyt" design 1:1.
   Poppins is self-hosted (no Google CDN) to stay consistent with our own RODO check. */

/* ---------- Self-hosted Poppins (latin + latin-ext for Polish) ---------- */
@font-face { font-family: 'WPO Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'WPO Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'WPO Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'WPO Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'WPO Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'WPO Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'WPO Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'WPO Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'WPO Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/poppins-latin-800.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'WPO Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/poppins-latin-ext-800.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Tokens ---------- */
.wpo-scanner {
  --ink: #21204C;
  --blue: var(--udi-blue, #3B9AD9);
  --blue-600: var(--udi-blue, #2E89C7);
  --orange: var(--udi-orange, #EF6C23);
  --orange-600: #D95E18;
  --bg: #FBFCFD;
  --muted: var(--udi-soft, #5A5F73);
  --muted-2: var(--udi-soft, #6E6D85);
  --muted-3: var(--udi-muted, #9499A8);
  --muted-4: var(--udi-muted, #7C8194);
  --line: #ECEEF2;
  --line-2: #E7E9EE;
  --line-3: #E2E5EC;
  --line-4: #EEF0F4;
  --chip: #EAF3FB;
  --good: #1E9E63;   --good-bg: #E6F5EC;  --good-ring: var(--udi-success, #2FA76A);
  --warn: #B5741A;   --warn-bg: #FBF0DA;  --warn-ring: #E39A2B;
  --crit: #CF4429;   --crit-bg: #FBE6E1;  --crit-ring: var(--udi-error, #E0573C);

  font-family: 'WPO Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.5;
  max-width: 960px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
}
.wpo-scanner *, .wpo-scanner *::before, .wpo-scanner *::after { box-sizing: border-box; }
.wpo-scanner button { font-family: inherit; }

@keyframes wpo-spin { to { transform: rotate(360deg); } }
@keyframes wpo-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.wpo-phase { animation: wpo-fade .35s ease both; }

/* ---------- Hero (above the card) ---------- */
.wpo-hero { max-width: 820px; margin: 0 auto 40px; text-align: center; }
.wpo-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; }
.wpo-hero__dash { width: 28px; height: 4px; border-radius: 9999px; background: var(--orange); flex: 0 0 auto; }
.wpo-hero__eyebrow span { font-size: calc(13px * var(--a11y-fs, 1)); font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--blue); }
.wpo-hero__title { margin: 0; font-size: calc(clamp(30px, 5.2vw, 52px) * var(--a11y-fs, 1)); line-height: 1.08; font-weight: 800; letter-spacing: -1.2px; color: var(--ink); text-wrap: balance; }
.wpo-hero__title span { color: var(--blue); }
.wpo-hero__desc { margin: 22px auto 0; max-width: 600px; font-size: calc(18px * var(--a11y-fs, 1)); line-height: 1.62; color: var(--muted); }

/* ---------- Card ---------- */
.wpo-card { position: relative; background: #fff; border: 1px solid var(--line-2); border-radius: 26px; box-shadow: 0 34px 80px -54px rgba(33, 32, 76, 0.5); overflow: hidden; }
.wpo-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 20px 30px; border-bottom: 1px solid var(--line-4); }
.wpo-head__site { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.wpo-head__ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; background: var(--chip); color: var(--blue); }
.wpo-head__label { font-size: calc(11px * var(--a11y-fs, 1)); font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted-3); }
.wpo-head__host { font-size: calc(15px * var(--a11y-fs, 1)); font-weight: 700; letter-spacing: -0.2px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpo-reset { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 9999px; background: #fff; border: 1px solid var(--line-3); color: var(--udi-soft, #56556E); font-size: calc(13px * var(--a11y-fs, 1)); font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.wpo-reset:hover { border-color: var(--blue); color: var(--blue); }
.wpo-body { padding: 40px; }

/* ---------- Shared controls ---------- */
.wpo-in { width: 100%; border-radius: 12px; border: 1.5px solid var(--line-3); background: var(--bg); font-size: calc(15px * var(--a11y-fs, 1)); color: var(--ink); outline: none; transition: border-color .15s, background .15s, box-shadow .15s; }
.wpo-in::placeholder { color: var(--udi-muted, #A6ABB8); }
.wpo-in:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(59, 154, 217, 0.12); }
.wpo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; cursor: pointer; font-weight: 600; transition: background .15s, transform .12s, opacity .15s; }
.wpo-btn:active { transform: scale(.98); }
.wpo-btn[disabled] { opacity: .6; cursor: not-allowed; }
.wpo-btn--blue { background: var(--blue); color: #fff; }
.wpo-btn--blue:hover { background: var(--blue-600); }
.wpo-btn--orange { background: var(--orange); color: #fff; box-shadow: 0 14px 28px -12px rgba(239, 108, 35, 0.6); }
.wpo-btn--orange:hover { background: var(--orange-600); }
.wpo-err { margin: 11px 0 0; font-size: calc(13.5px * var(--a11y-fs, 1)); font-weight: 600; color: #D9482E; }

/* ---------- Idle ---------- */
.wpo-idle { text-align: center; }
.wpo-idle__badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 9999px; background: var(--chip); color: var(--blue-600); font-size: calc(12px * var(--a11y-fs, 1)); font-weight: 700; letter-spacing: .3px; }
.wpo-idle__title { margin: 20px 0 0; font-size: calc(27px * var(--a11y-fs, 1)); line-height: 1.2; font-weight: 800; letter-spacing: -0.6px; color: var(--ink); text-wrap: balance; }
.wpo-idle__sub { margin: 12px auto 0 !important; font-size: calc(15.5px * var(--a11y-fs, 1)); line-height: 1.55; color: var(--muted-2); }
.wpo-form { margin: 30px auto 0; max-width: 660px; }
.wpo-inrow { display: flex; gap: 12px; }
.wpo-field { position: relative; flex: 1; }
.wpo-field__ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: inline-flex; color: #9BA1AF; pointer-events: none; }
.wpo-idle .wpo-in { padding: 17px 18px 17px 48px; font-size: calc(16px * var(--a11y-fs, 1)); font-weight: 500; }
.wpo-idle .wpo-btn { padding: 17px 30px; border-radius: 14px; font-size: calc(16px * var(--a11y-fs, 1)); white-space: nowrap; }
.wpo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wpo-trust { display: flex; align-items: center; justify-content: center; gap: 14px 26px; flex-wrap: wrap; margin-top: 26px; }
.wpo-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: calc(13.5px * var(--a11y-fs, 1)); font-weight: 500; color: var(--muted-4); }

/* ---------- Scanning ---------- */
.wpo-scan__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.wpo-scan__kick { font-size: calc(13px * var(--a11y-fs, 1)); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--blue); }
.wpo-scan__label { margin-top: 6px; font-size: calc(17px * var(--a11y-fs, 1)); font-weight: 600; color: var(--udi-soft, #56556E); }
.wpo-scan__pct { font-size: calc(46px * var(--a11y-fs, 1)); font-weight: 800; letter-spacing: -1.5px; color: var(--ink); line-height: .9; font-variant-numeric: tabular-nums; }
.wpo-scan__pct span { font-size: calc(22px * var(--a11y-fs, 1)); font-weight: 700; color: var(--muted-3); }
.wpo-bar { margin-top: 18px; height: 12px; border-radius: 9999px; background: #EDEFF3; overflow: hidden; }
.wpo-bar__fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--blue), #5BB0E4); width: 0; transition: width .4s cubic-bezier(.22, 1, .36, 1); }
.wpo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.wpo-scan__grid { margin-top: 28px; }
.wpo-check { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: 13px; background: var(--bg); border: 1px solid var(--line-4); transition: background .25s, border-color .25s; }
.wpo-check__mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 26px; }
.wpo-check__name { font-size: calc(13.5px * var(--a11y-fs, 1)); font-weight: 600; letter-spacing: -0.1px; color: #9BA1AF; }
.wpo-check[data-st="running"] { background: #F4FAFE; border-color: #CFE3F4; }
.wpo-check[data-st="running"] .wpo-check__name { color: var(--blue-600); }
.wpo-check[data-st="completed"] { background: #F1FAF4; border-color: #D6EEDF; }
.wpo-check[data-st="completed"] .wpo-check__name { color: #2C7A54; }
.wpo-dot { width: 9px; height: 9px; border-radius: 9999px; background: #CDD3DD; }
.wpo-spin { display: inline-block; width: 17px; height: 17px; border-radius: 9999px; border: 2.5px solid #CFE3F4; border-top-color: var(--blue); animation: wpo-spin .7s linear infinite; }

/* ---------- Result ---------- */
.wpo-res__top { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; padding-bottom: 30px; border-bottom: 1px solid var(--line-4); }
.wpo-ring { --v: 0; --ring: var(--blue); position: relative; width: 150px; height: 150px; flex: 0 0 150px; border-radius: 50%; background: conic-gradient(var(--ring) calc(var(--v) * 1%), #EDEFF3 0); display: grid; place-items: center; }
.wpo-ring::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #fff; }
.wpo-ring__in { position: relative; display: flex; flex-direction: column; align-items: center; }
.wpo-ring__num { font-size: calc(44px * var(--a11y-fs, 1)); font-weight: 800; letter-spacing: -1.6px; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.wpo-ring__suf { font-size: calc(12.5px * var(--a11y-fs, 1)); font-weight: 600; color: var(--muted-3); margin-top: 2px; }
.wpo-res__head { flex: 1; min-width: 230px; }
.wpo-verdict { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 9999px; font-size: calc(12.5px * var(--a11y-fs, 1)); font-weight: 700; letter-spacing: .3px; }
.wpo-res__title { margin: 14px 0 0; font-size: calc(25px * var(--a11y-fs, 1)); line-height: 1.22; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); text-wrap: balance; }
.wpo-res__line { margin: 10px 0 0; font-size: calc(15px * var(--a11y-fs, 1)); line-height: 1.55; color: var(--muted-2); }
.wpo-res__grid { margin-top: 28px; }
.wpo-cat { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 15px; }
.wpo-cat__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wpo-cat__ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; background: var(--chip); color: var(--blue); }
.wpo-pill { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 9999px; font-size: calc(11px * var(--a11y-fs, 1)); font-weight: 700; letter-spacing: .2px; }
.wpo-cat__name { margin-top: 13px; font-size: calc(14.5px * var(--a11y-fs, 1)); font-weight: 700; letter-spacing: -0.2px; color: var(--ink); line-height: 1.25; }
.wpo-cat__short { margin-top: 3px; font-size: calc(12px * var(--a11y-fs, 1)); font-weight: 500; line-height: 1.4; color: var(--muted-3); }
.wpo-cat__bar { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.wpo-cat__track { flex: 1; height: 7px; border-radius: 9999px; background: #EDEFF3; overflow: hidden; }
.wpo-cat__fill { height: 100%; border-radius: 9999px; }
.wpo-cat__score { font-size: calc(14px * var(--a11y-fs, 1)); font-weight: 800; letter-spacing: -0.3px; color: var(--ink); min-width: 24px; text-align: right; font-variant-numeric: tabular-nums; }

/* status helpers */
.wpo-s-good { color: var(--good); background: var(--good-bg); }
.wpo-s-warn { color: var(--warn); background: var(--warn-bg); }
.wpo-s-crit { color: var(--crit); background: var(--crit-bg); }
.wpo-s-unknown { color: var(--muted-3); background: #EEF0F4; }

/* locked teaser */
.wpo-teaser { position: relative; margin-top: 24px; border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; background: #fff; }
.wpo-teaser__pad { padding: 24px 26px 22px; }
.wpo-teaser__title { display: flex; align-items: center; gap: 9px; }
.wpo-teaser__title h3 { margin: 0; font-size: calc(16px * var(--a11y-fs, 1)); font-weight: 700; letter-spacing: -0.2px; color: var(--ink); }
.wpo-teaser__wrap { position: relative; margin-top: 16px; }
.wpo-teaser__blur { filter: blur(5px); opacity: .55; user-select: none; pointer-events: none; display: flex; flex-direction: column; gap: 11px; }
.wpo-teaser__row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-4); }
.wpo-teaser__rowdot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 9999px; }
.wpo-teaser__rowtxt { font-size: calc(14px * var(--a11y-fs, 1)); font-weight: 500; color: #3A3953; }
.wpo-teaser__over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.85)); }
.wpo-teaser__lock { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 9999px; background: var(--ink); color: #fff; }
.wpo-teaser__cap { margin-top: 12px; font-size: calc(15px * var(--a11y-fs, 1)); font-weight: 700; color: var(--ink); max-width: 360px; }
.wpo-teaser__foot { padding: 22px 26px; background: var(--bg); border-top: 1px solid var(--line-4); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.wpo-teaser__pdf { display: flex; align-items: center; gap: 12px; }
.wpo-teaser__pdfico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: #FDEEE5; color: var(--orange); }
.wpo-teaser__pdftitle { font-size: calc(15px * var(--a11y-fs, 1)); font-weight: 700; color: var(--ink); }
.wpo-teaser__pdfsub { font-size: calc(13px * var(--a11y-fs, 1)); font-weight: 500; color: var(--udi-muted, #8A8FA0); }
.wpo-teaser .wpo-btn { padding: 15px 28px; border-radius: 9999px; font-size: calc(15.5px * var(--a11y-fs, 1)); }

/* ---------- Funnel (gate / done) ---------- */
.wpo-funnel { display: grid; grid-template-columns: 0.82fr 1fr; gap: 30px; }
.wpo-panel { position: relative; overflow: hidden; background: var(--ink); border-radius: 20px; padding: 28px 26px; color: #fff; }
.wpo-panel__glow { position: absolute; top: -50px; right: -40px; width: 200px; height: 200px; border-radius: 9999px; background: radial-gradient(circle, rgba(59, 154, 217, 0.35), transparent 70%); pointer-events: none; }
.wpo-panel__row { position: relative; display: flex; align-items: center; gap: 16px; }
.wpo-ring-sm { --v: 0; --ring: var(--blue); position: relative; width: 76px; height: 76px; flex: 0 0 76px; border-radius: 50%; background: conic-gradient(var(--ring) calc(var(--v) * 1%), rgba(255, 255, 255, 0.14) 0); display: grid; place-items: center; }
.wpo-ring-sm::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--ink); }
.wpo-ring-sm span { position: relative; font-size: calc(24px * var(--a11y-fs, 1)); font-weight: 800; letter-spacing: -1px; color: #fff; }
.wpo-panel__kick { font-size: calc(12px * var(--a11y-fs, 1)); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #8788A6; }
.wpo-panel__verdict { margin-top: 3px; font-size: calc(17px * var(--a11y-fs, 1)); font-weight: 700; color: #fff; }
.wpo-panel__div { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 22px 0; }
.wpo-panel__listtitle { font-size: calc(13px * var(--a11y-fs, 1)); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #7FC0EC; }
.wpo-panel__list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.wpo-panel__list li { display: flex; align-items: flex-start; gap: 11px; font-size: calc(14px * var(--a11y-fs, 1)); line-height: 1.45; color: #D7D8E6; font-weight: 500; }

.wpo-gate__title { margin: 0; font-size: calc(24px * var(--a11y-fs, 1)); line-height: 1.2; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); }
.wpo-gate__sub { margin: 10px 0 0; font-size: calc(15px * var(--a11y-fs, 1)); line-height: 1.55; color: var(--muted-2); }
.wpo-gate__form { margin-top: 22px; }
.wpo-lbl { display: block; font-size: calc(13px * var(--a11y-fs, 1)); font-weight: 600; color: #3A3953; margin-bottom: 7px; }
.wpo-gate__form .wpo-field { margin-bottom: 16px; }
.wpo-gate__form .wpo-in { padding: 13px 15px; }
.wpo-namerow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wpo-consent { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; margin-top: 4px; }
.wpo-consent input { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 1px; accent-color: var(--blue); cursor: pointer; }
.wpo-consent span { font-size: calc(12.5px * var(--a11y-fs, 1)); line-height: 1.5; color: var(--muted-2); }
.wpo-consent a { color: var(--blue); font-weight: 600; text-decoration: none; }
.wpo-gate__submit { width: 100%; margin-top: 22px; padding: 16px 24px; border-radius: 12px; font-size: calc(15.5px * var(--a11y-fs, 1)); }

/* ---------- Done ---------- */
.wpo-done { display: flex; flex-direction: column; align-items: flex-start; padding-top: 6px; }
.wpo-done__ico { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 9999px; background: #E9F6EE; color: var(--udi-success, #2FA76A); }
.wpo-done__title { margin: 20px 0 0; font-size: calc(25px * var(--a11y-fs, 1)); line-height: 1.18; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); }
.wpo-done__body { margin: 12px 0 0; font-size: calc(15.5px * var(--a11y-fs, 1)); line-height: 1.6; color: var(--muted-2); }
.wpo-done__body strong { color: var(--ink); font-weight: 700; }
.wpo-done__box { width: 100%; margin-top: 22px; display: flex; align-items: center; gap: 13px; padding: 16px 18px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.wpo-done__boxico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px; background: var(--chip); color: var(--blue); }
.wpo-done__boxtitle { font-size: calc(14px * var(--a11y-fs, 1)); font-weight: 700; color: var(--ink); }
.wpo-done__boxsub { font-size: calc(13px * var(--a11y-fs, 1)); font-weight: 500; color: var(--udi-muted, #8A8FA0); }
.wpo-done .wpo-btn { margin-top: 20px; padding: 14px 26px; border-radius: 9999px; background: #fff; border: 1.5px solid var(--orange); color: var(--orange); font-size: calc(15px * var(--a11y-fs, 1)); }
.wpo-done .wpo-btn:hover { background: var(--orange); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 780px) {
  .wpo-funnel { grid-template-columns: 1fr; gap: 22px; }
  .wpo-inrow { flex-direction: column; }
  .wpo-namerow { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wpo-body { padding: 24px 18px 30px; }
  .wpo-head { padding: 15px 18px; }
  .wpo-hero { margin-bottom: 26px; }
}
@media (max-width: 440px) {
  .wpo-grid { grid-template-columns: 1fr; }
}

/* Accessibility: live region for screen readers + programmatic focus targets (headings). */
.wpo-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.wpo-scanner [tabindex="-1"]:focus { outline: none; }