/* ==========================================================================
   Free Land Division — design system
   Apple HIG design language: Clarity, Deference, Depth.
   - Clarity  : legible type at every size, one accent, meaning carried by
                hierarchy and spacing rather than decoration.
   - Deference: content leads; chrome is translucent and recedes.
   - Depth    : layered materials and soft elevation convey structure.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Type stack — resolves to SF Pro on Apple platforms, sensible elsewhere. */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Surfaces — Apple's marketing greys, warmed very slightly. */
  --bg: #fbfbfd;
  --bg-elevated: #ffffff;
  --bg-sunken: #f5f5f7;

  /* Text */
  --text: #1d1d1f;
  --text-secondary: #55555a;
  --text-tertiary: #6e6e73;
  --text-on-accent: #ffffff;

  /* Accent — deep land green. Verified 6.6:1 on --bg. */
  --accent: #0a6b4d;
  --accent-hover: #085a41;
  --accent-subtle: #eaf4f0;
  --accent-border: #cfe4db;

  /* ---- Always-dark surfaces --------------------------------------------
     Feature sections and the calculator result stay dark in BOTH themes,
     the way Apple's dark marketing panels do. Letting them flip with the OS
     theme meant the accent green was being drawn on whichever background it
     had not been contrast-checked against. These values are deliberately
     outside the theme blocks below — do not move them.
       #3ddc97 on #1d1d1f = 9.5:1
       #04140e on #3ddc97 = 10.9:1
       var(--text-on-inverse-muted) on #1d1d1f = 9.9:1                                          */
  --bg-inverse: #1d1d1f;
  --text-on-inverse: #f5f5f7;
  --text-on-inverse-muted: var(--text-on-inverse-muted);
  --accent-on-dark: #3ddc97;
  --accent-on-dark-hover: #58e6a9;
  --text-on-accent-dark: #04140e;

  /* Support */
  --separator: rgba(0, 0, 0, 0.10);
  --separator-strong: rgba(0, 0, 0, 0.18);
  --danger: #b3261e;
  --danger-subtle: #fdeceb;
  --focus-ring: #0a6b4d;

  /* Tick used by .facts--check, drawn as a mask so it takes --accent. */
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 10.5l4.2 4.2L16.5 5.5'/%3E%3C/svg%3E");

  /* Materials — the translucent surfaces Apple calls "vibrancy". */
  --material-nav: rgba(251, 251, 253, 0.72);
  --material-overlay: rgba(251, 251, 253, 0.92);

  /* Elevation. Apple shadows are wide, soft and low-opacity. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.05), 0 12px 32px rgba(0, 0, 0, 0.07);
  --shadow-3: 0 8px 20px rgba(0, 0, 0, 0.07), 0 24px 60px rgba(0, 0, 0, 0.10);

  /* Radii — generous, approximating continuous corners. */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 980px;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --section-y: clamp(2.75rem, 6vw, 5rem);
  --measure: 34rem;
  --max-w: 1120px;
  --max-w-narrow: 760px;

  /* Motion */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.4s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-elevated: #1c1c1e;
    --bg-sunken: #161617;

    --text: #f5f5f7;
    --text-secondary: #b8b8bd;
    --text-tertiary: #98989d;
    --text-on-accent: #04140e;

    /* Lifted for contrast on black — 7.9:1. */
    --accent: #3ddc97;
    --accent-hover: #58e6a9;
    --accent-subtle: #0e2A21;
    --accent-border: #1d4738;

    --separator: rgba(255, 255, 255, 0.14);
    --separator-strong: rgba(255, 255, 255, 0.24);
    --danger: #ff6961;
    --danger-subtle: #2c1512;
    --focus-ring: #3ddc97;

    --material-nav: rgba(0, 0, 0, 0.72);
    --material-overlay: rgba(22, 22, 23, 0.94);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.55);
    --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.6);
  }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem; /* clears the sticky nav on anchor jumps */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1.0625rem;      /* 17px — Apple's body size */
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

