/* ============================================================
   mobile-page.css — /mobile-app/, the desktop page about
   MathematiX Mobile.

   Deliberately almost empty. The page is assembled from three
   sheets that already exist:

     styles.css            chrome, .mobile-layout, .mpoint,
                           .callout, .faq, .cta
     lemma-ai.css          the section furniture the /ai-assistant/
                           deep dive uses — .lm-head, .lm-grid,
                           .lm-dials, .lm-pipe, .lm-flow
     mobile-showcase.css   the device, the app inside it, and the
                           scripted story

   What is left is the joints between them. If you reach for this
   file to add a component, check those three first — matching the
   rest of the site matters more here than anything new.
   ============================================================ */

/* ------------------------------------------------------------
   HERO / STORY TRANSITION
   Moving the story section up to cover the space left by
   the removed capture stats rail.
   ------------------------------------------------------------ */
.lm-hero {
  padding-bottom: 40px;
}
#story.msc-section {
  padding-top: 52px;
}

/* The second line owns a fixed word slot so typing never nudges the hero.
   The gradient shifts by exactly one repeated tile per cycle: its first and
   last colours match, so the stronger colour movement still has no seam. */
.mobile-hero-title > span {
  display: block;
}
.mobile-hero-title__line {
  display: inline-flex !important;
  justify-content: center;
  align-items: baseline;
  min-height: 1.04em;
  white-space: nowrap;
  color: #0f5539;
  font-style: italic;
  font-weight: 500;
  background-image: linear-gradient(
    90deg,
    #0d4f36 0%,
    #2d9a70 12.5%,
    #1f78a0 25%,
    #4d7f39 37.5%,
    #0d4f36 50%,
    #2d9a70 62.5%,
    #1f78a0 75%,
    #4d7f39 87.5%,
    #0d4f36 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  animation: mobile-hero-gradient-flow 5.6s linear infinite;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mobile-hero-title__line {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.mobile-hero-title__word-slot {
  display: inline-flex;
  align-items: baseline;
  width: 10.1ch;
  text-align: left;
}
.mobile-hero-title__line [data-mobile-hero-word] {
  display: inline-block;
}
.mobile-hero-title__caret {
  display: inline-block;
  flex: none;
  width: 2px;
  height: .78em;
  margin-left: .06em;
  border-radius: 999px;
  background: #176b49;
  transform: translateY(.06em);
  animation: mobile-hero-caret 760ms steps(1, end) infinite;
}
@keyframes mobile-hero-caret {
  50% { opacity: 0; }
}
@keyframes mobile-hero-gradient-flow {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

/* The app composer is the hero's primary action here too. It opens Lemma
   directly, while the capture-story button remains the secondary action. */
.mobile-hero-actions {
  width: min(100%, 500px);
  margin-right: auto;
  margin-left: auto;
  flex-direction: column;
  align-items: center;
}
.mobile-lemma-entry {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  padding: 12px 13px 11px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper-3);
  box-shadow: 0 18px 40px -20px rgba(16,40,28,.44), 0 3px 10px rgba(16,40,28,.06);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.mobile-lemma-entry:hover {
  border-color: var(--mint-line);
  box-shadow: 0 22px 46px -20px rgba(16,70,43,.48), 0 4px 12px rgba(16,40,28,.08);
  transform: translateY(-2px);
}
.mobile-lemma-entry:active { transform: scale(.99); }
.mobile-lemma-entry:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--green) 28%, transparent);
  outline-offset: 3px;
}
.mobile-lemma-entry__input {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 26px;
  padding: 2px 4px 1px;
}
.mobile-lemma-entry__placeholder {
  color: var(--ink-soft);
  font-size: .98rem;
  font-weight: 500;
  letter-spacing: -.01em;
}
.mobile-lemma-entry__caret {
  width: 2px;
  height: 16px;
  margin-left: 2px;
  border-radius: 1px;
  background: var(--green);
  animation: mobile-lemma-caret 1.1s ease-in-out infinite;
}
@keyframes mobile-lemma-caret {
  50% { opacity: 0; }
}
.mobile-lemma-entry__row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.mobile-lemma-entry__button,
.mobile-lemma-entry__go {
  flex: none;
  display: grid;
  place-items: center;
}
.mobile-lemma-entry__button {
  width: 31px;
  height: 31px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--paper-2);
  color: var(--ink-soft);
}
.mobile-lemma-entry__button svg { width: 16px; height: 16px; }
.mobile-lemma-entry__pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  height: 31px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 12.5px;
}
.mobile-lemma-entry__pill--mode {
  border: 1px solid var(--line);
  background: var(--paper-3);
  color: var(--ink-soft);
  font-weight: 500;
}
.mobile-lemma-entry__pill--mode svg,
.mobile-lemma-entry__chevron { width: 12px; height: 12px; opacity: .7; }
.mobile-lemma-entry__pill--intent {
  padding-left: 7px;
  border: 1px solid var(--mint-line);
  background: var(--mint);
  color: var(--green-700);
  font-weight: 600;
}
.mobile-lemma-entry__note-icon { width: 13px; height: 13px; }
.mobile-lemma-entry__spacer { flex: 1; min-width: 0; }
.mobile-lemma-entry__go {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(105deg, #287e68 0%, #319b7c 30%, #347f91 55%, #319b7c 78%, #287e68 100%);
  box-shadow: 0 14px 30px -12px rgba(28,124,84,.55), 0 2px 8px rgba(28,124,84,.22);
  color: #fff;
}
.mobile-lemma-entry__go svg { width: 16px; height: 16px; }
.mobile-watch-cta { min-width: 220px; }

/* The shared CTA gradient normally eases back and forth. On this motion-heavy
   page that turn is visible as a restart, so move one complete repeating tile
   at a constant speed instead. The first and last gradient colours match,
   making the 200% -> 0% seam visually identical. */
.mobile-landing .btn--access,
.mobile-landing .btn--access:hover,
.mobile-landing .btn--access:focus-visible {
  background-size: 200% 100%;
  animation: mobile-access-color-flow 9s linear infinite;
}
@keyframes mobile-access-color-flow {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

/* ------------------------------------------------------------
   THE STILL DEVICE

   The reader section reuses the storyboard phone's markup with
   [data-msc] left off, so mobile-showcase.js never finds it: one
   screen, no script, and the only motion is the float and glare
   that mobile-showcase.css already gives every .msc-phone.

   It is smaller than the one running the story on purpose — two
   identically sized phones on one page read as a duplicated
   asset rather than two views of the same app.
   ------------------------------------------------------------ */
.mxp-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.mxp-stage .msc-device { --s: .66; }

/* Out of phase with the storyboard phone, so a screenshot taken
   anywhere on the page never catches the two rising together. */
.mxp-stage .msc-phone { animation-delay: -3.4s; }
.mxp-stage .msc-phone__glare { animation-delay: -5.2s; }

/* .mobile-layout in styles.css is the 0.85 / 1.15 pair this
   section wants; it only needs its two halves centred on each
   other rather than stretched. */
.mxp-pair { align-items: center; }

/* ------------------------------------------------------------
   THREE-UP FLOW
   .lm-flow is four across, because the AI page walks through a
   day. Getting the app is three steps, and a fourth empty column
   reads as a step someone forgot to write.
   ------------------------------------------------------------ */
.lm-flow--three { grid-template-columns: repeat(3, 1fr); }

/* ------------------------------------------------------------
   RESPONSIVE
   .mxp-stage .msc-device outranks mobile-showcase.css's own
   scale steps on specificity, so this sheet owns the still
   phone's size at every width and has to restate all of them.
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  /* .mobile-layout has collapsed to one column by here, so the
     phone has the full width and can afford to grow */
  .mxp-stage .msc-device { --s: .74; }
  /* lemma-ai.css takes .lm-flow to two columns at this width,
     which would strand the third step on a row of its own */
  .lm-flow--three { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
  .lm-hero { padding-bottom: 28px; }
  #story.msc-section { padding-top: 40px; }
  .lm-flow--three { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* one column and the phone is the section, so it should not shrink
     with the viewport any faster than the story phone does */
  .mxp-stage .msc-device { --s: .70; }
}
@media (max-width: 360px) {
  /* .wrap keeps 28px of padding either side; .60 is the largest scale
     that still clears it on a 320px screen. Same step mobile-showcase.css
     takes for the storyboard phone, so the two stay in proportion. */
  .mxp-stage .msc-device { --s: .60; }
}

/* ============================================================
   MOBILE LANDING — DESKTOP PRODUCT CHAPTERS, RECOMPOSED
   The page now follows the product story requested for the mobile
   landing page, with denser touch-first layouts at narrow widths.
   ============================================================ */
.mobile-section-head {
  max-width: 780px;
  margin: 0 auto clamp(30px, 5vw, 46px);
  text-align: center;
}
.mobile-section-head .section-title,
.mobile-formats .feature-head .section-title,
.mobile-lemma .lm-head .section-title {
  margin-top: 16px;
}
.mobile-section-head .section-lead {
  margin-top: 15px;
}

/* Three product stories use the shipped demo recordings on this page.
   They preserve the rich desktop cards without asking a phone to run
   three miniature application timelines at once. */
.mobile-home-steps {
  background:
    radial-gradient(720px 360px at 12% 4%, rgba(28,124,84,.055), transparent 68%),
    var(--paper);
  border-top: 1px solid var(--line-soft);
}
.mobile-steps {
  margin-top: 0;
}
.mobile-step__shot {
  isolation: isolate;
  background-color: var(--paper-3);
}
.mobile-step__shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 66%, rgba(10,31,21,.2));
}
.mobile-step__shot video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.mobile-step__status {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 28px);
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.64);
  border-radius: 999px;
  background: rgba(250,253,249,.9);
  color: var(--green-800);
  box-shadow: 0 8px 24px rgba(13,43,27,.14);
  backdrop-filter: blur(9px);
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mobile-step__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(28,124,84,.12);
  flex: none;
}

