/* Default theme base styles. Brand-neutral; values from the ht-tokens palette.
   theme_config overrides arrive as --hm-* custom properties on :root. */
/* Fonts are self-hosted (SIL OFL 1.1, see fonts/OFL.txt); no third-party requests. */
@font-face { font-family: "Geist"; src: url("/theme/assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/theme/assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* shiro / sumi palette. Colour is scarce: shu (red) is only the mark and the primary CTA. */
  --hm-shu: #c23b22;
  --hm-shu-dark: #a02f1a;
  --hm-sumi: #141417;
  --hm-hai: #66666c;
  --hm-label: #6e6e73;
  --hm-hair: #e6e6e6;
  --hm-shiro: #fafaf8;
  --hm-kinu: #e4e3de;
  --hm-kasumi: #f4f3ef;
  --hm-sumi-soft: #2a2a2f;

  --ht-fg: var(--hm-text);
  --ht-fg-muted: var(--hm-hai);
  --ht-line: var(--hm-hair);
  --ht-surface: var(--hm-bg);
  --ht-surface-2: var(--hm-shiro);

  /* theme_config overrides land on these. --hm-primary colours the primary CTA only. */
  --hm-primary: var(--hm-shu);
  --hm-bg: #ffffff;
  --hm-text: var(--hm-sumi);
  --hm-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --hm-font-heading: var(--hm-font);
  --hm-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hm-font-kanji: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Noto Sans CJK JP", "Meiryo", sans-serif;
  --hm-radius-sm: 6px;
  --hm-radius-md: 10px;
  --hm-radius-lg: 16px;
  --hm-container: 75rem;
  --color-brand: var(--hm-primary);
  --hm-focus: var(--hm-sumi);
  color-scheme: light;
}

/* Dark mode is opt-in: light is the default whatever the OS prefers, and the
   header toggle sets data-theme="dark" on <html> (remembered in localStorage).
   The inline token style only carries values the owner chose (never the stock
   defaults), so a site that sets its own background or text colour wins here by
   being emitted after this sheet. */
:root[data-theme="dark"] {
  --hm-sumi: #ececea;
  --hm-sumi-soft: #d4d4d0;
  --hm-hai: #a3a3a8;
  --hm-label: #8a8a90;
  --hm-hair: #2c2c31;
  --hm-shiro: #1b1b1f;
  --hm-kinu: #2f2f35;
  --hm-kasumi: #1e1e22;
  --hm-bg: #111114;
  --hm-focus: #fafaf8;
  --ht-surface-2: var(--hm-shiro);
  color-scheme: dark;
}
[data-theme="dark"] .hm-tok--k { color: #b9a6f0; }
[data-theme="dark"] .hm-tok--s { color: #8fcf9d; }
[data-theme="dark"] .hm-tok--c { color: #77777e; }
[data-theme="dark"] .hm-cta--dark { background: #26262b; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; /* short pages keep the footer at the bottom */
  margin: 0;
  overflow-x: clip; /* alignfull/alignwide use 100vw, which includes a classic scrollbar */
  background: var(--hm-bg);
  color: var(--hm-text);
  font-family: var(--hm-font);
  font-size: 1rem;
  line-height: 1.6;
  font-kerning: normal;
  font-feature-settings: "rlig" 1, "calt" 0, "ss11" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--hm-font-heading); font-weight: 450; line-height: 1.15; letter-spacing: -0.04em; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -0.06em; }
h2 { font-size: clamp(1.875rem, 3vw, 2.5rem); line-height: 1.12; }
h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 3px; border-radius: 2px; }
code, kbd, pre, samp { font-family: var(--hm-font-mono); }
img, svg, video { max-width: 100%; height: auto; }

.hm-container { width: 100%; max-width: var(--hm-container); margin: 0 auto; padding: 0 1.5rem; }

.hm-skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ht-fg); color: var(--hm-bg); padding: 0.5rem 1rem;
}
.hm-skip:focus { left: 0.5rem; top: 0.5rem; }
main { flex: 1 0 auto; }
main:focus { outline: none; } /* focus target of the skip link, not a control */
.hm-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Sections: hairline separated bands. */
.hm-section { padding: clamp(4rem, 8vw, 7rem) 0; border-top: 1px solid var(--hm-hair); }
.hm-section:first-child { border-top: 0; }

/* Buttons: pill, shu fill for the primary CTA, hairline outline for the rest. */
.hm-btn {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 1.1rem; border-radius: 999px;
  background: var(--hm-primary); color: #fff; text-decoration: none; font-size: 0.875rem; font-weight: 500; line-height: 1.2;
  border: 1px solid var(--hm-primary); transition: background 0.15s, border-color 0.15s, filter 0.15s;
}
.hm-btn:hover { filter: brightness(0.88); }

/* Header + nav */
.hm-header {
  position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--hm-hair);
  background: color-mix(in srgb, var(--hm-bg) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.hm-header__inner { display: flex; align-items: center; gap: 1.5rem; height: 4rem; }
.hm-logo { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.65rem; color: var(--hm-text); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; text-decoration: none; }
.hm-logo__mark { font-family: var(--hm-font-kanji); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; text-transform: none; color: var(--hm-shu); }
.hm-logo img { display: block; }
.hm-nav-wrap { margin-left: auto; }
.hm-nav { position: relative; font-size: 0.875rem; }
.hm-nav__toggle { cursor: pointer; list-style: none; padding: 0.4rem 0.2rem; font-weight: 500; color: var(--hm-hai); }
.hm-nav__toggle::-webkit-details-marker { display: none; }
.hm-nav__list, .hm-nav__sub { list-style: none; margin: 0; padding: 0; }
.hm-nav__list {
  position: absolute; right: 0; top: 100%; min-width: 14rem; z-index: 50;
  background: var(--hm-bg); border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 0.5rem;
}
.hm-nav__list a { display: block; padding: 0.35rem 0.5rem; color: var(--hm-hai); text-decoration: none; }
.hm-nav__list a:hover { color: var(--hm-text); background: var(--ht-surface-2); border-radius: var(--hm-radius-sm); }
.hm-nav__sub { padding-left: 0.75rem; }
.hm-nav__toggle:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }
/* Mobile: a scrim behind the open menu. The header's backdrop-filter makes it the
   containing block of fixed children, so this covers the viewport only while the
   sticky header is at the top, which it always is. z-index -1 keeps it under the header content. */
@media (max-width: 47.99rem) {
  .hm-nav[open]::before { content: ""; position: fixed; z-index: -1; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.35); }
}
.hm-nav a[aria-current="page"], .hm-footer a[aria-current="page"] { color: var(--hm-text); font-weight: 500; }

@media (min-width: 48rem) {
  .hm-nav > summary { display: none; }
  .hm-nav::details-content { content-visibility: visible; display: contents; } /* no-JS: list shows without [open] */
  .hm-nav > .hm-nav__list { display: flex; }
  .hm-nav > .hm-nav__list {
    position: static; border: 0; padding: 0; min-width: 0; background: transparent; gap: 1.75rem; align-items: center;
  }
  .hm-header__cta { min-height: 2.125rem; padding: 0 0.9rem; font-size: 0.8125rem; }
  .hm-nav__list > li { position: relative; }
  .hm-nav__sub {
    display: none; position: absolute; left: 0; top: 100%; min-width: 12rem; padding: 0.5rem;
    background: var(--hm-bg); border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md);
  }
  .hm-nav__list > li:hover > .hm-nav__sub, .hm-nav__list > li:focus-within > .hm-nav__sub { display: block; }
}

