/* Connect 981 blog (hp- classes). Layout, type, breakpoints and states live in Webflow classes;
   this file only holds what classes can't express: tag resets for CMS rich text, nav open states,
   the nav colour on white pages, rich-text (article body / FAQ answer) styling and phone tables. */
body { background-color: #fff; }
:where(.hp-page-wrapper) h1 { font-size: 38px; line-height: 44px; margin: 20px 0 10px; font-weight: 700; }
:where(.hp-page-wrapper) h2 { font-size: 32px; line-height: 36px; margin: 20px 0 10px; font-weight: 700; }
:where(.hp-page-wrapper) h3 { font-size: 24px; line-height: 30px; margin: 20px 0 10px; font-weight: 700; }
:where(.hp-page-wrapper) h4 { font-size: 18px; line-height: 24px; margin: 10px 0; font-weight: 700; }
:where(.hp-page-wrapper) :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
:where(.hp-page-wrapper) a { color: revert; }
:where(.hp-page-wrapper) p { margin: 0 0 10px; font-size: inherit; font-weight: inherit; line-height: inherit; }
:where(.hp-page-wrapper) li { margin-bottom: 0; }
.hp-page-wrapper :is(input, button, select, textarea) { font-family: inherit; }
/* Nav on white pages: solid ink panel (Figma blog frames) instead of the hero glass (shared component) */
.hp-nav_container { background-color: #161925; }
/* Nav dropdowns + mobile menu open states (same as Home footer code) */
.hp-nav_dd-panel { --dx: -50%; transform: translate(var(--dx), 8px); }
.hp-nav_dd:has(.hp-is-mega) .hp-nav_dd-panel { left: -2rem; --dx: 0%; }
.hp-nav_caret { transition: transform .25s ease; }
@media (min-width: 992px) {
  .hp-nav_dd:hover .hp-nav_dd-panel, .hp-nav_dd:focus-within .hp-nav_dd-panel, .hp-nav_dd[data-open] .hp-nav_dd-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(var(--dx), 0); }
  .hp-nav_dd:hover .hp-nav_caret, .hp-nav_dd:focus-within .hp-nav_caret, .hp-nav_dd[data-open] .hp-nav_caret { transform: rotate(90deg); }
}
.hp-nav_menu-line { transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s; }
@media (max-width: 991px) {
  .hp-nav_component[data-menu-open] .hp-nav_mobile-menu { display: flex; animation: hp-menu-in .35s cubic-bezier(.2, .7, .2, 1) both; }
  .hp-nav_component[data-menu-open] .hp-nav_menu-line:first-child { transform: translateY(4.5px) rotate(45deg); }
  .hp-nav_component[data-menu-open] .hp-nav_menu-line:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .hp-nav_mgroup[data-open] .hp-nav_msub { display: flex; animation: hp-menu-in .3s ease both; }
  .hp-nav_mgroup[data-open] .hp-nav_mcaret { transform: rotate(-135deg); margin-top: .25rem; }
  .hp-nav_mobile-menu > a.hp-nav_mobile-link:last-of-type { border-bottom: 0; }
}
@keyframes hp-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* Card image zoom on hover, keyboard focus rings */
.hp-blog-card:hover .hp-blog-card_image { transform: scale(1.04); }
.hp-blog-chip:focus-visible, .hp-blog-card:focus-visible, .hp-toc-link:focus-visible { outline: 2px solid #475bf0; outline-offset: 3px; }
.hp-blog-search_form .w-form-done, .hp-blog-search_form .w-form-fail { display: none !important; }

/* ---------- Article template (Figma "Article – Desktop 1920" / "– Mobile 402") ---------- */
.hp-article-rich > :first-child { margin-top: 0; }
.hp-article-rich > :last-child { margin-bottom: 0; }
.hp-article-rich p { margin: 0 0 clamp(1.25rem, 1.184rem + 0.2635vw, 1.5rem); }
.hp-article-rich :is(h1, h2) { margin: clamp(2rem, 1.735rem + 1.054vw, 3rem) 0 clamp(1rem, 0.9669rem + 0.1318vw, 1.125rem); color: #07090f; font-size: clamp(1.5rem, 1.301rem + 0.7905vw, 2.25rem); line-height: 1.2; font-weight: 500; }
.hp-article-rich h3 { margin: clamp(1.5rem, 1.367rem + 0.527vw, 2rem) 0 0.75rem; color: #07090f; font-size: clamp(1.188rem, 1.105rem + 0.3294vw, 1.5rem); line-height: 1.25; font-weight: 500; }
.hp-article-rich :is(h4, h5, h6) { margin: 1.5rem 0 0.75rem; color: #07090f; font-size: clamp(1.062rem, 1.029rem + 0.1318vw, 1.188rem); line-height: 1.3; font-weight: 600; }
.hp-article-rich :is(h1, h2, h3, h4) { scroll-margin-top: 8.5rem; }
.hp-article-rich :is(ul, ol) { display: flex; flex-direction: column; row-gap: clamp(0.75rem, 0.7169rem + 0.1318vw, 0.875rem); margin: 0 0 clamp(1.25rem, 1.184rem + 0.2635vw, 1.5rem); padding: 0; list-style: none; }
.hp-article-rich li { position: relative; margin: 0; padding-left: 1.25rem; }
.hp-article-rich ul > li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.375rem; height: 0.375rem; background-color: #e8551a; }
.hp-article-rich ol { counter-reset: hp-ol; }
.hp-article-rich ol > li { counter-increment: hp-ol; padding-left: 2rem; }
.hp-article-rich ol > li::before { content: counter(hp-ol) "."; position: absolute; left: 0; top: 0; color: #e8551a; font-weight: 600; }
.hp-article-rich li p { margin: 0; }
.hp-article-rich :is(strong, b) { color: #07090f; font-weight: 600; }
.hp-article-rich a { color: #475bf0; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.hp-article-rich blockquote { margin: clamp(1.5rem, 1.235rem + 1.054vw, 2.5rem) 0; padding: 0 0 0 clamp(1.25rem, 1.151rem + 0.3953vw, 1.625rem); border-left: 2px solid #e8551a; color: #07090f; font-size: clamp(1.125rem, 1.059rem + 0.2635vw, 1.375rem); line-height: 1.45; font-weight: 500; font-style: normal; }
.hp-article-rich figure { margin: clamp(1.5rem, 1.235rem + 1.054vw, 2.5rem) 0; max-width: 100%; }
.hp-article-rich figure > div { width: 100%; }
.hp-article-rich img { display: block; width: 100%; height: auto; border-radius: 0; }
.hp-article-rich figcaption { margin-top: 0.625rem; color: #6d6d6d; font-size: 0.875rem; line-height: 1.4; text-align: left; }
.hp-article-rich table { width: 100%; margin: clamp(1.25rem, 1.184rem + 0.2635vw, 1.5rem) 0 clamp(1.5rem, 1.235rem + 1.054vw, 2.5rem); border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.hp-article-rich th, .hp-article-rich tr[data-head] td { padding: 1rem 1.25rem; background-color: #07090f; color: #fff; font-size: clamp(1rem, 0.9669rem + 0.1318vw, 1.125rem); line-height: 1.3; letter-spacing: 0.02em; font-weight: 600; text-align: left; }
.hp-article-rich td { padding: 1rem 1.25rem; border-bottom: 1px solid #d8d8d9; vertical-align: top; }
.hp-article-rich tbody tr:nth-child(even) td { background-color: #f6f6f6; }
.hp-article-rich td:first-child { color: #07090f; font-size: 1rem; font-weight: 600; }
.hp-article-rich .w-embed { max-width: 100%; overflow-x: auto; }
.hp-article-rich .c981-intent-summary { margin: 0 0 clamp(1.25rem, 1.184rem + 0.2635vw, 1.5rem); padding: clamp(1.25rem, 1.051rem + 0.7905vw, 2rem); border: 0; border-radius: 0; background: #f6f6f6; color: #161925; font-size: clamp(1rem, 0.9338rem + 0.2635vw, 1.25rem); line-height: 1.5; }
.hp-article-rich .c981-inline-cta { margin: clamp(2rem, 1.47rem + 2.108vw, 4rem) 0; padding: clamp(1.5rem, 1.235rem + 1.054vw, 2.5rem); border: 0; border-radius: 0; background: #07090f; box-shadow: none; }
.hp-article-rich .c981-inline-cta__eyebrow { margin: 0 0 0.75rem; color: #fa7f4d; font-size: clamp(0.75rem, 0.7169rem + 0.1318vw, 0.875rem); letter-spacing: 0.08em; font-weight: 500; }
.hp-article-rich .c981-inline-cta__copy { margin: 0 0 1.5rem; color: rgba(255, 255, 255, 0.8); font-size: clamp(1rem, 0.9338rem + 0.2635vw, 1.25rem); line-height: 1.5; }
.hp-article-rich .c981-inline-cta__button { padding: 1.125rem 2rem; border-radius: 0; background: #475bf0; color: #fff; font-family: Sonko, sans-serif; font-size: 1rem; line-height: 1.14; font-weight: 500; text-transform: uppercase; text-decoration: none; box-shadow: none; transform: none; }
.hp-article-rich .c981-inline-cta__button:hover { background: #475bf0; opacity: 0.85; transform: none; box-shadow: none; }
.hp-article-faq_answer > :last-child { margin-bottom: 0; }
.hp-article-faq_answer p { margin: 0 0 1rem; }
@media (max-width: 767px) {
  .hp-article-rich table, .hp-article-rich tbody, .hp-article-rich tr, .hp-article-rich td { display: block; width: 100%; }
  .hp-article-rich thead, .hp-article-rich tr[data-head], .hp-article-rich tr:has(> th) { display: none; }
  .hp-article-rich tr { margin-bottom: 0.625rem; padding: 1.25rem; border-radius: 0; background-color: #f6f6f6; }
  .hp-article-rich td, .hp-article-rich tbody tr:nth-child(even) td { padding: 0; border: 0; background: none; }
  .hp-article-rich td:first-child { margin-bottom: 0.75rem; }
  .hp-article-rich td + td { margin-top: 0.75rem; }
  .hp-article-rich td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 0.25rem; color: #6d6d6d; font-size: 0.75rem; line-height: 1.14; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
}
.hp-article-faq_answer :is(h1, h2, h3, h4, h5, h6) { margin: 1.5rem 0 0.75rem; color: #07090f; font-size: clamp(1.062rem, 0.9797rem + 0.3294vw, 1.375rem); line-height: 1.35; font-weight: 600; }
.hp-article-faq_answer :is(ul, ol) { display: flex; flex-direction: column; row-gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.hp-article-faq_answer li { position: relative; padding-left: clamp(1.25rem, 1.151rem + 0.3953vw, 1.625rem); }
.hp-article-faq_answer ul > li::before { content: ""; position: absolute; left: 0; top: clamp(0.6875rem, 0.6378rem + 0.1976vw, 0.875rem); width: clamp(0.375rem, 0.3419rem + 0.1318vw, 0.5rem); height: clamp(0.375rem, 0.3419rem + 0.1318vw, 0.5rem); background-color: #e8551a; }
.hp-article-faq_answer :is(strong, b) { color: #07090f; font-weight: 600; }
.hp-article-faq_answer a { color: #475bf0; text-decoration: underline; text-underline-offset: 3px; }