/* Marketing site layout rules that need breakpoints (inline styles in the JSX cannot carry media queries).
   Desktop values live here too so each responsive property has one home. */
html { scroll-behavior: smooth; }
i[data-lucide] { width: 18px; height: 18px; display: inline-flex; }
i[data-lucide] svg { width: 100%; height: 100%; }
#toasts { position: fixed; left: 24px; bottom: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; }

.ob-nav-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); height: 64px; display: flex; align-items: center; gap: 32px; }
.ob-nav-links { display: flex; gap: 4px; flex: 1; }
.ob-nav-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; flex: none; }
.ob-nav-desktop { display: inline-flex; gap: 8px; align-items: center; }
.ob-nav-burger { display: none; }
.ob-nav-menu { display: none; }
.ob-board-stats { display: flex; }
.ob-board-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ob-board-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ob-benefit-copy { position: sticky; top: 96px; }
.ob-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.ob-pricing-row { padding: 22px 28px; }
.ob-cta-band { padding: var(--space-16) var(--space-12); }

@media (max-width: 767px) {
  :root {
    --text-5xl: 42px; --text-4xl: 34px; --text-3xl: 28px; --text-2xl: 22px;
    --space-24: 56px; --space-20: 48px; --space-16: 40px; --space-12: 32px;
    --gutter: var(--space-4);
  }
  #toasts { left: 16px; right: 16px; bottom: 16px; }
  .ob-nav-inner { gap: 12px; height: 56px; }
  .ob-nav-links { display: none; }
  .ob-nav-desktop { display: none; }
  .ob-nav-burger { display: inline-flex; }
  .ob-nav-menu { display: flex; flex-direction: column; padding: 4px var(--gutter) 12px; border-top: 1px solid var(--border-subtle); background: var(--bg-canvas); }
  /* Board: one column per viewport-ish, swipe sideways. Bleeds to the card edge so the scroll hint is visible. */
  .ob-board-cols { grid-auto-flow: column; grid-auto-columns: min(232px, 72vw); grid-template-columns: none; overflow-x: auto; margin: 0 -18px; padding: 0 18px 6px; scroll-snap-type: x mandatory; scroll-padding-left: 18px; scrollbar-width: none; }
  .ob-board-cols::-webkit-scrollbar { display: none; }
  .ob-board-col { scroll-snap-align: start; }
  .ob-board-stats { display: none; }
  .ob-benefit-copy { position: static; }
  .ob-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob-footer-brand { grid-column: 1 / -1; }
  .ob-pricing-row { padding: 18px 20px; }
  .ob-cta-band { padding: var(--space-10) var(--space-6); }
}