.service-arrow-slot {
  position: relative;
  width: 80px;
  height: 24px;
  flex: 0 0 80px;
}

.service-scribble .service-arrow {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  height: 60px;
  transform: none;
  overflow: visible;
  pointer-events: none;
}

.service-arrow-mobile { display: none; }
.price-section { padding-top: 36px; }
.price-heading-marker::after { display: none; }

.price-heading-line {
  position: absolute;
  left: 0;
  bottom: -.045em;
  width: 100%;
  height: .32em;
  overflow: visible;
  fill: none;
  stroke: var(--lilac);
  stroke-width: 10;
  stroke-linecap: round;
  pointer-events: none;
  z-index: -1;
}

.price-title-ready .price-scribble {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.price-title-drawn .price-scribble {
  animation: price-pen-stroke 1.15s cubic-bezier(.33, 0, .2, 1) .18s both;
}

@keyframes price-pen-stroke { to { stroke-dashoffset: 0; } }

@media (max-width: 800px) {
  .service-arrow-slot { order: -1; }
  .service-arrow-desktop { display: none; }
  .service-arrow-mobile { display: block; }
}

@media (max-width: 540px) {
  .price-section { padding-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .price-title-ready .price-scribble,
  .price-title-drawn .price-scribble { animation: none; stroke-dashoffset: 0; }
}

/* Compact two-column product showcase on phones. */
@media (max-width: 540px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 12px;
  }
  .product-photo {
    height: auto;
    aspect-ratio: 1 / 1.15;
    border-radius: 18px;
  }
  .product-photo img { width: 88%; height: 80%; }
  .product-sticker { left: 10px; top: 12px; font-size: 17px; }
  .product-price {
    bottom: 12px;
    right: 10px;
    font-size: 11px;
    padding: 6px 8px;
  }
  .product-info { padding: 13px 2px 0; }
  .product-info > span { font-size: 10px; }
  .product-info h3 { font-size: 21px; line-height: 1.1; }
  .product-info > p { font-size: 12px; line-height: 1.5; }
  .product-action { font-size: 11px; gap: 5px; min-height: 44px; }
  .product-action .icon { flex-shrink: 0; width: 16px; height: 16px; }
}

@media (max-width: 360px) {
  .product-grid { column-gap: 10px; }
  .product-sticker { font-size: 15px; left: 8px; }
  .product-info h3 { font-size: 19px; }
  .product-action { font-size: 10px; }
}

/* Continue the product surface through the negative space of the care wave. */
:root { --product-surface: #f4eee6; }
.products-section, .care-wave { background: var(--product-surface); }
.care-wave { display: block; left: 0; bottom: calc(100% - 2px); }

/* The tilted ribbon overlaps both sections; its exposed corners inherit each surface. */
.ribbon-clip {
  --ribbon-bleed: clamp(18px, 2.5vw, 64px);
  --ribbon-upper-surface: var(--deep-purple);
  --ribbon-lower-surface: var(--cream);
  position: relative;
  z-index: 3;
  isolation: isolate;
  padding-block: var(--ribbon-bleed);
  margin-block: calc(-1 * var(--ribbon-bleed));
  background: linear-gradient(to bottom,
    var(--ribbon-upper-surface) 0 50%,
    var(--ribbon-lower-surface) 50% 100%);
}
.love-ribbon { margin: 0 -2%; box-shadow: none; }
.gallery-section { background: var(--cream); }

@media (max-width: 540px) {
  .care-steps article { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

@media (max-width: 540px) {
  .care-copy { text-align: center; }
  .care-copy > p { margin-inline: auto; }
  .care-checks { justify-items: center; }
  .care-checks li { justify-content: center; }
  .care-checks .icon { flex-shrink: 0; }
}

/* Two equally sized groups make the end of each lap identical to its beginning. */
.ribbon-track { gap: 0; animation: none; }
.ribbon-group { display: flex; flex-shrink: 0; gap: 45px; padding-right: 45px; }
.ribbon-group > span { flex-shrink: 0; }