/*
  Schumann Resonance Live — mobile perfection (load last)
  Full header → footer fixes for 320px–767px viewports.
*/

@media (max-width: 767px) {
  html,
  body.sr-site {
    overflow-x: clip !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.sr-site *,
  body.sr-site *::before,
  body.sr-site *::after {
    box-sizing: border-box;
  }

  body.sr-site .site-wrapper,
  body.sr-site main,
  body.sr-site section,
  body.sr-site footer,
  body.sr-site .max-w-7xl,
  body.sr-site .max-w-5xl,
  body.sr-site .max-w-3xl,
  body.sr-site .max-w-xl {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.sr-site section,
  body.sr-site #dashboard,
  body.sr-site #guide,
  body.sr-site #about,
  body.sr-site .sr-seo-section {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
  }

  /* ── Trust strip ── */
  body.sr-site .nav-trust-strip,
  body.sr-site .sr-trust-bar {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  body.sr-site .nav-trust-strip::-webkit-scrollbar,
  body.sr-site .sr-trust-bar::-webkit-scrollbar {
    display: none;
  }

  body.sr-site .sr-trust-bar-inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    width: max-content;
    max-width: none;
  }

  /* ── Header nav ── */
  body.sr-site .nav-glass > .max-w-7xl {
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.5rem, env(safe-area-inset-right, 0px)) !important;
  }

  body.sr-site .nav-shell {
    flex-wrap: nowrap !important;
    gap: 0.35rem !important;
    padding: 0.42rem 0.48rem !important;
    min-height: 50px !important;
    border-radius: 0.95rem !important;
  }

  body.sr-site .nav-brand,
  body.sr-site .nav-glass .nav-brand {
    flex: 1 1 auto;
    min-width: 0 !important;
    max-width: calc(100% - 5.5rem) !important;
    overflow: hidden;
  }

  body.sr-site .sr-brand-icon-wrap {
    flex-shrink: 0;
  }

  body.sr-site .sr-brand-text {
    min-width: 0;
    overflow: hidden;
  }

  body.sr-site .sr-brand-kicker,
  body.sr-site .sr-brand-tagline {
    display: none !important;
  }

  body.sr-site .logo-desktop {
    display: none !important;
  }

  body.sr-site .logo-mobile {
    display: block !important;
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  body.sr-site .sr-brand-name {
    display: block !important;
    min-width: 0;
    overflow: hidden;
  }

  body.sr-site .nav-center {
    display: none !important;
  }

  body.sr-site .nav-right {
    flex-shrink: 0 !important;
    gap: 0.28rem !important;
  }

  /* Star CTA in header — mobile menu already has star link */
  body.sr-site .nav-cta-link.nav-star-cta {
    display: none !important;
  }

  body.sr-site .locale-select-wrap {
    min-width: 0;
    flex-shrink: 0;
  }

  body.sr-site .locale-select {
    max-width: 3.6rem;
    min-width: 2.8rem;
    font-size: 0.7rem !important;
    padding: 0.35rem 1.1rem 0.35rem 0.4rem !important;
  }

  body.sr-site .nav-mobile-toggle {
    flex-shrink: 0;
    min-width: 40px;
    min-height: 40px;
  }

  /* ── Mobile menu ── */
  body.sr-site .nav-mobile-menu {
    max-width: 100vw;
    overflow-x: hidden;
    padding-inline: max(1rem, env(safe-area-inset-left, 0px));
  }

  body.sr-site .nav-mobile-link {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* ── Hero ── */
  body.sr-site .hero-stage,
  body.sr-site .sr-aether-hero {
    padding-top: calc(var(--sr-nav-offset, 4.75rem) + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 1.15rem !important;
    padding-inline: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
  }

  body.sr-site .sr-aether-inner,
  body.sr-site .sr-aether-stage,
  body.sr-site .sr-aether-complication {
    min-width: 0;
    max-width: 100%;
  }

  body.sr-site .hero-visual-h1:not(.hero-terminal-title) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  body.sr-site .hero-stage-shell {
    width: 100%;
    padding-inline: 0;
  }

  body.sr-site .hero-stage .inline-flex.items-center.gap-3 {
    gap: 0.4rem !important;
    margin-bottom: 0.75rem !important;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  body.sr-site .hero-stage .inline-flex.items-center.gap-3 span.h-px {
    display: none;
  }

  body.sr-site .hero-stage .inline-flex.items-center.gap-3 span.text-\[10px\] {
    font-size: 0.58rem !important;
    letter-spacing: 0.12em !important;
    line-height: 1.3;
    text-align: center;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body.sr-site .hero-freq-value,
  body.sr-site #hero-freq {
    font-size: clamp(2.45rem, 14vw, 3.65rem) !important;
    line-height: 1 !important;
    max-width: 100%;
  }

  body.sr-site .hero-readout-shell {
    width: 100%;
    max-width: 100%;
    padding: 0.7rem 0.5rem !important;
    border-radius: 1rem !important;
  }

  body.sr-site .hero-readout-sub {
    font-size: 0.8rem !important;
    line-height: 1.35;
    padding-inline: 0.1rem;
  }

  body.sr-site .hero-readout-status {
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center;
    gap: 0.3rem !important;
    font-size: 0.68rem !important;
    line-height: 1.35;
    padding-inline: 0.1rem;
  }

  body.sr-site .hero-stats-row {
    gap: 0.38rem !important;
    margin-bottom: 0.75rem !important;
    width: 100%;
  }

  body.sr-site .hero-stats-row .card {
    flex: 1 1 calc(50% - 0.2rem) !important;
    min-width: 0 !important;
    padding: 0.38rem 0.32rem !important;
    justify-content: center;
  }

  body.sr-site .hero-stats-row .card:last-child {
    flex: 1 1 100% !important;
    max-width: 11rem;
    margin-inline: auto;
  }

  body.sr-site .hero-stats-row .card span {
    font-size: 0.64rem !important;
  }

  body.sr-site .hero-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
    width: 100%;
  }

  body.sr-site .hero-cta-row a {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.8rem 0.85rem !important;
    font-size: 0.86rem !important;
    border-radius: 1rem !important;
  }

  body.sr-site .hero-audience-wrap {
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
  }

  body.sr-site .hero-audience-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
    padding: 0.8rem !important;
  }

  body.sr-site .hero-audience-countline {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    min-width: 0;
  }

  body.sr-site .hero-audience-text,
  body.sr-site .hero-audience-desc {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body.sr-site .hero-audience-signal {
    width: 100%;
    justify-content: center;
  }

  body.sr-site .hero-features-strip {
    margin-top: 0.85rem !important;
    gap: 0.45rem !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.sr-site .hero-features-strip .card {
    padding: 0.6rem 0.4rem !important;
    min-width: 0;
  }

  body.sr-site .hero-features-strip .text-xs {
    font-size: 0.66rem !important;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  body.sr-site .hero-features-strip .text-\[10px\] {
    font-size: 0.56rem !important;
    line-height: 1.28;
    overflow-wrap: anywhere;
  }

  /* ── Dashboard ── */
  body.sr-site #dashboard {
    padding-top: 2.25rem !important;
    padding-bottom: 1.75rem !important;
  }

  body.sr-site #dashboard .text-3xl,
  body.sr-site #guide .text-3xl,
  body.sr-site #about .text-3xl {
    font-size: clamp(1.28rem, 5.8vw, 1.7rem) !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
  }

  body.sr-site .card,
  body.sr-site .card.p-5,
  body.sr-site .card.p-4,
  body.sr-site .card.p-6 {
    padding: 0.8rem !important;
    min-width: 0;
    overflow: hidden;
  }

  body.sr-site .spectro-header,
  body.sr-site .sr-prism-spectro-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.45rem !important;
  }

  body.sr-site .spectro-header-main h3 {
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
  }

  body.sr-site .spectro-header-main p {
    overflow-wrap: anywhere;
  }

  body.sr-site .spectro-container {
    max-width: 100%;
    overflow: hidden;
    border-radius: 0.65rem;
  }

  body.sr-site .spectro-container img,
  body.sr-site #main-spectro {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 9.5rem;
    max-height: 14rem;
    object-fit: contain !important;
    display: block;
  }

  body.sr-site .spectro-overlay-note {
    max-width: calc(100% - 0.75rem);
    font-size: 0.56rem !important;
    line-height: 1.25;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  body.sr-site .spectro-marker-badge {
    font-size: 0.5rem !important;
    max-width: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.sr-site .spectro-analysis-grid,
  body.sr-site .spectro-insight-grid {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
  }

  body.sr-site .spectro-insight-value {
    font-size: 1.05rem !important;
    word-break: break-word;
  }

  body.sr-site .live-note {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.45rem !important;
    width: 100%;
  }

  body.sr-site .live-note-headline,
  body.sr-site .live-note-sub {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body.sr-site .chart-tab-row {
    margin-inline: 0;
    padding-bottom: 0.35rem;
  }

  body.sr-site .tab-btn {
    font-size: 0.68rem !important;
    padding: 0.38rem 0.6rem !important;
    max-width: 10.5rem;
  }

  body.sr-site #live-freq-chart-wrap {
    min-height: 10.5rem;
    max-width: 100%;
    overflow: hidden;
  }

  body.sr-site #solar.grid-cols-2,
  body.sr-site .grid.grid-cols-2,
  body.sr-site .grid.grid-cols-2.sm\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
  }

  body.sr-site .metric-card .text-3xl {
    font-size: 1.55rem !important;
  }

  body.sr-site .metric-card span.uppercase,
  body.sr-site .metric-card .text-\[10px\] {
    font-size: 0.56rem !important;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body.sr-site .harmonic-freq {
    font-size: 1.45rem !important;
  }

  body.sr-site .sr-viz-panel {
    padding: 0.8rem !important;
  }

  body.sr-site .sr-viz-panel-title {
    font-size: 0.86rem !important;
  }

  body.sr-site .sr-viz-panel-sub {
    font-size: 0.66rem !important;
  }

  body.sr-site .sr-viz-live-badge {
    font-size: 0.58rem !important;
    flex-shrink: 0;
  }

  body.sr-site .sr-viz-legend {
    flex-wrap: wrap;
    gap: 0.3rem 0.55rem;
    font-size: 0.6rem;
  }

  body.sr-site #kp-chart,
  body.sr-site #wind-chart {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* ── Guide / SEO ── */
  body.sr-site #guide,
  body.sr-site .sr-seo-section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  body.sr-site .sr-seo-title {
    font-size: clamp(1.2rem, 5.2vw, 1.55rem) !important;
  }

  body.sr-site .sr-seo-lead,
  body.sr-site .sr-seo-paragraph {
    font-size: 0.82rem !important;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  /* ── FAQ ── */
  body.sr-site .sr-faq-trigger {
    align-items: flex-start !important;
    gap: 0.45rem !important;
    padding: 0.85rem 0.75rem !important;
    text-align: left !important;
  }

  body.sr-site .sr-faq-question {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body.sr-site .sr-faq-answer p {
    font-size: 0.78rem !important;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  /* ── Footer ── */
  body.sr-site .footer-premium > .max-w-7xl {
    padding: 1.75rem max(0.75rem, env(safe-area-inset-left, 0px)) 1.25rem !important;
  }

  body.sr-site .sr-footer-brand-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
  }

  body.sr-site .sr-footer-desc {
    font-size: 0.78rem !important;
    line-height: 1.5;
  }

  body.sr-site .sr-footer-columns,
  body.sr-site .footer-premium-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  body.sr-site .sr-footer-col h4 {
    margin-bottom: 0.5rem !important;
  }

  body.sr-site .sr-footer-lang-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.32rem !important;
  }

  body.sr-site .sr-footer-lang-grid a,
  body.sr-site .sr-footer-lang-pill {
    min-width: 0;
    flex: 0 1 auto;
  }

  body.sr-site .sr-footer-meta {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.85rem !important;
  }

  body.sr-site .sr-footer-meta-left,
  body.sr-site .sr-footer-meta-right,
  body.sr-site .sr-partner-row {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  body.sr-site .sr-footer-chips {
    flex-wrap: wrap;
    gap: 0.32rem;
  }

  body.sr-site .back-to-top {
    right: max(0.7rem, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    bottom: calc(max(0.75rem, env(safe-area-inset-bottom, 0px)) + 4.35rem) !important;
    z-index: 10015 !important;
  }

  body.sr-site:not(.sr-past-hero) .back-to-top {
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
  }

  body.sr-site .star-modal-shell {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
    margin: 0.5rem auto !important;
  }
}

@media (max-width: 359px) {
  body.sr-site .hero-stats-row .card {
    flex: 1 1 100% !important;
    max-width: 100%;
  }

  body.sr-site .hero-features-strip {
    grid-template-columns: 1fr !important;
  }
}