/* Hoba core.css - deterministic base stylesheet emitted by Gen. */
:root {
  /* --- canonical design tokens (single vocabulary for Gen + Composer) --- */
  /* typography */
  --hoba-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --hoba-font-h1: 2rem;
  --hoba-font-h2: 1.35rem;
  --hoba-font-h3: 1.15rem;
  --hoba-font-body: 1rem;
  --hoba-font-small: 0.875rem;
  --hoba-line-tight: 1.2;
  --hoba-line-heading: 1.3;
  --hoba-line-body: 1.6;
  --hoba-weight-normal: 400;
  --hoba-weight-semibold: 600;
  --hoba-weight-bold: 700;
  /* colors */
  --hoba-color-bg: #f7fafc;
  --hoba-color-surface: #ffffff;
  --hoba-color-text: #1a202c;
  --hoba-color-muted: #4a5568;
  --hoba-color-primary: #2b6cb0;
  --hoba-color-primary-hover: #265f9b;
  --hoba-color-primary-ink: #ffffff;
  --hoba-color-border: #e2e8f0;
  --hoba-color-accent: #2b6cb0;
  --hoba-color-danger: #c53030;
  --hoba-color-success: #276749;
  /* spacing scale */
  --hoba-space-xs: calc(var(--hoba-space) * 0.25);
  --hoba-space-sm: calc(var(--hoba-space) * 0.5);
  --hoba-space-md: var(--hoba-space);
  --hoba-space-lg: calc(var(--hoba-space) * 2);
  --hoba-space-xl: calc(var(--hoba-space) * 3);
  --hoba-space-section: calc(var(--hoba-space) * 1.5);
  /* shape */
  --hoba-radius-sm: 0.25rem;
  --hoba-radius-md: var(--hoba-radius);
  --hoba-radius-lg: 0.75rem;
  /* effects */
  --hoba-shadow-sm: 0 1px 2px rgba(26, 32, 44, 0.08);
  --hoba-shadow-md: 0 4px 12px rgba(26, 32, 44, 0.12);
  /* container */
  --hoba-measure-content: var(--hoba-measure);
  --hoba-measure-wide: calc(var(--hoba-measure) * 1.4);
  --hoba-page-padding: var(--hoba-space-section);
  /* --- legacy aliases (kept so existing rules and releases keep resolving) --- */
  --hoba-ink: var(--hoba-color-text);
  --hoba-muted: var(--hoba-color-muted);
  --hoba-accent: var(--hoba-color-primary);
  --hoba-accent-ink: var(--hoba-color-primary-ink);
  --hoba-surface: var(--hoba-color-surface);
  --hoba-border: var(--hoba-color-border);
  --hoba-radius: 0.5rem;
  --hoba-space: 1rem;
  --hoba-measure: 68rem;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  color: var(--hoba-color-text);
  background: var(--hoba-color-bg);
  font-family: var(--hoba-font-sans);
  font-size: var(--hoba-font-body);
  line-height: var(--hoba-line-body);
}
/* Deterministic text flow: a long unbroken token wraps instead of pushing the
   page wider, and headings never inherit an accidental browser margin. */
h1,
h2,
h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}
main {
  display: block;
  max-width: var(--hoba-measure-content);
  margin: 0 auto;
  padding: var(--hoba-page-padding) var(--hoba-space);
  background: var(--hoba-color-surface);
}
/* A page with a Header area promotes that area (and the site navigation) into a
   full-bleed header band: `main` spans the viewport and every content area keeps
   its own measure, so band backgrounds run edge to edge while text stays
   centred. Pages without a Header keep the constrained legacy `main`. */
main[data-header-area="aware"] {
  max-width: none;
  padding: 0;
  background: var(--hoba-color-bg);
  display: flex;
  flex-direction: column;
}
/* Order the band deterministically: menu, branded bar, page title, content,
   footer — regardless of the fixed area order the renderer emits. */
main[data-header-area="aware"] > .site-navigation {
  order: 1;
}
main[data-header-area="aware"] > [data-area="Header"] {
  order: 2;
}
main[data-header-area="aware"] > h1 {
  order: 3;
}
main[data-header-area="aware"] > [data-area="Content"] {
  order: 4;
}
main[data-header-area="aware"] > [data-area="Footer"] {
  order: 5;
}
main[data-header-area="aware"] > [data-area="Header"] + h1,
main[data-header-area="aware"] > h1 + [data-area="Content"] {
  margin-top: 0;
}
main[data-header-area="aware"] > [data-area="Content"],
main[data-header-area="aware"] > [data-area="Footer"] {
  padding: var(--hoba-page-padding) var(--hoba-space);
}
main[data-header-area="aware"] > [data-area="Content"] {
  background: var(--hoba-color-surface);
}
main[data-header-area="aware"] > h1 {
  width: 100%;
  max-width: calc(var(--hoba-measure) * 1.4);
  margin-inline: auto;
  padding: var(--hoba-page-padding) var(--hoba-space) 0;
  background: var(--hoba-color-surface);
}
h1 {
  font-size: var(--hoba-font-h1);
  font-weight: var(--hoba-weight-bold);
  line-height: var(--hoba-line-tight);
  margin: 0 0 var(--hoba-space-section);
}
h2 {
  font-size: var(--hoba-font-h2);
  font-weight: var(--hoba-weight-bold);
  line-height: var(--hoba-line-heading);
  margin: 0 0 var(--hoba-space);
}
h3 {
  font-size: var(--hoba-font-h3);
  font-weight: var(--hoba-weight-semibold);
  line-height: var(--hoba-line-heading);
  margin: 0 0 var(--hoba-space-sm);
}
p {
  margin: 0 0 var(--hoba-space);
}
small {
  font-size: var(--hoba-font-small);
  color: var(--hoba-color-muted);
}
a {
  color: var(--hoba-color-primary);
}
a:hover,
a:focus {
  color: var(--hoba-color-primary-hover);
}
img {
  max-width: 100%;
  height: auto;
  border-radius: var(--hoba-radius-sm);
}
[data-area] {
  display: block;
}
[data-area]:not(:empty) + [data-area]:not(:empty) {
  margin-top: var(--hoba-space-section);
}
main[data-header-area="aware"] > [data-area]:not(:empty) + [data-area]:not(:empty) {
  margin-top: 0;
}
/* A page whose content declares a container width token must not be silently
   clamped by the base measure: the containers own their own measure. The
   renderer adds `data-layout-width="aware"` to `main` only when at least one
   node carries `layout.max_width`, so pages without a width token keep
   `main { max-width: 68rem }` and legacy output is unchanged. */
main[data-layout-width="aware"] {
  max-width: none;
}
.site-navigation {
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 20;
  background: var(--hoba-color-surface);
  border-bottom: 1px solid var(--hoba-color-border);
}
/* A page with a Header area turns the navigation into the first row of a
   full-bleed header band: the links sit on the content measure and the branded
   Header bar joins directly beneath with no seam. */
main[data-header-area="aware"] > .site-navigation {
  position: sticky;
  top: 0;
  box-shadow: var(--hoba-shadow-sm);
}
.site-navigation > ul {
  max-width: calc(var(--hoba-measure) * 1.4);
  margin-inline: auto;
  padding: var(--hoba-space-sm) var(--hoba-space);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hoba-space-xs) var(--hoba-space-lg);
}
.site-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-navigation li {
  position: relative;
  margin: 0;
}
.site-navigation a,
.site-navigation span {
  display: inline-block;
  padding: var(--hoba-space-xs) var(--hoba-space-sm);
  border-radius: var(--hoba-radius-sm);
  color: var(--hoba-color-muted);
  text-decoration: none;
  font-weight: var(--hoba-weight-semibold);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.site-navigation a:hover,
.site-navigation a:focus {
  color: var(--hoba-color-primary);
  background: var(--hoba-color-bg);
}
/* Nested levels are dropdowns: stacked under their parent, revealed on hover or
   keyboard focus, never part of the top-level flex flow (so a deep tree can no
   longer wrap the bar into several rows). */
.site-navigation ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  padding: var(--hoba-space-xs) 0;
  background: var(--hoba-color-surface);
  border: 1px solid var(--hoba-color-border);
  border-radius: var(--hoba-radius-md);
  box-shadow: var(--hoba-shadow-md);
}
.site-navigation li:hover > ul,
.site-navigation li:focus-within > ul {
  display: block;
}
.site-navigation ul ul li {
  display: block;
}
.site-navigation ul ul a,
.site-navigation ul ul span {
  display: block;
  padding: var(--hoba-space-sm) var(--hoba-space);
  border-radius: 0;
  color: var(--hoba-color-text);
  white-space: nowrap;
}
.site-navigation ul ul a:hover,
.site-navigation ul ul a:focus {
  background: var(--hoba-color-bg);
  color: var(--hoba-color-primary);
}
.site-navigation ul ul ul {
  top: 0;
  left: 100%;
}
header {
  display: block;
}
/* The Header area is the branded bar of the full-bleed header band: a primary
   strip whose content (brand + call to action) sits on the content measure,
   directly under the navigation with no gap so the two read as one header. */
main[data-header-area="aware"] > [data-area="Header"] {
  padding: 0;
}
main[data-header-area="aware"] > [data-area="Header"] .hoba-style--pad-md {
  padding: var(--hoba-space) var(--hoba-space);
}
[data-area] > header {
  font-size: var(--hoba-font-h3);
  font-weight: var(--hoba-weight-bold);
  margin: 0;
}
/* The header brand reads as a wordmark: larger than body, tight, and inheriting
   the bar's ink so it never depends on the default heading colour. */
main[data-header-area="aware"] > [data-area="Header"] > .hoba-layout > .hoba-layout > header {
  font-size: calc(var(--hoba-font-h3) * 1.15);
  letter-spacing: 0.01em;
  line-height: var(--hoba-line-tight);
}
/* --- button --- */
.button {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--hoba-radius-md);
  background: var(--hoba-color-primary);
  color: var(--hoba-color-primary-ink);
  text-decoration: none;
  font-weight: var(--hoba-weight-semibold);
  line-height: var(--hoba-line-tight);
  box-shadow: var(--hoba-shadow-sm);
}
.button:hover,
.button:focus {
  background: var(--hoba-color-primary-hover);
  color: var(--hoba-color-primary-ink);
}
.button:focus-visible {
  outline: 2px solid var(--hoba-color-primary);
  outline-offset: 2px;
}
/* --- quote --- */
blockquote {
  margin: 0;
  padding: var(--hoba-space) var(--hoba-space-lg);
  border-left: 4px solid var(--hoba-color-primary);
  border-radius: var(--hoba-radius-sm);
  background: var(--hoba-color-bg);
  color: var(--hoba-color-text);
}
blockquote cite {
  display: block;
  margin-top: var(--hoba-space-sm);
  font-style: normal;
  color: var(--hoba-color-muted);
}
/* --- list sections (benefits / features / contacts / link list) --- */
.benefits,
.features,
.contacts,
.collection-showcase,
.about,
.link-list {
  display: block;
  margin: 0 0 var(--hoba-space-section);
}
.benefits ul,
.features ul,
.contacts ul {
  margin: 0;
  padding-left: 1.25rem;
}
.benefits li,
.features li,
.contacts li,
.link-list li {
  margin: var(--hoba-space-xs) 0;
}
.collection-showcase p {
  color: var(--hoba-color-muted);
}
.about a {
  font-weight: var(--hoba-weight-semibold);
}
.link-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* A link list placed directly in a horizontal row (a header menu) lays its
   links out inline and drops the column heading, so it reads as a nav bar. */
