/* Landing page isolation and phone-first layout refinements. */
.lenspire-site {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.lenspire-site main {
  padding: 0;
}

.lenspire-site .ls-nav {
  height: var(--header-h);
  padding: 0;
  border: 0;
  position: relative;
  top: auto;
  z-index: 1;
  background: transparent;
  backdrop-filter: none;
  box-shadow: 0 1px 0 #ebe6f0;
}

.lenspire-site .ls-footer {
  text-align: left;
}

.ls-hero h1 {
  line-height: 1.1;
}

.ls-section-title h2,
.ls-features h2,
.ls-how h2,
.ls-cta h2 {
  line-height: 1.1;
}

.ls-hero h1,
.ls-section-title h2,
.ls-features h2,
.ls-how h2,
.ls-cta h2 {
  letter-spacing: -1.4px;
}

.ls-brand-lockup {
  display: grid;
  gap: var(--space-1);
}

.ls-brand-lockup span {
  padding: var(--space-1);
  color: #8c8298;
  font-size: 8px;
  font-weight:800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.ls-nav .ls-desktop-nav {
  align-items: center;
  gap: var(--space-7);
}

.ls-nav .ls-desktop-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: #354052;
  font-size: 14px;
  font-weight:700;
  white-space: nowrap;
}

.ls-nav .ls-desktop-nav a span {
  color: #5c506d;
  font-size: 17px;
  font-weight:500;
  line-height: 1;
  transform: translateY(-1px);
}

.ls-feature-menu,
.ls-events-menu {
  position: relative;
}

.ls-feature-menu summary,
.ls-events-menu summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: #354052;
  cursor: pointer;
  font-size: 14px;
  font-weight:700;
  list-style: none;
  white-space: nowrap;
}

.ls-feature-menu summary::-webkit-details-marker,
.ls-events-menu summary::-webkit-details-marker {
  display: none;
}

.ls-feature-menu summary span,
.ls-events-menu summary span {
  color: #5c506d;
  font-size: 17px;
  font-weight:500;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 180ms ease;
}

.ls-feature-menu summary:focus-visible,
.ls-events-menu summary:focus-visible {
  outline: 2px solid #8b5cc4;
  outline-offset: 6px;
}

.ls-feature-menu[open] summary,
.ls-events-menu[open] summary {
  color: #7545b6;
}

.ls-feature-menu[open] summary span,
.ls-events-menu[open] summary span {
  transform: translateY(-1px) rotate(180deg);
}

.ls-feature-panel {
  position: absolute;
  top: calc(100% + 19px);
  left: -27px;
  z-index: 25;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-7);
  width: 610px;
  padding: var(--space-7) var(--space-7);
  border: 1px solid #e9e2f0;
  border-radius: var(--space-4);
  background: #fff;
  box-shadow: 0 22px 48px #38204f22;
}

.ls-nav .ls-feature-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-1);
  border-radius: var(--space-3);
  color: #332c3c;
  text-decoration: none;
  white-space: normal;
  transition: background-color 180ms ease, transform 180ms ease;
}

.ls-nav .ls-feature-item > .ls-feature-icon {
  display: grid;
  place-items: center;
  min-height: 21px;
  margin: var(--space-1);
  color: #7545b6;
  font-size: 19px;
  font-weight:700;
  line-height: 1;
  transform: none;
}

.ls-nav .ls-feature-item > span:not(.ls-feature-icon) {
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: normal;
  transform: none;
}

.ls-feature-item b {
  display: block;
  margin: var(--space-1);
  color: #7044aa;
  font-size: 14px;
  line-height: 1.2;
}

.ls-feature-item small {
  display: block;
  color: #756d7d;
  font-size: 12px;
  font-weight:500;
  line-height: 1.35;
}

.ls-event-panel {
  position: absolute;
  top: calc(100% + 19px);
  left: -130px;
  z-index: 25;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--space-8);
  width: 650px;
  padding: var(--space-7) var(--space-7);
  border: 1px solid #e9e2f0;
  border-radius: var(--space-4);
  background: #fff;
  box-shadow: 0 22px 48px #38204f22;
}

.ls-nav .ls-event-item {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-1);
  border-radius: var(--space-3);
  color: #332c3c;
  text-decoration: none;
  white-space: normal;
  transition: background-color 180ms ease, transform 180ms ease;
}

.ls-nav .ls-event-item > .ls-event-thumb {
  display: block;
  width: 80px;
  height: 60px;
  border-radius: var(--space-2);
  background-image: url("/static/event-menu-thumbnails.jpg");
  background-repeat: no-repeat;
  background-size: 200% 200%;
  box-shadow: inset 0 0 0 1px #2f23351a;
  transform: none;
}

.ls-event-thumb--wedding {
  background-position: left top;
}

.ls-event-thumb--corporate {
  background-position: right top;
}

.ls-event-thumb--campus {
  background-position: left bottom;
}

.ls-event-thumb--live {
  background-position: right bottom;
}

.ls-nav .ls-event-item > span:not(.ls-event-thumb) {
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: normal;
  transform: none;
}

.ls-event-item b {
  display: block;
  margin: var(--space-1);
  color: #7044aa;
  font-size: 14px;
  line-height: 1.2;
}

.ls-event-item small {
  display: block;
  color: #756d7d;
  font-size: 12px;
  font-weight:500;
  line-height: 1.35;
}

@media (hover: hover) and (pointer: fine) {
  .ls-nav .ls-feature-item:hover {
    background: #f8f3fc;
    transform: translateX(2px);
  }

  .ls-nav .ls-event-item:hover {
    background: #f8f3fc;
    transform: translateX(2px);
  }
}

.ls-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.ls-demo,
.ls-nav .ls-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--space-2);
  padding: 0 var(--space-5);
  font-size: 14px;
  font-weight:800;
  text-decoration: none;
  white-space: nowrap;
}

.ls-demo {
  background: #f0ad3d;
  color: #211e2a;
  box-shadow: inset 0 0 0 1px #e8a332;
}

.ls-nav .ls-login {
  border: 0;
  background: #7148a7;
  color: #fff;
}

.ls-nav .ls-login span {
  color: #fff;
  opacity: 0.88;
}

.ls-mobile-toggle,
.ls-mobile-menu {
  display: none;
}

.ls-mobile-toggle {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border: 1px solid #ded6e7;
  border-radius: var(--space-3);
  background: #fff;
  color: #4d2d74;
  cursor: pointer;
}

.ls-mobile-toggle span {
  display: block;
  width: 17px;
  height: 2px;
  margin: var(--space-1) auto;
  border-radius: var(--space-1);
  background: currentColor;
}

.ls-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--space-5) min(7vw, var(--space-7)) var(--space-7);
  background: linear-gradient(155deg, #fff 0%, #faf7fd 58%, #f2eafa 100%);
}

.ls-mobile-menu:not([hidden]) {
  display: flex;
}

.ls-mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 1px solid #e7dfea;
}

.ls-mobile-close {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #ded6e7;
  border-radius: var(--space-3);
  background: #fff;
  color: #5d3a85;
  cursor: pointer;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
}

.ls-mobile-menu nav {
  display: grid;
  gap: 0;
  padding: var(--space-5) 0;
}

.ls-mobile-menu nav > a,
.ls-mobile-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  border-bottom: 1px solid #e9e2ef;
  color: #302a3b;
  font-size: 16px;
  font-weight:700;
  text-decoration: none;
}

.ls-mobile-group summary {
  cursor: pointer;
  list-style: none;
}

.ls-mobile-group summary::-webkit-details-marker {
  display: none;
}

.ls-mobile-group summary span {
  color: #7545b6;
  font-size: 20px;
  font-weight:500;
  transition: transform 180ms ease;
}

.ls-mobile-group[open] summary span {
  transform: rotate(180deg);
}

.ls-mobile-group > div {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) 0 var(--space-3) var(--space-4);
  border-bottom: 1px solid #e9e2ef;
}

.ls-mobile-group > div a {
  display: flex;
  align-items: center;
  min-height: 39px;
  color: #71687b;
  font-size: 14px;
  font-weight:700;
  text-decoration: none;
}

.ls-mobile-menu-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: auto;
  padding: var(--space-5);
}

.ls-mobile-menu .ls-demo,
.ls-mobile-menu .ls-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: var(--space-3);
  padding: 0 var(--space-3);
  color: #211e2a;
  font-size: 13px;
  font-weight:800;
  text-decoration: none;
}

.ls-mobile-menu .ls-login {
  background: #7148a7;
  color: #fff;
}

.ls-mobile-menu .ls-login span {
  margin: var(--space-2);
}

.ls-mobile-menu > p {
  margin: var(--space-5) 0 0;
  color: #8b8194;
  font-size: 11px;
  font-weight:700;
  letter-spacing: 0.8px;
  text-align: center;
  text-transform: uppercase;
}

.lenspire-site.ls-mobile-menu-open {
  overflow: hidden;
}

@media (max-width: 1050px) {
  .ls-nav .ls-desktop-nav {
    display: none;
  }

  .ls-mobile-toggle {
    display: block;
  }
}

@media (max-width: 900px) {
  .ls-hero {
    min-height: 0;
  }
}

@media (max-width: 600px) {
  .lenspire-site .ls-nav {
    height: 64px;
    justify-content: flex-start;
    gap: var(--space-1);
    box-shadow: 0 1px 0 #ebe6f0;
  }

  .lenspire-site .ls-nav > .ls-brand {
    margin-right: auto;
  }

  .lenspire-site .ls-nav-actions {
    flex: 0 0 auto;
  }

  .ls-brand img {
    width: 112px;
    height: auto;
  }

  .ls-brand-lockup span {
    display: none;
  }

  .ls-demo {
    display: inline-flex;
    min-height: 38px;
    padding: 0 var(--space-3);
    font-size: 11px;
  }

  .ls-nav .ls-login {
    min-height: 38px;
    padding: var(--space-3) var(--space-3);
    font-size: 11px;
  }

  .ls-nav-actions {
    gap: var(--space-2);
  }

  .ls-mobile-toggle {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .ls-mobile-menu .ls-brand img {
    width: 142px;
  }

  .ls-hero {
    gap: var(--space-8);
    padding: var(--space-7) 0 var(--space-10);
  }

  .ls-kicker {
    margin: var(--space-4);
    font-size: 10px;
    letter-spacing: 1.25px;
  }

  .ls-hero h1 {
    font-size: clamp(42px, 12vw, 50px);
    line-height: 1.1;
    letter-spacing:-1px;
  }

  .ls-lede {
    margin: var(--space-6) 0 var(--space-6);
    font-size: 15px;
    line-height: 1.6;
  }

  .ls-hero-actions {
    display: grid;
    justify-items: start;
    gap: var(--space-4);
    width: 100%;
  }

  .ls-primary {
    width: 100%;
    min-width: 0;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  }

  .ls-text-link {
    padding: var(--space-1);
    font-size: 13px;
  }

  .ls-trust {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: var(--space-3) var(--space-4);
    margin: var(--space-6);
    font-size: 10.5px;
  }

  .ls-product-preview {
    height: 360px;
    border-radius: var(--space-4);
  }

  .ls-preview-top {
    height: 50px;
    padding: 0 var(--space-4);
  }

  .ls-preview-top span {
    font-size: 10px;
  }

  .ls-preview-top b {
    font-size: 10px;
  }

  .ls-product-preview aside {
    inset: 50px auto 0 0;
    width: 73px;
    padding: var(--space-4) var(--space-2);
    gap: var(--space-3);
    font-size: 9px;
  }

  .ls-product-preview aside strong {
    font-size: 10px;
  }

  .ls-product-preview aside .active {
    padding: var(--space-2);
  }

  .ls-preview-main {
    margin: var(--space-11);
    padding: var(--space-4);
  }

  .ls-preview-main h2 {
    margin: var(--space-2) 0 var(--space-3);
    font-size: 20px;
  }

  .ls-dropzone {
    height: 110px;
    font-size: 11px;
  }

  .ls-dropzone b {
    font-size: 27px;
  }

  .ls-upload-row {
    margin: var(--space-3);
    gap: var(--space-2);
    font-size: 9px;
  }

  .ls-table {
    margin: var(--space-3);
    padding: var(--space-3);
    gap: var(--space-2);
    font-size: 9px;
  }

  .ls-float-card {
    right: 7px;
    bottom: 10px;
    padding: var(--space-3) var(--space-3);
  }

  .ls-float-card b {
    font-size: 19px;
  }

  .ls-sections {
    gap: var(--space-7);
    padding: var(--space-11) 0 var(--space-10);
  }

  .ls-section-title h2,
  .ls-features h2,
  .ls-how h2,
  .ls-cta h2 {
    font-size: clamp(36px, 10vw, 45px);
    line-height: 1.1;
    letter-spacing:-1px;
  }

  .ls-section-title h2,
  .ls-features h2,
  .ls-how h2,
  .ls-cta h2 {
    line-height: 1.1;
  }

  .ls-section-title h2 br,
  .ls-features h2 br,
  .ls-how h2 br,
  .ls-cta h2 br {
    display: none;
  }

  .ls-section-title > p:last-child {
    margin: var(--space-5) 0;
    font-size: 14px;
    line-height: 1.6;
  }

  .ls-audience-grid {
    gap: var(--space-3);
  }

  .ls-audience-grid article {
    min-height: 0;
    padding: var(--space-5);
  }

  .ls-audience-grid h3 {
    margin: var(--space-5) 0 var(--space-2);
  }

  .ls-audience-grid p {
    margin: 0 0 var(--space-5);
  }

  .ls-features {
    gap: var(--space-8);
    padding: var(--space-10) 0;
  }

  .ls-feature-copy > p:not(.ls-kicker) {
    font-size: 14px;
  }

  .ls-feature-list {
    margin: var(--space-6);
    gap: var(--space-3);
    font-size: 12px;
  }

  .ls-feature-stack {
    gap: var(--space-3);
  }

  .ls-feature-main {
    grid-row: auto;
    min-height: 310px;
    padding: var(--space-6);
  }

  .ls-face-orb {
    width: 142px;
    height: 142px;
    margin: var(--space-1) auto var(--space-7);
    font-size: 64px;
  }

  .ls-feature-main h3 {
    font-size: 22px;
  }

  .ls-mini-card {
    min-height: 124px;
    padding: var(--space-5);
  }

  .ls-how {
    padding: var(--space-11) 0 var(--space-11);
  }

  .ls-how h2 {
    margin: var(--space-8);
  }

  .ls-steps {
    gap: var(--space-3);
  }

  .ls-steps article {
    padding: var(--space-4) var(--space-2);
  }

  .ls-steps h3 {
    margin: var(--space-4) 0 var(--space-2);
  }

  .ls-cta {
    margin: var(--space-8);
    padding: var(--space-8) var(--space-6);
    border-radius: var(--space-4);
  }

  .ls-cta .ls-primary {
    margin: var(--space-6);
  }

  .ls-footer {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-7) 0 var(--space-8);
  }

  .ls-footer a:last-child {
    margin: 0;
  }
}

