/* ==========================================================================
   DESIGN SYSTEM UTILITIES
   Utility classes over the theme tokens. The token values come from theme
   settings, written by templates/partials/theme-styles.html.
   ========================================================================== */

/* 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 + SECTIONS
   The one place section spacing is set (it used to be set in three files).
   --section-padding is responsive in the tokens, so no media query here.
   ========================================================================== */
.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);
}

/* One content edge for the whole page (visual QA M-4): the header, the heroes
   and every section put their content at the same x. .container and the
   heroes are container-max-width wide with container-padding inside, so a
   section's row is that width minus both paddings (1192px at the default
   1240, x=124 at 1440; the section's own side padding gives 16px on phones). */
.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;
}

/* ==========================================================================
   HEADER CLEARANCE
   Navigation Pro is fixed, so the first section of every page starts below
   it. --header-height is the measured header stack (announcement bar + bar,
   written by partials/header.html; the theme setting until the script runs).
   Padding, not margin: the section's ground (ruled paper) runs up under the
   header instead of leaving a paper strip above it. Working Paper Hero
   clears the header itself (its "first on page" option), so its section
   stays at 0. Templates never pass padding to the first dnd_section.
   :first-child, not HubSpot's row-number-1: every section a template pulls in
   with include_dnd_partial restarts its row numbering at 1. Scoped to
   .body-container-wrapper so a second dnd_area lower down (blog listing)
   is left alone.
   ========================================================================== */
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;
}

/* ==========================================================================
   SECTION GROUNDS
   A section's ground is its dnd_section class. HubSpot drops that class on a
   dnd_section written directly in a page template, and keeps it only when the
   section comes from a section file through include_dnd_partial (tested on
   portal 147657014, 2026-09-29), so every page template section lives in
   templates/sections/page_*.html. The classes:
     dnd_section class='is-ruled'         ruled paper (v2: ledger-variant heroes only)
     dnd_section class='is-paper'         paper
     dnd_section class='ground-panel-2'   paper deep band
     dnd_section class='ground-panel-1'   forest deep band (marker eyebrows, on-dark buttons)
     dnd_section class='ground-panel-3'   forest band
     dnd_section class='ground-manila'    manila (one per page at most)
   The colours are theme tokens (css/_theme-styles.css, "Band grounds"), so a
   buyer who changes a panel colour moves every band. Buyers pick a ground in
   the editor through a section's own background; the classes stay in place.
   Two neighbouring sections on the same ground share one seam: the second
   drops its top padding, so paper after paper reads as one band.
   is-dense has no vertical padding (a strip with its own rules).
   ========================================================================== */
/* 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;
}

.dnd-section.is-paper:not(.is-dense):not(:has(.working-paper-hero, .hero[data-full-width="true"])) + .dnd-section.is-paper:not(.is-dense),
.dnd-section.ground-panel-2 + .dnd-section.ground-panel-2,
.dnd-section.ground-manila:not(:has(.working-paper-hero)) + .dnd-section.ground-manila {
  padding-top: 0;
}

/* v4 rhythm, hero -> first section. One gap, --section-padding, after every Page Hero:
   - strip and ledger heroes pad their own bottom (contract: exactly --section-padding
     below their last content), so the paper section after them drops its top padding;
     a ruled ledger hero followed by paper reads as one sheet, same rule;
   - split heroes end at the photo's edge and photo/video heroes are their own band,
     so the next section keeps its full top padding. */
.dnd-section:has(.working-paper-hero--v-strip, .working-paper-hero--v-ledger) + .dnd-section.is-paper:not(.is-dense) {
  padding-top: 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); }

/* ==========================================================================
   DOCUMENTATION PAGE (layouts/docs.html)
   A fixed Navigation Pro bar over the Docs viewer, which is a full-height app
   with its own scrolling panes. Targeted by structure (:has), because a class
   on a template's dnd_section never reaches the page. The viewer starts under
   the bar and fills the rest of the viewport, with no section padding.
   ========================================================================== */
.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));
}

/* A Recent blog posts section with no posts (a partner who does not write) is
   hidden on the live page, header and all (visual QA m-11). The posts arrive
   from HubSpot's script, so this follows them. It stays visible in the page
   editor (html.hs-inline-edit) so it can still be found and removed. */
html:not(.hs-inline-edit) main .dnd-section:has(.three-columns-row):not(:has(.three-columns-row .article)) {
  display: none;
}
/* ==========================================================================
   FORMS - every form rule in the theme.
   Reads theme settings > Forms (--input-*, --form-*, --checkbox-*, --radio-*).
   Note: since 2026-09-07 HubSpot v4 forms render in a cross-origin iframe and
   no page CSS reaches them. These rules style legacy (v3) forms, the search
   field and system-page forms.
   ========================================================================== */

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

/* ---------------------------------------------------------------- submits
   Every submit shares the primary button (css/_theme-styles.css), so its
   shape follows body[data-cta-shape] through --btn-primary-radius.
   Forms > "Form buttons match the primary button" off: submits take the
   secondary style instead. The layouts write body[data-form-submit-match-cta]. */
form .hs-button,
form input[type="submit"],
form button[type="submit"] {
  min-height: var(--input-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%;
  }
}

/* ---------------------------------------------------------------- HubSpot's narrow-screen width
   At 400px and below HubSpot's own form stylesheet sets
   `.hs-custom-style .hs-input { width: 95% !important }`, which leaves every text field short of
   the card edge (visual QA M-13). A rule marked !important can only be beaten by another
   !important, so this is the one place the theme uses the flag: the documented exception for
   overriding HubSpot's own injected CSS, scoped to text-style form inputs only. */
@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: hidden;
}

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

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

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

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

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

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

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

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

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

