/* Founder video section (draft 2026-11-13, not deployed). One take, no edits to the footage:
   every word on top of the video is HTML, timed to the video, so the file itself stays untouched. */
.ceo .center .sub{max-width:560px}
.ceo-player{position:relative;margin:clamp(32px,4vw,52px) auto 0;max-width:1040px;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#000;container-type:inline-size;box-shadow:var(--shadow-lg)}
.ceo-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Start screen */
.ceo-start{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;gap:1.8cqw;padding:0 0 3.4cqw 3.4cqw;background:linear-gradient(200deg,rgba(14,8,23,0) 50%,rgba(14,8,23,.62) 100%);cursor:pointer;z-index:4;text-align:left}
.ceo-play{flex:none;width:clamp(52px,8.4cqw,84px);height:clamp(52px,8.4cqw,84px);border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .25s var(--ease)}
.ceo-start:hover .ceo-play{transform:scale(1.06)}
.ceo-play svg{width:34%;height:34%;margin-left:7%;fill:var(--ink)}
.ceo-start-meta{color:#fff;font-size:clamp(13px,1.7cqw,17px);font-weight:500;line-height:1.35;padding-bottom:.6cqw}
.ceo-start-meta strong{display:block;font-size:clamp(17px,2.6cqw,27px);font-weight:600;letter-spacing:-.02em}
.ceo-start-meta b{font-weight:600}
.ceo-player.started .ceo-start{display:none}

/* Timed text on the video */
.ceo-tag{position:absolute;z-index:3;background:rgba(14,8,23,.86);color:#fff;border-radius:clamp(8px,1.2cqw,14px);padding:1.4cqw 2cqw;opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none}
.ceo-tag.on{opacity:1;transform:none}
.ceo-tag strong{display:block;font-size:clamp(14px,2.6cqw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.ceo-tag span{display:block;margin-top:.4cqw;font-size:clamp(11px,1.6cqw,17px);color:var(--orchid3);line-height:1.3}
.ceo-tag.tl{left:3cqw;top:3cqw}
.ceo-tag.tr{right:3cqw;top:3cqw;text-align:right}

/* Subtitles */
.ceo-cap{position:absolute;left:0;right:0;bottom:4.2cqw;z-index:3;display:flex;flex-direction:column;align-items:center;gap:.5cqw;pointer-events:none;transition:bottom .2s var(--ease)}
.ceo-cap span{background:rgba(14,8,23,.82);color:#fff;font-size:clamp(14px,2.7cqw,28px);font-weight:600;letter-spacing:-.015em;line-height:1.25;padding:.35cqw 1.1cqw;border-radius:.6cqw;max-width:88cqw;text-align:center}
.ceo-player.controls-on .ceo-cap{bottom:10.5cqw}

/* Controls */
.ceo-bar{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;gap:1.6cqw;padding:1.6cqw 2.4cqw;background:linear-gradient(180deg,rgba(14,8,23,0),rgba(14,8,23,.7));color:#fff;opacity:0;transition:opacity .25s var(--ease)}
.ceo-player.controls-on .ceo-bar{opacity:1}
.ceo-bar button{width:clamp(30px,4cqw,40px);height:clamp(30px,4cqw,40px);display:grid;place-items:center;border-radius:50%;color:#fff}
.ceo-bar button:hover{background:rgba(255,255,255,.12)}
.ceo-bar svg{width:56%;height:56%;fill:currentColor}
.ceo-bar .cc{font-size:clamp(11px,1.4cqw,14px);font-weight:700;width:auto;padding:0 .9cqw;border-radius:6px;border:1.5px solid rgba(255,255,255,.7);height:clamp(22px,2.8cqw,28px)}
.ceo-bar .cc[aria-pressed="false"]{opacity:.5}
.ceo-time{font-size:clamp(11px,1.4cqw,14px);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85);min-width:9cqw}
.ceo-track{flex:1;height:clamp(14px,2cqw,20px);display:flex;align-items:center;cursor:pointer}
.ceo-track i{display:block;width:100%;height:4px;border-radius:4px;background:rgba(255,255,255,.28);position:relative;overflow:hidden}
.ceo-track b{position:absolute;inset:0 auto 0 0;width:0;background:#fff;border-radius:4px}

/* Under the video */
.ceo-under{max-width:1040px;margin:22px auto 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ceo-who strong{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em}
.ceo-who span{display:block;margin-top:2px;font-size:15px;color:var(--muted)}
.ceo-next{font-size:16px;color:var(--muted)}
.ceo-next a{color:var(--purple6);font-weight:600;border-bottom:1.5px solid currentColor}

.ceo-player:fullscreen{border-radius:0;max-width:none}
@media (max-width:640px){
  .ceo-player{border-radius:var(--r-md);margin-inline:-8px}
  .ceo-under{flex-direction:column;align-items:flex-start;gap:12px}
}

/* Round 3: phones + flow into the payouts list */
.sec.ceo{padding-bottom:clamp(16px,2.5vw,32px)}
.sec.ceo + .sec.proof{padding-top:clamp(48px,6vw,88px)}
@container (max-width:560px){
  .ceo-tag span{display:none}
  .ceo-tag strong{font-size:13px}
  .ceo-tag{padding:6px 9px;border-radius:8px}
  .ceo-cap span{font-size:13px;padding:2px 7px;border-radius:5px}
  .ceo-start-meta{font-size:12px}
  .ceo-start-meta strong{font-size:16px}
}

/* Round 4: title-card poster (owner: "my face looks stupid and funny in the poster").
   A paused low-angle frame never flatters; the face only shows once the video plays. */
.ceo-player.card-poster video{opacity:0}
.ceo-player.card-poster.started video{opacity:1}
.ceo-player.card-poster .ceo-start{background:var(--ink);flex-direction:column;align-items:flex-start;justify-content:space-between;padding:6cqw 6.4cqw 5.6cqw}
.ceo-card-q{color:#fff;font-size:clamp(26px,6.2cqw,64px);font-weight:600;letter-spacing:-.045em;line-height:1.02;max-width:72cqw}
.ceo-card-q em{background:linear-gradient(100deg,#E7C2F8,#C45FE0);-webkit-background-clip:text;background-clip:text;color:transparent}
.ceo-card-row{display:flex;align-items:center;gap:2cqw}
.ceo-player.card-poster .ceo-start-meta strong{font-size:clamp(16px,2.4cqw,24px)}
.ceo-player.card-poster .ceo-start-meta{color:var(--mutedD)}
.ceo-player.card-poster .ceo-start-meta strong{color:#fff}

/* Round 5: owner picked frame 6:08 (hand on chin, face on the right). Question sits on the dark left side. */
.ceo-player.photo-poster .ceo-start{flex-direction:column;align-items:flex-start;justify-content:space-between;padding:5.6cqw 6cqw 5cqw;background:linear-gradient(90deg,rgba(14,8,23,.78) 0%,rgba(14,8,23,.45) 38%,rgba(14,8,23,0) 58%)}
.ceo-player.photo-poster .ceo-card-q{max-width:46cqw;font-size:clamp(22px,5.2cqw,54px)}
@container (max-width:560px){
  .ceo-player.photo-poster .ceo-card-q{display:none}
  .ceo-player.photo-poster .ceo-start{justify-content:flex-end;padding:0 0 12px 12px}
  .ceo-start-meta .long{display:none}
}

/* Reactions (2026-11-13). Emoji: Google Noto Animated Emoji, CC BY 4.0. */
.ceo-under{align-items:flex-end}
.rx-bar{display:flex;flex-direction:column;align-items:flex-end;gap:6px;opacity:.001;transition:opacity .4s var(--ease)}
.rx-bar.ready{opacity:1}
.rx-total{font-size:14px;color:var(--muted);padding-right:10px;font-variant-numeric:tabular-nums}
.rx-list{display:flex;gap:2px}
.rx{position:relative;display:flex;align-items:center;gap:4px;padding:6px 10px 6px 6px;border-radius:30px;-webkit-tap-highlight-color:transparent}
.rx-face{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;transition:transform .45s cubic-bezier(.3,1.6,.5,1),background-color .25s var(--ease)}
.rx-face img{width:34px;height:34px;user-select:none;-webkit-user-drag:none}
.rx:hover .rx-face{transform:translateY(-4px) scale(1.14)}
.rx:active .rx-face{transform:scale(.9);transition-duration:.12s}
.rx.on .rx-face{background:var(--lilac2)}
.rx-ring{position:absolute;left:6px;top:6px;width:46px;height:46px;border-radius:50%;border:2px solid var(--orchid);opacity:0;pointer-events:none}
.rx-n{position:relative;z-index:1;height:20px;min-width:14px;overflow:hidden;font-size:15px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;opacity:.45;transition:color .25s,opacity .25s}
.rx.has .rx-n{opacity:1}
.rx.on .rx-n{color:var(--purple6);opacity:1}
.rx-roll{display:inline-grid}
.rx-roll i{grid-area:1/1;font-style:normal;line-height:20px}
.rx-tip{position:absolute;left:50%;bottom:calc(100% + 2px);transform:translate(-50%,6px);background:var(--ink);color:#fff;font-size:12px;font-weight:600;padding:5px 9px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.rx:hover .rx-tip{opacity:1;transform:translate(-50%,0)}
.rx-fly{position:fixed;z-index:9999;pointer-events:none;will-change:transform,opacity}
.ceo-next{max-width:1040px;margin:14px auto 0}
@media (hover:none){.rx-tip{display:none}.rx:hover .rx-face{transform:none}}
@media (max-width:640px){
  .ceo-under{align-items:stretch}
  .rx-bar{align-items:stretch}
  .rx-total{padding:0 0 0 4px}
  .rx-list{justify-content:space-between}
  .rx{padding:4px 6px 4px 2px}
  .rx-face{width:42px;height:42px}
  .rx-face img{width:30px;height:30px}
  .rx-ring{left:2px;top:4px;width:42px;height:42px}
}
/* Round 2: zero counts hidden, total inline */
.rx-bar{flex-direction:row;align-items:center;gap:8px}
.rx-total{padding:0 6px 0 0}
.rx .rx-n{display:none}
.rx.has .rx-n{display:block}
.rx:not(.has){padding-right:6px}
@media (max-width:640px){.rx-bar{flex-direction:column;align-items:stretch;gap:4px}}
/* Round 3: never hide the emoji while counts load; only the numbers fade in */
.rx-bar{opacity:1}
.rx-bar .rx-total,.rx-bar .rx-n{transition:opacity .4s var(--ease)}
.rx-bar:not(.ready) .rx-total,.rx-bar:not(.ready) .rx-n{opacity:0}