.wp-page {
  padding-bottom: var(--space-9);
}

.wp-page .wp-section {
  padding-block: var(--section-space);
}

.wp-page .wp-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-width: 0;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.625rem;
  background: rgba(70, 66, 168, 0.12);
  color: var(--color-indigo-900);
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: var(--leading-xs);
}

.wp-page .wp-text-link {
  display: inline-flex;
  width: fit-content;
  min-width: 0;
  align-items: center;
  color: var(--color-indigo-700);
  font-weight: 700;
  text-decoration-color: transparent;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.wp-page .wp-text-link:hover,
.wp-page .wp-text-link:focus-visible {
  color: var(--color-indigo-900);
  text-decoration-color: currentColor;
}

.wp-section-intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.wp-section-intro h2,
.wp-section-intro p {
  margin: 0;
}

.wp-hero {
  padding-block: var(--space-8) var(--space-9);
  background: var(--color-indigo-900);
}

.wp-hero__inner {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(420px, 5fr) minmax(0, 7fr);
  align-items: stretch;
  gap: var(--space-5);
}

.wp-hero__copy {
  display: flex;
  min-width: 0;
  min-height: 35rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  border: var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-white-100);
  padding: var(--space-7);
  box-shadow: var(--shadow-card);
}

.wp-hero__status {
  display: inline-flex;
  width: fit-content;
  min-width: 0;
  align-items: center;
  border-radius: var(--radius-pill);
  background: rgba(240, 120, 99, 0.2);
  padding: 0.25rem 0.625rem;
  color: var(--color-indigo-900);
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: var(--leading-xs);
}

.wp-hero__copy h1,
.wp-hero__lead {
  margin: 0;
}

.wp-hero__copy h1 {
  max-width: 33rem;
  font-size: 2.75rem;
  line-height: 1.091;
}

.wp-hero__lead {
  max-width: 33.75rem;
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}

.wp-hero__actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.wp-hero__actions > * {
  min-width: 0;
}

.wp-hero__media {
  width: 100%;
  min-width: 0;
  min-height: 35rem;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-raised);
}

.wp-hero__media img {
  width: 100%;
  height: 100%;
  object-position: 68% center;
}

.wp-features__intro {
  max-width: 36.25rem;
}

.wp-features__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--space-6);
}

.wp-feature-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-white-100);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.wp-feature-card h3,
.wp-feature-card p {
  margin: 0;
}

.wp-feature-card p {
  flex: 1 1 auto;
}

.wp-feature-card__shape {
  position: relative;
  width: 4.25rem;
  min-width: 4.25rem;
  height: 3.5rem;
}

.wp-feature-card__shape--cards span {
  position: absolute;
  width: 2.4rem;
  height: 3.1rem;
  border-radius: 0.625rem;
  background: var(--color-white-100);
  box-shadow: 0 6px 0 rgba(32, 32, 79, 0.1), inset 0 0 0 2px var(--color-indigo-500);
}

.wp-feature-card__shape--cards span:first-child { left: 0.4rem; top: 0.3rem; transform: rotate(-10deg); }
.wp-feature-card__shape--cards span:last-child { left: 1.55rem; top: 0.1rem; background: var(--color-mustard-400); transform: rotate(10deg); }

.wp-feature-card__shape--talk span {
  position: absolute;
  border-radius: 1rem;
  background: var(--color-coral-500);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 0 rgba(32,32,79,.08);
}

.wp-feature-card__shape--talk span:first-child { width: 3.5rem; height: 2.25rem; top: 0.35rem; left: 0; }
.wp-feature-card__shape--talk span:last-child { width: 2.6rem; height: 1.8rem; right: 0; bottom: 0; background: var(--color-indigo-500); }

.wp-feature-card__shape--plate span {
  position: absolute;
  top: 0.25rem;
  left: 0.45rem;
  width: 3.3rem;
  height: 3.3rem;
  border: 0.6rem solid var(--color-mustard-400);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.35rem var(--color-white-100), 0 6px 0 rgba(32,32,79,.08);
}

.wp-journey {
  background: rgba(216, 230, 239, 0.56);
}

.wp-journey__intro {
  max-width: 38.125rem;
}

.wp-steps {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--space-6);
}

