@import url('/css/tokens.css');

/* ═══════════════════════════════════════════════════════════════════
   EstateBuilder.ai · Landing page
   Aesthetic: matches the pro tool — dark slate, cream, Outfit + Fraunces
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..900,0..100&family=Outfit:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,400..600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg-base:      #07070A;
  --bg-card:      #131318;
  --bg-elevated:  #1B1B22;
  --line:         rgba(245, 241, 236, 0.06);
  --line-strong:  rgba(245, 241, 236, 0.14);
  --text:         #F5F1EC;
  --text-dim:     #B4B4BE;
  --text-muted:   #7E8696;
  --accent:       #F5F1EC;
  --green:        #66ccaa;
  --gold:         #e8c87a;
  --orange:       #F08040;
  --blue:         #6C8BC4;
  --violet:       #B69BD9;
  --tan:          #C8A26A;       /* Fraunces italic emphasis colour */
  --serif:        'Fraunces', 'Times New Roman', Georgia, serif;
  --sans:         'Outfit', system-ui, sans-serif;
  --body-font:    'DM Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-base);
  color: var(--text-dim);
  font-family: var(--body-font);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 0%,   rgba(108,139,196,0.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 10%, rgba(240,128,64,0.04),  transparent 60%),
    radial-gradient(ellipse 60% 30% at 50% 100%, rgba(232,200,122,0.04), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(245,241,236,0.14); border: 2px solid transparent; background-clip: padding-box; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(245,241,236,0.30); background-clip: padding-box; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ─────────────────────────────────────── NAV ───────────────────────────
   Floating pill, fiscal.ai-style. Not full-width — a centered capsule
   that sits over the content. Backdrop-blur deepens on scroll via JS
   adding .nav-scrolled to the .nav element.                       */
.nav {
  position: fixed;
  top: 18px;
  left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  pointer-events: none; /* let pill capture clicks but band itself passthrough */
  padding: 0 16px;
}
.nav-pill {
  pointer-events: auto;
  display: flex; align-items: center;
  gap: 22px;
  padding: 8px 8px 8px 18px;
  background: rgba(15, 15, 18, 0.72);
  border: 1px solid rgba(245, 241, 236, 0.08);
  border-radius: 100px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 8px 32px -16px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(245,241,236,0.04);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  max-width: calc(100vw - 32px);
}
.nav-scrolled .nav-pill {
  background: rgba(10, 10, 12, 0.88);
  border-color: rgba(245, 241, 236, 0.12);
  box-shadow: 0 12px 40px -16px rgba(0,0,0,0.75);
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 26px;
  color: var(--text);
  letter-spacing: -0.015em;
  padding-right: 4px;
}
.nav-logo { height: 50px; width: auto; display: block; opacity: 1; }
.nav-name { white-space: nowrap; }
.nav-name-tld { color: var(--text-dim); font-weight: 500; }
.nav-links {
  display: flex; align-items: center; gap: 2px;
}
.nav-link {
  padding: 8px 14px;
  font: 500 13.5px/1 var(--sans);
  color: var(--text);
  border-radius: 100px;
  transition: color 160ms, background 160ms;
  white-space: nowrap;
}
.nav-link:hover { background: rgba(245,241,236,0.06); }
.nav-actions {
  display: flex; align-items: center; gap: 10px;
  padding-left: 2px;
}
.nav-secondary {
  font: 500 13.5px/1 var(--sans);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 100px;
  transition: color 160ms, background 160ms;
  white-space: nowrap;
}
.nav-secondary:hover { background: rgba(245,241,236,0.06); }
.nav-login {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px/1 var(--sans);
  color: var(--text);
  padding: 9px 16px;
  border: 1px solid rgba(245, 241, 236, 0.14);
  border-radius: 100px;
  background: rgba(20, 20, 24, 0.5);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
}
.nav-login:hover {
  border-color: rgba(245, 241, 236, 0.28);
  background: rgba(30, 30, 36, 0.6);
}
.nav-login-arrow { opacity: 0.8; font-size: 11px; }

/* Old class kept as no-op alias so any leftover markup still resolves. */
.nav-inner { display: contents; }
.nav-cta { display: none; }
.nav-explore { color: var(--gold); }

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-secondary { display: none; }
  .nav-pill { gap: 12px; padding: 8px 8px 8px 14px; }
}

/* ─────────────────────────────────────── BUTTONS ───────────────────────
   Fiscal.ai pattern: a soft-edged cream PILL with a leading arrow glyph
   and a trailing accent (lightning) — plus a plain text-link secondary
   that sits adjacent without competing.                            */
