/* PageVerified component layouts; canonical tokens live in styles.css. */

.directory-page { --ink: var(--attest-bg); --ink-2: var(--attest-surface); --ink-3: var(--attest-raised); --hairline: var(--attest-border); --hairline-soft: var(--attest-border); --paper: var(--attest-text); --paper-dim: var(--attest-secondary); --paper-faint: var(--attest-muted); --seal: var(--attest-accent); --seal-bright: var(--attest-accent-hover); --seal-deep: var(--attest-control-border); --seal-tint: var(--attest-accent-wash); --verify: var(--attest-success); background: var(--attest-bg); color: var(--attest-text); font: 400 16px/26px var(--sans); -webkit-font-smoothing: antialiased; }

.directory-page main { display: block; }

.directory-shell { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }

.directory-page ::selection { background: var(--attest-primary); color: var(--attest-on-primary); }

.directory-page :focus-visible { outline: 2px solid var(--attest-focus); outline-offset: 3px; }

/* ---------- header ---------- */

.directory-page .site-header.directory-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 24px; padding: 0 24px; min-height: 72px; background: var(--attest-bg); border-bottom: 1px solid var(--hairline); }

.directory-header .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--paper); margin-right: auto; }

.directory-header .brand-mark { width: 24px; height: 24px; align-self: center; }
.directory-header .brand picture { display: block; line-height: 0; }
.directory-header .brand-logo { display: block; height: 34px; width: auto; }

.directory-header .brand span { font: 600 21px/28px var(--sans); letter-spacing: normal; }

.directory-header .brand em { display: none; }

.directory-header .nav-links { display: flex; flex-wrap: wrap; gap: 0 24px; }

.directory-header .nav-links a { display: inline-flex; align-items: center; min-height: 44px; font: 500 14px/22px var(--sans); letter-spacing: normal; text-transform: none; color: var(--paper-dim); text-decoration: none; padding: 8px 0; border-bottom: 1px solid transparent; transition: color 120ms, border-color 120ms; }

.directory-header .nav-links a:hover { color: var(--paper); border-bottom-color: var(--seal); }

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

.directory-page .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font: 500 14px/22px var(--sans); letter-spacing: normal; text-transform: none; text-decoration: none; padding: 10px 16px; border-radius: 6px; border: 1px solid var(--attest-control-border); cursor: pointer; transition: background-color 120ms, border-color 120ms, color 120ms; }

.directory-page .button:active { transform: none; }

.directory-page .button.primary { background: var(--attest-primary); color: var(--attest-on-primary); border-color: var(--attest-primary); }

.directory-page .button.primary:hover { background: var(--attest-accent-hover); border-color: var(--attest-accent-hover); }

.directory-page .button.secondary { background: var(--attest-surface); color: var(--paper); border-color: var(--attest-control-border); }

.directory-page .button.secondary:hover { border-color: var(--seal); color: var(--seal-bright); }

.directory-header-cta { white-space: nowrap; }

/* ---------- kickers, section heads, text links ---------- */

.directory-kicker { font: 500 12px/18px var(--sans); letter-spacing: normal; text-transform: none; color: var(--paper-faint); margin: 0 0 12px; }

.directory-page h1,
.directory-page h2,
.directory-page h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; margin: 0; }

.directory-section { padding: 80px 0 0; }

.directory-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--hairline); }

.directory-section-head::after { content: none; }

.directory-section-head h2 { font-size: clamp(26px, 2.3vw, 32px); line-height: 1.25; }

.directory-section-head > p { max-width: 48ch; margin: 0; color: var(--paper-dim); font: 400 16px/26px var(--sans); }

.directory-text-link { display: inline-flex; align-items: center; min-height: 44px; font: 500 14px/22px var(--sans); letter-spacing: normal; text-transform: none; color: var(--seal); text-decoration: underline; text-underline-offset: 3px; }

.directory-text-link:hover { color: var(--seal-bright); border-bottom-color: var(--seal-bright); }

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

.directory-hero { display: block; padding: 80px 0 0; }

.directory-hero-copy .directory-kicker { margin-bottom: 22px; }

.directory-hero-copy h1,
.directory-hero-copy .directory-hero-title { font-size: clamp(26px, 2.3vw, 32px); line-height: 1.25; font-weight: 600; max-width: 38ch; }

.directory-hero-copy h1 + p { font: 400 16px/26px var(--sans); color: var(--paper-dim); margin: 16px 0 0; }

.directory-search { margin-top: 24px; }

.directory-search label { display: block; font: 500 14px/22px var(--sans); color: var(--paper-dim); margin-bottom: 8px; }

.directory-search div { display: flex; max-width: 600px; border: 1px solid var(--attest-control-border); border-radius: 6px; background: var(--ink-2); }

.directory-search div:focus-within { border-color: var(--seal); }

.directory-search input { flex: 1; min-width: 0; min-height: 44px; background: transparent; border: 0; color: var(--paper); font: 400 16px/26px var(--sans); padding: 12px; }

