/* Set up: Per Push's onboarding pages (cream #FEFAF5, ink #1C1108, accent #D94F0A, 24-pt margins). */
.so { background: #fefaf5; color: #1c1108; }
.so-sb { position: absolute; left: 0; top: 0; width: 393px; color: #1c1108; z-index: 3; }
.so-prog { position: absolute; left: 0; top: 56px; width: 393px; height: 3px; background: #edd8c8; z-index: 3; }
.so-prog i { position: absolute; inset: 0; background: #d94f0a; transform-origin: 0 50%; transform: scaleX(0.6); }
.so-back { position: absolute; left: 24px; top: 71px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); font-size: 13px; z-index: 3; }
.so-page { position: absolute; inset: 0; visibility: hidden; }
.so-h { position: absolute; left: 24px; top: 122px; width: 345px; text-align: center; font-size: 28px; font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; }
.so-sub { position: absolute; left: 24px; top: 196px; width: 345px; text-align: center; font-size: 16px; line-height: 1.38; color: #a07858; }
.so-cta { position: absolute; left: 24px; top: 792px; width: 345px; height: 58px; border-radius: 29px; display: grid; place-items: center; font-size: 17px; font-weight: 700; color: #fff; background: #d94f0a; --on: 1; }
.so-apps .so-cta { background: color-mix(in srgb, #d94f0a calc(var(--on) * 100%), rgba(217, 79, 10, 0.12)); }
.so-cta span { grid-area: 1 / 1; }
.so-c0 { color: #a07858; }

/* Apple's Screen Time picker, inline */
.so-picker { position: absolute; left: 0; top: 0; width: 393px; height: 772px; }
.so-search { position: absolute; left: 16px; top: 290px; width: 361px; height: 36px; border-radius: 10px; display: flex; align-items: center; gap: 6px; padding: 0 9px; background: rgba(118, 118, 128, 0.12); color: rgba(60, 60, 67, 0.6); font-size: 17px; }
.so-search .sy { font-size: 16px; }
.so-list { position: absolute; left: 16px; top: 334px; width: 361px; height: 444px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 0.5px rgba(60, 60, 67, 0.1); }
.so-row { position: absolute; left: 0; top: 0; width: 361px; height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 16px; font-size: 16px; box-shadow: inset 0 -0.5px 0 rgba(60, 60, 67, 0.16); background: #fff; --ck: 0; }
.so-row span { flex: 1; white-space: nowrap; }
.so-kid { padding-left: 32px; }
.so-ck { position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(60, 60, 67, 0.3); color: #fff; background: rgba(217, 79, 10, var(--ck)); }
.so-ck .sy { position: absolute; left: 3px; top: 3px; font-size: 16px; opacity: var(--ck); transform: scale(calc(0.5 + var(--ck) * 0.5)); }
.so-cg { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-size: 17px; flex: none; }
.so-at { width: 30px; height: 30px; border-radius: 7px; flex: none; }
.so-chev { color: rgba(60, 60, 67, 0.3); font-size: 13px; }

/* the daily budget, and Hardcore mode */
.so-bt { position: absolute; left: 24px; top: 124px; width: 345px; text-align: center; font-size: 28px; font-weight: 700; line-height: 1.3; }
.so-pill { display: inline-block; padding: 1px 11px 3px; border-radius: 99px; font-style: normal; font-size: 26px; color: #fff; background: #d94f0a; }
.so-val { position: absolute; left: 0; right: 0; top: 244px; text-align: center; font-size: 56px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: #d94f0a; }
.so-slider { position: absolute; left: 24px; top: 344px; width: 345px; height: 50px; }
.so-trk { position: absolute; left: 0; top: 12px; width: 345px; height: 6px; border-radius: 3px; background: #ede6df; overflow: hidden; }
.so-fill { position: absolute; inset: 0; border-radius: 3px; background: #d94f0a; transform-origin: 0 50%; }
.so-knob { position: absolute; left: 0; top: 1px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.04); }
.so-slider p { position: absolute; left: 0; top: 34px; width: 345px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; color: #a07858; }
.so-hard { --on: 0; position: absolute; left: 24px; top: 418px; width: 345px; height: 72px; border-radius: 16px; display: flex; align-items: center; padding: 0 16px; background: color-mix(in srgb, #fff5f5 calc(var(--on) * 100%), #ffffff); box-shadow: inset 0 0 0 1px color-mix(in srgb, rgba(217, 50, 50, 0.55) calc(var(--on) * 100%), rgba(217, 79, 10, 0.1)); }
.so-hard span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.so-hard b { font-size: 16px; font-weight: 700; color: color-mix(in srgb, #d93232 calc(var(--on) * 100%), #1c1108); }
.so-hard small { font-size: 13px; color: #a07858; }
.so-sw { --on: 0; position: relative; width: 51px; height: 31px; border-radius: 16px; background: color-mix(in srgb, #d93232 calc(var(--on) * 100%), #e9e9eb); }
.so-sw i { position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 0 0 0.5px rgba(0, 0, 0, 0.04); transform: translateX(calc(var(--on) * 20px)); }
.so-warn { position: absolute; left: 24px; top: 502px; width: 345px; border-radius: 14px; display: flex; gap: 10px; padding: 12px 14px; background: #ffebeb; opacity: 0; }
.so-warn i { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 700; color: #fff; background: #d93232; }
.so-warn p { font-size: 14px; font-weight: 500; line-height: 1.32; color: #d93232; }

/* fitness calibration: the chosen card fills with the accent */
.so-card { --on: 0; position: absolute; left: 24px; width: 345px; height: 86px; border-radius: calc(20px - var(--on) * 4px); padding: 16px; background: color-mix(in srgb, #d94f0a calc(var(--on) * 100%), rgba(255, 255, 255, 0.5)); box-shadow: inset 0 0 0 1px rgba(217, 79, 10, 0.77), 0 4px 8px rgba(217, 79, 10, 0.1); }
.so-ct { display: flex; align-items: center; gap: 8px; }
.so-ct span { font-size: 16px; }
.so-ct b { flex: 1; font-size: 15px; font-weight: 700; color: color-mix(in srgb, #fff calc(var(--on) * 100%), #1c1108); }
.so-ct em { font-style: normal; font-size: 12px; font-weight: 700; color: #a07858; opacity: calc(1 - var(--on)); }
.so-cd { margin-top: 8px; font-size: 11px; color: #a07858; opacity: calc(1 - var(--on)); }
.so-cr { position: absolute; left: 16px; top: 46px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.82); opacity: var(--on); }
.so-cck { position: absolute; right: 16px; top: 33px; width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: #d94f0a; font-size: 13px; opacity: var(--on); transform: scale(calc(0.6 + var(--on) * 0.4)); }
.so-rate .so-cta { background: color-mix(in srgb, #d94f0a calc(var(--on) * 100%), #f5a882); }

/* you're all set */
.so-seal { position: absolute; left: 166.5px; top: 132px; font-size: 60px; color: #d94f0a; }
.so-set .so-h { top: 214px; }
.so-set .so-sub { top: 258px; }
.so-rows { position: absolute; left: 24px; top: 312px; width: 345px; display: flex; flex-direction: column; gap: 10px; }
.so-sr { --a: 0; height: 60px; border-radius: 16px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: #fff; box-shadow: 0 0 0 1px rgba(217, 79, 10, 0.1); opacity: var(--a); transform: translateY(calc((1 - var(--a)) * 14px)); }
.so-sr i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; color: #d94f0a; background: #fff4ec; }
.so-sr span { flex: 1; font-size: 15px; font-weight: 600; }
.so-sr b { font-size: 15px; font-weight: 700; color: #d94f0a; }