.btn-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  border-radius: 100px;
  font: 600 14px/1 var(--sans);
  letter-spacing: -0.005em;
  background: var(--text);
  color: var(--bg-base);
  border: 1px solid rgba(245,241,236,0.4);
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms ease,
              background 180ms ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 40px -14px rgba(245,241,236,0.32);
  background: #FFFFFF;
}
.btn-pill-arrow {
  font-size: 13px; opacity: 0.7;
  display: inline-flex; align-items: center;
}
.btn-pill-bolt {
  color: var(--orange);
  font-size: 14px;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-pill:hover .btn-pill-bolt { transform: scale(1.15) rotate(-6deg); }

.btn-text {
  display: inline-flex; align-items: center;
  padding: 13px 8px;
  font: 500 14px/1 var(--sans);
  color: var(--text);
  background: none; border: none;
  cursor: pointer;
  transition: opacity 160ms ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-text:hover { opacity: 0.7; }

/* Legacy classes — keep them rendering reasonably anywhere else they appear */
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  border-radius: 100px;
  font: 600 13.5px/1 var(--sans);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none;
}
.btn-primary { background: var(--text); color: var(--bg-base); }
.btn-primary:hover { background: #FFFFFF; transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(245,241,236,0.36); }
.btn-ghost { background: transparent; color: var(--text); border-color: rgba(245,241,236,0.18); }
.btn-ghost:hover { background: rgba(245,241,236,0.05); border-color: rgba(245,241,236,0.30); }
.btn-large { padding: 16px 28px; font-size: 14px; }

/* ─────────────────────────────────────── HERO (Fiscal.ai style) ─────────
   Single centered column. Huge bold sans-serif display, short sub-text,
   pill primary CTA + plain text-link secondary. The product screenshot
   moves into its own band below the hero (`.hero-shot-band`).        */
.hero {
  padding: 200px 32px 80px; /* big top pad clears the floating pill nav */
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.hero-centered .hero-stage {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.hero-kicker-row { margin-bottom: 28px; }
.hero-pill-tag {
  display: inline-flex; align-items: center;
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.01em;
  color: var(--text-dim);
  background: rgba(245, 241, 236, 0.04);
  border: 1px solid rgba(245, 241, 236, 0.08);
  padding: 8px 14px; border-radius: 100px;
}
.hero-display {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--text);
  margin: 0 0 28px;
  text-wrap: balance;
}
.hero-sub {
  font: 400 17px/1.55 var(--body-font);
  color: var(--text-dim);
  max-width: 580px;
  margin: 0 auto 36px;
}
@media (max-width: 1024px) {
  .hero { padding: 160px 24px 60px; }
}
@media (max-width: 600px) {
  .hero { padding: 140px 20px 48px; }
  .hero-display { font-size: clamp(38px, 11vw, 56px); letter-spacing: -0.03em; }
}

/* Old hero-text/grid kept as no-op fallback in case markup still ships */
.hero-grid { display: block; }
.hero-text { text-align: center; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.01em;
  color: var(--text-dim);
  background: rgba(245,241,236,0.04);
  border: 1px solid rgba(245,241,236,0.08);
  padding: 8px 14px; border-radius: 100px;
  margin-bottom: 28px;
}
.kicker-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 6px rgba(240,128,64,0.5);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.hero-h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--text);
  margin: 0 0 24px;
}
.hero-h1 em { font-style: normal; color: var(--text); }
.hero-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 580px;
  margin: 0 auto 36px;
}

/* ── Hero screenshot band — the section break + product mockup ── */
.hero-shot-band {
  padding: 40px 24px 80px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.hero-shot-headline {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 auto 48px;
  max-width: 920px;
  text-wrap: balance;
}

/* ── Hero entrance animation — stagger fade-up on first paint.
   Fires only on the hero so other sections wait for scroll reveal. */
@keyframes fis-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-centered .hero-stage > * {
  opacity: 0;
  animation: fis-fade-up 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-centered .hero-stage > *:nth-child(1) { animation-delay: 80ms; }
.hero-centered .hero-stage > *:nth-child(2) { animation-delay: 200ms; }
.hero-centered .hero-stage > *:nth-child(3) { animation-delay: 320ms; }
.hero-centered .hero-stage > *:nth-child(4) { animation-delay: 440ms; }

/* ── Scroll reveal — JS adds .is-visible when element enters viewport. */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* Hero figure should fade in slightly later for a layered feel. */
.hero-shot-band .hero-figure {
  opacity: 0;
  transform: translateY(36px) scale(0.98);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 120ms,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}
.hero-shot-band.is-visible .hero-figure {
  opacity: 1; transform: translateY(0) scale(1);
}
.hero-shot-band .hero-shot-headline {
  opacity: 0; transform: translateY(20px);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-shot-band.is-visible .hero-shot-headline {
  opacity: 1; transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero-centered .hero-stage > *,
  .reveal-on-scroll,
  .hero-shot-band .hero-figure,
  .hero-shot-band .hero-shot-headline {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.hero-cta-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 36px;
  justify-content: center;
  align-items: center;
}
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 22px;
}
.trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-muted);
}
.trust-icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(108,139,196,0.14); color: var(--blue);
  font-size: 11px;
}

.hero-figure {
  margin: 0;
  display: flex; align-items: center; justify-content: center;
}
.iso-massing {
  width: 100%; height: auto;
  max-width: 540px;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
}

