/* =========================================================================
   Property AI Brain, guides. Shared stylesheet for every article.
   Same design system as the landing page (Property Filter brand): Sand and
   White, Blue #2155D1 titles, Brick-red #521A11 subheads, Inter throughout.
   Reading measure kept near 68 characters. No decorative imagery anywhere:
   tables and worked examples carry the page, and they are also what AI
   answer engines lift and cite.
   ========================================================================= */
:root {
  --pf-blue: #2155D1; --pf-blue-hi: #2C63E6;
  --pf-sand: #F8F4EE; --pf-light-blue: #B8CDFF;
  --pf-brick: #521A11; --pf-white: #FFFFFF; --pf-grey: #55565A;
  --ink: #1C2A46;
  --line: rgba(33,85,209,0.16);
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.22,1,0.36,1);
}
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-text); color: var(--pf-grey); background: var(--pf-sand);
  -webkit-font-smoothing: antialiased; line-height: 1.68; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.nb { display: inline-block; white-space: nowrap; }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.8rem 1.25rem;
  font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 700;
  color: var(--pf-blue); background: rgba(248,244,238,0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar a { color: var(--pf-blue); text-decoration: none; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar__by { color: var(--pf-brick); }

/* ---------- shell ---------- */
.wrap { max-width: 44rem; margin-inline: auto; padding: 0 1.25rem; }
article { padding: 2.5rem 0 1rem; }

.kicker { font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; color: var(--pf-brick); }
h1 {
  margin-top: 0.7rem; font-size: clamp(1.85rem, 6vw, 2.7rem); line-height: 1.1;
  letter-spacing: -0.028em; font-weight: 800; color: var(--pf-blue); text-wrap: balance;
}
/* The answer paragraph. Deliberately first and deliberately self-contained: it is
   what an answer engine lifts, so it has to make sense with no page around it. */
.standfirst {
  margin-top: 1.1rem; font-size: 1.12rem; line-height: 1.6; color: var(--ink);
  text-wrap: pretty;
}
.standfirst strong { color: var(--pf-brick); font-weight: 700; }

/* ---------- the short answer, and the dated facts under it ----------
   These two blocks are the whole GEO bet. An answer engine lifts a short,
   self-contained answer and the checkable facts that back it, so both are put
   first, in plain text, in the served HTML, with the source named inline.
   Never move these below the fold and never collapse them behind a click. */
.answer {
  margin-top: 1.3rem; border-radius: 16px; background: var(--pf-white);
  border: 1px solid var(--line); border-left: 4px solid var(--pf-blue);
  padding: 1.1rem 1.2rem;
}
.answer__label { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--pf-brick); }
.answer p { margin-top: 0.6rem; font-size: 1.04rem; line-height: 1.6; color: var(--ink); }
.answer p strong { color: var(--pf-brick); font-weight: 700; }

.keyfacts { margin-top: 1.1rem; }
.keyfacts__label { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--pf-brick); }
.keyfacts ul { list-style: none; margin-top: 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.keyfacts li { margin: 0; padding-left: 1.1rem; position: relative; font-size: 0.94rem; line-height: 1.55; }
.keyfacts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--pf-blue); }
.keyfacts b { color: var(--ink); font-weight: 700; }
.keyfacts .src { color: var(--pf-grey); font-size: 0.86rem; }
.keyfacts .src a { color: var(--pf-blue); }

