/* ChaosMark Evidence Instrument — public identity, September 2026.
   Light-first public tools. Navy instrument hero. Jade trust signal.
   Not brass. Not ChronoVerify. CSS + SVG only. No WebGL. No hero video.

   Five-elements balance (not decoration):
     Water  --navy   intelligence / evidence flow
     Metal  --pearl  precision / verification
     Wood   --jade   trust / growth
     Earth  --ochre  stability (accent only)
     Fire   --coral  exceptions only
   Flow: precision → evidence flow → trusted growth. */

:root{
  --pearl:#F5F3EC;
  --pearl-2:#EBE7DC;
  --paper:#FFFEF9;
  --ink:#101820;
  --ink-2:#3E4A54;
  --mute:#4E5862;
  --line:#C9C4B8;
  --line-strong:#8F8A7E;
  --jade:#0B5F54;
  --jade-deep:#094E45;
  --jade-text:#0A5850;
  --jade-soft:#E3F1ED;
  --cyan:#155A6E;
  --cyan-soft:#E6F2F5;
  --ochre:#6F5418;
  --ochre-soft:#F4EBD4;
  --coral:#A8322B;
  --coral-soft:#F8E8E6;
  --navy:#0D1B2A;
  --navy-2:#122233;
  --bg:var(--pearl);
  --bg-2:var(--pearl-2);
  --surface:var(--paper);
  --btn:var(--jade);
  --btn-fg:#FFFFFF;
  --disabled-bg:var(--pearl-2);
  --disabled-fg:var(--mute);
  --focus:var(--jade-text);
  --pass:var(--jade-text);
  --pass-bg:var(--jade-soft);
  --warn:var(--ochre);
  --warn-bg:var(--ochre-soft);
  --fail:var(--coral);
  --fail-bg:var(--coral-soft);
  --na:var(--ink-2);
  --na-bg:#E8E6DF;
  --serif:"Newsreader", Georgia, "Iowan Old Style", serif;
  --sans:"Archivo", -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --maxw:1120px;
  --rail:232px;
  --tap:56px;
  --r:3px;
  --motion-quick:160ms;
  --motion-fast:420ms;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}

.theme-dark,
[data-page="home"] .launch,
[data-page="home"] header.ei,
[data-page="home"] .stage{
  --pearl:#F5F3EC;
  --pearl-2:#EBE7DC;
  --paper:#152536;
  --ink:#F5F3EC;
  --ink-2:#C5CBD1;
  --mute:#9AA4AD;
  --line:#2A3D4E;
  --line-strong:#5A7388;
  --jade:#4BB8A6;
  --jade-deep:#3DAB9A;
  --jade-text:#4BB8A6;
  --jade-soft:rgba(75,184,166,.16);
  --cyan:#5BB4C9;
  --cyan-soft:rgba(91,180,201,.14);
  --ochre:#C9A85A;
  --ochre-soft:rgba(201,168,90,.16);
  --coral:#F08A80;
  --coral-soft:rgba(240,138,128,.16);
  --navy:#0D1B2A;
  --navy-2:#122233;
  --bg:#0D1B2A;
  --bg-2:#122233;
  --surface:#152536;
  --btn:#4BB8A6;
  --btn-fg:#0D1B2A;
  --disabled-bg:#152536;
  --disabled-fg:#C5CBD1;
  --focus:#4BB8A6;
  --pass:#4BB8A6;
  --pass-bg:rgba(75,184,166,.16);
  --warn:#C9A85A;
  --warn-bg:rgba(201,168,90,.16);
  --fail:#F08A80;
  --fail-bg:rgba(240,138,128,.16);
  --na:#C5CBD1;
  --na-bg:rgba(197,203,209,.12);
  color:var(--ink);
  background-color:var(--bg);
  color-scheme:dark;
}

