/* =====================================================================================================
   02 · How it works — MOBILE (below 1024 px). Owner: V3-HOW-M. Every selector is scoped to #how .v-mobile.
   V3 ("less phony, less info"): no phones, about 40 words. The whole story is the title itself, told in three beats:
   Pick it. / Do a little. / Write a line. Each beat is Mira acting it out (standing on the app's little shadow line)
   over one line of big type and one short line of body, each with its number coin (no trail: founder, no lines).
   · Phones (<768): one centred column, space between the beats.
   · Tablets (768–1023): zig-zag rows, Mira and the words side by side.
   Motion: each beat rises in (base .reveal), Mira pops; the poses float gently while on screen.
   ===================================================================================================== */

#how .v-mobile {
  --pad-l: max(var(--gutter), env(safe-area-inset-left));
  --pad-r: max(var(--gutter), env(safe-area-inset-right));
  --big: clamp(38px, 11.6vw, 52px);                 /* the beat titles: 45 px at 390 */
  background: #fff;
  padding: var(--section-y-tight) var(--pad-r) var(--section-y) var(--pad-l);   /* the hero above ends in white */
  overflow-x: clip;
}
#how .v-mobile .hw-m { max-width: 520px; margin: 0 auto; }

/* ---- the kicker (the section's h2). RT-LOOP-M: a clean label in the page's eyebrow voice (sentence case, like
   "Questions" in the FAQ), no template hairlines; each beat carries its own step number, so the label can stay quiet
   and the three big beats read as the real headline. ---- */
#how .v-mobile .hw-m-kicker {
  text-align: center;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--accent-edge);
}

/* ---- the three beats ---- */
#how .v-mobile .hw-m-steps { margin-top: 14px; }
#how .v-mobile .hw-m-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Mira, standing on the app's little shadow line */
#how .v-mobile .hw-m-art {
  --aw: clamp(128px, 38vw, 164px);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--aw);
}
#how .v-mobile .hw-m-step-1 .hw-m-art { --aw: clamp(122px, 36vw, 156px); }
#how .v-mobile .hw-m-step-2 .hw-m-art { --aw: clamp(134px, 40vw, 170px); }
#how .v-mobile .hw-m-step-3 .hw-m-art { --aw: clamp(100px, 29vw, 126px); }
#how .v-mobile .hw-m-pose { display: block; width: 100%; transform-origin: 50% 100%; }
#how .v-mobile .hw-m-pose img { display: block; width: 100%; filter: var(--art-drop); }
#how .v-mobile .hw-m-shade {
  display: block;
  width: 58%;
  height: 12px;
  margin-top: 8px;
  border-radius: 50%;
  /* RT-LOOP-M (no lines, founder): a soft contact shadow, not a grey pill that reads as a rule */
  background: radial-gradient(closest-side, rgba(15, 26, 43, .16), rgba(15, 26, 43, .05) 60%, rgba(15, 26, 43, 0));
}
#how .v-mobile .hw-m-step-2 .hw-m-shade { width: 70%; margin-top: 6px; }

/* big type + one short line */
#how .v-mobile .hw-m-text { margin-top: 14px; }
#how .v-mobile .hw-m-big {
  font-size: var(--big);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -0.038em;
  color: var(--ink);
  white-space: nowrap;
}
#how .v-mobile .hw-m-p { color: var(--hw-dot, var(--accent)); }
/* the step number: the same coloured coin as desktop (.how-d-num: gold / leaf / accent, white numeral, pressed edge,
   soft glow, slight tilt), 32 px on phones, sitting on the title's cap line */
#how .v-mobile .hw-m-n {
  --n: var(--accent);
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; margin-right: 12px;
  vertical-align: .5em;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%), var(--n);
  box-shadow: inset 0 -2.5px 0 rgba(0,0,0,.16), 0 8px 18px -6px var(--n);
  font-size: 15px; line-height: 1; font-weight: 700; letter-spacing: 0; color: #fff;
  font-variant-numeric: tabular-nums;
  transform: rotate(-6deg);
}
#how .v-mobile .hw-m-step-1 .hw-m-n { --n: #F2A100; }
#how .v-mobile .hw-m-step-2 .hw-m-n { --n: var(--leaf); transform: rotate(4deg); }
#how .v-mobile .hw-m-step-3 .hw-m-n { --n: var(--accent); transform: rotate(-3deg); }
#how .v-mobile .hw-m-step-1 { --hw-dot: var(--gold); }
#how .v-mobile .hw-m-step-2 { --hw-dot: var(--leaf); }
#how .v-mobile .hw-m-step-3 { --hw-dot: var(--accent); }
#how .v-mobile .hw-m-line {
  max-width: 24ch;
  margin: 10px auto 0;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 350;
  color: var(--body);
  text-wrap: balance;
}

