/* Mobile clarity layer — desktop presentation remains unchanged. */
@media (max-width: 700px) {
  html { overflow-x: clip; scroll-padding-top: 16px; }
  body { overflow-x: clip; }
  body > div, main, main > *, section, article, aside { min-width: 0; max-width: 100%; }

  header {
    position: relative !important;
    top: auto;
    z-index: auto;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    min-height: 64px;
    padding: 9px 16px 8px !important;
    border-bottom: 1px solid rgba(7,63,51,.14);
    background: var(--paper) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  header .brand { min-width: 0; }
  header .brand img { width: 116px; max-width: 100%; }
  header .brand small { display: none; }
  header .header-actions { grid-column: 2; grid-row: 1; display: flex; gap: 5px; align-items: center; }
  header .language, header .theme-toggle { min-height: 38px; padding: 7px 9px !important; font-size: 10px !important; }
  header > nav {
    grid-column: 1 / -1;
    display: flex !important;
    gap: 6px;
    width: calc(100vw - 32px);
    margin: 0;
    padding: 2px 0 1px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  header > nav::-webkit-scrollbar { display: none; }
  header > nav a {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 9px 12px !important;
    border: 1px solid rgba(7,63,51,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.42);
    font-size: 9px !important;
    line-height: 1;
    scroll-snap-align: start;
  }
  header > nav a[aria-current] { background: #073f33; color: #f7f3e9 !important; }

  .hero { display: block !important; min-height: auto !important; padding: 54px 18px 40px !important; }
  .hero > div:first-child { width: 100%; }
  .hero h1 { max-width: 9ch; font-size: clamp(48px, 14.2vw, 66px) !important; line-height: .92 !important; }
  .hero .intro { max-width: 36ch; font-size: 16px !important; line-height: 1.65; }
  .hero .visual { width: 100%; min-height: 430px; margin-top: 38px; border-radius: 16px; overflow: hidden; }
  .edition { display: grid !important; grid-template-columns: 1fr; gap: 6px; padding: 15px 18px !important; }
  .edition span:last-child { display: none; }

  .section, .mission, .signup { padding-inline: 18px !important; }
  .section { padding-block: 70px !important; }
  .section-heading, .sim-heading, .data-lab-heading { display: block !important; }
  .section-heading h2, .sim-heading h2, .data-lab-heading h2 { font-size: clamp(42px, 12vw, 56px) !important; line-height: .98 !important; }
  .section-heading > p, .sim-heading > p, .data-lab-heading > p { margin-top: 20px; }

  .audiences { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 9px !important; }
  .audiences button { min-height: 126px; padding: 16px 13px !important; border-radius: 14px !important; }
  .audiences button b { font-size: 13px !important; }
  .audiences button small { font-size: 10px !important; line-height: 1.45; }

  .ripple-stage { margin-inline: 0 !important; border-radius: 16px !important; }
  .briefing { display: block !important; }
  .briefing > aside {
    display: flex !important;
    gap: 10px;
    width: calc(100vw - 36px);
    margin-bottom: 18px;
    padding: 2px 1px 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .briefing > aside::-webkit-scrollbar { display: none; }
  .briefing > aside button { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; border-radius: 14px !important; }
  #story-detail { border-radius: 16px !important; }
  .news-tools { align-items: flex-start !important; gap: 12px; }

  .global-hero { min-height: 620px !important; border-radius: 16px !important; }
  .global-intro { padding: 26px 20px !important; }
  .global-intro h2 { font-size: clamp(44px, 12vw, 58px) !important; }
  .global-list {
    display: flex !important;
    gap: 10px;
    width: calc(100vw - 36px);
    padding-bottom: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .global-list::-webkit-scrollbar { display: none; }
  .global-list button { flex: 0 0 82%; scroll-snap-align: start; border-radius: 14px !important; }
  .global-detail { border-radius: 16px !important; }

  .simulator { display: block !important; }
  .sim-controls { position: static !important; width: 100% !important; margin-bottom: 16px; border-radius: 16px !important; }
  .sim-experience, .sim-visual, .sim-result { border-radius: 16px !important; }
  .sim-result-grid { grid-template-columns: 1fr !important; }

  .data-lab { display: block !important; border-radius: 16px !important; overflow: hidden; }
  .data-lab-menu { width: 100% !important; padding: 18px 14px 10px !important; }
  #data-tabs {
    display: flex !important;
    gap: 8px;
    width: calc(100vw - 64px);
    padding-bottom: 9px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  #data-tabs::-webkit-scrollbar { display: none; }
  #data-tabs button { flex: 0 0 76%; min-height: 72px; scroll-snap-align: start; border-radius: 12px !important; }
  .data-lab-note { display: none; }
  .data-lab-stage { padding: 24px 14px !important; }
  .data-stage-top { display: block !important; }
  .data-stage-stat { margin-top: 18px; text-align: left !important; }
  .data-chart { min-height: 300px; overflow-x: auto; }
  .rank-row { grid-template-columns: minmax(82px,.8fr) 1fr auto !important; gap: 8px !important; }

  .mission { padding: 72px 18px !important; }
  .mission-manifesto { margin-inline: 0 !important; }
  .manifesto-grid { grid-template-columns: 1fr !important; }
  .manifesto-statement h2, .owners-heading h2 { font-size: clamp(42px, 12vw, 57px) !important; }
  .team { grid-template-columns: 1fr !important; gap: 28px !important; width: 100%; max-width: 470px; }
  .team > article { width: 100%; min-width: 0; }
  .portrait-frame { height: 420px !important; }
  .portrait-media { height: 420px !important; width: 255px !important; margin-left: -127.5px !important; }
  .principles { display: grid !important; grid-template-columns: 1fr !important; }

  .signup { padding: 60px 18px !important; }
  .signup-inner { display: block !important; padding: 28px 20px !important; border-radius: 16px !important; }
  .signup form { margin-top: 24px; }
  .signup-row { display: grid !important; grid-template-columns: 1fr !important; gap: 10px; }
  .signup-row input, .signup-row button { width: 100%; min-height: 48px; }

  footer { display: grid !important; grid-template-columns: 1fr !important; gap: 22px !important; padding: 40px 18px 90px !important; }
  .footer-socials { justify-content: flex-start !important; }
  .chapter-rail { display: none !important; }
  .discovery { left: 12px !important; right: 12px !important; bottom: 12px !important; width: auto !important; max-width: none !important; }
  .discovery #discovery-panel { max-height: min(62vh, 470px); overflow-y: auto; }
}

@media (max-width: 390px) {
  header { padding-inline: 12px !important; }
  header > nav { width: calc(100vw - 24px); }
  .hero, .section, .mission, .signup { padding-inline: 14px !important; }
  .briefing > aside, .global-list { width: calc(100vw - 28px); }
  .briefing > aside button, .global-list button { flex-basis: 88%; }
  .audiences button { min-height: 118px; }
  .profile-socials { grid-template-columns: 1fr !important; }
  .profile-socials a + a { border-left: 0 !important; border-top: 1px solid rgba(7,63,51,.12); }
}

html[data-theme="dark"] header { background: rgba(5,38,31,.95) !important; }
html[data-theme="dark"] header > nav a { background: rgba(255,255,255,.04); border-color: rgba(247,243,233,.14); }

@media (prefers-reduced-motion: reduce) {
  header > nav, .briefing > aside, .global-list, #data-tabs { scroll-behavior: auto !important; }
}