/* Landing styles: semantic g4u tokens only, fluid down to 360 px, 44 px touch targets. */
.lp-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.lp-page main {
  flex: 1;
}
.lp-skip {
  position: absolute;
  left: var(--g4u-space-2);
  top: -100px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--g4u-space-4);
  background: var(--g4u-surface);
  color: var(--g4u-text);
  border: 1px solid var(--g4u-border-strong);
  border-radius: var(--g4u-r-sm);
}
.lp-skip:focus {
  top: var(--g4u-space-2);
}
.lp-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--g4u-space-2) var(--g4u-space-4);
  padding: var(--g4u-space-3) var(--g4u-page-px);
  border-bottom: 1px solid var(--g4u-border);
  background: var(--g4u-shell-bg);
}
.lp-brand {
  font-size: var(--g4u-text-lg, 18px);
  display: inline-flex;
  align-items: center;
  gap: var(--g4u-space-2);
  color: var(--g4u-text);
  font-weight: 600;
  text-decoration: none;
}
.lp-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g4u-space-2);
}
/* Touch targets: 44 px whatever the pointer and the density. */
.lp-header a,
.lp-header button,
.lp-footer a,
.lp-cta {
  min-height: 44px;
}
.lp-header a,
.lp-footer a {
  display: inline-flex;
  align-items: center;
}
.lp-header .g4u-segmented button {
  min-width: 44px;
  justify-content: center;
}
.lp-cta {
  padding: 0 var(--g4u-space-5);
  text-decoration: none;
}
.lp-header .lp-cta--header {
  display: none;
}
.lp-section {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--g4u-space-10) var(--g4u-page-px);
}
.lp-hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--g4u-space-5);
}
.lp-hero h1 {
  margin: 0;
  font-size: var(--g4u-text-3xl);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.lp-section h2 {
  margin: 0 0 var(--g4u-space-3);
  font-size: var(--g4u-text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.lp-section h3 {
  margin: 0;
  font-size: var(--g4u-text-lg);
  font-weight: 600;
}
.lp-lead {
  margin: 0;
  max-width: 60ch;
  color: var(--g4u-text-2);
  font-size: var(--g4u-text-lg);
  line-height: 1.5;
}
.lp-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--g4u-space-2);
  padding: var(--g4u-space-5);
}
.lp-card p {
  margin: 0;
  color: var(--g4u-text-2);
}
.lp-card > .g4u-icon {
  color: var(--g4u-accent-text);
  font-size: var(--g4u-text-2xl);
}
.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--g4u-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-tags,
.lp-checks,
.lp-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g4u-space-2);
  margin-top: var(--g4u-space-4);
}
.lp-tag {
  padding: var(--g4u-space-2) var(--g4u-space-3);
  font-size: var(--g4u-fs);
}
.lp-offer {
  align-items: stretch;
  gap: var(--g4u-space-3);
}
.lp-offer h2 {
  margin: 0;
}
.lp-checks {
  display: flex;
  flex-direction: column;
  gap: var(--g4u-space-2);
  margin: var(--g4u-space-2) 0 var(--g4u-space-3);
}
.lp-checks li {
  display: flex;
  align-items: center;
  gap: var(--g4u-space-2);
}
.lp-checks .g4u-icon {
  color: var(--g4u-success);
}
.lp-footer {
  padding: var(--g4u-space-4) var(--g4u-page-px);
  border-top: 1px solid var(--g4u-border);
  color: var(--g4u-text-2);
}
.lp-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g4u-space-2) var(--g4u-space-5);
  max-width: 960px;
  margin: 0 auto;
}
@media (min-width: 600px) {
  .lp-header .lp-cta--header {
    display: inline-flex;
  }
}
@media (min-width: 768px) {
  .lp-hero {
    align-items: flex-start;
  }
  .lp-hero h1 {
    font-size: var(--g4u-text-4xl);
    max-width: 18ch;
  }
  .lp-section {
    padding-block: var(--g4u-space-16);
  }
  .lp-offer {
    max-width: 480px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-page * {
    transition: none;
    animation: none;
  }
}
.lp-link {
  color: var(--g4u-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lp-link:hover {
  color: var(--g4u-accent-hover);
}