@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

/* ============================================
   CACTUS CAPITAL — SHARED DESIGN SYSTEM
   Used by all 5 landing pages
   ============================================ */

:root {
  --dust: #e8dcc4;
  --dust-dim: #c9b896;
  --sand: #a8916b;
  --clay: #8b4a2b;
  --rust: #b8502a;
  --ember: #d9672a;
  --bone: #f4ead5;
  --coal: #151210;
  --asphalt: #1f1b17;
  --smoke: #2a2520;
  --steel: #3a3530;
  --cactus: #5a6b3f;
  --cactus-bright: #7a8f52;
  --blood: #7a2020;
  --warn: #d4a43c;
  --success: #7a8f52;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--coal);
  color: var(--dust);
  font-family: 'Lora', Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* Grit overlays */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0 0.75 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.22;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 3px);
  pointer-events: none;
  z-index: 2;
}

main, nav, footer, section { position: relative; z-index: 3; }

h1, h2, h3, h4, .display {
  font-family: 'Oswald', 'Impact', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  font-weight: 600;
}

.mono { font-family: 'JetBrains Mono', monospace; }
a { color: inherit; text-decoration: none; }

.italic-serif {
  font-family: 'Lora', serif;
  font-style: italic;
  text-transform: lowercase;
  font-weight: 500;
}

/* === TOP BAR === */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(21, 18, 16, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--steel);
}
.topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
}
.brand-mark {
  width: 28px;
  height: 28px;
  background: var(--coal);
  border: 1px solid var(--rust);
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.back-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--dust-dim);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.back-link:hover { color: var(--ember); }
.back-link::before { content: '← '; }

/* === HERO (variant for landing pages) === */
.lp-hero {
  min-height: 80vh;
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 64px 80px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
  position: relative;
}

.lp-hero-glow {
  position: absolute;
  top: 10%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(217, 103, 42, 0.15), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.track-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ember);
  margin-bottom: 28px;
  padding: 8px 14px;
  border: 1px solid var(--ember);
}
.track-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ember);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

.lp-hero h1 {
  font-size: clamp(44px, 6.5vw, 92px);
  color: var(--bone);
  margin-bottom: 24px;
  line-height: 0.95;
}
.lp-hero h1 .accent {
  color: var(--ember);
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: -0.01em;
}

.lp-hero-sub {
  font-size: 19px;
  color: var(--dust-dim);
  margin-bottom: 40px;
  max-width: 560px;
  line-height: 1.55;
}
.lp-hero-sub strong { color: var(--dust); font-weight: 500; }

.hero-bullets {
  list-style: none;
  margin-bottom: 40px;
  display: grid;
  gap: 14px;
  max-width: 540px;
}
.hero-bullets li {
  display: flex;
  gap: 14px;
  align-items: start;
  font-size: 16px;
  color: var(--dust);
  line-height: 1.5;
}
.hero-bullets li::before {
  content: '✦';
  color: var(--ember);
  font-size: 14px;
  margin-top: 4px;
  flex-shrink: 0;
}

/* === FORM CARD (right side of hero) === */
.form-card {
  background: var(--asphalt);
  border: 1px solid var(--steel);
  padding: 40px 36px;
  position: relative;
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 95%, 95% 100%, 0 100%);
}

.form-card-header {
  border-bottom: 1px dashed var(--steel);
  padding-bottom: 20px;
  margin-bottom: 28px;
}
.form-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ember);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.form-title {
  font-family: 'Oswald', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--bone);
  text-transform: uppercase;
  line-height: 1.1;
}
.form-sub {
  font-size: 14px;
  color: var(--dust-dim);
  margin-top: 8px;
}

.form-group { margin-bottom: 18px; }

.form-group label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: var(--coal);
  border: 1px solid var(--steel);
  padding: 14px 16px;
  color: var(--bone);
  font-family: 'Lora', serif;
  font-size: 16px;
  transition: all 0.2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--ember);
  background: var(--smoke);
}

