* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  background: #e5e6ea;
  display: flex;
  justify-content: center;
  font-family: 'Manrope', sans-serif;
  overflow: hidden;
}
body .wa-custom-widget-wrapper{
display: none;
}

/* The app shell fills the viewport at every size. Content widths are capped
   per screen further down (see "Responsive layout"), not here. */
.phone {
  width: 100%;
  height: 100dvh;
  background: #fdfdfd;
  overflow: hidden;
  position: relative;
}

.screen {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* Lets the middle content (options list etc.) scroll on short screens
   while the top bar and bottom action stay fixed and always visible. */
.quiz-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.hidden {
  display: none !important;
}

/* Top bar / brand */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px 24px;
}

.topbar--tinted {
  background: rgba(0,163,244,0.16);
}

/* assets/logo.svg — the supplied logo, used as-is. */
.brand {
  display: block;
  width: 160px;
  height: 30px;
}

/* Start screen */
.start-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 429 / 281;
  overflow: hidden;
  background: rgba(0,163,244,0.16);
}

.start-photo img {
  position: absolute;
  top: 0.01%;
  left: -46.78%;
  width: 262.94%;
  height: 175.8%;
  max-width: none;
}

/* On mobile this wrapper is transparent to layout — content and button stay
   direct flex children of the screen, exactly as before. It only becomes a
   real container on desktop (see Responsive layout). */
.start-left {
  display: contents;
}

.start-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 0 32px 60px 32px;
}

.start-content h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.2;
  color: #1c1c1e;
}

.start-content p {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: #646469;
  max-width: 320px;
}

/* Benefit bullets: quiet by design (airy brief) — muted text, small blue
   check via an inline-SVG background so the tick renders the same everywhere.
   Rows are left-aligned but the list is centred as a block on mobile. */
.start-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  width: 100%;
  max-width: 340px;
}

.start-points li {
  padding-left: 28px;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.45;
  color: #3c3c41;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.4 L5.4 10.8 L12 3.6' fill='none' stroke='%2300a3f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 3px;
  background-size: 16px 16px;
}

.start-bottom {
  padding: 16px 24px 32px 24px;
}

.btn-primary {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #00a3f4;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 16px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  animation: shimmer 2.6s ease-in-out infinite;
}

@keyframes shimmer {
  0% { left: -75%; }
  50% { left: 125%; }
  100% { left: 125%; }
}

/* Progress */
.progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 24px 8px 24px;
}

.progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.progress-label {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  color: rgba(28,28,30,0.72);
}

.progress-count {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  color: #00a3f4;
}

.progress-bar {
  display: flex;
  gap: 4px;
  width: 100%;
}

.seg.seg--filled {
  background: #00a3f4;
}

.seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: #d1d4d9;
  transition: background-color 0.3s ease;
}

/* Chip bar */
.chip-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 24px 12px 24px;
  min-height: 32px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  border: 1px solid #e0e3e8;
  background: #f3f6f8;
  white-space: nowrap;
  cursor: pointer;
}

.chip--placeholder {
  color: rgba(28,28,30,0.48);
}

.chip--filled {
  color: #069;
}

/* Question */
.question {
  padding: 20px 24px 16px 24px;
}

.question p {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: #1c1c1e;
}

/* Options */
.options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 24px;
}

.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 14px 18px;
  border-radius: 12px;
  background: white;
  border: 1px solid rgba(29,29,29,0.1);
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  color: rgba(28,28,30,0.72);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.option span:first-child {
  flex: 1;
}

.option .radio {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 1.5px solid rgba(28,28,30,0.1);
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.option.selected {
  background: rgba(0,163,244,0.08);
  border: 2px solid #00a3f4;
  padding: 13px 17px;
  font-weight: 600;
  color: #1c1c1e;
}

.option.selected .radio {
  border: none;
  background-image: url('assets/check-icon.svg');
  background-size: contain;
}

/* Bottom bar: Back on the left, Next on the right, always visible */
.bottom-bar {
  flex-shrink: 0;
  height: 82px;
  padding: 16px 24px 20px 24px;
  border-top: 1px solid rgba(29,29,29,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #1c1c1e;
  padding: 0;
}

.back-btn img {
  width: 16px;
  height: 16px;
}

.btn-next {
  margin-left: auto;
  background: #00a3f4;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px 28px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.btn-next:disabled {
  background: #d1d4d9;
  color: #8a8a8f;
  cursor: not-allowed;
}

/* ---------- Matching transition ---------- */
.matching-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 40px;
  text-align: center;
}

.dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d4d9;
  animation: dot-pulse 1.2s ease-in-out infinite;
}

