/* Vector Project's own pages (/project/ and /project/help/), PW5 2026-10-18.
   Loaded after /home.css and /family.css (the Project yellow). Hand-written. */

/* Project's yellow on the shared page parts */
body.fam-project .fam-product .product,
body.fam-project .hero-copy .product { background: linear-gradient(90deg, #FFE89A, var(--project));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
body.fam-project.home .hero2 { background: radial-gradient(ellipse at 75% 20%, #3A2E08 0%, rgba(7,17,31,0) 55%),
  radial-gradient(ellipse at 10% 0%, #241D07 0%, var(--navy) 60%); }
body.fam-project .cta { background: radial-gradient(ellipse at 50% 100%, #3A2E08 0%, var(--navy) 60%); }
body.fam-project .button:not(.ghost) { background: var(--project); color: #241D07; }
body.fam-project .early.pill span { background: var(--project); color: #241D07; }

/* Web screenshots in a browser frame (the app is web-first) */
.bshot { margin: 0; }
.browser { border-radius: 14px; overflow: hidden; background: #0B1422; border: 1px solid #3A3418;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 210, 63, .08); }
.browser .bar { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; background: #17150D; border-bottom: 1px solid #2F2A15; }
.browser .bar i { width: 11px; height: 11px; border-radius: 50%; background: #45402A; flex: none; }
.browser .bar span { margin-left: 10px; flex: 1; max-width: 360px; font-size: 12px; color: var(--muted); background: #0B1120;
  border-radius: 7px; padding: 3px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser img { display: block; width: 100%; height: auto; }
.bshot figcaption { color: var(--muted); font-size: 14px; text-align: center; margin-top: 14px; }

/* The sales page: a browser instead of three phones */
.hero-shot-web { position: relative; }
.hero-shot-web .browser { transform: perspective(1600px) rotateY(-6deg); transform-origin: left center; }
.shots { display: grid; gap: 22px; }
.shots .bshot:nth-child(2) { margin-left: 12%; }
.shots { max-width: 560px; justify-self: center; width: 100%; }
.loop4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .hero-shot-web .browser { transform: none; }
  .shots .bshot:nth-child(2) { margin-left: 0; }
  .browser .bar span { display: none; }
}
@media (max-width: 600px) {
  .hero-copy .ctas { flex-wrap: wrap; }
  .hero-copy .ctas .button { white-space: nowrap; }
}
@media (max-width: 700px) {
  .loop4 { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .loop4::before { display: none; }
}