.form-submit {
  width: 100%;
  padding: 18px 24px;
  background: var(--ember);
  border: none;
  color: var(--coal);
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all 0.25s;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.form-submit:hover {
  background: var(--rust);
  color: var(--bone);
  gap: 16px;
}

.form-privacy {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--sand);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 16px;
  text-align: center;
  line-height: 1.5;
}

/* Calendar booking alt CTA */
.form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--sand);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--steel);
}

.calendar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  background: transparent;
  border: 1px solid var(--dust);
  color: var(--dust);
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all 0.25s;
}
.calendar-btn:hover {
  background: var(--dust);
  color: var(--coal);
}

/* === PROOF BAR === */
.proof-bar {
  background: var(--asphalt);
  border-top: 1px solid var(--steel);
  border-bottom: 1px solid var(--steel);
  padding: 40px 64px;
}
.proof-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}
.proof-item {
  border-right: 1px solid var(--steel);
  padding: 0 20px;
}
.proof-item:last-child { border-right: none; }
.proof-num {
  font-family: 'Oswald', sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--ember);
  line-height: 1;
}
.proof-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dust-dim);
  margin-top: 8px;
}

/* === CONTENT SECTIONS === */
.content-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 90px 64px;
}

.section-header-left {
  max-width: 720px;
  margin-bottom: 60px;
}

.section-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ember);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  margin-bottom: 16px;
}
.section-kicker::before { content: '[ '; }
.section-kicker::after { content: ' ]'; }

.section-title {
  font-size: clamp(34px, 4.5vw, 56px);
  color: var(--bone);
  margin-bottom: 18px;
  line-height: 0.95;
}
.section-title .italic {
  font-family: 'Lora', serif;
  font-style: italic;
  text-transform: lowercase;
  font-weight: 500;
  color: var(--sand);
}

.section-sub {
  color: var(--dust-dim);
  font-size: 17px;
  max-width: 680px;
}

/* Three-column feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-card {
  background: var(--asphalt);
  border: 1px solid var(--steel);
  padding: 32px 28px;
  position: relative;
  transition: all 0.3s;
}
.feature-card:hover {
  border-color: var(--ember);
  transform: translateY(-3px);
}
.feature-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ember);
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}
.feature-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  color: var(--ember);
}
.feature-card h3 {
  font-size: 22px;
  color: var(--bone);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.feature-card p {
  color: var(--dust-dim);
  font-size: 15px;
  line-height: 1.55;
}

/* Process steps */
.process-list {
  display: grid;
  gap: 0;
}
.process-step {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 28px;
  padding: 32px 0;
  border-bottom: 1px solid var(--steel);
  align-items: center;
}
.process-step:last-child { border-bottom: none; }
.step-num {
  font-family: 'Oswald', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: var(--ember);
  line-height: 1;
}
.step-content h3 {
  font-size: 24px;
  color: var(--bone);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.step-content p {
  color: var(--dust-dim);
  font-size: 15px;
  line-height: 1.55;
  max-width: 600px;
}
.step-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--sand);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* FAQ */
.faq-list { display: grid; gap: 2px; }
.faq-item {
  background: var(--asphalt);
  border: 1px solid var(--steel);
}
.faq-q {
  padding: 24px 28px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  color: var(--bone);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: background 0.2s;
  user-select: none;
}
.faq-q:hover { background: var(--smoke); }
.faq-toggle {
  width: 28px;
  height: 28px;
  border: 1px solid var(--ember);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ember);
  flex-shrink: 0;
  transition: transform 0.3s;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
}
.faq-item.open .faq-toggle {
  transform: rotate(45deg);
  background: var(--ember);
  color: var(--coal);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 28px;
  color: var(--dust-dim);
  font-size: 15px;
  line-height: 1.6;
}
.faq-item.open .faq-a {
  max-height: 500px;
  padding: 0 28px 24px;
}

