/* The video interview (/video-interview). Its own page: no site header, menu
   or footer, nothing to tap away to mid-interview. Same paper, ink and type
   as the rest of the site (tokens copied from global.css; the Nov 2026 blue and
   Archivo since Nov 3 2026). Phone first. */

:root {
  /* the site's Nov 2026 palette (global.css "NOV 2026 LOOK"), under the names this page used */
  --paper:   #f6f8fb;
  --paper-2: #e8eef7;
  --paper-3: #e3e7ee;
  --ink:     #15202b;
  --fg-2:    #3b4148;
  --fg-3:    #5b6472;
  --rule:    #d5dbe5;
  --rule-mid:#c3cbd7;
  --blue:    #2456a6;
  --blue-deep:#17407f;
  --blue-tint:#eaf0fa;
  --red:     #C4320A;
  --ok:      #067647;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 2px; }
[hidden] { display: none !important; }
h1:focus { outline: none; }

/* ---------- header ---------- */
.ivh {
  background: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem;
  padding-top: max(.7rem, env(safe-area-inset-top));
  border-bottom: 1px solid var(--rule);
  font-size: .82rem;
}
.ivh__brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.ivh__what { color: var(--fg-3); letter-spacing: .08em; text-transform: uppercase; font-size: .68rem; font-weight: 600; white-space: nowrap; }
.ivh__what b { color: var(--red); }

/* ---------- the card each screen sits in ---------- */
.iv { width: 100%; max-width: 36rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; padding-bottom: max(3rem, env(safe-area-inset-bottom)); }
.iv-card > * + * { margin-top: 1rem; }
.iv-card h1 { font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem); line-height: 1.05; font-weight: 800; font-stretch: 90%; letter-spacing: -0.02em; }
.iv-tag { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.iv-lede { font-size: 1.1rem; color: var(--fg-2); }
.iv-small { font-size: .88rem; color: var(--fg-3); }
.iv-promise { font-weight: 700; font-size: 1.05rem; }

/* ---------- buttons ---------- */
.iv-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.iv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: .8em 1.4em;
  background: var(--blue); color: #fff;
  border: 1.5px solid var(--blue); border-radius: 999px;
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.iv-btn:disabled { opacity: .4; cursor: default; }
.iv-btn--wide { flex: 1 1 100%; }
.iv-btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); flex: 1 1 auto; }
.iv-btn:not(.iv-btn--ghost):not(.iv-btn--stop):not(:disabled):hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.iv-btn--stop { background: var(--red); border-color: var(--red); }
.iv-dot { width: .7rem; height: .7rem; border-radius: 50%; background: #F04438; }
.iv-left { font-variant-numeric: tabular-nums; font-weight: 600; opacity: .85; }
.iv-left:not(:empty)::before { content: '\00B7\00A0'; }
.iv-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ---------- 1. the job, then details ---------- */
.iv-team--top { margin-bottom: -.25rem; }
.iv-team--top .iv-team__img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 35%; }
.iv-card h1.iv-pay { font-size: clamp(2.3rem, 1.8rem + 2.6vw, 3.4rem); line-height: .95; font-weight: 850; font-stretch: 88%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--blue); }
.iv-pay span { font-size: .5em; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.iv-perks { list-style: none; padding: 0; display: grid; gap: .3rem; font-size: 1.02rem; }
.iv-perks li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .4rem; }
.iv-perks li::before { content: '✓'; font-weight: 800; color: var(--blue); }

