/* Hired in 90 funnel. Tokens and components copied from the app (public/index.html) so both look like one product. */
:root {
  --logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='9' fill='%231570ef'/%3E%3Cpath d='M10 7.5h8.5l4.5 4.5v12a1.5 1.5 0 0 1-1.5 1.5H10a1.5 1.5 0 0 1-1.5-1.5V9A1.5 1.5 0 0 1 10 7.5z' fill='%23fff'/%3E%3Cpath d='M18.5 7.5v3a1.5 1.5 0 0 0 1.5 1.5h3z' fill='%23b9d4fb'/%3E%3Crect x='11.5' y='11.6' width='5' height='1.8' rx='.9' fill='%23b9d4fb'/%3E%3Crect x='11.5' y='15.1' width='8' height='1.8' rx='.9' fill='%23b9d4fb'/%3E%3Cpath d='M17.5 17.6c.4 2.3 1.3 3.2 3.6 3.6-2.3.4-3.2 1.3-3.6 3.6-.4-2.3-1.3-3.2-3.6-3.6 2.3-.4 3.2-1.3 3.6-3.6z' fill='%231570ef'/%3E%3C/svg%3E");
  --bg: #f6f8fc;
  --surface: #ffffff;
  --ink: #0f1a2e;
  --ink-2: #475467;
  --ink-3: #8a94a6;
  --line: #e7ecf3;
  --line-strong: #d6deea;
  --brand: #1570ef;
  --brand-2: #175cd3;
  --brand-soft: #eff6ff;
  --green: #067647; --green-bg: #e9f7ef;
  --red: #b42318; --red-bg: #fdeeec;
  --shadow: 0 1px 2px rgba(16,24,40,.05);
  --shadow-lift: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -10px rgba(16,24,40,.16);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, select { font: inherit; }
a { color: inherit; }
.wrap { max-width: 1600px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

/* nav */
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { font-weight: 800; font-size: 22px; letter-spacing: -.03em; display: inline-flex; align-items: center; white-space: pre; text-decoration: none; }
.logo::before { content: ""; margin-right: 9px; width: 1.3em; height: 1.3em; background: var(--logo) center/contain no-repeat; flex: none; }
.logo span { color: var(--brand); }
.nav-note { color: var(--ink-3); font-size: 14.5px; }
@media (max-width: 600px) { .nav-note { display: none; } }

/* hero */
.hero { text-align: center; padding: 28px 0 8px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--brand-2); background: var(--brand-soft); border: 1px solid #d3e4fd; padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; }
h1 { font-size: clamp(34px, 5.2vw, 64px); line-height: 1.05; letter-spacing: -.04em; font-weight: 800; margin: 0 auto 16px; max-width: 1100px; text-wrap: balance; }
h1 em { font-style: normal; color: var(--brand); }
.sub { color: var(--ink-2); font-size: 18px; margin: 0 auto; max-width: 680px; text-wrap: balance; }

/* progress (same as the app) */
.progress { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 26px 0 26px; flex-wrap: wrap; }
.p-step { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-3); font-weight: 500; }
.p-step i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface); }
.p-step.on { color: var(--ink); }
.p-step.on i { border-color: var(--brand); background: var(--brand); color: #fff; }
.p-step.done { color: var(--ink-2); }
.p-step.done i { border-color: var(--brand); color: var(--brand); }
.p-sep { width: 28px; height: 1.5px; background: var(--line-strong); }

/* cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.pane { padding: 36px 40px; }
@media (max-width: 600px) { .pane { padding: 22px 18px; } }
.pane-head { margin-bottom: 24px; }
.pane-head h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.pane-head p { margin: 4px 0 0; color: var(--ink-3); font-size: 15.5px; }

/* video page: video left, offer right */
.watch { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 28px; align-items: start; margin-bottom: 56px; }
@media (max-width: 980px) { .watch { grid-template-columns: 1fr; } }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0f1a2e; display: grid; place-items: center; box-shadow: var(--shadow-lift); }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .ph { text-align: center; color: #c7d2e3; font-size: 15px; }
.video .ph b { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 10px rgba(21,112,239,.22); }
.video .ph svg { width: 28px; height: 28px; fill: #fff; margin-left: 4px; }
.side { display: grid; gap: 16px; }
.side .pane { padding: 26px 28px; }
.side h3 { margin: 0 0 12px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ticks li { display: flex; gap: 11px; font-size: 15.5px; color: var(--ink-2); line-height: 1.45; }
.ticks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='%231570ef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }
.ticks b { color: var(--ink); font-weight: 600; }
.guarantee { border-color: #c9dcfb; background: linear-gradient(180deg, #f8fbff, #fff); }
.guarantee .seal { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--brand-2); margin-bottom: 8px; }
.guarantee .seal svg { width: 18px; height: 18px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.guarantee p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.guarantee p strong { color: var(--ink); }
.cta { display: grid; gap: 8px; }
.cta .btn { justify-content: center; width: 100%; }
.cta .hint { text-align: center; }

/* how it works (same pattern as the app's .how) */
.section { margin-bottom: 64px; }
.section-head { text-align: center; margin-bottom: 26px; }
.section-head h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.035em; }
.section-head p { margin: 6px auto 0; color: var(--ink-2); font-size: 17px; max-width: 640px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
@media (max-width: 980px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.steps .card { padding: 24px; counter-increment: s; }
.steps .card::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 14px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; }
.steps h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.steps p { margin: 0; color: var(--ink-2); font-size: 15px; }
.closer { text-align: center; padding: 44px 24px; }
.closer h2 { margin: 0 0 8px; font-size: clamp(24px, 2.8vw, 32px); font-weight: 800; letter-spacing: -.03em; }
.closer p { margin: 0 auto 22px; color: var(--ink-2); max-width: 600px; }

/* form */
.form-wrap { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 28px; align-items: start; margin-bottom: 64px; }
@media (max-width: 980px) { .form-wrap { grid-template-columns: 1fr; } }
.group { display: grid; gap: 18px; margin-bottom: 30px; }
.group-head { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.group-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
form label, form .q { display: block; font-size: 15px; font-weight: 600; }
form label small { display: block; font-weight: 400; color: var(--ink-3); font-size: 13.5px; margin: 1px 0 0; }
form label > input, form label > select, form label > textarea { margin-top: 7px; }
textarea, input[type=text], input[type=email], input[type=tel], select { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font: 15.5px/1.6 Inter, system-ui, sans-serif; padding: 11px 14px; outline: none; resize: vertical; transition: border-color .15s, box-shadow .15s; }
select { appearance: none; padding-right: 38px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%238a94a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center/18px no-repeat; }
textarea:focus, input:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(21,112,239,.1); }
textarea::placeholder, input::placeholder { color: #9aa4b5; }
textarea { min-height: 110px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.invalid { border-color: var(--red) !important; box-shadow: 0 0 0 4px rgba(180,35,24,.08) !important; }

/* option cards (same as the app's .mode) */
.mode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 7px; }
.mode.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .mode, .mode.two { grid-template-columns: 1fr; } }
.mode button { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.mode button:hover { border-color: #b9c5d6; }
.mode button.on { border-color: var(--brand); background: #f8fbff; box-shadow: 0 0 0 1px var(--brand); }
.mode svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--ink-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mode button.on svg { stroke: var(--brand); }
.mode b { display: block; font-size: 15px; color: var(--ink); font-weight: 600; }
.mode small { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 1px; font-weight: 400; }
.mode.invalid { box-shadow: none !important; border: 0 !important; }
.mode.invalid button { border-color: var(--red); }

/* buttons */
.btn { appearance: none; border: 0; cursor: pointer; font-weight: 600; font-size: 15.5px; border-radius: 10px; padding: 12px 20px; display: inline-flex; align-items: center; gap: 8px; transition: background .15s, opacity .15s, border-color .15s; white-space: nowrap; text-decoration: none; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); }
.btn-lg { font-size: 17px; padding: 15px 26px; }
.btn-ghost { background: none; color: var(--ink-2); padding: 12px 10px; }
.btn-ghost:hover { color: var(--ink); }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--line); }
.hint { color: var(--ink-3); font-size: 14.5px; }
.err { color: var(--red); font-size: 14.5px; font-weight: 500; }

/* booking */
.calendar { min-height: 640px; display: grid; place-items: center; border: 1.5px dashed var(--line-strong); border-radius: 10px; background: #fbfcfe; color: var(--ink-3); text-align: center; padding: 24px; }
.calendar iframe { width: 100%; min-height: 700px; border: 0; }
.calendar svg { width: 40px; height: 40px; fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; }

/* thank you */
.done-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--green-bg); }
.done-mark svg { width: 30px; height: 30px; fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.legal { color: var(--ink-3); font-size: 13px; text-align: center; padding: 26px 0 40px; border-top: 1px solid var(--line); }