/* LeadGate landing — mobile-first, RTL, compact. Themable via --primary. */
:root {
  --primary: #14395e;          /* hero / headers (per-company override) */
  --accent: #f5811f;           /* CTAs / highlights (brand orange) */
  --ink: #1a2230;
  --muted: #5b6673;
  --bg: #f4f6f8;
  --card: #ffffff;
  --line: #e5e9ee;
  --danger: #d64550;
  --radius: 13px;
  --shadow: 0 4px 16px rgba(20, 30, 50, 0.09);

  /* fold fit-to-viewport rhythm (overridden by .cmp-* and short viewports) */
  --hero-py:16px; --hero-h1:1.34rem; --hero-sub:0.84rem; --sal-mt:14px; --sal-py:10px; --sal-main:1.62rem;
  --perks-mt:13px; --trust-mt:11px; --main-pt:12px; --card-py:14px; --card-my:11px;
  --label-mt:8px; --field-py:10px; --cta-py:12px; --btn-mt:12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", "Rubik", system-ui, -apple-system, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.4;
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.2; }

/* ---------- Hero (premium, clear hierarchy, compact) ---------- */
.hero {
  position: relative;
  /* warm accent glow behind the salary + deep navy gradient body */
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(245,129,31,0.20), transparent 60%),
    radial-gradient(150% 70% at 50% -25%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(165deg, color-mix(in srgb, var(--primary) 88%, #fff 0%), color-mix(in srgb, var(--primary) 58%, #000));
  color: #fff;
  padding: var(--hero-py) 18px;
  text-align: center;
  overflow: hidden;
}
/* Small tenant logo, top-right of the hero. Stays IN FLOW (margin-left:auto pushes
   it to the physical right) so it can never overlap the title beneath it. */
/* Brand wordmark — used when a tenant has no logo image. Mirrors the iSafe
   lockup: first word white, the rest in brand accent. */
.hero .wordmark {
  width: fit-content;
  margin: 0 0 10px auto;
  font-weight: 800;
  font-size: 1.12rem;
  line-height: 1.1;
  letter-spacing: -0.4px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.25);
}
.hero .wordmark__a { color: #fff; }
.hero .wordmark__b { color: var(--accent); }

.hero .logo {
  display: block;
  max-height: 70px;
  max-width: 60%;
  width: auto;
  margin: 0 0 10px auto;
  padding: 0;
  background: none;
  object-fit: contain;
}
.hero h1 {
  font-size: var(--hero-h1); font-weight: 800; margin: 2px 0 0;
  letter-spacing: -0.4px; line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0,0,0,0.18);
}
.hero .subtitle {
  font-size: var(--hero-sub); font-weight: 400; opacity: 0.82;
  margin: 5px auto 0; max-width: 480px;
}

/* Salary — THE hook. A deliberate hero badge: small eyebrow label, one big
   clean figure, and a short tagline. Reads as a designed callout, not stray text. */
.hero .salary-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: fit-content;
  max-width: 320px;
  margin: var(--sal-mt) auto 0;
  padding: var(--sal-py) 26px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, rgba(245,129,31,0.26), rgba(245,129,31,0.07));
  border: 1px solid rgba(245,129,31,0.55);
  border-radius: 16px;
  box-shadow:
    0 10px 26px -6px rgba(245,129,31,0.30),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.hero .salary-eyebrow {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2px;
  color: #ffcfa0; text-transform: none;
}
.hero .salary-eyebrow::before {   /* coin glyph inline before the eyebrow */
  content: ""; width: 14px; height: 14px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb877' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M18.09 10.37A6 6 0 1 1 10.34 18'/%3E%3Cpath d='M7 6h1v4'/%3E%3Cpath d='m16.71 13.88.7.71-2.82 2.82'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hero .salary-main {
  font-size: var(--sal-main); font-weight: 800; line-height: 1.15;
  letter-spacing: -0.5px; white-space: nowrap;
  font-feature-settings: "tnum" 1; text-shadow: 0 1px 10px rgba(245,129,31,0.28);
}
.hero .salary-sub {
  font-size: 0.78rem; font-weight: 500; opacity: 0.9; line-height: 1.3;
  margin-top: 2px;
}

/* Perk chips — glassy, uniform, crisp Lucide SVG icon per chip (no emoji). */
.perks {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: var(--perks-mt) auto 0; padding-top: var(--perks-mt); width: 100%; max-width: 420px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.perks .perk {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px; padding: 6px 11px; font-size: 0.76rem; font-weight: 600;
  white-space: nowrap; transition: background 0.2s ease, border-color 0.2s ease;
}
.perks .perk::before {   /* crisp 1.9px-stroke icon, matched set */
  content: ""; width: 15px; height: 15px; flex: 0 0 auto; opacity: 0.95;
  background-position: center; background-repeat: no-repeat; background-size: contain;
}
/* 1: graduation-cap (training) */
.perks .perk-1::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E");
}
/* 2: gift (retention bonus) */
.perks .perk-2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
}
/* 3: file-text / receipt (payslip or invoice) */
.perks .perk-3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
}