/* Lemma keeps the full benchmark, while spacing and card depth are
   tuned for the slower, one-column read on a phone. */
.mobile-lemma .lm-head {
  max-width: 790px;
}
.mobile-lemma .lm-card {
  box-shadow: 0 18px 48px -42px rgba(17,61,37,.5);
}
.mobile-lemma .lm-shot {
  margin-top: 18px;
}
.mobile-lemma__correction {
  margin-top: 12px;
}
.mobile-lemma .lm-quiz {
  margin-top: 18px;
}
.mobile-lemma .lm-bench {
  box-shadow: 0 24px 68px -54px rgba(17,61,37,.56);
}

/* Formats become dense, editorial rows at phone sizes: all nine are
   still visible, but they do not read like nine oversized panels. */
.mobile-formats {
  background:
    linear-gradient(180deg, rgba(255,255,255,.23), transparent 22%),
    var(--paper);
}
.mobile-formats .feature-head {
  margin: 0 0 28px;
}
.mobile-formats .feature-head > div {
  max-width: 670px;
}
.mobile-formats .feature-head .section-lead {
  margin-top: 14px;
  max-width: 58ch;
}
.mobile-format-grid .tile {
  box-shadow: 0 14px 38px -38px rgba(17,61,37,.5);
}

/* Plans close the page with a gentle tint and a clearly signposted
   free card before the paid tiers. */
