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


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

.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 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);
}
/*! 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: inherit; /* 1: v3 has no mono; code reads --type-code-family in _typography.css */
  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: inherit; /* 1: v3 has no mono; code reads --type-code-family in _typography.css */
  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: var(--rule-width) 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: calc(var(--rule-width) * -2); /* 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: var(--rule-width);
  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%;
  }
  /* HubSpot's boilerplate centred every dnd column below 768px, which
     centred the text inside every module on every page. Alignment is the
     module's decision, so it is not overridden here. */
  .row-fluid [class*="span"] {
    display: block;
    float: none;
    width: auto;
    margin-left: 0;
    min-height: 0;
  }
  .row-fluid [class*="span"] {
    margin-bottom: var(--space-2xl);
  }
  .row-fluid [class*="span"]:last-child {
    margin-bottom: 0;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .row-fluid {
    width: 100%;
    *zoom: 1;
  }
  .row-fluid:before,
  .row-fluid:after {
    display: table;
    content: "";
  }
  .row-fluid:after {
    clear: both;
  }
  .row-fluid [class*="span"] {
    display: block;
    float: left;
    width: 100%;
    min-height: var(--rule-width);
    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: var(--rule-width);
    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;
}


.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) var(--container-padding);
}


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

/* Rows stack with no gap of their own (visual QA M-6): a section header
   (Text section with buttons) already closes with its stack-content space
   below its rule, which is the comp's 48px between a header and its content. */
.dnd-section .row-fluid-wrapper + .row-fluid-wrapper {
  margin-top: 0;
}

/* A row that holds only an overlay (Popup Modal) takes no space in its band:
   no stack gap above it, and no height of its own. (One level of :has only;
   a :has nested in a :has is invalid and drops the whole rule.) */
.dnd-section .row-fluid-wrapper:has(> .row-fluid > .dnd-module:only-child [data-popup-modal]) {
  margin-top: 0;
}

.dnd-section .row-fluid-wrapper:has(> .row-fluid > .dnd-module:only-child [data-popup-modal]) [class*="span"] {
  min-height: 0;
  margin-bottom: 0;
}

/* Full-bleed heroes own their padding. */
.dnd-section:has(.hero[data-full-width="true"]),
.dnd-section:has(.working-paper-hero) {
  padding: 0;
}

.dnd-section:has(.hero[data-full-width="true"]) > .row-fluid,
.dnd-section:has(.working-paper-hero) > .row-fluid {
  max-width: none;
}


main .body-container-wrapper .dnd-section:first-child {
  padding-top: calc(var(--header-height) + var(--hero-padding-block));
  padding-bottom: var(--hero-padding-block);
}

main .body-container-wrapper .dnd-section:first-child:has(.hero[data-full-width="true"]) {
  padding-top: var(--header-height);
  padding-bottom: 0;
}

main .body-container-wrapper .dnd-section:first-child:has(.working-paper-hero) {
  padding-top: 0;
  padding-bottom: 0;
}


/* is-dense: a strip that carries its own rules (the credential strip). As on the
   comp it has no vertical padding; the sections around it keep theirs. */
.dnd-section.is-dense {
  padding-top: 0;
  padding-bottom: 0;
}




/* A hairline between a band and the paper below it, as on the comp. */
.dnd-section.is-rule-top {
  border-top: var(--rule-width) solid var(--color-border);
}

.dnd-section.is-rule-bottom {
  border-bottom: var(--rule-width) solid var(--color-border);
}

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

.measure-prose { max-width: var(--measure-prose); }
.measure-lead { max-width: var(--measure-lead); }


.docs-layout main .body-container-wrapper .dnd-section,
.docs-layout main .body-container-wrapper .dnd-section:first-child {
  padding: 0;
}

.docs-layout main .body-container-wrapper .dnd-section > .row-fluid {
  max-width: none;
}

.docs-layout main .body-container-wrapper .dnd-section:has(.docs) {
  padding-top: var(--header-height);
}

.docs-layout .docs-page .docs {
  height: calc(100vh - var(--header-height));
}

/* In-page anchors land below the fixed header (e.g. /tickmark/contact#offices). */
main [id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-lg));
}


html:not(.hs-inline-edit) main .dnd-section:has(.three-columns-row):not(:has(.three-columns-row .article)) {
  display: none;
}
.hs-form-field {
  position: relative;
  padding-bottom: var(--form-field-gap);
}

fieldset {
  max-width: 100%;
}

/* ---------------------------------------------------------------- labels */
.hs-form-field legend,
.hs-form-field > label,
.hs-form-field label:not(.hs-error-msg),
.form-label {
  display: inline-block;
  margin: 0 0 var(--form-label-margin-bottom);
  font-family: var(--form-label-font-family);
  font-size: var(--form-label-font-size);
  font-weight: var(--form-label-font-weight);
  letter-spacing: var(--form-label-tracking);
  text-transform: var(--form-label-transform);
  color: var(--form-label-color);
}

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

/* ---------------------------------------------------------------- inputs */
.hs-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="file"],
select,
.custom-select,
textarea {
  display: inline-block;
  width: 100%;
  min-height: var(--input-height-md);
  padding: var(--input-padding-y) var(--input-padding-x);
  font-family: var(--input-font-family);
  font-size: var(--input-font-size);
  font-weight: var(--input-font-weight);
  line-height: var(--line-height-normal);
  color: var(--input-color);
  background-color: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  box-shadow: none;
  outline: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

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

.hs-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="file"]:focus,
select:focus,
.custom-select:focus,
textarea:focus {
  background-color: var(--input-bg-focus);
  border-color: var(--input-border-color-focus);
  box-shadow: 0 0 0 var(--input-focus-ring-offset) var(--input-bg-focus),
              0 0 0 calc(var(--input-focus-ring-offset) + var(--input-focus-ring-width)) var(--input-focus-ring-color);
}

form textarea,
textarea {
  height: auto;
  min-height: var(--textarea-min-height);
  resize: vertical;
}

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

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

