/* ===== Design Tokens ===== */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --content-narrow: 680px; --content-default: 1000px; --content-wide: 1200px;

  --font-body: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
}

:root, [data-theme='light'] {
  --color-bg: #f6f8fb;
  --color-surface: #ffffff;
  --color-surface-2: #fbfcfe;
  --color-surface-offset: #eef3f9;
  --color-divider: #dce4ee;
  --color-border: #cdd8e6;

  --color-text: #16273a;
  --color-text-muted: #5a6b80;
  --color-text-faint: #98a6b8;
  --color-text-inverse: #f6f8fb;

  --color-primary: #184a79;
  --color-primary-hover: #123a61;
  --color-primary-active: #0d2c49;
  --color-accent: #3d8cca;
  --color-accent-hover: #2f78b3;
  --color-primary-highlight: #d9e6f3;

  --shadow-sm: 0 1px 2px rgba(24,74,121,0.06);
  --shadow-md: 0 6px 18px rgba(24,74,121,0.10);
  --shadow-lg: 0 18px 44px rgba(24,74,121,0.14);
}

[data-theme='dark'] .btn { color: #0d1822; }
[data-theme='dark'] {
  --color-bg: #0d1822;
  --color-surface: #14222f;
  --color-surface-2: #182a39;
  --color-surface-offset: #1b2e3e;
  --color-divider: #243646;
  --color-border: #2e4356;

  --color-text: #dde7f1;
  --color-text-muted: #8da0b4;
  --color-text-faint: #5d7186;
  --color-text-inverse: #0d1822;

  --color-primary: #5aa3da;
  --color-primary-hover: #74b3e3;
  --color-primary-active: #8ec2ea;
  --color-accent: #5aa3da;
  --color-accent-hover: #74b3e3;
  --color-primary-highlight: #1d3245;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.4);
  --shadow-lg: 0 18px 44px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0d1822; --color-surface: #14222f; --color-surface-2: #182a39;
    --color-surface-offset: #1b2e3e; --color-divider: #243646; --color-border: #2e4356;
    --color-text: #dde7f1; --color-text-muted: #8da0b4; --color-text-faint: #5d7186;
    --color-text-inverse: #0d1822; --color-primary: #5aa3da; --color-primary-hover: #74b3e3;
    --color-primary-active: #8ec2ea; --color-accent: #5aa3da; --color-accent-hover: #74b3e3;
    --color-primary-highlight: #1d3245;
  }
}

/* ===== Base ===== */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: none; text-size-adjust: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; scroll-behavior: smooth;
  scroll-padding-top: var(--space-20);
}
body {
  min-height: 100dvh; line-height: 1.6; font-family: var(--font-body);
  font-size: var(--text-base); color: var(--color-text); background-color: var(--color-bg);
}
img,svg { display: block; max-width: 100%; height: auto; }
ul[role='list'] { list-style: none; }
input,button,textarea,select { font: inherit; color: inherit; }
h1,h2,h3,h4 { text-wrap: balance; line-height: 1.15; font-family: var(--font-display); }
p,li { text-wrap: pretty; }
a { color: inherit; }
::selection { background: rgba(61,140,202,0.25); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }
button { cursor: pointer; background: none; border: none; }
a,button,input,textarea,select {
  transition: color var(--transition-interactive), background var(--transition-interactive),
    border-color var(--transition-interactive), box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms!important; transition-duration: .01ms!important; scroll-behavior: auto!important; }
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===== Layout helpers ===== */
.container { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-6); }
.prose { max-width: var(--content-narrow); }
section { padding-block: clamp(var(--space-16), 7vw, var(--space-32)); }

/* ===== Header ===== */
.header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-divider);
}
.header__inner { display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); padding-block: var(--space-4); }
.brand { display:flex; align-items:center; gap: var(--space-3); text-decoration:none; }
.brand img { height: 48px; width:auto; }
[data-theme='dark'] .brand img, [data-theme='dark'] .footer img { filter: brightness(0) invert(0.92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .brand img, :root:not([data-theme]) .footer img { filter: brightness(0) invert(0.92); } }
.brand__text { font-weight: 700; font-size: var(--text-sm); color: var(--color-primary); letter-spacing:.01em; }
.nav { display:flex; align-items:center; gap: var(--space-2); }
.nav a { text-decoration:none; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-primary); background: var(--color-surface-offset); }


.btn {
  display:inline-flex; align-items:center; gap: var(--space-2); font-size: var(--text-sm); font-weight:700;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); text-decoration:none;
  background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary);
}
.btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color:#fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--color-primary); }
.btn--ghost:hover { background: var(--color-surface-offset); transform:none; box-shadow:none; }

