@charset "UTF-8";
/*!
 * HeapByte — design system
 * ---------------------------------------------------------------------------
 * A hand-authored, dependency-free reproduction of the React/Tailwind v4 design
 * system in src/styles.css and src/components/site/*.tsx.
 *
 * Every value in this file is DERIVED from that source, not invented. Where a
 * Tailwind utility produced a computed value (for example `rounded-sm`, which
 * resolves to calc(0.25rem - 4px) = 0 under the project's --radius) the
 * computed value is written out and the derivation noted.
 *
 * No build step. No Node. No framework runtime.
 *
 * Contents
 *   01  Fonts
 *   02  Design tokens
 *   03  Reset and base
 *   04  Typography
 *   05  Layout primitives
 *   06  Motion
 *   07  Actions (buttons and links)
 *   08  Header
 *   09  Footer
 *   10  Blocks and cards
 *   11  Forms
 *   12  Data visuals
 *   13  Prose and editor blocks
 *   14  Utilities and accessibility
 * ===========================================================================*/

/* ===========================================================================
   01  FONTS
   Self-hosted from the exact families the React app loads over the Google
   Fonts CDN (src/routes/__root.tsx): Space Grotesk 400–700, Inter 400–600,
   JetBrains Mono 400–500. Variable woff2, latin + latin-ext subsets, same
   files and unicode-ranges Google serves. SIL Open Font License 1.1.
   =========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===========================================================================
   02  DESIGN TOKENS
   sRGB hex first, so browsers without oklch() still get the intended palette.
   The hexes are mathematically converted from the oklch values below — they are
   the same colours, not substitutes. Browsers that understand oklch() take the
   @supports block and render the wider-gamut originals.
   =========================================================================== */

:root {
  /* -- Colour: neutrals ---------------------------------------------------- */
  --hb-color-paper: #fafaf8; /* oklch(0.984 0.003 106) */
  --hb-color-ink: #111315; /* oklch(0.185 0.006 250) */
  --hb-color-ink-soft: #4f5357; /* oklch(0.44 0.008 250)  */
  --hb-color-surface: #f3f2f0; /* oklch(0.962 0.003 106) */
  --hb-color-surface-strong: #e7eaec; /* oklch(0.935 0.004 250) */
  --hb-color-hairline: #dadcdf; /* oklch(0.895 0.004 250) */
  --hb-color-card: #ffffff; /* oklch(1 0 0)           */

  /* -- Colour: accents ----------------------------------------------------- */
  --hb-color-primary: #1ea372; /* oklch(0.635 0.132 162) */
  --hb-color-primary-fg: #fcfcfa; /* oklch(0.99 0.002 106)  */
  --hb-color-link: #2b5acc; /* oklch(0.505 0.185 264) */
  --hb-color-destructive: #cc2827; /* oklch(0.55 0.2 27)     */

  /* -- Colour: the dark editorial band ------------------------------------- */
  --hb-color-band: #0a0c0f; /* oklch(0.155 0.006 250) */
  --hb-color-band-fg: #f4f3f1; /* oklch(0.965 0.003 106) */
  --hb-color-band-row: #0b0d10; /* oklch(0.16 0.006 250)  */

  /* -- Colour: syntax tokens in the code pane ------------------------------ */
  --hb-color-code-key: #b897f0; /* oklch(0.74 0.13 300) */
  --hb-color-code-str: #76cf8a; /* oklch(0.78 0.13 150) */
  --hb-color-code-fn: #69c1fc; /* oklch(0.78 0.12 240) */
  --hb-color-code-num: #eeba70; /* oklch(0.82 0.11 75)  */

  /* -- Semantic aliases ---------------------------------------------------- */
  --hb-color-bg: var(--hb-color-paper);
  --hb-color-fg: var(--hb-color-ink);
  --hb-color-muted: var(--hb-color-surface);
  --hb-color-muted-fg: var(--hb-color-ink-soft);
  --hb-color-accent: var(--hb-color-surface-strong);
  --hb-color-border: var(--hb-color-hairline);
  --hb-color-input: var(--hb-color-hairline);
  --hb-color-ring: var(--hb-color-link);

  /* Tints used where the source writes foreground/NN or white/NN. */
  --hb-color-fg-12: rgba(17, 19, 21, 0.12);
  --hb-color-fg-25: rgba(17, 19, 21, 0.25);
  --hb-color-fg-35: rgba(17, 19, 21, 0.35);
  --hb-color-fg-40: rgba(17, 19, 21, 0.4);
  --hb-color-fg-70: rgba(17, 19, 21, 0.7);

  /* -- Typography ---------------------------------------------------------- */
  --hb-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --hb-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --hb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --hb-text-2xs: 0.625rem; /* Tailwind text-[0.625rem] */
  --hb-text-xs: 0.6875rem; /* the eyebrow / mono size  */
  --hb-text-sm: 0.75rem; /* Tailwind text-xs         */
  --hb-text-base: 0.875rem; /* Tailwind text-sm         */
  --hb-text-body: 0.9375rem; /* the body copy size       */
  --hb-text-md: 1rem;
  --hb-text-lg: 1.125rem;
  --hb-text-xl: 1.25rem;
  --hb-text-2xl: 1.5rem;

  --hb-weight-regular: 400;
  --hb-weight-medium: 500;
  --hb-weight-semibold: 600;

  --hb-leading-tight: 1.25;
  --hb-leading-snug: 1.375;
  --hb-leading-normal: 1.5;
  --hb-leading-relaxed: 1.625;
  --hb-leading-lede: 1.65;
  --hb-leading-code: 1.85;

  --hb-tracking-tight: -0.028em; /* headings                 */
  --hb-tracking-eyebrow: 0.14em; /* mono uppercase labels    */
  --hb-tracking-tag: 0.12em;
  --hb-tracking-wide: 0.18em; /* ticker                   */

  /* -- Spacing scale (Tailwind's 0.25rem step, only what the source uses) --- */
  --hb-space-1: 0.25rem;
  --hb-space-2: 0.5rem;
  --hb-space-3: 0.75rem;
  --hb-space-4: 1rem;
  --hb-space-5: 1.25rem;
  --hb-space-6: 1.5rem;
  --hb-space-7: 1.75rem;
  --hb-space-8: 2rem;
  --hb-space-10: 2.5rem;
  --hb-space-12: 3rem;
  --hb-space-14: 3.5rem;
  --hb-space-16: 4rem;
  --hb-space-20: 5rem;
  --hb-space-24: 6rem;
  --hb-space-28: 7rem;
  --hb-space-36: 9rem;

  /* Section rhythm. Standard = py-16 md:py-24; tall = py-20 md:py-28 lg:py-36
     (the <Section> primitive in src/components/site/primitives.tsx). */
  --hb-section-y: var(--hb-space-16);
  --hb-section-y-tall: var(--hb-space-20);

  /* Vertical flow between the direct children of a section. */
  --hb-flow: var(--hb-space-8);

  /* -- Radius --------------------------------------------------------------
     --radius is 0.25rem in the source; Tailwind's rounded-sm resolves to
     calc(var(--radius) - 4px) = 0. The design is deliberately square. */
  --hb-radius-sm: 0;
  --hb-radius-md: 0.125rem;
  --hb-radius-lg: 0.25rem;
  --hb-radius-mark: 3px; /* the logo square */
  --hb-radius-full: 9999px;

  /* -- Shadow (the source uses exactly one) -------------------------------- */
  --hb-shadow-device: 0 24px 60px -24px rgba(0, 0, 0, 0.45);

  /* -- Container ----------------------------------------------------------- */
  --hb-container-max: 84rem;
  --hb-container-pad: var(--hb-space-5);
  --hb-container-pad-md: var(--hb-space-10);
  --hb-container-pad-xl: var(--hb-space-16);

  /* -- Motion -------------------------------------------------------------- */
  --hb-ease: cubic-bezier(0.16, 1, 0.3, 1); /* --ease-editorial */
  --hb-duration-fast: 150ms;
  --hb-duration: 300ms;
  --hb-duration-slow: 500ms;
  --hb-duration-slower: 700ms;
  --hb-duration-reveal: 900ms;
  --hb-duration-bar: 1200ms;
  --hb-duration-count: 1400ms;
  --hb-duration-dial: 1500ms;
  --hb-duration-pipeline: 1800ms;
  --hb-marquee: 42s;

  /* -- Breakpoints, for documentation and JS ------------------------------- */
  --hb-bp-sm: 40rem; /* 640px  */
  --hb-bp-md: 48rem; /* 768px  */
  --hb-bp-lg: 64rem; /* 1024px */
  --hb-bp-xl: 80rem; /* 1280px */

  /* Header height, used by sticky offsets and scroll-margin. */
  --hb-header-h: 4rem;

  color-scheme: light;
}

@supports (color: oklch(0.5 0.1 200)) {
  :root {
    --hb-color-paper: oklch(0.984 0.003 106);
    --hb-color-ink: oklch(0.185 0.006 250);
    --hb-color-ink-soft: oklch(0.44 0.008 250);
    --hb-color-surface: oklch(0.962 0.003 106);
    --hb-color-surface-strong: oklch(0.935 0.004 250);
    --hb-color-hairline: oklch(0.895 0.004 250);
    --hb-color-card: oklch(1 0 0);
    --hb-color-primary: oklch(0.635 0.132 162);
    --hb-color-primary-fg: oklch(0.99 0.002 106);
    --hb-color-link: oklch(0.505 0.185 264);
    --hb-color-destructive: oklch(0.55 0.2 27);
    --hb-color-band: oklch(0.155 0.006 250);
    --hb-color-band-fg: oklch(0.965 0.003 106);
    --hb-color-band-row: oklch(0.16 0.006 250);
    --hb-color-code-key: oklch(0.74 0.13 300);
    --hb-color-code-str: oklch(0.78 0.13 150);
    --hb-color-code-fn: oklch(0.78 0.12 240);
    --hb-color-code-num: oklch(0.82 0.11 75);
  }
}

@media (min-width: 48em) {
  :root {
    --hb-section-y: var(--hb-space-24);
    --hb-section-y-tall: var(--hb-space-28);
    --hb-header-h: 4.5rem;
  }
}

@media (min-width: 64em) {
  :root {
    --hb-section-y-tall: var(--hb-space-36);
  }
}

/* ===========================================================================
   03  RESET AND BASE
   =========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--hb-color-border);
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  /* No horizontal scrollbar can be introduced by a full-bleed decoration. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background-color: var(--hb-color-bg);
  color: var(--hb-color-fg);
  font-family: var(--hb-font-sans);
  font-size: var(--hb-text-md);
  line-height: var(--hb-leading-normal);
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--hb-font-display);
  font-weight: var(--hb-weight-medium);
  letter-spacing: var(--hb-tracking-tight);
  text-wrap: balance;
}

p,
figure,
blockquote,
dl,
dd,
pre {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

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

table {
  border-collapse: collapse;
  width: 100%;
}

::selection {
  background: color-mix(in oklab, var(--hb-color-primary) 24%, transparent);
}

:focus-visible {
  outline: 2px solid var(--hb-color-ring);
  outline-offset: 3px;
}

/* Anchored article headings must clear the sticky header. */
:target {
  scroll-margin-top: calc(var(--hb-header-h) + var(--hb-space-6));
}

/* ===========================================================================
   04  TYPOGRAPHY
   The display scale, the eyebrow and the lede, verbatim from styles.css.
   =========================================================================== */

