:root{
  --bg:#050506; --bg2:#08080a; --panel:#0b0b0d; --panel2:#0f0f12;
  --line:#1e1e22; --line2:#2a2a30;
  --text:#e8e8ea; --muted:#8b8b93; --dim:#5a5a62;
  --white:#fff;
  /* brand teal, carried over from the consulting proposals (#127C74 / navy #17293D),
     lifted for legibility on a near-black ground */
  --teal:#127C74; --teal-lift:#2FB8A9; --teal-dim:#1C8A80;
  --teal-wash:rgba(47,184,169,.10); --navy:#17293D;
  --mono:"JetBrains Mono","IBM Plex Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --maxw:940px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--mono);
  font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:#fff;color:#000}

.scanlines{position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;opacity:.55}
.vignette{position:fixed;inset:0;z-index:9996;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.75) 100%)}
.grid-bg{position:fixed;inset:0;z-index:-2;
  background-image:linear-gradient(to right,rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(130% 85% at 50% 0%,#000 25%,transparent 80%);
  mask-image:radial-gradient(130% 85% at 50% 0%,#000 25%,transparent 80%)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(5,5,6,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:56px;font-size:13px}
.brand{display:flex;align-items:center;gap:10px}
/* real brand lockup (recreated from the company logo, recoloured to the site palette) */
.brand img{display:block;height:26px;width:auto}
@media(max-width:520px){.brand img{height:22px}}
.nav-links{display:flex;gap:18px;color:var(--dim);align-items:center}
.nav-links a:hover{color:var(--white)}
.nav-links a::before{content:"./";color:var(--line2)}
.nav-cta{border:1px solid var(--teal-dim);padding:5px 11px;color:var(--text)!important;
  background:var(--teal-wash)}
.nav-cta::before{content:""!important}
.nav-cta:hover{background:var(--teal);color:#fff!important;border-color:var(--teal)}
.nav-links a:not(.nav-cta):hover{color:var(--teal-lift)}
@media(max-width:820px){.nav-links a:not(.nav-cta){display:none}}

/* hero */
header.hero{padding:74px 0 48px}
.boot{color:var(--dim);font-size:clamp(9.3px,2.55vw,12.5px);line-height:1.9;margin-bottom:24px;
  min-height:11.4em}
/* boot lines can run long (compliance lists six frameworks); hang the wrap so a
   wrapped continuation lines up under the value column instead of the [ok] marker */
.boot .bl{display:block;white-space:pre-wrap;min-height:1.9em;
  padding-left:5.6em;text-indent:-5.6em}
.boot .ok{color:var(--teal-lift)}
.bcur{display:inline-block;width:7px;height:1em;background:var(--teal-lift);
  vertical-align:-2px;margin-left:1px;box-shadow:0 0 7px rgba(47,184,169,.55);
  animation:blink 1.1s steps(1) infinite}
/* while typing the cursor is solid, it only starts blinking once the block finishes */
.boot.typing .bcur{animation:none;opacity:1}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.status-line{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text);border:1px solid var(--teal-dim);padding:5px 11px;
  background:var(--teal-wash)}
.status-line .dot{width:6px;height:6px;background:var(--teal-lift);border-radius:50%;
  box-shadow:0 0 9px var(--teal-lift);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

h1{font-size:clamp(2rem,5.4vw,3.3rem);line-height:1.06;letter-spacing:-.045em;
  margin:22px 0 0;font-weight:800;text-transform:uppercase;color:var(--white)}
h1 .g{color:var(--teal-lift)}
.lede{color:var(--muted);max-width:62ch;margin:22px 0 0;font-size:14.5px}
.lede strong{color:var(--text);font-weight:400}
.hero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.btn{border:1px solid var(--line2);padding:10px 18px;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;transition:.15s}
.btn:hover{background:#fff;color:#000;border-color:#fff}
.btn.solid{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn.solid:hover{background:transparent;color:var(--teal-lift);border-color:var(--teal-lift)}
.btn:hover{background:var(--teal-lift);color:#04211f;border-color:var(--teal-lift)}

/* sections */
section{padding:58px 0;border-top:1px solid var(--line)}
.sec-num{color:var(--teal-dim);font-size:11.5px;letter-spacing:.2em}
h2{font-size:clamp(1.35rem,3.4vw,1.9rem);letter-spacing:-.035em;margin:8px 0 10px;
  font-weight:800;text-transform:lowercase;color:var(--white);
  display:inline-block;border-bottom:2px solid var(--teal);padding-bottom:5px}
.sub{color:var(--muted);font-size:13.5px;max-width:64ch;margin:0 0 30px}

/* ---------- featured section: secure AI enablement ---------- */
section.feature{position:relative;background:
  radial-gradient(90% 70% at 12% 0%,rgba(47,184,169,.075),transparent 68%)}
section.feature::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:linear-gradient(to right,var(--teal),rgba(47,184,169,0) 62%)}
.sub.big{font-size:15.5px;color:var(--text);max-width:58ch;margin-bottom:26px}
.feature-lede{max-width:70ch;margin:0 0 30px}
.feature-lede p{color:var(--muted);font-size:13.5px;margin:0 0 13px}
.feature-lede p:last-child{margin-bottom:0;color:var(--text)}
.pull{margin:30px 0 0;padding:18px 0 18px 20px;border-left:2px solid var(--teal);
  color:var(--white);font-size:15px;letter-spacing:-.02em;max-width:60ch;line-height:1.6}
.card-more{margin:12px 0 0!important}
.card-more a{color:var(--teal-lift);font-size:12px;border-bottom:1px solid transparent}
.card-more a:hover{border-bottom-color:var(--teal-lift)}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line)}
.card{background:var(--panel);padding:24px 22px;transition:.18s;position:relative}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--teal);
  opacity:0;transition:.18s}
.card:hover{background:var(--panel2)}
.card:hover::before{opacity:1}
.card .k{font-size:10.5px;letter-spacing:.2em;color:var(--teal-dim);text-transform:uppercase}
.card h3{font-size:15px;margin:9px 0 8px;font-weight:700;letter-spacing:-.02em;color:var(--white)}
.card p{margin:0;color:var(--muted);font-size:13px;line-height:1.72}
.card ul{margin:11px 0 0;padding:0;list-style:none;color:var(--dim);font-size:12px}
.card ul li::before{content:"› ";color:var(--teal-dim)}
@media(max-width:720px){.cards{grid-template-columns:1fr}}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.step{border-left:1px solid var(--teal-dim);padding-left:16px}
.step .n{font-size:11px;letter-spacing:.2em;color:var(--teal-dim)}
.step h4{margin:7px 0 7px;font-size:14px;font-weight:700;color:var(--white);letter-spacing:-.02em}
.step p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.7}
@media(max-width:720px){.steps{grid-template-columns:1fr}}

.who{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:34px;align-items:start}
@media(max-width:760px){.who{grid-template-columns:1fr}}
/* right rail stacks portrait, credential chips and the facts box as one column */
.who-rail{display:flex;flex-direction:column;gap:16px}
.rail-label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dim);margin-bottom:9px}
.who p{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.who p strong{color:var(--text);font-weight:700}
.who p a{color:var(--teal-lift);text-decoration:underline;text-underline-offset:3px}
/* portrait sits above the facts box in the right rail. Source image is only 100x100,
   so it is rendered at native size and never upscaled. */
.portrait{border:1px solid var(--line);background:var(--panel);padding:14px;
  display:flex;align-items:center;gap:13px}
.portrait img{width:76px;height:76px;display:block;object-fit:cover;
  border:1px solid var(--line2);filter:grayscale(1) contrast(1.05)}
.portrait:hover img{filter:none}
.portrait-cap{font-size:11.5px;color:var(--text);line-height:1.45}
.portrait-cap span{color:var(--teal-dim)}


.facts{border:1px solid var(--line);background:var(--panel);padding:18px 16px;font-size:11.5px}
.facts div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.facts div:last-child{border:0}
.facts span:first-child{color:var(--teal-dim)}
.facts span:last-child{color:var(--text);text-align:right}

.logos{display:flex;flex-wrap:wrap;gap:7px}
.logos span{border:1px solid var(--line);padding:4px 9px;font-size:10.5px;color:var(--muted);
  background:var(--panel);transition:.15s}
.logos span:hover{border-color:var(--teal-dim);color:var(--text)}

/* contact */
.contact-box{border:1px solid var(--line2);background:var(--panel);padding:32px 26px;
  border-left:3px solid var(--teal);
  background-image:radial-gradient(70% 120% at 0% 0%,var(--teal-wash),transparent 70%)}
.contact-box .q{color:var(--teal-lift);font-size:12px;margin-bottom:8px}
.contact-box h3{margin:0 0 12px;font-size:clamp(1.1rem,3vw,1.5rem);color:var(--white);
  letter-spacing:-.03em;font-weight:800}
.contact-box p{color:var(--muted);font-size:13.5px;margin:0 0 22px;max-width:56ch}

footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--dim);font-size:11.5px}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-in a:hover{color:var(--teal-lift)}

