/* ==========================================================================
   Design System - CSS Custom Properties
   ==========================================================================

   This file ONLY contains utility classes that reference CSS variables.
   The actual variable values are defined in theme_styles.html based on
   the selected theme preset.

   ========================================================================== */

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Shadows */
.shadow-none { box-shadow: var(--shadow-none); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }

/* Border Radius */
.radius-none { border-radius: var(--radius-none); }
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-xl { border-radius: var(--radius-xl); }
.radius-2xl { border-radius: var(--radius-2xl); }
.radius-full { border-radius: var(--radius-full); }

/* Padding */
.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.p-3xl { padding: var(--space-3xl); }
.p-4xl { padding: var(--space-4xl); }
.p-5xl { padding: var(--space-5xl); }

.px-0 { padding-left: 0; padding-right: 0; }
.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
.px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
.px-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }
.px-4xl { padding-left: var(--space-4xl); padding-right: var(--space-4xl); }
.px-5xl { padding-left: var(--space-5xl); padding-right: var(--space-5xl); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.py-4xl { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }
.py-5xl { padding-top: var(--space-5xl); padding-bottom: var(--space-5xl); }

/* Margin */
.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }
.m-3xl { margin: var(--space-3xl); }
.m-4xl { margin: var(--space-4xl); }
.m-5xl { margin: var(--space-5xl); }
.m-auto { margin: auto; }

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
.mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
.mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }
.mx-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); }
.mx-auto { margin-left: auto; margin-right: auto; }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
.my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
.my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }

.mb-section { margin-bottom: var(--space-section); }
.mb-module { margin-bottom: var(--space-module); }
.mb-component { margin-bottom: var(--space-component); }
.mb-element { margin-bottom: var(--space-element); }

/* Gap */
.gap-0 { gap: 0; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }
.gap-4xl { gap: var(--space-4xl); }
.gap-5xl { gap: var(--space-5xl); }

/* Colors - Background */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.bg-background { background-color: var(--color-background); }
.bg-foreground { background-color: var(--color-foreground); }
.bg-body { background-color: var(--color-body-bg); }
.bg-cards { background-color: var(--color-cards-bg); }
.bg-error { background-color: var(--color-error); }
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }

/* Colors - Text */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-foreground { color: var(--color-foreground); }
.text-muted { color: var(--color-muted); }
.text-error { color: var(--color-error); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }

/* Colors - Border */
.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }
.border-accent { border-color: var(--color-accent); }
.border-default { border-color: var(--color-border); }
.border-error { border-color: var(--color-error); }

/* Gradients */
.gradient-1 { background: var(--gradient-1); }
.gradient-2 { background: var(--gradient-2); }
.gradient-3 { background: var(--gradient-3); }

/* Transitions */
.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }
.transition-slower { transition: all var(--transition-slower); }

/* Typography */
.font-heading { font-family: var(--font-family-heading); }
.font-body { font-family: var(--font-family-body); }
.font-mono { font-family: var(--font-family-mono); }

.text-display { font-size: var(--font-size-display); }
.text-h1 { font-size: var(--font-size-h1); }
.text-h2 { font-size: var(--font-size-h2); }
.text-h3 { font-size: var(--font-size-h3); }
.text-h4 { font-size: var(--font-size-h4); }
.text-h5 { font-size: var(--font-size-h5); }
.text-h6 { font-size: var(--font-size-h6); }
.text-body { font-size: var(--font-size-body); }
.text-lg { font-size: var(--font-size-lg); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

.leading-none { line-height: var(--line-height-none); }
.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

.tracking-tighter { letter-spacing: var(--letter-spacing-tighter); }
.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }

/* Theme Card - padding is on .card-body, not the card itself */
.theme-card {
  background: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border-color);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
}

.theme-card .card-body {
  padding: var(--card-padding);
}

/* Theme Buttons */
.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-border-radius);
  border-width: var(--btn-border-width);
  border-style: solid;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.theme-btn-primary {
  background: var(--btn-primary-bg);
  background-size: var(--btn-primary-bg-size, 100% 100%);
  background-position: var(--btn-primary-bg-position, 0 0);
  color: var(--btn-primary-color);
  border-width: var(--btn-primary-border-width);
  border-color: var(--btn-primary-border);
  transition: background-position var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.theme-btn-primary:hover {
  background-position: var(--btn-primary-bg-position-hover, 0 0);
  background-color: var(--btn-primary-bg-hover, var(--btn-primary-bg));
  color: var(--btn-primary-color-hover);
  border-color: var(--btn-primary-border-hover);
}

.theme-btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  border-color: var(--btn-secondary-border);
}

.theme-btn-secondary:hover {
  background: var(--btn-secondary-bg-hover);
}

.theme-btn-ghost {
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-color);
  border-color: var(--btn-ghost-border);
}

.theme-btn-ghost:hover {
  background: var(--btn-ghost-bg-hover);
}

/* Theme Input */
.theme-input {
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: var(--input-font-size);
  font-family: var(--font-family-body);
  background-color: var(--input-bg);
  color: var(--input-color);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  transition: all var(--transition-base);
}

.theme-input:focus {
  outline: none;
  border-color: var(--input-border-color-focus);
  background-color: var(--input-bg-focus);
}

.theme-input::placeholder {
  color: var(--input-placeholder);
}