.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-pulse {
  0%, 60%, 100% { background: #d1d4d9; }
  30% { background: #00a3f4; }
}

.matching-content h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  color: #1c1c1e;
}

.matching-content p {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: #646469;
  max-width: 310px;
}

.matching-spacer {
  height: 40px;
}

/* ---------- Shortlist ---------- */
.shortlist-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.chip-bar--results {
  gap: 8px;
  padding: 8px 24px 12px 24px;
}

.chip-bar--results .chip {
  padding: 7px 12px;
  color: #069;
}

.shortlist-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 24px 8px 24px;
}

.shortlist-heading h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #1c1c1e;
}

.shortlist-heading p {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #646469;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 16px 16px 16px;
}

.broker-card {
  background: white;
  border: 1px solid rgba(28,28,30,0.1);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}

/* ---------- Portrait framing ----------
   Source photos are framed inconsistently (chest-up vs waist-up, faces at
   different heights). We never edit the files — framing is normalised here.
   Per-broker nudge: set --photo-y on the element, e.g. style="--photo-y: 3%".
   The PNGs are transparent and sit directly on the card tint — no white box. */
.portrait {
  /* The frame is a fixed-size window onto the full photo. The photo itself is
     never cropped by CSS — it keeps its own proportions and simply slides
     inside the frame, so a head can never end up cut in half.
       --photo-y     vertical position, as a % of the photo's own height.
                     Negative moves the photo up, positive moves it down.
       --photo-zoom  1 = photo width fills the frame. Above 1 = bigger person.
     Both are % / ratio based, so one value looks the same on the big card and
     on the small modal thumbnail. */
  --photo-y: -6%;
  --photo-zoom: 1;
  position: relative;
  overflow: hidden;
  background: #f4f6fb;
}

.portrait img {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100% * var(--photo-zoom));
  height: auto;
  transform: translate(-50%, var(--photo-y));
}

/* Collapsed card and modal share the framing rules above; only the size differs.
   The container height is fixed (as in the Figma design) — the photo is fitted
   into it, the container never stretches to the photo. */
.card-photo {
  width: 100%;
  height: 220px;
}

/* Fallback when a photo is missing: initials on the same soft tint. */
.card-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 56px;
  color: rgba(28,28,30,0.22);
}

.card-langs {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.card-lang {
  background: rgba(255,255,255,0.9);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: #1c1c1e;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px 16px;
}

.card-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #1c1c1e;
}

.card-positioning {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.45;
  color: #646469;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: rgba(28,28,30,0.48);
}

.card-tags .tag-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(28,28,30,0.3);
}

.card-closest {
  position: absolute;
  left: 12px;
  top: 12px;
  background: rgba(255,255,255,0.92);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: #646469;
}

/* ---------- Edit-answer popover ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10;
}

.popover {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  width: 100%;
  max-width: 350px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 14px 20px;
}

.popover-head p {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #1c1c1e;
}

.popover-close {
  background: #f0f0f2;
  border: none;
  border-radius: 14px;
  width: 28px;
  height: 28px;
  font-size: 14px;
  color: #646469;
  cursor: pointer;
  flex-shrink: 0;
}

.popover-divider {
  height: 1px;
  background: #ebebf0;
}

.popover-options {
  padding: 6px 12px;
  overflow-y: auto;
}

.popover-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 10px;
  border-radius: 8px;
  background: none;
  border: 1px solid transparent;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #1c1c1e;
  text-align: left;
  cursor: pointer;
}

.popover-option .radio {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 1.5px solid #c8c8cd;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.popover-option.selected {
  background: rgba(0,163,244,0.08);
  border-color: #00a3f4;
}

.popover-option.selected .radio {
  border: none;
  background-image: url('assets/check-icon.svg');
  background-size: contain;
}

.popover-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px 18px 20px;
}

.btn-update {
  background: #00a3f4;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

/* ---------- Broker detail bottom sheet ----------
   Opening: the scrim fades in while the sheet slides up from below the screen.
   Closing plays the same thing in reverse. The `open` class drives both; JS
   only adds/removes it and hides the overlay once the closing run has finished.
   Keep SHEET_ANIMATION_MS in script.js in sync with the 0.28s below. */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.sheet-overlay.open {
  opacity: 1;
}

