/* =========================================================
   Core42 — Main stylesheet
   The HubSpot boilerplate's element/component CSS has been
   removed; everything we need lives in the _c42-* files
   below. Reset + normalize + DND-area styles stay so cross-
   browser baselines and HubSpot's drag-and-drop areas keep
   working.
   ========================================================= */

/* Cross-browser baseline */
*, *: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;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * 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
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 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
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, 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;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* 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 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 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;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

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

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * 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, IE 10+, and Firefox.
 */

details {
  display: block;
}

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

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* HubSpot DND area / layout helpers (required for in-editor sections) */
/* Responsive grid */

.row-fluid {
  width: 100%;
}

.row-fluid:before, .row-fluid:after {
  display: table;
  content: '';
}

.row-fluid:after {
  clear: both;
}

.row-fluid [class*='span'] {
  display: block;
  float: left;
  width: 100%;
  min-height: 1px;
  margin-left: 2.127659574%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.row-fluid [class*='span']:first-child {
  margin-left: 0;
}

.row-fluid .span12 {
  width: 99.99999998999999%;
}

.row-fluid .span11 {
  width: 91.489361693%;
}

.row-fluid .span10 {
  width: 82.97872339599999%;
}

.row-fluid .span9 {
  width: 74.468085099%;
}

.row-fluid .span8 {
  width: 65.95744680199999%;
}

.row-fluid .span7 {
  width: 57.446808505%;
}

.row-fluid .span6 {
  width: 48.93617020799999%;
}

.row-fluid .span5 {
  width: 40.425531911%;
}

.row-fluid .span4 {
  width: 31.914893614%;
}

.row-fluid .span3 {
  width: 23.404255317%;
}

.row-fluid .span2 {
  width: 14.89361702%;
}

.row-fluid .span1 {
  width: 6.382978723%;
}

.container-fluid:before, .container-fluid:after {
  display: table;
  content: '';
}

.container-fluid:after {
  clear: both;
}

@media (max-width: 767px) {
  .row-fluid {
    width: 100%;
  }

  .row-fluid [class*='span'] {
    display: block;
    float: none;
    width: auto;
    margin-left: 0;
  }
}

@media (min-width: 768px) and (max-width: 1139px) {
  .row-fluid {
    width: 100%;
  }

  .row-fluid:before, .row-fluid:after {
    display: table;
    content: '';
  }

  .row-fluid:after {
    clear: both;
  }

  .row-fluid [class*='span'] {
    display: block;
    float: left;
    width: 100%;
    min-height: 1px;
    margin-left: 2.762430939%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  .row-fluid [class*='span']:first-child {
    margin-left: 0;
  }

  .row-fluid .span12 {
    width: 99.999999993%;
  }

  .row-fluid .span11 {
    width: 91.436464082%;
  }

  .row-fluid .span10 {
    width: 82.87292817100001%;
  }

  .row-fluid .span9 {
    width: 74.30939226%;
  }

  .row-fluid .span8 {
    width: 65.74585634900001%;
  }

  .row-fluid .span7 {
    width: 57.182320438000005%;
  }

  .row-fluid .span6 {
    width: 48.618784527%;
  }

  .row-fluid .span5 {
    width: 40.055248616%;
  }

  .row-fluid .span4 {
    width: 31.491712705%;
  }

  .row-fluid .span3 {
    width: 22.928176794%;
  }

  .row-fluid .span2 {
    width: 14.364640883%;
  }

  .row-fluid .span1 {
    width: 5.801104972%;
  }
}

@media (min-width: 1280px) {
  .row-fluid {
    width: 100%;
  }

  .row-fluid:before, .row-fluid:after {
    display: table;
    content: '';
  }

  .row-fluid:after {
    clear: both;
  }

  .row-fluid [class*='span'] {
    display: block;
    float: left;
    width: 100%;
    min-height: 1px;
    margin-left: 2.564102564%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  .row-fluid [class*='span']:first-child {
    margin-left: 0;
  }

  .row-fluid .span12 {
    width: 100%;
  }

  .row-fluid .span11 {
    width: 91.45299145300001%;
  }

  .row-fluid .span10 {
    width: 82.905982906%;
  }

  .row-fluid .span9 {
    width: 74.358974359%;
  }

  .row-fluid .span8 {
    width: 65.81196581200001%;
  }

  .row-fluid .span7 {
    width: 57.264957265%;
  }

  .row-fluid .span6 {
    width: 48.717948718%;
  }

  .row-fluid .span5 {
    width: 40.170940171000005%;
  }

  .row-fluid .span4 {
    width: 31.623931624%;
  }

  .row-fluid .span3 {
    width: 23.076923077%;
  }

  .row-fluid .span2 {
    width: 14.529914530000001%;
  }

  .row-fluid .span1 {
    width: 5.982905983%;
  }
}

/* Clearfix */

.clearfix:before, .clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}

/* Visibilty classes */

.hide {
  display: none;
}

.show {
  display: block;
}

.invisible {
  visibility: hidden;
}

.hidden {
  display: none;
  visibility: hidden;
}

/* Responsive visibilty classes */

.visible-phone {
  display: none !important;
}

.visible-tablet {
  display: none !important;
}

.hidden-desktop {
  display: none !important;
}

@media (max-width: 767px) {
  .visible-phone {
    display: inherit !important;
  }

  .hidden-phone {
    display: none !important;
  }

  .hidden-desktop {
    display: inherit !important;
  }

  .visible-desktop {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1139px) {
  .visible-tablet {
    display: inherit !important;
  }

  .hidden-tablet {
    display: none !important;
  }

  .hidden-desktop {
    display: inherit !important;
  }

  .visible-desktop {
    display: none !important;
  }
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0 1rem;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

/* Core42 design tokens — fonts, colors, type, button/input primitives */
/* =========================================================
   Core42 — Design tokens, fonts, and base styles
   Lifted from the design handoff (colors_and_type.css) and
   adapted for HubSpot CMS. Loaded once via main.hubl.css.
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "NB International Pro";
  src: url("https://145316338.fs1.hubspotusercontent-eu1.net/hubfs/145316338/raw_assets/public/core42-theme/images/fonts/NBInternationalPro-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "NB International Pro";
  src: url("https://145316338.fs1.hubspotusercontent-eu1.net/hubfs/145316338/raw_assets/public/core42-theme/images/fonts/NBInternationalPro-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "NB International Pro";
  src: url("https://145316338.fs1.hubspotusercontent-eu1.net/hubfs/145316338/raw_assets/public/core42-theme/images/fonts/NBInternationalPro-Book.ttf") format("truetype");
  font-weight: 350; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "NB International Pro";
  src: url("https://145316338.fs1.hubspotusercontent-eu1.net/hubfs/145316338/raw_assets/public/core42-theme/images/fonts/NBInternationalPro-BookItalic.ttf") format("truetype");
  font-weight: 350; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "NB International Pro";
  src: url("https://145316338.fs1.hubspotusercontent-eu1.net/hubfs/145316338/raw_assets/public/core42-theme/images/fonts/NBInternationalPro-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "NB International Pro";
  src: url("https://145316338.fs1.hubspotusercontent-eu1.net/hubfs/145316338/raw_assets/public/core42-theme/images/fonts/NBInternationalPro-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "NB International Pro";
  src: url("https://145316338.fs1.hubspotusercontent-eu1.net/hubfs/145316338/raw_assets/public/core42-theme/images/fonts/NBInternationalPro-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "NB International Pro";
  src: url("https://145316338.fs1.hubspotusercontent-eu1.net/hubfs/145316338/raw_assets/public/core42-theme/images/fonts/NBInternationalPro-MediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "NB International Pro";
  src: url("https://145316338.fs1.hubspotusercontent-eu1.net/hubfs/145316338/raw_assets/public/core42-theme/images/fonts/NBInternationalPro-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "NB International Pro";
  src: url("https://145316338.fs1.hubspotusercontent-eu1.net/hubfs/145316338/raw_assets/public/core42-theme/images/fonts/NBInternationalPro-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "NB International Pro Mono";
  src: url("https://145316338.fs1.hubspotusercontent-eu1.net/hubfs/145316338/raw_assets/public/core42-theme/images/fonts/NBInternationalPro-Mono.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand colors */
  --c42-forest:        rgb(24, 45, 33);
  --c42-forest-deep:   rgb(29, 44, 34);
  --c42-forest-ink:    rgb(25, 28, 26);
  --c42-ink:           rgb(0, 0, 0);
  --c42-mint:          rgb(72, 222, 147);
  --c42-mint-50:       rgba(72, 222, 147, 0.5);
  --c42-orange:        rgb(255, 77, 0);
  --c42-orange-80:     rgba(242, 131, 13, 0.8);
  --c42-orange-peach:  rgb(255, 207, 186);
  --c42-amber:         rgb(255, 181, 43);

  /* Neutrals */
  --c42-paper:         rgb(241, 237, 232);
  --c42-paper-2:       rgb(245, 242, 239);
  --c42-paper-3:       rgb(246, 243, 239);
  --c42-paper-edge:    rgb(235, 233, 231);
  --c42-paper-edge-2:  rgb(234, 229, 224);
  --c42-white:         rgb(255, 255, 255);

  /* Grays */
  --c42-gray-60:       rgb(150, 150, 150);
  --c42-gray-65:       rgb(152, 152, 152);
  --c42-gray-80:       rgb(170, 162, 151);
  --c42-gray-d9:       rgb(217, 217, 217);
  --c42-gray-bb:       rgb(187, 187, 187);

  /* Semantic */
  --fg-1: var(--c42-forest);
  --fg-2: var(--c42-forest-ink);
  --fg-inv: var(--c42-white);
  --fg-muted: var(--c42-gray-60);
  --fg-accent: var(--c42-orange);
  --fg-highlight: var(--c42-mint);

  --bg-page: var(--c42-white);
  --bg-surface: var(--c42-paper);
  --bg-surface-2: var(--c42-paper-2);
  --bg-dark: var(--c42-forest);
  --bg-ink: var(--c42-forest-ink);
  --bg-accent: var(--c42-orange);
  --bg-highlight: var(--c42-mint);

  --border-hair: rgba(241, 237, 232, 0.3);
  --border-rule: var(--c42-orange);
  --border-field: var(--c42-gray-60);

  /* Typography */
  --font-sans: "NB International Pro", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "NB International Pro Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-hero:      96px;
  --fs-display:   64px;
  --fs-display-s: 50px;
  --fs-h1:        40px;
  --fs-h2:        30px;
  --fs-h3:        24px;
  --fs-body-lg:   20px;
  --fs-body:      16px;
  --fs-body-s:    14px;
  --fs-caption:   13px;
  --fs-micro:     12px;

  --lh-tight:    1.0;
  --lh-snug:     1.1;
  --lh-normal:   1.25;
  --lh-body:     1.5;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-kiss:   -0.005em;
  --tracking-caps:    0.04em;

  /* Radii */
  --radius-pill: 28px;
  --radius-none: 0px;
  --radius-sm:   4px;

  /* Spacing (8pt) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px; --space-40: 160px;

  /* Elevation */
  --shadow-soft: 0 2px 16px rgba(24, 45, 33, 0.06);
  --shadow-card: 0 4px 24px rgba(24, 45, 33, 0.08);

  /* Motion */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --container-max: 1440px;
  --rail-width: 0px;
  --rail-width-expanded: 0px;
  --topbar-h: 0px;

  /* Responsive page padding */
  --page-pad-x: clamp(20px, 6vw, 120px);
}

/* ---------- Base / scope ---------- */
.c42, .c42 * { box-sizing: border-box; }

/* Defensive overflow: nothing in body content (images, iframes, embeds, code
   blocks) should be allowed to push the page wider than the viewport. */
html, body { overflow-x: hidden; max-width: 100%; }
.body-wrapper, .c42-main { overflow-x: hidden; max-width: 100%; }
.c42 img, .c42 video, .c42 iframe, .c42 embed, .c42 object {
  max-width: 100%;
  height: auto;
}
.c42 pre, .c42 code, .c42 .c42-article-body__prose pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.c42 {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Force NB International Pro across the site ----------
   The HubSpot boilerplate's theme-overrides.hubl.css applies the theme's
   global fonts (which default to Merriweather/Lato) directly to body, p,
   and h1–h6 via `body_font.style` and `h*_font.style`. We override here
   with !important so the brand font always wins, regardless of the
   theme settings the boilerplate fields.json ships with. */
html, body, p, li, td, th, label, dt, dd, blockquote, figcaption, cite,
input, textarea, select, button, optgroup,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.menu__link, .header__language-switcher .lang_list_class li a {
  font-family: var(--font-sans) !important;
}
.c42-mono, code, pre, kbd, samp,
.hs-form .hs-input[type=number] {
  font-family: var(--font-mono) !important;
}

/* ---------- Type primitives ---------- */
.c42-hero {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.c42-display {
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}
.c42-h1 { font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-snug); margin: 0; }
.c42-h2 { font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); margin: 0; }
.c42-h3 { font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-normal); margin: 0; }
.c42-body { font-size: var(--fs-body); line-height: 24px; margin: 0; }
.c42-lede { font-size: var(--fs-body-lg); line-height: 28px; }
.c42-caption { font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-muted); }
.c42-mono { font-family: var(--font-mono); font-size: 0.95em; }

/* ---------- Eyebrow (orange caps + top rule) ---------- */
.c42-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 28px;
  color: var(--fg-accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: 400;
  border-top: 1px solid var(--c42-orange);
  padding-top: var(--space-3);
  display: inline-block;
}
.c42-eyebrow--mono {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  border-top-color: var(--c42-orange);
  padding-top: 10px;
}

/* ---------- Buttons (pill) ---------- */
.c42-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  min-height: 38px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.c42-btn:active { transform: scale(0.98); }
.c42-btn--primary   { background: var(--c42-orange);   color: var(--c42-white); }
.c42-btn--primary:hover { background: #e04400; }
.c42-btn--secondary { background: var(--c42-white);    color: var(--c42-orange); }
.c42-btn--secondary:hover { background: var(--c42-paper-edge); }
.c42-btn--ghost     { background: var(--c42-paper-edge); color: var(--c42-forest); }
.c42-btn--ghost:hover { background: var(--c42-paper-edge-2); }
.c42-btn--dark      { background: var(--c42-forest);   color: var(--c42-white); }
.c42-btn--dark:hover { background: var(--c42-forest-deep); }
.c42-btn--block     { width: 100%; }

/* ---------- Inputs ---------- */
.c42-input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--border-field);
  border-radius: 0;
  background: var(--c42-white);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--fg-1);
  outline: none;
  transition: border-color var(--dur-base) var(--ease-out);
}
.c42-input::placeholder { color: var(--fg-muted); }
.c42-input:focus { border-color: var(--c42-orange); }

