/* ===== Hero ===== */

.hero {
  min-height: calc(100dvh - var(--navbar-height) - (2 * var(--space-6)) - var(--space-10));
  width: min(calc(100% - (2 * var(--space-4))), var(--container-max));
  margin-top: var(--space-10);
  margin-inline: auto;
  padding-bottom: var(--space-0);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  transform: translateY(calc(var(--space-4) * -1));
}

.hero__rating {
  color: var(--color-tertiary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-wider);
}

.hero__recommendation {
  margin: var(--space-2) 0 0;
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body-md);
}

.hero__title {
  max-width: 22ch;
  margin: var(--space-2) auto 0;
  color: var(--color-black);
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-display));
  font-weight: 500;
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-h1);
}

.hero__accent {
  color: var(--color-primary);
}

.hero__description {
  max-width: 45ch;
  margin: var(--space-4) auto 0;
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
  font-weight: 400;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--font-size-h2);
  font-weight: 500;
  line-height: var(--line-height-label);
  text-decoration: none;
}

.hero__cta--primary {
  color: var(--color-on-primary);
  background-color: var(--color-on-primary-fixed);
}

.hero__cta--secondary {
  gap: var(--space-2);
  color: var(--color-on-primary-fixed);
  background-color: var(--color-primary-fixed);
}

.hero__cta .material-symbols-outlined {
  font-size: var(--font-size-2xl);
  font-variation-settings:
    "FILL" 1,
    "wght" 600,
    "GRAD" 0,
    "opsz" 24;
}

.hero__cta:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.hero__artwork {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 10.5rem))
    minmax(0, 1fr)
    repeat(2, minmax(0, 10.5rem));
  align-items: end;
  gap: var(--space-4);
  margin-top: calc(var(--space-16) * -2 - var(--space-4));
}

.hero__image-frame {
  position: relative;
  overflow: visible;
}

.hero__image--outer::before,
.hero__image--side::before {
  position: absolute;
  inset-inline: 0;
  bottom: calc(100% + var(--space-4));
  width: 100%;
  background: linear-gradient(
    var(--hero-ghost-angle),
    transparent 0%,
    rgb(0 0 0 / 0.04) 100%,
    rgb(115 115 115 / 0.16) 100%
  );
  border-radius: var(--radius-2xl);
  pointer-events: none;
  content: "";
}

.hero__image--outer::before {
  height: auto;
  aspect-ratio: 21 / 22;
}

.hero__image--side::before {
  height: auto;
  aspect-ratio: 1;
}

.hero__image-frame--left {
  --hero-ghost-angle: 225deg;
}

.hero__image-frame--right {
  --hero-ghost-angle: 135deg;
}

.hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-2xl);
}

.hero__image--outer {
  --hero-ghost-angle: 180deg;
  height: auto;
  margin-bottom: calc(var(--space-16) * 2);
  aspect-ratio: 21 / 34;
  object-position: center;
}

.hero__image--side {
  height: auto;
  margin-bottom: var(--space-10);
  aspect-ratio: 21 / 34;
  object-position: center;
}

.hero__image--main {
  height: auto;
  aspect-ratio: 34 / 15;
  object-position: center;
}

@media (max-width: 48rem) {
  .hero__artwork {
    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      minmax(0, 3fr)
      repeat(2, minmax(0, 1fr));
    margin-top: calc((var(--space-16) * 3) + var(--space-8));
  }
}

/* ===== Problems ===== */

.problems {
  width: min(calc(100% - (2 * var(--space-4))), var(--container-max));
  margin-inline: auto;
  padding-block: calc(var(--space-24) + var(--space-20)) var(--space-4);
}

.problems__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  justify-content: center;
  width: 100%;
  max-width: 76.25rem;
  margin-inline: auto;
  column-gap: 3.75rem;
}

.problems__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-on-background);
  font-size: var(--font-size-label-sm);
  font-weight: 500;
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-widest);
}

.problems__eyebrow-text {
  transform: translateY(2px);
}

.problems__eyebrow-mark {
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--color-primary);
  transform: rotate(45deg);
}

