/* ==========================================================================
   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 {
  /* Light only. Stops the browser drawing dark form controls and scrollbars. */
  color-scheme: light;

  /* 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: #c7c7cc;
  --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;
}

/* The site is light only, on purpose.
   A phone in dark mode used to repaint the whole page black, which broke the
   brand and was never contrast-checked. color-scheme: light above also keeps
   form fields, the scrollbar and the address bar light. Dark marketing panels
   are still dark: they use --bg-inverse, which is not part of any theme. */

/* --------------------------------------------------------------------------
   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 right-hand group: the one in-bar link, the menu, then the CTA.
   The old centred row of five links was moved into the menu on 13 Oct 2026,
   so .nav__links and its breakpoints are gone with it. */
.nav__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

/* The single link that stays visible in the bar. */
.nav__owners {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--text-secondary);
  text-decoration: none;
}
.nav__owners:hover { color: var(--text); }
/* On the page it points at, it is a label, not a link. */
.nav__owners--here { color: var(--text); font-weight: 600; cursor: default; }

/* ---- The menu — small screens only --------------------------------------
   Above 1100px the section rail does this job, so the menu is not drawn.
   Below 1100px the rail is not drawn and the menu is. Never both.
   The same breakpoint governs both, in this file, so they cannot drift apart. */
.nav__menu { display: none; position: relative; flex: none; }

.nav__menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding-inline: 0.7rem;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
}
.nav__menu-btn:hover,
.nav__menu-btn[aria-expanded="true"] { color: var(--text); }

/* Three lines drawn with one box and its two pseudo elements, so there is no
   extra markup and no icon font to load. */
.nav__burger {
  position: relative;
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}
.nav__burger::before,
.nav__burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.nav__burger::before { top: -5.5px; }
.nav__burger::after  { top:  5.5px; }

/* Open: the outer lines cross and the middle one goes. */
.nav__menu-btn[aria-expanded="true"] .nav__burger { background: transparent; }
.nav__menu-btn[aria-expanded="true"] .nav__burger::before { transform: translateY(5.5px) rotate(45deg); }
.nav__menu-btn[aria-expanded="true"] .nav__burger::after  { transform: translateY(-5.5px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav__burger::before, .nav__burger::after { transition: none; }
}

.nav__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 110;
  min-width: 14rem;
  padding: 0.5rem;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.nav__panel[hidden] { display: none; }
.nav__panel ul { list-style: none; margin: 0; padding: 0; }
.nav__panel li { margin: 0; }
.nav__panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.nav__panel a:hover { background: var(--bg-secondary, rgba(0, 0, 0, 0.04)); }

/* A row that points somewhere else, ruled off so it does not read as another
   section of this page. */
.nav__panel-sep {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--separator);
}

/* The call to action. The bar's button is hidden at this size, so this is the
   only one, and it should look like one. */
.nav__panel-cta { margin-top: 0.5rem; }
.nav__panel-cta a {
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.nav__panel-cta a:hover { background: var(--accent-strong, var(--accent)); color: #fff; }

/* On the page itself the row is a label, not a link — same box, no hover. */
.nav__panel-here {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.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; }

/* Narrow screens. The in-bar link goes first — the rail down the right edge
   still reaches every section. */
@media (max-width: 680px) {
  .nav__owners { display: none; }
}
@media (max-width: 420px) {
  .nav__menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav__menu-btn { padding-inline: 0.55rem; }
}
@media (max-width: 340px) {
  .nav__brand span { display: none; }
}

/* --------------------------------------------------------------------------
   5b. Section rail — dashes down the right edge
   One dash per section of the page. The dash for the section you are reading
   grows, darkens and shows its name in a box.

   Hidden below 1100px. It is a convenience, never the only way to reach
   anything, so it can simply go when there is no room beside the content.
   -------------------------------------------------------------------------- */

.rail {
  position: fixed;
  top: 50%;
  right: clamp(1rem, 2.5vw, 2.25rem);
  transform: translateY(-50%);
  z-index: 90;
}
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail li { margin: 0; }

.rail a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  /* 44px of height each, so the dash is easy to hit even though it is thin. */
  min-height: 44px;
  text-decoration: none;
}

/* The dash itself. Short and pale until it is the current one. */
.rail__dash {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-tertiary);
  opacity: 0.55;
  flex: none;
  transition: width 0.25s var(--ease), opacity 0.25s var(--ease),
              background-color 0.25s var(--ease);
}

/* The name. Present in the markup at every size so nothing is rebuilt as you
   scroll; it is simply not drawn until it is wanted. */
.rail__label {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--separator-strong, rgba(0, 0, 0, 0.18));
  background: var(--material-nav, rgba(255, 255, 255, 0.82));
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
  opacity: 0;
  transform: translateX(0.4rem);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  pointer-events: none;
}

/* Current section, and hover. */
.rail a:hover .rail__dash,
.rail .is-current .rail__dash {
  width: 34px;
  opacity: 1;
  background: var(--text);
}
.rail a:hover .rail__label,
.rail .is-current .rail__label {
  opacity: 1;
  transform: none;
}

/* Keyboard users get the same box, and a visible ring. */
.rail a:focus-visible .rail__label { opacity: 1; transform: none; }

/* Over a dark panel the grey dash all but disappears, so the rail flips.
   ui.js adds this class when the middle of the screen is over one.
   The classes it looks for are listed there — add to that list, not here,
   if a new dark panel is ever introduced. */
.rail--on-dark .rail__dash { background: #fff; }
.rail--on-dark .rail__label {
  background: rgba(20, 20, 22, 0.9);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .rail__dash, .rail__label { transition: none; }
}

/* Phones and tablets do not get the rail. It was tried at a smaller size on
   13 Oct 2026 and the client asked for it out: beside a narrow column it
   crowds the words instead of helping. The Menu button covers these widths.
   The two breakpoints are the same number on purpose — see NARROW SCREENS
   below, and change both together or a width ends up with neither. */
@media (max-width: 1100px) {
  .rail { display: none; }
}

/* ==========================================================================
   NARROW SCREENS — what the header does when the bar runs out of room.
   The rail is hidden at these widths (see 5b), so the menu takes over
   navigation entirely. The bar's button goes too, so the panel carries it.
   ========================================================================== */
@media (max-width: 1100px) {
  .nav__menu { display: block; }
  /* The client asked for the bar's button to go at this size. The menu panel
     carries it instead — see .nav__panel-cta. */
  .nav__cta { 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 social links. Icon sits with the label so the whole row is one target. */
.social li a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.social svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}

.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; }
}