@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&subset=latin,cyrillic&display=swap');

/**
 * tilda-article.css
 * Universal styles for all Tilda articles embedded in Nuxt iframes.
 * Include via <link> in each article's <head> (before Tilda CSS).
 *
 * Usage:
 *   <link rel="stylesheet" href="/academy/tilda-article.css">
 */

/* Base reset for iframe & universal font enforcement */
html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  overflow: hidden !important; /* CRITICAL: never allow iframe internal scrolling */
  width: 100%;
}

/* Force standard font across all Tilda blocks, headings, cards and zero-blocks */
body,
.t-records,
.t-records *,
.t-card__title,
.t-card__descr,
.t-name,
.t-heading,
.t-title,
.t-descr,
.t-text,
.tn-atom,
.t-btn {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Guarantee immediate content visibility in iframe without blank screen on mobile */
#allrecords,
.t-records {
  opacity: 1 !important;
  visibility: visible !important;
}
.t-records_animated {
  opacity: 1 !important;
  transition: none !important;
}
/* Neutralize Tilda block-level reveal animations (prevent infinite scroll feedback loop) */
.r.r_hidden,
.r.r_anim {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
}

/* ── Link hover effect (Cyclone brand color) ── */
.t-records a:not(.t-btn):not([class*="t-menu"]) {
  position: relative;
  transition: color 0.3s ease;
}
.t-records a:not(.t-btn):not([class*="t-menu"]):hover {
  color: #e16900 !important;
}

/* ── Hide Tilda header/breadcrumbs/related-articles (replaced by native Nuxt header) ── */
/* IDs below are from the control_valves page; add page-specific IDs via data-tilda-page-id selector if needed */
#t-header,
#t-footer,
footer,
[data-tilda-page-alias="header"],
[data-tilda-page-alias="footer"],
[data-record-type="404"],
.t404,
.r.t-rec:has(.t404),
.t-tildalabel,
#tildacopy {
  display: none !important;
}

/* ── Suppress Tilda divider blocks (type 131 = trailing separator) & duplicate top lines ── */
.r.t-rec[data-record-type="131"],
.tn-elem[data-elem-id="1744962125180"],
.tn-elem[data-elem-id="1744988533078"] {
  display: none !important;
}

