/* =====================================================================================================
   13-get · MOBILE (below 1024 px). Owner: END-M (build 32). Every selector is scoped to #get .v-mobile.
   The last call: Today's sky gradient; Mira waving on her shadow line in a soft pool of light (nothing else floats);
   the words straight on the sky (no wrapper box, §14); Apple's official badge at 54 px (§16, BRIEF-B32 §1.13);
   a real mailto link. Readability §13; spacing and depth §15.
   ===================================================================================================== */

#get .v-mobile .get-m {
  --star: clamp(140px, 40vw, 164px);       /* the waving star: 140 px at 320, 156 px at 390, 164 px at 430 */
  position: relative;
  overflow: hidden;
  /* §15: spacing is set centrally — exactly --section-y top and bottom (the FAQ above is white, this is sky) */
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  padding-left: calc(var(--gutter) + env(safe-area-inset-left));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right));
  background: linear-gradient(180deg, #fff 0%, var(--sky-0) 14%, var(--sky-1) 48%, var(--sky-2) 100%);   /* RT-LOOP-M: starts white, so no seam under the white FAQ */
  text-align: center;
}
#get .v-mobile .get-m-inner { max-width: 560px; margin: 0 auto; }

/* ---- the star: true shape at every size (width only; base.css keeps height:auto) ---- */
#get .v-mobile .get-m-hello { position: relative; width: var(--star); margin: 0 auto 22px; }
/* a soft pool of light behind it (§12) */
#get .v-mobile .get-m-hello::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: 250%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -46%);
  background: radial-gradient(closest-side, #fff 0%, rgba(255, 255, 255, .85) 30%, rgba(255, 255, 255, .4) 62%, rgba(255, 255, 255, 0));
  pointer-events: none;
}
#get .v-mobile .get-m-wave { transform-origin: 45% 98%; }  /* its bottom point, so it waves standing on its shadow */
#get .v-mobile .get-m-wave img { width: 100%; }  /* it stands on the app's shadow line, so no extra drop (§15: line OR drop) */
#get .v-mobile .get-m-shadow { width: 46%; height: 12px; margin-top: 8px; border-radius: 50%; background: radial-gradient(closest-side, rgba(15, 26, 43, .16), rgba(15, 26, 43, .05) 60%, rgba(15, 26, 43, 0)); }   /* RT-LOOP-M: a soft contact shadow, not a line */
/* It rises in, then waves hello in gentle bursts (only while on screen: .loop-zone; never with reduced motion: base.css). */
#get .v-mobile .get-m-hello.in .get-m-wave { animation: get-m-wave 5.4s ease-in-out .7s infinite; }
#get .v-mobile .get-m-hello.in .get-m-shadow { animation: get-m-shadow 5.4s ease-in-out .7s infinite; }
@keyframes get-m-wave {
  0%, 44%, 100% { transform: translateY(0) rotate(0deg); }
  6%  { transform: translateY(-3px) rotate(-6deg); }
  13% { transform: translateY(-5px) rotate(5deg); }
  20% { transform: translateY(-4px) rotate(-5deg); }
  27% { transform: translateY(-3px) rotate(4deg); }
  34% { transform: translateY(-1px) rotate(-2deg); }
  40% { transform: translateY(0) rotate(0deg); }
}
@keyframes get-m-shadow {
  0%, 44%, 100% { transform: scaleX(1); opacity: 1; }
  13% { transform: scaleX(.86); opacity: .8; }
  27% { transform: scaleX(.9); opacity: .86; }
}

/* ---- words ---- */
#get .v-mobile .get-m-title .get-m-br { display: none; }           /* two lines on every phone (RT-COPY: headlines <= 2 lines) */
@media (max-width: 359.98px) {
  #get .v-mobile .get-m-title { font-size: 27px; }                  /* "Your first small step" fits one line at 320 */
}
#get .v-mobile .get-m-lede { max-width: 25em; margin: 12px auto 0; text-wrap: balance; }

/* ---- the call to action: Apple's official badge, untouched (never recoloured, no shadow or effects, §16);
   its clear space is kept by the margins around it. base.css gives it the press-in and hover lift. ---- */
#get .v-mobile .get-m-cta { display: flex; justify-content: center; margin-top: 26px; }   /* no line box, no stray gap */
#get .v-mobile .get-m-cta .store-badge { -webkit-tap-highlight-color: transparent; }

/* ---- questions: a real mailto link with a comfortable tap area (--deep: 7:1 even on the deepest sky) ---- */
#get .v-mobile .get-m-ask {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 18px; font-size: 15.5px; line-height: 1.5; color: var(--body);
}
#get .v-mobile .get-m-ask a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 16px; margin-top: -2px;
  border-radius: var(--r-row);
  color: var(--deep); font-size: 16.5px; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
  text-decoration-color: rgba(var(--deep-rgb), .35);
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
#get .v-mobile .get-m-ask a:active {
  transform: scale(.97); background-color: rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 3px rgba(var(--deep-rgb), .16);     /* presses in */
}

/* ---- tablets 768–1023: centred and roomy inside; the section padding stays --section-y (§15) ---- */
@media (min-width: 768px) {
  #get .v-mobile .get-m { --star: 188px; }
  #get .v-mobile .get-m-inner { max-width: 640px; }
  #get .v-mobile .get-m-hello { margin-bottom: 28px; }
  #get .v-mobile .get-m-shadow { height: 14px; margin-top: 10px; }
  #get .v-mobile .get-m-lede { margin-top: 16px; max-width: none; }
  #get .v-mobile .get-m-cta { margin-top: 32px; }
  #get .v-mobile .get-m-ask { flex-direction: row; justify-content: center; gap: 0; margin-top: 22px; font-size: 16.5px; }
  #get .v-mobile .get-m-ask a { margin: 0; padding: 0 10px; }
}

/* ---- RT-LOOP-M · ONE TYPE SCALE (founder 30 Sep; the hero is the reference): h2 30/1.1/-0.025em (28 under 360,
   40 on tablets) · lede 17/1.5/350 (19 on tablets) · labels 14/600 accent · in-section titles 22 · body 16–17 ---- */
#get .v-mobile .get-m-title { font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; }
#get .v-mobile .get-m-lede { font-size: 17px; line-height: 1.5; font-weight: 350; }
@media (max-width: 359.98px) { #get .v-mobile .get-m-title { font-size: 28px; } }
@media (min-width: 768px) { #get .v-mobile .get-m-title { font-size: 40px; } #get .v-mobile .get-m-lede { font-size: 19px; } }
#get .v-mobile .get-m-ask { font-size: 16px; }
#get .v-mobile .get-m-ask a { font-size: 16px; }

/* ---- RT-LOOP-M · cute pass: Mira ~15% smaller ---- */
#get .v-mobile .get-m { --star: clamp(120px, 34vw, 140px); }
@media (min-width: 768px) { #get .v-mobile .get-m { --star: 160px; } }