.directory-search input::placeholder { color: var(--paper-faint); }

.directory-search .button { border-radius: 0 6px 6px 0; }

.directory-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* the docket: a cream paper receipt on the ink */

.verification-docket { background: var(--ink-2); color: var(--paper); border: 1px solid var(--hairline); border-radius: 14px; padding: 0 0 8px; font-family: var(--sans); }

.verification-docket::before { content: none; }

.verification-docket .docket-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--hairline); }

.directory-page .verification-docket .docket-head span { font: 500 12px/18px var(--sans); color: var(--paper-dim); }

.verification-docket .docket-head strong { font: 500 12px/18px var(--sans); color: var(--attest-success); background: var(--ink-2); }

.verification-docket .docket-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); font: 400 14px/22px var(--sans); }

.directory-page .verification-docket .docket-row span { color: var(--paper-dim); }

.directory-page .verification-docket .docket-row strong { font-weight: 500; color: var(--paper); }

.directory-page .verification-docket .docket-muted { color: var(--paper-faint); }

.verification-docket > p { padding: 16px; margin: 0; font: 400 14px/22px var(--sans); color: var(--paper-dim); }

/* ---------- stats band ---------- */

.directory-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 48px; border-block: 1px solid var(--hairline); background: var(--ink-2); padding: 20px 24px; }

.directory-stats > div { display: flex; align-items: center; gap: 12px; }

.directory-stats > div + div { border: 0; }

.directory-stats strong { font: 600 20px/28px var(--sans); font-variant-numeric: tabular-nums; color: var(--paper); }

.directory-stats span { font: 400 14px/22px var(--sans); color: var(--paper-dim); }

/* ---------- tool cards ---------- */

.directory-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.directory-card-no-image .directory-card-image { aspect-ratio: auto; min-height: 72px; display: flex; align-items: center; padding: 16px 24px; gap: 12px; background: var(--ink-2); }
.directory-card-no-image .directory-card-image strong { position: static; margin-left: auto; }
.directory-tool-card { min-width: 0; background: var(--ink-2); border: 1px solid var(--hairline); border-radius: 10px; overflow: clip; transition: border-color 120ms; }

.directory-tool-card:hover { border-color: var(--attest-control-border); }

.directory-card-link { display: block; text-decoration: none; color: inherit; height: 100%; }

.directory-card-image { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-3); border-bottom: 1px solid var(--hairline); }

.directory-card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

.directory-card-image span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font: 600 16px/26px var(--sans); color: var(--paper-dim); background: var(--ink-3); border-radius: 6px; user-select: none; }

/* per-category tint behind monogram fallbacks */

.directory-card-image strong { position: absolute; right: 16px; bottom: 16px; font: 500 12px/18px var(--sans); color: var(--paper); background: var(--ink-2); border: 1px solid var(--hairline); padding: 4px 8px; border-radius: 6px; }

.directory-card-copy { padding: 24px; }

.directory-card-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; font: 500 12px/18px var(--sans); color: var(--paper-faint); margin-bottom: 12px; }

.directory-card-copy h3 { font-size: 22px; font-weight: 600; line-height: 28px; }

.directory-card-copy p { margin: 8px 0 12px; color: var(--paper-dim); font-size: 16px; line-height: 26px; }

.directory-card-copy small { font: 500 12px/18px var(--sans); color: var(--paper-faint); }

/* featured: gold docket edge */

.directory-tool-card-featured { border-color: var(--seal); }

.directory-tool-card-featured .directory-card-image strong { background: var(--ink-2); color: var(--paper); }

.directory-featured-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.directory-featured-empty { display: grid; gap: 12px; align-content: start; border: 1px solid var(--hairline); border-radius: 10px; background: var(--ink-2); padding: 24px; }

.directory-featured-empty > div span { display: block; font: 500 12px/18px var(--sans); color: var(--paper-faint); margin-bottom: 8px; }

.directory-featured-empty > div strong { font: 600 22px/28px var(--sans); }

.directory-featured-empty p { margin: 0; color: var(--paper-dim); font: 400 16px/26px var(--sans); max-width: 62ch; }

.directory-featured-empty .button { justify-self: start; margin-top: 8px; }

/* ---------- category cards: ledger index ---------- */

.directory-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 16px; }

.directory-category-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--ink-2); border: 1px solid var(--hairline); border-radius: 10px; text-decoration: none; color: var(--paper); transition: border-color 120ms; }

.directory-category-card::after { content: none; }

.directory-category-card:hover { border-color: var(--attest-control-border); }

.directory-category-card span { font: 500 12px/18px var(--sans); color: var(--seal); }

.directory-category-card h3 { font-size: clamp(20px, 1.6vw, 22px); font-weight: 600; line-height: 28px; margin-top: 8px; }

.directory-category-card p { margin: 0; font-size: 16px; color: var(--paper-dim); line-height: 26px; }

