/* scene grammar: one idea per scene, large type, large graphic */
.scn{padding:110px 0;display:flex;flex-direction:column;justify-content:center}
.scn .head-s{max-width:820px}
.scn .head-s .big{font-size:76px;line-height:.96;letter-spacing:-.055em;margin-top:14px}
.scn .head-s .lead2{font-size:21px;max-width:640px}

/* hero scene */
.hero-scene{min-height:calc(100vh - 100px);align-items:center;text-align:center;padding:64px 0 40px}
.hero-scene h1{margin:20px 0 0;font-size:132px;line-height:.92;letter-spacing:-.065em;font-weight:600}
.hero-scene .lede{margin:26px auto 0;font-size:22px;line-height:1.5;max-width:640px;color:rgba(255,255,255,.85)}
.hero-scene .go{justify-content:center}
.hero-obj{margin-top:52px;width:100%}
.hero-obj .cstage{width:100%}
.hero-obj .cert{width:min(760px,100%)}
.hero-obj .cert .in{padding:46px 52px;gap:22px}
.hero-obj .cert .cgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
.hero-obj .cert .cert-title{font-size:34px}

/* pinned scene: the object stays, the story moves */
.pin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:72px;align-items:start}
.pin-stage{position:sticky;top:100px;height:calc(100vh - 140px);display:flex;align-items:center;justify-content:center}
.pin-stage .stagew{min-height:0;width:100%}
.pin-stage .cert [data-screen]{opacity:.26;transition:opacity .45s ease}
.pin-stage .cert [data-screen].on{opacity:1}
.pin-steps .st{min-height:80vh;display:flex;flex-direction:column;justify-content:center;max-width:460px}
.pin-steps .st h3{margin:14px 0 0;font-size:56px;line-height:1;letter-spacing:-.045em;font-weight:600}
.pin-steps .st p{margin:18px 0 0;font-size:20px;line-height:1.6;color:rgba(255,255,255,.82)}

