/*
 * LOCKEDTFIN Golden Composition Layer
 *
 * This stylesheet is intentionally additive. The route runtime and backend
 * contracts remain unchanged; it gives the existing semantic screens a single
 * art-directed composition language derived from the warm reference masters.
 * It never invents user media: empty slots remain honest and keep their shape.
 */

:root {
  --gm-rose: #d46772;
  --gm-peach: #f1a58e;
  --gm-glass: rgba(41, 24, 21, .74);
  --gm-hairline: rgba(255, 207, 191, .18);
  --gm-line: rgba(255, 207, 191, .2);
  --gm-champagne: #ffe0cf;
  --gm-glow: rgba(239, 120, 134, .27);
}

/* Final member-surface corrections from the independent 390px reference
 * audit. These improve task hierarchy and truthful state legibility without
 * widening any API or media boundary. */
.coach-prompts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
.coach-prompts button {
  min-height: 44px;
  padding: 8px 12px;
  padding-inline: var(--chip-pad);
  border: 1px solid var(--x-hair-strong);
  border-radius: var(--radius-pill);
  background: rgba(255,236,226,.05);
  color: var(--gm-champagne);
  font-size: var(--chip-fs);
  font-weight: var(--chip-fw);
  text-align: left;
}
.coach-prompts button:focus-visible { outline: 2px solid var(--gm-rose); outline-offset: 2px; }

.twin-swipe-cue,
.history-rail-cue {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .03em;
}
.twin-swipe-cue i { width: 22px; height: 1px; background: linear-gradient(90deg,var(--gm-rose),transparent); }
.twin-swipe-cue b { margin-left: auto; color: var(--gm-peach); font-size: 11px; }
.history-rail-cue { justify-content: flex-end; margin: 4px 2px 8px; color: var(--gm-peach); }
.history-strip--demo { position: relative; }
.history-strip--demo > .demo-media-badge { position: absolute; top: 8px; left: 8px; z-index: 4; }
.history-strip--demo .history-thumb.current { border-color: var(--gm-rose); box-shadow: 0 0 0 1px var(--gm-rose),0 18px 42px rgba(0,0,0,.35),0 0 26px var(--gm-glow); }

.film-stills-state {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 10px;
  max-width: min(172px, calc(100% - 128px));
  padding: 6px 9px;
  border: 1px solid var(--gm-hairline);
  border-radius: 999px;
  background: rgba(8,7,6,.82);
  color: var(--gm-champagne);
  font-size: 11px;
  font-weight: 760;
  text-align: center;
  backdrop-filter: blur(12px);
}

.checkin-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.checkin-stepper span {
  display: flex;
  min-height: var(--tag-h);
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--x-hair-strong);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--tag-fs);
  font-weight: var(--tag-fw);
}
.checkin-stepper span::before {
  content: attr(data-step);
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  font-size: 10px;
}
.checkin-stepper span.active {
  border-color: var(--gm-rose);
  color: var(--gm-champagne);
  background: linear-gradient(120deg, rgba(239,117,132,.18), rgba(255,255,255,.025));
  box-shadow: 0 0 22px var(--gm-glow);
}

html[data-presentation="feminine"] {
  --gm-glow: rgba(239, 120, 134, .3);
  --gm-rose: #e97584;
  --gm-peach: #f4ad98;
}

html[data-presentation="masculine"] {
  --gm-glow: rgba(195, 71, 55, .25);
  --gm-rose: #c14d45;
  --gm-peach: #d69b76;
}

/* Every customer screen gets an intentional atmospheric plane. The content
 * remains in the existing scroll container, so this cannot create a second
 * page scroll or a fixed overlay that traps touch input. */
.public-shell,
.app-shell {
  isolation: isolate;
  background:
    radial-gradient(70% 58% at 82% 4%, color-mix(in srgb, var(--gm-glow) 86%, transparent), transparent 68%),
    radial-gradient(52% 44% at 8% 96%, rgba(181, 107, 79, .12), transparent 73%),
    var(--bg);
}

.public-shell::before,
.app-shell::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background: linear-gradient(115deg, transparent 0 42%, rgba(255, 201, 180, .035) 50%, transparent 60%);
  mix-blend-mode: screen;
}

.public-topbar,
.side-nav,
.app-profile-trigger,
.bottom-nav {
  border-color: var(--gm-hairline);
}

.public-topbar .brand,
.side-nav .brand {
  letter-spacing: -.07em;
}

/* Reference screens use one clear scene title, not a repeated marketing essay
 * on utility routes. Keep supporting copy readable but visually subordinate. */
.app-screen--app-workout .app-header__subtitle,
.app-screen--app-nutrition .app-header__subtitle,
.app-screen--app-check-in .app-header__subtitle,
.app-screen--app-progress .app-header__subtitle,
.app-screen--app-history .app-header__subtitle,
.app-screen--app-roadmap .app-header__subtitle,
.app-screen--app-settings .app-header__subtitle,
.app-screen--app-membership .app-header__subtitle,
.app-screen--app-install .app-header__subtitle {
  max-width: 38ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.app-screen--app-workout .app-header h1,
.app-screen--app-nutrition .app-header h1,
.app-screen--app-check-in .app-header h1,
.app-screen--app-progress .app-header h1,
.app-screen--app-history .app-header h1,
.app-screen--app-roadmap .app-header h1,
.app-screen--app-settings .app-header h1,
.app-screen--app-membership .app-header h1,
.app-screen--app-install .app-header h1 {
  font-size: var(--type-h1);
  letter-spacing: -.035em;
}

/* Full-height cinematic landing stage. The images are still semantic img
 * elements, so live mode can replace them with owned media or an honest slot. */
.public-screen--feminine .landing,
.public-screen--masculine .landing {
  min-height: calc(100dvh - 126px);
}

.public-screen--feminine .landing-visual,
.public-screen--masculine .landing-visual {
  min-height: min(74dvh, 720px);
}

/* The visual column is a centering grid, so an auto-sized figure containing
 * a percentage-width stage forms a cyclic intrinsic-size calculation and can
 * collapse to its borders on wide screens. Give the semantic media figure an
 * explicit responsive inline size; the inner split then has a real containing
 * block and each portrait owns exactly half of the scene. */
.public-screen--feminine .landing-visual > .landing-stage,
.public-screen--masculine .landing-visual > .landing-stage {
  width: min(620px, 100%);
}

.public-screen--feminine .landing-stage > .future-stage,
.public-screen--masculine .landing-stage > .future-stage {
  width: 100%;
}

.public-screen--feminine .future-stage,
.public-screen--masculine .future-stage {
  border-color: color-mix(in srgb, var(--gm-rose) 44%, var(--line));
  box-shadow: 0 40px 120px rgba(0, 0, 0, .58), 0 0 90px var(--gm-glow);
}

.public-screen--feminine .future-stage::before,
.public-screen--masculine .future-stage::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 5% 8%;
  border: 1px solid color-mix(in srgb, var(--gm-peach) 38%, transparent);
  border-radius: 48% 48% 42% 42%;
  opacity: .42;
  pointer-events: none;
  transform: rotate(-8deg);
  box-shadow: 0 0 32px var(--gm-glow);
}

.public-screen--feminine .stage-label,
.public-screen--masculine .stage-label,
.public-screen--feminine .stage-callout,
.public-screen--masculine .stage-callout {
  border-color: color-mix(in srgb, var(--gm-peach) 35%, var(--line));
  box-shadow: 0 12px 40px rgba(0, 0, 0, .32), 0 0 22px var(--gm-glow);
}

.public-screen--feminine .landing-actions .button--primary,
.public-screen--masculine .landing-actions .button--primary,
.app-screen--app .mission-card .button--primary {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .43), transparent 18%),
    linear-gradient(135deg, color-mix(in srgb, var(--gm-peach) 72%, var(--accent)), var(--accent2));
  box-shadow: 0 18px 50px var(--gm-glow), inset 0 1px 0 rgba(255, 255, 255, .48);
}

/* Glass panels are smoked bronze surfaces rather than anonymous gray cards. */
.public-shell .glass-card,
.app-shell .glass-card {
  border-color: var(--gm-hairline);
  background:
    linear-gradient(145deg, rgba(255, 218, 202, .095), rgba(255, 255, 255, .018) 52%, rgba(10, 6, 5, .18)),
    var(--gm-glass);
  box-shadow: var(--shadow-card);
}

.public-shell .glass-card::before,
.app-shell .glass-card::before {
  background: linear-gradient(118deg, rgba(255, 209, 191, .09), transparent 38%, transparent 70%, var(--gm-glow));
}

.button--primary {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 224, 212, .42);
}

.button--primary::after {
  font-size: .8em;
  opacity: .72;
  transform: translateY(-.05em);
}

.button--primary:focus-visible,
.button--primary:hover {
  box-shadow: 0 0 0 4px var(--accent-soft), 0 18px 52px var(--gm-glow), inset 0 1px 0 rgba(255, 255, 255, .52);
}

