/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* ============================================
   DESIGN TOKENS - Centralized UI Variables
   ============================================ */

/* Brand Colors */


































/* Beige surface system */



/* CTA — primary buttons hover to a clearly readable dark grey
   instead of the previous near-black (#1A1A1A) which read as
   "no change" against the black resting state. */



/* Semantic text */




/* Gray Scale for UI Elements */












/* Green Scale */






/* Blue Scale (for links and accents) */




/* Utility Colors */






/* Text Colors */




/* Background Colors */








/* Spacing Scale (based on 8px grid) */








/* Font Families */








/* Font Sizes (legacy generic scale — prefer rebrand type scale below) */









/* Font Weights */





/* Line Heights */




/* ============================================
   REBRAND TYPE SCALE (Single Source of Truth)
   Use these tokens in every template/module.
   ============================================ */

/* H1 — hero headline */




/* H2 — section heading */




/* H2 small — minor section */




/* H3 — large card / subheading */




/* H3 card — pricing tier name, feature card */




/* Body */




/* Body large — subhead, intro paragraph */




/* Button */




/* Mobile breakpoint type overrides (≤850px) */









/* ============================================
   SURFACE SYSTEM
   Semantic backgrounds for sections/cards.
   Use these instead of raw color tokens to
   keep visual hierarchy consistent.
   ============================================ */

       /* page wrapper bg — unified beige across the site */
    /* hero / feature section */
       /* feature card (flat on section) */
    /* card requiring extra contrast over beige_light */
     /* sub-feature card */
         /* FAQ row — white card on beige section (Figma 1025:15222) */

/* Surface borders — subtle separation when shadow is removed */


/* Border Radius */









/* Transitions */




/* Shadows */




/* Z-Index Scale */






/* ============================================
   CSS CUSTOM PROPERTIES
   Mirror HubL tokens as CSS variables so module
   CSS files (which DON'T process HubL) can use
   the same single source of truth via var(--name).
   This block is emitted globally via theme-overrides.css.
   ============================================ */
:root {
  /* Brand colors */
  --harvest-orange: rgba(250, 93, 0, 100%);
  --harvest-orange-10: rgba(250, 93, 0, 10%);
  --harvest-coral: #FB9569;
  --harvest-apricot: #FEA986;
  --black: #000000;
  --pure-white: #ffffff;
  --warm-white: rgba(255, 248, 241, 100%);
  --beige-light: #FBF5F0;
  --beige-dark: #F3EBE4;
  --green-bright: #23a40c;

  /* Smokey charcoal scale */
  --smokey-charcoal: rgba(29, 30, 28, 100%);
  --smokey-charcoal-80: rgba(29, 30, 28, 80%);
  --smokey-charcoal-60: rgba(29, 30, 28, 60%);
  --smokey-charcoal-40: rgba(29, 30, 28, 40%);
  --smokey-charcoal-10: rgba(29, 30, 28, 10%);

  /* Semantic text */
  --text-nav: #6A696A;
  --text-secondary: #8B8B8B;
  --text-body-dark: #2C222D;

  /* Surfaces */
  --surface-page: #FBF5F0;
  --surface-section: #FBF5F0;
  --surface-card: #FBF5F0;
  --surface-card-alt: #ffffff;
  --surface-subcard: #F3EBE4;
  --surface-faq: #ffffff;
  --border-card: rgba(29, 30, 28, 10%);

  /* Typography */
  --font-besley: "Besley", Georgia, "Times New Roman", serif;
  --font-muoto: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --fs-h1: 70px;
  --ls-h1: -2.8px;
  --lh-h1: 1.1;
  --fs-h2: 50px;
  --ls-h2: -2px;
  --lh-h2: 1.1;
  --fs-h2-sm: 30px;
  --ls-h2-sm: -0.9px;
  --lh-h2-sm: 1.2;
  --fs-h3: 26px;
  --ls-h3: -0.78px;
  --lh-h3: 1.3;
  --fs-h3-card: 22px;
  --ls-h3-card: -0.66px;
  --lh-h3-card: 1.2;
  --fs-body: 16px;
  --ls-body: -0.32px;
  --lh-body: 1.5;
  --fs-body-lg: 19px;
  --ls-body-lg: -0.57px;
  --lh-body-lg: 1.4;
  --fs-btn: 17px;
  --ls-btn: -0.17px;
  --fw-btn: 500;

  /* Radii */
  --radius-card: 20px;
  --radius-pill: 30px;
  --radius-button: 30px;
  --radius-full: 50%;

  /* Transitions */
  --transition-fast: 0.2s;
  --transition-base: 0.3s;

  /* Hosted asset URLs (for module CSS background-image) */
  --asset-check-bullet-coral: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/images/icons/check-bullet-coral.svg');
  --asset-check-bullet-black: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/images/icons/check-bullet-black.svg');
  --asset-check-bullet: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/images/icons/check-bullet.svg');
}

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

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

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

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

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

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

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

body {
  margin: 0;
}

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

::selection {
  background: rgba(250, 93, 0, 30%); /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: rgba(250, 93, 0, 30%); /* Gecko Browsers */
}

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

/* Main */

/* Nav-clearance offset. Rebrand fixed header (.rb-nav-wrap) renders
   at ~105px desktop / ~65px mobile; main content slides behind it
   otherwise. Keep this tight — any additional breathing room should
   be added by the template's own hero/first-section padding. */
main {
    padding-top: 105px;
}

@media (max-width: 850px) {
    main {
        padding-top: 65px;
    }
}

/* Basic Layout Components */

section > .content-wrapper {
  padding-top: 100px;
  padding-bottom: 100px;
}

section > .content-wrapper.first-wrapper {
  padding-top: 60px;
}

section > .content-wrapper.reduced-padding {
  padding-top: 75px;
  padding-bottom: 75px;
}

section > .content-wrapper.no-padding {
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 850px) {
  section > .content-wrapper {
    padding-top: 75px;
    padding-bottom: 75px;
  }

  section > .content-wrapper.first-wrapper {
    padding-top: 65px;
  }

  section > .content-wrapper.reduced-padding {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}



/* Responsive Grid */

.row-fluid {
    width: 100%;
    *zoom: 1;
}


.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%;
    *margin-left: 2.0744680846382977%;
    -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%;
    *width: 99.94680850063828%;
}

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

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

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

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

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

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

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

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

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

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

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

.container-fluid {
    *zoom: 1;
}

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

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

@media (max-width: 850px) {
    .row-fluid {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
    }

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

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

    .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%;
        *margin-left: 2.709239449638298%;
        -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%;
        *width: 99.9468085036383%;
    }

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

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

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

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

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

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

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

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

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

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

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

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

    .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%;
        *margin-left: 2.510911074638298%;
        -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%;
        *width: 99.94680850063829%;
    }

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

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

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

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

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

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

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

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

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

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

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

/* Clearfix */

.clearfix {
    *zoom: 1;
}

.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: 850px) {
    .visible-phone {
        display: inherit !important;
    }

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

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

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

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

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

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

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

/* Flexbox */

.flex {
	display: flex;
}

@media screen and (max-width: 850px) {
	.flex {
		flex-direction: column;
	}
}

.flex-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-left: -1.5%;
	margin-right: -1.5%;
}

.flex-row.no-spacing {
  margin-left: 0;
  margin-right: 0;
}

.flex-row.no-spacing .flex-col {
  padding: 0;
  flex-basis: 50%;
}

.flex-row.no-spacing .flex-col.flex-col-left {
  padding-right: 40px;
}

@media screen and (max-width: 850px) {
	.flex-row {
		flex-direction: column;
	}
}

.flex-col {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0 1.5%;
}

@media screen and (max-width: 850px) {
	.flex-col {
		padding: 15px 1.5%;
	}
}

.flex-row.flex-row-2 {
  margin-left: -2%;
  margin-right: -2%;
}

.flex-row.flex-row-2 .flex-col {
  padding-left: 2%;
  padding-right: 2%;
}

.flex-row-1-3 .flex-col {
  flex-basis:33.33%;
  min-width: 0;
}

.flex-row-1-3 .flex-col.col-large {
  flex-basis:66.66%;
  min-width: 0;
}

.flex-row-1-4 .flex-col {
  flex-basis:25%;
  min-width: 0;
}

.flex-row-1-4 .flex-col.col-large {
  flex-basis: 75%;
  min-width: 0;
}

@media all and (-ms-high-contrast: none) {
	.flex-col {
		align-items: stretch;
	}
}

.flex-direction-row {
	flex-direction: row;
}

.flex-direction-column {
	flex-direction: column;
}

.flex-reverse-order {
	order: -1;
}

@media screen and (max-width: 850px) {
	.flex-reverse-order {
		order: 0;
	}
}

.justify-center {
	justify-content: center;
}

.justify-space-between {
	justify-content: space-between;
}

.align-items-start {
	align-items: flex-start;
}

.align-items-center {
	align-items: center;
}

.align-items-end {
	align-items: flex-end;
}

.align-items-stretch {
	align-items: stretch;
}


/* Responsive Images */

.responsive-image {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 850px) {
  .desktop-only {
    display: none;
  }
}

/* HubSpot Editor Layout Overrides */

.hs_cos_wrapper_type_image {
  font-size: 0;
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 20px;
}

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

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

.dnd-section .dnd-column {
  padding: 0 20px;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}
/* Surface utilities — beige backgrounds & cards available to templates and modules */

.bg-beige-light {
  background-color: #FBF5F0;
}

.bg-beige-dark {
  background-color: #F3EBE4;
}

.bg-warm-wrap {
  background-color: rgba(255, 248, 241, 100%);
}

.card-beige-light,
.card-beige-dark {
  border-radius: 20px;
  box-shadow: none;
}

.card-beige-light {
  background-color: #FBF5F0;
}

.card-beige-dark {
  background-color: #F3EBE4;
}

.faq-row-beige {
  background-color: #FBF5F0;
  border-radius: 20px;
}

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

/* Muoto VAR — variable font (single file covers full weight axis 100→900).
   Listed first so it wins over the legacy MuotoWeb static faces below,
   which had a +100 weight shift bug (e.g. font-weight:500 loaded Regular). */
@font-face {
  font-family: "Muoto VAR";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/fonts/muoto/MuotoVAR.woff2') format("woff2-variations"),
       url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/fonts/muoto/MuotoVAR.woff2') format("woff2");
}

@font-face {
  font-family: "Muoto VAR";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/fonts/muoto/MuotoVAR-Italic.woff2') format("woff2-variations"),
       url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/fonts/muoto/MuotoVAR-Italic.woff2') format("woff2");
}

@font-face {
  font-family: "MuotoWeb";
  font-style: normal;
  font-weight: 600;
  src: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/fonts/muoto/muoto-medium.woff2') format("woff2");
}

@font-face {
  font-family: "MuotoWeb";
  font-style: normal;
  font-weight: 500;
  src: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/fonts/muoto/muoto-regular.woff2') format("woff2");
}

@font-face {
  font-family: "MuotoWeb";
  font-style: italic;
  font-weight: 500;
  src: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/fonts/muoto/muoto-italic.woff2') format("woff2");
}

@font-face {
  font-family: "MuotoWeb";
  font-style: normal;
  font-weight: 400;
  src: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/fonts/muoto/muoto-light.woff2') format("woff2");
}

@font-face {
  font-family: "MuotoWeb";
  font-style: italic;
  font-weight: 400;
  src: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/fonts/muoto/muoto-light-italic.woff2') format("woff2");
}

@font-face {
  font-family: "Monarch";
  font-style: normal;
  font-weight: 500;
  src: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/fonts/monarch/monarch.woff2') format("woff2");
}

@font-face {
  font-family: "MuotoWeb";
  font-style: normal;
  font-weight: 700;
  src: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/fonts/muoto/muoto-bold.woff2') format("woff2");
}

@font-face {
  font-family: "MuotoWeb";
  font-style: normal;
  font-weight: 900;
  src: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/fonts/muoto/muoto-black.woff2') format("woff2");
}


body {
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #2C222D;
  line-height: 1.4;
  word-break: break-word;
  text-wrap: pretty;
}

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

/* Paragraphs */

