/* ============================================================
   mobile-home.css — the phone-first marketing home (/mobile/).

   Phone visitors are routed here by device-gate.js, so this page
   is designed for a ~360px viewport first and only widens into
   two columns on a desktop that opens it on purpose (?mobile=1).

   It borrows two vocabularies on purpose:
     · the desktop marketing home (paper + graph grid, Spectral
       display type, emerald eyebrows, generous section rhythm)
     · the mobile app itself (mobile/app/mobile.css) — the flow
       gradient on primary actions, the ask dock, composer chips,
       message bubbles. The page should feel like the product it
       is selling.

   The centrepiece is #the phone demo: a scripted, looping story
   (camera → attach → ask → Lemma works → note saved) driven by
   assets/js/mobile-home.js. Everything here is presentation; the
   script only toggles classes and injects thread nodes.
   ============================================================ */

:root {
  /* the gradient every primary action in the app uses */
  --flow: linear-gradient(105deg,#287e68 0%,#319b7c 30%,#347f91 55%,#319b7c 78%,#287e68 100%);
  --flow-shadow: 0 14px 30px -12px rgba(28,124,84,.55), 0 2px 8px rgba(28,124,84,.22);
  --mh-ease: cubic-bezier(.22,.8,.24,1);
}

@keyframes mhAuraDrift {
  0%, 100% { transform: translate3d(-3%, -1%, 0) rotate(-2deg) scale(1); }
  50% { transform: translate3d(4%, 3%, 0) rotate(2deg) scale(1.1); }
}
@keyframes mhAuraCounter {
  0%, 100% { transform: translate3d(3%, 2%, 0) scale(1.06); }
  50% { transform: translate3d(-4%, -3%, 0) scale(.98); }
}
@keyframes mhGlowBreathe {
  0%, 100% { opacity: .48; }
  50% { opacity: .78; }
}
@keyframes mhSoftFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}
@keyframes mhEyebrowPulse {
  0%, 100% { opacity: 1; transform: scaleX(1); }
  50% { opacity: .58; transform: scaleX(.72); }
}

/* On this page reveals fade without moving the layout. The shared rise-in
   treatment made the mobile first paint feel like every section bumped into
   place after JavaScript loaded. */
.mh .reveal {
  transform: none;
  transition: opacity .42s var(--mh-ease);
}
.mh .reveal[data-d="1"] { transition-delay: .04s; }
.mh .reveal[data-d="2"] { transition-delay: .08s; }
.mh .reveal[data-d="3"] { transition-delay: .12s; }
.mh .eyebrow { text-shadow: 0 0 18px rgba(28,124,84,.14); }
.mh .eyebrow::before {
  transform-origin: left center;
  animation: mhEyebrowPulse 4.2s ease-in-out infinite;
}

/* ============================================================
   NAV — keep a real call to action next to the hamburger
   ============================================================ */