.wp-steps::before {
  position: absolute;
  z-index: 0;
  top: 1.5rem;
  right: 10%;
  left: 10%;
  border-top: 2px dashed rgba(70, 66, 168, 0.35);
  content: "";
}

.wp-step {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.wp-step__number {
  display: inline-flex;
  width: 3rem;
  min-width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-indigo-500);
  color: var(--color-white-100);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  box-shadow: 0 5px 0 rgba(32,32,79,.12), inset 0 1px 0 rgba(255,255,255,.25);
}

.wp-step__number--mustard { background: var(--color-mustard-400); color: var(--color-indigo-900); }
.wp-step__number--coral { background: var(--color-coral-500); }
.wp-step__number--green { background: var(--color-green-600); }

.wp-step__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.wp-step__content h3,
.wp-step__content p {
  margin: 0;
}

.wp-audiences {
  background: var(--color-cloud-200);
}

.wp-audiences__layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: start;
  gap: var(--space-6);
}

.wp-audiences__intro {
  display: flex;
  min-width: 0;
  max-width: 27.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.wp-audiences__intro h2,
.wp-audiences__intro p { margin: 0; }

.wp-audiences__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
}

.wp-audience-cards {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.wp-audience-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-white-100);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.wp-audience-card h3,
.wp-audience-card p { margin: 0; }

.wp-audience-card__motif {
  position: relative;
  width: 4.5rem;
  min-width: 4.5rem;
  height: 3.25rem;
}

.wp-audience-card__motif--single::before {
  position: absolute;
  left: 1.2rem;
  width: 2.1rem;
  height: 3.1rem;
  border-radius: 0.625rem;
  background: var(--color-white-100);
  box-shadow: inset 0 0 0 2px var(--color-indigo-500), 0 6px 0 rgba(32,32,79,.08);
  content: "";
}

.wp-audience-card__motif--single::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 4.4rem;
  height: 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-mustard-400);
  content: "";
}

.wp-audience-card__motif--group::before,
.wp-audience-card__motif--group::after {
  position: absolute;
  bottom: 0;
  width: 1.65rem;
  height: 2.8rem;
  border-radius: 1rem 1rem 0.55rem 0.55rem;
  content: "";
}

.wp-audience-card__motif--group::before { left: 0.55rem; background: var(--color-coral-500); }
.wp-audience-card__motif--group::after { right: 0.55rem; background: var(--color-indigo-500); }

.wp-presence-note {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-white-100);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
}

.wp-presence-note__dot {
  width: 0.85rem;
  min-width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.3rem;
  border-radius: 50%;
  background: var(--color-coral-500);
}

.wp-presence-note p { margin: 0; }

.wp-photo-story__wrap {
  position: relative;
  min-width: 0;
}

.wp-photo-story__media {
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-raised);
}

.wp-photo-story__media img { width: 100%; height: 100%; object-position: 65% center; }

.wp-photo-story__card {
  position: absolute;
  bottom: var(--space-6);
  left: var(--space-6);
  display: flex;
  width: min(100% - 3rem, 28.75rem);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-white-100);
  padding: var(--space-5);
  box-shadow: var(--shadow-raised);
}

.wp-photo-story__card h2,
.wp-photo-story__card p { margin: 0; }

.wp-offline-badge {
  display: inline-flex;
  width: fit-content;
  min-width: 0;
  border-radius: var(--radius-pill);
  background: var(--color-indigo-700);
  padding: 0.45rem 0.75rem;
  color: var(--color-white-100);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-sm);
}

.wp-food__intro { max-width: 37.5rem; }

.wp-food__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--space-6);
}

.wp-food-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 18.75rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-7);
}

.wp-food-card h3,
.wp-food-card p { position: relative; z-index: 1; max-width: 26rem; margin: 0; }

.wp-food-card--light {
  border: var(--border-subtle);
  background: var(--color-white-100);
  box-shadow: var(--shadow-card);
}

.wp-food-card--dark {
  background: var(--color-indigo-900);
  color: var(--color-white-100);
  box-shadow: var(--shadow-raised);
}

.wp-food-card--dark h3 { color: var(--color-white-100); }