/* Semantic Spacing Aliases */
:root {
  --space-section: var(--space-3xl);
  --space-module: var(--space-xl);
  --space-component: var(--space-lg);
  --space-element: var(--space-md);
  --space-tight: var(--space-sm);
  --space-micro: var(--space-xs);
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

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

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

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

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

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

body {
  margin: 0;
}

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

main {
  display: block;
}

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

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

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

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

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

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

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

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

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

a {
  background-color: transparent;
}

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

img {
  border-style: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

progress {
  vertical-align: baseline;
}

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

textarea {
  overflow: auto;
}

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

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

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

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

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

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

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

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

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

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

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

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

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

summary {
  display: list-item;
}

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

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

template {
  display: none;
}

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

[hidden] {
  display: none;
}
/* Responsive Grid */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.container-fluid {
  *zoom: 1;
}

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

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

@media (max-width: 767px) {
  .row-fluid {
    width: 100%;
  }
  .row-fluid [class*="span"] {
    display: block;
    float: none;
    width: auto;
    margin-left: 0;
    min-height: 0;
  }
  .row-fluid [class*="span"] {
    margin-bottom: var(--space-2xl);
  }
  .row-fluid [class*="span"]:last-child {
    margin-bottom: 0;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .row-fluid {
    width: 100%;
    *zoom: 1;
  }
  .row-fluid:before,
  .row-fluid:after {
    display: table;
    content: "";
  }
  .row-fluid:after {
    clear: both;
  }
  .row-fluid [class*="span"] {
    display: block;
    float: left;
    width: 100%;
    min-height: 1px;
    margin-left: 2.762430939%;
    *margin-left: 2.709239449638298%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
  .row-fluid [class*="span"]:first-child {
    margin-left: 0;
  }
  .row-fluid .span12 {
    width: 99.999999993%;
    *width: 99.9468085036383%;
  }
  .row-fluid .span11 {
    width: 91.436464082%;
    *width: 91.38327259263829%;
  }
  .row-fluid .span10 {
    width: 82.87292817100001%;
    *width: 82.8197366816383%;
  }
  .row-fluid .span9 {
    width: 74.30939226%;
    *width: 74.25620077063829%;
  }
  .row-fluid .span8 {
    width: 65.74585634900001%;
    *width: 65.6926648596383%;
  }
  .row-fluid .span7 {
    width: 57.182320438000005%;
    *width: 57.129128948638304%;
  }
  .row-fluid .span6 {
    width: 48.618784527%;
    *width: 48.5655930376383%;
  }
  .row-fluid .span5 {
    width: 40.055248616%;
    *width: 40.0020571266383%;
  }
  .row-fluid .span4 {
    width: 31.491712705%;
    *width: 31.4385212156383%;
  }
  .row-fluid .span3 {
    width: 22.928176794%;
    *width: 22.874985304638297%;
  }
  .row-fluid .span2 {
    width: 14.364640883%;
    *width: 14.311449393638298%;
  }
  .row-fluid .span1 {
    width: 5.801104972%;
    *width: 5.747913482638298%;
  }
}

@media (min-width: 1024px) {
  .row-fluid {
    width: 100%;
    *zoom: 1;
  }
  .row-fluid:before, 
  .row-fluid:after {
    display: table;
    content: "";
  }
  .row-fluid:after {
    clear: both;
  }
  .row-fluid [class*="span"] {
    display: block;
    float: left;
    width: 100%;
    min-height: 1px;
    margin-left: 2.564102564%;
    *margin-left: 2.510911074638298%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
  .row-fluid [class*="span"]:first-child {
    margin-left: 0;
  }
  .row-fluid .span12 {
    width: 100%;
    *width: 99.94680851063829%;
  }
  .row-fluid .span11 {
    width: 91.45299145300001%;
    *width: 91.3997999636383%;
  }
  .row-fluid .span10 {
    width: 82.905982906%;
    *width: 82.8527914166383%;
  }
  .row-fluid .span9 {
    width: 74.358974359%;
    *width: 74.30578286963829%;
  }
  .row-fluid .span8 {
    width: 65.81196581200001%;
    *width: 65.7587743226383%;
  }
  .row-fluid .span7 {
    width: 57.264957265%;
    *width: 57.2117657756383%;
  }
  .row-fluid .span6 {
    width: 48.717948718%;
    *width: 48.6647572286383%;
  }
  .row-fluid .span5 {
    width: 40.170940171000005%;
    *width: 40.117748681638304%;
  }
  .row-fluid .span4 {
    width: 31.623931624%;
    *width: 31.5707401346383%;
  }
  .row-fluid .span3 {
    width: 23.076923077%;
    *width: 23.0237315876383%;
  }
  .row-fluid .span2 {
    width: 14.529914530000001%;
    *width: 14.4767230406383%;
  }
  .row-fluid .span1 {
    width: 5.982905983%;
    *width: 5.929714493638298%;
  }
}

/* Clearfix */

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}
/* ==========================================================================
   FORMS - Form styling using design system
   ========================================================================== */

.hs-form-field {
  padding-bottom: var(--space-element);
  position: relative;
}

/* ONE CONTROL BOX.

   Measured on the live site before this pass, a text control was 40px tall on
   /contact, 42px on /portfolio and 60px on /faqs. Three heights for one
   component, and none of them was chosen: the rule declared `height: auto`
   and a padding pair, so the height was whatever the line box came out at
   after the font size and the leading had been decided somewhere else. Any
   module that nudged either number got a different control.

   The box is now declared. Height is a token, padding-block is zero, and the
   line-height is the UI step - so the text is centred by the box rather than
   by arithmetic, and a select, an input and the first line of a textarea all
   sit on one baseline. Changing the font size no longer changes the height.

   THE BORDER IS ON THE CONTROL, NOT ON A WRAPPER. The reference system puts
   the border, radius and shadow on a wrapper so a leading icon or a trailing
   button can share one box with no second edge. HubSpot's form markup does
   not give this file a wrapper to hold that - `.hs-form-field` contains the
   label as well - so the border stays on the control here, and the wrapper
   model belongs to the modules that render their own search and filter
   fields. Named so the two are not later mistaken for a disagreement. */
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=number],
input[type=file],
input[type=search],
input[type=url],
input[type=date],
select,
textarea {
  background-color: var(--input-bg, var(--color-background));
  border-radius: var(--input-border-radius, var(--radius-lg));
  border: var(--input-border-width, 1px) solid var(--input-border, var(--color-border));
  box-shadow: var(--shadow-control);
  display: inline-flex;
  align-items: center;
  font-family: var(--input-font-family, var(--font-family-body));
  font-weight: var(--input-font-weight, inherit);
  font-size: var(--input-font-size, var(--font-size-sm));
  line-height: var(--line-height-ui);
  height: var(--control-height);
  outline: none;
  padding-block: 0;
  padding-inline: var(--control-padding-x);
  transition: var(--transition-base);
  width: 100%;
}

input[type=text]:hover,
input[type=email]:hover,
input[type=password]:hover,
input[type=tel]:hover,
input[type=number]:hover,
select:hover,
textarea:hover {
  border-color: var(--input-border-focus, var(--color-border-hover));
}

/* A textarea is the one control that grows, so it takes the same box and
   releases the height. Its padding-block comes back because there is no
   single line to centre. */
textarea,
form textarea {
  height: auto;
  min-height: var(--textarea-min-height);
  resize: vertical;
  padding-block: var(--space-tight);
  padding-inline: var(--control-padding-x);
  align-items: flex-start;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=file]:focus,
select:focus,
textarea:focus {
  border-color: var(--input-border-focus, var(--color-accent));
  box-shadow: 0 0 0 var(--input-focus-ring-offset, 0px) var(--input-bg-focus, transparent),
              0 0 0 calc(var(--input-focus-ring-offset, 0px) + var(--input-focus-ring-width, 0px)) var(--input-focus-ring-color, transparent);
}

form select,
form input:not([type="checkbox"]):not([type="radio"]) {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

fieldset {
  max-width: 100%;
}

.hs_error_rollup {
  display: none;
}

.hs-form-field legend, .hs-form-field label {
  display: inline-block;
  font-family: var(--form-label-font-family, inherit);
  font-size: var(--form-label-font-size, var(--font-size-sm));
  font-weight: var(--form-label-font-weight, var(--font-weight-medium));
  line-height: var(--line-height-h6);
  margin: 0 0 var(--form-label-margin-bottom, var(--space-tight));
  color: var(--form-label-color, inherit);
}

/* THE LABEL IS NOT DIMMED. It carried `opacity: 0.8`, which is the same
   mistake the hero lede made: a translucent foreground instead of a colour.
   At 12px it read as disabled text on a form the visitor had not touched
   yet. It is now the UI step at full ink, and a form that wants a quieter
   label moves --form-label-color. */

.hs-error-msgs label {
  cursor: default;
}

.hs-form-required {
  color: var(--color-error);
}

.hs-form-field .hs-error-msgs {
  color: var(--form-error-color, var(--color-error));
  font-family: var(--form-error-font-family, inherit);
  font-weight: var(--form-error-font-weight, inherit);
  font-size: var(--form-error-font-size, var(--font-size-xs));
  list-style: none;
  margin: 0;
  padding: 0;
}

.hs-form-field .hs-error-msgs li {
  margin: var(--form-error-margin-top, var(--space-xs)) 0 calc(var(--space-xs) * -1);
}

.hs-fieldtype-textarea.hs-form-field .hs-error-msgs li {
  margin: 0;
}

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

.inputs-list li {
  display: inline-block;
  margin-bottom: var(--space-xs);
  margin-right: var(--space-md);
  vertical-align: top;
}

.inputs-list li label {
  cursor: pointer;
  margin: 0;
}

.hs-form-checkbox label input, .hs-form-booleancheckbox label input {
  height: 0;
  position: absolute;
  visibility: hidden;
  width: 0;
  z-index: -999;
}

.hs-form-checkbox label>span, .hs-form-booleancheckbox label>span {
  display: inline-block;
  margin: 0;
  padding-left: var(--space-lg);
  position: relative;
}

.hs-form-checkbox label>span:before,
.hs-form-booleancheckbox label>span:before {
  border-radius: var(--radius-xs);
  content: '';
  display: inline-block;
  height: var(--checkbox-size, 12px);
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: var(--transition-base);
  width: var(--checkbox-size, 12px);
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  direction: ltr;
  font-family: 'Material Icons';
  font-size: var(--icon-size-xs);
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
}

.hs-form-checkbox label input[type=checkbox]:checked+span:before,
.hs-form-booleancheckbox label input[type=checkbox]:checked+span:before {
  content: 'done';
  background-color: var(--checkbox-checked-bg, var(--input-bg));
  border-color: var(--checkbox-checked-border, var(--input-border));
  color: var(--checkbox-bg, var(--input-color));
}

.hs-form-radio label input {
  height: 0;
  position: absolute;
  visibility: hidden;
  width: 0;
  z-index: -999;
}

.hs-form-radio label>span {
  display: inline-block;
  margin: 0;
  padding-left: var(--space-lg);
  position: relative;
}

.hs-form-radio label>span:before {
  border-radius: var(--radius-full);
  content: '';
  display: inline-block;
  height: var(--radio-size, 12px);
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: var(--transition-base);
  width: var(--radio-size, 12px);
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  direction: ltr;
  font-family: 'Material Icons';
  font-size: 9px;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 12px;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  text-align: center;
}

.hs-form-radio label input[type=radio]:checked+span:before {
  content: 'lens';
  background-color: var(--radio-checked-bg, var(--input-bg));
  border-color: var(--radio-checked-border, var(--input-border));
  color: var(--radio-bg, var(--input-color));
}

.legal-consent-container .field.hs-form-field {
  margin: 0;
  overflow: hidden;
}

.submitted-message,
form {
  /*   background: #fff; */
  margin: 0 auto;
  text-align: left;
  /*   max-width: 500px; */
  /*   padding: 40px; */
  /*   text-align: left; */
  /*   box-shadow: 0 3px 6px rgba(0,0,0,.16); */
}

form .form-title {
  margin: 0 0 var(--space-component);
  text-align: center;
}

form h6, form h5, form h4, form h3, form h2, form h1 {
  margin: 0 0 var(--space-tight);
  text-align: center;
}

#hs-pwd-widget-password {
  height: var(--space-2xl);
  margin-bottom: var(--space-component);
  margin-top: 0;
}

/* THE SUBMIT FOLLOWS THE FIELDS.

   This was `text-align: center`, unconditionally, theme-wide. The button sits
   in the same column as the inputs, so in any left-aligned form it landed
   centred under left-aligned fields - measured on the live site at 1440, the
   contact and demo form cards put the fields at x=0 and the button at x=199
   inside a 512px form, and the landing-page, ebook, waitlist, webinar and
   blog-subscribe forms all did the same thing. Every form on the site is
   left-aligned, so the centred default was wrong in every single place it
   applied and right in none of them.

   `inherit` is the fix rather than `left`, because the rule then states the
   real intent: the actions row takes the alignment of the form around it. A
   centred form - a landing-page hero that centres its column, a modal -
   centres its button with no extra rule, which is the behaviour this default
   was reaching for and getting wrong.

   --form-actions-align is the opt-out, for the one case the cascade cannot
   express: a form whose fields are left-aligned but whose button is meant to
   be centred or trailing. Set it on any ancestor. A token move, not a
   competing rule. */
form .hs_submit .actions {
  text-align: var(--form-actions-align, inherit);
  margin: var(--space-element) 0 0;
}

/* Form Submit Button - Uses primary button styling from design system */
form .hs-button,
form input[type="submit"],
form button[type="submit"] {
  /* Layout */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);

  /* Sizing */
  padding: var(--btn-padding-y) var(--btn-padding-x);
  min-height: 40px;

  /* Typography */
  font-family: var(--font-family-body);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;

  /* Colors - Primary button style */
  background: var(--btn-primary-bg);
  background-size: var(--btn-primary-bg-size);
  background-position: var(--btn-primary-bg-position);
  color: var(--btn-primary-color);
  border: var(--btn-primary-border-width, 0) solid var(--btn-primary-border, transparent);
  border-radius: var(--btn-border-radius);
  box-shadow: var(--btn-shadow);

  /* Interaction */
  transition: background-position var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-base);
}

form .hs-button:hover,
form input[type="submit"]:hover,
form button[type="submit"]:hover {
  background-position: var(--btn-primary-bg-position-hover);
  background-color: var(--btn-primary-bg-hover, var(--btn-primary-bg));
  color: var(--btn-primary-color-hover);
  border-color: var(--btn-primary-border-hover, transparent);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}

form .hs-button:focus-visible,
form input[type="submit"]:focus-visible,
form button[type="submit"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

form .hs-button:active,
form input[type="submit"]:active,
form button[type="submit"]:active {
  transform: translateY(0);
}

form .hs-button:disabled,
form input[type="submit"]:disabled,
form button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.hs-form fieldset.form-columns-2 div.input, .hs-form fieldset.form-columns-1 div.input {
  margin-right: 0;
}

.hs-form fieldset.form-columns-2>div.hs-form-field {
  width: 48%;
}

.hs-form fieldset.form-columns-2>div:first-child {
  margin-right: 2%;
}

.hs-form fieldset.form-columns-2>div:last-child {
  margin-left: 2%;
}

form.hs-form fieldset.form-columns-3 .input {
  margin: 0;
}

form.hs-form fieldset.form-columns-3 .hs-form-field {
  width: 30.6%;
}

form.hs-form fieldset.form-columns-3 .hs-form-field:nth-child(2) {
  margin: 0 4%;
}

.hs-form fieldset.form-columns-1 div.hs-input, .hs-form fieldset.form-columns-1 input.hs-input {
  width: 100%;
}

.hs-form .hs-fieldtype-intl-phone.hs-input input {
  width: 66%;
}

.hs-form select {
  background-image :url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="7.41" viewBox="0 0 12 7.41"><path id="Path_3377" data-name="Path 3377" d="M7.41,8.59,12,13.17l4.59-4.58L18,10l-6,6L6,10Z" transform="translate(-6 -8.59)"/></svg>');
  background-position: calc(100% - var(--space-sm)) 52%;
  background-repeat: no-repeat;
  background-size: 12px;
  padding-left: var(--space-md);
  padding-right: var(--space-lg);
  width: 100%;
}

.hs-form .hs-richtext {
  margin: 0 0 var(--space-element);
  text-align: center;
}

.hs-form .legal-consent-container .hs-richtext {
  font-size: var(--font-size-xs);
  margin: 0 0 var(--space-element);
  text-align: left;
}

.hs-form .legal-consent-container .hs-richtext h1,
.hs-form .legal-consent-container .hs-richtext h2,
.hs-form .legal-consent-container .hs-richtext h3,
.hs-form .legal-consent-container .hs-richtext h4,
.hs-form .legal-consent-container .hs-richtext h5,
.hs-form .legal-consent-container .hs-richtext h6 {
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-micro);
  text-align: left;
}

/* .hs-form .legal-consent-container .hs-richtext p {
  font-size: inherit;
} */

/* .legal-consent-container .hs-form-booleancheckbox-display p {
  color: inherit;
  font-size: 16px;
  cursor: pointer;
} */

@media (max-width: 540px) {
  /*   form {
  padding: 30px 20px;
} */
  form.hs-form fieldset.form-columns-3 .hs-form-field, .hs-form fieldset.form-columns-2>div.hs-form-field {
    width: 100%;
  }
  .hs-form fieldset.form-columns-2>div:last-child {
    margin-left: 0;
  }
  .hs-form fieldset.form-columns-2>div:first-child {
    margin-right: 0;
  }
  form.hs-form fieldset.form-columns-3 .hs-form-field:nth-child(2) {
    margin: 0;
  }
  form h6, form h5, form h4, form h3, form h2, form h1 {
    margin: 0 0 var(--space-xs);
    text-align: center;
  }

  form.hs-form .hs-input {
    width: 100%;
  }
}
@media (max-width: 540px) {
  .hs-form select {
    background-size: var(--space-sm);
  }
}
* {
  box-sizing: border-box;
}

/* `clip`, NEVER `hidden`. Do not revert this.

   `overflow-x: hidden` makes an element a SCROLL CONTAINER - the browser has
   to be able to scroll the hidden axis programmatically, so it establishes a
   scrollport. On html or body that scrollport becomes the nearest scrolling
   ancestor for the whole document, and `position: sticky` sticks to its
   nearest scrolling ancestor. Every sticky element in the theme was therefore
   sticking to a container that never scrolls, which reads exactly like
   `position: sticky` doing nothing at all. Measured: the FAQ split-layout
   heading scrolled away to y = -208 instead of holding, leaving the left
   column empty for the entire question list; with `clip` it holds at y = 110.

   `overflow-x: clip` paints identically - it still cuts off anything that
   overflows sideways, which is the reason this rule exists - but it does NOT
   create a scrollport, so sticky keeps working.

   This is a theme-wide fix on purpose. Because the rule lived here, modules
   had each been shipping a local escape hatch against it - the FAQ module
   emitted its own `html:has(...), body:has(...) { overflow-x: clip }`, and
   Pillar Content, Docs and Store Locator each carry a separate workaround of
   the same kind. With this line correct none of them is needed, and a future
   module cannot quietly break because its author did not know this rule was
   here. */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

body {
  position: relative;
  width: 100%;
}

/* ==========================================================================
   Accessibility - Skip Link & Focus Styles
   ========================================================================== */

/* Skip to content link - Hidden until focused */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transition: top var(--transition-fast);
}

.skip-to-content:focus {
  top: var(--space-md);
  outline: 2px solid var(--color-background);
  outline-offset: 2px;
}

/* Add focus-visible for accessibility */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Remove default focus outline when using focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}

a i, a i svg path {
  transition: var(--transition-base);
}

img {
  max-width: 100%;
}

/* Flex Classes */