/* Apple tightens tracking as type scales up. */
h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
}
h3 {
  font-size: clamp(1.3125rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
h4 {
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.014em;
}

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

ul, ol { margin: 0 0 1.25em; padding-left: 1.25em; }
li { margin-bottom: 0.5em; }
li:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

/* Focus: always visible, never removed. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent); color: var(--text-on-accent); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--max-w-narrow); }

.section { padding-block: var(--section-y); }
.section--sunken { background: var(--bg-sunken); }

/* Always-dark surfaces. Re-point the accent tokens inside them so every
   nested component (buttons, links, eyebrows, figures) picks up the variant
   that was contrast-checked against a dark ground. */
.section--inverse,
.calc__result {
  --accent: var(--accent-on-dark);
  --accent-hover: var(--accent-on-dark-hover);
  --text-on-accent: var(--text-on-accent-dark);
  --accent-subtle: rgba(61, 220, 151, 0.14);
  --accent-border: rgba(61, 220, 151, 0.34);
  --focus-ring: var(--accent-on-dark);
  --text-secondary: var(--text-on-inverse-muted);
  --separator: rgba(255, 255, 255, 0.14);
  --separator-strong: rgba(255, 255, 255, 0.24);
}

.section--inverse {
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
}
.section--inverse h2,
.section--inverse h3,
.section--inverse h4 { color: var(--text-on-inverse); }
.section--inverse strong { color: var(--text-on-inverse); }

.section__eyebrow {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
  margin: 0 0 0.75rem;
}
.section--inverse .section__eyebrow { color: var(--accent); }

.lede {
  font-size: clamp(1.1875rem, 2vw, 1.375rem);
  line-height: 1.45;
  letter-spacing: -0.016em;
  color: var(--text-secondary);
  max-width: var(--measure);
}
.section--inverse .lede { color: var(--text-on-inverse-muted); }

.center { text-align: center; }
.center .lede { margin-inline: auto; }

.stack > * + * { margin-top: 1.5rem; }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.85rem 1.5rem;
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 600;
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none;
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--text-on-accent); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Buttons — Apple's pill capsules
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--text-on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;              /* exceeds the 44px HIG minimum */
  padding: 0.8rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.22s var(--ease), transform 0.22s var(--ease-out),
    box-shadow 0.22s var(--ease);
}
.btn:hover { background: var(--accent-hover); color: var(--btn-fg); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--accent);
  border-color: var(--accent-border);
}
.btn--secondary:hover { background: var(--accent-subtle); color: var(--accent-hover); }

.btn--lg { min-height: 54px; padding: 1rem 2.1rem; font-size: 1.125rem; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}
.center .btn-row { justify-content: center; }

/* A quiet inline link with a chevron, used to end sections. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
  text-decoration: none;
  min-height: 44px;
}
.link-arrow::after {
  content: "›";
  font-size: 1.25em;
  line-height: 1;
  transition: transform 0.22s var(--ease-out);
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Navigation — translucent material that defers to content
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--material-nav);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  .nav {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}
.nav.is-scrolled { border-bottom-color: var(--separator); }

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

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;   /* stop the wordmark breaking onto two lines */
  color: var(--text);
  text-decoration: none;
  min-height: 44px;
}
.nav__brand:hover { color: var(--text); }
.nav__mark { width: 34px; height: 22px; flex: none; }

