/* HUMAI theme. Tokens first: six colour roles, two families, one accent hue in two lightnesses. */
:root {
  --sc-canvas: #0b1327;
  --sc-surface: #13203f;
  --sc-ink: #f3f5fa;
  --sc-ink-soft: #a9b4cc;
  --sc-accent: #c9a84c;
  --sc-accent-ink: #0b1327;
  --sc-font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, -apple-system, sans-serif;
  --sc-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sc-shadow-color: 222 48% 3%;
  --sc-r-sm: 6px; --sc-r-md: 12px; --sc-r-lg: 20px; --sc-r-pill: 999px;
  --h-navy: #0f1e3c; --h-navy-l: #1a2f55; --h-navy-d: #080f1e;
  --h-gold: #c9a84c; --h-gold-l: #d4b96a; --h-gold-d: #a8882e;
  --h-nav: 4.5rem;
  --h-light-canvas: #f4f6fa; --h-light-surface: #ffffff; --h-light-ink: #0f1e3c; --h-light-soft: #4b5670;
  color-scheme: dark;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); font-size: var(--sc-t-base); line-height: var(--sc-leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--sc-font-display); font-weight: 700; letter-spacing: var(--sc-track-snug); line-height: var(--sc-leading-tight); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.h-mono { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }
.h-kicker { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); }
.h-skip { position: absolute; left: -999px; top: 0; z-index: 100; padding: .75rem 1rem; background: var(--sc-accent); color: var(--sc-accent-ink); }
.h-skip:focus { left: 1rem; top: 1rem; }
.sc-display { font-family: var(--sc-font-display); }
.sc-lede { font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); max-width: 46ch; }
.sc-body { max-width: var(--sc-measure); color: var(--sc-ink-soft); }

/* Grounds. Restating color on the subtree is what makes an inverted section actually re-ink. */
.h-section { position: relative; padding-block: var(--sc-section); }
.h-section--dark { background: var(--sc-canvas); color: var(--sc-ink); }
.h-section--light { --sc-canvas: var(--h-light-canvas); --sc-surface: var(--h-light-surface); --sc-ink: var(--h-light-ink); --sc-ink-soft: var(--h-light-soft); --sc-accent: var(--h-gold-d); --sc-accent-ink: #ffffff; --sc-shadow-color: 222 30% 20%; background: var(--sc-canvas); color: var(--sc-ink); color-scheme: light; }
.h-section--light .h-kicker { color: var(--h-gold-d); }
.h-main { position: relative; z-index: 1; }

/* The persistent stage behind everything. */
.h-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 70% 20%, #16264a 0%, var(--sc-canvas) 55%, var(--h-navy-d) 100%); }
.h-stage__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transform: translate3d(0, calc(var(--h-parallax, 0) * 1px), 0); }
.h-swarm { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-swarm--near { filter: blur(1.5px); }
.h-stage__grain { position: absolute; inset: 0; opacity: .06; }

/* Navigation */
.h-nav { position: fixed; inset: 0 0 auto; z-index: var(--sc-z-chrome); transition: background-color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out); }
.h-nav.is-scrolled, .h-nav.is-open { background: color-mix(in oklab, var(--h-navy-d) 84%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent); }
.h-nav__wrap { height: var(--h-nav); max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); display: flex; align-items: center; gap: var(--sc-6); }
.h-nav__brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; margin-right: auto; min-width: 0; flex: 1 1 auto; }
.h-nav__mark { width: auto; height: 30px; }
.h-nav__name { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; white-space: nowrap; }
.h-nav__links { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.h-nav__link { position: relative; padding: .5rem 0; text-decoration: none; font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink-soft); transition: color 160ms var(--sc-ease-out); }
.h-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sc-accent); transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--sc-ease-out); }
.h-nav__link:hover, .h-nav__link.is-current { color: var(--sc-ink); }
.h-nav__link:hover::after, .h-nav__link.is-current::after { transform: scaleX(1); }
.h-nav__actions { display: flex; align-items: center; gap: var(--sc-3); flex-shrink: 0; }
.h-nav__toggle { display: none; align-items: center; gap: .5rem; padding: .55rem .8rem; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-pill); background: transparent; cursor: pointer; }
.h-nav__toggle-icon--close, .h-nav.is-open .h-nav__toggle-icon--open { display: none; }
.h-nav.is-open .h-nav__toggle-icon--close { display: block; }
.h-menu { position: absolute; top: 100%; left: 0; right: 0; height: calc(100svh - var(--h-nav)); box-sizing: border-box; background: var(--h-navy-d); padding: var(--sc-7) var(--sc-gutter); overflow: auto; }
.h-menu__links { display: grid; gap: .25rem; }
.h-menu__link { font-family: var(--sc-font-display); font-size: clamp(2rem, 8vw, 3rem); font-weight: 600; letter-spacing: var(--sc-track-snug); text-decoration: none; padding: .4rem 0; border-bottom: 1px solid var(--sc-hairline); }
.h-menu__link--cta { color: var(--sc-accent); }
.h-menu__meta { margin-top: var(--sc-7); color: var(--sc-ink-soft); line-height: 1.9; }
@media (max-width: 1040px) { .h-nav__links, .h-nav__actions .h-btn { display: none; } .h-nav__toggle { display: inline-flex; } }
@media (max-width: 640px) { .h-nav__wrap { gap: var(--sc-4); } .h-nav__name { display: none; } }

/* Buttons. One radius scale for the page: pills for actions, 12px for surfaces. */
.h-btn { display: inline-flex; align-items: center; gap: .55em; padding: .85em 1.45em; border-radius: var(--sc-r-pill); font-weight: 600; font-size: var(--sc-t-sm); line-height: 1; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out); }
.h-btn:active { transform: scale(.97); }
.h-btn__icon { width: 1.05em; height: 1.05em; transition: transform 160ms var(--sc-ease-out); }
.h-btn:hover .h-btn__icon { transform: translateX(3px); }
.h-btn--primary { background: var(--sc-accent); color: var(--sc-accent-ink); }
.h-btn--primary:hover { background: color-mix(in oklab, var(--sc-accent) 88%, white); }
.h-section--light .h-btn--primary { background: var(--h-navy); color: #fff; }
.h-section--light .h-btn--primary:hover { background: var(--h-navy-l); }
.h-btn--secondary { border-color: var(--sc-hairline-strong); color: var(--sc-ink); }
.h-btn--secondary:hover { border-color: var(--sc-ink); }
.h-btn--ghost { padding-inline: .2em; color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-accent); text-underline-offset: .3em; }
.h-btn--sm { padding: .65em 1.1em; }
.h-actions { display: flex; flex-wrap: wrap; gap: var(--sc-3); }

