/* ── PRODUCT HERO ── */
.product-hero {
  min-height: 100vh;
  padding: 10rem var(--section-pad-x) 7rem;
  background: var(--white);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-bottom: 0.5px solid var(--border);
}
.product-hero-copy {
  position: relative;
  z-index: 1;
  width: 52%;
  max-width: 700px;
  padding-right: 3rem;
}
.product-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(36px, 4.5vw, 62px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.8s 0.2s forwards;
}
.product-hero h1 em {
  font-style: italic;
  color: var(--rose);
}
.product-hero .hero-sub {
  opacity: 0;
  animation: fadeUp 0.8s 0.4s forwards;
}
.product-hero .hero-cta-row {
  opacity: 0;
  animation: fadeUp 0.8s 0.55s forwards;
}
.product-hero-eyebrow {
  opacity: 0;
  animation: fadeUp 0.7s 0.05s forwards;
  font-size: 24px;
  font-weight: 600;
}
.product-hero-rule {
  width: 40px;
  height: 2px;
  background: var(--rose);
  margin-bottom: 1.75rem;
  opacity: 0;
  animation: fadeUp 0.7s 0.2s forwards;
}
.product-hero-image {
  position: absolute;
  top: 0;
  right: 0;
  width: min(50%, 1400px);
  height: 100%;
  overflow: hidden;
  opacity: 0;
  animation: fadeUp 0.9s 0.3s forwards;
}
.product-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchored left and centred vertically so the broadcaster's logos (NDR
     top left, Schleswig-Holstein Magazin bottom left) stay in frame at
     every width, as attribution for the photo. */
  object-position: center center;
  display: block;
}

/* ── OVERVIEW ── */
.product-overview {
  padding: 8rem var(--section-pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
  background: var(--cream);
  border-bottom: 0.5px solid var(--border);
}
.product-overview h2 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}
.product-overview p {
  font-size: 17px;
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
/* Workshop media carousel: slides crossfade inside a fixed 4:3 frame. */
.media-carousel {
  align-self: center;
  min-width: 0;
}
.media-carousel-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink);
}
.media-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s ease,
    visibility 0s linear 0.6s;
}
.media-slide.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
}
.media-slide img,
.media-slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Videos are shown whole, letterboxed on the dark frame, so nothing at the
   edges (such as a broadcaster's logo) is cropped away. */
.media-slide video {
  object-fit: contain;
}
/* Photos whose shape is far from 16:9 can opt into the same letterboxing. */
.media-slide--contain img {
  object-fit: contain;
}
/* Caption sits at the top so it stays clear of the video control bar. */
.media-slide figcaption {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 1rem 1.25rem 2.5rem;
  font-size: 14px;
  font-weight: 400;
  color: var(--white);
  background: linear-gradient(rgba(26, 20, 16, 0.65), transparent);
  pointer-events: none;
}
.media-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.media-carousel--single .media-carousel-controls {
  display: none;
}
.media-dots {
  display: flex;
  gap: 6px;
}
.media-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(26, 20, 16, 0.15);
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.2s,
    transform 0.2s;
}
.media-dot.active {
  background: var(--rose);
  transform: scale(1.4);
}
@media (prefers-reduced-motion: reduce) {
  .media-slide,
  .media-slide.active {
    transition: none;
  }
}

/* ── HOW IT WORKS ── */
.how-it-works {
  padding: 8rem var(--section-pad-x);
  background: var(--white);
  border-bottom: 0.5px solid var(--border);
}
.how-it-works-header {
  max-width: 620px;
  margin-bottom: 4.5rem;
}
.how-it-works h2 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-top: 1rem;
}
.steps-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.step-item {
  padding: 2.5rem 2.5rem 2.5rem 0;
  border-right: 0.5px solid var(--border);
}
.step-item:last-child {
  border-right: none;
  padding-right: 0;
}
.step-item:not(:first-child) {
  padding-left: 2.5rem;
}
.step-number {
  font-family: "Playfair Display", serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--rose);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: block;
}
.step-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rose-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.step-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--rose);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
.step-desc {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.7;
}

/* ── FEATURES ── */
.product-features {
  padding: 8rem var(--section-pad-x);
  background: var(--cream);
  border-bottom: 0.5px solid var(--border);
}
.product-features-header {
  margin-bottom: 4rem;
}
.product-features h2 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-top: 1rem;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.feature-card {
  background: var(--white);
  border: 0.5px solid var(--border);
  padding: 2.5rem;
  transition: border-color 0.2s;
}
.feature-card:hover {
  border-color: var(--rose);
}
.feature-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rose-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.feature-card-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--rose);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature-card h3 {
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.65rem;
  line-height: 1.2;
}
.feature-card p {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.7;
}

