/* Owned AI parent site.
   Hand-ported from the design pack kit at owned-ai-v2/ui_kits/site/, which is
   React with inline styles. The kit stays the reference: if the two disagree,
   the kit is right and this file is stale. Breakpoints match its useBreakpoint
   exactly, phone < 680 and tablet < 1040, so the two can be compared directly. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg{max-width:100%}
button{font:inherit}

/* ── Icons ─────────────────────────────────────────────────────────────────
   Lucide, self-hosted as masked data URIs. The kit pulls these from unpkg at
   runtime; a company selling auditability should not have its marketing site
   make a third-party request to render an arrow. */
.i{display:inline-block;width:16px;height:16px;flex:0 0 auto;background:currentColor;
   -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
   -webkit-mask-position:center;mask-position:center}
.i-14{width:14px;height:14px}.i-15{width:15px;height:15px}.i-18{width:18px;height:18px}
.i-stamp{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2022h14%22%2F%3E%3Cpath%20d%3D%22M19.27%2013.73A2.5%202.5%200%200%200%2017.5%2013h-11A2.5%202.5%200%200%200%204%2015.5V17a1%201%200%200%200%201%201h14a1%201%200%200%200%201-1v-1.5c0-.66-.26-1.3-.73-1.77Z%22%2F%3E%3Cpath%20d%3D%22M14%2013V8.5C14%207%2015%207%2015%205a3%203%200%200%200-3-3c-1.66%200-3%201-3%203s1%202%201%203.5V13%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2022h14%22%2F%3E%3Cpath%20d%3D%22M19.27%2013.73A2.5%202.5%200%200%200%2017.5%2013h-11A2.5%202.5%200%200%200%204%2015.5V17a1%201%200%200%200%201%201h14a1%201%200%200%200%201-1v-1.5c0-.66-.26-1.3-.73-1.77Z%22%2F%3E%3Cpath%20d%3D%22M14%2013V8.5C14%207%2015%207%2015%205a3%203%200%200%200-3-3c-1.66%200-3%201-3%203s1%202%201%203.5V13%22%2F%3E%3C%2Fsvg%3E")}
.i-circle-slash{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%229%22%20x2%3D%2215%22%20y1%3D%2215%22%20y2%3D%229%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%229%22%20x2%3D%2215%22%20y1%3D%2215%22%20y2%3D%229%22%2F%3E%3C%2Fsvg%3E")}
.i-x{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E")}
.i-menu{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%224%22%20x2%3D%2220%22%20y1%3D%2212%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%224%22%20x2%3D%2220%22%20y1%3D%226%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%224%22%20x2%3D%2220%22%20y1%3D%2218%22%20y2%3D%2218%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%224%22%20x2%3D%2220%22%20y1%3D%2212%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%224%22%20x2%3D%2220%22%20y1%3D%226%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%224%22%20x2%3D%2220%22%20y1%3D%2218%22%20y2%3D%2218%22%2F%3E%3C%2Fsvg%3E")}
.i-file-pen{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.5%2022H18a2%202%200%200%200%202-2V7l-5-5H6a2%202%200%200%200-2%202v9.5%22%2F%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22%2F%3E%3Cpath%20d%3D%22M13.378%2015.626a1%201%200%201%200-3.004-3.004l-5.01%205.012a2%202%200%200%200-.506.854l-.837%202.87a.5.5%200%200%200%20.62.62l2.87-.837a2%202%200%200%200%20.854-.506z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.5%2022H18a2%202%200%200%200%202-2V7l-5-5H6a2%202%200%200%200-2%202v9.5%22%2F%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22%2F%3E%3Cpath%20d%3D%22M13.378%2015.626a1%201%200%201%200-3.004-3.004l-5.01%205.012a2%202%200%200%200-.506.854l-.837%202.87a.5.5%200%200%200%20.62.62l2.87-.837a2%202%200%200%200%20.854-.506z%22%2F%3E%3C%2Fsvg%3E")}
.i-list-checks{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2017%202%202%204-4%22%2F%3E%3Cpath%20d%3D%22m3%207%202%202%204-4%22%2F%3E%3Cpath%20d%3D%22M13%206h8%22%2F%3E%3Cpath%20d%3D%22M13%2012h8%22%2F%3E%3Cpath%20d%3D%22M13%2018h8%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2017%202%202%204-4%22%2F%3E%3Cpath%20d%3D%22m3%207%202%202%204-4%22%2F%3E%3Cpath%20d%3D%22M13%206h8%22%2F%3E%3Cpath%20d%3D%22M13%2012h8%22%2F%3E%3Cpath%20d%3D%22M13%2018h8%22%2F%3E%3C%2Fsvg%3E")}
.i-archive{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%225%22%20x%3D%222%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M4%208v11a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8%22%2F%3E%3Cpath%20d%3D%22M10%2012h4%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%225%22%20x%3D%222%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M4%208v11a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8%22%2F%3E%3Cpath%20d%3D%22M10%2012h4%22%2F%3E%3C%2Fsvg%3E")}
.i-library{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m16%206%204%2014%22%2F%3E%3Cpath%20d%3D%22M12%206v14%22%2F%3E%3Cpath%20d%3D%22M8%208v12%22%2F%3E%3Cpath%20d%3D%22M4%204v16%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m16%206%204%2014%22%2F%3E%3Cpath%20d%3D%22M12%206v14%22%2F%3E%3Cpath%20d%3D%22M8%208v12%22%2F%3E%3Cpath%20d%3D%22M4%204v16%22%2F%3E%3C%2Fsvg%3E")}
.i-pen-line{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22%2F%3E%3Cpath%20d%3D%22M16.376%203.622a1%201%200%200%201%203.002%203.002L7.368%2018.635a2%202%200%200%201-.855.506l-2.872.838a.5.5%200%200%201-.62-.62l.838-2.872a2%202%200%200%201%20.506-.854z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22%2F%3E%3Cpath%20d%3D%22M16.376%203.622a1%201%200%200%201%203.002%203.002L7.368%2018.635a2%202%200%200%201-.855.506l-2.872.838a.5.5%200%200%201-.62-.62l.838-2.872a2%202%200%200%201%20.506-.854z%22%2F%3E%3C%2Fsvg%3E")}
.i-arrow-right{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22%2F%3E%3C%2Fsvg%3E")}
.i-arrow-up-right{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207h10v10%22%2F%3E%3Cpath%20d%3D%22M7%2017%2017%207%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207h10v10%22%2F%3E%3Cpath%20d%3D%22M7%2017%2017%207%22%2F%3E%3C%2Fsvg%3E")}
.i-download{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpolyline%20points%3D%227%2010%2012%2015%2017%2010%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2215%22%20y2%3D%223%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpolyline%20points%3D%227%2010%2012%2015%2017%2010%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2215%22%20y2%3D%223%22%2F%3E%3C%2Fsvg%3E")}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-gutter)}
.wrap--narrow{max-width:860px}
.grid{display:grid}
.stack{display:grid;gap:22px}
.row{display:flex;align-items:center;gap:12px}
.row--wrap{flex-wrap:wrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--page-gutter);top:8px;z-index:60;background:var(--surface);
  padding:10px 14px;border:1px solid var(--border-strong)}

/* ── Type roles ──────────────────────────────────────────────────────────── */
.eyebrow{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-secondary)}
.on-field .eyebrow,.eyebrow--paper{color:var(--field-ink-500)}
.stamp{font:var(--type-stamp);color:var(--text-secondary)}
.lede{font:var(--type-body);font-size:var(--size-body-lg);line-height:1.6;
  color:var(--text-secondary);margin:0;max-width:58ch}

/* Running text at reading measure. The pack had no long-form pattern; the kit
   invented this one and README.md flags it for promotion to a component. */
.prose{display:grid;gap:18px;max-width:66ch;font:var(--type-body);
  font-size:var(--size-body-lg);line-height:1.65;color:var(--ink-700)}
.prose p{margin:0}
.on-field .prose{color:var(--field-ink-500)}

/* ── Sections ────────────────────────────────────────────────────────────── */
.section{padding:72px 0;border-bottom:1px solid var(--border)}
.section--sunken{background:var(--surface-sunken)}
.section--field{background:var(--field-800);border-bottom-color:var(--field-line);color:var(--field-ink-900)}
.section--flush{border-bottom:none}
.section-head{display:grid;gap:14px;max-width:54ch}
.section-head h2{font:var(--type-heading);font-size:34px;margin:0}
.section--field .section-head h2{color:var(--field-ink-900)}
.section--field .section-head .lede,.section--field .lede{color:var(--field-ink-500)}

.page-head{border-bottom:1px solid var(--border);padding:72px 0 56px}
.page-head h1{font:var(--type-display);font-size:52px;letter-spacing:var(--tracking-display);
  margin:0;max-width:24ch}

/* ── Plates and controls ─────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-2);padding:20px}
.card--sunken{background:var(--surface-sunken)}
/* The attested plate takes the chamfer. Radius and chamfer never co-occur. */
.card--attested{border-radius:0;clip-path:var(--clip-chamfer-tr)}
.card--raised{box-shadow:var(--shadow-raise)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-h);
  padding:0 16px;font:var(--weight-medium) var(--size-body-sm)/1 var(--font-text);letter-spacing:.005em;
  border:1px solid transparent;border-radius:var(--radius-1);background:transparent;
  color:var(--text-primary);text-decoration:none;cursor:pointer;transition:var(--transition-control)}
.btn--primary{background:var(--accent);color:var(--text-on-accent)}
.btn--primary:hover{background:var(--accent-hover);color:var(--text-on-accent)}
.btn--secondary{border-color:var(--border-strong);background:var(--surface);color:var(--text-primary)}
.btn--secondary:hover{border-color:var(--ink-400);color:var(--text-primary)}
.btn--ghost{color:var(--accent)}
.btn--sm{height:var(--control-h-sm);padding:0 10px;font-size:var(--size-label)}
.btn--lg{height:var(--control-h-lg);padding:0 22px;font-size:var(--size-body)}
.btn--block{width:100%}
a.btn,a.btn:hover{text-decoration:none}
.section--field .btn--secondary{background:transparent;border-color:var(--field-line);color:var(--field-ink-900)}
.section--field .btn--secondary:hover{border-color:var(--field-ink-400)}

.badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;background:var(--surface-sunken);
  color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius-1);
  font:var(--type-label);font-size:var(--size-micro);letter-spacing:.04em}
.badge--accent{background:var(--accent-quiet);color:var(--seal-900);border-color:transparent}

/* A stage word where a date would go, for products that have no date. */
.stage-stamp{display:inline-flex;align-items:center;font:var(--type-stamp);
  letter-spacing:var(--tracking-stamp);text-transform:uppercase;color:var(--text-secondary);
  border:1px solid var(--border-strong);padding:5px 9px}
.section--field .stage-stamp{color:var(--field-ink-500);border-color:var(--field-line)}

/* ── The attestation device ──────────────────────────────────────────────────
   A ruled line ending in a struck initials plate and a named owner. It replaces
   every use of a leading dot, and it is never a status indicator. */
.attest{display:flex;align-items:center;gap:12px}
.attest__label{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-secondary);white-space:nowrap}
.attest__rule{flex:1;height:1px;background:var(--border)}
.attest__plate{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  flex:0 0 auto;background:var(--text-primary);color:var(--paper-100);
  font:500 10px/1 var(--font-mono);letter-spacing:.04em;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
.attest__name{font:var(--type-body-strong);font-size:var(--size-body-sm);color:var(--text-primary);
  white-space:nowrap}
.attest__meta{font:var(--type-stamp);color:var(--text-secondary);white-space:nowrap}
.attest--chip{display:inline-flex;gap:8px;padding:4px 10px 4px 4px;border:1px solid var(--border);
  background:var(--surface)}
.attest--signoff{flex-direction:column;align-items:stretch;gap:10px}
.attest--signoff .attest__head{display:flex;align-items:center;gap:12px}
.attest--signoff .attest__who{display:flex;align-items:center;gap:10px}
.on-field .attest__label,.on-field .attest__meta{color:var(--field-ink-500)}
.on-field .attest__rule{background:var(--field-line)}
.on-field .attest__plate{background:var(--field-ink-900);color:var(--field-900)}
.on-field .attest__name{color:var(--field-ink-900)}
.on-field .attest--chip{background:var(--field-700);border-color:var(--field-line)}

/* ── Numbered reference list ─────────────────────────────────────────────────
   The system forbids bullets, because the rejected identity's dots read as
   misplaced ones. Every list is numbered in mono instead. */
.reflist{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--border)}
.reflist li{background:var(--surface);padding:14px 18px;display:grid;
  grid-template-columns:52px 1fr;gap:14px;align-items:baseline}
.reflist__n{font:var(--type-stamp);color:var(--accent)}
.reflist__body{display:grid;gap:5px}
.reflist__head{font:var(--type-body-strong);color:var(--text-primary)}
.reflist__sub{font:var(--type-body);font-size:var(--size-body-sm);line-height:1.55;color:var(--text-secondary)}
.on-field .reflist{background:var(--field-line)}
.on-field .reflist li{background:var(--field-700)}
.on-field .reflist__n{color:var(--accent-on-dark)}
.on-field .reflist__head{color:var(--field-ink-900)}
.on-field .reflist__sub{color:var(--field-ink-500)}

/* ── Fact table ──────────────────────────────────────────────────────────────
   Checkable rows. Mono on the value side wherever the value is a reference,
   a duration or anything a reader could hold you to. */
.facts{display:grid;border:1px solid var(--border)}
.facts__head,.facts__row{display:grid;grid-template-columns:1fr 1.4fr;gap:16px;padding:15px 18px}
.facts__head{padding:10px 18px;background:var(--surface-sunken);border-bottom:1px solid var(--border)}
.facts__row{background:var(--surface);border-top:1px solid var(--border)}
.facts__row:first-of-type{border-top:none}
.facts__k{font:var(--type-body-strong);font-size:var(--size-body-sm);color:var(--text-primary)}
.facts__v{font:var(--type-body);font-size:var(--size-body-sm);line-height:1.55;color:var(--text-secondary)}
.facts__v--mono{font:var(--type-stamp);font-size:12.5px}
.on-field .facts{border-color:var(--field-line)}
.on-field .facts__head{background:var(--field-600);border-bottom-color:var(--field-line)}
.on-field .facts__row{background:var(--field-700);border-top-color:var(--field-line)}
.on-field .facts__k{color:var(--field-ink-900)}
.on-field .facts__v{color:var(--field-ink-500)}

/* ── Claim split ─────────────────────────────────────────────────────────────
   What a thing asserts, and what it does not. This is the shape of the brand's
   honesty, so it gets equal columns and the denial is never smaller. */
.claims{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);
  border:1px solid var(--border)}
.claims__col{background:var(--surface);padding:26px;display:grid;gap:16px;align-content:start}
.claims__col--no{background:var(--surface-sunken)}
.claims__title{display:flex;align-items:center;gap:10px;font:var(--type-title);font-size:18px}
.claims__col--yes .i{color:var(--accent)}
.claims__col--no .i{color:var(--text-secondary)}
.claims__items{display:grid;gap:12px}
.claims__item{display:grid;grid-template-columns:30px 1fr;gap:12px;font:var(--type-body);
  font-size:var(--size-body-sm);line-height:1.55;color:var(--ink-700)}
.claims__item .stamp{font:var(--type-stamp);color:var(--text-secondary)}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:30;background:var(--background);
  border-bottom:1px solid var(--border)}
.site-header__bar{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-gutter);
  height:68px;display:flex;align-items:center;gap:40px}
.site-header__logo{display:flex;align-items:center;text-decoration:none}
.site-header__logo img{height:22px;width:auto;display:block}
.site-nav{display:flex;gap:24px;margin-left:auto}
.site-nav a{font:var(--type-body);font-size:var(--size-body-sm);text-decoration:none;
  color:var(--text-secondary);border-bottom:1.5px solid transparent;padding-bottom:3px}
.site-nav a:hover{color:var(--text-primary)}
.site-nav a[aria-current="page"]{color:var(--text-primary);border-bottom-color:var(--accent)}
.site-header__cta{display:flex;align-items:center;gap:10px}
.site-header__toggle{display:none;height:40px;width:40px;place-items:center;background:transparent;
  border:1px solid var(--border);color:var(--text-primary);cursor:pointer}
.drawer{display:none;border-top:1px solid var(--border);background:var(--surface);
  padding:var(--space-5) var(--page-gutter) var(--space-6)}
.drawer a{font:var(--type-title);font-size:19px;text-decoration:none;padding:12px 0;
  color:var(--text-primary);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.drawer a[aria-current="page"]{color:var(--accent)}
.drawer__cta{padding-top:16px}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer{padding:56px 0 40px}
.site-footer__grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;align-items:start}
.site-footer__brand{display:grid;gap:12px;max-width:34ch}
.site-footer__brand img{height:20px;width:auto}
.site-footer__brand span{font:var(--type-body);font-size:var(--size-body-sm);color:var(--text-secondary)}
.site-footer__col{display:grid;gap:8px;align-content:start}
.site-footer__col a{font:var(--type-body);font-size:var(--size-body-sm);text-decoration:none;
  color:var(--text-secondary)}
.site-footer__col a:hover{color:var(--text-primary)}
.site-footer__col a[aria-current="page"]{color:var(--text-primary)}
.site-footer .wrap{display:grid;gap:28px}

/* ── Home ────────────────────────────────────────────────────────────────── */
.hero{border-bottom:1px solid var(--border);padding:96px 0 88px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero h1{font:var(--type-display);font-size:60px;margin:0;letter-spacing:var(--tracking-display)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.tiles>*{background:var(--surface);padding:28px;display:grid;gap:14px;align-content:start}
.tiles h3{font:var(--type-title);margin:0}
.tiles p{margin:0;font:var(--type-body);font-size:var(--size-body-sm);line-height:1.55;
  color:var(--text-secondary)}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.product-card{background:var(--field-700);border:1px solid var(--field-line);padding:22px;
  display:grid;gap:12px;align-content:start}
.product-card__top{display:flex;align-items:center;gap:12px}
.product-card__bar{width:8px;height:26px;display:block}
/* Hairline, not a colour bar: a product with no brand does not get one invented. */
.product-card__bar--none{width:1px;background:var(--field-line)}
.product-card h3{font:var(--type-title);margin:0;color:var(--field-ink-900)}
.product-card p{margin:0;font:var(--type-body);font-size:var(--size-body-sm);line-height:1.55;
  color:var(--field-ink-500)}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ── Tabs and the filing gate ────────────────────────────────────────────────
   Both are progressive enhancement. Every panel is in the HTML and visible with
   JavaScript off; the script only hides the ones you are not looking at. */
.tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--border)}
.tabs button{background:transparent;border:none;border-bottom:2px solid transparent;
  padding:10px 14px;font:var(--type-body-strong);font-size:var(--size-body-sm);
  color:var(--text-secondary);cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--text-primary);border-bottom-color:var(--accent)}
.gate{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)}
.gate button{background:var(--surface);border:none;padding:18px;display:grid;gap:10px;
  text-align:left;cursor:pointer;align-content:start;border-top:2px solid transparent}
.gate button[aria-selected="true"]{border-top-color:var(--accent);background:var(--surface)}
.gate button[aria-selected="false"]{background:var(--surface-sunken)}
.gate__top{display:flex;align-items:center;gap:10px}
.gate h3{font:var(--type-title);font-size:17px;margin:0}
.gate p{margin:0;font:var(--type-body);font-size:var(--size-body-sm);line-height:1.55;
  color:var(--text-secondary)}
.js .is-hidden{display:none}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.field{display:grid;gap:6px}
.field label{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-secondary)}
.field input,.field textarea,.field select{font:var(--type-body);color:var(--text-primary);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-1);
  padding:9px 12px;width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--focus-ring);
  outline-offset:1px}

