/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: HubL macros live in templates/partials/utils/macros.html (imported per template/module).
The old css/tools/_macros.css duplicate was removed in Phase 6 - it had no importers.
*/

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Tools — Design tokens
Custom-property layer (brand ramps, text/surface scales, borders, radius,
shadows, motion). Derived from theme fields via color-mix() so a Brand Kit
change re-derives the whole system. Must come before objects/elements/components
so every later layer can consume the tokens.
*/















body {

  /* ===== Brand token bases (canonical) ===== */
  --primary-base:     #FF2E93;
  --secondary-base:   #00C4C4;
  --tertiary-base:    #1C1226;
  --interactive-base: #120B1B;

  /* ===== Surfaces ===== */
  --surface-0:      #d1d5dc;
  --surface-1:      #F5F6F7;
  --surface-2:      #d1d5dc;
  --surface-dark:   #1C1226;
  --surface-dark-2: color-mix(in srgb, var(--surface-dark) 92%, var(--primary-base));

  /* Card/panel surface — the base a module's inner cards paint onto. Defaults to
     surface-0 so nothing changes until a per-module colour mode remaps it; the
     Light/Dark toggle (.cm-light / .cm-dark, css/components/_surfaces.css §5)
     flips it so cards read correctly on either base. */
  --surface-card:   var(--surface-0);

  /* ===== Brand ramps (tint into surface-0, shade toward black) ===== */
  --primary-4:      color-mix(in srgb, var(--primary-base) 4%,  var(--surface-0));
  --primary-10:     color-mix(in srgb, var(--primary-base) 10%, var(--surface-0));
  --primary-25:     color-mix(in srgb, var(--primary-base) 25%, var(--surface-0));
  --primary-deep:   color-mix(in srgb, var(--primary-base) 85%, black);

  --secondary-4:    color-mix(in srgb, var(--secondary-base) 4%,  var(--surface-0));
  --secondary-10:   color-mix(in srgb, var(--secondary-base) 10%, var(--surface-0));
  --secondary-25:   color-mix(in srgb, var(--secondary-base) 25%, var(--surface-0));
  --secondary-deep: color-mix(in srgb, var(--secondary-base) 85%, black);

  --tertiary-4:     color-mix(in srgb, var(--tertiary-base) 4%,  var(--surface-0));
  --tertiary-10:    color-mix(in srgb, var(--tertiary-base) 10%, var(--surface-0));
  --tertiary-25:    color-mix(in srgb, var(--tertiary-base) 25%, var(--surface-0));
  --tertiary-deep:  color-mix(in srgb, var(--tertiary-base) 85%, black);

  --interactive-4:    color-mix(in srgb, var(--interactive-base) 4%,  var(--surface-0));
  --interactive-10:   color-mix(in srgb, var(--interactive-base) 10%, var(--surface-0));
  --interactive-25:   color-mix(in srgb, var(--interactive-base) 25%, var(--surface-0));
  --interactive-deep: color-mix(in srgb, var(--interactive-base) 85%, black);

  /* ===== Text scale ===== */
  --text-1:         #1C1226;
  --text-2:         color-mix(in srgb, var(--text-1) 78%, var(--surface-0));
  --text-3:         color-mix(in srgb, var(--text-1) 55%, var(--surface-0));
  --text-on-dark-1: white;
  --text-on-dark-2: #d1d5dc;

  /* ===== Borders ===== */
  --border-subtle:  color-mix(in srgb, var(--surface-dark) 10%, transparent);
  --border-default: color-mix(in srgb, var(--surface-dark) 18%, transparent);

  /* ===== Radius ===== */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ===== Type families =====
     The two Brand Kit faces, published as custom properties so a plain CSS file
     can name one without hardcoding it. theme-overrides.css interpolates the
     same fields directly, which works there because it is HubL-rendered per
     heading rule; a component stylesheet needing "the UI face" or "the display
     face" for one variant has had no way to ask for it, and the only precedent
     in the tree is a literal font name in a child theme.
     PRIMARY is the UI/body face, SECONDARY the display face the headings take
     (see the button_font note in CLAUDE.md Phase 14 — a button label is UI text
     and takes primary, which is what made the distinction worth naming). */
  --font-primary:   Inter, sans-serif;
  --font-secondary: Gentium Book Basic, serif;

  /* ===== Spacing scale (Phase 14) =====
     Three steps, nothing between them. Page sections take --space-md on desktop
     and --space-sm on phones; --space-lg is for statement bands only.
     Consumed as a CLASS on the dnd_section (section--sm/md/lg/flush), never as a
     px string in a HubL padding= — a declared padding compiles to an !important
     rule with no media query, so it cannot step at a breakpoint. */
  --space-xs:   8px;
  --space-sm:  32px;
  --space-md:  64px;
  --space-lg: 128px;

  /* ===== Layout geometry =====
     THE centred container: 1240px box with the 30px gutter INSIDE it, so the
     measure is 1180px and the container is one self-contained thing that can sit
     inside a zero-padding full-bleed section. Declared here rather than in
     theme-overrides.css because a HubL set-variable does not cross file
     boundaries and every consumer (objects, components, child themes) needs it. */
  --container-max:    1240px;
  --container-gutter:   30px;
  --section-space: 64px;

  /* ===== Shadows — layered, soft, low-alpha ===== */
  --shadow-xs: 0 1px 1px rgba(15, 23, 42, .03), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .06);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .08);
  --shadow-lg: 0 4px 8px rgba(15, 23, 42, .05), 0 16px 40px rgba(15, 23, 42, .10), 0 24px 60px rgba(15, 23, 42, .08);

  /* Legacy shadow aliases — re-pointed onto the new scale (do not break consumers) */
  --light-shadow: var(--shadow-sm);
  --dark-shadow:  var(--shadow-md);

  /* ===== Motion ===== */
  --transition-fast: 150ms ease-out;
  --transition-base: 250ms ease-out;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/



/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
/* Containers, section rhythm and dnd columns (Phase 14)
   ==========================================================================
   Everything about page geometry lives here. theme-overrides.css used to carry
   a second, competing copy of it; that block is gone.

   Three platform facts shape this file, all verified on a live render:

   1. A dnd_section padding= declaration compiles to a single-class !important
      rule on the section itself, with NO media query. So a HubL padding is one
      value at every viewport, and it can never step 64 -> 32 on a phone.
   2. max_width compiles onto .row-fluid, also !important. HubSpot never emits
      padding on .row-fluid — that element is free for us.
   3. An absolutely-positioned child's inset:0 resolves against its containing
      block's PADDING box. .bg-preset-N::before and the surface-- pseudo layers
      both use inset:0, so any padding on the section clips the background art
      inward by exactly that much.

   Together those force one architecture: every section declares 0px padding in
   HubL, and the rhythm plus the container ride .row-fluid in CSS. That is what
   makes a full-bleed background the default rather than a special case.
   ========================================================================== */

/* THE centred container.
   --------------------------------------------------------------------------
   Applied only where HubSpot itself centres the row. It stamps a
   `-max-width-section-centering` class on a section whose full_width is FALSE,
   and omits that class entirely when full_width is TRUE (verified on a live
   render). Keying off it means the theme stops boxing the row at exactly the
   moment HubSpot stops centring it — so **full_width=true is the only switch a
   section needs for a full-bleed background.** No companion class, no pairing
   rule to remember.

   The 30px gutter is INSIDE the 1240px box, so the measure is 1180px.
   box-sizing: border-box is already global (generic/_reset.css).

   The gutter is scoped to .body-container. The header and footer are global
   partials that DECLARE their own 30px lateral padding on the section, which
   compiles to !important — so adding the row gutter there too would give them
   60px. They take the max-width and the centring, not the gutter. */
.content-wrapper,
.body-container .dnd-section[class*='max-width-section-centering'] > .row-fluid {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.header-area .dnd-section > .row-fluid,
.footer-area .dnd-section > .row-fluid {
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Page rhythm — medium on desktop, small on phones (the theme scale).
   Deliberately NOT tied to full_width: a full-bleed band still wants vertical
   rhythm. A band whose own module carries the padding takes section--flush.
   Scoped to .body-container so the header and footer dnd areas, which carry
   their own geometry, are never caught by it. 
.body-container .dnd-section > .row-fluid {
  padding-block: var(--section-space);
}

@media (max-width: 767px) {
  .body-container .dnd-section > .row-fluid {
    padding-block: min(var(--section-space), var(--space-sm));
  }
}*/

/* Rhythm modifiers. A section partial adds one through its dnd_section class=
   attribute (attributes evaluate; dnd_module scalar params do not), typically
   by interpolating a context value with an "md" fallback. section--md is a
   deliberate no-op that documents intent. 
.body-container .section--sm > .row-fluid {
  padding-block: var(--space-sm);
}

.body-container .section--lg > .row-fluid {
  padding-block: var(--space-lg);
}

.body-container .section--flush > .row-fluid {
  padding-block: 0;
}

@media (max-width: 767px) {
  .body-container .section--lg > .row-fluid {
    padding-block: var(--space-md);
  }
}*/

/* Rule 1 — a dnd column is always zero. HubSpot's compiled padding:0 !important
   already wins on every declared column; this covers a column authored in the
   portal and states the decision somewhere a reader will find it.

   Corollary worth knowing before you try to undo it: once a column declares 0px,
   NO class-based rule can put padding back without !important. Column insets
   belong on the column's > .dnd-row child, which HubSpot leaves unstyled. */
.dnd-section .dnd-column {
  padding: 0;
}

@media (max-width: 767px) {
  .dnd-section .row-fluid > * + * {
    margin-top: var(--space-sm);
  }
}

/* Sticky-header offset for in-page anchors. --header-height is published by
   header-logo.module when its height toggle is on, and resolves to 0 otherwise. */
[id]:target {
  scroll-margin-top: calc(var(--header-height, 0px) + var(--space-sm));
}

/* Elements
Base HMTL elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

/* Fonts */
/*
  The legacy display @font-face family that used to live here was removed during
  the geekify rebrand: its src files lived in a /fonts/ directory that does not
  ship with the theme, so the whole family was dead weight.

  Theme fonts now load via the theme's global font fields (fields.json ->
  global_fonts / typography), which use font_set "GOOGLE" with
  load_external_fonts enabled (Space Grotesk). No local @font-face is required.

  This file is still included by css/main.css; it is intentionally left
  as a comment-only placeholder so the include keeps resolving.
  (Do not write literal HubL tag delimiters in a CSS /* */ comment — HubL does
  not honour CSS comments, so it would try to execute them and break the build.)
*/
body {
  line-height: 1.4;
  overflow-wrap: break-word;
}

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

/* Paragraphs */

p {
  font-size: 1rem;
  margin: 0 0 1.4rem;
}

/* Anchors */

a,
a:hover {
  cursor: pointer;
  text-decoration: none;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1.4rem;
}

/* Lists */

ul,
ol {
  margin: 0 0 20px;
  padding-left: 1rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0;
}

ul.no-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  border-left: 2px solid;
  margin: 0 0 1.4rem;
  padding-left: 0.7rem;
}