/* Select chevron: a mask over currentColor, so it takes the input ink. */
.hs-form select,
.custom-select {
  padding-right: calc(var(--input-padding-x) * 2 + var(--icon-size-menu));
  background-image: linear-gradient(45deg, transparent 50%, var(--input-color) 50%),
                    linear-gradient(135deg, var(--input-color) 50%, transparent 50%);
  background-position: calc(100% - var(--input-padding-x) - var(--space-sm)) 50%,
                       calc(100% - var(--input-padding-x) - var(--space-xs)) 50%;
  background-size: var(--space-xs) var(--space-xs), var(--space-xs) var(--space-xs);
  background-repeat: no-repeat;
}

form .error,
.hs-input.error,
.hs-input.invalid {
  border-color: var(--color-error);
}

/* ---------------------------------------------------------------- errors */
.hs_error_rollup {
  display: none;
}

.hs-form-field .hs-error-msgs,
.legal-consent-container .hs-error-msgs label {
  margin: var(--form-error-margin-top) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--form-error-font-family);
  font-size: var(--form-error-font-size);
  font-weight: var(--form-error-font-weight);
  color: var(--form-error-color);
}

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

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

/* ---------------------------------------------------------------- checkboxes + radios */
.inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

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

.hs-form-checkbox label > span,
.hs-form-booleancheckbox label > span {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-left: calc(var(--checkbox-size) + var(--space-sm));
  font-family: var(--checkbox-label-font-family);
  font-size: var(--checkbox-label-font-size);
  font-weight: var(--checkbox-label-font-weight);
  letter-spacing: normal;
  text-transform: none;
  color: var(--checkbox-label-color);
}

.hs-form-radio label > span {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-left: calc(var(--radio-size) + var(--space-sm));
  font-family: var(--radio-label-font-family);
  font-size: var(--radio-label-font-size);
  font-weight: var(--radio-label-font-weight);
  letter-spacing: normal;
  text-transform: none;
  color: var(--radio-label-color);
}

.hs-form-checkbox label > span::before,
.hs-form-booleancheckbox label > span::before,
.hs-form-radio label > span::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.hs-form-checkbox label > span::before,
.hs-form-booleancheckbox label > span::before {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background-color: var(--checkbox-bg);
  border: var(--input-border-width) solid var(--checkbox-border-color);
  border-radius: var(--radius-xs);
}

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

.hs-form-checkbox label:hover > span::before,
.hs-form-booleancheckbox label:hover > span::before,
.hs-form-radio label:hover > span::before {
  border-color: var(--input-border-hover);
}

/* Checked: a filled box with a tick drawn in the paper colour. */
.hs-form-checkbox label input[type="checkbox"]:checked + span::before,
.hs-form-booleancheckbox label input[type="checkbox"]:checked + span::before {
  background-color: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-border);
}

.hs-form-checkbox label input[type="checkbox"]:checked + span::after,
.hs-form-booleancheckbox label input[type="checkbox"]:checked + span::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(var(--checkbox-size) * 0.35);
  width: calc(var(--checkbox-size) * 0.3);
  height: calc(var(--checkbox-size) * 0.55);
  border: solid var(--color-on-accent);
  border-width: 0 calc(var(--rule-width) * 2) calc(var(--rule-width) * 2) 0;
  transform: translateY(-60%) rotate(45deg);
}

.hs-form-radio label input[type="radio"]:checked + span::before {
  background-color: var(--radio-bg);
  border-color: var(--radio-checked-border);
  box-shadow: inset 0 0 0 calc(var(--radio-size) * 0.25) var(--radio-checked-bg);
}

.hs-form-checkbox label input:focus-visible + span::before,
.hs-form-booleancheckbox label input:focus-visible + span::before,
.hs-form-radio label input:focus-visible + span::before {
  outline: var(--focus-ring);
  outline-offset: var(--focus-outline-width);
}

/* ---------------------------------------------------------------- layout inside a form */
.legal-consent-container .field.hs-form-field {
  margin: 0;
  overflow: hidden;
}

.submitted-message,
form {
  margin: 0 auto;
  text-align: left;
}

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

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

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

form .hs_submit .actions {
  margin: var(--form-submit-gap) 0 0;
}

.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 {
  display: flex;
  gap: var(--space-lg);
}

.hs-form fieldset.form-columns-2 > div.hs-form-field {
  flex: 1 1 0;
  width: auto;
}

form.hs-form fieldset.form-columns-3 {
  display: flex;
  gap: var(--space-lg);
}

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

form.hs-form fieldset.form-columns-3 .hs-form-field {
  flex: 1 1 0;
  width: auto;
}

.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 .hs-richtext {
  margin: 0 0 var(--space-element);
}

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

.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 {
  margin: 0 0 var(--space-micro);
  font-size: var(--font-size-sm);
  text-align: left;
}

/* ---------------------------------------------------------------- form container */
.widget-type-form {
  padding: var(--card-padding);
  background-color: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border-color);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
}

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


form .hs-button,
form input[type="submit"],
form button[type="submit"] {
  min-height: var(--btn-height-md);
}

form .hs-button:focus-visible,
form input[type="submit"]:focus-visible,
form button[type="submit"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-outline-width);
}

body[data-form-submit-match-cta="false"] form .hs-button,
body[data-form-submit-match-cta="false"] form input[type="submit"],
body[data-form-submit-match-cta="false"] form button[type="submit"] {
  --btn-primary-bg: var(--btn-secondary-bg);
  --btn-primary-bg-hover: var(--btn-secondary-bg-hover);
  --btn-primary-color: var(--btn-secondary-color);
  --btn-primary-color-hover: var(--btn-secondary-color-hover);
  --btn-primary-border: var(--btn-secondary-border);
  --btn-primary-border-hover: var(--btn-secondary-border-hover);
  --btn-primary-border-width: var(--btn-secondary-border-width);
}

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

/* ---------------------------------------------------------------- site search */
.hs-search-field__input {
  width: 100%;
  min-height: var(--input-height-md);
  padding: var(--input-padding-y) var(--input-padding-x);
  font-family: var(--input-font-family);
  font-size: var(--input-font-size);
  color: var(--input-color);
  background-color: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  outline: none;
  transition: border-color var(--transition-fast);
}

