/* CC_PHONE_FRONT_DOOR_REGISTRY_HERO_V3 */
/* CC_PHONE_RUNTIME_SCREEN_LAYOUT_V4
   Scoped phone runtime layout repair.
   Owns only guest phone screens: home, phone consent/code, and backdrop preview.
   Dashboard/Screens still owns copy; Sessions/Media still own products and assets.
*/

:root {
  --cc-phone-cta: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.055));
  --cc-phone-card: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028));
  --cc-phone-border: rgba(255, 255, 255, .16);
  --cc-phone-border-strong: rgba(239, 205, 145, .34);
}

body {
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(255, 214, 139, .13), transparent 56%),
    radial-gradient(540px 420px at 0% 100%, rgba(232, 189, 116, .06), transparent 62%),
    #08090d !important;
}

/* Shared screen shell */
.app {
  max-width: 430px;
}

.app > .hero {
  position: relative !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 8px 12px 4px !important;
}

.brandRow {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  height: 100% !important;
}

.brandTag {
  padding: 5px 10px !important;
  font-size: 9px !important;
  letter-spacing: .11em !important;
  color: rgba(255, 255, 255, .70) !important;
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(255, 255, 255, .10) !important;
}

.venueChip {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  z-index: 4 !important;
  max-width: 36% !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, .62) !important;
  font-size: clamp(10px, 2.8vw, 12px) !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  letter-spacing: .02em !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
}

.panel {
  padding: 10px !important;
}

.sectionHead {
  margin-bottom: 7px !important;
}

.sectionHead h2 {
  font-size: clamp(22px, 6vw, 28px) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
}

.sectionHead p {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.primaryBtn,
.secondaryBtn,
.pagerBtn,
.phoneHeroCta {
  min-height: 46px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 950;
}

.primaryBtn,
.phoneHeroCta {
  border: 1px solid rgba(255, 214, 139, .58);
  background: var(--cc-phone-cta);
  color: #140c08;
  box-shadow: 0 12px 28px rgba(255, 214, 139, .20);
}

.secondaryBtn,
.pagerBtn {
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
  color: #fff;
}

body:has(#phonePanel:not(.hidden)) .app > .hero,
body:has(#codePanel:not(.hidden)) .app > .hero,
body:has(#previewPanel:not(.hidden)) .app > .hero,
body:has(#sessionPanel[data-phone-menu-page="themes"]) .app > .hero {
  min-height: 66px !important;
  max-height: 66px !important;
  padding: 8px 12px !important;
}

body:has(#phonePanel:not(.hidden)) .venueChip,
body:has(#codePanel:not(.hidden)) .venueChip,
body:has(#previewPanel:not(.hidden)) .venueChip,
body:has(#sessionPanel[data-phone-menu-page="themes"]) .venueChip {
  font-size: clamp(18px, 5.2vw, 24px) !important;
  line-height: .95 !important;
}

body:has(#phonePanel:not(.hidden)) .brandTag,
body:has(#codePanel:not(.hidden)) .brandTag,
body:has(#previewPanel:not(.hidden)) .brandTag,
body:has(#sessionPanel[data-phone-menu-page="themes"]) .brandTag {
  padding: 4px 10px !important;
  font-size: 9px !important;
}

/* Page 1: clear intro + one themed CTA + compact quick sessions */
#sessionPanel .phoneFrontHero {
  display: none;
}

#sessionPanel[data-phone-menu-page="home"] {
  gap: 10px !important;
}

#sessionPanel[data-phone-menu-page="home"] .sessionHead {
  display: none !important;
}

#sessionPanel[data-phone-menu-page="home"] #tierStatus:empty,
#sessionPanel[data-phone-menu-page="home"] #tierStatus.hidden {
  display: none !important;
}

#sessionPanel[data-phone-menu-page="home"] #tierGrid,
#sessionPanel[data-phone-menu-page="home"] #themeSectionHead {
  display: none !important;
}

#sessionPanel[data-phone-menu-page="home"] .phoneFrontHero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  min-height: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--cc-phone-border);
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 214, 139, .10), transparent 32%),
    radial-gradient(circle at 0 100%, rgba(232, 189, 116, .055), transparent 34%),
    var(--cc-phone-card),
    rgba(10, 10, 13, .86);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .08);
  overflow: hidden;
}

#sessionPanel[data-phone-menu-page="home"] .phoneFrontCopy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}

#sessionPanel[data-phone-menu-page="home"] .phoneFrontBrand {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  color: rgba(255, 214, 139, .9);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .09em;
  line-height: 1.05;
  text-transform: uppercase;
}

