/* 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
Loaded first so every rule below can resolve against them. Paper is the
default ground; `.night` inverts a subtree. See css/tokens.css.
*/

/* ============================================================
   DESIGN TOKENS — NORDIC LEDGER
   ------------------------------------------------------------
   Ported from the Surfboard Payments site
   (surfboard-payments-website-astro/src/styles/tokens.css +
   v2.css) so surfpay.surfboardpayments.com reads as the same
   brand as its parent.

   ONE DIFFERENCE FROM THE PARENT SITE, and it matters:
   over there PAPER is opt-in — night lives on `:root` and the
   `.v2` wrapper flips a page to paper. Here the whole site is
   paper, so paper IS `:root` and `.night` is the inverter.

   Consequence: a section only has to add `night` to become a
   dark movement. Everything inside it — buttons, rules, ink,
   plates — follows, because nothing below hard-codes colour.

   Principles carried over:
   - Paper, not panels. Hairlines carry structure; cards are
     the exception, not the default.
   - Ink hierarchy in three steps. No gray-on-colour.
   - One accent (Ocean Blue). Coral Green appears only as a
     small filled signal, never as text on paper.
   - Motion is short, exponential, and always optional.
   ============================================================ */

:root {
  /* ---- Surface ---------------------------------------------------- */
  --paper: #f3f4f8;          /* cool Nordic daylight, never pure white */
  --paper-raised: #fafbfd;   /* lifted planes: device plates, quotes   */
  --paper-sunk: #e8eaf1;     /* recessed bands                          */

  /* ---- Ink, all >= 4.5:1 on --paper -------------------------------- */
  --ink: #060c2b;            /* 16.9:1, headlines, body                */
  --ink-2: #3b4468;          /* 8.4:1, secondary prose                 */
  --ink-3: #5d6689;          /* 5.4:1, meta, captions, chapter names   */

  /* ---- Rules ------------------------------------------------------ */
  --rule: rgba(6, 12, 43, 0.13);
  --rule-strong: rgba(6, 12, 43, 0.28);
  --rule-faint: rgba(6, 12, 43, 0.07);

  /* ---- Brand ------------------------------------------------------ */
  --sea: #0e44e1;            /* Ocean Blue, links, interaction         */
  --sea-deep: #092793;       /* Deep Blue Sea, hover, emphasis         */
  --deep: #010927;           /* the night ground                       */
  --deep-2: #050f36;
  --foam: #00ffa7;           /* Coral Green, filled signals only       */
  --foam-ink: #056b48;       /* 6.1:1 on paper, the accent as TEXT     */

  /* ---- Translucent fills (chips, soft panels) ---------------------- */
  --tint: rgba(6, 12, 43, 0.04);
  --tint-strong: rgba(6, 12, 43, 0.07);

  /* ---- Primary action --------------------------------------------- */
  /* Neon-on-paper is the one thing this design will not do, so the
     primary action is ink and carries no glow. */
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bg-hover: var(--sea);
  --btn-fg-hover: #ffffff;
  --btn-shadow: none;

  /* ---- Rhythm ----------------------------------------------------- */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --measure: 62ch;
  --chapter-y: clamp(4.5rem, 9vw, 9rem);

  /* ---- Motion ----------------------------------------------------- */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   NIGHT — the inverter
   ------------------------------------------------------------
   A dark movement inside a paper site. Redefines the same token
   names rather than restating every rule, so one class flips a
   whole subtree. Used for the hero, the closing CTA, the footer,
   and any section that wants weight.
   ============================================================ */

.night {
  --paper: var(--deep);
  --paper-raised: #071140;
  --paper-sunk: #000618;

  --ink: #f2f5ff;
  --ink-2: #b9c4e8;
  --ink-3: #8b96be;

  --rule: rgba(213, 223, 247, 0.16);
  --rule-strong: rgba(213, 223, 247, 0.34);
  --rule-faint: rgba(213, 223, 247, 0.08);

  --sea: #7ba0ff;            /* links have to lift off the dark ground */
  --sea-deep: #a3b8f2;
  --foam-ink: var(--foam);   /* bright is right on night               */

  --tint: rgba(255, 255, 255, 0.06);
  --tint-strong: rgba(255, 255, 255, 0.10);

  /* Night gets its foam-filled action back */
  --btn-bg: var(--foam);
  --btn-fg: var(--deep);
  --btn-bg-hover: #ffffff;
  --btn-fg-hover: var(--deep);
  --btn-shadow: none;

  background-color: var(--paper);
  color: var(--ink);
}

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

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

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

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

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

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

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

body {
  margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

legend {
  padding: 0;
}

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

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

details {
  display: block;
}

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

summary {
  display: list-item;
}

/* 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;
    flex-direction: column;
  }

  
    .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;
  padding: 0 1rem;
}

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

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

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

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

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

/* 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 {
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* 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: 1rem;
  margin: 0 0 1.4rem;
}

/* Anchors */

a {
  cursor: pointer;
}

/* Headings */

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

/* Lists */

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

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

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

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

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

/* Horizontal rules */

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

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}
button,
.button,
.hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

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


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

/* Header DND sections */

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

/* Header container */

.header__container {
  display: flex;
  justify-content: space-between;
}

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

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

@media (max-width: 1150px) and (min-width: 767px) {
  .header__column {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .header__container {
    flex-direction: column;
    padding: 1rem 0 0;
  }

  .header__column {
    position: relative;
  }

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

  .header__row-2 {
    justify-content: center;
    padding: 1.05rem;
  }
}

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

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

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

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

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

/* Search bar */

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




.header__search .hs-search-field__input {
  
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+);
    background-position: center right 15px;
    background-repeat: no-repeat;
  
  height: 45px;
  padding: 0 0.7rem;
}




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

.header__search .hs-search-field--open .hs-search-field__suggestions {
  background-color: #FFF;
  border: 2px solid #D1D6DC;
  border-radius: 0 0 6px 6px;
  border-top-width: 1px;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.header__search .hs-search-field__suggestions li {
  border-top: 1px solid #D1D6DC;
  font-size: 0.875rem;
}

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

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

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

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

  .header__search .hs-search-field__input {
    width: auto;
  }
}

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

/* Language switcher */

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

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

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

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

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

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

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

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

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

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

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

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

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

.header__language-switcher--label-current:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #494A52;
  content: "";
  display: block;
  height: 0px;
  margin-left: 0.7rem;
  margin-top: 0.175rem;
  width: 0px;
}

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

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

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

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

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

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

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

/* Navigation */

#nav-toggle {
  display: none;
}

/* Mobile toggles */

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

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

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

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

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

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

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

  .header__navigation--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5oYW1idXJnZXI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGcgaWQ9ImhhbWJ1cmdlciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iR3JvdXAiIHN0cm9rZT0iIzQ5NEE1MiIgc3Ryb2tlLXdpZHRoPSIzIj4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIxLjUiIHk9IjEuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNCIgeD0iMS41IiB5PSI5LjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS1Db3B5LTUiIHg9IjEuNSIgeT0iMTcuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

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

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

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

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

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

  .header__close--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjE5cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5jbG9zZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iY2xvc2UiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgLTEuMDAwMDAwKSIgc3Ryb2tlPSIjNDk0QTUyIiBzdHJva2Utd2lkdGg9IjMiPiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjAwMDAwMCwgMTAuNTAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMC4wMDAwMDAsIC0xMC41MDAwMDApICIgeD0iLTAuNSIgeT0iMTAuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCAxMC41MDAwMDApIHJvdGF0ZSg0NS4wMDAwMDApIHRyYW5zbGF0ZSgtMTAuMDAwMDAwLCAtMTAuNTAwMDAwKSAiIHg9Ii0wLjUiIHk9IjEwLjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-size: 110%;
    display: none;
    height: 25px;
    margin-right: 0;
    width: 25px;
  }

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

/* ============================================================
   NORDIC LEDGER HEADER
   ------------------------------------------------------------
   Appended rather than woven into the boilerplate rules above:
   those still serve the `.header` markup HubSpot renders on
   system pages, while everything below drives the custom
   partial in templates/partials/header.html.
   ============================================================ */

.header--parent {
  background: transparent;
  transition:
    background-color 0.4s var(--e-soft),
    border-color 0.4s var(--e-soft),
    backdrop-filter 0.4s var(--e-soft);
  border-bottom: 1px solid transparent;
}

/* No chrome until the reader has actually moved. `.is-stuck` is set by
   js/main.js once the page scrolls past the bar's own height. */
.header--parent.is-stuck {
  background-color: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--rule);
}

/* ---- Utility rail ------------------------------------------------------ */

.header__rail {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--rule-faint);
}

.header__parent .folio {
  transition: color 0.3s var(--e-soft);
}
.header__parent:hover .folio {
  color: var(--foam-ink);
}

.header__util {
  font-size: 0.8125rem;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.3s var(--e-soft);
}
.header__util:hover {
  color: var(--ink);
}

/* ---- Bars -------------------------------------------------------------- */

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1rem;
}

.header__mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  position: relative;
  z-index: 2;
}

/* ---- Logo -------------------------------------------------------------- */

.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo-img {
  height: 2rem;
  width: auto;
  display: block;
}

@media (min-width: 1024px) {
  .header__logo-img { height: 2.25rem; }
}

/* One mark, two grounds: the ink wordmark is the default and the night
   wordmark takes over anywhere the bar sits on a dark plane. */
.header__logo-img--night { display: none; }

.night .header__logo-img--ink,
.header--parent.on-night:not(.is-stuck):not(.open) .header__logo-img--ink { display: none; }