/* Horizontal rules */

hr {
  border: none;
  border-bottom: 1px solid #CCC;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}
@media screen and (max-width:767px) {
  .button {
    width: 100%;
    margin: 0;
    /* Phase 5: ~44px comfortable touch target on phones (Phase 3 floor was 24px). */
    min-height: 44px;
  }
  .button + .button {
    margin-top: 1rem;
    margin-left: 0 !important;
  }
}

@media screen and (min-width:768px) {
  .button + .button {
    margin-left: 1rem;
  }
}

.custom-button__inner {
  flex-wrap: wrap;
}

.button {
  text-align: center;
  white-space: nowrap;
  margin-top: 1rem;
}
/* Fields */

.hs-form-field {
  margin-bottom: 1.4rem;
}

/* Labels */

form label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.7rem;
  width: 100%;
}

form textarea {
  resize: vertical;
}

form fieldset {
  max-width: 100% !important;
}

/* Inputs - checkbox/radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

form .inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle;
}

form .hs-input {
  width: 100% !important;
}


form input {
  padding: 1rem !important;
}

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  margin-right: 0.35rem;
}

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #FFF;
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  /* A11y (WCAG 1.4.3): hover/focus background becomes brand teal (see
     theme-overrides.css); dark token keeps ~7:1 vs the prior white (~2.5:1). */
  color: var(--dark-color);
}

/* Inputs - file picker */

form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
}

form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 1rem !important;
}

/* Validation */

.hs-form-required {
  color: #EF6B51;
}

.hs-input.invalid.error {
  border-color: #EF6B51;
}

.hs-error-msg {
  color: #EF6B51;
  margin-top: 0.35rem;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

@media screen and (max-width: 767px) {
  form input[type=submit],
  form .hs-button {
    width: 100%;
  }
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


  /* Search button input field and suggestions */
  .body-container-wrapper .hs-search-field__button {
    padding: 15px;
  }

  .body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
    margin-left: 6px;
    margin-bottom: 0;
  }

  .body-container-wrapper .hs-search-field__button svg {
    height: 15px;
    fill: #fff;
  }

  .body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
    padding: 10px;
  }

  .body-container-wrapper .hs-search-field__suggestions li a {
    color: #494A52;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    transition: background-color 0.3s;
  }

/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

/* Phase 5: on small screens let a wide table scroll horizontally inside its own
   box instead of forcing the whole page to overflow. (Replaces the unused
   stacktable vendor library, now removed.) */
@media (max-width: 767px) {
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/

/* Header DND sections */





html:not(.hs-inline-edit) [data-global-resource-path*='header'] {
  position: sticky;
  top: 0;
  z-index: 9;
}

html:not(.hs-inline-edit):not(.lity-active) [data-global-resource-path*='header'] {
  position: sticky;
  top: 0;
  z-index: 99999;
}

/* Opt out of a header that overlaps the first band.
   --------------------------------------------------------------------------
   header-logo publishes --header-height when its height toggle is on. Nothing
   in the theme pulls content under the header any more (Phase 14 removed the
   negative margin that did), so this resolves to 0 and is inert today.

   It stays because the pattern is a real one: if a future build reinstates an
   under-header hero bleed, the band that must NOT be underlapped — an
   announcement strip, a breadcrumb rail — adds this class and reclaims the
   height, rather than raising its own z-index and painting over the nav. */
.dnd-section--clears-header {
  margin-top: var(--header-height, 0px);
}

.header .row-fluid {
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* Phase 14 — the header was making every page scroll horizontally on a phone.
   --------------------------------------------------------------------------
   The rule above forces nowrap, and objects/_layout.css gives every .spanN
   width:100% below 768px so ordinary rows can stack. Together those put the
   header's N columns side by side at 100% each, so the document became N times
   the viewport width and the whole site overflowed at 390px — headings, body
   copy and buttons all clipped.

   Found by the Phase 14 pixel pass; both contributing rules predate it. The fix
   is scoped to the header, because nowrap is only correct here: let its columns
   size to their content, and stop the CTA taking the full-width mobile button
   treatment inside a row that cannot wrap. */
@media (max-width: 767px) {
  .header .row-fluid > [class*="span"] {
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
  }

  .header .button {
    width: auto;
  }
}

.header .row-fluid > * + * {
  margin-top: 0 !important;
}

/* Navigation skipper */

/* Screen-reader-only by default: removed from the visual layout (not just moved
   off-screen) so it never renders on first install, while staying in the DOM
   and focus order for keyboard/AT users. */
.header__skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Reveal only on keyboard focus (WCAG 2.4.1 / 2.4.11): render above the header
   with a solid, high-contrast background so it is legible and not obscured. */
.header__skip:focus,
.header__skip:focus-visible,
.header__skip:active {
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: var(--dark-color);
  color: var(--light-color);
  padding: 0.75rem 1rem;
}

/* Logo */

/* The header uses the default @hubspot/logo module (renders as
   .hs_cos_wrapper_type_logo), which pulls the brand logo at its native
   dimensions — often far too large for a header. Cap the height so any logo
   renders sensibly on first install; the global rule in _default-modules.css
   already caps width and preserves aspect ratio. */
.header .hs_cos_wrapper_type_logo img {
  max-height: 48px;
  width: auto !important;
}

@media (max-width: 767px) {
  .header .hs_cos_wrapper_type_logo img {
    max-height: 40px;
  }
}

.header__logo {
  align-items: center;
  display: flex;
  height: auto;
  margin-right: auto;
  max-width: 200px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .header__logo {
    margin: 0 auto;
    width: 100%;
  }
}

.header__logo img {
  max-width: 100%;
}

.header__logo .logo-company-name {
  font-size: 1.167rem;
  margin-top: 0.7rem;
}

.header__logo--main {
  padding-top: 1rem;
}

/* Search bar */

.header__search {
  padding: 0 1rem;
  width: auto;
}



  .hs-search-field__form {
    position: relative;
  }

  .header__search .hs-search-field__label {
    flex-basis: auto;
  }



.header__search .hs-search-field__input {
  
  height: 45px;
  padding: 0 0.7rem;
}



  .header__search .hs-search-field__button {
    padding: 0;
    fill: var(--text-1);
    background-color: transparent;
    border: none;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
  }

  .header__search .hs-search-field__button svg {
    height: 25px;
  }


.header__search .hs-search-field--open .hs-search-field__input {
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  max-width: 100%;
}

.header__search .hs-search-field--open .hs-search-field__suggestions {
  background-color: var(--surface-0);
  border: 2px solid var(--border-default);
  border-radius: 0 0 6px 6px;
  border-top-width: 1px;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.header__search .hs-search-field__suggestions li {
  border-top: 1px solid var(--border-default);
  font-size: 0.875rem;
}

.header__search .hs-search-field__suggestions li a {
  color: var(--text-1);
  padding: 0.35rem 0.7rem;
  text-decoration: none;
  transition: background-color 0.3s;
}

.header__search .hs-search-field__suggestions #results-for {
  display: none;
}

.header .button {
  display: block;
}

@media (min-width: 768px) {
  .header__search form {
    align-items: center;
    display: flex;
    flex-direction: row;
  }

  .header__search label {
    margin: 0 1rem 0 0;
  }

  .header__search .hs-search-field__input {
    width: auto;
  }
  .menu--desktop .menu__wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .menu--desktop .menu__wrapper li * {
    font-size: 1.125rem;
    line-height: 150%;
    text-transform: none;
  }
  .header .dnd-column {
    width: max-content !important; 
  }
  .header .dnd-column[class*='cell_16950585654963'] {
    width: 100% !important; 
  }
  .header .button {
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .header__search {
    border-top: 2px solid var(--border-subtle);
    order: 1;
    padding: 1.05rem;
  }
}

/* Language switcher */

.header__language-switcher {
  cursor: pointer;
  padding-right: 1.4rem;
}

.header__language-switcher .lang_switcher_class {
  position: static;
}

.header__language-switcher .lang_list_class {
  border: 1px solid var(--border-default);
  border-radius: 3px;
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
  display: block;
  left: calc(100% - 24px);
  opacity: 0;
  min-width: 100px;
  padding-top: 0;
  text-align: left;
  top: 100%;
  transition: opacity 0.3s;
  visibility: hidden;
}

.header__language-switcher:hover .lang_list_class,
.header__language-switcher:focus .lang_list_class {
  opacity: 1;
  transition: opacity 0.3s;
  visibility: visible;
}

.header__language-switcher .lang_list_class:before {
  left: 70%;
  top: -25px;
}

.header__language-switcher .lang_list_class:after {
  left: 70%;
  top: -22px;
}

.header__language-switcher .lang_list_class.first-active::after {
  top: -22px;
  transition: 0.3s;
}

.header__language-switcher .lang_list_class li {
  border: none;
  font-size: 18px;
  padding: 0.35rem 0.7rem;
}

.header__language-switcher .lang_list_class li:first-child {
  border-radius: 6px 6px 0 0;
  border-top: none;
}

.header__language-switcher .lang_list_class li:last-child {
  border-bottom: none;
  border-radius: 0 0 6px 6px;
}

.header__language-switcher .lang_list_class li:hover {
  transition: background-color 0.3s;
}

.header__language-switcher--label {
  display: flex;
  position: relative;
}

.header__language-switcher--label-current {
  align-items: center;
  display: flex;
  font-size: 0.75rem;
  margin-bottom: 0.175rem;
  margin-left: 0.7rem;
}

.header__language-switcher--label-current:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--text-1);
  content: "";
  display: block;
  height: 0px;
  margin-left: 0.7rem;
  margin-top: 0.175rem;
  width: 0px;
}

@media (max-width: 767px) {
  .header__language-switcher {
    border-top: 2px solid var(--border-subtle);
    padding-left: 1.05rem;
    padding-right: 0;
  }

  .header__language-switcher .lang_list_class {
    border: none;
    box-shadow: unset;
    display: block;
    left: 30px;
    opacity: 1;
    padding: 0 1.05rem;
    top: 0;
    visibility: visible;
  }

  .header__language-switcher .lang_list_class li {
    background-color: inherit;
    font-size: 0.917rem;
  }

  .header__language-switcher--label-current {
    display: none;
  }

  .header__language-switcher .globe_class {
    background-image: none;
  }

  .header__language-switcher .lang_list_class li:hover{
    background-color: inherit;
  }

  .header__language-switcher .lang_list_class:before,
  .header__language-switcher .lang_list_class:after {
    content: none;
  }}

/* Navigation */

#nav-toggle {
  display: none;
}