.nav__app {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 15px;
  border-radius: 12px;
  background: var(--flow);
  color: #fff; font-size: .92rem; font-weight: 600;
  letter-spacing: -.01em;
  box-shadow: var(--flow-shadow);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.nav__app svg { width: 15px; height: 15px; }
.nav__app:active { transform: scale(.97); }

/* The shared nav is a sticky bar with a 14px backdrop-filter behind it.
   A backdrop blur has to re-sample and re-blur everything underneath it
   whenever that changes — which, while the page is being scrolled, is
   every single frame across the full width of the screen. It is the most
   expensive thing on this page and the one the finger feels. Phones get
   an opaque bar instead; the desktop site keeps the glass. */
.nav {
  background: rgba(246,244,236,.94);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav.is-stuck { background: var(--paper); }
@media (max-width: 420px) {
  .nav__inner { gap: 10px; }
  .nav__app { height: 38px; padding: 0 13px; font-size: .88rem; white-space: nowrap; }
  .nav__app span { display: none; }
  .nav__app::after { content: "Open app"; }
}
@media (max-width: 350px) {
  .nav__inner { gap: 8px; }
  .nav__app { padding-inline: 11px; gap: 5px; }
  .nav__app::after { content: "Open"; }
  .mh .mh-ask-card { padding: 9px 10px 8px; gap: 5px; }
  .mh .mh-ask-card__placeholder { font-size: .88rem; }
  .mh .mh-ask-card__row { gap: 4px; }
  .mh .mh-ask-card__pill { height: 28px; padding: 0 7px; font-size: 11px; }
  .mh .mh-ask-card__btn { width: 28px; height: 28px; }
  .mh .mh-ask-card__go { width: 30px; height: 30px; border-radius: 8px; }
  .mh .mh-ask { gap: 8px; padding: 11px 10px 11px 13px; }
  .mh .mh-ask__tx { font-size: .88rem; white-space: nowrap; }
  .mh .mh-cta-note { gap: 5px; font-size: 9px; letter-spacing: .04em; white-space: nowrap; }
}

/* ============================================================
   HERO
   ============================================================ */
.mh-hero { padding: 22px 0 4px; position: relative; overflow: hidden; }
.mh-hero::before {
  content: ""; position: absolute; inset: -10% -30% 40%;
  background:
    radial-gradient(42% 40% at 22% 26%, rgba(28,124,84,.20), transparent 70%),
    radial-gradient(38% 34% at 82% 12%, rgba(47,110,158,.16), transparent 72%),
    radial-gradient(26% 24% at 58% 8%, rgba(185,137,47,.09), transparent 74%);
  pointer-events: none; z-index: 0;
  transform-origin: 50% 35%;
  animation: mhAuraDrift 18s ease-in-out infinite;
}
.mh-hero > .wrap { position: relative; z-index: 1; }

.mh-hero__copy { max-width: 620px; }
.mh-title { margin-top: 14px; }
.mh-title .hero-title__lead {
  font-size: clamp(2.5rem, 11.4vw, 3.2rem);
  line-height: .98;
  letter-spacing: -.045em;
}
.mh-title .mh-title__phrase {
  font-size: clamp(2.28rem, 10.4vw, 3rem);
  line-height: 1.04;
  font-weight: 400;
  color: var(--green-700);
  background: linear-gradient(102deg, var(--green-800), #2f7680 58%, var(--green-700));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mh-title .mh-title__phrase::after {
  height: .8em;
  margin-left: 4px;
  vertical-align: -.02em;
}
@keyframes mhCaret { 50% { opacity: 0; } }

.mh-lead { margin-top: 16px; font-size: 1.03rem; line-height: 1.55; color: var(--ink-soft); max-width: 35ch; }
@media (min-width: 620px) { .mh-lead { max-width: 46ch; } }

/* the app's ask dock / composer card, used as the hero's primary action */
.mh-ask-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  margin-top: 22px;
  padding: 12px 13px 11px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 40px -20px rgba(16,40,28,.44), 0 3px 10px rgba(16,40,28,.06);
  text-align: left;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mh-ask-card:active {
  transform: scale(.99);
  border-color: var(--mint-line);
  transition-duration: 0.2s;
}

.mh-ask-card__input {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px 1px;
  min-height: 26px;
}
.mh-ask-card__placeholder {
  font-size: .98rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -.01em;
}
.mh-ask-card__caret {
  display: inline-block;
  width: 2px;
  height: 16px;
  background: var(--green);
  border-radius: 1px;
  margin-left: 2px;
  animation: mhCaretBlink 1.1s ease-in-out infinite;
}
@keyframes mhCaretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.mh-ask-card__row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.mh-ask-card__btn {
  width: 31px;
  height: 31px;
  flex: none;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.mh-ask-card__btn svg { width: 16px; height: 16px; }

.mh-ask-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  height: 31px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 12.5px;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.mh-ask-card__pill--mode {
  border: 1px solid var(--line);
  background: var(--paper-3);
  color: var(--ink-soft);
  font-weight: 500;
}
.mh-ask-card__pill--mode svg { width: 12px; height: 12px; opacity: .7; }
.mh-ask-card__pill--intent {
  border: 1px solid var(--mint-line);
  background: var(--mint);
  color: var(--green-700);
  font-weight: 600;
  padding-left: 7px;
}
.mh-ask-card__pill-ic { width: 13px; height: 13px; flex: none; color: var(--green-700); }
.mh-ask-card__pill-chev { width: 12px; height: 12px; flex: none; opacity: .7; }

.mh-ask-card__spacer { flex: 1; min-width: 0; }

.mh-ask-card__go {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--flow);
  color: #fff;
  box-shadow: var(--flow-shadow);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mh-ask-card__go svg { width: 16px; height: 16px; }

.mh-ask {
  display: flex; align-items: center; gap: 11px;
  width: 100%; margin-top: 22px;
  padding: 12px 12px 12px 16px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: 0 20px 44px -28px rgba(16,40,28,.48), 0 2px 8px rgba(16,40,28,.06);
  text-align: left;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mh-ask:active { transform: scale(.99); border-color: var(--mint-line); transition-duration: 0.2s; }
.mh-ask__spark { flex: none; color: var(--green); font-size: 1rem; line-height: 1; animation: mhSpark 3.2s var(--ease) infinite; }
@keyframes mhSpark { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.86); } }
.mh-ask__tx { flex: 1; min-width: 0; color: var(--ink); font-size: .96rem; font-weight: 600; letter-spacing: -.01em; }
.mh-ask__go {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--flow); color: #fff;
  box-shadow: var(--flow-shadow);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mh-ask__go svg { width: 17px; height: 17px; }

.mh-cta-note {
  margin-top: 11px; font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.mh-cta-note i { width: 5px; height: 5px; border-radius: 50%; background: var(--green-300); display: block; }

.mh-hero__more { margin-top: 2px; }
.mh-benefits {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.mh-benefits li {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: .74rem; line-height: 1.32; color: var(--ink-soft); font-weight: 600;
  min-height: 52px;
  padding: 9px 8px;
  border: 1px solid rgba(28,124,84,.10);
  border-radius: 12px;
  background:
    radial-gradient(circle at 18% 10%, rgba(63,167,118,.13), transparent 46%),
    rgba(255,255,255,.46);
  box-shadow: 0 10px 24px -22px rgba(16,40,28,.52);
}
.mh-benefits li:nth-child(2) { background: radial-gradient(circle at 18% 10%, rgba(47,110,158,.13), transparent 46%), rgba(255,255,255,.46); }
.mh-benefits li:nth-child(3) { background: radial-gradient(circle at 18% 10%, rgba(185,137,47,.12), transparent 46%), rgba(255,255,255,.46); }
.mh-benefits svg { width: 13px; height: 13px; margin-top: 1px; color: var(--green); flex: none; filter: drop-shadow(0 0 5px rgba(28,124,84,.28)); }
.mh-benefits li { animation: mhSoftFloat 5.4s var(--mh-ease) infinite alternate; }
.mh-benefits li:nth-child(2) { animation-delay: -.9s; }
.mh-benefits li:nth-child(3) { animation-delay: -1.8s; }

.mh-strip {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.mh-strip span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.mh-strip ul { display: flex; gap: 8px; flex-wrap: wrap; }
.mh-strip li {
  font-family: var(--font-serif); font-size: .98rem; color: var(--ink-soft);
  background: var(--paper-2); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 5px 13px;
}

/* ============================================================
   THE PHONE DEMO
   ============================================================ */
.mh-demo { margin: 28px auto 0; width: 100%; max-width: 420px; }

.pd {
  position: relative;
  width: min(276px, 76vw, 44vh);
  margin: 0 auto;
  --pr: 50px;              /* frame corner radius */
  isolation: isolate;
}
.pd::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7% -24% 5%;
  border-radius: 48%;
  background:
    radial-gradient(circle at 30% 26%, rgba(63,167,118,.45), transparent 46%),
    radial-gradient(circle at 74% 68%, rgba(47,110,158,.32), transparent 50%),
    radial-gradient(circle at 54% 42%, rgba(185,137,47,.14), transparent 55%);
  filter: blur(26px);
  animation: mhGlowBreathe 6.5s ease-in-out infinite;
}
.pd::after {   /* grounding shadow */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -14px; height: 26px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(16,40,28,.30), transparent 72%);
  filter: blur(7px); z-index: -1;
}
.pd__frame {
  position: relative; border-radius: var(--pr); padding: 10px;
  background: linear-gradient(152deg, #43443f 0%, #1b1c19 44%, #0b0c0a 100%);
  box-shadow:
    0 44px 80px -30px rgba(12,20,16,.55),
    0 12px 28px -16px rgba(12,20,16,.42),
    inset 0 0 1px 2px rgba(255,255,255,.12),
    inset 0 0 0 5px #000;
}
.pd__frame::after {
  content: "";
  position: absolute;
  z-index: 50;
  inset: 1px;
  border-radius: calc(var(--pr) - 1px);
  border: 1px solid rgba(126,224,176,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 28px rgba(63,167,118,.08);
  pointer-events: none;
}
.pd__btn { position: absolute; background: linear-gradient(#2a2b27,#101110); border-radius: 3px; z-index: 2; }
.pd__btn--silent { left: -3px; top: 96px; width: 3px; height: 24px; }
.pd__btn--up     { left: -3px; top: 134px; width: 3px; height: 46px; }
.pd__btn--down   { left: -3px; top: 190px; width: 3px; height: 46px; }
.pd__btn--power  { right: -3px; top: 150px; width: 3px; height: 68px; }

.pd__screen {
  position: relative; overflow: hidden;
  border-radius: calc(var(--pr) - 9px);
  background: var(--paper);
  aspect-ratio: 9 / 18.9;
  display: flex; flex-direction: column;
  isolation: isolate;
}
.pd__island {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 24px; background: #000; border-radius: 14px; z-index: 40;
}
.pd__island::after {
  content: ""; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: #08130d;
  box-shadow: inset 0 0 3px #1d3b2a;
}

/* ---------- status bar ---------- */
.pd__status {
  flex: none; position: relative; z-index: 30;
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 19px 3px; color: var(--ink);
  transition: color .35s var(--ease);
}
.pd__time { font-size: 11.5px; font-weight: 700; letter-spacing: .2px; }
.pd__sigs { display: inline-flex; align-items: center; gap: 4px; }
.pd.is-cam .pd__status { color: #fff; }

/* ============================================================
   CAMERA LAYER — chapter 1 lives here
   ============================================================ */
.cam {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column;
  background: #0a0b0a;
  border-radius: 0;
  /* the origin sits where the composer's attachment chip is, so a plain
     scale-down reads as the shot dropping into the message box */
  transform-origin: 13% 81%;
  transition: transform .5s var(--ease), opacity .4s var(--ease) .1s, border-radius .5s var(--ease);
}
.pd:not(.is-cam) .cam { pointer-events: none; }
.cam.is-stow { transform: scale(.12); border-radius: 70px; opacity: 0; }
/* scrims so the white status bar and the camera HUD stay legible over a
   bright lecture-hall ceiling. Absolutely positioned, so they stay out of
   the flex flow that lays out .cam__top / .cam__bar. */
.cam::before, .cam::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
}
.cam::before { top: 0; height: 96px; background: linear-gradient(rgba(6,10,8,.62), rgba(6,10,8,.18) 62%, transparent); }
.cam::after { bottom: 0; height: 130px; background: linear-gradient(transparent, rgba(6,10,8,.5)); }
.cam.is-gone { display: none; }

.cam__scene { position: absolute; inset: 0; overflow: hidden; }
.cam__scene svg { width: 100%; height: 100%; display: block; }
.cam__hold { position: absolute; inset: -3%; animation: camHold 7.5s ease-in-out infinite; }
.cam__scene .cam__hold svg { width: 100%; height: 100%; }
@keyframes camHold {
  0%   { transform: translate3d(0,0,0) scale(1.04); }
  25%  { transform: translate3d(-1.9px,1.5px,0) scale(1.04); }
  50%  { transform: translate3d(1.6px,-1.9px,0) scale(1.04); }
  75%  { transform: translate3d(2.1px,1.2px,0) scale(1.04); }
  100% { transform: translate3d(0,0,0) scale(1.04); }
}

.cam__vig {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(78% 58% at 50% 44%, transparent 40%, rgba(6,10,8,.42) 100%);
}
.cam__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background:
    linear-gradient(rgba(255,255,255,.85) 1px, transparent 1px) 0 33.33%/100% 33.34%,
    linear-gradient(90deg, rgba(255,255,255,.85) 1px, transparent 1px) 33.33% 0/33.34% 100%;
  background-repeat: repeat;
}
.cam__focus {
  position: absolute; left: 50%; top: 40%;
  width: 92px; height: 68px; margin: -34px 0 0 -46px;
  border: 1.4px solid rgba(255,255,255,.9);
  border-radius: 3px;
  opacity: 0; transform: scale(1.5);
  transition: opacity .3s var(--ease), transform .45s var(--ease), border-color .3s var(--ease);
}
.cam__focus::after {
  content: "AE/AF LOCK";
  position: absolute; left: 0; bottom: -17px;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em;
  color: #ffd54a; opacity: 0; transition: opacity .3s var(--ease) .12s;
}
.pd.is-focus .cam__focus { opacity: 1; transform: scale(1); border-color: #ffd54a; }
.pd.is-focus .cam__focus::after { opacity: 1; }

.cam__top {
  position: relative; z-index: 3; flex: none;
  margin-top: 34px; padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.cam__badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(8,14,10,.72);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; border-radius: 999px; padding: 5px 10px;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
}
.cam__badge i { width: 5px; height: 5px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.cam__zoom {
  color: rgba(255,255,255,.9); font-family: var(--font-mono); font-size: 9px;
  background: rgba(8,14,10,.5); border-radius: 999px; padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.14);
}

.cam__hint {
  position: absolute; left: 0; right: 0; bottom: 108px; z-index: 3;
  text-align: center; color: rgba(255,255,255,.94);
  font-size: 11.5px; letter-spacing: -.01em;
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
  transition: opacity .3s var(--ease);
}
.cam__hint b { display: block; font-family: var(--font-serif); font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.pd.is-shoot .cam__hint { opacity: 0; }

.cam__bar {
  position: relative; z-index: 3; margin-top: auto; flex: none;
  padding: 0 22px 26px;
  display: flex; align-items: center; justify-content: space-between;
}
.cam__roll { width: 30px; height: 30px; border-radius: 7px; border: 1.4px solid rgba(255,255,255,.5); overflow: hidden; background: #1b241d; }
.cam__roll svg { width: 100%; height: 100%; }
.cam__shutter {
  width: 54px; height: 54px; border-radius: 50%;
  border: 2.6px solid #fff; padding: 3.5px;
  display: grid; place-items: center;
  transition: transform .14s var(--ease);
}
.cam__shutter i { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform .14s var(--ease); }
.pd.is-shoot .cam__shutter { transform: scale(.94); }
.pd.is-shoot .cam__shutter i { transform: scale(.82); }
.cam__flip {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25);
  display: grid; place-items: center; color: #fff;
}
.cam__flip svg { width: 15px; height: 15px; }

.cam__flash {
  position: absolute; inset: 0; z-index: 6; background: #fff;
  opacity: 0; pointer-events: none;
}
.pd.is-shoot .cam__flash { animation: camFlash .42s var(--ease); }
@keyframes camFlash { 0% { opacity: 0; } 12% { opacity: .95; } 100% { opacity: 0; } }

/* ============================================================
   THE APP INSIDE THE PHONE
   ============================================================ */
.pa { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; z-index: 10; }
.pa__aura { position: absolute; inset: -25%; z-index: 0; pointer-events: none; filter: blur(34px); opacity: .85; }
.pa__aura i { position: absolute; inset: 0; display: block; }
.pa__aura i:first-child {
  background: radial-gradient(38% 30% at 24% 30%, color-mix(in srgb, var(--green) 22%, transparent), transparent 70%),
              radial-gradient(34% 26% at 74% 68%, color-mix(in srgb, var(--green) 14%, transparent), transparent 72%);
}
.pa__aura i:last-child {
  background: radial-gradient(30% 24% at 68% 22%, color-mix(in srgb, var(--green) 16%, transparent), transparent 72%),
              radial-gradient(40% 30% at 30% 80%, color-mix(in srgb, var(--green-800) 12%, transparent), transparent 70%);
}

/* ---------- app header ---------- */
.pa__top {
  flex: none; position: relative; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  padding: 4px 9px 7px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-soft);
}
.pa__ic { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; color: var(--ink-faint); }
.pa__ic svg { width: 16px; height: 16px; }
.pa__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; padding-left: 1px; }
.pa__cls { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .05em; color: var(--ink-faint); }
.pa__cls i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }
.pa__note { font-family: var(--font-serif); font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- context row ---------- */
.pa__ctx {
  flex: none; position: relative; z-index: 2;
  display: flex; align-items: center; gap: 7px;
  padding: 0 12px; max-height: 0; overflow: hidden; opacity: 0;
  background: rgba(251,250,244,.85); border-bottom: 1px solid transparent;
  transition: max-height .26s var(--ease), opacity .22s var(--ease), padding .26s var(--ease);
}
.pd.is-ctx .pa__ctx { max-height: 34px; opacity: 1; padding: 7px 12px; border-bottom-color: var(--line-soft); }
.pa__ctxline { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 8.5px; color: var(--green-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa__auto { display: inline-flex; align-items: center; gap: 5px; flex: none; font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--green-700); }
.pa__auto i { width: 22px; height: 12px; border-radius: 999px; background: var(--green); position: relative; display: block; }
.pa__auto i::after { content: ""; position: absolute; top: 2px; left: 12px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }

/* ---------- thread ---------- */
.pa__thread {
  flex: 1 1 auto; min-height: 0; position: relative; z-index: 1;
  overflow: hidden;
  padding: 12px 11px 6px;
  display: flex; flex-direction: column; gap: 9px;
  background-image: linear-gradient(rgba(22,32,26,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(22,32,26,.045) 1px, transparent 1px);
  background-size: 24px 24px;
}
/* the thread is programmatically scrolled, never squashed */
.pa__thread > * { flex: none; }
.pa__hello {
  margin: auto;
  text-align: center;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity .3s var(--ease);
}

/* MathematiX Icon (Stationary with signature outline effect) */
.pa__icon {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 14px;
  background: var(--paper-3);
  border: 1.5px solid color-mix(in srgb, var(--green) 42%, var(--green-300));
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--green) 12%, transparent),
              0 4px 12px -3px color-mix(in srgb, var(--green) 18%, transparent);
  overflow: hidden;
}
.pa__icon-glow {
  display: none;
}
.pa__icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  transform: scale(1.7);
}

.pa__hello h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -.02em;
  margin: 7px 0 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 3px;
}
.pa__lead { color: var(--ink); }
.pa__phrase {
  font-style: italic;
  color: var(--green);
  position: relative;
  white-space: nowrap;
  background-image: linear-gradient(90deg, #124d34, #1c7c54, #6fbb96, #145c3d, #124d34);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.pa__phrase::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 0.82em;
  margin-left: 2px;
  background: var(--green);
  animation: paHelloCaret 0.9s steps(1) infinite;
  vertical-align: -0.03em;
  -webkit-text-fill-color: initial;
}

@keyframes paHelloCaret {
  50% { opacity: 0; }
}

.pa__hello p { color: var(--ink-soft); font-size: 11px; line-height: 1.5; margin: 6px 0 0; max-width: 27ch; }
.pa__chips { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 14px; }

/* the three suggestion cards: white with a signature-colour wash */
.pa__chip {
  height: 34px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  font-size: 11px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--line) 75%, var(--green-300));
  box-shadow: var(--shadow-sm);
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    color-mix(in srgb, #ffffff 82%, var(--mint)) 25%,
    color-mix(in srgb, #ffffff 68%, var(--green-300)) 50%,
    color-mix(in srgb, #ffffff 84%, var(--mint)) 75%,
    #ffffff 100%
  );
}
.pa__chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(75% 65% at 20% 30%, color-mix(in srgb, var(--green) 12%, transparent), transparent 70%),
              radial-gradient(70% 60% at 80% 70%, color-mix(in srgb, var(--green) 9%, transparent), transparent 70%);
  pointer-events: none;
  opacity: 0.8;
}
.pd.is-thread .pa__hello { display: none; }

/* messages — mirrors the app's .msg */
.pmsg { max-width: 88%; animation: pmsgIn .34s var(--ease) both; }
@keyframes pmsgIn { from { opacity: 0; transform: translateY(7px) scale(.985); } }
.pmsg--user {
  align-self: flex-end; max-width: 82%;
  background: var(--green); color: #fff;
  border-radius: 15px 15px 5px 15px;
  padding: 8px 11px; font-size: 11.5px; line-height: 1.45;
  box-shadow: 0 6px 16px -10px rgba(16,40,28,.8);
}
.pmsg--user .pshot { margin-bottom: 6px; }
.pmsg--ai { align-self: flex-start; max-width: 94%; display: flex; flex-direction: column; }
.pmsg__by {
  order: 2; margin: 4px 0 0 3px;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
  display: flex; align-items: center; gap: 5px;
}
.pmsg__by::before { content: "✦"; color: var(--green); letter-spacing: 0; }
.pmsg__body {
  order: 1; background: var(--paper-3); border: 1px solid var(--line);
  border-radius: 15px 15px 15px 5px; padding: 9px 11px;
  font-size: 11.5px; line-height: 1.55; color: var(--ink);
  box-shadow: 0 1px 2px rgba(16,40,28,.05), 0 6px 18px -14px rgba(16,40,28,.5);
}
.pmsg__body b { color: var(--green-800); }

/* the little photo-of-the-board thumbnail, reused everywhere */
.pshot { display: block; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.35); background: #1b241d; }
.pshot svg { width: 100%; height: 100%; display: block; }
.pshot--sm { width: 62px; height: 46px; }
.pshot--chip { width: 34px; height: 26px; border-color: var(--line); flex: none; }

/* working status — the app's .msg__status */
.pstatus {
  align-self: flex-start; display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; color: var(--ink-faint); padding-left: 3px;
  animation: pmsgIn .3s var(--ease) both;
}
.pstatus::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 2px solid var(--green); border-top-color: transparent;
  animation: pspin .8s linear infinite;
}
@keyframes pspin { to { transform: rotate(360deg); } }

/* the note Lemma builds */
.pnote {
  align-self: flex-start; width: 94%;
  background: var(--paper-3); border: 1px solid var(--mint-line);
  border-radius: 13px; padding: 10px 11px 11px;
  box-shadow: 0 14px 30px -22px rgba(16,40,28,.7), var(--shadow-sm);
  animation: pnoteIn .42s var(--ease) both;
}
@keyframes pnoteIn { from { opacity: 0; transform: translateY(10px) scale(.965); } }
.pnote__head {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
}
.pnote__head i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }
.pnote__new { margin-left: auto; color: var(--green-700); background: var(--mint); border-radius: 4px; padding: 1px 5px; }
.pnote h5 { font-family: var(--font-serif); font-weight: 600; font-size: 14px; letter-spacing: -.01em; margin: 6px 0 0; }
.pnote__math {
  margin: 7px 0 0; padding: 8px 6px;
  background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 9px;
  font-family: var(--font-serif); font-size: 12.5px; text-align: center; color: var(--ink);
}
.pnote__math sup { font-size: .68em; }
.pnote ul { margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.pnote li { position: relative; padding-left: 13px; font-size: 10.5px; line-height: 1.45; color: var(--ink-soft); }
.pnote li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--green-300); }

/* saved / synced action chip — the app's .msg__action */
.paction {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  background: var(--mint); border: 1px solid var(--mint-line); color: var(--green-800);
  border-radius: 10px; padding: 7px 10px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .02em;
  animation: pmsgIn .34s var(--ease) both;
}
.paction svg { width: 12px; height: 12px; flex: none; }

/* ---------- composer ---------- */
.pa__composer {
  flex: none; position: relative; z-index: 2;
  padding: 6px 10px 9px;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
}
.pa__card {
  background: var(--paper-3); border: 1px solid var(--line);
  border-radius: 15px; padding: 8px 9px 7px;
  display: flex; flex-direction: column; gap: 5px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(31,79,55,.05);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.pd.is-send .pa__card { border-color: var(--green-300); box-shadow: 0 0 0 3px rgba(28,124,84,.10); }

/* attached shot strip */
.pa__shots {
  display: none; align-items: center; gap: 8px;
  padding: 6px; margin-bottom: 1px;
  background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 11px;
}
.pd.is-shot .pa__shots { display: flex; animation: pmsgIn .34s var(--ease) both; }
.pa__shots b { display: block; font-size: 10px; font-weight: 600; }
.pa__shots small { display: block; font-family: var(--font-mono); font-size: 8px; color: var(--ink-faint); }
.pa__shots .pa__x { margin-left: auto; color: var(--ink-faint); font-size: 12px; padding: 0 3px; }

.pa__input { min-height: 17px; font-size: 11.5px; line-height: 1.4; color: var(--ink); padding: 1px 2px; }
.pa__input.is-empty { color: var(--ink-faint); }
.pa__input .pcaret {
  display: inline-block; width: 1.5px; height: 12px; background: var(--green);
  vertical-align: -2px; margin-left: 1px; animation: mhCaret 1s steps(1) infinite;
}
.pa__row { display: flex; align-items: center; gap: 4px; }
.pa__row .sp { flex: 1 1 auto; min-width: 0; }
.pa__b {
  flex: none;
  height: 24px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--paper-2); color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 3px; padding: 0 7px;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .01em;
  white-space: nowrap;
}
.pa__b svg { width: 11px; height: 11px; flex: none; }
.pa__b--icon { width: 24px; padding: 0; justify-content: center; }
/* if a font fallback ever runs wide, the mode chip is the one that gives —
   everything else in the row is load-bearing for the story */
.pa__b--mode { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.pa__b--intent { transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.pd.is-intent .pa__b--intent { background: var(--green); border-color: var(--green); color: #fff; transform: scale(1.04); }
.pa__send {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--flow); color: #fff; display: grid; place-items: center;
  box-shadow: 0 4px 12px -4px rgba(28,124,84,.6);
  transition: transform .16s var(--ease);
}
.pa__send svg { width: 13px; height: 13px; }
.pd.is-send .pa__send { transform: scale(.88); }

/* ---------- toast + ghost finger ---------- */
.pd__toast {
  position: absolute; left: 12px; right: 12px; bottom: 92px; z-index: 34;
  display: flex; align-items: center; gap: 7px;
  background: var(--ink); color: var(--paper);
  border-radius: 11px; padding: 9px 11px; font-size: 10.5px;
  box-shadow: 0 18px 34px -18px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(10px); transition: opacity .24s var(--ease), transform .24s var(--ease);
  pointer-events: none;
}
.pd__toast svg { width: 13px; height: 13px; flex: none; color: var(--green-300); }
.pd__toast.show { opacity: 1; transform: none; }

.pd__finger {
  position: absolute; z-index: 36; left: 0; top: 0;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, rgba(255,255,255,.55), rgba(255,255,255,.10) 62%, transparent 70%);
  border: 1.5px solid rgba(255,255,255,.75);
  box-shadow: 0 3px 12px rgba(0,0,0,.35), inset 0 0 8px rgba(255,255,255,.35);
  opacity: 0; transform: scale(.9);
  transition: transform .28s var(--ease), left .38s var(--ease), top .38s var(--ease), opacity .22s var(--ease);
  pointer-events: none;
}
.pd__finger.on { opacity: 1; }
.pd__finger.tap { transform: scale(.72); }
.pd__finger.dark { border-color: rgba(20,40,30,.5); background: radial-gradient(circle at 36% 32%, rgba(28,124,84,.35), rgba(28,124,84,.10) 62%, transparent 70%); box-shadow: 0 3px 12px rgba(16,40,28,.28); }

/* ============================================================
   CHAPTER RAIL + CAPTION under the phone
   ============================================================ */
.mh-story { margin: 22px auto 0; max-width: 400px; text-align: center; }
.mh-rail { display: flex; align-items: center; justify-content: center; gap: 2px; margin: -6px 0; }
/* the visible bar is 20×3, but the button is a real 34px touch target */
.mh-rail button {
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
}
.mh-rail i {
  display: block; width: 20px; height: 3px; border-radius: 999px;
  background: var(--line); transition: background .3s var(--ease), transform .3s var(--ease);
}
.mh-rail button.on i {
  background: var(--flow);
  transform: scaleX(1.15);
  box-shadow: 0 0 10px rgba(28,124,84,.28);
}
.mh-rail button.done i { background: var(--green-300); }

/* reserved at the tallest caption so swapping chapters never nudges the rest
   of the page up and down (every chapter is 2 lines down to a 320px screen) */
.mh-cap { margin-top: 10px; min-height: 96px; }
.mh-cap__n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--green-700); }
.mh-cap__t { font-family: var(--font-serif); font-size: 1.24rem; font-weight: 500; letter-spacing: -.02em; margin-top: 6px; }
.mh-cap__d { font-size: .93rem; line-height: 1.5; color: var(--ink-soft); margin-top: 5px; }
.mh-cap.swap .mh-cap__n, .mh-cap.swap .mh-cap__t, .mh-cap.swap .mh-cap__d { animation: capIn .34s var(--ease) both; }
.mh-cap.swap .mh-cap__t { animation-delay: .03s; }
.mh-cap.swap .mh-cap__d { animation-delay: .06s; }
@keyframes capIn { from { opacity: 0; transform: translateY(3px); } }

/* ============================================================
   APP SCREEN GALLERY — "this is the app you're getting"
   ============================================================ */
.mh-gallery-shell {
  position: relative;
  margin-top: 24px;
  --shot-w: min(70vw, 248px);
}
.mh-hero + .mh-sec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.mh-hero + .mh-sec::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 8% -32% 4%;
  background:
    radial-gradient(36% 30% at 18% 42%, rgba(47,110,158,.13), transparent 72%),
    radial-gradient(42% 34% at 82% 36%, rgba(28,124,84,.15), transparent 72%),
    radial-gradient(26% 22% at 54% 76%, rgba(185,137,47,.08), transparent 72%);
  animation: mhAuraCounter 24s ease-in-out infinite;
}
.mh-hero + .mh-sec > .wrap { position: relative; z-index: 1; }
.mh-gallery-shell::before,
.mh-gallery-shell::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 92px;
  width: 24px;
  pointer-events: none;
}
.mh-gallery-shell::before { left: -1px; background: linear-gradient(90deg, var(--paper), transparent); }
.mh-gallery-shell::after { right: -1px; background: linear-gradient(-90deg, var(--paper), transparent); }
.mh-gallery {
  display: flex;
  gap: 16px;
  margin-inline: -20px;
  padding: 10px calc((100% - var(--shot-w)) / 2 + 20px) 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc((100% - var(--shot-w)) / 2);
  scroll-behavior: auto;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mh-gallery:focus-visible { outline: 2px solid var(--green-300); outline-offset: 3px; border-radius: 18px; }
.mh-gallery::-webkit-scrollbar { display: none; }
.mh-shot {
  flex: none;
  width: var(--shot-w);
  scroll-snap-align: center;
  scroll-snap-stop: normal;
  opacity: .5;
  transform: scale(.925);
  filter: saturate(.78);
  transition: opacity .48s var(--mh-ease), transform .48s var(--mh-ease), filter .48s var(--mh-ease);
}
.mh-shot.is-active {
  opacity: 1;
  transform: translateY(-3px) scale(1);
  filter: none;
}
.mh-shot.is-active .mh-shot__frame {
  box-shadow: 0 34px 64px -28px rgba(28,124,84,.40), 0 10px 26px -14px rgba(47,110,158,.28), inset 0 0 0 3px #000;
}
.mh-shot__frame {
  border-radius: 34px; padding: 6px;
  background: linear-gradient(150deg, #3c3d38 0%, #191a17 46%, #0b0c0a 100%);
  box-shadow: 0 30px 54px -30px rgba(12,20,16,.72), 0 8px 20px -14px rgba(12,20,16,.45), inset 0 0 0 3px #000;
}
.mh-shot__screen {
  border-radius: 28px; overflow: hidden; background: var(--paper);
  aspect-ratio: 9 / 17.4; display: flex; flex-direction: column;
  font-size: 10px; position: relative;
}
.mh-shot__screen::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -24%;
  background:
    radial-gradient(36% 30% at 24% 26%, rgba(63,167,118,.17), transparent 72%),
    radial-gradient(34% 28% at 74% 68%, rgba(47,110,158,.12), transparent 72%),
    radial-gradient(24% 20% at 72% 20%, rgba(185,137,47,.08), transparent 74%);
  opacity: .36;
  pointer-events: none;
  transition: opacity .45s var(--mh-ease);
}
.mh-shot.is-active .mh-shot__screen::before { opacity: .9; }
.mh-shot__screen > * { position: relative; z-index: 1; }
.mh-shot__cap { margin-top: 12px; min-height: 54px; text-align: center; }
.mh-shot__cap b { display: block; font-family: var(--font-serif); font-size: 1.08rem; font-weight: 600; }
.mh-shot__cap span { display: block; font-size: .84rem; color: var(--ink-faint); margin-top: 2px; line-height: 1.4; }

/* ------------------------------------------------------------
   INFINITE MODE — the strip has no ends.

   The scroll/snap layout above is the no-JS floor. Once the script
   runs it adds .is-loop and drives every card with a transform, so
   there is no scroll position to rewind: cards are drawn at their
   wrapped distance from a continuous position, and enough copies
   exist to keep the seam off screen in both directions.
   ------------------------------------------------------------ */
.mh-gallery.is-loop {
  display: block;
  position: relative;
  padding: 0;
  overflow: hidden;
  overscroll-behavior-inline: auto;
  scroll-snap-type: none;
  scroll-behavior: auto;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mh-gallery.is-loop.is-dragging { cursor: grabbing; }
.mh-gallery.is-loop .mh-shot {
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: calc(var(--shot-w) / -2);
  scroll-snap-align: none;
  /* JS writes transform and opacity every frame, so a CSS transition here
     would lag a finger by half a second */
  transition: none;
  /* the desaturation is the no-JS fallback's way of dimming a card; once
     the strip is live the opacity does that, and dropping the filter keeps
     each card a plain layer instead of a render surface */
  filter: none;
  backface-visibility: hidden;
}
.mh-gallery.is-loop.is-moving .mh-shot { will-change: transform, opacity; }
.mh-gallery__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 2px;
}
.mh-gallery__arrow {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(239,250,243,.72));
  color: var(--ink);
  box-shadow: 0 8px 24px -18px rgba(12,20,16,.58);
  transition: transform .18s var(--mh-ease), border-color .18s var(--mh-ease), background .18s var(--mh-ease);
}
.mh-gallery__arrow:active { transform: scale(.92); }
.mh-gallery__arrow:disabled {
  opacity: .38;
  cursor: default;
  box-shadow: none;
}
.mh-gallery__arrow:disabled:active { transform: none; }
.mh-gallery__arrow:focus-visible { outline: 2px solid var(--green-300); outline-offset: 2px; }
.mh-gallery__arrow svg { width: 17px; height: 17px; }
.mh-gallery__dots { display: flex; align-items: center; gap: 2px; }
.mh-gallery__dots button {
  width: 30px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
}
.mh-gallery__dots i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--line);
  transition: width .3s var(--mh-ease), background .3s var(--mh-ease);
}
.mh-gallery__dots button.is-active i {
  width: 22px;
  background: var(--flow);
  box-shadow: 0 0 9px rgba(28,124,84,.28);
}
.mh-gallery__dots button:focus-visible { outline: 2px solid var(--green-300); outline-offset: -3px; border-radius: 999px; }
.mh-gallery__hint {
  margin-top: 2px;
  text-align: center;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mh-gallery-cta { margin-top: 20px; text-align: center; }

/* mini app chrome shared by the gallery screens */
.ms-top {
  flex: none; display: flex; align-items: center; gap: 5px;
  padding: 12px 10px 7px; border-bottom: 1px solid var(--line-soft);
  background: var(--paper-2);
}
.ms-brand { font-family: var(--font-serif); font-size: 12px; font-weight: 600; }
.ms-brand em { font-style: italic; color: var(--green); }
.ms-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.ms-av { width: 18px; height: 18px; border-radius: 6px; background: var(--green); color: #fff; font-size: 8px; display: grid; place-items: center; font-weight: 700; }
.ms-sp { flex: 1; }
.ms-body { flex: 1; min-height: 0; padding: 9px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.ms-flow {
  height: 27px; border-radius: 9px; background: var(--flow); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 9.5px; font-weight: 600; box-shadow: 0 6px 14px -8px rgba(28,124,84,.7);
}
.ms-search {
  height: 25px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper-3);
  display: flex; align-items: center; gap: 5px; padding: 0 8px; color: var(--ink-faint); font-size: 9px;
}
.ms-rule { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.ms-rule span { flex: 1; height: 1px; background: var(--line); }
.ms-class { border: 1px solid var(--line); background: var(--paper-3); border-radius: 9px; padding: 7px 8px; box-shadow: var(--shadow-sm); }
.ms-class b { display: flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 600; }
.ms-class b em { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: 7px; color: var(--ink-faint); }
.ms-class u { display: flex; align-items: center; gap: 5px; text-decoration: none; font-size: 9px; color: var(--ink-soft); margin-top: 5px; }
.ms-class u i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); margin-left: auto; box-shadow: 0 0 5px var(--green); }
.ms-ask {
  flex: none; margin: auto 9px 11px; padding: 7px 8px 7px 10px;
  border: 1px solid var(--line); background: var(--paper-3); border-radius: 12px;
  display: flex; align-items: center; gap: 6px; font-size: 9px; color: var(--ink-faint);
  box-shadow: var(--shadow-sm);
}
.ms-ask i { color: var(--green); font-style: normal; }
.ms-ask b { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--flow); color: #fff; display: grid; place-items: center; font-size: 10px; }

.ms-thread {
  flex: 1; min-height: 0; padding: 9px; display: flex; flex-direction: column; gap: 7px; overflow: hidden;
  background-image: linear-gradient(rgba(22,32,26,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(22,32,26,.045) 1px, transparent 1px);
  background-size: 20px 20px;
}
.ms-u { align-self: flex-end; max-width: 84%; background: var(--green); color: #fff; border-radius: 12px 12px 4px 12px; padding: 6px 8px; font-size: 9.5px; line-height: 1.4; }
.ms-a { align-self: flex-start; max-width: 92%; background: var(--paper-3); border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; padding: 6px 8px; font-size: 9.5px; line-height: 1.45; color: var(--ink-soft); box-shadow: var(--shadow-sm); }
.ms-a b { color: var(--green-800); }
.ms-chipline { align-self: flex-start; font-family: var(--font-mono); font-size: 7.5px; background: var(--mint); border: 1px solid var(--mint-line); color: var(--green-800); border-radius: 7px; padding: 5px 7px; }
.ms-cmp { flex: none; margin: 0 9px 11px; border: 1px solid var(--line); background: var(--paper-3); border-radius: 12px; padding: 7px 8px; box-shadow: var(--shadow-sm); }
.ms-cmp p { font-size: 9px; color: var(--ink-faint); }
.ms-cmp div { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.ms-cmp em { font-style: normal; font-family: var(--font-mono); font-size: 7px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 5px; color: var(--ink-soft); }
.ms-cmp em.on { background: var(--green); border-color: var(--green); color: #fff; }
.ms-cmp b { margin-left: auto; width: 19px; height: 19px; border-radius: 50%; background: var(--flow); color: #fff; display: grid; place-items: center; font-size: 9px; }

.ms-read { flex: 1; min-height: 0; padding: 10px; overflow: hidden; }
.ms-seg { display: flex; gap: 3px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; margin-bottom: 9px; }
.ms-seg span { flex: 1; text-align: center; font-size: 8.5px; padding: 3px 0; border-radius: 6px; color: var(--ink-faint); }
.ms-seg span.on { background: var(--paper-3); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 600; }
.ms-read h6 { font-family: var(--font-serif); font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.ms-read p { font-size: 9px; line-height: 1.5; color: var(--ink-soft); margin-top: 5px; }
.ms-read .eq { margin-top: 7px; padding: 7px; border: 1px solid var(--line-soft); background: var(--paper-2); border-radius: 8px; font-family: var(--font-serif); font-size: 10.5px; text-align: center; }
.ms-read .eq sup { font-size: .7em; }
.ms-read ul { margin-top: 7px; display: flex; flex-direction: column; gap: 4px; }
.ms-read li { position: relative; padding-left: 10px; font-size: 9px; line-height: 1.4; color: var(--ink-soft); }
.ms-read li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 3px; height: 3px; border-radius: 50%; background: var(--green-300); }

/* ============================================================
   CAPABILITY ROWS — the app's attach-sheet options, as content
   ============================================================ */
.mh-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.mh-row {
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--paper-3); border: 1px solid var(--line);
  border-radius: 16px; padding: 15px 15px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.mh-row:active { transform: scale(.99); border-color: var(--mint-line); }
.mh-row__ic {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: var(--mint); border: 1px solid var(--mint-line); color: var(--green-700);
  display: grid; place-items: center;
}
.mh-row__ic svg { width: 19px; height: 19px; }
.mh-row b { display: block; font-family: var(--font-serif); font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; }
.mh-row p { font-size: .92rem; line-height: 1.5; color: var(--ink-soft); margin-top: 4px; }
.mh-row__chev { margin-left: auto; color: var(--line); font-size: 1.1rem; align-self: center; }

/* ============================================================
   SYNC / DESKTOP HANDOFF
   ============================================================ */
.mh-sync {
  margin-top: 26px; padding: 22px 20px;
  background: var(--dark); color: var(--dark-text);
  border-radius: 22px; position: relative; overflow: hidden;
}
.mh-sync::before {
  content: ""; position: absolute; inset: -40% -20% 30%;
  background: radial-gradient(40% 40% at 30% 20%, rgba(63,167,118,.28), transparent 70%);
  animation: mhAuraDrift 17s ease-in-out infinite;
}
.mh-sync::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -18%;
  right: -18%;
  bottom: -18%;
  height: 42%;
  border-radius: 48% 52% 0 0 / 34% 30% 0 0;
  background: linear-gradient(105deg, rgba(45,212,191,.15), rgba(74,222,128,.05) 52%, rgba(47,110,158,.16));
  box-shadow: 0 -24px 70px rgba(45,212,191,.08);
  pointer-events: none;
  animation: mhSyncWave 13s ease-in-out infinite alternate;
}
@keyframes mhSyncWave {
  from { transform: translate3d(-2%, 2%, 0) rotate(-1.5deg); }
  to { transform: translate3d(3%, -8%, 0) rotate(1.5deg); }
}
.mh-sync > * { position: relative; z-index: 1; }
.mh-sync .eyebrow { color: var(--glow); }
.mh-sync .eyebrow::before { background: rgba(63,167,118,.5); }
.mh-sync h3 { font-size: 1.6rem; margin-top: 14px; letter-spacing: -.025em; }
.mh-sync h3 em { font-style: italic; color: var(--glow); }
.mh-sync p { color: var(--dark-soft); font-size: .96rem; line-height: 1.6; margin-top: 10px; }

.mh-flow { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.mh-flow__node {
  flex: 1; min-width: 0; border: 1px solid var(--dark-line); border-radius: 13px;
  background: rgba(255,255,255,.05); padding: 11px 10px; text-align: center;
}
.mh-flow__node svg { width: 18px; height: 18px; margin: 0 auto 7px; color: var(--glow); }
.mh-flow__node b { display: block; font-size: .82rem; font-weight: 600; }
.mh-flow__node span { display: block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-soft); margin-top: 3px; }
.mh-flow__node:nth-of-type(1) { animation: mhSoftFloat 4.8s var(--mh-ease) infinite alternate; }
.mh-flow__node:nth-of-type(2) { animation: mhSoftFloat 5.2s var(--mh-ease) -.8s infinite alternate; }
.mh-flow__node:nth-of-type(3) { animation: mhSoftFloat 4.6s var(--mh-ease) -1.4s infinite alternate; }
.mh-flow__arrow { flex: none; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(63,167,118,.15), var(--glow)); position: relative; }
.mh-flow__arrow::after {
  content: ""; position: absolute; right: -1px; top: 50%; width: 6px; height: 6px;
  border-top: 2px solid var(--glow); border-right: 2px solid var(--glow);
  transform: translateY(-50%) rotate(45deg);
}
.mh-flow__arrow i {
  position: absolute; top: 50%; left: 0; width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--glow); box-shadow: 0 0 8px var(--glow);
  animation: mhPulse 2.4s var(--ease) infinite;
}
@keyframes mhPulse { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(26px); opacity: 0; } }

.mh-desktop {
  margin-top: 20px; border: 1px solid var(--dark-line); border-radius: 14px;
  background: rgba(255,255,255,.04); overflow: hidden;
}
.mh-desktop__bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--dark-line); }
.mh-desktop__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); display: block; }
.mh-desktop__bar span { margin-left: auto; font-family: var(--font-mono); font-size: 8.5px; color: var(--dark-soft); }
.mh-desktop__canvas {
  height: 108px; position: relative;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 18px 18px;
}
.mh-desktop__card {
  position: absolute; border-radius: 8px; border: 1px solid rgba(63,167,118,.35);
  background: rgba(63,167,118,.10); padding: 7px 8px;
  font-size: 8.5px; line-height: 1.35; color: var(--dark-text);
}
.mh-desktop__card--a { left: 12px; top: 14px; width: 44%; }
.mh-desktop__card--b { right: 12px; top: 44px; width: 46%; font-family: var(--font-serif); text-align: center; font-size: 10px; }
.mh-desktop__card--in { border-color: rgba(104,183,207,.38); box-shadow: 0 0 18px rgba(63,167,118,.10); }

