/* PROOF marketing site. Tokens are the closed palette from design_handoff_proof_redesign/README.md.
   No other colors appear in this file. */
:root {
  --ink: #000000;
  --paper: #ffffff;
  --surface: #f6f6f6;
  --subtle: #f9f9f9;
  --hairline: #f2f2f2;
  --line: #e9e9e9;
  --mute: #bebbbc;
  --muted: #6a6768;
  --body: #4a4748;
  --alert: #8a3a3a;
  --green: #14ff03;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Tinos", Georgia, "Times New Roman", serif;
  --radius: 2px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(64px, 9vw, 128px);
  --header-h: 64px;
  color-scheme: light;
}

/* Dark theme: the app's .dark tokens (frontend/src/globals.css), switched by a `dark` class on <html>
   that the inline script in <head> sets before first paint. Dark mode uses only these values plus green. */
html.dark {
  --ink: #fafafa;
  --paper: #121212;
  --surface: #1a1a1a;
  --subtle: #171717;
  --hairline: #292929;
  --line: #333333;
  --mute: #666666;
  --muted: #a6a6a6;
  --body: #cccccc;
  --alert: #d14747;
  color-scheme: dark;
}
/* Black bands (.inverse and the footer) become hairline-bounded surface bands in dark mode.
   Band rules are written for ink-on-paper inverted, so remap the tokens they use inside the band:
   band background (--ink) to surface, band text (--paper) to ink, band paragraph text (--line) to body,
   band rules (--body) to line, and band secondary text (--mute, --muted) to muted. */
html.dark .inverse, html.dark .site-footer {
  --ink: #1a1a1a;
  --paper: #fafafa;
  --line: #cccccc;
  --body: #333333;
  --mute: #a6a6a6;
  --muted: #a6a6a6;
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
}
/* A section that always uses the dark theme, in light and dark mode alike (Erik's call). */
.force-dark {
  --ink: #fafafa; --paper: #121212; --surface: #1a1a1a; --subtle: #171717; --hairline: #292929;
  --line: #333333; --mute: #666666; --muted: #a6a6a6; --body: #cccccc;
  background: var(--paper); color: var(--ink); border-top-color: var(--line);
}
/* True black like the other black bands (Get started); its columns go black too. */
.force-dark.true-black { --paper: #000000; }
/* Home dark sections: the small label above the headline in PROOF green (Erik's call). */
.green-eyebrow .section-head .eyebrow { color: var(--green); }
/* Logos: the black marks on paper switch to the white variants in dark mode; marks inside ink
   blocks (which invert to near-white) switch the other way. */
.on-dark { display: none; }
html.dark .on-dark { display: block; }
html.dark .on-light { display: none; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
main:focus { outline: none; }

/* Focus: black outline with the green focus ring (rule 2d); white outline on dark surfaces. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--green);
  border-radius: var(--radius);
}
.inverse :focus-visible, .site-footer :focus-visible { outline-color: var(--paper); }

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px; text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 700; line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted);
  margin: 0 0 20px;
}
.inverse .eyebrow { color: var(--mute); }
.display { font-size: clamp(38px, 6.2vw, 80px); line-height: 1.02; letter-spacing: -0.035em; max-width: 17ch; }
.display.wide { max-width: 24ch; font-size: clamp(36px, 5.4vw, 76px); }.h2 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.03em; max-width: 22ch; }
.h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.dot { color: var(--green); }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--body); max-width: 60ch; }
.inverse .lede, .inverse p { color: var(--line); }
.body { color: var(--body); max-width: 64ch; }
.body + .body { margin-top: 1em; }
.small { font-size: 14px; color: var(--muted); }
.mono { font-family: var(--mono); }
.source { font-size: 12.5px; color: var(--muted); font-style: normal; line-height: 1.5; }
.inverse .source { color: var(--mute); }
.serif-callout {
  font-family: var(--serif); font-size: clamp(26px, 3.2vw, 40px); line-height: 1.2;
  letter-spacing: -0.01em; max-width: 30ch;
}
/* A callout allowed to run past 30ch so a short line stays on one line; the rule above matches its width. */
.serif-callout.one-line { max-width: none; width: fit-content; }
/* A longer closing line that runs wider so it stays about three lines on desktop. */
.serif-callout.wide-callout { max-width: 60ch; }
.quote { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.35; }

.section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .lede, .section-head .body { margin-top: 20px; }
.split-head { display: grid; gap: 24px 64px; }
@media (min-width: 960px) {
  /* The right-hand text's last line sits on the headline's last line (falls back to bottom edges). */
  .split-head { grid-template-columns: 1fr 1fr; align-items: end; align-items: last baseline; }
  .split-head > .lede { margin-top: 0; }
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border: 1px solid var(--ink); border-radius: var(--radius);
  font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: color .15s, background-color .15s, border-color .15s;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--body); border-color: var(--body); }
.btn-secondary { background: transparent; color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--paper); }
/* On any black section the primary button is PROOF green with black text (Erik's call, October 20, 2026). */
.inverse .btn-primary, .force-dark .btn-primary { background: var(--green); color: #000; border-color: var(--green); }
.inverse .btn-primary:hover, .force-dark .btn-primary:hover { background: #fafafa; border-color: #fafafa; color: #000; }
.inverse .btn-secondary { color: var(--paper); border-color: var(--paper); }
.inverse .btn-secondary:hover { background: var(--paper); color: var(--ink); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.btn-block { width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.text-link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.text-link::after { content: "\2192"; transition: transform .15s; }
.text-link:hover::after { transform: translateX(3px); }
.link-row { margin-top: 40px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40; background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.brand { display: inline-flex; flex: none; padding: 6px 0; }
.brand img { width: 94px; height: auto; }
/* Official green wordmark (dark mode). The file carries its own clear space, so it is drawn larger
   and pulled back by that margin to keep the letters the same size and position as the light logo. */
.brand img.brand-green { width: 107px; margin: -4px 0 -4px -6px; }
.main-nav { margin-left: auto; display: none; }
.main-nav ul { display: flex; gap: 4px; list-style: none; }
.main-nav a {
  display: block; padding: 8px 12px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--body);
  border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: var(--ink); }
.main-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--green); }
.header-cta { margin-left: auto; }
.menu-button {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; cursor: pointer;
}
.menu-icon { display: grid; gap: 5px; width: 20px; }
.menu-icon span { height: 1.5px; background: var(--ink); }
.drawer-actions { display: flex; align-items: center; gap: 4px; margin-right: -10px; }
.drawer-actions .drawer-close { margin-right: 0; }
@media (max-width: 479px) { .header-cta { font-size: 13px; padding: 8px 12px; min-height: 38px; } .header-inner { gap: 12px; } }
@media (min-width: 1100px) {
  .main-nav { display: block; }
  .header-cta { margin-left: 8px; }
  .menu-button { display: none; }
}

.drawer {
  position: fixed; inset: 0; z-index: 60; background: var(--paper); overflow-y: auto;
  display: flex; flex-direction: column;
}
.drawer[hidden] { display: none; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); border-bottom: 1px solid var(--line); }
.drawer-close { width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer; position: relative; }
.close-icon::before, .close-icon::after {
  content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 1.5px; background: var(--ink);
}
.close-icon::before { transform: rotate(45deg); }
.close-icon::after { transform: rotate(-45deg); }
.drawer-nav { padding-top: 16px; padding-bottom: 40px; }
.drawer-nav ul { list-style: none; margin-bottom: 32px; }
.drawer-nav li { border-bottom: 1px solid var(--line); }
.drawer-nav li a { display: block; padding: 18px 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.drawer-nav li a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 3px; text-underline-offset: 6px; }
body.drawer-open { overflow: hidden; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section); border-top: 1px solid var(--line); }
.section.flush-top { border-top: 0; }
.section.tint { background: var(--subtle); }
/* Two sections that read as one sequence share a smaller gap. */
.section.tight-bottom { padding-bottom: clamp(40px, 5vw, 64px); }
.section.tight-top { padding-top: clamp(40px, 5vw, 64px); }
.inverse { background: var(--ink); color: var(--paper); border-top-color: var(--ink); }
/* The home hero is just the headline, lede, and buttons (Erik's call). On laptop and desktop screens it
   fills the first screen below the header, so the next section starts at the bottom edge. */
.hero { padding-block: clamp(48px, 6vw, 88px) clamp(56px, 6vw, 88px); }
.hero .lede { margin-top: 28px; }
@media (min-width: 1024px) {
  /* Capped at 840px (a laptop screen's worth) so tall monitors don't get extra white space.
     A page hero with .fill-screen (How PROOF Works) uses the same sizing (Erik's call). */
  .hero, .page-hero.fill-screen { min-height: min(calc(100svh - var(--header-h)), 840px); display: flex; align-items: center; padding-block: 72px 24px; }
  .hero > .wrap, .page-hero.fill-screen > .wrap { width: 100%; }
  .hero .lede, .page-hero.fill-screen .lede { margin-top: 36px; }
  .hero .cta-row, .page-hero.fill-screen .cta-row { margin-top: 48px; }
}
.hero .lede.wide { max-width: none; }
/* A longer intro paragraph, set a touch smaller so it sits in about four lines. */
@media (min-width: 960px) { .lede.lede-long { font-size: 19px; } }
.page-hero { padding-block: clamp(56px, 8vw, 112px); }
.page-hero .lede { margin-top: 28px; }

/* ---------- Layout helpers ---------- */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid > * { background: var(--paper); }
.tint .grid > * { background: var(--subtle); }
/* In dark mode the tint drops to paper, so the hairline-bounded surface bands are the only raised sections. */
html.dark .section.tint, html.dark .tint .grid > * { background: var(--paper); }
.inverse .grid { background: var(--body); border-color: var(--body); }
.inverse .grid > * { background: var(--ink); }
@media (min-width: 640px) { .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
  .grid-3, .grid-6 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.cell { padding: clamp(24px, 3vw, 36px); }
.cell .h3 + p, .cell .h3 + .body { margin-top: 12px; }
.cell-num { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 28px; display: block; letter-spacing: .06em; }
.two-col { display: grid; gap: 48px; }
/* AI Adoption Gap: the paragraph takes a little more width so it sits in four lines beside the path. */
@media (min-width: 960px) { .two-col.gap-path { grid-template-columns: 1.12fr 1fr; gap: 56px; } .two-col.gap-path .lede { max-width: none; } }
@media (min-width: 960px) { .two-col { grid-template-columns: 1fr 1fr; gap: 80px; } .two-col.wide-left { grid-template-columns: 1.2fr 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.chips li {
  font-size: 14px; font-weight: 500; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); line-height: 1.3;
}
.chips.mono li { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.inverse .chips li { background: transparent; border-color: var(--body); color: var(--paper); }

.ticks { list-style: none; display: grid; gap: 0; }
.ticks li { position: relative; padding: 12px 0 12px 26px; border-top: 1px solid var(--line); color: var(--body); }
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 21px; width: 8px; height: 8px; background: var(--ink); }
.inverse .ticks li { border-color: var(--body); color: var(--line); }
.inverse .ticks li::before { background: var(--paper); }
.ticks.plain li { border: 0; padding-block: 6px; }
.ticks.plain li::before { top: 15px; width: 6px; height: 6px; }

.callout-band { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.callout-band .serif-callout { margin-inline: auto; text-align: center; }
.inline-callout { margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--ink); }
.inverse .inline-callout { border-top-color: var(--body); }

/* ---------- Photography slots (plain placeholder blocks, no ornament) ---------- */
.slot { position: relative; background: var(--surface); min-height: 220px; }
.slot-label {
  position: absolute; left: 16px; top: 16px; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.slot.wide { min-height: clamp(180px, 26vw, 360px); margin-bottom: clamp(48px, 6vw, 80px); }
/* A slot holding a photo: hairline frame, square corners, image cropped to fill. */
.slot-photo { border: 1px solid var(--line); overflow: hidden; }
.slot-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 1099px) { .slot-photo { min-height: 0; aspect-ratio: 4 / 3; } }

/* ---------- Home hero: daily work -> PROOF Knowledge System -> useful work, looping back into the firm's tools ---------- */
.hero-grid { display: grid; gap: clamp(40px, 5vw, 72px); }
.hero-grid > div { max-width: 1100px; }
.loop { border-top: 1px solid var(--ink); padding-top: 16px; }
.loop-grid { display: grid; }
.loop-title { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.loop-group .loop-title { margin-bottom: 10px; }
.loop-group ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.loop-group li { padding: 7px 0; border-top: 1px solid var(--line); font-size: 15px; font-weight: 500; color: var(--body); }
.loop-core { display: flex; flex-direction: column; justify-content: center; }
/* Center: the official green lockup on a dark field, inside a hairline relationship pattern. */
.loop-box {
  position: relative; flex: 1; min-height: 150px; background: var(--ink); color: var(--line);
  padding: 16px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  --net: var(--body); --pulse: var(--green);
  /* Green pulses approved by Chad as an exception to the accent rule. A single hairline border in the
     same gray as the list dividers beside it (Erik's call, replacing the offset ring). */
  border: 1px solid var(--line);
  /* Rounded corners are Erik's exception to the square-corner rule; the ring follows the curve. */
  border-radius: 20px; overflow: hidden;
}
/* Dark mode keeps the box true black (the light ink token) so it reads against the #121212 page. */
html.dark .loop-box { background: #000; color: var(--body); --net: var(--line); }
.loop-net { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Knowledge graph drawn by site.js: kept low-contrast so the logos stay the focus. */
.loop-net .g-edges { fill: none; stroke: var(--net); stroke-width: .5; opacity: .7; }
.loop-net .g-nodes circle { fill: var(--net); }
.loop-net .g-nodes .g-hub { fill: var(--net); }
.loop-net .g-pulse {
  fill: none; stroke: var(--pulse); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 10 90; stroke-dashoffset: 100; opacity: 0;
  animation: g-pulse 5.6s ease-in-out infinite;
}
.loop-net .g-draw { fill: none; stroke: var(--muted); stroke-width: .6; stroke-dasharray: 100; stroke-dashoffset: 100; animation: g-draw 6s ease-in-out infinite; }
.loop-net .g-iso { fill: var(--muted); }
@keyframes g-pulse { 0% { stroke-dashoffset: 100; opacity: 0; } 8% { opacity: .9; } 42% { opacity: .9; } 50% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes g-draw { 0% { stroke-dashoffset: 100; opacity: 0; } 10% { opacity: .8; } 45%, 80% { stroke-dashoffset: 0; opacity: .8; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .loop-net .g-pulse { display: none; }
  .loop-net .g-draw { stroke-dashoffset: 0; stroke-dasharray: 2 2; opacity: .8; }
}
.loop-brand { position: relative; display: flex; justify-content: center; }
.loop-brand img { width: 66px; height: auto; }
.loop-line { position: relative; font-size: 12.5px; font-weight: 600; line-height: 1.4; max-width: 46ch; }

/* Connection paths: a hairline with soft points moving along it, and a stroked arrowhead. */
.loop-lane { position: relative; height: 48px; color: var(--muted); }
.loop-track { position: absolute; background: var(--mute); }
/* Moving points are plain PROOF green in both themes (Erik's call). */
/* --dot is the moving point size; the offsets below keep it centered on the 1px lines. */
.loop { --dot: 5.75px; }
.loop-track i { position: absolute; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--green); }
.loop-head { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.loop-lane .loop-track { left: 50%; top: 8px; bottom: 14px; width: 1px; }
/* --p is each point's resting place when motion is reduced. */
.loop-track i:nth-child(1) { --p: 15%; }
.loop-track i:nth-child(2) { --p: 48%; animation-delay: -1.2s; }
.loop-track i:nth-child(3) { --p: 80%; animation-delay: -2.4s; }
/* Short arrows run quicker than the return line's 4.8s beat (Erik's calibration). */
.loop-lane .loop-track i { left: calc(.5px - var(--dot) / 2); top: var(--p); animation: loop-y 3.6s linear infinite; }
/* One point per short arrow; three crowd a path this short. */
.loop-lane .loop-track i:nth-child(n+2) { display: none; }
.loop-lane .loop-track i:nth-child(1) { --p: 48%; }
.loop-lane .loop-head { position: absolute; left: calc(50% - 4px); bottom: 2px; transform: rotate(90deg); }
.loop-return { margin-top: 18px; display: flex; align-items: center; gap: 10px; color: var(--muted); }
.loop-return .loop-head { flex: none; transform: rotate(90deg); }
.loop-return .loop-track { position: relative; flex: 1; height: 1px; }
.loop-return .loop-track i { top: calc(.5px - var(--dot) / 2); left: var(--p); animation: loop-x-back 4.8s linear infinite; }
.loop-return .loop-track i:nth-child(2) { animation-delay: -1.6s; }
.loop-return .loop-track i:nth-child(3) { animation-delay: -3.2s; }
.loop-return .loop-title { flex: none; max-width: 60%; }
@keyframes loop-y { 0% { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: calc(100% - var(--dot)); opacity: 0; } }
@keyframes loop-x { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - var(--dot)); opacity: 0; } }
@keyframes loop-x-back { 0% { left: calc(100% - var(--dot)); opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
@media (min-width: 960px) {
  /* Equal side columns and equal gaps, so the PROOF box sits at the exact center. */
  .loop-grid { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 0.8fr) 40px minmax(0, 1fr); align-items: stretch; }
  .loop-group li { font-size: 14px; }
  .loop-group ul { column-gap: 12px; grid-auto-rows: 1fr; }
  .loop-lane { height: auto; }
  .loop-return { margin-top: 14px; }
  .loop-return .loop-head { transform: none; }
  /* Arrows run flush from the lists to the box, clearing the box's ring (4px out). */
  .loop-lane .loop-track { left: 0; right: 14px; top: 50%; bottom: auto; width: auto; height: 1px; }
  .loop-lane .loop-track i { top: calc(.5px - var(--dot) / 2); left: var(--p); animation-name: loop-x; }
  .loop-lane .loop-head { left: auto; right: 6px; bottom: auto; top: calc(50% - 6px); transform: none; }
  /* Both arrows hug the box (it has no outer ring now) and stay clear of the lists. */
  .loop-lane:nth-child(2) .loop-track { left: 12px; right: 10px; }
  .loop-lane:nth-child(2) .loop-head { right: 3px; }
  .loop-lane:nth-child(4) .loop-track { left: 3px; right: 18px; }
  .loop-lane:nth-child(4) .loop-head { right: 12px; }
}

/* ---------- Adoption path: three steps joined by a hairline; green marks where PROOF gets you ---------- */
.path { list-style: none; display: grid; align-self: center; }
.path li { position: relative; padding: 0 0 28px 30px; }
.path li:last-child { padding-bottom: 0; }
/* Dots are 11px (center at 5.5px across, 8.5px down), so a 1px line at left 5px or top 8px runs through their center. */
.path li:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 18px; bottom: 0; width: 1px; background: var(--mute); }
.path-dot { position: absolute; left: 0; top: 3px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--mute); background: var(--ink); }
.path li:nth-child(2) .path-dot { background: var(--paper); border-color: var(--paper); }
.path li:last-child .path-dot { background: var(--green); border-color: var(--green); }
.path-step { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.path strong { display: block; margin-top: 6px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--paper); }
@media (min-width: 640px) {
  .path { grid-template-columns: repeat(3, 1fr); column-gap: 20px; }
  .path li, .path li:last-child { padding: 28px 0 0; }
  .path strong { font-size: 17px; }
  /* 7px clear on both sides of each dot: starts 7px after this dot (11 + 7) and stops 7px before the next (20px gap - 7). */
  .path li:not(:last-child)::before { left: 18px; right: -13px; top: 8px; bottom: auto; width: auto; height: 1px; }
}

/* ---------- Stats ---------- */
.stat-pair { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 720px) { .stat-pair { grid-template-columns: 1fr 1fr; } }
.stat { background: var(--paper); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; }
.stat .stat-num { color: var(--ink); }
.stat-num { font-family: var(--mono); font-size: clamp(56px, 8vw, 100px); font-weight: 500; letter-spacing: -0.04em; line-height: .9; font-variant-numeric: tabular-nums; }
.stat-num small { font-size: .45em; letter-spacing: -0.02em; }
.stat p { color: var(--body); max-width: 40ch; }
.expect { margin-top: clamp(32px, 4vw, 48px); }
.expect-card { border-top: 1px solid var(--ink); padding-top: clamp(24px, 3vw, 32px); display: grid; gap: 24px; }
.expect-card .ticks li:first-child { border-top: 0; padding-top: 0; }
.expect-card .ticks li:first-child::before { top: 9px; }
@media (min-width: 960px) { .expect-card { grid-template-columns: 1fr 2fr; gap: 48px; } }

/* Adoption steps: values with hairline bars, descending from piloting to firm-wide. */
.stairs { list-style: none; display: grid; gap: 14px; }
.stairs li { display: grid; grid-template-columns: minmax(110px, 240px) 1fr; gap: 20px; align-items: center; }
.stairs .val { font-family: var(--mono); font-size: clamp(32px, 4.6vw, 56px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.stairs .val.under { font-size: clamp(24px, 3.4vw, 40px); }
.stairs .bar-wrap { display: grid; gap: 8px; }
.stairs .bar-wrap { border-top: 1px solid var(--body); }
/* Stats and bars in PROOF green (Erik's call). */
.stairs .val { color: var(--green); }
.stairs .bar { height: 6px; background: var(--green); width: var(--w); min-width: 3px; margin-top: -1px; }
.stairs .bar-label { color: var(--line); font-size: 15px; }

/* ---------- Tabs (Why it's hard) ---------- */
.hard-grid { display: grid; gap: 40px; }
@media (min-width: 1100px) { .hard-grid { grid-template-columns: 2fr 1fr; gap: 56px; } .hard-grid .slot { min-height: 100%; } }
.tablist { display: none; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 0; }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 14px 20px 12px 0; margin-right: 24px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); cursor: pointer;
}
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tab-panel + .tab-panel { margin-top: 48px; }
.panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.hard-list { list-style: none; display: grid; }
@media (min-width: 640px) { .hard-list { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.hard-list li { padding: 22px 0; border-bottom: 1px solid var(--line); color: var(--body); }
.hard-list strong { display: block; color: var(--ink); font-size: 18px; letter-spacing: -0.01em; margin-bottom: 6px; }
.note-card { margin-top: 28px; background: var(--ink); color: var(--paper); padding: 28px; display: grid; gap: 10px; }
.note-card p { color: var(--line); }
.note-card .source { color: var(--mute); }
.note-card .big { font-size: clamp(22px, 2.4vw, 26px); font-weight: 700; color: var(--paper); letter-spacing: -0.02em; line-height: 1.25; }
@media (min-width: 768px) {
  .tabs.js .tablist { display: flex; }
  .tabs.js .panel-title { display: none; }
  .tabs.js .tab-panel.is-inactive { display: none; }
  .tabs.js .tab-panel + .tab-panel { margin-top: 0; }
}

/* ---------- Outcome cards ---------- */
.outcome .h3 { margin-bottom: 10px; }
.outcome p { color: var(--body); }
/* Icons: stroked at 1.5, colored by currentColor (rule 6). */
.icon-tile { display: block; width: 24px; height: 24px; color: var(--ink); margin-bottom: 24px; }
.icon-tile svg { width: 24px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Twin -> Knowledge System -> Firm ---------- */
.flow3 { display: grid; gap: 0; }
.flow3-step { border: 1px solid var(--ink); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.flow3-step.core { background: var(--ink); color: var(--paper); }
.flow3-step.core p { color: var(--line); }
.flow3-step .h3 { font-size: 22px; }
.flow3-step p { color: var(--body); }
/* Node contents are a hairline list, not boxes inside the box (rule 7). */
.flow3-step .items { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; margin-top: auto; padding-top: 12px; }
.flow3-step .items li { font-size: 14px; padding: 7px 0; border-top: 1px solid var(--line); }
.flow3-step.core .items li { border-color: var(--body); }
.flow-arrow { display: grid; place-items: center; height: 40px; font-family: var(--mono); font-size: 18px; color: var(--muted); }
.flow-arrow::before { content: "\2193"; }
@media (min-width: 960px) {
  .flow3 { grid-template-columns: 1fr 48px 1fr 48px 1fr; align-items: stretch; }
  .flow-arrow { height: auto; }
  .flow-arrow::before { content: "\2192"; }
}

/* ---------- Connect diagram (where work happens / creates / comes back) ---------- */
.connect { display: grid; gap: 0; }
.connect-col { border: 1px solid var(--line); background: var(--paper); padding: 24px; }
.connect-col h3 { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; color: var(--ink); }
.connect-col ul { list-style: none; }
.connect-col li { padding: 8px 0; border-top: 1px solid var(--hairline); font-size: 15px; color: var(--body); }
.connect-col li.more { color: var(--muted); }
/* Home "How it works": same language as the hero visual. A larger knowledge graph behind the
   green symbol, green points moving along the arrows, and a moving return line. */
.connect, .connect-return { --dot: 5.75px; }
.connect-core {
  position: relative; isolation: isolate; overflow: hidden; min-height: 200px;
  background: #000; color: #fafafa; padding: 28px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px;
  border-radius: 20px; outline: 1px solid var(--muted); outline-offset: 4px;
  --net: #4a4748; --pulse: var(--green);
}
html.dark .connect-core { --net: #333333; }
.connect-core .loop-net { z-index: -1; }
/* Cluster graphs (home hero and "How it works"), shaped like the knowledge graph in the PROOF app. */
.loop-net[data-graph="cluster"] .g-edges { stroke-width: .6; opacity: .9; }
.loop-net[data-graph="cluster"] .g-ring { fill: #6a6768; }
/* The core reads brighter than the rest, as the dense center of the graph. */
.loop-net[data-graph="cluster"] .g-core-edges { stroke: #6a6768; }
.loop-net[data-graph="cluster"] .g-nodes .g-core { fill: #a6a6a6; }
.loop-net[data-graph="cluster"] .g-nodes .g-hub { fill: #a6a6a6; }
.loop-net[data-graph="cluster"] .g-hot { fill: var(--green); }
/* Pulses run along long multi-step paths, so the moving streak is kept short (3% of the path). */
.loop-net[data-graph="cluster"] .g-pulse { stroke-dasharray: 3 97; stroke-width: 1.2; }
/* Hero box: symbol tucked into the top right corner, line of text at the foot, graph filling the rest.
   The symbol file has built-in clear space, so these offsets put the visible mark about 8px from the borders. */
.loop-box .loop-brand { position: absolute; top: 1px; right: -1px; z-index: 1; }
.loop-box .loop-brand img { width: 44px; }
.loop-box .loop-line { position: absolute; left: 14px; right: 14px; bottom: 12px; margin-inline: auto; z-index: 1; text-shadow: 0 0 6px #000, 0 0 2px #000; }
/* The symbol sits in the top right corner, outside the graph's oval; the label sits at the foot of the box. */
/* The file has built-in clear space (about 17% top, 20% right at this size), so these offsets
   put the visible mark about 10px from the top and right borders. */
.connect-core img { position: absolute; top: -1px; right: -3px; width: 64px; height: auto; }
.connect-core strong {
  position: absolute; left: 16px; right: 16px; bottom: 22px; margin-inline: auto;
  font-size: 18px; letter-spacing: -0.02em; line-height: 1.2; max-width: 14ch;
}
@media (max-width: 1099px) { .connect-core { min-height: 300px; } }
/* Arrows between the columns: a hairline with one green point gliding along it. */
.conn-lane { position: relative; height: 48px; color: var(--muted); }
.conn-lane .loop-track { left: 50%; top: 8px; bottom: 16px; width: 1px; }
.conn-lane .loop-track i { left: calc(.5px - var(--dot) / 2); top: var(--p); animation: loop-y 3.6s linear infinite; }
.conn-lane .loop-track i:nth-child(n+2) { display: none; }
.conn-lane .loop-track i:nth-child(1) { --p: 48%; }
.conn-lane .loop-head { position: absolute; left: calc(50% - 4px); bottom: 6px; transform: rotate(90deg); }
.connect-return { margin-top: 20px; }
@media (min-width: 1100px) {
  .connect { grid-template-columns: 1fr 40px 1fr 40px 0.85fr 40px 1fr; }
  .connect .flow-arrow::before { content: "\2192"; }
  .connect .flow-arrow { height: auto; }
  .conn-lane { height: auto; }
  .conn-lane .loop-track { left: 8px; right: 14px; top: 50%; bottom: auto; width: auto; height: 1px; }
  .conn-lane .loop-track i { top: calc(.5px - var(--dot) / 2); left: var(--p); animation-name: loop-x; }
  .conn-lane .loop-head { left: auto; right: 6px; bottom: auto; top: calc(50% - 6px); transform: none; }
  .connect-return .loop-head { transform: none; }
}
@media (min-width: 1100px) { .connect.three { grid-template-columns: 1fr 40px 1fr 40px 1fr; } }
.connect-foot { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: center; justify-content: space-between; }
.connect-foot p { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
/* Connected today versus scoped separately, under the How it works diagram (Erik's call). */
.conn-status { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 10px; max-width: 90ch; }
.conn-status p { font-size: 15px; color: var(--body); }
.conn-status strong { color: var(--ink); }

/* ---------- Included cards ---------- */
.feature { display: flex; flex-direction: column; gap: 16px; }
.feature .lead { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.feature p { color: var(--body); }
.status-chip {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 10px; border: 1px solid var(--ink); border-radius: var(--radius);
}
/* Live status dot: one of the four permitted uses of green (rule 2b). */
.status-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); border: 1px solid var(--ink); box-sizing: content-box; }
.urgency { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.urgency li { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--ink); border-radius: var(--radius); }
.urgency li:first-child { background: var(--ink); color: var(--paper); }

/* ---------- Roles ---------- */
.role { display: flex; flex-direction: column; gap: 18px; }
.role .eyebrow { margin: 0; }
.role .quote { min-height: 0; }

/* ---------- Usage example (featured data moment) ---------- */
.usage-grid { display: grid; gap: 48px; }
@media (min-width: 1100px) { .usage-grid { grid-template-columns: 1fr 1.5fr; gap: 72px; align-items: start; } }
.usage-table { width: 100%; border-collapse: collapse; }
.usage-table caption { text-align: left; padding-bottom: 16px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.usage-table th, .usage-table td { text-align: left; padding: 18px 0; border-top: 1px solid var(--body); vertical-align: top; }
.usage-table thead th { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding-top: 0; border-top: 0; }
.usage-table tbody th { font-weight: 600; padding-right: 24px; width: 30%; color: var(--paper); }
.usage-table td { width: 35%; padding-right: 16px; }
.usage-table .v { display: block; font-family: var(--mono); font-weight: 500; font-size: 17px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.usage-table .bar { display: block; height: 4px; margin-top: 10px; width: var(--w); min-width: 3px; }
.usage-table .before .bar { background: var(--muted); }
.usage-table .after .bar { background: var(--paper); }
.usage-table tr.total th, .usage-table tr.total td { border-top: 1px solid var(--paper); }
.usage-table tr.total .v { font-size: 24px; }
@media (max-width: 559px) {
  .usage-table thead { display: none; }
  .usage-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--body); padding: 16px 0; }
  .usage-table tr.total { border-top-color: var(--paper); }
  .usage-table tbody th { grid-column: 1 / -1; border: 0; padding: 0 0 10px; width: auto; }
  .usage-table td { border: 0; padding: 0 12px 0 0; width: auto; }
  .usage-table td::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
}
.usage-note { margin-top: 20px; }

/* ---------- People stay in control ---------- */
.people { margin-top: clamp(40px, 5vw, 64px); }
.people-top {
  background: var(--ink); color: var(--paper); padding: 22px 24px; display: flex; align-items: center; gap: 16px; justify-content: center;
  font-weight: 700; font-size: 19px; letter-spacing: -0.01em; text-align: center;
}
/* Official green symbol, as in the knowledge graph boxes. Its file has built-in clear space, so it is
   drawn larger with negative margins to keep the bar's height. The bar stays black in dark mode so the green reads. */
.people-top img { width: 60px; height: auto; flex: none; margin: -12px -10px -12px 0; }
html.dark .people-top, .force-dark .people-top { background: #000; color: #fafafa; border: 1px solid var(--line); }
/* On the black home section the Knowledge System bar is outlined in PROOF green (Erik's call). */
.force-dark .people-top { border-color: var(--green); }
/* Same green outline for the four Twin boxes on How PROOF Works (the grid draws its lines from its background). */
.inverse .grid.green-grid { background: var(--green); border-color: var(--green); }
.inverse .chips.green-chips li, .force-dark .chips.green-chips li { border-color: var(--green); }
/* Home "How it works" opens with the "What PROOF is" intro and closes with "Your people stay in control",
   each set apart by a hairline (Erik's call). */
.connect-intro { padding-bottom: clamp(48px, 6vw, 80px); margin-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.connect-howto .lede { margin-top: 16px; max-width: 80ch; }
.connect-intro .h2 { max-width: 22ch; }
.control-copy .lede + .lede { margin-top: 1em; }
/* Two paragraphs beside the headline here, so the row aligns to the top instead of the bottom. */
.connect-control .split-head { align-items: start; }
.connect-control { margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.people-row { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.people-row li { position: relative; padding-top: 28px; }
.people-row li::before { content: ""; position: absolute; top: 0; left: 50%; height: 28px; border-left: 1px solid var(--ink); }
.people-row .tile { border: 1px solid var(--ink); padding: 18px 14px; text-align: center; background: var(--paper); height: 100%; }
.people-row .role-name { display: block; font-weight: 700; letter-spacing: -0.01em; }
.people-row .twin-label { display: block; margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.people-row li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .people-row { grid-template-columns: repeat(5, 1fr); }
  .people-row li:last-child:nth-child(odd) { grid-column: auto; }
}

/* ---------- Deployment cards ---------- */
.deploy-card { display: flex; flex-direction: column; gap: 20px; }
.deploy-card .h3 { font-size: 24px; }
.deploy-card .lead { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.deploy-card p { color: var(--body); }
.deploy-card .tag { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.inverse .deploy-card p { color: var(--line); }

.steps { list-style: none; counter-reset: step; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.steps li { counter-increment: step; background: var(--paper); padding: 24px; display: flex; gap: 16px; align-items: baseline; color: var(--body); }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink); flex: none; }
@media (min-width: 960px) { .steps.row { grid-template-columns: repeat(3, 1fr); } }
.inverse .steps { background: var(--body); border-color: var(--body); }
.inverse .steps li { background: var(--ink); color: var(--line); }
.inverse .steps li::before { color: var(--paper); }
/* Home "Get started": deployment titles and step numbers in PROOF green (Erik's call). */
.get-started .deploy-card .h3, .get-started .steps li::before { color: var(--green); }
.price-line { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 19px; font-weight: 600; }
.inverse .price-line { border-top-color: var(--body); }

/* ---------- Tables ---------- */
.table-wrap { border-top: 1px solid var(--ink); }
/* Fixed layout so the two compared columns are always equal width, whatever their text length. */
.compare { width: 100%; border-collapse: collapse; font-size: 16px; table-layout: fixed; }
.compare thead td { width: 24%; }
.compare thead th { width: 38%; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 18px 20px 18px 0; border-bottom: 1px solid var(--line); }
.compare thead th { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding-top: 20px; color: var(--muted); }
.compare tbody th { font-weight: 600; width: 24%; }
.compare td { color: var(--body); width: 38%; }
.compare .emph { color: var(--ink); }
@media (max-width: 719px) {
  .compare thead { display: none; }
  .compare tr { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .compare tbody th, .compare td { display: block; width: auto; border: 0; padding: 0; }
  .compare tbody th { margin-bottom: 10px; }
  .compare td + td { margin-top: 12px; }
  .compare td::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
}

/* ---------- Numbered process (timelines, phases, triage) ---------- */
.process { list-style: none; display: grid; gap: 0; counter-reset: p; }
.process > li { counter-increment: p; position: relative; padding: 0 0 28px 44px; }
.process > li::before {
  content: counter(p); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.process > li::after { content: ""; position: absolute; left: 13.5px; top: 28px; bottom: 0; border-left: 1px solid var(--ink); }
.process > li:last-child { padding-bottom: 0; }
/* Call Triage steps (How PROOF Works): number boxes outlined in PROOF green, numerals centered (Erik's call). */
.process.green-steps > li::before { box-sizing: border-box; border: 1px solid var(--green); line-height: 1; }
.process > li:last-child::after { display: none; }
.process strong { display: block; font-size: 18px; letter-spacing: -0.01em; margin-bottom: 4px; }
.process p, .process span.d { color: var(--body); }
.process .when { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
@media (min-width: 960px) {
  .process.horizontal { grid-template-columns: repeat(var(--n, 4), 1fr); gap: 24px; }
  .process.horizontal > li { padding: 48px 0 0 0; }
  .process.horizontal > li::after { left: 36px; right: -24px; top: 13.5px; bottom: auto; border-left: 0; border-top: 1px solid var(--ink); }
}
.inverse .process > li::before { background: var(--paper); color: var(--ink); }
.inverse .process > li::after { border-color: var(--muted); }
.inverse .process p, .inverse .process span.d { color: var(--line); }
.inverse .process .when, .inverse .cell-num { color: var(--mute); }

/* ---------- Connector flow ---------- */
.connector-flow { list-style: none; display: grid; gap: 8px; margin: 8px 0; }
.connector-flow li { border: 1px solid var(--ink); padding: 12px 14px; font-weight: 600; font-size: 15px; text-align: center; }
.connector-flow li.core { background: var(--ink); color: var(--paper); }
.connector-flow li.core.green-core { border-color: var(--green); }
.connector-flow .sep { border: 0; padding: 0; font-family: var(--mono); color: var(--muted); font-weight: 400; }
@media (min-width: 560px) {
  .connector-flow { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; }
}
.status-list { list-style: none; display: grid; gap: 12px; }
.status-list li { padding-left: 20px; position: relative; color: var(--body); }
/* Status dots: green marks live items (rule 2b); hollow dots are not live yet. */
.status-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border: 1px solid var(--ink); border-radius: 50%; }
.status-list li.live::before { background: var(--green); }
.status-list strong { color: var(--ink); }

/* ---------- Maturity (over time) ---------- */
.maturity { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.maturity li { background: var(--paper); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.maturity .meter { display: flex; gap: 3px; }
.maturity .meter i { width: 18px; height: 6px; background: var(--line); }
.maturity .meter i.on { background: var(--ink); }
.maturity strong { font-size: 20px; letter-spacing: -0.02em; }
.maturity p { color: var(--body); }
@media (min-width: 640px) { .maturity { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .maturity { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Screenshot slot (How PROOF Works) ---------- */
.shot { display: grid; gap: 12px; margin: 0; }
.shot .slot { min-height: clamp(240px, 32vw, 420px); }
.shot figcaption { font-size: 14px; color: var(--muted); }
/* Full-width interface screenshot: spans the content container, keeps the image's natural aspect ratio
   (1644 by 1170 for the approved chat screenshot), never crops, hairline frame, opens full size on tap. */
.shot-full { display: grid; gap: 12px; margin: clamp(48px, 6vw, 80px) 0 0; }
.shot-full-slot { position: relative; aspect-ratio: 1644 / 1170; background: var(--surface); border: 1px solid var(--line); }
.shot-full-slot .slot-label { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.shot-full-link { display: block; border: 1px solid var(--line); cursor: zoom-in; }
.shot-full-link img { display: block; width: 100%; height: auto; object-fit: contain; }
.shot-full figcaption { font-size: 14px; color: var(--muted); text-align: center; font-style: italic; }
/* Footnote-style lines under a visual are set in italic (Erik's call). */
.note-italic { font-style: italic; }

/* What the firm builds (How PROOF Works): black section, gray (#bebbbc, the light --mute token) for
   secondary text and dividers (Erik's call). The slot keeps the graph screenshot's 1189 by 805 shape. */
.kg-section { --kg-gray: #bebbbc; }
.kg-section .kg-slot { aspect-ratio: 1189 / 805; background: var(--surface); border-color: var(--kg-gray); }
.kg-section .kg-slot .slot-label { color: var(--kg-gray); }
.kg-section .kg-link { border-color: var(--kg-gray); }
.kg-section .kg-caption { color: var(--kg-gray); text-align: left; max-width: 80ch; line-height: 1.6; }
.kg-section .inline-callout { border-top-color: var(--kg-gray); }
.kg-explain { margin-top: clamp(32px, 4vw, 48px); display: grid; gap: 16px; max-width: 80ch; }
.kg-explain .body { color: #fafafa; max-width: none; }
.kg-privacy { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--kg-gray); font-size: 14px; line-height: 1.6; color: var(--kg-gray); }

/* How PROOF Works: a second subsection inside one section, set apart by a hairline. */
.subsection { margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--body); }
/* How PROOF Works hero: a short supporting line under the lede, set off by a green-free hairline. */
.hero-callout { margin-top: 24px; padding-left: 16px; border-left: 2px solid var(--ink); font-size: clamp(17px, 1.4vw, 19px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); max-width: 60ch; }
/* Three-part value block (How PROOF Works): hairline-topped columns, not cards. */
.value3 { list-style: none; display: grid; gap: 32px; }
.value3 li { border-top: 1px solid var(--ink); padding-top: 24px; }
.value3 .h3 { margin-bottom: 12px; }
@media (min-width: 960px) { .value3 { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
/* Four parts sit two by two on desktop rather than in four narrow columns (Erik's call). */
@media (min-width: 720px) { .value3.two-by-two { grid-template-columns: repeat(2, 1fr); gap: 40px 64px; } }

/* ---------- Across the job (For Construction Firms): eight areas on black, gray dividers,
   green numbers (Erik's call). Four by two on wide desktop, two on tablet, one on phone. ---------- */
.job8 { list-style: none; display: grid; gap: 0 40px; }
.job8 li { border-top: 1px solid var(--mute); padding: 24px 0 32px; }
.job8 .cell-num { color: var(--green); }
.job8 .h3 { margin: 12px 0 10px; }
.inverse .job8 .body { color: var(--line); }
@media (min-width: 640px) { .job8 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .job8 { grid-template-columns: repeat(4, 1fr); } }
/* Deployment Options (Erik's call): hero notes, the comparison on black with gray dividers and green column
   heads, and two equal-weight buttons in the closing band. */
.hero-notes { margin-top: clamp(40px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 12px; max-width: 80ch; }
.hero-notes .body { max-width: none; }
.glance-dark .compare th, .glance-dark .compare td { border-bottom-color: #bebbbc; }
.glance-dark .compare thead th { color: var(--green); }
.glance-dark .compare td { color: var(--body); }
.glance-dark .compare tbody th { color: #fafafa; }
.glance-dark .price-line { color: #fafafa; }
.equal-buttons .btn { min-width: 280px; justify-content: center; }

/* How PROOF Works closing: headline and buttons on the left, text and security link on the right. */
.control-close { display: grid; gap: 32px; }
.control-close .cc-buttons { margin-top: 0; }
@media (min-width: 960px) {
  .control-close { grid-template-columns: 1fr 1fr; grid-template-areas: "head body" "buttons body"; column-gap: 80px; row-gap: 0; }
  .control-close .cc-head { grid-area: head; }
  .control-close .cc-body { grid-area: body; }
  .control-close .cc-buttons { grid-area: buttons; align-self: end; }
}
/* Green primary button for a black closing section (Erik's call). */
.inverse .btn-primary.btn-green { background: var(--green); border-color: var(--green); color: #000; }
.inverse .btn-primary.btn-green:hover { background: var(--paper); border-color: var(--paper); }

/* ---------- Role rows (For Construction Firms) ---------- */
.role-rows { display: grid; }
.role-row { display: grid; gap: 20px 64px; padding-block: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.role-row:last-child { border-bottom: 1px solid var(--line); }
.role-row .h3 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 14px; }
.role-row .body { margin-bottom: 20px; }
@media (min-width: 960px) { .role-row { grid-template-columns: 1fr 1.4fr; } }
.featured-example { margin-top: 24px; background: var(--ink); color: var(--paper); padding: 28px; display: grid; gap: 12px; }
.featured-example .eyebrow { margin: 0; color: var(--mute); }
.featured-example .figure { font-family: var(--mono); font-size: clamp(26px, 3vw, 38px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.featured-example .figure em { font-style: normal; color: var(--paper); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.featured-example p { color: var(--line); }

/* ---------- Pricing ---------- */
.price-card { display: flex; flex-direction: column; gap: 14px; }
.price-card .eyebrow { margin-bottom: 8px; }
.price { font-family: var(--mono); font-size: clamp(36px, 4.2vw, 52px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.price-from { font-family: var(--sans); display: block; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--muted); margin-bottom: 6px; }
.price-unit { font-family: var(--sans); display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--body); margin-top: 10px; line-height: 1.35; }
.price-card .detail { font-weight: 600; }
.price-card .covers { color: var(--body); padding-top: 14px; border-top: 1px solid var(--line); margin-top: auto; }
.price-card .covers b { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; display: block; color: var(--muted); margin-bottom: 6px; }
.pricing-notes { display: grid; gap: 14px; margin-top: 32px; }
/* Pricing entry options (Erik's call): small labeled lists inside a price card, and three getting-started columns. */
.covers-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.entry-lists { display: grid; gap: 20px; }
.begin3 { display: grid; gap: 48px; }
.begin3 .cta-row { margin-top: 28px; }
@media (min-width: 960px) {
  .begin3 { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  /* Columns stretch to the same height and the buttons sit on one line along the bottom (Erik's call). */
  .begin3 > div { display: flex; flex-direction: column; }
  .begin3 .steps { flex: 1; grid-auto-rows: 1fr; }
}
.pricing-notes p { color: var(--body); }

/* ---------- FAQ ---------- */
.faq-group + .faq-group { margin-top: clamp(48px, 6vw, 72px); }
.faq-layout { display: grid; gap: 24px 64px; }
@media (min-width: 960px) { .faq-layout { grid-template-columns: 1fr 2.4fr; } .faq-layout .h3 { position: sticky; top: calc(var(--header-h) + 24px); } }
.faq-list { border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; line-height: 1.4;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after, .faq-list summary::before {
  content: ""; position: absolute; right: 6px; top: 33px; width: 14px; height: 1.5px; background: var(--ink); transition: transform .15s;
}
.faq-list summary::before { transform: rotate(90deg); }
.faq-list details[open] summary::before { transform: rotate(0deg); }
.faq-list .answer { padding: 0 0 24px; color: var(--body); max-width: 68ch; }

/* ---------- Contact form ---------- */
.contact-grid { display: grid; gap: 48px; }
@media (min-width: 1100px) { .contact-grid { grid-template-columns: 1fr 1.6fr; gap: 80px; } }
.inquiry { border-top: 1px solid var(--ink); padding-top: 32px; }
.inquiry .h3 { font-size: 26px; margin-bottom: 8px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.path-group legend { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 20px; }
.paths { display: grid; gap: 8px; }
@media (min-width: 640px) { .paths { grid-template-columns: 1fr 1fr; } }
.path-option { position: relative; }
.path-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.path-option label {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); cursor: pointer; height: 100%; font-weight: 500; line-height: 1.4;
}
.path-option label::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--paper); }
.path-option input:checked + label { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.path-option input:checked + label::before { padding: 3px; background: var(--ink); background-clip: content-box; }
.path-option input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--green); }
/* Fields in a two-column row start at the same top edge. Hints and error
   messages sit below their input, so they only add height underneath it. */
.fields { display: grid; gap: 22px; margin-top: 36px; align-items: start; }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } .fields .full { grid-column: 1 / -1; } }
.field { display: grid; gap: 6px; align-content: start; }
.field label, .field .label { font-weight: 600; font-size: 15px; }
.field .opt { font-weight: 400; color: var(--muted); }
.field .help { font-size: 13px; line-height: 1.45; color: var(--muted); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid var(--muted); border-radius: var(--radius); background: var(--paper); font-size: 16px;
}
.field textarea { min-height: 112px; resize: vertical; }
.field select { appearance: none; padding-right: 40px; }
/* Select chevron drawn with two hairline borders, so no image is needed. */
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 17px; top: 19px; width: 6px; height: 6px; pointer-events: none;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--alert); outline: 1px solid var(--alert); outline-offset: -2px; }
.error-msg { color: var(--alert); font-size: 14px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.error-msg::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; background: var(--alert); color: var(--paper); font-size: 11px; font-weight: 700; transform: translateY(2px); }
.error-msg[hidden] { display: none; }
/* Dark mode: alert on paper is 4.2:1, under AA for 14px text, so the message text is ink and the
   marker is an alert-outlined square (non-text contrast only needs 3:1). */
html.dark .error-msg { color: var(--ink); }
html.dark .error-msg::before { background: none; border: 1px solid var(--alert); color: var(--ink); }
.field ::placeholder, .field::placeholder { color: var(--muted); opacity: 1; }
.checks { display: grid; gap: 8px; margin-top: 4px; }
@media (min-width: 640px) { .checks { grid-template-columns: 1fr 1fr; } }
.check { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }
.extra { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.extra[hidden] { display: none; }
.extra .extra-title { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.extra .fields { margin-top: 20px; }
.form-actions { margin-top: 36px; display: grid; gap: 14px; justify-items: start; }
.form-actions .btn { min-width: 160px; }
.form-status { margin-top: 28px; border: 1px solid var(--alert); padding: 24px; display: grid; gap: 10px; justify-items: start; }
.form-status[hidden] { display: none; }
.form-success { margin-top: 0; border-color: var(--ink); align-self: start; }
.form-status h3 { font-size: 20px; }
.form-status p { color: var(--body); }
.form-status a { font-weight: 600; }
.direct-email { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--body); }
.direct-email a { color: var(--ink); font-weight: 600; }

/* ---------- Final CTA band ---------- */
.cta-band { padding-block: clamp(72px, 10vw, 140px); }
.cta-band .h2 { max-width: 20ch; }
.cta-band .body { margin-top: 20px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding-top: clamp(56px, 7vw, 88px); }
.footer-grid { display: grid; gap: 40px; padding-bottom: 56px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-brand .brand img { width: 118px; }
.footer-brand p { margin-top: 18px; color: var(--line); max-width: 36ch; }
.footer-brand a { color: var(--paper); text-underline-offset: 3px; }
/* FAQ hero on black: green eyebrow, gray (#bebbbc) supporting line, outlined white secondary button. */
/* Also used for the Pricing hero (.dark-hero), Erik's call. */
.faq-hero, .dark-hero { padding-block: clamp(80px, 11vw, 152px); }
.faq-hero .eyebrow, .dark-hero .eyebrow { color: var(--green); }
.faq-hero .lede, .dark-hero .lede { color: #bebbbc; }
.faq-hero .lede a { color: #fafafa; text-underline-offset: 3px; }

/* Footer column labels in PROOF green (Erik's call). */
.footer-col .eyebrow { color: var(--green); margin-bottom: 16px; }
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { text-decoration: none; color: var(--line); }
.footer-col a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 8px 28px; padding-block: 24px 32px; border-top: 1px solid var(--body);
  font-size: 12.5px; color: var(--mute);
}
.footer-bottom a { color: var(--mute); text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--paper); }

/* ---------- 404 ---------- */
.notfound { min-height: 50vh; display: flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .dot { color: CanvasText; }
  .btn { border: 1px solid ButtonText; }
}

/* ---------- Photo background test: "What's changing" (Erik's request, a stock-photo exception) ----------
   To roll back, remove the `photo-bg` class from that section in home.html; this block then does nothing.
   The section uses the dark tokens in both themes, so its text stays white over the darkened photo. */
.photo-bg {
  --ink: #fafafa; --paper: #121212; --body: #cccccc; --line: #333333; --hairline: #292929; --mute: #666666; --muted: #a6a6a6;
  position: relative; isolation: isolate; background: #000; color: var(--ink); border-top-color: #000;
}
.photo-bg::before, .photo-bg::after { content: ""; position: absolute; inset: 0; z-index: -1; }
/* Desaturated and darkened photo, kept on the central upward view and the opening in the sky. */
.photo-bg::before {
  background: url("/assets/whats-changing-bg.jpg") 50% 30% / cover no-repeat;
  filter: grayscale(.9) brightness(.8);
}
.photo-bg::after { background: rgba(0, 0, 0, .7); }
.photo-bg .lede { color: var(--body); }
.photo-bg .ticks li { color: var(--ink); }
.photo-bg .stat-pair { background: none; border: 0; gap: 16px; }
.photo-bg .stat { background: rgba(0, 0, 0, .55); border: 1px solid var(--line); }
.photo-bg .stat .stat-num { color: var(--green); }
@media (max-width: 719px) { .photo-bg::before { background-position: 50% 20%; } }

/* ---------- Review fixes ---------- */
figure { margin: 0; }
.stairs .val { white-space: nowrap; }
@media (max-width: 639px) {
  .stairs li { grid-template-columns: 1fr; gap: 8px; }
  .usage-table tr.total .v { font-size: 20px; }
}
.extra > legend { float: left; width: 100%; }
.extra > legend + * { clear: both; }