@font-face { font-family: 'Manrope'; src: url('/static/fonts/manrope.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/static/fonts/cormorant.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }

/* Avlira Back Office brand (kit 2026-11-03) — re-skin of the marketing site.
   Palette and type are the official kit values (brand-kit/implementation/brand-tokens.json, brand.css):
   sea ink #163D4A, limestone #F6F3EA, brass #B39868, action blue #275AC7, muted #52676C.
   Brand rules held here: self-hosted Manrope (UI) + Cormorant Garamond (headings) only — CSP font-src 'self',
   no third-party requests, no @import; one action colour (blue) for links, primary buttons and the focus ring;
   brass is decoration ONLY: hairlines (header bottom, footer top, the rule under each page h1) plus the hero
   arch outline. Brass on limestone measures 2.49:1, so it never carries text — .eyebrow uses --ink-3.
   Restraint over decoration: brand lives in these custom properties — swap them when a new guide lands.

   a11y fixes 2026-11-03 (DeepSeek): CSS-only pass over swarm-a11y.md, HIGH findings + N2 (medium contrast).
   N1  new token --line-strong #7E8E91 — measured 3.41:1 vs --card #ffffff and 3.07:1 vs --paper #F6F3EA,
       so control borders clear SC 1.4.11 (>= 3:1). Applied to .btn. --line stays decorative (cards, tables,
       hairlines) and is now documented as such.
   N2  same border fix on .menu summary, the only navigation trigger at <= 860px.
   D5/R1/I2  .menu nav: max-height calc(100vh - 80px) + calc(100dvh - 80px), overflow-y: auto and
       -webkit-overflow-scrolling: touch, so the panel scrolls inside the sticky header instead of running
       past the bottom of a landscape phone viewport ("Book a demo" is reachable again).
   I1  -webkit-backdrop-filter added beside backdrop-filter on .top (iOS < 18 keeps the blur).
   2.5.8  .menu summary min-height 44px; nav/footer links and .btn.sm grow to a 44px tap area on touch.
       The link padding is scoped to (pointer: coarse) so the desktop header's aria-current underline keeps
       hugging its text and the footer keeps its 8px rhythm on a mouse-driven desktop.
   Unchanged on purpose: every selector, the <details> pattern, the font stacks' system fallbacks,
   no url() to other hosts. Text pairs re-measured on the brand palette (all >= 4.5:1): --ink 11.5:1,
   --ink-2 8.06:1, --ink-3 5.38:1, --accent 5.61:1 on --paper; white on --accent 6.23:1.
   Out of scope here (HTML-side or non-contrast): S1 tabindex="-1" on <main>, S2 second .skip link,
   F1 scroll-padding-top, M1 CRLF mailto body, M2/S2 fallbacks, A3/A4 footer brand and SVG stroke,
   and swapping the header/footer markup to <img class="logo"> (the .mark rule stays harmless until then). */

:root {
  --ink: #163D4A;         /* sea ink — body text, skip link, aria-current */
  --ink-2: #2E4E58;       /* secondary text, 8.06:1 on limestone */
  --ink-3: #52676C;       /* muted: tertiary text, eyebrows, captions — 5.38:1 on paper */
  --paper: #F6F3EA;       /* page — limestone */
  --card: #FFFFFF;
  --line: #DCE3DF;        /* decorative rules only: cards, tables, hairlines (not a UI boundary) */
  --line-strong: #7E8E91; /* control borders, SC 1.4.11: 3.41:1 on --card, 3.07:1 on --paper */
  --accent: #275AC7;      /* the one action colour: links, primary buttons, focus ring */
  --accent-ink: #FFFFFF;
  --accent-soft: #E9EFFB;
  --brass: #B39868;       /* decoration ONLY: hairlines + hero arch outline. 2.49:1 on limestone — never text */
  --footer: #EFEBE0;      /* footer and table-head band: limestone one step darker */
  --radius: 12px;
  --wrap: 1120px;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: Manrope, -apple-system, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--sans); font-variant-numeric: tabular-nums; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--accent-ink); padding: 8px 14px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 12px; }

/* header — brass hairline is decoration; the sticky bar stays limestone at 92% so the blur still reads */
.top { position: sticky; top: 0; z-index: 5; background: rgba(246,243,234,.92); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--brass); }
.row { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 650; font-size: 21px; letter-spacing: -.01em; }
.brand img.logo { height: 30px; width: auto; display: block; }
.foot .brand img.logo { height: 26px; }
/* .mark kept harmless: the branded header/footer use <img class="logo">, but pages that still ship the
   older <svg class="mark"> would lose their sizing if this rule were dropped, so it stays until they swap. */
.mark { width: 28px; height: 28px; color: var(--ink); }
.top nav { display: flex; gap: 22px; margin-left: auto; }
.top nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }
.top nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }

/* buttons — one blue primary, quiet white secondary with the strong control border */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font-weight: 600; font-size: 16px; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(22,61,74,.10); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 8px; }

/* type — Cormorant Garamond Medium for headings, Manrope for the interface */
main { padding: 56px 24px 96px; }
h1 { font: 500 clamp(44px, 6.4vw, 76px)/1.04 var(--serif); letter-spacing: -.02em; margin: 24px 0 20px; max-width: 16ch; }
h1::after { content: ""; display: block; width: 72px; height: 1px; margin-top: 22px; background: var(--brass); }
h2 { font: 500 clamp(28px, 3.4vw, 40px)/1.15 var(--serif); letter-spacing: -.01em; margin: 72px 0 14px; max-width: 26ch; }
h3 { font-size: 20px; margin: 32px 0 8px; }
p, li { max-width: 68ch; color: var(--ink-2); }
strong { color: var(--ink); }
.lede { font-size: clamp(19px, 2vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.note { font-size: 15px; color: var(--ink-3); }
.eyebrow { margin: 80px 0 -6px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--accent-soft); color: var(--ink); padding: 2px 6px; border-radius: 6px; }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }
li::marker { color: var(--accent); }

/* home hero gets room and a quiet doorway backdrop drawn in CSS (no stock photos):
   the limestone-to-transparent arch with a single brass outline — the monogram's A, held at 50% */
.page-home main > h1:first-child { margin-top: 48px; max-width: 14ch; }
.page-home main > .lede { margin-bottom: 0; }
.page-home main::before { content: ""; position: absolute; right: max(24px, calc(50% - 560px)); top: 120px; width: 340px; height: 420px; border-radius: 170px 170px 0 0; background: linear-gradient(180deg, var(--paper), rgba(246,243,234,0)); border: 1px solid var(--brass); opacity: .5; z-index: -1; }
@media (max-width: 900px) { .page-home main::before { display: none; } }

/* lists that follow a bold label read as cards */
main > ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; max-width: none; }
main > ul > li { max-width: none; margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; font-size: 16px; }
main > ul > li strong:first-child { display: block; margin-bottom: 4px; font-size: 17px; }

/* tables */
.table-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line); }
thead th { background: var(--footer); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { color: var(--ink); font-weight: 600; width: 22%; }

/* FAQ */
.qa { border-bottom: 1px solid var(--line); padding: 4px 0; max-width: 820px; }
.qa summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; min-height: 44px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-size: 26px; color: var(--accent); line-height: 1; }
.qa[open] summary::after { content: "–"; }
.qa h2 { font: 600 20px/1.35 var(--sans); margin: 18px 0; max-width: none; color: var(--ink); }
.qa p { margin: 0 0 20px; }

.steps { counter-reset: s; list-style: none; padding: 0; }
.steps li { counter-increment: s; position: relative; padding-left: 48px; margin: 18px 0; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; }

/* footer — brass hairline on top, one step darker than the page */
.foot { border-top: 1px solid var(--brass); background: var(--footer); padding: 48px 0 24px; }
.foot .grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.foot nav { display: flex; flex-direction: column; gap: 8px; }
.foot nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.foot nav a:hover { color: var(--ink); text-decoration: underline; }
.foot p { font-size: 15px; }
.legal { font-size: 13px !important; color: var(--ink-3) !important; margin-top: 32px; }

@media (max-width: 860px) {
  .top nav { display: none; }
  .row { justify-content: space-between; }
  main { padding-top: 32px; }
  .foot .grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
/* mobile menu: a <details>, so it works with no JavaScript */
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 600; font-size: 14px; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: 48px; display: flex; flex-direction: column; min-width: 220px; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 40px rgba(22,61,74,.14); padding: 8px; }
.menu nav a { padding: 12px 14px; color: var(--ink); text-decoration: none; border-radius: 10px; min-height: 44px; }
.menu nav a:hover { background: var(--accent-soft); }
@media (max-width: 860px) { .menu { display: block; } .top .btn.sm { display: none; } }
/* numbered points (pain blocks, switching steps) */
.point { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin: 14px 0; max-width: 820px; }
.point h3 { margin: 0 0 6px; font: 500 22px/1.3 var(--serif); }
.point p { margin: 0; }
/* product screenshots: real app, demo data */
.shot { margin: 28px 0 8px; }
.shot img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(22,61,74,.12); background: #fff; }
.shot figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.shot.phone { max-width: 320px; }
.page-home .shot { margin-top: 40px; }

/* touch targets, SC 2.5.8: 44px minimum. Scoped to coarse pointers so the mouse-driven desktop keeps
   its current header underline position and the footer's 8px link rhythm. */
@media (pointer: coarse) {
  .top nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot nav { gap: 0; }
  .foot nav a { display: flex; align-items: center; min-height: 44px; padding: 10px 0; }
  .btn.sm { min-height: 44px; }
}

/* kit lockup: the BACK OFFICE descriptor must stay readable (founder: 'Keep Back Office ... so users can find it') */
.top .brand img.logo { height: 40px; width: auto; }
.foot .brand img.logo { height: 34px; width: auto; }
@media (max-width: 860px) { .top .brand img.logo { height: 34px; } }