@media (max-width: 360px) {
  .ls-brand img {
    width: 100px;
  }

  .ls-demo {
    padding: 0 var(--space-3);
    font-size: 10px;
  }

  .ls-nav .ls-login {
    padding: var(--space-2) var(--space-3);
    font-size: 10px;
  }

  .ls-login span {
    padding: var(--space-1);
  }

  .ls-mobile-toggle {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .ls-trust {
    grid-template-columns: 1fr;
    font-size: 10px;
  }

  .ls-product-preview {
    height: 346px;
  }

  .ls-preview-main {
    padding: var(--space-4);
  }

  .ls-dropzone {
    height: 102px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes lenspire-rise-in {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes lenspire-card-in {
    from {
      opacity: 0;
      transform: translateY(26px) scale(0.975);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes lenspire-float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-7px);
    }
  }

  @keyframes lenspire-progress {
    0%,
    100% {
      opacity: 0.62;
    }
    50% {
      opacity: 1;
    }
  }

  .ls-hero-copy > * {
    opacity: 0;
    animation: lenspire-rise-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .ls-hero-copy > :nth-child(1) {
    animation-delay: 70ms;
  }

  .ls-hero-copy > :nth-child(2) {
    animation-delay: 140ms;
  }

  .ls-hero-copy > :nth-child(3) {
    animation-delay: 220ms;
  }

  .ls-hero-copy > :nth-child(4) {
    animation-delay: 300ms;
  }

  .ls-hero-copy > :nth-child(5) {
    animation-delay: 380ms;
  }

  .ls-product-preview {
    animation: lenspire-card-in 850ms cubic-bezier(0.22, 1, 0.36, 1) 240ms both;
  }

  .ls-float-card {
    animation: lenspire-float 3.8s ease-in-out 1.2s infinite;
  }

  .ls-upload-row i,
  .ls-progress span i {
    animation: lenspire-progress 2.4s ease-in-out infinite;
  }

  .ls-primary,
  .ls-demo,
  .ls-nav .ls-login,
  .ls-audience-grid article {
    transition: transform 180ms ease, box-shadow 180ms ease;
  }

  .ls-primary:hover,
  .ls-demo:hover,
  .ls-nav .ls-login:hover {
    transform: translateY(-2px);
  }

  .ls-audience-grid article:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px #3e1b5d14;
  }
}

@media (hover: hover) and (pointer: fine) {
  .ls-feature-main,
  .ls-mini-card,
  .ls-steps article,
  .ls-product-preview {
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }

  .ls-feature-main:hover,
  .ls-mini-card:hover,
  .ls-steps article:hover {
    transform: translateY(-4px);
    border-color: #b99ad9;
    box-shadow: 0 18px 34px #3e1b5d16;
  }

  .ls-product-preview:hover {
    border-color: #c6a9df;
    box-shadow: 0 30px 78px #39205e26;
  }
}

/* Softly distinguish the four delivery steps without making the process feel busy. */
.ls-steps article { border: 1px solid #e6dfea; border-radius: var(--space-4); }
.ls-steps article:nth-child(1) { background: linear-gradient(135deg, #fdfaff 0%, #f5efff 100%); border-color: #e5d8f0; }
.ls-steps article:nth-child(2) { background: linear-gradient(135deg, #fbfcff 0%, #eff4ff 100%); border-color: #dce4f3; }
.ls-steps article:nth-child(3) { background: linear-gradient(135deg, #fffafd 0%, #fff1f7 100%); border-color: #f0dce7; }
.ls-steps article:nth-child(4) { background: linear-gradient(135deg, #fbfefc 0%, #effaf3 100%); border-color: #d9ecdf; }

/* A light, full-width pastel field gives the delivery process its own calm visual moment. */
.ls-how {
  width: 100vw;
  margin-block: 0;
  margin-inline: calc((100% - 100vw) / 2);
  padding: var(--space-12) 0 var(--space-12);
  border-block: 1px solid #eee7f4;
  background:
    radial-gradient(circle at 12% 19%, #eee4fa 0, transparent 25%),
    radial-gradient(circle at 84% 26%, #e8f3ff 0, transparent 24%),
    radial-gradient(circle at 64% 92%, #fff0e3 0, transparent 28%),
    #fbfaff;
}

.ls-how > * {
  width: min(var(--container), calc(100vw - var(--gutter) * 2));
  margin: auto;
}

.ls-how h2 em {
  font-style: normal;
  background: linear-gradient(90deg, #663cb0, #bd59c9, #d89955);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 600px) {
  .ls-how { padding: var(--space-11) 0 var(--space-11); }
}

/* A small, original workflow animation in the hero: create, upload, then share. */
.ls-preview-main { position: relative; }
.ls-preview-stages { position: relative; height: 348px; }
.ls-preview-stage { position: absolute; inset: 0; opacity: 0; transform: translateX(22px) scale(.985); }
.ls-preview-stage--event { opacity: 1; transform: none; }
.ls-preview-stage h2 { margin: var(--space-2) 0 var(--space-4); }
.ls-demo-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ls-demo-field { display: grid; gap: var(--space-1); min-height: 46px; padding: var(--space-2) var(--space-3); border: 1px solid #e7e0ee; border-radius: var(--space-2); background: #fff; }
.ls-demo-field--wide, .ls-demo-toggles, .ls-demo-action { grid-column: 1 / -1; }
.ls-demo-field span { color: #93899d; font-size: 8px; font-weight:700; }
.ls-demo-field b { color: #4c4058; font-size: 10px; }
.ls-demo-toggles { display: flex; gap: var(--space-2); }
.ls-demo-toggles span { display: flex; flex: 1; align-items: center; justify-content: space-between; padding: var(--space-2); border-radius: var(--space-2); background: #f8f4fb; color: #675b73; font-size: 9px; }
.ls-demo-toggles i { border-radius: var(--space-12); padding: var(--space-1) var(--space-2); background: #e4d3f3; color: #7040aa; font-size: 7px; font-style: normal; font-weight:800; }
.ls-demo-action { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 0 var(--space-3); border-radius: var(--space-2); background: linear-gradient(100deg, #693db0, #9b4bc5); color: #fff; font-size: 10px; }
.ls-demo-action i { display: grid; width: 17px; height: 17px; place-items: center; border: 1px solid #d9bbef; border-radius: 50%; font-style: normal; }
.ls-demo-share { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-2) 0 0; text-align: center; }
.ls-demo-share .ls-qr { width: 128px; height: 128px; margin: 0; padding: var(--space-3); box-shadow: 0 10px 22px #3e1b5d12; }
.ls-demo-share > b { color: #4d3c5b; font-size: 11px; }
.ls-demo-share > span { display: flex; align-items: center; gap: var(--space-2); color: #7c7188; font-size: 9px; }
.ls-demo-share > span i { display: grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; background: #d8efdd; color: #3f8452; font-size: 9px; font-style: normal; }

@media (prefers-reduced-motion: no-preference) {
  .ls-preview-stage { animation: lenspire-preview-stage 12s ease-in-out infinite both; }
  .ls-preview-stage--event { animation-name: lenspire-preview-stage-one; }
  .ls-preview-stage--upload { animation-name: lenspire-preview-stage-two; }
  .ls-preview-stage--share { animation-name: lenspire-preview-stage-three; }

  @keyframes lenspire-preview-stage-one {
    0%, 29% { opacity: 1; transform: translateX(0) scale(1); }
    34%, 96% { opacity: 0; transform: translateX(-22px) scale(.985); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
  }

  @keyframes lenspire-preview-stage-two {
    0%, 29% { opacity: 0; transform: translateX(22px) scale(.985); }
    34%, 62% { opacity: 1; transform: translateX(0) scale(1); }
    67%, 100% { opacity: 0; transform: translateX(-22px) scale(.985); }
  }

  @keyframes lenspire-preview-stage-three {
    0%, 62% { opacity: 0; transform: translateX(22px) scale(.985); }
    67%, 96% { opacity: 1; transform: translateX(0) scale(1); }
    100% { opacity: 0; transform: translateX(-22px) scale(.985); }
  }
}

@media (max-width: 600px) {
  .ls-preview-stages { height: 282px; }
  .ls-demo-form { gap: var(--space-2); }
  .ls-demo-field { min-height: 42px; padding: var(--space-2); }
  .ls-demo-toggles span { padding: var(--space-2); font-size: 8px; }
  .ls-demo-share { gap: var(--space-2); }
  .ls-demo-share .ls-qr { width: 112px; height: 112px; }
}

/* Expanded landing experience: original Lenspire content and interactions. */
.lenspire-site {
  overflow-x: hidden;
}

.lenspire-site main > section {
  scroll-margin-top: 88px;
}

.ls-audience-grid--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ls-audience-grid--four article {
  min-height: 0;
  padding: 0 0 var(--space-5);
  overflow: hidden;
}

.ls-audience-grid--four h3,
.ls-audience-grid--four p,
.ls-audience-grid--four a {
  margin: var(--space-5);
}

.ls-audience-grid--four h3 {
  margin: var(--space-5);
}

.ls-audience-grid--four p {
  margin: var(--space-4);
}

.ls-audience-grid--four article > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid rgba(124, 58, 237, .18);
  border-radius: 11px;
  background: linear-gradient(135deg, #7133c7, #a33ce0);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 7px 16px rgba(124, 58, 237, .18);
  transition: transform .18s ease, box-shadow .18s ease;
}

.ls-audience-grid--four article > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(124, 58, 237, .25);
}

.ls-audience-photo,
.ls-gallery-photo,
.ls-row-photo {
  display: block;
  flex: 0 0 auto;
  background-image: url("/static/event-menu-thumbnails.jpg");
  background-repeat: no-repeat;
  background-size: 200% 200%;
}

.ls-audience-photo {
  height: 105px;
  border-bottom: 1px solid #eee8f2;
}

.ls-experience {
  width: min(var(--container), calc(100vw - var(--gutter) * 2));
  margin: 0 auto;
  padding: var(--space-12) 0 var(--space-12);
}

.ls-experience-intro,
.ls-gallery-heading,
.ls-notes-heading {
  max-width: 630px;
}

.ls-experience h2,
.ls-gallery-showcase h2,
.ls-ai-showcase h2,
.ls-workflow-proof h2,
.ls-pricing h2,
.ls-studio-notes h2,
.ls-faq h2 {
  margin: 0;
  color: #282334;
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight:800;
  letter-spacing: -1.5px;
  line-height: 1.1;
}

.ls-section-title h2 em,
.ls-experience h2 em,
.ls-gallery-showcase h2 em,
.ls-ai-showcase h2 em,
.ls-pricing h2 em,
.ls-studio-notes h2 em,
.ls-faq h2 em {
  font-style: normal;
  background: linear-gradient(90deg, #663cb0, #bd59c9, #d89955);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ls-experience-intro > p:last-child,
.ls-gallery-heading > p:last-child,
.ls-notes-heading > p:last-child,
.ls-faq-heading > p:last-child,
.ls-workflow-proof > div > p:last-child,
.ls-pricing-card > div > p:last-child,
.ls-ai-copy > p:not(.ls-kicker) {
  margin: var(--space-5) 0 0;
  color: #746c7c;
  font-size: 15px;
  line-height: 1.7;
}

.ls-experience-tabs {
  display: flex;
  width: max-content;
  max-width: 100%;
  gap: var(--space-1);
  margin: var(--space-9) 0 var(--space-6);
  padding: var(--space-2);
  overflow-x: auto;
  border: 1px solid #e6deec;
  border-radius: var(--space-3);
  background: #faf8fc;
}

.ls-experience-tabs button {
  min-height: 43px;
  border: 0;
  border-radius: var(--space-2);
  padding: 0 var(--space-5);
  background: transparent;
  color: #6d6476;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight:700;
  white-space: nowrap;
}

.ls-experience-tabs button[aria-selected="true"] {
  background: #fff;
  box-shadow: 0 5px 14px #3e1b5d14;
  color: #7044aa;
}

.ls-experience-tabs button:focus-visible,
.ls-faq-list summary:focus-visible {
  outline: 2px solid #8754bb;
  outline-offset: 3px;
}

.ls-experience-panel {
  display: grid;
  grid-template-columns: minmax(330px, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(var(--space-8), 7vw, var(--space-12));
  min-height: 492px;
  overflow: hidden;
  border: 1px solid #e7e0ed;
  border-radius: var(--space-6);
  padding: clamp(var(--space-7), 4vw, var(--space-10));
  background: linear-gradient(130deg, #f1ebfb 0%, #fff 58%, #f9f2fb 100%);
}

.ls-experience-panel[hidden] {
  display: none;
}

.ls-experience-copy {
  max-width: 470px;
}

.ls-experience-number {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: var(--space-3);
  background: #ede3f8;
  color: #7545b6;
  font-size: 12px;
  font-weight:800;
}

.ls-experience-copy h3 {
  margin: var(--space-5) 0 var(--space-3);
  color: #2b2534;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -1.15px;
  line-height: 1.1;
}

.ls-experience-copy p {
  margin: 0;
  color: #716979;
  font-size: 14px;
  line-height: 1.72;
}

.ls-experience-copy ul {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  color: #5a376f;
  font-size: 13px;
  font-weight:700;
  list-style: none;
}

.ls-experience-copy li::before {
  content: "✓";
  margin: var(--space-3);
  color: #6aaf83;
}

.ls-phone-preview {
  position: relative;
  justify-self: center;
  width: min(332px, 100%);
  min-height: 0;
  aspect-ratio: 1;
  border: 5px solid #322a3b;
  border-radius: var(--space-7);
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: linear-gradient(155deg, #fff 0%, #f9f4fc 100%);
  box-shadow: 0 24px 46px #50316b2b;
  text-align: center;
}

.ls-phone-bar {
  display: flex;
  justify-content: space-between;
  color: #5a5164;
  font-size: 9px;
  font-weight:800;
}

.ls-phone-preview > p,
.ls-share-preview > p {
  margin: var(--space-6) 0 var(--space-2);
  color: #8559b4;
  font-size: 8px;
  font-weight:800;
  letter-spacing: 1px;
}

.ls-phone-preview h3,
.ls-share-preview h3 {
  margin: 0;
  color: #2d2635;
  font-size: 21px;
  letter-spacing: -0.75px;
}

.ls-selfie-frame {
  position: relative;
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  margin: var(--space-4) auto var(--space-3);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 31%, #f7fdff 0 3%, #a6dbff 4% 6%, transparent 7%), radial-gradient(circle, #142144 0 17%, #284d85 18% 29%, #504284 30% 38%, #7b54a6 39% 46%, #bd93d9 47% 53%, #ebd9f6 54% 61%, #f9f3fd 62% 76%, #e5d3f1 77% 100%);
  box-shadow: 0 0 0 8px #ede2f7, inset 0 0 18px #ffffff66;
}

.ls-phone-preview > p { margin: var(--space-4) 0 var(--space-2); }
.ls-phone-preview h3 { font-size: 19px; }
.ls-phone-preview .ls-selfie-frame i { width: 17px; height: 17px; }

.ls-selfie-frame i,
.ls-ai-portrait i {
  position: absolute;
  width: 25px;
  height: 25px;
  border: 2px solid #8156af;
}

.ls-selfie-frame i:nth-of-type(1),
.ls-ai-portrait i:nth-of-type(1) { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.ls-selfie-frame i:nth-of-type(2),
.ls-ai-portrait i:nth-of-type(2) { top: -2px; right: -2px; border-left: 0; border-bottom: 0; }
.ls-selfie-frame i:nth-of-type(3),
.ls-ai-portrait i:nth-of-type(3) { bottom: -2px; left: -2px; border-right: 0; border-top: 0; }
.ls-selfie-frame i:nth-of-type(4),
.ls-ai-portrait i:nth-of-type(4) { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }

.ls-phone-preview > small {
  display: block;
  max-width: 210px;
  margin: 0 auto;
  color: #877d91;
  font-size: 9px;
  line-height: 1.45;
}

.ls-phone-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--space-3);
  border-radius: var(--space-3);
  padding: var(--space-3) var(--space-3);
  background: #7245ad;
  color: #fff;
  font-size: 10px;
}

.ls-phone-action span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid #cdb0e5;
  border-radius: 50%;
}

.ls-studio-preview {
  justify-self: center;
  width: min(390px, 100%);
  overflow: hidden;
  border: 1px solid #ded3e8;
  border-radius: var(--space-4);
  background: #fff;
  box-shadow: 0 23px 45px #4d2d6b1b;
}

.ls-studio-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 1px solid #eee8f2;
  color: #302839;
  font-size: 16px;
  font-weight:800;
}

.ls-studio-preview-head b {
  border-radius: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: #7447ad;
  color: #fff;
  font-size: 10px;
}

.ls-event-row {
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin: 0 var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid #eee9f2;
}

.ls-row-photo {
  width: 47px;
  height: 41px;
  border-radius: var(--space-2);
}

.ls-event-row span,
.ls-studio-controls span,
.ls-ai-match span {
  display: grid;
  gap: var(--space-1);
}

.ls-event-row b,
.ls-studio-controls b,
.ls-ai-match b {
  color: #44394e;
  font-size: 11px;
}

.ls-event-row small,
.ls-studio-controls small,
.ls-ai-match small {
  color: #918697;
  font-size: 9px;
}

.ls-event-row em {
  border-radius: var(--space-12);
  padding: var(--space-2) var(--space-2);
  background: #f5e6cb;
  color: #9a6d2d;
  font-size: 8px;
  font-style: normal;
  font-weight:800;
}

.ls-event-row em.is-ready {
  background: #e4f2e9;
  color: #538667;
}

.ls-studio-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-5);
  background: #fbf9fd;
}

.ls-studio-controls > i {
  align-self: center;
  border-radius: var(--space-12);
  padding: var(--space-1) var(--space-2);
  background: #e3f1e8;
  color: #4c8c62;
  font-size: 8px;
  font-style: normal;
  font-weight:800;
}

.ls-share-preview {
  justify-self: center;
  width: min(315px, 100%);
  padding: var(--space-7);
  border-radius: var(--space-6);
  background: linear-gradient(150deg, #6d40aa 0%, #8f50bd 64%, #d18d76 140%);
  box-shadow: 0 23px 45px #4d2d6b30;
  color: #fff;
  text-align: center;
}

.ls-share-preview > p,
.ls-share-preview h3 {
  color: #fff;
}

.ls-share-preview > p {
  opacity: .75;
}

.ls-qr {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 155px;
  height: 155px;
  gap: var(--space-2);
  margin: var(--space-7) auto var(--space-4);
  padding: var(--space-3);
  border-radius: var(--space-4);
  background: #fff;
}

.ls-qr i {
  display: block;
  border-radius: var(--space-1);
  background: #35203f;
}

.ls-qr i:nth-child(2n) { background: #d38b74; }
.ls-qr i:nth-child(3n) { background: #8551b2; }

.ls-share-preview > span {
  color: #f5e6ff;
  font-size: 10px;
}

.ls-share-preview > div:last-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--space-6);
  border-top: 1px solid #ffffff35;
  padding: var(--space-4);
  font-size: 10px;
}

.ls-share-preview > div:last-child i {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  background: #92cba2;
  font-style: normal;
}

.ls-ai-showcase {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: center;
  gap: clamp(var(--space-9), 8vw, var(--space-12));
  width: min(1120px, calc(100vw - var(--gutter) * 2));
  margin: 0 auto;
  padding: var(--space-8) 0 var(--space-12);
}

.ls-ai-art {
  position: relative;
  display: grid;
  width: min(390px, 100%);
  min-height: 0;
  aspect-ratio: 1;
  justify-self: center;
  place-items: center;
  overflow: hidden;
  border-radius: var(--space-6);
  background: radial-gradient(circle at 28% 23%, #b27cdc 0, transparent 34%), linear-gradient(145deg, #3b245b, #6f3fa3 63%, #c77c79 155%);
}

.ls-ai-art::after {
  position: absolute;
  right: -26px;
  bottom: -38px;
  width: 220px;
  height: 220px;
  border: 1px solid #ffffff43;
  border-radius: 50%;
  content: "";
}

.ls-ai-art-top {
  position: absolute;
  top: 20px;
  left: 22px;
  display: flex;
  gap: var(--space-2);
  color: #f8e9ff;
  font-size: 9px;
  font-weight:800;
  letter-spacing: 1px;
}

.ls-ai-art-top b {
  border-radius: var(--space-12);
  padding: var(--space-1) var(--space-2);
  background: #a7d8af;
  color: #2f633e;
  font-size: 8px;
  letter-spacing: 0;
}

.ls-ai-portrait {
  position: relative;
  display: grid;
  width: 174px;
  height: 174px;
  place-items: center;
  border: 18px solid #ffffff1c;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 31%, #f7fdff 0 3%, #a6dbff 4% 6%, transparent 7%), radial-gradient(circle, #101a39 0 17%, #23477f 18% 29%, #4b3c7f 30% 38%, #734ca1 39% 46%, #b88bd5 47% 53%, #9463bd 54% 61%, #6e429c 62% 100%);
  box-shadow: inset 0 0 24px #d5bdff55;
}

.ls-ai-portrait i {
  width: 30px;
  height: 30px;
  border-color: #f0ccff;
}

.ls-ai-match {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid #ffffff38;
  border-radius: var(--space-3);
  padding: var(--space-3) var(--space-3);
  background: #fff;
  box-shadow: 0 14px 28px #25133845;
}

.ls-ai-match > i {
  display: block;
  width: 27px;
  height: 27px;
  border-radius: var(--space-2);
  background-image: url("/static/event-menu-thumbnails.jpg");
  background-position: left top;
  background-size: 200% 200%;
}

.ls-ai-match--one { top: 92px; right: 15px; }
.ls-ai-match--two { bottom: 55px; left: 20px; }
.ls-ai-match--two > i { background-position: right bottom; }

.ls-ai-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-7) 0 var(--space-6);
}

.ls-ai-points span {
  display: grid;
  gap: var(--space-2);
  border-top: 1px solid #e1d8e8;
  padding: var(--space-3);
}

.ls-ai-points b { color: #5d338a; font-size: 12px; }
.ls-ai-points small { color: #847a8d; font-size: 10px; line-height: 1.4; }

.ls-gallery-showcase {
  padding: var(--space-12) max(4vw, calc((100vw - var(--space-12)) / 2));
  background: linear-gradient(120deg, #f0e8fa, #fcfaff 56%, #f9f1f9);
}

.ls-gallery-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: var(--space-9);
}

.ls-gallery-cards article {
  overflow: hidden;
  border: 1px solid #e5ddea;
  border-radius: var(--space-5);
  background: #fff;
  box-shadow: 0 13px 29px #3e1b5d0b;
}

.ls-gallery-photo {
  height: 218px;
  background-image: url('/static/gallery-event-triptych-v1.png');
  background-size: 300% auto;
  background-position-y: center;
}

.ls-gallery-photo.ls-event-thumb--wedding { background-position-x: 0; }
.ls-gallery-photo.ls-event-thumb--corporate { background-position-x: 50%; }
.ls-gallery-photo.ls-event-thumb--live { background-position-x: 100%; }

.ls-gallery-photo {
  transition: transform .35s ease, filter .35s ease;
}

.ls-gallery-cards article:hover .ls-gallery-photo {
  transform: scale(1.025);
  filter: saturate(1.04) contrast(1.02);
}

.ls-gallery-cards article > div { padding: var(--space-6); }
.ls-gallery-cards small { color: #8050b2; font-size: 9px; font-weight:800; letter-spacing: 1.1px; }
.ls-gallery-cards h3 { margin: var(--space-3) 0; color: #30263a; font-size: 20px; letter-spacing: -.55px; line-height: 1.15; }
.ls-gallery-cards p { margin: 0; color: #7b7183; font-size: 12px; line-height: 1.55; }

.ls-workflow-proof {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(var(--space-9), 9vw, var(--space-12));
  align-items: start;
  width: min(1100px, calc(100vw - var(--gutter) * 2));
  margin: 0 auto;
  padding: var(--space-12) 0;
}

.ls-workflow-list { display: grid; }
.ls-workflow-list article { display: grid; grid-template-columns: 43px 1fr; gap: var(--space-5); padding: var(--space-5) 0; border-top: 1px solid #ded6e6; }
.ls-workflow-list article:last-child { border-bottom: 1px solid #ded6e6; }
.ls-workflow-list > article > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: var(--space-3); background: #f0e5fa; color: #7545b6; font-size: 11px; font-weight:800; }
.ls-workflow-list b { color: #342a3e; font-size: 16px; }
.ls-workflow-list p { margin: var(--space-2) 0 0; color: #7b7282; font-size: 12px; line-height: 1.55; }

.ls-pricing { width: min(1200px, 92vw); margin: 0 auto; padding: var(--space-12); }
.ls-pricing-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-9); border-radius: var(--space-6); padding: clamp(var(--space-7), 5.2vw, var(--space-11)); background: linear-gradient(110deg, #45276f, #7642aa 58%, #c1749b 150%); box-shadow: 0 24px 58px #40225b24; }
.ls-pricing-card h2 { color: #fff; }
.ls-pricing-card .ls-kicker { color: #eddbff; }
.ls-pricing-card > div > p:last-child { max-width: 545px; color: #f4eaff; }
.ls-pricing-actions { display: grid; justify-items: start; gap: var(--space-5); flex: 0 0 auto; }
.ls-pricing-actions .ls-primary { min-width: 205px; background: #fff; color: #543184; box-shadow: none; }
.ls-pricing-actions .ls-primary span { border-color: #c7b1df; }
.ls-pricing-actions .ls-text-link { color: #fff; }

.ls-studio-notes { width: min(1200px, 92vw); margin: 0 auto; padding: var(--space-2) 0 var(--space-12); }
.ls-note-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-9); }
.ls-note-grid article { min-height: 240px; border: 1px solid #e4ddea; border-radius: var(--space-4); padding: var(--space-6); background: #fff; }
.ls-note-grid article:nth-child(1) { background: linear-gradient(135deg, #fdfaff 0%, #f7efff 100%); border-color: #e4d5f1; }
.ls-note-grid article:nth-child(2) { background: linear-gradient(135deg, #fbfcff 0%, #f0f5ff 100%); border-color: #d9e1f3; }
.ls-note-grid article:nth-child(3) { background: linear-gradient(135deg, #fffdf9 0%, #fff4e7 100%); border-color: #f0dfc9; }
.ls-note-grid span { color: #8756b9; font-size: 12px; font-weight:800; }
.ls-note-grid h3 { margin: var(--space-8) 0 var(--space-3); color: #352a40; font-size: 19px; letter-spacing: -.5px; line-height: 1.2; }
.ls-note-grid p { margin: 0 0 var(--space-5); color: #7c7283; font-size: 12px; line-height: 1.58; }
.ls-note-grid a { color: #7644ad; font-size: 12px; font-weight:700; text-decoration: none; }

.ls-faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(var(--space-9), 8vw, var(--space-12)); width: min(1100px, 90vw); margin: 0 auto; padding: 0 0 var(--space-12); }
.ls-faq-list { display: grid; align-content: start; }
.ls-faq-list details { border-top: 1px solid #ddd4e6; padding: 0; }
.ls-faq-list details:last-child { border-bottom: 1px solid #ddd4e6; }
.ls-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 67px; color: #383040; cursor: pointer; font-size: 14px; font-weight:700; list-style: none; }
.ls-faq-list summary::-webkit-details-marker { display: none; }
.ls-faq-list summary span { color: #7a49b3; font-size: 21px; font-weight: 400; transition: transform 180ms ease; }
.ls-faq-list details[open] summary span { transform: rotate(45deg); }
.ls-faq-list p { max-width: 630px; margin: -var(--space-1) var(--space-8) var(--space-5) 0; color: #7a7181; font-size: 12px; line-height: 1.65; }
.ls-faq-list a { color: #7040aa; font-weight:700; }

.ls-footer-rich {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(100px, 1fr));
  gap: var(--space-7);
  padding: var(--space-10);
}

.ls-footer-rich > div:not(.ls-footer-bottom) { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; gap: var(--space-3); }
.ls-footer-rich > div:not(.ls-footer-bottom) > a { margin: 0; }
.ls-footer-rich h3 { margin: 0 0 var(--space-2); color: #50455b; font-size: 12px; }
.ls-footer-rich a { color: #7b7183; font-size: 12px; font-weight:600; text-decoration: none; }
.ls-footer-rich .ls-footer-brand { gap: var(--space-4); padding: var(--space-5); }
.ls-footer-brand p { margin: 0; color: #817789; font-size: 12px; line-height: 1.55; }
.ls-footer-rich .ls-footer-contact { color: #684099; font-weight:700; }
.ls-footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-4); margin: var(--space-5); border-top: 1px solid #e6e0eb; padding: var(--space-5); color: #958a9c; font-size: 10px; }

/* Three original Lenspire capability sections, inspired by the event workflow rather than copied product claims. */
.ls-capability-experience { overflow: hidden; }
.ls-capability-tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: min(930px, 92vw); margin: var(--space-10) auto 0; padding: var(--space-2); border: 1px solid #e4dbea; border-radius: var(--space-4); background: #fbf9fd; box-shadow: 0 11px 25px #3e1b5d0a; }
.ls-capability-tabs button { min-height: 47px; border: 0; border-radius: var(--space-3); background: transparent; color: #5f536b; cursor: pointer; font: inherit; font-size: 13px; font-weight:800; }
.ls-capability-tabs button[aria-selected="true"] { background: linear-gradient(100deg, #6a3eaa, #9c4cc3); box-shadow: 0 8px 17px #683da625; color: #fff; }
.ls-capability-experience [data-capability-panel].is-active { animation: lenspire-capability-panel-in 460ms cubic-bezier(.22, 1, .36, 1) both; }
.ls-capability-showcase, .ls-studio-showcase, .ls-event-engagement { width: min(1200px, 92vw); margin: 0 auto; }
.ls-capability-showcase { padding: var(--space-7) 0 var(--space-12); }
.ls-capability-heading { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(var(--space-8), 8vw, var(--space-12)); align-items: end; }
.ls-capability-heading h2, .ls-studio-showcase h2, .ls-event-engagement h2 { margin: 0; color: #292335; font-size: clamp(40px, 4.4vw, 64px); font-weight:800; letter-spacing: -2.4px; line-height: 1.03; }
.ls-capability-heading h2 em, .ls-studio-showcase h2 em, .ls-event-engagement h2 em { font-style: normal; background: linear-gradient(90deg, #663cb0, #bd59c9, #d89955); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ls-capability-heading > p:last-child, .ls-studio-showcase-copy > p:not(.ls-kicker), .ls-event-engagement-heading > p:last-child { max-width: 500px; margin: 0 0 var(--space-2); color: #766d7e; font-size: 14px; line-height: 1.7; }

/* Keep the Key Features label, message, and title as one deliberately paced block. */
.ls-capability-heading {
  display: flex;
  width: min(720px, 100%);
  margin: auto;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.ls-capability-heading .ls-kicker,
.ls-capability-heading > p:last-child {
  margin: 0;
}

.ls-capability-heading > p:last-child {
  max-width: 560px;
}

/* One original animated panel turns the delivery promise into a simple visual sequence. */
.ls-capability-flow {
  position: relative;
  width: min(780px, 100%);
  height: 174px;
  margin: var(--space-8) auto 0;
  overflow: hidden;
  border: 1px solid #e4d8ec;
  border-radius: var(--space-5);
  background:
    radial-gradient(circle at 8% 100%, #f0e5fb 0, transparent 29%),
    radial-gradient(circle at 94% 16%, #e6f2ff 0, transparent 27%),
    #fff;
  box-shadow: 0 18px 40px #43235f0d;
}

.ls-capability-flow::after {
  position: absolute;
  right: -30px;
  bottom: -48px;
  width: 165px;
  height: 165px;
  border: 1px solid #d9c5ec;
  border-radius: 50%;
  content: "";
}

.ls-capability-flow-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5) 0;
  color: #72517d;
  font-size: 10px;
  font-weight:800;
  letter-spacing: 1px;
}

.ls-capability-flow-top b { display: inline-flex; align-items: center; gap: var(--space-2); border-radius: var(--space-12); padding: var(--space-2) var(--space-2); background: #edf8f0; color: #397948; font-size: 8px; font-style: normal; letter-spacing: .6px; }
.ls-capability-flow-top b i { width: 6px; height: 6px; border-radius: 50%; background: #52af6a; box-shadow: 0 0 0 3px #52af6a23; }
.ls-capability-flow-slides { position: absolute; inset: 43px 20px 30px; display: grid; }
.ls-capability-flow-slide { grid-area: 1 / 1; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; opacity: 0; transform: translateX(24px); }
.ls-capability-flow-slide:first-child { opacity: 1; transform: translateX(0); }
.ls-capability-flow-slide > span { display: grid; width: 54px; height: 54px; place-items: center; border-radius: var(--space-4); background: #7950b4; box-shadow: 0 10px 20px #7145aa30; color: #fff; font-size: 29px; font-weight:700; }
.ls-capability-flow-slide--index > span { background: #5d83bb; }
.ls-capability-flow-slide--share > span { background: #b66c8c; }
.ls-capability-flow-slide small { display: block; margin: var(--space-1); color: #7b5595; font-size: 9px; font-weight:800; letter-spacing: .85px; }
.ls-capability-flow-slide strong { display: block; color: #32283a; font-size: 19px; letter-spacing:-.5px; }
.ls-capability-flow-slide p { margin: var(--space-1) 0 0; color: #776d7d; font-size: 12px; line-height: 1.35; }
.ls-capability-flow-slide em { align-self: start; color: #b5a8bd; font-size: 22px; font-style: normal; font-weight:800; letter-spacing: -1px; }
.ls-capability-flow-progress { position: absolute; z-index: 2; right: 19px; bottom: 15px; display: flex; gap: var(--space-2); }
.ls-capability-flow-progress i { display: block; width: 17px; height: 3px; border-radius: var(--space-12); background: #e2d9e8; }
.ls-capability-flow-progress i:first-child { background: #7348ae; }
.ls-capability-flow + .ls-capability-grid { margin: var(--space-5); }
.ls-kpi-highlights { padding: var(--space-10); border-bottom: 1px solid #e4ddec; }
.ls-capability-detail { width: min(920px, 100%); margin: clamp(var(--space-10), 9vw, var(--space-12)) auto 0; padding: clamp(var(--space-8), 5vw, var(--space-10)); border: 1px solid #e6dbea; border-radius: var(--space-6); background: linear-gradient(145deg, #fcfaff, #fff 57%, #f9f5fd); box-shadow: 0 16px 36px #3e1b5d0a; }
.ls-capability-detail .ls-capability-heading { margin: 0; }
.ls-capability-detail .ls-capability-flow {
  margin: var(--space-8) auto 0;
}

.ls-workflow-proof h2 {
  background: linear-gradient(90deg, #663cb0, #bd59c9, #d89955);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ls-capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin: var(--space-9); }
.ls-capability-grid article { display: flex; min-height: 246px; flex-direction: column; align-items: flex-start; padding: var(--space-6); border: 1px solid #e7dfed; border-radius: var(--space-5); background: #fff; box-shadow: 0 10px 28px #3e1b5d08; }
.ls-capability-grid article:nth-child(1) { background: linear-gradient(145deg, #fdfaff, #f6efff); border-color: #e5d8f0; }
.ls-capability-grid article:nth-child(2) { background: linear-gradient(145deg, #fbfcff, #f0f5ff); border-color: #dce4f3; }
.ls-capability-grid article:nth-child(3) { background: linear-gradient(145deg, #fffdf9, #fff4e8); border-color: #f0dfca; }
.ls-capability-grid article:nth-child(4) { background: linear-gradient(145deg, #fbfefc, #eff9f3); border-color: #dbece0; }
.ls-capability-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: var(--space-3); background: #7c4bb5; color: #fff; font-size: 23px; line-height: 1; }
.ls-capability-icon--private { background: #6186bf; }
.ls-capability-icon--upload { background: #c47f68; }
.ls-capability-icon--live { background: #559578; }
.ls-capability-grid h3 { margin: var(--space-7) 0 var(--space-3); color: #352a40; font-size: 17px; letter-spacing: -.5px; }
.ls-capability-grid p { margin: 0; color: #776d7d; font-size: 12px; line-height: 1.55; }
.ls-capability-grid small { margin: auto; color: #6f419f; font-size: 12px; font-weight:800; letter-spacing: -.1px; }

.ls-studio-showcase { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(var(--space-9), 9vw, var(--space-12)); align-items: center; padding: var(--space-12) 6%; margin-block: 0; margin-inline: calc((100% - 100vw) / 2); width: 100vw; background: linear-gradient(118deg, #f0eafd, #fbfaff 49%, #f8f4fc); }
.ls-studio-signature { position: relative; justify-self: end; width: min(415px, 100%); overflow: hidden; border: 1px solid #ded3ea; border-radius: var(--space-5); background: #fff; box-shadow: 0 24px 55px #4423611b; }
.ls-studio-signature-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); background: linear-gradient(102deg, #673da8, #a553c3); color: #fff; font-size: 11px; font-weight:800; }
.ls-studio-signature-bar i { border-radius: var(--space-12); padding: var(--space-1) var(--space-2); background: #bee7c5; color: #367243; font-size: 8px; font-style: normal; }
.ls-studio-signature-body { display: grid; padding: var(--space-7) var(--space-7) var(--space-8); background: radial-gradient(circle at 82% 22%, #f4e8ff 0, transparent 27%), #fff; }
.ls-studio-signature-body small { color: #8c8098; font-size: 9px; font-weight:800; letter-spacing: 1px; }
.ls-studio-signature-body > b { margin: var(--space-2); color: #33293d; font-size: 25px; letter-spacing: -1px; }
.ls-studio-signature-body > span { margin: var(--space-2); color: #827687; font-size: 11px; }
.ls-studio-signature-body > div { display: grid; gap: var(--space-3); margin: var(--space-6); }
.ls-studio-signature-body > div i { display: flex; align-items: center; min-height: 37px; padding: 0 var(--space-3); border: 1px solid #ece6f2; border-radius: var(--space-3); background: #fdfbff; color: #5b4c67; font-size: 11px; font-style: normal; }
.ls-studio-signature-body > div i::before { width: 8px; height: 8px; margin: var(--space-3); border-radius: 50%; background: #7b4bb3; content: ""; }
.ls-studio-signature-note { position: absolute; right: 19px; bottom: 17px; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3); border: 1px solid #e8dfef; border-radius: var(--space-3); background: #fff; box-shadow: 0 11px 23px #44236115; color: #5f536a; font-size: 9px; font-style: normal; font-weight:700; }
.ls-studio-signature-note strong { display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: #d8efde; color: #408451; font-size: 10px; }
.ls-studio-showcase-copy { justify-self: start; width: min(480px, 100%); }
.ls-studio-showcase-copy > p:not(.ls-kicker) { margin: var(--space-6) 0; }
.ls-studio-showcase-copy ul { display: grid; gap: var(--space-3); margin: 0 0 var(--space-7); padding: 0; list-style: none; color: #665b6e; font-size: 12px; }
.ls-studio-showcase-copy li::before { margin: var(--space-2); color: #6e43a5; content: "✓"; font-weight:800; }

.ls-event-engagement { padding: var(--space-12) 0; }
.ls-event-engagement-heading { display: grid; grid-template-columns: 1fr; justify-items: center; gap: var(--space-4); width: min(640px, 100%); margin: 0 auto; text-align: center; }
.ls-event-engagement-heading > p:last-child { margin: 0; }
.ls-engagement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin: var(--space-9); }
.ls-engagement-grid article { min-height: 290px; padding: var(--space-6); border: 1px solid #e7e0ed; border-radius: var(--space-5); background: #fff; box-shadow: 0 12px 30px #3e1b5d08; }
.ls-engagement-grid > article > span { color: #8454b9; font-size: 11px; font-weight:800; }
.ls-engagement-qr, .ls-engagement-lock, .ls-engagement-upload { display: grid; width: 77px; height: 77px; place-items: center; margin: var(--space-7) 0 var(--space-6); border-radius: var(--space-4); background: #f0e7fa; color: #7645ad; font-size: 34px; }
.ls-engagement-qr { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); padding: var(--space-3); background: #f8f4fc; }
.ls-engagement-qr i { min-width: 0; min-height: 0; border-radius: var(--space-1); background: #6f42a6; }
.ls-engagement-qr i:nth-child(2n) { background: #d28a75; }
.ls-engagement-qr i:nth-child(3n) { background: #3e2d4c; }
.ls-engagement-lock { background: #edf4ff; color: #5e83ba; }
.ls-engagement-upload { background: #fff2e8; color: #bd795e; }
.ls-engagement-grid h3 { margin: 0 0 var(--space-3); color: #342a3e; font-size: 18px; letter-spacing: -.5px; }
.ls-engagement-grid p { margin: 0; color: #786e7e; font-size: 12px; line-height: 1.6; }
.ls-engagement-qr { position: relative; grid-template-rows: repeat(3, 1fr); place-items: stretch; gap: var(--space-1); padding: var(--space-4); }
.ls-engagement-qr i { width: auto; height: auto; min-width: 0; min-height: 0; }
.ls-engagement-lock, .ls-engagement-upload { position: relative; font-size: 0; }
.ls-engagement-lock::before { position: absolute; top: 34px; left: 50%; width: 28px; height: 23px; border-radius: var(--space-2); transform: translateX(-50%); background: radial-gradient(circle at 50% 40%, #edf4ff 0 2px, transparent 3px), #5e83ba; content: ""; }
.ls-engagement-lock::after { position: absolute; top: 20px; left: 50%; width: 17px; height: 17px; border: 3px solid #5e83ba; border-bottom: 0; border-radius: var(--space-3) 11px 0 0; transform: translateX(-50%); content: ""; }
.ls-engagement-upload::before { position: absolute; top: 25px; left: 50%; width: 3px; height: 29px; border-radius: var(--space-12); transform: translateX(-50%); background: #bd795e; content: ""; }
.ls-engagement-upload::after { position: absolute; top: 20px; left: 50%; width: 13px; height: 13px; border-top: 3px solid #bd795e; border-left: 3px solid #bd795e; transform: translateX(-50%) rotate(45deg); content: ""; }

@media (prefers-reduced-motion: no-preference) {
  .ls-studio-signature-note { animation: lenspire-studio-note 3.8s ease-in-out infinite; }
  .ls-capability-flow-slide { animation: lenspire-delivery-flow-slide 9s cubic-bezier(.22, 1, .36, 1) infinite; }
  .ls-capability-flow-slide:nth-child(2) { animation-delay: 3s; }
  .ls-capability-flow-slide:nth-child(3) { animation-delay: 6s; }
  .ls-capability-flow-progress i { animation: lenspire-delivery-flow-progress 9s linear infinite; }
  .ls-capability-flow-progress i:nth-child(2) { animation-delay: 3s; }
  .ls-capability-flow-progress i:nth-child(3) { animation-delay: 6s; }
  .ls-capability-grid article, .ls-engagement-grid article { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
  .ls-capability-experience [data-capability-panel].is-active .ls-capability-grid article, .ls-capability-experience [data-capability-panel].is-active .ls-engagement-grid article { animation: lenspire-capability-card-in 480ms cubic-bezier(.22, 1, .36, 1) both; }
  .ls-capability-experience [data-capability-panel].is-active .ls-capability-grid article:nth-child(2), .ls-capability-experience [data-capability-panel].is-active .ls-engagement-grid article:nth-child(2) { animation-delay: 70ms; }
  .ls-capability-experience [data-capability-panel].is-active .ls-capability-grid article:nth-child(3), .ls-capability-experience [data-capability-panel].is-active .ls-engagement-grid article:nth-child(3) { animation-delay: 140ms; }
  .ls-capability-experience [data-capability-panel].is-active .ls-capability-grid article:nth-child(4) { animation-delay: 210ms; }
}

@media (hover: hover) and (pointer: fine) {
  .ls-capability-grid article:hover, .ls-engagement-grid article:hover { transform: translateY(-5px); border-color: #cbb1df; box-shadow: 0 20px 38px #3e1b5d16; }
}

@keyframes lenspire-studio-note {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes lenspire-capability-panel-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes lenspire-capability-card-in {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lenspire-delivery-flow-slide {
  0%, 30% { opacity: 1; transform: translateX(0); }
  34%, 100% { opacity: 0; transform: translateX(-25px); }
}

@keyframes lenspire-delivery-flow-progress {
  0%, 30% { background: #7348ae; transform: scaleX(1.08); }
  34%, 100% { background: #e2d9e8; transform: scaleX(1); }
}

@media (max-width: 900px) {
  .ls-capability-heading, .ls-event-engagement-heading, .ls-studio-showcase { grid-template-columns: 1fr; }
  .ls-capability-heading, .ls-event-engagement-heading { gap: var(--space-5); }
  .ls-capability-grid { grid-template-columns: repeat(2, 1fr); }
  .ls-studio-showcase { gap: var(--space-9); padding: var(--space-11) 8vw; }
  .ls-studio-signature, .ls-studio-showcase-copy { justify-self: center; }
  .ls-event-engagement { padding: var(--space-12) 0; }
}

@media (max-width: 600px) {
  .ls-capability-tabs { width: min(92vw, 560px); margin: var(--space-9); padding: var(--space-1); border-radius: var(--space-3); }
  .ls-capability-tabs button { min-height: 50px; padding: var(--space-2) var(--space-2); font-size: 10px; line-height: 1.15; }
  .ls-capability-showcase, .ls-event-engagement { width: min(92vw, 560px); }
  .ls-capability-showcase { padding: var(--space-3) 0 var(--space-11); }
  .ls-capability-heading h2, .ls-studio-showcase h2, .ls-event-engagement h2 { font-size: clamp(36px, 10vw, 45px); letter-spacing:-1px; }
  .ls-capability-heading h2 br, .ls-studio-showcase h2 br, .ls-event-engagement h2 br { display: none; }
  .ls-capability-heading > p:last-child, .ls-studio-showcase-copy > p:not(.ls-kicker), .ls-event-engagement-heading > p:last-child { font-size: 14px; }
  .ls-capability-flow { height: 190px; margin: var(--space-7); border-radius: var(--space-4); }
  .ls-capability-flow-top { padding: var(--space-4) var(--space-4) 0; }
  .ls-capability-flow-slides { inset: 47px 15px 28px; }
  .ls-capability-flow-slide { grid-template-columns: 47px minmax(0, 1fr); gap: var(--space-3); }
  .ls-capability-flow-slide > span { width: 46px; height: 46px; border-radius: var(--space-4); font-size: 25px; }
  .ls-capability-flow-slide strong { font-size: 16px; letter-spacing:-.5px; }
  .ls-capability-flow-slide p { font-size: 11px; }
  .ls-capability-flow-slide em { display: none; }
  .ls-capability-flow + .ls-capability-grid { margin: var(--space-4); }
  .ls-kpi-highlights { padding: var(--space-9); }
  .ls-capability-detail { margin: var(--space-10); padding: var(--space-7) var(--space-4) var(--space-5); border-radius: var(--space-5); }
  .ls-capability-detail .ls-capability-flow { margin: var(--space-7); }
  .ls-capability-grid, .ls-engagement-grid { grid-template-columns: 1fr; gap: var(--space-3); margin: var(--space-7); }
  .ls-capability-grid article { min-height: 0; padding: var(--space-5); }
  .ls-capability-grid h3 { margin: var(--space-5); }
  .ls-studio-showcase { gap: var(--space-8); padding: var(--space-11) 4vw; }
  .ls-studio-signature { width: min(100%, 390px); }
  .ls-studio-signature-body { padding: var(--space-7) var(--space-5) var(--space-8); }
  .ls-studio-showcase-copy { width: min(92vw, 560px); }
  .ls-event-engagement { padding: var(--space-11) 0; }
  .ls-engagement-grid article { min-height: 0; padding: var(--space-6); }
  .ls-engagement-qr, .ls-engagement-lock, .ls-engagement-upload { margin: var(--space-5) 0; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes lenspire-panel-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes lenspire-orbit {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
  }

  .ls-experience-panel.is-active { animation: lenspire-panel-in 360ms cubic-bezier(.22, 1, .36, 1) both; }
  .ls-ai-match--one { animation: lenspire-orbit 4s ease-in-out infinite; }
  .ls-ai-match--two { animation: lenspire-orbit 4.5s ease-in-out .7s infinite; }
  .ls-gallery-cards article, .ls-note-grid article { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
}

@media (hover: hover) and (pointer: fine) {
  .ls-gallery-cards article:hover, .ls-note-grid article:hover { transform: translateY(-5px); border-color: #cdb5df; box-shadow: 0 20px 36px #3e1b5d16; }
  .ls-experience-tabs button:hover:not([aria-selected="true"]) { color: #653b95; background: #f3edf8; }
}

@media (max-width: 900px) {
  .ls-audience-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-experience-panel, .ls-ai-showcase, .ls-workflow-proof, .ls-faq { grid-template-columns: 1fr; }
  .ls-experience-panel { gap: var(--space-9); }
  .ls-experience-copy { max-width: 630px; justify-self: center; }
  .ls-ai-art { width: min(420px, 100%); max-width: 420px; min-height: 0; aspect-ratio: 1; justify-self: center; }
  .ls-ai-copy { max-width: 610px; justify-self: center; }
  .ls-gallery-showcase { padding: 4vw; padding: 4vw; }
  .ls-pricing-card { align-items: start; flex-direction: column; }
  .ls-pricing-actions { display: flex; flex-wrap: wrap; align-items: center; }
  .ls-faq-heading { max-width: 580px; }
  .ls-footer-rich { grid-template-columns: 1.6fr repeat(3, minmax(100px, 1fr)); }
  .ls-footer-rich > div:nth-of-type(5) { grid-column: 2; }
}

@media (max-width: 600px) {
  .lenspire-site main > section { scroll-margin-top: 68px; }
  .ls-audiences { grid-template-columns: 1fr; }
  .ls-audience-grid--four, .ls-gallery-cards, .ls-note-grid { grid-template-columns: 1fr; }
  .ls-audience-photo { height: 144px; }
  .ls-experience { padding: var(--space-11) 0; }
  .ls-experience h2, .ls-gallery-showcase h2, .ls-ai-showcase h2, .ls-workflow-proof h2, .ls-pricing h2, .ls-studio-notes h2, .ls-faq h2 { font-size: clamp(36px, 10vw, 45px); letter-spacing:-1px; }
  .ls-experience h2 br, .ls-gallery-showcase h2 br, .ls-ai-showcase h2 br, .ls-workflow-proof h2 br, .ls-pricing h2 br, .ls-studio-notes h2 br, .ls-faq h2 br { display: none; }
  .ls-experience-intro > p:last-child, .ls-gallery-heading > p:last-child, .ls-notes-heading > p:last-child, .ls-faq-heading > p:last-child, .ls-workflow-proof > div > p:last-child, .ls-pricing-card > div > p:last-child, .ls-ai-copy > p:not(.ls-kicker) { font-size: 14px; }
  .ls-experience-tabs { width: 100%; margin: var(--space-7) 0 var(--space-4); }
  .ls-experience-tabs button { flex: 1 0 auto; min-height: 39px; padding: 0 var(--space-4); font-size: 11px; }
  .ls-experience-panel { min-height: 0; gap: var(--space-7); border-radius: var(--space-5); padding: var(--space-6) var(--space-5) var(--space-7); }
  .ls-phone-preview { width: min(320px, 100%); min-height: 0; aspect-ratio: 1; transform: none; margin: 0 auto; }
  .ls-experience-copy h3 { margin: var(--space-4); font-size: 29px; }
  .ls-experience-copy p { font-size: 13px; }
  .ls-experience-copy ul { margin: var(--space-5); font-size: 12px; }
  .ls-studio-preview { width: 100%; }
  .ls-share-preview { width: min(285px, 100%); padding: var(--space-7); }
  .ls-qr { width: 138px; height: 138px; }
  .ls-ai-showcase { width: min(92vw, 560px); gap: var(--space-8); padding: var(--space-3) 0 var(--space-11); }
  .ls-ai-art { width: 100%; max-width: 380px; min-height: 0; aspect-ratio: 1; border-radius: var(--space-5); }
  .ls-ai-portrait { width: 152px; height: 152px; font-size: 61px; }
  .ls-ai-match { padding: var(--space-2); }
  .ls-ai-match--one { top: 69px; right: 8px; }
  .ls-ai-match--two { bottom: 30px; left: 8px; }
  .ls-ai-match b { font-size: 10px; }
  .ls-ai-match small { font-size: 8px; }
  .ls-ai-points { gap: var(--space-2); margin: var(--space-6); }
  .ls-ai-points b { font-size: 11px; }
  .ls-ai-points small { font-size: 9px; }
  .ls-gallery-showcase { padding: var(--space-11) 4vw; }
  .ls-gallery-cards { margin: var(--space-7); gap: var(--space-3); }
  .ls-gallery-photo { height: 190px; }
  .ls-workflow-proof { width: min(92vw, 560px); gap: var(--space-7); padding: var(--space-11) 0; }
  .ls-workflow-list article { padding: var(--space-4) 0; }
  .ls-pricing { width: min(92vw, 560px); padding: var(--space-11); }
  .ls-pricing-card { gap: var(--space-7); border-radius: var(--space-5); padding: var(--space-7) var(--space-6); }
  .ls-pricing-actions { display: grid; width: 100%; }
  .ls-pricing-actions .ls-primary { width: 100%; }
  .ls-studio-notes { width: min(92vw, 560px); padding: var(--space-11); }
  .ls-note-grid { margin: var(--space-7); gap: var(--space-3); }
  .ls-note-grid article { min-height: 0; padding: var(--space-5); }
  .ls-note-grid h3 { margin: var(--space-6); }
  .ls-faq { width: min(92vw, 560px); gap: var(--space-7); padding: var(--space-11); }
  .ls-faq-list summary { min-height: 61px; font-size: 13px; }
  .ls-faq-list p { font-size: 12px; }
  .ls-footer-rich { grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-5); padding: var(--space-8) 0 var(--space-7); }
  .ls-footer-rich .ls-footer-brand { grid-column: 1 / -1; padding: 0; }
  .ls-footer-rich > div:nth-of-type(5) { grid-column: auto; }
  .ls-footer-bottom { grid-column: 1 / -1; display: grid; gap: var(--space-2); margin: 0; }
}

/* Tablet refinement: narrow the gap between desktop and mobile. */
@media (max-width: 768px) {
  .ls-cta {
    margin: var(--space-8);
    padding: var(--space-8) var(--space-5);
  }

  .ls-cta h2 {
    font-size: clamp(34px, 6vw, 48px);
  }

  .ls-how h2 {
    margin: var(--space-7);
    font-size: clamp(36px, 6.5vw, 52px);
  }

  .ls-strip {
    width: 100vw;
    margin-block: 0;
    margin-inline: calc((100% - 100vw) / 2);
    padding: var(--space-6) 0;
  }
}

/* Keep the event-category photography proportional. The source is a four-tile square sprite,
   so the previous wide banner stretched each photo horizontally. */
.ls-audience-grid--four .ls-audience-photo {
  height: auto;
  aspect-ratio: 16 / 9;
  background-size: 200% auto;
}

.ls-audience-grid--four .ls-audience-photo.ls-event-thumb--wedding { background-position: left 15.25%; }
.ls-audience-grid--four .ls-audience-photo.ls-event-thumb--corporate { background-position: right 15.25%; }
.ls-audience-grid--four .ls-audience-photo.ls-event-thumb--campus { background-position: left 84.75%; }
.ls-audience-grid--four .ls-audience-photo.ls-event-thumb--live { background-position: right 84.75%; }

/* Spacing alignment refinement: keep the landing page generous, not empty. */
@media (min-width: 901px) {
  .ls-hero {
    gap: clamp(var(--space-10), 5vw, var(--space-11));
    min-height: 590px;
    padding: var(--space-9) 0 var(--space-10);
  }

  .ls-ai-showcase { padding: var(--space-6) 0 var(--space-9); }
  .ls-capability-tabs { margin: var(--space-6); }
  .ls-sections { padding: var(--space-10) 0 var(--space-8); }
  .ls-experience { padding: var(--space-10) 0 var(--space-10); }
  .ls-capability-detail { margin: var(--space-10); }
  .ls-capability-showcase { padding: var(--space-4) 0 var(--space-10); }
  .ls-studio-showcase { padding: var(--space-11) 6%; }
  .ls-event-engagement { padding: var(--space-11) 0; }
  .ls-gallery-showcase { padding: var(--space-10); }
  .ls-how { padding: var(--space-11) 0 var(--space-11); }
  .ls-workflow-proof { padding: var(--space-11) 0; }
  .ls-pricing { padding: var(--space-11); }
  .ls-studio-notes { padding: var(--space-11); }
  .ls-faq { padding: var(--space-11); }
  .ls-cta { margin: var(--space-9); padding: var(--space-9); }
}

@media (max-width: 600px) {
  .ls-hero {
    gap: var(--space-8);
    padding: var(--space-7) 0 var(--space-9);
  }

  .ls-ai-showcase { padding: var(--space-3) 0 var(--space-8); }
  .ls-capability-tabs { margin: var(--space-5); }
  .ls-sections { padding: var(--space-10) 0 var(--space-7); }
  .ls-experience { padding: var(--space-10) 0 var(--space-9); }
  .ls-capability-detail { margin: var(--space-8); }
  .ls-capability-showcase { padding: var(--space-2) 0 var(--space-9); }
  .ls-studio-showcase { padding: var(--space-10) 4vw; }
  .ls-event-engagement { padding: var(--space-10) 0; }
  .ls-gallery-showcase { padding: var(--space-10) 4vw; }
  .ls-how { padding: var(--space-10) 0 var(--space-10); }
  .ls-workflow-proof { padding: var(--space-10) 0; }
  .ls-pricing { padding: var(--space-10); }
  .ls-studio-notes { padding: var(--space-10); }
  .ls-faq { padding: var(--space-10); }
  .ls-cta { margin: var(--space-8); padding: var(--space-8) var(--space-6); }
}

/* Layout rhythm: one container edge and one set of section gutters at every breakpoint. */
.ls-feature-item > span:not(.ls-feature-icon),
.ls-event-item > span:not(.ls-event-thumb),
.ls-hero > *,
.ls-sections > *,
.ls-capability-grid article,
.ls-engagement-grid article,
.ls-workflow-list article > div {
  min-width: 0;
}

.ls-nav .ls-desktop-nav .ls-feature-item,
.ls-nav .ls-desktop-nav .ls-event-item,
.ls-nav .ls-desktop-nav .ls-feature-item > span:not(.ls-feature-icon),
.ls-nav .ls-desktop-nav .ls-event-item > span:not(.ls-event-thumb),
.ls-nav .ls-desktop-nav .ls-feature-item small,
.ls-nav .ls-desktop-nav .ls-event-item small {
  white-space: normal;
}

.ls-feature-item small,
.ls-event-item small,
.ls-workflow-list p,
.ls-capability-grid p,
.ls-engagement-grid p {
  overflow-wrap: anywhere;
}

.ls-capability-grid small {
  margin: auto 0 0;
}

.ls-gallery-cards,
.ls-note-grid,
.ls-engagement-grid {
  margin-inline: auto;
}

@media (min-width: 901px) {
  .ls-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: var(--space-9);
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .ls-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .ls-product-preview {
    width: min(650px, 100%);
    justify-self: center;
  }
}

@media (max-width: 600px) {
  .ls-capability-tabs {
    margin: var(--space-7) auto var(--space-5);
  }

  .ls-kpi-highlights {
    padding: 0;
  }

  .ls-capability-grid,
  .ls-engagement-grid,
  .ls-gallery-cards,
  .ls-note-grid {
    margin: var(--space-7) 0 0;
  }

  .ls-capability-detail {
    width: 100%;
    margin: var(--space-8) 0 0;
    padding: var(--space-6) var(--space-4);
  }

  .ls-capability-detail .ls-capability-flow {
    margin: var(--space-6) 0 0;
  }

  .ls-pricing,
  .ls-studio-notes,
  .ls-faq {
    padding: var(--space-10) 0;
  }

  .ls-how h2 {
    margin: var(--space-7) 0 var(--space-8);
  }

  .ls-workflow-proof {
    width: min(92vw, 560px);
    padding: var(--space-10) 0;
  }

  .ls-cta {
    width: 100%;
    margin: var(--space-8) 0;
    padding: var(--space-8) var(--space-6);
  }
}

/* Small screens use the same content edge for every section. The desktop
   full-bleed treatments otherwise create a narrow horizontal scroll gutter. */
html {
  overflow-x: hidden;
}

.lenspire-site {
  overflow-x: clip;
}

@media (max-width: 600px) {
  .lenspire-site:not(.pricing-site) > main {
    overflow-x: clip;
  }

  .lenspire-site .ls-hero {
    padding-bottom: var(--space-3);
  }

  .lenspire-site .ls-strip {
    padding-top: var(--space-2);
    padding-bottom: var(--space-3);
  }

  .lenspire-site .ls-sections {
    padding-top: var(--space-6);
  }

  .ls-strip,
  .ls-how,
  .ls-studio-showcase {
    width: 100%;
    margin-inline: 0;
  }

  .ls-studio-showcase {
    box-sizing: border-box;
    padding-inline: var(--space-4);
  }

  .ls-studio-showcase-copy {
    width: 100%;
  }

  .ls-experience-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .ls-experience-tabs button {
    min-width: 0;
    padding: var(--space-2);
    white-space: normal;
    line-height: 1.2;
  }

  .ls-faq-list summary {
    min-width: 0;
  }

  .ls-faq-list summary > span {
    flex: 0 0 auto;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .lenspire-site .ls-hero {
    padding-bottom: var(--space-6);
  }

  .lenspire-site .ls-strip {
    padding-block: var(--space-4);
  }

  .lenspire-site .ls-sections {
    padding-top: var(--space-7);
  }
}

@media (min-width: 901px) {
  .lenspire-site .ls-hero {
    min-height: 540px;
    padding-bottom: var(--space-8);
  }

  .lenspire-site .ls-strip {
    padding-block: var(--space-4);
  }

  .lenspire-site .ls-sections {
    padding-top: var(--space-8);
  }
}

/* Standard display scale: expressive headings without overwhelming the page. */
.ls-hero h1,
.ls-sections h2,
.ls-features h2,
.ls-how h2,
.ls-cta h2 {
  font-size: clamp(40px, 3.9vw, 56px);
  letter-spacing: -2px;
  line-height: 1.06;
}

.ls-experience h2,
.ls-gallery-showcase h2,
.ls-ai-showcase h2,
.ls-workflow-proof h2,
.ls-pricing h2,
.ls-studio-notes h2,
.ls-faq h2,
.ls-capability-heading h2,
.ls-studio-showcase h2,
.ls-event-engagement h2 {
  font-size: clamp(32px, 3.4vw, 48px);
  letter-spacing: -1.5px;
  line-height: 1.08;
}

.ls-experience-copy h3 {
  font-size: clamp(25px, 2.5vw, 34px);
}

@media (max-width: 600px) {
  .ls-hero h1,
  .ls-sections h2,
  .ls-features h2,
  .ls-how h2,
  .ls-cta h2 {
    font-size: clamp(34px, 9.2vw, 39px);
    letter-spacing: -1.25px;
  }

  .ls-experience h2,
  .ls-gallery-showcase h2,
  .ls-ai-showcase h2,
  .ls-workflow-proof h2,
  .ls-pricing h2,
  .ls-studio-notes h2,
  .ls-faq h2,
  .ls-capability-heading h2,
  .ls-studio-showcase h2,
  .ls-event-engagement h2 {
    font-size: clamp(28px, 8.2vw, 34px);
    letter-spacing: -1px;
  }

  .ls-experience-copy h3 {
    font-size: 25px;
  }
}

/* Event delivery panel: reserve clear lanes for status, copy, and step number. */
.ls-capability-flow {
  height: 226px;
}

.ls-capability-flow-top {
  gap: var(--space-3);
  min-height: 34px;
  padding: var(--space-4) var(--space-5) 0;
}

.ls-capability-flow-top > span {
  min-width: 0;
}

.ls-capability-flow-top b {
  flex: 0 0 auto;
}

.ls-capability-flow-slides {
  inset: 62px var(--space-6) var(--space-9);
}

.ls-capability-flow-slide {
  grid-template-columns: 56px minmax(0, 1fr) 36px;
  gap: var(--space-4);
  align-items: start;
}

.ls-capability-flow-slide > div {
  min-width: 0;
  padding-top: var(--space-1);
}

.ls-capability-flow-slide small {
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}

.ls-capability-flow-slide strong {
  line-height: 1.18;
}

.ls-capability-flow-slide p {
  margin: var(--space-2) 0 0;
  line-height: 1.45;
}

.ls-capability-flow-slide em {
  display: grid;
  align-self: start;
  justify-self: end;
  min-width: 32px;
  place-items: center;
  padding-top: var(--space-1);
  line-height: 1;
}

.ls-capability-flow-progress {
  right: var(--space-6);
  bottom: var(--space-5);
}

@media (max-width: 600px) {
  .ls-capability-flow {
    height: 252px;
  }

  .ls-capability-flow-top {
    min-height: 32px;
    padding: var(--space-4) var(--space-4) 0;
  }

  .ls-capability-flow-slides {
    inset: 58px var(--space-4) var(--space-9);
  }

  .ls-capability-flow-slide {
    grid-template-columns: 46px minmax(0, 1fr) 28px;
    gap: var(--space-3);
  }

  .ls-capability-flow-slide > span {
    width: 46px;
    height: 46px;
  }

  .ls-capability-flow-slide em {
    display: grid;
    min-width: 28px;
    font-size: 18px;
  }

  .ls-capability-flow-progress {
    right: var(--space-4);
    bottom: var(--space-4);
  }
}

/* Keep the studio-workflow visual centred in its available dashboard area. */
.ls-preview-main {
  position: absolute;
  inset: 54px 0 0 112px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: var(--space-6);
}

.ls-preview-stages {
  width: 100%;
  height: min(282px, 100%);
}

/* Original, lightweight processing feedback for the illustration. */
@media (prefers-reduced-motion: no-preference) {
  .ls-preview-top b {
    animation: lenspire-preview-live-pulse 2.4s ease-in-out infinite;
  }

  .ls-demo-action i,
  .ls-demo-share > span i {
    animation: lenspire-preview-confirm 3.6s ease-in-out infinite;
  }

  @keyframes lenspire-preview-live-pulse {
    0%, 100% { opacity: .65; transform: scale(.92); }
    50% { opacity: 1; transform: scale(1.1); }
  }

  @keyframes lenspire-preview-confirm {
    0%, 66%, 100% { transform: scale(1); box-shadow: none; }
    74% { transform: scale(1.16); box-shadow: 0 0 0 5px #f2dfff66; }
    82% { transform: scale(1); box-shadow: none; }
  }
}

@media (max-width: 600px) {
  .ls-preview-main {
    inset: 50px 0 0 73px;
    padding: var(--space-4);
  }

  .ls-preview-stages {
    height: min(264px, 100%);
  }
}

/* A more recognisable QR-delivery moment for the final workflow slide. */
.ls-preview-stage--share .ls-demo-share {
  gap: var(--space-2);
  padding-top: var(--space-1);
}

.ls-preview-stage--share .ls-qr {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 134px;
  height: 134px;
  gap: 5px;
  padding: var(--space-3);
  overflow: hidden;
  border: 1px solid #e7dcec;
  border-radius: var(--space-4);
  background: radial-gradient(circle at 50% 0, #faf1ff, #fff 58%);
  box-shadow: 0 14px 30px #3e1b5d18;
}

.ls-preview-stage--share .ls-qr i {
  position: relative;
  z-index: 1;
  min-width: 0;
  border-radius: 3px;
  background: #473050;
}

.ls-preview-stage--share .ls-qr i:nth-child(2n) {
  background: #7b4fb4;
}

.ls-preview-stage--share .ls-qr i:nth-child(3n) {
  background: #dc947c;
}

.ls-preview-stage--share .ls-qr i:nth-child(1),
.ls-preview-stage--share .ls-qr i:nth-child(3),
.ls-preview-stage--share .ls-qr i:nth-child(7) {
  border: 6px solid #3c2746;
  background: #fff;
  box-shadow: inset 0 0 0 4px #a65fc2;
}

.ls-preview-stage--share .ls-qr::after {
  position: absolute;
  z-index: 2;
  right: var(--space-3);
  left: var(--space-3);
  height: 2px;
  border-radius: var(--space-12);
  background: linear-gradient(90deg, transparent, #c66bdd, #7a4cad, transparent);
  box-shadow: 0 0 12px #b963d180;
  content: "";
}

.ls-preview-stage--share .ls-demo-share > b {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: #493452;
  font-size: 11px;
}

.ls-preview-stage--share .ls-demo-share > b::before {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  background: #e0f1e5;
  color: #398150;
  content: "✓";
  font-size: 10px;
}

.ls-preview-stage--share .ls-demo-share > span {
  border: 1px solid #ebe2f0;
  border-radius: var(--space-12);
  padding: var(--space-1) var(--space-3);
  background: #fff;
  box-shadow: 0 7px 15px #3e1b5d0c;
}

@media (prefers-reduced-motion: no-preference) {
  .ls-preview-stage--share .ls-qr {
    animation: lenspire-qr-float 3.8s ease-in-out infinite;
  }

  .ls-preview-stage--share .ls-qr::after {
    animation: lenspire-qr-scan 2.8s ease-in-out infinite;
  }

  .ls-preview-stage--share .ls-demo-share > span {
    animation: lenspire-delivery-pop 3.8s ease-in-out infinite;
  }

  @keyframes lenspire-qr-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }

  @keyframes lenspire-qr-scan {
    0%, 12% { top: var(--space-3); opacity: 0; }
    22% { opacity: 1; }
    72% { top: calc(100% - var(--space-3)); opacity: 1; }
    86%, 100% { top: calc(100% - var(--space-3)); opacity: 0; }
  }

  @keyframes lenspire-delivery-pop {
    0%, 60%, 100% { transform: translateY(0); box-shadow: 0 7px 15px #3e1b5d0c; }
    68% { transform: translateY(-2px); box-shadow: 0 12px 22px #63329a20; }
    76% { transform: translateY(0); }
  }
}

@media (max-width: 600px) {
  .ls-preview-stage--share .ls-qr {
    width: 116px;
    height: 116px;
  }

  .ls-preview-stage--share .ls-qr i:nth-child(1),
  .ls-preview-stage--share .ls-qr i:nth-child(3),
  .ls-preview-stage--share .ls-qr i:nth-child(7) {
    border-width: 5px;
    box-shadow: inset 0 0 0 3px #a65fc2;
  }
}

/* More dimensional AI-matching and guest-discovery visuals. */
.ls-ai-art {
  border: 1px solid #ffffff26;
  background:
    radial-gradient(circle at 50% 50%, #bf86ed44 0 20%, transparent 43%),
    radial-gradient(circle at 18% 18%, #d5a8ef9c 0, transparent 29%),
    linear-gradient(138deg, #281840, #613291 54%, #9c5f9f 125%);
  box-shadow: 0 28px 60px #3f225a24;
}

.ls-ai-art::before {
  position: absolute;
  width: 285px;
  height: 285px;
  border: 1px solid #f3d3ff4a;
  border-radius: 50%;
  box-shadow: 0 0 0 25px #f4d9ff0a, 0 0 0 55px #f4d9ff07;
  content: "";
}

.ls-ai-portrait {
  width: 182px;
  height: 182px;
  border-width: 15px;
  background:
    radial-gradient(circle at 38% 31%, #ffffff 0 3%, #9be6ff 4% 7%, transparent 8%),
    radial-gradient(circle, #0d1635 0 17%, #1f427a 18% 29%, #49357c 30% 39%, #7445a3 40% 49%, #b87fd5 50% 58%, #8654b5 59% 68%, #56337e 69% 100%);
  box-shadow: 0 0 0 10px #f8e8ff1a, 0 20px 42px #1f0a3a52, inset 0 0 24px #e3c6ff66;
}

.ls-ai-portrait::before,
.ls-ai-portrait::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.ls-ai-portrait::before {
  inset: -13px;
  border: 1px solid #f5d7ff8a;
}

.ls-ai-portrait::after {
  inset: -8px;
  border: 2px solid transparent;
  border-top-color: #fff0ff;
  border-right-color: #d58aeb;
}

.ls-ai-portrait i {
  z-index: 2;
  border-color: #ffe9ff;
  filter: drop-shadow(0 0 5px #f1c8ff99);
}

.ls-ai-art-top b {
  box-shadow: 0 0 0 4px #a7d8af25;
}

.ls-ai-match {
  border-color: #ffffff66;
  box-shadow: 0 16px 30px #1d0f3042;
}

.ls-ai-match::before {
  width: 3px;
  align-self: stretch;
  margin: -var(--space-3) 0 -var(--space-3) -var(--space-3);
  border-radius: var(--space-3) 0 0 var(--space-3);
  background: linear-gradient(#c575e2, #7653b8);
  content: "";
}

.ls-ai-match--two::before {
  background: linear-gradient(#79bbd6, #7461b7);
}

.ls-phone-preview {
  border-color: #342744;
  background:
    radial-gradient(circle at 50% 0, #f0dcff80, transparent 35%),
    linear-gradient(155deg, #fff 0%, #f7f1fc 100%);
  box-shadow: 0 25px 50px #3e244a30, inset 0 1px #fff;
}

.ls-phone-preview::before {
  position: absolute;
  top: var(--space-4);
  left: 50%;
  width: 42px;
  height: 4px;
  border-radius: var(--space-12);
  transform: translateX(-50%);
  background: #d8c8e4;
  content: "";
}

.ls-selfie-frame {
  width: 112px;
  height: 112px;
  background:
    radial-gradient(circle at 38% 31%, #fff 0 3%, #9ae8ff 4% 7%, transparent 8%),
    radial-gradient(circle, #0e1734 0 17%, #214679 18% 29%, #4b347d 30% 39%, #7547a5 40% 49%, #bb87d7 50% 58%, #f0dffc 59% 70%, #e0c9ef 71% 100%);
  box-shadow: 0 0 0 9px #f1e6f8, 0 12px 25px #57306d24, inset 0 0 18px #ffffff66;
}

.ls-selfie-frame::before,
.ls-selfie-frame::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.ls-selfie-frame::before {
  inset: -11px;
  border: 1px solid #d9a8e9;
  box-shadow: 0 0 0 5px #f4e8fb;
}

.ls-selfie-frame::after {
  inset: -6px;
  border: 2px solid transparent;
  border-top-color: #8851b4;
  border-right-color: #d477bb;
}

.ls-phone-preview .ls-selfie-frame i {
  z-index: 2;
  width: 20px;
  height: 20px;
}

.ls-phone-action {
  background: linear-gradient(100deg, #6739a6, #9d4fc3);
  box-shadow: 0 10px 18px #7040aa24;
}

@media (prefers-reduced-motion: no-preference) {
  .ls-ai-portrait {
    animation: lenspire-lens-breathe 4.2s ease-in-out infinite;
  }

  .ls-ai-portrait::after,
  .ls-selfie-frame::after {
    animation: lenspire-focus-orbit 3.6s linear infinite;
  }

  .ls-ai-art-top b {
    animation: lenspire-live-indicator 2.5s ease-in-out infinite;
  }

  .ls-selfie-frame {
    animation: lenspire-selfie-focus 4.1s ease-in-out infinite;
  }

  .ls-phone-action span {
    animation: lenspire-action-nudge 3.4s ease-in-out infinite;
  }

  @keyframes lenspire-lens-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
  }

  @keyframes lenspire-focus-orbit {
    to { transform: rotate(360deg); }
  }

  @keyframes lenspire-live-indicator {
    0%, 100% { transform: scale(.94); box-shadow: 0 0 0 4px #a7d8af25; }
    50% { transform: scale(1.08); box-shadow: 0 0 0 7px #a7d8af12; }
  }

  @keyframes lenspire-selfie-focus {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }

  @keyframes lenspire-action-nudge {
    0%, 72%, 100% { transform: translateX(0); }
    80% { transform: translateX(3px); }
    88% { transform: translateX(0); }
  }
}

@media (max-width: 600px) {
  .ls-ai-portrait {
    width: 156px;
    height: 156px;
  }

  .ls-selfie-frame {
    width: 100px;
    height: 100px;
  }
}

/* Experience composition: a colourful navigation card beside the active story. */
.lenspire-site .ls-experience {
  display: grid;
  grid-template-columns: minmax(310px, .72fr) minmax(0, 1.38fr);
  align-items: stretch;
  gap: var(--space-6);
}

.ls-experience-nav-card,
.lenspire-site .ls-experience-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #dfd1eb;
  border-radius: var(--space-6);
  box-shadow: 0 22px 48px #4b286815;
}

.ls-experience-nav-card::before,
.lenspire-site .ls-experience-panel::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 5px;
  background: linear-gradient(90deg, #663cb0, #bd59c9 55%, #d89955);
  content: "";
}

.ls-experience-nav-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(var(--space-7), 3vw, var(--space-10));
  background:
    radial-gradient(circle at 5% 5%, #d9c0f255, transparent 34%),
    radial-gradient(circle at 100% 100%, #f2c8a24d, transparent 36%),
    linear-gradient(145deg, #f5effc 0%, #fff9f5 100%);
}

.ls-experience-nav-card .ls-experience-intro {
  max-width: none;
}

.ls-experience-nav-card .ls-kicker {
  color: #7141a8;
}

.lenspire-site .ls-experience-tabs {
  display: grid;
  width: 100%;
  margin: var(--space-8) 0 0;
  padding: var(--space-2);
  overflow: visible;
  border-color: #decfe9;
  background: #ffffffb8;
  box-shadow: inset 0 1px #fff;
}

.lenspire-site .ls-experience-tabs button {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  padding-inline: var(--space-4);
  text-align: left;
  white-space: normal;
}

.lenspire-site .ls-experience-tabs button[aria-selected="true"] {
  background: linear-gradient(100deg, #653aa2, #a650c2);
  color: #fff;
  box-shadow: 0 8px 18px #6f3aa52e;
}

.ls-experience-panels {
  display: grid;
  min-width: 0;
}

.lenspire-site .ls-experience-panel {
  grid-template-columns: minmax(250px, .88fr) minmax(0, 1.12fr);
  gap: clamp(var(--space-6), 3vw, var(--space-9));
  min-height: 540px;
  height: 100%;
  border-color: #dfd0ea;
  padding: clamp(var(--space-7), 3vw, var(--space-9));
  background:
    radial-gradient(circle at 8% 14%, #c9a6eb4a, transparent 33%),
    radial-gradient(circle at 96% 90%, #e9b77e42, transparent 34%),
    linear-gradient(135deg, #f3ebfc 0%, #fff 52%, #fcf2f7 100%);
}

.lenspire-site .ls-experience-copy {
  max-width: none;
}

.lenspire-site .ls-experience-number {
  background: linear-gradient(135deg, #6d40aa, #b45fc5);
  color: #fff;
  box-shadow: 0 8px 16px #7744a72b;
}

@media (prefers-reduced-motion: no-preference) {
  .lenspire-site .ls-experience-panel.is-active {
    animation: lenspire-experience-slide 460ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .lenspire-site .ls-experience-tabs button[aria-selected="true"]::after {
    position: absolute;
    right: var(--space-3);
    bottom: 5px;
    left: var(--space-3);
    height: 2px;
    border-radius: var(--space-4);
    transform: scaleX(0);
    transform-origin: left;
    background: #ffffffc7;
    content: "";
  }

  .lenspire-site .ls-experience.is-auto-advancing .ls-experience-tabs button[aria-selected="true"]::after {
    animation: lenspire-experience-progress 5.2s linear both;
  }

  @keyframes lenspire-experience-slide {
    from { opacity: 0; transform: translateX(22px) scale(.992); }
    to { opacity: 1; transform: translateX(0) scale(1); }
  }

  @keyframes lenspire-experience-progress {
    to { transform: scaleX(1); }
  }
}

@media (max-width: 1000px) {
  .lenspire-site .ls-experience {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .ls-experience-nav-card {
    padding: var(--space-8);
  }

  .lenspire-site .ls-experience-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lenspire-site .ls-experience-tabs button {
    justify-content: center;
    text-align: center;
  }

  .lenspire-site .ls-experience-panel {
    grid-template-columns: minmax(250px, .86fr) minmax(0, 1.14fr);
    min-height: 0;
  }
}

@media (max-width: 700px) {
  .lenspire-site .ls-experience {
    gap: var(--space-4);
    padding-block: var(--space-8);
  }

  .ls-experience-nav-card {
    padding: var(--space-6);
  }

  .lenspire-site .ls-experience-tabs {
    margin-top: var(--space-6);
  }

  .lenspire-site .ls-experience-tabs button {
    min-height: 44px;
    padding: var(--space-2);
    font-size: 10px;
  }

  .lenspire-site .ls-experience-panel {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-5);
  }

  .lenspire-site .ls-phone-preview,
  .lenspire-site .ls-studio-preview,
  .lenspire-site .ls-share-preview {
    width: min(290px, 100%);
  }
}

/* Keep the animated lens contained and remove unused height from the desktop story panel. */
.lenspire-site .ls-selfie-frame {
  isolation: isolate;
  overflow: hidden;
  width: 124px;
  height: 124px;
  border: 1px solid #d8c6e6;
  border-radius: var(--space-4);
  background: linear-gradient(145deg, #f9f4fd, #eee0f8);
  box-shadow: 0 12px 25px #57306d1f, inset 0 1px #fff;
}

.lenspire-site .ls-selfie-frame::before {
  inset: 17px;
  z-index: 0;
  border: 1px solid #d3acdF;
  background:
    radial-gradient(circle at 38% 31%, #fff 0 3%, #9ae8ff 4% 7%, transparent 8%),
    radial-gradient(circle, #0e1734 0 17%, #214679 18% 29%, #4b347d 30% 39%, #7547a5 40% 49%, #bb87d7 50% 58%, #f0dffc 59% 70%, #e0c9ef 71% 100%);
  box-shadow: 0 0 0 7px #ecdaf5, inset 0 0 14px #ffffff70;
}

.lenspire-site .ls-selfie-frame::after {
  inset: 22px;
  z-index: 1;
  border-width: 2px;
  border-top-color: #8851b4;
  border-right-color: #d477bb;
}

.lenspire-site .ls-phone-preview .ls-selfie-frame i {
  z-index: 2;
  width: 18px;
  height: 18px;
}

.lenspire-site .ls-phone-preview .ls-selfie-frame i:nth-of-type(1) { top: 9px; left: 9px; }
.lenspire-site .ls-phone-preview .ls-selfie-frame i:nth-of-type(2) { top: 9px; right: 9px; }
.lenspire-site .ls-phone-preview .ls-selfie-frame i:nth-of-type(3) { bottom: 9px; left: 9px; }
.lenspire-site .ls-phone-preview .ls-selfie-frame i:nth-of-type(4) { right: 9px; bottom: 9px; }

@media (min-width: 1001px) {
  .lenspire-site .ls-experience-nav-card {
    padding: var(--space-8);
  }

  .lenspire-site .ls-experience-nav-card .ls-experience-intro h2 {
    font-size: clamp(38px, 3.1vw, 44px);
  }

  .lenspire-site .ls-experience-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--space-6);
  }

  .lenspire-site .ls-experience-tabs button {
    min-height: 52px;
    justify-content: center;
    padding: var(--space-2);
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
  }

  .lenspire-site .ls-experience-panel {
    grid-template-columns: minmax(290px, .9fr) minmax(0, 1.1fr);
    min-height: 450px;
    padding: var(--space-8);
  }
}

@media (max-width: 700px) {
  .lenspire-site .ls-selfie-frame {
    width: 112px;
    height: 112px;
  }

  .lenspire-site .ls-selfie-frame::before { inset: 16px; }
  .lenspire-site .ls-selfie-frame::after { inset: 21px; }
}

/* Use one compact transition between the event cards and experience showcase. */
.lenspire-site .ls-audiences {
  padding-bottom: var(--space-6);
}

.lenspire-site .ls-experience {
  padding-top: var(--space-6);
}

@media (max-width: 1000px) {
  .lenspire-site .ls-audiences {
    padding-bottom: var(--space-5);
  }

  .lenspire-site .ls-experience {
    padding-top: var(--space-5);
  }
}

@media (max-width: 700px) {
  .lenspire-site .ls-audiences {
    padding-bottom: var(--space-4);
  }

  .lenspire-site .ls-experience {
    padding-top: var(--space-4);
  }
}

/* Separate the phone CTA and keep the sharing story compact. */
.lenspire-site .ls-phone-action {
  margin-top: var(--space-8);
}

@media (min-width: 701px) {
  .lenspire-site .ls-phone-action {
    margin-top: var(--space-7);
  }
}

.lenspire-site .ls-share-preview {
  width: min(280px, 100%);
  padding: var(--space-6);
}

.lenspire-site .ls-share-preview > p {
  margin: var(--space-3) 0 var(--space-2);
}

.lenspire-site .ls-share-preview .ls-qr {
  width: 128px;
  height: 128px;
  gap: 6px;
  margin: 18px auto 14px;
  padding: 10px;
}

.lenspire-site .ls-share-preview > div:last-child {
  margin: var(--space-4) 0 0;
  padding: 14px 0 0;
}

@media (max-width: 700px) {
  .lenspire-site .ls-share-preview {
    width: min(260px, 100%);
    padding: var(--space-5);
  }

  .lenspire-site .ls-share-preview > p {
    margin-top: 10px;
  }

  .lenspire-site .ls-share-preview .ls-qr {
    width: 116px;
    height: 116px;
    margin: var(--space-4) auto var(--space-3);
  }

  .lenspire-site .ls-share-preview > div:last-child {
    margin-top: 14px;
    padding-top: var(--space-3);
  }
}

/* Keep the experience, AI showcase, and feature navigation visually connected. */
.lenspire-site .ls-experience {
  padding-bottom: var(--space-6);
}

.lenspire-site .ls-ai-showcase {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.lenspire-site .ls-capability-tabs {
  margin-top: var(--space-6);
}

@media (max-width: 1000px) {
  .lenspire-site .ls-experience {
    padding-bottom: var(--space-5);
  }

  .lenspire-site .ls-ai-showcase {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }

  .lenspire-site .ls-capability-tabs {
    margin-top: var(--space-5);
  }
}

@media (max-width: 700px) {
  .lenspire-site .ls-experience {
    padding-bottom: var(--space-4);
  }

  .lenspire-site .ls-ai-showcase {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .lenspire-site .ls-capability-tabs {
    margin-top: var(--space-4);
  }
}

/* Remove stacked spacing between the capability tabs and KPI cards. */
.lenspire-site .ls-capability-tabs {
  margin-bottom: 0;
}

.lenspire-site .ls-kpi-highlights {
  padding-top: var(--space-6);
}

.lenspire-site .ls-kpi-highlights .ls-capability-grid {
  margin-top: 0;
}

@media (max-width: 1000px) {
  .lenspire-site .ls-kpi-highlights {
    padding-top: var(--space-5);
  }
}

@media (max-width: 700px) {
  .lenspire-site .ls-kpi-highlights {
    padding-top: var(--space-4);
  }
}

/* Present each mobile experience story as one numbered sentence. */
.ls-mobile-story-number {
  display: none;
}

@media (max-width: 700px) {
  .lenspire-site .ls-experience-copy .ls-experience-number {
    display: none;
  }

  .lenspire-site .ls-experience-copy .ls-mobile-story-number {
    display: inline;
  }

  .lenspire-site .ls-experience-copy h3 {
    margin-top: 0;
  }

  .lenspire-site #discover-panel {
    row-gap: var(--space-10);
  }
}

/* Remove the doubled gap between KPI cards and the detailed feature flow. */
.lenspire-site .ls-kpi-highlights {
  padding-bottom: 0;
}

.lenspire-site .ls-capability-detail {
  margin-top: var(--space-6);
}

@media (max-width: 1000px) {
  .lenspire-site .ls-capability-detail {
    margin-top: var(--space-5);
  }
}

@media (max-width: 700px) {
  .lenspire-site .ls-capability-detail {
    margin-top: var(--space-4);
  }
}

/* Keep each mobile story number colorful and aligned with its heading. */
@media (max-width: 700px) {
  .lenspire-site .ls-experience-copy {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3);
  }

  .lenspire-site .ls-experience-copy .ls-experience-number {
    display: grid;
    grid-column: 1;
    grid-row: 1;
  }

  .lenspire-site .ls-experience-copy .ls-mobile-story-number {
    display: none;
  }

  .lenspire-site .ls-experience-copy h3 {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
  }

  .lenspire-site .ls-experience-copy > p,
  .lenspire-site .ls-experience-copy > ul {
    grid-column: 1 / -1;
  }

  .lenspire-site .ls-experience-copy > p {
    margin-top: var(--space-4);
  }
}

/* Lead with the animated feature flow, then show the four supporting cards. */
.lenspire-site .ls-capability-showcase {
  display: flex;
  flex-direction: column;
}

.lenspire-site .ls-capability-detail {
  order: 1;
}

.lenspire-site .ls-kpi-highlights {
  order: 2;
}

/* Place the animated delivery story directly below the engagement heading. */
.lenspire-site .ls-engagement-flow {
  width: min(900px, 100%);
  margin: var(--space-6) auto var(--space-8);
}

@media (max-width: 1000px) {
  .lenspire-site .ls-engagement-flow {
    margin-top: var(--space-5);
    margin-bottom: var(--space-6);
  }
}

@media (max-width: 700px) {
  .lenspire-site .ls-engagement-flow {
    margin-top: var(--space-4);
    margin-bottom: var(--space-5);
  }
}

/* Keep Key Features lightweight: plain introduction followed by four cards. */
.lenspire-site #key-features .ls-capability-detail {
  width: 100%;
  max-width: none;
  padding: var(--space-6) 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lenspire-site #key-features .ls-capability-heading {
  margin-inline: auto;
}

.lenspire-site #key-features .ls-capability-flow {
  display: none;
}

@media (max-width: 1000px) {
  .lenspire-site #key-features .ls-capability-detail {
    padding-top: var(--space-5);
  }
}

@media (max-width: 700px) {
  .lenspire-site #key-features .ls-capability-detail {
    padding-top: var(--space-4);
  }
}

/* Show only the capability selected in the tab list. */
.lenspire-site .ls-capability-experience [data-capability-panel][hidden] {
  display: none !important;
}

/* Keep the studio copy first and prevent the full-width panel from overflowing. */
.lenspire-site .ls-studio-showcase {
  box-sizing: border-box;
  width: 100%;
  margin-inline: 0;
  padding-block: var(--space-9);
}

@media (max-width: 700px) {
  .lenspire-site .ls-studio-showcase {
    padding-block: var(--space-7);
  }
}

/* Join the engagement cards directly to the following gallery section. */
.lenspire-site #event-engagement {
  padding-bottom: 0;
}

/* Remove the doubled whitespace between gallery cards and the process section. */
.lenspire-site #sample-galleries {
  padding-bottom: 0;
}

.lenspire-site #how-it-works {
  padding-top: var(--space-7);
  padding-bottom: 0;
}

.lenspire-site .ls-workflow-proof {
  padding-top: var(--space-7);
  padding-bottom: 0;
}

@media (max-width: 700px) {
  .lenspire-site #how-it-works {
    padding-top: var(--space-6);
  }

  .lenspire-site .ls-workflow-proof {
    padding-top: var(--space-6);
  }
}

/* Remove doubled whitespace between the pricing panel and Studio Notes. */
.lenspire-site #pricing {
  padding-top: var(--space-7);
  padding-bottom: 0;
}

.lenspire-site .ls-studio-notes {
  padding-top: var(--space-7);
  padding-bottom: 0;
}

.lenspire-site #faq {
  padding-top: var(--space-7);
}

@media (max-width: 700px) {
  .lenspire-site #pricing,
  .lenspire-site .ls-studio-notes {
    padding-top: var(--space-6);
  }

  .lenspire-site #faq {
    padding-top: var(--space-6);
  }
}

/* Keep one compact gap between the FAQ list and final call-to-action. */
.lenspire-site .ls-faq {
  padding-bottom: 0;
}

.lenspire-site .ls-cta {
  margin-top: var(--space-7);
}

@media (max-width: 700px) {
  .lenspire-site .ls-cta {
    margin-top: var(--space-6);
  }
}

/* Conversion, preview, and privacy additions. */
.lenspire-site .hx-cta-note {
  margin: var(--space-3) 0 0;
  color: #6f6676;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

.lenspire-site .ls-sample-experience,
.lenspire-site .ls-privacy-trust {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(var(--space-7), 7vw, var(--space-11));
  width: min(1120px, 90vw);
  margin: 0 auto;
  padding: var(--space-11) 0;
  align-items: center;
}

.lenspire-site .ls-sample-experience {
  grid-template-columns: minmax(430px, .92fr) minmax(0, 1.08fr);
  gap: clamp(54px, 8vw, 110px);
  width: min(1200px, 86vw);
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
}

.lenspire-site .ls-audiences {
  padding-top: var(--space-6);
}

.lenspire-site .ls-sample-copy {
  max-width: 500px;
}

.lenspire-site .ls-sample-copy h2 {
  font-size: clamp(52px, 5vw, 68px);
  line-height: 1.04;
  letter-spacing: -3.5px;
}

.lenspire-site .ls-sample-copy .ls-primary {
  min-width: 290px;
  justify-content: space-between;
  margin-top: var(--space-1);
}

.lenspire-site .ls-sample-steps {
  gap: 12px;
}

.lenspire-site .ls-sample-steps li {
  min-height: 90px;
  padding: 18px 20px;
  border-radius: 20px;
}

.lenspire-site .ls-sample-copy h2,
.lenspire-site .ls-privacy-trust h2 {
  margin: var(--space-3) 0 var(--space-4);
  color: #2f2835;
  font-size: clamp(38px, 4.5vw, 62px);
  line-height: .98;
  letter-spacing: -2.5px;
}

.lenspire-site .ls-sample-copy h2 {
  font-size: clamp(52px, 5vw, 68px);
  line-height: 1.04;
  letter-spacing: -3.5px;
}

.lenspire-site .ls-sample-copy h2 em,
.lenspire-site .ls-privacy-trust h2 em { color: #8247db; font-style: normal; }
.lenspire-site .ls-sample-copy > p:last-of-type,
.lenspire-site .ls-privacy-trust > div > p:last-of-type { margin: 0 0 var(--space-5); color: #756c7b; line-height: 1.75; }

.lenspire-site .ls-sample-steps,
.lenspire-site .ls-privacy-trust ul { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.lenspire-site .ls-sample-steps li,
.lenspire-site .ls-privacy-trust li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding: var(--space-5); border: 1px solid #e4dcec; border-radius: 20px; background: rgba(255,255,255,.84); box-shadow: 0 16px 45px rgba(80,48,114,.07); }
.lenspire-site .ls-sample-steps li { border-color: #ded2ee; background: linear-gradient(135deg, #fbf9ff 0%, #f1eaff 100%); box-shadow: 0 16px 45px rgba(80,48,114,.08); }
.lenspire-site .ls-sample-steps li > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; background: #f0e7ff; color: #7c42cf; font-size: 12px; font-weight: 800; }
.lenspire-site .ls-sample-steps div,
.lenspire-site .ls-privacy-trust li { align-items: center; }
.lenspire-site .ls-sample-steps b,
.lenspire-site .ls-privacy-trust li b { display: block; color: #352e3b; font-size: 15px; }
.lenspire-site .ls-sample-steps small,
.lenspire-site .ls-privacy-trust li span { display: block; margin-top: 5px; color: #786f7e; font-size: 12px; line-height: 1.55; }
.lenspire-site .ls-privacy-trust { width: min(1120px, 90vw); margin-top: 0; padding: var(--space-7) clamp(var(--space-7), 7vw, var(--space-10)) clamp(var(--space-7), 7vw, var(--space-10)); border-radius: 32px; background: linear-gradient(135deg,#f2ecff,#fcfbff); }
.lenspire-site .ls-privacy-trust li { grid-template-columns: 1fr; }

@media (max-width: 800px) {
  .lenspire-site .ls-sample-experience,
  .lenspire-site .ls-privacy-trust { grid-template-columns: 1fr; width: min(92vw, 600px); gap: var(--space-7); padding-block: var(--space-9); }
  .lenspire-site .ls-privacy-trust { padding: var(--space-6); }
  .lenspire-site .ls-sample-experience { grid-template-columns: 1fr; width: min(92vw, 600px); padding-top: var(--space-6); padding-bottom: var(--space-5); }
  .lenspire-site .ls-audiences { padding-top: var(--space-5); }
  .lenspire-site .ls-sample-copy h2,
  .lenspire-site .ls-privacy-trust h2 { font-size: clamp(36px, 10vw, 46px); letter-spacing: -1.5px; }
  .lenspire-site .ls-sample-copy h2 br { display: none; }
  .lenspire-site .ls-sample-copy .ls-primary { width: 100%; min-width: 0; }
  .lenspire-site .hx-cta-note { text-align: center; }
}

/* Keep the four-step process introduction aligned with the page's left edge. */
.lenspire-site .ls-how {
  text-align: left;
}

.lenspire-site .ls-how h2 {
  margin: var(--space-4) auto var(--space-5);
  text-align: left;
}

.lenspire-site .ls-how > .ls-kicker,
.lenspire-site .ls-how > h2 {
  box-sizing: border-box;
  padding-left: var(--space-4);
}

/* Lift the three gallery cards and keep a clean gap before the next section. */
.lenspire-site .ls-gallery-cards {
  margin-top: var(--space-6);
  margin-bottom: var(--space-10);
}

.lenspire-site #how-it-works {
  padding-bottom: var(--space-5);
}

.lenspire-site .ls-workflow-proof {
  padding-top: var(--space-4);
}

@media (max-width: 700px) {
  .lenspire-site .ls-how > .ls-kicker,
  .lenspire-site .ls-how > h2 { padding-left: var(--space-2); }
}

/* Pull the credit panel upward and reduce empty space inside its top edge. */
.lenspire-site #pricing {
  padding-top: var(--space-4);
}

.lenspire-site #pricing .ls-pricing-card {
  padding-top: var(--space-6);
}

@media (max-width: 700px) {
  .lenspire-site #pricing { padding-top: var(--space-3); }
  .lenspire-site #pricing .ls-pricing-card { padding-top: var(--space-5); }
}

/* When desktop line breaks are removed on tablets and phones, keep a real
   word-space in their place so adjacent words never run together. */
@media (max-width: 800px) {
  .lenspire-site .ls-sample-copy h2 br,
  .lenspire-site .ls-section-title h2 br,
  .lenspire-site .ls-features h2 br,
  .lenspire-site .ls-how h2 br,
  .lenspire-site .ls-cta h2 br,
  .lenspire-site .ls-experience h2 br,
  .lenspire-site .ls-gallery-showcase h2 br,
  .lenspire-site .ls-ai-showcase h2 br,
  .lenspire-site .ls-workflow-proof h2 br,
  .lenspire-site .ls-capability-heading h2 br,
  .lenspire-site .ls-studio-showcase h2 br,
  .lenspire-site .ls-event-engagement h2 br,
  .lenspire-site .ls-pricing h2 br,
  .lenspire-site .ls-studio-notes h2 br,
  .lenspire-site .ls-faq h2 br {
    display: inline-block !important;
    width: .24em;
  }
}