/* ==========================================================================
   Buying Together
   One idea carries the design: two owners, two colours. Cobalt is the first
   owner, saffron the second. They appear in the logo, the houses in the
   calculator, the owner labels in the form and the names in the preview.
   The houses are the one bold element. Everything else is flat: no gradient
   washes, and only the two things you work with (the calculator and the
   document) are lifted off the page with a shadow.
   ========================================================================== */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --ink: #141c2b;
  --ink-2: #1d2840;
  --muted: #5a6577;
  --line: #e1e6ee;
  --mist: #f4f6fb;
  --paper: #ffffff;
  --a: #2d55d3;          /* first owner, and primary actions */
  --a-deep: #1f41ad;
  --a-tint: #eaf0fe;
  --b: #efa21d;          /* second owner */
  --b-ink: #9a6200;      /* saffron is too light for text; this is its ink */
  --b-tint: #fdf3df;

  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --t-xs: 0.8125rem;
  --t-sm: 0.9rem;
  --t-base: 1.0625rem;
  --t-md: 1.25rem;
  --t-lg: 1.5625rem;
  --t-xl: 2.1rem;
  --t-2xl: 2.6rem;
  --t-3xl: 3.6rem;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;

  --shadow-lg: 0 2px 4px rgba(20, 28, 43, 0.04), 0 24px 48px -16px rgba(31, 65, 173, 0.22);

  --wrap: 1180px;
  --gutter: 24px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; }
h2 { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.03em; }
h3 { font-size: var(--t-md); font-weight: 700; }
p { margin: 0 0 1em; }

a { color: var(--a); text-underline-offset: 3px; }
a:hover { color: var(--a-deep); }

:focus-visible { outline: 3px solid var(--a); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.icon { width: 20px; height: 20px; flex: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 20; }
.skip-link:focus { left: 8px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 650; text-decoration: none;
  border: 1.5px solid transparent; border-radius: 999px;
  padding: 12px 22px; cursor: pointer; line-height: 1.2;
  transition: background-color 0.15s, border-color 0.15s;
}
.btn-sm { padding: 9px 18px; font-size: var(--t-sm); }
.btn-lg { padding: 16px 28px; }
.btn-primary { background: var(--a); color: #fff; }
.btn-primary:hover { background: var(--a-deep); color: #fff; }
.btn-quiet { color: var(--ink); border-color: var(--line); background: var(--paper); }
.btn-quiet:hover { border-color: var(--ink); color: var(--ink); }
.btn-light { background: #fff; color: var(--a-deep); }
.btn-light:hover { background: var(--a-tint); color: var(--a-deep); }

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid rgba(225, 230, 238, 0.8);
}
.site-header-inner { display: flex; align-items: center; gap: 32px; min-height: 72px; }

.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--t-md); letter-spacing: -0.03em; color: var(--ink); text-decoration: none; }
.logo:hover { color: var(--ink); }
.logo-mark { display: inline-flex; width: 24px; height: 24px; border-radius: 6px; overflow: hidden; gap: 2px; }
.logo-mark span:first-child { flex: 5; background: var(--a); }
.logo-mark span:last-child { flex: 3; background: var(--b); }

.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 550; font-size: var(--t-sm); white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.product-already { margin-top: 10px; font-size: var(--t-sm); color: var(--muted); }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: 72px 0 96px;
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}
.hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }

.hero h1 { font-size: var(--t-3xl); font-weight: 850; letter-spacing: -0.04em; line-height: 1.02; max-width: 13ch; margin-bottom: 24px; }
.hero-lede { font-size: var(--t-md); color: var(--muted); max-width: 32em; line-height: 1.5; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 32px 0 28px; }

.hero-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: var(--t-sm); font-weight: 550; }
.hero-ticks li { display: inline-flex; align-items: center; gap: 6px; }
.hero-ticks .icon { color: var(--a); width: 18px; height: 18px; stroke-width: 2.4; }

/* ── Share calculator ───────────────────────────────────────────────────── */

.split {
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: 30px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(225, 230, 238, 0.7);
}
.split-title { font-size: var(--t-md); font-weight: 750; margin-bottom: 20px; }

.split-inputs { background: var(--mist); border-radius: var(--r-md); padding: 14px 16px; }
.split-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.split-row + .split-row { border-top: 1px solid var(--line); }
.split-row > label, .split-put { color: var(--muted); font-size: var(--t-sm); }
.split-row > label { flex: 1; }
.split-row .money-input { margin-left: auto; }

