/* Theme base styles */
@font-face {
  font-family: 'Cal Sans';
  src: url('https://4222710.fs1.hubspotusercontent-na1.net/hubfs/4222710/Otto-fonts/CalSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Overused Grotesk';
  src: url('https://4222710.fs1.hubspotusercontent-na1.net/hubfs/4222710/Otto-fonts/OverusedGrotesk-Roman.woff') format('woff'),
       url('https://4222710.fs1.hubspotusercontent-na1.net/hubfs/4222710/Otto-fonts/OverusedGrotesk-Roman.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* 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
*/

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

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

main {
  background: white;
}
/*! 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, body {
  height: 100%;
  margin: 0;
  background-color: #f9fafb;
}

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

:target {
  scroll-margin-top: 80px;
}

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

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

body {
  margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

legend {
  padding: 0;
}

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

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

details {
  display: block;
}

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

summary {
  display: list-item;
}

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



/* CSS variables */

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

/* Mobile layout */

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


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

/* Desktop layout */

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

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
.content-wrapper {
  margin: 0 auto;
}

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

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

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

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

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

/* @link https://utopia.fyi/type/calculator?c=360,18,1.125,1240,22,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--3: clamp(0.7901rem, 0.7666rem + 0.1044vw, 0.7958rem);
  --step--2: clamp(0.8889rem, 0.8619rem + 0.1199vw, 0.9549rem);
  --step--1: clamp(1rem, 0.9403rem + 0.2652vw, 1.1458rem);
  --step-0: clamp(1.125rem, 1.0227rem + 0.4545vw, 1.375rem);
  --step-1: clamp(1.2656rem, 1.1084rem + 0.6989vw, 1.65rem);
  --step-2: clamp(1.4238rem, 1.1963rem + 1.0112vw, 1.98rem);
  --step-3: clamp(1.6018rem, 1.2851rem + 1.4076vw, 2.376rem);
  --step-4: clamp(1.802rem, 1.3728rem + 1.9076vw, 2.8512rem);
  --step-5: clamp(2.0273rem, 1.457rem + 2.5348vw, 3.4214rem);
}
/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */

body {
  font-size: var(--step-0) !important;
  line-height: 1.4;
  overflow-wrap: break-word;
}

body, p {
    font-family: 'Overused Grotesk', sans-serif !important;
}

/* @media (max-width: 767px) {
  body {
    line-height: 1.3;
  }
} */

/* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this.  */

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

/* Paragraphs */

p {
  /* font-size: var(--step-0) !important; */
  margin: 0 0 1.4rem;
}

/* Anchors */

a {
  font-family: 'Overused Grotesk', sans-serif !important;
  cursor: pointer;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Cal Sans', sans-serif !important;
  margin: 0 0 1rem;
  line-height: 1.125;
}

h1 { font-size: var(--step-5) !important; }
h2 { font-size: var(--step-4) !important; }
h3 { font-size: var(--step-3) !important; }
h4 { font-size: var(--step-2) !important; }
h5 { font-size: var(--step-1) !important; }
h6 { font-size: var(--step-1) !important; }

/* Lists */

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

li {
  margin: 0 0 0.5rem 0;
}

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

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

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  border-left: 2px solid #912fe3 !important;
  margin: 1.5rem 0;
  padding-left: 2rem;
}

blockquote p {
  font-size: var(--step-1);
}

/* Horizontal rules */

hr {
  border: none;
  border-bottom: 1px solid #912fe3;
  margin: 2rem 0;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}
button,
.button,
.hs-button {
/*   text-transform: uppercase; */
  cursor: pointer;
  font-weight: 600 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  transition: all 0.15s linear;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  animation-duration: .2s;
  white-space: normal;
  padding: 1rem 1.5rem;
  font-size: 16px;
  text-decoration: none;
  border-radius: 9999px;
  box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}

button:hover,
button:focus,
button:active,
.button:hover,
.button:focus,
.button:active,
.hs-button:hover,
.hs-button:focus,
.hs-button:active {
  text-decoration: none;
/*   transform: scaleX(1.05) scaleY(1.05); */
}

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

/* No button */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}

/* Button icon */
.button__icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;    
}

