/* ==========================================================================
   FLUTE THEME — UNIFIED MAIN.CSS
   --------------------------------------------------------------------------
   Single source of truth for Flute landing page styling. Merged from:
     - main.css                  (colleague's grid + base + components)
     - ryans-landing-pages.css   (token system + forms + mobile fixes)
     - theme-overrides.css       (theme settings — most was broken; kept
                                   only the rules that actually resolved)

   Architecture: ITCSS-lite, organized cascade-first.
     1.  Theme settings → CSS custom properties (HubL block)
     2.  Tokens (CSS custom properties)
     3.  @font-face
     4.  Base reset
     5.  Grid system (flexbox engine — KEEP working)
     6.  Typography
     7.  Type utilities
     8.  Color utilities
     9.  Buttons
     10. Pills / eyebrows
     11. Cards
     12. Containers / layout
     13. HubSpot forms (legacy .hs-form + modern hsfc-* + email overrides)
     14. Header
     15. Footer
     16. Module-specific fixes (sticky, images, breakouts, rich-text)
     17. Editor compatibility (font-size, font-weight, line-height inline)
     17.5 SYSTEM PAGES (subscription preferences, etc.)
     18. Tablet breakpoint (max-width 1023px)
     19. Mobile breakpoint (max-width 767px)
     20. Very small phones (max-width 480px)

   Bug fixes baked in:
     - Duplicate body block from old main.css → resolved.
     - Misplaced .flute-button block inside @media (max-width: 767px) → moved
       to component level.
     - Old #7c7c74 muted gray → updated to #676760 per brand designer.
     - .row-fluid .span6 { max-width: 50% } no longer breaks mobile stacking.

   Conventions:
     - All brand-controllable values read from fields.json via HubL at the
       top, then exposed as --flute-* CSS variables. Rule bodies use var()
       references throughout.
     - All !important uses are intentional and commented where non-obvious.
     - Mobile rules consolidated into the @media blocks at the bottom of
       the file — do not scatter mobile-only rules elsewhere.

   Last consolidated: 2026-05-12
   ========================================================================== */


/* ==========================================================================
   1. THEME SETTINGS → CSS CUSTOM PROPERTIES
   --------------------------------------------------------------------------
   HubL pulls the few real values from fields.json into CSS custom
   properties so editors can change brand colors / spacing via the Theme
   Settings GUI without touching code. fields.json defines:
     - brand_colors.black, brand_colors.citron
     - typography.body_font, typography.heading_font (currently Inter)
     - layout.container_width, layout.section_spacing.padding.{top,bottom}

   Anything not in fields.json is hardcoded as a static token below in
   section 2.
   ========================================================================== */

:root {
  /* From fields.json — editor-controllable */
  --flute-brand-black:   #131312;
  --flute-brand-citron:  #DDFF33;
  --flute-container:     1392px;
  --flute-section-pad-top:    0px;
  --flute-section-pad-bottom: 0px;
}


/* ==========================================================================
   2. TOKENS (CSS custom properties)
   --------------------------------------------------------------------------
   Source of truth for all design values not currently in fields.json.
   Re-namespaced with --flute-* prefix to avoid colliding with HubSpot's
   own variables. To add a new editor-controllable color, add it to
   fields.json AND to the HubL block above; then reference it here.
   ========================================================================== */

:root {
  /* Surfaces */
  --flute-bg:           #F7F7F5;
  --flute-surface:      #FFFFFF;
  --flute-surface-soft: #F7F7F5;

  /* Text scale — #7c7c74 was deprecated 2026-05; brand designer asked for
     #676760 across the board for higher contrast on light surfaces. */
  --flute-text-strong:   #131312;
  --flute-text-medium:   #676760;
  --flute-text-neutral:  #676760;
  --flute-text-subtle:   #9A9A91;
  --flute-text-faint:    #B0B0A6;
  --flute-text-black:    #000000;
  --flute-text-white:    #FFFFFF;

  /* Borders */
  --flute-border-subtle:  #EAEAE6;
  --flute-border-neutral: #E1E1DB;

  /* Brand — citron family */
  --flute-citron:      var(--flute-brand-citron);
  --flute-citron-dark: #B1CC29;
  --flute-citron-soft: #C8F04D;

  /* Brand — secondary dark */
  --flute-dark:      #242423;
  --flute-dark-soft: #51514C;

  /* Brand — ghost (light gray) */
  --flute-ghost:      #E1E1DB;
  --flute-ghost-dark: #C4C4BC;

  /* Status */
  --flute-error: #B70F0F;

  /* Radius */
  --flute-radius-pill:  999px;
  --flute-radius-card:  1.5rem;
  --flute-radius-input: 8px;

  /* Heights */
  --flute-h-xs: 24px;
  --flute-h-sm: 32px;
  --flute-h-md: 40px;
  --flute-h-lg: 48px;
  --flute-h-xl: 56px;

  /* Pixel padding */
  --flute-pad-xs: 4px;
  --flute-pad-sm: 8px;
  --flute-pad-md: 16px;
  --flute-pad-ml: 20px;
  --flute-pad-lg: 24px;
  --flute-pad-xl: 32px;

  /* Type scale */
  --flute-font-xs:     0.75rem;
  --flute-font-sm:     0.875rem;
  --flute-font-md:     1rem;
  --flute-font-md-lg:  1.125rem;
  --flute-font-ml:     1.25rem;
  --flute-font-lg:     1.5rem;
  --flute-font-xl:     2rem;
  --flute-font-xxl-sm: 2.5rem;
  --flute-font-xxl:    3rem;
  --flute-font-xxl-lg: 3.5rem;

  /* Layout — header content width override of fields.json default (1200).
     The 1388px value is intentional to match the WP staging site. If GTM
     wants a single source of truth, update fields.json container_width to
     1388 and remove this override. */
  --flute-container-narrow: 1120px;
  --flute-container-text:   658px;
  --flute-container-pad-desktop: 24px;
  --flute-container-pad-mobile:  48px;

  /* Shadow */
  --flute-shadow-soft: 0 18px 40px -28px rgba(15, 23, 42, 0.4);

  /* Font stacks */
  --flute-font-display: 'Trigonix', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --flute-font-body:    'Trigonix', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Stroke weight (used by SVG icons) */
  --flute-stroke-weight: 1.5px;
}

/* ==========================================================================
   3. @FONT-FACE
   --------------------------------------------------------------------------
   Trigonix is the brand display face. Inter is the self-hosted fallback.
   Paths resolved via HubL so sandbox→production deploys work without URL
   surgery. Files live in /flute-theme/custom-fonts/.
   ========================================================================== */

