/* SkyBuds entry signup — three steps (email → phone → code), four arms (skybuds-signup.js).
   New file (not part of the vendored Dawn theme); same tokens as
   skybuds-checkout.css. `.sbsu-` = signup. */

/* Hide immediately while the existing cart lifecycle closes an open signup. */
body.sb-drawer-locked .sbsu-root, body.sb-drawer-locked .sbsu-bar,
body:has(cart-drawer.active) .sbsu-root, body:has(cart-drawer.active) .sbsu-bar,
body:has(#sb-payment-page) .sbsu-root:not([data-checkout-signin="true"]), body:has(#sb-payment-page) .sbsu-bar { display: none !important; }

.sbsu-root {
  /* Above the theme's support bubble; the cart overlay (9999) never coexists
     with this — show() bails while it is open. */
  position: fixed; inset: 0; z-index: 2147483646; /* the support fab sits at 2147483642 */
  font-family: var(--skybuds-font, 'Sora', sans-serif);
  color: var(--skybuds-text, #333);
  -webkit-font-smoothing: antialiased;
}
.sbsu-root *, .sbsu-root *::before, .sbsu-root *::after { box-sizing: border-box; }
/* `hidden` must beat the display rules below (the step dots are flex; the
   done screen hides them with the attribute). */
.sbsu-root [hidden] { display: none !important; }

.sbsu-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--skybuds-gray, #f5f5f5); color: var(--skybuds-black, #1a1a1a);
  font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.sbsu-close:hover { background: #e8e8e8; }

.sbsu-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--skybuds-red, #FF6B4A); margin: 0 0 10px;
}
.sbsu-title {
  font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em;
  color: var(--skybuds-black, #1a1a1a); margin: 0 0 10px;
}
.sbsu-title em { font-style: normal; color: var(--skybuds-red, #FF6B4A); }
.sbsu-sub { font-size: 15px; line-height: 1.45; color: var(--skybuds-text-light, #666); margin: 0 0 16px; }
.sbsu-steps { display: flex; gap: 6px; margin: 0 0 14px; }
.sbsu-steps span { width: 22px; height: 5px; border-radius: 999px; background: #ececec; }
.sbsu-steps span.on { background: var(--skybuds-red, #FF6B4A); }

.sbsu-form { display: flex; flex-direction: column; gap: 12px; }
.sbsu-input {
  font-family: inherit; font-weight: 600; font-size: 16px; /* ≥16px: iOS won't zoom */
  min-height: 56px; padding: 0 18px; width: 100%;
  color: var(--skybuds-black, #1a1a1a); background: #fff;
  border: 2px solid #e6e6e6; border-radius: 15px; appearance: none;
}
.sbsu-input::placeholder { color: #8a8a8a; }
.sbsu-input:focus { outline: none; border-color: var(--skybuds-blue, #8acdea); box-shadow: 0 0 0 4px rgba(138, 205, 234, .35); }
.sbsu-cta {
  display: block; width: 100%; border: none; cursor: pointer;
  background: var(--skybuds-red, #FF6B4A); color: #fff;
  font-family: inherit; font-weight: 800; font-size: 16px;
  min-height: 56px; padding: 0 18px; border-radius: 15px;
  transition: background .15s, transform .15s;
}
.sbsu-cta:hover { background: var(--skybuds-red-dark, #E85A3A); }
.sbsu-cta:active { transform: scale(.99); }
.sbsu-cta[disabled] { opacity: .6; cursor: wait; }
.sbsu-err { color: #C43B3B; font-size: 13px; font-weight: 600; margin: 0; }
.sbsu-fine, .sbsu-disclosure { font-size: 11px; line-height: 1.55; color: var(--skybuds-text-light, #666); margin: 0; text-align: left; }
.sbsu-fine a, .sbsu-disclosure a { color: inherit; text-decoration: underline; }
.sbsu-fine a:hover, .sbsu-disclosure a:hover { color: var(--skybuds-red, #FF6B4A); }
/* Turnstile host — invisible ("interaction-only") unless a challenge is needed */
.sbsu-turnstile { display: flex; justify-content: center; }
.sbsu-turnstile:not(:empty) { margin-top: 10px; }

/* verify step: the 6-digit code, a hint line, resend · different number */
.sbsu-input--code { text-align: center; letter-spacing: 8px; font-size: 22px; font-weight: 800; }
.sbsu-input--code::placeholder { letter-spacing: 8px; font-weight: 600; }
.sbsu-hint { font-size: 13px; font-weight: 600; color: var(--skybuds-text-light, #666); margin: 0; text-align: center; }
.sbsu-links { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; color: #bbb; }
.sbsu-link {
  border: none; background: none; cursor: pointer; padding: 6px 2px;
  font-family: inherit; font-weight: 700; font-size: 13px;
  color: var(--skybuds-text-light, #666); text-decoration: underline;
}
.sbsu-link:hover { color: var(--skybuds-red, #FF6B4A); }
.sbsu-link[disabled] { cursor: default; text-decoration: none; opacity: .7; }
.sbsu-done { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
/* ---- the present (done step) — box, lid, three Skybuds popping out ---- */
.sbsu-gift { position: relative; height: 236px; margin: 0 auto; width: 220px; }
.sbsu-box {
  display: block; position: absolute; left: 50px; bottom: 6px; width: 120px; height: 88px; z-index: 2;
  background: linear-gradient(90deg, var(--skybuds-red, #FF6B4A) 0 40%, #FFD166 40% 60%, var(--skybuds-red, #FF6B4A) 60%);
  border-radius: 10px; box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
  animation: sbsu-wiggle .6s ease-in-out 1;
}
.sbsu-lid {
  display: block; position: absolute; left: 40px; bottom: 86px; width: 140px; height: 28px; z-index: 3;
  background: linear-gradient(90deg, #E85A3A 0 40%, #FFD166 40% 60%, #E85A3A 60%);
  border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
  transform-origin: 90% 100%;
  animation: sbsu-wiggle .6s ease-in-out 1, sbsu-lid-off .5s cubic-bezier(.3, 1.4, .5, 1) .6s forwards;
}
.sbsu-bud {
  position: absolute; bottom: 40px; width: 84px; height: 84px; object-fit: contain; z-index: 1;
  transform: translateY(30px) scale(0); opacity: 0;
  animation: sbsu-pop .7s cubic-bezier(.2, 1.5, .4, 1) forwards;
}
.sbsu-bud--1 { left: 8px;  animation-delay: .85s; --sbsu-x: -12px; }
.sbsu-bud--2 { left: 62px; animation-delay: .7s;  --sbsu-x: 0; bottom: 48px; width: 96px; height: 96px; z-index: 1; }
.sbsu-bud--3 { left: 130px; animation-delay: 1s;  --sbsu-x: 12px; }
.sbsu-done .sbsu-code, .sbsu-claim { opacity: 0; animation: sbsu-rise .45s ease-out forwards; }
.sbsu-done .sbsu-code { animation-delay: 1.3s; }
.sbsu-claim { animation-delay: 1.5s; }
@keyframes sbsu-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 75% { transform: rotate(-3deg); } }
@keyframes sbsu-lid-off { to { transform: translate(28px, -70px) rotate(24deg); opacity: 0; } }
@keyframes sbsu-pop { to { transform: translate(var(--sbsu-x, 0), -56px) scale(1); opacity: 1; } }
@keyframes sbsu-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sbsu-box, .sbsu-lid, .sbsu-bud, .sbsu-done .sbsu-code, .sbsu-claim { animation: none; }
  .sbsu-lid { opacity: 0; }
  .sbsu-bud { transform: translate(var(--sbsu-x, 0), -56px) scale(1); opacity: 1; }
  .sbsu-done .sbsu-code, .sbsu-claim { opacity: 1; }
}
.sbsu-code {
  font-weight: 800; font-size: 26px; letter-spacing: 2px; text-align: center;
  color: var(--skybuds-black, #1a1a1a); background: #fdeee6;
  border: 2px dashed var(--skybuds-red, #FF6B4A); border-radius: 16px; padding: 16px;
}
.sbsu-trust { font-size: 12px; font-weight: 600; color: var(--skybuds-text-light, #666); margin: 18px 0 0; }
/* the optional opt-in on the sign-in code step (ships unchecked) */
.sbsu-optin { display: flex; gap: 10px; align-items: flex-start; text-align: left; cursor: pointer; }
.sbsu-optin input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--skybuds-red, #FF6B4A); }
.sbsu-optin-label { display: block; font-size: 14px; font-weight: 700; color: var(--skybuds-black, #1a1a1a); margin-bottom: 4px; }
/* the claim bar */
.sbsu-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483645;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 52px 12px 16px; background: var(--skybuds-black, #1a1a1a); color: #fff;
  font-family: var(--skybuds-font, 'Sora', sans-serif); font-weight: 700; font-size: 15px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .15);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.sbsu-bar-cta {
  border: none; cursor: pointer; font: inherit; font-weight: 800;
  background: var(--skybuds-red, #FF6B4A); color: #fff; border-radius: 999px; padding: 9px 18px;
}
.sbsu-bar-x {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  border: none; background: none; color: #fff; font-size: 22px; cursor: pointer; width: 36px; height: 36px; border-radius: 50%;
}
.sbsu-bar-x:hover { background: rgba(255, 255, 255, .12); }

/* ---- popup layouts (popup_a, popup_b) ---- */
.sbsu-popup {
  background: rgba(26, 26, 26, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow: auto; -webkit-overflow-scrolling: touch;
}
.sbsu-card {
  position: relative; width: 100%; max-width: 440px;
  background: #fff; border-radius: var(--skybuds-radius-lg, 24px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .25);
  padding: 34px 28px 26px; text-align: center;
}
.sbsu-card .sbsu-steps { justify-content: center; }
.sbsu-card:not(.sbsu-card--photo) .sbsu-title { padding: 0 30px; text-wrap: balance; } /* clear the 54px close button */
.sbsu-card--photo {
  max-width: 600px; padding: 0; text-align: left; overflow: hidden;
  display: grid; grid-template-columns: 240px 1fr;
}
.sbsu-card--photo .sbsu-photo { position: relative; min-height: 100%; background: #f5f5f5; }
.sbsu-card--photo .sbsu-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sbsu-card--photo .sbsu-body { padding: 36px 28px 24px; }
.sbsu-card--photo .sbsu-title { font-size: 25px; }
.sbsu-card--photo .sbsu-steps { justify-content: flex-start; }

/* ---- full-screen layouts (full_a, full_b) ---- */
.sbsu-full { background: #FFF8F1; overflow: auto; -webkit-overflow-scrolling: touch; }
.sbsu-full .sbsu-close { top: 20px; right: 20px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.sbsu-full .sbsu-title { font-size: clamp(34px, 4.6vw, 58px); }
.sbsu-full .sbsu-sub { font-size: 17px; max-width: 520px; }
.sbsu-full .sbsu-form { max-width: 460px; }
/* Copy left, one full-bleed product shot right — edge to edge, no frame. */
.sbsu-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100%; }
.sbsu-copy {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 64px 5vw 56px 7vw; width: 100%;
}
.sbsu-copy .sbsu-title, .sbsu-copy .sbsu-sub { text-align: left; }
.sbsu-copy .sbsu-form { width: 100%; }
.sbsu-media { position: relative; overflow: hidden; min-height: 100%; background: #FDEEE6; }
.sbsu-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .sbsu-grid { grid-template-columns: 1fr; grid-template-rows: 38vh auto; }
  .sbsu-media { order: -1; min-height: 38vh; }
  .sbsu-copy { padding: 28px 24px 40px; }
}
.sbsu-center {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; max-width: 540px; margin: 0 auto; min-height: 100%; padding: 8vh 24px 40px;
}
.sbsu-center .sbsu-steps, .sbsu-center .sbsu-form { align-self: center; width: 100%; }
.sbsu-center .sbsu-steps { justify-content: center; }
.sbsu-center .sbsu-sub { margin-left: auto; margin-right: auto; }
.sbsu-hero {
  width: 168px; height: 168px; object-fit: cover; object-position: 50% 30%; border-radius: 50%;
  margin: 0 0 18px; border: 6px solid #fff; box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
}
.sbsu-full--center .sbsu-title { font-size: clamp(30px, 3.6vw, 44px); }
.sbsu-full--center::before, .sbsu-full--center::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.sbsu-full--center::before { width: 48vw; height: 48vw; left: -14vw; top: -14vw; background: radial-gradient(closest-side, rgba(255, 107, 74, .18), transparent); }
.sbsu-full--center::after { width: 56vw; height: 56vw; right: -18vw; bottom: -20vw; background: radial-gradient(closest-side, rgba(138, 205, 234, .4), transparent); }
.sbsu-center > * { position: relative; z-index: 1; }

/* ---- mobile: top-anchor everything so the field sits above the keyboard ---- */
@media (max-width: 640px) {
  .sbsu-popup { align-items: flex-start; padding: max(16px, 5vh) 14px 24px; }
  .sbsu-card { padding: 30px 20px 22px; }
  .sbsu-card:not(.sbsu-card--photo) .sbsu-title { font-size: 24px; padding: 0 40px; }
  .sbsu-card--photo { grid-template-columns: 1fr; max-width: 440px; }
  .sbsu-card--photo .sbsu-photo { height: 150px; min-height: 0; }
  .sbsu-card--photo .sbsu-body { padding: 22px 20px 20px; }
  .sbsu-title { font-size: 26px; }
  .sbsu-sub { font-size: 14px; }

  .sbsu-grid { grid-template-columns: 1fr; grid-template-rows: 30vh auto; min-height: 0; }
  .sbsu-media { order: -1; height: 30vh; min-height: 0; }
  .sbsu-full--split .sbsu-media::after { border-radius: 0 0 32px 32px; box-shadow: inset 0 0 0 10px #FFF8F1; }
  .sbsu-copy { justify-content: flex-start; padding: 22px 22px 40px; }
  .sbsu-full .sbsu-title { font-size: 30px; }
  .sbsu-full .sbsu-sub { font-size: 14px; }
  .sbsu-center { justify-content: flex-start; padding: 68px 22px 40px; }
  .sbsu-hero { width: 112px; height: 112px; margin-bottom: 12px; }
}

/* The quiz reuses account verification as an inline step, with its own explicit SMS choice. */
.sbsu-root.sbsu-quiz-inline { position: static; inset: auto; z-index: auto; width: 100%; }
.sbsu-quiz-inline .sbsu-title, .sbsu-quiz-inline .sbsu-sub { text-align: center; }
.sbsu-quiz-consent { display: flex; align-items: flex-start; gap: var(--th-space-sm, 8px); }
.sbsu-quiz-consent input { flex: 0 0 auto; width: var(--th-space-xl, 20px); height: var(--th-space-xl, 20px); margin: 0; }

/* Phone offer: one compact number field and native code autofill. */
.sbsu-quiz-inline { color: var(--th-color-ink); }
.sbsu-quiz-inline .sbsu-title { color: var(--th-color-ink); font-size: var(--th-font-size-display); line-height: 1.15; margin-bottom: var(--th-space-md); }
.sbsu-quiz-inline .sbsu-title em { display: inline-block; position: relative; isolation: isolate; color: var(--th-color-ink); font-size: calc(1.65 * var(--th-font-size-display)); letter-spacing: -.055em; line-height: 1.1; margin-bottom: var(--th-space-sm); }
.sbsu-quiz-inline .sbsu-title em::after { content: ''; position: absolute; z-index: -1; inset: 64% calc(-1 * var(--th-space-xs)) 0; background: color-mix(in srgb, var(--th-color-star) 48%, var(--th-color-cream)); border-radius: var(--th-radius-sm); transform: rotate(-3deg); }
.sbsu-quiz-inline .sbsu-sub { color: var(--th-color-ink-soft); font-size: var(--th-font-size-caption); margin-bottom: var(--th-space-xxl); }
.sbsu-quiz-inline .sbsu-form { gap: var(--th-space-lg); }
.sbsu-quiz-inline .sbsu-input { min-width: 0; border: 1px solid var(--th-input-border); border-radius: var(--th-input-radius); background: var(--th-input-fill); color: var(--th-color-ink); padding: 0 var(--th-space-lg); }
.sbsu-quiz-inline .sbsu-input:focus { border-color: var(--th-color-ink); box-shadow: none; outline: 2px solid var(--th-color-ink); outline-offset: 2px; }
.sbsu-quiz-inline .sbsu-cta { min-height: var(--th-button-height); border-radius: var(--th-button-radius); background: var(--th-button-fill); color: var(--th-color-paper); box-shadow: 0 var(--th-button-lip-offset-y) 0 var(--th-button-lip-color); font-size: var(--th-font-size-body); }
.sbsu-quiz-inline .sbsu-cta:hover { background: var(--th-button-pressed-fill); }
.sbsu-quiz-inline .sbsu-cta:focus-visible, .sbsu-quiz-inline summary:focus-visible { outline: 2px solid var(--th-color-ink); outline-offset: var(--th-space-xs); }
.sbsu-phone-row { display: flex; gap: var(--th-space-sm); }
.sbsu-phone-row > input { flex: 1; padding-inline: var(--th-space-md); }
.sbsu-country { position: relative; flex: 0 0 calc(2 * var(--th-space-xxxl)); display: flex; justify-content: center; align-items: center; gap: var(--th-space-sm); background: var(--th-input-fill); border: 1px solid var(--th-input-border); border-radius: var(--th-input-radius); font-size: var(--th-font-size-caption); font-weight: 600; }
.sbsu-country .sbsu-country-select { position: absolute; inset: 0; height: 100%; opacity: 0; cursor: pointer; padding: 0; }
.sbsu-country:focus-within { outline: 2px solid var(--th-color-ink); outline-offset: 2px; }
.sbsu-offer-terms { margin: 0; color: var(--th-color-ink-soft); font-size: var(--th-onboarding-caption-size); text-align: center; }
.sbsu-quiz-inline .sbsu-fine { margin: 0; color: var(--th-color-ink-soft); font-size: var(--th-onboarding-caption-size); line-height: 1.5; text-align: center; }
.sbsu-quiz-inline .sbsu-links { justify-content: space-between; font-size: var(--th-onboarding-caption-size); gap: var(--th-space-sm); }
.sbsu-quiz-inline .sbsu-links > span { display: none; }
.sbsu-quiz-inline .sbsu-link { color: var(--th-color-ink-soft); }
.sbsu-marketing-choice { text-align: left; border-top: 1px solid var(--th-color-line); padding-top: var(--th-space-lg); }
.sbsu-marketing-choice summary { cursor: pointer; color: var(--th-color-ink-soft); font-size: var(--th-onboarding-caption-size); padding: var(--th-space-sm) 0; }
.sbsu-marketing-choice .sbsu-quiz-consent { margin-top: var(--th-space-md); color: var(--th-color-ink-soft); font-size: var(--th-onboarding-caption-size); line-height: 1.5; }
.sbsu-quiz-consent input { accent-color: var(--th-color-ember); }
.sbsu-code-entry { position: relative; }
.sbsu-code-boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--th-space-md); }
.sbsu-code-boxes span { display: flex; align-items: center; justify-content: center; min-height: var(--th-onboarding-choice-height); border: 1px solid var(--th-input-border); border-radius: var(--th-input-radius); background: var(--th-input-fill); color: var(--th-color-ink); font-size: var(--th-font-size-title); font-weight: 700; }
.sbsu-code-entry input.sbsu-input--code { position: absolute; inset: 0; height: 100%; padding: 0; opacity: 0; cursor: text; }
.sbsu-code-entry:focus-within .is-current { border-color: var(--th-color-ink); box-shadow: 0 0 0 1px var(--th-color-ink); }
.sbsu-code-entry:focus-within .is-current:empty::after { content: ''; width: 2px; height: var(--th-font-size-title); background: var(--th-color-ink); }
.sbsu-code-entry:focus-within .is-selected { background: var(--th-color-sky-wash); }
@media (forced-colors: active) { .sbsu-code-entry input.sbsu-input--code { position: static; opacity: 1; } .sbsu-code-boxes { display: none; } }

/* ---- 2026-09-24 kit look (SB-583): the account sign-in, checkout's discount sign-in and the Teach
   reward check. Phones: a sheet from the bottom, in the thumb zone, closed by a pull down, a tap on
   the page above it, the × or Escape (skybuds-signup.js). Wide screens: a card. The kit's colours
   (skybuds-pdp.css) as literals: checkout.html loads this file without the kit. The quiz's inline
   step (.sbsu-quiz-inline) has its own look in quiz-kit.css. ---- */
.sbsu-popup {
  --sbsu-navy: #173F79; --sbsu-orange: #FF6B4A; --sbsu-orange-deep: #D9492B; --sbsu-orange-ink: #B8381C;
  --sbsu-cream: #FFF8E9; --sbsu-line: #EADCC4;
  background: rgba(23, 63, 121, .42); color: var(--sbsu-navy); font-family: Sora, var(--skybuds-font, system-ui), sans-serif;
  overscroll-behavior: contain;
}
.sbsu-popup .sbsu-card { background: var(--sbsu-cream); border-radius: 28px; box-shadow: 0 24px 60px -24px rgba(23, 63, 121, .55); padding: 38px 30px 28px; animation: sbsu-in .24s cubic-bezier(.2, .8, .2, 1) both; }
.sbsu-popup .sbsu-close { top: 16px; right: 16px; width: 44px; height: 44px; background: #fff; color: var(--sbsu-navy); font-size: 26px; box-shadow: 0 8px 18px -10px rgba(23, 63, 121, .55); }
.sbsu-popup .sbsu-close:hover { background: #fff; }
.sbsu-popup .sbsu-title { color: var(--sbsu-navy); font-size: 30px; line-height: 1.1; letter-spacing: -.025em; }
.sbsu-popup .sbsu-sub { color: rgba(23, 63, 121, .82); font-size: 16px; font-weight: 500; }
.sbsu-popup .sbsu-sub strong { color: var(--sbsu-navy); }
.sbsu-popup .sbsu-form { gap: 14px; }
.sbsu-popup .sbsu-input { min-height: 58px; border: 2.5px solid var(--sbsu-line); border-radius: 18px; color: var(--sbsu-navy); font-size: 17px; }
.sbsu-popup .sbsu-input::placeholder { color: rgba(23, 63, 121, .5); }
.sbsu-popup .sbsu-input:focus { border-color: var(--sbsu-orange); box-shadow: 0 0 0 4px rgba(255, 107, 74, .18); }
.sbsu-popup .sbsu-input--code { font-size: 24px; }
.sbsu-popup .sbsu-cta { min-height: 60px; margin-bottom: 5px; border-radius: 999px; background: var(--sbsu-orange); box-shadow: 0 5px 0 var(--sbsu-orange-deep); font-size: 19px; font-weight: 700; transition: transform .15s ease, box-shadow .15s ease; }
.sbsu-popup .sbsu-cta:hover { background: var(--sbsu-orange); transform: translateY(-2px); box-shadow: 0 7px 0 var(--sbsu-orange-deep); }
.sbsu-popup .sbsu-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--sbsu-orange-deep); }
.sbsu-popup .sbsu-cta[disabled] { transform: none; }
.sbsu-popup .sbsu-cta:focus-visible, .sbsu-popup .sbsu-close:focus-visible, .sbsu-popup .sbsu-link:focus-visible { outline: 3px solid var(--sbsu-navy); outline-offset: 3px; }
.sbsu-popup .sbsu-err { color: var(--sbsu-orange-ink); font-size: 14px; font-weight: 700; }
.sbsu-popup .sbsu-fine { color: rgba(23, 63, 121, .82); font-size: 13px; line-height: 1.5; text-align: center; }
.sbsu-popup .sbsu-hint { color: rgba(23, 63, 121, .82); font-size: 14px; }
/* The two links sit apart without the dot: at 320px they wrap and the dot hung at a line's end. */
.sbsu-popup .sbsu-links { gap: 0 22px; }
.sbsu-popup .sbsu-links > span[aria-hidden] { display: none; }
.sbsu-popup .sbsu-link { min-height: 44px; padding: 6px 4px; color: var(--sbsu-navy); font-size: 14px; font-weight: 700; text-underline-offset: 3px; }
.sbsu-popup .sbsu-link:hover { color: var(--sbsu-orange-ink); }
.sbsu-popup .sbsu-link[disabled] { color: rgba(23, 63, 121, .82); opacity: 1; }
/* Teach reward: Email / Text message is a choice of two, shown as two pills. */
.sbsu-popup .sbsu-links[role="group"] { gap: 8px; }
.sbsu-popup .sbsu-links[role="group"] .sbsu-link { padding: 8px 18px; border: 2.5px solid var(--sbsu-line); border-radius: 999px; background: #fff; text-decoration: none; }
.sbsu-popup .sbsu-links[role="group"] .sbsu-link[aria-pressed="true"] { border-color: var(--sbsu-navy); background: var(--sbsu-navy); color: #fff; }
@keyframes sbsu-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes sbsu-up { from { transform: translateY(100%); } }
@media (max-width: 640px) {
  /* The sheet sits at the bottom while it fits (margin-top: auto) and scrolls from its top when the
     keyboard leaves less room (align-items: flex-end would cut its top off, unscrollable). */
  .sbsu-popup { align-items: flex-start; padding: 0; }
  .sbsu-popup .sbsu-card { max-width: none; margin-top: auto; border-radius: 28px 28px 0 0; padding: 36px 20px calc(22px + env(safe-area-inset-bottom)); animation-name: sbsu-up; }
  .sbsu-popup .sbsu-card::before { content: ""; position: absolute; top: 9px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 99px; background: rgba(23, 63, 121, .22); pointer-events: none; }
  .sbsu-popup .sbsu-card:not(.sbsu-card--photo) .sbsu-title { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .sbsu-popup .sbsu-card { animation: none; } }