/* The dashboard should read as a mission scene, not a spreadsheet. */
.app-screen--app .hero-grid--media-first {
  position: relative;
  align-items: stretch;
}

.app-screen--app .hero-grid--media-first > .glass-card:last-child:not(.future-card--empty) {
  min-height: 320px;
}

.app-screen--app .hero-grid--media-first > .glass-card:last-child:not(.future-card--empty) .future-mini {
  min-height: 320px;
}

@media (min-width: 1051px) {
  .app-screen--app .hero-grid--media-first > .glass-card:last-child:not(.future-card--empty),
  .app-screen--app .hero-grid--media-first > .glass-card:last-child:not(.future-card--empty) .future-mini {
    min-height: 430px;
  }
}

.app-screen--app .future-mini-overlay {
  border-color: rgba(255, 213, 195, .28);
  background: linear-gradient(180deg, rgba(13, 8, 7, .25), rgba(13, 8, 7, .9));
}

.app-screen--app .metrics-grid .metric-card {
  background: linear-gradient(145deg, rgba(255, 207, 192, .08), rgba(255, 255, 255, .018));
}

.app-screen--app .journey-rail {
  padding-block: 4px 2px;
}

/* Media-led utility routes. Existing owned-media/error behavior remains in
 * charge; these styles simply make the authorized asset occupy the scene. */
.app-screen--app-workout .exercise-media-slot,
.app-screen--app-check-in .checkin-photo,
.app-screen--app-progress .twin-card,
.app-screen--app-future-film .film-player,
.app-screen--app-phase-complete .twin-card {
  border-color: color-mix(in srgb, var(--gm-rose) 36%, var(--line));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .36), 0 0 38px color-mix(in srgb, var(--gm-glow) 70%, transparent);
}

.app-screen--app-workout .exercise-panel,
.app-screen--app-coach .chat-card,
.app-screen--app-check-in .checkin-fields,
.app-screen--app-settings .settings-card {
  background: linear-gradient(145deg, rgba(255, 209, 191, .06), rgba(10, 7, 6, .12));
}

.app-screen--app-coach .coach-avatar {
  width: 58px;
  height: 58px;
  box-shadow: 0 0 0 8px rgba(239, 120, 134, .08), 0 0 42px var(--gm-glow);
}

.app-screen--app-coach .chat-header {
  background: linear-gradient(90deg, rgba(239, 120, 134, .12), transparent 62%);
}

.app-screen--app-coach .chat-compose {
  padding: 16px;
  background: rgba(10, 7, 6, .42);
}

.app-screen--app-coach .round-button {
  box-shadow: 0 0 22px rgba(239, 120, 134, .08);
}

.app-screen--app-history .history-strip,
.app-screen--app-future-film .film-stills {
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.app-screen--app-history .history-thumb,
.app-screen--app-future-film .film-stills > div:not(.film-still-divider) {
  scroll-snap-align: start;
}

.app-screen--app-membership .membership-grid,
.app-screen--app-settings .profile-row {
  align-items: stretch;
}

.app-screen--app-membership .metric-value {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--gm-peach);
}

.app-screen--app-install .review-card,
.app-screen--app-stack .product-card {
  min-height: 260px;
}

/* Contextual action tray: a stable, compact landing zone for screen actions;
 * it never replaces the primary five-destination dock. */
.context-action-tray {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid var(--gm-hairline);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
}


/* Demo-only enrichment uses the same live geometry, so the reference can
 * guide the composition without ever pretending to be a member receipt. */
.review-media-receipt--demo { margin-top: 18px; }
.history-strip--demo .history-thumb { flex-basis: 136px; height: 184px; }
.history-strip--demo .history-thumb img { width: 100%; height: 100%; object-fit: cover; }
.app-screen--app-future-film .film-stills { min-height: clamp(290px, 48vw, 520px); }
.app-screen--app-future-film .film-stills > div:not(.film-still-divider) { min-height: inherit; }
.app-screen--app-future-film .film-stills img { object-position: center 22%; }
.app-screen--app-workout .exercise-media-slot[data-demo-media="true"] { box-shadow: 0 0 0 1px var(--gm-line), 0 18px 48px rgba(194,82,96,.16); }
.app-screen--app-workout .exercise-media-slot[data-demo-media="true"] figcaption { color: var(--gm-champagne); }
.app-screen--app-progress .twin-card[data-demo-media="true"] { box-shadow: 0 0 0 1px var(--gm-line), 0 18px 52px rgba(194,82,96,.14); }
.app-screen--app-history .history-strip--demo { margin-top: 10px; }

@media (max-width: 760px) {
  .public-screen--feminine .landing,
  .public-screen--masculine .landing {
    min-height: 100%;
  }

  .public-screen--feminine .landing-visual,
  .public-screen--masculine .landing-visual {
    min-height: 410px;
  }

  .public-screen--feminine .future-stage,
  .public-screen--masculine .future-stage {
    height: min(58dvh, 470px);
  }

  .app-screen--app .hero-grid--media-first > .glass-card:last-child:not(.future-card--empty),
  .app-screen--app .hero-grid--media-first > .glass-card:last-child:not(.future-card--empty) .future-mini {
    min-height: 300px;
  }

  .app-screen--app-coach .chat-card {
    min-height: calc(100dvh - var(--app-nav-reserved, 100px) - 110px);
  }

  .context-action-tray {
    position: sticky;
    z-index: 12;
  }

  .app-screen--app-future-film .film-stills { min-height: 300px; }
  .app-screen--app-weekly-review .review-media-receipt--demo { margin-inline: -2px; }
  .app-screen--app-history .history-strip--demo .history-thumb { flex-basis: 120px; height: 164px; }
}

@media (prefers-reduced-motion: reduce) {
  .button--primary::after { opacity: .52; }
  .context-action-tray { scroll-behavior: auto; }
}

/* -------------------------------------------------------------------------
 * Golden composition primitives — one dominant scene, one evidence layer,
 * one reachable action region. These are coded surfaces, never GM rasters.
 * ---------------------------------------------------------------------- */
.gm-composition {
  --gm-scene-min: clamp(320px, 52dvh, 640px);
  gap: clamp(14px, 2vw, 24px);
  min-width: 0;
}

.gm-composition--hero,
.gm-composition--cinematic,
.gm-composition--daily,
.gm-composition--celebration {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  align-items: stretch;
}

.gm-composition--task,
.gm-composition--capture,
.gm-composition--decision,
.gm-composition--conversation {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  align-items: start;
}

.gm-composition--timeline,
.gm-composition--commerce,
.gm-composition--settings,
.gm-composition--instruction,
.gm-composition--review,
.gm-composition--status {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: start;
}

.gm-media-stage {
  position: relative;
  min-width: 0;
  min-height: var(--gm-scene-min);
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gm-rose) 42%, var(--gm-hairline));
  border-radius: var(--radius-card);
  background:
    radial-gradient(ellipse at 52% 32%, color-mix(in srgb, var(--gm-glow) 72%, transparent), transparent 45%),
    linear-gradient(155deg, rgba(82, 46, 36, .48), rgba(10, 6, 5, .96));
  box-shadow: 0 36px 110px rgba(0, 0, 0, .5), 0 0 72px color-mix(in srgb, var(--gm-glow) 78%, transparent);
}

.gm-media-stage::before,
.gm-media-stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--gm-peach) 46%, transparent);
  border-radius: 50%;
  opacity: .48;
}

.gm-media-stage::before { width: 72%; aspect-ratio: 1; right: -18%; top: -10%; transform: rotate(-18deg); box-shadow: 0 0 36px var(--gm-glow); }
.gm-media-stage::after { width: 46%; aspect-ratio: 1; left: -19%; bottom: -17%; opacity: .24; }
.gm-media-stage > img,
.gm-media-stage > video { width: 100%; height: 100%; min-height: inherit; display: block; object-fit: cover; object-position: center 22%; }
.gm-media-stage__overlay { position: absolute; z-index: 4; inset: auto 14px 14px; padding: 14px 16px; border: 1px solid var(--gm-hairline); border-radius: var(--radius-inner); background: linear-gradient(145deg, rgba(32, 18, 16, .78), rgba(9, 6, 5, .92)); backdrop-filter: blur(18px); }
.gm-media-stage__overlay h2 { margin: 3px 0 4px; font: 400 var(--type-h2)/1.02 var(--serif); letter-spacing: -.035em; }
.gm-media-stage__overlay p { max-width: 42ch; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

.gm-metric-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--gm-hairline);
  border-radius: var(--radius-card);
  background: var(--gm-hairline);
  box-shadow: var(--shadow-card);
}
.gm-metric-band > span { display: flex; min-width: 0; min-height: 72px; flex-direction: column; justify-content: center; padding: 12px 14px; background: linear-gradient(145deg, rgba(51, 29, 24, .96), rgba(17, 10, 9, .96)); }
.gm-metric-band small { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gm-metric-band b { margin-top: 5px; color: var(--gm-champagne); font: 400 clamp(22px, 2.6vw, 34px)/1 var(--serif); letter-spacing: -.03em; }
.gm-metric-band em { margin-left: 4px; color: var(--muted); font: 700 11px/1 var(--sans); font-style: normal; }

.context-action-tray {
  isolation: isolate;
  justify-content: space-between;
  min-height: 68px;
  padding: 8px 9px 8px 15px;
  border-color: color-mix(in srgb, var(--gm-rose) 35%, var(--gm-hairline));
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 86% 12%, rgba(255,255,255,.12), transparent 22%),
    linear-gradient(125deg, rgba(47, 26, 22, .88), rgba(11, 7, 6, .94));
  box-shadow: var(--shadow-raised), inset 0 1px 0 rgba(255,255,255,.08);
}
.context-action-tray__note { flex: 1 1 180px; max-width: 38ch; color: var(--muted); font-size: 12px; line-height: 1.4; }
.context-action-tray__actions { display: flex; flex: 0 1 auto; gap: 8px; align-items: center; }
.context-action-tray__actions .button { min-width: min(260px, 38vw); }
.context-action-tray__actions .button--secondary,
.context-action-tray__actions .button--ghost { min-width: auto; }

