/* Shared mobile-first responsive layer for all public site pages */
:root {
  --site-header-height: 64px;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

button,
.btn,
.btn-primary,
.fixed-amount-btn,
.success-back,
.cs-trigger,
input,
select,
textarea {
  touch-action: manipulation;
}

@media (max-width: 1024px) {
  .hdr-wrap {
    min-width: 0;
    gap: 12px;
  }

  nav {
    min-width: 0;
    gap: 4px;
  }

  nav .btn,
  nav .btn-nav,
  nav .btn-nav-primary,
  nav .btn-nav-green {
    max-width: 100%;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 12px !important;
  }

  .app-wrap {
    max-width: 100%;
    transform: none;
  }

  .app-wrap::before {
    display: none;
  }

  .app-win:hover {
    transform: none;
  }

  .aw-body,
  .aw-chat,
  .aw-messages,
  .aw-msg-body,
  .aw-members-col,
  .aw-ch-col {
    min-width: 0;
  }

  .footer-links-cols,
  .f-links-legal {
    min-width: 0;
  }
}

@media (max-width: 900px) {
  body:has(.mobile-nav.open) {
    overflow: hidden;
    touch-action: none;
  }

  nav .btn,
  nav .btn-nav,
  nav .btn-nav-primary,
  nav .btn-nav-green {
    display: none !important;
  }

  .burger {
    display: flex !important;
    margin-left: auto;
  }

  #community .feature-ui {
    margin: 0 !important;
    min-width: 0;
    max-width: 100%;
  }

  #community .feature-ui img {
    width: 100% !important;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }

  .mobile-nav {
    top: var(--site-header-height);
    bottom: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    gap: 8px;
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }

  .mobile-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .mobile-nav .btn,
  .mobile-nav .btn-nav,
  .mobile-nav .btn-nav-primary,
  .mobile-nav .btn-nav-green {
    display: inline-flex !important;
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hdr-wrap {
    min-width: 0;
    gap: 10px;
  }

  .logo {
    min-width: 0;
  }

  .logo-wordmark {
    font-size: 17px;
    line-height: 1.15;
  }

  .mobile-nav {
    top: var(--site-header-height);
    bottom: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    gap: 8px;
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }

  .mobile-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .mobile-nav .btn,
  .mobile-nav .btn-nav,
  .mobile-nav .btn-nav-primary,
  .mobile-nav .btn-nav-green {
    display: inline-flex !important;
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .btn,
  .btn-primary,
  .fixed-amount-btn {
    min-height: 44px;
  }

  .hero {
    min-height: auto;
    padding: 92px 0 44px;
  }

  .hero-h1 br {
    display: none;
  }

  .hero-sub,
  .brand-subtitle,
  .auth-subtitle,
  .cv-p,
  .cs-p,
  .srv-p {
    max-width: 100%;
  }

  .hero-metrics {
    gap: 18px;
    margin-top: 24px;
    padding-top: 18px;
  }

  .feature {
    gap: 32px;
    padding: 56px 0;
  }

  .feat-callouts {
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding: 30px 0 44px;
  }

  .app-wrap {
    transform: none;
  }

  .app-wrap::before {
    display: none;
  }

  .aw-body {
    min-width: 0;
    height: auto;
  }

  .aw-chat,
  .aw-messages,
  .aw-msg-body,
  .srv-info,
  .news-card-body {
    min-width: 0;
  }

  .cs-body {
    height: auto;
    flex-direction: column;
  }

  .cs-screen {
    border-right: 0;
    min-height: 180px;
  }

  .cs-chat-col {
    width: 100%;
    border-top: 1px solid var(--border);
  }

  .srv-footer {
    flex-wrap: wrap;
    gap: 10px;
  }

  .auth-shell {
    gap: 26px;
    padding-bottom: 28px;
  }

  .auth-col {
    justify-content: center !important;
  }

  .xivy-card {
    width: 100%;
    max-width: 100% !important;
    padding: 22px 16px 18px;
  }

  .input-row,
  .cs-trigger,
  .btn-primary {
    min-height: 46px;
    height: 46px;
  }

  .textarea-row textarea {
    min-height: 108px;
  }

  .fixed-amounts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .news-main,
  .article-main {
    padding-left: 16px;
    padding-right: 16px;
  }

  .news-card-link,
  .news-card.is-featured .news-card-link {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .news-cover,
  .news-card.is-featured .news-cover {
    height: clamp(170px, 48vw, 220px);
  }

  .news-card-title,
  .news-card.is-featured .news-card-title {
    font-size: clamp(20px, 6vw, 24px);
  }

  .news-card-desc {
    min-height: 0;
  }

  .article-card__content {
    padding: 20px 16px 22px;
  }

  .article-cover {
    height: clamp(180px, 52vw, 240px);
  }

  .footer-links-cols,
  .f-links-legal {
    grid-template-columns: 1fr !important;
    padding-left: 0 !important;
  }

  .footer-links-cols > div,
  .footer-links-cols > div:last-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .footer-links-cols > div + div {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
  }

  .footer-links-cols > div:last-child::before {
    display: none !important;
  }

  .f-links-legal .f-links-col {
    padding-right: 0 !important;
  }

  .f-links-legal .f-links-col:last-child {
    border-left: 0 !important;
    margin-top: 10px;
    padding-top: 10px;
    padding-left: 0 !important;
    border-top: 1px solid var(--border);
  }

  .f-links a,
  .f-links-legal a,
  .f-bot-links a {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .f-bot-links {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .footer-bot {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .cursor-glow {
    display: none !important;
  }
}

@media (max-width: 425px) {
  .wrap,
  .news-main,
  .article-main,
  .auth-shell {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .logo-mark,
  .logo-mark img {
    width: 48px;
    height: 48px;
  }

  .logo-wordmark {
    font-size: 16px;
  }

  .hero-h1 {
    font-size: clamp(22px, 8.2vw, 30px);
  }

  .hero-brand {
    font-size: clamp(38px, 14vw, 52px);
    letter-spacing: -1.2px;
  }

  .hero-btns .btn,
  .cta-btns .btn,
  .cta-btns .btn-primary {
    width: 100%;
    justify-content: center;
  }

  .feature {
    gap: 24px;
    padding: 48px 0;
  }

  .feature-card,
  .cv-live,
  .srv-list {
    padding: 16px;
  }

  .srv-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .news-card-link {
    padding: 10px;
  }

  .article-title,
  .news-title,
  .brand-title {
    letter-spacing: -1px;
  }
}

@media (max-width: 375px) {
  .logo-wordmark {
    font-size: 15px;
  }

  .hero {
    padding-top: 86px;
  }

  .hero-brand {
    font-size: clamp(34px, 13vw, 46px);
  }

  .xivy-card,
  .article-card__content {
    padding: 18px 14px 16px !important;
  }

  .auth-title {
    font-size: 23px !important;
  }

  .brand-title,
  .news-title {
    font-size: clamp(28px, 11vw, 36px);
  }

  .input-row,
  .cs-trigger,
  .btn-primary {
    min-height: 44px;
    height: 44px;
  }

  .textarea-row textarea {
    min-height: 96px;
  }

  .fixed-amounts-grid {
    grid-template-columns: 1fr !important;
  }

  .news-cover,
  .article-cover {
    height: 160px;
  }
}

@media (max-width: 320px) {
  .wrap,
  .news-main,
  .article-main,
  .auth-shell {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .logo-wordmark {
    display: none;
  }

  .btn,
  .btn-primary {
    font-size: 13px;
  }

  .hero-sub,
  .brand-subtitle,
  .auth-subtitle,
  .news-card-desc,
  .article-body p {
    font-size: 14px;
  }

  .f-bot-links {
    gap: 6px 8px;
  }
}