#sessionPanel[data-phone-menu-page="home"] .phoneFrontLogo,
#sessionPanel[data-phone-menu-page="home"] .phoneFrontLogoFallback {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  object-fit: cover;
}

#sessionPanel[data-phone-menu-page="home"] .phoneFrontLogoFallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 214, 139, .34);
  background: rgba(255, 255, 255, .08);
  color: #ffd166;
  font-size: 10px;
  font-weight: 950;
}

#sessionPanel[data-phone-menu-page="home"] #phoneBoothEyebrow {
  display: none !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sessionPanel[data-phone-menu-page="home"] #phoneBoothHeadline {
  margin: 0;
  max-width: 12ch;
  color: #fff;
  font-size: clamp(32px, 9.8vw, 44px);
  line-height: .88;
  letter-spacing: -.085em;
  text-wrap: balance;
}

#sessionPanel[data-phone-menu-page="home"] #phoneBoothBody,
#sessionPanel[data-phone-menu-page="home"] .phoneHeroHelper {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.32;
}

#sessionPanel[data-phone-menu-page="home"] #phoneBoothBody {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#sessionPanel[data-phone-menu-page="home"] .phoneHeroHelper {
  display: none !important;
}

#sessionPanel[data-phone-menu-page="home"] .phoneHeroFlowLine {
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px;
  margin: 2px 0 0;
  color: rgba(255, 214, 139, .82);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .01em;
}

#sessionPanel[data-phone-menu-page="home"] .phoneHeroFlowStep {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 214, 139, .18);
  border-radius: 999px;
  background: rgba(255, 214, 139, .07);
}

#sessionPanel[data-phone-menu-page="home"] .phoneHeroFlowIcon {
  display: none;
}

#sessionPanel[data-phone-menu-page="home"] .phoneHeroCta {
  width: 100%;
  padding: 0 14px;
  margin-top: 2px;
  white-space: normal;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

#sessionPanel[data-phone-menu-page="home"] .phoneFrontVisual {
  position: relative !important;
  order: -1;
  min-width: 0;
  min-height: 150px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 20px;
  background: rgba(0, 0, 0, .25);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

#sessionPanel[data-phone-menu-page="home"] .phoneFrontVisual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  background: rgba(0, 0, 0, .24);
}

#sessionPanel[data-phone-menu-page="home"] .phoneHeroPlaceholder {
  height: 100%;
  min-height: 152px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 12px;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 214, 139, .18), transparent 38%),
    linear-gradient(160deg, rgba(255, 122, 0, .26), rgba(122, 44, 255, .20));
  color: #fff;
}

#sessionPanel[data-phone-menu-page="home"] .phoneHeroPlaceholder span {
  font-size: 10px;
  color: rgba(255, 255, 255, .72);
  font-weight: 850;
}

#sessionPanel[data-phone-menu-page="home"] .phoneHeroPlaceholder strong {
  font-size: 18px;
  line-height: 1;
}

#sessionPanel[data-phone-menu-page="home"] #quickNoBackdropWrap {
  flex: 0 0 auto !important;
  padding: 10px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  background: rgba(255, 255, 255, .038) !important;
}

#sessionPanel[data-phone-menu-page="home"] .quickNoBackdropHead {
  margin-bottom: 8px !important;
}

