/* Property Data — public landing page (landing.html).
 *
 * Layout only. Colour, spacing and type tokens, the Inter face, .btn, .pill
 * and .skip-link all come from v2/theme.css, loaded first, so this page is
 * the live app's own visual system. Every class here is prefixed ld- so
 * nothing can collide with a class an app page uses.
 *
 * Rules kept from the v2 feedback rounds (docs/v2-feedback-*.md): no
 * gradients anywhere (G1), one button height (G3), Title Case on static
 * labels, flat colour at reduced opacity where a soft tint is wanted. */

.ld-body { background: var(--canvas); color: var(--ink); min-height: 100%; }
.ld-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ld-wrap { width: min(100% - 2 * var(--sp-6), 1120px); margin-inline: auto; }
.ld-ic { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ld-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Prose links get an underline: theme.css strips it globally because the
   app's links are rows and buttons, but on a reading page a link has to
   look like one. */
.ld-main p a { color: var(--brand-sky-dark); text-decoration: underline; text-underline-offset: 2px; }
.ld-main p a:hover { color: var(--brand-navy); }

/* ---- Header ---------------------------------------------------------- */

.ld-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.ld-header-in { display: flex; align-items: center; gap: var(--sp-5); min-height: var(--topbar-h); }
.ld-brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--btn-h); }
.ld-brand img { width: 30px; height: 18px; }
.ld-brand-word { font-weight: 650; font-size: 15.5px; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.ld-nav { display: flex; gap: var(--sp-1); margin-left: var(--sp-3); }
.ld-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-h);
  padding: 0 12px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-weight: 600;
  font-size: var(--fs-small);
}
.ld-nav a:hover { background: var(--canvas); color: var(--ink); }
.ld-header-cta { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }

/* ---- Hero ------------------------------------------------------------ */

.ld-hero { padding: var(--sp-9) 0 var(--sp-8); }
.ld-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--sp-9);
  align-items: center;
}
.ld-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--r-pill);
  background: var(--brand-tint);
  color: var(--brand-sky-dark);
  font-size: var(--fs-small);
  font-weight: 650;
  margin-bottom: var(--sp-5);
}
.ld-eyebrow .ld-ic { width: 15px; height: 15px; }
.ld-h1 {
  font-size: clamp(32px, 4.4vw, var(--fs-display));
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: var(--lh-tight);
  max-width: 16ch;
  text-wrap: balance;
}
.ld-lede { margin-top: var(--sp-5); font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 58ch; }
.ld-cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.ld-cta-center { justify-content: center; }
.ld-fineprint { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--ink-2); }

/* The sketched property card. Same panel chrome and status stripe idiom as
   the app's cards (--edge feeding a left border), sample values only. */
.ld-mock { margin: 0; }
.ld-mock-card {
  --edge: var(--status-new);
  background: var(--panel);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-panel);
  border-left: 4px solid var(--edge);
  padding: var(--sp-5) var(--sp-6);
}
.ld-mock-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.ld-mock-kicker { font-size: var(--fs-micro); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.ld-mock-title { font-size: var(--fs-h2); font-weight: 650; letter-spacing: -0.01em; margin-top: 2px; }
.ld-mock-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-5); }
.ld-mock-tile { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); border-radius: var(--r-lg); background: var(--panel-2); min-width: 0; }
.ld-mock-lbl { font-size: var(--fs-micro); color: var(--ink-2); font-weight: 600; }
.ld-mock-val { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ld-good { color: var(--status-new); }
.ld-mock-tabs { display: flex; gap: var(--sp-1); margin-top: var(--sp-5); padding: 4px; border-radius: var(--r-pill); background: var(--canvas); }
.ld-mock-tabs span { flex: 1; text-align: center; padding: 6px 0; border-radius: var(--r-pill); font-size: var(--fs-micro); font-weight: 650; color: var(--ink-2); }
.ld-mock-tabs .is-on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-xs); }
.ld-mock-rows { margin-top: var(--sp-4); }
.ld-mock-rows li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 9px 0; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.ld-mock-rows li span { color: var(--ink-2); }
.ld-mock-rows li strong { font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.ld-mock-cap { margin-top: var(--sp-3); text-align: center; font-size: var(--fs-small); color: var(--ink-2); }

/* ---- Stats ----------------------------------------------------------- */

.ld-stats { padding: var(--sp-6) 0 var(--sp-8); }
.ld-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.ld-stat {
  background: var(--panel);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-panel);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.ld-stat-value {
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 630;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}
.ld-stat-value small { font-size: 0.55em; font-weight: 600; color: var(--brand-sky-dark); margin-left: 2px; }
.ld-stat-label { font-size: var(--fs-small); color: var(--ink-2); font-weight: 600; }
.ld-stat-note { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--ink-2); }

/* ---- Sections -------------------------------------------------------- */

