/* Quillfort public site — base layer.
   Every value comes from the brand tokens in /brand.css (--qf-*). Do not add
   raw colours, font stacks or pixel spacing here; add a token instead. */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--qf-base-size); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--qf-font-body);
  font-weight: var(--qf-weight-regular);
  line-height: 1.6;
  color: var(--qf-text);
  background: var(--qf-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--qf-font-heading);
  font-weight: var(--qf-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--qf-space-4);
  text-wrap: balance;
  color: var(--qf-heading);
}
.qf-bg-primary :is(h1, h2, h3, h4, h5, h6), .qf-bg-inverse :is(h1, h2, h3, h4, h5, h6), .qf-hero-overlay :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
h1 { font-size: var(--qf-step-5); }
h2 { font-size: var(--qf-step-4); }
h3 { font-size: var(--qf-step-2); }
h4 { font-size: var(--qf-step-1); }
h5, h6 { font-size: var(--qf-step-0); }
p { margin: 0 0 var(--qf-space-4); }
a { color: var(--qf-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--qf-primary); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--qf-primary); color: var(--qf-on-primary); }
hr { border: 0; border-top: 1px solid var(--qf-border); margin: var(--qf-space-10) 0; }
code, kbd, pre, samp { font-family: var(--qf-font-mono); font-size: 0.9em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---- accessibility helpers ------------------------------------------------ */
.qf-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.qf-skip {
  position: absolute; left: var(--qf-space-4); top: -100px; z-index: 100;
  padding: var(--qf-space-3) var(--qf-space-5); background: var(--qf-primary); color: var(--qf-on-primary);
  border-radius: var(--qf-radius-btn); font-weight: var(--qf-weight-semibold); text-decoration: none;
}
.qf-skip:focus { top: var(--qf-space-4); }

/* ---- page frame ------------------------------------------------------------- */
.qf-banner-env {
  background: var(--qf-warning); color: var(--qf-on-primary); text-align: center;
  font: var(--qf-weight-semibold) var(--qf-step-n1)/1.4 var(--qf-font-mono);
  padding: var(--qf-space-2); letter-spacing: 0.08em; text-transform: uppercase;
}
.qf-banner-preview {
  position: sticky; top: 0; z-index: 50; background: var(--qf-text); color: var(--qf-bg);
  font: var(--qf-weight-medium) var(--qf-step-n1)/1.4 var(--qf-font-mono); padding: var(--qf-space-2) var(--qf-space-4);
  display: flex; gap: var(--qf-space-3); justify-content: center; flex-wrap: wrap;
}

.qf-header {
  border-bottom: 1px solid var(--qf-border);
  background: var(--qf-bg);
  position: relative; z-index: 20;
}
.qf-header-inner {
  display: flex; align-items: center; gap: var(--qf-space-6);
  min-height: var(--qf-space-16); padding-block: var(--qf-space-3);
}
.qf-logo { display: inline-flex; align-items: center; gap: var(--qf-space-3); text-decoration: none; color: var(--qf-text); font-family: var(--qf-font-heading); font-weight: var(--qf-weight-bold); font-size: var(--qf-step-1); }
.qf-logo img { height: var(--qf-space-12); width: auto; }
.qf-logo-dark { display: none; }
/* .qf-has-dark-logo is set only when dark mode is "auto" and a dark logo exists. */
@media (prefers-color-scheme: dark) {
  .qf-has-dark-logo .qf-logo-dark { display: block; }
  .qf-has-dark-logo .qf-logo-light { display: none; }
}

.qf-nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--qf-space-2);
  background: transparent; border: 1px solid var(--qf-border); border-radius: var(--qf-radius-btn);
  padding: var(--qf-space-2) var(--qf-space-3); cursor: pointer; font-weight: var(--qf-weight-medium);
}
.qf-nav { display: none; width: 100%; }
.qf-nav[data-open="true"], .qf-no-js .qf-nav { display: block; }
.qf-header-inner { flex-wrap: wrap; }
.qf-nav ul { list-style: none; margin: 0; padding: 0; }
.qf-nav > ul { display: flex; flex-direction: column; gap: var(--qf-space-1); padding-block: var(--qf-space-3); }
.qf-nav a { display: block; padding: var(--qf-space-2) var(--qf-space-3); border-radius: var(--qf-radius-btn); color: var(--qf-text); text-decoration: none; font-weight: var(--qf-weight-medium); }
.qf-nav a:hover { background: var(--qf-surface-alt); }
.qf-nav a[aria-current="page"] { color: var(--qf-primary); box-shadow: inset 3px 0 0 var(--qf-primary); }
.qf-nav .qf-subnav { padding-left: var(--qf-space-4); }
.qf-nav .qf-subnav a { font-weight: var(--qf-weight-regular); color: var(--qf-muted); }
.qf-header-cta { width: 100%; }

@media (min-width: 900px) {
  .qf-header-inner { flex-wrap: nowrap; }
  .qf-nav-toggle { display: none; }
  .qf-nav, .qf-nav[data-open="false"] { display: block; width: auto; margin-left: auto; }
  .qf-nav > ul { flex-direction: row; align-items: center; padding: 0; }
  .qf-nav > ul > li { position: relative; }
  .qf-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--qf-primary); border-radius: 0; }
  .qf-nav .qf-subnav {
    display: none; position: absolute; top: 100%; left: 0; min-width: 14rem; padding: var(--qf-space-2);
    background: var(--qf-surface); border: 1px solid var(--qf-border); border-radius: var(--qf-radius-card);
    box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.25);
  }
  .qf-nav li:hover > .qf-subnav, .qf-nav li:focus-within > .qf-subnav { display: block; }
  .qf-header-cta { width: auto; }
}

main { display: block; }
main:focus { outline: none; }

