/* ==========================================================================
   Metropoline "30 Reasons" LP
   Scaling model: 1rem = 10 design px.
   Desktop design width 1440px  -> html font-size .6944vw  (10px @1440)
   Mobile  design width  640px  -> html font-size 1.5625vw (10px @640)
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
button, input, fieldset, legend { font: inherit; border: 0; background: none; }
button { cursor: pointer; }

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Abraham';
  src: url('../fonts/Abraham-Light.woff2') format('woff2'),
       url('../fonts/Abraham-Light.woff') format('woff'),
       url('../fonts/Abraham-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Abraham';
  src: url('../fonts/Abraham-Regular.woff2') format('woff2'),
       url('../fonts/Abraham-Regular.woff') format('woff'),
       url('../fonts/Abraham-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Abraham';
  src: url('../fonts/Abraham-Medium.woff2') format('woff2'),
       url('../fonts/Abraham-Medium.woff') format('woff'),
       url('../fonts/Abraham-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --metro-light: #FFFAF0;
  --metro-yellow: #FFAA00;
  --metro-orange: #FF8200;
  --metro-navy: #0A1432;
  --metro-cream: #FFEDC9;
  --shadow-card: inset .2rem .2rem .2rem .2rem rgba(169, 86, 0, .35);
  --shadow-input: inset .2rem .2rem .2rem 0 rgba(0, 0, 0, .16);
  --font-heading: 'Abraham', 'Heebo', Arial, sans-serif;
  --font-body: 'Arimo', Arial, Helvetica, sans-serif;
}

html { font-size: .6944vw; }
html[lang=he] { direction: rtl; }

body {
  font-family: var(--font-heading);
  color: var(--metro-navy);
  background: var(--metro-yellow);
}

:focus-visible { outline: .3rem solid var(--metro-navy); outline-offset: .2rem; }

.mob-only { display: none; }

/* ---------- Page canvas ---------- */
.lp {
  position: relative;
  width: 100%;
  height: 244rem;
  overflow: hidden;
  background: #fff;
}
.lp-light {
  position: absolute; inset-inline: 0; top: 0;
  height: 99.6rem;
  background: var(--metro-light);
}
.wave-d {
  position: absolute; left: -24.4rem; top: 50rem;
  width: 204.4rem; height: 179.2rem;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.wave-d img { width: 188.6rem; height: 160.2rem; transform: rotate(6.03deg); max-width: none; }
.wave-m { display: none; }

/* ---------- Header ---------- */
.lp-logo {
  position: absolute; right: 12rem; top: 4.5rem;
  width: 20.3rem;
}

/* ---------- Hero ---------- */
.hero-blob { position: absolute; left: 14.9rem; top: 5.8rem; width: 38rem; height: 47.5rem; pointer-events: none; }
.hero-splash { position: absolute; left: 24.9rem; top: 56.6rem; width: 4.25rem; pointer-events: none; }
.hero-photo {
  position: absolute; left: 20.2rem; top: 6.2rem;
  width: 46.2rem; height: 102.1rem;
  object-fit: cover; object-position: 31% bottom;
}
.hero-bubble { position: absolute; left: 53.4rem; top: 7.6rem; width: 26.2rem; pointer-events: none; }

.hero-title {
  position: absolute; right: 12rem; top: 18.9rem;
  width: 52.4rem; text-align: center;
  font-weight: 500;
}
.hero-title .t1 { display: block; font-size: 6.4rem; line-height: 6.3rem; letter-spacing: -.064rem; }
.hero-title .t2 { display: block; font-size: 9.2rem; line-height: 6rem; letter-spacing: -.092rem; color: var(--metro-orange); }
.hero-title .t3 { display: block; font-size: 5.2rem; line-height: 4.8rem; margin-top: .9rem; }

/* Top 5 benefits */
.top-benefits { position: absolute; right: 12.1rem; top: 43.8rem; width: 52.2rem; }
.tcard-main {
  position: relative;
  width: 52.2rem; height: 8.2rem;
  background: var(--metro-orange);
  border: .15rem solid #fff;
  border-radius: .8rem;
  box-shadow: inset .2rem .2rem .2rem .2rem rgba(0, 0, 0, .16);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.tcard-main .txt { width: 37.8rem; font-size: 2.8rem; line-height: 2.3rem; font-weight: 500; letter-spacing: .028rem; }
.tcard-main .txt .sub { font-size: 2.1rem; font-weight: 400; letter-spacing: .021rem; }
.tcard-main .txt .star { color: var(--metro-cream); }
.tcard-main .num { position: absolute; right: 2.5rem; top: .8rem; }
.num {
  font-weight: 300; font-size: 5.2rem; line-height: 5rem;
  letter-spacing: .052rem; color: var(--metro-light);
}
.top-grid {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(2, 25.39rem);
  gap: .9rem 1.42rem;
}
.tcard {
  position: relative;
  height: 7.6rem;
  background: var(--metro-yellow);
  border: .15rem solid #fff;
  border-radius: .8rem;
  box-shadow: var(--shadow-card);
}
.tcard .txt {
  position: absolute; right: 5.7rem; top: 1.8rem;
  text-align: start; font-size: 2.3rem; line-height: 2.1rem; font-weight: 500; letter-spacing: .023rem;
}
.tcard .txt .sub { display: block; font-size: 1.8rem; font-weight: 400; letter-spacing: 0; }
.tcard .num { position: absolute; right: 1.8rem; top: 1rem; }

.scroll-hint {
  position: absolute; right: 12.1rem; top: 72rem;
  width: 52.2rem; text-align: center;
}
.scroll-hint .sh1 { font-size: 2.1rem; line-height: 2.6rem; font-weight: 400; }
.scroll-hint .sh2 { font-size: 2.3rem; line-height: 2.6rem; font-weight: 500; letter-spacing: .023rem; }
.scroll-arrow {
  position: absolute; left: 100rem; top: 79.7rem;
  width: 7.6rem; height: 5.6rem;
  display: flex; align-items: center; justify-content: center;
}
.scroll-arrow img { width: 3.6rem; height: 1.6rem; transform: scaleY(-1); transition: transform .2s ease; }
.scroll-arrow:hover img { transform: scaleY(-1) translateY(-.4rem); }

/* ---------- Form section ---------- */
.form-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 94.2rem; width: 94.9rem; text-align: center; font-weight: 500;
}
.form-title .ft1 { display: block; font-size: 4.2rem; line-height: 4.1rem; letter-spacing: .032rem; }
.form-title .ft2 { display: block; font-size: 3.2rem; line-height: 3.6rem; font-weight: 400; }

.form-box {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 103.8rem; width: 120rem; height: 20rem;
  background: var(--metro-navy);
  border-radius: .8rem;
}
.form-fields {
  position: absolute; right: 6.9rem; top: 4.5rem;
  display: flex; align-items: flex-end; gap: 2.8rem;
}
.form-field { display: flex; flex-direction: column; align-items: flex-start; width: 19.5rem; }
.form-field label {
  align-self: flex-start;
  font-family: var(--font-body); font-size: 1.8rem; color: var(--metro-light);
  margin-bottom: .6rem; font-weight: 400;
}
.form-field .req { color: var(--metro-light); }
.form-field input {
  width: 100%; height: 4.5rem;
  background: #fff; border: .1rem solid #fff; border-radius: .8rem;
  box-shadow: var(--shadow-input);
  font-family: var(--font-body); font-size: 1.8rem; color: var(--metro-navy);
  padding: 0 1.6rem;
  transition: border-color .2s, box-shadow .2s;
}
.form-field input:focus { outline: none; border-color: var(--metro-orange); box-shadow: var(--shadow-input), 0 0 0 .3rem rgba(255, 130, 0, .35); }
.form-field input.input-error { border-color: #EF4444; }
.send {
  width: 17rem; height: 4.6rem;
  background: var(--metro-orange);
  border-radius: 3.6rem;
  box-shadow: 0 .1rem .2rem 0 #A95600;
  color: #fff; font-family: var(--font-body); font-weight: 500; font-size: 2.1rem;
  transition: transform .2s ease, background .2s ease, opacity .2s;
}
.send:hover { background: #E97500; transform: translateY(-.1rem); }
.send:active { transform: translateY(0); }
.send[disabled] { opacity: .4; cursor: default; }

.license-group {
  position: absolute; right: 41.4rem; top: 14.1rem;
  display: flex; align-items: center;
  font-family: var(--font-body); font-size: 1.8rem; color: #fff;
}
.license-question { margin-inline-end: .8rem; }
.license-options { display: flex; align-items: center; }
.license-option { display: flex; align-items: center; gap: .8rem; cursor: pointer; }
.license-option + .license-option { margin-inline-start: 3.4rem; }
.license-option input {
  appearance: none; -webkit-appearance: none;
  width: 2rem; height: 2rem; flex: 0 0 auto;
  background: #fff; border: .1rem solid #fff; border-radius: .4rem;
  box-shadow: var(--shadow-input);
  cursor: pointer; position: relative;
}
.license-option input:checked::after {
  content: "";
  position: absolute; inset: 0;
  background: url('../img/checkmark.svg') center / 1.2rem 1.2rem no-repeat;
}

/* No license box */
.no-license-box {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 127.7rem; width: 58.9rem; height: 12rem;
  border: .225rem dashed #fff; border-radius: .8rem;
  display: block; text-align: center;
  padding-top: 2.4rem;
  transition: background .2s ease;
}
.no-license-box:hover { background: rgba(255, 255, 255, .12); }
.no-license-box .bus-icon { position: absolute; right: 2.7rem; top: 4rem; width: 3.6rem; height: 4.3rem; }
.no-license-box .nl-title { display: block; font-size: 3.2rem; line-height: 2.9rem; font-weight: 500; letter-spacing: .032rem; }
.no-license-box .nl-text { display: block; font-family: var(--font-body); font-size: 1.8rem; line-height: 2.6rem; }
.no-license-box .nl-cta { display: block; font-family: var(--font-body); font-size: 1.8rem; line-height: 2.4rem; font-weight: 700; }

/* ---------- Reasons 6-30 ---------- */
.reasons {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 143.9rem; width: 120rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 7.25rem;
  gap: 1.6rem;
}
.rcard {
  background: var(--metro-cream);
  border: .15rem solid #fff;
  border-radius: .8rem;
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: flex-start;
  gap: .8rem;
  padding-inline: 2.2rem 1rem;
}
.rcard .rnum {
  order: -1;
  font-family: var(--font-heading);
  font-weight: 300; font-size: 5.2rem; line-height: 4.2rem;
  letter-spacing: .052rem; color: var(--metro-orange);
  min-width: 3.4rem; text-align: center;
}
.rcard .rtext { text-align: start; font-size: 2.3rem; line-height: 2rem; font-weight: 500; letter-spacing: .023rem; }
.rcard .rtext .sub { display: block; font-size: 1.8rem; font-weight: 400; letter-spacing: 0; }
.rcard-30 { grid-column: 2 / 4; justify-content: center; }
.rcard-30 .rtext { font-size: 2.3rem; }

/* ---------- Closing (mascot) ---------- */
.closing { position: absolute; inset: 0; pointer-events: none; }
.mascot-blob { position: absolute; left: 11.85rem; top: 206rem; width: 14.84rem; }
.mascot-photo { position: absolute; left: 13.85rem; top: 197.9rem; width: 32.4rem; height: 43.7rem; object-fit: cover; object-position: center bottom; }
.m-dot-1 { position: absolute; left: 11.518rem; top: 204.294rem; width: 1.9rem; }
.m-dot-2 { position: absolute; left: 9.14rem; top: 215.08rem; width: 1.49rem; }
.m-dot-3 { position: absolute; left: 12.64rem; top: 225.29rem; width: 1.02rem; }
.m-dot-4 { position: absolute; left: 7.33rem; top: 208.3rem; width: 3.89rem; }
.m-dot-5 { position: absolute; left: 13.187rem; top: 223.362rem; width: 2rem; }
.m-dot-6 { position: absolute; left: 11.492rem; top: 201.973rem; width: 2.4rem; }
.m-dot-7 { position: absolute; left: 10.39rem; top: 212.95rem; width: .94rem; }
.m-dot-8 { position: absolute; left: 53.7rem; top: 219.5rem; width: 3.007rem; }
.mascot-bubble-d { position: absolute; left: 34.789rem; top: 203.386rem; width: 25.125rem; }
.mascot-btext-1 { position: absolute; left: 42.543rem; top: 214.125rem; width: 12rem; }
.mascot-btext-2 { position: absolute; left: 47.2rem; top: 211.276rem; width: 5.442rem; }
.mascot-doodle { position: absolute; left: 43.3rem; top: 210.1rem; width: 3.415rem; }
.mascot-bubble-m { display: none; }

/* ---------- Footer ---------- */
.footer-logo { position: absolute; right: 12rem; top: 226rem; width: 19.8rem; }
.pill {
  position: absolute; top: 226.3rem; height: 4.6rem;
  background: var(--metro-light);
  border: .1rem solid var(--metro-orange);
  border-radius: 3.6rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 500; font-size: 2rem; color: var(--metro-navy);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pill:hover { transform: translateY(-.1rem); box-shadow: 0 .4rem .6rem rgba(0, 0, 0, .1); }
.pill-site { left: 52.7rem; width: 29.5rem; direction: ltr; letter-spacing: .1rem; }
.pill-phone { left: 84.5rem; width: 25.3rem; gap: .4rem; }
.pill-phone .ph-num { color: var(--metro-orange); font-weight: 700; letter-spacing: .02rem; }
.pill-phone .ph-star { width: 1.3rem; height: 1.3rem; margin-top: -.1rem; }
.footer-line {
  position: absolute; left: 52.8rem; top: 233.7rem;
  width: 79.2rem; height: 0;
  border: 0; border-top: .1rem solid var(--metro-navy); opacity: .35;
}
.disclaimer {
  position: absolute; right: 12rem; top: 235.8rem;
  width: 79.3rem;
  font-family: var(--font-body); font-size: 1.6rem; line-height: 2.2rem;
  letter-spacing: .016rem; text-align: start;
}

/* ---------- Thanks page ---------- */
.thanks-page .lp { height: 100vh; min-height: 60rem; }
.thanks-wrap {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  text-align: center; width: 90%;
}
.thanks-wrap h1 { font-size: 6rem; line-height: 1.1; font-weight: 500; }
.thanks-wrap p { font-size: 2.6rem; margin-top: 1.6rem; font-weight: 400; }
.thanks-wrap .send { display: inline-flex; align-items: center; justify-content: center; margin-top: 3.2rem; width: auto; padding: 0 4rem; text-decoration: none; }

/* ==========================================================================
   Mobile (design 640) — 1rem = 10 design px @640vw
   ========================================================================== */
@media (max-width: 1023px) {
  html { font-size: 1.5625vw; }
  .mob-only { display: inline; }
  .desk-only { display: none; }

  .lp { height: 547rem; background: #fff; }
  .lp-light { height: 163.4rem; }
  .wave-d { display: none; }
  .wave-m { display: block; position: absolute; left: 0; top: 130.6rem; width: 64rem; height: 347.3rem; pointer-events: none; }
  .wave-m img { width: 100%; height: 100%; }

  .lp-logo { right: auto; left: 20.4rem; top: 5.5rem; width: 24.8rem; }

  /* Hero */
  .hero-title { right: auto; left: 5.8rem; top: 17.2rem; width: 52.4rem; }
  .hero-blob { left: 1.6rem; top: 95.1rem; width: 33.5rem; height: 41.9rem; }
  .hero-splash { left: 9.12rem; top: 139rem; width: 3.81rem; }
  .hero-photo { left: 5.7rem; top: 96.1rem; width: 40.6rem; height: 89.6rem; }
  .hero-bubble { left: 34.9rem; top: 95.8rem; width: 27.5rem; }

  .top-benefits { right: auto; left: 3rem; top: 42.6rem; width: 58rem; }
  .tcard-main { width: 58rem; height: 9.64rem; border-radius: 1.2rem; border-width: .17rem; }
  .tcard-main .txt { width: 46.8rem; font-size: 3.4rem; line-height: 2.5rem; }
  .tcard-main .txt .sub { font-size: 2.4rem; line-height: 2.2rem; }
  .tcard-main .num { right: 2.4rem; top: .9rem; }
  .num { font-size: 5.78rem; line-height: 5.55rem; }
  .top-grid { margin-top: 1.45rem; grid-template-columns: repeat(2, 28.19rem); gap: 1rem 1.6rem; }
  .tcard { height: 8.97rem; }
  .tcard .txt { right: 6.4rem; top: 2.2rem; font-size: 2.8rem; line-height: 2.4rem; }
  .tcard .txt .sub { font-size: 2.2rem; }
  .tcard .num { right: 2.2rem; top: 1.1rem; }

  .scroll-hint { right: auto; left: 3.2rem; top: 76.5rem; width: 57.6rem; }
  .scroll-hint .sh1 { font-size: 2.2rem; line-height: 2.9rem; }
  .scroll-hint .sh2 { font-size: 3.2rem; line-height: 3.2rem; }
  .scroll-arrow { left: 27.7rem; top: 89.1rem; width: 8.6rem; height: 6.2rem; }
  .scroll-arrow img { width: 4.6rem; height: 2.2rem; }

  /* Form */
  .form-title { top: 173.3rem; width: 57.7rem; }
  .form-title .ft1 { font-size: 6.2rem; line-height: 5.2rem; letter-spacing: .031rem; }
  .form-title .ft2 { font-size: 3.6rem; line-height: 3.5rem; letter-spacing: .036rem; margin-top: 2rem; }

  .form-box { top: 203.8rem; width: 58rem; height: 91.3rem; border-radius: 1.2rem; }
  .form-fields {
    right: auto; left: 50%; transform: translateX(-50%);
    top: 7rem; width: 50rem;
    flex-direction: column; align-items: stretch; gap: 3rem;
  }
  .form-field { width: 100%; }
  .form-field label { font-size: 2.1rem; }
  .form-field .req { font-size: 1.8rem; }
  .form-field input { height: 7rem; font-size: 2.4rem; padding: 0 2rem; }
  .send { width: 40rem; height: 8.2rem; border-radius: 6.4rem; font-size: 3.2rem; margin: 3rem auto 0; }

  .license-group {
    right: auto; left: 50%; transform: translateX(-50%);
    top: 75.7rem; width: 100%;
    flex-direction: column; font-size: 2.6rem;
  }
  .license-question { margin-inline-end: 0; margin-bottom: 1.6rem; text-align: center; }
  .license-options { display: flex; align-items: center; justify-content: center; }
  .license-option { gap: 1rem; }
  .license-option + .license-option { margin-inline-start: 7rem; }
  .license-option input { width: 3rem; height: 3rem; border-radius: .6rem; }
  .license-option input:checked::after { background-size: 1.75rem 1.75rem; }

  .no-license-box { top: 300.2rem; width: 58rem; height: 23.2rem; padding-top: 3.6rem; }
  .no-license-box .bus-icon { display: none; }
  .no-license-box .nl-title { font-size: 4.2rem; line-height: 3.4rem; letter-spacing: .042rem; }
  .no-license-box .nl-text { font-size: 2.6rem; line-height: 3rem; margin-top: 1rem; }
  .no-license-box .nl-cta { font-size: 2.6rem; line-height: 2.4rem; margin-top: 2.4rem; }

  /* Reasons */
  .reasons {
    top: 328.5rem; width: 58rem;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 8.53rem;
    gap: 1.5rem 1.75rem;
  }
  .rcard { padding-inline: 1.6rem .8rem; }
  .rcard-30 { grid-column: 1 / 3; }

  /* Closing */
  .mascot-blob { left: 8.2rem; top: 474.6rem; width: 17.2rem; }
  .mascot-photo { left: 11rem; top: 465rem; width: 38rem; height: 51.3rem; }
  .m-dot-1 { left: 5.02rem; top: 482.28rem; width: 1.7rem; }
  .m-dot-2 { left: 14.27rem; top: 465.7rem; width: 4.79rem; }
  .m-dot-3 { left: 9.4rem; top: 494.1rem; width: 2.84rem; }
  .m-dot-4 { left: 3.08rem; top: 475.4rem; width: 4.44rem; }
  .m-dot-5 { display: none; }
  .m-dot-6 { display: none; }
  .m-dot-7 { left: 6.45rem; top: 479.83rem; width: 1.07rem; }
  .m-dot-8 { display: none; }
  .mascot-bubble-d, .mascot-btext-1, .mascot-btext-2, .mascot-doodle { display: none; }
  .mascot-bubble-m { display: block; position: absolute; left: 23.9rem; top: 452.1rem; width: 40rem; }

  /* Footer */
  .footer-logo { right: auto; left: 20.29rem; top: 516.3rem; width: 25.43rem; }
  .pill { top: 525.7rem; height: 5.2rem; }
  .pill-site { left: 3rem; width: 28rem; }
  .pill-phone { left: 33rem; width: 28rem; }
  .footer-line { left: 3rem; top: 534.7rem; width: 58rem; }
  .disclaimer { right: auto; left: 50%; transform: translateX(-50%); top: 537.7rem; width: 58rem; font-size: 1.8rem; line-height: 2.7rem; text-align: center; }

  .thanks-wrap h1 { font-size: 5.2rem; }
  .thanks-wrap p { font-size: 2.8rem; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}
html { scroll-behavior: smooth; }