/* Hero */
.h-hero { position: relative; min-height: 100svh; display: grid; align-items: center; padding-top: var(--h-nav); }
.h-hero__wrap { width: 100%; }
.h-hero__copy { max-width: 46rem; }
.h-hero__title { font-size: clamp(2.5rem, 5.2vw, 4.8rem); line-height: .98; letter-spacing: var(--sc-track-tight); font-weight: 700; max-width: 14ch; }
.h-hero__name { display: block; color: var(--h-gold); font-size: .5em; font-weight: 600; letter-spacing: 0; line-height: 1.2; margin-bottom: .3em; }
.h-hero__lede { margin-top: var(--sc-5); }
.h-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4); margin-top: var(--sc-6); }
.h-hero__hint { position: absolute; right: var(--sc-gutter); bottom: var(--sc-6); opacity: .7; }
@media (max-width: 700px) { .h-hero__title { font-size: var(--sc-t-2xl); max-width: none; } .h-hero__hint { display: none; } }
@media (hover: none) { .h-hero__hint { display: none; } }

/* The ledger */
.h-work__head { margin-bottom: var(--sc-7); }
.h-ledger { border-top: 1px solid var(--sc-hairline-strong); }
.h-ledger__row { border-bottom: 1px solid var(--sc-hairline-strong); }
.h-ledger__link { display: grid; grid-template-columns: minmax(12rem, 1fr) 1.7fr auto; gap: var(--sc-6); align-items: baseline; padding: var(--sc-6) 0; text-decoration: none; transition: padding-left 220ms var(--sc-ease-out); }
.h-ledger__title { font-size: var(--sc-t-xl); font-weight: 600; transition: color 160ms var(--sc-ease-out); }
.h-ledger__summary { color: var(--sc-ink-soft); max-width: 52ch; }
.h-ledger__go { display: inline-flex; align-items: center; gap: .5em; color: var(--sc-ink-soft); transition: color 160ms var(--sc-ease-out); }
.h-ledger__icon { width: 1em; height: 1em; transition: transform 200ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .h-ledger__link:hover { padding-left: var(--sc-3); }
  .h-ledger__link:hover .h-ledger__title, .h-ledger__link:hover .h-ledger__go { color: var(--sc-accent); }
  .h-ledger__link:hover .h-ledger__icon { transform: translateX(4px); }
}
@media (max-width: 800px) { .h-ledger__link { grid-template-columns: 1fr; gap: var(--sc-3); padding: var(--sc-5) 0; } }

/* The process act: a pinned stage over the swarm. The pipeline is where the nodes dock. */
.h-process__stage { min-height: 100vh; display: grid; align-items: start; padding-top: calc(var(--h-nav) + 2vh); box-sizing: border-box; }
.h-process__inner { display: grid; gap: clamp(1.5rem, 3vh, 3rem); }
.h-process__lede { margin-top: var(--sc-3); }
.h-pipeline { display: flex; justify-content: space-between; gap: var(--sc-4); padding: clamp(2.5rem, 8vh, 5rem) 6% clamp(1rem, 3vh, 2rem); }
.h-pipe { position: relative; display: grid; justify-items: center; gap: 4.2rem; flex: 1; }
.h-pipe__dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--sc-ink-soft); background: var(--sc-canvas); padding: 0; cursor: pointer; transition: background-color 220ms var(--sc-ease-out), border-color 220ms var(--sc-ease-out), transform 220ms var(--sc-ease-out), box-shadow 220ms var(--sc-ease-out); }
.h-pipe.is-active .h-pipe__dot { background: var(--sc-accent); border-color: var(--sc-accent); transform: scale(1.3); box-shadow: 0 0 0 8px color-mix(in oklab, var(--sc-accent) 16%, transparent); }
.h-pipe.is-done .h-pipe__dot { background: var(--sc-ink-soft); border-color: var(--sc-ink-soft); }
.h-pipe__name { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); transition: color 200ms var(--sc-ease-out); }
.h-pipe.is-active .h-pipe__name { color: var(--sc-accent); }
.h-process__lower { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.h-process__text { position: relative; min-height: 8rem; }
.h-process__station-text { position: absolute; inset: 0 auto auto 0; max-width: 40ch; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); }
.h-process__station-text strong { color: var(--sc-ink); font-weight: 600; }
.h-console { background: color-mix(in oklab, var(--sc-surface) 86%, transparent); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-lg); padding: var(--sc-4) var(--sc-5); box-shadow: var(--sc-e3), var(--sc-edge); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); min-height: 15rem; display: flex; flex-direction: column; gap: var(--sc-3); }
.h-console__label { color: var(--sc-accent); }
.h-console__task { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); display: grid; gap: .25rem; }
.h-console__log { font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); line-height: 1.5; display: grid; gap: .3rem; color: var(--sc-ink-soft); }
.h-console__line { display: grid; grid-template-columns: 5.5rem 1fr; gap: .8rem; opacity: 0; transform: translateY(6px); animation: h-line 420ms var(--sc-ease-out) forwards; }
.h-console__line b { font-weight: 500; color: var(--sc-accent); }
.h-console__line--ok { color: var(--sc-ink); }
@keyframes h-line { to { opacity: 1; transform: none; } }
.h-console__verify { border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-3); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sc-3); }
.h-console__verify .h-console__result { grid-column: 1 / -1; }
.h-console__buttons { display: flex; gap: var(--sc-3); flex-wrap: wrap; }
.h-console__result { color: var(--sc-ink); min-height: 1.5em; font-size: var(--sc-t-sm); }
@media (max-width: 900px) {
  .h-process__stage { padding-block: calc(var(--h-nav) + .5rem) 1rem; align-items: start; }
  .h-process__inner { gap: 1rem; }
  .h-pipeline { padding: 2.2rem 0 1rem; }
  .h-pipe { gap: 2.4rem; }
  .h-pipe__name { font-size: .62rem; }
  .h-process__lower { grid-template-columns: 1fr; gap: var(--sc-4); }
  .h-process__text { min-height: 6.5rem; }
  .h-process__station-text { font-size: var(--sc-t-base); }
  .h-console { min-height: 0; padding: var(--sc-4); }
  .h-console__log { font-size: var(--sc-t-xs); }
}

