:root {
  --bg: #f8fafc;
  --bg-alt: #ffffff;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-muted: #64748b;
  --text-faint: #94a3b8;
  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --navy: #0f172a;
  --gold: #eec97a;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -8px rgba(15, 23, 42, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --bg-alt: #0b1220;
    --card: #1e293b;
    --border: #334155;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --text-faint: #64748b;
    --emerald-50: rgba(6, 78, 59, 0.35);
    --emerald-100: rgba(6, 95, 70, 0.45);
    --emerald-600: #10b981;
    --emerald-700: #34d399;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 28px -10px rgba(0, 0, 0, 0.5);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg-alt) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--text);
}

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

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--emerald-600);
  color: #fff;
}

.btn-primary:hover {
  background: var(--emerald-700);
}

.btn-secondary {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}

.btn-secondary:hover {
  border-color: var(--emerald-600);
  color: var(--emerald-700);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}

.btn-ghost:hover {
  color: var(--text);
}

.btn-lg {
  padding: 14px 26px;
  font-size: 15px;
}

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

.hero {
  padding: 88px 0 64px;
}

.hero-inner {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--emerald-50);
  color: var(--emerald-700);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 24px;
}

.hero h1 {
  font-size: clamp(32px, 5.5vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  font-weight: 800;
}

.hero p.lead {
  font-size: 18px;
  color: var(--text-muted);
  margin: 0 0 32px;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-faint);
}

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

section {
  padding: 72px 0;
}

.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
}

.section-tag {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--emerald-700);
  margin: 0 0 10px;
}

.section-head h2 {
  font-size: clamp(24px, 3.5vw, 34px);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  font-weight: 800;
}

.section-head p {
  color: var(--text-muted);
  font-size: 16px;
  margin: 0;
  line-height: 1.6;
}

.alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ---------- Feature grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  box-shadow: var(--shadow);
}

.feature-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--emerald-100);
  color: var(--emerald-700);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.feature-card h3 {
  font-size: 16px;
  margin: 0 0 8px;
  font-weight: 700;
}

.feature-card p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

/* ---------- Demo mockup ---------- */

.demo-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.demo-tab {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.demo-tab.active {
  background: var(--emerald-600);
  border-color: var(--emerald-600);
  color: #fff;
}

.demo-frame {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
}

.demo-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.demo-chrome span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--border);
}

.demo-panel {
  display: none;
  padding: 28px;
}

.demo-panel.active {
  display: block;
}

.mock-title {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 4px;
}

.mock-h1 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
}

.mock-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.mock-stat {
  /* A grid track's `1fr` is still floored at its content's natural width unless this is
     set — without it, an unbreakable value like "€14,310" was forcing this column wider
     than its share of a narrow phone screen, and since the demo frame around it clips
     overflow, the third stat was getting cut off rather than wrapping the page. */
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: var(--bg);
}

.mock-stat .label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.mock-stat .value {
  font-size: 18px;
  font-weight: 700;
}

.mock-stat.income .value {
  color: var(--emerald-700);
}

.mock-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.mock-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  font-weight: 600;
}

.mock-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.mock-badge {
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--emerald-100);
  color: var(--emerald-700);
}

.mock-badge.blue {
  background: #dbeafe;
  color: #1d4ed8;
}

.mock-badge.rose {
  background: #ffe4e6;
  color: #be123c;
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  counter-reset: step;
}

.step {
  position: relative;
  padding-left: 4px;
}

.step-num {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 14px;
}

.step h3 {
  font-size: 16px;
  margin: 0 0 8px;
  font-weight: 700;
}

.step p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .steps {
    text-align: center;
  }

  .step-num {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Install as an app ---------- */

.install-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .install-grid {
    grid-template-columns: 1fr;
  }
}

.install-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: var(--shadow);
}

.install-card h3 {
  font-size: 15px;
  margin: 0 0 14px;
  font-weight: 700;
}

.install-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
}

.install-steps li {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

.install-steps strong {
  color: var(--text);
}

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--navy);
  border-radius: 24px;
  padding: 56px 40px;
  text-align: center;
  color: #fff;
  max-width: 1120px;
  margin: 0 auto;
}

.cta-band h2 {
  font-size: clamp(22px, 3vw, 30px);
  margin: 0 0 12px;
  font-weight: 800;
}

.cta-band p {
  color: #cbd5e1;
  margin: 0 0 28px;
  font-size: 15px;
}

