/**
 * Landing layout shells — section rhythm and placeholders only.
 * Visual contract stays in Caustica Design tokens / component classes.
 */

.skip-link {
  position: absolute;
  inset-inline-start: var(--ca-space-4);
  top: -100px;
  z-index: 2000;
  padding: var(--ca-space-2) var(--ca-space-3);
  border-radius: var(--ca-radius-pill);
  background: var(--color-system-blue);
  color: white;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: var(--ca-space-4);
}

.ui-icon--theme {
  width: 0.9rem;
  height: 0.9rem;
  mask-image: url(/examples/icons/theme-sun.svg);
  -webkit-mask-image: url(/examples/icons/theme-sun.svg);
}

html[data-theme='light'] .ui-icon--theme {
  mask-image: url(/examples/icons/theme-moon.svg);
  -webkit-mask-image: url(/examples/icons/theme-moon.svg);
}

.ui-icon--layouts {
  width: 0.9rem;
  height: 0.9rem;
  mask-image: url(/examples/icons/layouts.svg);
  -webkit-mask-image: url(/examples/icons/layouts.svg);
}

.lp-chrome .ui-icon--chevron-left,
.lp-chrome .ui-icon--chevron-right {
  width: 0.95rem;
  height: 0.95rem;
  mask-image: url(/examples/icons/chevron-left.svg);
  -webkit-mask-image: url(/examples/icons/chevron-left.svg);
}

.lp-chrome .ui-icon--chevron-right {
  mask-image: url(/examples/icons/chevron-right.svg);
  -webkit-mask-image: url(/examples/icons/chevron-right.svg);
}

.lp {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Demo chrome — bottom glass dock, clear of product navbar CTAs. */
.lp-controls {
  position: fixed;
  z-index: 40;
  inset-block-end: max(var(--ca-space-4), env(safe-area-inset-bottom, 0px));
  inset-inline-start: 50%;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--ca-space-1);
  width: max-content;
  max-width: calc(100vw - 2 * var(--ca-space-3));
  padding: var(--ca-space-1);
  border-radius: var(--ca-radius-pill);
  border: 0.5px solid color-mix(in oklab, var(--glass-border) 90%, transparent);
  background: color-mix(in oklab, var(--glass-surface-strong) 92%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 16%, transparent) inset,
    0 12px 32px -16px color-mix(in oklab, black 55%, transparent);
  transform: translateX(-50%);
}

html[data-theme='light'] .lp-controls {
  background: color-mix(in oklab, var(--glass-surface-strong) 94%, white);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 20%, transparent) inset,
    0 14px 36px -18px color-mix(in oklab, var(--color-fg) 22%, transparent);
}

.lp-chrome__step {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--ca-radius-pill);
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--ca-duration-fast) ease,
    background-color var(--ca-duration-fast) ease;
}

.lp-chrome__step:hover {
  color: var(--text);
  background: color-mix(in oklab, var(--glass-surface) 80%, transparent);
}

.lp-chrome__step:focus-visible,
.lp-chrome__gallery:focus-visible,
.lp-chrome__examples:focus-visible,
.lp-controls #theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent-2);
  outline-offset: 2px;
}

.lp-chrome__step[aria-disabled='true'] {
  opacity: 0.35;
  pointer-events: none;
}

.lp-chrome__gallery {
  gap: var(--ca-space-2);
  min-width: 0;
}

.lp-chrome__gallery-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-chrome__count {
  display: none;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-weight: 500;
}

/* Count only when the full shell dock fits on one row (~520px+). */
@media (min-width: 32.5rem) {
  .lp-chrome__count {
    display: inline;
  }

  .lp-chrome__count::before {
    content: '·';
    margin-inline-end: var(--ca-space-2);
    color: color-mix(in oklab, var(--muted) 70%, transparent);
  }
}

.lp-chrome__sep {
  width: 1px;
  height: 1.15rem;
  margin-inline: var(--ca-space-1);
  background: color-mix(in oklab, var(--glass-border) 100%, transparent);
  flex-shrink: 0;
}

.lp-controls #theme-toggle {
  flex-shrink: 0;
}

/*
 * Narrow dock: keep one pill row on iPhone SE / 14.
 * Shell docks (have prev/next steps): hide Examples + sep; theme icon-only.
 * Index dock: theme icon-only only (Home / Examples / Docs stay).
 */