/* Products */
.h-products__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.h-products__tagline { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; }
.h-facts { display: grid; gap: .5rem; padding-top: var(--sc-2); }
.h-facts li { display: flex; gap: .7rem; align-items: baseline; }
.h-facts li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sc-accent); flex: none; transform: translateY(-.1em); }
.h-stores { display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.h-store { display: inline-flex; align-items: center; gap: .55rem; padding: .6rem .95rem; border-radius: var(--sc-r-md); border: 1px solid var(--sc-hairline-strong); text-decoration: none; font-size: var(--sc-t-sm); font-weight: 500; transition: border-color 160ms var(--sc-ease-out), transform 140ms var(--sc-ease-out); }
.h-store:hover { border-color: var(--sc-accent); transform: translateY(-1px); }
.h-store__icon { width: 1.1rem; height: 1.1rem; color: var(--sc-accent); }
.h-products__device { display: grid; justify-items: center; gap: var(--sc-4); }
.h-phone { position: relative; width: min(300px, 78vw); aspect-ratio: 780 / 1688; border-radius: 44px; padding: 10px; background: var(--h-navy-d); box-shadow: var(--sc-e3), inset 0 0 0 2px var(--h-gold-d); transform-style: preserve-3d; }
.h-phone__screen { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: cover; border-radius: 34px; opacity: 0; transition: opacity 420ms var(--sc-ease-out); }
.h-phone__screen.is-active { opacity: 1; }
.h-tabs { display: flex; gap: .25rem; padding: .25rem; border-radius: var(--sc-r-pill); border: 1px solid var(--sc-hairline-strong); }
.h-tab { padding: .5rem .95rem; border: 0; border-radius: var(--sc-r-pill); background: transparent; font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink-soft); cursor: pointer; transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out); }
.h-tab.is-active { background: var(--h-navy); color: #fff; }
.h-device__note { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); text-align: center; max-width: 34ch; min-height: 3em; }
@media (max-width: 900px) { .h-products__grid { grid-template-columns: 1fr; } .h-products__device { order: -1; } }

/* Principles */
.h-principles__list { margin-top: var(--sc-6); display: grid; }
.h-principle { padding: var(--sc-6) 0; border-top: 1px solid var(--sc-hairline-strong); font-weight: 600; max-width: 22ch; }
.h-principle:last-child { border-bottom: 1px solid var(--sc-hairline-strong); }

/* Research and index rows */
.h-research__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.h-research__badge { width: min(22rem, 100%); border-radius: var(--sc-r-md); box-shadow: var(--sc-e2); }
.h-index { border-top: 1px solid var(--sc-hairline-strong); }
.h-index__row { padding: var(--sc-5) 0; border-bottom: 1px solid var(--sc-hairline-strong); display: grid; gap: .4rem; }
.h-index__title { font-size: var(--sc-t-xl); font-weight: 600; }
.h-index__title a { text-decoration: none; }
.h-index__title a:hover { color: var(--sc-accent); }
.h-index__text { color: var(--sc-ink-soft); max-width: 60ch; }
@media (max-width: 900px) { .h-research__grid { grid-template-columns: 1fr; } }

/* Team */
.h-team__head { margin-bottom: var(--sc-7); }
.h-people { display: grid; grid-template-columns: 1.15fr 1fr; grid-auto-rows: auto; gap: var(--sc-5); }
.h-person { display: grid; grid-template-columns: 8rem 1fr; gap: var(--sc-5); align-items: start; padding: var(--sc-5); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-lg); background: color-mix(in oklab, var(--sc-surface) 60%, transparent); box-shadow: var(--sc-edge); }
.h-person--lead { grid-row: span 2; grid-template-columns: 1fr; padding: 0; overflow: hidden; }
.h-person--lead .h-person__media img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; object-position: top; }
.h-person--lead .h-person__body { padding: var(--sc-5); }
.h-person__media img { aspect-ratio: 1; object-fit: cover; border-radius: var(--sc-r-md); filter: grayscale(1) contrast(1.05); }
.h-person__initials { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--sc-r-md); background: var(--h-navy-d); color: var(--sc-accent); font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.h-person__name { font-size: var(--sc-t-lg); font-weight: 600; }
.h-person__role { margin: .25rem 0 .7rem; }
.h-person__bio { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 44ch; }
@media (max-width: 900px) { .h-people { grid-template-columns: 1fr; } .h-person--lead { grid-row: auto; } }
@media (max-width: 520px) { .h-person { grid-template-columns: 1fr; } .h-person__media img, .h-person__initials { width: 8rem; } }

