/* 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);
  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;
    text-align: center;
    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 - Premium form styling using design system
   ========================================================================== */

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

input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=number],
input[type=file],
select,
textarea {
  background-color: var(--color-background);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  box-shadow: none;
  display: inline-block;
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  height: auto;
  outline: none;
  padding: var(--space-tight) var(--space-element);
  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: rgba(#null, 0.3);
}

form textarea {
  height: auto;
  min-height: var(--textarea-min-height);
  resize: vertical;
  padding: var(--space-element);
}

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(--color-accent);
  box-shadow: 0 0 0 3px rgba(#null, 0.1);
}

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-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--space-micro);
  color: inherit;
  opacity: 0.8;
}

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

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

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

.hs-form-field .hs-error-msgs li {
  margin: 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: 12px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: var(--transition-base);
  width: 12px;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  direction: ltr;
  font-family: 'Material Icons';
  font-size: 12px;
  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';
}

.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: 12px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: var(--transition-base);
  width: 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';
}

.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;
}

form .hs_submit .actions {
  text-align: center;
  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);
  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;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

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 - Premium card component using design system
   ========================================================================== */

.theme-card {
  background-color: var(--color-cards-bg);
  border-radius: var(--card-border-radius);
  box-shadow: var(--shadow-sm);
  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);
}
/* ==========================================================================
   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(--font-size-xl);
  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 */
/* ==========================================================================
   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(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

.body-text {
  font-family: var(--font-family-body);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

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

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

.title-label {
  font-family: var(--font-family-heading);
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-xs);
  display: block;
}

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

h1 {
  font-family: var(--font-family-heading);
  color: var(--color-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-element);
  line-height: var(--line-height-tight);
}

h2 {
  font-family: var(--font-family-heading);
  color: var(--color-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-element);
  line-height: var(--line-height-tight);
}

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

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

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

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

/* 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 {
  margin: 0 0 var(--space-element);
  line-height: var(--line-height-normal);
}

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

blockquote {
  font-family: var(--font-family-body);
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  font-style: italic;
  padding: var(--space-tight) var(--space-element);
  border-left: 2px solid var(--color-accent);
  margin: 0 0 var(--space-element);
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: var(--transition-base);
}

a:hover {
  color: var(--color-link-hover);
}

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

pre {
  background-color: var(--color-card-bg);
  font-family: var(--font-family-mono, monospace);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  padding: var(--space-element);
  overflow-x: auto;
  border-radius: var(--radius-sm);
  margin: 0 0 var(--space-element);
}

code {
  font-family: var(--font-family-mono, monospace);
  font-size: 0.9em;
  background-color: var(--color-card-bg);
  padding: 0.2em 0.4em;
  border-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: background-position var(--transition-slow),
              color var(--transition-slow),
              border-color var(--transition-slow),
              box-shadow var(--transition-slow),
              transform var(--transition-slow);
}

.primary-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);
}

.primary-button:active {
  transform: translateY(1px);
}

/* ==========================================================================
   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: background var(--transition-slow),
              color var(--transition-slow),
              border-color var(--transition-slow),
              box-shadow var(--transition-slow),
              transform var(--transition-slow);
}

.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);
}

.secondary-button:active {
  transform: translateY(1px);
}

/* ==========================================================================
   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: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-base);
}

.tertiary-button:hover {
  background: var(--color-card-bg);
  color: var(--color-text);
  border-color: var(--color-border-hover);
}

.tertiary-button:active {
  transform: translateY(1px);
}

/* ==========================================================================
   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: background-color var(--transition-base),
              color var(--transition-base),
              transform var(--transition-base);
}

.ghost-button:hover {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.ghost-button:active {
  transform: translateY(1px);
}

/* ==========================================================================
   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 {
  padding: var(--section-padding-desktop) var(--container-padding);
}

/* Full-width hero sections - no section padding, hero module handles it */
.dnd-section:has(.hero[data-full-width="true"]) {
  padding: 0;
}
.dnd-section:has(.hero[data-full-width="true"]) > .row-fluid {
  max-width: none;
}

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

/* Row spacing within sections - smaller gap between header and content */
.dnd-section .row-fluid-wrapper + .row-fluid-wrapper {
  margin-top: var(--space-xl);
}

.section-mt {
  margin-top: var(--section-padding-desktop);
}
.section-mb {
  margin-bottom: var(--section-padding-desktop);
}

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

.widget-type-form {
  background-color: var(--color-card-bg);
  border: 1px 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(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-family-body);
  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(--font-family-body);
  color: var(--color-text);
  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 12px center;
  padding-right: 36px;
  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-radio label>span:before,
.hs-form-checkbox label>span:before,
.hs-form-booleancheckbox label>span:before {
  background-color: var(--input-bg);
  color: var(--input-color);
  border: var(--input-border-width) solid 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);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

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

.legal-consent-container .hs-error-msgs label,
.hs-form-field .hs-error-msgs {
  font-family: var(--font-family-body);
  color: var(--color-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(--font-family-body);
  color: var(--color-text);
  font-size: var(--font-size-body);
}

.hs-form-checkbox label>span,
.hs-form-booleancheckbox label>span {
  font-family: var(--font-family-body);
  color: var(--color-text);
  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(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-family-body);
  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: 2px;
}

/* ==========================================================================
   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, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));
}

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

  .dnd-section {
    padding: var(--section-padding-mobile) var(--container-padding);
  }
}

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

  .dnd-section {
    padding: var(--section-padding-tablet) var(--container-padding);
  }
}

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

/* ==========================================================================
   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: 24px;
  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: 24px;
  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(--color-card-bg);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  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;
}

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

.menus .item:first-child {
  border-top: 1px 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; }
.gradient-6 { background: var(--gradient-6) !important; }
/* ==========================================================================
   BLOG STYLES
   Using design tokens for consistent theming
   ========================================================================== */

/* ==========================================================================
   BLOG HERO - Header offset for fixed navigation
   ========================================================================== */

.blog-hero {
  padding-top: calc(var(--header-height, 80px) + var(--space-3xl)) !important;
}

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

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

.blog-card {
  background: var(--color-cards-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: all 0.3s ease;
}

.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 0.5s ease;
}

.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-xl);
  }
}

/* ==========================================================================
   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 0.2s ease;
  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 0.2s ease;
}

.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: 36px;
  }

  .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 0.2s ease;
}

.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 0.2s ease;
}

.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 0.2s ease;
  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 0.2s ease;
}

.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 0.2s ease;
}

.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 0.2s ease;
}

.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 0.2s ease;
}

.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 0.2s ease;
}

.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 0.2s ease;
}

.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 0.2s ease;
}

.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 0.2s ease;
}

.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);
  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 0.2s ease;
}

.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 0.5s ease;
}

.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 0.2s ease;
}

.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 0.2s ease;
}

.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 0.2s ease;
}

.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 0.2s ease;
  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 0.2s ease;
}

.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;
}