/* Shared responsive layout. Keep the same content and URLs on every device. */
img, svg, video { max-width: 100%; }
:where(main, section, article, aside, header, footer, div) { min-width: 0; }
:where(h1, h2, h3, p, li, a, label, button) { overflow-wrap: anywhere; }
input, select, textarea { max-width: 100%; }
.mobile-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.mobile-table-scroll:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

@media (max-width: 1100px) {
  body > nav { gap: 12px; }
  body > nav .nav-logo { flex: 1 1 auto; min-width: 0; }
  body > nav .brand-wordmark { min-width: 0; }
  body > nav .mobile-menu { flex: 0 0 auto; }
  body > nav .mobile-menu summary {
    min-height: 44px; display: flex; align-items: center; justify-content: center;
    border-radius: 4px; font-size: 14px; line-height: 1.2; list-style: none;
  }
  body > nav .mobile-menu summary::-webkit-details-marker { display: none; }
  body > nav .mobile-menu summary::after { content: ' +'; margin-left: 8px; }
  body > nav .mobile-menu[open] summary::after { content: ' −'; }
  body > nav .mobile-menu ul {
    top: 68px; right: 12px; width: min(320px, calc(100vw - 24px));
    max-height: calc(100dvh - 84px); overflow-y: auto;
    box-shadow: 0 14px 32px #0006; border-radius: 4px;
  }
  body > nav .mobile-menu li a { min-height: 44px; line-height: 1.5; }
}

@media (max-width: 900px) {
  /* Reset intrinsic track widths so long labels cannot widen the page. */
  .mix-grid, .fin-grid, .sales-channels, .blog-grid, .geo-cities,
  .geo-factors-grid, .practical-grid, .form-row, .calculator-layout,
  #software .software-stack { grid-template-columns: minmax(0, 1fr) !important; }
  .calculator-layout > .calculator-panel { padding: 24px !important; }
  .geo-explainer, .geo-takeaway, .workflow-strip, .sales-callout { padding: 28px 24px; }
  .practical-table-wrap { max-width: 100%; }
  .blog-card.featured { grid-column: auto; }
  .blog-categories { flex-wrap: wrap; }
}

@media (max-width: 600px) {
  /* Let content reflow instead of concealing overflow at the body edge. */
  body { overflow-x: visible; }
  body > nav { padding: 0 14px; height: 68px; gap: 10px; }
  body > nav .nav-logo { max-width: none; gap: 8px; }
  body > nav .brand-mark { width: 32px; height: 32px; }
  body > nav .brand-wordmark { font-size: 11px; line-height: 1.3; letter-spacing: 0; }
  body > nav .brand-wordmark .brand-market { font-size: 10px; letter-spacing: 2px; margin-top: 3px; }
  body > nav .mobile-menu summary { padding: 10px; }
  #hero { min-height: auto; padding: 108px 20px 48px; }
  .hero-headline { font-size: clamp(36px, 10vw, 60px); line-height: 1.05; letter-spacing: 1px; }
  .hero-headline .outline { -webkit-text-stroke-width: 1px; }
  .hero-eyebrow, .section-eyebrow { letter-spacing: 1.5px; line-height: 1.7; }
  .hero-eyebrow::before { flex-shrink: 0; width: 22px; }
  .hero-sub { font-size: 16px; margin-bottom: 28px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn-primary, .btn-secondary { max-width: 100%; white-space: normal; text-align: center; min-height: 48px; }
  .hero-actions a { width: 100%; padding: 14px 18px; }
  .hero-stats { margin-top: 36px; padding-top: 28px; }
  .hero-stats .stat-item { width: 100%; }
  .page-context { padding: 96px 20px 0; }
  .page-context h1 { font-size: clamp(30px, 8vw, 40px); line-height: 1.15; }
  .section-title { font-size: clamp(30px, 8vw, 42px); line-height: 1.12; letter-spacing: 1px; }
  .section-header { margin-bottom: 32px; }
  .section-desc { font-size: 16px; }
  #geography, #service-mix, #financials, #sales, #software, #blog, #contact { padding: 44px 20px; }
  .topic-directory { padding: 40px 20px; }
  .topic-directory h2 { font-size: 32px; line-height: 1.15; }
  .topic-grid { grid-template-columns: minmax(0, 1fr); }
  .topic-link, .mix-card, .fin-card, .channel-card, .stack-card,
  .blog-card, .blog-card.featured, .practical-card { padding: 24px; }
  .mix-card h3, .channel-card h3, .blog-card h3, .blog-card.featured h3 { font-size: 28px; line-height: 1.2; }
  .mix-card-number { font-size: 56px; margin-bottom: 0; }
  .geo-tier { padding: 24px 20px; }
  .geo-explainer, .geo-takeaway { padding: 24px; }
  .ratio-visual, .ebitda-calc { padding: 24px 16px; }
  .ratio-label, .ratio-legend, .blog-meta, .blog-categories { flex-wrap: wrap; gap: 12px; }
  .cat-btn { white-space: normal; min-height: 44px; max-width: 100%; }
  .sales-callout { gap: 20px; align-items: flex-start; }
  .callout-content h3 { font-size: 30px; line-height: 1.2; }
  .workflow-strip { padding: 24px; }
  .workflow-node { min-width: 0; width: 100%; }
  .workflow-arrow { align-self: center; }
  .calc-title { font-size: 28px; line-height: 1.2; letter-spacing: 1px; }
  .ebitda-calc .calc-row { gap: 8px; flex-wrap: wrap; }
  .ebitda-calc .calc-row-value { min-width: 0; max-width: 100%; font-size: 14px; }
  .ebitda-calc .calc-row.total .calc-row-value { font-size: 24px; }
  .calculator-layout > .calculator-panel { padding: 20px 16px !important; }
  .calculator-panel input[type='range'] { min-width: 0; }
  .calculator-panel [id^='disp-'], .calculator-panel [id^='res-'] { overflow-wrap: anywhere; }
  #res-ebitda { font-size: clamp(28px, 8vw, 44px) !important; letter-spacing: 0 !important; }
  .practical-section { padding: 40px 20px; }
  .practical-section h2 { font-size: 32px; line-height: 1.2; }
  .practical-note { padding: 20px; }
  .editorial { padding: 100px 20px 48px; }
  .editorial h1 { font-size: clamp(30px, 8vw, 42px); line-height: 1.15; letter-spacing: 0; }
  .editorial h2 { font-size: 28px; line-height: 1.2; }
  .editorial p, .editorial li { font-size: 16px; line-height: 1.8; }
  .editorial-related { padding: 24px 20px; }
  .editorial-meta { line-height: 1.8; }
  .full-article .article-inner { padding: 0 20px; }
  .full-article .article-header h2 { font-size: 30px; }
  .rga.rga { padding: 100px 16px 40px; }
  .rga .rga-card { padding: 20px 16px; }
  .rga .rga-nav { gap: 12px; flex-wrap: wrap; }
  .rga .rga-btn, .rga .rga-link { min-height: 44px; }
  .rga .rga-opt { font-size: 16px; }
  .rga .rga-pill-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .rga .rga-pill-row .rga-bar { grid-column: 1 / -1; order: 3; }
  .rga .rga-summary textarea { font-size: 16px; }
  .hs-form-wrapper, .hs-form-frame { min-width: 0; width: 100%; max-width: 100%; }
  .hs-form-wrapper iframe { max-width: 100%; }
  input:not([type='range']):not([type='checkbox']):not([type='radio']), select, textarea { font-size: 16px; }
  footer { padding: 36px 20px; }
  .footer-links { flex-wrap: wrap; gap: 8px 18px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .reveal { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}