@media (prefers-color-scheme:dark){
  :root{
    --pearl:#F5F3EC;
    --pearl-2:#EBE7DC;
    --paper:#152536;
    --ink:#F5F3EC;
    --ink-2:#C5CBD1;
    --mute:#9AA4AD;
    --line:#2A3D4E;
    --line-strong:#5A7388;
    --jade:#4BB8A6;
    --jade-deep:#3DAB9A;
    --jade-text:#4BB8A6;
    --jade-soft:rgba(75,184,166,.16);
    --cyan:#5BB4C9;
    --cyan-soft:rgba(91,180,201,.14);
    --ochre:#C9A85A;
    --ochre-soft:rgba(201,168,90,.16);
    --coral:#F08A80;
    --coral-soft:rgba(240,138,128,.16);
    --navy:#0D1B2A;
    --navy-2:#122233;
    --bg:#0D1B2A;
    --bg-2:#122233;
    --surface:#152536;
    --btn:#4BB8A6;
    --btn-fg:#0D1B2A;
    --disabled-bg:#152536;
    --disabled-fg:#C5CBD1;
    --focus:#4BB8A6;
    --pass:#4BB8A6;
    --pass-bg:rgba(75,184,166,.16);
    --warn:#C9A85A;
    --warn-bg:rgba(201,168,90,.16);
    --fail:#F08A80;
    --fail-bg:rgba(240,138,128,.16);
    --na:#C5CBD1;
    --na-bg:rgba(197,203,209,.12);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  background:var(--bg);
  overflow-x:clip;
}
a{color:var(--jade-text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible{
  outline:3px solid var(--focus);outline-offset:3px
}
img,svg{display:block;max-width:100%}
::selection{background:var(--jade);color:var(--btn-fg)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------- type ---------------- */
h1,h2,h3{font-family:var(--sans);font-weight:600;line-height:1.08;margin:0 0 .4em;letter-spacing:-.03em;text-wrap:balance}
h1{font-size:clamp(32px,8.4vw,56px)}
h2{font-size:clamp(26px,5vw,40px)}
h3{font-size:20px;line-height:1.25;letter-spacing:-.01em}
p{margin:0 0 1em;text-wrap:pretty}
.lede{font-size:17.5px;color:var(--ink-2);max-width:34em}
.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--jade-text);display:block;margin-bottom:14px
}
.dim{color:var(--ink-2)} .faint{color:var(--mute);font-size:13.5px}

/* ---------------- launch rail ---------------- */
.launch{
  background:var(--bg-2);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--jade-text);text-align:center;padding:9px 16px;overflow-wrap:anywhere
}
.launch b{color:var(--ink);font-weight:500}

/* ---------------- header ---------------- */
header.ei{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--navy) 94%, transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid #2A3D4E;color:#F5F3EC;
  --ink:#F5F3EC;--ink-2:#C5CBD1;--mute:#9AA4AD;--surface:transparent;
  --jade:#4BB8A6;--jade-text:#4BB8A6;--jade-deep:#3DAB9A;
  --btn:#4BB8A6;--btn-fg:#0D1B2A;--line:#2A3D4E;--line-strong:#5A7388;--focus:#4BB8A6}
.ei-nav{max-width:var(--maxw);margin:0 auto;padding:8px 16px;display:flex;
  align-items:center;gap:8px;min-height:56px;flex-wrap:wrap}
.brand{font-family:var(--serif);font-weight:600;font-size:23px;color:var(--ink);
  display:flex;align-items:center;gap:8px;margin-right:auto;letter-spacing:-.02em;min-width:0}
.ei-nav .brand{min-height:44px}
.brand:hover{text-decoration:none}
.brand .fp{width:22px;height:22px;color:var(--jade-text);flex:none}
.nav-quiet{color:var(--mute);font-size:13px;margin-right:2px;flex:none}
.nav-quiet:hover{color:var(--ink)}
.ei-nav .btn{flex:none}

/* ---------------- fingerprint / chaosprint ---------------- */
.fp{overflow:visible}
.fp-orbit,.fp-ridge,.fp-mark{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.fp-orbit{stroke-width:1.35}
.fp-ridge{stroke-width:1.05;opacity:.88}
.fp-mark{stroke-width:1.55}
.fp-core{fill:currentColor}
@media (prefers-reduced-motion:no-preference){
  .js .fp-orbit,.js .fp-ridge,.js .fp-mark{
    stroke-dasharray:420;stroke-dashoffset:420;
    animation:draw 700ms var(--ease) forwards
  }
  .js .fp-ridge{animation-duration:560ms;animation-delay:90ms}
  .js .fp-mark{stroke-dasharray:48;animation-duration:280ms;animation-delay:420ms}
  .js .fp-core{opacity:0;animation:fade 240ms var(--ease) .52s forwards}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes stamp-in{
  from{transform:translateY(-6px);opacity:0}
  to{transform:none;opacity:1}
}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:14px 22px;border-radius:var(--r);font-size:15.5px;font-weight:600;
  border:2px solid transparent;cursor:pointer;font-family:var(--sans);text-align:center;
  letter-spacing:.01em;
  transition:background var(--motion-quick) var(--ease),border-color var(--motion-quick) var(--ease),transform var(--motion-quick) var(--ease),color var(--motion-quick) var(--ease)}
.btn:hover{text-decoration:none}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled,.btn[disabled]{
  opacity:1;cursor:not-allowed;
  background:var(--disabled-bg);color:var(--disabled-fg);border-color:var(--line-strong)
}
.btn-primary{background:var(--btn);color:var(--btn-fg);border-color:var(--btn)}
.btn-primary:hover:not(:disabled){background:var(--jade-deep);border-color:var(--jade-deep)}
.btn-primary:disabled,.btn-primary[disabled]{
  background:var(--disabled-bg);color:var(--disabled-fg);border:2px dashed var(--line-strong)
}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:var(--surface)}
.btn-ghost:hover:not(:disabled){border-color:var(--jade);color:var(--jade-text);background:var(--jade-soft)}
.btn-ghost:disabled,.btn-ghost[disabled]{
  background:var(--disabled-bg);color:var(--disabled-fg);border:2px dashed var(--line-strong)
}
.btn-sm{min-height:44px;padding:8px 14px;font-size:13.5px;max-width:100%}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.cta-row .btn{flex:1 1 100%;max-width:none;min-width:0}

/* ---------------- chassis / stage ---------------- */
.stage{position:relative;display:grid;grid-template-columns:1fr;min-height:auto;
  border-bottom:1px solid var(--line);padding:8px 0 12px;
  background-image:
    radial-gradient(ellipse 90% 55% at 8% -8%, rgba(75,184,166,.16), transparent 55%),
    radial-gradient(ellipse 70% 45% at 108% 108%, rgba(91,180,201,.12), transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%234BB8A6' stroke-width='0.8' opacity='0.22'><path d='M40 410 C220 70 430 90 540 410 S860 760 1000 390 S1160 90 1190 280'/><path d='M20 440 C240 150 420 150 560 440 S840 710 1020 420'/><path d='M160 180 C400 20 640 780 880 170'/></g></svg>");
}
.gate{position:absolute;width:16px;height:16px;border-color:var(--jade);border-style:solid;opacity:.7;pointer-events:none;z-index:2}
.gate.tl{top:10px;left:12px;border-width:2px 0 0 2px}
.gate.tr{top:10px;right:12px;border-width:2px 2px 0 0}
.gate.bl{bottom:10px;left:12px;border-width:0 0 2px 2px}
.gate.br{bottom:10px;right:12px;border-width:0 2px 2px 0}
.rail{display:none}
.main{padding:28px 20px 36px}
.hero-mark{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:22px}
.hero-mark .fp{width:72px;height:72px;color:var(--jade)}
.serial{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);line-height:1.7;margin:0}
section.band{padding:56px 0;border-bottom:1px solid var(--line);background:var(--bg)}
section.band.tight{padding:40px 0}

.grid2{display:grid;grid-template-columns:1fr;gap:16px}
.grid3{display:grid;grid-template-columns:1fr;gap:14px}

/* ---------------- hero / instrument scale ---------------- */
.promise{
  font-family:var(--sans);font-size:clamp(34px,10.5vw,52px);line-height:1.02;
  letter-spacing:-.035em;margin:6px 0 18px;font-weight:600;
  border-left:2px solid var(--jade);padding-left:18px
}
.promise span{display:block;position:relative}
.promise span::before{
  content:"";position:absolute;left:-20px;top:.48em;width:8px;height:2px;background:var(--cyan)
}
.promise .em{color:var(--jade);font-style:normal}
.promise .em::before{width:12px;background:var(--jade)}
.sub{color:var(--ink-2);max-width:28em;font-size:16.5px}
/* The governing positioning. One sentence, used wherever a concise company
   description is required, so it is styled as a statement rather than as
   another line of body copy -- and never below the 16px prose floor. */
.positioning{
  margin-top:18px;font-size:17px;line-height:1.5;font-weight:600;
  color:var(--jade-text);max-width:28em;
  border-left:2px solid var(--jade);padding-left:14px
}
.hero-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:14.5px}
.hero-links a{color:var(--jade-text)}
.hero-links a.quiet{color:var(--mute)}
.hero-links a.quiet:hover{color:var(--ink)}