.ld-section { padding: var(--sp-10) 0; }
.ld-section-alt { background: var(--canvas-2); }
.ld-section-head { max-width: 62ch; margin-bottom: var(--sp-7); }
.ld-h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.ld-h3 { font-size: var(--fs-h2); font-weight: 650; letter-spacing: -0.01em; line-height: var(--lh-snug); }
.ld-sub { margin-top: var(--sp-3); font-size: 16px; color: var(--ink-2); line-height: 1.55; }

.ld-grid { display: grid; gap: var(--sp-5); }
.ld-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ld-card {
  background: var(--panel);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-panel);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}
.ld-card p { color: var(--ink-2); line-height: 1.55; }
.ld-card-ic {
  width: 42px;
  height: 42px;
  border-radius: var(--r-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-tint);
  color: var(--brand-sky);
}
.ld-card-ic .ld-ic { width: 21px; height: 21px; }
.ld-section-alt .ld-card { box-shadow: var(--shadow-sm); }
.ld-also { margin-top: var(--sp-6); font-size: var(--fs-small); color: var(--ink-2); line-height: 1.6; max-width: 80ch; }
.ld-also strong { color: var(--ink); font-weight: 650; }

.ld-ticks { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.ld-ticks li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-small); color: var(--ink); line-height: 1.45; }
.ld-ticks .ld-ic { width: 16px; height: 16px; margin-top: 2px; color: var(--status-new); }

/* How it works — numbered steps on one row. */
.ld-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); counter-reset: step; }
.ld-step { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); border-radius: var(--r-2xl); background: var(--panel); box-shadow: var(--shadow-panel); min-width: 0; }
.ld-step p { color: var(--ink-2); line-height: 1.55; }
.ld-step-n {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-sky);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* Sources */
.ld-sources-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sp-8); align-items: start; }
.ld-source-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ld-source-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  min-width: 0;
}
.ld-source-list .ld-ic { color: var(--brand-sky); }

/* FAQ */
.ld-faq-in { max-width: 760px; }
.ld-faq { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.ld-faq-item { background: var(--panel); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); padding: 0 var(--sp-5); }
.ld-faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-3) 0;
  font-weight: 650;
  font-size: 15.5px;
}
.ld-faq-item summary::-webkit-details-marker { display: none; }
.ld-faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--canvas);
  color: var(--ink-2);
  font-weight: 600;
}
.ld-faq-item[open] summary::after { content: "–"; }
.ld-faq-item p { padding: 0 0 var(--sp-5); color: var(--ink-2); line-height: 1.6; max-width: 66ch; }

/* Final CTA band: solid navy, flat (G1). */
.ld-final { background: var(--brand-navy); color: #fff; padding: var(--sp-10) 0; }
.ld-final-in { text-align: center; }
.ld-final .ld-sub { color: rgba(255, 255, 255, 0.78); }
.ld-final .btn-secondary { background: #fff; color: var(--brand-navy); border-color: transparent; }
.ld-final .btn-secondary:hover { background: var(--canvas); }
.ld-final :focus-visible { outline-color: #fff; }

/* ---- Footer ---------------------------------------------------------- */

.ld-footer { background: var(--panel); border-top: 1px solid var(--line); padding: var(--sp-8) 0 var(--sp-7); }
.ld-footer-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-6) var(--sp-8); align-items: start; }
.ld-footer-brand img { width: 120px; height: auto; }
.ld-footer-brand p { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--ink-2); max-width: 36ch; }
.ld-footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
.ld-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-h);
  padding: 0 12px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-weight: 600;
  font-size: var(--fs-small);
}
.ld-footer-nav a:hover { background: var(--canvas); color: var(--ink); }
.ld-footer-legal { grid-column: 1 / -1; padding-top: var(--sp-5); border-top: 1px solid var(--line); font-size: var(--fs-micro); color: var(--ink-2); }

/* ---- Responsive ------------------------------------------------------ */

@media (max-width: 1024px) {
  .ld-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .ld-grid-3, .ld-steps { grid-template-columns: repeat(2, 1fr); }
  .ld-hero-in { grid-template-columns: 1fr; gap: var(--sp-7); }
  .ld-mock { max-width: 520px; }
  .ld-sources-in { grid-template-columns: 1fr; gap: var(--sp-6); }
}

@media (max-width: 760px) {
  .ld-nav { display: none; }
  .ld-hide-phone { display: none; }
  .ld-hero { padding-top: var(--sp-7); }
  .ld-section { padding: var(--sp-8) 0; }
  .ld-grid-3, .ld-steps { grid-template-columns: 1fr; }
  .ld-source-list { grid-template-columns: 1fr; }
  .ld-footer-in { grid-template-columns: 1fr; }
  .ld-cta-row .btn { flex: 1 1 auto; }
}

@media (max-width: 480px) {
  .ld-wrap { width: min(100% - 2 * var(--sp-4), 1120px); }
  .ld-stat-grid { grid-template-columns: 1fr; }
  .ld-mock-tiles { grid-template-columns: 1fr 1fr; }
  .ld-mock-tabs span:nth-child(n+4) { display: none; }
}