.hs-search-field__input:focus {
  border-color: var(--input-border-color-focus);
}

.hs-search-field form label {
  font-family: var(--form-label-font-family);
  font-size: var(--form-label-font-size);
  color: var(--form-label-color);
}

.hs-search-field button {
  padding: var(--btn-primary-padding-y) var(--btn-primary-padding-x);
  color: var(--btn-primary-color);
  background: var(--btn-primary-bg);
  border: var(--btn-primary-border-width) solid var(--btn-primary-border);
  border-radius: var(--btn-primary-radius);
  cursor: pointer;
}

.hs-search-field button svg {
  fill: currentColor;
}

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

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

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

/* ---------------------------------------------------------------- small screens
   767px mirrors theme settings > Layout > Breakpoint mobile; media queries
   cannot read custom properties. */
@media (max-width: 767px) {
  .hs-form fieldset.form-columns-2,
  form.hs-form fieldset.form-columns-3 {
    flex-direction: column;
    gap: 0;
  }

  form.hs-form .hs-input {
    width: 100%;
  }
}


@media (max-width: 400px) {
  body form.hs-form fieldset .hs-input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
    width: 100% !important; /* hubspot-override */
  }
}
* {
  box-sizing: border-box;
}

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

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

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

/* Skip to content link - Hidden until focused */
.skip-to-content {
  position: absolute;
  top: calc(var(--space-5xl) * -1);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-skip-link);
  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: var(--focus-ring);
  outline-offset: var(--focus-outline-width);
}

/* Keyboard focus lives in css/_theme-styles.css (the pencil ring). */

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



.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 are explicit author intent; mobile keeps them. */
  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(calc(var(--space-xs) * -1));
}

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

@media (prefers-reduced-motion: reduce) {
  /* Transition tokens collapse to 0ms in css/_theme-styles.css. */
  .hover-translate-y:hover {
    transform: none;
  }
}

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

@media print {
  .skip-to-content,
  nav,
  header,
  footer,
  .fixed-button,
  .modal-wrapper,
  .search-modal-wrapper,
  .hs-button,
  video,
  iframe {
    display: none;
  }

  body {
    background: none;
    color: var(--color-foreground);
    line-height: var(--line-height-normal);
  }

  main {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
  }

  h1, h2, h3, h4, h5, h6,
  img,
  .theme-card {
    break-inside: avoid;
  }

  h1, h2, h3, h4, h5, h6 {
    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;
}

.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: var(--icon-size-menu);
  height: var(--icon-size-menu);
  margin: calc(var(--icon-size-menu) / -2) 0 0 calc(var(--icon-size-menu) / -2);
  border: calc(var(--rule-width) * 2) solid var(--btn-primary-color);
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: btn-spin var(--duration-slower) linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ==========================================================================
   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(var(--blur-md));
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur-md));
}

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

.search-modal-wrapper .modal-card {
  display: inline-block;
  height: auto;
  margin: var(--space-6xl) 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(var(--blur-lg));
  backdrop-filter: saturate(180%) blur(var(--blur-lg));
}

.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: calc(var(--rule-width) * 2) solid var(--color-accent);
  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(--type-codeblock-family);
  overflow-x: auto;
  padding: var(--space-sm) var(--space-md);
}

.modal .modal__close {
  cursor: pointer;
  font-size: var(--font-size-h4);
  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: var(--space-xs) 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 */
body {
  background-color: var(--color-body-bg);
  color: var(--type-body-color);
  font-family: var(--type-body-family);
  font-size: var(--font-size-body);
  font-weight: var(--type-body-weight);
  font-style: var(--type-body-style);
  line-height: var(--type-body-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ---------------------------------------------------------------- headings */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  text-wrap: balance;
}

h1 {
  margin-bottom: var(--type-h1-margin);
  font-family: var(--type-h1-family);
  font-size: var(--font-size-h1);
  font-weight: var(--type-h1-weight);
  font-style: var(--type-h1-style);
  line-height: var(--type-h1-line-height);
  letter-spacing: var(--letter-spacing-tighter);
  color: var(--type-h1-color);
}

h2 {
  margin-bottom: var(--type-h2-margin);
  font-family: var(--type-h2-family);
  font-size: var(--font-size-h2);
  font-weight: var(--type-h2-weight);
  font-style: var(--type-h2-style);
  line-height: var(--type-h2-line-height);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--type-h2-color);
}

h3 {
  margin-bottom: var(--type-h3-margin);
  font-family: var(--type-h3-family);
  font-size: var(--font-size-h3);
  font-weight: var(--type-h3-weight);
  font-style: var(--type-h3-style);
  line-height: var(--type-h3-line-height);
  letter-spacing: var(--letter-spacing-h3);
  color: var(--type-h3-color);
}

h4 {
  margin-bottom: var(--type-h4-margin);
  font-family: var(--type-h4-family);
  font-size: var(--font-size-h4);
  font-weight: var(--type-h4-weight);
  font-style: var(--type-h4-style);
  line-height: var(--type-h4-line-height);
  color: var(--type-h4-color);
}

h5 {
  margin-bottom: var(--type-h5-margin);
  font-family: var(--type-h5-family);
  font-size: var(--font-size-h5);
  font-weight: var(--type-h5-weight);
  font-style: var(--type-h5-style);
  line-height: var(--type-h5-line-height);
  color: var(--type-h5-color);
}

/* H6 is the eyebrow: body sans 600, caps, tracked (v2; mono is for dates only). */
h6 {
  margin-bottom: var(--type-h6-margin);
  font-family: var(--type-h6-family);
  font-size: var(--font-size-h6);
  font-weight: var(--type-h6-weight);
  font-style: var(--type-h6-style);
  line-height: var(--type-h6-line-height);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--type-h6-color);
}

/* Heading line-heights are the Typography settings (h1-h4 "Line height") at every breakpoint;
   the approved design (2026-10-03) keeps them unitless, so they scale with the size tokens.
   Only the phone grid gap tightens here. */