.mh-sync .btn { margin-top: 20px; }
.mh-sync .btn--on-dark {
  background: linear-gradient(105deg, #3fa776, #54c493 34%, #4b9ab6 62%, #3fa776);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 14px 32px -18px rgba(63,167,118,.72);
}
.mh .btn--primary {
  background: var(--flow);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 14px 30px -16px rgba(28,124,84,.52);
}
.mh .btn--primary svg { transition: transform .24s var(--mh-ease); }
.mh .btn--primary:focus-visible svg { transform: translateX(3px); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.mh-final { text-align: center; }
.mh-final h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); letter-spacing: -.03em; }
.mh-final p { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; margin: 12px auto 0; max-width: 36ch; }
.mh-final .mh-ask { margin-top: 24px; }

.mh-qr {
  margin-top: 22px; display: flex; align-items: center; gap: 12px;
  border: 1px dashed var(--mint-line); background: var(--paper-2);
  border-radius: 14px; padding: 13px 15px; text-align: left;
}
.mh-qr__ic { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--mint); color: var(--green-700); display: grid; place-items: center; }
.mh-qr__ic svg { width: 17px; height: 17px; }
.mh-qr b { display: block; font-size: .93rem; }
.mh-qr span { display: block; font-size: .84rem; color: var(--ink-faint); line-height: 1.4; margin-top: 2px; }