/* RT-LOOP-M: the dotted trail is gone (founder: no lines or dashes anywhere); space alone paces the three beats */
#how .v-mobile .hw-m-step + .hw-m-step { margin-top: 40px; }

/* ---- motion (reduced motion: everything simply there, still) ---- */
.js #how .v-mobile .hw-m-pose { opacity: 0; scale: .7; translate: 0 10px; transition: opacity .45s var(--ease) .15s, scale .8s var(--spring) .15s, translate .8s var(--spring) .15s; }
.js #how .v-mobile .hw-m-step.in .hw-m-pose { opacity: 1; scale: none; translate: none; }
/* after the pop, a gentle float (a different pace for each, so they never move in step) */
#how .v-mobile .hw-m-step.in .hw-m-pose img { animation: hw-m-float 5.6s var(--ease) 1.1s infinite alternate; }
#how .v-mobile .hw-m-step-2.in .hw-m-pose img { animation-duration: 6.4s; animation-delay: 1.5s; }
#how .v-mobile .hw-m-step-3.in .hw-m-pose img { animation-name: hw-m-write; animation-duration: 4.8s; animation-delay: 1.3s; animation-direction: normal; transform-origin: 50% 90%; }
@keyframes hw-m-float { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes hw-m-write { 0%, 62%, 100% { transform: rotate(0); } 68% { transform: rotate(-4deg); } 74% { transform: rotate(3deg); } 80% { transform: rotate(-2.5deg); } 86% { transform: rotate(1.5deg); } 92% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) {
  .js #how .v-mobile .hw-m-pose { opacity: 1; scale: none; translate: none; }
  #how .v-mobile .hw-m-step .hw-m-pose img { animation: none; }
}

/* ---- the smallest phones ---- */
@media (max-width: 359.98px) {
  #how .v-mobile { --big: clamp(34px, 11.4vw, 40px); }
  #how .v-mobile .hw-m-line { font-size: 16px; }
}

/* ---- tablets (768–1023): zig-zag rows, Mira beside the words ---- */
@media (min-width: 768px) {
  #how .v-mobile {
    --pad-l: max(32px, env(safe-area-inset-left));
    --pad-r: max(32px, env(safe-area-inset-right));
    --big: 58px;
    --col: 240px;                                 /* Mira's column */
  }
  #how .v-mobile .hw-m { max-width: 700px; }
  #how .v-mobile .hw-m-steps { margin-top: 36px; }
  #how .v-mobile .hw-m-step {
    display: grid;
    grid-template-columns: var(--col) minmax(0, 1fr);
    column-gap: 44px;
    align-items: center;
    text-align: left;
  }
  #how .v-mobile .hw-m-step-2 { grid-template-columns: minmax(0, 1fr) var(--col); }
  #how .v-mobile .hw-m-step-2 .hw-m-art { grid-column: 2; grid-row: 1; }
  #how .v-mobile .hw-m-step-2 .hw-m-text { grid-column: 1; grid-row: 1; padding-left: 36px; }
  #how .v-mobile .hw-m-art { justify-self: center; }
  #how .v-mobile .hw-m-step-1 .hw-m-art { --aw: 196px; }
  #how .v-mobile .hw-m-step-2 .hw-m-art { --aw: 214px; }
  #how .v-mobile .hw-m-step-3 .hw-m-art { --aw: 164px; }
  #how .v-mobile .hw-m-text { margin-top: 0; }
  #how .v-mobile .hw-m-n { width: 38px; height: 38px; font-size: 17px; margin-right: 16px; vertical-align: .62em; }
  #how .v-mobile .hw-m-line { margin: 12px 0 0; max-width: 22ch; font-size: 19px; text-wrap: pretty; }
  #how .v-mobile .hw-m-step + .hw-m-step { margin-top: 36px; }
}
@media (min-width: 900px) {
  #how .v-mobile { --big: 64px; --col: 260px; }
  #how .v-mobile .hw-m { max-width: 800px; }
  #how .v-mobile .hw-m-step-1 .hw-m-art { --aw: 212px; }
  #how .v-mobile .hw-m-step-2 .hw-m-art { --aw: 232px; }
  #how .v-mobile .hw-m-step-3 .hw-m-art { --aw: 176px; }
}


/* =====================================================================================================
   RT-LOOP-M · ONE TYPE SCALE (founder, 30 Sep: "in some places size is big, in some size is small").
   The section now opens like every other one: a 14 px label, then the 30 px h2 "Small enough for today." (as desktop).
   The three beats become calm rows sized for a phone: Mira on the left, a 22 px step title with its number coin and
   one 17 px line on the right. Tablets: 40 px h2, larger Mira, the same rows centred.
   ===================================================================================================== */
