/* The One-Hour Video: shared styles for index, course and thanks pages.
   Palette from the channel's thumbnails: white, near-black, thumbnail yellow. */
:root{
  --bg:#ffffff;
  --ink:#0f0f0f;
  --gray:#5c5c5c;
  --line:#e3e3e3;
  --soft:#f2f2f2;
  --yellow:#f5c116;
  --display:"Anton", Impact, "Arial Narrow", sans-serif;
  --body:"Archivo", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
a{color:inherit;text-underline-offset:3px}
img{display:block;max-width:100%;height:auto}
p{margin:0 0 1em;max-width:64ch;text-wrap:pretty}
h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;margin:0;text-wrap:balance}
h3{margin:0}
.page{max-width:1200px;margin:0 auto;padding:0 28px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0}
.mark{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.mark b{font:400 24px/1 var(--display);text-transform:uppercase;background:var(--yellow);padding:6px 8px 4px;border-radius:3px}
.mark span{font-size:15px;color:var(--gray)}
.top nav a{font-size:16px}

/* buttons */
.btn{display:inline-block;background:var(--yellow);color:var(--ink);font:700 18px/1.1 var(--body);padding:17px 26px;border-radius:6px;text-decoration:none;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .1s, box-shadow .1s;cursor:pointer;text-align:center}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn.line{background:#fff}

/* form */
label{display:block;font-weight:500;font-size:15px;margin-bottom:6px}
input[type=email],input[type=text]{width:100%;font:400 18px/1.4 var(--body);padding:14px 14px;border:1.5px solid #bdbdbd;border-radius:4px;background:#fff;color:var(--ink);min-height:52px}
input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(245,193,22,.55)}
.err{color:#b00000;font-size:14px;margin-top:6px;display:none}
.bad .err{display:block}
.bad input{border-color:#b00000}
.fine{font-size:14px;color:var(--gray);margin:12px 0 0}

/* hero graphic: a big channel's crowd vs your five */
.versus{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:34px;margin:0}
.versus .side{border:3px solid var(--ink);border-radius:10px;padding:22px 24px 20px;display:flex;flex-direction:column;min-width:0}
.versus .them{background:var(--soft);transform:rotate(-.6deg)}
.versus .us{background:var(--yellow);box-shadow:7px 7px 0 var(--ink);transform:rotate(.5deg)}
.tag{font:400 22px/1.15 var(--display);text-transform:uppercase;letter-spacing:.01em;background:var(--ink);color:#fff;padding:5px 11px 3px;align-self:flex-start;transform:rotate(-2deg);margin:0}
.us .tag{background:#fff;color:var(--ink);border:2px solid var(--ink);transform:rotate(1.5deg)}
.crowd{display:block;width:100%;height:auto;margin:18px 0 6px}
.five{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:6px;margin:auto 0;padding-top:40px}
.five svg{display:block;width:100%;height:auto}
.five .lead svg{transform:scale(1.28);transform-origin:50% 100%;position:relative;z-index:1}
.five span{display:block;text-align:center;font:700 13px/1.2 var(--body);margin-top:8px}
.five .lead span{background:var(--ink);color:var(--yellow);border-radius:3px;padding:2px 0;margin-top:8px}
.num{font:400 clamp(60px,7vw,100px)/.9 var(--display);margin:14px 0 0;display:flex;align-items:center;gap:14px;max-width:none}
.num span{font:700 17px/1.25 var(--body);max-width:13ch}
.vs{position:absolute;left:calc((100% - 34px) * .43 + 17px);top:48%;transform:translate(-50%,-50%) rotate(-9deg);width:96px;height:96px;border-radius:50%;background:var(--ink);color:var(--yellow);font:400 46px/88px var(--display);text-align:center;z-index:2;border:4px solid #fff;box-shadow:0 0 0 3px var(--ink)}
.caption{margin-top:22px;font-size:15px;color:var(--gray);max-width:80ch}

/* pipeline: one story moving through the team */
.pipe{--ic:108px;--gx:28px;--gy:44px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gy) var(--gx)}
.pipe li{position:relative;min-width:0}
.pipe .ic{position:relative;z-index:1;width:var(--ic);height:var(--ic);border:4px solid var(--ink);border-radius:50%;background:#fff;overflow:hidden;margin-bottom:14px}
.pipe li:nth-child(odd) .ic{transform:rotate(-5deg)}
.pipe li:nth-child(even) .ic{transform:rotate(4deg)}
.pipe .ic svg{display:block;width:100%;height:100%}
.pipe .you .ic,.pipe .end .ic{background:var(--yellow)}
.pipe b{display:block;font:400 25px/1.05 var(--display);text-transform:uppercase;margin-bottom:6px}
.pipe .you b{display:inline;background:var(--yellow);box-shadow:0 0 0 3px var(--yellow);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pipe .you b + p{margin-top:8px}
.pipe p{font-size:16px;line-height:1.45;margin:0}
.pipe li::after{content:"";position:absolute;background:var(--ink);border-radius:3px}
@media (min-width:1001px){
  .pipe li:nth-child(-n+3)::after{top:calc(var(--ic)/2 - 3px);left:var(--ic);width:calc(100% - var(--ic) + var(--gx));height:6px}
  .pipe li:nth-child(4)::after{top:calc(var(--ic)/2 - 3px);left:var(--ic);right:-26px;height:calc(100% + var(--gy) + 6px);background:none;border:6px solid var(--ink);border-left:0;border-radius:0 38px 38px 0}
  .pipe li:nth-child(5){grid-area:2/4}
  .pipe li:nth-child(6){grid-area:2/3}
  .pipe li:nth-child(7){grid-area:2/2}
  .pipe li:nth-child(8){grid-area:2/1}
  .pipe li:nth-child(n+5)::after{top:calc(var(--ic)/2 - 3px);right:100%;width:calc(var(--gx) + 100% - var(--ic));height:6px}
}
.pipe li:nth-child(n+1):last-child::after{display:none}

/* before / after evenings */
.evening{display:grid;gap:36px;align-content:start}
.eve{margin:0;display:grid;grid-template-columns:minmax(0,1fr);justify-items:start}
.eve h3{font:400 26px/1.1 var(--display);text-transform:uppercase;padding:4px 10px 2px;background:var(--ink);color:#fff;transform:rotate(-2deg);margin-bottom:10px}
.eve.after h3{background:var(--yellow);color:var(--ink);transform:rotate(1.5deg)}
.eve .clock{display:block;width:100%;max-width:320px;height:auto}
.eve figcaption{font-size:16px;line-height:1.45;max-width:38ch;margin-top:8px}

/* footer */
footer{border-top:1px solid var(--line);padding:28px 0 44px;font-size:14px;color:var(--gray)}
footer p{max-width:90ch;margin:0 0 .6em}
footer .links{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}

@media (max-width:1000px){
  .evening{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .eve h3{font-size:clamp(17px,4.6vw,26px)}
  .eve figcaption{font-size:15px}
  .pipe{--ic:84px;--gy:34px;grid-template-columns:minmax(0,1fr);max-width:640px}
  .pipe li:nth-child(n){grid-area:auto;display:grid;grid-template-columns:var(--ic) minmax(0,1fr);gap:0 18px;align-items:start}
  .pipe li:nth-child(n)::after{right:auto;left:calc(var(--ic)/2 - 3px);top:var(--ic);width:6px;height:calc(100% - var(--ic) + var(--gy))}
  .pipe li:nth-child(n+1):last-child::after{display:none}
  .pipe .ic{margin:0;grid-row:1 / span 2}
  .pipe b{margin-top:8px}
}
@media (max-width:760px){
  .versus{grid-template-columns:minmax(0,1fr);gap:0}
  .vs{position:relative;left:auto;top:auto;transform:rotate(-9deg);justify-self:center;margin:-26px 0;width:80px;height:80px;font-size:38px;line-height:72px}
  .pipe{--ic:72px;--gy:28px}
  .pipe b{font-size:22px}
}
@media (max-width:640px){
  body{font-size:17px}
  .page{padding:0 18px}
  .mark span{display:none}
  .btn{width:100%}
  .versus .side{padding:18px 14px 16px}
  .five{gap:2px}
  .five span{font-size:10.5px;overflow-wrap:normal;margin-left:-4px;margin-right:-4px}
  .num span{font-size:15px}
  .tag{font-size:19px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}