/* ============================================================
   SHARED SECTION RHYTHM (phone-first)
   ============================================================ */
.mh-sec { padding: 46px 0; }
.mh-sec--tint { background: linear-gradient(var(--paper-2), var(--paper)); }
.mh-head { max-width: 620px; }
.mh-head h2 { font-size: clamp(1.75rem, 7.4vw, 2.3rem); letter-spacing: -.03em; margin-top: 14px; }
.mh-head p { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; margin-top: 12px; }
.mh-head--center { margin: 0 auto; text-align: center; }

/* ============================================================
   WIDER SCREENS — someone opened the phone page on a laptop
   ============================================================ */
@media (min-width: 900px) {
  .mh-hero { padding: 54px 0 20px; }
  .mh-hero > .wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 56px; align-items: start;
  }
  .mh-hero__copy { grid-column: 1; grid-row: 1; }
  .mh-hero__more { grid-column: 1; grid-row: 2; }
  .mh-demo { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
  .pd { width: 300px; }
  .mh-title .hero-title__lead { font-size: 3.4rem; }
  .mh-sec { padding: 68px 0; }
  .mh-gallery-shell { max-width: 800px; margin-inline: auto; --shot-w: 232px; }
}

/* ============================================================
   NARROW PHONES — the mock composer is the tightest row on the page;
   at 320px it needs the chrome trimmed or the chips squash into each other
   ============================================================ */