#sessionPanel[data-phone-menu-page="home"] .quickNoBackdropTitle {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

#sessionPanel[data-phone-menu-page="home"] .quickNoBackdropSub {
  margin: 3px 0 0 !important;
  max-width: 36ch;
  color: rgba(255, 255, 255, .66) !important;
  font-size: 11px !important;
  line-height: 1.18 !important;
}

#sessionPanel[data-phone-menu-page="home"] .phoneFrameAvailability,
#sessionPanel[data-phone-menu-page="home"] .quickNoBackdropFoot {
  display: none !important;
}

#sessionPanel[data-phone-menu-page="home"] #quickNoBackdropGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px !important;
}

#sessionPanel[data-phone-menu-page="home"] .miniTierCard {
  min-width: 0 !important;
  min-height: 98px !important;
  border-radius: 18px !important;
  border-color: rgba(255, 214, 139, .28) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)),
    rgba(255, 255, 255, .03) !important;
}

#sessionPanel[data-phone-menu-page="home"] .miniTierCard::before {
  background: linear-gradient(180deg, rgba(244, 213, 151, .72), rgba(232, 189, 116, .30)) !important;
}

#sessionPanel[data-phone-menu-page="home"] .miniTierBody {
  min-height: 98px !important;
  padding: 9px 8px !important;
  gap: 5px !important;
}

#sessionPanel[data-phone-menu-page="home"] .miniTierName {
  font-size: 15px !important;
  line-height: 1.03 !important;
  letter-spacing: -.035em !important;
}

#sessionPanel[data-phone-menu-page="home"] .miniMeta {
  gap: 4px !important;
}

#sessionPanel[data-phone-menu-page="home"] .miniMetaPill {
  padding: 4px 6px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

#sessionPanel[data-phone-menu-page="home"] .miniTierDesc {
  display: none !important;
}

#sessionPanel[data-phone-menu-page="home"] .miniTierPrice {
  margin-top: auto !important;
  width: max-content;
  max-width: 100%;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  background: rgba(255, 255, 255, .055) !important;
  color: rgba(255, 255, 255, .72) !important;
  box-shadow: none !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
  letter-spacing: .02em !important;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sessionPanel[data-phone-menu-page="home"] #tierPager {
  display: none !important;
}

/* Themed session listing page: compact header and stable two-card browsing. */
#sessionPanel[data-phone-menu-page="themes"] {
  gap: 8px !important;
}

#sessionPanel[data-phone-menu-page="themes"] .sessionHead {
  display: none !important;
}

#sessionPanel[data-phone-menu-page="themes"] .sessionHead h2 {
  font-size: clamp(20px, 6vw, 27px) !important;
  line-height: .98 !important;
}

#sessionPanel[data-phone-menu-page="themes"] .sessionHead p {
  font-size: 12px !important;
  line-height: 1.22 !important;
}

#sessionPanel[data-phone-menu-page="themes"] #themeSectionHead {
  margin-bottom: 2px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  background: rgba(255, 255, 255, .035);
}

#sessionPanel[data-phone-menu-page="themes"] .themeSectionTitle {
  font-size: clamp(20px, 5.7vw, 26px) !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
}

#sessionPanel[data-phone-menu-page="themes"] .themeSectionSub {
  display: block !important;
  margin-top: 4px !important;
  font-size: 11px !important;
  line-height: 1.18 !important;
  color: rgba(255, 255, 255, .58) !important;
}

#sessionPanel[data-phone-menu-page="themes"] #tierGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#sessionPanel[data-phone-menu-page="themes"] .tierCard {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-color: rgba(255, 255, 255, .16) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .028)),
    rgba(12, 13, 17, .94) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

#sessionPanel[data-phone-menu-page="themes"] .themeTierCard,
#sessionPanel[data-phone-menu-page="themes"] .tierCard.hasBackdrops {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .028)),
    rgba(12, 13, 17, .94) !important;
}