@media (max-width: 767px) {
  html:root {
    --grid-gap: var(--grid-gap-mobile);
  }
}

/* Display size for hero lines */
.display,
.text-display {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-display);
  font-weight: var(--type-h1-weight);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-tighter);
}

.lead {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-muted);
  max-width: var(--measure-lead);
}

/* v5 two-tone lead: the first clause in ink, the rest grey. Wrap the first clause in
   <strong> (or .lead-strong); it keeps the lead's weight. */
.lead strong,
.lead b,
.lead .lead-strong {
  font-weight: inherit;
  color: var(--color-foreground);
}

/* ---------------------------------------------------------------- text */
p {
  margin: 0 0 var(--type-p-margin);
  font-family: var(--type-p-family);
  font-size: var(--font-size-p);
  font-weight: var(--type-p-weight);
  font-style: var(--type-p-style);
  line-height: var(--type-p-line-height);
  color: var(--type-p-color);
}

ul,
ol {
  margin: 0 0 var(--type-p-margin);
  padding-left: var(--space-xl);
}

li {
  margin-bottom: var(--type-li-margin);
  font-family: var(--type-li-family);
  font-size: var(--font-size-li);
  font-weight: var(--type-li-weight);
  font-style: var(--type-li-style);
  line-height: var(--type-li-line-height);
  color: var(--type-li-color);
}

h1:last-child, h2:last-child, h3:last-child,
h4:last-child, h5:last-child, h6:last-child,
p:last-child,
ul:last-child,
ol:last-child,
li:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------- links */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

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


p a,
li a:not(:has(h1, h2, h3, h4, h5, h6, p, div, img)),
blockquote a {
  font-family: var(--type-link-family);
  font-weight: var(--type-link-weight);
  font-style: var(--type-link-style);
  text-decoration-line: none;
}

.blog-post-body p a,
.blog-post-body li a,
.blog-post-content p a,
.blog-post-content li a,
.pillar-content-section p a,
.pillar-content-section li a {
  text-decoration-line: underline;
  text-decoration-color: var(--btn-link-underline);
  text-decoration-thickness: var(--rule-width);
  text-underline-offset: var(--space-xs);
}

.blog-post-body p a:hover,
.blog-post-body li a:hover,
.blog-post-content p a:hover,
.blog-post-content li a:hover,
.pillar-content-section p a:hover,
.pillar-content-section li a:hover {
  text-decoration-color: currentColor;
}

/* A link inside a heading reads as the heading (visual QA M-1). */
:is(h1, h2, h3, h4, h5, h6) a {
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
}

/* ---------------------------------------------------------------- quotes + code */
blockquote {
  margin: 0 0 var(--type-bq-margin);
  padding: 0 0 0 var(--blockquote-padding-left);
  font-family: var(--type-bq-family);
  font-size: var(--font-size-bq);
  font-weight: var(--type-bq-weight);
  font-style: var(--type-bq-style);
  line-height: var(--type-bq-line-height);
  color: var(--type-bq-color);
  background: var(--blockquote-bg);
  border-left: var(--blockquote-border-width) solid var(--blockquote-border-color);
}

code {
  padding: var(--code-inline-padding) calc(var(--code-inline-padding) * 2);
  font-family: var(--type-code-family);
  font-size: var(--font-size-code);
  font-weight: var(--type-code-weight);
  color: var(--type-code-color);
  background-color: var(--code-inline-bg);
  border-radius: var(--code-inline-radius);
}

pre {
  margin: 0 0 var(--type-codeblock-margin);
  padding: var(--code-block-padding);
  overflow-x: auto;
  font-family: var(--type-codeblock-family);
  font-size: var(--font-size-codeblock);
  font-weight: var(--type-codeblock-weight);
  line-height: var(--type-codeblock-line-height);
  color: var(--type-codeblock-color);
  background-color: var(--code-block-bg);
  border: var(--rule-width) solid var(--color-border);
  border-radius: var(--code-block-radius);
}

pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  background: none;
}

hr {
  margin: var(--space-2xl) 0;
  border: 0;
  border-top: var(--rule-width) solid var(--color-border);
}

/* ---------------------------------------------------------------- eyebrow */
.title-label,
.eyebrow {
  display: block;
  margin-bottom: var(--stack-eyebrow);
  font-family: var(--font-family-label);
  font-size: var(--font-size-h6);
  font-weight: var(--type-h6-weight);
  line-height: var(--type-h6-line-height);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* On the near-black ground (unused by default) the label is muted white. */
.ground-dark .title-label,
.ground-dark .eyebrow {
  color: var(--color-muted-on-dark);
}

/* v4: the highlighted phrase renders as plain heading text (no swipe). The class
   stays because modules still output <mark class="pl-hl">. */
mark.pl-hl,
.pl-hl {
  padding: 0;
  background: none;
  color: inherit;
}

/* The "Next" deadline tag: black fill, white text (v5: no colour accent). */
.pl-marker {
  background-color: var(--color-primary);
  color: var(--color-on-accent);
}

/* ---------------------------------------------------------------- ledger tables in rich text */
.hs_cos_wrapper_type_rich_text table,
.table-ledger {
  width: 100%;
  margin: 0 0 var(--type-p-margin);
  border-collapse: collapse;
  font-variant-numeric: var(--figure-numeric);
}

.hs_cos_wrapper_type_rich_text th,
.table-ledger th {
  height: var(--table-th-height);
  padding: 0 var(--table-td-padding-x);
  font-family: var(--font-family-label);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wider);
  text-align: left;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: var(--rule-width) solid var(--color-foreground);
}

.hs_cos_wrapper_type_rich_text td,
.table-ledger td {
  padding: var(--table-td-padding-y) var(--table-td-padding-x);
  border-bottom: var(--rule-width) solid var(--color-border);
  vertical-align: top;
}

.hs_cos_wrapper_type_rich_text tfoot td,
.table-ledger tfoot td,
.table-ledger tr.total td {
  font-weight: var(--font-weight-medium);
  border-bottom: var(--rule-double) double var(--color-foreground);
}

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