/* The link group takes the space between brand and CTA and centres in it. */
.nav__inner > nav {
  flex: 1;
  display: flex;
  justify-content: center;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The global li margin-bottom would offset the flex centring by half itself. */
.nav__links li { margin: 0; }
.nav__inner > nav { align-items: center; }
.nav__links a {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1;
  white-space: nowrap;   /* "How it works" stays on one line */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav__links a:hover { color: var(--text); }

.nav__cta { flex: none; }
/* Smaller than a page CTA — it sits in chrome, so it should recede. */
.nav__cta .btn {
  min-height: 40px;
  padding: 0.45rem 1.15rem;
  font-size: 0.9375rem;
}

/* The nav CTA carries two labels; only one is ever shown, so the button can
   shrink on narrow screens without the wordmark having to disappear. */
.nav__cta-short { display: none; }

/* Between roughly 940px and 1000px the brand, links and CTA no longer fit at
   full size and the button used to spill past the right gutter. Tighten the
   link group first, then drop it. */
@media (max-width: 1000px) {
  .nav__links { gap: 1rem; }
  .nav__links a { font-size: 0.875rem; }
}
@media (max-width: 940px) {
  .nav__links { display: none; }
}
@media (max-width: 480px) {
  .nav__cta .btn { padding-inline: 1.15rem; font-size: 1rem; }
  .nav__cta-full { display: none; }
  .nav__cta-short { display: inline; }
}
@media (max-width: 340px) {
  .nav__brand span { display: none; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2rem, 4.5vw, 3rem);
  text-align: center;
  overflow: hidden;
}
/* A soft radial wash — depth without ornament. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto;
  height: 80%;
  background: radial-gradient(60% 60% at 50% 40%, var(--accent-subtle), transparent 70%);
  opacity: 0.9;
  pointer-events: none;
  z-index: -1;
}

.hero h1 { margin-bottom: 0.35em; }
.hero .lede { margin-inline: auto; max-width: 40rem; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1.25rem 0 0;
  padding: 0.5rem 1.1rem;
  background: var(--accent-subtle);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
}
.hero__badge::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}

/* text-align doesn't centre flex items, so the button row needs this
   explicitly — the heading and lede centre via text-align, the buttons don't. */
.hero .btn-row { margin-top: 1.5rem; justify-content: center; }

/* --------------------------------------------------------------------------
   7. Cards & grids
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-1);
}
.card h3 { margin-bottom: 0.4em; }
.card p { color: var(--text-secondary); margin-bottom: 0; }
/* Cards with several paragraphs need space between them, not just at the end. */
.card p + p { margin-top: 0.9rem; }
.card--flush { padding: 0; overflow: hidden; }

.section--inverse .card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.section--inverse .card p { color: var(--text-on-inverse-muted); }

/* Numbered process steps */
.steps { counter-reset: step; display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(5, 1fr); } }

.step {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-1);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  margin-bottom: 0.9rem;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-pill);
}
.step h3 { font-size: 1.0625rem; margin-bottom: 0.35em; }
.step p { font-size: 0.9375rem; color: var(--text-secondary); margin: 0; }

/* Plain fact list with hairline separators */
.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  display: flex;
  gap: 0.75rem;
  padding-block: 0.9rem;
  border-top: 1px solid var(--separator);
  margin: 0;
}
.facts li:last-child { border-bottom: 1px solid var(--separator); }
.facts__icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; color: var(--accent); }

/* Ticked checklist: no separator rules, a green tick against each item.
   The tick is a mask rather than a coloured SVG so it follows --accent
   into dark mode. */
.facts--check li {
  border: none;
  padding-block: 0.4rem;
  align-items: flex-start;
}
.facts--check li:last-child { border-bottom: none; }
.facts--check li::before {
  content: "";
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.18rem;
  background-color: var(--accent);
  -webkit-mask: var(--tick) center / contain no-repeat;
  mask: var(--tick) center / contain no-repeat;
}

/* Totals appended to a facts list: label left, figure right. */
.facts--totals {
  margin-top: 1rem;
  border-top: 1px solid var(--separator-strong);
}
.facts--totals li {
  border: none;
  justify-content: space-between;
  align-items: baseline;
  padding-block: 1rem 0;
}
.facts--totals li:last-child { border-bottom: none; }
.facts--totals li span:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.facts--totals li.is-total {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.018em;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   8. Tables — financial breakdowns
   -------------------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
}