/* ===== Hero ===== */
.hero { position:relative; overflow:hidden; padding-block: clamp(var(--space-20), 9vw, var(--space-32)); }
.hero::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 500px at 78% -10%, rgba(61,140,202,0.22), transparent 60%),
    radial-gradient(700px 600px at 0% 110%, rgba(24,74,121,0.16), transparent 55%);
}
.hero__grid { display:grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(var(--space-8), 5vw, var(--space-20)); align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap: var(--space-2); font-size: var(--text-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--color-accent); margin-bottom: var(--space-4); }
.eyebrow::before { content:''; width:24px; height:2px; background: var(--color-accent); border-radius: var(--radius-full); }
.hero h1 { font-size: var(--text-2xl); font-weight:800; letter-spacing:-.02em; margin-bottom: var(--space-5); }
.hero h1 span { color: var(--color-primary); }
.hero p.lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 50ch; margin-bottom: var(--space-8); }
.hero__cta { display:flex; flex-wrap:wrap; gap: var(--space-3); }
/* Section order: register prompt sits directly under the hero (all viewports). */
main { display:flex; flex-direction:column; }
main > .hero { order: 1; }
main > #register { order: 2; }
main > .hero__card { order: 3; } /* JS moves the card here on mobile */
main > #services { order: 4; }
main > #how { order: 5; }
main > #landlord-cta { order: 6; }
.hero__card {
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 3vw, var(--space-10)); box-shadow: var(--shadow-lg);
}
.hero__card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.hero__card p { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.factlist { display:grid; gap: var(--space-3); }
.factlist li { display:flex; gap: var(--space-3); align-items:flex-start; font-size: var(--text-sm); }
.factlist svg { flex:none; color: var(--color-accent); margin-top: 2px; }

/* ===== Section heads ===== */
.section-head { max-width: 60ch; margin-bottom: var(--space-12); }
.section-head .eyebrow { margin-bottom: var(--space-3); }
.section-head h2 { font-size: var(--text-xl); font-weight:800; letter-spacing:-.01em; margin-bottom: var(--space-3); }
.section-head p { color: var(--color-text-muted); }

/* ===== Cards grid ===== */
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }
.card {
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-8); box-shadow: var(--shadow-sm);
}
.card .ic { width:48px; height:48px; border-radius: var(--radius-md); display:grid; place-items:center; background: var(--color-primary-highlight); color: var(--color-primary); margin-bottom: var(--space-5); }
.card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.card p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ===== Steps / process ===== */
.steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--space-6); counter-reset: step; }
.step { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface-2); border:1px solid var(--color-divider); }
.step::before { counter-increment: step; content: counter(step); display:grid; place-items:center; width:36px; height:36px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-text-inverse); font-weight:800; font-size: var(--text-sm); margin-bottom: var(--space-4); }
.step h3 { font-size: var(--text-base); margin-bottom: var(--space-2); }
.step p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ===== Band / CTA ===== */
.band { background: var(--color-primary); color: var(--color-text-inverse); border-radius: var(--radius-xl); padding: clamp(var(--space-10), 5vw, var(--space-16)); }
.band__inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: var(--space-6); }
.band h2 { font-size: var(--text-xl); margin-bottom: var(--space-2); color:#fff; }
.band p { color: rgba(255,255,255,.82); max-width: 48ch; }
.band .btn { background:#fff; color: var(--color-primary); border-color:#fff; }
.band .btn:hover { background: var(--color-primary-highlight); }

/* ===== Form ===== */
.form-wrap { display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items:start; }
.form-info h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.form-info p { color: var(--color-text-muted); margin-bottom: var(--space-6); }
.contact-list { display:grid; gap: var(--space-4); }
.contact-list li { display:flex; gap: var(--space-3); align-items:flex-start; }
.contact-list .ic { flex:none; width:40px; height:40px; border-radius: var(--radius-md); display:grid; place-items:center; background: var(--color-primary-highlight); color: var(--color-primary); }
.contact-list strong { display:block; font-size: var(--text-sm); }
.contact-list span, .contact-list a { color: var(--color-text-muted); font-size: var(--text-sm); text-decoration:none; }
.contact-list a:hover { color: var(--color-primary); }

form { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(var(--space-6), 3vw, var(--space-10)); box-shadow: var(--shadow-md); }
.field { margin-bottom: var(--space-5); }
.field label { display:block; font-size: var(--text-sm); font-weight:600; margin-bottom: var(--space-2); }
.field .req { color: var(--color-accent); }
.field input, .field select, .field textarea {
  width:100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border:1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-accent); outline:none; box-shadow: 0 0 0 3px rgba(61,140,202,.18); }
.field textarea { min-height: 120px; resize: vertical; }
.field-hint { display:block; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-muted, #64748b); line-height:1.4; }
.field-row { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.check-group { display:flex; flex-wrap:wrap; gap: var(--space-3); }
.check-pill { display:flex; align-items:center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text); padding: var(--space-2) var(--space-4); border:1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface-2); cursor:pointer; }
.check-pill:hover { border-color: var(--color-accent); }
.check-pill input { width:auto; accent-color: var(--color-primary); }
.check-pill:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-highlight); color: var(--color-primary); font-weight:600; }
/* Searchable multi-select (preferred area) */
.multiselect { position:relative; }
.multiselect__chips { display:flex; flex-wrap:wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.multiselect__chips:empty { margin-bottom: 0; }
.chip { display:inline-flex; align-items:center; gap: var(--space-2); font-size: var(--text-sm); font-weight:600; color: var(--color-primary); background: var(--color-primary-highlight); border:1px solid var(--color-primary); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); }
.chip button { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; color: var(--color-primary); font-size: 14px; line-height:1; background: transparent; }
.chip button:hover { background: var(--color-primary); color:#fff; }
.multiselect__input { width:100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border:1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); }
.multiselect__input:focus { border-color: var(--color-accent); outline:none; box-shadow: 0 0 0 3px rgba(61,140,202,.18); }
.multiselect__options { position:absolute; left:0; right:0; z-index:20; margin-top: var(--space-2); max-height: 240px; overflow-y:auto; list-style:none; padding: var(--space-1); background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.multiselect__options li { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); cursor:pointer; color: var(--color-text); }
.multiselect__options li[aria-selected='true'] { color: var(--color-primary); font-weight:600; }
.multiselect__options li:hover, .multiselect__options li.is-active { background: var(--color-surface-offset); }
.multiselect__options li.is-empty { color: var(--color-text-faint); cursor:default; }
.consent-note { color: var(--color-text-faint); margin-bottom: var(--space-4); padding: var(--space-4); background: var(--color-surface-2); border:1px solid var(--color-border); border-radius: var(--radius-md); }
.consent-note p { font-size: 0.8125rem; line-height:1.5; max-width:none; }
.consent-note p + p { margin-top: var(--space-2); }
.checkbox { display:flex; gap: var(--space-3); align-items:flex-start; font-size: 0.8125rem; line-height:1.5; color: var(--color-text-muted); margin-bottom: var(--space-6); }
.checkbox input { width:auto; margin-top: 4px; }
.checkbox a { color: var(--color-primary); }
form .btn { width:100%; justify-content:center; }
.form-note { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-4); text-align:center; }
.form-status { font-size: var(--text-sm); margin-top: var(--space-4); text-align:center; }
.form-status.is-error { color: #c0392b; }
.form-status.is-ok { color: var(--color-primary); font-weight:600; }

/* Registration confirmation panel */
.register-success { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-sm); }
.register-success__icon { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background: var(--color-primary-highlight); color: var(--color-primary); margin-bottom: var(--space-5); }
.register-success h2 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.register-success__lead { color: var(--color-text-muted); margin-bottom: var(--space-6); }
.summary { display:grid; gap: 0; border:1px solid var(--color-border); border-radius: var(--radius-md); overflow:hidden; margin-bottom: var(--space-6); }
.summary__row { display:grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border); }
.summary__row:last-child { border-bottom:0; }
.summary__row:nth-child(odd) { background: var(--color-surface-2); }
.summary__row dt { font-size: var(--text-sm); font-weight:600; color: var(--color-text-muted); margin:0; }
.summary__row dd { font-size: var(--text-sm); color: var(--color-text); margin:0; word-break: break-word; }
.register-success__note { display:flex; gap: var(--space-4); align-items:flex-start; padding: var(--space-5); background: var(--color-primary-highlight); border:1px solid var(--color-primary); border-radius: var(--radius-md); }
.register-success__note-ic { flex:none; color: var(--color-primary); margin-top:2px; }
.register-success__note p { margin:0; color: var(--color-primary); font-size: var(--text-base); line-height:1.55; }
@media (max-width: 560px) {
  .summary__row { grid-template-columns: 1fr; gap: 2px; }
  .summary__row dt { color: var(--color-text-faint); }
}