/* Footer */
.hm-footer { border-top: 1px solid var(--hm-hair); background: var(--hm-bg); padding: 3rem 0 2.25rem; color: var(--hm-hai); font-size: 0.8125rem; }
.hm-footer a { color: var(--hm-hai); text-decoration: none; }
.hm-footer a:hover { color: var(--hm-text); }
.hm-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.hm-footer__title { color: var(--hm-text); font-weight: 500; margin-bottom: 0.5rem; }
.hm-footer ul { list-style: none; margin: 0; padding: 0; }
.hm-footer li { margin: 0.25rem 0; }
.hm-social { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem !important; }
.hm-footer__legal { margin: 0; }

/* Errors */
.hm-error { padding: 6rem 0; text-align: center; }
.hm-error__code { font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 0.5rem; }

/* Sanitised html / rich-text bodies */
.hm-html-body { line-height: 1.7; }
.hm-html-body > :first-child { margin-top: 0; }
.hm-html-body > :last-child { margin-bottom: 0; }
.hm-html-body h2 { margin-top: 2em; }
.hm-html-body h3 { margin-top: 1.5em; }
.hm-html-body ul, .hm-html-body ol { padding-left: 1.4em; margin: 0 0 1em; }
.hm-html-body li { margin: 0.25em 0; }
.hm-html-body blockquote { margin: 1.5em 0; padding: 0 1em; border-left: 3px solid var(--ht-line); color: var(--ht-fg-muted); }
.hm-html-body pre, .hm-html-body code { font-family: var(--hm-font-mono); font-size: 0.9em; }
.hm-html-body pre { background: var(--ht-surface-2); border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 1rem; overflow-x: auto; }
.hm-html-body :not(pre) > code { background: var(--ht-surface-2); padding: 0.1em 0.35em; border-radius: var(--hm-radius-sm); }
.hm-html-body table { border-collapse: collapse; width: 100%; margin: 1.5em 0; }
.hm-html-body th, .hm-html-body td { border: 1px solid var(--ht-line); padding: 0.5rem 0.75rem; text-align: left; }
.hm-html-body details { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 0.75rem 1rem; margin: 0.75rem 0; }
.hm-html-body summary { cursor: pointer; font-weight: 600; }
.hm-html-body hr { border: 0; border-top: 1px solid var(--ht-line); margin: 2em 0; }
.hm-html-body img { border-radius: var(--hm-radius-md); }

.hm-prose, .hm-html-body { color: var(--hm-hai); }

/* Light/dark toggle in the header: invisible until the head script wires it up. It keeps its box meanwhile
   (visibility, not display), so showing it does not push the nav sideways (layout shift). */
.hm-theme-toggle {
  flex: none; display: inline-grid; place-items: center; width: 2.125rem; height: 2.125rem; padding: 0;
  border: 1px solid var(--hm-hair); border-radius: 999px; background: transparent; color: var(--hm-hai); cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.hm-theme-toggle[hidden] { display: inline-grid; visibility: hidden; }
.hm-theme-toggle:hover { color: var(--hm-text); border-color: var(--hm-text); }
.hm-theme-toggle:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }
.hm-theme-toggle svg { width: 1rem; height: 1rem; }
.hm-theme-toggle__sun, [data-theme="dark"] .hm-theme-toggle__moon { display: none; }
[data-theme="dark"] .hm-theme-toggle__sun { display: block; }

@media (max-width: 47.99rem) {
  .hm-header__inner { gap: 0.75rem; }
  .hm-logo { letter-spacing: 0.18em; gap: 0.5rem; }
}

/* Shared section partials: section-head, code-panel. */
.hm-section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: end; margin-bottom: 3rem; }
.hm-section-head__eyebrow { margin: 0 0 1rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-section-head__heading { margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.hm-section-head__subheading { margin: 0; color: var(--hm-hai); font-size: 1.0625rem; line-height: 1.6; }
.hm-frame { min-width: 0; max-width: 100%; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); background: var(--hm-kasumi); overflow: hidden; }
.hm-frame__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--hm-hair); background: var(--hm-shiro); font-family: var(--hm-font-mono); font-size: 0.75rem; color: var(--hm-hai); }
.hm-frame__dots { display: inline-flex; gap: 0.35rem; }
.hm-frame__dots i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--hm-kinu); }
.hm-frame__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hm-text); }
.hm-frame__meta { flex-shrink: 0; margin-left: auto; white-space: nowrap; color: var(--hm-label); }
.hm-frame .hm-code { max-width: 100%; } /* long lines scroll inside the card instead of being clipped */
.hm-code { margin: 0; padding: 1.25rem; overflow-x: auto; font-size: 0.8125rem; line-height: 1.65; color: var(--hm-sumi-soft); tab-size: 2; }
.hm-code code { font-family: inherit; white-space: pre; }
.hm-tok--k { color: #5b4a8a; }
.hm-tok--s { color: #3f6e4a; }
.hm-tok--c { color: #9a9a9f; }
.hm-outs { display: flex; flex-wrap: wrap; gap: 1px; margin: 1rem 0 0; background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); overflow: hidden; }
.hm-outs > div { flex: 1 1 8rem; padding: 0.75rem 1rem; background: var(--hm-bg); }
.hm-outs dt { font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hm-label); }
.hm-outs dd { margin: 0.25rem 0 0; font-size: 0.9375rem; }
@media (max-width: 960px) { .hm-section-head { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; } }

/* Blog layouts: single post, archive, taxonomy, author and search. */

/* Listing header (archive, taxonomy, author, search) */
.hm-listing { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 6rem); }
.hm-listing__header { margin-bottom: 2.5rem; }
.hm-listing__eyebrow { margin: 0 0 0.75rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-listing__title { margin: 0 0 0.5rem; font-size: clamp(2rem, 4.5vw, 3.25rem); }
.hm-listing__lede { margin: 0 0 1.25rem; color: var(--hm-hai); font-size: 1.0625rem; }
.hm-empty { color: var(--hm-hai); padding: 2rem 0; }
.hm-author-head { display: flex; align-items: flex-start; gap: 1.5rem; }
.hm-author-head .hm-listing__lede { margin-bottom: 0; }

/* Cards */
.hm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 2rem 1.75rem; align-items: start; } /* start: a short, imageless card is not stretched to the tallest in its row */
.hm-card { display: flex; flex-direction: column; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); background: var(--hm-bg); overflow: hidden; transition: border-color 0.15s, transform 0.15s; }
.hm-card:hover { border-color: var(--hm-kinu); transform: translateY(-2px); }
.hm-card:focus-within { border-color: var(--hm-hai); }
.hm-card__media { display: block; aspect-ratio: 16 / 9; background: var(--hm-kasumi); overflow: hidden; }
.hm-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-card__body { display: flex; flex-direction: column; padding: 1.25rem 1.375rem 1.375rem; }
.hm-card__cat { margin: 0 0 0.5rem; font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-card__title { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.hm-card__title a { text-decoration: none; }
.hm-card__title a:hover { text-decoration: underline; }
.hm-card__excerpt { margin: 0 0 1rem; color: var(--hm-hai); font-size: 0.9375rem; }
.hm-card .hm-meta { margin: 0; }

/* Meta line: author, date, reading time */
.hm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin: 0 0 1.5rem; font-size: 0.8125rem; color: var(--hm-label); }
.hm-meta a { color: var(--hm-hai); text-decoration: none; }
.hm-meta a:hover { color: var(--hm-text); text-decoration: underline; }
.hm-meta__author { display: inline-flex; align-items: center; gap: 0.5rem; }
.hm-avatar { border-radius: 50%; object-fit: cover; background: var(--hm-kasumi); }
.hm-avatar--sm { width: 1.5rem; height: 1.5rem; }
.hm-avatar--lg { width: 4.5rem; height: 4.5rem; flex: none; }

/* Term chips */
.hm-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; }
.hm-chip { display: inline-block; padding: 0.2rem 0.75rem; border: 1px solid var(--hm-hair); border-radius: 999px; font-size: 0.8125rem; color: var(--hm-hai); text-decoration: none; transition: border-color 0.15s, color 0.15s; }
.hm-chip:hover { border-color: var(--hm-hai); color: var(--hm-text); }