.mobile-plans {
  background:
    radial-gradient(780px 420px at 50% 0, rgba(28,124,84,.075), transparent 68%),
    linear-gradient(180deg, var(--paper-2), var(--paper));
  border-top: 1px solid var(--line);
}
.mobile-plans .plan-grid {
  margin-top: 0;
}
.mobile-plans .plan {
  min-height: 100%;
  box-shadow: 0 18px 48px -44px rgba(17,61,37,.58);
}
.mobile-plans .plan--beta {
  position: relative;
  border-color: var(--green-300);
  box-shadow: 0 22px 58px -45px rgba(20,101,63,.7);
}
.mobile-plans .mobile-beta-flag {
  background: var(--mint);
  color: var(--green-800);
  border: 1px solid var(--mint-line);
}
.mobile-plans__more {
  margin-top: 32px;
}

@media (max-width: 860px) {
  .mobile-formats .feature-head__btn {
    align-self: flex-start;
  }
  .mobile-formats .mobile-format-grid {
    gap: 14px;
  }
  .mobile-formats .tile {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 15px;
    row-gap: 5px;
    padding: 19px;
  }
  .mobile-formats .tile__icon {
    grid-column: 1;
    grid-row: 1 / 3;
    margin: 0;
  }
  .mobile-formats .tile h3,
  .mobile-formats .tile p {
    grid-column: 2;
  }
  .mobile-formats .tile h3 {
    margin: 1px 0 0;
  }
}