p {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 1.4rem;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


p.large-type {
  font-size: 1.1rem;
}

.extra-lead {
  line-height: 1.5;
}

/* Anchors */

a {
  cursor: pointer;
  text-decoration: none;
  color: rgba(250, 93, 0, 100%);
}

a:hover,
a:focus {
  text-decoration: underline;
}


a.button:hover,
a.button:focus,
a.hs-button:hover,
a.hs-button:focus,
a.cta:hover,
a.cta:focus,
a.fcta:hover,
a.fcta:focus,
.rb-nav-wrap a:hover,
.rb-nav-wrap a:focus {
  text-decoration: none;
}

a.orange-link {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
  transition: border 0.2s;
}

a.orange-link:hover {
  border-color: rgba(250, 93, 0, 100%);
}

a.icon-link {
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  color: rgba(29, 30, 28, 100%);
}

a.icon-link img {
  opacity: 0.8;
}

a.icon-link span {
  border-bottom: 1px solid rgba(29, 30, 28, 20%);
  color: rgba(29, 30, 28, 80%);
  margin-left: 5px;
  transition: all 0.2s;
  top: -7px;
  padding-bottom: 2px;
  position: relative;
}

a.icon-link:hover span {
  color: rgba(29, 30, 28, 100%);
  border-color: rgba(29, 30, 28, 100%);
}

a.text-link {
  border-bottom: 1px solid rgba(29, 30, 28, 20%);
  color: rgba(29, 30, 28, 60%);
  transition: all 0.2s;
  position: relative;
  font-size: 16px;
}

.text-link-current {
  color: rgba(29, 30, 28, 60%);
  transition: all 0.2s;
  font-size: 16px;
  cursor: default;
}

a.text-link:hover,
a.text-link:focus {
  color: rgba(29, 30, 28, 100%);
  border-color: rgba(29, 30, 28, 100%);
  text-decoration: none;
}



/* Headings */

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin: 0 0 20px;
  line-height: 1.2;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
.h1 {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 70px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -2.8px;
}

h2,
.h2 {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 50px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -2px;
}

.h2-small {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.9px;
}

h3,
.h3 {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.78px;
}

.h3-card {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.66px;
}

h4,
.h4 {
  line-height: 1.5;
}

h1.hero-headline,
.h1.hero-headline {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 70px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -2.8px;
  margin-bottom: 20px;
}

.sponsorship-landing .intro h1 {
  font-family: "Monarch", Georgia, "Times New Roman", serif;
}

@media (max-width: 850px) {

  /* using #main-content to elevate specificity without resorting to !important for mobile */
  #main-content h1,
  #main-content .h1 {
    font-size: 44px;
    letter-spacing: -1.76px;
  }

  #main-content h1.hero-headline,
  #main-content .h1.hero-headline {
    font-size: 48px;
    letter-spacing: -1.92px;
  }

  #main-content h2,
  #main-content .h2 {
    font-size: 36px;
    letter-spacing: -1.44px;
  }

  #main-content h3,
  #main-content .h3 {
    font-size: 24px;
    letter-spacing: -0.72px;
  }

  #main-content h4,
  #main-content .h4 {
    font-size: 22px;
  }
}

h2 strong {
  font-weight: 400;
  color: rgba(250, 93, 0, 100%);
}

.subheading {
  font-weight: 400;
}

.eyebrow,
.section-label {
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 400;
  color: rgba(250, 93, 0, 100%);
  margin-bottom: 18px;
  text-transform: none;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}

.text-large {
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -0.57px;
}

.text-body-dark {
  color: #2C222D;
}

.text-nav {
  color: #6A696A;
}

.text-secondary {
  color: #8B8B8B;
}

.center,
.text-center {
  text-align: center;
}

/* Font Modifiers */

.small-text,
.small-text p {
  font-size: 18px;
}

.light-text {
  color: rgba(29, 30, 28, 60%);
}

.orange-text {
  color: rgba(250, 93, 0, 100%);
}

.white-text {
  color: #fff;
}

.green-text {
  color: #21A5A0;
}

.blue-text {
  color: #3d9dc1;
}

.red-text {
  color: #cb5c5b;
}

.yellow-text {
  color: #f18d2a;
}

.medium-text {
  color: rgba(29, 30, 28, 60%);
}

/* Lists */

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

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

ul.no-list {
  list-style: none;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

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

.bullet-list li {
  margin-bottom: 10px;
}

.bullet-list li:before {
  content: "—";
  color: rgba(250, 93, 0, 100%);
  padding-right: 10px;
  position: relative;
  top: -2px;
}

/* Blockquotes */

blockquote {
  margin: 0;
}

blockquote p {
  font-size: 30px;
  font-weight: 400;
  position: relative;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
  text-indent: 24px;
}

blockquote p:before {
  content: "";
  position: absolute;
  font-size: 140%;
  top: 12px;
  left: 0;
  width: 17px;
  height: 13px;
  background-image: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/images/icons/quote-open.svg');
  background-repeat: no-repeat;
}

blockquote p:after {
  content: "";
  position: absolute;
  font-size: 140%;
  margin-top: 10px;
  margin-left: 5px;
  width: 17px;
  height: 13px;
  background-image: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/images/icons/quote-close.svg');
  background-repeat: no-repeat;
}

.quote-container p {
  margin-bottom: 0;
}

@media (max-width: 850px) {
  blockquote p {
    font-size: 24px;
    line-height: 1.3;
  }

  blockquote p:before {
    top: -3px;
  }

  blockquote p:before {
    margin-top: 6px;
  }
}

/* Horizontal rules */

hr {
  background-color: #CCC;
  border: none;
  color: #CCC;
  height: 1px;
}

/* Image alt text */

img {
  font-size: 14px;
  word-break: normal;
}

/* Font Smoothing */

.font-smoothing {
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nowrap {
  white-space: nowrap;
}

@media (max-width: 850px) {
  .nowrap {
    white-space: normal;
  }
}


/* Details */

.headline-indent-fix {
  text-indent: -2px;
}
button,
.button {
  cursor: pointer;
  display: inline-block;
  font-size: 0.92rem;
  text-align: center;
  transition: background 0.15s linear;
  white-space: normal;
}

button:disabled,
.button:disabled {
  background-color: #D0D0D0;
  border-color: #D0D0D0;
  color: #E6E6E6;
}

button:hover,
button:focus,
.button:hover,
.button:focus {
  text-decoration: none;
}

button:active,
.button:active,
.hs-button:active {
  filter: brightness(0.8);
  text-decoration: none;
  transition: none;
}

.button,
.hs-button {
  background-color: #000000;
  border: 1px solid #000000;
  border-radius: 30px;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.17px;
  line-height: normal;
  min-height: 53px;
  padding: 8px 20px;
  position: relative;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  -webkit-appearance: none;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 850px) {
  .button {
    width: 100%;
  }
}

.button-small {
  font-size: 16px;
  min-height: 0;
  padding: 10px 15px;
}

.button:hover,
.button:focus,
.hs-button:hover,
.hs-button:focus {
  background-color: #4F4F4F;
  border-color: #4F4F4F;
  text-decoration: none;
}

.button-trial,
.hs-button.primary {
  background-color: #000000;
  border-color: #000000;
}

.button-trial:hover,
.button-trial:focus,
.hs-button.primary:hover,
.hs-button.primary:focus {
  background-color: #4F4F4F;
  border-color: #4F4F4F;
}


.button-secondary {
  color: #000000;
  border-color: #999999;
  background: transparent;
  box-shadow: none;
}

.button-secondary:hover,
.button-secondary:focus {
  background: rgba(0, 0, 0, 0.04);
}

.button-trial-secondary {
  color: rgba(250, 93, 0, 100%);
  border-color: rgba(250, 93, 0, 100%);
  background: transparent;
  box-shadow: none;
}

.button-trial-secondary:hover,
.button-trial-secondary:focus {
  background: rgba(250, 93, 0, 20%);
}

.button-white:hover,
.button-empty:focus {
  background: #ffffff40;
}

.button-white:active {
  background: #ffffff60;
  transition: none;
}

.button-white {
  border-color: #fff;
  color: #fff;
}

.button-arrow,
.button-arrow:hover,
.button-arrow:focus,
.button-arrow:active  {
  background-image: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/images/icons/arrow-right-small-white.svg');
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
}

.button-primary {
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #188433;
  border: 1px solid #188433;
  color: #fff;
  font-size: 18px;
}

.button-primary:hover,
.button-primary:focus {
  background: ;
  border: 1px solid ;
  color: #fff;
}

.button-pill,
.button-pill:hover,
.button-pill:focus,
.button-pill:active  {
  color: rgba(0,0,0, 0.6);
  box-shadow: none;
  border-width: 2px;
  border-color: rgba(0,0,0, 0.15);
  border-radius: 50px;
  background: #ffffff url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/images/icons/arrow-right-small-orange.svg');
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-left: 20px;
  padding-right: 38px;
}

.button-pill:hover {
  background-color: rgba(0,0,0, 0.05);
}

.button-pill:active {
  background-color: rgba(0,0,0, 0.1);
  transition: none;
}
/* Form fields */

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

/* Labels */

form label {
  display: block;
  font-size: 18px;
  margin-bottom: 8px;
}

/* Help text - legends */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

form input[type=text],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  background-color: #FFF;
  border: 1px solid #BBBBBB;
  border-radius: 3px;
  display: inline-block;
  font-size: 0.875rem;
  padding: 14px 22px;
  width: 100%;
  font-weight: 500;
}

form textarea {
  padding: 22px;
}

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

/* Inputs - checkbox/radio */

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

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

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

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

/* Inputs - datepicker */

.hs-dateinput {
  position: relative;
}

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

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

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

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: #FFF;
}

/* Inputs - file picker */

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

/* Headings and text */

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

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

/* GDPR */

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

/* Validation */

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

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

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

/* Submit button */

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

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}
/* Table */

table {
  border: 1px solid;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table Cells */

th,
td {
  border: 1px solid;
  padding: 0.75rem;
  vertical-align: top;
}

/* Table Header */

thead th,
thead td {
  border-bottom: 2px solid;
  vertical-align: bottom;
}

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

/* Header - Theme Settings */



/* Header - HubSpot Overrides */

.submenu.level-1 {
  font-size: 0;
}
#hs_cos_wrapper_navigation-primary {
  font-size: 0;
}

/* Header container */

.header__container {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  height: 90px;
  align-items: center;
}

.header-wrapper {
  padding: 0 20px;
}

.header__row-1 {
  padding-top: 20px;
}