/* ---------- Rules / dividers ---------- */
.c42-rule       { height: 1px; background: var(--c42-orange); border: 0; margin: 0; }
.c42-rule--mint { height: 2px; background: var(--c42-mint-50); border: 0; margin: 0; }
.c42-rule--hair { height: 1px; background: var(--border-hair); border: 0; margin: 0; }

/* ---------- Layout helpers ---------- */
.c42-shell {
  position: relative;
  background: var(--bg-surface);
  min-height: 100vh;
}
.c42-main {
  margin-left: 0;
  padding-top: 0;
}
.c42-section { padding: 80px var(--page-pad-x); }
.c42-section--paper { background: var(--c42-paper); color: var(--fg-1); }
.c42-section--paper-2 { background: var(--c42-paper-2); color: var(--fg-1); }
.c42-section--forest { background: var(--c42-forest); color: var(--fg-inv); }
.c42-section--forest-ink { background: var(--c42-forest-ink); color: var(--fg-inv); }

.c42-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.c42-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.c42-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }

/* ---------- Utilities ---------- */
.c42-uppercase   { text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.c42-text-accent { color: var(--fg-accent); }
.c42-text-mint   { color: var(--c42-mint); }
.c42-text-inv    { color: var(--fg-inv); }
.c42-bg-forest   { background: var(--c42-forest); color: var(--fg-inv); }
.c42-bg-paper    { background: var(--c42-paper); color: var(--fg-1); }
.c42-bg-ink      { background: var(--c42-forest-ink); color: var(--fg-inv); }

/* ---------- Hover lift (cards) ---------- */
.c42-hover-lift { transition: transform var(--dur-base) var(--ease-out); }
.c42-hover-lift:hover { transform: translateY(-4px); }

/* ---------- Mobile breakpoints ---------- */
@media (max-width: 1024px) {
  :root {
    --fs-hero: 56px;
    --fs-display: 44px;
    --fs-display-s: 36px;
    --fs-h1: 30px;
    --fs-h2: 24px;
  }
  .c42-grid-3, .c42-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  :root {
    --fs-hero: 40px;
    --fs-display: 30px;
    --fs-h1: 24px;
  }
  .c42-grid-2, .c42-grid-3, .c42-grid-4 { grid-template-columns: 1fr; gap: 24px; }
  .c42-section { padding: 48px 20px; }
}

/* HubSpot Form style overrides — embedded forms match Core42 */
/* =========================================================
   Core42 — HubSpot Form style overrides
   ---------------------------------------------------------
   HubSpot forms render inside `.c42` modules with their own
   default classes (.hs-form, .hs-input, .hs-button, .hs-form-field,
   .hs-error-msgs, .legal-consent-container). We override them
   to match Core42's input/button/typography tokens so embedded
   forms inherit the brand without per-instance CSS.
   ========================================================= */

.c42 .hs-form,
.c42 form.hs-form { font-family: var(--font-sans); }

.c42 .hs-form-field { margin-bottom: 16px; }
.c42 .hs-form-field > label,
.c42 .hs-form-field > label > span {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c42-gray-60);
  margin-bottom: 8px;
  font-weight: 400;
}
.c42 .hs-form-field > label .hs-form-required { color: var(--c42-orange); margin-left: 2px; }

