/* =========================================================================
   Property AI Summit, guides. Shared stylesheet for every guide page.

   Design system: the landing page tokens (navy #05102A, royal blue #2155D1,
   gold #E4C77A, Fraunces for display, Inter for text) on a light reading
   surface. The landing is dark because it has one job, capture. A guide is
   2,000 words of reading, so the body is Property Filter Sand and the navy
   lives in the topbar, the footer and the sign-up block. A reader who lands
   here from a search still recognises the Summit within one second.

   Gold rule: #E4C77A is a light tint and only ever sits on navy or acts as a
   decorative border. Label text on Sand uses --gold-ink (#7A5C12), which
   clears WCAG AA for small bold text. Never swap one for the other.

   Reading measure stays near 68 characters. No decorative imagery anywhere:
   the tables and worked examples carry the page, and they are also what AI
   answer engines lift and cite.
   ========================================================================= */
:root {
  --ink: #05102A; --ink-2: #0A1A3F; --ink-body: #333A48;
  --blue: #2155D1; --blue-hi: #2C63E6; --blue-light: #B8CDFF;
  --gold: #E4C77A; --gold-ink: #7A5C12;
  --sand: #F8F4EE; --white: #FFFFFF;
  --on-dark: #EFF3FB; --muted: #AFBFDD;
  --line: rgba(33,85,209,0.16);
  --line-gold: rgba(228,199,122,0.5);
  --font-display: "Fraunces", Georgia, serif;
  --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(--ink-body); background: var(--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: navy, like the landing, and it carries the event line ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 0.9rem; flex-wrap: wrap;
  padding: 0.8rem 1.25rem;
  font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 600;
  color: var(--muted); background: var(--ink);
  border-bottom: 1px solid rgba(228,199,122,0.22);
}
.topbar a { color: var(--on-dark); text-decoration: none; }
.topbar a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.topbar__by { color: var(--gold); }
@media (max-width: 480px) {
  .topbar { flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; font-size: 0.62rem; }
  .topbar span, .topbar a { white-space: nowrap; }
}

/* ---------- 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(--gold-ink); }
h1 {
  font-family: var(--font-display); font-weight: 500;
  margin-top: 0.7rem; font-size: clamp(1.85rem, 6vw, 2.65rem); line-height: 1.12;
  letter-spacing: -0.018em; color: var(--ink-2); 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-2);
  text-wrap: pretty;
}
.standfirst strong { color: var(--ink); 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:
   AI crawlers do not run JavaScript, so a click means the content is not there. */
.answer {
  margin-top: 1.3rem; border-radius: 16px; background: var(--white);
  border: 1px solid var(--line); border-left: 4px solid var(--blue);
  padding: 1.1rem 1.2rem;
}
.answer__label { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--gold-ink); }
.answer p { margin-top: 0.6rem; font-size: 1.04rem; line-height: 1.6; color: var(--ink-2); }
.answer p + p { margin-top: 0.8rem; }
.answer p strong { color: var(--ink); 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(--gold-ink); }
.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(--blue); }
.keyfacts b { color: var(--ink-2); font-weight: 700; }
.keyfacts .src { color: var(--ink-body); font-size: 0.86rem; }
.keyfacts .src a { color: var(--blue); }

/* ---------- numbered stages, used by the hub ---------- */
.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(--gold-ink); }
.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(--ink-body); }

.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-2); }
.byline__what, .byline time { color: var(--ink-body); }
.byline a { color: var(--blue); }

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

/* 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(--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(--ink-body); }
th, td { padding: 0.7rem 0.85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
thead th { background: var(--ink-2); color: var(--on-dark); 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-2); }

.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(--ink); }
.note--gold { background: rgba(228,199,122,0.16); border-color: var(--line-gold); }

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

/* ---------- 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. Do not reintroduce one here. */
.faq { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 1.2rem; }
.faq__q { font-weight: 700; color: var(--ink-2); font-size: 1rem; }
.faq__a { margin-top: 0.35rem; }

/* ---------- inline waitlist form, sits inside the guide body ----------
   Navy block so it reads as a deliberate stop rather than another paragraph.
   Same two fields, same endpoint and same consent wording as the landing. */