@font-face {
  font-family: 'Trigonix';
  src: url('https://8049058.fs1.hubspotusercontent-na1.net/hubfs/8049058/raw_assets/public/flute-theme/custom-fonts/Trigonix-Variable.woff2') format('woff2-variations'),
       url('https://8049058.fs1.hubspotusercontent-na1.net/hubfs/8049058/raw_assets/public/flute-theme/custom-fonts/Trigonix-Variable.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trigonix';
  src: url('https://8049058.fs1.hubspotusercontent-na1.net/hubfs/8049058/raw_assets/public/flute-theme/custom-fonts/Trigonix-VariableItalic.woff2') format('woff2-variations'),
       url('https://8049058.fs1.hubspotusercontent-na1.net/hubfs/8049058/raw_assets/public/flute-theme/custom-fonts/Trigonix-VariableItalic.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('https://8049058.fs1.hubspotusercontent-na1.net/hubfs/8049058/raw_assets/public/flute-theme/custom-fonts/Inter-Variable.woff2') format('woff2-variations'),
       url('https://8049058.fs1.hubspotusercontent-na1.net/hubfs/8049058/raw_assets/public/flute-theme/custom-fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('https://8049058.fs1.hubspotusercontent-na1.net/hubfs/8049058/raw_assets/public/flute-theme/custom-fonts/Inter-Italic-Variable.woff2') format('woff2-variations'),
       url('https://8049058.fs1.hubspotusercontent-na1.net/hubfs/8049058/raw_assets/public/flute-theme/custom-fonts/Inter-Italic-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


/* ==========================================================================
   4. BASE RESET
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Allow vertical scrolling but clip horizontal overflow. `overflow-x: clip`
   is the modern alternative to `overflow-x: hidden` — it clips overflow
   without creating a new scrolling context, which means sticky
   positioning on descendants still works. */
html, body {
  overflow-x: clip;
  overflow-y: visible;
}

body {
  margin: 0;
  background: var(--flute-bg);
  font-family: var(--flute-font-body);
  color: var(--flute-text-neutral);
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p, li {
  color: var(--flute-text-neutral);
  margin-top: 0;
  margin-bottom: 1.5rem;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}


/* ==========================================================================
   5. GRID SYSTEM (FLEXBOX ENGINE)
   --------------------------------------------------------------------------
   HubSpot row-fluid grid, converted to flexbox. KEEP THIS — modules and
   pages built in the editor rely on it. The negative-margin pattern lets
   columns extend to the container's natural edges.
   ========================================================================== */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
}

.row-fluid [class*="span"] {
  display: block;
  min-height: 50px;
  box-sizing: border-box;
  padding-inline: 20px;
  position: relative;
}

/* Desktop column widths. KEEP — these explicit percentages let the editor
   resize columns predictably. The mobile breakpoint below unwinds them. */
@media (min-width: 768px) {
  .row-fluid .span1  { width: 8.333333%  !important; flex: 0 0 8.333333%;  }
  .row-fluid .span2  { width: 16.666667% !important; flex: 0 0 16.666667%; }
  .row-fluid .span3  { width: 25%        !important; flex: 0 0 25%;        }
  .row-fluid .span4  { width: 33.333333% !important; flex: 0 0 33.333333%; }
  .row-fluid .span5  { width: 41.666667% !important; flex: 0 0 41.666667%; }
  .row-fluid .span6  { width: 50%        !important; flex: 0 0 50%;        }
  .row-fluid .span7  { width: 58.333333% !important; flex: 0 0 58.333333%; }
  .row-fluid .span8  { width: 66.666667% !important; flex: 0 0 66.666667%; }
  .row-fluid .span9  { width: 75%        !important; flex: 0 0 75%;        }
  .row-fluid .span10 { width: 83.333333% !important; flex: 0 0 83.333333%; }
  .row-fluid .span11 { width: 91.666667% !important; flex: 0 0 91.666667%; }
  .row-fluid .span12 { width: 100%       !important; flex: 0 0 100%;       }
}

/* Re-enable HubSpot's editor alignment system. The base `.row-fluid
   [class*="span"] { display: block }` rule above overrides HubSpot's auto-
   generated `.widget_XXX-flexbox-positioning { display: flex }` due to
   higher specificity. Forcing flex here restores editor-driven alignment. */
.row-fluid [class*="flexbox-positioning"] {
  display: flex !important;
}

/* Stop top-level row-fluid bleed eating container padding.
   The .row-fluid negative-margin pattern is meant for *nested* rows
   inside columns (so column padding-inline compensates correctly).
   But when row-fluid is a *direct* child of .container or .dnd-section
   wrapping a dnd_area, the bleed extends content past the container's
   intended gutter — causing viewport overflow at small viewports.
   This rule restores standard width and margin behavior for top-level
   row-fluids; nested ones still bleed as designed. */
.container > .row-fluid-wrapper > .row-fluid,
.container > .row-fluid,
.section .dnd-section > .row-fluid-wrapper > .row-fluid,
.section .dnd-section > .row-fluid,
.section--fullwidth > .dnd-section > .row-fluid-wrapper > .row-fluid,
.section--fullwidth > .dnd-section > .row-fluid {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* And zero out the columns' padding-inline for top-level rows, since
   without the negative-margin bleed they'd have unwanted 20px on
   outer columns. Nested column padding still works for inner columns. */
.container > .row-fluid-wrapper > .row-fluid > [class*="span"],
.container > .row-fluid > [class*="span"],
.section .dnd-section > .row-fluid-wrapper > .row-fluid > [class*="span"],
.section .dnd-section > .row-fluid > [class*="span"],
.section--fullwidth > .dnd-section > .row-fluid-wrapper > .row-fluid > [class*="span"],
.section--fullwidth > .dnd-section > .row-fluid > [class*="span"] {
  padding-inline: 0;
}

/* Override min-height: 50px on nested columns. The 50px floor is meant
   to keep empty top-level columns clickable in the editor's empty state.
   Nested columns with short text (eyebrows, labels) were getting
   unnecessary vertical space. */
.row-fluid .row-fluid [class*="span"] {
  min-height: 0 !important;
}

/* Optional: restore visible gutter between columns at top-level rows */
.container > .row-fluid-wrapper > .row-fluid,
.section .dnd-section > .row-fluid-wrapper > .row-fluid,
.section--fullwidth > .dnd-section > .row-fluid-wrapper > .row-fluid {
  gap: 32px;
}

/* ==========================================================================
   6. TYPOGRAPHY
   --------------------------------------------------------------------------
   Mirrors typography.css from the WP brand system. Editors can override
   font-size/weight/line-height via inline styles — see section 17.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--flute-font-display);
  color: var(--flute-text-strong);
  font-weight: 400;
  margin: 0 0 1rem;
}

h1 {
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 120%;I tried
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 120%;
  letter-spacing: -0.96px;
}

h3 {
  font-size: clamp(28px, 2.3vw, 32px);
  line-height: 130%;
  letter-spacing: -0.64px;
  margin-bottom: 0.75rem;
}

h4 {
  font-size: clamp(20px, 1.2vw + 12px, 24px);
  line-height: 140%;
  letter-spacing: -0.48px;
  margin-bottom: 0.75rem;
}

h5 {
  font-size: var(--flute-font-md-lg);
  line-height: 140%;
  letter-spacing: -0.16px;
  margin-bottom: 0.5rem;
}

h6 {
  font-size: var(--flute-font-md);
  line-height: 140%;
  font-weight: 600;
  margin-bottom: 0.5rem;
}


/* ==========================================================================
   7. TYPE UTILITIES
   --------------------------------------------------------------------------
   Exact ports of typography.css from the WP brand system. Apply via the
   editor's "Add classes" field when an override is needed.
   ========================================================================== */

.type-display {
  font-family: var(--flute-font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--flute-text-strong);
}

.type-heading-l {
  font-family: var(--flute-font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 120%;
  letter-spacing: -0.96px;
  color: var(--flute-text-strong);
}

.type-heading-m {
  font-family: var(--flute-font-display);
  font-weight: 400;
  font-size: clamp(28px, 2.3vw, 32px);
  line-height: 130%;
  letter-spacing: -0.64px;
  color: var(--flute-text-strong);
}

.type-heading-s {
  font-family: var(--flute-font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.2vw + 12px, 24px);
  line-height: 140%;
  letter-spacing: -0.48px;
  color: var(--flute-text-strong);
}

.type-subheading-l       { font: 400 clamp(16px, 1.25vw, 18px)/140% var(--flute-font-display); letter-spacing: -0.16px; }
.type-subheading-l-bold  { font: 600 clamp(16px, 1.25vw, 18px)/140% var(--flute-font-display); letter-spacing: -0.18px; }
.type-subheading-m       { font: 400 clamp(14px, 0.7vw + 9px, 16px)/140% var(--flute-font-display); letter-spacing: -0.16px; }
.type-subheading-m-bold  { font: 600 clamp(16px, 0.7vw + 9px, 16px)/140% var(--flute-font-display); letter-spacing: -0.16px; }
.type-subheading-s       { font: 400 clamp(12px, 0.6vw + 8px, 14px)/140% var(--flute-font-display); letter-spacing: -0.005em; }

.type-body-l { font: 400 clamp(16px, 1.25vw, 18px)/140% var(--flute-font-body); letter-spacing: 0.09px; }
.type-body-m { font: 400 1rem/140% var(--flute-font-body); letter-spacing: -0.08px; }
.type-body-s { font: 400 0.875rem/140% var(--flute-font-body); letter-spacing: -0.005em; }

.type-caption {
  font: 400 clamp(11px, 0.5vw + 8px, 12px)/140% var(--flute-font-body);
  color: var(--flute-text-subtle);
}


/* ==========================================================================
   8. COLOR UTILITIES
   ========================================================================== */

.text-strong  { color: var(--flute-text-strong); }
.text-medium  { color: var(--flute-text-medium); }
.text-neutral { color: var(--flute-text-neutral); }
.text-subtle  { color: var(--flute-text-subtle); }
.text-faint   { color: var(--flute-text-faint); }
.text-black   { color: var(--flute-text-black); }
.text-white   { color: var(--flute-text-white); }


/* ==========================================================================
   9. BUTTONS
   --------------------------------------------------------------------------
   Force staging spec on all HubSpot button surfaces — pill, 40px, 14px
   Trigonix, citron with citron-dark hover. Targets the common classes
   HubSpot generates for Button modules, CTA modules, and anchor-style
   buttons. The .flute-button block (moved out of the mobile media query
   where it was incorrectly nested in main.css) handles staged variants.
   ========================================================================== */

.theme-button-primary,
.theme-button-secondary,
.theme-button-ghost,
.theme-button-primary-sm,
.theme-button-secondary-sm,
.theme-button-ghost-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font-family: var(--flute-font-body);
  font-size: var(--flute-font-sm);
  font-weight: 400;
  line-height: 140%;
  border-radius: var(--flute-radius-pill);
  padding: 1px var(--flute-pad-ml) 0;
  height: var(--flute-h-md);
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}

.theme-button-primary-sm,
.theme-button-secondary-sm,
.theme-button-ghost-sm {
  height: var(--flute-h-sm);
  padding: 1px var(--flute-pad-md) 0;
}

.theme-button-primary,
.theme-button-primary-sm {
  background: var(--flute-citron);
  color: var(--flute-text-strong);
}
.theme-button-primary:hover,
.theme-button-primary-sm:hover { background: var(--flute-citron-dark); }
.theme-button-primary:disabled,
.theme-button-primary-sm:disabled {
  background: var(--flute-citron);
  color: var(--flute-citron-dark);
  cursor: not-allowed;
}

.theme-button-secondary,
.theme-button-secondary-sm {
  background: var(--flute-dark);
  color: var(--flute-text-white);
}
.theme-button-secondary:hover,
.theme-button-secondary-sm:hover { background: var(--flute-dark-soft); }

.theme-button-ghost,
.theme-button-ghost-sm {
  background: var(--flute-ghost);
  color: var(--flute-text-strong);
}
.theme-button-ghost:hover,
.theme-button-ghost-sm:hover { background: var(--flute-ghost-dark); }

.theme-button-primary:focus-visible,
.theme-button-secondary:focus-visible,
.theme-button-ghost:focus-visible,
.theme-button-primary-sm:focus-visible,
.theme-button-secondary-sm:focus-visible,
.theme-button-ghost-sm:focus-visible {
  outline: 2px solid var(--flute-citron-dark);
  outline-offset: 2px;
}

/* HubSpot button surfaces — unified pill style */
.cta_button,
.hs-button,
a.button,
.hs-cta-wrapper a,
.hs-cta-trigger-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 1px 20px 0 !important;
  font-family: var(--flute-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 140% !important;
  border-radius: 999px !important;
  background: var(--flute-citron) !important;
  color: var(--flute-text-strong) !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: background-color 0.4s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.cta_button:hover,
.hs-button:hover,
a.button:hover,
.hs-cta-wrapper a:hover,
.hs-cta-trigger-button:hover {
  background: var(--flute-citron-dark) !important;
  color: var(--flute-text-strong) !important;
}

.cta_button:focus-visible,
.hs-button:focus-visible,
a.button:focus-visible {
  outline: 2px solid var(--flute-citron-dark) !important;
  outline-offset: 2px !important;
}

/* .flute-button variants — moved out of the @media (max-width: 767px)
   block where it was incorrectly nested in the old main.css. */
.flute-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.2s ease;
}

.flute-button--accent {
  background: var(--flute-citron);
  color: var(--flute-text-strong);
}
.flute-button--accent:hover { transform: translateY(-1px); }

.flute-button--muted {
  background: #e8e5de;
  color: var(--flute-text-strong);
}

.flute-button--dark {
  background: var(--flute-text-strong);
  color: var(--flute-text-white);
}


/* ==========================================================================
   10. PILLS / EYEBROWS
   ========================================================================== */

.flute-pill {
  display: inline-flex;
  align-items: center;
  background: var(--flute-citron-soft);
  color: var(--flute-text-strong);
  border-radius: var(--flute-radius-pill);
  padding: 4px 12px;
  font-family: var(--flute-font-body);
  font-size: var(--flute-font-xs);
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}


/* ==========================================================================
   11. CARDS
   ========================================================================== */

.flute-card {
  background: var(--flute-surface);
  border: 1px solid var(--flute-border-subtle);
  border-radius: var(--flute-radius-card);
  padding: 1.5rem;
  box-shadow: var(--flute-shadow-soft);
}

.flute-frosted-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: var(--flute-stroke-weight) solid rgba(255, 255, 255, 0.3);
  padding: 2rem;
}


/* ==========================================================================
   12. CONTAINERS / LAYOUT
   --------------------------------------------------------------------------
   .container is the main page constraint. .flute-container is an alternate
   utility for non-HubSpot-grid contexts. .flute-section/hero handle
   vertical rhythm.
   ========================================================================== */

.container,
.flute-container {
  width: 100%;
  max-width: var(--flute-container);
  margin-inline: auto;
  padding-inline: var(--flute-container-pad-desktop);
}

.flute-container-narrow {
  width: 100%;
  max-width: var(--flute-container-narrow);
  margin-inline: auto;
  padding-inline: var(--flute-container-pad-desktop);
}

.flute-container-text {
  width: 100%;
  max-width: var(--flute-container-text);
  margin-inline: auto;
}

.section {
  padding-top: var(--flute-section-pad-top);
  padding-bottom: var(--flute-section-pad-bottom);
}

.flute-section {
  padding: 56px 0;
}
@media (min-width: 768px)  { .flute-section { padding: 96px 0; } }
@media (min-width: 1024px) { .flute-section { padding: 128px 0; } }

.flute-hero {
  padding: 72px 0 56px;
  background: var(--flute-bg);
}
@media (min-width: 768px) { .flute-hero { padding: 128px 0 96px; } }

.flute-hero-split {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .flute-hero-split {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 70px;
  }
}

/* Full-width breakout — escape the .container constraint and extend
   edge-to-edge of the viewport. Apply via editor's "Add classes" field. */
.flute-fullwidth,
.dnd-row.flute-fullwidth,
.row-fluid-wrapper.flute-fullwidth {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  box-sizing: border-box;
}

.grid {
  display: grid;
  gap: 2rem;
}

/* Module utility classes */
.flute-icon {
  width: 80px;
  height: 80px;
  stroke-width: var(--flute-stroke-weight);
}

.flute-skewed-section {
  transform: skewY(-2deg);
  overflow: hidden;
}

.flute-skewed-content {
  transform: skewY(2deg);
}


/* ==========================================================================
   13. HUBSPOT FORMS
   --------------------------------------------------------------------------
   HubSpot ships two form modules:
     - Legacy:  <form class="hs-form ..."> with fieldsets, label > span
     - Modern:  <div data-hsfc-id="Renderer"> with .hsfc-* classes
   Both are styled here so any form on the site renders identically.

   Structure of this section:
     13.1  Legacy form (.hs-form) — base layout, card, fields, button
     13.2  Modern form ([data-hsfc-id="Renderer"]) — CSS vars + tweaks
     13.3  Universal overrides — labels + submit button weight (both types)
     13.4  Responsive — mobile submit button width
   ========================================================================== */


/* --------------------------------------------------------------------------
   13.1  LEGACY FORM (.hs-form)
   -------------------------------------------------------------------------- */

/* Base typography */
.hs-form,
.hs_cos_wrapper_type_form {
  font-family: var(--flute-font-body);
  color: var(--flute-text-strong);
}

/* Container width — fill the column */
div.hs-form-container,
div.hs-form-container .hs-form,
div.hs-form-container .hs-form-field {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

/* White card around the form */
form.hs-form {
  background: var(--flute-surface) !important;
  border: 1px solid var(--flute-border-subtle) !important;
  border-radius: var(--flute-radius-card) !important;
  padding: 30px 32px !important;
  display: block !important;
}

/* Font family + antialiasing on form children (label removed — handled in 13.3) */
.hs-form,
.hs-form .form-title,
.hs-form span,
.hs-form p,
.hs-form .hs-richtext * {
  font-family: var(--flute-font-body) !important;
  color: var(--flute-text-strong) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Form title */
.hs-form .form-title,
.hs-form .hs-richtext h3,
.hs-form .hs-richtext div {
  font-size: 32px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 12px !important;
}

/* Field wrapper spacing */
.hs-form-field { margin-bottom: 1rem; }

/* Required asterisk */
.hs-form-required { color: var(--flute-error); margin-left: 4px; }

/* Inputs, selects, textareas */
.hs-form-field .hs-input,
.hs-form-field input[type="text"],
.hs-form-field input[type="email"],
.hs-form-field input[type="tel"],
.hs-form-field input[type="number"],
.hs-form-field input[type="url"],
.hs-form-field input[type="password"],
.hs-form-field select,
.hs-form-field textarea {
  width: 100% !important;
  height: var(--flute-h-lg);
  padding: 0 var(--flute-pad-md);
  background: var(--flute-surface);
  border: 1px solid var(--flute-border-subtle);
  border-radius: var(--flute-radius-input);
  font-family: var(--flute-font-body);
  font-size: var(--flute-font-md);
  color: var(--flute-text-strong);
  line-height: 140%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.hs-form-field textarea {
  height: auto;
  min-height: 120px;
  padding: 12px var(--flute-pad-md);
  resize: vertical;
}

.hs-form-field .hs-input::placeholder,
.hs-form-field textarea::placeholder { color: var(--flute-text-subtle); }

.hs-form-field .hs-input:focus,
.hs-form-field select:focus,
.hs-form-field textarea:focus {
  outline: none;
  border-color: var(--flute-text-strong);
  /* box-shadow intentionally omitted — focus state communicated by border */
}

/* Select dropdown arrow (custom SVG chevron) */
.hs-form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23131312' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

/* Checkboxes + radios */
.hs-form-checkbox,
.hs-form-booleancheckbox,
.hs-form-radio { margin-bottom: 6px; }

.hs-form-checkbox label,
.hs-form-booleancheckbox label,
.hs-form-radio label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--flute-font-sm);
  color: var(--flute-text-strong);
  font-weight: 400;
  margin-bottom: 0;
}

.hs-form-checkbox input[type="checkbox"],
.hs-form-booleancheckbox input[type="checkbox"],
.hs-form-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--flute-citron-dark);
}

/* Error messages */
.hs-form-field .hs-error-msgs,
.hs-error-msgs label,
.hs_error_rollup .hs-main-font-element {
  color: var(--flute-error);
  font-size: var(--flute-font-sm);
  font-weight: 400;
  margin-top: 4px;
  display: block;
  list-style: none;
  padding: 0;
}

.hs-form-field .hs-input.invalid,
.hs-form-field .hs-input.error,
.hs-form-field input.invalid {
  border-color: var(--flute-error);
}

/* Legacy form rich text / field descriptions */
.hs-richtext,
.hs-richtext p,
legend.hs-field-desc {
  font-size: var(--flute-font-sm);
  color: var(--flute-text-neutral);
  line-height: 140%;
  margin-bottom: 0.75rem;
}

/* Legacy submit button */
.hs-button.primary,
.hs-form .hs-button,
form.hs-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--flute-citron);
  color: var(--flute-text-strong);
  font-family: var(--flute-font-body);
  font-size: var(--flute-font-sm);
  line-height: 140%;
  border-radius: var(--flute-radius-pill);
  border: 0;
  padding: 1px var(--flute-pad-ml) 0;
  height: var(--flute-h-md);
  cursor: pointer;
  transition: background-color 0.25s ease;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  /* font-weight set in 13.3 universal block */
}

.hs-form .hs_submit,
.hs-form .actions {
  width: 100% !important;
  display: block !important;
}

.hs-button.primary:hover,
.hs-form .hs-button:hover,
form.hs-form input[type="submit"]:hover {
  background: var(--flute-citron-dark);
}

.hs-button.primary:focus-visible,
.hs-form .hs-button:focus-visible {
  outline: 2px solid var(--flute-citron-dark);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   13.2  MODERN FORM ([data-hsfc-id="Renderer"])
   The modern module reads CSS custom properties to theme itself. Setting
   these is the "official" way to skin it without fighting internal CSS.
   -------------------------------------------------------------------------- */

/* Wrapper width — modern forms can overflow if left at module defaults */
.hs_cos_wrapper_type_form,
.hs_cos_wrapper_widget_type_form {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

/* CSS variables consumed by the modern form module */
[data-hsfc-id="Renderer"] {
  --hsf-background__background-color: var(--flute-surface);
  --hsf-background__border-style: solid;
  --hsf-background__border-color: var(--flute-border-subtle);
  --hsf-background__border-width: 1px 1px 1px 1px;
  --hsf-background__border-radius: 24px;
  --hsf-background__padding: 32px;

  --hsf-field-input__background-color: var(--flute-surface);
  --hsf-field-input__border-color: var(--flute-border-subtle);
  --hsf-field-input__border-radius: 8px;
  --hsf-field-input__padding: 12px 16px;
  --hsf-field-input__color: var(--flute-text-strong);
  --hsf-field-input__font-family: 'Trigonix', 'Inter', sans-serif;
  --hsf-field-input__font-size: 16px;

  --hsf-field-label__font-family: 'Trigonix', 'Inter', sans-serif;
  --hsf-field-label__color: var(--flute-text-strong);

  --hsf-button__background-color: var(--flute-citron);
  --hsf-button--hover__background-color: var(--flute-citron-dark);
  --hsf-button__color: var(--flute-text-strong);
  --hsf-button__font-family: 'Trigonix', 'Inter', sans-serif;
  --hsf-button__border-radius: 999px;
  --hsf-button__padding: 12px 24px;
}

/* Modern step container — match the legacy card look */
[data-hsfc-id="Renderer"] .hsfc-Step {
  background: var(--flute-surface);
  border: 1px solid var(--flute-border-subtle);
  border-radius: 24px;
  width: 100%;
  box-sizing: border-box;
}

[data-hsfc-id="Renderer"] .hsfc-Step__Content { padding: 32px; }

[data-hsfc-id="Renderer"] .hsfc-FormWrapper,
[data-hsfc-id="Renderer"] .hsfc-Form {
  width: 100%;
  max-width: none;
}

[data-hsfc-id="Renderer"] .hsfc-TextInput { height: 48px; }

[data-hsfc-id="Renderer"] .hsfc-TextInput:focus {
  border-color: var(--flute-text-strong) !important;
  box-shadow: none !important;
  outline: none;
}

[data-hsfc-id="Renderer"] .hsfc-Button { height: 48px; }
/* font-weight set in 13.3 universal block */

[data-hsfc-id="Renderer"] .hsfc-Button:not([disabled]):hover {
  transform: none;
  background-color: var(--flute-citron-dark);
}

[data-hsfc-id="Renderer"] .hsfc-PhoneInput__FlagAndCaret {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}


/* --------------------------------------------------------------------------
   13.3  UNIVERSAL OVERRIDES — apply to BOTH form types
   These rules sit at the end of the section so they win on cascade order.
   -------------------------------------------------------------------------- */

/* Labels — 16px / #676760 / Trigonix Regular (matches brand paragraph copy).
   Covers legacy <label>, modern label, and label-span variants. */
.hs-form label,
.hs-form label > span:not(.hs-form-required),
.hs-form fieldset label,
.hs-form-field > label,
.hs-form-field > legend,
[data-hsfc-id="Renderer"] label,
[data-hsfc-id="Renderer"] label span,
[data-hsfc-id="Renderer"] [class*="Label"] {
  font-family: var(--flute-font-body, "Trigonix", sans-serif) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #676760 !important;
  margin-bottom: 6px;
  line-height: 140%;
}

/* Submit button font-weight — 400 to match Flute .button styling.
   HubSpot's modern form hardcodes 700 and the legacy form rule above
   used to set 400 inline; centralizing it here means one place to tune. */
.hs-form input[type="submit"],
.hs-form .hs-button,
.hs-button.primary,
[data-hsfc-id="Renderer"] button[type="submit"],
[data-hsfc-id="Renderer"] button[type="submit"] *,
[data-hsfc-id="Renderer"] [class*="submit"] button,
[data-hsfc-id="Renderer"] [class*="Submit"] button,
[data-hsfc-id="Renderer"] [class*="Footer"] button,
[data-hsfc-id="Renderer"] .hsfc-Button {
  font-weight: 400 !important;
}


/* --------------------------------------------------------------------------
   13.4  RESPONSIVE — mobile submit button width
   -------------------------------------------------------------------------- */

/* Below 480px, legacy form submit goes full-width for thumb-friendly tapping.
   Modern form handles this natively via its CSS variables. */
@media (max-width: 480px) {
  .hs-button.primary,
  .hs-form .hs-button,
  form.hs-form input[type="submit"] {
    width: 100% !important;
    max-width: none !important;
  }
}

/* ------------------------------------------------------------------
   Modern HubSpot form (data-hsfc-id="Renderer") — submit button
   font-weight override. HubSpot hardcodes bold (700); we want it
   to match the standard Flute .button weight.
------------------------------------------------------------------ */
[data-hsfc-id="Renderer"] button[type="submit"],
[data-hsfc-id="Renderer"] button[type="submit"] *,
[data-hsfc-id="Renderer"] [class*="submit"] button,
[data-hsfc-id="Renderer"] [class*="Submit"] button,
[data-hsfc-id="Renderer"] [class*="Footer"] button {
  font-weight: 400 !important;   /* match your .button weight */
}

/* ------------------------------------------------------------------
   Modern HubSpot form — label text matches brand paragraph styling.
   Labels are the field titles ABOVE each input (e.g. "Email", "Phone").
------------------------------------------------------------------ */
[data-hsfc-id="Renderer"] label,
[data-hsfc-id="Renderer"] label span,
[data-hsfc-id="Renderer"] [class*="Label"] {
  font-family: var(--flute-font-body, "Trigonix", sans-serif) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #676760 !important;
}

/* ==========================================================================
   14. HEADER
   --------------------------------------------------------------------------
   Sticky white-translucent header with the Flute logo swapped in via SVG
   background-image. Logo's "Flute" text stays in the DOM for screen
   readers and as a fallback if CSS doesn't load.
   ========================================================================== */

/* Sticky header — attach position: sticky to the wrapper div around the
   header rather than the header itself. iOS Safari handles this reliably. */
body > div:has(> header.site-header) {
  position: sticky;
  top: 0;
  z-index: 50;
}

header.site-header,
.site-header {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--flute-border-subtle);

  /* Force header to fill viewport width regardless of inherited
     constraints. Real mobile browsers can apply parent constraints
     unpredictably compared to dev tools simulation. */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
}

.site-header__inner {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Logo — swap "Flute" text link for the dark SVG via background-image */
.site-logo {
  display: inline-block;
  width: 82px;
  height: 24px;
  background-image: url('https://8049058.fs1.hubspotusercontent-na1.net/hubfs/8049058/raw_assets/public/flute-theme/images/Flute-Logotype-Dark.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-nav a {
  font-size: 0.95rem;
}

.site-nav__toggle {
  display: none;
  background: transparent;
  border: 0;
  font-size: 1rem;
  cursor: pointer;
}

/* Desktop header layout — match staging: logo left, menu centered, CTA right */
@media (min-width: 768px) {
  .site-header .site-header__inner {
    display: flex !important;
    align-items: center !important;
  }

  .site-header .site-logo {
    flex: 0 0 auto;
  }

  .site-header .site-nav {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto;
    gap: 32px;
  }

  .site-header .site-nav > a:not(.button):first-of-type {
    margin-left: auto;
  }

  .site-header .site-nav > a.button {
    margin-left: auto;
  }

  .site-header .site-nav > a:not(.button) {
    font-family: var(--flute-font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--flute-text-medium);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
  }

  .site-header .site-nav > a:not(.button):hover {
    color: var(--flute-text-strong);
  }
}

/* Scroll-margin offset for in-page anchors so the sticky header
   doesn't cover the target element when scrolled into view. */
#contact,
[id^="anchor-"] {
  scroll-margin-top: 80px;
}

/* ==================================================================
   15. FOOTER  — 3-col desktop / 2-col tablet / 1-col mobile
================================================================== */
.site-footer {
  background-color: var(--flute-color-bg, #fff);
  padding: 64px 0 48px;
  border-top: 1px solid var(--flute-color-border, #e5e5e5);
}

/* ---------- Desktop (default, >=1024px) — 3 columns ---------- */
.site-footer .footer-bottom-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1.6fr;
  gap: 32px;
  align-items: stretch;
  width: 100%;
}

.site-footer .footer-bottom-wrapper > .address-info-wrapper,
.site-footer .footer-bottom-wrapper > .footer-text-wrapper {
  width: auto !important;       /* nuke any flex-basis / width:50% leftovers */
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
}

/* Gray cards */
.site-footer .address-info-wrapper {
  background-color: #F7F7F5;
  border-radius: 16px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer .address-heading {
  font-family: var(--flute-font-display, "Trigonix", serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--flute-color-text, #131312);
}

.site-footer .address-detail p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--flute-color-text, #7c7c74);
}

/* Disclaimer column — NO card */
.site-footer .footer-text-wrapper {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--flute-color-text-secondary, #9a9a91);
  padding: 4px 0 0;
  background: transparent;
}

/* ---------- Tablet (<=1023px) — 2 columns + disclaimer below ---------- */
@media (max-width: 1023px) {
  .site-footer .footer-bottom-wrapper {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer .footer-bottom-wrapper > .footer-text-wrapper {
    grid-column: 1 / -1;
  }
}

/* ---------- Mobile (<=767px) — single column ---------- */
@media (max-width: 767px) {
  .site-footer {
    padding: 48px 0 32px;
  }
  .site-footer .footer-bottom-wrapper {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .site-footer .footer-bottom-wrapper > .footer-text-wrapper {
    grid-column: auto;
    padding-top: 8px;
  }
  .site-footer .address-info-wrapper {
    padding: 24px 24px 22px;
  }
}

/* ==========================================================================
   16. MODULE-SPECIFIC FIXES
   --------------------------------------------------------------------------
   Image alignment, rich-text spacing, HubSpot-specific module quirks.
   ========================================================================== */

/* HubSpot image module — let editor alignment work */
.hs_cos_wrapper_type_linked_image img,
.hs_cos_wrapper_type_image img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* ------------------------------------------------------------------
   Stack 2-column sections containing an image module at 1099px
   instead of the default 767px. Avoids the awkward
   tablet state where the image looks small next to the text column.
------------------------------------------------------------------ */
@media (max-width: 1099px) {
  .dnd-section .row-fluid:has(.widget-type-linked_image),
  .dnd-section .row-fluid:has(.widget-type-image) {
    display: flex;
    flex-direction: column;
  }
  .dnd-section .row-fluid:has(.widget-type-linked_image) > .dnd-column,
  .dnd-section .row-fluid:has(.widget-type-image) > .dnd-column {
    width: 100% !important;
  }
}

/* Manual image alignment — apply via module's "Add classes" field */
.flute-img-left img   { display: block; margin: 0 auto 0 0; }
.flute-img-center img { display: block; margin: 0 auto; }
.flute-img-right img  { display: block; margin: 0 0 0 auto; }

/* Rich-text last-child margin reset */
.hs_cos_wrapper_type_rich_text > *:last-child,
.richtext > *:last-child {
  margin-bottom: 0;
}

/* Rich-text paragraph defaults — 16px / 1.5 line-height. Higher
   specificity than plain `p` so it beats class-based wrapper defaults
   from HubSpot. Editor inline styles still win because no !important. */
.hs_cos_wrapper_type_rich_text p,
.hs_cos_wrapper_widget_type_rich_text p,
.hs-richtext p {
  font-size: 16px;
  line-height: 1.5;
}

/* ==========================================================================
   FULLWIDTH SECTIONS — bleed background, constrain content
   --------------------------------------------------------------------------
   Sections dropped into `fullwidth_area` span the full viewport so their
   background colors/images extend edge-to-edge. Their inner content
   (the row-fluid) gets the same horizontal max-width and padding as the
   .container in standard_page_area, so content stays aligned with the
   rest of the page regardless of whether a section bleeds.
   ========================================================================== */

.section--fullwidth .dnd-section > .row-fluid {
  max-width: var(--flute-container);
  margin-inline: auto;
  padding-inline: var(--flute-container-pad-desktop);
}

@media (max-width: 1439px) {
  .section--fullwidth .dnd-section > .row-fluid {
    padding-inline: var(--flute-container-pad-mobile);
  }
}

/* ==========================================================================
   FORM STACKING — preserve form usability at tablet viewports
   --------------------------------------------------------------------------
   HubSpot forms become unusable when crammed into a half-width column at
   tablet sizes. Detect any row containing a form (legacy .hs-form or
   modern hsfc-id="Renderer") and stack its columns at <1100px so the
   form gets full width. The text column appears above, form below.
   :has() selector means no manual class needed — works automatically
   on any section that contains a form module.
   ========================================================================== */
@media (max-width: 1099px) {
  .row-fluid:has(.hs_cos_wrapper_type_form),
  .row-fluid:has([data-hsfc-id="Renderer"]),
  .row-fluid:has(form.hs-form) {
    display: block !important;
  }

  .row-fluid:has(.hs_cos_wrapper_type_form) > [class*="span"],
  .row-fluid:has([data-hsfc-id="Renderer"]) > [class*="span"],
  .row-fluid:has(form.hs-form) > [class*="span"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 48px;
  }

  /* ─── NEW: zero horizontal padding inside form rows at tablet ─── */
  /* When a form row stacks, also zero any UI-applied left/right padding
     on its columns and modules so content aligns to the container's
     gutters rather than being skewed by editor-set padding values. */
  .row-fluid:has(.hs_cos_wrapper_type_form) [class*="cell_"][class*="-padding"],
  .row-fluid:has([data-hsfc-id="Renderer"]) [class*="cell_"][class*="-padding"],
  .row-fluid:has(form.hs-form) [class*="cell_"][class*="-padding"],
  .row-fluid:has(.hs_cos_wrapper_type_form) [class*="module_"][class*="-padding"],
  .row-fluid:has([data-hsfc-id="Renderer"]) [class*="module_"][class*="-padding"],
  .row-fluid:has(form.hs-form) [class*="module_"][class*="-padding"],
  .row-fluid:has(.hs_cos_wrapper_type_form) [class*="widget_"][class*="-padding"],
  .row-fluid:has([data-hsfc-id="Renderer"]) [class*="widget_"][class*="-padding"],
  .row-fluid:has(form.hs-form) [class*="widget_"][class*="-padding"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ------------------------------------------------------------------
   Trigonix optical alignment fix
   Display-font side bearings push Trigonix headings ~0.08em right
   of the visual left edge. margin-left shifts ALL lines uniformly
   (text-indent only shifts the first line of a wrapped block).
------------------------------------------------------------------ */
.dnd-section h1,
.dnd-section h2 {
  margin-left: -0.08em;
}

/* ------------------------------------------------------------------
   Rich-text modules CONTAINING bullet/numbered lists — tighten
   spacing inside the list and around the module's outer edges.
   Plain-text rich-text modules are untouched.
------------------------------------------------------------------ */

/* Outer wrapper margins — only when the module contains a list */
.hs_cos_wrapper_type_rich_text:has(ul, ol) > *:first-child {
  margin-top: 0 !important;
}
.hs_cos_wrapper_type_rich_text:has(ul, ol) > *:last-child {
  margin-bottom: 0 !important;
}

/* The lists themselves — these rules are inherently scoped: they only
   match when a ul/ol/li exists, so no extra :has needed. */
.hs_cos_wrapper_type_rich_text ul,
.hs_cos_wrapper_type_rich_text ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 1.5em;
}

.hs_cos_wrapper_type_rich_text li {
  margin-bottom: 0.25em;
}

.hs_cos_wrapper_type_rich_text li:last-child {
  margin-bottom: 0;
}

/* Each <li> wraps its text in a <p>, which carries the global
   margin-bottom (~1.5rem). Strip that inside list items so the
   bullets pack to the rhythm of the list rules instead. */
.hs_cos_wrapper_type_rich_text li > p,
.hs_cos_wrapper_type_rich_text li p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   17. EDITOR COMPATIBILITY
   --------------------------------------------------------------------------
   Let HubSpot's rich-text editor controls (font-size, weight, line-height,
   color) actually take effect. The base body and typography rules above
   intentionally avoid !important on those properties so inline styles
   from the editor can override them. These rules patch up edge cases.
   ========================================================================== */

/* Explicit bold for <strong>/<b> tags */
strong, b {
  font-weight: 700 !important;
}

/* Editor's font-size class-based sizes */
.text-xs   { font-size: 0.75rem  !important; }
.text-sm   { font-size: 0.875rem !important; }
.text-base { font-size: 1rem     !important; }
.text-lg   { font-size: 1.125rem !important; }
.text-xl   { font-size: 1.25rem  !important; }
.text-2xl  { font-size: 1.5rem   !important; }
.text-3xl  { font-size: 1.875rem !important; }
.text-4xl  { font-size: 2.25rem  !important; }

/* Allow inline font-size, font-weight, line-height to take effect */
[style*="font-size"]   { font-size: revert-layer; }
[style*="font-weight"] { font-weight: revert-layer; }
[style*="line-height"] { line-height: revert-layer; }

/* Brand designer 2026-05: upgrade old #7c7c74 muted gray to #676760 for
   higher contrast on light backgrounds. Catches existing inline styles
   on headings (and descendants) without modifying the rich-text content. */
h3 [style*="7c7c74"],
h4 [style*="7c7c74"],
h5 [style*="7c7c74"],
h6 [style*="7c7c74"],
h3[style*="7c7c74"],
h4[style*="7c7c74"],
h5[style*="7c7c74"],
h6[style*="7c7c74"] {
  color: var(--flute-text-medium) !important;
}

/* ==========================================================================
   17.5 SYSTEM PAGES
   --------------------------------------------------------------------------
   Subscription preferences, confirmation, backup unsubscribe, password
   prompt, search, membership, 404, 500. All selectors here are scoped to
   .systems-page / .content-wrapper / .error-page / system-specific IDs,
   so they only apply on system pages and have no effect on landing pages.
   ========================================================================== */

/* ---------- Page wrapper ---------- */
.content-wrapper {
  padding: 45px 24px 64px;
  min-height: 60vh;
}

@media (min-width: 768px) {
  .content-wrapper { padding: 68px 24px 96px; }
}

/* ---------- The card (subscription/password pages) ---------- */
.systems-page {
  background-color: var(--flute-surface, #FFFFFF);
  border: 1px solid var(--flute-border-subtle, #EAEAE6);
  border-radius: var(--flute-radius-card, 24px);
  padding: 32px;
  margin: 0 auto;
  max-width: 640px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .systems-page { padding: 48px; }
}

/* Search results: no card, wider container */
.systems-page--search-results {
  max-width: 1200px;
  background-color: transparent;
  border: none;
  padding: 0 24px;
  margin: 0 auto;
}

/* ---------- Typography ---------- */
.systems-page .header,
.systems-page .page-header {
  background-color: transparent;
  border-bottom: none;
  padding: 0;
  margin-bottom: 28px;
}

.systems-page h1,
.systems-page h2 {
  font-family: var(--flute-font-display, 'Trigonix', 'Inter', sans-serif);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--flute-text-strong, #131312);
  margin: 0 0 12px;
}

.systems-page h3 {
  font-family: var(--flute-font-display, 'Trigonix', 'Inter', sans-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--flute-text-strong, #131312);
  margin: 24px 0 8px;
}

.systems-page p {
  font-family: var(--flute-font-body, 'Trigonix', 'Inter', sans-serif);
  font-size: 16px;
  line-height: 140%;
  color: var(--flute-text-neutral, #676760);
  margin: 0 0 16px;
}

.systems-page p:last-child { margin-bottom: 0; }

.systems-page a {
  color: var(--flute-text-strong, #131312);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.systems-page a:hover { text-decoration-thickness: 2px; }

/* ---------- Form layout ---------- */
.systems-page form { margin: 0; }

.systems-page label,
.systems-page legend {
  font-family: var(--flute-font-body, 'Trigonix', 'Inter', sans-serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--flute-text-neutral, #676760);
  line-height: 140%;
  margin-bottom: 6px;
  display: block;
}

.systems-page input[type="text"],
.systems-page input[type="email"],
.systems-page input[type="password"] {
  width: 100%;
  height: var(--flute-h-lg, 48px);
  padding: 0 16px;
  background-color: var(--flute-surface, #FFFFFF);
  border: 1px solid var(--flute-border-subtle, #EAEAE6);
  border-radius: var(--flute-radius-input, 8px);
  font-family: var(--flute-font-body, 'Trigonix', 'Inter', sans-serif);
  font-size: 16px;
  color: var(--flute-text-strong, #131312);
  line-height: 140%;
  transition: border-color 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  margin-bottom: 16px;
}

.systems-page input[type="text"]:focus,
.systems-page input[type="email"]:focus,
.systems-page input[type="password"]:focus {
  outline: none;
  border-color: var(--flute-text-strong, #131312);
  box-shadow: none;
}

/* ---------- Subscription items (preferences page) ---------- */
.systems-page .item,
.systems-page #email-prefs-form .item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--flute-border-subtle, #EAEAE6);
}

.systems-page .item:last-of-type { border-bottom: none; }

.systems-page .item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 4px 0 0 0;
  accent-color: var(--flute-citron-dark, #B1CC29);
  flex-shrink: 0;
  cursor: pointer;
}

/* Subscription title (HubSpot uses span.fakelabel instead of label) */
.systems-page .fakelabel,
.systems-page .fakelabel span,
.systems-page .checkbox-row .fakelabel span[id^="label_"] {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: var(--flute-text-strong, #131312);
  cursor: pointer;
}

.systems-page .item p,
.systems-page .item .item-inner p {
  font-size: 16px;
  color: var(--flute-text-neutral, #676760);
  line-height: 140%;
  margin: 4px 0 0;
}

#email-prefs-form .item.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.systems-page .subscribe-options {
  padding-top: 50px;
}

/* ---------- Password prompt page ---------- */
.password-prompt input[type=password] {
  height: var(--flute-h-lg, 48px) !important;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 0 16px !important;
}

.systems-page #hs-login-widget-remember,
.systems-page #hs-login-widget-remember ~ label {
  display: inline-block;
  margin-bottom: 0;
}

.systems-page #hs_login_reset {
  display: inline-block;
  margin-top: 16px;
}

/* ---------- Membership pages ---------- */
#hs-membership-form a[class*='show-password'] {
  font-size: 14px;
  display: inline-block;
  margin-top: 4px;
}

/* ---------- Submit button — Flute Citron pill ---------- */
.systems-page input[type="submit"],
.systems-page button[type="submit"],
.systems-page .hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--flute-citron, #DDFF33);
  color: var(--flute-text-strong, #131312);
  font-family: var(--flute-font-body, 'Trigonix', 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 400 !important;
  line-height: 140%;
  height: var(--flute-h-md, 40px);
  padding: 0 20px;
  border: 0;
  border-radius: var(--flute-radius-pill, 999px);
  cursor: pointer;
  transition: background-color 0.25s ease;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  margin: 24px 0 0 0;
  width: auto;
  max-width: none;
}

.systems-page input[type="submit"]:hover,
.systems-page button[type="submit"]:hover,
.systems-page .hs-button:hover {
  background-color: var(--flute-citron-dark, #B1CC29);
}

@media (max-width: 480px) {
  .systems-page input[type="submit"],
  .systems-page button[type="submit"],
  .systems-page .hs-button {
    width: 100%;
  }
}

/* ---------- Success / error messages ---------- */
.systems-page .success {
  background-color: #ECFDF3;
  border: 1px solid #C6EBC9;
  border-radius: var(--flute-radius-input, 8px);
  color: #3F7D24;
  display: block;
  margin: 16px 0;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
}

.form-input-validation-message ul.hs-error-msgs,
.systems-page ul.hs-error-msgs {
  padding: 0;
  margin: 4px 0 0;
  list-style: none;
}

.form-input-validation-message ul.hs-error-msgs li,
.systems-page ul.hs-error-msgs li {
  margin: 0;
  color: var(--flute-error, #B70F0F);
  font-size: 14px;
}

/* ---------- Backup unsubscribe page ---------- */
.backup-unsubscribe #email-prefs-form div {
  padding-bottom: 0 !important;
}

.backup-unsubscribe input[type=email] {
  font-size: 16px !important;
  height: var(--flute-h-lg, 48px) !important;
  padding: 0 16px !important;
  margin-bottom: 16px;
}

/* ---------- Search results page ---------- */
.hs-search-results__title {
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
  text-decoration: underline;
  color: var(--flute-text-strong, #131312);
}

.hs-search-results__title:hover {
  text-decoration: none;
}

.hs-search-results__description {
  padding-top: 0.7rem;
  color: var(--flute-text-neutral, #676760);
}

/* ==========================================================================
   ERROR PAGES (404, 500)
   --------------------------------------------------------------------------
   Centered content, decorative giant number behind the title. Requires the
   template wrapper to use:  class="error-page" data-error="404"  (or "500")
   ========================================================================== */
.error-page {
  padding: 80px 24px;
  position: relative;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.error-page h1,
.error-page .error-page__title {
  font-family: var(--flute-font-display, 'Trigonix', 'Inter', sans-serif);
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--flute-text-strong, #131312);
  margin: 0 0 24px;
}

.error-page p {
  font-family: var(--flute-font-body, 'Trigonix', 'Inter', sans-serif);
  font-size: 16px;
  line-height: 140%;
  color: var(--flute-text-neutral, #676760);
  margin: 0 0 24px;
  max-width: 640px;
}

.error-page .button,
.error-page a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--flute-citron, #DDFF33);
  color: var(--flute-text-strong, #131312);
  font-family: var(--flute-font-body, 'Trigonix', 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 400;
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.25s ease;
  margin-top: 16px;
}

.error-page .button:hover,
.error-page a.button:hover {
  background-color: var(--flute-citron-dark, #B1CC29);
}

/* Decorative giant number behind content */
.error-page::before {
  color: #F3F3F1;
  content: attr(data-error);
  font-family: var(--flute-font-display, 'Trigonix', 'Inter', sans-serif);
  font-size: 40vw;
  font-weight: 700;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: -1;
  line-height: 1;
  pointer-events: none;
}

@media (min-width: 1100px) {
  .error-page::before {
    font-size: 22rem;
  }
}

/* ==========================================================================
   HIDE SITE HEADER CTA ON SYSTEM/ERROR PAGES
   --------------------------------------------------------------------------
   Pages without a contact form shouldn't show the "Get started" CTA in
   the header. Covers all system + error page variants.
   ========================================================================== */
body:has(.systems-page) .site-header .button,
body:has(.error-page) .site-header .button,
body:has(.password-prompt) .site-header .button,
body:has([data-hs-template-type="error"]) .site-header .button {
  display: none !important;
}

/* ==========================================================================
   18. TABLET BREAKPOINT (max-width: 1023px)
   ========================================================================== */

@media (max-width: 1023px) {
  }

  .flute-section { padding: 64px 0; }
  .flute-hero    { padding: 64px 0; }

  .flute-hero-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   TABLET CELL PADDING CAP (768-1023px)
   --------------------------------------------------------------------------
   Cap cell vertical padding at 48px on tablet so big desktop pad values
   (100px+ set via HubSpot UI) don't dominate at tablet sizes. This sits
   between the desktop UI value and the 16px mobile cap, giving smoother
   scaling at the three breakpoints (e.g., 100px → 48px → 16px).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  [class*="cell_"][class*="-padding"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* ==========================================================================
   19. MOBILE BREAKPOINT (max-width: 767px)
   --------------------------------------------------------------------------
   Single consolidated mobile block. Order matters here — earlier rules
   set up the basics (typography, grid stacking) and later rules apply
   targeted fixes for known HubSpot quirks.
   ========================================================================== */

@media (max-width: 767px) {
  /* ---- Grid: stack columns ---- */
  .row-fluid {
    display: block !important;
  }
  
  /* Force fullwidth section row-fluid to viewport width on mobile so
   unbreakable content (long headings) can't stretch the container
   past viewport. Combined with overflow-wrap below, this guarantees
   no horizontal overflow regardless of content. */
@media (max-width: 767px) {
  .section--fullwidth .dnd-section > .row-fluid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere;
  }

  /* Word-break for headings inside fullwidth sections at mobile.
     `overflow-wrap: anywhere` is more aggressive than `break-word` —
     will split a single long word if needed to prevent overflow. */
  .section--fullwidth .dnd-section > .row-fluid h1,
  .section--fullwidth .dnd-section > .row-fluid h2,
  .section--fullwidth .dnd-section > .row-fluid h3,
  .section--fullwidth .dnd-section > .row-fluid h4,
  .section--fullwidth .dnd-section > .row-fluid h5,
  .section--fullwidth .dnd-section > .row-fluid h6,
  .section--fullwidth .dnd-section > .row-fluid p {
    overflow-wrap: anywhere !important;
    word-break: break-word;
    hyphens: auto;
  }
}
  
  .row-fluid [class*="span"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 2rem;
  }

  /* Tighter margins on nested stacked columns (eyebrows, labels, etc.) */
  .row-fluid .row-fluid [class*="span"] {
    margin-bottom: 0.5rem;
  }

  /* ---- Typography scale-down ---- */
  h1 {
    font-size: 50px;
    line-height: 1.1;
    margin-bottom: 1rem;
  }
  h2 {
    font-size: 32px;
    line-height: 1.15;
    margin-bottom: 1rem;
  }
  h3 {
    font-size: 24px;
    line-height: 1.35;
    margin-bottom: 0.75rem;
  }
  h4, h5 {
    font-size: 18px;
  }
  p {
    font-size: 16px;
    line-height: 1.5;
  }

  /* Allow display headings to break long words if they overflow */
  .type-display,
  .type-heading-l,
  .type-heading-m,
  h1, h2, h3 {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .type-display {
    font-size: 28px !important;
    line-height: 1.2;
  }

  /* ---- Section / container padding ---- */
  .flute-hero    { padding: 48px 0; }

  /* Hero split collapses to single column */
  .flute-hero-split { grid-template-columns: 1fr; }

  /* ---- Form card padding tightens ---- */
  [data-hsfc-id="Renderer"] .hsfc-Step__Content { padding: 20px; }

  /* ---- Buttons fill width for thumb-friendly tap targets ---- */
  .theme-button-primary,
  .theme-button-secondary,
  .theme-button-ghost,
  .cta_button,
  .hs-button,
  a.button {
    max-width: 320px;
      /* width: 100% intentionally removed — buttons render at natural content
     width on mobile. 320px max prevents overflow for long labels.
     Form submit buttons keep width: 100% via the form-specific rule in
     Section 13 (line ~968). */
  }

  /* ---- Header chrome compresses ---- */
  .site-header__inner {
    min-height: 64px;
    gap: 1rem;
  }

  .site-logo {
    width: 70px;
    height: 20px;
  }

  /* Mobile nav: hidden by default, .is-open shows it (handled by main.js) */
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 80px;
    background: #fff;
    border-top: 1px solid rgba(19, 19, 18, 0.08);
    padding: 1rem 20px 1.5rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .site-nav.is-open { display: flex; }

  /* Hamburger icon — three horizontal bars via ::before + box-shadow */
  .site-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 0;
    color: transparent;
    position: relative;
  }

  .site-nav__toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--flute-text-strong);
    transform: translateY(-50%);
    box-shadow:
      0 -8px 0 var(--flute-text-strong),
      0  8px 0 var(--flute-text-strong);
  }

  /* Phone CTA sizing */
  .flute-header-phone {
    font-size: 13px;
    padding: 8px 14px;
  }

  /* ---- Footer collapses ---- */
  .footer-bottom-wrapper {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .site-footer { padding: 48px 0 32px; }

  /* ---- Rich-text spacing: prevent margins from compounding when
          stacked nested rich-text rows each carry bottom margins ---- */
  .hs_cos_wrapper_type_rich_text,
  .hs_cos_wrapper_widget_type_rich_text {
    margin: 0 !important;
  }

  .hs_cos_wrapper_type_rich_text p:last-child,
  .hs_cos_wrapper_widget_type_rich_text p:last-child,
  .hs-richtext p:last-child {
    margin-bottom: 0 !important;
  }

  .row-fluid .row-fluid [class*="span"] {
    margin-bottom: 0 !important;
  }

  .row-fluid-wrapper.dnd-row {
    margin-bottom: 0 !important;
  }

  .dnd-module {
    padding-bottom: 0 !important;
  }

  /* ---- HubSpot dnd-section quirks ----
     Sections with background colors need their own horizontal padding so
     content doesn't bleed right up to the visible color edge. */
  .dnd-section[class*="-background-color"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Inside background-color sections, neutralize the row-fluid bleed
     pattern (which is meant for non-padded parents). */
  .dnd-section[class*="-background-color"] .row-fluid {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .dnd-section[class*="-background-color"] .row-fluid > [class*="span"] {
    padding-inline: 0 !important;
  }

/* Cell padding (UI-set column padding) — top/bottom always applies at
     mobile. L/R padding zeroes for non-card cells (to prevent large
     desktop padding from squeezing mobile content); card cells (those
     with a background color) keep their editor-set L/R padding so the
     card's internal indent renders. */
  [class*="cell_"][class*="-padding"] {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  [class*="cell_"][class*="-padding"]:not([class*="-background-color"]) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Module padding (UI-set module padding) — zero everything */
  [class*="module_"][class*="-padding"],
  [class*="widget_"][class*="-padding"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Hero card pattern: cells with visible backgrounds need to align with
     sibling image modules (which respect natural content margins). */
  .dnd-section[class*="-max-width-section-centering"] .row-fluid > [class*="-background-color"] {
    margin-left: 20px !important;
    margin-right: 20px !important;
    max-width: calc(100% - 40px) !important;
    box-sizing: border-box !important;
  }

  /* Make image modules fill their cell when in a background-colored cell.
     :has() narrows the selector to only image-containing flexbox-positioning
     modules — buttons (which also have flexbox-positioning) stay untouched. */
  .dnd-section[class*="-max-width-section-centering"] .row-fluid > [class*="-background-color"] .dnd-module[class*="-flexbox-positioning"]:has(.widget-type-linked_image),
  .dnd-section[class*="-max-width-section-centering"] .row-fluid > [class*="-background-color"] .widget-type-linked_image,
  .dnd-section[class*="-max-width-section-centering"] .row-fluid > [class*="-background-color"] .hs_cos_wrapper_type_linked_image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .dnd-section[class*="-max-width-section-centering"] .row-fluid > [class*="-background-color"] img.hs-image-widget {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* Background-colored cells that stack on mobile flow together with no
     visible gap. Cell top/bottom padding is the space *between* cells —
     zero it so adjacent background-colored cells read as one block. */
  .dnd-section[class*="-max-width-section-centering"] .row-fluid > [class*="-background-color"][class*="-padding"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Phone CTA on tight screens */
  @media (max-width: 480px) {
    .flute-header-phone {
      font-size: 12px;
      padding: 6px 12px;
    }
  }
}

/* Container padding switches at 1440px — everything below desktop gets bigger gutters */
@media (max-width: 1439px) {
  .container,
  .flute-container,
  .flute-container-narrow {
    padding-inline: var(--flute-container-pad-mobile);
  }
}

@media (max-width: 767px) {
  .row-fluid {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  .row-fluid h1, .row-fluid h2, .row-fluid h3,
  .row-fluid h4, .row-fluid h5, .row-fluid h6,
  .row-fluid p {
    overflow-wrap: anywhere !important;
    word-break: break-word;
  }
}

@media (max-width: 767px) {
  /* Force ALL columns inside ALL row-fluids to never exceed their parent
     width on mobile. Higher specificity (body + descendant) + !important
     beats anything HubSpot's auto-generated section CSS might apply. */
  body .row-fluid > [class*="span"],
  body .row-fluid > .widget-span,
  body .row-fluid > .dnd-column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 767px) {
  /* Zero the row-fluid negative margins at mobile. The bleed pattern is
     meant to compensate for column padding-inline in multi-column layouts.
     But at mobile, columns stack (display: block on .row-fluid), so there's
     no sibling column gutter to compensate for. Zeroing both prevents the
     asymmetric gap that shifts content left of viewport center. */
  .row-fluid {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Also zero column padding at mobile so stacked content sits at the
     container's gutter edge rather than indented by an extra 20px. */
  .row-fluid > [class*="span"]:not([class*="-background-color"]),
  .row-fluid > .widget-span:not([class*="-background-color"]),
  .row-fluid > .dnd-column:not([class*="-background-color"]) {
    padding-inline: 0 !important;
  }
}

@media (max-width: 767px) {
  /* HubSpot's Button module wraps anchors in .button-wrapper, which is
     display: block by default and stretches its child to full width.
     Constrain the wrapper to inline-flex so the button stays at its
     natural content width. */
  .button-wrapper {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* Also belt-and-suspenders on the button itself in case any other
     rule is winning width. */
  .theme-button-primary,
  .theme-button-secondary,
  .theme-button-ghost,
  .cta_button,
  .hs-button,
  a.button {
    width: auto !important;
    max-width: 320px;
  }
}

/* ==========================================================================
   FLUTE SPACER MODULE — responsive vertical spacing
   --------------------------------------------------------------------------
   Custom theme module (flute-spacer). Authors pick a size via dropdown
   in the module's editor; CSS handles responsive scaling automatically.
   No JS required, no UI padding to set, no specificity battles.

   Size mapping (desktop / tablet / mobile):
     xs  → 32 / 16 / 8
     sm  → 64 / 24 / 12
     md  → 96 / 32 / 16
     lg  → 128 / 48 / 24
     xl  → 160 / 64 / 32
     2xl → 200 / 80 / 40
   ========================================================================== */

.flute-spacer { width: 100%; }

.flute-spacer--xs  { height: 32px;  }
.flute-spacer--sm  { height: 64px;  }
.flute-spacer--md  { height: 96px;  }
.flute-spacer--lg  { height: 128px; }
.flute-spacer--xl  { height: 160px; }
.flute-spacer--2xl { height: 200px; }

@media (max-width: 1023px) {
  .flute-spacer--xs  { height: 16px; }
  .flute-spacer--sm  { height: 24px; }
  .flute-spacer--md  { height: 32px; }
  .flute-spacer--lg  { height: 48px; }
  .flute-spacer--xl  { height: 64px; }
  .flute-spacer--2xl { height: 80px; }
}

@media (max-width: 767px) {
  .flute-spacer--xs  { height: 8px;  }
  .flute-spacer--sm  { height: 12px; }
  .flute-spacer--md  { height: 16px; }
  .flute-spacer--lg  { height: 20px; }   /* was 24 */
  .flute-spacer--xl  { height: 24px; }   /* was 32 */
  .flute-spacer--2xl { height: 28px; }   /* was 40 */
}

/* ===== Architectural default — zero inter-section gap at mobile ===== */
@media (max-width: 767px) {
  /* The last cell in any section's top-level row gets no bottom margin.
     This removes the 32px gap between sections that piles on top of
     cell padding. Inner cells in multi-column rows (which stack at
     mobile and need breathing room between them) still keep their
     32px margin — only the LAST cell loses it. Desktop is unaffected. */
  .dnd-section > .row-fluid > [class*="span"]:last-child {
    margin-bottom: 0;
  }
}

/* ===== Architectural default — spacer-only columns ===== */
/* When a column's only content is a flute-spacer module, zero out the
   column's mobile cell padding and margin. This means authors can drop
   a flute-spacer into a column and trust that its height is the only
   vertical contribution — no padding-field ritual needed.

   Selector reads as: a dnd-column whose ONLY child is a row-fluid-wrapper
   that contains ONE row with ONE module, and that module contains a
   flute-spacer. Cells with mixed content (spacer + text, spacer + image,
   etc.) are unaffected. */

.dnd-column:has(> .row-fluid-wrapper:only-child > .row-fluid > .dnd-module:only-child .flute-spacer) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 767px) {
  .dnd-column:has(> .row-fluid-wrapper:only-child > .row-fluid > .dnd-module:only-child .flute-spacer) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ==========================================================================
   20. VERY SMALL PHONES (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  h3 { font-size: 22px; }
}

/* Force mobile nav hide and hamburger show below 768px. Higher
   specificity (.site-header .site-nav) plus !important to beat any
   rule that's currently winning and keeping the desktop nav visible. */
@media (max-width: 767px) {
  .site-header .site-nav {
    display: none !important;
  }

  .site-header .site-nav.is-open {
    display: flex !important;
  }

.site-header .site-nav__toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  color: transparent !important;
  width: 28px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
}

.site-header .site-nav__toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--flute-text-strong);
  transform: translateY(-50%);
  box-shadow:
    0 -8px 0 var(--flute-text-strong),
    0  8px 0 var(--flute-text-strong);
}
  
/* ==========================================================================
   END OF FILE
   --------------------------------------------------------------------------
   If you're adding new styles, follow the existing section order and
   leave a section comment so the next person can find your rule fast.
   Default to using --flute-* tokens; only hardcode values when no token
   exists, and add the token to section 2 before doing so.
   ========================================================================== */