/* ── Bethany Elingston (OPT's display face, self-hosted) ────── */
@font-face{
  font-family:"Bethany Elingston";
  src:url("fonts/BethanyElingston.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}

/* ════════════════════════════════════════════════════════════════
   OPT Digital - Client hiring page (shared stylesheet)
   Same component language as the onboarding funnel (assets/onboarding.css):
   pill CTA with shine sweep, glowing 16:9 video frame, soft white panels,
   shimmering eyebrow, paper-grid background.

   Everything brand-specific is a CSS variable. To rip this for a new
   client, copy one of the hiring-*.html files and re-set the :root block.
   ════════════════════════════════════════════════════════════════ */

/* ── Brand tokens (each page overrides these in its own :root) ── */
:root{
  --brand:#f4e14a;            /* primary accent - CTA, ticks, glow      */
  --brand-deep:#f5c518;       /* darker accent - hover, gradient end    */
  --brand-soft:rgba(244,225,74,.28); /* translucent accent - focus ring */
  --on-brand:#1a1700;         /* text colour that sits ON the accent    */
  --band:#15161a;             /* hero band background                   */
  --band-2:#0c0e13;           /* hero band gradient partner             */
  --on-band:#ffffff;          /* text colour on the hero band           */
  --on-band-mute:#a8aebb;

  --ink:#15161a;
  --ink-soft:#3b3d44;
  --ink-mute:#8a8d96;
  --paper:#ffffff;
  --paper-2:#fbfbf9;
  --line:#e9e6da;

  --font-display:"Inter Tight",system-ui,sans-serif;
  --font-body:"Inter Tight","Inter",system-ui,-apple-system,sans-serif;
  --display-tt:none;          /* uppercase for extended/condensed brands */
  --display-ls:0;
  --display-wt:700;
}

*{box-sizing:border-box;margin:0;padding:0;}
img,svg,video,iframe{max-width:100%;}
html{height:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:
    repeating-linear-gradient(0deg, rgba(20,22,30,.035) 0 1px, transparent 1px 66px),
    repeating-linear-gradient(90deg, rgba(20,22,30,.035) 0 1px, transparent 1px 66px),
    radial-gradient(1200px 620px at 50% 32%, #fff 0%, var(--paper) 46%, var(--paper-2) 100%) fixed;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;min-height:100dvh;
  overflow-x:hidden;
}

/* ── Hero band ──────────────────────────────────────────────── */
.band{
  position:relative;
  background:radial-gradient(1100px 620px at 50% -12%, var(--band) 0%, var(--band-2) 68%, var(--band-2) 100%);
  color:var(--on-band);
  padding:38px 20px 74px;
  overflow:hidden;
  isolation:isolate;
}
/* faint grid + brand wash over the band */
.band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(0deg, transparent 0 52px, rgba(255,255,255,.045) 52px 53px),
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(255,255,255,.045) 52px 53px);
}
.band::after{
  content:"";position:absolute;left:50%;top:-320px;z-index:0;pointer-events:none;
  width:900px;height:640px;transform:translateX(-50%);
  background:radial-gradient(closest-side, var(--brand), transparent 72%);
  opacity:.20;filter:blur(30px);
}
.band-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;}