.display-flex {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

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

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

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

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

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

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

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

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

.flex-grow-1 {
  -moz-box-flex: 1;
  -ms-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  flex: 1;
}

/* Text align */

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

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

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

/* ==========================================================================
   LEGACY MARGIN UTILITIES - Mapped to CSS Variables
   These exist for backwards compatibility. Prefer using the design system
   utility classes (.mt-sm, .mt-md, etc.) from _design-system.css
   ========================================================================== */

.mt-10 { margin-top: var(--space-sm); }
.mt-20 { margin-top: var(--space-md); }
.mt-30 { margin-top: var(--space-lg); }
.mt-40 { margin-top: var(--space-xl); }
.mt-50 { margin-top: var(--space-xl); }
.mt-60 { margin-top: var(--space-2xl); }
.mt-70 { margin-top: var(--space-2xl); }
.mt-80 { margin-top: var(--space-3xl); }
.mt-90 { margin-top: var(--space-3xl); }
.mt-100 { margin-top: var(--space-3xl); }
.mt-120 { margin-top: var(--space-3xl); }
.mt-140 { margin-top: var(--space-3xl); }

.mb-10 { margin-bottom: var(--space-sm); }
.mb-20 { margin-bottom: var(--space-md); }
.mb-30 { margin-bottom: var(--space-lg); }
.mb-40 { margin-bottom: var(--space-xl); }
.mb-50 { margin-bottom: var(--space-xl); }
.mb-60 { margin-bottom: var(--space-2xl); }
.mb-70 { margin-bottom: var(--space-2xl); }
.mb-80 { margin-bottom: var(--space-3xl); }
.mb-90 { margin-bottom: var(--space-3xl); }
.mb-100 { margin-bottom: var(--space-3xl); }

/* Semantic spacing utilities */
.mb-section { margin-bottom: var(--space-section); }
.mb-module { margin-bottom: var(--space-module); }
.mb-component { margin-bottom: var(--space-component); }
.mb-element { margin-bottom: var(--space-element); }

.mlr-15 { margin-left: var(--space-md); margin-right: var(--space-md); }
.mlr-30 { margin-left: var(--space-xl); margin-right: var(--space-xl); }
.mr-30 { margin-right: var(--space-xl); }
.mr-20 { margin-right: var(--space-md); }
.ml-20 { margin-left: var(--space-md); }

.pd-20 { padding: 0 var(--space-md); }
.pd-40 { padding: var(--space-xl); }
.pd-80 { padding: var(--space-3xl); }

.mw-800 {
  max-width: var(--content-max-width-wide);
  margin-left: auto;
  margin-right: auto;
}

.mw-600 {
  max-width: var(--modal-max-width-sm);
  margin-left: auto;
  margin-right: auto;
}

.crs-pointer {
  cursor: pointer;
}

/* Buttons module - BEM naming */
.buttons__group {
  margin-left: calc(var(--space-md) * -1);
  margin-right: calc(var(--space-md) * -1);
  margin-bottom: calc(var(--space-md) * -1);
}

.buttons__group > a {
  margin-left: var(--space-md);
  margin-right: var(--space-md);
  margin-bottom: var(--space-md);
  display: inline-block;
}

/* Three columns - custom */
.three-columns-row {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--space-md) * -1);
  position: relative;
}

.three-columns-row > .column {
  display: flex;
  flex-direction: column;
}

/* two columns row */
.two-columns-row {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.two-columns-row .small-column {
  width: 34%;
  padding-right: var(--space-3xl);
}

.two-columns-row .large-column {
  width: 66%;
}

@media (min-width: 1024px) {
  .three-columns-row > .column {
    margin: var(--space-md);
    width: -webkit-calc(100% / 3 - var(--space-xl));
    width: -moz-calc(100% / 3 - var(--space-xl));
    width: calc(100% / 3 - var(--space-xl));
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .three-columns-row > .column {
    margin: var(--space-md);
    width: -webkit-calc(100% / 2 - var(--space-xl));
    width: -moz-calc(100% / 2 - var(--space-xl));
    width: calc(100% / 2 - var(--space-xl));
  }
}

@media (max-width: 767px) {
  .three-columns-row {
    margin: calc(var(--space-md) * -1) 0;
  }
  .three-columns-row > .column {
    margin: var(--space-md);
    width: 100%;
    max-width: var(--content-max-width-narrow);
    margin-left: auto;
    margin-right: auto;
  }
  div hr {
    margin-left: auto;
    margin-right: auto;
  }
  .text-left,
  .text-right {
    text-align: center;
  }
  ul li,
  ol li {
    text-align: left;
  }
  h6 br,
  h5 br,
  h4 br,
  h3 br,
  h2 br,
  h1 br {
    display: none;
  }
}

/* Theme card */
.overflow-hidden {
  overflow: hidden;
}

.hover-translate-y {
  transition: var(--transition-base);
}

.hover-translate-y:hover {
  transform: translateY(-5px);
}

/* ==========================================================================
   THEME CARD - Card component using design system
   ========================================================================== */

/* .theme-card is declared in four stylesheets - here, _design-system.css,
   _typography.css and theme-overrides.css - and the last one loaded wins.
   They disagreed on surface, radius and shadow, so which file happened to
   load last decided what a card looked like. All four now read the same card
   tokens, which makes the load order stop mattering. */
.theme-card {
  background-color: var(--card-bg);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  transition: var(--transition-base);
  overflow: hidden;
}

.theme-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.theme-card .card-image {
  height: var(--card-image-height);
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.theme-card .card-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: var(--transition-slow);
}

.theme-card:hover .card-image img {
  transform: scale(1.02);
}

.theme-card .card-body {
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex: 1;
  justify-content: flex-start;
  gap: var(--space-element);
}

.theme-card .card-body .card-title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin: 0;
}

.theme-card .card-body .card-title.no-margin {
  margin: 0;
}

.theme-card .card-body .card-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.theme-card .card-body .card-description {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  opacity: 0.8;
  margin: 0;
}

.theme-card .card-extra-information {
  margin-top: var(--space-tight);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-tight);
}

.theme-card .card-extra-information p {
  font-size: var(--font-size-xs);
  position: relative;
  padding-left: calc(var(--space-md) + var(--space-xs));
  margin: 0;
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
}

.theme-card .card-extra-information .material-icons {
  font-size: var(--font-size-sm);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  color: var(--color-accent);
}

.theme-card .card-link {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  top: 0;
  left: 0;
}

.theme-card .card-extra-information > div {
  display: inline-flex;
  align-items: center;
}

/* ==========================================================================
   Reduced Motion - Accessibility for users who prefer no animations
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .theme-card:hover,
  .theme-card:hover .card-image img {
    transform: none;
  }

  .hover-translate-y:hover {
    transform: none;
  }
}

/* ==========================================================================
   Print Styles - Clean printing for documentation and pages
   ========================================================================== */

@media print {
  /* Hide non-essential elements */
  .skip-to-content,
  nav,
  header,
  footer,
  .fixed-button,
  .modal-wrapper,
  .search-modal-wrapper,
  button,
  .hs-button,
  video,
  iframe {
    display: none !important;
  }

  /* Reset backgrounds and colors for printing */
  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
    line-height: 1.5;
  }

  /* Ensure content is readable */
  main {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Show URLs after links */
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* Avoid page breaks inside important elements */
  h1, h2, h3, h4, h5, h6,
  img,
  .theme-card {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Keep headings with their content */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    break-after: avoid;
  }
}

/* ==========================================================================
   Loading States - Button loading animation
   ========================================================================== */

.btn-loading,
.primary-button.is-loading,
.secondary-button.is-loading,
.hs-button.is-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.btn-loading::after,
.primary-button.is-loading::after,
.secondary-button.is-loading::after,
.hs-button.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Selection Styles - Brand-colored text selection
   ========================================================================== */

::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

::-moz-selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* ==========================================================================
   FEATURE LIST - the tab-panel grid

   .feature-list had no rule anywhere in the theme. The markup is three
   h4 + ul pairs meant to read as columns; with no rule the h4s and the
   uls stacked as one bare bulleted list down the left 1052px of an
   1100px panel, 451px tall, which is the empty-looking tab panel
   reported on /product. Identical in all four tab states.

   The h4 and its ul are siblings, so the grid cannot flow item by item
   or the headings and the lists would land in separate cells. Flowing by
   column with two explicit rows pairs each heading with the list under
   it and keeps every heading on one baseline. It also means the number
   of items inside a list is irrelevant: a group of four sits beside two
   groups of three without orphaning anything, and a fourth group makes a
   fourth column rather than wrapping one lonely group onto a new row.
   ========================================================================== */

.feature-list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto 1fr;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: var(--space-2xl);
  row-gap: var(--space-md);
  align-items: start;
}

.feature-list > h4 {
  grid-row: 1;
  margin: 0;
}

.feature-list > ul {
  grid-row: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  row-gap: var(--space-sm);
}

.feature-list > ul > li {
  position: relative;
  padding-left: var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
}

/* The marker is the theme's hairline, not a bullet glyph: a dot at body
   colour is the loudest mark on a monochrome panel. */
.feature-list > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--font-size-sm) * 0.7);
  width: var(--space-sm);
  height: 1px;
  background-color: var(--color-border);
}

@media (max-width: 767px) {
  /* Three columns of four short items is unreadable at 390px. One column,
     and the explicit rows have to be released or the groups would all
     stack into the same two tracks. */
  .feature-list {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-lg);
  }

  .feature-list > h4,
  .feature-list > ul {
    grid-row: auto;
  }
}

/* ==========================================================================
   READER MEASURE

   Measured on /pillar: .section-body renders 1068px wide at 15px, about
   145 characters a line - roughly twice a comfortable measure, and the
   reason the long-form pages are hard to read rather than badly styled.
   The Pillar Content module is also what /privacy-policy runs on, so the
   measure lands on both reader pages from one rule.

   The cap goes on the prose, not on the column, so the section heading and
   any full-width media in the same column are untouched.

   --content-max-width-medium is 640px. The direction asked for ~680 and no
   token carries that number; the ramp runs 580 / 640 / 800, so 640 is the
   nearest real token and it errs tight rather than wide. A --content-max-
   width-reader at 680px is the token this rule actually wants.
   ========================================================================== */

/* The docs article is the other reader page. Measured at 1440 its prose
   column runs 768px, about 107 characters a line. The Docs module sets no
   max-width at all, so this is the first cap on it rather than a fight
   with one - and it goes on the prose column, leaving the three-column
   docs shell, its sidebar and its on-this-page rail where they are. */
.docs__article .docs__content {
  max-width: var(--content-max-width-medium);
}
/* ==========================================================================
   MODALS - All modal styles using design tokens
   ========================================================================== */

/* Search modal */
.search-modal-wrapper .modal {
  height: 100%;
  left: 0;
  opacity: 0;
  overflow-y: auto;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: -998;
}

.search-modal-wrapper .modal.visible {
  display: block;
  opacity: 1;
  transition: var(--transition-base);
  z-index: 1100;
}