/* ── TESTIMONIALS ── */
.testimonials {
  padding: 8rem var(--section-pad-x);
  background: var(--white);
  border-bottom: 0.5px solid var(--border);
}
.testimonials-header {
  max-width: 600px;
  margin-bottom: 4rem;
}
.testimonials h2 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-top: 1rem;
}
.carousel-wrap {
  position: relative;
}
.carousel-track-outer {
  overflow: hidden;
}
.carousel-track {
  display: flex;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-slide {
  flex: 0 0 100%;
}
.testimonial-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  border: 0.5px solid var(--border);
  max-width: 820px;
  overflow: hidden;
}
.testimonial-org-panel {
  background: var(--rose-dark);
  padding: 3rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.5px solid var(--border);
}
.testimonial-content {
  background: var(--rose-pale);
  padding: 3rem;
}
.testimonial-mark {
  font-family: "Playfair Display", serif;
  font-size: 4rem;
  line-height: 0.7;
  color: var(--rose);
  margin-bottom: 1.5rem;
  display: block;
  opacity: 0.5;
}
.testimonial-quote {
  font-size: 18px;
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.78;
  margin-bottom: 2rem;
}
.testimonial-author {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.testimonial-org {
  font-size: 14px;
  font-weight: 500;
  color: var(--cream);
  text-align: center;
  line-height: 1.5;
}
.carousel-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.carousel-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0.5px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.carousel-btn:hover {
  border-color: var(--rose);
  background: var(--rose-light);
}
.carousel-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.carousel-dots {
  display: flex;
  gap: 6px;
}
.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(26, 20, 16, 0.15);
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.2s,
    transform 0.2s;
}
.carousel-dot.active {
  background: var(--rose);
  transform: scale(1.4);
}

