/* ===========================================================================
   AXIS · Fonts
   Greenhouse uses exactly two families: Poppins (display) + Geist (everything).
   Loaded from Google Fonts. If you need offline/embedded binaries, swap these
   @import lines for local @font-face rules pointing at hosted .woff2 files.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap");

/* ===========================================================================
   AXIS · Color tokens
   Source of truth: greenhouse-eo/DESIGN.md front-matter (mirror of the live MUI
   theme). Greenhouse is built on bright neutral surfaces, deep structural blues,
   and one strong accent at a time. Core Blue is the default product energy;
   green/amber/crimson are controlled signals, never a rainbow.
   =========================================================================== */

.gh-hubspot-module {
  /* --- Brand · Efeonce / Greenhouse logo colors ------------------------- */
  --brand-navy: #004070;        /* Efeonce institutional wordmark + "house" */
  --brand-green: #6ec207;       /* Greenhouse leaf / "green" + isotype accent */
  --brand-green-deep: #4b8405;  /* AA-legible green for text/fills */

  /* --- Primary · Core Blue (canonical CTA + active state) --------------- */
  --primary: #0375db;
  --primary-light: #3691e3;
  --primary-dark: #024c8f;
  --primary-tonal: #d7e9f9;     /* soft fill behind dark text */
  --on-primary: #ffffff;

  /* --- Secondary · AXIS green (structural / intentional action) --------- */
  --secondary: #4b8405;         /* secondary-700 — crisp, AA on white (4.56:1) */
  --secondary-light: #6ec207;   /* secondary-500 — bright lime, TINT/accent only */
  --secondary-dark: #396504;    /* secondary-800 — hover / active */
  --on-secondary: #ffffff;

  /* --- Info ------------------------------------------------------------- */
  --info: #1f6fd4;
  --on-info: #ffffff;

  /* --- Semantic · feedback (semantic only, never decorative) ------------ */
  --success: #157f47;           /* AA on white 5.05:1 */
  --warning: #ffb703;           /* uses DARK ink — white fails AA on amber */
  --error: #dc2e39;             /* AA on white 4.6:1 */
  --on-success: #ffffff;
  --on-warning: #2f2b3d;
  --on-error: #ffffff;

  /* Tonal feedback (soft surface + AA ink — the default chip/alert look).
     NEVER use the solid --warning/--error as a TEXT color; use the ink. */
  --success-tonal: #e3f3ea;
  --success-ink: #0f6b3b;
  --warning-tonal: #fff4d6;
  --warning-ink: #8a5a00;
  --error-tonal: #fbe1e3;
  --error-ink: #b71f29;
  --info-tonal: #e0edfb;
  --info-ink: #1a5cae;

  /* --- Neutrals · light mode (AXIS) ------------------------------------- */
  --neutral: #f8f7fa;           /* app-shell body background */
  --surface: #ffffff;           /* card / paper */
  --surface-alt: #fafafa;       /* quiet inset / striped row */
  --text-primary: #2f2b3d;      /* ink */
  --text-secondary: #6b6876;    /* secondary copy / metadata */
  --text-disabled: #a7a5ae;     /* disabled — also the brand slogan grey #848484 family */
  --border-subtle: #dbdbdb;     /* 1px card border + dividers */
  --border-strong: #c4c3cc;

  /* --- Neutrals · dark mode (AXIS) -------------------------------------- */
  --background-dark: #25293c;   /* dark app-shell body */
  --surface-dark: #2f3349;      /* dark paper */
  --text-primary-dark: #e1def5;
  --text-secondary-dark: #acabc1;
  --border-dark: #44485e;

  /* --- Data-storytelling semaphore (KPI health — distinct from UI feedback)
     Per UX_WRITING_RESEARCH §15. Pair color with icon + text, never color alone. */
  --semaphore-optimal: #6ec207;
  --semaphore-attention: #ff6500;
  --semaphore-critical: #bb1954;

  /* --- Chart series · "Deep-bright" categorical (self-contained, NOT brand)
     A chart series must never be mistaken for a UI status color. */
  --chart-1: #5145e0;  /* indigo */
  --chart-2: #1fba85;  /* verde */
  --chart-3: #fb7a00;  /* naranja */
  --chart-4: #d633c9;  /* magenta */
  --chart-5: #3cc9f0;  /* cian */
  --chart-6: #9be036;  /* lima */
  /* directional (finance / deltas) */
  --chart-positive: #3dba5d;
  --chart-caution: #f0a526;
  --chart-negative: #ff4d49;
  --chart-neutral: #94a3b8;

  /* === Semantic aliases (consume these in product UI) ==================== */
  --app-bg: var(--neutral);
  --surface-card: var(--surface);
  --surface-sunken: var(--surface-alt);
  --text-body: var(--text-primary);
  --text-muted: var(--text-secondary);
  --text-link: var(--primary);
  --action-primary: var(--primary);
  --action-primary-hover: var(--primary-dark);
  --focus-ring: var(--primary);
  --divider: var(--border-subtle);
}