/* ---------------- evidence card ---------------- */
.ecard{
  position:relative;background:var(--surface);border:2px solid var(--line-strong);
  padding:22px 20px 16px 34px;overflow:hidden
}
.ecard-spine{
  position:absolute;left:0;top:0;bottom:0;width:20px;pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, var(--bg) 0 9px, transparent 9px 20px),
    var(--bg-2);
  border-right:1px dashed var(--line-strong)
}
.ecard-watermark{
  /* Decorative illustration, not copy. aria-hidden on the element; display:none
     so 10px 1.6:1 watermark text is not treated as a customer-facing sentence. */
  display:none
}
.ecard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  margin-bottom:14px}
.ecard-head .fp{width:30px;height:30px;color:var(--jade-text);opacity:.95}
.ecard h3{font-size:22px;margin:0 0 8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ecard .stamp{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border:2px solid;border-radius:2px;transform:none;display:inline-flex;align-items:center;gap:6px;font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .js .ecard .stamp{animation:stamp-in 320ms var(--ease) both}
}
.ecard .stamp.pass{color:var(--pass);border-color:var(--pass);background:var(--pass-bg);border-style:solid}
.ecard .stamp.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-bg);border-style:double;border-width:4px}
.ecard .stamp.fail{color:var(--fail);border-color:var(--fail);background:var(--fail-bg);border-style:dashed}
.ecard .stamp.na{color:var(--na);border-color:var(--na);background:var(--na-bg);border-style:dotted;border-width:3px}
.ecard[data-status="exact"]{border-left:6px solid var(--pass)}
.ecard[data-status="similar"],.ecard[data-status="partial"]{border-left:6px double var(--warn)}
.ecard[data-status="invalid"],.ecard[data-status="nomatch"]{border-left:6px dashed var(--fail)}
.ecard[data-status="unsupported"],.ecard[data-status="none"],.ecard[data-status="insufficient"],.ecard[data-status="issued"]{border-left:6px solid var(--cyan)}
.ecard .rows{margin:16px 0 0;border-top:1px solid var(--line);
  background-image:repeating-linear-gradient(transparent, transparent 31px, color-mix(in srgb, var(--cyan) 12%, transparent) 31px, color-mix(in srgb, var(--cyan) 12%, transparent) 32px)}
.ecard .row{display:flex;gap:12px;padding:8px 0;font-size:14.5px;flex-wrap:wrap}
.ecard .k{color:var(--mute);width:100%;flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.ecard .v{flex:1;min-width:0;overflow-wrap:anywhere}
.ecard-foot{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:16px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)
}
.split{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
.split .col{background:var(--bg-2);border:2px solid var(--line-strong);padding:14px 14px}
.split h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px;color:var(--jade-text)}
.split .col.no{border-style:dashed}
.split .col.no h4{color:var(--ink-2)}
.split ul{margin:0;padding:0 0 0 16px;color:var(--ink-2);font-size:13.5px}
.split li{margin:0 0 6px}
.split li:last-child{margin:0}

/* ---------------- maturity chips ---------------- */
.chip{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 8px;border:2px solid;border-radius:1px;vertical-align:middle}
.chip.early{color:var(--jade-text);border-color:var(--jade);background:var(--jade-soft);border-style:solid}
.chip.labs{color:var(--cyan);border-color:var(--cyan);background:var(--cyan-soft);border-style:double}
.chip.later{color:var(--mute);border-color:var(--line-strong);background:transparent;border-style:dotted}
.chip.dev{color:var(--ink-2);border-color:var(--line-strong);background:transparent;border-style:dashed}

.cap{background:var(--surface);border:2px solid var(--line-strong);padding:20px}
.cap h3{margin:10px 0 6px;font-size:18px}
.cap p{color:var(--ink-2);font-size:14.5px;margin:0}
.cap.featured{border-color:var(--jade);background:linear-gradient(180deg, var(--jade-soft), var(--surface) 42%)}
.caps{display:grid;gap:12px}

/* ---------------- how-it-works spine ---------------- */
.spine{list-style:none;margin:28px 0 0;padding:0;position:relative}
.spine::before{
  content:"";position:absolute;left:15px;top:6px;bottom:6px;width:2px;background:var(--line-strong)
}
.spine li{display:grid;grid-template-columns:32px 1fr;gap:16px;padding:0 0 28px;position:relative}
.spine li:last-child{padding-bottom:0}
.spine .n{
  width:32px;height:32px;border:2px solid var(--jade);color:var(--jade-text);
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  background:var(--bg);position:relative;z-index:1
}
.spine h3{font-size:20px;margin:4px 0 6px}
.spine p{color:var(--ink-2);font-size:14.5px;margin:0}

/* ---------------- origin ---------------- */
.origin{display:grid;grid-template-columns:1fr;gap:0;border:2px solid var(--line-strong);margin-top:28px;background:var(--surface)}
.origin article{padding:22px 20px;border-bottom:1px solid var(--line)}
.origin article:last-child{border-bottom:none}
.origin .word{font-family:var(--serif);font-size:30px;color:var(--jade-text);margin:0 0 8px;font-style:italic}
.origin p{color:var(--ink-2);font-size:14.5px;margin:0}

/* ---------------- enterprise ---------------- */
.elist{display:grid;grid-template-columns:1fr;gap:8px;margin-top:22px}
.elist a{display:block;border:2px solid var(--line-strong);background:var(--surface);padding:16px 16px;color:var(--ink)}
.elist a:hover{text-decoration:none;border-color:var(--jade);background:var(--jade-soft)}
.elist b{display:block;font-size:15px}
.elist span{display:block;color:var(--mute);font-size:13px;margin-top:4px}

