/* Branch 卡片：中等宽度起改为上下折行，终端区占满内容宽 */
@media (max-width: 1280px) {
  .specs-inner.hero-top-block {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 32px;
    align-items: stretch;
  }

  .specs-inner.hero-top-block .specs-left,
  .specs-inner.hero-top-block .specs-right {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: 100%;
  }

  .specs-inner.hero-top-block .specs-right {
    justify-content: flex-start;
    align-self: stretch;
  }

  .hero-top-block .fb-panel.terminal-panel {
    width: 100%;
    max-width: 100%;
  }
}

/* 首屏 slogan：仅 ≤1023px 缩小字号，保持两行布局（与 ≥1024px 衔接） */
@media (max-width: 1023px) {
  .hero-desc {
    font-size: 48px;
    line-height: 1.3;
  }
  .hero-desc-row {
    white-space: nowrap;
  }
}

/* =============================================
   RESPONSIVE — TABLET  (≤ 1024px)
============================================= */
@media (max-width: 1024px) {
  :root {
    --t-display-hero: 85px;
    --t-display-hero-lh: 65px;
    --t-display-hero-ls: -3.2px;
    --t-lead: 15px;
    --t-card-title: 22px;
    --t-card-title-lh: 30px;
    --t-feature-xl: 28px;
    --t-feature-xl-lh: 32px;
    --t-feature-lg: 24px;
    --t-feature-lg-lh: 28px;
    --t-display-cta-lh: 72px;
    --t-display-cta-ls: -3.6px;
  }

  /* .main 已含横向 gutter，避免与 .hero 叠加过宽内边距 */
  .hero {
    padding-left: 0;
    padding-right: 0;
    padding-top: max(
      calc(118px - var(--preview-banner-stack-visible) + var(--preview-banner-stack)),
      calc(
        118px - var(--hero-shift-up) - var(--preview-banner-stack-visible) +
          var(--preview-banner-stack)
      )
    );
    padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
  }

  .hero-title-row {
    padding-left: 0;
    padding-right: 0;
  }

  .terminal-panel { max-width: 100%; }

  .hero-value-card {
    padding: 32px 24px;
    min-height: 176px;
  }

  .features-section { padding: 96px 0 80px; }
  .features-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .feature-mysql  { grid-column: 1 / span 2; grid-row: 1; min-height: 220px; }
  .feature-disposable { grid-column: 1; grid-row: 2; border-left: none; border-top: 1px solid var(--border); padding: 36px; }
  .feature-vector { grid-column: 1; grid-row: 3; padding: 36px; }
  .feature-fulltext { grid-column: 2; grid-row: 2 / span 2; border-left: 1px solid var(--border); flex-direction: column; align-items: flex-start; gap: 24px; padding: 36px; }
  .feature-mysql-inner { position: static; padding: 36px; }
  .search-icon-border { width: 80px; height: 80px; }

  .specs-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0;
    row-gap: 0;
    gap: 48px;
  }
  .specs-inner { padding: 0; }

  .quickstart-block--follow .qs-follow-shell {
    padding: 28px 0;
  }

  .quickstart-block--follow .qs-follow-inner {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .quickstart-block--follow .qs-follow-col--terminal {
    border-top: 1px solid var(--border);
    padding-top: 40px;
    margin-top: 40px;
  }

  .quickstart-block--follow .qs-follow-terminal {
    width: 100%;
    max-width: 100%;
  }

  .api-module-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  /* #api：小屏恢复为卡片流式布局，代码块高度随内容 */
  #api .api-module-grid {
    grid-template-rows: none;
    row-gap: 32px;
  }

  #api .api-module-card {
    display: flex;
    flex-direction: column;
  }

  #api .api-module-grid > .api-module-card > .api-module-card__title,
  #api .api-module-grid > .api-module-card > .api-module-card__desc,
  #api .api-module-grid > .api-module-card > .api-code-block {
    grid-column: auto;
    grid-row: auto;
  }

  #api .api-code-block {
    height: auto;
    align-self: stretch;
    margin-bottom: 0;
  }

  #api .api-module-card__pre {
    flex: 0 1 auto;
  }

  .api-module-section {
    padding: 0 var(--align-pad-x) 0px;
  }

  /* .main 已有横向 gutter，避免与 API/FAQ 区块再叠一层 align-pad */
  .api-module-section,
  .faq-section {
    padding-left: 0;
    padding-right: 0;
  }

  .specs-heading-bar {
    grid-column: 1;
    grid-row: auto;
  }
  .specs-left {
    grid-column: 1;
    grid-row: auto;
  }
  .specs-right {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
  }

  .cta-section { padding: 96px 0 120px; }

  .hero-terminal-grid {
    grid-template-columns: 1fr;
  }
  .hero-terminal-col--agent {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .usecase-content-inner {
    flex-direction: column;
  }
  .usecase-illustration {
    width: 100%;
    height: auto;
    min-height: 200px;
  }

  .footer-brand { max-width: 380px; }
  .footer-links { gap: 48px; }
}