/* A quiet atmospheric identity per archetype. This provides depth without
 * turning routine screens into autoplaying decoration. */
.app-shell[data-gm-archetype="timeline"] .app-scroll,
.app-shell[data-gm-archetype="review"] .app-scroll,
.app-shell[data-gm-archetype="commerce"] .app-scroll,
.app-shell[data-gm-archetype="settings"] .app-scroll,
.app-shell[data-gm-archetype="instruction"] .app-scroll {
  background: radial-gradient(60% 52% at 96% 12%, color-mix(in srgb, var(--gm-glow) 32%, transparent), transparent 72%);
}

.app-shell[data-gm-concept] .app-header { position: relative; z-index: 2; }
.app-shell[data-gm-concept] .app-header--utility h1 { font-family: var(--serif); color: var(--gm-champagne); }
.app-shell[data-gm-concept] .app-header__subtitle { max-width: 44ch; }
.app-shell[data-gm-concept] .member-screen > .action-row:last-child { margin-top: auto; }

@media (max-width: 760px) {
  .gm-composition,
  .gm-composition--hero,
  .gm-composition--cinematic,
  .gm-composition--daily,
  .gm-composition--celebration,
  .gm-composition--task,
  .gm-composition--capture,
  .gm-composition--decision,
  .gm-composition--conversation,
  .gm-composition--timeline,
  .gm-composition--commerce,
  .gm-composition--settings,
  .gm-composition--instruction,
  .gm-composition--review,
  .gm-composition--status { grid-template-columns: minmax(0, 1fr); }

  .gm-composition { --gm-scene-min: clamp(300px, 48dvh, 430px); gap: 12px; }
  /* Keep the orbital art direction as a static ring on constrained mobile
   * compositors. Animating this large shadowed layer continuously competes
   * with LCP and the first presented frame after a route tap. */
  .gm-media-stage::before { animation: none !important; }
  .gm-media-stage__overlay { inset: auto 10px 10px; padding: 12px 13px; }
  .gm-metric-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-metric-band > span { min-height: 62px; padding: 10px 11px; }
  .gm-metric-band b { font-size: 24px; }
  .context-action-tray { bottom: calc(var(--app-nav-reserved, 100px) - 4px); margin-inline: 0; padding: 7px; }
  .context-action-tray__note { display: none; }
  .context-action-tray__actions { width: 100%; }
  .context-action-tray__actions .button { min-width: 0; }
  .app-shell[data-gm-concept] .app-header__subtitle { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
}

@media (prefers-reduced-motion: no-preference) {
  .gm-media-stage::before { animation: gm-orbit-drift 12s ease-in-out infinite alternate; }
  .button--primary::before { content: ""; position: absolute; inset: -100% auto -100% -35%; width: 24%; transform: rotate(18deg) translateX(-240%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); opacity: 0; }
  .button--primary:hover::before,
  .button--primary:focus-visible::before { animation: gm-button-glint 720ms ease-out; }
}

@keyframes gm-orbit-drift { to { transform: rotate(-10deg) translate3d(-2%, 2%, 0); opacity: .62; } }
@keyframes gm-button-glint { 0% { opacity: 0; transform: rotate(18deg) translateX(-240%); } 30% { opacity: .75; } 100% { opacity: 0; transform: rotate(18deg) translateX(700%); } }

@media (prefers-reduced-motion: reduce) {
  .gm-media-stage::before,
  .button--primary::before { animation: none !important; }
}

/* Route-specific editorial layouts for the utility half of the product. */
.app-shell[data-gm-concept="roadmap"] .member-screen,
.app-shell[data-gm-concept="change-future"] .member-screen,
.app-shell[data-gm-concept="membership"] .member-screen {
  display: grid;
  grid-template-columns: minmax(280px, .76fr) minmax(0, 1.24fr);
  align-content: start;
}

.app-shell[data-gm-concept="roadmap"] .app-header,
.app-shell[data-gm-concept="roadmap"] .roadmap-meta,
.app-shell[data-gm-concept="change-future"] .app-header,
.app-shell[data-gm-concept="membership"] .app-header,
.app-shell[data-gm-concept="membership"] #membership-error {
  grid-column: 1 / -1;
}

.app-shell[data-gm-concept="roadmap"] .roadmap-north-star,
.app-shell[data-gm-concept="change-future"] .change-future-stage,
.app-shell[data-gm-concept="membership"] .membership-identity-stage {
  min-height: min(62dvh, 650px);
  position: sticky;
  top: 0;
}

.app-shell[data-gm-concept="roadmap"] .timeline,
.app-shell[data-gm-concept="change-future"] .glass-card,
.app-shell[data-gm-concept="membership"] .membership-grid {
  min-width: 0;
}

.app-shell[data-gm-concept="roadmap"] .timeline-body,
.app-shell[data-gm-concept="history"] .review-card,
.app-shell[data-gm-concept="weekly-review"] .review-card,
.app-shell[data-gm-concept="membership"] .membership-card,
.app-shell[data-gm-concept="settings"] .settings-card,
.app-shell[data-gm-concept="install"] .review-card {
  padding: var(--card-pad);
}

.app-shell[data-gm-concept="roadmap"] .timeline-item.current .glass-card {
  border-color: color-mix(in srgb, var(--gm-rose) 55%, var(--gm-hairline));
  box-shadow: 0 20px 70px rgba(0,0,0,.3), 0 0 34px color-mix(in srgb, var(--gm-glow) 55%, transparent);
}

.app-shell[data-gm-concept="history"] .metrics-grid,
.app-shell[data-gm-concept="progress-twin"] .progress-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--gm-hairline);
  border-radius: var(--radius-card);
  background: var(--gm-hairline);
}

.app-shell[data-gm-concept="history"] .metrics-grid .glass-card,
.app-shell[data-gm-concept="progress-twin"] .progress-metrics .glass-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(145deg, rgba(52,29,24,.94), rgba(15,9,8,.96));
}

.app-shell[data-gm-concept="history"] #history-progress {
  padding: var(--card-pad);
  border: 1px solid var(--gm-hairline);
  border-radius: var(--radius-card);
  background: linear-gradient(145deg, rgba(49,28,23,.54), rgba(10,7,6,.76));
}

.app-shell[data-gm-concept="history"] .history-strip {
  gap: 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.app-shell[data-gm-concept="history"] .history-thumb {
  scroll-snap-align: start;
  border-color: color-mix(in srgb, var(--gm-rose) 34%, var(--gm-hairline));
  box-shadow: 0 16px 38px rgba(0,0,0,.26);
}

.app-shell[data-gm-concept="future-film"] .film-player {
  position: relative;
  min-height: min(62dvh, 660px);
  aspect-ratio: auto;
  border-radius: var(--radius-card);
  border-color: color-mix(in srgb, var(--gm-rose) 44%, var(--gm-hairline));
  box-shadow: 0 34px 100px rgba(0,0,0,.52), 0 0 70px color-mix(in srgb, var(--gm-glow) 58%, transparent);
}

.app-shell[data-gm-concept="future-film"] .member-screen > .action-row,
.app-shell[data-gm-concept="phase-complete"] .member-screen > .action-row {
  align-items: center;
  padding: 8px;
  border: 1px solid var(--gm-hairline);
  border-radius: var(--radius-card);
  background: rgba(14,8,7,.78);
  box-shadow: var(--shadow-raised);
}
/* An action row that lives inside a card is the card's footer, not a second
   floating container: a hairline divider separates it from the content. */
.app-shell[data-gm-concept="change-future"] .review-card > .action-row,
.app-shell[data-gm-concept="weekly-review"] .review-card > .action-row {
  align-items: center;
  margin-top: var(--space-4);
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--gm-hairline);
}