@media (max-width: 32.49rem) {
  .lp-controls:has(.lp-chrome__step) .lp-chrome__examples,
  .lp-controls:has(.lp-chrome__step) .lp-chrome__sep {
    display: none;
  }

  .lp-controls #theme-toggle {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    gap: 0;
  }

  .lp-controls #theme-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .lp-controls {
    animation: lp-chrome-in 420ms var(--ca-ease-spring, ease) both;
  }
}

@keyframes lp-chrome-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

/* Leave room so the dock never covers primary CTAs / footer actions. */
.lp:has(.lp-controls) main {
  padding-block-end: 5.5rem;
}

.lp main {
  flex: 1 0 auto;
}

.lp-section {
  padding-block: var(--ca-space-16);
  padding-inline: var(--ca-space-4);
}

.lp-section--tight {
  padding-block: var(--ca-space-10);
}

.lp-section--bleed {
  padding-inline: 0;
}

.lp-section--muted {
  background: color-mix(in oklab, var(--color-bg-elevated) 55%, transparent);
}

.lp-hero {
  position: relative;
  min-height: min(88dvh, 52rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--ca-space-20) var(--ca-space-16);
  padding-inline: var(--ca-space-4);
  /* Keep overflow visible so the hero gradient glow is not clipped. */
  overflow: visible;
}

/* Index catalog — compact hero so the gallery enters the first viewport. */
.lp-hero--index {
  min-height: 0;
  justify-content: flex-start;
  padding-block: var(--ca-space-12) var(--ca-space-8);
}

/* Keep hero CTAs clear of the fixed bottom dock on short viewports. */
@media (max-height: 40rem) {
  .lp-hero {
    min-height: 0;
    padding-block: var(--ca-space-10) var(--ca-space-8);
  }

  .lp-hero__actions {
    padding-block-end: 4.5rem;
  }

  .lp-hero--index .lp-hero__actions {
    padding-block-end: 0;
  }

  .lp-hero--index {
    padding-block-end: calc(var(--ca-space-8) + 4.5rem);
  }
}

/* Hold enter targets until their section intersects the viewport. */
@media (prefers-reduced-motion: no-preference) {
  [data-lp-enter] .lp-enter-target:not(.ca-animate-enter):not(.motion-enter) {
    opacity: 0;
  }
}

.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      80% 60% at 70% 20%,
      color-mix(in oklab, var(--accent) 18%, transparent),
      transparent 60%
    ),
    radial-gradient(
      50% 40% at 10% 80%,
      color-mix(in oklab, var(--ca-blue-400) 12%, transparent),
      transparent 55%
    );
  z-index: 0;
}

.lp-hero > * {
  position: relative;
  z-index: 1;
}

.lp-hero__brand-row {
  --lp-brand-size: clamp(1.75rem, 4vw + 0.75rem, 3.25rem);
  align-items: center;
  gap: clamp(var(--ca-space-2), 2.5vw, var(--ca-space-5));
  margin: 0 0 var(--ca-space-4);
  max-width: 100%;
  min-width: 0;
  /* Room for .text-gradient-hero__glow drop-shadow below the baseline. */
  padding-block-end: 0.28em;
}

.lp-hero__brand-row .brand-mark {
  /* Larger than the title so the glass disk leads the hero. */
  width: calc(var(--lp-brand-size) * 1.22);
  height: calc(var(--lp-brand-size) * 1.22);
}

.lp-hero__brand {
  font-size: var(--lp-brand-size);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0;
  font-weight: 650;
  /* max-content so background-clip:text isn’t chopped by flex shrink. */
  min-width: max-content;
  max-width: none;
  flex-shrink: 0;
}

.lp-hero__brand .text-gradient-hero__glow,
.lp-hero__brand .text-gradient-hero__text {
  overflow: visible;
  max-width: none;
}

.lp-hero__kicker {
  margin: calc(var(--ca-space-2) * -1) 0 var(--ca-space-3);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
}

.lp-hero__lede {
  max-width: 36rem;
  margin: 0 0 var(--ca-space-6);
  font-size: var(--ca-font-size-lg);
  color: var(--muted);
  line-height: 1.5;
}

.lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ca-space-3);
}

.lp-eyebrow {
  margin: 0 0 var(--ca-space-3);
  font-size: var(--ca-font-size-sm);
  letter-spacing: 0.02em;
  color: var(--muted);
}