/* ===========================================================================
   AXIS · Typography tokens
   Two active families only: Poppins for controlled display moments, Geist for
   everything else (body, tables, forms, chips, buttons, IDs, KPI values).
   Numeric runs use Geist with tabular-nums — never a monospace family.
   Sizes are rem (scale with the user's font-size preference; WCAG 1.4.4).
   Weight roles: 400 body · 600 labels/titles/buttons · 700 strong · 800 display/KPI.
   =========================================================================== */

.gh-hubspot-module {
  /* --- Families -------------------------------------------------------- */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-numeric: "Geist", system-ui, sans-serif; /* with font-feature-settings "tnum" 1 */

  /* --- Weight roles ---------------------------------------------------- */
  --fw-regular: 400;     /* @kind font */
  --fw-semibold: 600;    /* @kind font */
  --fw-bold: 700;        /* @kind font */
  --fw-extrabold: 800;   /* @kind font */
  --fw-black: 900;       /* @kind font */ /* brand slogan only */

  /* --- Display scale · Poppins (controlled moments only) --------------- */
  --type-headline-display-size: 2rem;       --type-headline-display-weight: 800; --type-headline-display-lh: 1.25;
  --type-headline-lg-size: 1.5rem;          --type-headline-lg-weight: 700;      --type-headline-lg-lh: 1.25;
  --type-headline-md-size: 1.25rem;         --type-headline-md-weight: 600;      --type-headline-md-lh: 1.25;
  --type-page-title-size: 1.25rem;          --type-page-title-weight: 600;       --type-page-title-lh: 1.4;
  --type-surface-hero-size: 2.125rem;       --type-surface-hero-weight: 600;     --type-surface-hero-lh: 1.15;
  --type-surface-hero-size-mobile: 1.75rem;

  /* --- Text scale · Geist --------------------------------------------- */
  --type-section-title-size: 1rem;          --type-section-title-weight: 600;    --type-section-title-lh: 1.5;
  --type-label-lg-size: 1rem;               --type-label-lg-weight: 600;
  --type-label-md-size: 0.875rem;           --type-label-md-weight: 600;         --type-label-md-lh: 1.5;
  --type-label-sm-size: 0.8125rem;          --type-label-sm-weight: 600;
  --type-body-lg-size: 1rem;                --type-body-lg-weight: 400;          --type-body-lg-lh: 1.5;
  --type-body-md-size: 0.875rem;            --type-body-md-weight: 400;          --type-body-md-lh: 1.5;
  --type-body-sm-size: 0.8125rem;           --type-body-sm-weight: 400;          --type-body-sm-lh: 1.45; --type-body-sm-ls: 0.03em;
  --type-disclosure-size: 0.75rem;          --type-disclosure-weight: 400;       --type-disclosure-lh: 1.45; --type-disclosure-ls: 0.03em;
  --type-overline-size: 0.75rem;            --type-overline-weight: 600;         --type-overline-lh: 1.167; --type-overline-ls: 0.08em;

  /* --- Numeric (Geist + tabular-nums) --------------------------------- */
  --type-numeric-id-size: 0.875rem;         --type-numeric-id-weight: 600;       --type-numeric-id-ls: 0.01em;
  --type-numeric-amount-size: 0.8125rem;    --type-numeric-amount-weight: 700;
  --type-kpi-size: 1.75rem;                 --type-kpi-weight: 800;              --type-kpi-lh: 1.05;
}

/* --- Optional helper classes (foundations specimens / quick prototypes) --- */
.gh-hubspot-module .t-headline-display { font-family: var(--font-display); font-size: var(--type-headline-display-size); font-weight: var(--type-headline-display-weight); line-height: var(--type-headline-display-lh); color: var(--text-primary); }
.gh-hubspot-module .t-headline-lg { font-family: var(--font-display); font-size: var(--type-headline-lg-size); font-weight: var(--type-headline-lg-weight); line-height: var(--type-headline-lg-lh); color: var(--text-primary); }
.gh-hubspot-module .t-page-title { font-family: var(--font-display); font-size: var(--type-page-title-size); font-weight: var(--type-page-title-weight); line-height: var(--type-page-title-lh); color: var(--text-primary); }
.gh-hubspot-module .t-surface-hero { font-family: var(--font-display); font-size: var(--type-surface-hero-size); font-weight: var(--type-surface-hero-weight); line-height: var(--type-surface-hero-lh); color: var(--text-primary); }
.gh-hubspot-module .t-section-title { font-family: var(--font-sans); font-size: var(--type-section-title-size); font-weight: var(--type-section-title-weight); line-height: var(--type-section-title-lh); color: var(--text-primary); }
.gh-hubspot-module .t-.gh-hubspot-module-lg { font-family: var(--font-sans); font-size: var(--type-body-lg-size); font-weight: var(--type-body-lg-weight); line-height: var(--type-body-lg-lh); color: var(--text-primary); }
.gh-hubspot-module .t-.gh-hubspot-module-md { font-family: var(--font-sans); font-size: var(--type-body-md-size); font-weight: var(--type-body-md-weight); line-height: var(--type-body-md-lh); color: var(--text-primary); }
.gh-hubspot-module .t-.gh-hubspot-module-sm { font-family: var(--font-sans); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); letter-spacing: var(--type-body-sm-ls); color: var(--text-secondary); }
.gh-hubspot-module .t-overline { font-family: var(--font-sans); font-size: var(--type-overline-size); font-weight: var(--type-overline-weight); line-height: var(--type-overline-lh); letter-spacing: var(--type-overline-ls); text-transform: uppercase; color: var(--text-secondary); }
.gh-hubspot-module .t-kpi { font-family: var(--font-numeric); font-size: var(--type-kpi-size); font-weight: var(--type-kpi-weight); line-height: var(--type-kpi-lh); font-feature-settings: "tnum" 1; color: var(--text-primary); }
.gh-hubspot-module .t-numeric { font-family: var(--font-numeric); font-feature-settings: "tnum" 1; }

/* ===========================================================================
   AXIS · Spacing, radius, elevation & motion tokens
   Greenhouse favors predictable spacing and strong rhythm over visual tricks.
   Spacing step = 4px · N. Radius is moderate and systematic. Depth is restrained
   and semantic: two soft shadow layers + a 1px hairline, never a heavy drop.
   =========================================================================== */