/* Close and contact */
.h-close { min-height: 80vh; display: grid; align-items: center; background: transparent; }
.h-contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.h-contact__details { display: grid; gap: var(--sc-4); margin-top: var(--sc-6); }
.h-contact__details dt { margin-bottom: .2rem; }
.h-contact__details dd { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; }
.h-contact__details a { text-decoration: none; }
.h-contact__details a:hover { color: var(--sc-accent); }
.h-form { display: grid; gap: var(--sc-5); padding: var(--sc-6); border-radius: var(--sc-r-lg); border: 1px solid var(--sc-hairline-strong); background: color-mix(in oklab, var(--sc-surface) 80%, transparent); box-shadow: var(--sc-e3), var(--sc-edge); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.h-form__hp { position: absolute; left: -9999px; }
.h-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
.h-field { display: grid; gap: .45rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.h-field em { font-style: normal; opacity: .7; }
.h-field--wide { grid-column: 1 / -1; }
.h-field input, .h-field textarea { width: 100%; box-sizing: border-box; padding: .8rem .95rem; border-radius: var(--sc-r-md); border: 1px solid var(--sc-hairline-strong); background: color-mix(in oklab, var(--sc-canvas) 70%, transparent); color: var(--sc-ink); font: inherit; transition: border-color 160ms var(--sc-ease-out); }
.h-field input:focus, .h-field textarea { outline: none; }
.h-field input:focus, .h-field textarea:focus { border-color: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 25%, transparent); }
.h-form__actions { display: flex; align-items: center; gap: var(--sc-4); flex-wrap: wrap; }
.h-form__note { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }
.h-form__status { padding: .8rem 1rem; border-radius: var(--sc-r-md); font-size: var(--sc-t-sm); }
.h-form__status--ok { background: color-mix(in oklab, var(--sc-accent) 18%, transparent); color: var(--sc-ink); }
.h-form__status--err { background: color-mix(in oklab, #e05a4f 22%, transparent); color: var(--sc-ink); }
@media (max-width: 900px) { .h-contact { grid-template-columns: 1fr; } .h-form__grid { grid-template-columns: 1fr; } }

/* Inner page hero */
.h-pagehero { position: relative; min-height: 58vh; display: grid; align-items: end; padding: calc(var(--h-nav) + var(--sc-9)) 0 var(--sc-8); }
.h-pagehero__title { font-size: var(--sc-t-3xl); letter-spacing: var(--sc-track-tight); max-width: 16ch; }
.h-pagehero__lede { margin-top: var(--sc-4); }
.h-solution__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.h-points { display: grid; gap: var(--sc-2); counter-reset: pt; }
.h-point { padding: var(--sc-5); border-radius: var(--sc-r-lg); border: 1px solid var(--sc-hairline); background: color-mix(in oklab, var(--sc-surface) 70%, transparent); box-shadow: var(--sc-edge); display: grid; gap: .4rem; }
.h-points--compact .h-point { padding: var(--sc-4); background: transparent; border-color: var(--sc-hairline-strong); }
.h-point__title { font-size: var(--sc-t-lg); font-weight: 600; }
.h-point__text { color: var(--sc-ink-soft); max-width: 52ch; }
.h-product__head { display: flex; align-items: center; gap: var(--sc-4); }
.h-product__icon { width: 3.5rem; height: 3.5rem; border-radius: var(--sc-r-md); box-shadow: var(--sc-e2); }
.h-product__more { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); margin-top: var(--sc-9); }
.h-product__h3 { font-size: var(--sc-t-xl); font-weight: 600; margin-bottom: var(--sc-4); }
.h-product__col > .h-product__h3 + .h-product__h3, .h-checks + .h-product__h3 { margin-top: var(--sc-7); }
.h-checks { display: grid; gap: .7rem; }
.h-checks li { display: flex; gap: .7rem; align-items: flex-start; }
.h-checks__icon { flex: none; width: 1.3rem; height: 1.3rem; color: var(--sc-accent); margin-top: .1rem; }
.h-faq__item { border-top: 1px solid var(--sc-hairline-strong); }
.h-faq__item:last-child { border-bottom: 1px solid var(--sc-hairline-strong); }
.h-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; cursor: pointer; font-weight: 600; list-style: none; }
.h-faq__item summary::-webkit-details-marker { display: none; }
.h-faq__icon { width: 1rem; height: 1rem; transition: transform 200ms var(--sc-ease-out); color: var(--sc-accent); }
.h-faq__item[open] .h-faq__icon { transform: rotate(90deg); }
.h-faq__item p { padding-bottom: 1rem; color: var(--sc-ink-soft); max-width: 60ch; }
@media (max-width: 900px) { .h-solution__grid, .h-product__more { grid-template-columns: 1fr; } }

/* Prose for posts and generic pages */
.h-prose { max-width: var(--sc-measure); }
.h-prose > * + * { margin-top: 1.2em; }
.h-prose h2, .h-prose h3 { margin-top: 2em; }
.h-prose img { border-radius: var(--sc-r-md); }
.h-prose__cover { margin-bottom: var(--sc-6); }
.h-pagination { margin-top: var(--sc-7); }
.h-pagination .nav-links { display: flex; gap: 1rem; }

/* Footer */
.h-footer { position: relative; z-index: 1; background: var(--h-navy-d); color: var(--sc-ink); border-top: 1px solid var(--sc-hairline); }
.h-footer__wrap { max-width: var(--sc-maxw); margin-inline: auto; padding: var(--sc-9) var(--sc-gutter) var(--sc-7); display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--sc-7) var(--sc-6); }
.h-footer__logo { width: 5.5rem; border-radius: var(--sc-r-md); }
.h-footer__tagline { margin-top: var(--sc-4); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); }
.h-footer__desc { margin-top: .5rem; color: var(--sc-ink-soft); max-width: 34ch; font-size: var(--sc-t-sm); }
.h-footer__title { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); margin-bottom: var(--sc-4); font-weight: 500; }
.h-footer__list { display: grid; gap: .55rem; font-size: var(--sc-t-sm); }
.h-footer__list a { text-decoration: none; color: var(--sc-ink-soft); display: inline-flex; align-items: center; gap: .3rem; transition: color 140ms var(--sc-ease-out); }
.h-footer__list a:hover { color: var(--sc-ink); }
.h-footer__ext { width: .8em; height: .8em; opacity: .6; }
.h-footer__muted { display: block; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); opacity: .7; }
.h-footer__col--contact .h-btn { margin-top: var(--sc-5); }
.h-footer__eu { max-width: var(--sc-maxw); margin-inline: auto; padding: 0 var(--sc-gutter) var(--sc-7); display: flex; align-items: center; gap: var(--sc-5); flex-wrap: wrap; }
.h-footer__eu img { width: 15rem; border-radius: var(--sc-r-sm); }
.h-footer__eu p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 40ch; }
.h-footer__legal { border-top: 1px solid var(--sc-hairline); }
.h-footer__legal > * { max-width: var(--sc-maxw); margin-inline: auto; }
.h-footer__legal { display: flex; justify-content: space-between; gap: var(--sc-4); flex-wrap: wrap; padding: var(--sc-5) var(--sc-gutter); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.h-footer__legal-links { display: flex; gap: var(--sc-5); }
.h-footer__legal-links a { text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.h-footer__legal-links a:hover { color: var(--sc-ink); }
@media (max-width: 900px) { .h-footer__wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .h-footer__wrap { grid-template-columns: 1fr; } }

/* Reveal: the engine handles data-sc-in; keep things visible when JS never runs. */
.no-js [data-sc-in] { opacity: 1 !important; transform: none !important; }


/* Use cases: four plates in a two-by-two grid, then the close. */
.h-usecases__head { margin-bottom: var(--sc-7); }
.h-usecases__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5); counter-reset: uc; }
.h-usecase { position: relative; padding: var(--sc-6) var(--sc-6) var(--sc-6) calc(var(--sc-6) + 2.6rem); border-radius: var(--sc-r-lg); border: 1px solid var(--sc-hairline-strong); background: color-mix(in oklab, var(--sc-surface) 62%, transparent); box-shadow: var(--sc-edge); display: grid; gap: .6rem; align-content: start; }
.h-usecase::before { counter-increment: uc; content: counter(uc, decimal-leading-zero); position: absolute; left: var(--sc-5); top: calc(var(--sc-6) + .15rem); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--sc-accent); letter-spacing: var(--sc-track-wide); }
.h-usecase__tag { color: var(--sc-accent); }
.h-usecase__title { font-size: var(--sc-t-xl); font-weight: 600; }
.h-usecase__text { color: var(--sc-ink-soft); max-width: 48ch; }
.h-usecases__close { margin-top: var(--sc-7); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-4); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline-strong); }
.h-usecases__close p { color: var(--sc-ink-soft); max-width: 52ch; }
.h-usecases__close strong { color: var(--sc-ink); }
@media (max-width: 760px) { .h-usecases__grid { grid-template-columns: 1fr; gap: var(--sc-4); } .h-usecase { padding: var(--sc-5) var(--sc-5) var(--sc-5) calc(var(--sc-5) + 2.4rem); } .h-usecase::before { left: var(--sc-4); top: calc(var(--sc-5) + .15rem); } }

