/* The fonts are hosted with the site (Geist and Geist Mono, and Unbounded for the logo; all under the
   SIL Open Font License), so no visitor data goes to a font service. */
@font-face { font-family: 'Unbounded'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/unbounded-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/geist-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/geist-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/geist-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/geist-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/geist-mono-latin-500-normal.woff2') format('woff2'); }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; }
[hidden] { display: none !important; }

/* The look: crisp and technical. A white page, near-black type set large and tight, thin grey rules
   between sections, square-cornered boxes with hairline borders, and small capital labels in a
   typewriter face. One dark band and one dark card carry the weight; lime is the one main action.
   Colour roles: near-black = text and ordinary buttons, lime = the main action, cobalt = Seeka itself
   (the logo, the accent line in a heading), blue = official data, violet = Seeka's own estimates,
   green / amber / orange / red (always with a word and a shape) = status.
   Motion: the logo's tick draws itself, the home page's check list ticks itself off, a line of data
   sources drifts past, one spoke of the sources diagram lights at a time, and cards in the dark band
   drift slowly. Buttons lift when pointed at. All of it stops for people who ask for less motion. */
:root {
  --bg: #ffffff; --solid: #ffffff; --panel: #ffffff; --panel2: #f3f4f6; --surface: #f9fafb;
  --line: #e7e7ea; --line2: #d1d5db; --track: #e5e7eb;
  --fg: #0e1116; --ink2: #374151; --muted: #5f6672; --dim: #9ca3af; --dim-ink: #5f6672; /* --dim is for dots and rings only: too faint for words */
  --cobalt: #3d5afe; --lime: #c8f545; --lime-ink: #1f2d05; --dark: #0e1116;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --accent: #1257a6; --accent-ink: #ffffff; --model: #5b3fd1;
  --good: #0f7b55; --check: #8f5f00; --warn: #c2410c; --bad: #c02626;
  --font: 'Geist', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: var(--font); --body: var(--font);
  --r: 6px; --r-sm: 4px; --r-pill: 4px; --pad: 22px;
  --shadow: none;
  --lift: 0 1px 2px rgba(14, 17, 22, 0.04), 0 10px 26px -10px rgba(14, 17, 22, 0.16);
  --glow: 0 4px 16px -4px rgba(140, 200, 30, 0.55);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
body { color: var(--fg); background: var(--bg); font-family: var(--body); font-size: 15.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; text-wrap: balance; line-height: 1.06; letter-spacing: -0.035em; }
h1 { font-size: clamp(30px, 4.4vw, 46px); }
.h2 { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.big { font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
/* small capital labels in the typewriter face */
.lab { font-family: var(--mono); font-weight: 400; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.field > .lab, .tick .lab { font-family: var(--font); font-weight: 500; font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--ink2); }
.muted { color: var(--muted); }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 32px; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 4px; }

/* top bar: stays at the top, see-through white, and gains a hairline once the page has scrolled */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.scrolled .nav { border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; gap: 4px 20px; min-height: 62px; flex-wrap: wrap; padding-block: 8px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-family: 'Unbounded', var(--font); font-weight: 700; font-size: 18px; letter-spacing: -0.04em; color: var(--fg); text-decoration: none; margin-right: 10px; }
.logo span { transform: translateY(-1px); }
.logo-tag { font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--panel2); padding: 2px 6px; border-radius: 2px; margin-left: -18px; }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; }
.tab { position: relative; padding: 6px 10px; border-radius: var(--r-sm); font-size: 14px; font-weight: 400; color: var(--muted); text-decoration: none; transition: color 0.15s; }
.tab:hover { color: var(--fg); }
.tab[aria-current="page"] { color: var(--fg); font-weight: 500; }
.tab[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 1px; height: 3px; background: var(--lime); border-radius: 1px; }
.tab .count { font-size: 11.5px; font-weight: 600; margin-left: 6px; padding: 1px 7px; border-radius: 2px; background: var(--fg); color: #fff; }
.nav .right { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: 8px; }
.nav .btn.ghost { border-color: transparent; background: none; color: var(--muted); }
.nav .btn.ghost:hover { color: var(--fg); background: none; transform: none; }
.who { display: inline-flex; align-items: center; gap: 8px; max-width: 240px; padding: 4px 12px 4px 5px; border-radius: var(--r-sm); border: 1px solid var(--line); text-decoration: none; font-size: 13.5px; font-weight: 500; color: var(--ink2); min-width: 0; transition: border-color 0.15s, color 0.15s; }
.who:hover { border-color: var(--line2); color: var(--fg); }
.who i { flex: none; width: 24px; height: 24px; border-radius: 3px; background: var(--fg); color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 600; font-size: 12px; text-transform: uppercase; }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the logo: the bubble pops in, the tick draws itself; hovering does both again */
.mark { display: block; overflow: visible; flex: none; }
.mk-bubble, .mk-dot { transform-box: view-box; }
.mk-bubble { transform-origin: 31px 115px; }
.mk-tick { stroke-dasharray: 1 1.3; stroke-dashoffset: 0; }
.first .logo .mk-bubble, .logo:hover .mk-bubble, .mark.again .mk-bubble { animation: mk-pop 0.55s var(--spring) both; }
.first .logo .mk-tick, .logo:hover .mk-tick, .mark.again .mk-tick { animation: mk-draw 0.45s var(--ease-out) 0.3s both; }
@keyframes mk-pop { from { transform: scale(0.55) rotate(-10deg); } }
@keyframes mk-draw { from { stroke-dashoffset: 1.15; } }
.mark.typing .mk-dot { animation: mk-type 1.1s ease-in-out infinite; }
.mark.typing .mk-dot:nth-of-type(2) { animation-delay: 0.16s; }
.mark.typing .mk-dot:nth-of-type(3) { animation-delay: 0.32s; }
@keyframes mk-type { 0%, 60%, 100% { transform: translateY(0); opacity: 0.55; } 30% { transform: translateY(-9px); opacity: 1; } }
.wait .mark { animation: mk-bob 2.2s ease-in-out infinite; }
@keyframes mk-bob { 50% { transform: translateY(-5px); } }

/* fields and dropdowns */
select, .inp {
  appearance: none; -webkit-appearance: none; background-color: #fff; border: 1px solid var(--line2); border-radius: var(--r-sm);
  padding: 10px 14px; font-size: 15.5px; font-weight: 400; min-width: 0; max-width: 100%; width: 100%; transition: border-color 0.2s, box-shadow 0.2s;
}
select {
  padding-right: 38px; cursor: pointer; text-overflow: ellipsis;
  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 d='M1 1.5l5 5 5-5' fill='none' stroke='%235f5f5f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
select:hover, .inp:hover { border-color: rgba(21, 21, 21, 0.32); }
.inp::placeholder { color: var(--dim-ink); opacity: 1; }
.inp:focus-visible, select:focus-visible { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px rgba(21, 21, 21, 0.08); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; background: #fff; border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 10px 14px; font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.menu > summary::-webkit-details-marker, .sec > summary::-webkit-details-marker { display: none; }

input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--fg); flex: none; }
.chev { flex: none; transition: transform 0.3s var(--spring); color: var(--dim); }
details[open] > summary .chev { transform: rotate(180deg); }

/* buttons, chips, tags. Near-black is the ordinary button, white with a border the quieter one beside
   it, and lime the one main action on a page. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--fg); color: #fff; padding: 10px 16px; font-weight: 500; font-size: 14.5px; line-height: 1.35; cursor: pointer; text-decoration: none; text-align: center; transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s, box-shadow 0.15s, border-color 0.15s; }
.btn:hover { background: #2a2d34; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: #fff; color: var(--fg); border-color: var(--line2); }
.btn.ghost:hover { background: var(--surface); border-color: #9ca3af; }
.btn.go, .btn.model { background: var(--lime); color: var(--lime-ink); font-weight: 600; box-shadow: var(--glow); }
.btn.go:hover, .btn.model:hover { background: #d2fa5c; box-shadow: 0 10px 26px -6px rgba(140, 200, 30, 0.7); }
.btn.go::after { content: "→"; transition: transform 0.2s; }
.btn.go:hover::after { transform: translateX(3px); }
.btn.sm { padding: 6px 12px; font-size: 13.5px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: default; transform: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 3px 9px; border-radius: 3px; white-space: nowrap; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.chip.ok { color: var(--good); background: color-mix(in srgb, var(--good) 10%, #fff); }
.chip.check { color: var(--check); background: color-mix(in srgb, #e0a100 16%, #fff); }
.chip.check i { border-radius: 1px; }
.chip.warn { color: #a83608; background: color-mix(in srgb, var(--warn) 11%, #fff); }
.chip.serious { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, #fff); }
.chip.warn i, .chip.serious i { border-radius: 0; transform: rotate(45deg); }
.chip.plain { color: var(--fg); background: var(--panel2); }
.tag { display: inline-flex; font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; white-space: nowrap; vertical-align: middle; }
.tag.official { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); }
.tag.model { color: var(--model); background: color-mix(in srgb, var(--model) 9%, #fff); }
.tag.listing { color: var(--fg); background: var(--panel2); }

/* dials */
.ring { position: relative; aspect-ratio: 1; flex: none; }
.ring svg { width: 100%; height: 100%; display: block; }
.ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring.xl { width: 124px; }
.ring.xl .big { font-size: 44px; }
.ring.xl small { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; font-weight: 500; margin-top: 4px; text-transform: lowercase; }
.ring.md { width: 74px; }
.ring.md .big { font-size: 18px; }
.ring.sm { width: 50px; }
.ring.sm .big { font-size: 17px; }

main { padding-block: 22px 72px; }
.view, .stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.lead { margin-top: 16px; color: var(--muted); font-size: 17.5px; line-height: 1.5; }
.empty { padding: 30px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line2); border-radius: var(--r); }

/* cards: white, a hairline border, and a quiet strip across the top that says what the card is */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--pad); min-width: 0; overflow: hidden; }
.card-hd, .panel > .lab:first-child, .unlock > div:first-child > .beta:first-child, .offer > div:first-child > .beta:first-child {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 18px; padding: 9px var(--pad);
  background: var(--surface); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; font-weight: 400; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- home page ---------- */
.home { display: flex; flex-direction: column; min-width: 0; }

.lead b { color: var(--fg); font-weight: 500; }
.checkbox { width: 100%; max-width: 520px; margin-top: 28px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.checkbox > .lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.paste { display: flex; gap: 8px; padding: 6px; background: #fff; border-radius: var(--r); border: 1px solid var(--line2); transition: box-shadow 0.15s, border-color 0.15s; }
.paste:focus-within { border-color: var(--fg); box-shadow: 0 0 0 3px rgba(14, 17, 22, 0.07); }
.paste .inp { flex: 1 1 auto; width: auto; min-width: 0; border: 0; background: none; padding: 10px 6px 10px 12px; font-size: 16px; border-radius: var(--r-sm); }
.paste .inp:focus-visible { box-shadow: none; }
.paste .btn { padding: 11px 20px; font-size: 15px; flex: 0 0 auto; }
.paste-msg { font-size: 13px; color: var(--muted); }
.paste-msg.err { color: var(--bad); font-weight: 500; }
.fresh { margin-top: 2px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--muted); min-height: 1.5em; }
.usedby { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 14px; color: var(--ink2); }
.usedby b { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.usedby i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 16%, #fff); animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

.bits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 0; list-style: none; }
.bits li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink2); border: 1px solid var(--line); border-radius: 2px; padding: 6px 12px; background: #fff; }
.bits.round li { border-radius: var(--r-pill); font-size: 13px; color: var(--fg); padding: 5px 12px; }
.bits li.more { border-style: dashed; color: var(--muted); }
.bits li .chip-note { font-size: 12px; font-weight: 600; color: var(--muted); }
.bits svg { flex: none; color: var(--muted); }

/* the dark card beside the heading: the steps of a check, ticking themselves off */
/* the process panel in the hero: what Seeka does with a link, in four steps */
.proc { align-self: stretch; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--lift); overflow: hidden; }
.proc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--surface); }
.proc-steps { list-style: none; margin: 0; padding: 10px 22px 8px; }
.proc-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 6px 14px; align-items: start; padding: 14px 0; animation: proc-in 0.45s var(--ease-out) both; animation-delay: calc(0.12s + var(--i) * 0.16s); }
.proc-step:not(.end)::before { content: ""; position: absolute; left: 15.5px; top: 46px; bottom: -14px; width: 1px; background: var(--line2); }
.proc-n { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 4px; border: 1px solid var(--line2); background: #fff; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--fg); }
.proc-step.end .proc-n { background: var(--lime); border-color: color-mix(in srgb, var(--lime) 70%, #7a9a20); color: var(--lime-ink); font-weight: 500; }
.proc-tx { min-width: 0; padding-top: 4px; }
.proc-tx b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.proc-d { display: block; margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--muted); }

.proc-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.proc-src i { font-style: normal; font-size: 12.5px; color: var(--ink2); border: 1px solid var(--line); border-radius: 2px; padding: 2px 8px; background: #fff; }
.proc-step > .tag { margin-top: 7px; }
.proc-foot { padding: 12px 22px; border-top: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--muted); }
@keyframes proc-in { from { opacity: 0; transform: translateY(6px); } }

/* a line of the data sources, drifting past */

.nb { white-space: nowrap; }
.still .usedby i, .still .beta::before { animation-play-state: paused; }


/* sections: a hairline above, a large heading, room to breathe */
.sect { border-top: 1px solid var(--line); padding: clamp(48px, 7vw, 84px) 0; min-width: 0; }
.sect h2, .cta h2 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.04em; }
.sect .lead { margin-top: 18px; max-width: 54ch; font-size: 16.5px; color: var(--muted); }
.sect.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.asks { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-style: italic; }
.asks li { display: flex; gap: 10px; }
.asks li::before { content: "›"; font-style: normal; color: var(--muted); }
.home .offer, .home .ext { max-width: none; margin: 0 0 20px; }
.home .recentwrap { margin-bottom: 44px; }

/* the sources diagram: boxes round a centre, one spoke lit at a time */



/* the dark band: what a complete check holds, on cards that drift slowly */

@supports (border-image: conic-gradient(#000 0 0) fill 0 / 0 / 1px 100vmax) {
  /* the background colour stays, so the text always has its dark ground; the image paints the full width in one piece, a pixel past the top and bottom */

}


/* the price card */
.sect.price { text-align: center; }
.sect.price .fine { margin: 20px auto 0; max-width: 52ch; }

/* three steps, and rows that lead somewhere */
.sect.steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }

.rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rows a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px; background: #fff; text-decoration: none; font-weight: 500; font-size: 15px; transition: border-color 0.15s, transform 0.15s; }
.rows a:hover { border-color: var(--fg); transform: translateX(2px); }
.rows a::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 18px; line-height: 1; }
.rows a i { flex: none; width: 32px; height: 32px; border-radius: 3px; background: var(--panel2); display: grid; place-items: center; color: var(--ink2); }