.c42 .hs-input {
  width: 100% !important;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--border-field);
  border-radius: 0;
  background: var(--c42-white);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--fg-1);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--dur-base);
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
}
.c42 .hs-input:focus { border-color: var(--c42-orange); }
.c42 .hs-input::placeholder { color: var(--fg-muted); }
.c42 textarea.hs-input { height: auto; min-height: 100px; padding: 12px 16px; }
.c42 select.hs-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23182d21' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
  padding-right: 40px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
/* Hard-lock checkbox + radio dimensions so the generic .hs-input rule
   (which sets width: 100%; height: 50px for text inputs) can't bleed
   onto them. min/max-width and appearance: auto force a real native
   square checkbox in the consent block and elsewhere. */
.c42 input[type="checkbox"],
.c42 input[type="radio"],
.c42 input[type="checkbox"].hs-input,
.c42 input[type="radio"].hs-input,
.c42 .legal-consent-container input[type="checkbox"],
.c42 .hs-form-booleancheckbox-display input[type="checkbox"],
.c42 .inputs-list input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  padding: 0 !important;
  margin: 2px 8px 0 0 !important;
  flex-shrink: 0 !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  appearance: checkbox !important;
  accent-color: var(--c42-orange);
  background: initial !important;
  background-color: initial !important;
  background-image: none !important;
  border: initial !important;
  border-radius: initial !important;
  box-sizing: border-box !important;
}
.c42 input[type="radio"],
.c42 input[type="radio"].hs-input {
  -webkit-appearance: radio !important;
  -moz-appearance: radio !important;
  appearance: radio !important;
}

