/* ============================================================
   Tideline by JBPS Capital — global styles
   Fonts are self-hosted (fonts.css). Component styling lives
   inline in the HTML, matching the design handoff; this file
   carries only resets, keyframes, reveal states, and the
   responsive rules. Zero external resources.

   fonts.css is <link>ed by each page ahead of this file rather
   than @imported here: an @import can only be discovered after
   this stylesheet has downloaded and parsed, which serialises
   the font fetch behind two round trips on mobile.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FAF9F7;
  color: #2A3441;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: #D8CCB4; color: #283340; }

@keyframes tlPulse {
  0%   { box-shadow: 0 0 0 0 rgba(122,196,150,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(122,196,150,0); }
  100% { box-shadow: 0 0 0 0 rgba(122,196,150,0); }
}

/* ---- Scroll reveal ----
   Keyed on body.reveal-ready, which site.js adds as soon as it runs.
   If JS never runs, content stays fully visible (no hidden state). */
body.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1),
              transform .9s cubic-bezier(.16,1,.3,1),
              box-shadow .45s ease, border-color .3s ease;
  will-change: opacity, transform;
}
body.reveal-ready [data-reveal].in { opacity: 1; transform: translateY(0); }
/* The highlighted pricing card keeps its slight scale in both states */
body.reveal-ready [data-reveal].tl-core { transform: translateY(22px) scale(1.03); }
body.reveal-ready [data-reveal].tl-core.in { transform: translateY(0) scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.reveal-ready [data-reveal] { transition-duration: .01ms; }
}

/* ---- Legal / secondary pages ---- */
.legal-body a { color: #9A876A; }
.legal-body a:hover { color: #283340; }

/* ============================================================
   Responsive rules (from the design handoff)
   ============================================================ */
@media (max-width: 1060px) {
  .tl-navlinks { display: none !important; }
}
@media (max-width: 900px) {
  .tl-chartwrap { grid-template-columns: 1fr !important; }
  .tl-metrics { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .tl-grid3 { grid-template-columns: 1fr !important; }
  .tl-teamgrid { grid-template-columns: 1fr !important; gap: 44px !important; }
  .tl-pricing { grid-template-columns: 1fr !important; }
  .tl-pricing .tl-core { transform: none !important; }
  body.reveal-ready .tl-pricing .tl-core { transform: translateY(22px) !important; }
  body.reveal-ready .tl-pricing .tl-core.in { transform: translateY(0) !important; }
  .tl-why { grid-template-columns: 1fr !important; }
  .tl-footcols { flex-direction: column !important; gap: 32px !important; }
  .tl-charthead { flex-direction: column !important; align-items: flex-start !important; }
}
@media (max-width: 560px) {
  /* ---- Header row ----
     Both buttons are flex items in the nav's right-hand group. At these widths
     the default flex-shrink compresses them below their content width, which is
     what breaks "Start Free" onto a second line. Pinning them at their natural
     width and forbidding the wrap is the actual fix; the trimmed type and
     padding then keep the row inside the viewport. Equal height + inline-flex
     centres both buttons against the lockup — box-sizing is border-box globally,
     so the Members border sits inside the shared 38px. */
  #tl-nav { padding-left: 16px !important; padding-right: 16px !important; }
  .tl-navlogo { min-width: 0 !important; }        /* lockup yields space, not the buttons */
  .tl-navright { gap: 10px !important; }
  .tl-navmembers,
  .tl-navcta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    height: 38px !important;
    line-height: 1 !important;
    font-size: 12.5px !important;
  }
  .tl-navmembers { padding: 0 13px !important; }
  .tl-navcta { padding: 0 15px !important; }

  .tl-metrics { grid-template-columns: 1fr !important; }
  .tl-herobtns { flex-direction: column !important; align-items: stretch !important; }
  .tl-herobtns a { text-align: center; }
  .tl-legend { flex-wrap: wrap !important; row-gap: 10px !important; }
}

/* Smallest phones (iPhone SE / 360px Androids): the same row, one notch tighter. */
@media (max-width: 380px) {
  .tl-navright { gap: 8px !important; }
  .tl-navmembers,
  .tl-navcta { height: 34px !important; font-size: 11.5px !important; }
  .tl-navmembers { padding: 0 10px !important; }
  .tl-navcta { padding: 0 12px !important; }
}