/* Vaulex Group – public (no-login) pages: /switch and the checkout return pages.
   The same dark system as vaulex.co.uk (the eFiling front end): page #070d1a with
   cyan/green radial glows, header #131c2e, cards #0a1122 on a hairline border,
   Inter 900 headings with cyan (#29b6e8) and green (#2edb84) accent words,
   cyan pill CTAs. No framework, no JS beyond Livewire. */

:root {
  --vx-bg: #070d1a; --vx-header: #131c2e; --vx-card: #0a1122; --vx-card-2: #0f1a2e; --vx-input: #0b1324;
  --vx-text: #cbd5e1; --vx-text-strong: #e7eef6; --vx-muted: #94a3b8; --vx-dim: #64748b;
  --vx-line: rgba(148,163,184,.16); --vx-line-2: rgba(148,163,184,.28);
  --vx-cyan: #29b6e8; --vx-cyan-2: #1fb6e0; --vx-cyan-soft: #7fd8f2; --vx-cyan-ink: #0a1420;
  --vx-green: #2edb84; --vx-green-ink: #06251a; --vx-amber: #f5b840; --vx-red: #fb7185;
  --vx-radius: 16px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--vx-bg); }
body.vxp {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--vx-bg);
  background-image: radial-gradient(1100px 520px at 10% -6%, rgba(56,189,248,.08), transparent 60%), radial-gradient(900px 460px at 90% 2%, rgba(52,211,153,.05), transparent 62%);
  background-attachment: fixed;
  color: var(--vx-text); font-family: Inter, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.55; text-wrap: pretty;
}
a { color: var(--vx-cyan-soft); }
.vxp-wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; width: 100%; }
.vxp-main { flex: 1 0 auto; padding: 30px 0 64px; }

