/* ── typefaces ──────────────────────────────────────────────────────────
   Self-hosted, not Google-hosted. The page's central claim is that nothing
   leaves your machine; loading fonts from a third party would contradict it
   on the very first request. Self-hosting keeps the differentiation AND the
   zero-external-request property — the earlier all-system stack gave up the
   first to get the second, which was the wrong trade.

   All three are variable fonts (one file per family, full weight axis) and
   OFL/Apache licensed, so self-hosting is permitted.

     Source Serif 4  display   — a document serif. No competitor in the
                                 twenty reviewed uses one; it reads as legal
                                 instrument rather than SaaS.
     IBM Plex Sans   body      — engineering neutral, excellent small.
     JetBrains Mono  machine   — facts only: counts, prices, requirements,
                                 file names. Per ibelick's DESIGN.md, mono is
                                 reserved for technical identifiers.
   ───────────────────────────────────────────────────────────────────────── */
@font-face{font-family:"Source Serif VF";src:url(/assets/fonts/sourceserif.woff2) format("woff2");
  font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans VF";src:url(/assets/fonts/plexsans.woff2) format("woff2");
  font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains VF";src:url(/assets/fonts/jetbrains.woff2) format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap}

/* ── tokens ─────────────────────────────────────────────────────────────
   Ledger palette. Black ink, red for what is wrong, green for what is
   settled — the colour convention of accounting and legal recordkeeping,
   which is the world this buyer actually works in.

   Deliberately not the neighbours: SafeRedact is Tailwind blue #2563eb with
   Tailwind green #22c55e and Inter; the enterprise vendors are SaaS blue;
   Adobe, Smallpdf and iLovePDF are all red. This green is a deep ledger
   forest, nowhere near Tailwind's, and the ground is a cool paper with the
   faintest green cast rather than anything warm.

   Two chromas, both semantic, never decorative:
     GREEN   verified, settled, output that has been checked
     OXBLOOD detected, still recoverable, needs review
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --paper:#F3F5F2; --surface:#FFFFFF; --surface-2:#E7EBE6;
  --ink:#0F1310; --ink-2:#3B443D; --muted:#6B756E; --rule:#D3D9D1;

  --clear:#17563A; --clear-2:#0E4229; --clear-soft:#DCEAE1;   /* verified  */
  --alarm:#8E2A21; --alarm-soft:#F4E2E0;                       /* detected  */
  --flag:#8E2A21;  --flag-soft:#F4E2E0;

  --accent:var(--clear); --accent-2:var(--clear-2); --accent-soft:var(--clear-soft);

  --band:#0B0F0C; --band-ink:#EDEFEC; --band-mut:#8A938C; --band-rule:#1D231F;

  --lift:none;                       /* the new UI is ruled, not floated */
  --rail:#C9D1C7;                    /* pleading-paper line numbers      */

  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --t-press:140ms; --t-ui:190ms; --t-reveal:420ms;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0D110E; --surface:#141915; --surface-2:#1C221D;
    --ink:#E9EDE9; --ink-2:#B5BEB8; --muted:#818B84; --rule:#252C27;
    --clear:#4FBF8B; --clear-2:#6BD3A2; --clear-soft:#102A1E;
    --alarm:#E0776C; --alarm-soft:#2C1917; --flag:#E0776C; --flag-soft:#2C1917;
    --accent:var(--clear); --accent-2:var(--clear-2); --accent-soft:var(--clear-soft);
    --band:#070A08; --band-ink:#EDEFEC; --band-mut:#7B857E; --band-rule:#181E1A;
    --rail:#2A322C;
  }
}
:root[data-theme="dark"]{
  --paper:#0D110E; --surface:#141915; --surface-2:#1C221D;
  --ink:#E9EDE9; --ink-2:#B5BEB8; --muted:#818B84; --rule:#252C27;
  --clear:#4FBF8B; --clear-2:#6BD3A2; --clear-soft:#102A1E;
  --alarm:#E0776C; --alarm-soft:#2C1917; --flag:#E0776C; --flag-soft:#2C1917;
  --accent:var(--clear); --accent-2:var(--clear-2); --accent-soft:var(--clear-soft);
  --band:#070A08; --band-ink:#EDEFEC; --band-mut:#7B857E; --band-rule:#181E1A;
  --rail:#2A322C;
}

