/* RESPONSIVE_VISUAL.md — responsive rules only; the 1024px reference stays untouched. */
.mobile-menu { display: none; }

@media (min-width: 761px) and (max-width: 899px) {
  .header-inner { width: calc(100% - 40px); gap: 10px; }
  .brand { font-size: 16px; gap: 10px; }
  .site-header nav { margin-right: 0; gap: 12px; }
  .language-select summary { max-width: 108px; overflow: hidden; }
  .language-select summary span { overflow: hidden; text-overflow: ellipsis; }
  .page-shell { width: calc(100% - 40px); }
  .hero { padding: 28px 0 22px; }
  .hero h1 { font-size: 32px; }
  .top-grid,
  .second-grid { grid-template-columns: minmax(0, 1fr); height: auto; }
  .top-grid > .card { height: auto; min-height: 0; }
  .second-grid > .distance-card,
  .converter-card { height: auto; min-height: 0; overflow: visible; }
  .second-grid > .distance-card { padding-left: 17px; padding-right: 17px; }
  .distance-chart { height: 133px; padding-top: 35px; }
  .distance-chart .chart-line { top: 78px; }
  .distance-chart .chart-labels { margin-top: 19px; }
  .converter-grid { grid-template-columns: minmax(0, 1fr); }
  .common-conversions { height: auto; margin: 12px 0 0; }
  .formula-grid { grid-template-columns: 1fr 1fr; }
  .formula-grid article:last-child { grid-column: 1 / -1; border-top: 1px solid #dce9f7; }
}

@media (max-width: 760px) {
  html, body { overflow-x: clip; }
  .page-shell { width: calc(100% - 24px); }
  .top-grid,
  .second-grid,
  .converter-grid { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .top-grid > *,
  .second-grid > *,
  .converter-grid > * { min-width: 0; max-width: 100%; }
  .copy-top { display: none; }
  .results-header { padding-right: 12px; }
  .header-actions { margin-left: auto; }

  .visual-card { width: 100%; min-width: 0; overflow: hidden; }
  .visual-card .display-visual { width: 100%; height: auto; min-width: 0; }
  .visual-card .s3-monitor-row { width: 100%; height: auto; min-width: 0; align-items: flex-end; }
  .visual-card .s3-side-measure { align-self: stretch; }
  .visual-card .s3-side-measure > svg { top: 4px; bottom: 34px; height: auto; }
  .visual-card .s3-side-measure > div { top: 50%; transform: translateY(-50%); }
  .visual-card .s3-device { min-width: 0; height: auto; flex: 1 1 auto; padding-bottom: 13px; }
  .visual-card .screen-frame { width: 100%; height: auto; min-width: 0; aspect-ratio: 1.6; }
  .visual-card .base { left: -7px; right: -5px; }

  .formula-grid { grid-template-columns: minmax(0, 1fr); }
  .formula-grid article,
  .formula-grid article:last-child { border-right: 0; border-bottom: 1px solid #dce9f7; }
  .formula-grid article:last-child { border-bottom: 0; }
}

@media (max-width: 640px) {
  .site-header { height: auto; min-height: 58px; }
  .header-inner { min-height: 58px; padding: 4px 0; gap: 8px; flex-wrap: nowrap; }
  .brand { gap: 8px; min-width: 0; }
  .brand-icon { width: 24px; height: 24px; flex: none; }
  .language-select { margin-left: auto; flex: 0 1 118px; }
  .language-select select { width: 100%; max-width: 118px; }
  .mobile-menu { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--navy); }
  .mobile-menu span { display: block; width: 16px; height: 1.5px; margin: 2px 0; border-radius: 2px; background: currentColor; }
  header nav { display: none; }
  .site-header.nav-open .header-inner { flex-wrap: wrap; }
  .site-header.nav-open nav { display: grid; order: 3; width: 100%; height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 2px 0 6px; }
  .site-header.nav-open nav a { min-height: 38px; justify-content: center; }
  .site-header.nav-open nav a.active:after { bottom: 1px; left: 20%; right: 20%; }
}

@media (max-width: 390px) {
  .site-header { min-height: 0; }
  .header-inner { min-height: 54px; padding: 4px 0; }
  .brand { font-size: 14px; }
  .language-select { flex-basis: 102px; }
  .language-select select { max-width: 102px; }
  .hero { padding-top: 20px; }
  .hero h1 { font-size: 26px; }
  .hero p { font-size: 15px; }
  .visual-card { padding-left: 14px; padding-right: 14px; }
  .visual-card .s3-top-measure { margin-left: 51px; margin-right: 13px; }
  .visual-card .s3-side-measure { width: 52px; flex-basis: 52px; }
  .visual-card .s3-side-measure > svg { right: 5px; }
  .visual-card .s3-side-measure > div { width: 47px; }
}