@media (max-width: 400px) {
  .pa__row { gap: 3px; }
  .pa__b { padding: 0 5px; font-size: 8px; gap: 2px; }
  .pa__b--icon { width: 22px; padding: 0; }
  .pa__send { width: 24px; height: 24px; }
  .pa__send svg { width: 12px; height: 12px; }
}

/* The mobile landing page keeps its footer useful without turning it into a
   fourth full content section. Product and company links are the two paths
   people need here; the full directory remains on the desktop site. */
@media (max-width: 899px) {
  .footer { padding: 38px 0 26px; }
  .footer__grid { gap: 22px 28px; }
  .footer__brand p { margin: 12px 0 2px; }
  .footer__col:nth-child(3) { display: none; }
  .footer__col h5 { margin-bottom: 8px; }
  .footer__bottom { margin-top: 28px; padding-top: 19px; }
}

/* ============================================================
   OFF-SCREEN SECTIONS HOLD STILL

   A CSS animation keeps running when its element is three screens
   away — the browser has no idea nobody is looking. Every ambient
   drift, float and pulse on this page was therefore being ticked
   the whole time you read any part of it, and the frames they cost
   came out of the scroll.

   mobile-home.js watches each section and parks this class on the
   ones that are out of view. Paused, not cancelled: a section picks
   its animation back up mid-stride when you scroll to it.
   ============================================================ */