.sheet {
  position: relative;
  background: white;
  width: 100%;
  max-width: 430px;
  height: 82dvh;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Parked just below the screen until the sheet is opened. */
  transform: translateY(100%);
  transition: height 0.28s ease, border-radius 0.28s ease, transform 0.28s ease;
}

.sheet-overlay.open .sheet {
  transform: translateY(0);
}

/* Expanded = dragged up to fullscreen */
.sheet.expanded {
  height: 100dvh;
  border-radius: 0;
}

/* While a finger/mouse is dragging we follow it 1:1, no easing. */
.sheet.dragging {
  transition: none;
}

/* Respect the OS "reduce motion" setting: appear instantly instead of sliding. */
@media (prefers-reduced-motion: reduce) {
  .sheet-overlay,
  .sheet {
    transition: none;
  }
}

.sheet-handle {
  display: flex;
  justify-content: center;
  padding: 10px;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
}

.sheet-handle:active {
  cursor: grabbing;
}

.sheet-grabber {
  width: 40px;
  height: 4px;
  border-radius: 100px;
  background: #c8c8cd;
}

.sheet-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 15px;
  background: #f0f0f2;
  color: #646469;
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
}

.sheet-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 16px;
}

.sheet-identity {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px 20px 24px;
}

.sheet-top {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* Same framing rules as the card (.portrait), just smaller. */
.sheet-photo {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  flex-shrink: 0;
}

.sheet-photo .card-initials {
  font-size: 30px;
}

.sheet-ident-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sheet-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #1c1c1e;
}

.sheet-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sheet-lang {
  background: #f0f5f8;
  border-radius: 6px;
  padding: 4px 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(28,28,30,0.72);
}

.sheet-rera-wrap {
  margin-top: 4px;
}

.sheet-rera {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(28,28,30,0.72);
  text-decoration: underline;
  cursor: pointer;
}

.rera-check {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #00a3f4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rera-check svg {
  width: 12px;
  height: 12px;
}

/* Tooltip explaining what a RERA licence is */
.rera-tooltip {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 7px;
  z-index: 3;
}

.rera-tooltip p {
  background: #1f1f1f;
  color: white;
  border-radius: 4px;
  padding: 8px 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.rera-tooltip-arrow {
  position: absolute;
  top: -6px;
  left: 124px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 7px solid #1f1f1f;
}

.sheet-divider {
  height: 1px;
  background: #ebebf0;
}

.sheet-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  color: #1c1c1e;
  text-decoration: none;
}

.contact-row img {
  width: 24px;
  height: 24px;
}

.sheet-why {
  background: #f3f6f8;
  border-radius: 10px;
  margin: 0 16px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sheet-why-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #1c1c1e;
}

.why-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
}

.why-check {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 20px;
}

.why-check svg {
  width: 14px;
  height: 14px;
}

.why-text {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  line-height: 1.45;
  color: #3c3c41;
}

.sheet-about {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px;
}

.sheet-about-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #1c1c1e;
}

.sheet-about-text {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.55;
  color: #3c3c41;
}

/* Sticky action bar — always visible at the bottom of the sheet */
.sheet-actions {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  padding: 12px 16px 20px 16px;
  border-top: 1px solid rgba(29,29,29,0.1);
  background: white;
}

