/* HDB Valuation. Tokens match the PLB Consultant Suite hub; light theme only. */
:root {
  --page: #f5f5f7;
  --card: #ffffff;
  --tile: #f5f5f7;
  --ink: #1d1d1f;
  --ink2: #6e6e73;
  --ink3: #86868b;          /* decoration only: fails contrast for text */
  --line: #e6e6ea;
  --field: #86868b;         /* control borders: 3.6:1 on white, as on Apple's own forms */
  --soft: #f0f0f3;
  --blue: #0071e3;          /* every button and link */
  --blue-hover: #0077ed;
  --blue-text: #0066cc;     /* the same action blue, one step darker, for small link text on grey */
  --blue-soft: rgba(0, 113, 227, .08);
  --focus: rgba(0, 113, 227, .8);   /* 3.4:1 on white: a visible focus ring (WCAG 1.4.11) */
  --emerald: #10b981;       /* tool accent, used sparingly: eyebrow dot, range bar */
  --emerald-ink: #047857;
  --emerald-soft: rgba(16, 185, 129, .13);
  --blue-bg: #e8f1fc; --blue-fg: #0058b0;
  --gray-bg: #efeff2; --gray-fg: #4a4a4f;
  --red-bg: #fdecec; --red-fg: #b3261e;
  --shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 10px 30px rgba(0, 0, 0, .05);
  --radius: 22px;
  --maxw: 780px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }   /* anchor jumps, error links and focus land below the sticky top bar (review F6) */
body {
  margin: 0; min-width: 320px; background: var(--page); color: var(--ink);
  font: 17px/1.47 var(--font); letter-spacing: -.016em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
/* One page, two versions (contract 15.3). html[data-mode] is 'pending' until api/session answers,
   then 'suite' (the consultant tool) or 'public' (the free version on www). The public Worker's page
   comes with data-mode 'public' already (src/public-page.js), so without JavaScript it shows the
   public copy; the consultants' page, served as it is, then has no data-mode and shows theirs. Either
   way the noscript note shows, and nothing that only a script can make work (data-needs-js: the
   consultation form and the link to it) shows until index.html's script has marked the page data-js. */
html:not([data-mode="public"]) [data-for="public"],
html[data-mode="public"] [data-for="suite"],
html[data-mode="pending"] [data-for="suite"],
html:not([data-js]) [data-needs-js] { display: none !important; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button, select, input { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3 { margin: 0; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 16px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
.skip:focus { top: calc(10px + env(safe-area-inset-top)); }

/* ---------- top bar (the hub's pattern) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  padding-top: max(10px, env(safe-area-inset-top));
  background: rgba(245, 245, 247, .8);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); min-width: 0; min-height: 44px; }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, #3a3a42, #1d1d1f); color: #fff;
  font-weight: 700; font-size: 11px; letter-spacing: .04em; box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong { font-size: 13px; font-weight: 600; }
.brand-text small { font-size: 12px; color: var(--ink2); white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.user .who { font-size: 13px; color: var(--ink2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av {
  width: 32px; height: 32px; border-radius: 50%; background: var(--soft) center/cover; flex: none;
  display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--ink);
}
.signout { min-height: 44px; padding: 0 6px; font-size: 13px; color: var(--blue-text); background: none; border: 0; cursor: pointer; }
.signout:hover { text-decoration: underline; }
.dev-chip { font-size: 12px; font-weight: 600; color: var(--gray-fg); padding: 5px 10px; border-radius: 999px; background: var(--soft); }

/* ---------- layout ---------- */
main {
  max-width: calc(var(--maxw) + 32px); margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
}
.hero { text-align: center; padding: clamp(40px, 8vw, 88px) 0 clamp(28px, 5vw, 48px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font-size: 15px; font-weight: 600; color: var(--emerald-ink); letter-spacing: -.01em;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 4px var(--emerald-soft); }
h1 { font-size: clamp(40px, 8vw, 68px); line-height: 1.04; letter-spacing: -.04em; font-weight: 700; }
.lede { margin: 16px auto 0; max-width: 580px; font-size: clamp(19px, 2.6vw, 23px); line-height: 1.38; color: var(--ink2); letter-spacing: -.02em; }

.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.gate { padding: clamp(28px, 5vw, 44px); text-align: center; }
.gate h2 { font-size: 24px; letter-spacing: -.025em; }
.gate p { margin: 8px auto 22px; color: var(--ink2); max-width: 440px; }
.notice { padding: 20px 22px; margin-bottom: 18px; }
.notice strong { display: block; margin-bottom: 4px; }
.notice p { margin: 0; color: var(--ink2); }
.notice.error { box-shadow: var(--shadow), inset 0 0 0 1px rgba(179, 38, 30, .25); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 980px; border: 0; cursor: pointer;
  font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, transform .15s, box-shadow .2s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); }
.btn-primary:disabled { background: #b8d6f6; cursor: default; transform: none; }
.btn-large { min-height: 54px; padding: 0 32px; font-size: 17px; font-weight: 600; }
.btn-secondary { background: var(--card); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.btn-secondary:hover { background: var(--blue-soft); }
.btn .i { width: 17px; height: 17px; }
.spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .8s linear infinite; }
.btn.busy .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- the picker ---------- */
.tool { padding: clamp(22px, 5vw, 40px); }
.group { border: 0; margin: 0; padding: 0; min-width: 0; }
.group + .group { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
/* A legend sits on its fieldset's border unless floated; float it so the divider stays above it. */
.group-title { float: left; width: 100%; padding: 0; margin: 0 0 16px; font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.group-title ~ * { clear: both; }
.fields { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.field { min-width: 0; border: 0; margin: 0; padding: 0; }
.field > label, .field-label { display: block; padding: 0; margin: 0 0 7px 2px; font-size: 14px; font-weight: 600; color: var(--ink); }
.field-hint { margin: 7px 2px 0; font-size: 13px; color: var(--ink2); }
.hint { margin: 0; color: var(--ink2); font-size: 16px; }
.select { position: relative; }
.select::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; pointer-events: none;
  border-right: 2px solid var(--ink2); border-bottom: 2px solid var(--ink2); transform: translateY(-70%) rotate(45deg);
}
select, .custom-area input {
  display: block; width: 100%; min-height: 52px; margin: 0;
  padding: 0 38px 0 16px; border-radius: 14px; border: 1px solid var(--field); background: var(--card);
  font-size: 17px; color: var(--ink); -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s;
  text-overflow: ellipsis;
}
.custom-area input { padding-right: 16px; max-width: 220px; }
select:hover:not(:disabled), .custom-area input:hover { border-color: var(--ink3); }
select:focus-visible, .custom-area input:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--focus); }
select:disabled { background: #fafafc; color: var(--ink2); cursor: default; }
.select:has(select:disabled)::after { opacity: .4; }
[aria-invalid="true"] { border-color: var(--red-fg) !important; }

.block-summary {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 16px 0 0; padding: 12px 16px;
  border-radius: 14px; background: var(--tile); font-size: 15px; color: var(--ink2);
}
.block-summary b { color: var(--ink); font-weight: 600; }

#typeField { margin-bottom: 18px; }
.seg { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.seg label { position: relative; display: block; cursor: pointer; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg .opt {
  display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 8px 14px;
  border-radius: 14px; border: 1px solid var(--field); background: var(--card);
  font-size: 16px; font-weight: 600; line-height: 1.2; transition: border-color .15s, box-shadow .15s;
}
.seg .opt small { margin-top: 3px; font-size: 13px; font-weight: 400; color: var(--ink2); }
.seg label:hover .opt { border-color: var(--ink3); }
.seg input:checked + .opt { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: var(--blue-bg); }
.seg input:checked + .opt small { color: var(--blue-fg); }
.seg input:focus-visible + .opt { outline: 3px solid var(--focus); outline-offset: 2px; }
.seg-empty { margin: 0; color: var(--ink2); }
.custom-area { margin-top: 16px; }

/* "Know your postal code?" above the town, street and block: a short way in; the pickers stay the
   main one. The box and its button sit on one line down to 320 px. */
.postal { margin-bottom: 22px; }
.postal-row { display: flex; gap: 10px; max-width: 360px; }
.postal-row input {
  flex: 1 1 auto; min-width: 0; min-height: 52px; margin: 0; padding: 0 16px;
  border-radius: 14px; border: 1px solid var(--field); background: var(--card);
  font-size: 17px; color: var(--ink); letter-spacing: .04em; -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.postal-row input:hover { border-color: var(--ink3); }
.postal-row input:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--focus); }
.postal-row .btn { flex: none; min-height: 52px; }
.postal-row .btn:disabled { opacity: .5; cursor: default; transform: none; }
.field-error { margin: 7px 2px 0; font-size: 14px; color: var(--red-fg); }

.cta { margin-top: 30px; }
.cta .btn-primary { width: 100%; }
.form-error { margin: 12px 2px 0; color: var(--red-fg); font-size: 15px; }

.reveal { animation: rise .45s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- the result ---------- */
.result-wrap { margin-top: 24px; scroll-margin-top: 72px; }
.result-wrap:has(#resultBody:empty) { margin-top: 0; }
.result { position: relative; padding: clamp(26px, 6vw, 52px) clamp(20px, 5vw, 44px); animation: rise .55s var(--ease) both; }
/* Out of date: dimmed, but still readable (4.5:1), and the disclaimer never dims. */
.result.is-stale > :not(.stale-note):not(.disclaimer) { opacity: .6; transition: opacity .2s; }
.stale-note { display: none; margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; background: var(--blue-bg); color: var(--blue-fg); font-size: 15px; text-align: center; }
.result.is-stale .stale-note { display: block; }

.r-head { text-align: center; }
.r-kicker { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink2); letter-spacing: -.01em; outline: none; }
.r-subject { margin: 6px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.r-meta { margin: 2px 0 0; font-size: 15px; color: var(--ink2); }
.r-meta .nw { white-space: nowrap; }
.r-figure {
  margin: 20px 0 6px; font-size: clamp(36px, 11.5vw, 88px); font-weight: 700; line-height: 1;
  letter-spacing: -.045em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.r-range { margin: 0; font-size: clamp(17px, 2.4vw, 21px); color: var(--ink2); letter-spacing: -.02em; }
.r-range b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.r-units { margin: 14px 0 0; font-size: 15px; color: var(--ink2); font-variant-numeric: tabular-nums; }

/* range bar: the emerald band is the likely range, the ring is the estimate */
.rb { position: relative; max-width: 520px; height: 44px; margin: 22px auto 0; }
.rb-line { position: absolute; left: 0; right: 0; top: 29px; height: 4px; border-radius: 2px; background: var(--line); }
.rb-range {
  position: absolute; top: 27px; height: 8px; border-radius: 4px; background: var(--emerald);
  left: var(--lo); width: calc(var(--hi) - var(--lo)); transform-origin: center;
  animation: grow .6s var(--ease) .1s both;
}
.rb-mark {
  position: absolute; top: 31px; left: var(--mid); width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; background: var(--card); box-shadow: 0 0 0 3px var(--ink), 0 2px 8px rgba(0, 0, 0, .25);
  animation: slide .8s var(--ease) .2s both;
}
@keyframes grow { from { transform: scaleX(0); } }
@keyframes slide { from { left: var(--lo); } }
.rb-caption { max-width: 520px; margin: 8px auto 0; font-size: 13px; color: var(--ink2); }

.conf { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 22px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pill.lvl3 { background: var(--emerald-soft); color: var(--emerald-ink); }
.pill.lvl2 { background: var(--blue-bg); color: var(--blue-fg); }
.pill.lvl1 { background: var(--gray-bg); color: var(--gray-fg); }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.bars i { display: block; width: 3px; border-radius: 1px; background: currentColor; opacity: .25; }
.bars i:nth-child(1) { height: 5px; } .bars i:nth-child(2) { height: 8px; } .bars i:nth-child(3) { height: 12px; }
.bars i.on { opacity: 1; }
.conf-meaning { font-size: 15px; color: var(--ink2); }

.disclaimer {
  display: flex; gap: 10px; align-items: flex-start; margin: 26px 0 0; padding: 14px 16px;
  border-radius: 14px; background: var(--tile); color: var(--ink2); font-size: 13px; line-height: 1.5; text-align: left;
}
.disclaimer .i { width: 16px; height: 16px; margin-top: 1px; color: var(--ink2); }
.disclaimer b { color: var(--ink); font-weight: 600; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.tile { min-width: 0; padding: 18px 18px 16px; border-radius: 18px; background: var(--tile); }
.tile-label { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink2); }
.tile-value { margin: 6px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile-value small { font-size: 15px; font-weight: 500; color: var(--ink2); letter-spacing: -.01em; }
.tile-value.muted { font-size: 19px; color: var(--ink2); font-weight: 600; }
.tile-sub { margin: 6px 0 0; font-size: 14px; color: var(--ink2); }

.r-sec { margin-top: 40px; }
.r-sec > h3 { font-size: 21px; letter-spacing: -.022em; font-weight: 700; }
.r-sec > .sub { margin: 4px 0 0; font-size: 15px; color: var(--ink2); }

/* asking price guide (contract 12.4): a second, quieter set of numbers under the one estimate.
   One reference block with hairline dividers, not three separate cards that look like buttons
   (design review M6); prices well below the hero figure's size; no accent colour. */
.ask > .sub { max-width: 640px; }
.ask-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 16px 0 0; padding: 0; list-style: none;
  border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line);
}
.ask-card {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0;
  padding: 18px 18px 16px; background: none;
}
.ask-card + .ask-card { border-left: 1px solid var(--line); }
.ask-name { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
/* Seven-digit asks fit a third of the card from 640 px up (design review L1). */
.ask-price { margin: 6px 0 0; font-size: clamp(20px, 3.4vw, 26px); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ask-speed { margin: 3px 0 0; font-size: 14px; color: var(--ink2); }
.ask-facts {
  display: grid; gap: 5px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line);
  list-style: none; font-size: 13px; line-height: 1.4; color: var(--ink2); font-variant-numeric: tabular-nums;
}
.ask-facts:empty { display: none; }
.ask-basis { margin: 8px 2px 0; font-size: 13px; color: var(--ink2); }
.print-only { display: none; }
.ask-empty { margin-top: 16px; padding: 16px 18px; border-radius: 18px; background: var(--tile); }
.ask-empty-msg { margin: 0; font-size: 15px; }
.ask-empty .ask-basis { margin: 12px 0 0; }
.ask-found { margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; }
.ask-found li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.ask-found b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ask-found span { color: var(--ink2); }
.ask-found .tag-out { background: var(--gray-bg); color: var(--gray-fg); }
.r-sec.ask-off { margin-top: 22px; }
/* The listings fold sits right after the evidence folds, as their neighbour. */
.r-sec.ask-list { margin-top: 12px; }
.ask-quiet { margin: 0; padding: 0 2px; font-size: 14px; color: var(--ink2); }
table.ev.listings { min-width: 900px; }
table.ev.listings-out { min-width: 620px; }
.ev .dim { color: var(--ink2); }
.ev-h { margin: 18px 2px 8px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
/* "View listing" (contract 15.4): the listing's own page, in a new tab. In the tables it sits under
   the asking price, in the first column, so a phone shows it without a swipe; on a touch screen it
   is a full 44 px target (review F4). */
.view-listing { font-weight: 600; white-space: nowrap; }
.ask-found .view-listing { margin-left: auto; font-size: 14px; }
.ev td .view-listing { display: block; margin-top: 2px; font-size: 14px; }
@media (pointer: coarse) {
  .view-listing { display: inline-flex; align-items: center; min-height: 44px; }
  .ev td .view-listing { display: flex; justify-content: flex-end; margin-top: 0; }
}
/* A block probably still inside its minimum occupation period (reviews ASK-1 and F3); its flats
   cannot be resold yet, so in place of the asking price guide one quiet line says so (contract 17.3). */
.mop-note { max-width: 560px; margin: 14px auto 0; padding: 10px 14px; border-radius: 14px; background: var(--tile); font-size: 14px; color: var(--ink); text-align: left; }
.ask-few { margin: 12px 2px 0; font-size: 14px; color: var(--ink); }
/* The free public version's invitations to ask a consultant (review F11). */
.ask-cta, .noest-cta { margin: 14px 2px 0; font-size: 15px; }
/* ...and their links look like links: in the www navy they read as body text (consumer review L2). */
html[data-mode="public"] :is(.ask-cta, .noest-cta) a { color: var(--blue-text); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
/* The free public version's link to recent resale prices at the block or in the town, after the
   result (contract 17.6): a full 44 px target, with a chevron that is not the only sign it is a link. */
.r-more { margin: 28px 2px 0; font-size: 15px; }
.r-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.r-more a::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }

/* The other kind of one number: the line under it, and the plain range bar. */
.lr-why { max-width: 560px; margin: 18px auto 0; font-size: 16px; color: var(--ink); }
.rb-plain { height: 36px; }
.rb-plain .rb-line { top: 17px; }
.rb-plain .rb-range { top: 15px; }
.rb-plain .rb-mark { top: 19px; }
table.ev.lr { min-width: 720px; }

/* folds: the evidence tables */
.fold { margin-top: 12px; }
.r-sec .fold { box-shadow: none; background: var(--tile); border-radius: 18px; }
.fold summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 60px; padding: 14px 20px; cursor: pointer; list-style: none; border-radius: inherit;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary:hover .fold-title { color: var(--blue); }
.fold-title { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.fold-sub { display: block; margin-top: 1px; font-size: 14px; color: var(--ink2); }
.chev { flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid var(--ink2); border-bottom: 2px solid var(--ink2); transform: rotate(45deg); transition: transform .25s var(--ease); }
.fold[open] > summary .chev { transform: rotate(225deg); }
.fold-body { padding: 0 20px 20px; }
.fold[open] > .fold-body { animation: rise .35s var(--ease) both; }

/* position: relative keeps a hidden screen-reader label in a cell (such as "View listing"'s) inside
   the scrolling box, so it cannot widen the page. */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; border-radius: 12px; }
.table-wrap:focus-visible { outline: 3px solid var(--focus); }
table.ev { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; background: var(--card); border-radius: 12px; overflow: hidden; }
table.ev.rent { min-width: 560px; }
.ev th, .ev td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ev th { font-size: 12px; font-weight: 600; color: var(--ink2); background: #fafafc; }
.ev td.num, .ev th.num { text-align: right; }
.ev tr:last-child td { border-bottom: 0; }
.ev .blk { font-weight: 600; }
.ev .st { display: block; font-size: 12px; color: var(--ink2); }
.ev .adj { display: block; font-size: 12px; color: var(--ink2); }
.share { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.share i { display: block; height: 4px; border-radius: 2px; background: var(--emerald); min-width: 2px; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--emerald-soft); color: var(--emerald-ink); font-size: 12px; font-weight: 600; }
.ev-note { margin: 10px 2px 0; font-size: 13px; color: var(--ink2); white-space: normal; }
.phone-only { display: none; }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }

/* no estimate */
.noest-title { margin: 22px 0 8px; font-size: clamp(24px, 4vw, 32px); letter-spacing: -.03em; }
.noest-msg { margin: 12px auto 0; max-width: 520px; color: var(--ink2); }
.try { max-width: 520px; margin: 22px auto 0; text-align: left; }
.try h3 { font-size: 17px; }
.try ul { margin: 8px 0 0; padding-left: 20px; color: var(--ink); }
.try li + li { margin-top: 4px; }
.tiles.one { grid-template-columns: minmax(0, 1fr); max-width: 360px; margin-left: auto; margin-right: auto; }
/* Two tiles when there is no gross yield to show (consumer review H1). */
.tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* skeletons */
.skeleton { display: grid; gap: 18px; }
.sk { border-radius: 14px; background: linear-gradient(90deg, var(--soft), #f8f8fa, var(--soft)); background-size: 200% 100%; animation: sh 1.4s linear infinite; }
.sk-title { height: 26px; width: 46%; } .sk-title.short { width: 30%; }
.sk-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sk-field { height: 52px; } .sk-button { height: 54px; border-radius: 980px; }
.sk-figure { height: 72px; width: 60%; margin: 16px auto; }
.sk-line { height: 18px; width: 40%; margin: 0 auto; }
.sk-tiles { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; }
.sk-tile { height: 104px; border-radius: 18px; }
@keyframes sh { to { background-position: -200% 0; } }

/* ---------- footer ---------- */
.foot { margin-top: 40px; border-top: 1px solid var(--line); }
.foot-inner {
  max-width: calc(var(--maxw) + 32px); margin: 0 auto;
  padding: 26px max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  font-size: 13px; color: var(--ink2);
}
.foot-disclaimer h2 { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.foot-disclaimer p { margin: 0; line-height: 1.55; }
.foot-disclaimer strong { color: var(--ink); font-weight: 600; }
.foot-sources { margin: 14px 0 0; }
.foot a { color: var(--blue-text); }
.foot-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; }
.foot-meta span:empty { display: none; }
.noscript { max-width: var(--maxw); margin: 20px auto; padding: 0 16px; }

.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 20;
  width: max-content; max-width: min(92vw, 440px); padding: 12px 18px; border-radius: 14px; background: rgba(29, 29, 31, .92); color: #fff;
  font-size: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); opacity: 0; pointer-events: none;
  transform: translate(-50%, 16px); transition: opacity .2s, transform .25s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--red-fg); }

/* ---------- the free public version (contract 15.3): the main site's look ----------
   Shared contract section 6: the www look from property-data feat/www-look (Manrope and
   Newsreader, navy #092b55, the site header and footer). Everything here is scoped to
   html[data-mode="public"] or to elements only the public version has, so the consultant tool
   keeps its own look. The two typefaces are self-hosted in assets/fonts/ (the same Latin woff2
   files www serves, SIL Open Font License beside them) and only download when this look is on.
   The main site’s gold accent is left out, as contract section 11 keeps that hue off this page. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(assets/fonts/manrope-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope Fallback'; src: local("Arial"); ascent-override: 103.31%; descent-override: 29.07%; line-gap-override: 0.00%; size-adjust: 103.19%; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(assets/fonts/newsreader-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader Fallback'; src: local("Times New Roman"); ascent-override: 69.68%; descent-override: 25.12%; line-gap-override: 0.00%; size-adjust: 105.48%; }

html[data-mode="public"] {
  --page: #f5f1e9;          /* www paper */
  --card: #ffffff;
  --tile: #fffaf1;          /* www cream */
  --ink: #17283d;           /* www ink */
  --ink2: #5a6779;          /* www muted, one step darker: 5.1:1 on the paper */
  --ink3: #8193a6;
  --line: rgba(9, 43, 85, .16);
  --field: rgba(9, 43, 85, .45);
  --soft: #ece6da;
  --blue: #092b55;          /* www navy: buttons */
  --blue-hover: #164f8d;
  --blue-text: #164f8d;     /* www blue: links */
  --blue-soft: rgba(9, 43, 85, .06);
  --focus: rgba(22, 79, 141, .8);
  --emerald: #164f8d;       /* the range bar and bars take the www blue */
  --emerald-ink: #164f8d;
  --emerald-soft: rgba(22, 79, 141, .12);
  --blue-bg: #dce9f3;       /* www sky */
  --blue-fg: #092b55;
  --gray-bg: #ece6da; --gray-fg: #3d4a5c;
  --navy: #092b55; --navy-deep: #061f3f; --sky: #dce9f3;
  --radius: 4px;
  --font: 'Manrope', 'Manrope Fallback', Arial, sans-serif;
  --serif: 'Newsreader', 'Newsreader Fallback', Georgia, serif;
}
html[data-mode="public"] body { letter-spacing: 0; }
/* The main site's header is taller than the hub's top bar: in-page jumps land below it. */
html[data-mode="public"] :is(.result-wrap, #consult) { scroll-margin-top: 96px; }
/* ...and so do error links and keyboard focus (WCAG 2.2 focus not obscured; review F6). */
html[data-mode="public"] { scroll-padding-top: 96px; }
/* Subheads in the www serif, as the main site sets them (shared contract section 6; review F14). */
html[data-mode="public"] :is(.group-title, .r-sec > h3, #consultTitle) { font-family: var(--serif); }
html[data-mode="public"] :is(select, .custom-area input, .postal-row input, .seg .opt, .tile, .r-sec .fold, .ask-cards, .ask-empty, .disclaimer,
  .block-summary, .stale-note, .table-wrap, table.ev, .sk, .btn, .notice, .toast) { border-radius: var(--radius); }
html[data-mode="public"] .btn-primary:disabled { background: rgba(9, 43, 85, .35); }
html[data-mode="public"] :is(.group-title, .r-sec > h3, .gate h2, .noest-title) { color: var(--navy); }
html[data-mode="public"] h1 { font-weight: 500; }

/* The navy page hero, full width without widening the page. */
html[data-mode="public"] .hero {
  text-align: left; color: #fff; background: var(--navy);
  box-shadow: 0 0 0 100vmax var(--navy); clip-path: inset(0 -100vmax);
  margin-bottom: 28px; padding: clamp(40px, 8vw, 80px) 0 clamp(36px, 6vw, 60px);
}
html[data-mode="public"] .hero .eyebrow { color: #b9d2e8; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
html[data-mode="public"] .hero h1 { color: #fff; font-size: clamp(38px, 8.5vw, 70px); line-height: 1.02; letter-spacing: -.045em; }
html[data-mode="public"] .hero .lede { margin-left: 0; color: #d4e0eb; font-size: clamp(16px, 2.2vw, 19px); line-height: 1.6; letter-spacing: 0; }
.hero-consult { margin: 22px 0 0; font-size: 15px; color: #d4e0eb; }
.hero-consult a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: .22em; }
html[data-mode="public"] .hero :focus-visible { outline-color: #fff; }

/* The main site's header (www SiteHeader). */
.www-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.www-header {
  position: sticky; top: 0; z-index: 12; padding-top: env(safe-area-inset-top);
  background: var(--navy-deep); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .19);
  box-shadow: 0 10px 30px rgba(6, 31, 63, .18);
}
.www-header-inner { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.www-header a { color: #fff; }
.www-header a:hover { text-decoration: none; }
.www-header :focus-visible, .www-footer :focus-visible { outline-color: #fff; }
.www-brand { display: inline-flex; align-items: center; min-height: 44px; flex: none; color: #fff; }
.www-wordmark { font-size: 28px; font-weight: 900; letter-spacing: -.025em; line-height: 1; }
.www-nav { display: none; }
.www-cta {
  display: inline-flex; align-items: center; justify-content: center; margin-left: auto; min-height: 44px; padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, .3); font-size: 13px; font-weight: 800; line-height: 1.15; text-align: center;
  max-width: 132px;   /* two short lines on a 320 px phone, beside the wordmark and the menu */
}
.www-cta:hover { background: #fff; color: var(--navy) !important; }
.www-header summary { list-style: none; cursor: pointer; }
.www-header summary::-webkit-details-marker { display: none; }
.www-menu { position: relative; flex: none; }
.www-menu > summary {
  display: grid; place-items: center; min-height: 44px; padding: 0 13px; border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.www-menu-panel {
  position: absolute; top: 52px; right: 0; display: grid; width: min(310px, calc(100vw - 32px)); max-height: calc(100vh - 110px);
  overflow: auto; padding: 10px 15px 14px; background: var(--navy-deep); border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.www-menu-panel a, .www-menu-group > summary { display: block; padding: 12px 8px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 14px; font-weight: 700; }
.www-menu-group > summary::after { content: "+"; float: right; font-weight: 500; }
.www-menu-group[open] > summary::after { content: "\2212"; }
.www-menu-group > div { display: grid; padding: 4px 0 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.www-menu-group > div a { padding: 12px 8px; border-bottom: 0; border-left: 1px solid rgba(255, 255, 255, .14); font-weight: 600; }
.www-menu-title { margin: 10px 0 2px; padding: 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #b9d2e8; }
.www-header a[aria-current="page"] { text-decoration: underline; text-underline-offset: .25em; }

/* The main site's footer (www SiteFooter), after this page's own footer and its disclaimer. */
.www-footer { padding: 48px 0 calc(28px + env(safe-area-inset-bottom)); background: var(--navy-deep); color: #fff; }
.www-footer a { color: #c4d1de; }
.www-footer a:hover { color: #fff; text-decoration: none; }
.www-footer .www-brand { color: #fff; }
.www-footer-top { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.www-footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; font-weight: 700; }
.www-footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.www-footer-bottom { display: flex; flex-direction: column; gap: 10px; margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .19); color: #8193a6; font-size: 12px; }
.www-footer-bottom p { margin: 0; }
html[data-mode="public"] .foot { margin-top: 48px; }
html[data-mode="public"] .foot-disclaimer h2 { font-size: 15px; color: var(--navy); }
html[data-mode="public"] .foot-disclaimer p { color: var(--ink); font-size: 14px; }
html[data-mode="public"] .foot-disclaimer p + p { margin-top: 8px; }
html[data-mode="public"] .foot-disclaimer .foot-data { color: var(--ink2); font-size: 13px; }

/* "Talk to a PLB consultant" (shared contract section 4). */
.consult { margin-top: 28px; padding: clamp(22px, 5vw, 44px); }
.consult-head h2 { font-size: clamp(28px, 5vw, 40px); font-weight: 600; line-height: 1.08; letter-spacing: -.04em; color: var(--navy); }
.consult-head p { max-width: 620px; margin: 12px 0 0; color: var(--ink2); }
/* The label above the heading, as on the main site's consult form. */
.consult-head .consult-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-text); }
/* Each field's own error, under it and tied to it (aria-describedby; review F15). */
.consult-field-error { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--red-fg); }
.consult-preview { margin: 18px 0 0; padding: 12px 16px; border-left: 3px solid var(--navy); background: var(--tile); font-size: 14px; color: var(--ink); }
.consult-form { display: grid; gap: 20px; margin-top: 24px; }
.consult-intent { min-width: 0; margin: 0; padding: 0; border: 0; }
.consult-intent legend { margin: 0 0 12px; padding: 0; font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--navy); }
.consult-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.consult-choice {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 12px 14px;
  border: 1px solid var(--field); border-radius: var(--radius); background: var(--card);
}
.consult-choice:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 3px 0 var(--navy); background: var(--blue-soft); }
.consult-choice input { position: relative; z-index: 1; flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--navy); }
.consult-choice label { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.2; cursor: pointer; }
/* The whole tile picks the option. */
.consult-choice label::after { content: ""; position: absolute; inset: 0; }
.consult-fields { display: grid; gap: 18px; }
.consult input[type="text"], .consult input[type="tel"], .consult input[type="email"], .consult textarea {
  display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 16px; border: 1px solid var(--field);
  border-radius: var(--radius); background: var(--card); color: var(--ink); font: inherit; font-size: 17px;
}
.consult textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.consult :is(input, textarea):focus-visible { outline: none; border-color: var(--blue-text); box-shadow: 0 0 0 3px var(--focus); }
.consult-check { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tile); }
.consult-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--navy); }
.consult-check label { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.45; cursor: pointer; }
.consult-check .field-hint { margin: 4px 0 0; }
.consult-check a, .consult-errors a { color: var(--blue-text); text-decoration: underline; text-underline-offset: .2em; }
.consult-extra { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.consult-errors { padding: 14px 18px; border: 1px solid var(--red-fg); border-left-width: 3px; background: var(--card); font-size: 15px; outline: none; }
.consult-errors h3 { margin: 0 0 6px; font-size: 16px; color: var(--red-fg); }
.consult-errors p { margin: 0 0 6px; }
.consult-errors ul { margin: 0; padding-left: 20px; }
.consult-errors a { color: var(--red-fg); font-weight: 700; }
.consult-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.consult-actions .btn { width: 100%; }
.consult-status { margin: 0; font-size: 15px; color: var(--ink2); }
.consult-status:empty { display: none; }
.consult-sent { margin-top: 24px; padding: 18px 20px; border: 1px solid var(--navy); border-radius: var(--radius); outline: none; }
.consult-thanks { margin: 0; font-size: 19px; font-weight: 600; color: var(--navy); }
.consult-ref { margin: 8px 0 0; color: var(--ink2); }

/* ---------- wider screens ---------- */
@media (min-width: 640px) {
  .consult-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .consult-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .consult-actions .btn { width: auto; min-width: 240px; }
  .fields.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); }
  .fields.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .cta .btn-primary { width: auto; min-width: 240px; }
  .cta .form-error { margin: 0; }
}

/* ---------- phones ---------- */
@media (max-width: 639px) {
  body { font-size: 16px; }
  .brand-text strong { display: none; }
  .brand-text small { font-size: 15px; font-weight: 600; color: var(--ink); }
  .user .who { display: none; }
  .tiles, .tiles.two, .sk-tiles { grid-template-columns: minmax(0, 1fr); }
  .sk-grid { grid-template-columns: minmax(0, 1fr); }
  /* Label and figure share a line when they fit; a long figure drops below its label. */
  .tile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 12px; padding: 16px; }
  .tile-label { white-space: nowrap; }
  .tile-value { margin: 0; font-size: 24px; }
  .tile-sub { flex-basis: 100%; margin-top: 4px; }
  /* The tiers stack in one block, Conservative on top; each tier and its price share a line, and
     the block stays short enough that the actions are not pushed far down (design review M6). */
  .ask-cards { grid-template-columns: minmax(0, 1fr); }
  .ask-card + .ask-card { border-left: 0; border-top: 1px solid var(--line); }
  .ask-card { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 13px 16px; }
  .ask-name { grid-column: 1; grid-row: 1; }
  .ask-price { grid-column: 2; grid-row: 1; margin: 0; font-size: 20px; }
  .ask-speed, .ask-facts { grid-column: 1 / -1; }
  .ask-facts { margin-top: 6px; padding-top: 0; border-top: 0; gap: 2px; }
  .fold summary { padding: 14px 16px; }
  .fold-body { padding: 0 16px 16px; }
  .actions .btn { flex: 1 1 140px; }
  .phone-only { display: inline; }
  .custom-area input { max-width: none; }
}

@media (min-width: 761px) {
  .www-header-inner { min-height: 80px; gap: clamp(16px, 2vw, 32px); }
  .www-wordmark { font-size: clamp(30px, 2.25vw, 38px); }
  .www-cta { max-width: none; padding: 0 20px; font-size: 14px; white-space: nowrap; }
  .www-footer-bottom { flex-direction: row; justify-content: space-between; }
}
/* The full header navigation appears where www shows it. */
@media (min-width: 1181px) {
  .www-nav {
    display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: clamp(13px, 1.35vw, 22px);
    min-width: 0; margin-left: auto; font-size: clamp(14px, 1vw, 16px); font-weight: 700;
  }
  .www-nav > a, .www-drop > summary { white-space: nowrap; opacity: .8; }
  .www-nav > a:hover, .www-drop > summary:hover, .www-drop[open] > summary { opacity: 1; }
  .www-cta { margin-left: 0; }
  .www-menu { display: none; }
  .www-drop { position: relative; }
  .www-drop > summary::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
  }
  .www-drop-panel {
    position: absolute; top: 34px; left: -18px; z-index: 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(690px, calc(100vw - 48px)); background: var(--navy-deep); border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .34);
  }
  .www-drop-valuation { grid-template-columns: minmax(0, 1fr); width: 240px; padding: 12px 20px 16px; }
  .www-drop-group { display: grid; align-content: start; padding: 18px 20px 20px; }
  .www-drop-group + .www-drop-group { border-left: 1px solid rgba(255, 255, 255, .12); }
  .www-drop-title { margin: 0 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #b9d2e8; }
  .www-drop-links { display: grid; }
  .www-drop-links a { padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 14px; opacity: .85; }
  .www-drop-links a:hover { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- print: the result, its evidence and the disclaimer only ---------- */
.print-head { display: none; }
@media print {
  @page { margin: 14mm; }
  body { background: #fff; font-size: 11pt; min-width: 0; }
  .topbar, .hero, .gate, .notice, #loading, #picker, .how, .actions, .skip, .toast, .stale-note,
  .foot-sources, .foot-meta, .phone-only, noscript, .www-header, .www-footer, #consult, .view-listing, .r-more { display: none !important; }
  main { max-width: none; padding: 0; }
  .result-wrap { margin: 0; }
  .card, .result { box-shadow: none; padding: 0; animation: none; }
  .result.is-stale > * { opacity: 1; }
  .print-head { display: block; margin: 0 0 12px; font-size: 10pt; color: var(--ink2); text-align: left; }
  .r-figure { font-size: 34pt; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { display: block; }
  .ask-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); break-inside: avoid; }
  .ask-card { display: block; padding: 10px 12px; }
  .ask-price { font-size: 16pt; }
  /* Listing rows are internal only (contract 12 rule 2); a printout is what goes
     to a client, so it carries the three prices and their basis but never the listings (review M5). */
  .r-sec.ask-list, .ask-found { display: none !important; }
  .print-only { display: block; }
  /* The ring's blurred shadow printed as a grey square (design review L1). */
  .rb-mark { box-shadow: 0 0 0 3px var(--ink); }
  table.ev.listings, table.ev.listings-out { min-width: 0; font-size: 8pt; }
  .tile-value { text-align: left; }
  .r-sec { margin-top: 18px; break-inside: avoid-page; }
  .r-sec .fold { background: none; }
  .fold summary { padding: 6px 0; min-height: 0; }
  .fold summary .chev { display: none; }
  /* A fold opened for printing starts its fade-in at opacity 0; print it as it ends. */
  .fold-body, .fold[open] > .fold-body { padding: 0; animation: none; opacity: 1; }
  .table-wrap { overflow: visible; }
  table.ev, table.ev.rent { min-width: 0; font-size: 8pt; }
  /* Fit an A4 page: cells may wrap, and the street under each block is left out. */
  .ev th, .ev td { padding: 4px 5px; white-space: normal; }
  .ev .st { display: none; }
  .rb-range, .rb-mark { animation: none; }
  .foot { margin-top: 16px; border: 0; }
  .foot-inner { padding: 0; }
  a { color: var(--ink); }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}