/* Testimonial / proof quote */
.big-quote {
  background: var(--asphalt);
  border-left: 4px solid var(--ember);
  padding: 40px 48px;
  margin: 60px auto;
  max-width: 900px;
  position: relative;
}
.big-quote-text {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--dust);
  line-height: 1.5;
  margin-bottom: 20px;
}
.big-quote-attr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--sand);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.big-quote-attr::before { content: '— '; }

/* Final CTA */
.final-cta {
  background: linear-gradient(135deg, var(--asphalt), var(--smoke));
  padding: 80px 64px;
  text-align: center;
  border-top: 1px solid var(--steel);
  border-bottom: 1px solid var(--steel);
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(217, 103, 42, 0.2), transparent 60%);
  pointer-events: none;
}
.final-cta-inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.final-cta h2 {
  font-size: clamp(36px, 5vw, 60px);
  color: var(--bone);
  margin-bottom: 20px;
  line-height: 0.95;
}
.final-cta p {
  color: var(--dust-dim);
  font-size: 18px;
  margin-bottom: 36px;
}
.final-cta-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 1px solid var(--dust);
  color: var(--dust);
  cursor: pointer;
  transition: all 0.25s;
  background: transparent;
}
.btn:hover {
  background: var(--dust);
  color: var(--coal);
}
.btn-primary {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--coal);
}
.btn-primary:hover {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--bone);
}

/* === FOOTER ===
   Rebuilt 2026-09-08. The old rule dropped brand, guide links, social and the
   legal line into ONE space-between flex row. With four heterogeneous children
   of wildly different widths they wrapped into a ragged stack that read as
   pushed-together noise. It is now two deliberate bands -- an identity row,
   a rule, then the fine print -- so the footer resolves the same way on every
   page whether or not the social block is present.
   index.html is NOT affected: the homepage carries its own inline styles. */