.c42 .hs-button,
.c42 .hs-submit input[type="submit"],
.c42 .hs-submit input.hs-button,
.c42 .actions input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  min-height: 38px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--c42-orange);
  color: var(--c42-white);
  transition: background var(--dur-base), color var(--dur-base);
  width: auto;
  -webkit-appearance: none;
  appearance: none;
}
.c42 .hs-button:hover,
.c42 .hs-submit input[type="submit"]:hover { background: #e04400; }

.c42 .hs-form fieldset { max-width: 100% !important; }
.c42 .hs-form fieldset.form-columns-1 .input,
.c42 .hs-form fieldset.form-columns-2 .input,
.c42 .hs-form fieldset.form-columns-3 .input { margin-right: 0; }
.c42 .hs-form fieldset.form-columns-2 .hs-form-field { width: calc(50% - 8px); float: left; margin-right: 16px; }
.c42 .hs-form fieldset.form-columns-2 .hs-form-field:nth-child(2n) { margin-right: 0; }
.c42 .hs-form fieldset.form-columns-3 .hs-form-field { width: calc(33.333% - 11px); float: left; margin-right: 16px; }
.c42 .hs-form fieldset.form-columns-3 .hs-form-field:nth-child(3n) { margin-right: 0; }
.c42 .hs-form fieldset::after { content: ""; display: block; clear: both; }

.c42 .hs-form a,
.c42 .hs-richtext a,
.c42 .legal-consent-container a {
  color: var(--c42-orange);
  text-decoration: underline;
}

.c42 .hs-error-msgs,
.c42 .hs-error-msg,
.c42 ul.hs-error-msgs li label {
  color: var(--c42-orange);
  font-family: var(--font-sans);
  font-size: 12px;
  margin-top: 4px;
  list-style: none;
  padding-left: 0;
}
.c42 .hs-input.invalid.error,
.c42 .hs-input.error { border-color: var(--c42-orange); }

/* Legal / consent block — comes from the HubSpot form, not the module.
   The boilerplate's body p {} rule paints these large; force 12px/18px
   on every nested element so the privacy notice and GDPR checkbox
   labels stay legal-text-sized. */
.c42 .legal-consent-container,
.c42 .hs-richtext {
  margin-top: 16px;
  font-size: 12px !important;
  line-height: 18px !important;
  color: var(--fg-muted);
  font-family: var(--font-sans) !important;
}
.c42 .legal-consent-container p,
.c42 .legal-consent-container span,
.c42 .legal-consent-container div,
.c42 .legal-consent-container label,
.c42 .legal-consent-container .hs-richtext,
.c42 .legal-consent-container .hs-richtext p,
.c42 .legal-consent-container .hs-form-booleancheckbox-display,
.c42 .legal-consent-container .hs-form-booleancheckbox-display > span,
.c42 .legal-consent-container .hs-form-booleancheckbox-display p,
.c42 .hs-richtext p,
.c42 .hs-richtext span {
  font-size: 12px !important;
  line-height: 18px !important;
  margin: 0 0 8px !important;
  color: inherit !important;
  font-family: var(--font-sans) !important;
}
.c42 .legal-consent-container .hs-form-booleancheckbox-display { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px !important; }
.c42 .legal-consent-container .hs-form-booleancheckbox-display input[type="checkbox"] {
  margin-top: 2px !important;
  width: 14px !important; height: 14px !important;
  flex-shrink: 0;
  accent-color: var(--c42-orange);
}
.c42 .legal-consent-container .hs-form-booleancheckbox-display > span { margin: 0 !important; }

/* HubSpot wraps the consent items in a <ul><li> — kill the bullet points
   and the indent that the browser default applies. */
.c42 .legal-consent-container ul,
.c42 .legal-consent-container ol,
.c42 .hs-form ul,
.c42 .hs-form ol,
.c42 ul.inputs-list,
.c42 .inputs-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
.c42 .legal-consent-container li,
.c42 .hs-form li,
.c42 ul.inputs-list li,
.c42 .inputs-list li {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  display: list-item;
  list-style-position: outside;
}
.c42 .legal-consent-container li::marker,
.c42 .hs-form li::marker,
.c42 ul.inputs-list li::marker { content: '' !important; }

/* Inline submit message after submission */
.c42 .submitted-message {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--fg-1);
  padding: 24px;
  background: var(--c42-paper-2);
  border: 1px solid var(--c42-paper-edge);
}

/* ---------- Dark contexts (forest / forest-ink) ---------- */
.c42 .c42-section--forest .hs-input,
.c42 .c42-section--forest-ink .hs-input,
.c42-newsletter-card .hs-input,
.c42-hero-detail-gated .hs-input,
.c42-hero-detail-gated__form-panel .hs-input {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}
.c42 .c42-section--forest .hs-input::placeholder,
.c42 .c42-section--forest-ink .hs-input::placeholder,
.c42-newsletter-card .hs-input::placeholder,
.c42-hero-detail-gated .hs-input::placeholder { color: rgba(241,237,232,0.4); }

.c42 .c42-section--forest .hs-form-field > label,
.c42 .c42-section--forest-ink .hs-form-field > label,
.c42-newsletter-card .hs-form-field > label,
.c42-hero-detail-gated .hs-form-field > label,
.c42-hero-detail-gated__form-panel .hs-form-field > label { color: rgba(241,237,232,0.55); }

