/* a slideshow that fits one screen */
.ch.fit{min-height:100vh;display:flex;align-items:center;padding-top:120px;padding-bottom:48px}
.ch.fit>.wrap{width:100%}
.ch.fit .head-s .big{font-size:clamp(32px,4.6vw,60px);margin-top:10px}
.ch.fit .auto{margin-top:26px;--sh:clamp(340px,calc(100vh - 390px),560px)}
.ch.fit .auto-track{height:var(--sh)}
.ch.fit .auto-slide{height:var(--sh);min-height:0;gap:48px}
.ch.fit .auto-slide .as-text h3{font-size:clamp(28px,3.6vw,52px)}
.ch.fit .auto-slide .as-text p{font-size:clamp(15px,1.4vw,19px);margin-top:16px}
.ch.fit .auto-slide .mock{align-self:stretch;height:100%;min-height:0;padding:28px;overflow:hidden}
.ch.fit .auto-slide .mock .mb{font-size:clamp(17px,1.7vw,24px)}
.ch.fit .auto-slide .mock .mrow{font-size:clamp(14px,1.3vw,17px);padding:clamp(8px,1.4vh,14px) 0}
.ch.fit .auto-slide .mock .mt{font-size:clamp(20px,2vw,28px)}
.ch.fit .auto-slide .mock .bigref{font-size:clamp(16px,1.9vw,26px)}
.ch.fit .auto-bar{margin-top:22px}

/* why: the big words on the left, the reasons on the right, sized to the screen */
.words span{font-size:clamp(40px,min(9.5vh,8vw),104px)}
.pin.flip .pin-stage{order:-1}
.pin.flip .pin-steps{padding-left:48px}