.night .header__logo-img--night,
.header--parent.on-night:not(.is-stuck):not(.open) .header__logo-img--night { display: block; }

/* ---- Navigation -------------------------------------------------------- */

.header__nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

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

.nav__link {
  position: relative;
  display: block;
  padding: 0.5rem 0.875rem;
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.3s var(--e-soft);
}

.nav__link:hover { color: var(--ink); }

/* The active mark is a hairline under the word, not a filled pill. */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: 0.125rem;
  height: 1px;
  background: var(--foam-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--e-out);
}

.nav__link--active { color: var(--ink); }
.nav__link--active::after { transform: scaleX(1); }

.header__cta { margin-left: 0.75rem; }

/* Nav links sit on a night ground while the hero is behind the bar. */
.header--parent.on-night:not(.is-stuck):not(.open) {
  color: #f2f5ff;
}
.header--parent.on-night:not(.is-stuck):not(.open) .nav__link,
.header--parent.on-night:not(.is-stuck):not(.open) .header__util {
  color: #b9c4e8;
}
.header--parent.on-night:not(.is-stuck):not(.open) .nav__link:hover,
.header--parent.on-night:not(.is-stuck):not(.open) .header__util:hover,
.header--parent.on-night:not(.is-stuck):not(.open) .nav__link--active {
  color: #ffffff;
}
.header--parent.on-night:not(.is-stuck):not(.open) .nav__link::after {
  background: var(--foam);
}
.header--parent.on-night:not(.is-stuck):not(.open) .header__rail {
  border-bottom-color: rgba(213, 223, 247, 0.12);
}
.header--parent.on-night:not(.is-stuck):not(.open) .btn-ink {
  background: var(--foam);
  border-color: var(--foam);
  color: var(--deep);
}
.header--parent.on-night:not(.is-stuck):not(.open) .btn-ink:hover {
  background: #ffffff;
  border-color: #ffffff;
}

/* ---- Mobile toggle ----------------------------------------------------- */

.toggle--nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
}

.toggle--nav__bar {
  display: block;
  width: 1.125rem;
  height: 1.5px;
  margin-inline: auto;
  background: var(--ink);
  transition:
    transform 0.4s var(--e-out),
    opacity 0.25s var(--e-soft);
}

/* Over a night section the bars have to invert, or the only way into the
   menu on mobile is an invisible button. `:not(.open)` because once the
   panel is open the bars sit on its paper ground again. */
.header--parent.on-night:not(.is-stuck):not(.open) .toggle--nav {
  border-color: rgba(213, 223, 247, 0.34);
}

.header--parent.on-night:not(.is-stuck):not(.open) .toggle--nav__bar {
  background: #f2f5ff;
}

.toggle--nav.open .toggle--nav__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.toggle--nav.open .toggle--nav__bar:nth-child(2) { opacity: 0; }
.toggle--nav.open .toggle--nav__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---- Mobile panel ------------------------------------------------------ */

@media (max-width: 1023px) {
  .header--parent .header--body {
    position: fixed;
    inset: 0;
    background: var(--paper);
    padding-top: 5rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.5s var(--e-out);
  }

  .header--parent.open .header--body {
    transform: translateX(0);
  }

  .header__bar {
    display: block;
    padding-block: 0;
  }

  .header__nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    padding: 1.125rem 0;
    font-size: 1.25rem;
    border-bottom: 1px solid var(--rule);
  }

  .nav__link::after {
    left: 0;
    right: auto;
    width: 1.5rem;
    bottom: 0;
  }

  .nav--util .nav__link {
    font-size: 1rem;
    color: var(--ink-3);
  }

  .header__cta {
    margin-left: 0;
    margin-top: 1.75rem;
  }
}
/* ============================================================
   NORDIC LEDGER FOOTER
   ------------------------------------------------------------
   A night plane closing a paper page. The `.night` class on the
   element itself flips the tokens, so every rule below reads
   --ink / --rule as their night values without restating them.
   ============================================================ */

.footer--wrapper {
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 3vw, 3rem);
  background-color: var(--paper);
  color: var(--ink);
}

/* ---- Masthead ---------------------------------------------------------- */

.footer__masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}

.footer__brand {
  max-width: 30rem;
}

.footer__logo {
  display: inline-flex;
  margin-bottom: 1.25rem;
}

.footer__logo-img {
  height: 2.25rem;
  width: auto;
  display: block;
}

.footer__blurb {
  margin: 0 0 1rem;
  max-width: 34ch;
}

.footer__parent {
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
}

.footer__action {
  flex-shrink: 0;
}

/* ---- Link columns ------------------------------------------------------ */

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

.footer__col-head {
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule-faint);
}

.footer__list,
.footer--wrapper .footer-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__list li,
.footer--wrapper .footer-menu li {
  margin-bottom: 0.625rem;
}