.c42 .c42-section--forest .legal-consent-container,
.c42 .c42-section--forest-ink .legal-consent-container,
.c42 .c42-section--forest .hs-richtext,
.c42 .c42-section--forest-ink .hs-richtext,
.c42-newsletter-card .legal-consent-container,
.c42-newsletter-card .hs-richtext,
.c42-hero-detail-gated .legal-consent-container,
.c42-hero-detail-gated .hs-richtext { color: rgba(241,237,232,0.7); }

.c42 .c42-section--forest select.hs-input,
.c42 .c42-section--forest-ink select.hs-input,
.c42-newsletter-card select.hs-input,
.c42-hero-detail-gated select.hs-input,
.c42-gate-form--dark select.hs-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
}

/* Dark variant of the gate-form: explicitly recolor inputs (the boilerplate
   was previously paving over them, and now that's gone we need to set the
   dark colors directly here too). */
.c42-gate-form--dark .hs-input,
.c42-gate-form--dark select.hs-input,
.c42-gate-form--dark textarea.hs-input {
  background: rgba(255,255,255,0.06) !important;
  background-color: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}
.c42-gate-form--dark .hs-input::placeholder { color: rgba(241,237,232,0.4) !important; }
.c42-gate-form--dark .hs-form-field > label { color: rgba(241,237,232,0.55) !important; }

.c42-newsletter-card .submitted-message,
.c42-hero-detail-gated .submitted-message {
  background: rgba(255,255,255,0.05);
  border-color: rgba(241,237,232,0.15);
  color: #fff;
}

/* =========================================================
   HSFC — HubSpot Form Components (the new v3+ form renderer
   used by forms created in the new form builder).
   These forms ship with class names like .hsfc-TextInput
   but the supported way to theme them is via the --hsf-*
   CSS custom properties they consume internally. Setting
   CSS class properties does work, but the variables cascade
   through the renderer's high-specificity selectors which
   would otherwise win.
   ========================================================= */

/* Light-context defaults applied to every HSFC form inside .c42.
   Both `--hsf-default-*` and `--hsf-*` are set so HSFC picks
   them up regardless of which one its renderer is reading. */
.c42 {
  /* Inputs */
  --hsf-default-field-input__background-color: var(--c42-white);
  --hsf-default-field-input__border-color: var(--border-field);
  --hsf-default-field-input__border-radius: 0;
  --hsf-default-field-input__border-style: solid;
  --hsf-default-field-input__border-width: 1px;
  --hsf-default-field-input__color: var(--fg-1);
  --hsf-default-field-input__font-family: var(--font-sans);
  --hsf-default-field-input__font-size: var(--fs-body);
  --hsf-default-field-input__padding: 14px 16px;
  --hsf-default-field-input__placeholder-color: var(--fg-muted);
  --hsf-field-input__background-color: var(--c42-white);
  --hsf-field-input__border-color: var(--border-field);
  --hsf-field-input__border-radius: 0;
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-width: 1px;
  --hsf-field-input__color: var(--fg-1);
  --hsf-field-input__font-family: var(--font-sans);
  --hsf-field-input__padding: 14px 16px;
  --hsf-field-input__placeholder-color: var(--fg-muted);

  /* Compact vertical rhythm — keeps the form tight, matching design. */
  --hsf-default-row__vertical-spacing: 6px;
  --hsf-row__vertical-spacing: 6px;

  /* Labels */
  --hsf-default-field-label__color: var(--c42-gray-60);
  --hsf-default-field-label__font-family: var(--font-mono);
  --hsf-default-field-label__font-size: 11px;
  --hsf-default-field-label-requiredindicator__color: var(--c42-orange);
  --hsf-field-label__color: var(--c42-gray-60);
  --hsf-field-label__font-family: var(--font-mono);
  --hsf-field-label__font-size: 11px;
  --hsf-field-label-requiredindicator__color: var(--c42-orange);

  /* Buttons */
  --hsf-default-button__background-color: var(--c42-orange);
  --hsf-default-button__color: var(--c42-white);
  --hsf-default-button__border-color: transparent;
  --hsf-default-button__border-radius: var(--radius-pill);
  --hsf-default-button__border-style: solid;
  --hsf-default-button__border-width: 1px;
  --hsf-default-button__font-family: var(--font-sans);
  --hsf-default-button__font-size: var(--fs-body);
  --hsf-default-button__font-weight: 700;
  --hsf-default-button__padding: 11px 24px;
  --hsf-default-button--hover__background-color: #e04400;
  --hsf-button__background-color: var(--c42-orange);
  --hsf-button__color: var(--c42-white);
  --hsf-button__border-color: transparent;
  --hsf-button__border-radius: var(--radius-pill);
  --hsf-button__border-style: solid;
  --hsf-button__border-width: 1px;
  --hsf-button__font-family: var(--font-sans);
  --hsf-button__font-size: var(--fs-body);
  --hsf-button__font-weight: 700;
  --hsf-button__padding: 11px 24px;
  --hsf-button--hover__background-color: #e04400;
  --hsf-button--hover__color: var(--c42-white);
  --hsf-button--focus__background-color: #e04400;
  --hsf-button--focus__color: var(--c42-white);
}

/* Force button text to render uppercase (Core42 button language) since
   that's controlled by CSS, not a CSS variable. */
.c42 .hsfc-Button { text-transform: uppercase; letter-spacing: var(--tracking-caps); }

/* Dark contexts — newsletter card, gated hero, dark gate-form */
.c42-newsletter-card,
.c42-hero-detail-gated,
.c42-hero-detail-gated__form-panel,
.c42-gate-form--dark {
  --hsf-default-field-input__background-color: rgba(255,255,255,0.06);
  --hsf-default-field-input__border-color: rgba(255,255,255,0.2);
  --hsf-default-field-input__color: #fff;
  --hsf-default-field-input__placeholder-color: rgba(241,237,232,0.4);
  --hsf-default-field-label__color: rgba(241,237,232,0.55);
  --hsf-field-input__background-color: rgba(255,255,255,0.06);
  --hsf-field-input__border-color: rgba(255,255,255,0.2);
  --hsf-field-input__color: #fff;
  --hsf-field-input__placeholder-color: rgba(241,237,232,0.4);
  --hsf-field-label__color: rgba(241,237,232,0.55);
}

/* Newsletter card: full-width submit so it stretches under the input.
   Also zero out HSFC's Step "background" padding/border so the form fills
   the card edge-to-edge — otherwise HSFC's default 40px padding wraps the
   Row + NavigationRow and they end up only 164px wide inside a 244px card.
   Match the original design: 40px tall input, 13px font, 10px gap to
   the SUBSCRIBE button. */
