/* selector that changes the object beside it */
.seg-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.seg-btns button{height:46px;padding:0 20px;border-radius:999px;border:0;cursor:pointer;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff;font:500 14px 'Geist',sans-serif;transition:background .25s,color .25s}
.seg-btns button.on{background:#fff;color:#000;box-shadow:none}
.ch.light .seg-btns button{background:rgba(0,0,0,.05);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);color:#0a0a0a}
.ch.light .seg-btns button.on{background:#0a0a0a;color:#fff}
.audtxt{min-height:112px;margin-top:26px}

/* why: one big word that changes while the reasons scroll */
.words{display:flex;flex-direction:column;gap:2px}
.words span{display:block;font-size:104px;line-height:1.02;letter-spacing:-.06em;font-weight:600;opacity:.13;transform:translateX(0);transition:opacity .45s ease,transform .45s ease}
.words span.on{opacity:1;transform:translateX(18px)}
.ch.light .pin-steps .st p{color:#333}

/* what a certificate is for: large slides, each a real situation */
.slide{flex:0 0 500px;min-height:560px;padding:34px;display:flex;flex-direction:column;gap:14px}
.slide h3{margin:0;font-size:34px;line-height:1.08;letter-spacing:-.04em;font-weight:600}
.mock{margin-top:auto;border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:12px;min-height:270px}
.mock.lt{background:#f4f4f1;color:#0a0a0a;box-shadow:inset 0 1.5px 0 #fff,inset 0 -14px 20px rgba(0,0,0,.08)}
.mock.dk{background:rgba(255,255,255,.06);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.mock .mh{display:flex;justify-content:space-between;gap:12px;font-size:13px;opacity:.7}
.mock .mb{font-size:19px;line-height:1.35;letter-spacing:-.015em}
.mock .lnk2{display:inline-block;margin-top:14px;border-radius:999px;padding:11px 18px;background:#0a0a0a;color:#fff;font-weight:600;font-size:14px}
.mock .mref{display:block;margin-top:14px;font:500 13px 'Geist Mono',monospace;font-style:normal;letter-spacing:.04em;opacity:.7}
.mock .mrow{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid rgba(255,255,255,.14);font-size:15px}
.mock .mrow:first-of-type{border-top:0}
.mock .mrow span:last-child{font-family:'Geist Mono',monospace;font-size:13px;text-align:right;opacity:.85}
.mock .mt{font-size:22px;font-weight:600;letter-spacing:-.03em}
.mock .mbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.mock .mbtns span{border-radius:999px;padding:12px 20px;font-weight:600;font-size:14px;box-shadow:inset 0 0 0 1.5px #0a0a0a}
.mock .mbtns span.p{background:#0a0a0a;color:#fff;box-shadow:none}
.mock .qrbox{align-self:center;width:150px;height:150px}
.mock .qrbox .qr{width:150px;height:150px;padding:8px;border-radius:14px}
.mock .cap{align-self:center;font:500 11px 'Geist Mono',monospace;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.mock .bigref{font:500 20px 'Geist Mono',monospace;letter-spacing:.03em;word-break:break-all;margin-top:6px}
.mock .bigref u{text-decoration:none;background:#0a0a0a;color:#fff;border-radius:4px;padding:0 4px}
.mock .badge{align-self:flex-start;border-radius:999px;padding:8px 16px;font:700 12px 'Geist Mono',monospace;letter-spacing:.2em;box-shadow:inset 0 0 0 1.5px currentColor}

/* how it is auditable: the record writes itself */
.ledger{padding:34px 36px;border-radius:30px;font-family:'Geist Mono',monospace}
.ledger .lh{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14)}
.ledger .lr{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1.1fr);gap:14px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px;line-height:1.4}
.ledger .lr span:first-child{color:rgba(255,255,255,.5)}
.ledger .lr span:last-child{color:rgba(255,255,255,.85);overflow-wrap:anywhere}
.ledger .lr b{font-family:'Geist',sans-serif;font-weight:600;font-size:15px}
.ledger .lf{margin-top:18px;display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.ledger .lf i{width:8px;height:8px;border-radius:50%;background:#fff;display:block}
html.js .ledger .lr.rv:nth-of-type(2){transition-delay:.05s}
html.js .ledger .lr.rv:nth-of-type(3){transition-delay:.12s}
html.js .ledger .lr.rv:nth-of-type(4){transition-delay:.19s}
html.js .ledger .lr.rv:nth-of-type(5){transition-delay:.26s}
html.js .ledger .lr.rv:nth-of-type(6){transition-delay:.33s}

/* compare: three ways, one switch */
.cmp2{margin-top:36px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid rgba(255,255,255,.2)}
.cmp2 div{padding:26px 24px 8px 0}
.cmp2 .k{font:500 11px 'Geist Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.cmp2 .v{margin-top:12px;font-size:32px;line-height:1.1;letter-spacing:-.04em;font-weight:600;min-height:72px}

/* at a glance: a quiet spec sheet */
.spec2{margin-top:44px;border-top:1px solid rgba(0,0,0,.2)}
.spec2 div{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:28px;padding:26px 0;border-bottom:1px solid rgba(0,0,0,.12);align-items:baseline}
.spec2 b{font:500 12px 'Geist Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#555;font-weight:500}
.spec2 span{font-size:26px;line-height:1.3;letter-spacing:-.03em;font-weight:500;color:#0a0a0a}

/* closing scene */
.closer{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 0 40px}
.closer h2{margin:20px 0 0;font-size:112px;line-height:.94;letter-spacing:-.065em;font-weight:600;max-width:900px}
.closer .go{justify-content:center;margin-top:34px}
.closer + .foot{margin-top:20px}

@media (max-width:980px){
  .words span{font-size:52px}
  .slide{flex-basis:84vw;min-height:520px;padding:26px}
  .slide h3{font-size:26px}
  .ledger{padding:22px 18px}
  .ledger .lr{grid-template-columns:70px minmax(0,1fr);gap:8px}
  .ledger .lr span:last-child{grid-column:2}
  .cmp2{grid-template-columns:minmax(0,1fr)}
  .cmp2 .v{min-height:0;font-size:26px}
  .spec2 div{grid-template-columns:minmax(0,1fr);gap:8px}
  .spec2 span{font-size:20px}
  .closer h2{font-size:56px}
}