.app-shell[data-gm-concept="phase-complete"] .phase-demo-stage {
  min-height: min(56dvh, 620px);
}

.app-shell[data-gm-concept="phase-complete"] .twin-grid {
  position: relative;
  padding: 7px;
  border-radius: var(--radius-card);
  background: linear-gradient(145deg, rgba(239,120,134,.12), rgba(255,255,255,.015));
}

.app-shell[data-gm-concept="stack"] .product-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.app-shell[data-gm-concept="stack"] .product-art {
  height: 210px;
  border: 1px solid var(--gm-hairline);
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--gm-glow) 80%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(84,46,35,.42), rgba(10,7,6,.84));
}
.app-shell[data-gm-concept="stack"] .product-art img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.app-shell[data-gm-concept="stack"] .product-art__empty { display: grid; width: 100%; height: 100%; place-items: center; color: var(--gm-peach); }
.app-shell[data-gm-concept="stack"] .product-price { display: block; margin: 6px 0 3px; color: var(--gm-champagne); font: 400 25px/1 var(--serif); }

.app-shell[data-gm-concept="membership"] .membership-grid {
  grid-template-columns: 1fr;
}

.app-shell[data-gm-concept="membership"] .membership-card .metric-value {
  margin-block: 10px;
  font-size: clamp(58px, 8vw, 102px);
  letter-spacing: -.06em;
  text-shadow: 0 0 36px var(--gm-glow);
}

.app-shell[data-gm-concept="settings"] .profile-row {
  grid-template-columns: minmax(160px, .55fr) minmax(0, 1.45fr);
  gap: 22px;
}

.app-shell[data-gm-concept="settings"] .coach-preferences-card {
  border-color: color-mix(in srgb, var(--gm-rose) 36%, var(--gm-hairline));
  background: linear-gradient(145deg, rgba(84,46,42,.34), rgba(12,8,7,.72));
}

.app-shell[data-gm-concept="settings"] .presentation-choice {
  min-height: 72px;
}

.app-shell[data-gm-concept="install"] .glass-card {
  max-width: 860px;
  width: 100%;
  margin-inline: auto;
}

