/* Shared commercial landing-page layer — rent/buy, Malay/English. */
.money-page {
  --money-ink: #102a43;
  --money-muted: #52667a;
  --money-paper: #f7fafc;
  --money-line: rgba(144, 175, 197, .28);
  --money-navy: #082f49;
  --money-navy-deep: #061f33;
  --money-accent: #14b8a6;
  --money-accent-deep: #0f766e;
  --money-accent-soft: #ccfbf1;
  --money-warm: #f59e0b;
  background: var(--money-paper);
  color: var(--money-ink);
}

.money-page--rent {
  --money-accent: #2dd4bf;
  --money-accent-deep: #0f766e;
  --money-accent-soft: #ccfbf1;
}

.money-page--buy {
  --money-accent: #fbbf24;
  --money-accent-deep: #b45309;
  --money-accent-soft: #fef3c7;
}

.money-shell {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.money-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 84% 20%, color-mix(in srgb, var(--money-accent) 28%, transparent), transparent 31%),
    radial-gradient(circle at 10% 105%, rgba(56, 189, 248, .18), transparent 34%),
    linear-gradient(135deg, var(--money-navy-deep), var(--money-navy) 58%, #0c4a6e);
  padding: 64px 0 34px;
}

.money-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .2;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.money-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(340px, .94fr);
  align-items: center;
  gap: clamp(40px, 6vw, 84px);
}

.money-hero__content {
  max-width: 650px;
}

.money-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  padding: 8px 13px;
  border: 1px solid color-mix(in srgb, var(--money-accent) 64%, white);
  border-radius: 999px;
  background: color-mix(in srgb, var(--money-accent) 14%, transparent);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.money-hero__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--money-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--money-accent) 16%, transparent);
}

.money-hero h1 {
  max-width: 680px;
  margin: 0;
  color: #fff;
  font-size: clamp(40px, 5.2vw, 68px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.02;
  text-wrap: balance;
}

.money-hero h1 span {
  color: var(--money-accent);
}

.money-hero__lead {
  max-width: 620px;
  margin: 21px 0 0;
  color: #dceaf4;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.65;
}

.money-hero__price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 22px;
  color: #dceaf4;
  font-size: 14px;
}

.money-hero__price strong {
  color: #fff;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -.035em;
  line-height: 1;
}

.money-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.money-action {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.money-action--primary {
  background: #22c55e;
  color: #062a1a;
  box-shadow: 0 12px 32px rgba(34, 197, 94, .24);
}

.money-action--secondary {
  border-color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.08);
  color: #fff;
  backdrop-filter: blur(8px);
}

.money-action:hover {
  transform: translateY(-2px);
}

.money-action--primary:hover {
  box-shadow: 0 16px 38px rgba(34, 197, 94, .34);
}

.money-action:focus-visible,
.money-hero a:focus-visible,
.rental-terms a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.money-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 16px;
  margin: 22px 0 0;
  padding: 0;
  color: #bed4e3;
  font-size: 13px;
  list-style: none;
}

.money-hero__proof li {
  display: flex;
  /* flex-start, not center: these claims wrap to two lines at narrow widths and a
     centred tick drifts away from the first line it belongs to. */
  align-items: flex-start;
  gap: 7px;
}

.money-hero__proof li::before {
  flex: 0 0 auto;
  line-height: 1.45;
}

.money-hero__proof li::before {
  content: "✓";
  color: var(--money-accent);
  font-weight: 900;
}

.money-hero__visual {
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
  margin: 0;
}

.money-hero__visual::before {
  content: "";
  position: absolute;
  width: min(390px, 88%);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 42% 58% 55% 45%;
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 30px 80px rgba(0,0,0,.22);
  transform: rotate(-5deg);
}

.money-hero__visual img {
  position: relative;
  z-index: 1;
  width: min(380px, 92%);
  max-height: 410px;
  object-fit: contain;
  filter: drop-shadow(0 24px 24px rgba(0,0,0,.28));
}

.money-hero__model-card {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 25px;
  max-width: 220px;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 15px;
  background: rgba(5, 31, 52, .78);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  color: #dceaf4;
  font-size: 12px;
  line-height: 1.45;
}

.money-hero__model-card strong {
  display: block;
  margin-bottom: 2px;
  color: #fff;
  font-size: 14px;
}

.care-path {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 42px 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.13);
  list-style: none;
}

.care-path li {
  position: relative;
  min-height: 82px;
  padding: 17px 18px 17px 58px;
  background: rgba(5, 31, 52, .76);
  color: #bed4e3;
  font-size: 12px;
  line-height: 1.45;
}

.care-path b {
  display: block;
  margin-bottom: 2px;
  color: #fff;
  font-size: 14px;
}

.care-path span {
  position: absolute;
  top: 18px;
  left: 18px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: var(--money-accent);
  color: #082f49;
  font-weight: 900;
}

/* The legacy feature strip used a negative margin against the old hero. */
.money-page .money-hero + .features-bar {
  margin-top: 0;
}

.rental-terms {
  padding: 76px 0;
  background:
    radial-gradient(circle at 5% 0%, rgba(45,212,191,.12), transparent 30%),
    #f8fbfd;
}

.rental-terms__header {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(30px, 6vw, 80px);
  align-items: end;
  margin-bottom: 32px;
}