table.fin {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 30rem;
}
table.fin caption {
  text-align: left;
  padding: 1.25rem 1.25rem 0;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.014em;
}
table.fin th,
table.fin td {
  padding: 0.85rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--separator);
  vertical-align: top;
}
table.fin thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
table.fin td:last-child,
table.fin th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.fin tbody tr:last-child td { border-bottom: none; }
table.fin tr.is-total td {
  font-weight: 600;
  background: var(--bg-sunken);
  border-top: 1px solid var(--separator-strong);
}
table.fin tr.is-headline td {
  font-weight: 600;
  font-size: 1.0625rem;
  background: var(--accent-subtle);
  color: var(--text);
}
table.fin .neg { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   9. Disclaimers — visible, never buried
   -------------------------------------------------------------------------- */

/* A compact heading for lines that should hold together on one line. */
.h2--compact {
  font-size: clamp(1.375rem, 3.2vw, 2rem);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Full disclosure hint — quiet on the page, full statement on its own page. */
.disclosure-hint {
  margin-top: 1.5rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--separator-strong);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-tertiary);
}
.disclosure-hint strong { color: var(--text-secondary); font-weight: 600; }

.note {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  background: var(--bg-sunken);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.note strong { color: var(--text); }
.note__icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; }
.section--inverse .note {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-on-inverse-muted);
}
.section--inverse .note strong { color: var(--text-on-inverse); }

/* --------------------------------------------------------------------------
   10. Comparison
   -------------------------------------------------------------------------- */

.compare { display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .compare { grid-template-columns: 1fr 1fr; } }

.compare__col {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-1);
}
.compare__col--featured {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: var(--shadow-2);
}
.compare__badge {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.3rem 0.75rem;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  border-radius: var(--r-pill);
}
.compare__figure {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin: 0.75rem 0 0.15rem;
}
.compare__figure--accent { color: var(--accent); }
.compare__caption { font-size: 0.875rem; color: var(--text-tertiary); margin: 0 0 1.25rem; }

/* --------------------------------------------------------------------------
   10a. Payment waterfall
   Two phases (we fund it / we are repaid last) with an ordered priority
   ladder. Bar widths are proportional to the worked example, so the visual
   and the figures cannot drift apart.
   -------------------------------------------------------------------------- */

.phase { display: grid; gap: 0.6rem; }
@media (min-width: 780px) {
  .phase { grid-template-columns: 8.5rem 1fr; gap: 2rem; align-items: start; }
}

.phase__tag {
  margin: 0;
  padding-top: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.phase__body > h3 { margin-bottom: 0.4rem; }
.phase__body > p { margin-bottom: 0; max-width: var(--measure); }

/* Connector between the phases, aligned with the content column. */
.phase-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* ~13mm of whitespace separating the two phases (24px above + 24px below) */
  margin: 1.5rem 0;
}
@media (min-width: 780px) { .phase-link { margin-left: 10.5rem; } }
.phase-link span {
  flex: none;
  width: 1.75rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.55;
}
.phase-link p {
  margin: 0;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--text-secondary);
}