.search-modal-wrapper .overlay {
  bottom: 0;
  display: none;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  width: 100%;
  z-index: -999;
  background: var(--color-overlay);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

.search-modal-wrapper .overlay.visible {
  display: block;
  opacity: 1;
  z-index: 1050;
}

.search-modal-wrapper .modal-card {
  display: inline-block;
  height: auto;
  margin: 120px auto var(--space-3xl);
  max-width: var(--modal-max-width-sm);
  padding: var(--space-lg);
  position: relative;
  text-align: left;
  width: 90%;
  z-index: 1100;
  background: var(--color-cards-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2xl);
}

@media (max-width: 820px) {
  .modal-wrapper span.close {
    right: var(--space-md);
    top: var(--space-md);
  }
}

@media (min-width: 421px) and (max-width: 820px) {
  .modal-wrapper .modal-card {
    max-width:90%;
    padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  }
  .modal-wrapper span.close {
    right: var(--space-md);
    top: var(--space-md);
  }
}

@media (max-width: 420px) {
  .modal-wrapper .modal-card {
    max-width:94%;
    padding: var(--space-2xl) var(--space-md) var(--space-lg);
  }
}
/* End search modal */

/* Default modal - BEM naming (.modal as block) */
.modal .modal__dialog {
  height: 100%;
  left: 0;
  opacity: 0;
  overflow-y: auto;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: -998;
}

.modal .modal__dialog.visible {
  display: block;
  opacity: 1;
  z-index: 999;
}

.modal .modal__overlay {
  bottom: 0;
  display: none;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  width: 100%;
  z-index: -999;
  background-color: var(--color-overlay);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.modal .modal__overlay.visible {
  display: block;
  opacity: 1;
  z-index: 997;
}

.modal .modal__card {
  background-color: var(--color-cards-bg);
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: inline-block;
  height: auto;
  margin: var(--space-3xl) auto;
  max-width: var(--modal-max-width-md);
  padding: var(--space-xl);
  position: relative;
  width: 100%;
  z-index: 999;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.modal .modal__card .modal__title {
  margin: 0 0 var(--space-2xl);
}

.modal .modal__card .modal__title p {
  margin: var(--space-sm) 0 0;
}

.modal .modal__card .modal__body {
  font-size: var(--font-size-body);
  text-align: left;
}

.modal .modal__card .modal__body p {
  font-size: var(--font-size-body);
}

.modal .modal__card .modal__body>div h1,
.modal .modal__card .modal__body>div h2,
.modal .modal__card .modal__body>div h3,
.modal .modal__card .modal__body>div h4,
.modal .modal__card .modal__body>div h5,
.modal .modal__card .modal__body>div h6,
.modal .modal__card .modal__body>div p,
.modal .modal__card .modal__body>div pre,
.modal .modal__card .modal__body>div blockquote,
.modal .modal__card .modal__body>div ol,
.modal .modal__card .modal__body>div ul {
  display: inline-block;
  margin: 0 0 var(--space-md);
  width: 100%;
}

.modal .modal__card .modal__body ul ul,
.modal .modal__card .modal__body ol ol,
.modal .modal__card .modal__body ul ol,
.modal .modal__card .modal__body ol ul {
  margin: 0;
}

.modal .modal__card .modal__body ul li,
.modal .modal__card .modal__body ol li {
  margin-bottom: var(--space-xs);
}

.modal .modal__card .modal__body ul li p,
.modal .modal__card .modal__body ol li p {
  margin: 0;
}

.modal .modal__card .modal__body ul li:last-child,
.modal .modal__card .modal__body ol li:last-child {
  margin: 0;
}

.modal .modal__card .modal__body img {
  display: block;
  height: auto;
  margin: 0 auto var(--space-md);
  max-width: 100%;
}

.modal .modal__card .modal__body p img {
  margin: 0 auto;
}

.modal .modal__card .modal__body blockquote {
  border-left: 2px solid var(--color-accent);
  font-style: italic;
  padding: var(--space-sm) var(--space-md);
}

.modal .modal__card .modal__body pre {
  background: var(--color-accent-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
  overflow-x: auto;
  padding: var(--space-sm) var(--space-md);
}

.modal .modal__close {
  cursor: pointer;
  font-size: var(--icon-size-lg);
  opacity: 1;
  position: absolute;
  right: var(--space-md);
  top: var(--space-md);
  transition: var(--transition-base);
  z-index: 2;
  color: var(--color-text-muted);
}

.modal .modal__close:hover {
  opacity: .5;
}

.modal--with-form .hs_cos_wrapper_type_form > h3 {
  display: none;
}

.modal--with-form .modal__card {
  max-width: var(--modal-max-width-sm);
}

@media (max-width: 820px) {
  .modal .modal__close {
    right: var(--space-md);
    top: var(--space-md);
  }
}

@media (min-width: 421px) and (max-width: 820px) {
  .modal .modal__card {
    max-width:90%;
    padding: var(--space-lg);
  }
  .modal .modal__close {
    right: var(--space-md);
    top: var(--space-md);
  }
}

@media (max-width: 420px) {
  .modal .modal__card {
    max-width:94%;
    padding: var(--space-md);
  }
}

/* End default modal */

/* Video modal */
.video-modal-wrapper .video-modal {
  height: 100%;
  left: 0;
  opacity: 0;
  overflow-y: auto;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: -998;
}

.video-modal-wrapper .video-modal.visible {
  display: block;
  opacity: 1;
  z-index: 999;
}

.video-modal-wrapper .overlay {
  bottom: 0;
  display: none;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  width: 100%;
  z-index: -999;
  background-color: var(--color-overlay);
}

.video-modal-wrapper .overlay.visible {
  display: block;
  opacity: 1;
  z-index: 997;
}


.video-modal-wrapper .video {
  padding: var(--space-2xl) var(--space-md);
  max-width: var(--modal-max-width-lg);
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
}

.video-modal-wrapper .close-button {
  color: var(--color-on-dark);
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  z-index: -999;
  cursor: pointer;
  transition: var(--transition-base);
  display: none;
}

.video-modal-wrapper .close-button:hover {
  opacity: .6;
}

.video-modal-wrapper.open .close-button {
  display: block;
  z-index: 999;
}

.video-modal-wrapper .video video {
  max-width: 100%;
  height: auto;
  width: auto;
  box-shadow: var(--shadow-xl);
  max-height: 100%;
  margin: 0 auto;
}

.video-modal-wrapper .loader {
  display: none;
  position: fixed;
  width: var(--loader-size);
  height: var(--loader-size);
  border: 5px solid var(--color-on-dark);
  border-top-color: transparent;
  border-radius: var(--radius-full);
  z-index: -999;
  top: 50%;
  left: 50%;
  margin-top: calc(var(--loader-size) / -2);
  margin-left: calc(var(--loader-size) / -2);
}

.video-modal-wrapper .loader.visible {
  display: block;
  z-index: 999;
  animation: rotating 1s linear infinite;
}

/* End video modal */

/* Editor-only notice when no form is selected on a form modal */
.modal .modal__card .modal__body .modal__form-placeholder {
  padding: var(--space-lg);
  background: var(--color-muted);
  border-radius: var(--radius-md);
  text-align: center;
  opacity: 0.5;
}
.modal .modal__card .modal__body .modal__form-placeholder p {
  margin: 0;
  color: var(--color-foreground);
}
/* ==========================================================================
   BASE ELEMENT SPACING
   ========================================================================== */

h1, h2, h3, h4, h5, h6, p, ul, ol, pre, blockquote, hr {
  margin: 0 0 var(--space-xl);
}

/* ==========================================================================
   BODY & BASE TYPOGRAPHY
   ========================================================================== */

body {
  background-color: var(--color-body-bg);
  color: var(--type-body-color, var(--color-text));
  font-family: var(--type-body-family, var(--font-family-body));
  font-weight: var(--type-body-weight, inherit);
  font-style: var(--type-body-style, normal);
  font-size: var(--font-size-body);
  line-height: var(--type-body-line-height, var(--line-height-normal));
}

.body-text {
  font-family: var(--type-body-family, var(--font-family-body));
  font-weight: var(--type-body-weight, inherit);
  color: var(--type-body-color, var(--color-text));
  font-size: var(--font-size-body);
  line-height: var(--type-body-line-height, var(--line-height-normal));
  margin-bottom: var(--type-body-margin, 0);
}

hr {
  border-bottom: var(--hairline) solid var(--color-border);
  border-top: 0;
}

/* ==========================================================================
   TITLE LABEL / EYEBROW TEXT
   ========================================================================== */

/* The eyebrow. Same three tokens as .type-label, because they are the same
   thing typographically - a small tracked all-caps label over a group. The
   0.1em tracking that used to be hardcoded here is --letter-spacing-wider,
   and its margin comes from --stack-eyebrow in theme-overrides.css, which is
   the one place the heading stack's four gaps are decided. */
.title-label {
  font-family: var(--font-family-body);
  color: var(--color-accent);
  font-size: var(--type-label);
  font-weight: var(--type-label-weight);
  text-transform: uppercase;
  letter-spacing: var(--type-label-tracking);
  margin-bottom: var(--space-xs);
  display: block;
}

/* ==========================================================================
   NAMED TYPE VARIANTS

   The bare h1-h6 rules below are the scale, and they are the ONLY place a
   heading tag gets a size. Measured across six pages before this existed:
   h2 rendered at seven different sizes (30, 14, 41.76, 33.12, 22, 18, 15)
   and h3 at four, because thirty-odd module rules each pointed a heading
   class at whatever --font-size-* token looked right, so the tag was chosen
   for meaning and the size for taste and the two never met. One theme
   setting for h2 therefore did not drive every h2 - which is a marketplace
   submission failure as well as the reason the page reads as flat.

   A heading that genuinely needs a different size is a NAMED VARIANT with
   its own token, applied on purpose, and the tag underneath stays
   semantically correct. There are exactly three, and any module wanting a
   size other than its tag's must use one of them rather than reach for a
   --font-size-* token:

     --type-display     a hero headline. Fluid, and the only type on the site
                        allowed to grow with the viewport.
     --type-card-title  the title of a card or list item. One size for every
                        card on the site, so a row of cards reads as one
                        object and a card title still out-ranks its body.
     --type-label       an all-caps label over a group - a footer column, a
                        menu column, an eyebrow. Deliberately small, and
                        therefore never a heading tag: an element that reads
                        as a label is marked up as a label, which is also
                        what keeps the heading order intact.
   ========================================================================== */

/* `:root, [data-preset]` and not `:root` alone. The right-hand sides are
   var() references, and a custom property whose value contains var() is
   resolved at computed-value time ON THE ELEMENT THAT DECLARES IT. Declared
   only on html, --type-display would freeze to the size html sees and
   never pick up a preset value or a buyer setting, both of which are
   declared on body. Repeating the declaration on the body re-resolves it
   there. */
:root,
[data-preset] {
  --type-display: var(--font-size-display);
  --type-card-title: var(--card-title-size, var(--font-size-h4));
  --type-label: var(--font-size-xs);
  --type-label-weight: var(--font-weight-semibold);
  --type-label-tracking: var(--letter-spacing-wider);
}

.type-label {
  font-family: var(--font-family-body);
  font-size: var(--type-label);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-md);
}

.type-card-title {
  font-size: var(--type-card-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

/* ==========================================================================
   HEADINGS
   ========================================================================== */

h1 {
  font-family: var(--type-h1-family, var(--font-family-heading));
  color: var(--type-h1-color, var(--color-heading));
  font-size: var(--font-size-h1);
  font-weight: var(--type-h1-weight, var(--font-weight-bold));
  font-style: var(--type-h1-style, normal);
  margin: 0 0 var(--type-h1-margin, var(--space-element));
  line-height: var(--type-h1-line-height, var(--line-height-h1));
  letter-spacing: var(--letter-spacing-tight);
}

h2 {
  font-family: var(--type-h2-family, var(--font-family-heading));
  color: var(--type-h2-color, var(--color-heading));
  font-size: var(--font-size-h2);
  font-weight: var(--type-h2-weight, var(--font-weight-bold));
  font-style: var(--type-h2-style, normal);
  margin: 0 0 var(--type-h2-margin, var(--space-element));
  line-height: var(--type-h2-line-height, var(--line-height-h2));
  letter-spacing: var(--letter-spacing-tight);
}

h3 {
  font-family: var(--type-h3-family, var(--font-family-heading));
  color: var(--type-h3-color, var(--color-heading));
  font-size: var(--font-size-h3);
  font-weight: var(--type-h3-weight, var(--font-weight-semibold));
  font-style: var(--type-h3-style, normal);
  margin: 0 0 var(--type-h3-margin, var(--space-tight));
  line-height: var(--type-h3-line-height, var(--line-height-h3));
}

h4 {
  font-family: var(--type-h4-family, var(--font-family-heading));
  color: var(--type-h4-color, var(--color-heading));
  font-size: var(--font-size-h4);
  font-weight: var(--type-h4-weight, var(--font-weight-semibold));
  font-style: var(--type-h4-style, normal);
  margin: 0 0 var(--type-h4-margin, var(--space-tight));
  line-height: var(--type-h4-line-height, var(--line-height-h4));
}

h5 {
  font-family: var(--type-h5-family, var(--font-family-heading));
  color: var(--type-h5-color, var(--color-heading));
  font-size: var(--font-size-h5);
  font-weight: var(--type-h5-weight, var(--font-weight-medium));
  font-style: var(--type-h5-style, normal);
  margin: 0 0 var(--type-h5-margin, var(--space-tight));
  line-height: var(--type-h5-line-height, var(--line-height-h5));
}

h6 {
  font-family: var(--type-h6-family, var(--font-family-heading));
  color: var(--type-h6-color, var(--color-heading));
  font-size: var(--font-size-h6);
  font-weight: var(--type-h6-weight, var(--font-weight-medium));
  font-style: var(--type-h6-style, normal);
  margin: 0 0 var(--type-h6-margin, var(--space-tight));
  line-height: var(--type-h6-line-height, var(--line-height-h6));
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}

/* Remove bottom margin from last elements */
h1:last-child, h2:last-child, h3:last-child,
h4:last-child, h5:last-child, h6:last-child,
p:last-child {
  margin-bottom: 0;
}

/* Paragraph spacing */
p {
  font-family: var(--type-p-family, inherit);
  font-weight: var(--type-p-weight, inherit);
  font-style: var(--type-p-style, normal);
  font-size: var(--font-size-p, inherit);
  color: var(--type-p-color, inherit);
  margin: 0 0 var(--type-p-margin, var(--space-element));
  line-height: var(--type-p-line-height, var(--line-height-normal));
}

/* List items */
li {
  font-family: var(--type-li-family, inherit);
  font-weight: var(--type-li-weight, inherit);
  font-style: var(--type-li-style, normal);
  font-size: var(--font-size-li, inherit);
  color: var(--type-li-color, inherit);
  line-height: var(--type-li-line-height, inherit);
  margin-bottom: var(--type-li-margin, 0);
}

/* ==========================================================================
   BLOCKQUOTE & LINKS
   ========================================================================== */

blockquote {
  font-family: var(--type-bq-family, var(--font-family-body));
  font-weight: var(--type-bq-weight, inherit);
  color: var(--type-bq-color, var(--color-text-muted));
  font-size: var(--font-size-bq, var(--font-size-lg));
  font-style: var(--type-bq-style, italic);
  line-height: var(--type-bq-line-height, inherit);
  background-color: var(--blockquote-bg, transparent);
  padding: var(--space-tight) var(--space-element);
  padding-left: var(--blockquote-padding-left, var(--space-element));
  border-left: var(--blockquote-border-width, 2px) solid var(--blockquote-border-color, var(--color-accent));
  margin: 0 0 var(--type-bq-margin, var(--space-element));
}

a {
  font-family: var(--type-link-family, inherit);
  font-weight: var(--type-link-weight, inherit);
  font-style: var(--type-link-style, normal);
  font-size: var(--font-size-link, inherit);
  line-height: var(--type-link-line-height, inherit);
  margin-bottom: var(--type-link-margin, 0);
  color: var(--type-link-color, var(--color-link));
  text-decoration: none;
  transition: var(--transition-base);
}

a:hover {
  color: var(--type-link-hover-color, var(--color-link-hover));
  text-decoration-line: var(--link-hover-underline, none);
}

/* ==========================================================================
   CODE BLOCKS
   ========================================================================== */

pre {
  background-color: var(--code-block-bg, var(--color-card-bg));
  font-family: var(--type-codeblock-family, var(--font-family-mono, monospace));
  font-weight: var(--type-codeblock-weight, inherit);
  color: var(--type-codeblock-color, var(--color-text));
  font-size: var(--font-size-codeblock, var(--font-size-sm));
  line-height: var(--type-codeblock-line-height, inherit);
  padding: var(--code-block-padding, var(--space-element));
  overflow-x: auto;
  border-radius: var(--code-block-radius, var(--radius-sm));
  margin: 0 0 var(--type-codeblock-margin, var(--space-element));
}

code {
  font-family: var(--type-code-family, var(--font-family-mono, monospace));
  font-weight: var(--type-code-weight, inherit);
  color: var(--type-code-color, inherit);
  font-size: var(--font-size-code, 0.9em);
  line-height: var(--type-code-line-height, inherit);
  background-color: var(--code-inline-bg, var(--color-card-bg));
  padding: var(--code-inline-padding, 0.2em) var(--code-inline-padding-x, 0.4em);
  border-radius: var(--code-inline-radius, var(--radius-sm));
}

pre code {
  background: none;
  padding: 0;
}

/* ==========================================================================
   PRIMARY BUTTON
   Uses background-position animation for smooth gradient transitions
   ========================================================================== */

.primary-button {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  background: var(--btn-primary-bg);
  background-size: var(--btn-primary-bg-size, 100% 100%);
  background-position: var(--btn-primary-bg-position, 0 0);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  color: var(--btn-primary-color);
  border: var(--btn-primary-border-width) solid var(--btn-primary-border);
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  box-shadow: var(--btn-shadow);
  font-size: var(--font-size-body);
  cursor: pointer;
  transition: var(--btn-transition, all var(--transition-base));
}

.primary-button:hover {
  background-position: var(--btn-primary-bg-position-hover, 0 0);
  background-color: var(--btn-primary-bg-hover, var(--btn-primary-bg));
  color: var(--btn-primary-color-hover);
  border-color: var(--btn-primary-border-hover);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(calc(var(--btn-lift-distance) * -1));
}

.primary-button:active {
  transform: translateY(var(--press-distance));
}

/* ==========================================================================
   SECONDARY BUTTON
   ========================================================================== */

.secondary-button {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  background: var(--btn-secondary-bg);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  color: var(--btn-secondary-color);
  border: var(--btn-border-width) solid var(--btn-secondary-border);
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  box-shadow: var(--btn-shadow);
  font-size: var(--font-size-body);
  cursor: pointer;
  transition: var(--btn-transition, all var(--transition-base));
}

.secondary-button:hover {
  background: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-color-hover);
  border-color: var(--btn-secondary-border-hover);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(calc(var(--btn-lift-distance) * -1));
}

.secondary-button:active {
  transform: translateY(var(--press-distance));
}

/* ==========================================================================
   TERTIARY BUTTON
   ========================================================================== */

.tertiary-button {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  background: transparent;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  border: var(--btn-border-width) solid var(--color-border);
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  box-shadow: none;
  font-size: var(--font-size-body);
  cursor: pointer;
  transition: var(--btn-transition, all var(--transition-base));
}

.tertiary-button:hover {
  background: var(--color-card-bg);
  color: var(--color-text);
  border-color: var(--color-border-hover);
  transform: translateY(calc(var(--btn-lift-distance) * -1));
}

.tertiary-button:active {
  transform: translateY(var(--press-distance));
}

/* ==========================================================================
   GHOST BUTTON
   ========================================================================== */

.ghost-button {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  background: transparent;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  border: var(--btn-primary-border-width) solid transparent;
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  box-shadow: none;
  font-size: var(--font-size-body);
  cursor: pointer;
  transition: var(--btn-transition, all var(--transition-base));
}

.ghost-button:hover {
  background: var(--color-accent-light);
  color: var(--color-accent);
  transform: translateY(calc(var(--btn-lift-distance) * -1));
}

.ghost-button:active {
  transform: translateY(var(--press-distance));
}

/* ==========================================================================
   BUTTON ICONS
   Styles for buttons with icons (Material Symbols)
   ========================================================================== */

.primary-button.has-icon,
.secondary-button.has-icon,
.tertiary-button.has-icon,
.ghost-button.has-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.primary-button .btn-icon,
.secondary-button .btn-icon,
.tertiary-button .btn-icon,
.ghost-button .btn-icon {
  font-size: 1.25em;
  line-height: 1;
  flex-shrink: 0;
}

/* Icon position - flex-direction handles left/right positioning */
.primary-button.icon-left,
.secondary-button.icon-left,
.tertiary-button.icon-left,
.ghost-button.icon-left {
  flex-direction: row;
}

.primary-button.icon-right,
.secondary-button.icon-right,
.tertiary-button.icon-right,
.ghost-button.icon-right {
  flex-direction: row;
}

/* ==========================================================================
   SEARCH FIELD BUTTONS
   Uses same background-position animation as primary buttons
   ========================================================================== */

.hs-search-field button {
  display: inline-block;
  text-align: center;
  background: var(--btn-primary-bg);
  background-size: var(--btn-primary-bg-size, 100% 100%);
  background-position: var(--btn-primary-bg-position, 0 0);
  font-family: var(--font-family-body);
  color: var(--btn-primary-color);
  border: var(--btn-primary-border-width) solid var(--btn-primary-border);
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  box-shadow: var(--btn-shadow);
  font-size: var(--font-size-body);
  cursor: pointer;
  transition: background-position var(--transition-slow),
              color var(--transition-slow),
              border-color var(--transition-slow),
              box-shadow var(--transition-slow);
}

.hs-search-field button svg {
  fill: var(--btn-primary-color);
  transition: fill var(--transition-slow);
}

.hs-search-field button:hover {
  background-position: var(--btn-primary-bg-position-hover, 0 0);
  color: var(--btn-primary-color-hover);
  border-color: var(--btn-primary-border-hover);
  box-shadow: var(--btn-shadow-hover);
}

.hs-search-field button:hover svg {
  fill: var(--btn-primary-color-hover);
}

/* ==========================================================================
   LAYOUT - CONTAINER & SECTIONS
   ========================================================================== */

.container {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.dnd-section {
  /* Block padding is the seam - see _theme-styles.css. Only the gutter here. */
  padding-inline: var(--container-padding);
}

/* EVERY hero is full-bleed. Not only the ones flagged full_width.

   This used to read `:has(.hero[data-full-width="true"])`, and over twenty
   templates pass `'full_width': False`. The result was a hero that got the
   floating shell - the 8px gutter and the 32px radius - while its BAND still
   stopped at --container-max-width, so the block was inset twice and the
   owner's "all the hero and the footer at 100% width" could not land no
   matter what the shell rules did.

   Dropping the attribute is the whole fix, and it is deliberately made here
   in one line rather than by editing the twenty-plus templates that pass the
   flag: the flag stops being a switch and the hero is simply always
   full-bleed. The section gives up its padding and its container cap; the
   hero's own --shell-inset margin is what holds it off the window edge.

   `padding: 0` (the shorthand) also clears the --container-padding gutter
   set above. At (0,2,0) against that rule's (0,1,0) it wins on weight, so
   nothing here depends on file order.

   THE IMPORTANCE FLAG ON THE BLOCK PADDING IS NOT DECORATION, and it is the
   only one in this pass. HubSpot emits a page's drag-and-drop padding
   settings as its own stylesheet, and it emits them WITH an importance flag:
   the homepage and /features both carry
   `.dnd_area-row-0-padding { padding-top: 92px !important }`, written by the
   page editor, not by any template. Measured on the live homepage that beat
   the rule above and left the opening hero 92px down the page - a white band
   between the floating navigation and the top of the hero, which is exactly
   the "why do i still see a padding top" report. Nothing unflagged can reach
   it.

   The flag is scoped as tightly as the problem: block padding only, only on
   a section that actually contains a hero. The inline gutter stays
   unflagged, so a page that wants a wider or narrower gutter can still have
   one. `html body` lifts this to (0,3,2) so it is not a coin toss against
   any other flagged rule that might appear later.

   The right long-term fix is to clear that padding setting on the two pages
   in the page editor, at which point this flag can go. Until then a page
   author can still restore top padding deliberately with data-seam, which
   the hero shell does not read. */
.dnd-section:has(.hero) {
  padding: 0;
}

html body .dnd-section:has(.hero) {
  padding-block: 0 !important;
}
/* A hero section lifts the container cap on EVERY row-fluid inside it, not
   just its direct child. HubSpot nests a second row-fluid for each dnd module
   (section > row-fluid > span12 > row-fluid-wrapper > row-fluid > span12 >
   hs_cos_wrapper > .hero), so a child-combinator rule uncaps the outer row
   while the inner one keeps max-width and the hero renders at
   container - gutters instead of full-bleed. Measured on /services at 1440:
   the hero was 1184px (1200 cap - 2x8px margin) against a 1424px target,
   leaving 248px of empty page beside it. */
/* A hero section runs full-bleed: every wrapper between the section and the
   hero must give up the container cap AND the auto-centring that goes with it.
   Uncapping the outer row alone left the inner .span12 at 1200px sitting hard
   against the left edge (measured 0 left / 240 right at 1440) because the
   centring came from the cap it had just lost.
   The flags are deliberate and scoped to hero sections only. This cascade has
   several writers - preset blocks, an inline theme-styles partial emitting at
   body[data-preset], and HubSpot's own grid - and a plain declaration lost to
   one of them five times. Do not remove them without measuring hero width
   against footer width on /services, /about, /team and /contact first: they
   must be equal. */
.dnd-section:has(.hero) .row-fluid,
.dnd-section:has(.hero) .span12,
.dnd-section:has(.hero) .dnd-column {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* THE HERO IS STILL NOT FULL-BLEED, AND THE RULE ABOVE CANNOT MAKE IT ONE.

   Measured live at 1440 on /services, /about, /team, /contact, /partners,
   /faqs, /pricing, /portfolio and /homepage-1: the hero came out 1184px wide
   against a 1424px footer, which is the mismatch a reader can see because the
   two blocks are supposed to be the same shell.

   THE CHAIN. section 1440 - its row-fluid 1440 - `.span12.dnd-column` 1200 -
   and everything below inherits 1200, so the hero is 1200 less its own two
   8px margins. The 1200 is on that column, and the rule above matches it (it
   carries `.span12`) and says `none`.

   WHY THE RULE LOSES. The column carries an INLINE style:

     max-width: var(--container-max-width); margin-left: auto; margin-right: auto

   written by the Extra section settings module's script. An inline
   declaration beats every stylesheet rule regardless of specificity, and no
   selector written in this file can outrank it without an importance flag.

   This is also why the earlier diagnosis went in a circle. Chrome's
   `CSS.getMatchedStylesForNode` returns author rules in `matchedCSSRules` and
   the element's inline declarations in a SEPARATE `inlineStyle` field. Read
   only the first and the answer is "the one matching rule resolves to none" -
   which is true, and not the reason the computed value is 1200px. If a
   matched rule and the computed value disagree, read `inlineStyle` next.

   THE FIX IS TO MOVE THE TOKEN, NOT TO OUT-SPECIFY THE RULE. The inline value
   is not a length, it is `var(--container-max-width)`. A var() inside a
   longhand is substituted at computed-value time using the custom property as
   it resolves ON THAT ELEMENT - and a custom property can be set from a
   stylesheet at any weight. Setting it to `none` on the column makes the
   module's own inline declaration compute to `max-width: none`. No importance
   flag, no fight, and nothing to keep in sync: if the module is later fixed to
   write `none` itself, the two agree.

   THE RESTORE LINE IS NOT OPTIONAL. `--container-max-width` inherits, and the
   Banner module caps the hero's TEXT column with
   `calc(var(--container-max-width) + var(--container-padding) * 2)`. Left at
   `none` that calc is invalid at computed-value time, the cap disappears, and
   the headline runs the full width of the window - a worse defect than the
   one being fixed. Re-declaring the token on the column's children keeps the
   escape to exactly the one element that carries the inline style. Measured
   after the fix: hero 1424 at left 8, matching the footer, with the hero's own
   `.hero__container` still 1232 at left 104 so its text lines up with every
   section below it.

   --content-measure is read from --container-max-width on the body, so it
   picks up whatever theme-styles.html emits at `body[data-preset]` rather than
   re-stating a number this file would then have to keep in step. */
html body {
  --content-measure: var(--container-max-width);
}

html body .dnd-section:has(.hero) .dnd-column {
  --container-max-width: none;
}

html body .dnd-section:has(.hero) .dnd-column > * {
  --container-max-width: var(--content-measure);
}

.dnd-section > .row-fluid {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Row spacing within sections. This is the section header block -> content
   boundary. It must be larger than the largest gap INSIDE the content it
   introduces, or the heading groups with the first card row instead of
   introducing it. The card-grid gap is --space-xl, so this is --space-3xl
   (2x). Do not lower it back to --space-xl. */
.dnd-section .row-fluid-wrapper + .row-fluid-wrapper {
  margin-top: var(--space-3xl);
}

/* A settings-only row must not open that gap.

   "Extra section settings" emits a script and a style and paints nothing,
   but it is still a .row-fluid-wrapper: it drew a 1px line box AND satisfied
   the adjacent-sibling rule above, so every section carrying it gained
   48 + 1 = 49px on the TOP and nothing on the bottom. Measured at exactly +49
   on every section of /services, /portfolio and /homepage-1 - it is why the
   whole theme reads top-heavy and why no per-page padding fix ever held.
   The row is collapsed rather than display:none so an anchor target inside it
   still resolves for jump links.

   This lives beside the rule it corrects rather than in theme-overrides.css,
   which is where it was first landed: at three compound units it outweighs
   the two-unit rule above regardless of source order, so co-locating the rule
   and its exception costs nothing and stops the pair drifting apart. */
.dnd-section .row-fluid-wrapper:has(.section-settings-marker) {
  height: 0;
  line-height: 0;
  font-size: 0;
}

.dnd-section .row-fluid-wrapper:has(.section-settings-marker) + .row-fluid-wrapper {
  margin-top: 0;
}

/* One section's worth of space = half a step seam, which is exactly what
   --section-padding used to mean. Responsive for free via the seam token. */
.section-mt {
  margin-top: calc(var(--seam-step) / 2);
}
.section-mb {
  margin-bottom: calc(var(--seam-step) / 2);
}

/* ==========================================================================
   FORMS - WIDGET & CONTAINER
   ========================================================================== */

.widget-type-form {
  background-color: var(--color-card-bg);
  border: var(--hairline) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.widget-type-form .form-title {
  margin: 0 0 var(--space-xl);
  text-align: center;
  font-family: var(--font-family-heading);
  color: var(--color-heading);
  font-size: var(--font-size-h3);
}

.widget-type-form .hs-richtext p {
  font-family: var(--font-family-body);
  color: var(--color-text);
  font-size: var(--font-size-body);
}

/* ==========================================================================
   FORM BUTTONS
   Uses same background-position animation as primary buttons
   ========================================================================== */

form .hs-button {
  background: var(--btn-primary-bg);
  background-size: var(--btn-primary-bg-size, 100% 100%);
  background-position: var(--btn-primary-bg-position, 0 0);
  color: var(--btn-primary-color);
  border: var(--btn-primary-border-width) solid var(--btn-primary-border);
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  box-shadow: var(--btn-shadow);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  cursor: pointer;
  transition: background-position var(--transition-slow),
              color var(--transition-slow),
              border-color var(--transition-slow),
              box-shadow var(--transition-slow);
}

.newsletter-form .actions:before {
  color: var(--btn-primary-color);
}

form .hs-button:hover {
  background-position: var(--btn-primary-bg-position-hover, 0 0);
  color: var(--btn-primary-color-hover);
  border-color: var(--btn-primary-border-hover);
  box-shadow: var(--btn-shadow-hover);
}

/* ==========================================================================
   FORM INPUTS
   ========================================================================== */

input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=number],
input[type=file],
select,
.custom-select,
textarea {
  background-color: var(--input-bg);
  color: var(--input-color);
  border: var(--input-border-width) solid var(--input-border);
  border-radius: var(--input-border-radius, var(--radius-md));
  padding: var(--input-padding-y, var(--space-sm)) var(--input-padding-x, var(--space-md));
  font-family: var(--input-font-family, var(--font-family-body));
  font-weight: var(--input-font-weight, inherit);
  font-size: var(--input-font-size, var(--font-size-body));
  transition: all var(--transition-base);
  outline: none;
}

.hs-search-field form label,
fieldset > div > label span {
  font-family: var(--form-label-font-family, var(--font-family-body));
  font-weight: var(--form-label-font-weight, inherit);
  color: var(--form-label-color, var(--color-text));
  font-size: var(--form-label-font-size, var(--font-size-sm));
}

fieldset > div > label span.hs-form-required {
  color: var(--color-error);
}

.custom-select,
.hs-form select {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="7.41" viewBox="0 0 12 7.41"><path d="M7.41,8.59,12,13.17l4.59-4.58L18,10l-6,6L6,10Z" transform="translate(-6 -8.59)" fill="%23666"/></svg>');
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  padding-right: calc(var(--space-md) * 3);
  appearance: none;
}

div.hs-search-field--open .hs-search-field__suggestions {
  background-color: var(--input-bg);
  color: var(--input-color);
  border: var(--input-border-width) solid var(--input-border);
  border-radius: var(--radius-md);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
}

#hs_cos_wrapper_site_search form button:before {
  color: var(--input-color);
}

.subscribe-options label>span:before,
.checkbox-row .fakelabel>span:before,
.hs-form-checkbox label>span:before,
.hs-form-booleancheckbox label>span:before {
  background-color: var(--checkbox-bg, var(--input-bg));
  color: var(--input-color);
  border: var(--input-border-width) solid var(--checkbox-border-color, var(--input-border));
}

.hs-form-radio label>span:before {
  background-color: var(--radio-bg, var(--input-bg));
  color: var(--input-color);
  border: var(--input-border-width) solid var(--radio-border-color, var(--input-border));
}

.custom-select:hover,
input[type=text]:hover,
input[type=email]:hover,
input[type=password]:hover,
input[type=tel]:hover,
input[type=number]:hover,
input[type=file]:hover,
select:hover,
textarea:hover {
  border-color: var(--input-border-focus);
}

.subscribe-options label:hover>span:before,
.checkbox-row .fakelabel:hover>span:before,
.hs-form-radio label:hover>span:before,
.hs-form-checkbox label:hover>span:before,
.hs-form-booleancheckbox label:hover>span:before {
  background-color: var(--input-bg);
  border-color: var(--input-border-focus);
}

.custom-select:active,
input[type=text]:active,
input[type=email]:active,
input[type=password]:active,
input[type=tel]:active,
input[type=number]:active,
input[type=file]:active,
select:active,
textarea:active,
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=file]:focus,
select:focus,
textarea:focus {
  background-color: var(--input-bg);
  color: var(--input-color);
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 var(--input-focus-ring-offset, 0px) var(--input-bg, transparent),
              0 0 0 calc(var(--input-focus-ring-offset, 0px) + var(--input-focus-ring-width, 0px)) var(--input-focus-ring-color, transparent);
  outline: 2px solid var(--color-accent);
  outline-offset: var(--focus-outline-offset);
}

form .error {
  border-color: var(--color-error) !important;
}

.legal-consent-container .hs-error-msgs label,
.hs-form-field .hs-error-msgs {
  font-family: var(--form-error-font-family, var(--font-family-body));
  font-weight: var(--form-error-font-weight, inherit);
  color: var(--form-error-color, var(--color-error));
  font-size: var(--form-error-font-size, var(--font-size-sm));
}

::-webkit-input-placeholder {
  color: var(--input-placeholder);
}

::-moz-placeholder {
  color: var(--input-placeholder);
}

:-ms-input-placeholder {
  color: var(--input-placeholder);
}

:-moz-placeholder {
  color: var(--input-placeholder);
}

::placeholder {
  color: var(--input-placeholder);
}

.hs-form-radio label>span {
  font-family: var(--radio-label-font-family, var(--font-family-body));
  font-weight: var(--radio-label-font-weight, inherit);
  color: var(--radio-label-color, var(--color-text));
  font-size: var(--radio-label-font-size, var(--font-size-body));
}

.hs-form-checkbox label>span,
.hs-form-booleancheckbox label>span {
  font-family: var(--checkbox-label-font-family, var(--font-family-body));
  font-weight: var(--checkbox-label-font-weight, inherit);
  color: var(--checkbox-label-color, var(--color-text));
  font-size: var(--checkbox-label-font-size, var(--font-size-body));
}

/* Search input styling */
.hs-search-field__input {
  background-color: var(--input-bg);
  color: var(--input-color);
  border: var(--input-border-width) solid var(--input-border);
  border-radius: var(--input-border-radius, var(--radius-md));
  padding: var(--input-padding-y, var(--space-sm)) var(--input-padding-x, var(--space-md));
  font-family: var(--input-font-family, var(--font-family-body));
  font-size: var(--input-font-size, var(--font-size-body));
  width: 100%;
  outline: none;
  transition: all var(--transition-base);
}

.hs-search-field__input:focus {
  border-color: var(--input-border-focus);
  outline: 2px solid var(--color-accent);
  outline-offset: var(--focus-outline-offset);
}

/* ==========================================================================
   HERO/BANNER SECTIONS
   ========================================================================== */

.banner {
  max-width: var(--hero-max-width, 100%);
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--hero-margin-top, 0);
  border-radius: var(--hero-border-radius, 0);
  overflow: hidden;
}

/* Dark gradient overlay on heroes for text contrast */
.banner .overlay.theme-gradient {
  background: linear-gradient(
    to bottom,
    var(--scrim-30),
    var(--scrim-20),
    var(--scrim-40),
    var(--scrim-60),
    var(--scrim-80)
  );
}

/* Hero padding adjustments */
@media (max-width: 767px) {
  .banner {
    padding-top: var(--hero-padding-mobile);
    padding-bottom: var(--hero-padding-mobile);
  }

}

@media (min-width: 768px) and (max-width: 1023px) {
  .banner {
    padding-top: var(--hero-padding-tablet);
    padding-bottom: var(--hero-padding-tablet);
  }

}

@media (min-width: 1024px) {
  .banner {
    padding-top: var(--hero-padding-desktop);
    padding-bottom: var(--hero-padding-desktop);
  }
}

/* ==========================================================================
   MATERIAL SYMBOLS ICONS
   Google's variable icon font with customizable weight, fill, grade, and size
   Docs: https://developers.google.com/fonts/docs/material_symbols
   ========================================================================== */

.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp {
  /* Essential properties for proper icon rendering */
  font-weight: normal;
  font-style: normal;
  font-size: var(--icon-size-lg);
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';

  /* Variable font axes - controlled via CSS custom properties */
  font-variation-settings:
    'FILL' var(--icon-fill, 0),
    'wght' var(--icon-weight, 400),
    'GRAD' var(--icon-grade, 0),
    'opsz' var(--icon-opsz, 24);

  /* Icon color from design system */
  color: var(--color-icon, var(--color-text));
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
}

.material-symbols-sharp {
  font-family: 'Material Symbols Sharp';
}

/* Legacy Material Icons fallback */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: var(--icon-size-lg);
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  color: var(--color-icon, var(--color-text));
}

/* ==========================================================================
   THEME UTILITY CLASSES
   ========================================================================== */

.accent-color-1 {
  color: var(--color-accent);
}

.theme-cards-background {
  background-color: var(--color-card-bg);
}

.theme-border-radius {
  border-radius: var(--radius-md);
}

.theme-box-shadow {
  box-shadow: var(--shadow-md);
}

.theme-card {
  background-color: var(--card-bg);
  box-shadow: var(--card-shadow);
  border-radius: var(--card-border-radius);
  position: relative;
}

.theme-gradient {
  background: linear-gradient(to bottom,
    rgba(var(--color-body-bg-rgb, 9, 9, 11), 0.6),
    rgba(var(--color-body-bg-rgb, 9, 9, 11), 0.4),
    rgba(var(--color-body-bg-rgb, 9, 9, 11), 0.2),
    rgba(var(--color-body-bg-rgb, 9, 9, 11), 0.4),
    rgba(var(--color-body-bg-rgb, 9, 9, 11), 0.6),
    rgba(var(--color-body-bg-rgb, 9, 9, 11), 0.8),
    rgba(var(--color-body-bg-rgb, 9, 9, 11), 1)
  );
}

a.theme-card {
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

a.theme-card:hover {
  transform: translateY(calc(var(--lift-distance) * -1));
  box-shadow: var(--shadow-lg);
}

.menus .item {
  border-bottom: var(--hairline) solid var(--color-border);
}

.menus .item:first-child {
  border-top: var(--hairline) solid var(--color-border);
}

/* ==========================================================================
   DESIGN TOKEN CSS HELPER CLASSES
   ========================================================================== */

/* Border Radius Tokens */
.radius-none { border-radius: 0 !important; }
.radius-sm { border-radius: var(--radius-sm) !important; }
.radius-md { border-radius: var(--radius-md) !important; }
.radius-lg { border-radius: var(--radius-lg) !important; }
.radius-xl { border-radius: var(--radius-xl) !important; }
.radius-2xl { border-radius: var(--radius-2xl) !important; }
.radius-full { border-radius: var(--radius-full) !important; }

/* Shadow Tokens */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--shadow-2xl) !important; }

/* Spacing Tokens */
.spacing-xs { padding: var(--space-xs) !important; }
.spacing-sm { padding: var(--space-sm) !important; }
.spacing-md { padding: var(--space-md) !important; }
.spacing-lg { padding: var(--space-lg) !important; }
.spacing-xl { padding: var(--space-xl) !important; }
.spacing-2xl { padding: var(--space-2xl) !important; }
.spacing-3xl { padding: var(--space-3xl) !important; }

/* Gradient Tokens */
.gradient-1 { background: var(--gradient-1) !important; }
.gradient-2 { background: var(--gradient-2) !important; }
.gradient-3 { background: var(--gradient-3) !important; }
.gradient-4 { background: var(--gradient-4) !important; }
.gradient-5 { background: var(--gradient-5) !important; }
/* ==========================================================================
   BLOG STYLES
   Using design tokens for consistent theming
   ========================================================================== */

/* ==========================================================================
   BLOG HERO - the nav clearance moved into the module

   These two rules used to set `.blog-hero { padding-top: calc(--header-height +
   --space-3xl) !important }`. The importance flag beat the module's own padding_top
   field, so a buyer changed that setting and nothing moved - broken wiring by the
   THEME-GUIDELINES §15 test. theme-overrides.css says of this same clearance that it
   "is the hero's INTERNAL padding, which belongs to the Banner module"; for this hero
   that module is Blog Hero.module, which now emits the identical calc with padding_top
   defaulted to `lg` (= --space-3xl). Same pixels, one writer, and the field works.
   ========================================================================== */

/* Reset global input styles inside blog search forms */
.blog-hero__search-form input,
.blog-all__search-form input,
.blog-search-form input {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: var(--space-sm) 0 !important;
  width: auto !important;
  flex: 1;
  min-width: 0;
  box-shadow: none !important;
}

.blog-hero__search-form input:focus,
.blog-all__search-form input:focus,
.blog-search-form input:focus {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ==========================================================================
   BLOG LISTING PAGE
   ========================================================================== */

.blog-listing {
  padding: var(--space-3xl) 0;
  background: var(--color-body-bg);
}

/* ==========================================================================
   BLOG GRID
   ========================================================================== */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

@media (max-width: 1023px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* ==========================================================================
   BLOG CARD
   ========================================================================== */

/* A blog card is a card. It used to assemble its own surface out of
   --color-cards-bg, --radius-lg and a literal hairline, which is how it drew
   a different corner from every other card on the site. */
.blog-card {
  background: var(--card-bg);
  border-radius: var(--card-border-radius);
  overflow: hidden;
  border-width: var(--card-border-width);
  border-style: solid;
  border-color: var(--card-border-color);
  transition: all var(--transition-slower);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent-light);
}

.blog-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.blog-card__image-wrap {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  background: var(--color-accent-light);
}

.blog-card__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slower);
}

.blog-card:hover .blog-card__image {
  transform: scale(1.05);
}

.blog-card__image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-cards-bg) 100%);
}