.mh-rest,
.mh-rest *,
.mh-rest *::before,
.mh-rest *::after { animation-play-state: paused !important; }

/* ============================================================
   REDUCED MOTION — styles.css already kills animation/transition
   globally; this only makes sure nothing is left mid-flight.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cam { display: none; }
  .pd__finger { display: none; }
  .mh-gallery { scroll-behavior: auto; }
  .mh-gallery.is-loop.is-moving .mh-shot { will-change: auto; }
}

/* ============================================================
   NO HOVER ON MOBILE
   This page is touch-only. The shared stylesheet (styles.css)
   still defines :hover states, and on a touch screen those
   latch after a tap and make the element jump. Each one is
   pinned back to its non-hover value here so nothing moves.
   This file only loads on /mobile — desktop is unaffected.
   ============================================================ */
.btn--primary:hover {
  transform: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, var(--shadow-sm);
}
.btn--ghost:hover  { transform: none; }
.btn--on-dark:hover { transform: none; }
.btn--light:hover  { transform: none; box-shadow: var(--shadow-sm); }
.textlink:hover     { gap: 6px; }
.textlink:hover svg { transform: none; }
.nav__links a:not(.active):hover { color: var(--ink-soft); background: transparent; }
.nav__login:hover    { color: var(--ink); }
.footer__col a:hover { color: var(--ink-soft); }
.footer__social a:hover { border-color: var(--line); color: var(--ink-soft); }