.hb-display-2xl,
.hb-display-xl,
.hb-display-lg,
.hb-display-md {
  font-family: var(--hb-font-display);
  font-weight: var(--hb-weight-medium);
  text-wrap: balance;
}

.hb-display-2xl {
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.hb-display-xl {
  font-size: clamp(2.5rem, 7vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.hb-display-lg {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.hb-display-md {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.hb-eyebrow {
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-xs);
  font-weight: var(--hb-weight-medium);
  line-height: var(--hb-leading-relaxed);
  letter-spacing: var(--hb-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hb-color-muted-fg);
}

/* The leading numeral inside an eyebrow ("01 Services"). */
.hb-eyebrow > span:first-child {
  margin-right: var(--hb-space-3);
  color: var(--hb-color-fg-40);
}

.hb-lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: var(--hb-leading-lede);
  color: var(--hb-color-muted-fg);
  text-wrap: pretty;
}

.hb-muted {
  color: var(--hb-color-muted-fg);
}

.hb-accent {
  color: var(--hb-color-primary);
}

/* ===========================================================================
   05  LAYOUT PRIMITIVES
   =========================================================================== */

.hb-shell {
  width: 100%;
  max-width: var(--hb-container-max);
  margin-inline: auto;
  padding-inline: var(--hb-container-pad);
}

@media (min-width: 48em) {
  .hb-shell {
    padding-inline: var(--hb-container-pad-md);
  }
}

@media (min-width: 80em) {
  .hb-shell {
    padding-inline: var(--hb-container-pad-xl);
  }
}

.hb-rule-top {
  border-top: 1px solid var(--hb-color-hairline);
}

/* Section rhythm. Every page section is a <section> carrying hb-rule-top or
   hb-band-ink, so the rhythm is applied once, here. */
.hb-main > section,
.hb-main > article {
  padding-block: var(--hb-section-y);
}

.hb-main > .hb-crumbs {
  padding-block: var(--hb-space-8) 0;
}

/* Flow: the vertical rhythm between a section's direct children.
 *
 * Written with :where() so the whole block carries zero specificity. These are
 * defaults for markup no component has an opinion about; any component rule
 * below — a single class is enough — overrides them without escalation. Order
 * within the block is what resolves it: later wins at equal specificity.
 */
:where(.hb-main > section > .hb-shell, .hb-main > article > .hb-shell) > * + * {
  margin-block-start: var(--hb-flow);
}

:where(.hb-main) :where(.hb-eyebrow)
  + :where(
    h1,
    h2,
    h3,
    .hb-display-2xl,
    .hb-display-xl,
    .hb-display-lg,
    .hb-display-md
  ) {
  margin-block-start: var(--hb-space-6);
}

:where(.hb-main) :where(h1, h2, h3) + :where(.hb-lede) {
  margin-block-start: var(--hb-space-7);
}

/* The dark editorial band. Scoped token overrides mean every component nested
   inside inherits the ink treatment without a variant class. */
.hb-band-ink {
  background: var(--hb-color-band);
  --hb-color-bg: var(--hb-color-band);
  --hb-color-fg: var(--hb-color-band-fg);
  --hb-color-muted-fg: rgba(255, 255, 255, 0.55);
  --hb-color-border: rgba(255, 255, 255, 0.12);
  --hb-color-hairline: rgba(255, 255, 255, 0.12);
  --hb-color-card: var(--hb-color-band-row);
  --hb-color-muted: var(--hb-color-band-row);
  --hb-color-accent: rgba(255, 255, 255, 0.06);
  --hb-color-fg-12: rgba(255, 255, 255, 0.12);
  --hb-color-fg-25: rgba(255, 255, 255, 0.25);
  --hb-color-fg-35: rgba(255, 255, 255, 0.35);
  --hb-color-fg-40: rgba(255, 255, 255, 0.4);
  --hb-color-fg-70: rgba(255, 255, 255, 0.7);
  color: var(--hb-color-band-fg);
  border-top-color: transparent;
}

.hb-band-ink .hb-eyebrow {
  color: rgba(255, 255, 255, 0.45);
}

.hb-band-ink h1,
.hb-band-ink h2,
.hb-band-ink h3 {
  color: var(--hb-color-band-fg);
}

/* Blueprint grid backdrop (GridBackdrop / @utility blueprint). Decorative. */
.hb-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
  background-image:
    linear-gradient(to right, var(--hb-color-fg-12) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hb-color-fg-12) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 75%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 75%);
}

@supports (color: color-mix(in oklab, red 6%, transparent)) {
  .hb-backdrop {
    background-image:
      linear-gradient(
          to right,
          color-mix(in oklab, var(--hb-color-fg) 6%, transparent) 1px,
          transparent 1px
        ),
      linear-gradient(
          to bottom,
          color-mix(in oklab, var(--hb-color-fg) 6%, transparent) 1px,
          transparent 1px
        );
  }
}

.hb-has-backdrop {
  position: relative;
  overflow: hidden;
}

.hb-has-backdrop > .hb-shell {
  position: relative;
}

/* Hairline grid: a 1px gap over a border-coloured background, which is how
   every "bordered grid" in the source is built (gap-px + bg-border). */
.hb-hairline-grid {
  display: grid;
  gap: 1px;
  background: var(--hb-color-hairline);
  border: 1px solid var(--hb-color-hairline);
}

.hb-hairline-grid > * {
  background: var(--hb-color-bg);
}

/* ===========================================================================
   06  MOTION
   `.hb-js` is set on <html> before first paint by inc/enqueue.php, so content
   is only ever hidden when JavaScript is present to reveal it again.
   =========================================================================== */

@keyframes hb-reveal-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.hb-js [data-hb-reveal] {
  opacity: 0;
}

.hb-js [data-hb-reveal].is-revealed {
  opacity: 0;
  transform: translateY(14px);
  animation: hb-reveal-in var(--hb-duration-reveal) var(--hb-ease) forwards;
  animation-delay: var(--hb-reveal-delay, 0ms);
}

/* Underline that grows from the left on hover (@utility link-underline). */
.hb-link-underline,
.hb-header__menu a,
.hb-footer a,
.hb-crumbs a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.45s var(--hb-ease), color var(--hb-duration);
}

.hb-link-underline:hover,
.hb-header__menu a:hover,
.hb-footer a:hover,
.hb-crumbs a:hover {
  background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .hb-js [data-hb-reveal],
  .hb-js [data-hb-reveal].is-revealed {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hb-ticker__track {
    animation: none;
  }
}

/* ===========================================================================
   07  ACTIONS
   From actionVariants() in src/components/site/primitives.tsx.
   =========================================================================== */

.hb-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hb-space-2);
  border-radius: var(--hb-radius-sm);
  font-weight: var(--hb-weight-medium);
  text-align: center;
  transition:
    background-color var(--hb-duration) var(--hb-ease),
    color var(--hb-duration) var(--hb-ease),
    border-color var(--hb-duration) var(--hb-ease),
    transform var(--hb-duration) var(--hb-ease);

  /* size md — the default */
  min-height: 2.75rem;
  padding-inline: var(--hb-space-5);
  font-size: var(--hb-text-base);

  /* variant primary — the default */
  background: var(--hb-color-primary);
  color: var(--hb-color-primary-fg);
}

.hb-action:hover {
  background: #1a8c62; /* color-mix(in oklab, primary 88%, ink) */
}

@supports (color: color-mix(in oklab, red 50%, blue)) {
  .hb-action:hover {
    background: color-mix(in oklab, var(--hb-color-primary) 88%, var(--hb-color-ink));
  }
}

.hb-action[disabled],
.hb-action[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
}

.hb-action svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* variant ink */
.hb-action--ink {
  background: var(--hb-color-fg);
  color: var(--hb-color-bg);
}

.hb-action--ink:hover {
  background: #2a2d30; /* color-mix(in oklab, ink 88%, paper) */
}

@supports (color: color-mix(in oklab, red 50%, blue)) {
  .hb-action--ink:hover {
    background: color-mix(in oklab, var(--hb-color-ink) 88%, var(--hb-color-paper));
  }
}

/* variant outline */
.hb-action--outline {
  background: transparent;
  color: var(--hb-color-fg);
  border: 1px solid var(--hb-color-border);
}

.hb-action--outline:hover {
  background: var(--hb-color-accent);
}

.hb-band-ink .hb-action--outline {
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.hb-band-ink .hb-action--outline:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* variant quiet — a link, not a button */
.hb-action--quiet {
  min-height: 0;
  padding-inline: 0;
  background: none;
  color: var(--hb-color-link);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.45s var(--hb-ease);
}

.hb-action--quiet:hover {
  background-color: transparent;
  background-size: 100% 1px;
}

/* size lg */
.hb-action--lg {
  min-height: 3rem;
  padding-inline: var(--hb-space-6);
  font-size: var(--hb-text-body);
}

/* A row of actions. */
.hb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-space-3);
}

/* ===========================================================================
   08  HEADER
   src/components/site/site-header.tsx
   =========================================================================== */

.hb-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--hb-color-paper) 85%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--hb-duration);
}

@supports not (backdrop-filter: blur(12px)) {
  .hb-header {
    background: var(--hb-color-paper);
  }
}

.hb-header.is-scrolled {
  border-bottom-color: var(--hb-color-border);
}

.hb-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--hb-space-6);
  height: 4rem;
}

@media (min-width: 48em) {
  .hb-header__inner {
    height: 4.5rem;
  }
}

@media (min-width: 64em) {
  .hb-header__inner {
    grid-template-columns: auto 1fr auto;
  }
}

.hb-header__brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.625rem;
}

.hb-header__mark,
.hb-footer__mark {
  width: 1rem;
  height: 1rem;
  flex: none;
  border: 2px solid currentColor;
  border-radius: var(--hb-radius-mark);
}

