/* x-next: hero rewrite, analytics preview, how-it-works. Loaded after hero.css/sections.css. */

/* Hero: one block under the screenshot; the whole desktop scene sits higher on wide screens. */
:root { --lift: 55px; }
@media (min-width: 1200px) {
  .desktop-stage { top: calc(50% - var(--lift)); }
  .notification-focus { top: calc(50svh - 252px * var(--scale) - var(--lift)); }
  .opportunity { top: calc(50svh - 137px * var(--scale) - var(--lift)); }
  .dm { top: calc(50svh - 433px * var(--scale) + 18px - var(--lift)); }
  .callout-notifications { top: calc(50svh - 252px * var(--scale) + 42px - var(--lift)); }
  .callout-post { top: calc(50svh - 137px * var(--scale) + 64px - var(--lift)); }
  .callout-message { top: calc(50svh - 433px * var(--scale) + 44px - var(--lift)); }
  .hero { top: calc(50svh + 90px - var(--lift)); }
  .intro { height: max(760px, calc(50svh + 305px)); }
  .demo-sticky { min-height: 0; }
}

.hero-cta-btn { display: inline-block; margin-top: 28px; padding: 13px 26px; border-radius: 999px; background: #eee9de; color: #101519; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 2px 12px #0003; transition: background .2s; }
.hero-cta-btn:hover { background: #fff9ed; }
@media (max-width: 700px) { .hero-cta-btn { margin-top: 22px; padding: 12px 22px; font-size: 14px; } }

/* Pricing is styled in pricing.css. */

/* Analytics preview ("what to expect"), between the hero and the reply demo. */
.expect-scene { max-width: 1240px; margin: auto; padding: 100px 44px; border-top: 1px solid #ffffff13; }
.analytics-window { max-width: 1080px; margin: auto; border: 1px solid #ffffff18; border-radius: 16px; padding: 22px 26px 24px; background: #030506; box-shadow: 0 30px 100px #0009, inset 0 1px #ffffff05; }
.analytics-heading { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #83919b; }
.analytics-metric { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #ffffff18; border-radius: 8px; color: #dce2e6; }
.analytics-metric svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.analytics-chart { position: relative; margin: 26px 0 0 38px; padding-bottom: 26px; }
.chart-svg { display: block; width: 100%; height: 260px; overflow: visible; }
.chart-svg .grid { stroke: #ffffff0c; stroke-width: 1; }
.chart-svg .bar { fill: #1d9bf0; opacity: 0; shape-rendering: crispEdges; }
.chart-svg .bar.quiet { fill: #59636d; }
.chart-svg .start-line { stroke: #fff; stroke-width: 1; shape-rendering: crispEdges; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .4s .3s; }
.analytics-chart.live .start-line { opacity: 1; }
.analytics-chart.live .chart-svg .bar { animation: bar-in .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--delay, 0ms); transform-origin: bottom; transform-box: fill-box; }
@keyframes bar-in { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } }
.chart-y { position: absolute; left: -38px; top: 0; height: 260px; display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: #5d6b76; font-variant-numeric: tabular-nums; }
.chart-x { display: flex; justify-content: space-between; margin-top: 12px; font-size: 11px; color: #5d6b76; }
.chart-toast { position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 8px; border: 1px solid #ffffff2a; border-radius: 8px; background: #050709d9; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #eff3f4; font-size: 12px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .4s .5s, transform .4s .5s; }
.chart-toast-mark { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #123951; color: #86d0ff; font-size: 8px; font-weight: 700; letter-spacing: .02em; }
.analytics-chart.live .chart-toast { opacity: 1; transform: none; }
.analytics-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.stat { padding: 16px 18px; border: 1px solid #ffffff12; border-radius: 12px; background: #07090c; }
.stat-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #83919b; }
.stat-label svg { width: 16px; height: 16px; fill: none; stroke: #7bc8ff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.stat-value { display: block; margin-top: 12px; font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: #eff3f4; font-variant-numeric: tabular-nums; }
.stat-value b { font-size: 13px; font-weight: 500; color: #4fd18b; margin-left: 4px; }
@media (max-width: 760px) {
  .expect-scene { padding: 64px 20px; }
  .analytics-window { padding: 16px 16px 18px; }
  .analytics-chart { margin-left: 30px; }
  .chart-svg, .chart-y { height: 160px; }
  .chart-y { left: -30px; }
  .chart-x span:nth-child(even) { display: none; }
  .chart-toast { font-size: 13px; padding: 8px 12px 8px 10px; }
  .analytics-stats { grid-template-columns: 1fr; gap: 10px; }
  .stat-value { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .chart-svg .bar, .chart-toast { transition: none; } }

/* How it works: four steps on a dashed path, same glass cards as the hero callouts. */
.how-scene { max-width: 1240px; margin: auto; padding: 110px 44px 70px; border-top: 1px solid #ffffff13; }
.how-copy { text-align: center; }
.how-copy h2 { font: 200 clamp(30px, 3.2vw, 46px)/1.22 Montserrat, Arial, sans-serif; letter-spacing: -.04em; color: #eee9de; margin: 20px 0 64px; }
.followup-thread .message-toast { margin: 4px 0 22px 50px; animation: reply-in .4s 1.2s both; }
.how-scene { padding-bottom: 130px; }
.how-x { width: 15px; height: 15px; fill: currentColor; vertical-align: -2px; margin: 0 1px; }
.how-pill { display: inline-block; margin-top: 12px; padding: 5px 10px; border-radius: 999px; background: #123951; color: #86d0ff; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.tl { position: relative; list-style: none; max-width: 560px; margin: auto; padding: 0 0 0 44px; }
.tl::before { content: ''; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(#ffffff2e, #7bc8ff88); }
.tl-step { position: relative; padding: 0 0 47px; }
.tl-step:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: -44px; top: 2px; width: 23px; height: 23px; border-radius: 50%; border: 1px solid #ffffff3a; background: #000; display: grid; place-items: center; font-size: 10px; color: #9aa4ad; }
.tl-step.done .tl-dot { border-color: #7bc8ff66; color: #7bc8ff; }
.tl-step.live .tl-dot { border-color: #7bc8ff; background: #7bc8ff; color: #06283d; box-shadow: 0 0 0 6px #7bc8ff22; }
.tl-title { font-size: 19px; color: #eff3f4; letter-spacing: -.01em; }
.tl-sub { margin: 6px 0 0; font-size: 13px; color: #83919b; line-height: 1.6; max-width: 400px; }
.tl-step.live .tl-title { color: #fff; }
@media (max-width: 700px) {
  .how-scene { padding: 64px 20px 80px; }
  .how-copy h2 { margin: 12px 0 34px; }
  .tl-title { font-size: 17px; }
}