.ladder {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.ladder li { display: flex; gap: 1rem; margin: 0; align-items: flex-start; }

.ladder__rank {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--separator-strong);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ladder li.is-shared .ladder__rank {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

.ladder__main { flex: 1; min-width: 0; }

.ladder__head {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-on-inverse);
}

.ladder__note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   10b. Diagrams
   Inline SVG so it inherits the theme. Everything is drawn with currentColor
   or an accent token — no hardcoded colours, so light/dark both work.
   -------------------------------------------------------------------------- */

.plan {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  border: 1px solid var(--separator);
}

.plan__parcel   { fill: none; stroke: currentColor; stroke-opacity: 0.32; stroke-width: 1.5; }
.plan__lot-keep { fill: var(--accent-subtle); }
.plan__lot-sell { fill: currentColor; fill-opacity: 0.05; }
.plan__divider  { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; }
.plan__house    { fill: var(--accent); fill-opacity: 0.9; }
.plan__house-gone {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.3;
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
}
.plan__street   { fill: currentColor; fill-opacity: 0.07; }
.plan__kerb     { stroke: currentColor; stroke-opacity: 0.22; stroke-width: 1; }
.plan__drive    { fill: var(--accent); fill-opacity: 0.28; }
.plan__label {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  fill: currentColor;
  fill-opacity: 0.75;
}
.plan__label--key { fill: var(--accent); fill-opacity: 1; font-weight: 600; }
.plan__street-label {
  font-family: var(--font-text);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  fill: currentColor;
  fill-opacity: 0.45;
}

/* Value waterfall.
   preserveAspectRatio="none" lets the bar stretch to the card width while
   staying a fixed 34px tall, so the segments read as one continuous bar. */
.waterfall {
  display: block;
  width: 100%;
  height: 34px;
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.waterfall__axis {
  display: flex;
  justify-content: space-between;
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}
.waterfall__seg-land    { fill: currentColor; fill-opacity: 0.22; }
.waterfall__seg-cost    { fill: currentColor; fill-opacity: 0.42; }
.waterfall__seg-selling { fill: currentColor; fill-opacity: 0.6; }
.waterfall__seg-created { fill: var(--accent); }
.waterfall__tick { stroke: currentColor; stroke-opacity: 0.25; stroke-width: 1; }

.wf-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}
.wf-key li { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.wf-key__swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  flex: none;
  background: currentColor;
}
.wf-key__swatch--land    { opacity: 0.22; }
.wf-key__swatch--cost    { opacity: 0.42; }
.wf-key__swatch--selling { opacity: 0.6; }
.wf-key__swatch--created { background: var(--accent); opacity: 1; }

/* --------------------------------------------------------------------------
   11. Calculator
   -------------------------------------------------------------------------- */

.calc {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 900px) { .calc { grid-template-columns: 1fr 1fr; gap: 2rem; } }

/* Left column of the calculator: the input panel plus the community-title
   note that fills the space beside the taller result panel. */
.calc__col { display: flex; flex-direction: column; gap: 1rem; }

.calc__aside {
  padding: 1.25rem;
  background: var(--accent-subtle);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-lg);
}
.calc__aside p {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.calc__aside strong { color: var(--text); }
.calc__aside-note {
  margin: 0.75rem 0 0 !important;
  font-size: 0.8125rem;
  text-align: center;
}

.calc__panel {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  box-shadow: var(--shadow-1);
}
.calc__result {
  position: sticky;
  top: 5rem;
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  border: none;
  box-shadow: var(--shadow-2);
}
@media (max-width: 899px) { .calc__result { position: static; } }

.calc__figure {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  margin: 0.35rem 0 0.25rem;
  color: var(--accent);
}
.calc__figure--negative { color: #ff8a80; }

.calc__breakdown { list-style: none; margin: 1.5rem 0 0; padding: 0; font-size: 0.9375rem; }
.calc__breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin: 0;
  color: var(--text-on-inverse-muted);
}
.calc__breakdown li span:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-on-inverse);
}
.calc__breakdown li.is-total {
  border-top-color: rgba(255, 255, 255, 0.3);
  font-weight: 600;
  color: var(--text-on-inverse);
}

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */

.field { margin-bottom: 1.25rem; }

.field__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.008em;
}
.field__hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}
.field__req { color: var(--danger); margin-left: 0.15rem; }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  background: var(--bg-elevated);
  color: var(--text);
  font-family: inherit;
  font-size: 1.0625rem;   /* ≥16px prevents iOS zoom-on-focus */
  line-height: 1.4;
  border: 1px solid var(--separator-strong);
  border-radius: var(--r-md);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
  appearance: none;
}
.textarea { min-height: 7rem; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-tertiary); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-subtle);
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.input[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--danger-subtle); }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.field__error {
  display: none;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--danger);
}
.field__error.is-visible { display: flex; }