.header__row-1,
.header__row-2 {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.logo-mobile {
  display: none;
}

@media (max-width: 850px) {
  .logo-mobile {
    display: block;
  }
  .logo-desktop {
    display: none;
  }
  .header {
    padding-bottom: 65px;
  }

  .header-wrapper {
    position: fixed;
    width: 100%;
    background: rgba(29, 30, 28, 100%);
    transition: all 0.2s;
  }
  .header__container {
    flex-direction: column;
    align-items: stretch;
    height: 65px;
    border-color: transparent;
  }

  .header__column {
    position: relative;
  }

  .header__row-1 {
    padding-top: 0;
  }

  .header__row-2 {
    justify-content: center;
    padding: 30px;
  }
}


/* Header - Main Styles
   NOTE: All selectors below are scoped to `.header` (the class set on the
   legacy header partial — see src/templates/partials/header.html) instead
   of the `<header>` tag. This prevents these rules from leaking into other
   <header> elements on the page (e.g. .rb-nav-wrap from the rebrand). */

.header {
  position: fixed;
  top: 0;
  width: 100%;
  background: transparent;
  transition: all 0.2s;
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  z-index: 1000;
}

.header.add-shadow {
  background: #fff;
  box-shadow: 0 1px 3px #00000020;
  transition: all 0.2s;
}

.header.add-shadow .header__container {
  border-color: transparent;
  transition: all 0.2s;
}

.header .navigation-primary a,
.header .header__logo,
.header .nav-sign-up,
.header .header-actions a {
  transition: color 0.2s, background 0.2s;
}

.header.add-shadow .navigation-primary a,
.header.add-shadow .header__logo,
.header.add-shadow .nav-sign-up,
.header.add-shadow .header-actions a {
  transition: color 0.2s, background 0.2s;
}


/* Header - First Row */
.row-number-1 {
  padding-top: calc(100px + 140px) !important;
  margin-top: -140px;
}
@media (max-width: 850px) {
  .row-number-1 {
    padding-top: calc(100px + 100px) !important;
    margin-top: -120px;
  }
}


/* Header - Navigation */


.navigation-primary a {
  line-height: 32px;
}

.navigation-primary a,
.header-actions a {
  font-size: 17px;
  font-weight: 500;
  margin: 0 20px 0 0;
  transition: background 0.2s;
  text-decoration: none;
  box-sizing: border-box;
  color: rgba(29, 30, 28, 100%);
}

.navigation-primary a:hover,
.header-actions a:hover,
.navigation-primary a.active-item {
  color: rgba(250, 93, 0, 100%);
}

.navigation-primary a.active-item {
  color: rgba(250, 93, 0, 100%);
  border-bottom: 1px solid rgba(250, 93, 0, 100%);
  padding-bottom: 2px;
}

.navigation-primary a:focus,
.header-actions a:focus {
  color: rgba(250, 93, 0, 100%);
}

.navigation-primary a:active,
.header-actions a:active {
  transition: none;
  color: rgba(250, 93, 0, 100%);
}

@media (max-width: 1025px) {
  .navigation-primary a,
  .header-actions a {
    font-size: 14px;
  }
}
@media (max-width: 915px) {
  .navigation-primary a,
  .header-actions a {
    font-size: 14px;
  }

  .header-actions a.nav-sign-up {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 850px) {
  .navigation-primary a {
    padding: 15px 10px;
    color: rgba(255, 248, 241, 100%);
    margin: 0;
    transition: none;
    font-size: 18px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255, 15%);
  }

  .navigation-primary {
    border-top: 1px solid rgba(255,255,255, 15%);
    margin-top: 20px;
    -webkit-font-smoothing: antialiased;
  }

  .header-actions a {
    background: rgba(255, 255, 255, 10%);
    border-radius: 10px;
    color: rgba(255, 248, 241, 100%);
    padding: 10px;
    font-size: 18px;
    font-weight: 600;
  }

  .navigation-primary a:hover,
  .navigation-primary a:focus,
  .navigation-primary a.active-item {
    background: rgba(255, 255, 255, 5%);
    color: #fff;
    border-color: rgba(255,255,255, 15%);
  }

  .navigation-primary a:active,
  .header-actions a:active {
    background: rgba(255, 255, 255, 5%);
    color: #fff;
  }

  .header-actions-mobile a {
    margin: 0 1%;
  }

  .header-actions a {
    display: block;
  }
}





/* Trial Button */

.header-actions a.nav-sign-up {
  margin-left: 8px;
  font-weight: 600;
  font-size: 19px;
  padding: 12px 20px;
  color: rgba(255, 248, 241, 100%);
  margin: 0;
}


/* Navigation Skipper */

.header__skip {
  height: 1px;
  left: -1000px;
  overflow: hidden;
  position: absolute;
  text-align: left;
  top: -1000px;
  width: 1px;
}

.header__skip:hover,
.header__skip:focus,
.header__skip:active {
  height: auto;
  left: 0;
  overflow: visible;
  top: 0;
  width: auto;
}

/* Logo */

.header__logo {
  align-items: center;
  display: flex;
  height: auto;
  margin-right: 25px;
  color: rgba(250, 93, 0, 100%);
  padding-right: 25px;
  border-right: 1px solid rgba(29,30,28,7%);
  padding-top: 5px;
  padding-bottom: 7px;
}

.header__logo a,
.header__logo a:hover,
.header__logo a:active,
.header__logo a:focus {
  color: rgba(250, 93, 0, 100%);
  font-size: 0;
  border: 0;
}

.header__logo img {
  max-width: 100%;
  color: rgba(250, 93, 0, 100%);
}

.header__logo .logo-company-name {
  font-size: 28px;
  margin-top: 7px;
}


@media (max-width: 1000px) {
  .forecast-logo {
    max-width: 200px;
  }
}

@media (max-width: 950px) {
  .header__logo {
    padding-right: 20px;
    margin-right: 0;
    border-right: 0;
  }
}


@media (max-width: 500px) {
  .forecast-logo {
    max-width: 180px;
  }
}

/* Actions */

.header-actions-desktop {
  align-items: center;
  display: flex;
  height: auto;
  margin-left: auto;
  min-width: 200px;
  justify-content: flex-end;
}

.header-actions-mobile {
  display: flex;
  margin: 35px -1% 0;
}

.header-actions-mobile a {
  flex: 1;
  text-align: center;
}

.mobile-app-downloads {
  text-align: center;
  color: #fff;
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  font-size: 18px;
}
.mobile-app-downloads .download-buttons {
  display: flex;
  justify-content: space-between;
  margin: 10px -1% 0;
}

.mobile-app-downloads .download-buttons a {
  background: rgba(255,255,255,10%);
  border-radius: 10px;
  color: #fff;
  margin: 0 1%;
  padding: 10px;
  text-decoration: none;
  width: 49%;
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
}

.mobile-app-downloads img {
  filter: invert(1);
  display: inline-block;
  position: relative;
  margin-right: 4px;
  position: relative;
  top: -3px;
  vertical-align: middle;
}

@media (min-width: 850px) {
  .header-actions-mobile {
    display: none;
  }
  .mobile-app-downloads {
    display: none;
  }
}

@media (max-width: 850px) {
  .header-actions-desktop {
    display: none;
  }

  .hs-tools-menu {
    display: none !important;
  }

  .header__logo {
    top: 12px;
    margin-right: 0;
    position: relative;
    color: #fff;
    z-index: 3;
  }
  .header__logo a,
  .header__logo a:hover,
  .header__logo a:active,
  .header__logo a:focus {
    color: rgba(255, 248, 241, 100%);
  }
}

/* Navigation */

#nav-toggle {
  display: none;
}

/* Mobile toggles */

@media (max-width: 850px) {
  .header__navigation {
    display: none;
    width: 100%;
    padding-top: 200px;
    margin-top: -200px;
  }

  .header__navigation.open {
    background-color: rgba(29, 30, 28, 100%);
    display: block;
    height: 200%;
    left: 0;
    position: fixed;
    right: 0;
    top: 65px;
    z-index: 2;
    padding: 200px 20px 20px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1)
  }

  .header__navigation--toggle,
  .header__close--toggle {
    cursor: pointer;
    margin: 0 5vw;
    top: 0;
    left: 0;
    z-index: 100;
    position: relative;
    background-repeat: no-repeat;
  }

  .header__navigation--toggle.hide {
    display: none;
    font-size: 26px;
    font-weight: 600;
    position: absolute;
    left: 40px;
    text-transform: uppercase;
    top: -10px;
  }

  .header__navigation--toggle {
    background-image: url("data:image/svg+xml,%3Csvg height='12' width='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 0h13v2h-13zm0 5h13v2h-13zm0 5h13v2h-13z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
    background-size: 13px 12px;
    background-repeat: no-repeat;
    padding: 8px 10px 7px 30px;
    background-position: 9px center;
  }

  .header__search--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .toggle-button {
    position: relative;
    top: -28px;
    margin: 0;
    float: right;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: 0;
    outline: inherit;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
  }

  .toggle-button:active {
    background-color: rgba(255, 255, 255, 0.3);
  }

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

  .header__close--toggle {
    background-image: url("data:image/svg+xml,%3Csvg height='12' width='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-rule='evenodd'%3E%3Cpath d='m11.657 1.757-9.9 9.9-1.414-1.414 9.9-9.9z'/%3E%3Cpath d='m1.757.343 9.9 9.9-1.414 1.414-9.9-9.9z'/%3E%3C/g%3E%3C/svg%3E");
    display: none;
    margin-right: 0;
    background-size: 13px 12px;
    background-repeat: no-repeat;
    padding: 8px 10px 7px 30px;
    background-position: 10px center;
  }

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

@media (min-width: 850px) {
  .toggle-button {
    display: none;
  }
}

@media (max-width: 850px) and (max-height: 550px) {
  .submenu.level-1 {
    display: flex !important;
  }
  .navigation-primary .menu-item {
    text-align: center;
  }
  .mobile-app-downloads {
    border-top: 1px solid rgba(255,255,255,15%);
    padding-top: 10px;
    font-size: 16px;
  }
}

@media (max-width: 850px) and (max-height: 375px) {
  .navigation-primary {
    margin-top: 10px;
  }
  .header-actions-mobile {
    margin-top: 20px;
  }
  .submenu.level-1>li>a {
    padding: 10px !important;
  }

  a.menu-link,
  .header-actions-mobile a,
  .mobile-app-downloads .download-buttons a {
    font-size: 15px;
  }

  .mobile-app-downloads img {
    top: 0;
  }
}

@media (max-width: 330px) {
  a.menu-link,
  .header-actions-mobile a,
  .mobile-app-downloads .download-buttons a {
    font-size: 15px;
  }

  .mobile-app-downloads img {
    top: 0;
  }
}


.rb-nav-skip {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rb-nav-skip:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 8px 16px;
  background: #000000;
  color: #ffffff;
  border-radius: 30px;
  z-index: 1000;
}

/* Fixed positioning (matches legacy header behaviour) — immune to ancestor
   `overflow: hidden/clip`, which silently breaks `position: sticky`. */
.rb-nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 20px 20px 0;
  /* Fully transparent — the pill floats over whatever section is
     scrolled under it. No background sampling, no JS. */
  background: transparent;
}

/* Reserves flow space behind the fixed wrap so page content doesn't sit
   under the header on initial paint. Height = wrap top padding (20px) +
   pill height (~71px). Adjusted in the mobile media query below. */
.rb-nav-spacer {
  height: var(--rb-nav-height, 92px);
}

.rb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1297px;
  margin: 0 auto;
  padding: 12px 16px 12px 24px;
  background: #ffffff;
  border-radius: 40px;
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Two-layer shadow so the pill stays visually defined regardless of the
     page background underneath it (incl. white-on-white sections). */
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.06);
}

.rb-nav-start,
.rb-nav-end {
  display: flex;
  align-items: center;
  gap: 24px;
}

.rb-nav-start {
  gap: 48px;
}

/* Tighter spacing between Log in / ghost / primary so the trio reads
   as a single CTA cluster (Figma 522:3690). */
.rb-nav-end {
  gap: 12px;
}

.rb-nav-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.rb-nav-logo img {
  display: block;
  height: 28px;
  width: auto;
}

/* ----------------------------------------------------------
   Primary links
---------------------------------------------------------- */
.rb-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rb-nav-item {
  position: relative;
}

/* The panel now overlaps the trigger by 4px (see `.rb-nav-panel { top }`
   below), so the cursor never leaves a hot region while moving from the
   trigger into the panel — no separate hover bridge needed. */

.rb-nav-link,
.rb-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  background: none;
  border: 0;
  color: #6A696A;
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.54px;
  line-height: normal;
  text-align: center;
  font-style: normal;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.rb-nav-link--quiet {
  color: #6A696A;
}

.rb-nav-chevron {
  width: 12px;
  height: 12px;
  color: currentColor;
  transition: transform 0.2s;
}

.rb-nav-link:hover,
.rb-nav-link:focus-visible,
.rb-nav-trigger:hover,
.rb-nav-trigger:focus-visible,
.rb-nav-item--has-menu:hover .rb-nav-trigger,
.rb-nav-item--has-menu:focus-within .rb-nav-trigger {
  color: rgba(250, 93, 0, 100%);
  outline: none;
}

.rb-nav-item--has-menu:hover .rb-nav-chevron,
.rb-nav-item--has-menu:focus-within .rb-nav-chevron,
.rb-nav-trigger[aria-expanded="true"] .rb-nav-chevron {
  transform: rotate(180deg);
}

/* ----------------------------------------------------------
   Mega-menu panel
---------------------------------------------------------- */
.rb-nav-panel {
  position: absolute;
  /* Sit 4px above the trigger's bottom edge so the panel slightly
     overlaps the trigger — keeps the hover region continuous (no
     dead-band where `:hover` drops mid-traverse) without needing a
     separate invisible bridge element. */
  top: calc(100% - 4px);
  /* Default: panel left-edge aligns with trigger left-edge (Figma intent),
     with a -20px nudge so the 30px internal padding lines the small label
     up with the trigger text. Items with `panel_align: 'right'` flip this
     so the right-edge anchors instead (see .rb-nav-item--panel-right). */
  left: -20px;
  transform: translateY(-4px);
  padding: 30px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 32px;
  /* Hard clamp: panel can never exceed viewport width minus 20px gutters.
     Protects against runaway content (long translations, extra columns). */
  max-width: calc(100vw - 40px);
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.07);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
}

/* Right-anchored panels (e.g. Resources) flip the alignment so wide panels
   near the right edge of the navbar don't overflow the viewport. */
.rb-nav-item--panel-right .rb-nav-panel {
  left: auto;
  right: -20px;
}

.rb-nav-item--has-menu:hover .rb-nav-panel,
.rb-nav-item--has-menu:focus-within .rb-nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.rb-nav-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Vertical divider centered in the 32px panel gap. Used between sections
   in panels that group multiple semantic columns (Solutions, Resources). */
.rb-nav-col--divider::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(29, 30, 28, 10%);
}

.rb-nav-col-label {
  margin: 0;
  color: #8B8B8B;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0;
}

.rb-nav-sublist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Tighter spacing when items have icons (Figma: 14px) */
.rb-nav-sublist--with-icons {
  gap: 14px;
}

/* 2-column sublist (Solutions panel — 8 industries flow column-major) */
.rb-nav-sublist--cols-2 {
  display: block;
  column-count: 2;
  column-gap: 32px;
  column-fill: balance;
}