.lp-breadcrumb {
  margin: 0 0 var(--ca-space-3);
}

.lp-breadcrumb-bar {
  margin-block-end: var(--ca-space-4);
}

.lp-split--hero > .lp-breadcrumb-bar {
  grid-column: 1 / -1;
}

.lp-breadcrumb .breadcrumb__link {
  color: var(--muted);
}

.lp-breadcrumb .breadcrumb__link:hover {
  color: var(--text);
}

.lp-hero--index .lp-breadcrumb {
  margin-block-end: var(--ca-space-4);
}

.lp-section-title {
  margin: 0 0 var(--ca-space-3);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.lp-section-lede {
  margin: 0 0 var(--ca-space-8);
  max-width: 40rem;
  color: var(--muted);
  line-height: 1.5;
}

.lp-split {
  display: grid;
  gap: var(--ca-space-8);
  align-items: center;
}

@media (min-width: 900px) {
  .lp-split {
    grid-template-columns: 1fr 1fr;
  }

  .lp-split--hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.lp-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ca-space-4) var(--ca-space-8);
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-logos__item {
  min-width: 5.5rem;
  height: 2.25rem;
  border-radius: var(--ca-radius-sm);
  background: color-mix(in oklab, var(--glass-fill) 80%, transparent);
  border: 1px solid color-mix(in oklab, var(--glass-border) 70%, transparent);
}

.lp-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: var(--ca-space-6);
  border-radius: var(--ca-radius-md);
  border: 1px dashed color-mix(in oklab, var(--glass-border) 90%, var(--accent));
  background: color-mix(in oklab, var(--glass-fill) 70%, transparent);
  color: var(--muted);
  font-size: var(--ca-font-size-sm);
  text-align: center;
  text-wrap: balance;
}

.lp-slot--tall {
  min-height: 22rem;
}

.lp-slot--hero {
  min-height: min(28rem, 55dvh);
}

.lp-slot--phone {
  min-height: 28rem;
  max-width: 16rem;
  margin-inline: auto;
  border-radius: var(--ca-radius-lg);
}

.lp-bento {
  display: grid;
  gap: var(--ca-space-4);
}

@media (min-width: 720px) {
  .lp-bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(8rem, auto);
  }

  .lp-bento > :nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
  }

  .lp-bento > :nth-child(2) {
    grid-column: span 2;
  }
}

.lp-masonry {
  display: grid;
  gap: var(--ca-space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .lp-masonry {
    grid-template-columns: repeat(3, 1fr);
  }

  .lp-masonry > :nth-child(2) {
    margin-block-start: var(--ca-space-8);
  }

  .lp-masonry > :nth-child(3) {
    margin-block-start: var(--ca-space-4);
  }
}

.lp-metrics {
  display: grid;
  gap: var(--ca-space-4);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-metrics__value {
  display: block;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.lp-metrics__value.ca-scramble {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.lp-metrics__label {
  display: block;
  margin-top: var(--ca-space-1);
  color: var(--muted);
  font-size: var(--ca-font-size-sm);
}

.lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ca-space-2);
  list-style: none;
  margin: 0 0 var(--ca-space-6);
  padding: 0;
}

.lp-article-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ca-space-3);
}

.lp-article-list a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.lp-gallery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ca-space-2) var(--ca-space-3);
  margin-bottom: var(--ca-space-3);
}

.lp-gallery-head .lp-section-title {
  margin: 0;
}

.lp-gallery-count {
  margin: 0;
  font-size: var(--ca-font-size-sm);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.lp-gallery-index {
  display: grid;
  gap: var(--ca-space-4);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .lp-gallery-index {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .lp-gallery-index {
    grid-template-columns: repeat(3, 1fr);
  }
}

.lp-gallery-index > li {
  min-width: 0;
  display: flex;
}

.lp-gallery-index .card,
.lp-gallery-card {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lp-gallery-index .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--ca-space-2);
}

.lp-gallery-index .card-title {
  font-size: var(--ca-font-size-lg);
  margin: 0;
}

.lp-gallery-index .card-sub {
  margin: 0;
  min-height: 0;
  color: var(--muted);
  line-height: 1.45;
  flex: 1 1 auto;
}

.lp-gallery-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ca-space-2);
}

.lp-gallery-index__num {
  font-size: var(--ca-font-size-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.lp-gallery-card__tag {
  font-size: var(--ca-font-size-xs, 0.75rem);
  font-weight: 550;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--color-accent-2) 72%, var(--muted));
}

