/* ChaosMark site identity — shared chrome for customer-visible pages.
   Pearl / ink / jade / navy. Same product as the public Evidence Instrument.
   Not brass. Not ChronoVerify. CSS only. No magnifier. No certification seal.

   Tokens match landing/instrument/instrument.css. Enterprise pages are denser
   and more institutional (navy header + navy hero → pearl surfaces) but they
   are the same company. */

:root{
  --pearl:#F5F3EC;
  --pearl-2:#EBE7DC;
  --paper:#101820;          /* HTML alias: primary text on light surfaces */
  --ink:#101820;
  --ink-2:#3E4A54;
  --mute:#4E5862;
  --dim:#3E4A54;
  --faint:#4E5862;
  --line:#C9C4B8;
  --line-strong:#8F8A7E;
  --line2:#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:#FFFEF9;
  --panel:#FFFEF9;
  --panel2:#EBE7DC;
  --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;
  --tap:56px;
  --r:3px;
  --motion-quick:160ms;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root{
    --pearl:#F5F3EC;
    --pearl-2:#EBE7DC;
    --paper:#F5F3EC;
    --ink:#F5F3EC;
    --ink-2:#C5CBD1;
    --mute:#9AA4AD;
    --dim:#C5CBD1;
    --faint:#9AA4AD;
    --line:#2A3D4E;
    --line-strong:#5A7388;
    --line2:#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;
    --panel:#152536;
    --panel2:#122233;
    --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%;scroll-padding-top:80px} /* in-page links land below the sticky header */
@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,textarea:focus-visible{
  outline:3px solid var(--focus);outline-offset:3px
}
img,svg{max-width:100%}
code,pre,.mono{font-family:var(--mono)}
pre{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:16px 18px;overflow-x:auto;font-size:13px;line-height:1.55;color:var(--ink-2)
}
code{font-size:.92em;color:var(--jade-text);overflow-wrap:anywhere}
pre code{color:inherit;font-size:inherit}
::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: Archivo for product voice; Newsreader for the wordmark only ---------- */
h1,h2,h3{
  font-family:var(--sans);font-weight:600;line-height:1.12;margin:0 0 .45em;
  letter-spacing:-.03em;text-wrap:balance
}
h1{font-size:clamp(32px,6vw,48px)}
h2{font-size:clamp(24px,4vw,34px)}
h3{font-size:20px;line-height:1.3;letter-spacing:-.01em}
h1 em,h2 em{font-style:normal;color:var(--jade-text)}
p{margin:0 0 1em;text-wrap:pretty}
.lede{font-size:18px;color:var(--ink-2);max-width:44em}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--jade-text);margin-bottom:14px;display:block
}
.dim{color:var(--ink-2)}
.faint{color:var(--mute);font-size:14px}
.small{font-size:14px}

/* ---------- header: navy institutional bar, same mark family as the instrument ---------- */
.proto-banner{
  background:var(--jade);color:var(--btn-fg);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;text-align:center;padding:8px 14px
}
.proto-banner strong{font-weight:700}
header.site{
  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;--paper:#F5F3EC;--dim:#C5CBD1;--mute:#9AA4AD;
  --jade:#4BB8A6;--jade-text:#4BB8A6;--jade-deep:#3DAB9A;
  --btn:#4BB8A6;--btn-fg:#0D1B2A;--line:#2A3D4E;--line2:#5A7388;--line-strong:#5A7388;
  --surface:transparent
}
.nav{
  max-width:var(--maxw);margin:0 auto;padding:8px 16px;display:flex;
  align-items:center;gap:12px;min-height:56px;flex-wrap:wrap;position:relative
}
.brand{
  font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:-.02em;
  color:#F5F3EC;display:flex;align-items:center;gap:9px;order:1
}

/* Public-experience successor: one near-black system, independent of OS theme. */
:root{
  --paper:#F5F3EC;--ink:#F5F3EC;--ink-2:#C9D0D6;--mute:#A7B0B8;
  --dim:#C9D0D6;--faint:#A7B0B8;--line:#27313A;--line-strong:#617181;
  --line2:#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;--panel:#111820;
  --panel2:#0D1217;--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;
}

