/* Shared CSS for all 360hub-ae specialised pages. Mirrors src-v3 tokens & global rules. */

:root {
  --navy-900: #0B1116;
  --navy-800: #101820;
  --navy-700: #17212B;
  --navy-600: #1F2933;
  --navy-500: #2A3744;
  --sand-50:  #FBF8F2;
  --sand-100: #FAF7F0;
  --sand-200: #F4EFE6;
  --sand-300: #E8DCC8;
  --sand-400: #D8C3A5;
  --brass-600: #A07532;
  --brass-500: #B88A44;
  --brass-400: #C9A45C;
  --grey-700: #3F4750;
  --grey-500: #6B7280;
  --grey-400: #9CA3AF;
  --grey-300: #C7CCD2;
  --grey-200: #E3E6EA;
  --green-700: #4F6F52;
  --line: rgba(11,17,22,0.12);
  --line-strong: rgba(11,17,22,0.22);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Instrument Sans", "Helvetica Neue", Helvetica, sans-serif;
  background: var(--sand-100);
  color: var(--navy-800);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  line-height: 1.45;
}
::selection { background: var(--brass-500); color: #fff; }
button { font-family: inherit; }
a { color: inherit; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.02em; }
.tnum { font-variant-numeric: tabular-nums; }
#root { min-height: 100vh; }

/* Global mobile collapse rules — same logic as v3 */
@media (max-width: 880px) {
  .two-col, .two-col-svc,
  .contact-grid, .hero-grid, .trap-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    align-items: stretch !important;
  }
  .two-col > *, .two-col-svc > *,
  .contact-grid > *, .hero-grid > *,
  .trap-grid > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  section h1, section h2, section h3 {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  #root > * > div[style*="max-width: 1280px"],
  header > div[style*="max-width: 1280px"],
  footer > div[style*="max-width: 1280px"],
  section > div[style*="max-width: 1280px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  section > div[style*="padding-top: 96px"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}

@media (max-width: 720px) {
  .compare-wrap { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .compare-wrap table { min-width: 640px !important; }
  .compare-wrap th, .compare-wrap td { padding: 14px 14px !important; }
}

@media (max-width: 880px) {
  footer { padding-bottom: 72px !important; }
}