.rb-nav-sublist--cols-2 > li {
  break-inside: avoid;
  margin-bottom: 20px;
}

.rb-nav-sublist--cols-2 > li:last-child {
  margin-bottom: 0;
}

.rb-nav-sublink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #000000;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.54px;
  line-height: 1;
  text-decoration: none;
  transition: color 0.2s;
}

.rb-nav-sublink:hover,
.rb-nav-sublink:focus-visible {
  color: rgba(250, 93, 0, 100%);
  outline: none;
}

/* Icon-bearing sublink: tighter gap between icon block and text;
   stroke icons inherit currentColor so they pick up hover too.
   Default 16px applies to stroke-icon lists (Features column). Brand-icon
   lists override below to 8px per Figma (logos read as visual blocks
   and want to sit tighter to their label). */
.rb-nav-sublink--with-icon {
  gap: 16px;
}

/* In icon-bearing lists, every row (icon OR plain text) gets a fixed
   24px min-height so columns align across panels. Without this, text-only
   rows like "All integrations" collapse to ~18px and rows drift. */
.rb-nav-sublist--with-icons .rb-nav-sublink {
  min-height: 24px;
}

/* Reserve icon-column space on text-only rows in icon lists so their
   text starts at the same x-offset as icon rows (icon width + gap). */
.rb-nav-sublist--with-icons .rb-nav-sublink:not(.rb-nav-sublink--with-icon) {
  padding-left: calc(24px + 16px);
}

/* Brand-icon list overrides: tighter 8px gap between logomark and label
   (Figma node 1036:7548). Text-only rows reserve the same 24px+8px so
   "All integrations" / "Desktop & Mobile apps" align with brand rows. */
.rb-nav-sublist--with-brand-icons .rb-nav-sublink--with-icon {
  gap: 8px;
}

.rb-nav-sublist--with-brand-icons .rb-nav-sublink:not(.rb-nav-sublink--with-icon) {
  padding-left: calc(24px + 8px);
}

.rb-nav-sublink-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #343533;
  display: block;
  object-fit: contain;
}

/* Brand-color icons (Asana, Slack, Stripe) — keep their own colors,
   sit them in a 24×24 box so row height matches stroke-icon rows.
   `object-fit: contain` preserves each brand mark's native aspect ratio. */
.rb-nav-sublink--brand .rb-nav-sublink-icon {
  width: 24px;
  height: 24px;
  color: inherit;
  object-fit: contain;
  object-position: left center;
}

.rb-nav-panel-cta {
  align-self: flex-start;
  margin-top: 4px;
  padding: 12px 20px;
  color: #4A4B49;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.17px;
  text-decoration: none;
  border: 1px solid #999999;
  border-radius: 30px;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.rb-nav-panel-cta:hover,
.rb-nav-panel-cta:focus-visible {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
  outline: none;
}

/* ----------------------------------------------------------
   Featured promo card (Solutions / Resources panels)
   Two variants share one macro:
   - Solutions: title + cta only (compact)
   - Resources: thumb + title (side-by-side) + desc + cta
---------------------------------------------------------- */
.rb-nav-featured {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
  padding: 20px;
  background: #F3EBE4;
  border-radius: 20px;
  text-decoration: none;
  color: #000000;
  transition: background-color 0.2s;
}

.rb-nav-featured:hover,
.rb-nav-featured:focus-visible {
  background: #F3EBE4;
  outline: none;
}

.rb-nav-featured-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

.rb-nav-featured--textured {
  background: transparent;
}

.rb-nav-featured--textured:hover,
.rb-nav-featured--textured:focus-visible {
  background: transparent;
}

.rb-nav-featured--textured .rb-nav-featured-content,
.rb-nav-featured--textured .rb-nav-featured-cta {
  position: relative;
  z-index: 1;
}

.rb-nav-featured-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rb-nav-featured-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rb-nav-featured-thumb {
  flex-shrink: 0;
  width: 92px;
  height: 49px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.rb-nav-featured-title {
  margin: 0;
  color: #000000;
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.54px;
  line-height: 1.2;
}

.rb-nav-featured-desc {
  margin: 0;
  color: #6A696A;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.42px;
  line-height: 1.4;
}

.rb-nav-featured-cta {
  align-self: stretch;
  padding: 14px 20px;
  background: #ffffff;
  color: #4A4B49;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.17px;
  line-height: 1;
  text-align: center;
  border-radius: 30px;
  transition: background-color 0.2s, color 0.2s;
}

.rb-nav-featured:hover .rb-nav-featured-cta,
.rb-nav-featured:focus-visible .rb-nav-featured-cta {
  background: #000000;
  color: #ffffff;
}

/* ----------------------------------------------------------
   End section (log in + CTAs)
---------------------------------------------------------- */
.rb-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border-radius: 30px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.32px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.rb-nav-btn--ghost {
  color: #000000;
  background: transparent;
  border: 1px solid #999999;
}

.rb-nav-btn--ghost:hover,
.rb-nav-btn--ghost:focus-visible {
  border-color: #000000;
  outline: none;
}

.rb-nav-btn--primary {
  color: #ffffff;
  background: #000000;
  border: 1px solid #000000;
}

.rb-nav-btn--primary:hover,
.rb-nav-btn--primary:focus-visible {
  background: #4F4F4F;
  border-color: #4F4F4F;
  outline: none;
}

/* ----------------------------------------------------------
   Mobile drawer (< 960px)
   Hidden by default on desktop. Toggled via the .rb-nav-mobile-toggle
   button which sits inside .rb-nav-end. JS lives at the end of the
   header-rebrand partial template.
---------------------------------------------------------- */
.rb-nav-mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: #000000;
  cursor: pointer;
}

.rb-nav-mobile-toggle-bars,
.rb-nav-mobile-toggle-bars::before,
.rb-nav-mobile-toggle-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s, background 0.2s;
}

.rb-nav-mobile-toggle-bars {
  position: relative;
}

.rb-nav-mobile-toggle-bars::before,
.rb-nav-mobile-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
}

.rb-nav-mobile-toggle-bars::before { top: -7px; }
.rb-nav-mobile-toggle-bars::after  { top:  7px; }

.rb-nav-mobile-toggle[aria-expanded="true"] .rb-nav-mobile-toggle-bars {
  background: transparent;
}

.rb-nav-mobile-toggle[aria-expanded="true"] .rb-nav-mobile-toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
}

.rb-nav-mobile-toggle[aria-expanded="true"] .rb-nav-mobile-toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Drawer fills the viewport — `top: 0` (set in the open-state rule
   below) covers behind the pill so the section underneath never
   peeks through. The drawer itself doesn't scroll: an inner
   `.rb-nav-mobile-scroll` container handles scroll and sits BELOW
   the pill, so menu items can never visually overlap the pill area
   as the user scrolls (otherwise rows leak into the wrap's padding
   strip above the pill). */
.rb-nav-mobile {
  position: fixed;
  top: var(--rb-nav-height, 104px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(100 - 1);
  background: #ffffff;
  overflow: hidden;
}

.rb-nav-mobile[hidden] {
  display: none;
}

/* Inner scroll container — positioned below the pill so its content
   physically can't enter the navigation area. */
.rb-nav-mobile-scroll {
  position: absolute;
  top: var(--rb-nav-height, 92px);
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 20px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.rb-nav-mobile-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rb-nav-mobile-item {
  border-bottom: 1px solid rgba(29, 30, 28, 10%);
}

.rb-nav-mobile-trigger,
.rb-nav-mobile-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  color: #6A696A;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.rb-nav-mobile-chevron {
  width: 14px;
  height: 14px;
  color: rgba(250, 93, 0, 100%);
  transition: transform 0.2s;
}

.rb-nav-mobile-item--open .rb-nav-mobile-chevron {
  transform: rotate(180deg);
}

.rb-nav-mobile-sublist {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 16px 4px;
}

.rb-nav-mobile-item--open .rb-nav-mobile-sublist {
  display: block;
}

.rb-nav-mobile-sublink {
  display: block;
  padding: 10px 0;
  font-size: 16px;
  color: #6A696A;
  text-decoration: none;
}

.rb-nav-mobile-sublink--cta {
  color: rgba(250, 93, 0, 100%);
  font-weight: 500;
}

.rb-nav-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.rb-nav-mobile-action {
  display: block;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  color: #6A696A;
  text-decoration: none;
  text-align: center;
}

@media (max-width: 1080px) {
  .rb-nav {
    padding: 10px 12px;
    gap: 12px;
  }

  .rb-nav-start {
    gap: 16px;
  }

  /* Desktop links + secondary actions hide; primary CTA stays visible
     for conversion (good mobile UX), hamburger reveals the rest. */
  .rb-nav-links,
  .rb-nav-end .rb-nav-link,
  .rb-nav-end .rb-nav-btn--ghost {
    display: none;
  }

  .rb-nav-end {
    gap: 8px;
  }

  .rb-nav-mobile-toggle {
    display: inline-flex;
  }

  /* Lock document scroll while the drawer is open.
     `body { overflow: hidden }` alone isn't enough — on most
     browsers the document scrollbar lives on the root element, so
     the page keeps scrolling behind the open menu (and the right-
     edge scrollbar stays visible). The toggle script mirrors the
     open class onto `documentElement` so we can lock both here.
     Note: `:root` is used instead of the tag selector because
     HubSpot's CSS preprocessor rejects that token in selectors. */
  :root.rb-nav-mobile-open,
  body.rb-nav-mobile-open {
    overflow: hidden;
  }

  /* Belt-and-braces for touch devices: stop scroll chains from
     bubbling out of the drawer to the page underneath. */
  body.rb-nav-mobile-open .rb-nav-mobile {
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  /* When the drawer is open the pill takes the page's beige tint
     (so the navigation reads as the only coloured surface, not a
     flooded background). Shadow drops; border-radius and geometry
     (padding, max-width, wrap padding) stay identical to the
     closed state so the logo + close-X don't shift on toggle. */
  body.rb-nav-mobile-open .rb-nav {
    background: #FBF5F0;
    box-shadow: none;
    /* Lift the pill's stacking above the drawer (which lives inside
       this `.rb-nav-wrap` stacking context with `z-index: 99` —
       without this the drawer's white background renders ON TOP of
       the logo and close-X). */
    position: relative;
    z-index: 2;
  }

  /* Drawer shell covers the entire viewport (top: 0) with white so
     the section underneath never peeks through. The inner scroll
     container `.rb-nav-mobile-scroll` is offset below the pill via
     its own `top: var(--rb-nav-height)` rule above — that's what
     keeps menu items from rendering into the navigation area. */
  body.rb-nav-mobile-open .rb-nav-mobile {
    top: 0;
    z-index: 1;
  }
}

@media (min-width: 1081px) {
  /* Drawer stays hidden on desktop regardless of `hidden` attr toggling. */
  .rb-nav-mobile {
    display: none;
  }
}

/* Narrow phones: logo + primary CTA + hamburger overflows the pill.
   Per design call (Tala), the logo always stays — the primary CTA is
   hidden instead since the open drawer's `.rb-nav-mobile-actions` already
   surfaces the same "Try Harvest free" link. Threshold raised to 640px
   so even comfortable phones (iPhone 14 Pro = 393px CSS, larger Androids
   ~412px) get the cleaner two-element pill. */
@media (max-width: 640px) {
  .rb-nav-end .rb-nav-btn--primary {
    display: none;
  }

  /* With only logo + hamburger left, the 8px end-gap is plenty. */
  .rb-nav-end {
    gap: 4px;
  }
}


.rb-dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 20px;
  border-radius: 30px;
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.17px;
  text-decoration: none;
  color: #ffffff;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.rb-dl-btn--primary {
  background: #000000;
}

.rb-dl-btn--primary:hover,
.rb-dl-btn--primary:focus-visible {
  background: #4F4F4F;
  color: #ffffff;
}

.rb-dl-btn--disabled {
  background: #8D8E8D;
  cursor: default;
  pointer-events: none;
}

.rb-dl-btn__icon {
  flex-shrink: 0;
  display: block;
}
/* ============================================
   Footer (rebrand 2026)
   - Small brand logo at the top (replaces the legacy clipped wordmark).
   - Column headings double as accordion triggers on mobile (≤960px),
     mirroring the rebrand header (`.rb-nav-mobile-trigger`).
   - Bottom row (copyright / legal / social) is centered on mobile.

   Breakpoints mirror the homepage refactor: 1080 (matches the nav's
   mobile-drawer threshold; structural here because the 4 nav columns +
   444px Forecast card don't fit horizontally below ~1100), 960 (tablet
   → mobile collapse — site-wide convention).
   ============================================ */

.footer {
  position: relative;
  background-color: #ffffff;
  color: #000000;
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 56px 0 48px;
  overflow: hidden;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
  position: relative;
  z-index: 2;
}

/* ----- Brand (small logo at the top) ----- */

.footer-brand {
  display: flex;
  align-items: center;
}

.footer-brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.footer-brand-logo img {
  display: block;
  height: 28px;
  width: auto;
}

/* ----- Top row: nav columns + Forecast card ----- */

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

.footer-nav {
  display: flex;
  align-items: flex-start;
  gap: 49px;
  flex: 1 1 auto;
  min-width: 0;
}

.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 0 1 auto;
  min-width: 120px;
}