.app-shell[data-gm-concept="install"] .review-card {
  min-height: min(62dvh, 600px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    radial-gradient(ellipse at 50% 22%, color-mix(in srgb, var(--gm-glow) 76%, transparent), transparent 28%),
    linear-gradient(160deg, rgba(76,43,34,.34), rgba(11,7,6,.9));
}

.install-device-scene { display: grid; place-items: center; min-height: 260px; margin: -8px 0 20px; }
.install-device { position: relative; width: min(210px, 54vw); aspect-ratio: 9 / 16; padding: 10px; border: 1px solid color-mix(in srgb, var(--gm-peach) 48%, var(--gm-hairline)); border-radius: 34px; background: linear-gradient(150deg, #30201c, #090605); box-shadow: 0 30px 80px rgba(0,0,0,.48), 0 0 52px var(--gm-glow), inset 0 1px 0 rgba(255,255,255,.14); transform: perspective(900px) rotateY(-7deg) rotateX(2deg); }
.install-device__camera { position: absolute; z-index: 2; top: 16px; left: 50%; width: 42%; height: 18px; border-radius: 999px; background: #070505; transform: translateX(-50%); }
.install-device__screen { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border-radius: 25px; background: radial-gradient(circle at 50% 38%, var(--gm-glow), transparent 34%), linear-gradient(160deg, #4a2a22, #0b0706 70%); text-align: center; }
.install-device__screen .icon { width: 38px; height: 38px; color: var(--gm-peach); filter: drop-shadow(0 0 16px var(--gm-glow)); }
.install-device__screen b { font-size: 17px; letter-spacing: -.04em; }
.install-device__screen span { max-width: 16ch; color: var(--muted); font-size: 11px; line-height: 1.4; }
.install-platform-pills { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 13px; }
.install-platform-pills span { display: inline-flex; align-items: center; min-height: var(--tag-h); padding: 0 var(--tag-pad); border: 1px solid var(--x-hair-strong); border-radius: var(--radius-pill); color: var(--gm-champagne); font-size: var(--tag-fs); font-weight: var(--tag-fw); }

.generation-demo-pair {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(640px, 100%);
  min-height: min(54dvh, 560px);
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gm-rose) 42%, var(--gm-hairline));
  border-radius: var(--radius-card);
  box-shadow: 0 34px 100px rgba(0,0,0,.5), 0 0 60px color-mix(in srgb, var(--gm-glow) 60%, transparent);
}
.generation-demo-pair > div { position: relative; min-width: 0; overflow: hidden; }
.generation-demo-pair img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.generation-demo-pair > div > span { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 7px 9px; border: 1px solid var(--gm-hairline); border-radius: 999px; background: rgba(9,6,5,.78); font-size: 11px; font-weight: 800; }
.generation-demo-pair .demo-media-badge { position: absolute; z-index: 4; top: 10px; }

@media (min-width: 761px) {
  .generation-stage:has(.generation-demo-pair) { grid-template-columns: minmax(360px, 1.15fr) minmax(300px, .85fr); gap: 34px; text-align: left; }
}

@media (max-width: 760px) {
  .app-shell[data-gm-concept="roadmap"] .member-screen,
  .app-shell[data-gm-concept="change-future"] .member-screen,
  .app-shell[data-gm-concept="membership"] .member-screen { display: flex; }
  .app-shell[data-gm-concept="roadmap"] .roadmap-north-star,
  .app-shell[data-gm-concept="change-future"] .change-future-stage,
  .app-shell[data-gm-concept="membership"] .membership-identity-stage,
  .app-shell[data-gm-concept="phase-complete"] .phase-demo-stage { position: relative; top: auto; }
  .app-shell[data-gm-concept="history"] .metrics-grid,
  .app-shell[data-gm-concept="progress-twin"] .progress-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .app-shell[data-gm-concept="future-film"] .film-player { min-height: clamp(300px, 48dvh, 430px); }
  .app-shell[data-gm-concept="future-film"] .member-screen > .action-row,
  .app-shell[data-gm-concept="phase-complete"] .member-screen > .action-row { position: sticky; bottom: calc(var(--app-nav-reserved, 100px) - 4px); z-index: 12; }
  .app-shell[data-gm-concept="settings"] .profile-row { grid-template-columns: 1fr; }
  .app-shell[data-gm-concept="settings"] .settings-card > .action-row { display: grid; grid-template-columns: 1fr; }
  .app-shell[data-gm-concept="settings"] .settings-card > .action-row > .button { width: 100%; min-width: 0; }
  .generation-stage:has(.generation-demo-pair) { align-content: start; gap: 16px; }
  .generation-demo-pair { min-height: 42dvh; }
}

/* Screen modules already own their internal grids. The contract wrapper is a
 * semantic/art-direction boundary, not another layout column; nesting a
 * second grid here would squeeze every route into the first implicit cell. */
.gm-composition { display: block; }
.gm-composition > :only-child { width: 100%; }
.member-composition { display: flex; flex-direction: column; gap: inherit; min-height: 100%; }

/* Reference 01 is a single editorial composition. Keep its media between the
 * promise and the decision on phones; placing every action before the image
 * reduced the product to a marketing page and pushed the actual transformation
 * below the fold. Desktop retains the same content in a two-column scene. */
.public-shell [data-gm-concept="hero"] .landing {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr);
  grid-template-areas:
    "intro visual"
    "actions visual"
    "trust visual";
  grid-template-rows: auto auto 1fr;
  align-content: center;
  align-items: start;
}
.public-shell [data-gm-concept="hero"] .landing-intro { grid-area: intro; align-self: end; }
.public-shell [data-gm-concept="hero"] .landing-visual { grid-area: visual; }
.public-shell [data-gm-concept="hero"] .landing-actions { grid-area: actions; margin-top: 24px; }
.public-shell [data-gm-concept="hero"] .trust-row { grid-area: trust; margin-top: 20px; align-self: start; }

@media (max-width: 760px) {
  .public-shell [data-gm-concept="hero"] .landing {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "visual" "actions" "trust";
    grid-template-rows: auto auto auto auto;
    gap: 11px;
    padding: 2px 0 16px;
  }
  .public-shell [data-gm-concept="hero"] .landing-copy h1 { margin: 7px 0 8px; font-size: clamp(41px, 11.6vw, 48px); line-height: .88; }
  .public-shell [data-gm-concept="hero"] .landing-copy > p { max-width: 39ch; font-size: 13px; line-height: 1.45; }
  .public-shell [data-gm-concept="hero"] .landing-visual,
  .public-shell [data-gm-concept="hero"] .landing-stage,
  .public-shell [data-gm-concept="hero"] .future-stage { width: 100%; height: 350px; min-height: 350px; }
  .public-shell [data-gm-concept="hero"] .landing-actions { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 1px; }
  .public-shell [data-gm-concept="hero"] .landing-actions .button { min-height: 48px; }
  .public-shell [data-gm-concept="hero"] .trust-row { gap: 8px 13px; margin-top: 0; font-size: 10px; }
  .public-shell [data-gm-concept="hero"] .ambient-ring { width: 74%; }
}

@media (max-width: 410px) {
  .public-shell [data-gm-concept="hero"] .landing-visual,
  .public-shell [data-gm-concept="hero"] .landing-stage,
  .public-shell [data-gm-concept="hero"] .future-stage { height: 330px; min-height: 330px; }
}

/* Capture is a camera task. Put the framed subject before explanatory cards,
 * then the two source controls and commit action; guidance follows instead of
 * consuming the first fold. */
@media (max-width: 760px) {
  .public-shell [data-gm-concept="capture"] .flow-screen { gap: 12px; padding-top: 0; }
  .public-shell [data-gm-concept="capture"] .flow-screen h1 { margin-top: 4px; font-size: clamp(40px, 11vw, 48px); }
  .public-shell [data-gm-concept="capture"] .flow-screen .lead { margin: 7px 0 0; font-size: 13px; line-height: 1.45; }
  .public-shell [data-gm-concept="capture"] .capture-grid { gap: var(--gap-cards); }
  .public-shell [data-gm-concept="capture"] .capture-stage,
  .public-shell [data-gm-concept="capture"] .capture-well { min-height: 350px; }
  .public-shell [data-gm-concept="capture"] .capture-side { order: initial; gap: var(--gap-cards); }
  .public-shell [data-gm-concept="capture"] .capture-side > .action-row { order: 1; display: grid; grid-template-columns: 1fr 1fr; }
  .public-shell [data-gm-concept="capture"] .capture-side > .context-action-tray { order: 2; }
  .public-shell [data-gm-concept="capture"] .capture-side > .capture-tip { order: 3; }
  .public-shell [data-gm-concept="capture"] .capture-side > #capture-error { order: 2; }
  .public-shell [data-gm-concept="capture"] .context-action-tray__note { display: none; }
  .public-shell [data-gm-concept="capture"] .context-action-tray__actions,
  .public-shell [data-gm-concept="capture"] #capture-submit { width: 100%; }
}

/* Final reference-parity pass. These rules correct rendered hierarchy found
 * in the 390px evidence rather than adding decorative bulk. */
.app-screen--app-check-in .checkin-photo,
.review-media-receipt--demo { position: relative; }

.app-screen--app-history .history-thumb > .demo-media-badge {
  top: 8px;
  right: auto;
  bottom: auto;
  left: 8px;
  width: auto;
  height: auto;
  padding: 5px 7px;
  white-space: nowrap;
}

.app-screen--app-future-film .film-stills > .demo-media-badge {
  top: 10px;
  right: auto;
  bottom: auto;
  left: 10px;
  width: auto;
  height: auto;
  padding: 5px 7px;
  white-space: nowrap;
}

.stack-empty-scene {
  position: relative;
  display: flex;
  min-height: min(68dvh, 680px);
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
  padding: clamp(24px, 5vw, 58px);
  border: 1px solid color-mix(in srgb, var(--gm-rose) 36%, var(--gm-hairline));
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 50% 26%, color-mix(in srgb, var(--gm-glow) 92%, transparent), transparent 22%),
    radial-gradient(circle at 50% 26%, rgba(255,255,255,.06), transparent 35%),
    linear-gradient(155deg, rgba(66,36,30,.54), rgba(10,6,5,.96));
  box-shadow: 0 34px 100px rgba(0,0,0,.48), 0 0 62px color-mix(in srgb, var(--gm-glow) 58%, transparent);
}
.stack-empty-scene::before,
.stack-empty-scene::after {
  content: "";
  position: absolute;
  top: 8%;
  left: 50%;
  width: min(42vw, 330px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--gm-peach) 34%, transparent);
  border-radius: 50%;
  pointer-events: none;
  transform: translateX(-50%) rotate(-14deg);
  box-shadow: 0 0 42px var(--gm-glow);
}
.stack-empty-scene::after { width: min(29vw, 220px); top: 15%; opacity: .5; transform: translateX(-50%) rotate(22deg); }
.stack-empty-scene > * { position: relative; z-index: 2; }
.stack-empty-orbit { position: absolute; top: 18%; left: 50%; display: grid; width: 92px; height: 92px; place-items: center; border: 1px solid var(--gm-hairline); border-radius: 50%; color: var(--gm-peach); background: rgba(12,7,6,.7); box-shadow: 0 0 44px var(--gm-glow); transform: translateX(-50%); }
.stack-empty-orbit .icon { width: 34px; height: 34px; }
.stack-empty-scene h2 { max-width: 9ch; margin: 0; color: var(--gm-champagne); font: 400 clamp(42px, 6vw, 72px)/.9 var(--serif); letter-spacing: -.05em; }
.stack-empty-scene p { max-width: 50ch; margin: 0; color: var(--muted); line-height: 1.55; }
.stack-criteria { display: flex; gap: 7px; flex-wrap: wrap; }
.stack-criteria span { display: inline-flex; min-height: var(--tag-h); align-items: center; gap: 7px; padding: 0 var(--tag-pad); border: 1px solid var(--x-hair-strong); border-radius: var(--radius-pill); color: var(--gm-champagne); font-size: var(--tag-fs); font-weight: var(--tag-fw); }
.stack-criteria .icon { width: 15px; color: var(--gm-rose); }

/* Reveal follows the reference's emotional sequence: promise, future image,
 * proof/action. The source photo stays a small receipt, never a rival hero. */
.public-shell [data-gm-concept="reveal"] .reveal-layout { align-items: start; }
.public-shell [data-gm-concept="reveal"] .reveal-stage { grid-row: 1 / span 2; }
.public-shell [data-gm-concept="reveal"] .reveal-intro,
.public-shell [data-gm-concept="reveal"] .reveal-copy { grid-column: 2; }
.public-shell [data-gm-concept="reveal"] .reveal-intro { display: flex; flex-direction: column; gap: 15px; align-self: end; }
.public-shell [data-gm-concept="reveal"] .reveal-intro h1 { margin: 0; color: var(--gm-champagne); font: 400 clamp(60px,6.6vw,104px)/.86 var(--serif); letter-spacing: -.055em; }
.public-shell [data-gm-concept="reveal"] .reveal-intro .lead { margin: 0; }
.reveal-current-inset { position: absolute; z-index: 5; top: 18px; left: 18px; width: clamp(74px,16%,112px); margin: 0; overflow: hidden; border: 1px solid var(--gm-hairline); border-radius: var(--radius-inner); background: #0b0807; box-shadow: 0 16px 40px rgba(0,0,0,.42); }
.reveal-current-inset img { position: static; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; object-position: center 20%; }
.reveal-current-inset figcaption { padding: 6px 8px; color: var(--gm-champagne); font-size: 11px; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: .12em; }
.roadmap-actions { min-width: 0; }

@media (min-width: 761px) {
  .app-shell[data-gm-concept="roadmap"] .roadmap-actions { grid-column: 2; }
}

@media (max-width: 760px) {
  .app-scroll { scrollbar-width: none; }
  .app-scroll::-webkit-scrollbar { display: none; }

  /* The active movement, not the exercise index, owns the first workout fold. */
  .app-screen--app-workout .workout-layout { display: flex; flex-direction: column; }
  .app-screen--app-workout .workout-layout > .glass-card { order: -1; }
  .app-screen--app-workout .exercise-media-slot img { object-position: center 34%; }
  .app-screen--app-workout .exercise-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .app-screen--app-workout .exercise-row { grid-template-columns: 36px minmax(0,1fr); }
  .app-screen--app-workout .exercise-state { display: none; }

  /* Nutrition is a media-led daily surface; metrics follow the visual anchor. */
  .app-screen--app-nutrition .nutrition-visual-slot { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; }
  .app-screen--app-nutrition .nutrition-visual-slot > img { width: 100%; height: 100%; border: 0; border-radius: inherit; object-fit: cover; object-position: center 25%; }
  .app-screen--app-nutrition .nutrition-visual-slot > div:last-child { position: absolute; right: 10px; bottom: 10px; left: 10px; padding: 11px 13px; border: 1px solid var(--gm-hairline); border-radius: var(--radius-inner); background: linear-gradient(145deg,rgba(37,20,17,.75),rgba(9,6,5,.9)); backdrop-filter: blur(16px); }
  .app-screen--app-nutrition .nutrition-visual-slot > div:last-child p { color: var(--text); }

  /* Ally should feel like a person, not a tiny avatar glued to a web chat. */
  .app-screen--app-coach .chat-header { min-height: 196px; flex-direction: column; justify-content: center; gap: 12px; text-align: center; background: radial-gradient(circle at 50% 42%, color-mix(in srgb,var(--gm-glow) 82%,transparent), transparent 42%); }
  .app-screen--app-coach .coach-avatar { width: 126px; height: 126px; border-color: color-mix(in srgb,var(--gm-rose) 58%,var(--gm-hairline)); box-shadow: 0 0 0 10px rgba(239,120,134,.07), 0 0 54px var(--gm-glow); }
  .app-screen--app-coach .coach-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

  /* Reference 02 is about three visual choices, not a text list. */

  .public-shell [data-gm-concept="reveal"] .reveal-layout { display: flex; flex-direction: column; }
  .public-shell [data-gm-concept="reveal"] .reveal-intro,
  .public-shell [data-gm-concept="reveal"] .reveal-stage,
  .public-shell [data-gm-concept="reveal"] .reveal-copy { width: 100%; grid-column: auto; grid-row: auto; order: 0; }
  .public-shell [data-gm-concept="reveal"] .reveal-intro h1 { font-size: 54px; }
  .public-shell [data-gm-concept="reveal"] .reveal-copy { gap: 12px; }
  .reveal-current-inset { top: 12px; left: 12px; width: 78px; }
  .app-shell[data-gm-concept="future-film"] .member-screen > .action-row:last-child { position: static; margin-top: 0; }
  .app-shell[data-gm-concept="weekly-review"] .review-card > .action-row { align-items: stretch; }
  .app-shell[data-gm-concept="weekly-review"] .review-card > .action-row .button:first-child { flex: 1.5; }
  .app-shell[data-gm-concept="weekly-review"] .review-card > .action-row .button:last-child { flex: .7; }

  .app-shell[data-gm-concept="roadmap"] .roadmap-north-star { min-height: 320px; max-height: 320px; }
  /* Keep the phase proof and its first forward action in the initial 430x900 fold. */
  /* Portrait aspect ratio must not push billing management below the first fold. */
  .app-shell[data-gm-concept="weekly-review"] .review-card > .action-row { position: static; }
  .stack-empty-scene { min-height: 610px; padding: 24px 20px 26px; }
  .stack-empty-scene::before { width: 250px; }
  .stack-empty-scene::after { width: 174px; }
}

/* Acquisition is a sequence of decisions, not a sequence of tall posters.
 * At phone width, retain the warm proof image but reserve a persistent,
 * safe-area-aware decision zone. This is deliberately scoped to the five
 * acquisition screens: member navigation and other public forms keep their
 * normal document flow. */
@media (max-width: 760px) {
  .public-shell:has([data-gm-concept="choose"]) .public-scroll,
  .public-shell:has([data-gm-concept="refine"]) .public-scroll,
  .public-shell:has([data-gm-concept="reveal"]) .public-scroll,
  .public-shell:has([data-gm-concept="paywall"]) .public-scroll,
  .public-shell:has([data-gm-concept="lock-in"]) .public-scroll {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  .public-shell [data-gm-concept="choose"] .context-action-tray,
  .public-shell [data-gm-concept="refine"] .context-action-tray,
  .public-shell [data-gm-concept="reveal"] .context-action-tray,
  .public-shell [data-gm-concept="paywall"] .context-action-tray,
  .public-shell [data-gm-concept="lock-in"] .context-action-tray {
    position: fixed;
    z-index: 24;
    inset-inline: 15px;
    bottom: max(10px, env(safe-area-inset-bottom));
    margin: 0;
  }
  .public-shell[data-gm-concept="lock-in"] .context-action-tray {
    position: fixed;
    z-index: 24;
    inset-inline: 15px;
    bottom: max(10px, env(safe-area-inset-bottom));
    margin: 0;
  }

  .public-shell [data-gm-concept="choose"] .future-layout {
    display: flex;
    min-height: auto;
    flex-direction: column;
    gap: 12px;
  }
  .public-shell [data-gm-concept="choose"] .future-panel { order: -1; gap: 8px; }
  .public-shell [data-gm-concept="choose"] .future-panel h1 {
    max-width: 13ch;
    margin: 2px 0;
    font-size: clamp(37px, 10vw, 44px);
    line-height: .91;
  }
  .public-shell [data-gm-concept="choose"] .future-panel > .lead {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.38;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .public-shell [data-gm-concept="choose"] .variant-list {
    display: grid;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .public-shell [data-gm-concept="choose"] .variant-list::-webkit-scrollbar { display: none; }
  .public-shell [data-gm-concept="choose"] .variant {
    grid-template-columns: 62px minmax(0, 1fr) auto;
    scroll-snap-align: start;
  }
  .public-shell [data-gm-concept="choose"] .compare-card { min-height: 320px; }

  .public-shell [data-gm-concept="refine"] .flow-screen { gap: 10px; padding-top: 0; }
  .public-shell [data-gm-concept="refine"] .flow-screen > :first-child h1 {
    max-width: 12ch;
    margin: 3px 0 0;
    font-size: clamp(38px, 10vw, 44px);
    line-height: .9;
  }
  .public-shell [data-gm-concept="refine"] .refine-layout { display: flex; flex-direction: column; gap: var(--gap-cards); }
  .public-shell [data-gm-concept="refine"] .control-card h2,
  .public-shell [data-gm-concept="refine"] .control-heading { margin: 2px 0 8px; }
  .public-shell [data-gm-concept="refine"] .refine-stage,
  .public-shell [data-gm-concept="refine"] .preview-tile { min-height: 192px; height: 192px; }

  .public-shell [data-gm-concept="reveal"] .flow-screen { gap: 10px; padding-top: 0; }
  .public-shell [data-gm-concept="reveal"] .reveal-layout { gap: 10px; }
  .public-shell [data-gm-concept="reveal"] .reveal-intro { gap: 7px; }
  .public-shell [data-gm-concept="reveal"] .reveal-intro h1 { margin: 0; font-size: clamp(43px, 12vw, 52px); }
  .public-shell [data-gm-concept="reveal"] .reveal-intro .lead { display: -webkit-box; overflow: hidden; font-size: 13px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .public-shell [data-gm-concept="reveal"] .reveal-stage,
  .public-shell [data-gm-concept="reveal"] .reveal-visual { min-height: 450px; }
  .public-shell [data-gm-concept="reveal"] .reveal-summary { display: none; }

  .public-shell [data-gm-concept="paywall"] .flow-screen { gap: 10px; padding-top: 0; }
  .public-shell [data-gm-concept="paywall"] .acquisition-heading h1 {
    margin: 3px 0 0;
    font-size: clamp(37px, 10vw, 44px);
    line-height: .9;
  }
  .public-shell [data-gm-concept="paywall"] .unlock-layout { display: flex; flex-direction: column; gap: var(--gap-cards); }
  .public-shell [data-gm-concept="paywall"] .checkout-shell { order: -1; }
  .public-shell [data-gm-concept="paywall"] .checkout-card { gap: var(--space-3); }
  .public-shell [data-gm-concept="paywall"] .checkout-card h1 { margin: 2px 0; font-size: 34px; }
  .public-shell [data-gm-concept="paywall"] .checkout-card .muted { margin: 0; font-size: 12px; line-height: 1.35; }
  .public-shell [data-gm-concept="paywall"] .feature-list { gap: 6px; }
  .public-shell [data-gm-concept="paywall"] .feature-list span { font-size: 12px; }
  .public-shell [data-gm-concept="paywall"] .checkout-more-inclusions { display: none; }
  .public-shell [data-gm-concept="paywall"] .plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .public-shell [data-gm-concept="paywall"] .plan-grid .choice-pill { display: flex; min-width: 0; min-height: 58px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 10px; text-align: left; }
  .public-shell [data-gm-concept="paywall"] .plan-grid .choice-pill b,
  .public-shell [data-gm-concept="paywall"] .plan-grid .choice-pill small { display: block; max-width: 100%; line-height: 1.15; }
  .public-shell [data-gm-concept="paywall"] .plan-grid .choice-pill small { font-size: 11px; white-space: normal; }
  .public-shell [data-gm-concept="paywall"] .unlock-stage,
  .public-shell [data-gm-concept="paywall"] .preview-tile { min-height: 300px; }

  .public-shell [data-gm-concept="lock-in"] .flow-screen { padding-top: 0; }
  .public-shell[data-gm-concept="lock-in"] .flow-screen { padding-top: 0; }
  .public-shell [data-gm-concept="lock-in"] .lock-layout,
  .public-shell[data-gm-concept="lock-in"] .lock-layout { display: flex; flex-direction: column; gap: var(--gap-cards); }
  .public-shell [data-gm-concept="lock-in"] .commitment-card { min-height: 214px; }
  .public-shell[data-gm-concept="lock-in"] .commitment-card { min-height: 214px; }
  .public-shell [data-gm-concept="lock-in"] .commitment-pane { min-height: 178px; }
  .public-shell[data-gm-concept="lock-in"] .commitment-pane { min-height: 178px; }
  .public-shell [data-gm-concept="lock-in"] .lock-card,
  .public-shell[data-gm-concept="lock-in"] .lock-card { gap: var(--space-3); }
  .public-shell [data-gm-concept="lock-in"] .lock-intro { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 11px; align-items: center; }
  .public-shell[data-gm-concept="lock-in"] .lock-intro { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 11px; align-items: center; }
  .public-shell [data-gm-concept="lock-in"] .lock-seal { width: 54px; height: 54px; grid-row: span 3; }
  .public-shell[data-gm-concept="lock-in"] .lock-seal { width: 54px; height: 54px; grid-row: span 3; }
  .public-shell [data-gm-concept="lock-in"] .lock-seal .icon { width: 22px; height: 22px; }
  .public-shell[data-gm-concept="lock-in"] .lock-seal .icon { width: 22px; height: 22px; }
  .public-shell [data-gm-concept="lock-in"] .lock-intro .eyebrow,
  .public-shell [data-gm-concept="lock-in"] .lock-intro h1,
  .public-shell [data-gm-concept="lock-in"] .lock-intro .lead { grid-column: 2; }
  .public-shell[data-gm-concept="lock-in"] .lock-intro .eyebrow,
  .public-shell[data-gm-concept="lock-in"] .lock-intro h1,
  .public-shell[data-gm-concept="lock-in"] .lock-intro .lead { grid-column: 2; }
  .public-shell [data-gm-concept="lock-in"] .lock-intro h1,
  .public-shell[data-gm-concept="lock-in"] .lock-intro h1 { margin: 1px 0 3px; font-size: 34px; line-height: 1.04; }
  .public-shell [data-gm-concept="lock-in"] .lock-intro .lead { margin: 0; font-size: 12px; line-height: 1.35; }
  .public-shell[data-gm-concept="lock-in"] .lock-intro .lead { margin: 0; font-size: 12px; line-height: 1.35; }
}

/* Cascade-terminal overrides for the member corrections declared with the
 * foundation tokens above. Keep these after every historical compact rule. */
.button--primary::after {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: currentColor;
  clip-path: polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);
}

@media (max-width: 760px) {
  /* The journey rail already communicates Day 1 → Today → Future. Repeating
   * Path/Destination immediately below it adds a full card row before the
   * daily action and caused the mission sheet to collide with the dock. */
  .app-shell[data-gm-concept="home"] .gm-metric-band { display: none; }
  .app-shell[data-gm-concept] .app-header { box-sizing: border-box; width: 100%; padding-right: 52px; }
  .app-shell[data-gm-concept] .app-header > div { min-width: 0; max-width: 100%; }
  .app-shell[data-gm-concept] .app-header h1 { max-width: 100%; overflow-wrap: anywhere; }
  .app-shell[data-gm-concept="program-ready"] .mission-card .action-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
  .app-shell[data-gm-concept="program-ready"] .mission-card .action-row .button { min-width: 0; min-height: var(--control-h-sm); padding-inline: var(--control-pad-sm); font-size: var(--control-fs-sm); white-space: nowrap; }
  .app-shell[data-gm-concept="weekly-review"] .review-card > .action-row .button { min-width: 0; min-height: var(--control-h-sm); padding-inline: var(--control-pad-sm); font-size: var(--control-fs-sm); white-space: nowrap; }
  .app-screen--app-workout .exercise-media-slot,
  .app-screen--app-workout .exercise-media-slot img { min-height: 210px; height: 210px; }
  .app-screen--app-nutrition .nutrition-visual-slot { height: 230px; }
  .app-screen--app-coach .chat-feed { min-height: 118px; }
  .app-shell[data-gm-concept="phase-complete"] .phase-demo-stage { min-height: 280px; max-height: 280px; }
  .app-shell[data-gm-concept="membership"] .membership-identity-stage,
  .app-shell[data-gm-concept="membership"] .membership-identity-stage > img { height: 278px; min-height: 278px; max-height: 278px; }
  .app-shell[data-gm-concept="change-future"] .context-action-tray__actions,
  .app-shell[data-gm-concept="install"] .install-actions { display: grid; grid-template-columns: 1fr; }
  .app-shell[data-gm-concept="change-future"] .context-action-tray__actions .button,
  .app-shell[data-gm-concept="install"] .install-actions .button { width: 100%; min-width: 0; white-space: nowrap; }
  .app-shell[data-gm-concept="settings"] .settings-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-shell[data-gm-concept="settings"] .settings-fields > :nth-child(-n+2),
  .app-shell[data-gm-concept="settings"] .settings-fields > .full { grid-column: 1 / -1; }
  .app-shell[data-gm-concept="settings"] .settings-card > .action-row {
    position: sticky;
    z-index: 12;
    bottom: calc(var(--app-nav-reserved,100px) - 4px);
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--gm-rose) 35%, var(--gm-hairline));
    border-radius: var(--radius-card);
    background: linear-gradient(125deg, rgba(40, 23, 20, .97), rgba(12, 8, 7, .98));
    box-shadow: var(--shadow-raised);
    backdrop-filter: blur(18px);
  }
  .app-shell[data-gm-concept="install"] .review-card { min-height: 0; }
  .app-shell[data-gm-concept="install"] .install-device-scene { min-height: 190px; margin-bottom: 10px; }
  .app-shell[data-gm-concept="install"] .install-device { width: min(132px,36vw); }
  .app-shell[data-gm-concept="install"] .review-card h2 { margin-block: 4px 8px; }
  .app-shell[data-gm-concept="install"] .feature-list { gap: 5px; }
  .app-shell[data-gm-concept="install"] .install-status { margin: 0; font-size: 11px; }
}

@media (min-width: 761px) and (max-width: 849px) {
  /* Preserve the cinematic tablet stack while keeping its action sheet inside
   * the tested first-fold budget. */
  .hero-grid--media-first > .glass-card:first-child { margin-top: -68px; }
}

/* Home / Mission Control — the reference is a tall editorial future scene
 * with the member's next commitment resting in its lower third. This remains
 * a coded, server-authorised media slot: demo preview labels stay visible and
 * empty/live states retain their honest fallback instead of borrowing people
 * or copy from the Golden Master raster. */
@media (max-width: 760px) {
  .app-shell[data-gm-concept="home"] .app-header h1 {
    font-size: clamp(43px, 12.3vw, 50px);
    line-height: .86;
    letter-spacing: -.055em;
  }

  .app-shell[data-gm-concept="home"] .journey-rail {
    margin-block: 2px 12px;
    padding-block: 8px;
  }

  .app-shell[data-gm-concept="home"] .hero-grid--media-first > .glass-card:last-child:not(.future-card--empty),
  .app-shell[data-gm-concept="home"] .hero-grid--media-first > .glass-card:last-child:not(.future-card--empty) .future-mini {
    height: clamp(430px, 53dvh, 462px);
    min-height: clamp(430px, 53dvh, 462px);
  }

  /* The stage badge is proof that this is labelled fixture media. Keep it in
   * the clear upper edge while the Future Form context becomes a lower-third
   * overlay, matching the editorial scene without misrepresenting ownership. */
  .app-shell[data-gm-concept="home"] .future-mini-overlay {
    top: auto;
    right: 13px;
    bottom: 13px;
    left: 13px;
    padding: 13px 14px;
  }

  .app-shell[data-gm-concept="home"] .future-mini .demo-media-badge {
    top: 13px;
    left: 13px;
  }

  .app-shell[data-gm-concept="home"] .hero-grid--media-first > .glass-card:first-child {
    margin: -222px 13px 0;
    border-color: color-mix(in srgb, var(--gm-peach) 36%, var(--line));
    box-shadow: var(--shadow-raised);
  }

  .app-shell[data-gm-concept="home"] .mission-card h2 { font-size: clamp(33px, 9vw, 39px); }
  .app-shell[data-gm-concept="home"] .mission-card > p { max-width: 32ch; }
  .app-shell[data-gm-concept="home"] .mission-card .action-row { grid-template-columns: minmax(0, 1fr) 90px; gap: 8px; margin-top: 14px; }
  /* Coach remains a named, reachable secondary action. It is intentionally
   * quieter than Start mission, not replaced by an unlabeled icon. */
  .app-shell[data-gm-concept="home"] .mission-card .button--ghost { min-height: var(--control-h-sm); justify-content: center; font-size: var(--control-fs-sm); }
  .app-shell[data-gm-concept="home"] .mission-card .mission-meta { margin-top: 10px; }

  /* Summary cards deliberately begin after the floating dock. The rail and
   * mission are the first decision surface; metrics remain present on scroll. */
  .app-shell[data-gm-concept="home"] .metrics-grid { margin-top: 20px; }
}

/* Three progress states must read together on a phone. This is a compact
 * triptych, not a swipe pager: each card still keeps its own authorised image
 * or explicit empty/error state. */
@media (max-width: 760px) {
  .app-screen--app-progress .twin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-right: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .app-screen--app-progress .twin-grid > .glass-card { flex: initial; min-width: 0; }

  .app-screen--app-progress .twin-card {
    min-width: 0;
    min-height: 248px;
    height: 248px;
    border-radius: var(--radius-inner);
  }

  .app-screen--app-progress .twin-caption {
    right: 7px;
    bottom: 7px;
    left: 7px;
    padding: 8px;
    border-radius: var(--radius-inner-min);
  }

  .app-screen--app-progress .twin-caption b { font-size: 13px; line-height: 1.05; }
  .app-screen--app-progress .twin-card--empty .twin-caption .button { min-height: 44px; padding-inline: 7px; font-size: 10px; }

  /* Validated form guidance earns a poster-sized active-set scene. Empty
   * guidance deliberately stays a small status card: enlarging it would imply
   * a reviewed image exists when the API did not return one. */
  .app-screen--app-workout .member-screen { gap: 10px; }
  /* Workout is a focused execution flow, not a top-level dashboard. The
   * persistent destination dock yields to the active-set controls on phone;
   * the 44px More control and platform back gesture remain available. */
  .app-screen--app-workout .app-surface { padding-bottom: env(safe-area-inset-bottom); }
  .app-screen--app-workout .exercise-panel:has(.exercise-media-slot img) { position: relative; gap: 10px; }
  .app-screen--app-workout .app-header { gap: 4px; padding-top: 8px; }
  .app-screen--app-workout .exercise-media-slot:has(img),
  .app-screen--app-workout .exercise-media-slot:has(img) img {
    /* Keep the active-set poster dominant while leaving the first exercise
     * control inside the 900px phone fold used by the protected WebKit lane.
     * The 49dvh middle value still clears the 390x844 poster minimum. */
    height: clamp(400px, 49.1dvh, 460px);
    min-height: clamp(400px, 49.1dvh, 460px);
    border-radius: var(--radius-inner);
  }

  .app-screen--app-workout .exercise-media-slot:has(img) img { object-position: center 32%; }
  .app-screen--app-workout .exercise-panel:has(.exercise-media-slot img) > div:nth-of-type(1) {
    position: relative;
    z-index: 2;
    margin: -124px 8px 0;
    padding: 11px 14px;
    border: 1px solid var(--gm-hairline);
    border-radius: var(--radius-inner);
    background: linear-gradient(145deg, rgba(35, 20, 17, .88), rgba(9, 6, 5, .94));
    backdrop-filter: blur(16px);
  }

  .app-screen--app-workout .exercise-panel:has(.exercise-media-slot img) > div:nth-of-type(1) h2 { font-size: 32px; }
  .app-screen--app-workout .exercise-panel:has(.exercise-media-slot img) .set-grid { gap: 6px; margin-inline: 8px; }
  .app-screen--app-workout .exercise-panel:has(.exercise-media-slot img) #complete-exercise {
    /* Keep the completion action in normal flow. A sticky bottom edge can
     * paint over the set rows in iOS WebKit while it is settling a scroll,
     * making the exercise selector and inputs physically unclickable. */
    position: relative;
    z-index: 1;
    bottom: auto;
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .42);
  }
  .app-screen--app-workout .workout-layout:has(.exercise-media-slot img) .exercise-list {
    position: relative;
    z-index: 2;
    /* The exercise switcher follows the active-set panel in the phone flow.
     * Pulling it underneath the panel made the Complete button intercept
     * taps on the next exercise in iOS WebKit. */
  }

  /* A two-photo receipt is media-led when the member submitted both photos;
   * otherwise the same card remains concise copy, rather than inventing a
   * before/after pair. The next-week card is intentionally a compact action
   * slab, retaining both named choices above the dock. */
  .app-shell[data-gm-concept="weekly-review"] .review-grid > .glass-card:first-child:has(.review-media-receipt) { overflow: hidden; }
  .app-shell[data-gm-concept="weekly-review"] .review-media-receipt { margin: 12px -4px 6px; }
  .app-shell[data-gm-concept="weekly-review"] .review-media-receipt__images > div { height: 190px; aspect-ratio: auto; }
  .app-shell[data-gm-concept="weekly-review"] .review-receipt-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 12px 0 4px; }
  .app-shell[data-gm-concept="weekly-review"] .review-receipt-metrics span { min-width: 0; padding: 8px; }
  .app-shell[data-gm-concept="weekly-review"] .review-grid > .glass-card:last-child h2 { margin-bottom: 8px; }
  .app-shell[data-gm-concept="weekly-review"] .review-grid > .glass-card:last-child .feature-list { gap: 5px; }
  .app-shell[data-gm-concept="weekly-review"] .review-grid > .glass-card:last-child .action-row { margin-top: 12px !important; }
}

