/* Telemetryx — layout hardening on top of the design's inline styles.
   The captured markup carries its own inline styling; this file only adds what
   a frozen desktop design can't express: responsive behaviour, focus states,
   and the non-navigating placeholder links. */

:root { --tx-blue: #2E6BE0; --tx-navy: #0B1626; --tx-gold: #E0B24A; --tx-body: #46535f; --tx-line: #E4E8EE; }

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; }

/* Anchors the design shipped without a destination stay visually intact but
   are not interactive — better than a "#" that scrolls the page to the top. */
a[data-tx-nolink] { cursor: default; }
a[data-tx-nolink]:hover { opacity: .75; }

/* Visible keyboard focus (the design defined none). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--tx-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The design pins headline/sub-headline lines with white-space:nowrap so they
   break exactly where intended at desktop width. It is applied to spans, divs,
   headings and the nav bar alike, so release it on ANY element carrying it —
   below the design width the nowrap is the single biggest overflow source. */
@media (max-width: 1240px) {
  [style*="white-space:nowrap"], [style*="white-space: nowrap"] {
    white-space: normal !important;
  }
}

/* Fluid type for the oversized display headings. */
@media (max-width: 900px) {
  h1 { font-size: clamp(30px, 7.2vw, 58px) !important; line-height: 1.18 !important; }
  h2 { font-size: clamp(25px, 5.4vw, 44px) !important; line-height: 1.22 !important; }
  h3 { font-size: clamp(20px, 4vw, 30px) !important; }
}

/* Wide fixed-width rows in the design are flex/grid; let them wrap on narrow
   screens instead of overflowing. */
@media (max-width: 900px) {
  div[style*="display:flex"], div[style*="display: flex"] { flex-wrap: wrap; }
  div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  div[style*="padding:110px"], div[style*="padding: 110px"],
  div[style*="padding:104px"], div[style*="padding: 104px"],
  div[style*="padding:96px"],  div[style*="padding: 96px"] { padding: 56px 22px !important; }
  div[style*="padding:22px 40px"], div[style*="padding: 22px 40px"] { padding: 16px 20px !important; }
}

/* Header: stack the nav under the logo on small screens. */
@media (max-width: 820px) {
  header nav, div[style*="justify-content:space-between"] > div[style*="gap:30px"],
  div[style*="justify-content: space-between"] > div[style*="gap: 30px"],
  div[style*="justify-content:space-between"] > div[style*="gap:26px"] {
    gap: 14px !important;
    row-gap: 10px !important;
    justify-content: flex-start !important;
    font-size: 14px !important;
  }
}

/* The hero uses a fixed aspect-ratio image with an absolutely-positioned
   headline. That composition only holds at wide widths — below it, let the
   image be a background band and put the headline in normal flow. */
@media (max-width: 820px) {
  [data-tx-hero] { aspect-ratio: auto !important; }
  [data-tx-hero] > img { height: 260px !important; object-fit: cover; }
  [data-tx-hero] h1 {
    position: static !important;
    transform: none !important;
    color: var(--tx-navy) !important;
    max-width: 100% !important;
    padding: 26px 22px 0 !important;
    font-size: clamp(28px, 7vw, 44px) !important;
  }
  [data-tx-hero] > div { position: static !important; }
}

/* Forms: full-width controls below the two-column breakpoint. */
@media (max-width: 720px) {
  input[data-tx-field], select[data-tx-field], textarea[data-tx-field] { width: 100% !important; }
}

/* Accordions open/close by toggling the answer panel's display (see site.js) —
   the design's grid-template-rows animation does not resolve reliably inside
   these cards, so there is no panel animation to style here. */

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Form status messaging injected by site.js. */
.tx-form-error {
  margin-top: 14px; padding: 12px 16px; border-radius: 10px;
  background: #FDECEC; border: 1px solid #F3C0C0; color: #8A1F1F;
  font-size: 15px; line-height: 1.5;
}
.tx-field-invalid { border-color: #D14343 !important; }
.tx-busy { opacity: .6; pointer-events: none; }

/* Header nav sizing. The captured design allowed for five links plus the CTA;
   the Resources tab and the account icon made the row too wide, so links broke
   mid-phrase and overlapped the logo. Keep each link on one line and tighten
   the gap so the row fits, then allow a tidy wrap on narrow screens. */
[data-tx-nav] {
  gap: 22px !important;
  flex-wrap: nowrap;
  align-items: center;
}
[data-tx-nav] > a {
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (max-width: 1120px) {
  [data-tx-nav] { gap: 16px !important; }
}
@media (max-width: 980px) {
  [data-tx-nav] { flex-wrap: wrap; justify-content: flex-end; row-gap: 10px !important; }
}