/* Senior living email automation landing page. Builds on /styles.css (tokens, buttons, glass, reveals, FAQ). */

/* ---------- Stripped nav ---------- */
.lp-nav .nav__bar { gap: var(--space-4); }
.lp-nav__tag {
  margin-right: auto; padding: 4px 10px; font: 500 12px/16px var(--font-mono); letter-spacing: .02em;
  color: #B9C0CA; border: 1px solid var(--glass-line); border-radius: var(--radius-sm);
}
.lp-nav .nav__cta { display: inline-flex; }
@media (max-width: 480px) { .lp-nav__tag { display: none; } .lp-nav .nav__logo { margin-right: auto; } }

/* ---------- Hero + VSL ---------- */
.lp-hero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + var(--space-16)) 0 var(--space-16); }
.lp-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.lp-b1 { width: 420px; height: 420px; right: -80px; top: 18%; background: var(--brand-orange); opacity: .55; animation: drift-a 20s ease-in-out infinite alternate; }
.lp-b2 { width: 180px; height: 180px; left: -40px; top: 52%; background: var(--brand-orange-on-dark); opacity: .5; animation: drift-b 18s ease-in-out infinite alternate; }
.lp-b3 { width: 56px; height: 56px; left: 6%; top: 12%; background: var(--brand-orange-on-dark); animation: drift-b 14s ease-in-out infinite alternate; }
.lp-hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp-hero__h { max-width: 15ch; margin-bottom: var(--space-6); }
.lp-hero__sub { color: #B9C0CA; max-width: 60ch; }
.lp-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-8); }
.lp-hero__ctas .btn--primary { --signal: var(--brand-orange-on-dark); --signal-hover: #F5A47F; --on-signal: var(--brand-ink); }
.lp-hero__mail { margin-top: var(--space-4); font-size: 15px; color: #9AA3B0; }
.lp-hero__mail a { color: var(--brand-orange-on-dark); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.lp-hero__mail a:hover { color: #F5A47F; }

.vsl { width: 100%; max-width: 960px; margin-top: var(--space-12); perspective: 1600px; }
.vsl__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; padding: 0;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 50px 100px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(240,138,93,.12);
}
.js .vsl.reveal .vsl__frame { transform: rotateX(14deg) scale(.94); transform-origin: center bottom; transition: transform 1200ms var(--ease-out) .5s; }
.js .vsl.reveal.is-in .vsl__frame { transform: none; }
.vsl__demo { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-6); }
.vsl__note {
  position: absolute; left: var(--space-4); bottom: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 10px; font-size: 13px; color: #D5DAE0; background: rgba(12,17,23,.55); border: 1px solid var(--glass-line); border-radius: var(--radius-sm);
}
.live-sq { width: 8px; height: 8px; background: var(--brand-orange-on-dark); animation: pulse 1.6s ease-in-out infinite; }
/* YouTube, once an ID is set */
.vsl__poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #0C1117; }
.vsl__poster img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity var(--dur) var(--ease-out), transform 800ms var(--ease-out); }
.vsl__poster:hover img { opacity: 1; transform: scale(1.02); }
.vsl__play {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; display: grid; place-items: center; transform: translate(-50%, -50%);
  color: var(--brand-ink); background: var(--brand-orange-on-dark); box-shadow: 0 0 0 0 rgba(240,138,93,.5);
  animation: play-ping 2.2s var(--ease-out) infinite; transition: transform var(--dur) var(--ease-out);
}
.vsl__poster:hover .vsl__play { transform: translate(-50%, -50%) scale(1.06); }
.vsl__play .icon { width: 32px; height: 32px; fill: currentColor; margin-left: 4px; }
@keyframes play-ping { 70%, 100% { box-shadow: 0 0 0 22px rgba(240,138,93,0); } }
.vsl__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Animated flow: text in, packet out ---------- */
.flow { position: relative; width: 100%; max-width: 720px; height: 100%; max-height: 420px; text-align: left; }
.flow .glass { position: absolute; padding: var(--space-4); color: var(--brand-paper); }
.flow__label { display: flex; align-items: center; gap: 6px; font: 500 12px/16px var(--font-mono); color: #9AA3B0; margin-bottom: var(--space-2); }
.flow__label .icon { width: 14px; height: 14px; }
.flow__phone { left: 0; top: 8%; width: 44%; }
.flow__sms {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; font-size: 15px; font-weight: 500;
  color: var(--brand-ink); background: var(--brand-paper); border-radius: var(--radius-md); border-bottom-left-radius: 0; overflow-wrap: anywhere;
}
.flow__caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: var(--brand-ink); animation: caret 900ms steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.flow__ok { display: flex; align-items: center; gap: 6px; margin-top: var(--space-3); font-size: 13px; font-weight: 600; color: var(--success); }
.flow__ok .icon { width: 16px; height: 16px; }
.flow__mail { right: 0; top: 0; width: 52%; }
.flow__subject { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.flow__body { margin: 4px 0 var(--space-3); font-size: 13px; line-height: 19px; color: #B9C0CA; }
.flow__files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.flow__files span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; font-size: 12px; font-weight: 500; color: #D5DAE0; background: rgba(243,245,247,.06); border: 1px solid var(--glass-line); border-radius: var(--radius-sm); }
.flow__files .icon { width: 13px; height: 13px; color: var(--brand-orange-on-dark); }
.flow__btn { display: inline-block; padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--brand-ink); background: var(--brand-orange-on-dark); border-radius: var(--radius-sm); }
.flow__tour, .flow__nudge { display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px !important; }
.flow__tour { left: 8%; bottom: 4%; }
.flow__nudge { right: 4%; bottom: 0; }
.flow__tour .icon, .flow__nudge .icon { width: 22px; height: 22px; color: var(--brand-orange-on-dark); flex: none; }
.flow__tour span, .flow__nudge span { display: flex; flex-direction: column; font-size: 13px; color: #B9C0CA; }
.flow__tour b, .flow__nudge b { font-size: 14px; color: var(--brand-paper); font-weight: 600; }

/* Sequenced states: .s1 typing → .s2 sent → .s3 inbox → .s4 tour → .s5 nudge */
.flow > * { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out); }
.flow__ok { opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); }
.flow.s1 .flow__phone, .flow.s2 .flow__phone, .flow.s3 .flow__phone, .flow.s4 .flow__phone, .flow.s5 .flow__phone { opacity: 1; transform: none; }
.flow.s2 .flow__ok, .flow.s3 .flow__ok, .flow.s4 .flow__ok, .flow.s5 .flow__ok { opacity: 1; transform: none; }
.flow.s2 .flow__caret, .flow.s3 .flow__caret, .flow.s4 .flow__caret, .flow.s5 .flow__caret { display: none; }
.flow.s3 .flow__mail, .flow.s4 .flow__mail, .flow.s5 .flow__mail { opacity: 1; transform: none; }
.flow.s4 .flow__tour, .flow.s5 .flow__tour { opacity: 1; transform: none; }
.flow.s5 .flow__nudge { opacity: 1; transform: none; }
.flow.s3 .flow__files span { animation: chip-in 500ms var(--ease-out) both; }
.flow.s3 .flow__files span:nth-child(2) { animation-delay: 90ms; } .flow.s3 .flow__files span:nth-child(3) { animation-delay: 180ms; } .flow.s3 .flow__files span:nth-child(4) { animation-delay: 270ms; }
@keyframes chip-in { from { opacity: 0; transform: translateY(6px); } }
.flow.is-out > * { opacity: 0 !important; transform: translateY(-10px) scale(.98) !important; }

/* Phones: the demo cards stack instead of overlapping */
@media (max-width: 720px) {
  .vsl__frame { aspect-ratio: auto; }
  .vsl__demo { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
  .vsl__note { position: static; align-self: flex-start; }
  .flow, .how__stage .flow { height: auto; max-height: none; display: flex; flex-direction: column; gap: var(--space-2); }
  .flow .glass, .how__stage .flow .glass { position: relative; inset: auto; width: 100%; }
  .flow__tour, .flow__nudge { align-self: stretch; }
  .how__stage { height: auto !important; aspect-ratio: auto; }
}

/* ---------- Works-with strip ---------- */
.lp-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-6) 0; }
.lp-strip__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.lp-strip__k { font: 500 13px/16px var(--font-mono); color: #9AA3B0; }
.lp-strip ul { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.lp-strip li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 16px; font-weight: 500; color: #D5DAE0; }
.lp-strip .icon { width: 18px; height: 18px; color: var(--brand-orange-on-dark); }

/* ---------- The leak ---------- */
.story { max-width: 62ch; display: flex; flex-direction: column; gap: var(--space-4); font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.55; color: var(--ink); margin-bottom: var(--space-12); }
.typo { font-family: var(--font-mono); font-size: .9em; padding: 0 4px; background: rgba(185,28,28,.08); color: var(--danger); text-decoration: line-through; text-decoration-thickness: 2px; }
.typo--ok { background: rgba(21,128,61,.08); color: var(--success); text-decoration: none; }
.leaks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.leak {
  position: relative; padding: var(--space-8); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: var(--space-3); overflow: hidden;
}
.leak::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-out); }
.leak:hover::after { transform: scaleX(1); }
.leak__n { font: 600 14px/1 var(--font-mono); color: var(--signal); }
.leak h3 { font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.15; letter-spacing: -.02em; }
.leak p { font-size: 17px; line-height: 26px; color: var(--ink-muted); }
@media (max-width: 900px) { .leaks { grid-template-columns: 1fr; } }

/* ---------- How it works ---------- */
.how { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.how__steps { display: flex; flex-direction: column; }
.how__step { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.how__n { font: 600 14px/28px var(--font-mono); color: var(--ink-muted); transition: color 400ms var(--ease-out); }
.how__step h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em; margin-bottom: var(--space-2); color: var(--ink-muted); transition: color 400ms var(--ease-out); }
.how__step p { font-size: 17px; line-height: 27px; color: var(--ink-muted); }
.how__step q { color: var(--ink); font-weight: 500; }
.how__step.is-on .how__n { color: var(--signal); }
.how__step.is-on h3 { color: var(--ink); }
.how__visual { position: sticky; top: calc(var(--nav-h) + var(--space-8)); }
.how__stage { position: relative; aspect-ratio: 1 / 1; padding: var(--space-6); border-radius: var(--radius-md); overflow: hidden; display: grid; place-items: center; }
.lp-b4 { width: 46%; aspect-ratio: 1; left: 18%; top: 22%; background: var(--brand-orange); animation: drift-a 16s ease-in-out infinite alternate; }
.how__stage .flow { height: 92%; }
.how__stage .flow { height: 100%; max-height: none; }
.how__stage .flow__phone { width: 62%; top: 0; }
.how__stage .flow__mail { width: 78%; top: 24%; }
.how__stage .flow__tour { left: 0; top: auto; bottom: 18%; }
.how__stage .flow__nudge { right: 0; bottom: 0; }
.how__stage .flow__mail .flow__body { display: none; }
@media (max-width: 960px) {
  .how { grid-template-columns: 1fr; gap: var(--space-8); }
  .how__visual { position: relative; top: 0; order: -1; }
  .how__stage { aspect-ratio: auto; height: 460px; }
}

/* ---------- Packet contents ---------- */
.kits { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.kit { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.kit:hover { transform: translateY(-4px); border-color: var(--ink); }
.kit .gicon { margin-bottom: var(--space-2); }
.kit h3 { font-size: 20px; line-height: 26px; letter-spacing: -.015em; }
.kit p { font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.kit:hover .gicon__blk { transform: translate(8px, -6px) rotate(-8deg); }
.kits__note { margin-top: var(--space-8); font-size: 17px; color: var(--ink-muted); }
@media (max-width: 1080px) { .kits { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .kits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .kits { grid-template-columns: 1fr; } }

/* ---------- Follow-up timeline ---------- */
.lp-follow { overflow: hidden; }
.lp-follow__bg { position: absolute; inset: 0; pointer-events: none; }
.lp-b5 { width: 360px; height: 360px; right: 6%; top: 30%; background: var(--brand-orange); animation: drift-b 22s ease-in-out infinite alternate; }
.lp-b6 { width: 140px; height: 140px; right: 34%; bottom: 8%; background: var(--brand-orange-on-dark); animation: drift-a 18s ease-in-out infinite alternate; }
.lp-follow__inner { position: relative; }
.lp-follow .lead { color: #B9C0CA; }
.timeline { position: relative; max-width: 820px; padding: var(--space-8) var(--space-8) var(--space-8) calc(var(--space-8) + 40px); display: flex; flex-direction: column; gap: var(--space-8); }
.timeline__rail { position: absolute; left: calc(var(--space-8) + 7px); top: var(--space-8); bottom: var(--space-8); width: 2px; background: rgba(243,245,247,.12); }
.timeline__rail span { position: absolute; inset: 0; background: var(--brand-orange-on-dark); transform: scaleY(var(--tp, 0)); transform-origin: top; }
.tl { position: relative; display: grid; grid-template-columns: 170px 1fr; gap: var(--space-6); }
.tl::before { content: ""; position: absolute; left: -40px; top: 6px; width: 16px; height: 16px; background: var(--brand-ink); border: 2px solid rgba(243,245,247,.3); transition: background-color 400ms var(--ease-out), border-color 400ms var(--ease-out); }
.tl.is-on::before { background: var(--brand-orange-on-dark); border-color: var(--brand-orange-on-dark); }
.tl__when { font: 500 14px/28px var(--font-mono); color: #9AA3B0; }
.tl h3 { font-size: 22px; line-height: 28px; letter-spacing: -.015em; margin-bottom: 4px; }
.tl p { font-size: 17px; line-height: 26px; color: #B9C0CA; }
.tl q { color: var(--brand-paper); }
.timeline__note { margin-top: var(--space-6); font-size: 15px; color: #9AA3B0; }
@media (max-width: 640px) {
  .timeline { padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 36px); }
  .timeline__rail { left: calc(var(--space-6) + 7px); top: var(--space-6); bottom: var(--space-6); }
  .tl { grid-template-columns: 1fr; gap: 2px; }
  .tl::before { left: -36px; }
}

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.team .h1 { margin-bottom: var(--space-4); }
.team__list { display: flex; flex-direction: column; gap: var(--space-3); }
.team__list li { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-6); font-size: 17px; line-height: 26px; color: var(--ink-muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.team__list b { color: var(--ink); font-weight: 600; }
.team__list .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--signal); }
@media (max-width: 900px) { .team { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ---------- Final CTA ---------- */
.lp-cta__bg { position: absolute; inset: 0; pointer-events: none; }
.lp-b7 { width: 300px; height: 300px; left: -60px; top: 20%; background: var(--brand-orange); opacity: .6; animation: drift-a 20s ease-in-out infinite alternate; }
.lp-b8 { width: 120px; height: 120px; right: 10%; bottom: 14%; background: var(--brand-orange-on-dark); animation: drift-b 16s ease-in-out infinite alternate; }
.lp-cta__inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp-cta__h { max-width: 14ch; margin-bottom: var(--space-6); }
.lp-cta .lead { color: #B9C0CA; }

/* ---------- Footer ---------- */
.lp-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.lp-footer__logo img { height: 22px; width: auto; }
.lp-footer__legal { margin-left: auto; }
.lp-footer a { color: #D5DAE0; }
@media (max-width: 640px) { .lp-footer__legal { margin-left: 0; } }

/* ---------- Mobile hero ---------- */
@media (max-width: 640px) {
  .lp-hero { padding-top: calc(var(--nav-h) + var(--space-8)); }
  .lp-hero__ctas .btn { width: 100%; }
  .lp-b1 { width: 220px; height: 220px; right: -100px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow > *, .flow__ok { opacity: 1 !important; transform: none !important; }
  .js .vsl.reveal .vsl__frame { transform: none; }
}

/* ---------- VSL zoom: pinned while you scroll, grows to fill the screen, then settles back ---------- */
.lp-hero { overflow: clip; }
.vsl-scene { position: relative; width: 100%; display: flex; justify-content: center; }
.vsl-scene__sticky { position: relative; z-index: 2; width: 100%; display: flex; justify-content: center; }
.vsl-scene__dim {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: var(--brand-ink); opacity: 0; pointer-events: none;
}
.vsl-scene.is-live { height: 260vh; }
.vsl-scene.is-live .vsl-scene__sticky { position: sticky; top: 0; height: 100vh; align-items: flex-start; padding-top: var(--space-12); }
.vsl-scene.is-live .vsl-scene__dim { opacity: var(--vz-dim, 0); }
.vsl-scene.is-live .vsl.reveal.is-in .vsl__frame { border-radius: var(--vz-r, 8px); will-change: transform; }
.vsl-scene.is-zooming .vsl.reveal.is-in .vsl__frame {
  transform: translate3d(var(--vz-x, 0px), var(--vz-y, 0px), 0) scale(var(--vz, 1));
  transform-origin: center center;
  transition: none;
}