footer {
  background: var(--coal);
  border-top: 1px solid var(--steel);
  padding: 56px 64px 34px;
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 44px;
  row-gap: 18px;
}
.footer-brand {
  flex: 0 0 auto;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--bone);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.footer-legal {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  line-height: 1.9;
  color: var(--sand);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Guide links sit beside the brand and take up the slack in the top band. */
.footer-legal[data-role="footer-magnets"] {
  flex: 1 1 300px;
  color: var(--dust-dim);
}
.footer-legal[data-role="footer-magnets"] a {
  color: var(--dust-dim);
  border-bottom: 1px solid rgba(201, 184, 150, 0.3);
  padding-bottom: 1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.footer-legal[data-role="footer-magnets"] a:hover,
.footer-legal[data-role="footer-magnets"] a:focus-visible {
  color: var(--ember);
  border-bottom-color: var(--ember);
}
/* Copyright / contact is fine print: its own full-width band under a rule. */
.footer-inner > .footer-legal:not([data-role]) {
  flex: 1 1 100%;
  margin-top: 6px;
  padding-top: 20px;
  border-top: 1px solid var(--steel);
  font-size: 11px;
  letter-spacing: 0.1em;
}
/* Social lived only on the homepage until 2026-08-25, so every landing page --
   the ones that actually take ad traffic -- was a dead end for anyone wanting to
   look us up before filling in a form. */
.footer-social {
  display: flex;
  gap: 22px;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
}
.footer-social a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dust-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--ember);
  border-bottom-color: var(--ember);
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Hero animations */
.track-badge { animation: fadeUp 0.7s 0.1s both; }
.lp-hero h1 { animation: fadeUp 0.8s 0.25s both; }
.lp-hero-sub { animation: fadeUp 0.8s 0.4s both; }
.hero-bullets { animation: fadeUp 0.8s 0.55s both; }
.form-card { animation: fadeUp 1s 0.35s both; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === RESPONSIVE === */
@media (max-width: 1000px) {
  .lp-hero { grid-template-columns: 1fr; padding: 40px 24px 60px; }
  .feature-grid { grid-template-columns: 1fr; }
  .proof-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .proof-item:nth-child(2) { border-right: none; }
}
@media (max-width: 700px) {
  .topbar-inner { padding: 12px 20px; }
  .lp-hero { padding: 32px 20px 48px; }
  .form-card { padding: 28px 24px; }
  .content-section { padding: 60px 20px; }
  .proof-bar { padding: 28px 20px; }
  .proof-inner { grid-template-columns: 1fr 1fr; }
  .final-cta { padding: 60px 24px; }
  .process-step { grid-template-columns: 60px 1fr; gap: 16px; }
  .step-time { grid-column: 1 / -1; padding-left: 76px; }
  .step-num { font-size: 36px; }
  footer { padding: 40px 24px 26px; }
  .footer-inner { column-gap: 28px; row-gap: 16px; }
  .footer-social { margin-left: 0; }
}



  /* Buyer accent: cactus green */
  .lp-hero .track-badge { color: var(--cactus-bright); border-color: var(--cactus-bright); }
  .lp-hero .track-badge::before { background: var(--cactus-bright); }
  .lp-hero h1 .accent { color: var(--cactus-bright); }
  .form-submit { background: var(--cactus-bright); color: var(--coal); }
  .form-submit:hover { background: var(--cactus); color: var(--bone); }
  .feature-icon { color: var(--cactus-bright); }
  .feature-num { color: var(--cactus-bright); }
  .section-kicker { color: var(--cactus-bright); }
  .step-num { color: var(--cactus-bright); }

  /* Deal preview card */
  .deal-preview {
    max-width: 900px;
    margin: 40px auto 0;
    background: var(--asphalt);
    border: 1px solid var(--steel);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
  }
  .deal-preview-img {
    background:
      linear-gradient(135deg, rgba(0,0,0,0.4), transparent),
      repeating-linear-gradient(45deg, var(--smoke) 0 20px, var(--coal) 20px 40px);
    min-height: 320px;
    position: relative;
    display: flex;
    align-items: end;
    padding: 20px;
  }
  .deal-preview-img::after {
    content: 'SAMPLE DEAL';
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--cactus-bright);
    letter-spacing: 0.3em;
    background: rgba(0,0,0,0.6);
    padding: 6px 10px;
    border: 1px solid var(--cactus-bright);
  }
  .deal-preview-addr {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--dust);
    letter-spacing: 0.1em;
    background: rgba(0,0,0,0.7);
    padding: 8px 12px;
  }
  .deal-preview-body { padding: 36px 32px; }
  .deal-status {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--coal);
    background: var(--cactus-bright);
    padding: 4px 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .deal-preview h3 {
    font-size: 24px;
    color: var(--bone);
    margin-bottom: 20px;
    text-transform: uppercase;
  }
  .deal-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 20px 0;
    border-top: 1px dashed var(--steel);
    border-bottom: 1px dashed var(--steel);
    margin-bottom: 20px;
  }
  .deal-stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--sand);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }
  .deal-stat-val {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    color: var(--bone);
    font-weight: 600;
    margin-top: 4px;
  }
  .deal-stat-val.spread { color: var(--cactus-bright); }
  .deal-note {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--dust-dim);
    letter-spacing: 0.05em;
  }

  @media (max-width: 800px) {
    .deal-preview { grid-template-columns: 1fr; }
  }



/* === GHL FUNNEL FIX ===
   GHL Custom HTML is injected inside a white page/row, so body/html styles do not control the canvas.
   This wrapper forces the landing page to render dark and full-bleed inside GHL.
*/
.cactus-page {
  background: var(--coal);
  color: var(--dust);
  font-family: 'Lora', Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 100vh;
}
.cactus-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0 0.75 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.22;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}
.cactus-page::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 3px);
  pointer-events: none;
  z-index: 2;
}
.cactus-page nav,
.cactus-page section,
.cactus-page footer,
.cactus-page .big-quote {
  position: relative;
  z-index: 3;
}
.cactus-page .topbar { width: 100%; }
.cactus-page a { color: inherit; text-decoration: none; }