/* ---------- Trust bar ---------- */
.vxp-trust { background: linear-gradient(90deg, #060e1d 0%, #0b1b33 50%, #060e1d 100%); border-bottom: 1px solid rgba(56,189,248,.38); }
.vxp-trust-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; }
.vxp-trust-group { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.vxp-trust-label { font-size: 9.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--vx-cyan-soft); white-space: nowrap; padding-right: 10px; border-right: 1px solid rgba(56,189,248,.28); }
.vxp-tc { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 5px; border-radius: 999px; background: rgba(56,189,248,.07); border: 1px solid rgba(56,189,248,.22); color: #eaf4fb; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.vxp-tc:hover { background: rgba(56,189,248,.13); }
.vxp-tc code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; font-weight: 700; color: var(--vx-cyan-soft); background: rgba(56,189,248,.12); border-radius: 5px; padding: 4px 6px; }
.vxp-tc-sh { display: none; }
.vxp-ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(56,189,248,.16); color: #38bdf8; }
.vxp-ic svg { width: 12px; height: 12px; }
.vxp-ic-g { background: rgba(46,219,132,.16); color: var(--vx-green); }
.vxp-ic-a { background: rgba(245,184,64,.16); color: var(--vx-amber); }

/* ---------- Header ---------- */
.vxp-header { position: sticky; top: 0; z-index: 50; background: var(--vx-header); box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 10px 30px -20px rgba(0,0,0,.8); }
.vxp-header-row { display: flex; align-items: center; gap: 28px; height: 78px; }
.vxp-logo { display: block; flex: none; line-height: 0; }
.vxp-logo img { height: 48px; width: auto; display: block; }
.vxp-logo-text { font-weight: 900; font-size: 22px; color: #fff; letter-spacing: -.01em; line-height: 1; }
.vxp-logo-text span { color: var(--vx-cyan); }
.vxp-nav { display: flex; align-items: center; gap: 4px; }
.vxp-nav a { color: var(--vx-text-strong); text-decoration: none; font-weight: 600; font-size: 14.5px; padding: 8px 12px; border-radius: 8px; }
.vxp-nav a:hover { background: rgba(255,255,255,.06); }
.vxp-header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.vxp-btn-ghost { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 999px; background: rgba(148,163,184,.06); border: 1px solid rgba(148,163,184,.4); color: var(--vx-text-strong); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.vxp-btn-ghost:hover { border-color: rgba(148,163,184,.7); background: rgba(148,163,184,.12); }
.vxp-secure { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(46,219,132,.12); border: 1px solid rgba(46,219,132,.35); color: #b9f5d5; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.vxp-secure svg { width: 13px; height: 13px; color: var(--vx-green); }

/* ---------- Progress ---------- */
.vxp-steps { list-style: none; display: flex; gap: 8px; margin: 0 0 18px; padding: 0; flex-wrap: wrap; }
.vxp-steps li { flex: 1 1 0; min-width: 130px; }
.vxp-steps li > span, .vxp-steps li > button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--vx-line); background: rgba(10,17,34,.7); color: var(--vx-muted); font: inherit; font-size: 13px; font-weight: 600; text-align: left; }
.vxp-steps li > button { cursor: pointer; }
.vxp-steps li > button:hover { border-color: rgba(56,189,248,.5); }
.vxp-step-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(148,163,184,.16); color: var(--vx-muted); font-size: 12px; font-weight: 800; flex: none; }
.vxp-steps li.is-current > span { border-color: rgba(56,189,248,.6); color: #fff; background: rgba(56,189,248,.08); box-shadow: 0 0 0 3px rgba(56,189,248,.12); }
.vxp-steps li.is-current .vxp-step-n { background: var(--vx-cyan); color: var(--vx-cyan-ink); }
.vxp-steps li.is-done > button { color: var(--vx-text-strong); }
.vxp-steps li.is-done .vxp-step-n { background: var(--vx-green); color: var(--vx-green-ink); }

.vxp-notice { background: rgba(245,184,64,.1); border: 1px solid rgba(245,184,64,.4); color: #fbd38d; border-radius: 12px; padding: 12px 16px; margin: 0 0 18px; font-size: 14px; font-weight: 500; }

/* ---------- Layout ---------- */
.vxp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.vxp-panel { min-width: 0; background: var(--vx-card); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); padding: 32px 34px 34px; box-shadow: 0 24px 60px -24px rgba(0,0,0,.55); }
.vxp-panel-center { max-width: 760px; margin: 40px auto; text-align: center; }
.vxp-kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--vx-cyan-soft); font-weight: 800; margin: 0 0 10px; }
.vxp-h1 { font-size: 40px; line-height: 1.08; font-weight: 900; letter-spacing: -.03em; color: #fff; margin: 0 0 12px; }
.vxp-h1 .cy { color: var(--vx-cyan); }
.vxp-h1 .gr { color: var(--vx-green); }
.vxp-lead { font-size: 17px; color: var(--vx-text); margin: 0 0 26px; max-width: 64ch; }
.vxp-lead strong { color: #fff; }

/* ---------- Inputs ---------- */
.vxp-label { display: block; font-size: 13px; font-weight: 700; color: var(--vx-text-strong); margin: 0 0 6px; }
.vxp-hint { font-size: 12px; color: var(--vx-muted); margin: 6px 0 0; }
input[type=text], input[type=email], input[type=tel], select { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid rgba(148,163,184,.2); border-radius: 10px; background: var(--vx-input); color: #fff; color-scheme: dark; }
input::placeholder { color: var(--vx-dim); }
input:focus, select:focus { outline: none; border-color: rgba(56,189,248,.7); box-shadow: 0 0 0 3px rgba(56,189,248,.18); }
select option { background: var(--vx-input); color: #fff; }
.vxp-search-row { display: flex; gap: 10px; }
.vxp-search-row input { flex: 1 1 auto; }
.vxp-error { color: var(--vx-red); font-size: 13px; font-weight: 600; margin: 8px 0 0; }
.vxp-error-box { background: rgba(251,113,133,.1); border: 1px solid rgba(251,113,133,.4); border-radius: 10px; padding: 10px 12px; margin-top: 14px; }

/* ---------- Buttons ---------- */
.vxp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 800; font-size: 15px; padding: 14px 26px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, box-shadow .15s, transform .05s, border-color .15s; }
.vxp-btn:active { transform: translateY(1px); }
.vxp-btn[disabled] { opacity: .65; cursor: progress; }
.vxp-btn-primary { background: var(--vx-cyan); color: var(--vx-cyan-ink); }
.vxp-btn-primary:hover { background: #4cc6ef; box-shadow: 0 10px 30px -12px rgba(41,182,232,.7); }
.vxp-btn-green { background: var(--vx-green); color: var(--vx-green-ink); }
.vxp-btn-green:hover { background: #4fe69a; box-shadow: 0 10px 30px -12px rgba(46,219,132,.7); }
.vxp-btn-secondary { background: rgba(148,163,184,.06); color: var(--vx-text-strong); border-color: rgba(148,163,184,.4); }
.vxp-btn-secondary:hover { border-color: rgba(56,189,248,.7); color: #fff; }
.vxp-btn-block { width: 100%; }
.vxp-btn-lg { font-size: 17px; padding: 17px 30px; width: 100%; }
.vxp-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--vx-cyan-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.vxp-fixed { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; margin: 0; padding: 10px 14px; border: 1px dashed var(--vx-line-2); border-radius: 12px; background: var(--vx-card-2); color: var(--vx-text-strong); font-weight: 600; }
.vxp-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- Step 1 results ---------- */
.vxp-results-title { margin: 24px 0 8px; font-size: 11px; font-weight: 800; color: var(--vx-cyan-soft); text-transform: uppercase; letter-spacing: .14em; }
.vxp-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vxp-results button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: left; padding: 13px 16px; border: 1px solid var(--vx-line); border-radius: 12px; background: var(--vx-card-2); color: var(--vx-text); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.vxp-results button:hover { border-color: rgba(56,189,248,.6); background: #12203a; box-shadow: 0 12px 30px -20px rgba(41,182,232,.8); }
.vxp-result-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vxp-result-name { font-weight: 700; color: #fff; }
.vxp-result-meta { font-size: 13px; color: var(--vx-muted); }
.vxp-result-addr { font-size: 13px; color: var(--vx-text); }
.vxp-result-go { color: var(--vx-cyan); font-weight: 800; font-size: 14px; flex: none; }
.vxp-empty { margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: var(--vx-card-2); border: 1px solid var(--vx-line); font-size: 14px; color: var(--vx-text); }
.vxp-empty p { margin: 0; }
.vxp-empty strong { color: #fff; }
.vxp-aside-note { margin: 26px 0 0; font-size: 13px; color: var(--vx-muted); }

.vxp-company { margin-top: 20px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--vx-line); background: var(--vx-card-2); }
.vxp-company-problem { border-color: rgba(245,184,64,.45); background: rgba(245,184,64,.07); }
.vxp-company-name { font-weight: 800; color: #fff; }
.vxp-company-meta { font-size: 13px; color: var(--vx-muted); margin-top: 2px; }
.vxp-problem { margin: 12px 0 0; font-size: 14px; color: #fbd38d; }

/* ---------- Step 2 plans ---------- */
.vxp-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 4px; }
.vxp-plan { position: relative; display: flex; flex-direction: column; padding: 22px 20px 18px; border: 1px solid var(--vx-line); border-radius: 14px; background: var(--vx-card-2); }
.vxp-plan.is-featured { border-color: rgba(46,219,132,.55); box-shadow: 0 0 0 1px rgba(46,219,132,.25), 0 24px 50px -30px rgba(46,219,132,.5); }
.vxp-plan.is-selected { outline: 2px solid var(--vx-cyan); }
.vxp-plan-flag { position: absolute; top: -11px; left: 18px; background: var(--vx-green); color: var(--vx-green-ink); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.vxp-plan-name { font-weight: 800; color: #fff; font-size: 17px; }
.vxp-plan-price { margin-top: 8px; color: var(--vx-muted); font-size: 13px; font-weight: 600; }
.vxp-plan-price span { font-size: 30px; font-weight: 900; color: #fff; letter-spacing: -.03em; margin-right: 2px; }
.vxp-plan-building { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--vx-cyan-soft); margin-top: 4px; }
.vxp-plan-strap { font-size: 13.5px; color: var(--vx-text); margin: 10px 0 0; }
.vxp-plan-features { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 8px; font-size: 13.5px; color: var(--vx-text); flex: 1 1 auto; }
.vxp-plan-features li { padding-left: 24px; position: relative; }
.vxp-plan-features li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgba(46,219,132,.16); }
.vxp-plan-features li::after { content: ""; position: absolute; left: 5px; top: 7px; width: 6px; height: 3px; border-left: 2px solid var(--vx-green); border-bottom: 2px solid var(--vx-green); transform: rotate(-45deg); }
.vxp-plan-terms { font-size: 12px; color: var(--vx-muted); text-align: center; margin: 0 0 12px; }
.vxp-fineprint { margin: 18px 0 0; font-size: 12.5px; color: var(--vx-muted); }

/* ---------- Step 3 form ---------- */
.vxp-form { margin-top: 6px; }
.vxp-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vxp-field { margin-bottom: 16px; }
.vxp-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.vxp-check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--vx-text); margin-top: 6px; padding: 14px 16px; border-radius: 12px; background: var(--vx-card-2); border: 1px solid var(--vx-line); }
.vxp-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--vx-cyan); }
.vxp-pay { margin-top: 22px; }
.vxp-pay-note { margin: 10px 0 0; font-size: 13px; color: var(--vx-muted); text-align: center; }
.vxp-next { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--vx-line); }
.vxp-next-title { font-size: 11px; font-weight: 800; color: var(--vx-cyan-soft); text-transform: uppercase; letter-spacing: .14em; margin: 0 0 8px; }
.vxp-next ol { margin: 0; padding-left: 20px; font-size: 14px; color: var(--vx-text); display: grid; gap: 6px; }
.vxp-next strong { color: #fff; }

/* ---------- Rail ---------- */
.vxp-rail { position: sticky; top: 98px; display: grid; gap: 14px; }
.vxp-rail-card { background: var(--vx-card); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); padding: 18px 20px; box-shadow: 0 24px 60px -24px rgba(0,0,0,.55); }
.vxp-rail-title { margin: 0 0 12px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--vx-cyan-soft); }
.vxp-summary { margin: 0; display: grid; gap: 12px; }
.vxp-summary > div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; font-size: 14px; }
.vxp-summary dt { color: var(--vx-muted); }
.vxp-summary dd { margin: 0; font-weight: 600; color: #fff; }
.vxp-summary dd span { display: block; font-weight: 500; color: var(--vx-muted); font-size: 13px; }
.vxp-summary dd .vxp-link { display: block; margin-top: 3px; }
.vxp-summary-total { padding-top: 12px; border-top: 1px solid var(--vx-line); }
.vxp-summary-total dd { font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -.02em; }
.vxp-summary-then dd { font-weight: 500; color: var(--vx-text); }
.vxp-trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 13px; line-height: 1.5; color: var(--vx-text); }
.vxp-trust-list strong { color: #fff; display: block; }
.vxp-trust-list li { padding-left: 18px; position: relative; }
.vxp-trust-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--vx-cyan); box-shadow: 0 0 10px rgba(41,182,232,.8); }
.vxp-rail-help { margin: 0; font-size: 13px; color: var(--vx-muted); text-align: center; }

/* ---------- Return pages ---------- */
.vxp-done { max-width: 720px; margin: 30px auto; }
.vxp-done .vxp-h1 { font-size: 32px; }
.vxp-done ol { padding-left: 20px; color: var(--vx-text); display: grid; gap: 8px; margin: 0 0 22px; }
.vxp-done ol strong { color: #fff; }
.vxp-done-ref { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(56,189,248,.12); color: var(--vx-cyan-soft); border-radius: 6px; padding: 1px 7px; }

/* ---------- Journey extras: name check, plan variants, optional blocks ---------- */
.vxp-opt { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--vx-muted); background: rgba(148,163,184,.12); border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
.vxp-optional { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--vx-line); }
.vxp-optional .vxp-label { margin-bottom: 10px; }
.vxp-optional .vxp-results { margin-top: 10px; }
.vxp-optional .vxp-company { margin-top: 0; }
.vxp-plans-1 { grid-template-columns: minmax(0, 520px); }
.vxp-plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vxp-plan.is-recommended { border-color: rgba(46,219,132,.55); box-shadow: 0 0 0 1px rgba(46,219,132,.25), 0 24px 50px -30px rgba(46,219,132,.5); }
.vxp-plan-today { margin-top: 4px; font-size: 12.5px; color: var(--vx-muted); }
.vxp-name-row input { flex: 1 1 auto; }
.vxp-ending { flex: 0 0 130px; width: 130px; }
.vxp-namecheck { margin-top: 20px; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--vx-line); background: var(--vx-card-2); }
.vxp-namecheck.is-green { border-color: rgba(46,219,132,.5); background: rgba(46,219,132,.06); }
.vxp-namecheck.is-amber { border-color: rgba(245,184,64,.5); background: rgba(245,184,64,.06); }
.vxp-namecheck.is-red { border-color: rgba(251,113,133,.5); background: rgba(251,113,133,.06); }
.vxp-namecheck-name { font-weight: 900; font-size: 20px; color: #fff; letter-spacing: -.01em; }
.vxp-namecheck-head { margin-top: 6px; font-weight: 800; font-size: 14px; }
.is-green .vxp-namecheck-head { color: var(--vx-green); }
.is-amber .vxp-namecheck-head { color: var(--vx-amber); }
.is-red .vxp-namecheck-head { color: var(--vx-red); }
.vxp-namecheck-text { margin: 8px 0 0; font-size: 14px; color: var(--vx-text); }
.vxp-namecheck .vxp-actions { margin-top: 16px; }
.vxp-summary-total dd span { font-size: 12.5px; font-weight: 500; }
@media (max-width: 900px) {
  .vxp-plans-3, .vxp-plans-1 { grid-template-columns: 1fr; }
  .vxp-name-row { flex-wrap: wrap; }
  .vxp-ending { flex: 1 1 100%; width: 100%; }
}

/* ---------- Plan cards: a line that is NOT included ---------- */
.vxp-plan-features li.is-no { color: var(--vx-muted); }
.vxp-plan-features li.is-no::before { background: rgba(251,113,133,.14); }
.vxp-plan-features li.is-no::after { width: 8px; height: 8px; border: 0; left: 4px; top: 7px; transform: none;
  background: linear-gradient(45deg, transparent 42%, var(--vx-red) 42%, var(--vx-red) 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--vx-red) 42%, var(--vx-red) 58%, transparent 58%); }

/* ---------- Step 3: the building ---------- */
.vxp-h2 { font-size: 22px; font-weight: 900; letter-spacing: -.02em; color: #fff; margin: 30px 0 12px; }
.vxp-h2-sub { display: block; font-size: 13.5px; font-weight: 500; color: var(--vx-muted); letter-spacing: 0; margin-top: 4px; }
.vxp-buildings { display: grid; gap: 10px; margin-top: 6px; }
.vxp-bld { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; width: 100%; text-align: left; padding: 16px 18px; border: 1px solid var(--vx-line); border-radius: 14px; background: var(--vx-card-2); color: var(--vx-text); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.vxp-bld:hover { border-color: rgba(56,189,248,.6); background: #12203a; }
.vxp-bld.is-selected { border-color: var(--vx-cyan); box-shadow: 0 0 0 2px rgba(41,182,232,.35), 0 20px 40px -30px rgba(41,182,232,.8); background: rgba(41,182,232,.06); }
.vxp-bld.is-top { border-color: rgba(245,184,64,.45); }
.vxp-bld.is-top.is-selected { border-color: var(--vx-cyan); }
.vxp-bld-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; grid-column: 1; }
.vxp-bld-name { font-weight: 900; font-size: 18px; color: #fff; letter-spacing: -.01em; }
.vxp-bld-price { font-weight: 800; font-size: 13px; color: var(--vx-amber); }
.vxp-bld-price.is-included { color: var(--vx-green); }
.vxp-bld-addr { grid-column: 1; font-size: 13px; color: var(--vx-muted); }
.vxp-bld-desc { grid-column: 1; font-size: 13.5px; color: var(--vx-text); }
.vxp-bld-pick { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--vx-cyan-soft); border: 1px solid rgba(56,189,248,.4); border-radius: 999px; padding: 8px 14px; white-space: nowrap; }
.vxp-bld.is-selected .vxp-bld-pick { background: var(--vx-cyan); color: var(--vx-cyan-ink); border-color: var(--vx-cyan); }

/* ---------- Step 3: the extras ---------- */
.vxp-extras-group { margin-top: 6px; }
.vxp-extras-group .vxp-results-title { margin-top: 18px; }
.vxp-extras { display: grid; gap: 8px; }
.vxp-extra { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; align-items: start; width: 100%; text-align: left; padding: 13px 16px; border: 1px solid var(--vx-line); border-radius: 12px; background: var(--vx-card-2); color: var(--vx-text); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.vxp-extra:hover:not([disabled]) { border-color: rgba(56,189,248,.6); background: #12203a; }
.vxp-extra.is-on { border-color: var(--vx-green); background: rgba(46,219,132,.06); }
.vxp-extra[disabled] { cursor: default; }
.vxp-extra.is-included { border-color: rgba(46,219,132,.35); }
.vxp-extra.is-closed { opacity: .7; }
.vxp-extra-box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid rgba(148,163,184,.45); background: var(--vx-input); margin-top: 1px; position: relative; }
.vxp-extra.is-on .vxp-extra-box, .vxp-extra.is-included .vxp-extra-box { border-color: var(--vx-green); background: var(--vx-green); }
.vxp-extra.is-on .vxp-extra-box::after, .vxp-extra.is-included .vxp-extra-box::after { content: ""; position: absolute; left: 6px; top: 3px; width: 6px; height: 10px; border-right: 2.5px solid var(--vx-green-ink); border-bottom: 2.5px solid var(--vx-green-ink); transform: rotate(45deg); }
.vxp-extra-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vxp-extra-name { font-weight: 800; color: #fff; font-size: 15px; }
.vxp-extra-strap { font-size: 13px; color: var(--vx-text); }
.vxp-extra-note { font-size: 12.5px; color: var(--vx-amber); }
.vxp-extra-price { font-weight: 800; font-size: 13.5px; color: #fff; white-space: nowrap; text-align: right; }
.vxp-extra.is-included .vxp-extra-price { color: var(--vx-green); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Every plan, line by line ---------- */
.vxp-compare { margin-top: 26px; border: 1px solid var(--vx-line); border-radius: 14px; background: var(--vx-card-2); min-width: 0; max-width: 100%; }
.vxp-compare summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; font-weight: 900; font-size: 17px; color: #fff; letter-spacing: -.01em; }
.vxp-compare summary::-webkit-details-marker { display: none; }
.vxp-compare summary::before { content: "▸"; color: var(--vx-cyan); margin-right: 10px; display: inline-block; transition: transform .15s; }
.vxp-compare[open] summary::before { transform: rotate(90deg); }
.vxp-compare-hint { font-size: 12px; font-weight: 600; color: var(--vx-muted); }
.vxp-twrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--vx-line); max-width: 100%; }
.vxp-mx { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; }
.vxp-mx th, .vxp-mx td { padding: 9px 12px; border-bottom: 1px solid var(--vx-line); vertical-align: middle; text-align: center; }
.vxp-mx thead th { text-align: center; vertical-align: bottom; padding: 14px 12px; background: rgba(10,17,34,.8); }
.vxp-mx thead th:first-child, .vxp-mx tbody th { text-align: left; }
.vxp-mx tbody th { font-weight: 500; color: var(--vx-text); width: 40%; }
.vxp-mx-plan { display: block; font-weight: 900; color: #fff; font-size: 14px; }
.vxp-mx-price { display: block; font-weight: 800; color: var(--vx-cyan-soft); font-size: 12.5px; margin-top: 2px; }
.vxp-mx-fee { display: block; font-size: 11px; color: var(--vx-muted); margin-top: 2px; }
.vxp-mx .is-selected { background: rgba(41,182,232,.07); }
.vxp-mx-group th { text-align: left !important; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--vx-cyan-soft); background: rgba(41,182,232,.05); padding-top: 12px; }
.vxp-tick { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(46,219,132,.16); color: var(--vx-green); font-weight: 900; font-size: 12px; }
.vxp-dash { color: var(--vx-dim); font-weight: 700; }
.vxp-mx-text { display: block; font-weight: 700; color: #fff; font-size: 12.5px; margin-top: 2px; }
.vxp-mx td.is-yes .vxp-mx-text:empty { display: none; }
.vxp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.vxp-mx-choose td { padding: 14px 8px; }
.vxp-btn-sm { font-size: 12.5px; padding: 9px 12px; white-space: normal; }

/* ---------- Rail: extras lines ---------- */
.vxp-summary-line { display: flex; justify-content: space-between; gap: 10px; font-weight: 500; color: var(--vx-text); font-size: 13px; }
.vxp-summary-line.is-included { color: var(--vx-muted); }
.vxp-summary-line span:last-child { white-space: nowrap; color: #fff; font-weight: 600; }
.vxp-summary-line.is-included span:last-child { color: var(--vx-green); }
.vxp-summary-note dd { font-weight: 500; color: #fbd38d; font-size: 12.5px; }
@media (max-width: 640px) {
  .vxp-bld { grid-template-columns: 1fr; }
  .vxp-bld-pick { grid-column: 1; grid-row: auto; justify-self: start; }
  .vxp-extra { grid-template-columns: 22px minmax(0, 1fr); }
  .vxp-extra-price { grid-column: 2; text-align: left; }
}

/* ---------- Footer – the marketing site's footer, rule for rule (footer.vgf on vaulex.co.uk) ---------- */
.vgf { background: #070d1a; border-top: 1px solid rgba(56,189,248,.16); padding: 58px 24px 0; font-family: Inter, system-ui, sans-serif; }
.vgf .fin { max-width: 1220px; margin: 0 auto; }
.vgf .ftop { display: grid; grid-template-columns: 1.55fr 1fr 1fr 1fr 1fr; gap: 34px; padding: 0 0 42px; border-bottom: 1px solid rgba(148,163,184,.14); }
.vgf .fbrand .fnm { color: #fff; font-size: 19px; font-weight: 800; letter-spacing: .02em; margin: 0 0 6px; }
.vgf .fbrand .ftag { color: #94a3b8; font-size: 12.5px; letter-spacing: .05em; margin: 0 0 18px; text-transform: uppercase; }
.vgf .fbrand p.fad { color: #94a3b8; font-size: 13.5px; line-height: 1.65; margin: 0 0 16px; }
.vgf .fbrand p.fad b { color: #e2e8f0; display: block; margin-bottom: 2px; }
.vgf .fregs { display: flex; flex-direction: column; gap: 7px; margin: 0 0 4px; }
.vgf .freg { display: flex; align-items: flex-start; gap: 8px; background: #0d1628; border: 1px solid rgba(56,189,248,.16); border-radius: 8px; padding: 8px 11px; }
.vgf .freg .fk { color: #34d399; font-weight: 800; font-size: 11px; flex: 0 0 auto; line-height: 1.5; }
.vgf .freg .fv { color: #cbd5e1; font-size: 11.5px; line-height: 1.5; }
.vgf .freg .fv b { display: block; color: #fff; font-size: 11.5px; }
.vgf h5 { color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 15px; }
.vgf ul { list-style: none; margin: 0; padding: 0; }
.vgf li { margin: 0 0 9px; }
.vgf a { color: #94a3b8; font-size: 13.5px; text-decoration: none; line-height: 1.5; }
.vgf a:hover { color: #38bdf8; }
.vgf .fpr { padding: 26px 0; border-bottom: 1px solid rgba(148,163,184,.14); display: flex; gap: 26px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.vgf .fpr .fpl { color: #94a3b8; font-size: 13.5px; line-height: 1.7; max-width: 760px; }
.vgf .fpr .fpl b { color: #e2e8f0; }
.vgf .fpledge { display: flex; gap: 9px; flex-wrap: wrap; }
.vgf .fpledge span { background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.28); color: #34d399; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 6px 13px; white-space: nowrap; }
.vgf .fcred { padding: 13px 0; border-bottom: 1px solid rgba(148,163,184,.14); display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.vgf .fcred .fcl { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 10px; padding: 9px 14px; border: 1px solid rgba(148,163,184,.25); flex: 0 0 auto; }
.vgf .fcred .fcl img { display: block; height: 30px; width: auto; }
.vgf .fbot { padding: 22px 0 30px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.vgf .fbot .fc { color: #94a3b8; font-size: 12px; line-height: 1.75; max-width: 820px; }
.vgf .fbot .fc b { color: #94a3b8; }
.vgf .fbot .flk { display: flex; gap: 16px; flex-wrap: wrap; }
.vgf .fbot .flk a { font-size: 12px; color: #94a3b8; }
@media (max-width: 1040px) { .vgf .ftop { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 820px) { .vgf { padding-top: 44px; } .vgf .fpr { flex-direction: column; align-items: flex-start; } .vgf .fbot .fc { font-size: 12.5px; line-height: 1.8; } }
@media (max-width: 660px) { .vgf .ftop { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 480px) { .vgf .ftop { grid-template-columns: 1fr; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .vxp-tc-lg { display: none; }
  .vxp-tc-sh { display: inline; }
}
@media (max-width: 900px) {
  .vxp-grid { grid-template-columns: 1fr; }
  .vxp-rail { position: static; }
  .vxp-plans { grid-template-columns: 1fr; }
  .vxp-nav { display: none; }
  .vxp-trust-label { display: none; }
}
@media (max-width: 640px) {
  .vxp-trust-in { height: auto; padding: 8px 0; flex-wrap: wrap; }
  .vxp-trust-group { flex-wrap: wrap; overflow: visible; }
  .vxp-tc code { display: none; }
  .vxp-tc-static { display: none; }
  .vxp-header-row { height: 64px; gap: 12px; }
  .vxp-logo img { height: 38px; }
  .vxp-btn-ghost { height: 36px; padding: 0 14px; }
  .vxp-secure { display: none; }
  .vxp-panel { padding: 22px 18px 24px; border-radius: 14px; }
  .vxp-h1 { font-size: 28px; }
  .vxp-search-row { flex-direction: column; }
  .vxp-row-2 { grid-template-columns: 1fr; gap: 0; }
  .vxp-steps li { min-width: 46%; }
  .vxp-btn-lg { font-size: 16px; white-space: normal; }
  .vxp-rail { top: auto; }
  .vxp-bld-price, .vxp-extra-price { white-space: normal; }
}

/* Build 14 (28 Sep 2026): the nCino details on /verify, "how did you hear", yes/no choices */
.vxp-legend { margin: 28px 0 12px; padding-top: 18px; border-top: 1px solid var(--vx-line); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--vx-cyan-soft); }
.vxp-legend:first-child { margin-top: 4px; padding-top: 0; border-top: 0; }
.vxp-choice-row { display: flex; gap: 10px; flex-wrap: wrap; }
.vxp-choice-row .vxp-check { flex: 1 1 200px; margin-top: 0; cursor: pointer; align-items: center; }
.vxp-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.vxp-row-3 > .vxp-field, .vxp-row-2 > .vxp-field { min-width: 0; }
@media (max-width: 640px) { .vxp-row-3 { grid-template-columns: 1fr; gap: 0; } }
/* Build 19: the "move your company to us" question on /verify */
.vxp-offer { margin: 14px 0 0; padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(41,182,232,.35); background: rgba(41,182,232,.06); min-width: 0; }
.vxp-offer legend.vxp-label { float: left; width: 100%; padding: 0; margin-bottom: 6px; }
.vxp-offer legend.vxp-label + * { clear: both; }
.vxp-ticks { list-style: none; margin: 0 0 12px; padding: 0; font-size: 14px; color: var(--vx-text); }
.vxp-ticks li { position: relative; padding-left: 24px; margin: 0 0 6px; }
.vxp-ticks li::before { content: ""; position: absolute; left: 4px; top: .45em; width: 10px; height: 5px; border-left: 2px solid var(--vx-green); border-bottom: 2px solid var(--vx-green); transform: rotate(-45deg); }
.vxp-offer .vxp-choice-row .vxp-check { flex: 1 1 160px; }

/* ---------- Build 20: how you pay (monthly / yearly) ---------- */
.vxp-billing { display: inline-flex; gap: 6px; padding: 5px; margin: 0 0 18px; border: 1px solid var(--vx-line); border-radius: 999px; background: var(--vx-card-2); }
.vxp-billing-opt { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 150px; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--vx-muted); font: inherit; cursor: pointer; transition: background .15s, color .15s; }
.vxp-billing-opt:hover { color: #fff; }
.vxp-billing-opt.is-on { background: var(--vx-cyan); color: var(--vx-cyan-ink); }
.vxp-billing-name { font-size: 13.5px; font-weight: 800; }
.vxp-billing-note { font-size: 11px; font-weight: 600; opacity: .85; }
.vxp-billing-opt.is-on .vxp-billing-note { opacity: .9; }
.vxp-billing-opt:focus-visible { outline: 2px solid var(--vx-green); outline-offset: 2px; }
.vxp-billing.is-compact { display: flex; width: 100%; margin: 2px 0 6px; padding: 4px; border-radius: 12px; }
.vxp-billing.is-compact .vxp-billing-opt { flex: 1 1 0; min-width: 0; padding: 6px 6px; border-radius: 9px; }
.vxp-billing.is-compact .vxp-billing-name { font-size: 12.5px; white-space: nowrap; }
.vxp-billing.is-compact .vxp-billing-note { font-size: 10.5px; white-space: nowrap; }
.vxp-summary dd .vxp-billing span { display: block; margin: 0; color: inherit; font-weight: inherit; }
.vxp-summary dd .vxp-billing .vxp-billing-name { font-size: 12.5px; font-weight: 800; }
.vxp-summary dd .vxp-billing .vxp-billing-note { font-size: 10.5px; font-weight: 600; }
.vxp-summary dd .vxp-billing-opt { color: var(--vx-muted); }
.vxp-summary dd .vxp-billing-opt.is-on { color: var(--vx-cyan-ink); }
.vxp-summary-billing dd > span { display: block; font-size: 12.5px; color: var(--vx-green); font-weight: 600; }
@media (max-width: 560px) {
  .vxp-billing { display: flex; }
  .vxp-billing-opt { flex: 1 1 0; min-width: 0; padding: 8px 10px; }
}

/* ---- Build 21: the secure set-up page (/setup) ---- */
.vxs { max-width: 860px; margin: 0 auto; }
.vxs-intro { margin-bottom: 18px; }
.vxs-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.vxs-list li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--vx-card-2); border: 1px solid var(--vx-line); font-size: 14.5px; color: var(--vx-text); }
.vxs-list li b { color: #fff; }
.vxs-list .vxs-done { color: var(--vx-green); font-weight: 700; margin-left: auto; white-space: nowrap; }
.vxs-list .vxs-todo { color: var(--vx-muted); font-weight: 600; margin-left: auto; white-space: nowrap; }
.vxs-card { margin-bottom: 14px; }
.vxs-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; background: none; border: 0; padding: 0; margin: 0; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.vxs-card-head .vxp-h2 { margin: 0; }
.vxs-card-head .vxs-state { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--vx-muted); white-space: nowrap; }
.vxs-card-head .vxs-state.is-done { color: var(--vx-green); }
.vxs-section { margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid var(--vx-line); }
.vxs-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }
.vxs-section h3 { margin: 0 0 4px; font-size: 16px; font-weight: 900; color: #fff; letter-spacing: -.01em; }
.vxs-section p { margin: 0; font-size: 13.5px; color: var(--vx-muted); }
.vxs textarea, .vxs input[type=url] { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid rgba(148,163,184,.2); border-radius: 10px; background: var(--vx-input); color: #fff; color-scheme: dark; resize: vertical; min-height: 44px; }
.vxs textarea:focus, .vxs input:focus { outline: none; border-color: rgba(41,182,232,.7); box-shadow: 0 0 0 3px rgba(41,182,232,.18); }
.vxs .vxp-choice-row { gap: 8px; }
.vxs .vxp-choice-row .vxp-check { flex: 1 1 180px; padding: 11px 13px; font-size: 13.5px; }
.vxs .vxp-choice-row.is-wide .vxp-check { flex: 1 1 100%; }
.vxs-domain-row { display: flex; gap: 10px; align-items: stretch; }
.vxs-domain-row input { flex: 1 1 auto; min-width: 0; }
.vxs-domain-row .vxp-btn { flex: none; white-space: nowrap; }
.vxs-domains { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.vxs-domains li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--vx-card-2); border: 1px solid var(--vx-line); font-size: 14px; }
.vxs-domains li code { font-size: 14px; color: #fff; font-weight: 700; }
.vxs-domains .vxs-ok { color: var(--vx-green); font-weight: 700; }
.vxs-domains .vxs-no { color: #fca5a5; font-weight: 700; }
.vxs-domains .vxs-maybe { color: var(--vx-muted); font-weight: 600; }
.vxs-domains button { margin-left: auto; }
.vxs-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.vxs-saved { color: var(--vx-green); font-weight: 700; font-size: 14px; }
.vxs-secret { display: grid; gap: 10px; margin-top: 14px; }
.vxs-secret-item { padding: 14px 16px; border-radius: 12px; background: var(--vx-card-2); border: 1px solid var(--vx-line); }
.vxs-secret-item b { display: block; color: #fff; margin-bottom: 6px; }
.vxs-secret-item code { display: block; font-size: 15px; color: #fff; background: rgba(0,0,0,.35); border-radius: 8px; padding: 8px 10px; margin-top: 6px; user-select: all; word-break: break-all; }
.vxs-secret-item small { color: var(--vx-muted); }
.vxs-muted { color: var(--vx-muted); font-size: 14px; }
.vxs-req { color: #fca5a5; margin-left: 3px; }
@media (max-width: 640px) {
  .vxs-domain-row { flex-direction: column; }
  .vxs-list li { flex-wrap: wrap; }
}