.problems__title {
  max-width: 22ch;
  margin: var(--space-6) 0 0;
  color: var(--color-black);
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-display));
  font-weight: 500;
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.problems__title-line {
  display: block;
}

.problems__accent {
  color: var(--color-primary);
}

.problems__media {
  width: 100%;
  max-width: none;
  margin: var(--space-8) 0 0;
  overflow: hidden;
  aspect-ratio: 608 / 432;
  border-radius: var(--radius-3xl);
}

.problems__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 608 / 432;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-3xl);
}

.problems__list {
  display: grid;
  gap: var(--space-5);
  padding-top: calc(var(--space-20) + var(--space-6));
}

.problem-card {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-6);
  width: 100%;
  min-height: 9.75rem;
  padding: var(--space-6) var(--space-8);
  background-color: var(--color-surface-container-lowest);
  border-radius: var(--radius-2xl);

  translate: 0 0;
  transition:
    background-color var(--transition-medium),
    translate var(--transition-base),
    box-shadow var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
  .problem-card:hover {
    translate: var(--space-2) 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  }
}

.problem-card:is(:hover, :focus-within) {
  background-color: var(--color-surface-container-high);
}

.problem-card__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  color: var(--color-primary);
  background-color: var(--color-surface-container-high);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-medium);
}

.problem-card:is(:hover, :focus-within) .problem-card__icon {
  background-color: var(--color-primary-container);
}

.problem-card__icon .material-symbols-outlined {
  font-size: var(--font-size-2xl);
  font-variation-settings:
    "FILL" 1,
    "wght" 600,
    "GRAD" 0,
    "opsz" 24;
}

.problem-card__content {
  min-width: 0;
}

.problem-card__title,
.problem-card__description {
  margin: 0;
}

.problem-card__title {
  color: var(--color-black);
  font-size: var(--font-size-2xl);
  font-weight: 500;
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

.problem-card__description {
  margin-top: var(--space-2);
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-h2);
}

@media (min-width: 82rem) {
  .problem-card:nth-child(2) {
    transform: translateX(var(--space-8));
  }
}

@media (max-width: 78rem) {
  .problems__layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 48rem;
    margin-inline: auto;
  }

  .problems__list {
    margin-top: var(--space-8);
    padding-top: 0;
  }
}

@media (max-width: 30rem) {
  .problems {
    padding-block: var(--space-16);
  }

  .problems__title {
    font-size: clamp(2.25rem, 10vw, var(--font-size-display));
  }

  .problem-card {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--space-4);
    height: auto;
    padding: var(--space-5);
  }

  .problem-card__title {
    font-size: var(--font-size-xl);
  }
}

/* ===== Solution ===== */

.solution {
  width: min(calc(100% - (2 * var(--space-4))), var(--container-max));
  margin-inline: auto;
  padding-block: calc(var(--landing-section-padding) + var(--space-24));
}

.solution__header {
  text-align: center;
}

.solution__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-on-background);
  font-size: var(--font-size-label-sm);
  font-weight: 500;
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-widest);
}

.solution__eyebrow-mark {
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--color-primary);
  transform: rotate(45deg);
}

.solution__title {
  max-width: 20ch;
  margin: var(--space-10) auto 0;
  color: var(--color-black);
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-display));
  font-weight: 500;
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.solution__accent {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-primary);
}

.solution__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.303fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-16);
  margin-top: var(--space-20);
}

.solution__steps {
  display: grid;
  gap: var(--space-5);
}

.solution__step {
  width: 100%;
  min-height: var(--space-24);
  padding: var(--space-5) var(--space-8);
  color: var(--color-on-surface-variant);
  background-color: transparent;
  border: 0;
  border-radius: var(--radius-2xl);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 280ms ease,
    color 280ms ease;
}

.solution__step-content {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    color 260ms ease;
}

.solution__step-label {
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-display));
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--letter-spacing-display);
}

.solution__step-number {
  font-size: var(--font-size-body-md);
  font-weight: 600;
  line-height: 1;
}