/* ── PRICING ── */
.pricing {
  padding: 8rem var(--section-pad-x);
  background: var(--white);
  border-bottom: 0.5px solid var(--border);
}
.pricing-header {
  max-width: 580px;
  margin-bottom: 4rem;
}
.pricing h2 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-top: 1rem;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 0.5px solid var(--border);
  margin-bottom: 2rem;
}
.pricing-col {
  padding: 2.5rem;
  border-right: 0.5px solid var(--border);
}
.pricing-col:last-child {
  border-right: none;
}
.pricing-col.highlighted {
  background: var(--rose-pale);
}
.pricing-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--rose);
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 1.25rem;
}
.pricing-col:not(.highlighted) .pricing-tag {
  opacity: 0;
  pointer-events: none;
}
.pricing-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 1rem;
}
.pricing-amount {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.35rem;
}
.pricing-amount sup {
  font-family: "DM Sans", sans-serif;
  font-size: 0.42em;
  font-weight: 300;
  letter-spacing: 0;
  vertical-align: 0.82em;
  color: var(--ink-mid);
}
.pricing-cadence {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-mid);
  margin-bottom: 1.25rem;
}
.pricing-amount-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.pricing-amount-row .pricing-amount,
.pricing-amount-row .pricing-cadence {
  margin-bottom: 0;
}
.pricing-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.65;
}
.pricing-availability {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 0.5px solid var(--border);
}
.pricing-availability strong {
  font-weight: 500;
  color: var(--rose);
}
.pricing-includes-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pricing-includes-list li {
  font-size: 14px;
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.6;
  padding: 0.65rem 0 0.65rem 1.25rem;
  border-bottom: 0.5px solid var(--border);
  position: relative;
}
.pricing-includes-list li:last-child {
  border-bottom: none;
}
.pricing-includes-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rose);
}
.pricing-cbe {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 1px;
  background: var(--border);
  border: 0.5px solid var(--border);
}
.pricing-cbe-price {
  background: var(--white);
  padding: 3rem;
}
.pricing-cbe-includes {
  background: var(--cream);
  padding: 3rem;
}
.pricing-includes-list + .pricing-label {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 0.5px solid var(--border);
}
.pricing-amount-sm {
  font-size: clamp(26px, 2.6vw, 38px);
}
.pricing-amount em {
  font-size: 0.48em;
  font-style: normal;
  letter-spacing: 0;
  margin-left: 0.15em;
}
.ce-footnote {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.6;
  margin-top: 1.5rem;
}
.pricing-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* ── CONTACT FORM ── */
.product-contact {
  padding: 8rem var(--section-pad-x);
  background: var(--ink);
  color: var(--white);
}
.product-contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 7rem;
  align-items: start;
}
.product-contact-copy h2 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
}
.product-contact-copy p {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.8;
  margin-bottom: 1.15rem;
}
.contact-detail {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2.5rem;
}
.contact-detail svg {
  flex-shrink: 0;
  stroke: var(--rose);
}
.contact-detail a {
  color: var(--rose);
  text-decoration: none;
}
.contact-detail a:hover {
  text-decoration: underline;
}
.inquiry-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.form-field label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--white);
}
.form-field input,
.form-field select,
.form-field textarea {
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  color: var(--white);
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 300;
  padding: 12px 14px;
  border-radius: 2px;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.form-field select {
  cursor: pointer;
}
/* Match placeholder brightness while the empty option is selected;
   real selections stay full --white. */
.form-field select:has(option[value=""]:checked) {
  color: rgba(255, 255, 255, 0.7);
}
.form-field select option {
  background: #252627;
  color: var(--white);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--rose);
  background: rgba(176, 66, 92, 0.06);
}
.form-field textarea {
  resize: vertical;
  min-height: 110px;
}
.btn-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--rose);
  border: none;
  padding: 15px 36px;
  border-radius: 2px;
  cursor: pointer;
  width: fit-content;
  font-family: "DM Sans", sans-serif;
  transition: background 0.2s;
  margin-top: 0.25rem;
}
.btn-form-submit:hover {
  background: var(--rose-dark);
}
.form-note {
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

/* ── PAGE-LEVEL RESPONSIVE ── */
@media (max-width: 900px) {
  .product-overview,
  .product-contact-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .product-overview {
    gap: 1.75rem;
  }
  .product-hero {
    min-height: auto;
    flex-direction: column;
    padding-top: 7rem;
    padding-bottom: 5rem;
  }
  .product-hero-copy {
    width: 100%;
    padding-right: 0;
  }
  .product-hero-image {
    position: relative;
    width: 100%;
    height: 380px;
    margin-top: 3rem;
  }
  .steps-list {
    grid-template-columns: 1fr;
  }
  .step-item {
    border-right: none;
    border-bottom: 0.5px solid var(--border);
    padding: 2rem 0;
  }
  .step-item:last-child {
    border-bottom: none;
  }
  .step-item:not(:first-child) {
    padding-left: 0;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
  .product-hero,
  .product-overview,
  .how-it-works,
  .product-features,
  .testimonials,
  .pricing,
  .product-contact {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .pricing-cbe {
    grid-template-columns: 1fr;
  }
  .pricing-col {
    border-right: none;
    border-bottom: 0.5px solid var(--border);
  }
  .pricing-col:last-child {
    border-bottom: none;
  }
  /* The empty placeholder tags on the non-highlighted columns exist only to
     hold vertical space in the desktop grid. Stacked on mobile they'd show as
     bare rose squares, so drop them entirely and keep just the real tag. */
  .pricing-col:not(.highlighted) .pricing-tag {
    display: none;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .product-contact-inner {
    gap: 4rem;
  }
}
@media (max-width: 600px) {
  /* Tighten section vertical padding on phones: the 8rem gaps read as premium
     whitespace on desktop but leave big dead zones between sections on a
     phone. Vertical only — the horizontal gutter is untouched. */
  .product-overview,
  .how-it-works,
  .product-features,
  .testimonials,
  .pricing,
  .product-contact {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .product-hero {
    padding-top: 7rem;
    padding-bottom: 3.5rem;
  }
  .product-hero-image {
    height: 280px;
  }
  /* Stack the org panel above the quote; the fixed 220px column can't shrink
     on a phone and the card's overflow:hidden would clip the content. */
  .testimonial-card {
    grid-template-columns: 1fr;
  }
  .testimonial-org-panel {
    border-right: none;
    border-bottom: 0.5px solid var(--border);
    padding: 2rem;
  }
  .testimonial-content {
    padding: 2rem;
  }
  /* The 3rem card padding reads as generous on desktop but eats the narrow
     phone width, so tighten it. */
  .pricing-cbe-price,
  .pricing-cbe-includes {
    padding: 2rem;
  }
}