/* The trigger is rendered in every viewport so we keep a single DOM tree.
   On desktop it's an inert label: no chevron, no padding shift, list is
   always visible. On mobile (≤960px) it gains an accordion chevron and
   toggles list visibility. */
.footer-nav-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: default;
  color: inherit;
  font: inherit;
}

.footer-nav-heading {
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.32px;
  color: #8B8B8B;
  opacity: 0.7;
  margin: 0;
}

/* Hidden on desktop — surfaces only at the mobile breakpoint where the
   trigger becomes interactive. */
.footer-nav-chevron {
  display: none;
  width: 14px;
  height: 14px;
  color: rgba(250, 93, 0, 100%);
  transition: transform 0.2s;
}

.footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.footer-nav-list a {
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.32px;
  color: #000000;
  opacity: 0.7;
  text-decoration: none;
  transition: color 0.2s, opacity 0.2s;
}

.footer-nav-list a:hover,
.footer-nav-list a:focus {
  color: rgba(250, 93, 0, 100%);
  opacity: 1;
  text-decoration: none;
}

/* ----- Forecast card ----- */

.forecast-card {
  display: flex;
  align-items: center;
  width: 444px;
  max-width: 100%;
  height: 242px;
  flex-shrink: 0;
  background-color: #F3EBE4;
  border-radius: 24px;
  padding: 30px 0 30px 24px;
  overflow: hidden;
  text-decoration: none;
  transition: background-color 0.2s;
}

.forecast-card:hover,
.forecast-card:focus {
  background-color: rgba(243, 235, 228, 0.85);
  text-decoration: none;
}

.forecast-card-text {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 16px;
}

.forecast-card-eyebrow {
  margin: 0 0 6px;
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.42px;
  color: rgba(250, 93, 0, 100%);
}

.forecast-card-title {
  margin: 0 0 4px;
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.66px;
  color: #000000;
}

.forecast-card-desc {
  margin: 0;
  max-width: 220px;
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.42px;
  color: #6A696A;
}

.forecast-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: #ffffff;
  border-radius: 30px;
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.17px;
  color: #000000;
  transition: background-color 0.2s;
}

.forecast-card:hover .forecast-card-button,
.forecast-card:focus .forecast-card-button {
  background-color: #4F4F4F;
  color: #ffffff;
}

.forecast-card-image {
  flex: 0 0 220px;
  width: 220px;
  height: 210px;
  border: 1px solid #d3d3d3;
  border-right: none;
  border-radius: 9px 0 0 9px;
  overflow: hidden;
  background-color: #ffffff;
}

.forecast-card-image img {
  width: 197%;
  height: 160%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: top left;
}

/* ----- Bottom row: legal links + social, copyright underneath -----
   Layout follows StreamYard: legal links on the left, social on the
   right, copyright sits on its own line at the very bottom of the
   block. The divider lives at the top of `.footer-bottom`, NOT
   directly above the copyright. */

.footer-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  row-gap: 16px;
  width: 100%;
  padding-top: 32px;
  border-top: 1px solid rgba(29, 30, 28, 10%);
}

.footer-legal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.footer-copyright {
  margin: 0;
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.28px;
  color: #8B8B8B;
  opacity: 0.7;
}

.footer-legal-list li {
  padding: 0 16px;
  border-right: 1px solid rgba(139, 139, 139, 0.3);
  line-height: 1;
}

.footer-legal-list li:first-child {
  padding-left: 0;
}

.footer-legal-list li:last-child {
  border-right: none;
  padding-right: 0;
}

.footer-legal-list a {
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.28px;
  color: #000000;
  opacity: 0.7;
  text-decoration: none;
  transition: color 0.2s, opacity 0.2s;
}

.footer-legal-list a:hover,
.footer-legal-list a:focus {
  color: rgba(250, 93, 0, 100%);
  opacity: 1;
  text-decoration: none;
}

/* ----- Social ----- */

.footer-social {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  grid-column: 2;
  grid-row: 1;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #000000;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-social-link:hover,
.footer-social-link:focus {
  color: rgba(250, 93, 0, 100%);
  text-decoration: none;
}

.footer-social-link svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* ============================================
   Responsive
   ============================================ */

@media screen and (max-width: 1080px) {
  .footer-top {
    flex-direction: column;
    gap: 48px;
  }

  .forecast-card {
    width: 100%;
    max-width: 444px;
  }

  /* Bottom row stacks + centers as soon as the rest of the footer
     stacks. Grid placement on the children is explicitly cleared so
     `grid-column: 2` etc. can't keep social pinned to the right when
     the parent flips from grid to flex. Order matches StreamYard:
     legal links → social → copyright. The divider lives at the top
     of this block, never directly above the copyright. */
  .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding-top: 24px;
  }

  .footer-legal-list,
  .footer-social,
  .footer-copyright {
    grid-column: auto;
    grid-row: auto;
  }

  /* Drop the pipe separators — they leave a trailing border on the
     last item of each wrapped row and pile up under long entries.
     Stack vertically instead. */
  .footer-legal-list {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .footer-legal-list li,
  .footer-legal-list li:first-child,
  .footer-legal-list li:last-child {
    padding: 0;
    border-right: none;
  }
}

@media screen and (max-width: 960px) {
  .footer {
    padding: 40px 0 40px;
  }

  .footer-inner {
    gap: 40px;
  }

  .footer-brand {
    justify-content: center;
  }

  /* Forecast card (when present) is what's left at the top of the
     stack — give it the same gutter as the columns below.
     `align-items: stretch` overrides the desktop `flex-start` so
     children fill the row's full width on mobile. */
  .footer-top {
    align-items: stretch;
    gap: 32px;
  }

  /* Columns become an accordion. Each row is divider-separated, the
     trigger fills the row, and the chevron rotates when open. Same
     visual language as the mobile drawer in `.rb-nav-mobile-list`.
     `align-items: stretch` is required to override the desktop
     `flex-start` value — without it columns collapse to content width
     and the dividers stop short of the gutter. */
  .footer-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .footer-nav-col {
    width: 100%;
    gap: 0;
    border-bottom: 1px solid rgba(29, 30, 28, 10%);
  }

  .footer-nav-col:first-child {
    border-top: 1px solid rgba(29, 30, 28, 10%);
  }

  .footer-nav-trigger {
    justify-content: space-between;
    padding: 16px 0;
    cursor: pointer;
  }

  .footer-nav-heading {
    font-size: 18px;
    color: #6A696A;
    opacity: 1;
  }

  .footer-nav-chevron {
    display: block;
  }

  .footer-nav-col--open .footer-nav-chevron {
    transform: rotate(180deg);
  }

  /* List collapses by default on mobile; opens via the trigger. */
  .footer-nav-list {
    display: none;
    padding: 0 0 16px 4px;
    gap: 4px;
  }

  .footer-nav-col--open .footer-nav-list {
    display: flex;
  }

  .footer-nav-list a {
    padding: 6px 0;
  }

  .forecast-card {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 24px 24px 0;
    gap: 24px;
  }

  .forecast-card-text {
    padding-right: 0;
  }

  .forecast-card-image {
    flex: 0 0 auto;
    width: 100%;
    height: 180px;
    border-radius: 9px 9px 0 0;
    border: 1px solid #d3d3d3;
    border-bottom: none;
  }

  .forecast-card-image img {
    width: 100%;
    height: 100%;
    object-position: top center;
  }

  /* Bottom-row stacking is handled by the 1080px breakpoint above so
     it's already in mobile shape by the time we reach this block. */
}
/* ============================================
   Subfooter — final CTA above the global footer
   Design ref: Figma 5JLi8RR30Vcwd2kSaVd4kb / 846:2378
   Markup: src/templates/partials/subfooter.html
   ============================================ */

/* Container width matches the rebrand nav pill (1297px max + 20px gutter)
   so the orange ribbon and white card align with `.content-wrapper`,
   `.rb-nav`, and the rest of the rebrand surfaces on every page. */
.subfooter {
  background: #FBF5F0;
  padding: 0 20px;
  /* Hairline divider between the subfooter section and the footer below. */
  border-bottom: 1px solid #F3EBE4;
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Stack holds the orange decoration ribbon and the white card on top.
   The card is absolutely positioned 100px below the stack top so it
   overlaps the ribbon — both get clipped by the stack at 605px so they
   read flush with the page divider beneath. */
.subfooter-stack {
  position: relative;
  width: 100%;
  max-width: 1297px;
  height: 605px;
  margin: 0 auto;
  overflow: hidden;
}

.subfooter-bg {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  height: 561px;
  border-radius: 40px 40px 0 0;
  background-image: url(https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/images/partials/subfooter-bg.svg);
  background-size: cover;
  background-position: center;
}

/* White card matching Figma 1229:10683. The image is absolutely
   positioned at the card's bottom-right so it can render at its
   natural Figma "Touchpoints" size (495×475) without fighting copy
   width for room. Copy flows normally in the block layout, capped at
   Figma's 685px wrapper width — its text lines stay well short of the
   image's visible column, so there is no visual overlap. */
.subfooter-card {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 110px);
  max-width: 1156px;
  min-height: 531px; /* Figma card height */
  background: #ffffff;
  border-radius: 30px 30px 0 0;
  padding: 58px 56px 46px; /* Figma: px-56, copy top 57.76, pb 46 */
  overflow: hidden;
}

.subfooter-copy {
  position: relative;
  z-index: 1;
  max-width: 685px; /* Figma w-[685.83px] */
}

.subfooter-headline {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 67px;
  line-height: 1.1;
  letter-spacing: -2.68px;
  font-weight: 400;
  color: #000000;
  margin: 0 0 23px; /* Figma gap-[23px] */
}

.subfooter-lede {
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 23px;
  line-height: 1.42;
  letter-spacing: -0.69px;
  color: #2C222D;
  opacity: 0.7;
  margin: 0 0 16px; /* Figma gap-[16px] between lede and CTA */
  max-width: 492px; /* Figma w-[492px] */
}

/* Primary CTA pill — Figma 1229:10691 (black, 30px radius, Muoto Medium 17px). */
.subfooter-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 53px;
  padding: 8px 20px;
  background: #000000;
  color: #ffffff;
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.17px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border-radius: 30px;
  margin: 0 0 35px; /* Figma gap-[35px] between cta-block and downloads */
  transition: background-color 0.2s, color 0.2s;
}

.subfooter-cta:hover,
.subfooter-cta:focus-visible {
  background: #4F4F4F;
  color: #ffffff;
  outline: none;
}

.subfooter-app-downloads {
  display: flex;
  align-items: flex-start;
  gap: 48px; /* Figma gap-[48px] */
  flex-wrap: wrap;
}

.subfooter-app-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.subfooter-app-group-label {
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.42;
  letter-spacing: -0.48px;
  font-weight: 500;
  color: #2C222D;
  opacity: 0.7;
  margin: 0;
}

.subfooter-app-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Image: absolutely positioned, anchored to the card's bottom-right,
   sized to Figma's "Touchpoints" 495×475 slot. Height scales with
   viewport via clamp() so the image shrinks gracefully on narrower
   cards instead of overflowing into copy text. */
.subfooter-image {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: clamp(340px, 34vw, 475px);
  width: auto;
  pointer-events: none;
  user-select: none;
}

/* ----- Responsive ─────────────────────────────────────────────────────
   Breakpoints mirror the homepage refactor: 1080 (matches the nav
   mobile-drawer threshold; structural here because the copy + image
   side-by-side layout starts cramping below ~1180), 960 (tablet →
   mobile collapse — site-wide convention), 640 (small phone tweaks). */

@media (max-width: 1080px) {
  .subfooter-card {
    padding: 48px 40px 40px;
  }

  .subfooter-copy {
    max-width: 56%; /* leave room for image on the right */
  }

  .subfooter-headline {
    font-size: 56px;
    letter-spacing: -2.24px;
  }

  .subfooter-lede {
    font-size: 20px;
    letter-spacing: -0.6px;
  }
}