.btn-secondary-action,
.btn-whatsapp {
  flex: 1;
  border-radius: 12px;
  padding: 14px 12px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

.btn-secondary-action {
  background: white;
  border: 1px solid #00a3f4;
  color: #00a3f4;
}

.btn-whatsapp {
  background: #00a3f4;
  border: 1px solid #00a3f4;
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   Responsive layout

   The mobile rules above are the base. Everything below only widens things
   as the screen grows. Two breakpoints:
     768px  — tablet: content gets a comfortable max-width, shortlist 2 columns
     1024px — desktop: start screen and broker card become two-column,
              the broker sheet becomes a centred dialog
   1100px adds the third shortlist column.
   ============================================================ */

:root {
  --app-max: 1240px;   /* outer container: header, shortlist */
  --read-max: 640px;   /* single reading column: quiz, matching text */
}

@media (min-width: 768px) {
  /* Header keeps to the app container instead of hugging the screen edge. */
  .topbar {
    padding: 24px max(32px, calc((100% - var(--app-max)) / 2)) 16px;
  }

  /* --- Quiz: one centred column --- */
  .progress,
  .chip-bar,
  .question,
  .options {
    max-width: var(--read-max);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  /* Full-width divider, but the buttons line up with the column above.
     The +24px matches the inner padding the column's blocks already have. */
  .bottom-bar {
    padding-left: max(24px, calc((100% - var(--read-max)) / 2 + 24px));
    padding-right: max(24px, calc((100% - var(--read-max)) / 2 + 24px));
  }

  .question p {
    font-size: 28px;
  }

  /* --- Matching transition --- */
  .matching-content p {
    max-width: 460px;
    font-size: 16px;
  }

  .matching-content h2 {
    font-size: 32px;
  }

  /* --- Shortlist: two columns ---
     These stay full-width and centre their content with padding alone — the
     same way .topbar does, so the logo and the cards share one left edge.
     (Using max-width + margin:auto as well would centre twice.) */
  .shortlist-heading,
  .chip-bar--results {
    max-width: none;
    padding-left: max(32px, calc((100% - var(--app-max)) / 2));
    padding-right: max(32px, calc((100% - var(--app-max)) / 2));
  }

  .card-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding-left: max(32px, calc((100% - var(--app-max)) / 2));
    padding-right: max(32px, calc((100% - var(--app-max)) / 2));
  }

  /* Keep the card photo's mobile proportion (358:220) at any column width,
     so the portrait framing stays consistent instead of squashing. */
  .card-photo {
    height: auto;
    aspect-ratio: 358 / 220;
  }
}

@media (min-width: 1100px) {
  .card-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Start screen: text left, photo right ---
   Logo pinned top-left. Below it, the left block (text + button) and the photo
   card sit in one row, both vertically centred. The photo is a pre-cropped
   waist-up landscape image, so the card just takes that image's aspect ratio
   and shows it 1:1 — no zoom or transform. */
@media (min-width: 1024px) {
  #screen-start {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "header header"
      "text   photo";
    align-items: center;
    column-gap: 56px;
    padding-left: max(32px, calc((100% - var(--app-max)) / 2));
    padding-right: max(32px, calc((100% - var(--app-max)) / 2));
  }

  #screen-start .topbar {
    grid-area: header;
    background: none;
    padding: 24px 0 0;
  }

  .start-left {
    grid-area: text;
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-self: center;
  }

  .start-content {
    flex: 0 0 auto;
    align-items: flex-start;
    text-align: left;
    padding: 0;
    gap: 18px;
  }

  .start-content h1 {
    font-size: clamp(36px, 3.4vw, 52px);
  }

  .start-content p {
    font-size: 17px;
    max-width: 440px;
  }

  .start-bottom {
    padding: 0;
  }

  .btn-primary {
    max-width: 280px;
  }

  /* Card takes the cropped image's own 840:575 ratio, so object-fit shows the
     whole waist-up crop with no further cropping. Width fills the column
     (capped), height follows the ratio. */
  .start-photo {
    grid-area: photo;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 620px;
    height: auto;
    aspect-ratio: 840 / 575;
    border-radius: 24px;
  }

  .start-photo img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
  }
}