.hb-header__wordmark,
.hb-footer__wordmark {
  font-family: var(--hb-font-display);
  font-size: var(--hb-text-body);
  font-weight: var(--hb-weight-semibold);
  letter-spacing: var(--hb-tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hb-header__context {
  display: none;
  font-size: var(--hb-text-sm);
  color: var(--hb-color-muted-fg);
}

@media (min-width: 40em) {
  .hb-header__context {
    display: inline;
  }
}

.hb-header__nav {
  display: none;
}

@media (min-width: 64em) {
  .hb-header__nav {
    display: flex;
    justify-content: center;
  }
}

.hb-header__menu {
  display: flex;
  gap: var(--hb-space-8);
}

.hb-header__menu a {
  font-size: var(--hb-text-base);
  color: var(--hb-color-muted-fg);
}

.hb-header__menu a:hover,
.hb-header__menu .current-menu-item > a,
.hb-header__menu .current_page_item > a,
.hb-header__menu .current-menu-ancestor > a {
  color: var(--hb-color-fg);
}

.hb-header__actions {
  display: none;
}

@media (min-width: 64em) {
  .hb-header__actions {
    display: flex;
    align-items: center;
    gap: var(--hb-space-3);
  }
}

.hb-header__toggle {
  display: grid;
  place-items: center;
  justify-self: end;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--hb-color-border);
  border-radius: var(--hb-radius-sm);
  color: inherit;
}

.hb-header__toggle svg {
  width: 1rem;
  height: 1rem;
}

.hb-header__toggle .hb-icon--x,
.hb-header__toggle[aria-expanded="true"] .hb-icon--menu {
  display: none;
}

.hb-header__toggle[aria-expanded="true"] .hb-icon--x {
  display: block;
}

@media (min-width: 64em) {
  .hb-header__toggle {
    display: none;
  }
}

.hb-header__mobile {
  border-top: 1px solid var(--hb-color-border);
}

.hb-header__mobile[hidden] {
  display: none;
}

@media (min-width: 64em) {
  .hb-header__mobile {
    display: none;
  }
}

.hb-header__mobile .hb-shell {
  display: flex;
  flex-direction: column;
  padding-block: var(--hb-space-2);
}

.hb-header__menu--mobile {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hb-header__menu--mobile a {
  display: block;
  border-bottom: 1px solid var(--hb-color-border);
  padding-block: var(--hb-space-4);
  font-family: var(--hb-font-display);
  font-size: var(--hb-text-lg);
  color: var(--hb-color-fg);
  background-image: none;
}

.hb-header__mobile .hb-actions {
  flex-direction: column;
  padding-block: var(--hb-space-6);
}

.hb-header__mobile .hb-action {
  width: 100%;
}

/* Scroll progress hairline (ScrollProgress in showcase.tsx). Created by JS on
   the front page only, matching where the React app mounts it. */
.hb-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  height: 1px;
  pointer-events: none;
}

.hb-progress__bar {
  height: 100%;
  width: 0;
  background: var(--hb-color-primary);
  transition: width var(--hb-duration-fast) linear;
}

/* ===========================================================================
   09  FOOTER
   src/components/site/site-footer.tsx
   =========================================================================== */

.hb-footer {
  background: var(--hb-color-bg);
}

.hb-footer__inner {
  display: grid;
  gap: var(--hb-space-12);
  padding-block: var(--hb-space-16) 0;
}

@media (min-width: 64em) {
  .hb-footer__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

@media (min-width: 48em) {
  .hb-footer__inner {
    padding-block: var(--hb-space-20) 0;
  }
}

.hb-footer__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

@media (min-width: 64em) {
  .hb-footer__intro {
    grid-column: span 4 / span 4;
  }
}

.hb-footer__intro > p {
  flex: 1 0 100%;
}

.hb-footer__intro > .hb-lede {
  max-width: 20rem;
  margin-block-start: var(--hb-space-5);
  font-size: var(--hb-text-body);
}

.hb-footer__intro > .hb-eyebrow {
  margin-block-start: var(--hb-space-8);
}

.hb-footer__intro > .hb-eyebrow + p {
  margin-block-start: var(--hb-space-2);
  font-size: var(--hb-text-base);
  color: var(--hb-color-muted-fg);
}

.hb-footer__columns {
  display: grid;
  gap: var(--hb-space-10);
}

@media (min-width: 40em) {
  .hb-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .hb-footer__columns {
    grid-column: span 8 / span 8;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hb-footer__column ul {
  display: grid;
  gap: 0.625rem;
  margin-block-start: var(--hb-space-4);
}

.hb-footer__column a {
  font-size: var(--hb-text-base);
  color: var(--hb-color-muted-fg);
}

.hb-footer__column a:hover {
  color: var(--hb-color-fg);
}

.hb-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--hb-space-4);
  margin-block-start: var(--hb-space-16);
  border-top: 1px solid var(--hb-color-border);
  padding-block: var(--hb-space-8) var(--hb-space-16);
  font-size: var(--hb-text-sm);
  color: var(--hb-color-muted-fg);
}

@media (min-width: 40em) {
  .hb-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.hb-footer__bottom ul {
  display: flex;
  gap: var(--hb-space-6);
}

/* ===========================================================================
   10  BLOCKS AND CARDS
   =========================================================================== */

/* -- Breadcrumbs ---------------------------------------------------------- */
.hb-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hb-space-2);
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--hb-tracking-eyebrow);
  color: var(--hb-color-muted-fg);
}

.hb-crumbs li {
  display: flex;
  align-items: center;
  gap: var(--hb-space-2);
}

.hb-crumbs [aria-current="page"] {
  color: var(--hb-color-fg-70);
}

.hb-crumbs a:hover {
  color: var(--hb-color-fg);
}

/* -- Section head (SectionHead) ------------------------------------------- */
.hb-section-head {
  display: grid;
  gap: var(--hb-space-8);
}

@media (min-width: 64em) {
  /* Rows are spaced by the elements' own margins, exactly as the source does;
     the grid only supplies the column gutter. */
  .hb-section-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--hb-space-12);
    row-gap: 0;
  }

  .hb-section-head > .hb-eyebrow {
    grid-column: span 3 / span 3;
  }

  .hb-section-head > :not(.hb-eyebrow) {
    grid-column: span 9 / span 9;
  }
}

.hb-section-head__title {
  max-width: 48rem;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.hb-section-head .hb-lede {
  max-width: 42rem;
}

@media (min-width: 64em) {
  .hb-section-head__title + .hb-lede {
    margin-block-start: var(--hb-space-6);
    grid-column: span 9 / span 9;
    grid-column-start: 4;
  }
}

.hb-section-head__index {
  margin-right: var(--hb-space-3);
  color: var(--hb-color-fg-40);
}

/* -- Page hero (PageHero) ------------------------------------------------- */
.hb-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--hb-space-16) !important;
  border-top: 0;
}

@media (min-width: 48em) {
  .hb-hero {
    padding-block: var(--hb-space-24) !important;
  }
}

@media (min-width: 64em) {
  .hb-hero {
    padding-block: var(--hb-space-28) !important;
  }
}

.hb-hero > .hb-shell {
  position: relative;
}

.hb-hero__title {
  max-width: 20ch;
  margin-block-start: var(--hb-space-6);
  font-size: clamp(2.5rem, 7vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.hb-hero > .hb-shell > .hb-lede {
  max-width: 42rem;
  margin-block-start: var(--hb-space-7);
}

.hb-hero__aside {
  margin-block-start: var(--hb-space-10);
  align-self: end;
  font-size: var(--hb-text-body);
  line-height: var(--hb-leading-relaxed);
  color: var(--hb-color-muted-fg);
}

@media (min-width: 64em) {
  .hb-hero > .hb-shell {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--hb-space-10);
    row-gap: 0;
  }

  .hb-hero > .hb-shell > .hb-eyebrow,
  .hb-hero > .hb-shell > .hb-hero__title,
  .hb-hero > .hb-shell > .hb-lede {
    grid-column: 1 / span 8;
  }

  .hb-hero__aside {
    grid-column: 9 / span 4;
    grid-row: 1 / span 3;
    margin-block-start: 0;
  }

  .hb-hero__meta {
    grid-column: 1 / -1;
  }
}

.hb-hero__meta {
  display: grid;
  gap: 1px;
  margin-block-start: var(--hb-space-14);
  border: 1px solid var(--hb-color-border);
  background: var(--hb-color-border);
}

@media (min-width: 40em) {
  .hb-hero__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .hb-hero__meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hb-hero__meta > div {
  background: var(--hb-color-bg);
  padding: var(--hb-space-6) var(--hb-space-5);
}

.hb-hero__meta dd {
  margin-block-start: var(--hb-space-3);
  font-family: var(--hb-font-display);
  font-size: var(--hb-text-lg);
  letter-spacing: var(--hb-tracking-tight);
}

/* -- Closing CTA (ClosingCTA) --------------------------------------------- */
.hb-cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--hb-space-20) !important;
}

@media (min-width: 48em) {
  .hb-cta {
    padding-block: var(--hb-space-28) !important;
  }
}

@media (min-width: 64em) {
  .hb-cta > .hb-shell {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--hb-space-10);
    row-gap: 0;
  }

  .hb-cta > .hb-shell > .hb-eyebrow {
    grid-column: span 3 / span 3;
  }

  .hb-cta > .hb-shell > :not(.hb-eyebrow) {
    grid-column: 4 / span 9;
  }

  .hb-cta__title {
    margin-block-start: 0;
  }
}

.hb-cta__title {
  max-width: 48rem;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.hb-cta > .hb-shell > p:not(.hb-eyebrow):not(.hb-cta__actions) {
  max-width: 36rem;
  margin-block-start: var(--hb-space-6);
  font-size: var(--hb-text-body);
  line-height: var(--hb-leading-relaxed);
  color: rgba(255, 255, 255, 0.6);
}

.hb-cta__actions,
.hb-cta > .hb-shell > .hb-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-space-3);
  margin-block-start: 2.25rem;
}

.hb-cta .hb-action {
  min-height: 3rem;
  padding-inline: var(--hb-space-6);
  font-size: var(--hb-text-body);
}

/* -- Ladder (Ladder) ------------------------------------------------------ */
.hb-ladder {
  display: grid;
  gap: 1px;
  background: var(--hb-color-border);
}

.hb-ladder > li {
  display: grid;
  gap: var(--hb-space-4);
  background: var(--hb-color-bg);
  padding-block: var(--hb-space-8);
}

@media (min-width: 48em) {
  .hb-ladder > li {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--hb-space-8);
    padding-inline: var(--hb-space-6);
  }

  .hb-ladder__index {
    grid-column: span 2 / span 2;
  }

  .hb-ladder__title {
    grid-column: span 4 / span 4;
  }

  .hb-ladder__body {
    grid-column: span 6 / span 6;
  }
}

.hb-ladder__index {
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--hb-tracking-eyebrow);
  color: var(--hb-color-muted-fg);
}

.hb-ladder__title {
  font-family: var(--hb-font-display);
  font-size: var(--hb-text-lg);
  letter-spacing: var(--hb-tracking-tight);
}

.hb-ladder__body {
  font-size: var(--hb-text-body);
  line-height: var(--hb-leading-relaxed);
  color: var(--hb-color-muted-fg);
}

.hb-ladder__body > * + * {
  margin-block-start: var(--hb-space-4);
}

.hb-ladder--ink {
  background: rgba(255, 255, 255, 0.1);
}

.hb-ladder--ink > li {
  background: var(--hb-color-band-row);
}

/* -- Tag row (TagRow) ----------------------------------------------------- */
.hb-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-space-2);
}

.hb-tag-row > li {
  border: 1px solid var(--hb-color-border);
  padding: 0.375rem var(--hb-space-3);
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--hb-tracking-tag);
  color: var(--hb-color-muted-fg);
  transition: border-color var(--hb-duration), color var(--hb-duration);
}

.hb-tag-row > li:hover {
  border-color: var(--hb-color-fg-25);
  color: var(--hb-color-fg);
}

/* -- Simple list (string-list) -------------------------------------------- */
.hb-string-list {
  display: grid;
  gap: var(--hb-space-3);
}

.hb-string-list > li {
  position: relative;
  padding-left: var(--hb-space-6);
  font-size: var(--hb-text-base);
  color: var(--hb-color-muted-fg);
}

.hb-string-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: var(--hb-radius-full);
  background: var(--hb-color-primary);
}

/* -- Key/value table (kv-table) ------------------------------------------- */
.hb-kv {
  display: grid;
  border: 1px solid var(--hb-color-border);
}

.hb-kv__row {
  display: grid;
  gap: var(--hb-space-2);
  padding: var(--hb-space-5);
}

.hb-kv__row + .hb-kv__row {
  border-top: 1px solid var(--hb-color-border);
}

@media (min-width: 40em) {
  .hb-kv__row {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--hb-space-6);
  }
}

@media (min-width: 48em) {
  .hb-kv__row {
    padding-inline: var(--hb-space-6);
  }
}

.hb-kv dt {
  font-size: var(--hb-text-body);
  line-height: var(--hb-leading-relaxed);
}

.hb-kv dd {
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--hb-tracking-tag);
  color: var(--hb-color-primary);
}

.hb-kv__note {
  color: var(--hb-color-muted-fg);
  text-transform: none;
  letter-spacing: 0;
}