/* Shared desktop/mobile IA. DOM order follows the requested reading order. */
.public-nav{flex-wrap:nowrap}
.desktop-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.desktop-links>a,.desktop-links>details>summary{
  color:#D5DBE0;font-size:15px;font-weight:500;min-height:44px;padding:10px 11px;
  display:inline-flex;align-items:center;cursor:pointer;white-space:nowrap
}
.desktop-links>a:hover,.desktop-links summary:hover{color:#fff;text-decoration:none}
.nav-group{position:relative}
.nav-group summary{list-style:none}
.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary::after{content:"⌄";font-size:13px;margin-left:7px;color:#91A0AC}
.nav-group[open] summary::after{content:"⌃"}
.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)}
.nav-popover a{display:flex;flex-direction:column;gap:2px;min-height:44px;padding:9px 10px;
  color:#F5F3EC;font-size:15px;justify-content:center}
.nav-popover a span{font-size:13px;color:#A7B0B8}
.nav-popover a:hover{background:#19232C;text-decoration:none}
.nav-action{border:1px solid #526170;margin-left:3px}
.nav-action.verify{background:#54C7B4;border-color:#54C7B4;color:#07100E!important;font-weight:700}
.nav-action.create{background:transparent;border-color:#526170;color:#D5DBE0!important;font-weight:500}
.mobile-links{display:none}
.public-footer{background:#0D1217;border-top:1px solid #27313A}

@media(max-width:900px){
  .public-nav{flex-wrap:wrap}
  .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}
  .public-nav .mobile-links.open{display:flex}
  .mobile-links>a,.mobile-links>details>summary{font-size:17px;min-height:48px;padding:12px 10px;color:#F5F3EC}
  .mobile-links .nav-action{margin-left:0}
  .mobile-links .nav-popover{position:static;width:auto;box-shadow:none;margin:0 8px 8px;background:#0D1217}
  .mobile-links .nav-popover a{padding-left:18px}
}
.brand:hover{text-decoration:none}
.nav .brand{min-height:44px}
/* Broken evidence ring + central crosshair. Not a filled seal. Not a spinner. */
.brand .seal{
  width:18px;height:18px;border:2px solid #4BB8A6;border-radius:50%;
  border-right-color:transparent;position:relative;flex:none;transform:rotate(-28deg)
}
.brand .seal::before,.brand .seal::after{
  content:"";position:absolute;left:50%;top:50%;background:#4BB8A6;
  transform:translate(-50%,-50%) rotate(28deg)
}
.brand .seal::before{width:8px;height:2px}
.brand .seal::after{width:2px;height:8px}
.nav-links{display:flex;gap:18px;margin-left:auto;align-items:center;order:2;flex-wrap:wrap}
.nav-links a{color:#C5CBD1;font-size:14.5px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.nav-links a:hover{color:#F5F3EC;text-decoration:none}
.nav-links a[aria-current="page"]{color:#F5F3EC}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:var(--r);font-size:14.5px;font-weight:600;
  border:2px solid transparent;cursor:pointer;font-family:var(--sans);
  text-align:center;min-height:48px;letter-spacing:.01em
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--btn);color:var(--btn-fg);border-color:var(--btn)}
.btn-primary:hover{background:var(--jade-deep);border-color:var(--jade-deep)}
.btn-ghost{border-color:var(--line-strong);color:inherit;background:transparent}
.btn-ghost:hover{border-color:var(--jade);color:var(--jade-text);background:var(--jade-soft)}
.btn-lg{padding:14px 24px;font-size:16px;min-height:var(--tap)}
header.site .btn-primary{background:#4BB8A6;color:#0D1B2A;border-color:#4BB8A6;min-height:var(--tap)}
header.site .btn-primary:hover{background:#3DAB9A;border-color:#3DAB9A}
header.site .btn-ghost{color:#F5F3EC;border-color:#5A7388}
header.site .btn-ghost:hover{border-color:#4BB8A6;color:#4BB8A6;background:rgba(75,184,166,.14)}
.nav-toggle{
  display:none;margin-left:auto;background:none;border:2px solid #5A7388;border-radius:var(--r);
  color:#F5F3EC;padding:8px 12px;font-size:15px;cursor:pointer;min-width:var(--tap);min-height:var(--tap)
}

@media(max-width:900px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--navy);border-bottom:1px solid #2A3D4E;
    flex-direction:column;align-items:stretch;padding:12px 16px 18px;gap:4px
  }
  .nav-links.open{display:flex}
  .nav-links a, .nav-links .btn{
    min-height:var(--tap);display:flex;align-items:center;width:100%;
    padding:12px 10px
  }
  .nav-toggle{display:block;order:4;margin-left:0}
}

/* ---------- layout ---------- */
section.band{padding:64px 0;border-bottom:1px solid var(--line);background:var(--bg)}
section.band.tight{padding:48px 0}
.hero{
  padding:72px 0 56px;border-bottom:1px solid #2A3D4E;
  background:var(--navy);color:#F5F3EC
}
.hero h1,.hero h2,.hero h3{color:#F5F3EC}
.hero h1 em,.hero h2 em{color:#4BB8A6;font-style:normal}
.hero .lede,.hero .dim{color:#C5CBD1}
.hero .faint{color:#9AA4AD}
.hero .eyebrow{color:#4BB8A6}
/* Hero link colour is for LINKS, not for buttons.
   `.hero a` is (0,1,1) and `.btn-primary` is (0,1,0), so the bare descendant
   selector silently won and every primary CTA inside a hero rendered mint
   (#4BB8A6) on the jade button fill (#0B5F54) -- 3.13:1, under the 4.5:1 floor.
   The button's own foreground is 7.56:1 light and 7.21:1 dark. Excluding
   `.btn-primary` here restores it without touching plain hero links or the
   ghost button, both of which keep the mint they already had. */
.hero a:not(.btn-primary){color:#4BB8A6}
/* Belt and braces at (0,2,0): a future `.hero`-scoped anchor rule cannot take
   the CTA foreground back. tests/test_site_identity.py fails if it does. */
.hero .btn-primary{color:var(--btn-fg)}
/* The focus ring had the mirror-image problem, and it is worse: a control that
   cannot be seen when focused is unusable by keyboard, not merely low-contrast.
   `--focus` is `--jade-text` (#0A5850) in the LIGHT theme, but `.hero` is navy
   (#0D1B2A) in BOTH themes -- the one region whose background does not follow
   the theme -- so a light-theme keyboard user got a 2.09:1 ring around exactly
   these CTAs: drawn, and invisible. Scoped to .hero for that reason, and set to
   the mint the hero already uses for emphasis: 7.21:1. The dark theme already
   resolved --focus to this colour, so nothing changes there. */
.hero a:focus-visible,.hero button:focus-visible,
.hero summary:focus-visible,.hero [tabindex]:focus-visible{outline-color:#4BB8A6}
.grid2{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
.grid3{display:grid;grid-template-columns:1fr;gap:16px}
.grid4{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:620px){
  .grid2{grid-template-columns:1fr 1fr;gap:40px}
  .grid3,.grid4{grid-template-columns:1fr 1fr}
  .wrap{padding:0 24px}
}
@media(min-width:900px){
  .grid3{grid-template-columns:repeat(3,1fr);gap:22px}
  .grid4{grid-template-columns:repeat(4,1fr);gap:22px}
  h1{font-size:clamp(36px,4.4vw,52px)}
}

.card{
  background:var(--surface);border:2px solid var(--line-strong);border-radius:var(--r);padding:24px
}
.card h3{margin-top:2px}
.card p{color:var(--ink-2);font-size:15px;margin-bottom:0}
a.card{display:block;color:var(--ink);transition:border-color var(--motion-quick) var(--ease)}
a.card:hover{text-decoration:none;border-color:var(--jade)}
.card .eyebrow{margin-bottom:8px}

/* ---------- chips & maturity (structure + word; not color alone) ---------- */
.chip{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 9px;border-radius:2px;border:2px solid;vertical-align:middle
}
.chip.pass{color:var(--pass);border-color:var(--pass);background:var(--pass-bg);border-style:solid}
.chip.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-bg);border-style:double}
.chip.fail{color:var(--fail);border-color:var(--fail);background:var(--fail-bg);border-style:dashed}
.chip.na{color:var(--na);border-color:var(--line-strong);background:var(--na-bg);border-style:dotted}
.chip.brand{
  color:var(--jade-text);border-color:var(--jade);background:var(--jade-soft);border-style:solid
}

/* ---------- ledger ---------- */
.ledger{background:var(--surface);border:2px solid var(--line-strong);border-radius:var(--r);overflow:hidden}
.ledger-head{
  padding:13px 18px;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)
}
.hero .ledger{background:#152536;border-color:#5A7388}
.hero .ledger-head{color:#9AA4AD;border-color:#2A3D4E}
.hero .lrow{border-color:#2A3D4E}
.hero .lrow .k{color:#9AA4AD}
.hero .lrow .v{color:#F5F3EC}
.lrow{display:flex;align-items:baseline;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line);font-size:14px}
.lrow:last-child{border-bottom:none}
.lrow .k{font-family:var(--mono);font-size:12px;color:var(--mute);width:170px;flex:none;letter-spacing:.03em}
.lrow .v{color:var(--ink);flex:1;min-width:0;overflow-wrap:anywhere}
.lrow .v.mono{font-size:12.5px;color:var(--ink-2)}
.lrow .chip{flex:none}
@media(max-width:600px){.lrow{flex-wrap:wrap}.lrow .k{width:100%}}

/* ---------- pipeline ---------- */
.pipe{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin:34px 0}
.pipe .node{
  background:var(--surface);border:2px solid var(--line-strong);border-radius:var(--r);
  padding:14px 18px;text-align:center;flex:1;min-width:140px
}
.pipe .node b{display:block;font-size:14px;letter-spacing:.02em}
.pipe .node span{font-size:12.5px;color:var(--mute)}
.pipe .arr{display:flex;align-items:center;padding:0 10px;color:var(--jade);font-family:var(--mono);flex:none}
@media(max-width:760px){.pipe{flex-direction:column}.pipe .arr{transform:rotate(90deg);justify-content:center;padding:2px 0}}

/* ---------- proves / does not ---------- */
.proves{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:760px){.proves{grid-template-columns:1fr 1fr}}
.proves .col{background:var(--surface);border:2px solid var(--line-strong);border-radius:var(--r);padding:24px 26px}
.proves h3{font-size:13px;font-family:var(--mono);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.proves .yes h3{color:var(--pass)} .proves .no h3{color:var(--fail)}
.proves .no{border-style:dashed}
.proves ul{margin:12px 0 0;padding-left:0;list-style:none}
/* The verification-scope ledger. These lines are the limitations -- "does not
   establish authorship", "holds no authority to operate" -- and they were set
   at 14.5px beside 17px capability copy, which is the fine-print pattern this
   page exists to avoid. A denial a reader skips is a denial that did not
   happen. Raised to the 16px prose floor. */
.proves li{
  padding:8px 0 8px 26px;border-bottom:1px solid var(--line);font-size:16px;
  color:var(--ink-2);position:relative;line-height:1.55
}
.proves li:last-child{border-bottom:none}
.proves .yes li::before{content:"✓";position:absolute;left:2px;color:var(--pass);font-family:var(--mono)}
.proves .no li::before{content:"✗";position:absolute;left:2px;color:var(--fail);font-family:var(--mono)}

/* ---------- vertical page pattern ---------- */
.vp-step{border-left:2px solid var(--line-strong);padding:2px 0 34px 28px;position:relative}
.vp-step:last-child{padding-bottom:6px}
.vp-step::before{
  content:attr(data-n);position:absolute;left:-13px;top:0;width:24px;height:24px;border-radius:50%;
  background:var(--bg);border:2px solid var(--jade);color:var(--jade-text);
  font-family:var(--mono);font-size:11px;display:flex;align-items:center;justify-content:center
}
.vp-step h2{font-size:22px}
.vp-step p,.vp-step li{color:var(--ink-2)}
.vp-step ul{padding-left:20px}

/* ---------- verify UX (sample / illustration pages) ---------- */
.dropzone{
  border:2px dashed var(--line-strong);border-radius:var(--r);padding:52px 28px;text-align:center;
  cursor:pointer;transition:border-color var(--motion-quick) var(--ease),background var(--motion-quick) var(--ease);
  min-height:160px
}
.dropzone:hover,.dropzone.drag{border-color:var(--jade);background:var(--jade-soft)}
.dropzone b{display:block;font-size:18px;margin-bottom:6px}
.dropzone span{color:var(--mute);font-size:14px}
.samples{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.samples button{
  background:var(--surface);border:2px solid var(--line-strong);color:var(--ink-2);
  border-radius:2px;padding:10px 15px;font-size:13px;cursor:pointer;font-family:var(--mono);min-height:44px
}
.samples button:hover{border-color:var(--jade);color:var(--ink)}
.privacy-note{
  background:var(--cyan-soft);border:2px solid var(--cyan);border-left-width:4px;
  border-radius:var(--r);padding:16px 20px;font-size:14px;color:var(--ink-2);margin-top:22px
}
.result-block{margin-top:30px}
.verdict-banner{border-radius:var(--r);padding:22px 26px;border:2px solid;margin-bottom:22px}
.verdict-banner.pass{border-color:var(--pass);background:var(--pass-bg);border-style:solid}
.verdict-banner.warn{border-color:var(--warn);background:var(--warn-bg);border-style:double}
.verdict-banner.fail{border-color:var(--fail);background:var(--fail-bg);border-style:dashed}
.verdict-banner.na{border-color:var(--na);background:var(--na-bg);border-style:dotted}
.verdict-banner h3{margin:0 0 4px;font-family:var(--mono);letter-spacing:.06em;font-size:14px;text-transform:uppercase}
.verdict-banner p{margin:0;color:var(--ink-2);font-size:14.5px}
details.tech{background:var(--surface);border:2px solid var(--line-strong);border-radius:var(--r);margin-top:18px}
details.tech summary{padding:14px 20px;cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink-2);min-height:48px}
details.tech[open] summary{border-bottom:1px solid var(--line)}
details.tech .inner{padding:18px 20px}
.spinner{
  width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--jade);
  border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 14px
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- agent timeline demo ---------- */
.agent-flow{display:flex;flex-direction:column;gap:0;margin:26px 0}
.actor-row{display:flex;gap:16px;align-items:flex-start}
.actor-badge{
  flex:none;width:118px;text-align:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding-top:16px
}
.evt{
  flex:1;background:var(--surface);border:2px solid var(--line-strong);border-radius:var(--r);
  padding:16px 20px;margin-bottom:14px;cursor:pointer;transition:border-color var(--motion-quick) var(--ease)
}
.evt:hover{border-color:var(--line-strong)}
.evt.active{border-color:var(--jade)}
.evt.tampered{border-color:var(--fail)}
.evt .evt-top{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.evt b{font-size:15px}
.evt .src{font-family:var(--mono);font-size:11px;color:var(--mute)}
.evt p{margin:8px 0 0;font-size:13.5px;color:var(--ink-2)}
.link-line{margin:-8px 0 14px 134px;border-left:2px solid var(--line-strong);height:18px;position:relative}
.link-line.ok{border-color:var(--pass)}
.link-line.bad{border-color:var(--fail)}
@media(max-width:700px){.actor-badge{width:74px}.link-line{margin-left:90px}}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:500}
td{color:var(--ink-2)} td:first-child{color:var(--ink)}
.table-wrap{overflow-x:auto;border:2px solid var(--line-strong);border-radius:var(--r);outline:none}
.table-wrap:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.table-wrap table{min-width:min(640px,100%)} .table-wrap th,.table-wrap td{border-bottom:1px solid var(--line)}
.table-wrap tr:last-child td{border-bottom:none}

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

/* ---------- misc ---------- */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.cta-row .btn{flex:1 1 auto;min-height:var(--tap)}
.notice{background:var(--ochre-soft);border:2px solid var(--ochre);border-radius:var(--r);padding:14px 18px;font-size:14px;color:var(--ink-2)}
.notice b{color:var(--ochre)}
.divider-label{
  display:flex;align-items:center;gap:16px;margin:40px 0 22px;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)
}
.divider-label::after{content:"";flex:1;height:1px;background:var(--line)}
.fade-in{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.fade-in.vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade-in{opacity:1;transform:none}}

/* header CTA layout */
.brand{order:1}.nav-links{order:2}.nav-verify{order:3;white-space:nowrap}.nav-toggle{order:4;margin-left:0}
.nav-links .nav-create{padding:8px 16px;font-size:14px}
@media(max-width:900px){
  .nav-verify{margin-left:auto;padding:8px 14px;font-size:13.5px}
  .nv-x{display:none}
  .nav-links .nav-create{align-self:stretch;text-align:center;width:100%}
}
@media(max-width:480px){.nav{gap:8px;padding:8px 12px}}
@media(max-width:430px){
  .foot-grid{grid-template-columns:1fr}
  .lrow .v{flex-basis:100%}
  .dropzone{padding:38px 16px}
  .cta-row .btn{flex:1 1 auto;text-align:center}
}
@media(max-width:360px){.brand{font-size:17px}}
.nav-links .nav-create{order:10}

textarea,input[type="text"],input[type="email"]{
  background:var(--surface);border:2px solid var(--line-strong);border-radius:var(--r);
  color:var(--ink);font-family:inherit;max-width:100%
}

@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;
    --pass:Highlight;--warn:Mark;--fail:Mark;--na:GrayText;--cyan:Highlight;
    --pearl:Canvas;--paper:CanvasText;--navy:Canvas;--dim:CanvasText;--faint:GrayText
  }
  .btn,.card,.ledger,.chip,.dropzone,.notice,.evt,.pipe .node{border:2px solid ButtonText}
  .btn-primary{background:Highlight;color:HighlightText;border-color:ButtonText}
  header.site,.hero{background:Canvas;color:CanvasText;border-color:ButtonText}
  .brand .seal{border-color:ButtonText}
  .brand .seal::before,.brand .seal::after{background:ButtonText}
}

@media (prefers-contrast:more){
  .card,.ledger,.btn-ghost,.dropzone{border-width:3px}
  .lede,.dim,.card p{color:var(--ink)}
}

/* ==========================================================================
   READABILITY REPAIR - 2026-09-07
   ==========================================================================
   The pearl/navy/jade palette was measured and is NOT the problem: every text
   pair in it already clears WCAG AA on its own background (ink 16.1:1,
   ink-2 8.2:1, mute 6.5:1, jade-text 7.5:1, white-on-jade 7.6:1, and each
   status colour on its own soft ground between 5.6:1 and 6.8:1). So nothing
   below changes a colour for contrast's sake, and the identity is untouched.

   What was actually wrong was size. Body copy was set at 16.5px, but almost
   every derived class stepped down from it -- .faint and .small to 14px, card
   copy to 15px, ledger rows to 14px, ledger keys to 12px, table text to 14px,
   the footer to 14px -- and the labels carrying the most important information
   on the site (maturity chips, ledger keys, table headers) were 11-12px
   monospace uppercase with wide tracking, which is the least legible
   combination on the page holding the most consequential words.

   Two structural corrections come with it:

   * --line (#C9C4B8) is 1.57:1 on pearl. That is fine for a decorative rule
     and fails WCAG 1.4.11 for the boundary of a control, so interactive
     boundaries move to --line-strong (3.1:1), which passes.
   * Touch targets are floored at 44px, and the layout is held free of
     horizontal scrolling down to a 320px viewport.

   Rules are appended rather than edited in place so the repair is reviewable
   as one block and reversible as one block.
   ========================================================================== */

/* --- 1. body copy floors: nothing that is prose drops below 16px --- */
body{font-size:17px;line-height:1.6}
.faint,.small{font-size:16px;line-height:1.6}
.card p{font-size:16px;line-height:1.6}
.lede{font-size:19px;line-height:1.55}
.lede-tight{margin-bottom:26px}
p,li{line-height:1.6}
.dim li,ul.small li{line-height:1.6}
pre{font-size:14.5px;line-height:1.6}
table{font-size:16px}
footer.site{font-size:16px;line-height:1.6}
.notice{font-size:16px;line-height:1.6}
.evt p{font-size:16px;line-height:1.6}
.evt .src{font-size:13px}
.pipe .node b{font-size:16px}
.pipe .node span{font-size:14px}
.dropzone span{font-size:16px}
.verdict-banner p{font-size:17px;line-height:1.55}
.verdict-banner h3{font-size:16px;letter-spacing:.04em}

/* --- 2. ledger: the densest information on the site, so the least shrinkable --- */
.lrow{font-size:16px;line-height:1.55;align-items:flex-start}
.lrow .k{font-size:14px;letter-spacing:.02em;line-height:1.55;width:180px}
.lrow .v.mono{font-size:14px;line-height:1.6}
.ledger-head{font-size:14px;letter-spacing:.06em;text-transform:none}

/* --- 3. labels that carry meaning stop being tiny all-caps ---
   A maturity chip is the single most consequential word in its card: it is the
   difference between "you can rely on this" and "you cannot". It was set in
   11px tracked-out uppercase mono. Sentence case at 14px reads at a glance and
   keeps the chip's shape, border-style and colour doing their existing work --
   status is still never carried by colour alone. */
.chip{
  font-size:14px;letter-spacing:.01em;text-transform:none;
  padding:4px 11px;line-height:1.45;font-weight:500
}
.eyebrow{font-size:13px;letter-spacing:.12em}
.serial{font-size:13px;letter-spacing:.1em}
.divider-label{font-size:13px;letter-spacing:.1em}
.proves h3{font-size:15px;letter-spacing:.04em;text-transform:none}
th{font-size:14px;letter-spacing:.03em;text-transform:none}
footer h4{font-size:14px;letter-spacing:.06em;text-transform:none}
.proto-banner{font-size:14px;letter-spacing:.04em}
details.tech summary{font-size:15px;letter-spacing:.03em}

/* --- 4. the brand stays a name, not an eyebrow --- */
.brand{font-size:22px}
@media(max-width:360px){.brand{font-size:22px}}

/* --- 5. controls: legible labels, 44px minimum target, AA-passing boundaries --- */
.btn{font-size:16px;min-height:48px;padding:13px 22px}
.btn-lg{font-size:17px}
.nav-links a{font-size:16px;min-height:44px;display:inline-flex;align-items:center}
.nav-links .nav-create{font-size:16px;padding:10px 18px;min-height:44px}
.nav-toggle{font-size:16px;min-height:44px;min-width:44px}
.btn-ghost{border-color:var(--line-strong)}
pre,.card,.ledger,textarea,input[type="text"],input[type="email"]{border-color:var(--line-strong)}
input,textarea,select{font-size:16px;min-height:44px;padding:10px 12px}
a{text-underline-offset:3px}
summary{min-height:44px;display:flex;align-items:center;gap:8px}

@media(max-width:900px){
  .nav-verify{font-size:16px;padding:10px 16px;min-height:44px}
}

/* --- 6. hold the layout at 320px without horizontal scrolling --- */
@media(max-width:400px){
  .wrap{padding:0 14px}
  .lrow{padding:12px 14px}
  .lrow .k{width:100%}
  .lrow .v{flex-basis:100%}
  h1{font-size:clamp(28px,8vw,34px)}
  .digest,.lrow .v.mono,pre{font-size:13px}
}
.digest,.mono{overflow-wrap:anywhere;word-break:break-word}

/* ==========================================================================
   LOCAL VERIFIER DOWNLOAD CARDS
   ==========================================================================
   Rendered by src/local_agent_downloads.py. The primary action is the download
   (or, when the platform is not approved, an explicit statement that there
   isn't one); the checksum is a disclosure below it, never the headline.
   ========================================================================== */
.dl-grid{
  display:grid;gap:20px;margin:26px 0 34px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))
}
.dl-card{
  background:var(--surface);border:2px solid var(--line-strong);
  border-radius:var(--r);padding:22px 20px;display:flex;flex-direction:column;gap:12px
}
.dl-card h3{margin:0;font-size:20px}
.dl-req{margin:0;color:var(--ink-2);font-size:16px;line-height:1.55}
.dl-btn{width:100%;min-height:52px;font-size:17px}
.dl-size{margin:0;color:var(--mute);font-size:15px}
.dl-next{margin:0;color:var(--ink-2);font-size:16px;line-height:1.55}
.dl-tested{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6}
.dl-pending{
  margin:0;padding:13px 15px;border-radius:var(--r);
  background:var(--na-bg);border:2px dotted var(--line-strong);
  color:var(--ink-2);font-size:16px;font-weight:600;text-align:center
}
/* The signing disclosure: "Not signed", "Not signed or notarized", and what
   the visitor's OS will actually show them. It is the most consequential
   sentence on a download card and was the smallest text on it. */
.dl-signing{
  margin:0;color:var(--ink-2);font-size:16px;line-height:1.55;
  border-top:1px solid var(--line);padding-top:12px
}
.dl-signing-state{font-weight:600;color:var(--ink)}
.dl-details{border-top:1px solid var(--line);padding-top:6px;margin-top:auto}
.dl-details summary{
  font-size:15px;color:var(--jade-text);cursor:pointer;
  font-family:var(--sans);letter-spacing:0;min-height:44px
}
.dl-details summary:hover{text-decoration:underline;text-underline-offset:3px}
.dl-details-body{padding:4px 0 10px}
.dl-details-body p{font-size:15px;color:var(--ink-2);line-height:1.6}
.dl-row{display:flex;gap:10px;padding:6px 0;flex-wrap:wrap;font-size:15px}
.dl-k{color:var(--mute);width:96px;flex:none}
.dl-v{color:var(--ink);flex:1;min-width:0;overflow-wrap:anywhere}
.dl-v .digest{font-size:13px;line-height:1.5;display:inline-block}
.dl-cmd-label{margin:10px 0 6px;font-size:15px;color:var(--ink-2)}
.dl-cmd{margin:0;font-size:13.5px;padding:12px 14px}
.dl-why-list{margin:6px 0 12px;padding-left:22px;color:var(--ink-2);font-size:15px;line-height:1.6}
.dl-why-list li{margin-bottom:6px}
.dl-aside{
  background:var(--jade-soft);border:2px solid var(--jade);border-radius:var(--r);
  padding:22px 20px;margin:8px 0 22px
}
.dl-aside h3{margin:0 0 8px;font-size:19px}
.dl-aside p{margin:0 0 14px;color:var(--ink-2);font-size:16px;line-height:1.55;max-width:46em}
.dl-foot{color:var(--ink-2);font-size:16px}
.status-chip{margin-bottom:16px;display:inline-block}

/* --- 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) --- */
.card p{font-size:17px;line-height:1.6}
.dl-req,.dl-next,.dl-tested,.dl-signing,.notice{font-size:17px;line-height:1.6}
.grid2 > *, .grid3 > *, .grid4 > *, .wrap > * { min-width: 0; }
pre{max-width:100%;overflow-x:auto}
@media(max-width:1100px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--navy);border-bottom:1px solid #2A3D4E;
    flex-direction:column;align-items:stretch;padding:12px 16px 18px;gap:4px;z-index:40
  }
  .nav-links.open{display:flex}
  .nav-links a, .nav-links .btn{
    min-height:var(--tap);display:flex;align-items:center;width:100%;
    padding:12px 10px;font-size:16px
  }
  .nav-verify{margin-left:auto;font-size:16px;padding:10px 16px;min-height:44px}
  .nv-x{display:none}
}
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.site.nav-is-open .nav-scrim{display:block}

p a, li a, .lede a, .note a, .notice a, .dim a, .faint a, .small a,
.lrow a, .vp-step a, .card a, .proves a{
  text-decoration:underline;text-underline-offset:3px
}
a.btn, .nav-links a, .brand, header.site a.btn{text-decoration:none}
pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;overflow-x:visible}


/* --- RC 2026-09-09: overflow, and the brand ---

   1. A status chip could push a ledger row off-screen. `.lrow .chip{flex:none}`
      sizes a chip to max-content, and the row only wrapped below 600px, so at
      768px "JPG/PNG exact - Available now" (274px) sat in a 136px column and
      /platform scrolled horizontally. A chip may now shrink and wrap its own
      text, and the row wraps at the tablet width where the squeeze begins.

   2. The brand, for the same reason as instrument.css: the product's name was
      smaller than the button beside it. */
.lrow .chip{flex:0 1 auto;min-width:0;overflow-wrap:anywhere;white-space:normal}
@media(max-width:820px){.lrow{flex-wrap:wrap}.lrow .k{width:100%}}
.brand{font-size:26px}
@media(max-width:600px){.brand{font-size:23px}}
@media(max-width:360px){.brand{font-size:20px}}

/* The two-column "what we do / do not establish" grid overflowed its container
   at 768px. `1fr 1fr` distributes the CONTENT box, and each column then adds
   26px of side padding and a 2px border; with no min-width the columns refuse
   to shrink below their content and the row runs 3px past the viewport.
   `minmax(0,1fr)` lets them. */
.proves{grid-template-columns:1fr}
@media(min-width:760px){.proves{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.proves .col{min-width:0}

/* The legacy chrome's brand, raised to match the site package. The 320px rule
   in src/nav.py still shrinks it there, where the header would otherwise push
   the page wider than the screen. */
.nav-in .brand{font-size:26px}
@media(max-width:600px){.nav-in .brand{font-size:23px}}

/* 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 11px;
  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}
@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}
}

/* The ChaosMark brand stood to the RIGHT of the navigation on every page that
   uses this stylesheet at desktop widths: the legacy rule above gives .brand
   order:1 while the shared desktop links keep order 0. From 901px to 1100px
   the legacy Menu button also showed beside the full desktop links. The shared
   public nav owns every width above its own 900px breakpoint, with the brand
   first, as on /, /create and /verify. */
@media(min-width:901px){
  .public-nav .brand{order:0}
  .public-nav .nav-toggle,
  .public-nav .mobile-links,
  .public-nav .mobile-links.open{display:none}
}

/* 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: pricing. */
.price{font-size:32px;font-weight:600;color:var(--ink);margin:6px 0 4px}
.price span{font-size:15px;font-weight:400;color:var(--ink-2)}
.pricing-free ul{margin:10px 0 16px;padding-left:20px;color:var(--ink-2)}
.pricing-plans .card p:last-child{margin-top:14px}
@media(min-width:760px){.pricing-plans{grid-template-columns:repeat(3,1fr)}}
/* Pricing: "Other ChaosMark products" row. Every card is the same column --
   badge, title, description, CTA -- and the CTA is pushed to the card's foot,
   so the three links share one baseline. Grid items already stretch to the
   row's height; no fixed heights, so a single-column phone card keeps its
   natural height. */
.other-products h2{margin-bottom:24px}
.product-row > .card{display:flex;flex-direction:column}
.product-row .chip{align-self:flex-start;max-width:100%}
/* ".chip.brand" shares the logo's .brand class, whose rules (serif 26px,
   display:flex, order:1) made the Enterprise evaluation badge outweigh the
   Windows one. Inside this row every badge gets the plain chip metrics. */
.product-row .chip{display:inline-block;order:0;font-family:var(--mono);font-size:14px;
  font-weight:500;letter-spacing:.01em;line-height:1.45;padding:4px 11px;border-radius:2px}
.product-row .card h3{margin:16px 0 10px}
.product-row .card p{margin-top:0}
.product-row .card .card-cta{margin-top:auto;padding-top:20px}
.product-row .card .card-cta a{font-weight:600}
.product-row-note{margin-top:28px;max-width:68ch}

/* 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: 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}}
@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}}

/* Direct purchase controls share the price cards without an extra offer page. */
.purchase-consent{margin:1.2rem 0;padding:1rem;border:1px solid var(--rule);border-radius:8px;max-width:64rem}
.purchase-consent fieldset{border:0;padding:0;margin:1rem 0 0}.purchase-consent input[type="text"]{max-width:100%;margin:.4rem 0}.purchase-consent label{line-height:1.6}.pricing-plans .card{display:flex;flex-direction:column}.pricing-plans .btn{margin-top:auto;white-space:normal}.btn:disabled{cursor:not-allowed;opacity:.65}.table-scroll{overflow-x:auto}.pricing-comparison{width:100%;border-collapse:collapse}.pricing-comparison th,.pricing-comparison td{padding:.7rem;text-align:left;border-bottom:1px solid var(--rule)}