/* ==========================================================================
   KOBIL MiniApp Studio — Figma 6019:108358 (1440) / 6155:79481 (393).
   Every design value uses the generated --w/--m ramps so the Figma frames
   remain proportional across 768–1440 and throughout the phone range.
   ========================================================================== */

/* Hero ------------------------------------------------------------------- */
.mas-hero {
  position: relative;
  width: calc(100% + var(--page-pad) * 2);
  min-height: var(--w1208);
  margin-left: calc(-1 * var(--page-pad));
  margin-top: calc(-1 * var(--w100));
  overflow: hidden;
  background: var(--mas-hero-bg) center top / cover no-repeat;
}

.mas-hero__inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--w49);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--w206) var(--w21) 0 var(--w80);
}

.mas-hero__content {
  width: var(--w616);
  flex: 0 0 var(--w616);
}

.mas-hero__crumbs {
  display: flex;
  align-items: center;
  gap: var(--w12);
  font-family: var(--font-mono);
  font-size: var(--w11);
  font-weight: 500;
  line-height: var(--w24);
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--navy);
}

.mas-hero__crumbs a { transition: opacity var(--dur) var(--ease); }
.mas-hero__crumbs a:hover { opacity: 0.65; }
.mas-hero__crumbs > span:first-of-type {
  width: var(--w3);
  height: var(--w3);
  border-radius: 50%;
  background: currentColor;
}

.mas-hero__title {
  margin-top: var(--w12);
  font-family: var(--font-serif);
  font-size: var(--w82);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}

/* The German headline is materially longer than the English Figma copy.
   Keep it inside the hero's safe area before the overlapping white surface. */
@media (min-width: 769px) {
  .mas-hero__title:lang(de) {
    font-size: var(--w64);
    line-height: 1.2;
  }
}

.mas-hero__desc {
  max-width: var(--w568);
  margin-top: var(--w12);
  font-size: var(--w18);
  line-height: var(--w26);
  color: var(--navy);
}

.mas-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--w8);
  height: var(--w56);
  margin-top: var(--w48);
  padding: var(--w8) var(--w20) var(--w8) var(--w24);
  border-radius: var(--w32);
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.mas-hero__cta:hover { background: var(--btn-blue); transform: translateY(-2px); }
.mas-hero__cta img { width: var(--w18); height: var(--w18); }

.mas-hero__media {
  position: relative;
  display: block;
  flex: 0 0 var(--w674);
  width: var(--w674);
  margin-top: calc(-1 * var(--w14));
}

.mas-hero__media img { width: 100%; height: auto; }

/* Continuous 1360px surface --------------------------------------------- */
.mas-surface {
  position: relative;
  z-index: 2;
  width: calc(100% + var(--page-pad) * 2 - 2 * var(--w40));
  margin-left: calc(-1 * var(--page-pad) + var(--w40));
  margin-top: calc(-1 * var(--section-gap));
  background: var(--white);
}

.mas-surface--first {
  margin-top: calc(-1 * (var(--section-gap) + var(--w442)));
  border-radius: var(--w24) var(--w24) 0 0;
}

/* The rounded overview still reveals the hero at its sides. From the next
   section onward, Figma's 1360px content column sits on a full-width white
   page surface, so the remaining 40px gutters must also read as white. */
@media (min-width: 769px) {
  .mas-surface:not(.mas-surface--first) {
    box-shadow:
      var(--w40) 0 0 var(--white),
      calc(-1 * var(--w40)) 0 0 var(--white);
  }
}

/* Overview --------------------------------------------------------------- */
.mas-overview {
  display: grid;
  grid-template-columns: var(--w572) var(--w568);
  align-items: center;
  justify-content: space-between;
  height: var(--w346);
  min-height: var(--w346);
  padding: var(--w80) var(--w40);
}

.mas-overview__title {
  margin-top: var(--w32);
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}