.hoba-layout--row > .link-list,
.hoba-layout--row .link-list {
  margin: 0;
}
.hoba-layout--row .link-list > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hoba-layout--row .link-list > ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hoba-space-sm) var(--hoba-space);
  align-items: center;
}
.hoba-layout--row .link-list li {
  margin: 0;
}
.hoba-layout--row .link-list a {
  color: inherit;
  font-weight: var(--hoba-weight-semibold);
}
.link-list a {
  text-decoration: none;
}
.link-list a:hover,
.link-list a:focus {
  text-decoration: underline;
}
[data-plugin] {
  display: block;
}
/* --- form --- */
form {
  margin: 0 0 var(--hoba-space-section);
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 var(--hoba-space);
}
.form-field label {
  font-weight: var(--hoba-weight-semibold);
}
.form-field input,
.form-field textarea,
.form-field select {
  font: inherit;
  color: inherit;
  padding: var(--hoba-space-sm) 0.65rem;
  border: 1px solid var(--hoba-color-border);
  border-radius: var(--hoba-radius-md);
  background: var(--hoba-color-surface);
  max-width: 100%;
}
.form-field textarea {
  min-height: 6rem;
  resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: 2px solid var(--hoba-color-primary);
  outline-offset: 1px;
}
.form-field input:invalid,
.form-field textarea:invalid,
.form-field select:invalid {
  border-color: var(--hoba-color-danger);
}
form button[type="submit"] {
  font: inherit;
  font-weight: var(--hoba-weight-semibold);
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: var(--hoba-radius-md);
  background: var(--hoba-color-primary);
  color: var(--hoba-color-primary-ink);
  cursor: pointer;
}
form button[type="submit"]:hover,
form button[type="submit"]:focus {
  background: var(--hoba-color-primary-hover);
}
.form-success {
  margin-top: var(--hoba-space);
  color: var(--hoba-color-success);
  font-weight: var(--hoba-weight-semibold);
}
/* --- sections: generic page rhythm and card surfaces ---------------------
   Every direct child of a Grid container is a card: a surface panel with a
   border and radius, so a plain 3-column feature/contact grid reads as distinct
   sections without any per-page styling. Children of Row/Stack containers stay
   flush, which keeps prose and media groupings clean. A layout-less page emits
   no `hoba-layout` wrapper, so it never receives these rules (legacy output is
   unchanged). */
.hoba-layout--grid > * {
  background: var(--hoba-color-surface);
  border: 1px solid var(--hoba-color-border);
  border-radius: var(--hoba-radius-md);
  padding: var(--hoba-space);
  box-shadow: var(--hoba-shadow-sm);
}
/* Canonical LayoutSpec containers (Core -> Gen). Token based, no pixels. */
.hoba-layout {
  display: flex;
  flex-direction: column;
  gap: var(--hoba-space);
}
.hoba-layout--row {
  flex-direction: row;
  flex-wrap: wrap;
}
.hoba-layout--grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.hoba-layout--gap-none {
  gap: 0;
}
.hoba-layout--gap-sm {
  gap: calc(var(--hoba-space) * 0.5);
}
.hoba-layout--gap-md {
  gap: var(--hoba-space);
}
.hoba-layout--gap-lg {
  gap: calc(var(--hoba-space) * 2);
}
.hoba-layout--align-start {
  align-items: flex-start;
}
.hoba-layout--align-center {
  align-items: center;
}
.hoba-layout--align-end {
  align-items: flex-end;
}
.hoba-layout--align-stretch {
  align-items: stretch;
}
.hoba-layout--justify-start {
  justify-content: flex-start;
}
.hoba-layout--justify-center {
  justify-content: center;
}
.hoba-layout--justify-end {
  justify-content: flex-end;
}
.hoba-layout--justify-between {
  justify-content: space-between;
}
.hoba-layout--width-content {
  /* `width: 100%` is what makes the measure authoritative: without it a
     width-tokened container that is a flex item in a column stack shrinks to
     its content, because `margin-inline: auto` overrides the parent's
     `align-items: stretch`. It then fills the parent up to the measure and the
     auto margins centre it. */
  width: 100%;
  max-width: var(--hoba-measure);
  margin-inline: auto;
}
.hoba-layout--width-wide {
  width: 100%;
  max-width: calc(var(--hoba-measure) * 1.4);
  margin-inline: auto;
}
.hoba-layout--width-full {
  max-width: none;
}
/* Overlap: children share one track and stack. `z-index` (set per child, from
   the bounded token vocabulary) decides which one paints on top; without it the
   later sibling wins, exactly like normal grid stacking. */
.hoba-layout--overlap-stack {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
}
.hoba-layout--overlap-stack > * {
  grid-area: 1 / 1;
}
.hoba-layout__item--z-neg-5 { position: relative; z-index: -5; }
.hoba-layout__item--z-neg-4 { position: relative; z-index: -4; }
.hoba-layout__item--z-neg-3 { position: relative; z-index: -3; }
.hoba-layout__item--z-neg-2 { position: relative; z-index: -2; }
.hoba-layout__item--z-neg-1 { position: relative; z-index: -1; }
.hoba-layout__item--z-0 { position: relative; z-index: 0; }
.hoba-layout__item--z-1 { position: relative; z-index: 1; }
.hoba-layout__item--z-2 { position: relative; z-index: 2; }
.hoba-layout__item--z-3 { position: relative; z-index: 3; }
.hoba-layout__item--z-4 { position: relative; z-index: 4; }
.hoba-layout__item--z-5 { position: relative; z-index: 5; }
.hoba-layout--cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.hoba-layout--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hoba-layout--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hoba-layout--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hoba-layout--cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.hoba-layout--cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.hoba-layout--cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.hoba-layout--cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.hoba-layout--cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
.hoba-layout--cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
.hoba-layout--cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}
.hoba-layout--cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
/* Per-child placement inside a layout container. Inert outside one. */
.hoba-layout__item {
  min-width: 0;
}
.hoba-layout__item--span-1 {
  grid-column: span 1;
}
.hoba-layout__item--span-2 {
  grid-column: span 2;
}
.hoba-layout__item--span-3 {
  grid-column: span 3;
}
.hoba-layout__item--span-4 {
  grid-column: span 4;
}
.hoba-layout__item--span-5 {
  grid-column: span 5;
}
.hoba-layout__item--span-6 {
  grid-column: span 6;
}
.hoba-layout__item--span-7 {
  grid-column: span 7;
}
.hoba-layout__item--span-8 {
  grid-column: span 8;
}
.hoba-layout__item--span-9 {
  grid-column: span 9;
}
.hoba-layout__item--span-10 {
  grid-column: span 10;
}
.hoba-layout__item--span-11 {
  grid-column: span 11;
}
.hoba-layout__item--span-12 {
  grid-column: span 12;
}
.hoba-layout__item--self-start {
  align-self: flex-start;
}
.hoba-layout__item--self-center {
  align-self: center;
}
.hoba-layout__item--self-end {
  align-self: flex-end;
}
.hoba-layout__item--self-stretch {
  align-self: stretch;
}
/* A wrapped leaf keeps the same direct-child presentation as an unwrapped one. */
.hoba-layout__item > header {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 var(--hoba-space);
}
/* Canonical container presentation (Core -> Gen). Token based, no pixels.
   Every value resolves through the active theme variables, so a theme change
   recolours every styled container at once. */
