/**
 * Homepage composition only. Colors come from the existing guest tokens.
 * Buy-data and shop panels do not use .landing-home.
 */

body.landing-home {
  scroll-padding-top: 76px;
}

body.landing-home ::selection {
  background: color-mix(in srgb, var(--guest-gold, var(--tf-gold)) 45%, var(--guest-ink));
  color: var(--guest-bg, var(--tf-bg));
}

body.landing-home :focus-visible {
  outline: 2px solid var(--color-primary, var(--tf-blue));
  outline-offset: 2px;
}

body.landing-home .lh-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--guest-bg, var(--tf-bg));
  background-image: linear-gradient(color-mix(in srgb, var(--guest-bg, var(--tf-bg)) 92%, transparent), color-mix(in srgb, var(--guest-bg, var(--tf-bg)) 92%, transparent));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--guest-line, var(--tf-border));
}

body.landing-home .lh-bar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
}

body.landing-home .lh-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 0;
  min-height: 0;
}

body.landing-home .brand-name {
  color: var(--guest-ink);
  font-weight: 800;
  letter-spacing: -0.03em;
}

body.landing-home .lh-hero {
  padding-top: 0;
  padding-bottom: 12px;
}

body.landing-home .lh-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 36px;
  align-items: start;
  padding: 8px 0 12px;
}

body.landing-home .landing-guest-h1 {
  margin: 0 0 12px;
  text-align: left;
  max-width: 12ch;
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

body.landing-home .lh-lead {
  margin: 0;
  max-width: 36ch;
  color: var(--guest-muted);
  font-size: 1.05rem;
}

body.landing-home .lh-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 22px;
  color: var(--guest-muted);
  font-size: 0.92rem;
  font-weight: 600;
}

body.landing-home .lh-proof span::before {
  content: "✓ ";
  color: var(--guest-mint, var(--tf-green));
}

body.landing-home .lh-buy .landing-guest-buy {
  max-width: none;
  margin: 0;
  padding: 22px 20px 18px;
  text-align: left;
  background: var(--guest-surface);
  border: 1px solid var(--guest-line);
  border-radius: 22px;
  box-shadow: 0 22px 48px -24px rgba(0, 0, 0, 0.55);
}

body.landing-home .lh-band,
body.landing-home .lh-prices,
body.landing-home .lh-paths,
body.landing-home .landing-guest-section {
  padding: 48px 0;
}

body.landing-home .lh-band h2,
body.landing-home .lh-prices h2,
body.landing-home .lh-paths h2,
body.landing-home .landing-guest-acct h2,
body.landing-home .landing-guest-head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3.2vw, 2.15rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

body.landing-home .lh-sub {
  margin: 8px 0 0;
  color: var(--guest-muted);
}

body.landing-home .lh-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

body.landing-home .lh-steps li,
body.landing-home .lh-paths article {
  background: var(--guest-surface);
  border: 1px solid var(--guest-line);
  border-radius: 18px;
  padding: 20px;
}

body.landing-home .lh-steps h3,
body.landing-home .lh-paths h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

body.landing-home .lh-steps p,
body.landing-home .lh-paths p {
  margin: 0;
  color: var(--guest-muted);
}

body.landing-home .lh-prices {
  background: var(--guest-surface);
  border-block: 1px solid var(--guest-line);
}

body.landing-home .lh-prices .landing-guest-from {
  margin-top: 22px;
}

body.landing-home .lh-agent-note {
  margin: 18px 0 10px;
  font-weight: 600;
}

body.landing-home .lh-paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

body.landing-home .lh-paths .landing-guest-cta {
  margin-top: 16px;
}

@media (prefers-reduced-motion: no-preference) {
  body.landing-home .lh-copy {
    animation: lh-settle 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes lh-settle {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (max-width: 880px) {
  body.landing-home .lh-hero-grid,
  body.landing-home .lh-steps,
  body.landing-home .lh-paths-grid,
  body.landing-home .landing-guest-acct {
    grid-template-columns: 1fr;
  }

  body.landing-home .landing-guest-h1 {
    max-width: 16ch;
    font-size: 2rem;
  }
}

@media (max-width: 560px) {
  body.landing-home .lh-hide-s {
    display: none;
  }

  body.landing-home .lh-bar-in {
    min-height: 58px;
  }

  body.landing-home .lh-buy .landing-guest-buy {
    padding: 16px 14px;
  }
}