.solution__step:is(:hover, :focus-visible),
.solution__step.is-active {
  color: var(--color-primary);
  background-color: var(--color-surface-container-high);
}

.solution__step:not(.is-active) .solution__step-content {
  transform: translateX(calc(var(--space-4) * -1));
}

.solution__step:is(:hover, :focus-visible) .solution__step-content,
.solution__step.is-active .solution__step-content {
  transform: translateX(var(--space-4));
}

.solution__step:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.solution__panels {
  display: grid;
}

.solution__panel {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--space-2));
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 220ms;
}

.solution__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.solution__media {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 528 / 328;
  border-radius: var(--radius-3xl);
}

.solution__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.solution__panel-title {
  margin: var(--space-6) 0 0;
  color: var(--color-black);
  font-size: var(--font-size-xl);
  font-weight: 500;
  line-height: var(--line-height-h2);
}

.solution__description {
  max-width: 54ch;
  margin: var(--space-1) 0 0;
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
}

@media (max-width: 60rem) {
  .solution {
    min-height: auto;
  }

  .solution__layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 48rem;
    margin-inline: auto;
  }

  .solution__step {
    min-height: auto;
  }

  .solution__media {
    max-width: none;
  }
}

@media (max-width: 30rem) {
  .solution {
    padding-block: var(--space-16);
  }

  .solution__layout {
    gap: var(--space-10);
    margin-top: var(--space-12);
  }

  .solution__steps {
    gap: var(--space-4);
  }

  .solution__step {
    padding: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .solution__step,
  .solution__step-content,
  .solution__panel {
    transition-duration: 1ms;
  }

  .problem-card {
    transition:
      background-color var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  .problem-card:hover {
    translate: 0 0;
  }
}

/* ===== How It Works ===== */

.how-it-works {
  width: min(calc(100% - (2 * var(--space-4))), var(--container-max));
  margin-inline: auto;
  padding-block: var(--space-10) var(--space-8);
}

.how-it-works__content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--space-24);
}

.how-it-works__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-label-sm);
  font-weight: 500;
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-widest);
}

.how-it-works__eyebrow-mark {
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--color-primary);
  transform: rotate(45deg);
}

.how-it-works__title {
  max-width: 23ch;
  margin: var(--space-8) 0 0;
  color: var(--color-black);
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-display));
  font-weight: 500;
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.how-it-works__title-line {
  display: block;
  margin-top: var(--space-2);
}

.how-it-works__accent {
  color: var(--color-primary);
}

.how-it-works__description {
  max-width: 54ch;
  margin: var(--space-8) 0 0;
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
}

.how-it-works__actions {
  justify-content: flex-start;
  margin-top: var(--space-10);
}

.how-it-works__timeline-frame {
  position: relative;
  min-width: 0;
}

