/* Lawful Let styles, following brand/BRAND.md (the "Key Fob" brand).
   Fonts are served from this site, not from Google. */

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #F4F7F7;
  --surface: #FFFFFF;
  --tint: #DFF1F0;
  --text: #0F2E2E;
  --muted: #476161;
  --primary: #0E7C7B;
  --primary-hover: #0A5F5E;
  --accent: #F2684A;
  --accent-hover: #E4573A;
  --on-accent: #111111;
  --border: #DFE7E6;
  --input-border: #6F8786;
  --error: #B3261E;
  --error-bg: #FCECEA;
  --success: #17663A;
  --success-bg: #E1F3E8;
  --soon: #8A5200;
  --soon-bg: #FFF1D6;
  --notice-bg: #FFF1D6;
  --notice-border: #8A5200;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(15, 46, 46, 0.05), 0 4px 16px rgba(15, 46, 46, 0.05);
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Outfit", "DM Sans", system-ui, sans-serif;
  --on-primary: #FFFFFF;
  --header-bg: rgba(244, 247, 247, 0.82);
  --neutral-bg: #EAF1F1;
  --tag-bg: #FDE5DE;
  --success-border: #A9D8BB;
  --overdue-border: #E9A9A4;
  --danger-hover: #8C1D17;
  color-scheme: light;
}

/* Dark theme. Chosen in Settings, or follows the device with "system".
   The teal is lightened so text and buttons keep enough contrast. */
:root[data-theme="dark"] {
  --bg: #0B1D1D;
  --surface: #132A2A;
  --tint: #1D3F3F;
  --text: #E8F3F2;
  --muted: #A9C1BF;
  --primary: #5CCBC8;
  --primary-hover: #86DBD8;
  --on-primary: #062020;
  --accent: #F2684A;
  --accent-hover: #F58168;
  --border: #2C4A49;
  --input-border: #7C9997;
  --error: #FF9A91;
  --error-bg: #3A1A18;
  --success: #7EDCA2;
  --success-bg: #14301F;
  --soon: #F5C06A;
  --soon-bg: #3A2A0C;
  --notice-bg: #3A2A0C;
  --notice-border: #F5C06A;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
  --header-bg: rgba(11, 29, 29, 0.94);
  --neutral-bg: #1D3535;
  --tag-bg: #4A2219;
  --success-border: #2E6B45;
  --overdue-border: #7A3530;
  --danger-hover: #FFB8B1;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg: #0B1D1D;
    --surface: #132A2A;
    --tint: #1D3F3F;
    --text: #E8F3F2;
    --muted: #A9C1BF;
    --primary: #5CCBC8;
    --primary-hover: #86DBD8;
    --on-primary: #062020;
    --accent: #F2684A;
    --accent-hover: #F58168;
    --border: #2C4A49;
    --input-border: #7C9997;
    --error: #FF9A91;
    --error-bg: #3A1A18;
    --success: #7EDCA2;
    --success-bg: #14301F;
    --soon: #F5C06A;
    --soon-bg: #3A2A0C;
    --notice-bg: #3A2A0C;
    --notice-border: #F5C06A;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
    --header-bg: rgba(11, 29, 29, 0.94);
    --neutral-bg: #1D3535;
    --tag-bg: #4A2219;
    --success-border: #2E6B45;
    --overdue-border: #7A3530;
    --danger-hover: #FFB8B1;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { scroll-padding-top: 6rem; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

main.container {
  flex: 1;
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

a { color: var(--primary); text-underline-offset: 0.2em; }
a:hover { color: var(--primary-hover); }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 0.375rem;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  z-index: 50;
  padding: 0.5rem 1rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: 0.5rem; }

/* Header: a plain bar that stays at the top, as in the brand mock */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  color: var(--text);
  font-family: var(--font-head);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--primary); }

.brand-logo {
  width: 1.875rem;
  height: 1.875rem;
  flex: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.nav form { margin: 0; }

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
  transition: color 200ms, background-color 200ms;
}
.nav-link:hover,
.nav-link[aria-current="page"] { background: var(--neutral-bg); color: var(--text); }
.nav-link[aria-current="page"] { font-weight: 600; }

.nav-email {
  max-width: 14rem;
  margin: 0 0.5rem 0 0.75rem;
  color: var(--muted);
  font-size: 0.9375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 46rem) {
  .nav-email { display: none; }
  .header-inner { flex-wrap: wrap; row-gap: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .nav-anchor { display: none; }
  .nav { flex-wrap: wrap; }
}

/* Type */

h1, h2, h3 {
  font-family: var(--font-head);
  letter-spacing: -0.02em;
}

h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.875rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
}

h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

p { margin: 0 0 1rem; }

.lead { color: var(--muted); font-size: 1.1875rem; max-width: 38rem; }

/* Cards */

.card {
  max-width: 34rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-wide { max-width: none; }
.card > :last-child { margin-bottom: 0; }
main > .card + .card { margin-top: 1.5rem; }

/* Sign-in and other single-card pages sit in the middle */
main > .card:only-child { margin: 2rem auto 0; }

/* Forms */

label,
legend {
  display: block;
  margin: 1.5rem 0 0.5rem;
  padding: 0;
  font-weight: 600;
}

input[type="email"],
input[type="text"],
input[type="tel"],
input[type="date"],
select,
textarea {
  display: block;
  width: 100%;
  max-width: 32rem;
  min-height: 2.875rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  transition: border-color 200ms, box-shadow 200ms;
}

select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F8786' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.125rem;
  cursor: pointer;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--primary);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px rgba(14, 124, 123, 0.18);
}