/* Comparison: a segmented control drives one table. */
.h-compare__head { margin-bottom: var(--sc-6); }
.h-compare__body { max-width: 52rem; display: grid; gap: var(--sc-5); }
.h-seg { position: relative; display: inline-flex; padding: .3rem; border-radius: var(--sc-r-pill); border: 1px solid var(--sc-hairline-strong); background: var(--sc-surface); box-shadow: var(--sc-e1); width: fit-content; max-width: 100%; }
.h-seg__btn { position: relative; z-index: 1; padding: .6rem 1.1rem; border: 0; background: transparent; border-radius: var(--sc-r-pill); font-weight: 600; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); cursor: pointer; transition: color 180ms var(--sc-ease-out); white-space: nowrap; }
.h-seg__btn.is-active { color: #fff; }
.h-seg__thumb { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: var(--sc-r-pill); background: var(--h-navy); transition: transform 320ms var(--sc-ease-out), width 320ms var(--sc-ease-out), height 320ms var(--sc-ease-out); }
.h-compare__table { margin: 0; border-top: 1px solid var(--sc-hairline-strong); }
.h-compare__row { display: grid; grid-template-columns: 11rem 1fr; gap: var(--sc-4); padding: var(--sc-4) 0; border-bottom: 1px solid var(--sc-hairline-strong); align-items: baseline; }
.h-compare__row dd { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); }
.h-compare__example { display: grid; gap: .3rem; color: var(--sc-ink-soft); }
.h-compare__example span:last-child { font-size: var(--sc-t-lg); color: var(--sc-ink); font-style: italic; }
@media (max-width: 640px) { .h-compare__row { grid-template-columns: 1fr; gap: .25rem; } .h-seg { width: 100%; } .h-seg__btn { flex: 1; padding-inline: .6rem; } }
@media (max-width: 480px) { .h-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; border-radius: var(--sc-r-lg); } }

/* FAQ block on the homepage */
.h-faqs__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
@media (max-width: 900px) { .h-faqs__grid { grid-template-columns: 1fr; } }