.crs-pointer {
  cursor: pointer;
}

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

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

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

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

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

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

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

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

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

@media (max-width: 767px) {
  .three-columns-row {
    margin: calc(var(--space-md) * -1) 0;
  }
  .three-columns-row > .column {
    margin: var(--space-md);
    width: 100%;
    max-width: var(--content-max-width-narrow);
    margin-left: auto;
    margin-right: auto;
  }
  div hr {
    margin-left: auto;
    margin-right: auto;
  }
  /* .text-left / .text-right 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 */
/* ==========================================================================
   TYPOGRAPHY
   Element styles. Each element reads its own group in theme settings >
   Typography through the --type-<element>-* tokens (family, weight, style,
   colour, line height, margin) and --font-size-<element> (responsive).
   ========================================================================== */

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

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

.lead {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
  max-width: var(--measure-lead);
}

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

/* Links inside running text take the Link settings and underline on hover.
   A link that wraps a heading or a block (a whole service row, a partner card)
   is not running text: it is left alone, so the heading keeps its own font. */
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: underline;
  text-decoration-color: var(--btn-link-underline);
  text-decoration-thickness: var(--rule-width);
  text-underline-offset: var(--space-xs);
}

p a:hover,
li a:not(:has(h1, h2, h3, h4, h5, h6, p, div, img)):hover,
blockquote a:hover {
  text-decoration-line: var(--link-hover-decoration);
  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-muted);
}

/* On the ink bands the eyebrow is muted white. */
.ground-panel-1 .title-label,
.ground-panel-1 .eyebrow,
.ground-panel-4 .title-label,
.ground-panel-4 .eyebrow,
.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="tm-hl">. */
mark.tm-hl,
.tm-hl {
  padding: 0;
  background: none;
  color: inherit;
}

/* A solid accent chip: the "Next" deadline tag (v4: the only non-button use of the accent). */
.tm-marker {
  background-color: var(--color-highlight);
  color: var(--color-on-highlight);
}

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

/* ==========================================================================
   ICONS - Lucide only (approval D-6). Placeholders are swapped for inline
   SVG; size comes from the width/height attributes, colour and stroke here.
   ========================================================================== */
.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. */
main .blog-hero {
  padding-top: calc(var(--header-height) + var(--space-3xl));
}

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

/* 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(--font-weight-bold);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
  line-height: var(--line-height-tight);
}

.blog-author-hero__bio {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
  line-height: var(--line-height-relaxed);
  max-width: 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-h2);
  }

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

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

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

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

.blog-tag-hero__inner {
  max-width: var(--container-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(--font-weight-bold);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
  line-height: var(--line-height-tight);
}

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

.blog-tag-hero__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  text-decoration: none;
  transition: all var(--transition-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-h2);
  }
}

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

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 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(--font-weight-bold);
  color: var(--color-heading);
  margin: 0 0 var(--space-lg);
  line-height: var(--line-height-tight);
}

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

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

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

.blog-post-header__author-avatar {
  width: 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-h2);
  }

  .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(--font-weight-bold);
  color: var(--color-heading);
  margin: 0;
}

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

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

.blog-magazine-hero__search .blog-search-form {
  max-width: 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(--font-weight-bold);
  color: var(--color-heading);
  margin: 0;
}

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

/* ==========================================================================
   TICKMARK BLOG
   The listing is a ledger of posts: ruled rows with the date and reading time
   in mono, the title in the heading font, the topic in small mono caps. The
   post reads at prose measure with ledger tables. Everything below is later
   in the file than the source-theme card rules, so it wins at equal
   specificity, with no priority flags.
   ========================================================================== */

/* ----- 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: var(--color-accent-light);
}

.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(--font-weight-heading);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-heading);
  text-wrap: balance;
}

.blog-featured__link:hover .blog-featured__title {
  text-decoration: underline;
  text-decoration-style: double;
  text-decoration-thickness: var(--rule-double);
  text-underline-offset: var(--space-sm);
}

.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: mono numbers, square, current page double-ruled ----- */
.blog-pagination {
  justify-content: flex-start;
  border-top: 0;
  padding-top: 0;
}

.blog-pagination__btn,
.blog-pagination__page {
  min-width: var(--btn-height-md);
  height: var(--btn-height-md);
  padding: 0 var(--space-sm);
  font-family: var(--font-family-label);
  font-size: var(--font-size-sm);
  font-variant-numeric: var(--figure-numeric);
  background: transparent;
  border: var(--rule-width) solid transparent;
  border-radius: var(--radius-sm);
  justify-content: center;
}

.blog-pagination__btn:hover:not(.is-disabled),
.blog-pagination__page:hover:not(.is-active) {
  background: var(--color-accent-light);
  border-color: transparent;
  color: var(--color-text);
}

.blog-pagination__page.is-active {
  background: transparent;
  color: var(--color-text);
  border-color: transparent;
  border-bottom: var(--rule-double) double var(--color-foreground);
  border-radius: 0;
}

/* ----- 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(--font-weight-heading);
  line-height: var(--line-height-tight);
  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;
}

/* Figures are opt-in, so a prose table stays left-aligned body text:
   - a single cell or column head: class "num" on the td / th;
   - a whole figures table: class "ledger-figures" on the table, which sets
     every column after the first as right-aligned mono figures and closes the
     table with a double rule under its last row, as a total.
   Documented on the documentation page ("Blog tables"). */
.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(--font-weight-heading);
  line-height: var(--line-height-tight);
}

.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) {
  /* A table fits the phone width where it can (tighter cells); one that still
     cannot scrolls inside its own box, never the page, and shows an edge shadow
     on the side that has more (visual QA N-2). The shadows are the classic
     scroll-shadow pair: paper covers ride with the content (local), the shade
     stays at the box edge (scroll). */
  .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);
  }
}