input.short { max-width: 14rem; }

[aria-invalid="true"]:not(fieldset) { border-color: var(--error); border-width: 2px; }

.field-error {
  margin: 0.5rem 0 0;
  color: var(--error);
  font-weight: 600;
}

.hint {
  margin: -0.25rem 0 0.5rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.optional {
  color: var(--muted);
  font-weight: 400;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.radio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  margin: 0.25rem 0;
  font-weight: 400;
  cursor: pointer;
}

.radio input {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.stack > * + * { margin-top: 1.5rem; }
.stack .card h2 + .field > label,
.stack .card h2 + .field > legend { margin-top: 1rem; }

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms, border-color 200ms, color 200ms, opacity 200ms;
}
.button:active { opacity: 0.8; }

.button:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--on-primary);
}

.button .icon { width: 1.25rem; height: 1.25rem; }

form .button { margin-top: 1.5rem; }
.nav form .button { margin-top: 0; }

.button-quiet {
  background: var(--tint);
  border-color: transparent;
  color: var(--primary-hover);
}
.button-quiet:hover {
  background: color-mix(in srgb, var(--primary) 22%, var(--surface));
  border-color: transparent;
  color: var(--primary-hover);
}

.button-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.button-accent:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}

.button-danger {
  background: var(--error);
  border-color: var(--error);
}
.button-danger:hover {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
  box-shadow: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}
.actions .button { margin-top: 0; }

/* Messages */

.notice {
  margin: 0 0 1rem;
  padding: 1rem;
  background: var(--notice-bg);
  border-left: 4px solid var(--notice-border);
  border-radius: 0.5rem;
  overflow-wrap: anywhere;
}
.notice > :last-child { margin-bottom: 0; }

.success {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-sm);
  color: var(--success);
  font-weight: 600;
}

.error-summary {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--error-bg);
  border: 2px solid var(--error);
  border-radius: var(--radius);
}
.error-summary ul { margin: 0; padding-left: 1.25rem; }
.error-summary a { color: var(--error); font-weight: 600; }

/* Properties */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-head h1 { margin: 0; }

.property-list {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.property-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.property-head h2 { margin: 0; overflow-wrap: anywhere; }

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--tint);
  border-radius: var(--radius-sm);
  color: var(--primary);
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem 1.5rem;
  margin: 1.25rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.facts dt { color: var(--muted); font-size: 0.9375rem; }
.facts dd { margin: 0; font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; }

/* Compliance statuses. Each has words and an icon, not only a colour. */

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: none;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.status .icon { width: 1.125rem; height: 1.125rem; }
.status-overdue { background: var(--error-bg); color: var(--error); }
.status-soon { background: var(--soon-bg); color: var(--soon); }
.status-missing { background: var(--tint); color: var(--primary-hover); }
.status-ok { background: var(--success-bg); color: var(--success); }
.status-none,
.status-later,
.status-info { background: var(--neutral-bg); color: var(--muted); }

/* A property opens and closes when its top row is clicked. */
summary.property-head {
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
summary.property-head::-webkit-details-marker { display: none; }
summary.property-head:hover h2 { color: var(--primary); }

.chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  color: var(--muted);
  transition: transform 200ms, background-color 200ms;
}
summary.property-head:hover .chevron { background: var(--tint); color: var(--primary); }
details[open] > summary .chevron { transform: rotate(180deg); }

.property-body { margin-top: 1.25rem; }

.section-label {
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.property-body > .section-label:first-child { margin-top: 0; }
.section-label + .checks,
.section-label + .facts { margin-top: 0.5rem; }

.list-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.property-title { flex: 1; min-width: 0; }
.property-title .hint { margin: 0.125rem 0 0; overflow-wrap: anywhere; }

.checks {
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}
.check {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--border);
}
.check h4 { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; }
.check p { margin: 0.125rem 0 0; color: var(--muted); }

@media (max-width: 40rem) {
  .property-head { flex-wrap: wrap; }
  .check { flex-direction: column-reverse; }
}

.stats.summary { margin: 0 0 1.5rem; }
.summary .stat { background: var(--surface); box-shadow: var(--shadow); }
.summary .stat dd { color: var(--text); }
.stat-overdue { border-color: var(--overdue-border); }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1.5rem;
  text-align: center;
}
.empty .icon-tile { width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; }
.empty .icon-tile .icon { width: 1.75rem; height: 1.75rem; }

.danger-zone { margin-top: 3rem; }

