/* page styles: core stream (loaded after site.css; no inline styles, CSP).
   Pages: /exposure/ /method/ /about/ /contact/ /rbc/ /privacy/ /terms/ /sent/ /404.
   Only additions to the kit; every token comes from site.css. */

/* ---------- shared: the draft banner on legal pages (ink: the accent never marks a caveat) ---------- */
.draft-note{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);padding:3px 8px;margin-bottom:14px}
.blank{font-family:var(--sans);font-weight:600;font-size:.92em;background:var(--tint);border:1px dashed var(--graphite);padding:0 4px}

/* ---------- a fenced block in the open-slot treatment (limits; the events layer not yet built) ---------- */
.fence{position:relative;padding:20px 16px 20px 20px;border:1px dashed var(--graphite);background:repeating-linear-gradient(45deg,transparent 0 9px,rgba(213,210,202,.45) 9px 10px)}
.fence .lbl{margin-bottom:10px}
.fence ul{display:grid;gap:12px;list-style:none;padding:0}
.fence li{background:var(--paper);padding:10px 12px;border-left:2px solid var(--ink);font-size:16px;text-wrap:pretty}
.fence li b{font-weight:600}
.fence p{background:var(--paper);padding:10px 12px;max-width:none;text-wrap:pretty}
.fence p + p{margin-top:10px}

/* ---------- /exposure/: scope, two columns (built | the events layer) ---------- */
.scope{display:grid;gap:24px;border-top:1px solid var(--ink);padding-top:24px}
.scope h3{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.25;margin:6px 0 10px}
.scope .built ul{padding-left:18px;list-style:disc}
.scope .built li + li{margin-top:4px}
.scope .built p + p,.scope .built ul + p,.scope .built p + ul{margin-top:12px}
@media (min-width:900px){.scope{grid-template-columns:1fr 1fr;gap:48px}}

/* the place x status plate: a stacked bar per place and a gap row drawn as an open slot */
.plate .p-row.gap .p-val{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--graphite)}
.plate .p-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:11.5px;color:var(--ink)}
.plate .p-key span{display:inline-flex;align-items:center;gap:6px}
.plate .p-key i{display:inline-block;width:14px;height:10px}
.plate .p-key .k-act{background:var(--verm)}
.plate .p-key .k-ink{background:var(--ink)}
.plate .p-key .k-hollow{border:1.5px solid var(--ink);background:var(--white)}
.plate .p-key .k-slot{border:1px dashed var(--graphite);background:repeating-linear-gradient(45deg,transparent 0 3px,var(--hair) 3px 4px)}
.plate.navy .p-key{color:var(--white)}
.plate.navy .p-key .k-act{background:var(--coral)}

/* ---------- /method/: the four rules as large numbered statements ---------- */
.rules.big li{grid-template-columns:52px 1fr;padding:28px 0}
.rules.big .n{font-size:30px;line-height:1;color:var(--ink);padding-top:2px}
.rules.big h3{font-size:26px;line-height:1.15;letter-spacing:-.012em}
.rules.big p{font-size:17px;max-width:52ch}
@media (min-width:900px){
  .rules.big li{grid-template-columns:72px 1fr;padding:40px 0}
  .rules.big .n{font-size:44px}
  .rules.big h3{font-size:34px;line-height:1.1}
}
/* the flagship plate: the funnel on a navy field */
.flagship .opener p{color:rgba(251,249,245,.92)}
.flagship .plate{max-width:880px}
.ai-line{font-family:var(--serif);font-size:19px;line-height:1.45;border-top:1px solid var(--ink);border-bottom:1px solid var(--hair);padding:16px 0;max-width:var(--measure)}
.fc-steps{display:grid;border-top:1px solid var(--ink)}
.fc-steps li{padding:16px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:36px 1fr;gap:2px 10px}
.fc-steps .n{font-family:var(--mono);font-weight:500;color:var(--graphite)}
.fc-steps b{font-family:var(--serif);font-weight:600;font-size:19px}
.fc-steps p{grid-column:2;font-size:16px;max-width:58ch;text-wrap:pretty}