/* Mobile toggles */

@media (max-width: 767px) {
  .header__navigation,
  .header__search,
  .header__language-switcher {
    display: none;
    width: 100%;
  }

  .header__navigation.open,
  .header__search.open,
  .header__language-switcher.open {
    background-color: var(--surface-1);
    display: block;
    left: 0;
    min-height: calc(100vh - 115px);
    position: absolute;
    right: 0;
    top: 75px;
    z-index: 2;
  }

  .header__navigation--toggle,
  .header__search--toggle,
  .header__language-switcher--toggle,
  .header__close--toggle {
    cursor: pointer;
    margin: 0 5vw;
    position: relative;
  }

  .header__navigation--toggle.hide,
  .header__search--toggle.hide,
  .header__language-switcher--toggle.hide {
    display: none;
  }

  .header__navigation--toggle.open,
  .header__search--toggle.open,
  .header__language-switcher--toggle.open {
    display: block;
    margin-left: 0;
    margin-right: auto;
  }

  .header__navigation--toggle:after,
  .header__search--toggle:after,
  .header__language-switcher--toggle:after {
    display: none;
    font-size: 1.083rem;
    font-weight: 600;
    position: absolute;
    left: 40px;
    text-transform: uppercase;
    top: -10px;
  }

  .header__navigation--toggle.open:after,
  .header__search--toggle.open:after,
  .header__language-switcher--toggle.open:after {
    display: block;
    word-break: normal;
  }

  .header__navigation--toggle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='19' viewBox='0 0 24 19'%3E%3Cg stroke='%231C1226' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='2' y1='2' x2='22' y2='2'/%3E%3Cline x1='2' y1='9.5' x2='22' y2='9.5'/%3E%3Cline x1='2' y1='17' x2='22' y2='17'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__navigation--toggle:after {
    content: "Menu";
  }

  .header__language-switcher--toggle {
    background-image: url(//static.hsappstatic.net/cos-LanguageSwitcher/static-1.1/img/globe.png);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__language-switcher--toggle:after {
    content: "Language";
  }

  .header__search--toggle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231C1226' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7.5'/%3E%3Cline x1='16.5' y1='16.5' x2='22' y2='22'/%3E%3C/svg%3E");
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__search--toggle:after {
    content: "Search";
  }

  .header__close--toggle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='19' viewBox='0 0 24 19'%3E%3Cg stroke='%231C1226' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='3' y1='2' x2='21' y2='17'/%3E%3Cline x1='21' y1='2' x2='3' y2='17'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 110%;
    display: none;
    height: 25px;
    margin-right: 0;
    width: 25px;
  }

  .header__close--toggle.show {
    display: block;
  }
}

/* ==========================================================================
   Scrolled state (Phase D) — dark glass once the page scrolls past a small
   threshold. The `.header--scrolled` class is toggled by a passive scroll
   listener in js/main.js (no library). Main-nav links flip to on-dark ink so
   they stay legible on the glass (Phase 3 contrast preserved). Tokens only.
   ========================================================================== */

.header--scrolled {
  background-color: color-mix(in srgb, var(--surface-dark) 85%, transparent);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  transition: background-color var(--transition-base);
}

.header--scrolled .hs-menu-wrapper a,
.header--scrolled .menu__wrapper a,
.header--scrolled .header__navigation a:not(.button):not(.hs-button):not(.cta_button) {
  color: var(--text-on-dark-1);
}
/* Site footer — Phase D (design plan §5 Phase D "Header/footer").

   Dark footer preset: styled menu columns (kills the raw nested-bullets tree),
   social row, and a copyright rule. Tokens only, so a Brand Kit change
   re-derives it (the rebrand drill). This is the authoritative footer styling —
   the former stub in theme-overrides.css §8 (which, loading after main.css,
   would otherwise win) was reduced to a pointer so this component owns it. */

.footer {
  background-color: var(--surface-dark);
  color: var(--text-on-dark-2);
}

/* Headings brighten to full white; body / legal copy stays at 75% white. */
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
  color: var(--text-on-dark-1);
}

.footer p,
.footer li,
.footer label,
.footer span {
  color: var(--text-on-dark-2);
}

/* Running-content links (e.g. privacy / terms in the copyright line). */
.footer p a {
  color: var(--tertiary-color);
}
.footer p a:hover,
.footer p a:focus {
  color: color-mix(in srgb, var(--tertiary-color) 78%, white);
}

/* ==========================================================================
   Menu columns — vertical lists, no bullets, flattened sub-menus.
   ========================================================================== */

.footer .hs-menu-wrapper > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer .hs-menu-wrapper ul li {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}

.footer .hs-menu-wrapper a {
  display: inline-block;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-on-dark-2);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer .hs-menu-wrapper a:hover,
.footer .hs-menu-wrapper a:focus {
  color: var(--tertiary-color);
}

/* Flatten the nested tree: sub-menus render as a plain indented list inline in
   the column (not an absolutely-positioned flyout with markers). */
.footer .hs-menu-wrapper .hs-menu-children-wrapper {
  list-style: none;
  position: static;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.35rem 0 0;
  padding: 0 0 0 0.85rem;
  min-width: 0;
  opacity: 1;
  visibility: visible;
  background: transparent;
  border: none;
  box-shadow: none;
}

.footer .hs-menu-wrapper .hs-menu-children-wrapper a {
  font-size: 0.875rem;
}

/* ==========================================================================
   Social icons row.
   ========================================================================== */

.footer .social-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.footer .social-link-wrapper svg {
  fill: var(--text-on-dark-2);
  transition: fill var(--transition-fast);
}
.footer .social-link-wrapper:hover svg,
.footer .social-link-wrapper:focus svg {
  fill: var(--tertiary-color);
}

/* ==========================================================================
   Copyright / legal row — white/50 text over a white/10 top rule.
   (footer.html renders the legal content as the second dnd_section.)
   ========================================================================== */

.footer .dnd-section + .dnd-section {
  border-top: 1px solid color-mix(in srgb, var(--text-on-dark-1) 10%, transparent);
}

.footer .dnd-section + .dnd-section p,
.footer .footer__microcopy {
  color: color-mix(in srgb, var(--text-on-dark-1) 50%, transparent);
  font-size: 0.8125rem;
}

/* ==========================================================================
   Newsletter form — input + submit compose on one row on desktop, stacked
   below 768px (input flex-1, pill button).
   ========================================================================== */

/* Phase G: HubSpot injects `.hs-form-field > label` (slate #33475b) which
   out-specifies `.footer label` (0,2,1 vs 0,1,1) → invisible labels on the dark
   footer. Scope higher (0,3,2) so newsletter labels + help text stay legible.
   Tokens only — rebrand-safe, no !important. */
.footer form.hs-form .hs-form-field > label,
.footer form.hs-form .hs-form-field label {
  color: var(--text-on-dark-2);
}
.footer form.hs-form .hs-field-desc,
.footer form.hs-form .hs-form__field-desc {
  color: color-mix(in srgb, var(--text-on-dark-1) 60%, transparent);
}

@media (min-width: 768px) {
  .footer form.hs-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }
  .footer form.hs-form .hs-form-field {
    flex: 1 1 200px;
    min-width: 0;
    margin-bottom: 0;
  }
  .footer form.hs-form .hs_submit,
  .footer form.hs-form .hs-submit {
    flex: 0 0 auto;
  }
  .footer form.hs-form .hs-button,
  .footer form.hs-form input[type="submit"] {
    width: auto;
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }
}
[class*='__content-link'] {
  margin-top: 30px;
}

.view-all {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.view-all span svg {
  height: .5rem;
  width: auto;
  margin-left: 1rem;
}

/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}


/* Horizontal menu */
/*
.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 1100px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

footer .hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */
/*
.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 1100px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.widget-type-menu > div:not(.mega-menu) .hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}


.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (max-width: 1100px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}*/

.freeze-scroll {
  overflow: hidden; 
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}
.isotope-pager {
  padding: 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.isotope-pager > * + * {
  margin-left: 1rem;
}

.isotope-pager a {
  padding: .25rem .5rem;
  border-radius: 8px;
}

.isotope-pager a.active {
  background-color: var(--primary-color);
  color: white;
}

.listing-search {
  position: relative;
}

.listing-search input {
  padding: 1rem;
  appearance: none;
  width: 100%;
}

.search-submit {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  /* Reset the global button chrome (border/padding) applied to <button>. */
  background: transparent;
  border: none;
  /* A11y (WCAG 2.5.8): keep at least a 24x24 hit area. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  cursor: pointer;
}

.listing__filters {
  margin-bottom: 60px;
  display: flex;
  width: 100%;
}

.listing__filter-groups {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.listing__filter-groups > *,
.listing__filters > * {
  width: 100%;
}

.listing__filter-groups > * + *,
.listing__filters > * + * {
  margin-left: 20px;
}

.listing__filters-wrap {
  max-height: 0;
  height: auto;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
}

.listing__filters-wrap.active {
  max-height: 2000px;
  visibility: visible;
  opacity: 1;
}

.listing__filters fieldset {
  border: none;
  appearance: none;
  margin: 0 auto;
  padding: 0;
}

.listing__filters fieldset > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  overflow: hidden;
}

.listing__filters fieldset > ul li {
  display: block;
  padding: 1rem 2rem;
}

.listing__filters label {
  cursor: pointer;
}

.listing__filters fieldset > ul li input {
  display: none;
}

.listing__filters fieldset > label h4 {
  margin: 0;
  text-align: left;
  text-transform: uppercase;
}

.listing__filters fieldset > label {
  transition: all .5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
}

.blog .listing__filters label span,
.blog .listing__filters label {
  display: block;
}

.blog .listing-filters__group {
  position: relative;
}

.blog .listing__filter-groups > * + * {
  margin-left: 20px;
}

.blog .listing__filters label h4 {
  display: block;
  padding: 1rem 2rem;
  font-size: 1rem;
}

.blog .listing__filters label + ul {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  display: none;
  z-index: 99;
  border-left: 2px solid;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.blog .listing__filters fieldset.active h4 {
  border-bottom: none;
}

.blog .listing__filters fieldset > ul li {
  border: none;
  padding: 5px 2rem;
  display: block;
  width: 100%;
}

.listing__search button {
  padding: 19px 44px;
}

.body-container--podcasts-post #hs_cos_wrapper_post_dnd_area-dnd_partial-2-module-2_ {
  text-align: center;
}

@media (max-width: 767px) {
  .listing__filters {
    flex-direction: column;
  }

  .listing-filters__group {
    margin-bottom: 20px !important;
  }

  .listing__search {
    margin-left: 0;
  }
}

@media (max-width: 500px) {
  .listing__filter-groups {
    flex-direction: column;
  }

  .listing-filters__group {
    margin-left: 0 !important;
  }
}

/* Neutral empty-state for data-driven listing modules (blogs, team, hubdb, map)
   shown when no blog/HubDB/locations data is connected yet. */
.listing-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--dark-color);
  opacity: 0.6;
  border: 1px dashed rgba(15, 23, 42, 0.2);
  border-radius: 12px;
}
/* Content-block variants: numbered steps
   --------------------------------------------------------------------------
   Two opt-in variants applied through the module's custom_class field, used by
   sections/numbered-steps.html. They exist because a numbered sequence is one
   of the most common marketing patterns and content-block already carries
   everything it needs — an eyebrow slot that takes free text (so "01" renders
   literally), a title, a body and a column count. What it lacked was the
   typographic treatment that turns that eyebrow into a step number.

   .content-block--numbered       makes the eyebrow a large brand numeral
   .content-block--numbered-list  stacks the steps with hairline separators
*/

.content-block--numbered .content-block__title--small p {
  /* Display face and weight follow the theme's heading font, so the numerals
     match the headlines they sit under rather than the body copy. */
  font-family: inherit;
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--primary-base);
  margin-bottom: 0;
}

.cm-dark .content-block--numbered .content-block__title--small p,
.surface--dark .content-block--numbered .content-block__title--small p,
.surface--dark-mesh .content-block--numbered .content-block__title--small p {
  color: var(--primary-base);
}

/* The list variant runs the number beside the copy rather than above it, which
   is what makes a vertical sequence scannable. */
@media (min-width: 768px) {
  .content-block--numbered-list .content-block__card .content-block__text-container,
.numbered-steps--list .content-block__card {
    display: grid;
    grid-template-columns: 5rem 1fr;
    column-gap: 2rem;
    align-items: start;
  }

  .content-block--numbered-list .content-block__title--small,
  .numbered-steps--list .content-block__title--small {
    grid-row: 1 / span 3;
  }
}

.content-block--numbered-list .content-block__card,
.numbered-steps--list .content-block__card {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 1.75rem;
}

.surface--dark .content-block--numbered-list .content-block__card,
.surface--dark-mesh .content-block--numbered-list .content-block__card,
.cm-dark .content-block--numbered-list .content-block__card,
[class*="bg-preset-"] .content-block--numbered-list .content-block__card {
  border-bottom-color: color-mix(in srgb, var(--text-on-dark-1) 14%, transparent);
}

.surface--dark .numbered-steps--list .content-block__card,
.surface--dark-mesh .numbered-steps--list .content-block__card,
.cm-dark .numbered-steps--list .content-block__card,
[class*="bg-preset-"] .numbered-steps--list .content-block__card {
  border-bottom-color: color-mix(in srgb, var(--text-on-dark-1) 14%, transparent);
}

.content-block--numbered-list .content-block__card:last-child,
.numbered-steps--list .content-block__card:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* The list variant sheds the card treatment. card_surface reaches the module as
   a LITERAL — a dnd_module's scalar parameters are never evaluated — so both
   layouts are handed glass-dark and the list has to undo it here rather than by
   asking for a different value. */