.name-input {
  font: inherit; font-weight: 700; width: 6em;
  border: 0; border-radius: 999px; padding: 5px 12px; color: var(--ink);
}
.split-row-a .name-input { background: var(--a-tint); color: var(--a-deep); }
.split-row-b .name-input { background: var(--b-tint); color: var(--b-ink); }
.name-input:focus { outline: 2px solid currentColor; outline-offset: 1px; }

.money-input, .percent-input {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  padding: 0 12px;
}
.money-input:focus-within, .percent-input:focus-within { border-color: var(--a); box-shadow: 0 0 0 4px var(--a-tint); }
.money-input span, .percent-input span { color: var(--muted); }
.money-input input, .percent-input input {
  font: inherit; font-weight: 600; border: 0; outline: 0; background: transparent; color: var(--ink);
  padding: 9px 4px; width: 6.5em;
}
.percent-input input { width: 3em; text-align: right; }

.houses { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.house-fig { margin: 0; padding: 16px; border-radius: var(--r-md); border: 1px solid var(--line); text-align: center; }
.house-fig-dot { border-color: var(--a); box-shadow: 0 0 0 3px var(--a-tint); }
.house { width: 100%; max-width: 132px; height: auto; display: block; margin: 0 auto 10px; }
.house .h-a { fill: var(--a); transition: width 0.4s ease; }
.house .h-b { fill: var(--b); transition: x 0.4s ease, width 0.4s ease; }
.house .h-door { fill: none; stroke: #fff; stroke-width: 3; }
.house-fig figcaption { font-size: var(--t-xs); color: var(--muted); line-height: 1.35; margin-bottom: 10px; min-height: 2.7em; }
.house-figures { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-sm); margin: 0; }
.house-figures b { font-weight: 800; }
.who-a { color: var(--a-deep); }
.who-b { color: var(--b-ink); }

.split-stake {
  margin: 20px 0 0; padding: 14px 18px; border-radius: var(--r-md);
  background: var(--ink); color: #fff;
  font-size: var(--t-md); font-weight: 750; letter-spacing: -0.01em; line-height: 1.3;
}
.split-small { font-size: var(--t-xs); color: var(--muted); margin: 14px 0 0; line-height: 1.45; }

/* ── Sections ───────────────────────────────────────────────────────────── */

.band { padding: 96px 0; }
.band-mist { background: var(--mist); }

.section-head { max-width: 40em; margin-bottom: 40px; }
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--muted); font-size: var(--t-md); line-height: 1.5; margin: 0; }

/* Who needs one: intro with a house on the left, a ruled list on the right. */
.who { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; }
.who-intro p { color: var(--muted); font-size: var(--t-md); line-height: 1.5; margin: 12px 0 0; }
.who-figure { margin: 40px 0 0; display: flex; gap: 20px; align-items: center; }
.who-figure .house { width: 140px; margin: 0; flex: none; }
.who-figure figcaption { font-size: var(--t-sm); color: var(--muted); max-width: 22em; }

.reasons { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.reasons li { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.reasons .icon { width: 26px; height: 26px; color: var(--a); margin-top: 1px; }
.reasons li:nth-child(even) .icon { color: var(--b-ink); }
.reasons h3 { font-size: var(--t-base); margin-bottom: 4px; }
.reasons p { color: var(--muted); font-size: var(--t-sm); margin: 0; }

/* How it works: a real sequence, so it is numbered. */
.band-ink { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.band-ink .section-head p { color: rgba(255, 255, 255, 0.7); }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.steps::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px;
  background: rgba(255, 255, 255, 0.16);
}
.steps li { counter-increment: step; position: relative; }
.steps li::before {
  content: counter(step);
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink-2); border: 2px solid var(--a); color: #fff;
  font-weight: 800; font-size: var(--t-md); margin-bottom: 20px; position: relative;
}
.steps h3 { font-size: var(--t-base); margin-bottom: 8px; }
.steps p { color: rgba(255, 255, 255, 0.68); font-size: var(--t-sm); margin: 0; }

/* Price cards */
.prices { display: grid; grid-template-columns: 1fr 1.2fr 1fr 1fr; gap: 16px; align-items: center; }
.price-card { min-width: 0; }
.price-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; background: var(--paper); }
.price-card h3 { font-size: var(--t-base); color: var(--muted); font-weight: 600; }
.price-card p { color: var(--muted); font-size: var(--t-sm); margin: 0; }
.price-card .price-amount { font-size: var(--t-2xl); font-weight: 850; letter-spacing: -0.04em; color: var(--ink); margin: 6px 0 12px; line-height: 1; }
.price-card-us { padding: 36px 32px; border: 2px solid var(--a); }
.price-card-us h3 { color: var(--a-deep); font-weight: 750; }
.price-card-us .price-amount { color: var(--a); font-size: var(--t-3xl); }
.price-card-us ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; font-size: var(--t-sm); }
.price-card-us li { display: flex; align-items: center; gap: 8px; }
.price-card-us li .icon { color: var(--a); width: 18px; height: 18px; stroke-width: 2.4; }
.price-card-us .btn { width: 100%; }

/* Solicitor callout */
.callout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  background: var(--paper); border-radius: var(--r-lg); padding: 48px;
  border: 1px solid var(--line);
}
.callout h2 { font-size: var(--t-lg); margin-bottom: 12px; }
.callout p { color: var(--muted); margin: 0; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: 12px 0 12px 28px; border-bottom: 1px solid var(--line); position: relative; font-size: var(--t-sm); }
.plain-list li:last-child { border-bottom: 0; }
.plain-list li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 12px; height: 2px; border-radius: 2px; background: var(--b); }

/* FAQ */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; font-size: var(--t-md); padding: 22px 48px 22px 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); font-weight: 400; color: var(--ink);
}
.faq details[open] summary::after { content: "\2212"; background: var(--ink); border-color: var(--ink); color: #fff; }
.faq details p { color: var(--muted); max-width: 42em; padding-bottom: 14px; }

/* Closing call to action */
.cta-wrap { padding: 0 0 96px; }
.cta-panel {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  background: var(--a);
  color: #fff; border-radius: var(--r-lg); padding: 56px;
}
.cta-panel > div, .cta-panel .btn { position: relative; z-index: 1; }
.cta-panel h2 { font-size: var(--t-xl); max-width: 18ch; margin-bottom: 10px; }
.cta-panel p { color: rgba(255, 255, 255, 0.8); margin: 0; }
.cta-panel .house { position: absolute; right: -20px; bottom: -36px; width: 260px; max-width: none; opacity: 0.16; margin: 0; }
.cta-panel .house .h-a, .cta-panel .house .h-b { fill: #fff; }
.cta-panel .house .h-door { stroke: var(--a); }

/* ── Product page ───────────────────────────────────────────────────────── */

.product-intro {
  padding: 56px 0 40px;
  background: var(--mist);
}
.product-intro h1 { font-size: var(--t-2xl); font-weight: 850; letter-spacing: -0.035em; margin-bottom: 12px; }
.product-lede { color: var(--muted); font-size: var(--t-md); max-width: 38em; margin: 0; line-height: 1.5; }

.builder-page { background: var(--mist); padding-bottom: 96px; }
.builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: start; }

.builder-form fieldset {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
  margin: 0 0 16px; padding: 28px; min-width: 0;
}
.builder-form legend {
  font-weight: 750; font-size: var(--t-md); padding: 0; margin-bottom: 18px; float: left; width: 100%;
  display: flex; align-items: center; gap: 12px;
}
.builder-form legend + * { clear: both; }
.legend-num {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--a-tint); color: var(--a-deep); font-size: var(--t-sm); font-weight: 800; flex: none;
}

.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field label, .field .label { display: block; font-weight: 600; font-size: var(--t-sm); margin-bottom: 6px; }
.field > input, .field > select {
  width: 100%; font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; background: var(--paper);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field > input:hover, .field > select:hover { border-color: #c9d3e6; }
.field > input:focus, .field > select:focus { outline: 0; border-color: var(--a); box-shadow: 0 0 0 4px var(--a-tint); }
.field .money-input { width: 100%; }
.field .money-input input { width: 100%; padding: 12px 4px; font-weight: 400; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.field-row .field { margin-bottom: 0; }
.optional { font-weight: 400; color: var(--muted); }

.owner-a > label::before, .owner-b > label::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px;
}
.owner-a > label::before { background: var(--a); }
.owner-b > label::before { background: var(--b); }

.hint { font-size: var(--t-sm); color: var(--muted); margin: 10px 0 0; }
.hint[data-show-when] { background: var(--b-tint); color: var(--ink); padding: 12px 14px; border-radius: var(--r-sm); }

.choices { display: flex; gap: 8px; flex-wrap: wrap; }
.choices-stacked { flex-direction: column; margin-bottom: 16px; }
.choice {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; cursor: pointer;
  font-size: var(--t-sm); font-weight: 550; transition: border-color 0.15s, background-color 0.15s;
}
.choice:hover { border-color: #c9d3e6; }
.choice input { margin-top: 3px; accent-color: var(--a); }
.choice:has(input:checked) { border-color: var(--a); background: var(--a-tint); box-shadow: inset 0 0 0 1px var(--a); }
.choices-stacked .choice { padding: 16px 18px; line-height: 1.45; font-weight: 400; color: var(--muted); }
.choices-stacked .choice strong { font-size: var(--t-base); color: var(--ink); }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--a); }

/* The preview document sits on a tinted "desk". */
.builder-preview {
  position: sticky; top: 96px;
  background: var(--a-tint);
  border-radius: var(--r-lg); padding: 28px;
}
.preview-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-size: var(--t-sm); font-weight: 650; }
.preview-bar span:first-child { color: var(--a-deep); }
.preview-owners { display: inline-flex; gap: 14px; }
.preview-owners span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.preview-owners .who-a::before { background: var(--a); }
.preview-owners .who-b::before { background: var(--b); }

.doc {
  position: relative;
  background: var(--paper);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 28, 43, 0.08), 0 20px 40px -18px rgba(20, 28, 43, 0.35);
  padding: 44px 48px 0;
  font-family: var(--serif);
  font-size: 0.96rem;
  line-height: 1.65;
  overflow: hidden;
}
.doc-title { font-family: var(--serif); font-weight: 600; font-size: var(--t-xl); text-align: center; letter-spacing: 0; margin-bottom: 4px; }
.doc-date { text-align: center; color: var(--muted); margin-bottom: 24px; }
.doc h3 { font-family: var(--serif); font-size: var(--t-base); font-weight: 600; letter-spacing: 0; margin: 20px 0 6px; }
.doc p { margin: 0 0 0.6em; }
.ink-a { box-shadow: inset 0 -3px 0 var(--a); }
.ink-b { box-shadow: inset 0 -3px 0 var(--b); }

.doc-blur { filter: blur(4px); user-select: none; pointer-events: none; opacity: 0.85; max-height: 230px; overflow: hidden; }

.doc-unlock {
  position: relative;
  margin: -150px -48px 0;
  padding: 120px 48px 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 45%);
  font-family: var(--sans);
  text-align: center;
}
.unlock-title { font-weight: 700; margin-bottom: 14px; }
.unlock-small { color: var(--muted); font-size: var(--t-xs); margin: 12px 0 0; }

.preview-jump { display: none; }

/* Form extras: checkout step, errors, the cancelled-payment notice */
.source-select { margin-top: 8px; width: 100%; font: inherit; font-size: var(--t-sm); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; background: var(--paper); }
.gift-fields { margin-top: 10px; padding: 12px; background: var(--mist); border-radius: var(--r-sm); display: grid; gap: 6px; }
.gift-fields[hidden], .check[hidden] { display: none; }
.gift-fields label { font-weight: 600; font-size: var(--t-sm); }
.gift-fields > input { font: inherit; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; background: var(--paper); width: 100%; }
.example { background: var(--mist); border-radius: var(--r-md); padding: 16px 18px; }
.example-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.example-row label { font-weight: 600; font-size: var(--t-sm); }
.example-result { margin: 12px 0 0; font-weight: 700; }
.builder-form .label { display: block; font-weight: 600; font-size: var(--t-sm); margin: 4px 0 8px; }
.hint-lead { margin: 0 0 16px; }
.doc-sub { padding-left: 18px; }
.check-spaced { margin-top: 16px; }
.check-card { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; margin-top: 4px; }
.check-card:has(input:checked) { border-color: var(--a); background: var(--a-tint); }
.check-card strong { font-size: var(--t-base); }
/* Buyers' posting address, shown under the ticked print card */
.post-address { margin-top: 20px; }
.pay-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.pay-total { margin: 0; color: var(--muted); }
.pay-total strong { color: var(--ink); font-size: var(--t-lg); font-weight: 850; letter-spacing: -0.02em; margin-left: 6px; }
.form-error { color: #b42318; background: #fef3f2; border-radius: var(--r-sm); padding: 10px 14px; font-size: var(--t-sm); font-weight: 600; margin: 14px 0 0; }
.notice { background: var(--b-tint); border-radius: var(--r-sm); padding: 12px 16px; margin-bottom: 20px; font-weight: 600; font-size: var(--t-sm); }

/* ── Success page ───────────────────────────────────────────────────────── */

.narrow { max-width: 620px; }

/* Privacy, terms and guides */
.legal-body { max-width: 720px; padding-top: 48px; padding-bottom: 96px; }
.legal-body h2 { font-size: var(--t-md); font-weight: 750; margin: 36px 0 10px; }
.legal-body p, .legal-body li { color: var(--ink); line-height: 1.6; }
.legal-body ul { padding-left: 1.2em; margin: 0 0 14px; }
.legal-body li { margin-bottom: 6px; }
.legal-body a:not(.btn) { color: var(--a); }
.legal-updated { color: var(--muted); font-size: var(--t-sm); margin: 0; }
.product-intro .legal-updated { margin-top: 14px; }
.crumb { font-size: var(--t-sm); margin: 0 0 10px; }
.short-answer { color: var(--ink); font-weight: 700; }
.legal-body .sources { font-size: var(--t-sm); }
.crumb a { color: var(--muted); }
.prose h2 { font-size: var(--t-lg); margin-top: 40px; }
.prose h3 { font-size: var(--t-md); font-weight: 700; margin: 24px 0 8px; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: var(--t-sm); }
.prose th, .prose td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 700; }
.prose blockquote { margin: 0 0 18px; padding: 4px 0 4px 18px; border-left: 3px solid var(--a); color: var(--muted); }
.prose blockquote p { color: var(--muted); margin: 0; }
.table-scroll { overflow-x: auto; }
.guide-cta { background: var(--a-tint); border-radius: var(--r-sm); padding: 24px; margin: 44px 0 8px; }
.guide-cta h2 { margin-top: 0; }
.legal-body .related, .legal-body .guide-list { list-style: none; padding: 0; }
.related li { margin-bottom: 8px; }
.guide-list li { padding: 18px 0; border-bottom: 1px solid var(--line); margin: 0; }
.guide-list a { font-weight: 700; font-size: var(--t-md); color: var(--ink); }
.guide-list p { color: var(--muted); margin: 4px 0 0; }
.guides-index .guide-group { margin-bottom: 8px; }
.guides-index .guide-group h2 { font-size: var(--t-lg); margin: 40px 0 6px; }
.guides-index .guide-group:first-child h2 { margin-top: 0; }
.legal-body .guide-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.guide-cards li { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px; margin: 0; }
.guide-cards a { font-weight: 700; color: var(--ink); }
.guide-cards p { color: var(--muted); font-size: var(--t-sm); margin: 6px 0 0; }
.guide-filter { margin-top: 22px; max-width: 520px; }
.guide-filter input { width: 100%; font: inherit; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.guide-filter input:focus { outline: 2px solid var(--a); outline-offset: 1px; }
.guide-group[hidden], [data-guide][hidden], .guide-filter[hidden] { display: none; }
.legal-body .guide-list a, .legal-body .guide-cards a { color: var(--ink); text-decoration: none; }
.legal-body .guide-list a:hover, .legal-body .guide-cards a:hover { color: var(--a); text-decoration: underline; }
.success-state { padding: 80px 0 96px; }
.success-state#state-success { padding: 0 0 96px; }
.success-state h1 { font-size: var(--t-2xl); font-weight: 850; letter-spacing: -0.035em; margin-bottom: 12px; }
.success-state p { color: var(--muted); }
.muted { color: var(--muted); font-size: var(--t-sm); }

.spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--a-tint); border-top-color: var(--a); animation: spin 0.8s linear infinite; margin-bottom: 24px; }
@keyframes spin { to { transform: rotate(360deg); } }

.recovery { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 8px; }
.recovery input { flex: 1; min-width: 220px; font: inherit; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; }
.recovery input:focus { outline: 0; border-color: var(--a); box-shadow: 0 0 0 4px var(--a-tint); }

.success-hero { background: var(--mist); border-bottom: 1px solid var(--line); padding: 64px 0 56px; margin-bottom: 40px; }
.success-hero p { font-size: var(--t-md); margin-bottom: 24px; }
.success-body { display: grid; gap: 16px; }
.success-body > * { max-width: 820px; }
.success-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 32px; }
.success-card h2 { font-size: var(--t-lg); margin-bottom: 12px; }
.success-card p { color: var(--muted); }
.success-card-quiet { background: var(--mist); border-color: transparent; }
.success-card-will { border-color: var(--a); background: var(--a-tint); }
.success-card-will .btn { margin-top: 6px; }
.next-steps { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.next-steps li { padding-left: 4px; }
.confirm { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.confirm p { color: var(--ink); }
.confirm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-danger { background: #b42318; color: #fff; }
.btn-danger:hover { background: #912018; color: #fff; }

/* ── Footer and 404 ─────────────────────────────────────────────────────── */

.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.65); padding: 56px 0 64px; font-size: var(--t-sm); }
.site-footer .logo { color: #fff; margin-bottom: 20px; }
.footer-lede { max-width: 48em; color: rgba(255, 255, 255, 0.85); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 20px 0; }
.footer-nav a { color: #fff; text-decoration: none; font-weight: 600; }
.footer-nav a:hover { color: var(--b); }
.footer-company { font-size: var(--t-xs); max-width: 60em; margin: 0; }

/* "Made by nanoswift": the studio wordmark (already this site's typeface), its tile in owner-one blue */
.footer-base { display: flex; align-items: center; justify-content: space-between; gap: 16px 40px; }
@media (max-width: 720px) { .footer-base { flex-direction: column; align-items: flex-start; } }
.footer-maker { display: inline-flex; align-items: center; gap: 8px; flex: none; color: #fff; text-decoration: none; }
.footer-maker:hover { color: var(--b); }
.footer-maker-label { font-size: var(--t-xs); line-height: 1; color: rgba(255, 255, 255, 0.65); transform: translateY(1px); }
.footer-maker svg { width: 20px; height: 20px; flex: none; display: block; }
.footer-maker svg rect { fill: var(--a); }
.footer-maker svg text { fill: #fff; font: 900 21px var(--sans); }
.footer-maker-word { font: 900 1.05rem/1 var(--sans); letter-spacing: -0.04em; }

.not-found { padding: 96px var(--gutter); }
.not-found h1 { font-size: var(--t-2xl); margin-bottom: 12px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1020px) {
  /* Homepage jump links go first when the header gets tight */
  .nav .nav-extra { display: none; }
  .nav { gap: 22px; }
  .logo, .header-cta { white-space: nowrap; }
  .hero-inner, .builder, .callout { grid-template-columns: 1fr; gap: 40px; }
  .who { grid-template-columns: 1fr; gap: 40px; }
  .steps { grid-template-columns: 1fr 1fr 1fr; row-gap: 32px; }
  .steps::before { display: none; }
  .prices { grid-template-columns: 1fr 1fr; }
  .price-card-us { grid-column: 1 / -1; }
  .price-card-us { order: -1; }
  .builder-preview { position: static; }
  .preview-jump {
    display: flex; position: sticky; bottom: 16px; z-index: 5; margin: 8px auto 0;
    width: max-content; box-shadow: 0 10px 24px -8px rgba(20, 28, 43, 0.45);
  }
}

@media (max-width: 720px) {
  .nav { display: none; }
  .site-header-inner { gap: 12px; min-height: 64px; }
  .logo { font-size: var(--t-base); white-space: nowrap; }
  .header-cta { margin-left: auto; white-space: nowrap; }
}

@media (max-width: 600px) {
  .prices { grid-template-columns: 1fr; }
  :root { --gutter: 16px; --t-3xl: 2.5rem; --t-2xl: 2.1rem; --t-xl: 1.75rem; }
  .hero { padding: 40px 0 56px; }
  .band { padding: 64px 0; }
  .split { padding: 20px 16px; }
  .split-inputs { padding: 8px 12px; }
  .split .name-input { width: 4.6em; padding: 4px 10px; }
  .split .money-input input { width: 5.4em; }
  .houses { gap: 10px; }
  .house-fig { padding: 12px 10px; }
  .steps { grid-template-columns: 1fr; }
  .callout { padding: 28px 22px; }
  .cta-panel { padding: 36px 24px; }
  .builder-form fieldset { padding: 22px 18px; }
  .field-row { grid-template-columns: 1fr; }
  .builder-preview { padding: 14px; }
  .doc { padding: 28px 20px 0; }
  .doc-unlock { margin: -150px -20px 0; padding: 120px 20px 28px; }
  .success-card { padding: 22px 20px; }
  .pay-row .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spinner { animation-duration: 2.4s; }
  .btn, .house .h-a, .house .h-b { transition: none; }
}