/* Today quick cards: keep one shared espresso foundation, then give each
 * destination a quiet semantic tint so the dashboard is scannable at a
 * glance. Nutrition uses a warm nourishment/copper wash; Progress Twin uses
 * the deeper rose trajectory accent. The treatment is deliberately restrained
 * and stays inside the approved feminine palette. */
.app-screen--app .quick-grid > .glass-card:nth-child(1) {
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(212, 154, 119, .12), transparent 58%),
    linear-gradient(145deg, rgba(255, 214, 191, .075), rgba(28, 15, 14, .88));
  border-color: color-mix(in srgb, var(--gm-peach) 24%, var(--line));
}
.app-screen--app .quick-grid > .glass-card:nth-child(2) {
  background:
    radial-gradient(115% 95% at 96% 0%, rgba(244, 173, 152, .17), transparent 56%),
    linear-gradient(145deg, rgba(185, 117, 82, .16), rgba(28, 15, 14, .9));
  border-color: color-mix(in srgb, var(--gm-peach) 42%, var(--line));
}
.app-screen--app .quick-grid > .glass-card:nth-child(3) {
  background:
    radial-gradient(120% 95% at 92% 0%, rgba(233, 117, 132, .2), transparent 58%),
    linear-gradient(145deg, rgba(112, 45, 58, .24), rgba(27, 13, 17, .92));
  border-color: color-mix(in srgb, var(--gm-rose) 46%, var(--line));
}
.app-screen--app .quick-grid > .glass-card .quick-card {
  min-height: 178px;
}
.app-screen--app .quick-grid > .glass-card .quick-card > .icon {
  width: 38px;
  height: 38px;
  padding: 9px;
  border: 1px solid var(--gm-hairline);
  border-radius: var(--radius-inner-min);
  background: rgba(10, 7, 6, .3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 22px rgba(0,0,0,.16);
}
.app-screen--app .quick-grid > .glass-card:nth-child(2) .quick-card > .icon {
  color: var(--gm-peach);
  border-color: color-mix(in srgb, var(--gm-peach) 48%, var(--gm-hairline));
  background: linear-gradient(145deg, rgba(244, 173, 152, .18), rgba(35, 18, 15, .35));
}
.app-screen--app .quick-grid > .glass-card:nth-child(3) .quick-card > .icon {
  color: var(--gm-rose);
  border-color: color-mix(in srgb, var(--gm-rose) 54%, var(--gm-hairline));
  background: linear-gradient(145deg, rgba(233, 117, 132, .2), rgba(45, 15, 23, .38));
}
.app-screen--app .quick-grid > .glass-card .quick-card h3 {
  letter-spacing: -.02em;
}
.app-screen--app .quick-grid > .glass-card .quick-card > .button--ghost {
  align-self: flex-start;
  min-height: 44.25px;
  padding-inline: var(--control-pad-sm);
  font-size: var(--control-fs-sm);
  border-color: var(--gm-hairline);
  background: rgba(8, 6, 5, .22);
}
.app-screen--app .quick-grid > .glass-card:nth-child(2) .quick-card > .button--ghost {
  border-color: color-mix(in srgb, var(--gm-peach) 38%, var(--gm-hairline));
  color: var(--gm-champagne);
}
.app-screen--app .quick-grid > .glass-card:nth-child(3) .quick-card > .button--ghost {
  border-color: color-mix(in srgb, var(--gm-rose) 42%, var(--gm-hairline));
  color: var(--gm-champagne);
}
.app-screen--app .quick-grid > .glass-card:focus-within {
  outline: 2px solid color-mix(in srgb, var(--accent) 68%, transparent);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .app-screen--app .quick-grid > .glass-card {
    transition: transform var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast);
  }
  .app-screen--app .quick-grid > .glass-card:hover {
    transform: translateY(-2px);
  }
}
@media (max-width: 760px) {
  .app-screen--app .quick-grid > .glass-card .quick-card {
    min-height: 146px;
  }
  .app-screen--app .quick-grid > .glass-card .quick-card > .icon {
    width: 34px;
    height: 34px;
    padding: 8px;
  }
  .app-screen--app .quick-grid > .glass-card .quick-card > .button--ghost {
    min-height: 44.25px;
  }
}