/* ---------------- tool / instrument well ---------------- */
.tool{max-width:640px}
.tool-plate{position:relative;border:2px solid var(--line-strong);background:var(--surface);padding:18px 16px 16px;margin-top:24px}
.tool-plate .gate{opacity:.7}
#c-result,#v-result{scroll-margin-top:120px}
#c-result:focus,#v-result:focus{outline:none}
.drop{border:2px dashed var(--jade);padding:36px 16px 28px;text-align:center;cursor:pointer;
  width:100%;background:var(--paper);color:inherit;font-family:inherit;border-radius:var(--r);
  position:relative;overflow:hidden;min-height:160px;
  transition:border-color var(--motion-quick) var(--ease),background var(--motion-quick) var(--ease),box-shadow var(--motion-quick) var(--ease)}
.drop:hover,.drop.over{border-color:var(--jade-deep);border-style:solid;background:var(--jade-soft);box-shadow:0 0 0 3px var(--jade-soft)}
.drop-fp{display:flex;justify-content:center;margin-bottom:10px;color:var(--jade-text);opacity:.55}
.drop-fp .fp{width:48px;height:48px;margin:0 auto}
.drop b{display:block;font-size:18px;margin-bottom:6px;font-weight:600;position:relative;color:var(--ink)}
.drop span{color:var(--ink-2);font-size:14.5px;position:relative}
.drop .picked{color:var(--jade-text);font-family:var(--mono);font-size:13px;margin-top:12px;display:block;overflow-wrap:anywhere}
.drop-sub{color:var(--mute);font-size:13.5px;margin-top:10px}
.optional{margin-top:16px}
.optional .drop{padding:22px 16px;min-height:112px;border-color:var(--cyan)}
.note{border-left:4px solid var(--cyan);padding:14px 16px;background:var(--cyan-soft);font-size:14.5px;color:var(--ink-2);margin-top:16px}
.note b{color:var(--ink)}
.err{background:var(--fail-bg);border:2px dashed var(--fail);padding:16px 16px;margin-top:16px}
.err b{display:block;color:var(--fail);font-size:16px;margin-bottom:4px;font-family:var(--sans);font-weight:600}
.err span{color:var(--ink-2);font-size:14.5px}
.nudge{background:var(--ochre-soft);border:2px solid var(--ochre);padding:16px 16px;margin-top:16px;color:var(--ink-2);font-size:14.5px}
.nudge b{color:var(--ochre);display:block;margin-bottom:4px}
details.tech{background:var(--surface);border:2px solid var(--line-strong);margin-top:16px}
details.tech summary{padding:14px 16px;cursor:pointer;font-size:14px;color:var(--ink-2);min-height:48px;display:flex;align-items:center}
details.tech[open] summary{border-bottom:1px solid var(--line)}
details.tech pre{margin:0;padding:14px 16px;overflow-x:auto;font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--ink-2)}
.next{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:18px;font-size:14.5px}
.spinner{width:18px;height:18px;border:2px solid color-mix(in srgb, var(--btn-fg) 35%, transparent);border-top-color:var(--btn-fg);
  border-radius:50%;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
#ts-holder{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:8px}
#ts-msg{color:var(--ochre);font-size:14px;text-align:center}
#ts-retry[hidden]{display:none !important}
.tool-action{
  position:sticky;bottom:0;z-index:20;margin-top:8px;
  padding:12px 0 10px;
  background:linear-gradient(to top, var(--bg) 62%, transparent)
}
.vico{flex:none}

/* ---------------- footer ---------------- */
footer.ei{padding:36px 0 48px;color:var(--mute);font-size:13.5px;border-top:1px solid var(--line);background:var(--bg)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-bottom:24px}
.foot-grid h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 12px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin:0 0 8px}
footer.ei a{color:var(--mute)}
footer.ei a:hover{color:var(--ink)}
.foot-line{border-top:1px solid var(--line);padding-top:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------------- ≥ 620px ---------------- */
@media(min-width:620px){
  .cta-row .btn{flex:1 1 200px;max-width:280px}
  .grid2{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr 1fr}
  .ecard .k{width:120px}
  .elist{grid-template-columns:1fr 1fr}
  .caps{grid-template-columns:1.15fr .85fr}
  .nav-quiet{display:inline}
  .foot-grid{grid-template-columns:1fr 1fr}
  .wrap{padding:0 24px}
}

/* ---------------- ≥ 900px desktop instrument ---------------- */
@media(min-width:900px){
  .ei-nav{padding:10px 24px;min-height:64px;gap:12px}
  .brand{font-size:22px}
  .hero-mark{display:none}
  .stage{grid-template-columns:var(--rail) 1fr;min-height:calc(100svh - 104px);padding:0}
  /* The successor home hero has no .rail, so the rail column would capture
     .main and collapse the hero copy to ~136px. Give .main the full row. */
  .stage.successor-hero{grid-template-columns:1fr}
  /* ...and it is not a tool instrument, so it does not inherit the viewport-
     tall chassis above. That min-height left the hero as tall as the window
     whatever its copy needed: at 1363x936 the CTA row ended 434px above the
     hero's bottom edge, and the next section showed 37px. The hero is now as
     tall as its copy, with breathing room that grows with the window height
     and stops growing -- so a tall display gets air, not a dead zone. The rail
     offset of the left gates belongs to rail pages; here they frame the hero. */
  .stage.successor-hero{min-height:0}
  .stage.successor-hero .main{
    padding-top:clamp(40px,6vh,104px);padding-bottom:clamp(40px,6vh,120px)
  }
  .stage.successor-hero .gate.tl,
  .stage.successor-hero .gate.bl{left:12px}
  .gate.tl{left:calc(var(--rail) + 18px)}
  .gate.bl{left:calc(var(--rail) + 18px)}
  .rail{
    display:block;border-right:1px solid var(--line);padding:40px 22px 48px;position:relative;
    background:
      repeating-linear-gradient(to bottom, transparent, transparent 11px, var(--line) 11px, var(--line) 12px);
    background-size:14px 100%;background-repeat:no-repeat;background-position:right 0
  }
  .rail-inner{position:sticky;top:88px}
  .rail .fp{width:108px;height:108px;color:var(--jade);margin-bottom:22px}
  .rail h2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-family:var(--mono);font-weight:500;color:var(--jade-text);margin:12px 0 10px}
  .main{padding:56px 48px 72px}
  .promise{font-size:clamp(40px,4.6vw,56px);padding-left:22px}
  .promise span::before{left:-24px;width:10px}
  .promise .em::before{width:14px}
  section.band{padding:72px 0}
  .origin{grid-template-columns:repeat(3,1fr)}
  .origin article{border-bottom:none;border-right:1px solid var(--line)}
  .origin article:last-child{border-right:none}
  .foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}
  .tool-action{position:static;background:none;padding:0}
  .tool-plate{padding:22px}
}