/* ── Responsive ──────────────────────────────────────────────────────────────
   The kit switches on useBreakpoint: phone < 680, tablet < 1040, desktop above.
   These queries mirror those two thresholds so the static port and the kit can
   be compared side by side at the same widths. */
@media (max-width:1039px){
  .site-header__bar{height:60px}
  .site-header__logo img{height:19px}
  .site-nav{display:none}
  .site-header__cta{margin-left:auto}
  .site-header__cta .btn{display:none}
  .site-header__toggle{display:grid}
  .site-header[data-open="true"] .drawer{display:grid;gap:2px}
  .hero .wrap{grid-template-columns:1fr;gap:48px}
  .hero h1{font-size:48px}
  .page-head h1{font-size:44px}
  .claims{grid-template-columns:1fr}
  .products-grid{grid-template-columns:1fr 1fr}
  .site-footer__grid{grid-template-columns:1fr 1fr 1fr}
  .site-footer__brand{grid-column:1 / -1}
  .gate{grid-template-columns:1fr 1fr}
}
@media (max-width:679px){
  .section{padding:44px 0}
  .page-head{padding:40px 0 34px}
  .page-head h1{font-size:34px}
  .section-head h2{font-size:26px}
  .hero{padding:40px 0 48px}
  .hero .wrap{gap:32px}
  .hero h1{font-size:36px}
  .tiles,.products-grid,.two-up{grid-template-columns:1fr}
  .facts__head,.facts__row{grid-template-columns:1fr;gap:6px}
  .facts__head{gap:16px}
  .claims__col{padding:20px}
  .site-footer{padding:40px 0 32px}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:24px}
  .gate{grid-template-columns:1fr}
  .attest{flex-wrap:wrap}
  .attest__rule{min-width:24px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:0ms!important;animation-duration:0ms!important}
}
@media print{
  .site-header,.drawer,.page-close,.btn{display:none}
  body{background:#fff}
  .section{padding:18px 0;border-bottom:none}
  .facts__row,.reflist li{break-inside:avoid}
}

/* ── Context manifest and assumption list ────────────────────────────────────
   The two artifacts the whole company argument rests on. Both are lists, and
   both are numbered in mono because the system has no bullet. */
.manifest{background:var(--surface);border:1px solid var(--border);clip-path:var(--clip-chamfer-tr);
  padding:16px 18px}
.manifest__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:12px;border-bottom:1px solid var(--border)}
.manifest__head h4{font:var(--type-label);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-secondary);margin:0}
.manifest ol{list-style:none;margin:0;padding:12px 0 0;display:grid;gap:10px}
.manifest li{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:baseline}
.manifest li span:nth-child(2){font:var(--type-body);font-size:var(--size-body-sm)}
.manifest .stamp{white-space:nowrap}