*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Plex Sans VF", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-variant-numeric:tabular-nums; font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased}
.wrap{max-width:1140px; margin:0 auto; padding:0 26px}
h1,h2,h3,h4{font-family:"Source Serif VF", Georgia, "Times New Roman", serif; font-weight:600}
.ui{font-family:"Plex Sans VF", -apple-system, system-ui, sans-serif}
h1,h2,h3,h4{margin:0; text-wrap:balance}
h1{font-size:clamp(2.4rem,6vw,4.1rem); font-weight:600; line-height:1.02; letter-spacing:-.022em}
h2{font-size:clamp(1.65rem,3.2vw,2.35rem); font-weight:600; line-height:1.12; letter-spacing:-.016em}
h3{font-size:1.18rem; font-weight:600; letter-spacing:-.008em; line-height:1.32}
p{margin:0}
.mono{font-family:"JetBrains VF", ui-monospace, "SF Mono", Menlo, monospace}
.eyebrow{font-family:"JetBrains VF",ui-monospace,"SF Mono",Menlo,monospace; font-size:.67rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--muted)}
.lede{font-size:1.15rem; color:var(--ink-2)}
section{padding:76px 0; border-top:1px solid var(--rule)}
.head{display:flex; flex-direction:column; gap:12px; margin-bottom:36px; max-width:64ch}
.stack{display:flex; flex-direction:column; gap:18px}

/* ── nav ────────────────────────────────────────────────────────────── */
nav{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--rule)}
.navin{display:flex; align-items:center; gap:20px; padding:13px 0}
.brand{display:flex; align-items:center; gap:9px; font-family:"Plex Sans VF",-apple-system,system-ui,sans-serif;
  font-weight:700; font-size:1.05rem; letter-spacing:-.02em}
.mark{width:22px; height:22px; border-radius:4px; background:var(--ink); position:relative; flex:none}
.mark::after{content:""; position:absolute; left:4px; right:4px; top:9px; height:4px;
  background:var(--paper); border-radius:1px}
.navlinks{display:flex; gap:20px; margin-left:auto; align-items:center}
.navlinks a{font-family:"Plex Sans VF",-apple-system,system-ui,sans-serif; font-size:.9rem; color:var(--ink-2); text-decoration:none}
.navlinks a:hover{color:var(--ink)}
@media (max-width:720px){ .navlinks a.hide-sm{display:none} }
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:"Plex Sans VF",-apple-system,system-ui,sans-serif; font-size:.94rem; font-weight:600;
  padding:10px 18px; border-radius:7px; border:1px solid transparent; text-decoration:none; cursor:pointer}