/* ---------- icon system ----------
   One inline <symbol> sprite in the document, referenced with <use>.
   Zero extra requests, inherits currentColor, scales with the type. */
.icon-sprite{display:none}
.ico{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
  color:var(--teal-lift);transition:.18s}
.card:hover .ico{color:var(--teal-lift);transform:translateY(-1px)}
.h3-ico{display:flex;align-items:flex-start;gap:9px}
.h3-ico span{display:block}
/* icon sits on the cap-height of the first line rather than the box centre */
.h3-ico .ico{margin-top:2px}

/* ---------- mobile reading density ----------
   Card prose is the bulk of the page. On narrow screens the first lines stay
   visible and the rest is a tap away, so the page scans as a list of six
   things rather than six essays. The clamp class is added by script, so with
   JS off nothing is ever hidden. */
.card .cp{transition:none}
@media(max-width:720px){
  .clamped .cp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden}
  .clamped.open .cp{display:block;-webkit-line-clamp:unset}
  .cp-more{appearance:none;background:none;border:0;padding:6px 0 0;margin:0;
    font:inherit;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--teal-lift);cursor:pointer;display:flex;align-items:center;gap:6px}
  .cp-more::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;
    border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-1px);
    transition:.18s}
  .open .cp-more::after{transform:rotate(-135deg) translateY(-1px)}
  /* tighten the vertical rhythm that desktop can afford and mobile cannot */
  .card{padding:18px 16px}
  .sub,.feature-lede p{font-size:13px}
  .pull{font-size:14px;padding:14px 0 14px 16px;margin-top:22px}
}