/* -- Card grid (insight archive, keep reading) ---------------------------- */
.hb-card-grid {
  display: grid;
  gap: 1px;
  background: var(--hb-color-border);
}

@media (min-width: 48em) {
  .hb-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hb-card-grid > li {
  background: var(--hb-color-bg);
}

.hb-card-grid > li > a {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--hb-space-8);
  padding: var(--hb-space-6);
  transition: background-color var(--hb-duration);
}

@media (min-width: 48em) {
  .hb-card-grid > li > a {
    padding: var(--hb-space-8);
  }
}

.hb-card-grid > li > a:hover {
  background: var(--hb-color-accent);
}

.hb-card-grid__title {
  display: block;
  margin-block-start: var(--hb-space-5);
  font-family: var(--hb-font-display);
  font-size: var(--hb-text-xl);
  line-height: var(--hb-leading-snug);
  letter-spacing: var(--hb-tracking-tight);
}

.hb-card-grid__excerpt {
  display: block;
  margin-block-start: var(--hb-space-4);
  font-size: var(--hb-text-body);
  line-height: var(--hb-leading-relaxed);
  color: var(--hb-color-muted-fg);
}

/* -- Home hero ------------------------------------------------------------
   The headline takes nine columns and the supporting copy and actions sit in
   the remaining three, bottom-aligned (src/routes/index.tsx). */
@media (min-width: 64em) {
  .hb-home-hero > .hb-shell {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--hb-space-10);
    row-gap: 0;
  }

  .hb-home-hero > .hb-shell > .hb-eyebrow,
  .hb-home-hero > .hb-shell > .hb-display-2xl {
    grid-column: 1 / span 9;
  }

  .hb-home-hero > .hb-shell > .hb-lede,
  .hb-home-hero > .hb-shell > .hb-actions {
    grid-column: 10 / span 3;
  }

  .hb-home-hero > .hb-shell > .hb-lede {
    grid-row: 2;
    align-self: end;
    margin-block-start: 0;
    font-size: var(--hb-text-body);
    line-height: var(--hb-leading-relaxed);
  }

  .hb-home-hero > .hb-shell > .hb-actions {
    grid-row: 3;
    flex-direction: column;
    margin-block-start: var(--hb-space-7);
  }

  .hb-home-hero > .hb-shell > .hb-stats,
  .hb-home-hero > .hb-shell > .hb-margin-note,
  .hb-home-hero > .hb-shell > .hb-build {
    grid-column: 1 / -1;
  }

  .hb-home-hero > .hb-shell > .hb-build {
    margin-block-start: var(--hb-space-5);
  }
}

.hb-home-hero > .hb-shell > .hb-stats {
  margin-block-start: var(--hb-space-14);
}

/* -- Editorial rail row ---------------------------------------------------
   The index-row layout shared by the work index and the lead insight: a
   metadata column on the left, the headline and lede in the middle, optional
   figures on the right (lg:col-span-3 / 6 / 3 in the source). */
.hb-rail__meta > * + * {
  margin-block-start: var(--hb-space-3);
}

.hb-rail__main > * + * {
  margin-block-start: var(--hb-space-5);
}

.hb-rail__main .hb-lede {
  max-width: 36rem;
}

.hb-rail__main .hb-icon--arrow-up-right {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: var(--hb-space-3);
  vertical-align: baseline;
  color: var(--hb-color-muted-fg);
}

a:hover .hb-rail__main .hb-icon--arrow-up-right {
  transform: translate(4px, -4px);
}

/* -- Lead insight --------------------------------------------------------- */
.hb-insight-lead {
  padding-block: 0 !important;
}

.hb-insight-lead__link {
  display: block;
  padding-block: var(--hb-space-14);
  transition: background-color var(--hb-duration);
}

@media (min-width: 48em) {
  .hb-insight-lead__link {
    padding-block: var(--hb-space-20);
  }
}

.hb-insight-lead__link:hover {
  background: var(--hb-color-accent);
}

.hb-insight-lead__link > * + * {
  margin-block-start: var(--hb-space-8);
}

.hb-insight-lead__link .hb-display-lg {
  max-width: 48rem;
}

.hb-insight-lead__link .hb-lede {
  max-width: 42rem;
  margin-block-start: var(--hb-space-6);
}

@media (min-width: 64em) {
  .hb-insight-lead__link {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--hb-space-8);
  }

  .hb-insight-lead__link > * + * {
    margin-block-start: 0;
  }

  .hb-insight-lead__link .hb-rail__meta {
    grid-column: span 3 / span 3;
  }

  .hb-insight-lead__link .hb-rail__main {
    grid-column: span 9 / span 9;
  }
}

/* -- Work index rows ------------------------------------------------------ */
.hb-work-index {
  padding-block: 0 !important;
}

.hb-work-index__list {
  display: grid;
  gap: 1px;
  background: var(--hb-color-border);
}

.hb-work-index__list > li {
  background: var(--hb-color-bg);
}

.hb-work-index__row {
  display: grid;
  gap: var(--hb-space-4);
  padding-block: var(--hb-space-12);
  transition: background-color var(--hb-duration);
}

@media (min-width: 48em) {
  .hb-work-index__row {
    padding-block: var(--hb-space-16);
  }

  .hb-work-index__row:hover {
    background: var(--hb-color-accent);
  }
}

@media (min-width: 64em) {
  .hb-work-index__row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--hb-space-6);
  }

  .hb-work-index__row > .hb-rail__meta {
    grid-column: span 3 / span 3;
  }

  .hb-work-index__row > .hb-rail__main {
    grid-column: span 6 / span 6;
  }

  .hb-work-index__results {
    grid-column: span 3 / span 3;
  }
}

.hb-work-index__row .hb-lede {
  max-width: 36rem;
  font-size: var(--hb-text-md);
}

.hb-work-index__results {
  display: grid;
  gap: var(--hb-space-2);
  align-content: start;
}

.hb-work-index__result strong {
  display: block;
  font-family: var(--hb-font-display);
  font-size: var(--hb-text-md);
  font-weight: var(--hb-weight-medium);
  letter-spacing: var(--hb-tracking-tight);
}

.hb-work-index__result .hb-eyebrow {
  font-size: var(--hb-text-2xs);
  letter-spacing: var(--hb-tracking-tag);
}

/* -- Selected work list (home) -------------------------------------------- */
.hb-work-list {
  border-top: 1px solid var(--hb-color-border);
}

.hb-work-list > li > a {
  display: grid;
  align-items: center;
  gap: var(--hb-space-4);
  border-bottom: 1px solid var(--hb-color-border);
  padding-block: var(--hb-space-8);
  transition: background-color var(--hb-duration-slow);
}

.hb-work-list > li > a:hover {
  background: var(--hb-color-muted);
}

@media (min-width: 48em) {
  .hb-work-list > li > a {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-block: var(--hb-space-10);
  }

  .hb-work-list h3 {
    grid-column: span 4 / span 4;
  }

  .hb-work-list .hb-eyebrow {
    grid-column: span 3 / span 3;
  }

  .hb-work-list__summary {
    grid-column: span 5 / span 5;
  }
}

.hb-work-list h3 {
  font-size: var(--hb-text-2xl);
  font-weight: var(--hb-weight-medium);
}

@media (min-width: 48em) {
  .hb-work-list h3 {
    font-size: 1.875rem;
  }
}

.hb-work-list__summary {
  font-size: var(--hb-text-body);
  line-height: var(--hb-leading-relaxed);
  color: var(--hb-color-muted-fg);
}

/* -- Services index groups ------------------------------------------------ */
@media (min-width: 64em) {
  .hb-service-group > .hb-shell {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--hb-space-10);
  }

  .hb-service-group__head {
    grid-column: span 3 / span 3;
    position: sticky;
    top: calc(var(--hb-header-h) + var(--hb-space-6));
    align-self: start;
  }

  .hb-service-group__list {
    grid-column: span 9 / span 9;
    margin-block-start: 0 !important;
  }
}

.hb-service-group__head > p + p {
  max-width: 20rem;
  margin-block-start: var(--hb-space-5);
  font-size: var(--hb-text-base);
  line-height: var(--hb-leading-relaxed);
  color: var(--hb-color-muted-fg);
}

.hb-service-group__list {
  display: grid;
  gap: 1px;
  background: var(--hb-color-border);
}

.hb-service-group__list > li {
  background: var(--hb-color-bg);
}

.hb-service-group__list a {
  display: grid;
  gap: var(--hb-space-4);
  padding-block: var(--hb-space-8);
  transition: background-color var(--hb-duration);
}

@media (min-width: 48em) {
  .hb-service-group__list a {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--hb-space-8);
    padding-inline: var(--hb-space-6);
  }

  .hb-service-group__list a:hover {
    background: var(--hb-color-accent);
  }

  .hb-service-group__list h2 {
    grid-column: span 5 / span 5;
  }

  .hb-service-group__list p {
    grid-column: span 7 / span 7;
  }
}

.hb-service-group__list h2 {
  font-family: var(--hb-font-display);
  font-size: var(--hb-text-xl);
  letter-spacing: var(--hb-tracking-tight);
}

.hb-service-group__list p {
  font-size: var(--hb-text-body);
  line-height: var(--hb-leading-relaxed);
  color: var(--hb-color-muted-fg);
}

/* -- Team roster ---------------------------------------------------------- */
.hb-roster {
  display: grid;
  gap: 1px;
  border: 1px solid var(--hb-color-border);
  background: var(--hb-color-border);
}

.hb-roster__item {
  background: var(--hb-color-bg);
}

.hb-roster__item > article {
  display: grid;
  gap: var(--hb-space-8);
  padding: var(--hb-space-10) var(--hb-space-5);
}

@media (min-width: 48em) {
  .hb-roster__item > article {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--hb-space-10);
    padding: var(--hb-space-14) var(--hb-space-8);
  }

  .hb-roster__photo {
    grid-column: span 4 / span 4;
  }

  .hb-roster__body {
    grid-column: span 8 / span 8;
  }
}

@media (min-width: 64em) {
  .hb-roster__photo {
    grid-column: span 3 / span 3;
  }

  .hb-roster__body {
    grid-column: span 9 / span 9;
  }
}

.hb-roster__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--hb-color-border);
  background: var(--hb-color-muted);
}

.hb-roster__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter var(--hb-duration-slower) var(--hb-ease),
    transform var(--hb-duration-slower) var(--hb-ease);
}

.hb-roster__photo:hover .hb-roster__image {
  filter: grayscale(0);
  transform: scale(1.02);
}

.hb-roster__code {
  position: absolute;
  left: 0;
  top: 0;
  padding: var(--hb-space-1) var(--hb-space-2);
  background: var(--hb-color-fg);
  color: var(--hb-color-bg);
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--hb-tracking-eyebrow);
}

.hb-roster__body > * + * {
  margin-block-start: var(--hb-space-6);
}

.hb-roster__body > .hb-eyebrow {
  margin-block-start: var(--hb-space-3);
}

.hb-roster__body .hb-prose {
  max-width: 42rem;
  font-size: var(--hb-text-body);
  line-height: var(--hb-leading-relaxed);
  color: var(--hb-color-muted-fg);
}

