/* AgentProof: the web lab.

   Brand direction approved 2026-10-07: a sharp, slightly playful web lab
   that shows rather than tells. Warm off-white, near-black ink and one
   electric violet; Bricolage Grotesque for display and reading, Geist Mono
   only where a machine is talking (its zero is slashed, so never for a
   price). The hero is a split screen: the page a customer sees beside the
   readout our own audit engine produced for that same page. Nothing is
   shared with the other five sites.

   The gated kit and fix pages load this file too and carry their own inline
   blocks, so this file avoids their class names (file, card, note, steps,
   box, row, next, grab, save, paid, licence). */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url("fonts/BricolageGrotesque.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url("fonts/GeistMono.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --cream: #f6f3ee;
  --cream-2: #ece7df;
  --white: #fffdfa;
  --ink: #16141b;
  --ink-soft: #37343f;
  --muted: #5c5866;
  --violet: #5b3df5;
  --violet-deep: #3d22a1;
  --violet-tint: #e7e1fd;
  --term: #15131c;
  --term-text: #e9e6f2;
  --pass: #2f9e6a;
  --warn: #e0a526;
  --fail: #f0675a;
  --rule: rgba(22, 20, 27, .14);
  --paper: var(--cream);
  --paper-deep: var(--cream-2);
  --sheet: var(--white);
  --spot: var(--violet);
  --serif: "Bricolage Grotesque", system-ui, sans-serif;
  --sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --max: 1200px;
  --gut: clamp(18px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--cream); color: var(--ink-soft); font: 400 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-underline-offset: .2em; text-decoration-thickness: 1.5px; text-decoration-color: var(--violet); }
a:hover { color: var(--violet-deep); }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
p { margin: 0 0 1em; }
b, strong { color: var(--ink); font-weight: 700; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--ink); color: #fff; padding: 12px 18px; }
.skip:focus { left: 0; }