.lp-gallery-card__open {
  display: inline-flex;
  align-items: center;
  gap: var(--ca-space-1);
  margin-top: var(--ca-space-2);
  font-size: var(--ca-font-size-sm);
  font-weight: 550;
  color: var(--color-accent-2);
}

.lp-gallery-card__open .ui-icon {
  width: 0.85rem;
  height: 0.85rem;
  mask-image: url(/examples/icons/chevron-right.svg);
  -webkit-mask-image: url(/examples/icons/chevron-right.svg);
  background-color: currentColor;
  transition: transform var(--ca-duration-fast) ease;
}

.lp-gallery-card:hover .lp-gallery-card__open .ui-icon,
.lp-gallery-card:focus-within .lp-gallery-card__open .ui-icon {
  transform: translateX(0.15rem);
}

html[dir='rtl'] .lp-gallery-card:hover .lp-gallery-card__open .ui-icon,
html[dir='rtl'] .lp-gallery-card:focus-within .lp-gallery-card__open .ui-icon {
  transform: translateX(-0.15rem);
}

/* CSS wireframe previews — section silhouettes, no screenshots. */
.lp-gallery-card__preview {
  --lp-wire: color-mix(in oklab, var(--color-fg) 28%, var(--glass-border));
  position: relative;
  height: 7.25rem;
  flex-shrink: 0;
  margin: var(--ca-space-3) var(--ca-space-3) 0;
  border-radius: var(--ca-radius-sm);
  border: 1px solid color-mix(in oklab, var(--glass-border) 80%, transparent);
  background:
    linear-gradient(
      160deg,
      color-mix(in oklab, var(--glass-fill) 88%, var(--color-accent) 8%),
      color-mix(in oklab, var(--color-bg-elevated) 70%, transparent)
    );
  overflow: hidden;
}

.lp-gallery-card__preview::before,
.lp-gallery-card__preview::after {
  content: '';
  position: absolute;
  border-radius: 2px;
  background: var(--lp-wire);
  opacity: 0.9;
}

/* saas — wide hero + logo row + two columns */
.lp-gallery-card__preview[data-lp-preview='saas']::before {
  inset: 12% 10% auto;
  height: 28%;
  width: 80%;
}

.lp-gallery-card__preview[data-lp-preview='saas']::after {
  inset: auto 10% 14%;
  height: 22%;
  width: 80%;
  background:
    linear-gradient(
      90deg,
      var(--lp-wire) 0 30%,
      transparent 30% 35%,
      var(--lp-wire) 35% 65%,
      transparent 65% 70%,
      var(--lp-wire) 70% 100%
    );
}

/* mockup — centered block + benefit row */
.lp-gallery-card__preview[data-lp-preview='mockup']::before {
  inset: 10% 22% auto;
  width: 56%;
  height: 42%;
  border-radius: 4px;
}

.lp-gallery-card__preview[data-lp-preview='mockup']::after {
  inset: auto 12% 12%;
  height: 16%;
  width: 76%;
  background:
    linear-gradient(
      90deg,
      var(--lp-wire) 0 28%,
      transparent 28% 36%,
      var(--lp-wire) 36% 64%,
      transparent 64% 72%,
      var(--lp-wire) 72% 100%
    );
}

/* fintech — phone + side stack */
.lp-gallery-card__preview[data-lp-preview='fintech']::before {
  inset: 10% auto 10% 14%;
  width: 28%;
  height: auto;
  border-radius: 8px;
}

.lp-gallery-card__preview[data-lp-preview='fintech']::after {
  inset: 14% 12% 14% auto;
  width: 40%;
  height: auto;
  background:
    linear-gradient(
      180deg,
      var(--lp-wire) 0 28%,
      transparent 28% 36%,
      var(--lp-wire) 36% 64%,
      transparent 64% 72%,
      var(--lp-wire) 72% 100%
    );
}

/* healthcare — calm vertical bands */
.lp-gallery-card__preview[data-lp-preview='healthcare']::before {
  inset: 12% 14% auto;
  width: 72%;
  height: 18%;
}

.lp-gallery-card__preview[data-lp-preview='healthcare']::after {
  inset: auto 14% 12%;
  width: 72%;
  height: 42%;
  background:
    linear-gradient(
      180deg,
      var(--lp-wire) 0 28%,
      transparent 28% 38%,
      var(--lp-wire) 38% 66%,
      transparent 66% 76%,
      var(--lp-wire) 76% 100%
    );
}