.qf-footer {
  margin-top: var(--qf-space-16);
  border-top: 1px solid var(--qf-border);
  background: var(--qf-surface-alt);
  padding-block: var(--qf-space-12) var(--qf-space-8);
  font-size: var(--qf-step-n1);
}
.qf-footer-grid { display: grid; gap: var(--qf-space-8); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.qf-footer h2 { font-size: var(--qf-step-n1); font-family: var(--qf-font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--qf-muted); margin-bottom: var(--qf-space-3); }
.qf-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--qf-space-2); }
.qf-footer a { color: var(--qf-text); text-decoration: none; }
.qf-footer a:hover { text-decoration: underline; }
.qf-footer-meta { margin-top: var(--qf-space-10); padding-top: var(--qf-space-6); border-top: 1px solid var(--qf-border); display: flex; flex-wrap: wrap; gap: var(--qf-space-4); justify-content: space-between; color: var(--qf-muted); }
.qf-social { display: flex; flex-wrap: wrap; gap: var(--qf-space-4); }

/* ---- prose (Markdown bodies, rich text blocks) -------------------------------- */
.qf-prose { max-width: var(--qf-content); font-size: var(--qf-step-0); }
.qf-prose > * + * { margin-top: var(--qf-space-5); }
.qf-prose h2 { font-size: var(--qf-step-3); margin-top: var(--qf-space-12); }
.qf-prose h3 { font-size: var(--qf-step-2); margin-top: var(--qf-space-10); }
.qf-prose h4 { font-size: var(--qf-step-1); margin-top: var(--qf-space-8); }
.qf-prose ul, .qf-prose ol { padding-left: 1.4em; }
.qf-prose li + li { margin-top: var(--qf-space-2); }
.qf-prose blockquote {
  margin: var(--qf-space-8) 0; padding: var(--qf-space-1) 0 var(--qf-space-1) var(--qf-space-6);
  border-left: 3px solid var(--qf-primary); color: var(--qf-muted); font-size: var(--qf-step-1);
}
.qf-prose img { border-radius: var(--qf-radius-card); }
.qf-prose figure { margin: var(--qf-space-8) 0; }
.qf-prose figcaption { margin-top: var(--qf-space-2); font-size: var(--qf-step-n1); color: var(--qf-muted); }
.qf-prose table { width: 100%; border-collapse: collapse; font-size: var(--qf-step-n1); display: block; overflow-x: auto; }
.qf-prose th, .qf-prose td { text-align: left; padding: var(--qf-space-2) var(--qf-space-3); border-bottom: 1px solid var(--qf-border); }
.qf-prose th { font-weight: var(--qf-weight-semibold); background: var(--qf-surface-alt); }
.qf-prose :not(pre) > code {
  background: var(--qf-surface-alt); border: 1px solid var(--qf-border); border-radius: 4px;
  padding: 0.1em 0.35em; font-size: 0.85em;
}
.qf-prose a[href^="http"]:not([href*="://localhost"])::after { content: "↗"; font-size: 0.75em; margin-left: 0.15em; text-decoration: none; display: inline-block; }

/* ---- code blocks -------------------------------------------------------------- */
.qf-code { position: relative; margin: var(--qf-space-8) 0; border: 1px solid var(--qf-border); border-radius: var(--qf-radius-card); background: var(--qf-surface); overflow: hidden; }
.qf-code[data-lang]::before {
  content: attr(data-lang); display: block; padding: var(--qf-space-2) var(--qf-space-4);
  font: var(--qf-weight-medium) var(--qf-step-n2)/1.4 var(--qf-font-mono); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--qf-muted); border-bottom: 1px solid var(--qf-border); background: var(--qf-surface-alt);
}
.qf-code pre, .qf-code .chroma { margin: 0; padding: var(--qf-space-4); overflow-x: auto; font-size: var(--qf-step-0); line-height: 1.55; tab-size: 4; background: transparent !important; }
.qf-code pre:focus-visible { outline-offset: -3px; }
.qf-code-copy {
  position: absolute; top: var(--qf-space-1); right: var(--qf-space-2);
  font: var(--qf-weight-medium) var(--qf-step-n2)/1 var(--qf-font-mono); padding: var(--qf-space-2) var(--qf-space-3);
  background: var(--qf-surface); border: 1px solid var(--qf-border); border-radius: var(--qf-radius-btn); cursor: pointer; color: var(--qf-text);
}
.qf-code-caption { padding: var(--qf-space-2) var(--qf-space-4); font-size: var(--qf-step-n1); color: var(--qf-muted); border-top: 1px solid var(--qf-border); }

/* ---- forms (shared by forms, search, comments) ---------------------------------- */
.qf-field { display: grid; gap: var(--qf-space-2); margin-bottom: var(--qf-space-5); }
.qf-label { font-weight: var(--qf-weight-semibold); font-size: var(--qf-step-n1); }
.qf-hint { font-size: var(--qf-step-n1); color: var(--qf-muted); }
.qf-input, .qf-textarea, .qf-select {
  width: 100%; padding: var(--qf-space-3) var(--qf-space-4); border: 1px solid var(--qf-border);
  border-radius: var(--qf-radius-btn); background: var(--qf-surface); color: var(--qf-text); min-height: 2.75rem;
}
.qf-textarea { min-height: 8rem; resize: vertical; }
.qf-input:focus-visible, .qf-textarea:focus-visible, .qf-select:focus-visible { outline-offset: 0; }
.qf-input[aria-invalid="true"], .qf-textarea[aria-invalid="true"] { border-color: var(--qf-danger); }
.qf-error { color: var(--qf-danger); font-size: var(--qf-step-n1); font-weight: var(--qf-weight-medium); }
.qf-alert { padding: var(--qf-space-4) var(--qf-space-5); border-radius: var(--qf-radius-card); border: 1px solid var(--qf-border); background: var(--qf-surface); }
.qf-alert-success { border-color: var(--qf-success); }
.qf-alert-error { border-color: var(--qf-danger); }
.qf-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.qf-prose-wide { max-width: none; }
/* Header CTA: keep button styling inside the nav (nav link rules are more specific). */
.qf-nav a.qf-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--qf-space-2) var(--qf-space-5); color: var(--qf-on-primary); border-radius: var(--qf-radius-btn); }
.qf-nav a.qf-btn:hover { background: var(--qf-primary); filter: brightness(1.08); }
.qf-nav li.qf-header-cta { margin-left: var(--qf-space-3); }
@media (max-width: 899px) { .qf-nav li.qf-header-cta { margin: var(--qf-space-2) 0 0; } .qf-nav a.qf-btn { width: 100%; } }
.qf-code pre code { font-size: 0.875em; }