.how-it-works__connector {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4.5rem;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.how-it-works__line {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}

.how-it-works__line--base {
  stroke: var(--color-surface-container-high);
  opacity: 0.55;
}

.how-it-works__line--progress {
  stroke: var(--color-primary);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

.how-it-works.is-visible .how-it-works__line--progress {
  animation: draw-timeline-line 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes draw-timeline-line {
  0% {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  75% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  90%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

.how-it-works__timeline {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.how-it-works__step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-8);
}

.how-it-works__number {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.5rem;
  aspect-ratio: 1;
  color: var(--color-black);
  background-color: var(--color-surface-container-lowest);
  border-radius: var(--radius-full);
  font-size: var(--font-size-2xl);
  font-weight: 500;
  line-height: 1;
}

.how-it-works__step-content {
  min-width: 0;
  padding-top: var(--space-1);
}

.how-it-works__step-title,
.how-it-works__step-description {
  margin: 0;
}

.how-it-works__step-title {
  color: var(--color-black);
  font-size: var(--font-size-h2);
  font-weight: 500;
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

.how-it-works__step-description {
  max-width: 48ch;
  margin-top: var(--space-2);
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
}

.how-it-works__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
}

.how-it-works__stat {
  display: grid;
  justify-items: center;
  text-align: center;
}

.how-it-works__stat-value {
  color: var(--color-primary);
  font-size: clamp(var(--font-size-h1), 3vw, var(--font-size-5xl));
  font-weight: 600;
  line-height: 1;
}

.how-it-works__stat-label {
  max-width: 9ch;
  margin-top: var(--space-2);
  color: var(--color-black);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-label);
}

@media (max-width: 60rem) {
  .how-it-works {
    padding-block: var(--space-20);
  }

  .how-it-works__content {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
    max-width: 48rem;
    margin-inline: auto;
  }

  .how-it-works__timeline-frame {
    width: 100%;
  }

  .how-it-works__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 48rem;
    margin-inline: auto;
    margin-top: var(--space-16);
  }
}

@media (max-width: 30rem) {
  .how-it-works {
    padding-block: var(--space-16);
  }

  .how-it-works__title {
    font-size: clamp(2.25rem, 10vw, var(--font-size-display));
  }

  .how-it-works__actions {
    align-items: stretch;
  }

  .how-it-works__actions .hero__cta {
    flex: 1 1 100%;
  }

  .how-it-works__step {
    column-gap: var(--space-4);
  }

  .how-it-works__stats {
    gap: var(--space-10) var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-it-works__line--progress,
  .how-it-works.is-visible .how-it-works__line--progress {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* ===== Testimonial ===== */

.testimonial {
  width: min(calc(100% - (2 * var(--space-4))), var(--container-max));
  margin-inline: auto;
  padding-block: var(--space-24);
}

.testimonial__header {
  display: grid;
  justify-items: center;
  text-align: center;
}

.testimonial__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-label-sm);
  font-weight: 500;
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-widest);
}

.testimonial__eyebrow-mark {
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--color-primary);
  transform: rotate(45deg);
}

.testimonial__title {
  max-width: 24ch;
  margin: var(--space-6) 0 0;
  color: var(--color-black);
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-display));
  font-weight: 500;
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.testimonial__title-line {
  display: block;
  margin-top: var(--space-2);
}

.testimonial__accent {
  color: var(--color-primary);
}

.testimonial__description {
  max-width: 58ch;
  margin: var(--space-6) 0 0;
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
}

.testimonial__layout {
  display: grid;
  grid-template-columns: minmax(0, 24fr) minmax(0, 25fr);
  align-items: stretch;
  column-gap: var(--space-10);
  margin-top: var(--space-8);
}

.testimonial__gallery {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
  aspect-ratio: 608 / 368;
}

.testimonial__gallery.is-staging .testimonial__portrait {
  transition: none;
}

.testimonial__portrait {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: var(--radius-2xl);
  cursor: pointer;
  opacity: 0.88;
  visibility: visible;
  transition:
    left 420ms cubic-bezier(0.22, 1, 0.36, 1),
    width 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms ease,
    visibility 0s linear;
}

.testimonial__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial__portrait--alya img,
.testimonial__portrait--bima img {
  object-position: 50% 42%;
}

.testimonial__portrait--maya img,
.testimonial__portrait--raka img {
  object-position: 50% 50%;
}

.testimonial__portrait[data-testimonial-slot="previous"] {
  left: 0;
  width: 28.947368%;
}

.testimonial__portrait[data-testimonial-slot="active"] {
  left: 31.578947%;
  width: 36.842105%;
  opacity: 1;
}

.testimonial__portrait[data-testimonial-slot="next"] {
  left: 71.052632%;
  width: 28.947368%;
}

.testimonial__portrait[data-testimonial-slot="hidden-before"],
.testimonial__portrait[data-testimonial-slot="hidden-after"] {
  width: 28.947368%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    left 420ms cubic-bezier(0.22, 1, 0.36, 1),
    width 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms ease,
    visibility 0s linear 420ms;
}

.testimonial__portrait[data-testimonial-slot="hidden-before"] {
  left: -31.578947%;
}

.testimonial__portrait[data-testimonial-slot="hidden-after"] {
  left: 100%;
}

.testimonial__portrait:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -5px;
}