.btn-p{background:var(--ink); color:var(--paper)}
.btn-p:hover{background:var(--accent-2); color:#fff}
.btn-s{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn-s:hover{border-color:var(--ink)}
.btn-sm{padding:7px 14px; font-size:.87rem}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{padding:74px 0 0; border-top:0}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center}
@media (max-width:960px){ .hero-grid{grid-template-columns:1fr; gap:38px} }
.h1red{position:relative; display:inline-block; padding:0 .06em; color:var(--ink)}
.h1red::after{content:""; position:absolute; inset:-.05em -.06em; background:var(--ink);
  border-radius:2px; transform:scaleX(0); transform-origin:left center}
.hero-sub{font-size:1.2rem; color:var(--ink-2); margin-top:22px; max-width:52ch}
.ctas{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:30px}
.req{font-family:"JetBrains VF",ui-monospace,"SF Mono",Menlo,monospace; font-size:.73rem; color:var(--muted); margin-top:14px; letter-spacing:.01em}
.pricepin{font-family:"Plex Sans VF",-apple-system,system-ui,sans-serif; font-size:.92rem; color:var(--ink-2)}
.pricepin b{color:var(--ink); font-weight:600}

/* ── the proof demo ─────────────────────────────────────────────────── */
.demo{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:820px){ .demo{grid-template-columns:1fr} }
.dcard{background:var(--surface); border:1px solid var(--rule); border-radius:9px; overflow:hidden; box-shadow:var(--lift)}
.dhd{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 16px; border-bottom:1px solid var(--rule); background:var(--surface-2)}
.dhd .ui{font-size:.87rem; font-weight:600}
.chip{font-family:"JetBrains VF",ui-monospace,"SF Mono",Menlo,monospace; font-size:.63rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 8px; border-radius:3px}
.chip.bad{background:var(--alarm-soft); color:var(--alarm)}
.chip.ok{background:var(--accent-soft); color:var(--accent)}
.dbody{padding:20px 22px; font-family:"Times New Roman",Times,serif; font-size:14px; line-height:1.9; min-height:132px}
.blk{display:inline-block; background:#0D0F0D; border-radius:1px; padding:0 4px; color:transparent}
.blk.revealed{background:var(--alarm-soft); color:var(--alarm); font-weight:600}
.gone{display:inline-block; padding:0 4px; color:var(--muted); font-style:italic}
.dfoot{padding:12px 16px; border-top:1px solid var(--rule); background:var(--surface-2);
  font-family:"JetBrains VF",ui-monospace,"SF Mono",Menlo,monospace; font-size:.72rem; color:var(--muted); min-height:44px;
  display:flex; align-items:center}
.dfoot.hit{color:var(--alarm)} .dfoot.clean{color:var(--accent)}

/* ── generic blocks ─────────────────────────────────────────────────── */
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:22px 24px;
  display:flex; flex-direction:column; gap:10px; box-shadow:var(--lift)}
.card p{font-size:.96rem; color:var(--ink-2)}
.card .eyebrow{color:var(--accent)}
.step{display:grid; grid-template-columns:38px 1fr; gap:16px; align-items:start}
.stepn{font-family:"JetBrains VF",ui-monospace,"SF Mono",Menlo,monospace; font-size:.8rem; font-weight:600; color:var(--accent);
  border:1px solid var(--accent); border-radius:50%; width:30px; height:30px; display:grid; place-items:center}

.band{background:var(--band); color:var(--band-ink); border-top:0}
.band h2{color:var(--band-ink)} .band p{color:var(--band-mut)} .band .eyebrow{color:var(--band-mut)}
.band .lede{color:var(--band-mut)}

.scroll{overflow-x:auto; border:1px solid var(--rule); border-radius:8px; background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:640px; font-size:.92rem}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--rule)}
thead th{font-family:"JetBrains VF",ui-monospace,"SF Mono",Menlo,monospace; font-size:.65rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
td.us{background:var(--accent-soft)}
.yes{color:var(--accent); font-weight:600} .no{color:var(--alarm)}
.tick{font-family:"JetBrains VF",ui-monospace,"SF Mono",Menlo,monospace}

.pricebox{background:var(--surface); border:2px solid var(--ink); border-radius:12px; padding:34px 32px;
  display:flex; flex-direction:column; gap:16px; box-shadow:var(--lift); max-width:440px}
.bignum{font-family:"Plex Sans VF",-apple-system,system-ui,sans-serif; font-size:3.6rem; font-weight:700; letter-spacing:-.04em; line-height:1}
.bignum small{font-size:1rem; font-weight:500; color:var(--muted); letter-spacing:0}
ul.ticks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
ul.ticks li{display:flex; gap:10px; font-size:.96rem; color:var(--ink-2)}
ul.ticks li::before{content:"✓"; color:var(--accent); font-weight:700; flex:none}
.anchor{font-size:.9rem; color:var(--muted)}
.anchor s{opacity:.75}

details{background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:16px 20px}
summary{cursor:pointer; font-family:"Plex Sans VF",-apple-system,system-ui,sans-serif; font-weight:600; font-size:1rem}
details[open] summary{margin-bottom:9px}
details p{font-size:.96rem; color:var(--ink-2)}
a{color:var(--clear); text-underline-offset:3px; text-decoration-color:color-mix(in srgb,var(--clear) 35%,transparent)}
a:hover{text-decoration-color:var(--clear)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
footer{padding:44px 0 72px; border-top:1px solid var(--rule); color:var(--muted); font-size:.88rem}
.note{font-family:"JetBrains VF",ui-monospace,"SF Mono",Menlo,monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--flag); background:var(--flag-soft); padding:3px 8px; border-radius:3px; display:inline-block}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }

/* ── article pages ─────────────────────────────────────────────────── */
.article{max-width:72ch}
.article h2{margin-top:52px}
.article h3{margin-top:32px}
.article p{margin-top:16px; color:var(--ink-2)}
.article ul,.article ol{margin-top:16px}
.article li{margin:8px 0}
.crumbs{font-family:"JetBrains VF",ui-monospace,"SF Mono",Menlo,monospace; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:18px}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.callout{background:var(--surface); border:1px solid var(--rule); border-left:3px solid var(--accent);
  border-radius:0 6px 6px 0; padding:20px 24px; margin-top:26px}