/* ---------- /about/: the founder block, photo at max-width 100%, one bio shown at a time ---------- */
.founder-grid{display:grid;gap:24px;border-top:1px solid var(--ink);padding-top:24px}
.founder-grid .portrait{display:block;width:100%;max-width:100%;height:auto;border:1px solid var(--hair);background:var(--tint)}
.founder-grid .who{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.15;letter-spacing:-.01em}
.founder-grid .role{font-family:var(--sans);font-size:14px;color:var(--graphite);margin-top:6px}
@media (min-width:600px){.founder-grid .portrait{max-width:320px}}
@media (min-width:900px){.founder-grid{grid-template-columns:4fr 8fr;gap:64px;align-items:start}}
/* the length switch: two radios, two bios; only the chosen one is displayed (no script; never both on screen) */
.bio-block{position:relative}
.bio-switch{display:flex;flex-wrap:wrap;margin:20px 0 18px;border:1px solid var(--ink);width:max-content;max-width:100%}
.bio-switch label{font-family:var(--sans);font-size:13px;font-weight:600;padding:9px 14px;cursor:pointer;color:var(--ink);background:var(--paper)}
.bio-switch label + label{border-left:1px solid var(--ink)}
.bio-in{position:absolute;opacity:0;width:1px;height:1px;margin:0}
#bio-s:checked ~ .bio-switch label[for="bio-s"],#bio-l:checked ~ .bio-switch label[for="bio-l"]{background:var(--ink);color:var(--white)}
#bio-s:focus-visible ~ .bio-switch label[for="bio-s"],#bio-l:focus-visible ~ .bio-switch label[for="bio-l"]{outline:2px solid var(--ink);outline-offset:3px}
.bio{max-width:var(--measure);text-wrap:pretty}
.bio p + p{margin-top:16px}
.bio-long{display:none}
#bio-l:checked ~ .bio-short{display:none}
#bio-l:checked ~ .bio-long{display:block}
.howwe{display:grid;border-top:1px solid var(--ink)}
.howwe li{padding:16px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:36px 1fr;gap:2px 10px}
.howwe .n{font-family:var(--mono);font-weight:500;color:var(--graphite)}
.howwe b{font-family:var(--serif);font-weight:600;font-size:19px}
.howwe p{grid-column:2;font-size:16px;max-width:52ch}
@media (min-width:900px){.howwe{grid-template-columns:1fr 1fr;column-gap:48px}}

/* ---------- /contact/: the one form ---------- */
.contact-facts{display:grid;gap:12px;margin-top:8px;font-family:var(--sans);font-size:15px}
.contact-facts dt{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--graphite)}
.contact-facts dd{margin:2px 0 0;color:var(--ink)}
/* the no-JS error: the API redirects a refused form to /contact/?error=...#request; :target shows this box */
.nojs-err{display:none;border:1px solid var(--verm);border-left-width:4px;background:var(--white);padding:14px 16px;margin:0 0 20px;max-width:600px;font-family:var(--sans);font-size:14.5px;line-height:1.5}
.nojs-err:target{display:block}
.nojs-err h3{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--verm);margin-bottom:6px}
.nojs-err ul{list-style:disc;padding-left:18px;margin-top:8px}
.nojs-err li + li{margin-top:4px}
.req .formcol{min-width:0}
/* the organisation / business-purpose / foreign-state gate: shown for advisory, pilot, presentation and purchase. Where :has()
   is unsupported the gate simply stays visible, which is the safe failure. */
