/* vybesync V3 draft — styles for the thinned home + doc pages.
   Loaded AFTER site.css; reuses its tokens, .section-shell, .eyebrow, .hero,
   .cold-open, .journey-carousel / .journey-track / .journey-slide, .phone-device,
   .interest-form, footer, and .sticky-cta. Only the new/overridden bits live here. */

/* ---- Proof: swipe the shift, pre-shift to post-shift -------------------- */
.shift-walk { border-top: 1px solid var(--vs-border); }
.shift-heading { margin-bottom: 44px; font-size: clamp(28px, 4vw, 46px); font-weight: 600; }
.shift-walk .journey-carousel { --lane: var(--vs-orange); }
.shift-walk .journey-slide { grid-template-columns: minmax(0, 1fr) minmax(210px, 300px); gap: clamp(24px, 5vw, 64px); align-items: center; }
.shift-walk .journey-copy h3 { margin: 14px 0 8px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 500; }
.shift-walk .journey-copy p { max-width: 460px; margin: 0; color: var(--vs-fg-muted); }
.shift-walk .journey-pagination { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.shift-walk .phone-device { width: min(100%, 280px); margin-inline: auto; }
.shift-walk .phone-screen { object-fit: fill; }

/* ---- The family: four products, two-column grid ------------------------- */
.product-lineup { border-top: 1px solid var(--vs-border); }
.lineup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.lineup-item {
  --lane: var(--vs-orange);
  display: grid; align-content: start; gap: 12px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--vs-border); border-radius: var(--vs-radius, 14px);
  background: var(--site-black); transition: border-color .15s ease;
}
.lineup-item:hover { border-color: color-mix(in srgb, var(--lane) 46%, var(--vs-border)); }
.lineup-item[data-lane="count"] { --lane: var(--vs-count-green); }
.lineup-item[data-lane="sync"] { --lane: var(--vs-orange); }
.lineup-item[data-lane="manager"] { --lane: var(--vs-manager-blue); }
.lineup-item[data-lane="call"] { --lane: var(--vs-call-purple); }
.lineup-head { display: grid; gap: 10px; }
.lineup-lockup { width: min(210px, 74%); max-height: 34px; object-fit: contain; object-position: left center; }
.lineup-status { margin: 0; color: var(--lane); font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.lineup-line { margin: 0; max-width: 40ch; color: var(--vs-fg-muted); font-size: clamp(15px, 1.8vw, 18px); line-height: 1.55; }
.lineup-link { justify-self: start; margin-top: 4px; color: var(--lane); font-size: 14px; font-weight: 600; text-decoration: none; text-underline-offset: 5px; }
.lineup-link:hover { text-decoration: underline; }

/* ---- Story teaser (single link out to /story/) -------------------------- */
.learn-more { display: grid; gap: 14px; border-top: 1px solid var(--vs-border); }
.learn-more p:not(.eyebrow) { margin: 0; max-width: 620px; color: var(--vs-fg-muted); font-size: clamp(18px, 2.2vw, 24px); }
.learn-more a { justify-self: start; margin-top: 6px; color: var(--vs-orange); font-weight: 600; text-decoration: none; text-underline-offset: 5px; }
.learn-more a:hover { text-decoration: underline; }

/* ---- Dedicated doc pages (story now; product pages follow the same shell) */
.doc-page .site-header { position: relative; }
.doc-page main { padding-top: 30px; }
.story-hero { padding-bottom: 40px; }
.story-hero h1 { max-width: 900px; margin: 0 0 28px; font-size: clamp(40px, 6.5vw, 82px); line-height: 1; }
.story-hero .copy-stack { max-width: 820px; }

/* ---- Product pages (vybesync now; the other three follow the same shell) - */
.product-hero { padding-bottom: 48px; }
.product-hero-lockup { width: min(280px, 66%); max-height: 52px; object-fit: contain; object-position: left center; margin: 0 0 22px; }
.product-hero h1 { max-width: 900px; margin: 0 0 22px; font-size: clamp(38px, 6vw, 76px); line-height: 1.02; }
.product-hero-lead { max-width: 720px; margin: 0 0 32px; color: var(--vs-fg-muted); font-size: clamp(18px, 2.3vw, 24px); }
.product-close { display: grid; gap: 28px; border-top: 1px solid var(--vs-border); }
.story-actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.story-actions .text-link { color: var(--vs-orange); font-weight: 600; text-decoration: none; text-underline-offset: 5px; }
.story-actions .text-link:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .lineup-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .shift-walk .journey-slide { grid-template-columns: 1fr; gap: 18px; }
  .shift-walk .journey-pagination { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story-hero h1 { font-size: clamp(36px, 10vw, 60px); }
}