@media (max-width: 960px) {
  /* Stack hosts the orange backdrop + card on the same stacking
     context. `padding-top` reserves room above the card for the
     orange ribbon. */
  .subfooter-stack {
    height: auto;
    overflow: visible;
    padding-top: 32px;
  }

  /* Orange SVG backdrop fills the stack BEHIND the card from y=32px
     down to the section bottom. Combined with the card's 16px side-
     inset and 32px top-margin below, the orange peeks around the
     card on top, left, and right — same reading as desktop. */
  .subfooter-bg {
    position: absolute;
    inset: 32px 0 0;
    height: auto;
    border-radius: 28px 28px 0 0;
  }

  .subfooter-card {
    position: relative;
    z-index: 1;
    top: 0;
    left: 0;
    transform: none;
    /* Inset 16px on each side from the orange bg. */
    width: calc(100% - 32px);
    /* Margin-top exposes the 32px orange ribbon above the card. */
    margin: 32px auto 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 48px 32px 0;
    gap: 40px;
    border-radius: 24px 24px 0 0;
    min-height: 0;
    /* Drop the desktop crop so the full screenshot is visible on mobile. */
    overflow: visible;
  }

  .subfooter-copy {
    max-width: none;
  }

  .subfooter-headline {
    font-size: 40px;
    letter-spacing: -1.6px;
  }

  .subfooter-lede {
    font-size: 18px;
    letter-spacing: -0.4px;
  }

  .subfooter-cta {
    margin-bottom: 24px;
  }

  /* Mobile: image fills the card width and shows in full (no crop, no
     320px cap). Sits flush with the card's bottom edge so it touches
     the section divider. */
  .subfooter-image {
    position: static;
    align-self: stretch;
    width: 100%;
    height: auto;
    max-width: none;
    margin-top: auto;
    border-radius: 0 0 24px 24px;
  }
}

@media (max-width: 640px) {
  .subfooter-headline {
    font-size: 32px;
    letter-spacing: -1.28px;
  }

  .subfooter-app-downloads {
    gap: 28px;
  }
}
/* Menu and simple menu */

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

/* Horizontal menu */

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

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

/* Vertical menu */

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

/* Flyouts */

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

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

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

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

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

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

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

@media (max-width: 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}
/* Main Nav
   NOTE: Header rules below are scoped to `.header` (legacy header partial)
   instead of the `<header>` tag, so they don't leak into other <header>
   elements on the page (e.g. .rb-nav-wrap from the rebrand). */

.header.bg-white {
  background-color: white;
}
body.withMegamenu .header {
  padding-bottom: 0;
}
body.withMobileNavOpened .header {
  height: 100vh;
  overflow: auto;
  position: fixed;
}

body.withMobileNavOpened .main-nav--mobile .menuIcon {
  display: none;
}
body.withMobileNavOpened .main-nav--mobile .closeIcon {
  display: block;
}

.desktop-only {
  display: none;
}
.main-nav {
  padding: 20px 0;
  background-color: rgba(29, 30, 28, 100%);
  display: flex;
  justify-content: space-between;
}

.main-nav .w-3\/12 {
  width: 25%;
}
.main-nav .w-4\/12 {
  width: 33.333%;
}
.main-nav .w-5\/12 {
  width: 41.666%;
}
.main-nav .w-1\/2,
.main-nav .w-6\/12 {
  width: 50%;
}

.main-nav a {
  color: rgba(29, 30, 28, 100%);
  text-decoration: none;
}
.main-nav figure {
  margin: 0;
}
.main-nav img {
  display: block;
  width: 100%;
}
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav svg {
  display: block;
}
.main-nav__logo {
  padding: 0 20px;
  width: 200px;
}
.main-nav__logo svg path {
  fill: white;
}

.main-nav--mobile > div {
  background-color: rgba(29, 30, 28, 100%);
  color: white;
  display: none;
  flex-direction: column;
  min-height: calc(100vh - 73px);
  left: 0;
  position: absolute;
  top: 73px;
  width: 100%;
}
.main-nav--mobile > div.active {
  display: flex;
}
.main-nav--mobile > button {
  align-items: center;
  background-color: hsla(0,0%,100%,.2);
  border-radius: 10px;
  border: 0;
  color: #fff;
  display: flex;
  font-size: 15px;
  font-weight: 600;
  margin-right: 20px;
  padding: 8px 12px;
}
.main-nav--mobile > button img {
  margin-right: 8px;
  width: 14px;
}
.main-nav--mobile > button img.closeIcon {
  display: none;
}

.main-nav--mobile p {
  color: white;
  font-size: 16px;
  margin: 80px 0 0;
  text-align: center;
}
.main-nav--mobile .action-links {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  
  padding: 40px 20px 20px;
}
.main-nav--mobile .action-links li {
  width: 50%;
}
.main-nav--mobile .action-links a {
  align-items: center;
  background: hsla(0,0%,100%,.1);
  border-radius: 10px;
  color: #fff8f1;
  display: flex;
  font-size: 18px;
  font-weight: 600;
  justify-content: center;
  padding: 10px;
}
.main-nav--mobile .action-links a:active {
  background: hsla(0,0%,100%,.05);
  color: #fff;
}
.main-nav--mobile .action-links a img {
  color: white;
  filter: invert(1);
  margin-right: 4px;
  position: relative;
  top: -3px;
  width: 20px;
}
.main-nav--mobile .action-links--app {
  margin-top: auto;
}
.main-nav--mobile .action-links--app .action-links {
  padding-top: 20px;
  padding-bottom: 80px;
}

@media (min-width: 851px) {  
  .desktop-only {
    display: block;
  }
  .mobile-only {
    display: none;
  }
  .main-nav {
    background-color: transparent;
    display: flex;
    font-size: 14px;
    padding: 24px 20px;
  } 
  .main-nav > figure {
    border-right: 1px solid rgba(29, 30, 28, 5%);    
    width: 186px;
    padding-top: 4px;
  }
  .main-nav > div {
    width: calc(100% - 186px);
  }
  .main-nav__logo {
    padding-left: 0;
  }
  .main-nav__logo svg path {
    fill: rgba(250, 93, 0, 100%);
  }
  .main-nav a {
    font-size: inherit;
    text-decoration: none;
    transition: color .2s;
  }
  .main-nav a:hover {
    color: rgba(250, 93, 0, 100%);
  }
  .main-nav .button-trial {
    color: white;
    margin-left: 20px;
    padding-bottom: 12px;
    padding-top: 12px;
  }
  .main-nav .button-trial:hover {
    color: white;
  }
}

@media (min-width: 1051px) {
  .main-nav {
    font-size: 17px;
  } 
}

@media screen and (min-width: 1240px) {
  .main-nav {
    padding-left: 0;
    padding-right: 0;
  } 
}

/* Breadcrumbs */


.offset-breadcrumb {
  position: relative;
  top: -40px;
}

#breadcrumbs {
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 8px 0;
  font-size: 16px;
}

#breadcrumbs.light-background {
  color: rgba(0,0,0, 60%);
}

#breadcrumbs a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  font-size: 16px;
}
#breadcrumbs a:hover {
  filter: brightness(0.95);
}
#breadcrumbs a:active {
  filter: brightness(0.9);
  transition: none;
}

#breadcrumbs .hs_cos_wrapper {
  display: inline-block;
}

.breadcrumb-arrow {
  margin-left: 3px;
  margin-right: 3px;
  position: relative;
  top: 1px;
}