.cta-band .btn-secondary {
  background: transparent;
  border-color: #334155;
  color: #fff;
}

.cta-band .btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ---------- Pricing ---------- */

.pricing-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
  box-shadow: var(--shadow);
  max-width: 640px;
  margin: 0 auto;
}

.pricing-model {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.pricing-model .amount {
  font-size: 36px;
  font-weight: 800;
}

.pricing-model .unit {
  font-size: 15px;
  color: var(--text-muted);
}

.pricing-list {
  list-style: none;
  margin: 28px 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}

.pricing-list svg {
  flex-shrink: 0;
  color: var(--emerald-600);
  margin-top: 2px;
}

.pricing-note {
  font-size: 13px;
  color: var(--text-faint);
  margin: 20px 0 0;
  line-height: 1.6;
}

/* ---------- Pricing tiers + comparison table ---------- */

.pricing-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
  align-items: stretch;
}

@media (max-width: 820px) {
  .pricing-tiers {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

.tier-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tier-card-highlight {
  border-color: var(--emerald-600);
  border-width: 2px;
  padding: 27px;
}

.tier-tag {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--emerald-700);
  margin: 0;
}

.tier-name {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.tier-recommended {
  color: var(--text-muted);
  font-size: 13px;
  margin: 2px 0 0;
}

.tier-card .pricing-model {
  margin-bottom: 0;
}

.tier-desc {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.compare-table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px 24px;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: var(--shadow);
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}

.compare-table th {
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 14px 8px;
  border-bottom: 1px solid var(--border);
}

.compare-table th:first-child {
  text-align: left;
}

.compare-table td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  color: var(--text-muted);
}

.compare-table tr:last-child td {
  border-bottom: none;
}

.compare-table td:first-child {
  text-align: left;
  color: var(--text);
}

.compare-table td.yes {
  color: var(--emerald-600);
  font-weight: 700;
}

.compare-table td.no {
  color: var(--text-faint);
}

.compare-scroll-hint {
  display: none;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  margin: 0 0 10px;
}

@media (max-width: 640px) {
  .compare-scroll-hint {
    display: block;
  }

  .compare-table-wrap {
    padding: 8px 0;
    border-left: none;
    border-right: none;
    border-radius: 0;
    margin: 0 -24px;
    max-width: none;
  }

  .compare-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
    font-size: 13px;
  }

  .compare-table th,
  .compare-table td {
    padding: 10px 6px;
    white-space: nowrap;
  }

  /* Fixed, even widths for the three tier columns plus visible dividers between every
     column — without this, column widths were driven by each row's own content (so
     they varied row to row) and there was nothing marking where one column ended and
     the next began, which is what actually made the table hard to read on a phone:
     the checkmarks were correctly aligned under their tier, just with no visual cue
     saying so. */
  .compare-table th:not(:first-child),
  .compare-table td:not(:first-child) {
    width: 18%;
    border-left: 1px solid var(--border);
  }

  .compare-table th:first-child,
  .compare-table td:first-child {
    position: sticky;
    left: 0;
    width: 46%;
    background: var(--card);
    white-space: normal;
    padding-left: 16px;
    box-shadow: 2px 0 4px -2px rgb(0 0 0 / 0.15);
  }

  /* Not sticky: `.compare-table-wrap` has `overflow-x: auto`, and per spec that forces
     its computed overflow-y to `auto` too, making it an actual scroll container even
     though it never scrolls vertically. A `position: sticky` header inside it sticks
     relative to that box instead of the page viewport, which browsers handle
     inconsistently — this produced a real bug where the header row rendered
     overlapping/behind the first data row on a phone. Plain static header avoids the
     whole class of bug. */
  .compare-table thead th {
    background: var(--card);
  }
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow);
}

.contact-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.contact-card p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 16px;
  line-height: 1.6;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-muted);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--emerald-600);
  box-shadow: 0 0 0 1px var(--emerald-600);
}

.field textarea {
  resize: vertical;
  min-height: 110px;
}

/* ---------- About ---------- */

.about-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--emerald-600);
  border-radius: 16px;
  padding: 32px;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: var(--shadow);
}

.about-card p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 16px;
}

.about-card p:last-child {
  margin-bottom: 0;
}

.about-signoff {
  margin-top: 20px !important;
  font-weight: 600;
  color: var(--text) !important;
}

/* ---------- FAQ ---------- */

