/* The fold, the brand's signature shape (posters and website mockup in the
   pitch deck): a dark block with the key points, a band of the accent
   running diagonally down from its right edge, and the price block it
   lands on. On narrow screens the blocks stack and the band drops out.
   The band draws itself on scroll (motion.css). */

.fold {
  --theme-fold-split: 42%;
  --theme-fold-land: 58%;
  --theme-fold-step: 55%;

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--theme-fold-split) 1fr minmax(0, calc(100% - var(--theme-fold-land)));
  grid-template-rows: var(--theme-fold-step) 1fr;
  height: clamp(32rem, 52vw, 46rem);
  margin: var(--theme-space-lg) var(--theme-bleed);
}

.fold__dark {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  padding: var(--theme-space-md);
  background: var(--theme-color-inverse-background);
  color: var(--theme-color-inverse-text);
}

.fold__list {
  display: grid;
  gap: 14px;
  list-style: none;
  font-size: var(--theme-text-md);
  font-weight: var(--theme-font-weight-medium);
}

/* The bullets are the V mark. */
.fold__list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: baseline;
}

.fold__list li::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentcolor;
  clip-path: polygon(100% 25%, 50% 100%, 0 25%, 25% 0, 50% 0, 50% 25%, 25% 25%, 50% 62.5%, 75% 25%);
  translate: 0 1px;
}

.fold__band {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--theme-color-highlight);
  clip-path: polygon(
    var(--theme-fold-split) 0,
    var(--theme-fold-land) var(--theme-fold-step),
    var(--theme-fold-land) 100%,
    var(--theme-fold-split) var(--theme-fold-step)
  );
}

.fold__price {
  grid-area: 2 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: var(--theme-space-md);
  background: var(--theme-color-highlight);
}

.fold__figure {
  display: grid;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  font-weight: var(--theme-font-weight-semibold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--theme-color-heading);
}

.fold__figure span {
  font-size: 0.8125rem;
  font-weight: var(--theme-font-weight-medium);
  letter-spacing: 0;
}

.fold__note {
  font-size: 0.8125rem;
  color: var(--theme-color-text);
}

@media (width <= 800px) {
  .fold {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    margin: 0;
  }

  .fold__dark,
  .fold__price {
    grid-area: auto;
    padding: var(--theme-space-lg) var(--theme-gutter);
  }

  .fold__band {
    display: none;
  }
}