.c42-newsletter-card {
  --hsf-default-button__width: 100%;
  --hsf-button__width: 100%;
  --hsf-default-background__padding: 0;
  --hsf-background__padding: 0;
  --hsf-default-background__border-width: 0;
  --hsf-background__border-width: 0;
  --hsf-default-background__background-color: transparent;
  --hsf-background__background-color: transparent;
  --hsf-default-field-input__padding: 0 12px;
  --hsf-field-input__padding: 0 12px;
  --hsf-default-field-input__font-size: 13px;
  --hsf-field-input__font-size: 13px;
  --hsf-default-row__vertical-spacing: 5px;
  --hsf-row__vertical-spacing: 5px;
}
/* The input itself doesn't read a height variable from HSFC, but we can
   pin a min-height on the rendered class. */
.c42-newsletter-card .hsfc-TextInput { min-height: 40px !important; height: 40px !important; }
/* HSFC NavigationRow defaults to margin-top: calc(vertical-spacing * 2);
   with our 5px spacing that's 10px — exactly the design target. We also
   want the FieldLabel hidden in the newsletter card (the placeholder
   carries the meaning). */
.c42-newsletter-card .hsfc-FieldLabel { display: none !important; }

/* Hard override — HSFC sometimes ships inline-baked themes that win over
   our cascading variables. This guarantees the newsletter button + the
   input fill the form width. The selector matches HSFC's internal
   `[data-hsfc-id=Renderer] .hsfc-Button` specificity (one attribute +
   one class) but adds `.c42-newsletter-card` so we still scope it. */