.gh-hubspot-module {
  /* --- Spacing (theme.spacing(N) = 4N px) ------------------------------ */
  --space-xs: 4px;
  --space-sm: 8px;     /* compact inline gap */
  --space-md: 16px;    /* standard inner spacing step */
  --space-lg: 24px;    /* default card padding + container rhythm */
  --space-xl: 32px;
  --space-xxl: 40px;   /* larger section breathing room */

  /* --- Radius ---------------------------------------------------------- */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;    /* DEFAULT — cards, fields, chips, common surfaces */
  --radius-lg: 8px;    /* floating / high-emphasis — docks, dialogs */
  --radius-xl: 10px;   /* larger panels & previews */
  --radius-xxl: 12px;  /* large support / editorial surfaces */
  --radius-display: 16px;
  --radius-full: 9999px; /* pills / capsules (true circle = 50%) */

  /* --- Elevation · semantic roles (two soft layers + 1px hairline) ------
     No role exceeds 0 8px 24px rgba(0,0,0,.1). The border carries separation
     under forced-colors; the shadow is the enhancement. */
  --elevation-none: none;
  --elevation-raised:  0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 6px rgba(16, 24, 40, 0.06);
  --elevation-floating: 0 2px 6px rgba(16, 24, 40, 0.06), 0 6px 16px rgba(16, 24, 40, 0.08);
  --elevation-overlay:  0 4px 10px rgba(16, 24, 40, 0.07), 0 8px 24px rgba(16, 24, 40, 0.10);
  --elevation-modal:    0 4px 12px rgba(16, 24, 40, 0.08), 0 8px 24px rgba(16, 24, 40, 0.10);

  /* --- Borders / hairlines (px — must not scale with font) ------------- */
  --hairline: 1px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* --- Motion (ms, fixed scale) --------------------------------------- */
  --motion-instant: 75ms;    /* @kind other */
  --motion-short: 150ms;     /* @kind other */
  --motion-standard: 200ms;  /* @kind other */
  --motion-medium: 300ms;    /* @kind other */
  --motion-long: 400ms;      /* @kind other */
  --motion-extended: 600ms;  /* @kind other */

  /* Easing — never ease-in-out as default */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);      /* @kind other */ /* default */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);      /* @kind other */
  --ease-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); /* @kind other */ /* exits */
  --ease-linear: linear;                              /* @kind other */
}


  .gh-hubspot-module { margin: 0; background: #f8f7fa; color: #2f2b3d; font-family: Geist, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  .gh-hubspot-module * { box-sizing: border-box; }
  .gh-hubspot-module a { color: #0375db; text-decoration: none; }
  .gh-hubspot-module a:hover { color: #024c8f; text-decoration: underline; }
  @keyframes hsxSettle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes hsxDraw { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
  .gh-hubspot-module .hsx-settle { animation: hsxSettle 300ms var(--hsx-ease-emphasized, cubic-bezier(0.2,0,0,1)) both; }
  .gh-hubspot-module .hsx-path { stroke-dasharray: 420; animation: hsxDraw 400ms var(--hsx-ease-emphasized, cubic-bezier(0.2,0,0,1)) both; }
  .gh-hubspot-module .hsx-faq summary::-webkit-details-marker { display: none; }
  .gh-hubspot-module .hsx-faq { background: #ffffff; border: 1px solid #dbdbdb; border-radius: 8px; transition: border-color var(--hsx-motion-standard, 200ms) linear, box-shadow var(--hsx-motion-standard, 200ms) linear, transform var(--hsx-motion-standard, 200ms) var(--hsx-ease-emphasized, cubic-bezier(0.2,0,0,1)); }
  .gh-hubspot-module .hsx-faq:hover { border-color: #b9d5f0; transform: translateY(-1px); }
  .gh-hubspot-module .hsx-faq[open] { border-color: #0375db; box-shadow: 0 2px 4px rgba(3,117,219,0.07), 0 12px 28px rgba(3,117,219,0.12); transform: none; }
  .gh-hubspot-module .hsx-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 20px; padding: 22px 24px; }
  .gh-hubspot-module .hsx-faq-n { font-family: Poppins, sans-serif; font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; color: #6b6876; flex: none; transition: color var(--hsx-motion-standard, 200ms) linear; }
  .gh-hubspot-module .hsx-faq:hover .hsx-faq-n { color: #2f2b3d; }
  .gh-hubspot-module .hsx-faq[open] .hsx-faq-n { color: #b8431f; }
  .gh-hubspot-module .hsx-faq-q { flex: 1; font-family: Poppins, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.4; color: #2f2b3d; }
  .gh-hubspot-module .hsx-faq-i { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #dbdbdb; display: flex; align-items: center; justify-content: center; color: #6b6876; font-size: 17px; transition: background var(--hsx-motion-standard, 200ms) linear, border-color var(--hsx-motion-standard, 200ms) linear, color var(--hsx-motion-standard, 200ms) linear, transform var(--hsx-motion-medium, 300ms) var(--hsx-ease-emphasized, cubic-bezier(0.2,0,0,1)); }
  .gh-hubspot-module .hsx-faq:hover .hsx-faq-i { border-color: #b9d5f0; color: #0375db; }
  .gh-hubspot-module .hsx-faq[open] .hsx-faq-i { background: #0375db; border-color: #0375db; color: #ffffff; transform: rotate(135deg); }
  @keyframes hsxFaqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .gh-hubspot-module .hsx-faq-a { padding: 0 26px 26px 66px; animation: hsxFaqIn var(--hsx-motion-medium, 300ms) var(--hsx-ease-emphasized, cubic-bezier(0.2,0,0,1)) both; }
  @media (prefers-reduced-motion: reduce) {
    .gh-hubspot-module .hsx-faq, .gh-hubspot-module .hsx-faq-i, .gh-hubspot-module .hsx-faq-a { transition: none !important; animation: none !important; transform: none !important; }
    .gh-hubspot-module .hsx-faq[open] .hsx-faq-i { transform: none !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .gh-hubspot-module .hsx-settle, .gh-hubspot-module .hsx-path { animation: none !important; }
    .gh-hubspot-module .hsx-path { stroke-dashoffset: 0 !important; }
    .gh-hubspot-module * { transition-duration: 1ms !important; }
  }
  @keyframes hsxDrawWide { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
  .gh-hubspot-module .hsx-wide { stroke-dasharray: 1400; animation: hsxDrawWide 900ms var(--hsx-ease-emphasized, cubic-bezier(0.2,0,0,1)) both; }
  .gh-hubspot-module #dc-root button:focus-visible, .gh-hubspot-module #dc-root a:focus-visible, .gh-hubspot-module #dc-root summary:focus-visible, .gh-hubspot-module #dc-root input:focus-visible, .gh-hubspot-module #dc-root textarea:focus-visible {
    outline: 2px solid #0375db;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(3, 117, 219, 0.18);
  }
  .gh-hubspot-module #dc-root section[data-screen-label="Hero"] button:focus-visible,
  .gh-hubspot-module #dc-root section[data-screen-label="Hero"] a:focus-visible,
  .gh-hubspot-module #dc-root section[data-screen-label="Hubs"] button:focus-visible,
  .gh-hubspot-module #dc-root section[data-screen-label="Hubs"] a:focus-visible,
  .gh-hubspot-module #dc-root section[data-screen-label="Conversión"] a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.22);
  }
  @keyframes hsxRead {
    0%   { color: #ffffff; }
    5%   { color: #ff7a59; }
    15%  { color: #ff7a59; }
    26%  { color: #ffffff; }
    100% { color: #ffffff; }
  }
  .gh-hubspot-module .hsx-read > span {
    animation: hsxRead 3.9s var(--hsx-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)) infinite backwards;
    will-change: color;
  }
  .gh-hubspot-module .hsx-read > span:nth-child(1) { animation-delay: 1.4s; }
  .gh-hubspot-module .hsx-read > span:nth-child(2) { animation-delay: 1.72s; }
  .gh-hubspot-module .hsx-read > span:nth-child(3) { animation-delay: 2.04s; }
  @media (prefers-reduced-motion: reduce) {
    .gh-hubspot-module .hsx-read > span { animation: none !important; color: #ffffff !important; }
  }
  .gh-hubspot-module .hsx-cta {
    transition: background-color var(--hsx-motion-standard, 200ms) linear,
                transform var(--hsx-motion-standard, 200ms) var(--hsx-ease-emphasized, cubic-bezier(0.2,0,0,1)),
                box-shadow var(--hsx-motion-standard, 200ms) linear;
  }
  .gh-hubspot-module .hsx-cta:hover, .gh-hubspot-module .hsx-cta:focus-visible { transform: translateY(-2px); }
  .gh-hubspot-module .hsx-cta i { transition: transform var(--hsx-motion-short, 150ms) var(--hsx-ease-emphasized, cubic-bezier(0.2,0,0,1)); }
  .gh-hubspot-module .hsx-cta:hover i, .gh-hubspot-module .hsx-cta:focus-visible i { transform: translateX(5px); }
  .gh-hubspot-module .hsx-cta-solid { background-color: #0375db; box-shadow: 0 2px 6px rgba(3,117,219,0.18); }
  .gh-hubspot-module .hsx-cta-solid:hover, .gh-hubspot-module .hsx-cta-solid:focus-visible { background-color: #024c8f; box-shadow: 0 8px 26px rgba(3,117,219,0.36); }
  .gh-hubspot-module .hsx-cta-signal { background-color: #ff7a59; box-shadow: 0 2px 8px rgba(255,122,89,0.28); }
  .gh-hubspot-module .hsx-cta-signal:hover, .gh-hubspot-module .hsx-cta-signal:focus-visible { background-color: #ff6a45; box-shadow: 0 10px 30px rgba(255,122,89,0.44); }
  .gh-hubspot-module .hsx-cta-ghost { background-color: rgba(255,255,255,0.09); }
  .gh-hubspot-module .hsx-cta-ghost:hover, .gh-hubspot-module .hsx-cta-ghost:focus-visible { background-color: rgba(255,255,255,0.18); }
  .gh-hubspot-module .hsx-link { position: relative; text-decoration: none; }
  .gh-hubspot-module .hsx-link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left center;
    transition: transform var(--hsx-motion-standard, 200ms) var(--hsx-ease-emphasized, cubic-bezier(0.2,0,0,1));
  }
  .gh-hubspot-module .hsx-link:hover, .gh-hubspot-module .hsx-link:focus-visible { text-decoration: none; }
  .gh-hubspot-module .hsx-link:hover::after, .gh-hubspot-module .hsx-link:focus-visible::after { transform: scaleX(1); }
  .gh-hubspot-module .hsx-link i { transition: transform var(--hsx-motion-short, 150ms) var(--hsx-ease-emphasized, cubic-bezier(0.2,0,0,1)); }
  .gh-hubspot-module .hsx-link:hover i, .gh-hubspot-module .hsx-link:focus-visible i { transform: translateX(4px); }
  @media (prefers-reduced-motion: reduce) {
    .gh-hubspot-module .hsx-cta, .gh-hubspot-module .hsx-cta i, .gh-hubspot-module .hsx-link::after, .gh-hubspot-module .hsx-link i { transition: none !important; }
    .gh-hubspot-module .hsx-cta:hover { transform: none !important; }
    .gh-hubspot-module .hsx-link:hover::after, .gh-hubspot-module .hsx-link:focus-visible::after { transform: scaleX(1) !important; }
  }
  @keyframes hsxBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .gh-hubspot-module .hsx-bar { transform-origin: left center; animation: hsxBar 760ms var(--hsx-ease-emphasized, cubic-bezier(0.2,0,0,1)) both; }
  @media (prefers-reduced-motion: reduce) { .gh-hubspot-module .hsx-bar { animation: none !important; transform: none !important; } }
  .gh-hubspot-module .hsx-sticky { position: sticky; top: 40px; }
  @media (max-width: 900px) { .gh-hubspot-module .hsx-sticky { position: static; } }
  @keyframes hsxPanelA { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
  @keyframes hsxPanelB { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .gh-hubspot-module .hsx-panel { animation: none !important; opacity: 1 !important; transform: none !important; } }
  .gh-hubspot-module .hsx-sheen-clip {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
    -webkit-mask-image: url("../img/hubspot/badge-orange-spp-hubspot.svg");
    mask-image: url("../img/hubspot/badge-orange-spp-hubspot.svg");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .gh-hubspot-module .hsx-sheen {
    position: absolute; top: -35%; bottom: -35%; left: 0; width: 32%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 100%);
    mix-blend-mode: overlay;
    animation: hsxSheen 7s var(--hsx-ease-emphasized, cubic-bezier(0.2,0,0,1)) 1200ms infinite backwards;
  }
  @keyframes hsxSheen {
    0%   { transform: translateX(-170%) rotate(20deg); opacity: 0; }
    3%   { opacity: 1; }
    13%  { transform: translateX(360%) rotate(20deg); opacity: 1; }
    15%  { transform: translateX(360%) rotate(20deg); opacity: 0; }
    100% { transform: translateX(360%) rotate(20deg); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .gh-hubspot-module .hsx-sheen { animation: none !important; opacity: 0 !important; } }
  @media (prefers-reduced-motion: reduce) { .gh-hubspot-module .hsx-wide { animation: none !important; stroke-dashoffset: 0 !important; } }
  @media (max-width: 1180px) {
    .gh-hubspot-module .hsx-node { display: none !important; }
    .gh-hubspot-module .hsx-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .gh-hubspot-module .hsx-band-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .gh-hubspot-module .hsx-cols-5 { grid-template-columns: repeat(5, 1fr) !important; }
    .gh-hubspot-module .hsx-band-grid > button { grid-column: span 1 !important; }
    .gh-hubspot-module .hsx-band-base > button { grid-column: 1 / -1 !important; }
    .gh-hubspot-module .hsx-cols-6 { grid-template-columns: repeat(3, 1fr) !important; }
    .gh-hubspot-module .hsx-hero-lead { grid-template-columns: 1fr !important; }
    .gh-hubspot-module .hsx-split { grid-template-columns: 1fr !important; }
    .gh-hubspot-module .hsx-atlas { grid-template-columns: 280px 1fr !important; }
    .gh-hubspot-module .hsx-h1 { font-size: 48px !important; }
    .gh-hubspot-module .hsx-h2 { font-size: 33px !important; }
    .gh-hubspot-module .hsx-band { padding: 68px 28px !important; }
  }
  @media (max-width: 900px) {
    .gh-hubspot-module .hsx-split, .gh-hubspot-module .hsx-atlas, .gh-hubspot-module .hsx-cols-3, .gh-hubspot-module .hsx-cols-2, .gh-hubspot-module .hsx-cols-4, .gh-hubspot-module .hsx-row { grid-template-columns: 1fr !important; }
    .gh-hubspot-module .hsx-band-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .gh-hubspot-module .hsx-band-grid > button { grid-column: span 1 !important; }
    .gh-hubspot-module .hsx-band-base > button { grid-column: 1 / -1 !important; }
    .gh-hubspot-module .hsx-cols-6 { grid-template-columns: repeat(2, 1fr) !important; }
    .gh-hubspot-module .hsx-h1 { font-size: 38px !important; }
    .gh-hubspot-module .hsx-h2 { font-size: 30px !important; }
    .gh-hubspot-module .hsx-band { padding: 56px 20px !important; }
  }