/* The easy-going part, for people who've never done a video interview (Oct 27 2026). */
.iv-easy { list-style: none; padding: 0; display: grid; gap: .25rem; font-size: .98rem; color: var(--fg-2); }
.iv-easy li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .4rem; }
.iv-easy li::before { content: '•'; font-weight: 800; color: var(--fg-3); text-align: center; }
.iv-preview { border: 1px solid var(--rule); border-radius: 16px; background: #fff; padding: 0 1rem; font-size: .97rem; }
.iv-preview summary { cursor: pointer; font-weight: 700; min-height: 48px; display: flex; align-items: center; }
.iv-preview ol { padding: 0 0 .9rem 1.2rem; display: grid; gap: .45rem; color: var(--fg-2); }
.iv-later { font-size: .95rem; color: var(--fg-2); }
.iv-later a { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* 1b. On to Safari or Chrome */
a.iv-btn { text-decoration: none; }
.iv-card > .iv-btn--wide { display: flex; width: 100%; }
.iv-cam.is-off { display: none; }   /* no empty black box under a camera error */
.iv-steps { padding: .85rem 1rem; border-radius: 14px; background: var(--paper-2); font-size: .97rem; color: var(--fg-2); }
.iv-steps.is-hot { background: #FEF0C7; color: #7A2E0E; outline: 2px solid #F79009; }
.iv-link { display: block; width: 100%; min-height: 48px; padding: .5rem; background: none; border: 0; font: inherit; font-size: .98rem; font-weight: 600; color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.iv-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.iv-field { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
.iv-field input {
  width: 100%; min-height: 52px; padding: .7rem .9rem;
  font: inherit; font-size: 1.0625rem; font-weight: 400; color: var(--ink);
  background: #fff; border: 1.5px solid var(--rule-mid); border-radius: 12px;
}
.iv-field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36, 86, 166, .18); }
.iv-check { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; padding: .9rem 1rem; background: var(--paper-2); border-radius: 14px; font-size: .97rem; cursor: pointer; }
.iv-check input { width: 1.4rem; height: 1.4rem; margin-top: .1rem; accent-color: var(--blue); }
.iv-err { display: block; color: var(--red); font-size: .9rem; font-style: normal; font-weight: 600; }
.iv-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.iv-resume { margin-top: 1.25rem; padding: 1rem; border: 1.5px solid var(--blue); border-radius: 16px; background: var(--blue-tint); }
.iv-resume > * + * { margin-top: .8rem; }

.iv-privacy { margin-top: 1.75rem; border-top: 1px solid var(--rule); padding-top: 1rem; font-size: .93rem; color: var(--fg-2); }
.iv-privacy summary { cursor: pointer; font-weight: 700; color: var(--ink); min-height: 44px; display: flex; align-items: center; }
.iv-privacy ul { margin-top: .5rem; padding-left: 1.1rem; display: grid; gap: .45rem; }

/* ---------- 2. welcome from Dan ---------- */
.iv-dan { width: 8rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--paper-3); }
.iv-dan__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.iv-letter { font-size: 1.06rem; color: var(--fg-2); }
.iv-sign { font-weight: 700; color: var(--ink); }
.iv-how { list-style: none; padding: 0; counter-reset: step; display: grid; gap: .55rem; }
.iv-how li { counter-increment: step; display: grid; grid-template-columns: 1.9rem 1fr; gap: .65rem; align-items: center; font-size: 1.04rem; }
.iv-how li::before { content: counter(step); width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }

/* ---------- 3-4. camera ---------- */
.iv-cam { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 62vh; max-height: 62dvh; margin-left: auto; margin-right: auto; border-radius: 14px; overflow: hidden; background: #000; }
.iv-cam--q { max-height: 48vh; max-height: 48dvh; }
.iv-cam__video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.iv-cam__video.is-mirror { transform: scaleX(-1); }   /* the preview only; the recording isn't flipped */
.iv-cam__playback { object-fit: contain; }
.iv-cam__wait { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .95rem; padding: 1rem; text-align: center; }

.iv-meter { display: grid; gap: .4rem; font-size: .92rem; color: var(--fg-2); }
.iv-meter__bar { display: block; height: 10px; border-radius: 99px; background: var(--paper-3); overflow: hidden; }
.iv-meter__bar span { display: block; height: 100%; width: 0; background: var(--ok); transition: width .08s linear; }
.iv-camerr { padding: .85rem 1rem; border-radius: 10px; background: #FEF0C7; color: #7A2E0E; font-size: .95rem; }

.iv-rec {
  position: absolute; top: .7rem; left: .7rem;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .7rem; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff;
  font-size: .85rem; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.iv-rec b { font-weight: 700; }
.iv-rec__dot { width: .65rem; height: .65rem; border-radius: 50%; background: #F04438; animation: iv-blink 1s steps(2, start) infinite; }
.iv-rec.is-ending { background: var(--red); }
@keyframes iv-blink { to { visibility: hidden; } }

/* ---------- 4. the question ---------- */
.iv-q > * + * { margin-top: .8rem; }
.iv-qnum { font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.iv-take { color: var(--red); }
.iv-q .iv-qtext { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem); line-height: 1.3; font-weight: 600; letter-spacing: 0; }
.iv-qlist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.iv-qlist li { padding: .3rem .7rem; border-radius: 999px; background: #fff; border: 1px solid var(--rule); font-size: .92rem; }
/* The record and stop buttons stay on screen, even on a small phone with a long question. */
.iv-q .iv-row[data-when="reading"], .iv-q .iv-row[data-when="recording"] {
  position: sticky; bottom: 0; z-index: 2;
  margin-left: -1rem; margin-right: -1rem;
  padding: .6rem 1rem max(.6rem, env(safe-area-inset-bottom));
  background: var(--paper);
}
.iv-q:has(.iv-qlist:not([hidden])) .iv-cam--q { max-height: 34vh; max-height: 34dvh; }
.iv-hint { font-size: .95rem; color: var(--fg-3); }
.iv-saved { font-weight: 600; color: var(--ok); }
.iv-after > * + * { margin-top: .7rem; }
.iv-sends { list-style: none; padding: 0; font-size: .85rem; color: var(--fg-3); display: grid; gap: .2rem; }
.iv-sends .is-failed { color: var(--red); font-weight: 600; }

/* ---------- 5. finishing ---------- */
.iv-progress { height: 12px; border-radius: 99px; background: var(--paper-3); overflow: hidden; }
.iv-progress span { display: block; height: 100%; width: 0; background: var(--blue); transition: width .3s ease; }

/* ---------- 6. thanks ---------- */
.iv-team { border-radius: 20px; overflow: hidden; background: var(--paper-3); }
.iv-team__img { width: 100%; height: auto; }
.iv-team figcaption { padding: .5rem .8rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); background: #fff; }

@media (min-width: 40rem) {
  .iv { padding-top: 2.5rem; }
  .iv-btn--wide { flex: 1 1 auto; }
  .iv-cam { max-width: 26rem; }
}

@media (prefers-reduced-motion: reduce) {
  .iv-rec__dot { animation: none; }
  .iv-meter__bar span, .iv-progress span { transition: none; }
}