#sessionPanel[data-phone-menu-page="themes"] .tierCard::before {
  width: 2px !important;
  background: linear-gradient(180deg, rgba(244, 213, 151, .75), rgba(232, 189, 116, .34)) !important;
  box-shadow: none !important;
  opacity: .85 !important;
}

#sessionPanel[data-phone-menu-page="themes"] .tierCard.selected,
#sessionPanel[data-phone-menu-page="themes"] .tierCard:focus-visible {
  border-color: rgba(244, 213, 151, .66) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)),
    rgba(14, 15, 19, .96) !important;
  box-shadow: 0 0 0 2px rgba(244, 213, 151, .14), 0 16px 34px rgba(0, 0, 0, .50) !important;
}

#sessionPanel[data-phone-menu-page="themes"] .tierPreview {
  aspect-ratio: 16 / 10 !important;
  min-height: 94px !important;
  max-height: none !important;
  border-bottom-color: rgba(255, 255, 255, .08) !important;
  background: rgba(0, 0, 0, .20) !important;
  box-shadow: none !important;
}

#sessionPanel[data-phone-menu-page="themes"] .tierPreview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: rgba(0, 0, 0, .24);
  filter: saturate(.96) contrast(1.01) !important;
}

#sessionPanel[data-phone-menu-page="themes"] .tierCardBody {
  min-height: 98px !important;
  padding: 9px 10px 10px !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, .018) !important;
}

#sessionPanel[data-phone-menu-page="themes"] .tierName {
  max-width: 100%;
  font-size: 13px !important;
  line-height: 1.06 !important;
  text-shadow: none !important;
}

#sessionPanel[data-phone-menu-page="themes"] .tierPrice {
  padding: 4px 7px !important;
  font-size: 9px !important;
  color: rgba(255, 255, 255, .72) !important;
  border-color: rgba(255, 255, 255, .13) !important;
  background: rgba(255, 255, 255, .055) !important;
  box-shadow: none !important;
}

#sessionPanel[data-phone-menu-page="themes"] .tierMeta {
  gap: 5px !important;
}

#sessionPanel[data-phone-menu-page="themes"] .metaPill {
  min-height: 20px !important;
  padding: 4px 7px !important;
  font-size: 9px !important;
  border-color: rgba(255, 255, 255, .14) !important;
  background: rgba(255, 255, 255, .055) !important;
  box-shadow: none !important;
}

#sessionPanel[data-phone-menu-page="themes"] .tierDesc {
  display: none !important;
}

#sessionPanel[data-phone-menu-page="themes"] #tierPager {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: .9fr 1fr .9fr;
  align-items: center;
  gap: 8px !important;
  margin-top: 6px !important;
}

#sessionPanel[data-phone-menu-page="themes"] #prevPageBtn,
#sessionPanel[data-phone-menu-page="themes"] #nextPageBtn {
  min-height: 42px !important;
  border-radius: 18px !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

#sessionPanel[data-phone-menu-page="themes"] #nextPageBtn {
  background: var(--cc-phone-cta) !important;
  color: #15100b !important;
}

#sessionPanel[data-phone-menu-page="themes"] #pageInfo {
  font-size: 11px !important;
  line-height: 1.15 !important;
}