.wp-food-card__plate {
  position: absolute;
  right: -1rem;
  bottom: -1.5rem;
  width: 10rem;
  height: 10rem;
  border: 1.4rem solid rgba(240,120,99,.32);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1rem rgba(244,201,93,.35);
}

.wp-food-card__cards span {
  position: absolute;
  right: 1.5rem;
  bottom: -1rem;
  width: 7rem;
  height: 9rem;
  border-radius: 1.25rem;
  background: rgba(112,107,224,.55);
  transform: rotate(14deg);
}

.wp-food-card__cards span:last-child {
  right: 5rem;
  bottom: -1.8rem;
  background: rgba(240,120,99,.38);
  transform: rotate(-10deg);
}

.wp-food__link { margin-top: var(--space-5); }

.wp-comfort__intro { max-width: 35rem; }

.wp-comfort__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "talk offline"
    "rhythm offline";
  gap: var(--grid-gap);
  margin-top: var(--space-6);
}

.wp-comfort-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-white-100);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.wp-comfort-card h3,
.wp-comfort-card p { margin: 0; }
.wp-comfort-card--talk { grid-area: talk; }
.wp-comfort-card--rhythm { grid-area: rhythm; }
.wp-comfort-card--offline { grid-area: offline; justify-content: center; }

.wp-comfort-card__mark {
  color: var(--color-coral-500);
  font-size: 1.8rem;
  line-height: 1;
}

.wp-comfort-card--rhythm .wp-comfort-card__mark { color: var(--color-mustard-400); }

.wp-comfort-card__phone {
  position: relative;
  width: 3.4rem;
  min-width: 3.4rem;
  height: 5rem;
  border: 0.35rem solid var(--color-indigo-500);
  border-radius: 0.75rem;
  transform: rotate(-10deg);
}

.wp-comfort-card__phone::after {
  position: absolute;
  bottom: 0.3rem;
  left: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-coral-500);
  transform: translateX(-50%);
  content: "";
}

.wp-faq { background: rgba(216,230,239,.62); }

.wp-faq__intro {
  max-width: 38.75rem;
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.wp-faq__card {
  width: min(100%, 48.75rem);
  min-width: 0;
  margin: var(--space-6) auto 0;
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-white-100);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}

.wp-faq__item {
  min-width: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(32,32,79,.1);
  border-radius: 0;
  box-shadow: none;
}

.wp-faq__item:last-child { border-bottom: 0; }

.wp-faq__item summary {
  position: relative;
  min-height: 3.5rem;
  padding: var(--space-4) 3rem var(--space-4) var(--space-3);
  list-style: none;
}

.wp-faq__item summary::-webkit-details-marker { display: none; }

.wp-faq__item summary::after {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  transition: transform var(--transition-fast);
  content: "";
}

.wp-faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }

.wp-faq__answer { padding: 0 var(--space-3) var(--space-4); }
.wp-faq__answer p { max-width: 40rem; margin: 0; }

.wp-cta__panel {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 20.625rem;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-indigo-900);
  padding: var(--space-7);
  color: var(--color-white-100);
  box-shadow: var(--shadow-raised);
}

.wp-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  width: 50%;
  min-width: 0;
  max-width: 32.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.wp-eyebrow--light { background: rgba(255,255,255,.15) !important; color: var(--color-white-100) !important; }

.wp-cta__content h2,
.wp-cta__content p { margin: 0; color: var(--color-white-100); }

.wp-cta__button {
  display: inline-flex;
  min-width: 0;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-white-100);
  padding: 0.75rem 1.125rem;
  color: var(--color-indigo-900);
  font-family: var(--font-heading);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 0 rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.wp-cta__button:hover { transform: translateY(-2px); background: var(--color-cloud-100); color: var(--color-indigo-900); }
.wp-cta__button:active { transform: translateY(1px); box-shadow: var(--shadow-pressed); }

.wp-cta__address {
  display: inline-flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-2);
  color: rgba(255,255,255,.86) !important;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.wp-cta__decoration {
  position: absolute;
  right: 4%;
  width: 38%;
  min-width: 0;
  height: 100%;
}