/* Trust micro-cue — single subtle line tying the perks to the form action.
   Reinforces the goal (leave a number → we call today) without adding height. */
.hero .hero-trust {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; margin: var(--trust-mt) 0 0; font-size: 0.76rem; font-weight: 500;
  color: rgba(255,255,255,0.82);
}
.hero .hero-trust-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: #56d19a; box-shadow: 0 0 0 3px rgba(86,209,154,0.22);
  animation: heroPulse 2.4s ease-in-out infinite;
}
@keyframes heroPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(86,209,154,0.22); }
  50%      { box-shadow: 0 0 0 5px rgba(86,209,154,0.10); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-trust-dot { animation: none; }
}

/* Explainer video — embedded inline near the bottom of the page.
   Robust responsive iframe: wrapper sets the 9:16 box, iframe fills it. */
.explainer-inline { padding: 6px 0 4px; }
.explainer-inline .frame-wrap {
  position: relative; width: 100%; max-width: 340px; margin: 0 auto; aspect-ratio: 9 / 16;
  border-radius: 16px; overflow: hidden;   /* radius on the wrapper so the FLIP can animate it */
  box-shadow: var(--shadow);
}
.explainer-inline .frame-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none;
  border-radius: inherit; background: #0b1a2b; display: block;
}

.video-wrap {
  max-width: 640px;
  margin: 18px auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #000;
}
.video-wrap video { display: block; width: 100%; aspect-ratio: 16 / 9; }

/* ---------- Layout (compact) ---------- */
main { max-width: 620px; margin: 0 auto; padding: var(--main-pt) 12px 22px; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--card-py) 15px;
  margin: var(--card-my) 0;
}
.card h2 { margin: 0 0 8px; font-size: 1.1rem; }
.job-desc, .job-extra { white-space: pre-line; color: var(--ink); overflow-wrap: anywhere; font-size: 0.92rem; }
/* Requirements: one bullet per item (split on "·" in the template). */
.job-req {
  color: var(--ink); overflow-wrap: anywhere; font-size: 0.92rem;
  margin: 0; padding-inline-start: 1.15em; list-style: disc;
}
.job-req li { margin: 3px 0; padding-inline-start: 2px; }
.job-req li::marker { color: var(--primary); }
.faq-a, .card { overflow-wrap: anywhere; }
.salary { font-weight: 700; font-size: 1rem; margin: 2px 0 8px; }
h3 { margin: 8px 0 2px; font-size: 0.98rem; }

/* Form-first: pull the lead form tight under the hero (above the fold) */
.form-card h2 { color: var(--primary); white-space: nowrap; font-size: clamp(0.62rem, 3.3vw, 1.1rem); }

/* ---------- FAQ ---------- */
/* Inline "ask a question" box — always visible at the top of the FAQ card. */
.faq-ask { margin: 0 0 10px; }
.faq-ask .chat-log:empty { display: none; }   /* no empty space before any messages */
.faq-ask .chat-log { max-height: 300px; margin-bottom: 10px; }

