/* AtChoir — Tutti Grotesk (spec: atchoir-app/design/identity/final/BRAND.md) */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600;
  src: url('/fonts/archivo-600.woff2') format('woff2'); font-display: swap; }

:root {
  --paper: #F7F8F5; --card: #FFFFFF; --ink: #16211B; --slate: #5C6B63;
  --hairline: #DDE2DC; --tutti: #14503C; --signal: #1F8A5C; --signal-text: #167A4B;
  --alert: #B4452C;
  --i-paper: #101613; --i-ink: #E9EDEA; --i-tutti: #E9EDEA;
}
@media (prefers-color-scheme: dark) { :root {
  --paper: #101613; --card: #1A211D; --ink: #E9EDEA; --slate: #8FA097;
  --hairline: #273129; --tutti: #4FB68C; --signal: #4FB68C; --signal-text: #4FB68C;
  --alert: #E0785C;
  --i-paper: #F7F8F5; --i-ink: #16211B; --i-tutti: #14503C;
} }
* { box-sizing: border-box; margin: 0; }
body { background: var(--paper); color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
main, footer { max-width: 640px; margin: 0 auto; padding: 0 24px; }
section { padding: 44px 0 0; }
.eyebrow { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--slate); font-weight: 600; margin-bottom: 6px; }

/* hero — the one orchestrated moment: the ring draws once, then stillness */
.hero { padding-top: 60px; }
.hero-lockup { width: min(430px, 82%); height: auto; display: block; color: var(--tutti); }
.ringdraw { stroke-dasharray: 185.1; stroke-dashoffset: 0; }
.fadein { opacity: 1; }
/* ⚠️ The hero ANIMATES a stroked arc, but a stroked path's butt caps cut RADIALLY at both
   ends — while the canonical mark's lower terminal is a VERTICAL cut at x=80, aligned to
   the stem's right edge. So the drawn ring is subtly the wrong shape at rest.
   Fix: paint the real filled ring on top once the draw finishes. The filled path has
   strictly MORE material at that terminal (63deg outer -> 54deg inner), so it fully covers
   the stroked one — no crossfade artefact, and the resting state is the canonical mark. */
.ringfinal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ringdraw { animation: draw 420ms cubic-bezier(.4,0,.2,1) both; }
  .ringfinal { opacity: 0; animation: appear 1ms linear 420ms both; }
  .fadein { animation: appear 260ms ease-out 300ms both; }
  @keyframes draw { from { stroke-dashoffset: 185.1; } to { stroke-dashoffset: 0; } }
  @keyframes appear { from { opacity: 0; } to { opacity: 1; } }
}
h1 { font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(30px, 5.5vw, 42px); font-weight: 600; letter-spacing: -.015em;
  line-height: 1.12; text-wrap: balance; margin-top: 56px; }
.lede { color: var(--slate); margin-top: 14px; max-width: 46ch; }

.features { list-style: none; padding: 0; display: flex; flex-direction: column; }
.features li { display: flex; gap: 16px; align-items: baseline; padding: 18px 0;
  border-top: 1px solid var(--hairline); }
.features li:last-child { border-bottom: 1px solid var(--hairline); }
.fx { width: 18px; height: 18px; flex: none; color: var(--signal); align-self: center; }
.fxq { color: var(--slate); }
.features h3 { font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px; font-weight: 600; }
.quiet { margin-top: 18px; }
.features h2, .ex-h { font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px; font-weight: 600; }
.features p { color: var(--slate); font-size: 15px; }

/* the system, explained */
.explain { display: flex; gap: 40px; align-items: center; padding-top: 64px; }
.ex-text { flex: 1; min-width: 0; }
.ex-h { font-size: 22px; letter-spacing: -.01em; }
.ex-text > p:not(.eyebrow) { color: var(--slate); margin-top: 10px; max-width: 44ch; }
.construct { width: 200px; flex: none; color: var(--slate); }
.construct .ink { fill: var(--tutti); }
.states { flex: none; display: grid; grid-template-columns: repeat(5, auto); gap: 18px; }
.st { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stateg { width: 34px; height: 34px; display: block; }
.st figcaption { font-size: 10.5px; color: var(--slate); letter-spacing: .04em; }
@media (max-width: 620px) {
  .explain { flex-direction: column; align-items: flex-start; gap: 26px; }
  .construct { align-self: center; }
  .states { align-self: center; gap: 12px; }
}

/* inverse band — always the opposite stage */
.band { background: var(--i-paper); color: var(--i-ink); border-radius: 14px;
  margin-top: 72px; padding: 44px 40px; display: flex; flex-direction: column; gap: 18px; }
.band-lockup { width: min(300px, 80%); height: auto; display: block; color: var(--i-tutti); }
.band p { font-size: 14px; opacity: .8; max-width: 44ch; }
/* secondary line under the lede — present but clearly subordinate */
.also { display: inline-block; margin-top: 6px; font-size: .88em; color: var(--slate); }

.close { padding-top: 64px; padding-bottom: 64px; }
.how { max-width: 52ch; }
.soon { margin-top: 10px; color: var(--signal-text); font-weight: 600; }

footer { padding-top: 24px; padding-bottom: 40px; border-top: 1px solid var(--hairline);
  color: var(--slate); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
footer a { color: var(--signal-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
footer a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ── site chrome: present on every page ─────────────────────────────────── */
/* Skip link. Kept out of the layout until focused — with a nav of five links
   above the content, a keyboard user should not have to tab through it twice. */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 20; background: var(--tutti);
  color: var(--i-paper); padding: 10px 16px; border-radius: 8px;
  text-decoration: none; font-weight: 600; }

.topbar { max-width: 640px; margin: 0 auto; padding: 20px 24px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap; }
.brandlink { display: inline-flex; align-items: center; gap: 9px;
  color: var(--tutti); text-decoration: none; font-weight: 600; font-size: 17px;
  letter-spacing: -.012em;
  font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.navmark { width: 21px; height: 21px; flex: none; }
.topbar nav ul { list-style: none; padding: 0; margin: 0;
  display: flex; gap: 4px 18px; flex-wrap: wrap; }
.topbar nav a { color: var(--slate); text-decoration: none; font-size: 14.5px;
  padding: 4px 0; display: inline-block; }
.topbar nav a:hover { color: var(--ink); }
/* The current page is marked by weight and colour together, never colour alone. */
.topbar nav a[aria-current] { color: var(--signal-text); font-weight: 600; }
a:focus-visible, .brandlink:focus-visible { outline: 2px solid var(--signal);
  outline-offset: 3px; border-radius: 3px; }

/* ── prose pages ────────────────────────────────────────────────────────── */
.prose h1 { margin-top: 44px; }
.prose > .lede { font-size: 18.5px; max-width: 54ch; }
.updated { margin-top: 12px; font-size: 13px; color: var(--slate); }
.prose section { padding-top: 36px; }
.prose h2 { font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
  text-wrap: balance; }
.prose section p { margin-top: 12px; max-width: 68ch; }
.prose a { color: var(--signal-text); text-decoration-thickness: 1px;
  text-underline-offset: 2px; }

/* Bulleted lists carry a dot rather than a tick: a tick reads as a claim
   ("we do this well"), and most of these lists are statements of fact. */
ul.plain { list-style: none; padding: 0; margin-top: 16px;
  display: flex; flex-direction: column; gap: 11px; max-width: 68ch; }
ul.plain li { position: relative; padding-left: 22px; color: var(--slate); }
ul.plain li::before { content: ''; position: absolute; left: 3px; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }

/* Contents list. The only navigation a long legal page can have with no
   JavaScript, so it is a real element rather than a nicety. */
.toc { margin-top: 34px; padding: 20px 24px 22px; background: var(--card);
  border: 1px solid var(--hairline); border-radius: 12px; }
.toc h2 { font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--slate); font-weight: 600; }
.toc ol { margin: 12px 0 0; padding: 0; list-style: none;
  columns: 2; column-gap: 28px; }
.toc li { margin-bottom: 7px; break-inside: avoid; }
.toc a { color: var(--ink); text-decoration: none; font-size: 14.5px;
  /* WCAG 2.5.8 wants a 24px minimum target. A 14.5px line box is 17px tall, so
     the padding is not decoration — it is what makes these tappable on a phone. */
  display: inline-block; padding: 4px 0; }
.toc a:hover { color: var(--signal-text); text-decoration: underline; }
@media (max-width: 560px) { .toc ol { columns: 1; } }
/* Anchor targets clear the top of the viewport rather than sitting flush. */
.prose section { scroll-margin-top: 20px; }

/* Closing call to action. Every one is a mailto: — there are no forms here. */
.cta { margin-top: 52px; padding: 26px 26px 28px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--hairline); }
.cta h2 { font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px; font-weight: 600; }
.cta p { margin-top: 8px; color: var(--slate); max-width: 52ch; }
.ctamail { margin-top: 14px; }
.ctamail a { display: inline-block; background: var(--tutti); color: var(--i-paper);
  padding: 11px 20px; border-radius: 9px; text-decoration: none; font-weight: 600;
  font-size: 15px; }
.ctamail a:hover { opacity: .9; }

/* ── footer ─────────────────────────────────────────────────────────────── */
footer { margin-top: 64px; }
.footinner { display: flex; flex-direction: column; gap: 10px; }
.legalnav { padding-top: 4px; }
.legalnav a, footer a { display: inline-block; padding: 3px 0; }
.legalnav a[aria-current] { font-weight: 600; }

/* A decision nobody has taken yet. Deliberately loud: this must never read as
   finished copy, and it must never reach production unnoticed. */
.pending { color: var(--alert); font-style: italic; }
li.pending::before { background: var(--alert); border-radius: 1px; }
/* A run of pending paragraphs is one unresolved decision each — bracket the whole
   block so it reads as a gap in the page, not as unusually worded copy. */
p.pending { position: relative; padding-left: 16px; border-left: 2px solid var(--alert); }
p.pending::after { content: ' — to be decided'; font-style: normal; font-size: 12.5px;
  letter-spacing: .04em; text-transform: uppercase; opacity: .75; }

/* home page: the routes out of the landing page */
.nextlinks { margin-top: 22px; font-size: 15px; color: var(--slate); }
.nextlinks a { color: var(--signal-text); text-decoration-thickness: 1px;
  text-underline-offset: 2px; display: inline-block; padding: 4px 0; }
.how a { color: var(--signal-text); }