:root {
    --ink: #070329;          /* body headings on bcl.ae */
    --plum: #410076;         /* section headings */
    --violet: #3d1b7a;       /* buttons, strong UI */
    --lavender: #6958c2;
    --lavender-2: #8a7bd6;
    --pink: #cc3366;         /* bcl.ae accent */
    --orange: #f59e0b;       /* "NEW" badge, as in the portal */
    --text: #333333;
    --muted: #69727d;
    --line: #e7e2f3;
    --soft: #fbf5ff;
    --soft-2: #f7f5fb;
    --white: #ffffff;
    --green: #16a34a;
    --radius: 18px;
    --shadow: 0 10px 30px rgba(61, 27, 122, .08);
    --shadow-lg: 0 24px 60px rgba(61, 27, 122, .16);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 { font-family: "Inter", sans-serif; color: var(--ink); margin: 0; line-height: 1.15; }
  p { margin: 0; }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  .wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
  .eyebrow {
    font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500;
  }
  .section { padding: 96px 0; }
  .section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
  .section-head h2 { font-size: clamp(28px, 4vw, 40px); color: var(--plum); font-weight: 600; margin: 10px 0 14px; }
  .section-head p { color: var(--muted); font-size: 17px; }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 26px; border-radius: 8px; font-weight: 600; font-size: 15px;
    border: 1.5px solid transparent; cursor: pointer; transition: .2s ease; font-family: inherit;
  }
  .btn-primary { background: var(--violet); color: #fff; box-shadow: 0 8px 20px rgba(61, 27, 122, .25); }
  .btn-primary:hover { background: #2c1260; transform: translateY(-1px); }
  .btn-outline { border-color: var(--violet); color: var(--violet); background: transparent; }
  .btn-outline:hover { background: var(--violet); color: #fff; }
  .btn-ghost { color: var(--violet); padding-inline: 8px; }
  .btn-ghost:hover { color: var(--pink); }

  /* ---------- top bar + header ---------- */
  .topbar {
    background: linear-gradient(90deg, #1b1464, #5b4fb0);
    color: #fff; font-size: 14px; font-weight: 600; text-align: center; padding: 9px 16px;
  }
  .topbar .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; margin-right: 8px; }
  header.site {
    position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  }
  .nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 20px; }
  .nav .logo img { height: 50px; width: auto; }
  .nav-links { display: flex; gap: 28px; font-size: 15px; font-weight: 500; color: var(--ink); }
  .nav-links a:hover { color: var(--pink); }
  .nav-cta { display: flex; gap: 10px; align-items: center; }
  .nav-cta .btn { padding: 10px 20px; text-transform: uppercase; font-weight: 500; letter-spacing: .02em; }

  /* ---------- hero ---------- */
  .hero {
    position: relative; overflow: hidden;
    background:
      radial-gradient(1200px 500px at 85% -10%, rgba(138, 123, 214, .35), transparent 60%),
      radial-gradient(800px 400px at -10% 110%, rgba(204, 51, 102, .10), transparent 60%),
      linear-gradient(180deg, #f3effc 0%, #fbf8ff 100%);
    padding: 80px 0 110px;
  }
  .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
  .hero h1 { font-size: clamp(42px, 6vw, 68px); font-weight: 600; margin: 14px 0 16px; letter-spacing: -.01em; }
  .hero h1 span { background: linear-gradient(90deg, var(--violet), var(--lavender)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .hero .tagline { font-family: "Inter", sans-serif; font-size: clamp(19px, 2.2vw, 24px); color: var(--ink); font-weight: 500; margin-bottom: 18px; }
  .hero .lead { font-size: 17px; max-width: 560px; color: #3c3a52; }
  .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
  .hero-points { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; font-size: 14px; color: var(--muted); }
  .hero-points span::before { content: "✓"; color: var(--green); font-weight: 700; margin-right: 6px; }

  .m-update::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); margin-top: 6px; flex: none; }
  .float-chip {
    position: absolute; background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); padding: 12px 16px;
    font-size: 13px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line);
  }
  .float-chip strong { color: var(--ink); display: block; font-size: 14px; }
  .chip-1 { right: -18px; bottom: -24px; }
  .chip-2 { left: -22px; top: -26px; }
  .chip-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; }
  .hero-visual { position: relative; }
  .player {
    position: relative; border-radius: 20px; overflow: hidden; background: #f4f2fb;
    box-shadow: var(--shadow-lg); border: 1px solid var(--line); aspect-ratio: 16 / 9;
  }
  .player video { width: 100%; height: 100%; display: block; object-fit: cover; background: #f4f2fb; }
  .play-overlay {
    position: absolute; inset: 0; border: 0; cursor: pointer; display: flex; align-items: flex-end; justify-content: flex-start;
    padding: 22px; gap: 14px; background: linear-gradient(180deg, transparent 45%, rgba(27, 20, 100, .55)); font-family: inherit;
  }
  .play-overlay .play-ico {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%;
    background: var(--violet); color: #fff; display: grid; place-items: center; font-size: 28px; padding-left: 6px;
    box-shadow: 0 0 0 12px rgba(105, 88, 194, .22), 0 14px 30px rgba(61, 27, 122, .35); transition: .2s;
  }
  .play-overlay:hover .play-ico { transform: translate(-50%, -50%) scale(1.07); }
  .play-txt { color: #fff; text-align: left; font-size: 13.5px; line-height: 1.35; }
  .play-txt b { display: block; font-family: "Inter"; font-size: 19px; font-weight: 600; }
  .player.playing .play-overlay { display: none; }
  .chapters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .chapters button {
    font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--violet); background: #fff; border: 1px solid var(--line);
    border-radius: 99px; padding: 6px 12px; cursor: pointer; transition: .15s;
  }
  .chapters button:hover { background: var(--violet); color: #fff; border-color: var(--violet); }
  .chapters button span { color: var(--muted); font-weight: 500; margin-left: 4px; }
  .chapters button:hover span { color: #d9d4f5; }

  /* ---------- stats strip ---------- */
  .stats { margin-top: -56px; position: relative; z-index: 2; }
  .stats-card {
    background: #fff; border-radius: 22px; box-shadow: var(--shadow); border: 1px solid var(--line);
    display: grid; grid-template-columns: repeat(4, 1fr); padding: 30px 10px;
  }
  .stat { text-align: center; padding: 0 16px; border-right: 1px solid var(--line); }
  .stat:last-child { border-right: 0; }
  .stat b { font-family: "Inter"; font-size: 34px; color: var(--plum); display: block; font-weight: 600; }
  .stat span { color: var(--muted); font-size: 14px; }

  /* ---------- new modules spotlight ---------- */
  .spot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
  .spot {
    border-radius: 24px; padding: 36px; position: relative; overflow: hidden; border: 1px solid var(--line);
    background: linear-gradient(160deg, #ffffff 0%, var(--soft) 100%);
  }
  .spot.dark { background: linear-gradient(150deg, #1b1464 0%, #3d1b7a 55%, #5b4fb0 100%); color: #e9e5ff; border: 0; }
  .spot.dark h3, .spot.dark .spot-sub { color: #fff; }
  .badge-new {
    display: inline-block; background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em;
    padding: 5px 12px; border-radius: 99px; text-transform: uppercase;
  }
  .spot h3 { font-size: 30px; margin: 16px 0 6px; font-weight: 600; }
  .spot-sub { font-family: "Inter"; font-size: 17px; color: var(--violet); font-weight: 500; margin-bottom: 18px; }
  .spot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
  .spot li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 15px; }
  .spot li::before {
    content: "✓"; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700;
    background: #efeafd; color: var(--violet);
  }
  .spot.dark li::before { background: rgba(255, 255, 255, .14); color: #fff; }
  .spot li strong { color: var(--ink); display: block; }
  .spot.dark li strong { color: #fff; }
  .spot .fine { margin-top: 20px; font-size: 12.5px; opacity: .8; }
  .timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 22px; }
  .tl { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 10px 12px; font-size: 12px; }
  .tl b { display: block; font-family: "Inter"; font-size: 16px; color: #fff; }
  .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 22px; }
  .tier { border-radius: 12px; padding: 10px 12px; font-size: 12px; background: #fff; border: 1px solid var(--line); }
  .tier b { display: block; font-family: "Inter"; font-size: 15px; color: var(--violet); }

  /* ---------- pricing ---------- */
  .perks { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px; margin: -28px 0 40px; font-size: 15px; color: var(--ink); }
  .perks b { color: var(--green); }
  .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
  .price {
    background: #fff; border: 1px solid var(--line); border-radius: 24px; display: flex; flex-direction: column;
    position: relative; transition: .25s;
  }
  .price:hover { box-shadow: var(--shadow); }
  .price.popular { border: 2px solid var(--violet); box-shadow: var(--shadow-lg); }
  .pop-tag {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--violet); color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 99px; white-space: nowrap;
  }
  .price-top { padding: 32px 28px 26px; border-bottom: 1px solid var(--line); }
  .plan-name { font-family: "Inter"; font-size: 26px; font-weight: 600; color: var(--plum); }
  .plan-for { font-size: 14px; color: var(--muted); margin: 4px 0 18px; min-height: 42px; }
  .price-row { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); }
  .off { background: #fdecf2; color: var(--pink); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
  .amount { font-family: "Inter"; font-size: 54px; font-weight: 600; color: var(--ink); line-height: 1.1; margin-top: 4px; }
  .amount small { font-size: 20px; margin-right: 6px; color: var(--muted); font-weight: 500; }
  .per { font-size: 13.5px; color: var(--muted); }
  .who { font-size: 14.5px; color: #4a4860; margin: 16px 0 22px; min-height: 46px; }
  .btn.full { width: 100%; }
  .price-mods { padding: 24px 28px 30px; flex: 1; background: linear-gradient(180deg, #fcfaff, #fff); border-radius: 0 0 24px 24px; }
  .pm-title { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); margin-bottom: 12px; }
  .price-mods ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
  .price-mods li { position: relative; padding-left: 28px; font-size: 14.5px; color: var(--ink); }
  .price-mods li::before { content: "✓"; color: var(--green); font-weight: 700; position: absolute; left: 0; top: 0; }
  .price-mods .badge-new, .cmp .badge-new { font-size: 9.5px; padding: 2px 7px; vertical-align: 2px; margin-left: 4px; }
  .pm-note { font-size: 13px; color: var(--muted); margin-top: 16px; }
  .yearly-note { text-align: center; margin: 26px 0 56px; font-size: 15.5px; color: var(--ink); }
  .yearly-note b { color: var(--violet); }
  .cmp-wrap { background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow-x: auto; box-shadow: var(--shadow); }
  .cmp { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
  .cmp th, .cmp td { padding: 14px 20px; border-bottom: 1px solid var(--line); text-align: center; }
  .cmp th:first-child, .cmp td:first-child { text-align: left; color: var(--ink); }
  .cmp th { font-family: "Inter"; font-size: 16px; color: var(--plum); background: #fcfbff; font-weight: 600; }
  .cmp tr:last-child td { border-bottom: 0; }
  .cmp .hl { background: #f6f2ff; }
  .cmp td.y { color: var(--green); font-weight: 700; }
  .cmp td.n { color: #c3bdd6; }
  .cmp td.a { color: var(--violet); font-size: 13px; font-weight: 600; }
  .addons-head { text-align: center; margin: 64px 0 28px; }
  .addons-head h3 { font-size: 28px; color: var(--plum); font-weight: 600; }
  .addons-head p { color: var(--muted); margin-top: 6px; }
  .addons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .addon { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; background: #fff; }
  .addon h4 { font-size: 18px; margin: 8px 0 4px; }
  .addon .pill-addon { margin-top: 12px; }
  .ad-price { font-family: "Inter"; font-size: 22px; font-weight: 600; color: var(--violet); }
  .ad-price small { font-family: "Inter"; font-size: 12.5px; color: var(--muted); font-weight: 400; }
  .addon p { font-size: 14px; color: #4a4860; margin-top: 6px; }

  /* ---------- modules ---------- */
  .modules-bg { background: var(--soft-2); }
  .tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
  .tab {
    border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 10px 20px; font-weight: 600;
    color: var(--violet); cursor: pointer; font-family: inherit; font-size: 14px; transition: .2s;
  }
  .tab[aria-selected="true"], .tab:hover { background: var(--violet); color: #fff; border-color: var(--violet); }
  .mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .mod {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: .25s;
    display: flex; flex-direction: column; gap: 10px;
  }
  .mod:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #d9d0f2; }
  .mod-ico {
    width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px;
    background: linear-gradient(135deg, #efeafd, #e4dcfb);
  }
  .mod h3 { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .mod h3 .badge-new { font-size: 10px; padding: 3px 8px; }
  .mod p { font-size: 15px; color: #4a4860; }
  .mod .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
  .mod .tags span { font-size: 12px; background: var(--soft); color: var(--violet); padding: 4px 10px; border-radius: 99px; font-weight: 500; }
  .mod[hidden] { display: none; }

  /* ---------- human + AI ---------- */
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .split h2 { font-size: clamp(28px, 4vw, 40px); color: var(--plum); font-weight: 600; margin: 10px 0 16px; }
  .split p.lead { color: #4a4860; font-size: 17px; margin-bottom: 26px; }
  .duo { display: grid; gap: 16px; }
  .duo-item { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
  .duo-item .mod-ico { width: 52px; height: 52px; }
  .duo-item h4 { font-size: 18px; margin-bottom: 4px; }
  .duo-item p { font-size: 15px; color: #4a4860; }
  .compare { background: #fff; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
  .compare table { width: 100%; border-collapse: collapse; font-size: 15px; }
  .compare th, .compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); }
  .compare th { font-family: "Inter"; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: #fcfbff; font-weight: 600; }
  .compare th:last-child { color: var(--violet); }
  .compare td:nth-child(2) { color: var(--muted); }
  .compare td:last-child { color: var(--violet); font-weight: 600; }
  .compare tr:last-child td { border-bottom: 0; }

  /* ---------- steps ---------- */
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
  .step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; position: relative; }
  .step::before {
    counter-increment: step; content: counter(step, decimal-leading-zero);
    font-family: "Inter"; font-size: 40px; font-weight: 600; color: #e4dcfb; display: block; line-height: 1; margin-bottom: 14px;
  }
  .step h4 { font-size: 19px; margin-bottom: 6px; }
  .step p { font-size: 15px; color: #4a4860; }

  /* ---------- lead form ---------- */
  .lead-section { background: linear-gradient(180deg, #f3effc 0%, #fff 100%); }
  .lead-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }
  .lead-copy h2 { font-size: clamp(30px, 4vw, 42px); color: var(--plum); font-weight: 600; margin: 10px 0 16px; }
  .lead-copy p { color: #4a4860; font-size: 17px; }
  .lead-copy ul { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 12px; }
  .lead-copy li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
  .lead-copy li::before { content: "✓"; color: var(--green); font-weight: 700; }
  .guarantee { background: #fff; border: 1px dashed #cbbff0; border-radius: 16px; padding: 18px 20px; font-size: 14.5px; }
  .guarantee b { color: var(--violet); }
  .contact-line { margin-top: 22px; font-size: 15px; color: var(--muted); }
  .contact-line a { color: var(--violet); font-weight: 600; }

  form.lead {
    background: #fff; border-radius: 24px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 34px;
  }
  .form-steps { display: flex; gap: 8px; margin-bottom: 24px; }
  .form-steps div { flex: 1; height: 5px; border-radius: 99px; background: #ece8f7; }
  .form-steps div.on { background: var(--violet); }
  .fs-title { font-family: "Inter"; font-size: 22px; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
  .fs-sub { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .field { display: grid; gap: 6px; margin-bottom: 16px; }
  .field label, .field legend { font-size: 14px; font-weight: 600; color: var(--ink); }
  .field label .req, .field legend .req { color: var(--pink); }
  .field input, .field select, .field textarea {
    font-family: inherit; font-size: 15px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid #ddd6f0;
    background: #fff; color: var(--ink); outline: none; transition: .2s; width: 100%;
  }
  .field textarea { min-height: 96px; resize: vertical; }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--lavender); box-shadow: 0 0 0 4px rgba(105, 88, 194, .12); }
  .field.invalid input, .field.invalid select { border-color: var(--pink); }
  .field .err { font-size: 12.5px; color: var(--pink); display: none; }
  .field.invalid .err { display: block; }
  fieldset.field { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  .chip input { position: absolute; opacity: 0; pointer-events: none; }
  .chip span {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 99px; border: 1.5px solid #ddd6f0;
    font-size: 14px; cursor: pointer; transition: .15s; user-select: none; color: var(--ink); font-weight: 500;
  }
  .chip input:checked + span { background: var(--violet); border-color: var(--violet); color: #fff; }
  .chip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(105, 88, 194, .25); }
  .plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
  .plan input { position: absolute; opacity: 0; pointer-events: none; }
  .plan span { display: block; border: 1.5px solid #ddd6f0; border-radius: 12px; padding: 12px 14px; cursor: pointer; font-size: 13px; color: var(--muted); transition: .15s; height: 100%; }
  .plan span b { display: block; color: var(--ink); font-size: 15px; font-family: "Inter"; }
  .plan input:checked + span { border-color: var(--violet); background: var(--soft); box-shadow: inset 0 0 0 1px var(--violet); }
  .field[hidden] { display: none; }
  .phone-group { display: grid; grid-template-columns: 128px 1fr; gap: 8px; }
  .phone-group select { padding-inline: 10px; }
  .field.invalid .phone-group input { border-color: var(--pink); }
  .wa-check { margin: -4px 0 16px; }
  .plan-wide { grid-column: 1 / -1; }
  .field.invalid .plan span { border-color: var(--pink); }
  .chip input[type="radio"] + span { min-width: 110px; justify-content: center; }
  .respond-note { font-size: 13.5px; color: var(--violet); font-weight: 600; margin: -4px 0 12px; }
  .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); margin: 6px 0 20px; }
  .consent input { margin-top: 4px; accent-color: var(--violet); }
  .form-nav { display: flex; justify-content: space-between; gap: 12px; }
  .fstep[hidden] { display: none; }
  .success { text-align: center; padding: 30px 10px; }
  .success .tick { width: 72px; height: 72px; border-radius: 50%; background: #eef9f1; color: var(--green); display: grid; place-items: center; font-size: 34px; margin: 0 auto 18px; }
  .success h3 { font-size: 26px; margin-bottom: 8px; }
  .success p { color: var(--muted); }

  /* ---------- FAQ ---------- */
  .faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
  details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 4px 22px; }
  summary { cursor: pointer; list-style: none; font-family: "Inter"; font-size: 18px; font-weight: 500; color: var(--ink); padding: 16px 0; display: flex; justify-content: space-between; gap: 16px; }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; color: var(--violet); font-size: 24px; line-height: 1; transition: .2s; }
  details[open] summary::after { transform: rotate(45deg); }
  details p { padding: 0 0 18px; color: #4a4860; font-size: 15.5px; }

  /* ---------- CTA band + footer ---------- */
  .band {
    background: linear-gradient(90deg, #1b1464, #5b4fb0); color: #fff; border-radius: 26px; padding: 48px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  }
  .band h2 { color: #fff; font-size: clamp(26px, 3.4vw, 36px); font-weight: 600; }
  .band p { color: #d9d4f5; margin-top: 6px; }
  .band .btn-primary { background: #fff; color: var(--violet); }
  .band .btn-primary:hover { background: var(--soft); }
  footer { background: #0b0628; color: #b9b2e6; padding: 56px 0 28px; margin-top: 96px; font-size: 14.5px; }
  .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
  footer h5 { font-family: "Inter"; color: #fff; font-size: 16px; margin: 0 0 14px; font-weight: 500; }
  footer a:hover { color: #fff; }
  footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
  .foot-logo { background: #fff; border-radius: 12px; padding: 10px 14px; display: inline-block; margin-bottom: 14px; }
  .foot-logo img { height: 40px; }
  .copy { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 40px; padding-top: 20px; font-size: 13px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

  /* =====================================================================
     VIDEO THEME: matches the BCL Connect launch video
     (near-white grid canvas, soft lavender glow, bold Inter in deep indigo,
      second line in violet, violet square checks, floating white cards)
     ===================================================================== */
  :root {
    --ink: #070329;
    --plum: #410076;
    --violet: #3d1b7a;
    --accent: #6958c2;
    --lavender: #6958c2;
    --check: #3d1b7a;
    --line: #e7e2f3;
    --soft: #fbf5ff;
    --soft-2: #f7f5fb;
    --canvas: #fcfaff;
    --muted: #69727d;
    --text: #333333;
    --shadow: 0 14px 40px rgba(61, 27, 122, .07);
    --shadow-lg: 0 30px 70px rgba(61, 27, 122, .12);
  }
  body {
    background-color: var(--canvas);
    background-image:
      linear-gradient(rgba(61, 27, 122, .035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(61, 27, 122, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    letter-spacing: -.005em;
    overflow-x: clip;
  }
  .section, .statement, .hero { overflow-x: clip; }
  h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.025em; color: var(--plum); }
  .accent { color: var(--accent); }
  .section, .modules-bg, .lead-section { background: transparent; position: relative; }
  /* soft glow behind every section heading, like the video's backdrop */
  .section-head { position: relative; }
  .section-head::before {
    content: ""; position: absolute; inset: -80px -120px; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(105, 88, 194, .10), transparent);
  }
  .section-head h2 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 800; color: var(--plum); line-height: 1.08; }
  .section-head p { color: var(--muted); }
  .section-head h2 .accent, .band h2 .accent { display: block; }
  .spot.dark li::before { background: var(--check); color: #fff; }
  .hero .tagline { font-size: clamp(16px, 1.6vw, 20px); }
  /* pill eyebrow, like the video's "What Sets Us Apart" label */
  .eyebrow {
    display: inline-block; background: var(--plum); color: #fff; font-size: 11.5px; font-weight: 700;
    letter-spacing: .08em; padding: 5px 12px; border-radius: 99px;
  }
  .hero .eyebrow, .lead-copy .eyebrow, .split .eyebrow { margin-bottom: 4px; }

  /* top bar + header */
  .topbar { background: linear-gradient(90deg, #3d1b7a, #6958c2); font-weight: 600; letter-spacing: 0; }
  header.site { background: rgba(255, 255, 255, .9); border-bottom-color: var(--line); }
  .nav-links a:hover { color: var(--pink); }
  .nav-cta .btn { text-transform: none; font-weight: 600; letter-spacing: 0; }

  /* buttons: solid indigo, as in the portal */
  .btn { border-radius: 10px; font-weight: 700; }
  .btn-primary { background: var(--violet); box-shadow: 0 10px 24px rgba(61, 27, 122, .25); }
  .btn-primary:hover { background: var(--plum); }
  .btn-outline { border-color: #cfcbe6; color: var(--plum); background: #fff; }
  .btn-outline:hover { background: var(--plum); border-color: var(--plum); color: #fff; }
  .btn-ghost:hover { color: var(--pink); }

  /* hero: airy canvas with a central glow */
  .hero { background: radial-gradient(900px 520px at 70% 45%, rgba(105, 88, 194, .13), transparent 70%); padding: 72px 0 120px; }
  .hero h1 { font-size: clamp(42px, 5.4vw, 66px); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; color: var(--plum); }
  .hero h1 span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--accent); display: block; }
  .hero .tagline { font-weight: 700; color: var(--plum); letter-spacing: -.01em; }
  .hero .tagline .sep { color: #cbbff0; margin: 0 10px; }
  .hero .lead { color: var(--muted); }

  /* violet square checkmarks everywhere */
  .hero-points span::before, .price-mods li::before, .lead-copy li::before, .spot li::before {
    content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px;
    background: var(--check); color: #fff; font-size: 12px; font-weight: 800; margin-right: 8px; flex: none;
  }
  .hero-points span { display: inline-flex; align-items: center; color: var(--plum); font-weight: 600; }
  .price-mods li { padding-left: 30px; }
  .price-mods li::before { position: absolute; left: 0; top: 1px; }
  .lead-copy li { align-items: center; font-weight: 600; color: var(--plum); }
  .spot li { grid-template-columns: 28px 1fr; }
  .spot li::before { margin-right: 0; margin-top: 2px; }

  /* floating white cards */
  .stats-card, .price, .mod, .step, details, .compare, .cmp-wrap, form.lead, .addon, .spot, .g-frame, .player, .float-chip, .guarantee {
    background: #fff; border: 1px solid rgba(61, 27, 122, .06); box-shadow: var(--shadow);
  }
  .player, .g-frame { box-shadow: var(--shadow-lg); }
  .stat b { color: var(--plum); font-weight: 800; letter-spacing: -.03em; }
  .price.popular { border: 2px solid var(--violet); }
  .price-mods { background: #fcfcfe; }
  .plan-name, .addons-head h3, .split h2, .lead-copy h2 { color: var(--plum); font-weight: 800; }
  .amount { font-weight: 800; letter-spacing: -.04em; color: var(--plum); }
  .off { background: #fdecf2; color: var(--pink); }
  .pm-title { color: var(--accent); }
  .cmp .hl { background: #f7f2fe; }
  .cmp th { color: var(--plum); font-weight: 800; }
  .mod-ico { background: #f3eefc; }
  .mod h3, .step h4, .duo-item h4 { color: var(--plum); font-weight: 800; }
  .mod .tags span { background: #f4f2fb; color: var(--violet); }
  .tab { border-color: #dcd8ee; color: var(--plum); }
  .tab[aria-selected="true"], .tab:hover { background: var(--plum); border-color: var(--plum); }
  .step::before { color: #dcd6f3; font-weight: 800; }
  .compare th:last-child { color: var(--accent); }
  .compare td:last-child { color: var(--plum); }
  #gCap { color: var(--plum); font-weight: 800; }

  .opt { color: var(--muted); font-weight: 400; font-size: 13px; }
  .soft-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 26px; }
  .soft-chips span { background: #fff; border: 1px solid rgba(61, 27, 122, .08); box-shadow: 0 6px 16px rgba(61, 27, 122, .06); border-radius: 10px; padding: 7px 14px; font-size: 14px; font-weight: 700; color: var(--plum); }

  /* "Add-on" pill, as in the video */
  .pill-addon { display: inline-block; background: var(--plum); color: #fff; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; letter-spacing: .02em; vertical-align: 3px; }

  /* E-Invoicing spotlight: light card instead of dark, the video is all light */
  .spot.dark { background: #fff; color: var(--text); }
  .spot.dark h3 { color: var(--plum); }
  .spot.dark .spot-sub { color: var(--accent); }
  .spot.dark li strong { color: var(--plum); }
  .spot li strong { color: var(--plum); }
  .spot.dark .tl { background: #f6f5fb; border-color: var(--line); color: var(--muted); }
  .spot.dark .tl b { color: var(--plum); }
  .spot h3 { font-size: 34px; font-weight: 800; }
  .spot-sub { color: var(--accent); font-weight: 700; }

  /* closing band + footer, light like the video's end card */
  .band { background: #fff; color: var(--text); box-shadow: var(--shadow-lg); border: 1px solid rgba(61, 27, 122, .06); position: relative; overflow: hidden; }
  .band::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(105, 88, 194, .16), transparent); pointer-events: none; }
  .band h2 { color: var(--plum); font-weight: 800; }
  .band p { color: var(--muted); }
  .band .btn-primary { background: var(--violet); color: #fff; }
  .band .btn-primary:hover { background: var(--plum); }
  footer { background: #fff; color: var(--muted); border-top: 1px solid var(--line); }
  footer h5 { color: var(--plum); font-weight: 800; }
  footer a:hover { color: var(--pink); }
  .foot-logo { padding: 0; background: none; }
  .copy { border-top-color: var(--line); }

  /* ---------- v4: hero matches bcl.ae ("BCL Globiz" title style) ---------- */
  .hero-eyebrow {
    font-family: "Noto Sans", sans-serif; font-size: 14px; letter-spacing: .7px; text-transform: uppercase;
    color: #808080; font-weight: 400; margin-bottom: 6px;
  }
  .hero h1.hero-title {
    font-family: "Jost", sans-serif; font-size: 75px; font-weight: 600; color: #070538;
    letter-spacing: normal; line-height: 1.05; margin: 0 0 10px;
  }
  .hero-sub { font-size: clamp(26px, 3.1vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--plum); margin-bottom: 14px; }
  .hero-list { list-style: none; padding: 0; margin: 22px 0 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
  .hero-list li { position: relative; padding-left: 30px; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.4; }
  .hero-list li::before {
    content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center;
    background: var(--check); color: #fff; font-size: 12px; font-weight: 800;
  }
  .hero-points { gap: 10px 22px; }
  .hero-points span { font-weight: 500; color: var(--muted); }
  .hero-points span::before { content: "•"; background: none; color: var(--accent); width: auto; height: auto; margin-right: 8px; font-size: 18px; }

  /* ---------- v7: "One firm, from licence to audit" journey ----------
     A switch flips the same eight stops between "the usual way" (a different firm at every stop)
     and "the BCL way" (one firm under all eight). No strike-through to decode. */
  .jr-switch { display: inline-flex; padding: 4px; border-radius: 99px; background: #efeaf7; margin: 0 0 30px; }
  .jr-switch button {
    font: inherit; font-size: 14.5px; font-weight: 700; border: 0; background: none; color: var(--plum); cursor: pointer;
    padding: 10px 20px; border-radius: 99px; transition: background .25s, color .25s;
  }
  .jr-switch button span { font-weight: 500; opacity: .7; margin-left: 6px; }
  .jr-switch button[aria-pressed="true"] { background: var(--plum); color: #fff; }
  .jr-switch button[aria-pressed="true"] span { opacity: .8; }
  .jr-hint { font-size: 14px; color: var(--muted); margin: -18px 0 26px; }

  .journey { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); position: relative; }
  .journey::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 2px; background: var(--plum); opacity: .14; }
  .jr-stop { position: relative; padding: 0 14px 0 0; display: flex; flex-direction: column; }
  .jr-num {
    position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    background: #fff; border: 2px solid var(--plum); color: var(--plum); font-size: 13px; font-weight: 800; margin-bottom: 16px;
  }
  .jr-stop h4 { font-size: 16px; font-weight: 800; color: var(--plum); line-height: 1.25; letter-spacing: -.01em; }
  .jr-stop p { font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
  /* The purple "BCL handles all eight" board sits over the row of firm boxes. Both use --jr-band, so the
     board is never taller than the space kept for that row and can't reach the text above it. */
  .journey-wrap { --jr-band: 86px; }
  .jr-who {
    margin-top: auto; padding-top: 18px; min-height: calc(var(--jr-band) + 18px); display: flex; align-items: flex-end;
  }
  .jr-firm {
    display: flex; align-items: center; gap: 8px; width: 100%; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #3a3346;
    border: 1px solid #ddd5e8; border-radius: 10px; padding: 9px 10px; background: #fff;
    transition: opacity .35s ease, transform .35s ease;
  }
  .jr-firm i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
  .jr-firm em { font-style: normal; }
  .jr-firm strong { display: none; }
  .jr-bcl {
    grid-column: 1 / -1; margin-top: 14px; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 14px;
    background: var(--plum); color: #fff; transform-origin: left center; transform: scaleX(.04); opacity: 0;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
  }
  .jr-bcl > * { opacity: 0; transition: opacity .25s ease .3s; }
  .jr-bcl .lc-badge { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--plum); display: grid; place-items: center; font-weight: 800; font-size: 12.5px; letter-spacing: .04em; }
  .jr-bcl b { display: block; font-size: 17px; }
  .jr-bcl span { font-size: 14px; color: #ddd3f5; }
  .journey-wrap.is-bcl .jr-firm { opacity: 0; transform: translateY(8px); }
  .journey-wrap.is-bcl .jr-bcl { transform: none; opacity: 1; }
  .journey-wrap.is-bcl .jr-bcl > * { opacity: 1; }
  .journey-wrap.is-bcl .jr-num { background: var(--plum); color: #fff; }
  .jr-track { position: relative; }
  .jr-track .jr-bcl { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; height: var(--jr-band); padding-top: 12px; padding-bottom: 12px; overflow: hidden; }

  .jr-tally { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 44px; border-top: 1px solid var(--rule); }
  .jr-tally div { padding: 20px 20px 0 0; }
  .jr-tally div + div { padding-left: 20px; border-left: 1px solid var(--rule); }
  .jr-tally b { display: block; font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--plum); font-variant-numeric: tabular-nums; transition: color .3s; }
  .journey-wrap:not(.is-bcl) .jr-tally b { color: #b4365f; }
  .jr-tally span { display: block; font-size: 14px; color: var(--muted); margin-top: 8px; }
  .jr-cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
  .jr-cta p { font-size: 14.5px; color: var(--muted); }

  @media (max-width: 1100px) {
    .journey { grid-template-columns: 1fr 1fr; column-gap: 28px; }
    .journey::before { display: none; }
    .jr-stop { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; padding: 18px 0; border-top: 1px solid var(--rule); }
    .jr-num { margin: 0; grid-row: 1 / 4; }
    .jr-who { grid-column: 2; min-height: 0; padding-top: 10px; }
    .jr-firm { width: auto; }
    .journey-wrap.is-bcl .jr-firm { opacity: 1; transform: none; border-color: var(--plum); color: var(--plum); }
    .journey-wrap.is-bcl .jr-firm i { background: var(--plum); }
    .journey-wrap.is-bcl .jr-firm em { display: none; }
    .jr-firm strong { display: none; font-weight: 700; }
    .journey-wrap.is-bcl .jr-firm strong { display: inline; }
    .jr-track .jr-bcl { position: static; margin-top: 18px; height: auto; padding: 16px 20px; overflow: visible; }
    .jr-tally { grid-template-columns: 1fr 1fr; }
    .jr-tally div:nth-child(3) { border-left: 0; padding-left: 0; }
  }
  @media (max-width: 640px) {
    .journey { grid-template-columns: 1fr; }
    .jr-switch { display: flex; }
    .jr-switch button { flex: 1; padding: 10px 8px; font-size: 13.5px; }
    .jr-switch button span { display: none; }
    .jr-tally b { font-size: 36px; }
  }

  /* ---------- v4: pricing toggle (replicates bcl.ae) ---------- */
  .toggle-wrap { display: flex; align-items: center; justify-content: center; gap: 12px; margin: -12px 0 40px; flex-wrap: wrap; }
  .toggle-label { font-weight: 600; color: var(--muted); cursor: pointer; font-size: 16px; }
  .toggle-label.active { color: #001441; font-weight: 700; }
  .toggle { position: relative; display: inline-block; width: 46px; height: 26px; }
  .toggle input { opacity: 0; width: 0; height: 0; }
  .toggle .slider { position: absolute; inset: 0; background: #ccc; border-radius: 26px; cursor: pointer; transition: .25s; }
  .toggle .slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .25s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
  .toggle input:checked + .slider { background: var(--violet); }
  .toggle input:checked + .slider::before { transform: translateX(20px); }
  .toggle input:focus-visible + .slider { box-shadow: 0 0 0 4px rgba(105, 88, 194, .25); }
  .save-badge { background: #dcfce7; color: #16a34a; border-radius: 20px; font-size: 14px; font-weight: 700; padding: 5px 12px; }
  .price-grid.two { grid-template-columns: repeat(2, minmax(0, 430px)); justify-content: center; }
  .cmp-head { text-align: center; margin: 70px 0 24px; }
  .cmp-head h3 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: var(--plum); letter-spacing: -.02em; }
  .cmp-wrap { max-width: 900px; margin-inline: auto; }
  .cmp { min-width: 520px; }
  .addons.two { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; }

  /* ---------- v4: what sets us apart ---------- */
  .spot-lead { font-size: 15.5px; color: var(--text); margin-bottom: 18px; }
  .spot-lead b { color: var(--plum); }
  .deadlines { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 8px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
  .deadlines th { background: #f7f2fe; color: var(--plum); text-align: left; font-weight: 700; padding: 10px 12px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
  .deadlines td { padding: 10px 12px; border-top: 1px solid var(--line); color: var(--text); }
  .deadlines td b { color: var(--plum); }
  .spot .fine { margin: 0 0 18px; }
  .spot ul + .fine { margin: 18px 0 0; }

  /* ---------- v4: compact feature grid, 4 per row ---------- */
  .mod-grid.four { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .mod-grid.four .mod { padding: 18px; gap: 6px; }
  .mod-grid.four .mod-ico { width: 38px; height: 38px; border-radius: 10px; font-size: 18px; }
  .mod-grid.four .mod h3 { font-size: 16px; }
  .mod-grid.four .mod p { font-size: 13.5px; line-height: 1.5; }
  .mod-wide { grid-column: 1 / -1; display: grid !important; grid-template-columns: 38px 1fr auto; align-items: center; gap: 16px !important; }
  .wide-tags { display: flex; gap: 8px; flex-wrap: wrap; }
  .wide-tags span { background: #f7f2fe; color: var(--violet); font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 99px; }

  /* ---------- v4: reviews ---------- */
  .ratings { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
  .rating {
    background: #fff; border: 1px solid rgba(61, 27, 122, .06); box-shadow: var(--shadow); border-radius: 14px; padding: 14px 22px;
    display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; min-width: 230px; transition: .2s;
  }
  .rating:hover { transform: translateY(-2px); }
  .r-src { grid-row: 1 / 3; font-size: 20px; font-weight: 800; color: #17313b; }
  .r-score { font-size: 20px; font-weight: 800; color: var(--ink); }
  .r-score i { font-style: normal; color: #f5b301; font-size: 15px; letter-spacing: 1px; }
  .r-count { font-size: 13px; color: var(--muted); }
  .carousel { position: relative; }
  .track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 18px; }
  .track::-webkit-scrollbar { display: none; }
  .review {
    scroll-snap-align: start; margin: 0; background: #fff; border-radius: 18px; padding: 24px; border: 1px solid rgba(61, 27, 122, .06);
    box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px;
  }
  .review .stars { color: #f5b301; letter-spacing: 2px; }
  .review blockquote { margin: 0; font-size: 14.5px; color: var(--text); line-height: 1.6; flex: 1; }
  .review figcaption { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--plum); }
  .av { width: 34px; height: 34px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font-size: 14px; }
  .car-btn {
    position: absolute; top: 45%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--line); background: #fff; color: var(--plum); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: var(--shadow);
  }
  .car-btn:hover { background: var(--violet); color: #fff; }
  .car-btn.prev { left: -20px; }
  .car-btn.next { right: -20px; }

  .faq-group { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 18px 0 2px 4px; }
  .faq-group:first-child { margin-top: 0; }

  /* ---------- v4: how to get started ---------- */
  .gs-steps { list-style: none; counter-reset: gs; padding: 0; margin: 26px 0; display: grid; gap: 14px; }
  .gs-steps li {
    counter-increment: gs; position: relative; padding: 14px 16px 14px 62px; background: #fff; border-radius: 14px;
    border: 1px solid rgba(61, 27, 122, .06); box-shadow: var(--shadow);
  }
  .gs-steps li::before {
    content: counter(gs); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 9px;
    background: var(--violet); color: #fff; display: grid; place-items: center; font-weight: 800;
  }
  .lead-copy .gs-steps li { display: block; font-weight: 400; }
  .lead-copy .gs-steps li::before { margin: 0; font-size: 15px; }
  .gs-steps b { display: block; color: var(--plum); font-size: 16px; }
  .gs-steps span { font-size: 14px; color: var(--muted); }

  @media (max-width: 1024px) {
    .mod-grid.four { grid-template-columns: repeat(2, 1fr); }
    .track { grid-auto-columns: calc((100% - 20px) / 2); }
    .price-grid.two { grid-template-columns: minmax(0, 560px); }
  }
  @media (max-width: 720px) {
    .hero h1.hero-title { font-size: 48px; }
    .hero-list { grid-template-columns: 1fr; }
    .mod-grid.four { grid-template-columns: 1fr; }
    .mod-wide { grid-template-columns: 38px 1fr; }
    .wide-tags { grid-column: 1 / -1; }
    .addons.two { grid-template-columns: 1fr; }
    .track { grid-auto-columns: 86%; }
    .car-btn { display: none; }
    .rating { min-width: 0; width: 100%; }
  }

  /* ---------- v6: line icons (replace emoji) ---------- */
  .ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; flex: none; }
  .mod-ico { color: var(--violet); }
  .mod-ico .ic { width: 22px; height: 22px; }
  .mod-grid.four .mod-ico .ic { width: 19px; height: 19px; }
  .chip-ico .ic { width: 18px; height: 18px; }
  .chip-1 .chip-ico { color: #16a34a; }
  .chip-2 .chip-ico { color: #d97706; }
  .perks .ic, .guarantee .ic { color: var(--violet); }
  .respond-note .ic { color: var(--violet); }

  /* ---------- v6: H1 "BCL Connect powered by BCL Globiz" ---------- */
  .hero h1.hero-title .h1-by {
    display: block; font-family: "Noto Sans", sans-serif; font-size: 18px; font-weight: 400; letter-spacing: .02em;
    color: #808080; margin-top: 8px;
  }

  /* ---------- v6: product shots ---------- */
  .spot-shot { margin: 0 0 20px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(61, 27, 122, .10); background: #fff; }
  .spot-shot img { width: 100%; height: auto; display: block; }

  /* ---------- v6: short form + optional details ---------- */
  .lead-main { margin-bottom: 6px; }
  details.more { border: 1px dashed #cbbff0; border-radius: 14px; padding: 0 16px; margin: 6px 0 16px; background: #fcfaff; box-shadow: none; }
  details.more summary { padding: 14px 0; display: flex; flex-direction: column; gap: 2px; font-family: inherit; font-size: 15px; }
  details.more summary span { font-weight: 700; color: var(--plum); }
  details.more summary i { font-style: normal; font-weight: 400; color: var(--muted); }
  details.more summary small { font-size: 13px; color: var(--muted); font-weight: 400; }
  details.more summary::after { content: "+"; position: absolute; right: 16px; top: 12px; font-size: 22px; color: var(--violet); }
  details.more { position: relative; }
  details.more[open] summary::after { content: "–"; }
  .more-body { padding-bottom: 6px; }
  form.lead .btn.full { margin-top: 4px; padding: 16px; font-size: 16px; }
  form.lead .respond-note { text-align: center; margin: 12px 0 0; }

  /* ---------- v6: WhatsApp button + sticky mobile bar ---------- */
  .wa-float {
    position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; background: #25d366;
    display: grid; place-items: center; box-shadow: 0 10px 24px rgba(37, 211, 102, .4); transition: .2s;
  }
  .wa-float:hover { transform: scale(1.06); }
  .wa-float svg { width: 30px; height: 30px; }
  .mobile-cta { display: none; }
  @media (max-width: 720px) {
    .mobile-cta {
      display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
      border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(61, 27, 122, .08); transition: transform .25s;
    }
    .mobile-cta .btn { padding: 12px 10px; font-size: 15px; }
    .mobile-cta.hide { transform: translateY(110%); }
    .wa-float { bottom: 84px; right: 16px; width: 52px; height: 52px; }
    body { padding-bottom: 72px; }
    .hero h1.hero-title .h1-by { font-size: 15px; }
  }

  .reveal { opacity: 0; transform: translateY(18px); transition: .6s ease; }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

  /* ---------- responsive ---------- */
  @media (max-width: 1024px) {
    .hero-grid, .split, .lead-grid, .spot-grid, .price-grid { grid-template-columns: 1fr; }
    .price-grid { max-width: 560px; margin-inline: auto; gap: 34px; }
    .addons { grid-template-columns: repeat(2, 1fr); }
    .plan-for, .who { min-height: 0; }
    .mod-grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .nav-links { display: none; }
  }
  @media (max-width: 720px) {
    .section { padding: 72px 0; }
    .stats-card { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
    .stat:nth-child(2) { border-right: 0; }
    .spot-grid, .mod-grid, .steps, .row, .foot-grid, .addons { grid-template-columns: 1fr; }
    .perks { margin-top: -20px; font-size: 14px; }
    .timeline, .tiers { grid-template-columns: 1fr; }
    .spot, form.lead { padding: 24px; }
    .band { padding: 32px 24px; }
    .float-chip { display: none; }
    .nav-cta .btn-outline { display: none; }
    .nav .logo img { height: 38px; }
    .plans { grid-template-columns: 1fr; }
    .compare th, .compare td { padding: 12px 14px; font-size: 14px; }
  }

  /* =====================================================================
     v7: EDITORIAL LAYOUT
     Replaces the "floating white card" look (soft shadow + 1px border on every block, grid canvas,
     centred headings, glow blobs). Sections are now separated by hairline rules, headings sit left
     with the intro on the right, lists are ruled like a rate card, and two blocks use solid plum
     so the page has contrast instead of the same white tile repeated.
     ===================================================================== */
  :root { --rule: #e3dcec; --paper: #f6f2fb; --plum-ink: #2b1141; }
  body { background: #fff; background-image: none; }
  .section-head::before { display: none; }
  .section { padding: 104px 0; }
  .section + .section { border-top: 1px solid var(--rule); }
  .section.tint { background: var(--paper); }

  /* headings: left aligned, intro on the right */
  .section-head {
    text-align: left; max-width: none; margin: 0 0 52px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: 64px; align-items: end;
  }
  .section-head .eyebrow { grid-column: 1 / -1; }
  .section-head h2 { margin: 14px 0 0; }
  .section-head p { margin: 0; font-size: 17px; line-height: 1.6; padding-bottom: 6px; }
  .eyebrow {
    background: none; color: #b4365f; padding: 0; border-radius: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .14em;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }

  /* strip the shadows and tile borders */
  .stats-card, .price, .mod, .step, details, .compare, .cmp-wrap, .addon, .spot, .guarantee, .rating, .review, .gs-steps li {
    box-shadow: none !important;
  }
  .player { box-shadow: 0 1px 0 var(--rule); border: 1px solid var(--rule); border-radius: 14px; }
  .float-chip { display: none; }

  /* hero */
  .hero { background: linear-gradient(180deg, var(--paper), #fff 85%); padding: 64px 0 88px; }

  /* stats: a ruled strip, not a card */
  .stats { margin-top: 0; }
  .stats-card { background: none; border: 0; border-radius: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 30px 0; }
  .stat { text-align: left; padding: 0 28px; border-right-color: var(--rule); }
  .stat:first-child { padding-left: 0; }
  .stat b { font-size: 40px; }

  /* pricing: one price sheet, Grow column in solid plum */
  .perks { justify-content: flex-start; margin: -20px 0 26px; }
  .toggle-wrap { justify-content: flex-start; margin: 0 0 30px; }
  .price-grid.two {
    grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule); border-radius: 20px; overflow: hidden; max-width: none;
  }
  .price { border: 0 !important; border-radius: 0; background: #fff; }
  .price-top { border-bottom: 1px solid var(--rule); padding: 36px 36px 30px; }
  .price-mods { background: none !important; border-radius: 0; padding: 26px 36px 34px; }
  .price.popular { background: var(--plum-ink); color: #e7defa; }
  .price.popular .price-top { border-bottom-color: rgba(255, 255, 255, .12); }
  .price.popular .plan-name, .price.popular .amount, .price.popular .price-mods li { color: #fff; }
  .price.popular .plan-for, .price.popular .per, .price.popular .who, .price.popular .price-row, .price.popular .pm-note { color: #cbbde8; }
  .price.popular .amount small { color: #cbbde8; }
  .price.popular .pm-title { color: #f0a8c1; }
  .price.popular .price-mods li::before { background: #fff; color: var(--plum-ink); }
  .price.popular .off { background: rgba(240, 168, 193, .16); color: #f6b9cf; }
  .price.popular .btn-primary { background: #fff; color: var(--plum-ink); box-shadow: none; }
  .price.popular .btn-primary:hover { background: #efe7ff; }
  .pop-tag { position: static; transform: none; align-self: flex-start; margin: 24px 36px 0; background: #f0a8c1; color: var(--plum-ink); }
  .price.popular .price-top { padding-top: 16px; }
  .price:not(.popular) .price-top { padding-top: 66px; }
  .cmp-head { text-align: left; margin: 80px 0 20px; }
  .cmp-wrap { max-width: none; border: 0; border-radius: 0; border-top: 2px solid var(--plum); background: none; }
  .cmp th { background: none; }
  .cmp .hl { background: var(--paper); }

  /* rate card for add-ons and standalone services */
  .rates { margin-top: 80px; }
  .rates-group { display: grid; grid-template-columns: 220px 1fr; column-gap: 40px; padding: 28px 0; border-top: 1px solid var(--rule); }
  .rates-group:last-child { border-bottom: 1px solid var(--rule); }
  .rates-group > h3 { font-size: 20px; color: var(--plum); font-weight: 800; }
  .rates-group > div > p.rates-note { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
  .rates-group > header p { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
  .rate { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 28px; align-items: center; padding: 16px 0; border-bottom: 1px dashed var(--rule); }
  .rate:last-child { border-bottom: 0; }
  .rate h4 { font-size: 17px; color: var(--plum); font-weight: 800; }
  .rate p { font-size: 14px; color: var(--muted); margin-top: 2px; }
  .rate .r-price { font-size: 17px; font-weight: 800; color: var(--plum); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .rate .r-price small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
  .btn-sm { padding: 9px 16px; font-size: 14px; border-radius: 99px; }

  /* "What sets us apart": two columns split by a rule, no tiles */
  .spot-grid { gap: 0; }
  .spot { background: none !important; border: 0 !important; border-radius: 0; padding: 0 48px 0 0; }
  .spot + .spot { padding: 0 0 0 48px; border-left: 1px solid var(--rule) !important; }
  .spot-shot { box-shadow: none; border-radius: 10px; }

  /* features: an index, not 13 tiles */
  .mod-grid.four { gap: 0; border-top: 1px solid var(--rule); }
  .mod-grid.four .mod {
    background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule);
    padding: 22px 22px 24px; transition: background .2s;
  }
  .mod-grid.four .mod:nth-child(4n) { border-right: 0; }
  .mod-grid.four .mod:hover { transform: none; background: var(--paper); }
  .mod-grid.four .mod-ico { background: none; width: auto; height: auto; justify-content: start; color: #b4365f; }
  .mod-wide { border-right: 0 !important; }

  /* Human + AI table */
  .compare { border: 0; border-radius: 0; border-top: 2px solid var(--plum); background: none; }
  .compare th { background: none; }
  .duo-item .mod-ico { background: var(--paper); border-radius: 50%; }

  /* reviews: quotes with a rule, not boxes */
  .ratings { justify-content: flex-start; }
  .rating { border: 1px solid var(--rule); border-radius: 12px; background: none; }
  .review { background: none; border: 0; border-left: 2px solid var(--rule); border-radius: 0; padding: 4px 4px 4px 22px; }
  .review blockquote { font-size: 15.5px; }
  .car-btn { box-shadow: none; }

  /* FAQ: ruled list */
  .faq { gap: 0; max-width: none; }
  .faq details { background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 4px 0; }
  .faq-group { margin: 34px 0 6px; color: #b4365f; }

  /* get started */
  .lead-section { background: var(--paper) !important; }
  .gs-steps li { background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 16px 0 16px 50px; }
  .gs-steps li::before { left: 0; border-radius: 50%; }
  .guarantee { background: none; border: 0; border-left: 3px solid #b4365f; border-radius: 0; padding: 4px 0 4px 16px; }

  /* closing band: solid plum */
  .band { background: var(--plum-ink); border: 0; box-shadow: none; border-radius: 22px; }
  .band::after { display: none; }
  .band h2 { color: #fff; }
  .band h2 .accent { color: #f0a8c1; }
  .band p { color: #cbbde8; }
  .band .btn-primary { background: #fff; color: var(--plum-ink); box-shadow: none; }

  @media (max-width: 1024px) {
    .section-head { grid-template-columns: 1fr; row-gap: 14px; }
    .price-grid.two { grid-template-columns: 1fr; max-width: 620px; }
    .price:not(.popular) .price-top { padding-top: 36px; }
    .spot { padding: 0 0 40px !important; }
    .spot + .spot { padding: 40px 0 0 !important; border-left: 0 !important; border-top: 1px solid var(--rule); }
    .mod-grid.four .mod:nth-child(4n) { border-right: 1px solid var(--rule); }
    .mod-grid.four .mod:nth-child(2n) { border-right: 0; }
    .rates-group { grid-template-columns: 1fr; row-gap: 10px; }
  }
  @media (max-width: 720px) {
    .section { padding: 72px 0; }
    .stat { padding: 0 16px; text-align: center; }
    .stat:first-child { padding-left: 16px; }
    .mod-grid.four .mod { border-right: 0 !important; }
    .rate { grid-template-columns: 1fr auto; }
    .rate .btn { grid-column: 1 / -1; justify-self: start; }
    .price-top, .price-mods { padding-left: 24px; padding-right: 24px; }
  }

  /* =====================================================================
     QUOTE BUILDER  (#bclq)
     Price first, details last, then a real quotation the client can e-sign.
     ===================================================================== */
  #bclq { position: fixed; inset: 0; z-index: 100; display: none; }
  #bclq.open { display: block; }
  .q-scrim { position: absolute; inset: 0; background: rgba(23, 10, 38, .55); backdrop-filter: blur(3px); animation: qFade .2s ease; }
  .q-box {
    position: absolute; inset: 3vh 50% auto auto; transform: translateX(50%); width: min(1220px, calc(100% - 32px)); height: 94vh;
    background: #fff; border-radius: 18px; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto;
    box-shadow: 0 40px 100px rgba(23, 10, 38, .35); animation: qRise .28s cubic-bezier(.2, .8, .2, 1);
  }
  @keyframes qFade { from { opacity: 0; } }
  @keyframes qRise { from { opacity: 0; transform: translate(50%, 14px); } }
  .q-top { display: flex; align-items: center; gap: 20px; padding: 14px 20px 14px 24px; border-bottom: 1px solid var(--rule); }
  .q-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--plum); font-size: 15px; white-space: nowrap; }
  .q-brand img { height: 34px; width: auto; }
  .q-brand span { font-weight: 500; color: var(--muted); }
  .q-steps { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: 6px; align-items: center; }
  .q-steps li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #9b92a8; }
  .q-steps li + li::before { content: ""; width: 22px; height: 1px; background: var(--rule); margin-right: 2px; }
  .q-steps li i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; border: 1.5px solid #d6cde3; }
  .q-steps li.on { color: var(--plum); }
  .q-steps li.on i { background: var(--plum); border-color: var(--plum); color: #fff; }
  .q-steps li.done { color: var(--plum); }
  .q-steps li.done i { background: #efe7fb; border-color: #efe7fb; color: var(--plum); }
  .q-steps li.done i::before { content: "✓"; }
  .q-steps li.done i b { display: none; }
  .q-x { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #f3eff8; color: var(--plum); font-size: 22px; cursor: pointer; flex: none; }
  .q-x:hover { background: #e7dff2; }

  .q-body { display: grid; grid-template-columns: minmax(0, 1fr) 440px; min-height: 0; }
  .q-main { overflow-y: auto; padding: 34px 44px 40px; }
  .q-side { overflow-y: auto; background: #efeaf6; padding: 26px 26px 30px; border-left: 1px solid var(--rule); }
  .q-pane[hidden] { display: none; }
  .q-pane h3 { font-size: 28px; color: var(--plum); font-weight: 800; letter-spacing: -.02em; }
  .q-lede { color: var(--muted); font-size: 15.5px; margin: 8px 0 26px; max-width: 620px; }
  .q-group { margin: 0 0 26px; }
  .q-group > h4 { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: #b4365f; font-weight: 800; margin: 0 0 10px; display: flex; justify-content: space-between; gap: 10px; }
  .q-group > h4 small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); font-size: 13px; }
  .q-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .q-card { position: relative; display: grid; grid-template-columns: 22px 1fr auto; gap: 4px 12px; align-items: start; padding: 16px; border: 1.5px solid var(--rule); border-radius: 12px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
  .q-card:hover { border-color: #c9b9e2; }
  .q-card input { position: absolute; opacity: 0; pointer-events: none; }
  .q-card .q-tick { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #c3b6d6; display: grid; place-items: center; margin-top: 1px; background: #fff; }
  .q-card input[type=radio] ~ .q-tick { border-radius: 50%; }
  .q-card input:checked ~ .q-tick { background: var(--plum); border-color: var(--plum); }
  .q-card input:checked ~ .q-tick::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
  .q-card:has(input:checked) { border-color: var(--plum); background: #faf7fe; }
  .q-card:has(input:focus-visible) { outline: 3px solid #b9a3e3; outline-offset: 2px; }
  .q-card:has(input:disabled) { opacity: .55; cursor: not-allowed; }
  .q-card b { font-size: 15.5px; color: var(--plum); font-weight: 800; }
  .q-card p { grid-column: 2 / -1; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
  .q-card .q-p { font-size: 14px; font-weight: 800; color: var(--plum); white-space: nowrap; text-align: right; }
  .q-card .q-p small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
  .q-card .q-flag { position: absolute; top: -9px; right: 12px; background: var(--plum); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; }
  .q-card .q-inc { grid-column: 2 / -1; font-size: 12.5px; font-weight: 700; color: #1e7a46; }

  .q-q { padding: 18px 0; border-top: 1px solid var(--rule); }
  .q-q:first-of-type { border-top: 0; padding-top: 0; }
  .q-q > p.q-label { font-size: 16px; font-weight: 700; color: var(--plum); margin-bottom: 4px; }
  .q-q > p.q-why { font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
  .q-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .q-chips label { position: relative; cursor: pointer; }
  .q-chips input { position: absolute; opacity: 0; pointer-events: none; }
  .q-chips span { display: block; padding: 9px 15px; border-radius: 99px; border: 1.5px solid var(--rule); font-size: 14px; font-weight: 600; color: #3a3346; background: #fff; transition: .15s; }
  .q-chips label:hover span { border-color: #c9b9e2; }
  .q-chips input:checked + span { background: var(--plum); border-color: var(--plum); color: #fff; }
  .q-chips input:focus-visible + span { outline: 3px solid #b9a3e3; outline-offset: 2px; }
  .q-nudge { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #fff7e8; border: 1px solid #f4dfb3; font-size: 14px; color: #4b3a12; line-height: 1.5; animation: qFade .25s ease; }
  .q-nudge.info { background: #f3eefb; border-color: #e1d6f3; color: #3b2a55; }
  .q-nudge button { flex: none; margin-left: auto; font: inherit; font-size: 13px; font-weight: 700; border: 0; border-radius: 99px; padding: 7px 13px; background: var(--plum); color: #fff; cursor: pointer; white-space: nowrap; }
  .q-nudge button[disabled] { background: #1e7a46; cursor: default; }
  .q-step-n { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--plum); font-weight: 600; }
  .q-step-n button { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--rule); background: #fff; color: var(--plum); font-size: 18px; cursor: pointer; }

  .q-bill { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  /* plan step: one even 14px rhythm so it fits without scrolling */
  .q-main:has(.qx-plans), .q-main:has(.qx-cards) { padding-top: 28px; padding-bottom: 28px; }
  .qx:has(.qx-plans) .q-lede, .qx:has(.qx-cards) .q-lede { margin: 6px 0 14px; }
  .qx-bill { margin-bottom: 14px; }
  .qx-plan { padding: 16px 18px; }
  .qx-plan ul { margin-top: 10px; gap: 5px; }
  .qx-consult { padding: 12px 18px; }
  .q-thanks h3 { font-size: 30px; }
  .q-thanks-lead { font-size: 17px; font-weight: 700; color: var(--plum); margin: 6px 0 4px; }
  .q-thanks-wa { margin-top: 18px; font-size: 14px; color: var(--muted); }
  .q-thanks-wa a { color: #1e7a46; font-weight: 700; }
  /* footer, as on bcl.ae */
  footer.bf { background: none; border: 0; padding: 0; margin-top: 64px; color: rgba(255, 255, 255, .76); font-family: "Noto Sans", sans-serif; font-size: 15px; }
  .bf-box { border-radius: 30px 30px 0 0; overflow: hidden; background: #1b0d4a url("https://bcl.ae/wp-content/uploads/2025/02/Group-1-8-scaled-1.webp") center / cover no-repeat; }
  .bf-in { max-width: 1325px; margin: 0 auto; padding: 70px 40px 34px; }
  .bf-top { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
  footer.bf .bf-title { font-family: Jost, sans-serif; font-size: 35px; font-weight: 500; line-height: 1.25; color: #fff; margin: 0 0 14px; }
  .bf-sub { color: #fff; font-size: 16px; line-height: 1.6; margin: 0; }
  .bf-social { display: grid; grid-template-columns: repeat(3, 48px); gap: 10px; padding: 10px 18px; border-radius: 10px; background: rgba(255, 255, 255, .1); flex: none; }
  .bf-social a { display: block; transition: transform .15s; }
  .bf-social a:hover { transform: translateY(-2px); }
  .bf-social img { display: block; width: 48px; height: 47px; }
  .bf-line { border: 0; border-top: 1px solid rgba(255, 255, 255, .25); margin: 30px 0; }
  .bf-cols { display: grid; grid-template-columns: 355px 192px 285px 1fr; gap: 20px; }
  footer.bf h3 { font-family: "Noto Sans", sans-serif; font-size: 18px; font-weight: 500; color: #fff; margin: 0 0 12px; }
  footer.bf p { margin: 0 0 16px; line-height: 1.7; text-align: justify; }
  footer.bf ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
  footer.bf li { line-height: 1.6; }
  footer.bf a { color: rgba(255, 255, 255, .76); text-decoration: none; }
  footer.bf a:hover { color: #fff; }
  footer.bf .bf-grp a { color: #fff; font-weight: 500; }
  footer.bf .bf-grp:not(:first-child) { margin-top: 6px; }
  .bf-contact { gap: 16px !important; }
  .bf-contact li { display: grid; grid-template-columns: 22px 1fr; gap: 15px; align-items: start; }
  .bf-contact svg { width: 20px; height: 20px; fill: #fff; margin-top: 3px; }
  footer.bf .bf-legal, footer.bf .bf-disc { font-size: 14px; text-align: center; margin: 0 auto; max-width: 1265px; }
  footer.bf .bf-legal { color: #fff; font-weight: 600; }
  @media (max-width: 1100px) { .bf-cols { grid-template-columns: 1fr 1fr; gap: 30px; } }
  @media (max-width: 720px) {
    .bf-box { border-radius: 24px 24px 0 0; }
    .bf-in { padding: 44px 18px 26px; }
    .bf-top { flex-direction: column; align-items: flex-start; }
    footer.bf .bf-title { font-size: 26px; }
    .bf-cols { grid-template-columns: 1fr; }
    footer.bf p { text-align: left; }
  }
  /* quote builder v5: cards, chips and plan cards */
  .qx h3 { font-size: 26px; }
  .qx .q-lede { margin-bottom: 18px; }
  .qx-card { background: #fbfaff; border: 1px solid #ece6f6; border-radius: 16px; padding: 18px 20px; margin-top: 14px; }
  .qx-cards { margin-top: 14px; }
  .qx-cards .qx-card { margin-top: 0; }
  .qx-h { font-size: 15px; font-weight: 800; color: var(--plum); margin: 0 0 12px; letter-spacing: -.01em; text-transform: none; }
  .qx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .qx .q-field label { font-size: 13px; font-weight: 600; color: #4a4458; }
  .qx .q-field input, .qx .q-field select, .qx .q-field textarea { height: 46px; border-radius: 11px; border: 1.5px solid #e1d9ef; background: #fff; font-size: 15px; padding: 0 14px; }
  .qx .q-field textarea { height: auto; padding: 11px 14px; }
  .qx .q-field input:focus, .qx .q-field select:focus, .qx .q-field textarea:focus { border-color: #6958c2; box-shadow: 0 0 0 4px rgba(105, 88, 194, .14); outline: none; }
  .qx .q-phone select { width: 124px; }
  .qx-label { font-size: 14px; font-weight: 700; color: var(--plum); margin: 4px 0 10px; display: block; }
  .qx-grid2 + .qx-label { margin-top: 16px; }
  .qx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .qx-chips label { position: relative; cursor: pointer; }
  .qx-chips input { position: absolute; opacity: 0; pointer-events: none; }
  .qx-chips span { display: inline-block; padding: 8px 14px; border-radius: 99px; border: 1.5px solid #e1d9ef; background: #fff; font-size: 13.5px; font-weight: 500; color: #3b3450; transition: .15s; }
  .qx-chips label:hover span { border-color: #b9a9e4; }
  .qx-chips input:checked + span { background: #3d1b7a; border-color: #3d1b7a; color: #fff; }
  .qx-chips input:focus-visible + span { outline: 3px solid #b9a3e3; outline-offset: 2px; }
  .qx-switch { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; color: #4a4458; cursor: pointer; }
  .qx-switch input { position: absolute; opacity: 0; }
  .qx-track { width: 36px; height: 20px; border-radius: 99px; background: #d9d2e6; position: relative; transition: .2s; flex: none; }
  .qx-track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .2s; }
  .qx-switch input:checked + .qx-track { background: #25a560; }
  .qx-switch input:checked + .qx-track::after { transform: translateX(16px); }
  .qx-bill { display: inline-flex; background: #f1edf8; border-radius: 99px; padding: 4px; margin-bottom: 16px; }
  .qx-bill label { position: relative; cursor: pointer; }
  .qx-bill input { position: absolute; opacity: 0; }
  .qx-bill span { display: block; padding: 8px 18px; border-radius: 99px; font-size: 14px; font-weight: 700; color: #5c5468; }
  .qx-bill span i { font-style: normal; font-size: 11.5px; font-weight: 700; color: #1e7a46; margin-left: 4px; }
  .qx-bill input:checked + span { background: #fff; color: var(--plum); box-shadow: 0 2px 8px rgba(61, 27, 122, .12); }
  .qx-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .qx-plan { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1.5px solid #e1d9ef; border-radius: 16px; background: #fff; cursor: pointer; transition: .15s; }
  .qx-plan:hover { border-color: #b9a9e4; }
  .qx-plan input { position: absolute; opacity: 0; }
  .qx-plan.on, .qx-plan:has(input:checked) { border-color: #3d1b7a; box-shadow: 0 0 0 3px rgba(61, 27, 122, .12); background: #fcfaff; }
  .qx-flag { position: absolute; top: -10px; right: 16px; background: #3d1b7a; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; }
  .qx-plan-name { font-size: 20px; font-weight: 800; color: var(--plum); }
  .qx-plan-for { font-size: 13.5px; color: var(--muted); }
  .qx-price { font-size: 32px; font-weight: 800; color: #070329; margin-top: 8px; letter-spacing: -.02em; }
  .qx-price small { font-size: 14px; color: var(--muted); margin-right: 4px; font-weight: 600; }
  .qx-price em { font-style: normal; font-size: 14px; color: var(--muted); font-weight: 500; }
  .qx-vat { font-size: 12.5px; color: var(--muted); }
  .qx-plan ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
  .qx-plan li { position: relative; padding-left: 14px; font-size: 13.5px; color: #3b3450; }
  .qx-plan li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: #6958c2; }
  .qx-consult { position: relative; display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 14px 18px; border: 1.5px dashed #cdbfe9; border-radius: 14px; background: #fbfaff; cursor: pointer; font-size: 13.5px; color: #4a4458; }
  .qx-consult input { position: absolute; opacity: 0; }
  .qx-consult b { color: var(--plum); }
  .qx-consult em { font-style: normal; font-weight: 800; color: #3d1b7a; white-space: nowrap; margin-left: auto; }
  .qx-consult.on, .qx-consult:has(input:checked) { border-style: solid; border-color: #3d1b7a; background: #f6f1fe; }
  .qx .q-nz:empty { display: none; }
  .q-body.no-side .q-pane.qx { max-width: 860px; }
  /* question cards stack in two independent columns, so a short card never waits for a tall neighbour */
  .qx-grid2.qx-cards { display: block; columns: 2; column-gap: 14px; }
  .qx-cards .qx-card { break-inside: avoid; margin: 0 0 14px; }
  .qx-cards + .qx-card { margin-top: 0; }
  /* step 2: three fixed columns, wider than the other steps */
  .q-body.no-side .q-pane.qx.qx-biz { max-width: 1120px; }
  .qx-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .qx-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .qx-cols .qx-card { margin: 0; padding: 16px 18px; }
  .qx.qx-biz .q-lede { max-width: none; margin-bottom: 12px; }
  .qx-cols .qx-label { margin-bottom: 10px; }
  .qx-biz .qx-chips span { padding: 7px 12px; }
  .qx-biz .q-nudge { margin-top: 8px; padding: 8px 11px; font-size: 12.5px; line-height: 1.45; }
  .qx.qx-biz .q-date { flex-wrap: nowrap; gap: 8px; }
  .qx.qx-biz .q-date select { min-width: 0; width: auto; flex: 1 1 0; height: 42px; }
  .qx.qx-biz .q-date-note { margin-top: 6px; }
  .qx-biz .qx-fz { margin-top: 10px; }
  .qx-biz .q-bl { margin-top: 10px; padding: 10px 12px; }
  @media (max-width: 960px) {
    .qx-cols { display: flex; flex-direction: column; }
    .qx-col { display: contents; }
    .qx-o1 { order: 1; } .qx-o2 { order: 2; } .qx-o3 { order: 3; } .qx-o4 { order: 4; } .qx-o5 { order: 5; }
  }
  .qx .q-date select { width: auto; min-width: 170px; height: 44px; }
  .qx .q-date-note { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
  .qx .q-date { display: flex; gap: 10px; }
  @media (max-width: 720px) {
    .qx-grid2, .qx-plans { grid-template-columns: 1fr; }
    .qx-grid2.qx-cards { columns: 1; }
    .qx-consult { flex-direction: column; align-items: flex-start; gap: 8px; }
    .qx-consult em { margin-left: 0; }
  }
  /* quote builder v4: single column while answering, short grouped sections */
  .q-body.no-side { grid-template-columns: 1fr !important; }
  .q-body.no-side .q-side { display: none !important; }
  .q-body.no-side .q-pane { max-width: 720px; margin: 0 auto; }
  .q-sec { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule, #ebe6f2); }
  .q-sec:first-of-type { margin-top: 18px; }
  .q-sec-t { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); margin: 0 0 12px; }
  .q-sec-t small { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: 6px; }
  .q-sec .q-q { margin-top: 0; margin-bottom: 14px; }
  .q-fine { font-size: 12.5px; color: var(--muted); margin-top: 18px; }
  /* quote builder v3: plan choice, consultation, and the side panel before the quotation is revealed */
  .q-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-choice b i { font-style: normal; font-weight: 600; color: var(--muted); margin-left: 4px; }
  .q-card .q-flag.alt { background: #1e7a46; }
  .q-consult { margin-top: 12px; border-style: dashed; background: #fcfbff; }
  .q-wa { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--muted); font-weight: 500; }
  .q-wa input { accent-color: var(--plum); }
  .q-wait h5 { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 12px; }
  .q-wait-for { font-size: 14px; color: #4a4458; line-height: 1.5; margin-bottom: 14px; }
  .q-wait-for b { color: var(--plum); }
  .q-wait-plan { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
  .q-wait-plan b { color: var(--plum); font-size: 14px; }
  .q-wait ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
  .q-wait li { position: relative; padding-left: 26px; font-size: 13.5px; color: #4a4458; line-height: 1.45; }
  .q-wait li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%; background: var(--plum); color: #fff; font-size: 10px; display: grid; place-items: center; font-weight: 800; }
  .q-sent { text-align: center; max-width: 560px; margin: 10px auto 0; }
  .q-sent-tick { width: 64px; height: 64px; border-radius: 50%; background: #e7f6ed; color: #1e7a46; display: grid; place-items: center; font-size: 30px; margin: 0 auto 16px; }
  /* ---------- quote builder: required marks, searchable lists ---------- */
  .q-req { font-style: normal; color: #b4365f; }
  .qx-title span { min-width: 64px; text-align: center; }
  .q-field.bad .qx-chips span, .q-field.bad .qs-btn { border-color: #b3261e; }
  .qs { position: relative; min-width: 0; }
  .qs-btn {
    position: relative; display: block; width: 100%; height: 46px; padding: 0 30px 0 12px; text-align: left; font: inherit; font-size: 14.5px; color: #070329;
    background: #fff; border: 1.5px solid #e1d9ef; border-radius: 11px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .qs-btn::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 2px solid #7a7189; border-bottom: 2px solid #7a7189; transform: translateY(-70%) rotate(45deg); }
  .qs-btn:focus-visible, .qs-btn[aria-expanded="true"] { outline: none; border-color: #6958c2; box-shadow: 0 0 0 4px rgba(105, 88, 194, .14); }
  .qs-ph { color: #9a93a8; }
  .qs-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: max(100%, 320px); background: #fff; border: 1px solid #e1d9ef; border-radius: 12px; box-shadow: 0 18px 40px rgba(43, 17, 65, .18); padding: 8px; }
  .qs-search { width: 100%; height: 40px; border: 1.5px solid #e1d9ef; border-radius: 9px; padding: 0 12px; font: inherit; font-size: 14px; }
  .qs-search:focus { outline: none; border-color: #6958c2; }
  .qs-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 240px; overflow-y: auto; }
  .qs-list li { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #070329; }
  .qs-list li b { min-width: 48px; color: var(--plum); font-variant-numeric: tabular-nums; }
  .qs-list li small { margin-left: auto; padding-left: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
  .qs-list li[hidden] { display: none; }
  .qs-list li:hover, .qs-list li.act { background: #f3eefc; }
  .qs-list li[aria-selected="true"] { font-weight: 700; }
  .qs-none { margin: 0; padding: 8px 10px; font-size: 13px; color: var(--muted); }
  .qx .q-phone { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 8px; }
  .qx-fz { margin-top: 14px; }
  .qx-fz .qx-label { margin: 0 0 8px; font-size: 13px; }
  .qx-fz-other { margin-top: 8px; width: 100%; height: 44px; border: 1.5px solid #e1d9ef; border-radius: 11px; padding: 0 12px; font: inherit; font-size: 14.5px; }

  /* ---------- step 3: Essential and Grow side by side, Yearly and Monthly inside each ---------- */
  .qx-choose h3 { margin-bottom: 0; }
  .qx-pk2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
  .qx-pk { position: relative; padding: 16px 16px 16px; border: 1.5px solid #e6def3; border-radius: 16px; background: #fbfaff; }
  .qx-pk.rec { border-color: #3d1b7a; background: #f7f3fe; }
  .qx-pk .qx-flag { left: 16px; right: auto; }
  .qx-pk-name { margin: 0; font-size: 20px; font-weight: 800; color: var(--plum); }
  .qx-pk-for { margin: 2px 0 12px; font-size: 13.5px; color: #3b3450; }
  .qx-pk-for b { color: #8a5a00; }
  .qx-pk-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .q-hl.rec { flex-wrap: wrap; background: #ecf8f0; border: 1px solid #bfe3cb; color: #17432a; margin-top: 12px; }
  .q-hl.rec i { background: #1e7a46; }
  .q-hl.rec span { flex: 1; min-width: 240px; font-weight: 500; }
  .q-hl.rec b { color: #12502c; }
  .q-hl.rec .q-linkbtn { color: #12502c; white-space: nowrap; margin-left: 30px; }
  .qx-opt { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 12px; border: 1.5px solid #e1d9ef; border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
  .qx-opt:hover { border-color: #b9a9e4; }
  .qx-opt input { position: absolute; opacity: 0; pointer-events: none; }
  .qx-opt.on, .qx-opt:has(input:checked) { border-color: #3d1b7a; box-shadow: 0 0 0 3px rgba(61, 27, 122, .12); background: #fcfaff; }
  .qx-opt:has(input:focus-visible) { outline: 3px solid #b9a3e3; outline-offset: 2px; }
  .qx-opt-bill { align-self: flex-start; margin: 0 0 6px; padding: 2px 8px; border-radius: 99px; background: #efe8fc; color: #3d1b7a; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .qx-opt-price { font-size: 24px; font-weight: 800; color: #070329; letter-spacing: -.02em; line-height: 1.15; }
  .qx-opt-price small { margin-right: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
  .qx-opt-price em { font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--muted); }
  .qx-opt-vat { font-size: 12px; color: var(--muted); }
  .qx-opt-save { margin-top: 4px; font-size: 12px; font-weight: 700; color: #1e7a46; }
  .qx-opt-save.m { font-weight: 500; color: var(--muted); }
  .qx-choose .qx-consult { margin-top: 12px; }
  /* step 2: catch-up of past books, shown as a sum */
  .q-bl { margin-top: 12px; padding: 12px 14px; border: 1.5px solid #f3d995; border-radius: 12px; background: #fffaf0; }
  .q-bl-top { display: flex; align-items: center; gap: 8px; }
  .q-bl-top b { font-size: 14px; color: var(--plum); }
  .q-bl-tag { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #1e7a46; background: #e7f6ed; padding: 2px 8px; border-radius: 99px; }
  .q-bl-rm { margin-left: auto; font: inherit; font-size: 13px; font-weight: 700; color: #b4365f; background: none; border: 0; padding: 2px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
  .q-bl-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; font-size: 14px; color: #3b3450; white-space: nowrap; }
  .q-bl-step { display: inline-flex; align-items: center; border: 1.5px solid #e1d9ef; border-radius: 99px; background: #fff; }
  .q-bl-step button { width: 32px; height: 32px; border: 0; background: none; font: inherit; font-size: 18px; font-weight: 700; color: var(--plum); cursor: pointer; border-radius: 50%; }
  .q-bl-step button:hover:not(:disabled) { background: #f3eefc; }
  .q-bl-step button:disabled { color: #c9c2d6; cursor: default; }
  .q-bl-step b { min-width: 22px; text-align: center; font-size: 15px; color: #070329; font-variant-numeric: tabular-nums; }
  .q-bl-eq b { font-size: 16px; color: var(--plum); font-variant-numeric: tabular-nums; }
  .q-bl-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: #6b5a2e; }
  .q-bl-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 12px; padding: 10px 14px; border: 1.5px dashed #cdbfe8; border-radius: 12px; background: #fff; font-size: 14px; color: #3b3450; }
  .q-bl-line b { color: var(--plum); }
  .q-bl-line span { flex: 1; min-width: 220px; }

  /* ---------- highlighted notes: Essential has no VAT; Zoho Books plans ---------- */
  .q-notes { display: grid; gap: 8px; margin: 12px 0 0; }
  .qx .q-notes + .qx-cards { margin-top: 14px; }
  .q-hl { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; font-weight: 600; }
  .q-hl i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; margin-top: 1px; }
  .q-hl.warn { background: #fff4dc; border: 1px solid #f3d995; color: #5a3d00; }
  .q-hl.warn i { background: #c98a00; }
  .q-hl.info { background: #eef3ff; border: 1px solid #cfdcf7; color: #1f3566; }
  .q-hl.info i { background: #3b63c4; }

  /* ---------- step 4: summary, download and e-sign ---------- */
  .q-ready-head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
  .q-ready-head .q-sent-tick { margin: 0; flex: none; width: 54px; height: 54px; font-size: 26px; }
  .q-ready-head .q-lede { margin: 4px 0 0; }
  .q-sum { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 16px; margin: 0; padding: 16px 18px; background: #fbfaff; border: 1px solid #ece6f6; border-radius: 14px; font-size: 14.5px; }
  .q-sum dt { color: var(--muted); }
  .q-sum dd { margin: 0; font-weight: 600; color: #070329; }
  .q-sum dd.q-sum-tot { font-size: 20px; font-weight: 800; color: var(--plum); }
  .q-sum dd.q-sum-tot small, .q-sum dd.q-sum-then { font-size: 12.5px; font-weight: 500; color: var(--muted); }
  .q-ready-actions { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  .q-ready-actions .q-fine { margin: 0; }
  .q-ready .q-hl { margin-top: 12px; }
  .sig-h { margin: 0 0 12px; font-size: 17px; font-weight: 800; color: var(--plum); }
  .q-linkbtn { font: inherit; color: var(--plum); font-weight: 700; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .sig-inline { margin-top: 16px; }
  .sig-inline .sig-actions { justify-content: flex-start; margin-top: 14px; }
  @media (max-width: 760px) { .qx-pk2 { grid-template-columns: 1fr; } }
  @media (max-width: 640px) {
    .q-sum { grid-template-columns: 1fr; gap: 0; }
    .q-sum dd { margin-bottom: 8px; }
    .qx .q-phone { grid-template-columns: 118px minmax(0, 1fr); }
  }

  .q-sent .act-next { text-align: left; max-width: 420px; margin: 18px auto 0; }
  .q-sent-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
  .q-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .q-field { display: grid; gap: 6px; }
  .q-field.wide { grid-column: 1 / -1; }
  .q-field label { font-size: 14px; font-weight: 700; color: var(--plum); }
  .q-field label small { font-weight: 500; color: var(--muted); }
  .q-field input, .q-field select {
    font: inherit; font-size: 15.5px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid #dcd3e8; background: #fff; color: var(--ink); width: 100%;
  }
  .q-field input:focus, .q-field select:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(65, 0, 118, .12); }
  .q-field .q-err { font-size: 12.5px; color: #b3261e; min-height: 0; }
  .q-field.bad input, .q-field.bad select { border-color: #b3261e; }
  .q-phone { display: grid; grid-template-columns: 118px 1fr; gap: 8px; }
  .q-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); margin-top: 18px; }
  .q-consent input { margin-top: 3px; accent-color: var(--plum); }
  .q-promise { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--muted); }
  .q-promise b { color: var(--plum); }

  .q-foot { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--rule); background: #fff; }
  .q-foot .q-tot { font-size: 13.5px; color: var(--muted); line-height: 1.3; }
  .q-foot .q-tot b { display: block; font-size: 20px; color: var(--plum); font-weight: 800; font-variant-numeric: tabular-nums; }
  .q-foot .q-sp { margin-left: auto; display: flex; gap: 10px; align-items: center; }
  .q-back { font: inherit; font-size: 15px; font-weight: 600; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 10px 8px; }
  .q-back[hidden] { display: none; }
  .q-next[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
  .q-peek { display: none; }

  /* the paper */
  .doc-mini h5 { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 10px; display: flex; justify-content: space-between; }
  .paper {
    position: relative; background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(23, 10, 38, .06), 0 10px 30px rgba(23, 10, 38, .08);
    color: #222; font-size: 12.5px; line-height: 1.45; overflow: hidden;
  }
  .paper-in { padding: 26px 26px 24px; position: relative; z-index: 1; }
  .paper .wm {
    position: absolute; z-index: 0; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-24deg); font-size: 84px; font-weight: 800;
    letter-spacing: .08em; color: rgba(65, 0, 118, .045); pointer-events: none; white-space: nowrap;
  }
  .paper .wm.signed { color: rgba(30, 122, 70, .08); }
  .d-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--plum); }
  .d-head img { height: 34px; width: auto; }
  .d-head .d-co { font-size: 10.5px; color: #555; margin-top: 6px; line-height: 1.4; }
  .d-head .d-co b { color: #222; font-size: 11px; }
  .d-meta { text-align: right; font-size: 11px; color: #555; }
  .d-meta b { display: block; font-size: 17px; color: var(--plum); letter-spacing: -.01em; }
  .d-meta div + div { margin-top: 2px; }
  .d-to { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; font-size: 11.5px; color: #555; }
  .d-to b { display: block; color: #222; font-size: 13px; }
  .d-to .ph { display: inline-block; width: 120px; height: 9px; border-radius: 4px; background: #eee9f3; vertical-align: middle; }
  .d-lines { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
  .d-lines th { text-align: right; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #6b6378; padding: 7px 6px; border-bottom: 1px solid #ddd; background: #f8f6fb; font-weight: 700; }
  .d-lines th:first-child, .d-lines td:first-child { text-align: left; }
  .d-lines td { text-align: right; padding: 9px 6px; border-bottom: 1px solid #eee; vertical-align: top; }
  .d-lines td:first-child b { color: #222; font-weight: 700; }
  .d-lines td:first-child span { display: block; color: #6b6378; font-size: 10.5px; margin-top: 2px; }
  .d-lines .free { color: #1e7a46; font-weight: 700; }
  .d-lines tr.new td { animation: qRow .6s ease; }
  @keyframes qRow { from { background: #f6f0ff; } }
  .d-empty { padding: 22px 6px; text-align: center; color: #9b92a8; font-size: 12px; }
  .d-tot { margin: 10px 0 0 auto; width: 62%; font-variant-numeric: tabular-nums; }
  .d-tot div { display: flex; justify-content: space-between; padding: 4px 6px; font-size: 12px; }
  .d-tot .grand { border-top: 2px solid var(--plum); margin-top: 4px; padding-top: 8px; font-size: 15px; font-weight: 800; color: var(--plum); }
  .d-then { margin-top: 8px; font-size: 11.5px; color: #555; text-align: right; }
  .d-save { margin-top: 12px; padding: 8px 10px; background: #edf8f1; color: #1e7a46; border-radius: 6px; font-size: 12px; font-weight: 700; }
  .d-scoped { margin-top: 12px; font-size: 11.5px; color: #555; border-top: 1px dashed #ddd; padding-top: 10px; }
  .d-scoped b { color: #222; }
  .side-note { margin-top: 14px; font-size: 12.5px; color: #5c5468; line-height: 1.5; }
  .side-note b { color: var(--plum); }

  /* full proposal view (step 5) */
  .q-body.prop { grid-template-columns: minmax(0, 1fr) 320px; background: #efeaf6; }
  .q-body.prop .q-main { padding: 30px 40px 60px; }
  .q-body.prop .q-side { background: #fff; border-left: 1px solid var(--rule); }
  .q-body.prop .paper { max-width: 860px; margin: 0 auto; font-size: 13px; }
  .q-body.prop .paper-in { padding: 44px 50px 40px; }
  .d-sec { margin-top: 22px; }
  .d-sec h6 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--plum); font-weight: 800; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #eee; }
  .d-sec p, .d-sec li { font-size: 12.5px; color: #333; line-height: 1.55; }
  .d-sec ul { margin: 4px 0 10px; padding-left: 18px; }
  .d-sec h6 + p b, .d-sec li b { color: #222; }
  .d-scope { columns: 2; column-gap: 28px; }
  .d-scope > div { break-inside: avoid; margin-bottom: 10px; }
  .d-scope h7, .d-scope strong.h { display: block; font-size: 12.5px; color: var(--plum); font-weight: 800; }
  .d-refund { margin-top: 16px; padding: 12px 14px; border: 1px solid #cfe9d9; background: #f2faf5; border-radius: 6px; font-size: 12.5px; color: #1d5a37; }
  .d-terms summary { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--plum); font-weight: 800; padding: 10px 0; cursor: pointer; border-bottom: 1px solid #eee; display: block; }
  .d-terms summary::after { content: " +"; }
  .d-terms[open] summary::after { content: " −"; }
  .d-terms { background: none; border: 0; padding: 0; border-radius: 0; margin-top: 22px; }
  .d-terms ol { padding-left: 18px; margin: 10px 0 0; }
  .d-terms li { font-size: 12px; color: #444; line-height: 1.55; margin-bottom: 6px; }
  .d-bank { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 12px; }
  .d-bank dt { color: #6b6378; }
  .d-bank dd { margin: 0; color: #222; font-weight: 600; }
  .d-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 30px; }
  .d-sign > div { border-top: 1px solid #333; padding-top: 8px; font-size: 11.5px; color: #555; min-height: 90px; position: relative; }
  .d-sign img { position: absolute; bottom: 100%; left: 0; height: 64px; width: auto; }
  .d-sign b { display: block; color: #222; font-size: 12.5px; }
  .d-audit { margin-top: 18px; font-size: 10.5px; color: #777; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; word-break: break-all; }

  .act h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 700; }
  .act .act-tot { font-size: 30px; font-weight: 800; color: var(--plum); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .act .act-sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
  .act .btn { width: 100%; margin-bottom: 10px; }
  .act-links { display: grid; gap: 2px; margin-top: 6px; }
  .act-links button, .act-links a { font: inherit; font-size: 14px; font-weight: 600; text-align: left; background: none; border: 0; border-top: 1px solid var(--rule); padding: 12px 0; color: var(--plum); cursor: pointer; display: flex; justify-content: space-between; }
  .act-links button::after, .act-links a::after { content: "→"; color: var(--muted); }
  .act-done { padding: 14px; border-radius: 12px; background: #edf8f1; color: #1d5a37; font-size: 14px; margin-bottom: 14px; }
  .act-done b { display: block; font-size: 16px; color: #1e7a46; }
  .act-next { list-style: none; padding: 0; margin: 14px 0 0; counter-reset: n; }
  .act-next li { counter-increment: n; position: relative; padding: 0 0 14px 34px; font-size: 13.5px; color: #4a4458; }
  .act-next li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--plum); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
  .act-next b { color: var(--plum); display: block; }
  .act-fine { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.5; }

  /* signature sheet */
  .sig { position: absolute; inset: 0; z-index: 5; display: none; background: rgba(23, 10, 38, .45); }
  .sig.open { display: grid; place-items: center; animation: qFade .2s ease; }
  .sig-card { width: min(560px, calc(100% - 24px)); background: #fff; border-radius: 16px; padding: 26px; max-height: calc(100% - 24px); overflow-y: auto; }
  .sig-card h3 { font-size: 22px; color: var(--plum); font-weight: 800; }
  .sig-card > p { font-size: 14px; color: var(--muted); margin: 6px 0 18px; }
  .sig-tabs { display: flex; gap: 6px; margin: 16px 0 8px; }
  .sig-tabs button { font: inherit; font-size: 13.5px; font-weight: 700; border: 1.5px solid var(--rule); background: #fff; color: var(--plum); border-radius: 99px; padding: 7px 14px; cursor: pointer; }
  .sig-tabs button[aria-pressed="true"] { background: var(--plum); color: #fff; border-color: var(--plum); }
  .sig-pad { position: relative; border: 1.5px dashed #c9b9e2; border-radius: 12px; background: #fcfbfe; height: 170px; touch-action: none; }
  .sig-pad canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
  .sig-pad .sig-line { position: absolute; left: 22px; right: 22px; bottom: 40px; border-bottom: 1px solid #d8cfe6; pointer-events: none; }
  .sig-pad .sig-ph { position: absolute; left: 24px; bottom: 14px; font-size: 12px; color: #a59bb3; pointer-events: none; }
  .sig-pad .sig-clear { position: absolute; right: 10px; top: 8px; font: inherit; font-size: 12.5px; font-weight: 700; background: none; border: 0; color: var(--plum); cursor: pointer; }
  .sig-typed { font-family: "Caveat", cursive; font-size: 46px; color: #1b1464; height: 170px; display: flex; align-items: center; padding: 0 24px; border: 1.5px dashed #c9b9e2; border-radius: 12px; background: #fcfbfe; overflow: hidden; white-space: nowrap; }
  .sig-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
  .sig-legal { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.5; }

  .q-toast { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--plum-ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 6; animation: qFade .2s ease; }

  @media (max-width: 1000px) {
    .q-box { inset: 0; transform: none; width: 100%; height: 100%; border-radius: 0; animation: qFade .2s ease; }
    .q-steps li span { display: none; }
    .q-body, .q-body.prop { grid-template-columns: 1fr; }
    .q-side { display: none; }
    .q-body.peek .q-side { display: block; position: absolute; inset: 64px 0 72px; z-index: 4; border: 0; }
    .q-body.prop .q-side { display: block; border-left: 0; border-top: 1px solid var(--rule); }
    .q-body.prop { overflow-y: auto; display: block; }
    .q-body.prop .q-main { overflow: visible; padding: 16px 12px 24px; }
    .q-body.prop .paper-in { padding: 26px 20px; }
    .q-main { padding: 24px 18px 30px; }
    .q-peek { display: inline-flex; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--plum); background: #f3eff8; border: 0; border-radius: 99px; padding: 8px 12px; cursor: pointer; }
    .q-brand span { display: none; }
  }
  @media (max-width: 640px) {
    .q-cards, .q-cards-2, .q-bill, .q-fields { grid-template-columns: 1fr; }
    .q-top { padding: 10px 12px; gap: 10px; }
    .q-brand img { height: 26px; }
    .q-steps li + li::before { width: 8px; }
    .q-foot { padding: 10px 12px; gap: 8px; }
    .q-foot .q-tot { font-size: 12px; }
    .q-foot .q-tot b { font-size: 16px; white-space: nowrap; }
    .q-foot .btn { padding: 12px 16px; }
    .d-scope { columns: 1; }
    .d-sign { grid-template-columns: 1fr; }
    .d-to { grid-template-columns: 1fr; }
    .q-pane h3 { font-size: 23px; }
  }

  /* ---------- hero: BCL Connect on the left, Get a quote panel on the right ---------- */
  .hero:has(.hero-split) { overflow: clip; }   /* "hidden" would turn the hero into the sticky container */
  /* backdrop: the BCL Connect banner's skyline and waves (logo area cleaned), faded behind the text */
  .hero {
    background:
      linear-gradient(90deg, rgba(253, 252, 255, .94) 0%, rgba(253, 252, 255, .6) 40%, rgba(253, 252, 255, 0) 66%),
      url("../hero-backdrop.webp") center bottom / cover no-repeat,
      #fdfcff;
    padding-bottom: 120px;
  }
  @media (max-width: 1024px) {
    .hero { background: linear-gradient(180deg, rgba(253, 252, 255, .9), rgba(253, 252, 255, .55) 70%, rgba(253, 252, 255, .1)), url("../hero-backdrop.webp") center bottom / 200% auto no-repeat, #fdfcff; }
  }

  /* ---------- hero right: the BCL Connect logo heading ---------- */
  .hero-side { align-self: center; }
  .hero-logo { margin: 0 0 18px; line-height: 1; }
  .hero-logo img { display: block; width: 100%; height: auto; }
  /* "powered by" lines up with the start of "BCL Connect" in the logo */
  .hero-logo .h1-by { display: block; padding-left: 24.6%; margin-top: 10px; font-family: "Noto Sans", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: .01em; color: #410076; }

  /* ---------- See it in action: video left, carousel right ---------- */
  .sc-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .sc-col .hcar-title { margin: 0 0 10px 2px; }
  .sc-pair .sc-video { max-width: none; margin: 0; box-shadow: 0 24px 60px rgba(61, 27, 122, .12); }
  @media (max-width: 960px) { .sc-pair { grid-template-columns: 1fr; gap: 30px; } }
  /* ---------- tour video ---------- */
  .sc-video { position: relative; max-width: 1000px; margin: 0 auto; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; background: #f6f4fb; border: 1px solid var(--rule); box-shadow: 0 30px 70px rgba(43, 17, 65, .14); }
  .sc-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .sc-play { position: absolute; inset: 0; border: 0; padding: 24px 26px; cursor: pointer; display: flex; align-items: flex-end; background: linear-gradient(180deg, transparent 55%, rgba(27, 20, 100, .5)); font: inherit; text-align: left; }
  .sc-play i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 86px; height: 86px; border-radius: 50%; background: #3D1B7A; color: #fff; display: grid; place-items: center; font-size: 28px; font-style: normal; padding-left: 6px; box-shadow: 0 0 0 14px rgba(105, 88, 194, .25); transition: transform .2s; }
  .sc-play:hover i { transform: translate(-50%, -50%) scale(1.07); }
  .sc-play span { color: #fff; font-size: 14px; }
  .sc-play b { display: block; font-family: Jost, sans-serif; font-size: 22px; font-weight: 500; }
  .sc-video.playing .sc-play { display: none; }
  .sc-shots-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; max-width: 1000px; margin: 48px auto 16px; }
  .sc-shots-head h3 { font-size: 22px; font-weight: 500; color: #410076; }
  .sc-shots-head p { font-size: 15px; color: var(--muted); }
  .sc-shots { list-style: none; padding: 0; margin: 0 auto; max-width: 1000px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .sc-shots button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; font: inherit; }
  .sc-shots img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--rule); background: #f6f4fb; transition: transform .2s, box-shadow .2s; }
  .sc-shots button:hover img, .sc-shots button:focus-visible img { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(43, 17, 65, .14); }
  .sc-shots button:focus-visible { outline: 3px solid #b9a3e3; outline-offset: 4px; border-radius: 12px; }
  .sc-shots span { display: block; margin-top: 8px; font-size: 15px; font-weight: 500; color: #070329; }
  .sc-box { position: fixed; inset: 0; z-index: 90; background: rgba(15, 8, 30, .82); display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; padding: 24px 12px; }
  .sc-box[hidden] { display: none; }
  .sc-box figure { margin: 0; text-align: center; }
  .sc-box img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); background: #fff; }
  .sc-box figcaption { color: #fff; font-family: Jost, sans-serif; font-size: 18px; margin-top: 12px; }
  .sc-box figcaption small { display: block; font-family: "Noto Sans", sans-serif; font-size: 13px; opacity: .7; }
  .sc-nav, .sc-close { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; cursor: pointer; justify-self: center; }
  .sc-nav:hover, .sc-close:hover { background: rgba(255, 255, 255, .26); }
  .sc-close { position: absolute; top: 16px; right: 16px; font-size: 24px; }
  @media (max-width: 900px) {
    .sc-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sc-shots-head { flex-direction: column; gap: 4px; }
    .sc-box { grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 16px 4px; }
    .sc-nav { width: 40px; height: 40px; font-size: 22px; }
  }
  .hero-split { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 56px; align-items: start; }
  .hero-main .hero-sub { margin-top: 22px; }
  .hero-quote {
    position: sticky; top: 100px; background: #fff; border: 1px solid var(--rule); border-radius: 20px; padding: 28px 26px 24px;
    box-shadow: 0 24px 60px rgba(43, 17, 65, .10);
  }
  .hq-eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #b4365f; display: flex; align-items: center; gap: 10px; }
  .hq-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
  .hero-quote h2 { font-size: 26px; font-weight: 800; color: var(--plum); letter-spacing: -.02em; margin: 10px 0 6px; }
  .hq-lede { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
  .hq-opts { display: grid; gap: 10px; margin: 20px 0 16px; }
  .hq-opt { position: relative; display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; padding: 14px 14px; border: 1.5px solid var(--rule); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
  .hq-opt:hover { border-color: #c9b9e2; }
  .hq-opt input { position: absolute; opacity: 0; pointer-events: none; }
  .hq-tick { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #c3b6d6; display: grid; place-items: center; background: #fff; }
  .hq-opt input:checked ~ .hq-tick { border-color: var(--plum); background: var(--plum); box-shadow: inset 0 0 0 4px #fff; }
  .hq-opt:has(input:checked) { border-color: var(--plum); background: #faf7fe; }
  .hq-opt:has(input:focus-visible) { outline: 3px solid #b9a3e3; outline-offset: 2px; }
  .hq-txt b { display: block; font-size: 16px; font-weight: 800; color: var(--plum); }
  .hq-txt b i { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: #f0a8c1; color: var(--plum-ink); padding: 2px 7px; border-radius: 99px; margin-left: 6px; vertical-align: 2px; }
  .hq-txt small { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }
  .hq-opt em { font-style: normal; font-weight: 800; color: var(--plum); font-size: 15px; white-space: nowrap; text-align: right; }
  .hq-opt em small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); }
  .hq-start { width: 100%; padding: 15px; font-size: 16px; }
  .hq-points { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); }
  .hq-points li { display: flex; gap: 8px; align-items: baseline; }
  .hq-points li::before { content: "✓"; color: var(--plum); font-weight: 800; }
  @media (max-width: 1024px) {
    .hero-split { grid-template-columns: 1fr; gap: 36px; }
    .hero-quote { position: static; max-width: 560px; }
  }
  @media (max-width: 720px) { .hero-quote { padding: 22px 18px 20px; } .hero-quote h2 { font-size: 22px; } }

  .d-sign { margin-top: 86px; }
  .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .q-pane h3:focus { outline: none; }

  /* get-started launcher (replaces the old lead form) */
  .launch { background: #fff; border: 1px solid var(--rule); border-radius: 20px; padding: 32px; }
  .launch-opts { display: grid; gap: 10px; margin-top: 20px; }
  .launch-opts button {
    font: inherit; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 16px 18px;
    border: 1.5px solid var(--rule); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s;
  }
  .launch-opts button:hover { border-color: var(--plum); background: #faf7fe; }
  .launch-opts button:focus-visible { outline: 3px solid #b9a3e3; outline-offset: 2px; }
  .launch-opts b { font-size: 17px; color: var(--plum); font-weight: 800; }
  .launch-opts span { grid-column: 1; font-size: 14px; color: var(--muted); }
  .launch-opts em { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; font-weight: 800; color: var(--plum); font-size: 16px; white-space: nowrap; }
  .launch-opts em small { font-weight: 500; color: var(--muted); font-size: 12.5px; }
  .launch .respond-note { margin: 18px 0 0; text-align: left; font-weight: 500; color: var(--muted); }
  @media (max-width: 720px) { .launch { padding: 22px; } }

  /* If someone prints the page while the builder is open, print the page normally without the dialog */
  @media print { #bclq { display: none !important; } }

  /* Remove controls on quotation lines (screen only, never in the PDF) */
  .d-rm { display: inline-block; margin-top: 4px; font: inherit; font-size: 11px; font-weight: 700; color: #b4365f; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
  .d-rm:hover { color: #8c1d43; }
  .d-lines td:first-child .d-rm { display: block; }
  .d-scoped-list { list-style: none; padding: 0; margin: 6px 0 0; }
  .d-scoped-list li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
  .d-scoped-list .d-rm { margin: 0; }
  .q-nudge .q-added { flex: none; margin-left: auto; font-size: 13px; font-weight: 700; color: #1e7a46; white-space: nowrap; align-self: center; }
  .q-nudge .q-undo { margin-left: 8px !important; background: #fff !important; color: #b4365f !important; border: 1.5px solid #e9c3d0 !important; }
  .q-items { list-style: none; padding: 0; margin: 0 0 16px; background: #fff; border: 1px solid var(--rule); border-radius: 12px; }
  .q-items li { display: grid; grid-template-columns: 1fr auto 28px; gap: 8px; align-items: center; padding: 9px 8px 9px 14px; border-top: 1px solid var(--rule); font-size: 13.5px; }
  .q-items li:first-child { border-top: 0; }
  .q-items span { font-weight: 700; color: var(--plum); }
  .q-items em { font-style: normal; font-variant-numeric: tabular-nums; color: #4a4458; white-space: nowrap; }
  .q-xs { width: 26px; height: 26px; border-radius: 50%; border: 0; background: #f6eef2; color: #b4365f; font-size: 17px; line-height: 1; cursor: pointer; }
  .q-xs:hover, .q-xs:focus-visible { background: #b4365f; color: #fff; }
  .act .q-items { margin: 0 0 16px; }
  .q-date { display: flex; gap: 10px; flex-wrap: wrap; }
  .q-date select { min-width: 150px; }
  .q-date-note { font-size: 13px; color: var(--muted); margin-top: 8px; }

  /* =====================================================================
     v8: TYPOGRAPHY AS ON bcl.ae
     Measured from bcl.ae: Jost for headings (sections 32px / 500 / #410076, figures 35px / 500), Noto Sans for text
     (body 17.92px / 1.65, lead lines 23px / 600, eyebrows 14px uppercase grey, buttons 18px / 500, 4px corners).
     Pricing keeps the exact bcl.ae pricing styles and the quotation keeps its own document fonts.
     ===================================================================== */
  body { font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #070329; letter-spacing: normal; }
  h1, h2, h3, h4 { font-family: Jost, "Noto Sans", sans-serif; letter-spacing: normal; }
  .nav-links { font-size: 16px; font-weight: 400; text-transform: uppercase; }
  .nav-links a { color: #3D1B7A; }
  .eyebrow { font-size: 14px; font-weight: 400; line-height: 25px; letter-spacing: .7px; text-transform: uppercase; color: #808080; gap: 0; }
  .eyebrow::before { display: none; }
  .section-head h2, .split h2, .lead-copy h2, .cmp-head h3, .band h2 { font-size: 32px; font-weight: 500; line-height: 1.2; color: #410076; letter-spacing: normal; }
  .section-head h2 .accent, .band h2 .accent { display: inline; color: #6958c2; }
  .section-head { align-items: start; }
  .section-head h2 { margin-top: 10px; }
  .section-head p { padding-top: 6px; }
  .nav-cta .btn { font-weight: 500; }
  .band h2 { color: #fff; }
  .band h2 .accent { color: #f0a8c1; }
  .section-head p, .split p.lead, .lead-copy p, .spot-lead { font-size: 17.92px; line-height: 1.65; color: #070329; }
  .hero-sub { font-family: "Noto Sans", sans-serif; font-size: 23px; font-weight: 600; line-height: 1.5; letter-spacing: normal; color: #070329; }
  .hero .tagline { font-family: "Noto Sans", sans-serif; font-size: 17.92px; font-weight: 600; letter-spacing: normal; }
  .hero-list li { font-size: 16px; font-weight: 500; color: #070329; }
  .hero-points span { font-size: 15px; }
  .btn { font-family: "Noto Sans", sans-serif; font-size: 18px; font-weight: 500; border-radius: 4px; letter-spacing: normal; }
  .btn-primary { background: #3D1B7A; }
  .btn-primary:hover { background: #2c1260; }
  .btn-outline { border-color: #3D1B7A; color: #3D1B7A; }
  .stat b { font-family: Jost, sans-serif; font-size: 35px; font-weight: 500; letter-spacing: normal; color: #000; }
  .stat span { font-size: 15px; }
  .mod-grid.four .mod h3 { font-size: 18px; font-weight: 500; color: #410076; }
  .mod-grid.four .mod p { font-size: 14.5px; }
  .mod p { font-size: 15px; }
  .spot h3 { font-size: 28px; font-weight: 500; color: #410076; }
  .spot-sub { font-family: "Noto Sans", sans-serif; font-size: 17px; font-weight: 600; }
  .duo-item h4 { font-size: 20px; font-weight: 500; color: #410076; }
  .duo-item p, .compare td { font-size: 16px; }
  .jr-stop h4 { font-size: 17px; font-weight: 500; }
  .jr-stop p { font-size: 14px; }
  .jr-tally b { font-family: Jost, sans-serif; font-size: 40px; font-weight: 500; letter-spacing: normal; }
  .review blockquote { font-size: 15.5px; line-height: 1.65; }
  .review figcaption { font-family: Jost, sans-serif; font-weight: 500; font-size: 17px; }
  .faq summary { font-family: "Noto Sans", sans-serif; font-size: 17px; font-weight: 500; color: #070329; }
  .faq details p { font-size: 16px; line-height: 1.65; }
  .faq-group { font-family: "Noto Sans", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .7px; color: #808080; }
  .gs-steps b { font-family: "Noto Sans", sans-serif; font-weight: 600; }
  .hero-quote h2 { font-size: 26px; font-weight: 500; letter-spacing: normal; color: #410076; }
  .hq-eyebrow { font-size: 14px; font-weight: 400; letter-spacing: .7px; color: #808080; }
  .hq-eyebrow::before { display: none; }
  .q-pane h3 { font-weight: 500; letter-spacing: normal; }
  footer h5 { font-family: Jost, sans-serif; font-weight: 500; font-size: 18px; }
  @media (max-width: 720px) {
    .section-head h2, .split h2, .lead-copy h2, .cmp-head h3, .band h2 { font-size: 28px; }
    .hero-sub { font-size: 20px; }
    .section-head p, .split p.lead, .lead-copy p { font-size: 16px; }
  }

  /* =====================================================================
     PRICING: replica of the bcl.ae pricing section (Essential and Grow).
     Markup, styles and behaviour taken from bcl.ae; scoped to #pricing so the rest of the page is untouched.
     ===================================================================== */
  #pricing { line-height: 1.5; }
  #pricing .bclp-wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
  #pricing .bclp-banner { display: block; width: 100%; height: auto; margin: 0 auto 26px; }
  #pricing .bcl-pricing, #pricing .bcl-shared-features { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; }
  #pricing h2, #pricing h3, #pricing h4 { letter-spacing: normal; line-height: 1.3; }
  #pricing .bcl-pricing h2 { font-weight: 500; }
  #pricing .stages h2, #pricing .stages h3 { color: var(--night-blue); }
  #pricing summary::after { content: none !important; }
  /* Essential/Grow panel: a little broader than bcl.ae's 800px (cards about 440px each) */
  #pricing .bclp-wrap .stages { margin: 30px auto 0; max-width: 940px; }
  /* bcl.ae's font throughout (the page's own heading font must not leak in) */
  #pricing h2, #pricing h3, #pricing h4, #pricing .label, #pricing summary { font-family: inherit; }
  /* accordion titles as on bcl.ae: the dot sits inline with the title */
  #pricing .bclp-wrap .stages .feature-accordion summary .label { display: block; }
  #pricing .bclp-wrap .stages .feature-accordion summary .label::before { display: inline-block; vertical-align: middle; margin: -2px 8px 0 0; }
  #pricing .bclp-wrap .stages .feature-accordion summary .count { margin-left: 6px; }
  /* "What's included" boxes: an even 1px border instead of the heavy left edge */
  #pricing .bclp-wrap .stages .feature-accordion details,
  #pricing .bclp-wrap .stages .feature-accordion details:last-of-type { border: 1px solid #d9ccf7; box-shadow: none; }
  /* parts of bcl.ae's theme the widget relies on */
  #pricing .stages .slider { position: absolute; inset: 0; background: #ccc; border-radius: 26px; cursor: pointer; transition: .4s; }
  #pricing .stages .toggle input:checked + .slider { background: #6958C2; }
  #pricing .stages .toggle input:checked + .slider:before { transform: translateX(25px); }
  #pricing .stages .toggle input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(105, 88, 194, .35); }
  #pricing .stages .toggle-label, #pricing .stages .toggle-label.active { font-weight: 600; cursor: default; }
  #pricing .stages .price-row { font-size: inherit; color: inherit; }
  #pricing .acc-note { display: block; font-size: 14.5px; color: #161b45; line-height: 1.5; padding: 10px 0 0; }
  #pricing .stages .cta { text-decoration: none; }
  #pricing .stages .tab { border-radius: 0; border-left: 0; font-family: inherit; }
  #pricing .bcl-shared-features { margin-top: 30px; }
  @keyframes bclp-glow { 0%, 100% { box-shadow: 0 0 0 3px rgba(109,75,224,.15); } 50% { box-shadow: 0 0 0 6px rgba(109,75,224,.28); } }
  @media (prefers-reduced-motion: reduce) { #pricing .feature-bar-inner, #pricing .new-badge { animation: none !important; } }
#pricing .bcl-pricing *{box-sizing:border-box;margin:0;padding:0}
#pricing .bcl-pricing{--night-blue:#001441;--purple:#6958C2;--purple-light:#f0eefb;--white:#fff;--gray-border:#e5e7eb;--gray-text:#6b7a99;font-family:inherit;font-size:1.2em;color:var(--night-blue)}
#pricing .bcl-pricing, #pricing .bcl-pricing *{font-family:inherit}
#pricing .bcl-pricing .plan-col:hover .cta-outline{background:#6858c2;color:#fff}
#pricing .bcl-pricing h2{text-align:center;font-size:2rem;margin-bottom:6px;color:var(--night-blue)}
#pricing .bcl-pricing .subtitle{text-align:center;color:var(--gray-text);margin-bottom:10px;font-size:1.08rem}
#pricing .bcl-pricing .free-wrap{text-align:center;margin-bottom:16px}
#pricing .bcl-pricing .free-note{background:var(--purple-light);color:var(--purple);font-weight:700;font-size:.9rem;padding:8px 20px;border-radius:30px;display:inline-block}
#pricing .bcl-pricing .bcl-header-row{display:flex;align-items:center;justify-content:space-between;gap:28px 40px;max-width:1160px;margin:0 auto 10px;flex-wrap:wrap}
#pricing .bcl-pricing .bcl-header-copy{flex:1 1 300px;min-width:0;text-align:left}
#pricing .bcl-pricing .bcl-header-copy h2, #pricing .bcl-pricing .bcl-header-copy .subtitle, #pricing .bcl-pricing .bcl-header-copy .free-wrap{text-align:left}
#pricing .bcl-pricing .bcl-header-copy .free-wrap{margin-bottom:10px}
#pricing .bcl-pricing .bcl-usp-wrap{flex:0 1 400px;min-width:280px;border:1px solid var(--gray-border);border-radius:16px;overflow:hidden;background:var(--white);box-shadow:0 8px 28px rgba(0,20,65,.08)}
#pricing .bcl-pricing .bcl-usp-title{text-align:center;font-size:.98rem;font-weight:800;color:var(--night-blue);padding:8px 10px;border-bottom:1px solid var(--gray-border);letter-spacing:.02em}
#pricing .bcl-pricing .bcl-usp-table{width:100%;border-collapse:collapse;font-size:.82rem}
#pricing .bcl-pricing .bcl-usp-table th, #pricing .bcl-pricing .bcl-usp-table td{padding:6px 10px;border-bottom:1px solid var(--gray-border);vertical-align:middle}
#pricing .bcl-pricing .bcl-usp-table tbody tr:last-child td{border-bottom:none}
#pricing .bcl-pricing .bcl-usp-table th:first-child, #pricing .bcl-pricing .bcl-usp-table td:first-child{text-align:left;color:var(--night-blue);font-weight:600}
#pricing .bcl-pricing .bcl-usp-table th:not(:first-child), #pricing .bcl-pricing .bcl-usp-table td:not(:first-child){text-align:center;color:var(--gray-text)}
#pricing .bcl-pricing .bcl-usp-table thead th{font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--night-blue)}
#pricing .bcl-pricing .bcl-usp-table thead th.col-bcl{color:var(--purple);text-transform:none;letter-spacing:0;font-size:.9rem}
#pricing .bcl-pricing .usp-pill{display:inline-block;font-weight:800;font-size:.76rem;padding:5px 12px;border-radius:999px;white-space:nowrap}
#pricing .bcl-pricing .usp-pill--pu{background:var(--purple-light);color:var(--purple)}
#pricing .bcl-pricing .usp-pill--gr{background:#dcfce7;color:#15803d}
#pricing .bcl-pricing .refund-wrap{text-align:left;margin-bottom:20px}
#pricing .bcl-pricing .refund-badge{display:inline-block;background:#dcfce7;color:#16a34a;font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:30px;border:1px solid #bbf7d0}
#pricing .feature-bar{max-width:1100px;width:100%;margin:0 auto 20px;background:#f0eefb;border:1px solid #d7d0f6;border-radius:14px;display:flex;align-items:center;overflow:hidden;position:relative;box-shadow:0 8px 20px rgba(0,0,0,.05);padding:0}
#pricing .feature-bar-inner{display:flex;width:max-content;animation:bclp-marquee 25s linear infinite}
#pricing .feature-item{display:flex;align-items:center;gap:15px;padding:15px 24px;position:relative;min-width:360px;margin-right:30px;flex-shrink:0}
#pricing .icon-box{width:46px;height:46px;min-width:46px;border-radius:50%;background:#5A36D6;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}
#pricing .icon-box svg{width:23px}
#pricing .feature-content h4{font-size:15px;font-weight:700;color:#222;margin-bottom:4px}
#pricing .feature-content p{font-size:13px;color:#666;line-height:1.4}
@media(max-width:768px){#pricing .feature-bar{flex-direction:column}
#pricing .feature-item:not(:last-child)::after{content:"";width:90%;height:1px;position:absolute;left:5%;right:auto;top:auto;bottom:0;background:#d7d0f6}
}
@keyframes bclp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#pricing .stages{margin:0;font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,sans-serif;background:#FBFAFD;-webkit-font-smoothing:antialiased;--purple:#4A1A7A;--purple-dark:#35105A;--purple-tint:#F4EFFA;--ink:#1E1B24;--muted:#6B6577;--line:#E7E1F0;--orange:#FF7A50;--text:#1F1730;--orange-tint:#FFEDE6;--white:#FFFFFF;--night-blue:#001441;--purple:#6958C2;--purple-light:#f0eefb;--white:#FFFFFF;--gray-border:#e5e7eb;--gray-text:#6b7a99;--blue-text:#341297;--purple-soft:#F7F5FB;font-size:1.2em;color:var(--night-blue)}
#pricing .stages{display:grid;gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--white)}
#pricing .stages.stag-two-third{grid-template-columns:2fr 1fr}
#pricing .stages.stag-one-half{grid-template-columns:1fr 1fr}
#pricing .stages.stag-full{grid-template-columns:1fr}
#pricing .stage{padding:36px 20px}
#pricing .stage:first-child{background:var(--purple-tint)}
#pricing .stage:last-child{border-left:1px solid var(--line)}
#pricing .stage-intro .stage-head{min-height:190px}
#pricing .stage-intro .stage-head.no-head{min-height:unset}
#pricing .stage-head{margin-bottom:6px}
#pricing .stage-tag{background:var(--purple);color:#fff;font-size:.78rem;font-weight:700;padding:3px 12px;border-radius:20px;display:inline-block;margin-bottom:8px;letter-spacing:.5px;text-transform:uppercase}
#pricing .stage-head.center{text-align:center}
#pricing .stage-head.center .stage-sub{margin-left:auto;margin-right:auto}
#pricing .stage-head h2{font-size:19px;margin:12px 0 0;font-weight:700;line-height:1.3}
#pricing .stage-sub{margin:10px 0 28px;max-width:420px;color:var(--gray-text);margin-bottom:10px;font-size:1.08rem}
#pricing .cards{display:grid;gap:22px}
#pricing .cards.one{grid-template-columns:minmax(0,1fr)}
#pricing .cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
#pricing .cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
#pricing .cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
#pricing .card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:32px 24px 28px;display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease}
#pricing .card:hover{box-shadow:0 12px 32px rgba(74,26,122,.10);transform:translateY(-2px)}
#pricing .card.featured{border:2px solid var(--purple);box-shadow:0 16px 40px rgba(74,26,122,.14)}
#pricing .card.urgent{border:2px solid var(--purple);box-shadow:0 16px 40px rgba(74,26,122,.14)}
#pricing .badge-top{position:absolute;top:-13px;left:28px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--white);padding:5px 14px;border-radius:20px}
#pricing .badge-top.purple{background:var(--purple)}
#pricing .badge-top.orange{background:var(--purple)}
#pricing .card-eyebrow{font-size:.936rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--night-blue);margin-bottom:12px;min-height:45px}
#pricing .card h3{font-size:19px;margin:0 0 8px;font-weight:700;min-height:46px}
#pricing .card .desc{font-size:.96rem;color:var(--gray-text);line-height:1.5;margin-bottom:18px;min-height:81px}
#pricing .price-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
#pricing .strike{display:block;font-size:1.02rem;color:#9ca3af;text-decoration:line-through;min-height:20px;margin-right:0;margin-bottom:2px}
#pricing .off-pill{background:#FAA18F;width:100px;border-radius:14px;font-size:14px;margin-top:5px!important;margin-bottom:5px!important;text-align:center}
#pricing .stages .price-main{display:flex;align-items:baseline;gap:6px;margin:10px 0 2px}
#pricing .price-main .cur{font-size:1.14rem;font-weight:600;vertical-align:top;margin-top:7px;display:inline-block}
#pricing .price-main .amt{font-size:2.64rem;font-weight:800;color:var(--night-blue);line-height:1}
#pricing .price-note{font-size:.864rem;color:var(--gray-text);margin-bottom:20px}
#pricing .price-note .vat{color:var(--muted)}
#pricing .stages .cta{display:block;width:100%;padding:13px;border-radius:8px;font-weight:700;font-size:1.056rem;cursor:pointer;border:none;transition:.2s;text-align:center;background:#fff;border:2px solid var(--purple);color:var(--purple);margin-bottom:26px}
#pricing .stages .cta:hover{background:#6858c2;color:var(--white)}
#pricing .stages .cta.solid{background:var(--purple);color:var(--white)}
#pricing .stages .cta.solid:hover{background:var(--purple-dark)}
#pricing .cta.orange-solid{background:var(--orange);border-color:var(--orange);color:var(--white)}
#pricing .cta.orange-solid:hover{background:#E8663D}
#pricing .who-for{background:var(--purple-tint);border-radius:10px;padding:12px 14px;margin-bottom:20px}
#pricing .who-for .label{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--purple);margin-bottom:4px;display:flex;align-items:center;gap:6px}
#pricing .who-for p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink)}
#pricing .feat-heading{font-size:.984rem;font-weight:700;color:var(--night-blue);margin-bottom:14px}
#pricing .feat-group{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#9ca3af;margin:0 0 8px;display:flex;align-items:center;gap:6px}
#pricing .feat-group::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--purple);flex:none}
#pricing ul.feats{list-style:none;margin:0 0 4px;padding:0}
#pricing ul.feats li{position:relative;padding-left:24px;font-size:.85rem;color:#374151;margin-bottom:9px;line-height:1.45}
#pricing ul.feats li::before{content:"✓";position:absolute;left:0;top:0;color:var(--purple);font-weight:700;font-size:13px}
#pricing .stages .toggle-wrap{display:flex;justify-content:left;align-items:center;gap:14px;margin-bottom:12px}
#pricing .stages .center .toggle-wrap{justify-content:center}
#pricing .stages .toggle input{opacity:0;width:0;height:0}
#pricing .stages .toggle-label{font-size:1rem;font-weight:600;color:var(--gray-text)}
#pricing .stages .toggle-label.active{color:var(--night-blue)}
#pricing .stages .save-badge{background:#dcfce7;color:#16a34a;font-size:.9rem;font-weight:700;padding:2px 8px;border-radius:20px}
#pricing .stages .slider:before{content:'';position:absolute;width:19px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.3s}
#pricing .stages .toggle{position:relative;width:50px;height:24px}
#pricing .stages .deskt{display:block}
#pricing .stages .mobil{display:none}
#pricing .bcl-mobile{display:none}
#pricing .stages .nav-row{display:none}
@media (max-width:900px){#pricing .stages{grid-template-columns:1fr}
#pricing .stage:last-child{border-left:none;border-top:1px solid var(--line)}
}
@media (max-width:768px){#pricing .stages .nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
#pricing .stages .nav-btn{background:#fff;border:1px solid var(--gray-border);border-radius:8px;padding:8px 18px;font-size:.96rem;font-weight:700;color:var(--purple);cursor:pointer;transition:.2s}
#pricing .stages .nav-btn:disabled{opacity:.3;cursor:default;background:#fff}
#pricing .stages .nav-dots{display:flex;gap:6px}
#pricing .stages .nav-dot{width:8px;height:8px;border-radius:50%;background:var(--gray-border);cursor:pointer;transition:.2s}
#pricing .stages .nav-dot.active{background:var(--purple);width:20px;border-radius:4px}
#pricing .stages.stag-two-third{grid-template-columns:1fr}
#pricing .stages.stag-one-half{grid-template-columns:1fr}
#pricing .stages.stag-full{grid-template-columns:1fr}
#pricing .stages .deskt{display:none!important}
#pricing .stages .toggle{width:43px!important}
#pricing .stages .mobil{display:block}
#pricing .stages .slider:before{top:3px;height:18px!important;width:18px!important}
#pricing .stage{padding:36px 10px}
#pricing .bcl-mobile{display:block}
#pricing .stages .plan-tabs{display:flex;border-radius:12px;overflow:hidden;border:1px solid var(--gray-border);background:#fff;margin-bottom:16px}
#pricing .stages .tab{flex:1;padding:10px 4px;text-align:center;font-size:.95rem;font-weight:700;text-transform:normal;letter-spacing:0;color:var(--gray-text);cursor:pointer;border-right:1px solid var(--gray-border);transition:.2s;background:#fff;border-top:3px solid transparent;border-bottom:0 solid transparent}
#pricing .stages .tab.active{color:var(--purple);border-top:3px solid var(--purple);background:var(--purple-light)}
#pricing .cards.two{grid-template-columns:1fr}
#pricing .cards.three{grid-template-columns:1fr}
#pricing .cards.four{grid-template-columns:1fr}
#pricing .stags-tabs-active .card:not(.active){display:none}
}
#pricing .stages .feature-accordion{width:100%;margin-top:2px}
#pricing .stages .feature-accordion details{border-top:1px solid var(--line);margin:0}
#pricing .stages .feature-accordion details:last-child{border-bottom:1px solid var(--line)}
#pricing .stages .feature-accordion summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:10px 0;cursor:pointer;color:var(--blue-text);font-size:.92rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
#pricing .stages .feature-accordion summary::-webkit-details-marker{display:none}
#pricing .stages .feature-accordion summary .label{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;min-width:0}
#pricing .stages .feature-accordion summary .count{color:var(--gray-text);font-size:.78rem;font-weight:400;text-transform:none;letter-spacing:0;white-space:nowrap}
#pricing .stages .feature-accordion summary .chevron{width:10px;height:10px;flex:0 0 10px;border-right:2px solid var(--gray-text);border-bottom:2px solid var(--gray-text);transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;margin-right:4px}
#pricing .stages .feature-accordion details[open] summary .chevron{transform:rotate(225deg) translateY(-1px)}
#pricing .stages .feature-accordion details{background:linear-gradient(90deg,#f3effc,#fff);border:1px solid #d9ccf7;border-left:4px solid var(--purple);border-radius:12px;margin-top:12px;padding:0 12px}
#pricing .stages .feature-accordion details[open]{padding-bottom:14px}
#pricing .stages .feature-accordion span.new-badge{flex:none;padding:3px 10px;border-radius:999px;background:linear-gradient(135deg,#6d4be0,#b04be0);color:#fff;font-size:12px;font-weight:700;box-shadow:0 0 0 3px rgba(109,75,224,.15);animation:bclp-glow 2s ease-in-out infinite}
#pricing .feature-title-group span.feature-description{display:block;margin-top:2px;font-size:13.5px;line-height:1.45;color:#6b6f86}
#pricing .feature-title-group span.feature-title{display:block;font-size:14.5px;font-weight:600;color:#161b45}
#pricing .stages .feature-accordion details[new] .panel ul li+li{border-top:1px dashed #e0d6f7}
#pricing .stages .feature-accordion details[new] .panel ul li{padding-top:8px;padding-bottom:8px}
#pricing .stages .feature-accordion .panel{padding:0 2px 14px 18px;padding-bottom:0;padding-bottom:0}
#pricing .stages .feature-accordion .panel ul{list-style:none;margin:0;padding:0}
#pricing .stages .feature-accordion .panel li{display:flex;align-items:flex-start;gap:9px;padding:5px 0;font-size:13px;color:var(--text);line-height:1.4}
#pricing .stages .feature-accordion .panel li::before{content:"✓";color:var(--purple);font-size:12px;font-weight:700;line-height:1.5;flex:none}
@media (max-width:767px){#pricing .stages .feature-accordion summary{gap:10px;font-size:.84rem}
#pricing .stages .feature-accordion summary .count{font-size:.72rem}
#pricing .stages .feature-accordion .panel{padding-left:12px}
}
#pricing .stages .feature-accordion details{border-top:1px solid var(--line)}
#pricing .stages .feature-accordion details:last-of-type{border-bottom:1px solid var(--line)}
#pricing .stages .feature-accordion summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:14px;gap:10px}
#pricing .stages .feature-accordion summary::-webkit-details-marker{display:none}
#pricing .stages .feature-accordion summary .label{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-weight:600;color:var(--blue-text)}
#pricing .stages .feature-accordion summary .label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-text);flex:none;align-self:center}
#pricing .stages .feature-accordion summary .count{font-size:11px;font-weight:400;text-transform:none;letter-spacing:normal;color:#4A4458}
#pricing .stages .feature-accordion summary .chevron{width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .18s ease;flex:none}
#pricing .stages .feature-accordion details[open] summary .chevron{transform:rotate(-135deg)}
#pricing .stages .feature-accordion{width:100%;margin-top:2px}
#pricing .filler-note{margin-top:20px;flex:1;display:flex;flex-direction:column;justify-content:center;background:var(--purple-soft);border-radius:10px;padding:22px 20px}
#pricing .filler-note p{margin:0;font-size:13px;color:var(--muted);line-height:1.6}
#pricing .filler-note p+p{margin-top:12px}
#pricing .filler-note strong{color:var(--purple);font-weight:600}
#pricing span.acc-note{display:block;font-size:14.5px;font-weight:600;color:#161b45;display:block;border-top:1px dashed rgb(224,214,247);padding-top:10px}
#pricing .bcl-shared-features{
				--bcl-blue: #001441;
				--bcl-purple: #6958c2;
				--bcl-border: #e5e7eb;
				--bcl-text: #6b7a99;
				width: 100%;
				font-family: inherit;
				color: var(--bcl-blue);
				background: #fff;
				border: 1px solid var(--bcl-border);
				border-radius: 16px;
				overflow: hidden;
			}
#pricing .bcl-shared-features *{
				box-sizing: border-box;
			}
#pricing .bcl-shared-features .shared-head-bar{
				width: 100%;
				border: 0;
				border-radius: 0;
				background: var(--bcl-blue);
				color: #fff;
				padding: 14px 24px;
				font: inherit;
				font-size: 14px;
				font-weight: 800;
				line-height: 1.4;
				letter-spacing: .6px;
				text-transform: uppercase;
				text-align: left;
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 12px;
		}
#pricing .bcl-shared-features .arrow{
				display: none;
				transition: transform .25s ease;
			}
#pricing .bcl-shared-features .shared-content{
				display: grid;
				grid-template-columns: 1.8fr 1fr 1fr;
			}
#pricing .bcl-shared-features .shared-col{
				padding: 20px 24px;
				border-right: 1px solid #f0f2f8;
			}
#pricing .bcl-shared-features .shared-col:last-child{
				border-right: 0;
			}
#pricing .bcl-shared-features .shared-col-title{
				display: flex;
				align-items: center;
				gap: 6px;
				margin-bottom: 12px;
				color: var(--bcl-purple);
				font-size: 14px;
				font-weight: 800;
				line-height: 1.4;
				letter-spacing: .5px;
				text-transform: uppercase;
			}
#pricing .bcl-shared-features .sdot{
				width: 7px;
				height: 7px;
				flex: 0 0 7px;
				border-radius: 50%;
				background: #9ca3af;
			}
#pricing .bcl-shared-features .items-grid{
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 0 12px;
			}
#pricing .bcl-shared-features .shared-item{
				display: flex;
				align-items: flex-start;
				gap: 8px;
				margin-bottom: 8px;
				color: var(--bcl-text);
				font-size: 14px;
				line-height: 1.4;
			}
#pricing .bcl-shared-features .ck{
				flex: 0 0 auto;
				color: var(--bcl-purple);
				font-weight: 700;
			}
@media (max-width: 900px){#pricing .bcl-shared-features .shared-content{
					grid-template-columns: 1fr;
				}
#pricing .bcl-shared-features .shared-col{
					border-right: 0;
					border-bottom: 1px solid #f0f2f8;
				}
#pricing .bcl-shared-features .shared-col:last-child{
					border-bottom: 0;
				}
}
@media (max-width: 768px){#pricing .bcl-shared-features .shared-head-bar{
					cursor: pointer;
					padding: 14px 18px;
					font-size: 13px;
					white-space: normal;
				}
#pricing .bcl-shared-features .arrow{
					display: block;
					font-size: 15px;
				}
#pricing .bcl-shared-features .shared-content{
					display: none;
				}
#pricing .bcl-shared-features .shared-content.is-open{
					display: block;
				}
#pricing .bcl-shared-features .shared-head-bar.is-open .arrow{
					transform: rotate(180deg);
				}
#pricing .bcl-shared-features .shared-col{
					padding: 16px 18px;
				}
#pricing .bcl-shared-features .items-grid{
					display: block;
				}
#pricing .bcl-shared-features .shared-col-title{
					font-size: 13px;
				}
#pricing .bcl-shared-features .shared-item{
					font-size: 13px;
				}
}

  /* ===== v7: hero carousel, small quote tab, bold "powered by", aligned screenshots, tighter spacing ===== */
  .hero h1.hero-title .h1-by { display: block; font-family: "Noto Sans", sans-serif; font-size: 22px; font-weight: 700; color: #410076; letter-spacing: .01em; margin-top: 10px; }
  .hero-side { display: grid; gap: 14px; min-width: 0; }
  .hcar { position: relative; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(61, 27, 122, .12); }
  .hcar-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; outline: none; }
  .hcar-track::-webkit-scrollbar { display: none; }
  .hcar-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
  .hcar-slide img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 596; object-fit: cover; background: #f6f4fb; }
  .hcar-slide figcaption { padding: 14px 18px 40px; border-top: 1px solid var(--line); min-height: 104px; }
  .hcar-slide figcaption b { display: block; color: #410076; font-size: 16px; font-weight: 700; }
  .hcar-slide figcaption span { display: block; color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: 2px; }
  .hcar-btn { position: absolute; top: calc(50% - 52px); transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .95); color: #410076; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 6px 16px rgba(61, 27, 122, .15); }
  .hcar-btn:hover { background: #3d1b7a; color: #fff; }
  .hcar-btn.prev { left: 10px; } .hcar-btn.next { right: 10px; }
  .hcar-dots { position: absolute; left: 18px; bottom: 14px; display: flex; gap: 6px; }
  .hcar-dots button { width: 8px; height: 8px; border-radius: 99px; border: 0; padding: 0; background: #d8d0ea; cursor: pointer; transition: width .2s, background .2s; }
  .hcar-dots button[aria-selected="true"] { width: 22px; background: #3d1b7a; }
  .hq-tab { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 10px 10px 16px; box-shadow: 0 10px 26px rgba(61, 27, 122, .08); }
  .hq-tab-title { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #410076; white-space: nowrap; }
  .hq-tab-opts { display: flex; gap: 6px; min-width: 0; }
  .hq-tab-opts label { position: relative; flex: 1; cursor: pointer; }
  .hq-tab-opts input { position: absolute; opacity: 0; pointer-events: none; }
  .hq-tab-opts span { display: block; text-align: center; border: 1.5px solid var(--line); border-radius: 10px; padding: 6px 4px; line-height: 1.2; }
  .hq-tab-opts b { display: block; font-size: 13.5px; color: #410076; }
  .hq-tab-opts small { font-size: 11.5px; color: var(--muted); }
  .hq-tab-opts input:checked + span { border-color: #3d1b7a; background: #f6f1fe; }
  .hq-tab-opts input:focus-visible + span { outline: 3px solid #b9a3e3; outline-offset: 2px; }
  .hq-tab .hq-start { width: auto; padding: 12px 18px; font-size: 15px; white-space: nowrap; }
  .hq-tab-note { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
  /* the BCL Connect bot stands on the tab, its hand pointing down at the button */
  .hq-tab { position: relative; margin-top: 64px; }
  .hq-bot { position: absolute; right: 70px; bottom: calc(100% - 8px); width: auto; height: 124px; pointer-events: none; animation: hqBot 3.2s ease-in-out infinite; }
  @keyframes hqBot { 50% { transform: translateY(-6px); } }
  @media (prefers-reduced-motion: reduce) { .hq-bot { animation: none; } }
  .launch-go { width: 100%; margin-top: 18px; padding: 15px; font-size: 16px; }
  .launch-alt { font-size: 13.5px; color: var(--muted); margin-top: 12px; }
  .launch-alt b { color: #410076; }
  .hero-split { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 36px; align-items: center; }
  .hcar-slide img { cursor: zoom-in; }
  .hcar-zoom { position: fixed; inset: 0; z-index: 200; background: rgba(20, 10, 40, .82); display: none; place-items: center; padding: 24px; cursor: zoom-out; }
  .hcar-zoom.open { display: grid; }
  .hcar-zoom img { max-width: min(1600px, 100%); max-height: 88vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); background: #fff; }
  .hcar-zoom p { color: #fff; text-align: center; margin-top: 12px; font-size: 15px; }
  .spot-shot { margin: 4px 0 18px; aspect-ratio: 1024 / 636; }
  .spot-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

  /* about half an inch of space between sections */
  .section { padding: 26px 0; }
  .section-head { margin-bottom: 26px; }
  .hero { padding: 48px 0 36px; }
  .stats { margin-top: 0; }
  .cmp-head { margin: 32px 0 16px; }
  .addons-head { margin: 32px 0 16px; }
  footer { margin-top: 48px; }
  @media (max-width: 1024px) {
    .hero-split { grid-template-columns: 1fr; gap: 26px; }
  }
  @media (max-width: 720px) {
    .section { padding: 22px 0; }
    .hq-tab { grid-template-columns: 1fr; margin-top: 96px; }
    .hq-bot { right: 18px; height: 100px; }
    .hq-tab .hq-start { width: 100%; }
    .hero h1.hero-title .h1-by { font-size: 17px; }
    .hcar-btn { display: none; }
  }

  /* ===== v9: full-width carousel, plain bullets ===== */
  .hero-list { margin-top: 16px; gap: 6px; }
  .hero-main .hero-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
  .hero-refund { font-size: 13.5px; color: var(--muted); }
  .hero-main .tagline { margin-bottom: 16px; }
  .hero-main .hero-sub { margin-bottom: 8px; }
  .hcar-title { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #410076; margin: 0 0 -4px 2px; }
  .hero-intro { display: inline-block; background: #3d1b7a; color: #fff; font-weight: 700; letter-spacing: .08em; padding: 3px 10px; border-radius: 99px; margin-right: 8px; font-size: 12px; vertical-align: 1px; }

  /* bullets: a small plain dot, regular weight, slightly smaller text */
  .hero-list { grid-template-columns: 1fr; gap: 10px; margin: 0 0 18px; }
  .hero-list li { font-size: 15px; font-weight: 400; color: #2b2850; line-height: 1.55; padding-left: 18px; }
  .hero-list li::before, .price-mods li::before, .lead-copy li::before, .hq-points li::before, .q-wait li::before, .spot li::before, .shift-points div::before {
    content: "" !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #6958c2 !important;
    color: transparent !important; box-shadow: none !important; font-size: 0 !important;
  }
  /* centred on the first line: half the line height (15px × 1.55) minus half the dot */
  .hero-list li::before { position: absolute; left: 2px; top: calc(15px * 1.55 / 2 - 3px); }
  .price-mods li { font-weight: 400; }
  .price-mods li::before { top: .6em !important; left: 4px !important; }
  .spot li { grid-template-columns: 16px 1fr; }
  .spot li::before { margin-top: .55em !important; }
  .shift-points div::before { left: 18px !important; top: 24px !important; }
  .hero-points span { font-weight: 400; font-size: 13.5px; }
  .hero-points span::before { content: "·" !important; background: none !important; color: #6958c2 !important; width: auto !important; height: auto !important; font-size: 20px !important; margin-right: 6px !important; }

  @media (max-width: 1024px) {
  }
  /* quote buttons keep a fixed size whatever their wording */
  [data-quote] { white-space: nowrap; justify-content: center; text-align: center; }
  .nav-cta [data-cta="nav"] { width: 143px; }
  .hq-tab #hqStart[data-cta="hero-tab"] { width: 141px; padding-left: 8px; padding-right: 8px; }
  @media (max-width: 720px) { .hq-tab #hqStart[data-cta="hero-tab"] { width: 100%; } }
  [data-cta="journey"] { width: 303px; }
  [data-cta="band"] { width: 194px; }