/* a person to talk to */
.person { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.person-art { background: var(--surface); border-right: 1px solid var(--line); display: grid; place-items: center; padding: 28px; min-height: 220px; }
.person-tx { padding: 28px 30px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.person-tx h3 { font-size: 22px; letter-spacing: -0.03em; }
.person-tx p { color: var(--muted); font-size: 15px; max-width: 52ch; }
.person-tx .actions { margin-top: 6px; }
.mailbtn svg { flex: none; }

/* questions that open and close */
.faqs { margin-top: 36px; border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 2px; cursor: pointer; font-size: 18px; font-weight: 500; letter-spacing: -0.015em; }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after { content: "+"; flex: none; font-size: 20px; font-weight: 300; color: var(--muted); transition: transform 0.2s; }
.faq[open] > summary::after { transform: rotate(45deg); }
.faq > div { padding: 0 2px 22px; max-width: 74ch; color: var(--ink2); font-size: 15.5px; display: flex; flex-direction: column; gap: 10px; }
.faq a { color: var(--accent); text-underline-offset: 2px; }

/* the last word */
.cta { margin: 0 0 clamp(40px, 6vw, 72px); background: var(--dark); color: #fff; border-radius: var(--r-sm); padding: clamp(40px, 7vw, 76px) 28px; text-align: center; position: relative; overflow: hidden; }
.cta > * { position: relative; }
.cta p { margin: 16px auto 0; max-width: 46ch; color: #c3c8d2; font-size: 16.5px; }
.cta .actions { justify-content: center; margin-top: 28px; gap: 10px 20px; }
.cta .btn { padding: 14px 26px; font-size: 15px; }
.cta .under { color: #fff; font-size: 14px; text-underline-offset: 4px; }

#app[data-enter] .hgrid > *, #app[data-enter] > .offer, #app[data-enter] > .card, #app[data-enter] .recent > *, #app[data-enter] .report > :not(.pp), #app[data-enter] .pp-head, #app[data-enter] .pp-stick > *, #app[data-enter] .pp-body > * { animation: fade-up 0.5s var(--ease-out) both; }

#app[data-enter] :is(.report, .pp-body) > :nth-child(6) { animation-delay: 0.4s; }
#app[data-enter] :is(.report, .pp-body) > :nth-child(n + 7) { animation-delay: 0.48s; }
#app[data-enter] .pp-head { animation-delay: 0.06s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }
#app[data-enter] .ring circle + circle { animation: ring-draw 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both; }
@keyframes ring-draw { from { stroke-dasharray: 0 400; } }

.beta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt); animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.offer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; max-width: 760px; margin-inline: auto; }
.offer h2 { font-size: clamp(21px, 2.6vw, 26px); }
.offer p { color: var(--muted); margin-top: 8px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.offer .actions { margin-top: 0; }

.ticks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: rgba(21, 21, 21, 0.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.8' fill='none' stroke='%23151515' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.rc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); text-decoration: none; min-width: 0; transition: transform 0.3s var(--spring), box-shadow 0.2s; }
.rc:hover { transform: translateY(-2px); box-shadow: var(--lift); }
.rc b { display: block; font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc span { display: block; color: var(--muted); font-size: 13.5px; }
.rc > div:last-child { min-width: 0; }

/* ---------- property page ---------- */
.crumb { font-size: 14.5px; font-weight: 500; color: var(--muted); text-decoration: none; align-self: flex-start; transition: color 0.2s; }
.crumb:hover { color: var(--fg); }
.report { width: 100%; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.report.stack { max-width: 860px; margin-inline: auto; gap: 20px; }
.sec-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pp-body > .sec-tools { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-top: 6px; }
.linkbtn { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; font-weight: 500; padding: 2px 0; transition: color 0.2s; }
.linkbtn:hover { color: var(--fg); }
.linkbtn:disabled { cursor: default; font-variant-numeric: tabular-nums; }
.linkbtn:disabled:hover { color: var(--muted); }

/* photos: one large picture, and on a wide screen the next two beside it */
.hero { min-width: 0; }
.ph { position: relative; aspect-ratio: 3 / 2; max-width: 100%; background: linear-gradient(165deg, #efeeec, #e3e2df); overflow: hidden; display: grid; place-items: center; }
.ph .art { width: 46%; height: auto; }
.ph.plain .art { width: 34%; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph .cap { position: absolute; right: 14px; top: 14px; font-size: 12.5px; font-weight: 500; color: var(--fg); background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 3px 10px; border-radius: var(--r-pill); }
.hero > .ph { aspect-ratio: auto; height: clamp(180px, 26vw, 300px); border-radius: var(--r); }
.gal { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; height: clamp(250px, 44vw, 480px); }
.gal.trio { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); }
.gal .ph { aspect-ratio: auto; height: 100%; min-height: 0; border-radius: var(--r); box-shadow: 0 0 0 1px var(--line), var(--lift); }
.gal img { transition: opacity 0.25s ease, transform 0.6s cubic-bezier(0.32, 0.72, 0, 1); }
.galside { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; min-height: 0; }
.gal .galthumb { border: 0; padding: 0; cursor: pointer; width: 100%; border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); }
.galthumb:hover img { transform: scale(1.04); }
.galcount { position: absolute; left: 14px; top: 14px; font-size: 13px; font-weight: 500; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 3px 11px; border-radius: var(--r-pill); }
.galbtn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--fg); cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(21, 21, 21, 0.14); transition: transform 0.3s var(--spring); }
.galbtn:hover { transform: translateY(-50%) scale(1.08); }
.galbtn.prev { left: 14px; } .galbtn.next { right: 14px; }
.galbars { position: absolute; left: 20px; right: 20px; bottom: 8px; display: flex; gap: 5px; }
.galbars button { flex: 1; min-width: 0; padding: 12px 0; border: 0; background: none; cursor: pointer; }
.galbars i { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 1px rgba(21, 21, 21, 0.12); }
.galbars button[aria-current="true"] i { background: #fff; box-shadow: 0 0 0 1px rgba(21, 21, 21, 0.38); }

/* the frame: title and detail on the left, the cards on the right */
.pp { display: grid; grid-template-columns: minmax(0, 1fr) 368px; grid-template-areas: "head side" "body side"; gap: 24px 40px; align-items: start; margin-top: 10px; }
.pp-head { grid-area: head; min-width: 0; }
.pp-body { grid-area: body; min-width: 0; gap: 14px; }
.pp-side { grid-area: side; min-width: 0; align-self: stretch; }
.pp-stick { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 961px) and (min-height: 700px) { .pp-stick { position: sticky; top: 92px; } }
#said:empty { display: none; }

.ttl { display: flex; flex-direction: column; gap: 16px; }
.ttl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; }
.ttl-name { min-width: 0; flex: 1 1 280px; }
.ttl h1 { font-size: clamp(27px, 3.6vw, 40px); letter-spacing: -0.03em; }
.ttl-by { margin-top: 8px; color: var(--muted); }
.ask { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.ask .big { font-size: clamp(34px, 5vw, 44px); }
.keyfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 16px; }
.kf { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kf-i { flex: none; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.5); color: var(--muted); display: grid; place-items: center; }
.kf-t { min-width: 0; }
.kf-t b { display: block; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.kf-t span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.kf.none b { color: var(--muted); font-weight: 400; }

/* the Seeka check card: a bar down its left edge in the colour of its result */
.dash { display: flex; flex-direction: column; gap: 18px; }
.dash.st-ok { box-shadow: inset 3px 0 0 var(--good); } .dash.st-check { box-shadow: inset 3px 0 0 #d99a00; } .dash.st-warn { box-shadow: inset 3px 0 0 var(--warn); } .dash.st-serious { box-shadow: inset 3px 0 0 var(--bad); }

.dash .card-hd { margin-bottom: 0; }
.dash-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.band { font-weight: 600; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; }
.dials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; }

.guide .kv { margin-top: -6px; }
.guide .kv li { align-items: baseline; }
.guide .kv .big { font-size: 21px; }

.short { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.short li { display: flex; gap: 12px; align-items: flex-start; }
.short li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; background: var(--dot, var(--dim)); }
.short .ok { --dot: var(--good); } .short .check { --dot: #d99a00; } .short .warn { --dot: var(--warn); } .short .serious { --dot: var(--bad); } .short .model { --dot: var(--model); }
.short b, .note b, .confirm b { font-weight: 600; }

/* save (the heart) */
.heart svg { flex: none; transition: transform 0.3s var(--spring); }
.heart:hover svg { transform: scale(1.15); }
.heart.on { color: var(--cobalt); }
.heart.on svg path { fill: currentColor; }
.btn.heart.on { background: color-mix(in srgb, var(--cobalt) 9%, #fff); color: var(--cobalt); }
.ttl-top .actions { margin-top: 0; }
.nearby { align-self: flex-start; padding: 2px 4px; }

/* ---------- my homes ---------- */
.report.homes { gap: 20px; }

.tick { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 16px; }
.hcard { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; transition: transform 0.3s var(--spring), box-shadow 0.2s; }
.hcard:hover { transform: translateY(-3px); box-shadow: var(--lift); }
.hc-main { display: flex; flex-direction: column; flex: 1; text-decoration: none; min-width: 0; }
.hcard .ph { aspect-ratio: 3 / 2; }
.hcard .ph.plain { aspect-ratio: 5 / 2; }
.hcard .ph img { transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1); }
.hcard:hover .ph img { transform: scale(1.04); }
.hc-score { position: absolute; left: 10px; top: 10px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hc-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 12px; flex: 1; min-width: 0; }
.hc-price { font-size: 24px; }
.hc-name { font-weight: 500; line-height: 1.3; margin-top: 4px; }
.hc-facts { font-size: 13.5px; color: var(--muted); }
.hc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hcard > .heart { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--fg); box-shadow: 0 2px 8px rgba(21, 21, 21, 0.12); }
.hcard > .heart.on { color: var(--cobalt); }
.hc-chips { align-items: center; }
.hc-date { font-size: 13px; color: var(--muted); }
.rc-foot { padding: 0 16px 8px; font-size: 13.5px; }
.rc-foot a { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.rc-foot a:hover { color: var(--fg); }
.note-state { margin-top: 6px; }
.pick { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.2s; }
.pick:hover { background: var(--panel2); }
.pick small { margin-left: auto; font-weight: 400; color: var(--muted); }
.pick.off { cursor: default; color: var(--dim-ink); }
.pick.off:hover { background: none; }
.cmpbar { position: sticky; bottom: 14px; z-index: 20; align-self: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 22px; max-width: 100%; padding: 10px 12px 10px 20px; background: var(--fg); color: #fff; border-radius: var(--r); box-shadow: var(--lift); animation: fade-up 0.35s var(--ease-out) both; }
.cmpbar .actions { margin-top: 0; }
.cmpbar .btn { background: var(--lime); color: var(--fg); }
.cmpbar .btn:hover { background: #d6fb62; }
.cmpbar .btn.ghost { background: rgba(255, 255, 255, 0.14); color: #fff; }
.cmpbar .btn.ghost:hover { background: rgba(255, 255, 255, 0.24); color: #fff; }

/* ---------- compare ---------- */
.report.compare { gap: 18px; }
.cmp-wrap { margin-top: 0; padding-bottom: 6px; }
.cmp { table-layout: fixed; min-width: calc(150px + var(--cols) * 230px); font-size: 14.5px; }
.cmp .k { width: 150px; text-align: left; font-weight: 500; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--muted); white-space: normal; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); position: sticky; left: 0; z-index: 1; background: var(--bg); }
.cmp thead .k { border-bottom: 0; }
.cmp th.col { padding: 0 8px 14px; border-bottom: 0; vertical-align: top; white-space: normal; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; color: var(--fg); }
.cmp td { padding: 12px 8px; }
.cmp td small { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.cmp td small a, .cmp-x { color: var(--muted); text-underline-offset: 2px; }
.cmp-n { font-size: 20px; }
.cmp .chip { white-space: normal; text-align: left; border-radius: var(--r-sm); }
.cgal { aspect-ratio: 4 / 3; border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); }
.cgal.plain { aspect-ratio: 4 / 3; }
.cgal .galbtn { width: 36px; height: 36px; }
.cgal .galbtn.prev { left: 8px; } .cgal .galbtn.next { right: 8px; }
.cgal .galcount { left: 10px; top: 10px; font-size: 12.5px; }
.cmp-name { display: flex; align-items: center; gap: 10px; margin-top: 12px; text-align: left; font-family: var(--font); letter-spacing: -0.01em; }
.cmp-name > div:last-child { min-width: 0; }
.cmp-name a { font-weight: 600; text-decoration: none; line-height: 1.25; display: block; }
.cmp-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cmp-name small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.cmp-x { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 400; }
.cmp tr.grp td { padding: 26px 0 8px; font-size: 13.5px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line2); }
.lockcell { color: var(--muted); }

/* ---------- tools and the other free pages ---------- */
.facts { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.facts li { display: flex; gap: 10px; align-items: flex-start; }
.facts li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--dim); }
.quick { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; }
.quick a { font-size: 14px; font-weight: 500; text-decoration: none; padding: 5px 12px; border-radius: var(--r-pill); background: var(--panel2); color: #3d3d3d; transition: background-color 0.2s, color 0.2s; }
.quick a:hover { background: rgba(21, 21, 21, 0.09); color: var(--fg); }
.panel > .fields { margin-top: 0; }
textarea.inp { resize: vertical; min-height: 84px; line-height: 1.5; font-family: inherit; }
.ticklist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 24px; }
.ticklist .tick { align-items: flex-start; min-height: 0; padding: 7px 0; font-weight: 400; font-size: 14.5px; }
.ticklist .tick input { margin-top: 3px; }
.ticklist .tick input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--dim); }
.ticks-row { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 10px; }
.rtools { display: flex; flex-wrap: wrap; gap: 8px; }
.sharebox b { margin-bottom: 2px; }
.sharerow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sharerow .inp { flex: 1 1 240px; width: auto; font-size: 14px; padding: 8px 12px; }
.hv-chg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: -6px; font-size: 14px; }
.areaform { max-width: 560px; }
.qa { padding: 14px 0; border-top: 1px solid var(--line); }
.qa:first-child { border-top: 0; }
#askList { margin-top: 10px; }
.qa-q { font-weight: 600; }
.qa-a { margin-top: 6px; white-space: pre-line; }
.askform { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.askform .actions { margin-top: 8px; }
#askMsg .msg { margin-top: 10px; }

/* the one chart: a council area's average price over five years (official figures, in the official blue) */
.chart { margin: 22px 0 0; }
.ch-plot { position: relative; margin-top: 8px; touch-action: pan-y; }
.ch-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-tick { font-size: 12px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.ch-end { font-size: 13px; font-weight: 600; fill: var(--fg); font-variant-numeric: tabular-nums; }
.ch-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-area { fill: var(--accent); fill-opacity: 0.1; stroke: none; }
.ch-dot { fill: var(--accent); stroke: var(--solid); stroke-width: 2; }
.ch-x { stroke: var(--line2); stroke-width: 1; }
.ch-tip { position: absolute; z-index: 2; transform: translate(12px, -50%); pointer-events: none; background: var(--fg); color: #fff; border-radius: var(--r-sm); padding: 7px 11px; font-size: 13px; line-height: 1.3; white-space: nowrap; box-shadow: var(--lift); }
.ch-tip.flip { transform: translate(calc(-100% - 12px), -50%); }
.ch-tip b { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-tip span { opacity: 0.75; }
.ch-table { margin-top: 10px; font-size: 14px; }
.ch-table summary { cursor: pointer; color: var(--muted); font-weight: 500; width: fit-content; }
.ch-table summary:hover { color: var(--fg); }
.cols14 { display: flex; align-items: flex-end; gap: 2px; height: 150px; margin-top: 12px; padding-bottom: 22px; position: relative; border-bottom: 1px solid var(--line); }
.c14 { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.c14 i { display: block; width: 100%; max-width: 24px; min-height: 2px; background: var(--accent); border-radius: 4px 4px 0 0; }
.c14-n { font-size: 12px; font-weight: 600; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.c14-d { position: absolute; bottom: -20px; font-size: 11.5px; color: var(--muted); }

/* the unlock card */
.unlock { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.unlock h2 { font-size: 20px; }
.unlock p { color: var(--muted); margin-top: 8px; font-size: 14.5px; }
.unlock .actions { margin-top: 0; }
.unlock .actions .btn { flex: 1 1 auto; }
.confirm { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; }
.confirm p { margin: 0; color: var(--fg); }
.said p { font-size: 16px; max-width: 74ch; white-space: pre-line; }
.said p + p { margin-top: 10px; }

/* sections that open and close */
.sec { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); min-width: 0; }
.sec > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 15px 20px; cursor: pointer; border-radius: var(--r); transition: background-color 0.2s; }
.sec > summary:hover { background: var(--surface); }
.sec[open] > summary { border-radius: var(--r) var(--r) 0 0; }
.sec .st { font-weight: 600; font-size: 16.5px; letter-spacing: -0.015em; }
.sec .ss { margin-left: auto; color: var(--muted); font-size: 14px; text-align: right; min-width: 0; }
.sec .body { padding: 18px 20px 22px; border-top: 1px solid var(--line); min-width: 0; }
.sec .lrow { display: flex; align-items: center; gap: 14px; padding: 15px 20px; }
.sub { color: var(--muted); font-size: 14.5px; max-width: 72ch; }
.h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.headline { font-size: clamp(21px, 2.8vw, 26px); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; }
.fine { margin-top: 12px; font-size: 13px; color: var(--muted); max-width: 80ch; }
.fine a, .sub a, .note a, .short a, .prose a { color: var(--accent); text-underline-offset: 2px; }
.note { margin-top: 18px; padding: 13px 15px; background: var(--panel2); border-radius: var(--r-sm); font-size: 14px; }

/* price scale */
.scale { margin-top: 22px; }
.track { position: relative; height: 46px; }
.track .axis { position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--line2); border-radius: 2px; }
.track .range { position: absolute; top: 13px; height: 20px; background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 6px; }
.mk { position: absolute; top: 23px; transform: translate(-50%, -50%); }
.mk.median { width: 4px; height: 32px; background: var(--accent); border-radius: 2px; }
.mk.likely { width: 16px; height: 16px; border-radius: 50%; background: var(--model); border: 2px solid var(--solid); }
.mk.willing { width: 16px; height: 16px; border-radius: 50%; background: var(--solid); border: 3px solid var(--model); }
.mk.ask { width: 15px; height: 15px; background: var(--fg); transform: translate(-50%, -50%) rotate(45deg); border: 2px solid var(--solid); }
.ends { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 18px 16px; margin-top: 18px; }
.lg { display: flex; gap: 11px; align-items: flex-start; }
.lg .sw { flex: none; margin-top: 4px; position: relative; width: 16px; height: 16px; }
.lg .sw .mk { top: 8px; left: 8px; }
.lg .sw .mk.median { height: 16px; }
.lg .big { display: block; font-size: 23px; }
.lg span:not(.tag) { font-size: 13px; color: var(--muted); display: block; margin-top: 3px; }
.lg .tag { margin-top: 6px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 10px; margin-top: 14px; }
.tile { background: var(--panel2); border-radius: var(--r-sm); padding: 14px; min-width: 0; }
.tile .big { display: block; font-size: clamp(20px, 5.4vw, 25px); }
.tile span:not(.tag) { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
.tile .tag { margin-top: 8px; }
.tile.key { background: color-mix(in srgb, var(--accent) 7%, #fff); }
/* five figures: the two that matter most on the first row, the three that make them up beneath */
.tiles.split { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tiles.split > .tile { grid-column: span 2; }
.tiles.split > .tile.key { grid-column: span 3; }
.tile.hid .big { color: var(--dim-ink); letter-spacing: 0.02em; }

/* tables */
.scroll { overflow-x: auto; margin-top: 14px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; font-weight: 500; font-size: 13px; color: var(--muted); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line2); white-space: nowrap; }
td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
td.r, th.r { text-align: right; padding-right: 0; padding-left: 12px; }
/* a short table that should fit a phone without scrolling sideways: its headings may wrap */
table.fit th { white-space: normal; vertical-align: bottom; }
tr.used td:first-child { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; }
tr.dim td { color: var(--muted); }
.sold { min-width: 600px; }

/* checks */
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 10px; margin-top: 16px; }
.chk { background: rgba(255, 255, 255, 0.7); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.chk.warn { border-color: color-mix(in srgb, var(--warn) 45%, #fff); }
.chk.serious { border-color: color-mix(in srgb, var(--bad) 50%, #fff); }
.chk.min { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding-block: 11px; }
.chk .hd { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.chk .val { font-size: 18.5px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.chk .det { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.chk .ft { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: auto; padding-top: 4px; }
.pts { font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.pts.neg { color: var(--warn); } .pts.pos { color: var(--good); } .pts.zero { color: var(--muted); font-weight: 400; }

.list { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.list li::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 4px; border: 1.5px solid var(--dim); border-radius: 4px; }
.links { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.links a { display: block; padding: 11px 14px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; font-size: 14.5px; transition: border-color 0.2s; }
.links a:hover { border-color: rgba(21, 21, 21, 0.32); }
.links a b { font-weight: 500; }
.links a span { display: block; color: var(--muted); font-size: 13px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px 28px; margin-top: 16px; }
.names { margin: 10px 0 0; padding: 0; list-style: none; font-size: 14.5px; display: flex; flex-direction: column; gap: 6px; }
.names li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.names li span { margin-left: auto; color: var(--muted); white-space: nowrap; } /* when the name and "Underground or metro · 1.3 km" do not fit side by side (a 320px phone) the distance drops under the name */

.sum { margin: 14px 0 0; padding: 0; list-style: none; font-size: 14.5px; }
.sum li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.sum li span:first-child { min-width: 0; }
.sum li.total { font-weight: 600; border-top: 1px solid var(--fg); }
.meter { position: relative; height: 8px; border-radius: var(--r-pill); margin-top: 8px; background: linear-gradient(to right, color-mix(in srgb, var(--bad) 55%, #fff) 0 45%, color-mix(in srgb, var(--warn) 50%, #fff) 45% 60%, color-mix(in srgb, #e0a100 60%, #fff) 60% 75%, color-mix(in srgb, var(--good) 55%, #fff) 75% 100%); }
.meter i { position: absolute; top: -5px; width: 4px; height: 18px; border-radius: 2px; background: var(--fg); transform: translateX(-50%); }
.meter-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 7px; }
.srcs { margin: 4px 0 0; padding: 0; list-style: none; font-size: 13.5px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; }
.srcs span { color: var(--muted); display: block; }
.srcs a { color: var(--accent); }
.kv { margin: 6px 0 0; padding: 0; list-style: none; font-size: 15px; }
.kv li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); }
.kv li:first-child { border-top: 0; }
.kv li span:first-child { color: var(--muted); white-space: nowrap; }
.kv li span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }

/* method */
.bars { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 190px; gap: 12px; align-items: center; font-size: 14px; }
.bar { height: 10px; background: var(--track); border-radius: var(--r-pill); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.rules td:last-child { text-align: right; white-space: nowrap; padding-right: 0; font-weight: 500; }
.rules tr.grp td { font-weight: 500; font-size: 13px; color: var(--muted); padding-top: 22px; border-bottom: 1px solid var(--line2); }
.prose { max-width: 70ch; display: flex; flex-direction: column; gap: 12px; font-size: 15.5px; }

/* forms */
.card { max-width: 420px; width: 100%; margin: 28px auto 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--lift); }
.card h1 { font-size: 26px; letter-spacing: -0.03em; }
.card form { display: flex; flex-direction: column; gap: 14px; }
.card .inp { padding: 11px 14px; }
/* the box for the code from an email (6 to 10 digits, whatever the account service sends): big, spaced out, centred (the left padding balances the space after the last digit); its hint is plain words, not digits */
.card .inp.codebox { font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: 0.34em; text-align: center; padding: 12px 14px 12px calc(14px + 0.34em); font-variant-numeric: tabular-nums; }
.inp.codebox::placeholder { letter-spacing: 0; font-family: inherit; font-size: 17px; font-weight: 400; }
.card .btn { padding-block: 11px; }
.pw { position: relative; }
.pw .inp { padding-right: 68px; }
.pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); font-size: 13.5px; font-weight: 500; padding: 8px 10px; cursor: pointer; }
.pw button:hover { color: var(--fg); }
.hint { font-size: 13px; color: var(--muted); }
.alt { font-size: 14.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; }
.alt a { color: var(--fg); text-decoration: none; font-weight: 500; }
.alt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.msg { padding: 12px 14px; border-radius: var(--r-sm); font-size: 14.5px; background: var(--panel); border: 1px solid var(--line); }
.msg.ok { border-color: color-mix(in srgb, var(--good) 35%, #fff); background: color-mix(in srgb, var(--good) 7%, #fff); }
.msg.bad { border-color: color-mix(in srgb, var(--bad) 35%, #fff); background: color-mix(in srgb, var(--bad) 6%, #fff); }
.msg b { display: block; margin-bottom: 2px; font-weight: 600; }
.banner { width: 100%; }

/* loading */
.wait { max-width: 560px; margin: 64px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }


@media (max-width: 960px) {
  .pp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "side" "body"; gap: 20px; }
  .bar-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 700px) {
  .gal.trio { grid-template-columns: minmax(0, 1fr); }
  .galside { display: none; }
}
@media (max-width: 560px) {
  :root { --pad: 16px; }
  .wrap { padding-inline: 16px; }
  body { font-size: 15px; }
  .nav { padding-inline: 8px; }
  .nav-in { gap: 4px 10px; min-height: 54px; padding: 8px 8px 8px 12px; border-radius: var(--r); }
  .nav .tabs { order: 3; width: 100%; margin-left: -6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 5px 8px; font-size: 13.5px; white-space: nowrap; flex: none; }
  .logo { font-size: 17px; }
  .lines { opacity: 0.26; }
  .who { max-width: 150px; }
  .card { padding: 22px; }
  .paste { flex-wrap: wrap; border-radius: var(--r); padding: 8px; }
  .paste .inp { flex-basis: 100%; padding: 10px 10px 8px; }
  .paste .btn { flex: 1 1 100%; }
  .keyfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec > summary, .sec .lrow { padding: 14px 16px; flex-wrap: wrap; gap: 4px 12px; }
  .sec .ss { margin-left: 0; text-align: left; flex-basis: 100%; order: 3; }
  .sec .chev { margin-left: auto; }
  .sec .body { padding: 16px 16px 20px; }
  .ring.xl { width: 104px; }
  .ring.xl .big { font-size: 38px; }
  .dials { gap: 6px; }
  .ring.md { width: 66px; }
  .ring.md .big { font-size: 16.5px; }
  .ttl-top .actions { width: 100%; }
  .ttl-top .actions .btn { flex: 1; padding-block: 9px; }
  .hgrid { grid-template-columns: minmax(0, 1fr); }
  .cmp { min-width: calc(88px + var(--cols) * 126px); font-size: 14px; }
  .cmp .k { width: 88px; font-size: 13px; padding-right: 6px; }
  .cmp td, .cmp th.col { padding-inline: 5px; }
  .cmp-n { font-size: 18px; }
  .cmp-name { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cgal .galbtn { width: 32px; height: 32px; }
  .cmpbar { bottom: 10px; padding-left: 16px; }
  .gal .ph, .hero > .ph { border-radius: var(--r); }
}
/* ---------- the rest of the site in the same look ---------- */
main { padding-block: 0 72px; }
main > .view > :not(.home):first-child { margin-top: 28px; }
.lead { margin-top: 16px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.report.stack > div:first-child > h1, .homes > div:first-child > h1 { font-size: clamp(34px, 4.8vw, 52px); letter-spacing: -0.04em; }
.empty { border-radius: var(--r-sm); }
.offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 28px; width: 100%; max-width: 860px; margin-inline: auto; }
.offer { position: relative; padding-top: calc(var(--pad) + 40px); }
.offer > div:first-child { min-width: 0; }
.offer > div:first-child > .beta:first-child { position: absolute; left: 0; right: 0; top: 0; margin: 0; }
.offer h2 { font-size: clamp(22px, 2.8vw, 28px); letter-spacing: -0.03em; }
.offer p { color: var(--muted); margin-top: 8px; max-width: 64ch; }
.offer .actions { margin-top: 0; }

.ticks li::before { border-radius: 3px; background-color: var(--panel2); }
.rc { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: none; transition: border-color 0.15s, transform 0.15s; }
.rc:hover { transform: translateY(-2px); border-color: var(--fg); box-shadow: none; }
.hcard { border: 1px solid var(--line); border-radius: var(--r); box-shadow: none; transition: border-color 0.15s, transform 0.15s; }
.hcard:hover { transform: translateY(-2px); border-color: var(--line2); box-shadow: var(--lift); }
.sec { border: 1px solid var(--line); box-shadow: none; }
.sec > summary:hover { background: var(--surface); }
.sec .st { letter-spacing: -0.02em; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: none; }
.card h1 { letter-spacing: -0.035em; }
.card .beta, .choice .beta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.beta { display: inline-flex; align-items: center; gap: 8px; }
.msg { border-radius: var(--r-sm); background: #fff; }
.note { border-radius: var(--r-sm); }
.quick { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.quick a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--fg); text-decoration: none; font-weight: 500; font-size: 15px; transition: border-color 0.15s, transform 0.15s; }
.quick a:hover { background: #fff; border-color: var(--fg); transform: translateX(2px); }
.quick a::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 18px; line-height: 1; }
.kf-i { border-radius: 4px; background: #fff; }

.ph { background: linear-gradient(165deg, #f3f4f6, #e5e7eb); }
.ph .cap, .galcount { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 2px; }
.galbtn { border-radius: 4px; }
.hc-score { border-radius: 50%; }
.cmpbar { border-radius: var(--r-sm); }
.cmpbar .btn { background: var(--lime); color: var(--lime-ink); }
.wait h1 { letter-spacing: -0.035em; }
.choice-in { border-radius: var(--r); border-color: var(--fg); box-shadow: var(--lift); }
.legal-nav a { font-weight: 500; }
.ch-tip { border-radius: 4px; }
table th { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* the three dials, each beside a sentence that says what it means */
.dials.dlist { display: flex; flex-direction: column; gap: 16px; }
.dialrow { display: flex; gap: 14px; align-items: flex-start; }
.dialrow > div { min-width: 0; }
.dialrow b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.dialrow span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.dialrow span a { color: var(--accent); text-underline-offset: 2px; }
.dialrow .ring.md { width: 62px; }
.dialrow .ring.md .big { font-size: 15.5px; display: inline; margin: 0; color: var(--fg); }
.panel.thin { border-color: #d99a00; background: color-mix(in srgb, #d99a00 7%, #fff); }
.panel.thin p { font-size: 14.5px; }

/* footer: columns of links, then the small print */
footer { margin-top: auto; border-top: 1px solid var(--line); padding-block: 44px 28px; font-size: 13.5px; color: var(--muted); }
footer.wrap { width: 100%; }
.foot-cols { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.foot-brand .logo { font-size: 16px; }
.foot-brand p { margin-top: 12px; max-width: 28ch; }
.foot-col b { display: block; font-size: 13.5px; font-weight: 600; color: var(--fg); margin-bottom: 12px; }
.foot-col a { display: block; width: fit-content; padding: 4px 0; color: var(--ink2); text-decoration: none; transition: color 0.15s; overflow-wrap: anywhere; }
.foot-col a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.foot-small { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; }
.foot-small p { max-width: 110ch; }
.foot-small #footData { display: block; margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; }
.foot-motion { margin-top: 8px; }
.foot-motion .linkbtn { font-size: 12.5px; font-weight: 400; text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.foot-motion .linkbtn:hover { text-decoration-color: currentColor; }
#footBiz p { margin-top: 10px; }

@media (max-width: 960px) {

  .sect.split, .sect.steps { grid-template-columns: minmax(0, 1fr); gap: 36px; }

  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .person { grid-template-columns: minmax(0, 1fr); }
  .person-art { border-right: 0; border-bottom: 1px solid var(--line); min-height: 150px; }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 18px; }
  .nav-in { min-height: 54px; gap: 2px 10px; }
  .nav .tabs { order: 3; width: 100%; margin-left: -8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tab { padding: 6px 7px; font-size: 13.5px; white-space: nowrap; flex: none; }
  .tab[aria-current="page"]::after { left: 7px; right: 7px; }
  .nav .right { margin-left: auto; }
  /* the menu row scrolls sideways when it is wider than the screen: a soft edge shows there is more */
  .nav .tabs[data-edge="end"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  .nav .tabs[data-edge="start"] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
  .nav .tabs[data-edge="both"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
  /* figure tiles: never one left alone on a row */
  .tiles.split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles.split > .tile, .tiles.split > .tile.key { grid-column: auto; }
  .tiles > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .logo { font-size: 17px; }
  .logo-tag { display: none; }

  .paste { flex-wrap: wrap; }
  .paste .inp { flex-basis: 100%; padding: 10px 8px 8px; }
  .paste .btn { flex: 1 1 100%; }
  .proc-head, .proc-foot { padding-inline: 16px; }
  .proc-steps { padding-inline: 16px; }
  .proc-step { grid-template-columns: 32px minmax(0, 1fr); }
  .proc-step > .tag { grid-column: 2; justify-self: start; margin-top: 0; }
  .offer { grid-template-columns: minmax(0, 1fr); }
  .faq > summary { font-size: 16.5px; padding-block: 16px; }

  .gal .ph, .hero > .ph { border-radius: var(--r); }
}
@media (prefers-reduced-motion: reduce) {

  .proc-step, .usedby i { animation: none !important; }

  .btn:hover, .rc:hover, .hcard:hover, .rows a:hover, .quick a:hover { transform: none; }
}
@media print { .cta, .person, .news, .foot-motion { display: none !important; } }

/* printing a report, or saving it as a PDF */
@media print {
  html, body { background: #fff !important; }
  body { font-size: 12px; }
  body::before, .nav, .rtools, .actions, .unlock, .galbtn, .galbars, .galside, .heart, .cmpbar, #shareBox, .askform, .crumb, .nearby, .linkbtn, .chev, .lines, .street, #sec-notes, #sec-offer, #sec-lookups, #sec-ask .askform { display: none !important; }
  main { padding: 0; }
  .wrap { max-width: none; padding-inline: 0; }
  .pp { display: block; }
  .pp-stick { position: static; margin-block: 16px; }
  .gal { height: 280px; }
  .gal.trio { grid-template-columns: minmax(0, 1fr); }
  .panel, .sec, .rc, .hcard { box-shadow: none; background: #fff; border: 1px solid #c8c8c8; }
  .sec, .panel, .tile, .chk, tr { break-inside: avoid; }
  .sec > summary { padding-block: 10px; }
  #app[data-enter] *, .mark * { animation: none !important; }
  footer { border-top: 1px solid #c8c8c8; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  #app[data-enter] *, .mark *, .wait .mark, .beta::before { animation: none !important; }
  .lines path { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .lines circle { animation: none; opacity: 1; transform: none; }

}

/* ---------- keyboard and screen-reader helpers */
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--fg); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 500; text-decoration: none; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1[tabindex="-1"]:focus { outline: none; }
.scroll:focus-visible { outline-offset: 4px; }

/* ---------- the storage question: two buttons that look the same */
html { scroll-padding-bottom: calc(var(--choice-h, 0px) + 12px); scroll-padding-top: 96px; }
.choice { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; }
.choice-in { pointer-events: auto; max-width: 1000px; margin: 0 auto; background: var(--solid); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: var(--lift); padding: 16px 18px; display: flex; gap: 14px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.choice-in > div:first-child { flex: 1 1 380px; min-width: 0; }
.choice h2 { font-size: 17px; letter-spacing: -0.01em; }
.choice p { font-size: 14px; color: var(--muted); margin-top: 4px; max-width: 66ch; }
.choice p a { color: var(--accent); text-underline-offset: 2px; }
.choice .actions { margin: 0; flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice .btn { min-width: 0; white-space: nowrap; }
.has-choice footer { padding-bottom: calc(var(--choice-h, 170px) + 16px); }
@media (max-width: 640px) {
  html { scroll-padding-top: 120px; }
  .choice { padding-inline: 8px; padding-top: 0; }
  .choice-in { padding: 14px; gap: 12px; border-radius: var(--r); }
  .choice h2 { font-size: 15.5px; }
  .choice p { font-size: 13.5px; line-height: 1.4; }
  .choice .actions { width: 100%; }
  .choice .btn { padding: 10px 6px; font-size: 14.5px; }
}
@media (max-width: 380px) { .choice .actions { grid-template-columns: 1fr; } }

/* ---------- tick boxes that record an agreement */
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; cursor: pointer; }
.agree input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--fg); }
.agree a { color: var(--accent); text-underline-offset: 2px; }
.confirm > div:first-child { flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* ---------- legal pages, business details */
.msg.warn { border-color: color-mix(in srgb, #d99a00 45%, #fff); background: color-mix(in srgb, #d99a00 10%, #fff); }
.todo { background: color-mix(in srgb, #d99a00 20%, #fff); border-radius: 5px; padding: 0 5px; font-weight: 500; }
.legal .prose { max-width: 76ch; }
.legal .plain { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.legal blockquote.form { margin: 0; padding: 12px 14px; background: var(--panel2); border-radius: var(--r-sm); font-size: 14.5px; }
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--panel2); padding: 1px 5px; border-radius: 5px; white-space: nowrap; }
.legal table td { vertical-align: top; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14.5px; }
.legal-nav a { color: var(--accent); font-weight: 500; text-underline-offset: 2px; }
.bizcard { max-width: 620px; margin: 0; }
#footBiz p { margin-top: 12px; }
#footBiz a { color: inherit; }

/* ---------- your data, deleting the account, prices */
.yourdata { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.yourdata .actions { margin-top: 2px; }
.delbox { flex-direction: column; align-items: stretch; margin-top: 8px; }
.delbox .hint a, .yourdata .hint a, .keepnote a { color: var(--accent); text-underline-offset: 2px; }
.btn.danger { background: var(--bad); }
.btn.danger:hover { background: #a11e1e; }
.keepnote .linkbtn { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; font-size: inherit; }
.ext { margin-top: 0; }

@media print { .choice, .skip { display: none !important; } }

/* a full-width button */
.btn.wide { width: 100%; padding-block: 13px; font-size: 15.5px; }

/* ---------- house price news ---------- */
.news-list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--line); }
.news-list li { border-bottom: 1px solid var(--line); min-width: 0; }
.news-list a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px 2px; text-decoration: none; color: inherit; }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.news-meta time { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.news-list b { font-size: 17.5px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; text-wrap: balance; }
.news-list a:hover b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.news-sum { font-size: 14px; line-height: 1.5; color: var(--muted); }

@media (max-width: 860px) {
  .news-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .news-list b { font-size: 16.5px; }
}
.news-meta .tag { white-space: normal; }

/* ---------- added 6 October 2026: this address's own sales, stations, the data self-test */
.own { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 18px; background: var(--surface); }
.own .h3 { margin: 0; }
.ownlist { margin-top: 10px; }
.ownlist li span.big { font-size: 20px; }
.srows { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.srow { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.srow:first-child { border-top: 0; }
.srow-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.srow-hd b { font-weight: 600; font-size: 14.5px; min-width: 0; }
.srow-hd .chip { flex: none; }
.srow .fine { margin: 0; overflow-wrap: anywhere; }
.srow .num { font-size: 12.5px; }

/* ---------- a friendlier look (6 October 2026): original drawings, a paste box over a drawn street,
   the four steps as a row of pictures, and picture tiles to start from. The drawings are Seeka's own. */
:root { --sky: #eaf0ff; }
.pic { display: block; flex: none; width: 160px; height: 120px; max-width: 100%; }
.street { display: block; width: 100%; height: clamp(150px, 19vw, 240px); margin-top: clamp(18px, 3vw, 34px); }
/* The sky runs the full width of the window; the words and the paste box sit in the middle of it. */
.hero3 { background: var(--sky); padding-top: clamp(40px, 6vw, 76px); display: flex; flex-direction: column; align-items: center; overflow: visible; }
@supports (border-image: conic-gradient(#000 0 0) fill 0 / 0 / 0 100vmax) {
  .hero3 { border-image: conic-gradient(var(--sky) 0 0) fill 0 / 0 / 0 100vmax; }
}
.hero3-in { width: 100%; max-width: 760px; display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: 4px; }
.hero3 h1 { font-size: clamp(38px, 5.6vw, 68px); line-height: 1; letter-spacing: -0.04em; }

.hero3 .lead { margin-top: 20px; max-width: 54ch; font-size: 17.5px; line-height: 1.55; color: var(--ink2); }
.hero3 .checkbox { width: 100%; max-width: 640px; margin-top: 28px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.hero3 .paste { padding: 8px; border: 2px solid var(--fg); border-radius: 12px; box-shadow: 0 10px 30px -14px rgba(39, 51, 107, 0.45); }
.hero3 .paste:focus-within { border-color: var(--cobalt); box-shadow: 0 0 0 4px rgba(61, 90, 254, 0.18), 0 10px 30px -14px rgba(39, 51, 107, 0.45); }
.hero3 .paste .inp { font-size: 17px; padding: 12px 8px 12px 14px; }
.hero3 .paste .btn { padding: 13px 26px; font-size: 16px; border-radius: 8px; }
.hero3 .paste-msg, .hero3 .fresh { text-align: center; color: var(--ink2); }
.hero3 #usedBy { margin-top: 6px; }
.pic-tick { transform-box: fill-box; transform-origin: 50% 100%; animation: tick-land 0.7s var(--spring) 0.35s both; }
@keyframes tick-land { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }

/* How a check works: four pictures in a row, numbered because it is a sequence. */
.proc { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; padding: clamp(40px, 6vw, 72px) 0 8px; }
.proc-head { display: block; padding: 0; border: 0; background: none; text-align: center; }
.proc-head h2 { font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -0.035em; line-height: 1.08; }
.proc-head p { margin-top: 10px; color: var(--muted); font-size: 16.5px; }
.proc-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.proc-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 0; animation: none; }
.proc-step:not(.end)::before { content: ""; position: absolute; left: calc(50% + 62px); right: calc(-50% + 62px - 28px); top: 60px; bottom: auto; width: auto; height: 0; border-top: 2px dashed var(--line2); background: none; }
.proc-step .pic { width: 132px; height: 99px; }
.proc-n { margin-top: 12px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--fg); color: #fff; font-family: var(--font); font-weight: 600; font-size: 14px; }
.proc-step.end .proc-n { background: var(--lime); color: var(--lime-ink); border: 0; }
.proc-tx { padding-top: 12px; display: flex; flex-direction: column; align-items: center; }
.proc-tx b { font-size: 17px; }
.proc-d { margin-top: 6px; max-width: 30ch; }
.proc-src { justify-content: center; }
.proc-tx > .tag { margin-top: 10px; }
.proc-foot { margin-top: 30px; padding: 0; border: 0; background: none; text-align: center; font-size: 14px; }
.covers { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 56px; padding: 30px 0 clamp(40px, 6vw, 64px); }
.covers > div { display: flex; flex-direction: column; align-items: center; }
.covers .bits { justify-content: center; }

/* Start-here tiles */
.startsect h2 { text-align: center; }
.starts { margin-top: 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.start { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 18px 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--fg); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, translate 0.15s; }
.start:hover { border-color: var(--cobalt); box-shadow: 0 14px 30px -18px rgba(39, 51, 107, 0.5); translate: 0 -2px; }
.start .pic { width: 136px; height: 102px; }
.start span { display: flex; flex-direction: column; gap: 4px; }
.start b { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.start i { font-style: normal; font-size: 14px; color: var(--muted); line-height: 1.45; }

/* My homes and Compare without an account, and other pages that open with a picture */
.invite { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center; background: var(--sky); border-radius: 18px; padding: clamp(24px, 4vw, 48px); margin-top: 8px; }
.invite .pic { width: 208px; height: 156px; }
.invite h1 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.035em; line-height: 1.08; }
.invite .lead { margin-top: 12px; max-width: 52ch; color: var(--ink2); }
.invite .actions { margin-top: 20px; }
.invite .fine { margin-top: 16px; color: var(--ink2); }
.empty .pic { margin: 0 auto 6px; width: 132px; height: 99px; }
.pagehead { display: flex; align-items: center; gap: 24px; }
.pagehead .pic { width: 128px; height: 96px; }
.card .pic { width: 120px; height: 90px; margin: -6px auto 0; }
@media (max-width: 900px) {
  .proc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
  .proc-step:not(.end)::before { display: none; }
  .starts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hero3 .paste { flex-direction: column; flex-wrap: nowrap; } /* nowrap: a wrapping column sizes its one column by its content, which on a 320px phone is wider than the screen */
  .hero3 .paste .btn { width: 100%; }
  .proc-steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .proc-step { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; align-items: start; text-align: left; }
  .proc-step .pic { width: 96px; height: 72px; grid-row: 1 / span 2; }
  .proc-n { margin-top: 0; }
  .proc-tx { align-items: flex-start; padding-top: 8px; }
  .proc-d { max-width: none; }
  .proc-src { justify-content: flex-start; }
  .starts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .start { flex-direction: row; text-align: left; padding: 12px 16px; gap: 14px; }
  .start .pic { width: 84px; height: 63px; }
  .invite { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .invite .pic { width: 148px; height: 111px; }
  .pagehead .pic { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pic-tick { animation: none; } .start { transition: none; } }

/* the mortgage calculator's chart and the lenders list */
.ch-dash { stroke: var(--model); stroke-dasharray: 6 5; }
.ch-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; font-size: 13.5px; color: var(--ink2); }
.ch-key span { display: inline-flex; align-items: center; gap: 8px; }
.ch-key i { display: inline-block; width: 26px; height: 0; border-top: 2px solid var(--accent); }
.ch-key i.k-dash { border-top: 2px dashed var(--model); }
.links.lenders { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }

/* signing in with an outside account */
.oauth { display: flex; flex-direction: column; gap: 10px; }
.oauth .btn { justify-content: center; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* ---------- deleting an account ---------- */
.delbox .msg.warn { margin-top: 12px; }
.delbox .agree { margin-top: 12px; }

/* ---------- polish pass, 6 October 2026: one picture world from the top of the home page to the bottom ---------- */
/* The street is drawn past the edges of its box, so the pavement runs the full width of the window and
   no tree or house is cut off inside the sky. */
.street { overflow: visible; }
/* Section headings on the home page: one size, centred over anything laid out evenly beneath them.
   The one section with words beside a diagram keeps its words on the left. */
.home .sect h2, .home .cta h2, .proc-head h2 { font-size: clamp(28px, 3.9vw, 46px); line-height: 1.06; letter-spacing: -0.038em; }
.home .news-head > div { width: 100%; }

/* The page ends where it began: sky, and the street. */
.cta.sky { margin: 0; padding: clamp(48px, 7vw, 84px) 0 0; border-radius: 0; background: var(--sky); color: var(--fg); overflow: visible; display: flex; flex-direction: column; align-items: center; }
@supports (border-image: conic-gradient(#000 0 0) fill 0 / 0 / 0 100vmax) {
  .cta.sky { border-image: conic-gradient(var(--sky) 0 0) fill 0 / 0 / 0 100vmax; }
}
.cta.sky .cta-in { padding-inline: 20px; }
.cta.sky p { color: var(--ink2); }
.cta.sky .under { color: var(--fg); }
.cta.sky .street { height: clamp(120px, 15vw, 190px); margin-top: clamp(22px, 3.4vw, 40px); }
.home > .cta.sky + * { margin-top: 0; }
.faqs + * { border-top: 0; }
/* Sign-in and sign-up cards: the picture lines up with the heading under it. */
.card .pic { margin: -6px 0 0 -10px; }
/* Pages that open with a picture: the same picture size, gap and line-up everywhere. */
.pagehead { gap: 28px; align-items: center; }
.pagehead .pic { width: 136px; height: 102px; }
.pagehead .lead { max-width: 62ch; }
/* Where the home page ends on the street, the pavement is the line above the footer. */
main:has(.cta.sky) ~ footer { border-top-color: transparent; }

/* ---------- reviews (6 October 2026) ---------- */
.stars { display: inline-flex; gap: 2px; flex: none; }
.stars svg { display: block; }
.st-on { fill: var(--cobalt); }
.st-off { fill: none; stroke: var(--line2); stroke-width: 1.4; }
.revs { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; text-align: left; }
.revs.all { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 4px; }
.revs.one, .revs.admin { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
.rev { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; min-width: 0; }
.rev-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.rev-n { font-size: 13.5px; color: var(--muted); }
.rev-top .chip { margin-left: auto; }
.rev-body { flex: 1; font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; }
.rev-by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 13.5px; color: var(--muted); }
.rev-by b { color: var(--fg); font-weight: 600; }
.rev-tally { font-size: 16.5px; color: var(--ink2); }
.rev-tally b { color: var(--fg); }
.revs-more { text-align: center; margin-top: 22px; }
.revs-more a { color: var(--accent); text-underline-offset: 2px; }
.rev-status { margin-top: 2px; }
.rev-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.rev-acts select { font: inherit; font-size: 14px; width: auto; flex: 0 1 340px; padding: 8px 10px; border: 1px solid var(--line2); border-radius: var(--r-sm); background: #fff; max-width: 100%; }
#revForm { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; max-width: 620px; }
.rate { border: 0; margin: 0; padding: 0; min-width: 0; }
.rate legend { padding: 0; margin-bottom: 8px; }
.rate-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rate-row label { position: relative; cursor: pointer; }
.rate-row input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rate-row span { display: grid; place-items: center; width: 48px; height: 44px; border: 1px solid var(--line2); border-radius: var(--r-sm); background: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.rate-row input:checked + span { background: var(--fg); border-color: var(--fg); color: #fff; }
.rate-row input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.rate-row label:hover span { border-color: var(--fg); }
#revMine .sub, #revPanel .sub { margin-top: 8px; }
#revPanel #revBox { margin-top: 18px; }
@media (max-width: 900px) { .revs { grid-template-columns: minmax(0, 1fr); } .revs.all { grid-template-columns: minmax(0, 1fr); } }

/* ---------- pop-ups and comments (12 October 2026) ---------- */
html.sheet-open { overflow: hidden; }
dialog.sheet { box-sizing: border-box; width: min(520px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; color: var(--fg); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 28px 70px -20px rgba(14, 17, 22, 0.5), 0 2px 8px rgba(14, 17, 22, 0.08); }
dialog.sheet::backdrop { background: rgba(14, 17, 22, 0.5); }
dialog.sheet[open] { animation: sheet-in 0.2s var(--ease-out); }
dialog.sheet[open]::backdrop { animation: sheet-dim 0.2s var(--ease-out); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
@keyframes sheet-dim { from { opacity: 0; } }
.sheet-in { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 26px 26px 24px; }
.sheet-in p { margin: 0; }
.sheet-hd { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.sheet-hd .ms { flex: none; margin: -4px 0 -4px -8px; }
.sheet h2 { font-size: clamp(22px, 5vw, 26px); line-height: 1.12; letter-spacing: -0.032em; }
.sheet-x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; }
.sheet-x:hover { background: var(--panel2); color: var(--fg); }
.sheet .actions { margin-top: 2px; }
.sheet form { display: flex; flex-direction: column; gap: 12px; }
.sheet .note-box { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cm-meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-top: -6px; }
.cm-meta .hint:last-child { flex: none; }
.cm-rules { border-top: 1px solid var(--line); padding-top: 12px; font-size: 14px; color: var(--ink2); }
.cm-rules summary { cursor: pointer; font-weight: 500; color: var(--fg); }
.cm-rules .facts { margin-top: 10px; font-size: 14px; }
.cm-mine { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.cm-own { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cm-own li { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); }
.cm-own-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; font-size: 13px; }
.cm-own p { font-size: 15px; overflow-wrap: anywhere; }
.cm-own .fine { margin: 0; }
.cm-own-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 600px) {
  dialog.sheet { width: 100%; margin: auto 0 0; max-height: calc(100dvh - 12px); border-radius: 14px 14px 0 0; border-bottom: 0; }
  .sheet-in { padding: 22px 18px calc(20px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { dialog.sheet[open], dialog.sheet[open]::backdrop { animation: none; } }
/* comments on the main page: a plain ruled list, quieter than the reviews' cards */
.cms { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cm { display: flex; flex-direction: column; gap: 8px; padding: 22px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.cm-body { font-size: 17px; line-height: 1.5; max-width: 62ch; overflow-wrap: anywhere; }
.cm-by { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13.5px; color: var(--muted); }
.cm-by b { color: var(--fg); font-weight: 600; }
.cm-more { margin-top: 18px; }
.cm-empty { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px dashed var(--line2); border-radius: var(--r); color: var(--ink2); }
.cm-empty p { margin: 0; }
.cms.admin { border-top: 0; }
.cms.admin .cm { padding: 18px 0; }
#cmPanel .sub { margin-top: 8px; }
#cmPanel #cmBox { margin-top: 18px; }
.ownerbox { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ownerbox .actions { margin-top: 2px; }

/* ---------- the mascot and the thinking orb (6 October 2026) ---------- */
/* The mascot is Seeka's mark with a face. It blinks now and then and, when it greets, waves three times. */
.ms { display: block; flex: none; overflow: visible; max-width: 100%; height: auto; }
.ms-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: ms-blink 5.6s 1.4s infinite; }
@keyframes ms-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }
.ms-wave { transform-box: fill-box; transform-origin: 0% 100%; animation: ms-wave 0.7s ease-in-out 0.45s 3; }
@keyframes ms-wave { 50% { transform: rotate(-24deg); } }
.ms-dots circle { transform-box: fill-box; animation: mk-type 1.1s ease-in-out infinite; }
.ms-dots circle:nth-child(2) { animation-delay: 0.16s; }
.ms-dots circle:nth-child(3) { animation-delay: 0.32s; }
.wait .ms { animation: mk-bob 2.2s ease-in-out infinite; }
.card .ms { margin: -8px 0 -4px -14px; }
.empty .ms { margin: 0 auto 10px; }
.invite .ms { width: 200px; }
/* Where a search can be kept, the mascot stands at the top corner holding the key. */
.unlock { position: relative; }
.unlock > .ms { position: absolute; right: 14px; top: 12px; width: 92px; pointer-events: none; }
.unlock > .ms + div { padding-right: 104px; min-height: 64px; }

/* The lens: still until a check starts. Its ring, then, runs round and its tick draws itself. */
.lens { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; }
.lens svg { width: 28px; height: 28px; overflow: visible; }
.ln-ring { fill: none; stroke: var(--cobalt); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100 0; transform-origin: 14px 14px; opacity: 0.45; }
.ln-disc { fill: var(--cobalt); }
.ln-tick { fill: none; stroke: var(--lime); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.ln-handle { fill: none; stroke: var(--fg); stroke-width: 3.2; stroke-linecap: round; }
.lens.busy .ln-ring, .paste.busy .lens .ln-ring { opacity: 1; stroke-dasharray: 34 66; animation: ln-run 1.1s linear infinite; }
.lens.busy .ln-tick, .paste.busy .lens .ln-tick { stroke-dasharray: 1; animation: ln-draw 1.4s ease-in-out infinite; }
@keyframes ln-run { to { transform: rotate(360deg); } }
@keyframes ln-draw { 0% { stroke-dashoffset: 1; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.paste-in { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; padding-left: 12px; }
.paste-in .lens { margin-right: 2px; }
.hero3 .paste-in .inp { padding-left: 8px; }
.thinkbar { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 10px 16px 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink2); font-size: 14.5px; text-align: left; max-width: 100%; }
.still .ms-eyes, .still .ms-dots circle, .still .ms-wave, .still .wait .ms { animation-play-state: paused; }
@media (max-width: 762px) { .paste-in { flex-basis: 100%; } }
@media (max-width: 560px) {
  .unlock > .ms { width: 68px; right: 10px; top: 10px; }
  .unlock > .ms + div { padding-right: 76px; }
  .invite .ms { width: 150px; }
}
@media (prefers-reduced-motion: reduce) { .ms *, .wait .ms { animation: none !important; } }
@media print { .ms, .lens, .scan { display: none !important; } }

/* ---------- 6 October 2026: home page tidy, the glowing beta chip, a mascot you can play with ---------- */
.paste-msg:empty { display: none; }
.bits li.glowwrap { border: 0; padding: 0; background: none; }
.glowchip { position: relative; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--lime-ink); background: var(--lime); border: 0; border-radius: var(--r-pill); padding: 6px 13px; cursor: pointer; box-shadow: 0 0 0 1px rgba(140, 200, 30, 0.6), 0 0 14px 1px rgba(200, 245, 69, 0.8), 0 0 26px 4px rgba(61, 90, 254, 0.16); animation: chip-glow 2.4s ease-in-out infinite; transition: background 0.2s, transform 0.2s; }
.glowchip i { width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 3px rgba(61, 90, 254, 0.2); }
.glowchip:hover { background: #d2fa5c; transform: translateY(-1px); }
.glowchip:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
@keyframes chip-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(140, 200, 30, 0.55), 0 0 8px 0 rgba(200, 245, 69, 0.55), 0 0 18px 2px rgba(61, 90, 254, 0.1); }
  50% { box-shadow: 0 0 0 1px rgba(140, 200, 30, 0.75), 0 0 20px 5px rgba(200, 245, 69, 0.95), 0 0 36px 8px rgba(61, 90, 254, 0.22); }
}
.ext.flash { animation: ext-flash 1.4s ease-out; }
@keyframes ext-flash { from { box-shadow: 0 0 0 4px rgba(200, 245, 69, 0.95); } to { box-shadow: 0 0 0 4px rgba(200, 245, 69, 0); } }
.proc-d { text-wrap: balance; }

/* the mascot by the paste bar: it looks over the top edge, follows the pointer and answers a click */
.hero3 .checkbox { position: relative; margin-top: 60px; }
.hero3 .paste { position: relative; z-index: 1; }
.ms-perch { position: absolute; right: 30px; top: 0; transform: translateY(-76%); z-index: 0; background: none; border: 0; padding: 0; line-height: 0; cursor: pointer; border-radius: 14px; }
.ms-perch .ms { width: 84px; height: auto; }
.ms-perch:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.ms { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ms-pupil { transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px)); transition: transform 0.14s ease-out; }
.ms.ms-hop { animation: ms-hop 0.62s var(--spring) both; }
@keyframes ms-hop { 0% { transform: none; } 28% { transform: translateY(-11%) rotate(-5deg); } 55% { transform: translateY(0) rotate(2deg); } 76% { transform: translateY(-4%); } 100% { transform: none; } }
.ms-perch .ms.ms-hop { animation-name: ms-peek; }
@keyframes ms-peek { 0% { transform: none; } 30% { transform: translateY(-16%) rotate(-4deg); } 60% { transform: translateY(2%) rotate(2deg); } 100% { transform: none; } }
.ms-say { position: absolute; z-index: 60; width: max-content; max-width: min(300px, calc(100vw - 16px)); transform: translate(-50%, -100%) scale(0.9); transform-origin: 50% 100%; background: var(--fg); color: #fff; font-size: 14px; font-weight: 500; line-height: 1.35; padding: 9px 13px; border-radius: 12px; box-shadow: var(--lift); opacity: 0; pointer-events: none; transition: opacity 0.16s, transform 0.22s var(--spring); }
.ms-say.on { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.ms-say.side { transform: translate(0, -100%) scale(0.9); transform-origin: 0 100%; border-radius: 12px 12px 12px 3px; }
.ms-say.side.on { transform: translate(0, -100%) scale(1); }
@media (max-width: 560px) { .hero3 .checkbox { margin-top: 50px; } .ms-perch { right: 16px; } .ms-perch .ms { width: 68px; } }

/* My homes: the Area and Sort by bar */
.hv-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.hv-bar .lab { font-size: 11px; }
.hv-area { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 300px; }
.hv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hv-chip { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink2); background: #fff; border: 1px solid var(--line2); border-radius: 999px; padding: 7px 8px 7px 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s; }
.hv-chip i { font-style: normal; font-size: 12px; min-width: 24px; text-align: center; padding: 1px 7px; border-radius: 999px; background: var(--panel2); color: var(--muted); }
.hv-chip:hover { border-color: #9ca3af; color: var(--fg); transform: translateY(-1px); }
.hv-chip.on { background: var(--fg); border-color: var(--fg); color: #fff; }
.hv-chip.on i { background: rgba(255, 255, 255, 0.18); color: #fff; }
.hv-chip:focus-visible, .hv-sel select:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(61, 90, 254, 0.28); border-color: var(--cobalt); }
.hv-side { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; }
.hv-sortwrap, .hv-toggles { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hv-sel { position: relative; display: inline-flex; align-items: center; max-width: 100%; }
.hv-sel svg { position: absolute; left: 13px; color: var(--muted); pointer-events: none; }
.hv-sel select { width: auto; max-width: 100%; border-radius: 999px; padding: 8px 36px 8px 36px; font-size: 14px; font-weight: 500; line-height: 1.3; background-color: #fff; }
.hv-area .hv-sel select { padding-left: 14px; }
.hv-toggles > div { display: flex; flex-wrap: wrap; gap: 6px; }
.hv-toggle { position: relative; display: inline-flex; cursor: pointer; }
.hv-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hv-toggle span { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink2); background: #fff; border: 1px solid var(--line2); border-radius: 999px; padding: 7px 14px 7px 12px; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.hv-toggle:hover span { border-color: #9ca3af; color: var(--fg); }
.hv-toggle input:checked + span { background: color-mix(in srgb, var(--cobalt) 9%, #fff); border-color: var(--cobalt); color: #2438c9; }
.hv-toggle input:checked + span svg path { fill: currentColor; }
.hv-toggle:nth-child(2) input:checked + span svg path { fill: none; }
.hv-toggle input:focus-visible + span { box-shadow: 0 0 0 3px rgba(61, 90, 254, 0.28); border-color: var(--cobalt); }
.hv-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: -10px; font-size: 14px; color: var(--muted); min-height: 28px; }
.hv-status p { color: var(--ink2); font-weight: 500; }
.hv-status .hv-chg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 0 auto; font-size: 14px; }
@media (max-width: 720px) {
  .hv-bar { padding: 14px; gap: 14px; }
  .hv-side { width: 100%; }
  .hv-sortwrap { flex: 1 1 100%; }
  .hv-sel, .hv-sel select { width: 100%; }
  .hv-status .hv-chg { margin-left: 0; }
}

/* ---------- the mortgage helper ---------- */
.mh .pagehead .lead { max-width: 60ch; }
.mh-prog ol { list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; padding: 0; margin: 0; }
.mh-prog li { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.3; color: var(--muted); min-width: 0; }
.mh-prog li i { height: 5px; border-radius: 3px; background: var(--track); transition: background 0.3s; }
.mh-prog li.did i { background: var(--cobalt); }
.mh-prog li.cur i { background: var(--lime); box-shadow: inset 0 0 0 1px #9bc41f; }
.mh-prog li.cur span { color: var(--fg); font-weight: 600; }
.mh-count { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.mh-thread { display: flex; flex-direction: column; gap: 14px; max-width: 780px; }
.mh-turn { display: flex; gap: 12px; align-items: flex-start; }
.mh-av { flex: none; display: block; width: 48px; height: 48px; border-radius: 50%; background: var(--sky); overflow: hidden; }
.mh-av .ms { display: block; width: 76px; max-width: none; height: auto; margin: -3px 0 0 -14px; }
.mh-bubble { background: var(--sky); border-radius: 4px 14px 14px 14px; padding: 13px 16px; font-size: 15px; max-width: 64ch; color: var(--ink2); }
.mh-bubble b { color: var(--fg); font-weight: 600; }
.mh-turn.past { flex-direction: column; gap: 6px; padding-left: 60px; }
.mh-asked { font-size: 14px; color: var(--muted); max-width: 60ch; }
.mh-said { align-self: flex-end; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 14px; background: var(--fg); color: #fff; border-radius: 14px 14px 4px 14px; padding: 9px 14px; font-weight: 500; font-size: 15px; max-width: 100%; }
.mh-said span { min-width: 0; overflow-wrap: anywhere; }
.mh-said .linkbtn { color: #c9cdd6; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.mh-said .linkbtn:hover { color: #fff; }
.mh-early { max-width: 780px; }
.mh-early > summary { cursor: pointer; width: fit-content; font-size: 14px; font-weight: 500; color: var(--muted); padding: 4px 0; }
.mh-early > summary:hover { color: var(--fg); }
.mh-early[open] > summary { margin-bottom: 12px; }
.mh-early .mh-turn + .mh-turn { margin-top: 8px; }
.mh-early .mh-turn.past { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 18px; padding: 0 0 8px; border-bottom: 1px solid var(--line); }
.mh-early .mh-said { padding: 6px 12px; font-size: 14.5px; border-radius: 10px; }
.mh-card { flex: 1 1 auto; min-width: 0; background: #fff; border: 2px solid var(--fg); border-radius: 4px 14px 14px 14px; padding: 18px 20px 16px; box-shadow: 0 12px 30px -16px rgba(39, 51, 107, 0.4); animation: mh-in 0.36s var(--ease-out) both; }
@keyframes mh-in { from { opacity: 0; transform: translateY(10px); } }
.mh-turn.now .mh-av .ms { animation: ms-hop 0.62s 0.1s var(--spring) both; }
.mh-q { font-size: clamp(19px, 2.6vw, 23px); line-height: 1.25; letter-spacing: -0.02em; font-weight: 600; margin-top: 8px; max-width: 32ch; text-wrap: balance; }
.mh-hint { margin-top: 8px; color: var(--muted); font-size: 14.5px; max-width: 60ch; }
.mh-note { margin-top: 12px; font-size: 14.5px; color: var(--ink2); max-width: 64ch; }
.mh-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mh-opts.tight { margin-top: 8px; gap: 6px; }
.mh-opt { font: inherit; font-size: 15px; font-weight: 500; line-height: 1.3; text-align: left; padding: 11px 16px; background: #fff; color: var(--fg); border: 1px solid var(--line2); border-radius: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.mh-opt:hover { border-color: var(--fg); background: var(--surface); transform: translateY(-1px); }
.mh-opt:focus-visible { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(61, 90, 254, 0.28); }
.mh-opt.on { background: var(--fg); color: #fff; border-color: var(--fg); }
.mh-opt.sm { padding: 7px 14px; font-size: 14px; }
.mh-opt.check { display: inline-flex; align-items: center; gap: 10px; }
.mh-opt.check input { width: 17px; height: 17px; margin: 0; accent-color: var(--cobalt); }
.mh-opt.check:has(input:checked) { border-color: var(--cobalt); background: color-mix(in srgb, var(--cobalt) 7%, #fff); }
.mh-opt.check:has(input:focus-visible) { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(61, 90, 254, 0.28); }
.mh-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 330px)); gap: 12px 14px; margin-top: 16px; align-items: end; }
.mh-fields.many, .mh-monthin { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.mh-in { position: relative; display: flex; align-items: center; }
.mh-in i { position: absolute; font-style: normal; color: var(--muted); font-size: 16px; pointer-events: none; }
.mh-in.pre i { left: 13px; }
.mh-in.pre .inp { padding-left: 28px; }
.mh-in.post i { right: 13px; }
.mh-in.post .inp { padding-right: 56px; }
.mh-in .inp { font-size: 17px; padding-block: 11px; }
.mh-in input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.mh-in input[type="number"]::-webkit-outer-spin-button, .mh-in input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mh-go { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mh-msg { color: var(--bad); font-weight: 500; font-size: 14px; margin-top: 10px; }
.mh-msg:empty { display: none; }
.mh-mine { margin-top: 16px; }
.mh-mine .mh-opts { margin-top: 8px; }
.mh-why { margin-top: 14px; font-size: 14px; color: var(--muted); }
.mh-why summary { cursor: pointer; width: fit-content; font-weight: 500; }
.mh-why summary:hover { color: var(--fg); }
.mh-why p { margin-top: 6px; max-width: 62ch; color: var(--ink2); }
.mh-skips { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.mh-again { text-align: center; }

/* the picture */
.mh-pic { display: flex; flex-direction: column; gap: 18px; }
.mh-pic > div:empty { display: none; }
#mhLive2:empty { display: none; }
.mh-h { font-size: clamp(20px, 2.6vw, 25px); letter-spacing: -0.025em; line-height: 1.2; font-weight: 600; margin-top: 8px; }
.mh-hero { border: 2px solid var(--fg); border-radius: 14px; }
.mh-hero-head { display: flex; align-items: center; gap: 18px; }
.mh-hero-head .ms { width: 104px; }
.mh-line { margin-top: 14px; font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; max-width: 60ch; color: var(--ink2); }
.mh-line b { color: var(--fg); font-weight: 600; }
.mh-line .mh-big { font-size: 1.22em; white-space: nowrap; background: linear-gradient(transparent 60%, var(--lime) 60%); padding: 0 3px; }
.mh-fit { margin-top: 14px; font-size: 15px; color: var(--ink2); max-width: 70ch; }
.mh-fit .chip { margin-right: 6px; vertical-align: 1px; }
.mh-knobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px 30px; margin-top: 18px; }
.mh-knob { min-width: 0; }
.mh-knob-row { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.mh-knob-row output { flex: none; min-width: 78px; text-align: right; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.mh input[type="range"] { flex: 1 1 auto; width: 100%; min-width: 0; height: 30px; margin: 0; accent-color: var(--cobalt); cursor: pointer; }
.mh-knob .linkbtn { font-size: 13.5px; color: var(--accent); text-align: left; }
.mh-lend { margin: 18px 0 0; }
.mh-lend-plot { position: relative; padding-top: 56px; }
.mh-lend-bar { position: relative; height: 28px; border-radius: 6px; background: var(--track); overflow: hidden; }
.mh-lend-bar i { position: absolute; top: 0; bottom: 0; left: 0; transform-origin: 0 50%; }
.mh .b1, .mh .p1 { background: var(--cobalt); }
.mh .b2, .mh .p2 { background: #8ea0ff; }
.mh .b3 { background: repeating-linear-gradient(135deg, #c5ceff 0 6px, #e7ebff 6px 12px); }
.mh .p3 { background: #27336b; }
.mh .p4 { background: var(--lime); box-shadow: inset 0 0 0 1px #9bc41f; }
.mh .p5 { background: var(--bad); }
.mh-lend-bar u { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--fg); }
.mh-pin { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; white-space: nowrap; line-height: 1.2; }
.mh-pin b { font-size: 17px; font-weight: 600; }
.mh-pin em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.mh-pin::after { content: ""; width: 3px; height: 12px; background: var(--fg); margin-top: 5px; }
.mh-pin.right { transform: translateX(-100%); align-items: flex-end; }
.mh-pin.right::after { margin-right: -1.5px; }
.mh-pin.left { transform: none; align-items: flex-start; }
.mh-pin.left::after { margin-left: -1.5px; }
.mh-key { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; font-size: 14px; color: var(--ink2); }
.mh-key li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.mh-key i { width: 14px; height: 14px; border-radius: 3px; }
.mh-key b { font-weight: 600; color: var(--fg); }
.mh-key li.short b { color: var(--bad); }
.mh-steps { margin: 18px 0 0; }
.mh-steps ol { list-style: none; padding: 28px 0 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-items: end; }
.mh-steps li { position: relative; display: flex; flex-direction: column; text-align: center; gap: 4px; min-width: 0; }
.mh-step-bar { border-radius: 6px 6px 2px 2px; background: #dfe5ff; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; margin-bottom: 3px; transform-origin: 50% 100%; }
.mh-step-bar b { font-size: 13.5px; font-weight: 600; color: #1f2f9c; }
.mh-steps li.none .mh-step-bar { background: repeating-linear-gradient(135deg, var(--panel2) 0 6px, #fff 6px 12px); box-shadow: inset 0 0 0 1px var(--line2); }
.mh-steps li.me .mh-step-bar { background: var(--cobalt); }
.mh-steps li.me .mh-step-bar b { color: #fff; }
.mh-you { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; font-weight: 600; line-height: 1.3; background: var(--lime); color: var(--lime-ink); padding: 2px 8px; border-radius: 3px; }
.mh-step-pct { font-size: 13px; font-weight: 600; }
.mh-step-need { font-size: 12.5px; color: var(--muted); }
.mh-steps figcaption { margin-top: 14px; }
.mh-month { display: flex; height: 28px; border-radius: 6px; overflow: hidden; margin-top: 16px; background: var(--track); }
.mh-month i { display: block; height: 100%; transform-origin: 0 50%; }
.mh-scrub { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.mh-scrub .lab { flex: none; }
.mh-read { margin-top: 10px; padding: 12px 14px; background: var(--panel2); border-radius: var(--r-sm); font-size: 14px; color: var(--ink2); display: grid; gap: 5px; }
.mh-read > b { font-size: 15px; color: var(--fg); }
.mh-read span b { color: var(--fg); font-weight: 600; }
.mh-split { display: block; height: 8px; border-radius: 4px; background: var(--cobalt); overflow: hidden; margin-top: 4px; max-width: 420px; }
.mh-split i { display: block; height: 100%; background: #e28a69; }
.mh-flags { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.mh-flags li { padding: 11px 14px 11px 16px; border-left: 3px solid var(--cobalt); background: var(--surface); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 14.5px; color: var(--ink2); }
.mh-flags li b { color: var(--fg); font-weight: 600; }
.mh-flags a { color: var(--accent); text-underline-offset: 2px; }
.mh-docs { margin-top: 12px; }
.lenders { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.lenders li { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: var(--r); padding: 13px 14px; background: #fff; transition: border-color 0.2s; }
.lenders li:hover { border-color: rgba(21, 21, 21, 0.32); }
.lenders li > b { font-weight: 600; font-size: 15.5px; }
.lenders li > span { font-size: 13px; color: var(--muted); }
.lenders li div { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 9px; font-size: 14px; }
.lenders a { color: var(--accent); font-weight: 500; text-underline-offset: 2px; }
.pcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; margin-top: 14px; }
.pc { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; background: #fff; }
.pc-lead { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.pc-cols { display: grid; gap: 14px; margin-top: 12px; }
.pc-h { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.pc-h.good { color: var(--good); }
.pc-h.watch { color: var(--check); }
.pc-h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pc-h.watch::before { border-radius: 1px; transform: rotate(45deg); }
.pc ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--ink2); }
.pc li { position: relative; padding-left: 14px; }
.pc li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 6px; height: 1.5px; background: var(--dim); }
.mh-addbox { margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--line2); border-radius: var(--r); font-size: 14.5px; color: var(--ink2); }
.mh-addbox b { color: var(--fg); }
.mh-sent { margin-top: 8px; font-size: 13.5px; background: var(--panel2); padding: 9px 12px; border-radius: var(--r-sm); }
.mh-addbox .actions { margin-top: 12px; align-items: center; }
.mh-addbox .muted { font-size: 13.5px; }
/* the first time the picture appears, its charts draw themselves in */
.mh-pic.newly .mh-lend-bar i, .mh-pic.newly .mh-month i { animation: mh-grow 0.7s 0.15s var(--ease-out) both; }
.mh-pic.newly .mh-step-bar { animation: mh-rise 0.6s var(--ease-out) both; }
.mh-pic.newly .mh-steps li:nth-child(2) .mh-step-bar { animation-delay: 0.06s; }
.mh-pic.newly .mh-steps li:nth-child(3) .mh-step-bar { animation-delay: 0.12s; }
.mh-pic.newly .mh-steps li:nth-child(4) .mh-step-bar { animation-delay: 0.18s; }
.mh-pic.newly .mh-steps li:nth-child(5) .mh-step-bar { animation-delay: 0.24s; }
.mh-pic.newly .mh-steps li:nth-child(6) .mh-step-bar { animation-delay: 0.3s; }
.mh-pic.newly .mh-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mh-draw 1.1s 0.2s var(--ease-out) forwards; }
@keyframes mh-grow { from { transform: scaleX(0); } }
@keyframes mh-rise { from { transform: scaleY(0); } }
@keyframes mh-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 720px) {
  .mh-prog li span { display: none; }
  .mh-prog li.cur span { display: none; }
  .mh-turn.past { padding-left: 0; }
  .mh-early .mh-turn.past { grid-template-columns: minmax(0, 1fr); }
  .mh-early .mh-said { justify-self: end; }
  .mh-turn.now { flex-direction: column; gap: 8px; }
  .mh-card { width: 100%; padding: 16px; border-radius: 12px; }
  .mh-opt { flex: 1 1 100%; }
  .mh-opt.sm { flex: 0 1 auto; }
  .mh-hero-head .ms { width: 76px; }
  .mh-steps ol { grid-template-columns: 1fr; gap: 8px; padding-top: 4px; }
  .mh-steps li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 10px; text-align: left; }
  .mh-step-bar { order: 2; height: 28px !important; width: var(--w, 60%); min-width: 58px; border-radius: 3px 6px 6px 3px; padding: 0 0 0 9px; margin: 0; align-items: center; justify-content: flex-start; transform-origin: 0 50%; }
  .mh-pic.newly .mh-step-bar { animation-name: mh-grow; }
  .mh-step-pct { order: 1; }
  .mh-step-need { order: 3; }
  .mh-you { position: static; transform: none; grid-column: 1 / -1; order: 0; width: fit-content; }
}
.still .glowchip, .still .ms.ms-hop, .still .mh-turn.now .mh-av .ms { animation-play-state: paused; }
.still .mh-pic.newly .mh-draw { animation: none; stroke-dashoffset: 0; }
.still .mh-pic.newly .mh-lend-bar i, .still .mh-pic.newly .mh-month i, .still .mh-pic.newly .mh-step-bar, .still .mh-card { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .glowchip, .ms.ms-hop, .mh-turn.now .mh-av .ms, .mh-card, .ext.flash, .mh-pic.newly .mh-lend-bar i, .mh-pic.newly .mh-month i, .mh-pic.newly .mh-step-bar { animation: none !important; }
  .mh-pic.newly .mh-draw { animation: none !important; stroke-dashoffset: 0; }
  .ms-pupil, .ms-say { transition: none; }
}

/* ---------- 6 October 2026: banners that fold away. Small print and side notes live in these. ---------- */
.fold { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 14px; line-height: 1.5; text-align: left; transition: border-color 0.2s, background 0.2s; }
.fold:hover { border-color: var(--line2); }
.fold > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; color: var(--ink2); font-weight: 500; border-radius: var(--r); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "i"; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--dim); color: var(--muted); display: grid; place-items: center; font: 600 11px/1 var(--font); }
.fold > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -3px 3px 0 6px; border-right: 1.7px solid var(--muted); border-bottom: 1.7px solid var(--muted); transform: rotate(45deg); transition: transform 0.2s; }
.fold[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
.fold > summary:hover { color: var(--fg); }
.fold > summary:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.fold-t { flex: 1 1 auto; min-width: 0; }
.fold-t b { color: var(--fg); font-weight: 600; }
.fold-in { padding: 0 14px 12px 42px; color: var(--ink2); }
.fold-in p { margin: 0; max-width: 78ch; }
.fold-in p + p { margin-top: 8px; }
.fold-in a { color: var(--accent); text-underline-offset: 2px; }
.fold[open] { background: #fff; }
.panel > .fold:last-child, .mh-pic > .fold { margin-bottom: 0; }
.mh > .fold { margin-top: 0; }
/* a point from the answers: the point shows, the explanation folds */
.mh-flags li { padding: 0; border: 0; background: none; border-radius: 0; }
.fold.flag { margin-top: 0; border-left: 3px solid var(--cobalt); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.fold.flag > summary { padding: 11px 14px; color: var(--fg); font-weight: 600; font-size: 14.5px; }
.fold.flag > summary::before { display: none; }
.fold.flag .fold-in { padding-left: 14px; font-size: 14.5px; }
/* benefits and drawbacks: the name shows, the lists fold */
.fold.pc { margin-top: 0; padding: 0; background: #fff; align-self: start; }
.fold.pc > summary { padding: 13px 16px; align-items: flex-start; }
.fold.pc > summary::before { display: none; }
.fold.pc > summary::after { margin-top: 5px; }
.fold.pc[open] > summary::after { margin-top: 10px; }
.fold.pc .fold-t { display: flex; flex-direction: column; gap: 2px; }
.fold.pc .h3 { margin: 0; color: var(--fg); }
.fold.pc .pc-lead { margin: 0; font-weight: 400; }
.fold.pc .pc-cols { margin-top: 0; padding: 2px 16px 16px; }
.pcs { align-items: start; }
/* "Look closer": what follows the sliders on the mortgage picture is a list of closed rows, one line each, so the page opens on the answer */
.mh-rows .mh-h { margin-top: 0; }
.mh-rows > .sub { margin-top: 6px; }
.mh-list { margin-top: 14px; border-top: 1px solid var(--fg); }
.mh-sub { margin: 30px 0 0; font-family: var(--font); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; text-wrap: balance; }
.mh-sub.first { margin-top: 4px; }
.more-in .mh-lend, .more-in .mh-steps, .more-in .chart { margin-top: 4px; }
.more-in > .kv:first-child { margin-top: 0; }
/* "Interest over the whole 30 years, if the rate never changed" is a sentence, not a short label: on a phone it wraps beside its figure instead of running past the edge (a panel used to cut it off) */
#mortStress li span:first-child { white-space: normal; }
#mortStress li:first-child > span:last-child { flex: none; }
.more-in .pcs:first-child { margin-top: 0; }
.mh-src { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.mh-steps figcaption .fold { margin-top: 10px; }
@media (max-width: 720px) { .fold-in { padding-left: 14px; } }
@media (prefers-reduced-motion: reduce) { .fold, .fold > summary::after { transition: none; } }
@media print { .fold > .fold-in { display: block; } .fold > summary::after { display: none; } }

/* ---------- 6 October 2026: up and coming areas, the checkout, and a helper that adapts ---------- */
.rise-cities { margin-top: 16px; }
.rise-city { margin-top: 14px; font-size: 14.5px; color: var(--ink2); }
.rise-city b { color: var(--fg); font-weight: 600; }
.rises { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.rise { display: grid; grid-template-columns: 66px minmax(0, 1.2fr) minmax(90px, 1fr) 74px; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.rise:hover { border-color: var(--fg); transform: translateY(-1px); }
.rise:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.rise-code { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; text-align: center; padding: 8px 0; border-radius: 6px; background: var(--sky); color: #1f2f9c; }
.rise-tx { display: flex; flex-direction: column; min-width: 0; }
.rise-tx b { font-weight: 600; font-size: 15px; }
.rise-tx i { font-style: normal; font-size: 13px; color: var(--muted); }
.rise-bar { position: relative; height: 10px; border-radius: 5px; background: var(--track); }
.rise-bar u { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--cobalt); }
.rise-bar s { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--fg); }
.rise-pct { text-align: right; font-weight: 600; font-size: 16px; color: var(--good); }
#risingSlot:empty { display: none; }
@media (max-width: 640px) {
  .rise { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px 12px; }
  .rise-bar { grid-column: 1 / -1; grid-row: 2; }
}
.mh .p6 { background: #c5ceff; }
.mh-follow { display: block; font-size: 13px; color: var(--muted); }
.mh-follow[hidden] { display: none; }

/* ============ Home page, rows and rules (6 October 2026, evening) ============
   Section titles sit in a rail on the left with the content beside them. Lists of what a check holds
   are rows with a rule between them, each ending in where the figure comes from. No moving strips,
   no glow behind cards, and headlines in one colour. */
.h-line { display: block; }
.home .sect > h2, .home .news-head h2, .home .sect > .lead, .home .news-head .lead, .proc-head, .proc-foot { text-align: left; margin-inline: 0; }
.home .sect.side { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 88px); row-gap: 28px; align-items: start; text-align: left; }
.home .sect.side > .side-h { position: sticky; top: 92px; min-width: 0; }
.home .sect.side > .side-b { min-width: 0; margin-top: 0; }
.home .sect h2, .home .news-head h2, .proc-head h2 { font-size: clamp(27px, 3.1vw, 38px); line-height: 1.08; letter-spacing: -0.032em; text-align: left; }
.home .sect.side .lead { max-width: 44ch; margin-inline: 0; text-align: left; }
.home .sect.side .fine { margin: 18px 0 0; max-width: 44ch; }
.home .sect.side .fine a, .home .sect.side .lead a { color: var(--accent); text-underline-offset: 2px; }

.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg); }
.ledger li { display: grid; grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) auto; column-gap: 20px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.ledger li b { font-weight: 600; letter-spacing: -0.01em; }
.ledger li > span:not(.tag) { color: var(--ink2); }
.ledger .tag { justify-self: end; }
.tag.osm { color: var(--ink2); background: none; box-shadow: inset 0 0 0 1px var(--line); }
.ledger-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; font-family: var(--font); font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.ledger-h small { font-weight: 400; font-size: 13.5px; color: var(--muted); letter-spacing: 0; }
.ledger + .ledger-h { margin-top: 44px; }
.kinds { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; color: var(--ink2); max-width: 44ch; }
.kinds li { display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
.kinds .tag { justify-self: start; }

.workson { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 22px 0 clamp(40px, 6vw, 64px); }
.workson .bits { margin: 0; }
.wo-l { font-size: 14px; color: var(--muted); }

.home .starts { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); border-top: 1px solid var(--fg); }
.home .start, .home .start:hover { flex-direction: row; align-items: center; text-align: left; gap: 18px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; translate: none; }
.home .start:hover b, .home .start:focus-visible b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.home .start .pic { width: 92px; height: 69px; flex: none; }
.home .start b { font-size: 16.5px; }

.home .sect.price { text-align: left; }
.home .sect.price .fine { margin: 14px 0 0; }
.home .faqs { margin-top: 0; border-top-color: var(--fg); }
.home .revs-more { text-align: left; }

@media (max-width: 900px) {
  .home .sect.side { grid-template-columns: minmax(0, 1fr); }
  .home .sect.side > .side-h { position: static; }
  .home .sect.side .lead, .home .sect.side .fine, .kinds { max-width: 60ch; }
}
@media (max-width: 620px) {
  .ledger li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; }
  .ledger li > span:not(.tag) { grid-column: 1 / -1; grid-row: 2; }
  .home .starts { grid-template-columns: minmax(0, 1fr); }
  .home .start .pic { width: 76px; height: 57px; }
}
@media print { .home .sect.side { display: block; } .home .sect.side > .side-h { position: static; margin-bottom: 16px; } }

/* ---------- level-up pass, 9 October 2026 ----------
   Same look, more finish. The typewriter face is kept for what it means (where a figure comes from,
   dates, the photo credit and table heads); labels and card titles are plain words in the reading face.
   The street builds itself once on arrival, the sky follows the visitor's clock, and "How a check works"
   draws itself the first time it scrolls into view. Everything that moves stops with "Pause animations"
   and for people who ask for less motion. */

/* The parts of the page nobody draws still carry the look. */
::selection { background: #e3fb9c; color: var(--lime-ink); }
html { caret-color: var(--cobalt); scrollbar-width: thin; scrollbar-color: #c3c8d2 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c3c8d2; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #9ca3af; }
::-webkit-scrollbar-track { background: transparent; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--cobalt); }
p, li, dd, figcaption, summary { text-wrap: pretty; }
a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
td, th, .tile b, .kv b { font-variant-numeric: tabular-nums; }
.inp, select { caret-color: var(--cobalt); }

/* Labels and card titles: plain words, not capitals in the typewriter face. */
.lab { font-family: var(--font); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.lab:has(+ h1) { font-size: 14px; }
.card-hd, .panel > .lab:first-child, .unlock > div:first-child > .beta:first-child, .offer > div:first-child > .beta:first-child {
  font-family: var(--font); font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; text-transform: none; color: var(--fg);
}
.card .beta, .choice .beta { font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg); }

/* ---- home: the street builds itself, once, when the home page opens ---- */
.street .bld, .street .clouds { transform-box: fill-box; transform-origin: 50% 100%; }
#app[data-enter] .hero3 .street .bld { animation: bld-rise 0.8s var(--spring) both; animation-delay: calc(0.12s + var(--d) * 0.12s); }
#app[data-enter] .hero3 .street .clouds { animation: clouds-in 1.6s var(--ease-out) 0.1s both; }
#app[data-enter] .hero3 .pic-tick { animation-delay: 0.95s; }
@keyframes bld-rise { from { opacity: 0; transform: translateY(22px) scaleY(0.8); } 55% { opacity: 1; } }
@keyframes clouds-in { from { opacity: 0; transform: translateX(-28px); } }

/* ---- the sky follows the clock ---- */
.sky-dawn { --sky: #fff1e6; }
.sky-day { --sky: #eaf0ff; }
.sky-dusk { --sky: #f1eaff; }
.sky-night { --sky: #e3e8f7; }
.street .sky-orb { opacity: 0; transition: opacity 0.6s; }
.street .sky-orb circle { fill: #ffcf9e; }
.street .sky-orb .sky-orb-cut { display: none; }
.sky-dawn .street .sky-orb, .sky-dusk .street .sky-orb, .sky-night .street .sky-orb { opacity: 1; }
.sky-dusk .street .sky-orb circle, .sky-night .street .sky-orb circle { fill: #fff3c4; }
.sky-dusk .street .sky-orb .sky-orb-cut, .sky-night .street .sky-orb .sky-orb-cut { display: inline; fill: var(--sky); }
.sky-dusk .street .wg.on { fill: #ffe3a1; }
.sky-night .street .wg.on { fill: #ffd27a; }
.sky-night .street .clouds { opacity: 0.7; }

/* ---- home: the account offer and the extension, two ways in, side by side ---- */
.home .doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0 0 clamp(4px, 1vw, 12px); }
.home .doors .offer { max-width: none; margin: 0; grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: 22px; padding: 26px 28px 28px; }
.home .doors .offer > div:first-child > .beta:first-child { position: static; display: inline-flex; margin: 0 0 14px; padding: 0; background: none; border: 0; font-size: 13px; color: #2b41d6; }
.home .doors .offer:first-child { background: var(--sky); border-color: color-mix(in srgb, var(--cobalt) 16%, var(--line)); }
.home .doors .offer h2 { font-size: clamp(22px, 2.4vw, 27px); }
.home .doors .offer .actions { justify-content: flex-start; }
.home .doors .offer { position: relative; }
.home .doors .door-pic { position: absolute; right: 14px; bottom: 10px; pointer-events: none; }
.home .doors .door-pic .pic { width: 104px; height: 78px; }
.home .doors .offer > div:first-child { padding-right: 0; }
.home .doors .offer .actions, .home .doors .offer > div:first-child > p { margin-right: 108px; }

/* ---- home: what a complete check holds, in four groups ---- */
.ledger-groups { columns: 2; column-gap: clamp(22px, 3vw, 40px); border-top: 1px solid var(--fg); padding-top: 18px; }
.ledger-group { break-inside: avoid; margin-bottom: 22px; }
.ledger.full { border-top: 0; }
.ledger.full li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; padding: 11px 0; }
.ledger.full li > span:not(.tag) { grid-column: 1 / -1; grid-row: 2; font-size: 14px; }

/* ---- How a check works: the line draws itself and Seeka's tick runs along it, once ---- */
.proc-steps { position: relative; }
.proc-run { position: absolute; top: 45px; left: calc((100% - 84px) / 8); width: 30px; height: 30px; margin-left: -15px; opacity: 0; pointer-events: none; z-index: 2; list-style: none; }
.proc-run svg { display: block; filter: drop-shadow(0 4px 6px rgba(39, 51, 107, 0.25)); }
.proc-steps.armed .proc-step:not(.end)::before { clip-path: inset(0 100% 0 0); }
.proc-steps.armed.seen .proc-step:not(.end)::before { animation: line-draw 0.55s var(--ease-out) both; animation-delay: calc(0.25s + var(--i) * 0.55s); }
.proc-steps.armed.seen .proc-n { animation: n-pop 0.5s var(--spring) both; animation-delay: calc(0.1s + var(--i) * 0.55s); }
.proc-steps.armed.seen .proc-run { animation: run-along 1.95s cubic-bezier(0.45, 0, 0.25, 1) 0.2s both; }
@keyframes line-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes n-pop { from { transform: scale(0.55); } }
@keyframes run-along {
  0% { left: calc((100% - 84px) / 8); opacity: 0; transform: translateY(8px); }
  8% { opacity: 1; transform: none; }
  86% { left: calc(100% - (100% - 84px) / 8); opacity: 1; transform: none; }
  100% { left: calc(100% - (100% - 84px) / 8); opacity: 0; transform: translateY(-16px) scale(0.6); }
}

/* ---- footer: a little more finish ---- */
.foot-col a { text-decoration-thickness: 1px; }
.foot-brand .logo .mark { transition: transform 0.3s var(--spring); }
.foot-brand .logo:hover .mark { transform: rotate(-8deg); }

@media (max-width: 960px) { .proc-run { display: none; } }
@media (max-width: 760px) {
  .home .doors { grid-template-columns: minmax(0, 1fr); }
  .ledger-groups { columns: 1; }
}
@media (max-width: 420px) { .home .doors .door-pic { display: none; } .home .doors .offer .actions, .home .doors .offer > div:first-child > p { margin-right: 0; } .home .doors .offer { padding: 22px 20px; } }
.still .street .bld, .still .street .clouds, .still .proc-steps .proc-step::before, .still .proc-n, .still .proc-run { animation: none !important; }
.still .proc-steps.armed .proc-step:not(.end)::before { clip-path: none; }
@media (prefers-reduced-motion: reduce) {
  .street .bld, .street .clouds, .proc-steps .proc-step::before, .proc-n, .proc-run { animation: none !important; }
  .proc-steps.armed .proc-step:not(.end)::before { clip-path: none; }
  .foot-brand .logo .mark { transition: none; }
}
@media print { .proc-run, .street .sky-orb { display: none; } }

/* ---- report: each part of the report has a small icon in a soft square ---- */
.sec .si { flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: #eef1fb; color: #27336b; transition: background-color 0.2s, color 0.2s; }
.sec .si svg { width: 19px; height: 19px; }
.sec[open] > summary .si, .sec > summary:hover .si { background: var(--cobalt); color: #fff; }
.sec > summary { gap: 14px; }
@media (max-width: 700px) { .sec .si { width: 30px; height: 30px; } }
@media print { .sec .si { display: none; } }

/* ---- footer: a quiet grey band across the full width, so the page has a clear end ---- */
footer { background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); border-top-color: transparent; }
@media print { footer { background: none; box-shadow: none; clip-path: none; } }

/* ---------- Areas: hot spots (9 October 2026) ----------
   A dot map of a city's postcode districts, coloured by the yearly change in sold prices (blue for
   falls, grey for none, warm for rises), sized by sales; no street map underneath. Under it, the same
   districts ranked, so every figure can be read without the map. */
.rise-h { margin-top: 30px; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.rise-sub { margin-top: 4px; font-size: 14px; color: var(--muted); max-width: 64ch; }
.rises { margin-top: 14px; }
.hs { margin-top: 6px; }
.hs-filter { margin-top: 14px; }
/* the map and the card beside it */
.hs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; margin-top: 14px; align-items: start; }
.hs-map { margin: 0; min-width: 0; }
.hs-plot { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid #d9e0f3; background: radial-gradient(120% 90% at 30% 10%, #ffffff 0%, #f1f4fd 55%, #e8edfb 100%); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.hs-plot:not(.zoomed) { cursor: default; }
.hs-plot.dragging { cursor: grabbing; }
.hs-plot:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.hs-plot svg:not(.hs-north) { display: block; width: 100%; height: auto; }
#hsView { transform-origin: 0 0; will-change: transform; }
#hsGrid circle { fill: #b9c4e6; opacity: 0.7; }
.hs-dot { cursor: pointer; outline: none; transition: opacity 0.2s; }
.hs-sc { transform: scale(var(--ds, 1)); }
.hs-c { stroke: #fff; stroke-width: 2px; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 2px rgba(14, 17, 22, 0.35)); transition: stroke 0.15s, stroke-width 0.15s; }
.hs-hit { fill: transparent; }
.hs-halo { fill: none; stroke: var(--cobalt); stroke-width: 3px; vector-effect: non-scaling-stroke; opacity: 0; transform-origin: 50% 50%; transform-box: fill-box; }
.hs-dot:hover .hs-c, .hs-dot.hs-hov .hs-c, .hs-dot:focus-visible .hs-c { stroke: var(--fg); stroke-width: 2.5px; }
.hs-dot:focus-visible .hs-halo { opacity: 1; transform: scale(1.5); }
.hs-dot.sel .hs-c { stroke: var(--cobalt); stroke-width: 3px; }
.hs-dot.sel .hs-halo { opacity: 0.55; animation: hs-ping 1.8s ease-out infinite; }
@keyframes hs-ping { from { transform: scale(1); opacity: 0.6; } to { transform: scale(2.1); opacity: 0; } }
.hs-dot.dim { opacity: 0.14; pointer-events: none; }
.hs-lab { font-family: var(--font); font-size: 12px; font-weight: 600; fill: var(--fg); paint-order: stroke; stroke: #f1f4fd; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; display: none; transform: translateY(calc((var(--r) * var(--ds, 1) + 6 * var(--ls, 1)) * -1px)) scale(var(--ls, 1)); }
.hs-dot.top .hs-lab, .hs-dot.sel .hs-lab, .hs-dot.hs-hov .hs-lab, .hs-plot.z2 .hs-lab { display: block; }
.hs-tools { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 1px; background: var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--lift); }
.hs-tools button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: #fff; color: var(--fg); cursor: pointer; transition: background 0.15s; }
.hs-tools button svg { width: 18px; height: 18px; }
.hs-tools button:hover:not(:disabled) { background: var(--panel2); }
.hs-tools button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -2px; }
.hs-tools button:disabled { color: var(--dim); cursor: default; }
.hs-north { position: absolute; left: 12px; top: 10px; fill: var(--muted); pointer-events: none; }
.hs-north text { font-family: var(--font); font-size: 9px; font-weight: 600; }
.hs-scalebar { position: absolute; left: 12px; bottom: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; white-space: nowrap; pointer-events: none; font-size: 11.5px; color: var(--ink2); }
.hs-scalebar i { display: block; height: 6px; border: 1.5px solid var(--ink2); border-top: 0; min-width: 6px; }
.hs-tip { position: absolute; z-index: 3; max-width: 260px; padding: 8px 11px; background: var(--fg); color: #fff; border-radius: 8px; font-size: 13px; line-height: 1.45; pointer-events: none; box-shadow: var(--lift); }
.hs-tip b { font-weight: 600; }
.hs-key { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 22px; margin-top: 12px; }
.hs-scale { display: flex; flex-direction: column; gap: 4px; width: 200px; flex: none; }
.hs-ramp { display: block; height: 10px; border-radius: 5px; }
.hs-ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.hs-keytx { flex: 1 1 260px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.hs-card { position: sticky; top: 84px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--lift); min-height: 200px; }
.hs-card-in .lab { display: block; margin-bottom: 8px; }
.hs-hint-tx { font-size: 14px; color: var(--ink2); margin: 0 0 12px; }
.hs-pick { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.hs-pick:hover { border-color: var(--fg); transform: translateY(-1px); }
.hs-pick:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.hs-pick span:last-child { display: flex; flex-direction: column; min-width: 0; }
.hs-pick b { font-weight: 600; font-size: 14.5px; }
.hs-pick i { font-style: normal; font-size: 12.5px; color: var(--muted); }
.hs-card-top { display: flex; align-items: center; gap: 12px; }
.hs-card-top .hs-code { flex: none; min-width: 58px; }
.hs-card-top b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.hs-card-top small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.hs-big { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 6px; }
.hs-big b { font-size: 38px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--fg); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--c) 38%, transparent) 62%); }
.hs-big span { font-size: 14px; color: var(--muted); }
.hs-dl { margin: 10px 0 14px; }
.hs-dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.hs-dl dt { color: var(--muted); }
.hs-dl dd { margin: 0; font-weight: 600; text-align: right; }
.hs-card .actions { gap: 8px; }
.hs-card .fine { margin-top: 12px; }
.hs-list { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--fg); }
.hs-more .hs-list { margin-top: 0; border-top: 0; }
/* on a postcode's own page the rising-areas section is one line that leads to it (the Areas page keeps the whole section) */
.rise-go { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; padding: 18px 2px; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; border-radius: 0; }
.rise-go span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rise-go b { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }
.rise-go i { font-style: normal; font-size: 14px; line-height: 1.4; color: var(--muted); }
.rise-go::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px; border-top: 1.7px solid var(--muted); border-right: 1.7px solid var(--muted); transform: rotate(45deg); transition: transform 0.2s; }
.rise-go:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.rise-go:hover::after { transform: translateX(3px) rotate(45deg); }
.rise-go:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
@media (max-width: 720px) { .rise-go { padding: 16px 2px; } .rise-go b { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .rise-go::after { transition: none; } }

/* ---------- Areas: the budget (20 October 2026) ----------
   A box above the up and coming list where a signed-in member sets the most they would spend and, under each area, a line of counts
   from sold prices: how many of the homes that sold went for that much or less. It is plain text on the area's own card; no colour
   carries any meaning. A guest sees only the invitation to sign in. */
.bud { display: grid; gap: 10px; margin-top: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.bud-t { margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.bud-s { margin: 0; max-width: 66ch; font-size: 14px; color: var(--ink2); }
.bud-s a, .bud .hint a { color: var(--accent); text-underline-offset: 2px; }
.bud .actions { margin-top: 2px; }
.bud-set { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.bud-now { margin: 0; font-size: 15px; color: var(--ink2); }
.bud-now b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
.bud-acts { display: flex; gap: 16px; }
.bud-form { display: grid; gap: 8px; }
.bud-l { font-size: 14px; font-weight: 500; }
.bud-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bud-row .inp { flex: 0 1 11em; width: 11em; max-width: 100%; }
.bud-chips { margin-top: 2px; }
.rise.has-bud { row-gap: 9px; }
.rise-bud { grid-column: 1 / -1; display: block; padding-top: 9px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--ink2); }
.rise-bud b { font-weight: 600; color: var(--fg); }
.rise-bud-2 { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) { .bud { padding: 14px 14px; } .bud-row .inp { flex-basis: 100%; width: 100%; } }
.hs-li { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); transition: background-color 0.15s; }
.hs-li[hidden] { display: none; }
.hs-li.hs-hov, .hs-li:hover { background: var(--surface); }
.hs-li.sel { background: #eef1ff; box-shadow: inset 3px 0 0 var(--cobalt); }
.hs-row { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 22px 64px minmax(0, 1.3fr) minmax(90px, 1fr) 70px; align-items: center; gap: 14px; padding: 10px 2px 10px 6px; text-decoration: none; color: inherit; }
.hs-row:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -2px; }
.hs-loc { flex: none; width: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; transition: color 0.15s; }
.hs-loc svg { width: 18px; height: 18px; }
.hs-loc:hover { color: var(--cobalt); }
.hs-loc:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -2px; }
.hs-n { font-size: 12.5px; color: var(--muted); text-align: right; }
.hs-code { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-align: center; padding: 5px 0; border-radius: 6px; }
.hs-tx { display: flex; flex-direction: column; min-width: 0; }
.hs-tx b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-tx i { font-style: normal; font-size: 12.5px; color: var(--muted); }
.hs-bar { position: relative; height: 8px; border-radius: 4px; background: var(--track); }
.hs-bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--muted); }
.hs-bar u { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.hs-pct { text-align: right; font-weight: 600; font-size: 15px; color: var(--fg); }
.hs-more > summary { cursor: pointer; padding: 12px 2px; font-size: 14px; font-weight: 500; color: var(--accent); }
@media (max-width: 900px) {
  .hs-layout { grid-template-columns: minmax(0, 1fr); }
  .hs-card { position: static; min-height: 0; }
}
@media (max-width: 640px) {
  .hs-row { grid-template-columns: 18px 56px minmax(0, 1fr) auto; gap: 6px 10px; }
  .hs-bar { grid-column: 2 / -1; grid-row: 2; }
  .hs-scale { width: 100%; }
  .hs-big b { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { .hs-dot, .hs-c, .hs-li, .hs-pick { transition: none; } .hs-dot.sel .hs-halo { animation: none; opacity: 0.5; } #hsView { transition: none !important; } }
.still .hs-dot.sel .hs-halo { animation: none; opacity: 0.5; }
@media print { .hs-tip, .hs-tools { display: none; } }

/* The real street map under the hot spots (MapLibre GL JS; hotmap.js lays the dots on it). The dot map above is what shows when this cannot.
   .hs-glslot holds the place while the map is fetched; the live map node (.hs-glmap) takes over the same spot. */
.hs-glslot, .hs-glmap { position: relative; width: 100%; height: clamp(340px, 52vw, 500px); border-radius: 16px; border: 1px solid #d9e0f3; overflow: hidden; background-color: #f3f3ef; }
.hs-glmap.sk, .hs-glslot.sk { border-radius: 16px; }
.hs-glbase { width: 100%; height: 100%; }
.hs-glmap .hs-tools { top: 10px; bottom: auto; right: 10px; z-index: 2; }
.hs-glmap .hs-tip { z-index: 3; }
.hs-glmap .maplibregl-canvas:focus-visible { outline: 3px solid var(--cobalt); outline-offset: -3px; }
.hs-glmap .maplibregl-ctrl-attrib { font-family: var(--font); font-size: 11px; }
.hs-glmap .maplibregl-ctrl-scale { font-family: var(--font); font-size: 11px; color: var(--ink2); background-color: rgba(255, 255, 255, 0.86); border-color: rgba(60, 64, 67, 0.5); border-width: 0 1.5px 1.5px; border-radius: 0 0 4px 4px; padding: 1px 6px 0; }
.hs-glnote { position: absolute; left: 10px; right: 56px; bottom: 34px; margin: 0; z-index: 2; padding: 8px 11px; font-size: 13px; line-height: 1.45; color: var(--ink2); background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line); border-radius: 8px; }
.hs-glnote[hidden] { display: none; }
.hs-credit { display: inline; }
.hs-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hs-credit a:hover { color: var(--fg); }
@media (max-width: 640px) { .hs-glslot, .hs-glmap { height: 380px; } }
@media print { .hs-glmap .maplibregl-control-container, .hs-glhint, .hs-pulse { display: none; } }

/* The buttons on the live map: zoom in and out, show the whole city, tip the map to see buildings in 3D, and a compass that
   turns north back to the top (it only works once the map has been turned). */
.hs-glmap .hs-tools { border-radius: 12px; }
.hs-glmap .hs-tools button { width: 40px; height: 40px; }
.hs-tools .hs-t3 b { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; }
.hs-tools .hs-t3.on { background: #eef1ff; color: var(--cobalt); }
.hs-tools .hs-compass svg { width: 22px; height: 22px; transition: transform 0.2s; }
.hs-tools .hs-compass:disabled svg { opacity: 0.4; }
@media (pointer: coarse) { .hs-glmap .hs-tools button { width: 44px; height: 44px; } }
/* a hint that goes by itself after a few seconds (for example, how to see the buildings) */
.hs-glhint { position: absolute; left: 10px; right: 64px; top: 10px; margin: 0; z-index: 2; padding: 8px 11px; font-size: 13px; line-height: 1.45; color: #fff; background: rgba(14, 17, 22, 0.88); border-radius: 8px; pointer-events: none; }
.hs-glhint[hidden] { display: none; }
/* The ring that spreads out from the chosen district. hotmap.js puts this element on the map and sets --d to the width of the dot. */
.hs-pulse { width: var(--d, 28px); height: var(--d, 28px); border-radius: 50%; pointer-events: none; }
.hs-pulse::before, .hs-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cobalt); opacity: 0; animation: hs-pulse 2.6s ease-out infinite; }
.hs-pulse::after { animation-delay: 1.3s; }
@keyframes hs-pulse { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hs-pulse::before, .hs-pulse::after { animation: none; }
  .hs-pulse::before { opacity: 0.55; transform: scale(1.5); }
  .hs-tools .hs-compass svg { transition: none; }
}
.still .hs-pulse::before, .still .hs-pulse::after { animation: none; }
.still .hs-pulse::before { opacity: 0.55; transform: scale(1.5); }
.still .hs-tools .hs-compass svg { transition: none; }

/* ---------- the scene while a check runs (9 October 2026) ---------- */
.scan { display: block; width: min(320px, 82vw); height: auto; margin: 0 auto 4px; overflow: visible; }
.sc-ground { stroke: #c4cdea; stroke-width: 2; stroke-linecap: round; fill: none; }
.sc-h { fill: #eef1ff; stroke: var(--cobalt); stroke-width: 2.5; stroke-linejoin: round; }
.sc-w { fill: #fff; stroke: #8ea0ff; stroke-width: 1.6; }
.sc-glass { fill: rgba(255, 255, 255, 0.55); }
.sc-rim { fill: none; stroke: var(--cobalt); stroke-width: 5; }
.sc-handle { fill: none; stroke: var(--fg); stroke-width: 7; stroke-linecap: round; }
.sc-bar { fill: var(--lime); opacity: 0.9; }
.sc-lens { transform: translate(124px, 66px); }
.sc-home:nth-of-type(2) .sc-h { fill: #e2e8ff; }
.sc-looks { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 0; padding: 0; }
.sc-looks li { font-size: 13.5px; font-weight: 500; color: var(--ink2); padding: 6px 13px; border: 1px solid var(--line2); border-radius: 999px; background: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .scan .sc-lens { animation: sc-glide 6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
  .scan .sc-bar { animation: sc-sweep 1.1s ease-in-out infinite alternate; }
  .scan .sc-home .sc-h { animation: sc-lit 6s ease-in-out var(--d) infinite; }
  .scan .sc-home .sc-w { animation: sc-glow 6s ease-in-out var(--d) infinite; }
  .sc-looks.n5 li { animation: sc-look5 7s ease-in-out infinite; animation-delay: calc(var(--i) * 1.4s); }
  .sc-looks.n2 li { animation: sc-look2 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * 1.6s); }
}
@keyframes sc-glide { 0%, 24% { transform: translate(46px, 70px); } 36%, 58% { transform: translate(124px, 66px); } 70%, 90% { transform: translate(196px, 64px); } 100% { transform: translate(46px, 70px); } }
@keyframes sc-sweep { from { transform: translateY(-24px); } to { transform: translateY(24px); } }
@keyframes sc-lit { 0%, 3%, 30%, 100% { fill: #eef1ff; } 8%, 24% { fill: #f4fbd6; } }
@keyframes sc-glow { 0%, 3%, 30%, 100% { fill: #fff; } 8%, 24% { fill: var(--lime); } }
@keyframes sc-look5 { 0%, 100% { background: #fff; border-color: var(--line2); color: var(--ink2); } 3%, 17% { background: var(--fg); border-color: var(--fg); color: #fff; } 22% { background: #fff; border-color: var(--line2); color: var(--ink2); } }
@keyframes sc-look2 { 0%, 100% { background: #fff; border-color: var(--line2); color: var(--ink2); } 6%, 44% { background: var(--fg); border-color: var(--fg); color: #fff; } 50% { background: #fff; border-color: var(--line2); color: var(--ink2); } }
.still .scan .sc-lens, .still .scan .sc-bar, .still .scan .sc-home .sc-h, .still .scan .sc-home .sc-w, .still .sc-looks li, .still .lens .ln-ring, .still .lens .ln-tick { animation-play-state: paused !important; }

/* ---------- short check and complete check, side by side (9 October 2026) ---------- */
.cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line2); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--lift); }
.cmp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.cmp li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; }
.cmp li span { display: flex; flex-direction: column; min-width: 0; }
.cmp li b { font-weight: 600; }
.cmp li i { font-style: normal; font-size: 13px; color: var(--muted); margin-top: 1px; }
.reviews.none .lead { max-width: 62ch; }
@media (max-width: 760px) {
  .cmp { grid-template-columns: minmax(0, 1fr); }
}

/* Onboarding: one-press sign-in on a listing's "keep this search" panel, and the plain trust line by the paste box. */
.unlock-auth .oauth { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.unlock-auth .oauth .btn { flex: 1 1 220px; }
.unlock-auth .oauth .hint { flex: 1 1 100%; margin-top: 2px; font-size: 12.5px; }
.unlock-trust { margin-top: -4px; font-size: 12.5px; }
.unlock-trust a { white-space: normal; }
.hero3 .trustline { margin-top: 4px; text-align: center; font-size: 13px; color: var(--ink2); }

/* ---------- 12 October 2026: how far to trust the price comparison ----------
   The third dial says in words what was tested; the fold under Price shows what the test found, what it means in
   pounds for this home, and which group the home is in. The strip reuses the price scale's marks. */
.dialrow span .linkbtn { font-size: inherit; font-weight: 500; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; padding: 0; }
.dialrow span .linkbtn:hover { color: var(--fg); }
.dialrow span .linkbtn:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 2px; }
.fold.trustfold .fold-in { padding-bottom: 16px; }
.fold.trustfold .fold-in > p { margin-top: 10px; }
.fold.trustfold .fold-in > p:first-child { margin-top: 0; }
.fold.trustfold .tr-find { margin-top: 12px; }
.fold.trustfold .tr-find .tile b:not(.big) { color: var(--fg); font-weight: 600; }
.fold.trustfold .tr-h { margin-top: 22px; color: var(--fg); }
.fold.trustfold .tr-h + p { margin-top: 6px; }
.tbar { margin-top: 14px; }
.tbar .track .range.w20 { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.tbar .track .range.half { background: color-mix(in srgb, var(--accent) 34%, transparent); }
.tkey { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 13.5px; color: var(--ink2); }
.tkey li { display: flex; gap: 10px; align-items: center; min-width: 0; }
.tkey li span { min-width: 0; }
.tkey b { color: var(--fg); font-weight: 600; }
.tk { flex: none; position: relative; width: 24px; height: 16px; }
.tk::before { content: ""; position: absolute; }
.tk.half::before { inset: 1px 0; border-radius: 3px; background: color-mix(in srgb, var(--accent) 34%, #fff); }
.tk.w20::before { inset: 1px 0; border-radius: 3px; background: color-mix(in srgb, var(--accent) 13%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 30%, #fff); }
.tk.med::before { left: 10px; top: -2px; width: 4px; height: 20px; border-radius: 2px; background: var(--accent); }
.tk.ask::before { left: 5px; top: 1px; width: 14px; height: 14px; background: var(--fg); transform: rotate(45deg) scale(0.78); }
.tr-gap { margin-top: 12px; padding: 11px 14px; border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--panel2); color: var(--fg); }
.tr-lim { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; max-width: 78ch; }
.trust-t { margin-top: 0; }
.trust-t td:first-child { min-width: 0; }
@keyframes flash-ring { from { box-shadow: 0 0 0 4px rgba(200, 245, 69, 0.95); } to { box-shadow: 0 0 0 4px rgba(200, 245, 69, 0); } }
.fold.flash { animation: flash-ring 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .fold.flash { animation: none; } }

/* ---------- showing that something is on its way
   A thin bar across the top while the site is fetching from the backend, grey boxes where figures are about
   to land, a line saying when they were fetched, and a notice when Seeka cannot be reached. Every one of
   them follows a real request or a real loss of connection. Nothing here waits for show. */
#bar { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 70; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease-out); }
#bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 38%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--cobalt), #7a8fff); transform: translateX(-110%); }
html.busy #bar { opacity: 1; transition-duration: 0.1s; }
html.busy #bar i { animation: bar-run 1.2s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
@keyframes bar-run { 0% { transform: translateX(-110%); } 100% { transform: translateX(290%); } }
.sk { display: block; min-height: 14px; border-radius: 6px; background: linear-gradient(100deg, var(--panel2) 30%, #fbfbfc 50%, var(--panel2) 70%) 120% 0 / 240% 100%; animation: sk-sweep 1.5s ease-in-out infinite; }
@keyframes sk-sweep { to { background-position: -120% 0; } }
.sk-fresh { display: inline-block; width: min(300px, 70%); height: 12px; min-height: 12px; vertical-align: middle; }
.sk-h { width: min(420px, 70%); height: 30px; }
.sk-p { width: min(560px, 90%); height: 16px; margin-top: 14px; }
.sk-news { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--line); }
.sk-news li { display: flex; flex-direction: column; gap: 10px; padding: 20px 2px; border-bottom: 1px solid var(--line); min-width: 0; }
.sk-m { width: 140px; height: 14px; }
.sk-t { width: 92%; height: 18px; }
.sk-t.short { width: 62%; }
.sk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sk-chips .sk { height: 34px; border-radius: 999px; }
.sk-map { width: 100%; aspect-ratio: 12 / 7; margin-top: 16px; border-radius: 16px; }
.sk-rows { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); }
.sk-rows li { display: grid; grid-template-columns: 64px minmax(0, 1.3fr) minmax(90px, 1fr); gap: 14px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--line); }
.sk-c { height: 26px; }
.sk-w { height: 16px; }
.sk-b { height: 10px; }
.live { display: inline-flex; align-items: center; gap: 7px; margin-left: 4px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--muted); white-space: nowrap; vertical-align: baseline; }
.live i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(15, 123, 85, 0.45); animation: live-pulse 2.4s ease-out infinite; }
.live.off i { background: var(--warn); animation: none; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(15, 123, 85, 0.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(15, 123, 85, 0); } }
.stamp { margin-top: 12px; }
.stamp .live { margin-left: 0; }
#footData { display: block; margin-top: 12px; }
#footData .live { margin-left: 0; white-space: normal; max-width: 100%; } /* on a 320px phone the status line is wider than the screen: it wraps there rather than pushing the page sideways */
#netNote { border-bottom: 1px solid transparent; font-size: 14px; line-height: 1.4; animation: fade-up 0.3s var(--ease-out) both; }
#netNote.bad { background: #fff4e5; border-bottom-color: #f2c98b; color: #6b3300; }
#netNote.good { background: #e7f6ee; border-bottom-color: #a8dcc2; color: #0b5d40; }
#netNote .netin { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding-block: 9px; }
#netNote i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
#netNote button { font: inherit; font-weight: 600; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 8px; padding: 3px 12px; cursor: pointer; }
#netNote button:hover { background: rgba(0, 0, 0, 0.06); }
#netNote button:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 640px) { #netNote .netin { padding-inline: 16px; } .sk-news { grid-template-columns: minmax(0, 1fr); } .sk-rows li { grid-template-columns: 52px minmax(0, 1fr); } .sk-rows .sk-b { display: none; } }
/* With less motion asked for, the bar and the grey boxes keep still: the bar is a steady line, the boxes plain grey. */
@media (prefers-reduced-motion: reduce) {
  html.busy #bar i { animation: none; transform: none; width: 100%; opacity: 0.55; border-radius: 0; }
  .sk { animation: none; background: var(--panel2); }
  .live i { animation: none; }
  #netNote { animation: none; }
}
html.still.busy #bar i { animation: none; transform: none; width: 100%; opacity: 0.55; border-radius: 0; }
.still .sk, .still .live i, .still #netNote { animation: none; }
.still .sk { background: var(--panel2); }

/* A suggestion under the email box when a well-known address looks mistyped (icoud.com): quiet until it is needed (17 October 2026) */
.emailhint { margin: -4px 0 12px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.emailhint[hidden] { display: none; }
.emailhint .linkbtn { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; padding: 0; font-size: inherit; }

/* ---------- the renovation (16 October 2026): the answer first, the detail on request ---------- */
/* The verdict card: the score, a word, three reasons, and one standing line of small print. */
.dash .verdict { gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; font-size: 14.5px; line-height: 1.5; }
.dash .verdict li::before { margin-top: 7px; }
.dash .verdict .linkbtn { display: inline; padding: 0; font-size: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.dash .legal { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.dash .legal a { color: inherit; text-underline-offset: 2px; }
/* The complete report's sections come in five short groups, each with a plain heading (17 October 2026). */
.sec-grp { margin: 26px 0 8px; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--muted); }
.sec-grp:first-of-type { margin-top: 14px; }
/* The three dials now sit at the top of the section that adds up the score, so they do not need their own rule above them. */
.sec .dials { border-top: 0; padding-top: 0; margin-bottom: 22px; }
/* What the complete check adds: four lines, and the whole list one press away. */
.adds { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 22px; overflow: hidden; background: linear-gradient(180deg, #f3f5ff 0%, #eaeeff 100%); border: 1px solid #d5dcf6; border-radius: 18px; box-shadow: var(--lift); min-width: 0; }
.adds::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cobalt); }
.adds ul { list-style: none; margin: 0; padding: 0; }
.adds .fold { background: rgba(255, 255, 255, 0.65); }
@media (max-width: 600px) { .adds { padding: 18px 16px 20px; } }

/* ---- the home page's "read more" rows: one line each, opening to the whole section ---- */
.mores-list { border-top: 1px solid var(--fg); }
.more { border-bottom: 1px solid var(--line); min-width: 0; }
.more > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; padding: 18px 2px; cursor: pointer; border-radius: 4px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; font-size: 22px; font-weight: 300; line-height: 1; color: var(--muted); transition: transform 0.2s; }
.more[open] > summary::after { transform: rotate(45deg); }
.more > summary:hover .more-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.more > summary:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.more-t { grid-column: 1; margin: 0; font-family: var(--font); font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; text-align: left; color: var(--fg); }
.more-h { grid-column: 1; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.more-in { padding: 2px 2px 30px; min-width: 0; }
.home .sect.side .more-in .lead { margin: 0 0 16px; max-width: 64ch; font-size: 15.5px; color: var(--ink2); }
.home .sect.side .more-in .fine { margin: 16px 0 0; max-width: 64ch; }
.more-in .asks { margin: 0 0 24px; }
.more-in .kinds { margin: 0 0 28px; max-width: 64ch; }
.more-in .news-list { margin-top: 8px; grid-template-columns: minmax(0, 1fr); }
.more-in .revs { margin-top: 14px; grid-template-columns: minmax(0, 1fr); }
.more-in .person { margin-top: 4px; }
.more-in .person-tx p { margin: 0; }
.more-in .cms { margin-top: 20px; }
.more-in .ledger-h { margin-top: 0; }
.more-in .ledger + .ledger-h, .more-in .ledger-groups + .ledger-h { margin-top: 36px; }
.ledger-group h5 { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; color: #2b41d6; }
.proc-legal { margin: 8px 0 0; text-align: left; }
/* the two reading lists at the foot of the home page do not need the full-height gaps the selling sections have */
.home #faq, .home #more { padding-block: clamp(36px, 5vw, 60px); }
@media (max-width: 720px) { .more > summary { padding: 16px 2px; } .more-t { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .more > summary::after { transition: none; } }
/* ---- legal pages: the short version, and the full text in one closed row ---- */
.short-box { border-left: 3px solid var(--cobalt); border-radius: 0 var(--r) var(--r) 0; }
.short-box .plain { margin: 12px 0 0; gap: 11px; font-size: 15.5px; }
.short-box .fine { margin-top: 16px; }
.legal-full { border-top: 1px solid var(--fg); border-bottom: 0; }
.legal-full .more-t { font-size: 20px; }
.legal-full .more-in { display: flex; flex-direction: column; gap: 20px; padding: 14px 0 8px; }
@media print { details.more::details-content { content-visibility: visible; } }
.more-in > .panel + .panel { margin-top: 16px; }
#methodDetail { border-top: 1px solid var(--fg); border-bottom: 0; }
#methodDetail .more-t { font-size: 20px; }