.c42-newsletter-card .hsfc-Button,
.c42-newsletter-card form .hsfc-Button,
.c42-newsletter-card [data-hsfc-id="Renderer"] .hsfc-Button { width: 100% !important; max-width: 100% !important; display: block !important; }
.c42-newsletter-card .hsfc-TextInput,
.c42-newsletter-card form .hsfc-TextInput,
.c42-newsletter-card [data-hsfc-id="Renderer"] .hsfc-TextInput { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
/* Force every layer of the HSFC form to span its container.
   HSFC's default has a centred fixed-width inner column (~164px in a
   narrow rail), which we don't want — we want the email field and
   submit button to fill the whole newsletter card width. */
.c42-newsletter-card .hsfc-Form,
.c42-newsletter-card .hsfc-FormWrapper,
.c42-newsletter-card .hsfc-Step,
.c42-newsletter-card .hsfc-Row,
.c42-newsletter-card .hsfc-NavigationRow,
.c42-newsletter-card .hsfc-EmailField,
.c42-newsletter-card .hsfc-TextField,
.c42-newsletter-card [data-hsfc-id="Renderer"],
.c42-newsletter-card [data-hsfc-id="Renderer"] > *,
.c42-newsletter-card .hsfc-Step > div { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
.c42-newsletter-card .hsfc-Step { display: flex !important; flex-direction: column; gap: 12px; padding: 0 !important; }
.c42-newsletter-card .hsfc-Row,
.c42-newsletter-card .hsfc-NavigationRow { padding: 0 !important; }

/* ---------- Layout fixes for specific modules ---------- */
.c42-newsletter-split__col .hs-form .hs-button { margin-top: 8px; }
.c42-newsletter-card .hs-button,
.c42-newsletter-card .hs-submit input[type="submit"] { width: 100%; }

/* Prevent the embedded HubSpot form from pushing its container wider than
   the layout column allows. v2.js sometimes injects content with a wider
   intrinsic min-width than the surrounding card; box-sizing + max-width
   keeps everything inside the column. */
.c42-newsletter-card,
.c42-product-cta-card,
.c42-hero-detail-gated__form-panel,
.c42-gate-form { max-width: 100%; min-width: 0; box-sizing: border-box; }
.c42-newsletter-card .hs-form,
.c42-newsletter-card form.hs-form,
.c42-gate-form .hs-form,
.c42-gate-form form.hs-form { max-width: 100%; min-width: 0; }
.c42-newsletter-card .hs-form-field,
.c42-gate-form .hs-form-field { max-width: 100%; min-width: 0; }

/* ---------- Whitepaper gated hero — match the dark mock form (Image #90).
   The existing variable + .hs-input rules above weren't fully winning against
   HubSpot's default form CSS for some prod portals (likely cache/CDN serving
   v3 form CSS with high specificity). This block hammers the visual props
   with !important, scoped to .c42-hero-detail-gated__form-panel only. ----- */
.c42-hero-detail-gated__form-panel form.hs-form,
.c42-hero-detail-gated__form-panel .hs-form { background: transparent !important; }

/* Field labels — mono uppercase muted */
.c42-hero-detail-gated__form-panel .hs-form-field > label,
.c42-hero-detail-gated__form-panel .hs-form-field > label > span {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(241,237,232,0.55) !important;
  margin: 0 0 8px !important;
  display: block !important;
}

/* Inputs — dark forest-ink fill, faint mint border, white text */
.c42-hero-detail-gated__form-panel input.hs-input,
.c42-hero-detail-gated__form-panel select.hs-input,
.c42-hero-detail-gated__form-panel textarea.hs-input {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(241,237,232,0.18) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 14px 16px !important;
  height: auto !important;
  min-height: 48px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.c42-hero-detail-gated__form-panel input.hs-input::placeholder,
.c42-hero-detail-gated__form-panel textarea.hs-input::placeholder {
  color: rgba(241,237,232,0.4) !important;
}
.c42-hero-detail-gated__form-panel input.hs-input:focus,
.c42-hero-detail-gated__form-panel select.hs-input:focus,
.c42-hero-detail-gated__form-panel textarea.hs-input:focus {
  outline: none !important;
  border-color: var(--c42-mint) !important;
  background: rgba(255,255,255,0.09) !important;
}

/* Submit button — full-width orange pill, mono uppercase. Override
   HubSpot's pill-radius default and any inline styles. */
.c42-hero-detail-gated__form-panel .hs-button,
.c42-hero-detail-gated__form-panel .hs-submit input[type="submit"],
.c42-hero-detail-gated__form-panel button.hs-button {
  background: var(--c42-orange) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 16px 28px !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  width: 100% !important;
  max-width: 100% !important;
  cursor: pointer !important;
  transition: background var(--dur-base);
}
.c42-hero-detail-gated__form-panel .hs-button:hover,
.c42-hero-detail-gated__form-panel .hs-submit input[type="submit"]:hover {
  background: #e26100 !important;
}

/* Consent + legal text — keep readable on dark, mint checkbox */
.c42-hero-detail-gated__form-panel .legal-consent-container,
.c42-hero-detail-gated__form-panel .legal-consent-container p,
.c42-hero-detail-gated__form-panel .hs-richtext,
.c42-hero-detail-gated__form-panel .hs-richtext p {
  color: rgba(241,237,232,0.7) !important;
  font-size: 13px !important;
  line-height: 20px !important;
}
.c42-hero-detail-gated__form-panel .legal-consent-container a,
.c42-hero-detail-gated__form-panel .hs-richtext a { color: var(--c42-mint) !important; }
.c42-hero-detail-gated__form-panel input[type="checkbox"] {
  accent-color: var(--c42-mint);
  width: 16px !important;
  height: 16px !important;
}

/* Spacing between rows */
.c42-hero-detail-gated__form-panel .hs-form-field { margin-bottom: 16px !important; }
.c42-hero-detail-gated__form-panel .hs-submit { margin-top: 8px !important; }

/* HSFC v3+ renderer — same look via design tokens. (Existing block at the
   top set defaults; this re-asserts in case the form is rendered with the
   newer builder.) */
.c42-hero-detail-gated__form-panel {
  --hsf-default-button__background-color: var(--c42-orange);
  --hsf-default-button__color: #fff;
  --hsf-default-button__border-radius: 999px;
  --hsf-default-button__width: 100%;
  --hsf-button__background-color: var(--c42-orange);
  --hsf-button__color: #fff;
  --hsf-button__border-radius: 999px;
  --hsf-button__width: 100%;
}
.c42-hero-detail-gated__form-panel .hsfc-Button {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Hide the required-asterisk indicator on labels — fields are all required
   anyway, and the inline form validation tells the user when they miss one.
   Scoped to the gated hero panel; covers both legacy + HSFC class names. */
.c42-hero-detail-gated__form-panel .hs-form-required,
.c42-hero-detail-gated__form-panel .hs-form-field > label > span:has(.hs-form-required),
.c42-hero-detail-gated__form-panel .hsfc-FieldLabel__RequiredIndicator { display: none !important; }
.c42-hero-detail-gated__form-panel .hsfc-FieldLabel::after,
.c42-hero-detail-gated__form-panel .hs-form-field > label > span.hs-form-required::before { content: "" !important; }

/* Required-asterisk hider — second pass. The earlier rule only matched
   .hs-form-required and .hsfc-FieldLabel__RequiredIndicator; HubSpot uses a
   handful of other class names + sometimes injects the * as plain text in a
   wrapping <label> next-line. This block targets every "Required"-named class
   and every variant, scoped to the gated hero panel. */
.c42-hero-detail-gated__form-panel [class*="required" i],
.c42-hero-detail-gated__form-panel [class*="Required"],
.c42-hero-detail-gated__form-panel .hs-form-field > label .hs-form-required,
.c42-hero-detail-gated__form-panel .hs-form-required,
.c42-hero-detail-gated__form-panel label > span.hs-form-required,
.c42-hero-detail-gated__form-panel label .hs-required-indicator,
.c42-hero-detail-gated__form-panel label .required,
.c42-hero-detail-gated__form-panel label > .required,
.c42-hero-detail-gated__form-panel .hsfc-FieldLabel__RequiredIndicator {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
}
/* Some renderers append the asterisk via ::after on the label or its inner
   text span. Force-clear those pseudo elements too. */
.c42-hero-detail-gated__form-panel .hs-form-field > label::after,
.c42-hero-detail-gated__form-panel .hsfc-FieldLabel::after,
.c42-hero-detail-gated__form-panel .hs-form-field > label > span::after {
  content: "" !important;
  display: none !important;
}
/* cache-bust: 2026-04-27-hsfc-design-spec */

/* Shared card + list styles (used by modules and inline templates) */
/* =========================================================
   Core42 — shared card / list styles
   Lifted from c42-resource-grid + c42-resource-list modules
   so templates can render the same markup inline (e.g.
   HubDB-driven directory tabs) and pick up the styling
   even when the modules themselves aren't on the page.
   ========================================================= */

/* ---------- Resource grid (cards) ---------- */
.c42-resource-grid { padding: 60px var(--page-pad-x) 120px; }
.c42-resource-grid__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; margin-bottom: 40px; flex-wrap: wrap;
}
.c42-resource-grid__heading {
  font-size: var(--fs-h1); font-weight: 700;
  letter-spacing: var(--tracking-snug);
  margin: 14px 0 0;
  color: var(--c42-forest-ink);
}
.c42-resource-grid__head-link {
  color: var(--c42-orange);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.c42-resource-grid__list { display: grid; gap: 40px; }

.c42-resource-grid__card {
  display: flex; flex-direction: column;
  background: #fff; color: inherit;
  text-decoration: none;
  overflow: hidden;
}
.c42-resource-grid--case_study .c42-resource-grid__card { background: var(--c42-forest-ink); color: #fff; }

.c42-resource-grid__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--c42-paper-edge);
}
.c42-resource-grid__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.c42-hover-lift:hover .c42-resource-grid__media img { transform: scale(1.04); }
.c42-resource-grid__badge {
  position: absolute; top: 14px; right: 14px;
  background: rgba(24,45,33,0.9); color: #fff;
  padding: 5px 12px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.c42-resource-grid__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.c42-resource-grid__play svg {
  width: 22px; height: 22px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  padding: 16px;
  color: var(--c42-forest-ink);
  box-sizing: content-box;
}

.c42-resource-grid__body {
  padding: 28px 28px 32px;
  flex: 1; display: flex; flex-direction: column;
}
.c42-resource-grid__title {
  font-size: 22px; line-height: 26px; letter-spacing: -0.01em;
  font-weight: 700; margin: 14px 0 12px;
  color: inherit;
  font-family: var(--font-sans);
}
.c42-resource-grid--case_study .c42-resource-grid__title { color: #fff; }

.c42-resource-grid__excerpt {
  font-size: 14px; line-height: 22px;
  color: rgba(25,28,26,0.7);
  margin: 0 0 24px;
  flex: 1;
  font-family: var(--font-sans);
}
.c42-resource-grid__excerpt > * { margin: 0; color: inherit; }
.c42-resource-grid__excerpt a { color: inherit; text-decoration: none; }
.c42-resource-grid--case_study .c42-resource-grid__excerpt { color: rgba(241,237,232,0.85); }

.c42-resource-grid__meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c42-gray-60);
}
.c42-resource-grid__meta-right { color: var(--c42-orange); font-weight: 500; }

.c42-resource-grid__metric { display: flex; align-items: baseline; gap: 10px; margin-top: auto; }
.c42-resource-grid__metric-value {
  font-size: 36px; font-weight: 700; line-height: 1;
  color: var(--c42-mint); letter-spacing: -0.02em;
  font-family: var(--font-sans);
}
.c42-resource-grid__metric-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(241,237,232,0.75);
}

@media (max-width: 1024px) {
  .c42-resource-grid { padding: 48px 24px 64px; }
  .c42-resource-grid__list { grid-template-columns: repeat(2, 1fr) !important; gap: 28px; }
}
@media (max-width: 640px) {
  .c42-resource-grid { padding: 36px 20px 56px; }
  .c42-resource-grid__list { grid-template-columns: 1fr !important; gap: 20px; }
  .c42-resource-grid__heading { font-size: 26px; }
}

/* ---------- Resource list (rows — webinars) ---------- */
.c42-resource-list { padding: 60px var(--page-pad-x) 120px; }
.c42-resource-list__head { margin-bottom: 28px; }
.c42-resource-list__heading {
  font-size: var(--fs-h1); font-weight: 700;
  letter-spacing: var(--tracking-snug);
  margin: 14px 0 0;
  color: var(--c42-forest-ink);
}
.c42-resource-list__row {
  display: grid;
  grid-template-columns: 260px 1fr 180px 140px;
  gap: 32px; align-items: center;
  padding: 24px 20px;
  border-bottom: 1px solid rgba(25,28,26,0.1);
  text-decoration: none; color: inherit;
  transition: background var(--dur-base);
}
.c42-resource-list__row:hover { background: rgba(255,255,255,0.4); }

.c42-resource-list__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c42-paper-edge);
  overflow: hidden;
}
.c42-resource-list__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.c42-resource-list__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.c42-resource-list__play svg {
  width: 18px; height: 18px;
  background: rgba(255,255,255,0.7);
  border-radius: 50%; padding: 14px;
  color: var(--c42-forest-ink);
  box-sizing: content-box;
}