/* who it is for: four cards around the certificate */
.bento{position:relative;margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.bento .bcert{grid-column:2;grid-row:1/3;display:flex;align-items:center;justify-content:center}
.bcard:nth-of-type(1){grid-column:1;grid-row:1}
.bcard:nth-of-type(2){grid-column:1;grid-row:2}
.bcard:nth-of-type(3){grid-column:3;grid-row:1}
.bcard:nth-of-type(4){grid-column:3;grid-row:2}
.bcard{position:relative;appearance:none;border:0;text-align:left;font:inherit;color:#fff;cursor:pointer;padding:28px 28px 32px;border-radius:30px;display:flex;flex-direction:column;gap:10px;opacity:.55;transform:scale(.985);transition:opacity .4s ease,transform .4s ease,box-shadow .4s ease}
.bcard.on{opacity:1;transform:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.65),0 20px 50px rgba(0,0,0,.4)}
.bcard:hover,.bcard:focus-visible{opacity:1}
.bcard:focus-visible{outline:2px solid #fff;outline-offset:3px}
.bcard svg{width:30px;height:30px;margin-bottom:8px}
.bcard b{font-size:26px;line-height:1.1;letter-spacing:-.035em;font-weight:600}
.bcard span{font-size:15px;line-height:1.55;color:rgba(255,255,255,.75)}
.bcard:after{content:'';position:absolute;left:28px;bottom:0;height:2px;width:0;background:#fff}
.bento.run:not(.hold) .bcard.on:after{animation:audfill 3s linear forwards}
@keyframes audfill{from{width:0}to{width:calc(100% - 56px)}}

.mt16{margin-top:16px}.mt18{margin-top:18px}.mt40{margin-top:40px}.as-start{align-self:flex-start}
.cx li:nth-child(1){--i:0}.cx li:nth-child(2){--i:1}.cx li:nth-child(3){--i:2}.cx li:nth-child(4){--i:3}

/* the slideshow slides sideways */
.auto{overflow:hidden}
.auto-track{display:flex;transition:transform .65s cubic-bezier(.65,0,.2,1)}
.auto.run .auto-bar button.on i{animation-duration:3.5s}
.auto-slide{flex:0 0 100%;opacity:1;transform:none;pointer-events:auto;grid-area:auto;transition:none}
.auto-foot{display:flex;align-items:flex-end;gap:28px;margin-top:22px}
.auto-foot .auto-bar{flex:1;margin-top:0}
.auto-arrows{display:flex;gap:10px;padding-bottom:2px}
.auto-arrows button{width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff;font-size:22px;line-height:1;transition:background .25s,color .25s}
.auto-arrows button:hover{background:#fff;color:#000}
.ch.fit .head-s p.big{font-size:clamp(28px,3.4vw,46px);margin-top:8px}

/* compare: three cards side by side */
.cmp3{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cc{padding:36px 34px 28px;border-radius:32px;display:flex;flex-direction:column;gap:22px;transition:transform .4s ease,box-shadow .4s ease}
.cc:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),0 30px 60px rgba(0,0,0,.45)}
.cc h3{margin:0;font-size:clamp(26px,2.6vw,38px);line-height:1.05;letter-spacing:-.04em;font-weight:600}
.cc dl{margin:0}
.cc dl div{padding:18px 0;border-top:1px solid rgba(255,255,255,.14)}
.cc dt{font:500 11px 'Geist Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cc dd{margin:8px 0 0;font-size:clamp(17px,1.5vw,21px);line-height:1.35;color:#fff}

/* the closing line: calm, not loud */
.closer h2{font-size:clamp(40px,6vw,84px);line-height:1.04;font-weight:500;letter-spacing:-.05em;max-width:none}

/* compare: three ways, one open at a time */
.cmpx{margin-top:44px;display:flex;gap:18px;min-height:560px}
.cx{position:relative;flex:1 1 0;min-width:0;padding:34px 32px 30px;border-radius:32px;display:flex;flex-direction:column;gap:18px;opacity:.55;cursor:pointer;overflow:hidden;transition:flex-grow .6s cubic-bezier(.65,0,.2,1),opacity .4s ease,box-shadow .4s ease}
.cx.on{flex-grow:1.4;opacity:1;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),0 30px 70px rgba(0,0,0,.5)}
.cx:hover,.cx:focus-visible{opacity:1}
.cx:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cx h3{margin:0;font-size:clamp(22px,2.2vw,32px);line-height:1.08;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.cx .tag{margin:0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.72);max-width:44ch}
.cx ol{list-style:none;margin:6px 0 0;padding:0}
.cx li{position:relative;padding:14px 0 14px 30px;border-top:1px solid rgba(255,255,255,.12);font-size:16px;line-height:1.4;color:rgba(255,255,255,.45)}
.cx li:before{content:'';position:absolute;left:0;top:20px;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.cx.on li{animation:cxstep .55s ease both;animation-delay:calc(var(--i) * .3s)}
.cx.on li:before{animation:cxdot .3s ease both;animation-delay:calc(var(--i) * .3s)}
.cx .vp{margin-left:10px;padding:3px 10px;border-radius:999px;font:700 10px 'Geist Mono',monospace;letter-spacing:.16em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.cx .cx-f{margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.cx .cx-f span{display:block;font:500 11px 'Geist Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cx .cx-f b{display:block;margin-top:8px;font-size:clamp(17px,1.5vw,21px);font-weight:500;color:#fff}
.cx:after{content:'';position:absolute;left:32px;bottom:0;height:2px;width:0;background:#fff}
.cmpx.run:not(.hold) .cx.on:after{animation:cxfill 4.5s linear forwards}
@keyframes cxfill{from{width:0}to{width:calc(100% - 64px)}}
@keyframes cxstep{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none;color:#fff}}
@keyframes cxdot{from{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}to{background:#fff;box-shadow:none}}

/* type that wraps well */
.big,.sb h3,.auto-slide h3,.bcard b,.cc h3{text-wrap:balance}

/* at a glance: dark cards in different sizes */
.sbento{margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.sb{background:#0a0a0a;color:#fff;border-radius:32px;padding:34px;display:flex;flex-direction:column;gap:14px;min-height:250px;box-shadow:0 30px 60px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.1)}
.sb .k{font:500 11px 'Geist Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.sb h3{margin:0;color:#fff;font-size:clamp(26px,2.4vw,36px);line-height:1.04;letter-spacing:-.045em;font-weight:600;overflow-wrap:break-word}
.sb.w2 h3{font-size:clamp(30px,3vw,46px)}
.sb p{margin:0;font-size:16px;line-height:1.55;color:rgba(255,255,255,.72)}
.sb .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.sb .chips span{padding:9px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);font-size:14px}

.sb.t2 p{margin-top:auto}
.sb.w2{grid-column:span 2}
.sb.w4{grid-column:span 4;min-height:200px}
.sb.t2{grid-row:span 2}

@media (max-width:980px){
  .ch.fit{min-height:0;display:block;padding-top:100px}
  .ch.fit .auto-track,.ch.fit .auto-slide{height:auto}
  .ch.fit .auto-slide .mock{height:auto;min-height:260px}
  .pin.flip .pin-steps{padding-left:0}
  .bento{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .bento .bcert{grid-column:1;grid-row:auto;order:-1}
  .bcard:nth-of-type(n){grid-column:1;grid-row:auto}
  .sbento{grid-template-columns:minmax(0,1fr)}
  .cmp3{grid-template-columns:minmax(0,1fr)}
  .cmpx{flex-direction:column;min-height:0}
  .cx{opacity:1}
  .auto-foot{gap:12px}
  .auto-arrows button{width:42px;height:42px}
  .sb.w2,.sb.w4{grid-column:auto}
  .sb.t2{grid-row:auto}
  .sb h3{font-size:28px}

}