.directory-category-card strong { margin-top: auto; font: 500 12px/18px var(--sans); color: var(--paper-faint); transition: color 120ms; }

.directory-category-card:hover strong { color: var(--seal-bright); }

.directory-category-index .directory-category-card { min-height: 190px; }

/* ---------- launch ledger / day groups ---------- */

.directory-launch-ledger { display: flex; flex-direction: column; gap: 44px; }

.directory-day > h2 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--seal);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 12px;
  margin-bottom: 22px;
}

.directory-feed-links { display: flex; gap: 22px; margin-top: 30px; }

/* ---------- page hero (inner pages) ---------- */

.directory-page-hero { padding: 48px 0 32px; }

.directory-page-hero h1 { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.15; max-width: 28ch; }

.directory-page-hero > p { color: var(--paper-dim); font: 400 16px/26px var(--sans); max-width: 68ch; margin: 16px 0 0; }

/* ---------- tool page ---------- */

.directory-tool-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 56px;
  align-items: start;
  padding: 64px 0 30px;
}

.directory-tool-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: 18px;
}

.directory-tool-meta a { color: var(--seal); text-decoration: none; }
.directory-tool-meta a:hover { color: var(--seal-bright); }
.directory-tool-meta span { color: var(--paper-faint); }
.directory-tool-meta strong { color: var(--attest-on-primary); background: var(--seal); padding: 2px 8px; border-radius: 2px; }

.directory-tool-hero h1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.05; }

.directory-tool-tagline {
  font-family: var(--body-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 21px;
  color: var(--paper-dim);
  margin: 16px 0 0;
  max-width: 54ch;
}

.directory-tool-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.directory-affiliate-note {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--paper-faint);
  max-width: 58ch;
  margin: 14px 0 0;
}

/* the seal: circular gold stamp */

.attested-seal {
  justify-self: end;
  width: 210px;
  aspect-ratio: 1;
  border: 2px solid var(--seal);
  border-radius: 50%;
  outline: 1px solid var(--seal-deep);
  outline-offset: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 26px;
  transform: none;
  background: radial-gradient(circle, var(--seal-tint), transparent 72%);
}

.attested-seal span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--seal);
}

.attested-seal strong { font-size: 34px; line-height: 1; color: var(--seal-bright); }

.attested-seal p { margin: 2px 0 0; font-family: var(--mono); font-size: 10.5px; color: var(--paper-dim); }

.attested-seal small { font-size: 9.5px; line-height: 1.45; color: var(--paper-faint); font-family: var(--mono); }

.directory-tool-image { margin: 26px auto 0; }

.directory-tool-image img {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  display: block;
}

.directory-tool-image figcaption {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--paper-faint);
  margin-top: 8px;
}

.directory-tool-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  padding: 56px 0 8px;
}

.directory-tool-body article h2 { font-size: 27px; line-height: 1.2; margin-bottom: 16px; }

.directory-tool-body article > p { color: var(--paper-dim); font-size: 17px; max-width: 65ch; }

.directory-tool-body dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 30px 0 0;
  border-top: 1px solid var(--hairline);
}

.directory-tool-body dl > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline-soft);
}

.directory-tool-body dt {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--paper-faint);
  margin-bottom: 5px;
}

.directory-tool-body dd { margin: 0; font-size: 15.5px; }
.directory-tool-body dd a { color: var(--seal); text-decoration: none; }

/* verification record docket (tool page): paper again */

.directory-checks { background: var(--ink-2); color: var(--paper); border: 1px solid var(--hairline); border-radius: 10px; font-family: var(--sans); align-self: start; }
.directory-checks::before { content: none; }
.directory-checks .docket-head, .directory-checks .docket-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); font: 400 14px/22px var(--sans); }
.directory-page .directory-checks .docket-head span, .directory-page .directory-checks .docket-head strong, .directory-page .directory-checks .docket-row strong { color: var(--paper); font-weight: 500; }
.directory-page .directory-checks .docket-row span, .directory-checks > p { color: var(--paper-dim); }
.directory-checks > p { padding: 16px; margin: 0; font: 400 14px/22px var(--sans); }

/* ---------- badge block ---------- */

.directory-badge-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 56px;
  align-items: start;
  padding: 64px 0;
  margin-top: 56px;
  border-top: 1px solid var(--hairline);
}

.directory-badge-block h2 { font-size: 30px; margin-bottom: 14px; }
.directory-badge-block p { color: var(--paper-dim); max-width: 55ch; }

.directory-badge-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 24px;
}

.directory-badge-preview label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--paper-faint);
}

.directory-badge-preview textarea {
  width: 100%;
  background: var(--ink);
  color: var(--paper-dim);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  padding: 12px;
  resize: none;
}

/* ---------- submit form ---------- */

.directory-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 64px;
  padding: 24px 0 72px;
  align-items: start;
}

.directory-submit-form { display: block; }

.directory-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}

