/* PropertyPartner marketing site (issue #20). The public pages' design layer, extracted from the .design-handoff
   mocks (Instrument Sans / Geist Mono, #2f5ce5 on warm neutrals, 12–14px radii). Loaded AFTER /assets/app.css, so
   it reuses the :root tokens, .btn family, and badges, and adds the marketing-only surfaces (nav, hero, sections,
   stat bar, the 311 timeline, pricing, founding, testimonial, FAQ, waitlist, footer). Self-hosted, no CDN. */

:root { --m-max: 1120px; }

/* Marketing pages are white-first (the app shell is warm-gray). */
body.m-body { background: var(--surface); }
.m-body { font-family: var(--sans); color: var(--ink); }
.m-main { min-height: 60vh; }
.m-container { max-width: var(--m-max); margin: 0 auto; padding: 0 24px; }
.m-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--blue); background:var(--blue-tint); border:1px solid var(--blue-border); border-radius:100px; padding:6px 14px; }
.m-eyebrow-plain { display:block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-bottom:12px; }

/* ── Nav ─────────────────────────────────────────────────────────────────────────────────────────── */
.m-nav { background:var(--surface); border-bottom:1px solid var(--hair); position:sticky; top:0; z-index:50; }
.m-nav-inner { max-width:1360px; margin:0 auto; padding:0 24px; height:66px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.m-brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; letter-spacing:-0.01em; }
.m-brand .brand-mark { width:26px; height:26px; border-radius:7px; background:var(--blue); display:flex; align-items:center; justify-content:center; flex:none; }
.m-brand .brand-mark svg { width:14px; height:14px; stroke:#fff; stroke-width:2.4; }
.m-nav-links { display:flex; align-items:center; gap:2px; font-size:15px; color:var(--secondary-dark); font-weight:500; }
.m-nav-links a { padding:8px 12px; border-radius:8px; }
.m-nav-links a:hover { background:var(--app-bg); color:var(--ink); }
.m-nav-links a.is-active { color:var(--blue); }
.m-nav-cta { display:flex; align-items:center; gap:10px; flex:none; }

/* ── Hero ────────────────────────────────────────────────────────────────────────────────────────── */
.m-hero { padding:76px 24px 48px; text-align:center; }
.m-hero .m-container { max-width:860px; }
.m-h1 { font-size:56px; line-height:1.06; letter-spacing:-0.03em; font-weight:700; margin:18px auto; max-width:820px; text-wrap:balance; }
.m-lead { font-size:20px; line-height:1.55; color:var(--secondary); max-width:660px; margin:0 auto 30px; text-wrap:pretty; }
.m-cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn-lg { font-size:16px; padding:13px 24px; border-radius:10px; }
.m-hero-note { margin-top:16px; font-size:13.5px; color:var(--muted); }

/* ── Sections ────────────────────────────────────────────────────────────────────────────────────── */
.m-section { padding:72px 24px; border-top:1px solid var(--hair); }
.m-section-alt { background:var(--subtle); }
.m-section-head { max-width:640px; margin:0 0 40px; }
.m-section-head.is-center { margin:0 auto 40px; text-align:center; }
.m-h2 { font-size:36px; font-weight:700; letter-spacing:-0.02em; margin:0 0 12px; text-wrap:balance; }
.m-sub { font-size:17.5px; line-height:1.55; color:var(--secondary); margin:0; }

/* ── Stat bar (generated numbers) ──────────────────────────────────────────────────────────────────── */
.m-statbar { display:flex; flex-wrap:wrap; justify-content:center; gap:56px; }
.m-stat { text-align:center; }
.m-stat-num { font-family:var(--mono); font-size:34px; font-weight:700; letter-spacing:-0.02em; }
.m-stat-label { font-size:13.5px; color:var(--secondary); font-weight:500; margin-top:2px; }

/* ── Cards ───────────────────────────────────────────────────────────────────────────────────────── */
.m-cards { display:grid; gap:20px; }
.m-cards-2 { grid-template-columns:repeat(2, 1fr); }
.m-cards-3 { grid-template-columns:repeat(3, 1fr); }
.m-card { background:var(--surface); border:1px solid var(--border-soft); border-radius:12px; padding:26px; }
.m-card-ico { width:38px; height:38px; border-radius:9px; background:var(--blue-tint); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.m-card-ico svg { width:18px; height:18px; stroke:var(--blue); stroke-width:2; }
.m-card-title { font-size:19px; font-weight:700; margin:0 0 6px; }
.m-card-title .m-arrow { color:var(--blue); }
.m-card-text { font-size:15px; line-height:1.55; color:var(--secondary); margin:0; }
.m-card-eg { margin-top:14px; font-size:12.5px; font-family:var(--mono); color:var(--secondary-dark); background:var(--app-bg); border:1px solid var(--hair); border-radius:8px; padding:9px 12px; }
a.m-card { transition:box-shadow .2s, transform .2s; display:block; }
a.m-card:hover { box-shadow:0 12px 32px -14px rgba(31,30,27,.16); transform:translateY(-2px); }

/* ── Checklist ───────────────────────────────────────────────────────────────────────────────────── */
.m-check { display:flex; flex-direction:column; gap:11px; font-size:15px; color:var(--ink); font-weight:500; }
.m-check-item { display:flex; gap:10px; align-items:flex-start; }
.m-check-item svg { width:16px; height:16px; stroke:var(--blue); stroke-width:2.4; flex:none; margin-top:3px; }

/* ── The 311 timeline (the proof engine) ───────────────────────────────────────────────────────────── */
.m-timeline { background:var(--surface); border:1px solid var(--border-soft); border-radius:14px; padding:10px 26px; }
.m-tl-row { display:grid; grid-template-columns:150px 1fr; gap:20px; padding:18px 0; border-bottom:1px solid var(--row-border); align-items:flex-start; }
.m-tl-row:last-child { border-bottom:none; }
.m-tl-when { display:flex; align-items:center; gap:10px; }
.m-tl-dot { width:11px; height:11px; border-radius:50%; flex:none; background:var(--muted); }
.m-tl-phase { font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.m-tl-you .m-tl-dot { background:var(--blue); }
.m-tl-you .m-tl-phase { color:var(--blue); }
.m-tl-title { font-size:16px; font-weight:700; margin:0 0 3px; }
.m-tl-text { font-size:14px; line-height:1.5; color:var(--secondary); margin:0; }
.m-tl-caption { font-size:13px; color:var(--muted); margin:16px 2px 0; line-height:1.55; }

/* ── Pricing ─────────────────────────────────────────────────────────────────────────────────────── */
/* Two columns of four (ADR-0067 amendment 2026-11-01, second, decision 8): Discover beside Manage, each column Free, Starter,
   Professional and Enterprise under its heading; one column on narrow screens. */
.m-hubs-note { text-align:center; max-width:760px; margin:22px auto 36px; }
.m-pricing { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px; align-items:start; }
.m-hub-head { margin:0 0 14px; }
.m-hub-name { font-size:22px; font-weight:700; margin:0 0 2px; }
.m-hub-def { font-size:14.5px; color:var(--secondary); margin:0; }
.m-plans { display:grid; grid-template-columns:1fr; gap:22px; align-items:stretch; }
.m-plans > .m-card { align-self:start; }
.m-plan { background:var(--surface); border:1px solid var(--border-soft); border-radius:14px; padding:24px 20px; display:flex; flex-direction:column; position:relative; }
.m-plan-featured { border:2px solid var(--blue); box-shadow:0 16px 44px -20px rgba(47,92,229,.32); }
.m-ribbon { position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:11.5px; font-weight:700; color:#fff; background:var(--blue); border-radius:100px; padding:4px 13px; white-space:nowrap; }
.m-plan-name { font-size:17px; font-weight:700; margin:0 0 4px; }
.m-plan-tag { font-size:13px; color:var(--secondary); margin:0 0 16px; min-height:34px; }
.m-plan-lead { font-size:14px; font-weight:600; margin:0 0 6px; }
.m-plan-price { margin-bottom:16px; }
.m-plan-amt { font-size:34px; font-weight:700; letter-spacing:-0.02em; }
.m-plan-per { font-size:13px; color:var(--muted); margin-left:5px; }
/* The annual saving in dollars under the annual toggle (pricing round 5 decision 20). */
.m-plan-save { display:block; font-size:13px; font-weight:600; color:var(--green); margin-top:4px; }
.m-plan-features { list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:9px; font-size:13.5px; color:var(--secondary-dark); }
.m-plan-features li { display:flex; gap:8px; align-items:flex-start; }
.m-plan-features li svg { width:14px; height:14px; stroke:var(--blue); stroke-width:2.4; flex:none; margin-top:3px; }
.m-plan .btn { margin-top:auto; }
/* The cadence toggle (pricing round 4 decision 10): annual by default, monthly beside it. Two radios ahead of the cards
   switch which price each card shows; no script. */
.m-cadence-input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.m-cadence { display:flex; justify-content:center; gap:0; margin:0 auto 22px; width:max-content; border:1px solid var(--border-soft); border-radius:100px; padding:3px; background:var(--surface); }
.m-cadence label { font-size:13.5px; font-weight:600; color:var(--secondary); padding:6px 16px; border-radius:100px; cursor:pointer; }
#cadence-annual:checked ~ .m-cadence label[for="cadence-annual"], #cadence-monthly:checked ~ .m-cadence label[for="cadence-monthly"] { background:var(--blue); color:#fff; }
#cadence-annual:focus-visible ~ .m-cadence label[for="cadence-annual"], #cadence-monthly:focus-visible ~ .m-cadence label[for="cadence-monthly"] { outline:2px solid var(--blue); outline-offset:2px; }
.m-price-monthly { display:none; }
#cadence-monthly:checked ~ .m-pricing .m-price-monthly { display:inline; }
#cadence-monthly:checked ~ .m-pricing .m-price-annual { display:none; }
/* The hub switcher: radios like the cadence toggle, "All" checked by default (both columns); a hub shows its column alone,
   its four cards side by side. */
#hub-all:checked ~ .m-hub-switch label[for="hub-all"],
#hub-discover:checked ~ .m-hub-switch label[for="hub-discover"], #hub-manage:checked ~ .m-hub-switch label[for="hub-manage"] { background:var(--blue); color:#fff; }
#hub-all:focus-visible ~ .m-hub-switch label[for="hub-all"],
#hub-discover:focus-visible ~ .m-hub-switch label[for="hub-discover"], #hub-manage:focus-visible ~ .m-hub-switch label[for="hub-manage"] { outline:2px solid var(--blue); outline-offset:2px; }
#hub-discover:checked ~ .m-pricing .m-hub:not([data-hub="discover"]),
#hub-manage:checked ~ .m-pricing .m-hub:not([data-hub="manage"]) { display:none; }
#hub-discover:checked ~ .m-pricing, #hub-manage:checked ~ .m-pricing { grid-template-columns:1fr; }
#hub-discover:checked ~ .m-pricing .m-plans, #hub-manage:checked ~ .m-pricing .m-plans { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
/* What shows under one cadence only (the added market's line). */
#cadence-annual:checked ~ .m-pricing .m-when-monthly, #cadence-monthly:checked ~ .m-pricing .m-when-annual { display:none; }
.m-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* The per-avatar stacks (pricing round 4 decision 11). */
.m-stack-list { list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:9px; font-size:14px; color:var(--secondary-dark); }
.m-stack-list li { display:flex; gap:8px; align-items:flex-start; }
.m-stack-list li svg { width:14px; height:14px; stroke:var(--blue); stroke-width:2.4; flex:none; margin-top:3px; }
.m-stack-list li.is-when-live { color:var(--muted); }
/* Each stack's own call to action (pricing round 5 decision 19). */
.m-card-cta { justify-content:flex-start; margin-top:18px; }

/* ── Founding offer ──────────────────────────────────────────────────────────────────────────────── */
.m-founding { background:linear-gradient(135deg, #1f1e1b 0%, #2a2926 100%); color:#fff; border-radius:16px; padding:40px; }
.m-founding-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; }
.m-founding h2 { color:#fff; }
.m-founding .m-sub { color:#d9d7d2; }
.m-founding-badge { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:100px; padding:5px 13px; margin-bottom:14px; }
.m-founding-seat { font-family:var(--mono); font-size:15px; color:#fff; margin:14px 0; }
.m-founding-seat strong { color:#9fb6ff; }
.m-founding-close { font-size:14px; color:#c9d4f5; margin:-6px 0 14px; }
.m-founding-bonuses { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:14.5px; }
.m-founding-bonuses li { display:flex; gap:10px; align-items:flex-start; }
.m-founding-bonuses li svg { width:16px; height:16px; stroke:#9fb6ff; stroke-width:2.4; flex:none; margin-top:3px; }
.m-founding-ladder { width:100%; border-collapse:collapse; margin-top:10px; font-size:14px; }
.m-founding-ladder th, .m-founding-ladder td { text-align:left; padding:9px 8px; border-bottom:1px solid rgba(255,255,255,.12); }
.m-founding-ladder th { font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#b7b5ad; }
.m-founding-ladder td { font-family:var(--mono); }
.m-founding .btn-primary { background:#fff; color:var(--ink); }
.m-founding .btn-primary:hover { background:#eceae5; }

/* ── Testimonial ─────────────────────────────────────────────────────────────────────────────────── */
.m-quote { max-width:760px; margin:0 auto; text-align:center; }
.m-quote-mark { font-size:15px; color:var(--secondary-dark); line-height:1.6; }
.m-quote blockquote { font-size:22px; line-height:1.5; font-weight:500; letter-spacing:-0.01em; margin:0 0 18px; text-wrap:pretty; }
.m-quote-cite { font-size:14px; color:var(--secondary); }
.m-quote-cite strong { color:var(--ink); }

/* ── Old-way / new-way pair (Monitor) ──────────────────────────────────────────────────────────────── */
.m-versus { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.m-versus-card { border-radius:12px; padding:24px; border:1px solid var(--border-soft); }
.m-versus-old { background:var(--orange-row); border-color:#f0dcc9; }
.m-versus-new { background:#e9f5ee; border-color:#c9e6d4; }
.m-versus-label { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; }
.m-versus-old .m-versus-label { color:var(--orange); }
.m-versus-new .m-versus-label { color:var(--green); }
.m-versus-card p { font-size:15px; line-height:1.55; color:var(--secondary-dark); margin:0; }

/* ── FAQ ─────────────────────────────────────────────────────────────────────────────────────────── */
.m-faq { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.m-faq-item { background:var(--surface); border:1px solid var(--border-soft); border-radius:12px; padding:20px 24px; }
.m-faq-q { font-size:16px; font-weight:700; margin:0 0 6px; }
.m-faq-a { font-size:14.5px; line-height:1.6; color:var(--secondary); margin:0; }
.m-faq-a a { color:var(--blue); font-weight:600; }

/* ── Screenshot placeholder slot (no external images; real screenshots land later) ──────────────────── */
.m-shot { border:1px solid var(--border-soft); border-radius:14px; overflow:hidden; box-shadow:0 24px 60px -30px rgba(31,30,27,.2); background:var(--surface); }
.m-shot-bar { display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--subtle); border-bottom:1px solid var(--hair); }
.m-shot-dot { width:10px; height:10px; border-radius:50%; background:#e4e2dd; }
.m-shot-url { margin-left:12px; font-size:12.5px; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:4px 12px; }
.m-shot-body { min-height:300px; display:flex; align-items:center; justify-content:center; text-align:center; padding:40px; color:var(--muted); font-size:14px; background:repeating-linear-gradient(45deg, var(--subtle), var(--subtle) 12px, var(--surface) 12px, var(--surface) 24px); }
.m-shot-slot { font-weight:600; color:var(--secondary); }
.m-shot-media img { display:block; width:100%; height:auto; }

/* ── Waitlist ────────────────────────────────────────────────────────────────────────────────────── */
.m-waitlist { max-width:640px; margin:0 auto; text-align:center; background:var(--surface); border:1px solid var(--border-soft); border-radius:14px; padding:36px; }
.m-form { display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; justify-content:center; }
.m-form .field { max-width:220px; }
.m-form-note { font-size:12.5px; color:var(--muted); margin-top:12px; }
.m-vote-ok { background:#e9f5ee; border:1px solid #c9e6d4; color:var(--green); border-radius:10px; padding:16px 18px; font-size:15px; font-weight:600; }
.m-vote-tally { font-family:var(--mono); }

/* ── Source status (ADR-0068 D5) ─────────────────────────────────────────────────────────────────── */
.m-status { display:flex; flex-direction:column; gap:40px; }
.m-status-state .m-h2 { margin-bottom:18px; }
.m-status-area { margin-bottom:28px; }
.m-status-area-h { font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; }
.m-status-row { background:var(--surface); border:1px solid var(--border-soft); border-radius:12px; padding:20px 22px; margin-bottom:12px; }
.m-status-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.m-status-name { font-size:18px; font-weight:700; }
.m-status-badges .badge { margin:0 0 0 6px; }
.m-status .badge-green { color:var(--green); background:#e9f5ee; }
.m-status-facts { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:16px 0 0; }
.m-status-facts dt { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.m-status-facts dd { margin:2px 0 0; font-family:var(--mono); font-size:15px; }
.m-status-classes { width:100%; border-collapse:collapse; margin-top:16px; font-size:14px; }
.m-status-classes th, .m-status-classes td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--row-border); vertical-align:top; }
.m-status-classes th { font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.m-status-classes td:nth-child(2), .m-status-classes td:nth-child(3) { font-family:var(--mono); }
.m-status-sub { margin-top:14px; padding-left:16px; border-left:2px solid var(--hair); }
.m-status-sub .m-status-row { margin-bottom:0; padding:12px 16px; }
.m-status-group { margin-bottom:12px; }
.m-status-group-h { font-size:18px; font-weight:700; margin:0 0 10px; }
.m-status-group > .m-status-row { margin-left:16px; }
.m-status-note { font-size:14px; color:var(--secondary); margin:10px 0 0; }
.m-status-empty { font-size:16px; color:var(--secondary); text-align:center; }
@media (max-width: 720px) {
  .m-status-facts { grid-template-columns:1fr; }
  .m-status-classes { display:block; overflow-x:auto; }
}

/* ── CTA band ────────────────────────────────────────────────────────────────────────────────────── */
.m-cta-band { text-align:center; }
.m-cta-band .m-h2 { margin-bottom:14px; }

/* ── Footer ──────────────────────────────────────────────────────────────────────────────────────── */
.m-footer { background:var(--subtle); border-top:1px solid var(--hair); }
.m-footer-inner { max-width:1360px; margin:0 auto; padding:52px 24px 28px; }
.m-foot-cols { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; }
.m-foot-about { font-size:14px; line-height:1.6; color:var(--muted); margin:12px 0 0; max-width:280px; }
.m-foot-col { display:flex; flex-direction:column; gap:10px; font-size:14px; }
.m-foot-h { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.m-foot-col a { color:var(--secondary-dark); font-weight:500; }
.m-foot-col a:hover { color:var(--ink); }
.m-foot-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:44px; padding-top:22px; border-top:1px solid var(--hair); font-size:13px; color:var(--muted); }
.m-foot-legal { display:flex; gap:22px; flex-wrap:wrap; }

/* ── Spacing / link utilities (strict CSP: no inline style= is allowed) ─────────────────────────────── */
.m-pt-0 { padding-top: 0; }
.m-pt-8 { padding-top: 8px; }
.m-pt-24 { padding-top: 24px; }
.m-pt-52 { padding-top: 52px; }
.m-mt-16 { margin-top: 16px; }
.m-mt-22 { margin-top: 22px; }
.m-mb-26 { margin-bottom: 26px; }
.m-link { color: var(--blue); font-weight: 600; }

/* ── Responsive ──────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  #hub-discover:checked ~ .m-pricing .m-plans, #hub-manage:checked ~ .m-pricing .m-plans { grid-template-columns:1fr 1fr; }
  .m-founding-grid, .m-versus, .m-two-col { grid-template-columns:1fr; }
  .m-founding { padding:28px; }
}
@media (max-width: 720px) {
  .m-h1 { font-size:40px; }
  .m-h2 { font-size:29px; }
  .m-cards-2, .m-cards-3, .m-pricing { grid-template-columns:1fr; }
  #hub-discover:checked ~ .m-pricing .m-plans, #hub-manage:checked ~ .m-pricing .m-plans { grid-template-columns:1fr; }
  .m-hub-switch { max-width:100%; flex-wrap:wrap; }
  .m-hub-switch label { padding:6px 12px; }
  .m-nav-links { display:none; }
  .m-statbar { gap:32px; }
  .m-tl-row { grid-template-columns:1fr; gap:6px; }
  .m-foot-cols { grid-template-columns:1fr 1fr; gap:28px; }
  .m-section { padding:52px 24px; }
}
.m-two-col { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
/* A measured figure, linked to the status page that measures it (owner ruling 26, 2026-10-31): the surrounding type, a quiet
   dotted underline in the muted colour, solid on hover. a.m-measured outranks .m-faq-a a, so it reads the same in the FAQ. */
a.m-measured { color:inherit; font-weight:inherit; text-decoration:underline dotted var(--muted); text-underline-offset:3px; }
a.m-measured:hover { text-decoration-style:solid; }