/* Single post */
.hm-article { max-width: 46rem; padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.hm-article__title { margin: 0 0 1rem; font-size: clamp(2.25rem, 5vw, 3.5rem); }
.hm-article__lede { margin: 0 0 1.25rem; font-size: 1.25rem; line-height: 1.5; color: var(--hm-hai); }
.hm-article__image { margin: 0 -1.5rem 2.5rem; }
.hm-article__image img { display: block; width: 100%; border-radius: var(--hm-radius-lg); }
.hm-article__footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hm-hair); }
.hm-entry { font-size: 1.0625rem; line-height: 1.75; color: var(--hm-text); overflow-wrap: break-word; }
.hm-entry > :first-child { margin-top: 0; }
.hm-entry h2 { margin: 2em 0 0.6em; font-size: clamp(1.5rem, 3vw, 2rem); }
.hm-entry h3 { margin: 1.75em 0 0.5em; }
.hm-entry a { color: var(--hm-primary); }
.hm-entry pre { overflow-x: auto; padding: 1rem; background: var(--hm-kasumi); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); font-size: 0.875rem; }
.hm-entry :not(pre) > code { padding: 0.1em 0.35em; background: var(--hm-kasumi); border-radius: var(--hm-radius-sm); font-size: 0.9em; }
.hm-entry img { border-radius: var(--hm-radius-md); }
.hm-entry hr { border: 0; border-top: 1px solid var(--hm-hair); margin: 2.5em 0; }
.hm-page-body { padding-top: 3rem; padding-bottom: 3rem; max-width: 48rem; }

/* Author box and related posts */
.hm-author-box { display: flex; align-items: flex-start; gap: 1rem; margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); background: var(--hm-kasumi); }
.hm-author-box p { margin: 0; }
.hm-author-box .hm-meta { margin: 0; }
.hm-author-box .hm-author-bio { margin-top: 0.25rem; font-size: 0.9375rem; color: var(--hm-hai); }
.hm-related { padding-top: 2rem; padding-bottom: 5rem; border-top: 1px solid var(--hm-hair); }
.hm-related__title { font-size: 1.5rem; margin-bottom: 1.5rem; }

/* Pagination */
.hm-pagination { margin-top: 3rem; }
.hm-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.hm-pagination a, .hm-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; padding: 0 0.75rem; border: 1px solid var(--hm-hair); border-radius: 999px; font-size: 0.875rem; color: var(--hm-hai); text-decoration: none; }
.hm-pagination span { border: 0; min-width: 1.5rem; padding: 0; }
.hm-pagination a:hover { border-color: var(--hm-hai); color: var(--hm-text); }
.hm-pagination a[aria-current="page"] { background: var(--hm-text); border-color: var(--hm-text); color: var(--hm-bg); }

/* Search form */
.hm-search { display: flex; gap: 0.75rem; margin: 1.5rem 0 1rem; max-width: 36rem; }
.hm-search .hm-btn { flex: none; }
.hm-search__input { flex: 1 1 auto; min-width: 0; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--hm-kinu); border-radius: 999px; background: var(--hm-bg); color: var(--hm-text); font: inherit; }
.hm-search__input:focus-visible { border-color: var(--hm-text); }

@media (max-width: 47.99rem) {
  .hm-article__image { margin-inline: -1.5rem; }
  .hm-article__image img { border-radius: 0; }
}

/* Changelog archive (archive-release layout) */
.hm-changelog__release { scroll-margin-top: 5rem; padding: 1.5rem 0 2rem; border-bottom: 1px solid var(--hm-hair); }
.hm-changelog__release:target { background: var(--hm-kasumi); box-shadow: -1rem 0 0 var(--hm-kasumi), 1rem 0 0 var(--hm-kasumi); border-radius: var(--hm-radius-sm); }
.hm-changelog__version { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0 0 1rem; font-size: 1.5rem; }
.hm-changelog__date { margin-left: auto; font-size: 0.9375rem; font-weight: 400; }
.hm-changelog__channel { font-weight: 400; }
.hm-changelog__yanked { font-weight: 400; border-color: var(--hm-shu); color: var(--hm-shu); }
.hm-changelog__summary { margin: 0 0 1rem; color: var(--hm-hai); }
.hm-changelog__group { margin: 1.25rem 0 0.5rem; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hm-hai); }
.hm-changelog__list { margin: 0; padding-left: 1.25rem; line-height: 1.6; }
.hm-changelog__list li + li { margin-top: 0.25rem; }
@media (max-width: 40rem) {
  .hm-changelog__version { font-size: 1.25rem; }
  .hm-changelog__date { margin-left: 0; flex-basis: 100%; }
}

/* Docs layout (single-doc): sidebar menu, article, on-page TOC. */
.hm-doc { display: block; padding: 1.5rem 1.5rem 4rem; }
.hm-doc__nav, .hm-doc__toc { display: none; }
.hm-doc__navm { margin-bottom: 1.5rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); padding: 0.75rem 1rem; }
.hm-doc__navm summary { cursor: pointer; font-weight: 500; }
.hm-doc__navm summary:focus-visible, .hm-doc a:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }
.hm-doc__main { min-width: 0; }
/* The article is a readable column centred in its track. */
.hm-doc__main > * { max-width: 46rem; margin-inline: auto; }
.hm-doc__title { margin-block: 0 1.5rem; font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.02em; }

/* Sidebar tree */
.hm-doc-nav { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.hm-doc-nav .hm-doc-nav { margin: 0.25rem 0 0.5rem 0.75rem; padding-left: 0.75rem; border-left: 1px solid var(--hm-hair); }
.hm-doc-nav li { margin: 0.125rem 0; }
.hm-doc-nav a { display: block; padding: 0.25rem 0.5rem; border-radius: var(--hm-radius-sm); color: var(--hm-hai); text-decoration: none; }
.hm-doc-nav a:hover { color: var(--hm-text); background: var(--hm-kasumi); }
.hm-doc-nav a[aria-current="page"] { color: var(--hm-text); background: var(--hm-kasumi); font-weight: 600; box-shadow: inset 2px 0 0 var(--hm-primary); }
.hm-doc-nav__group { display: block; padding: 0.5rem 0.5rem 0.25rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-hai); }

/* Collapsible sections */
.hm-doc-nav summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0.5rem; border-radius: var(--hm-radius-sm); font-weight: 600; color: var(--hm-text); }
.hm-doc-nav summary::-webkit-details-marker { display: none; }
.hm-doc-nav summary::after { content: ""; width: 0.4rem; height: 0.4rem; margin-right: 0.25rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.hm-doc-nav details[open] > summary::after { transform: rotate(45deg); }
.hm-doc-nav summary:hover { color: var(--hm-text); background: var(--hm-kasumi); }
.hm-doc-nav summary:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }

/* Sidebar search */
.hm-doc__search { margin: 0 0 1rem; }
.hm-doc__search input[type="search"] { width: 100%; box-sizing: border-box; padding: 0.5rem 0.75rem; border: 1px solid var(--hm-hai); border-radius: var(--hm-radius-md); background: transparent; color: var(--hm-text); font: inherit; font-size: 0.875rem; }
.hm-doc__search input[type="search"]:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }

/* Breadcrumbs */
.hm-doc__crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; margin: 0 0 1rem; padding: 0; font-size: 0.8125rem; color: var(--hm-label); }
.hm-doc__crumbs li + li::before { content: "/"; margin-right: 0.5rem; }
.hm-doc__crumbs a { color: var(--hm-hai); text-decoration: none; }
.hm-doc__crumbs a:hover { color: var(--hm-text); text-decoration: underline; }