.c42-resource-list__kicker {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c42-orange);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 10px;
}
.c42-resource-list__title {
  font-size: 22px; font-weight: 700; line-height: 26px;
  letter-spacing: -0.01em;
  margin: 0 0 8px; color: var(--c42-forest-ink);
  font-family: var(--font-sans);
}
.c42-resource-list__speaker {
  font-size: 14px; color: var(--c42-gray-60); margin: 0;
  font-family: var(--font-sans);
}

.c42-resource-list__meta {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--c42-forest-ink);
  letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1.6;
}
.c42-resource-list__duration { color: var(--c42-gray-60); }

.c42-resource-list__action { text-align: right; padding-right: 8px; }
.c42-resource-list__badge {
  display: inline-block; padding: 8px 18px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 28px; min-width: 96px; text-align: center;
  border: 1px solid rgba(25,28,26,0.25);
  color: var(--c42-forest-ink);
  font-family: var(--font-sans);
  text-decoration: none;
}
.c42-resource-list__badge--upcoming {
  background: var(--c42-mint);
  color: var(--c42-forest);
  border-color: var(--c42-mint);
}
.c42-resource-list__badge--live {
  background: var(--c42-orange);
  color: #fff;
  border-color: var(--c42-orange);
}
.c42-resource-list__badge--ondemand {
  background: transparent;
  color: var(--c42-forest-ink);
}

@media (max-width: 1024px) {
  .c42-resource-list { padding: 48px 24px 64px; }
  .c42-resource-list__row { grid-template-columns: 200px 1fr; gap: 24px; }
  .c42-resource-list__meta, .c42-resource-list__action { grid-column: 2 / -1; padding: 0; text-align: left; }
}
@media (max-width: 640px) {
  .c42-resource-list__row { grid-template-columns: 1fr; gap: 14px; padding: 20px 0; }
  .c42-resource-list__thumb { width: 100%; }
  .c42-resource-list__meta, .c42-resource-list__action { grid-column: 1; }
}

/* ---------- Eyebrow inside cards (kill underline + ensure orange) ---------- */
.c42-resource-grid__card .c42-eyebrow,
.c42-resource-grid__card .c42-eyebrow--mono,
.c42-resource-list__row .c42-eyebrow,
.c42-resource-list__row .c42-eyebrow--mono {
  text-decoration: none;
  color: var(--c42-orange);
}

/* ---------- Checklist card (inline-rendered on whitepaper pages) ----------
   Mirrors c42-checklist-card.module/module.css so the same markup picks up
   styling when authored inline (no module tag on the page). */
.c42-checklist-card { padding: 32px; display: block; }
.c42-checklist-card--dark { background: var(--c42-forest-ink); color: #fff; }
.c42-checklist-card--light { background: #fff; color: var(--c42-forest-ink); border: 1px solid var(--c42-paper-edge); }

.c42-checklist-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c42-orange);
  margin-bottom: 14px;
}

.c42-checklist-card__list { display: flex; flex-direction: column; gap: 2px; }

.c42-checklist-card__item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(241, 237, 232, 0.15);
  font-size: 13px;
  line-height: 20px;
}
.c42-checklist-card--light .c42-checklist-card__item {
  border-bottom-color: var(--c42-paper-edge);
  color: rgba(25, 28, 26, 0.85);
}
.c42-checklist-card--dark .c42-checklist-card__item {
  color: rgba(241, 237, 232, 0.85);
}

.c42-checklist-card__check { flex-shrink: 0; margin-top: 3px; }
.c42-checklist-card__text { flex: 1; }

@media (max-width: 1024px) {
  .c42-checklist-card { padding: 28px; }
}
@media (max-width: 640px) {
  .c42-checklist-card { padding: 24px; }
  .c42-checklist-card__item { font-size: 13px; }
}