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

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

  
    .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;
  /* Responsive page-edge gutter (Item 12): 16 mobile / 24 tablet / 32 desktop. */
  padding: 0 var(--fm-gutter);
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    /* Past 1380px the max-width leaves ample natural margin; drop the gutter. */
    padding: 0;
  }
}

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

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

/* Space stacked rows within a column (e.g. image over caption in feature cards) */
.dnd-section .dnd-column .dnd-row + .dnd-row {
  margin-top: 1rem;
}

@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.)
*/

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

/* Interactive states (Category 10) */

/* Hover: subtle lift + shadow. The background/text colour change is
   field-driven (theme-overrides.css); this adds the depth cue fortmesa.com
   uses on hover. */
.button:hover,
.hs-button:hover,
.hs-blog-post-listing__post-button:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

/* Keyboard focus: a clear, high-contrast ring — navy on light, white on dark
   via --fm-heading, so it reads against both the coral button and the page in
   either theme. Never remove the outline (accessibility). */
button:focus-visible,
.button:focus-visible,
.hs-button:focus-visible,
.hs-blog-post-listing__post-button:focus-visible {
  outline: 2px solid var(--fm-heading);
  outline-offset: 2px;
}

/* Disabled: muted and non-interactive (matches fortmesa's disabled:opacity-50). */
button:disabled,
.button:disabled,
.hs-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* 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;
  /* No font-size: inherit the body size from `form` (field-driven, and it steps
     18/17/18 -> 17 -> 16 responsively) so labels match surrounding copy. */
  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;
  /* Form controls don't inherit font-size by default, so state it explicitly:
     `inherit` picks up the body size through `form`, matching the labels and
     the rest of the page. This is a deliberate divergence from fortmesa.com,
     which uses 14px inputs -- internal consistency wins here. */
  font-size: inherit;
  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
*/

/* Header DND sections */

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

/* Header container */

.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  gap: 1.5rem;
}

/* Header content spans wider than site sections (matches fortmesa's
   max-w-[90rem] = 1440px), while the header bar itself stays full-width. Scoped
   with .header for specificity so it overrides the site-wide .content-wrapper
   cap (container_width) without changing it — that's Item 12's concern. */
.header .header__container {
  max-width: 90rem;
}

/* Side padding so the logo clears the left edge and the actions clear the
   right, matching fortmesa.com's generous gutters (wider on laptop). Header
   only — does not touch the site-wide .content-wrapper padding. */
@media (min-width: 768px) {
  .header__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .header__container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

/* The nav is the middle group in the spread layout — don't let the container
   flex shrink it below its content width (which would squeeze/wrap it). */
@media (min-width: 768px) {
  .header__navigation {
    flex-shrink: 0;
  }
}

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

.header__column {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 40px;
}

/* On desktop/tablet the rows sit side-by-side inside the flex .header__column,
   so they must size to their content. The base width:100% (needed for the
   mobile stacked layout) would otherwise force a ~50/50 split and wrap the nav. */
@media (min-width: 768px) {
  .header__row-1,
  .header__row-2 {
    width: auto;
  }
}

/* Row 1 now only holds the (optional) language switcher — search was removed.
   When it has no element children, collapse it so it doesn't add a phantom
   flex gap in the actions column. */
.header__row-1:not(:has(> *)) {
  display: none;
}

@media (max-width: 767px) {
  /* Single row: logo (left) · Login · Get a Demo · hamburger (right). No
     search bar on mobile — matches fortmesa.com. */
  .header__container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    position: relative; /* anchor for the full-width dropdown panel */
    gap: 0.5rem; /* tighter logo <-> actions gap so the row fits <=360px */
    min-height: 80px; /* mobile bar height, matching fortmesa.com h-20 (80px) */
  }

  .header__column {
    position: static;
  }

  /* Search row is removed on mobile */
  .header__row-1 {
    display: none;
  }

  .header__row-2 {
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0;
  }

  /* Order the row: Login, Get a Demo, then the hamburger / close on the far
     right. */
  .header__row-2 .header__actions {
    order: 1;
  }

  .header__navigation--toggle,
  .header__close--toggle {
    order: 2;
    margin: 0;
  }
}

