/* Frosty Coatings hiring funnel.
   Same typeform UI as the Contractor AI application (one question per screen,
   letter keyed options, single selects auto advance, square Back left of a big
   OK) repainted as a LIGHT theme in Frosty's own brand: their blue #188bf6 on
   white, Montserrat headlines, Lato body, the yeti logo.
   Scoped under .rf so every rule is inert outside the form. */

:root {
  --blue: #188bf6;
  --blue-deep: #1069c9;
  --blue-dark: #155eef;
  --blue-tint: #eaf4fe;
  --blue-line: rgba(24, 139, 246, 0.34);
  --orange: #f26b21;          /* the cap in the logo, used sparingly */
  --ink: #101828;
  --ink-2: #344054;
  --mute: #667085;
  --dim: #98a2b3;
  --line: #e4e7ec;
  --bg: #ffffff;
  --bg-soft: #f6f9fc;
  --ok: #12b76a;
  --err: #d92d20;
  --head: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* =====================================================================
   SHARED PAGE CHROME (landing pages + end page)
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body.fc {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.fc h1, .fc h2, .fc h3, .fc h4 { font-family: var(--head); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.fc p { margin: 0; }
.fc a { color: var(--blue); }
/* `.fc a` (0,1,1) outranks `.fc-btn` (0,1,0), so an anchor styled as a button
   inherits the link colour and renders blue on blue. Every CTA on the site is
   an anchor, so this one line is the difference between a visible button and
   an invisible one. */
.fc a.fc-btn { color: #fff; }
.fc a.fc-btn.ghost { color: var(--blue); }

.fc-nav {
  position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line);
}
.fc-nav-in {
  max-width: 1080px; margin: 0 auto; padding: 13px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.fc-logo { display: block; height: 38px; width: auto; }
.fc-nav .fc-btn { padding: 11px 20px; font-size: 14.5px; }

.fc-wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.fc-narrow { max-width: 760px; margin: 0 auto; }

/* ---------- buttons ---------- */
.fc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, var(--blue-deep), var(--blue) 55%, #4aa6f9);
  color: #fff; border: 0; border-radius: 12px; cursor: pointer;
  font-family: var(--head); font-weight: 700; font-size: 16.5px; letter-spacing: 0.01em;
  padding: 16px 30px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 26px rgba(24,139,246,0.30);
  transition: transform 140ms, filter 140ms, box-shadow 140ms;
}
.fc-btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 32px rgba(24,139,246,0.36); }
.fc-btn:active { transform: translateY(0); }
.fc-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.fc-btn.ghost {
  background: #fff; color: var(--blue); border: 1.5px solid var(--blue-line);
  box-shadow: none;
}
.fc-btn.ghost:hover { background: var(--blue-tint); box-shadow: none; }

/* ---------- hero ---------- */
.fc-hero { padding: 56px 0 8px; position: relative; overflow: hidden; }
.fc-hero::before {
  content: ""; position: absolute; inset: -140px -20% auto -20%; height: 520px; z-index: -1;
  background:
    radial-gradient(620px 320px at 78% 8%, rgba(24,139,246,0.13), transparent 62%),
    radial-gradient(540px 300px at 12% 0%, rgba(24,139,246,0.09), transparent 60%);
}
.fc-pill {
  display: inline-flex; align-items: center; gap: 9px; background: var(--blue-tint);
  color: var(--blue-dark); border: 1px solid var(--blue-line); border-radius: 999px;
  padding: 7px 15px; font-family: var(--head); font-weight: 700; font-size: 13px;
  letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 20px;
}
.fc-pill .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px rgba(18,183,106,0.18);
}
.fc-h1 { font-size: clamp(31px, 5.6vw, 52px); line-height: 1.08; margin-bottom: 18px; }
.fc-h1 em { font-style: normal; color: var(--blue); }
.fc-sub { font-size: clamp(16.5px, 2.1vw, 19.5px); line-height: 1.6; color: var(--ink-2); max-width: 700px; }
.fc-hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.fc-hero-note { font-size: 14px; color: var(--mute); }

/* ---------- fact strip: the pay, up front ---------- */
.fc-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
  margin: 40px 0 8px;
}
.fc-fact {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 15px; padding: 20px 20px 18px;
}
.fc-fact .k {
  font-family: var(--head); font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 9px;
}
.fc-fact .v { font-family: var(--head); font-size: 25px; font-weight: 800; color: var(--ink); line-height: 1.15; }
.fc-fact .v.blue { color: var(--blue); }
.fc-fact .n { font-size: 13.5px; color: var(--mute); margin-top: 7px; line-height: 1.5; }