/* agency — brand bar + masonry tiles */
.lp-gallery-card__preview[data-lp-preview='agency']::before {
  inset: 10% 10% auto;
  width: 40%;
  height: 14%;
}

.lp-gallery-card__preview[data-lp-preview='agency']::after {
  inset: auto 10% 12%;
  width: 80%;
  height: 48%;
  background:
    linear-gradient(
      90deg,
      var(--lp-wire) 0 30%,
      transparent 30% 36%,
      var(--lp-wire) 36% 64%,
      transparent 64% 70%,
      var(--lp-wire) 70% 100%
    );
}

/* creator — immersive full panel */
.lp-gallery-card__preview[data-lp-preview='creator']::before {
  inset: 8% 8%;
  width: auto;
  height: auto;
  border-radius: 4px;
  opacity: 0.4;
}

.lp-gallery-card__preview[data-lp-preview='creator']::after {
  inset: auto 12% 16%;
  width: 42%;
  height: 12%;
  opacity: 0.85;
}

/* editorial — search + list rows */
.lp-gallery-card__preview[data-lp-preview='editorial']::before {
  inset: 12% 12% auto;
  width: 76%;
  height: 16%;
  border-radius: 999px;
}

.lp-gallery-card__preview[data-lp-preview='editorial']::after {
  inset: auto 12% 12%;
  width: 76%;
  height: 44%;
  background:
    linear-gradient(
      180deg,
      var(--lp-wire) 0 18%,
      transparent 18% 28%,
      var(--lp-wire) 28% 46%,
      transparent 46% 56%,
      var(--lp-wire) 56% 74%,
      transparent 74% 84%,
      var(--lp-wire) 84% 100%
    );
}

/* utility — triad cards */
.lp-gallery-card__preview[data-lp-preview='utility']::before {
  inset: 12% 12% auto;
  width: 76%;
  height: 22%;
}

.lp-gallery-card__preview[data-lp-preview='utility']::after {
  inset: auto 12% 14%;
  width: 76%;
  height: 36%;
  background:
    linear-gradient(
      90deg,
      var(--lp-wire) 0 28%,
      transparent 28% 36%,
      var(--lp-wire) 36% 64%,
      transparent 64% 72%,
      var(--lp-wire) 72% 100%
    );
}

/* services — process steps row */
.lp-gallery-card__preview[data-lp-preview='services']::before {
  inset: 14% 12% auto;
  width: 55%;
  height: 16%;
}

.lp-gallery-card__preview[data-lp-preview='services']::after {
  inset: auto 12% 16%;
  width: 76%;
  height: 28%;
  background:
    linear-gradient(
      90deg,
      var(--lp-wire) 0 18%,
      transparent 18% 28%,
      var(--lp-wire) 28% 46%,
      transparent 46% 56%,
      var(--lp-wire) 56% 74%,
      transparent 74% 84%,
      var(--lp-wire) 84% 100%
    );
}

/* commerce — full-bleed band + product grid */
.lp-gallery-card__preview[data-lp-preview='commerce']::before {
  inset: 0 0 auto;
  width: 100%;
  height: 38%;
  border-radius: 0;
  opacity: 0.45;
}

.lp-gallery-card__preview[data-lp-preview='commerce']::after {
  inset: auto 10% 12%;
  width: 80%;
  height: 34%;
  background:
    linear-gradient(
      90deg,
      var(--lp-wire) 0 22%,
      transparent 22% 28%,
      var(--lp-wire) 28% 50%,
      transparent 50% 56%,
      var(--lp-wire) 56% 78%,
      transparent 78% 84%,
      var(--lp-wire) 84% 100%
    );
}

.lp-cta-band {
  text-align: center;
}

.lp-cta-band .lp-section-lede {
  margin-inline: auto;
}

.lp-cta-band .lp-hero__actions {
  justify-content: center;
}

.lp .docs-site-footer {
  margin-top: 0;
}

/* Sticky island / default navbar — keep hash targets below the bar. */
.lp .lp-section[id],
.lp .lp-hero[id] {
  scroll-margin-top: calc(5.25rem + env(safe-area-inset-top, 0px));
}

.lp .ui-navbar + main .lp-hero {
  padding-block-start: calc(var(--ca-space-20) + 2rem);
}