/* The crew mark (scripts/crew-stamp.mjs, 2026-10-16): the app's monster on the app's own page, right under
   the headline. The whole monster standing beside the words, bobbing on its feet, the whole thing a link to
   the crew page. Self-contained on purpose: every app page template links it, whatever stylesheet it uses. */
.crew-mark { display:inline-flex; align-items:center; gap:14px; margin:16px 0 4px; padding:6px 18px 6px 8px; border-radius:24px;
  background:rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.42); color:inherit; text-decoration:none; font-size:15px; line-height:1.3;
  min-height:44px; max-width:100%; transition:border-color .2s, background-color .2s; }
.crew-mark:hover { border-color:#9D5CFF; background:rgba(124,58,237,.2); text-decoration:none; }
.crew-mark:focus-visible { outline:2px solid #9D5CFF; outline-offset:3px; }
.crew-mark-figure { height:132px; width:auto; display:block; flex:none; border-radius:14px; object-fit:cover;
  box-shadow:0 0 0 2px var(--c, #9D5CFF), 0 14px 24px -14px rgba(0,0,0,.6); background:#0B0A1F; transform-origin:50% 100%; }
.crew-mark-figure + .crew-mark-figure { margin-left:-18px; }
.crew-mark-words { font-weight:600; opacity:.92; }
.crew-mark-words b { font-weight:700; }
@media (max-width:420px) { .crew-mark-figure { height:112px; } .crew-mark { font-size:14px; gap:10px; } }
@media (prefers-reduced-motion: no-preference) {
  .crew-mark-figure { animation:crew-bob 3s ease-in-out 1; }
  .crew-mark:hover .crew-mark-figure, .crew-mark:focus-visible .crew-mark-figure { animation:crew-bob 3s ease-in-out infinite; }
  .crew-mark-figure + .crew-mark-figure { animation-delay:-1.3s; }
  .crew-mark:hover .crew-mark-figure { animation:crew-wave .7s ease-in-out; }
  @keyframes crew-bob { 0%, 100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-4px) rotate(1deg); } }
  @keyframes crew-wave { 0%, 100% { transform:rotate(0); } 25% { transform:rotate(-5deg) scale(1.05); } 75% { transform:rotate(5deg) scale(1.05); } }
}

/* never part of a hero entrance: the mark is visible from the first paint on every template */
.hero-copy > .crew-mark { animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; }

/* The flagship's App Store rating under its launch line (scripts/build-hub.mjs stampFlagshipRating, 2026-10-16). */
.rating-line { display:flex; align-items:center; gap:8px; margin:10px 0 0; font-size:14.5px; color:inherit; opacity:.92; }
.rating-line .stars { color:#F3D58A; letter-spacing:2px; font-size:16px; }
.rating-line strong { font-size:16px; }