/* ---------- framework chips ----------
   The compliance list was one run-on bullet of seven frameworks. As chips it
   becomes a recognition scan instead of a sentence to read. */
.fw{display:flex;flex-wrap:wrap;gap:5px;margin:11px 0 0;padding:0;list-style:none}
.fw li{border:1px solid var(--line2);background:var(--bg2);padding:3px 7px;
  font-size:10.5px;color:var(--muted);letter-spacing:.02em;transition:.15s}
.fw li::before{content:none}
.fw li:hover{border-color:var(--teal-dim);color:var(--text)}

/* ---------- mobile measure ----------
   At 390px the monospace prose was running ~40 characters per line, under the
   45-75 band where reading is comfortable, which inflates every paragraph's
   line count. Reclaiming horizontal padding is the free half of the fix: it
   widens the measure without touching type size or the typeface. */
@media(max-width:720px){
  .wrap{padding:0 15px}
  .card{padding:17px 13px}
  .cp{letter-spacing:-.004em}
}

/* ---------- mobile prose typeface ----------
   Monospace is the identity, but at 390px it was running ~40 characters per
   line, under the 45-75 comfortable band, which inflates every paragraph's
   line count by 20-30%. The hero .lede joined this list when it was rewritten
   to carry the whole proposition: it measured 41cpl in mono, and it is the
   first prose anyone reads. Body prose switches to the system UI sans below
   720px and nothing else does: headings, nav, the boot block, section numbers, card
   kickers, bullets, chips and the facts rail all stay mono, so the terminal
   character of the page is unchanged on the elements that carry it.
   System stack, so this costs no extra font request. */