#how .v-mobile .hw-m-head { text-align: center; }
#how .v-mobile .hw-m-kicker { font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--accent-edge); }
#how .v-mobile .hw-m-title { margin: 8px auto 0; font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; }
#how .v-mobile .hw-m-steps { margin: 32px auto 0; max-width: 400px; }
#how .v-mobile .hw-m-step,
#how .v-mobile .hw-m-step-2 {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 18px;
  align-items: center;
  text-align: left;
}
#how .v-mobile .hw-m-step + .hw-m-step { margin-top: 26px; }
#how .v-mobile .hw-m-step .hw-m-art { grid-column: 1; grid-row: 1; justify-self: center; }
#how .v-mobile .hw-m-step .hw-m-text { grid-column: 2; grid-row: 1; margin: 0; padding: 0; }
#how .v-mobile .hw-m-step-1 .hw-m-art { --aw: 100px; }
#how .v-mobile .hw-m-step-2 .hw-m-art { --aw: 112px; }
#how .v-mobile .hw-m-step-3 .hw-m-art { --aw: 84px; }
#how .v-mobile .hw-m-big {
  display: flex; align-items: center; gap: 0;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; white-space: normal;
}
#how .v-mobile .hw-m-n { width: 26px; height: 26px; margin: 0 10px 0 0; font-size: 13px; vertical-align: 0; flex: none; }
#how .v-mobile .hw-m-line { max-width: none; margin: 6px 0 0; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
@media (max-width: 359.98px) {
  #how .v-mobile .hw-m-title { font-size: 28px; }
  #how .v-mobile .hw-m-step, #how .v-mobile .hw-m-step-2 { grid-template-columns: 92px minmax(0, 1fr); column-gap: 14px; }
  #how .v-mobile .hw-m-step-1 .hw-m-art { --aw: 84px; }
  #how .v-mobile .hw-m-step-2 .hw-m-art { --aw: 92px; }
  #how .v-mobile .hw-m-step-3 .hw-m-art { --aw: 70px; }
  #how .v-mobile .hw-m-line { font-size: 16px; }
}
@media (min-width: 768px) {
  #how .v-mobile .hw-m-title { font-size: 40px; }
  #how .v-mobile .hw-m-steps { margin-top: 44px; max-width: 580px; }
  #how .v-mobile .hw-m-step,
  #how .v-mobile .hw-m-step-2 { grid-template-columns: 180px minmax(0, 1fr); column-gap: 36px; }
  #how .v-mobile .hw-m-step + .hw-m-step { margin-top: 32px; }
  #how .v-mobile .hw-m-step-1 .hw-m-art { --aw: 160px; }
  #how .v-mobile .hw-m-step-2 .hw-m-art { --aw: 178px; }
  #how .v-mobile .hw-m-step-3 .hw-m-art { --aw: 132px; }
  #how .v-mobile .hw-m-n { width: 30px; height: 30px; font-size: 14px; margin: 0 12px 0 0; }
  #how .v-mobile .hw-m-line { font-size: 17px; max-width: 24em; text-wrap: balance; }
}

/* ---- RT-LOOP-M · cute pass (founder: "reduce the size little and make the entire site cute"): Mira ~15% smaller,
   the number coins give a small hop as each beat arrives (never with reduced motion) ---- */
#how .v-mobile .hw-m-step, #how .v-mobile .hw-m-step-2 { grid-template-columns: 96px minmax(0, 1fr); }
#how .v-mobile .hw-m-step-1 .hw-m-art { --aw: 86px; }
#how .v-mobile .hw-m-step-2 .hw-m-art { --aw: 96px; }
#how .v-mobile .hw-m-step-3 .hw-m-art { --aw: 72px; }
.js #how .v-mobile .hw-m-step.in .hw-m-n { animation: hw-m-hop .7s var(--spring) .45s both; }
@keyframes hw-m-hop { 0% { scale: .4; opacity: 0; } 60% { scale: 1.15; opacity: 1; } 100% { scale: 1; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js #how .v-mobile .hw-m-step.in .hw-m-n { animation: none; } }
@media (max-width: 359.98px) {
  #how .v-mobile .hw-m-step, #how .v-mobile .hw-m-step-2 { grid-template-columns: 80px minmax(0, 1fr); }
  #how .v-mobile .hw-m-step-1 .hw-m-art { --aw: 72px; }
  #how .v-mobile .hw-m-step-2 .hw-m-art { --aw: 80px; }
  #how .v-mobile .hw-m-step-3 .hw-m-art { --aw: 60px; }
}
@media (min-width: 768px) {
  #how .v-mobile .hw-m-step, #how .v-mobile .hw-m-step-2 { grid-template-columns: 156px minmax(0, 1fr); }
  #how .v-mobile .hw-m-step-1 .hw-m-art { --aw: 136px; }
  #how .v-mobile .hw-m-step-2 .hw-m-art { --aw: 152px; }
  #how .v-mobile .hw-m-step-3 .hw-m-art { --aw: 112px; }
}