:root { --accent: #1a3a5c; --accent-2: #2e6da4; --bg: #f4f6f9; --card: #fff; --text: #1f2933; --muted: #5f6b7a; --line: #dde3ea; --ok: #1b7f4b; --warn: #b8860b; --bad: #b3261e; }
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.45; }
.top { background: var(--accent); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 12px 28px; }
.top .brand { color: #fff; font-weight: 700; font-size: 20px; text-decoration: none; }
.top nav a { color: #fff; opacity: .85; margin-left: 20px; text-decoration: none; }
.top nav a:hover { opacity: 1; }
main { max-width: 1240px; margin: 0 auto; padding: 28px 32px 40px; }
h1 { font-size: 30px; margin: 0 0 6px; color: var(--accent); }
h2 { font-size: 20px; margin: 22px 0 8px; color: var(--accent); }
h3 { font-size: 16px; margin: 16px 0 6px; }
.lead { color: var(--muted); font-size: 17px; margin: 0 0 22px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px; margin-bottom: 18px; }
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 20px 0; }
.door { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 26px 22px; cursor: pointer; transition: .15s; }
.door:hover { border-color: var(--accent-2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.door .big { font-size: 34px; margin-bottom: 8px; }
.door h3 { margin: 0 0 6px; font-size: 19px; color: var(--accent); }
.door p { margin: 0; color: var(--muted); }
button, .btn { font: inherit; background: var(--accent); color: #fff; border: 0; border-radius: 9px; padding: 11px 20px; cursor: pointer; font-weight: 600; text-decoration: none; display: inline-block; }
button:hover, .btn:hover { background: var(--accent-2); }
button.secondary, .btn.secondary { background: #fff; color: var(--accent); border: 1.5px solid var(--accent); }
button.ghost { background: transparent; color: var(--muted); border: 0; padding: 8px 10px; }
button.small { padding: 6px 12px; font-size: 14px; }
button.danger { background: var(--bad); }
button:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
label { display: block; font-weight: 600; margin: 12px 0 4px; font-size: 14px; }
input[type=text], input[type=email], input[type=month], input[type=password], input[type=color], select, textarea { font: inherit; width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; }
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(46,109,164,.15); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 18px; }
.help { color: var(--muted); font-size: 15px; margin: 2px 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.progress { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin: 10px 0 20px; }
.progress > div { height: 100%; background: var(--accent-2); transition: width .3s; }
.question { font-size: 24px; font-weight: 600; margin: 8px 0 6px; }
.job { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 10px 0; background: #fbfcfd; }
.job .spread h3 { margin: 0; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pill.Excellent { background: #dff5e7; color: var(--ok); }
.pill.Good { background: #e6effa; color: var(--accent-2); }
.pill.Fair { background: #fdf2d9; color: var(--warn); }
.notice { background: #fff8e1; border: 1px solid #f3e2a3; border-radius: 10px; padding: 12px 16px; margin: 12px 0; }
.notice.ok { background: #e9f7ee; border-color: #bfe4cb; }
.notice.bad { background: #fdecea; border-color: #f3b9b4; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); gap: 12px; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.style { background: #fff; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; transition: .15s; }
.style:hover { border-color: var(--accent-2); }
.style.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,58,92,.2); }
.thumb { width: 100%; aspect-ratio: 210/297; overflow: hidden; background: #eee; position: relative; }
.thumb iframe { width: 794px; height: 1123px; border: 0; transform-origin: 0 0; position: absolute; left: 0; top: 0; pointer-events: none; }
.style .meta { padding: 10px 12px; }
.style .meta b { display: block; margin-bottom: 2px; }
.style .meta p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.preview { width: 100%; height: 1150px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tabs button { background: transparent; color: var(--muted); border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 10px 14px; }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.spinner { display: inline-block; width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #222; color: #fff; padding: 12px 20px; border-radius: 10px; opacity: 0; transition: .3s; pointer-events: none; max-width: 90%; }
#toast.show { opacity: 1; }
.drop { border: 2px dashed var(--accent-2); border-radius: 14px; padding: 40px; text-align: center; background: #fbfdff; cursor: pointer; }
.drop.over { background: #eaf2fb; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: #eef2f7; border-radius: 999px; padding: 4px 10px; font-size: 14px; }
.chip button { background: transparent; color: var(--bad); border: 0; padding: 0 0 0 6px; font-size: 14px; }
@media (max-width: 860px) { .doors, .gallery { grid-template-columns: 1fr 1fr; } .grid2, .grid3 { grid-template-columns: 1fr; } }

.stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; }
.stage { background: #fff; border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; }
.stage.now { border-color: var(--accent); color: var(--accent); } .stage.done { background: #e9f7ee; border-color: #bfe4cb; color: var(--ok); }
.options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.opt { background: #fff; color: var(--text); border: 2px solid var(--line); font-weight: 500; }
.opt.on { border-color: var(--accent); background: #e6effa; color: var(--accent); }
.optgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.popt { border: 2px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; } .popt.on { border-color: var(--accent); background: #f3f7fc; } .popt p { margin: 6px 0 0; font-size: 14px; }
.steps { padding-left: 20px; } .steps li { margin-bottom: 6px; }
.narrow { max-width: 520px; margin: 20px auto; }
.consent { background: #f4f6f9; border-radius: 10px; padding: 12px 14px; margin-top: 14px; font-size: 14px; }
.tick { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin: 0; font-weight: 500; }
.spinner.dark { border-color: rgba(0,0,0,.2); border-top-color: #333; }
#navUser a { margin-left: 16px; }
@media (max-width: 860px) { .stages, .optgrid { grid-template-columns: 1fr 1fr; } }

/* marketing */
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; padding: 28px 0 18px; }
.display { font-size: 48px; line-height: 1.05; margin: 0 0 14px; color: var(--accent); letter-spacing: -.5px; }
.display span { color: var(--accent-2); font-weight: 600; font-size: 30px; display: block; margin-top: 8px; }
.lead.big { font-size: 19px; }
.cta { font-size: 17px; padding: 14px 24px; border-radius: 12px; }
.cta.ghost { background: #fff; color: var(--accent); border: 2px solid var(--accent); }
.hero-art { aspect-ratio: 210/260; overflow: hidden; border-radius: 14px; box-shadow: 0 20px 50px rgba(26,58,92,.18); background: #fff; position: relative; transform: rotate(-1.5deg); }
.hero-art iframe { width: 794px; height: 1123px; border: 0; transform: scale(.55); transform-origin: 0 0; position: absolute; left: 0; top: 0; pointer-events: none; }
.hero-art { max-width: 540px; justify-self: end; width: 100%; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 26px 0; }
.step { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.step .num { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.step h3 { margin: 0 0 6px; font-size: 18px; color: var(--accent); }
.step p { margin: 0; color: var(--muted); }
.centre { text-align: center; }
.showcase { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 14px 0 6px; }
.thumb-card { cursor: pointer; text-align: center; font-size: 13px; }
.thumb-card .thumb { border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.06); margin-bottom: 6px; }
.band-dark { background: var(--accent); color: #fff; border-radius: 18px; padding: 28px; margin: 26px 0; }
.band-dark h2 { color: #fff; margin-top: 0; } .band-dark p { opacity: .9; }
.sectors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.sector { display: block; text-decoration: none; color: #fff; border-radius: 14px; padding: 16px; background: linear-gradient(135deg, var(--c1), var(--c2)); min-height: 120px; transition: .15s; }
.sector:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.sector b { display: block; font-size: 17px; margin-top: 6px; text-shadow: 0 1px 2px rgba(0,0,0,.25); } .sector span { font-size: 13px; opacity: .92; }
.sectors.light .sector { color: #fff; }
.boards { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px 0; } .boards.left { justify-content: flex-start; }
.board { background: #fff; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 14px; font-weight: 700; color: var(--accent); }
.trust { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; margin: 26px 0; }
.trust > div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.trust h2 { margin-top: 0; } .trust ul { padding-left: 18px; }
details { border-bottom: 1px solid var(--line); padding: 8px 0; } summary { cursor: pointer; font-weight: 600; }
.foot { display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; padding: 18px 4px; border-top: 1px solid var(--line); margin-top: 20px; }
.sector-hero { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; color: #fff; border-radius: 18px; padding: 36px; background: linear-gradient(120deg, var(--c1), var(--c2)); margin-bottom: 8px; }
.sector-hero .display, .sector-hero .lead { color: #fff; } .sector-hero .lead { opacity: .95; }
.sector-hero .kicker { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; opacity: .85; margin: 0; }
.sector-hero .motif.big svg { width: 140px; height: 140px; }
.sector-hero .cta { background: #fff; color: #1f2933; } .sector-hero .cta.ghost { background: transparent; color: #fff; border-color: #fff; }
@media (max-width: 900px) { .hero, .steps3, .trust, .sector-hero { grid-template-columns: 1fr; } .showcase { grid-template-columns: repeat(3, 1fr); } .sectors { grid-template-columns: 1fr 1fr; } .display { font-size: 36px; } .hero-art { display: none; } }

.voicebar { padding: 14px 18px; margin-bottom: 14px; background: #eef3f9; }
.logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.logo-opt { border: 2px solid var(--line); border-radius: 12px; padding: 16px; text-align: center; cursor: pointer; background: #fff; }
.logo-opt svg { width: 120px; height: 120px; } .logo-opt span { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; text-transform: capitalize; }
.logo-opt.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,58,92,.2); }
.script { background: #fff8e1; border-left: 4px solid #e8b400; border-radius: 8px; padding: 12px 16px; font-size: 20px; line-height: 1.5; } .script p { margin: 0 0 4px; }
.vid-wrap video { width: 100%; max-width: 560px; border-radius: 12px; background: #000; }
.diff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0; }
.diff > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; } .diff b { color: var(--accent); display: block; margin-bottom: 4px; }
.basics { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .basics span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 14px; }
@media (max-width: 860px) { .logos, .diff { grid-template-columns: 1fr; } }

.teleprompter { background: #111; color: #fff; border-radius: 14px 14px 0 0; padding: 16px 22px 8px; max-width: 760px; }
.tp-text { font-size: 26px; line-height: 1.35; font-weight: 600; } .tp-text p { margin: 0 0 6px; }
.teleprompter details { color: #bbb; font-size: 13px; margin-top: 6px; } .teleprompter textarea { background: #222; color: #fff; border-color: #444; }
.vid-wrap { position: relative; max-width: 760px; } .vid-wrap video { width: 100%; max-width: 760px; border-radius: 0 0 14px 14px; background: #000; display: block; }
.rec-dot { position: absolute; top: 10px; left: 12px; background: rgba(200,0,0,.85); color: #fff; font-weight: 700; padding: 4px 10px; border-radius: 6px; font-size: 13px; }
.mic { margin-top: 8px; }
.timeline { padding-left: 20px; } .timeline li { margin-bottom: 6px; } .timeline b { color: var(--accent); margin-right: 6px; }
.foot { align-items: flex-start; }

/* progress tiles + motion */
.ptiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 0 0 18px; }
.ptile { background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); transition: .25s; }
.ptile .n { width: 26px; height: 26px; border-radius: 50%; background: var(--line); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.ptile.now { border-color: var(--accent); color: var(--accent); box-shadow: 0 6px 18px rgba(26,58,92,.12); transform: translateY(-2px); } .ptile.now .n { background: var(--accent); }
.ptile.done { color: var(--ok); } .ptile.done .n { background: var(--ok); }
.stages { grid-template-columns: repeat(6, 1fr); } button.stage { font: inherit; text-align: left; cursor: pointer; }
.rv { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; } .rv.in { opacity: 1; transform: none; }
.formpage .qblock { padding: 14px 0; border-bottom: 1px solid var(--line); } .formpage .qblock:last-child { border-bottom: 0; }
.qlabel { font-size: 17px; font-weight: 600; margin: 0 0 4px; } .req { font-size: 11px; color: var(--warn); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-left: 6px; }
.qblock.missing { background: #fff7f5; border-radius: 10px; padding: 14px; box-shadow: inset 0 0 0 2px #f3b9b4; }
.withmic { display: flex; gap: 8px; align-items: flex-start; } .withmic > input, .withmic > textarea { flex: 1; } .withmic .mic { margin: 0; font-size: 18px; padding: 8px; } .mic.live { background: #fdecea; border-radius: 8px; }
.sticky { position: sticky; bottom: 12px; }
.viewer { position: fixed; inset: 0; background: rgba(15,23,42,.92); z-index: 50; display: flex; flex-direction: column; }
.viewer-top { display: flex; gap: 14px; align-items: center; padding: 12px 20px; color: #fff; flex-wrap: wrap; } .viewer-top b { font-size: 16px; } .viewer-top .row { margin-left: auto; }
.viewer iframe { flex: 1; width: min(900px, 96vw); margin: 0 auto 16px; border: 0; background: #fff; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.tips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; } .tips span { background: #e9f7ee; color: var(--ok); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.studio { max-width: 760px; display: flex; flex-direction: column; } .studio .tp { background: #111; color: #fff; padding: 14px 20px; font-size: 24px; line-height: 1.35; font-weight: 600; } .studio .tp p { margin: 0 0 4px; }
.studio.pos-top-centre .tp { text-align: center; border-radius: 14px 14px 0 0; } .studio.pos-top-left .tp { text-align: left; border-radius: 14px 14px 0 0; } .studio.pos-top-right .tp { text-align: right; border-radius: 14px 14px 0 0; }
.studio.pos-bottom { flex-direction: column-reverse; } .studio.pos-bottom .tp { border-radius: 0 0 14px 14px; text-align: center; } .studio.pos-bottom .vid-wrap video { border-radius: 14px 14px 0 0; }
@media (max-width: 900px) { .ptiles, .stages { grid-template-columns: repeat(3, 1fr); } .viewer iframe { width: 96vw; } }

.big-h { font-size: 34px; margin: 10px 0 18px; }
.tiles3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tile { background: #fff; border: 2px solid var(--line); border-radius: 22px; padding: 34px 28px 30px; cursor: pointer; transition: .2s; min-height: 300px; display: flex; flex-direction: column; }
.tile:hover { border-color: var(--accent-2); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(26,58,92,.12); }
.tile-ico { font-size: 44px; margin-bottom: 10px; } .tile h3 { font-size: 24px; line-height: 1.15; color: var(--accent); margin: 0 0 10px; } .tile p { color: var(--muted); font-size: 16px; margin: 0 0 16px; flex: 1; }
.tile .go { font-weight: 700; color: var(--accent-2); font-size: 17px; }
.why { margin-top: 22px; background: #fff; border-left: 5px solid var(--accent-2); border-radius: 14px; padding: 18px 22px; } .why h3 { margin: 0 0 6px; color: var(--accent); font-size: 20px; } .why p { margin: 0; color: #334155; }
.modal { position: fixed; inset: 0; background: rgba(15,23,42,.6); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-card { background: #fff; border-radius: 18px; padding: 26px 28px; max-width: 560px; width: 100%; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: pop .25s ease; }
@keyframes pop { from { transform: scale(.96); opacity: 0 } to { transform: none; opacity: 1 } }
@media (max-width: 900px) { .tiles3 { grid-template-columns: 1fr; } }

/* date-of-birth takeover */
.modal.takeover { align-items: stretch; padding: 0; background: rgba(15,23,42,.96); overflow: auto; }
.takeover-card { margin: auto; width: min(960px, 94vw); text-align: center; color: #fff; padding: 40px 20px; animation: pop .3s ease; }
.takeover-card .kicker { text-transform: uppercase; letter-spacing: 3px; font-size: 14px; color: #9fe8e0; margin: 0 0 10px; font-weight: 700; }
.huge { font-size: clamp(38px, 6vw, 72px); line-height: 1.02; margin: 0 0 18px; font-weight: 900; letter-spacing: -1px; color: #fff; }
.takeover-card .lead { color: #dbe7f3; }
.takeover-card .bandline { font-size: clamp(20px, 2.6vw, 28px); font-weight: 700; color: #fff; max-width: 820px; margin: 0 auto 22px; line-height: 1.3; }
.dob { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 26px 0 8px; }
.dob input { width: 120px; height: 96px; font-size: 48px; font-weight: 800; text-align: center; border: 3px solid #4a5a73; border-radius: 16px; background: #0f172a; color: #fff; letter-spacing: 2px; }
.dob input:focus { border-color: #36d1c4; box-shadow: 0 0 0 5px rgba(54,209,196,.25); outline: none; }
.dob input#yy { width: 200px; } .dob span { font-size: 48px; color: #4a5a73; font-weight: 300; }
.dob input::placeholder { color: #4a5a73; font-weight: 600; }
.centre-row { justify-content: center; margin-top: 18px; } .takeover-card .ghost { color: #bcd; }
.takeover-card .cta { font-size: 22px; padding: 18px 34px; background: #36d1c4; color: #0f172a; border-radius: 14px; } .takeover-card .cta:disabled { background: #4a5a73; color: #9ab; }
.manifesto { max-width: 820px; margin: 0 auto 10px; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.45; color: #e2e8f0; text-align: center; } .manifesto p { margin: 0 0 12px; } .manifesto b { color: #fff; }
.bandbox { background: #0f172a; color: #fff; border-radius: 16px; padding: 22px 26px; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.3; margin: 0 0 18px; font-weight: 600; } .bandbox b { color: #36d1c4; font-size: 1.3em; }
@media (max-width: 640px) { .dob input { width: 80px; height: 72px; font-size: 32px; } .dob input#yy { width: 140px; } .dob span { font-size: 32px; } }

.tq { color: #fff; font-size: clamp(20px, 2.4vw, 26px); margin: 26px 0 6px; }
.centre-opts { justify-content: center; } .opt.dark { background: #0f172a; color: #e2e8f0; border-color: #4a5a73; font-size: 17px; padding: 12px 18px; } .opt.dark.on { background: #36d1c4; color: #0f172a; border-color: #36d1c4; }
.howbox { max-width: 820px; margin: 0 auto 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 18px 24px; font-size: clamp(17px, 2vw, 22px); line-height: 1.45; color: #e2e8f0; text-align: center; } .howbox p { margin: 0 0 10px; } .howbox b { color: #fff; }

/* start tiles v2 */
.tile { text-align: center; align-items: center; color: #fff; border: 0; min-height: 320px; padding: 36px 28px 30px; }
.tile.t-navy { background: linear-gradient(160deg, #1a3a5c, #0f2a47); } .tile.t-blue { background: linear-gradient(160deg, #2e6da4, #1f4e79); } .tile.t-teal { background: linear-gradient(160deg, #1f9c93, #0f766e); }
.tile h3, .tile p, .tile .go { color: #fff; } .tile p { opacity: .9; } .tile .go { opacity: .95; border-bottom: 2px solid rgba(255,255,255,.6); padding-bottom: 2px; }
.tile h3 { font-size: 28px; margin: 14px 0 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .tile .go { font-size: 17px; }
.tile-svg { width: 96px; height: 96px; } .tile:hover .tile-svg { transform: scale(1.06); transition: .2s; }

/* pinned progress + compact on mobile */
.ptiles { position: sticky; top: 0; z-index: 20; background: var(--bg); padding: 10px 0 8px; margin: -28px 0 14px; }
@media (max-width: 900px) { .ptiles { grid-template-columns: repeat(6, 1fr); gap: 4px; } .ptile { padding: 6px; justify-content: center; } .ptile span:not(.n) { display: none; } .stages { display: none; } }
/* boards */
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.board-grid.small { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.board-card { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 10px; text-align: center; text-decoration: none; color: var(--text); transition: .15s; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.board-card:hover { border-color: var(--accent-2); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(26,58,92,.1); }
.board-card b { color: var(--accent); font-size: 15px; } .board-card span { font-size: 12px; color: var(--muted); }
.board-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: #f4f6f9; padding: 4px; }
.list .board-logo { width: 28px; height: 28px; margin-right: 8px; }
/* design bar */
.designbar { position: sticky; top: 66px; z-index: 15; padding: 12px 16px; }
.design-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; align-items: start; } .design-grid label { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.options.tight { gap: 4px; } .opt.small { padding: 6px 10px; font-size: 13px; }

/* only-we-do tiles v2 */
.diff-tile { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; cursor: pointer; transition: .2s; }
.diff-tile:hover { border-color: var(--accent-2); box-shadow: 0 10px 24px rgba(26,58,92,.08); }
.diff-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .diff-head b { color: var(--accent); font-size: 18px; }
.dicon { width: 40px; height: 40px; flex: 0 0 40px; }
.diff-tile .short { margin: 0 0 8px; color: var(--muted); } .diff-tile .long { display: none; margin: 0 0 8px; color: #334155; line-height: 1.5; }
.diff-tile.open .long { display: block; } .diff-tile .more { color: var(--accent-2); font-weight: 700; font-size: 14px; }

.thumb-card>span{display:block;text-align:center;margin-top:2px}

/* control panel */
.foot .copy { font-weight: 700; color: var(--accent); text-decoration: none; cursor: pointer; }
.admin { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start; }
.admin-side { position: sticky; top: 80px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.admin-side h2 { margin: 0 0 2px; font-size: 18px; }
.admin-side nav { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.admin-side nav a { padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.admin-side nav a.on, .admin-side nav a:hover { background: #eef3fa; color: var(--accent); }
.admin-main h1 { margin-top: 0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 16px; }
.stats > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.stats b { display: block; font-size: 28px; color: var(--accent); }
.stats span { color: var(--muted); font-size: 13px; }
.tbl { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 14px; }
.tbl th, .tbl td { padding: 10px 10px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.tbl th { background: #f6f8fb; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tbl tr.off td { opacity: .55; }
.tbl select, .tbl input { margin: 0; padding: 6px 8px; font-size: 13px; }
.tbl select[data-mode] { min-width: 150px; }
.tbl td:nth-child(5) { min-width: 340px; }
.tbl td:nth-child(3), .tbl td:nth-child(4) { white-space: nowrap; }
.shots { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.shots a { display: block; width: 150px; text-decoration: none; color: var(--muted); font-size: 11px; }
.shots img { width: 150px; height: 100px; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 6px; display: block; margin-bottom: 2px; }
.post-board { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.post-board .acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.post-status { font-size: 13px; margin-top: 6px; }
.bm { display: inline-block; background: #eef3fa; border: 1px dashed var(--accent); border-radius: 8px; padding: 6px 10px; font-weight: 700; color: var(--accent); text-decoration: none; cursor: grab; }
@media (max-width: 860px) { .admin { grid-template-columns: 1fr; } .admin-side { position: static; } .stats { grid-template-columns: repeat(2, 1fr); } .tbl { display: block; overflow-x: auto; } .post-board { grid-template-columns: 1fr; } .post-board .acts { justify-content: flex-start; } }

/* autosave indicator */
.savedot { position: fixed; right: 18px; bottom: 18px; z-index: 60; background: #0b2a4a; color: #fff; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; opacity: 0; transform: translateY(6px); transition: .2s; pointer-events: none; }
.savedot.show { opacity: .92; transform: none; } .savedot.busy { background: #42526e; } .savedot.bad { background: #b42318; }

/* sign-in */
.auth h1 { margin-top: 0; }
.pwwrap { position: relative; }
.pwwrap input { padding-right: 70px; }
.pwwrap .eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; color: var(--accent); border: 0; box-shadow: none; font-size: 13px; font-weight: 700; padding: 6px 8px; margin: 0; }
.code6 { display: flex; gap: 10px; margin: 14px 0 4px; }
.code6 input { width: 52px; height: 62px; text-align: center; font-size: 28px; font-weight: 800; padding: 0; border-radius: 12px; margin: 0; }
.cp-badge { display: inline-block; background: #0b2a4a; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; margin-bottom: 10px; }
.totp { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; margin-top: 12px; }
.totp img { border: 1px solid var(--line); border-radius: 12px; }
/* My CVs */
.mycvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); gap: 16px; }
@media (max-width: 640px) { .mycvs { grid-template-columns: 1fr; } .mycv { grid-template-columns: 90px 1fr; } .mycv .thumb { width: 90px; height: 128px; } }
.mycv { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 14px; margin: 0; }
.mycv .thumb { width: 120px; height: 170px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; position: relative; }
.mycv .thumb iframe { width: 794px; height: 1123px; border: 0; transform-origin: 0 0; pointer-events: none; }
.thumb-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: 13px; }
.tiles3.small-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tiles3.small-tiles .tile { padding: 18px; min-height: 0; cursor: pointer; }
.tiles3.small-tiles .tile svg { width: 40px; height: 40px; }
.tiles3.small-tiles .tile h3 { font-size: 16px; margin: 8px 0 0; }
@media (max-width: 640px) { .code6 input { width: 42px; height: 54px; font-size: 24px; } .small-tiles { grid-template-columns: 1fr; } }

.postall { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: linear-gradient(135deg, #0b2a4a, #14507f); color: #fff; border-radius: 14px; padding: 16px 18px; margin: 4px 0 12px; }
.postall .muted { color: rgba(255,255,255,.8); }
.postall button { background: #fff; color: #0b2a4a; font-weight: 800; white-space: nowrap; }
.logincard { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--line); background: #f7f9fc; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.logincard code { font-size: 15px; background: #fff; border: 1px solid var(--line); padding: 4px 8px; border-radius: 6px; }
@media (max-width: 640px) { .postall { flex-direction: column; align-items: stretch; } }

.actgrid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.actgrid .btn, .actgrid button { margin: 0; }
.mycv .thumb { display: block; }
.acct-card { border: 2px solid #14507f; background: linear-gradient(180deg, #f3f8fd, #fff); }

/* ---------- studio (result page) ---------- */
.cvstudio { display: grid; grid-template-columns: minmax(380px, 44%) 1fr; gap: 32px; align-items: start; margin-top: 8px; }
.studio-cv { position: sticky; top: 92px; }
.paper { position: relative; width: 100%; overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(15,30,60,.06), 0 18px 40px -18px rgba(15,30,60,.35); }
.paper .a4 { position: absolute; left: 0; top: 0; width: 794px; height: 1123px; border: 0; transform-origin: 0 0; background: #fff; }
.dlbar { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.studio-head h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -.01em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip-s { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: #eef2f7; color: #3a4a63; }
.notice.slim { padding: 10px 14px; font-size: 14px; }
.voicebar { display: flex; gap: 8px; align-items: center; margin: 4px 0 14px; }
.voicebar input { flex: 1; margin: 0; }
.voicebar button { white-space: nowrap; margin: 0; }
.studio-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 0; background: #eef2f7; padding: 4px; border-radius: 12px; margin-bottom: 16px; }
.studio-tabs button { flex: 0 0 auto; border-radius: 9px; padding: 8px 12px; font-size: 14px; background: transparent; color: #33445e; border: 0; box-shadow: none; margin: 0; }
.studio-tabs button.active { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(15,30,60,.15); }
.newpill { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: #14b8a6; color: #fff; border-radius: 6px; padding: 1px 5px; margin-left: 3px; vertical-align: 1px; }
.h2s { margin: 0 0 6px; font-size: 19px; }
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 12px; }
.checkitem { display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-weight: 600; box-shadow: none; margin: 0; }
.checkitem:hover { border-color: var(--accent); }
.checkitem .tick-c { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c7d0dd; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 auto; }
.checkitem.done .tick-c { background: #12805c; border-color: #12805c; color: #fff; }
.checkitem .go-s { margin-left: auto; font-size: 13px; color: var(--accent); font-weight: 700; }
@media (max-width: 960px) { .cvstudio { grid-template-columns: 1fr; } .studio-cv { position: static; } .voicebar { flex-wrap: wrap; } .voicebar input { flex-basis: 100%; order: 3; } }

/* ---------- practice interview ---------- */
.orb { position: relative; width: 84px; height: 84px; flex: 0 0 84px; }
.orb span { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7ee0d2, #14b8a6 40%, #14507f 75%); animation: orb 4s ease-in-out infinite; opacity: .9; }
.orb span:nth-child(2) { inset: 10px; background: radial-gradient(circle at 60% 40%, #ffffff, #c8f2ec 45%, transparent 70%); animation-delay: -1.3s; opacity: .55; }
.orb span:nth-child(3) { inset: -6px; background: transparent; border: 2px solid rgba(20,184,166,.35); animation: ring 3s ease-out infinite; }
@keyframes orb { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
.iv-intro { display: flex; gap: 22px; align-items: flex-start; }
.iv-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.iv-nav button { width: 38px; height: 38px; border-radius: 50%; padding: 0; margin: 0; background: #fff; color: var(--ink); border: 2px solid #d5dde8; box-shadow: none; font-weight: 700; }
.iv-nav button.part { border-color: #e6b54a; }
.iv-nav button.done { background: #12805c; border-color: #12805c; color: #fff; }
.iv-nav button.on { outline: 3px solid rgba(20,80,127,.3); outline-offset: 2px; }
.iv-nav .ghost { width: auto; border-radius: 999px; padding: 0 12px; margin-left: auto; border: 0; }
.iv-q { display: flex; gap: 20px; align-items: center; background: linear-gradient(135deg, #f3f8fd, #fff); }
.iv-question { font-size: 22px; line-height: 1.3; margin: 4px 0 8px; }
.tag-s { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.seg3 { display: inline-flex; background: #eef2f7; border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 12px; }
.seg3 button { margin: 0; background: transparent; color: #33445e; border: 0; box-shadow: none; border-radius: 9px; padding: 8px 14px; }
.seg3 button.on { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(15,30,60,.15); }
#ivPrev { width: 100%; max-height: 360px; background: #0b1726; border-radius: 12px; margin-bottom: 10px; transform: scaleX(-1); }
.iv-vid { width: 100%; max-height: 320px; border-radius: 12px; background: #000; margin: 10px 0; }
.iv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.iv-two p { background: #f7f9fc; border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 12px; margin: 6px 0 0; }
.iv-two textarea { margin-top: 6px; min-height: 150px; }
.iv-tips, .iv-flags { margin-top: 12px; border-radius: 10px; padding: 10px 14px; font-size: 14.5px; }
.iv-tips { background: #eef7ff; } .iv-flags { background: #fff7e6; }
.iv-tips ul, .iv-flags ul { margin: 6px 0 0; padding-left: 18px; }
.linkrow { display: flex; gap: 8px; align-items: center; } .linkrow input { flex: 1; margin: 0; } .linkrow button, .linkrow .btn { margin: 0; white-space: nowrap; }
@media (max-width: 760px) { .iv-two { grid-template-columns: 1fr; } .iv-intro, .iv-q { flex-direction: column; } .orb { width: 60px; height: 60px; flex-basis: 60px; } }

/* v4 style gallery filters */
.filterrow{display:flex;gap:12px;align-items:center;margin:0 0 10px;flex-wrap:wrap}
.filterrow .flabel{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted,#667);min-width:56px}
.filterrow .options{margin:0}
.pill.mood{background:#f1effa;color:#4b3f8f}

/* v4 home: "Show them it's really you" */
.real{background:linear-gradient(180deg,#f7f5ff 0%,#eef6ff 100%);border-radius:24px;padding:48px 40px;margin:40px 0}
.real-head{max-width:760px;margin:0 auto 28px;text-align:center}.real-head h2{font-size:2.3rem;margin:.2em 0}
.kick{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5b4bd6;background:#ebe7ff;border-radius:999px;padding:5px 12px}
.real-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.real-card{background:#fff;border-radius:18px;padding:24px;box-shadow:0 8px 30px rgba(30,40,90,.08);display:flex;flex-direction:column;position:relative}
.real-card h3{margin:.3em 0 .4em;font-size:1.2rem}.real-card p{color:#4a5468;font-size:.95rem;line-height:1.5;margin:0 0 16px}
.real-n{width:34px;height:34px;border-radius:50%;background:#1d3557;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.mock{margin-top:auto;border:1px solid #e5e8f0;border-radius:14px;padding:14px;background:#fafbff;font-size:.86rem}
.mock small{display:block;color:#7a8299;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.mock-iv{display:flex;gap:12px;align-items:flex-start}.mock-orb{flex:0 0 44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#a5b4fc,#6366f1 60%,#3730a3);box-shadow:0 0 0 6px rgba(99,102,241,.15);animation:orb 2.4s ease-in-out infinite}
.mock-rec{margin-top:8px;color:#c0262d;font-weight:600;font-size:.8rem}.mock-rec i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e11d48;margin-right:6px;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.mock-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mock-two p{margin:0;font-size:.84rem;color:#333}.mock-two>div:last-child{border-left:2px solid #22c55e;padding-left:10px}
.mock-two .ok{display:inline-block;margin-top:6px;color:#15803d;font-weight:700;font-size:.76rem}
.mock-emp{display:flex;flex-direction:column;gap:5px}.mock-emp .ck{color:#15803d}.mock-emp .nck{color:#7a8299;font-size:.78rem;margin-top:4px}
@media (max-width:900px){.real{padding:28px 18px}.real-grid{grid-template-columns:1fr}.real-head h2{font-size:1.7rem}}
.filterrow .opt{padding:7px 14px;font-size:.9rem}
@media (max-width:700px){.filterrow{flex-wrap:nowrap;gap:8px}.filterrow .flabel{min-width:auto}.filterrow .options{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}.filterrow .opt{white-space:nowrap;padding:6px 12px;font-size:.85rem}}
/* v4.1 spoken interview: what the interviewer is doing right now */
.iv-status{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:8px 12px;border-radius:10px;background:#f4f7fb}
.iv-status b{font-size:.95rem}.iv-status .small{flex-basis:100%}
.iv-dot{width:10px;height:10px;border-radius:50%;background:#94a3b8;flex:0 0 10px}
.iv-q[data-state=asking] .iv-dot{background:#14b8a6;animation:blink 1s infinite}.iv-q[data-state=asking] .orb span:first-child{animation-duration:.9s}
.iv-q[data-state=listening] .iv-dot{background:#e11d48;animation:blink 1s infinite}.iv-q[data-state=listening] .iv-status{background:#fff1f3}
.iv-q[data-state=thinking] .iv-dot{background:#f59e0b;animation:blink .6s infinite}
.iv-q[data-state=review] .iv-status{background:#ecfdf5}.iv-q[data-state=review] .iv-dot{background:#16a34a}
.iv-q[data-state=done] .iv-status{background:#ecfdf5}.iv-q[data-state=done] .iv-dot{background:#16a34a}
.iv-ctl{gap:8px;flex-wrap:wrap}
@keyframes blink{50%{opacity:.25}}
/* v4.2 no in-app microphone: people use their own computer's dictation */
.dictate-tip{font-size:.88rem;color:#4a5468;background:#f4f7fb;border-radius:10px;padding:8px 12px;margin:10px 0 4px}
.dictate-tip kbd{font:600 .78rem Inter,system-ui,sans-serif;background:#fff;border:1px solid #d5dbe5;border-bottom-width:2px;border-radius:5px;padding:1px 6px}
.voicebar .vb-l{margin:0;white-space:nowrap;font-weight:600;align-self:center}
.iv-q[data-state=recording] .iv-dot{background:#e11d48;animation:blink 1s infinite}.iv-q[data-state=recording] .iv-status{background:#fff1f3}
.iv-q[data-state=typing] .iv-dot{background:#1a3a5c}

/* v4.3 CamStage — full-screen recording: words under the lens, auto-framed picture */
body.cs-open{overflow:hidden}
.camstage{position:fixed;inset:0;z-index:3000;background:#0b1220;color:#fff;font-family:inherit}
.camstage .cs-lens{position:absolute;top:4px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#7dd3fc;opacity:.8}
.camstage .cs-prompt{position:absolute;top:26px;left:50%;transform:translateX(-50%);width:min(640px,46vw);text-align:center}
.camstage.pos-top-left .cs-lens{left:6vw;transform:none}.camstage.pos-top-left .cs-prompt{left:3vw;transform:none;text-align:left}
.camstage.pos-top-right .cs-lens{left:auto;right:6vw;transform:none}.camstage.pos-top-right .cs-prompt{left:auto;right:3vw;transform:none;text-align:right}
.camstage.pos-bottom .cs-lens{top:auto;bottom:4px}.camstage.pos-bottom .cs-prompt{top:auto;bottom:26px}.camstage.pos-bottom .cs-bottom{bottom:auto;top:20px}
.camstage .cs-title{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#94a3b8;margin-bottom:6px}
.camstage .cs-lines{max-height:30vh;overflow:hidden}.camstage.scrolling .cs-lines{-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.camstage .cs-lines p{margin:0 0 10px;font-size:clamp(22px,2.3vw,34px);line-height:1.3;font-weight:600;color:rgba(255,255,255,.5);transition:color .3s,opacity .3s}
.camstage .cs-lines p.on{color:#fff}.camstage .cs-lines p.past{opacity:.3}
.camstage .cs-count{position:absolute;top:36vh;left:0;right:0;text-align:center;font-size:120px;font-weight:800;opacity:0;transition:opacity .2s;pointer-events:none}.camstage .cs-count.on{opacity:.9}
.camstage .cs-bottom{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:22px;align-items:flex-end;width:min(1100px,94vw)}
.camstage .cs-pv{position:relative;flex:0 0 min(440px,40vw)}
.camstage .cs-canvas{width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;background:#000;transform:scaleX(-1);box-shadow:0 10px 40px rgba(0,0,0,.5)}
.camstage.pv-hidden .cs-canvas{opacity:0}.camstage.pv-hidden .cs-pv::after{content:"Your picture is hidden — look at the words by the camera";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#94a3b8;font-size:14px;padding:20px}
.camstage .cs-rec{position:absolute;top:10px;left:12px;background:#e11d48;color:#fff;font-weight:700;font-size:13px;border-radius:999px;padding:3px 10px;display:none}.camstage.recording .cs-rec{display:block}
.camstage .cs-hint{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:13px;color:#fde68a;text-shadow:0 1px 2px #000}
.camstage .cs-side{flex:1;display:flex;flex-direction:column;gap:12px}
.camstage .cs-status{font-size:16px;color:#cbd5e1;min-height:1.4em}
.camstage .cs-btns{display:flex;gap:10px;flex-wrap:wrap}.camstage .cs-btns button{margin:0}
.camstage .cs-btns button.secondary,.camstage .cs-btns button.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.camstage .cs-opts{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:#94a3b8}.camstage .cs-opts label{display:flex;gap:6px;align-items:center;margin:0;font-weight:400;color:#94a3b8}
.camstage .cs-speed button{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);padding:0 8px;margin:0 4px;border-radius:6px;min-height:0;line-height:1.6}
@media (max-width:760px){.camstage .cs-prompt{width:92vw}.camstage .cs-bottom{flex-direction:column;align-items:stretch}.camstage .cs-pv{flex-basis:auto;width:60vw;align-self:center}}
/* v4.4 words follow the voice: one bar for the sentence being said, the next one below */
.camstage .cs-lines.follow{max-height:none;overflow:visible}
.camstage .cs-lines.follow p{display:none;margin:0}
.camstage .cs-lines.follow p.on{display:block;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 18px;color:#fff;cursor:pointer}
.camstage .cs-lines.follow p.on .w{transition:color .15s}.camstage .cs-lines.follow p.on .w.said{color:rgba(255,255,255,.42)}
.camstage .cs-lines.follow p.next{display:block;margin-top:14px;font-size:clamp(18px,1.8vw,26px);color:rgba(255,255,255,.55)}
.camstage .cs-lines.follow p.next2{display:block;margin-top:8px;font-size:clamp(16px,1.5vw,22px);color:rgba(255,255,255,.25)}
.camstage .cs-opts select{background:#111a2e;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:2px 6px;margin:0;width:auto;min-height:0;font-size:13px}
/* v4.5.3 creating an account: three clear steps */
.af-steps{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 16px;counter-reset:none}
.af-steps li{flex:1;display:flex;align-items:center;gap:8px;font-size:.88rem;color:#7a8299;background:#f2f4f8;border-radius:10px;padding:8px 10px}
.af-steps li b{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;background:#d9dee8;color:#fff;font-size:.78rem}
.af-steps li.on{color:#14213d;background:#e8f0fb;font-weight:600}.af-steps li.on b{background:#1a3a5c}
.af-steps li.done{color:#15803d}.af-steps li.done b{background:#16a34a}
.af-next{margin-top:12px;font-size:.9rem;background:#f6f8fb;border-left:3px solid #1a3a5c;border-radius:6px;padding:8px 12px;color:#33445e}
.af-done{font-size:1.15rem;font-weight:700;color:#15803d;background:#ecfdf5;border-radius:12px;padding:16px}
@media (max-width:560px){.af-steps li{font-size:.78rem;padding:6px}}
/* v4.5.4 account form: one field per line, room to breathe */
.af-fields{display:flex;flex-direction:column;gap:18px}
.af-field label{display:block;margin:0 0 2px;font-weight:600}
.af-field .af-hint{display:block;font-size:.86rem;color:#667;margin-bottom:6px}
.af-field input,.af-field .pwwrap{width:100%;margin:0}
.af-consent{margin:22px 0 0;background:#f6f8fb;border:1px solid #e3e8f0;border-radius:12px;padding:14px 18px}
.af-consent b{display:block;margin-bottom:8px}
.af-consent ul{margin:0;padding-left:18px}.af-consent li{margin:0 0 7px;line-height:1.5;font-size:.92rem;color:#33445e}.af-consent li:last-child{margin-bottom:0}
.af-agree{display:flex;align-items:flex-start;gap:12px;margin:18px 0 0;font-weight:400;line-height:1.5;cursor:pointer}
.af-agree input{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0}
.af-agree span{flex:1}
.af-next{margin-top:18px}

/* ===== v4.6 home hero styles ===== */
.cvf{position:relative;overflow:hidden;aspect-ratio:794/1123;background:#fff;border-radius:10px}
.cvf iframe{position:absolute;left:0;top:0;width:794px;height:1123px;border:0;transform-origin:0 0;pointer-events:none}
.hx{position:relative;overflow:hidden;margin:-28px -32px 34px;padding:64px 48px 70px;border-radius:0 0 34px 34px}
.hx-in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;max-width:1180px;margin:0 auto}
.hx h1{font-size:clamp(44px,5.6vw,76px);line-height:1;margin:0 0 12px;letter-spacing:-2px;font-weight:800}
.hx-lead{font-size:19px;line-height:1.55;margin:18px 0 26px;max-width:560px}
.hx-small{font-size:14px;margin:16px 0 0;opacity:.75}
.hx-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hx-btn{font-size:18px;font-weight:700;padding:16px 28px;border-radius:999px;border:0;cursor:pointer;transition:transform .15s,box-shadow .15s}
.hx-btn:hover{transform:translateY(-2px)}
.hero .hx-ctas{margin:6px 0 14px}.hero .hx-btn{background:var(--accent);color:#fff}.hero .hx-btn.ghost{background:#fff;color:var(--accent);border:2px solid var(--accent)}
@media (prefers-reduced-motion:reduce){.hx *{animation:none!important;transition:none!important}}

/* 1 Spotlight — dark, glowing, fanned CVs */
.hx-spot{background:radial-gradient(120% 90% at 10% 0%,#1e3a66 0%,#0b1630 55%,#060c1c 100%);color:#e8eefb}
.hx-spot .hx-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:hxFloat 14s ease-in-out infinite alternate}
.hx-spot .g1{width:420px;height:420px;background:#2dd4bf;left:-80px;top:-120px}
.hx-spot .g2{width:380px;height:380px;background:#6366f1;right:8%;top:20%;animation-delay:-5s}
.hx-spot .g3{width:300px;height:300px;background:#f472b6;left:40%;bottom:-160px;opacity:.35;animation-delay:-9s}
@keyframes hxFloat{to{transform:translate(40px,30px) scale(1.12)}}
.hx-pill{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.06em;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:7px 14px;border-radius:999px;margin-bottom:18px}
.hx-spot h1{color:#fff}
.hx-words{font-size:clamp(24px,2.6vw,34px);font-weight:800;margin:0}
.hx-words span{background:linear-gradient(90deg,#5eead4,#a5b4fc,#f9a8d4,#5eead4);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hxShine 6s linear infinite}
.hx-words span:nth-child(2){animation-delay:-1.5s}.hx-words span:nth-child(3){animation-delay:-3s}.hx-words span:nth-child(4){animation-delay:-4.5s}
@keyframes hxShine{to{background-position:300% 0}}
.hx-spot .hx-lead{color:#c3cfe4}
.hx-spot .hx-btn{background:linear-gradient(135deg,#2dd4bf,#6366f1);color:#fff;box-shadow:0 10px 30px rgba(99,102,241,.45)}
.hx-spot .hx-btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.45);box-shadow:none}
.hx-stats{display:flex;gap:28px;margin-top:28px}.hx-stats b{display:block;font-size:30px;color:#fff;line-height:1}.hx-stats span{font-size:13px;color:#93a4c3;text-transform:uppercase;letter-spacing:.08em}
.hx-fan{position:relative;height:540px}
.hx-fan .fan{position:absolute;width:300px;top:40px;left:50%;box-shadow:0 30px 60px rgba(0,0,0,.45);border-radius:10px;transition:transform .5s}
.hx-fan .f1{transform:translateX(-115%) rotate(-12deg) translateY(30px);opacity:.92}
.hx-fan .f2{transform:translateX(15%) rotate(11deg) translateY(30px);opacity:.92}
.hx-fan .f3{transform:translateX(-50%) translateY(-6px);z-index:2;width:330px;animation:hxBob 6s ease-in-out infinite}
.hx-fan:hover .f1{transform:translateX(-128%) rotate(-16deg) translateY(20px)}.hx-fan:hover .f2{transform:translateX(28%) rotate(15deg) translateY(20px)}
@keyframes hxBob{50%{transform:translateX(-50%) translateY(-18px)}}
.hx-chip{position:absolute;z-index:3;background:rgba(255,255,255,.95);color:#14213d;font-weight:700;font-size:14px;padding:10px 14px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.35);animation:hxBob2 5s ease-in-out infinite}
.hx-chip.c1{left:-10px;top:120px}.hx-chip.c2{right:-6px;top:250px;animation-delay:-2s}.hx-chip.c3{left:30px;bottom:30px;animation-delay:-3.5s}
@keyframes hxBob2{50%{transform:translateY(-10px)}}

/* 2 Style carousel — light, playful, one CV changing look */
.hx-car{background:#fdf8ef;color:#14213d}
.hx-car .hx-shape{position:absolute;border-radius:50%;z-index:0}
.hx-car .s1{width:520px;height:520px;background:#ffd6a5;right:-120px;top:-160px}
.hx-car .s2{width:260px;height:260px;background:#bde0fe;right:32%;bottom:-120px}
.hx-car .s3{width:140px;height:140px;background:#caffbf;left:-40px;top:60px}
.hx-car h1{color:#14213d}
.hx-car mark{background:linear-gradient(transparent 58%,#ffd166 58%,#ffd166 92%,transparent 92%);color:inherit;padding:0 4px}
.hx-sub{font-size:clamp(22px,2.3vw,30px);font-weight:700;margin:0;color:#2e6da4}
.hx-car .hx-lead{color:#40506b}
.hx-car .hx-btn{background:#14213d;color:#fff;box-shadow:6px 6px 0 #ffb703}
.hx-car .hx-btn:hover{box-shadow:9px 9px 0 #ffb703}
.hx-car .hx-btn.ghost{background:#fff;color:#14213d;border:2px solid #14213d;box-shadow:none}
.hx-stage{display:flex;flex-direction:column;align-items:center;gap:16px}
.hx-deck{position:relative;width:340px;aspect-ratio:794/1123;transform:rotate(2deg)}
.hx-deck .deck{position:absolute;inset:0;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .7s,transform .7s;box-shadow:0 26px 50px rgba(20,33,61,.22);border-radius:10px}
.hx-deck .deck.on{opacity:1;transform:none}
.hx-label{background:#fff;border-radius:999px;padding:9px 18px;font-size:15px;box-shadow:0 6px 18px rgba(20,33,61,.12);display:flex;align-items:center;gap:10px}
.hx-dots{display:inline-flex;gap:5px}.hx-dots i{width:7px;height:7px;border-radius:50%;background:#cbd5e1;transition:background .3s,width .3s}.hx-dots i.on{background:#14213d;width:18px;border-radius:4px}

/* 3 Portrait — a real person, her CV highlights around her */
.hx-por{background:linear-gradient(135deg,#0f766e 0%,#115e59 45%,#134e4a 100%);color:#fff}
.hx-kick{display:inline-block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#99f6e4;margin-bottom:14px}
.hx-por h1{color:#fff}.hx-por .hx-sub{color:#fde68a}.hx-por .hx-lead{color:#d1fae5}
.hx-por .hx-btn{background:#fde68a;color:#134e4a}.hx-por .hx-btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6)}
.hx-person{position:relative;height:540px}
.hx-disc{position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fef3c7,#fbbf24);left:50%;top:60px;transform:translateX(-50%)}
.hx-ring{position:absolute;width:470px;height:470px;border-radius:50%;border:2px dashed rgba(255,255,255,.35);left:50%;top:25px;transform:translateX(-50%);animation:hxSpin 40s linear infinite}
@keyframes hxSpin{to{transform:translateX(-50%) rotate(360deg)}}
.hx-person img{position:absolute;height:470px;left:50%;bottom:0;transform:translateX(-50%);filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))}
.hx-note{position:absolute;z-index:3;width:220px;background:#fff;color:#14213d;border-radius:14px;padding:12px 14px;font-size:14px;font-weight:600;line-height:1.35;box-shadow:0 16px 36px rgba(0,0,0,.3);animation:hxBob2 6s ease-in-out infinite}
.hx-note small{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#0f766e;margin-bottom:4px}
.hx-note.n1{left:-20px;top:40px}.hx-note.n2{right:-20px;top:170px;animation-delay:-2s}.hx-note.n3{left:0;bottom:60px;animation-delay:-4s;color:#15803d}
.hx-mini{position:absolute;right:10px;bottom:-10px;width:150px;z-index:3;transform:rotate(6deg);box-shadow:0 18px 40px rgba(0,0,0,.4);border-radius:8px}

@media (max-width:900px){
  .hx{margin:-28px -16px 26px;padding:40px 20px 46px;border-radius:0 0 24px 24px}
  .hx-in{grid-template-columns:1fr;gap:26px}
  .hx-fan,.hx-person{height:420px}.hx-fan .fan{width:220px}.hx-fan .f3{width:240px}
  .hx-chip.c1{left:0}.hx-chip.c2{right:0}
  .hx-deck{width:260px}
  .hx-disc{width:300px;height:300px}.hx-ring{width:350px;height:350px}.hx-person img{height:360px}
  .hx-note{width:170px;font-size:12.5px}.hx-note.n1{left:0}.hx-note.n2{right:0}.hx-mini{width:110px}
}
@media (min-width:901px){.hx-spot .hx-lead{max-width:500px}.hx-fan .fan{width:270px}.hx-fan .f3{width:310px}.hx-fan .f1{transform:translateX(-98%) rotate(-12deg) translateY(40px)}.hx-fan:hover .f1{transform:translateX(-108%) rotate(-15deg) translateY(30px)}.hx-chip.c1{left:20px}}

.logincard.choose{background:#f4f8ff;border:1px dashed #9db7e0}