.gate{border:1px solid var(--hair);border-left:2px solid var(--ink);padding:12px 12px 4px;margin:0 0 16px;background:var(--paper)}
.gate legend{font-size:11px;font-weight:600;color:var(--graphite);letter-spacing:.15em;text-transform:uppercase;padding:0 4px}
.gate .line{font-size:14px;line-height:1.45;margin-bottom:10px}
.gate label{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;cursor:pointer;margin-bottom:10px}
.gate input{width:18px;height:18px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--ink)}
.req-form:has(input[name="req"][value="question"]:checked) .gate,
.req-form:has(input[name="req"][value="demo"]:checked) .gate,
.req-form:has(input[name="req"][value="general"]:checked) .gate{display:none}
.req-form .purpose-note{display:none;font-size:14px;line-height:1.45;border-left:2px solid var(--ink);padding:4px 0 4px 12px;margin:0 0 16px}
.req-form:has(input[name="req"][value="question"]:checked) .pn-question,
.req-form:has(input[name="req"][value="purchase"]:checked) .pn-purchase{display:block}

/* ---------- /rbc/: the live sample, place x status, without script (radios + labels + :checked) ---------- */
.lsx{background:var(--white);border:1px solid var(--hair);padding:16px 14px 18px;font-family:var(--sans);max-width:720px;min-width:0}
.lsx .cap{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:13px;color:var(--graphite);margin-bottom:14px}
.lsx .cap .live{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);padding:2px 6px}
.lsx .cap b{color:var(--ink)}
.lsx .grp-l{display:block;font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--graphite);margin:0 0 6px}
.lsx .seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink);margin-bottom:14px}
.lsx .seg label{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:6px 4px;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;color:var(--ink);background:var(--paper)}
.lsx .seg label + label{border-left:1px solid var(--ink)}
.lsx .seg label .num{font-weight:500;font-size:12px;margin-top:2px}
.lsx .rin{position:absolute;opacity:0;width:1px;height:1px;margin:0}
#pl-ca:checked ~ .seg label[for="pl-ca"],#pl-us:checked ~ .seg label[for="pl-us"],#pl-el:checked ~ .seg label[for="pl-el"],
#st-act:checked ~ .seg label[for="st-act"],#st-pre:checked ~ .seg label[for="st-pre"],#st-wat:checked ~ .seg label[for="st-wat"]{background:var(--ink);color:var(--white)}
#pl-ca:focus-visible ~ .seg label[for="pl-ca"],#pl-us:focus-visible ~ .seg label[for="pl-us"],#pl-el:focus-visible ~ .seg label[for="pl-el"],
#st-act:focus-visible ~ .seg label[for="st-act"],#st-pre:focus-visible ~ .seg label[for="st-pre"],#st-wat:focus-visible ~ .seg label[for="st-wat"]{outline:2px solid var(--ink);outline-offset:2px}
.lsx .rec{display:none;border-top:2px solid var(--ink);padding-top:12px}
#pl-ca:checked ~ #st-act:checked ~ .recs .r-ca-act,
#pl-ca:checked ~ #st-pre:checked ~ .recs .r-ca-pre,
#pl-ca:checked ~ #st-wat:checked ~ .recs .r-ca-wat,
#pl-us:checked ~ #st-act:checked ~ .recs .r-us-act,
#pl-us:checked ~ #st-pre:checked ~ .recs .r-us-pre,
#pl-us:checked ~ #st-wat:checked ~ .recs .r-us-wat,
#pl-el:checked ~ .recs .r-el{display:block}
.lsx .im{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:12.5px;color:var(--graphite);margin-bottom:8px}
.lsx .ih{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.3;color:var(--ink);margin-bottom:10px;text-wrap:pretty}
.lsx .ia{font-size:14.5px;line-height:1.5;color:var(--ink);margin-top:6px}
.lsx .ia b{font-weight:600}
.lsx .is{font-size:12.5px;line-height:1.45;color:var(--graphite);margin-top:10px;padding-top:8px;border-top:1px solid var(--hair);overflow-wrap:anywhere}
.lsx .is a{color:var(--graphite)}
.lsx .empty ul{list-style:disc;padding-left:18px;font-size:14.5px;line-height:1.5}
.lsx .empty li + li{margin-top:6px}
.lsx .foot{margin-top:14px;font-size:12.5px;color:var(--graphite)}
.plates{display:grid;gap:32px}
@media (min-width:900px){.plates.two-up{grid-template-columns:1fr 1fr;gap:48px;align-items:start}}