/* =============================================
   RESPONSIVE — MOBILE  (≤ 768px)
============================================= */
@media (max-width: 768px) {
  :root {
    --t-display-hero: 58px;
    --t-display-hero-lh: 45px;
    --t-display-hero-ls: -2.2px;
    --t-lead: 13px;
    --t-lead-lh: 22px;
    --t-tab: 12px;
    --t-terminal: 13px;
    --t-terminal-lh: 22px;
    --t-card-title: 18px;
    --t-card-title-lh: 24px;
    --t-feature-xl: 22px;
    --t-feature-xl-lh: 28px;
    --t-feature-sm: 18px;
    --t-feature-sm-lh: 24px;
    --t-feature-lg: 20px;
    --t-feature-lg-lh: 26px;
    --t-h2: 32px;
    --t-h2-lh: 36px;
    --t-h2-ls: -1.6px;
    --t-display-cta: 40px;
    --t-display-cta-lh: 44px;
    --t-display-cta-ls: -2px;
  }

  .main {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }

  /* Preview notice：首行徽章+文案并排；折行后行与徽章左缘对齐（shape-outside 限制绕排高度） */
  .preview-banner {
    text-align: left;
    height: auto;
    min-height: 44px;
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(44px, calc(36px + env(safe-area-inset-right, 0px)));
  }
  .preview-banner__inner {
    display: flow-root;
    text-align: left;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .preview-banner__badge {
    float: left;
    margin-right: 8px;
    margin-top: 1px;
    /* 环绕高度与 .preview-banner__text 14px / line-height 21px 首行一致（不用徽章上 11px 的 em） */
    -webkit-shape-outside: polygon(0 0, 100% 0, 100% 21px, 0 21px);
    shape-outside: polygon(0 0, 100% 0, 100% 21px, 0 21px);
  }
  @supports not (shape-outside: polygon(0 0, 100% 0, 100% 1px, 0 1px)) {
    .preview-banner__badge {
      -webkit-shape-outside: none;
      shape-outside: none;
    }
  }
  .preview-banner__text {
    display: block;
    text-align: left;
    overflow-wrap: break-word;
  }

  /* Header */
  .nav { display: none; }
  .btn-connect { display: none; }
  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
    width: 32px;
    height: 32px;
  }
  .header {
    position: relative;
    padding: 16px max(20px, env(safe-area-inset-right, 0px)) 17px
      max(20px, env(safe-area-inset-left, 0px));
  }
  .github-btn {
    width: 32px;
    height: 32px;
    order: 3;
  }
  .lang-dropdown-wrapper {
    order: 3;
  }
  .lang-toggle {
    width: 32px;
    height: 32px;
    order: 3;
  }

  /* Hero：与 .main 的 gutter 对齐，不再双重 padding */
  .hero {
    padding-left: 0;
    padding-right: 0;
    padding-top: max(
      calc(132px - var(--preview-banner-stack-visible) + var(--preview-banner-stack)),
      calc(
        132px - var(--hero-shift-up) - var(--preview-banner-stack-visible) +
          var(--preview-banner-stack)
      )
    );
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }
  .hero-title-row {
    padding-left: 0;
    padding-right: 0;
  }

  .hero-heading {
    gap: 20px;
    transform: translateY(0);
  }

  /* 窄屏：展开为四行并使用流体字号 + 允许折行，避免 48px nowrap 撑破视口 */
  .hero-desc {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .hero-desc-row {
    display: contents;
  }

  .hero-desc-line1,
  .hero-desc-line2,
  .hero-desc-line3,
  .hero-desc-line4 {
    display: block;
    font-size: clamp(38px, 12vw, 68px);
    line-height: 1.22;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .hero-terminal-head .terminal-tabs {
    gap: 24px;
    flex-wrap: nowrap;
    padding-left: 16px;
  }

  /* 与桌面一致保持 16px 字号（继承 .fb-tab.tab），仅保留窄屏内边距 */
  .hero-terminal-head .fb-tab.tab {
    padding-left: 0;
  }

  .hero > .terminal-panel {
    margin-top: 40px;
  }
  .hero-terminal-head {
    padding: 10px 0;
  }
  .hero-terminal-lights {
    display: none;
  }
  .hero-ascii-bg { display: none; }
  .hero-subtitle { gap: 6px; flex-wrap: wrap; }
  .hero-figma-btn-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: clamp(12px, 2vh, 24px);
  }
  .hero-figma-btn-wrap .hero-figma-btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
  }

  .quickstart-block--follow .qs-follow-step-num {
    font-size: 28px;
    line-height: 34px;
    min-height: 44px;
  }
  .quickstart-block--follow .qs-follow-shell {
    padding: 24px 0;
  }

  .quickstart-block--follow .qs-follow-terminal {
    padding: 12px 16px 20px;
  }
  .quickstart-block--follow .qs-follow-cli-stack {
    padding-right: 0;
  }

  .api-module-card {
    padding: 0px 0px 20px;
  }

  .hero-terminal-col {
    padding: 20px;
  }

  .hero-terminal-col--human {
    padding-right: 20px;
  }

  .hero-terminal-inner {
    padding: 20px;
    min-height: 0;
  }
  .hero-terminal-inner .terminal-label {
    font-size: var(--t-terminal);
    line-height: var(--t-terminal-lh);
  }
  .hero-terminal-inner .terminal-cmd {
    font-size: var(--t-terminal);
    line-height: var(--t-terminal-lh);
  }
  .hero-terminal-inner .terminal-cmd [data-i18n="heroTerminalAgentL2"],
  .cta-terminal-wrap .terminal-panel .terminal-cmd [data-i18n="heroTerminalAgentL2"] {
    line-height: var(--t-terminal-lh);
  }
  /* Terminal */
  .terminal-panel { border-radius: 0; }
  .tab { padding: 6px 16px; }
  .terminal-body { padding: 16px; }
  .terminal-label { font-size: var(--t-label); }
  .specs-item-desc { font-size: var(--t-label); }

  .hero-value-section {
    padding: 0;
  }
  .usecase-section {
    padding: 0 20px 60px;
    gap: 0;
  }
  .usecase-content-box {
    padding: 32px 20px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.01);
    margin-top: 32px;
  }
  .usecase-title {
    font-size: 24px;
    line-height: 32px;
  }
  .features-heading-row {
    padding: 96px 20px 28px;
  }
  /* #features：与 .main 的 gutter 对齐，标题行不再叠加左右内边距 */
  #features .features-heading-row {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 28px;
  }
  /* #api 区块自身含横向 padding，标题行不再叠加左右内边距 */
  #api .features-heading-row {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 28px;
  }
  /* #quickstart 的 .api-module-inner 已去掉横向 padding，避免标题行再叠一层 */
  #quickstart .features-heading-row {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 28px;
  }
  .hero-value-section-heading {
    padding: 0;
  }
  .hero-value-row-top,
  .hero-value-row-single,
  .hero-value-row-bottom {
    grid-template-columns: 1fr;
  }
  .specs-inner.hero-top-block {
    padding: 28px 20px;
    align-items: stretch;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .specs-inner.hero-top-block .specs-left {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
  }
  .specs-inner.hero-top-block .specs-right {
    grid-column: 1;
    grid-row: auto;
    align-items: stretch;
    justify-content: flex-start;
  }
  .hero-value-card {
    min-height: auto;
    padding: 28px 20px;
  }
  /* Features */
  .features-section { padding: 96px 0 64px; }
  .features-grid {
    display: flex;
    flex-direction: column;
    background: transparent;
    gap: 0;
  }
  .feature-card {
    border: none;
    border-top: 1px solid var(--border-faint);
  }
  .feature-mysql { min-height: auto; }
  .feature-mysql-inner {
    position: static;
    padding: 36px 20px;
  }
  .feature-disposable {
    border-left: none;
    border-top: 1px solid var(--border-faint);
    padding: 32px 20px;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  .feature-disposable .feature-icon { margin-bottom: 0; }
  .feature-vector {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 32px 20px;
    justify-content: flex-start;
  }
  .feature-vector .feature-icon { margin-bottom: 0; flex-shrink: 0; }
  .feature-fulltext {
    border-left: none;
    border-top: 1px solid var(--border-faint);
    flex-direction: column;
    padding: 32px 20px;
    gap: 20px;
  }
  .search-icon-border { display: none; }
  .feature-desc { font-size: var(--t-label); line-height: 1.33; }

  /* Specs — 标题上方间距由 .features-heading-row 统一为 96px */
  .specs-section { padding: 0 0 64px; }
  .specs-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 20px;
  }
  .specs-heading-bar {
    order: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding-bottom: 0;
  }
  .specs-left {
    display: contents;
  }
  .specs-right {
    order: 2;
    width: 100%;
    justify-content: flex-start;
  }
  .specs-items {
    order: 3;
  }
  .specs-heading { padding-bottom: 0; }
  .specs-items { gap: 28px; }
  .specs-item-desc br { display: none; }
  .specs-terminal-body { padding: 24px 20px; }

  /* CTA */
  .cta-heading {
    font-size: 36px;
    line-height: 44px;
  }
  .cta-section { padding: 96px 0 72px; gap: 40px; }
  .cta-buttons {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }
  .cta-btn {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 24px 20px;
  }
  .cta-btn:last-child { border-bottom: none; }

  /* FAQ：问题标题略小于桌面，避免窄屏视觉过重 */
  .faq-question {
    font-size: 15px;
    line-height: 1.45;
  }

  /* FAQ：回答正文比桌面小 2px（16→14） */
  .faq-answer {
    font-size: 14px;
    line-height: 22px;
  }

  /* Footer */
  .footer { padding: 48px var(--align-pad-x) 32px; }
  .footer-top {
    flex-direction: column;
    gap: 32px;
  }
  .footer-brand { max-width: 100%; }
  .footer-links { gap: 40px; }
  .footer-polygon-wrap { display: none; }
}