/* Owner overview */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 0;
}
.stat {
  padding: 1.125rem 1.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.stat dt { color: var(--muted); font-size: 0.9375rem; }
.stat dd {
  margin: 0;
  color: var(--primary);
  font-family: var(--font-head);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.25;
}
.stat .hint { margin: 0.25rem 0 0; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { padding: 0.75rem 1rem 0.75rem 0; text-align: left; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; }

.message-list { margin: 0; padding: 0; list-style: none; }
.message { padding: 1rem 0; border-top: 1px solid var(--border); }
.message-open { padding-left: 1rem; border-left: 4px solid var(--notice-border); }
.message-meta { margin-bottom: 0.5rem; color: var(--muted); font-size: 0.9375rem; }
.message-body { white-space: pre-line; overflow-wrap: anywhere; }
.message form .button { margin-top: 0; }

/* Home page */

.band { padding: 5rem 0; }
.band-white { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 3rem 5rem;
}

.pill {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.25rem 0.75rem;
  background: var(--accent);
  border-radius: 999px;
  color: var(--on-accent);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
}

.hero .lead { margin: 0 0 2rem; font-size: 1.375rem; max-width: 42rem; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

.button-large { min-height: 3.25rem; padding: 0.5rem 1.75rem; font-size: 1.125rem; }

.button-outline {
  background: transparent;
  border: 2px solid var(--text);
  color: var(--text);
}
.button-outline:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--on-primary);
  box-shadow: none;
}

.example { max-width: none; }
.example h2 { margin: 0; font-size: 1.375rem; }
.example .hint { margin: 0.25rem 0 0; font-size: 1rem; }
.example-list { margin: 1rem 0 0; padding: 0; list-style: none; }
.example-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--border);
  font-size: 1.125rem;
}
.example-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  white-space: nowrap;
}
.example-status .icon { width: 1.25rem; height: 1.25rem; }
.is-ok { color: var(--success); }
.is-soon { color: var(--soon); }
.is-overdue { color: var(--error); }

.section-head { max-width: 44rem; margin-bottom: 2.5rem; }
.section-head h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; }
.section-head p { color: var(--muted); font-size: 1.1875rem; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.grid-3 .card { max-width: none; }
.grid-3 .card p { color: var(--muted); }
.grid-3 .icon-tile { margin-bottom: 1rem; }

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  background: var(--primary);
  border-radius: var(--radius-sm);
  color: var(--on-primary);
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
}

.tick-list { margin: 0; padding: 0; list-style: none; }
.tick-list li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.5rem 0; }
.tick-list .icon { margin-top: 0.2rem; color: var(--primary); }

.price { margin: 0.5rem 0; color: var(--text) !important; font-family: var(--font-head); font-size: 2.5rem; font-weight: 700; line-height: 1.1; }
.price span { color: var(--muted); font-family: var(--font-body); font-size: 1.0625rem; font-weight: 400; }

.tag {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  background: var(--tag-bg);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
}

@media (max-width: 56rem) {
  .hero { grid-template-columns: 1fr; }
  .band { padding: 3rem 0; }
}

/* Document library */

.search { margin-bottom: 1rem; }
.search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}
.search-row .field { flex: 1 1 10rem; }
.search-row .search-words { flex: 2 1 16rem; }
.search-row .field label { margin-top: 0; }
.search-row input,
.search-row select { max-width: none; }
.search-row .button { margin-top: 0; }
.search-clear { margin: 1rem 0 0; }

input[type="search"] {
  display: block;
  width: 100%;
  min-height: 2.875rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.doc-group { margin-top: 2.5rem; }
.doc-group > h2 { margin-bottom: 1rem; font-size: 1.5rem; }
.doc-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.doc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}
.doc-head h3 { margin: 0; }
.doc-action { color: var(--muted); }
.doc .button { margin-top: 0.25rem; }
.doc-notes { margin-top: 2.5rem; }
.doc-notes ul { padding-left: 1.25rem; }
.doc-notes li { margin-bottom: 0.5rem; }

.status-kind-official { background: var(--success-bg); color: var(--success); }
.status-kind-certificate,
.status-kind-other { background: var(--tint); color: var(--primary-hover); }
.status-kind-template { background: var(--success-bg); color: var(--success); }
.status-kind-soon { background: var(--neutral-bg); color: var(--muted); }
.status-kind-withdrawn { background: var(--error-bg); color: var(--error); }

/* Rent increase notice and form preview */

.stat-date { font-size: 1.5rem !important; }

.steps { margin: 0; padding-left: 1.5rem; }
.steps li { margin-bottom: 0.875rem; padding-left: 0.25rem; }

.preview-actions { margin-bottom: 1rem; }

