/* ============================================================
   Owed — onboarding flow (onboarding.html)
   Full-height stepped flow. Themes: .ob[data-theme="light|blue"]
   ============================================================ */
.ob-body { background: #fff; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ob { position: fixed; inset: 0; display: flex; flex-direction: column; background: #fff; color: var(--ink); transition: background-color 400ms ease-out; }
.ob[data-theme="blue"] { background: var(--blue); color: #fff; }

/* top bar */
.ob__top { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 760px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 20px 8px; min-height: 58px; }
.ob__back[hidden] { display: grid; visibility: hidden; }
.ob__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); }
.ob__brand img { height: 26px; width: auto; }
.ob__word { font-family: "Paytone One", var(--font); font-size: 24px; letter-spacing: -0.06em; line-height: 1; }
.ob[data-theme="blue"] .ob__brand { color: #fff; }
.ob__brand-white { display: none; }
.ob[data-theme="blue"] .ob__brand-blue { display: none; }
.ob[data-theme="blue"] .ob__brand-white { display: block; }
.ob__back { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--bg-2); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color 150ms ease-out, transform 200ms var(--ease-smooth-out); }
.ob__back svg { width: 18px; height: 18px; }
.ob__back:hover { background: var(--line); }
.ob__back:active { transform: scale(.94); }
.ob[data-theme="blue"] .ob__back { background: rgba(255, 255, 255, .16); color: #fff; }
.ob__progress { flex: 1; height: 4px; border-radius: 2px; background: var(--bg-2); overflow: hidden; }
.ob__phases { flex: 1; display: flex; gap: 8px; align-items: flex-start; }
.ob__phase { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.ob__phase i { display: block; height: 4px; border-radius: 2px; background: var(--bg-2); overflow: hidden; position: relative; }
.ob__phase-fill { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--blue); transition: width 450ms var(--ease-smooth-out); }
.ob__phase b { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); transition: color 200ms; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob__phase.is-on b { color: var(--blue); }
.ob[data-theme="blue"] .ob__phase i { background: rgba(255,255,255,.25); }
.ob[data-theme="blue"] .ob__phase-fill { background: #fff; }
.ob[data-theme="blue"] .ob__phase b { color: rgba(255,255,255,.55); }
.ob[data-theme="blue"] .ob__phase.is-on b { color: #fff; }
.ob__progress-fill { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--blue); transition: width 500ms var(--ease-smooth-out); }
.ob[data-theme="blue"] .ob__progress { background: rgba(255, 255, 255, .22); }
.ob[data-theme="blue"] .ob__progress-fill { background: #fff; }
.ob__skip { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.ob__skip:hover { color: var(--ink); }
.ob[data-theme="blue"] .ob__skip { color: rgba(255, 255, 255, .8); }
.ob__count { margin-left: auto; padding: 8px 14px; border-radius: 999px; background: linear-gradient(180deg, #fff, #eef3ff); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 1px 0 #fff, 0 4px 10px -6px rgba(0, 20, 90, .5); color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.ob__count b { color: var(--blue); }

/* pages */
.ob__pages { flex: 1; position: relative; min-height: 0; }
/* full-width scroll container (wheel/drag anywhere scrolls), content centered in a 760px column via padding */
.ob__page { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: none; margin: 0; padding: 8px max(24px, calc((100% - 760px) / 2)) 24px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.ob__page::-webkit-scrollbar { display: none; }
.ob__page--splash { justify-content: center; align-items: center; text-align: center; }
.ob__copy { display: flex; flex-direction: column; gap: 12px; }
.ob__copy--center { align-items: center; text-align: center; }
.ob__h1 { font-size: clamp(40px, 8vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.ob__h2 { font-size: clamp(26px, 4.4vw, 36px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.ob__h2 em { font-style: normal; color: var(--blue); }
.ob__h2--plain { font-weight: 600; letter-spacing: -0.02em; }
.ob__lede { font-size: 17px; color: var(--ink-3); max-width: 600px; }
.ob__art { position: relative; flex: 1; min-height: 340px; display: grid; place-items: center; }

/* footer */
.ob__foot { position: relative; z-index: 2; width: 100%; max-width: 760px; margin: 0 auto; padding: 12px 24px max(20px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 30%); }
.ob[data-theme="blue"] .ob__foot { background: none; }
.ob__foot[hidden] { display: none !important; }
.ob .btn { text-transform: none; font-size: 16px; letter-spacing: -0.01em; }
.ob__next { --pill-pad-y: 1.35rem; border-radius: 999px; }
.ob[data-step="0"] .ob__next { --pill-solid-bg: var(--blue); --pill-solid-border: var(--blue); --pill-solid-fg-hover: var(--blue); }
.ob__next:disabled { opacity: 1; background: var(--blue-100); border-color: var(--blue-100); color: rgba(255, 255, 255, .95); cursor: not-allowed; }
.ob__login { font-size: 15px; font-weight: 600; color: var(--ink); }
.ob[data-step]:not([data-step="0"]) .ob__login { display: none; }

/* chips + rows shared by illustrations */
.ob__row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); animation: row-in 600ms var(--ease-smooth-out) both; animation-delay: var(--d, 0s); text-align: left; }
.ob__row .ptile { width: 44px; height: 44px; border-radius: 13px; }
.ob__row-meta { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; text-align: left; }
.ob__row-meta b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; }
.ob__row-meta small { font-size: 12.5px; color: var(--ink-3); }
.ob__row-btn { --c: var(--blue); position: relative; overflow: hidden; padding: 8px 15px 9px; border-radius: 999px; background: var(--chip-solid); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: -0.01em; box-shadow: var(--chip-solid-shadow); text-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
/* shine sweep — a soft highlight band glides across the pill every few seconds */
.ob__row-btn::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 45%; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-18deg) translateX(-120%); animation: btn-shine 3.2s ease-in-out infinite; animation-delay: calc(1.2s + var(--d, 0s)); pointer-events: none; }
@keyframes btn-shine { 0%, 62% { transform: skewX(-18deg) translateX(-140%); } 100% { transform: skewX(-18deg) translateX(420%); } }
.ob__row--big .ob__row-btn::after { animation-duration: 2.8s; }
@media (prefers-reduced-motion: reduce) { .ob__row-btn::after { animation: none; } }
.ob__row--dim { opacity: .55; }
.ob__amt { color: var(--blue); font-size: 14px; white-space: nowrap; }

/* 0 · splash phone */
.ob__art--splash { min-height: 0; height: min(46vh, 380px); width: 100%; }
.ob__phone { position: relative; width: 300px; height: 100%; }
.ob__phone-screen::before { content: ""; position: absolute; left: 50%; top: 10px; translate: -50% 0; width: 84px; height: 22px; border-radius: 999px; background: #0d1220; z-index: 3; }
.ob__phone-screen { position: absolute; inset: 0 0 -20px 0; padding: 22px 16px; border-radius: 40px 40px 0 0; background: #fff; border: 8px solid #0d1220; border-bottom: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.ob__phone-head { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; font-size: 18px; }
.ob__phone-av { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.ob__row--pop { position: absolute; left: -24px; right: -24px; top: 78px; box-shadow: var(--shadow-lg); rotate: -1.5deg; /* matches float-bob's 0% frame so the hand-off at 1.3s doesn't snap */ animation: row-in 700ms var(--ease-bounce) 600ms both, float-bob 5s ease-in-out 1.3s infinite; }

/* 1 · folder */
.folder { position: relative; width: 340px; height: 320px; }
.folder__tiles { position: absolute; left: 50%; top: 40px; width: 0; height: 0; }
.folder__tile { position: absolute; left: 0; top: 0; width: 76px; height: 76px; border-radius: 22px; margin: -38px 0 0 -38px; transform: translate(var(--x), var(--y)) rotate(var(--r)); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .35); animation: tile-pop 700ms var(--ease-bounce) both; animation-delay: calc(.2s + var(--d)); }
.folder__tile img { width: 44%; height: 44%; }
@keyframes tile-pop { from { opacity: 0; transform: translate(0, 60px) rotate(0) scale(.6); } to { opacity: 1; } }
.folder__back { position: absolute; left: 20px; right: 20px; bottom: 60px; height: 160px; border-radius: 22px 22px 0 0; background: #0038c9; }
.folder__front { position: absolute; left: 0; right: 0; bottom: 0; height: 190px; border-radius: 6px 24px 22px 22px; background: linear-gradient(180deg, #2f6bff, var(--blue)); clip-path: polygon(0 12%, 30% 12%, 36% 0, 100% 0, 100% 100%, 0 100%); box-shadow: 0 30px 50px -30px rgba(0, 40, 160, .6); display: flex; align-items: flex-end; padding: 0 0 26px 26px; }
.folder__front span { font-family: "Paytone One", var(--font); font-size: 34px; line-height: .95; letter-spacing: -0.02em; text-transform:none; color: #fff; }

/* 2 · finder */
.finder { position: relative; width: min(100%, 420px); display: flex; flex-direction: column; gap: 12px; padding: 40px 0 0; }
.finder__glass { position: absolute; left: -30px; top: 10px; width: 120px; height: 120px; border-radius: 50%; border: 14px solid var(--bg-2); opacity: .9; }
.finder__glass::after { content: ""; position: absolute; left: -46px; bottom: -34px; width: 70px; height: 16px; border-radius: 8px; background: var(--bg-2); transform: rotate(45deg); }
.scard { position: relative; padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: 0 20px 40px -22px rgba(18, 18, 18, .35), 0 0 0 1px var(--line); animation: row-in 600ms var(--ease-smooth-out) both; animation-delay: calc(.2s + var(--d)); }
.scard__head { display: flex; align-items: center; gap: 10px; }
.scard__head .ptile { width: 30px; height: 30px; border-radius: 9px; }
.scard__head b { font-size: 15px; }
.scard__head small { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.scard__label { display: block; margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.scard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.scard__foot b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }

/* 3 · tracker */
.tracker { position: relative; width: min(100%, 460px); height: 380px; }
.tracker__panel { position: absolute; inset: 0; border-radius: 28px; background: var(--blue); overflow: hidden; }
.tracker__panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .18) 0 60px, transparent 61px), radial-gradient(circle at 15% 70%, rgba(255, 255, 255, .12) 0 90px, transparent 91px), radial-gradient(circle at 60% 110%, rgba(255, 255, 255, .1) 0 120px, transparent 121px); }
.tracker__card { position: absolute; left: 22%; top: 60px; width: 100%; padding: 16px 0 0 18px; border-radius: 22px 0 0 0; background: #fff; color: var(--ink); box-shadow: -20px 20px 60px -30px rgba(0, 20, 90, .5); }
.tracker__title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 15px; }
.tracker__title small { display: block; width: 100%; font-size: 12px; color: var(--ink-3); }
.tracker__title b { white-space: nowrap; }
.tracker__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--blue-50); flex: none; }
.tracker__row { display: grid; grid-template-columns: 1.4fr 1fr .8fr; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.tracker__row--head { font-size: 11px; font-weight: 700; letter-spacing:0; text-transform:none; color: var(--ink-3); border-top: 0; background: var(--bg-2); margin-left: -18px; padding-left: 18px; }
.tracker__row span:first-child { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.tracker__row .ptile { width: 24px; height: 24px; border-radius: 7px; }
.notif { position: absolute; left: 12px; bottom: 60px; width: 260px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); box-shadow: 0 16px 40px -20px rgba(0, 20, 90, .5); animation: row-in 600ms var(--ease-bounce) both; animation-delay: var(--d, 0s); }
.notif--2 { bottom: -10px; left: 30px; }
.notif__head { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 4px; }
.notif__head img { width: 16px; height: auto; }
.notif__head small { margin-left: auto; color: var(--ink-3); }
.notif p { font-size: 13.5px; line-height: 1.35; }
.notif > small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }

/* 4 · lock screen */
.lock { position: relative; width: min(100%, 440px); height: 400px; border-radius: 28px; background: linear-gradient(160deg, #3d7bff, var(--blue) 50%, #0038c9); overflow: hidden; }
.lock__tile { position: absolute; width: 74px; height: 74px; border-radius: 22px; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .45); animation: tile-pop 700ms var(--ease-bounce) both; animation-delay: calc(.2s + var(--d)); }
.lock__tile img { width: 44%; height: 44%; }
.lock__phone { position: absolute; left: 50%; top: 40px; translate: -50% 0; width: 250px; height: 420px; border-radius: 40px; background: linear-gradient(180deg, #4d8bff, #1a5cff); border: 8px solid #0d1220; padding: 34px 12px 0; text-align: center; color: #fff; }
.lock__notch { position: absolute; top: 10px; left: 50%; translate: -50% 0; width: 90px; height: 24px; border-radius: 99px; background: #0d1220; }
.lock__time small { display: block; font-size: 13px; font-weight: 600; opacity: .9; }
.lock__time b { display: block; font-size: 58px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-top: 2px; }
.notif--lock { position: static; width: 100%; margin-top: 12px; text-align: left; }

/* 5 · missed */
.missed { position: relative; width: min(100%, 420px); display: flex; flex-direction: column; gap: 14px; padding: 36px 0 0; }
.tag { position: absolute; padding: 8px 14px; border-radius: 999px; background: linear-gradient(180deg, #fff, #f4f6fb); border: 1px solid rgba(18, 18, 18, .08); box-shadow: inset 0 1px 0 #fff, var(--shadow-md); font-size: 13px; font-weight: 800; white-space: nowrap; rotate: -1.5deg; animation: row-in 600ms var(--ease-bounce) .5s both, float-bob 5s ease-in-out 1s infinite; }
.tag--1 { left: -10px; top: 0; rotate: -6deg; }
.tag--2 { right: -6px; top: -6px; rotate: 5deg; animation-delay: .7s, 1.4s; }
.mcard { padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 44px -26px rgba(18, 18, 18, .35); animation: row-in 600ms var(--ease-smooth-out) both; animation-delay: calc(.2s + var(--d)); }
.mcard__head { display: flex; align-items: center; gap: 10px; }
.mcard__head .ptile { width: 30px; height: 30px; border-radius: 9px; }
.mcard__head small { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.mcard__meta { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.mcard__meta span { display: flex; flex-direction: column; gap: 2px; }
.mcard__meta b { color: var(--ink); font-size: 14px; }
.mcard__meta span:last-child { text-align: right; }
.mcard__meta span:first-child b { color: var(--blue); }
.mcard__bar { margin-top: 10px; height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.mcard__bar i { display: block; height: 100%; width: var(--p); border-radius: 3px; background: linear-gradient(90deg, var(--blue), #5cf29a); animation: bar-in 1.2s var(--ease-smooth-out) .6s both; }
@keyframes bar-in { from { width: 0; } }

/* 6 · account form */
.ob__page--form { justify-content: center; }
.ob__form { width: 100%; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ob__control { height: 62px; border-radius: 18px; background: var(--bg-2); border-color: transparent; }
.ob__control:focus-within { background: #fff; }
.ob__control input { font-size: 17px; }
.ob__prefix { font-weight: 600; font-size: 17px; color: var(--ink); }
.ob__fine { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); text-align: center; }
.ob__fine a { text-decoration: underline; text-underline-offset: 2px; }

/* 7 · OTP */
.otp { display: flex; justify-content: center; gap: 10px; margin: 8px auto 0; }
.otp__box { width: 66px; height: 70px; border-radius: 16px; border: 2px solid transparent; background: var(--bg-2); text-align: center; font: inherit; font-size: 26px; font-weight: 700; color: var(--ink); outline: 0; caret-color: var(--blue); transition: border-color 150ms ease-out, background-color 150ms ease-out, transform 200ms var(--ease-bounce); }
.otp__box:focus { border-color: var(--blue); background: #fff; }
.otp__box.is-filled { transform: scale(1.04); }
.otp[data-state="error"] .otp__box { border-color: var(--red); animation: t-input-shake 280ms linear; }
.otp[data-state="ok"] .otp__box { border-color: var(--green); background: var(--green-50); }
.otp__resend { text-align: center; }
.otp__resend button { border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink-4); cursor: pointer; }
.otp__resend button:not(:disabled) { color: var(--blue); }
.otp__hint { text-align: center; font-size: 12.5px; color: var(--ink-4); }
@media (max-width: 480px) { .otp { gap: 6px; } .otp__box { width: 48px; height: 58px; font-size: 22px; border-radius: 12px; } }

/* 8… · eligibility questions (blue theme) */
.q { position: relative; margin-top: 30px; padding: 40px 24px 20px; border-radius: 28px 28px 0 0; background: #fff; color: var(--ink); flex: 1; display: flex; flex-direction: column; gap: 22px; }
.ob__page--q { padding-bottom: 0; gap: 0; }
.q__brand { position: absolute; left: 6px; top: -34px; width: 66px; height: 66px; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35); rotate: -6deg; display: grid; place-items: center; }
.q__brand .ptile { width: 44px; height: 44px; border-radius: 12px; }
.q__title { font-size: clamp(24px, 4vw, 34px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.q__title em { font-style: normal; color: var(--blue); }
.q__art { flex: 1; display: grid; place-items: center; min-height: 240px; }
.q__logo { width: min(64vw, 380px, 38vh); aspect-ratio: 1; border-radius: 40px; background: var(--c, var(--blue)); display: grid; place-items: center; box-shadow: 0 30px 60px -30px rgba(18, 18, 18, .45), 0 0 0 10px #fff, 0 0 0 11px var(--line); animation: row-in 500ms var(--ease-smooth-out) both; }
.q__logo img { width: 42%; height: 42%; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .3)); }
.q__opts { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; }
.q__opt { width: 100%; padding: 18px; border-radius: 16px; border: 1.5px solid var(--line-strong); background: #fff; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); cursor: pointer; transition: border-color 150ms ease-out, background-color 150ms ease-out, transform 150ms var(--ease-smooth-out); }
.q__opt:hover { border-color: var(--ink); }
.q__opt:active { transform: scale(.985); }
.q__opt.is-picked { border-color: var(--blue); background: var(--blue-50); color: var(--blue); font-weight: 700; }

/* calculating */
.calc { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
.calc__icon { position: relative; width: 96px; height: 96px; margin-bottom: 8px; }
.calc__icon span { position: absolute; inset: 0; border-radius: 22px; background: #fff; border: 1.5px solid var(--line); display: grid; place-items: center; }
.calc__icon span:nth-child(1) { rotate: -10deg; translate: -8px 4px; }
.calc__icon span:nth-child(2) { rotate: -4deg; translate: -3px 2px; }
.calc__icon span:nth-child(3) img { width: 34px; height: auto; }
.calc__icon span:nth-child(3) { animation: calc-bob 1.6s ease-in-out infinite; }
@keyframes calc-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.calc__title { font-size: clamp(26px, 4vw, 34px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.calc__title em { font-style: normal; color: var(--blue); }
.calc__sub { font-size: 16px; font-weight: 500; background: linear-gradient(90deg, #a2a8b6 0%, #a2a8b6 35%, var(--ink) 50%, #a2a8b6 65%, #a2a8b6 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer-txt 1.8s linear infinite; }
@keyframes shimmer-txt { from { background-position: 100% 0; } to { background-position: 0 0; } }
.calc__bar { width: min(100%, 320px); height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; margin-top: 8px; }
.calc__bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--blue); transition: width 400ms var(--ease-smooth-out); }

/* results */
.res { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.res__hero { text-align: center; padding: 20px 0 6px; }
.res__eyebrow { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--green-50); color: #0b7a3b; font-size: 12.5px; font-weight: 800; text-transform:none; letter-spacing:0; }
.res__amt { display: block; margin-top: 12px; font-size: clamp(48px, 9vw, 72px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
.res__sub { margin-top: 8px; color: var(--ink-3); font-size: 16px; }
.res__list { display: flex; flex-direction: column; gap: 8px; }
.res__list .ob__row { animation-delay: calc(.3s + var(--d, 0s)); }
.res__empty { text-align: center; color: var(--ink-3); padding: 20px; }

@media (max-width: 560px) {
  .ob__top { padding: 16px 18px 6px; }
  .ob__page { padding: 6px 18px 20px; gap: 18px; }
  .ob__foot { padding: 10px 18px max(16px, env(safe-area-inset-bottom)); }
  .ob__art { min-height: 300px; }
  .folder { width: 300px; height: 290px; }
  .folder__tile { width: 64px; height: 64px; }
  .tracker { height: 340px; }
  .lock { height: 360px; }
  .lock__phone { width: 220px; }
  .q { margin-top: 26px; padding: 34px 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .folder__tile, .lock__tile, .scard, .mcard, .notif, .ob__row, .tag, .q__logo, .calc__icon span, .calc__sub, .mcard__bar i { animation: none !important; opacity: 1; }
}

/* ---------- generated pages ---------- */
.ob__emoji { display: block; font-size: 64px; line-height: 1; margin-bottom: 8px; animation: row-in 600ms var(--ease-bounce) both; }
.ob__h2--it { font-style: italic; letter-spacing: -0.035em; }
.ob__big { display: block; font-size: clamp(56px, 11vw, 88px); font-weight: 800; font-style: italic; letter-spacing: -0.05em; line-height: 1; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.ob[data-kind="missed"] .ob__lede, .ob[data-kind="unclaimable"] .ob__lede { max-width: 420px; }

/* orbit */
.ob__page--orbit { justify-content: center; align-items: center; overflow: hidden; }
.orbit { position: relative; width: min(92vw, 640px); aspect-ratio: 1; display: grid; place-items: center; }
.orbit__center { position: relative; z-index: 2; text-align: center; max-width: 290px; padding: 24px; border-radius: 50%; background: #fff; }
.orbit__center .ob__h2 { font-size: clamp(22px, 3.6vw, 30px); }
.orbit__center .ob__lede { font-size: 14px; margin-top: 8px; }
.orbit__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--line); --dur: 90s; --dir: 1; }
.orbit__ring--inner { inset: 19%; --dur: 70s; --dir: -1; }
.orbit__tile { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 19px; background: var(--c); display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 18px 32px -16px rgba(10, 20, 60, .45), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .12);
  --a: calc(var(--i) * (360deg / var(--n))); --r: calc(-1 * (min(92vw, 640px) / 2));
  transform: rotate(var(--a)) translateY(var(--r)) rotate(calc(-1 * var(--a)));
  animation: orbit-in 700ms var(--ease-bounce) both, orbit var(--dur) linear infinite; animation-delay: calc(var(--i) * 45ms), 0s; }
.orbit__tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%); pointer-events: none; }
.orbit__ring--inner .orbit__tile { width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 15px; --r: calc(-1 * (min(92vw, 640px) * .31)); }
.orbit__tile img { width: 46%; height: 46%; animation: bob 6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.9s); }
.orbit__tile--photo img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
@keyframes orbit-in { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }
@keyframes orbit { from { transform: rotate(var(--a)) translateY(var(--r)) rotate(calc(-1 * var(--a))); } to { transform: rotate(calc(var(--a) + var(--dir) * 360deg)) translateY(var(--r)) rotate(calc(-1 * var(--a) - var(--dir) * 360deg)); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .orbit__ring, .orbit__tile, .orbit__tile img { animation: none !important; } }
@media (max-width: 560px) {
  .ob__page--orbit { padding-left: 0; padding-right: 0; }
  .orbit { width: 100vw; }
  .orbit__tile { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 13px; --r: -50vw; }
  .orbit__ring--inner { inset: 18%; }
  .orbit__ring--inner .orbit__tile { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 10px; --r: -32vw; }
  .orbit__center { max-width: 200px; padding: 14px 8px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 0 10px rgba(255, 255, 255, .5); }
  .orbit__center .ob__h2 { font-size: 19px; }
  .orbit__center .ob__lede { font-size: 12.5px; margin-top: 6px; }
}
/* photo (PNG) brand tiles fill the tile; details-form hint */
.ptile--photo .ptile__img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.dform__hint { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); }
.q__logo.is-photo img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

/* choose */
.picks { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; }
.pick { position: relative; display: flex; align-items: center; gap: 18px; padding: 20px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; border-radius: 22px; border: 1.5px solid var(--line-strong); background: #fff; cursor: pointer; transition: border-color 150ms ease-out, background-color 150ms ease-out, transform 150ms var(--ease-smooth-out); animation: row-in 500ms var(--ease-smooth-out) both; animation-delay: calc(var(--i) * 60ms); }
.pick:hover { border-color: var(--ink-3); }
.pick.is-on { border-color: var(--blue); background: var(--blue-50); }
.pick__logo { width: 116px; height: 116px; border-radius: 26px; flex: none; }
.pick__logo img { width: 46%; height: 46%; }
.pick__body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.pick__body > b { font-size: 20px; letter-spacing: -0.02em; }
.pick__meta { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); }
.pick__meta i { font-style: normal; font-size: 14px; width: 18px; text-align: center; opacity: .8; }
.pick__meta--amt { color: var(--blue); font-weight: 600; }
.pick__box { position: absolute; right: 18px; top: 18px; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line-strong); background: #fff; transition: border-color 150ms ease-out, background-color 150ms ease-out; }
.pick.is-on .pick__box { border-color: var(--blue); background: var(--blue); }
.pick.is-on .pick__box::after { content: ""; position: absolute; left: 8px; top: 3px; width: 6px; height: 12px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@media (max-width: 560px) { .pick { padding: 14px; gap: 14px; } .pick__logo { width: 84px; height: 84px; border-radius: 20px; } .pick__body > b { font-size: 17px; } .pick__meta { font-size: 13.5px; } }
.sumbar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sumbar__meta { display: flex; flex-direction: column; }
.sumbar__meta small { font-size: 15px; color: var(--ink-2); }
.sumbar__meta b { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--blue); font-variant-numeric: tabular-nums; }
.sumbar__btn { min-width: 160px; }
.sumbar--two > .btn { flex: 1; }
.ob__foot .btn:disabled { opacity: 1; background: var(--blue-100); border-color: var(--blue-100); color: #fff; }
.ob__foot .btn--ghost:disabled { background: transparent; color: var(--ink-4); border-color: var(--line); }

/* details */
.chips small { display: block; font-size: 15px; color: var(--ink-2); margin-bottom: 8px; }
.chips > div { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 12px; border: 1px solid var(--line-strong); font-size: 14px; font-weight: 500; }
.chip__logo { width: 22px; height: 22px; border-radius: 6px; }
.dform { display: flex; flex-direction: column; gap: 8px; padding-bottom: 20px; }
.dform__h { font-size: 22px; font-weight: 700; margin: 8px 0 6px; }
.dform__label { font-size: 15.5px; font-weight: 600; margin-top: 8px; }
.dform__label i { color: var(--red); font-style: normal; }
.ob__control--line { background: #fff; border-color: var(--line-strong); }

/* per-claim */
.cbar { height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; margin-bottom: 14px; }
.cbar i { display: block; height: 100%; background: var(--blue); border-radius: 3px; transition: width 500ms var(--ease-smooth-out); }
.cq { display: flex; flex-direction: column; gap: 26px; padding: 6px 0 20px; }
.cq__item p { font-size: 17px; line-height: 1.45; margin-bottom: 12px; }
.cq__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cq__opt { padding: 16px; border-radius: 12px; border: 1.5px solid var(--blue-100); background: #f3f7ff; color: var(--blue); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, transform 120ms var(--ease-smooth-out); }
.cq__opt:hover { border-color: var(--blue); }
.cq__opt:active { transform: scale(.98); }
.cq__opt.is-picked { background: var(--blue); border-color: var(--blue); color: #fff; }
.cq__noproof { font-size: 22px; font-weight: 600; }

/* paywall */
.ob__page--pay { padding-top: 0; }
.ob[data-kind="paywall"] .ob__top { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.pay { display: flex; flex-direction: column; gap: 22px; padding: 26px 0 40px; }
.pay__head { text-align: center; }
.pay__head .ob__lede { margin: 10px auto 0; }
.pay__center { text-align: center; margin: 22px auto 0; }
.pay__art { position: relative; height: 470px; border-radius: 26px; overflow: hidden; background: var(--blue); }
.pay__burst { position: absolute; inset: -60%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .12) 0 8deg, transparent 8deg 16deg); animation: spin 90s linear infinite; }
/* a real-looking device: dark frame with a highlight edge, dynamic-island notch, the screen fades into the blue at the bottom */
.pay__device { position: absolute; left: 50%; top: 44px; translate: -50% 0; width: min(88%, 400px); height: calc(100% - 44px); padding: 10px 10px 0; border-radius: 46px 46px 0 0; background: #0b0f1a; box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .6), inset 0 0 0 2px #2b3342, inset 0 2px 0 rgba(255, 255, 255, .14); }
.pay__notch { position: absolute; left: 50%; top: 20px; translate: -50% 0; width: 96px; height: 26px; border-radius: 999px; background: #0b0f1a; z-index: 3; }
.pay__phone { position: relative; width: 100%; height: 100%; padding: 50px 12px 0; border-radius: 38px 38px 0 0; background: linear-gradient(#ffffff, #f4f6fb); display: flex; flex-direction: column; gap: 10px; overflow: visible; }   /* visible so the lifted first row can pop past the bezel instead of being clipped; .pay__art still clips the bottom */
.pay__phone .ob__row--big { z-index: 4; }
.pay__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; background: linear-gradient(rgba(0, 81, 255, 0), var(--blue) 88%); pointer-events: none; z-index: 2; }
.pay__phone-head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 4px; }
.pay__phone-head b { font-size: 24px; letter-spacing: -0.02em; }
.pay__phone-head small { align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.pay__phone .ob__row { padding: 10px 12px; }
.pay__phone .ob__row .ptile { width: 34px; height: 34px; border-radius: 10px; }
.pay__amt { font-size: 20px; font-weight: 800; color: var(--blue); letter-spacing: -0.02em; min-width: 62px; }
.ob__row--big { position: relative; left: -28px; width: calc(100% + 56px); box-shadow: var(--shadow-lg); rotate: -2deg; z-index: 2; }
.ob__row--big .ob__row-btn { font-size: 15px; padding: 10px 18px; }
@media (max-width: 560px) {
  .pay__art { height: 440px; }
  .pay__device { width: min(94%, 400px); top: 36px; height: calc(100% - 36px); padding: 8px 8px 0; }
  .pay__phone { padding: 44px 8px 0; gap: 8px; }
  .pay__phone .ob__row { padding: 8px 10px; gap: 7px; border-radius: 14px; }
  .pay__phone .ob__row-meta { overflow: hidden; }
  .pay__phone .ob__row-meta small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .pay__phone .ob__row .ptile { width: 30px; height: 30px; border-radius: 9px; }
  .pay__amt { font-size: 15px; min-width: 0; }
  .pay__phone .ob__row-meta b { font-size: 14px; white-space: nowrap; }
  .pay__phone .ob__row-meta b .ob__chip { display: none; }   /* no room for the proof chip at this width */
  .pay__phone .ob__row-meta small { font-size: 12px; white-space: nowrap; }
  .ob__row--big { left: -14px; width: calc(100% + 28px); }
  .ob__row--big .ob__row-btn, .pay__phone .ob__row-btn { font-size: 13px; padding: 8px 13px 9px; }
}
.pay__feats { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pay__feats li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--bg-2); font-size: 15.5px; color: var(--ink-2); }
.pay__ic { flex: none; width: 46px; height: 46px; border-radius: 12px; background: #0d1220; display: grid; place-items: center; font-size: 20px; }
/* paywall header row: logo left, 5-minute offer pill right (alarm, label, tabular time box) */
.pay__bar { display: none; flex: 1; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.ob[data-kind="paywall"] .pay__bar { display: flex; }
.ob[data-kind="paywall"] .ob__phases, .ob[data-kind="paywall"] .ob__count, .ob[data-kind="paywall"] .ob__skip { display: none; }
.pay__logo { height: 28px; width: auto; flex: none; }
.pay__pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; border-radius: 999px; background: #fff3c4; color: #1c1a12; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; box-shadow: 0 10px 22px -16px rgba(120, 80, 0, .7); }
.pay__pill-ic { font-size: 20px; line-height: 1; transform-origin: 50% 30%; animation: pill-ring 2.6s ease-in-out infinite; }
.pay__pill-txt--short { display: none; }
.pay__pill-time { display: inline-block; padding: 7px 12px; border-radius: 12px; background: #ffd633; color: #1c1a12; font-size: 17px; font-weight: 900; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; transition: background-color 300ms ease-out, color 300ms ease-out; }
.pay__bar.is-urgent .pay__pill-time { background: #ff5a3c; color: #fff; }
.pay__bar.is-over .pay__pill { background: var(--bg-2); color: var(--ink-3); box-shadow: none; }
.pay__bar.is-over .pay__pill-ic { animation: none; opacity: .6; }
@keyframes pill-ring { 0%, 68%, 100% { rotate: 0deg; } 72% { rotate: -14deg; } 76% { rotate: 12deg; } 80% { rotate: -10deg; } 84% { rotate: 8deg; } 88% { rotate: -4deg; } }
/* offer perks under the plan features */
.price .pay__perks { margin: 30px 0 0; padding: 20px 0 0; list-style: none; text-align: left; display: flex; flex-direction: column; gap: 10px; border-top: 1px dashed var(--line-strong); }
.price .pay__perks li { position: relative; padding-left: 32px; font-size: 14.5px; color: var(--ink-2); }
.price .pay__perks li::before { content: ""; position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%; background: #111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3.5 3.5L15 7' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.price .pay__perks .pay__perk--sale { color: #c8102e; font-weight: 800; }
@media (max-width: 640px) { .pay__pill-txt--long { display: none; } .pay__pill-txt--short { display: inline; } }
@media (max-width: 480px) { .pay__pill { font-size: 14px; gap: 6px; padding: 4px 5px 4px 10px; } .pay__pill-ic { font-size: 18px; } .pay__pill-time { font-size: 15px; padding: 6px 10px; } .pay__logo { height: 24px; } }
@media (max-width: 400px) { .pay__pill-txt { display: none; } .pay__bar.is-over .pay__pill-txt { display: inline; } }
@media (prefers-reduced-motion: reduce) { .pay__pill-ic { animation: none; } }
.pay__trust { text-align: center; margin-top: 30px; }
.pay__trust + .price { margin-top: 34px; }
.pay__trust .ob__lede { margin: 12px auto 0; }
.pay__trust b { color: var(--ink); }
.price { position: relative; margin-top: 30px; padding: 40px 28px 28px; border-radius: 22px; border: 1.5px solid var(--line-strong); text-align: center; }
.price__off { --c: var(--blue); position: absolute; top: -19px; left: 50%; translate: -50% 0; white-space: nowrap; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; padding: 9px 20px; border-radius: 999px; background: var(--chip-solid); box-shadow: var(--chip-solid-shadow); text-shadow: 0 1px 0 rgba(0,0,0,.18); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .01em; text-transform:none; }
.price h3 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.price p { margin-top: 4px; font-size: 17px; color: var(--ink-3); }
.price ul { margin: 22px 0 0; padding: 0; list-style: none; text-align: left; display: flex; flex-direction: column; gap: 14px; }
.price li { position: relative; padding-left: 40px; font-size: 16.5px; }
.price li::before { content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3.5 3.5L15 7' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px; font-size: 16.5px; cursor: pointer; }
.tog { position: relative; display: inline-flex; align-items: center; width: 78px; height: 36px; flex: none; }
.tog input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tog i { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background-color 200ms ease-out; }
.tog b { position: absolute; left: 12px; color: #fff; font-size: 12px; font-weight: 800; text-transform:none; opacity: 0; transition: opacity 200ms ease-out; }
.tog i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: translate 350ms cubic-bezier(0.34, 1.35, 0.64, 1); }
.tog input:checked ~ i { background: var(--blue); }
.tog input:checked ~ i::after { translate: 42px 0; }
.tog input:checked ~ b { opacity: 1; }
.pay__cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.paycard { width: 62px; height: 40px; border-radius: 7px; box-shadow: 0 6px 14px -8px rgba(10, 20, 60, .45); }
.pay__terms { margin: 14px auto 0; max-width: 620px; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); text-align: center; text-wrap: balance; }
.pay__terms a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pay__terms a:hover { color: var(--ink-2); }
.pay__terms b { color: var(--ink-2); }
.btn.btn--upper, .btn.btn--upper .btn__label { text-transform: uppercase !important; letter-spacing: .05em; }
/* guarantee card */
.pay__gcard { margin-top: 12px; padding: 40px 28px 34px; border-radius: 28px; background: var(--blue); color: #fff; text-align: center; box-shadow: var(--shadow-blue); }
.pay__gshield { width: 78px; height: 78px; margin: 0 auto 18px; border-radius: 50%; background: #fff; color: #0d1220; display: grid; place-items: center; }
.pay__gshield svg { width: 40px; height: 40px; }
.pay__gcard h3 { font-size: clamp(24px, 4.6vw, 32px); font-weight: 800; letter-spacing: -0.02em; }
.pay__gcard p { margin: 14px auto 0; max-width: 520px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.pay__glinks { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; font-size: 16px; font-weight: 600; }
.pay__glinks a { color: #fff; text-decoration: none; }
.pay__glinks span { width: 1px; height: 22px; background: rgba(255, 255, 255, .45); }
.cq__noproof-sub { margin-top: 8px; font-size: 14px; color: var(--ink-3); text-align: center; max-width: 320px; margin-left: auto; margin-right: auto; }
.pay__badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.badge3 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; color: inherit; }
.badge3__ic { width: 48px; height: 48px; border-radius: 12px; background: #2b3441; color: #fff; display: grid; place-items: center; margin-bottom: 8px; transition: transform 250ms var(--ease-bounce), background-color 150ms ease-out; }
.badge3__ic svg { width: 24px; height: 24px; }
.badge3 b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.badge3 small { font-size: 15px; color: var(--ink-3); }
a.badge3:hover .badge3__ic { transform: translateY(-3px); background: var(--blue); }
@media (max-width: 480px) { .badge3 b { font-size: 14.5px; } .badge3 small { font-size: 12.5px; } .badge3__ic { width: 42px; height: 42px; } }
.pay__reviews { display: flex; flex-direction: column; gap: 14px; }
.prev { padding: 24px; border-radius: 20px; border: 1.5px solid var(--line); background: #fafbfd; }
.prev b { display: block; font-size: 20px; letter-spacing: -0.02em; }
.prev small { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-3); }
.prev__stars { display: flex; gap: 3px; margin-top: 10px; }
.prev__stars i { width: 22px; height: 22px; border-radius: 4px; background: #00b67a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2.5l2.9 6.2 6.8.8-5 4.7 1.3 6.8L12 17.7 6 21l1.3-6.8-5-4.7 6.8-.8z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.prev p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.pay__faq { max-width: none; }
.pay__faq .faq__item { border: 1.5px solid var(--line); border-radius: 16px; padding: 0 18px; margin-bottom: 10px; }
.pay__faq .faq__head { font-size: 17px; font-weight: 600; }
.pay__foot { text-align: center; font-size: 14px; color: var(--ink-3); margin-top: 20px; }
.pay__foot a:hover { color: var(--blue); }
@keyframes spin { to { rotate: 360deg; } }

/* dev helpers */
.ob__dev { align-self: center; margin: 6px auto 0; padding: 6px 12px; border-radius: 999px; border: 1.5px dashed var(--line-strong); background: transparent; color: var(--ink-3); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: color 150ms ease-out, border-color 150ms ease-out; }
.ob__dev:hover { color: var(--blue); border-color: var(--blue); }

/* flipping card loader (calculating step) */
.flip { position: relative; width: 104px; height: 104px; margin-bottom: 14px; perspective: 900px; }
.flip__shadow { position: absolute; left: 14px; right: 14px; bottom: -14px; height: 14px; border-radius: 50%; background: rgba(0, 40, 120, .22); filter: blur(6px); animation: flip-shadow 2.4s ease-in-out infinite; }
.flip__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: flip-card 2.4s cubic-bezier(.65, -.15, .35, 1.15) infinite; }
.flip__face { position: absolute; inset: 0; border-radius: 26px; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip__face img { width: 44px; height: auto; }
.flip__face--front { background: #fff; border: 1.5px solid var(--line); box-shadow: 0 16px 34px -18px rgba(0, 20, 90, .35); }
.flip__face--back { background: linear-gradient(160deg, #3d7bff, var(--blue) 55%, #0038c9); transform: rotateY(180deg); box-shadow: 0 16px 34px -18px rgba(0, 20, 90, .5); }
@keyframes flip-card {
  0%   { transform: rotateY(0) translateY(0) scale(1); }
  10%  { transform: rotateY(0) translateY(0) scale(1); }
  40%  { transform: rotateY(180deg) translateY(-14px) scale(1.06); }
  55%  { transform: rotateY(180deg) translateY(0) scale(1); }
  60%  { transform: rotateY(180deg) translateY(0) scale(1); }
  90%  { transform: rotateY(360deg) translateY(-14px) scale(1.06); }
  100% { transform: rotateY(360deg) translateY(0) scale(1); }
}
@keyframes flip-shadow { 0%, 10%, 55%, 60%, 100% { transform: scaleX(1); opacity: 1; } 40%, 90% { transform: scaleX(.7); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .flip__inner, .flip__shadow { animation: none !important; } }

/* "$" particles flying into the total */
.dollar { position: fixed; z-index: 500; margin: -14px 0 0 -8px; font-size: 24px; font-weight: 800; color: var(--blue); pointer-events: none; will-change: transform, opacity; text-shadow: 0 2px 8px rgba(0, 81, 255, .25); }
.dollar:nth-child(odd) { color: #12a150; }

/* ---------- login ---------- */
.ob__top--center { justify-content: center; padding-top: 30px; }
.lg { justify-content: flex-start; padding-top: clamp(40px, 12vh, 140px); align-items: center; text-align: center; }
.lg__title { font-size: clamp(44px, 8vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 40px; }
.lg__stack { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.lg__google { --pill-outline-border: var(--line-strong); --pill-outline-fg: var(--ink); --pill-outline-bg-hover: var(--bg-2); --pill-outline-fg-hover: var(--ink); gap: 12px; }
.lg__google svg { width: 22px; height: 22px; }
.lg__or { position: relative; width: 100%; text-align: center; color: var(--ink-3); font-size: 15px; margin: 4px 0; }
.lg__or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.lg__or span { position: relative; padding: 0 16px; background: #fff; }
.lg__text { border: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 600; color: var(--ink); cursor: pointer; padding: 10px; }
.lg__text:hover { color: var(--blue); }
.lg__foot { margin-top: 28px; font-size: 15px; color: var(--ink-3); }
.lg__foot a { color: var(--blue); font-weight: 600; }
.lg__h { margin-bottom: 8px; }
.lg__sub { margin: -4px auto 24px; text-align: center; }
.lg .ob__form { max-width: 640px; }
.lg__back { position: absolute; left: 24px; top: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background-color 150ms ease-out; }
.lg__back svg { width: 26px; height: 26px; }
.lg__back:hover { background: var(--bg-2); }
.lg { position: absolute; }
@media (max-width: 560px) { .lg { padding-top: 40px; } .lg__back { left: 8px; top: 0; } }

/* ---------- phone-mockup rows: never let the chip collide with the Claim button ----------
   The mockup screens are ~250–380px wide at every viewport, so this is scoped to the mockups
   (value-prop .ob__phone-screen, paywall .pay__phone, popped row) rather than a media query. */
.ob__phone-screen .ob__row, .pay__phone .ob__row, .ob__row--pop { gap: 9px; }
.ob__phone-screen .ob__row-btn, .pay__phone .ob__row-btn, .ob__row--pop .ob__row-btn { flex: none; }
.ob__phone-screen .ob__row-meta, .pay__phone .ob__row-meta, .ob__row--pop .ob__row-meta { overflow: hidden; }
.ob__phone-screen .ob__row-meta b, .pay__phone .ob__row-meta b, .ob__row--pop .ob__row-meta b { flex-wrap: wrap; row-gap: 3px; font-size: 14px; min-width: 0; }
.ob__phone-screen .ob__row-meta small, .pay__phone .ob__row-meta small, .ob__row--pop .ob__row-meta small { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob__phone-screen .ob__chip, .pay__phone .ob__chip, .ob__row--pop .ob__chip { font-size: 9.5px; padding: 2px 7px 2px 4px; gap: 4px; }
.ob__phone-screen .ob__chip::before, .pay__phone .ob__chip::before, .ob__row--pop .ob__chip::before { width: 12px; height: 12px; background-size: 8px, 100%; }
.ob__phone-screen .ob__row .ptile { flex: none; }
@media (max-width: 340px) {
  .ob__phone-screen .ob__chip, .pay__phone .ob__chip, .ob__row--pop .ob__chip { display: none; }   /* tightest phones: amount + due date only */
  .ob__phone-screen .ob__row-btn, .pay__phone .ob__row-btn { font-size: 12px; padding: 7px 11px 8px; }
}

/* Embedded Stripe Checkout on the paywall */
.ob__checkout { margin-top: 14px; min-height: 560px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--shadow-md); }
.ob__checkout iframe { display: block; }
.ob__checkout-back { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--ink-3); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ob__checkout-back:hover { color: var(--blue); }

/* Custom checkout card (Stripe Elements inside our own UI) */
.ck { margin-top: 14px; padding: 18px 16px 16px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.ck__express { min-height: 0; }
.ck__or { display: flex; align-items: center; gap: 12px; margin: 14px 0 12px; color: var(--ink-3); font-size: 13px; font-weight: 600; }
.ck__or::before, .ck__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ck__payment { margin-bottom: 4px; }
.ck__address { margin-top: 6px; }
.ck__email { margin-top: 10px; }
.ck__email label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.ck__input { width: 100%; font: inherit; font-size: 16px; padding: 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; }
.ck__input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-50); }
.ck__pay { margin-top: 16px; }
.ck__pay:disabled { opacity: .55; }
.ck__fine { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

/* checkout card: Claim-style width, skeleton → form */
.ck { max-width: 560px; margin-left: auto; margin-right: auto; position: relative; }
.ck__form { opacity: 0; transition: opacity 320ms ease-out; }
.ck.is-ready .ck__form { opacity: 1; }
.ck__skel { display: grid; gap: 14px; }
.ck.is-ready .ck__skel { display: none; }
.ck__skel-bar { display: block; height: 52px; border-radius: 12px; background: linear-gradient(90deg, #eef0f5 0%, #f7f8fb 45%, #eef0f5 90%); background-size: 200% 100%; animation: ckShimmer 1.3s linear infinite; }
.ck__skel-bar--btn { height: 56px; border-radius: 999px; }
.ck__skel-bar--row { height: 108px; }
@keyframes ckShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ck__payment { margin-top: 2px; }
.ck__address { margin-top: 12px; }
.ck__fine { font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .ck__skel-bar { animation: none; } .ck__form { transition: none; } }
.ck__mandate { margin: 10px 0 2px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }

/* optional claim details on the details step */
.dform__opt { margin: 18px 0 6px; padding: 12px 14px; border-radius: 14px; background: var(--blue-50, #eef3ff); color: var(--blue-700, #0037b8); font-size: 13.5px; line-height: 1.45; }
.dform__row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.dform__row > div { min-width: 0; }

/* account step: Google button, divider, password reveal */
.ob__google { justify-content: center; gap: 10px; margin-bottom: 4px; background: #fff; border: 1.5px solid var(--line-strong); color: var(--ink); }
.ob__google:hover { border-color: var(--blue); background: #fff; color: var(--ink); }
.ob__or { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; color: var(--ink-3); font-size: 13.5px; }
.ob__or::before, .ob__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ob__eye { flex: none; margin-left: 8px; border: 0; background: none; padding: 0 4px; font: inherit; font-size: 13px; font-weight: 700; color: var(--blue); cursor: pointer; }

/* narrow phones: tighter chrome, everything single-line */
@media (max-width: 380px) {
  .ob__top { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .ob__phases { gap: 6px; }
  .ob__phase b { font-size: 9px; letter-spacing: .02em; }
  .ob__count { padding: 7px 10px; font-size: 11.5px; }
}
/* short phones: shrink art and type until Yes / No / Prefer all fit without scrolling */
@media (max-height: 700px) {
  .q__art { min-height: 0; }
  .q__logo { width: min(50vw, 26vh); border-radius: 26px; }
  .q__title { font-size: clamp(20px, 6vw, 26px); }
  .q__brand { display: none; }
  .ob__page { gap: 12px; }
  .q__opts { gap: 8px; }
  .q__opt { padding: 13px 16px; }
}

.pay__anchor, .price p.pay__anchor { margin: 24px 0 0; padding-top: 14px; border-top: 1px dashed var(--line, #e5e8ef); font-size: 13.5px; color: var(--ink-2, #454b58); }
.pay__deadline { margin: 14px 0 10px; padding: 10px 14px; border-radius: 12px; background: #fff4d6; color: #9a5b00; font-size: 13.5px; text-align: center; }
.pay__guarantee { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3, #737a8a); text-align: center; }
.pay__guarantee a { color: inherit; text-decoration: underline; }

/* paywall: crossed-out anchor price + countdown inside the price card */
.price__was { color: var(--ink-3); font-weight: 600; margin-right: 8px; text-decoration-thickness: 2.5px; text-decoration-color: #e5484d; }
.pay__deadline--in { margin: 16px 0 0; }

/* paywall CTA: light streak sweeps across on hover */
#payStart { position: relative; overflow: hidden; --pill-solid-bg-hover: var(--blue); --pill-solid-fg-hover: #fff; }   /* stay solid blue on hover — the shine is the only effect */
#payStart::after { content: ""; position: absolute; top: -25%; bottom: -25%; left: -80%; width: 55%; transform: skewX(-22deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 100%); pointer-events: none; }
#payStart:hover::after { animation: payshine 700ms ease-out; }
@keyframes payshine { from { left: -80%; } to { left: 130%; } }
@media (prefers-reduced-motion: reduce) { #payStart:hover::after { animation: none; } }

/* plan picker (js/plans.js): 1 / 3 / 6-month cards, one selected */
.plans { text-align: left; }
.plans__h { margin: 0; text-align: center; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.plans__sub { margin: 8px 0 6px; text-align: center; color: var(--ink-3, #737a8a); font-size: 16px; }
.plan { display: block; width: 100%; margin-top: 14px; padding: 20px 22px 18px; border-radius: 18px; border: 1.5px solid var(--line-strong, #d3d8e3); background: #fff; text-align: left; color: var(--ink, #121212); font: inherit; cursor: pointer; position: relative; transition: border-color 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out; }
.plan:hover { border-color: var(--ink-4, #a2a8b6); }
.plan.is-on { border-color: var(--blue, #0051ff); box-shadow: 0 0 0 3px var(--blue-50, #eef3ff); background: linear-gradient(180deg, #fff, var(--blue-50, #eef3ff)); }
.plan__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan__name { font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2, #454b58); }
.plan__badge { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: var(--blue, #0051ff); white-space: nowrap; }
.plan__badge--hot { background: #f0803c; }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.plan__price b { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.plan.is-on .plan__price b { color: var(--blue, #0051ff); }
.plan__price small { font-size: 18px; color: var(--ink-2, #454b58); }
.plan__price s { font-size: 18px; color: var(--ink-4, #a2a8b6); }
.plan__meta { display: block; margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-3, #737a8a); }
.plan__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 12px; }
.plan__notes { display: flex; flex-direction: column; gap: 6px; }
.plan__notes i { position: relative; padding-left: 22px; font-style: normal; font-size: 14.5px; color: var(--ink-2, #454b58); }
.plan__notes i::before { content: ""; position: absolute; left: 1px; top: 5px; width: 11px; height: 6px; border-left: 2.2px solid #0b7a3b; border-bottom: 2.2px solid #0b7a3b; transform: rotate(-45deg); }
.plan__promo { flex: none; padding: 7px 14px; border-radius: 999px; border: 1.5px solid #0b7a3b; color: #0b7a3b; font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.pay__plans { margin-top: 26px; }
.pw__plans { margin-top: 14px; padding: 6px 14px 14px; border-radius: 24px; background: #fff; color: var(--ink, #121212); text-align: left; }
@media (max-width: 420px) { .plan { padding: 16px 16px 14px; } .plan__price b { font-size: 34px; } .plan__foot { flex-direction: column; align-items: flex-start; } }

/* paywall hero (shared look with the in-app paywall): phone with the visitor's claims, brand bubbles drifting around it */
.pay__art--hero { height: 470px; }
.pay__art--hero .pw__hero { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; margin: 0 auto; max-width: 460px; height: auto; }
.pw__hero { position: relative; height: 380px; margin: 26px auto 0; max-width: 460px; overflow: hidden; }
.pw__device { position: absolute; left: 50%; top: 0; translate: -50% 0; width: min(86%, 340px); height: 100%; padding: 9px 9px 0; border-radius: 42px 42px 0 0; background: #0b0f1a; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
.pw__stage { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(#000 52%, rgba(0, 0, 0, .55) 74%, transparent 97%); mask-image: linear-gradient(#000 52%, rgba(0, 0, 0, .55) 74%, transparent 97%); }
.pw__notch { position: absolute; left: 50%; top: 18px; translate: -50% 0; width: 84px; height: 24px; border-radius: 999px; background: #0b0f1a; z-index: 3; }
.pw__phone { position: relative; width: 100%; height: 100%; padding: 42px 8px 0; border-radius: 34px 34px 0 0; background: linear-gradient(#fff, #f6f8fc); color: var(--ink, #121212); display: flex; flex-direction: column; gap: 8px; }
.pw__phone-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.pw__avatar { position: absolute; left: 16px; top: 44px; width: 28px; height: 28px; border-radius: 50%; background: var(--blue, #0051ff); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.pw__phone .ob__row { padding: 8px 8px; gap: 8px; animation: pw-row 600ms cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--d, 0s) + .2s); }
.pw__phone .ob__row .ptile { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.pw__amt { font-size: 16px; font-weight: 800; color: var(--blue, #0051ff); letter-spacing: -0.02em; flex: none; }
.pw__phone .ob__row-meta { min-width: 0; flex: 1; }
.pw__phone .ob__row-meta b { display: flex; width: 100%; font-size: 12.5px; gap: 7px; white-space: nowrap; min-width: 0; flex-wrap: nowrap; }
.pw__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pw__phone .ob__row-meta .ob__chip { flex: none; font-size: 9.5px; padding: 2px 6px 2px 5px; }
.pw__phone .ob__row-meta small { font-size: 11.5px; white-space: nowrap; }
.pw__phone .pw__sub { display: flex; align-items: center; gap: 4px; margin-top: 3px; width: 100%; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--ink-2, #454b58); }
.pw__phone .pw__sub .pw__name { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pw__phone .pw__sub .pw__due { flex: none; color: var(--ink-3, #6b7280); font-weight: 500; }
.pw__phone .ob__row-btn { padding: 5px 10px 6px; font-size: 12px; flex: none; }
.pw__phone .ob__row--big { position: relative; z-index: 4; left: -20px; width: calc(100% + 40px); box-shadow: 0 22px 40px -18px rgba(10, 20, 60, .5); }
@keyframes pw-row { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
.pw__float { position: absolute; z-index: 6; width: 72px; height: 72px; border-radius: 50%; background: #fff; box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .55); display: grid; place-items: center; animation: pw-float 6s ease-in-out infinite; }
.pw__ftile { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--c); }
.pw__ftile .ptile__img { width: 52%; height: 52%; object-fit: contain; }
.pw__ftile.ptile--photo .ptile__img { width: 100%; height: 100%; object-fit: cover; }
.pw__float--1 { left: 4%; bottom: 84px; animation-delay: -1s; }
.pw__float--2 { left: 22%; bottom: 8px; animation-delay: -2.5s; }
.pw__float--3 { right: 4%; bottom: 84px; animation-delay: -4s; }
.pw__float--4 { right: 22%; bottom: 8px; animation-delay: -.5s; }
.pw__float--5 { left: 50%; bottom: 26px; translate: -50% 0; width: 84px; height: 84px; animation-delay: -3s; }
@keyframes pw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 480px) { .pay__art--hero { height: 400px; } .pay__art--hero .pw__hero { top: 30px; } .pw__float { width: 60px; height: 60px; } .pw__float--5 { width: 70px; height: 70px; } }
@media (max-width: 360px) { .pw__device { width: 92%; } .pw__phone .ob__row-meta .ob__chip { display: none; } }
@media (prefers-reduced-motion: reduce) { .pw__float, .pw__phone .ob__row { animation: none !important; opacity: 1; } }

/* Whop embedded checkout inside our checkout box: Whop's card fields, our name/address, our Pay button */
.ck__whopbox { min-height: 120px; }
.ck__whopbox iframe { display: block; width: 100%; }
.ck__fields { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 16px; }
.ck__field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink, #121212); }
.ck__field .ck__input { width: 100%; box-sizing: border-box; font-weight: 400; font-size: 16px; padding: 14px; border: 1.5px solid #d3d8e3; border-radius: 12px; background: #fff; color: var(--ink, #121212); font-family: inherit; }
.ck__field select.ck__input { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%23454b58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; padding-right: 40px; }
.ck__row3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
@media (max-width: 400px) { .ck__row3 { grid-template-columns: 1fr 1fr; } .ck__row3 .ck__field:first-child { grid-column: 1 / -1; } }
.ck__hosted { margin-top: 12px; }

/* the page container takes focus on every step (screen readers); Chrome's keyboard focus ring drew a blue line under the header */
.ob__page:focus, .ob__page:focus-visible, .t-page:focus, .t-page:focus-visible, .ob__pages:focus { outline: none; box-shadow: none; }
/* explicit layering in the paywall art: rays at the back, phone + bubbles in front (GPU compositing otherwise reordered them) */
.pay__art--hero { isolation: isolate; }
.pay__art--hero .pay__burst { z-index: 0; }
.pay__art--hero .pw__hero { z-index: 1; }

/* staged checkout: the card form is built while the paywall is read, collapsed until the tap, then sweeps open */
.ck--staged { height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; opacity: 0; pointer-events: none; }
.ck--opening { overflow: hidden; }

/* account step: continue as a guest (the account is created from the checkout email after payment) */
.ob__guest { margin-top: 2px; padding: 8px 12px; background: none; border: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink-3); cursor: pointer; border-radius: 10px; }
.ob__guest:hover { color: var(--ink); }
.ob__guest:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }