@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/newsreader-400.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   ProjectComplete — marketing site
   Design system adapted from DESIGN-2.md (Monad editorial/parchment) with
   ProjectComplete's brand colors substituted for the reference accent.

   Structural rules kept verbatim from the reference:
     - Parchment canvas, never pure white
     - Serif headlines locked at weight 400, never bold
     - Mono for ALL functional text: nav, buttons, body, badges, tables
     - 1px hairline borders and pill containers instead of shadows
     - One saturated fill per screen = the single primary action
   Substitutions:
     - Lake Blue #2b59d1  ->  Forest #14342b   (primary action)
     - Periwinkle Mist    ->  Sage Mist        (elevated card surface)
     - Coral/Sky/Mint     ->  Gold/Sage/Clay   (decorative washes only)
   ========================================================================== */

:root {
  /* --- Surfaces & neutrals (from reference) --- */
  --parchment: #f6f3f1;
  --off-black: #242424;
  --ink: #000000;
  --graphite: #4e4d4d;
  /* Darkened from #797776 (July 30, 2026): at 4.03:1 on parchment it failed WCAG
     1.4.3, and it is the muted text colour used for captions and small print
     everywhere. --smoke #656362 is 5.41:1 on --parchment and --smoke #656362 is 4.63:1 on
     --sage-mist — the two surfaces it actually sits on — against the 4.5 that
     1.4.3 requires, and it keeps the warm-neutral R>G>B cast. */
  --smoke: #656362;
  --ash: #cecac8;
  /* Same reasoning as --smoke, applied to a border rather than to text. --ash #cecac8
     is 1.47:1 on --parchment, which is correct for a decorative hairline and
     wrong for a line that is the only thing identifying a form field (WCAG
     1.4.11 wants 3:1 for non-text content needed to identify a UI component).
     --line-strong #8a8784 is 3.23:1 on --parchment. Inputs only — card, table and rule
     hairlines identify nothing and stay --ash deliberately. All inputs on this
     site are on parchment (join.html); NOT rated for sage-mist, where
     --line-strong #8a8784 is 2.77:1 on --sage-mist. */
  --line-strong: #8a8784;

  /* --- ProjectComplete brand --- */
  --forest: #14342b;        /* the ONE saturated fill: primary actions */
  --forest-deep: #0d2420;   /* hover only */
  --sage-mist: #dbe5de;     /* elevated card surface (was Periwinkle Mist) */
  --sage: #a7c4b5;          /* decorative gradient stop */
  --gold: #c8a44d;          /* decorative accent + gradient stop */
  --gold-pale: #ecda98;
  --clay: #d9a68c;          /* decorative gradient stop */
  /* The readable member of the clay family, for the one place clay carries a
     meaning: the x that marks a limit. --clay #d9a68c is 1.94:1 on --parchment against
     the forest check's 12.22, so on the claim/limit columns the affirmative
     marker was six times more visible than the limiting one. --clay-ink #a35c34 is 4.59:1
     on --parchment. Both render sites (pricing.html:117, homeowners.html:150)
     are on parchment; NOT rated elsewhere — --clay-ink #a35c34 is 3.93:1 on --sage-mist
     and --clay-ink #a35c34 is 3.06:1 on --off-black. */
  --clay-ink: #a35c34;

  /* --- Type --- */
  --serif: 'Newsreader', ui-serif, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-label: 18px;
  --text-body-lg: 20px;
  --text-subheading: 24px;
  --text-heading-sm: 32px;
  --text-heading: 40px;
  --text-heading-lg: 48px;
  --text-display: 80px;

  /* --- Space & shape --- */
  --wrap: 1432px;
  --section-gap: 64px;
  --card-pad: 40px;
  --r-card: 40px;
  --r-pill: 9999px;
  --r-btn: 100px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--parchment);
  color: var(--off-black);
  font-family: var(--mono);
  font-size: var(--text-body);
  line-height: 1.35;
  letter-spacing: -0.025em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

/* Focus, owned by the system rather than by the browser.
   Before this rule the only focus styles in the stylesheet were input:focus and
   .skip:focus, so focus on buttons, nav links, .fork and <summary> fell to the UA
   default — which is drawn, but varies by browser and is off-brand everywhere.
   On the dark and forest fills it is also the one place the palette has no say,
   so those get the inverse ring. The accessibility page asserts focus is always
   visible; this is the rule that makes that our claim rather than Chrome's.
   No border-radius here: modern outlines already follow the element's own radius,
   and setting it would reshape the focused element. */
:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

/* Only where the SURROUNDING surface is dark, never where the element is.
   `outline-offset` is positive, so the ring is drawn outside the border box —
   on whatever the element sits on, not on its own fill. `.announce` and
   `.card-dark` are containers, so their descendants' rings land on the dark
   surface and need the inverse colour. `.pill-primary` and `.pill-dark` are
   the opposite case: the element is dark and it sits on parchment, so a
   parchment ring lands parchment-on-parchment at 1.00:1. They deliberately
   fall through to the forest ring above, which is 12.22:1 on the page and is
   separated from the forest fill by the 2px offset gap.
   Measured by Quill over a keyboard walk of 13 routes: this rule with the two
   pill selectors in it produced 24 invisible rings and was WORSE than the
   browser default it replaced (1.00:1 against the UA ring's 5.42:1). */
.announce :focus-visible,
.card-dark :focus-visible { outline-color: var(--parchment); }

/* --------------------------------------------------------------------------
   Headings — serif, always weight 400. -0.02em does the work, not weight.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--off-black);
  /* Even out the rag so a two-sentence headline breaks between its sentences
     rather than stranding the last word on a line of its own. */
  text-wrap: balance;
}

.display  { font-size: clamp(38px, 7.4vw, var(--text-display)); }
.h-lg     { font-size: clamp(30px, 5vw, var(--text-heading-lg)); }
.h-md     { font-size: clamp(27px, 4vw, var(--text-heading)); }
.h-sm     { font-size: clamp(24px, 3.2vw, var(--text-heading-sm)); }
.h-xs     { font-size: var(--text-subheading); }

p { margin: 0; }

.lede {
  font-size: clamp(17px, 2vw, var(--text-body-lg));
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--graphite);
}

.body   { color: var(--graphite); }
.muted  { color: var(--smoke); }

.small {
  font-size: var(--text-body-sm);
  letter-spacing: -0.02em;
  color: var(--graphite);
}

.caption {
  font-size: var(--text-caption);
  letter-spacing: -0.033em;
  text-transform: uppercase;
  color: var(--smoke);
  line-height: 1.2;
}

.eyebrow {
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--smoke);
  display: block;
  margin-bottom: 16px;
}

strong, b { font-weight: 500; }

a { color: inherit; }
a:not(.pill-primary):not(.pill-dark):not(.pill-ghost):not(.nav-link):not(.arrow-link):not(.fork):not(.brand):not(.announce-pill):not(.foot-col a):not(.nav-panel a):not(.skip) {
  text-decoration: underline;
  text-decoration-color: var(--ash);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--forest); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 900px) { .wrap { padding: 0 40px; } }

section { padding: var(--section-gap) 0; }

@media (min-width: 900px) { section { padding: 80px 0; } }

.rule { border: 0; border-top: 1px solid var(--ash); margin: 0; }

.stack-8  > * + * { margin-top: 8px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }
.stack-40 > * + * { margin-top: 40px; }

.measure    { max-width: 68ch; }
.measure-sm { max-width: 52ch; }

/* Every track is minmax(0, …) rather than 1fr. A bare 1fr floors at the
   column's min-content width, so one wide child — a table with a min-width,
   a long unbroken string — silently widens the whole page instead of
   scrolling inside its own container. */

.grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px)  { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px)  { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px)  { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.split { display: grid; gap: 40px; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
  .split-sticky { grid-template-columns: 380px minmax(0, 1fr); gap: 80px; }
  .split-sticky > :first-child { position: sticky; top: 96px; }
}

/* --------------------------------------------------------------------------
   Announcement bar — Ink, ~40px, mono 14px
   -------------------------------------------------------------------------- */

.announce {
  background: var(--ink);
  color: var(--parchment);
  font-size: var(--text-body-sm);
  letter-spacing: -0.02em;
}

.announce-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 11px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.announce span { flex: 1 1 auto; }

.announce-pill {
  border: 1px solid rgba(246, 243, 241, 0.5);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.announce-pill:hover { background: rgba(246, 243, 241, 0.14); }

.announce-x {
  background: none;
  border: 0;
  color: var(--parchment);
  font-family: var(--mono);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  /* WCAG 2.2 SC 2.5.8 wants 24x24. Height was already 25 (17px glyph + 4px top
     and bottom); width was the failing axis at roughly 14. min-width states the
     requirement without depending on the mono advance, and the bar's height is
     unchanged because .announce-in is align-items:center and the pill beside this
     is ~24 tall. */
  padding: 4px 8px;
  min-width: 24px;
  opacity: 0.7;
}
.announce-x:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Navigation — ~80px, no border
   -------------------------------------------------------------------------- */

.nav-outer { position: sticky; top: 0; z-index: 40; background: var(--parchment); }

.nav {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

@media (min-width: 900px) { .nav { padding: 22px 40px; } }

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex: 0 0 auto;
}

.brand-name {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--off-black);
  white-space: nowrap;
}
.brand-name em { font-style: normal; color: var(--graphite); }

.nav-links { display: none; gap: 26px; flex: 1 1 auto; }

@media (min-width: 1100px) { .nav-links { display: flex; } }

.nav-link {
  font-size: var(--text-body-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--off-black);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav-link:hover { border-bottom-color: var(--forest); }
.nav-link[aria-current='page'] { border-bottom-color: var(--off-black); }

.nav-actions { display: none; gap: 12px; margin-left: auto; flex: 0 0 auto; }
@media (min-width: 700px) { .nav-actions { display: flex; } }

.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--off-black);
  border-radius: var(--r-btn);
  padding: 9px 18px;
  font-family: var(--mono);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--off-black);
}
@media (min-width: 1100px) { .nav-toggle { display: none; } }

.nav-panel {
  display: none;
  border-top: 1px solid var(--ash);
  background: var(--parchment);
  padding: 24px;
}
.nav-panel[data-open='true'] { display: block; }
@media (min-width: 1100px) { .nav-panel[data-open='true'] { display: none; } }

.nav-panel a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--ash);
  text-decoration: none;
  font-size: var(--text-label);
  letter-spacing: -0.022em;
  text-transform: uppercase;
}
.nav-panel a:last-of-type { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Buttons — 100px radius, mono 14px uppercase, 16px 32px
   -------------------------------------------------------------------------- */

.pill-primary, .pill-dark, .pill-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--text-body-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r-btn);
  padding: 15px 30px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1.1;
  text-align: center;
}

.pill-primary { background: var(--forest); color: #f6f3f1; }
.pill-primary:hover { background: var(--forest-deep); }

.pill-dark { background: var(--off-black); color: #f6f3f1; }
.pill-dark:hover { background: var(--ink); }

.pill-ghost { background: transparent; color: var(--off-black); border-color: var(--off-black); }
.pill-ghost:hover { background: rgba(36, 36, 36, 0.06); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-body-sm);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--off-black);
  border-bottom: 1px solid var(--ash);
  padding-bottom: 3px;
}
.arrow-link:hover { border-bottom-color: var(--forest); }
.arrow-link::after { content: '\2192'; }

/* --------------------------------------------------------------------------
   Tags / pills
   -------------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--parchment);
  border: 1px solid var(--ash);
  border-radius: var(--r-pill);
  padding: 8px 17px;
  font-size: var(--text-body-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--off-black);
  white-space: nowrap;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-fill { background: var(--sage-mist); border-color: transparent; }
.tag-gold { border-color: var(--gold); }

/* --------------------------------------------------------------------------
   Cards — 1px ash, 40px radius, 40px padding, no shadow
   -------------------------------------------------------------------------- */

.card {
  border: 1px solid var(--ash);
  border-radius: var(--r-card);
  padding: 28px;
  background: transparent;
}
@media (min-width: 700px) { .card { padding: var(--card-pad); } }

.card-mist { background: var(--sage-mist); border-color: transparent; }
.card-dark { background: var(--off-black); border-color: transparent; color: var(--parchment); }
.card-dark h2, .card-dark h3 { color: var(--parchment); }
.card-dark .body, .card-dark .small { color: #cfcccb; }

.card-num {
  font-family: var(--mono);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  color: var(--smoke);
  display: block;
  margin-bottom: 20px;
}

.icon {
  width: 34px;
  height: 34px;
  display: block;
  margin-bottom: 22px;
  color: var(--forest);
}

.fork {
  display: block;
  text-decoration: none;
  border: 1px solid var(--ash);
  border-radius: var(--r-card);
  padding: 28px;
  transition: border-color 0.15s, background 0.15s;
}
@media (min-width: 700px) { .fork { padding: var(--card-pad); } }
.fork:hover { border-color: var(--forest); background: rgba(20, 52, 43, 0.03); }

/* Stat block */
.stat-num {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Decorative gradient washes — always heavily blurred, never sharp
   -------------------------------------------------------------------------- */

.wash-host { position: relative; overflow: hidden; }
.wash-host > .wrap, .wash-host > * { position: relative; z-index: 1; }

.wash {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.5;
  pointer-events: none;
}
/* On narrow screens a wash sits directly behind body copy, so pull it back.
   !important is deliberate: per-wash positions and opacities are set inline
   on the elements, and those would otherwise win over this query. */
@media (max-width: 760px) {
  .wash { opacity: 0.3 !important; filter: blur(58px); }
}

.wash-a { width: 460px; height: 340px; background: linear-gradient(120deg, var(--gold), var(--sage)); }
.wash-b { width: 400px; height: 320px; background: linear-gradient(120deg, var(--sage), var(--clay)); }
.wash-c { width: 360px; height: 300px; background: linear-gradient(120deg, var(--clay), var(--gold-pale)); }

/* --------------------------------------------------------------------------
   Money-flow diagram (site signature imagery)
   -------------------------------------------------------------------------- */

/* Desktop: 5-column grid — sources | hairlines | balance hub | hairlines | destinations.
   The connector SVGs stretch with preserveAspectRatio="none"; vector-effect keeps
   the hairline at exactly 1px however far they're stretched. */

.flow { display: none; }

@media (min-width: 900px) {
  .flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.14fr) 72px minmax(0, 1fr);
    align-items: center;
  }
}

.flow-col { display: grid; gap: 18px; align-content: center; }

.flow-node {
  border: 1px solid var(--ash);
  border-radius: var(--r-pill);
  padding: 15px 26px;
}
.flow-node b {
  display: block;
  font-weight: 500;
  font-size: var(--text-body-sm);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.flow-node span {
  display: block;
  margin-top: 4px;
  font-size: var(--text-caption);
  letter-spacing: -0.02em;
  color: var(--smoke);
  line-height: 1.35;
}

/* Absolutely positioned so the SVG's intrinsic 68:300 ratio can't drive the
   row height — the hairlines follow the node column instead of setting it. */
.flow-link { position: relative; align-self: stretch; }
.flow-link svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.flow-core { position: relative; display: grid; gap: 16px; justify-items: center; align-content: center; }

/* The soft green glow at the hub — the reference's normalisation halo. */
.flow-glow {
  position: absolute;
  inset: -34px -18px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 196, 181, 0.85) 0%, rgba(167, 196, 181, 0) 68%);
  filter: blur(26px);
  pointer-events: none;
}

.flow-hub {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  background: var(--sage-mist);
  border-radius: var(--r-card);
  padding: 30px 32px;
}
.flow-hub .caption { color: var(--graphite); }
.flow-hub-num {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 10px 0 10px;
}
.flow-hub .small { color: var(--graphite); display: block; }

.flow-gate {
  position: relative;
  z-index: 1;
  background: var(--forest);
  color: #f6f3f1;
  border-radius: var(--r-pill);
  padding: 11px 24px;
  font-size: var(--text-body-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Small screens: the same diagram, stacked vertically. */
.flow-stack { display: grid; gap: 10px; }
@media (min-width: 900px) { .flow-stack { display: none; } }

.flow-step {
  border: 1px solid var(--ash);
  border-radius: 22px;
  padding: 15px 22px;
}
.flow-step b {
  display: block;
  font-weight: 500;
  font-size: var(--text-body-sm);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.flow-step span {
  display: block;
  margin-top: 5px;
  font-size: var(--text-caption);
  letter-spacing: -0.02em;
  color: var(--smoke);
  line-height: 1.4;
}
.flow-step-hub { background: var(--sage-mist); border-color: transparent; }
.flow-arrow { text-align: center; color: var(--smoke); font-size: 15px; line-height: 1; }

/* Project-record cards used beside the elevated mist card */
.record-card {
  background: var(--parchment);
  border-radius: 22px;
  padding: 20px 24px;
}
.record-card .small { color: var(--graphite); }
.record-card-dim { background: transparent; border: 1px solid rgba(36, 36, 36, 0.16); }

/* --------------------------------------------------------------------------
   Tables — hairlines only
   -------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
  letter-spacing: -0.02em;
  min-width: 560px;
}
th, td { text-align: left; padding: 18px 20px 18px 0; border-bottom: 1px solid var(--ash); vertical-align: top; }
th {
  font-weight: 500;
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--smoke);
  border-bottom-color: var(--off-black);
}
td:last-child, th:last-child { padding-right: 0; }
.td-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

.list { list-style: none; margin: 0; padding: 0; }
.list li {
  position: relative;
  padding-left: 26px;
  color: var(--graphite);
  font-size: var(--text-body);
  letter-spacing: -0.025em;
}
.list li + li { margin-top: 12px; }
.list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  color: var(--forest);
}
.list-yes li::before { content: '\2713'; }
.list-no li::before  { content: '\00d7'; color: var(--clay-ink); }
.list-dot li::before { content: '\2014'; color: var(--smoke); }

.def { display: grid; gap: 6px; }
.def dt { font-weight: 500; text-transform: uppercase; font-size: var(--text-caption); letter-spacing: 0.06em; color: var(--smoke); }
.def dd { margin: 0; color: var(--graphite); }
.def-row + .def-row { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--ash); }

/* --------------------------------------------------------------------------
   FAQ accordion — 1px bottom border only, no fill change on hover
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--ash); }
.faq details { border-bottom: 1px solid var(--ash); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 0;
  font-family: var(--serif);
  font-size: clamp(19px, 2.4vw, var(--text-subheading));
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '\2193';
  font-family: var(--mono);
  font-size: var(--text-body-lg);
  flex: 0 0 auto;
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq .faq-body { padding: 0 0 32px; max-width: 76ch; }
.faq .faq-body > * + * { margin-top: 14px; }
@media (min-width: 700px) {
  .faq summary { padding: 34px 0; }
  .faq .faq-body { padding-bottom: 38px; padding-right: 56px; }
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field { display: block; margin-bottom: 20px; }
.field > span {
  display: block;
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 8px;
}

input[type='text'], input[type='email'], input[type='tel'], select, textarea {
  width: 100%;
  font-family: var(--mono);
  font-size: var(--text-body);
  letter-spacing: -0.025em;
  color: var(--off-black);
  background: var(--parchment);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 14px 18px;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234e4d4d' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px;
  padding-right: 44px;
}
textarea { min-height: 108px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--forest); outline-offset: 1px; border-color: transparent; }

.field-row { display: grid; gap: 20px; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }

.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--text-body-sm);
  color: var(--graphite);
  letter-spacing: -0.02em;
}
.check input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--forest); }

.form-note {
  margin-top: 18px;
  font-size: var(--text-caption);
  letter-spacing: -0.02em;
  color: var(--smoke);
  line-height: 1.45;
  text-transform: none;
}

.form-ok {
  display: none;
  border: 1px solid var(--forest);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 24px;
  font-size: var(--text-body-sm);
  background: var(--sage-mist);
}
.form-ok[data-shown='true'] { display: block; }

/* --------------------------------------------------------------------------
   Notes / callouts
   -------------------------------------------------------------------------- */

.note {
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 22px;
  font-size: var(--text-body-sm);
  letter-spacing: -0.02em;
  color: var(--graphite);
}
.note b { color: var(--off-black); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer { border-top: 1px solid var(--ash); padding: 56px 0 40px; }

.foot-grid { display: grid; gap: 40px; }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; } }

.foot-col h4 {
  font-family: var(--mono);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 16px;
}
.foot-col a {
  display: block;
  text-decoration: none;
  font-size: var(--text-body-sm);
  letter-spacing: -0.02em;
  padding: 5px 0;
  color: var(--off-black);
}
.foot-col a:hover { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }

.legal {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--ash);
  display: grid;
  gap: 14px;
  font-size: var(--text-caption);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--smoke);
  text-transform: none;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.center { text-align: center; }
.center .btn-row { justify-content: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.nowrap { white-space: nowrap; }
.pad-t-0 { padding-top: 0; }
.pad-b-0 { padding-bottom: 0; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  background: var(--forest);
  color: #f6f3f1;
  padding: 12px 20px;
  border-radius: var(--r-btn);
  font-size: var(--text-body-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.pc-page[hidden]{display:none}

/* ==========================================================================
   Additions — everything here is new in the WEB-01 migration.
   site.css is the artifact's stylesheet, kept byte-for-byte apart from the
   font URLs. Nothing new goes in there, so `git diff` against the artifact
   stays a real check. Both files concatenate into /assets/site.css.

   Only one thing is styled here: the form error states, which the artifact had
   no markup or rules for at all.
   ========================================================================== */

:root {
  /* Warm brick, in the same R>G>B cast as the rest of the neutrals. --error #8a2b1c is
     7.78:1 on --parchment and --error #8a2b1c is 6.66:1 on --sage-mist — the two
     surfaces a form sits on — against the 4.5:1 that --smoke was darkened to
     clear. Verified by `npm run verify:contrast`, which now exists: it was
     cited here before it was written, and both numbers were correct the whole
     time. The citation is what was false, and a cited check nobody can run is
     worse than no check, because it gets believed. */
  --error: #8a2b1c;
}

/* Form-level live region. Present in the static markup on every build so it is
   in the accessibility tree before its content changes; empty until it has
   something true to say, and rendering nothing while empty. */
.form-error {
  font-family: var(--mono);
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--error);
  border: 1px solid var(--error);
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 24px;
}
.form-error:empty { display: none; }
.form-error a { color: inherit; }

/* Per-field message, appended inside the field's own label. */
.field-msg {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
  color: var(--error);
  margin-top: 8px;
}

input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] { border-color: var(--error); }

/* The submit button while a send is in flight, and in an unwired preview
   build where it ships disabled. */
.pill-primary[disabled] { opacity: 0.55; cursor: not-allowed; }