.hoba-style--bg-bg {
  background: var(--hoba-color-bg);
}
.hoba-style--bg-surface {
  background: var(--hoba-color-surface);
}
.hoba-style--bg-primary {
  background: var(--hoba-color-primary);
  color: var(--hoba-color-primary-ink);
}
.hoba-style--bg-accent {
  background: var(--hoba-color-accent);
  color: var(--hoba-color-primary-ink);
}
.hoba-style--bg-muted {
  background: var(--hoba-color-muted);
  color: var(--hoba-color-primary-ink);
}
/* A primary button on an already-filled section would be the same colour as its
   background; invert it to the surface ink so it stays a visible control. */
.hoba-style--bg-primary .button,
.hoba-style--bg-accent .button,
.hoba-style--bg-muted .button {
  background: var(--hoba-color-surface);
  color: var(--hoba-color-text);
  box-shadow: none;
}
.hoba-style--bg-primary .button:hover,
.hoba-style--bg-accent .button:hover,
.hoba-style--bg-muted .button:hover,
.hoba-style--bg-primary .button:focus,
.hoba-style--bg-accent .button:focus,
.hoba-style--bg-muted .button:focus {
  background: var(--hoba-color-bg);
  color: var(--hoba-color-text);
}
.hoba-style--pad-sm {
  padding: var(--hoba-space-sm);
}
.hoba-style--pad-md {
  padding: var(--hoba-space);
}
.hoba-style--pad-lg {
  padding: var(--hoba-space-lg);
}
.hoba-style--border-subtle {
  border: 1px solid var(--hoba-color-border);
}
.hoba-style--border-strong {
  border: 2px solid var(--hoba-color-border);
}
.hoba-style--border-accent.hoba-style--border-subtle {
  border-color: var(--hoba-color-accent);
}
.hoba-style--border-accent.hoba-style--border-strong {
  border-color: var(--hoba-color-accent);
}
.hoba-style--text-start {
  text-align: start;
}
.hoba-style--text-center {
  text-align: center;
}
.hoba-style--text-end {
  text-align: end;
}
.hoba-style--radius-sm {
  border-radius: var(--hoba-radius-sm);
}
.hoba-style--radius-md {
  border-radius: var(--hoba-radius-md);
}
.hoba-style--radius-lg {
  border-radius: var(--hoba-radius-lg);
}
.hoba-style--margin-sm {
  margin: var(--hoba-space-sm);
}
.hoba-style--margin-md {
  margin: var(--hoba-space);
}
.hoba-style--margin-lg {
  margin: var(--hoba-space-lg);
}
.hoba-style--shadow-sm {
  box-shadow: var(--hoba-shadow-sm);
}
.hoba-style--shadow-md {
  box-shadow: var(--hoba-shadow-md);
}
.hoba-style--font-h1 {
  font-size: var(--hoba-font-h1);
  line-height: var(--hoba-line-heading);
}
.hoba-style--font-h2 {
  font-size: var(--hoba-font-h2);
  line-height: var(--hoba-line-heading);
}
.hoba-style--font-h3 {
  font-size: var(--hoba-font-h3);
  line-height: var(--hoba-line-heading);
}
.hoba-style--font-body {
  font-size: var(--hoba-font-body);
  line-height: var(--hoba-line-body);
}
.hoba-style--font-small {
  font-size: var(--hoba-font-small);
  line-height: var(--hoba-line-body);
}
.hoba-style--weight-normal {
  font-weight: var(--hoba-weight-normal);
}
.hoba-style--weight-semibold {
  font-weight: var(--hoba-weight-semibold);
}
.hoba-style--weight-bold {
  font-weight: var(--hoba-weight-bold);
}
/* Nested containers must be able to shrink within a grid/flex track. */
.hoba-layout .hoba-layout {
  min-width: 0;
}
/* Every direct child of a layout can shrink below its content width, so a row
   wraps only when the tracks truly cannot fit and grid cells never overflow. */