.button__icon span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;  
}
.button__icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Styles */

.button--small {
  padding: 0.4rem 1.25rem;
  font-size: var(--step--1);
}

.button--style1 {
  border: 2px solid #9234ea;
  background-color: #9234ea;
  color: #ffffff;
}

.button--style1:hover,
.button--style1:focus,
.button--style1:active {
  border-color: #7e22ce;
  background-color: #7e22ce;
  color: #ffffff; 
}

.button--style3 {
  position: relative;
  display: inline-block;
  padding: 14px 36px;
  font-size: 18px;
  font-weight: 600;
  color: #000; /* Black text */
  text-align: center;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  overflow: hidden;

  /* Green gradient depth */
  background: linear-gradient(
    180deg,
    #d9ff9f 0%,     /* lighter highlight */
    #c1ff72 45%,    /* brand base */
    #9fe04a 100%    /* darker base for depth */
  );

  /* 3D depth */
  box-shadow:
    inset 0 3px 6px rgba(255, 255, 255, 0.6),  /* top inner shine */
    inset 0 -6px 10px rgba(0, 0, 0, 0.25),     /* bottom curve */
    0 6px 14px rgba(0, 0, 0, 0.15);            /* outer shadow */

  transition: all 0.15s ease-in-out;
}

.button--style3::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.5),
    rgba(255,255,255,0.15) 40%,
    transparent 65%
  );
  pointer-events: none;
}

.button--style3:hover {
  color: #000; /* Black text */
  transform: translateY(-1px);
  box-shadow:
    inset 0 3px 6px rgba(255, 255, 255, 0.7),
    inset 0 -6px 10px rgba(0, 0, 0, 0.25),
    0 10px 18px rgba(0, 0, 0, 0.25);
}

.button--style3:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 6px 12px rgba(0, 0, 0, 0.35),
    inset 0 -2px 4px rgba(255, 255, 255, 0.4);
}

.button--style2 {
  border: 2px solid #9234ea;
  background-color: transparent;
  color: #9234ea;
}

.button--style2:hover,
.button--style2:focus,
.button--style2:active {
  background-color: #9234ea;
  color: #ffffff;  
}

.rich-content--light .button--style1 {
  border: 2px solid #C1FF72;
  background-color: #C1FF72;
  color: #000000;
  transition: box-shadow 300ms ease, transform 300ms ease;
}

.rich-content--light .button--style1:hover,
.rich-content--light .button--style1:focus,
.rich-content--light .button--style1:active {
  border-color: #C1FF72;
  background-color: #C1FF72;
  color: #000000;
  box-shadow: 0 10px 20px 2px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.rich-content--light .button--style2 {
  border: 2px solid #ffffff;
  background-color: transparent;
  color: #ffffff;
}

.rich-content--light .button--style2:hover,
.rich-content--light .button--style2:focus,
.rich-content--light .button--style2:active {
  background-color: #ffffff;
  color: #9234ea;  
}
/* Fields */

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

/* Labels */

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

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

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

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

form textarea {
  resize: vertical;
}

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

/* Inputs - checkbox/radio */

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

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

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

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

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

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

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

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

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  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;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


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

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

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

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

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

/* Table */

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

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

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

/* Locks background scroll while the mobile nav drawer is open — toggled
   via x-effect on <header> in templates/partials/header.html, watching
   the same mobileMenuOpen state that drives the drawer itself. */
body.nav-open {
  overflow: hidden;
}

/* Header */
.header {
  /* No backdrop-filter here on purpose: it would make .header a containing
     block for its own position:fixed descendants (the mobile nav drawer
     included), breaking their positioning relative to the viewport. The
     frosted-glass look still holds because .header__blur-bg (a sibling,
     not a child) already blurs the page content behind it — this
     translucent background just shows that pre-blurred backdrop through. */
  background-color: rgb(255 255 255 / 0.95) !important;
  position: fixed;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  padding: 1rem 2rem;
  z-index: 1000;
  border-radius: 1rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.header__blur-bg {
  /* Kept one step below .header (1000) so the header's own content still
     paints on top of its backdrop, but comfortably above every other
     fixed/positioned element on the site (highest elsewhere is 100) so
     new modules can't reintroduce this same overlap again. Deliberately
     still below the modal layer (.modal-overlay/.modal-wrapper, 9998/9999
     in otto-theme/css/components/_modals.css) — a modal should cover the
     nav too, not sit behind it. */
  position: fixed;
  top: -0.5rem;
  left: -0.5rem;
  right: -0.5rem;
  height: 7rem;
  z-index: 999;
  pointer-events: none;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  mask-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

.header__ctas {
  display: flex;
  gap: 0.5rem;
}


.body-container-wrapper {
  padding-top: 80px;
}

/* Header container */
.header__container {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

/* @media (min-width: 767px) {
  .header__container {
    
  }
} */

/* 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: auto;
  max-width: 200px;
  overflow: hidden;
}

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

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

/* Header navigation */

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

.header__menu {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 0.1rem;
}

.header__menu li {
  margin: 0;
  padding: 0;
  position: relative;
}


.header__menu li a {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.4rem;
  border-radius: 0.25rem;
  font-size: var(--step--1);
  text-decoration: none;
  transition: background-color 0.3 ease;
}

.header__menu li a:hover {
  background-color: #fff;
}

.header__menu-item--has-submenu > a {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.header__menu-item--has-submenu > a span {
  display: flex;
  width: 12px;
  height: 12px;
}

.header__menu-item--has-submenu > a svg {
  fill: #9233ea;
  width: 12px;
  height: 12px;
  transition: transform 0.4s ease-in-out;
}

.header__menu-item--has-submenu:hover > a svg {
  transform: rotate(180deg);
}

.header_ctas {
  gap: 0.5rem;
}

/* Dropdown submenu */

.header__submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: -1rem;
  background-color: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 1rem;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 230px;
  z-index: 10;
  overflow: hidden;
}

.header__menu li:hover > .header__submenu {
  display: block;
}

.header__submenu li {
  margin: 0;
  padding: 0;
}

.header__submenu li a {
  display: block;
  padding: 0.75rem 1.25rem;
  font-size: var(--step--1);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.header__submenu li a:hover {
  background-color: #f9fafb;
}


/* Mobile menu toggle */

.header__mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 100;
  box-shadow: none;
}

.header__mobile-toggle svg {
  width: 24px;
  height: 24px;
  color: #1f2937;
}

@media (max-width: 767px) {
  .header {
    padding: 0.75rem 1rem;
  }

  .header__mobile-toggle {
    display: block;
  }

  .header__navigation {
    /* Fixed inset on all four sides at all times (open or closed) — the
       slide is done with transform, not by animating right/width, so it's
       a genuine GPU-accelerated slide with no layout thrashing. Sits at
       z-index 900: below .header (1000) and .header__blur-bg (999) so the
       glassy top nav visually stays on top of the drawer as it slides in
       behind it, sharing the same 1rem top inset. */
    position: fixed;
    top: 6rem;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    background-color: rgb(255 255 255 / 0.85);
    backdrop-filter: blur(12px);
    border-radius: 1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateX(calc(100% + 2rem));
    transition: transform 0.3s ease-in-out;
    z-index: 900;
    flex-direction: column;
    padding: 2rem;
    gap: 1rem;
    overflow-y: auto;
  }

  .header__navigation--open {
    transform: translateX(0);
  }

  .header__menu {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
    min-width: 242px;
  }

  .header__menu li {
    width: 100%;
    border-bottom: 1px solid #ebdef7;
  }

  .header__menu li a {
    display: block;
    padding: 0.5rem 0;
    width: 100%;
    font-size: var(--step-1);
  }

  .header__menu-item--has-submenu > a svg {
    display: none;
  }

  .header__submenu {
    position: static;
    display: block;
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 1rem;
    background-color: rgb( 255 255 255 / 0 );
    padding: 0;
  }

  .header__menu-item--has-submenu:hover > .header__submenu {
    display: block;
  }

  .header__submenu li {
    border-bottom: none;
  }

  .header__submenu li a {
    padding: 0.5rem 0.75rem;
    margin-left: 0.1rem;
    border-left: 1px solid #ebdef7;
    border-radius: 0;
    font-size: var(--step-1);
  }

  .header__menu-item--has-submenu > a span {
    display: none;
  }

  .hs_cos_wrapper,
  .hs_cos_wrapper_header_ctas {
    width: 100% !important;
  }

  .header__ctas {
    flex-direction: column;
    width: 100%;
  }

  .header__ctas .button {
    width: 100%;
    justify-content: center;
  }
}
.body-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.body-container-wrapper {
  flex: 1;
}

/* Footer */
.footer {
  background-color: #f2e5ff !important;
  position: relative;
  padding: 1rem;
}

.footer-inner {
  /* !important: theme-overrides.css sets this from the theme's Footer
     background setting (itself inherited from the Brand Kit secondary
     color unless explicitly overridden), and loads after this file in
     the build, so it would otherwise win on equal specificity. Hardcoding
     it here takes the color out of that inheritance chain entirely. */
  background-color: #9233ea;
  padding: 3rem 2.5rem 17dvw;
  border-radius: 1rem;
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.14), 0 2px 8px rgb(0 0 0 / 0.06);
  /* Decorative dot-wave pattern, anchored to the bottom edge and not
     repeated. A relative path here resolves wrong -- HubSpot's CSS
     bundler flattens all component files into one combined stylesheet
     at a different virtual location, breaking relative url()s. Design
     Manager assets are only reliably referenced via get_asset_url() in
     HubL templates, which isn't available in a plain .css file, so this
     hardcodes the same absolute URL that helper would produce (found by
     checking how the theme's own favicon links actually resolve live). */
  background-image: url("https://4222710.fs1.hubspotusercontent-na1.net/hubfs/4222710/raw_assets/public/otto/images/Otto-wave.svg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
}

.footer:before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  background-image: linear-gradient(transparent,#f2e5ff);
  height: 40px;
  /* Purely decorative and sits above .footer's own top edge, overlapping
     whatever content precedes the footer on the page -- without this it
     would silently intercept clicks/hovers meant for that content. */
  pointer-events: none;
}

/* Header container */

.footer__container {
  /* Named grid areas (not flex) so the app-download CTA and store badges
     can slot into the gap left by Restaurants/Resources/Fine Print's
     shorter link lists, without needing to match Solutions' full height. */
  display: grid;
  grid-template-areas:
    "copy"
    "appcta"
    "badges"
    "solutions"
    "restaurants"
    "resources"
    "fineprint";
  gap: 2rem;
}

.footer__copy { grid-area: copy; }
.footer__menu-column--solutions { grid-area: solutions; }
.footer__menu-column--restaurants { grid-area: restaurants; }
.footer__menu-column--resources { grid-area: resources; }
.footer__menu-column--fineprint { grid-area: fineprint; }
.footer__app-cta { grid-area: appcta; }
.footer__app-badges { grid-area: badges; }

.footer__app-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* background-color: #ffffff; */
  border: 1px solid #f2e5ff;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  text-decoration: none !important;
  height: 100%;
}

.footer__app-cta img {
  flex-shrink: 0;
}

.footer__app-cta h4 {
  color: #fff !important;
  font-size: var(--step-1) !important;
  margin: 0;
}

.footer__app-badges {
  /* Side by side by default (mobile and the intermediate tier below);
     stacked vertically only at the 1200px+ tier, where they sit under
     the narrower Fine Print column instead of spanning a wide row. */
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
}

.footer__app-badges img {
  display: block;
}

.footer__copy-top {
  /* Column by default (mobile) and again at the wide desktop breakpoint
     below -- logo stacked above the text. Only the intermediate range
     (640px-766px) switches to a row, logo to the left of the text,
     matching the requested non-monotonic layout. */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__logo-link {
  /* flex-shrink: 0 belongs on this element now, not .footer__logo --
     it's the direct child of the .footer__copy-top flex container,
     the img is one level further in. display:block avoids the anchor's
     default inline box adding stray whitespace/line-height around it. */
  display: block;
  flex-shrink: 0;
}

@media (min-width: 640px) and (max-width: 766px) {
  .footer__copy-top {
    flex-direction: row;
    align-items: flex-start;
  }
}

h4.footer__menu-title {
  font-size: var(--step-0) !important;
  margin-bottom: 0.5rem;
}

ul.footer__menu-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  display: flex;
  flex-direction: column;
}

ul.footer__menu-list li {
  padding: 0.15rem 0;
  margin: 0;
}

ul.footer__menu-list li a {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);  
  text-decoration: none;
  color: #d8dce1;
  font-weight: 500;
  font-size: var(--step--1) !important;
}

ul.footer__menu-list li a:hover,
ul.footer__menu-list li a:focus,
ul.footer__menu-list li a:active {
  text-decoration: none;  
  color: #ffffff;
}

.footer__social {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d8dce1;
  transition-property: color;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: 150ms;
}

.footer__social-link:hover,
.footer__social-link:focus {
  color: #ffffff;
}

.footer__social-link svg {
  width: 40px;
  height: 40px;
}

/* Three container tiers, narrowest to widest:
   - below 767px (base rules above): single column, everything stacked
   - 767px-1199px: copy/app-CTA/badges share one row, menu columns drop
     into a 2-column grid (Solutions above Restaurants on the left,
     Resources above Fine Print on the right)
   - 1200px+: full 5-across layout, with the app CTA and badges filling
     the gap left by Restaurants/Resources/Fine Print's shorter lists.
     Doesn't fit below 1200px -- the fixed 390px copy column plus four
     140px column minimums plus gaps need ~1110px of content width, and
     .content-wrapper's max-width minus .footer's own 64px of horizontal
     padding leaves barely enough room at exactly 1200px. */
@media (min-width: 767px) {

  .footer__social {
    margin-bottom: 1rem;
  }

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

}

@media (min-width: 767px) and (max-width: 1199px) {

  .footer__container {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "copy        copy        appcta     appcta"
      "copy        copy        badges     badges"
      "solutions   solutions   resources  resources"
      "restaurants restaurants fineprint  fineprint";
    align-items: start;
    gap: 2rem;
  }

}

@media (min-width: 1200px) {

  .footer__container {
    grid-template-columns: 390px repeat(4, minmax(140px, 1fr));
    grid-template-areas:
      "copy solutions restaurants resources fineprint"
      "copy solutions appcta      appcta    badges";
    align-items: start;
    gap: 2rem;
  }

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

}
[x-cloak] { display: none !important; }

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}

.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
  overflow-y: auto; /* Allow scrolling when content overflows */
}

.modal-content {
  background: white;
  border-radius: 0.5rem;
  padding: 2.5rem;
  max-width: 500px;
  width: 100%;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-height: calc(100vh - 2rem); /* Constrain height to viewport minus padding */
  overflow-y: auto; /* Allow internal scrolling if content still overflows */
  margin: auto; /* Center when smaller than viewport */
}

/* Modal close */
.modal-close {
  display: block;
  color: #000;
  border: none;
  background: none;
  padding: 1rem;
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1; /* Ensure close button stays above scrolled content */
}
.modal-close:hover {
  scale: none;
}
.modal-close svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.modal__small {
  padding-top: 2rem;
}
.modal__small p {
  font-size: 0.8rem;
}

/* Responsive adjustments following Otto theme patterns */
@media (max-width: 767px) {
  .modal-wrapper {
    padding: 0.5rem;
    align-items: flex-start; /* Align to top on mobile for better UX */
    padding-top: 2rem;
  }
  
  .modal-content {
    max-height: calc(100vh - 1rem);
    padding: 1.5rem;
  }
}
/* 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;
  }
}

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

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}

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

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

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

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