.numbered-steps--list .content-block__card.glass-dark {
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

/* Card tag chip
   --------------------------------------------------------------------------
   The per-card `tag` sections/feature-cards.html passes through — the small
   category chip a platform or portfolio grid sets opposite the card title
   ("Anchor platform", "Performance engine").

   The row wrapper is inert until a tag exists, so a card without one keeps the
   block layout it has always had. The chip is a sibling of .content-block__title
   rather than a child, because the module's id-scoped `.content-block__title *`
   rule would otherwise paint it in the title font. */

.content-block__title-row--tagged {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.content-block__tag {
  flex: 0 0 auto;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  color: var(--text-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.cm-dark .content-block__tag,
.surface--dark .content-block__tag,
.surface--dark-mesh .content-block__tag,
[class*="bg-preset-"] .content-block__tag {
  color: var(--text-on-dark-2);
}

/* Checked point list
   --------------------------------------------------------------------------
   The content-block--checks variant sections/meeting-split.html uses for "what
   this call covers". The tick is a masked pseudo-element rather than an icon
   file: content-block renders icons through an img tag, and an SVG loaded that
   way cannot inherit currentColor — a file would bake in a colour and survive a
   rebrand unchanged. Masking paints it from --tertiary-base instead, so it
   re-derives with the palette. A child theme retints by overriding
   background-color on this one rule. */

.content-block--checks {
  --check-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.4l4.2 4.1L16 5.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.content-block--checks .content-block__card {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  column-gap: 0.875rem;
  align-items: start;
}

.content-block--checks .content-block__card::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  background-color: var(--tertiary-base);
  -webkit-mask: var(--check-glyph) center / contain no-repeat;
          mask: var(--check-glyph) center / contain no-repeat;
}

.content-block--checks .content-block__inner {
  grid-column: 2;
}

.content-block--checks .content-block__content-wrap {
  margin-top: 0.25rem;
}

/* The label is an <h3> in the markup and must stay one — a checked point sits
   under the band's <h2> and that is the correct outline. What it must NOT do is
   inherit the display-heading ladder: a checklist label is UI text, so it takes
   the primary (body) face at a UI size, not the secondary face at h3.
   Reachable at (0,2,1) only because the module's `line-height: 1` moved out of
   its ID-scoped block and into module.css — see the note there. */
.content-block--checks .content-block__title h3,
.content-block--checks .content-block__title > * {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: normal;
}

.content-block--checks .content-block__content-wrap {
  font-size: 0.875rem;
}

/* Quote card
   --------------------------------------------------------------------------
   A single attributed pull quote sitting inside a wider band. The attribution
   travels in the same richtext as the words, so the styling hangs off the last
   paragraph rather than a separate field. */


/* The words themselves take the display face. The italic arrives as a literal
   <em> in the richtext, which inherits the body family — so a pull quote has
   been rendering as italic UI text rather than as a quotation. Setting the
   family here rather than on the <em> keeps it working whether or not the
   author reaches for emphasis.
   NOTE the weight: a display face routinely ships 400 and 700 only, and 700 is
   what the design asks for — never set 500 or 600 on one or the browser
   synthesises a fake bold. The attribution rule below deliberately follows and
   puts the last paragraph back on the UI face. */
.content-block--quote-card .content-block__content-wrap p {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.45;
}

.content-block--quote-card .content-block__content-wrap > p:last-child {
  margin-bottom: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-3);
}

.cm-dark .content-block--quote-card .content-block__content-wrap > p:last-child,
.surface--dark .content-block--quote-card .content-block__content-wrap > p:last-child,
.surface--dark-mesh .content-block--quote-card .content-block__content-wrap > p:last-child,
[class*="bg-preset-"] .content-block--quote-card .content-block__content-wrap > p:last-child {
  color: var(--text-on-dark-2);
}

/* Meeting split
   --------------------------------------------------------------------------
   sections/meeting-split.html. The scheduler column gets its frame here rather
   than in the section, because a dnd tree holds only dnd tags — a section
   cannot wrap a module in markup of its own, so the column is the only hook.
   Below the breakpoint the columns stack and both the gutter and the frame come
   off, since a full-bleed scheduler on a phone reads better than a boxed one.

   Phase 14: the two padding declarations moved from the column to the column's
   > .dnd-row child. Every dnd_column now declares padding 0px, which compiles to
   an !important rule that outranked them — so the frame has been rendering with
   a border and zero inset since the columns were first zeroed. The row is the
   nearest descendant HubSpot leaves unstyled. Border, radius and background stay
   on the column; they were never affected. */

@media (min-width: 768px) {
  .meeting-split .dnd-column:last-child {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    background-color: var(--surface-card);
  }

  .meeting-split .dnd-column:last-child > .dnd-row {
    padding: 2rem;
  }

  .meeting-split .dnd-column:first-child > .dnd-row {
    padding-right: 40px;
  }
}

@media (min-width: 768px) {
  .cm-dark .meeting-split .dnd-column:last-child,
  .surface--dark .meeting-split .dnd-column:last-child,
  .surface--dark-mesh .meeting-split .dnd-column:last-child,
  [class*="bg-preset-"] .meeting-split .dnd-column:last-child {
    border-color: color-mix(in srgb, var(--text-on-dark-1) 10%, transparent);
    background-color: color-mix(in srgb, var(--text-on-dark-1) 6%, transparent);
  }
}

/* Centered banner — full-bleed variant: REMOVED in Phase 14.
   --------------------------------------------------------------------------
   .centered-banner--bleed set width:100vw and margin-left:calc(50% - 50vw) on
   the section. It never did what it claimed and it carried a latent bug:

   - nothing in the theme constrains .body-container, so the section was already
     viewport-wide and the breakout was a no-op;
   - 100vw includes the scrollbar and there is no overflow-x guard on html/body,
     so on any platform with a classic scrollbar it opened ~16px of horizontal
     overflow;
   - centered-banner.html is full_width=false, so HubSpot pinned its .row-fluid
     at max-width:1240px !important. Widening the section could never bleed the
     banner MODULE, which is what carries the photograph.

   The working form is sections/centered-banner-full.html: a separate file with a
   real full_width=true — which is the whole switch, since the theme's container
   rule keys off the -max-width-section-centering class HubSpot omits when it is
   set. A second file rather than a flag, because full_width takes a real boolean
   and interpolating a context value yields the truthy string "false". */

/* Video and quote split
   --------------------------------------------------------------------------
   The hairline between the two halves of sections/video-quote-split.html. A
   border rather than a gap, so the pair reads as one exhibit; dropped below the
   breakpoint where the columns stack, because a rule under a video reads as an
   underline rather than a divider.

   Phase 14: the panel insets moved off the dnd_column (which now declares 0px,
   compiled !important) onto its > .dnd-row child. The 80px vertical became 64px
   to land on the scale; 40/56 are genuine design insets and are unchanged. */

.video-quote-split .dnd-column > .dnd-row {
  padding: var(--space-md) 40px;
}

@media (min-width: 768px) {
  .video-quote-split .dnd-column:first-child {
    border-right: 1px solid color-mix(in srgb, var(--text-on-dark-1) 12%, transparent);
  }

  .video-quote-split .dnd-column:last-child > .dnd-row {
    padding-inline: 56px;
  }
}

@media (max-width: 767px) {
  .video-quote-split .dnd-column > .dnd-row {
    padding: var(--space-sm) 0;
  }
}

/* Blog featured — the trough between the cover and the copy. Was 24px of column
   padding on each side of the split; same reason as above, now on the row. */

@media (min-width: 768px) {
  .blog-featured .dnd-column:first-child > .dnd-row {
    padding-right: 24px;
  }

  .blog-featured .dnd-column:last-child > .dnd-row {
    padding-left: 24px;
  }
}

/* Logo bar — stacked variant.
   sections/logo-bar.html keeps a fixed 4 + 8 dnd grid because the portal
   validator resolves dnd geometry without context and rejects conditional
   widths as overlapping columns. context.stacked therefore adds this class
   instead, and the label goes over the row rather than beside it. */
.logo-bar--stacked .dnd-column > .row-fluid-wrapper .span4,
.logo-bar--stacked .dnd-column > .row-fluid-wrapper .span8 {
  width: 100%;
  margin-left: 0;
}

.logo-bar--stacked .content-block__text-container {
  text-align: center;
}

.logo-bar--stacked .logo-section {
  margin-top: 1.5rem;
}

/* Card system (Phase D): shared .card primitive, .glass-light / .glass-dark
   panels, and the base box for concrete card modules. */

/* Card system — Phase D (design plan §1d/§1e, §4 "Cards", §5 Phase D)

   A shared card primitive + glass panels, plus the base box treatment for the
   concrete card modules that don't set their own ID-scoped background
   (blog / team / hubdb resource). Cards that DO paint their own background from
   an editor field (pricing, hubdb custom styles, content-block, flex-cards)
   pull the same border / radius / shadow tokens from their own module CSS so
   an editor colour still wins.

   Every value derives from the Phase A token layer (css/tools/_tokens.css),
   which is color-mix()'d from theme.global_colors.* — a Brand Kit change
   re-derives the whole set (the rebrand drill). The only literals are the
   blur radius and the white/transparent color-mix anchors the spec prescribes. */

/* ==========================================================================
   1. Reusable primitive
   ========================================================================== */

.card {
  background-color: var(--surface-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

/* Hover-elevate only when the whole card is itself a link wrapper (so a static
   card doesn't lift on stray hovers). Applies to the primitive, the concrete
   link-wrapped cards, and an explicit .card--link opt-in. */
a.card:hover,
.card--link:hover,
a.blog-card:hover,
a.team-card:hover,
a.resource-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* The global reduced-motion block (theme-overrides.css) zeroes transition
   DURATION only; kill the lift itself so hovers don't translate. */
@media (prefers-reduced-motion: reduce) {
  a.card:hover,
  .card--link:hover,
  a.blog-card:hover,
  a.team-card:hover,
  a.resource-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   2. Glass panels — for cards sitting on mesh / dark surfaces.
   ========================================================================== */

/* Light glass: blurred white gradient + hairline + soft shadow (use on mesh /
   image surfaces). */
.glass-light {
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--surface-0) 85%, transparent),
    color-mix(in srgb, var(--surface-0) 55%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--surface-0) 55%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
          backdrop-filter: blur(12px) saturate(1.2);
}

/* Dark glass: translucent white fill + white/10 hairline (use on dark
   surfaces — replaces the Phase C inline glass on icon-blocks). */
.glass-dark {
  background-color: color-mix(in srgb, var(--surface-dark) 26%, transparent);
  /* --card-border is a seam, not a value: a card variant retints its outline by
     setting that one property instead of re-declaring the whole border and then
     losing a specificity race with a child theme's own .glass-dark rule. */
  border: 1px solid var(--card-border, color-mix(in srgb, var(--text-on-dark-1) 10%, transparent));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

/* ==========================================================================
   3. Base box for the concrete card modules that don't paint their own bg.
      (blog / team / hubdb resource — pricing & content-block handle their own
      in module CSS so their editor colour fields still win.)
   ========================================================================== */

.blog-card,
.team-card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 32px;
}

/* Compare-pair: the favoured card carries the brand outline, the neutral one keeps
   the default. Emitted as a class by sections/compare-pair.html, because the
   `border` FIELD cannot carry it — a structured field type computes its own .css
   and ignores a hand-supplied `css` key, which is why that section's border never
   reached the page. */
.compare-pair__card--accent {
  --card-border: var(--primary-base);
}

/* Section surface system (Phase C). Placed last in the components layer so its
   class-level ink flips win ties over module component CSS; module ID-scoped
   colors (intentional) still win, and tools/theme.css (utilities) still comes after.
*/



/* ==========================================================================
   1. Shared layering — every surface. Pattern/glow on ::before (behind content,
      non-interactive); grain on its own ::after; content stacks above both.
      isolation:isolate keeps the ::before z-index local so it never rises above
      a neighbouring section.
   ========================================================================== */

[class*="surface--"] {
  position: relative;
  isolation: isolate;
  background-color: var(--bg-base, transparent);
}

[class*="surface--"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Glow spots first, pattern lines under them. Both gradient families encode
     their own geometry (radial extent / repeating stops), so no background-size
     or -repeat coordination is needed — default (auto / repeat) fills the box. */
  background-image: var(--bg-glow, none), var(--bg-line, none);

  /* Fade-mask hook — OFF by default (mask:none = fully shown). Phase F sets
     --bg-mask to a fade gradient and, for dashed/dotted patterns, adds a second
     mask layer, then flips the composite to intersect / source-in to trim the
     pattern. Both prefixed and unprefixed properties are emitted per spec. */
  -webkit-mask-image: var(--bg-mask, none);
          mask-image: var(--bg-mask, none);
  -webkit-mask-composite: var(--bg-mask-composite-wk, source-over);
          mask-composite: var(--bg-mask-composite, add);
}

/* Content (the section's .row-fluid) rides above the decorative layers. */
[class*="surface--"] > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   2. Grain — composable, on its own ::after so a pattern's mask never punches
      holes in the noise. Achromatic (feColorMatrix saturate 0) so it adds no
      hue; intensity is a single opacity knob (Phase F "noise intensity").
   ========================================================================== */

.bg-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--bg-noise-opacity, 0.035);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='ns'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ns)'/%3E%3C/svg%3E");
}

/* Grain reads a touch stronger on dark (matches the ~3.5% light / ~5% dark spec). */
.surface--dark.bg-noise::after,
.surface--dark-mesh.bg-noise::after {
  opacity: var(--bg-noise-opacity, 0.05);
}

/* ==========================================================================
   3. Surface presets — each just sets layer variables.
   ========================================================================== */

/*  Plain — the base white surface.
    --------------------------------------------------------------------------
    A FLAT surface must switch the layer variables OFF, not merely decline to set
    them. `--bg-glow` and `--bg-line` are custom properties, so they INHERIT, and
    `var(--bg-glow, none)` falls back to none only when the property is set
    nowhere up the tree. Put a mesh class on a page wrapper — which is exactly
    what a dark-site child theme does to get the on-dark ink flip — and every
    flat band nested inside it inherits the wrapper's glow and paints it.

    That is not hypothetical: it is why clout's flat bands rendered a purple wash
    across their top edge where the comps are flat #1B1225. The band was doing
    what the cascade told it to.

    The compound `.surface--dark.surface--grid` and `.surface--dark-mesh` rules
    below re-set these at higher specificity, so switching them off here costs
    those nothing. */
.surface--plain {
  --bg-base: var(--surface-0);
  --bg-glow: none;
  --bg-line: none;
}

/* Tinted — subtle brand wash (4% primary into surface-0). */
.surface--tinted {
  --bg-base: var(--primary-4);
  --bg-glow: none;
  --bg-line: none;
}

/* Mesh — light base + 2–3 low-opacity brand glow spots, off-corner, static. */
.surface--mesh {
  --bg-base: var(--surface-0);
  --bg-glow:
    radial-gradient(60% 55% at 12% 18%, color-mix(in srgb, var(--primary-base) 8%, transparent), transparent 70%),
    radial-gradient(55% 50% at 88% 12%, color-mix(in srgb, var(--interactive-base) 7%, transparent), transparent 72%),
    radial-gradient(52% 52% at 78% 88%, color-mix(in srgb, var(--secondary-base) 6%, transparent), transparent 70%);
}

/* Dark — dark base; ink auto-flips below. */
.surface--dark {
  --bg-base: var(--surface-dark);
  --bg-glow: none;
  --bg-line: none;
}

/* Two darker steps below .surface--dark, for designs that stack several flat
   bands and need them to read as distinct planes rather than one field.
   --------------------------------------------------------------------------
   They are MODIFIERS, compounded with .surface--dark rather than standing
   alone, so every ink-flip, glow, grid and ghost-button rule below already
   matches them and no selector list has to grow. A section takes them as
   `surface: "surface--dark surface--deep"` — bg_preset_class returns any token
   it does not recognise unchanged, so a multi-class string passes straight
   through.

   Both derive from existing tokens, so a rebrand re-derives them: --deep is the
   dark surface pulled toward black, --ink adds a trace of the brand purple so
   the near-black keeps a hue rather than going flat grey. */
.surface--dark.surface--deep {
  --bg-base: color-mix(in srgb, var(--surface-dark) 62%, black);
}

.surface--dark.surface--ink {
  --bg-base: color-mix(in srgb, var(--interactive-base) 8%,
             color-mix(in srgb, var(--surface-dark) 24%, black));
}

/* Dark mesh — subtly primary-tinted dark base + slightly brighter glow spots. */
.surface--dark-mesh {
  --bg-base: var(--surface-dark-2);
  --bg-glow:
    radial-gradient(60% 55% at 15% 12%, color-mix(in srgb, var(--primary-base) 16%, transparent), transparent 70%),
    radial-gradient(55% 55% at 85% 16%, color-mix(in srgb, var(--interactive-base) 18%, transparent), transparent 72%),
    radial-gradient(55% 55% at 72% 92%, color-mix(in srgb, var(--secondary-base) 12%, transparent), transparent 70%);
}

/* Grid — additive 60px blueprint lines; composable with any surface. The 60px
   period lives in the repeating-gradient stops (not background-size), so no
   per-layer size coordination is needed. Phase F reuses --bg-line / --bg-line-size
   for its grid / dashed / dots / circuit / diagonal variants. */
.surface--grid {
  --bg-line-size: 60px;
  --bg-line-color: color-mix(in srgb, var(--surface-dark) 5%, transparent);
  --bg-line:
    repeating-linear-gradient(to right,  var(--bg-line-color) 0 1px, transparent 1px var(--bg-line-size)),
    repeating-linear-gradient(to bottom, var(--bg-line-color) 0 1px, transparent 1px var(--bg-line-size));
}

/* Blueprint lines lift to ~8% white when the grid sits on a dark surface. */
.surface--dark.surface--grid,
.surface--dark-mesh.surface--grid {
  --bg-line-color: color-mix(in srgb, var(--text-on-dark-1) 8%, transparent);
}

/* Glass panels for cards on mesh/dark surfaces are delivered in Phase D as
   .glass-light / .glass-dark. Until then, sections that need the look (e.g.
   icon-blocks) set the translucent bg + white/10 border + --radius-xl inline on
   the module. Reserved here so Phase D has a single home:
   .glass-light { } .glass-dark { }  (Phase D) */

/* ==========================================================================
   4. Ink auto-flip on dark surfaces (plan §1h, §4).
      Body ink is set on the CONTAINER so descendants inherit it — this keeps a
      <span> inside a coloured button on the button's colour (cascade), which a
      blanket `.surface--dark span {}` rule would wrongly clobber. Headings,
      eyebrow, links and outline buttons then override explicitly.
      The Phase 3 contrast-aware *filled* button logic (css/tools/theme.css) is
      intentionally left untouched.
   ========================================================================== */

.surface--dark,
.surface--dark-mesh {
  color: var(--text-on-dark-2);
}

/* Block text — asserted explicitly so a stray element colour can't leave it dark. */
.surface--dark :is(p, li, label, figcaption, blockquote, dt, dd, td, th),
.surface--dark-mesh :is(p, li, label, figcaption, blockquote, dt, dd, td, th) {
  color: var(--text-on-dark-2);
}

/* Headings brighten to full on-dark ink. */
.surface--dark :is(h1, h2, h3, h4, h5, h6),
.surface--dark-mesh :is(h1, h2, h3, h4, h5, h6) {
  color: var(--text-on-dark-1);
}

/* Eyebrow kicker → the Phase B on-dark treatment (secondary ≈ 9.5:1 on the dark base). */
.surface--dark .eyebrow,
.surface--dark-mesh .eyebrow {
  color: var(--secondary-color);
}

/* Running-content links → secondary; hover lifts toward white. Buttons excluded. */
.surface--dark a:not(.button):not(.hs-button):not(.cta_button),
.surface--dark-mesh a:not(.button):not(.hs-button):not(.cta_button) {
  color: var(--secondary-color);
}
.surface--dark a:not(.button):not(.hs-button):not(.cta_button):hover,
.surface--dark a:not(.button):not(.hs-button):not(.cta_button):focus,
.surface--dark-mesh a:not(.button):not(.hs-button):not(.cta_button):hover,
.surface--dark-mesh a:not(.button):not(.hs-button):not(.cta_button):focus {
  color: color-mix(in srgb, var(--secondary-color) 78%, white);
}

/* Outline / ghost buttons (plan §1h — fixes the invisible hero "Learn more").
   Compound with .dnd-section to clear the per-style ghost rules in
   css/tools/theme.css (0,3,0 → we need 0,4,0) without adding !important. Base bg
   stays transparent (theme sets that with its own !important — no conflict). The
   hover *fill* is left to the theme (its !important owns it); we only ensure the
   hover *text* stays white so it is legible on whatever brand fill lands. */
.dnd-section.surface--dark .button.button--ghost,
.dnd-section.surface--dark .hs-button.button--ghost,
.dnd-section.surface--dark .cta_button.button--ghost,
.dnd-section.surface--dark-mesh .button.button--ghost,
.dnd-section.surface--dark-mesh .hs-button.button--ghost,
.dnd-section.surface--dark-mesh .cta_button.button--ghost {
  color: var(--text-on-dark-1);
  border-color: color-mix(in srgb, var(--text-on-dark-1) 80%, transparent);
}
.dnd-section.surface--dark .button.button--ghost:hover,
.dnd-section.surface--dark .hs-button.button--ghost:hover,
.dnd-section.surface--dark .cta_button.button--ghost:hover,
.dnd-section.surface--dark-mesh .button.button--ghost:hover,
.dnd-section.surface--dark-mesh .hs-button.button--ghost:hover,
.dnd-section.surface--dark-mesh .cta_button.button--ghost:hover {
  color: var(--text-on-dark-1);
}

/* Phase G: ghost/outline buttons on LIGHT branded surfaces (tinted / mesh).
   Their brand-colour text+border — esp. primary teal (~2.3:1) and secondary mint —
   can drop below contrast on a light wash. Flip base text to dark ink + a subtle
   border so they stay legible; the theme still owns the hover fill (its !important).
   Mirrors the dark rule above; compound with .dnd-section (0,4,0) to clear
   theme.css's per-style ghost rules without adding !important. */
.dnd-section.surface--tinted .button.button--ghost,
.dnd-section.surface--tinted .hs-button.button--ghost,
.dnd-section.surface--tinted .cta_button.button--ghost,
.dnd-section.surface--mesh .button.button--ghost,
.dnd-section.surface--mesh .hs-button.button--ghost,
.dnd-section.surface--mesh .cta_button.button--ghost {
  color: var(--text-1);
  border-color: color-mix(in srgb, var(--text-1) 30%, transparent);
}

/* Focus ring on dark (plan Phase C exit-check 4). The Phase 3 ring is
   --secondary-color (deep teal after the Phase G retune), which only clears ~3:1
   on the dark base; swap to --secondary-color (~9.5:1) on dark for a comfortable
   margin. Keep the
   3px width + 2px offset. Compound with .dnd-section to beat `.button:focus-visible`
   (0,2,0). Colour only — the ring itself (Phase 3) is otherwise preserved. */
.dnd-section.surface--dark :focus-visible,
.dnd-section.surface--dark-mesh :focus-visible {
  outline-color: var(--secondary-color);
}

/* ==========================================================================
   5. Per-module colour modes — the Light / Dark toggle (plan: per-module
      color_mode). A module's `color_mode` field → the color_mode_class() macro
      → .cm-light / .cm-dark on the module's per-instance #id wrapper.

      Themes the module's TEXT and its inner card/panel surfaces only (ink colour
      + the --surface-card / --border-* tokens). It intentionally does NOT paint
      the module's outer background, so the section/page background — or the
      module's own background field — shows through and stays in control; a colour
      the client set on the module still wins (its #id rule beats these class
      rules). Pair the mode with a matching backdrop (dark mode over a dark
      section, light mode over a light one).

      Deliberately SEPARATE selectors from the §3–4 section surfaces so a module
      opts in without inheriting the section and existing section-dark placements
      are untouched (CLAUDE.md rule #6). Ink values mirror §4. Declared AFTER §4 so
      a module's own mode wins by source order. Every value is a token /
      color-mix() (rebrand-safe); no new !important.
   ========================================================================== */

/* --- Dark --------------------------------------------------------------- */
.cm-dark {
  --surface-card:   color-mix(in srgb, var(--text-on-dark-1) 6%, transparent);
  --border-subtle:  color-mix(in srgb, var(--text-on-dark-1) 10%, transparent);
  --border-default: color-mix(in srgb, var(--text-on-dark-1) 20%, transparent);
  color: var(--text-on-dark-2);
}
.cm-dark :is(p, li, label, figcaption, blockquote, dt, dd, td, th) { color: var(--text-on-dark-2); }
.cm-dark :is(h1, h2, h3, h4, h5, h6) { color: var(--text-on-dark-1); }
.cm-dark .eyebrow { color: var(--secondary-color); }
.cm-dark a:not(.button):not(.hs-button):not(.cta_button) { color: var(--secondary-color); }
.cm-dark a:not(.button):not(.hs-button):not(.cta_button):hover,
.cm-dark a:not(.button):not(.hs-button):not(.cta_button):focus {
  color: color-mix(in srgb, var(--secondary-color) 78%, white);
}

/* --- Light (asserts dark ink so a forced-light module reads on a light backdrop,
       even when it sits inside a .surface--dark section) --------------------- */
.cm-light {
  --surface-card:   var(--surface-0);
  --border-subtle:  color-mix(in srgb, var(--surface-dark) 10%, transparent);
  --border-default: color-mix(in srgb, var(--surface-dark) 18%, transparent);
  color: var(--text-2);
}
.cm-light :is(p, li, label, figcaption, blockquote, dt, dd, td, th) { color: var(--text-2); }
.cm-light :is(h1, h2, h3, h4, h5, h6) { color: var(--text-1); }
.cm-light .eyebrow { color: var(--primary-color); }
.cm-light a:not(.button):not(.hs-button):not(.cta_button) { color: var(--interactive-color); }

/* Brand Background Engine (Phase F). Included after _surfaces.css so the
   .bg-preset-{n} rules win ties over the Phase C [class*="surface--"]::before
   they may sit alongside on dark presets. Emits .bg-preset-1..5 from the theme
   background_presets slots; every colour derives from tokens via color-mix().
*/


















  
  
  
  
  
  
  

  
  
  

  
  
  

  
  
  
  
  

  
  

  

  
  
  
  
  
  

  
  
  
  
  

.bg-preset-1 {
  position: relative;
  isolation: isolate;
  background-color: var(--surface-dark);
}

.bg-preset-1 > * {
  position: relative;
  z-index: 1;
}

.bg-preset-1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  
  
  
}



  
  
  
  
  
  
  

  
  
  

  
  
  

  
  
  
  
  

  
  

  

  
  
  
  
  
  

  
  
  
  
  