.theme-icon {
  color: var(--color-icon);
}

svg.lucide {
  stroke-width: var(--icon-stroke);
}

/* ==========================================================================
   LEGACY THEME UTILITIES (kept: modules and templates use these names)
   ========================================================================== */
.accent-color-1 { color: var(--color-accent-1); }
.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-gradient {
  background: linear-gradient(to bottom,
    rgba(var(--color-body-bg-rgb), 0.6),
    rgba(var(--color-body-bg-rgb), 0.4),
    rgba(var(--color-body-bg-rgb), 0.2),
    rgba(var(--color-body-bg-rgb), 0.4),
    rgba(var(--color-body-bg-rgb), 0.6),
    rgba(var(--color-body-bg-rgb), 0.8),
    rgba(var(--color-body-bg-rgb), 1)
  );
}

/* Photo scrim on heroes: the media overlay colour, stepped. */
.banner .overlay.theme-gradient {
  background: linear-gradient(to bottom,
    rgba(var(--color-overlay-base-rgb), 0.3),
    rgba(var(--color-overlay-base-rgb), 0.2),
    rgba(var(--color-overlay-base-rgb), 0.4),
    rgba(var(--color-overlay-base-rgb), 0.6),
    rgba(var(--color-overlay-base-rgb), 0.8));
}

.spacing-xs { padding: var(--space-xs); }
.spacing-sm { padding: var(--space-sm); }
.spacing-md { padding: var(--space-md); }
.spacing-lg { padding: var(--space-lg); }
.spacing-xl { padding: var(--space-xl); }
.spacing-2xl { padding: var(--space-2xl); }
.spacing-3xl { padding: var(--space-3xl); }
/* ==========================================================================
   BLOG STYLES
   Using design tokens for consistent theming
   ========================================================================== */

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

/* main .blog-hero outranks the module's own .blog-hero-<name> padding. */
/* v5: the same clearance under the nav as the Page Hero's first section (--hero-padding-block,
   120 / 96 / 64, is already responsive). */
main .blog-hero {
  padding-top: calc(var(--header-height) + var(--hero-padding-block));
}

/* Reset the global input styles inside blog search forms: the form is the
   field, the input is bare. [type] + class outranks css/_forms.css. */
.blog-hero__search-form input[type="text"],
.blog-all__search-form input[type="text"],
.blog-search-form input[type="text"],
.blog-search-form input[type="search"] {
  flex: 1;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: var(--space-sm) 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.blog-hero__search-form input[type="text"]:hover,
.blog-hero__search-form input[type="text"]:focus,
.blog-all__search-form input[type="text"]:hover,
.blog-all__search-form input[type="text"]:focus,
.blog-search-form input[type="text"]:hover,
.blog-search-form input[type="text"]:focus,
.blog-search-form input[type="search"]:hover,
.blog-search-form input[type="search"]:focus {
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}

/* ==========================================================================
   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, minmax(0, 1fr));
  gap: var(--space-xl);
}

@media (max-width: 1023px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 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: var(--rule-width) solid var(--color-border);
  transition: all var(--transition-slow);
}

.blog-card:hover {
  transform: translateY(calc(var(--space-xs) * -1));
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent-light);
}

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

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

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

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

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

.blog-card__image-placeholder span {
  font-size: var(--font-size-h2);
  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: var(--space-2xs) 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: var(--rule-width) solid var(--color-border);
}

.blog-card__author-avatar {
  width: var(--btn-height-sm);
  height: var(--btn-height-sm);
  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: var(--card-image-height);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cards-bg);
  border: calc(var(--rule-width) * 2) 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: minmax(0, 1.2fr) minmax(0, 1fr);
}

.blog-card--featured .blog-card__image-wrap {
  padding-top: 0;
  min-height: var(--hero-height-short);
}

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

/* ==========================================================================
   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-max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

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

.blog-author-hero__avatar img {
  width: calc(var(--avatar-size-xl) * 2);
  height: calc(var(--avatar-size-xl) * 2);
  border-radius: var(--radius-full);
  object-fit: cover;
  border: var(--space-xs) 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(--type-h1-weight);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
  line-height: var(--type-h1-line-height);
}

.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: var(--content-max-width-narrow);
}

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

.blog-author-hero__socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--card-icon-tile);
  height: var(--card-icon-tile);
  border-radius: var(--radius-full);
  background: var(--color-cards-bg);
  color: var(--color-text);
  text-decoration: none;
  transition: all var(--transition-base);
  border: var(--rule-width) 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(calc(var(--space-2xs) * -1));
}

.blog-author-hero__socials span {
  font-size: var(--icon-size);
}

.blog-author-hero__socials svg {
  width: var(--icon-size-menu);
  height: var(--icon-size-menu);
}

@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: calc(var(--avatar-size-xl) * 1.5);
    height: calc(var(--avatar-size-xl) * 1.5);
  }

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

  .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-max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.blog-tag-hero__icon {
  font-size: var(--font-size-h2);
  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(--type-h1-weight);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
  line-height: var(--type-h1-line-height);
}

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

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

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

.blog-tag-hero__back span {
  font-size: var(--icon-size-menu);
}

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

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

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

/* ==========================================================================
   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: var(--rule-width) 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: var(--rule-width) solid var(--color-border);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-base);
}

.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: var(--icon-size-menu);
}

.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: var(--card-icon-tile);
  height: var(--card-icon-tile);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: var(--color-cards-bg);
  border: var(--rule-width) solid var(--color-border);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-base);
}

.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: var(--content-max-width-narrow);
  margin: 0 auto var(--space-2xl);
}

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

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

.blog-all__search-form span {
  font-size: var(--icon-size-mark);
  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: var(--rule-width) 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: var(--icon-size-menu);
}

.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: var(--rule-width) solid var(--color-border);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-base);
}

.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: var(--rule-width) solid var(--color-border);
}

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

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

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

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

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

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

.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) + var(--space-3xl)) 0 var(--space-2xl);
}

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

.blog-post-header__content {
  max-width: var(--content-max-width-wide);
  margin: 0 auto;
  text-align: center;
}

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

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

.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(--type-h1-weight);
  color: var(--color-heading);
  margin: 0 0 var(--space-lg);
  line-height: var(--type-h1-line-height);
}

.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: var(--avatar-size-lg);
  height: var(--avatar-size-lg);
  border-radius: var(--radius-full);
  object-fit: cover;
  border: calc(var(--rule-width) * 2) solid var(--color-cards-bg);
}

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

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

.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: var(--icon-size-menu);
}

/* Featured Image */
.blog-post-header__image {
  max-width: var(--hero-text-max);
  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) + var(--space-xl)) 0 var(--space-xl);
  }

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

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

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