@media(max-width:619px){
  .nav-quiet{display:none}
  .nav-wide{display:none}
}
@media(max-width:380px){
  .ei-nav{padding:8px 10px;gap:6px}
}

/* ---------------- forced colors / Windows High Contrast ---------------- */
@media (forced-colors:active){
  :root{
    --bg:Canvas;--bg-2:Canvas;--surface:Canvas;--ink:CanvasText;--ink-2:CanvasText;
    --mute:GrayText;--line:ButtonText;--line-strong:ButtonText;--jade:Highlight;
    --jade-text:Highlight;--btn:Highlight;--btn-fg:HighlightText;--focus:Highlight;
    --disabled-bg:Canvas;--disabled-fg:GrayText;
    --pass:Highlight;--warn:Mark;--fail:Mark;--na:GrayText;--cyan:Highlight;
    --pearl:Canvas;--paper:Canvas;--navy:Canvas
  }
  .btn,.drop,.ecard,.tool-plate,.stamp,.chip,.cap,.elist a,.origin{border:2px solid ButtonText}
  .btn-primary{background:Highlight;color:HighlightText;border-color:ButtonText}
  .gate{border-color:ButtonText;opacity:1}
  .ecard[data-status]{border-left-width:8px}
}

@media (prefers-contrast:more){
  .drop,.ecard,.tool-plate,.btn-ghost,.cap{border-width:3px}
  .lede,.sub,.dim,.spine p,.cap p{color:var(--ink)}
}

/* ==========================================================================
   READABILITY REPAIR - 2026-09-07
   ==========================================================================
   Same finding as landing/identity.css, and this file matters more: these are
   the styles behind the canonical public /create and /verify pages, so the text
   set smallest here is the text a first-time visitor reads while deciding
   whether to trust a result.

   The palette is byte-identical to identity.css and was measured to clear
   WCAG AA on every text pair, so no colour changes for contrast reasons.

   The sizes were the defect, and they were more severe here than on the
   marketing site: evidence-card keys at 11px tracked uppercase, maturity chips
   at 10.5px, section labels at 10px, the Turnstile failure message at 14px, and
   error body copy at 14.5px. A person who cannot read the error cannot act on
   it, and a label at 10px that says which evidence plane produced an answer is
   the difference between a bounded result and an unexplained one.

   Appended as one reviewable, reversible block.
   ========================================================================== */

/* --- 1. prose floors --- */
body{font-size:17px;line-height:1.6}
.faint{font-size:16px;line-height:1.6}
.sub{font-size:17px;line-height:1.55}
p,li{line-height:1.6}
.split ul{font-size:16px;line-height:1.6}
.cap p,.spine p,.origin p{font-size:16px;line-height:1.6}
.hero-links{font-size:16px}
.positioning{font-size:17px;line-height:1.5}
.next{font-size:16px}
.note{font-size:16px;line-height:1.6}
.nudge{font-size:16px;line-height:1.6}
.elist b{font-size:17px}
.elist span{font-size:15px;line-height:1.55}
footer.ei{font-size:16px;line-height:1.6}
details.tech summary{font-size:16px}
details.tech pre{font-size:13.5px;line-height:1.6}

/* --- 2. the two messages a visitor most needs to be able to read --- */
.err span{font-size:17px;line-height:1.55}
#ts-msg{font-size:16px;line-height:1.55}
.drop span{font-size:17px;line-height:1.5}
.drop .picked{font-size:15px}
.drop-sub{font-size:16px;line-height:1.55}

/* --- 3. evidence card: the result surface, so the least shrinkable --- */
.ecard .row{font-size:16px;line-height:1.55}
.ecard .k{
  font-size:14px;letter-spacing:.02em;text-transform:none;
  font-family:var(--sans);color:var(--mute)
}
.ecard .stamp{font-size:13px;letter-spacing:.06em}
.ecard h3{font-size:14px;letter-spacing:.06em;text-transform:none}

/* --- 4. labels that carry meaning stop being tiny all-caps --- */
.chip{
  font-size:14px;letter-spacing:.01em;text-transform:none;
  padding:4px 11px;line-height:1.45;font-weight:500;font-family:var(--sans)
}
.kicker{font-size:13px;letter-spacing:.12em}
.eyebrow{font-size:13px;letter-spacing:.12em}
.serial{font-size:13px;letter-spacing:.1em}
.split h4{font-size:14px;letter-spacing:.06em;text-transform:none}
.foot-grid h4{font-size:14px;letter-spacing:.06em;text-transform:none}
.rail h2{font-size:14px;letter-spacing:.06em;text-transform:none}

/* --- 5. controls: legible labels, 44px minimum target, AA-passing boundaries --- */
.btn{font-size:17px}
.btn-sm{font-size:16px;min-height:44px;padding:10px 16px}
.nav-quiet{font-size:16px}
input,textarea,select{font-size:16px;min-height:44px}
summary{min-height:44px}
.card,.ecard,.drop,details.tech{border-color:var(--line-strong)}

/* --- 6. hold the layout at 320px without horizontal scrolling --- */
@media(max-width:400px){
  .wrap{padding:0 14px}
  .ecard .row{gap:6px}
  .ecard .v,.mono{overflow-wrap:anywhere;word-break:break-word}
  details.tech pre{font-size:12.5px}
}
.mono{overflow-wrap:anywhere}

/* --- 7. <summary> was never in the focus ring ---
   The three focus-visible selectors list a, button, [tabindex], input and
   textarea. <summary> is natively focusable WITHOUT a tabindex, so it matched
   none of them and every disclosure on the site -- the existing "technical
   detail" panels on /verify as well as the new checksum panels -- fell back to
   the 1px user-agent outline. Measured in Chromium: outline-width 1px,
   style "auto", against the 3px ring every other control gets.
   <select> is added for the same reason. */
summary:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:3px}


