/* The public landing page (LandingController). Uses the app's tokens, so it follows the light and dark themes. */
.landing {
  --landing-width: 72rem;
  background: var(--color-surface);
}

.landing-wrap { width: 100%; max-width: var(--landing-width); margin: 0 auto; padding: 0 var(--space-5); }

.landing-eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.landing-muted { color: var(--color-text-muted); }

/* Header */
.landing-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.landing-header__inner { display: flex; align-items: center; gap: var(--space-5); height: 4rem; }
.landing-header .logo { height: 1.75rem; }
.landing-header__prefs { display: flex; gap: var(--space-2); margin-left: auto; }

/* Hero */
.landing-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) 0 calc(var(--space-8) * 1.5);
}

.landing-hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }

.landing-hero__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.landing-hero__lead { max-width: 36rem; margin: 0 0 var(--space-6); font-size: 1.125rem; line-height: 1.6; color: var(--color-text-muted); }

.landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.landing-button { min-height: 3rem; padding: 0 var(--space-5); font-size: var(--text-base); }


/* The app sketch beside the headline */
.landing-mock { position: relative; padding: var(--space-5) var(--space-5) var(--space-6); }

.landing-mock__window {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 24px 60px -20px rgb(30 27 75 / 0.25), 0 2px 6px rgb(16 24 40 / 0.06);
  overflow: hidden;
}

.landing-mock__bar { display: flex; gap: 6px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.landing-mock__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border-strong); }
.landing-mock__body { padding: var(--space-5); }

.landing-mock__limit { padding: var(--space-4); border-radius: var(--radius); background: var(--color-bg); }
.landing-mock__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.landing-mock__row--muted { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.landing-mock__label { font-size: var(--text-sm); color: var(--color-text-muted); }
.landing-mock__figure { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 600; }
.landing-mock__meter { height: 8px; margin-top: var(--space-3); border-radius: 4px; background: color-mix(in srgb, var(--color-primary) 14%, transparent); overflow: hidden; }
.landing-mock__meter span { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }

.landing-mock__heading { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.landing-mock__table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.landing-mock__table td { padding: var(--space-2) 0; border-top: 1px solid var(--color-border); }
.landing-mock__table td:first-child { width: 3.5rem; color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.landing-mock__table td:last-child { text-align: right; font-family: var(--font-mono); white-space: nowrap; }

.landing-mock__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: 0 10px 30px -10px rgb(16 24 40 / 0.25);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}

.landing-mock__chip--invoice { top: 0; right: 0; }
.landing-mock__chip--tax { bottom: 0; left: 0; }
.landing-mock__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-success-text); }

/* Sections */
.landing-section { padding: calc(var(--space-8) * 1.5) 0; }

.landing-section__title {
  max-width: 40rem;
  margin: 0 0 var(--space-6);
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.landing-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.landing-step { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.landing-step h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-lg); }
.landing-step p { margin: 0; color: var(--color-text-muted); line-height: 1.6; }
.landing-step__number {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-weight: 600;
}

.landing-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.landing-feature { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.landing-feature h3 { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-base); }
.landing-feature p { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }
.landing-feature__icon { width: 1.75rem; height: 1.75rem; color: var(--color-primary); }

/* Closing call to action: plain, on the page background, aligned with the sections above */
.landing-cta { padding: calc(var(--space-8) * 1.5) 0; }
.landing-cta h2 { max-width: 36rem; margin: 0 0 var(--space-3); font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.landing-cta p { max-width: 32rem; margin: 0 0 var(--space-5); line-height: 1.6; color: var(--color-text-muted); }

/* Footer: "Indigo by Tomoweb" on the left, the copyright on the right */
.landing-footer { padding: var(--space-6) 0; border-top: 1px solid var(--color-border); }
.landing-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.landing-footer__brand { display: flex; align-items: center; gap: var(--space-3); }
.landing-footer__brand .logo { height: 1.625rem; }
.landing-footer__by { font-size: var(--text-sm); color: var(--color-text-muted); }
/* The two logos are links that keep their colours on hover (no link colour), and only dim a little */
.landing .app-brand:hover, .landing-footer__maker:hover { color: var(--color-text); opacity: 0.75; }
.landing-footer__maker { display: block; color: var(--color-text); transition: opacity 0.15s ease; }
/* Tomoweb's letters sit in the middle half of its artwork, so it's drawn taller than the Indigo logo to look as big */
.landing-footer__maker .tomoweb-logo { display: block; height: 1.875rem; width: auto; }
.landing-footer__legal { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

@media (max-width: 64rem) {
  .landing-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 52rem) {
  .landing-hero { padding-top: var(--space-6); }
  .landing-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .landing-steps { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 36rem) {
  .landing-wrap { padding: 0 var(--space-4); }
  .landing-features { grid-template-columns: minmax(0, 1fr); }
  .landing-mock { padding: var(--space-5) 0 var(--space-6); }
  .landing-mock__chip { font-size: var(--text-xs); }
}