.assumptions{display:grid;gap:12px}
.assumptions h4{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-secondary);margin:0}
.assumptions ol{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--border)}
.assumptions li{background:var(--surface);padding:12px 14px;display:grid;
  grid-template-columns:34px 1fr auto;gap:12px;align-items:start}
.assumptions__n{font:var(--type-stamp);color:var(--text-secondary);padding-top:2px}
.assumptions__body{display:grid;gap:3px}
.assumptions__claim{font:var(--type-body);font-size:var(--size-body-sm)}
.assumptions__basis{font:var(--type-stamp);color:var(--text-secondary)}
.conf{font:var(--type-stamp);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.conf--high{color:var(--success)}.conf--medium{color:var(--warning)}.conf--low{color:var(--danger)}

/* ── Endorsement specimens ───────────────────────────────────────────────────
   Mock host footers. They carry an explicit "illustration" label: the hosts are
   invented, and this brand of all brands cannot show an invented customer as
   though it were a real one. */
.host{padding:26px;display:grid;gap:14px}
.host__name{font:700 18px/1 "Helvetica Neue",Arial,sans-serif}
.host__meta{font:var(--type-body);font-size:var(--size-body-sm);opacity:.8}
.host__rule{height:1px;background:currentColor;opacity:.18}
.host--warm{background:#F6EDE3;color:#5A2C14}
.host--warm .host__name{letter-spacing:.08em}
.host--cool{background:#0B3D5C;color:#E6F1F8}
.host--cool .host__name{letter-spacing:-.01em}
.host--cool .host__rule{opacity:.2}
.credit{display:inline-flex;align-items:center;gap:8px;color:inherit}
.credit img{height:16px;width:16px}
.credit a{font:500 13px/1.4 var(--font-text);color:inherit;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px;opacity:.92}
.credit .stamp{color:inherit;opacity:.62}
.specimen{font:var(--type-stamp);letter-spacing:var(--tracking-stamp);text-transform:uppercase;
  color:var(--text-secondary)}

/* Badge tones. Success and warning are outline-only in the pack: state is said
   in words, and a filled chip would read as decoration. */
.badge--success{background:transparent;color:var(--success);border-color:currentColor}
.badge--warning{background:transparent;color:var(--warning);border-color:currentColor}