.bg-preset-2 {
  position: relative;
  isolation: isolate;
  background-color: var(--surface-dark);
}

.bg-preset-2 > * {
  position: relative;
  z-index: 1;
}

.bg-preset-2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  
  
  
}



  
  
  
  
  
  
  

  
  
  
    
  

  
  
  
    
  

  
  
  
  
  

  
  

  
    
    
  

  
  
  
  
    
    
  
  
    
    
  
  
    
    
  

  
  
  
  
  

.bg-preset-3 {
  position: relative;
  isolation: isolate;
  background-color: var(--surface-dark-2);
}

.bg-preset-3 > * {
  position: relative;
  z-index: 1;
}

.bg-preset-3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(115% 115% at 50% 110%, color-mix(in srgb, var(--tertiary-base) 8%, transparent) 0%, transparent 62%), radial-gradient(60% 55% at 15% 12%, color-mix(in srgb, var(--primary-base) 16%, transparent), transparent 70%), radial-gradient(55% 55% at 85% 16%, color-mix(in srgb, var(--interactive-base) 18%, transparent), transparent 72%), radial-gradient(55% 55% at 72% 92%, color-mix(in srgb, var(--tertiary-base) 12%, transparent), transparent 70%), radial-gradient(circle at center, color-mix(in srgb, var(--text-on-dark-1) 2%, transparent) 1px, transparent 1.5px);
  background-size: auto, auto, auto, auto, 34px 34px;
  
}



  
  
  
  
  
  
  

  
  
  

  
  
  
    
  

  
  
  
  
  

  
  

  

  
  
  
  
  
    
    
  
  

  
  
  
  
  