.blog-card__image-placeholder span {
  font-size: 48px;
  color: var(--color-accent);
  opacity: 0.5;
}

.blog-card__content {
  padding: var(--space-lg);
}

.blog-card__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.blog-card__topic {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  background: var(--color-accent-light);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.blog-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
  line-height: var(--line-height-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__excerpt {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
  line-height: var(--line-height-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.blog-card__author-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.blog-card__meta-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.blog-card__author {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-card__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Placeholder Card */
.blog-card--placeholder {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cards-bg);
  border: 2px dashed var(--color-border);
}

.blog-card--placeholder .blog-card__content {
  text-align: center;
}

.blog-card--placeholder .blog-card__excerpt {
  color: var(--color-text-muted);
  margin: 0;
}

/* ==========================================================================
   FEATURED BLOG CARD
   ========================================================================== */

.blog-card--featured {
  grid-column: 1 / -1;
  margin-bottom: var(--space-lg);
}

.blog-card--featured .blog-card__link {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
}

.blog-card--featured .blog-card__image-wrap {
  padding-top: 0;
  min-height: 400px;
}

.blog-card--featured .blog-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-2xl);
}

.blog-card--featured .blog-card__title {
  font-size: var(--font-size-h3);
  -webkit-line-clamp: 3;
}

.blog-card--featured .blog-card__excerpt {
  font-size: var(--font-size-body);
  -webkit-line-clamp: 4;
}

@media (max-width: 767px) {
  .blog-card--featured .blog-card__link {
    grid-template-columns: 1fr;
  }

  .blog-card--featured .blog-card__image-wrap {
    padding-top: 56.25%;
    min-height: 0;
  }

  .blog-card--featured .blog-card__content {
    padding: var(--space-lg);
  }

  .blog-card--featured .blog-card__title {
    font-size: var(--font-size-h3);
  }
}

/* ==========================================================================
   AUTHOR HERO SECTION
   ========================================================================== */

.blog-author-hero {
  background: linear-gradient(180deg, var(--color-accent-light) 0%, var(--color-body-bg) 100%);
  padding: calc(var(--header-height) + var(--space-3xl)) 0 var(--space-3xl);
}

.blog-author-hero__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.blog-author-hero__avatar {
  flex-shrink: 0;
}

.blog-author-hero__avatar img {
  width: 140px;
  height: 140px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 4px solid var(--color-cards-bg);
  box-shadow: var(--shadow-lg);
}

.blog-author-hero__content {
  flex: 1;
  min-width: 0;
}

.blog-author-hero__label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
}

.blog-author-hero__name {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
  line-height: var(--line-height-tight);
}

.blog-author-hero__bio {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
  line-height: var(--line-height-relaxed);
  max-width: 600px;
}

.blog-author-hero__socials {
  display: flex;
  gap: var(--space-sm);
}

.blog-author-hero__socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-cards-bg);
  color: var(--color-text);
  text-decoration: none;
  transition: all var(--transition-slow);
  border: 1px solid var(--color-border);
}

.blog-author-hero__socials a:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.blog-author-hero__socials span {
  font-size: 20px;
}

.blog-author-hero__socials svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 767px) {
  .blog-author-hero {
    padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-xl);
  }

  .blog-author-hero__inner {
    flex-direction: column;
    text-align: center;
  }

  .blog-author-hero__avatar img {
    width: 100px;
    height: 100px;
  }

  .blog-author-hero__name {
    font-size: var(--font-size-h2);
  }

  .blog-author-hero__bio {
    font-size: var(--font-size-body);
  }

  .blog-author-hero__socials {
    justify-content: center;
  }
}

/* ==========================================================================
   TAG/TOPIC HERO SECTION
   ========================================================================== */

.blog-tag-hero {
  background: linear-gradient(180deg, var(--color-accent-light) 0%, var(--color-body-bg) 100%);
  padding: calc(var(--header-height) + var(--space-3xl)) 0 var(--space-3xl);
  text-align: center;
}

.blog-tag-hero__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.blog-tag-hero__icon {
  font-size: 48px;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.blog-tag-hero__label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
}

.blog-tag-hero__name {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
  line-height: var(--line-height-tight);
}

.blog-tag-hero__count {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xl);
}

.blog-tag-hero__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  text-decoration: none;
  transition: all var(--transition-slow);
}

.blog-tag-hero__back:hover {
  gap: var(--space-sm);
}

.blog-tag-hero__back span {
  font-size: 18px;
}

@media (max-width: 767px) {
  .blog-tag-hero {
    padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-xl);
  }

  .blog-tag-hero__icon {
    font-size: var(--icon-size-xl);
  }

  .blog-tag-hero__name {
    font-size: var(--font-size-h2);
  }
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.blog-pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: var(--color-cards-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-slow);
}

.blog-pagination__btn:hover:not(.is-disabled) {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}

.blog-pagination__btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.blog-pagination__btn span:not(.blog-pagination__btn-text) {
  font-size: 18px;
}

.blog-pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 var(--space-sm);
}

.blog-pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: var(--color-cards-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-slow);
}

.blog-pagination__page:hover:not(.is-active) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.blog-pagination__page.is-active {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}

@media (max-width: 767px) {
  .blog-pagination__btn-text {
    display: none;
  }

  .blog-pagination__btn {
    padding: var(--space-sm);
  }
}

/* ==========================================================================
   ALL POSTS PAGE (/all)
   ========================================================================== */

.blog-all {
  padding: var(--space-3xl) 0;
  background: var(--color-body-bg);
}

.blog-all__search {
  max-width: 560px;
  margin: 0 auto var(--space-2xl);
}

.blog-all__search-form {
  display: flex;
  align-items: center;
  background: var(--color-cards-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-sm) var(--space-lg);
  transition: all var(--transition-slow);
  box-shadow: var(--shadow-sm);
}

.blog-all__search-form:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.blog-all__search-form span {
  font-size: 24px;
  color: var(--color-text-muted);
  margin-right: var(--space-sm);
}

.blog-all__search-form input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--font-size-body);
  color: var(--color-text);
  outline: none;
  padding: var(--space-xs) 0;
}

.blog-all__search-form input::placeholder {
  color: var(--color-text-muted);
}

/* Filters */
.blog-all__filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--color-cards-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.blog-all__filter-group {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.blog-all__filter-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
  padding-top: var(--space-xs);
}

.blog-all__filter-label span {
  font-size: 18px;
}

.blog-all__filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.blog-all__tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: var(--color-body-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-slow);
}

.blog-all__tag:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-light);
}

@media (max-width: 767px) {
  .blog-all__filter-group {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .blog-all__filter-label {
    padding-top: 0;
  }
}

/* Posts List */
.blog-all__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.blog-all__item {
  border-bottom: 1px solid var(--color-border);
}

.blog-all__item:first-child {
  border-top: 1px solid var(--color-border);
}

.blog-all__item-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-xl);
  padding: var(--space-lg) 0;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-slow);
}

.blog-all__item-link:hover {
  padding-left: var(--space-md);
}

.blog-all__item-link:hover .blog-all__item-title {
  color: var(--color-accent);
}

.blog-all__item-main {
  flex: 1;
  min-width: 0;
}

.blog-all__item-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  margin: 0 0 var(--space-xs);
  line-height: var(--line-height-tight);
  transition: color var(--transition-slow);
}

.blog-all__item-excerpt {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--line-height-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-all__item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  text-align: right;
}

.blog-all__item-author {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
}

.blog-all__item-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .blog-all__item-link {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .blog-all__item-meta {
    flex-direction: row;
    gap: var(--space-md);
    align-items: center;
  }
}

/* ==========================================================================
   BLOG POST PAGE
   ========================================================================== */

/* Post Header */
.blog-post-header {
  position: relative;
  background: linear-gradient(180deg, var(--color-accent-light) 0%, var(--color-body-bg) 100%);
  padding: calc(var(--header-height, 80px) + var(--space-3xl)) 0 var(--space-2xl);
}

.blog-post-header__container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.blog-post-header__content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.blog-post-header__topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.blog-post-header__topic {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  background: var(--color-cards-bg);
  border-radius: var(--radius-full);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all var(--transition-slow);
}

.blog-post-header__topic:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.blog-post-header__title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin: 0 0 var(--space-lg);
  line-height: var(--line-height-tight);
}

.blog-post-header__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.blog-post-header__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: inherit;
}

.blog-post-header__author:hover .blog-post-header__author-name {
  color: var(--color-accent);
}

.blog-post-header__author-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-cards-bg);
}

.blog-post-header__author-info {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.blog-post-header__author-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  transition: color var(--transition-slow);
}