/* Inline link-style button (e.g. mailing list trigger) */
.link-btn { display:inline; padding:0; border:0; background:none; font:inherit; font-size: var(--text-sm); color: var(--color-text-muted); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.link-btn:hover { color: var(--color-primary); }

/* ===== Modal ===== */
.modal-overlay { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding: var(--space-5); background: rgba(13,24,34,.55); backdrop-filter: blur(3px); }
.modal-overlay.is-open { display:flex; animation: modalFade .18s ease; }
@keyframes modalFade { from { opacity:0; } to { opacity:1; } }
.modal { position:relative; width:100%; max-width: 440px; max-height: 90vh; overflow-y:auto; background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: clamp(var(--space-6), 4vw, var(--space-10)); animation: modalRise .22s ease; }
@keyframes modalRise { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform:none; } }
.modal h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.modal > p { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.modal__close { position:absolute; top: var(--space-4); right: var(--space-4); width:36px; height:36px; display:grid; place-items:center; border-radius: var(--radius-full); border:1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text-muted); cursor:pointer; }
.modal__close:hover { color: var(--color-primary); border-color: var(--color-accent); }
body.modal-open { overflow:hidden; }

/* ===== Register CTA band ===== */
.register-band {
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items:center;
  background: var(--color-surface); border:1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: clamp(var(--space-8), 4vw, var(--space-12));
  box-shadow: var(--shadow-md);
}
.register-band__text h2 { font-size: var(--text-xl); font-weight:800; margin-bottom: var(--space-3); }
.register-band__text p { color: var(--color-text-muted); margin-bottom: var(--space-6); max-width: 46ch; }
.register-band .contact-list { border-left:1px solid var(--color-divider); padding-left: clamp(var(--space-6), 4vw, var(--space-12)); }
/* Contact-only variant (register prompt now lives in the popup wizard). */
.register-band--contact { display:block; }
.register-band--contact .contact-list { border-left:0; padding-left:0; max-width: 640px; margin-inline:auto; }