/* Quillfort utilities — the vocabulary for composing layouts.
   This file IS the allowlist: candidate (AI-authored) blocks may only use
   qf-* classes defined in the site stylesheets, so improvisation stays on
   the design tokens. Keep utilities token-based and mobile-first; grids
   collapse to one column on small screens automatically. */

/* ---- containers & sections ---- */
.qf-container { width: 100%; max-width: var(--qf-wide); margin-inline: auto; padding-inline: var(--qf-space-5); }
.qf-container-narrow { width: 100%; max-width: var(--qf-content); margin-inline: auto; padding-inline: var(--qf-space-5); }
@media (min-width: 640px) { .qf-container, .qf-container-narrow { padding-inline: var(--qf-space-8); } }
.qf-section { padding-block: var(--qf-space-12); }
.qf-section-tight { padding-block: var(--qf-space-8); }
.qf-section-loose { padding-block: var(--qf-space-16); }
@media (min-width: 900px) { .qf-section { padding-block: var(--qf-space-16); } .qf-section-loose { padding-block: calc(var(--qf-space-16) * 1.5); } }
.qf-bg-surface { background: var(--qf-surface); }
.qf-bg-alt { background: var(--qf-surface-alt); }
.qf-bg-primary { background: var(--qf-primary); color: var(--qf-on-primary); }
.qf-bg-primary a:not(.qf-btn) { color: inherit; }
.qf-bg-inverse { background: var(--qf-heading); color: var(--qf-on-dark); }
.qf-bg-inverse a:not(.qf-btn) { color: inherit; }
.qf-border-top { border-top: 1px solid var(--qf-border); }
.qf-border-bottom { border-bottom: 1px solid var(--qf-border); }

/* ---- layout primitives ---- */
.qf-stack { display: flex; flex-direction: column; gap: var(--qf-space-4); }
.qf-stack-sm { display: flex; flex-direction: column; gap: var(--qf-space-2); }
.qf-stack-lg { display: flex; flex-direction: column; gap: var(--qf-space-8); }
.qf-stack > *, .qf-stack-sm > *, .qf-stack-lg > * { margin: 0; }
.qf-cluster { display: flex; flex-wrap: wrap; gap: var(--qf-space-3); align-items: center; }
.qf-cluster-between { display: flex; flex-wrap: wrap; gap: var(--qf-space-3); align-items: center; justify-content: space-between; }
.qf-center { display: grid; place-items: center; text-align: center; }
.qf-grid { display: grid; gap: var(--qf-space-6); grid-template-columns: 1fr; }
.qf-grid-auto { display: grid; gap: var(--qf-space-6); grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
.qf-grid-2, .qf-grid-3, .qf-grid-4 { display: grid; gap: var(--qf-space-6); grid-template-columns: 1fr; }
.qf-split { display: grid; gap: var(--qf-space-8); grid-template-columns: 1fr; align-items: center; }
.qf-split-reverse > :first-child { order: 0; }
@media (min-width: 640px) {
  .qf-grid-3, .qf-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .qf-grid-2, .qf-split { grid-template-columns: repeat(2, 1fr); }
  .qf-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .qf-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .qf-split { gap: var(--qf-space-12); }
  .qf-split-reverse > :first-child { order: 2; }
  .qf-split-wide-left { grid-template-columns: 3fr 2fr; }
  .qf-split-wide-right { grid-template-columns: 2fr 3fr; }
}
.qf-items-start { align-items: start; }
.qf-items-center { align-items: center; }
.qf-justify-center { justify-content: center; }
.qf-full { width: 100%; }
.qf-measure { max-width: var(--qf-content); }
.qf-measure-narrow { max-width: 38rem; }
.qf-mx-auto { margin-inline: auto; }

/* ---- typography ---- */
.qf-display { font-size: var(--qf-step-6); line-height: 1.05; letter-spacing: -0.025em; }
.qf-h1 { font-size: var(--qf-step-5); }
.qf-h2 { font-size: var(--qf-step-4); }
.qf-h3 { font-size: var(--qf-step-2); }
.qf-h4 { font-size: var(--qf-step-1); }
.qf-lead { font-size: var(--qf-step-1); line-height: 1.5; color: var(--qf-muted); }
.qf-bg-primary .qf-lead, .qf-bg-inverse .qf-lead { color: inherit; opacity: 0.9; }
.qf-small { font-size: var(--qf-step-n1); }
.qf-tiny { font-size: var(--qf-step-n2); }
.qf-eyebrow {
  font-family: var(--qf-font-mono); font-size: var(--qf-step-n1); font-weight: var(--qf-weight-medium);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--qf-primary);
}
.qf-bg-primary .qf-eyebrow, .qf-bg-inverse .qf-eyebrow { color: inherit; }
.qf-mono { font-family: var(--qf-font-mono); }
.qf-heading-font { font-family: var(--qf-font-heading); }
.qf-muted { color: var(--qf-muted); }
.qf-text-primary { color: var(--qf-primary); }
.qf-text-center { text-align: center; }
.qf-text-left { text-align: left; }
.qf-text-balance { text-wrap: balance; }
.qf-weight-medium { font-weight: var(--qf-weight-medium); }
.qf-weight-semibold { font-weight: var(--qf-weight-semibold); }
.qf-weight-bold { font-weight: var(--qf-weight-bold); }
.qf-uppercase { text-transform: uppercase; letter-spacing: 0.06em; }
.qf-list-plain { list-style: none; padding: 0; margin: 0; }
.qf-list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--qf-space-3); }
.qf-list-check li { padding-left: 1.75em; position: relative; }
.qf-list-check li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.9em; height: 0.5em; border-left: 2px solid var(--qf-accent); border-bottom: 2px solid var(--qf-accent); transform: rotate(-45deg); }

/* ---- surfaces ---- */
.qf-card { background: var(--qf-surface); border: 1px solid var(--qf-border); border-radius: var(--qf-radius-card); padding: var(--qf-space-6); color: var(--qf-text); }
.qf-card-flat { background: var(--qf-surface-alt); border-radius: var(--qf-radius-card); padding: var(--qf-space-6); color: var(--qf-text); }
.qf-card-link { text-decoration: none; display: block; transition: border-color 120ms ease, transform 120ms ease; }
.qf-card-link:hover { border-color: var(--qf-primary); }
.qf-card-link:hover .qf-card-title { text-decoration: underline; }
.qf-card-title { font-size: var(--qf-step-1); margin-bottom: var(--qf-space-2); color: var(--qf-heading); }
.qf-panel { border-left: 3px solid var(--qf-primary); padding: var(--qf-space-2) 0 var(--qf-space-2) var(--qf-space-5); }
.qf-badge {
  display: inline-flex; align-items: center; gap: var(--qf-space-1); padding: var(--qf-space-1) var(--qf-space-3);
  border: 1px solid var(--qf-border); border-radius: 999px; font-size: var(--qf-step-n2); font-weight: var(--qf-weight-medium);
  font-family: var(--qf-font-mono); text-transform: uppercase; letter-spacing: 0.06em; background: var(--qf-surface); color: var(--qf-text); text-decoration: none;
}
.qf-divider { border: 0; border-top: 1px solid var(--qf-border); margin: 0; }
.qf-rounded { border-radius: var(--qf-radius-card); }
.qf-shadow { box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 12px 32px -16px rgb(0 0 0 / 0.25); }
.qf-media { width: 100%; height: 100%; object-fit: cover; border-radius: var(--qf-radius-card); }
.qf-aspect-video { aspect-ratio: 16 / 9; }
.qf-aspect-square { aspect-ratio: 1; }
.qf-aspect-wide { aspect-ratio: 21 / 9; }
.qf-icon { width: var(--qf-space-10); height: var(--qf-space-10); color: var(--qf-primary); flex: none; }
.qf-icon-box { display: inline-grid; place-items: center; width: var(--qf-space-12); height: var(--qf-space-12); border-radius: var(--qf-radius-btn); background: var(--qf-surface-alt); color: var(--qf-primary); }

/* ---- buttons & links ---- */
.qf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--qf-space-2);
  min-height: 2.75rem; padding: var(--qf-space-3) var(--qf-space-6); border-radius: var(--qf-radius-btn);
  font-weight: var(--qf-weight-semibold); text-decoration: none; line-height: 1.2; cursor: pointer;
  border: 1px solid transparent; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.qf-btn-primary { background: var(--qf-primary); color: var(--qf-on-primary); }
.qf-btn-primary:hover { filter: brightness(1.08); }
.qf-btn-secondary { background: transparent; color: var(--qf-text); border-color: var(--qf-border); }
.qf-btn-secondary:hover { border-color: var(--qf-text); }
.qf-btn-ghost { background: transparent; color: var(--qf-link); padding-inline: var(--qf-space-2); }
.qf-bg-primary .qf-btn-primary { background: var(--qf-on-primary); color: var(--qf-primary); }
.qf-bg-primary .qf-btn-secondary, .qf-bg-inverse .qf-btn-secondary { color: inherit; border-color: currentColor; }
.qf-btn-lg { min-height: 3.25rem; padding: var(--qf-space-4) var(--qf-space-8); font-size: var(--qf-step-1); }
.qf-link-arrow { font-weight: var(--qf-weight-semibold); text-decoration: none; color: var(--qf-link); }
.qf-link-arrow::after { content: " →"; transition: margin 120ms ease; }
.qf-link-arrow:hover::after { margin-left: 0.2em; }

/* ---- visibility ---- */
.qf-hide-mobile { display: none; }
@media (min-width: 900px) { .qf-hide-mobile { display: revert; } .qf-hide-desktop { display: none; } }

/* ---- spacing scale (token steps) ---- */
.qf-mt-0 { margin-top: var(--qf-space-0); }
.qf-mb-0 { margin-bottom: var(--qf-space-0); }
.qf-p-0 { padding: var(--qf-space-0); }
.qf-py-0 { padding-block: var(--qf-space-0); }
.qf-px-0 { padding-inline: var(--qf-space-0); }
.qf-gap-0 { gap: var(--qf-space-0); }
.qf-mt-1 { margin-top: var(--qf-space-1); }
.qf-mb-1 { margin-bottom: var(--qf-space-1); }
.qf-p-1 { padding: var(--qf-space-1); }
.qf-py-1 { padding-block: var(--qf-space-1); }
.qf-px-1 { padding-inline: var(--qf-space-1); }
.qf-gap-1 { gap: var(--qf-space-1); }
.qf-mt-2 { margin-top: var(--qf-space-2); }
.qf-mb-2 { margin-bottom: var(--qf-space-2); }
.qf-p-2 { padding: var(--qf-space-2); }
.qf-py-2 { padding-block: var(--qf-space-2); }
.qf-px-2 { padding-inline: var(--qf-space-2); }
.qf-gap-2 { gap: var(--qf-space-2); }
.qf-mt-3 { margin-top: var(--qf-space-3); }
.qf-mb-3 { margin-bottom: var(--qf-space-3); }
.qf-p-3 { padding: var(--qf-space-3); }
.qf-py-3 { padding-block: var(--qf-space-3); }
.qf-px-3 { padding-inline: var(--qf-space-3); }
.qf-gap-3 { gap: var(--qf-space-3); }
.qf-mt-4 { margin-top: var(--qf-space-4); }
.qf-mb-4 { margin-bottom: var(--qf-space-4); }
.qf-p-4 { padding: var(--qf-space-4); }
.qf-py-4 { padding-block: var(--qf-space-4); }
.qf-px-4 { padding-inline: var(--qf-space-4); }
.qf-gap-4 { gap: var(--qf-space-4); }
.qf-mt-5 { margin-top: var(--qf-space-5); }
.qf-mb-5 { margin-bottom: var(--qf-space-5); }
.qf-p-5 { padding: var(--qf-space-5); }
.qf-py-5 { padding-block: var(--qf-space-5); }
.qf-px-5 { padding-inline: var(--qf-space-5); }
.qf-gap-5 { gap: var(--qf-space-5); }
.qf-mt-6 { margin-top: var(--qf-space-6); }
.qf-mb-6 { margin-bottom: var(--qf-space-6); }
.qf-p-6 { padding: var(--qf-space-6); }
.qf-py-6 { padding-block: var(--qf-space-6); }
.qf-px-6 { padding-inline: var(--qf-space-6); }
.qf-gap-6 { gap: var(--qf-space-6); }
.qf-mt-8 { margin-top: var(--qf-space-8); }
.qf-mb-8 { margin-bottom: var(--qf-space-8); }
.qf-p-8 { padding: var(--qf-space-8); }
.qf-py-8 { padding-block: var(--qf-space-8); }
.qf-px-8 { padding-inline: var(--qf-space-8); }
.qf-gap-8 { gap: var(--qf-space-8); }
.qf-mt-10 { margin-top: var(--qf-space-10); }
.qf-mb-10 { margin-bottom: var(--qf-space-10); }
.qf-p-10 { padding: var(--qf-space-10); }
.qf-py-10 { padding-block: var(--qf-space-10); }
.qf-px-10 { padding-inline: var(--qf-space-10); }
.qf-gap-10 { gap: var(--qf-space-10); }
.qf-mt-12 { margin-top: var(--qf-space-12); }
.qf-mb-12 { margin-bottom: var(--qf-space-12); }
.qf-p-12 { padding: var(--qf-space-12); }
.qf-py-12 { padding-block: var(--qf-space-12); }
.qf-px-12 { padding-inline: var(--qf-space-12); }
.qf-gap-12 { gap: var(--qf-space-12); }
.qf-mt-16 { margin-top: var(--qf-space-16); }
.qf-mb-16 { margin-bottom: var(--qf-space-16); }
.qf-p-16 { padding: var(--qf-space-16); }
.qf-py-16 { padding-block: var(--qf-space-16); }
.qf-px-16 { padding-inline: var(--qf-space-16); }
.qf-gap-16 { gap: var(--qf-space-16); }

/* Quillfort built-in component styles. Token-based only. */

/* hero */
.qf-hero .qf-display { margin: 0; }
.qf-hero.qf-bg-inverse, .qf-hero.qf-bg-primary { margin-bottom: 0; }
.qf-hero-media .qf-media { aspect-ratio: 4 / 3; }

/* cards */
.qf-card-stack { display: flex; flex-direction: column; gap: var(--qf-space-4); height: 100%; position: relative; }
.qf-card-media { margin: calc(var(--qf-space-6) * -1) calc(var(--qf-space-6) * -1) 0; }
.qf-card-media .qf-media { border-radius: var(--qf-radius-card) var(--qf-radius-card) 0 0; }
.qf-card-linked { transition: border-color 120ms ease; }
.qf-card-linked:hover, .qf-card-linked:focus-within { border-color: var(--qf-primary); }
.qf-stretched { color: inherit; text-decoration: none; }
.qf-stretched::after { content: ""; position: absolute; inset: 0; border-radius: var(--qf-radius-card); }
.qf-stretched:hover { text-decoration: underline; }
.qf-stretched:focus-visible { outline: none; }
.qf-stretched:focus-visible::after { outline: 3px solid var(--qf-primary); outline-offset: 3px; }

/* call to action */
.qf-cta { padding: var(--qf-space-10) var(--qf-space-6); display: grid; gap: var(--qf-space-6); }
@media (min-width: 900px) { .qf-cta { padding: var(--qf-space-12); grid-template-columns: 1fr auto; align-items: center; } }

/* stats */
.qf-stats { margin: 0; }
.qf-stat { display: flex; flex-direction: column-reverse; gap: var(--qf-space-1); border-left: 2px solid var(--qf-primary); padding-left: var(--qf-space-4); }
.qf-stat dd { margin: 0; }
.qf-stat-value { font-family: var(--qf-font-heading); font-size: var(--qf-step-4); font-weight: var(--qf-weight-bold); line-height: 1.1; letter-spacing: -0.02em; }
.qf-stat-label { color: var(--qf-muted); }

/* faq */
.qf-faq { border-top: 1px solid var(--qf-border); }
.qf-faq-item { border-bottom: 1px solid var(--qf-border); }
.qf-faq-item summary { list-style: none; cursor: pointer; padding: var(--qf-space-5) var(--qf-space-10) var(--qf-space-5) 0; position: relative; }
.qf-faq-item summary::-webkit-details-marker { display: none; }
.qf-faq-item summary::after { content: "+"; position: absolute; right: var(--qf-space-2); top: 50%; transform: translateY(-50%); font-size: var(--qf-step-2); color: var(--qf-primary); font-family: var(--qf-font-mono); }
.qf-faq-item[open] summary::after { content: "−"; }
.qf-faq-q { font-size: var(--qf-step-1); margin: 0; display: inline; }
.qf-faq-a { padding-bottom: var(--qf-space-6); }

/* steps */
.qf-steps { list-style: none; padding: 0; margin: 0; counter-reset: qf-step; }
.qf-step { counter-increment: qf-step; position: relative; padding-top: var(--qf-space-12); border-top: 1px solid var(--qf-border); }
.qf-step::before { content: counter(qf-step, decimal-leading-zero); position: absolute; top: var(--qf-space-4); left: 0; font-family: var(--qf-font-mono); font-weight: var(--qf-weight-medium); color: var(--qf-primary); }

/* quote */
.qf-quote { margin: 0; }
.qf-quote blockquote { margin: 0; font-family: var(--qf-font-heading); font-size: var(--qf-step-2); line-height: 1.35; font-weight: var(--qf-weight-medium); letter-spacing: -0.01em; }
.qf-quote blockquote p::before { content: "“"; color: var(--qf-primary); }
.qf-quote blockquote p::after { content: "”"; color: var(--qf-primary); }
.qf-quote-avatar img { width: var(--qf-space-12); height: var(--qf-space-12); border-radius: 999px; object-fit: cover; }

/* logos */
.qf-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--qf-space-8) var(--qf-space-12); }
.qf-logo-img { height: var(--qf-space-10); width: auto; max-width: 10rem; object-fit: contain; filter: grayscale(1); opacity: 0.8; transition: filter 150ms ease, opacity 150ms ease; }
.qf-logos a:hover .qf-logo-img { filter: none; opacity: 1; }
.qf-logo-text { font-family: var(--qf-font-heading); font-weight: var(--qf-weight-bold); font-size: var(--qf-step-1); color: var(--qf-muted); }

/* callouts */
.qf-callout { border: 1px solid var(--qf-border); border-left-width: 4px; border-radius: var(--qf-radius-card); padding: var(--qf-space-5) var(--qf-space-6); background: var(--qf-surface); }
.qf-callout-label { font-family: var(--qf-font-mono); font-size: var(--qf-step-n2); text-transform: uppercase; letter-spacing: 0.12em; font-weight: var(--qf-weight-semibold); margin-bottom: var(--qf-space-1); }
.qf-callout-title { font-weight: var(--qf-weight-semibold); font-size: var(--qf-step-1); margin-bottom: var(--qf-space-2); }
.qf-callout .qf-prose > :last-child { margin-bottom: 0; }
.qf-callout-info { border-left-color: var(--qf-primary); }
.qf-callout-info .qf-callout-label { color: var(--qf-primary); }
.qf-callout-success { border-left-color: var(--qf-success); }
.qf-callout-success .qf-callout-label { color: var(--qf-success); }
.qf-callout-warning { border-left-color: var(--qf-warning); }
.qf-callout-warning .qf-callout-label { color: var(--qf-warning); }
.qf-callout-danger { border-left-color: var(--qf-danger); }
.qf-callout-danger .qf-callout-label { color: var(--qf-danger); }

/* media */
.qf-figure { margin: 0; }
.qf-figure img { width: 100%; }
.qf-video { position: relative; overflow: hidden; background: var(--qf-surface-alt); }
.qf-video iframe, .qf-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.qf-video video { object-fit: cover; background: #000; }

/* service hand-off */
.qf-service-cta { padding: var(--qf-space-8); border-color: var(--qf-primary); }

/* ---- blog -------------------------------------------------------------------- */
.qf-post-card { display: flex; flex-direction: column; gap: var(--qf-space-3); height: 100%; position: relative; }
.qf-post-card-media .qf-media { aspect-ratio: 16 / 9; }
.qf-post-card h3 { font-size: var(--qf-step-1); margin: 0; }
.qf-post-meta { display: flex; flex-wrap: wrap; gap: var(--qf-space-2) var(--qf-space-4); color: var(--qf-muted); font-size: var(--qf-step-n1); }
.qf-post-meta a { color: inherit; }
.qf-post-header { padding-block: var(--qf-space-12) var(--qf-space-8); }
.qf-post-header h1 { font-size: var(--qf-step-5); margin-bottom: var(--qf-space-4); }
.qf-post-hero { margin-bottom: var(--qf-space-10); }
.qf-post-hero img { width: 100%; border-radius: var(--qf-radius-card); aspect-ratio: 2 / 1; object-fit: cover; }
.qf-post-layout { display: grid; gap: var(--qf-space-10); }
@media (min-width: 1100px) {
  .qf-post-layout { grid-template-columns: minmax(0, var(--qf-content)) minmax(12rem, 16rem); justify-content: center; gap: var(--qf-space-16); }
  .qf-toc { position: sticky; top: var(--qf-space-8); align-self: start; }
}
.qf-toc { font-size: var(--qf-step-n1); }
.qf-toc h2 { font-family: var(--qf-font-mono); font-size: var(--qf-step-n2); text-transform: uppercase; letter-spacing: 0.1em; color: var(--qf-muted); }
.qf-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--qf-space-2); border-left: 1px solid var(--qf-border); }
.qf-toc li { padding-left: var(--qf-space-3); }
.qf-toc li.qf-toc-h3 { padding-left: var(--qf-space-6); }
.qf-toc a { color: var(--qf-muted); text-decoration: none; }
.qf-toc a:hover { color: var(--qf-text); }
.qf-tags { display: flex; flex-wrap: wrap; gap: var(--qf-space-2); list-style: none; padding: 0; margin: 0; }
.qf-author-box { display: flex; gap: var(--qf-space-5); align-items: flex-start; padding: var(--qf-space-6); }
.qf-author-box img { width: var(--qf-space-16); height: var(--qf-space-16); border-radius: 999px; object-fit: cover; flex: none; }
.qf-pagination { display: flex; justify-content: space-between; gap: var(--qf-space-4); margin-top: var(--qf-space-12); }
.qf-filter-bar { display: flex; flex-wrap: wrap; gap: var(--qf-space-2); }
.qf-filter-bar a[aria-current="page"] { background: var(--qf-text); color: var(--qf-bg); border-color: var(--qf-text); }

/* search */
.qf-search-form { display: flex; gap: var(--qf-space-2); max-width: 36rem; }
.qf-search-results { list-style: none; padding: 0; margin: var(--qf-space-8) 0 0; display: grid; gap: var(--qf-space-8); }
.qf-search-results mark { background: color-mix(in srgb, var(--qf-accent) 30%, transparent); color: inherit; padding: 0 0.1em; border-radius: 2px; }
.qf-search-path { font-family: var(--qf-font-mono); font-size: var(--qf-step-n2); color: var(--qf-muted); }

/* page header for pages without a hero */
.qf-page-header { padding-block: var(--qf-space-12) var(--qf-space-4); }
.qf-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--qf-space-2); padding: 0; margin: 0 0 var(--qf-space-4); font-size: var(--qf-step-n1); color: var(--qf-muted); }
.qf-breadcrumb li + li::before { content: "/"; margin-right: var(--qf-space-2); }
.qf-breadcrumb a { color: inherit; }

/* error pages */
.qf-error-page { padding-block: var(--qf-space-16); }
.qf-error-code { font-family: var(--qf-font-mono); color: var(--qf-primary); }

/* hero: text over a full-width photo. The photo is decorative; a scrim in
   the brand's text colour keeps foreground text at AA contrast. */
.qf-hero-overlay { position: relative; isolation: isolate; color: var(--qf-on-dark); overflow: hidden; min-height: min(70vh, 40rem); display: grid; align-items: center; }
.qf-hero-overlay .qf-lead, .qf-hero-overlay .qf-eyebrow { color: inherit; }
.qf-hero-overlay .qf-lead { opacity: 0.92; }
.qf-hero-overlay .qf-btn-secondary { color: inherit; border-color: currentColor; }
.qf-hero-backdrop { position: absolute; inset: 0; z-index: -1; background: var(--qf-heading); }
.qf-hero-backdrop picture, .qf-hero-backdrop img { width: 100%; height: 100%; }
.qf-hero-backdrop-img { width: 100%; height: 100%; object-fit: cover; }
.qf-hero-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--qf-heading) 92%, transparent) 0%, color-mix(in srgb, var(--qf-heading) 70%, transparent) 55%, color-mix(in srgb, var(--qf-heading) 45%, transparent) 100%); }
@media (max-width: 899px) { .qf-hero-backdrop::after { background: color-mix(in srgb, var(--qf-heading) 82%, transparent); } }

/* two text columns */
.qf-anchor { display: block; position: relative; top: calc(var(--qf-space-8) * -1); visibility: hidden; }
.qf-text-primary-strong { color: var(--qf-text); }
.qf-prose-checks ul { list-style: none; padding-left: 0; }
.qf-prose-checks ul li { position: relative; padding-left: 1.75em; }
.qf-prose-checks ul li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.9em; height: 0.5em; border-left: 2px solid var(--qf-accent); border-bottom: 2px solid var(--qf-accent); transform: rotate(-45deg); }

/* card body grows so calls to action align at the bottom */
.qf-card-body { flex: 1; }
.qf-card-cta { margin-top: auto; padding-top: var(--qf-space-2); }

/* feature grid: custom icon artwork */
.qf-feature-img img { height: var(--qf-space-16); width: auto; max-width: 100%; object-fit: contain; }
.qf-feature-center .qf-feature-img img { margin-inline: auto; }
.qf-feature-center .qf-icon-box { margin-inline: auto; }

/* bands: any block on a decorative background image */
.qf-band { position: relative; isolation: isolate; }
.qf-band-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.qf-band-bg picture, .qf-band-bg img, .qf-band-img { width: 100%; height: 100%; object-fit: cover; }
.qf-band-dark { --qf-text: var(--qf-on-dark); --qf-heading: var(--qf-on-dark); --qf-muted: var(--qf-on-dark); color: var(--qf-on-dark); background: var(--qf-heading-base); }
.qf-band-dark .qf-band-bg::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--qf-heading-base) 70%, transparent); }
.qf-band-dark .qf-card, .qf-band-dark .qf-card-flat { --qf-text: var(--qf-text-base); --qf-heading: var(--qf-heading-base); --qf-muted: var(--qf-muted-base); }
.qf-band-dark .qf-bg-alt, .qf-band-dark .qf-bg-surface { background: transparent; }

/* Post template extras (site settings → post) */
.qf-post-cats { display: flex; flex-wrap: wrap; gap: var(--qf-space-1) var(--qf-space-3); list-style: none; margin: 0; padding: 0; }
.qf-post-cats a { text-decoration: none; }
.qf-post-cats a:hover { text-decoration: underline; }
.qf-link-back { font-weight: 600; text-decoration: none; }
.qf-link-back::before { content: "← "; }
.qf-link-back:hover { text-decoration: underline; }
.qf-post-share { display: grid; gap: var(--qf-space-2); }
.qf-btn-sm { padding: var(--qf-space-1) var(--qf-space-3); font-size: var(--qf-step-n1); }