/* ---------- /sent/ and /404 ---------- */
.nf .lbl{margin-bottom:12px}
.nf .lede{margin-top:16px;max-width:52ch;font-size:19px;line-height:1.45}
.nf .ctas{margin-top:24px}
.nf-links{display:grid;border-top:1px solid var(--ink);margin-top:32px;max-width:640px}
.nf-links li{border-bottom:1px solid var(--hair)}
.nf-links a{display:flex;justify-content:space-between;gap:12px;padding:14px 0;text-decoration:none;font-size:17px}
.nf-links a:hover{text-decoration:underline}
.nf-links .ar{font-family:var(--serif)}

/* ---------- fix round (DESIGN_REVIEW 30 Sep 2026) ---------- */
/* a status with no date ("watch"): tint with a graphite hairline. Hollow stays reserved for derived values. */
.plate .p-bar .watch{fill:var(--tint);stroke:var(--graphite);stroke-width:1;vector-effect:non-scaling-stroke}
/* a datum at 68.33% of the scale (half of 41 items on a 0-30 count axis) */
.plate .p-vdatum.at68{left:calc(114px + (100% - 184px) * .6833)}
/* an open slot drawn to its count on the axis (10 of 30) */
.plate .p-bar .slotw{position:absolute;left:0;top:0;height:18px;width:33.333%;border:1px dashed var(--graphite);background:repeating-linear-gradient(45deg,transparent 0 5px,var(--hair) 5px 6px)}
/* a direct segment label under a stacked bar */
.plate .p-row.sub{min-height:0;margin-top:-6px}
.plate .p-row.sub .p-note{grid-column:2;font-size:11px;color:var(--graphite);line-height:1.3}
.plate .p-row.sub .p-note b{color:var(--verm);font-weight:600}
@media (max-width:899px){.rules.big li{padding:20px 0}}

/* ---------- polish round: secondary detail folded into <details>, compact lists (phone length) ---------- */
.more{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-top:16px;font-family:var(--sans)}
.more > summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;font-size:14px;font-weight:600;color:var(--ink);min-height:44px}
.more > summary::-webkit-details-marker{display:none}
.more > summary::after{content:"+";font-family:var(--mono);font-size:18px;line-height:1;color:var(--graphite)}
.more[open] > summary::after{content:"\2212"}
.more > :not(summary){font-family:var(--serif);font-size:16px;margin-bottom:14px}
.more ul{list-style:disc;padding-left:18px}
.more li + li{margin-top:6px}
.more dl{display:grid;gap:10px}
.more dt{font-weight:600}
.more dd{margin:0}
.fence.tight{padding:14px 12px 14px 14px}
/* compact stage list: figure left, headline right, also on the phone */
.steps.compact .step{grid-template-columns:112px 1fr;align-items:baseline;padding:12px 0}
.steps.compact .step .sf{font-size:22px;grid-row:auto}
.steps.compact .step .sf small{display:block;margin:2px 0 0}
.steps.compact .step .st{font-size:17px;grid-column:2}
@media (min-width:600px){.steps.compact .step{grid-template-columns:190px 1fr}.steps.compact .step .sf{font-size:30px}}
/* two-column compact list that stacks on the phone */
.duo{display:grid;gap:0;border-top:1px solid var(--ink)}
.duo li{padding:12px 0;border-bottom:1px solid var(--hair);font-size:16px}
.duo li b{font-family:var(--serif);font-weight:600}
@media (min-width:600px){.duo{grid-template-columns:1fr 1fr;column-gap:32px}}
.plate .p-row.sub .p-note{position:relative;z-index:1;justify-self:start;background:var(--white);padding-right:4px}