/* Preserve the desktop composition; reflow the same content for smaller screens. */
@media (max-width: 1099px) {
  body { overflow-x: visible; }
  .shell { width: calc(100% - 64px); }
  .site-header { height: auto; min-height: 112px; flex-wrap: wrap; gap: 12px 24px; padding-block: 20px; }
  .site-header nav { order: 3; flex: 1 0 100%; justify-content: space-between; gap: 12px; }
  .site-header nav a { display: flex; align-items: center; min-height: 44px; }
  .header-tools { flex-wrap: wrap; justify-content: flex-end; gap: 16px; }
}

@media (max-width: 900px) {
  .shell { width: calc(100% - 48px); }
  .hero { min-height: 0; padding-top: 44px; padding-bottom: 48px; }
  .hero-intro { align-items: flex-start; flex-direction: column; gap: 26px; }
  .hero h1 { font-size: clamp(48px, 8vw, 68px); }
  .hero-copy { width: auto; max-width: 42ch; padding: 0; }
  .hero-copy p { margin-bottom: 14px; }
  .wordmark-stage { height: clamp(150px, 25vw, 225px); margin-top: 34px; }
  .hero-bottom { gap: 24px; padding-top: 38px; }
  .hero-bottom > span { max-width: 27ch; text-align: right; }

  .genesis, .questions-section, .ecosystem-intro,
  .platform-layout, .warehouse-layout, .agent-heading, .agent-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .genesis { min-height: 0; padding-block: 65px 80px; }
  .genesis-art { width: 100%; max-width: 440px; height: 380px; margin-inline: auto; }
  .genesis-copy { max-width: 640px; }
  .genesis-copy h2 { font-size: 52px; }
  .genesis-copy > p:not(.lead) { max-width: 58ch; }
  .participation { padding-block: 60px 80px; }
  .participation-heading, .manifesto-heading { align-items: flex-start; flex-direction: column; gap: 24px; }
  .participation-heading h2, .questions-section h2 { font-size: clamp(36px, 6vw, 48px); }
  .participation-start, .participation-heading > p, .manifesto-heading p { width: auto; max-width: 48ch; }
  .participation-steps { gap: 40px; }
  .ecosystem { padding-block: 70px; }
  .ecosystem-intro h2, .manifesto-heading h2 { font-size: clamp(40px, 6vw, 56px); }
  .ecosystem-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 30px; margin-top: 40px; }
  .ecosystem-path li:not(:last-child)::after { display: none; }
  .manifesto { padding-block: 65px 75px; }
  .protocol-flow { margin-left: 0; margin-top: 44px; }
  .phase-panel { gap: 30px; }
  .phase-panel > div { min-width: 0; }
  .phase-status { white-space: normal; }
  .questions-section { padding-block: 65px 75px; }
  .closing { min-height: 0; padding-block: 65px 110px; }
  .closing > p { font-size: clamp(48px, 8vw, 76px); }
  .closing-code { right: 0; bottom: 48px; max-width: 100%; }

  .platform-view, .agent-view, .vision-view { padding-block: 40px 72px; }
  .platform-heading h1, .agent-heading h1, .vision-heading h1 { font-size: clamp(44px, 7vw, 60px); }
  .platform-layout, .warehouse-layout { margin-top: 38px; }
  .platform-main, .platform-aside, .platform-heading, .warehouse-wallet-identity,
  .warehouse-summary, .warehouse-detail, .agent-access, .agent-guidance { min-width: 0; }
  .platform-aside, .agent-guidance { width: 100%; max-width: 620px; }
  .platform-aside h2 { max-width: 24ch; }
  .platform-aside .metric-pair { max-width: 440px; }
  .warehouse-wallet { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-block: 32px; }
  .warehouse-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .warehouse-summary dd { white-space: normal; overflow-wrap: anywhere; }
  .warehouse-wallet > .primary-button { justify-self: start; max-width: 100%; }
  .warehouse-section-heading { align-items: flex-start; flex-wrap: wrap; gap: 8px 20px; }
  .warehouse-section-heading > span { white-space: normal; }
  .warehouse-table, .market-table { table-layout: fixed; max-width: 100%; }
  .warehouse-table th, .warehouse-table td, .market-table th, .market-table td { overflow-wrap: anywhere; }
  .warehouse-asset-actions { flex-wrap: wrap; gap: 12px 28px; }
  .market-book-heading { flex-wrap: wrap; gap: 10px 24px; }
  .market-table th { padding-right: 10px; }
  .market-table th:last-child { padding-right: 0; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field input { min-width: 0; max-width: 100%; }
  .deploy-allocation { flex-wrap: wrap; gap: 30px 56px; }

  .agent-heading h1 { margin-bottom: 20px; }
  .agent-view .agent-login { max-width: 380px; white-space: normal; }
  .agent-workspace { margin-top: 42px; }
  .agent-service-status { margin-bottom: 28px; }
  .agent-guidance { max-width: 65ch; }
  .agent-guidance p, .agent-access-note { max-width: 60ch; }
  .agent-review-content dl > div { flex-wrap: wrap; gap: 5px 24px; }
  .agent-review-content dd { text-align: left; }
  .agent-review-actions { flex-wrap: wrap; }

  .vision-lead { font-size: 29px; }
  .vision-contents { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; margin-bottom: 44px; }
  .vision-contents a { display: flex; align-items: center; min-height: 44px; }
  .vision-article { width: 100%; max-width: 72ch; margin-inline: 0; }
  .vision-article h2 { margin-top: 44px; }
  .vision-table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
  .vision-article table { min-width: 560px; }
  .vision-return { margin-left: 0; }
  .footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; padding-block: 24px; }
  .footer > a { min-height: 44px; }
  .footer > a:last-child { justify-self: start; }
}