/* Navigation skipper */

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

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

/* Logo */

.header__logo {
  align-items: center;
  display: flex;
  height: auto;
  max-width: 200px;
  overflow: hidden;
  /* Never let the logo be the flex sibling that gets squeezed — it has no
     intrinsic min-size (overflow: hidden) so without this it collapses first
     when the bar is tight. */
  flex-shrink: 0;
}

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

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

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

/* Header actions: Login + Get a Demo */

.header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header__login {
  color: #8AC143;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

/* Login is text-only, so the reference dims the text (`hover:text-brand/80`)
   rather than the element. --fm-brand-dim is mode-aware, so this one rule
   covers light and dark. */
.header__login:hover,
.header__login:focus,
.header__login:active {
  color: var(--fm-brand-dim);
  text-decoration: none;
}

.header__cta {
  display: inline-flex;
  align-items: center;
  background-color: var(--fm-cta);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  text-decoration: none;
  white-space: nowrap;
  /* Shadow pair + hover growth copied from fortmesa.com's button, which is
     `shadow-md hover:shadow-lg` — read out of tailwindcss@3.4.17's
     defaultTheme rather than eyeballed. The previous base was
     0 1px 3px rgba(0,0,0,0.15), subtler than shadow-md; keeping it would have
     made the jump to shadow-lg far larger than the reference's md->lg step. */
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  /* The reference's `transition-all` resolves to 150ms
     cubic-bezier(0.4, 0, 0.2, 1) (Tailwind 3.4 defaults, no config override).
     Naming the two properties that actually change is visually identical to
     `all` here and matches this codebase's existing style. */
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

/* Hover/focus/active darken the BACKGROUND only — `opacity` here faded the
   white label too, which the reference never does (it shifts bg-cta, not the
   element). text-decoration is restated because the global `a:hover` rule
   (0,1,1) outranks .header__cta's base `text-decoration: none` (0,1,0). */
.header__cta:hover,
.header__cta:focus,
.header__cta:active {
  background-color: var(--fm-cta-hover);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  color: #FFFFFF;
  text-decoration: none;
}

/* Desktop/tablet shows the full "Get a Demo"; the short "Demo" is hidden until
   the mobile breakpoint below swaps them. (Base BEFORE the @media so the mobile
   rule wins on source order.) */
.header__cta-label--short {
  display: none;
}

/* Compact header actions on mobile, matching fortmesa.com (Login text-xs;
   Demo pill px-3 py-1.5 text-xs). 12px font + tighter pill padding shrinks the
   actions row so the bar fits narrow phones (fixes the 320px overflow). Placed
   AFTER the base .header__login/.header__cta rules so it wins on source order. */
@media (max-width: 767px) {
  .header__login {
    font-size: 12px;
  }

  .header__cta {
    font-size: 12px;
    padding: 0.375rem 0.75rem;
  }

  /* On mobile the pill reads "Demo" (fortmesa.com compact variant). */
  .header__cta-label--full {
    display: none;
  }

  .header__cta-label--short {
    display: inline;
  }
}

/* Get a Demo hover dropdown (CSS-only, reuses the solid nav-dropdown look) */
.header__demo {
  position: relative;
}

.header__cta-caret {
  margin-left: 6px;
  flex-shrink: 0;
}

.header__demo-menu {
  position: absolute;
  right: 0;
  top: 100%;

  /* padding (not margin) bridges the gap to the button so the menu stays
     hovered while the mouse moves down to the options */
  padding-top: 8px;
  min-width: 240px;
  display: none;
  z-index: 99;
}

.header__demo:hover .header__demo-menu,
.header__demo:focus-within .header__demo-menu {
  display: block;
}

.header__demo-panel {
  display: flex;
  flex-direction: column;
  background-color: var(--fm-bg);
  border: 1px solid var(--fm-border);
  border-radius: 12px;
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
  padding: 8px;
}

.header__demo-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  color: var(--fm-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.header__demo-link:hover,
.header__demo-link:focus,
.header__demo-link:active {
  color: var(--fm-brand);
  background-color: var(--fm-menu-hover-bg);
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  /* Base colour only — the hover colour now comes from --fm-brand-dim, which
     is itself mode-aware, so pinning :hover/:focus here would override it. */
  .header__login {
    color: var(--fm-brand);
  }
}

/* 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;
  }
    /* V1 lang switcher updates to keep "in line" w/ v0 mobile styles */
    .header__language-switcher .hs-language-switcher__menu {
        display: block;
        box-shadow:none!important;
        background: transparent;
    }
    .header__language-switcher .hs-language-switcher__menu a {
        font-size: 20px!important;
    }
    .header__language-switcher .hs-language-switcher__button {
        display: none;
    }
  }

/* Navigation */

#nav-toggle {
  display: none;
}

/* Mobile toggles */

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

  /* Full-screen overlay: fixed to the viewport, filling it and scrolling
     internally. padding-top clears the pinned header bar (its live height is
     exposed by main.js as --fm-header-bar-h). width:auto overrides the base
     .header__navigation width:100% so left/right:0 control the width — this
     also removes the old -16px misalignment (was left:-1rem + width:100%). */
  .header__navigation.open {
    background-color: var(--fm-bg);
    display: block;
    position: fixed;
    /* Start the overlay BOX below the pinned bar (not inset:0 + padding-top),
       so its scrollable content is physically confined below the bar and can
       never scroll up into / bleed through it. The -1px tucks it under the bar
       (which is opaque and above it, z30 > z20) to close the subpixel rounding
       gap left by --fm-header-bar-h being a rounded offsetHeight. */
    top: calc(var(--fm-header-bar-h, 61px) - 1px);
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    /* Gap between the bar/divider and the first menu item (matches the
       reference drawer's py-4 top). The -1px tuck above overlaps the bar. */
    padding-top: calc(1rem + 1px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 20;
  }

  /* While the menu is open, pin the real header bar to the viewport top so its
     row (logo · Login · Demo · ✕) stays visible above the overlay, and lock the
     page behind it from scrolling. Body class is toggled by main.js. */
  body.menu-open {
    overflow: hidden;
  }

  body.menu-open .header__container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background-color: var(--fm-bg);
  }

  /* Full-width divider between the bar and the menu (matches fortmesa's drawer
     border-t). Drawn as a pseudo, NOT the container's border-bottom: the
     overlay (.header__navigation) is a positioned CHILD of the container, so it
     paints above the parent's border and would cover it. This ::after has a
     z-index above the overlay (25 > 20) so it renders on top of the overlay bg.
     Uses the same --fm-divider-strong as .header's border so all header states
     match. */
  body.menu-open .header__container::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--fm-divider-strong);
    z-index: 25;
  }

  /* The overlay (.header__navigation, z-index 20) is a CHILD of the container,
     so its z-index would otherwise paint it over its sibling bar content (the
     logo and the column holding Login/Demo/✕). Lift those above the overlay so
     the header row stays visible and the ✕ stays clickable. */
  body.menu-open .header__logo,
  body.menu-open .header__column {
    position: relative;
    z-index: 31;
  }

  /* Language switcher keeps its original below-the-bar dropdown (unchanged; not
     part of the full-screen menu overlay). */
  .header__language-switcher.open {
    background-color: var(--fm-bg);
    display: block;
    position: absolute;
    top: 100%;
    left: -1rem;
    right: -1rem;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    z-index: 20;
  }

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

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

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

  .header__navigation--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__language-switcher--toggle.open:after {
    display: block;
    word-break: normal;
  }

  .header__navigation--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjE5cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+aGFtYnVyZ2VyPC90aXRsZT48ZyBpZD0iaGFtYnVyZ2VyIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyBpZD0iR3JvdXAiIHN0cm9rZT0iIzQ5NEE1MiIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjEuNSIgeT0iMS41IiB3aWR0aD0iMjEiIGhlaWdodD0iMSIgcng9IjAuNSI+PC9yZWN0PjxyZWN0IGlkPSJSZWN0YW5nbGUtQ29weS00IiB4PSIxLjUiIHk9IjkuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD48cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNSIgeD0iMS41IiB5PSIxNy41IiB3aWR0aD0iMjEiIGhlaWdodD0iMSIgcng9IjAuNSI+PC9yZWN0PjwvZz48L2c+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    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";
  }

  /* Hide the redundant "Menu"/"Search"/"Language" text labels next to the
     mobile toggle icons. The icons are self-explanatory, and the absolutely
     positioned labels were overlapping the Login link and close icon when the
     menu is open. */
  .header__navigation--toggle:after,
  .header__language-switcher--toggle:after {
    content: none;
  }

  .header__close--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjE5cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+Y2xvc2U8L3RpdGxlPjxnIGlkPSJjbG9zZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgLTEuMDAwMDAwKSIgc3Ryb2tlPSIjNDk0QTUyIiBzdHJva2Utd2lkdGg9IjEuNSI+PHJlY3QgaWQ9IlJlY3RhbmdsZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCAxMC41MDAwMDApIHJvdGF0ZSgtNDUuMDAwMDAwKSB0cmFuc2xhdGUoLTEwLjAwMDAwMCwgLTEwLjUwMDAwMCkgIiB4PSItMC41IiB5PSIxMC41IiB3aWR0aD0iMjEiIGhlaWdodD0iMSIgcng9IjAuNSI+PC9yZWN0PjxyZWN0IGlkPSJSZWN0YW5nbGUtQ29weS01IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMC4wMDAwMDAsIDEwLjUwMDAwMCkgcm90YXRlKDQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMC4wMDAwMDAsIC0xMC41MDAwMDApICIgeD0iLTAuNSIgeT0iMTAuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD48L2c+PC9nPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    display: none;
    height: 25px;
    margin-right: 0;
    width: 25px;
  }

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

  /* When the menu is open, the close (✕) replaces the hamburger in the same
     far-right slot (don't show both at once). */
  .header__navigation--toggle.open {
    display: none;
  }

  /* Bottom action block: a clone of .header__actions that main.js appends to
     the overlay on open — an outline Login button + the two Get-a-Demo options
     surfaced as full-width rows (reusing the existing hrefs; single source of
     truth). The "Get a Demo" pill itself is hidden; its two links become rows. */
  .header__actions--overlay {
    display: block;
    margin-top: 0.5rem;
    padding: 1rem 1.225rem 2rem;
    border-top: 1px solid var(--fm-divider);
  }

  .header__actions--overlay .header__login {
    display: block;
    margin-bottom: 0.9rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--fm-brand);
    border-radius: 9999px;
    color: var(--fm-link);
    font-size: 14px;
    text-align: center;
  }

  .header__actions--overlay .header__demo {
    position: static;
  }

  .header__actions--overlay .header__cta {
    display: none;
  }

  .header__actions--overlay .header__demo-menu {
    display: block;
    position: static;
    min-width: 0;
    padding-top: 0;
  }

  .header__actions--overlay .header__demo-panel {
    display: block;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }

  .header__actions--overlay .header__demo-link {
    display: block;
    margin-bottom: 0.6rem;
    padding: 0.75rem 1.25rem;
    /* Filled pill (matches fortmesa: bg-slate-100 light / bg-white/10 dark) so
       the rows read as distinct buttons; dark fill overridden below. No border
       (a dark teal border was invisible on #0C445A). */
    background: #f1f5f9;
    border: none;
    border-radius: 9999px;
    font-size: 14px;
    text-align: center;
  }
}