@media (max-width: 850px) {
  #breadcrumbs {
    padding-top: 12px;
  }
}
.megamenu--mobile li {
  color: #FFF;
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.megamenu--mobile li > div,
.megamenu--mobile li a {
  align-items: center;
  color: white;
  display: flex;
  justify-content: space-between;
  padding: 1rem 20px;
  text-decoration: none;
}
.megamenu--mobile > .link > div,
.megamenu--mobile > .link > a {
  font-size: 18px;
  font-weight: 600;  
}

.megamenu--mobile li a:active {
  background-color: rgba(255, 248, 241, 5%);
}
.megamenu--mobile li ul {
  display: none;
  font-weight: 500;
  opacity: 0;
  transition: visibility 0s, opacity .2s;
  visibility: hidden;
}
.megamenu--mobile li {
  border-bottom: 1px solid rgba(255, 248, 241, 10%);
}
.megamenu--mobile li li:last-of-type{
  border-bottom: none;
}
.megamenu--mobile li li a {
  padding-left: 40px;
}
.megamenu--mobile li svg {
  transform: rotate(180deg);
}
.megamenu--mobile li svg path {
  stroke: white;
}
.megamenu--mobile li.active > div {
  background-color: rgba(255, 248, 241, 10%);
  color: #FA5D00;
}
.megamenu--mobile li.active svg path {
  stroke: rgba(250, 93, 0, 90%);
  transform: rotate(0deg);
}
.megamenu--mobile li.active ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

@media (min-width: 851px) {
  .main-nav .megamenu {
    display: flex;
    padding-left: 10px;
  }
  .megamenu .menu-link.linkWithIcon {
    align-items: center;
    cursor: pointer;
    display: flex;
  }
  .megamenu .menu-link.linkWithIcon span {
    padding-right: .25rem;
  }
  .megamenu .menu-link.linkWithIcon svg {
    margin-left: .25rem;
    position: relative;
    top: 1px;
    transform: rotate(180deg);
  }
  .megamenu .menu-link.linkWithIcon svg path {
    stroke: #8C8C8C;    
    transition: stroke .1s;
  }
  .megamenu .menu-item:hover .menu-link svg path {
    stroke: rgba(250, 93, 0, 100%);
  }
  .megamenu .menu-item {
    color: rgba(29, 30, 28, 100%);
    font-size: 14px;
    font-weight: 500;
    margin: 0 14px;
    padding: 0;
    text-decoration: none;
    transition: color .2s;
  }
  .megamenu .menu-item svg {
    display: inline-block;
    margin-left: 0;
    position: relative;
    vertical-align: middle;
    transition: stroke .2s, margin-left 0.3s ease-out;
  }
  .megamenu .submenu .list__item:hover .linkWithIcon:not(.featured__button) svg,
  .megamenu .submenu .pageItem:hover .linkWithIcon:not(.featured__button) svg  {
    margin-left: 4px;
  }
  .megamenu .menu-item svg {
    stroke: rgba(29, 30, 28, 100%);
  }
  .megamenu .menu-item:hover {
    color: rgba(250, 93, 0, 100%);
  }
  .megamenu .featured__title {
    color: rgba(29, 30, 28, 100%);
    font-family: 'MuotoWeb', serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 600 !important;
    line-height: .8;
    margin-bottom: .5rem;
    text-decoration: none;
  }
  .megamenu .featured__text {
    color: rgba(29, 30, 28, 60%);
    font-family: 'MuotoWeb';
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.2; 
    margin-bottom: .75rem;
    max-width: 13rem;
    text-decoration: none;
  }
  .megamenu .featured__button {
    background-color: rgba(29, 30, 28, 0.04);
    border-radius: 8px;
    color: rgba(250, 93, 0, 100%);
    display: inline-flex;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: .5rem .75rem;
    text-decoration: none;
    transition: background .2s;
    width: auto;
  }
  .megamenu .featured__button:hover {
    background-color: rgba(29, 30, 28, 0.08);
  }
  .megamenu .featured__button:active {
    background-color: rgba(29, 30, 28, 0.12);
  }
  .megamenu .featured__button svg {
    margin-left: .25rem;
    transform: rotate(90deg);
    top: -1px;
  }
  .megamenu .list .featured-link-li a.featured-link {
    flex-direction: column;
    align-items: flex-start;
    width: 80%;
    font-size: 16px;
    padding: .75rem;
    padding-left: 0;
    border-top: 1px solid rgba(29, 30, 28, 5%);
    color: rgba(250, 93, 0, 100%);
  }
  .megamenu a.featured-link .pretext {
    color: rgba(29, 30, 28, 100%);
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 8px;
  }
  .megamenu .list .featured-link svg {
    position: absolute;
    right: -15px;
    top: 8px;
    transition: right 0.3s ease-out;
  }
  .megamenu .list .featured-link .link_text {
    position: relative;
  }
  .megamenu .list .featured-link:hover .link_text {
    
  }
  .megamenu .list .featured-link .link_text.bottom-border:after {    
  background: none repeat scroll 0 0 rgba(250, 93, 0, 90%);
  content: "";
  display: block;
	width: 0;
  height: 2px;
  position: absolute;
  bottom: -2px;
  left: 0;
  transition: width 0.5s ease 0s, opacity 0.5s ease 0s;
  border-radius: 1px;
  opacity: 0;
  }
  .megamenu .list .featured-link:hover .link_text:after { 
    width: 100%; 
    left: 0;
    opacity: 1;
  }
  .megamenu .list .featured-link:hover svg {
    right: -19px;
  }

  .megamenu .list .featured-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    background-color: rgba(255, 248, 241, 100%);
    padding: 30px 20px 30px 35px;
    border-radius: 15px;
    gap: 20px;
  }
  .megamenu .list .featured-card:hover {
    background-color: rgba(255, 248, 241, 80%);
  }
  .megamenu .list .featured-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
  }
  .megamenu .list .featured-card__title,
  .megamenu .list .featured-card-li :hover .featured-card__title {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 10px;
    color: rgba(29, 30, 28, 100%) !important;
  }
  .megamenu .list .pretext,
  .megamenu .list .featured-card-li :hover .pretext {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.33;
    color: rgba(29, 30, 28, 0.80) !important;
    margin-bottom: 10px;
  }
  .megamenu .list .link_text,
  .megamenu .list .featured-card-li :hover .link_text {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    color: rgba(250, 93, 0, 100%) !important;
    position: relative;
  }
  .megamenu .list .featured-card .link_text svg {
    position: absolute;
    right: -15px;
    top: 5px;
    transition: right 0.3s ease-out;
  }
  .megamenu .list .featured-card:hover .link_text svg {
    right: -19px;
  }
  .megamenu .list .featured-card figure {
    display: flex;
    flex: 1;
    align-items: flex-start;
    justify-content: flex-end;
    max-width: 230px;
  }

  /* hiding the border line on just this one menu */
  .megamenu .menu-item--withSubmenu:nth-of-type(3) .thirdColumn::before {
    display: none;
  }
  .megamenu .pageItem a {
    border-radius: 13px;
    padding: .5rem;
    transition: background .2s;
  }
  .megamenu .pageItem a:hover {
    background: rgba(29, 30, 28, 0.04);
  }
  .megamenu .pageItem a:active {
    background-color: rgba(29, 30, 28, 0.06);
  }
  .megamenu .pageItem + .pageItem {
    margin-top: .25rem;
  }
  .megamenu .pageItem a:hover .pageItem__title {
    color: rgba(250, 93, 0, 100%);
  }
  .megamenu .pageItem__title {
    font-size: 21px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0;
    transition: color .2s;
  }
  .megamenu .pageItem__title svg {
    transform: rotate(90deg);
  }
  .megamenu .pageItem__text {
    color: rgba(29, 30, 28, 80%) ;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: .15rem;
    margin-bottom: 0;
    opacity: .8;
  }
  .megamenu .submenu {
    background-color: white;
    border-top: 1px solid rgba(29, 30, 28, 5%) ;
    box-shadow: 0px 14px 14px 0px rgba(0, 0, 0, 0.10);
    left: 0;
    margin-top: 88px;
    opacity: 0;
    padding: 35px 0;
    position: absolute;
    top: 0;
    transition: opacity .2s, visibility .1s;
    visibility: hidden;
    width: 100%;
  }
  .megamenu .submenu--columns {
    display: flex;
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 20px;
  }
  .megamenu .menu-item--withSubmenu .indicator {
    background-color: rgba(250, 93, 0, 100%); 
    height: 0;
    left: -4rem;
    opacity: 0;
    position: relative;
    visibility: hidden;
    width: calc(100% + 8rem);
    transition: opacity .2s, visibility .1s;
  }
  .megamenu .menu-item--withSubmenu:hover .indicator {
    opacity: 1;
    visibility: visible;
  }
  .megamenu .menu-item--withSubmenu .indicator::before {
    bottom: -34px;
    content: '';
    height: 34px;
    left: 0;
    position: absolute;
    width: 100%;
  }
  .megamenu .menu-item--withSubmenu .indicator::after {
    bottom: -35px;
    content: '';
    display: block;
    height: 4px;
    position: absolute;
    right: 4rem;
    transition: background .2s;
    width: calc(100% - 8rem);
  }
  .megamenu .menu-item--withSubmenu:hover .indicator::after {
    background-color: rgba(250, 93, 0, 100%);            
  }
  .megamenu .menu-item:hover .submenu {
    opacity: 1;
    visibility: visible;
  }

  .megamenu .list__title + .list {
    margin-top: .75rem;
  }
  .megamenu .list__title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 1rem;
    opacity: .5;
  }
  .megamenu .list__item {
    font-size: 16px;
    font-weight: 500;
  }
  .megamenu .list__item svg {
    margin-left: .5rem;
    transform: rotate(90deg);
  }
  .megamenu .list__item a {
    transition: color .2s;
  }
  .megamenu .list__item:hover a {
    color: rgba(250, 93, 0, 100%);
  }
  .megamenu .list__item--blog {
    margin-bottom: 10px;
    max-width: 310px;
  }

  .megamenu .firstColumn {
    padding-right: 24px;
  }

  .megamenu .secondColumn {
    padding-left: 34px;
    padding-right: 14px;
  }
  .megamenu .secondColumn .pageItem {
    display: flex;
    max-width: 440px;
  }
  .megamenu .secondColumn .pageItem figure {
    display: flex;
  }
  .megamenu .secondColumn .pageItem div {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    padding-left: 8px;
  }
  .megamenu .secondColumn .list--withColumns {
    display: flex;
    flex-wrap: wrap;
  }
  .megamenu .secondColumn .list__item {
    font-size: 18px;
    font-weight: 600;
  }
  .megamenu .secondColumn .list__item svg {
    margin-left: 0;
    top: -1px;
  }
  .megamenu .secondColumn figure {
    width: 2.5rem;
  }
  .megamenu .secondColumn figure ~ div {
    width: calc(100% - 2.5rem);
  }
  .megamenu .menu-item--withSubmenu:nth-of-type(1) .secondColumn {
    padding-left: 20px;
  }
  .megamenu .menu-item--withSubmenu:nth-of-type(1) .secondColumn ul {
    margin-top: -10px;
  }
  .megamenu .menu-item--withSubmenu:nth-of-type(2) .secondColumn .list__item {
    margin-bottom: 0;
  }
  .megamenu .menu-item--withSubmenu:nth-of-type(2) .secondColumn .list__item:nth-of-type(n+3) {
    margin-top: 1rem;
  }
  .megamenu .menu-item--withSubmenu:nth-of-type(3) .secondColumn .list__item + .list__item {
    margin-bottom: 0;
    margin-top: 1rem;
  }
  .megamenu .thirdColumn {
    padding-left: 24px;
    position: relative;            
  }
  .megamenu .thirdColumn::before {
    background-color: rgba(29, 30, 28, 5%);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 1px;
  }
  .megamenu .thirdColumn .list__item a {
    align-items: center;
    display: flex;
  }
  .megamenu .thirdColumn .list__item + .list__item {
    margin-bottom: 0;
    margin-top: .75rem;
  }
  .megamenu .thirdColumn .list__item__text {
    line-height: .7;
    width: calc(100% - 1.5rem);
  }
  .megamenu .thirdColumn .list__item figure {
    margin-right: 8px;
    width: 20px;
  }
  .megamenu .thirdColumn .list__item:hover {
    color: rgba(250, 93, 0, 100%);
  }
  .megamenu .thirdColumn .list__item--blog a {
    display: flex;
  }
  .megamenu .thirdColumn .list__item--blog figure {
    margin-right: .5rem;
    padding-right: 0;
    width: 36px;
  }
  .megamenu .thirdColumn .list__item--blog span {
    line-height: 1.2;
    width: calc(100% - 36px);
  }
}

@media (min-width: 1040px) {
  .megamenu .secondColumn {
    padding-left: 24px;
  }
  .megamenu .menu-item--withSubmenu:first-of-type .secondColumn {
    padding-left: 8px;
  }
}
@media (min-width: 1051px) {
  .megamenu .menu-item {
    font-size: 17px;
  }
  .megamenu .submenu {
    margin-top: 91px;
  }

}
@media (min-width: 1240px) {
  .megamenu .submenu--columns {
    padding-left: 0;
    padding-right: 0;
  }
}


/* adding forecast banner */
.megamenu .featured-banner-anchor {
  display: block;
  width: 100%;
  background: rgba(29, 30, 28, 0.04);
  border-radius: 10px;
  margin-top: 15px;
  transition: background .2s;
}

.megamenu .featured-banner-anchor:hover {
  background: rgba(29, 30, 28, 0.08);
}

.megamenu .featured-banner-content {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: rgba(29, 30, 28, 80%);
}


.megamenu .featured-banner-content figure {
  width: 24px;
  height: 24px;
}

.megamenu .featured-banner-content .featured-banner-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0;
  margin-top: 0;
  padding-right: 10px;
  border-right: 1px solid rgba(29, 30, 28, 5%);
  padding-top: 5px;
  padding-bottom: 5px;
  white-space: nowrap;
}

.megamenu .featured-banner-content p {
  font-size: 15px;
  font-weight: 400;
  color: rgba(29, 30, 28, 80%);
  line-height: 1.2;
  margin-bottom: 0;
  margin-top: 0;
  opacity: .8;
  flex: 1;
}

.megamenu .featured-banner-content .featured-banner-chevron svg {
  transform: rotate(90deg) translateY(2px) translateX(-1px);
  margin-left: 5px;
  transition: transform .2s;
}

.megamenu .featured-banner-anchor:hover .featured-banner-content .featured-banner-chevron svg {
  transform: rotate(90deg) translateY(-2px) translateX(-1px);
}
/* Background Colors */

.background-neutral {
  background-color: #f8f5f1 !important;
}
.background-blue {
  background-color: #3d9dc1 !important;
}
.background-red {
  background-color: #cb5c5b !important;
}
.background-green {
  background-color: #21A5A0 !important;
}
.background-yellow {
  background-color: #f18d2a !important;
}
.background-gray {
  background-color: #f6f6f6 !important;
}
.background-purple {
  background-color: #4b4b69 !important;
}
.background-white {
  background-color: #fff !important;
}


/* Section Styles */

.border-bottom {
  border-bottom: 1px solid rgba(250, 93, 0, 100%);
}

.border-top {
  border-top: 1px solid rgba(250, 93, 0, 100%);
}

.border-right {
  border-right: 1px solid rgba(250, 93, 0, 100%);
}

.border-left {
  border-left: 1px solid rgba(250, 93, 0, 100%);
}

/* Atomic Spacing Classes */

.mt0 {
  margin-top: 0px;
}
.mt5 {
  margin-top: 5px;
}
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.mt30 {
  margin-top: 30px;
}
.mt40 {
  margin-top: 40px;
}
.mt50 {
  margin-top: 50px;
}
.mt60 {
  margin-top: 60px;
}
.mt100 {
  margin-top: 100px;
}

