/* Alignwise — global resets + base typography.
   Component-level styling lives inline in the JSX components. */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #0a0d12;
  color: #cfd6df;
  font-family: 'IBM Plex Sans', Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

#root {
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Focus ring — keep it accessible without breaking the terminal aesthetic */
*:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: rgba(245, 158, 11, 0.35);
  color: #fff;
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0a0d12;
}
::-webkit-scrollbar-thumb {
  background: #1d242e;
  border: 2px solid #0a0d12;
}
::-webkit-scrollbar-thumb:hover {
  background: #2c3543;
}

@keyframes aw-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* ─── Mobile responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Tighten horizontal padding across all labelled sections */
  [data-screen-label] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Nav */
  .aw-nav { padding-top: 12px !important; padding-bottom: 12px !important; }
  .aw-nav-links { display: none !important; }
  .aw-nav-live  { display: none !important; }
  .aw-nav-cta   { padding: 8px 12px !important; font-size: 11px !important; white-space: nowrap !important; }

  /* Hero */
  [data-screen-label="02 Hero"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-top: 36px !important;
    padding-bottom: 24px !important;
  }
  .aw-hero-visual { display: none !important; }
  .aw-hero-h1     { font-size: 38px !important; letter-spacing: -1px !important; }
  .aw-hero-specs  { grid-template-columns: repeat(2, 1fr) !important; }
  .aw-hero-ctas   { flex-wrap: wrap !important; }

  /* Probe stream header */
  .aw-probe-hdr {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* Terminal — let it scroll horizontally rather than clip */
  .aw-terminal { overflow-x: auto !important; }

  /* Pillars */
  .aw-pillars-hdr  { grid-template-columns: 1fr !important; gap: 16px !important; margin-bottom: 28px !important; }
  .aw-pillars-grid { grid-template-columns: 1fr !important; }

  /* Use cases */
  .aw-usecases-hdr  { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; margin-bottom: 24px !important; }
  .aw-usecases-grid { grid-template-columns: 1fr !important; }

  /* Flow — stack steps vertically, fix borders */
  .aw-flow-grid { grid-template-columns: 1fr !important; }
  .aw-flow-grid > div { border-right: none !important; border-bottom: 1px solid #1d242e !important; }
  .aw-flow-grid > div:last-child { border-bottom: none !important; }

  /* Regulatory */
  .aw-reg-layout { grid-template-columns: 1fr !important; gap: 20px !important; }
  .aw-reg-cells  { grid-template-columns: repeat(2, 1fr) !important; }

  /* Pricing */
  .aw-pricing-grid { grid-template-columns: 1fr !important; }

  /* CTA */
  .aw-cta-section { padding-top: 60px !important; padding-bottom: 60px !important; }
  .aw-cta-h2      { font-size: 34px !important; letter-spacing: -1px !important; }
  .aw-cta-row     { grid-template-columns: 1fr !important; }

  /* Footer */
  .aw-footer { flex-direction: column !important; gap: 14px !important; text-align: center !important; padding-top: 24px !important; padding-bottom: 24px !important; }
}