@media(max-width:720px){
  .cp,
  .lede,
  .feature-lede p,
  .who p,
  .sub,
  .contact-box p{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
      "Helvetica Neue",Arial,"Noto Sans",sans-serif;
    font-size:13.6px;
    line-height:1.56;
    letter-spacing:0;
  }
  /* mono ran wide, so the old clamp height no longer matches two sans lines */
  .clamped .cp{-webkit-line-clamp:2}
}

/* ---------- exhibits ----------
   Synthetic artifact panels. These are the device vciso.com uses for every
   visual on its page: not screenshots or illustrations, just divs styled to
   look like a real interface. Built this way they stay crisp at any DPI, cost
   no bandwidth, carry real numbers, and restyle with the tokens. Rendered here
   in the terminal idiom rather than their light SaaS one. */
.vig{margin:12px 0 0;border:1px solid var(--line2);background:var(--bg2);
  font-family:var(--mono);font-size:11px;line-height:1.5;overflow:hidden}
.vig-h{display:flex;align-items:center;gap:7px;padding:6px 9px;
  border-bottom:1px solid var(--line);background:var(--panel);
  color:var(--teal-dim);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.vig-h .ico{width:12px;height:12px;flex:0 0 12px;color:var(--teal-dim)}
.vig-h b{margin-left:auto;color:var(--dim);font-weight:400;letter-spacing:.06em}
.vig-b{padding:9px}
.vig-f{padding:7px 9px;border-top:1px dashed var(--line);color:var(--dim);font-size:10.5px}
.vig-f b{color:var(--teal-lift);font-weight:400}

/* severity rows: count, label, proportional bar */
.sev{display:grid;grid-template-columns:20px 52px 1fr;align-items:center;gap:8px;padding:2.5px 0}
.sev u{text-decoration:none;color:var(--text);font-size:12px;text-align:right}
.sev s{text-decoration:none;color:var(--muted)}
.sev i{display:block;height:5px;background:var(--teal-dim)}
.sev.c i{background:#E5484D}
.sev.h i{background:#E0913B}
.sev.m i{background:var(--teal-dim);opacity:.6}

/* check rows: status glyph, subject, origin tag */
.chk{display:grid;grid-template-columns:13px 1fr auto;gap:8px;align-items:center;
  padding:3.5px 0;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.028)}
.chk:last-child{border-bottom:0}
.chk .ico{width:13px;height:13px;flex:0 0 13px;color:var(--teal-lift)}
.chk q{quotes:none;color:var(--text)}
.chk .tag{border:1px solid var(--line2);padding:1px 5px;font-size:9px;
  color:var(--teal-dim);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.chk .tag.bot{border-color:var(--teal-dim);color:var(--teal-lift)}

/* evidence tree: one program fanning out into framework outputs */
.tree{display:flex;flex-direction:column;align-items:center;gap:0;padding:2px 0 0}
.tree .root{border:1px solid var(--line2);background:var(--panel);padding:5px 10px;
  color:var(--text);font-size:10.5px}
.tree .stem{width:1px;height:12px;background:var(--line2)}
.tree .fan{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.tree .leaf{border:1px solid var(--line);background:var(--panel);padding:4px 7px;
  font-size:9.5px;color:var(--muted);border-top:2px solid var(--teal-dim)}
.tree .leaf em{display:block;font-style:normal;color:var(--dim);font-size:8.5px;
  letter-spacing:.08em;text-transform:uppercase;margin-top:1px}

/* ---------- exhibit primitives ---------- */
.mtr{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:8px;padding:2.5px 0;color:var(--muted)}
.mtr i{display:block;height:5px;background:var(--teal-dim)}
.mtr i.w{background:var(--teal-lift)}
.mtr em{font-style:normal;color:var(--teal-dim);font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.kv{display:grid;grid-template-columns:1fr auto;gap:8px;padding:3.5px 0;color:var(--muted);
  border-bottom:1px solid rgba(255,255,255,.028)}
.kv:last-child{border-bottom:0}
.kv b{color:var(--text);font-weight:700;font-size:12px}
.kv b.t{color:var(--teal-lift)}
.gauge{margin:1px 0 0}
.gauge .bar{height:7px;background:var(--panel2);border:1px solid var(--line);position:relative;overflow:hidden}
.gauge .bar u{position:absolute;inset:0 auto 0 0;background:var(--teal-dim);text-decoration:none}
.gauge .lab{display:flex;justify-content:space-between;padding:0 0 5px;color:var(--muted)}
.gauge .lab b{color:var(--text);font-weight:700}
.lg{color:var(--muted)}
.lg div{padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg .p{color:var(--teal-dim)}
.lg .ok{color:var(--teal-lift)}

/* ---------- mobile: the exhibit carries the message ----------
   Matt's call, and the right one: on a phone the artifact panels say the thing
   faster than the prose does. Paragraphs and bullet points collapse to a
   toggle, the exhibit and the heading stay. Everything remains in the DOM for
   crawlers and for anyone who taps through, and desktop is untouched. */
@media(max-width:720px){
  .clamped .cp,
  .clamped .card-pts{display:none}
  .clamped.open .cp{display:block;-webkit-line-clamp:unset}
  .clamped.open .card-pts{display:block}
  .vig{margin-top:10px;font-size:10.5px}
  .vig-b{padding:8px}
  .cp-more{padding-top:9px}
}

/* ---------- mobile: compact the exhibits ----------
   Twelve exhibits at desktop spacing added back every pixel the text collapse
   saved. On a phone the panels keep their structure but lose the generous
   padding, which is what made them taller than the prose they replaced. */
@media(max-width:720px){
  .vig{font-size:10px;margin-top:9px}
  .vig-h{padding:4px 7px;font-size:8.5px;letter-spacing:.1em}
  .vig-h .ico{width:11px;height:11px;flex:0 0 11px}
  .vig-b{padding:6px 7px}
  .vig-f{padding:5px 7px;font-size:9.5px;line-height:1.4}
  .chk,.kv{padding:2px 0}
  .chk .ico{width:11px;height:11px;flex:0 0 11px}
  .chk .tag{font-size:8px;padding:1px 4px}
  .sev,.mtr{padding:1.5px 0}
  .sev u{font-size:11px}
  .lg div{padding:1px 0}
  .tree .root,.tree .leaf{padding:3px 6px}
  .tree .stem{height:9px}
  .gauge .bar{height:6px}

  /* Section ledes collapse to their first paragraph. The opening line carries
     the argument; the supporting paragraphs are a tap away. */
  .collapsed > p:nth-of-type(n+2){display:none}
  .collapsed.open > p{display:block}
  .blk-more{appearance:none;background:none;border:0;padding:2px 0 0;margin:0 0 18px;
    font:inherit;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--teal-lift);cursor:pointer;
    display:flex;align-items:center;gap:6px}
  .blk-more::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;
    border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-1px)}
  .open > .blk-more::after{transform:rotate(-135deg) translateY(-1px)}
}

/* <s> was used as a plain label element inside the exhibit primitives, which
   renders struck through and reads as "cancelled". Neutralise it everywhere in
   an exhibit, and keep the gauge label from being squeezed by its value. */
.vig s{text-decoration:none}
.gauge .lab{gap:10px;align-items:baseline}
.gauge .lab s{white-space:nowrap}
.gauge .lab b{white-space:nowrap;text-align:right}

/* credibility band — sits directly under the hero.
   Mixed set by design: Auth0, Okta, Narvar and WorkOS employed Matt,
   Microforum, Heft Law and Cosmo Technologies are Modulo clients, and
   Secureframe is advisory. The label says "clients and engagements" because
   that is the one word true of all eight; "trusted by" would not be.

   Every mark is forced to a single white silhouette rather than shown in
   brand colour. Three reasons: eight brand palettes on one dark strip reads
   as a rainbow, no company's trade dress is reproduced in its protected
   colour, and the row scans as one set instead of eight pasted images.
   Marks carry real alt text, so the names stay readable to crawlers and
   screen readers even though no text is painted. */
.cred{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg2);padding:16px 0}
/* The band runs a little wider than the text column so the label and all
   eight marks hold one line. A credibility strip is full-bleed furniture,
   not a paragraph, so it is allowed to outrun body copy. */
.cred .wrap{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;max-width:1060px}
.cred-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-dim);flex:0 0 auto}
.cred-marks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:14px 20px}
.cred-marks li{display:flex;align-items:center;line-height:0}