/* ── Grid alignment: left-aligned, matching Cyclone 20px baseline ── */
/* Overrides Tilda's centered grid to align with the Nuxt sidebar layout */
@media screen and (min-width: 960px) {
  .t-container,
  .t-container_flex,
  .t-card__container,
  .t-cards__container,
  .t853__container,
  .t850__container,
  .t847__container,
  .t667__container,
  .t664__container,
  .t594__container,
  .t510__container,
  .t508__container,
  .t497__container,
  .t214__container,
  .t1052__container,
  .t1115__container {
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 1200px !important;
  }

  .t-col {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  /* Column width overrides to match 20px gutter baseline */
  .t-col_1  { max-width:   60px !important; }
  .t-col_2  { max-width:  160px !important; }
  .t-col_3  { max-width:  260px !important; }
  .t-col_4  { max-width:  360px !important; }
  .t-col_5  { max-width:  460px !important; }
  .t-col_6  { max-width:  560px !important; }
  .t-col_7  { max-width:  660px !important; }
  .t-col_8  { max-width:  760px !important; }
  .t-col_9  { max-width:  860px !important; }
  .t-col_10 { max-width:  960px !important; }
  .t-col_11 { max-width: 1060px !important; }
  .t-col_12 { max-width: 1160px !important; }

  /* t480 image-text block sizer corrections */
  .t480__sizer.t-col_5 { width: 460px !important; max-width: 460px !important; }
  .t480__sizer.t-col_7 { width: 660px !important; max-width: 660px !important; }

  /* Universal left-alignment & container constraint for standalone blocks (e.g. T107 image blocks) */
  .t107 {
    text-align: left !important;
    max-width: 1200px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  .t107 .t-align_center {
    text-align: left !important;
    padding-left: 20px !important;
    box-sizing: border-box !important;
  }
  .t107 .t-img {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* Mobile alignment for standalone image blocks (T107) */
@media screen and (max-width: 640px) {
  .t107 {
    text-align: left !important;
    max-width: 100% !important;
  }
  .t107 .t-align_center {
    text-align: left !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  .t107 .t-img {
    margin-left: 0 !important;
    max-width: 100% !important;
  }
}

/* Remove Tilda's default side gutters inside article iframes on mobile & normalize vertical spacing */
@media screen and (max-width: 640px) {
  .t-container {
    max-width: 100% !important;
  }

  .t-col {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Align article headings at standard 20px grid gutter on mobile */
  .t-col h2.tilda-h2,
  .t-col h3.tilda-h3 {
    margin-left: 0 !important;
  }

  /* Universal vertical spacing compression for mobile Tilda records */
  .t-rec_pb_150,
  .t-rec_pb_180,
  .t-rec_pb_135,
  .t-rec_pb_105,
  .t-rec_pb_90,
  .t-rec_pb_75,
  .t-rec_pb_60 {
    padding-bottom: 25px !important;
  }

  .t-rec_pt_180,
  .t-rec_pt_210,
  .t-rec_pt_75,
  .t-rec_pt_60 {
    padding-top: 25px !important;
  }

  /* Tighten small Zero-block (T396) section header artboards on mobile */
  #allrecords .t396__artboard[data-artboard-height-res-320="82"],
  #allrecords .t396__artboard[data-artboard-height-res-320="100"],
  #allrecords .t396__artboard[data-artboard-height-res-320="101"],
  #allrecords .t396__artboard[data-artboard-height-res-320="102"],
  #allrecords .t396__artboard[data-artboard-height-res-320="110"],
  #allrecords .t396__artboard[data-artboard-height-res-320="112"],
  #allrecords .t396__artboard[data-artboard-height-res-320="120"],
  #allrecords .t396__artboard[data-artboard-height-res-320="121"],
  #allrecords .t396__artboard[data-artboard-height-res-320="122"],
  #allrecords .t396__artboard[data-artboard-height-res-320="130"],
  #allrecords .t396__artboard[data-artboard-height-res-320="131"],
  #allrecords .t396__artboard[data-artboard-height-res-320="132"],
  #allrecords .t396__artboard[data-artboard-height-res-320="140"],
  #allrecords .t396__artboard[data-artboard-height-res-320="141"],
  #allrecords .t396__artboard[data-artboard-height-res-320="142"],
  #allrecords .t396__artboard[data-artboard-height-res-320="150"],
  #allrecords .t396__artboard[data-artboard-height-res-320="151"],
  #allrecords .t396__artboard[data-artboard-height-res-320="160"],
  #allrecords .t396__artboard[data-artboard-height-res-320="161"],
  #allrecords .t396__artboard[data-artboard-height-res-320="162"],
  #allrecords .t396__artboard[data-artboard-height-res-320="170"],
  #allrecords .t396__artboard[data-artboard-height-res-320="171"],
  #allrecords .t396__artboard[data-artboard-height-res-320="172"],
  #allrecords .t396__artboard[data-artboard-height-res-320="180"],
  #allrecords .t396__artboard[data-artboard-height-res-320="182"],
  #allrecords .t396__artboard[data-artboard-height-res-320="190"],
  #allrecords .t396__artboard[data-artboard-height-res-320="191"],
  #allrecords .t396__artboard[data-artboard-height-res-320="192"],
  #allrecords .t396__artboard[data-artboard-height-res-320="201"],
  #allrecords .t396__artboard[data-artboard-height-res-320="202"],
  #allrecords .t396__artboard[data-artboard-height-res-320="220"],
  #allrecords .t396__artboard[data-artboard-height-res-320="230"],
  #allrecords .t396__artboard[data-artboard-height-res-320="242"],
  #allrecords .t396__artboard[data-artboard-height-res-320="262"],
  #allrecords [id^="rec"] .t396__artboard[data-artboard-height-res-320="102"],
  #allrecords [id^="rec"] .t396__artboard[data-artboard-height-res-320="110"],
  #allrecords [id^="rec"] .t396__artboard[data-artboard-height-res-320="262"] {
    height: auto !important;
    min-height: 40px !important;
    padding-top: 10px !important;
    padding-bottom: 25px !important;
  }

  #allrecords .t396__artboard[data-artboard-height-res-320="102"] .t396__carrier,
  #allrecords .t396__artboard[data-artboard-height-res-320="102"] .t396__filter,
  #allrecords .t396__artboard[data-artboard-height-res-320="110"] .t396__carrier,
  #allrecords .t396__artboard[data-artboard-height-res-320="110"] .t396__filter,
  #allrecords .t396__artboard[data-artboard-height-res-320="262"] .t396__carrier,
  #allrecords .t396__artboard[data-artboard-height-res-320="262"] .t396__filter,
  #allrecords [id^="rec"] .t396__artboard[data-artboard-height-res-320="102"] .t396__carrier,
  #allrecords [id^="rec"] .t396__artboard[data-artboard-height-res-320="102"] .t396__filter,
  #allrecords [id^="rec"] .t396__artboard[data-artboard-height-res-320="110"] .t396__carrier,
  #allrecords [id^="rec"] .t396__artboard[data-artboard-height-res-320="110"] .t396__filter,
  #allrecords [id^="rec"] .t396__artboard[data-artboard-height-res-320="262"] .t396__carrier,
  #allrecords [id^="rec"] .t396__artboard[data-artboard-height-res-320="262"] .t396__filter {
    height: 100% !important;
  }

  /* Header-only artboard text alignment for designated small headers on mobile */
  #allrecords .t396__artboard[data-artboard-height-res-320="82"] .t396__elem:has(h1, h2, h3),
  #allrecords .t396__artboard[data-artboard-height-res-320="100"] .t396__elem:has(h1, h2, h3),
  #allrecords .t396__artboard[data-artboard-height-res-320="101"] .t396__elem:has(h1, h2, h3),
  #allrecords .t396__artboard[data-artboard-height-res-320="102"] .t396__elem:has(h1, h2, h3),
  #allrecords .t396__artboard[data-artboard-height-res-320="110"] .t396__elem:has(h1, h2, h3),
  #allrecords .t396__artboard[data-artboard-height-res-320="112"] .t396__elem:has(h1, h2, h3),
  #allrecords .t396__artboard[data-artboard-height-res-320="120"] .t396__elem:has(h1, h2, h3),
  #allrecords .t396__artboard[data-artboard-height-res-320="121"] .t396__elem:has(h1, h2, h3),
  #allrecords .t396__artboard[data-artboard-height-res-320="122"] .t396__elem:has(h1, h2, h3),
  #allrecords .t396__artboard[data-artboard-height-res-320="130"] .t396__elem:has(h1, h2, h3),
  #allrecords .t396__artboard[data-artboard-height-res-320="131"] .t396__elem:has(h1, h2, h3),
  #allrecords .t396__artboard[data-artboard-height-res-320="132"] .t396__elem:has(h1, h2, h3),
  #allrecords .t396__artboard[data-artboard-height-res-320="140"] .t396__elem:has(h1, h2, h3),
  #allrecords .t396__artboard[data-artboard-height-res-320="141"] .t396__elem:has(h1, h2, h3),
  #allrecords .t396__artboard[data-artboard-height-res-320="142"] .t396__elem:has(h1, h2, h3),
  #allrecords .t396__artboard[data-artboard-height-res-320="150"] .t396__elem:has(h1, h2, h3),
  #allrecords .t396__artboard[data-artboard-height-res-320="151"] .t396__elem:has(h1, h2, h3) {
    position: relative !important;
    top: 0 !important;
    left: 16px !important;
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .t396__artboard .tn-atom {
    text-align: left !important;
  }

  /* Neutralize empty trailing line breaks in headings causing large holes */
  h1 br:last-child,
  h2 br:last-child,
  h3 br:last-child,
  .tn-atom br:last-child {
    display: none !important;
  }

  /* Compact T113 spacer blocks on mobile */
  .r[data-record-type="113"] {
    padding-bottom: 10px !important;
  }
  .r[data-record-type="113"] div[style*="height"] {
    height: 10px !important;
  }

  /* Align and border styling for cards on mobile */
  .t396__elem[data-elem-type="shape"]:has(.tn-atom[style*="--t396-bordercolor:#e6e6e6"]),
  .t396__elem[data-elem-type="shape"]:has(.tn-atom[style*="border-color:#e6e6e6"]),
  .t396__elem[data-elem-type="shape"][data-field-width-value="561"][data-field-height-value="315"] {
    width: calc(100% - 24px) !important;
    left: 12px !important;
    box-sizing: border-box !important;
  }
}

/* ── Align Zero-blocks (T396) to left 20px edge on screens wider than 1200px ── */
@media screen and (min-width: 1200px) {
  .t396 {
    overflow-x: clip !important;
  }
  .t396__artboard {
    transform: translateX(calc((1200px - 100vw) / 2)) !important;
    transform-origin: left top !important;
  }
}

/* ── Heading design tokens — change here to update all article headings ── */
:root {
  --academy-h2-size: 28px;
  --academy-h2-size-sm: 22px;
  --academy-h2-weight: 500;
  --academy-h2-line-height: 1.25;
  --academy-h2-color: #272727;

  --academy-h3-size: 19px;
  --academy-h3-weight: 500;
  --academy-h3-line-height: 1.3;
  --academy-h3-color: #272727;
}

/* ── h2: promoted from div.t-title (section headings) ── */
h2.tilda-h2 {
  font-size: var(--academy-h2-size) !important;
  font-weight: var(--academy-h2-weight) !important;
  line-height: var(--academy-h2-line-height) !important;
  color: var(--academy-h2-color) !important;
  font-family: 'Manrope', Arial, sans-serif !important;
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
  text-align: left !important;
}
@media screen and (max-width: 640px) {
  h2.tilda-h2 { font-size: var(--academy-h2-size-sm) !important; }
}

/* ── h3: promoted from div.t-name_xl/lg (card/feature titles) ── */
h3.tilda-h3 {
  font-size: var(--academy-h3-size) !important;
  font-weight: var(--academy-h3-weight) !important;
  line-height: var(--academy-h3-line-height) !important;
  color: var(--academy-h3-color) !important;
  font-family: 'Manrope', Arial, sans-serif !important;
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
}

/* ── Prevent card image from cutting right border & compact spacing for t1032 cards ── */
.t1032__content {
  overflow: hidden !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.t1032__img {
  margin-bottom: 12px !important;
}

.t1032 .t-card__title {
  margin-bottom: 12px !important;
}

@media screen and (max-width: 640px) {
  .t1032__img {
    max-width: calc(100% - 2px) !important;
  }
}

/* ── Circular step counter number centering (t550, t1106, t948) ── */
.t550__circle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.t550__digit,
.t550__circle .t550__digit,
.t550__circle h3.t550__digit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-sizing: border-box !important;
}

.t1106__number {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.t1106__digit,
.t1106__number .t1106__digit,
.t1106__number h3.t1106__digit {
  position: static !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-sizing: border-box !important;
}

.t948__circle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.t948__number {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-sizing: border-box !important;
}

/* ── Universal body text readability (16px & deep contrast color) ── */
.t-card__descr,
.t-descr:not(.t404__descr),
.t-text:not(.tn-atom),
.t-card__descr p,
.t-descr p,
.t-text:not(.tn-atom) p {
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #1a1a1a !important;
}


/* Zero-block text atoms: darken grey text without changing layout */
.tn-atom[style*="color:#0d1217"],
.tn-atom[style*="color: #0d1217"],
.tn-atom[style*="color:#434343"],
.tn-atom[style*="color: #434343"],
.tn-atom[style*="color:#323232"],
.tn-atom[style*="color: #323232"],
.tn-atom[style*="color:#272727"],
.tn-atom[style*="color: #272727"] {
  color: #1a1a1a !important;
}