.mb0 {
  margin-bottom: 0px;
}
.mb5 {
  margin-bottom: 5px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb30 {
  margin-bottom: 30px;
}
.mb40 {
  margin-bottom: 40px;
}
.mb50 {
  margin-bottom: 50px;
}
.mb60 {
  margin-bottom: 60px;
}
.mb100 {
  margin-bottom: 100px;
}

.ml5 {
  margin-left: 5px;
}
.ml10 {
  margin-left: 10px;
}
.ml20 {
  margin-left: 20px;
}
.ml30 {
  margin-left: 30px;
}
.ml40 {
  margin-left: 40px;
}
.ml50 {
  margin-left: 50px;
}
.ml60 {
  margin-left: 60px;
}
.ml100 {
  margin-left: 100px;
}

.mr5 {
  margin-right: 5px;
}
.mr10 {
  margin-right: 10px;
}
.mr20 {
  margin-right: 20px;
}
.mr30 {
  margin-right: 30px;
}
.mr40 {
  margin-right: 40px;
}
.mr50 {
  margin-right: 50px;
}
.mr60 {
  margin-right: 60px;
}
.mr100 {
  margin-right: 100px;
}


/* Responsive Vertical Spacing */

.mb-tiny {
  margin-bottom: 20px;
}

.mb-small {
  margin-bottom: 50px;
}

.mb-medium {
  margin-bottom: 75px;
}

.mb-large {
  margin-bottom: 100px;
}


.mt-tiny {
  margin-top: 20px;
}

.mt-small {
  margin-top: 50px;
}

.mt-medium {
  margin-top: 75px;
}

.mt-large {
  margin-top: 100px;
}

@media (max-width: 850px) {
  .mt-large {
    margin-top: 75px;
  }

  .mb-large {
    margin-bottom: 75px;
  }

  .mt-medium {
    margin-top: 55px;
  }

  .mb-medium {
    margin-bottom: 55px;
  }

  .mt-small {
    margin-top: 35px;
  }

  .mb-small {
    margin-bottom: 35px;
  }

}


/* Image Treatments */

.rounded-image,
.rounded-image img {
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

/* Static Auras */


/* Screenshot Container */

.screenshot-container {
  background-image: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/images/ornaments/screenshot-frame.svg');
  background-repeat: no-repeat;
  background-position: 0 0;
  padding-top: 24px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: max-content;
  max-width: 100%;
}

.screenshot-container img {
  border: 1px solid rgba(29, 30, 28, 80%) !important;
  border-bottom-right-radius: 8px;
  max-width: 100%;
}

@media (max-width: 850px) {
  .screenshot-container {
    background-image: none;
    padding-top: 0;
  }
  .screenshot-container img {
    border: 1px solid rgba(29, 30, 28, 20%) !important;
    border-radius: 10px 0 10px 0;
  }
}


/* Timeline Layout */

.timeline-layout-container {
  display: flex;
  padding-top: 48px;
}

.timeline-milestone {
  flex: 1;
  border-left: 1px solid rgba(250, 93, 0, 100%);
  min-height: 200px;
  position: relative;
}

.milestone-content.text-milestone {
  padding: 22px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  align-items: flex-start;
}

.expanded-milestone {
  flex-basis: 20%;
}

.timeline-tab {
  position: absolute;
  top: -48px;
  border: 1px solid rgba(250, 93, 0, 100%);
  border-top-left-radius: 16px;
  border-bottom-right-radius: 16px;
  color: rgba(250, 93, 0, 100%);
  font-weight: 600;
  font-size: 20px;
  padding: 0 22px;
  height: 48px;
  line-height: 48px;
  left: -1px;
  display: inline-block;
}

@media (max-width: 850px) {
  .timeline-layout-container {
    flex-direction: column;
  }

  .timeline-milestone {
    flex: auto;
    height: auto;
    margin-bottom: 80px;
    min-height: 0;
  }

  .timeline-milestone:last-of-type {
    margin-bottom: 0;
  }
}

/* CTAs */

.trial-actions {
  width: 100%;
}

.trial-terms {
  font-size: 18px;
  margin-top: 20px;
  margin-left: 15px;
  display: inline-block;
  color: rgba(29, 30, 28, 60%);
}

@media (max-width: 1250px) {
  .trial-terms {
    font-size: 16px;
  }
}

@media (max-width: 1125px) {
  .trial-terms {
    margin-left: 0;
    display: block;
  }
}



@media (max-width: 850px) {
  .trial-terms {
    width: 100%;
    text-align: center;
    font-size: 16px;
  }
}


/* Harvest check list ----------------------------------------------------
   Shared bullet style used anywhere we need the hand-drawn Harvest
   coral check (trial terms, footer CTA, sign-up lists, etc.). Markup
   opts in with `class="checked-items"` on the <ul>. The SVG carries
   its own coral fill so a plain background-image is enough. */
.checked-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.checked-items li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.checked-items li::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 14px;
  background-image: var(--asset-check-bullet-coral);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Features Checklist */

.feature-checklist {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.feature-checklist li {
  font-size: 20px;
  padding-left: 25px;
  background-image: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/images/icons/check-bullet.svg');
  background-position: 0 5px;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  margin-bottom: 5px;
}
.feature-checklist li:last-of-type {
  margin-bottom: 0;
}

.feature-checklist.green-checklist li {
    background-image: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/images/icons/icon-checklist-green.svg');
}

.feature-checklist.black-checklist li {
    background-image: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/images/icons/icon-checklist-black.svg');
}

/* Customer Logo Row */

.customer-logo-container {
  display: block;
  width: 100%;
}


.customer-logo-container .customer-count {
  font-size: 18px;
  color: rgba(29, 30, 28, 60%);
  display: inline;
  top: -17px;
  position: relative;
  padding-right: 10px;
  margin-bottom: 20px;
  background: rgba(255, 248, 241, 100%);
}

.customer-logo-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0;
}

.customer-logo-row img {
  opacity: 0.35;
}

@media (max-width: 1050px) {
  .deloitte {
    display: none;
  }
  .tbrand {
    display: none;
  }
}
@media (max-width: 1050px) {
  .customer-logo-row img {
    height: 45px;
  }
}

@media (max-width: 850px) {
  .customer-logo-container.border-top {
    border: 0;
  }
}

/* Callout */

.callout {
  background: #fff;
  border-radius: 16px;
  padding: 30px;
}


/* List Links */

.link-list {
  margin: 0;
  width: 100%;
  padding: 0;
}

.link-list li {
  list-style: none;
  padding: 0;
}

.link-list a {
  align-items: center;
  background: transparent;
  border-bottom: 1px solid rgba(250, 93, 0, 100%);
  color: rgba(29, 30, 28, 100%);
  cursor: pointer;
  display: flex;
  font-size: 22px;
  font-weight: 500;
  justify-content: space-between;
  outline: 0;
  padding: 20px 60px 20px 25px;
  text-align: left;
  transition: all 0.2s;
  width: 100%;
  background-image: url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/images/icons/arrow-right-32.svg');
  background-position: right 20px center;
  background-repeat: no-repeat;
}

.link-list li:first-of-type a {
  border-top: 1px solid rgba(250, 93, 0, 100%);
}

.link-list a:hover,
.link-list a:focus {
  background-color: rgba(250, 93, 0, 5%);
  color: rgba(250, 93, 0, 100%);
  text-decoration: none;
}

.link-list a

/* Responsive */
@media screen and (max-width: 850px) {
  .desktop-only {
    display: none;
  }
}
/* Wave Header */

.section-header-wave {
  background: #f8f5f1 url('https://19495563.fs1.hubspotusercontent-na1.net/hubfs/19495563/raw_assets/public/hubspot-theme-2026/images/backgrounds/wave.svg') repeat-x center bottom;
  margin-top: -300px;
  padding-top: 300px;
}

@media (max-width: 850px) {
  .section-header-wave {
    background-image: none;
  }
}

/* Email Signup Form */

.email-signup-form {
  display: flex;
}

form input[type=submit].email-signup-submit {
  margin-left: 10px;
  white-space: nowrap;
}

.email-signup-embed .trial-terms {
  margin-left: 0;
}

@media (max-width: 980px) {
  .email-signup-form {
    flex-direction: column;
  }
  form input[type=submit].email-signup-submit {
    margin-left: 0;
    margin-top: 15px;
  }

}


/* CTA Footer - Simple */

.footer-cta-simple {
  background: #fff;
  border-top: 1px solid rgba(250, 93, 0, 100%);
}

.footer-cta-title {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;
  margin: 0 0 8px;
}

.footer-cta-subtitle {
  font-size: 24px;
  color: rgba(29, 30, 28, 80%);
  margin: 0 0 16px;
}


.footer-illustration {
  max-width: 380px;
  width: 100%;
}

@media (max-width: 850px) {
  .footer-signup-illustration {
    display: none;
  }
}

/* CTA Footer - Customer Logos */
.footer-cta-logos  {
  text-align: center;
}

.footer-cta-logos .customer-logo-row {
  border-top: 1px solid rgba(0,0,0,0.05);
  padding: 30px 0;
}

/* temporary hide for customer logos until a review and update can be done */
#main-content .customer-logos {
  display: none;
}

#main-content.forecast .signup-footer .content-wrapper {
  padding-top: 0;
  border-top: none;
}

#main-content #homepage-customers .customer-logo-container {
  border-top: none;
  margin-top: 0;
}

#main-content.features-subpage .content-wrapper.first-wrapper {
  padding-bottom: 60px;
}

#landing-header .customer-logo-container {
  display: none;
}
/* ============================================
   ACTION BUTTON COMPONENT
   Reusable button with color variants and states
   Uses design tokens from tools/_variables.css
   
   Usage:
   - Variant: .action-button--primary or .action-button--secondary
   - State: .action-button--state-disabled, .action-button--state-loading
   - Modifier: .action-button--full-width
   ============================================ */

/* ============================================
   BASE STYLES
   ============================================ */

.action-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  box-sizing: border-box;
  white-space: nowrap;
}

.action-button__icon {
  flex-shrink: 0;
}

/* ============================================
   PRIMARY VARIANT
   Green background, white text
   ============================================ */

/* Default state */
.action-button--primary {
  background: #188433;
  border-color: #188433;
  color: #ffffff;
}

/* Hover & Focus states */
.action-button--primary:hover,
.action-button--primary:focus {
  background: #0B6221;
  border-color: #0B6221;
  color: #ffffff;
  text-decoration: none;
}

/* Active state */
.action-button--primary:active {
  background: #0B6221;
  filter: brightness(0.9);
  transition: none;
}

/* Disabled state */
.action-button--primary.action-button--state-disabled,
.action-button--primary:disabled,
.action-button--primary[disabled] {
  background: #8D8E8D;
  border-color: #8D8E8D;
  color: #ffffff;
  cursor: not-allowed;
  pointer-events: none;
}

.action-button--primary.action-button--state-disabled .action-button__icon,
.action-button--primary:disabled .action-button__icon,
.action-button--primary[disabled] .action-button__icon {
  opacity: 1; /* Keep icon visible on grey background */
}

/* Loading state */
.action-button--primary.action-button--state-loading {
  position: relative;
  color: transparent;
  background: rgba(29, 30, 28, 100%);
  border-color: rgba(29, 30, 28, 100%);
  pointer-events: none;
  cursor: wait;
}

.action-button--primary.action-button--state-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: calc(-1 * 8px);
  margin-top: calc(-1 * 8px);
  border: 2px solid transparent;
  border-top-color: #ffffff;
  border-right-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 0.6s linear infinite;
}

/* ============================================
   SECONDARY VARIANT
   White background, grey border and text
   ============================================ */

/* Default state */
.action-button--secondary {
  background: #ffffff;
  border-color: rgba(29, 30, 28, 10%);
  color: rgba(29, 30, 28, 100%);
}

/* Hover & Focus states */
.action-button--secondary:hover,
.action-button--secondary:focus {
  background: rgba(29, 30, 28, 5%);
  border-color: rgba(29, 30, 28, 20%);
  color: rgba(29, 30, 28, 100%);
  text-decoration: none;
}

/* Active state */
.action-button--secondary:active {
  background: rgba(29, 30, 28, 10%);
  border-color: rgba(29, 30, 28, 40%);
  transition: none;
}

/* Disabled state */
.action-button--secondary.action-button--state-disabled,
.action-button--secondary:disabled,
.action-button--secondary[disabled] {
  background: #ffffff;
  border-color: rgba(29, 30, 28, 5%);
  color: rgba(29, 30, 28, 40%);
  cursor: not-allowed;
  pointer-events: none;
}

.action-button--secondary.action-button--state-disabled .action-button__icon,
.action-button--secondary:disabled .action-button__icon,
.action-button--secondary[disabled] .action-button__icon {
  opacity: 0.4; /* Reduce icon visibility on disabled */
}

/* Loading state */
.action-button--secondary.action-button--state-loading {
  position: relative;
  color: transparent;
  background: #ffffff;
  border-color: rgba(29, 30, 28, 10%);
  pointer-events: none;
  cursor: wait;
}

.action-button--secondary.action-button--state-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: calc(-1 * 8px);
  margin-top: calc(-1 * 8px);
  border: 2px solid transparent;
  border-top-color: rgba(29, 30, 28, 100%);
  border-right-color: rgba(29, 30, 28, 100%);
  border-radius: 50%;
  animation: button-loading-spinner 0.6s linear infinite;
}

/* ============================================
   LINK VARIANT
   Lightweight link-style button (from Figma: Type=Link)
   ============================================ */

/* Default state */
.action-button--link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  background: transparent;
  border: none;
  color: #376BDD;
  font-family: "Muoto VAR", "MuotoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.2s;
  border-radius: 8px;
}

/* Hover & Focus states */
.action-button--link:hover,
.action-button--link:focus {
  color: #2A59C1;
  background: transparent;
  text-decoration: none;
}

/* Active state */
.action-button--link:active {
  color: #2A59C1;
  filter: brightness(0.9);
  transition: none;
}

/* Icon styles */
.action-button--link svg,
.action-button--link .action-button__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.action-button--link svg path {
  stroke: #376BDD;
  stroke-width: 1.33px;
  transition: stroke 0.2s;
}

.action-button--link:hover svg path,
.action-button--link:focus svg path {
  stroke: #2A59C1;
}

/* Disabled state */
.action-button--link.action-button--state-disabled,
.action-button--link:disabled,
.action-button--link[disabled] {
  color: rgba(29, 30, 28, 40%);
  cursor: not-allowed;
  pointer-events: none;
}

.action-button--link.action-button--state-disabled svg path,
.action-button--link:disabled svg path,
.action-button--link[disabled] svg path {
  stroke: rgba(29, 30, 28, 40%);
}


/* ============================================
   SHARED UTILITIES
   ============================================ */

/* Loading spinner animation */
@keyframes button-loading-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Focus visible for accessibility */
.action-button:focus-visible {
  outline: 2px solid rgba(250, 93, 0, 100%);
  outline-offset: 2px;
}

/* Full width modifier */
.action-button--full-width {
  width: 100%;
  justify-content: center;
}