.wp-cta__decoration span {
  position: absolute;
  width: 11rem;
  height: 14rem;
  border-radius: 1.75rem;
  background: rgba(112,107,224,.55);
  transform: rotate(14deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.wp-cta__decoration span:first-child { top: 3rem; left: 18%; }
.wp-cta__decoration span:nth-child(2) { right: 3%; bottom: 1.75rem; background: rgba(240,120,99,.48); transform: rotate(-12deg); }
.wp-cta__decoration span:last-child { top: 1.5rem; right: 29%; width: 4rem; height: 4rem; border-radius: 50%; background: var(--color-mustard-400); }

.wp-stationary-note { padding-top: var(--space-6); }

.wp-stationary-note__inner {
  display: flex;
  width: min(100%, 56.25rem);
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-3);
  margin-inline: auto;
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-white-100);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
}

.wp-stationary-note__icon {
  display: inline-flex;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-indigo-700);
  color: var(--color-white-100);
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1;
}

.wp-stationary-note__inner p { max-width: 45rem; margin: 0; }

@media (hover: hover) and (pointer: fine) {
  .wp-feature-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
}

@media (max-width: 1039px) {
  .wp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-steps::before { display: none; }
}

@media (max-width: 979px) {
  .wp-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .wp-hero__copy { min-height: 0; }
  .wp-hero__media { min-height: 0; aspect-ratio: 4 / 3; }
  .wp-audiences__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .wp-audiences__intro { max-width: 38rem; }
  .wp-photo-story__wrap { display: flex; flex-direction: column; gap: var(--space-5); }
  .wp-photo-story__card { position: static; width: 100%; max-width: none; order: -1; }
  .wp-photo-story__media { aspect-ratio: 4 / 3; }
}

@media (max-width: 919px) {
  .wp-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-features__grid > :last-child { grid-column: 1 / -1; }
  .wp-comfort__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "talk rhythm offline";
  }
}

@media (max-width: 879px) {
  .wp-food__grid { grid-template-columns: minmax(0, 1fr); }
  .wp-food-card { min-height: 0; }
}

@media (max-width: 759px) {
  .wp-cta__content { width: 100%; }
  .wp-cta__decoration { display: none; }
}

@media (max-width: 699px) {
  .wp-audience-cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
  .wp-page { padding-bottom: var(--space-8); }
  .wp-page .wp-section { padding-block: var(--section-space-compact); }
  .wp-hero { padding-block: var(--space-6) var(--section-space-compact); }
  .wp-hero__copy { border-radius: var(--radius-lg); padding: var(--space-5); }
  .wp-hero__copy h1 { font-size: 2.125rem; line-height: 1.118; }
  .wp-hero__lead { max-width: 38ch; }
  .wp-hero__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .wp-hero__actions .wp-text-link { justify-content: center; }
  .wp-hero__media { border-radius: var(--radius-lg); }
  .wp-features__grid,
  .wp-steps,
  .wp-comfort__grid { grid-template-columns: minmax(0, 1fr); }
  .wp-features__grid > :last-child { grid-column: auto; }
  .wp-comfort__grid { grid-template-areas: "talk" "rhythm" "offline"; }
  .wp-feature-card,
  .wp-audience-card,
  .wp-comfort-card { padding: var(--space-5); }
  .wp-step { flex-direction: row; gap: var(--space-3); }
  .wp-step__content { flex: 1 1 auto; }
  .wp-food-card { border-radius: var(--radius-lg); padding: var(--space-5); }
  .wp-photo-story__card { border-radius: var(--radius-lg); padding: var(--space-5); }
  .wp-photo-story__media { border-radius: var(--radius-lg); }
  .wp-faq__card { padding: var(--space-2); }
  .wp-faq__item summary { min-height: 3.5rem; }
  .wp-cta__panel { min-height: 0; border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); }
  .wp-cta__button { width: min(100%, 22.5rem); }
  .wp-stationary-note { padding-top: var(--space-5); }
  .wp-stationary-note__inner { flex-direction: column; padding: var(--space-4) var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .wp-feature-card,
  .wp-cta__button,
  .wp-faq__item summary::after { transition: none; }
  .wp-feature-card:hover,
  .wp-cta__button:hover { transform: none; }
  .wp-faq__item[open] summary::after { transform: translateY(-65%) rotate(45deg); }
}
