/* 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; }
picture { display: contents; }

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

/* Menu item styling declared in theme.json ("menu"). Classes sit on the link, the
   plain-text span or the footer heading; :is() keeps them above the list rules. */
.hm-nav__list :where(li) > span { display: block; padding: 0.35rem 0.5rem; color: var(--hm-hai); }
:is(a, span, p).hm-nav__item--default { font-weight: 400; }
:is(a, span, p).hm-nav__item--button {
  display: inline-block; padding: 0.4rem 0.9rem; border-radius: var(--hm-radius-sm);
  background: var(--hm-primary); color: var(--hm-bg); font-weight: 500;
}
.hm-nav__sub .hm-nav__item--button { margin-top: 0.25rem; }
:is(a, span, p).hm-nav__item--button:hover { background: var(--hm-shu-dark); color: var(--hm-bg); }
:is(a, span, p).hm-nav__item--link { text-decoration: underline; text-underline-offset: 0.2em; }
:is(a, span, p).hm-nav__item--muted { color: var(--hm-label); font-weight: 400; }
:is(a, span, p).hm-nav-color--accent { color: var(--hm-primary); }
:is(a, span, p).hm-nav-color--ink { color: var(--hm-text); }
:is(a, span, p).hm-nav-color--muted { color: var(--hm-label); }
:is(a, span, p).hm-nav-color--danger { color: var(--hm-shu-dark); }
/* A button keeps its fill: a colour class on a button recolours the fill (never the text, which
   would match the primary fill) and the label is white on the red fills, the page background on ink and muted (both flip with the dark set). */