.blog-post-body__layout {
  display: grid;
  grid-template-columns: var(--sidebar-width-toc) minmax(0, 1fr);
  gap: var(--space-3xl);
  max-width: var(--stage-portrait-max);
  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: calc(var(--rule-width) * 2) solid var(--color-border);
  transition: all var(--transition-base);
}

.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: var(--measure-prose);
}

.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: var(--rule-width) 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: var(--card-icon-tile);
  height: var(--card-icon-tile);
  border-radius: var(--radius-full);
  background: var(--color-cards-bg);
  color: var(--color-text);
  text-decoration: none;
  border: var(--rule-width) solid var(--color-border);
  transition: all var(--transition-base);
}

.blog-share__btn:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
  transform: translateY(calc(var(--space-2xs) * -1));
}

.blog-share__btn span {
  font-size: var(--icon-size);
}

.blog-share__btn svg {
  width: var(--icon-size-menu);
  height: var(--icon-size-menu);
}

/* 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: var(--rule-width) solid var(--color-border);
}

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

.blog-author-box__avatar img {
  width: calc(var(--avatar-size-xl) * 1.25);
  height: calc(var(--avatar-size-xl) * 1.25);
  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: var(--avatar-size-xl);
    height: var(--avatar-size-xl);
  }
}

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

.blog-related {
  padding: var(--space-3xl) 0;
  background: var(--color-cards-bg);
  border-top: var(--rule-width) 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, minmax(0, 1fr));
  gap: var(--space-xl);
}

@media (max-width: 1023px) {
  .blog-related__grid {
    grid-template-columns: repeat(2, minmax(0, 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: var(--rule-width) 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: var(--rule-width) 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: var(--rule-width) solid var(--color-accent);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
}

.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: calc(var(--rule-width) * 2) solid var(--color-border);
    margin-left: var(--space-sm);
  }
}

.hs-common-confirm-message {
  background: var(--color-accent-light);
  border: var(--rule-width) 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: var(--rule-width) 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: var(--rule-width) 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 var(--input-focus-ring-width) color-mix(in srgb, var(--color-accent) 15%, transparent);
}

#comment-form textarea,
.hs-blog-post-comments__form textarea {
  min-height: var(--textarea-min-height);
  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);
  background-position: var(--btn-primary-bg-position);
  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);
  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(--type-h1-weight);
  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: var(--form-card-narrow);
}

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

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

.blog-search-form span {
  font-size: var(--icon-size);
  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: minmax(0, 1fr) var(--sidebar-width);
  gap: var(--space-3xl);
}

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

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

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

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

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

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

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

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

.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: var(--rule-width) 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, minmax(0, 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: var(--rule-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

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

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

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

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

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

.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: var(--rule-width) solid var(--color-border);
  text-decoration: none;
  transition: all var(--transition-base);
}

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

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

.blog-sidebar__recent-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  transition: color var(--transition-base);
  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(var(--color-overlay-base-rgb), 0.9) 0%, rgba(var(--color-overlay-base-rgb), 0.3) 50%, rgba(var(--color-overlay-base-rgb), 0.1) 100%);
}

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

.blog-post-magazine-hero__content {
  max-width: var(--content-max-width-wide);
}

.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: var(--color-on-dark);
  background: var(--color-surface-on-dark);
  border-radius: var(--radius-full);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(var(--blur-sm));
  transition: all var(--transition-base);
}

.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: var(--color-on-dark);
  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: var(--color-muted-on-dark);
}

.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: var(--card-icon-tile);
  height: var(--card-icon-tile);
  border-radius: var(--radius-full);
  object-fit: cover;
  border: calc(var(--rule-width) * 2) solid var(--color-border-on-dark-strong);
}

.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: minmax(0, 1fr) var(--sidebar-width-narrow);
  gap: var(--space-3xl);
}

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

.blog-post-magazine-content {
  max-width: var(--measure-prose);
}

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

.blog-all__title {
  font-size: var(--font-size-h2);
  font-weight: var(--type-h2-weight);
  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;
}



/* ----- Listing: ruled rows ----- */
.blog-listing {
  padding: var(--space-2xl) 0 var(--section-padding);
  background: var(--color-background);
}

.blog-rows {
  border-top: var(--rule-width) solid var(--color-foreground);
}

.blog-card--row,
.blog-card--row:hover {
  background: transparent;
  border: 0;
  border-bottom: var(--rule-width) solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  transform: none;
  overflow: visible;
}

.blog-card--row .blog-card__link {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 8fr) minmax(0, 2fr);
  gap: var(--grid-gap);
  align-items: baseline;
  padding: var(--space-xl) var(--space-md);
  height: auto;
  transition: background-color var(--transition-base);
}

.blog-card--row .blog-card__link:hover {
  background: transparent;
}

.blog-card--row .blog-card__title {
  transition: color var(--transition-fast);
}

.blog-card--row .blog-card__link:hover .blog-card__title {
  color: var(--color-muted);
}

.blog-card--row .blog-card__content {
  padding: 0;
}

