/* =====================================================================================================
   13-get · DESKTOP (1024 px and wider) · GET-D
   The last call: Today's sky gradient, soft light behind the waving star, the star on its little shadow
   line, the words straight on the sky (no wrapper box, §14), Apple's official App Store badge and Mira waving (nothing else floats, founder 30 Sep).
   Every image is sized by WIDTH ONLY; height is always auto so nothing can stretch.
   ===================================================================================================== */

#get .v-desktop {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 52%, var(--sky-2) 100%);
}

#get .v-desktop .get-d {
  --star-w: clamp(170px, 13vw, 200px);   /* a little smaller with the 44 px title */
  position: relative;
  padding-top: var(--section-y);         /* §15: spacing is set centrally (FAQ above is white, so the full value) */
  padding-bottom: calc(var(--section-y) + 40px);   /* room for the white hill the footer stands on */
}
/* a soft white hill at the foot, the hero's hill in reverse: the sky closes gently into the white footer, no hard seam */
#get .v-desktop .get-d::after {
  content: ""; position: absolute; z-index: 1; left: 50%; bottom: -1px;
  width: max(170vw, 2400px); height: 72px; transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: #fff;
  pointer-events: none;
}

/* ---- the centred column ---- */
#get .v-desktop .get-d-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---- the waving star, soft light behind it, standing on its shadow line ---- */
#get .v-desktop .get-d-hello {
  position: relative;
  width: var(--star-w);
  flex: none;
}
#get .v-desktop .get-d-hello::before {    /* soft white light on the sky, behind the star */
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: 290%;
  aspect-ratio: 1.3;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, .62) 38%, rgba(255, 255, 255, .22) 66%, rgba(255, 255, 255, 0));
  pointer-events: none;
}
/* The body's tip sits at 47.8% of the art's width (the wave lines stick out to the right), so the art
   is nudged 2.2% right: the star's body is then optically centred over the title and its shadow. */
#get .v-desktop .get-d-star {
  position: relative;
  left: 2.2%;                            /* §15: depth is a whisper; the app's shadow line below is its only shadow */
}
#get .v-desktop .get-d-wave {
  transform-origin: 47.8% 99%;          /* rotate around the star's own base */
  animation: get-d-wave 5.6s ease-in-out infinite;
  animation-delay: 1.2s;
  will-change: transform;
}
#get .v-desktop .get-d-wave.get-d-now {   /* a quick hello when the pointer comes by (js) */
  animation: get-d-wave-now 1.15s ease-in-out 1;
}
#get .v-desktop .get-d-wave img {
  display: block;
  width: 100%;
  height: auto;                          /* true shape: 540 × 522 */
}
#get .v-desktop .get-d-shadow {
  width: 46%;
  height: 8px;
  margin: 12px auto 0;
  background: radial-gradient(closest-side, rgba(var(--deep-rgb), .24), rgba(var(--deep-rgb), .10) 70%, rgba(var(--deep-rgb), 0));
  animation: get-d-shadow 5.6s ease-in-out infinite;
  animation-delay: 1.2s;
}

@keyframes get-d-wave {
  0%, 58%   { transform: rotate(0deg); }
  63%       { transform: rotate(-7deg); }
  69%       { transform: rotate(5.5deg); }
  75%       { transform: rotate(-4.5deg); }
  81%       { transform: rotate(3deg); }
  87%       { transform: rotate(-1.2deg); }
  92%, 100% { transform: rotate(0deg); }
}
@keyframes get-d-wave-now {
  0%   { transform: rotate(0deg); }
  18%  { transform: rotate(-7deg); }
  40%  { transform: rotate(5.5deg); }
  62%  { transform: rotate(-4deg); }
  82%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}
/* the shadow line barely breathes while the star rocks (a line only, never the art) */
@keyframes get-d-shadow {
  0%, 58%, 92%, 100% { transform: scaleX(1); }
  63%, 75%           { transform: scaleX(.92); }
  69%, 81%           { transform: scaleX(.95); }
}

/* ---- words, straight on the sky ---- */
/* the closing line is the biggest type on the page after the hero (V3-BENCH: the closing CTA is the big moment) */
#get .v-desktop .get-d-title {
  margin-top: 32px;
  max-width: none;
  font-size: clamp(56px, 5.4vw, 80px); line-height: 1.02; letter-spacing: -0.034em;
}
#get .v-desktop .get-d-lede {
  margin-top: 20px;
  max-width: 560px;
}

/* ---- the call to action: Apple's official badge, 54 px (base.css .store-badge), black on the light sky, untouched
        (§16: no recolour, no shadow, clear space ≥ a quarter of its height) ---- */
#get .v-desktop .get-d-cta {
  display: flex;                         /* no line box, so no stray gap under the badge */
  margin-top: 36px;
}
#get .v-desktop .get-d-cta .store-badge img { height: 60px; }   /* Apple's badge, a touch larger for the last call; untouched */

/* ---- the question line and the real mailto link ---- */
#get .v-desktop .get-d-ask {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
}
#get .v-desktop .get-d-ask a {
  color: var(--deep);                    /* 7:1 on the lower sky; accent blues fall under 4.5:1 down here */
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--deep-rgb), .35);
  text-underline-offset: 4px;
  transition: text-decoration-color .18s var(--ease);
}
@media (hover: hover) {
  #get .v-desktop .get-d-ask a:hover { text-decoration-color: currentColor; text-decoration-thickness: 1.5px; }
}

@media (prefers-reduced-motion: reduce) {
  #get .v-desktop .get-d-wave,
  #get .v-desktop .get-d-shadow { animation: none; will-change: auto; }
}

/* ==== ONE TYPE SCALE (founder 30 Sep: "in some places size is big, in some size is small"; the hero is the reference) ====
   Section h2 44/500/1.08/-0.03em at every desktop width · lede 19/350/1.5 in --body · in-section titles 26/500 · body and lists 17/350/1.5 (scaled down 30 Sep: "reduce the size little").
   Kept identical in every desktop section file; RT-LOOP-D. */
#get .v-desktop .get-d-title { font-size: 44px; font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; }
#get .v-desktop .get-d-lede { font-size: 19px; font-weight: 350; line-height: 1.5; color: var(--body); }