/* 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: 88px; }
.hero-lockup { width: min(430px, 82%); height: auto; display: block; color: var(--tutti); }
.ringdraw { stroke-dasharray: 222.6; stroke-dashoffset: 0; }
.fadein { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ringdraw { animation: draw 420ms cubic-bezier(.4,0,.2,1) both; }
  .fadein { animation: appear 260ms ease-out 300ms both; }
  @keyframes draw { from { stroke-dashoffset: 222.6; } 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; }

.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; }