/* Headings clear the sticky site header (4rem), like the essay aside in sections/content.css */
.hm-doc .hm-prose :is(h2, h3) { scroll-margin-top: 6rem; }

/* Prev / next */
.hm-doc__pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-block: 3rem 0; padding-top: 1.5rem; border-top: 1px solid var(--hm-hair); }
.hm-doc__pager a { display: block; padding: 0.75rem 1rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); text-decoration: none; }
.hm-doc__pager a:hover { border-color: var(--hm-hai); }
.hm-doc__pager span { display: block; font-size: 0.75rem; color: var(--hm-label); }
.hm-doc__next { margin-left: auto; text-align: right; }

/* Card grids on the landing page and section indexes */
/* Wider than the text but on its left edge: margin-left is the text column's offset. */
.hm-doc__main > .hm-doc-cards, .hm-doc__main > .hm-doc-cards__label { max-width: 60rem; margin-left: max(0px, calc((100% - 46rem) / 2)); margin-right: 0; }
.hm-doc-cards { list-style: none; margin-block: 0 2rem; margin-inline: auto; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.hm-doc-cards__label { margin-block: 2rem 0.75rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-hai); }
.hm-doc-card { position: relative; padding: 1rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); }
.hm-doc-card:hover, .hm-doc-card:focus-within { border-color: var(--hm-hai); }
.hm-doc-card__link { color: var(--hm-text); font-weight: 600; text-decoration: none; }
.hm-doc-card__link::after { content: ""; position: absolute; inset: 0; }
.hm-doc-card__link:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }
.hm-doc-card p { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--hm-hai); }

/* Next steps block at the end of a guide (list rendered by the docs tool) */
.hm-doc .hm-prose ul.hm-next-steps, .hm-doc .hm-prose h2#next-steps + ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.hm-doc .hm-prose ul.hm-next-steps li, .hm-doc .hm-prose h2#next-steps + ul li { margin: 0; padding: 0.75rem 1rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); }
.hm-doc .hm-prose ul.hm-next-steps a, .hm-doc .hm-prose h2#next-steps + ul a { font-weight: 600; text-decoration: none; }

/* On-page TOC */
.hm-doc__toc-title { margin: 0 0 0.5rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-hai); }
.hm-doc__toc ol { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.hm-doc__toc a { display: block; padding: 0.2rem 0; color: var(--hm-hai); text-decoration: none; }
.hm-doc__toc a:hover { color: var(--hm-text); text-decoration: underline; }
.hm-doc__toc-l3 { padding-left: 0.875rem; }

@media (min-width: 60rem) {
  /* Edge to edge: no container, a third track is kept (empty without a TOC) so the article stays centred. */
  .hm-doc { display: grid; grid-template-columns: 16rem minmax(0, 1fr) 14rem; gap: 2.5rem; align-items: start; }
  .hm-doc__navm { display: none; }
  /* The article comes first in the source so the skip link lands on it; the columns are placed here. */
  .hm-doc__nav { grid-column: 1; grid-row: 1; }
  .hm-doc__main { grid-column: 2; grid-row: 1; }
  .hm-doc__toc { grid-column: 3; grid-row: 1; }
  /* Without a TOC the article takes the third track (until wide screens, where the empty track keeps it centred). */
  .hm-doc:not(:has(.hm-doc__toc)) { grid-template-columns: 16rem minmax(0, 1fr); }
  .hm-doc__nav, .hm-doc__toc { display: block; position: sticky; top: 6rem; max-height: calc(100vh - 7rem); overflow-y: auto; padding: 4px; }
}

@media (min-width: 90rem) {
  .hm-doc:not(:has(.hm-doc__toc)) { grid-template-columns: 16rem minmax(0, 1fr) 14rem; }
}

/* WordPress compatibility: the core Gutenberg block classes that imported or
   pasted content carries. Scoped to .hm-entry / .hm-prose so they only style
   rich-text bodies. Colours come from the theme tokens. */

/* Alignment. alignwide and alignfull break out of the 46rem article column. */
.hm-entry .alignleft { float: left; margin: 0.25em 1.5em 1em 0; max-width: 50%; }
.hm-entry .alignright { float: right; margin: 0.25em 0 1em 1.5em; max-width: 50%; }
.hm-entry .aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.hm-entry .alignwide { width: min(75rem, calc(100vw - 3rem)); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.hm-entry .alignfull { width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); }
/* A wide image stays a banner, not a full screen: cap its height and crop. */
.hm-entry img.alignwide, .hm-entry img.alignfull, .hm-entry .alignwide img, .hm-entry .alignfull img { width: 100%; max-height: min(32rem, 70vh); object-fit: cover; }
.hm-entry::after { content: ""; display: table; clear: both; }

/* Images and captions */
.wp-block-image, .wp-block-gallery figure { margin: 1.75em 0; }
.wp-block-image img { display: block; max-width: 100%; height: auto; }
.wp-block-image.aligncenter img { margin-inline: auto; }
.wp-block-image figcaption, figure.wp-caption figcaption, .wp-element-caption, .wp-caption-text { margin-top: 0.6em; font-size: 0.8125rem; color: var(--hm-label); text-align: center; }
.wp-block-gallery { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; margin: 1.75em 0; }
.wp-block-gallery .wp-block-image { flex: 1 1 12rem; margin: 0; }

/* Quote */
.wp-block-quote { margin: 1.75em 0; padding: 0.25em 0 0.25em 1.25em; border-left: 3px solid var(--hm-primary); color: var(--hm-hai); font-size: 1.125em; }
.wp-block-quote p { margin: 0 0 0.5em; }
.wp-block-quote cite, .wp-block-quote__citation { display: block; font-size: 0.8125rem; font-style: normal; color: var(--hm-label); }
.wp-block-pullquote { margin: 2em 0; padding: 1.5em 0; border-block: 1px solid var(--hm-hair); text-align: center; font-size: 1.375em; }
.wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }

/* Table. Cells keep a readable minimum width, so a wide table scrolls sideways
   inside its own box (never the page) and edge shadows hint that there is more. */
.wp-block-table, .hm-entry > table {
  margin: 1.75em 0; max-width: 100%; overflow-x: auto;
  background:
    linear-gradient(to right, var(--hm-bg) 30%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--hm-bg) 30%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.28), transparent) left / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.28), transparent) right / 0.75rem 100% no-repeat scroll;
}
.hm-entry > table { display: block; width: max-content; border-collapse: collapse; font-size: 0.9375rem; }
.wp-block-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.hm-entry th, .hm-entry td { min-width: 7rem; }
.wp-block-table th, .wp-block-table td, .hm-entry > table th, .hm-entry > table td { padding: 0.5rem 0.75rem; border: 1px solid var(--hm-hair); text-align: left; }
.wp-block-table thead th, .hm-entry > table thead th { background: var(--hm-kasumi); }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--hm-kasumi); }
.wp-block-table figcaption { margin-top: 0.6em; font-size: 0.8125rem; color: var(--hm-label); text-align: center; }

/* Columns */
.wp-block-columns { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; margin: 1.75em 0; }
.wp-block-column { flex: 1 1 14rem; min-width: 0; }
.wp-block-column > :first-child { margin-top: 0; }
.wp-block-column > :last-child { margin-bottom: 0; }
@media (min-width: 48rem) { .wp-block-columns { flex-wrap: nowrap; } }