.mas-overview__title span,
.mas-store__title > span {
  background: linear-gradient(90deg, #3ebffc 0%, #1046cf 30%, #ca80f4 67%, #ffc4a0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #696ef5;
  -webkit-text-fill-color: transparent;
}

.mas-overview__lead {
  padding-top: 0;
  font-size: var(--w16);
  line-height: var(--w23);
  color: var(--navy-70);
}

/* Three-step interaction ------------------------------------------------- */
.mas-steps {
  height: var(--w662);
  min-height: var(--w662);
  padding: var(--w40);
}

/* German labels wrap sooner between 768 and 1440; keep the Figma height as
   the floor while allowing the translated copy to grow without overlap. */
.mas-steps:lang(de) { height: auto; }

.mas-steps__head h2 {
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
}

.mas-steps__head p {
  margin-top: var(--w12);
  font-size: var(--w18);
  line-height: var(--w26);
  color: var(--navy-70);
}

.mas-steps__panel {
  display: grid;
  grid-template-columns: var(--w578) var(--w527);
  align-items: center;
  gap: var(--w115);
  margin-top: var(--w40);
}

.mas-steps__list { width: var(--w578); }

.mas-step {
  border-bottom: 1px solid var(--navy-40);
}

.mas-step__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--w24);
  width: 100%;
  padding: var(--w20) 0;
  text-align: left;
}

.mas-step:first-child .mas-step__trigger { padding-top: 0; }
.mas-step__copy { display: flex; flex: 1; flex-direction: column; gap: var(--w8); }
.mas-step__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--w14);
  font-weight: 500;
  line-height: var(--w23);
  color: var(--navy-70);
  text-transform: uppercase;
}

.mas-step__title {
  font-size: var(--w20);
  font-weight: 500;
  line-height: var(--w26);
  color: var(--navy);
  transition: color var(--dur) var(--ease);
}

.mas-step__detail {
  display: none;
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-70);
}