/* Kill common GHL white container bleed around the embed */
.cactus-page, .cactus-page * { box-sizing: border-box; }


/* ---- additions to the imported system ---- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* 2026-09-14: amber MICHAEL: notes are for the source, never for a visitor -
   seven of them were live on /about, /deals, /sell, /agent, /refer. Hidden by
   default; add class show-ph to <body> in devtools to review them. */
.ph-x {
  display: none; border: 1px dashed var(--warn); color: var(--warn);
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 0.06em;
  padding: 7px 12px; text-transform: uppercase; line-height: 1.6; text-align: left;
}
body.show-ph .ph-x { display: inline-block; }
.proof-num .ph-x { font-size: 13px; padding: 4px 10px; }
.form-group input.invalid, .form-group textarea.invalid { border-color: var(--warn); }
.form-group textarea {
  width: 100%; min-height: 92px; resize: vertical;
  padding: 13px 15px; background: var(--coal); border: 1px solid var(--steel);
  color: var(--dust); font-family: 'Lora', Georgia, serif; font-size: 15px;
}
.form-group textarea:focus {
  outline: 0; border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(217, 103, 42, 0.18);
}
.form-error {
  margin-top: 16px; padding: 13px 15px; font-size: 14.5px; color: var(--bone);
  background: rgba(122, 32, 32, 0.22); border: 1px solid var(--blood);
}
.form-error a { color: var(--ember); }
.form-done { text-align: center; padding: 40px 0; }
.form-done-head {
  font-family: 'Oswald', sans-serif; font-size: 28px; color: var(--cactus-bright);
  text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0.03em;
}
.form-done p { color: var(--dust-dim); font-size: 15.5px; line-height: 1.6; }
.faq-q { cursor: pointer; }
.faq-q:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.faq-a a { color: var(--ember); }
.footer-legal a { color: var(--dust-dim); }
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }

/* ── Immediate download on opt-in ─────────────────────────────────────────
   Added 2026-08-22. Both magnets promised "check your email in the next
   minute or two" while the GHL sequence that sends them does not exist yet,
   so the page was making a promise the system could not keep. The success
   state now hands over the file directly. The email still follows once the
   sequence is built; this is the floor under it, not a replacement. */
.form-done-dl { margin-top: 22px; }
.btn-dl {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--coal);
  text-decoration: none;
}
.btn-dl:hover {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--bone);
}
.form-done-note {
  margin-top: 14px;
  font-size: 13.5px !important;
  color: var(--sand) !important;
}

/* ── Resource library ─────────────────────────────────────────────────────
   /resources/ — the one page that shows everything he gives away. Built
   2026-08-22: the PDFs existed in assets/downloads and NOTHING on the site
   linked them, so a visitor who did not land on the exact opt-in page had no
   route to them at all. */
.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  margin: 34px 0;
}
.res-card {
  border: 1px solid var(--steel);
  background: var(--asphalt);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.res-card:hover { border-color: var(--sand); }
.res-kind {
  font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ember); margin-bottom: 10px;
}
.res-card h3 {
  font-family: 'Oswald', sans-serif; font-size: 21px; color: var(--bone);
  text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 12px;
  line-height: 1.25;
}
.res-card p { color: var(--dust-dim); font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.res-card ul { color: var(--dust-dim); font-size: 14.5px; line-height: 1.7; margin: 0 0 18px; padding-left: 18px; }
.res-card .btn { margin-top: auto; align-self: flex-start; }
.res-soon { opacity: 0.55; }
.res-soon .res-kind { color: var(--sand); }
.res-note {
  border-left: 2px solid var(--ember);
  padding: 4px 0 4px 22px;
  margin: 40px 0 10px;
  max-width: 720px;
}
.res-note p { color: var(--dust-dim); font-size: 15.5px; line-height: 1.65; margin: 0 0 12px; }
.res-note p:last-child { margin-bottom: 0; }
.res-note strong { color: var(--bone); }
.res-fineprint {
  color: var(--sand); font-size: 14px; line-height: 1.7; max-width: 760px;
  border-top: 1px solid var(--steel); padding-top: 20px;
}
.res-fineprint a { color: var(--dust-dim); }
.res-fineprint a:hover { color: var(--ember); }

/* Town-page body copy. Generated pages only (build-town-pages.py). Measure is
   held near 70 characters because these run 350-450 words of continuous prose,
   which is longer than any other page on the site and unreadable full-bleed. */
.town-para {
  color: var(--dust-dim);
  font-size: 16.5px;
  line-height: 1.75;
  max-width: 68ch;
  margin: 0 0 20px;
}
.town-para strong { color: var(--bone); }

/* Breadcrumb nav on blog post pages -- pillar<->cluster visible link-back,
   added 2026-09-07 alongside BreadcrumbList JSON-LD (Booky). */
.blog-breadcrumb {
  max-width: 1400px;
  margin: 14px auto 0;
  padding: 0 32px;
  font-size: 13px;
  color: var(--dust-dim);
}
.blog-breadcrumb a { color: var(--dust-dim); text-decoration: none; }
.blog-breadcrumb a:hover { color: var(--ember); }
.blog-breadcrumb span { margin: 0 4px; }


/* ── BLOG TYPOGRAPHY ──────────────────────────────────────────────────────
   Added 2026-09-08, his call: the blog was "too tightly compacted".
   Root cause, not a taste problem: the `* { margin: 0; padding: 0 }` reset at
   the top of this file was never followed by ANY rule for blog prose, so every
   post rendered its paragraphs with zero space between them at body 17px, and
   the hub / category listings had no rules at all. Everything below is scoped
   to blog classes, so no landing page moves. */

/* Post body — measure held near 68ch, the same reasoning as .town-para. */
.post-body { max-width: 68ch; }
.post-body > *:first-child { margin-top: 0; }
.post-body p {
  color: var(--dust-dim);
  font-size: 19px;
  line-height: 1.85;
  margin: 0 0 28px;
}
.post-body p:last-child { margin-bottom: 0; }
.post-body h2 {
  color: var(--bone);
  font-size: clamp(27px, 3.2vw, 36px);
  line-height: 1.12;
  margin: 60px 0 22px;
}
.post-body h3 {
  color: var(--bone);
  font-size: 21px;
  line-height: 1.25;
  margin: 40px 0 16px;
}
.post-body ul,
.post-body ol {
  color: var(--dust-dim);
  font-size: 18.5px;
  line-height: 1.8;
  margin: 0 0 28px;
  padding-left: 24px;
}
.post-body li { margin-bottom: 12px; }
.post-body li::marker { color: var(--ember); }
.post-body strong { color: var(--bone); }
.post-body a {
  color: var(--ember);
  border-bottom: 1px solid rgba(217, 103, 42, 0.4);
  transition: border-color 0.18s ease;
}
.post-body a:hover { border-bottom-color: var(--ember); }
.post-body blockquote {
  border-left: 2px solid var(--ember);
  padding: 4px 0 4px 24px;
  margin: 0 0 28px;
  color: var(--dust);
  font-size: 19px;
  line-height: 1.8;
}

/* Related-posts list at the foot of a post. */
.post-related {
  list-style: none;
  max-width: 720px;
  border-top: 1px solid var(--steel);
}
.post-related li { border-bottom: 1px solid var(--steel); }
.post-related a {
  display: block;
  padding: 20px 0;
  color: var(--dust);
  font-size: 18px;
  line-height: 1.5;
  transition: color 0.18s ease;
}
.post-related a:hover { color: var(--ember); }

/* Hub and category listings. */
.blog-hub-list {
  list-style: none;
  max-width: 820px;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--steel);
}
.blog-hub-item {
  padding: 30px 0 28px;
  border-bottom: 1px solid var(--steel);
}
.blog-hub-item > a { display: block; }
.blog-hub-item strong {
  color: var(--bone);
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  transition: color 0.18s ease;
}
.blog-hub-item > a:hover strong { color: var(--ember); }
.blog-hub-excerpt {
  color: var(--dust-dim);
  font-size: 17px;
  line-height: 1.75;
  margin: 12px 0 0;
  max-width: 68ch;
}
.blog-hub-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sand);
  margin-top: 14px;
}
.blog-category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.blog-category-nav-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dust-dim);
  border: 1px solid var(--steel);
  padding: 10px 16px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.blog-category-nav-link:hover,