.testimonial__navigation-button:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.testimonial__quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 23rem;
  padding: var(--space-8) var(--space-10);
  overflow: hidden;
  background-color: var(--color-surface-container-lowest);
  border-radius: var(--radius-3xl);
}

.testimonial__navigation {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-3);
}

.testimonial__navigation-button {
  display: grid;
  place-items: center;
  width: 3rem;
  min-width: 2.75rem;
  height: 3rem;
  padding: 0;
  color: var(--color-black);
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.testimonial__navigation-button .material-symbols-outlined {
  transition: transform var(--transition-fast);
}

.testimonial__navigation-button:first-child:hover
  .material-symbols-outlined {
  transform: translateX(-2px);
}

.testimonial__navigation-button:last-child:hover
  .material-symbols-outlined {
  transform: translateX(2px);
}

.testimonial__quote-mark {
  position: absolute;
  top: -0.26em;
  right: -0.11em;
  color: var(--color-background);
  font-size: 13rem;
    font-variation-settings:
    "FILL" 1,
    "wght" 600,
    "GRAD" 0,
    "opsz" 24; 
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}

.testimonial__quote-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding-top: var(--space-8);
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 240ms ease,
    transform 240ms ease;
}

.testimonial__quote-content.is-changing {
  opacity: 0;
  transform: translateY(var(--space-2));
}

.testimonial__quote {
  max-width: 43ch;
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-xl);
  line-height: 1.35;
}

.testimonial__author {
  display: grid;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-6);
}

.testimonial__name {
  color: var(--color-black);
  font-size: var(--font-size-lg);
  font-style: normal;
  font-weight: 600;
}

.testimonial__role {
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-body-md);
}

@media (max-width: 60rem) {
  .testimonial__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .testimonial__gallery {
    justify-self: center;
  }

  .testimonial__quote-card {
    height: auto;
    min-height: 20rem;
  }
}

@media (max-width: 40rem) {
  .testimonial {
    padding-block: var(--space-16);
  }

  .testimonial__title {
    font-size: clamp(2.25rem, 10vw, var(--font-size-display));
  }

  .testimonial__gallery {
    width: 100%;
    height: clamp(18rem, 80vw, 23rem);
  }

  .testimonial__portrait[data-testimonial-slot="previous"] {
    left: 0;
    width: 28.947368%;
  }

  .testimonial__portrait[data-testimonial-slot="active"] {
    left: 31.578947%;
    width: 36.842105%;
  }

  .testimonial__portrait[data-testimonial-slot="next"] {
    left: 71.052632%;
    width: 28.947368%;
  }

  .testimonial__portrait[data-testimonial-slot="hidden-before"],
  .testimonial__portrait[data-testimonial-slot="hidden-after"] {
    width: 28.947368%;
  }

  .testimonial__portrait[data-testimonial-slot="hidden-before"] {
    left: -31.578947%;
  }

  .testimonial__portrait[data-testimonial-slot="hidden-after"] {
    left: 100%;
  }

  .testimonial__quote-card {
    min-height: 0;
    padding: var(--space-6);
  }
}

/* ===== Final CTA + FAQ ===== */

.faq-cta {
  padding-block: var(--space-24);
}

.faq-cta__container {
  width: min(calc(100% - (2 * var(--space-4))), var(--container-max));
  margin-inline: auto;
}

.faq-cta__layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
  align-items: start;
  gap: var(--space-12);
}

.final-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34rem;
  padding: var(--space-16);
  overflow: hidden;
  color: var(--color-on-primary);
  text-align: center;
  background-image:
    linear-gradient(180deg, rgb(29 38 11 / 0.08), rgb(29 38 11 / 0.3)),
    url("../images/cta/cta.png");
  background-position: center;
  background-size: cover;
  border-radius: var(--radius-3xl);
  aspect-ratio: 22 / 17;
}

.final-cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  transform: translateY(var(--space-4));
}

.final-cta__title {
  width: 29.75rem;
  max-width: 100%;
  margin: 0;
  color: var(--color-on-primary);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--letter-spacing-display);
}