.pdf-preview {
  display: block;
  width: 100%;
  height: 80vh;
  min-height: 30rem;
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

td input.short { max-width: 9rem; }

/* Templates: a sheet of paper on screen, and the only thing printed.
   The sheet is always dark text on white, whatever the colour theme. */

.template-tools { margin: 1rem 0 1.5rem; }

.sheet {
  max-width: 50rem;
  margin: 0 auto;
  padding: 3rem;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  box-shadow: var(--shadow);
  color: #111111;
  font-size: 1rem;
  line-height: 1.5;
}
.sheet h1 { margin: 0 0 1.5rem; font-size: 1.75rem; color: #111111; }
.sheet h2 { margin: 1.75rem 0 0.75rem; padding-bottom: 0.25rem; border-bottom: 2px solid #111111; font-size: 1.1875rem; color: #111111; }
.sheet h3 { margin: 1.25rem 0 0.5rem; font-size: 1.0625rem; color: #111111; }
.sheet a { color: #111111; }
.sheet ul { padding-left: 1.25rem; }
.sheet li { margin-bottom: 0.25rem; }

.fill { display: flex; align-items: flex-end; gap: 0.75rem; margin: 0 0 0.75rem; }
.fill-label { flex: none; max-width: 55%; font-weight: 600; }
.fill-value { flex: 1; min-height: 1.5rem; border-bottom: 1px solid #555555; }
.write-lines .fill-value { display: block; margin-bottom: 0.75rem; }

.sheet-table { margin: 0.5rem 0 1rem; table-layout: fixed; font-size: 0.9375rem; }
.sheet-table th,
.sheet-table td { padding: 0.375rem 0.5rem; border: 1px solid #555555; color: #111111; }
.sheet-table th { background: #EEEEEE; color: #111111; }
.sheet-table td { height: 2rem; }

.tick-boxes { padding: 0 !important; list-style: none; }
.tick-boxes li { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.5rem; }
.box { display: inline-block; flex: none; width: 1.125rem; height: 1.125rem; border: 1.5px solid #111111; }

.signatures { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.sheet .note { padding: 0.75rem 1rem; border: 1px dashed #555555; }
.sheet-foot { margin-top: 2.5rem; padding-top: 0.75rem; border-top: 1px solid #555555; color: #444444; font-size: 0.875rem; }

@media (max-width: 40rem) {
  .sheet { padding: 1.25rem; }
  .fill { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .fill-label { max-width: none; }
  .sheet-table { table-layout: auto; }
}

@media print {
  .site-header, .site-footer, .skip-link, .no-print { display: none !important; }
  html, body { background: #FFFFFF !important; }
  main.container { max-width: none; padding: 0; }
  .sheet { max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; }
  .sheet h2, .sheet h3 { break-after: avoid; }
  .sheet-table tr, .signatures, .fill { break-inside: avoid; }
  .page-break { break-before: page; }
}

/* Plan page */

.plans-section { margin-top: 2.5rem; }
.plans-section > h2 { margin-bottom: 1rem; font-size: 1.5rem; }
.plan form .button { margin-top: 0.5rem; }
.plan-current { border: 2px solid var(--primary); }

/* Terms and privacy pages */

.legal { max-width: 46rem; }
.legal h2 { margin-top: 2rem; }
.legal li { margin-bottom: 0.5rem; }
.agree-exit { margin-top: 2rem; }
.radio a { font-weight: 600; }

/* Spacing inside cards and forms: headings, buttons and notes get room. */

.card > h2:not(:first-child),
.card form > h2 { margin-top: 2rem; }
.card form > h2:first-child { margin-top: 1rem; }
.card > form:not(:first-child) { margin-top: 1rem; }
form > .actions,
.card > .actions { margin-top: 1.75rem; }
.card > .button,
.card > form > .button:only-child { margin-top: 0.5rem; }
.card > p + .button,
.card > p + form { margin-top: 0.75rem; }
.card > ul + p { margin-top: 1rem; }
.stats + .hint,
.stats + p { margin-top: 1.25rem; }
.table-wrap { margin: 1.25rem 0; }
.message-list + form { margin-top: 1rem; }
.doc-action { margin-bottom: 1.25rem; }
.doc .actions { margin-top: 1rem; gap: 0.75rem; }
.plan p:not(.price) { margin-bottom: 0.75rem; }
.plans-section > .hint { margin-top: 1.25rem; }
.search-clear { margin-bottom: 0; }
main > p[role="status"] { margin: 1.5rem 0; }
main > .card + .card,
main > .card + section,
main > section + .card,
main > section + section,
main > form + .card,
main > .card + form,
main > section + form,
main > form + section,
main > .success + *,
main > .notice + * { margin-top: 1.5rem; }
.card > h2,
.card form > h2 { margin-bottom: 0.75rem; }
.card > h2 + .hint { margin-top: 0; }
.card > .hint + .radio,
.card > p + .radio { margin-top: 0.5rem; }
.field + .hint { margin-top: 0.75rem; }
main > h1 + .card,
main > .lead + .card,
main > h1 + form,
main > .lead + form { margin-top: 1.5rem; }

/* The bar shown while the owner looks at the landlord view. */
.preview-bar { background: var(--accent); color: var(--on-accent); }
.preview-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.preview-inner p { margin: 0; }
.preview-inner form { margin: 0; }
.preview-inner .button { margin-top: 0; min-height: 2.75rem; background: #FFFFFF; border-color: #111111; color: #111111; }
.preview-inner .button:hover { background: #111111; color: #FFFFFF; }

/* Footer */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.25rem;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.9375rem;
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

.site-footer p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.5rem; margin-top: 0.5rem !important; }
.footer-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Settings: a narrower column, tighter cards and options side by side. */

.page-narrow { max-width: 46rem; margin: 0 auto; }
.page-narrow > * + * { margin-top: 1.25rem; }
.page-narrow > h1 { margin-top: 0.5rem; }
.page-narrow .card { padding: 1.25rem 1.5rem; }
.page-narrow .stack > * + * { margin-top: 1.25rem; }

.card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.card-row > div { flex: 1 1 16rem; }
.card-row h2 { margin-bottom: 0.25rem; }
.card-row p { margin: 0; }
.card-row .button { margin-top: 0; }

.radios-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2rem; }
.radios-inline legend { width: 100%; margin: 0.25rem 0 0.25rem; }
.radios-inline .radio { margin: 0; }

.group-heading { margin: 2rem 0 0; font-size: 1.5rem; }
.group-heading + .hint { margin-top: 0.25rem; }

/* Checkout */

.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.checkout .card { margin-top: 0 !important; }
@media (max-width: 52rem) { .checkout { grid-template-columns: 1fr; } }

.order-line,
.order-total {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.order-line { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.order-line p { margin: 0; }
.order-name { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; }
.order-price { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; white-space: nowrap; }
.order-price span { color: var(--muted); font-family: var(--font-body); font-size: 1rem; font-weight: 400; }
.order-total {
  margin: 1rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 2px solid var(--text);
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 700;
}
.order-total p { margin: 0; }

.button-block { width: 100%; }
.checkout form { margin: 1.25rem 0 0.75rem; }
.checkout form .button { margin-top: 0; }

.thanks { max-width: 38rem; margin: 2rem auto 0; }
.thanks .icon-tile { width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; background: var(--success-bg); color: var(--success); }
.thanks .icon-tile .icon { width: 1.75rem; height: 1.75rem; }

#pricing .card .button { margin-top: 0.5rem; }

/* Sign out sits in the header as plain text, not a second button. */
.nav form .button-quiet { background: transparent; color: var(--muted); font-weight: 500; padding: 0 0.875rem; }
.nav form .button-quiet:hover { background: var(--neutral-bg); color: var(--text); }

/* Sign in: one small centred card with the logo on top. */
.card.auth { max-width: 26rem; margin: 3rem auto 0; padding: 2.25rem 2rem 2rem; text-align: center; }
.auth .brand-logo { width: 3.25rem; height: 3.25rem; margin-bottom: 0.75rem; }
.auth h1 { margin-bottom: 0.5rem; font-size: 1.75rem; }
.auth-lead { margin: 0 auto 0.5rem; color: var(--muted); }
.auth form { text-align: left; }
.auth label { margin-top: 1.25rem; }
.auth input[type="email"] { max-width: none; }
.auth form .button { width: 100%; margin-top: 1rem; }
.auth-note { margin: 1.25rem 0 0; color: var(--muted); font-size: 0.9375rem; }
.auth .notice { margin-top: 1.25rem; text-align: left; }
.auth-steps { margin: 1.25rem 0 0; padding: 0; list-style: none; text-align: left; counter-reset: step; }
.auth-steps li { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--border); counter-increment: step; }
.auth-steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--tint);
  color: var(--primary-hover);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Settings rows: the name on the left, the control on the right. */
.setting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin: 0;
  padding: 0.875rem 0;
  font-weight: 400;
}
label.setting { cursor: pointer; }
.setting + .setting,
.setting + .setting-extra { border-top: 1px solid var(--border); }
.card > .setting:first-child { padding-top: 0; }
.card > .setting:last-child { padding-bottom: 0; }
.setting-text { flex: 1 1 14rem; min-width: 0; }
.setting-name { display: block; font-weight: 600; }
.setting-help { display: block; margin-top: 0.125rem; color: var(--muted); font-size: 0.9375rem; }
.setting .button { margin-top: 0; }
.setting-extra { padding-top: 0.875rem; }
.setting-extra label { margin-top: 0; }
.page-narrow .section-label { margin: 2rem 0 -0.5rem 0.25rem; }

/* On and off switch, made from a tick box so it works without scripts. */
input.switch {
  appearance: none;
  position: relative;
  flex: none;
  width: 3.25rem;
  height: 2rem;
  margin: 0;
  border-radius: 999px;
  background: var(--input-border);
  cursor: pointer;
  transition: background-color 200ms;
}
input.switch::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 200ms;
}
input.switch:checked { background: var(--primary); }
input.switch:checked::after { transform: translateX(1.25rem); }
input.switch:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 999px; box-shadow: none; }

/* A row of choices where one is picked, such as the colour theme. */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 0.125rem; padding: 0.1875rem; background: var(--neutral-bg); border-radius: 999px; }
.segmented label { position: relative; margin: 0; font-weight: 500; cursor: pointer; }
.segmented input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmented span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.125rem; border-radius: 999px; color: var(--muted); transition: background-color 200ms, color 200ms; }
.segmented input:checked + span { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
.segmented input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
.page-narrow form > * + * { margin-top: 1.25rem; }
.page-narrow form > .hint { margin-top: 0.75rem; margin-left: 0.25rem; }
.page-narrow h2.section-label { font-size: 0.875rem; }
:root[data-theme="dark"] .segmented input:checked + span { background: #2F5553; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .segmented input:checked + span { background: #2F5553; }
}

.order-discount { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--success); font-weight: 600; }
.order-discount p { margin: 0; }
.order-discount + .order-total { margin-top: 0.5rem; }
.plan .tag { margin-bottom: 0.75rem; }
.empty .button { margin-top: 0.5rem; }

/* Signed-in top bar: deep blue, white words. */
.site-header-app { --header-bg: rgba(11, 79, 108, 0.96); border-bottom-color: transparent; }
.site-header-app .brand,
.site-header-app .brand:hover { color: #FFFFFF; }
.site-header-app .brand-logo circle:first-child { fill: #FFFFFF; }
.site-header-app .brand-logo circle:nth-child(2) { fill: #0B4F6C; }
.site-header-app .nav-link,
.site-header-app .nav-email,
.site-header-app .nav form .button-quiet { color: rgba(255, 255, 255, 0.86); }
.site-header-app .nav-link:hover,
.site-header-app .nav-link[aria-current="page"],
.site-header-app .nav form .button-quiet:hover { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.site-header-app :focus-visible { outline-color: #FFFFFF; }

/* Documents: search box, slider bar for the type, small menus for the rest. */
.filters { display: grid; gap: 0.875rem; margin-bottom: 1rem; }
.filters-top { display: flex; gap: 0.75rem; }
.filters-top .button { margin-top: 0; }
.search-box { position: relative; flex: 1; min-width: 0; }
.search-box .icon { position: absolute; left: 1rem; top: 50%; width: 1.25rem; height: 1.25rem; margin-top: -0.625rem; color: var(--muted); pointer-events: none; }
.search-box input[type="search"] { min-height: 2.75rem; padding-left: 2.875rem; border-color: var(--border); border-radius: 999px; }
.filters-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; }
.filters-menus { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filters select { width: auto; max-width: 100%; min-height: 2.75rem; border-color: var(--border); border-radius: 999px; font-weight: 500; }
.filters .segmented { border-radius: 1.5rem; }
.filters .search-clear { margin: 0; }

/* Settings: a menu on the left, one section on the right. */
.page-settings { max-width: 60rem; margin: 0 auto; }
.settings { display: grid; grid-template-columns: 13rem minmax(0, 1fr); align-items: start; gap: 1.5rem 2.5rem; margin-top: 1.5rem; }
.settings-nav { position: sticky; top: 5rem; display: flex; flex-direction: column; gap: 0.125rem; }
.settings-nav a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 200ms;
}
.settings-nav a:hover { background: var(--neutral-bg); }
.settings-nav a[aria-current] { background: var(--surface); font-weight: 600; box-shadow: var(--shadow); }
.settings-panes > * + *,
.settings-panes form > * + * { margin-top: 1.5rem; }
.pane > * + * { margin-top: 0.875rem; }
.pane-title { margin: 0; font-size: 1.375rem; }
.pane .card { padding: 1.25rem 1.5rem; }
.pane > .hint { margin-left: 0.25rem; }
@media (max-width: 46rem) {
  .settings { grid-template-columns: 1fr; }
  .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* Properties: one simple list. Each row opens to show its details. */
.property-list { gap: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.property-list > .card { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.property-list > .card + .card { border-top: 1px solid var(--border); }
.property-list summary.property-head { padding: 0.875rem 1.25rem; border-radius: 0; transition: background-color 200ms; }
.property-list summary.property-head:hover { background: var(--neutral-bg); }
.property-list summary.property-head:focus-visible { outline-offset: -3px; border-radius: var(--radius-sm); }
.property-list .property-head h2 { font-size: 1.0625rem; }
.property-list .property-head .status { padding: 0; background: transparent; }
.property-list .icon-tile { width: 2.5rem; height: 2.5rem; }
.property-list .chevron { width: 2rem; height: 2rem; transform: rotate(-90deg); }
.property-list summary.property-head:hover .chevron { background: transparent; }
.property-list details[open] > summary .chevron { transform: none; }
.property-list .property-body { margin: 0; padding: 0.5rem 1.25rem 1.5rem; }

/* Password box with a Show button inside its right edge. */
input[type="password"] {
  display: block;
  width: 100%;
  min-height: 2.875rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  transition: border-color 200ms, box-shadow 200ms;
}
.password-box { position: relative; }
.password-box input { padding-right: 4.5rem; }
.password-show {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 4rem;
  height: 100%;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--primary-hover);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.auth .hint { margin: 0 0 0.5rem; }
.auth > .field-error { margin: 0.75rem 0 0; }
.auth-note + .auth-note { margin-top: 0.5rem; }

/* ------------------------------------------------------------------
   Tighter and flatter (5 October 2026). Less padding, small corners,
   and far fewer boxes: a section is a heading and a thin line, not a card.
   ------------------------------------------------------------------ */

body { font-size: 1rem; line-height: 1.5; }
main.container { padding-top: 1.5rem; padding-bottom: 2.5rem; }
.header-inner { min-height: 3.25rem; }
h1 { margin-bottom: 0.75rem; font-size: 1.75rem; }
h2, h3 { font-size: 1.125rem; }
.lead { font-size: 1rem; }
p { margin-bottom: 0.75rem; }

/* Corners: one small size for everything you can press. */
.button,
.nav-link,
.pill,
.tag,
.status,
.segmented,
.segmented span,
.filters .segmented,
.filters select,
.search-box input[type="search"],
.chevron,
.nav form .button-quiet { border-radius: var(--radius-sm); }
.button { padding: 0.375rem 1rem; }
.button-large { min-height: 3rem; padding: 0.5rem 1.5rem; font-size: 1.0625rem; }
.status { padding: 0.125rem 0.5rem; font-size: 0.875rem; }
.segmented { padding: 0.125rem; }
.segmented span { min-height: 2.5rem; padding: 0 0.875rem; }

/* Forms: closer together. */
label, legend { margin: 1rem 0 0.375rem; }
input[type="email"], input[type="text"], input[type="tel"], input[type="date"], input[type="search"], input[type="password"], select, textarea { min-height: 2.75rem; padding: 0.375rem 0.75rem; }
form .button { margin-top: 1rem; }
.hint { font-size: 0.875rem; }
.stack > * + * { margin-top: 0; }

/* A wide card is no longer a box. It is a section with a line above it. */
.card { padding: 1.25rem; box-shadow: none; }
.card-wide {
  padding: 1rem 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}
main > .card-wide + .card-wide,
main > .card-wide + section,
main > section + .card-wide,
main > form + .card-wide,
main > .card-wide + form,
form > .card-wide + .card-wide { margin-top: 0; }
.pane .card { padding: 0; border-top: 0; }
.pane > * + * { margin-top: 0.5rem; }
.pane-title { padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); font-size: 1.125rem; }
.setting { padding: 0.75rem 0; }
.card > .setting:first-child { padding-top: 0.5rem; }
.settings { gap: 1rem 2rem; margin-top: 1rem; }
.settings-nav a { min-height: 2.5rem; }
.settings-nav a[aria-current] { background: var(--neutral-bg); box-shadow: none; }
.settings-panes > * + *,
.settings-panes form > * + * { margin-top: 1.25rem; }

/* The sign-in card and the plan cards stay as boxes: they stand alone. */
.card.auth { margin-top: 1.5rem; padding: 1.75rem 1.75rem 1.5rem; box-shadow: var(--shadow); }
.auth .brand-logo { width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem; }
.auth h1 { font-size: 1.5rem; }
.auth label { margin-top: 1rem; }

/* Dashboard: the four counts are one strip, not four boxes. */
.page-head { margin-bottom: 1rem; }
.stats.summary { gap: 0; margin-bottom: 1rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.summary .stat { padding: 0.75rem 1rem; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.summary .stat + .stat { border-left: 1px solid var(--border); }
.summary .stat dt .status { padding: 0; background: transparent; }
.stat dd { font-size: 1.75rem; }
.stat .hint { margin-top: 0; }
.list-tools { margin-bottom: 0.75rem; }
.list-tools .button { min-height: 2.75rem; background: transparent; padding: 0 0.5rem; }

/* Properties: plain rows with lines between, no outer box. */
.property-list { background: transparent; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.property-list summary.property-head { padding: 0.625rem 0.5rem; }
.property-list .property-body { padding: 0.25rem 0.5rem 1.25rem 3.75rem; }
.property-list .icon-tile { width: 2.25rem; height: 2.25rem; }
.icon-tile { border-radius: var(--radius-sm); }
.checks { margin: 0.5rem 0 1rem; }
.check { padding: 0.5rem 0; }
.check h4 { font-size: 1rem; }
.facts { margin: 0.5rem 0 1rem; padding-top: 0.75rem; gap: 0.75rem 1.5rem; }
.section-label { margin-top: 1rem; font-size: 0.8125rem; }

/* Documents: a plain list. */
.doc-group { margin-top: 1.5rem; }
.doc-group > h2 { margin-bottom: 0; padding-bottom: 0.5rem; font-size: 1.125rem; }
.doc-list { gap: 0; }
.doc-list .doc { padding: 0.875rem 0; }
.doc-head { margin-bottom: 0.25rem; }
.doc-head h3 { font-size: 1rem; }
.doc p { margin-bottom: 0.375rem; }
.doc-action { margin-bottom: 0.5rem; font-size: 0.9375rem; }
.doc .actions { margin-top: 0.5rem; gap: 0.5rem; }
.doc .button { min-height: 2.75rem; }
.doc-notes { margin-top: 1.5rem; }
.filters { gap: 0.625rem; }

.actions { gap: 1rem; }
form > .actions, .card > .actions { margin-top: 1.25rem; }
.notice { padding: 0.75rem 1rem; border-radius: var(--radius-sm); }
.success { padding: 0.625rem 0.875rem; }
.error-summary { padding: 1rem 1.25rem; }
.empty { padding: 2rem 1rem; }
.site-footer { padding: 0.75rem 1.25rem; font-size: 0.875rem; }
.footer-links { margin-top: 0 !important; }
select, .filters select { padding-right: 2.25rem; }
.radio { min-height: 2.5rem; margin: 0; }
.setting, .segmented label, .setting-extra label { margin: 0; }
.auth label { margin: 1rem 0 0.375rem; }

/* Front page: deep blue and warm yellow, with a line drawn house. */
.home {
  --primary: #0B4F6C;
  --primary-hover: #083B51;
  --accent: #E9B23A;
  --accent-hover: #D9A22B;
  --tint: #E4EEF2;
}
.home-hero { position: relative; overflow: hidden; }
.home-hero > .container {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 2rem 3rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.home-hero h1 { margin: 0 0 1rem; font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.06; }
.home-hero .lead { margin: 0 0 1.5rem; max-width: 34rem; font-size: 1.1875rem; }
.home-hero .pill { margin-bottom: 1rem; font-size: 0.8125rem; }
.hero-panel { position: relative; display: flex; align-items: center; min-height: 25rem; padding: 2.5rem 0; }
.hero-panel::before { content: ""; position: absolute; top: -3rem; bottom: -3rem; left: 4rem; right: -50vw; background: #0B4F6C; }
.hero-panel .example { position: relative; width: 100%; max-width: 25rem; border: 0; box-shadow: 0 14px 36px rgba(4, 30, 42, 0.28); }
.example h2 { font-size: 1.25rem; }
.example-list li { padding: 0.625rem 0; font-size: 1rem; }
.hero-facts { position: relative; background: var(--tint); }
.hero-facts dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem 2rem; margin: 0 auto; padding-top: 1rem; padding-bottom: 1rem; }
.hero-facts div { padding-top: 0.5rem; border-top: 2px solid var(--primary); }
.hero-facts dt { font-weight: 700; }
.hero-facts dd { margin: 0; color: var(--muted); }
.home .band { padding: 3.5rem 0; }
.home .section-head { margin-bottom: 1.5rem; }
.home .section-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.home .section-head p { font-size: 1.0625rem; }
.home .grid-3 .card { border: 1px solid var(--border); }
.home .step-number { width: 2.25rem; height: 2.25rem; margin-bottom: 0.75rem; font-size: 1.0625rem; }
.home .price { font-size: 2rem; }
@media (max-width: 56rem) {
  .home-hero > .container { grid-template-columns: 1fr; padding-top: 2rem; padding-bottom: 0; }
  .hero-panel { min-height: 0; padding: 2rem 0; }
  .hero-panel::before { top: 0; bottom: 0; left: -50vw; }
  .hero-panel .example { max-width: none; }
  .hero-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hero-facts dl { margin-top: 0; margin-bottom: 0; }

/* ============================================================
   Signed-in layout: the menu runs down the left side and the page
   fills the rest of the screen (chosen by Gwen, 5 October 2026).
   ============================================================ */

body.app { display: block; }

.app-shell {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 1.25rem 0.75rem;
  background: #0B4F6C;
  color: #FFFFFF;
}

.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0 0.5rem 1.25rem; }
.sidebar .brand, .sidebar .brand:hover { color: #FFFFFF; font-size: 1.375rem; }
.sidebar .brand-logo circle:first-child { fill: #FFFFFF; }
.sidebar .brand-logo circle:nth-child(2) { fill: #0B4F6C; }

.sidebar-body { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.side-nav { display: flex; flex-direction: column; gap: 0.25rem; }

.side-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 200ms, color 200ms;
}
.side-link .icon { width: 1.25rem; height: 1.25rem; }
.side-link:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.side-link[aria-current="page"] { background: #FFFFFF; color: #0B4F6C; }
.sidebar :focus-visible { outline-color: #FFFFFF; }

.sidebar-foot { margin-top: auto; padding: 1rem 0.75rem 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.side-email { margin: 0 0 0.5rem; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem; overflow-wrap: anywhere; }
.side-signout {
  min-height: 2.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  color: #FFFFFF;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms;
}
.side-signout:hover { background: rgba(255, 255, 255, 0.14); }

.menu-button { display: none; }

.app-main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.app-content { flex: 1; width: 100%; max-width: 100rem; padding: 2rem 2.5rem 4rem; }

/* Pages use the full width now, instead of a narrow column in the middle. */
.app .page-settings,
.app .page-narrow,
.app .legal { max-width: 80rem; margin-left: 0; margin-right: 0; }
.app .card:not(.card-wide):not(.auth):not(.thanks) { max-width: 44rem; }
.app-content > .card:only-child { margin: 0; }

/* Lists flow into columns when there is room. */
.app .property-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); align-items: start; }
/* Documents stay one to a line, so the list is easy to read down. */
.app .doc-list { grid-template-columns: 1fr; }
.app .doc { display: flex; flex-direction: column; }
.app .doc .actions { margin-top: auto; padding-top: 1rem; }
.app .preview-bar .container { max-width: none; padding: 0.5rem 2.5rem; }

/* Phones and small tablets: the menu folds away behind a Menu button. */
@media (max-width: 56rem) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: sticky; height: auto; padding: 0.5rem 1rem; }
  .sidebar-top { padding: 0; min-height: 3.5rem; }
  .menu-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 0.875rem;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
  }
  .menu-toggle:focus-visible ~ .sidebar-top .menu-button { outline: 3px solid #FFFFFF; outline-offset: 2px; }
  .sidebar-body { display: none; padding: 0.5rem 0 1rem; }
  .menu-toggle:checked ~ .sidebar-body { display: flex; }
  .app-content { padding: 1.5rem 1.25rem 3rem; }
  .app .preview-bar .container { padding: 0.5rem 1.25rem; }
}

/* Front page: the facts strip meets the next section with no gap. */
.home main > section + section { margin-top: 0; }

/* Front page: as parts scroll into view, headings slide in from the left and
   cards from the right (reveal.js). */
.reveal { opacity: 0; transform: translateX(44px); transition: opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.from-left { transform: translateX(-44px); }
/* Stops a part that is waiting off to the side from making the page scroll sideways. */
.home .band { overflow-x: clip; }

/* Front page: the facts strip sits close above the How it works heading. */
.home #how-it-works { padding-top: 1.5rem; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}
@media print {
  .reveal { opacity: 1; transform: none; }
}

/* Front page: a line drawn house beside "What we cover". It draws itself,
   one line after another, when scrolled into view (reveal.js). */
.section-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; }
.section-top .section-head { flex: 1; min-width: 0; }
.draw-house { flex: none; width: 9.5rem; margin-bottom: 1.5rem; color: var(--primary); }
.draw-house .ln { stroke-dasharray: 1; stroke-dashoffset: 0; }
.draw-house.draw-wait .ln { stroke-dashoffset: 1; }
.draw-house.draw-wait.is-visible .ln { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms ease-in-out; transition-delay: calc(var(--i) * 260ms); }
@media (max-width: 40rem) {
  .draw-house { width: 5.5rem; }
}
@media print {
  .draw-house.draw-wait .ln { stroke-dashoffset: 0; }
}

/* The "are you human" check on the sign up and forgot password forms. */
.human-check { min-height: 65px; margin: 1rem 0 0.5rem; }