.blog-post-header__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.blog-post-header__reading-time {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.blog-post-header__reading-time span {
  font-size: 18px;
}

/* Featured Image */
.blog-post-header__image {
  max-width: 900px;
  margin: var(--space-2xl) auto 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.blog-post-header__image img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .blog-post-header {
    padding: calc(var(--header-height, 80px) + var(--space-xl)) 0 var(--space-xl);
  }

  .blog-post-header__title {
    font-size: var(--font-size-h2);
  }

  .blog-post-header__meta {
    flex-direction: column;
    gap: var(--space-md);
  }
}

/* Post Body */
.blog-post-body {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
}

.blog-post-body__layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-3xl);
  max-width: 1000px;
  margin: 0 auto;
}

@media (max-width: 1023px) {
  .blog-post-body__layout {
    grid-template-columns: 1fr;
  }
}

/* Table of Contents */
.blog-toc {
  position: sticky;
  top: var(--space-xl);
  align-self: start;
}

.blog-toc__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-md);
}

.blog-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.blog-toc__item {
  margin: 0;
}

.blog-toc__link {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-xs) 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-border);
  transition: all var(--transition-slow);
}

.blog-toc__link:hover,
.blog-toc__link.is-active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
}

@media (max-width: 1023px) {
  .blog-toc {
    display: none;
  }
}

/* Post Content */
.blog-post-content {
  max-width: 700px;
}

.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4 {
  scroll-margin-top: var(--space-xl);
}

/* Share Buttons */
.blog-share {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xl) 0;
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

.blog-share__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.blog-share__buttons {
  display: flex;
  gap: var(--space-sm);
}

.blog-share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-cards-bg);
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  transition: all var(--transition-slow);
}

.blog-share__btn:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.blog-share__btn span {
  font-size: 20px;
}

.blog-share__btn svg {
  width: 18px;
  height: 18px;
}

/* Copy link button icon swap */
.blog-share__btn--copy {
  cursor: pointer;
}

.blog-share__btn--copy .blog-share__icon-check {
  display: none;
}

.blog-share__btn--copy.is-copied .blog-share__icon-link {
  display: none;
}

.blog-share__btn--copy.is-copied .blog-share__icon-check {
  display: block;
}

/* Author Box */
.blog-author-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-xl);
  margin-top: var(--space-2xl);
  background: var(--color-cards-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.blog-author-box__avatar {
  flex-shrink: 0;
}

.blog-author-box__avatar img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.blog-author-box__content {
  flex: 1;
  min-width: 0;
}

.blog-author-box__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.blog-author-box__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
}

.blog-author-box__name a {
  color: inherit;
  text-decoration: none;
}

.blog-author-box__name a:hover {
  color: var(--color-accent);
}

.blog-author-box__bio {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

@media (max-width: 767px) {
  .blog-author-box {
    flex-direction: column;
    text-align: center;
  }

  .blog-author-box__avatar img {
    width: 64px;
    height: 64px;
  }
}

/* ==========================================================================
   RELATED POSTS
   ========================================================================== */

.blog-related {
  padding: var(--space-3xl) 0;
  background: var(--color-cards-bg);
  border-top: 1px solid var(--color-border);
}

.blog-related__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.blog-related__title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin: 0;
}

.blog-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

@media (max-width: 1023px) {
  .blog-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .blog-related__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   BLOG COMMENTS
   ========================================================================== */

#hs_cos_wrapper_blog_comments,
#blog-comments {
  display: block;
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

.blog-comments__title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  margin: 0 0 var(--space-lg);
}

#comments-listing {
  margin-bottom: var(--space-xl);
}

.comment.depth-0 {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.comment.depth-0:first-child {
  margin-top: 0;
  border-top: none;
}

.comment {
  padding-top: var(--space-md);
}

.comment-from h4 {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  margin: 0 0 var(--space-xs);
}

.comment-from h4 a {
  color: inherit;
  text-decoration: none;
}

.comment-from h4 a:hover {
  color: var(--color-accent);
}

.comment-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.comment-body p {
  font-size: var(--font-size-body);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
  margin: var(--space-sm) 0;
}

.comment-reply-to {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-slow);
}

.comment-reply-to:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* Comment depth indentation */
.comment.depth-1 { padding-left: var(--space-xl); }
.comment.depth-2 { padding-left: calc(var(--space-xl) * 2); }
.comment.depth-3 { padding-left: calc(var(--space-xl) * 3); }
.comment.depth-4 { padding-left: calc(var(--space-xl) * 4); }
.comment.depth-5 { padding-left: calc(var(--space-xl) * 5); }

@media (max-width: 767px) {
  .comment.depth-1,
  .comment.depth-2,
  .comment.depth-3,
  .comment.depth-4,
  .comment.depth-5 {
    padding-left: var(--space-md);
    border-left: 2px solid var(--color-border);
    margin-left: var(--space-sm);
  }
}

.hs-common-confirm-message {
  background: var(--color-accent-light);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  color: var(--color-accent);
  padding: var(--space-md);
  margin: 0 0 var(--space-lg);
  font-size: var(--font-size-sm);
}

/* Comment Form */
#comment-form,
.hs-blog-post-comments__form {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--color-cards-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

#comment-form h3,
.hs-blog-post-comments__form-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  margin: 0 0 var(--space-lg);
}

#comment-form .hs-form-field,
.hs-blog-post-comments__form .hs-form-field {
  margin-bottom: var(--space-md);
}

#comment-form label,
.hs-blog-post-comments__form label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

#comment-form input[type="text"],
#comment-form input[type="email"],
#comment-form input[type="url"],
#comment-form textarea,
.hs-blog-post-comments__form input[type="text"],
.hs-blog-post-comments__form input[type="email"],
.hs-blog-post-comments__form input[type="url"],
.hs-blog-post-comments__form textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  background: var(--color-background);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#comment-form input:focus,
#comment-form textarea:focus,
.hs-blog-post-comments__form input:focus,
.hs-blog-post-comments__form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

#comment-form textarea,
.hs-blog-post-comments__form textarea {
  min-height: 120px;
  resize: vertical;
}

#comment-form input[type="submit"],
.hs-blog-post-comments__form input[type="submit"],
#comment-form button[type="submit"],
.hs-blog-post-comments__form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-family-body);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1;
  text-decoration: none;
  border: var(--btn-primary-border-width) solid var(--btn-primary-border);
  border-radius: var(--btn-border-radius);
  cursor: pointer;
  transition: background-position var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  background: var(--btn-primary-bg);
  background-size: var(--btn-primary-bg-size, 100% 100%);
  background-position: var(--btn-primary-bg-position, 0 0);
  color: var(--btn-primary-color);
  margin-top: var(--space-md);
}

#comment-form input[type="submit"]:hover,
.hs-blog-post-comments__form input[type="submit"]:hover,
#comment-form button[type="submit"]:hover,
.hs-blog-post-comments__form button[type="submit"]:hover {
  background-position: var(--btn-primary-bg-position-hover, 0 0);
  background-color: var(--btn-primary-bg-hover, var(--btn-primary-bg));
  color: var(--btn-primary-color-hover);
  border-color: var(--btn-primary-border-hover);
}

@media (max-width: 767px) {
  #comment-form,
  .hs-blog-post-comments__form {
    padding: var(--space-lg);
  }
}

/* ==========================================================================
   MAGAZINE LAYOUT - LISTING
   ========================================================================== */

.blog-magazine-hero {
  padding: calc(var(--header-height) + var(--space-3xl)) 0 var(--space-2xl);
  background: var(--color-body-bg);
}

.blog-magazine-hero .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.blog-magazine-hero__title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin: 0;
}

.blog-magazine-hero__desc {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  margin: var(--space-xs) 0 0;
}

.blog-magazine-hero__search {
  width: 100%;
  max-width: 100%;
  margin-top: var(--space-md);
}

.blog-magazine-hero__search .blog-search-form {
  max-width: 400px;
}

.blog-search-form {
  display: flex;
  align-items: center;
  background: var(--color-cards-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-sm) var(--space-lg);
  transition: all var(--transition-slow);
}

.blog-search-form:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.blog-search-form span {
  font-size: 20px;
  color: var(--color-text-muted);
  margin-right: var(--space-sm);
}

.blog-search-form input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--font-size-body);
  color: var(--color-text);
  outline: none;
}

.blog-search-form input::placeholder {
  color: var(--color-text-muted);
}

/* Magazine Layout */
.blog-magazine {
  padding: var(--space-2xl) 0 var(--space-4xl);
  background: var(--color-body-bg);
}

.blog-magazine__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-3xl);
}

@media (max-width: 1023px) {
  .blog-magazine__layout {
    grid-template-columns: 1fr;
  }
}

/* Magazine Cards */
.blog-card-magazine {
  display: block;
}

.blog-card-magazine__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-card-magazine__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.blog-card-magazine__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform var(--transition-slower);
}

.blog-card-magazine:hover .blog-card-magazine__image img {
  transform: scale(1.03);
}

.blog-card-magazine__topic {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.blog-card-magazine__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
  line-height: var(--line-height-tight);
  transition: color var(--transition-slow);
}

.blog-card-magazine:hover .blog-card-magazine__title {
  color: var(--color-accent);
}

.blog-card-magazine__excerpt {
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
  line-height: var(--line-height-relaxed);
}

.blog-card-magazine__meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.blog-card-magazine__dot {
  color: var(--color-border);
}

/* Featured Magazine Card */
.blog-card-magazine--featured {
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
}

.blog-card-magazine--featured .blog-card-magazine__title {
  font-size: var(--font-size-h2);
}

.blog-card-magazine--featured .blog-card-magazine__image img {
  aspect-ratio: 21/9;
}

/* Magazine Grid */
.blog-magazine__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xl);
}

@media (max-width: 767px) {
  .blog-magazine__grid {
    grid-template-columns: 1fr;
  }
}

/* Sidebar */
.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (max-width: 1023px) {
  .blog-sidebar {
    display: none;
  }
}

.blog-sidebar__section {
  padding: var(--space-lg);
  background: var(--color-cards-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.blog-sidebar__section--cta {
  background: var(--color-accent-light);
  border-color: transparent;
}

.blog-sidebar__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-md);
}

.blog-sidebar__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}

.blog-sidebar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.blog-sidebar__tag {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: var(--color-body-bg);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-slow);
}

.blog-sidebar__tag:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.blog-sidebar__recent {
  display: flex;
  flex-direction: column;
}

.blog-sidebar__recent-item {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: all var(--transition-slow);
}

.blog-sidebar__recent-item:last-child {
  border-bottom: none;
}

.blog-sidebar__recent-item:hover .blog-sidebar__recent-title {
  color: var(--color-accent);
}

.blog-sidebar__recent-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  transition: color var(--transition-slow);
  line-height: var(--line-height-tight);
}

.blog-sidebar__recent-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2xs);
}

.blog-sidebar__toc {
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
}

/* ==========================================================================
   MAGAZINE LAYOUT - POST
   ========================================================================== */

.blog-post-magazine-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  padding: var(--space-4xl) 0;
}

.blog-post-magazine-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
}

.blog-post-magazine-hero .container {
  position: relative;
  z-index: 1;
}

.blog-post-magazine-hero__content {
  max-width: 800px;
}

.blog-post-magazine-hero__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.blog-post-magazine-hero__topic {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: #fff;
  background: rgba(255,255,255,0.2);
  border-radius: var(--radius-full);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
  transition: all var(--transition-slow);
}

.blog-post-magazine-hero__topic:hover {
  background: var(--color-accent);
}

.blog-post-magazine-hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--font-weight-bold);
  color: #fff;
  margin: 0 0 var(--space-lg);
  line-height: var(--line-height-tight);
}

.blog-post-magazine-hero__title--dark {
  color: var(--color-heading);
}

.blog-post-magazine-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,0.8);
}

.blog-post-magazine-hero__meta--dark {
  color: var(--color-text-muted);
}

.blog-post-magazine-hero__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: inherit;
  text-decoration: none;
}

.blog-post-magazine-hero__author:hover {
  text-decoration: underline;
}

.blog-post-magazine-hero__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.3);
}

.blog-post-magazine-hero__dot {
  opacity: 0.5;
}

.blog-post-magazine-hero--no-image {
  min-height: auto;
  background: linear-gradient(180deg, var(--color-accent-light) 0%, var(--color-body-bg) 100%);
  padding: var(--space-4xl) 0 var(--space-2xl);
}

.blog-post-magazine-hero--no-image .blog-post-magazine-hero__topic {
  color: var(--color-accent);
  background: var(--color-cards-bg);
}

/* Magazine Post Body */
.blog-post-magazine-body {
  padding: var(--space-3xl) 0;
}

.blog-post-magazine-body__layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-3xl);
}

@media (max-width: 1023px) {
  .blog-post-magazine-body__layout {
    grid-template-columns: 1fr;
  }
}

.blog-post-magazine-content {
  max-width: 700px;
}

/* All Posts Header */
.blog-all__header {
  margin-bottom: var(--space-xl);
}

.blog-all__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin: 0;
}

.blog-all__count {
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
  margin: var(--space-xs) 0 0;
}