.final-cta__title-line {
  display: block;
}

.final-cta__accent {
  color: var(--color-primary-fixed);
}

.final-cta__description {
  max-width: 27.5rem;
  margin: var(--space-8) 0 0;
  color: var(--color-on-primary);
  font-size: var(--font-size-body-lg);
  font-weight: 300;
  line-height: var(--line-height-body-md);
}

.final-cta__button {
  margin-top: var(--space-10);
}

.faq {
  align-content: start;
  display: grid;
  gap: var(--space-4);
  width: 100%;
}

.faq__item {
  min-height: 4rem;
  overflow: hidden;
  background-color: var(--color-surface-container-lowest);
  border-radius: var(--radius-2xl);
  transition:
    min-height var(--transition-medium),
    background-color var(--transition-medium);
}

.faq__item.is-open {
  min-height: 8.125rem;
}

.faq__heading {
  margin: 0;
}

.faq__trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 4rem;
  padding: var(--space-4) var(--space-6);
  color: var(--color-black);
  font: inherit;
  font-size: var(--font-size-body-lg);
  font-weight: 500;
  line-height: var(--line-height-h2);
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: inherit;
}

.faq__trigger:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}

.faq__question {
  min-width: 0;
}

.faq__icon {
  flex: 0 0 auto;
  font-size: var(--font-size-2xl);
  transition: transform var(--transition-medium);
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

.faq__item.is-open .faq__icon {
  transform: rotate(90deg);
}

.faq__panel-wrapper {
  display: grid;
}

.faq__panel {
  min-height: 0;
  overflow: hidden;
}

.faq__panel p {
  margin: 0;
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
}

.faq.is-enhanced .faq__panel-wrapper {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-medium);
}

.faq.is-enhanced .faq__panel {
  opacity: 0;
  transition: opacity var(--transition-medium);
}

.faq.is-enhanced .faq__item.is-open .faq__panel-wrapper {
  grid-template-rows: 1fr;
}

.faq.is-enhanced .faq__item.is-open .faq__panel {
  opacity: 1;
}

@media (max-width: 82rem) {
  .faq-cta__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
    max-width: 44rem;
    margin-inline: auto;
  }

  .final-cta {
    width: 100%;
    min-height: clamp(30rem, 77.2727vw, 34rem);
  }
}

@media (max-width: 40rem) {
  .faq-cta {
    padding-block: var(--space-16);
  }

  .final-cta {
    padding: var(--space-8) var(--space-6);
  }

  .final-cta__description {
    margin-top: var(--space-6);
    font-size: var(--font-size-body-md);
  }

  .final-cta__button {
    width: 100%;
    margin-top: var(--space-8);
  }

  .faq__trigger {
    height: auto;
    padding: var(--space-4) var(--space-5);
  }

  .faq__panel p {
    padding: 0 var(--space-5) var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__item,
  .faq__panel-wrapper,
  .faq__panel,
  .faq__icon {
    transition-duration: 1ms;
  }

  .testimonial__portrait,
  .testimonial__quote-content,
  .testimonial__navigation-button .material-symbols-outlined {
    transition-duration: 1ms;
  }
}

/* ===== About Us ===== */

.about {
  width: min(calc(100% - (2 * var(--space-4))), var(--container-max));
  margin-inline: auto;
  padding-block: var(--space-24);
}

.about__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.303fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-16);
}

.about__media {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 688 / 608;
}

.about__figure {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 0.5rem solid var(--color-background);
  border-radius: var(--space-8);
}

.about__figure--top {
  z-index: 2;
  top: 0;
  left: 6.976744%;
  width: 51.162791%;
  height: 35.526316%;
}

.about__figure--main {
  z-index: 1;
  top: 17.105263%;
  right: 0;
  width: 68.604651%;
  height: 75%;
}

.about__figure--bottom {
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 40.116279%;
  height: 37.5%;
}

.about__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__figure--top .about__image {
  object-position: center 46%;
}

.about__figure--main .about__image {
  object-position: center;
}

.about__figure--bottom .about__image {
  object-position: 42% center;
}