/* --- P0 public-launch floors (2026-09-07) --- */
.brand{font-size:22px}
.lede{font-size:19px;line-height:1.55}
.cap p,.spine p,.origin p,.note,.split ul{font-size:17px;line-height:1.6}
.elist span{font-size:16px;line-height:1.55}
.ecard h3{font-size:22px;letter-spacing:-.01em;text-transform:none}
.ways{display:grid;grid-template-columns:1fr;gap:18px;margin-top:8px}
.way{background:var(--surface);border:2px solid var(--line-strong);border-radius:var(--r);padding:24px 22px}
.way h3{margin:0 0 8px;font-size:22px}
.way p{margin:0 0 8px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.ei-nav{position:relative}
.ei-nav .nav-toggle{
  display:none;background:var(--surface);border:2px solid var(--line-strong);
  border-radius:var(--r);color:var(--ink);padding:8px 12px;font-size:16px;
  cursor:pointer;min-width:44px;min-height:44px;font-family:var(--sans)
}
.ei-nav .nav-links{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-right:8px}
.ei-nav .nav-links a{font-size:16px;color:var(--ink-2);min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.ei-nav .nav-links a:hover{color:var(--ink);text-decoration:none}
.ei-nav .nav-links a[aria-current="page"]{color:var(--ink);font-weight:600}
@media(max-width:1024px){
  .ei-nav{flex-wrap:nowrap}
  .ei-nav .nav-toggle{display:inline-flex;align-items:center;justify-content:center;order:2}
  .ei-nav .brand{order:1;margin-right:auto}
  .ei-nav .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;order:5;
    background:var(--navy);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;padding:12px 16px 18px;gap:4px;z-index:40
  }
  .ei-nav .nav-links.open{display:flex}
  .ei-nav .nav-links a{width:100%;padding:12px 10px;font-size:16px}
  .ei-nav .btn{order:3}
}
body.nav-menu-open{overflow:hidden}
.nav-scrim{
  display:none;position:absolute;top:100%;left:0;right:0;height:100svh;z-index:30;
  padding:0;border:0;background:rgba(6,12,18,.72);cursor:pointer
}
header.ei.nav-is-open .nav-scrim{display:block}
.ei-nav .nav-links{z-index:40}
@media(min-width:900px){
  .brand{font-size:22px}
  .ways{grid-template-columns:1fr 1fr}
}
@media(max-width:360px){.brand{font-size:22px}}

/* Inline body links must be distinguishable without colour alone. */
p a, li a, .lede a, .note a, .notice a, .dim a, .faint a, .sub a, .drop-sub a{
  text-decoration:underline;text-underline-offset:3px
}
a.btn, .ei-nav a, .brand, footer.ei a{text-decoration:none}
pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;overflow-x:visible}


/* --- RC 2026-09-09: the last text on the public funnel below a readable size ---

   The 2026-09-07 floors raised body copy, chips, controls and the brand, and
   left three rules under them. Measured in Chromium at 390px on /, /create and
   /verify, these were the only rendered text below 13px on the funnel:

     .ecard-foot   10px    the Evidence Card's own footer -- the words
                           "CHAOSMARK EVIDENCE INSTRUMENT" and "CARRY AND CHECK"
                           that sign the one object the product exists to produce
     .split h4     10.5px  "What we established" / "What we did not establish",
                           the headings over the card's two claim columns
     .launch       11px    the standing ribbon, which carries the launch date
     .spine .n     11px    the 01 / 02 / 03 step numbers in "How it works"

   All four are uppercase mono with wide tracking, which is a deliberate look and
   is also the hardest thing to read small. 13px is the floor the rest of the
   site's label vocabulary already sits at (.kicker, .eyebrow, .serial), so this
   brings the last four in rather than inventing a size for them. Tracking is
   eased slightly where it was widest, because letter-spacing at .14em costs
   legibility back at any size. */
.ecard-foot{font-size:13px;letter-spacing:.10em}
.split h4{font-size:13px;letter-spacing:.10em}
.launch{font-size:13px;letter-spacing:.14em;padding:10px 16px}
.spine .n{font-size:13px}

/* --- the ChaosMark name, at the size a name should be ---

   The brand was pinned at 22px against a >=20px floor, beside a 17px CTA button
   with a filled background. The product's own name was the least prominent
   thing in its header. 26px on desktop restores the ordering; 23px below 600px
   keeps it clear of the Verify/Create pair, which is what set the 22px ceiling
   in the first place. */
.brand{font-size:26px}
@media(max-width:600px){.brand{font-size:23px}}
@media(max-width:430px){
  .ei-nav{padding:8px;gap:4px}
  .ei-nav .brand{font-size:18px;gap:4px;flex:0 0 auto}
  .ei-nav .brand .fp{width:18px;height:18px}
  .ei-nav .btn-sm,.ei-nav .nav-toggle{min-width:44px;padding-inline:6px;font-size:14px}
}

/* .ecard-head is the Evidence Card's own byline. It was missed by the block
   above because it sets its size on the flex container rather than on a text
   class, so a rule naming .ecard-foot did not reach it. Same words, same
   object, same floor. */
.ecard-head{font-size:13px;letter-spacing:.12em}