/* -- Timeline rail -------------------------------------------------------- */
.hb-timeline__rail {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  background: var(--hb-color-border);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.hb-timeline__rail::-webkit-scrollbar {
  display: none;
}

.hb-timeline__card {
  flex: none;
  width: 19rem;
  background: var(--hb-color-bg);
  padding: var(--hb-space-8);
  scroll-snap-align: start;
}

@media (min-width: 48em) {
  .hb-timeline__card {
    width: 22rem;
    padding: var(--hb-space-10);
  }
}

.hb-timeline__card h3 {
  margin-block-start: var(--hb-space-16);
  font-size: var(--hb-text-2xl);
  font-weight: var(--hb-weight-medium);
}

.hb-timeline__card p {
  margin-block-start: var(--hb-space-4);
  font-size: var(--hb-text-base);
  line-height: var(--hb-leading-relaxed);
  color: var(--hb-color-muted-fg);
}

.hb-timeline__artefact {
  float: right;
  color: var(--hb-color-primary);
  letter-spacing: var(--hb-tracking-tag);
}

/* -- Quote ---------------------------------------------------------------- */
.hb-quote blockquote,
.hb-founder__quote {
  max-width: 48rem;
  border-left: 2px solid var(--hb-color-primary);
  padding-left: var(--hb-space-6);
  font-family: var(--hb-font-display);
  font-size: clamp(1.2rem, 2.1vw, 1.75rem);
  font-weight: var(--hb-weight-medium);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

@media (min-width: 48em) {
  .hb-quote blockquote,
  .hb-founder__quote {
    padding-left: var(--hb-space-10);
  }
}

.hb-quote figcaption {
  margin-block-start: var(--hb-space-6);
  font-weight: var(--hb-weight-regular);
}

.hb-record blockquote {
  max-width: 64rem;
}

.hb-manifesto__statement {
  max-width: 64rem;
  font-family: var(--hb-font-display);
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  font-weight: var(--hb-weight-medium);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

/* -- Margin notes --------------------------------------------------------- */
.hb-margin-note,
.hb-margin-notes > li {
  display: flex;
  gap: var(--hb-space-3);
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-xs);
  line-height: var(--hb-leading-relaxed);
  letter-spacing: 0.04em;
  color: var(--hb-color-muted-fg);
  max-width: 26rem;
}

.hb-margin-notes {
  display: grid;
  gap: var(--hb-space-7);
}

.hb-margin-notes__index {
  flex: none;
  color: var(--hb-color-fg-35);
}

/* -- Founder card --------------------------------------------------------- */
.hb-founder__mark {
  display: flex;
  width: 4rem;
  height: 4rem;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  font-family: var(--hb-font-display);
  font-size: var(--hb-text-xl);
  font-weight: var(--hb-weight-semibold);
  letter-spacing: var(--hb-tracking-tight);
}

.hb-founder__role {
  font-family: var(--hb-font-display);
  font-size: var(--hb-text-lg);
  font-weight: var(--hb-weight-medium);
  letter-spacing: var(--hb-tracking-tight);
}

/* -- Code pane (CodePane / Chrome) ---------------------------------------- */
.hb-codepane {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--hb-color-band-row);
}

.hb-codepane__file {
  display: flex;
  align-items: center;
  gap: var(--hb-space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.625rem var(--hb-space-3);
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-xs);
  letter-spacing: var(--hb-tracking-tight);
  color: rgba(255, 255, 255, 0.45);
}

/* The three window dots. Decorative, drawn in CSS so no markup is required. */
.hb-codepane__file::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 0.5rem;
  background-image: radial-gradient(
    circle 4px at 4px 4px,
    rgba(255, 255, 255, 0.18) 98%,
    transparent 100%
  );
  background-size: 0.75rem 0.5rem;
  background-repeat: repeat-x;
}

.hb-code {
  overflow-x: auto;
  padding: var(--hb-space-4);
  margin: 0;
  font-family: var(--hb-font-mono);
  font-size: 0.72rem;
  line-height: var(--hb-leading-code);
  color: rgba(255, 255, 255, 0.8);
  tab-size: 2;
}

@media (min-width: 48em) {
  .hb-code {
    padding: var(--hb-space-6);
    font-size: 0.8rem;
  }
}

.hb-code__line {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  transition: opacity var(--hb-duration-slow);
}

.hb-js .hb-codepane[data-hb-code] .hb-code__line {
  opacity: 0;
}

.hb-js .hb-codepane[data-hb-code].is-revealed .hb-code__line {
  opacity: 1;
  transition-delay: calc(var(--hb-i, 0) * 55ms);
}

.hb-code__no {
  -webkit-user-select: none;
  user-select: none;
  color: rgba(255, 255, 255, 0.2);
}

.hb-tok--key {
  color: var(--hb-color-code-key);
}

.hb-tok--str {
  color: var(--hb-color-code-str);
}

.hb-tok--com {
  color: rgba(255, 255, 255, 0.3);
}

.hb-tok--fn {
  color: var(--hb-color-code-fn);
}

.hb-tok--num {
  color: var(--hb-color-code-num);
}

/* -- FAQ accordion -------------------------------------------------------- */
.hb-faq__title {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.hb-faq__list {
  border-top: 1px solid var(--hb-color-border);
}

.hb-faq__item {
  border-bottom: 1px solid var(--hb-color-border);
}

.hb-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hb-space-4);
  padding-block: var(--hb-space-6);
  cursor: pointer;
  font-family: var(--hb-font-display);
  font-size: var(--hb-text-lg);
  font-weight: var(--hb-weight-medium);
  letter-spacing: var(--hb-tracking-tight);
  list-style: none;
}

.hb-faq__question::-webkit-details-marker {
  display: none;
}

.hb-faq__question svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--hb-color-muted-fg);
  transition: transform 200ms;
}

.hb-faq__item[open] .hb-faq__question svg {
  transform: rotate(180deg);
}

.hb-faq__answer {
  max-width: 42rem;
  padding-bottom: var(--hb-space-7);
  font-size: var(--hb-text-body);
  line-height: var(--hb-leading-relaxed);
  color: var(--hb-color-muted-fg);
}

.hb-faq__answer > * + * {
  margin-block-start: var(--hb-space-4);
}

/* JS-driven open/close, mirroring the Radix height animation. */
.hb-faq__item[data-hb-animating] {
  overflow: hidden;
}

/* -- Insight article ------------------------------------------------------ */
@media (min-width: 64em) {
  .hb-insight__layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--hb-space-12);
  }

  .hb-insight__toc {
    grid-column: span 3 / span 3;
    position: sticky;
    top: calc(var(--hb-header-h) + var(--hb-space-6));
    align-self: start;
  }

  .hb-insight__body {
    grid-column: span 8 / span 8;
    grid-column-start: 5;
  }
}

.hb-insight__toc ol {
  display: grid;
  gap: var(--hb-space-3);
  margin-block-start: var(--hb-space-5);
  font-size: var(--hb-text-base);
  color: var(--hb-color-muted-fg);
}

.hb-insight__toc a:hover {
  color: var(--hb-color-fg);
}

.hb-takeaways {
  margin-block-start: var(--hb-space-12);
  border-top: 1px solid var(--hb-color-border);
  padding-block-start: var(--hb-space-8);
}

.hb-takeaways .hb-string-list {
  margin-block-start: var(--hb-space-5);
}

/* -- 404, generic page, search -------------------------------------------- */
.hb-404__inner {
  display: grid;
  gap: var(--hb-space-4);
  justify-items: center;
  text-align: center;
  padding-block: var(--hb-space-24);
}

.hb-404__code {
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
}

.hb-404__title {
  font-size: var(--hb-text-xl);
  font-weight: var(--hb-weight-semibold);
}

.hb-404__inner .hb-lede {
  max-width: 28rem;
}

.hb-page__title {
  font-size: clamp(2.5rem, 7vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.hb-archive {
  padding-block: var(--hb-section-y);
}

.hb-archive__item {
  border-top: 1px solid var(--hb-color-border);
  padding-block: var(--hb-space-8);
}

.hb-archive__item h2 {
  font-size: var(--hb-text-xl);
}

/* Pagination (the_posts_pagination). */
.hb-main .navigation.pagination {
  margin-block-start: var(--hb-space-12);
}

.hb-main .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-space-2);
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--hb-tracking-tag);
}

.hb-main .nav-links .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding-inline: var(--hb-space-2);
  border: 1px solid var(--hb-color-border);
  color: var(--hb-color-muted-fg);
  transition: background-color var(--hb-duration), color var(--hb-duration);
}

.hb-main .nav-links .page-numbers:hover {
  background: var(--hb-color-accent);
  color: var(--hb-color-fg);
}

.hb-main .nav-links .page-numbers.current {
  background: var(--hb-color-fg);
  border-color: var(--hb-color-fg);
  color: var(--hb-color-bg);
}

/* Editor-only scaffold notice. */
.hb-notice {
  border: 1px dashed var(--hb-color-border);
  padding: var(--hb-space-4);
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-xs);
  color: var(--hb-color-muted-fg);
}

/* ===========================================================================
   11  FORMS
   src/routes/contact.tsx — labels are mono eyebrows, text inputs are a single
   bottom hairline, the textarea is a full box, topics are pressable chips.
   =========================================================================== */

.hb-contact__layout {
  display: grid;
  gap: var(--hb-space-14);
}

@media (min-width: 64em) {
  .hb-contact__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .hb-contact__form {
    grid-column: span 7 / span 7;
  }

  .hb-contact__aside {
    grid-column: span 5 / span 5;
    margin-block-start: 0;
  }
}

.hb-contact__aside > * + * {
  margin-block-start: var(--hb-space-8);
}

.hb-form {
  display: grid;
  gap: 1px;
  margin-block-start: var(--hb-space-8);
  background: var(--hb-color-border);
}

/* Every direct child is a cell of the hairline grid, so it must paint the page
   background — otherwise the 1px rule colour shows through behind it. */
.hb-form > * {
  background: var(--hb-color-bg);
}

.hb-form__row {
  padding-block: var(--hb-space-5);
}

.hb-form__row:last-child {
  padding-block: var(--hb-space-6);
}

@media (min-width: 48em) {
  .hb-form__row {
    padding-inline: var(--hb-space-6);
  }
}

/* A rendered <legend> punches a hole in its fieldset's background, which would
   show the hairline grid colour through the top of the row. Giving the legend
   the full width and the page background paints the hole shut. */
.hb-form legend {
  width: 100%;
  background: var(--hb-color-bg);
}

.hb-form label,
.hb-form legend {
  display: block;
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-xs);
  font-weight: var(--hb-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--hb-tracking-eyebrow);
  color: var(--hb-color-muted-fg);
}

.hb-form input[type="text"],
.hb-form input[type="email"],
.hb-form input[type="url"],
.hb-form input[type="tel"],
.hb-form input[type="search"],
.hb-form select {
  width: 100%;
  margin-block-start: var(--hb-space-3);
  border: 0;
  border-bottom: 1px solid var(--hb-color-input);
  border-radius: 0;
  background: transparent;
  padding: 0 0 var(--hb-space-2);
  font-family: var(--hb-font-display);
  font-size: var(--hb-text-lg);
  letter-spacing: var(--hb-tracking-tight);
  color: var(--hb-color-fg);
  outline: none;
  transition: border-color var(--hb-duration);
  appearance: none;
}

.hb-form select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 0.6rem center, right 0.25rem center;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: var(--hb-space-6);
}

.hb-form textarea {
  width: 100%;
  margin-block-start: var(--hb-space-3);
  resize: vertical;
  border: 1px solid var(--hb-color-input);
  border-radius: 0;
  background: transparent;
  padding: var(--hb-space-4);
  font-family: inherit;
  font-size: var(--hb-text-body);
  line-height: var(--hb-leading-relaxed);
  color: var(--hb-color-fg);
  outline: none;
  transition: border-color var(--hb-duration);
}