/* "שאלות פופולריות" — a tasteful secondary button with a rotating chevron. */
.popular-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 44px; margin: 4px 0 0; padding: 10px 14px;
  background: color-mix(in srgb, var(--primary) 5%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--primary) 20%, #fff);
  border-radius: 11px; color: var(--primary);
  font-family: inherit; font-size: 0.95rem; font-weight: 700; text-align: start;
  cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease;
}
.popular-toggle:hover {
  background: color-mix(in srgb, var(--primary) 9%, #fff);
  border-color: color-mix(in srgb, var(--primary) 38%, #fff);
}
.popular-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, #fff); outline-offset: 2px; }
.popular-toggle__chev {   /* chevron-down; rotates to point up when expanded */
  width: 18px; height: 18px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314395e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.22s ease;
}
.popular-toggle[aria-expanded="true"] .popular-toggle__chev { transform: rotate(180deg); }

.popular-questions { margin-top: 4px; }
.popular-questions[hidden] { display: none; }
.popular-questions.revealing { animation: faqReveal 0.24s ease-out; }
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .popular-toggle__chev { transition: none; }
  .popular-questions.revealing { animation: none; }
}

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
  font-size: 0.92rem;
}
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-inline-start: 26px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "+";
  position: absolute;
  inset-inline-start: 0;
  color: var(--primary);
  font-weight: 700;
}
.faq-item[open] summary::before { content: "–"; }
.faq-a { white-space: pre-line; color: var(--muted); padding: 8px 26px 2px; }