/* Shared public navigation, last in the cascade so legacy chrome cannot reopen it. */
.public-nav{display:flex;align-items:center;flex-wrap:nowrap;position:relative;max-width:1400px}
.public-nav .brand{flex:0 0 auto;white-space:nowrap}
.public-nav .desktop-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.public-nav .desktop-links>a,.public-nav .desktop-links>details>summary{
  color:#D5DBE0;font-size:15px;font-weight:500;min-height:44px;padding:10px 9px;
  display:inline-flex;align-items:center;cursor:pointer;white-space:nowrap
}
.public-nav .desktop-links>a:hover,.public-nav .desktop-links summary:hover{color:#fff;text-decoration:none}
.public-nav .nav-group{position:relative}
.public-nav .nav-group summary{list-style:none}
.public-nav .nav-group summary::-webkit-details-marker{display:none}
.public-nav .nav-group summary::after{content:"⌄";font-size:13px;margin-left:7px;color:#91A0AC}
.public-nav .nav-group[open] summary::after{content:"⌃"}
.public-nav .nav-popover{position:absolute;z-index:80;top:calc(100% + 4px);left:0;width:270px;
  padding:8px;background:#111820;border:1px solid #33414D;box-shadow:0 16px 40px rgba(0,0,0,.42)}
.public-nav .nav-popover a{display:flex;flex-direction:column;gap:2px;min-height:44px;padding:9px 10px;
  color:#F5F3EC;font-size:15px;justify-content:center}
.public-nav .nav-popover a span{font-size:13px;color:#A7B0B8}
.public-nav .nav-popover a:hover{background:#19232C;text-decoration:none}
.public-nav .nav-action{border:1px solid #526170;margin-left:3px}
.public-nav .nav-action.verify{background:#54C7B4;border-color:#54C7B4;color:#07100E!important;font-weight:700}
.public-nav .nav-action.create{background:transparent;border-color:#526170;color:#D5DBE0!important;font-weight:500}
.public-nav .mobile-links{display:none}
.public-footer{background:#0D1217!important;border-top:1px solid #27313A}

/* The public tools are dark by default as well as in dark OS mode. */
:root{
  --ink:#F5F3EC;--ink-2:#C9D0D6;--mute:#A7B0B8;--line:#27313A;
  --line-strong:#617181;--jade:#54C7B4;--jade-deep:#43AF9E;
  --jade-text:#67D4C2;--jade-soft:rgba(84,199,180,.13);--cyan:#72C6DA;
  --cyan-soft:rgba(114,198,218,.12);--ochre:#D6B86C;
  --ochre-soft:rgba(214,184,108,.13);--coral:#FF9B91;
  --coral-soft:rgba(255,155,145,.13);--navy:#080B0E;--navy-2:#0D1217;
  --bg:#080B0E;--bg-2:#0D1217;--surface:#111820;--paper:#111820;--btn:#54C7B4;
  --btn-fg:#07100E;--disabled-bg:#192129;--disabled-fg:#B7C0C8;
  --focus:#70E0CD;--pass:#67D4C2;--pass-bg:rgba(84,199,180,.13);
  --warn:#D6B86C;--warn-bg:rgba(214,184,108,.13);--fail:#FF9B91;
  --fail-bg:rgba(255,155,145,.13);--na:#C9D0D6;
  --na-bg:rgba(201,208,214,.1);color-scheme:dark;
}
@media(max-width:900px){
  .public-nav{flex-wrap:wrap}
  .public-nav .desktop-links{display:none}
  .public-nav .nav-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;order:2}
  .public-nav .mobile-links{display:none;order:3;flex:1 0 100%;position:static;
    background:#080B0E;border-top:1px solid #27313A;border-bottom:0;padding:10px 0 16px;margin-left:0}
  .public-nav .mobile-links.open{display:flex}
  .public-nav .mobile-links>a,.public-nav .mobile-links>details>summary{font-size:17px;min-height:48px;padding:12px 10px;color:#F5F3EC}
  .public-nav .mobile-links .nav-action{margin-left:0}
  .public-nav .mobile-links .nav-popover{position:static;width:auto;box-shadow:none;margin:0 8px 8px;background:#0D1217}
  .public-nav .mobile-links .nav-popover a{padding-left:18px}
}

/* Between 901px and 1024px both navigation systems claimed the header: the
   shared public nav showed its desktop links (above 900px) while the older
   instrument rules (up to 1024px) re-ordered the brand to the middle and showed
   the Menu button. A 1280px window at 125% zoom is exactly 1024 CSS px, so the
   header read "Products Solutions Developers Trust Verify Create ChaosMark
   Menu". The shared public nav owns every width above its own 900px
   breakpoint. */
@media(min-width:901px){
  .public-nav .brand{order:0}
  .public-nav .nav-toggle,
  .public-nav .mobile-links,
  .public-nav .mobile-links.open{display:none}
}

/* "Explore products" jumps to #products. Without an offset the section's first
   line lands under the sticky header (61-67px). */
[data-page="home"] #products{scroll-margin-top:72px}

/* P0 IA: six footer groups (brand + Use / Build / Enterprise / Trust / Languages). */
@media(min-width:760px){.public-footer .foot-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.public-footer .foot-grid{grid-template-columns:1.5fr repeat(5,1fr)}}
/* P0 IA: the hero states what is free and available, and the four intents follow it. */
.hero-facts{margin:14px 0 0;font-family:var(--mono);font-size:16px;letter-spacing:.02em;color:var(--ink-2)}
.hero-secondary{margin:8px 0 0;font-size:16px;color:var(--ink-2)}
@media(min-width:720px){.intent-grid{grid-template-columns:1fr 1fr}}
.intent-grid .cap p:last-child{display:flex;flex-wrap:wrap;gap:10px}

/* P0 IA: eight primary links plus the language selector. */
.public-nav .lang-switch{display:inline-flex;align-items:center;gap:2px;margin-left:10px;padding-left:10px;border-left:1px solid #33414D}
.public-nav .lang-switch a{color:#A7B0B8;font-size:13px;font-weight:500;min-height:44px;min-width:44px;padding:10px 4px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.public-nav .lang-switch a[aria-current="true"]{color:#F5F3EC;text-decoration:underline;text-underline-offset:4px}
.public-nav .lang-switch a:hover{color:#fff}
@media(max-width:1240px){.public-nav .desktop-links>a{font-size:14px;padding:10px 7px}.public-nav .lang-switch{margin-left:6px;padding-left:6px}}
@media(max-width:900px){
  .public-nav{flex-wrap:wrap}
  .public-nav .desktop-links{display:none}
  .public-nav .nav-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;order:2}
  .public-nav .mobile-links{display:none;order:3;flex:1 0 100%;position:static;
    background:#080B0E;border-top:1px solid #27313A;border-bottom:0;padding:10px 0 16px;margin-left:0}
  .public-nav .mobile-links.open{display:flex}
  .public-nav .mobile-links>a,.public-nav .mobile-links>details>summary{font-size:17px;min-height:48px;padding:12px 10px;color:#F5F3EC}
  .public-nav .mobile-links .nav-action{margin-left:0}
  .public-nav .mobile-links .nav-popover{position:static;width:auto;box-shadow:none;margin:0 8px 8px;background:#0D1217}
  .public-nav .mobile-links .nav-popover a{padding-left:18px}
}
@media(max-width:900px){.public-nav .mobile-links .lang-switch{border-left:0;margin:0 0 6px;padding:0 4px 8px;border-bottom:1px solid #27313A;width:100%;flex-wrap:wrap}.public-nav .mobile-links .lang-switch a{font-size:16px;min-height:44px;padding:10px 12px}}
/* P0 IA: "What you can do today" table. */
.today-table{display:grid;gap:0;border:1px solid var(--line,#27313A);margin-top:18px}
.today-row{display:grid;grid-template-columns:1fr;gap:6px;padding:14px 16px;border-top:1px solid var(--line,#27313A)}
.today-row:first-child{border-top:0}
.today-head{display:none}
.today-row .chip{margin-right:6px}
@media(min-width:760px){.today-row{grid-template-columns:1.2fr 1.6fr 1fr;align-items:center;gap:16px}.today-head{display:grid;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}}

/* P0 IA: keyboard users can skip the header. */
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 14px;background:#54C7B4;color:#07100E;font-weight:700;border-radius:2px}
.skip-link:focus{top:10px;outline:3px solid #F5F3EC;outline-offset:2px}
#main:focus{outline:none}
@media(min-width:901px) and (max-width:1100px){.public-nav .desktop-links>a{font-size:13px;padding:10px 3px}.public-nav .lang-switch{margin-left:4px;padding-left:4px}}
/* Seven languages: preserve 44px targets without squeezing the wordmark or
   pushing a translated header past the viewport. The room comes from flex
   gaps between items, which the links' own padding already separates. */
@media(min-width:901px){.public-nav .desktop-links,.public-nav .desktop-links .lang-switch{gap:0}}
@media(min-width:901px) and (max-width:1100px){.public-nav .desktop-links .lang-switch{margin-left:0;padding-left:1px}}
@media(min-width:1241px) and (max-width:1360px){
  .public-nav .desktop-links>a{font-size:14px;padding:10px 7px}
  .public-nav .desktop-links .lang-switch{margin-left:6px;padding-left:6px}
}
@media(min-width:1361px){.public-nav .desktop-links .lang-switch{margin-left:7px;padding-left:7px}}
@media(min-width:901px) and (max-width:1000px){.public-nav .desktop-links>a{font-size:13px;padding:10px 4px}.public-nav .brand{font-size:21px}.public-nav .lang-switch a{font-size:12px;padding:10px 2px}}
[data-page="home"] #today,[data-page="home"] #checks,[data-page="home"] #results{scroll-margin-top:72px}
.hero-facts{margin-top:10px}.hero-secondary{margin-top:4px}
@media(min-width:901px) and (max-width:960px){.public-nav .desktop-links{gap:0}.public-nav .desktop-links>a{padding:10px 3px;font-size:12.5px}.public-nav .lang-switch{margin-left:2px;padding-left:2px}}
/* Home: the "How it works" journey and the labelled sample result. */
[data-page="home"] #how-it-works,[data-page="home"] #sample-result{scroll-margin-top:72px}
.journey{margin:18px 0 12px;padding:0;list-style:none;counter-reset:step;display:grid;gap:10px}
.journey li{counter-increment:step;position:relative;padding:12px 14px 12px 52px;border:2px solid var(--line-strong);background:var(--bg-2);color:var(--ink-2)}
.journey li::before{content:counter(step);position:absolute;left:14px;top:11px;width:26px;height:26px;display:grid;place-items:center;font-family:var(--mono);font-size:13px;border:2px solid currentColor;color:var(--jade-text)}
.journey b{color:var(--ink)}
.annotations{margin:14px 0 16px;padding-left:20px;color:var(--ink-2)}
.annotations li{margin:0 0 8px}
.sample-result{display:grid;gap:14px;align-content:start}
.sample-flag{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--warn);border:2px dashed var(--warn);padding:6px 10px;justify-self:start}
/* Home hero, 2026-10-01 comprehension repair: category, headline, the two
   checks, the reason, the actions, the enterprise path and the C2PA line on
   the left; the example Free Verify result and its short explanation on the
   right (below it on narrow screens). No table above the fold. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.hero-copy,.hero-aside{min-width:0}
.successor-hero .hero-copy h1{font-size:clamp(32px,8.4vw,54px);margin-bottom:.3em}
.successor-hero .hero-copy .sub{max-width:32em;margin-bottom:.7em}
.hero-why{margin:0;font-size:17px;line-height:1.5;font-weight:600;color:var(--ink);max-width:34em}
.successor-hero .cta-row{margin-top:20px}
.hero-enterprise a{font-weight:600;white-space:nowrap}
.hero-cred{margin:12px 0 0;font-family:var(--mono);font-size:16px;letter-spacing:0;line-height:1.6}
.hero-cred a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;overflow-wrap:anywhere}
.hero-cred a:hover{color:var(--jade-text)}
.hero-hosted{margin:2px 0 0;font-size:16px;line-height:1.5;color:var(--ink-2)}
.hero-example{border:2px solid var(--line-strong);background:var(--surface);padding:16px 18px;gap:12px}
.example-rows{display:grid;gap:0;border-top:1px solid var(--line)}
.example-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 0;border-bottom:1px solid var(--line)}
.example-k{font-weight:600;color:var(--ink)}
.hero-example .stamp{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;color:var(--na);border:3px dotted var(--na);background:var(--na-bg);white-space:nowrap}
.example-cue{margin:-4px 0 0;color:var(--mute);font-size:16px}
.example-note{margin:0;color:var(--ink-2);font-size:16px}
.example-score{margin:0;font-weight:600;color:var(--ink)}
.hero-under{margin-top:18px}
.hero-under .under-k{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--jade-text);margin:14px 0 4px}
.hero-under p{margin:0;color:var(--ink-2);font-size:16px}
.hero-brand{margin-top:16px!important;font-weight:600;color:var(--ink)!important;border-left:2px solid var(--jade);padding-left:12px}
.paths{display:grid;gap:14px;margin-top:18px}
.path{display:flex;flex-direction:column}
.path .path-note{margin-top:10px;font-size:16px;color:var(--mute)}
.path .path-cta{margin-top:auto;padding-top:14px}
.path .path-cta .btn{width:100%}
.beyond{margin-top:18px}
@media(min-width:760px){.paths{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Keep the paid actions and enterprise path inside the first screen at 125%
   zoom. The two-column composition begins only once both columns have enough
   width for the expanded seven-format commercial copy. */
@media(min-width:1200px){
  .hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:start}
  .hero-aside{padding-top:6px}
}
@media(max-width:899px){
  .stage.successor-hero .main{padding-top:20px;padding-bottom:28px}
  .successor-hero .kicker{margin-bottom:10px}
}
[data-page="home"] #paths,[data-page="home"] #beyond-files{scroll-margin-top:72px}