/* Mobile toggle icons are monochrome dark SVGs — invert them in dark mode so
   the hamburger / close stay visible on the navy bar. (Toggles only render on
   mobile, so this is inert on desktop.) */
@media (prefers-color-scheme: dark) {
  .header__navigation--toggle,
  .header__close--toggle {
    filter: invert(1) brightness(1.7);
  }
}

:root[data-theme='dark'] .header__navigation--toggle,
:root[data-theme='dark'] .header__close--toggle {
  filter: invert(1) brightness(1.7);
}

:root[data-theme='light'] .header__navigation--toggle,
:root[data-theme='light'] .header__close--toggle {
  filter: none;
}

/* (Header divider strength is handled by --fm-divider-strong = white/20 dark;
   see .header border-bottom and .header__container::after.) */
@media (prefers-color-scheme: dark) {
  /* Demo rows: white/10 fill in dark (light uses slate-100 above), matching
     fortmesa's bg-white/10. */
  .header__actions--overlay .header__demo-link {
    background: rgba(255, 255, 255, 0.1);
  }
}

:root[data-theme='dark'] .header__actions--overlay .header__demo-link {
  background: rgba(255, 255, 255, 0.1);
}
/* Related posts — a card grid shared by blog-post.html and pillar-page.html.

   Lives in components/ rather than in a template stylesheet because two
   templates use it. Keeping it in blog.css would have meant either the pillar
   page loading a stylesheet named for the blog, or a second copy that drifts
   from this one the first time either is touched.

   Class names are `related-posts*`, not `blog-related-posts*`. The old names
   described where the component happened to live first, which stops being true
   the moment a second template uses it.

   Built from the theme's own card tokens, so these match every other card on
   the site and follow light/dark without their own colour handling. The
   previous treatment had no background, border, radius or shadow at all -- it
   was a flex row with 16px of padding, which is why it read as a bare list
   rather than as cards. */

