:root { color-scheme: light; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif; color: #1d2939; background: #f5f7fb; font-synthesis: none; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% -10%, #e6efff 0, #f5f7fb 38rem); }
button, input { font: inherit; }
.page-shell { width: min(100% - 32px, 520px); margin: 0 auto; padding: max(50px, env(safe-area-inset-top) + 28px) 0 max(26px, env(safe-area-inset-bottom)); }
.hero { margin: 0 4px 28px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #53657d; font-size: 11px; font-weight: 750; letter-spacing: .16em; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: #3978ef; box-shadow: 0 0 0 4px #dce8ff; }
h1 { margin: 22px 0 8px; color: #172b4d; font-size: clamp(34px, 9vw, 44px); line-height: 1.1; letter-spacing: -.045em; }
.lead { margin: 0; color: #69788d; font-size: 16px; }
.push-card { padding: 25px; border: 1px solid #e2e8f0; border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: 0 18px 50px rgba(34, 61, 99, .08); }
.card-topline { display: flex; align-items: center; justify-content: space-between; }
.app-mark { display: grid; place-items: center; position: relative; width: 42px; height: 42px; border-radius: 14px; color: #fff; background: #1f3554; font-size: 21px; font-weight: 750; }
.app-mark i { position: absolute; width: 9px; height: 9px; right: 5px; top: 5px; border: 2px solid #fff; border-radius: 50%; background: #61c69b; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; color: #607086; background: #f2f5f9; font-size: 12px; font-weight: 650; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #9aa9ba; }
.status-pill[data-state="on"] { color: #18734c; background: #e8f7f0; }
.status-pill[data-state="on"] .status-dot { background: #25a66a; }
.status-pill[data-state="denied"] { color: #a03b3b; background: #fff0ef; }
.status-pill[data-state="denied"] .status-dot { background: #da5252; }
h2 { margin: 22px 0 7px; color: #1d2d43; font-size: 21px; letter-spacing: -.02em; }
.card-copy { margin: 0 0 20px; color: #66768a; font-size: 14px; line-height: 1.65; }
.pairing-form { display: grid; gap: 10px; margin: 0 0 15px; }
.pairing-form label { color: #34465e; font-size: 13px; font-weight: 650; }
.pairing-form input { min-height: 48px; width: 100%; padding: 0 14px; border: 1px solid #d7e0eb; border-radius: 11px; outline: 0; color: #21364f; background: #fff; }
.pairing-form input:focus { border-color: #5b8ef1; box-shadow: 0 0 0 3px #e4edff; }
.primary-button { width: 100%; min-height: 48px; border: 0; border-radius: 11px; color: white; background: linear-gradient(135deg, #3979ed, #2f64d8); box-shadow: 0 6px 14px rgba(48, 100, 216, .18); font-weight: 700; cursor: pointer; }
.primary-button:disabled { opacity: .65; cursor: wait; }
.button-row { margin: 14px 0 0; }
.text-button { display: block; margin: 12px auto 0; padding: 7px; border: 0; color: #4774bf; background: none; font-weight: 650; cursor: pointer; }
.feedback { min-height: 20px; margin: 11px 0 0; color: #397553; font-size: 13px; line-height: 1.45; }
.help-copy { margin: 10px 0 0; color: #8b5353; font-size: 13px; line-height: 1.5; }
.divider { height: 1px; margin: 20px 0 17px; background: #e9eef4; }
.steps { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.steps li { display: flex; align-items: center; gap: 11px; }
.steps li > span { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; color: #4772b9; background: #edf3ff; font-size: 12px; font-weight: 750; }
.steps p, .privacy-note p { margin: 0; color: #66768a; font-size: 13px; line-height: 1.5; }
.privacy-note { display: flex; align-items: flex-start; gap: 10px; margin: 19px 5px 0; }
.shield { display: grid; place-items: center; flex: 0 0 20px; height: 20px; border-radius: 50%; color: #398768; background: #e3f4ed; font-size: 12px; font-weight: 800; }
@media (max-width: 420px) { .page-shell { width: min(100% - 24px, 520px); padding-top: max(34px, env(safe-area-inset-top) + 18px); } .push-card { padding: 21px 18px; border-radius: 19px; } .lead { font-size: 15px; } }