.fq-how .how-diagram-hero .portal-container { max-width: 1160px; }.fq-how .how-section-head { margin-bottom: 28px; }.fq-how .how-section-head h2 {
  margin: 10px 0 0;
  color: #031d3a;
  font-size: 32px;
  line-height: 1.15;
}.fq-how .how-audience-pill {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: #f5fbf7;
  border: 1px solid #bfe0ca;
  color: #1f8550;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
}.fq-how .how-audience-pill.business {
  background: #f6f9ff;
  border-color: #d3dff0;
  color: #1a4f8b;
}.fq-how .flow-track {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  justify-content: center;
}.fq-how .flow-card {
  position: relative;
  background: #fff;
  border: 1px solid #dbe7eb;
  border-radius: 22px;
  box-shadow: 0 14px 32px rgba(3, 29, 58, .06);
  padding: 18px 16px 20px;
  width: 210px;
  flex: 0 0 210px;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}.fq-how .flow-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(3, 29, 58, .1);
}.fq-how .business-card {
  border-color: #d3dff0;
}.fq-how .flow-number {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #031d3a;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 900;
  z-index: 2;
}.fq-how .business-number {
  background: #1a4f8b;
}.fq-how .flow-card h3 {
  margin: 12px 0 0;
  color: #031d3a;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 750;
}.fq-how .flow-card p {
  margin: 8px 0 0;
  color: #5b6f85;
  line-height: 1.5;
  font-size: 13.5px;
  flex-grow: 1;
}.fq-how .flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex: 0 0 36px;
  color: #7ca48a;
  font-size: 28px;
  font-weight: 900;
  user-select: none;
}.fq-how .arrow-mobile { display: none; }.fq-how .scene {
  position: relative;
  height: 130px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #d9e6ec;
  background: linear-gradient(180deg, #f7fbff 0%, #ecf5fb 100%);
  margin-bottom: 4px;
}.fq-how .scene-handshake, .fq-how .scene-contact, .fq-how .scene-pay {
  background: linear-gradient(180deg, #f8fcf8 0%, #ecf7ef 100%);
}.fq-how .paper, .fq-how .screen, .fq-how .job-card, .fq-how .compare-card, .fq-how .select-card, .fq-how .card-pay, .fq-how .contact-box, .fq-how .list-card, .fq-how .form-card, .fq-how .winner-card, .fq-how .work-card {
  position: absolute;
  background: #fff;
  border: 1px solid #d8e5eb;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(3, 29, 58, .07);
}.fq-how .paper::before, .fq-how .paper::after, .fq-how .screen::before, .fq-how .screen::after, .fq-how .job-card::before, .fq-how .job-card::after, .fq-how .compare-card::before, .fq-how .compare-card::after, .fq-how .select-card::before, .fq-how .select-card::after, .fq-how .card-pay::before, .fq-how .card-pay::after, .fq-how .contact-box::before, .fq-how .contact-box::after, .fq-how .list-card::before, .fq-how .list-card::after, .fq-how .form-card::before, .fq-how .form-card::after, .fq-how .winner-card::before, .fq-how .winner-card::after, .fq-how .work-card::before, .fq-how .work-card::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  height: 6px;
  border-radius: 999px;
  background: #dce8ef;
}.fq-how .paper::before, .fq-how .screen::before, .fq-how .job-card::before, .fq-how .compare-card::before, .fq-how .select-card::before, .fq-how .card-pay::before, .fq-how .contact-box::before, .fq-how .list-card::before, .fq-how .form-card::before, .fq-how .winner-card::before, .fq-how .work-card::before { top: 14px; }.fq-how .paper::after, .fq-how .screen::after, .fq-how .job-card::after, .fq-how .compare-card::after, .fq-how .select-card::after, .fq-how .card-pay::after, .fq-how .contact-box::after, .fq-how .list-card::after, .fq-how .form-card::after, .fq-how .winner-card::after, .fq-how .work-card::after { top: 28px; }.fq-how .upload-badge, .fq-how .tick, .fq-how .unlock, .fq-how .coin, .fq-how .search-dot, .fq-how .price-tag, .fq-how .star, .fq-how .center-dot {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(3, 29, 58, .1);
}.fq-how .paper { width: 72px; height: 92px; top: 18px; left: 28px; }.fq-how .paper.back { left: 68px; top: 30px; background: #f7fbff; }.fq-how .upload-badge {
  width: 50px; height: 50px;
  right: 18px; bottom: 16px;
  background: #2eaa65; color: #fff; font-size: 22px;
}.fq-how .screen { width: 120px; height: 80px; left: 18px; top: 22px; }.fq-how .scan-line {
  position: absolute;
  left: 28px; right: 28px; top: 62px;
  height: 3px; border-radius: 999px;
  background: #2eaa65;
  box-shadow: 0 0 0 3px rgba(46, 170, 101, .12);
}.fq-how .gear {
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #184f8b;
  opacity: .18;
}.fq-how .gear-a { right: 26px; top: 26px; }.fq-how .gear-b { right: 48px; bottom: 22px; }.fq-how .job-card { width: 86px; height: 66px; }.fq-how .job-card.a { left: 12px; top: 18px; }.fq-how .job-card.b { left: 40px; top: 42px; }.fq-how .job-card.c { right: 12px; top: 26px; }.fq-how .quote-pill {
  position: absolute;
  left: 18px; right: 18px;
  height: 22px;
  border-radius: 999px;
  background: #d8f0df;
  top: 20px;
}.fq-how .quote-pill::before {
  content: '£620';
  position: absolute;
  left: 12px; top: 3px;
  color: #2eaa65;
  font-weight: 800;
  font-size: 12px;
}.fq-how .quote-pill.mid { top: 54px; background: #e9eefc; }.fq-how .quote-pill.mid::before { content: '£540'; color: #184f8b; }.fq-how .quote-pill.low { top: 88px; background: #ecf7ef; }.fq-how .quote-pill.low::before { content: '£455'; color: #2eaa65; }.fq-how .compare-card { width: 70px; height: 76px; top: 24px; }.fq-how .compare-card.left { left: 14px; }.fq-how .compare-card.right { right: 14px; }.fq-how .vs {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #184f8b;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 13px;
}.fq-how .select-card { width: 120px; height: 76px; left: 16px; top: 26px; }.fq-how .tick {
  width: 52px; height: 52px;
  right: 16px; top: 18px;
  background: #2eaa65; color: #fff; font-size: 24px;
}.fq-how .coin {
  width: 60px; height: 60px;
  left: 16px; top: 28px;
  background: #2eaa65; color: #fff; font-size: 26px;
}.fq-how .card-pay { width: 100px; height: 70px; right: 16px; top: 22px; }.fq-how .pay-chip {
  position: absolute;
  right: 28px; bottom: 18px;
  width: 62px; height: 11px;
  border-radius: 999px;
  background: #6fd19a;
}.fq-how .contact-box { width: 72px; height: 52px; }.fq-how .contact-box.phone { left: 16px; top: 20px; }.fq-how .contact-box.mail { right: 16px; bottom: 18px; }.fq-how .unlock {
  width: 52px; height: 52px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: #2eaa65; color: #fff; font-size: 22px;
}.fq-how .hand {
  position: absolute;
  width: 74px; height: 36px;
  top: 46px;
  background: #184f8b;
  border-radius: 20px 20px 8px 8px;
  opacity: .9;
}.fq-how .hand.left { left: 14px; transform: rotate(14deg); }.fq-how .hand.right {
  right: 14px;
  transform: rotate(-14deg);
  background: #2eaa65;
}.fq-how .center-dot {
  width: 40px; height: 40px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #184f8b;
  font-size: 18px;
}.fq-how .center-dot::before { content: '✓'; }.fq-how .list-card { width: 108px; height: 38px; left: 16px; }.fq-how .list-card.one { top: 22px; }.fq-how .list-card.two { top: 68px; left: 36px; background: #f8fbff; }.fq-how .search-dot {
  width: 50px; height: 50px;
  right: 16px; top: 36px;
  background: #184f8b;
  opacity: .16;
  color: #184f8b;
  font-size: 20px;
}.fq-how .search-dot::before { content: '⌕'; }.fq-how .form-card { width: 114px; height: 82px; left: 16px; top: 20px; }.fq-how .price-tag {
  width: 52px; height: 52px;
  right: 16px; top: 22px;
  background: #2eaa65; color: #fff; font-size: 24px;
}.fq-how .submit-bar {
  position: absolute;
  left: 26px; right: 26px; bottom: 16px;
  height: 11px;
  border-radius: 999px;
  background: #184f8b;
  opacity: .16;
}.fq-how .ribbon {
  position: absolute;
  left: 16px; top: 20px;
  width: 74px; height: 74px;
  border-radius: 18px;
  background: #2eaa65;
  opacity: .12;
}.fq-how .star {
  width: 52px; height: 52px;
  left: 28px; top: 32px;
  background: #2eaa65; color: #fff; font-size: 24px;
}.fq-how .winner-card { width: 100px; height: 70px; right: 16px; top: 28px; }.fq-how .tool {
  position: absolute;
  width: 60px; height: 11px;
  border-radius: 999px;
  background: #184f8b;
}.fq-how .tool-a { left: 16px; top: 38px; transform: rotate(-40deg); }.fq-how .tool-b {
  left: 34px; top: 68px;
  transform: rotate(35deg);
  background: #2eaa65;
}.fq-how .work-card { width: 108px; height: 74px; right: 14px; top: 22px; }.fq-how .how-bottom-summary {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 18px;
}.fq-how .summary-mini-card {
  background: #fff;
  border: 1px solid #dbe7eb;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 12px 28px rgba(3, 29, 58, .05);
}.fq-how .summary-mini-card h3 {
  margin: 0;
  color: #031d3a;
  font-size: 20px;
}.fq-how .summary-mini-card ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #5b6f85;
  display: grid;
  gap: 7px;
  font-size: 14.5px;
}.fq-how .summary-mini-card p {
  margin: 12px 0 0;
  color: #5b6f85;
  line-height: 1.55;
  font-size: 14.5px;
}.fq-how .summary-mini-card.yes { border-top: 4px solid #2eaa65; }.fq-how .summary-mini-card.note { border-top: 4px solid #184f8b; }.fq-how .how-final-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}@media (max-width: 1199px) {.fq-how .flow-card {
    width: 190px;
    flex: 0 0 190px;
  }.fq-how .flow-arrow { width: 28px; flex: 0 0 28px; font-size: 24px; }
}@media (max-width: 899px) {.fq-how .flow-track {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }.fq-how .flow-card {
    width: 100%;
    max-width: 420px;
    flex: none;
  }.fq-how .flow-arrow {
    width: auto;
    height: 32px;
    font-size: 26px;
  }.fq-how .arrow-desktop { display: none; }.fq-how .arrow-mobile { display: block; }.fq-how .how-bottom-summary { grid-template-columns: 1fr; }.fq-how .how-section-head h2 { font-size: 26px; }
}@media (max-width: 759px) {.fq-how .how-diagram-hero h1 { font-size: 34px; line-height: 1.05; }.fq-how .flow-card h3 { font-size: 16px; }.fq-how .scene { height: 120px; }.fq-how .how-final-cta .button {
    width: 100%;
    justify-content: center;
  }
}