/* Site chrome extras (site settings: top bar, footer signup/logo/address) */
.qf-topbar { background: var(--qf-heading-base); color: var(--qf-on-dark); font-size: var(--qf-step-n1); }
.qf-topbar-inner { display: flex; justify-content: flex-end; padding-block: var(--qf-space-2); }
.qf-topbar-links { display: flex; flex-wrap: wrap; gap: var(--qf-space-2) var(--qf-space-6); list-style: none; margin: 0; padding: 0; }
.qf-topbar a { color: inherit; text-decoration: none; }
.qf-topbar a:hover { text-decoration: underline; }
.qf-footer-signup { padding-block: var(--qf-space-12); }
.qf-footer-signup-inner { display: grid; gap: var(--qf-space-8); align-items: start; }
@media (min-width: 48rem) { .qf-footer-signup-inner { grid-template-columns: 1fr 1fr; } }
.qf-footer-signup .qf-section-tight { padding: 0; }
.qf-footer-signup .qf-container-narrow { padding: 0; max-width: none; }
.qf-footer-signup .qf-input, .qf-footer-signup .qf-textarea, .qf-footer-signup .qf-select { color: var(--qf-text-base); }
.qf-footer-logo img { max-height: 4rem; width: auto; }
.qf-footer-logo { margin-bottom: var(--qf-space-6); }
.qf-footer-address { font-style: normal; display: grid; gap: var(--qf-space-1); margin-top: var(--qf-space-8); }
.qf-footer-credit { color: var(--qf-muted); }

/* code highlighting */
/* Background */ .bg { background-color: #f7f7f7; }
/* PreWrapper */ .chroma { background-color: #f7f7f7; -webkit-text-size-adjust: none; }
/* Error */ .chroma .err { color: #f6f8fa; background-color: #82071e }
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
/* LineHighlight */ .chroma .hl { background-color: #dedede }
/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* Line */ .chroma .line { display: flex; }
/* Keyword */ .chroma .k { color: #cf222e }
/* KeywordConstant */ .chroma .kc { color: #cf222e }
/* KeywordDeclaration */ .chroma .kd { color: #cf222e }
/* KeywordNamespace */ .chroma .kn { color: #cf222e }
/* KeywordPseudo */ .chroma .kp { color: #cf222e }
/* KeywordReserved */ .chroma .kr { color: #cf222e }
/* KeywordType */ .chroma .kt { color: #cf222e }
/* NameAttribute */ .chroma .na { color: #1f2328 }
/* NameClass */ .chroma .nc { color: #1f2328 }
/* NameConstant */ .chroma .no { color: #0550ae }
/* NameDecorator */ .chroma .nd { color: #0550ae }
/* NameEntity */ .chroma .ni { color: #6639ba }
/* NameLabel */ .chroma .nl { color: #990000; font-weight: bold }
/* NameNamespace */ .chroma .nn { color: #24292e }
/* NameOther */ .chroma .nx { color: #1f2328 }
/* NameTag */ .chroma .nt { color: #0550ae }
/* NameBuiltin */ .chroma .nb { color: #6639ba }
/* NameBuiltinPseudo */ .chroma .bp { color: #6a737d }
/* NameVariable */ .chroma .nv { color: #953800 }
/* NameVariableClass */ .chroma .vc { color: #953800 }
/* NameVariableGlobal */ .chroma .vg { color: #953800 }
/* NameVariableInstance */ .chroma .vi { color: #953800 }
/* NameVariableMagic */ .chroma .vm { color: #953800 }
/* NameFunction */ .chroma .nf { color: #6639ba }
/* NameFunctionMagic */ .chroma .fm { color: #6639ba }
/* LiteralString */ .chroma .s { color: #0a3069 }
/* LiteralStringAffix */ .chroma .sa { color: #0a3069 }
/* LiteralStringBacktick */ .chroma .sb { color: #0a3069 }
/* LiteralStringChar */ .chroma .sc { color: #0a3069 }
/* LiteralStringDelimiter */ .chroma .dl { color: #0a3069 }
/* LiteralStringDoc */ .chroma .sd { color: #0a3069 }
/* LiteralStringDouble */ .chroma .s2 { color: #0a3069 }
/* LiteralStringEscape */ .chroma .se { color: #0a3069 }
/* LiteralStringHeredoc */ .chroma .sh { color: #0a3069 }
/* LiteralStringInterpol */ .chroma .si { color: #0a3069 }
/* LiteralStringOther */ .chroma .sx { color: #0a3069 }
/* LiteralStringRegex */ .chroma .sr { color: #0a3069 }
/* LiteralStringSingle */ .chroma .s1 { color: #0a3069 }
/* LiteralStringSymbol */ .chroma .ss { color: #032f62 }
/* LiteralNumber */ .chroma .m { color: #0550ae }
/* LiteralNumberBin */ .chroma .mb { color: #0550ae }
/* LiteralNumberFloat */ .chroma .mf { color: #0550ae }
/* LiteralNumberHex */ .chroma .mh { color: #0550ae }
/* LiteralNumberInteger */ .chroma .mi { color: #0550ae }
/* LiteralNumberIntegerLong */ .chroma .il { color: #0550ae }
/* LiteralNumberOct */ .chroma .mo { color: #0550ae }
/* Operator */ .chroma .o { color: #0550ae }
/* OperatorWord */ .chroma .ow { color: #0550ae }
/* OperatorReserved */ .chroma .or { color: #0550ae }
/* Punctuation */ .chroma .p { color: #1f2328 }
/* Comment */ .chroma .c { color: #57606a }
/* CommentHashbang */ .chroma .ch { color: #57606a }
/* CommentMultiline */ .chroma .cm { color: #57606a }
/* CommentSingle */ .chroma .c1 { color: #57606a }
/* CommentSpecial */ .chroma .cs { color: #57606a }
/* CommentPreproc */ .chroma .cp { color: #57606a }
/* CommentPreprocFile */ .chroma .cpf { color: #57606a }
/* GenericDeleted */ .chroma .gd { color: #82071e; background-color: #ffebe9 }
/* GenericEmph */ .chroma .ge { color: #1f2328 }
/* GenericInserted */ .chroma .gi { color: #116329; background-color: #dafbe1 }
/* GenericOutput */ .chroma .go { color: #1f2328 }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
/* TextWhitespace */ .chroma .w { color: #ffffff }