/* --- Broker sheet becomes a centred dialog --- */
@media (min-width: 1024px) {
  .sheet-overlay {
    align-items: center;
    padding: 40px 24px;
  }

  .sheet {
    max-width: 900px;
    height: auto;
    max-height: 86vh;
    border-radius: 20px;
    /* A short rise instead of the full slide-up used on phones. */
    transform: translateY(24px);
  }

  .sheet-overlay.open .sheet {
    transform: translateY(0);
  }

  /* Dragging is a touch gesture — on desktop the dialog is fixed size and
     the close button is always available instead. */
  .sheet.expanded {
    height: auto;
    max-height: 86vh;
    border-radius: 20px;
  }

  .sheet-handle {
    display: none;
  }

  .sheet-close.hidden {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .sheet-close {
    top: 16px;
    right: 16px;
  }

  /* Two columns: portrait on the left, everything else on the right.
     `display: contents` lets the nested blocks become grid items without
     changing the markup that mobile relies on. */
  .sheet-scroll {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    /* One row per block in the right column. The last row takes any slack left
       over by the taller photo, so the blocks above it stay tight together
       instead of the gaps being spread between them. */
    grid-template-rows: repeat(4, auto) 1fr;
    column-gap: 36px;
    align-content: start;
    padding: 40px 40px 28px;
  }

  .sheet-identity,
  .sheet-top {
    display: contents;
  }

  .sheet-photo {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    width: 320px;
    height: 300px;
    border-radius: 16px;
  }

  /* Fixed 32px gap between the top of the frame and the top of the photo.
     Overriding `transform` outright drops the vertical part, so the per-broker
     --photo-y (set inline by script.js) doesn't shift it off that 32px here —
     the portrait keeps its own proportions and the bottom is what gets cropped. */
  .sheet-photo img {
    top: 32px;
    transform: translateX(-50%);
  }

  /* With .sheet-top out of the flow, the tooltip anchors here instead. */
  .sheet-ident-text {
    position: relative;
    grid-column: 2;
    gap: 10px;
  }

  /* The tooltip now starts at the text column, so the arrow moves left with it. */
  .rera-tooltip-arrow {
    left: 24px;
  }

  .sheet-divider,
  .sheet-contact,
  .sheet-why,
  .sheet-about {
    grid-column: 2;
  }

  .sheet-divider {
    margin: 18px 0;
  }

  .sheet-why {
    margin: 18px 0 0;
    padding: 20px;
  }

  .sheet-about {
    padding: 20px 0 0;
  }

  .sheet-name {
    font-size: 26px;
  }

  .sheet-actions {
    padding: 16px 40px 24px;
    justify-content: flex-end;
  }

  .btn-secondary-action,
  .btn-whatsapp {
    flex: 0 0 auto;
    min-width: 190px;
  }
}

/* ============================================================
   Hover & press states

   Wrapped in (hover: hover) and (pointer: fine) so they only apply to real
   pointers. On touch screens a tap would otherwise leave the hover state
   stuck on the element until you tap somewhere else.

   The transitions live in here too — no pointer, no transition to run.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

  /* --- Broker card: lifts toward the cursor --- */
  .broker-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .broker-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0,163,244,0.35);
    box-shadow: 0 10px 24px rgba(28,28,30,0.10);
  }

  .broker-card:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(28,28,30,0.10);
  }

  /* --- Quiz options and the edit-popover options --- */
  .option,
  .popover-option {
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .option:hover,
  .popover-option:hover {
    background: rgba(0,163,244,0.06);
    border-color: rgba(0,163,244,0.45);
  }

  .option:active,
  .popover-option:active {
    background: rgba(0,163,244,0.12);
  }

  /* Already chosen — keep the selected look, just deepen it slightly. */
  .option.selected:hover,
  .popover-option.selected:hover {
    background: rgba(0,163,244,0.14);
    border-color: #00a3f4;
  }

  /* --- Primary buttons --- */
  .btn-primary,
  .btn-next,
  .btn-update,
  .btn-whatsapp {
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  }

  .btn-primary:hover,
  .btn-next:not(:disabled):hover,
  .btn-update:hover,
  .btn-whatsapp:hover {
    background: #0091db;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,163,244,0.30);
  }

  .btn-primary:active,
  .btn-next:not(:disabled):active,
  .btn-update:active,
  .btn-whatsapp:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,163,244,0.25);
  }

  /* A disabled Next must not react at all. */
  .btn-next:disabled {
    transition: none;
  }

  /* --- Secondary button (Request Callback) --- */
  .btn-secondary-action {
    transition: background-color 0.18s ease, border-color 0.18s ease;
  }

  .btn-secondary-action:hover {
    background: rgba(0,163,244,0.08);
    border-color: #0091db;
  }

  .btn-secondary-action:active {
    background: rgba(0,163,244,0.16);
  }

  /* --- Back: the chevron slides back with the cursor --- */
  .back-btn {
    transition: color 0.15s ease;
  }

  .back-btn img {
    transition: transform 0.15s ease;
  }

  .back-btn:hover {
    color: #00a3f4;
  }

  .back-btn:hover img {
    transform: translateX(-3px);
  }

  /* --- Answer chips (tap to edit that answer) --- */
  .chip {
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .chip:hover {
    background: #e7eef3;
    border-color: #c3d2dc;
  }

  .chip:active {
    background: #dbe6ee;
  }

  /* --- Small round close buttons --- */
  .popover-close,
  .sheet-close {
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .popover-close:hover,
  .sheet-close:hover {
    background: #e2e2e7;
    color: #1c1c1e;
  }

  /* --- Contact links and the RERA trigger inside the broker sheet --- */
  .contact-row,
  .sheet-rera {
    transition: color 0.15s ease;
  }

  .contact-row:hover,
  .sheet-rera:hover {
    color: #00a3f4;
  }

  /* --- Language chips over the portrait, part of the card hover --- */
  .card-lang {
    transition: background-color 0.2s ease;
  }

  .broker-card:hover .card-lang {
    background: #ffffff;
  }
}

/* Users who ask for less motion still get the colour changes, just no movement. */
@media (prefers-reduced-motion: reduce) {
  .broker-card:hover,
  .broker-card:active,
  .btn-primary:hover,
  .btn-next:not(:disabled):hover,
  .btn-update:hover,
  .btn-whatsapp:hover,
  .back-btn:hover img {
    transform: none;
  }
}

/* ============================================================
   Consultation form (opened from the broker sheet)

   Height rule: the dialog never exceeds the viewport — it caps at 92dvh and
   the body scrolls inside, so on short screens the form is still fully
   reachable instead of being cut off at the bottom.
   ============================================================ */

.consult {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  width: 100%;
  max-width: 520px;
  max-height: min(92dvh, 820px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.consult-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 14px 20px;
  flex-shrink: 0;
}

.consult-head-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #1c1c1e;
}

/* The scrolling area — everything below the header */
.consult-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

/* --- Broker identity --- */
.consult-broker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

/* Round head-shot: zoomed in so the face fills the circle, since the source
   portraits are full squares with the head in the upper third. */
.consult-avatar {
  --photo-zoom: 1.6;
  --photo-y: 6%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Sits above the broker sheet (z-index 20) it is opened from. */
#consult-overlay {
  z-index: 30;
}

.consult-broker-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.consult-broker-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #1c1c1e;
}