/* ---------- content sections ---------- */
.fc-sec { padding: 52px 0; }
.fc-sec.tint { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fc-eyebrow {
  font-family: var(--head); font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 12px;
}
.fc-h2 { font-size: clamp(24px, 3.6vw, 34px); line-height: 1.2; margin-bottom: 14px; }
.fc-lead { font-size: 17px; line-height: 1.65; color: var(--ink-2); }

.fc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 28px; }
/* Both card grids hold exactly four. auto-fit gives three across at desktop
   and leaves the fourth stranded on its own row, so pin it to a 2x2. */
@media (min-width: 880px) { .fc-grid { grid-template-columns: repeat(2, 1fr); } }
.fc-card { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 22px; }
.fc-sec.tint .fc-card { background: #fff; }
.fc-card h3 { font-size: 17.5px; margin-bottom: 9px; }
.fc-card p { font-size: 15px; line-height: 1.6; color: var(--mute); }
.fc-card .ico {
  width: 40px; height: 40px; border-radius: 11px; background: var(--blue-tint);
  display: grid; place-items: center; color: var(--blue); margin-bottom: 14px;
}
.fc-card .ico svg { width: 20px; height: 20px; }

/* bullet list with ticks.
   The row is NOT flex on purpose. A flex row turns every inline child into its
   own flex item, so "job is about <b>$4,000</b>. Your cut..." would shatter
   into three columns. Absolute positioning the icon keeps the copy as ordinary
   running text, so bold and links inside a bullet behave normally. */
.fc-ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 13px; }
.fc-ticks li { position: relative; padding-left: 33px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.fc-ticks li svg { position: absolute; left: 0; top: 2px; width: 21px; height: 21px; color: var(--blue); }
.fc-ticks li b { font-weight: 700; color: var(--ink); }
.fc-ticks.warn li svg { color: var(--orange); }

/* numbered steps (onboarding / what happens next).
   Same reason as above: the counter is absolutely positioned so the title and
   its description stack instead of sitting side by side as flex items. */
.fc-steps { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 16px; counter-reset: s; }
.fc-steps li {
  position: relative; counter-increment: s; padding: 18px 20px 18px 66px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
}
.fc-steps li::before {
  content: counter(s); position: absolute; left: 20px; top: 18px;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--blue); color: #fff; display: grid; place-items: center;
  font-family: var(--head); font-weight: 800; font-size: 14.5px;
}
.fc-steps li b { display: block; font-family: var(--head); font-size: 16.5px; margin-bottom: 4px; color: var(--ink); }
.fc-steps li span { font-size: 15px; line-height: 1.6; color: var(--mute); }

/* closing CTA band */
.fc-band { padding: 56px 0 64px; text-align: center; }
.fc-band .fc-h2 { max-width: 660px; margin-left: auto; margin-right: auto; }
.fc-band .fc-lead { max-width: 560px; margin: 0 auto 28px; }

.fc-foot {
  border-top: 1px solid var(--line); padding: 26px 22px calc(26px + var(--safe-b));
  text-align: center; font-size: 13.5px; color: var(--dim); line-height: 1.7;
}

@media (max-width: 720px) {
  .fc-hero { padding: 38px 0 4px; }
  .fc-sec { padding: 40px 0; }
  .fc-hero-cta .fc-btn { width: 100%; }
  .fc-nav .fc-btn { display: none; }
}

/* =====================================================================
   THE FORM (.rf) — identical structure to the Contractor AI typeform,
   light Frosty paint
   ===================================================================== */
.rf, .rf * { box-sizing: border-box; margin: 0; padding: 0; }
.rf {
  font-family: var(--body); color: var(--ink);
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; background: transparent;
  -webkit-font-smoothing: antialiased;
}

/* ---------- top bar: progress + brand + counter ---------- */
.rf-top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,0.94); backdrop-filter: blur(10px); }
.rf-progress { height: 4px; background: #eaeef3; }
.rf-progress b {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue), #61b2fb);
  transition: width 420ms cubic-bezier(.22,1,.36,1);
}
.rf-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; }
.rf-brand { display: inline-flex; align-items: center; gap: 9px; }
.rf-brand img { height: 30px; width: auto; display: block; }
.rf-count { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; font-family: var(--head); font-weight: 600; }
.rf-count b { color: var(--blue); font-weight: 800; }