.hb-form ::placeholder {
  color: var(--hb-color-fg-25);
  opacity: 1;
}

.hb-form input:focus,
.hb-form select:focus,
.hb-form textarea:focus {
  border-color: var(--hb-color-fg);
}

.hb-form input:focus-visible,
.hb-form select:focus-visible,
.hb-form textarea:focus-visible {
  outline: 2px solid var(--hb-color-ring);
  outline-offset: 3px;
}

/* Validation. Only shown once the field has been interacted with, so an empty
   required field is not red before anyone has typed. */
.hb-form input:user-invalid,
.hb-form textarea:user-invalid {
  border-color: var(--hb-color-destructive);
}

/* Honeypot. Off-screen rather than display:none, which bots read as a tell. */
.hb-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Returned-from-submit notice. */
.hb-form__alert {
  margin-block-start: var(--hb-space-6);
  border-left: 2px solid var(--hb-color-destructive);
  padding-left: var(--hb-space-4);
  font-size: var(--hb-text-body);
  line-height: var(--hb-leading-relaxed);
  color: var(--hb-color-fg);
}

.hb-form [aria-invalid="true"] {
  border-color: var(--hb-color-destructive);
}

.hb-form__error {
  margin-block-start: var(--hb-space-2);
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--hb-tracking-tag);
  color: var(--hb-color-destructive);
}

/* Topic chips: styled radios that look like the React toggle buttons. */
/* Flex, so the chips sit on their own rows at a known distance from the
   legend rather than at the mercy of inline half-leading. */
.hb-form__topics {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.hb-form__topics legend {
  flex: 0 0 100%;
}

.hb-form__topic {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  margin: 0 var(--hb-space-2) var(--hb-space-2) 0;
  border: 1px solid var(--hb-color-border);
  border-radius: var(--hb-radius-sm);
  padding-inline: var(--hb-space-3);
  font-size: var(--hb-text-base);
  color: var(--hb-color-muted-fg);
  cursor: pointer;
  transition: background-color var(--hb-duration), color var(--hb-duration),
    border-color var(--hb-duration);
}

.hb-form__topic:hover {
  background: var(--hb-color-accent);
}

.hb-form__topic input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.hb-form__topic:has(input:checked) {
  border-color: var(--hb-color-fg);
  background: var(--hb-color-fg);
  color: var(--hb-color-bg);
}

.hb-form__topic:has(input:focus-visible) {
  outline: 2px solid var(--hb-color-ring);
  outline-offset: 3px;
}

/* Checkbox / radio outside the chip pattern. */
.hb-form input[type="checkbox"],
.hb-form input[type="radio"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--hb-color-primary);
}

.hb-form__note {
  margin-block-start: var(--hb-space-4);
  font-size: var(--hb-text-sm);
  line-height: var(--hb-leading-relaxed);
  color: var(--hb-color-muted-fg);
}

/* The success panel shown after a successful submit (Phase 4 wires it up). */
.hb-form__sent {
  margin-block-start: var(--hb-space-8);
  border: 1px solid color-mix(in srgb, var(--hb-color-primary) 40%, transparent);
  background: color-mix(in srgb, var(--hb-color-primary) 5%, transparent);
  padding: var(--hb-space-8);
}

.hb-form__sent p:first-child {
  font-family: var(--hb-font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.hb-form__sent p + p {
  max-width: 28rem;
  margin-block-start: var(--hb-space-5);
  font-size: var(--hb-text-body);
  line-height: var(--hb-leading-relaxed);
  color: var(--hb-color-muted-fg);
}

/* WordPress search form, used by the search template. */
.search-form {
  display: flex;
  gap: var(--hb-space-2);
}

.search-form input[type="search"] {
  flex: 1;
  border: 1px solid var(--hb-color-input);
  border-radius: 0;
  background: transparent;
  padding: var(--hb-space-2) var(--hb-space-3);
}

/* ===========================================================================
   12  DATA VISUALS
   =========================================================================== */

/* -- Ticker (Ticker + @utility marquee-mask) ------------------------------ */
.hb-ticker {
  position: relative;
  overflow: hidden;
  padding-block: var(--hb-space-5);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.hb-ticker__track {
  display: flex;
  width: max-content;
  gap: var(--hb-space-10);
  animation: hb-marquee var(--hb-marquee) linear infinite;
}

.hb-ticker__track > li {
  display: flex;
  align-items: center;
  gap: var(--hb-space-10);
  white-space: nowrap;
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--hb-tracking-wide);
  color: var(--hb-color-muted-fg);
}

.hb-ticker__track > li::after {
  content: "";
  width: 0.25rem;
  height: 0.25rem;
  border-radius: var(--hb-radius-full);
  background: var(--hb-color-primary);
  opacity: 0.6;
}

@keyframes hb-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* -- Stat counters (Counter) ---------------------------------------------- */
.hb-stats {
  display: grid;
  gap: var(--hb-space-10);
}

@media (min-width: 40em) {
  .hb-stats {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
  }
}

.hb-stat__value {
  font-family: var(--hb-font-display);
  font-size: 2.25rem;
  font-weight: var(--hb-weight-medium);
  letter-spacing: var(--hb-tracking-tight);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 48em) {
  .hb-stat__value {
    font-size: 3rem;
  }
}

.hb-stat .hb-eyebrow {
  margin-block-start: var(--hb-space-2);
}

/* -- Lighthouse dials (Dial) ---------------------------------------------- */
.hb-dials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-space-10);
}

.hb-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hb-dial__ring {
  position: relative;
  width: 6rem;
  height: 6rem;
}

.hb-dial__ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hb-dial__track {
  fill: none;
  stroke: var(--hb-color-hairline);
  stroke-width: 3;
}

.hb-dial__arc {
  fill: none;
  stroke: var(--hb-color-primary);
  stroke-width: 3;
  stroke-linecap: butt;
  /* 2 * PI * r, r = 42 */
  stroke-dasharray: 263.894;
  stroke-dashoffset: 0;
}

/* The server renders the arc at its true value; JS resets it to zero and
   animates up, so the transition is all the stylesheet needs to provide. */
.hb-js .hb-dial[data-hb-dial] .hb-dial__arc {
  transition: stroke-dashoffset 90ms linear;
}

.hb-dial__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hb-font-display);
  font-size: var(--hb-text-2xl);
  font-weight: var(--hb-weight-medium);
  letter-spacing: var(--hb-tracking-tight);
  font-variant-numeric: tabular-nums;
}

.hb-dial > .hb-eyebrow {
  margin-block-start: var(--hb-space-3);
  font-size: 0.6rem;
}

/* -- Core Web Vitals bars (VitalsChart) ----------------------------------- */
.hb-vitals {
  display: grid;
  gap: var(--hb-space-8);
}

.hb-vital {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--hb-space-3);
}

.hb-vital__figures {
  font-family: var(--hb-font-display);
  font-size: var(--hb-text-base);
  letter-spacing: var(--hb-tracking-tight);
  color: var(--hb-color-muted-fg);
}

.hb-vital__figures s {
  text-decoration-color: var(--hb-color-fg-25);
}

.hb-vital__figures span {
  margin-inline: var(--hb-space-2);
  color: var(--hb-color-fg-25);
}

.hb-vital__figures strong {
  font-weight: inherit;
  color: var(--hb-color-primary);
}

.hb-vital__bar {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.375rem;
  margin-block-start: var(--hb-space-3);
}

.hb-vital__before,
.hb-vital__after {
  display: block;
  height: 0.375rem;
  width: 0;
  background: rgba(255, 255, 255, 0.08);
}

.hb-vital__before::before,
.hb-vital__after::before {
  content: "";
  display: block;
  height: 100%;
  width: 0;
  transition: width var(--hb-duration-bar) var(--hb-ease);
}

.hb-vital__before,
.hb-vital__after {
  width: 100%;
}

.hb-vital__before::before {
  background: rgba(255, 255, 255, 0.25);
  transition-delay: calc(var(--hb-i, 0) * 120ms);
}

.hb-vital__after::before {
  background: var(--hb-color-primary);
  transition-delay: calc(var(--hb-i, 0) * 120ms + 180ms);
}

.hb-vitals.is-revealed .hb-vital__before::before {
  width: var(--hb-before, 0%);
}

.hb-vitals.is-revealed .hb-vital__after::before {
  width: var(--hb-after, 0%);
}

/* Without JS the bars render at their final width immediately. */
html:not(.hb-js) .hb-vital__before::before {
  width: var(--hb-before, 0%);
}

html:not(.hb-js) .hb-vital__after::before {
  width: var(--hb-after, 0%);
}

/* -- Deployment pipeline (Pipeline) --------------------------------------- */
.hb-pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--hb-space-8);
}

@media (min-width: 48em) {
  .hb-pipeline {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.hb-pipeline::before,
.hb-pipeline::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  height: 1px;
}

.hb-pipeline::before {
  right: 0;
  background: rgba(255, 255, 255, 0.12);
}

.hb-pipeline::after {
  width: 0;
  background: var(--hb-color-primary);
  transition: width var(--hb-duration-pipeline) var(--hb-ease);
}

.hb-pipeline.is-revealed::after,
html:not(.hb-js) .hb-pipeline::after {
  width: 100%;
}

.hb-pipeline__step {
  position: relative;
}

.hb-pipeline__dot {
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--hb-radius-full);
  background: transparent;
  transition: background-color var(--hb-duration-slow),
    border-color var(--hb-duration-slow);
  transition-delay: calc(var(--hb-i, 0) * 300ms);
}

.hb-pipeline.is-revealed .hb-pipeline__dot,
html:not(.hb-js) .hb-pipeline__dot {
  border-color: var(--hb-color-primary);
  background: var(--hb-color-primary);
}

.hb-pipeline__step .hb-eyebrow {
  display: block;
  margin-block-start: var(--hb-space-4);
  letter-spacing: var(--hb-tracking-tag);
}

/* ---------------------------------------------------------------------------
   Storefront mock — the abstract shop UI inside the comparator and the devices
   --------------------------------------------------------------------------- */

.hb-mock {
  height: 100%;
  width: 100%;
  background: var(--hb-color-card);
  -webkit-user-select: none;
  user-select: none;
}

.hb-mock--legacy {
  background: var(--hb-color-muted);
}

.hb-mock__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hb-space-3);
  border-bottom: 1px solid var(--hb-color-border);
  padding: var(--hb-space-3) var(--hb-space-4);
}

.hb-mock__brand {
  font-family: var(--hb-font-display);
  font-size: var(--hb-text-sm);
  font-weight: var(--hb-weight-semibold);
  letter-spacing: var(--hb-tracking-tight);
}

.hb-mock__nav {
  display: flex;
  gap: var(--hb-space-2);
  font-family: var(--hb-font-mono);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hb-color-muted-fg);
}

.hb-mock__body {
  padding: var(--hb-space-4);
}

.hb-mock__warning {
  margin-block-end: var(--hb-space-3);
  border: 1px solid color-mix(in srgb, var(--hb-color-destructive) 30%, transparent);
  background: color-mix(in srgb, var(--hb-color-destructive) 5%, transparent);
  padding: var(--hb-space-1) var(--hb-space-2);
  font-family: var(--hb-font-mono);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hb-color-destructive);
}

.hb-mock__filters {
  display: flex;
  align-items: center;
  gap: var(--hb-space-2);
  margin-block-end: var(--hb-space-4);
}

.hb-mock__filter {
  border: 1px solid var(--hb-color-border);
  padding: var(--hb-space-1) var(--hb-space-2);
  font-family: var(--hb-font-mono);
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hb-color-muted-fg);
}

