/* 09-pro — MOBILE build (below 1024 px). Owner: PRO-M.
   Phones: the two plans stacked as full-width cards (Free: white, clear edge, raised; Pro: deep blue).
   Tablets (768 px+): the plans side by side, headers and lists lined up with subgrid.
   Lists: included = tick; partly = minus; not included = a small cross and struck-through grey text.
   Screen readers hear "Included / Partly / Not included".
   Depth per brief §12/§15 (a whisper): --edge + --highlight + --depth-2 on the two plan cards, a subtle --art-drop on the stars. */

/* spacing (brief §15): set centrally, section tokens only */
#pro .v-mobile { background: #fff; overflow-x: clip; }
#pro .v-mobile .pro-m { padding: var(--section-y) 0; }
#pro .v-mobile .wrap {
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* ---- heading ---- */
#pro .v-mobile .pro-m-head { max-width: 560px; margin: 0 auto 36px; text-align: center; }
#pro .v-mobile .pro-m-head .h2 { text-wrap: balance; }
@media (min-width: 768px) { #pro .v-mobile .pro-m-br { display: none; } }

/* ---- the two plans, raised on a soft blue light ---- */
#pro .v-mobile .pro-m-plans { position: relative; isolation: isolate; display: grid; gap: 22px; }
#pro .v-mobile .pro-m-plans::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -40%; right: -40%; top: -72px; height: 600px;
  background: radial-gradient(closest-side, var(--tint), transparent);
}
#pro .v-mobile .pro-m-plan { position: relative; border-radius: var(--r-card); padding: 24px 20px 26px; }
#pro .v-mobile .pro-m-free { background: #fff; border: 1px solid var(--edge); box-shadow: var(--highlight), var(--depth-2); }
#pro .v-mobile .pro-m-pro {
  background: var(--deep); color: #fff;
  border: 1px solid color-mix(in srgb, var(--deep-line) 22%, var(--deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), var(--depth-2);
}

/* card top: name and words on the left, the star on the right */
#pro .v-mobile .pro-m-top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
  grid-template-rows: auto 1fr auto; align-content: start;   /* a tall star grows row 2, so name and words stay together */
}
#pro .v-mobile .pro-m-name {
  grid-column: 1; grid-row: 1; margin: 0;
  font-size: 28px; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; color: var(--ink);
}
#pro .v-mobile .pro-m-pro .pro-m-name { color: #fff; }
#pro .v-mobile .pro-m-sub {
  grid-column: 1; grid-row: 2; margin-top: 8px;
  font-size: 16px; line-height: 1.5; color: var(--body); text-wrap: pretty;
}

/* the stars: standing in a soft light, with the app's drop shadow */
#pro .v-mobile .pro-m-art {
  position: relative; grid-column: 2; grid-row: 1 / span 2; align-self: start;
  width: clamp(72px, 22vw, 96px); margin: -4px -2px 0 0;
}
#pro .v-mobile .pro-m-art::before {
  content: ""; position: absolute; z-index: 0; inset: -34% -40% -26%; pointer-events: none;
  background: radial-gradient(closest-side, var(--tint), transparent);
}
#pro .v-mobile .pro-m-pro .pro-m-art::before { background: radial-gradient(closest-side, rgba(255, 255, 255, .17), transparent); }
#pro .v-mobile .pro-m-art img { position: relative; z-index: 1; width: 100%; filter: var(--art-drop); }
#pro .v-mobile .pro-m-art .art-shadow { position: relative; z-index: 1; width: 48%; height: 6px; margin-top: 8px; background: var(--edge); }

/* Pro: the price and a calm trial label */
#pro .v-mobile .pro-m-price { grid-column: 1; grid-row: 2; margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--deep-body); }
#pro .v-mobile .pro-m-amt { display: block; font-size: clamp(20px, 5.8vw, 23px); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; color: #fff; }
#pro .v-mobile .pro-m-or { display: block; margin-top: 2px; }
#pro .v-mobile .pro-m-trial {
  grid-column: 1 / -1; grid-row: 3; justify-self: start; align-self: start;
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  min-height: 36px; padding: 6px 15px 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deep-line) 78%, transparent);
  font-size: 14.5px; line-height: 1.3; font-weight: 500; color: #fff;
}
#pro .v-mobile .pro-m-trial svg { flex: none; width: 14px; height: 14px; fill: var(--sun); }
#pro .v-mobile .pro-m-pro .pro-m-art { width: clamp(80px, 24vw, 104px); margin-top: -8px; margin-right: -6px; }

/* the lists, under a visible divider */
#pro .v-mobile .pro-m-list { margin-top: 24px; gap: 12px; align-content: start; }   /* no divider line (founder) */

#pro .v-mobile .pro-m-list li { padding-left: 32px; font-size: 16px; line-height: 1.5; text-wrap: pretty; }
#pro .v-mobile .pro-m-list li::before { top: 1px; }
/* partly: a grey minus */
#pro .v-mobile .pro-m-list .pm-part::before {
  background: var(--secondary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* not included: a small grey cross and struck-through grey text (still 6:1, readable) */
#pro .v-mobile .pro-m-list .pm-no {
  color: var(--secondary);
  text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--secondary) 55%, transparent);
}
#pro .v-mobile .pro-m-list .pm-no::before {
  background: var(--secondary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.8 7.8l8.4 8.4M16.2 7.8l-8.4 8.4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.8 7.8l8.4 8.4M16.2 7.8l-8.4 8.4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* fine print */
#pro .v-mobile .pro-m-fine { max-width: 34em; margin: 28px auto 0; text-align: center; text-wrap: pretty; }

/* ---- motion: the Free star floats (.bob), the Pro star gives a little cheer now and then ---- */
#pro .v-mobile .pro-m-cheer { transform-origin: 50% 90%; animation: pro-m-cheer 5s var(--ease) infinite; }
@keyframes pro-m-cheer {
  0%, 64%, 100% { transform: none; }
  70% { transform: translateY(-7px) rotate(-5deg); }
  76% { transform: none; }
  82% { transform: translateY(-5px) rotate(4deg); }
  88% { transform: none; }
}

/* ---- small phones ---- */
@media (max-width: 359.98px) {
  #pro .v-mobile .pro-m-plan { padding: 22px 18px 24px; }
  #pro .v-mobile .pro-m-name { font-size: 26px; }
  #pro .v-mobile .pro-m-list li { font-size: 15.5px; }
}

/* ---- tablets: side by side ---- */
@media (min-width: 768px) {
  #pro .v-mobile .pro-m-head { max-width: 760px; margin-bottom: 40px; }
  #pro .v-mobile .pro-m-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto;
    column-gap: 24px; row-gap: 0; max-width: 880px; margin: 0 auto;
  }
  #pro .v-mobile .pro-m-plans::before { left: -12%; right: -12%; top: -80px; height: calc(100% + 160px); }
  #pro .v-mobile .pro-m-plan { display: grid; grid-row: span 2; grid-template-rows: subgrid; padding: 30px 28px 32px; }
  #pro .v-mobile .pro-m-art { width: 124px; margin-top: -6px; }   /* a bigger star keeps the two headers the same height */
  #pro .v-mobile .pro-m-pro .pro-m-art { width: 118px; }
  #pro .v-mobile .pro-m-fine { margin-top: 32px; }
}

/* V3 type scale (founder 30 Sep): section title 30 on phones, 28 under 360, 40 on tablets */
#pro .v-mobile .h2 { font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; }
@media (max-width: 359.98px) { #pro .v-mobile .h2 { font-size: 28px; } }
@media (min-width: 768px) { #pro .v-mobile .h2 { font-size: 40px; } }