@media (max-width: 380px), (max-height: 720px) {
  .app > .hero {
    min-height: 44px !important;
    max-height: 44px !important;
  }

  .venueChip {
    font-size: 10px !important;
  }

  #sessionPanel[data-phone-menu-page="home"] .phoneFrontHero {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: 12px;
  }

  #sessionPanel[data-phone-menu-page="home"] .phoneFrontVisual {
    min-height: 120px;
  }

  #sessionPanel[data-phone-menu-page="home"] #phoneBoothHeadline {
    font-size: clamp(27px, 8.5vw, 36px);
  }

  #sessionPanel[data-phone-menu-page="home"] .phoneHeroHelper {
    display: none;
  }

  #sessionPanel[data-phone-menu-page="home"] .phoneHeroCta {
    min-height: 40px;
    font-size: 12px;
  }

  #sessionPanel[data-phone-menu-page="home"] #quickNoBackdropWrap {
    padding: 10px !important;
  }

  #sessionPanel[data-phone-menu-page="home"] .quickNoBackdropSub {
    display: none !important;
  }

  #sessionPanel[data-phone-menu-page="home"] .miniTierCard,
  #sessionPanel[data-phone-menu-page="home"] .miniTierBody {
    min-height: 90px !important;
  }

  #sessionPanel[data-phone-menu-page="themes"] #tierGrid {
    gap: 7px !important;
  }

  #sessionPanel[data-phone-menu-page="themes"] .tierPreview {
    min-height: 78px !important;
  }

  #sessionPanel[data-phone-menu-page="themes"] .tierCardBody {
    min-height: 96px !important;
    padding: 8px !important;
  }
}

@media (max-width: 345px) {
  #sessionPanel[data-phone-menu-page="home"] #quickNoBackdropGrid {
    gap: 6px !important;
  }

  #sessionPanel[data-phone-menu-page="home"] .miniTierBody {
    padding: 9px 7px !important;
  }

  #sessionPanel[data-phone-menu-page="home"] .miniTierName {
    font-size: 13px !important;
  }
}

/* Page 2: phone number + consent, compact and non-overlapping */
#phonePanel {
  padding: 10px !important;
}

#phonePanel .phoneStage {
  gap: 8px !important;
  overflow: hidden;
}

#phonePanel .sectionHead {
  margin-bottom: 2px !important;
}

#phonePanel .sectionHead h2 {
  font-size: clamp(20px, 6vw, 26px) !important;
  line-height: .98 !important;
}

#phonePanel .sectionHead p {
  max-width: 38ch;
  font-size: 12px !important;
  line-height: 1.22 !important;
}

#phonePanel .phoneBody {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 1px;
  -webkit-overflow-scrolling: touch;
}

#phonePanel .summaryCard {
  flex: 0 0 auto;
  padding: 12px 14px !important;
  border-radius: 18px !important;
}

#phonePanel .summaryLabel {
  font-size: 10px !important;
  letter-spacing: .14em !important;
}

#phonePanel .summaryValue {
  font-size: 18px !important;
  line-height: 1.05 !important;
}

#phonePanel .summarySub {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

#phonePanel .helper {
  font-size: 10px !important;
  line-height: 1.15 !important;
}

#phonePanel .phoneBox {
  min-height: 44px !important;
  border-radius: 18px !important;
  font-size: 18px !important;
}

#phonePanel .keypad {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 43px;
  grid-template-rows: none !important;
  gap: 7px !important;
}

#phonePanel .keypad button {
  min-height: 43px !important;
  height: 43px !important;
  border-radius: 17px !important;
  font-size: 19px !important;
}

#phonePanel .consentRow {
  position: static !important;
  flex: 0 0 auto;
  margin: 2px 0 0 !important;
  padding: 9px 10px !important;
  border-radius: 17px !important;
  max-height: 98px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

#phonePanel .consentCheckRow {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
}

#phonePanel .consentRow input {
  width: 19px !important;
  height: 19px !important;
  margin-top: 1px !important;
}

#phonePanel .consentCopy,
#phonePanel .consentNotice {
  min-width: 0;
  font-size: 9.8px !important;
  line-height: 1.19 !important;
  font-weight: 800 !important;
}

#phonePanel .buttonRow.stickyBottom,
#codePanel .buttonRow.stickyBottom {
  flex: 0 0 auto;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#phonePanel .primaryBtn,
#phonePanel .secondaryBtn,
#codePanel .primaryBtn,
#codePanel .secondaryBtn {
  min-height: 48px !important;
  border-radius: 20px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
}

