/* Systm Labs site styles.
   Base rules and responsive blocks are ported verbatim from the Design pages'
   helmet <style> blocks (Home's block is the superset of all four pages).
   The only additions are the clearly marked state classes at the bottom:
   the dc runtime computed these as inline styles from component state
   (language toggle active state, mobile-menu open state) and generated
   :hover rules from style-hover attributes; here they are normal CSS. */

body { margin: 0; background: #000000; font-family: 'Manrope', sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { color: #a3ef4f; }
@keyframes sysRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) {
  .rx { padding-left: 32px !important; padding-right: 32px !important; }
  .grid-3 { grid-template-columns: 1fr 1fr !important; }
  .who-grid { gap: 40px !important; }
  .whyus-box { grid-template-columns: 1fr !important; gap: 32px !important; padding: 44px 40px !important; }
  .whyus-quote { border-left: none !important; padding-left: 0 !important; }
  .h-hero { font-size: 48px !important; }
  .offer-box { padding: 44px 36px !important; }
}
@media (max-width: 820px) {
  .nav-wrap { padding-top: 16px !important; padding-bottom: 16px !important; }
  .nav-actions { display: flex !important; }
  .nav-toggle { display: flex !important; }
  .lang-in-menu { display: none !important; }
  .lang-standalone { display: flex !important; }
  .nav-links {
    position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
    flex-direction: column !important; align-items: stretch !important; gap: 6px !important;
    background: #000000 !important; padding: 14px 24px 20px 24px !important;
    border-top: 1px solid #222529 !important; display: none !important;
  }
  .nav-links.nav-open { display: flex !important; }
  .nav-links > a { padding: 10px 2px !important; }
  .nav-links > a.nav-cta { text-align: center !important; margin-top: 4px !important; }
}
@media (max-width: 640px) {
  .rx { padding-left: 20px !important; padding-right: 20px !important; }
  .grid-2, .grid-3, .who-grid { grid-template-columns: 1fr !important; }
  .h-hero { font-size: 33px !important; }
  .hero-pad { padding-top: 56px !important; padding-bottom: 64px !important; }
  .offer-box { padding: 30px 22px !important; }
  .diagram-card { padding: 26px 20px !important; }
  .diagram-scroll { overflow-x: auto !important; padding-bottom: 8px !important; }
  .diagram-grid { min-width: 720px !important; }
  /* The nowrap leak labels inflate their columns' min-content width, so the
     tracks overflow the grid box and the last label dangles past "Paid" into
     empty scroll space. On mobile, wrap them at a fixed width instead: columns
     even out and every label ends inside the grid, tucked under the next stage
     as on desktop. */
  [data-i18n="leak1"], [data-i18n="leak2"], [data-i18n="leak3"] { white-space: normal !important; width: 120px; }
  .footer-inner { gap: 28px !important; }
  .footer-links { gap: 32px !important; }
  /* Booking: the page keeps 56px side padding (as-designed quirk), but the
     Calendly card needs more width than that leaves on a phone. Pull the card
     out to 20px gutters and let the widget size to the card instead of
     forcing a 320px minimum. */
  .cal-card { margin-left: -36px !important; margin-right: -36px !important; }
  #cal-booking { min-width: 0 !important; }
}

/* --- Conversion additions: state styles (computed inline by the dc runtime) --- */

/* Language toggle buttons. Base matches the component's btnBase object;
   .is-active matches the per-language btnEnStyle/btnNlStyle values. */
.lang-btn { border: none; cursor: pointer; font: 600 13px 'Manrope', sans-serif; padding: 6px 12px; letter-spacing: 0.04em; background: transparent; color: #8f949b; }
.lang-btn.is-active { background: #a3ef4f; color: #000000; }

/* Mobile menu toggle bars. Base matches the component's barBase object;
   .is-open matches the open-state transforms. */
.nav-toggle span { display: block; height: 2px; width: 20px; background: #e6e8ea; border-radius: 2px; transition: transform 220ms ease, opacity 180ms ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* style-hover equivalents. The dc runtime emitted these as plain :hover class
   rules (no !important), which lose to the elements' inline styles; kept that
   way so hover behavior matches the Design exactly. */
.hov-green:hover { background: #c4f486; color: #000000; }
.hov-grad:hover { background: linear-gradient(120deg, #c4f486, #7ce0e1); color: #000000; }
.hov-card:hover { border-color: #5dd7d8; color: inherit; }