.directory-form-grid label,
.directory-submit-form > label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--paper-dim);
}

.directory-field-wide { grid-column: 1 / -1; }

.directory-page input[type="text"],
.directory-page input[type="url"],
.directory-page input[type="email"],
.directory-page input[type="search"],
.directory-page select,
.directory-page textarea {
  min-height: 44px;
  background: var(--ink-2);
  border: 1px solid var(--attest-control-border);
  border-radius: 6px;
  color: var(--paper);
  font: 400 16px/26px var(--sans);
  padding: 12px;
  transition: border-color 120ms;
}
.directory-page input:focus,
.directory-page select:focus,
.directory-page textarea:focus { border-color: var(--seal); }

.directory-declaration {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--body-serif) !important;
  font-size: 15px !important;
  color: var(--paper-dim) !important;
  margin-top: 22px;
  line-height: 1.5;
}

.directory-declaration input { accent-color: var(--seal); margin-top: 3px; }

.directory-honeypot { position: absolute; left: -9999px; opacity: 0; }

.directory-form-status { font: 400 14px/22px var(--sans); color: var(--paper-dim); min-height: 26px; overflow-wrap: anywhere; }

.directory-tier-docket,
.directory-tier-featured {
  border-radius: 4px;
  padding: 26px 28px;
}

.directory-tier-docket {
  background: var(--ink-2);
  border: 1px solid var(--hairline);
}

.directory-tier-featured {
  background: var(--seal-tint);
  border: 1px solid var(--seal-deep);
  margin-top: 22px;
}

.directory-tier-docket h2,
.directory-tier-featured h2 { font-size: 34px; margin: 8px 0 14px; }

.directory-tier-docket ul,
.directory-tier-featured ul {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.directory-tier-docket li,
.directory-tier-featured li {
  font-size: 14.5px;
  color: var(--paper-dim);
  padding: 7px 0 7px 22px;
  border-bottom: 1px dashed var(--hairline-soft);
  position: relative;
}

.directory-tier-docket li::before,
.directory-tier-featured li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--seal);
  font-family: var(--mono);
  font-weight: 500;
}

/* ---------- verification page / method + proof ---------- */

.directory-method { padding-bottom: 26px; }

.directory-proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin: 26px 0;
}

.directory-proof-grid > * {
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 22px;
}

.directory-scope {
  border-left: 3px solid var(--seal);
  background: var(--seal-tint);
  border-radius: 0 4px 4px 0;
  padding: 20px 24px;
  color: var(--paper-dim);
  font-size: 15.5px;
  max-width: 75ch;
}

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

.directory-query-note {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--paper-dim);
  margin: -8px 0 22px;
}

.directory-query-note a { color: var(--seal); }

.directory-empty {
  grid-column: 1 / -1;
  text-align: center;
  border: 1px dashed var(--hairline);
  border-radius: 4px;
  padding: 56px 24px;
}

.directory-empty strong { font-family: var(--serif); font-size: 24px; display: block; margin-bottom: 8px; }
.directory-empty p { color: var(--paper-dim); }
.directory-empty a { color: var(--seal); font-family: var(--mono); font-size: 13px; text-decoration: none; }

.directory-status-chip {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: normal;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--ink-3);
  color: var(--paper-dim);
}

.directory-cta { padding-top: 80px; padding-bottom: 80px; text-align: left; }

.directory-cta h2 { font-size: clamp(26px, 2.3vw, 32px); line-height: 1.25; margin: 8px 0 16px; }

.directory-cta p { color: var(--paper-dim); font: 400 16px/26px var(--sans); max-width: 65ch; margin: 0 0 24px; }

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



.directory-labs-links { flex-basis: 100%; border-top: 1px solid var(--hairline-soft); padding-top: 18px; }

/* ---------- Capture ---------- */

.capture-hero,
.evidence-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; padding: 80px 0 64px; }

.capture-hero h1,
.evidence-hero h1 { font-size: clamp(36px, 3.4vw, 48px); line-height: 1.125; max-width: 22ch; margin: 12px 0 24px; }

.capture-hero-copy > p:not(.directory-kicker),
.evidence-hero > div > p:not(.directory-kicker) { color: var(--paper-dim); font: 400 clamp(18px, 1.4vw, 20px)/1.5 var(--sans); max-width: 48ch; }

.capture-receipt .docket-head, .capture-receipt .docket-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 12px; font: 400 13px/21px var(--mono); }
.capture-receipt .docket-head { border-bottom: 1px solid var(--hairline); }
.capture-receipt .docket-row span { color: var(--paper-faint); }
.capture-receipt .docket-row strong { font-weight: 400; }
.capture-receipt { position: relative; min-width: 0; background: var(--ink-2); color: var(--paper); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: 0 12px 36px rgb(19 32 46 / 8%); padding: 24px; }