/* Height-constrained, width auto, so each logo keeps its own aspect ratio.
   brightness(0) flattens every mark to black, invert(1) lifts it to white —
   this works on colour and on greyscale sources alike. Heft Law and
   Microforum publish knockout-on-block and dark-on-white lockups that would
   silhouette into solid slabs, so both were keyed to white-on-transparent
   before install and pass through this filter unchanged. */
.cred-marks img{width:auto;max-width:132px;display:block;
  filter:brightness(0) invert(1);opacity:.62;
  transition:opacity .18s ease}
.cred-marks li:hover img{opacity:1}

/* Optical sizing, not mechanical. A single shared height makes heavy compact
   wordmarks shout and light wide ones (Secureframe) disappear, so each
   mark is tuned until its perceived weight matches its neighbours. The
   numbers look arbitrary because the eye, not the box, is the target. */
.cred-marks .c-auth0  img{height:19px}
.cred-marks .c-okta   img{height:18px}
.cred-marks .c-narvar img{height:19px}
.cred-marks .c-workos img{height:17px}
.cred-marks .c-heft   img{height:15px}
.cred-marks .c-cosmo  img{height:14px}   /* heavy geometric caps */
.cred-marks .c-sf     img{height:15px}   /* wide, light stroke */

/* Microforum's live site ships only a circular vinyl badge, which cannot
   silhouette. This is their standalone script wordmark, keyed so the letter
   bodies stay white and the navy outline drops out. Script x-height sits low
   against the caps beside it, so it carries a little more height. */
.cred-marks .c-mf img{height:23px}

@media(max-width:720px){
  .cred{padding:13px 0}
  .cred .wrap{gap:9px 14px}
  .cred-marks{gap:12px 18px}
  .cred-marks img{max-width:104px;opacity:.72}
  .cred-marks .c-auth0  img{height:16px}
  .cred-marks .c-okta   img{height:15px}
  .cred-marks .c-narvar img{height:16px}
  .cred-marks .c-workos img{height:14px}
  .cred-marks .c-heft   img{height:12px}
  .cred-marks .c-cosmo  img{height:12px}
  .cred-marks .c-sf     img{height:13px}
  .cred-marks .c-mf     img{height:19px}
}
@media(prefers-reduced-motion:reduce){
  .cred-marks img{transition:none}
}