.bg-preset-4 {
  position: relative;
  isolation: isolate;
  background-color: var(--surface-dark-2);
}

.bg-preset-4 > * {
  position: relative;
  z-index: 1;
}

.bg-preset-4::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(60% 55% at 15% 12%, color-mix(in srgb, var(--primary-base) 16%, transparent), transparent 70%), radial-gradient(55% 55% at 85% 16%, color-mix(in srgb, var(--interactive-base) 18%, transparent), transparent 72%), radial-gradient(55% 55% at 72% 92%, color-mix(in srgb, var(--tertiary-base) 12%, transparent), transparent 70%);
  background-size: auto, auto, auto;
  
}



  
  
  
  
  
  
  

  
  
  

  
  
  
    
  

  
  
  
  
  

  
  

  

  
  
  
  
  
    
    
  
  

  
  
  
  
  

.bg-preset-5 {
  position: relative;
  isolation: isolate;
  background-color: var(--surface-dark-2);
}

.bg-preset-5 > * {
  position: relative;
  z-index: 1;
}

.bg-preset-5::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(60% 55% at 15% 12%, color-mix(in srgb, var(--primary-base) 16%, transparent), transparent 70%), radial-gradient(55% 55% at 85% 16%, color-mix(in srgb, var(--interactive-base) 18%, transparent), transparent 72%), radial-gradient(55% 55% at 72% 92%, color-mix(in srgb, var(--tertiary-base) 12%, transparent), transparent 70%);
  background-size: auto, auto, auto;
  
}






/* Utilities
Helper classes with ability to override anything that comes before it
*/

/* Colors */








body {
  --primary-color: #FF2E93;
  --secondary-color:  #00C4C4;
  --tertiary-color:  #1C1226;
  --interactive-color:  #120B1B;
  --light-color:  #F5F6F7;
  --dark-color:  #1C1226;
  
}