/* ---------- Form (compact) ---------- */
.form-card { scroll-margin-top: 8px; }
.two-col { display: flex; gap: 10px; }
.two-col label { flex: 1; }
form label {
  display: block;
  margin: var(--label-mt) 0 3px;
  font-weight: 600;
  font-size: 0.88rem;
}
/* Required marker sits inline right after the label/legend TEXT (never under the input). */
.lbl { display: inline-flex; align-items: baseline; gap: 2px; }
.req { color: var(--danger); font-weight: 700; }
/* "all fields required" helper line at the top of the form */
.form-allreq {
  margin: 0 0 10px; font-size: 0.78rem; font-weight: 600; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
input[type=text], input[type=tel], input[type=number] {
  width: 100%;
  padding: var(--field-py) 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
  background: #fbfcfd;
  transition: border-color .15s;
}
input:focus { outline: none; border-color: var(--accent); }
input.invalid { border-color: var(--danger); background: #fff6f6; }
input[type=tel] { text-align: right; }

fieldset.vehicle {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  margin: 10px 0 4px;
  padding: 7px 12px;
  display: flex;
  gap: 18px;
  align-items: center;
}
fieldset.vehicle legend { font-weight: 600; padding: 0 6px; font-size: 0.88rem; }
.radio { display: flex; align-items: center; gap: 6px; font-weight: 500; margin: 0; }
.radio input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Honeypot — display:none so autofill/password managers skip it (avoids
   false-positive drops of real users), while bots that fill all fields trip it. */
.hp { display: none; }

.form-note { font-size: 0.76rem; color: var(--muted); text-align: center; margin: 8px 0 0; }
.vehicle-note { font-size: 0.76rem; color: var(--muted); margin: 5px 2px 0; text-align: start; }
.vehicle-note::first-letter { color: var(--danger); }

/* ---------- CTA (orange accent, compact) ---------- */
.cta {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 11px;
  padding: var(--cta-py) 18px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  margin-top: 10px;
  transition: filter .15s, transform .05s;
}
.cta:hover { filter: brightness(1.05); }
.cta:active { transform: scale(0.99); }
.cta:disabled { opacity: 0.6; cursor: not-allowed; }
.cta-hero { max-width: 300px; margin: 6px auto 0; background: #fff; color: var(--primary); }

/* Secondary "continue without details" — a refined outline pill. Clearly
   tappable and intentional, but visually subordinate to the orange submit. */
.ghost-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin: var(--btn-mt) auto 0; min-height: 44px; padding: 10px 20px;
  background: #fff; color: var(--primary);
  border: 1.5px solid color-mix(in srgb, var(--primary) 26%, #fff);
  border-radius: 999px; font-family: inherit; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; text-decoration: none; box-shadow: 0 2px 8px rgba(20,30,50,0.06);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}
/* center the block-level pill under the form */
main > .ghost-btn { display: flex; width: fit-content; }
/* An explicit `display` beats the UA's [hidden]{display:none}, so el.hidden=true
   silently fails on these. Restore it — globally, so it can't regress per-element. */
[hidden] { display: none !important; }
.ghost-btn__chev {   /* RTL chevron pointing to the reading direction (left) */
  width: 16px; height: 16px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314395e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.2s ease;
}
.ghost-btn:hover {
  color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, #fff);
  border-color: color-mix(in srgb, var(--primary) 45%, #fff);
  box-shadow: 0 4px 12px rgba(20,30,50,0.10);
}
.ghost-btn:hover .ghost-btn__chev { transform: translateX(-3px); }
.ghost-btn:active { transform: translateY(1px); box-shadow: 0 1px 5px rgba(20,30,50,0.08); }
.ghost-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, #fff); outline-offset: 2px; }

/* Video cue — a friendly line that invites scrolling down to the explainer.
   The bouncing down-arrow signals "the video is below". On-brand, subordinate. */
.video-cue {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: fit-content; margin: var(--btn-mt) auto 2px; min-height: 44px; padding: 8px 18px;
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff);
  color: color-mix(in srgb, var(--accent) 62%, #000);
  font-family: inherit; font-size: 0.87rem; font-weight: 700; cursor: pointer;
  border-radius: 999px; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.video-cue__film {   /* clapperboard / play glyph (SVG, not emoji) */
  width: 18px; height: 18px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5811f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='2.5'/%3E%3Cpath d='m10 8 5 4-5 4z' fill='%23f5811f' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
.video-cue__arrow {   /* bouncing chevron-down = "scroll to the video" */
  width: 17px; height: 17px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5811f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: videoCueBounce 1.7s ease-in-out infinite;
}
.video-cue:hover {
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  border-color: color-mix(in srgb, var(--accent) 40%, #fff);
}
.video-cue:active { background: color-mix(in srgb, var(--accent) 20%, #fff); }
.video-cue:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, #fff); outline-offset: 2px; }
@keyframes videoCueBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .video-cue__arrow { animation: none; }
}

/* Leave-details CTA at the end of the general-info path */
.gi-cta-card { text-align: center; border: 1.5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, #fff); }
.gi-cta-text { margin: 2px 0 4px; font-weight: 700; font-size: 1rem; }

/* ---------- Explainer: grow inline frame → fullscreen (FLIP in landing.js) ---------- */
/* Shared motion tokens so the grow, the backdrop fade, and the radius flatten
   all move as ONE cohesive, silky gesture. easeOutQuint = luxurious deceleration. */
:root {
  --vid-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vid-open: 580ms;                 /* grow-to-fullscreen */
  --vid-close: 380ms;                /* ~65% of open, snappier exit */
}

/* Dark backdrop that fades in behind the growing video, in sync with the grow. */
.video-backdrop {
  position: fixed; inset: 0; z-index: 998; background: rgba(6,14,26,0.92);
  opacity: 0; transition: opacity var(--vid-open) var(--vid-ease);
}
.video-backdrop[hidden] { display: none; }
.video-backdrop.is-visible { opacity: 1; }
.video-backdrop.is-closing { transition-duration: var(--vid-close); }

/* When promoted, the inline frame-wrap is fixed and fills the viewport (safe-area aware).
   The JS applies an inverse transform first, then clears it so the frame GROWS into place. */
#explainer-frame.is-fullscreen {
  position: fixed !important; z-index: 999; margin: 0 !important;
  max-width: none !important; aspect-ratio: auto !important;
  top: env(safe-area-inset-top, 0px); left: env(safe-area-inset-left, 0px);
  right: env(safe-area-inset-right, 0px); bottom: env(safe-area-inset-bottom, 0px);
  width: auto; height: auto;
  transform-origin: top left;
  overflow: hidden;                  /* clip the iframe to the wrapper's radius during the grow */
  border-radius: 0;                  /* target radius when fullscreen; JS animates from 16px → 0 */
}
/* GPU-only animation: transform + border-radius (radius doesn't reflow). will-change is
   applied by JS only for the animation window, then removed to drop the compositor layer. */
#explainer-frame.is-animating {
  transition: transform var(--vid-open) var(--vid-ease),
              border-radius var(--vid-open) var(--vid-ease);
}
#explainer-frame.is-animating.is-closing {
  transition: transform var(--vid-close) var(--vid-ease),
              border-radius var(--vid-close) var(--vid-ease);
}
#explainer-frame.is-fullscreen iframe { border-radius: inherit; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  #explainer-frame.is-animating, #explainer-frame.is-animating.is-closing { transition: none; }
  .video-backdrop, .video-backdrop.is-closing { transition: none; }
}

/* Close (×) — top-left, appears once fullscreen. */
.video-close {
  position: fixed; z-index: 1001;
  top: calc(env(safe-area-inset-top,0px) + 12px);
  left: calc(env(safe-area-inset-left,0px) + 12px);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.45);
  color: #fff; display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(6px); opacity: 0;
  transition: background 0.2s ease, transform 0.15s ease, opacity 0.3s ease;
}
.video-close[hidden] { display: none; }
.video-close.is-visible { opacity: 1; }
.video-close svg { width: 22px; height: 22px; }
.video-close:hover { background: var(--accent); border-color: transparent; }
.video-close:active { transform: scale(0.92); }
.video-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Result ---------- */
.result {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  text-align: center;
  font-size: 1.05rem;
}
.result.ok { background: #e8f8f0; border: 1px solid #b7e6cd; color: #12603f; }
.result.warn { background: #fff6e6; border: 1px solid #ffd98a; color: #7a5200; }
.result.err { background: #fdecee; border: 1px solid #f6b8bf; color: #8a2530; }
.result .big { font-size: 1.25rem; font-weight: 700; display: block; margin-bottom: 6px; }
/* Green check badge for the "you passed the check" confirmation. */
.ok-check {
  display: inline-block; vertical-align: -3px; width: 22px; height: 22px;
  margin-inline-end: 7px; border-radius: 50%; background: #1ea362;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 14px 14px; background-position: center; background-repeat: no-repeat;
  box-shadow: 0 2px 8px -2px rgba(30,163,98,0.55);
}

/* ---------- Matched-lead choice (book meeting vs. human call-back) ---------- */
.proceed-choice { padding: 16px 14px; text-align: center; }
.proceed-choice__q { margin: 2px 0 12px; font-weight: 800; font-size: 1.02rem; color: var(--primary); }
.proceed-choice .cta {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: right;
  padding: 13px 16px; margin-bottom: 10px; border-radius: 14px;
}
.proceed-choice .cta:last-child { margin-bottom: 0; }
.proceed-choice .pc-emoji { font-size: 1.5rem; flex: 0 0 auto; line-height: 1; }
.proceed-choice .pc-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.proceed-choice .pc-txt b { font-size: 1.02rem; font-weight: 800; }
.proceed-choice .pc-txt small { font-size: 0.8rem; font-weight: 500; opacity: 0.9; }
/* primary = book; secondary/ghost = human call-back */
.proceed-choice__book { background: linear-gradient(135deg, #23bd6a, #14a257);
  box-shadow: 0 6px 18px -6px rgba(20,162,87,0.55); color: #fff; }
.proceed-choice__rep { background: #fff; color: var(--primary);
  border: 1.6px solid color-mix(in srgb, var(--primary) 32%, #fff); box-shadow: var(--shadow); }
.proceed-choice__rep .pc-txt small { color: var(--muted); opacity: 1; }
.proceed-choice .cta:active { transform: translateY(1px); }

/* ---------- Footer / error ---------- */
.noscript-banner { background: #fff3cd; color: #7a5200; text-align: center; padding: 12px; font-weight: 600; }
footer { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 20px; }
.error-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.error-page .card { text-align: center; max-width: 420px; }

.spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px;
}
.spinner-dark {
  display: inline-block; width: 18px; height: 18px;
  border: 2.5px solid rgba(20,30,50,.15); border-top-color: var(--primary);
  border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Booking flow ---------- */
.booking-card { border-color: var(--primary); }
.bk-step { margin-top: 6px; }
.bk-step p { margin-top: 0; }
#otp-code {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--line);
  border-radius: 12px; font-size: 1.4rem; text-align: center; letter-spacing: 8px;
  font-family: inherit; direction: ltr;
}
.linkbtn {
  display: block; margin: 12px auto 0; background: none; border: none;
  color: var(--primary); font-size: 0.95rem; cursor: pointer; text-decoration: underline;
}
.linkbtn:disabled { color: var(--muted); cursor: default; text-decoration: none; }

.slot-day { margin-bottom: 14px; }
.slot-day-label { font-weight: 700; margin-bottom: 6px; }
.slot-times { display: flex; flex-wrap: wrap; gap: 8px; }
.slot-btn {
  padding: 9px 16px; border: 1.5px solid var(--line); border-radius: 10px;
  background: #fbfcfd; font-size: 1rem; font-family: inherit; cursor: pointer;
  direction: ltr; transition: border-color .12s, background .12s;
}
.slot-btn:hover { border-color: var(--primary); }
.slot-btn.sel { background: var(--primary); color: #fff; border-color: var(--primary); }
#book-btn { margin-top: 18px; }

/* ---------- Documents ---------- */
.cta-sm { display: inline-block; width: auto; padding: 10px 18px; font-size: 1rem; }
.docs-intro { font-weight: 600; }
.doc-row { padding: 12px 0; border-top: 1px solid var(--line); }
.doc-row label { font-weight: 600; }
.doc-row input[type=file] { display: block; margin: 8px 0; font-size: 0.95rem; }
.doc-status { display: inline-block; margin-inline-start: 10px; font-size: 0.9rem; }
.doc-status.ok { color: #12603f; font-weight: 700; }
.doc-status.err { color: var(--danger); }
.docs-consent { font-size: 0.8rem; color: var(--muted); margin: 10px 0 0; }
.docs-done { margin-top: 12px; font-weight: 700; color: #12603f; }

/* ---------- Chat ---------- */
.chat-card { border-color: var(--primary); }
.chat-log { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.chat-msg { max-width: 85%; padding: 9px 13px; border-radius: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.chat-msg.user { align-self: flex-start; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.bot { align-self: flex-end; background: #eef1f4; color: var(--ink); border-bottom-left-radius: 4px; }
.chat-msg.typing { color: var(--muted); letter-spacing: 3px; }
.chat-input { display: flex; gap: 8px; }
.chat-input input { flex: 1; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 1rem; font-family: inherit; }
.chat-input input:focus { outline: none; border-color: var(--primary); }


/* ============================================================
   Fit-to-viewport — keep the fold (hero -> "watch the video")
   on ONE screen for every device. fitFold() (inline in the page)
   adds a single .cmp-1/-2/-3 on <body> until the fold fits;
   @media(max-height) is the no-JS fallback. Only vertical rhythm
   and headline sizes shrink -- width stays full, nothing is scaled.
   ============================================================ */
.cmp-1 { --hero-py:12px; --hero-h1:1.2rem; --sal-mt:10px; --sal-py:8px; --sal-main:1.46rem;
  --perks-mt:10px; --trust-mt:8px; --main-pt:8px; --card-py:12px; --card-my:8px;
  --label-mt:6px; --field-py:9px; --cta-py:11px; --btn-mt:9px; }
.cmp-2 { --hero-py:9px; --hero-h1:1.12rem; --hero-sub:0.8rem; --sal-mt:8px; --sal-py:6px; --sal-main:1.3rem;
  --perks-mt:8px; --trust-mt:6px; --main-pt:6px; --card-py:10px; --card-my:7px;
  --label-mt:5px; --field-py:8px; --cta-py:10px; --btn-mt:7px; }
.cmp-3 { --hero-py:7px; --hero-h1:1.04rem; --hero-sub:0.76rem; --sal-mt:6px; --sal-py:5px; --sal-main:1.2rem;
  --perks-mt:6px; --trust-mt:5px; --main-pt:4px; --card-py:9px; --card-my:6px;
  --label-mt:4px; --field-py:7px; --cta-py:9px; --btn-mt:6px; }
.cmp-2 fieldset.vehicle, .cmp-3 fieldset.vehicle { margin: 6px 0 2px; padding: 5px 12px; }
.cmp-2 .form-note, .cmp-3 .form-note { margin-top: 5px; }
.cmp-2 .hero .subtitle, .cmp-3 .hero .subtitle { margin-top: 3px; }
.cmp-3 .perks { gap: 5px; }
.cmp-3 .perks .perk { padding: 5px 9px; font-size: 0.72rem; }

/* No-JS fallback: compress by raw viewport height. */
@media (max-height: 750px) { body { --hero-py:12px; --hero-h1:1.2rem; --sal-mt:10px; --sal-py:8px; --sal-main:1.46rem;
  --perks-mt:10px; --trust-mt:8px; --main-pt:8px; --card-py:12px; --card-my:8px; --label-mt:6px; --field-py:9px; --cta-py:11px; --btn-mt:9px; } }
@media (max-height: 670px) { body { --hero-py:9px; --hero-h1:1.12rem; --hero-sub:0.8rem; --sal-mt:8px; --sal-py:6px; --sal-main:1.3rem;
  --perks-mt:8px; --trust-mt:6px; --main-pt:6px; --card-py:10px; --card-my:7px; --label-mt:5px; --field-py:8px; --cta-py:10px; --btn-mt:7px; } }
@media (max-height: 600px) { body { --hero-py:7px; --hero-h1:1.04rem; --sal-main:1.2rem; --main-pt:4px; --card-py:9px; --card-my:6px; --label-mt:4px; --field-py:7px; --cta-py:9px; --btn-mt:6px; } }
/* very narrow width: keep the salary figure from overflowing */
@media (max-width: 360px) { :root { --sal-main:1.42rem; } .hero .salary-line { padding-left:18px; padding-right:18px; } }

/* Lower the fold floor further at the tightest level so SE-class phones
   (with browser chrome visible) still fit hero -> "watch video". */
.cmp-2 .card h2, .cmp-2 .form-card h2, .cmp-3 .card h2, .cmp-3 .form-card h2 { margin-bottom: 5px; }
.cmp-3 .card h2, .cmp-3 .form-card h2 { font-size: 1.02rem; }
.cmp-2 .cta, .cmp-3 .cta { margin-top: 7px; }
.cmp-3 .cta { margin-top: 6px; }
/* NOTE: the tap CTAs (#skip-form, #watch-video) MUST stay >=44px (touch-target a11y).
   Reclaim fold space from their vertical PADDING/margins, never their min-height. */
.cmp-3 .ghost-btn, .cmp-3 .video-cue { padding-top: 8px; padding-bottom: 8px; }
.cmp-3 .video-cue { margin-top: var(--btn-mt); margin-bottom: 0; }
.cmp-3 .salary-eyebrow { font-size: 0.64rem; }
.cmp-3 .salary-sub { font-size: 0.72rem; }

/* --- Horizontal fit: never overflow sideways on narrow phones. The two-col
   (city + age) row is the culprit -- flex items default to min-width:auto and
   won't shrink below each input's intrinsic ~170px, overflowing <400px screens. --- */
html, body { overflow-x: hidden; }
.two-col { min-width: 0; }
.two-col label { min-width: 0; }
form input[type=text], form input[type=tel], form input[type=number] { min-width: 0; }
fieldset.vehicle { flex-wrap: wrap; min-width: 0; }

/* Deeper levels for very short / very narrow screens (JS escalates to these
   only when cmp-3 still overflows). They progressively drop non-essential hero
   bits so the form + CTAs always stay on-screen. */
.cmp-4, .cmp-5 { --hero-py:6px; --hero-h1:1.02rem; --hero-sub:0.74rem; --sal-mt:5px; --sal-py:4px; --sal-main:1.14rem;
  --perks-mt:5px; --trust-mt:4px; --main-pt:3px; --card-py:8px; --card-my:5px;
  --label-mt:3px; --field-py:6px; --cta-py:8px; --btn-mt:5px; }
.cmp-5 { --hero-py:5px; --sal-main:1.08rem; --card-py:7px; --card-my:4px; --field-py:5px; --cta-py:7px; }
.cmp-4 .hero .hero-trust, .cmp-5 .hero .hero-trust { display: none; }
.cmp-4 .salary-sub, .cmp-5 .salary-sub { display: none; }
.cmp-5 .hero .subtitle { display: none; }
.cmp-5 .perks { display: none; }
.cmp-4 .card h2, .cmp-4 .form-card h2, .cmp-5 .card h2, .cmp-5 .form-card h2 { font-size: 1rem; margin-bottom: 4px; }
/* Keep the form heading on a single line even in the compact density levels. */
.cmp-3 .form-card h2, .cmp-4 .form-card h2, .cmp-5 .form-card h2 { font-size: clamp(0.62rem, 3.3vw, 1rem); }
.cmp-4 .cta, .cmp-5 .cta { margin-top: 6px; }
/* Keep >=44px tap targets even at the tightest levels; trim padding instead. */
.cmp-4 .ghost-btn, .cmp-4 .video-cue, .cmp-5 .ghost-btn, .cmp-5 .video-cue {
  padding-top: 7px; padding-bottom: 7px; margin-top: var(--btn-mt); margin-bottom: 0;
}
.cmp-4 .form-note, .cmp-5 .form-note { margin-top: 4px; font-size: 0.72rem; }
.cmp-4 fieldset.vehicle, .cmp-5 fieldset.vehicle { margin: 5px 0 2px; padding: 4px 12px; }
.cmp-4 .perks { gap: 4px; }
.cmp-4 .perks .perk { padding: 4px 8px; font-size: 0.68rem; }