.blog-card--row .blog-card__date,
.blog-card--row .blog-card__reading-time {
  font-family: var(--font-family-label);
  font-size: var(--font-size-micro);
  font-variant-numeric: var(--figure-numeric);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.blog-card--row .blog-card__reading-time {
  display: block;
  padding: 0;
  border: 0;
  text-align: right;
}

.blog-card--row .blog-card__topics {
  margin-bottom: var(--space-sm);
}

.blog-card--row .blog-card__topic {
  padding: 0;
  background: none;
  border-radius: 0;
  font-family: var(--font-family-label);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.blog-card--row .blog-card__title {
  display: block;
  margin: 0 0 var(--space-sm);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-snug);
  color: var(--color-heading);
  text-wrap: balance;
  -webkit-line-clamp: unset;
}

.blog-card--row .blog-card__excerpt {
  margin: 0;
  max-width: var(--measure-lead);
  -webkit-line-clamp: 2;
}

/* ----- Listing: featured post ----- */
.blog-featured {
  margin-bottom: var(--space-3xl);
  background: var(--color-card-bg);
  border: var(--rule-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.blog-featured__link {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  color: inherit;
  text-decoration: none;
}

.blog-featured__media {
  aspect-ratio: 4 / 3;
  border-right: var(--rule-width) solid var(--color-border);
  background: var(--color-manila);
}

.blog-featured__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-featured__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-2xl);
}

.blog-featured__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin: 0;
  font-family: var(--font-family-date);
  font-size: var(--font-size-micro);
  font-variant-numeric: var(--figure-numeric);
  color: var(--color-text-muted);
}

.blog-featured__topic {
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.blog-featured__title {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-line-height);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-heading);
  text-wrap: balance;
}

.blog-featured__link:hover .blog-featured__title {
  color: var(--color-muted);
}

.blog-featured__excerpt {
  margin: 0;
  max-width: var(--measure-lead);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
}

.blog-featured__author {
  margin: 0;
  padding-top: var(--space-md);
  border-top: var(--rule-width) solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* No featured image: a text-only ruled card, never a grey box. */
.blog-featured--text {
  background-color: var(--color-card-bg);
  background-image: var(--ruled-paper);
}

.blog-featured--text .blog-featured__link {
  grid-template-columns: minmax(0, 1fr);
}

.blog-featured--text .blog-featured__body {
  max-width: var(--hero-text-max);
  padding: var(--space-3xl) var(--space-2xl);
}

/* ----- Listing: empty topic ----- */
.blog-listing__empty {
  padding: var(--space-xl) 0;
  border-top: var(--rule-width) solid var(--color-foreground);
  border-bottom: var(--rule-width) solid var(--color-border);
  color: var(--color-text-muted);
}

.blog-listing__empty p {
  margin: 0;
}

/* ----- Pagination (v5): pill page buttons, the current page is the black pill ----- */
.blog-pagination {
  justify-content: flex-start;
  border-top: 0;
  padding-top: 0;
}

.blog-pagination__btn,
.blog-pagination__page {
  min-width: var(--btn-height-sm);
  height: var(--btn-height-sm);
  padding: 0 var(--space-lg);
  font-family: var(--font-family-label);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: var(--figure-numeric);
  color: var(--color-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  justify-content: center;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.blog-pagination__btn:hover:not(.is-disabled),
.blog-pagination__page:hover:not(.is-active) {
  background: var(--color-ghost-hover);
  color: var(--color-foreground);
}

.blog-pagination__page.is-active {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
}

/* ----- Newsletter band (ledger dark) ----- */
.blog-newsletter {
  padding: var(--section-padding) 0;
}

.blog-newsletter__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-4xl);
  align-items: end;
}

.blog-newsletter__title {
  margin: 0 0 var(--space-md);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-line-height);
  color: inherit;
}

.blog-newsletter__lead,
.blog-newsletter__lead p {
  margin: 0;
  color: var(--color-muted-on-dark);
}

.blog-newsletter__form {
  padding: var(--space-xl);
  background: var(--color-card-bg);
  border-radius: var(--radius-md);
  color: var(--color-text);
}

.blog-newsletter__form h3 {
  display: none;
}

/* ----- Post header ----- */
.blog-article .blog-post-header {
  background-color: var(--color-background);
  border-bottom: var(--rule-width) solid var(--color-border);
}

.blog-article .blog-post-header__container {
  padding: 0 var(--container-padding);
}

.blog-article .blog-post-header__content {
  max-width: var(--content-max-width-wide);
  margin: 0;
  text-align: left;
}

.blog-article .blog-post-header__topics {
  justify-content: flex-start;
  gap: var(--space-lg);
}

.blog-article .blog-post-header__topic,
.blog-article .blog-post-header__topic:hover {
  padding: 0;
  background: none;
  border-radius: 0;
  font-family: var(--font-family-label);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-muted);
}

.blog-article .blog-post-header__topic:hover {
  color: var(--color-link);
}

.blog-article .blog-post-header__title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--letter-spacing-tight);
  text-wrap: balance;
}

.blog-article .blog-post-header__meta {
  justify-content: flex-start;
  gap: var(--space-md) var(--space-xl);
}

.blog-article .blog-post-header__author-avatar {
  width: var(--avatar-size-md);
  height: var(--avatar-size-md);
  border: var(--rule-width) solid var(--color-border);
}

.blog-post-header__author-avatar--initials {
  display: inline-grid;
  place-items: center;
  flex: none;
  background: var(--color-manila);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-none);
  color: var(--color-primary);
}

.blog-article .blog-post-header__date,
.blog-article .blog-post-header__reading-time {
  font-family: var(--font-family-label);
  font-size: var(--font-size-micro);
  font-variant-numeric: var(--figure-numeric);
  color: var(--color-text-muted);
}

.blog-article .blog-post-header__image {
  max-width: none;
  margin: var(--space-2xl) 0 0;
  border: var(--rule-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
}

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

.blog-post-content {
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
}

.blog-post-content h2 {
  margin: var(--space-3xl) 0 var(--space-md);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-snug);
}

.blog-post-content h3 {
  margin: var(--space-2xl) 0 var(--space-sm);
  font-family: var(--font-family-body);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
}

.blog-post-content a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: var(--rule-width);
  text-underline-offset: var(--space-xs);
}

.blog-post-content blockquote {
  margin: var(--space-2xl) 0;
  padding: 0 0 0 var(--space-xl);
  border-left: var(--rule-double) double var(--color-border-hover);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-normal);
}