.hb-mock__filter.is-active {
  border-color: var(--hb-color-fg);
  background: var(--hb-color-fg);
  color: var(--hb-color-bg);
}

.hb-mock__grid {
  display: grid;
  grid-template-columns: repeat(var(--hb-mock-cols, 3), minmax(0, 1fr));
  gap: var(--hb-space-3);
}

.hb-mock__image {
  display: block;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--hb-color-border);
  background: var(--hb-color-surface-strong);
}

.hb-mock--legacy .hb-mock__image {
  background: var(--hb-color-bg);
}

.hb-mock__line,
.hb-mock__price {
  display: block;
  height: 0.375rem;
  margin-block-start: var(--hb-space-2);
  background: var(--hb-color-fg-12);
}

.hb-mock__line {
  width: 75%;
}

.hb-mock__price {
  width: 33%;
  margin-block-start: 0.375rem;
  background: color-mix(in srgb, var(--hb-color-primary) 60%, transparent);
}

/* ---------------------------------------------------------------------------
   Before / after comparator
   --------------------------------------------------------------------------- */

.hb-compare__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--hb-color-border);
  background: var(--hb-color-card);
}

@media (min-width: 48em) {
  .hb-compare__stage {
    aspect-ratio: 16 / 8;
  }
}

.hb-compare__layer {
  position: absolute;
  inset: 0;
}

.hb-compare__layer--after {
  clip-path: inset(0 0 0 var(--hb-split, 52%));
}

.hb-compare__tag {
  position: absolute;
  top: var(--hb-space-4);
  padding: var(--hb-space-1) var(--hb-space-2);
  font-family: var(--hb-font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: var(--hb-tracking-eyebrow);
}

.hb-compare__tag--before {
  left: var(--hb-space-4);
  background: var(--hb-color-fg);
  color: var(--hb-color-bg);
}

.hb-compare__tag--after {
  right: var(--hb-space-4);
  background: var(--hb-color-primary);
  color: var(--hb-color-primary-fg);
}

.hb-compare__divider {
  position: absolute;
  inset-block: 0;
  left: var(--hb-split, 52%);
  width: 1px;
  background: var(--hb-color-fg);
  pointer-events: none;
}

.hb-compare__grip {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  transform: translate(-50%, -50%);
  border-radius: var(--hb-radius-full);
  background: var(--hb-color-fg);
  color: var(--hb-color-bg);
  font-family: var(--hb-font-mono);
  font-size: 0.6rem;
}

/* The range input is the control surface: invisible, full-bleed, operable by
   pointer and keyboard alike. */
.hb-compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.hb-compare__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3rem;
  height: 100%;
}

.hb-compare__range::-moz-range-thumb {
  width: 3rem;
  height: 100%;
  border: 0;
  opacity: 0;
}

.hb-compare__range:focus-visible {
  outline: 2px solid var(--hb-color-ring);
  outline-offset: 3px;
}

.hb-compare figcaption {
  margin-block-start: var(--hb-space-4);
}

/* ---------------------------------------------------------------------------
   SVG diagrams — architecture map and sequence diagram
   --------------------------------------------------------------------------- */

.hb-diagram {
  overflow-x: auto;
}

.hb-diagram__svg {
  width: 100%;
  height: auto;
  min-width: 45rem;
}

.hb-diagram__svg--wide {
  min-width: 42.5rem;
}

.hb-diagram__path {
  fill: none;
  stroke: var(--hb-color-fg-25);
  stroke-width: 1;
  stroke-dasharray: 5 5;
  stroke-dashoffset: 0;
}

.hb-js .hb-diagram[data-hb-diagram] .hb-diagram__path {
  stroke-dashoffset: 260;
  transition: stroke-dashoffset 1.4s var(--hb-ease);
  transition-delay: calc(var(--hb-i, 0) * 120ms);
}

.hb-js .hb-diagram.is-revealed .hb-diagram__path {
  stroke-dashoffset: 0;
}

.hb-diagram__node rect {
  fill: var(--hb-color-card);
  stroke: var(--hb-color-border);
}

.hb-diagram__node text {
  font-family: var(--hb-font-mono);
  fill: var(--hb-color-muted-fg);
}

.hb-diagram__node--core rect {
  fill: var(--hb-color-fg);
}

.hb-diagram__node--core text {
  fill: var(--hb-color-bg);
}

.hb-js .hb-diagram[data-hb-diagram] .hb-diagram__node,
.hb-js .hb-diagram[data-hb-diagram] .hb-diagram__hop {
  opacity: 0;
  transition: opacity 0.7s ease;
  transition-delay: calc(var(--hb-i, 0) * 90ms);
}

.hb-js .hb-diagram[data-hb-diagram] .hb-diagram__hop {
  transition-delay: calc(var(--hb-i, 0) * 260ms);
}

.hb-js .hb-diagram.is-revealed .hb-diagram__node,
.hb-js .hb-diagram.is-revealed .hb-diagram__hop {
  opacity: 1;
}

.hb-diagram__lane text {
  font-family: var(--hb-font-mono);
  fill: rgba(255, 255, 255, 0.45);
}

.hb-diagram__lane line {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-dasharray: 3 6;
}

.hb-diagram__hop line,
.hb-diagram__hop path {
  stroke: var(--hb-color-primary);
  fill: var(--hb-color-primary);
}

.hb-diagram__hop--return line,
.hb-diagram__hop--return path {
  stroke: rgba(255, 255, 255, 0.35);
  fill: rgba(255, 255, 255, 0.35);
}

.hb-diagram__hop text {
  font-family: var(--hb-font-mono);
  fill: rgba(255, 255, 255, 0.6);
  stroke: none;
}

/* ---------------------------------------------------------------------------
   Migration flow
   --------------------------------------------------------------------------- */

.hb-migration {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.hb-migration__head,
.hb-migration__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--hb-space-4);
  background: var(--hb-color-band-row);
  padding: var(--hb-space-4) var(--hb-space-5);
}

@media (min-width: 48em) {
  .hb-migration__head,
  .hb-migration__row {
    padding-inline: var(--hb-space-8);
  }
}

.hb-migration__row {
  padding-block: var(--hb-space-5);
}

.hb-js .hb-migration[data-hb-migration] .hb-migration__row {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--hb-duration-slower), transform var(--hb-duration-slower);
  transition-delay: calc(var(--hb-i, 0) * 140ms);
}

.hb-js .hb-migration.is-revealed .hb-migration__row {
  opacity: 1;
  transform: none;
}

.hb-migration__arrow {
  font-family: var(--hb-font-mono);
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.2);
}

.hb-migration__from,
.hb-migration__to > span {
  font-family: var(--hb-font-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
}

.hb-migration__to {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--hb-space-3);
}

.hb-migration__to > span {
  color: rgba(255, 255, 255, 0.8);
}

.hb-migration__to strong {
  font-family: var(--hb-font-mono);
  font-size: 0.6rem;
  font-weight: inherit;
  letter-spacing: 0.1em;
  color: var(--hb-color-primary);
}

.hb-migration__link {
  position: relative;
  display: block;
  width: 3rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

@media (min-width: 48em) {
  .hb-migration__link {
    width: 6rem;
  }
}

.hb-migration__link > span {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0;
  background: var(--hb-color-primary);
  transition: width 900ms var(--hb-ease);
  transition-delay: calc(var(--hb-i, 0) * 140ms + 200ms);
}

.hb-migration.is-revealed .hb-migration__link > span,
html:not(.hb-js) .hb-migration__link > span {
  width: 100%;
}

/* ---------------------------------------------------------------------------
   Device showcase
   --------------------------------------------------------------------------- */

.hb-devices {
  position: relative;
}

.hb-devices__desktop {
  overflow: hidden;
  border: 1px solid var(--hb-color-border);
  background: var(--hb-color-bg);
}

.hb-devices__chrome {
  display: flex;
  align-items: center;
  gap: var(--hb-space-3);
  border-bottom: 1px solid var(--hb-color-border);
  background: color-mix(in srgb, var(--hb-color-muted) 60%, transparent);
  padding: 0.625rem var(--hb-space-3);
}

.hb-devices__dots {
  flex: none;
  width: 2rem;
  height: 0.5rem;
  background-image: radial-gradient(
    circle 4px at 4px 4px,
    var(--hb-color-fg-12) 98%,
    transparent 100%
  );
  background-size: 0.75rem 0.5rem;
  background-repeat: repeat-x;
}

.hb-devices__url {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-xs);
  color: var(--hb-color-muted-fg);
}

.hb-devices__screen {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.hb-devices__screen--phone {
  aspect-ratio: 9 / 17;
}

.hb-devices__phone {
  display: none;
}

@media (min-width: 48em) {
  .hb-devices__phone {
    display: block;
    position: absolute;
    right: var(--hb-space-4);
    bottom: -2.5rem;
    width: 10rem;
    overflow: hidden;
    border: 6px solid var(--hb-color-fg);
    border-radius: 1.25rem;
    background: var(--hb-color-bg);
    box-shadow: var(--hb-shadow-device);
  }
}

@media (min-width: 64em) {
  .hb-devices__phone {
    right: -1.5rem;
    width: 12rem;
  }
}

/* ---------------------------------------------------------------------------
   Hero build sequence
   --------------------------------------------------------------------------- */

.hb-build {
  display: grid;
  gap: 1px;
  border: 1px solid var(--hb-color-border);
  background: var(--hb-color-border);
}

@media (min-width: 64em) {
  .hb-build {
    grid-template-columns: 1.05fr 1fr;
  }
}

.hb-build__code {
  background: oklch(0.155 0.006 250);
  padding: var(--hb-space-5);
}

.hb-build__render {
  background: var(--hb-color-card);
  padding: var(--hb-space-5);
}

@media (min-width: 48em) {
  .hb-build__code,
  .hb-build__render {
    padding: var(--hb-space-8);
  }
}

.hb-build__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hb-space-3);
}

.hb-build__code .hb-build__file,
.hb-build__code .hb-eyebrow {
  color: rgba(255, 255, 255, 0.4);
}

.hb-build__file {
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-xs);
  letter-spacing: var(--hb-tracking-tight);
  color: var(--hb-color-muted-fg);
}

.hb-build__score {
  color: var(--hb-color-primary);
  transition: opacity var(--hb-duration-slower);
}

.hb-js .hb-build[data-hb-build] .hb-build__score {
  opacity: 0;
}

.hb-js .hb-build.is-complete .hb-build__score {
  opacity: 1;
}

.hb-build__code .hb-code {
  padding: 0;
  margin-block-start: var(--hb-space-6);
  line-height: 2;
}

.hb-js .hb-build[data-hb-build] .hb-build__line {
  opacity: 0.12;
  transform: translateY(3px);
  transition: opacity var(--hb-duration-slow), transform var(--hb-duration-slow);
}

.hb-js .hb-build[data-hb-build] .hb-build__line.is-done {
  opacity: 1;
  transform: none;
}

.hb-build__frame {
  margin-block-start: var(--hb-space-6);
  border: 1px solid var(--hb-color-border);
  background: var(--hb-color-bg);
}

/* Every rendered part is present and visible without JS; the script only
   sequences their appearance. */
.hb-js .hb-build[data-hb-build] [data-hb-part] {
  opacity: 0;
  transition: opacity var(--hb-duration-slower), transform var(--hb-duration-slower);
}

.hb-js .hb-build[data-hb-build] [data-hb-part].is-done {
  opacity: 1;
  transform: none;
}

