/* Artwork and proportions reconstructed from the supplied SMTXLOST mockup.
   Marketing artwork is static; the product catalog and payment UI remain HTML. */
.intro {
  grid-template-columns: .84fr 1.16fr;
  gap: 20px;
  align-items: center;
  padding-bottom: 12px;
}
.intro-copy { padding: 28px 0 15px; }
.intro h1 {
  font-size: clamp(48px, 6.5vw, 86px);
  line-height: 1.05;
  transform: scaleX(1.12);
  transform-origin: left center;
  width: calc(100% / 1.12);
}
.intro mark { padding: 0 .055em .065em; margin-top: .035em; line-height: 1.08; }
.intro p { margin: 8px 0 18px; }
.scribble {
  width: 70px;
  height: 60px;
  right: 17px;
  bottom: 17px;
  transform: none;
}
.hero-art {
  align-self: start;
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 2 / 1;
  background: #191b17;
  border-radius: 8px;
  overflow: hidden;
  isolation: auto;
}
.hero-art::before, .hero-art::after { content: none; }
.hero-illustration {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.goal {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 172px;
  gap: 23px;
  padding: 30px 45px;
  background: #141613 url('/design/thailand-banner-v2.webp') center / cover no-repeat;
}
.goal::before, .goal::after { content: none; }
.goal-heading { position: relative; z-index: 1; text-align: center; }
.goal-heading h2 { color: var(--lime); font-size: 38px; margin: 0; text-transform: uppercase; }
.goal-scribble { display: block; width: 80px; height: 20px; margin: 8px auto -9px; color: var(--lime); }
.goal .goal-main { border-left: 1px solid #f4f3ec80; padding-left: 32px; }
.goal-target-label { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.goal-target-label svg { width: 30px; height: 30px; stroke: #f4f3ec; stroke-width: 1.6; fill: none; flex-shrink: 0; }
.goal-target-label span { color: var(--bg); font: 700 17px Arial, sans-serif; }
.goal-target-label strong { font: 35px var(--display); color: var(--lime); }
.goal-top { font-size: 20px; text-transform: none; }
.goal-top > span:last-child { font-size: 17px; }
.goal .progress { background: #f4f3ec33; }
.goal-main { max-width: 100%; }
@media (min-width: 1400px) {
  .intro h1 { font-size: 86px; }
  .hero-art { min-height: 0; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .intro { grid-template-columns: .9fr 1.1fr; gap: 16px; }
  .intro-copy { padding-top: 21px; }
  .intro h1 { font-size: clamp(48px, 7vw, 70px); }
  .intro p { font-size: 15px; }
  .intro .eyebrow { font-size: 11px; letter-spacing: 1px; }
  .hero-button { padding: 10px 15px; font-size: 12px; }
  .scribble { width: 47px; height: 42px; right: 0; bottom: 10px; }
  .goal { padding: 25px 30px; }
  .goal-heading h2 { font-size: 30px; }
  .goal-target-label strong { font-size: 28px; }
}
@media (min-width: 761px) { header { min-height: 76px; padding: 14px 26px; } }
@media (max-width: 760px) {
  .intro { display: block; padding: 0; }
  .hero-art { display: none; }
  .intro-copy {
    padding: 26px 0 23px;
    background: url('/design/palms-engraved-v2.webp') right -18px bottom / 155px auto no-repeat;
  }
  .intro h1 { font-size: clamp(43px, 14vw, 62px); line-height: 1.04; transform: none; width: auto; }
  .intro p { font-size: 15px; margin: 8px 0 14px; }
  .intro mark { margin-top: .025em; }
  .scribble { display: none; }
  .goal { grid-template-columns: 1fr; gap: 20px; padding: 24px 18px; background-position: center; }
  .goal-heading h2 { font-size: 30px; }
  .goal .goal-main { border-left: none; padding-left: 0; }
  .goal-target-label { gap: 8px; }
  .goal-target-label span { font-size: 14px; }
  .goal-target-label strong { font-size: 28px; }
  .goal-top > span:last-child { font-size: 16px; }
}
@media (max-width: 380px) {
  .intro-copy { background-size: 140px auto; background-position: right -22px bottom; }
  .intro h1 { font-size: 14vw; }
  .intro p { font-size: 13px; }
  .goal-heading h2 { font-size: 27px; }
}