.blog-post-content img {
  border: var(--rule-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* Ledger tables: any table pasted into a post, no classes needed. */
.blog-post-content table {
  width: 100%;
  max-width: 100%;
  margin: var(--space-2xl) 0;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  font-variant-numeric: var(--figure-numeric);
}


.blog-post-content th,
.blog-post-content thead td {
  padding: var(--space-md) var(--table-td-padding-x) var(--space-sm);
  border-bottom: var(--rule-width) solid var(--color-foreground);
  font-family: var(--font-family-label);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  text-align: left;
  color: var(--color-text-tertiary);
  background: none;
}

.blog-post-content td {
  padding: var(--table-td-padding-y) var(--table-td-padding-x);
  border: 0;
  border-bottom: var(--rule-width) solid var(--color-border);
  vertical-align: top;
  background: none;
}


.blog-post-content td.num,
.blog-post-content th.num,
.blog-post-content table.ledger-figures td:not(:first-child),
.blog-post-content table.ledger-figures th:not(:first-child) {
  font-family: var(--font-family-label);
  font-variant-numeric: var(--figure-numeric);
  text-align: right;
  white-space: nowrap;
}

.blog-post-content table.ledger-figures tr:last-child td {
  border-bottom: var(--rule-double) double var(--color-foreground);
}

/* ----- One centred reading column (visual QA N-7) -----
   Header text, featured image, body and everything after it share the prose
   measure and sit centred in the container, as an editorial page does. */
.blog-article .blog-post-header__content,
.blog-article .blog-post-header__image,
.blog-article .blog-post-content,
.blog-article .blog-post-disclaimer,
.blog-article .blog-post-author,
.blog-article .blog-post-actions,
.blog-article .blog-post-comments {
  max-width: var(--measure-prose);
  margin-left: auto;
  margin-right: auto;
}

/* ----- After the post ----- */
.blog-post-disclaimer,
.blog-post-author,
.blog-post-actions,
.blog-post-comments {
  max-width: var(--measure-prose);
  margin-top: var(--space-2xl);
}

.blog-post-author {
  padding-top: var(--space-2xl);
  border-top: var(--rule-width) solid var(--color-foreground);
}

.blog-post-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
  border-top: var(--rule-width) solid var(--color-border);
  border-bottom: var(--rule-width) solid var(--color-border);
}

.blog-post-comments {
  padding-top: var(--space-2xl);
}

/* ----- Related posts (partials/related_articles.html) ----- */
.blog-related {
  padding: var(--section-padding) 0;
  background: var(--color-surface-raised);
}

.blog-related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.blog-related__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0 0 var(--stack-eyebrow);
  font-family: var(--font-family-label);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.blog-related__eyebrow::before {
  content: "";
  width: var(--space-xl);
  height: var(--rule-width);
  background: currentColor;
}

.blog-related__title {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-line-height);
}

.blog-related__rows {
  border-top: var(--rule-width) solid var(--color-foreground);
}

/* ----- Small screens ----- */
@media (max-width: 1023px) {
  .blog-featured__link,
  .blog-newsletter__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-newsletter__inner {
    gap: var(--space-2xl);
  }

  .blog-featured__media {
    border-right: 0;
    border-bottom: var(--rule-width) solid var(--color-border);
  }
}

@media (max-width: 767px) {
  
  .blog-post-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--color-background) 30%, transparent) left center / var(--space-2xl) 100% no-repeat local,
      linear-gradient(to left, var(--color-background) 30%, transparent) right center / var(--space-2xl) 100% no-repeat local,
      linear-gradient(to right, color-mix(in srgb, var(--color-foreground) 14%, transparent), transparent) left center / var(--space-md) 100% no-repeat scroll,
      linear-gradient(to left, color-mix(in srgb, var(--color-foreground) 14%, transparent), transparent) right center / var(--space-md) 100% no-repeat scroll;
  }

  .blog-post-content th,
  .blog-post-content thead td,
  .blog-post-content td {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  .blog-post-content th {
    letter-spacing: normal;
  }

  /* Meta: one left-aligned line that wraps (visual QA N-5). */
  .blog-article .blog-post-header__meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-sm) var(--space-lg);
  }

  .blog-card--row .blog-card__link {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-lg) 0;
  }

  .blog-card--row .blog-card__content {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .blog-card--row .blog-card__title {
    font-size: var(--font-size-h4);
  }

  .blog-featured__body,
  .blog-featured--text .blog-featured__body {
    padding: var(--space-xl) var(--space-lg);
  }

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

/* ----- Topic tags (v5): sentence case, grey pill, no caps or tracking ----- */
.blog-card__topic,
.blog-card--row .blog-card__topic,
.blog-featured__topic,
.blog-post-header__topic,
.blog-article .blog-post-header__topic,
.blog-card-magazine__topic,
.blog-post-magazine-hero__topic {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-md);
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-micro-px);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--color-muted);
  background: var(--color-ghost-hover);
  border-radius: var(--radius-full);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.blog-post-header__topic:hover,
.blog-article .blog-post-header__topic:hover,
.blog-post-magazine-hero__topic:hover {
  color: var(--color-foreground);
  background: var(--color-border);
}


@media (min-width: 768px) {
  .blog-card--row .blog-card__link {
    grid-template-columns: minmax(0, 10fr) minmax(0, 2fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--grid-gap);
    row-gap: var(--space-xs);
    align-items: start;
    padding: var(--space-2xl) 0;
  }

  .blog-card--row.blog-card--with-image .blog-card__link {
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr);
  }

  .blog-card--row .blog-card__thumb {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .blog-card--row .blog-card__content {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .blog-card--row.blog-card--with-image .blog-card__content {
    grid-column: 2;
  }

  .blog-card--row .blog-card__date,
  .blog-card--row .blog-card__reading-time {
    grid-column: -2;
    text-align: right;
  }

  .blog-card--row .blog-card__date {
    grid-row: 1;
  }

  .blog-card--row .blog-card__reading-time {
    grid-row: 2;
  }
}