@media (max-width: 700px) {
  .mobile-section-head {
    margin-bottom: 28px;
  }
  .mobile-step__shot {
    aspect-ratio: 1.43 / 1;
  }
  .mobile-lemma .lm-card,
  .mobile-formats .tile,
  .mobile-plans .plan {
    border-radius: 18px;
  }
  .mobile-lemma .lm-bench__head {
    gap: 18px;
  }
  .mobile-lemma .lm-legend {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .mobile-plans .plan-grid {
    gap: 18px;
  }
}

@media (max-width: 560px) {
  .mobile-home-steps,
  .mobile-lemma,
  .mobile-formats,
  .mobile-plans {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .mobile-section-head .section-title,
  .mobile-formats .feature-head .section-title,
  .mobile-lemma .lm-head .section-title {
    margin-top: 12px;
  }
  .mobile-steps {
    gap: 16px;
  }
  .mobile-steps .step {
    padding: 22px 20px 0;
    border-radius: 18px;
  }
  .mobile-steps .step h3 {
    margin-top: 12px;
    font-size: 1.25rem;
  }
  .mobile-steps .step p {
    margin-bottom: 18px;
    font-size: .92rem;
  }
  .mobile-steps .mobile-step__shot {
    margin-right: -20px;
    margin-left: -20px;
  }
  .mobile-step__status {
    left: 11px;
    bottom: 11px;
    max-width: calc(100% - 22px);
    padding: 6px 9px;
    font-size: 8px;
  }
  .mobile-lemma .lm-head {
    margin-bottom: 30px;
  }
  .mobile-lemma .lm-grid {
    gap: 14px;
  }
  .mobile-lemma .lm-card {
    padding: 21px 18px;
  }
  .mobile-lemma .lm-bench {
    margin-top: 18px;
  }
  .mobile-lemma .lm-bench__head h3 {
    font-size: 1.18rem;
  }
  .mobile-lemma .lm-row {
    gap: 9px;
  }
  .mobile-lemma .lm-rows {
    gap: 18px;
  }
  .mobile-lemma .lm-row__label span:not(.lm-delta) {
    font-size: .74rem;
  }
  .mobile-lemma .lm-bar {
    grid-template-columns: 1fr 46px;
    gap: 8px;
  }
  .mobile-lemma .lm-bar__val {
    font-size: .72rem;
  }
  .mobile-formats .feature-head {
    gap: 20px;
  }
  .mobile-formats .feature-head__btn {
    width: 100%;
  }
  .mobile-formats .mobile-format-grid {
    gap: 10px;
  }
  .mobile-formats .tile {
    padding: 17px 16px;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 13px;
  }
  .mobile-formats .tile__icon {
    width: 40px;
    height: 40px;
  }
  .mobile-formats .tile h3 {
    font-size: 1.05rem;
  }
  .mobile-formats .tile p {
    font-size: .84rem;
    line-height: 1.48;
  }
  .mobile-plans .bill-toggle {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    width: 100%;
  }
  .mobile-plans .bill-toggle__opt {
    justify-content: center;
    min-width: 0;
    padding: 10px 9px;
    font-size: .84rem;
  }
  .mobile-plans .bill-toggle__save {
    padding-inline: 6px;
    font-size: 8px;
  }
  .mobile-plans .plan {
    padding: 24px 21px;
  }
}

@media (max-width: 370px) {
  .mobile-plans .bill-toggle__save {
    display: none;
  }
}

/* Small Android widths leave less room than the iPhone reference for the
   persistent entry CTA. Keep all three header controls visible and tappable
   instead of allowing the menu button to drift beyond the viewport. */
@media (max-width: 380px) {
  .mobile-landing .nav__inner {
    gap: 8px;
  }
  .mobile-landing .nav .brand {
    font-size: 1.08rem;
  }
  .mobile-landing .nav__right {
    margin-left: auto;
  }
  .mobile-landing .nav .btn--access {
    min-height: 44px;
    padding: 11px 13px;
    border-radius: 10px;
    font-size: .8rem;
  }
  .mobile-landing .nav__toggle {
    width: 42px;
    min-width: 42px;
    height: 42px;
  }
}

@media (max-width: 340px) {
  .mobile-landing .nav__inner {
    gap: 6px;
  }
  .mobile-landing .nav .brand {
    font-size: 1rem;
  }
  .mobile-landing .nav .btn--access {
    padding-inline: 10px;
    font-size: .76rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-hero-title__line {
    animation: none;
    color: #0f5539;
    -webkit-text-fill-color: #0f5539;
    background: none;
  }
  .mobile-hero-title__caret {
    display: none;
  }
  .mobile-landing .btn--access {
    animation: none;
  }
  .mobile-lemma-entry__caret {
    animation: none;
  }
  .mobile-step__shot video {
    display: none;
  }
  .mobile-steps .step:nth-child(1) .mobile-step__shot {
    background: url("/assets/img/steps/capture-poster.png") center / cover no-repeat;
  }
  .mobile-steps .step:nth-child(2) .mobile-step__shot {
    background: url("/assets/img/steps/canvas-poster.png") center / cover no-repeat;
  }
  .mobile-steps .step:nth-child(3) .mobile-step__shot {
    background: url("/assets/img/steps/ask-poster.png") center / cover no-repeat;
  }
}