.capture-artifact-preview { margin: 0 0 16px; }
.capture-artifact-preview img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); border-radius: 6px; }
.capture-artifact-preview figcaption { margin-top: 8px; color: var(--paper-faint); font: 500 12px/18px var(--sans); overflow-wrap: anywhere; }
.capture-artifact-meta { margin: 0 0 16px; }
.capture-artifact-meta > div { margin-top: 8px; }
.capture-artifact-meta dt { color: var(--paper-faint); font: 500 12px/18px var(--sans); }
.capture-artifact-meta dd { margin: 0; color: var(--paper); font: 400 13px/21px var(--mono); overflow-wrap: anywhere; }
.capture-artifact-meta code { overflow-wrap: anywhere; }
.capture-receipt::before { content: none; }

.capture-receipt-target,
.evidence-url {
  font-family: var(--mono);
  overflow-wrap: anywhere;
}

.capture-receipt-target { border-bottom: 1px solid var(--hairline); padding: 16px 0; margin-bottom: 8px; }

.capture-seal { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--hairline); color: var(--paper-dim); font: 500 14px/22px var(--sans); margin: 16px 0; padding-top: 16px; }

.capture-seal strong { font: inherit; color: var(--attest-success); }
.capture-receipt > p { color: var(--paper-dim); font: 400 14px/22px var(--sans); }

.capture-demo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; border-block: 1px solid var(--hairline); padding-block: 80px; }

.capture-demo h2,
.capture-pricing h2,
.capture-code h2,
.capture-proof h2,
.capture-docs h2,
.evidence-record h2 { font-size: clamp(26px, 2.3vw, 32px); line-height: 1.25; margin: 8px 0 16px; }

.capture-demo-form,
.capture-price-grid article,
.capture-code-grid article,
.capture-proof-grid article,
.capture-docs-body article,
.evidence-record { background: var(--ink-2); border: 1px solid var(--hairline); border-radius: 10px; }

.capture-demo-form { display: grid; gap: 16px; padding: 24px; min-width: 0; }
.capture-demo-form label,
.capture-price-grid label { display: grid; gap: 8px; font: 500 14px/22px var(--sans); color: var(--paper-dim); }
.capture-demo-form input,
.capture-demo-form select,
.capture-price-grid input { width: 100%; min-height: 44px; background: var(--ink-2); color: var(--paper); border: 1px solid var(--attest-control-border); border-radius: 6px; padding: 12px; font: 400 16px/26px var(--sans); }
.capture-check { min-height: 44px; display: flex !important; align-items: center; grid-template-columns: auto 1fr; }
.capture-check input { width: 20px; height: 20px; min-height: 20px; flex-shrink: 0; accent-color: var(--seal); }

.capture-key-result { min-width: 0; padding: 12px; background: var(--ink-3); color: var(--paper); border: 1px solid var(--hairline); border-radius: 6px; }
.capture-key-result code { display: block; font: 400 13px/21px var(--mono); overflow-wrap: anywhere; }
.capture-key-result[hidden] { display: none; }
.capture-demo-result[hidden] { display: none; }
.capture-demo-result { display: grid; gap: 12px; border-top: 1px solid var(--hairline); padding-top: 16px; min-width: 0; }
.capture-demo-result p { margin: 0; }
.capture-demo-result a { display: inline-flex; align-items: center; min-height: 44px; color: var(--seal); font: 500 14px/22px var(--sans); }
.capture-demo-result code,
.evidence-record code { overflow-wrap: anywhere; }

.capture-pricing,
.capture-code,
.capture-proof { padding-top: 80px; padding-bottom: 0; }
.capture-proof { padding-bottom: 80px; }

.capture-price-grid,
.capture-code-grid,
.capture-proof-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }

.capture-docs-body #payouts { background: var(--seal-tint); border: 1px solid var(--seal); border-radius: 10px; padding: 24px; }
.capture-price-grid article { grid-column: span 3; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.capture-price-grid .capture-price-free { border-color: var(--seal); }
.capture-price-grid article > span,
.capture-code-grid article > span { color: var(--paper-faint); font: 500 12px/18px var(--sans); }
.capture-price-grid h3 { font-size: 22px; line-height: 28px; margin: 0; }
.capture-price-grid p { color: var(--paper-dim); margin: 0; }
.capture-price-grid article > .button { margin-top: auto; }
.capture-price-grid form { display: grid; gap: 12px; margin-top: auto; padding-top: 12px; }

.capture-checkout-disabled { cursor: not-allowed; text-align: center; color: var(--paper-dim); background: var(--ink-3); }
.capture-claim-explainer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--ink-2); padding: 24px; }
.capture-claim-explainer h3 { margin: 6px 0; }
.capture-claim-explainer p { color: var(--paper-dim); margin-bottom: 0; }

