/* Home page sections added after the hero: offer line, feature families,
   what makes Strate, beta-tester quotes and the offer card. */
.hero-shell .hero-bottom .hero-offer { margin: 0; color: #8e8e95; font-size: clamp(12px, 1.5svh, 14px); line-height: 1.5; }
.hero-offer .price-amount { color: #d9d9df; }

.home-families { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.home-family { display: grid; align-content: start; gap: 8px; min-height: 176px; padding: 24px; border: 1px solid #333336; border-radius: 22px; background: #202020; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.home-family:hover { border-color: #4a4a4e; background: #242426; transform: translateY(-2px); }
.home-family .help-icon { box-sizing: content-box; width: 22px; height: 22px; margin-bottom: 14px; padding: 11px; border-radius: 13px; background: #ffffff0d; color: #b318ff; }
.home-family h3 { font-size: 18px; font-weight: 500; }
.home-family p { margin: 0; color: #9c9ca3; font-size: var(--note-size, 14px); line-height: 1.5; }

.home-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-quote { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; margin: 0; padding: 30px; border: 1px solid #333336; border-radius: 22px; background: #202020; }
.home-quote blockquote { margin: 0; }
.home-quote blockquote p { margin: 0; color: #d9d9df; font-size: var(--reading-size, 17px); line-height: 1.55; }
.home-quote figcaption { display: flex; align-items: center; gap: 12px; }
.home-quote-avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: #2e2e31; }
.home-quote figcaption > span:last-child { display: grid; gap: 2px; }
.home-quote b { font-weight: 500; }
.home-quote small { color: #8e8e95; font-size: 13px; }

.home-offer { display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: clamp(40px, 7vw, 110px); align-items: center; }
.home-offer-copy h2 { font-size: clamp(34px, 4vw, 58px); }
.home-offer-copy p { max-width: 40ch; margin: 24px 0 22px; font-size: var(--reading-size, 17px); line-height: 1.55; }
.home-offer-panel .button.primary { width: 100%; margin-top: 4px; }

@media (max-width: 1200px) {
  .home-families { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .home-families { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-quotes { grid-template-columns: 1fr; }
  .home-offer { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .home-family { min-height: 0; padding: 18px; }
  .home-family .help-icon { margin-bottom: 8px; }
  .home-family h3 { font-size: 16px; }
  .home-quote { padding: 22px; }
}
@media (max-width: 380px) { .home-families { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .home-family { transition: none; } .home-family:hover { transform: none; } }
/* The offer card is narrower than on Pricing: the price wraps its period below. */
.home-offer-panel .price { font-size: clamp(72px, 7vw, 100px); }
.home-offer-panel .price small { display: block; margin: 12px 0 0; }
.home-offer-panel .price-word { font-size: clamp(48px, 5vw, 76px); font-weight: 600; letter-spacing: -.045em; line-height: 1.1; }

/* Replay illustration animated by assets/replay-art.js. */
.time-digits .odo { display: inline-block; height: 1em; overflow: hidden; line-height: 1; vertical-align: -.08em; font-style: normal; }
.time-digits .odo-strip { display: block; font-style: normal; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.time-digits .odo-strip i { display: block; height: 1em; color: #e4e5ea; font-style: normal; }
.time-digits .odo-strip.is-instant { transition: none; }
@media (prefers-reduced-motion: reduce) { .time-digits .odo-strip { transition: none; } }
.time-wave svg.is-live rect { fill: #3a4452; opacity: .85; transform-box: fill-box; transform-origin: bottom; transition: fill .25s ease; }
.time-wave svg.is-live rect.is-played { fill: #007acd; }
.time-wave svg.is-live rect.is-peak { opacity: 1; }
.time-wave svg.is-live rect.is-peak.is-now { fill: #b318ff; animation: replay-peak 1.2s ease-in-out infinite; }
.time-scale .accent { transition: color .3s ease, text-shadow .3s ease; }
.time-scale .accent.is-now { color: #fff; text-shadow: 0 0 14px #b318ff; }
@keyframes replay-peak { 50% { opacity: .55; } }