/* opening scene: the background and the headline move at different speeds */
.ch.flutebg{overflow:clip}
.ch.flutebg:before{inset:-25% 0;transform:translate3d(0,var(--bgy,0px),0);will-change:transform}
.hero-st h1,.hero-st .lede,.hero-st .go,.hero-st .lead2,.hero-st .mono{will-change:transform,opacity}

/* who it is for: the card in the middle, the audiences around it */
.center{text-align:center;max-width:820px;margin:0 auto}
.center .big{margin-left:auto;margin-right:auto}
.center .lead2{margin-left:auto;margin-right:auto}
.orbit{margin-top:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px) minmax(0,1fr);gap:36px;align-items:center}
.orbit .seg-btns{flex-direction:column;margin-top:0;gap:14px}
.orbit .col-left{align-items:flex-end}
.orbit .col-right{align-items:flex-start}
.orbit .seg-btns button{height:64px;padding:0 26px;font-size:16px;text-align:left}
.orbit .stagew{min-height:0;width:100%}
.audtxt.center{margin:36px auto 0;min-height:84px;max-width:720px}

/* what a certificate is for: one frame, advancing by itself */
.auto{margin-top:48px}
.auto-track{display:grid}
.auto-slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center;opacity:0;transform:translateX(36px);transition:opacity .7s ease,transform .7s ease;pointer-events:none;min-height:520px}
.auto-slide.on{opacity:1;transform:none;pointer-events:auto}
.auto-slide .as-text h3{margin:14px 0 0;font-size:64px;line-height:1;letter-spacing:-.05em;font-weight:600}
.auto-slide .as-text p{margin:22px 0 0;font-size:20px;line-height:1.6;color:rgba(255,255,255,.8);max-width:460px}
.auto-slide .mock{margin-top:0;min-height:400px;border-radius:32px;padding:34px;justify-content:center}
.auto-slide .mock .mb{font-size:26px}
.auto-slide .mock .mrow{font-size:18px;padding:16px 0}
.auto-slide .mock .mt{font-size:30px}
.auto-slide .mock .bigref{font-size:28px}
.auto-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:36px}
.auto-bar button{position:relative;border:0;background:none;color:rgba(255,255,255,.55);text-align:left;padding:18px 0 0;font:500 13px 'Geist',sans-serif;cursor:pointer;transition:color .3s}
.auto-bar button:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.18)}
.auto-bar button i{position:absolute;top:0;left:0;height:2px;width:0;background:#fff}
.auto-bar button.done i{width:100%}
.auto-bar button.on{color:#fff}
.auto.run .auto-bar button.on i{animation:autofill 6s linear forwards}
.auto:hover .auto-bar button.on i,.auto:focus-within .auto-bar button.on i{animation-play-state:paused}
@keyframes autofill{from{width:0}to{width:100%}}

/* how it is auditable: a record player */
.two-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:end}
.player{margin-top:56px;border-radius:44px;background:#080808;color:#fff;padding:60px 60px 46px;box-shadow:0 40px 80px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.1)}
.player .pshow{min-height:236px}
.player .ptime{font:500 96px/1 'Geist Mono',monospace;letter-spacing:-.05em;color:#fff}
.player .pname{margin-top:22px;font-size:46px;line-height:1.05;letter-spacing:-.04em;font-weight:600;color:#fff}
.player .pdet{margin-top:14px;font:500 17px 'Geist Mono',monospace;letter-spacing:.04em;color:rgba(255,255,255,.7)}
.player .ptrack{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:44px}
.player .pnode{position:relative;border:0;background:none;color:#fff;text-align:left;padding:24px 10px 0 0;opacity:.4;cursor:pointer;font:500 14px 'Geist',sans-serif;transition:opacity .3s}
.player .pnode:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.2)}
.player .pnode i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:#fff}
.player .pnode.done:before,.player .pnode.on:before{background:#fff}
.player .pnode.done,.player .pnode.on{opacity:1}
.player .pfoot{margin-top:34px;font:500 12px 'Geist Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65)}

/* compare: one slider, three stops */
.dial-wrap{margin-top:44px}
.dial-labels{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px}
.dial-labels button{border:0;background:none;color:rgba(255,255,255,.5);font:500 15px 'Geist',sans-serif;cursor:pointer;padding:0;transition:color .3s}
.dial-labels button.on{color:#fff}
.dial{-webkit-appearance:none;appearance:none;width:100%;height:76px;margin:0;background:transparent;cursor:grab;display:block}
.dial:active{cursor:grabbing}
.dial::-webkit-slider-runnable-track{height:76px;border-radius:999px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.dial::-webkit-slider-thumb{-webkit-appearance:none;width:34%;height:64px;margin-top:6px;border-radius:999px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.dial::-moz-range-track{height:76px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.dial::-moz-range-thumb{width:34%;height:64px;border:0;border-radius:999px;background:#fff}
.dial:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:999px}
.dial-out{margin-top:44px;min-height:250px}
.dial-out .opt{display:none}
.dial-out .opt.on{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));animation:optin .55s ease both}
.dial-out .opt div{padding:26px 28px 8px 0;border-top:1px solid rgba(255,255,255,.2)}
.dial-out .k{font:500 11px 'Geist Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.dial-out .v{margin:14px 0 0;font-size:38px;line-height:1.08;letter-spacing:-.045em;font-weight:600}
@keyframes optin{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .auto-slide{transition:none}
  .dial-out .opt.on{animation:none}
}

@media (max-width:980px){
  .orbit{grid-template-columns:minmax(0,1fr);gap:24px}
  .orbit .seg-btns{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .orbit .col-left,.orbit .col-right{align-items:center}
  .orbit .seg-btns button{height:50px;padding:0 18px;font-size:14px}
  .orbit .stagew{order:3}
  .auto-slide{grid-template-columns:minmax(0,1fr);gap:26px;min-height:0}
  .auto-slide .as-text h3{font-size:36px}
  .auto-slide .mock{min-height:280px;padding:22px}
  .auto-bar{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .auto-bar button span{display:none}
  .two-top{grid-template-columns:minmax(0,1fr);gap:20px}
  .player{padding:30px 22px 28px;border-radius:30px}
  .player .ptime{font-size:52px}
  .player .pname{font-size:28px}
  .player .pshow{min-height:170px}
  .player .pnode span{display:none}
  .dial-labels button{font-size:12px}
  .dial::-webkit-slider-thumb{width:38%}
  .dial-out .opt.on{grid-template-columns:minmax(0,1fr)}
  .dial-out .v{font-size:28px}
}