/* Buttons */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5em 0; }
.wp-block-button__link { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.25rem; border: 1px solid var(--hm-primary); border-radius: 999px; background: var(--hm-primary); color: #fff; font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.wp-block-button__link:hover { filter: brightness(0.88); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--hm-primary); }
.hm-entry .wp-block-button__link { color: #fff; }
.hm-entry .wp-block-button.is-style-outline .wp-block-button__link { color: var(--hm-primary); }

/* Embeds: responsive 16:9 by default */
.wp-block-embed { margin: 1.75em 0; }
.wp-block-embed__wrapper { position: relative; }
.wp-embed-aspect-16-9 .wp-block-embed__wrapper, .wp-has-aspect-ratio .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.wp-embed-aspect-4-3 .wp-block-embed__wrapper { aspect-ratio: 4 / 3; }
.wp-embed-aspect-1-1 .wp-block-embed__wrapper { aspect-ratio: 1 / 1; }
.wp-block-embed iframe, .wp-block-embed video { width: 100%; height: 100%; border: 0; }
.wp-block-embed:not([class*="wp-embed-aspect"]) iframe { aspect-ratio: 16 / 9; height: auto; }
.wp-block-embed figcaption { margin-top: 0.6em; font-size: 0.8125rem; color: var(--hm-label); text-align: center; }

/* Misc core blocks */
.wp-block-separator { border: 0; border-top: 1px solid var(--hm-hair); margin: 2.5em auto; }
.wp-block-code, .wp-block-preformatted { overflow-x: auto; }
.wp-block-group { margin: 1.75em 0; }
.wp-block-group.has-background { padding: 1.5rem; border-radius: var(--hm-radius-md); }
.wp-block-cover { position: relative; display: flex; align-items: center; justify-content: center; min-height: 14rem; padding: 2rem; margin: 1.75em 0; overflow: hidden; border-radius: var(--hm-radius-md); background: var(--hm-sumi-soft); color: #fff; }
.wp-block-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wp-block-cover__inner-container { position: relative; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.has-text-align-left { text-align: left; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Colour classes: the editor's default palette on the theme's own ink */
.has-black-color { color: #141417; }
.has-white-color { color: #ffffff; }
.has-gray-color, .has-cyan-bluish-gray-color { color: #66666c; }
.has-vivid-red-color, .has-red-color { color: #cf2e2e; }
.has-vivid-green-cyan-color, .has-green-color { color: #00a96e; }
.has-vivid-cyan-blue-color, .has-blue-color { color: #0693e3; }
.has-black-background-color { background-color: #141417; }
.has-white-background-color { background-color: #ffffff; }
.has-gray-background-color, .has-cyan-bluish-gray-background-color { background-color: #abb8c3; }
.has-vivid-red-background-color, .has-red-background-color { background-color: #cf2e2e; }
.has-vivid-green-cyan-background-color, .has-green-background-color { background-color: #00a96e; }
.has-vivid-cyan-blue-background-color, .has-blue-background-color { background-color: #0693e3; }
.has-background:not(.has-text-color) { color: var(--hm-sumi); }
.has-black-background-color, .has-vivid-red-background-color, .has-vivid-cyan-blue-background-color { color: #fff; }
.has-small-font-size { font-size: 0.8125em; }
.has-medium-font-size { font-size: 1.125em; }
.has-large-font-size { font-size: 1.5em; }
.has-x-large-font-size { font-size: 2em; }

[data-theme="dark"] .has-black-color { color: #ececea; }
@media (max-width: 47.99rem) {
  .hm-entry .alignleft, .hm-entry .alignright { float: none; max-width: 100%; margin: 1em 0; }
}

.hm-card-columns__grid { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); overflow: hidden; }
@media (min-width: 64rem) {
  .hm-card-columns--cols-2 .hm-card-columns__grid { grid-template-columns: repeat(2, 1fr); }
  .hm-card-columns--cols-3 .hm-card-columns__grid { grid-template-columns: repeat(3, 1fr); }
  .hm-card-columns--cols-4 .hm-card-columns__grid { grid-template-columns: repeat(4, 1fr); }
}
.hm-card-columns__col { background: var(--hm-bg); padding: 2rem 1.75rem; }
.hm-card-columns__label { margin: 0 0 0.75rem; font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-card-columns__title { margin: 0 0 0.5rem; font-size: 1.25rem; }
.hm-card-columns__description { margin: 0 0 1.25rem; color: var(--ht-fg-muted); }
.hm-card-columns__items { list-style: none; margin: 0; padding: 0; font-family: var(--hm-font-mono); font-size: 0.8125rem; }
.hm-card-columns__items li { padding: 0.5rem 0; border-top: 1px dashed var(--hm-hair); color: var(--hm-text); }
.hm-card-columns__notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; margin-top: 1.5rem; padding: 1.5rem; background: var(--hm-shiro); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); }
.hm-card-columns__note-title { margin: 0 0 0.25rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; }
.hm-card-columns__note-text { margin: 0; font-size: 0.875rem; color: var(--ht-fg-muted); }

/* client_logos renders with the shared .hm-logo-strip styles (see logo_strip.css). */

.hm-comparison__sides { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); overflow: hidden; }
.hm-comparison__side { background: var(--hm-bg); padding: 2rem 1.75rem; }
.hm-comparison__side--positive { background: var(--hm-shiro); }
.hm-comparison__tag { margin: 0 0 0.75rem; font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-comparison__side--positive .hm-comparison__tag { color: var(--hm-shu); }
.hm-comparison__title { margin: 0 0 1.25rem; font-size: 1.375rem; }
.hm-comparison__items { list-style: none; margin: 0; padding: 0; }
.hm-comparison__items li { position: relative; padding: 0.625rem 0 0.625rem 1.75rem; border-top: 1px solid var(--hm-hair); }
/* Glyphs are pseudo-elements so the canvas editor never edits them. */
.hm-comparison__items li::before { position: absolute; left: 0; top: 0.625rem; font-family: var(--hm-font-mono); }
.hm-comparison__side--negative .hm-comparison__items li { color: var(--hm-hai); text-decoration: line-through; }
.hm-comparison__side--negative .hm-comparison__items li::before { content: "\00d7"; color: var(--hm-label); }
.hm-comparison__side--positive .hm-comparison__items li::before { content: "\2713"; color: var(--hm-shu); }

.hm-contact-form { max-width: 40rem; }
.hm-contact-form--split { max-width: var(--hm-container); display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.hm-contact-form__subheading { color: var(--ht-fg-muted); }
.hm-form { display: grid; gap: 1rem; }
.hm-form__field { display: grid; gap: 0.35rem; }
.hm-form__label, .hm-form__group legend { font-weight: 600; }
.hm-form input[type="text"], .hm-form input[type="email"], .hm-form input[type="tel"], .hm-form textarea, .hm-form select {
  width: 100%; padding: 0.6rem 0.75rem; font: inherit; color: inherit; background: var(--hm-bg);
  border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md);
}
.hm-form__group { border: 0; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.hm-form__check { display: flex; gap: 0.5rem; align-items: baseline; }
.hm-form__help { color: var(--ht-fg-muted); }
.hm-form__submit { justify-self: start; cursor: pointer; font: inherit; font-size: 0.875rem; font-weight: 500; }
.hm-form__captcha { min-height: 1px; }
.hm-form__error { padding: 0.75rem 1rem; border-radius: var(--hm-radius-md); border: 1px solid var(--ht-line); }
.hm-form__success { padding: 0.75rem 1rem; border-radius: var(--hm-radius-md); background: var(--ht-surface-2); border: 1px solid var(--ht-line); }
/* Honeypot: off-screen, not display:none, so naive bots still fill it. */
.hm-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 48rem) { .hm-contact-form--split { grid-template-columns: 1fr; } }

.hm-contact-info__heading { margin-bottom: 1.5rem; }
.hm-contact-info__body { display: grid; gap: 1.5rem; }
.hm-contact-info__address { font-style: normal; }
.hm-contact-info__line { display: block; }
.hm-contact-info__channels { list-style: none; margin: 0; padding: 0; }
.hm-contact-info__hours { margin: 0; }
.hm-contact-info__hours-row { display: flex; gap: 1rem; justify-content: space-between; max-width: 20rem; padding: 0.2rem 0; border-bottom: 1px solid var(--ht-line); }
.hm-contact-info__hours dt { font-weight: 600; }
.hm-contact-info__hours dd { margin: 0; color: var(--ht-fg-muted); }
.hm-contact-info__map { margin-top: 1.5rem; }
.hm-contact-info__map iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--hm-radius-md); }
@media (min-width: 48rem) {
  .hm-contact-info--inline .hm-contact-info__body { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}
.hm-contact-info--card .hm-contact-info__body { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.75rem; background: var(--ht-surface); }

/* .hm-prose is the shared rich-text flow styling (content, overview). */
.hm-prose > :last-child { margin-bottom: 0; }
.hm-prose img { border-radius: var(--hm-radius-md); }
.hm-prose ul, .hm-prose ol { padding-left: 1.4rem; margin: 0 0 1em; }
.hm-prose blockquote { margin: 0 0 1em; padding-left: 1rem; border-left: 3px solid var(--ht-line); color: var(--ht-fg-muted); }
.hm-content { max-width: 48rem; }
.hm-content__headline { margin-bottom: 0.75em; }

/* essay: sticky aside + long-form prose column. */
.hm-content--essay { max-width: var(--hm-container); display: grid; grid-template-columns: 16rem minmax(0, 44rem); gap: 3rem 5rem; align-items: start; }
.hm-content--essay .hm-content__aside { position: sticky; top: 6rem; }
.hm-content__glyph { display: block; font-family: var(--hm-font-kanji); font-size: 3.5rem; line-height: 1; color: var(--hm-shu); margin-bottom: 1rem; }
.hm-content__aside-text { margin: 0; font-family: var(--hm-font-mono); font-size: 0.8125rem; line-height: 1.6; color: var(--hm-hai); }
.hm-content__eyebrow { margin: 0 0 1rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-content--essay .hm-prose { font-size: 1.0625rem; line-height: 1.7; }
.hm-content--essay .hm-prose h3 { margin: 2em 0 0.5em; font-size: 1.25rem; }
.hm-content--essay .hm-prose code { padding: 0.1em 0.35em; border-radius: var(--hm-radius-sm); background: var(--hm-kasumi); font-size: 0.9em; }
@media (max-width: 960px) {
  .hm-content--essay { grid-template-columns: minmax(0, 1fr); }
  .hm-content--essay .hm-content__aside { display: none; }
}

.hm-cta { text-align: center; padding-top: 1rem; padding-bottom: 1rem; }
.hm-cta__headline { max-width: 20ch; margin-inline: auto; }
.hm-cta__subheadline { max-width: 52ch; margin: 1rem auto 0; font-size: 1.0625rem; color: var(--hm-hai); }
.hm-cta__actions { margin: 1.25rem 0 0; }
.hm-cta--tinted { background: var(--ht-surface-2); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); padding: 3.5rem 1.5rem; }
.hm-cta--dark { background: var(--hm-sumi); color: #fff; border-radius: var(--hm-radius-lg); padding: 3.5rem 1.5rem; }
.hm-cta--dark h2 { color: #fff; }
.hm-cta--dark .hm-cta__subheadline { color: rgba(255, 255, 255, 0.8); }

.hm-faq { max-width: 48rem; }
.hm-faq__subheading { color: var(--ht-fg-muted); }
.hm-faq__item { border-bottom: 1px solid var(--ht-line); padding: 0.9rem 0; }
.hm-faq__question { cursor: pointer; font-weight: 500; }
.hm-faq__answer { margin-top: 0.6rem; color: var(--ht-fg-muted); }
.hm-faq--cards .hm-faq__list { display: grid; gap: 0.75rem; }
.hm-faq--cards .hm-faq__item { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 0.9rem 1.1rem; }

.hm-features__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-features__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-features__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hm-hair); border: 1px solid var(--hm-hair); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.hm-features--cols-2 .hm-features__list { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
@media (min-width: 48rem) {
  .hm-features--cols-2 .hm-features__list { grid-template-columns: repeat(2, 1fr); }
  .hm-features--cols-3 .hm-features__list { grid-template-columns: repeat(3, 1fr); }
  .hm-features--cols-4 .hm-features__list { grid-template-columns: repeat(4, 1fr); }
}
.hm-features__item { background: var(--hm-bg); padding: 1.75rem 1.75rem 2rem; }
.hm-features__item:hover { background: var(--hm-shiro); }
.hm-features__icon { display: inline-block; font-size: 1.75rem; line-height: 1; margin-bottom: 0.75rem; }
.hm-features__title { margin-bottom: 0.35em; }
.hm-features__description { color: var(--ht-fg-muted); margin-bottom: 0.75em; }
.hm-features__link { font-weight: 600; }

.hm-features--centered .hm-features__header, .hm-features--centered .hm-features__item { text-align: center; }
.hm-features--centered .hm-features__header { margin-left: auto; margin-right: auto; }

/* bento: framed cells with number, category, description and a tag footer. */
.hm-features--bento .hm-features__list { border-radius: var(--hm-radius-lg); overflow: hidden; }
.hm-features--bento .hm-features__item { min-height: 236px; display: flex; flex-direction: column; gap: 0.5rem; position: relative; }
.hm-features--bento .hm-features__number { font-family: var(--hm-font-mono); font-size: 0.75rem; color: var(--hm-label); }
.hm-features--bento .hm-features__category { font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-features--bento .hm-features__badge { position: absolute; top: 1.25rem; right: 1.25rem; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--hm-hair); background: var(--hm-kasumi); font-family: var(--hm-font-mono); font-size: 0.6875rem; color: var(--hm-hai); }
.hm-features__tags { margin-top: auto; padding-top: 1rem; font-family: var(--hm-font-mono); font-size: 0.75rem; color: var(--hm-hai); }

/* hero — also defines .hm-btn--secondary, reused by other sections. */
.hm-btn--secondary { background: var(--hm-bg); color: var(--hm-text); border-color: var(--hm-hair); }
.hm-btn--secondary:hover { border-color: var(--hm-text); filter: none; }
.hm-hero { display: grid; gap: 3.5rem; align-items: center; }
.hm-section--hero { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 0; }
.hm-hero__headline { max-width: 16ch; margin: 0; }
.hm-hero--centered { text-align: center; justify-items: center; }
.hm-hero--centered .hm-hero__body { max-width: 48rem; }
.hm-hero--centered .hm-hero__headline { margin-inline: auto; }
.hm-hero--split { grid-template-columns: 1fr 1fr; }
.hm-hero__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-hero__subheadline { max-width: 68ch; margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.6; color: var(--hm-hai); }
.hm-hero--centered .hm-hero__subheadline { margin-inline: auto; }
.hm-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; align-items: center; }
.hm-hero--centered .hm-hero__actions { justify-content: center; }
.hm-hero__image { display: block; width: 100%; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); }
@media (max-width: 48rem) { .hm-hero--split { grid-template-columns: 1fr; } }

.hm-hero__chip { display: inline-block; margin-top: 1.25rem; padding: 0.4rem 0.75rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-sm); background: var(--hm-kasumi); font-size: 0.8125rem; color: var(--hm-sumi-soft); }
.hm-hero__media--panel { min-width: 0; text-align: left; }

/* optional strip (stripLabel + stripItems): label on its own row, items wrapping under it. */
.hm-hero__strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 2rem; }
.hm-hero--centered .hm-hero__strip { justify-content: center; }
.hm-hero__strip-label { flex: 0 0 100%; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-hero__strip-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.hm-hero--centered .hm-hero__strip-items { justify-content: center; }
.hm-hero__strip-items li { font-size: 0.9375rem; color: var(--hm-text); }

.hm-html-body { overflow-wrap: anywhere; }
.hm-html-body > :last-child { margin-bottom: 0; }
.hm-html-body details { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 0.75rem 1rem; margin: 0 0 0.75rem; }
.hm-html-body summary { cursor: pointer; font-weight: 600; }
/* Bespoke html blocks that bring their own full-width section chrome: avoid doubling the band padding and rule. */
.hm-section--html:has(> .hm-container > .hm-html-body > section:only-child) { padding-block: 0; border-top: 0; }
.hm-section--html:has(> .hm-container > .hm-html-body > section:only-child) > .hm-container { max-width: none; padding: 0; }

.hm-link-directory__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-link-directory__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-link-directory__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-link-directory__columns { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.hm-link-directory__column-heading { font-size: 1rem; margin-bottom: 0.75rem; }
.hm-link-directory__links { list-style: none; margin: 0; padding: 0; }
.hm-link-directory__links li { margin: 0.35rem 0; }

.hm-logo-strip__heading { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); text-align: center; margin-bottom: 1.5rem; }
.hm-logo-strip__viewport { display: flex; overflow: hidden; }
.hm-logo-strip__track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 3rem; flex: 1 0 auto; }
.hm-logo-strip__item img { display: block; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: opacity 0.15s, filter 0.15s; }
.hm-logo-strip__item img:hover { filter: none; opacity: 1; }
.hm-logo-strip__item--sm img { height: 1.5rem; }
.hm-logo-strip__item--md img { height: 2.25rem; }
.hm-logo-strip__item--lg img { height: 3.25rem; }
/* Marquee: two identical tracks slide left by their own width, looping seamlessly. */
.hm-logo-strip--marquee .hm-logo-strip__track { flex-wrap: nowrap; justify-content: space-around; padding-right: 3rem; animation: hm-logo-marquee 40s linear infinite; }
.hm-logo-strip--marquee .hm-logo-strip__viewport:hover .hm-logo-strip__track { animation-play-state: paused; }
@keyframes hm-logo-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .hm-logo-strip--marquee .hm-logo-strip__track { animation: none; flex-wrap: wrap; padding-right: 0; }
  .hm-logo-strip__track--clone { display: none; }
}

.hm-overview { display: grid; gap: 2.5rem; align-items: center; }
.hm-overview--with-image { grid-template-columns: 1fr 1fr; }
.hm-overview__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-overview__subheading { font-size: 1.15rem; color: var(--ht-fg-muted); }
.hm-overview__items { margin: 1rem 0 0; padding-left: 1.2rem; }
.hm-overview__item + .hm-overview__item { margin-top: 0.35rem; }
.hm-overview__image { display: block; width: 100%; border-radius: var(--hm-radius-lg); }
@media (max-width: 48rem) { .hm-overview--with-image { grid-template-columns: 1fr; } }

.hm-container.hm-plugin-directory { padding-block: clamp(4rem, 8vw, 7rem); }
.hm-section--plugin_directory > .hm-container.hm-plugin-directory { padding-block: 0; }
.hm-plugin-directory__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-plugin-directory__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-plugin-directory__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-plugin-directory__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.hm-plugin-directory__btn--ghost { background: transparent; color: var(--hm-text); border-color: var(--ht-line); }
.hm-plugin-directory__tools { margin-bottom: 1.5rem; }
.hm-plugin-directory__search { width: 100%; max-width: 32rem; padding: 0.6rem 0.75rem; font: inherit; color: inherit; background: var(--hm-bg); border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); }
.hm-plugin-directory__count { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--ht-fg-muted); }
.hm-plugin-directory__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hm-hair); border: 1px solid var(--hm-hair); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.hm-plugin-directory__card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.75rem 1.75rem 2rem; background: var(--hm-bg); }
.hm-plugin-directory__card:hover { background: var(--hm-shiro); }
.hm-plugin-directory__card[hidden], .hm-plugin-directory__search[hidden], .hm-plugin-directory__count[hidden] { display: none; }
.hm-plugin-directory__title { margin: 0; font-size: 1.125rem; }
.hm-plugin-directory__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-plugin-directory__tier { padding: 0.1rem 0.5rem; border: 1px solid var(--hm-hair); border-radius: 999px; background: var(--hm-shiro); }
.hm-plugin-directory__author { margin: 0; font-size: 0.875rem; color: var(--ht-fg-muted); }
.hm-plugin-directory__description { margin: 0; color: var(--ht-fg-muted); }
.hm-plugin-directory__needs { margin: 0; font-family: var(--hm-font-mono); font-size: 0.75rem; color: var(--hm-label); }
.hm-plugin-directory__source { margin-top: auto; font-size: 0.875rem; font-weight: 500; }
.hm-plugin-directory__state { padding: 1.5rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); background: var(--hm-shiro); color: var(--ht-fg-muted); }
.hm-plugin-directory__hint { margin: 1.5rem 0 0; font-family: var(--hm-font-mono); font-size: 0.8125rem; color: var(--hm-label); }

.hm-pricing__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-pricing__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-pricing__tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: stretch; }
.hm-pricing__tier { position: relative; display: flex; flex-direction: column; border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.75rem; background: var(--ht-surface); }
.hm-pricing__tier--popular { border-color: var(--hm-text); box-shadow: 0 0 0 1px var(--hm-text); }
.hm-pricing__badge { align-self: flex-start; background: var(--hm-text); color: var(--hm-bg); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.6rem; border-radius: 999px; margin-bottom: 0.75rem; }
.hm-pricing__description { color: var(--ht-fg-muted); }
.hm-pricing__price { margin: 0.5rem 0 1.25rem; }
.hm-pricing__amount { font-family: var(--hm-font-heading); font-size: 2.5rem; font-weight: 450; letter-spacing: -0.04em; }
.hm-pricing__currency { font-size: 1.25rem; font-weight: 600; margin-right: 0.1rem; vertical-align: 0.6em; }
.hm-pricing__period { color: var(--ht-fg-muted); margin-left: 0.15rem; }
.hm-pricing__features { list-style: none; margin: 0 0 1.5rem; padding: 0; flex: 1; }
.hm-pricing__feature { padding: 0.3rem 0 0.3rem 1.5rem; position: relative; }
.hm-pricing__feature::before { content: "\2713"; position: absolute; left: 0; font-weight: 700; }
.hm-pricing__feature--excluded { color: var(--ht-fg-muted); text-decoration: line-through; }
.hm-pricing__feature--excluded::before { content: "\2715"; }
.hm-pricing__cta { text-align: center; }
.hm-pricing--table .hm-pricing__tiers { grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .hm-pricing--table .hm-pricing__tier { display: grid; grid-template-columns: 1.2fr 1fr 2fr auto; gap: 0 1.5rem; align-items: center; }
  .hm-pricing--table .hm-pricing__price, .hm-pricing--table .hm-pricing__features { margin: 0; }
  .hm-pricing--table .hm-pricing__badge { grid-column: 1 / -1; }
}

.hm-process { max-width: 52rem; }
.hm-process__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-process__subheading { color: var(--ht-fg-muted); }
.hm-process__steps { list-style: none; counter-reset: hm-step; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.hm-process__step { counter-increment: hm-step; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; }
.hm-process__marker {
  display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; min-width: 2.5rem; padding: 0 0.4rem;
  border-radius: 999px; border: 1px solid var(--hm-hair); background: var(--hm-bg); color: var(--hm-text); font-family: var(--hm-font-mono); font-size: 0.8125rem; font-weight: 500;
}
.hm-process__marker:empty::before { content: counter(hm-step); }
.hm-process__title { margin-bottom: 0.25rem; }
.hm-process__description { color: var(--ht-fg-muted); }

/* cards: adds a command box per step; keeps the .hm-container width cap like every other section. */
.hm-process--cards { max-width: var(--hm-container); }
.hm-process--cards .hm-process__steps { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1px; background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); overflow: hidden; }
.hm-process--cards .hm-process__step { display: block; background: var(--hm-bg); padding: 1.75rem; }
.hm-process--cards .hm-process__marker { margin-bottom: 1rem; border-radius: var(--hm-radius-sm); }
.hm-process--cards .hm-code { margin-top: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); background: var(--hm-kasumi); }

.hm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 5rem; align-items: start; }
.hm-split--wide-code { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hm-split--text-right .hm-split__text { order: 2; }
.hm-split__heading { margin: 0 0 1rem; font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.hm-split__lede { color: var(--ht-fg-muted); font-size: 1.0625rem; line-height: 1.65; margin-bottom: 1.5rem; }
.hm-split__defs { margin: 0 0 1.5rem; border-top: 1px solid var(--hm-hair); }
.hm-split__defs > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--hm-hair); }
.hm-split__defs dt { font-family: var(--hm-font-mono); font-size: 0.8125rem; color: var(--hm-text); }
.hm-split__defs dd { margin: 0; color: var(--ht-fg-muted); }
.hm-split__chips { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); overflow: hidden; }
.hm-split__chips li { background: var(--hm-bg); padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.hm-split__chip { font-size: 0.8125rem; color: var(--hm-text); }
.hm-split__caption { font-size: 0.8125rem; color: var(--hm-hai); }
.hm-split__footnote { font-size: 0.9375rem; color: var(--hm-hai); }
.hm-split__footnote code, .hm-split__lede code { padding: 0.1em 0.35em; border-radius: var(--hm-radius-sm); background: var(--hm-kasumi); font-size: 0.9em; }
/* panelHeight: match — panel column stretches to the text column; the code panel grows, outputs sit at the bottom. */
@media (min-width: 961px) {
  .hm-split--match { align-items: stretch; }
  .hm-split--match .hm-split__text > :last-child { margin-bottom: 0; }
  .hm-split--match .hm-split__panel { display: flex; flex-direction: column; min-width: 0; }
  .hm-split--match .hm-split__panel > .hm-frame { flex: 1 1 auto; display: flex; flex-direction: column; }
  .hm-split--match .hm-split__panel > .hm-frame > .hm-code { flex: 1 1 auto; }
  .hm-split--match .hm-split__panel > .hm-outs:first-child { margin-top: auto; }
}
@media (max-width: 960px) {
  .hm-split, .hm-split--wide-code { grid-template-columns: minmax(0, 1fr); }
  .hm-split--text-right .hm-split__text { order: 0; }
}

.hm-stats__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-stats__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-stats__list { display: grid; gap: 1.5rem; margin: 0; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
@media (min-width: 48rem) {
  .hm-stats--cols-2 .hm-stats__list { grid-template-columns: repeat(2, 1fr); }
  .hm-stats--cols-3 .hm-stats__list { grid-template-columns: repeat(3, 1fr); }
  .hm-stats--cols-4 .hm-stats__list { grid-template-columns: repeat(4, 1fr); }
}
.hm-stats__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.25rem; }
.hm-stats__value { margin: 0; display: flex; flex-direction: column; }
.hm-stats__number { font-family: var(--hm-font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 450; line-height: 1.1; letter-spacing: -0.05em; }
.hm-stats__label { color: var(--hm-label); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.hm-stats__description { color: var(--ht-fg-muted); font-size: 0.9rem; }
.hm-stats--cards .hm-stats__item { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.5rem; background: var(--ht-surface-2); }
.hm-stats--bordered .hm-stats__item { border-left: 1px solid var(--hm-text); padding-left: 1rem; }

.hm-sticky-sidebar { display: grid; gap: 2rem; }
.hm-sticky-sidebar__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-sticky-sidebar__aside { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.5rem; background: var(--ht-surface-2); align-self: start; }
.hm-sticky-sidebar__facts { margin: 0 0 1.25rem; }
.hm-sticky-sidebar__fact { padding: 0.5rem 0; border-bottom: 1px solid var(--ht-line); }
.hm-sticky-sidebar__fact dt { font-size: 0.85rem; color: var(--ht-fg-muted); }
.hm-sticky-sidebar__fact dd { margin: 0; font-weight: 600; }
.hm-sticky-sidebar__cta { display: block; text-align: center; }
@media (min-width: 60rem) {
  .hm-sticky-sidebar { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; }
  .hm-sticky-sidebar__aside { position: sticky; top: 1.5rem; }
}

.hm-section--tag_strip { padding: 1.75rem 0; }
.hm-tag-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.hm-tag-strip__label { font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-tag-strip__items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0; }
.hm-tag-strip__items li { padding: 0 1.25rem; border-left: 1px solid var(--hm-hair); font-size: 0.9375rem; color: var(--hm-text); }
.hm-tag-strip__items li:first-child { padding-left: 0; border-left: 0; }

.hm-team__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-team__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-team__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
@media (min-width: 48rem) {
  .hm-team--cols-2 .hm-team__list { grid-template-columns: repeat(2, 1fr); }
  .hm-team--cols-3 .hm-team__list { grid-template-columns: repeat(3, 1fr); }
  .hm-team--cols-4 .hm-team__list { grid-template-columns: repeat(4, 1fr); }
}
.hm-team__photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--hm-radius-md); margin-bottom: 1rem; }
.hm-team__name { margin-bottom: 0.15em; }
.hm-team__title { color: var(--ht-fg-muted); margin-bottom: 0.5em; }
.hm-team__bio { font-size: 0.95rem; }
.hm-team__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.9rem; }
.hm-team--cards .hm-team__member { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.25rem; background: var(--ht-surface); }
.hm-team--centered .hm-team__member, .hm-team--centered .hm-team__header { text-align: center; }
.hm-team--centered .hm-team__header { margin-left: auto; margin-right: auto; }
.hm-team--centered .hm-team__photo { width: 8rem; height: 8rem; border-radius: 50%; margin-left: auto; margin-right: auto; }
.hm-team--centered .hm-team__social { justify-content: center; }
.hm-team--simple .hm-team__photo { display: none; }

.hm-testimonials__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-testimonials__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-testimonials__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.hm-testimonials__item { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.5rem; background: var(--ht-surface); }
.hm-testimonials__figure { margin: 0; display: flex; flex-direction: column; height: 100%; }
.hm-testimonials__rating { margin: 0 0 0.75rem; letter-spacing: 0.05em; }
.hm-testimonials__quote { margin: 0 0 1.25rem; flex: 1; font-size: 1.05rem; color: var(--hm-text); }
.hm-testimonials__author { display: flex; align-items: center; gap: 0.75rem; }
.hm-testimonials__avatar { border-radius: 50%; object-fit: cover; flex: none; }
.hm-testimonials__person { display: flex; flex-direction: column; line-height: 1.3; }
.hm-testimonials__role { color: var(--ht-fg-muted); font-size: 0.9rem; }
.hm-testimonials--featured .hm-testimonials__list { grid-template-columns: 1fr; max-width: 48rem; margin: 0 auto; }
.hm-testimonials--featured .hm-testimonials__item { border: 0; background: transparent; padding: 1rem 0; text-align: center; }
.hm-testimonials--featured .hm-testimonials__quote { font-size: 1.5rem; font-family: var(--hm-font-heading); line-height: 1.35; }
.hm-testimonials--featured .hm-testimonials__author { justify-content: center; text-align: left; }

.hm-theme-directory__shot { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.hm-plugin-directory__other { display: inline-block; margin-top: 1rem; font-size: 0.875rem; font-weight: 500; }
.hm-section--theme_directory > .hm-container.hm-plugin-directory { padding-block: 0; }

.hm-value-proposition { max-width: 44rem; text-align: center; }
.hm-value-proposition__paragraph { font-size: 1.2rem; color: var(--ht-fg-muted); margin-bottom: 0; }