/* ─────────────────────────────────── BROWSER FRAME (mock chrome) ─────── */
.browser-frame {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #0B0B12;
  border: 1px solid var(--line);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.65),
    0 12px 30px -10px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.05) inset;
}
.browser-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #15151D 0%, #0E0E15 100%);
  border-bottom: 1px solid var(--line);
}
.browser-dot {
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block;
}
.browser-dot.d1 { background: #FF5F56; }
.browser-dot.d2 { background: #FFBD2E; }
.browser-dot.d3 { background: #27C93F; }
.browser-url {
  margin-left: 14px;
  font: 500 11.5px/1 var(--mono);
  color: var(--text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-frame img,
.hero-shot {
  display: block;
  width: 100%;
  height: auto;
  background: #07070A;
}

.hero-figure {
  flex-direction: column;
  gap: 12px;
}
.hero-shot-caption {
  font: 500 11.5px/1.4 var(--mono);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-align: center;
}

/* ─────────────────────────────────── SCREENSHOT GALLERY ──────────────── */
.gallery {
  padding: 96px 0 24px;
  border-top: 1px solid var(--line);
}
.gallery .section-eyebrow,
.gallery .section-h2,
.gallery .section-lede {
  text-align: center;
}
.gallery .section-lede {
  max-width: 720px;
  margin-left: auto; margin-right: auto;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 56px;
}
.shot-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform 200ms ease, border-color 200ms ease;
}
.shot-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.shot-card-wide {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  gap: 48px;
  padding: 48px;
}
.shot-card-wide .shot-meta { flex: 1; }
.shot-card-wide .shot-media { flex: 1.4; }

.shot-meta { display: flex; flex-direction: column; gap: 14px; }
.shot-tag {
  font: 600 10.5px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.shot-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.18;
  color: var(--text);
  margin: 0;
}
.shot-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.shot-stats {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.shot-stats li {
  display: flex; flex-direction: column; gap: 2px;
  font: 500 11px/1 var(--mono);
}
.shot-stats strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.shot-stats span {
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10.5px;
}

.shot-media { position: relative; }
.shot-media-3d {
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, #d8c3a3 0%, #b8a283 50%, #8a7660 100%);
  box-shadow:
    0 30px 60px -15px rgba(0,0,0,0.65),
    0 10px 20px -8px rgba(0,0,0,0.4);
}
.shot-media-3d img {
  display: block;
  width: 100%; height: auto;
  mix-blend-mode: normal;
}
.browser-frame-sm {
  border-radius: 10px;
}
.browser-frame-sm .browser-bar { padding: 8px 12px; }
.browser-frame-sm .browser-dot { width: 9px; height: 9px; }
.browser-frame-sm .browser-url { font-size: 10.5px; margin-left: 10px; }

@media (max-width: 920px) {
  .gallery-grid { grid-template-columns: 1fr; gap: 24px; }
  .shot-card-wide { grid-column: span 1; flex-direction: column; gap: 28px; padding: 32px; }
  .shot-stats { grid-template-columns: 1fr 1fr; }
}

/* ─────────────────────────────────── SECTION COMMON ──────────────────── */
.section-eyebrow {
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.section-h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--text);
  margin: 0 0 20px;
}
.section-h2 em { font-style: italic; color: var(--tan); }
.section-lede {
  font-size: 16px; color: var(--text-dim); max-width: 640px;
  margin: 0 0 56px; line-height: 1.65;
}

/* ─────────────────────────────────── FEATURES ────────────────────────── */
.features {
  padding: 80px 0;
  border-top: 1px solid var(--line);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px)  { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .features-grid { grid-template-columns: 1fr; } }
.feature {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px;
  transition: border-color 150ms, transform 150ms;
}
.feature:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}
.feature-icon {
  font-size: 24px; line-height: 1; margin-bottom: 14px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(245,241,236,0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.feature-title {
  font-family: var(--sans);
  font-size: 16px; font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.feature-body {
  font-size: 13.5px; color: var(--text-dim); line-height: 1.65;
  margin: 0;
}

/* ─────────────────────────────────── ABOUT ───────────────────────────── */
.about {
  padding: 80px 0;
  border-top: 1px solid var(--line);
}
.about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 32px; } }

.about-body {
  font-size: 16px; color: var(--text-dim); line-height: 1.75;
  margin: 0 0 16px;
  max-width: 620px;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 36px;
}
@media (max-width: 600px) { .about-stats { grid-template-columns: 1fr; } }
.about-stat {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 16px;
}
.about-stat-num {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
  display: flex; align-items: baseline; gap: 6px;
}
.about-stat-unit {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}
.about-stat-label {
  font-size: 12px; color: var(--text-muted); margin-top: 8px;
  line-height: 1.5;
}

.about-quote {
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
}
.about-quote::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--tan), var(--blue));
}
.quote-mark {
  font-family: var(--serif);
  font-size: 64px; line-height: 0.8;
  color: var(--tan); opacity: 0.9;
  margin-bottom: 8px;
}
.about-quote blockquote {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.4;
  color: var(--text);
  font-weight: 400;
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}
.about-quote blockquote em { font-style: italic; color: var(--tan); }
.quote-attr {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.quote-name {
  font: 600 13px/1.4 var(--sans);
  color: var(--text);
}
.quote-detail {
  font-size: 12px; color: var(--text-muted); margin-top: 4px;
}

/* ─────────────────────────────────── HOW IT WORKS ────────────────────── */
.howitworks {
  padding: 80px 0;
  border-top: 1px solid var(--line);
}
.steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .step-arrow { display: none; }
}
.step {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px;
  position: relative;
}
.step-num {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--tan);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1;
}
.step-title {
  font-family: var(--sans);
  font-size: 17px; font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.step-body {
  font-size: 13.5px; color: var(--text-dim); line-height: 1.65;
}
.step-arrow {
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: var(--text-muted);
}

/* ─────────────────────────────────── PRICING ─────────────────────────── */
.pricing {
  padding: 80px 0;
  border-top: 1px solid var(--line);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.plan {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 150ms, transform 150ms;
}
.plan:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}
.plan-featured {
  border: 1px solid rgba(232,200,122,0.40);
  background:
    linear-gradient(180deg, rgba(232,200,122,0.06), transparent 50%),
    var(--bg-card);
}
.plan-featured:hover { border-color: rgba(232,200,122,0.65); }
.plan-badge {
  position: absolute; top: -12px; left: 28px;
  background: var(--gold);
  color: var(--bg-base);
  font: 700 10.5px/1 var(--sans);
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 6px;
}
.plan-name {
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.plan-price {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 8px;
  font-family: var(--serif);
  font-weight: 500;
  color: var(--text);
}
.plan-currency { font-size: 22px; color: var(--text-dim); }
.plan-amount   { font-size: 56px; line-height: 1; letter-spacing: -0.02em; }
.plan-period   { font: 500 14px/1 var(--sans); color: var(--text-muted); margin-left: 4px; }
.plan-tagline {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 24px;
}
.plan-features {
  list-style: none; padding: 0; margin: 0 0 32px;
  flex: 1;
}
.plan-features li {
  font-size: 13.5px; color: var(--text-dim);
  padding: 9px 0 9px 24px;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.plan-features li::before {
  content: '✓';
  position: absolute; left: 0; top: 9px;
  color: var(--gold);
  font-weight: 700;
}
.plan-features li:last-child { border-bottom: 0; }
.plan-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px;
  border-radius: 10px;
  font: 700 12px/1 var(--sans);
  letter-spacing: 0.05em;
  transition: all 150ms;
}
.plan-cta-primary {
  background: var(--accent); color: var(--bg-base);
}
.plan-cta-primary:hover { background: #FFFFFF; transform: translateY(-2px); }
.plan-cta-ghost {
  background: rgba(245,241,236,0.04); color: var(--text);
  border: 1px solid var(--line-strong);
}
.plan-cta-ghost:hover { background: rgba(245,241,236,0.08); border-color: rgba(245,241,236,0.30); }

/* ─────────────────────────────────── FAQ ─────────────────────────────── */
.faq {
  padding: 80px 0;
  border-top: 1px solid var(--line);
}
.faq-list {
  max-width: 820px;
}
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.faq-item summary {
  font-family: var(--sans);
  font-size: 16px; font-weight: 600;
  color: var(--text);
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  transition: color 150ms;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--serif);
  font-size: 22px;
  color: var(--text-muted);
  transition: transform 200ms, color 150ms;
  margin-left: 12px;
}
.faq-item[open] summary::after {
  content: '−';
  color: var(--tan);
}
.faq-item:hover summary { color: var(--text); }
.faq-item:hover summary::after { color: var(--text); }
.faq-body {
  padding: 0 0 22px;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 720px;
}
.faq-body em { color: var(--tan); font-style: italic; }

/* ─────────────────────────────────── FINAL CTA ───────────────────────── */
.final-cta {
  padding: 100px 32px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(240,128,64,0.08), rgba(108,139,196,0.06));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.final-h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 20px;
}
.final-h2 em { font-style: italic; color: var(--tan); }
.final-lede {
  color: var(--text-dim);
  font-size: 16px;
  max-width: 580px; margin: 0 auto 32px;
}
.final-cta-row {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* ─────────────────────────────────── FOOTER ──────────────────────────── */
.footer {
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 36px;
  padding-bottom: 36px;
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer-brand { max-width: 320px; }
.footer-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-logo { height: 22px; width: auto; }
.footer-name {
  font: 600 14px/1 var(--sans); color: var(--text);
}
.footer-tagline {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.footer-col-title {
  font: 700 10.5px/1 var(--sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text);
  margin-bottom: 14px;
}
.footer-link {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  padding: 6px 0;
  transition: color 150ms;
}
.footer-link:hover { color: var(--text); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  color: var(--text-muted);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links .footer-link { padding: 0; font-size: 11.5px; }

/* ─────────────────────────────────── AUDIENCE FILTER ───────────────────
   Sits right after the hero. Two-column band: "Built for" on the left
   (devs/architects/planners/lenders) vs "Toronto homeowner instead?"
   redirect on the right (to GardenSuite.ai). Acts as a one-glance
   answer to "am I on the right page?" without stealing attention from
   the primary pitch the way the old giant callout did. */
.audience-filter {
  padding: 32px 0 64px;
  background: var(--bg-base);
}
.audience-filter-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 32px;
  background: var(--bg-card);
}
@media (max-width: 800px) {
  .audience-filter-grid { grid-template-columns: 1fr; gap: 18px; }
}
.audience-col-yes { padding-right: 24px; border-right: 1px solid var(--line); }
.audience-col-no  { padding-left: 24px; }
@media (max-width: 800px) {
  .audience-col-yes { padding-right: 0; padding-bottom: 18px; border-right: none; border-bottom: 1px solid var(--line); }
  .audience-col-no  { padding-left: 0; padding-top: 6px; }
}
.audience-tag {
  display: inline-block;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.audience-tag-yes {
  background: rgba(232, 200, 122, 0.12);
  color: var(--gold);
  border: 1px solid rgba(232, 200, 122, 0.35);
}
.audience-tag-no {
  background: rgba(245, 241, 236, 0.06);
  color: var(--text-dim);
  border: 1px solid var(--line);
}
.audience-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.audience-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: var(--text);
  line-height: 1.45;
}
.audience-check {
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.45;
}
.audience-redirect-body {
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0 0 14px;
}
.audience-redirect-body strong { color: var(--text); font-weight: 600; }
.audience-redirect-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 14px/1 var(--sans);
  color: var(--text);
  text-decoration: none;
  padding: 10px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  transition: all 150ms ease;
}
.audience-redirect-cta:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}

/* ─────────────────────────────────── BY THE NUMBERS BAND ───────────────
   Social proof / scale band between the gallery and Features sections.
   Uses real numbers from the example project already cited on the page
   (the 1621 Eglinton precedent). Three centered stat blocks, generous
   typography, subtle background separator. */
.numbers {
  padding: 72px 0 56px;
  background: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-card) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.numbers-eyebrow {
  text-align: center;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 32px;
}
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
@media (max-width: 800px) {
  .numbers-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
}
.numbers-stat-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 5vw, 56px);
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.numbers-stat-num .currency,
.numbers-stat-num .suffix {
  font-size: 0.55em; opacity: 0.75; font-style: italic;
}
.numbers-stat-label {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 220px;
  margin: 0 auto;
}

/* ─────────────────────────────────── ANIMATIONS ──────────────────────── */
body { animation: fadeIn 360ms ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ───────── HERO v2 — split copy + product mockup (Phase 1, 2026-05-31) ───────── */
.hero { padding: 120px 32px 76px; max-width: 1200px; }
.hero-split { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,1.08fr); gap: 56px; align-items: center; text-align: left; }
.hero-copy { min-width: 0; }
.hero-split .hero-pill-tag { margin-bottom: 22px; }
.hero-pill-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px rgba(232,200,122,0.6); margin-right:8px; display:inline-block; }
.hero-split .hero-display { font-size: clamp(40px, 4.6vw, 66px); line-height:1.04; margin:0 0 22px; text-align:left; }
.hero-display em { font-style: italic; font-family: var(--serif); font-weight:500; color: var(--gold); }
.hero-split .hero-sub { font-size:17px; line-height:1.6; max-width:560px; margin:0 0 32px; text-align:left; }
.hero-cta-row { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.hero-icp { font:400 13px/1.55 var(--body-font); color:var(--text-muted); margin:24px 0 0; max-width:540px; }
.hero-icp span { color: var(--text-dim); }
.hero-mock { position:relative; min-width:0; }
.hero-mock::after { content:""; position:absolute; inset:-14% -6% -20% -6%; z-index:0; background:radial-gradient(ellipse at 68% 28%, rgba(232,200,122,0.16), transparent 62%); filter:blur(18px); pointer-events:none; }
.hero-mock-frame { position:relative; z-index:1; background:var(--bg-card); border:1px solid var(--line-strong); border-radius:14px; overflow:hidden; box-shadow:0 40px 90px -34px rgba(0,0,0,0.85), 0 0 60px -22px rgba(232,200,122,0.18); }
.hero-mock-bar { display:flex; align-items:center; gap:7px; padding:10px 13px; background:var(--bg-elevated); border-bottom:1px solid var(--line); }
.hero-mock-bar i { width:9px; height:9px; border-radius:50%; background:rgba(245,241,236,0.16); }
.hero-mock-url { margin-left:8px; font:500 11px/1 var(--body-font); color:var(--text-muted); letter-spacing:0.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero-mock-body { display:grid; grid-template-columns:1.12fr 1fr; align-items:stretch; }
.hero-mock-map { position:relative; overflow:hidden; min-height:208px; }
.hero-mock-svg { display:block; width:100%; height:100%; }
.hero-mock-chip { position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:6px; font:600 10px/1 var(--sans); letter-spacing:0.3px; color:var(--text); background:rgba(7,7,10,0.72); border:1px solid var(--line-strong); padding:5px 9px; border-radius:100px; backdrop-filter:blur(6px); }
.hero-mock-chip i { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px rgba(102,204,170,0.7); }
.hero-mock-panel { padding:14px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:12px; background:rgba(19,19,24,0.45); }
.hmp-zone { display:flex; flex-direction:column; gap:3px; }
.hmp-zone b { font:700 13px/1.2 var(--sans); color:var(--text); }
.hmp-zone span { font:500 10.5px/1.35 var(--body-font); color:var(--text-muted); }
.hmp-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hmp-stats div { background:var(--bg-base); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.hmp-stats b { display:block; font:700 17px/1 var(--sans); color:var(--gold); }
.hmp-stats span { font:500 9px/1 var(--body-font); color:var(--text-muted); letter-spacing:0.5px; text-transform:uppercase; }
.hmp-cta { margin-top:2px; display:flex; align-items:center; justify-content:center; gap:6px; font:700 12px/1 var(--sans); color:#0C0C0E; background:var(--gold); border:0; border-radius:8px; padding:11px; cursor:default; }
.hmp-export { text-align:center; font:500 10.5px/1 var(--body-font); color:var(--text-dim); }
.hero-split > * { opacity:0; animation: fis-fade-up 760ms cubic-bezier(0.22,1,0.36,1) forwards; }
.hero-split > *:nth-child(1){ animation-delay:90ms; }
.hero-split > *:nth-child(2){ animation-delay:260ms; }
@media (max-width:1024px){ .hero { padding:108px 24px 60px; } }
@media (max-width:980px){
  .hero-split { grid-template-columns:1fr; gap:40px; text-align:center; }
  .hero-split .hero-display, .hero-split .hero-sub { text-align:center; }
  .hero-split .hero-sub, .hero-icp { margin-left:auto; margin-right:auto; }
  .hero-cta-row { justify-content:center; }
  .hero-mock { max-width:540px; margin:0 auto; width:100%; }
}
@media (max-width:600px){ .hero { padding:96px 20px 44px; } .hmp-stats b { font-size:15px; } .hero-cta-row { gap:14px; } }

/* ───────── HOW IT WORKS — interactive (Phase 2, 2026-05-31) ───────── */
.howworks { padding: 60px 0 8px; }
.howworks-lede { max-width: 640px; }
.howworks-grid { display:grid; grid-template-columns: 0.82fr 1.18fr; gap:48px; align-items:center; margin-top:34px; }
.howworks-steps { display:flex; flex-direction:column; gap:16px; }
.wstep { display:flex; gap:14px; align-items:flex-start; padding:16px; background:var(--bg-card); border:1px solid var(--line); border-radius:12px; transition:border-color 200ms, transform 200ms; }
.wstep:hover { border-color:var(--line-strong); transform:translateY(-2px); }
.wstep-num { font:700 13px/1 var(--sans); color:#0C0C0E; background:var(--gold); width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wstep-title { font:700 15px/1.2 var(--sans); color:var(--text); margin-bottom:4px; }
.wstep-body { font:400 13px/1.55 var(--body-font); color:var(--text-dim); }
.howworks-demo { min-width:0; }
.demo-search-wrap { position:relative; margin-bottom:12px; }
.demo-search-ico { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:15px; }
.demo-search { width:100%; box-sizing:border-box; background:var(--bg-card); border:1px solid var(--line-strong); border-radius:100px; color:var(--text); font:500 14px/1 var(--body-font); padding:13px 16px 13px 40px; cursor:default; }
.demo-search:focus { outline:none; border-color:rgba(232,200,122,0.5); }
.demo-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.demo-chip { font:600 12px/1 var(--sans); color:var(--text-dim); background:rgba(245,241,236,0.04); border:1px solid var(--line); border-radius:100px; padding:8px 13px; cursor:pointer; transition:all 140ms; }
.demo-chip:hover { color:var(--text); border-color:var(--line-strong); }
.demo-chip.is-active { color:#0C0C0E; background:var(--gold); border-color:var(--gold); }
.demo-mock { background:var(--bg-card); border:1px solid var(--line-strong); border-radius:14px; overflow:hidden; box-shadow:0 30px 70px -34px rgba(0,0,0,0.8), 0 0 50px -24px rgba(232,200,122,0.16); }
.demo-mock-bar { display:flex; align-items:center; gap:7px; padding:10px 13px; background:var(--bg-elevated); border-bottom:1px solid var(--line); }
.demo-mock-bar i { width:9px; height:9px; border-radius:50%; background:rgba(245,241,236,0.16); }
.demo-mock-url { margin-left:8px; font:500 11px/1 var(--body-font); color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.demo-sample { font:700 8.5px/1 var(--sans); letter-spacing:0.8px; text-transform:uppercase; color:var(--gold); border:1px solid rgba(232,200,122,0.4); border-radius:100px; padding:3px 7px; flex-shrink:0; }
.demo-mock-body { display:grid; grid-template-columns:1.2fr 1fr; align-items:stretch; }
.demo-mock-map { position:relative; overflow:hidden; min-height:210px; }
.demo-mock-svg { display:block; width:100%; height:100%; }
.demo-mock-chip2 { position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:6px; font:600 10px/1 var(--sans); color:var(--text); background:rgba(7,7,10,0.72); border:1px solid var(--line-strong); padding:5px 9px; border-radius:100px; }
.demo-mock-chip2 i { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px rgba(102,204,170,0.7); }
.demo-mock-panel { padding:14px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:11px; background:rgba(19,19,24,0.45); }
.dmp-zone b { display:block; font:700 13px/1.2 var(--sans); color:var(--text); }
.dmp-zone span { font:500 10.5px/1.35 var(--body-font); color:var(--text-muted); }
.dmp-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dmp-stats div { background:var(--bg-base); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.dmp-stats b { display:block; font:700 17px/1 var(--sans); color:var(--gold); }
.dmp-stats span { font:500 9px/1 var(--body-font); color:var(--text-muted); letter-spacing:0.5px; text-transform:uppercase; }
.dmp-pf { display:flex; align-items:center; justify-content:space-between; background:var(--bg-base); border:1px solid var(--line); border-radius:8px; padding:9px 11px; }
.dmp-pf span { font:500 10.5px/1 var(--body-font); color:var(--text-dim); }
.dmp-pf b { font:700 15px/1 var(--sans); color:var(--green); }
.dmp-export { display:flex; align-items:center; justify-content:center; gap:6px; font:700 12px/1 var(--sans); color:#0C0C0E; background:var(--gold); border:0; border-radius:8px; padding:11px; cursor:default; }
.demo-disclaimer { font:400 11px/1.4 var(--body-font); color:var(--text-muted); margin-top:10px; text-align:center; }

/* How-It-Works — staged reveal on chip change + responsive */
.demo-mock.is-live .demo-parcel { animation: dmDraw 600ms ease both; }
.demo-mock.is-live .demo-massing { animation: dmRise 600ms 180ms both; }
.demo-mock.is-live .dmp-stats div { animation: fis-fade-up 500ms both; }
.demo-mock.is-live .dmp-stats div:nth-child(1){ animation-delay:120ms; }
.demo-mock.is-live .dmp-stats div:nth-child(2){ animation-delay:200ms; }
.demo-mock.is-live .dmp-stats div:nth-child(3){ animation-delay:280ms; }
.demo-mock.is-live .dmp-stats div:nth-child(4){ animation-delay:360ms; }
.demo-mock.is-live .dmp-pf { animation: fis-fade-up 500ms 440ms both; }
.demo-mock.is-live .dmp-export { animation: fis-fade-up 500ms 540ms both; }
@keyframes dmRise { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
@keyframes dmDraw { from{opacity:0;} to{opacity:1;} }
@media (prefers-reduced-motion: reduce){
  .demo-mock.is-live .demo-parcel, .demo-mock.is-live .demo-massing,
  .demo-mock.is-live .dmp-stats div, .demo-mock.is-live .dmp-pf,
  .demo-mock.is-live .dmp-export { animation: none; }
}
@media (max-width: 980px){
  .howworks-grid { grid-template-columns:1fr; gap:32px; }
}
@media (max-width: 600px){
  .demo-mock-body { grid-template-columns:1fr; }
  .demo-mock-panel { border-left:0; border-top:1px solid var(--line); }
  .demo-mock-map { min-height:170px; }
  .dmp-stats b { font-size:15px; }
}

/* ───────── SEE THE OUTPUT — proof / case study (Phase 3, 2026-05-31) ───────── */
.output-proof { padding: 64px 0; }
.case-card { background:var(--bg-card); border:1px solid var(--line-strong); border-radius:16px; padding:28px; margin-top:32px; box-shadow:0 30px 70px -38px rgba(0,0,0,0.8), 0 0 60px -30px rgba(232,200,122,0.14); }
.case-head { display:flex; justify-content:space-between; align-items:flex-start; gap:22px; flex-wrap:wrap; margin-bottom:22px; }
.case-head-text { min-width:0; }
.case-tag { display:inline-block; font:700 9.5px/1 var(--sans); letter-spacing:1px; text-transform:uppercase; color:var(--gold); background:rgba(232,200,122,0.08); border:1px solid rgba(232,200,122,0.4); border-radius:100px; padding:5px 10px; margin-bottom:12px; }
.case-title { font:700 clamp(19px,2.2vw,24px)/1.25 var(--sans); color:var(--text); margin:0 0 8px; letter-spacing:-0.01em; }
.case-meta { font:400 13px/1.5 var(--body-font); color:var(--text-dim); margin:0; max-width:640px; }
.case-cta { flex-shrink:0; }
.case-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.kpi { background:var(--bg-base); border:1px solid var(--line); border-radius:10px; padding:14px; }
.kpi b { display:block; font:700 clamp(20px,2.2vw,26px)/1 var(--sans); color:var(--gold); letter-spacing:-0.01em; }
.kpi span { display:block; margin-top:6px; font:500 10px/1.2 var(--body-font); color:var(--text-muted); letter-spacing:0.4px; text-transform:uppercase; }
.kpi-fin b { color:var(--green); }
.case-note { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font:400 12px/1.5 var(--body-font); color:var(--text-muted); }
.rep-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:44px 0 18px; }
.rep-h3 { font:700 18px/1.2 var(--sans); color:var(--text); margin:0; }
.rep-head-note { font:500 12px/1 var(--body-font); color:var(--text-muted); }
.rep-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.rep-card { cursor:default; }
.rep-thumb { position:relative; aspect-ratio:auto; background:var(--bg-elevated); border:1px solid var(--line); border-radius:10px; padding:16px 14px; overflow:hidden; transition:transform 200ms, border-color 200ms, box-shadow 200ms; }
.rep-card:hover .rep-thumb { transform:translateY(-4px); border-color:rgba(232,200,122,0.45); box-shadow:0 18px 36px -20px rgba(0,0,0,0.7); }
.rep-band { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--gold),rgba(232,200,122,0.4)); }
.rep-ico { position:absolute; top:12px; right:12px; font-size:15px; opacity:0.85; }
.rep-lines { display:flex; flex-direction:column; gap:7px; margin-top:18px; }
.rep-lines i { height:5px; border-radius:3px; background:rgba(245,241,236,0.12); display:block; }
.rep-lines i.w70 { width:70%; } .rep-lines i.w50 { width:50%; }
.rep-pageno { position:absolute; bottom:10px; right:12px; font:700 10px/1 var(--sans); color:var(--text-muted); letter-spacing:0.5px; }
.rep-name { margin-top:10px; font:600 12.5px/1.3 var(--sans); color:var(--text-dim); }
.rep-card:hover .rep-name { color:var(--text); }

/* See the output - whats inside + trust line + responsive */
.inside-wrap { margin-top:44px; padding-top:36px; border-top:1px solid var(--line); }
.inside-h3 { font:700 18px/1.2 var(--sans); color:var(--text); margin:0 0 18px; }
.inside-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; }
.inside-item { display:flex; align-items:center; gap:10px; background:var(--bg-card); border:1px solid var(--line); border-radius:10px; padding:13px 15px; font:500 13.5px/1.35 var(--body-font); color:var(--text); }
.inside-check { flex-shrink:0; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--green); background:rgba(102,204,170,0.12); border:1px solid rgba(102,204,170,0.4); }
.trust-line { display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; margin:28px auto 0; max-width:760px; padding:16px 20px; background:rgba(232,200,122,0.05); border:1px solid rgba(232,200,122,0.22); border-radius:12px; font:500 14px/1.5 var(--body-font); color:var(--text); }
.trust-ico { font-size:15px; flex-shrink:0; }
.output-cta-row { display:flex; justify-content:center; margin-top:26px; }
@media (max-width: 860px){
  .case-kpis { grid-template-columns:repeat(2,1fr); }
  .rep-grid { grid-template-columns:repeat(2,1fr); }
  .case-cta { width:100%; justify-content:center; }
}
@media (max-width: 480px){
  .case-card { padding:20px; }
  .rep-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
}

/* ───────── PHASE 4 — audit / built-for / pricing earlybird ───────── */
.audit { padding: 56px 0; }
.audit-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:30px; }
.audit-row { display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--bg-card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.audit-name { font:500 14px/1.4 var(--body-font); color:var(--text); }
.audit-src { flex-shrink:0; font:600 10px/1 var(--sans); letter-spacing:0.4px; text-transform:uppercase; color:var(--gold); background:rgba(232,200,122,0.08); border:1px solid rgba(232,200,122,0.3); border-radius:100px; padding:5px 10px; white-space:nowrap; }
.audit-src-edit { color:var(--green); background:rgba(102,204,170,0.1); border-color:rgba(102,204,170,0.35); }
.builtfor { padding: 56px 0; }
.bf-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:30px; }
.bf-col { background:var(--bg-card); border:1px solid var(--line); border-radius:14px; padding:22px 24px; }
.bf-col-yes { border-color:rgba(102,204,170,0.28); }
.bf-tag { display:inline-block; font:700 10px/1 var(--sans); letter-spacing:1px; text-transform:uppercase; border-radius:100px; padding:6px 12px; margin-bottom:16px; }
.bf-tag-yes { color:var(--green); background:rgba(102,204,170,0.1); border:1px solid rgba(102,204,170,0.4); }
.bf-tag-no { color:var(--text-dim); background:rgba(245,241,236,0.05); border:1px solid var(--line-strong); }
.bf-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.bf-item { display:flex; align-items:flex-start; gap:11px; font:500 14.5px/1.45 var(--body-font); color:var(--text); }
.bf-col-no .bf-item { color:var(--text-dim); }
.bf-ico { flex-shrink:0; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; margin-top:1px; }
.bf-ico-yes { color:var(--green); background:rgba(102,204,170,0.12); border:1px solid rgba(102,204,170,0.4); }
.bf-ico-no { color:var(--text-muted); background:rgba(245,241,236,0.05); border:1px solid var(--line-strong); }
.pricing-earlybird { width:fit-content; margin:14px auto 42px; display:flex; align-items:center; gap:7px; font:600 12.5px/1 var(--sans); letter-spacing:0.2px; color:var(--gold); background:rgba(232,200,122,0.08); border:1px solid rgba(232,200,122,0.32); border-radius:100px; padding:9px 16px; }
@media (max-width: 760px){ .audit-grid { grid-template-columns:1fr; } .bf-grid { grid-template-columns:1fr; } }

/* ───────── PHASE 5 — anchors, nav mobile menu ───────── */
html { scroll-behavior: smooth; }
section[id], footer { scroll-margin-top: 100px; }
.nav-burger { display:none; pointer-events:auto; background:transparent; border:0; flex-direction:column; gap:4px; padding:8px; cursor:pointer; margin-left:2px; }
.nav-burger span { display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:transform 200ms, opacity 200ms; }
.nav-burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2){ opacity:0; }
.nav-burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.nav-mobile { display:none; }
@media (max-width:720px){
  .nav-burger { display:flex; }
  .nav-mobile { display:block; pointer-events:auto; position:fixed; top:82px; left:16px; right:16px; z-index:49; background:rgba(15,15,18,0.97); border:1px solid var(--line-strong); border-radius:16px; padding:10px; backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); box-shadow:0 30px 60px -20px rgba(0,0,0,0.7); }
  .nav-mobile[hidden]{ display:none; }
  .nav-mobile a { display:block; padding:12px 14px; border-radius:10px; color:var(--text-dim); font:600 14px/1 var(--sans); }
  .nav-mobile a:hover { background:rgba(245,241,236,0.06); color:var(--text); }
  .nav-mobile-demo { color:var(--gold) !important; }
  .nav-mobile-cta { margin-top:6px; text-align:center; color:#0C0C0E !important; background:var(--gold); }
}

/* ───────── PHASE 5 — responsive polish ───────── */
.final-cta-demo { display:inline-flex; align-items:center; color:var(--gold); font:600 14px/1 var(--sans); padding:10px 6px; }
.final-cta-demo:hover { text-decoration:underline; }
@media (max-width:760px){
  .pricing-grid { grid-template-columns:1fr; }
}
@media (max-width:600px){
  .rep-grid { display:flex; overflow-x:auto; gap:12px; padding-bottom:6px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .rep-card { flex:0 0 62%; scroll-snap-align:start; }
  .audit-grid { grid-template-columns:1fr; }
}
@media (max-width:430px){
  .hero-split .hero-display { font-size:clamp(28px,8.5vw,38px); }
  .section-h2 { font-size:clamp(23px,7vw,30px); }
  .hero-display, .section-h2, .final-cta-h2, .case-title { overflow-wrap:break-word; }
  .case-kpis { grid-template-columns:1fr 1fr; }
}

/* ───────── Filled report thumbnails (2026-05-31) ───────── */
.rep-thumb { aspect-ratio: auto; min-height: 152px; padding:13px 12px 20px; display:flex; flex-direction:column; background:#0c0c10; }
.rt-head { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.rt-title { font:700 8.5px/1.15 var(--sans); letter-spacing:0.5px; text-transform:uppercase; color:var(--text); }
.rt-ico { font-size:11px; opacity:0.85; flex-shrink:0; }
.rt-rule { height:1px; background:var(--line-strong); margin:7px 0 9px; }
.rt-txt { font:500 6.5px/1.5 var(--body-font); color:var(--text-muted); margin:0 0 7px; }
.rt-rows { display:flex; flex-direction:column; gap:7px; }
.rt-rows-tight { gap:6px; }
.rt-row { display:flex; align-items:center; gap:6px; }
.rt-k { height:5px; border-radius:3px; background:rgba(245,241,236,0.16); flex:1; }
.rt-v { height:5px; width:24%; flex-shrink:0; border-radius:3px; background:rgba(245,241,236,0.10); }
.rt-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; background:var(--gold); }
.rt-dot.ok { background:var(--green); }
.rt-dot.mod { background:var(--gold); }
.rt-kpi { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.rt-kpi > div { background:#000; border:1px solid var(--line); border-radius:5px; padding:6px 6px 7px; }
.rt-kpi b { display:block; font:700 5.5px/1 var(--sans); letter-spacing:0.4px; text-transform:uppercase; color:var(--text-muted); margin-bottom:5px; }
.rt-kpi i { display:block; height:6px; width:72%; border-radius:3px; background:var(--gold); opacity:0.85; }
.rt-kpi .fin i { background:var(--green); }
.rt-chip { font:700 5px/1 var(--sans); letter-spacing:0.4px; text-transform:uppercase; padding:3px 5px; border-radius:20px; flex-shrink:0; }
.rt-chip.crit { color:#e98a7a; background:rgba(233,138,122,0.12); border:1px solid rgba(233,138,122,0.4); }
.rt-chip.mod { color:var(--gold); background:rgba(232,200,122,0.1); border:1px solid rgba(232,200,122,0.4); }
.rt-chip.ok { color:var(--green); background:rgba(102,204,170,0.1); border:1px solid rgba(102,204,170,0.4); }
.rt-mass { flex:1; display:flex; align-items:center; justify-content:center; }
.rt-svg { width:54px; height:54px; }
.rt-pie { width:44px; height:44px; border-radius:50%; margin:1px auto 8px; background:conic-gradient(var(--gold) 0 59%, #8a8f5a 59% 84%, #C8A26A 84% 92%, #3a3a3e 92% 100%); }
.rt-badge { display:inline-block; align-self:flex-start; font:700 6px/1 var(--sans); letter-spacing:0.5px; text-transform:uppercase; color:#0c0c0e; background:var(--green); border-radius:20px; padding:4px 8px; margin-bottom:9px; }
.rt-nums { display:flex; flex-direction:column; gap:7px; margin-bottom:8px; }
.rt-num { display:flex; align-items:center; gap:6px; }
.rt-num b { font:700 7px/1 var(--sans); color:var(--gold); flex-shrink:0; }

/* Gallery + spacing tighten (2026-05-31) — cap oversized 3D render, trim dead space */
.shot-media-3d img { max-height: 430px; object-fit: cover; }
.gallery { padding: 64px 0 28px; }
.gallery-grid { margin-top: 38px; }
.shot-card-wide { padding: 36px; gap: 40px; }
@media (max-width: 600px){ .shot-media-3d img { max-height: 300px; } }

/* Demo panel: real 3D render layer (2026-05-31) */
.demo-render { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.demo-mock-map .demo-mock-svg { position:relative; z-index:0; }
.demo-mock-chip2 { z-index:3; }
.demo-maptag { position:absolute; top:10px; left:10px; z-index:3; font:700 8.5px/1 var(--sans); letter-spacing:0.5px; text-transform:uppercase; color:var(--gold); background:rgba(7,7,10,0.72); border:1px solid rgba(232,200,122,0.4); border-radius:100px; padding:4px 8px; backdrop-filter:blur(6px); }

/* Hero mock: real 3D render (2026-05-31) */
.hero-render { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.hero-mock-map .hero-mock-svg { position:relative; z-index:0; }
.hero-mock-chip { z-index:3; }
.hero-maptag { position:absolute; top:10px; left:10px; z-index:3; font:700 8.5px/1 var(--sans); letter-spacing:0.5px; text-transform:uppercase; color:var(--gold); background:rgba(7,7,10,0.72); border:1px solid rgba(232,200,122,0.4); border-radius:100px; padding:4px 8px; backdrop-filter:blur(6px); }

/* Touch target sizing (2026-05-31) — 44px min for primary CTAs */
.plan-cta { min-height: 44px; }
.demo-chip { display:inline-flex; align-items:center; min-height: 34px;
@media (max-width: 680px){ .nav-logo{ height: 40px; } .nav-brand{ font-size: 22px; } }