.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 22px;
  box-shadow: var(--shadow);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 28px 18px 0;
  font-weight: 700;
  font-size: 15px;
  position: relative;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 16px;
  font-size: 20px;
  font-weight: 400;
  color: var(--emerald-600);
  transition: transform 0.15s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- Worked example ---------- */

.video-slot {
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.video-slot-inner {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.video-slot-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--emerald-100);
  color: var(--emerald-700);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.video-slot-title {
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 6px;
}

.video-slot-sub {
  color: var(--text-muted);
  font-size: 14px;
  max-width: 420px;
  margin: 0;
}

.video-slot-filled {
  border-style: solid;
  overflow: hidden;
  line-height: 0;
  position: relative;
  /* Box matches the actual screen content's shape (1728x899 within the 1920x1080
     export — see the video crop below), not the raw file's 16:9 frame, so the box
     itself never shows any of the recording's baked-in black border. */
  aspect-ratio: 1728 / 899;
}

.video-slot-filled video {
  display: block;
  background: #000;
  /* The source file has a constant black border baked in around the actual screen
     recording (measured once: 96px left, 126px top, 97px right, 56px bottom on the
     1920x1080 export). Since CSS can't crop a <video> directly, this scales the video
     up and shifts it so the real content rectangle exactly fills the box above,
     pushing the border out of view on all four sides. */
  position: absolute;
  top: -14.0156%;
  left: -5.5556%;
  width: 111.1111%;
  height: 120.1335%;
  max-width: none;
}

/* ---------- Testimonials ---------- */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.testimonial-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.testimonial-quote-icon {
  color: var(--emerald-600);
  opacity: 0.5;
}

.testimonial-card p.quote {
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.testimonial-author .name {
  font-weight: 700;
  font-size: 14px;
}

.testimonial-author .role {
  font-size: 13px;
  color: var(--text-muted);
}

.testimonial-note {
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
  max-width: 480px;
  margin: 28px auto 0;
  line-height: 1.6;
}

.example-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 900px;
  margin: 0 auto 24px;
}

@media (max-width: 640px) {
  .example-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .mock-stats {
    gap: 8px;
  }

  .mock-stat {
    padding: 8px 6px;
  }

  .mock-stat .label {
    font-size: 10px;
  }

  .mock-stat .value {
    font-size: 14px;
  }

  .demo-panel {
    padding: 16px;
  }

  /* The Bookings demo table has 5 columns (Guest/Dates/Nights/Source/Status) with
     badges that don't have room to shrink into a 375px phone — .demo-frame clips
     overflow for its rounded corners, so without its own scroll container the last
     column or two were being cut off invisibly rather than wrapping the page. */
  .mock-table-wrap {
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px;
  }

  .mock-table {
    width: max-content;
    min-width: 100%;
  }
}

.example-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow);
}

.example-stat .label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.example-stat .value {
  font-size: 20px;
  font-weight: 800;
}

.example-stat .value.income {
  color: var(--emerald-700);
}

.example-table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px 24px;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: var(--shadow);
}

.example-table th,
.example-table td {
  padding: 12px 4px;
}

/* ---------- Legal pages ---------- */

.legal {
  max-width: 720px;
  margin: 0 auto;
}

.legal h2 {
  font-size: 19px;
  margin: 36px 0 12px;
}

.legal h2:first-child {
  margin-top: 0;
}

.legal p,
.legal li {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
}

.legal ul {
  padding-left: 20px;
}

.legal .updated {
  color: var(--text-faint);
  font-size: 13px;
  margin-bottom: 40px;
}

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

footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
}

.footer-brand img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

footer .muted {
  color: var(--text-faint);
  font-size: 13px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 13px;
  color: var(--text-muted);
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
}

/* ---------- Mobile nav ---------- */

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 4px;
}

@media (max-width: 760px) {
  .nav-links {
    position: fixed;
    top: 61px;
    left: 0;
    right: 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 16px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.15s ease;
  }

  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links a {
    padding: 12px 0;
    width: 100%;
    border-bottom: 1px solid var(--border);
  }

  .nav-cta .btn-secondary {
    display: none;
  }

  .nav-toggle {
    display: block;
  }
}

@media (max-width: 640px) {
  /* Desktop keeps footer-inner's space-between row; on a narrow phone that reads as
     lopsided left-aligned once the three groups wrap onto their own lines, so center
     each one instead — same content, better balanced when stacked. */
  .footer-inner {
    justify-content: center;
    text-align: center;
  }

  .footer-links {
    justify-content: center;
  }
}