@media (max-width: 620px) {
  .shell { width: calc(100% - 40px); }
  .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px 8px; min-height: 0; padding-block: 16px 12px; }
  .site-header .brand { grid-column: 1 / 3; grid-row: 1; gap: 8px; min-width: 0; min-height: 44px; }
  .site-header .brand .brand-name { display: none; }
  .site-header .brand img { width: 25px; height: 25px; }
  .site-header .brand > span:first-of-type { font-size: 21px; }
  .header-tools { display: contents; }
  .header-tools .connect-button { grid-column: 3 / 5; grid-row: 1; justify-content: space-between; gap: 12px; padding-inline: 12px; font-size: 11px; }
  .header-tools .chain { grid-column: 1; grid-row: 2; font-size: 11px; }
  .header-tools .language-switch { grid-column: 2; grid-row: 2; }
  #motion-toggle { grid-column: 3; grid-row: 2; font-size: 11px; }
  .header-tools .rewards-trigger { grid-column: 4; grid-row: 2; font-size: 11px; }
  .site-header nav { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; margin-top: 4px; }
  .site-header nav a { min-width: 0; min-height: 44px; padding-block: 8px; font-size: 13px; }

  .hero { padding-top: 34px; padding-bottom: 35px; }
  .hero h1 { font-size: clamp(42px, 11vw, 62px); }
  .hero-copy p { font-size: 14px; }
  .wordmark-stage { height: clamp(105px, 27vw, 165px); margin-top: 30px; }
  .hero-caption { align-items: flex-start; gap: 16px; }
  .hero-bottom { align-items: flex-start; flex-direction: column; gap: 18px; padding-top: 30px; }
  .hero-bottom > span { max-width: none; text-align: left; font-size: 11px; }
  .genesis { padding-block: 42px 58px; gap: 32px; }
  .genesis-art { height: 300px; max-width: 340px; }
  .art-note { padding-inline: 8px; }
  .genesis-copy h2 { font-size: 44px; }
  .mint-parameters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .mint-parameters dd { font-size: 22px; overflow-wrap: anywhere; }
  .mint-parameters dd > span { display: block; margin-left: 0; }
  .mint-quantity-row { gap: 16px; }
  .quantity-control button { width: 44px; height: 44px; }
  .quantity-control input, .guide-quantity input, .field input, .agent-composer textarea { font-size: 16px; }
  .genesis-actions { flex-wrap: wrap; }
  .participation, .ecosystem, .manifesto, .questions-section { padding-block: 50px; }
  .participation-heading h2, .questions-section h2 { font-size: 36px; }
  .participation-steps, .mint-guide-steps { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 34px; }
  .participation-start { max-width: 100%; }
  .ecosystem-intro h2, .manifesto-heading h2 { font-size: 39px; }
  .ecosystem-intro .lead { font-size: 19px; }
  .ecosystem-path { gap: 18px 12px; }
  .ecosystem-path li { font-size: 16px; }
  .phase-tabs { gap: 16px; }
  .phase-tabs button { font-size: 21px; }
  .phase-panel { flex-direction: column; gap: 18px; margin-top: 28px; min-height: 0; }
  .phase-status { padding-top: 0; }
  .questions summary { gap: 18px; font-size: 15px; }
  .questions details p { margin-right: 0; }
  .closing { padding-block: 48px 100px; }
  .closing > p { font-size: clamp(40px, 10vw, 60px); }
  .text-link { gap: 20px; }

  .platform-view, .agent-view, .vision-view { padding-block: 32px 56px; }
  .platform-heading h1, .agent-heading h1, .vision-heading h1 { font-size: clamp(38px, 10vw, 48px); overflow-wrap: break-word; }
  .platform-lead, .agent-intro { font-size: 15px; }
  .platform-layout, .warehouse-layout, .agent-heading, .agent-workspace { gap: 34px; }
  .platform-aside h2, .agent-guidance h2 { font-size: 28px; }
  .platform-aside .primary-button, .workspace-empty .primary-button { width: 100%; max-width: 100%; gap: 20px; }
  .warehouse-summary { gap: 12px; }
  .warehouse-summary dt { font-size: 11px; }
  .warehouse-summary dd { font-size: 16px; }
  .warehouse-view .workspace-tabs { justify-content: space-between; gap: 18px; }
  .warehouse-view .workspace-tabs button { font-size: 13px; }
  .warehouse-table th, .market-table th { font-size: 11px; line-height: 1.65; }
  .warehouse-empty { min-height: 0; padding-block: 30px; }
  .warehouse-empty h3 { font-size: 26px; }
  .warehouse-empty p, .warehouse-detail > p { font-size: 13px; }
  .warehouse-section-heading h2 { font-size: 20px; }
  .warehouse-receive .secondary-button, .warehouse-help summary, .secondary-button { min-height: 44px; }
  .market-book-heading h2 { font-size: 25px; }
  .market-table .workspace-empty { min-height: 0; padding-top: 24px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .field small { font-size: 12px; }
  .deploy-allocation { gap: 24px 42px; }
  .deploy-view .deploy-economics { margin-top: 42px; }
  .deploy-economics h2 { font-size: 25px; }
  .agent-shortcuts { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .agent-composer-footer { align-items: stretch; flex-direction: column; gap: 16px; }
  .agent-composer-footer p { max-width: none; }
  .agent-message[data-author=user] { margin-left: 16px; }
  .agent-review-content dl > div { flex-direction: column; }
  .vision-lead { font-size: 25px; }
  .vision-contents { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .vision-contents a { max-width: none; font-size: 13px; }
  .vision-article h2 { font-size: 27px; }
  .vision-article p, .vision-article li { font-size: 16px; }
  .footer { column-gap: 18px; }
  .footer p, .footer > span, .footer > a:last-child { font-size: 11px; }
  #agent-dialog { width: calc(100% - 32px); max-width: none; max-height: calc(100svh - 32px); overflow-y: auto; padding: 30px 24px; }
  #agent-dialog h2 { font-size: 30px; }
}