.hb-js .hb-build[data-hb-build] .hb-build__image {
  transform: scale(0.97);
}

.hb-js .hb-build[data-hb-build] .hb-build__cta {
  transform: translateY(6px);
}

.hb-build__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hb-color-border);
  padding: var(--hb-space-3) var(--hb-space-4);
}

.hb-build__brand {
  font-family: var(--hb-font-display);
  font-size: 0.7rem;
  font-weight: var(--hb-weight-semibold);
  letter-spacing: var(--hb-tracking-tight);
}

.hb-build__nav {
  display: flex;
  gap: var(--hb-space-2);
  font-family: var(--hb-font-mono);
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hb-color-muted-fg);
}

.hb-build__pdp {
  display: grid;
  gap: var(--hb-space-4);
  padding: var(--hb-space-4);
}

@media (min-width: 40em) {
  .hb-build__pdp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hb-build__image {
  display: block;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--hb-color-border);
  background: var(--hb-color-muted);
}

.hb-build__detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--hb-space-3);
}

.hb-build__title,
.hb-build__sub {
  display: block;
  height: 0.625rem;
  background: var(--hb-color-fg-70);
}

.hb-build__title {
  width: 80%;
}

.hb-build__sub {
  width: 33%;
  height: 0.5rem;
  background: var(--hb-color-fg-25);
}

.hb-build__price {
  font-family: var(--hb-font-display);
  font-size: var(--hb-text-lg);
  font-weight: var(--hb-weight-medium);
  letter-spacing: var(--hb-tracking-tight);
}

.hb-build__variants {
  display: flex;
  gap: var(--hb-space-2);
}

.hb-build__variants > span {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--hb-color-border);
  font-family: var(--hb-font-mono);
  font-size: 0.6rem;
  transition-delay: calc(var(--hb-i, 0) * 90ms);
}

.hb-build__cta {
  display: grid;
  place-items: center;
  height: 2.25rem;
  background: var(--hb-color-primary);
  color: var(--hb-color-primary-fg);
  font-family: var(--hb-font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: var(--hb-tracking-eyebrow);
}

.hb-build__deferred {
  border-top: 1px dashed var(--hb-color-border);
  padding: var(--hb-space-3) var(--hb-space-4);
}

.hb-build__deferred .hb-eyebrow {
  font-size: 0.55rem;
}

/* ---------------------------------------------------------------------------
   Per-service visuals
   --------------------------------------------------------------------------- */

.hb-svis {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--hb-color-border);
  background: var(--hb-color-card);
}

.hb-svis--build {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hb-svis__pane {
  display: grid;
  align-content: start;
  gap: var(--hb-space-2);
  padding: var(--hb-space-3);
}

.hb-svis__pane--source {
  border-right: 1px dashed var(--hb-color-border);
  background: var(--hb-color-muted);
}

.hb-svis__pane--source .hb-svis__block,
.hb-svis__pane--source .hb-svis__row i,
.hb-svis__pane--source .hb-svis__rule {
  border: 1px dashed var(--hb-color-fg-25);
  background: none;
}

.hb-svis__block {
  height: 2.5rem;
  background: color-mix(in srgb, var(--hb-color-fg) 8%, transparent);
}

.hb-svis__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hb-space-2);
}

.hb-svis__row i {
  aspect-ratio: 1;
  background: var(--hb-color-muted);
}

.hb-svis__rule {
  width: 66%;
  height: 0.5rem;
}

.hb-svis__rule--accent {
  background: color-mix(in srgb, var(--hb-color-primary) 60%, transparent);
}

.hb-js .hb-svis[data-hb-svis] .hb-svis__pane--live > :not(.hb-eyebrow) {
  opacity: 0;
  transition: opacity var(--hb-duration-slower);
  transition-delay: calc(var(--hb-i, 0) * 120ms);
}

.hb-js .hb-svis.is-revealed .hb-svis__pane--live > :not(.hb-eyebrow) {
  opacity: 1;
}

.hb-svis--apps {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.hb-svis__sidebar {
  display: grid;
  align-content: start;
  gap: var(--hb-space-2);
  border-right: 1px solid var(--hb-color-border);
  background: var(--hb-color-muted);
  padding: var(--hb-space-3);
  font-family: var(--hb-font-mono);
  font-size: 0.55rem;
  color: var(--hb-color-muted-fg);
}

.hb-svis__sidebar .is-active {
  background: var(--hb-color-fg);
  color: var(--hb-color-bg);
  padding: var(--hb-space-1) var(--hb-space-2);
}

.hb-svis__panel {
  display: grid;
  align-content: start;
  gap: 0.375rem;
  padding: var(--hb-space-3);
}

.hb-svis__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--hb-space-2);
  font-family: var(--hb-font-display);
  font-size: 0.7rem;
  font-weight: var(--hb-weight-medium);
  letter-spacing: var(--hb-tracking-tight);
}

.hb-svis__badge {
  background: var(--hb-color-primary);
  color: var(--hb-color-primary-fg);
  padding: 0.125rem 0.375rem;
  font-family: var(--hb-font-mono);
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hb-svis__rule-row {
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--hb-color-border);
  padding: 0.375rem var(--hb-space-2);
  font-family: var(--hb-font-mono);
  font-size: 0.55rem;
  color: var(--hb-color-muted-fg);
}

.hb-svis__rule-row strong {
  font-weight: inherit;
  color: var(--hb-color-fg);
}

.hb-svis--optimise {
  display: grid;
  place-items: center;
  padding-inline: var(--hb-space-4);
}

.hb-svis--optimise .hb-dials {
  justify-content: space-around;
  width: 100%;
}

.hb-svis--migrate {
  display: flex;
  align-items: center;
  gap: var(--hb-space-4);
  padding-inline: var(--hb-space-5);
}

.hb-svis__from,
.hb-svis__to {
  flex: 1;
  padding: var(--hb-space-3);
  text-align: center;
  font-family: var(--hb-font-mono);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: var(--hb-tracking-tag);
}

.hb-svis__from {
  border: 1px dashed var(--hb-color-border);
  color: var(--hb-color-muted-fg);
}

.hb-svis__to {
  border: 1px solid var(--hb-color-fg);
}

.hb-svis__bridge {
  position: relative;
  flex: 1;
  text-align: center;
}

.hb-svis__bridge .hb-eyebrow {
  font-size: 0.5rem;
  letter-spacing: var(--hb-tracking-tag);
}

.hb-svis__track {
  display: block;
  position: relative;
  height: 1px;
  margin-block-start: var(--hb-space-2);
  background: var(--hb-color-border);
}

.hb-svis__track > span {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0;
  background: var(--hb-color-primary);
  transition: width var(--hb-duration-bar) var(--hb-ease);
}

.hb-svis.is-revealed .hb-svis__track > span,
html:not(.hb-js) .hb-svis__track > span {
  width: 100%;
}

/* ===========================================================================
   13  PROSE AND EDITOR BLOCKS
   The insight article body is native block content.
   =========================================================================== */

.hb-prose {
  font-size: var(--hb-text-md);
  line-height: var(--hb-leading-relaxed);
  color: var(--hb-color-muted-fg);
}

.hb-prose > * + * {
  margin-block-start: var(--hb-space-6);
}

.hb-prose h2 {
  margin-block-start: var(--hb-space-14);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--hb-color-fg);
}

.hb-prose h3 {
  margin-block-start: var(--hb-space-10);
  font-size: var(--hb-text-xl);
  color: var(--hb-color-fg);
}

.hb-prose h4 {
  margin-block-start: var(--hb-space-8);
  font-size: var(--hb-text-lg);
  color: var(--hb-color-fg);
}

.hb-prose strong {
  color: var(--hb-color-fg);
  font-weight: var(--hb-weight-semibold);
}

.hb-prose a {
  color: var(--hb-color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.hb-prose ul,
.hb-prose ol {
  display: grid;
  gap: var(--hb-space-3);
  padding-left: var(--hb-space-6);
}

.hb-prose ul {
  list-style: disc;
}

.hb-prose ol {
  list-style: decimal;
}

.hb-prose li::marker {
  color: var(--hb-color-fg-35);
}

.hb-prose blockquote {
  border-left: 2px solid var(--hb-color-primary);
  padding-left: var(--hb-space-6);
  font-family: var(--hb-font-display);
  font-size: var(--hb-text-xl);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--hb-color-fg);
}

.hb-prose code {
  font-family: var(--hb-font-mono);
  font-size: 0.875em;
  background: var(--hb-color-muted);
  padding: 0.1em 0.35em;
}

.hb-prose pre {
  overflow-x: auto;
  background: var(--hb-color-band-row);
  color: rgba(255, 255, 255, 0.8);
  padding: var(--hb-space-4);
  font-family: var(--hb-font-mono);
  font-size: 0.8rem;
  line-height: var(--hb-leading-code);
}

.hb-prose pre code {
  background: none;
  padding: 0;
}

.hb-prose figure img,
.hb-prose img {
  border: 1px solid var(--hb-color-border);
}

.hb-prose figcaption {
  margin-block-start: var(--hb-space-3);
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--hb-tracking-eyebrow);
  color: var(--hb-color-muted-fg);
}

.hb-prose hr {
  margin-block: var(--hb-space-10);
}

.hb-prose table {
  font-size: var(--hb-text-base);
}

.hb-prose th,
.hb-prose td {
  border: 1px solid var(--hb-color-border);
  padding: var(--hb-space-3);
  text-align: left;
}

.hb-prose th {
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--hb-tracking-tag);
  color: var(--hb-color-fg);
}

.hb-page__content {
  max-width: 48rem;
  margin-block-start: var(--hb-space-10);
}

.hb-page__content > * + * {
  margin-block-start: var(--hb-space-6);
}

/* Core alignment classes, so wide/full blocks behave inside the shell. */
.hb-prose .alignwide {
  max-width: min(var(--hb-container-max), 100%);
}

.hb-prose .alignfull {
  max-width: none;
}

.hb-prose .alignleft,
.hb-prose .alignright {
  max-width: 50%;
}

.hb-prose .alignleft {
  float: left;
  margin: 0 var(--hb-space-6) var(--hb-space-6) 0;
}

.hb-prose .alignright {
  float: right;
  margin: 0 0 var(--hb-space-6) var(--hb-space-6);
}

.hb-prose .aligncenter {
  margin-inline: auto;
}

/* ===========================================================================
   14  UTILITIES AND ACCESSIBILITY
   =========================================================================== */

.hb-skip-link,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hb-skip-link:focus,
.hb-skip-link:focus-visible {
  position: absolute;
  z-index: 60;
  top: var(--hb-space-4);
  left: var(--hb-space-4);
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  border-radius: var(--hb-radius-sm);
  background: var(--hb-color-fg);
  color: var(--hb-color-bg);
  padding: var(--hb-space-2) var(--hb-space-4);
  font-size: var(--hb-text-base);
}

.hb-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Arrow that lifts on hover, as every card link in the source does. */
.hb-icon--arrow-up-right {
  transition: transform var(--hb-duration) var(--hb-ease);
}

a:hover > .hb-icon--arrow-up-right,
a:hover .hb-icon--arrow-up-right {
  transform: translate(2px, -2px);
}

/* Admin bar must not sit over the sticky header. */
.admin-bar .hb-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .hb-header {
    top: 46px;
  }
}

@media print {
  .hb-header,
  .hb-footer,
  .hb-progress,
  .hb-ticker {
    display: none;
  }

  .hb-main > section {
    padding-block: var(--hb-space-4);
  }
}