/* FQ51: responsive cards, external stylesheet compatible with the existing CSP. */
.fq-how {overflow:clip;}
.fq-how *, .fq-how *::before, .fq-how *::after {box-sizing:border-box;}
.fq-how .portal-container {width:100%;max-width:1160px;margin-inline:auto;padding-inline:24px;}
.fq-how .how-diagram-hero {padding:48px 0 52px;}
.fq-how .back-link {display:block;width:fit-content;margin-bottom:24px;color:#bcebd0;}
.fq-how .how-diagram-hero h1 {font-size:clamp(32px,4vw,52px);line-height:1.12;margin:20px 0 16px;max-width:900px;}
.fq-how .how-diagram-hero p {max-width:720px;line-height:1.65;}
.fq-how .how-diagram-section {padding:56px 0;}
.fq-how .how-diagram-section.alt {background:#edf3f8;}
.fq-how .how-section-head h2 {font-size:clamp(25px,3vw,34px);line-height:1.25;}
.fq-how .flow-track {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.fq-how .flow-card {width:auto;max-width:none;min-width:0;padding:24px;border-radius:20px;}
.fq-how .flow-card h3 {font-size:19px;line-height:1.35;margin-top:20px;}
.fq-how .flow-card p {font-size:15px;line-height:1.65;color:#475e74;}
.fq-how .flow-number {top:14px;right:14px;width:36px;height:36px;border:3px solid #fff;}
.fq-how .scene {width:100%;height:140px;flex-shrink:0;margin:0;}
.fq-how .flow-arrow {display:none;}
.fq-how .summary-mini-card p, .fq-how .summary-mini-card ul {font-size:15px;color:#475e74;line-height:1.65;}
.fq-how .how-final-cta {margin-top:32px;}
.fq-how a:focus-visible {outline:3px solid #df9e24;outline-offset:5px;}
@media(max-width:900px){.fq-how .flow-track{grid-template-columns:repeat(2,minmax(0,1fr));}.fq-how .how-bottom-summary{grid-template-columns:1fr;}}
@media(max-width:600px){.fq-how .portal-container{padding-inline:20px;}.fq-how .flow-track{grid-template-columns:1fr;gap:18px;}.fq-how .how-diagram-section{padding:36px 0;}.fq-how .how-diagram-hero{padding:32px 0;}.fq-how .how-final-cta .button{width:100%;text-align:center;}.fq-how .scene{height:140px;}}
@media(prefers-reduced-motion:reduce){.fq-how .flow-card{transition:none;}.fq-how .flow-card:hover{transform:none;}}