.kp-consent,.kp-consent-open{font:15px/1.5 system-ui,sans-serif;color:#172c26;background:#fff;border:1px solid #74877e;border-radius:12px;box-shadow:0 4px 28px #0002;z-index:10000}
.kp-consent{position:fixed;inset-inline:16px;bottom:16px;max-width:560px;margin-inline:auto;padding:18px;max-height:calc(100dvh - 32px);overflow:auto;text-align:start}
.kp-consent h2{font-size:19px;margin:0 0 8px;color:inherit}.kp-consent p{margin:0 0 14px;color:inherit;font-size:15px}.kp-consent-actions{display:flex;flex-wrap:wrap;gap:8px}
.kp-consent button,.kp-consent-open{min-height:44px;padding:9px 14px;cursor:pointer;font:inherit}.kp-consent button{border:1px solid #446557;border-radius:8px;background:#edf4f0;color:#172c26;flex:1}
.kp-consent label{display:flex;align-items:center;gap:10px;min-height:44px}.kp-consent input{width:20px;height:20px}.kp-consent a{display:inline-block;margin-top:12px;color:#245b45;text-decoration:underline}.kp-consent-open{position:fixed;bottom:8px;inset-inline-end:8px;font-size:13px}
.kp-consent [hidden],.kp-consent[hidden],.kp-consent-open[hidden]{display:none!important}.kp-consent :focus-visible,.kp-consent-open:focus-visible{outline:3px solid #17633f;outline-offset:3px}

/* Quiz consent: 64px bar above the device safe area. Reserve its space in
   the page and scrollport so focused fields and the last CTA stay reachable. */
html:has(.quiz-shell){scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom))}
body:has(.quiz-shell){display:flex;flex-direction:column;min-height:100svh;padding-bottom:calc(80px + env(safe-area-inset-bottom))}
body:has(.quiz-shell)>.site-header{order:0}
body:has(.quiz-shell)>main{order:2}
body:has(.quiz-shell)>.site-footer{order:3}
body:has(.quiz-shell)>.kp-consent{order:1;position:fixed;inset-inline:0;bottom:env(safe-area-inset-bottom);width:100%;max-width:none;box-sizing:border-box;height:64px;padding:2px max(8px,env(safe-area-inset-right)) 2px max(8px,env(safe-area-inset-left));margin:0;border-radius:0;overflow:visible}
body:has(.quiz-shell)>.kp-consent::after{content:"";position:absolute;inset-inline:-1px;top:100%;height:env(safe-area-inset-bottom);background:#fff}
body:has(.quiz-shell)>.kp-consent h2{font-size:12px;line-height:14px;margin:0;white-space:nowrap}
body:has(.quiz-shell)>.kp-consent>p,body:has(.quiz-shell)>.kp-consent>a{display:none}
body:has(.quiz-shell)>.kp-consent .kp-consent-actions{flex-wrap:nowrap;gap:6px}
body:has(.quiz-shell)>.kp-consent .kp-consent-actions button{height:44px;min-width:0;flex:1 1 0;padding:4px;font-size:13px;line-height:1.1}
/* Expanded settings join the document above the quiz; they never overlay it. */
body:has(.quiz-shell)>.kp-consent:has(>div:not(.kp-consent-actions):not([hidden])){position:static;height:auto;width:calc(100% - 32px);max-width:560px;margin:12px auto;padding:14px 16px;border-radius:12px;overflow:auto;max-height:none}
body:has(.quiz-shell)>.kp-consent:has(>div:not(.kp-consent-actions):not([hidden]))::after{display:none}
body:has(.quiz-shell)>.kp-consent:has(>div:not(.kp-consent-actions):not([hidden])) h2{font-size:19px;line-height:1.5;white-space:normal;margin-bottom:8px}
body:has(.quiz-shell)>.kp-consent:has(>div:not(.kp-consent-actions):not([hidden]))>p{display:block}
body:has(.quiz-shell)>.kp-consent:has(>div:not(.kp-consent-actions):not([hidden]))>a{display:inline-flex}
body:has(.quiz-shell)>.kp-consent-open{position:static;order:4;align-self:flex-end;margin:12px 16px;max-width:calc(100% - 32px)}
body:has(.quiz-shell)>.kp-consent-open:focus{position:fixed;margin:0}
@media(max-width:560px){body:has(.sticky-cta.is-visible)>.kp-consent-open{bottom:calc(81px + env(safe-area-inset-bottom))}}
.kp-consent a{min-height:44px;display:inline-flex;align-items:center;margin-top:4px}
.kp-consent button{min-width:44px;flex:1 1 auto;padding-inline:6px;font-size:14px;overflow-wrap:normal}
.kp-consent input{flex:none;scroll-margin-block-start:50svh;scroll-margin-block-end:64px}
.kp-consent-open{bottom:max(8px,env(safe-area-inset-bottom));max-width:calc(100% - 16px)}

/* Clone privacy control stays in document flow, including while focused. */
body[data-clone="2"]>.kp-consent-open,body[data-clone="2"]>.kp-consent-open:focus{position:static;display:block;width:max-content;max-width:calc(100% - 32px);margin:16px 16px 16px auto;min-height:44px;font-size:13px}

/* Clone quiz (/q/): the slim bar variant of the legacy quiz, but in normal
   document flow after the quiz, never fixed or sticky. Nothing can scroll
   under it, so no viewport or scroll position puts it over an age answer or a
   CTA (tools/test-clone-consent-layout.mjs measures this). Accept and Reject
   are the same element, size and style; Settings stays one tap away. */
body[data-clone="2"]>.kp-consent{position:static;inset:auto;width:calc(100% - 32px);max-width:560px;height:auto;max-height:none;margin:24px auto 16px;padding:8px 10px 10px;border-radius:12px;box-shadow:none;overflow:visible}
body[data-clone="2"]>.kp-consent h2{font-size:12px;line-height:14px;margin:0 0 6px;white-space:nowrap}
body[data-clone="2"]>.kp-consent>p,body[data-clone="2"]>.kp-consent>a{display:none}
body[data-clone="2"]>.kp-consent .kp-consent-actions{flex-wrap:nowrap;gap:6px}
body[data-clone="2"]>.kp-consent .kp-consent-actions button{height:44px;min-width:0;flex:1 1 0;padding:4px;font-size:13px;line-height:1.1}
/* Expanded settings: the explanation and the policy link come back. */
body[data-clone="2"]>.kp-consent:has(>div:not(.kp-consent-actions):not([hidden])){padding:14px 16px}
body[data-clone="2"]>.kp-consent:has(>div:not(.kp-consent-actions):not([hidden])) h2{font-size:19px;line-height:1.5;white-space:normal;margin-bottom:8px}
body[data-clone="2"]>.kp-consent:has(>div:not(.kp-consent-actions):not([hidden]))>p{display:block}
body[data-clone="2"]>.kp-consent:has(>div:not(.kp-consent-actions):not([hidden]))>a{display:inline-flex}
/* Until a choice is made, a quiz step ends at its own content, so the bar sits
   just under the last control instead of below a viewport-tall spacer. */
body[data-clone="2"]:has(>.kp-consent:not([hidden]))>.c2-main{min-height:0}