:is(a, span, p).hm-nav__item--button.hm-nav-color--accent { background: var(--hm-primary); color: #ffffff; }
:is(a, span, p).hm-nav__item--button.hm-nav-color--ink { background: var(--hm-text); color: var(--hm-bg); }
:is(a, span, p).hm-nav__item--button.hm-nav-color--muted { background: var(--hm-label); color: var(--hm-bg); }
:is(a, span, p).hm-nav__item--button.hm-nav-color--danger { background: var(--hm-shu-dark); color: #ffffff; }
/* The plain button darkens on hover (rule above); a coloured one has the same specificity and comes later, so it needs its own hover. */
:is(a, span, p).hm-nav__item--button[class*="hm-nav-color--"]:hover { filter: brightness(0.9); }
.hm-nav__badge {
  display: inline-block; margin-left: 0.35em; padding: 0 0.4em; border: 1px solid var(--hm-hair);
  border-radius: var(--hm-radius-sm); font-size: 0.6875rem; font-weight: 500; line-height: 1.5; vertical-align: middle;
}
.hm-nav__badge--new { background: var(--hm-primary); border-color: var(--hm-primary); color: var(--hm-bg); }
.hm-nav__badge--beta { color: var(--hm-hai); }
.hm-nav__list [data-icon]::after, .hm-footer [data-icon]::after, .hm-menu [data-icon]::after {
  content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 0.3em; vertical-align: -0.1em;
  background: currentColor; mask: var(--hm-menu-icon) center / contain no-repeat;
}
[data-icon="arrow"] { --hm-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
[data-icon="external"] { --hm-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6'/%3E%3C/svg%3E"); }
[data-icon="doc"] { --hm-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 3h8l4 4v14H6zM14 3v4h4'/%3E%3C/svg%3E"); }
@media (max-width: 47.99rem) { li:has(> .hm-show-desktop), .hm-show-desktop { display: none; } }
@media (min-width: 48rem) { li:has(> .hm-show-mobile), .hm-show-mobile { display: none; } }

/* 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 li + li[data-sep]::before { content: attr(data-sep); }
.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; }
}

/* Hearth: the theme's own stylesheet.
   The engine bundles assets/css/base.css, then every other assets/css/*.css
   (sorted), then assets/css/sections/*.css, across the theme AND the built-in
   default theme it falls back to. So this file restyles the default's markup
   (hm-* classes) and styles this theme's own (ht-* classes). Section rules are
   prefixed with .ht-body so they win over the default's later-loading section
   sheets. Only --hm-* tokens for colour, type and radius, so Theme > Colours and
   fonts keeps working; fonts are self-hosted in assets/fonts/. */

/* Figtree, OFL-1.1, self-hosted (assets/fonts/figtree/LICENSE.txt) */
@font-face { font-family: "Figtree"; src: url("/theme/assets/fonts/figtree/figtree-latin-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/theme/assets/fonts/figtree/figtree-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/theme/assets/fonts/figtree/figtree-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/theme/assets/fonts/figtree/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/theme/assets/fonts/figtree/figtree-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/theme/assets/fonts/figtree/figtree-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/theme/assets/fonts/figtree/figtree-latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/theme/assets/fonts/figtree/figtree-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* ---- palette (light) ---- */
  --hm-primary: #bb432a;          /* terracotta, 4.6:1 on the paper; the owner's primary replaces it */
  --hm-bg: #f2eee7;               /* paper */
  --hm-text: #2f2f2f;
  --ht-primary: var(--hm-primary); /* what the theme paints with; dark mode lightens the owner's primary instead of replacing it */
  --ht-muted: #5c5852;
  --ht-line: #d9d2c7;
  --ht-surface: #fbf9f5;
  --ht-on-primary: #ffffff;
  --ht-foot-a: #c44b2c;
  --ht-foot-b: #a63a25;
  --ht-band: #2a2724;             /* dark feature band */
  --ht-band-ink: #f4efe7;
  --ht-band-kicker: #f0a48f;
  --ht-scrim: rgba(20, 18, 16, .62);
  /* the default theme's names, so its sections follow this palette */
  --hm-sumi: var(--hm-text);
  --hm-sumi-soft: var(--ht-muted);
  --hm-hai: var(--ht-muted);
  --hm-label: var(--ht-muted);
  --hm-hair: var(--ht-line);
  --hm-shiro: var(--ht-surface);
  --hm-kasumi: var(--ht-surface);
  --hm-kinu: var(--ht-line);
  --hm-shu: var(--ht-primary);
  --hm-shu-dark: var(--ht-primary);
  --hm-focus: var(--hm-text);       /* ink on paper; the dark bands and footer override it below */

  /* ---- type ---- */
  --hm-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hm-font-heading: var(--hm-font);
  --ht-fs-display: clamp(2.6rem, 6vw, 4rem);
  --ht-fs-h2: clamp(1.9rem, 3.6vw, 2.75rem);
  --ht-fs-lead: 1.25rem;

  /* ---- shape and rhythm ---- */
  --hm-radius-sm: 6px;
  --hm-radius-md: 12px;
  --hm-radius-lg: 20px;
  --ht-pill: 999px;
  --hm-container: 76rem;
  --ht-gap: clamp(1.25rem, 4vw, 3rem);
  --ht-section: clamp(3.5rem, 7vw, 6rem);
}

:root[data-theme="dark"] {
  --hm-bg: #1c1a18;
  --hm-text: #f0ebe3;
  --ht-muted: #b3aca2;
  --ht-line: #3b3632;
  --ht-surface: #262320;
  --ht-on-primary: #1c1a18;
  --hm-focus: var(--hm-text);
  --ht-primary: color-mix(in srgb, var(--hm-primary) 70%, white);
  --ht-band: #131110;
  --ht-foot-a: #8f3322;
  --ht-foot-b: #6e271a;
  --ht-scrim: rgba(10, 9, 8, .68);
  color-scheme: dark;
}

[data-ht-density="compact"] { --ht-section: clamp(2.5rem, 6vw, 4.5rem); }

/* ---- base type ---- */
html { scroll-padding-top: 5rem; }
body { font-size: 1.0625rem; font-weight: 400; }
.ht-body .hm-prose, .ht-body .hm-html-body { color: var(--ht-muted); font-weight: 300; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.08; letter-spacing: -.02em; }
h1 { font-size: var(--ht-fs-display); line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: var(--ht-fs-h2); line-height: 1.08; }
h3 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.015em; }
a { text-underline-offset: .25em; }
.hm-section { padding-block: var(--ht-section); border-top: 0; }

/* ---- shared helpers ---- */
.ht-wrap { width: min(100% - 2 * var(--ht-gap), var(--hm-container)); margin-inline: auto; }
.ht-pill, .ht-body .hm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.5rem; padding: .35rem 1.35rem;
  border: 1px solid var(--ht-primary); border-radius: var(--ht-pill); background: transparent; color: var(--ht-primary);
  font: 500 .8125rem/1.2 var(--hm-font); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.ht-pill:hover, .ht-body .hm-btn:hover { background: var(--ht-primary); color: var(--ht-on-primary); filter: none; }
.ht-body .hm-btn--secondary { border-color: var(--ht-line); color: var(--hm-text); }
.ht-body .hm-btn--secondary:hover { background: var(--hm-text); border-color: var(--hm-text); color: var(--hm-bg); }
.ht-arrow {
  display: inline-grid; place-items: center; flex: none; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid currentColor;
  border-radius: 50%; color: inherit; font-size: 1rem; line-height: 1; text-decoration: none; transition: background .15s, color .15s;
}
.ht-arrow svg { inline-size: 1rem; block-size: 1rem; }
a:hover > .ht-arrow, a.ht-arrow:hover { background: var(--ht-primary); border-color: var(--ht-primary); color: var(--ht-on-primary); }

/* ---- containers ---- */
.ht-body .hm-container { width: min(100% - 2 * var(--ht-gap), var(--hm-container)); max-width: none; padding-inline: 0; }
.ht-body .hm-article { max-width: 46rem; }
.ht-body .hm-article__image { margin-inline: 0; }

/* ---- hero ---- */
.ht-body .hm-section--hero { position: relative; padding-block: 0; }
.ht-body .hm-hero { position: relative; gap: 0; }
.ht-body .hm-hero__headline { max-width: 12em; font-size: var(--ht-fs-display); }
.ht-body .hm-hero__eyebrow { margin-bottom: 1.25rem; color: var(--ht-primary); font-size: .8125rem; font-weight: 500; letter-spacing: .14em; }
.ht-body .hm-hero__subheadline { max-width: 32em; margin-top: 1.5rem; color: var(--ht-muted); font-size: 1.1875rem; font-weight: 300; }
.ht-body .hm-hero__subheadline > :last-child { margin-bottom: 0; }
.ht-body .hm-hero__actions { gap: 1rem; margin-top: 2rem; }
.ht-body .hm-hero__actions .hm-btn--secondary { border-color: transparent; padding-inline: .5rem; background: none; }
.ht-body .hm-hero__actions .hm-btn--secondary:hover { background: none; color: var(--ht-primary); text-decoration: underline; }
.ht-hero__down { color: var(--ht-primary); inline-size: 2.75rem; block-size: 2.75rem; }
.ht-hero__end { display: block; block-size: 0; }
.ht-body .hm-hero__image { border: 0; border-radius: var(--hm-radius-lg); }
.ht-body .hm-hero--split { width: 100%; grid-template-columns: 1fr 1fr; min-height: min(44rem, 80vh); }
.ht-body .hm-hero--split .hm-hero__media { order: -1; align-self: stretch; min-width: 0; }
.ht-body .hm-hero--split .hm-hero__image { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 0; }
.ht-body .hm-hero--split .hm-hero__body { align-self: center; padding: clamp(3rem, 7vw, 6rem) var(--ht-gap); max-width: 44rem; }
.ht-body .hm-hero--centered { padding-block: clamp(4rem, 9vw, 7rem); }
.ht-house { position: absolute; z-index: 2; left: 36%; bottom: 0; inline-size: auto; block-size: 9.5rem; color: var(--ht-primary); opacity: .8; pointer-events: none; }
@media (max-width: 60rem) {
  .ht-body .hm-hero--split { grid-template-columns: 1fr; min-height: 0; }
  .ht-body .hm-hero--split .hm-hero__image { aspect-ratio: 16 / 10; block-size: auto; }
  .ht-body .hm-hero--split .hm-hero__body { max-width: none; padding-block: 2.5rem 3.5rem; }
  .ht-house { display: none; }
}

/* ---- logo strip ---- */
.ht-body .hm-section--logo_strip { padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.ht-body .hm-logo-strip__heading { color: var(--ht-muted); font-size: .8125rem; font-weight: 500; letter-spacing: .14em; }
.ht-body .hm-logo-strip__item img { opacity: .7; }
.ht-body .hm-logo-strip--static .hm-logo-strip__track { flex: 1 1 auto; min-width: 0; }

/* ---- features: a dark band of hairline rows ---- */
.ht-body .hm-section--features { margin-block-start: var(--ht-section); background: radial-gradient(ellipse at 75% 30%, rgba(217, 180, 138, .18), transparent 45%), var(--ht-band); color: var(--ht-band-ink); }
.ht-body .hm-features__heading, .ht-body .hm-section--features .hm-section-head__heading { color: var(--ht-band-ink); }
.ht-body .hm-features__header { max-width: 44rem; }
.ht-body .hm-features__subheading { color: var(--ht-band-kicker); }
.ht-body .hm-features .hm-features__list { grid-template-columns: 1fr; gap: 0 3rem; border: 0; background: none; }
@media (min-width: 48rem) { .ht-body .hm-features .hm-features__list { grid-template-columns: repeat(2, 1fr); } }
.ht-body .hm-features__item { position: relative; min-height: 0; padding: 1.5rem 4rem 1.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, .4); background: none; text-align: left; }
.ht-body .hm-features__item:hover { background: none; }
.ht-body .hm-features__title { color: var(--ht-band-ink); font-size: 1.25rem; }
.ht-body .hm-features__description { margin: 0; color: #d9d2c7; font-size: .9375rem; font-weight: 300; }
.ht-body .hm-features__icon { color: var(--ht-band-kicker); }
.ht-body .hm-features__link { position: absolute; inset-inline-end: 0; top: 50%; translate: 0 -50%; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid currentColor; border-radius: 50%; color: var(--ht-band-ink); font-size: 0; line-height: 0; text-decoration: none; transition: background .15s, color .15s; }
.ht-body .hm-features__link::before { content: "\2192"; font-size: 1rem; line-height: 1; }
.ht-body .hm-features__link::after { content: ""; position: absolute; inset: -2rem -60rem -2rem -60rem; }
.ht-body .hm-features__link:focus-visible { outline-offset: -2px; }
.ht-body .hm-features__link:hover { background: var(--ht-band-ink); color: var(--ht-band); }
.ht-body .hm-features__item:has(.hm-features__link) { overflow: hidden; }
.ht-body .hm-features--bento .hm-features__item { display: block; }
.ht-body .hm-features--bento .hm-features__badge { background: none; color: var(--ht-band-ink); border-color: rgba(255, 255, 255, .5); }
.ht-body .hm-features__tags, .ht-body .hm-features--bento .hm-features__number, .ht-body .hm-features--bento .hm-features__category { color: var(--ht-band-kicker); }
.ht-body .hm-section--features .hm-section-head__eyebrow, .ht-body .hm-section--features .hm-section-head__subheading { color: var(--ht-band-kicker); }

/* ---- stats ---- */
.ht-body .hm-stats__header { margin-bottom: 1.5rem; }
.ht-body .hm-stats__subheading, .ht-body .hm-process__subheading, .ht-body .hm-faq__subheading, .ht-body .hm-testimonials__subheading { color: var(--ht-primary); font-size: 1.375rem; font-weight: 400; }
.ht-body .hm-stats__list { gap: 0; border-top: 1px solid var(--ht-line); }
.ht-body .hm-stats .hm-stats__item { padding: 2rem 1.5rem 0 0; border: 0; border-radius: 0; background: none; }
.ht-body .hm-stats__number { color: var(--ht-primary); font-size: clamp(2.75rem, 5vw, 3.5rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.ht-body .hm-stats__label { color: var(--ht-muted); font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.ht-body .hm-stats__description { color: var(--ht-muted); }

/* ---- process: hairline rows ---- */
.ht-body .hm-process { max-width: none; }
.ht-body .hm-process__eyebrow { color: var(--ht-primary); font-size: .8125rem; font-weight: 500; letter-spacing: .14em; }
.ht-body .hm-process__steps { gap: 0; margin-top: 2rem; border-top: 1px solid var(--ht-line); }
.ht-body .hm-process__step { grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 2fr); align-items: center; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--ht-line); }
.ht-body .hm-process__content { display: contents; }
.ht-body .hm-process__marker { inline-size: 3rem; block-size: 3rem; padding: 0; border-color: var(--ht-primary); background: none; color: var(--ht-primary); font-family: var(--hm-font); font-size: .875rem; font-weight: 500; }
.ht-body .hm-process__title { margin: 0; font-size: 1.5rem; }
.ht-body .hm-process__description { color: var(--ht-muted); font-weight: 300; }
.ht-body .hm-process__description > :last-child { margin-bottom: 0; }
.ht-body .hm-process--cards .hm-process__steps { gap: 1px; border: 1px solid var(--ht-line); background: var(--ht-line); }
.ht-body .hm-process--cards .hm-process__step { display: block; padding: 1.75rem; background: var(--hm-bg); }
.ht-body .hm-process--cards .hm-process__marker { margin-bottom: 1rem; }
.ht-body .hm-process--cards .hm-process__title { margin-bottom: .5rem; }
@media (max-width: 48rem) {
  .ht-body .hm-process__step { grid-template-columns: 3rem minmax(0, 1fr); gap: .25rem 1rem; }
  .ht-body .hm-process__description { grid-column: 2; }
}

/* ---- testimonials: hairline columns ---- */
.ht-body .hm-testimonials__list { gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.ht-body .hm-testimonials__item { padding: 1.5rem 0 0; border: 0; border-top: 1px solid var(--ht-line); border-radius: 0; background: none; }
.ht-body .hm-testimonials__rating { color: var(--ht-muted); font-size: .875rem; }
.ht-body .hm-testimonials__quote { font-size: 1.25rem; font-weight: 400; line-height: 1.45; }
.ht-body .hm-testimonials__role { color: var(--ht-muted); }
.ht-body .hm-testimonials--featured .hm-testimonials__item { border-top: 0; }

/* ---- faq: hairline rows with a round plus ---- */
.ht-body .hm-faq { max-width: none; }
.ht-body .hm-faq__list { border-top: 1px solid var(--ht-line); }
.ht-body .hm-faq__item { padding: 0; border-bottom: 1px solid var(--ht-line); }
.ht-body .hm-faq--cards .hm-faq__list { gap: 0; border-top: 1px solid var(--ht-line); }
.ht-body .hm-faq--cards .hm-faq__item { border: 0; border-bottom: 1px solid var(--ht-line); border-radius: 0; padding: 0; }
.ht-body .hm-faq__question { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 0; font-size: 1.3125rem; list-style: none; }
.ht-body .hm-faq__question::-webkit-details-marker { display: none; }
.ht-body .hm-faq__question::after { content: "+"; display: grid; place-items: center; flex: none; inline-size: 2.25rem; block-size: 2.25rem; border: 1px solid currentColor; border-radius: 50%; font-size: 1.25rem; font-weight: 300; line-height: 1; }
.ht-body .hm-faq__item[open] > .hm-faq__question::after { content: "\2212"; }
.ht-body .hm-faq__question:hover::after { background: var(--hm-text); border-color: var(--hm-text); color: var(--hm-bg); }
.ht-body .hm-faq__answer { max-width: 44rem; margin: 0 0 1.5rem; color: var(--ht-muted); }
.ht-body .hm-faq__answer > :last-child { margin-bottom: 0; }

/* ---- call to action: a photo band ---- */
.ht-body .hm-section--cta { position: relative; isolation: isolate; overflow: hidden; }
.ht-body .hm-cta { padding-block: 0; text-align: left; }
.ht-body .hm-cta__headline { max-width: 16em; margin-inline: 0; font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
.ht-body .hm-cta__eyebrow { margin: 0 0 .75rem; font-size: 1.25rem; font-weight: 400; }
.ht-body .hm-cta__subheadline { max-width: 36em; margin: 1rem 0 0; color: var(--ht-muted); font-size: 1.1875rem; }
.ht-body .hm-cta__actions { margin-top: 1.75rem; }
.ht-body .hm-cta__actions .hm-btn { gap: 1rem; padding: 0; border: 0; border-radius: 0; min-height: 0; background: none; color: inherit; font-size: .9375rem; text-transform: none; letter-spacing: .04em; }
.ht-body .hm-cta__actions .hm-btn::after { content: "\2192"; display: grid; place-items: center; flex: none; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid currentColor; border-radius: 50%; font-size: 1rem; line-height: 1; text-transform: none; transition: background .15s, color .15s; }
.ht-body .hm-cta__actions .hm-btn:hover { background: none; color: inherit; text-decoration: underline; }
.ht-body .hm-cta--plain, .ht-body .hm-cta--tinted { padding-block: 0; border: 0; background: none; }
.ht-body .hm-section--cta:has(.hm-cta--tinted:not(.hm-cta--has-photo)) { background: var(--ht-surface); }
.ht-body .hm-section--cta:has(.hm-cta--dark, .hm-cta--photo, .hm-cta--has-photo) { padding-block: clamp(5rem, 11vw, 9rem); background: linear-gradient(var(--ht-scrim), var(--ht-scrim)), radial-gradient(circle at 25% 30%, rgba(224, 201, 166, .35), transparent 40%), linear-gradient(135deg, #6c7a82, #3c352e); color: #fff; }
.ht-body .hm-cta--dark, .ht-body .hm-cta--photo, .ht-body .hm-cta--has-photo { background: none; border-radius: 0; color: #fff; }
.ht-body .hm-cta--dark h2, .ht-body .hm-cta--photo h2, .ht-body .hm-cta--has-photo h2 { color: #fff; }
.ht-body .hm-cta--dark .hm-cta__subheadline, .ht-body .hm-cta--photo .hm-cta__subheadline, .ht-body .hm-cta--has-photo .hm-cta__subheadline { color: rgba(255, 255, 255, .92); }
.ht-band__img { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ht-body .hm-section--cta:has(.hm-cta--has-photo)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ht-scrim); }
.ht-body .hm-section--cta:has(.hm-cta--has-photo) { background: #3c352e; }

/* focus ring on the dark and terracotta surfaces: white keeps 3:1 or more on all of them */
.ht-footer, .ht-body .hm-section--features, .ht-body .hm-split__panel, .ht-body .hm-section--cta:has(.hm-cta--dark, .hm-cta--photo, .hm-cta--has-photo) { --hm-focus: #fff; }

/* ---- content ---- */
.ht-body .hm-content__headline { max-width: 20em; margin-bottom: .6em; font-size: var(--ht-fs-h2); }
.ht-body .hm-content__eyebrow { margin-bottom: 1rem; color: var(--ht-primary); font-family: var(--hm-font); font-size: .8125rem; font-weight: 500; letter-spacing: .14em; }
.ht-body .hm-content__body { max-width: 44rem; }
.ht-body .hm-content:not(.hm-content--essay) .hm-prose > p:first-child:not(:only-child) { color: var(--ht-primary); font-size: 1.375rem; font-weight: 400; line-height: 1.4; }
.ht-body .hm-prose a { color: var(--ht-primary); }
.ht-body .hm-prose blockquote { border-left-color: var(--ht-primary); color: var(--ht-muted); }
.ht-body .hm-prose img { border-radius: var(--hm-radius-md); }
.ht-body .hm-content--essay { grid-template-columns: 14rem minmax(0, 44rem); gap: 3rem 5rem; }
.ht-body .hm-content__aside-text { color: var(--ht-muted); font-family: var(--hm-font); font-size: .9375rem; }
.ht-body .hm-content__glyph { color: var(--ht-primary); font-family: var(--hm-font); font-weight: 300; }
.ht-body .hm-content--essay .hm-prose { font-size: 1.0625rem; }
@media (max-width: 60rem) { .ht-body .hm-content--essay { grid-template-columns: minmax(0, 1fr); } }

/* ---- section heads, card columns ---- */
.ht-body .hm-section-head__eyebrow { color: var(--ht-primary); font-family: var(--hm-font); font-size: .8125rem; font-weight: 500; letter-spacing: .14em; }
.ht-body .hm-section-head__heading { font-size: var(--ht-fs-h2); }
.ht-body .hm-section-head__subheading { color: var(--ht-muted); font-size: 1.125rem; font-weight: 300; }
.ht-body .hm-card-columns__grid { gap: 2rem 2.5rem; border: 0; border-radius: 0; background: none; overflow: visible; }
.ht-body .hm-card-columns__col { padding: 1.5rem 0 0; border-top: 1px solid var(--ht-line); background: none; }
.ht-body .hm-card-columns__label { color: var(--ht-primary); font-family: var(--hm-font); font-size: .8125rem; font-weight: 500; letter-spacing: .14em; }
.ht-body .hm-card-columns__title { font-size: 1.5rem; }
.ht-body .hm-card-columns__description { color: var(--ht-muted); font-weight: 300; }
.ht-body .hm-card-columns__items { font-family: var(--hm-font); font-size: .9375rem; }
.ht-body .hm-card-columns__items li { border-top: 1px solid var(--ht-line); }
.ht-body .hm-card-columns__notes { border: 0; border-radius: var(--hm-radius-md); background: var(--ht-surface); }
.ht-body .hm-card-columns__note-text { color: var(--ht-muted); }

/* ---- pricing ---- */
.ht-body .hm-pricing__subheading, .ht-body .hm-team__subheading { color: var(--ht-primary); font-size: 1.375rem; font-weight: 400; }
.ht-body .hm-pricing__tier { border-radius: var(--hm-radius-md); padding: 2rem 1.75rem; }
.ht-body .hm-pricing__tier--popular { border-color: var(--ht-primary); box-shadow: 0 0 0 1px var(--ht-primary); }
.ht-body .hm-pricing__badge { background: var(--ht-primary); color: var(--ht-on-primary); }
.ht-body .hm-pricing__description, .ht-body .hm-pricing__period, .ht-body .hm-pricing__feature--excluded { color: var(--ht-muted); }
.ht-body .hm-pricing__amount { font-size: 3rem; font-weight: 500; letter-spacing: -.03em; }
.ht-body .hm-pricing__feature::before { color: var(--ht-primary); }
.ht-body .hm-pricing__cta { justify-content: center; }

/* ---- team ---- */
.ht-body .hm-team__photo { border-radius: var(--hm-radius-md); }
.ht-body .hm-team--cards .hm-team__member { padding: 0; border: 0; border-radius: 0; background: none; }
.ht-body .hm-team__name { font-size: 1.375rem; }
.ht-body .hm-team__title { color: var(--ht-primary); font-weight: 500; }
.ht-body .hm-team__bio { color: var(--ht-muted); font-weight: 300; }
.ht-body .hm-team__social a { color: var(--ht-primary); }

/* ---- contact ---- */
.ht-body .hm-contact-info__heading { font-size: var(--ht-fs-h2); }
.ht-body .hm-contact-info__body { gap: 2rem 3rem; }
.ht-body .hm-contact-info__address { color: var(--ht-muted); font-size: 1.125rem; }
.ht-body .hm-contact-info__channels { font-size: 1.375rem; }
.ht-body .hm-contact-info__channels a { color: var(--ht-primary); }
.ht-body .hm-contact-info__hours { max-width: 26rem; border-top: 1px solid var(--ht-line); }
.ht-body .hm-contact-info__hours-row { max-width: none; padding: .6rem 0; }
.ht-body .hm-contact-info__hours dt { font-weight: 500; }
.ht-body .hm-contact-info__hours dd { color: var(--ht-muted); }
.ht-body .hm-contact-info__map iframe { border-radius: var(--hm-radius-md); }
.ht-body .hm-contact-info--card .hm-contact-info__body { border: 0; border-radius: var(--hm-radius-md); }
.ht-body .hm-contact-form__intro, .ht-body .hm-form { max-width: 40rem; }
.ht-body .hm-contact-form--split .hm-contact-form__intro, .ht-body .hm-contact-form--split .hm-form { max-width: none; }
.ht-body .hm-contact-form__heading { font-size: var(--ht-fs-h2); }
.ht-body .hm-contact-form__subheading { color: var(--ht-primary); font-size: 1.25rem; }
.ht-body .hm-form { gap: 1.5rem; }
.ht-body .hm-form__label, .ht-body .hm-form__group legend { font-size: .9375rem; font-weight: 500; }
.ht-body .hm-form input[type="text"], .ht-body .hm-form input[type="email"], .ht-body .hm-form input[type="tel"], .ht-body .hm-form textarea, .ht-body .hm-form select {
  padding: .6rem 0; border: 0; border-bottom: 1px solid var(--ht-muted); border-radius: 0; background: transparent; color: var(--hm-text);
}
.ht-body .hm-form input:focus-visible, .ht-body .hm-form textarea:focus-visible, .ht-body .hm-form select:focus-visible { outline: 2px solid var(--ht-primary); outline-offset: 2px; border-bottom-color: var(--ht-primary); }
.ht-body .hm-form__help { color: var(--ht-muted); }
.ht-body .hm-form__error, .ht-body .hm-form__success { border-color: var(--ht-primary); background: var(--ht-surface); color: var(--hm-text); }
.ht-body .hm-form__submit { cursor: pointer; }

/* ---- split: the panel bleeds to the viewport edge, the text keeps the content column ---- */
.ht-body .hm-section--split { padding-block: 0; }
.ht-body .hm-split { width: 100%; gap: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.ht-body .hm-split--wide-code { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ht-body .hm-split__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 5rem) clamp(3rem, 7vw, 6rem) max(var(--ht-gap), calc((100vw - var(--hm-container)) / 2)); }
.ht-body .hm-split--text-right .hm-split__text { padding: clamp(3rem, 7vw, 6rem) max(var(--ht-gap), calc((100vw - var(--hm-container)) / 2)) clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 5rem); }
.ht-body .hm-split__text > :last-child { margin-bottom: 0; }
.ht-body .hm-split__heading { font-size: var(--ht-fs-h2); }
.ht-body .hm-split .hm-section-head__eyebrow { margin-bottom: 1rem; }
.ht-body .hm-split__lede { color: var(--ht-primary); font-size: 1.25rem; font-weight: 400; }
.ht-body .hm-split__defs { border-top-color: var(--ht-line); }
.ht-body .hm-split__defs > div { grid-template-columns: 8rem 1fr; border-bottom-color: var(--ht-line); }
.ht-body .hm-split__defs dt { font-family: var(--hm-font); font-size: 1rem; font-weight: 500; }
.ht-body .hm-split__defs dd, .ht-body .hm-split__footnote, .ht-body .hm-split__caption { color: var(--ht-muted); }
.ht-body .hm-split__chips { border-radius: var(--hm-radius-md); background: var(--ht-line); border-color: var(--ht-line); }
.ht-body .hm-split__chips li { background: var(--hm-bg); }
.ht-body .hm-split__chip { font-family: var(--hm-font); }
.ht-body .hm-split__panel { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(2.5rem, 6vw, 5rem) var(--ht-gap); background: radial-gradient(ellipse at 75% 30%, rgba(217, 180, 138, .18), transparent 50%), var(--ht-band); color: var(--ht-band-ink); }
.ht-body .hm-split--text-right .hm-split__panel { order: -1; }
.ht-body .hm-split__panel .hm-frame { border-color: rgba(255, 255, 255, .25); }
.ht-body .hm-outs { display: grid; gap: 0; margin: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.ht-body .hm-outs > div { padding: 1.25rem 0; border-bottom: 1px solid rgba(255, 255, 255, .4); background: none; }
.ht-body .hm-outs dt { color: var(--ht-band-kicker); font-family: var(--hm-font); font-size: .8125rem; font-weight: 500; letter-spacing: .14em; }
.ht-body .hm-outs dd { margin: .25rem 0 0; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.ht-body .hm-split__panel > :first-child .hm-code, .ht-body .hm-split__panel > .hm-outs:first-child { margin-top: 0; }
@media (max-width: 60rem) {
  .ht-body .hm-split, .ht-body .hm-split--wide-code { grid-template-columns: minmax(0, 1fr); }
  .ht-body .hm-split__text, .ht-body .hm-split--text-right .hm-split__text { padding: 3rem var(--ht-gap); }
  .ht-body .hm-split--text-right .hm-split__panel { order: 0; }
  .ht-body .hm-split__panel { padding-block: 2.5rem; }
}

/* ---- blog ---- */
.ht-body .hm-listing__eyebrow, .ht-body .hm-card__cat { color: var(--ht-primary); font-family: var(--hm-font); font-size: .8125rem; font-weight: 500; letter-spacing: .14em; }
.ht-body .hm-listing__title { font-size: var(--ht-fs-display); }
.ht-body .hm-listing__lede, .ht-body .hm-empty { color: var(--ht-muted); font-weight: 300; }
.ht-body .hm-chip { border-color: var(--ht-line); color: var(--hm-text); }
.ht-body .hm-chip:hover { border-color: var(--ht-primary); color: var(--ht-primary); }
.ht-body .hm-cards { gap: 3rem 2.5rem; align-items: start; }
.ht-body .hm-card { border: 0; border-radius: 0; background: none; }
.ht-body .hm-card:hover { transform: none; }
.ht-body .hm-card__media { border-radius: var(--hm-radius-md); }
.ht-body .hm-card__body { padding: 1.25rem 0 0; }
.ht-body .hm-card__title { font-size: 1.5rem; font-weight: 400; letter-spacing: -.01em; }
.ht-body .hm-card__title a:hover { color: var(--ht-primary); }
.ht-body .hm-card__excerpt { color: var(--ht-muted); font-weight: 300; }
.ht-body .hm-meta, .ht-body .hm-meta a { color: var(--ht-muted); }
.ht-body .hm-article__title { font-size: var(--ht-fs-display); }
.ht-body .hm-article__lede { color: var(--ht-primary); font-size: 1.375rem; font-weight: 400; }
.ht-body .hm-article__image img { border-radius: var(--hm-radius-md); }
.ht-body .hm-entry { color: var(--hm-text); font-weight: 400; line-height: 1.75; }
.ht-body .hm-entry h2, .ht-body .hm-entry h3 { color: var(--hm-text); font-weight: 400; }
.ht-body .hm-entry a { color: var(--ht-primary); }
.ht-body .hm-entry pre, .ht-body .hm-entry :not(pre) > code { background: var(--ht-surface); border-color: var(--ht-line); }
.ht-body .hm-entry hr, .ht-body .hm-related, .ht-body .hm-article__footer { border-color: var(--ht-line); }
.ht-body .hm-author-box { border-color: var(--ht-line); border-radius: var(--hm-radius-md); background: var(--ht-surface); }
.ht-body .hm-pagination a, .ht-body .hm-pagination span { border-color: var(--ht-line); }
.ht-body .hm-pagination a:hover { border-color: var(--ht-primary); color: var(--ht-primary); }
.ht-body .hm-pagination a[aria-current="page"] { background: var(--ht-primary); border-color: var(--ht-primary); color: var(--ht-on-primary); }
.ht-body .hm-search__input { border-color: var(--ht-muted); background: transparent; }
.ht-body .hm-search__input:focus-visible { border-color: var(--ht-primary); outline: 2px solid var(--ht-primary); outline-offset: 2px; }

/* ---- dark mode specifics ---- */
[data-theme="dark"] .ht-body .hm-section--cta:has(.hm-cta--has-photo) { background: #2e2823; }
[data-theme="dark"] .ht-body .hm-logo-strip__item img { opacity: .6; }

/* ---- shell ---- */
.ht-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--hm-bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ht-line); }
.ht-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4.75rem; }
.ht-brand { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; color: var(--hm-text); text-decoration: none; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.ht-brand img { display: block; max-height: 2.5rem; max-width: min(100%, 14rem); width: auto; }
.ht-brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-nav { margin-inline-start: auto; }
.ht-nav ul, .ht-menu__panel ul { list-style: none; margin: 0; padding: 0; }
.ht-nav > ul { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.ht-nav li { position: relative; }
.ht-nav a { display: inline-block; padding: .5rem 0; border-bottom: 2px solid transparent; color: var(--hm-text); font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.ht-nav a:hover, .ht-nav a[aria-current="page"] { color: var(--ht-primary); }
.ht-nav a[aria-current="page"] { border-bottom-color: var(--ht-primary); }
.ht-nav li > ul { display: none; position: absolute; left: 0; top: 100%; min-width: 12rem; padding: .5rem 1rem; background: var(--ht-surface); border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); }
.ht-nav li:hover > ul, .ht-nav li:focus-within > ul { display: block; }
.ht-header__end { display: flex; align-items: center; gap: .75rem; flex: none; margin-inline-start: auto; }
.ht-nav + .ht-header__end { margin-inline-start: 0; }
.ht-mode { display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; padding: 0; border: 1px solid var(--ht-line); border-radius: 50%; background: none; color: var(--hm-text); cursor: pointer; }
.ht-mode[hidden] { display: inline-grid; visibility: hidden; }
.ht-mode:hover { border-color: var(--hm-text); }
.ht-mode svg { inline-size: 1rem; block-size: 1rem; }
.ht-sun, [data-theme="dark"] .ht-moon { display: none; }
[data-theme="dark"] .ht-sun { display: block; }

.ht-menu { display: none; }
.ht-menu summary { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid var(--ht-line); border-radius: 50%; color: var(--hm-text); cursor: pointer; list-style: none; }
.ht-menu summary::-webkit-details-marker { display: none; }
.ht-menu summary svg { inline-size: 1.25rem; block-size: 1.25rem; }
.ht-menu[open] summary { border-color: var(--ht-primary); color: var(--ht-primary); }
.ht-menu__panel { position: absolute; max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); overflow-y: auto; overscroll-behavior: contain; left: 0; right: 0; top: 100%; padding: .75rem var(--ht-gap) 1.5rem; background: var(--ht-surface); border-bottom: 1px solid var(--ht-line); box-shadow: 0 1rem 1.5rem -1rem rgba(0, 0, 0, .25); }
.ht-menu__panel li { border-bottom: 1px solid var(--ht-line); }
.ht-menu__panel li li { border-bottom: 0; padding-inline-start: 1rem; }
.ht-menu__panel a:not(.ht-pill) { display: block; padding: .8rem 0; color: var(--hm-text); font-size: .875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.ht-menu__panel a[aria-current="page"] { color: var(--ht-primary); }
.ht-menu__cta { margin-top: 1.25rem; }

/* the full nav needs about 72rem with six items, a logo and the button */
@media (max-width: 72rem) {
  .ht-nav, .ht-header__cta { display: none; }
  .ht-menu { display: block; }
  .ht-header__inner { gap: .75rem; min-height: 4rem; }
  .ht-nav + .ht-header__end { margin-inline-start: auto; }
}

.ht-footer { margin-block-start: 0; }
.ht-footer__band { position: relative; isolation: isolate; padding-block: clamp(4rem, 8vw, 6.5rem) 2rem; background: radial-gradient(ellipse at 20% 0, var(--ht-foot-a), transparent 70%), linear-gradient(160deg, var(--ht-foot-a), var(--ht-foot-b)); color: #fff; }
.ht-footer__band--grain::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .25; mix-blend-mode: soft-light; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ht-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; }
.ht-footer__headline { margin: 0 0 1rem; max-width: 14em; font-size: clamp(2.2rem, 3.8vw, 3.2rem); }
.ht-footer__lead { margin: 0 0 1.75rem; max-width: 30em; font-size: 1.0625rem; }
.ht-footer a { color: inherit; }
.ht-footer .ht-pill { border-color: #fff; color: #fff; }
.ht-footer .ht-pill:hover { background: #fff; color: var(--ht-foot-b); }
.ht-footer__contact p { margin: 0 0 .5rem; font-size: 1.375rem; overflow-wrap: anywhere; }
.ht-footer__contact a { text-decoration: none; }
.ht-footer__contact a:hover { text-decoration: underline; }
.ht-social { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.ht-social .ht-arrow { font-size: .8125rem; font-weight: 500; text-transform: lowercase; }
.ht-footer .ht-arrow:hover { background: #fff; border-color: #fff; color: var(--ht-foot-b); }
.ht-footer__nav { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-top: 3rem; font-size: .9375rem; }
.ht-footer__nav ul { list-style: none; margin: 0; padding: 0; }
.ht-footer__title { margin: 0 0 .4rem; font-weight: 600; }
.ht-footer__nav a { text-decoration: none; }
.ht-footer__nav a:hover, .ht-footer__nav a[aria-current="page"] { text-decoration: underline; }
.ht-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; margin-top: clamp(3rem, 7vw, 5rem); padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .4); font-size: .875rem; }
.ht-footer__legal { margin: 0; }
.ht-top { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.ht-top .ht-arrow { inline-size: 2.25rem; block-size: 2.25rem; }
.ht-top:hover .ht-arrow { background: #fff; border-color: #fff; color: var(--ht-foot-b); }
@media (max-width: 48rem) {
  .ht-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .ht-footer__contact p { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) { :root .ht-body *, :root .ht-body *::before, :root .ht-body *::after { transition: none; animation: none; scroll-behavior: auto; } }

.hm-registry { padding-block: clamp(2rem, 5vw, 4rem); }
.hm-registry__crumbs { font-size: 0.875rem; color: var(--ht-fg-muted); margin-bottom: 1.5rem; }
.hm-registry__header { margin-bottom: 2rem; }
.hm-registry__title { margin: 0 0 0.5rem; }
.hm-registry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-registry__tier { padding: 0.1rem 0.5rem; border: 1px solid var(--hm-hair); border-radius: 999px; background: var(--hm-shiro); }
.hm-registry__lede { margin: 0.75rem 0 0; font-size: 1.1rem; color: var(--ht-fg-muted); }
.hm-registry__cols { display: grid; gap: 2rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.hm-registry__cols--single { grid-template-columns: minmax(0, 1fr); }
.hm-registry__shot { display: block; max-width: 100%; height: auto; margin-bottom: 1.5rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); }
.hm-registry__h { font-size: 1.125rem; margin: 1.5rem 0 0.5rem; }
.hm-registry__main > .hm-registry__h:first-child { margin-top: 0; }
.hm-registry__side { padding: 1.25rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); background: var(--hm-shiro); }
.hm-registry__side .hm-registry__h:first-of-type { margin-top: 1rem; }
.hm-registry__facts { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 1rem; margin: 0; }
.hm-registry__facts dt { color: var(--hm-label); }
.hm-registry__facts dd { margin: 0; overflow-wrap: anywhere; }
.hm-registry__perms { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.375rem; }
.hm-registry__warn { color: var(--hm-shu); }
.hm-registry__install { margin: 2rem 0 0; font-family: var(--hm-font-mono); font-size: 0.8125rem; color: var(--hm-label); }
@media (max-width: 48rem) { .hm-registry__cols { grid-template-columns: minmax(0, 1fr); } }

/* 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__perms { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0; font-family: var(--hm-font-mono); font-size: 0.75rem; color: var(--hm-label); }
.hm-plugin-directory__warn { border: 0; padding: 0; color: var(--hm-shu); }
.hm-plugin-directory__lines { font-size: 0.8125rem; color: var(--ht-fg-muted); }
.hm-plugin-directory__lines summary { cursor: pointer; color: var(--hm-label); }
.hm-plugin-directory__lines ul { margin: 0.5rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.375rem; }
.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; }