/* Checkbox — 44px target, error identified by text not colour alone */
.check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--bg-sunken);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  cursor: pointer;
}
.check:hover { border-color: var(--text-tertiary); }
.check input[type="checkbox"] {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.1rem 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.check__text { font-size: 0.9375rem; line-height: 1.5; color: var(--text-secondary); }
.check__text strong { color: var(--text); }
.check[data-invalid="true"] { border-color: var(--danger); background: var(--danger-subtle); }

.form-status {
  margin-bottom: 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.form-status:empty { display: none; }
.form-status--error {
  background: var(--danger-subtle);
  border: 1px solid var(--danger);
  color: var(--danger);
}
.form-status--success {
  background: var(--accent-subtle);
  border: 1px solid var(--accent);
  color: var(--text);
}
.form-status a { color: inherit; }

/* Honeypot — hidden from people, reachable by bots, ignored by AT */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

/* --------------------------------------------------------------------------
   13. FAQ — native disclosure widgets
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--separator); }

.faq__item { border-bottom: 1px solid var(--separator); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.014em;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 0.7rem; height: 0.7rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__answer {
  padding-bottom: 1.5rem;
  max-width: var(--measure);
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--bg-sunken);
  border-top: 1px solid var(--separator);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: 0.875rem;
  color: var(--text-tertiary);
}
.footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--separator);
}
.footer h2 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  margin-bottom: 0.9rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.15rem; }
.footer a {
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer a:hover { color: var(--accent); text-decoration: underline; }
.footer__legal { padding-top: 2rem; }
.footer__legal p { margin-bottom: 1rem; max-width: 60rem; line-height: 1.6; }
.footer__powered { font-weight: 500; color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   15. Cookie consent
   -------------------------------------------------------------------------- */

.cookie {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 150;
  max-width: 34rem;
  margin-inline: auto;
  padding: 1.5rem;
  background: var(--material-overlay);
  border: 1px solid var(--separator);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
}
@supports (backdrop-filter: blur(24px)) or (-webkit-backdrop-filter: blur(24px)) {
  .cookie {
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
  }
}
.cookie[hidden] { display: none; }
.cookie h2 { font-size: 1.0625rem; margin-bottom: 0.4em; letter-spacing: -0.014em; }
.cookie p { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 1.25rem; }
/* Equal visual weight: rejecting must be as easy as accepting. */
.cookie__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.cookie__actions .btn { flex: 1 1 10rem; }

/* --------------------------------------------------------------------------
   16. Legal document pages
   -------------------------------------------------------------------------- */

.doc { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.doc__meta { font-size: 0.875rem; color: var(--text-tertiary); margin-bottom: 2.5rem; }
.doc h2 {
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--separator);
  letter-spacing: -0.02em;
}
.doc h2:first-of-type { margin-top: 2rem; }
.doc h3 { font-size: 1.125rem; margin-top: 1.75rem; }
.doc p, .doc li { color: var(--text-secondary); }
.doc strong { color: var(--text); }
.doc__toc {
  background: var(--bg-sunken);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.doc__toc h2 {
  margin: 0 0 0.75rem;
  padding: 0;
  border: none;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
}
.doc__toc ol { margin: 0; padding-left: 1.25rem; font-size: 0.9375rem; }
.doc__toc li { margin-bottom: 0.35rem; }

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}
.doc table th,
.doc table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border: 1px solid var(--separator);
  vertical-align: top;
  color: var(--text-secondary);
}
.doc table th { background: var(--bg-sunken); color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   17. Motion — subtle, purposeful, and fully optional
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Honour the OS "Increase Contrast" setting. */
@media (prefers-contrast: more) {
  :root {
    --text-secondary: #3a3a3c;
    --text-tertiary: #48484a;
    --separator: rgba(0, 0, 0, 0.28);
    --separator-strong: rgba(0, 0, 0, 0.45);
  }
  .card, .step, .calc__panel, .input, .textarea, .select { border-width: 2px; }
}

/* --------------------------------------------------------------------------
   18. Print
   -------------------------------------------------------------------------- */

@media print {
  .nav, .cookie, .btn, .hero::before { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1.5rem; }
  .reveal { opacity: 1; transform: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}