.footer__list a,
.footer--wrapper .footer-menu a {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.3s var(--e-soft);
}

.footer__list a:hover,
.footer--wrapper .footer-menu a:hover {
  color: var(--ink);
}

/* ---- Colophon ---------------------------------------------------------- */

.footer__colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid var(--rule);
}

.footer__colophon .folio {
  margin: 0;
}

/* HubSpot renders the language switcher's own markup, so it is brought in
   line here rather than in the partial. */
.footer__lang .lang_switcher_class .globe_class {
  border: 1px solid var(--rule);
  border-radius: 2px;
}

.footer__lang .lang_list_class,
.footer__lang .lang_list_class li a {
  background-color: var(--paper-raised);
  color: var(--ink-2);
  font-size: 0.875rem;
}

.footer__lang .lang_list_class li a:hover {
  color: var(--ink);
}
/* 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%;
}

/*
! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

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

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: Space Mono, ui-monospace, monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

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

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

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

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

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

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

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

progress {
  vertical-align: baseline;
}

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

::-webkit-inner-spin-button,
::-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.
*/

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

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(14 68 225 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(14 68 225 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

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

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.left-1\/2 {
  left: 50%;
}

.top-0 {
  top: 0px;
}

.top-full {
  top: 100%;
}

.z-\[999\] {
  z-index: 999;
}

.m-0 {
  margin: 0px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.-mt-20 {
  margin-top: -5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-10 {
  height: 2.5rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 1rem;
}

.h-6 {
  height: 1.5rem;
}

.h-64 {
  height: 16rem;
}

.h-8 {
  height: 2rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-32 {
  width: 8rem;
}

.w-4 {
  width: 1rem;
}

.w-6 {
  width: 1.5rem;
}

.w-8 {
  width: 2rem;
}

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

.flex-shrink {
  flex-shrink: 1;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.resize {
  resize: both;
}

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

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

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

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

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

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

.gap-6 {
  gap: 1.5rem;
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-wrap {
  text-wrap: wrap;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-md {
  border-radius: .375rem;
}

.border {
  border-width: 1px;
}

.bg-surface {
  background-color: var(--paper);
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blue-900 {
  --tw-gradient-to: #03103F var(--tw-gradient-to-position);
}

.bg-contain {
  background-size: contain;
}

.bg-cover {
  background-size: cover;
}

.bg-center {
  background-position: center;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.fill-current {
  fill: currentColor;
}

.p-4 {
  padding: 1rem;
}

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

.font-body {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.font-display {
  font-family: Space Grotesk, ui-sans-serif, sans-serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-black {
  font-weight: 900;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.text-ink {
  color: var(--ink);
}

.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(255 150 95 / var(--tw-text-opacity));
}

.underline {
  text-decoration-line: underline;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 3rem 6rem -1rem rgba(0, 0, 0, 0.075);
  --tw-shadow-colored: 0 3rem 6rem -1rem var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 768px) {
  .md\:absolute {
    position: absolute;
  }

  .md\:left-1\/2 {
    left: 50%;
  }

  .md\:top-1\/2 {
    top: 50%;
  }

  .md\:-mt-24 {
    margin-top: -6rem;
  }

  .md\:h-28 {
    height: 7rem;
  }

  .md\:h-36 {
    height: 9rem;
  }

  .md\:h-4 {
    height: 1rem;
  }

  .md\:w-28 {
    width: 7rem;
  }

  .md\:w-36 {
    width: 9rem;
  }

  .md\:w-4 {
    width: 1rem;
  }

  .md\:-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:w-auto {
    width: auto;
  }
}

/* Nordic Ledger primitives
The shared vocabulary every module is written against. After Tailwind so
these win over the utility layer, before the helpers so those still win
over these.
*/

/* ============================================================
   NORDIC LEDGER — PRIMITIVES
   ------------------------------------------------------------
   The shared vocabulary every module is written against. Colour
   comes only from the tokens in tokens.css, which is what lets
   one component serve both paper and night without knowing
   which it is in.

   Sections
     1. Typography
     2. Layout
     3. Chapter head
     4. Links
     5. Buttons
     6. Reveal
     7. Plates, chips, ruled lists
     8. Devices
     9. Forms
    10. Quotes, stats, tables
    11. Legacy bridge
   ============================================================ */

/* ============================================================
   1. TYPOGRAPHY
   ============================================================ */

.display {
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
  color: var(--ink);
}

.d-hero { font-size: clamp(2.5rem, 4.9vw, 4.5rem); line-height: 0.98; letter-spacing: -0.042em; }
.d-1    { font-size: clamp(2.15rem, 4.6vw, 4.25rem); }
.d-2    { font-size: clamp(1.55rem, 2.5vw, 2.35rem); line-height: 1.06; letter-spacing: -0.028em; }
.d-3    { font-size: clamp(1.1rem, 1.35vw, 1.35rem); line-height: 1.2;  letter-spacing: -0.018em; }

.lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: var(--measure);
  text-wrap: pretty;
}

.prose-sm {
  font-size: 0.9375rem;
  line-height: 1.68;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Small caps metadata, the folio voice of the page */
.folio {
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Prices, percentages, counts — anything that should line up in a
   column and never reflow as the digits change. */
.numeral {
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* The one place Coral Green is allowed to be text, and only because
   --foam-ink is the darkened 6.1:1 variant on paper. */
.accent-ink { color: var(--foam-ink); }

/* The `hidden` attribute must beat any component's own display value.
   Without this, `.field { display: block }` in the sign-up form defeated
   `<div id="orgno-field" hidden>` — so the "you need to select a company"
   notice and the organisation-number input were both visible on page load,
   on the registration page, before the visitor had typed anything. */
[hidden] {
  display: none !important;
}

/* Visible to assistive tech only. Defined here rather than per module —
   several modules need it, and a utility this common should have exactly
   one definition. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   2. LAYOUT — an editorial grid, not a stack of centred boxes
   ============================================================ */

.shell {
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell-narrow {
  width: 100%;
  max-width: 58rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
}

.chapter {
  padding-block: var(--chapter-y);
  position: relative;
  scroll-margin-top: 5.5rem;
  background-color: var(--paper);
  color: var(--ink);
}

/* HEADER CLEARANCE
   The header is fixed, so whatever comes first on a page sits underneath it.
   The hero and the subpage header pad themselves, because they need far more
   room than the bar is tall AND their night ground has to run all the way up
   behind it. Everything else — the drag-and-drop pages (about, pricing,
   contact, blog index) whose first section is authored in HubSpot and cannot
   be given a class from here — needs clearing.

   The catch is that a module is never the first child of <main>: HubSpot
   wraps it in body-container > dnd-section > dnd-column > dnd-row. So
   "first child is a chapter" is never true, and padding the wrapper pushed
   the hero down the page — leaving a band of paper showing through behind
   the fixed header, with the ink logo stranded on the dark hero below it.

   Hence :has(): pad the wrapper, then take it back when a self-clearing
   chapter is anywhere inside. Split into two rules rather than one
   `:not(:has())` so that a browser without :has() support drops only the
   second — it over-pads rather than hiding content under the bar. */
#main-content > *:first-child:not(.chapter):not(.hero):not(.landing) {
  padding-top: clamp(6.5rem, 12vw, 9rem);
}

/* The :not() chain above is repeated here deliberately. `:not()` takes the
   specificity of its argument, so the base rule scores (1 id, 4 classes);
   a bare `#main-content > *:first-child:has(.chapter)` is only (1 id, 2
   classes) and loses to it despite coming later. Matching the chain makes
   this (1 id, 5 classes), which wins. */
#main-content > *:first-child:not(.chapter):not(.hero):not(.landing):has(.chapter) {
  padding-top: 0;
}

/* The landing template is excluded from the rule above because it owns its
   own ground, but it is a plain drag-and-drop area with no self-clearing
   hero inside it — so it has to do the clearing itself. /register runs on
   this template, and without this its form panel sat underneath the fixed
   header. */
.landing {
  padding-top: calc(var(--header-h, 8.5rem) + clamp(1.5rem, 3vw, 3rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* A hairline that draws itself in from the left. */
.rule {
  height: 1px;
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--e-out);
}
.rule.is-in { transform: scaleX(1); }

/* ============================================================
   3. CHAPTER HEAD — numeral, name, hairline
   ------------------------------------------------------------
   Every chapter opens the same way. That repetition IS the
   structure; it is what makes a scroll feel like chapters
   rather than a pile of sections.
   ============================================================ */

.chapter-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 1.25rem;
  padding-bottom: 1.125rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(2.25rem, 4vw, 3.75rem);
}

.chapter-head .cn {
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--foam-ink);
}

.chapter-head .cname {
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================
   4. LINKS
   ============================================================ */

.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--sea);
  font-weight: 500;
  text-decoration: none;
}

.link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--e-out);
}

.link:hover::after { transform: scaleX(1); transform-origin: left center; }

.link .arw { transition: translate 0.4s var(--e-out); }
.link:hover .arw { translate: 3px 0; }

/* ============================================================
   5. BUTTONS
   ============================================================ */

.btn-ink,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.9375rem 1.5rem;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.3s var(--e-soft),
    color 0.3s var(--e-soft),
    border-color 0.3s var(--e-soft),
    translate 0.4s var(--e-out);
}

.btn-ink {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
}
.btn-ink:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
}
.btn-ghost:hover { border-color: var(--ink); }

.btn-ink[disabled],
.btn-ghost[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(1);
}

.btn-ink .arw,
.btn-ghost .arw { transition: translate 0.4s var(--e-out); }
.btn-ink:hover .arw,
.btn-ghost:hover .arw { translate: 3px 0; }

/* ============================================================
   6. REVEAL — the only entrance animation, used everywhere
   ============================================================ */

[data-reveal] {
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity 0.7s var(--e-soft),
    translate 0.75s var(--e-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

[data-reveal].is-in {
  opacity: 1;
  translate: 0 0;
}

/* Once a reveal has played, drop the transform and the transition
   entirely. `translate: 0 0` still counts as a transform, which keeps
   the element on its own compositing layer, and a layer left hanging
   over a night chapter can paint against the wrong ground. */
[data-reveal].reveal-done {
  transition: none;
  translate: none;
}

/* Word-level mask reveal, reserved for the hero. Per word rather than
   per line so it survives any wrap at any viewport — the clip box is
   always exactly one word tall. */
.sw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;   /* room for descenders, */
  margin-bottom: -0.14em;   /* taken back out of the layout */
}

.sw > i {
  display: inline-block;
  font-style: normal;
  translate: 0 110%;
  transition: translate 0.9s var(--e-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}

.split-head.is-in .sw > i { translate: 0 0; }

/* Motion is always optional. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-in,
  .sw > i,
  .rule {
    opacity: 1 !important;
    translate: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   7. PLATES, CHIPS, RULED LISTS
   ------------------------------------------------------------
   The plate is the restrained stand-in for a card. It earns its
   place with a hairline and a 2px lift, not a shadow.
   ============================================================ */

.plate {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--rule-faint);
  transition:
    border-color 0.4s var(--e-soft),
    translate 0.5s var(--e-out);
}

.plate:hover {
  border-color: var(--rule-strong);
  translate: 0 -2px;
}

/* A hairline that wipes across the top edge on hover */
.plate::before {
  content: '';
  position: absolute;
  inset: -1px auto auto -1px;
  height: 1px;
  width: calc(100% + 2px);
  background: var(--foam-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--e-out);
}
.plate:hover::before { transform: scaleX(1); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3125rem 0.6875rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--ink-2);
  white-space: nowrap;
}

/* The filled signal — the ONLY place Coral Green appears as a fill. */
.chip-signal {
  background: var(--foam);
  border-color: var(--foam);
  color: var(--deep);
  font-weight: 600;
}

/* A ruled list: rows separated by hairlines, no boxes. The default
   way to present a set of facts in this design. */
.ruled { list-style: none; margin: 0; padding: 0; }

.ruled > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.ruled > li:first-child { border-top: 1px solid var(--rule); }

/* ============================================================
   8. DEVICES — product on a plate, nothing else on it
   ============================================================ */

.device {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.device-stage {
  display: grid;
  place-items: center;
  padding: clamp(1.75rem, 3vw, 3rem);
  aspect-ratio: 4 / 3;
  background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, var(--paper-sunk) 100%);
}

.night .device-stage {
  background: radial-gradient(120% 90% at 50% 0%, var(--paper-raised) 0%, var(--paper-sunk) 100%);
}

.device-stage img {
  max-height: 100%;
  max-width: 78%;
  width: auto;
  object-fit: contain;
  transition: scale 0.7s var(--e-out);
}

.device:hover .device-stage img { scale: 1.035; }

.device-foot {
  padding: 1.125rem 1.25rem 1.25rem;
  border-top: 1px solid var(--rule-faint);
}

/* ============================================================
   9. FORMS
   ------------------------------------------------------------
   Field styling that follows the ink tokens, so a form dropped
   into a night section inverts with it.
   ============================================================ */

.field { display: block; width: 100%; }

.field-label {
  display: block;
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
}

.field-input {
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.875rem 1rem;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  transition:
    border-color 0.25s var(--e-soft),
    background-color 0.25s var(--e-soft);
}

.field-input::placeholder { color: var(--ink-3); opacity: 1; }

.field-input:focus {
  outline: none;
  border-color: var(--sea);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 18%, transparent);
}

.field-hint {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-3);
  margin-top: 0.4375rem;
}

.field-error {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #c11645;
  background: rgba(240, 28, 85, 0.07);
  border-left: 2px solid #c11645;
  padding: 0.625rem 0.875rem;
  margin-top: 0.5rem;
}

.night .field-error {
  color: #f880a1;
  background: rgba(240, 28, 85, 0.14);
  border-left-color: #f880a1;
}

.req { color: #c11645; margin-left: 0.15rem; }
.night .req { color: #f880a1; }

/* ============================================================
   10. QUOTES, STATS, TABLES
   ============================================================ */

.pullquote {
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
  border: 0;
  padding: 0;
}

.stat-n {
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}

/* A ledger table: hairlines, tabular numerals, no zebra striping. */
.ledger { width: 100%; border-collapse: collapse; }

.ledger th {
  text-align: left;
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 0 0.875rem;
  border-bottom: 1px solid var(--rule-strong);
  background: transparent;
}

.ledger td {
  padding: 1.0625rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
  background: transparent;
}

.ledger td:last-child,
.ledger th:last-child { text-align: right; }

.ledger .amount {
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================================
   11. LEGACY BRIDGE
   ------------------------------------------------------------
   Page content lives in HubSpot drag-and-drop areas and rich
   text fields, not in this repo, so a good deal of markup out
   there still carries utilities written for the old dark theme
   — `text-white`, `bg-blue-1000`, `from-blue-900`. Those cannot
   be edited from here, so they are remapped rather than hunted.

   Everything maps to a TOKEN, not a fixed colour, so inside a
   `.night` section these rules resolve back to their original
   values on their own.
   ============================================================ */

/* Dark gradient stops become clean night planes rather than muddy
   washes over paper. */
[class*='from-blue-800'],
[class*='from-blue-900'],
[class*='from-blue-1000'],
[class*='from-blue-1100'] {
  background-image: none;
  background-color: var(--paper-sunk);
}

/* Solid dark panels become night subtrees. Exact class matching (`~=`)
   so bg-blue-100 is never caught by bg-blue-1000. Deliberately excludes
   the `/opacity` variants: a `bg-blue-900/30` is used as a soft panel,
   not a dark slab. */
[class~='bg-blue-800'],
[class~='bg-blue-900'],
[class~='bg-blue-1000'],
[class~='bg-blue-1100'] {
  --paper: var(--deep);
  --paper-raised: #071140;
  --paper-sunk: #000618;
  --ink: #f2f5ff;
  --ink-2: #b9c4e8;
  --ink-3: #8b96be;
  --rule: rgba(213, 223, 247, 0.16);
  --rule-strong: rgba(213, 223, 247, 0.34);
  --rule-faint: rgba(213, 223, 247, 0.08);
  --tint: rgba(255, 255, 255, 0.06);
  --tint-strong: rgba(255, 255, 255, 0.1);
  --sea: #7ba0ff;
  --foam-ink: var(--foam);
  --btn-bg: var(--foam);
  --btn-fg: var(--deep);
  background-color: var(--deep);
  color: var(--ink);
}

/* Text colours written for night */
.text-white { color: var(--ink); }
.text-blue-100,
.text-blue-200 { color: var(--ink-2); }
.text-blue-300 { color: var(--ink-3); }

/* Faded light text lands under AA on either theme; the token is
   legible on both, so these resolve to that instead. */
[class*='text-blue-100/'],
[class*='text-blue-200/'],
[class*='text-white/'] { color: var(--ink-3); }

.text-green-300,
.text-green-400,
.text-green-500 { color: var(--foam-ink); }

/* Brand-blue fills keep white text — they are saturated on both
   themes, so the `.text-white` remap above must not reach into them. */
[class~='bg-blue-400']:not([class*='bg-opacity']),
[class~='bg-blue-500']:not([class*='bg-opacity']),
[class~='bg-blue-600']:not([class*='bg-opacity']),
[class~='bg-blue-700']:not([class*='bg-opacity']),
[class~='bg-blue-400']:not([class*='bg-opacity']) *,
[class~='bg-blue-500']:not([class*='bg-opacity']) *,
[class~='bg-blue-600']:not([class*='bg-opacity']) *,
[class~='bg-blue-700']:not([class*='bg-opacity']) * { color: #ffffff; }

/* Glow effects are a night idiom. On paper they read as smudges. */
[class*='shadow-green'],
[class*='shadow-btn'],
[class*='shadow-purple'],
[class*='shadow-success'],
[class*='shadow-slider'] { box-shadow: none; }

/* White-on-near-white has nothing to sit against, so light cards
   need an edge on paper. */
.bg-white:not(.night):not([class*='bg-blue']) { border-color: var(--rule-faint); }

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

html{
    background-color: var(--paper);
}

body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern', 'liga', 'cv11';
}

body form{
    background:transparent;
}
body form .actions {
    text-align:center;
}
/* HubSpot's own form markup can't be templated, so its submit button is
   dressed as .btn-ink here rather than in the module layer. */
body form .hs-button,
body form input[type=submit]{
    color: var(--btn-fg);
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-bg);
    border-radius: 2px;
    font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
    font-weight:600;
    font-size:.9375rem;
    letter-spacing:-0.01em;
    padding: .9375rem 1.5rem;
    box-shadow: none;
    transition: background-color .3s var(--e-soft), color .3s var(--e-soft), border-color .3s var(--e-soft);
}
body form .hs-button:hover,
body form input[type=submit]:hover{
    background-color: var(--btn-bg-hover);
    border-color: var(--btn-bg-hover);
    color: var(--btn-fg-hover);
}
/* Fields follow the ink tokens so a form in a night section inverts with it. */
body form .hs-input:not([type=checkbox]):not([type=radio]){
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    padding: .875rem 1rem;
}
body form .hs-input:focus{
    outline: none;
    border-color: var(--sea);
}
body form label{
    color: var(--ink-2);
    font-size: .875rem;
}
body form .hs-error-msg,
body form .hs-error-msgs label{
    color: #c11645;
}
.night form .hs-error-msg,
.night form .hs-error-msgs label{
    color: #f880a1;
}
.text-image-block p{
    margin-top: 1rem;
    font-size:1.1rem;
}
.text-image-block{
    overflow-wrap: break-word;
}

.container-small {
    max-width: 1060px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (max-width: 400px), (min-device-width: 320px) and (max-device-width: 480px) {
    body form .form-columns-2 .hs-form-field .input,
    body form .form-columns-2 .hs-form-field .input input.hs-input, 
    body form .form-columns-3 .hs-form-field .input input.hs-input {
        width: 100% !important;
        margin-right: 0 !important;
    }
}
body form.hs-form fieldset.form-columns-1 .hs-input {
    width: 100%;
}
body form.hs-form fieldset.form-columns-1 .legal-consent-container .hs-input {
    width: auto;
}

/* The inline logo was hard-filled white for the dark theme, which makes it
   invisible on paper. currentColor instead, so it inherits --ink and works
   in both grounds without a second copy of the mark. */
.surfpay-logo-1 {
    fill: currentColor;
}
.surfpay-logo-2 {
    opacity: .5;
    fill: currentColor;
}
.surfpay-logo-3 {
    fill: currentColor;
    opacity: .7;
}
.surfpay-logo-4 {
    opacity: .3;
    fill: currentColor;
}
.surfpay-logo-5 {
    fill: currentColor;
}
.surfpay-logo-6 {
    fill: url(#surfpay_gradient_22);
}
.surfpay-logo-7 {
    fill: url(#surfpay_gradient_60);
}
.surfpay-logo-8 {
    fill: url(#surfpay_gradient_60-2);
}
.surfpay-logo-9 {
    fill: url(#surfpay_gradient_58);
}
.surfpay-logo-10 {
    fill: #fff;
}
.surfpay-logo-11 {
    fill: url(#surfpay_gradient_58-2);
}

article .h2, 
article h2,
article .h3, 
article h3,
article .h4, 
article h4 {
    line-height: 1.35;
    margin-top: 1.5rem;
    margin-bottom: .5rem;
}

.blog-post--article [style="font-weight: bold;"],.blog-post--article strong {
    font-weight: 900!important
}

.blog-post--article ul:not(.slick-dots):not(.hs-image__grid__list) {
    margin-bottom: 1rem
}

.blog-post--article ul:not(.slick-dots):not(.hs-image__grid__list) li {
    margin-bottom: .5rem;
    padding-left: 1rem;
    position: relative
}

.blog-post--article ul:not(.slick-dots):not(.hs-image__grid__list) li:after {
    border-bottom: 2px solid;
    border-right: 2px solid;
    content: "";
    height: 12px;
    left: 0;
    margin-top: 6px;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 6px
}
/* A pull quote on paper is a rule and a change of voice, not a tinted box
   with a giant floating glyph. */
.blog-post--article blockquote {
    background-image: none;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--foam-ink);
    border-radius: 0;
    margin: 2rem 0;
    padding: .25rem 0 .25rem 1.75rem;
    position: relative;
    text-align: left;
    width: 100%;
}

@media (min-width: 768px) {
    .blog-post--article blockquote {
        margin-bottom:3rem;
        margin-top: 3rem;
        padding-left: 2.25rem;
    }
}

.blog-post--article blockquote p {
    color: var(--ink);
    font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.32;
    letter-spacing: -0.02em;
    font-style: normal;
    text-wrap: pretty;
}

.blog-post--article blockquote p:last-child {
    margin-bottom: 0
}

.blog-post--article blockquote footer {
    font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: .875rem;
}

@media(max-width: 1023px){
    .header--parent .header--body{
        transform: translateX(100%);
    }
    .header--parent.open .header--body{
        transform: translateX(0);
    }
}

/* Headings now scale fluidly off the display scale rather than stepping at
   a single breakpoint, so the two media queries below only carry what is
   genuinely viewport-conditional. */
body h1, body .h1{
    font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 4.9vw, 4.5rem);
    line-height: 0.98;
    letter-spacing: -0.042em;
    text-wrap: balance;
    color: var(--ink);
}

body ._hsBlogPostTitle_1hg5v_2 {
    font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.06;
    letter-spacing: -0.028em;
}

@media(min-width: 1024px){
    .lg\:pt-\[25vh\]{
        padding-top:25vh;
    }
}