/* Anatomy of an agent: an exploded stack of isometric layers */
.h-anatomy__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.h-anatomy__parts { display: grid; gap: .2rem; counter-reset: an; margin-top: var(--sc-4); }
.h-anatomy__part { padding: .8rem 0 .8rem 2.2rem; position: relative; border-top: 1px solid var(--sc-hairline-strong); cursor: default; transition: color 200ms var(--sc-ease-out); }
.h-anatomy__part::before { counter-increment: an; content: counter(an); position: absolute; left: 0; top: .9rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid var(--sc-hairline-strong); display: grid; place-items: center; font-family: var(--sc-font-mono); font-size: .7rem; color: var(--sc-ink-soft); transition: background-color 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out); }
.h-anatomy__part.is-active::before, .h-anatomy__part.is-hot::before { background: var(--h-navy); color: #fff; border-color: var(--h-navy); }
.h-anatomy__part.is-hot h3 { color: var(--h-gold-d); }
.h-anatomy__part h3 { font-size: var(--sc-t-base); font-weight: 600; transition: color 160ms var(--sc-ease-out); }
.h-anatomy__part p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.h-anatomy__figure { margin: 0; }
.h-anatomy__svg { width: 100%; height: auto; overflow: visible; }
.h-anatomy__spine { stroke: var(--h-gold-d); stroke-width: 1.5; stroke-dasharray: 4 6; opacity: .7; }
.h-plate { cursor: pointer; outline: none; transition: opacity 400ms var(--sc-ease-out); }
.h-plate__side { fill: #c9cfdb; }
.h-plate__top { fill: url(#h-plate-grad); stroke: var(--h-navy); stroke-width: 1.2; transition: stroke 160ms var(--sc-ease-out), stroke-width 160ms var(--sc-ease-out); }
.h-plate.is-hot .h-plate__top, .h-plate:focus-visible .h-plate__top { stroke: var(--h-gold-d); stroke-width: 2.4; }
.h-plate--agent .h-plate__top { fill: url(#h-plate-core); stroke: var(--h-navy-l); }
.h-plate--agent .h-plate__side { fill: #080f1e; }
.h-plate__label { fill: var(--h-navy); font-family: var(--sc-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; text-anchor: middle; }
.h-plate--agent .h-plate__label { fill: #d4b96a; }
.h-plate__chip { fill: var(--h-navy); }
.h-plate__chiptext { fill: #fff; font-family: var(--sc-font-mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; text-anchor: middle; }
.h-plate__chiptext--dark { fill: #a9b4cc; }
.h-plate__halo { fill: var(--h-gold); opacity: .55; }
.h-plate__core { fill: var(--h-gold); stroke: #fff; stroke-width: 1.5; }
.h-plate__coretext { fill: var(--h-navy); font-family: var(--sc-font-display); font-weight: 700; font-size: 11px; text-anchor: middle; }
.h-plate__gate { fill: var(--h-gold); stroke: var(--h-gold-d); stroke-width: 1.2; }
.h-plate__person { fill: none; stroke: var(--h-navy); stroke-width: 1.8; }
circle.h-plate__person { fill: var(--h-navy); stroke: none; }
.h-plate__ledger { fill: none; stroke: var(--h-navy); stroke-width: 1; stroke-dasharray: 3 4; opacity: .7; }
@media (max-width: 900px) { .h-anatomy__grid { grid-template-columns: 1fr; } .h-anatomy__figure { order: -1; max-width: 26rem; margin-inline: auto; } }

/* Autonomy dial */
.h-autonomy__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.h-dial { padding: var(--sc-6); border-radius: var(--sc-r-lg); border: 1px solid var(--sc-hairline-strong); background: color-mix(in oklab, var(--sc-surface) 70%, transparent); box-shadow: var(--sc-e3), var(--sc-edge); display: grid; gap: var(--sc-4); }
.h-dial__label { color: var(--sc-accent); }
.h-dial__range { width: 100%; accent-color: var(--sc-accent); cursor: pointer; }
.h-dial__marks { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.h-dial__mark { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); cursor: pointer; transition: color 160ms var(--sc-ease-out); }
.h-dial__mark:nth-child(2), .h-dial__mark:nth-child(3) { text-align: center; }
.h-dial__mark:last-child { text-align: right; }
.h-dial__mark.is-active { color: var(--sc-accent); }
.h-dial__readout { border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-4); display: grid; gap: .5rem; }
.h-dial__name { font-size: var(--sc-t-xl); font-weight: 600; }
.h-dial__summary { color: var(--sc-ink); }
.h-dial__example { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.h-dial__bars { display: grid; gap: .5rem; margin-top: var(--sc-3); }
.h-dial__bar { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: .8rem; }
.h-dial__bar i { display: block; height: 8px; border-radius: 4px; background: color-mix(in oklab, var(--sc-ink) 10%, transparent); overflow: hidden; }
.h-dial__bar b { display: block; height: 100%; width: 100%; border-radius: 4px; background: var(--sc-accent); transform-origin: left; transform: scaleX(var(--w, .5)); transition: transform 500ms var(--sc-ease-out); }
@media (max-width: 900px) { .h-autonomy__grid { grid-template-columns: 1fr; } .h-dial { padding: var(--sc-5); } }

/* Guardrails, principles, product reasons: a two-column list with icons */
.h-guardrails__list { margin-top: var(--sc-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5) var(--sc-7); }
.h-guardrail { display: grid; grid-template-columns: 2rem 1fr; gap: var(--sc-3); align-items: start; padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline-strong); }
.h-guardrail__icon { width: 1.4rem; height: 1.4rem; color: var(--sc-accent); margin-top: .15rem; }
.h-guardrail h3, .h-guardrail h4 { font-size: var(--sc-t-lg); font-weight: 600; }
.h-guardrail p { color: var(--sc-ink-soft); margin-top: .25rem; max-width: 40ch; }
.h-product__why { margin-top: var(--sc-9); }
@media (max-width: 700px) { .h-guardrails__list { grid-template-columns: 1fr; gap: var(--sc-4); } }

/* Risk ladder */
.h-risk__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.h-ladder { display: grid; gap: var(--sc-3); }
.h-ladder__step { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--sc-4); padding: var(--sc-4) var(--sc-5); border-radius: var(--sc-r-lg); border: 1px solid var(--sc-hairline-strong); background: color-mix(in oklab, var(--sc-surface) calc(40% + var(--i) * 15%), transparent); }
.h-ladder__meter { display: flex; align-items: flex-end; height: 100%; min-height: 3rem; }
.h-ladder__meter i { display: block; width: 100%; height: calc(28% + var(--i) * 24%); border-radius: 4px 4px 2px 2px; background: linear-gradient(to top, var(--sc-accent), color-mix(in oklab, var(--sc-accent) 40%, transparent)); }
.h-ladder__level { font-size: var(--sc-t-lg); font-weight: 600; }
.h-ladder__examples { margin: .25rem 0 .5rem; }
.h-ladder__rule { color: var(--sc-ink); }
@media (max-width: 900px) { .h-risk__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .h-ladder__step { grid-template-columns: 3rem 1fr; padding: var(--sc-4); } }

/* How we work: four phases with a progress line */
.h-how__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.h-phases { position: relative; display: grid; gap: var(--sc-5); padding-left: 2.2rem; }
.h-phases::before { content: ""; position: absolute; left: .5rem; top: .6rem; bottom: .6rem; width: 2px; background: var(--sc-hairline-strong); }
.h-phase { position: relative; }
.h-phase__dot { position: absolute; left: -2.2rem; top: .35rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--sc-hairline-strong); background: var(--sc-canvas); transition: background-color 300ms var(--sc-ease-out), border-color 300ms var(--sc-ease-out); }
.h-phase.is-active .h-phase__dot { background: var(--h-gold); border-color: var(--h-gold); }
.h-phase__title { font-size: var(--sc-t-xl); font-weight: 600; }
.h-phase__text { color: var(--sc-ink-soft); max-width: 48ch; margin-top: .25rem; }
@media (max-width: 900px) { .h-how__grid { grid-template-columns: 1fr; } }

/* Contact checklist */
.h-checklist__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.h-checks--boxes { gap: var(--sc-3); }
.h-checkbox { display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--sc-3); align-items: start; padding: var(--sc-4); border-radius: var(--sc-r-md); border: 1px solid var(--sc-hairline-strong); cursor: pointer; transition: border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.h-checkbox:hover { border-color: var(--h-navy); }
.h-checkbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.h-checkbox__box { width: 1.4rem; height: 1.4rem; border-radius: 6px; border: 1.5px solid var(--h-navy); display: grid; place-items: center; color: #fff; transition: background-color 160ms var(--sc-ease-out); margin-top: .1rem; }
.h-checkbox__icon { width: 1rem; height: 1rem; opacity: 0; transition: opacity 160ms var(--sc-ease-out); }
.h-checkbox input:checked ~ .h-checkbox__box { background: var(--h-navy); }
.h-checkbox input:checked ~ .h-checkbox__box .h-checkbox__icon { opacity: 1; }
.h-checkbox input:focus-visible ~ .h-checkbox__box { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.h-checkbox strong { color: var(--sc-ink); }
.h-checkbox span:last-child { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
@media (max-width: 900px) { .h-checklist__grid { grid-template-columns: 1fr; } }

/* Products 02 and 03: framed screenshots in the site palette, steps, views, the loop, downloads */
.h-products__grid--wide { grid-template-columns: .9fr 1.1fr; }
.h-shot { margin: 0; border-radius: var(--sc-r-lg); overflow: hidden; border: 1px solid var(--sc-hairline-strong); background: var(--h-navy-d); box-shadow: var(--sc-e3); transform-style: preserve-3d; }
.h-shot__bar { display: flex; align-items: center; gap: .4rem; padding: .55rem .9rem; background: #0b1327; border-bottom: 1px solid rgba(255,255,255,.08); }
.h-shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.h-shot__bar span { margin-left: .6rem; font-family: var(--sc-font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #a9b4cc; }
.h-shot img { width: 100%; height: auto; display: block; }
.h-shot__caption { padding: .55rem .9rem; background: #0b1327; color: #a9b4cc; font-size: .68rem; }
.h-steps { display: grid; gap: var(--sc-3); counter-reset: st; }
.h-step { position: relative; padding: var(--sc-4) var(--sc-4) var(--sc-4) 3.2rem; border-radius: var(--sc-r-md); border: 1px solid var(--sc-hairline-strong); }
.h-step::before { counter-increment: st; content: counter(st); position: absolute; left: var(--sc-4); top: var(--sc-4); width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--sc-accent); color: var(--sc-accent-ink); display: grid; place-items: center; font-family: var(--sc-font-mono); font-size: .75rem; font-weight: 600; }
.h-section--light .h-step::before { background: var(--h-navy); color: #fff; }
.h-step__title { font-size: var(--sc-t-base); font-weight: 600; }
.h-step__text { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); margin-top: .2rem; }
.h-product__note { margin-top: var(--sc-4); color: var(--sc-accent); }
.h-product__example { margin-top: var(--sc-4); padding: var(--sc-4); border-left: 1px solid var(--sc-accent); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 48ch; }
.h-views { display: grid; border-top: 1px solid var(--sc-hairline-strong); }
.h-view { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sc-4); padding: .85rem 0; border-bottom: 1px solid var(--sc-hairline-strong); align-items: baseline; }
.h-view__name { font-family: var(--sc-font-display); font-weight: 600; }
.h-view__text { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.h-loop { margin-top: var(--sc-9); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.h-loop__ring { position: relative; max-width: 26rem; margin-inline: auto; width: 100%; }
.h-loop__svg { width: 100%; height: auto; transform: rotate(0deg); }
.h-loop__track { fill: none; stroke: var(--sc-hairline-strong); stroke-width: 2; }
.h-loop__progress { fill: none; stroke: var(--sc-accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 942.5; stroke-dashoffset: 942.5; transform: rotate(-90deg); transform-origin: 200px 200px; transition: stroke-dashoffset 600ms var(--sc-ease-out); }
.h-loop__node circle { fill: var(--sc-canvas); stroke: var(--sc-ink-soft); stroke-width: 1.5; transition: fill 200ms var(--sc-ease-out), stroke 200ms var(--sc-ease-out), r 200ms; }
.h-loop__node.is-active circle { fill: var(--sc-accent); stroke: var(--sc-accent); r: 10; }
.h-loop__node.is-done circle { fill: var(--sc-ink-soft); stroke: var(--sc-ink-soft); }
.h-loop__centre { position: absolute; inset: 22%; display: grid; align-content: center; justify-items: center; text-align: center; gap: .4rem; }
.h-loop__name { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); line-height: 1; }
.h-loop__desc { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 22ch; }
.h-loop__list { margin-top: var(--sc-4); display: flex; flex-wrap: wrap; gap: .4rem; }
.h-loop__btn { padding: .45rem .85rem; border-radius: var(--sc-r-pill); border: 1px solid var(--sc-hairline-strong); background: transparent; font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink-soft); cursor: pointer; transition: border-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.h-loop__btn.is-active { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); }
.h-loop__btn:hover { border-color: var(--sc-accent); color: var(--sc-ink); }
.h-guardrails__list--one { grid-template-columns: 1fr; }
.h-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 var(--sc-4); }
.h-chip { padding: .35rem .7rem; border-radius: var(--sc-r-pill); border: 1px solid var(--sc-hairline-strong); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.h-chip--on { border-color: var(--sc-accent); color: var(--sc-ink); background: color-mix(in oklab, var(--sc-accent) 14%, transparent); }
.h-downloads { display: grid; gap: var(--sc-3); }
.h-download { display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--sc-3); align-items: center; padding: var(--sc-4); border-radius: var(--sc-r-md); border: 1px solid var(--sc-hairline-strong); text-decoration: none; transition: border-color 160ms var(--sc-ease-out), transform 140ms var(--sc-ease-out); }
.h-download:hover { border-color: var(--sc-accent); transform: translateY(-1px); }
.h-download__icon { width: 1.4rem; height: 1.4rem; color: var(--sc-accent); }
.h-download strong { display: block; font-weight: 600; }
.h-download small { display: block; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); margin-top: .15rem; }
.h-more { margin-top: var(--sc-9); padding-top: var(--sc-7); border-top: 1px solid var(--sc-hairline-strong); }
.h-more__grid { margin-top: var(--sc-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5); }
.h-more__grid:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
.h-more__item { padding: var(--sc-6); border-radius: var(--sc-r-lg); border: 1px solid var(--sc-hairline-strong); background: var(--sc-surface); box-shadow: var(--sc-e2); display: grid; gap: .6rem; align-content: start; }
.h-more__name { font-size: var(--sc-t-xl); font-weight: 600; }
.h-more__text { color: var(--sc-ink-soft); max-width: 46ch; }
.h-more__item .h-actions { margin-top: var(--sc-3); align-items: center; }
.h-more__ext { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--sc-t-sm); font-weight: 500; text-decoration: none; color: var(--sc-ink-soft); }
.h-more__ext:hover { color: var(--sc-ink); }
@media (max-width: 900px) { .h-products__grid--wide { grid-template-columns: 1fr; } .h-loop { grid-template-columns: 1fr; } .h-more__grid, .h-more__grid:has(> :nth-child(3)) { grid-template-columns: 1fr; } .h-view { grid-template-columns: 1fr; gap: .2rem; } }

/* Products index */
.h-products__head { margin-bottom: var(--sc-7); }
.h-section[id], .h-product[id] { scroll-margin-top: calc(var(--h-nav) + 1rem); }
.h-catalog__list { display: grid; gap: var(--sc-6); }
.h-catalog__item { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: var(--sc-6); border-radius: var(--sc-r-lg); border: 1px solid var(--sc-hairline-strong); background: var(--sc-surface); box-shadow: var(--sc-e2); }
.h-catalog__item:nth-child(even) .h-catalog__media { order: 2; }
.h-catalog__media { display: block; border-radius: var(--sc-r-md); overflow: hidden; background: var(--h-navy-d); box-shadow: var(--sc-e2); }
.h-catalog__media img { width: 100%; height: auto; display: block; transition: transform 500ms var(--sc-ease-out); }
.h-catalog__item--app .h-catalog__media { max-width: 16rem; margin-inline: auto; border-radius: 34px; padding: 8px; box-shadow: var(--sc-e3), inset 0 0 0 2px var(--h-gold-d); }
.h-catalog__item--app .h-catalog__media img { border-radius: 26px; }
@media (hover: hover) { .h-catalog__media:hover img { transform: scale(1.02); } }
.h-catalog__body { display: grid; gap: .6rem; }
.h-catalog__name { font-size: var(--sc-t-2xl); font-weight: 700; letter-spacing: var(--sc-track-snug); }
.h-catalog__name a { text-decoration: none; }
.h-catalog__name a:hover { color: var(--h-gold-d); }
.h-catalog__tagline { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); }
.h-catalog__text { color: var(--sc-ink-soft); max-width: 56ch; }
.h-catalog__body .h-actions { margin-top: var(--sc-3); }
@media (max-width: 900px) { .h-catalog__item { grid-template-columns: 1fr; padding: var(--sc-5); } .h-catalog__item:nth-child(even) .h-catalog__media { order: 0; } }

/* Sample spend split (demo data) */
.h-split { margin-top: var(--sc-9); }
.h-split__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-3); align-items: baseline; margin-bottom: var(--sc-4); }
.h-split__bar { display: flex; height: 3.2rem; border-radius: var(--sc-r-md); overflow: visible; gap: 3px; }
.h-split__seg { position: relative; flex: var(--share) 1 0; border-radius: 8px; cursor: pointer; transition: transform 200ms var(--sc-ease-out), filter 200ms var(--sc-ease-out); outline: none; }
.h-split__seg--0 { background: var(--h-navy); }
.h-split__seg--1 { background: var(--h-gold); }
.h-split__seg--2 { background: var(--h-navy-l); }
.h-split__seg:hover, .h-split__seg:focus-visible { transform: translateY(-3px); filter: brightness(1.1); }
.h-split__tip { position: absolute; left: 50%; bottom: calc(100% + .6rem); transform: translate(-50%, 4px); white-space: nowrap; padding: .45rem .7rem; border-radius: 8px; background: var(--h-navy-d); color: #fff; font-size: var(--sc-t-xs); opacity: 0; pointer-events: none; transition: opacity 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out); box-shadow: var(--sc-e2); }
.h-split__seg:hover .h-split__tip, .h-split__seg:focus-visible .h-split__tip { opacity: 1; transform: translate(-50%, 0); }
.h-split__legend { display: flex; flex-wrap: wrap; gap: var(--sc-4); margin-top: var(--sc-3); }
.h-split__legend li { display: inline-flex; align-items: center; gap: .45rem; }
.h-split__dot { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }
.h-split__dot--0 { background: var(--h-navy); } .h-split__dot--1 { background: var(--h-gold); } .h-split__dot--2 { background: var(--h-navy-l); }
.h-others .h-more__item { background: color-mix(in oklab, var(--sc-surface) 70%, transparent); }

/* Small screens: buttons may wrap, tooltips stay inside the viewport */
@media (max-width: 480px) { .h-btn { white-space: normal; text-align: center; } .h-actions { gap: var(--sc-3); } }
.h-split__tip { white-space: normal; width: max-content; max-width: 11rem; text-align: center; }
.h-split__seg:first-child .h-split__tip { left: 0; transform: translate(0, 4px); }
.h-split__seg:first-child:hover .h-split__tip, .h-split__seg:first-child:focus-visible .h-split__tip { transform: translate(0, 0); }
.h-split__seg:last-child .h-split__tip { left: auto; right: 0; transform: translate(0, 4px); }
.h-split__seg:last-child:hover .h-split__tip, .h-split__seg:last-child:focus-visible .h-split__tip { transform: translate(0, 0); }

/* Compliance platform (EU AI Act Info) */
.h-step__meta { display: block; margin-top: .15rem; color: var(--h-gold-d); }
.h-verdicts { list-style: none; margin: var(--sc-4) 0 var(--sc-5); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.h-verdict { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md); background: var(--sc-surface); font-weight: 600; font-size: var(--sc-t-sm); }
.h-verdict__dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--h-navy); flex: none; }
.h-verdict--1 .h-verdict__dot { background: var(--h-gold); }
.h-verdict--2 .h-verdict__dot { background: var(--h-gold-d); }
.h-verdict--3 .h-verdict__dot { background: transparent; box-shadow: inset 0 0 0 2px var(--h-navy); }
.h-chain { margin-top: var(--sc-9); }
.h-chain__head { display: grid; gap: .4rem; margin-bottom: var(--sc-5); }
.h-chain__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; align-items: start; }
.h-chain__item { position: relative; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md); background: var(--sc-surface); transition: border-color 200ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out); }
.h-chain__item:not(:last-child)::after { content: ""; position: absolute; right: -.8rem; top: 2.1rem; width: .8rem; height: 1px; background: var(--h-gold-d); }
.h-chain__item.is-done { border-color: color-mix(in oklab, var(--h-gold-d) 55%, transparent); }
.h-chain__item.is-open { border-color: var(--h-navy); box-shadow: var(--sc-e2); }
.h-chain__btn { width: 100%; text-align: left; padding: var(--sc-4); background: transparent; border: 0; cursor: pointer; display: grid; gap: .3rem; font: inherit; color: inherit; border-radius: inherit; }
.h-chain__step { color: var(--h-gold-d); }
.h-chain__title { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-md); line-height: 1.25; }
.h-chain__item--verdict .h-chain__title { color: var(--h-gold-d); }
.h-chain__body { display: none; padding: 0 var(--sc-4) var(--sc-4); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.h-chain__body p { margin: 0; }
.h-chain__item.is-open .h-chain__body { display: block; }
.h-clocks { list-style: none; margin: var(--sc-4) 0; padding: 0; display: grid; gap: .6rem; }
.h-clock { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; align-items: center; padding: var(--sc-4); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md); background: var(--sc-surface); }
.h-clock__name { display: block; font-family: var(--sc-font-display); font-weight: 600; }
.h-clock__time { font-family: var(--sc-font-mono); font-size: var(--sc-t-md); font-variant-numeric: tabular-nums; color: var(--h-navy); white-space: nowrap; }
.h-clock__bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--sc-hairline-strong); overflow: hidden; }
.h-clock__bar i { display: block; height: 100%; width: 100%; background: var(--h-gold); transform-origin: left; }
.h-clock.is-urgent .h-clock__time { color: var(--h-gold-d); }
.h-modules__group { margin-top: var(--sc-5); }
.h-modules__name { display: flex; align-items: baseline; gap: .6rem; margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-md); }
.h-modules__lede { margin: .2rem 0 .2rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.h-tiers { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; gap: var(--sc-4); }
.h-tier { display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--sc-3); align-items: start; }
.h-tier__n { color: var(--h-gold-d); padding-top: .35rem; }
.h-tier h4 { margin: 0 0 .2rem; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-md); }
.h-tier p { margin: 0; color: var(--sc-ink-soft); }
.h-product__publish { margin-top: var(--sc-9); }
.h-product__pricing { margin-top: var(--sc-9); }
.h-plans { list-style: none; margin: var(--sc-5) 0 var(--sc-4); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sc-4); }
.h-plan { padding: var(--sc-5); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-lg); background: var(--sc-surface); display: grid; gap: .4rem; align-content: start; }
.h-plan--popular { border-color: var(--h-navy); box-shadow: var(--sc-e2); }
.h-plan__price { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 600; letter-spacing: var(--sc-track-snug); line-height: 1.1; }
.h-plan p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.h-product__disclaimer { margin-top: var(--sc-4); font-size: var(--sc-t-xs); }
.h-product--compliance .sc-body + .h-product__h3 { margin-top: var(--sc-6); }
@media (max-width: 900px) { .h-chain__list { grid-template-columns: 1fr; } .h-chain__item:not(:last-child)::after { display: none; } .h-plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .h-plans { grid-template-columns: 1fr; } .h-verdicts { grid-template-columns: 1fr; } }