/* SAINTLAVO site styles */
:root {
  --ink: #111111;
  --paper: #f5f5f2;
  --black: #000000;
  --white: #ffffff;
  /* page background: a lighter black than the navbar */
  --bg-dark: #1c1c1c;
  --muted: #5c5c58;
  --muted-dark: #b3b3ae;
  --line: #dcdcd6;
  --line-dark: rgba(255, 255, 255, 0.16);
  --grey-box: #e8e8e4;
  --bad: #e0261f;
  --good: #1f9d55;
  --blue: #2563eb;
  --wrap: 1200px;
  --head: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { font: inherit; cursor: pointer; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.dark { background: var(--bg-dark); color: var(--paper); }
.light { background: var(--paper); color: var(--ink); }

/* Type */
h1, h2, h3, .display {
  font-family: var(--head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
h1 { font-size: clamp(36px, 6vw, 58px); }
h2 { font-size: clamp(30px, 4.6vw, 48px); }
h3 { font-size: 18px; letter-spacing: -0.01em; line-height: 1.2; }
.nowrap { white-space: nowrap; }
.eyebrow {
  font-family: var(--head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.dark .eyebrow { color: var(--muted-dark); }
.pill {
  display: inline-block;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 6px 14px;
}
.lead { font-size: 17px; color: var(--muted); max-width: 640px; }
.dark .lead { color: var(--muted-dark); }

/* Buttons: royal blue for "Book a strategy call", otherwise black or white */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.btn:hover { opacity: 0.85; }
.btn svg { width: 14px; height: 14px; }
.btn-white { background: var(--blue); color: var(--white); }
.btn-black { background: var(--black); color: var(--white); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.5); }
.btn-ghost:hover { background: var(--white); color: var(--black); opacity: 1; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}
.text-link svg { width: 14px; height: 14px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--line-dark);
  color: var(--paper);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.logo {
  font-family: var(--head);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.03em;
}
/* Matches the wordmark standard: a large ® level with the top of the letters */
.logo sup {
  font-size: 0.41em;
  font-weight: 900;
  line-height: 0;
  vertical-align: 0.95em;
  margin-left: 0.02em;
}
.nav { display: flex; gap: 32px; }
.nav a {
  font-family: var(--head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
}
.nav a:hover { opacity: 1; }
.site-header .btn { padding: 11px 16px; font-size: 11px; }
.menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: inherit;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}
.menu-toggle svg { width: 24px; height: 24px; }
.mobile-nav {
  display: none;
  border-top: 1px solid var(--line-dark);
  padding: 8px 16px 24px;
}
.mobile-nav a {
  display: block;
  padding: 14px 0;
  font-family: var(--head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-dark);
}
.mobile-nav .btn { width: 100%; margin-top: 20px; border: 0; }
.site-header.open .mobile-nav { display: block; }

/* Hero */
.hero {
  /* stop short of the window bottom so the scrolling strip shows in full */
  min-height: calc(100svh - 120px);
  display: flex;
  flex-direction: column;
}
.hero { position: relative; overflow: hidden; }
/* Faint rooftops logo, pinned to the middle of the screen behind the whole homepage */
.home .dark, .home .light { background: transparent; }
.hero-mark {
  position: fixed;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(1000px, 92vw);
  transform: translate(-50%, -50%);
  color: var(--paper);
  opacity: 0.04;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 0;
}
.hero h1 { max-width: 980px; margin: 24px auto; }
/* Homepage headings: sentence case, with the key words in a blue gradient */
.hero h1, h2.sentence { text-transform: none; letter-spacing: -0.025em; line-height: 1.08; }
.hl {
  background: linear-gradient(90deg, var(--blue), #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lead { margin: 0 auto 40px; max-width: 700px; }

/* Scrolling strip */
.marquee {
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  overflow: hidden;
  padding: 18px 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee span {
  font-family: var(--head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 24px;
}
.marquee span.sep { color: var(--muted-dark); padding: 0; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Sections */
.section { padding: 112px 0; }
.section-head { margin-bottom: 56px; }
.section-head .eyebrow { margin-bottom: 20px; display: block; }
.section-head.center { text-align: center; }
.section-head.center .lead { margin: 20px auto 0; }
.section-head .lead { margin-top: 20px; }

/* Comparison */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
}
.compare-col { padding: 40px; }
.compare-col.us { background: var(--ink); color: var(--paper); }
.compare-col .eyebrow { display: block; margin-bottom: 12px; }
.compare-col.us .eyebrow { color: var(--muted-dark); }
.compare-col > h3 { margin-bottom: 28px; }
.point + .point { margin-top: 24px; }
.point h4 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.point p { color: var(--muted); font-size: 15px; }
.compare-col.us .point p { color: var(--muted-dark); }
/* Home page "The shift": two separate rounded cards; the SAINTLAVO way card stands out with a shadow */
.section .compare { border: 0; gap: 20px; }
.section .compare-col {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.section .compare-col.us {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.28);
}

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.step {
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
}
.step-top {
  display: flex;
  justify-content: space-between;
  font-family: var(--head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: 24px;
}
.step-icon { margin-bottom: 24px; }
.step-icon svg { width: 32px; height: 32px; stroke-width: 1.75; }
.step h3 { margin-bottom: 10px; }
.step p { color: var(--muted-dark); font-size: 14px; }
.center-link { text-align: center; margin-top: 48px; }

/* Split: label left, content right */
.split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
}
.split h2 { margin-bottom: 24px; }
.split p { color: var(--muted); font-size: 17px; }
.split p + p { margin-top: 16px; }
.split .text-link { margin-top: 32px; }

/* Terms grid */
.terms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.term {
  padding: 36px 40px 36px 0;
  border-bottom: 1px solid var(--line);
}
.term:nth-child(even) { padding: 36px 0 36px 40px; border-left: 1px solid var(--line); }
.term h3 { margin-bottom: 12px; text-transform: none; font-size: 20px; letter-spacing: -0.01em; }
.term p { color: var(--muted); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); padding: 0 48px 28px 0; max-width: 760px; }

/* Prose blocks (About) */
.prose-block { padding: 48px 0; border-top: 1px solid var(--line); }
.prose-block h2 { font-size: clamp(22px, 3vw, 30px); }
.prose-block p { color: var(--muted); font-size: 17px; }
.prose-block a { border-bottom: 1px solid currentColor; color: var(--ink); }

/* Page intro */
.page-intro { padding: 120px 0 80px; }
.page-intro .eyebrow { display: block; margin-bottom: 24px; }
.page-intro h1 { max-width: 960px; }
.page-intro .lead { margin-top: 28px; max-width: 720px; }
.page-intro .lead + .lead { margin-top: 16px; }

/* Process list */
.process-list { border-top: 1px solid var(--line-dark); }
.process-item {
  display: grid;
  grid-template-columns: 120px 220px 1fr;
  gap: 32px;
  padding: 40px 0;
  border-bottom: 1px solid var(--line-dark);
  align-items: start;
}
.process-num { font-family: var(--head); font-weight: 800; font-size: 40px; letter-spacing: -0.03em; color: var(--muted-dark); line-height: 1; }
.process-item .eyebrow { padding-top: 6px; }
.process-item h3 { font-size: 24px; margin-bottom: 10px; }
.process-item p { color: var(--muted-dark); max-width: 560px; }

/* Closing CTA */
.cta { text-align: center; padding: 112px 0; }
.cta h2 { max-width: 860px; margin: 0 auto 24px; }
.cta .lead { margin: 0 auto 40px; }

/* Footer */
.site-footer { padding: 64px 0 32px; border-top: 1px solid var(--line-dark); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.footer-grid p { color: var(--muted-dark); font-size: 14px; margin-top: 12px; }
.footer-grid .eyebrow { display: block; margin-bottom: 16px; }
.footer-links a { display: block; font-size: 14px; padding: 6px 0; opacity: 0.85; }
.footer-links a:hover { opacity: 1; }
.socials { display: flex; gap: 12px; }
.socials a {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.socials a:hover { background: var(--white); color: var(--black); }
.socials svg { width: 22px; height: 22px; }
.copyright { border-top: 1px solid var(--line-dark); padding-top: 24px; font-size: 12px; color: var(--muted-dark); }

/* ---------- Landing page (/agents) ---------- */
.lp { padding: 56px 0 0; }
.lp-wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.lp-brand { text-align: center; font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: 0.24em; color: var(--muted); margin-bottom: 28px; }
.lp h1 { text-align: center; font-size: clamp(28px, 4.4vw, 44px); max-width: 940px; margin: 0 auto 36px; }
.lp-eyebrow { display: block; text-align: center; margin-bottom: 16px; }
.lp h1 + .lead { text-align: center; margin: -16px auto 36px; }
/* Hero: the funnel steps, beside the form */
.lp-hero { display: grid; grid-template-columns: minmax(0, 480px); gap: 56px; justify-content: center; align-items: center; }
.lp-hero .form-box { margin: 0; width: 100%; }
.hero-funnel { width: 340px; border: 1px solid var(--line-dark); border-radius: 16px; padding: 28px 24px; background: rgba(255, 255, 255, 0.02); }
.funnel-title { display: block; font-family: var(--head); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: 24px; }
.funnel { list-style: none; }
.funnel li { position: relative; display: flex; gap: 16px; align-items: flex-start; padding-bottom: 28px; }
.funnel li:last-child { padding-bottom: 0; }
/* The line joining each step to the next */
.funnel li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--line-dark); }
.funnel-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.funnel-icon svg { width: 32px; height: 32px; stroke-width: 1.75; }
.funnel strong { display: block; font-family: var(--head); font-size: 16px; font-weight: 800; padding-top: 2px; }
.funnel li span:not(.funnel-icon) { display: block; font-size: 14px; color: var(--muted-dark); line-height: 1.45; }
.funnel ul { list-style: disc; padding-left: 18px; margin-top: 4px; }
.funnel ul li { display: list-item; padding: 0; font-size: 14px; color: var(--muted-dark); line-height: 1.5; }
.funnel ul li:not(:last-child)::after { content: none; }
.funnel ul ul { list-style: circle; margin-top: 0; }
.funnel-win .funnel-icon { color: var(--good); }
.funnel-win strong { color: var(--good); }
@media (max-width: 900px) {
  .lp-hero { grid-template-columns: minmax(0, 480px); gap: 24px; }
  .hero-funnel { width: 100%; padding: 22px 20px; }
  .funnel li { padding-bottom: 20px; }
}
.form-box {
  max-width: 480px;
  margin: 0 auto;
  background: var(--grey-box);
  border-radius: 16px;
  padding: 28px;
}
.form-box .intro { text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.field { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label {
  display: block;
  font-family: var(--head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 11px 12px;
  border: 1px solid #b9b9b3;
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
}
.field input:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
.field input::placeholder { color: #a6a6a0; }
.phone-wrap { display: flex; }
.phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #dededa;
  border: 1px solid #b9b9b3;
  border-right: 0;
  border-radius: 4px 0 0 4px;
  color: var(--muted);
  font-size: 16px;
}
.phone-wrap input { border-radius: 0 4px 4px 0; }
.field-error { color: #b3261e; font-size: 12px; margin-top: 4px; display: none; }
.field.invalid .field-error { display: block; }
.field.invalid input { border-color: #b3261e; }
.form-note { text-align: center; font-size: 12px; color: var(--muted); margin: 18px 0 14px; }
.form-submit { display: flex; justify-content: center; margin-top: 24px; }
.form-checks { list-style: none; margin: 18px auto 0; padding: 0; width: fit-content; font-size: 14px; font-weight: 500; }
.form-checks li { margin-top: 6px; }
.form-checks li::before { content: "\2713"; display: inline-block; width: 1.4em; font-weight: 700; color: var(--good); }
.form-submit .btn[disabled] { opacity: 0.5; cursor: wait; }
.form-fail { display: none; text-align: center; color: #b3261e; font-size: 13px; margin-top: 12px; }

.lp-compare { padding: 96px 0; }
.lp-compare h2 { text-align: center; font-size: clamp(24px, 3.5vw, 36px); margin-bottom: 48px; }
.lp-compare .compare { border: 0; }
.lp-compare .compare-col.old { padding-left: 0; }
.lp-compare .compare-col.old .point p,
.lp-compare .compare-col.old .point h4 { color: var(--muted); }

.lp-guarantee { max-width: 640px; margin: 0 auto; text-align: center; padding-bottom: 96px; }
.lp-guarantee .eyebrow { display: block; margin-bottom: 16px; }
.lp-guarantee h2 { font-size: clamp(24px, 3.5vw, 36px); margin-bottom: 20px; }
.lp-guarantee p { font-size: 18px; margin-bottom: 32px; }
.lp-guarantee small { display: block; margin-top: 12px; color: var(--muted); font-size: 12px; }

.to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  background: var(--black);
  color: var(--white);
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top svg { width: 18px; height: 18px; }

/* Thank you page */
.thanks {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 16px;
}
.thanks h1 { margin-bottom: 20px; }
.thanks p { color: var(--muted); margin-bottom: 36px; }

/* ---------- Dark everywhere ---------- */
/* Sections marked "light" now swap to the dark colours, so the whole site is dark.
   Because the SAINTLAVO way card uses ink/paper, it flips to a light card here. */
body { background: var(--bg-dark); }
.light {
  --ink: #f5f5f2;
  --paper: var(--bg-dark);
  --muted: #b3b3ae;
  --line: rgba(255, 255, 255, 0.14);
}
.light .btn-black { background: var(--white); color: #000000; }
.section .compare-col { background: transparent; }
.section .compare-col.us { box-shadow: 0 24px 60px rgba(245, 245, 242, 0.08); }
.compare-col.us .point p { color: #5c5c58; }
/* The form box stays light, with its original dark text */
.form-box {
  --ink: #111111;
  --paper: #f5f5f2;
  --muted: #5c5c58;
  --line: #dcdcd6;
  color: var(--ink);
}
.form-box .btn-black { background: var(--black); color: var(--white); }
/* White form box, with soft grey fields */
.form-box { background: var(--white); box-shadow: 0 24px 60px rgba(245, 245, 242, 0.08); }
.form-box .form-title { text-align: center; font-size: 24px; line-height: 1.2; margin-bottom: 6px; }
.form-box .form-title + .intro { margin-bottom: 24px; }
.form-box .field input { background: #f5f5f2; border-color: #dcdcd6; }
.form-box .phone-prefix { background: #ebebe6; border-color: #dcdcd6; }

/* ---------- Red for the old way, green for the SAINTLAVO way ---------- */
.compare-col.old > .eyebrow { color: var(--bad); }
.compare-col.us > .eyebrow { color: var(--blue); }
.compare-col .point h4::before { display: inline-block; width: 1.4em; font-weight: 700; }
.compare-col.old .point h4::before { content: "\2715"; color: var(--bad); }
.compare-col.us .point h4::before { content: "\2713"; color: var(--blue); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav, .site-header .wrap > .btn { display: none; }
  .menu-toggle { display: inline-flex; }
  .steps { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 16px; }
  .process-item { grid-template-columns: 64px 1fr; }
  .process-item .eyebrow { grid-column: 2; padding-top: 0; }
  .process-item > div { grid-column: 2; }
  .process-num { grid-row: span 2; font-size: 30px; }
}
@media (max-width: 680px) {
  .wrap, .lp-wrap { padding: 0 16px; }
  .section, .cta { padding: 72px 0; }
  .page-intro { padding: 80px 0 56px; }
  .hero-inner { padding: 72px 0; }
  /* shrink so "top-producing agents." fits on one line */
  .hero h1, .lp h1 { font-size: min(36px, calc((100vw - 32px) / 14.6)); }
  .compare { grid-template-columns: 1fr; }
  .compare-col { padding: 28px 24px; }
  .steps { grid-template-columns: 1fr; }
  .terms { grid-template-columns: 1fr; }
  .term, .term:nth-child(even) { padding: 28px 0; border-left: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .btn-row .btn { width: 100%; }
  .faq details p { padding-right: 0; }
  .lp { padding-top: 40px; }
  .form-box { padding: 20px; }
  .lp-compare { padding: 64px 0; }
  .lp-compare .compare-col.old { padding: 0 0 32px; }
  .lp-guarantee { padding-bottom: 64px; }
}

/* Agents page: no all caps */
.lp, .lp * { text-transform: none; }
.lp .eyebrow, .lp .btn, .lp .field label, .lp .funnel-title { text-transform: none; letter-spacing: 0.01em; }
.lp .eyebrow, .lp .funnel-title { font-size: 13px; }
.lp .field label { font-size: 12px; }

/* Agents page: Inter everywhere, bold headings, to match the agent ads */
.lp { --head: var(--body); }
.lp h1, .lp h2, .lp h3, .lp h4, .lp .btn { font-weight: 700; }
.lp h1 { line-height: 1.15; }
@media (max-width: 600px) { .lp .br-desk { display: none; } }
@media (max-width: 600px) {
  .hide-sm { display: none; }
  /* sentence case is narrower, so the homepage headline can be bigger on phones */
  .hero h1 { font-size: min(36px, calc((100vw - 32px) / 10.8)); }
}
/* Agents page: verified badge instead of plain tick */
.lp .form-checks li { display: flex; align-items: center; gap: 8px; }
.lp .form-checks li::before { content: ""; flex: none; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231f9d55' d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Agents page: small reassurance line above the button */
.lp .form-perks { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 24px 0 0; padding: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.lp .form-perks li { display: flex; align-items: center; gap: 8px; }
.lp .form-perks svg { width: 18px; height: 18px; flex: none; color: var(--good); }
/* Agents page: clean white fields that keep the same colour when typed in or autofilled */
.lp .form-box .field input,
.lp .form-box .phone-wrap { background: #ffffff; border: 1px solid #c9c9c3; border-radius: 10px; color: #111111; }
.lp .form-box .field input { padding: 10px 14px; outline: none; box-shadow: none; }
.lp .form-box .field input:focus,
.lp .form-box .field input:not(:placeholder-shown) { background: #ffffff; border-color: #c9c9c3; outline: none; box-shadow: none; }
.lp .form-box .field input:-webkit-autofill,
.lp .form-box .field input:-webkit-autofill:hover,
.lp .form-box .field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #ffffff inset; -webkit-text-fill-color: #111111; caret-color: #111111; transition: background-color 9999s ease 0s; }
.lp .form-box .field input:autofill { background: #ffffff; }
.lp .form-box .phone-wrap { overflow: hidden; }
.lp .form-box .phone-wrap input { border: 0; border-radius: 0; }
.lp .form-box .phone-prefix { background: transparent; border: 0; border-right: 0; border-radius: 0; padding: 0 0 0 14px; color: #111111; }
.lp .form-box .field.invalid input,
.lp .form-box .field.invalid .phone-wrap { border-color: #b3261e; }
.lp .form-box .field.invalid .phone-wrap input { border: 0; }
.lp .form-box .field input::placeholder { color: #b0b0aa; }
.lp .form-box .phone-wrap input { padding-left: 8px; }

/* Agents page: faint cards from the agent ads, pinned to the screen behind the page as it scrolls */
.lp { position: relative; overflow-x: hidden; }
.lp-wrap { position: relative; z-index: 1; }
.lp-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.bg-card { position: absolute; width: 230px; padding: 16px; border-radius: 12px; background: #ffffff; color: #111111; font-size: 12px; line-height: 1.3; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); opacity: 0.28; }
.bg-card b { display: block; font-size: 13px; font-weight: 700; }
.bg-card small { display: block; font-size: 10px; color: #8a8a85; }
.bg-row { height: 26px; margin-top: 6px; border-radius: 6px; background: #f2f2ef; }
.bg-row.on { background: #111111; color: #ffffff; font-weight: 700; padding: 5px 10px; height: auto; }
.bg-row.on small { color: #bdbdb8; }
.bg-label { text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 4px; }
.bg-dots { display: flex; align-items: center; gap: 5px; margin: 12px 0 10px; padding: 6px 8px; border-radius: 999px; background: #f2f2ef; }
.bg-dots i { width: 14px; height: 14px; border-radius: 50%; background: #111111; }
.bg-dots span { margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: #111111; color: #ffffff; font-size: 9px; font-weight: 700; }
.bg-day { position: absolute; top: 18px; right: 16px; }
.bg-calendar > small:nth-of-type(2) { margin-top: 10px; }
.bg-appt { margin: 8px 0 8px; padding: 8px 10px; border-radius: 8px; background: #111111; color: #ffffff; font-weight: 700; }
.bg-appt small { color: #bdbdb8; font-weight: 400; }
.bg-ok { color: #1f9d55 !important; font-weight: 700; font-size: 11px !important; }
.bg-photo { display: grid; place-items: center; height: 70px; margin: 10px 0; border-radius: 8px; background: #e9e9e5; color: #9a9a95; }
.bg-photo svg { width: 26px; height: 26px; }
.bg-signed { background: #1f9d55; color: #ffffff; }
.bg-signed svg { width: 34px; height: 34px; }
.bg-home strong { display: block; font-size: 20px; font-weight: 700; }
.bg-pill { position: absolute; padding: 8px 16px; border-radius: 999px; background: #ffffff; color: #111111; font-size: 13px; font-weight: 700; opacity: 0.28; }
/* Positions: in the space either side of the form */
.bg-agents    { top: 150px; left: calc(50% - 640px); transform: rotate(-6deg); }
.bg-guarantee { top: 500px; left: calc(50% - 600px); width: 260px; transform: rotate(4deg); }
.bg-calendar  { top: 120px; right: calc(50% - 650px); width: 250px; transform: rotate(5deg); }
.bg-home      { top: 470px; right: calc(50% - 610px); width: 200px; transform: rotate(-5deg); }
.bg-pill      { top: 400px; left: calc(50% - 470px); transform: rotate(-8deg); }
.bg-pill-2    { top: 380px; left: auto; right: calc(50% - 450px); transform: rotate(7deg); }
@media (max-width: 1100px) { .lp-bg { display: none; } }
/* The pinned cards pass behind "The old way", so give it a solid dark card to keep it readable */
@media (min-width: 1101px) {
  .lp-compare .compare-col.old { background: var(--bg-dark); border: 1px solid var(--line); border-radius: 20px; padding: 40px 48px; }
}
/* Agents page: bigger text on the form button */
.lp .form-submit .btn { font-size: 16px; padding: 18px 32px; }
.lp .form-submit .btn svg { width: 17px; height: 17px; }
/* Agents page: comparison points are headlines only, and the SAINTLAVO way box is rounded */
.lp-compare .point h4 { margin-bottom: 0; }
.lp-compare .point + .point { margin-top: 16px; }
.lp-compare .compare-col.us { border-radius: 20px; }
/* Agents page: pull the two comparison columns closer together */
@media (min-width: 901px) {
  .lp-compare .compare { grid-template-columns: auto auto; justify-content: center; gap: 32px; }
  .lp-compare .compare-col.us { padding: 40px 48px; }
}
/* Agents page: centre the label and title at the top of each comparison column */
.lp-compare .compare-col > .eyebrow,
.lp-compare .compare-col > h3 { text-align: center; }
.lp-compare .compare-col > .eyebrow { font-size: 17px; margin-bottom: 14px; }
/* Agents page: titles back to the left, labels stay centred, columns closer */
.lp-compare .compare-col > h3 { text-align: left; }
@media (min-width: 901px) {
  .lp-compare .compare { gap: 24px; }
  .lp-compare .compare-col.old { padding-right: 16px; }
}
.lp-compare .compare-col.old > .eyebrow { text-align: left; }
/* Agents page: guarantee button matches the form button, with the green "No commitments." line under it */
.lp-guarantee .btn { font-size: 16px; padding: 18px 32px; }
.lp-guarantee .btn svg { width: 17px; height: 17px; }
.lp-guarantee .guarantee-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 0; font-size: 14px; font-weight: 500; color: #f5f5f2; }
.lp-guarantee .guarantee-note svg { width: 18px; height: 18px; flex: none; color: var(--good); }
/* Agents page: reassurance line above the form button in grey */
.lp .form-perks { color: #6b6b66; }
.lp .form-perks svg { color: var(--good); }
/* Agents page: royal blue "Get started" buttons */
.lp .form-box .btn-black,
.lp .lp-guarantee .btn-black { background: var(--blue); color: #ffffff; }
.lp .form-box .btn-black svg,
.lp .lp-guarantee .btn-black svg { width: 18px; height: 18px; stroke-width: 2.75; }
/* Agents page on phones: headline on 2 lines, text sizes step down from it */
@media (max-width: 600px) {
  .lp h1 { font-size: min(26px, calc((100vw - 32px) / 14.6)); line-height: 1.2; }
  .lp h1 + .lead { font-size: 15px; line-height: 1.55; }
  .lp .form-title { font-size: 20px; }
  /* Guarantee: heading loudest, paragraph and note quieter in grey */
  .lp-guarantee p { font-size: 15px; line-height: 1.55; color: var(--muted-dark); }
  .lp-guarantee .guarantee-note { font-size: 13px; color: var(--muted-dark); }
  /* Slimmer green buttons, same text size */
  .lp .form-submit .btn,
  .lp .lp-guarantee .btn { padding: 13px 28px; }
}
/* Agents page: SAINTLAVO label left-aligned once the comparison columns stack */
@media (max-width: 900px) {
  .lp-compare .compare-col.us > .eyebrow { text-align: left; }
}

/* Bot trap on the lead form: off-screen so people never see it */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Privacy line under the lead form */
.form-privacy { text-align: center; color: var(--muted); font-size: 12px; margin: 12px 0 0; }
.form-privacy a { color: inherit; text-decoration: underline; }

/* Two-step lead form: questions first, then contact details */
.form-step[hidden] { display: none; }
.step-count { display: block; font-weight: 600; color: var(--blue); margin-bottom: 2px; }
.choice-field { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.choice-field legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.lp .field label[for="towns"] { font-size: 14px; font-weight: 600; letter-spacing: 0; margin-bottom: 8px; }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choices label { position: relative; display: flex; cursor: pointer; }
.choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choices span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 11px 6px;
  border: 1px solid #c9c9c3;
  border-radius: 10px;
  background: #ffffff;
  color: #111111;
  font-size: 15px;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s;
}
.choices label:hover span { border-color: #8f8f89; }
.choices input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.choices input:checked + span { border-color: var(--blue); background: #eef3fe; color: var(--blue); font-weight: 600; }
.choice-field.invalid .choices span { border-color: #b3261e; }
.step-back {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.step-back:hover { color: var(--ink); }

/* Booking page (/submitted) */
.booking { max-width: 760px; margin: 0 auto; padding: 56px 16px 64px; text-align: center; }
.booking .lp-brand { height: 32px; margin-bottom: 24px; }
/* Hierarchy: small blue label, then the big bold headline, then a quieter line under it */
/* Line heights rounded to whole pixels, so the calendar's blue edge lands on a whole pixel and stays as sharp as the sides */
.booking .step-count { font-size: 14px; line-height: 20px; margin-bottom: 6px; }
.booking h1 { font-size: clamp(32px, 6vw, 48px); font-weight: 900; line-height: 1.08; line-height: round(1.08em, 1px); margin-bottom: 12px; text-wrap: balance; }
/* Phones: headline on one line, sized to fill the screen width (the text is about 11.2 times its font size wide) */
@media (max-width: 599px) { .booking h1 { font-size: min(40px, calc((100vw - 32px) / 11.6)); white-space: nowrap; } }
/* /submitted: longer headline, so on phones it wraps onto two even lines instead of shrinking */
@media (max-width: 599px) { .booking h1.h1-wrap { font-size: 36px; white-space: normal; text-wrap: balance; } }
/* /book/ (main site): capitals are wider, so let the headline wrap onto two lines on phones */
@media (max-width: 599px) { .booking-page h1 { font-size: clamp(32px, 10vw, 40px); white-space: normal; } }
.booking > p { color: var(--muted); font-size: 16px; line-height: 1.5; max-width: 480px; margin: 0 auto 28px; }
/* No box of our own: the calendar draws its own card, and ours showed as a white strip above it.
   site.js sets the height to match the calendar, so the calendar never scrolls inside its box. */
.booking-frame { position: relative; }
.booking-frame iframe { position: relative; z-index: 1; display: block; width: 100%; height: 1000px; border: 0; }
/* Blue edge and glow (same as the lead form on /agents), on a layer behind the calendar sized to its card.
   Below 800px the card fills the box. Wider (dates and times side by side) it sits 16px in from the top and bottom. */
.booking-frame::before { content: ""; position: absolute; inset: 0; border-radius: 8px; box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.45), 0 0 22px 2px rgba(37, 99, 235, 0.14), 0 16px 40px rgba(0, 0, 0, 0.10); pointer-events: none; }
@media (min-width: 800px) { .booking-frame::before { inset: 16px 0; } }
/* Faint rooftops logo laid over the middle of the calendar. Clicks pass through it to the calendar. */
/* The calendar switches between one column and side by side at about 725px wide. Right on that edge
   (tablets, narrow windows) it flips back and forth and the page shakes, so keep it well under on screens below 800px. */
@media (max-width: 799px) { .booking-frame { max-width: 680px; margin: 0 auto; } }
.booking-frame::after { content: ""; position: absolute; top: 50%; left: 50%; width: 80%; max-width: 560px; aspect-ratio: 88 / 42; transform: translate(-50%, -50%); background: url("/assets/rooftops-black-roof.svg") center / contain no-repeat; opacity: 0.05; pointer-events: none; z-index: 2; }
/* Same look as the line above the calendar, with room between it and the calendar */
.booking > p.booking-note { margin: 20px auto 0; }
.booking-note a { color: inherit; text-decoration: underline; }

/* ---------- /agents above the fold (Larsen layout, 2026-10-28) ---------- */
.lp:has(.lp-logobar) { padding-top: 0; }
.lp-logobar { background: var(--bg-dark); color: var(--paper); text-align: center; padding: 14px 16px; }
.lp-logobar .logo { font-size: 20px; }
.lp-top { max-width: 640px; margin: 0 auto; padding: 18px 16px 40px; text-align: center; }
.lp-trust { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.lp-trust svg { width: 14px; height: 14px; color: var(--blue); }
.lp-pill { display: block; background: var(--ink); color: var(--paper); font-family: var(--head); font-weight: 700; font-size: 14px; border-radius: 999px; padding: 9px 16px; margin: 0 auto 16px; max-width: 360px; }
.lp .lp-top h1 { font-size: clamp(27px, 5vw, 44px); font-weight: 900; line-height: 1.08; margin: 0 auto 12px; }
.lp-sub { font-size: 17px; line-height: 1.45; color: var(--muted); margin: 0 auto 18px; max-width: 520px; }
.lp-visual { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-align: left; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); margin: 0 auto 18px; max-width: 440px; }
.cal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.cal-head b { font-family: var(--head); font-size: 14px; }
.cal-head small, .cal-row small { font-size: 11px; color: var(--muted); }
.cal-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.cal-row b { display: block; font-size: 13px; }
.cal-row small { display: block; }
.cal-time { font-family: var(--head); font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--muted); }
.cal-tag { font-size: 11px; font-weight: 700; color: var(--blue); background: #e8effd; border-radius: 999px; padding: 4px 9px; }
.cal-win .cal-tag { color: var(--white); background: var(--good); }
.lp-cta { display: flex; justify-content: center; width: 100%; max-width: 440px; margin: 0 auto; padding: 18px 24px; font-size: 18px; border-radius: 12px; }
.lp-ps { font-size: 12px; color: var(--muted); margin-top: 10px; }
.lp-top + .lp-wrap .lp-hero { scroll-margin-top: 16px; }
#book-a-call { scroll-margin-top: 16px; }
/* The site is dark (.light swaps ink and paper), so pin the colours here */
.lp-logobar { background: #111111; color: #ffffff; border-bottom: 1px solid var(--line-dark); }
.lp-pill { background: rgba(255, 255, 255, 0.08); color: #ffffff; border: 1px solid var(--line-dark); }
.lp-visual { color: #111111; border-color: #e3e3de; }
.lp-visual .cal-head small, .lp-visual .cal-row small, .lp-visual .cal-time { color: #6b6b66; }
.lp-visual .cal-row { border-top-color: #ececE7; }
.lp-logobar .logo { display: inline-flex; align-items: center; gap: 8px; }
.lp-logobar .logo img { height: 22px; width: auto; }
.lp-top .lp-hero { text-align: left; margin: 0 auto 24px; }

/* /agents light page (2026-10-28): undo the site-wide dark swap on this page only */
body:has(.lp-lightbg) { background: #f5f5f2; }
.lp.lp-lightbg { --ink: #111111; --paper: #f5f5f2; --muted: #5c5c58; --line: #dcdcd6; --bg-dark: #f5f5f2; background: #f5f5f2; color: #111111; }
.lp-lightbg .lp-logobar { background: transparent; color: #111111; border-bottom: 0; padding-top: 18px; }
.lp-lightbg .lp-pill { background: #111111; color: #ffffff; border-color: #111111; }
.lp-lightbg .form-box { background: #ffffff; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); }
.lp-lightbg .compare-col.old { background: #ffffff; }
.lp-lightbg .lp-guarantee p { color: #5c5c58; }
.lp-lightbg .lp-guarantee .guarantee-note { color: #111111; }
body:has(.lp-lightbg) .to-top { background: #111111; color: #ffffff; }
/* Tighter gap under the logo, and the spots-left counter */
.lp-lightbg .lp-logobar { padding-bottom: 0; }
.lp-lightbg .lp-top { padding-top: 12px; }
.lp-counter { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #111111; margin-bottom: 12px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(31, 157, 85, 0.6); animation: live-pulse 1.6s infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(31, 157, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.count-box { display: inline-block; min-width: 26px; padding: 3px 7px; border-radius: 6px; background: #111111; color: #ffffff; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; font-weight: 700; text-align: center; }
.lp-lightbg .lp-pill { background: transparent; color: #111111; border: 1.5px solid #111111; }
/* Verified-tick lines under the headline */
.lp-ticks { list-style: none; padding: 0; margin: 4px auto 20px; display: inline-flex; flex-direction: column; gap: 8px; text-align: left; }
.lp-ticks li { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: #111111; }
.lp-ticks li::before { content: ""; flex: none; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232563eb' d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.lp-ticks { margin-bottom: 10px; }
.lp-job { font-size: 15px; margin-bottom: 20px; }
.lp-job { text-wrap: balance; }
/* Tighter top half on phones: form starts about 35% down the screen */
@media (max-width: 600px) {
  .lp-lightbg .lp-logobar { padding-top: 12px; }
  .lp-lightbg .lp-logobar .logo { font-size: 18px; }
  .lp-lightbg .lp-logobar .logo img { height: 19px; }
  .lp-lightbg .lp-top { padding-top: 8px; }
  .lp-counter { margin-bottom: 6px; font-size: 13px; }
  .count-box { font-size: 13px; padding: 2px 6px; min-width: 22px; }
  .lp-lightbg .lp-pill { font-size: 13px; padding: 6px 14px; margin-bottom: 10px; }
  .lp .lp-top h1 { font-size: 25px; margin-bottom: 8px; }
  .lp-ticks { gap: 4px; margin: 0 auto 6px; }
  .lp-ticks li { font-size: 15px; }
  .lp-ticks li::before { width: 18px; height: 18px; }
  .lp-job { font-size: 13px; margin-bottom: 12px; }
}
@media (max-width: 600px) {
  .lp .lp-top h1 { font-size: 31px; line-height: 1.05; letter-spacing: -0.01em; }
}
@media (max-width: 600px) {
  .lp-lightbg .lp-pill { margin-bottom: 8px; }
  .lp .lp-top h1 { margin-bottom: 6px; }
  .lp-job { margin-bottom: 8px; }
}
/* Spots dots: filled = taken, outline = open */
.spot-dots { display: inline-flex; gap: 4px; margin-left: 2px; }
.spot-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #111111; }
.spot-dots i.taken { background: #111111; }
/* Shorter-looking form on phones */
@media (max-width: 600px) {
  .lp-lightbg .form-box { padding: 20px 18px; }
  .lp .form-box .form-title { font-size: 19px; margin-bottom: 4px; }
  .lp .form-box .intro { font-size: 12px; margin-bottom: 14px; }
  .lp .form-box .step-count { display: inline; margin-right: 4px; }
  .lp .choice-field { margin-bottom: 14px; }
  .lp .choice-field legend { font-size: 13px; margin-bottom: 6px; }
  .lp .choices span { padding: 10px 4px; min-height: 0; font-size: 14px; white-space: nowrap; }
  .lp .field label[for="towns"] { font-size: 13px; margin-bottom: 6px; }
  .lp .form-box .field input { padding: 9px 12px; }
  .lp .form-submit { margin-top: 14px; }
  .lp .form-submit .btn { padding: 12px 28px; }
}
/* 5 Singapore areas: 3 on top, 2 centred below */
.choices-2 { grid-template-columns: repeat(2, 1fr); }
.choices-areas { grid-template-columns: repeat(6, 1fr); }
.choices-areas label { grid-column: span 2; }
.choices-areas label:nth-child(4) { grid-column: 2 / span 2; }
.legend-hint { font-weight: 400; color: #6b6b66; }
.legend-hint { display: block; font-size: 12px; margin-top: 2px; }
/* Both form steps share one grid cell, so the white box keeps the same height when moving between steps */
#book-a-call { display: grid; grid-template-columns: minmax(0, 1fr); }
#book-a-call .form-title { grid-row: 1; }
#book-a-call .form-step { grid-row: 2; grid-column: 1; }
#book-a-call .form-step[hidden] { display: block; visibility: hidden; }
/* Step 2 fills the same box as step 1: fields spaced out, button group at the bottom */
#book-a-call .form-step[data-step="2"] { display: flex; flex-direction: column; }
#book-a-call .form-step[data-step="2"] .field { margin-bottom: 18px; }
#book-a-call .form-step[data-step="2"] .form-submit { margin-top: auto; }
#book-a-call .form-step[data-step="2"] .step-back { margin-top: 10px; }
#book-a-call .form-step[data-step="2"] .form-privacy { margin-top: 8px; margin-bottom: 0; }
#book-a-call .form-step[data-step="2"] .field { margin-bottom: 22px; }
.lp #book-a-call .form-step[data-step="2"] .field input { padding-top: 12px; padding-bottom: 12px; }
/* Step 2: share the spare height evenly between the rows, instead of one big gap above the button */
#book-a-call .form-step[data-step="2"] > .field-row,
#book-a-call .form-step[data-step="2"] > .field,
#book-a-call .form-step[data-step="2"] > .optout { margin-top: auto; }
/* Stronger form box edges (page background stays beige #f5f5f2) */
.lp.lp-lightbg { --muted: #4f4f4b; }
.lp-lightbg .form-box { border: 1px solid #d6d6d0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.12); }
.lp-lightbg .lp-visual { border-color: #d6d6d0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 30px rgba(0, 0, 0, 0.10); }
.lp-lightbg .lp-job { color: #4f4f4b; }
.lp-lightbg .compare-col.old { border-color: #d6d6d0; }
/* Top section hierarchy: black headline with blue key words, black ticks, grey supporting lines */
.lp-top h1 .hl { color: var(--blue); }
.lp-lightbg .lp-counter { color: #6b6b66; font-weight: 500; }
.lp-lightbg .lp-ticks li { color: #111111; font-weight: 700; }
.lp-lightbg .lp-job { color: #8a8a85; }
/* Tighter sections below the form on phones */
@media (max-width: 600px) {
  .lp-lightbg .lp-top { padding-bottom: 8px; }
  .lp-lightbg .lp-visual { margin-bottom: 12px; }
  .lp-lightbg .lp-cta { padding: 15px 24px; font-size: 17px; }
  .lp-lightbg .lp-ps { margin-top: 8px; text-wrap: balance; }
  .lp-lightbg .lp-wrap { padding: 0 16px; }
  .lp-lightbg .lp-compare { padding: 28px 0 32px; }
  .lp-lightbg .lp-compare h2 { font-size: 23px; margin-bottom: 16px; text-wrap: balance; }
  .lp-lightbg .lp-compare .compare { gap: 12px; }
  .lp-lightbg .lp-compare .compare-col.old,
  .lp-lightbg .lp-compare .compare-col.us { padding: 20px; border-radius: 16px; }
  .lp-lightbg .lp-compare .compare-col.old { border: 1px solid #d6d6d0; }
  .lp-lightbg .lp-compare .compare-col > .eyebrow { margin-bottom: 6px; }
  .lp-lightbg .lp-compare .compare-col > h3 { margin-bottom: 12px; font-size: 17px; }
  .lp-lightbg .lp-compare .point + .point { margin-top: 10px; }
  .lp-lightbg .lp-compare .point h4 { font-size: 15px; }
  .lp-lightbg .lp-guarantee { padding-bottom: 40px; }
  .lp-lightbg .lp-guarantee .eyebrow { margin-bottom: 8px; }
  .lp-lightbg .lp-guarantee h2 { font-size: 23px; margin-bottom: 10px; text-wrap: balance; }
  .lp-lightbg .lp-guarantee p { margin-bottom: 18px; }
}
/* Wrapped comparison lines line up with the text, not the tick or cross */
.lp-compare .point h4 { position: relative; padding-left: 1.4em; }
.lp-compare .point h4::before { position: absolute; left: 0; }
@media (max-width: 600px) {
  .lp-lightbg .lp-compare h2 { font-size: 21px; }
}
/* Calmer comparison colours: the old way fades back in grey, the SAINTLAVO way is a white card with a blue edge */
.lp-lightbg .lp-compare .compare-col.old { background: transparent; border: 1px solid #d6d6d0; }
.lp-lightbg .lp-compare .compare-col.old > .eyebrow,
.lp-lightbg .lp-compare .compare-col.old > h3,
.lp-lightbg .lp-compare .compare-col.old .point h4,
.lp-lightbg .lp-compare .compare-col.old .point h4::before { color: #8a8a85; }
.lp-lightbg .lp-compare .compare-col.us { background: #ffffff; color: #111111; border: 2px solid var(--blue); box-shadow: 0 12px 30px rgba(37, 99, 235, 0.12); }
.lp-lightbg .lp-compare .compare-col.us > h3,
.lp-lightbg .lp-compare .compare-col.us .point h4 { color: #111111; }
/* Example calendar: a heading and a tinted, flat card so it reads as a picture, not a second form */
.lp-visual-title { font-size: 21px; margin: 36px 0 12px; text-align: center; }
.lp-lightbg .lp-visual { background: #e9eefb; border: 0; box-shadow: none; }
.lp-lightbg .lp-visual .cal-row { border-top-color: #d3dcf3; }
.lp-lightbg .lp-visual .cal-tag { background: #ffffff; }
.lp-lightbg .lp-visual .cal-win .cal-tag { background: var(--good); }
/* Tighter calendar and comparison on phones */
@media (max-width: 600px) {
  .lp-visual-title { font-size: 20px; margin: 22px 0 10px; }
  .lp-lightbg .lp-visual { padding: 12px 14px; margin-bottom: 0; }
  .lp-lightbg .lp-visual .cal-head { margin-bottom: 4px; }
  .lp-lightbg .lp-visual .cal-row { padding: 6px 0; }
  .lp-lightbg .lp-top { padding-bottom: 0; }
  .lp-lightbg .lp-compare { padding-top: 26px; }
  .lp-lightbg .lp-compare h2 { margin-bottom: 12px; }
  .lp-lightbg .lp-compare .compare { gap: 10px; }
  .lp-lightbg .lp-compare .compare-col.old,
  .lp-lightbg .lp-compare .compare-col.us { padding: 16px 18px; }
  .lp-lightbg .lp-compare .compare-col > h3 { margin-bottom: 8px; }
  .lp-lightbg .lp-compare .point + .point { margin-top: 6px; }
}
/* Stronger glow on the SAINTLAVO card */
.lp-lightbg .lp-compare .compare-col.us { box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18); }
.lp-lightbg .lp-guarantee p { text-wrap: balance; }
.lp-lightbg .lp-pill { border-color: var(--blue); }
.lp-lightbg .lp-pill { border-width: 2px; background: #eef3fe; }
/* Faint fixed logo behind the page */
.lp-watermark { position: fixed; top: 50%; left: 50%; width: 140vw; max-width: 900px; aspect-ratio: 88 / 42; transform: translate(-50%, -50%); background: url("/assets/rooftops-black-roof.svg") center / contain no-repeat; opacity: 0.05; pointer-events: none; z-index: 0; }
.lp-lightbg .lp-logobar, .lp-lightbg .lp-top, .lp-lightbg .lp-wrap { position: relative; z-index: 1; }
.lp-watermark { width: 92vw; max-width: 640px; opacity: 0.06; }
.lp-watermark { opacity: 0.04; }
/* Page background 4 shades lighter than #f5f5f2 */
body:has(.lp-lightbg) { background: #f9f9f6; }
.lp.lp-lightbg { background: #f9f9f6; }
/* Background logo now sits only behind the guarantee section, and scrolls with it */
.lp-lightbg .lp-guarantee { position: relative; isolation: isolate; }
.lp-guarantee .lp-watermark { position: absolute; top: 50%; left: 50%; width: 100%; max-width: 420px; z-index: -1; }
/* /submitted and /not-yet: same light look and logo as /agents */
.lp-lightbg .lp-brand { letter-spacing: 0; margin-bottom: 20px; }
.lp-lightbg .lp-brand .logo { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; color: #111111; }
.lp-lightbg .lp-brand .logo img { height: 22px; width: auto; }
.lp-lightbg.thanks .btn-white { background: var(--blue); color: #ffffff; }
.lp-guarantee .lp-watermark { top: 4px; width: 70%; max-width: 260px; transform: translateX(-50%); }
/* Blue ring around the form after tapping "Book a call" (starts as the scroll finishes, then fades) */
#book-a-call.form-highlight { animation: form-highlight 2.2s ease-out 0.5s; }
@keyframes form-highlight {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0), 0 16px 40px rgba(0, 0, 0, 0.12); border-color: #d6d6d0; }
  15% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.9), 0 0 0 12px rgba(37, 99, 235, 0.18), 0 16px 40px rgba(0, 0, 0, 0.12); border-color: var(--blue); }
  65% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.9), 0 0 0 12px rgba(37, 99, 235, 0.18), 0 16px 40px rgba(0, 0, 0, 0.12); border-color: var(--blue); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0), 0 16px 40px rgba(0, 0, 0, 0.12); border-color: #d6d6d0; }
}
@media (prefers-reduced-motion: reduce) { #book-a-call.form-highlight { animation-duration: 0.01s; } }
/* Softer highlight: a blurred blue glow instead of a hard ring, and it settles to a faint glow instead of disappearing */
#book-a-call.form-highlight { animation: form-glow 2.4s ease-out 0.5s forwards; }
@keyframes form-glow {
  0% { border-color: #d6d6d0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.12); }
  20% { border-color: rgba(37, 99, 235, 0.85); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.5), 0 0 28px 6px rgba(37, 99, 235, 0.35), 0 16px 40px rgba(0, 0, 0, 0.10); }
  60% { border-color: rgba(37, 99, 235, 0.85); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.5), 0 0 28px 6px rgba(37, 99, 235, 0.35), 0 16px 40px rgba(0, 0, 0, 0.10); }
  100% { border-color: rgba(37, 99, 235, 0.45); box-shadow: 0 0 22px 2px rgba(37, 99, 235, 0.14), 0 16px 40px rgba(0, 0, 0, 0.10); }
}
/* Agents page, desktop only: headline + calendar on the left, form on the right. Phone view untouched. */
@media (min-width: 1000px) {
  .lp-lightbg .lp-top { max-width: 1120px; padding: 32px 32px 56px; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) 460px; column-gap: 64px; align-content: start; }
  .lp-lightbg .lp-top > * { grid-column: 1; justify-self: start; }
  .lp-lightbg .lp-top > .lp-hero { grid-column: 2; grid-row: 1 / span 7; align-self: start; justify-self: stretch; margin: 0; display: block; }
  .lp-lightbg .lp-counter { margin-bottom: 16px; }
  .lp-lightbg .lp-pill { margin: 0 0 20px; font-size: 17px; padding: 12px 26px; max-width: none; }
  /* Spots counter sits above the form */
  .lp-lightbg .lp-top > .lp-counter { grid-column: 2; grid-row: 1; justify-self: center; align-self: end; margin-bottom: 12px; }
  /* Form top lines up with the pill, form bottom with the calendar */
  .lp-lightbg .lp-top > .lp-pill { grid-row: 2; }
  .lp-lightbg .lp-top > h1 { grid-row: 3; }
  .lp-lightbg .lp-top > .lp-ticks { grid-row: 4; }
  .lp-lightbg .lp-top > .lp-job { grid-row: 5; }
  .lp-lightbg .lp-top > .lp-visual-title { grid-row: 6; }
  .lp-lightbg .lp-top > .lp-visual { grid-row: 7; }
  .lp-lightbg .lp-top > .lp-hero { grid-row: 2 / 8; align-self: stretch; display: flex; }
  .lp-lightbg .lp-top > .lp-hero .form-box { flex: 1; align-self: stretch; align-content: center; }
  .lp .lp-top h1 { font-size: 52px; margin: 0 0 20px; max-width: 600px; text-align: left; text-wrap: balance; }
  .lp-top h1 .hl { white-space: nowrap; }
  .lp-ticks { margin: 0 0 14px; }
  .lp-ticks li { font-size: 19px; }
  .lp-lightbg .lp-top .lp-job { font-size: 16px; margin: 0; text-align: left; }
  .lp-visual-title { font-size: 19px; margin: 36px 0 12px; padding-left: 10px; text-align: left; }
  .lp-lightbg .lp-visual { margin: 0; width: 100%; max-width: 460px; }
}
/* Agents page, desktop only: faint logo fixed behind the whole page instead of only the guarantee */
@media (min-width: 1000px) {
  .lp-guarantee .lp-watermark { display: none; }
  .lp.lp-lightbg::before { content: ""; position: fixed; top: 50%; left: 50%; width: 60vw; max-width: 900px; aspect-ratio: 88 / 42; transform: translate(-50%, -50%); background: url("/assets/rooftops-black-roof.svg") center / contain no-repeat; opacity: 0.04; pointer-events: none; z-index: 0; }
  /* Booking page has its own logo on the calendar instead */
  .booking.lp.lp-lightbg::before { display: none; }
}
/* Agents page, phone and desktop: stronger calendar card (white card, bigger text, date chips, green "signed" row) */
@media all {
  .lp-lightbg .lp-visual { background: #ffffff; border: 1px solid #bdbdb7; border-radius: 16px; padding: 0; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 20px 48px rgba(0, 0, 0, 0.18); }
  .lp-lightbg .lp-visual .cal-head { background: #e5e5e5; color: #111111; padding: 14px 20px; margin: 0; align-items: center; }
  .lp-lightbg .lp-visual .cal-head b { font-size: 16px; }
  .lp-lightbg .lp-visual .cal-head small { color: #111111; font-size: 13px; font-weight: 600; background: #ffffff; border-radius: 999px; padding: 4px 10px; }
  .lp-lightbg .lp-visual .cal-row { grid-template-columns: 56px 1fr auto; gap: 14px; padding: 14px 20px; border-top: 1px solid #ececE7; }
  .lp-lightbg .lp-visual .cal-head + .cal-row { border-top: 0; }
  .lp-lightbg .lp-visual .cal-time { background: #eef3fe; color: var(--blue); border-radius: 10px; padding: 7px 0; text-align: center; font-size: 12px; }
  .lp-lightbg .lp-visual .cal-row b { font-size: 15px; }
  .lp-lightbg .lp-visual .cal-row small { font-size: 12.5px; color: #6b6b66; margin-top: 2px; }
  .lp-lightbg .lp-visual .cal-tag { font-size: 12px; padding: 6px 12px; background: #eef3fe; color: var(--blue); }
  .lp-lightbg .lp-visual .cal-win { background: #eaf6ef; }
  .lp-lightbg .lp-visual .cal-win .cal-time { background: var(--good); color: #ffffff; }
  .lp-lightbg .lp-visual .cal-win .cal-tag { background: var(--good); color: #ffffff; }
}
/* Agents page, phone: same calendar card, sized to fit; title left-aligned and nudged in like desktop */
@media (max-width: 999px) {
  .lp-visual-title { text-align: left; padding-left: 10px; max-width: 440px; margin-left: auto; margin-right: auto; }
  .lp-lightbg .lp-visual { padding: 0; margin-bottom: 0; }
  .lp-lightbg .lp-visual .cal-head { padding: 12px 14px; margin: 0; }
  .lp-lightbg .lp-visual .cal-head b { font-size: 15px; }
  .lp-lightbg .lp-visual .cal-head small { font-size: 12px; padding: 3px 9px; }
  .lp-lightbg .lp-visual .cal-row { grid-template-columns: 48px 1fr auto; gap: 10px; padding: 10px 14px; }
  .lp-lightbg .lp-visual .cal-time { font-size: 11px; padding: 6px 0; border-radius: 8px; }
  .lp-lightbg .lp-visual .cal-row b { font-size: 14px; }
  .lp-lightbg .lp-visual .cal-row small { font-size: 11.5px; white-space: normal; }
  .lp-lightbg .lp-visual .cal-tag { font-size: 11px; padding: 5px 10px; }
}
/* Agents page: on medium screens (901-1100px) "The old way" box lost its padding and rounded corners; give them back */
@media (min-width: 901px) {
  .lp-lightbg .lp-compare .compare-col.old { padding: 40px 48px; border-radius: 20px; }
}
/* Agents page: tablet-width screens (601-900px) had the same "old way" problem; both boxes get matching padding and corners */
@media (min-width: 601px) and (max-width: 900px) {
  .lp-lightbg .lp-compare .compare-col.old,
  .lp-lightbg .lp-compare .compare-col.us { padding: 32px 32px; border-radius: 20px; }
}
/* Agents page, desktop only: tighter spacing between sections */
@media (min-width: 1000px) {
  .lp-lightbg .lp-top { padding-top: 20px; padding-bottom: 24px; }
  .lp-lightbg .lp-compare { padding: 56px 0; }
  .lp-lightbg .lp-compare h2 { margin-bottom: 32px; }
  .lp-lightbg .lp-guarantee { padding-bottom: 64px; }
}
/* Spots counter: grey dots and rings, drawn as SVG so the rings stay smooth */
.spot-dots i { border: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='%238a8a85' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat; }
.spot-dots i.taken { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%238a8a85'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Form: "Step 1 of 2 · 3 quick questions." on one line on every screen, like the phone */
.lp .form-box .step-count { display: inline; margin-right: 4px; }
/* Form step 2: "no newsletters" opt-out tick box */
.lp .form-box .optout { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 0; font-size: 13px; font-weight: 500; color: #4f4f4b; line-height: 1.4; cursor: pointer; text-transform: none; letter-spacing: 0; }
.lp .form-box .optout input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--blue); cursor: pointer; }
/* Agents page, phone and desktop: form restyle so it looks custom, not a stock template */
@media all {
  /* Blue strip along the top of the card */
  .lp-lightbg .lp-top .form-box { position: relative; overflow: hidden; border-radius: 20px; padding: 40px 36px 32px; }
  .lp .lp-top .form-box .form-title { font-size: 26px; letter-spacing: -0.01em; }
  /* Progress bar above "Step 1 of 2" */
  .lp .lp-top .form-box .intro::before { content: ""; display: block; width: 120px; height: 5px; margin: 0 auto 12px; border-radius: 999px; background: linear-gradient(90deg, var(--blue) 50%, #e5e7eb 50%); }
  .lp .lp-top .form-step[data-step="2"] .intro::before { background: var(--blue); }
  /* Soft filled inputs with a blue glow on focus */
  .lp .lp-top .form-box .field label { font-size: 13px; color: #111111; margin-bottom: 6px; }
  .lp .lp-top .form-box .field input { background: #f3f4f6; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 14px 16px; font-size: 15px; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
  .lp .lp-top .form-box .field input:not(:placeholder-shown) { background: #f3f4f6; border-color: #e5e7eb; }
  .lp .lp-top .form-box .field input:hover { border-color: #cbd0d8; }
  .lp .lp-top .form-box .field input:focus { background: #ffffff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14); }
  .lp .lp-top .form-box .field.invalid input { border-color: #b3261e; }
  /* Answer buttons: same soft fill, blue when picked */
  .lp .lp-top .choices span { background: #f3f4f6; border: 1.5px solid #e5e7eb; border-radius: 12px; font-weight: 600; transition: border-color 0.15s, background 0.15s, color 0.15s; }
  .lp .lp-top .choices label:hover span { border-color: var(--blue); background: #ffffff; }
  .lp .lp-top .choices input:checked + span { background: #eef3fe; border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
  /* Full-width main button */
  .lp .lp-top .form-box .form-submit .btn { width: 100%; justify-content: center; border-radius: 14px; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28); }
  .lp .lp-top .form-box .form-submit .btn:hover { box-shadow: 0 10px 24px rgba(37, 99, 235, 0.36); }
}
/* Agents page, phone: keep the restyled form compact */
@media (max-width: 600px) {
  .lp-lightbg .lp-top .form-box { padding: 26px 18px 20px; border-radius: 18px; }
  .lp .lp-top .form-box .form-title { font-size: 20px; }
  .lp .lp-top .form-box .intro::before { width: 96px; height: 4px; margin-bottom: 8px; }
  .lp .lp-top .form-box .field input { padding: 11px 14px; }
  .lp .lp-top .form-box .form-submit .btn { padding: 14px 24px; }
}
/* Opt-out tick box: round, thicker, drawn as SVG so it stays smooth; blue with a white tick when ticked */
.lp .form-box .optout { align-items: center; }
.lp .form-box .optout input { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border: 0; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.75' fill='%23ffffff' stroke='%239ca3af' stroke-width='2.5'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.1s; }
.lp .form-box .optout input:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.75' fill='%23ffffff' stroke='%232563eb' stroke-width='2.5'/%3E%3C/svg%3E"); }
.lp .form-box .optout input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%232563eb'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lp .form-box .optout input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Privacy policy popup (opened from the form) */
.policy-pop { width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 640px); padding: 32px 28px 24px; border: 0; border-radius: 20px; background: #ffffff; color: #111111; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); overflow: auto; }
.policy-pop::backdrop { background: rgba(17, 17, 17, 0.55); }
.policy-pop h2 { font-size: 22px; margin: 0 0 10px; }
.policy-pop .lead { font-size: 14px; color: #4f4f4b; margin: 0 0 20px; }
.policy-pop .terms { display: block; }
.policy-pop .term { padding: 14px 0; border: 0; border-top: 1px solid #e5e7eb; }
.policy-pop .term h3 { font-size: 15px; margin: 0 0 4px; }
.policy-pop .term p { font-size: 14px; color: #4f4f4b; margin: 0; }
.policy-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f3f4f6; color: #111111; font-size: 22px; line-height: 1; cursor: pointer; }
.policy-close:hover { background: #e5e7eb; }
.policy-pop .policy-done { display: flex; width: 100%; justify-content: center; margin-top: 16px; background: var(--blue); color: #ffffff; border-radius: 14px; }
@media (max-width: 600px) { .policy-pop { padding: 28px 20px 20px; } }
.policy-pop { margin: auto; inset: 0; }
.policy-pop h2 { text-transform: none; letter-spacing: -0.01em; }
/* Privacy popup: scroll inside the content area (thin bar, clear of the rounded corners); hide the focus ring on the × unless using the keyboard */
.policy-pop { overflow: hidden; padding: 0; }
.policy-pop[open] { display: flex; flex-direction: column; }
.policy-pop .policy-body { flex: 1; min-height: 0; overflow-y: auto; padding: 32px 24px 8px 28px; margin: 10px 6px 0 0; scrollbar-width: thin; scrollbar-color: #cbd0d8 transparent; }
.policy-pop .policy-body::-webkit-scrollbar { width: 6px; }
.policy-pop .policy-body::-webkit-scrollbar-thumb { background: #cbd0d8; border-radius: 999px; }
.policy-pop .policy-body::-webkit-scrollbar-track { background: transparent; }
.policy-pop .policy-done { flex: none; width: auto; margin: 12px 28px 24px; }
.policy-close { z-index: 1; }
.policy-close:focus { outline: none; }
.policy-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 600px) {
  .policy-pop { padding: 0; }
  .policy-pop .policy-body { padding: 28px 16px 8px 20px; }
  .policy-pop .policy-done { margin: 12px 20px 20px; }
}
.policy-pop .policy-done { text-transform: none; letter-spacing: 0.01em; font-size: 16px; font-weight: 700; padding: 15px 28px; }
.policy-pop .policy-body:focus { outline: none; }
/* Privacy popup on phones: a fixed height (not just a max) so Safari keeps the button in view, sized to the visible screen (dvh) */
.policy-pop { height: min(80vh, 640px); height: min(80dvh, 640px); max-height: none; }
/* Opt-out row: sit closer to the email field, leave room above the button, circle level with the first line */
.lp .form-box .optout { align-items: flex-start; margin: -6px 0 18px; }
.lp .form-box .optout input { margin-top: -2px; }
/* Form keeps the soft blue glow at all times (same as the end of the "Book a call" highlight) */
.lp-lightbg #book-a-call { border-color: rgba(37, 99, 235, 0.45); box-shadow: 0 0 22px 2px rgba(37, 99, 235, 0.14), 0 16px 40px rgba(0, 0, 0, 0.10); }
/* How it works: 4 numbered steps between the calendar and the comparison */
.lp-how { padding: 64px 0 0; }
.lp-how h2 { text-align: center; font-size: clamp(24px, 3.5vw, 36px); margin-bottom: 6px; }
.how-sub { text-align: center; font-size: 16px; color: #6b6b66; margin: 0 0 20px; }
.how-more { max-width: 520px; margin: 16px auto 0; text-align: center; font-size: 15px; line-height: 1.5; color: #4f4f4b; text-wrap: balance; }
.how-more a { display: block; width: fit-content; margin: 8px auto 0; color: var(--blue); font-weight: 700; white-space: nowrap; text-decoration: none; }
.how-more a:hover { text-decoration: underline; }
.how-steps { list-style: none; margin: 0 auto; padding: 22px 24px; max-width: 520px; background: #ffffff; border: 1px solid #d6d6d0; border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 30px rgba(0, 0, 0, 0.10); }
.how-steps li { position: relative; display: flex; gap: 14px; align-items: flex-start; padding-bottom: 20px; }
.how-steps li:last-child { padding-bottom: 0; }
.how-steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background: #e3e3de; }
.how-num { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #e8effd; color: var(--blue); font-family: var(--head); font-weight: 800; font-size: 15px; }
.how-num svg { width: 16px; height: 16px; }
.how-steps b { display: block; font-family: var(--head); font-size: 17px; font-weight: 800; color: #111111; padding-top: 4px; }
.how-steps small { display: block; font-size: 15px; color: #4f4f4b; line-height: 1.45; margin-top: 2px; }
.how-tease { display: inline-block; margin-top: 8px; padding: 5px 10px; border-radius: 8px; background: #e8effd; color: var(--blue); font-size: 13px; font-weight: 600; line-height: 1.4; }
.how-win .how-num { background: var(--good); color: #ffffff; }
.how-win b { color: var(--good); }
@media (max-width: 600px) {
  .lp-how { padding-top: 28px; }
  .lp-how h2 { font-size: 23px; margin-bottom: 4px; }
  .how-sub { font-size: 15px; margin-bottom: 14px; }
  .how-more { font-size: 14px; margin-top: 12px; }
  .how-steps { padding: 18px 18px; }
  .how-steps li { padding-bottom: 16px; }
  .how-steps b { font-size: 16px; }
  .how-steps small { font-size: 14px; }
}
/* Reassurance under the form buttons: booking a call isn't buying */
.form-safe { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-size: 13px; font-weight: 500; color: #4f4f4b; text-align: center; }
.form-safe svg { flex: none; width: 15px; height: 15px; color: var(--good); }
/* What agents learn on the call, under How it works */
.how-learn { max-width: 520px; margin: 16px auto 0; padding: 18px 22px; border-radius: 16px; background: #e8effd; }
.how-learn-title { font-family: var(--head); font-size: 16px; font-weight: 800; color: #111111; margin: 0 0 10px; }
.how-learn ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.how-learn li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.45; color: #2b2b28; }
.how-learn li::before { content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
.how-learn a { display: block; width: fit-content; margin: 14px auto 0; color: var(--blue); font-weight: 700; text-decoration: none; }
.how-learn a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .how-learn { margin-top: 12px; padding: 16px 18px; }
  .how-learn-title { font-size: 15px; }
  .how-learn li { font-size: 14px; }
}
/* Call value box: tag, tighter heading, bold lead-in on each point */
.how-learn { padding: 20px 22px 18px; border: 1px solid #cfdcfb; }
.how-learn-tag { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: var(--blue); color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; }
.how-learn-title { margin-bottom: 12px; }
.how-learn ul { gap: 10px; }
.how-learn li b { font-weight: 700; color: #111111; }
.how-learn a { margin-top: 16px; }
/* Call value box, dark version: stands out as a bonus between the light sections */
.how-learn { background: #111111; border: 0; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); padding: 22px 22px 20px; }
.how-learn-tag { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
.how-learn-title { color: #ffffff; }
.how-learn li { color: #b3b3ae; }
.how-learn li b { color: #ffffff; }
.how-learn li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d55' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
.how-learn a { width: 100%; margin-top: 18px; padding: 13px 20px; border-radius: 12px; background: var(--blue); color: #ffffff; text-align: center; font-size: 16px; }
.how-learn a:hover { text-decoration: none; background: #1d4fd8; }
/* Call value box, white version: matches the steps card, green "free" accents */
.how-learn { background: #ffffff; border: 1px solid #d6d6d0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 30px rgba(0, 0, 0, 0.10); }
.how-learn-tag { background: #e6f5ec; color: var(--good); }
.how-learn-title { color: #111111; }
.how-learn li { padding-left: 30px; color: #4f4f4b; }
.how-learn li b { color: #111111; }
.how-learn li::before { top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #e6f5ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d55' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }
/* Steps and call value share one card, split by a dashed line */
.how-card { max-width: 520px; margin: 0 auto; background: #ffffff; border: 1px solid #d6d6d0; border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 30px rgba(0, 0, 0, 0.10); overflow: hidden; }
.how-card .how-steps { max-width: none; border: 0; border-radius: 0; box-shadow: none; }
.how-card .how-learn { max-width: none; margin: 0; border: 0; border-top: 1.5px dashed #d6d6d0; border-radius: 0; box-shadow: none; background: #fbfbf9; }
/* Book a call in the card: back to a plain blue text link, not a button */
.how-learn a { width: fit-content; margin: 16px auto 0; padding: 0; border-radius: 0; background: none; color: var(--blue); font-size: 15px; }
.how-learn a:hover { background: none; text-decoration: underline; }
/* Call value part: back to the blue look (blue tag, plain blue ticks, light blue fill) inside the joined card */
.how-card .how-learn { background: #fbfbf9; border-top-color: #d6d6d0; }
.how-learn-tag { background: #e8effd; color: var(--blue); }
.how-learn li { padding-left: 24px; color: #4f4f4b; }
.how-learn li::before { top: 4px; width: 15px; height: 15px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }