/* Entrance house style. All colors come from tokens.css (docs/STYLE.md, locked 2026-09-21): paper and ink, one accent
   used sparingly (primary button, the hairline under section heads, link underlines, the .RealEstate half of the wordmark).
   tokens.css is loaded before this file on every page. */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink-2); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 80px; width: 100%; }
main.wrap { flex: 1 0 auto; }
.foot { margin-top: auto; }
.wrap.wide { max-width: 1100px; }
.mast { width: 100%; display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: 0 auto; padding: 20px 16px; }
.brand { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); text-decoration: none; }
.brand { text-decoration: none; }
.brand span { color: var(--accent); }
h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 5.6vw, 42px); line-height: 1.12; margin: 24px 0 12px; color: var(--ink); }
h2 { font-family: var(--serif); font-weight: 600; font-size: 22px; margin-bottom: 4px; color: var(--ink); }
strong { color: var(--ink); }
.lede { color: var(--ink-2); font-size: 18px; margin-bottom: 28px; }
.card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 22px; margin-bottom: 18px; }
.card > p.hint { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.choices { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 18px; }
.choice { display: block; text-align: left; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 22px; color: var(--ink); text-decoration: none; font: inherit; cursor: pointer; }
.choice:hover, .choice:focus-visible { border-color: var(--ink); outline: none; }
.choice h2 { text-decoration: none; }
.choice p { color: var(--muted); font-size: 14px; margin: 6px 0 14px; }
.choice .go { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.choice { text-decoration: none; }
label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; color: var(--ink); }
label .tag { font-weight: 400; color: var(--muted); margin-left: 6px; }
label .tag.need { color: var(--ink-2); }
input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; min-height: 46px; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.row { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
button, .btn { font: inherit; font-weight: 600; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
button:hover, .btn:hover { filter: brightness(1.08); }
button.quiet, .btn.quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
button.quiet:hover, .btn.quiet:hover { background: var(--paper-2); filter: none; }
button:disabled { opacity: .55; cursor: default; }
button.tiny { min-height: 30px; padding: 0 12px; font-size: 13px; font-weight: 400; margin-top: 6px; }
td.actions { gap: 8px; }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.note { font-size: 14px; color: var(--muted); min-height: 20px; }
.note.error { color: var(--danger); }
.note.ok { color: var(--ink-2); }
.code-input { font-size: 28px !important; letter-spacing: 10px; text-align: center; font-variant-numeric: tabular-nums; }
.status { border: 0; border-left: 2px solid var(--accent); border-radius: 0; }
.status.ready { border-left-color: var(--ink); }
.checklist { list-style: none; margin-top: 10px; }
.checklist li { padding: 5px 0; display: flex; gap: 10px; align-items: baseline; }
.checklist li.done { color: var(--muted); text-decoration: line-through; }
.checklist a { color: var(--ink); }
.mark { display: inline-block; width: 18px; font-weight: 700; color: var(--ink-2); }
li.done .mark { color: var(--muted); }
.brokerage-box { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.brokerage-logo { background: #ffffff; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line); height: 54px; }
.preview { display: block; margin-top: 12px; max-width: 180px; max-height: 180px; border-radius: 12px; border: 1px solid var(--line); background: #fff; object-fit: cover; }
.preview.logo { object-fit: contain; padding: 10px; }
/* The welcome-gift headshot: the checklist of photos we ask for, then four upload tiles. */
.gift-lead { font-weight: 600; font-size: 14px; margin: 4px 0 4px; }
.photo-list { margin: 0 0 14px 20px; font-size: 15px; }
.photo-list li { margin: 3px 0; }
.photos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 8px; }
.tile { border: 1px dashed var(--line); border-radius: 12px; padding: 12px; background: var(--paper); }
.tile label { margin-top: 0; }
.tile .preview { width: 100%; max-width: none; max-height: none; aspect-ratio: 1 / 1; margin: 0 0 10px; }
.tile .empty { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; border: 1px dashed var(--line); background: var(--paper); display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.tile .btn.small { min-height: 36px; padding: 0 14px; font-size: 14px; margin: 0; }
.tile .btn.locked { opacity: .45; pointer-events: none; }
.tile.locked { border-style: dotted; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card > p.hint.gift-foot { margin: 14px 0 0; }
.release-text { white-space: pre-wrap; font-family: var(--serif); font-size: 15px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 16px; max-height: 320px; overflow-y: auto; }
.hp { position: absolute; left: -9999px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.scroll { overflow-x: auto; }
/* Status markers are outlined, never colored (docs/STYLE.md). */
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.pill.good { border-color: var(--ink-2); color: var(--ink); }
.scorecard { width: 100%; border-collapse: collapse; margin: 10px 0; }
.scorecard td { padding: 6px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.scorecard td:last-child { text-align: right; white-space: nowrap; }
[hidden] { display: none !important; }
/* Shared footer: every page carries the same block (copyright, license, plain-words privacy line). */
.foot { background: var(--paper-2); border-top: 1px solid var(--line); margin-top: 40px; padding: 28px 0 44px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.foot > p { max-width: 760px; margin-left: auto; margin-right: auto; padding: 0 16px; }
.foot.wide > p { max-width: 1100px; }
.foot p { margin: 0 auto 8px; }
.foot p:last-child { margin-bottom: 0; }
.foot .foot-brand { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.foot a { overflow-wrap: anywhere; }
.gate { border: 0; border-left: 2px solid var(--ink); border-radius: 0; }
.gate h2 { margin-bottom: 8px; }