/* ===== Registration wizard modal ===== */
.wizard-overlay { align-items: flex-start; }
.wizard { max-width: 600px; margin-block: var(--space-8); }
.wizard__head { margin-bottom: var(--space-6); padding-right: var(--space-10); }
.wizard__head .eyebrow { margin-bottom: var(--space-2); }
.wizard__head h3 { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.wizard__progress { display:flex; align-items:center; gap: var(--space-3); }
.wizard__progress-bar { flex:1; height:6px; background: var(--color-surface-offset); border-radius: var(--radius-full); overflow:hidden; }
.wizard__progress-bar span { display:block; height:100%; width:25%; background: var(--color-accent); border-radius: var(--radius-full); transition: width var(--transition-interactive); }
.wizard__progress-label { font-size: var(--text-xs); font-weight:600; color: var(--color-text-muted); white-space:nowrap; margin:0; }
/* The form inside the wizard should not look like a separate card. */
.wizard form { background: transparent; border:0; border-radius:0; padding:0; box-shadow:none; }
.wizard__step { border:0; padding:0; margin:0; min-inline-size:0; }
.wizard__step:not(.is-active) { display:none; }
.wizard__confirm-lead { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.wizard__nav { display:flex; gap: var(--space-3); margin-top: var(--space-6); }
.wizard form .btn, .wizard__nav .btn { width:auto; flex:1 1 0; justify-content:center; }
.wizard__nav #wizard-back { flex:0 0 auto; min-width: 96px; }
/* The hidden attribute must win over .btn's inline-flex display. */
.wizard__nav .btn[hidden], .wizard__step[hidden] { display:none !important; }
.wizard__nav--done { margin-top: var(--space-6); }
/* In the wizard, the option list can extend below the modal fold; cap it. */
.wizard .multiselect__options { max-height: 200px; }
.wizard .register-success { border:0; padding:0; box-shadow:none; }
.wizard .register-success h2 { font-size: var(--text-xl); }

/* ===== Legal page ===== */
.legal-hero { padding-block: clamp(var(--space-16), 7vw, var(--space-24)) var(--space-12); border-bottom:1px solid var(--color-divider); }
.legal-hero h1 { font-size: var(--text-2xl); font-weight:800; margin-bottom: var(--space-3); }
.legal-hero p { color: var(--color-text-muted); max-width: 60ch; }
.legal-layout { display:grid; grid-template-columns: 240px 1fr; gap: clamp(var(--space-8), 4vw, var(--space-16)); align-items:start; padding-block: var(--space-16); }
.toc { position:sticky; top: var(--space-20); display:grid; gap: var(--space-1); font-size: var(--text-sm); }
.toc a { text-decoration:none; color: var(--color-text-muted); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border-left: 2px solid transparent; }
.toc a:hover { color: var(--color-primary); background: var(--color-surface-offset); }
.legal-content { max-width: 72ch; }
.legal-block { padding-block: var(--space-8); border-bottom:1px solid var(--color-divider); scroll-margin-top: var(--space-20); }
.legal-block:last-child { border-bottom:0; }
.legal-block h2 { font-size: var(--text-lg); color: var(--color-primary); margin-bottom: var(--space-4); }
.legal-block h3 { font-size: var(--text-base); margin-block: var(--space-5) var(--space-2); }
.legal-block p { margin-bottom: var(--space-4); color: var(--color-text); }
.legal-block ul { margin: 0 0 var(--space-4) var(--space-5); display:grid; gap: var(--space-2); }
.legal-block li { color: var(--color-text); }
.legal-block .meta { background: var(--color-surface-offset); border:1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-4); }
.legal-block .meta p { margin-bottom: var(--space-1); font-size: var(--text-sm); }

/* ===== Footer ===== */
.footer { border-top:1px solid var(--color-divider); background: var(--color-surface); }
.footer__inner { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-8); padding-block: var(--space-16) var(--space-10); }
.footer img { height: 38px; margin-bottom: var(--space-4); }
.footer__redress { display:flex; align-items:center; gap: var(--space-3); margin-top: var(--space-5); }
.footer__redress .prs-logo { height: 44px; width:auto; margin-bottom: 0; }
.footer__redress span { font-size: var(--text-xs); color: var(--color-text-faint); max-width: 22ch; line-height:1.4; }
.footer p { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 38ch; }
.footer h4 { font-size: var(--text-xs); text-transform:uppercase; letter-spacing:.06em; color: var(--color-text-faint); margin-bottom: var(--space-4); }
.footer ul { display:grid; gap: var(--space-2); }
.footer a { text-decoration:none; color: var(--color-text-muted); font-size: var(--text-sm); }
.footer a:hover { color: var(--color-primary); }
.footer__bar { border-top:1px solid var(--color-divider); padding-block: var(--space-6); font-size: var(--text-xs); color: var(--color-text-faint); }
.footer__bar p { max-width:none; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .form-wrap { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .toc { position:static; display:flex; flex-wrap:wrap; gap: var(--space-1); border:1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-3); background: var(--color-surface); }
  .footer__inner { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 560px) {
  .nav a:not(.btn):not(.nav__legal) { display:none; }
  .nav { gap: var(--space-1); }
  .nav__legal { padding-inline: var(--space-2); }
  /* Mobile header: make "Register interest" match the "Legal information" text link. */
  .nav .btn {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-muted);
    font-weight: 600;
    padding: var(--space-2) var(--space-2);
    box-shadow: none;
    border-radius: var(--radius-md);
  }
  .nav .btn:hover {
    background: var(--color-surface-offset);
    color: var(--color-primary);
    transform: none;
    box-shadow: none;
  }
  .field-row { grid-template-columns: 1fr; }
  .band__inner { flex-direction:column; align-items:flex-start; }

  /* Mobile hero CTA: big centred register pill, with "See how it works" below it. */
  .hero__cta { flex-direction: column; align-items: stretch; gap: var(--space-4); width: 100%; }
  /* Re-show the hero register pill on mobile (hidden on desktop via base rule). */
  .hero__cta .js-open-register {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: var(--text-base);
    padding: var(--space-4) var(--space-6);
    line-height: 1.3;
  }
  .hero__cta .btn--ghost { width: 100%; justify-content: center; }

  /* Section order is now a base rule (register under hero on all viewports). */
  /* On mobile, JS moves the "Why tenants choose us" card out of the hero to sit
     below the contact card — give it the same gutters and block spacing. */
  main > .hero__card { margin-inline: var(--space-6); margin-block: var(--space-12); }

  /* Register CTA band stacks on mobile. */
  .register-band { grid-template-columns: 1fr; }
  .register-band__text .btn { width:100%; justify-content:center; }
  .register-band .contact-list { border-left:0; padding-left:0; padding-top: var(--space-6); border-top:1px solid var(--color-divider); }

  /* Wizard fills the screen on mobile. */
  .wizard-overlay { padding: 0; }
  .wizard { max-width:none; margin-block:0; min-height: 100dvh; max-height: 100dvh; border-radius:0; border:0; }
  .wizard__nav { flex-wrap:wrap; }
  .wizard__nav .btn { min-width: 0; }
}