.capture-claim-shell { min-height: 72vh; display: grid; place-items: center; padding-top: 80px; padding-bottom: 100px; }
.capture-claim-receipt { width: min(680px, 100%); transform: none; padding: clamp(30px, 6vw, 58px); }
.capture-claim-receipt h1 { font-size: clamp(34px, 6vw, 60px); margin: 18px 0; }
.capture-claim-status { color: var(--seal); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: normal; }
.capture-claim-session { border-bottom: 1px solid var(--hairline); padding-bottom: 18px; font-family: var(--mono); overflow-wrap: anywhere; }
.capture-claim-key { overflow-wrap: anywhere; white-space: pre-wrap; border: 1px solid var(--attest-control-border); background: var(--ink-3); color: var(--paper); padding: 16px; font: 400 16px/26px var(--mono); }

.capture-code-grid article { grid-column: span 6; min-width: 0; padding: 24px; }
.capture-code-grid pre,
.capture-docs pre { min-width: 0; max-width: 100%; overflow-x: auto; white-space: pre; background: var(--ink-3); border: 1px solid var(--hairline); border-radius: 6px; margin: 16px 0 0; padding: 16px; }
.capture-code-grid code,
.capture-docs code { font: 400 13px/21px var(--mono); color: var(--paper); text-transform: none; letter-spacing: normal; }
.capture-code-grid p { color: var(--paper-dim); font-size: 16px; line-height: 26px; }

.capture-proof { padding-bottom: 80px; }
.capture-proof-grid article { grid-column: span 4; padding: 28px; }
.capture-proof-grid strong { color: var(--seal); font: 400 13px/21px var(--mono); }
.capture-proof-grid h3 { font-size: 22px; line-height: 28px; }
.capture-proof-grid p { color: var(--paper-dim); }

.capture-docs { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 40px; padding-bottom: 80px; }

.capture-docs > nav { position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow-y: auto; align-self: start; display: grid; gap: 4px; }
.capture-docs > nav a { display: flex; align-items: center; min-height: 44px; color: var(--paper-dim); border-left: 2px solid var(--hairline); padding: 8px 12px; font: 500 14px/22px var(--sans); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--seal); border-bottom-color: var(--seal); }
.capture-docs > nav a:hover { border-color: var(--seal); color: var(--seal-bright); }
.capture-docs-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; min-width: 0; }
.capture-docs-body dl.techstack-coverage > div { grid-template-columns: minmax(140px, 200px) 1fr; }
.capture-docs-body article { min-width: 0; padding: 24px 0 0; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; background: var(--ink); scroll-margin-top: 96px; }
.capture-docs-body article p { max-width: 76ch; color: var(--paper-dim); line-height: 26px; }
.capture-docs-body dl > div { display: grid; grid-template-columns: 64px 1fr; gap: 16px; border-top: 1px solid var(--hairline); padding: 14px 0; }
.capture-docs-body dt { color: var(--seal-bright); font-family: var(--mono); }
.capture-docs-body dd { color: var(--paper-dim); margin: 0; }

.evidence-receipt { transform: none; }
.evidence-record { padding: clamp(28px, 5vw, 54px); margin-bottom: 60px; }
.evidence-record > div:first-child { border-bottom: 1px solid var(--hairline); padding-bottom: 28px; }
.evidence-record > div:first-child code { display: block; color: var(--seal-bright); font-size: clamp(12px, 2vw, 16px); margin-top: 12px; }
.evidence-record dl { margin: 34px 0; }
.evidence-record dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; border-top: 1px solid var(--hairline-soft); padding: 15px 0; }
.evidence-record dt { color: var(--paper-faint); font-family: var(--mono); font-size: 12px; }
.evidence-record dd { color: var(--paper-dim); margin: 0; overflow-wrap: anywhere; }
.evidence-record a:not(.button) { color: var(--seal-bright); }
.evidence-note { color: var(--paper-faint); font-size: 13px; margin-top: 18px; }

.capture-page :focus-visible { outline: 2px solid var(--seal-bright); outline-offset: 3px; }

/* ---------- SEO directory + Capture guides ---------- */

.seo-category-guide { margin-bottom: 68px; }
.seo-category-guide h2 { margin: 6px 0 14px; }
.seo-category-guide > p { line-height: 1.75; margin: 0; }

.seo-link-ledger { padding-top: 58px; padding-bottom: 72px; }
.seo-link-ledger > h2 { font-size: clamp(30px, 4vw, 48px); margin: 8px 0 24px; }
.seo-link-ledger > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
.seo-link-ledger > div > a { display: grid; gap: 5px; color: var(--paper); border-bottom: 1px solid var(--hairline); padding: 16px 18px 16px 0; text-decoration: none; }
.seo-link-ledger > div > a:nth-child(even) { border-left: 1px solid var(--hairline); padding-left: 18px; }
.seo-link-ledger > div > a:hover strong { color: var(--seal-bright); }
.seo-link-ledger span { color: var(--paper-dim); font-size: 13px; line-height: 1.5; }
.seo-faq { padding-bottom: 96px; }
.seo-faq .directory-proof-grid > article { min-height: 190px; }
.seo-faq h3 { font-size: 21px; margin-top: 0; }
.seo-faq p { color: var(--paper-dim); line-height: 1.65; }

.seo-alternatives-hero { align-items: center; }
.seo-reference-tool { background: var(--ink-2); border: 1px solid var(--hairline); border-radius: 4px; padding: clamp(24px, 4vw, 38px); }
.seo-reference-tool h2 { font-size: clamp(28px, 4vw, 42px); margin: 8px 0 10px; }
.seo-reference-tool > p:not(.directory-kicker) { color: var(--paper-dim); line-height: 1.6; }
.seo-reference-tool img { display: block; max-width: 100%; height: auto; margin-top: 24px; }
.seo-alternative-list { padding-bottom: 96px; }
.seo-alternative-list > div { display: grid; gap: 18px; }
.seo-alternative-list article { display: grid; grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); background: var(--ink-2); border: 1px solid var(--hairline); border-radius: 4px; padding: clamp(22px, 4vw, 34px); }
.seo-alternative-list article span { color: var(--seal-bright); font-family: var(--mono); font-size: 11px; letter-spacing: normal; text-transform: none; }
.seo-alternative-list h3 { font-size: 27px; margin: 8px 0 0; }
.seo-alternative-list h3 a { color: var(--paper); text-decoration: none; }
.seo-alternative-list h3 a:hover { color: var(--seal-bright); }
.seo-alternative-list ul { display: grid; gap: 14px; color: var(--paper-dim); line-height: 1.65; margin: 0; padding-left: 22px; }
.seo-alternative-list li::marker { color: var(--seal); }

.capture-guides { padding-top: 32px; }
.capture-guides .capture-proof-grid article { grid-column: span 3; }
.capture-guides .directory-text-link { display: inline-block; margin-top: 16px; }
.seo-comparison { padding-top: 54px; }
.seo-comparison > h2 { font-size: clamp(32px, 4vw, 52px); margin: 8px 0 26px; }
.seo-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--hairline); border-radius: 10px; }
.seo-table-wrap caption { padding: 12px 16px; text-align: left; color: var(--paper); background: var(--ink-3); font: 500 14px/22px var(--sans); }
.table-scroll-hint { color: var(--paper-faint); font-size: 12px; line-height: 18px; }
.seo-table-wrap table { width: 100%; min-width: 720px; border-collapse: collapse; background: var(--ink-2); }
.seo-table-wrap th,
.seo-table-wrap td { border-bottom: 1px solid var(--hairline); padding: 16px; text-align: left; vertical-align: top; font: 400 14px/22px var(--sans); }
.seo-table-wrap thead th { color: var(--paper); background: var(--ink-3); font: 500 14px/22px var(--sans); }
.seo-table-wrap tbody th { color: var(--paper); font-size: 14px; width: 24%; }
.seo-table-wrap td { color: var(--paper-dim); font-size: 14px; }
.seo-table-wrap tr:last-child th,
.seo-table-wrap tr:last-child td { border-bottom: 0; }
.seo-table-wrap a { color: var(--seal-bright); }
.seo-use-case { max-width: 65ch; padding-top: 30px; padding-bottom: 54px; }
.seo-use-case > p:not(.directory-kicker) { color: var(--paper-dim); font-size: 16px; line-height: 26px; }
.seo-use-case aside { background: var(--seal-tint); border-left: 3px solid var(--seal); margin-top: 34px; padding: 20px 24px; }
.seo-use-case aside strong { color: var(--seal-bright); font-family: var(--mono); font-size: 11px; letter-spacing: normal; text-transform: none; }
.seo-use-case aside p { color: var(--paper-dim); line-height: 1.65; margin-bottom: 0; }

.home-pricing-summary .capture-price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-pricing-summary .capture-price-grid article { grid-column: auto; }

/* ---------- motion & responsive ---------- */

@media (prefers-reduced-motion: reduce) {
  .directory-page * { transition: none !important; animation: none !important; }
}

@media (max-width: 980px) {
  .home-pricing-summary .capture-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .directory-hero { grid-template-columns: 1fr; gap: 48px; padding-top: 48px; }
  .verification-docket { max-width: 420px; transform: none; }
  .directory-tool-hero { grid-template-columns: 1fr; }
  .attested-seal { justify-self: start; }
  .directory-tool-body,
  .directory-badge-block,
  .directory-form-layout { grid-template-columns: 1fr; gap: 40px; }
  .capture-hero,
  .evidence-hero,
  .capture-demo { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 48px; }
  .capture-receipt { max-width: 100%; }
  .capture-docs { grid-template-columns: 192px minmax(0, 1fr); }
  .directory-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capture-price-grid article,
  .capture-proof-grid article { grid-column: span 6; }
  .capture-guides .capture-proof-grid article { grid-column: span 6; }
}

