/* ============================================================================
   NextGen Summit — People's Choice Award  (STAGING PREVIEW)
   Nothing here is a new design system. The page is built from the tokens and
   components already in site.css: --accent and --accent-ink, --paper and --ink,
   .btn, .label, .wm, .rv, and the same dark cinematic treatment the stage and
   the pitch hero use. Only the pieces this page needs that do not exist yet are
   written here: the entrant card, the profile dialog, the vote flow and the
   preview banner.
   ========================================================================= */

/* ---------- the banner that says none of this is live ----------
   It is fixed, loud and unmissable on purpose: every vote on this page is a
   simulation, and nobody reviewing it should be in any doubt about that. */
.pcbar{position:fixed;left:0;right:0;top:0;z-index:300;display:flex;align-items:center;
  justify-content:center;gap:10px;min-height:34px;padding:6px 16px;text-align:center;
  background:repeating-linear-gradient(135deg,#FFE500 0 14px,#0B0B0F 14px 28px)}
.pcbar__in{display:inline-flex;align-items:center;gap:10px;padding:3px 14px;border-radius:999px;
  background:#0B0B0F;color:#FFE500;font:800 10px/1.4 var(--f-sans);letter-spacing:.18em;
  text-transform:uppercase}
.pcbar__dot{width:7px;height:7px;border-radius:50%;background:#FFE500;flex:none}
body.has-pcbar{padding-top:34px}
body.has-pcbar .nav{top:34px}
@media (max-width:560px){
  .pcbar{min-height:44px}
  .pcbar__in{font-size:9px;letter-spacing:.12em;padding:4px 10px}
  body.has-pcbar{padding-top:44px}
  body.has-pcbar .nav{top:44px}
}

/* ---------- hero ---------- */
.pch{position:relative;isolation:isolate;min-height:clamp(560px,86vh,880px);display:flex;
  align-items:center;color:#fff;background:#04080A;overflow:hidden}
.pch__stage{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(58% 44% at 14% 6%,rgba(31,199,190,.22) 0%,rgba(31,199,190,0) 68%),
  radial-gradient(40% 32% at 88% 14%,rgba(0,163,230,.14) 0%,rgba(0,163,230,0) 70%),
  radial-gradient(70% 54% at 50% 46%,rgba(10,26,28,.6) 0%,rgba(4,8,10,0) 100%),
  linear-gradient(180deg,#060C0E 0%,#04080A 52%,#040708 100%)}
.pch__grain{position:absolute;inset:0;z-index:0;opacity:.13;pointer-events:none;background-size:150px 150px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.5 1.45'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)'/%3E%3C/svg%3E")}
/* the lower edge dissolves into the paper of the gallery below */
.pch::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(56px,9vh,112px);z-index:1;
  pointer-events:none;
  background:linear-gradient(0deg,var(--paper) 0%,rgba(250,250,248,.55) 34%,rgba(250,250,248,0) 100%)}
.pch__in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:clamp(90px,15vh,170px) var(--gutter) clamp(84px,13vh,150px)}
.pch__eyebrow{font:800 11px/1.4 var(--f-sans);letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent)}
.pch__title{margin-top:clamp(14px,2.4vh,26px);font-size:clamp(46px,8vw,132px);line-height:1.02;
  text-shadow:0 2px 44px rgba(4,9,10,.6)}
.pch__lede{margin-top:clamp(18px,2.8vh,30px);max-width:46ch;
  font:500 clamp(15px,1.2vw,19px)/1.6 var(--f-sans);color:rgba(255,255,255,.9)}
.pch__meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;
  margin-top:clamp(24px,3.6vh,38px)}
.pch__cta{margin-top:clamp(26px,4vh,44px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}

/* the voting status pill, one per state */
.pcstate{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;
  font:800 10px/1 var(--f-sans);letter-spacing:.18em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:rgba(255,255,255,.88)}
.pcstate__dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.pcstate[data-state="coming-soon"]{color:#FFE500}
.pcstate[data-state="open"]{color:var(--accent);box-shadow:inset 0 0 0 1px rgba(31,199,190,.55)}
.pcstate[data-state="open"] .pcstate__dot{animation:pc-pulse 2.4s var(--ease) infinite}
.pcstate[data-state="closed"]{color:rgba(255,255,255,.7)}
.pcstate[data-state="results"]{color:var(--accent)}
@keyframes pc-pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* the countdown, shown only when there is a deadline to count to */
.pcclock{display:flex;align-items:baseline;gap:10px;font-variant-numeric:tabular-nums}
.pcclock__k{font:800 9.5px/1 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.pcclock__v{font:800 15px/1 var(--f-sans);letter-spacing:.08em;color:#fff}
.pcclock__v span{color:var(--accent);margin-left:1px}
.pcclock[hidden]{display:none}

/* ---------- the gallery ---------- */
.pcg{position:relative;background:var(--paper);color:var(--ink);
  padding:clamp(66px,10vh,120px) 0 clamp(72px,11vh,132px)}
.pcg__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.pcg__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:24px 40px;margin-bottom:clamp(30px,4.4vh,52px)}
.pcg__title{font-size:clamp(34px,4.4vw,64px);line-height:1.04}
.pcg__note{max-width:42ch;font:500 13.5px/1.6 var(--f-sans);color:var(--ink-2)}
.pcg__grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2.4vw,30px);
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){.pcg__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.pcg__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.pcg__grid{grid-template-columns:minmax(0,1fr)}}

/* the entrant card: the speaker card's relative, built for a founder rather than a portrait --
   it has to carry a company, a line of description and two controls, so the photograph is a
   band across the top rather than the whole face of the card. */
.pce{position:relative;display:flex;flex-direction:column;border-radius:13px;overflow:hidden;
  background:#0A1114;color:#fff;box-shadow:0 0 0 1px rgba(11,11,15,.1),0 20px 40px -26px rgba(0,0,0,.6);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
@media (hover:hover){
  .pce:hover{transform:translateY(-6px);
    box-shadow:0 0 0 1px rgba(31,199,190,.5),0 30px 54px -26px rgba(0,0,0,.7),0 0 44px -18px rgba(31,199,190,.5)}
  .pce:hover .pce__shot img{transform:scale(1.04)}
}
.pce:focus-within{box-shadow:0 0 0 2px var(--accent-ink),0 20px 40px -26px rgba(0,0,0,.6)}
.pce__shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:#07090B}
.pce__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;
  transition:transform 1s var(--ease)}
.pce__shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,8,10,0) 42%,rgba(4,8,10,.72) 100%)}
/* no photograph yet: the house "awaiting" treatment, initials on the stage gradient */
.pce__await{position:absolute;inset:0;display:grid;place-items:center;gap:7px;align-content:center;
  background:radial-gradient(120% 90% at 50% 8%,rgba(31,199,190,.18) 0%,rgba(31,199,190,0) 62%),
    linear-gradient(180deg,#0C1719 0%,#06090B 100%)}
.pce__await-n{font-family:var(--f-display);font-weight:900;font-size:clamp(24px,3.4vw,38px);
  line-height:.9;color:rgba(255,255,255,.9)}
.pce__await-k{font:800 8px/1 var(--f-sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent)}
.pce__num{position:absolute;left:12px;top:12px;z-index:2;display:inline-grid;place-items:center;
  min-width:28px;height:24px;padding:0 8px;border-radius:999px;background:rgba(4,8,10,.76);
  font:800 10px/1 var(--f-sans);letter-spacing:.1em;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.pce__body{display:flex;flex-direction:column;flex:1;gap:7px;padding:16px 16px 15px}
.pce__name{font:800 16px/1.2 var(--f-sans);letter-spacing:-.01em}
.pce__co{font:800 10px/1.3 var(--f-sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent)}
.pce__blurb{margin-top:2px;font:500 12.5px/1.55 var(--f-sans);color:rgba(255,255,255,.72)}
.pce__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:13px}
.pce__acts .btn{--h:38px;font-size:10.5px;padding:0 1em;flex:1 1 auto}
/* the whole card opens the profile; the buttons sit above that layer */
.pce__open{position:absolute;inset:0;z-index:1;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;font:inherit;color:transparent}
.pce__open:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.pce__acts,.pce__num{position:relative;z-index:2}

/* a placeholder entrant is marked, so nobody mistakes the slot for a real founder */
.pce--draft .pce__name{color:rgba(255,255,255,.82)}
.pce__flag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  padding:3px 8px;border-radius:5px;background:rgba(255,229,0,.14);
  font:800 8.5px/1.3 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:#FFE500}

/* ---------- the profile ---------- */
.pcp{width:min(880px,calc(100% - 28px));max-width:none;max-height:calc(100% - 28px);padding:0;border:0;
  border-radius:16px;background:#0A1114;color:#fff;overflow:visible;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.pcp::backdrop{background:rgba(4,8,10,.76);backdrop-filter:blur(3px)}
.pcp__scroll{max-height:calc(100vh - 56px);overflow:auto;overscroll-behavior:contain;border-radius:16px}
.pcp__close{position:absolute;right:-6px;top:-50px;z-index:3;display:grid;place-items:center;
  width:44px;height:44px;border-radius:999px;border:0;cursor:pointer;background:rgba(10,17,20,.9);
  color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.pcp__close svg{width:16px;height:16px}
.pcp__close:hover{background:var(--accent);color:var(--ink)}
.pcp__video{position:relative;aspect-ratio:16/9;background:#06090B;overflow:hidden}
.pcp__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* the facade: a poster and a play control. The player is only fetched on the click, so twenty
   profiles cost nothing until one is actually watched. */
.pcp__poster{position:absolute;inset:0;display:grid;place-items:center;gap:14px;align-content:center;
  cursor:pointer;border:0;width:100%;color:#fff;
  background:radial-gradient(70% 60% at 50% 40%,rgba(31,199,190,.16) 0%,rgba(31,199,190,0) 70%),
    linear-gradient(180deg,#0C1719 0%,#06090B 100%)}
.pcp__play{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;
  background:var(--accent);color:var(--ink);transition:transform .4s var(--ease)}
.pcp__poster:hover .pcp__play{transform:scale(1.08)}
.pcp__play svg{width:22px;height:22px;margin-left:3px}
.pcp__posterk{font:800 10px/1.4 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.66);text-align:center;max-width:32ch;padding:0 16px}
.pcp__body{padding:clamp(20px,3vw,32px)}
.pcp__top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 24px}
.pcp__name{font-size:clamp(28px,3.6vw,46px);line-height:1.02}
.pcp__co{margin-top:6px;font:800 11px/1.3 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent)}
.pcp__sec{margin-top:clamp(18px,2.4vw,26px)}
.pcp__k{font:800 9.5px/1 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.46)}
.pcp__t{margin-top:9px;font:500 14.5px/1.65 var(--f-sans);color:rgba(255,255,255,.88)}
.pcp__acts{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:clamp(22px,3vw,30px);
  padding-top:clamp(18px,2.4vw,24px);border-top:1px solid rgba(255,255,255,.14)}
.pcp__acts .btn{--h:46px}
.pcp__link{font:600 12px/1.5 var(--f-sans);color:rgba(255,255,255,.55);margin-top:12px;word-break:break-all}
.pcp__link a{color:var(--accent)}

/* ---------- the vote flow ---------- */
.pcv{width:min(520px,calc(100% - 28px));max-height:calc(100% - 28px);padding:0;border:0;border-radius:16px;
  background:var(--paper);color:var(--ink);overflow:auto;overscroll-behavior:contain;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.pcv::backdrop{background:rgba(4,8,10,.72);backdrop-filter:blur(3px)}
.pcv__in{padding:clamp(22px,4vw,34px)}
.pcv__sim{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:8px;
  background:rgba(255,229,0,.16);box-shadow:inset 0 0 0 1px rgba(180,160,0,.3);
  font:700 10.5px/1.45 var(--f-sans);letter-spacing:.06em;color:#4A3F00}
.pcv__k{margin-top:18px;font:800 9.5px/1 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-ink)}
.pcv__t{margin-top:10px;font-size:clamp(26px,3.4vw,38px);line-height:1.05}
.pcv__p{margin-top:12px;font:500 14px/1.6 var(--f-sans);color:var(--ink-2)}
.pcv__who{display:flex;align-items:center;gap:13px;margin-top:18px;padding:13px;border-radius:10px;
  background:var(--paper-2)}
.pcv__who-n{font:800 15px/1.25 var(--f-sans)}
.pcv__who-c{font:800 9.5px/1.3 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);margin-top:3px}
.pcv__ways{display:grid;gap:10px;margin-top:20px}
.pcv__way{display:flex;align-items:center;justify-content:center;gap:11px;min-height:50px;
  padding:0 16px;border-radius:9px;border:0;cursor:pointer;width:100%;background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--rule);font:700 13px/1 var(--f-sans);color:var(--ink);
  transition:box-shadow .3s var(--ease),background-color .3s var(--ease)}
.pcv__way:hover{box-shadow:inset 0 0 0 1.5px var(--rule-strong);background:var(--paper-2)}
.pcv__way svg{width:18px;height:18px;flex:none}
.pcv__or{display:flex;align-items:center;gap:12px;margin:4px 0;
  font:700 9.5px/1 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.pcv__or::before,.pcv__or::after{content:"";flex:1;height:1px;background:var(--rule)}
.pcv__field{margin-top:16px}
.pcv__label{display:block;font:700 11px/1.4 var(--f-sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2)}
.pcv__input{width:100%;margin-top:8px;min-height:50px;padding:0 14px;border-radius:9px;
  border:1.5px solid var(--rule);background:#fff;font:500 15px/1 var(--f-sans);color:var(--ink)}
.pcv__input:focus{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 3px rgba(0,122,116,.16)}
.pcv__otp{letter-spacing:.5em;text-align:center;font-weight:800}
.pcv__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pcv__acts .btn{--h:48px;flex:1 1 auto}
.pcv__back{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.2em;
  border:0;border-radius:8px;background:none;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--rule-strong);
  font:700 13px/1 var(--f-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.pcv__back:hover{background:var(--paper-2)}
.pcv__err{margin-top:12px;font:600 12.5px/1.5 var(--f-sans);color:#C21230}
.pcv__err[hidden]{display:none}
.pcv__step[hidden]{display:none}

/* the confirmation, and the ticket conversion it exists for */
.pcdone{text-align:center}
.pcdone__tick{display:grid;place-items:center;width:62px;height:62px;margin:0 auto;border-radius:50%;
  background:var(--accent);color:var(--ink)}
.pcdone__tick svg{width:26px;height:26px}
.pcdone__t{margin-top:18px;font-size:clamp(28px,4vw,44px);line-height:1.02}
.pcdone__p{margin-top:12px;font:500 14.5px/1.6 var(--f-sans);color:var(--ink-2)}
.pcdone__ev{margin-top:22px;padding:18px;border-radius:12px;background:var(--ink);color:#fff;text-align:left}
.pcdone__ev-k{font:800 9.5px/1 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.pcdone__ev-d{margin-top:10px;font:800 19px/1.2 var(--f-sans)}
.pcdone__ev-v{margin-top:7px;font:500 13px/1.55 var(--f-sans);color:rgba(255,255,255,.76)}
.pcdone__acts{display:grid;gap:10px;margin-top:22px}
.pcdone__acts .btn{--h:50px;width:100%}

/* ---------- how it works, and the rules ---------- */
.pcr{background:var(--ink);color:#fff;padding:clamp(60px,9vh,108px) 0}
.pcr__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.pcr__title{font-size:clamp(30px,3.8vw,54px);line-height:1.04}
.pcr__grid{list-style:none;margin:clamp(28px,4vh,44px) 0 0;padding:0;display:grid;gap:clamp(18px,2.6vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.pcr__item{padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.pcr__k{font:800 9.5px/1 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.pcr__h{margin-top:11px;font:800 16px/1.3 var(--f-sans)}
.pcr__p{margin-top:8px;font:500 13.5px/1.6 var(--f-sans);color:rgba(255,255,255,.72)}

/* ---------- the share sheet ---------- */
.pcs{width:min(420px,calc(100% - 28px));padding:0;border:0;border-radius:16px;background:var(--paper);
  color:var(--ink);box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.pcs::backdrop{background:rgba(4,8,10,.6)}
.pcs__in{padding:clamp(20px,4vw,28px)}
.pcs__row{display:grid;gap:9px;margin-top:16px}
.pcs__btn{display:flex;align-items:center;gap:11px;min-height:48px;padding:0 15px;border:0;border-radius:9px;
  cursor:pointer;background:#fff;box-shadow:inset 0 0 0 1.5px var(--rule);text-decoration:none;
  font:700 13px/1 var(--f-sans);color:var(--ink)}
.pcs__btn:hover{background:var(--paper-2)}
.pcs__btn svg{width:17px;height:17px;flex:none;color:var(--accent-ink)}
.pcs__url{margin-top:14px;padding:11px 13px;border-radius:8px;background:var(--paper-2);
  font:500 12px/1.5 var(--f-sans);color:var(--ink-2);word-break:break-all}

@media (prefers-reduced-motion:reduce){
  .pce,.pce__shot img,.pcp__play,.pcstate__dot{transition:none;animation:none}
}

/* ---------- prizes ---------- */
.pcz{background:var(--paper);color:var(--ink);padding:clamp(60px,9vh,110px) 0 clamp(40px,6vh,70px)}
.pcz__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.pcz__title{font-size:clamp(30px,4vw,58px);line-height:1.04}
.pcz__grid{list-style:none;margin:clamp(26px,4vh,44px) 0 0;padding:0;display:grid;
  gap:clamp(14px,2vw,22px);grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
@media (max-width:820px){.pcz__grid{grid-template-columns:minmax(0,1fr)}}
.pcz__card{display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.6vw,30px);border-radius:13px;
  background:#fff;box-shadow:inset 0 0 0 1px var(--rule)}
/* first place leads, without shouting the others down */
.pcz__card--first{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px rgba(31,199,190,.5),
  0 24px 50px -28px rgba(0,0,0,.6)}
.pcz__card--first .pcz__rank{color:var(--accent)}
.pcz__card--first .pcz__note{color:rgba(255,255,255,.76)}
.pcz__rank{font:800 10px/1 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--accent-ink)}
.pcz__amt{font-family:var(--f-display);font-weight:900;font-size:clamp(40px,5.6vw,76px);line-height:.92;
  letter-spacing:-.03em}
.pcz__note{margin-top:4px;font:500 13.5px/1.6 var(--f-sans);color:var(--ink-2)}
.pcz__small{margin-top:clamp(18px,2.6vh,26px);max-width:74ch;font:500 12px/1.65 var(--f-sans);color:var(--ink-3)}

/* ---------- how voting works ---------- */
.pcw{position:relative;background:var(--ink);color:#fff;padding:clamp(58px,9vh,104px) 0}
.pcw__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.pcw__title{font-size:clamp(30px,3.8vw,54px);line-height:1.04}
.pcw__cols{display:grid;gap:clamp(26px,4vw,52px);margin-top:clamp(24px,3.6vh,40px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}
@media (max-width:900px){.pcw__cols{grid-template-columns:minmax(0,1fr)}}
.pcw__steps{list-style:none;counter-reset:pcw;margin:0;padding:0;display:grid;gap:14px}
.pcw__steps li{counter-increment:pcw;display:flex;gap:14px;align-items:flex-start;
  font:500 15px/1.5 var(--f-sans);color:rgba(255,255,255,.88)}
.pcw__steps li::before{content:counter(pcw,decimal-leading-zero);flex:none;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;background:rgba(31,199,190,.16);color:var(--accent);
  font:800 11px/1 var(--f-sans);letter-spacing:.04em;box-shadow:inset 0 0 0 1px rgba(31,199,190,.45)}
.pcw__filmk{font:800 9.5px/1 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:12px}
.pcw__frame{position:relative;aspect-ratio:16/9;border-radius:13px;overflow:hidden;background:#06090B;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pcw__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pcw__hold{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;
  padding:0 24px;text-align:center;
  background:radial-gradient(70% 60% at 50% 40%,rgba(31,199,190,.14) 0%,rgba(31,199,190,0) 70%),
    linear-gradient(180deg,#0C1719 0%,#06090B 100%)}
.pcw__holdk{font:800 11px/1 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:#FFE500}
.pcw__holdn{font:500 12.5px/1.6 var(--f-sans);color:rgba(255,255,255,.62);max-width:36ch}

/* ---------- the countdown's fixed Eastern moment ---------- */
.pcclock__when{font:700 10px/1.3 var(--f-sans);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.45)}
.pcclock{flex-wrap:wrap}

/* ---------- share control on a card ---------- */
.pce__share{position:absolute;right:10px;top:10px;z-index:3;display:grid;place-items:center;
  width:32px;height:32px;border:0;border-radius:9px;cursor:pointer;background:rgba(4,8,10,.74);
  color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:background-color .3s var(--ease)}
.pce__share:hover{background:var(--accent);color:var(--ink)}
.pce__share svg{width:15px;height:15px}

/* ---------- the confirmation's extra lines ---------- */
.pcdone__again{margin-top:10px;padding:10px 14px;border-radius:9px;background:rgba(31,199,190,.14);
  font:700 12.5px/1.5 var(--f-sans);color:var(--accent-ink)}
.pcdone__again[hidden]{display:none}

/* ---------- phone verification ---------- */
.pcv__hint{margin-top:7px;font:500 11.5px/1.4 var(--f-sans);color:var(--ink-3)}
.pcv__way--first{box-shadow:inset 0 0 0 2px var(--accent-ink)}
.pcv__way--first:hover{box-shadow:inset 0 0 0 2px var(--accent-ink);background:var(--paper-2)}
[data-pc-test-code]{margin-top:14px;font-weight:700}
[data-pc-test-code] b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;
  letter-spacing:.22em;margin-left:6px}

/* =========================================================================
   The vote flow, rebuilt around what a voter is actually doing.

   The old screen opened on "verify it's you" with three buttons, two of which verified
   nothing. It read as a security check standing between a person and a thing they wanted to
   do. This one opens on the founder they came to support and says what their vote is worth,
   because that is the reason they pressed the button.

   Light paper, like the rest of this page. Mobile first: one column, full-width controls,
   nothing smaller than a comfortable thumb target.
   ========================================================================= */

.pcv__x{position:absolute;top:10px;right:10px;z-index:4;display:inline-grid;place-items:center;
  width:40px;height:40px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);
  cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.pcv__x:hover{background:var(--paper-2);color:var(--ink)}
.pcv__x svg{width:15px;height:15px}
.pcv__in{position:relative}

/* who this is for, said first and said large */
.pcv__for{font:800 9.5px/1 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-ink)}
.pcv__hero{margin-top:10px;padding:15px 16px;border-radius:12px;background:var(--paper-2);
  box-shadow:inset 0 0 0 1px var(--rule)}
.pcv__hero-n{font:800 clamp(19px,5vw,23px)/1.2 var(--f-sans);letter-spacing:-.01em;color:var(--ink)}
.pcv__hero-c{margin-top:4px;font:800 9.5px/1.3 var(--f-sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.pcv__mini{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:16px;
  padding:10px 13px;border-radius:9px;background:var(--paper-2)}
.pcv__mini span:first-child{font:800 13.5px/1.3 var(--f-sans)}
.pcv__mini span:last-child{font:800 9px/1.3 var(--f-sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}

/* what a vote is worth. Two rows, because there are two kinds of point and one of them is
   not available yet -- saying so here is cheaper than a disappointment later. */
.pcpt{margin-top:20px;display:grid;gap:9px;list-style:none;padding:0}
.pcpt__row{display:flex;align-items:flex-start;gap:13px;padding:13px 14px;border-radius:11px}
.pcpt__row--on{background:rgba(31,199,190,.1);box-shadow:inset 0 0 0 1.5px rgba(0,122,116,.3)}
.pcpt__row--soon{background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--rule)}
.pcpt__n{flex:none;display:grid;place-items:center;min-width:44px;height:36px;border-radius:9px;
  font:800 16px/1 var(--f-sans)}
.pcpt__row--on .pcpt__n{background:var(--accent);color:#06161A}
.pcpt__row--soon .pcpt__n{background:var(--rule);color:var(--ink-3)}
.pcpt__d{display:grid;gap:2px}
.pcpt__d b{font:800 13.5px/1.35 var(--f-sans);color:var(--ink)}
.pcpt__d span{font:500 12.5px/1.45 var(--f-sans);color:var(--ink-2)}
.pcpt__row--soon .pcpt__d b{color:var(--ink-2)}

/* three steps, shown as three dots rather than a sentence of arithmetic */
.pcv__dots{display:inline-flex;align-items:center;gap:5px;margin-right:9px;vertical-align:middle}
.pcv__dots i{width:6px;height:6px;border-radius:50%;background:var(--rule-strong);display:block}
.pcv__dots i.is-on{background:var(--accent-ink)}

.pcv__acts--stack{flex-direction:column;align-items:stretch}
.pcv__acts--stack .btn{width:100%}
.pcv__row{display:flex;gap:10px;justify-content:center}
.pcv__row .pcv__back{flex:1 1 auto}
.pcv__note{display:flex;align-items:flex-start;gap:9px;margin-top:14px;padding:10px 13px;
  border-radius:9px;background:rgba(255,229,0,.16);box-shadow:inset 0 0 0 1px rgba(160,140,0,.3);
  font:600 12.5px/1.5 var(--f-sans);color:var(--ink)}
.pcv__note[hidden]{display:none}
.pcv__note b{margin-left:6px;font-size:15px;letter-spacing:.14em}

/* the point, named, immediately after it is awarded */
.pcdone__plus{margin-top:12px;display:inline-block;padding:9px 16px;border-radius:999px;
  background:rgba(31,199,190,.16);box-shadow:inset 0 0 0 1.5px rgba(0,122,116,.32);
  font:700 14px/1.3 var(--f-sans);color:var(--ink)}
.pcdone__plus b{font-weight:800;color:var(--accent-ink)}

/* the second ask, offered only as far as it is honest to offer it */
.pcbonus{margin-top:22px;padding:17px 16px;border-radius:13px;text-align:left;
  background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--rule)}
.pcbonus__k{font:800 9.5px/1 var(--f-sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-ink)}
.pcbonus__t{margin-top:9px;font:800 16px/1.35 var(--f-sans);color:var(--ink)}
.pcbonus__t b{color:var(--accent-ink)}
.pcbonus__p{margin-top:6px;font:500 13px/1.55 var(--f-sans);color:var(--ink-2)}
.pcbonus__soon{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 12px;
  border-radius:9px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule);
  font:500 12px/1.5 var(--f-sans);color:var(--ink-2)}
.pcbonus__soon span{color:var(--ink-3);line-height:1.5}

@media (prefers-reduced-motion:reduce){
  .pcv__x{transition:none}
}

/* the bonus invitation: a celebration with an offer in it, not another checkpoint */
.pcbonus__acts{display:grid;gap:9px;margin-top:15px}
.pcbonus__acts .btn{width:100%}
.pcbonus__acts .pcv__back{width:100%}
.pcbonus--have{background:rgba(31,199,190,.1);box-shadow:inset 0 0 0 1.5px rgba(0,122,116,.28)}
.pcbonus[hidden],.pcbonus--have[hidden]{display:none}

/* =========================================================================
   The vote flow in the dark, per the team's correction.

   It was paper, matching the page it opens over. The corrected design puts it on near-black
   with the turquoise doing the work, which reads better over the dark gallery behind it and
   stops the dialog feeling like a form bolted onto a cinematic page.

   Scoped to .pcv and its own tokens, so the rest of the page is untouched and the light
   treatment of the gallery, profiles and share sheet stays exactly as it was.
   ========================================================================= */

.pcv{
  --v-bg:#0E1113;        /* the card */
  --v-bg-2:#191D20;      /* panels inside it */
  --v-line:rgba(255,255,255,.12);
  --v-ink:#FFFFFF;
  --v-ink-2:rgba(255,255,255,.72);
  --v-ink-3:rgba(255,255,255,.5);
  background:var(--v-bg);color:var(--v-ink)}
.pcv::backdrop{background:rgba(2,5,7,.82);backdrop-filter:blur(4px)}

.pcv__x{color:var(--v-ink-3)}
.pcv__x:hover{background:rgba(255,255,255,.1);color:var(--v-ink)}

.pcv__for{color:var(--accent)}
.pcv__hero{background:var(--v-bg-2);box-shadow:inset 0 0 0 1px var(--v-line)}
.pcv__hero-n{color:var(--v-ink)}
.pcv__hero-c{color:var(--v-ink-3)}
.pcv__mini{background:var(--v-bg-2)}
.pcv__mini span:last-child{color:var(--v-ink-3)}

/* the corrected design sets this line in the sans, not the display face */
.pcv__t{color:var(--v-ink)}
.pcv__t--sans{font:800 clamp(27px,6.6vw,34px)/1.12 var(--f-sans);letter-spacing:-.02em}
.pcv__p{color:var(--v-ink-2)}
.pcv__k{color:var(--v-ink-3)}
.pcv__dots i{background:rgba(255,255,255,.26)}
.pcv__dots i.is-on{background:var(--accent)}

.pcpt__row--on{background:rgba(31,199,190,.12);box-shadow:inset 0 0 0 1px rgba(31,199,190,.42)}
.pcpt__row--soon{background:var(--v-bg-2);box-shadow:inset 0 0 0 1px var(--v-line)}
.pcpt__row--on .pcpt__n{background:var(--accent);color:#06161A}
.pcpt__row--soon .pcpt__n{background:rgba(255,255,255,.1);color:var(--v-ink-2)}
.pcpt__d b{color:var(--v-ink)}
.pcpt__d span{color:var(--v-ink-2)}
.pcpt__row--soon .pcpt__d b{color:var(--v-ink)}

.pcv__label{color:var(--v-ink-3)}
.pcv__input{background:var(--v-bg-2);border-color:var(--v-line);color:var(--v-ink)}
.pcv__input::placeholder{color:rgba(255,255,255,.34)}
.pcv__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,199,190,.22)}
.pcv__hint{color:var(--v-ink-3)}
.pcv__err{color:#FF7A8F}
.pcv__note{background:rgba(255,229,0,.14);box-shadow:inset 0 0 0 1px rgba(255,229,0,.34);color:var(--v-ink)}

.pcv__back{background:transparent;color:var(--v-ink);box-shadow:inset 0 0 0 1px var(--v-line)}
.pcv__back:hover{background:rgba(255,255,255,.08)}

.pcdone__t{color:var(--v-ink)}
.pcdone__p,.pcdone__again{color:var(--v-ink-2)}
.pcdone__plus{background:rgba(31,199,190,.16);box-shadow:inset 0 0 0 1px rgba(31,199,190,.42);
  color:var(--v-ink)}
.pcdone__plus b{color:var(--accent)}

.pcbonus{background:var(--v-bg-2);box-shadow:inset 0 0 0 1px var(--v-line)}
.pcbonus--have{background:rgba(31,199,190,.1);box-shadow:inset 0 0 0 1px rgba(31,199,190,.34)}
.pcbonus__k{color:var(--accent)}
.pcbonus__t{color:var(--v-ink)}
.pcbonus__t b{color:var(--accent)}
.pcbonus__p{color:var(--v-ink-2)}

/* ---------- the returning voter ----------
   States that used to be one dead end. A tick where something is already done, a live row
   where something is still available, and a summary that adds up what was actually given. */
.pcv__tick{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;
  margin-right:7px;background:var(--accent);color:#06161A;font-size:9px;font-weight:800;
  vertical-align:middle}
.pcpt__row--done{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--v-line);
  opacity:.72}
.pcpt__row--done .pcpt__n{background:rgba(31,199,190,.25);color:var(--accent)}
.pcpt__row--done .pcpt__d b,.pcpt__row--done .pcpt__d span{color:var(--v-ink-2)}

.pcsum{margin:clamp(16px,3vw,22px) auto 0;width:min(320px,100%);list-style:none;padding:0;
  text-align:left}
.pcsum li{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 2px;border-bottom:1px solid var(--v-line);
  font:600 13.5px/1.4 var(--f-sans);color:var(--v-ink-2)}
.pcsum li[hidden]{display:none}
.pcsum li b{font-weight:800;color:var(--v-ink)}
.pcsum__tot{border-bottom:0;padding-top:12px}
.pcsum__tot span{color:var(--v-ink);font-weight:800}
.pcsum__tot b{font-size:19px;color:var(--accent)}

/* ---------- the six digits ----------
   Large, evenly spaced and unmistakably the thing to type into. The tracking does the work of
   separate boxes without the focus-management problems six inputs bring -- and it keeps
   autocomplete="one-time-code", which is what makes iOS offer the code above the keyboard. */
.pcv__otp{font-size:clamp(26px,8vw,32px);letter-spacing:.42em;text-indent:.42em;
  text-align:center;font-weight:800;min-height:64px;padding:0 10px}
.pcv__otp::placeholder{letter-spacing:.42em;color:rgba(255,255,255,.22);font-weight:700}
.pcv__sub{display:inline-block;margin-top:4px;font-size:13px;color:var(--v-ink-3)}

/* resend and change-number read as the quieter pair they are */
.pcv__row .pcv__back{min-height:44px;font-size:11.5px;box-shadow:inset 0 0 0 1px var(--v-line);
  background:transparent;color:var(--v-ink-2)}
.pcv__row .pcv__back:hover:not(:disabled){background:rgba(255,255,255,.08);color:var(--v-ink)}
.pcv__row .pcv__back:disabled{opacity:.5;cursor:default}

/* the modal keeps its own scroll on a short phone, so the keyboard cannot bury the button */
.pcv{max-height:min(92svh,calc(100% - 20px));overflow:auto;overscroll-behavior:contain}
.pcv__in{padding-bottom:max(clamp(22px,4vw,34px),env(safe-area-inset-bottom))}

/* ---------- choosing how to verify ----------
   Two routes of equal weight, each saying what it does. The phone option dims itself when SMS
   cannot deliver rather than disappearing: a voter who expects to see it should be told why it
   is not available, not left wondering. */
.pcv__ways2{display:grid;gap:10px;margin-top:clamp(18px,3.4vw,24px)}
.pcv__way2{display:flex;align-items:center;gap:13px;width:100%;padding:15px 16px;border:0;
  border-radius:13px;cursor:pointer;text-align:left;
  background:var(--v-bg-2);box-shadow:inset 0 0 0 1px var(--v-line);color:var(--v-ink);
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.pcv__way2:hover:not(:disabled),.pcv__way2:focus-visible:not(:disabled){
  background:rgba(31,199,190,.12);box-shadow:inset 0 0 0 1.5px rgba(31,199,190,.5)}
.pcv__way2:disabled,.pcv__way2.is-off{opacity:.5;cursor:default}
.pcv__way2-i{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:11px;
  background:rgba(31,199,190,.16);color:var(--accent)}
.pcv__way2-i svg{width:20px;height:20px}
.pcv__way2.is-off .pcv__way2-i{background:rgba(255,255,255,.08);color:var(--v-ink-3)}
.pcv__way2-t{display:grid;gap:2px;min-width:0;flex:1 1 auto}
.pcv__way2-t b{font:800 14.5px/1.3 var(--f-sans);color:var(--v-ink)}
.pcv__way2-t span{font:500 12.5px/1.45 var(--f-sans);color:var(--v-ink-2)}
.pcv__way2-a{flex:none;color:var(--accent);font-size:17px;font-weight:700}
.pcv__way2.is-off .pcv__way2-a{color:var(--v-ink-3)}

/* the bonus states stack their actions; the ticket link is a primary action like any other */
.pcbonus__acts .btn,.pcbonus__acts .pcv__back{width:100%}
.pcbonus[hidden],.pcbonus--have[hidden]{display:none}

/* the spam-folder nudge: quiet, and only where a code has actually been sent */
.pcv__hint--spam{margin-top:10px;font:500 12.5px/1.5 var(--f-sans);color:var(--v-ink-3)}

/* What a vote is worth, in the column the tutorial placeholder used to occupy. Three
   facts the rest of the page states in prose; nothing here is forthcoming. */
.pcw__worth { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
/* The label column is sized for the longest label, not for "+1".

   It used to be a flat 54px while the label ran up to 26px bold, so "Daily" was wider than
   its own column and ran straight into the sentence beside it -- "DailyYour allowance
   returns each day". A grid column does not clip, it just lets the word out.

   One width for all three rows, so +1, +2 and Daily stay aligned with each other, and
   nowrap so the label can never be the thing that wraps. */
.pcw__worth li {
  display: grid;
  grid-template-columns: minmax(64px, 88px) minmax(0, 1fr);
  gap: 18px; align-items: baseline;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14);
}
.pcw__worth li:first-child { border-top: 0; padding-top: 0; }
.pcw__worth b {
  font: 800 clamp(19px, 2.8vw, 24px)/1 var(--f-sans); letter-spacing: -.02em; color: var(--accent);
  white-space: nowrap;
}
@media (max-width: 420px) {
  .pcw__worth li { grid-template-columns: minmax(58px, 74px) minmax(0, 1fr); gap: 14px; }
}
.pcw__worth span { font: 500 14px/1.55 var(--f-sans); color: rgba(255,255,255,.84); }

/* ---------- jump to the foot of the page, and back ----------

   Twenty pitches make a long page, so leadership asked for a way down and a way back.

   It sits against the right edge, vertically centred, clear of the founder rail (which
   scrolls horizontally and must keep its full width), clear of the vote buttons on the
   cards, and clear of the sticky footer CTA. Inside the immersive feed it is hidden
   outright: that view has its own navigation and does not need a second set of arrows
   floating over somebody's pitch. */
.pcj {
  position: fixed; right: max(10px, env(safe-area-inset-right)); top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
}
.pcj[hidden] { display: none; }
.pcj__b {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(8,12,16,.72); color: var(--accent, #39D8C8);
  border: 1px solid rgba(57,216,200,.42);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  cursor: pointer; padding: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.34);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.pcj__b[hidden] { display: none; }
.pcj__b svg { width: 19px; height: 19px; }
@media (hover: hover) {
  .pcj__b:hover { background: var(--accent, #39D8C8); color: #06161A; transform: translateY(-2px); }
}
.pcj__b:focus-visible { outline: 2px solid var(--accent, #39D8C8); outline-offset: 3px; }

/* The immersive feed owns the screen while it is open. */
body.pc-reel-live .pcj { display: none; }

/* On a phone the rail runs edge to edge and the buttons would sit on top of it, so they
   drop to the lower corner and shrink. 40px is still comfortably above the 24px tap
   target floor. */
@media (max-width: 640px) {
  .pcj { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); transform: none; }
  .pcj__b { width: 40px; height: 40px; }
  .pcj__b svg { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .pcj__b { transition: none; }
}