.about__content {
  min-width: 0;
  max-width: 33rem;
}

.about__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-label-sm);
  font-weight: 500;
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-widest);
}

.about__eyebrow-mark {
  width: 0.625rem;
  height: 0.625rem;
  flex: 0 0 auto;
  background-color: var(--color-primary);
  transform: rotate(45deg);
}

.about__title {
  max-width: 12ch;
  margin: var(--space-6) 0 0;
  color: var(--color-black);
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-display));
  font-weight: 500;
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.about__title-line {
  display: block;
}

.about__title-line + .about__title-line {
  margin-top: var(--space-2);
}

.about__accent {
  color: var(--color-primary);
}

.about__description {
  max-width: 52ch;
  margin: var(--space-6) 0 0;
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
}

.about__checklist {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.about__check-item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
}

.about__check-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-primary);
  background-color: var(--color-surface-container-high);
  border-radius: var(--radius-full);
}

.about__check-icon .material-symbols-outlined {
  font-size: var(--font-size-xl);
  font-variation-settings:
    "FILL" 0,
    "wght" 500,
    "GRAD" 0,
    "opsz" 24;
}

.about__cta {
  margin-top: var(--space-10);
  padding: var(--space-4) var(--space-8);
}

@media (max-width: 82rem) {
  .about__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
    max-width: 48rem;
    margin-inline: auto;
  }

  .about__media {
    justify-self: center;
    width: min(100%, 43rem);
  }

  .about__content {
    max-width: 43rem;
  }
}

@media (max-width: 40rem) {
  .about {
    padding-block: var(--space-16);
  }

  .about__layout {
    gap: var(--space-10);
  }

  .about__title {
    font-size: clamp(2.25rem, 10vw, var(--font-size-display));
  }

  .about__checklist {
    gap: var(--space-4);
  }

  .about__check-item {
    align-items: start;
  }

  .about__cta {
    justify-content: center;
    width: 100%;
  }
}

/* ===== Footer ===== */

.site-footer {
  padding-block: 9.375rem 3.75rem;
  margin-top: var(--space-20);
  color: var(--color-on-surface);
  background-color: var(--color-surface-container-high);
}

.site-footer__container {
  width: min(calc(100% - (2 * var(--space-4))), var(--container-max));
  margin-inline: auto;
}

.site-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: start;
  column-gap: var(--space-20);
}

.site-footer__brand {
  min-width: 0;
}

.site-footer__brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-on-primary-container);
  font-size: var(--font-size-2xl);
  font-weight: 600;
  line-height: var(--line-height-h2);
  text-decoration: none;
}

.site-footer__brand-link .material-symbols-outlined {
  color: var(--color-primary);
  font-size: var(--font-size-3xl);
  font-variation-settings:
    "FILL" 0,
    "wght" 500,
    "GRAD" 0,
    "opsz" 30;
}

.site-footer__description {
  max-width: 22rem;
  margin: var(--space-6) 0 0;
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-lg);
}

.site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.site-footer__social-link {
  display: grid;
  place-items: center;
  width: var(--space-12);
  height: var(--space-12);
  color: var(--color-black);
  background-color: var(--color-surface-container-lowest);
  border-radius: var(--radius-full);
}

.site-footer__social-link i {
  font-size: var(--font-size-xl);
  line-height: 1;
}

.site-footer__navigation {
  display: grid;
  grid-template-columns: repeat(3, minmax(8.75rem, 1fr));
  align-items: start;
  column-gap: var(--space-20);
}

.site-footer__nav-title {
  margin: 0 0 var(--space-6);
  color: var(--color-primary-hover);
  font-size: var(--font-size-body-md);
  font-weight: 600;
  line-height: var(--line-height-h2);
}

.site-footer__nav-list {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-footer__link {
  color: var(--color-on-surface);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body-md);
  text-decoration: none;
  transition: color var(--transition-base);
}

a.site-footer__link:is(:hover, :focus-visible) {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: var(--space-1);
}

.site-footer__link--disabled {
  cursor: not-allowed;
}