.hoba-layout--grid > *,
.hoba-layout--row > * {
  min-width: 0;
}
/* The `md` breakpoint is the tablet override: it applies at <=64rem and the
   `sm` block above takes precedence below 40rem because it is later in the
   cascade. Both breakpoints carry the same token vocabulary the compiler emits
   (`md-stack|row|grid`, `md-cols-N`, `md-gap-*`, `md-align-*`). */
@media (max-width: 64rem) {
  .hoba-layout--md-stack {
    display: flex;
    flex-direction: column;
  }
  .hoba-layout--md-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .hoba-layout--md-grid {
    display: grid;
  }
  .hoba-layout--md-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .hoba-layout--md-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .hoba-layout--md-gap-none {
    gap: 0;
  }
  .hoba-layout--md-gap-sm {
    gap: calc(var(--hoba-space) * 0.5);
  }
  .hoba-layout--md-gap-md {
    gap: var(--hoba-space);
  }
  .hoba-layout--md-gap-lg {
    gap: calc(var(--hoba-space) * 2);
  }
  .hoba-layout--md-align-start {
    align-items: flex-start;
  }
  .hoba-layout--md-align-center {
    align-items: center;
  }
  .hoba-layout--md-align-end {
    align-items: flex-end;
  }
  .hoba-layout--md-align-stretch {
    align-items: stretch;
  }
}

@media (max-width: 40rem) {
  body {
    font-size: 1rem;
  }
  h1 {
    font-size: 1.6rem;
  }
  .site-navigation > ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .site-navigation ul ul {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 0 var(--hoba-space);
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .site-navigation ul ul a,
  .site-navigation ul ul span {
    padding: var(--hoba-space-xs) 0;
  }
  main {
    padding: var(--hoba-space);
  }
  .hoba-layout--sm-stack {
    display: flex;
    flex-direction: column;
  }
  .hoba-layout--sm-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .hoba-layout--sm-grid {
    display: grid;
  }
  .hoba-layout--sm-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .hoba-layout--sm-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .hoba-layout--sm-gap-none {
    gap: 0;
  }
  .hoba-layout--sm-gap-sm {
    gap: calc(var(--hoba-space) * 0.5);
  }
  .hoba-layout--sm-gap-md {
    gap: var(--hoba-space);
  }
  .hoba-layout--sm-gap-lg {
    gap: calc(var(--hoba-space) * 2);
  }
  .hoba-layout--sm-align-start {
    align-items: flex-start;
  }
  .hoba-layout--sm-align-center {
    align-items: center;
  }
  .hoba-layout--sm-align-end {
    align-items: flex-end;
  }
  .hoba-layout--sm-align-stretch {
    align-items: stretch;
  }
}
:root {
  --hoba-color-bg: #f5f6fa;
  --hoba-color-surface: #ffffff;
  --hoba-color-text: #0f1f3d;
  --hoba-color-muted: #254da4;
  --hoba-color-primary: #2563eb;
  --hoba-color-primary-hover: #2157cf;
  --hoba-color-primary-ink: #ffffff;
  --hoba-color-border: #bfcae3;
  --hoba-color-accent: #0d9488;
  --hoba-ink: #0f1f3d;
  --hoba-muted: #254da4;
  --hoba-accent: #0d9488;
  --hoba-accent-ink: #ffffff;
  --hoba-surface: #ffffff;
  --hoba-border: #bfcae3;
  --hoba-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hoba-font-h1: 2rem;
  --hoba-font-h2: 1.35rem;
  --hoba-font-h3: 1.15rem;
  --hoba-font-body: 1rem;
  --hoba-font-small: 0.875rem;
  --hoba-radius: 0.75rem;
  --hoba-radius-sm: 0.375rem;
  --hoba-radius-md: 0.75rem;
  --hoba-radius-lg: 1.125rem;
  --hoba-shadow-sm: 0 2px 4px rgba(26, 32, 44, 0.1);
  --hoba-shadow-md: 0 8px 20px rgba(26, 32, 44, 0.16);
}