@media (max-height: 720px) {
  body:has(#phonePanel:not(.hidden)) .app > .hero,
  body:has(#codePanel:not(.hidden)) .app > .hero,
  body:has(#previewPanel:not(.hidden)) .app > .hero {
    min-height: 54px !important;
    max-height: 54px !important;
  }

  body:has(#phonePanel:not(.hidden)) .venueChip,
  body:has(#codePanel:not(.hidden)) .venueChip,
  body:has(#previewPanel:not(.hidden)) .venueChip {
    display: none !important;
  }

  #phonePanel .summaryCard {
    padding: 10px 12px !important;
  }

  #phonePanel .keypad {
    grid-auto-rows: 38px;
    gap: 6px !important;
  }

  #phonePanel .keypad button {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 17px !important;
  }

  #phonePanel .consentRow {
    max-height: 88px;
    padding: 8px 9px !important;
  }

  #phonePanel .consentCopy,
  #phonePanel .consentNotice {
    font-size: 9.5px !important;
  }
}

/* Page 3: backdrop preview, lighter header and matching buttons */
#previewPanel .previewStage {
  gap: 8px !important;
}

#previewPanel .sectionHead h2 {
  font-size: clamp(22px, 6vw, 28px) !important;
}

#previewPanel .sectionHead p {
  font-size: 12px !important;
}

#previewPanel .previewSummary {
  flex: 0 0 auto;
  padding: 13px 14px !important;
  border-radius: 18px !important;
}

#previewPanel .previewSummaryTitle {
  font-size: 18px !important;
  line-height: 1.06 !important;
}

#previewPanel .previewSummarySub {
  font-size: 12px !important;
  line-height: 1.2 !important;
}

#previewPanel .expandedBackdropWrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 0;
}

#previewPanel .expandedBackdropStage {
  flex: 1 1 auto !important;
  min-height: 210px;
  max-height: 42dvh;
  border-radius: 20px 20px 0 0 !important;
}

#previewPanel .expandedBackdropStage img {
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: rgba(0, 0, 0, .24);
}

#previewPanel .expandedBackdropMeta {
  flex: 0 0 auto;
  padding: 8px 11px !important;
  border-radius: 0 0 18px 18px !important;
}

#previewPanel .expandedBackdropLabel {
  font-size: 12px !important;
}

#previewPanel .expandedBackdropHint {
  font-size: 10px !important;
}

#previewPanel #backdropGrid {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px !important;
  max-height: 116px !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

#previewPanel .backdropThumb,
#previewPanel .backdropThumbCard {
  min-height: 104px !important;
  border-radius: 18px !important;
}

#previewPanel .backdropThumbImage {
  height: 74px !important;
  background: rgba(0, 0, 0, .24) !important;
}

#previewPanel .backdropThumbImage img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

#previewPanel .backdropThumbName {
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 7px 8px !important;
  min-height: 30px !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
}

#previewPanel .previewActionRow {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px !important;
  margin-top: 8px !important;
  padding: 0 !important;
  position: static !important;
}

#previewPanel .previewActionRow .primaryBtn,
#previewPanel .previewActionRow .secondaryBtn {
  min-height: 48px !important;
  border-radius: 20px !important;
  padding: 0 14px !important;
  font-size: 15px !important;
}

@media (max-height: 720px) {
  #previewPanel .previewSummary {
    padding: 10px 12px !important;
  }

  #previewPanel .expandedBackdropStage {
    min-height: 170px;
    max-height: 36dvh;
  }

  #previewPanel #backdropGrid {
    max-height: 96px !important;
    gap: 7px !important;
  }

  #previewPanel .backdropThumb,
  #previewPanel .backdropThumbCard {
    min-height: 88px !important;
  }

  #previewPanel .backdropThumbImage {
    height: 66px !important;
  }

  #previewPanel .backdropThumbName {
    display: none !important;
  }

  #previewPanel .previewActionRow .primaryBtn,
  #previewPanel .previewActionRow .secondaryBtn {
    min-height: 44px !important;
  }
}