/* =========================================================
   Hero — MOBILE / TABLET (≤1023px), per the mobile mockup.
   Sized in --m (1m = 1px of the 853px-wide mobile mockup).
   Text has px floors so it stays readable on small phones.
   ========================================================= */

@media (max-width: 1023px) {
  .page { width: 100%; }

  .hero {
    --m: calc(min(100vw, 700px) / 853);
    width: min(100vw, 700px);
    height: auto;
    margin: 0 auto;
    padding-top: calc(var(--m) * 100);
  }

  /* desktop-only parts off, mobile-only parts on */
  .btn-download--desk,
  .benefits,
  .hero__photo,
  .features,
  .only-desk { display: none; }
  .hero__decor,
  .hero__cta-mob { display: block; }
  .hero__grid { display: grid; }
  .hero__swoosh { display: block; }
  .only-mob { display: block; }

  /* ---------- copy column ---------- */
  .hero__copy {
    width: 100%;
    min-height: calc(var(--m) * 880);
    padding: 0 0 0 calc(var(--m) * 63);
  }

  .brand { gap: calc(var(--m) * 18); }
  .brand__mark {
    width: calc(var(--m) * 82);
    height: calc(var(--m) * 82);
    border-radius: calc(var(--m) * 19);
  }
  .brand__mark svg {
    width: calc(var(--m) * 48);
    height: calc(var(--m) * 48);
  }
  .brand__name {
    font-size: calc(var(--m) * 72);
    transform: translateY(calc(var(--m) * -4));
  }

  .hero__eyebrow {
    max-width: calc(var(--m) * 470);
    margin: calc(var(--m) * 24) 0 0 calc(var(--m) * 3);
    font-size: max(8.5px, calc(var(--m) * 13.5));
    line-height: 1.5;
  }

  .hero__title {
    margin-top: calc(var(--m) * 38);
    font-size: calc(var(--m) * 66);
    line-height: .88;
    letter-spacing: -.03em;
  }
  .hero__title .line { white-space: normal; }
  .hero__title .w { display: block; }

  .hero__swoosh {
    width: calc(var(--m) * 230);
    height: auto;
    margin-top: calc(var(--m) * 16);
  }
  .hero__swoosh path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 1.2s var(--ease-out) .75s forwards;
  }

  .hero__lead {
    max-width: max(170px, calc(var(--m) * 345));
    margin: calc(var(--m) * 26) 0 0 calc(var(--m) * 3);
    font-size: max(13px, calc(var(--m) * 24.5));
    line-height: 1.35;
  }
  .br-desk { display: none; }

  /* ---------- 2×2 feature grid ---------- */
  .hero__grid {
    grid-template-columns: repeat(2, calc(var(--m) * 161));
    row-gap: calc(var(--m) * 42);
    margin-top: calc(var(--m) * 46);
  }
  .hero__grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(var(--m) * 95);
    font-size: max(12px, calc(var(--m) * 19.5));
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
  }
  .hero__grid .tile {
    display: grid;
    place-items: center;
    width: calc(var(--m) * 95);
    height: calc(var(--m) * 66);
    margin-bottom: calc(var(--m) * 12);
    border-radius: calc(var(--m) * 18);
    background: var(--c-green-100);
    color: #0f3b22;
    transition: transform .45s var(--ease-spring), background-color .3s;
  }
  .hero__grid .tile svg {
    width: calc(var(--m) * 38);
    height: calc(var(--m) * 38);
  }
  .hero__grid b { font-weight: 600; color: var(--c-ink); }
  .hero__grid span:not(.tile) { color: var(--c-muted); }
  .hero__grid a:active .tile { transform: scale(.94); }
  @media (hover: hover) {
    .hero__grid a:hover .tile { transform: translateY(-3px) rotate(-5deg); background: #d6e8d4; }
  }

  /* ---------- phone, placed on the right ---------- */
  .hero__art {
    --u: calc(var(--m) * 1.23);
    inset: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .phone-pos {
    left: calc(var(--m) * 490);
    top: calc(var(--m) * 246);
  }
  .phone {
    box-shadow:
      calc(var(--u) * -14) calc(var(--u) * 26) calc(var(--u) * 40) rgba(40, 60, 30, .28),
      calc(var(--u) * -3) calc(var(--u) * 6) calc(var(--u) * 12) rgba(40, 60, 30, .18);
  }

  /* ---------- background decor ---------- */
  .hero__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(calc(var(--m) * 30));
  }
  .blob--1 {
    left: calc(var(--m) * 430);
    top: calc(var(--m) * -60);
    width: calc(var(--m) * 560);
    height: calc(var(--m) * 460);
    background: radial-gradient(closest-side, rgba(178, 212, 160, .55), rgba(178, 212, 160, 0));
    animation: drift 14s ease-in-out infinite alternate;
  }
  .blob--2 {
    left: calc(var(--m) * 360);
    top: calc(var(--m) * 330);
    width: calc(var(--m) * 620);
    height: calc(var(--m) * 640);
    background: radial-gradient(closest-side, rgba(190, 218, 170, .5), rgba(190, 218, 170, 0));
    animation: drift 18s ease-in-out -6s infinite alternate;
  }
  .blob--3 {
    left: calc(var(--m) * -160);
    top: calc(var(--m) * 930);
    width: calc(var(--m) * 520);
    height: calc(var(--m) * 260);
    background: radial-gradient(closest-side, rgba(196, 222, 178, .5), rgba(196, 222, 178, 0));
    animation: drift 16s ease-in-out -3s infinite alternate;
  }
  .sphere {
    position: absolute;
    left: calc(var(--m) * 765);
    top: calc(var(--m) * 470);
    width: calc(var(--m) * 250);
    height: calc(var(--m) * 250);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fffdf8 0%, #f1ece1 55%, #ddd5c4 100%);
    box-shadow: calc(var(--m) * -10) calc(var(--m) * 20) calc(var(--m) * 40) rgba(80, 70, 40, .15);
    animation: bob 9s ease-in-out infinite;
  }
  .leaf {
    position: absolute;
    filter: drop-shadow(0 calc(var(--m) * 8) calc(var(--m) * 8) rgba(40, 70, 20, .18));
    animation: leaf-float 7s ease-in-out infinite;
  }
  .leaf--1 { left: calc(var(--m) * 605); top: calc(var(--m) * 105); width: calc(var(--m) * 62); height: calc(var(--m) * 92); --r: 52deg; }
  .leaf--2 { left: calc(var(--m) * 405); top: calc(var(--m) * 700); width: calc(var(--m) * 46); height: calc(var(--m) * 78); --r: -24deg; animation-delay: -2s; }
  .leaf--3 { left: calc(var(--m) * 800); top: calc(var(--m) * 410); width: calc(var(--m) * 64); height: calc(var(--m) * 98); --r: 28deg; animation-delay: -4s; }
  .leaf--4 { left: calc(var(--m) * 760); top: calc(var(--m) * 900); width: calc(var(--m) * 56); height: calc(var(--m) * 80); --r: 58deg; animation-delay: -1s; }

  /* ---------- CTA + laurel note ---------- */
  .hero__cta-mob {
    position: relative;
    z-index: 3;
    padding: calc(var(--m) * 40) 20px calc(var(--m) * 70);
    text-align: center;
  }
  .btn-download--mob {
    justify-content: center;
    gap: calc(var(--m) * 28);
    width: max(280px, calc(var(--m) * 527));
    max-width: 100%;
    height: max(56px, calc(var(--m) * 108));
    margin: 0 auto;
    padding: 0 calc(var(--m) * 40);
    border-radius: 999px;
    font-size: max(16px, calc(var(--m) * 31));
    box-shadow: 0 calc(var(--m) * 18) calc(var(--m) * 36) rgba(32, 103, 61, .28);
  }
  .btn-download--mob .btn-download__icon {
    width: max(24px, calc(var(--m) * 46));
    height: max(24px, calc(var(--m) * 46));
  }
  .btn-download__arrow {
    flex: none;
    width: max(18px, calc(var(--m) * 32));
    height: max(18px, calc(var(--m) * 32));
    animation: nudge 2.2s ease-in-out 2s infinite;
  }

  .laurel-note {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--m) * 26);
    margin-top: calc(var(--m) * 38);
    font-size: max(12.5px, calc(var(--m) * 21));
    line-height: 1.3;
    color: #5f665f;
  }
  .laurel {
    flex: none;
    width: max(14px, calc(var(--m) * 26));
    height: max(28px, calc(var(--m) * 52));
    color: #a7b6a2;
  }
  .laurel--r { transform: scaleX(-1); }
}

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-4%, 3%) scale(1.06); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes leaf-float {
  0%, 100% { transform: translate(0, 0) rotate(var(--r)); }
  50%      { transform: translate(4px, -10px) rotate(calc(var(--r) + 8deg)); }
}
@keyframes nudge {
  0%, 60%, 100% { transform: translateX(0); }
  30%           { transform: translateX(5px); }
}