.join {
  margin-top: 3rem; border-radius: 20px; background: var(--ink); color: var(--on-dark);
  padding: 1.8rem 1.4rem; border: 1px solid rgba(228,199,122,0.28);
}
.join--mid { margin-top: 2.6rem; }
.join__kicker { font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.join h2 { font-family: var(--font-display); font-weight: 500; margin-top: 0.5rem; color: var(--on-dark); font-size: clamp(1.25rem, 4.2vw, 1.55rem); }
.join p { color: var(--muted); font-size: 0.98rem; }
.join p strong { color: var(--on-dark); }
.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.45);
  background: var(--white); color: var(--ink); font-family: inherit; font-size: 1rem;
}
.join input::placeholder { color: #8A8B8F; }
.join input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.join__btn {
  width: 100%; margin-top: 0.8rem; padding: 0.9rem 1.4rem; border: 0; border-radius: 12px;
  background: var(--blue); color: var(--white); font-family: inherit; font-size: 1.02rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 10px 30px rgba(33,85,209,0.35);
  transition: background 0.15s, transform 0.08s;
}
.join__btn:hover { background: var(--blue-hi); }
.join__btn:active { transform: translateY(1px); }
.join__msg { margin-top: 0.7rem; min-height: 1.2em; font-size: 0.86rem; color: var(--muted); }
.join__msg.is-error { color: #FFD9D2; font-weight: 600; }
.join__fine { margin-top: 0.7rem; font-size: 0.79rem; color: var(--muted); }
/* 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; }
/* Styled like the block's h2 but deliberately NOT a heading: it sits in the HTML
   even while hidden, and a real h2 there would put "You're on the list, ." into
   the document outline that crawlers and screen readers read.
   Two classes on purpose: `.join p` is more specific than a single class, so a
   one-class rule here loses on size and colour and the title renders as body copy. */
.join .join__done__title { margin-top: 0; font-family: var(--font-display); font-weight: 500; color: var(--on-dark); font-size: clamp(1.25rem, 4.2vw, 1.55rem); line-height: 1.2; letter-spacing: -0.012em; }
.join__done p { margin-top: 0.7rem; }
.join__done a { color: var(--gold); 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 and same copy 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. Bottom right, like the landing. */
.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(--white);
  border: 1px solid rgba(33,85,209,0.28); border-radius: 16px;
  padding: 0.9rem 0.95rem 0.85rem; color: var(--ink-body);
  box-shadow: 0 -2px 40px rgba(5,16,42,0.18), 0 14px 34px rgba(5,16,42,0.14);
  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 leave it stranded off screen. */
@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(--gold-ink); }
.cc__kicker .dot { display: inline-block; vertical-align: middle; margin: -2px 0.4rem 0 0; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.cc__title { font-family: var(--font-display); font-weight: 500; font-size: 1.06rem; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink-2); 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(--ink); 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(--blue); background: var(--blue); color: var(--white); box-shadow: 0 8px 22px rgba(33,85,209,0.28); }
.cc__btn--yes:hover { background: var(--blue-hi); }
.cc__btn--no { border: 1px solid rgba(33,85,209,0.34); background: var(--white); color: var(--blue); }
.cc__btn--no:hover { background: rgba(33,85,209,0.06); border-color: var(--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(--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(--ink-2); 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(--ink-2); 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(--ink); }
.cc__fine { margin-top: 0.8rem; font-size: 0.76rem; line-height: 1.45; }
.cc__fine a { color: var(--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.14rem; }
}

/* ---------- 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; background: var(--ink); color: var(--muted);
  padding: 2rem 1.25rem 2.6rem; text-align: center; font-size: 0.82rem;
  border-top: 1px solid rgba(228,199,122,0.22);
}
.footer__sold { color: var(--gold); font-weight: 600; }
.footer a { color: #7FA5FF; text-decoration: underline; text-underline-offset: 3px; }
.footer__legal { margin-top: 0.7rem; font-size: 0.75rem; }
.footer__legal a { color: var(--muted); }
.footer__cookies { background: none; border: 0; padding: 0; color: var(--muted); font-family: inherit; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- guides index cards ---------- */
.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(--white); border: 1px solid var(--line); text-decoration: none;
  transition: border-color 0.15s, transform 0.08s;
}
.card:hover { border-color: var(--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 runs 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(--gold-ink); }
.card__title { display: block; font-family: var(--font-display); font-weight: 500; margin-top: 0.4rem; font-size: 1.1rem; line-height: 1.28; color: var(--ink-2); letter-spacing: -0.012em; text-wrap: balance; }
.card__lead { display: block; margin-top: 0.5rem; font-size: 0.9rem; color: var(--ink-body); text-wrap: pretty; }

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