@media (max-width: 700px) {
  .directory-page .site-header.directory-header { position: static; gap: 8px 16px; padding: 12px 16px; flex-wrap: wrap; }
  .directory-header .nav-links { order: 3; flex-basis: 100%; gap: 0 20px; flex-wrap: wrap; }
  .directory-stats { justify-content: flex-start; gap: 16px 24px; }
  .directory-stats > div + div { border: 0; }
  .directory-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .directory-form-grid { grid-template-columns: 1fr; }
  .directory-featured-empty { grid-template-columns: 1fr; }
  .directory-featured-empty .button { grid-row: auto; grid-column: 1; justify-self: start; }
  .directory-shell { width: calc(100% - 32px); }
  .capture-hero,
  .evidence-hero { padding-top: 48px; padding-bottom: 48px; }
  .directory-card-grid { grid-template-columns: minmax(0, 1fr); }
  .directory-section, .directory-hero, .capture-pricing, .capture-code, .capture-proof { padding-top: 48px; }
  .capture-hero h1, .home-capture-hero h1 { font-size: 36px; line-height: 40px; }
  .capture-price-grid article,
  .capture-code-grid article,
  .capture-proof-grid article { grid-column: 1 / -1; }
  .capture-guides .capture-proof-grid article { grid-column: 1 / -1; }
  .seo-link-ledger > div { grid-template-columns: 1fr; }
  .seo-link-ledger > div > a:nth-child(even) { border-left: 0; padding-left: 0; }
  .seo-alternative-list article { grid-template-columns: 1fr; }
  .capture-docs { grid-template-columns: minmax(0, 1fr); }
  .capture-docs-body dl.techstack-coverage > div { grid-template-columns: 1fr; gap: 4px; }
  .capture-docs > nav { position: static; max-height: none; overflow: visible; display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 8px; }
  .capture-docs > nav a { white-space: normal; }
  .evidence-record dl > div { grid-template-columns: 1fr; gap: 5px; }
}

/* Tool reference tables (/tools and /tools/<key>). The marketing comparison tables the
   .seo-table-wrap pattern was built for hold sentences, so they set a 720px floor; these hold
   a field name, a type and one line, so they can sit tighter and need much less sideways
   scrolling on a phone. The wrapper still scrolls rather than the page. */
.capture-docs-body .seo-table-wrap { margin-top: 16px; }
.capture-docs-body .seo-table-wrap table { min-width: 560px; }
.capture-docs-body .seo-table-wrap th,
.capture-docs-body .seo-table-wrap td { padding: 12px 16px; font-size: 14px; line-height: 22px; }
.capture-docs-body .seo-table-wrap tbody th { width: 28%; }
.capture-docs #call h2, .capture-docs-body h2:has(+ pre) { font: 400 22px/30px var(--mono); overflow-wrap: anywhere; }
.capture-docs-body h3 { margin: 24px 0 12px; font-size: 22px; line-height: 28px; }

@media (max-width: 700px) {
  .capture-docs-body .seo-table-wrap table { min-width: 440px; }
  .capture-docs-body .seo-table-wrap th,
  .capture-docs-body .seo-table-wrap td { padding: 12px; }
}

/* The cost + endpoint line under a tool's heading. It is NOT a kicker: a kicker uppercases
   its text, which turns /api/v1/text/stats into /API/V1/TEXT/STATS. */
.tools-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 0; }
.tools-meta span { color: var(--paper); background: var(--ink-3); border: 1px solid var(--hairline); border-radius: 6px; padding: 4px 8px; font: 400 13px/21px var(--mono); }
.tools-meta code { font: 400 13px/21px var(--mono); color: var(--paper); overflow-wrap: anywhere; }

/* ---------- Homepage: Capture leads ---------- */

.home-capture-hero h1 { font-size: clamp(36px, 4.5vw, 64px); line-height: 1.0625; max-width: 17ch; }
.capture-hero-copy > p.home-free-note { color: var(--paper-faint); font: 400 14px/22px var(--sans); }
.home-capture-hero { border-bottom: 1px solid var(--hairline); }
.home-capture-code pre { margin: 16px 0; min-width: 0; max-width: 100%; overflow-x: auto; font: 400 13px/21px var(--mono); white-space: pre; background: var(--ink-3); border-radius: 6px; padding: 16px; }
.home-capture-code code { color: var(--paper); font-weight: 400; }
.home-toolbox-strip a { align-self: center; }
@media (max-width: 700px) {
  .home-pricing-summary .capture-price-grid { grid-template-columns: minmax(0, 1fr); }
  .home-capture-hero { grid-template-columns: minmax(0, 1fr); }
  .home-capture-hero h1 { font-size: 36px; line-height: 40px; }
  .home-capture-code { transform: none; }
}

.directory-feature-this { border-top: 1px solid var(--hairline); padding-top: 32px; padding-bottom: 32px; }
.directory-feature-this p:not(.directory-kicker) { color: var(--paper-dim); max-width: 62ch; }

@media (prefers-color-scheme: dark) { .capture-receipt { box-shadow: 0 12px 36px rgb(0 0 0 / 24%); } }