/* ---------- hub stages ---------- */
.stage { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.stage__n { font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; color: var(--pf-brick); }
.stage h2 { margin-top: 0.35rem; }
.stage__go { display: inline-block; margin-top: 0.9rem; font-weight: 700; font-size: 0.94rem; }

/* ---------- sources ---------- */
.sources { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.sources h2 { margin-top: 0; font-size: 1.1rem; }
.sources ol { margin-top: 0.8rem; padding-left: 1.3rem; font-size: 0.9rem; }
.sources li { margin-top: 0.55rem; }
.sources .when { color: var(--pf-grey); }

.byline {
  margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; align-items: baseline;
  font-size: 0.84rem;
}
.byline__who { font-weight: 700; color: var(--ink); }
.byline__what, .byline time { color: var(--pf-grey); }
.byline a { color: var(--pf-blue); }

h2 {
  margin-top: 2.6rem; font-size: clamp(1.3rem, 4.2vw, 1.6rem); line-height: 1.22;
  letter-spacing: -0.02em; font-weight: 800; color: var(--pf-brick); text-wrap: balance;
}
h3 {
  margin-top: 1.9rem; font-size: 1.06rem; line-height: 1.32; font-weight: 700;
  color: var(--ink); letter-spacing: -0.01em;
}
p, ul, ol, table, .note, .verdict { margin-top: 1.05rem; }
p { text-wrap: pretty; }
a { color: var(--pf-blue); text-decoration: underline; text-underline-offset: 2px; }
strong { color: var(--ink); font-weight: 700; }
ul, ol { padding-left: 1.3rem; }
li { margin-top: 0.5rem; }
li::marker { color: var(--pf-blue); }
blockquote {
  margin: 1.4rem 0 0; padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--pf-light-blue); background: var(--pf-white);
  border-radius: 0 12px 12px 0; color: var(--ink); font-size: 1.02rem;
}
blockquote cite { display: block; margin-top: 0.5rem; font-size: 0.82rem; font-style: normal; color: var(--pf-grey); }

/* Wide content scrolls inside its own box. The page body never scrolls sideways. */
.scroller { margin-top: 1.2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 14px; background: var(--pf-white); }
table { width: 100%; min-width: 34rem; border-collapse: collapse; margin: 0; font-size: 0.9rem; }
caption { caption-side: top; padding: 0.85rem 1rem 0; text-align: left; font-size: 0.8rem; color: var(--pf-grey); }
th, td { padding: 0.7rem 0.85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
thead th { background: var(--pf-blue); color: var(--pf-white); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.01em; }
tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; }

.note {
  border: 1px solid var(--line); border-radius: 14px; background: rgba(184,205,255,0.24);
  padding: 1rem 1.1rem; font-size: 0.94rem;
}
.note p:first-child { margin-top: 0; }
.note strong { color: var(--pf-brick); }

/* One-line judgement under each tool. Scannable, and honest about the limit. */
.verdict { border-left: 3px solid var(--pf-blue); padding-left: 0.9rem; font-size: 0.94rem; }
.verdict b { color: var(--pf-brick); }

/* ---------- call to action ---------- */
.cta {
  margin-top: 3rem; border-radius: 20px; background: var(--pf-blue); color: var(--pf-white);
  padding: 1.8rem 1.4rem; text-align: center;
}
.cta h2 { margin-top: 0; color: var(--pf-white); }
.cta p { color: var(--pf-light-blue); }
.cta__btn {
  display: inline-block; margin-top: 1.2rem; padding: 0.85rem 1.6rem; border-radius: 999px;
  background: var(--pf-white); color: var(--pf-blue); font-weight: 700; font-size: 1rem;
  text-decoration: none; transition: transform 0.08s, background 0.15s;
}
.cta__btn:hover { background: var(--pf-light-blue); }
.cta__btn:active { transform: translateY(1px); }
.cta__fine { margin-top: 0.9rem; font-size: 0.8rem; color: var(--pf-light-blue); }

/* ---------- FAQ. Answers are plain visible text on purpose. ----------
   AI crawlers do not run JavaScript, so an accordion hides the answer from
   exactly the readers we are writing for. This mistake is live on Property
   Filter's own Brain sales page: the reply to "how is this different from
   ChatGPT" is not in the served HTML at all. Do not reintroduce it here. */
.faq { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 1.2rem; }
.faq__q { font-weight: 700; color: var(--ink); font-size: 1rem; }
.faq__a { margin-top: 0.35rem; }

/* ---------- inline waitlist form, sits inside the article body ----------
   Blue block so it reads as a deliberate stop rather than another paragraph.
   Same two fields as the landing page, posting to the same endpoint. */
.join {
  margin-top: 3rem; border-radius: 20px; background: var(--pf-blue); color: var(--pf-white);
  padding: 1.8rem 1.4rem;
}
.join--mid { margin-top: 2.6rem; }
.join__kicker { font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; color: var(--pf-light-blue); }
.join h2 { margin-top: 0.5rem; color: var(--pf-white); font-size: clamp(1.25rem, 4.2vw, 1.55rem); }
.join p { color: var(--pf-light-blue); font-size: 0.98rem; }
.join p strong { color: var(--pf-white); }
.join__fields { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.join input {
  width: 100%; padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.5);
  background: var(--pf-white); color: var(--ink); font-family: inherit; font-size: 1rem;
}
.join input::placeholder { color: #8A8B8F; }
.join input:focus-visible { outline: 3px solid var(--pf-light-blue); outline-offset: 2px; }
.join__btn {
  width: 100%; margin-top: 0.8rem; padding: 0.9rem 1.4rem; border: 0; border-radius: 999px;
  background: var(--pf-white); color: var(--pf-blue); font-family: inherit; font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: background 0.15s, transform 0.08s;
}
.join__btn:hover { background: var(--pf-light-blue); }
.join__btn:active { transform: translateY(1px); }
.join__msg { margin-top: 0.7rem; min-height: 1.2em; font-size: 0.86rem; color: var(--pf-light-blue); }
.join__msg.is-error { color: #FFD9D2; font-weight: 600; }
.join__fine { margin-top: 0.7rem; font-size: 0.79rem; color: var(--pf-light-blue); }
/* Honeypot: off-screen, never announced, never focusable by a real reader. */
.hp { position: absolute; left: -5000px; top: -5000px; opacity: 0; pointer-events: none; }
.join__done[hidden] { display: none; }
.join__done h2 { margin-top: 0; }
.join__done p { margin-top: 0.7rem; }
.join__done a { color: var(--pf-white); font-weight: 700; }
@media (min-width: 620px) {
  .join { padding: 2rem 1.9rem; }
  .join__fields { flex-direction: row; }
  .join input { flex: 1; }
  .join__btn { width: auto; min-width: 15rem; }
}

/* ---------- cookie consent (PECR), injected by guide.js ----------
   Same component as the landing page. Refusing has to be exactly as easy as
   accepting: same row, same size, one click. That is the ICO's stated position. */
.cc { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; padding: 0 0.75rem max(0.75rem, env(safe-area-inset-bottom)); pointer-events: none; }
.cc[hidden] { display: none; }
.cc__card {
  pointer-events: auto; margin-inline: auto; max-width: 23rem; text-align: left;
  background: var(--pf-white);
  border: 1px solid rgba(33,85,209,0.28); border-radius: 16px;
  padding: 0.9rem 0.95rem 0.85rem; color: var(--pf-grey);
  box-shadow: 0 -2px 40px rgba(28,42,70,0.16), 0 14px 34px rgba(28,42,70,0.12);
  animation: ccIn 0.4s var(--ease) both;
}
/* Fade only. Never animate transform on a card pinned to the bottom edge: a
   throttled tab can freeze mid-animation and push it under the fold. */
@keyframes ccIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cc__card { animation: none; } }
.cc__kicker { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--pf-brick); }
.cc__kicker .dot { display: inline-block; vertical-align: middle; margin: -2px 0.4rem 0 0; width: 5px; height: 5px; border-radius: 50%; background: var(--pf-blue); }
.cc__title { font-weight: 800; font-size: 1.02rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--pf-blue); margin: 0.35rem 0 0.3rem; text-wrap: balance; }
.cc__body { font-size: 0.8rem; line-height: 1.45; text-wrap: pretty; }
.cc__body strong { color: var(--pf-brick); font-weight: 700; }
.cc__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.7rem; }
.cc__btn {
  height: 44px; padding: 0 0.7rem; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 0.85rem; font-weight: 700; line-height: 1.15;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
.cc__btn--yes { border: 1px solid var(--pf-blue); background: var(--pf-blue); color: var(--pf-white); box-shadow: 0 8px 22px rgba(33,85,209,0.28); }
.cc__btn--yes:hover { background: var(--pf-blue-hi); }
.cc__btn--no { border: 1px solid rgba(33,85,209,0.34); background: var(--pf-white); color: var(--pf-blue); }
.cc__btn--no:hover { background: rgba(33,85,209,0.06); border-color: var(--pf-blue); }
.cc__btn:active { transform: translateY(1px); }
.cc__more { display: block; width: 100%; margin-top: 0.5rem; background: none; border: 0; padding: 0.15rem 0; color: var(--pf-blue); font-family: inherit; font-size: 0.76rem; font-weight: 600; text-align: center; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cc__detail { margin-top: 0.9rem; border-top: 1px solid var(--line); padding-top: 0.9rem; }
.cc__detail[hidden] { display: none; }
.cc__sub { font-weight: 700; font-size: 0.95rem; color: var(--pf-brick); margin-bottom: 0.55rem; }
.cc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; font-size: 0.85rem; line-height: 1.45; }
.cc__list li { margin-top: 0; }
.cc__list b { display: block; color: var(--pf-brick); font-weight: 700; }
.cc__never { margin-top: 0.9rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(184,205,255,0.28); padding: 0.75rem 0.85rem; font-size: 0.83rem; line-height: 1.45; }
.cc__never b { color: var(--pf-brick); }
.cc__fine { margin-top: 0.8rem; font-size: 0.76rem; line-height: 1.45; }
.cc__fine a { color: var(--pf-blue); }
.cc__scroll { max-height: min(40vh, 19rem); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cc__scroll--faded { mask-image: linear-gradient(to bottom, #000 calc(100% - 1.75rem), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.75rem), transparent 100%); }
@media (min-width: 760px) {
  .cc { padding-bottom: 1.25rem; }
  .cc__card { margin-inline: auto 0; margin-right: 1.5rem; padding: 1rem 1.05rem 0.95rem; }
  .cc__title { font-size: 1.12rem; }
}
.footer__cookies { background: none; border: 0; padding: 0; color: var(--pf-grey); font-family: inherit; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- related + footer ---------- */
.related { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.related h2 { margin-top: 0; font-size: 1.1rem; }
.related ul { list-style: none; padding: 0; margin-top: 0.8rem; }
.related li { margin-top: 0.55rem; }

.footer {
  margin-top: 3.5rem; border-top: 1px solid var(--line); background: var(--pf-sand);
  padding: 2rem 1.25rem 2.6rem; text-align: center; font-size: 0.82rem;
}
.footer__legal { margin-top: 0.7rem; font-size: 0.75rem; }
.footer__legal a { color: var(--pf-grey); }

/* ---------- guides index ---------- */
.cards { list-style: none; padding: 0; margin-top: 1.8rem; display: grid; gap: 1rem; }
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; } }
.cards li { margin: 0; }
.card {
  display: block; height: 100%; padding: 1.15rem 1.2rem; border-radius: 16px;
  background: var(--pf-white); border: 1px solid var(--line); text-decoration: none;
  transition: border-color 0.15s, transform 0.08s;
}
.card:hover { border-color: var(--pf-blue); }
.card:active { transform: translateY(1px); }
/* display:block matters: these are spans (a card is one <a>, so it cannot contain
   block-level headings), and an inline span ignores margin-top and never breaks
   the line, which ran the kicker, title and lead together as one paragraph. */
.card__kicker { display: block; font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; color: var(--pf-brick); }
.card__title { display: block; margin-top: 0.4rem; font-size: 1.06rem; line-height: 1.3; font-weight: 800; color: var(--pf-blue); letter-spacing: -0.015em; text-wrap: balance; }
.card__lead { display: block; margin-top: 0.5rem; font-size: 0.9rem; color: var(--pf-grey); text-wrap: pretty; }

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