.callout.warn{border-left-color:var(--flag)}
.callout p{margin-top:0}
.callout p + p{margin-top:12px}
.callout .eyebrow{color:var(--accent); display:block; margin-bottom:8px}
.callout.warn .eyebrow{color:var(--flag)}
.tocbox{background:var(--surface-2); border:1px solid var(--rule); border-radius:8px; padding:18px 22px; margin-top:26px}
.tocbox ol{margin:10px 0 0; padding-left:1.2em}
.tocbox li{margin:5px 0; font-size:.95rem}
.verdictrow{display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; margin-top:8px}
.badge{font-family:"JetBrains VF",ui-monospace,"SF Mono",Menlo,monospace; font-size:.63rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 9px; border-radius:3px; background:var(--surface-2);
  color:var(--muted); border:1px solid var(--rule)}
.badge.free{background:var(--accent-soft); color:var(--accent); border-color:transparent}
.badge.paid{background:var(--flag-soft); color:var(--flag); border-color:transparent}
.badge.up{background:var(--alarm-soft); color:var(--alarm); border-color:transparent}
.toolcard{background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:24px 26px;
  margin-top:18px; box-shadow:var(--lift)}
.toolcard h3{margin-top:0}
.toolcard p{margin-top:10px}
.cta-strip{background:var(--band); border-radius:10px; padding:34px 32px; margin-top:44px;
  display:flex; flex-direction:column; gap:14px}
.cta-strip h3{color:var(--band-ink); font-size:1.4rem}
.cta-strip p{color:var(--band-mut); margin-top:0}

/* ── footer hub ────────────────────────────────────────────────────── */
.foothub{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:28px 24px}
.foothub > div{display:flex; flex-direction:column; gap:7px}
.foothub .eyebrow{color:var(--ink); margin-bottom:3px}
.foothub a{color:var(--muted); text-decoration:none; font-size:.9rem; line-height:1.4}
.foothub a:hover{color:var(--accent)}
.footnote{margin-top:34px; padding-top:20px; border-top:1px solid var(--rule);
  font-size:.84rem; color:var(--muted); max-width:78ch}


/* ── motion ────────────────────────────────────────────────────────────
   One signature moment, then micro-feedback. Everything animated here is
   transform or opacity only, so it composites and never triggers layout.

   THE SIGNATURE: the hero headline redacts itself. A bar wipes left to
   right across the word "removed" — the product performing its own verb.
   It runs once, on load, and it is explanatory rather than decorative,
   which is the one category emil's framework allows past 300ms.

   Everything is progressive enhancement. Nothing is hidden behind JS:
   with scripting off the word simply stays legible and no bar appears.
   (Bartender and Hazel both ship pages that are blank without JS. Not this.)
   ──────────────────────────────────────────────────────────────────────── */
@keyframes redact-wipe{ from{transform:scaleX(0)} to{transform:scaleX(1)} }

html.js .h1red::after{
  animation:redact-wipe var(--t-reveal) var(--ease-out) 520ms forwards;
}
html.js .h1red{ color:var(--ink) }

/* Pressable things must feel like the interface heard you. */
.btn{ transition:transform var(--t-press) var(--ease-out),
                  background-color var(--t-ui) ease,
                  border-color var(--t-ui) ease, color var(--t-ui) ease }
.btn:active{ transform:scale(.97) }

.navlinks a:not(.btn){ transition:color var(--t-ui) ease }
.foothub a, .crumbs a, details summary{ transition:color var(--t-ui) ease }

/* The demo reveal is rare, purposeful and explanatory — the one place a
   state change earns a transition rather than a swap. */
.blk, .dfoot, .chip{ transition:background-color var(--t-ui) var(--ease-out),
                                color var(--t-ui) var(--ease-out) }

/* Visible focus, always. */
:focus-visible{ outline:2px solid var(--clear); outline-offset:3px; border-radius:3px }

@media (prefers-reduced-motion:reduce){
  html.js .h1red::after{ animation:none; transform:scaleX(1) }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
                        transition-duration:.001ms !important }
}