.blog-category-nav-link:focus-visible {
  color: var(--ember);
  border-color: var(--ember);
}
.lp-intro {
  color: var(--dust-dim);
  font-size: 18.5px;
  line-height: 1.8;
  max-width: 68ch;
  margin: 0 0 44px;
}
.blog-breadcrumb { margin-bottom: 4px; letter-spacing: 0.04em; }

/* The hub stacks the category nav and the first listing as two separate
   .content-sections, so 90px of bottom padding met 90px of top padding and left
   a dead 180px band under the pills. Close the seam without touching either
   section's own rhythm. */
.content-section:has(> .blog-category-nav) { padding-bottom: 24px; }

/* Headline-to-text separation, blog posts only. The shared hero gives the h1
   24px of bottom margin, which is fine under a one-line landing-page headline
   and far too tight under a post title that wraps to three or four lines at
   92px. `body:has(.post-body)` scopes it to posts, so no landing page moves. */
body:has(.post-body) .lp-hero h1 { margin-bottom: 56px; }
/* The intro under a post title is a standfirst, not fine print. The shared
   19px landing-page size read as small text crammed under a 92px headline. */
body:has(.post-body) .lp-hero-sub {
  font-size: 30px;
  line-height: 1.5;
  max-width: 40ch;
  color: var(--dust);
}
.post-body p { font-size: 22px; line-height: 1.8; }
.post-body ul, .post-body ol { font-size: 21px; }
.post-body h2 { margin-bottom: 30px; }
.post-body h3 { margin-bottom: 20px; }

@media (max-width: 700px) {
  .post-body p { font-size: 19px; margin-bottom: 24px; }
  .post-body ul, .post-body ol { font-size: 18.5px; }
  .post-body h2 { margin: 44px 0 22px; }
  .blog-hub-item strong { font-size: 20px; }
  body:has(.post-body) .lp-hero h1 { margin-bottom: 32px; }
  body:has(.post-body) .lp-hero-sub { font-size: 22px; }
}

/* footer-links (2026-09-14): every page links every money page. 13 pages were
   orphans - in the sitemap, linked from nowhere - which is why Google called
   them "unknown". Links are how pages get found; the sitemap is a hint. */
/* 2026-09-22: .footer-inner is a flex row, so the nav shrank to one 200px column and
   stacked every link vertically. Give it the whole row and let auto-fit spread it. */
.footer-inner > .footer-links { flex:1 0 100%; width:100%; }
.footer-links { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:18px 32px; margin:22px 0 26px; padding:22px 0 0; border-top:1px solid var(--steel); }
.footer-links div { display:flex; flex-direction:column; gap:7px; }
.footer-links span { font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sand); margin-bottom:4px; }
.footer-links a { color:var(--dust-dim); font-size:14px; text-decoration:none; }
.footer-links a:hover { color:var(--bone); }

/* post hero image (2026-09-14): one real photo under the headline, full column width */
.post-hero-img { max-width: 900px; margin: -8px auto 8px; padding: 0 24px; }
.post-hero-img img { width: 100%; height: auto; display: block; border: 1px solid var(--steel); }
.post-hero-img figcaption { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .06em; color: var(--sand); margin-top: 8px; text-transform: uppercase; }