.site-footer__brand-link:focus-visible,
a.site-footer__link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: var(--space-1);
}

.site-footer__divider {
  height: 0.5px;
  margin-top: calc(var(--space-24) + var(--space-1));
  background-color: var(--color-outline-variant);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-10);
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-label-bold);
  line-height: var(--line-height-body-md);
}

.site-footer__bottom p {
  margin: 0;
}

@media (max-width: 60rem) {
  .site-footer {
    padding-block: var(--space-20) var(--space-10);
  }

  .site-footer__main {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-16);
  }

  .site-footer__navigation {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-10);
  }

  .site-footer__divider {
    margin-top: var(--space-16);
  }
}

@media (max-width: 40rem) {
  .site-footer {
    padding-block: var(--space-20) var(--space-10);
  }

  .site-footer__navigation {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-10);
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* ===== Large-screen scaling ===== */

@media (min-width: 100rem) {
  .hero__artwork {
    grid-template-columns:
      repeat(2, minmax(0, 12rem))
      minmax(0, 1fr)
      repeat(2, minmax(0, 12rem));
    gap: var(--space-5);
    margin-top: calc(var(--space-16) * -2);
  }

  .problems,
  .how-it-works,
  .testimonial,
  .about,
  .faq-cta {
    padding-block: var(--landing-section-padding);
  }

  .problems__layout {
    max-width: none;
    column-gap: var(--landing-grid-gap);
  }

  .problem-card {
    min-height: 10.5rem;
    padding: var(--space-8);
  }

  .solution__layout,
  .how-it-works__content,
  .testimonial__layout,
  .about__layout {
    gap: var(--landing-grid-gap);
  }

  .solution__step {
    min-height: 7rem;
    padding: var(--space-6) var(--space-10);
  }

  .solution__panel-title,
  .how-it-works__step-title {
    font-size: 22px;
  }

  .how-it-works__stats {
    margin-top: var(--space-20);
  }

  .testimonial__quote-card {
    min-height: 0;
    padding: var(--space-10) var(--space-12);
  }

  .testimonial__quote {
    font-size: 22px;
  }

  .faq-cta__layout {
    gap: var(--landing-grid-gap);
  }

  .final-cta {
    min-height: 0;
    padding: var(--space-20);
  }

  .final-cta__title {
    width: 32rem;
    font-size: 70px;
  }

  .final-cta__description {
    max-width: 30rem;
  }

  .faq {
    gap: var(--space-5);
  }

  .faq__item,
  .faq__trigger {
    min-height: 5rem;
  }

  .faq__trigger {
    padding: var(--space-5) var(--space-8);
  }

  .faq__panel p {
    padding: 0 var(--space-8) var(--space-6);
  }

  .about__content {
    max-width: none;
  }

  .site-footer {
    margin-top: 0;
    padding-block: var(--landing-section-padding) var(--space-12);
  }

  .site-footer__main,
  .site-footer__navigation {
    column-gap: var(--landing-grid-gap);
  }
}

@media (min-width: 120rem) {
  .hero__artwork {
    grid-template-columns:
      repeat(2, minmax(0, 13rem))
      minmax(0, 1fr)
      repeat(2, minmax(0, 13rem));
    gap: var(--space-6);
    margin-top: calc((var(--space-16) * -2) + var(--space-4));
  }

  .problem-card {
    min-height: 11rem;
    padding-inline: var(--space-10);
  }

  .solution__step {
    min-height: 7.5rem;
    padding-inline: var(--space-12);
  }

  .solution__panel-title,
  .how-it-works__step-title {
    font-size: var(--font-size-2xl);
  }

  .testimonial__quote {
    font-size: var(--font-size-2xl);
  }

  .testimonial__quote-mark {
    font-size: 14rem;
  }

  .final-cta {
    padding: var(--space-24);
  }

  .final-cta__title {
    width: 35rem;
    font-size: 76px;
  }

  .final-cta__description {
    max-width: 32rem;
  }

  .faq__item,
  .faq__trigger {
    min-height: 5.5rem;
  }
}