/* Homepage copy and spacing only; keep the shared page styles independent. */
.home-concise .hero-card__lede { color: inherit; opacity: 1; max-width: 38ch; }
.home-concise .section { padding: 72px 0; }
.home-concise .section__head { margin-bottom: 32px; }
.home-concise .rows { gap: 48px; }
.home-concise .row__text { gap: 16px; }
.home-concise .row__text .link { align-self: flex-start; }
.home-concise .memory { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.home-concise .memory .lede { font-size: 18px; }
.home-concise .home-compact { padding: 52px 0; }
.home-entrypoints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.home-entrypoints .solution-heading { color: inherit; text-decoration: none; }
.home-entrypoints .solution-heading:hover { color: var(--accent); }
.home-strip { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.home-strip .h2 { font-size: 36px; }
.home-strip .text-s { margin-top: 16px; max-width: 64ch; }
.home-strip > .link { justify-self: end; }
.home-strip__links { display: flex; flex-direction: column; align-items: flex-start; justify-self: end; gap: 16px; }
.home-trust__status { display: block; margin-top: 14px; }

@media (min-width: 901px) and (max-width: 1180px) {
  /* The demo stacks at 1180; give the product view the space it has on phones. */
  .home-concise .app__body { height: auto; }
  .home-concise .app__agent { height: 360px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .home-concise .app__view { height: 420px; }
}

@media (max-width: 900px) {
  .home-concise .section { padding: 48px 0; }
  .home-concise .home-compact { padding: 40px 0; }
  .home-concise .section__head { margin-bottom: 28px; }
  .home-concise .memory, .home-entrypoints, .home-strip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .home-concise .hero-card__text { order: -1; padding: 28px 32px; }
  .home-concise .hero-card h1 { margin-top: 0; }
  .home-concise .hero-card__lede { margin-top: 18px; font-size: 17px; }
  .home-strip .h2 { font-size: 30px; }
  .home-strip > .link, .home-strip__links { justify-self: start; }
}

/* Product framing after the film, above the demo. */
.home-demo-intro { padding: 104px 0 16px; text-align: center; }
.home-demo-intro h2 { margin: 0 auto; max-width: none; font-size: 46px; line-height: 1.08; letter-spacing: -.02em; }
.home-demo-intro p { max-width: 62ch; margin: 16px auto 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.home-concise .demo { padding-bottom: 104px; }
.home-concise .demo__head { justify-content: flex-end; border-top: 0; padding-top: 0; margin-bottom: 12px; }
.home-concise .demo .steps { justify-content: center; }
.home-concise .demo__grid .app { width: 100%; max-width: none; }
#demo { scroll-margin-top: 80px; }
@media (max-width: 900px) {
  .home-demo-intro { padding: 64px 0 14px; }
  .home-concise .demo { padding-bottom: 64px; }
  .home-demo-intro h2 { font-size: 34px; }
  .home-demo-intro p { margin-top: 14px; font-size: 18px; max-width: 44ch; }
}


/* The headline, tabs and demo fill one screen, so the section reads as its own screen (founder 10-10,
   after transfyr.ai / albertinvent.com; a lilac band was tried and dropped for white). The app's body
   height is the screen minus the headline, tabs and padding (~380px), between 400 and 760px. */
.home-stage .home-demo-intro { padding: 48px 0 16px; }
.home-stage .demo { padding-bottom: 48px; }
@media (min-width: 1181px) {
  .home-stage { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .home-concise .home-stage #demo .app__body { height: clamp(400px, calc(100svh - 380px), 760px); }
}
@media (max-width: 900px) {
  .home-stage .home-demo-intro { padding: 56px 0 14px; }
  .home-stage .demo { padding-bottom: 56px; }
}