.rental-terms__kicker {
  margin: 0 0 9px;
  color: var(--money-accent-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.rental-terms h2 {
  margin: 0;
  color: var(--money-ink);
  font-size: clamp(30px, 4.5vw, 46px);
  letter-spacing: -.035em;
  line-height: 1.08;
}

.rental-terms__intro {
  margin: 0;
  color: var(--money-muted);
  font-size: 17px;
  line-height: 1.75;
}

.rental-terms__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.rental-terms__card {
  padding: 26px;
  border: 1px solid #dbe7ee;
  border-radius: 20px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 40px rgba(31, 73, 91, .07);
}

.rental-terms__number {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 11px;
  background: var(--money-accent-soft);
  color: var(--money-accent-deep);
  font-weight: 900;
}

.rental-terms__card h3 {
  margin: 0 0 9px;
  color: var(--money-ink);
  font-size: 19px;
}

.rental-terms__card p {
  margin: 0;
  color: var(--money-muted);
  line-height: 1.72;
}

@media (max-width: 820px) {
  .money-shell { width: min(100% - 28px, 680px); }
  .money-hero { padding: 30px 0 22px; }
  .money-hero__grid { grid-template-columns: 1fr; gap: 18px; }
  .money-hero__content { max-width: none; }
  .money-hero h1 { font-size: clamp(35px, 10.5vw, 52px); }
  .money-hero__lead { margin-top: 14px; font-size: 15px; line-height: 1.55; }
  .money-hero__price { margin-top: 15px; }
  .money-hero__price strong { font-size: 34px; }
  .money-hero__actions { margin-top: 18px; }
  .money-action { flex: 1 1 180px; min-height: 48px; padding: 12px 15px; }
  .money-hero__proof { margin-top: 16px; font-size: 12px; }
  /* Flatten the text column into the grid so the photo can sit between the
     H1 and the price, instead of below the whole text block at y~687.
     Order: eyebrow -> H1 -> photo -> price -> CTA -> proof -> lead.
     The lead is the longest, least decisive block, so it moves under the
     offer rather than delaying it. */
  .money-hero__content { display: contents; }
  .money-hero__eyebrow { order: 1; }
  .money-hero h1 { order: 2; }
  .money-hero__visual { order: 3; }
  .money-hero__price { order: 4; }
  .money-hero__actions { order: 5; }
  /* .money-hero__content is display:contents here, so the subline is a direct grid
     item. Without an explicit order it defaults to 0 and jumps above the eyebrow.
     Same order as the actions it belongs to; document order keeps it underneath. */
  .money-hero__subline { order: 5; }
  /* The conversation card replaced .money-hero__proof and inherits its slot. Same trap as
     the subline above: without an explicit order it defaults to 0 and jumps to the top. */
  .money-hero .hero-chat { order: 6; }
  .money-hero__lead { order: 7; }

  .money-hero__grid { gap: 12px; }
  .money-hero__visual { min-height: 190px; }
  .money-hero__visual::before { width: 190px; }
  .money-hero__visual img { width: 196px; max-height: 196px; }
  .money-hero__lead { margin-top: 4px; }
  .money-hero__price { margin-top: 0; }
  .money-hero__actions { margin-top: 0; }
  .money-hero__proof { margin-top: 2px; }
  .money-hero__model-card { right: max(0px, calc(50% - 185px)); bottom: 10px; max-width: 175px; padding: 9px 11px; }
  .care-path { margin-top: 18px; }
  .care-path li { min-height: 72px; padding: 13px 10px 13px 44px; }
  .care-path span { top: 14px; left: 10px; width: 25px; height: 25px; }
  .care-path b { font-size: 12px; }
  .care-path small { display: none; }
  .rental-terms { padding: 58px 0; }
  .rental-terms__header { grid-template-columns: 1fr; gap: 18px; }
}

/* Short viewports (iPhone SE and similar) cannot hold the H1, photo, price
   and CTA at full size alongside the consent notice. Shrink the visual so the
   primary action still lands clear of it on first paint. */
@media (max-width: 820px) and (max-height: 720px) {
  .money-hero { padding: 20px 0 18px; }
  .money-hero h1 { font-size: clamp(27px, 8vw, 38px); }
  .money-hero__visual { min-height: 150px; }
  .money-hero__visual::before { width: 150px; }
  .money-hero__visual img { width: 156px; max-height: 156px; }
  .money-hero__model-card { display: none; }
  .money-hero__grid { gap: 10px; }
}

@media (max-width: 560px) {
  .money-hero__eyebrow { margin-bottom: 12px; font-size: 10px; }
  .money-hero__actions { flex-direction: column; }
  .money-action { flex-basis: auto; width: 100%; }
  /* One claim per line. These items have very uneven lengths ("Minimum sewa satu
     bulan" vs "Tiada deposit untuk semua tempoh sewa katil hospital, termasuk satu
     bulan"), so a two-column grid left short items stranded beside tall wrapped ones
     and the whole strip read as ragged. */
  .money-hero__proof { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .money-hero__model-card { right: 0; font-size: 10px; }
  .care-path li { padding-left: 39px; font-size: 10px; }
  .care-path span { left: 8px; }
  .rental-terms__grid { grid-template-columns: 1fr; }
  .rental-terms__card { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .money-page *,
  .money-page *::before,
  .money-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Sits under the money-page CTA pair, same role as .hero-cta-subline on the homepage:
   claimRules forbids a delivery-time promise, so checking the slot is the reason to tap. */
.money-hero__subline {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #bed4e3;
}