/* EcuPulse marketing site — shared chrome.
   Design source of truth: design_handoff_ecupulse_site (2026-08-16 handoff).
   Tokens: bg #060607 · panel #0A0A0C · cell #0E0E10 · hairline #1C1C20 · chip border #26262C
           text #F6F5F1 / #C8C8CE / #6E6E76 / #4A4A52 · amber #FFA23A (hover #FFB859)
           danger #FF3B30 · ok #45D07E. Square everything, no shadows (instrument panel). */

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #060607;
  color: #F6F5F1;
  font-family: 'Titillium Web', sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Long unbreakable tokens (e.g. FOREGROUND_SERVICE_CONNECTED_DEVICE on the
     privacy page) must wrap instead of spilling past narrow viewports. Only
     applies to words that can't fit a line by themselves. */
  overflow-wrap: anywhere;
}
a { color: #FFA23A; }
a:hover { color: #FFB859; }

/* Nav / footer link + button hovers (transitions deliberately instant — no animation). */
.navlink { font: 700 12px 'Titillium Web', sans-serif; letter-spacing: 2.5px; color: #6E6E76; text-decoration: none; }
.navlink:hover { color: #C8C8CE; }
.footlink { font: 500 11px 'Chivo Mono', monospace; color: #6E6E76; text-decoration: none; }
.footlink:hover { color: #C8C8CE; }
.ctabtn { font: 700 12px 'Chivo Mono', monospace; color: #060607; background: #FFA23A; padding: 9px 18px; text-decoration: none; }
.ctabtn:hover { color: #060607; background: #FFB859; }
.ctablock { font: 700 15px 'Chivo Mono', monospace; color: #060607; background: #FFA23A; padding: 14px 0; text-align: center; text-decoration: none; display: block; }
.ctablock:hover { color: #060607; background: #FFB859; }
.plainlink { color: #FFA23A; text-decoration: none; }
.plainlink:hover { color: #FFB859; }
.markbtn:hover { background: #131316; }

/* Dash blackbox runtime animations (from the dash prototype). */
@keyframes bbxFlood { 0%, 100% { opacity: 1; } 50% { opacity: 0.82; } }
@keyframes bbxRecBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Anchored sections clear the 64px sticky nav. */
.anchor { scroll-margin-top: 70px; }

/* Graceful stacking below the design width — the desktop design is the spec;
   these only collapse multi-column shells so phones can read the pages. */
@media (max-width: 900px) {
  .navlinks-page { display: none; }
  .cols2, .cols3 { grid-template-columns: 1fr !important; }
  /* Stacked splits must stretch children: the review tracks panel has only
     absolutely-positioned content, so centered column items collapse to 0 width. */
  .split { flex-direction: column !important; align-items: stretch !important; }
  .split > * { width: auto !important; }
  h1 { font-size: 44px !important; }
}

/* Phone widths (≤560px): re-size the display type and the fixed-width rows that
   the ≤900px shell-stacking alone doesn't fix. !important is needed to beat the
   per-element inline styles (the design handoff's styling model). */
@media (max-width: 560px) {
  h1 { font-size: 34px !important; }
  h1 + p { font-size: 17px !important; }
  #moat h2, #review h2, #features h2, #get h2 { font-size: 29px !important; }
  .kicker { font-size: 10px !important; letter-spacing: 2px !important; text-align: center; }
  /* Nav bar: tighter gutter so the wordmark and GET IT button breathe; the
     subpages' text links don't fit next to the button (all pages keep their
     links in the footer, and the wordmark links home). */
  body > div:first-child > div { padding: 0 20px !important; gap: 16px !important; }
  .navlink { display: none; }
  /* Stacked cards: tighter interior padding at phone width. */
  .cols2 > div, .cols3 > div { padding: 24px 20px !important; }
  /* WHAT-IT-DOES rows: label above text instead of a fixed 96px label column. */
  .cols2 > div > div:last-child > div { flex-direction: column; gap: 3px !important; }
  .cols2 > div > div:last-child > div > span:first-child { width: auto !important; }
  /* Split sections: tighter stacked gap; slim the GET-IT panel's padding. */
  .split { gap: 36px !important; }
  #get .split > div:last-child { padding: 28px 22px !important; }
  /* Track-chart captions: keep them to one line over the chart. */
  #review .split > div:first-child span { font-size: 8px !important; letter-spacing: 0.5px !important; }
  /* Footer: stack brand mark, legal line, and links. */
  .footrow { flex-direction: column; align-items: flex-start !important; gap: 12px !important; }
}