.consult-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  color: #1c1c1e;
  margin-bottom: 10px;
}

.consult-sub {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: #646469;
  margin-bottom: 22px;
}

/* --- Fields --- */
.consult-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field-row {
  display: flex;
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.field-label {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: rgba(28,28,30,0.55);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  width: 100%;
  border: none;
  border-bottom: 1px solid #dcdce1;
  background: none;
  padding: 8px 0;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  color: #1c1c1e;
  border-radius: 0;
}

.field input::placeholder {
  color: rgba(28,28,30,0.35);
}

.field input:focus {
  outline: none;
  border-bottom-color: #00a3f4;
}

.field input.invalid {
  border-bottom-color: #e0245e;
}

.field-error {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  color: #e0245e;
  min-height: 0;
}

.phone-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #dcdce1;
}

.phone-row:focus-within {
  border-bottom-color: #00a3f4;
}

.phone-row input {
  border-bottom: none !important;
  flex: 1;
  min-width: 0;
}

.country-select {
  border: none;
  background: none;
  padding: 8px 0;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  color: #1c1c1e;
  cursor: pointer;
  max-width: 118px;
}

.country-select:focus {
  outline: none;
}

/* Honeypot: off-screen rather than display:none, which some bots skip */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consult-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(28,28,30,0.72);
  cursor: pointer;
}

.consult-consent input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: #00a3f4;
  cursor: pointer;
}

.consult-submit {
  margin-top: 2px;
}

.consult-submit:disabled {
  background: #d1d4d9;
  cursor: not-allowed;
}

.consult-legal {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(28,28,30,0.48);
}

.consult-legal a {
  color: rgba(28,28,30,0.62);
  text-decoration: underline;
}

.consult-status {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.consult-status.ok { color: #0a8f4d; }
.consult-status.err { color: #e0245e; }

/* --- OR + WhatsApp --- */
.consult-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 14px;
  color: rgba(28,28,30,0.4);
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
}

.consult-or::before,
.consult-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ebebf0;
}

.consult-wa {
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  color: #646469;
}

.consult-wa a {
  color: #00a3f4;
  text-decoration: none;
  font-weight: 600;
}

/* On narrow phones the two-up row stacks */
@media (max-width: 480px) {
  .field-row {
    flex-direction: column;
    gap: 18px;
  }

  .consult-title {
    font-size: 21px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .consult-wa a:hover {
    text-decoration: underline;
  }
}