/* ── Brand logo ─────────────────────────────────────────────── */
.brand{display:inline-flex;align-items:center;margin-bottom:20px;animation:dropIn .8s cubic-bezier(.2,.8,.2,1) both;}
.brand img{height:52px;width:auto;display:block;}
/* for dark logos that need a light ground */
.brand.plaque{background:#fff;border-radius:16px;padding:12px 20px;box-shadow:0 20px 44px -20px rgba(0,0,0,.7);}
.brand.plaque img{height:40px;}

/* ── Eyebrow (shimmering, as per the onboarding funnel) ─────── */
.eyebrow{
  font-size:12.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;margin-bottom:14px;
  background:linear-gradient(100deg,var(--on-band-mute) 0%,var(--on-band-mute) 38%,var(--brand) 50%,var(--on-band-mute) 62%,var(--on-band-mute) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:fadeUp .7s ease .2s both;
}

h1{
  font-family:var(--font-display);font-weight:var(--display-wt);color:var(--on-band);
  text-transform:var(--display-tt);letter-spacing:var(--display-ls);
  font-size:clamp(30px,4.6vw,54px);line-height:1.1;
  max-width:min(19ch,94vw);margin:0 auto;
}
/* The h1 ships with its real text in the HTML so it survives no-JS, print
   and crawlers. When JS is available we hide it for one frame, split it
   into animated words, then reveal - which avoids a flash of unstyled copy. */
html.js h1{visibility:hidden;}
html.js h1.ready{visibility:visible;}
h1 .w{display:inline-block;opacity:0;transform:translateY(14px);animation:wordIn .45s cubic-bezier(.2,.85,.25,1) forwards;animation-delay:var(--d,0s);}
@keyframes wordIn{to{opacity:1;transform:none;}}
h1 em{font-style:normal;color:var(--brand);}

.lede{max-width:56ch;color:var(--on-band-mute);font-size:clamp(14.5px,1.6vw,17px);line-height:1.6;margin:14px auto 0;opacity:0;animation:fadeUp .7s ease .9s both;}

/* ── Video frame ────────────────────────────────────────────── */
.video-wrap{position:relative;z-index:3;width:min(700px,92vw);margin:28px auto 0;border-radius:18px;
  opacity:0;transform:translateY(34px) scale(.97);animation:videoRise .6s cubic-bezier(.2,.8,.2,1) .25s forwards;}
/* An animatable custom property, so the conic gradient can be turned
   without turning the element it is painted on. Browsers without
   @property simply show a still ring, which is a fine way to lose. */
@property --glow-angle{syntax:"<angle>";initial-value:0deg;inherits:false;}
@keyframes glowTurn{to{--glow-angle:360deg;}}

.video-glow{position:absolute;inset:-3px;z-index:3;pointer-events:none;
  border-radius:21px;
  background:conic-gradient(from var(--glow-angle,0deg),var(--brand),#fff 20%,var(--brand-deep) 42%,
    var(--brand) 60%,#fff 78%,var(--brand-deep) 100%);
  /* Keep the ring and throw the middle away, so this reads as a moving
     border on the frame rather than a glow behind it. */
  padding:2.5px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:glowTurn 14s linear infinite,glowPulse 4.2s ease-in-out infinite;}
@keyframes glowSpin{
  0%{transform:rotate(0deg) scale(1);}
  50%{transform:rotate(180deg) scale(1.05);}
  100%{transform:rotate(360deg) scale(1);}
}
@keyframes glowPulse{0%,100%{opacity:.55;}50%{opacity:.95;}}
@media (prefers-reduced-motion:reduce){ .video-glow{animation:none;opacity:.34;} }
.video-frame{position:relative;z-index:2;aspect-ratio:16/9;width:100%;border-radius:18px;overflow:hidden;
  background:#0c0e13;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 90px -34px rgba(0,0,0,.8),0 6px 22px -10px rgba(0,0,0,.5);}
.video-frame video,.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover;}

.poster{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  text-align:center;color:#fff;cursor:pointer;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.10) 0%, transparent 62%),
    linear-gradient(160deg, var(--band) 0%, #0c0e13 78%),
    repeating-linear-gradient(0deg,transparent,transparent 38px,rgba(255,255,255,.03) 39px),
    repeating-linear-gradient(90deg,transparent,transparent 38px,rgba(255,255,255,.03) 39px);
  transition:opacity .4s ease;}
/* visibility (not just opacity) so the hidden poster leaves the tab order and
   the accessibility tree - it flips only after the fade has finished */
.poster.hide{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s;}
.poster .play{position:relative;width:78px;height:78px;border-radius:50%;background:var(--brand);color:var(--on-brand);
  display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;
  box-shadow:0 8px 26px -6px rgba(0,0,0,.6);
  transition:transform .25s cubic-bezier(.34,1.55,.64,1),filter .2s ease;}
.poster:hover .play{transform:scale(1.1);filter:brightness(1.08);}
.poster .play svg{margin-left:5px;}
.poster .ptitle{font-family:var(--font-display);font-weight:var(--display-wt);text-transform:var(--display-tt);
  letter-spacing:var(--display-ls);font-size:clamp(17px,2.6vw,24px);padding:0 18px;}
.poster .pmeta{font-size:12px;letter-spacing:.06em;color:#aeb4c2;text-transform:uppercase;font-weight:600;}
.poster .pbar{position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(255,255,255,.12);}
.poster .pbar i{display:block;height:100%;width:34%;background:var(--brand);}
/* state when no video has been dropped in yet */
.poster.pending{cursor:default;}
.poster.pending .play{opacity:.42;cursor:default;}
.poster.pending:hover .play{transform:none;}
/* a progress bar on a video that doesn't exist yet is a lie - hide it */
.poster.pending .pbar{display:none;}

/* ── Buttons ────────────────────────────────────────────────── */
.cta{margin-top:26px;position:relative;z-index:3;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);font-weight:700;font-size:15.5px;
  color:var(--on-brand);background:var(--brand);border:none;border-radius:999px;padding:15px 32px;
  cursor:pointer;text-decoration:none;
  box-shadow:0 16px 38px -14px rgba(0,0,0,.6);
  transition:transform .24s cubic-bezier(.34,1.5,.64,1),box-shadow .24s ease,filter .24s ease;}
.cta.reveal{opacity:0;transform:translateY(14px);animation:fadeUp .7s ease 1.5s forwards;}
.cta-label,.cta svg{position:relative;z-index:1;}
.cta svg{transition:transform .24s cubic-bezier(.34,1.5,.64,1);}
.cta::before{content:"";position:absolute;top:0;left:-140%;z-index:0;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);}
.cta:hover{transform:translateY(-3px) scale(1.025);filter:brightness(1.07);box-shadow:0 26px 54px -14px rgba(0,0,0,.7);}
.cta:hover::before{animation:ctaShine .8s ease;}
.cta:hover svg{transform:translateX(5px);}
.cta:active{transform:translateY(-1px) scale(.985);}
.cta[disabled]{opacity:.55;cursor:not-allowed;filter:grayscale(.3);}
.cta[disabled]:hover{transform:none;filter:grayscale(.3);}
@keyframes ctaShine{0%{left:-140%;}100%{left:140%;}}
.cta-note{margin-top:13px;font-size:12.5px;color:var(--on-band-mute);z-index:3;}
/* no-JS fallback notice inside the apply panel */
.nojs{margin-top:18px;border:1px solid var(--line);border-radius:14px;background:var(--paper-2);
  padding:16px 18px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);text-align:center;}
.nojs a{color:var(--ink);font-weight:700;}

/* ── Page body (paper) ──────────────────────────────────────── */
.page{width:min(880px,94vw);margin:0 auto;padding:26px 0 56px;position:relative;z-index:3;}

/* fact strip - overlaps the band */
.fact{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 16px 15px;
  box-shadow:0 22px 48px -28px rgba(20,22,30,.5);
  opacity:0;transform:translateY(18px);animation:fadeUp .6s ease var(--fd,0s) forwards;}

/* ── Panels ─────────────────────────────────────────────────── */
.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 38px 32px;margin-top:20px;
  box-shadow:0 30px 70px -40px rgba(20,22,30,.4),0 4px 14px -10px rgba(20,22,30,.18);}
@media (max-width:600px){ .panel{padding:24px 20px 22px;border-radius:16px;} }

.sec{margin-top:34px;}
.sec:first-child{margin-top:0;}
.sec > h2{
  font-family:var(--font-display);font-weight:var(--display-wt);color:var(--ink);
  text-transform:var(--display-tt);letter-spacing:var(--display-ls);
  font-size:clamp(21px,2.6vw,27px);line-height:1.2;margin-bottom:6px;
  display:flex;align-items:center;gap:11px;
}
.sec > h2::before{content:"";flex:0 0 auto;width:5px;height:1em;border-radius:99px;background:var(--brand);}
.sec p{color:var(--ink-soft);font-size:15.5px;line-height:1.65;margin-top:11px;}
.sec p strong{color:var(--ink);font-weight:700;}

/* tick / bullet lists */
.ticks{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:16px;}
.ticks li{position:relative;display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:var(--ink-soft);}
.ticks li svg{flex:0 0 auto;width:21px;height:21px;margin-top:1px;color:var(--brand-deep);}
.ticks li b{color:var(--ink);font-weight:700;}
/* numbered variant for "what the day looks like" */

/* callout - the "why this job is worth it" block */

/* pay / package grid */
/* direct children only - .pl and .pv are divs too and must not pick this up */

/* ── Apply form ─────────────────────────────────────────────── */
.apply-head{text-align:center;margin-bottom:26px;}
.apply-head h2{font-family:var(--font-display);font-weight:var(--display-wt);text-transform:var(--display-tt);
  letter-spacing:var(--display-ls);font-size:clamp(23px,3vw,31px);color:var(--ink);line-height:1.16;}
.apply-head p{color:var(--ink-soft);font-size:15px;line-height:1.6;margin-top:9px;max-width:46ch;margin-inline:auto;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:12.5px;font-weight:700;color:var(--ink-soft);letter-spacing:.01em;}
.field label .req{color:#e0561e;}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:15px;color:var(--ink);
  background:#fff;border:1.5px solid #e7e1cc;border-radius:12px;padding:13px 14px;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;}
.field textarea{resize:vertical;min-height:104px;line-height:1.55;}
.field input::placeholder,.field textarea::placeholder{color:#b7b3a6;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand-deep);box-shadow:0 0 0 4px var(--brand-soft);}
.field .hint{font-size:11.5px;color:var(--ink-mute);margin-bottom:2px;}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#e0561e;box-shadow:0 0 0 4px rgba(224,86,30,.14);}
@media (max-width:600px){ .form-grid{grid-template-columns:1fr;} }

.form-foot{display:flex;flex-direction:column;align-items:center;margin-top:24px;}
.form-foot .cta{margin-top:0;}
.form-foot .cta-note{color:var(--ink-mute);}
.form-err{display:none;margin-top:14px;font-size:13.5px;font-weight:600;color:#c2410c;text-align:center;max-width:52ch;line-height:1.5;}
.form-err.on{display:block;}
/* neutral variant - used for the mailto handoff, which is not an error */
.form-err.info{color:var(--ink-soft);font-weight:500;}

.apply-done{display:none;text-align:center;padding:26px 8px 12px;}
.apply-done.on{display:block;animation:doneIn .55s cubic-bezier(.2,.8,.2,1) both;}
@keyframes doneIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.apply-done .dchk{width:72px;height:72px;border-radius:50%;background:#eafaf0;display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;animation:popIn .55s cubic-bezier(.34,1.56,.64,1) .2s both;}
.apply-done .dchk svg{width:36px;height:36px;color:#16a34a;}
@keyframes popIn{from{transform:scale(0);}to{transform:scale(1);}}
.apply-done h3{font-family:var(--font-display);font-weight:var(--display-wt);text-transform:var(--display-tt);
  letter-spacing:var(--display-ls);font-size:27px;color:var(--ink);margin-bottom:9px;}
.apply-done p{font-size:15px;color:var(--ink-soft);max-width:44ch;margin:0 auto;line-height:1.6;}

/* ── Footer ─────────────────────────────────────────────────── */
.site-foot{text-align:center;font-size:12.5px;color:var(--ink-mute);padding:30px 20px 10px;}
.site-foot a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);}
.site-foot a:hover{color:var(--ink);}
.site-foot .sep{margin:0 9px;opacity:.55;}

/* ── Shared keyframes ───────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes dropIn{from{opacity:0;transform:translateY(-14px);}to{opacity:1;transform:none;}}
@keyframes videoRise{to{opacity:1;transform:none;}}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:900px){ .band{padding:30px 18px 68px;} }
@media (max-width:600px){
  .band{padding:24px 15px 62px;}
  .brand img{height:44px;} .brand.plaque img{height:34px;} .brand.plaque{padding:10px 15px;}
  .eyebrow{font-size:11px;letter-spacing:.18em;}
  h1{font-size:clamp(24px,6.6vw,34px);max-width:100%;}
  .lede{font-size:14.5px;}
  .video-wrap{width:94vw;margin-top:20px;}
  .cta{font-size:15px;padding:14px 26px;}
  .poster .play{width:62px;height:62px;}
}

/* ── Reduce motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  h1 .w,.lede,.cta.reveal,.video-wrap,.fact{opacity:1 !important;transform:none !important;filter:none !important;}
}

/* ── Print (recruiters do print these) ──────────────────────── */
@media print{
  body{background:#fff;}
  .band{background:#fff;color:#000;padding:14px 0 6px;}
  .band::before,.band::after,.video-wrap,.cta,.cta-note,.apply,.site-foot{display:none !important;}
  h1,.lede{color:#000;}
  .brand.plaque{box-shadow:none;padding:0;}
  .panel{box-shadow:none;border:1px solid #ccc;break-inside:avoid;}
}

/* ════════════════════════════════════════════════════════════════
   Scroll reveals - .r fades up on entry. Without JS, or with
   reduced motion, everything is simply visible from the start.
   ════════════════════════════════════════════════════════════════ */
html.js .r{opacity:0;transform:translateY(12px);
  transition:opacity .45s ease,transform .45s ease;}
html.js .r.in{opacity:1;transform:none;}
html.js .r-d1{transition-delay:.09s;}
html.js .r-d2{transition-delay:.18s;}
html.js .r-d3{transition-delay:.27s;}

/* ════════════════════════════════════════════════════════════════
   Multi-step application form - same shape as the onboarding
   intake (ob-2.html): progress bar, dots, a few questions at a time.
   ════════════════════════════════════════════════════════════════ */
.fs-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px;}
.fs-meta{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mute);}
.fs-dots{display:flex;gap:6px;}
.fs-dots i{width:7px;height:7px;border-radius:50%;background:#e6e2d2;transition:background .3s,transform .3s;}
.fs-dots i.on{background:var(--brand);transform:scale(1.3);}
.fs-dots i.done{background:var(--brand-deep);opacity:.5;}
.fs-prog{height:6px;border-radius:99px;background:#efe9d2;overflow:hidden;margin:14px 0 22px;}
.fs-prog i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--brand-deep),var(--brand));
  transition:width .45s cubic-bezier(.2,.85,.25,1);}
.fs-title{font-family:var(--font-display);font-weight:var(--display-wt);text-transform:var(--display-tt);
  letter-spacing:var(--display-ls);font-size:clamp(20px,2.6vw,26px);line-height:1.16;
  color:var(--ink);margin-bottom:5px;}
.fs-sub{font-size:14px;color:var(--ink-soft);line-height:1.55;margin-bottom:20px;}
.fs-body.anim{animation:stepIn .42s cubic-bezier(.2,.8,.2,1);}
@keyframes stepIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.fs-body.back.anim{animation:stepBack .42s cubic-bezier(.2,.8,.2,1);}
@keyframes stepBack{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}}
.fs-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;}
.fs-nav .cta{margin-top:0;}
.fs-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:600;
  font-size:14px;color:var(--ink-soft);background:none;border:none;cursor:pointer;padding:10px 4px;
  border-radius:10px;transition:color .15s,transform .15s;}
.fs-back:hover{color:var(--ink);transform:translateX(-3px);}
.fs-back svg{width:16px;height:16px;}
.fs-back.hide{visibility:hidden;}

/* ── Video answer step ──────────────────────────────────────── */
.vrec-q{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.45;margin-bottom:6px;}
.vrec-hint{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:14px;}
.vrec-stage{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:#0c0e13;border:1px solid var(--line);}
.vrec-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0c0e13;}
.vrec-stage video.mirror{transform:scaleX(-1);}
.vrec-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:11px;text-align:center;color:#cfd4de;padding:18px;
  background:linear-gradient(160deg,var(--band) 0%,#0c0e13 78%);}
.vrec-idle svg{width:36px;height:36px;color:var(--brand);}
.vrec-idle p{font-size:13px;color:#aeb4c2;max-width:34ch;line-height:1.5;}
.vrec-timer{position:absolute;top:10px;right:10px;display:none;align-items:center;gap:7px;
  background:rgba(8,10,14,.78);color:#fff;font-size:12px;font-weight:700;
  font-variant-numeric:tabular-nums;padding:6px 11px;border-radius:999px;}
.vrec-timer.on{display:flex;}
.vrec-timer i{width:8px;height:8px;border-radius:50%;background:#ef4444;
  animation:recBlink 1.1s ease-in-out infinite;}
@keyframes recBlink{0%,100%{opacity:1;}50%{opacity:.25;}}
.vrec-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px;}
.vbtn2{font-family:var(--font-body);font-weight:600;font-size:14px;border-radius:999px;padding:11px 20px;
  cursor:pointer;border:1.5px solid var(--ink);background:#fff;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;
  transition:background .15s,color .15s,transform .12s,opacity .15s;}
.vbtn2:hover{background:var(--ink);color:#fff;transform:translateY(-1px);}
.vbtn2.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}
.vbtn2.primary:hover{filter:brightness(1.07);background:var(--brand);color:var(--on-brand);}
.vbtn2.stop{background:#ef4444;border-color:#ef4444;color:#fff;}
.vbtn2.stop:hover{background:#dc2626;border-color:#dc2626;color:#fff;}
.vbtn2[disabled]{opacity:.45;cursor:not-allowed;transform:none;}
.vbtn2 svg{width:16px;height:16px;}
.vrec-status{margin-top:10px;font-size:13px;line-height:1.5;color:var(--ink-soft);}
.vrec-status.ok{color:#15803d;font-weight:600;}
.vrec-status.warn{color:#c2410c;}
.vrec-or{display:flex;align-items:center;gap:12px;margin:20px 0 14px;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);}
.vrec-or::before,.vrec-or::after{content:"";flex:1;height:1px;background:var(--line);}
@media (max-width:600px){ .vrec-actions .vbtn2{flex:1 1 auto;justify-content:center;} }


/* ── Scroll cue ─────────────────────────────────────────────── */
.scroll-cue{display:inline-flex;flex-direction:column;align-items:center;gap:7px;margin-top:30px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-band-mute);background:none;border:none;cursor:pointer;font-family:var(--font-body);
  transition:color .2s ease;}
.scroll-cue:hover{color:var(--on-band);}
.scroll-cue svg{width:22px;height:22px;animation:cueNudge 2.4s ease-in-out infinite;}
@keyframes cueNudge{0%,72%,100%{transform:translateY(0);}84%{transform:translateY(5px);}}
@media (prefers-reduced-motion:reduce){ .scroll-cue svg{animation:none;} }


/* ════════════════════════════════════════════════════════════════
   Custom video player
   Native controls are off, so there is no download button and no
   picture-in-picture. Seek, speed, volume and fullscreen are ours.
   ════════════════════════════════════════════════════════════════ */
.video-frame video{cursor:pointer;}

.vp{position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;flex-direction:column;padding-top:34px;
  background:linear-gradient(to top,rgba(8,10,14,.94),rgba(8,10,14,.55) 55%,rgba(8,10,14,0));
  opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;
  pointer-events:none;font-family:var(--font-body);}
/* .vp-show is driven by the script - it goes on for any interaction and
   comes off a couple of seconds later while the video is playing. Hover
   only counts on a device that actually has a pointer. */
.video-frame.vp-show .vp{opacity:1;transform:none;pointer-events:auto;}
@media (hover:hover) and (pointer:fine){
  .video-frame:hover .vp{opacity:1;transform:none;pointer-events:auto;}
}

/* seek bar */
.vp-seek{position:relative;height:5px;margin:0 13px;border-radius:99px;
  background:rgba(255,255,255,.26);cursor:pointer;transition:height .15s ease;}
.vp:hover .vp-seek{height:8px;}
.vp-buf{position:absolute;inset:0 auto 0 0;height:100%;width:0;border-radius:99px;background:rgba(255,255,255,.22);}
.vp-fill{position:absolute;inset:0 auto 0 0;height:100%;width:0;border-radius:99px;background:var(--brand);}
.vp-knob{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;
  background:var(--brand);transform:translate(-50%,-50%) scale(0);
  box-shadow:0 1px 6px rgba(0,0,0,.6);transition:transform .15s ease;}
.vp:hover .vp-knob,.vp-seek.drag .vp-knob{transform:translate(-50%,-50%) scale(1);}

/* button row */
.vp-row{display:flex;align-items:center;gap:8px;padding:9px 12px 11px;}
.vp-btn{flex:0 0 auto;background:none;border:none;color:#fff;cursor:pointer;
  width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;}
.vp-btn:hover{background:rgba(255,255,255,.16);}
.vp-btn svg{width:19px;height:19px;}
.vp-time{flex:0 0 auto;color:#fff;font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;opacity:.92;white-space:nowrap;}
.vp-gap{flex:1 1 auto;}

/* speed */
.vp-speed{position:relative;flex:0 0 auto;}
.vp-speed-btn{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;
  height:30px;min-width:46px;padding:0 9px;border-radius:99px;font-family:var(--font-body);
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
  transition:background .15s ease,border-color .15s ease;}
.vp-speed-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);}
.vp-menu{position:absolute;right:0;bottom:38px;display:none;flex-direction:column;
  background:rgba(12,14,19,.97);border:1px solid rgba(255,255,255,.14);border-radius:11px;
  padding:5px;min-width:82px;box-shadow:0 18px 40px -14px rgba(0,0,0,.8);}
.vp-menu.on{display:flex;}
.vp-menu button{background:none;border:none;color:#e6e9ef;cursor:pointer;text-align:left;
  font-family:var(--font-body);font-size:13px;font-weight:600;padding:8px 11px;border-radius:7px;
  font-variant-numeric:tabular-nums;}
.vp-menu button:hover{background:rgba(255,255,255,.12);}
.vp-menu button.on{color:var(--brand);}

/* volume */
.vp-vol{display:flex;align-items:center;flex:0 0 auto;}
.vp-vol-track{position:relative;width:70px;height:4px;border-radius:99px;
  background:rgba(255,255,255,.26);cursor:pointer;}
.vp-vol-fill{position:absolute;inset:0 auto 0 0;height:100%;border-radius:99px;background:#fff;}
.vp-vol-knob{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.55);}

/* tap for sound, shown while an autoplaying video is muted */
.vunmute{position:absolute;top:12px;right:12px;z-index:6;display:inline-flex;align-items:center;gap:8px;
  background:rgba(8,10,14,.82);color:#fff;border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:9px 15px;cursor:pointer;
  font-family:var(--font-body);font-size:12.5px;font-weight:700;letter-spacing:.02em;
  backdrop-filter:blur(6px);transition:background .15s ease,transform .15s ease;}
.vunmute:hover{background:rgba(8,10,14,.95);transform:translateY(-1px);}
.vunmute svg{width:16px;height:16px;}

.video-frame:fullscreen{width:100vw;height:100vh;max-width:none;border-radius:0;aspect-ratio:auto;background:#000;}
.video-frame:fullscreen video{object-fit:contain;}
.video-frame:fullscreen .vp{opacity:1;transform:none;pointer-events:auto;}

@media (max-width:600px){
  .vp-vol{display:none;}
  .vp-row{gap:6px;padding:8px 9px 10px;}
  .vp-btn{width:36px;height:36px;}
  .vunmute{top:9px;right:9px;padding:8px 12px;font-size:11.5px;}
}

/* ── Full-frame "tap for sound" prompt ──────────────────────── */
.vsound{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  background:radial-gradient(120% 90% at 50% 50%,rgba(8,10,14,.36),rgba(8,10,14,.68));
  border:none;cursor:pointer;font-family:var(--font-body);color:#fff;
  transition:background .2s ease;}
.vsound:hover{background:radial-gradient(120% 90% at 50% 50%,rgba(8,10,14,.28),rgba(8,10,14,.62));}
.vsound-ring{width:72px;height:72px;border-radius:50%;background:var(--brand);color:var(--on-brand);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.7);transition:transform .25s cubic-bezier(.34,1.55,.64,1);}
.vsound:hover .vsound-ring{transform:scale(1.08);}
.vsound-ring svg{width:30px;height:30px;}
.vsound-t{font-size:clamp(16px,2.1vw,21px);font-weight:800;letter-spacing:-.01em;
  text-shadow:0 2px 12px rgba(0,0,0,.6);}
.vsound-s{font-size:12.5px;font-weight:600;color:#cfd4de;letter-spacing:.02em;
  text-shadow:0 1px 8px rgba(0,0,0,.7);}
@media (max-width:600px){ .vsound-ring{width:58px;height:58px;} .vsound-ring svg{width:24px;height:24px;} }

/* ── Trust badges ───────────────────────────────────────────── */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px;}
.tb{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 18px;text-align:center;
  box-shadow:0 20px 44px -38px rgba(20,22,30,.5);}
.tb .tbv{font-family:var(--font-display);font-weight:var(--display-wt);letter-spacing:var(--display-ls);
  font-size:clamp(24px,3vw,32px);line-height:1;color:var(--ink);}
.tb .tbl{font-size:12.5px;line-height:1.4;color:var(--ink-soft);margin-top:8px;}
.tb .tbstars{display:flex;justify-content:center;gap:2px;margin-bottom:7px;}
.tb .tbstars svg{width:14px;height:14px;color:#fbbc05;}
@media (max-width:860px){ .trust{grid-template-columns:repeat(2,1fr);} }
@media (max-width:420px){ .trust{grid-template-columns:1fr;} }

/* ── Proof grid ─────────────────────────────────────────────── */
/* Multi-column, not grid. These screenshots are wildly different heights,
   and a grid forces them onto shared rows, which leaves big ragged gaps.
   Columns let each one sit directly under the last. */
.proof{column-count:4;column-gap:10px;margin:0;}
.proof figure{break-inside:avoid;-webkit-column-break-inside:avoid;
  page-break-inside:avoid;margin:0 0 10px;display:block;width:100%;}
.proof figure{border-radius:10px;overflow:hidden;background:transparent;
  cursor:zoom-in;transition:transform .18s ease;}
.proof figure:hover{transform:scale(1.015);}
.proof img{width:100%;height:auto;display:block;}
.proof-note{font-size:12.5px;color:var(--ink-mute);margin-top:14px;text-align:center;line-height:1.5;}
@media (max-width:900px){ .proof{column-count:2;} }
@media (max-width:520px){ .proof{column-count:1;} }

/* lightbox for a proof screenshot */
.plight{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;
  background:rgba(8,10,14,.9);padding:28px;cursor:zoom-out;}
.plight.on{display:flex;}
.plight img{max-width:min(1100px,94vw);max-height:90vh;width:auto;height:auto;
  border-radius:12px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9);}
.plight-x{position:absolute;top:18px;right:22px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.14);border:none;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;}
.plight-x:hover{background:rgba(255,255,255,.26);}

/* ── Apply: opens as a modal over the page ──────────────────── */
.apply-open{display:flex;flex-direction:column;align-items:center;text-align:center;}
.apply-open .cta{margin-top:18px;}

.amodal{position:fixed;inset:0;z-index:9990;display:none;
  align-items:flex-start;justify-content:center;padding:28px 18px;
  background:rgba(8,10,14,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  overflow-y:auto;overscroll-behavior:contain;}
.amodal.on{display:flex;animation:amFade .22s ease both;}
@keyframes amFade{from{opacity:0;}to{opacity:1;}}
.amodal-card{position:relative;width:min(760px,100%);margin:auto;overflow:visible;
  background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:34px 38px 32px;box-shadow:0 50px 110px -40px rgba(0,0,0,.75);
  animation:amRise .34s cubic-bezier(.2,.8,.2,1) both;}
@keyframes amRise{from{opacity:0;transform:translateY(18px) scale(.985);}to{opacity:1;transform:none;}}
.amodal-x{position:sticky;float:right;top:0;margin:-8px -12px 0 0;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;
  transition:background .15s ease,color .15s ease;}
.amodal-x:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
body.amodal-lock{overflow:hidden;}
@media (max-width:600px){
  .amodal{padding:0;}
  .amodal-card{border-radius:0;min-height:100%;padding:56px 20px 28px;border:none;}
  .amodal-x{top:12px;right:12px;}
}

/* ── Proof wall: bare blocks, no card around them ───────────── */
/* wider than the 880px article column, but centred on the viewport rather
   than the parent - otherwise it hangs off the right edge */
.proof-wall{width:min(1180px,calc(100vw - 44px));margin:26px 0 0;
  position:relative;left:50%;transform:translateX(-50%);}

/* ── Hero trust badges ──────────────────────────────────────── */
.hbadges{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:22px;
  opacity:0;animation:fadeUp .6s ease .7s both;}
.hb{display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:9px 16px 9px 12px;color:var(--on-band);}
.hb-ic{flex:0 0 auto;width:20px;height:20px;display:flex;align-items:center;justify-content:center;}
.hb-ic svg{width:20px;height:20px;}
.hb-tx{font-size:13px;line-height:1.25;font-weight:600;white-space:nowrap;}
.hb-tx b{font-weight:800;}
.hb-stars{display:flex;gap:1px;margin-left:2px;}
.hb-stars svg{width:11px;height:11px;color:#fbbc05;}
@media (max-width:600px){
  .hbadges{gap:7px;margin-top:18px;}
  .hb{padding:7px 12px 7px 9px;}
  .hb-tx{font-size:11.5px;white-space:normal;}
}

/* ── Deck embedded where the video would be ─────────────────── */
.video-frame iframe.deck-embed{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
/* a 16:9 frame is too short for a deck on a phone - give it more height */
@media (max-width:760px){ .video-frame.has-deck{aspect-ratio:4/5;} }
@media (max-width:420px){ .video-frame.has-deck{aspect-ratio:3/4;} }
.deck-hint{margin-top:11px;font-size:12.5px;color:var(--on-band-mute);text-align:center;}

/* ── Sticky apply, once the hero CTA has scrolled away ──────── */
.sticky-apply{position:fixed;left:50%;bottom:22px;z-index:70;
  transform:translate(-50%,140%);opacity:0;pointer-events:none;
  transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .28s ease;}
.sticky-apply.on{transform:translate(-50%,0);opacity:1;pointer-events:auto;}
.sticky-apply .cta{margin-top:0;box-shadow:0 18px 44px -12px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.06);}
@media (max-width:600px){
  .sticky-apply{left:12px;right:12px;bottom:12px;transform:translateY(140%);}
  .sticky-apply.on{transform:translateY(0);}
  .sticky-apply .cta{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){ .sticky-apply{transition:opacity .2s ease;} }

/* ── Record on your phone: native camera capture ────────────── */
.vrec-file{display:none;}
.vrec-filelabel{font-family:var(--font-body);font-weight:600;font-size:14px;border-radius:999px;
  padding:11px 20px;cursor:pointer;border:1.5px solid var(--ink);background:#fff;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;transition:background .15s,color .15s;}
.vrec-filelabel:hover{background:var(--ink);color:#fff;}
.vrec-filelabel svg{width:16px;height:16px;}
.vrec-saved{margin-top:10px;display:none;align-items:center;gap:9px;font-size:13px;font-weight:600;
  color:#15803d;background:#eafaf0;border:1px solid #bfe6c8;border-radius:12px;padding:10px 13px;}
.vrec-saved.on{display:flex;}
.vrec-saved svg{width:17px;height:17px;flex:0 0 auto;}
.vrec-saved .x{margin-left:auto;cursor:pointer;color:var(--ink-mute);font-weight:700;padding:0 4px;}

/* Mail hand-off panel - shown when no endpoint is wired, so the applicant
   sends the email themselves from a link they actually tap. */
.handoff{display:none;text-align:center;padding:4px 2px 2px;}
.handoff.on{display:block;animation:handoffIn .35s cubic-bezier(.2,.8,.2,1);}
@keyframes handoffIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.handoff h3{font-family:var(--font-display);font-weight:var(--display-wt);
  text-transform:var(--display-tt);letter-spacing:var(--display-ls);
  font-size:clamp(22px,3.2vw,30px);color:var(--ink);line-height:1.14;margin-bottom:10px;}
.handoff p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);
  max-width:42ch;margin:0 auto 20px;}
.handoff .cta{margin-top:0;text-decoration:none;}
.handoff-alt{margin-top:16px;}
.handoff-alt button{font-family:var(--font-body);font-weight:600;font-size:13.5px;
  border-radius:999px;padding:11px 20px;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);
  transition:border-color .15s ease,color .15s ease;}
.handoff-alt button:hover{border-color:var(--ink);color:var(--ink);}
.handoff-copied{margin-top:12px;font-size:13px;font-weight:600;color:#15803d;display:none;}
.handoff-copied.on{display:block;}
.handoff-addr{margin-top:14px;font-size:13px;color:var(--ink-mute);word-break:break-all;}


/* A deck is read, not watched, so it wants more room than a video and
   the surrounding page wants less of the attention. */
/* Do NOT set a width here. .video-frame is width:100% inside a wrapper
   that is already centred and capped; giving it a width of its own makes
   it wider than that wrapper, and a block element wider than its parent
   overflows to the right rather than centring. That is what put the deck
   off to one side and made it oversized. Height is the only thing worth
   changing: a deck is read rather than watched, so it wants to be a
   little less letterboxed than a video. */
.video-frame.has-deck{aspect-ratio:16/10;}

/* A deck carries far more on a slide than a video does in a frame, so
   it gets a wider wrapper. Widen the WRAPPER, never the frame: the
   frame is width:100% of this, and margin:auto here is what centres
   both. 880 keeps a slide readable without taking over the page.

   Sized off the parent, not vw. A vw unit counts the scrollbar and the
   containing block does not, so the two disagree by the scrollbar's
   width and the deck sits a few pixels off centre. */
.video-wrap.has-deck{width:min(880px,calc(100% - 24px));}

/* Re-stated after the rule above, which would otherwise override the
   earlier media queries.

   On a phone an aspect ratio is the wrong tool. 4/5 of a 366px-wide
   wrapper is a 446px box floating in an 844px screen: a shrunken desktop
   deck rather than a deck built for the phone. Drive the height off the
   viewport instead, so it fills the screen the way anything readable on
   a phone has to. */
/* A phone gets its own proportions, not the desktop panel's.

   A square was the wrong shape here. At 390px wide a square deck is
   336x336, and six items only fit that by dropping the paragraph off
   each one - which is hiding content, not adapting to the screen. Give
   it the width of the screen and most of the height instead, and
   everything fits at a size someone can actually read. */
@media (max-width:760px){
  .video-wrap.has-deck{width:calc(100% - 16px);}
  .video-frame.has-deck{aspect-ratio:auto;height:min(72vh,620px);min-height:460px;
    border-radius:16px;}
  /* dvh where it exists, so the deck does not jump when a phone's
     address bar slides away mid-scroll. vh above is the fallback. */
  @supports (height:1dvh){
    .video-frame.has-deck{height:min(72dvh,620px);}
  }
}
@media (max-width:760px) and (orientation:landscape){
  /* Sideways there is no height for a square, so cap it. */
  .video-frame.has-deck{aspect-ratio:auto;height:min(88vh,400px);}
}


/* A little bloom outside the ring, kept well back so it never competes
   with the headline above the frame. */
.video-wrap.has-deck::before{content:"";position:absolute;inset:-26px;z-index:0;
  border-radius:36px;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 50%,var(--brand),transparent 70%);
  filter:blur(30px);opacity:.14;}