.button:not(.no-button), .hs-button:not(.no-button), .cta_button:not(.no-button) {
  
  
  /* Phase 14: a button label is a step heavier than body copy. Declared BEFORE
     the field's own .css so an editor-set weight still wins on source order.
     It is not in the field default because that dict's `styles` key is not
     reliably reaching the compiled output — text-decoration: none is declared
     there and never appears. base.html requests this weight for the primary
     family; do not raise it without adding the weight to that request. */
  font-weight: 600;
  font-size: 17px;font-family: Inter, sans-serif; font-weight: 700;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* Phase D: subtle hover lift + shadow on every button style (colour swaps are
   handled per-style by the macros above). */
.button:not(.no-button):hover,
.hs-button:not(.no-button):hover,
.cta_button:not(.no-button):hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* The global reduced-motion block (theme-overrides.css) only zeroes transition
   DURATION, not the transform property itself — so kill the lift explicitly for
   users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .button:not(.no-button):hover,
  .hs-button:not(.no-button):hover,
  .cta_button:not(.no-button):hover {
    transform: none;
  }
}






  
    
    
    form input[type='submit'] {
      background-color: rgba(rgba(255, 46, 147, 0), ) !important;
      color: #FFFFFF;
      border-color: #FF2E93;
    }
    form input[type='submit']:hover {
      background-color: rgba(rgba(0, 196, 196, 1), ) !important;
      color: #1C1226;
      border-color: #00C4C4;
    }
  


  
    
    
    
      .button.button--primary,
      .hs-button.button--primary,
      .cta_button.button--primary {
        
          color: #FFFFFF;
        
          background-color: rgba(255, 46, 147, 0);
        
          border-color: #FF2E93;
        
      }
      .button.button--primary.button--ghost,
      .hs-button.button--primary.button--ghost,
      .cta_button.button--primary.button--ghost {
          background-color: transparent !important;
          
            
          
            
              color: rgba(255, 46, 147, 0) !important;
              border-color: rgba(255, 46, 147, 0) !important;
            
          
            
          
      }
    
  
    
    
    
      .button.button--primary:hover,
      .hs-button.button--primary:hover,
      .cta_button.button--primary:hover {
        
          color: #1C1226;
        
          background-color: rgba(0, 196, 196, 1);
        
          border-color: #00C4C4;
        
      }
      .button.button--primary.button--ghost:hover,
      .hs-button.button--primary.button--ghost:hover,
      .cta_button.button--primary.button--ghost:hover {
        
          
          
            color: #1C1226;
          
        
          
          
        
          
            border-color: #00C4C4;
            background-color: #00C4C4 !important;
          
          
         
      }
    
  
    
    
    
      .button.button--secondary,
      .hs-button.button--secondary,
      .cta_button.button--secondary {
        
          color: #000000;
        
          background-color: rgba(66, 226, 213, 100);
        
          border-color: #42e2d5;
        
      }
      .button.button--secondary.button--ghost,
      .hs-button.button--secondary.button--ghost,
      .cta_button.button--secondary.button--ghost {
          background-color: transparent !important;
          
            
          
            
              color: rgba(66, 226, 213, 100) !important;
              border-color: rgba(66, 226, 213, 100) !important;
            
          
            
          
      }
    
  
    
    
    
      .button.button--secondary:hover,
      .hs-button.button--secondary:hover,
      .cta_button.button--secondary:hover {
        
          color: #2A003D;
        
          background-color: rgba(0, 196, 196, 100);
        
          border-color: #00C4C4;
        
      }
      .button.button--secondary.button--ghost:hover,
      .hs-button.button--secondary.button--ghost:hover,
      .cta_button.button--secondary.button--ghost:hover {
        
          
          
            color: #2A003D;
          
        
          
          
        
          
            border-color: #00C4C4;
            background-color: #00C4C4 !important;
          
          
         
      }
    
  
    
    
    
      .button.button--tertiary,
      .hs-button.button--tertiary,
      .cta_button.button--tertiary {
        
          color: #FFFFFF;
        
          background-color: rgba(28, 18, 38, 1);
        
          border-color: #1C1226;
        
      }
      .button.button--tertiary.button--ghost,
      .hs-button.button--tertiary.button--ghost,
      .cta_button.button--tertiary.button--ghost {
          background-color: transparent !important;
          
            
          
            
              color: rgba(28, 18, 38, 1) !important;
              border-color: rgba(28, 18, 38, 1) !important;
            
          
            
          
      }
    
  
    
    
    
      .button.button--tertiary:hover,
      .hs-button.button--tertiary:hover,
      .cta_button.button--tertiary:hover {
        
          color: #1C1226;
        
          background-color: rgba(255, 46, 147, 1);
        
          border-color: #FF2E93;
        
      }
      .button.button--tertiary.button--ghost:hover,
      .hs-button.button--tertiary.button--ghost:hover,
      .cta_button.button--tertiary.button--ghost:hover {
        
          
          
            color: #1C1226;
          
        
          
          
        
          
            border-color: #FF2E93;
            background-color: #FF2E93 !important;
          
          
         
      }
    
  
    
    
    
      .button.button--light,
      .hs-button.button--light,
      .cta_button.button--light {
        
          color: #1C1226;
        
          background-color: rgba(245, 246, 247, 1);
        
          border-color: #F5F6F7;
        
      }
      .button.button--light.button--ghost,
      .hs-button.button--light.button--ghost,
      .cta_button.button--light.button--ghost {
          background-color: transparent !important;
          
            
          
            
              color: rgba(245, 246, 247, 1) !important;
              border-color: rgba(245, 246, 247, 1) !important;
            
          
            
          
      }
    
  
    
    
    
      .button.button--light:hover,
      .hs-button.button--light:hover,
      .cta_button.button--light:hover {
        
          color: #F5F6F7;
        
          background-color: rgba(28, 18, 38, 1);
        
          border-color: #1C1226;
        
      }
      .button.button--light.button--ghost:hover,
      .hs-button.button--light.button--ghost:hover,
      .cta_button.button--light.button--ghost:hover {
        
          
          
            color: #F5F6F7;
          
        
          
          
        
          
            border-color: #1C1226;
            background-color: #1C1226 !important;
          
          
         
      }
    
  
    
    
    
      .button.button--dark,
      .hs-button.button--dark,
      .cta_button.button--dark {
        
          color: #F5F6F7;
        
          background-color: rgba(28, 18, 38, 1);
        
          border-color: #1C1226;
        
      }
      .button.button--dark.button--ghost,
      .hs-button.button--dark.button--ghost,
      .cta_button.button--dark.button--ghost {
          background-color: transparent !important;
          
            
          
            
              color: rgba(28, 18, 38, 1) !important;
              border-color: rgba(28, 18, 38, 1) !important;
            
          
            
          
      }
    
  
    
    
    
      .button.button--dark:hover,
      .hs-button.button--dark:hover,
      .cta_button.button--dark:hover {
        
          color: #1C1226;
        
          background-color: rgba(245, 246, 247, 1);
        
          border-color: #F5F6F7;
        
      }
      .button.button--dark.button--ghost:hover,
      .hs-button.button--dark.button--ghost:hover,
      .cta_button.button--dark.button--ghost:hover {
        
          
          
            color: #1C1226;
          
        
          
          
        
          
            border-color: #F5F6F7;
            background-color: #F5F6F7 !important;
          
          
         
      }
    
  
/* Inline heading accents
   --------------------------------------------------------------------------
   Marketing headlines routinely need one word picked out in a brand colour
   ("Build the co-intelligent team you need."). Module title fields are plain
   text fields, but the theme prints them unescaped, so an editor can wrap the
   word in a span and reach for one of these classes:

     <span class="text-accent">co-intelligent</span>

   Every colour derives from a token, so the rebrand drill still holds. These
   are utilities, so they live last in the cascade and win over the module CSS
   that set the heading colour.

   .text-accent       primary brand colour
   .text-accent--alt  tertiary brand colour, the on-dark counterpart
   .text-gradient     brand gradient clipped to the glyphs
   .text-glow         soft brand halo, for neon-leaning designs
*/

h1 > span,
h2 > span, 
h3 > span {
  color: var(--primary-base);
}

h1 > strong,
h2 > strong, 
h3 > strong {
  color: var(--secondary-color);
}

/* A named opt-out from the running-content underline
   --------------------------------------------------------------------------
   theme-overrides.css underlines `main p a` so a link is distinguishable
   without relying on colour (WCAG 1.4.1, Phase 3). That rule is correct for a
   link INSIDE a block of prose, which is what 1.4.1 is about. It is the wrong
   treatment for a link that is a standalone line of its own — a phone number or
   an address in a card, where there is no surrounding text to be confused with.

   This is deliberately a class an author asks for by name, not a weakening of
   the rule: every link that does not carry it stays underlined. Use it only
   where the link occupies its own line and reads unmistakably as an action. */
.link--bare {
  text-decoration: none;
}

.link--bare:hover,
.link--bare:focus-visible {
  text-decoration: underline;
}

/* The solid colour is declared first and unconditionally, so a browser without
   background-clip support (or one that supports the property but not the text
   value) still renders a legible, on-brand word rather than a transparent gap. */
.text-gradient {
  color: var(--primary-base);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .text-gradient {
    background-image: linear-gradient(
      100deg,
      var(--interactive-base) 0%,
      var(--primary-base) 55%,
      var(--tertiary-base) 100%
    );
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    /* Descenders are clipped by the glyph box on some engines without this. */
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
  }
}

.text-glow {
  text-shadow: 0 0 20px color-mix(in srgb, var(--tertiary-base) 55%, transparent);
}

/* Secondary running text — the paragraph after the lead one, a caption, a
   supporting note. Resolves against whichever ink scale the surface is using,
   so the same class reads correctly on light and dark. */
.text-muted {
  color: var(--text-3);
}

.surface--dark .text-muted,
.surface--dark-mesh .text-muted,
.cm-dark .text-muted,
[class*="bg-preset-"] .text-muted {
  color: var(--text-on-dark-2);
}

/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}