h1, h2, h3 { font-family: var(--sans); color: var(--ink); margin: 0; }
h1 { font-size: clamp(42px, 5.6vw, 82px); line-height: .98; font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.02; font-weight: 800; letter-spacing: -.028em; }
h3 { font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.hl { color: var(--violet); }
.tag { font: 500 13px/1.3 var(--mono); letter-spacing: .02em; color: var(--violet-deep); margin: 0 0 14px; }

/* -- header ------------------------------------------------------------------ */
.top { border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; letter-spacing: -.03em;
  color: var(--ink); text-decoration: none; margin-right: auto; }
.brand::before { content: ""; width: 14px; height: 22px; background: var(--violet); border-radius: 2px; }
.top nav { display: flex; gap: 6px 24px; flex-wrap: wrap; }
.top nav a { color: var(--ink-soft); text-decoration: none; font-size: 16px; font-weight: 500; padding: 6px 0; }
.top nav a:hover { color: var(--violet-deep); text-decoration: underline; }
.top .go { background: var(--violet); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 10px 18px; border-radius: 999px; }
.top .go:hover { background: var(--ink); }

/* -- buttons ------------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 15px 28px;
  border-radius: 999px; background: var(--violet); color: #fff; font: 700 18px/1.2 var(--sans); text-decoration: none;
  border: 2px solid var(--violet); transition: background-color .15s, color .15s, border-color .15s; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }

/* -- hero: the split screen ---------------------------------------------------- */
.hero { padding: clamp(44px, 6vw, 84px) 0 clamp(56px, 7vw, 96px); }
.hero .intro { max-width: 60em; }
.hero h1 { max-width: 13.5em; margin-bottom: 24px; }
.hero .lede { font-size: 21px; max-width: 36em; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 30px; }
.guarantee { margin: 22px 0 0; font-size: 16px; max-width: 46em; }
.guarantee b { color: var(--violet-deep); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(40px, 5vw, 64px);
  border-radius: 20px; overflow: hidden; box-shadow: 0 40px 70px -46px rgba(22, 20, 27, .6); border: 1px solid var(--rule); }
.pane { padding: 22px clamp(18px, 3vw, 34px) 30px; }
.pane .label { display: flex; justify-content: space-between; gap: 10px; font: 500 13px/1.3 var(--mono); margin: 0 0 20px; }
.human { background: var(--white); }
.human .label { color: var(--muted); }
.shopcard { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; border: 1px solid var(--rule);
  border-radius: 14px; padding: 18px; background: #fff; }
.shopcard .pic { aspect-ratio: 1; border-radius: 10px; background:
  linear-gradient(135deg, transparent 46%, var(--ink) 46% 54%, transparent 54%) 50% 40% / 60% 30% no-repeat,
  radial-gradient(circle at 30% 70%, var(--violet) 0 14%, transparent 15%), var(--cream-2); }
.shopcard .pname { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.2; }
.shopcard .pprice { font-size: 30px; font-weight: 800; color: var(--ink); margin: 6px 0 12px; letter-spacing: -.02em; }
.shopcard .pbuy { display: inline-block; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; padding: 9px 16px; border-radius: 999px; }
.human .fine { font-size: 15px; color: var(--muted); margin: 18px 0 0; }

.agent { background: var(--term); color: var(--term-text); }
.agent .label { color: #b9b3cc; }
.readout { list-style: none; margin: 0; padding: 0; font: 400 14.5px/1.5 var(--mono); }
.readout li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px dashed rgba(233, 230, 242, .14); }
.readout .st { font-weight: 600; }
.readout .st.f { color: var(--fail); } .readout .st.w { color: var(--warn); } .readout .st.p { color: var(--pass); }
.score { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 0; font-family: var(--mono); color: #b9b3cc; font-size: 14px; }
.score b { font-family: var(--sans); font-size: 44px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.agent .fine { font-size: 13.5px; color: #b9b3cc; margin: 14px 0 0; }

/* -- sections ---------------------------------------------------------------- */
.sec { padding: clamp(60px, 7vw, 104px) 0; }
.sec.white { background: var(--white); }
.sec.dark { background: var(--ink); color: #d9d5e3; }
.sec.dark h2, .sec.dark h3 { color: #fff; }
.sec.dark .tag { color: #b8a9ff; }
.sec header { max-width: 46em; margin-bottom: 44px; }
.sec .lead { font-size: 19px; margin-top: 16px; }

/* What you get: four numbered lab cards. */
.gets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: g; }
.gets li { counter-increment: g; background: var(--cream); border-radius: 16px; padding: 22px 22px 24px; }
.gets li::before { content: "0" counter(g); display: block; font: 500 14px/1 var(--mono); color: var(--violet-deep); margin-bottom: 26px; }
.gets h3 { margin-bottom: 8px; }
.gets p { margin: 0; font-size: 16px; }
.gets .free { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--violet-deep);
  background: var(--violet-tint); border-radius: 999px; padding: 3px 10px; }

/* The files, as code panes. */
.artefacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.artefact { background: var(--term); border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); }
.artefact .fname { margin: 0; padding: 12px 16px; font: 500 13px/1.3 var(--mono); color: #b8a9ff; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.artefact pre { margin: 0; padding: 16px; font: 400 13.5px/1.55 var(--mono); color: var(--term-text); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Weights, drawn from the engine. */
.weights { list-style: none; margin: 0; padding: 0; max-width: 900px; }
.weights li { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr) 2.5em; gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.weights .bar { height: 12px; border-radius: 999px; background: var(--violet-tint); position: relative; overflow: hidden; }
.weights .bar i { position: absolute; inset: 0 auto 0 0; background: var(--violet); border-radius: 999px; }
.weights .n { font-weight: 700; color: var(--ink); text-align: right; }
.weights li.low .bar i { background: var(--muted); }
.weights-note { font-size: 16px; max-width: 50em; margin-top: 24px; }

/* Real kit pages. */
.kitpages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); }
.kitpages figure { margin: 0; }
.kitpages img { border-radius: 10px; box-shadow: 0 0 0 1px var(--rule), 0 26px 40px -30px rgba(22, 20, 27, .7); }
.kitpages figcaption { margin-top: 14px; font-size: 15.5px; }
.kitpages figcaption span { font: 500 13px/1 var(--mono); color: var(--violet-deep); margin-right: 8px; }
.kit-note { font-size: 15.5px; margin-top: 24px; max-width: 46em; }
.selfcheck { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 18px 32px; align-items: center;
  background: var(--violet-tint); border-radius: 18px; padding: 26px 28px; margin-top: 44px; }
.selfcheck h3 { font-size: 25px; }
.selfcheck p { margin: 6px 0 0; }

/* Price. */
.vat { font-size: 15px; max-width: 56em; margin: 0 0 28px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { background: var(--white); border-radius: 20px; padding: 28px 26px 26px; border: 1px solid var(--rule); display: flex; flex-direction: column; }
.plan.pick { background: var(--ink); color: #d9d5e3; border-color: var(--ink); }
.plan.pick .pname, .plan.pick .amt { color: #fff; }
.plan.pick .who { color: #b8a9ff; }
.plan.pick li { border-top-color: rgba(255, 255, 255, .14); }
.plan.pick .btn.ghost { color: #fff; border-color: #fff; }
.plan.pick .btn.ghost:hover { background: #fff; color: var(--ink); }
.plan .who { font: 500 13px/1.4 var(--mono); color: var(--violet-deep); margin: 0; }
.plan .pname { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 8px 0 0; }
.plan .amt { font-size: 60px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ink); margin: 14px 0 4px; }
.plan ul { list-style: none; margin: 16px 0 24px; padding: 0; flex: 1; }
.plan li { padding: 8px 0; border-top: 1px solid var(--rule); font-size: 16px; }
.plan .buttons { display: flex; flex-direction: column; gap: 10px; }
.terms-line { font-size: 15px; max-width: 58em; margin: 20px 0 0; }

/* Founder. */
.founder { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.founder .letter p { font-size: 20px; line-height: 1.6; color: var(--ink); }
.founder .letter .sig { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 0; }
.founder .letter .who { font-size: 15px; color: var(--muted); }
.founder dl { margin: 0; background: var(--white); border-radius: 16px; padding: 6px 22px 18px; }
.founder dt { font: 500 12.5px/1.4 var(--mono); color: var(--violet-deep); margin-top: 14px; }
.founder dd { margin: 2px 0 0; color: var(--ink); overflow-wrap: anywhere; }

.limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.limits > div { background: rgba(255, 255, 255, .06); border-radius: 16px; padding: 22px 24px; }
.limits h3 { font-size: 20px; margin-bottom: 8px; }
.limits p { margin: 0; font-size: 16px; }

.qa { max-width: 860px; }
.qa details { background: var(--white); border-radius: 14px; margin-bottom: 10px; }
.qa summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; position: relative; font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 22px; top: 13px; font: 500 26px/1 var(--mono); color: var(--violet); padding-top: 4px; }
.qa details[open] summary::after { content: "\2212"; }
.qa .a { padding: 0 22px 20px; font-size: 17px; }
.qa .a p:last-child { margin: 0; }

.closing { background: var(--violet); color: #fff; padding: clamp(52px, 6vw, 88px) 0; }
.closing .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: 22px 48px; align-items: center; }
.closing h2 { color: #fff; }
.closing p { margin: 14px 0 0; font-size: 19px; color: rgba(255, 255, 255, .9); }
.closing .acts { display: flex; flex-direction: column; gap: 10px; }
.closing .btn { background: #fff; color: var(--ink); border-color: #fff; }
.closing .btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.closing .btn.ghost { background: transparent; color: #fff; border-color: #fff; }

.foot { background: var(--cream-2); padding: 46px 0 36px; font-size: 15px; }
.foot .cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px 48px; }
.foot .fh { font-size: 18px; font-weight: 800; color: var(--ink); margin: 0 0 10px; letter-spacing: -.01em; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a, .foot p a { display: inline-flex; align-items: center; min-height: 26px; }
.foot .legal { border-top: 1px solid var(--rule); margin-top: 28px; padding-top: 18px; font-size: 14px; color: var(--muted); }

.buybar { display: none; }

@media (max-width: 1080px) {
  .gets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .split, .founder, .closing .wrap, .selfcheck, .plans, .artefacts, .limits, .foot .cols { grid-template-columns: minmax(0, 1fr); }
  .top nav { display: none; }
}
@media (max-width: 700px) {
  body { padding-bottom: 74px; }
  .top .go { display: none; }
  .buybar { display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--ink); color: #fff; }
  .buybar .p { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
  .buybar .p small { font-size: 12.5px; font-weight: 400; opacity: .8; margin-left: 6px; letter-spacing: 0; }
  .buybar a { background: var(--violet); color: #fff; font-weight: 700; text-decoration: none; min-height: 48px; padding: 0 20px;
    border-radius: 999px; display: inline-flex; align-items: center; }
  .gets, .kitpages { grid-template-columns: minmax(0, 1fr); }
  .kitpages figure:nth-child(n+2) { display: none; }
  .shopcard { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .readout { font-size: 13px; }
  .readout li { grid-template-columns: 46px minmax(0, 1fr); gap: 8px; }
  .weights li { grid-template-columns: minmax(0, 1fr) 2.5em; gap: 4px 12px; }
  .weights .bar { grid-column: 1 / -1; grid-row: 2; }
  .btn { width: 100%; }
  h1, h2 { overflow-wrap: break-word; }
}
@media print { .top nav, .buybar, .btn { display: none; } }

/* The gated kit and fix pages: the brand has no italic face, so the wordmark
   stays upright rather than being slanted by the browser. */
header .wordmark b { font-style: normal; }