/* HDS base: design tokens (design system tokens/*.css, verbatim), Kit/Hello neutralisers, section rhythm,
   the site-wide button icon mask layer (G17), motion. Section CSS lives in its own hd-*.css file. */
/* Metric-matched fallbacks (Lighthouse CLS): Arial scaled to the measured width of Poppins 600-700 and Source Sans 3,
   so the swap to the web font barely reflows text. size-adjust measured in Chromium against the live fonts. */
@font-face{font-family:"Poppins Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arial");font-weight:600 700;size-adjust:106.5%}
@font-face{font-family:"Source Sans 3 Fallback";src:local("Arial"),local("ArialMT");font-weight:300 700;size-adjust:93%}
/* Reserve the scrollbar from the first layout: otherwise the page is narrower by 15px once it becomes scrollable and
   centred hero titles re-wrap (Lighthouse CLS 0.24 on blog posts, desktop). */
html{scrollbar-gutter:stable}
:root{
--purple-50:#f3f1f8;--purple-100:#e5e1ef;--purple-200:#c9c1de;--purple-300:#a89ac7;--purple-400:#8e74af;--purple-500:#6d5c9c;--purple-600:#574989;--purple-700:#473c72;--purple-800:#372e59;--purple-900:#241e3b;
--green-50:#eefaf5;--green-100:#d6f3e8;--green-200:#aee7d2;--green-300:#7dd8b6;--green-400:#4eba97;--green-500:#34a07e;--green-600:#268066;--green-700:#1f6551;--green-800:#194e3f;
--grey-0:#ffffff;--grey-50:#f8f8fb;--grey-100:#eeeef4;--grey-200:#dedee8;--grey-300:#c4c4d2;--grey-400:#9a9aae;--grey-500:#75758c;--grey-600:#565670;--grey-700:#3e3e55;--grey-800:#2a2a3c;--grey-900:#17171f;
--red-50:#fdf1f0;--red-500:#d0453d;--red-600:#b2352e;--amber-50:#fdf6e8;--amber-500:#d98b0b;--amber-600:#b06f05;
--text-heading:var(--purple-700);--text-body:var(--grey-700);--text-muted:var(--grey-500);--text-link:var(--purple-600);--text-link-hover:var(--green-600);
--surface-page:var(--grey-50);--surface-card:#ffffff;--surface-brand-soft:var(--purple-50);--surface-accent-soft:var(--green-50);--surface-dark:var(--purple-900);
--border-subtle:var(--grey-200);--border-strong:var(--grey-300);--border-brand:var(--purple-200);--focus-ring:var(--green-400);
--status-info-fg:var(--purple-600);--status-info-bg:var(--purple-50);--status-info-line:var(--purple-200);
--shadow-xs:0 1px 2px rgba(36,30,59,.06);--shadow-sm:0 1px 3px rgba(36,30,59,.08),0 1px 2px rgba(36,30,59,.04);--shadow-md:0 4px 12px rgba(36,30,59,.10);--shadow-lg:0 12px 28px rgba(36,30,59,.14);
--radius-xs:3px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;
--space-4:16px;--gutter:24px;--container-max:1200px;--section-y:96px;--section-y-compact:56px;
--font-display:"Poppins","Poppins Fallback","Segoe UI",system-ui,sans-serif;--font-body:"Source Sans 3","Source Sans 3 Fallback","Segoe UI",system-ui,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,monospace;
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
--text-2xs:11px;--text-xs:12px;--text-sm:14px;--text-base:16px;--text-md:18px;--text-lg:20px;--text-xl:24px;--text-2xl:30px;--text-3xl:38px;--text-4xl:48px;
--leading-tight:1.12;--leading-snug:1.25;--leading-normal:1.55;--tracking-tight:-0.02em;--tracking-wide:0.04em;
--type-h2:var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-display);
--type-h3:var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-display);
--type-body:var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-body);
--type-body-sm:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
--type-data:var(--weight-medium) var(--text-sm)/1.4 var(--font-mono);
--ease:cubic-bezier(.2,0,.2,1);
}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:#fff;-webkit-font-smoothing:antialiased}
body[class*="elementor-kit-"]{--e-global-typography-text-font-family:"Source Sans 3";font-family:var(--font-body)}
::selection{background:var(--purple-200);color:var(--purple-900)}
::-moz-selection{background:var(--purple-200);color:var(--purple-900)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
.hd-main{display:block;outline:none}
/* display rules on components beat the UA [hidden]{display:none} (§2b) */
[hidden]{display:none!important}
/* Hello gives every <button> white-space:nowrap; the design's buttons wrap. */
button[class^="hd-"],button[class*=" hd-"]{white-space:normal}
/* Hello reset paints bare buttons/links (§2b): neutralise, components scope their own states. */
body button:hover,body button:focus,body [type=button]:hover,body [type=button]:focus{background-color:transparent;color:inherit}
body a:hover{color:inherit}
.elementor-widget-text-editor p:last-child{margin-bottom:0}
.elementor-widget-text-editor p{margin:0}
.elementor-widget-text-editor p+p{margin-top:var(--space-4)}
.elementor-heading-title{text-wrap:pretty}
/* The design system base: p, h1–h4 { text-wrap: pretty } (no orphaned last word). */
p,h1,h2,h3,h4{text-wrap:pretty}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Section rhythm: full-bleed band + 1200px column, 24px gutter (design Section()) ---------- */
.hd-sec{position:relative}
.hd-sec .hd-wrap.e-con{max-width:var(--container-max);width:100%;margin-inline:auto;padding:var(--section-y) var(--gutter)}
.hd-sec.hd-compact .hd-wrap.e-con{padding-top:var(--section-y-compact);padding-bottom:var(--section-y-compact)}
/* Phones (portrait + landscape): 56px section rhythm instead of the desktop 96px (BugHerd 545426 #5). */
@media (max-width:880px){:root{--section-y:56px}}
/* Phones: 44px tap targets (WCAG 2.5.5 AAA) on the controls that sat at 30-42px (BugHerd 545426 #6). Desktop unchanged. */
@media (max-width:880px){
 .hd-btn--md .elementor-button,.hd-blog-card-btn,.hd-blog-clear,.hd-post-share-btn,.hd-fsocial .elementor-icon-list-item>a{height:44px!important;min-height:44px!important}
 .hd-post-share-btn,.hd-fsocial .elementor-icon-list-item>a{width:44px!important}
 .hd-suite-card-cta,.hd-ir-sol{min-height:44px!important;box-sizing:border-box}
 .hd-post-tag{display:inline-flex!important;align-items:center;min-height:44px;box-sizing:border-box}
 .hd-post-toc a{display:flex!important;align-items:center;min-height:44px;box-sizing:border-box}
 /* Avatar pickers stay 38px below 560px so all six fit one row; an invisible 4px ring makes the tap area 45x45. */
 html body:not(#hd) .hd-spot-pick{position:relative}
 html body:not(#hd) .hd-spot-pick::after{content:"";position:absolute;inset:-4px;border-radius:999px}
}
.hd-sec.hd-bg-card{background:var(--surface-card)}
.hd-sec.hd-bg-sunken{background:var(--surface-page)}
.hd-sec.hd-bg-soft{background:var(--surface-brand-soft)}
.hd-sec.hd-bg-dark{background:var(--surface-dark)}
.hd-sec.hd-bg-brand{background:linear-gradient(160deg,var(--purple-500) 0%,var(--purple-600) 45%,var(--purple-800) 100%)}
.hd-sec.hd-clip{overflow:hidden}
.hd-sec>.hd-wrap{position:relative;z-index:1}
/* Template embeds are layout-neutral wrappers. */
.hd-tpl-embed.e-con,.hd-tpl-embed>.elementor-widget-template,.hd-tpl-embed .elementor-template{width:100%}
.hd-tpl-embed.e-con{--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0}

/* ---------- Section heading (design SectionHeading + AccentRule) ---------- */
.hd-shead{max-width:820px}
.hd-shead.hd-center{margin-inline:auto;text-align:center;align-items:center}
.hd-shead .hd-intro p,.hd-shead .hd-intro{margin-top:16px}
/* The short teal rule that draws left-to-right under a heading once it scrolls into view. */

/* ---------- Buttons: design system Button.jsx (sizes/variants are baked into widget settings) ---------- */
.hd-btn{line-height:0}
.hd-btn .elementor-button{vertical-align:top;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;transition:background-color 150ms var(--ease),border-color 150ms var(--ease),color 150ms var(--ease),transform 80ms var(--ease)}
.hd-btn .elementor-button:active{transform:scale(.985)}
.hd-btn .elementor-button-content-wrapper{display:inline-flex;align-items:center;gap:8px}
/* Fixed control heights (design --control-h-*): an icon taller than the text must not grow the button. */
.hd-btn--sm .elementor-button{height:32px;box-sizing:border-box}.hd-btn--md .elementor-button{height:40px;box-sizing:border-box}.hd-btn--lg .elementor-button{height:48px;box-sizing:border-box}
.hd-btn.hd-full .elementor-button{width:100%}
/* G17 icon layer: one vocabulary (Lucide), painted with a mask in currentColor. Class hd-ico-{l|r}-{name}. */
[class*="hd-ico-"] .elementor-button-content-wrapper::before,[class*="hd-ico-"] .elementor-button-content-wrapper::after{content:none;flex:0 0 auto;width:18px;height:18px;background:currentColor;-webkit-mask:var(--hd-ico) center/contain no-repeat;mask:var(--hd-ico) center/contain no-repeat}
[class*="hd-ico-l-"] .elementor-button-content-wrapper::before{content:""}
[class*="hd-ico-r-"] .elementor-button-content-wrapper::after{content:""}
.hd-btn--sm[class*="hd-ico-"] .elementor-button-content-wrapper::before,.hd-btn--sm[class*="hd-ico-"] .elementor-button-content-wrapper::after{width:16px;height:16px}

/* ---------- Motion ---------- */
@keyframes hdHeroIn{from{opacity:.01;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes hdHeroUp{from{opacity:.01;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}}
@keyframes hdHeroPop{from{opacity:.01;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
.hd-in{animation:hdHeroIn 720ms var(--ease) var(--d,0ms) both}
.hd-in-up{animation:hdHeroUp 900ms var(--ease) var(--d,0ms) both}
.hd-in-pop{animation:hdHeroPop 520ms cubic-bezier(.2,.9,.3,1.2) var(--d,0ms) both}
.hd-word{display:inline-block;white-space:pre}
/* Hero entrance keyframes (hdHeroIn/Up/Pop above, hdWordIn below) start at .01, not 0: looks identical, but Chrome
   counts near-invisible content as painted, so LCP
   is not held back until the last word has faded in (it was 4.5-9s of render delay on mobile Lighthouse). */
@keyframes hdWordIn{from{opacity:.01;transform:translateY(22px)}to{opacity:1;transform:none}}
.hd-word>span{display:inline-block;animation:hdWordIn 720ms var(--ease) var(--d,0ms) both}
@keyframes hdFloaty{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.hd-float-slow{animation:hdFloaty 7s cubic-bezier(.4,0,.6,1) infinite alternate}
.hd-float-mid{animation:hdFloaty 5.5s cubic-bezier(.4,0,.6,1) infinite alternate}
.hd-reveal{opacity:0;transform:translateY(18px) scale(.98);transition:opacity 480ms var(--ease) var(--rd,0ms),transform 560ms var(--ease) var(--rd,0ms)}
.hd-reveal.is-seen{opacity:1;transform:none}
.elementor-editor-active .hd-reveal{opacity:1;transform:none}
@keyframes hdPulse{0%{box-shadow:0 0 0 0 rgba(78,186,151,.55)}70%{box-shadow:0 0 0 7px rgba(78,186,151,0)}100%{box-shadow:0 0 0 0 rgba(78,186,151,0)}}
.hd-pulse-dot{display:inline-block;width:7px;height:7px;border-radius:999px;background:var(--green-400);margin:0 6px 1px 2px;animation:hdPulse 2.2s ease-out infinite}
@keyframes hdGrowbar{from{width:0}to{width:100%}}
@keyframes hdHubRing{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.9);opacity:0}}
@keyframes hdSpin{to{transform:rotate(360deg)}}

/* ---------- Tech backdrop (design TechBackdrop): injected by hd-site.js into .hd-has-tech ---------- */
.hd-has-tech{position:relative;overflow:hidden}
.hd-tech-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hd-tech-bg-mesh{position:absolute;inset:0;display:block;mask-image:radial-gradient(ellipse 90% 95% at 50% 50%,#000 40%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 90% 95% at 50% 50%,#000 40%,transparent 100%)}
.hd-tech-bg-glow{position:absolute;width:640px;height:640px;border-radius:999px;filter:blur(40px);opacity:.22}
.hd-tech-bg-glow-a{left:-160px;top:-200px;background:radial-gradient(circle,rgba(78,186,151,.55) 0%,transparent 62%);animation:hdGlowA 26s ease-in-out infinite alternate}
.hd-tech-bg-glow-b{right:-200px;bottom:-240px;background:radial-gradient(circle,rgba(142,116,175,.6) 0%,transparent 62%);animation:hdGlowB 32s ease-in-out infinite alternate}
.hd-tech-bg.is-still .hd-tech-bg-glow{animation:none}
@keyframes hdGlowA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(180px,120px,0) scale(1.15)}}
@keyframes hdGlowB{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-200px,-140px,0) scale(.95)}}
.hd-has-tech>.e-con,.hd-has-tech>.hd-wrap,.hd-has-tech>*:not(.hd-tech-bg){position:relative;z-index:1}
/* Brand mark images (design BrandMark), injected by hd-site.js from data-hd-mark. */
.hd-brandmark{position:absolute;height:auto!important;max-width:none!important;pointer-events:none;user-select:none;z-index:0}

/* Icon Box rows: Elementor stacks the icon above the text at the mobile breakpoint; the design never does. */
.hd-usp-item .elementor-icon-box-wrapper,.hd-check-row .elementor-icon-box-wrapper,.hd-why-row .elementor-icon-box-wrapper,.hd-ibrow .elementor-icon-box-wrapper{display:flex!important;flex-direction:row!important;text-align:left!important}
.hd-usp-item .elementor-icon-box-content,.hd-check-row .elementor-icon-box-content,.hd-why-row .elementor-icon-box-content,.hd-ibrow .elementor-icon-box-content{flex:1 1 auto;min-width:0}

/* ---------- Inline icon helper ---------- */
.hd-ico{display:block;flex:0 0 auto}
.hd-icon-inline{display:inline-flex}

@media (prefers-reduced-motion:reduce){
 .hd-in,.hd-in-up,.hd-in-pop,.hd-word>span,.hd-float-slow,.hd-float-mid,.hd-pulse-dot,.hd-tech-bg-glow{animation:none}
 .hd-reveal{opacity:1;transform:none;transition:none}
}