/* big cards that swipe */
.cardrow .stn{flex:0 0 460px;min-height:560px}
.cardrow .stn h3{font-size:36px}
.cardrow .stn p{font-size:17px}
.mini.stn{flex:0 0 320px;min-height:220px}
.mini.stn h3{font-size:24px}
.doc{margin-top:auto;border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:12px;min-height:250px}
.doc .dl{font:500 11px 'Geist Mono',monospace;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.doc .dt{font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.doc .bar{height:8px;border-radius:4px;background:currentColor;opacity:.16}
.doc .bar.s{width:62%}
.doc .stamp{margin-top:auto;align-self:flex-start;border-radius:999px;padding:7px 15px;font:700 12px 'Geist Mono',monospace;letter-spacing:.2em;box-shadow:inset 0 0 0 1.5px currentColor}
.doc.k{color:#fff;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(0,0,0,.5));box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1.5px 0 rgba(255,255,255,.5)}
.doc.w2{color:#0a0a0a;background:rgba(255,255,255,.94);box-shadow:inset 0 1.5px 0 #fff,inset 0 -14px 20px rgba(0,0,0,.1)}
.doc.g2{color:#0a0a0a;background:rgba(190,190,190,.9);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8),inset 0 -14px 20px rgba(0,0,0,.14)}

/* diagrams */
.dia{display:block;width:100%;height:auto;margin-top:40px}
.dia rect{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.35);stroke-width:1.2}
.dia circle{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.6);stroke-width:1.5}
.dia line,.dia path{stroke:rgba(255,255,255,.45);stroke-width:1.4;fill:none}
.dia text{fill:#fff;font:500 18px 'Geist',sans-serif}
.dia .m{font:500 12px 'Geist Mono',monospace;letter-spacing:.14em;fill:rgba(255,255,255,.6)}
.dia .big2{font:600 22px 'Geist',sans-serif}
.dia .lit{fill:#fff;stroke:none}
.dia .lit-t{fill:#000;font:700 13px 'Geist Mono',monospace;letter-spacing:.18em}

/* why list with outlined numerals */
.whyl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 64px;margin-top:48px}
.whyl .num{display:block;font-size:84px;line-height:1;font-weight:600;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.4)}
.whyl b{display:block;margin-top:10px;font-size:28px;letter-spacing:-.03em;line-height:1.15;font-weight:600}
.whyl span.t{display:block;margin-top:10px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.78)}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:40px}
.tile{border-radius:24px;padding:24px 20px;min-height:200px;display:flex;flex-direction:column;gap:10px}
.tile b{font-size:21px;letter-spacing:-.025em;line-height:1.2;font-weight:600}
.tile span{font-size:15px;line-height:1.5;color:rgba(255,255,255,.75)}

/* compare */
.cmp{margin-top:40px;display:grid;grid-template-columns:minmax(0,.8fr) repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.2)}
.cmp>div{padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.12);font-size:16px;line-height:1.5;color:rgba(255,255,255,.82)}
.cmp .h{font:500 12px 'Geist Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cmp .rl{font-weight:600;color:#fff}

/* specs */
.specs{margin-top:36px;border-top:1px solid rgba(255,255,255,.2)}
.specs div{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:24px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.specs b{font:500 12px 'Geist Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:500;padding-top:3px}
.specs span{font-size:17px;line-height:1.55;color:rgba(255,255,255,.9)}

.roster.sm .r b{font-size:40px}
.doc i.bar{display:block}
.pin-steps .hero-st{max-width:640px;min-height:92vh}
.pin-steps .hero-st h1{margin:20px 0 0;font-size:112px;line-height:.92;letter-spacing:-.065em;font-weight:600}
.pin-steps .hero-st .lede{margin:24px 0 0;font-size:21px;line-height:1.5;color:rgba(255,255,255,.85)}
.pin-steps .hero-st .go{margin-top:28px}
.docwrap{margin-top:auto;position:relative}
.docwrap .cert{width:100%;max-width:100%;transform:none;pointer-events:none}
.cardrow .stn:first-child{flex-basis:620px}
.dia .seal-t{font:700 15px 'Geist Mono',monospace;letter-spacing:.2em;fill:#fff}

/* authors flow into one check, then into the locked certificate */
.flow{margin-top:48px;display:flex;flex-direction:column;align-items:center}
.srcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
.src{margin:0 10px;border-radius:24px;padding:26px 18px;text-align:center;font-size:21px;font-weight:600;letter-spacing:-.025em}
.src small{display:block;margin-top:8px;font:500 11px 'Geist Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.fan{display:block;width:100%;height:76px}
.fan path{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.4}
.node{border-radius:999px;padding:20px 52px;text-align:center}
.node b{display:block;font-size:28px;letter-spacing:-.03em;font-weight:600}
.node span{display:block;margin-top:4px;font:500 11px 'Geist Mono',monospace;letter-spacing:.16em;color:rgba(255,255,255,.6)}
.vline{width:1px;height:64px;background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.15))}
.flow .cstage{width:100%;min-height:0}

/* the public check, in the same material as the certificate */
.tryg{padding:56px 64px;max-width:900px;margin:0 auto}
.tryg .big{font-size:50px;margin-top:10px}
.tryg .intro{margin:14px 0 0;font-size:17px;line-height:1.6;color:rgba(255,255,255,.78);max-width:560px}
.tryg .tabs{margin-top:26px}
.tryg .ref{margin-top:22px;font:500 17px 'Geist Mono',monospace;letter-spacing:.04em;word-break:break-all}
.tryg .res{margin-top:18px;display:flex;flex-direction:column;background:transparent;box-shadow:none;border-radius:0;padding:0}
.tryg .res .stat{display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;padding:0;background:transparent;color:#fff;font:700 12px 'Geist Mono',monospace;letter-spacing:.2em;box-shadow:inset 0 2px 1px rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.35)}
.tryg .res .stat.bad{background:transparent;color:#fff}
.tryg .res .ln{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid rgba(255,255,255,.14);font-size:15px}
.tryg .res .ln:first-of-type{margin-top:20px}
.tryg .res .ln span:last-child{font-family:'Geist Mono',monospace;text-align:right;overflow-wrap:anywhere}
.tryg .res p{margin:16px 0 0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.82)}
.tryg .exl{margin-top:16px}
.pin-stage .cert .cgrid>div:not([data-screen]){opacity:.26}
.ctl{margin-top:6px}

@media (max-width:980px){
  .pin-steps .hero-st{min-height:0;padding-bottom:30px}
  .pin-steps .hero-st h1{font-size:60px}
  .cardrow .stn:first-child{flex-basis:88vw}
  .srcs{grid-template-columns:1fr 1fr;row-gap:12px;margin-bottom:22px}
  .src{margin:0 6px;font-size:18px}
  .fan{display:none}
  .tryg{padding:34px 22px}
  .tryg .big{font-size:34px}
}

@media (max-width:980px){
  .scn{padding:64px 0}
  .scn .head-s .big{font-size:42px}
  .hero-scene{min-height:0;padding:40px 0 20px}
  .hero-scene h1{font-size:60px}
  .hero-obj .cert .in{padding:26px 22px}
  .hero-obj .cert .cgrid{grid-template-columns:1fr 1fr}
  .hero-obj .cert .cert-title{font-size:24px}
  .pin{grid-template-columns:minmax(0,1fr);gap:0}
  .pin-stage{position:sticky;top:76px;height:auto;z-index:3;padding:8px 0;background:linear-gradient(#000 80%,rgba(0,0,0,0));order:-1}
  .pin-steps .st{min-height:60vh}
  .pin-steps .st h3{font-size:34px}
  .pin-steps .st p{font-size:17px}
  .cardrow .stn{flex-basis:82vw;min-height:480px}
  .mini.stn{flex-basis:70vw}
  .whyl{grid-template-columns:minmax(0,1fr);gap:36px}
  .tiles{grid-template-columns:1fr 1fr}
  .cmp{grid-template-columns:minmax(0,1fr)}
  .cmp .h:first-child{display:none}
  .specs div{grid-template-columns:minmax(0,1fr);gap:6px}
}