/* Palette mirrors the mobile app's dark theme so the brand reads
       consistently across surfaces: dark slate-blue background, light
       text, blue primary. Mobile values (apps/mobile-rn/src/ui/theme.ts):
         bg #0F1115 · surface #161A20 · text #F2F5FA · muted #98A2B3
         border #2C3440 · primary #4C8DFF · primaryStrong #D8E7FF
       We keep the historical token NAMES so the rest of the stylesheet
       doesn't need to change; only the values are swapped. */
    :root {
      --bg: #0F1115;
      --surface: #161A20;
      --surface-muted: #1B2028;
      --surface-soft: #1E242D;
      --surface-tint: #20262F;
      --ink: #F2F5FA;
      --muted: #98A2B3;
      --muted-light: #7F8A9A;
      --line: #2C3440;
      --line-soft: #252C36;
      --brand: #4C8DFF;
      --brand-dark: #3573E0;
      --brand-deep: #D8E7FF;
      --brand-pale: rgba(76,141,255,0.16);
      --night: #0A0C10;
      --night-mid: #131720;
      --radius-sm: 12px;
      --radius-md: 18px;
      --radius-lg: 24px;
      --radius-xl: 28px;
      --max-width: 1180px;
      --shadow-sm: 0 8px 24px rgba(0,0,0,0.28);
      --shadow-md: 0 18px 48px rgba(0,0,0,0.42);
      --shadow-phone: 0 32px 80px rgba(0,0,0,0.55);
    }

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

    body {
      font-family: 'Outfit', system-ui, sans-serif;
      color: var(--ink);
      background: var(--bg);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      color-scheme: dark;
      position: relative;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background:
        radial-gradient(1200px 700px at 20% -10%, rgba(76,141,255,0.14), transparent 58%),
        radial-gradient(900px 600px at 88% 8%, rgba(216,231,255,0.10), transparent 56%);
      pointer-events: none;
      z-index: -1;
    }

    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
    section, footer { padding: 96px 24px; }

    .container { width: min(var(--max-width), 100%); margin: 0 auto; }

    /* Accessibility utility — visually hide content but keep it in the
       accessibility tree so screen readers still announce landmark
       headings (e.g. the <h2>Footer</h2> we use to label <footer>).
       Without this rule the heading rendered as a literal "Footer"
       word on /landlords. Standard WHATWG sr-only recipe. */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* ── Typography ── */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      font-size: 0.73rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--brand);
    }

    .eyebrow::before {
      content: "";
      display: block;
      width: 22px; height: 2px;
      background: var(--brand);
      border-radius: 999px;
      flex-shrink: 0;
    }

    .section-title {
      font-size: clamp(2rem, 4vw, 3rem);
      line-height: 1.08;
      letter-spacing: -0.035em;
      font-weight: 800;
      margin-bottom: 16px;
    }

    .section-copy {
      max-width: 640px;
      font-size: 1.05rem;
      line-height: 1.72;
      color: var(--muted);
      font-weight: 400;
    }

    /* ── Nav ── */
    .site-nav {
      position: sticky;
      top: 0; z-index: 40;
      background: rgba(10,12,17,0.78);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: 0 24px;
    }

    .site-nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      min-height: 68px;
    }

    .nav-logo { display: flex; align-items: center; }
    .nav-logo svg { height: 20px; width: auto; }
    .nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

    .nav-links { display: flex; align-items: center; gap: 2px; }
    .nav-links a {
      padding: 7px 13px;
      border-radius: 10px;
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--muted);
      transition: color 0.15s, background 0.15s;
    }
    .nav-links a:hover { color: var(--ink); background: var(--surface-soft); }

    .nav-actions { display: flex; align-items: center; gap: 10px; }

    .nav-menu-button {
      display: none;
      width: 40px; height: 40px;
      border: 1px solid var(--line);
      border-radius: 11px;
      align-items: center; justify-content: center;
      cursor: pointer; background: none;
    }
    .nav-menu-button span,
    .nav-menu-button span::before,
    .nav-menu-button span::after {
      display: block; width: 15px; height: 1.5px;
      border-radius: 999px; background: var(--ink);
      content: ""; position: relative;
    }
    .nav-menu-button span::before { position: absolute; top: -5px; }
    .nav-menu-button span::after { position: absolute; top: 5px; }

    /* ── Buttons ── */
    .button {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 8px; padding: 0 22px; min-height: 46px;
      border-radius: 999px; border: 1.5px solid transparent;
      font-family: inherit; font-size: 0.92rem; font-weight: 700;
      cursor: pointer; letter-spacing: 0.01em;
      transition: transform 0.18s, background 0.18s, box-shadow 0.18s, border-color 0.18s;
    }
    .button:hover { transform: translateY(-1px); }
    .button:active { transform: translateY(0); }

    .button-primary {
      /* Dark ink on the brand blue meets WCAG AA. White-on-#4C8DFF
         is ~3.5:1 (fails normal-text AA). Mobile's `primaryContrast`
         is #0F1115, matching that. */
      background: var(--brand); color: #0F1115;
      box-shadow: 0 4px 18px rgba(53,115,224,0.32);
    }
    .button-primary:hover { background: var(--brand-dark); color: #0F1115; box-shadow: 0 6px 26px rgba(53,115,224,0.42); }

    .button-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
    .button-ghost:hover { background: var(--surface-soft); border-color: #3a4659; }

    /* ── Store badges ── */
    .store-badge {
      display: inline-flex; align-items: center; gap: 11px;
      padding: 10px 20px; background: #0f141d; color: #f4f7fb;
      border-radius: 14px; border: 1.5px solid rgba(255,255,255,0.12);
      transition: transform 0.18s, background 0.18s;
    }
    .store-badge:hover { transform: translateY(-2px); background: #1a2535; }
    .store-badge-icon { width: 26px; height: 26px; flex-shrink: 0; }
    .store-badge-text { display: flex; flex-direction: column; line-height: 1.15; }
    .store-badge-sub { font-size: 0.65rem; font-weight: 500; color: rgba(255,255,255,0.7); letter-spacing: 0.04em; text-transform: uppercase; }
    .store-badge-name { font-size: 1.05rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }



    /* ── Hero ── */
    .hero {
      padding-top: 72px; padding-bottom: 96px;
      overflow: hidden; position: relative;
    }
    .hero::after {
      content: ""; position: absolute;
      top: -180px; right: -280px;
      width: 780px; height: 780px;
      background: radial-gradient(circle, rgba(53,115,224,0.07) 0%, transparent 62%);
      pointer-events: none;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(260px, 380px);
      gap: 64px; align-items: center;
    }
    .hero-copy h1 {
      font-size: clamp(2.9rem, 5.5vw, 4.9rem);
      line-height: 0.96; letter-spacing: -0.05em;
      font-weight: 900; margin-bottom: 22px;
    }
    .hero-copy h1 em { font-style: normal; color: var(--brand); }
    .hero-copy > p { max-width: 520px; font-size: 1.1rem; line-height: 1.7; color: var(--muted); font-weight: 400; }
    .hero-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
    .hero-note { margin-top: 18px; font-size: 0.85rem; color: var(--muted-light); font-weight: 400; }

    /* ── iPhone 17 Pro frame (real PNG overlay) ── */
    .iphone-wrap {
      position: relative;
      width: min(100%, 300px);
      margin-inline: auto;
    }

    /* The container that holds carousel + PNG overlay */
    .iphone-shell {
      position: relative;
      width: 100%;
      /* Aspect ratio matches the PNG: 450 x 920 */
      aspect-ratio: 450 / 920;
    }

    /* Carousel lives behind, clipped to the screen area */
    .iphone-screen {
      position: absolute;
      top: 1.6%;
      left: 4.4%;
      width: 91.1%;
      height: 96.7%;
      overflow: hidden;
      border-radius: 44px; /* matches the phone's rounded screen corners */
      background: linear-gradient(160deg, #111723 0%, #0f1f1a 40%, #18202b 100%);
      z-index: 1;
    }

    /* The phone PNG sits on top, pointer-events: none so carousel is still interactive */
    .iphone-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: fill;
      z-index: 2;
      pointer-events: none;
      user-select: none;
    }

    /* Ambient shadow underneath */
    .iphone-shadow {
      position: absolute;
      bottom: -5%;
      left: 8%; right: 8%;
      height: 6%;
      background: radial-gradient(ellipse, rgba(12,24,36,0.4) 0%, transparent 70%);
      filter: blur(10px);
      z-index: 0;
      pointer-events: none;
    }

    .carousel-track {
      display: flex;
      width: 100%;
      height: 100%;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .carousel-slide {
      flex: 0 0 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .carousel-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Placeholder shown before screenshots added */
    .carousel-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      text-align: center;
      padding: 24px;
      gap: 10px;
    }

    .carousel-placeholder svg { opacity: 0.25; }
    .carousel-placeholder span { font-size: 0.75rem; font-weight: 600; color: var(--muted-light); line-height: 1.5; }

    /* Dots */
    .carousel-dots {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-top: 16px;
    }

    .carousel-dot {
      width: 6px; height: 6px;
      border-radius: 999px;
      background: var(--line);
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background 0.2s, width 0.2s;
    }

    .carousel-dot.active {
      background: var(--brand);
      width: 18px;
    }

    /* ── Features ── */
    .features-section { background: var(--surface-muted); }
    .features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 48px; }
    .feature-card {
      padding: 30px 32px; border: 1px solid var(--line);
      border-radius: var(--radius-xl); background: var(--surface);
      transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
    }
    .feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: rgba(53,115,224,0.22); }
    .feature-icon {
      width: 46px; height: 46px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 13px; background: var(--brand-pale); color: var(--brand);
    }
    .feature-card h3 { margin: 16px 0 8px; font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; }
    .feature-card p { font-size: 0.95rem; line-height: 1.65; color: var(--muted); }

    /* ── How it works, visual journey ── */
    .how-it-works {
      background: var(--night); color: #fff;
      position: relative; overflow: hidden;
    }
    .how-it-works::before {
      content: ""; position: absolute; bottom: -100px; left: -150px;
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(53,115,224,0.1) 0%, transparent 65%);
      pointer-events: none;
    }
    .how-it-works::after {
      content: ""; position: absolute; top: -80px; right: -80px;
      width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(53,115,224,0.07) 0%, transparent 65%);
      pointer-events: none;
    }
    .how-it-works .section-title { color: #fff; }

    .journey-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 2px; margin-top: 52px; position: relative;
    }
    .journey-grid::before {
      content: ""; position: absolute; top: 56px;
      left: calc(12.5% + 16px); right: calc(12.5% + 16px); height: 1px;
      background: linear-gradient(90deg, transparent, rgba(53,115,224,0.4), rgba(53,115,224,0.4), transparent);
      pointer-events: none;
    }
    .journey-step {
      display: flex; flex-direction: column; align-items: center;
      text-align: center; padding: 0 12px 32px; position: relative;
    }
    .journey-icon-wrap {
      width: 112px; height: 112px; border-radius: 28px;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 24px; position: relative; z-index: 1;
      transition: background 0.2s, border-color 0.2s;
    }
    .journey-step:hover .journey-icon-wrap { background: rgba(53,115,224,0.15); border-color: rgba(53,115,224,0.4); }
    .journey-step-num {
      position: absolute; top: -8px; right: -8px;
      width: 26px; height: 26px; border-radius: 8px;
      background: var(--brand); color: #0F1115;
      font-size: 0.75rem; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
    }
    .journey-step h3 { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 8px; letter-spacing: -0.01em; }
    .journey-step p { font-size: 0.88rem; color: rgba(255,255,255,0.55); line-height: 1.6; max-width: 180px; margin: 0 auto; }
    .journey-tag {
      display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
      padding: 4px 10px; border-radius: 999px;
      background: rgba(53,115,224,0.15); color: #5edbae;
      font-size: 0.75rem; font-weight: 600;
    }

    /* AI scan animation */
    .ai-receipt {
      width: 72px; height: 88px; background: #fff;
      border-radius: 8px; padding: 8px 6px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.3); position: relative;
    }
    .ai-receipt-line { height: 5px; border-radius: 3px; background: #e2e8f0; margin-bottom: 5px; }
    .ai-receipt-line.short { width: 60%; }
    .ai-receipt-line.medium { width: 80%; }
    .ai-receipt-line.long { width: 95%; }
    .ai-scan-beam {
      position: absolute; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, #1d9e75, transparent);
      animation: scan 2.2s ease-in-out infinite;
      box-shadow: 0 0 8px rgba(53,115,224,0.6);
    }
    @keyframes scan {
      0% { top: 8px; opacity: 0; }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { top: calc(100% - 8px); opacity: 0; }
    }
    .ai-extracted-badge {
      position: absolute; top: -12px; right: -18px;
      background: var(--brand); color: #0F1115;
      font-size: 0.62rem; font-weight: 700;
      padding: 3px 7px; border-radius: 999px;
      white-space: nowrap;
      animation: popIn 0.3s ease 1.8s both;
    }
    @keyframes popIn {
      from { opacity: 0; transform: scale(0.7); }
      to { opacity: 1; transform: scale(1); }
    }

    /* ── Pricing ── */
    .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; }
    .pricing-card {
      position: relative; padding: 36px;
      border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface);
    }
    .pricing-card.pro {
      background: var(--surface-tint);
      border-color: rgba(53,115,224,0.3);
      box-shadow: 0 0 0 1px rgba(53,115,224,0.12), var(--shadow-md);
    }
    .pricing-tag {
      display: inline-flex; align-items: center; padding: 5px 12px;
      border-radius: 999px; background: var(--brand-pale); color: var(--brand-deep);
      font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    }
    .pricing-card.pro .pricing-tag { background: var(--brand); color: #0F1115; }
    .popular-badge {
      position: absolute; top: 28px; right: 28px;
      display: inline-flex; padding: 5px 12px; border-radius: 999px;
      background: var(--brand); color: #0F1115; font-size: 0.78rem; font-weight: 700;
    }
    .pricing-card h3 { margin: 14px 0 6px; font-size: 1.35rem; letter-spacing: -0.03em; font-weight: 800; }
    .price { margin: 10px 0 4px; font-size: 2.8rem; line-height: 1; letter-spacing: -0.05em; font-weight: 900; }
    .price small { font-size: 0.95rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
    .feature-list { display: grid; gap: 10px; margin: 22px 0 28px; }
    .feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.93rem; color: var(--ink); line-height: 1.5; }
    .checkmark { width: 17px; height: 17px; margin-top: 2px; color: var(--brand); flex: 0 0 auto; }

    /* ── FAQ ── */
    .faq-section { background: var(--surface-muted); }
    .faq-list { margin-top: 44px; border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface); }
    .faq-toggle { position: absolute; opacity: 0; pointer-events: none; }
    .faq-item { border-bottom: 1px solid var(--line); }
    .faq-item:last-child { border-bottom: none; }
    .faq-label {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; padding: 20px 26px; cursor: pointer;
      font-weight: 600; font-size: 0.97rem;
      transition: background 0.15s; user-select: none;
    }
    .faq-label:hover { background: var(--surface-soft); }
    .faq-icon {
      width: 22px; height: 22px; flex: 0 0 auto;
      border: 1.5px solid var(--line); border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s, border-color 0.2s; position: relative;
    }
    .faq-icon::before, .faq-icon::after {
      content: ""; position: absolute; background: var(--muted);
      border-radius: 999px; transition: transform 0.3s, opacity 0.3s;
    }
    .faq-icon::before { width: 10px; height: 1.5px; }
    .faq-icon::after { width: 1.5px; height: 10px; }
    .faq-toggle:checked ~ .faq-label .faq-icon { background: var(--brand-pale); border-color: rgba(53,115,224,0.3); }
    .faq-toggle:checked ~ .faq-label .faq-icon::after { transform: rotate(90deg); opacity: 0; }
    .faq-toggle:checked ~ .faq-label .faq-icon::before { background: var(--brand); }
    .faq-content { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; padding: 0 26px; }
    .faq-content p { padding-bottom: 20px; line-height: 1.7; color: var(--muted); font-size: 0.95rem; }
    .faq-toggle:checked ~ .faq-content { max-height: 400px; }

    /* ── Voice section ── */
    .voice-section {
      background: linear-gradient(135deg, var(--night) 0%, var(--night-mid) 100%);
      color: #fff; position: relative; overflow: hidden;
    }
    .voice-section::before {
      content: ""; position: absolute; top: -60px; right: -60px;
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(53,115,224,0.12) 0%, transparent 65%);
      pointer-events: none;
    }
    .voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .voice-copy .section-title { color: #fff; }
    .voice-copy .section-copy { color: rgba(255,255,255,0.65); }
    .voice-steps { margin-top: 36px; display: grid; gap: 20px; }
    .voice-step { display: flex; align-items: flex-start; gap: 16px; }
    .voice-step-icon {
      width: 44px; height: 44px; border-radius: 13px;
      background: rgba(53,115,224,0.18); border: 1px solid rgba(53,115,224,0.3);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; color: #5edbae;
    }
    .voice-step h4 { font-size: 0.95rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
    .voice-step p { font-size: 0.88rem; color: rgba(255,255,255,0.55); line-height: 1.6; }
    .voice-card {
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius-xl); padding: 36px;
    }
    .voice-card-title { font-size: 1.25rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 8px; }
    .voice-card-sub { font-size: 0.9rem; color: rgba(255,255,255,0.5); margin-bottom: 28px; line-height: 1.55; }
    .voice-promise-list { display: grid; gap: 12px; }
    .voice-promise {
      display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
      border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    }
    .voice-promise-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--brand); margin-top: 6px; flex-shrink: 0; }
    .voice-promise p { font-size: 0.9rem; color: rgba(255,255,255,0.7); line-height: 1.55; }
    .voice-cta {
      margin-top: 24px;
      display: inline-flex; align-items: center; gap: 8px;
      padding: 13px 22px; border-radius: 999px;
      background: var(--brand); color: #0F1115;
      font-size: 0.9rem; font-weight: 700; font-family: inherit;
      border: none; cursor: pointer;
      box-shadow: 0 4px 18px rgba(53,115,224,0.3);
      transition: background 0.18s, transform 0.18s;
      text-decoration: none;
    }
    .voice-cta:hover { background: var(--brand-dark); transform: translateY(-1px); }

    /* ── Contact ── */
    .contact-section { background: var(--surface); }
    .contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
    .contact-info { padding-top: 8px; }
    .contact-info .section-title { font-size: clamp(1.8rem, 3vw, 2.4rem); }
    .contact-reasons { margin-top: 34px; display: grid; gap: 14px; }
    .contact-reason { display: flex; align-items: flex-start; gap: 14px; }
    .contact-reason-icon {
      width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px;
      background: var(--brand-pale); color: var(--brand);
      display: flex; align-items: center; justify-content: center;
    }
    .contact-reason h4 { font-size: 0.93rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
    .contact-reason p { font-size: 0.88rem; line-height: 1.55; color: var(--muted); }
    .contact-form-card {
      background: var(--surface); border: 1px solid var(--line);
      border-radius: var(--radius-xl); padding: 38px; box-shadow: var(--shadow-md);
    }
    .form-heading { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 24px; }
    .form-group { margin-bottom: 16px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .form-group label { display: block; margin-bottom: 6px; font-size: 0.83rem; font-weight: 600; color: var(--ink); }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%; padding: 11px 14px; border: 1.5px solid var(--line);
      border-radius: var(--radius-sm); font-family: inherit; font-size: 0.93rem;
      color: var(--ink); background: var(--surface);
      transition: border-color 0.18s, box-shadow 0.18s; outline: none;
      appearance: none; -webkit-appearance: none;
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(53,115,224,0.12); }
    .form-group textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
    .form-group select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b1b9c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 13px center;
      padding-right: 34px; cursor: pointer;
    }
    .form-submit { margin-top: 20px; }
    .form-submit .button { width: 100%; min-height: 50px; font-size: 0.95rem; }
    .form-footer-note { margin-top: 12px; font-size: 0.8rem; color: var(--muted-light); text-align: center; line-height: 1.55; }
    .form-footer-note a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
    .form-success { display: none; text-align: center; padding: 24px 0 8px; }
    .form-success-icon {
      width: 54px; height: 54px; border-radius: 999px;
      background: var(--brand-pale); color: var(--brand);
      display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
    }
    .form-success h3 { font-size: 1.2rem; letter-spacing: -0.02em; margin-bottom: 8px; }

    /* ── Download CTA ── */
    .download-banner { background: var(--night); color: #fff; position: relative; overflow: hidden; }
    .download-banner::before {
      content: ""; position: absolute; top: -80px; right: -80px;
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(53,115,224,0.13) 0%, transparent 65%);
      pointer-events: none;
    }
    .download-card { text-align: center; position: relative; }
    .download-banner .section-title { color: #fff; }
    .download-banner .section-copy { color: rgba(255,255,255,0.6); margin: 0 auto; }
    .download-badge-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
    .download-note { margin-top: 20px; font-size: 0.82rem; color: rgba(255,255,255,0.35); font-family: 'DM Mono', monospace; letter-spacing: 0.06em; }

    /* ── Footer ── */
    footer { padding: 60px 24px 44px; border-top: 1px solid var(--line); }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 44px; }
    .footer-logo { margin-bottom: 14px; }
    .footer-logo svg { height: 17px; width: auto; }
    .footer-tagline { font-size: 0.88rem; color: var(--muted); max-width: 230px; line-height: 1.6; margin-bottom: 18px; }
    .footer-heading { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-light); margin-bottom: 14px; }
    .footer-links { display: grid; gap: 8px; }
    .footer-links a { font-size: 0.9rem; color: var(--muted); transition: color 0.15s; }
    .footer-links a:hover { color: var(--ink); }
    .footer-bottom { padding-top: 24px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
    .footer-bottom-left { font-size: 0.85rem; color: var(--muted-light); }
    .footer-bottom-links { display: flex; gap: 20px; }
    .footer-bottom-links a { font-size: 0.85rem; color: var(--muted-light); transition: color 0.15s; }
    .footer-bottom-links a:hover { color: var(--ink); }

    /* ── Utility ── */
    .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    /* ── Responsive ── */
    @media (max-width: 1000px) {
      section, footer { padding: 72px 20px; }
      .hero-grid, .contact-wrapper, .voice-grid { grid-template-columns: 1fr; gap: 40px; }
      .journey-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
      .journey-grid::before { display: none; }
      .hero-visual { order: -1; }
      .iphone-wrap { width: min(100%, 240px); }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
      .features-grid { grid-template-columns: 1fr; }
      .pricing-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
      section, footer { padding: 60px 16px; }
      .site-nav-inner { flex-wrap: wrap; }
      .nav-links { display: none; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0 8px; }
      .nav-links a { padding: 12px 14px; font-size: 0.98rem; border-radius: 12px; }
      .nav-actions { display: none; order: 4; flex-basis: 100%; }
      .nav-menu-button { display: inline-flex; }
      .nav-toggle:checked ~ .nav-links,
      .nav-toggle:checked ~ .nav-actions {
        display: flex;
      }
      .nav-toggle:checked ~ .nav-actions { flex-direction: column; width: 100%; padding: 4px 0 14px; gap: 8px; align-items: stretch; }
      .nav-toggle:checked ~ .nav-actions .button { width: 100%; }
      .journey-grid { grid-template-columns: 1fr; }
      .form-row { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; gap: 28px; }
      .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
      .contact-form-card { padding: 24px 18px; }
      .hero-badges { flex-direction: column; }
      .trust-bar-inner { gap: 16px; justify-content: flex-start; }
    }

    /* ── Landlords page, desaturated blue eyebrow accent ── */
    .landlords-page .eyebrow { color: #7ea4ff; }
    .landlords-page .eyebrow::before { background: #7ea4ff; }

    /* ── Browser-chrome frame (landlords hero visual) ── */
    .browser-frame {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: var(--shadow-md);
      overflow: hidden;
      width: 100%;
      max-width: 560px;
      margin-inline: auto;
    }
    .browser-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: var(--surface-soft);
      border-bottom: 1px solid var(--line);
    }
    .browser-dots {
      display: flex;
      gap: 6px;
    }
    .browser-dot {
      width: 11px;
      height: 11px;
      border-radius: 999px;
      background: var(--line);
    }
    .browser-dot.r { background: #ff5f57; }
    .browser-dot.y { background: #febc2e; }
    .browser-dot.g { background: #28c840; }
    .browser-address {
      flex: 1;
      padding: 5px 12px;
      border-radius: 6px;
      background: var(--bg);
      color: var(--muted);
      font-family: 'DM Mono', monospace;
      font-size: 0.78rem;
      letter-spacing: 0.02em;
      text-align: center;
      border: 1px solid var(--line-soft);
    }
    .browser-body {
      background: var(--bg);
      aspect-ratio: 16 / 10;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .browser-body img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .browser-body-placeholder {
      color: var(--muted-light);
      font-size: 0.85rem;
      padding: 24px;
      text-align: center;
    }
    /* When a real screenshot is dropped straight under .browser-frame
       (no .browser-body wrapper), let it size to its natural ratio. */
    .browser-frame > picture,
    .browser-frame > img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* ── /landlords product tour ──
       Direct port of /app/demo. Banner + centered hero + three
       alternating image/copy sections + closing CTA. Each screenshot
       is cropped to a near-landscape window so the tall full-page
       captures don't dominate the section — anchored to the top of
       the page, with a soft fade dissolving the bottom edge so it
       reads as a "peek into the app". */
    .demo-tour {
      max-width: 1240px;
      margin: 0 auto;
      padding: 24px 24px 80px;
      display: flex;
      flex-direction: column;
      gap: 72px;
    }
    /* Hero — sits directly under the nav, no orientation banner. */
    .demo-tour-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 14px;
      padding: 8px 24px;
    }
    .demo-tour-hero h1 {
      font-size: 44px;
      letter-spacing: -0.02em;
      line-height: 1.05;
      margin: 0;
      color: var(--ink);
    }
    .demo-tour-hero p {
      margin: 0;
      max-width: 56ch;
      font-size: 16px;
      line-height: 1.55;
      color: var(--muted);
    }
    .demo-tour-eyebrow {
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand);
      font-weight: 700;
    }
    .demo-tour-hero-cta {
      display: flex;
      gap: 12px;
      margin-top: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }
    /* Each section = copy + screenshot side-by-side, alternating.
       Image column is intentionally wider (5fr) than copy (4fr) so
       full-page screenshots stay big and clearly readable. Copy still
       has plenty of room — bullets are short. */
    .demo-tour-section {
      display: grid;
      grid-template-columns: 4fr 5fr;
      gap: 56px;
      align-items: center;
      padding: 0;
    }
    @media (max-width: 880px) {
      .demo-tour-section {
        grid-template-columns: 1fr;
        gap: 32px;
      }
    }
    .demo-tour-section.flip .demo-tour-copy {
      order: 2;
    }
    @media (max-width: 880px) {
      .demo-tour-section.flip .demo-tour-copy {
        order: unset;
      }
    }
    .demo-tour-copy {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .demo-tour-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--brand-pale);
      color: var(--brand);
      display: grid;
      place-items: center;
    }
    .demo-tour-copy h2 {
      margin: 0;
      font-size: 28px;
      letter-spacing: -0.015em;
      line-height: 1.15;
      color: var(--ink);
    }
    .demo-tour-copy p {
      margin: 0;
      font-size: 15.5px;
      line-height: 1.55;
      color: var(--muted);
    }
    .demo-tour-copy ul {
      list-style: none;
      margin: 8px 0 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .demo-tour-copy li {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      font-size: 14px;
      color: var(--ink);
      line-height: 1.55;
    }
    .demo-tour-copy li svg {
      flex-shrink: 0;
      margin-top: 3px;
      color: #2fd38f; /* success green — no token in marketing palette */
    }
    /* Screenshot frame — clean rounded card with subtle outline +
       shadow. No crop, no fade: we show the FULL captured page at
       natural aspect ratio so the visitor can actually see what the
       product looks like. Earlier crop attempts hid too much real
       content. The image column being wider (5fr) keeps the
       screenshot at a comfortable, clearly-readable size. */
    .demo-tour-shot {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      background: var(--surface-muted);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-md);
    }
    .demo-tour-shot picture,
    .demo-tour-shot picture > img,
    .demo-tour-shot > img {
      display: block;
      width: 100%;
      height: auto;
    }
    /* Closing CTA — soft repeat at the bottom */
    .demo-tour-close {
      margin-top: 24px;
      padding: 40px 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 12px;
      background: linear-gradient(180deg, var(--brand-pale) 0%, transparent 100%);
      border: 1px solid var(--brand);
      border-radius: 16px;
    }
    .demo-tour-close h2 {
      margin: 0;
      font-size: 26px;
      letter-spacing: -0.01em;
      color: var(--ink);
    }
    .demo-tour-close p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      max-width: 50ch;
    }
    /* The .demo-tour container handles its own padding (matches /demo);
       the global `section, footer { padding: 96px 24px }` rule would
       double-up. Reset for sections inside the tour. */
    .demo-tour > section {
      padding: 0;
    }
    .demo-tour > .demo-tour-close {
      padding: 40px 32px;
    }

    /* ── Outcomes band (landlords) ── */
    .outcomes-band {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-top: 40px;
    }
    .outcome-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }
    .outcome-bullet {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      border-radius: 9px;
      background: var(--brand-pale);
      color: var(--brand);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 0.9rem;
    }
    .outcome-item p {
      font-size: 0.98rem;
      line-height: 1.6;
      color: var(--ink);
    }

    @media (max-width: 1000px) {
      .outcomes-band { grid-template-columns: 1fr; gap: 16px; }
    }