.related-posts {
  background-color: var(--fm-bg);
  /* Section rhythm travels with the component. theme-overrides.css used to
     apply this to .blog-related-posts alongside the blog header; keeping it
     here means a template gets the spacing by using the component, rather than
     by also being a blog template. */
  padding: var(--fm-section-y) 0;
}

.related-posts__heading {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 1.4rem;
  text-align: left;
}

.related-posts__list {
  display: grid;
  gap: var(--fm-card-gap, 24px);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .related-posts__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .related-posts__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.related-posts__post {
  background-color: var(--fm-card-bg);
  border-radius: var(--fm-card-radius, 12px);
  box-shadow: var(--fm-card-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* A BORDER IN DARK MODE, because the shadow stops working there.
   --fm-card-bg (#0D4959) against --fm-bg (#0C445A) measures 1.06:1 -- the card
   and the page are effectively the same colour, and on a dark ground a soft
   shadow does not separate them the way it does on white. The cards dissolved
   into the page.

   A border rather than a lighter card surface: every lighter surface tested
   topped out around 1.5:1 against the page, so it barely helped, and changing
   --fm-card-bg here would have made these cards stop matching every other card
   on the site. #336B7C measures 1.67:1 against the card face -- enough to draw
   the edge without turning it into a heavy outline. Light mode is untouched;
   there the shadow does its job. */
@media (prefers-color-scheme: dark) {
  .related-posts__post {
    border: 1px solid #336b7c;
  }
}

/* A SHORTER image than before, set by aspect-ratio rather than a fixed height
   so it holds at every column width. The old cards gave the image 184px of a
   ~250px card and left the title fighting for the remainder. */
.related-posts__image-wrapper {
  display: block;
}

.related-posts__image {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.related-posts__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem;
}

/* NO SUMMARY. `post.post_summary` returns RAW HUBL for any post whose body is
   built with drag-and-drop modules and which has no summary set -- a live card
   rendered the opening of a module_block / module_attribute tag as visible text
   under its title. `sanitize_html("STRIP")` removes HTML tags, but HubL
   delimiters are not HTML, so they survive as text and truncatehtml then cuts
   mid-tag. Dropping the summary fixes it at the root rather than filtering the
   symptom, and matches what the pillar page wants anyway: image and title only.

   20px, down from the theme h3's 28px. The title is now proportionally LARGER
   against a shorter image even though the absolute size dropped, because the
   image no longer takes most of the card.

   Capitalisation is NOT handled here. Some post titles are stored in capitals
   in HubSpot; `text-transform` is already `none` and no CSS can restore proper
   casing. Tracked as a content task in the plan doc. */
.related-posts__title {
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 0 0 0.5rem;
}

.related-posts__title-link {
  color: var(--fm-heading);
  text-decoration: none;
}

.related-posts__title-link:hover,
.related-posts__title-link:focus {
  color: var(--fm-link-hover);
}
/* 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;
  }
}