/* Connect 981 solutions + use case templates (hp- classes). Layout, type, breakpoints and states live in Webflow classes;
   this file only holds what classes cannot express: tag resets (site CSS forces Orbitron/Kanit on h1-h4/p),
   nav dropdown/menu open states and focus rings. Source: connect/solutions/sol-head.css */
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 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; } }
/* Solutions template: keyboard focus rings (Designer can't express :focus-visible on these) */
.hp-sol-acc_item:focus-visible, .hp-article-faq_question:focus-visible, .hp-sol-button:focus-visible { outline: 2px solid #475bf0; outline-offset: 4px; }
/* ---------- Motion (v2). Scroll/load animation is in sol-motion.js; these are the bits classes can't express ---------- */
/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
/* no flash before the hero animation starts (class set by the head script; removed after 4s if scripts fail) */
/* the hero H1 is static (no scramble on solution pages), so it is never hidden */
html.sol-motion:not(.sol-ready) :is(.hp-sol-hero_content > :not(.hp-sol-hero_title), .hp-sol-hero_grid) { visibility: hidden; }
/* "Why" items (Relume Layout 499 pattern): each item has a light rail on its left (class border); the active item's
   rail fills top-to-bottom with scroll progress */
.hp-sol-acc_item { position: relative; }
.hp-sol-acc_progress { position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background-image: linear-gradient(180deg, #e8551a, #475bf0); transform: scaleY(0); transform-origin: 50% 0; pointer-events: none; }
/* hovers that change a child of the hovered element: quiet colour/opacity changes only */
@media (hover: hover) {
  .hp-sol-card:hover .hp-sol-card_image { transform: scale(1.03); }
  .hp-sol-table_row:not(:first-child):hover > .hp-sol-table_cell:first-child { color: #475bf0; }
  .hp-article-faq_question:hover .hp-article-faq_q { color: #475bf0; }
}
/* Phone requirements table (Figma mobile): the two columns scroll sideways; a thin brand-blue scroll bar under it */
@media (max-width: 767px) {
  .hp-sol-table { scrollbar-width: thin; scrollbar-color: #475bf0 #e4e5eb; -webkit-overflow-scrolling: touch; }
  .hp-sol-table::-webkit-scrollbar { height: 4px; }
  .hp-sol-table::-webkit-scrollbar-track { background: #e4e5eb; }
  .hp-sol-table::-webkit-scrollbar-thumb { background: #475bf0; }
}