/* GetClosifi · mobile density pass for Referral, Why GetClosifi and Yug.
   Scoped overrides only. No JavaScript, referral accounting, or voice behavior changes. */
@media (max-width: 620px) {
  /* Referral: keep all four stages and three metrics visible, without tall cards. */
  html body section#referral.gc-referral-highlight {
    padding: 36px 0 40px !important;
  }
  html body section#referral .gc-referral-shell {
    width: calc(100% - 28px) !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 18px !important;
  }
  html body section#referral .gc-referral-copy h2 {
    font-size: 29px !important;
    line-height: 1.12 !important;
    letter-spacing: -.9px !important;
    margin: 11px 0 8px !important;
  }
  html body section#referral .gc-referral-copy>p {
    font-size: 12.5px !important;
    line-height: 1.58 !important;
  }
  html body section#referral .gc-referral-points {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important;
    margin-top: 14px !important;
  }
  html body section#referral .gc-referral-point {
    padding: 9px !important;
    gap: 6px !important;
    min-width: 0 !important;
    border-radius: 11px !important;
  }
  html body section#referral .gc-referral-point b {font-size: 10.5px !important;line-height: 1.24 !important}
  html body section#referral .gc-referral-point span {font-size: 9.5px !important;line-height: 1.35 !important}
  html body section#referral .gc-referral-check {
    width: 20px !important;height: 20px !important;flex-basis: 20px !important;font-size: 10px !important;
  }
  html body section#referral .gc-referral-actions {margin-top: 15px !important;gap: 7px !important}
  html body section#referral .gc-referral-primary,
  html body section#referral .gc-referral-secondary {
    min-height: 40px !important;padding: 10px 12px !important;font-size: 11px !important;
  }
  html body section#referral .gc-referral-card {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 530px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    box-shadow: 0 15px 32px rgba(42,52,98,.08) !important;
  }
  html body section#referral .gc-ref-card-head {gap: 8px !important;padding-bottom: 10px !important}
  html body section#referral .gc-ref-card-head div b {font-size: 13px !important}
  html body section#referral .gc-ref-card-rate {
    font-size: 10px !important;padding: 7px 9px !important;white-space: nowrap !important;
  }
  html body section#referral .gc-ref-code-preview {margin-top: 10px !important;padding: 10px 12px !important}
  html body section#referral .gc-ref-code-preview strong {font-size: 15px !important;margin-top: 3px !important}
  html body section#referral .gc-ref-flow {gap: 6px !important;margin-top: 10px !important}
  html body section#referral .gc-ref-step {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 27px minmax(0,1fr) auto !important;
    gap: 7px !important;
    padding: 8px !important;
    min-width: 0 !important;
    border-radius: 10px !important;
  }
  html body section#referral .gc-ref-step>i {width: 27px !important;height: 27px !important;font-size: 9px !important}
  html body section#referral .gc-ref-step>div {min-width:0 !important}
  html body section#referral .gc-ref-step b {font-size: 10.5px !important;line-height: 1.25 !important}
  html body section#referral .gc-ref-step span {font-size: 9.3px !important;line-height: 1.35 !important}
  html body section#referral .gc-ref-step em {
    grid-column: auto !important;
    justify-self: end !important;
    margin: 0 !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }
  html body section#referral .gc-ref-total {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }
  html body section#referral .gc-ref-total div {
    grid-column: auto !important;
    min-width: 0 !important;
    padding: 9px 7px !important;
  }
  html body section#referral .gc-ref-total span {font-size: 9px !important;line-height: 1.25 !important}
  html body section#referral .gc-ref-total b {font-size: 12px !important;margin-top: 4px !important}
  html body section#referral .gc-ref-card-note {margin-top: 9px !important;padding: 8px 10px !important;font-size: 9px !important}

  /* Comparison: two small proof cards in one row and a horizontal transition. */
  html body section.gc-story.gc-problem {
    padding: 36px 0 !important;
  }
  html body section.gc-story.gc-problem .gc-problem-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 17px !important;
  }
  html body section.gc-story.gc-problem h2 {
    font-size: clamp(27px,7.8vw,33px) !important;
    line-height: 1.12 !important;
    margin: 0 0 9px !important;
    letter-spacing: -.045em !important;
  }
  html body section.gc-story.gc-problem .gc-story-kicker {font-size: 10px !important;margin-bottom: 8px !important}
  html body section.gc-story.gc-problem .gc-problem-grid>div>p {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }
  html body section.gc-story.gc-problem .gc-speed {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 17px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 6px !important;
  }
  html body section.gc-story.gc-problem .gc-speed article {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 135px !important;
    padding: 12px 11px !important;
    border-radius: 15px !important;
    box-shadow: 0 9px 25px rgba(15,23,42,.05) !important;
  }
  html body section.gc-story.gc-problem .gc-speed small {
    display: block !important;
    font-size: 8px !important;
    letter-spacing: .045em !important;
    line-height: 1.35 !important;
  }
  html body section.gc-story.gc-problem .gc-speed strong {
    font-size: clamp(22px,6vw,29px) !important;
    margin: 12px 0 3px !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere !important;
  }
  html body section.gc-story.gc-problem .gc-speed p {font-size: 10px !important;line-height: 1.3 !important;margin: 0 !important}
  html body section.gc-story.gc-problem .gc-speed article div {
    font-size: 9.5px !important;line-height: 1.3 !important;margin-top: 13px !important;
  }
  html body section.gc-story.gc-problem .gc-speed>b {
    font-size: 21px !important;
    text-align: center !important;
    transform: none !important;
    line-height: 1 !important;
  }

  /* Yug: the voice presenter remains interactive, but not full-screen tall. */
  html body section#meet-yug.yug-avatar-section {padding: 36px 0 40px !important}
  html body section#meet-yug .yug-avatar-grid {
    width: calc(100% - 28px) !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 16px !important;
  }
  html body section#meet-yug .yug-avatar-copy h2 {
    font-size: 29px !important;
    line-height: 1.12 !important;
    margin: 8px 0 !important;
  }
  html body section#meet-yug .yug-avatar-copy>p {font-size: 12.5px !important;line-height: 1.55 !important}
  html body section#meet-yug .yug-stage {min-height: 0 !important;max-width: 440px !important}
  html body section#meet-yug .yug-avatar-card {
    width: 100% !important;
    padding: 15px !important;
    border-radius: 18px !important;
    min-height: 0 !important;
  }
  html body section#meet-yug .yug-live {
    margin: 0 0 8px !important;
    font-size: 9px !important;
    padding: 6px 9px !important;
  }
  html body section#meet-yug .yug-name b {font-size: 23px !important}
  html body section#meet-yug .yug-name span {font-size: 10px !important}
  html body section#meet-yug .yug-avatar {
    box-sizing: border-box !important;
    width: min(100%,180px) !important;
    height: auto !important;
    aspect-ratio: 260 / 300 !important;
    margin: 8px auto 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    transform: none !important;
    transform-origin: center !important;
    border-radius: 15px !important;
  }
  html body section#meet-yug .yug-avatar svg.gc-premium-portrait {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
  html body section#meet-yug .yug-caption {
    min-height: 0 !important;
    padding: 10px 11px !important;
    margin: 9px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.42 !important;
    border-radius: 12px !important;
  }
  html body section#meet-yug .yug-guide-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr .8fr !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
  }
  html body section#meet-yug .yug-guide-actions button {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 39px !important;
    padding: 9px 6px !important;
    font-size: 10px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }
  html body section#meet-yug .yug-guide-actions .yug-secondary {
    grid-column: auto !important;
    min-height: 39px !important;
  }
  html body section#meet-yug .yug-language-state {
    margin-top: 9px !important;
    padding-top: 8px !important;
    font-size: 9px !important;
    gap: 7px !important;
  }
}
@media (max-width: 345px) {
  html body section.gc-story.gc-problem .gc-speed {grid-template-columns: 1fr !important;gap: 7px !important}
  html body section.gc-story.gc-problem .gc-speed>b {transform: rotate(90deg) !important}
  html body section.gc-story.gc-problem .gc-speed article {min-height: 0 !important;padding: 11px !important}
  html body section#referral .gc-referral-points {grid-template-columns: 1fr !important}
  html body section#referral .gc-ref-card-rate {font-size: 9px !important}
  html body section#meet-yug .yug-guide-actions {grid-template-columns: 1fr 1fr !important}
  html body section#meet-yug .yug-guide-actions .yug-secondary {grid-column: 1/-1 !important}
}