/* =============================================
   RESPONSIVE — NARROW PHONES  (≤ 480px)
============================================= */
@media (max-width: 480px) {
  :root {
    --t-display-hero: 52px;
    --t-display-hero-lh: 40px;
  }

  .main {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .hero-desc-line1,
  .hero-desc-line2,
  .hero-desc-line3,
  .hero-desc-line4 {
    font-size: clamp(33px, 11vw, 60px);
  }

  .features-heading-row {
    padding-top: 72px;
    padding-bottom: 22px;
  }

  .usecase-section {
    padding-left: 0;
    padding-right: 0;
  }

  .usecase-content-box {
    padding-left: 16px;
    padding-right: 16px;
  }

  .specs-inner {
    padding-left: 0;
    padding-right: 0;
  }

  .hero-value-card {
    padding-left: 16px;
    padding-right: 16px;
  }

  .feature-mysql-inner,
  .feature-disposable,
  .feature-vector,
  .feature-fulltext {
    padding-left: 16px;
    padding-right: 16px;
  }

  .specs-inner.hero-top-block {
    padding-left: 16px;
    padding-right: 16px;
  }

  .header {
    padding: 16px max(16px, env(safe-area-inset-right, 0px)) 17px
      max(16px, env(safe-area-inset-left, 0px));
  }
}

/* =============================================
   RESPONSIVE — SMALL MOBILE  (≤ 390px)
============================================= */
@media (max-width: 390px) {
  :root {
    --t-display-hero: 45px;
    --t-display-hero-lh: 35px;
    --t-display-hero-ls: -1.7px;
    --t-display-cta: 32px;
    --t-display-cta-lh: 36px;
    --t-display-cta-ls: -1.6px;
    --t-h2: 26px;
    --t-h2-lh: 30px;
  }

  .cta-heading {
    font-size: var(--t-display-cta);
    line-height: var(--t-display-cta-lh);
  }

  .specs-heading-bar {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
  }
}

/* =============================================
   RESPONSIVE — EXTRA-NARROW  (≤ 360px)
============================================= */
@media (max-width: 360px) {
  :root {
    --t-display-hero: 38px;
    --t-display-hero-lh: 34px;
    --t-display-hero-ls: -1.4px;
  }

  .hero-desc-line1,
  .hero-desc-line2,
  .hero-desc-line3,
  .hero-desc-line4 {
    font-size: clamp(29px, 10vw, 52px);
  }
}