/* tokens.css */
/* tokens.css
   The ONLY file in this project allowed to contain a hex value. The build fails
   if a colour appears anywhere else.

   Every ratio below was measured against WCAG 2.2 AA before the palette was
   chosen, not asserted afterwards. AIOCoordination sits in the System Two
   family: the same warm ground and ink as AIOSeniors, with its own hue so the
   two properties are not mistaken for one another. */

:root {
  /* Colour ------------------------------------------------------------- */
  --ink:         #14313D;  /* headings + body.          12.90:1 on ground */
  --brand:       #1A5F57;  /* follow-through teal.       7.03:1 on ground */
  --brand-lift:  #24796D;  /* hover, active.             4.92:1 on ground */
  --accent:      #D98C3A;  /* CTA FILL ONLY. never type: 2.55:1, fails by design.
                              The ink label sitting on it reads 5.05:1. */
  --accent-lift: #E9A254;  /* CTA hover. LIGHTER, so the ink label gains contrast: 6.35:1 */
  --ground:      #FBF8F3;  /* warm off-white. never pure white, never grey */
  --surface:     #FFFFFF;  /* cards only */
  --line:        #E3DDD3;  /* warm hairline, never cool grey */
  --ok:          #2E6E62;  /* confirmed states only.     5.63:1 on ground */

  --ink-70:      color-mix(in srgb, var(--ink) 70%, var(--ground));
  --ink-55:      color-mix(in srgb, var(--ink) 55%, var(--ground));
  --brand-wash:  color-mix(in srgb, var(--brand) 7%, var(--ground));
  --brand-edge:  color-mix(in srgb, var(--brand) 22%, var(--ground));
  --accent-wash: color-mix(in srgb, var(--accent) 14%, var(--ground));
  --ok-wash:     color-mix(in srgb, var(--ok) 10%, var(--ground));

  /* Type --------------------------------------------------------------- */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Body base is 18px. Some readers are 80. This is a floor, not a default. */
  --t-body:   1.125rem;   /* 18 */
  --t-lead:   1.375rem;   /* 22 */
  --t-small:  1rem;       /* 16 */
  --t-micro:  0.875rem;   /* 14, labels and meta only, never prose */
  --t-h3:     1.5rem;     /* 24 */
  --t-h2:     2rem;       /* 32 */
  --t-h1:     2.75rem;    /* 44 */
  /* Capped so the H1, the button AND the email field all sit above the fold on
     a 13in laptop. A bigger H1 that pushes the conversion off screen is a
     worse hero, and this one was doing exactly that at 3.375rem. */
  --t-hero:   clamp(2rem, 3.3vw, 2.625rem);

  /* Space -------------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Shape -------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --wrap: 1160px;
  --measure: 64ch;

  /* Targets. 48px minimum, 64px for anything primary. */
  --tap: 48px;
  --tap-primary: 64px;

  --shadow-card: 0 1px 2px rgba(20, 49, 61, .05), 0 8px 24px rgba(20, 49, 61, .06);
  --shadow-lift: 0 2px 4px rgba(20, 49, 61, .07), 0 16px 40px rgba(20, 49, 61, .10);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* base.css */
/* base.css — reset, typography, prose, buttons.
   No hex values here. The build fails on one. Use a token. */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); margin-top: var(--s-7); }
h3 { font-size: var(--t-h3); margin-top: var(--s-6); }

p, ul, ol, blockquote, table { margin: 0 0 var(--s-4); }
p { max-width: var(--measure); }

a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--brand-lift); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

b, strong { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }

img, svg { max-width: 100%; height: auto; }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
  top: var(--s-3);
  background: var(--surface);
  color: var(--ink);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  z-index: 100;
}
.skip:focus { left: var(--s-4); }

main { display: block; }
section { padding-block: var(--s-8); }
section + section { padding-top: 0; }

/* ------------------------------------------------------------------ prose */

.prose { max-width: var(--measure); }
.prose.wide { max-width: 78ch; }
.prose > :first-child { margin-top: 0; }

.prose ul, .prose ol { padding-left: 1.35em; }
.prose li { margin-bottom: var(--s-2); max-width: var(--measure); }
.prose li::marker { color: var(--brand); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-70);
}

.eyebrow {
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-3);
}

.pagehead { position: relative; padding-block: var(--s-8) var(--s-6); overflow: hidden; }
.pagehead .lead { max-width: var(--measure); }

/* The page-head mark. Sits in the space to the right of a measure-limited
   column, so it costs no layout and fills what was blank. */
.ph-mark {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 132px;
  height: 132px;
  color: var(--brand);
  opacity: .22;
  pointer-events: none;
}
.ph-mark svg { width: 100%; height: 100%; display: block; stroke-width: 1.1; }
@media (max-width: 900px) { .ph-mark { display: none; } }

.reviewed {
  font-size: var(--t-micro);
  color: var(--ink-55);
  margin-top: var(--s-6);
}

blockquote.pull {
  margin: var(--s-6) 0;
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--brand);
  background: var(--brand-wash);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
blockquote.pull p { margin-bottom: var(--s-2); font-size: var(--t-lead); line-height: 1.45; }
blockquote.pull cite { font-size: var(--t-small); color: var(--ink-55); font-style: normal; }

.callout {
  margin: var(--s-6) 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.callout > :last-child { margin-bottom: 0; }

.callout.tight { padding: var(--s-4) var(--s-5); }

/* A distinction block: "this is / this is not". The boundary between one plan
   and ongoing coordination is the most load-bearing idea on this site, so it
   gets a component rather than a paragraph. */
.isnot {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr 1fr;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: var(--s-6) 0;
}
.isnot > div { background: var(--surface); padding: var(--s-5); }
.isnot h3 { margin: 0 0 var(--s-2); font-size: var(--t-small); font-family: var(--sans);
            text-transform: uppercase; letter-spacing: .08em; color: var(--ink-55); }
.isnot p { margin: 0; }
.isnot .yes h3 { color: var(--ok); }
@media (max-width: 640px) { .isnot { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-3) var(--s-5);
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:focus-visible { outline-offset: 3px; }

.btn-primary {
  background: var(--accent);
  color: var(--ink);
  min-height: var(--tap-primary);
  padding-inline: var(--s-6);
  box-shadow: var(--shadow-card);
}
.btn-primary:hover { background: var(--accent-lift); color: var(--ink); }

.btn-brand {
  background: var(--brand);
  color: var(--surface);
  min-height: var(--tap-primary);
  padding-inline: var(--s-6);
}
.btn-brand:hover { background: var(--brand-lift); color: var(--surface); }

.btn-quiet {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand-edge);
}
.btn-quiet:hover { background: var(--brand-wash); color: var(--brand-lift); }

.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin-top: var(--s-5);
}

.beta {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px var(--s-2);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--ink);
  vertical-align: 2px;
}

/* chrome.css */
/* chrome.css — header, navigation, footer. No hex values. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-in {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--ink);
  font-weight: 650;
  flex: 0 0 auto;
}
.brand-mark { display: inline-flex; width: 34px; height: 34px; color: var(--brand); }
.brand-mark svg { width: 100%; height: 100%; display: block; }
/* "AIO" reads first, then the word. Without a break the eye takes the whole
   string as one long token and neither half lands. Colour does the separating,
   not a space, so the entity name stays exactly "AIOCoordination". */
.brand-name { font-family: var(--display); font-size: 1.3125rem; letter-spacing: -0.02em; color: var(--ink); }
.brand-name b { font-weight: 700; color: var(--brand); }

.sitenav { margin-left: auto; }
.navlist { display: flex; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }

/* ---- mega-menu ----------------------------------------------------------
   Opens on HOVER and on focus-within. A menu that needs a click is a menu
   people assume is broken. The click handler stays for keyboard and touch. */

.nav-item { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-3);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav-item:hover > .nav-link,
.nav-item:focus-within > .nav-link { background: var(--brand-wash); color: var(--brand); }
.nav-caret { width: 11px; height: 8px; opacity: .55; transition: transform .18s var(--ease); }
.nav-item:hover .nav-caret,
.nav-link[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

/* Always drops CENTRED under its trigger, never left-anchored: left:0 is what
   pushed every engine-built menu off centre. padding-top keeps a hover bridge
   between the trigger and the panel so the menu does not close in the gap. */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  z-index: 60;
}
.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu,
.mega-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-menu-inner {
  display: flex;
  gap: var(--s-3);
  min-width: 620px;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 4px 4px var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-lift);
}

.mm-feature {
  flex: 0 0 236px;
  position: relative;
  display: block;
  overflow: hidden;
  padding: var(--s-5);
  background: linear-gradient(160deg, var(--brand-wash), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
}
.mm-feature:hover { border-color: var(--accent); }
/* The drawing sits BOTTOM RIGHT and fills the space the copy leaves, rather
   than spilling out of the top corner where it read as a stray squiggle. */
/* The drawing sits BOTTOM RIGHT, behind the copy, far enough into the corner
   that it cannot sit under the call to action. It read as a stray squiggle in
   the top corner and it collided with a wrapping CTA in the bottom middle. */
.mm-feature .mm-fx {
  position: absolute;
  right: -30px;
  bottom: -26px;
  color: var(--brand);
  opacity: .22;
  pointer-events: none;
  z-index: 0;
}
.mm-flabel {
  position: relative;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
}
.mm-feature h4 {
  position: relative;
  margin: var(--s-2) 0 var(--s-2);
  font-size: 1.125rem;
  color: var(--ink);
}
.mm-feature p {
  position: relative;
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--ink-70);
  max-width: none;
}
.mm-fcta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;   /* a wrapping CTA landed on top of the drawing */
}
.mm-fcta svg { width: 15px; height: 15px; }

.mm-list { flex: 1; min-width: 300px; }

/* Two columns once a menu carries 5+ rows. See navHtml() in build.mjs for why the
   links are re-flowed rather than trimmed. column-count keeps document order
   reading down the first column and then the second, which is the order the rows
   are actually written in. */
.mm-list--cols {
  min-width: 520px;
  column-count: 2;
  column-gap: var(--s-4);
}
.mm-list--cols .mm-row { break-inside: avoid; }

.mm-row {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  /* 12px stays. I tightened this to 8px first, on the theory that the padding was
     what made "The mechanism" 579px tall, and the DENSITY rule immediately caught
     it: "The problem" dropped to 9% air, which is rows crowding each other, and
     the rule warns on too tight for exactly this reason. The height was never the
     padding, it was six rows in one column, and mm-list--cols is what fixed it.
     At 12px these measure 19-26% air, inside the approved fleet's 25-35% band. */
  padding: var(--s-3);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background .15s var(--ease);
}
.mm-row:hover { background: var(--brand-wash); }
.mm-row[aria-current="page"] { background: var(--brand-wash); }
.mm-ico {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--brand-wash);
  color: var(--brand);
}
.mm-ico svg { width: 19px; height: 19px; }
.mm-tt { display: block; font-weight: 650; color: var(--ink); line-height: 1.3; }
.mm-ds { display: block; font-size: var(--t-small); color: var(--ink-55); line-height: 1.35; }

.btn-header { flex: 0 0 auto; min-height: var(--tap); padding-inline: var(--s-5); }

.navtoggle {
  display: none;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
  min-height: var(--tap);
  padding: 0 var(--s-3);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.navtoggle-bars { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.navtoggle-bars i { display: block; height: 2px; background: currentColor; border-radius: 2px; }

@media (max-width: 1040px) {
  .navtoggle { display: inline-flex; }
  .btn-header { display: none; }
  .sitenav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 76vh;
    overflow-y: auto;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
    padding: var(--s-4);
    margin-left: 0;
  }
  .sitenav.open { display: block; }
  .navlist { flex-direction: column; gap: 0; }
  .nav-link { width: 100%; justify-content: space-between; }

  /* Hover is meaningless here, so the panel is driven by the button only. */
  .mega-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding-top: 0;
    display: none;
  }
  .nav-item:hover .mega-menu,
  .nav-item:focus-within .mega-menu { display: none; }
  .mega-menu.open,
  .nav-item:hover .mega-menu.open { display: block; }
  .mega-menu-inner {
    flex-direction: column;
    min-width: 0;
    padding: var(--s-3) 0 var(--s-4);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .mm-list { min-width: 0; }
  .site-header { position: relative; }
}

/* ----------------------------------------------------------------- footer */

.site-footer {
  margin-top: var(--s-9);
  padding-top: var(--s-8);
  background: var(--brand-wash);
  border-top: 1px solid var(--line);
}
.site-footer > .wrap { padding-bottom: var(--s-6); }

/* The trust bar chips are inline-styled for a DARK strip, which is the
   canonical platform look. The strip is dark on purpose, not by accident. */
.digilu-trust-bar { background: var(--ink); }

.foot-top {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 2fr;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--line);
}

.foot-brand .brand-mark { width: 38px; height: 38px; }
.foot-brand .brand-name { font-family: var(--display); font-size: 1.375rem; display: block; margin-top: var(--s-2); }
.foot-promise { color: var(--ink-70); margin: var(--s-3) 0 var(--s-4); max-width: 34ch; }

.foot-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.foot-nav h2 {
  font-family: var(--sans);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-55);
  margin: 0 0 var(--s-3);
}
.foot-nav ul { list-style: none; margin: 0; padding: 0; }
.foot-nav li { margin-bottom: var(--s-2); }
.foot-nav a { color: var(--ink); text-decoration: none; font-weight: 550; }
.foot-nav a:hover { color: var(--brand); text-decoration: underline; }

/* The System Two family strip. Four properties, each with the job it does, so
   a reader can tell which one they actually need. Not a reciprocal link block. */
.foot-family {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.foot-family h2 {
  font-family: var(--sans);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-55);
  margin: 0 0 var(--s-2);
}
.foot-family > p { font-size: var(--t-small); color: var(--ink-70); margin-bottom: var(--s-4); }
.foot-family ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.foot-family li { font-size: var(--t-small); }
.foot-family a { display: block; font-weight: 650; color: var(--ink); text-decoration: none; }
.foot-family a:hover { color: var(--brand); text-decoration: underline; }
.foot-family span { display: block; color: var(--ink-55); }
@media (max-width: 780px) { .foot-family ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .foot-family ul { grid-template-columns: 1fr; } }

.foot-legal { padding-top: var(--s-5); }
.foot-legal p { font-size: var(--t-small); color: var(--ink-70); max-width: 84ch; }
.foot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-5);
  font-size: var(--t-small);
  color: var(--ink-55);
}
.foot-meta a { color: var(--ink-55); }

@media (max-width: 860px) {
  .foot-top { grid-template-columns: 1fr; gap: var(--s-6); }
  .foot-nav { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .foot-nav { grid-template-columns: 1fr; }
}

/* home.css */
/* home.css — hero and the explanatory components.
   This site's job is to explain a mechanism, so the components are diagrams
   rather than decoration. No hex values. */

/* ------------------------------------------------------------------- hero */

.hero {
  padding-block: var(--s-6) var(--s-7);
  background:
    radial-gradient(1100px 420px at 78% -8%, var(--brand-wash), transparent 62%),
    var(--ground);
  border-bottom: 1px solid var(--line);
}
.hero .container {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: var(--s-7);
  align-items: start;   /* never center: it pushes the CTA below the fold */
}
.hero h1 { font-size: var(--t-hero); margin-bottom: var(--s-4); }
.hero .lead { max-width: 46ch; font-size: 1.25rem; }
.hero .eyebrow { margin-bottom: var(--s-2); }

@media (max-width: 980px) {
  .hero .container { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-visual { order: 3; }
}

/* The hero drawing: one week, five people, and every obligation in one column.
   It is the argument of the whole property drawn as an object, which is the
   house rule: a mark whose FUNCTION is the claim. The accent is spent once,
   on the stack that landed on a single person. */
.hero-visual {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-5) var(--s-4);
  box-shadow: var(--shadow-card);
}
.hero-visual h2 {
  font-family: var(--sans);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-55);
  margin: 0 0 var(--s-4);
}
.hero-visual .cap {
  margin: var(--s-4) 0 0;
  font-size: var(--t-small);
  color: var(--ink-70);
  max-width: none;
}
.hero-visual .cap b { color: var(--ink); }

.heroart { display: block; width: 100%; height: auto; }
.heroart .ha-ink {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.heroart .ha-faint { opacity: .32; }
.heroart .ha-acc-g rect {
  fill: var(--accent-wash);
  stroke: var(--accent);
  stroke-width: 1.8;
}
.heroart .ha-txt text {
  font-family: var(--sans);
  fill: var(--ink-55);
}
.heroart .ha-lbl { font-size: 19px; font-weight: 650; }
.heroart .ha-note {
  font-size: 18px;
  font-weight: 650;
  fill: var(--ink);
}

/* --------------------------------------------------------------- taskcard */

.taskcard {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  background: var(--ground);
}
.taskcard:last-child { margin-bottom: 0; }
.taskcard .t-title { font-weight: 650; margin: 0 0 var(--s-1); }
.taskcard .t-do { margin: 0 0 var(--s-3); color: var(--ink-70); font-size: var(--t-small); }
.taskcard .t-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: var(--t-micro);
  color: var(--ink-55);
  margin: 0;
}
.taskcard .t-owner { font-weight: 650; color: var(--ink); }
.taskcard.unowned { border-style: dashed; border-color: var(--brand-edge); }
.taskcard.unowned .t-owner { color: var(--ink-55); font-weight: 550; font-style: italic; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--t-micro);
  font-weight: 650;
  padding: 2px var(--s-3);
  border-radius: 999px;
  background: var(--brand-wash);
  color: var(--brand);
  border: 1px solid var(--brand-edge);
}
.pill.done { background: var(--ok-wash); color: var(--ok); border-color: var(--ok); }
.pill.wait { background: var(--accent-wash); color: var(--ink); border-color: var(--accent); }

/* ------------------------------------------------------------------ steps */

.steps { list-style: none; margin: var(--s-6) 0; padding: 0; counter-reset: step; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--s-6) var(--s-8);
  max-width: 72ch;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand);
  color: var(--surface);
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 650;
}
/* The connecting line, so the sequence reads as a sequence. */
.steps > li::after {
  content: '';
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: var(--s-3);
  width: 2px;
  background: var(--brand-edge);
}
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps h3 { margin: var(--s-1) 0 var(--s-2); font-size: var(--t-h3); }
.steps p { margin-bottom: var(--s-3); }
.steps > li > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- grid */

.grid { display: grid; gap: var(--s-5); margin: var(--s-6) 0; }
.grid.g2 { grid-template-columns: repeat(2, 1fr); }
.grid.g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid.g3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid.g2, .grid.g3 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.card h3 { margin-top: 0; font-size: var(--t-h3); }
.card > :last-child { margin-bottom: 0; }
.card p { max-width: none; }

a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
a.card h3 { color: var(--brand); }
.card .more { font-weight: 650; color: var(--brand); font-size: var(--t-small); }

/* display:flex is load-bearing. `.icon` is a span, and width/height do nothing
   on an inline box, so a 24px viewBox SVG expanded to fill the card. */
.card .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--s-4);
  border-radius: var(--r-sm);
  background: var(--brand-wash);
  color: var(--brand);
}
.card .icon svg { width: 25px; height: 25px; display: block; }

/* --------------------------------------------------------------- scenario */

/* The Tuesday scenario. A concrete family, a concrete week. Every abstract
   claim on this site is paired with one of these. */
.scenario {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
  margin: var(--s-6) 0;
  box-shadow: var(--shadow-card);
}
.scenario h3 {
  margin-top: 0;
  font-family: var(--sans);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-55);
}
.scenario > :last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- questions */

/* The four questions the coordination logic asks once something is scheduled. */
.qlist { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; gap: var(--s-3); }
.qlist li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--s-3);
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  max-width: none;
}
.qlist .q {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--brand-wash);
  color: var(--brand);
  font-weight: 700;
  font-size: var(--t-micro);
}
.qlist b { display: block; margin-bottom: 2px; }
.qlist p { margin: 0; color: var(--ink-70); font-size: var(--t-small); max-width: none; }

/* ------------------------------------------------------------- statetable */

.states { list-style: none; margin: var(--s-6) 0; padding: 0; display: grid; gap: var(--s-3); }
.states li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  max-width: none;
}
.states code {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--brand);
  background: var(--brand-wash);
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
}
.states .lab { font-weight: 650; display: block; margin-top: var(--s-2); }
.states p { margin: 0; color: var(--ink-70); max-width: none; }
@media (max-width: 700px) { .states li { grid-template-columns: 1fr; gap: var(--s-2); } }

/* ------------------------------------------------------------ definitions */

.defs { margin: var(--s-6) 0; }
.defs > div {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
  max-width: 78ch;
}
.defs > div:last-child { border-bottom: 1px solid var(--line); }
.defs dt {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.defs dd { margin: 0 0 var(--s-3); }
.defs dd:last-child { margin-bottom: 0; }
.defs .whose {
  font-size: var(--t-micro);
  color: var(--ink-55);
}

/* --------------------------------------------------------------- FO band */

/* The one conversion on this site. It appears on every page, and it is the
   only place that asks for anything. */
.fo-band {
  background: var(--surface);
  border: 1px solid var(--brand-edge);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  margin-block: var(--s-8) 0;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-7);
  align-items: center;
}
.fo-band .eyebrow { margin-bottom: var(--s-2); }
.fo-band h2 { margin: 0 0 var(--s-3); font-size: var(--t-h2); }
.fo-band p { margin-bottom: 0; color: var(--ink-70); max-width: 58ch; }
.fo-band .btnrow { margin-top: var(--s-5); }
.fo-band .fo-mark { width: 96px; height: 96px; color: var(--brand); opacity: .9; }
.fo-band .fo-mark svg { width: 100%; height: 100%; display: block; }
@media (max-width: 780px) {
  .fo-band { grid-template-columns: 1fr; padding: var(--s-6); gap: var(--s-5); }
  .fo-band .fo-mark { display: none; }
}

.cta-band {
  background: var(--brand-wash);
  border: 1px solid var(--brand-edge);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  text-align: center;
  margin-top: var(--s-8);
}
.cta-band h2 { margin-top: 0; }
.cta-band p { margin-inline: auto; }
.cta-band .btnrow { justify-content: center; }

/* -------------------------------------------------------------- sequence */

/* Three at a time, and the count of what is deliberately hidden. */
.seq { margin: var(--s-6) 0; }
.seq-shown { display: grid; gap: var(--s-3); }
.seq-hidden {
  margin-top: var(--s-3);
  padding: var(--s-4);
  border: 1px dashed var(--brand-edge);
  border-radius: var(--r-md);
  text-align: center;
  color: var(--ink-55);
  font-size: var(--t-small);
}

/* ------------------------------------------------------------------ misc */

.tag-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0; }

.src {
  font-size: var(--t-micro);
  color: var(--ink-55);
  margin-top: var(--s-5);
}
.src a { color: var(--ink-55); }

details.faq {
  border-bottom: 1px solid var(--line);
  padding: var(--s-4) 0;
  max-width: 78ch;
}
details.faq summary {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: '+';
  font-family: var(--sans);
  font-size: 1.5rem;
  color: var(--brand);
  flex: 0 0 auto;
}
details.faq[open] summary::after { content: '\2212'; }
details.faq > :not(summary) { margin-top: var(--s-3); }

/* forms.css */
/* forms.css — the follow-up email form. No hex values.
   One form on this site. It collects an email address and nothing else. */

.signup {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-card);
  max-width: 68ch;
}
.signup h2 { margin-top: 0; }
.signup .lead { font-size: var(--t-body); }

.field { margin-bottom: var(--s-4); }
.field label {
  display: block;
  font-weight: 650;
  margin-bottom: var(--s-2);
}
.field .hint {
  display: block;
  font-weight: 400;
  font-size: var(--t-small);
  color: var(--ink-55);
  margin-top: 2px;
}

.field input[type="email"],
.field input[type="text"] {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  font: inherit;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.field input:focus {
  border-color: var(--brand);
  background: var(--surface);
}
.field input[aria-invalid="true"] { border-color: var(--accent); }

.consent {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--s-3);
  align-items: start;
  margin-bottom: var(--s-5);
  max-width: none;
}
.consent input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--brand);
}
.consent label { font-size: var(--t-small); color: var(--ink-70); font-weight: 400; }

/* Honeypot. Off-screen rather than display:none, because some autofillers skip
   hidden fields entirely and a field nothing can ever fill catches nothing. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.err {
  color: var(--ink);
  background: var(--accent-wash);
  border-left: 3px solid var(--accent);
  padding: var(--s-3) var(--s-4);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-small);
  margin: var(--s-3) 0;
}

.ok {
  color: var(--ink);
  background: var(--ok-wash);
  border-left: 3px solid var(--ok);
  padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.ok > :last-child { margin-bottom: 0; }

.signup [hidden] { display: none; }
.herosignup[hidden], .ok[hidden] { display: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- the hero conversion block -------------------------------------------
   One decision above the fold: press the button, or leave an address. Both
   paths are complete without scrolling, which is the whole point of putting a
   form in a hero. */

.herocta { margin-top: var(--s-6); max-width: 30rem; }
.herocta .btn-brand { width: 100%; }
.herocta .or {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-4);
  font-size: var(--t-small);
  color: var(--ink-55);
  max-width: none;
}
.herocta .or::before,
.herocta .or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.herosignup { margin: 0; }
.hs-row { display: flex; gap: var(--s-2); }
.hs-row input[type="email"] {
  flex: 1;
  min-width: 0;
  min-height: var(--tap-primary);
  padding: var(--s-3) var(--s-4);
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.hs-row input[type="email"]:focus { border-color: var(--brand); }
.hs-row input[aria-invalid="true"] { border-color: var(--accent); }
.hs-row .btn { flex: 0 0 auto; white-space: nowrap; }

.hs-consent {
  margin: var(--s-3) 0 0;
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--ink-55);
  max-width: none;
}
.hs-consent a { color: var(--ink-55); }

@media (max-width: 560px) {
  .hs-row { flex-direction: column; }
  .hs-row .btn { width: 100%; }
}