/* ---------- stage ---------- */
.rf-stage { flex: 1; display: flex; align-items: safe center; justify-content: center; padding: 30px 22px 48px; position: relative; }
.rf-screen { width: 100%; max-width: 660px; position: relative; }
.rf-screen.wide { max-width: 780px; }
.rf-screen-out { position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 1; }

@keyframes rf-in-up   { from { opacity: 0; transform: translateY(48%); filter: blur(2px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes rf-in-down { from { opacity: 0; transform: translateY(-48%); filter: blur(2px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes rf-out-up   { from { opacity: 1; transform: none; filter: blur(0); } to { opacity: 0; transform: translateY(-48%); filter: blur(2px); } }
@keyframes rf-out-down { from { opacity: 1; transform: none; filter: blur(0); } to { opacity: 0; transform: translateY(48%); filter: blur(2px); } }
.rf-screen-body { will-change: transform, opacity, filter; }
@keyframes rf-child { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rf-stagger > * { animation: rf-child 300ms cubic-bezier(0.22,1,0.36,1) both; }
.rf-stagger > *:nth-child(1) { animation-delay: 30ms; }
.rf-stagger > *:nth-child(2) { animation-delay: 85ms; }
.rf-stagger > *:nth-child(3) { animation-delay: 140ms; }
.rf-stagger > *:nth-child(4) { animation-delay: 195ms; }
.rf-stagger > *:nth-child(5) { animation-delay: 235ms; }
.rf-stagger > *:nth-child(6) { animation-delay: 265ms; }

/* ---------- question head ---------- */
.rf-qnum { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-family: var(--head); font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.rf-qnum svg { width: 13px; height: 13px; }
.rf-qlabel { font-family: var(--head); font-size: clamp(22px, 3.4vw, 31px); font-weight: 700; line-height: 1.25; letter-spacing: -0.018em; margin-bottom: 8px; }
.rf-qlabel .req { color: var(--blue); margin-left: 4px; font-weight: 800; }
.rf-hint { font-size: 15px; color: var(--mute); margin-bottom: 22px; line-height: 1.55; }

/* ---------- choice options ---------- */
.rf-opts { display: flex; flex-direction: column; gap: 11px; margin-bottom: 8px; }
.rf-opt {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  padding: 15px 16px; cursor: pointer; font-size: 16px; color: var(--ink);
  font-family: var(--body); transition: border-color 130ms, background 130ms, transform 130ms; user-select: none;
}
.rf-opt:hover { border-color: var(--blue-line); background: var(--blue-tint); }
.rf-opt:active { transform: scale(0.99); }
.rf-opt.sel { border-color: var(--blue); background: var(--blue-tint); box-shadow: 0 0 0 1px var(--blue) inset; }
.rf-opt .key {
  flex-shrink: 0; width: 26px; height: 26px; display: inline-grid; place-items: center;
  border: 1.5px solid var(--line); border-radius: 7px; font-family: var(--head);
  font-size: 13px; font-weight: 700; color: var(--mute); transition: all 130ms;
}
.rf-opt:hover .key { border-color: var(--blue-line); color: var(--blue); }
.rf-opt.sel .key { background: var(--blue); border-color: var(--blue); color: #fff; }
.rf-opt .lbl { flex: 1; line-height: 1.45; }
.rf-opt .tick { flex-shrink: 0; width: 20px; opacity: 0; color: var(--blue); transition: opacity 130ms; }
.rf-opt.sel .tick { opacity: 1; }

/* ---------- text inputs ---------- */
.rf-field { margin-bottom: 12px; }
.rf-input {
  width: 100%; background: transparent; border: 0; border-bottom: 2px solid var(--line);
  color: var(--ink); font-size: clamp(20px, 3vw, 26px); font-weight: 600; padding: 8px 2px;
  outline: none; transition: border-color 160ms; font-family: var(--body);
}
.rf-input::placeholder { color: var(--dim); font-weight: 400; }
.rf-input:focus { border-color: var(--blue); }

/* long answer: a real box, because these questions want a paragraph */
.rf-textarea {
  width: 100%; min-height: 160px; resize: vertical; background: #fff;
  border: 1.5px solid var(--line); border-radius: 13px; padding: 15px 16px;
  color: var(--ink); font-size: 17px; line-height: 1.6; font-family: var(--body);
  outline: none; transition: border-color 160ms;
}
.rf-textarea::placeholder { color: var(--dim); }
.rf-textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24,139,246,0.10); }
.rf-counter { font-size: 13px; color: var(--dim); margin-top: 8px; text-align: right; font-variant-numeric: tabular-nums; }
.rf-counter.ok { color: var(--ok); }

.rf-phone { display: flex; gap: 10px; align-items: flex-end; position: relative; }
.rf-cc {
  display: inline-flex; align-items: center; gap: 7px; background: #fff;
  border: 1.5px solid var(--line); border-radius: 10px; color: var(--ink); padding: 10px 13px;
  font-size: 16px; cursor: pointer; white-space: nowrap; font-family: var(--body);
}
.rf-cc:hover { border-color: var(--blue-line); }
.rf-phone .rf-input { flex: 1; }
.rf-cc-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: 260px; max-height: 240px;
  overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 44px rgba(16,24,40,0.16); display: none;
}
.rf-cc-menu.open { display: block; }
.rf-cc-item { display: flex; align-items: center; gap: 9px; padding: 10px 13px; font-size: 14.5px; cursor: pointer; color: var(--ink); }
.rf-cc-item:hover { background: var(--blue-tint); }
.rf-cc-item .code { color: var(--mute); margin-left: auto; }

/* ---------- actions ---------- */
.rf-actions { display: flex; align-items: stretch; gap: 12px; margin-top: 26px; }
.rf-back-sq {
  flex: 0 0 54px; display: inline-grid; place-items: center; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  color: var(--mute); transition: border-color 130ms, color 130ms;
}
.rf-back-sq:hover { border-color: var(--blue-line); color: var(--blue); }
.rf-back-sq svg { width: 20px; height: 20px; }
.rf-ok {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(135deg, var(--blue-deep), var(--blue) 55%, #4aa6f9);
  color: #fff; border: 0; border-radius: 12px; font-family: var(--head);
  font-size: 16px; font-weight: 700; padding: 15px 26px; cursor: pointer;
  transition: filter 150ms, transform 120ms, opacity 150ms;
  box-shadow: 0 8px 22px rgba(24,139,246,0.28);
}
.rf-ok svg { width: 15px; height: 15px; flex-shrink: 0; }
.rf-ok:hover { filter: brightness(1.05); transform: translateY(-1px); }
.rf-ok:active { transform: translateY(0); }
.rf-ok:disabled { opacity: 0.45; cursor: default; filter: none; box-shadow: none; transform: none; }
.rf-enter { display: inline-flex; align-items: center; font-size: 13px; color: var(--mute); white-space: nowrap; }
.rf-enter kbd {
  font-family: var(--body); background: #fff; border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 7px; margin-left: 5px; font-size: 12px; color: var(--ink-2);
}
.rf-err { color: var(--err); font-size: 13.5px; margin-top: 12px; min-height: 16px; }

/* ---------- video step ---------- */
.rf-vid-why {
  background: var(--blue-tint); border: 1px solid var(--blue-line); border-radius: 13px;
  padding: 15px 17px; margin-bottom: 20px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2);
}
.rf-vid-why b { font-family: var(--head); color: var(--ink); }
.rf-vid-why ul { margin: 9px 0 0 18px; padding: 0; }
.rf-vid-why li { margin-bottom: 4px; }

.rf-vid-stage {
  position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 62vh; margin: 0 auto;
  background: #0d1420; border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  display: grid; place-items: center;
}
@media (min-width: 700px) { .rf-vid-stage { aspect-ratio: 4 / 3; max-width: 520px; } }
.rf-vid-stage video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0d1420; }
.rf-vid-stage video.mirror { transform: scaleX(-1); }   /* live selfie preview reads as a mirror */

.rf-vid-idle { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 26px; color: #fff; }
.rf-vid-idle .ico { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.12); display: grid; place-items: center; margin: 0 auto 16px; }
.rf-vid-idle .ico svg { width: 26px; height: 26px; color: #fff; }
.rf-vid-idle p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.72); max-width: 300px; margin: 0 auto; }

/* recording chrome overlaid on the video */
.rf-vid-hud {
  position: absolute; top: 12px; left: 12px; right: 12px; display: flex;
  align-items: center; justify-content: space-between; gap: 10px; pointer-events: none;
}
.rf-vid-timer {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(13,20,32,0.72);
  backdrop-filter: blur(6px); color: #fff; border-radius: 999px; padding: 7px 14px;
  font-family: var(--head); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
}
.rf-vid-timer .rec { width: 9px; height: 9px; border-radius: 50%; background: #f04438; animation: rf-blink 1.1s ease-in-out infinite; }
@keyframes rf-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.rf-vid-goal {
  background: rgba(13,20,32,0.72); backdrop-filter: blur(6px); color: #fff; border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 600;
}
.rf-vid-goal.hit { background: rgba(18,183,106,0.92); }

/* the 60 second minimum, drawn as a filling bar so it is obvious */
.rf-vid-min { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.22); overflow: hidden; }
.rf-vid-min b { display: block; height: 100%; width: 0; background: #fff; transition: width 240ms linear; }
.rf-vid-min b.hit { background: #12b76a; }

.rf-vid-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.rf-rec-btn {
  width: 66px; height: 66px; border-radius: 50%; border: 4px solid var(--line); background: #fff;
  cursor: pointer; display: grid; place-items: center; padding: 0; transition: transform 130ms, border-color 130ms;
}
.rf-rec-btn:hover { transform: scale(1.04); border-color: var(--blue-line); }
.rf-rec-btn .core { width: 40px; height: 40px; border-radius: 50%; background: #f04438; transition: all 200ms cubic-bezier(.22,1,.36,1); }
.rf-rec-btn.recording .core { width: 24px; height: 24px; border-radius: 6px; }
.rf-rec-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.rf-rec-label { font-size: 14px; color: var(--mute); text-align: center; width: 100%; margin-top: 2px; line-height: 1.5; }
.rf-vid-mini {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--line);
  border-radius: 11px; padding: 12px 18px; font-family: var(--head); font-weight: 700; font-size: 14.5px;
  color: var(--ink-2); cursor: pointer; transition: border-color 130ms, color 130ms;
}
.rf-vid-mini:hover { border-color: var(--blue-line); color: var(--blue); }
.rf-vid-mini svg { width: 16px; height: 16px; }
.rf-vid-mini.danger:hover { border-color: rgba(217,45,32,0.4); color: var(--err); }

.rf-vid-done {
  display: flex; align-items: center; gap: 11px; background: rgba(18,183,106,0.08);
  border: 1px solid rgba(18,183,106,0.28); border-radius: 12px; padding: 13px 16px;
  margin-top: 16px; font-size: 15px; color: #05603a;
}
.rf-vid-done svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ok); }

/* native camera fallback for browsers without MediaRecorder */
.rf-vid-fallback { text-align: center; margin-top: 14px; font-size: 13.5px; color: var(--mute); }
.rf-vid-fallback label { color: var(--blue); text-decoration: underline; cursor: pointer; }
.rf-vid-fallback input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- upload progress ---------- */
.rf-upl { margin-top: 18px; }
.rf-upl-bar { height: 6px; border-radius: 999px; background: #eaeef3; overflow: hidden; }
.rf-upl-bar b { display: block; height: 100%; width: 0; background: var(--blue); transition: width 200ms linear; }
.rf-upl-t { font-size: 13.5px; color: var(--mute); margin-top: 9px; text-align: center; }

/* ---------- spinner ---------- */
.rf-spin {
  display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff; border-radius: 50%; animation: rf-rot 700ms linear infinite;
}
@keyframes rf-rot { to { transform: rotate(360deg); } }

/* ---------- disqualification screen ---------- */
.rf-dq { text-align: center; max-width: 560px; margin: 0 auto; padding: 0 4px; }
.rf-dq-badge {
  width: 66px; height: 66px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-tint); border: 1px solid var(--blue-line);
}
.rf-dq-badge svg { width: 30px; height: 30px; color: var(--blue); }
.rf-dq-h { font-family: var(--head); font-size: clamp(24px, 4vw, 32px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; }
.rf-dq-p { color: var(--mute); font-size: 16px; line-height: 1.65; }

@media (max-width: 780px) {
  .rf-stage { padding: 22px 16px 42px; }
  .rf-enter { display: none; }
  .rf-actions .rf-ok { flex: 1; }
  .rf-actions.back-only { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .rf-screen-body { animation: none !important; }
  .rf-progress b { transition: none; }
  .rf-vid-timer .rec { animation: none; }
}