.mas-step__detail b { color: var(--navy); font-weight: 600; }
.mas-step.is-active .mas-step__title,
.mas-step:hover .mas-step__title { color: #1046cf; }
.mas-step.is-active .mas-step__detail { display: block; }
.mas-step__arrow {
  flex: 0 0 var(--w24);
  width: var(--w24);
  height: var(--w24);
  color: var(--navy);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mas-step.is-active .mas-step__arrow,
.mas-step:hover .mas-step__arrow { color: #1046cf; transform: translateX(var(--w4)); }
.mas-step__mobile-visual { display: none; }

.mas-steps__media {
  position: relative;
  width: var(--w527);
  height: var(--w428);
  overflow: hidden;
}

.mas-steps__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(var(--w12));
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.mas-steps__shot.is-active { opacity: 1; transform: translateY(0); }

/* Store ------------------------------------------------------------------ */
.mas-store {
  display: grid;
  grid-template-columns: var(--w626) var(--w590);
  justify-content: space-between;
  height: var(--w493);
  min-height: var(--w493);
  padding: var(--w120) var(--w40);
}

.mas-store__title {
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
}

.mas-store__content { padding-top: 0; }
.mas-store__content ul { display: flex; flex-direction: column; gap: var(--w30); margin-top: var(--w32); }
.mas-store__content li { display: flex; align-items: flex-start; gap: var(--w12); }
.mas-store__content li p { font-size: var(--w18); line-height: var(--w26); color: var(--navy-70); }
.mas-store__content li strong { color: var(--navy); font-weight: 600; }
.mas-store__check {
  display: grid;
  flex: 0 0 var(--w20);
  width: var(--w20);
  height: var(--w20);
  margin-top: var(--w3);
  place-items: center;
  border-radius: 50%;
  background: #eef4ff;
  color: var(--blue);
  font-size: var(--w12);
  font-weight: 700;
}

/* FAQ -------------------------------------------------------------------- */
.mas-faq { min-height: var(--w1137); padding: var(--w60) var(--w40) var(--w80); }
.mas-faq .sec-sa-faq__list { margin-top: var(--w48); }
.mas-faq .sec-sa-faq__trigger { padding-left: var(--w20); padding-right: var(--w20); }

/* The CTA must escape the page gutter and join the surface without a gap. */
#miniapp-studio-cta { margin-top: calc(-1 * var(--section-gap)); }

/* Phone ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .mas-hero {
    min-height: var(--m847);
    margin-top: calc(-1 * var(--m68));
    background-image: var(--mas-hero-bg-mobile, var(--mas-hero-bg));
  }

  .mas-hero__inner {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: var(--m116) 0 0;
  }

  .mas-hero__content {
    display: flex;
    width: var(--m329);
    flex: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .mas-hero__crumbs { font-size: var(--m12); line-height: var(--m18); letter-spacing: 0; }
  .mas-hero__title { margin-top: var(--m20); font-size: var(--m34); line-height: 1.25; }
  .mas-hero__desc { margin-top: var(--m12); font-size: var(--m14); line-height: var(--m20); }
  .mas-hero__cta { height: var(--m40); margin-top: var(--m24); padding: var(--m4) var(--m12) var(--m4) var(--m16); font-size: var(--m14); }
  .mas-hero__cta img { width: var(--m18); height: var(--m18); }
  .mas-hero__media { width: var(--m393); flex: none; margin-top: calc(-1 * var(--m37)); }
  .mas-hero__media::after {
    position: absolute;
    right: var(--m30);
    bottom: 0;
    left: var(--m30);
    height: var(--m3);
    background: linear-gradient(90deg, transparent, #fff 29.33%, #fff 71.64%, transparent);
    content: "";
  }

  .mas-surface {
    width: calc(100% + var(--m8));
    margin-left: calc(-1 * var(--m4));
    margin-top: calc(-1 * var(--section-gap));
  }
  .mas-surface--first {
    margin-top: calc(-1 * (var(--section-gap) + var(--m122)));
    border-radius: var(--m24) var(--m24) 0 0;
  }

  .mas-overview {
    grid-template-columns: 1fr;
    gap: var(--m24);
    height: auto;
    min-height: var(--m340);
    padding: var(--m40) var(--m16);
  }
  .mas-overview__title { margin-top: var(--m24); font-size: var(--m34); line-height: 1.2; }
  .mas-overview__lead { padding-top: 0; font-size: var(--m14); line-height: var(--m20); }

  .mas-steps { height: auto; min-height: 0; padding: var(--m40) var(--m16) 0; }
  .mas-steps__head h2 { font-size: var(--m34); line-height: 1.2; }
  .mas-steps__head p { margin-top: var(--m12); font-size: var(--m14); line-height: var(--m20); }
  .mas-steps__panel { display: block; margin-top: var(--m24); }
  .mas-steps__list { width: 100%; }
  .mas-step { min-height: 0; border: 0; }
  .mas-step__trigger { padding: var(--m32) 0 0; pointer-events: none; }
  .mas-step:first-child .mas-step__trigger { padding-top: var(--m32); }
  .mas-step__copy { gap: var(--m8); }
  .mas-step__eyebrow { font-size: var(--m14); line-height: var(--m23); }
  .mas-step__title { font-size: var(--m18); line-height: var(--m24); color: var(--navy); }
  .mas-step__detail,
  .mas-step.is-active .mas-step__detail { display: block; font-size: var(--m14); line-height: var(--m20); }
  .mas-step__arrow { display: none; }
  .mas-step__mobile-visual { display: block; width: var(--m337); height: var(--m280); margin-top: 0; object-fit: contain; }
  .mas-step__mobile-visual--stage { width: var(--m337); height: var(--m278); }
  .mas-steps__media { display: none; }

  .mas-store {
    grid-template-columns: 1fr;
    gap: var(--m32);
    height: auto;
    min-height: var(--m456);
    padding: var(--m60) var(--m16) var(--m20);
  }
  .mas-store__title { font-size: var(--m34); line-height: 1.2; }
  .mas-store__content ul { gap: var(--m16); margin-top: var(--m20); }
  .mas-store__content li { gap: var(--m12); }
  .mas-store__content li p { font-size: var(--m14); line-height: var(--m20); }
  .mas-store__check { flex-basis: var(--m20); width: var(--m20); height: var(--m20); font-size: var(--m12); }

  .mas-faq { min-height: var(--m1092); padding: var(--m40) var(--m16); }
  .mas-faq .sec-sa-faq__list { margin-top: var(--m28); }
  .mas-faq .sec-sa-faq__trigger { padding-left: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mas-steps__shot,
  .mas-hero__cta { transition: none; }
}