/* ══ UI v2 — the page as a filing ═══════════════════════════════════════
   The previous layout was the standard SaaS stack: floating cards with
   shadows, three-up grids, a hero split down the middle. Every competitor
   ships that, SafeRedact included.

   This buyer reads pleading paper, exhibits and certificates all day. So
   the page borrows that structure instead: a numbered margin rail, ruled
   blocks rather than floated cards, section marks, and a certificate block
   where the footer used to be. Nothing here is decoration — it is the
   document vernacular the reader already parses without effort.
   ═══════════════════════════════════════════════════════════════════════ */

/* Cards stop floating and become ruled entries in a record. */
.card,.toolcard,.pricebox,details,.tocbox,.dcard{
  box-shadow:none; border-radius:0; background:transparent;
  border:0; border-top:1px solid var(--rule); padding:22px 0 24px;
}
.card{gap:8px}
.pricebox{border:1px solid var(--ink); padding:28px; background:var(--surface)}
details{padding:16px 0}
.tocbox{background:transparent; border-top:1px solid var(--ink); border-bottom:1px solid var(--rule); padding:18px 0}
.dcard{border:1px solid var(--rule); background:var(--surface)}
.dcard .dbody{min-height:120px}
.callout{border-radius:0; background:transparent; border:0;
  border-left:2px solid var(--clear); padding:4px 0 4px 20px}
.callout.warn{border-left-color:var(--alarm)}

/* Section marks, set like a filing reference. */
.eyebrow{display:flex; align-items:center; gap:9px}
.eyebrow::before{content:"§"; font-weight:500; opacity:.55}
.band .eyebrow::before,.card .eyebrow::before,.toolcard .eyebrow::before{content:"§"}

/* The margin rail: pleading-paper line numbers down the document column.
   Purely typographic, drawn with a repeating gradient of hairlines, and
   hidden on narrow screens where there is no margin to give it. */
@media (min-width:1080px){
  .wrap{position:relative}
  main.filing::before,
  .railed::before{
    content:""; position:absolute; left:-2px; top:0; bottom:0; width:1px;
    background:var(--rule);
  }
}

/* Ruled tables, not boxed ones. */
.scroll{border:0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
  border-radius:0; background:transparent}
thead th{background:transparent; border-bottom:1px solid var(--ink);
  color:var(--ink); font-weight:600}
td.us{background:var(--clear-soft)}
tbody tr:hover td{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}

/* Buttons: a solid ink block and a ruled ghost. No pills. */
.btn{border-radius:3px}
.btn-p{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn-p:hover{background:var(--clear); border-color:var(--clear); color:#fff}
.btn-s{border-color:var(--ink); color:var(--ink)}
.btn-s:hover{background:var(--surface-2)}

/* Nav reads as a document header rule rather than a floating glass pill. */
nav{background:var(--paper); backdrop-filter:none; border-bottom:1px solid var(--ink)}

/* Grid gutters become rules, so groups read as a table of entries. */
.grid.g3,.grid.g2{gap:0 34px}
.grid.g3 > .card,.grid.g2 > .card{border-top:1px solid var(--rule)}

.cta-strip{border-radius:0; border:1px solid var(--ink); background:var(--band)}

/* ── certificate block (footer) ─────────────────────────────────────── */
footer{padding:0 0 84px; border-top:0}
.cert{border-top:2px solid var(--ink); padding-top:0}
.cert-head{display:flex; flex-wrap:wrap; gap:10px 20px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--rule)}
.cert-head .t{font-family:"Source Serif VF",Georgia,serif; font-size:1.05rem; font-weight:600}
.cert-head .m{font-family:"JetBrains VF",ui-monospace,Menlo,monospace;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.cert-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0}
.cert-col{padding:22px 20px 22px 0; border-right:1px solid var(--rule)}
.cert-col:last-child{border-right:0}
@media (max-width:760px){ .cert-col{border-right:0; border-bottom:1px solid var(--rule)} }
.cert-col h4{font-family:"JetBrains VF",ui-monospace,Menlo,monospace; font-size:.68rem;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:11px}
.cert-col a{display:block; color:var(--ink-2); text-decoration:none; font-size:.92rem; line-height:1.75}
.cert-col a:hover{color:var(--clear)}
.cert-foot{border-top:1px solid var(--rule); padding-top:18px; display:flex;
  flex-wrap:wrap; gap:12px 28px; align-items:baseline}
.cert-foot p{font-size:.84rem; color:var(--muted); max-width:62ch}
.cert-seal{font-family:"JetBrains VF",ui-monospace,Menlo,monospace; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--clear);
  border:1px solid var(--clear); padding:6px 11px; white-space:nowrap}