/* Component 05 · Closing call to action
   A measured copy of the two blocks at the end of Palantir's homepage ("Request a Demo" /
   "Start Building", checked 25 Sept 2026), on white, between two thin lines:
   - two half-width blocks with 4px corners, a 48px label and an arrow; stacked on phones
   - hover: the block shifts shade and its text slides 8px right (0.3s)
   - the lines slide in from the left when they scroll into view (see js/reveal.js) */

.cta {
  /* Covers the hero's pinned frame as it scrolls up */
  position: relative;
  z-index: 5;
  background: #fff;
  color: #1e1f2b;
}
.cta .section-inner { padding-top: 0; }

/* Thin lines: the inner bar starts one full width to the left and slides into place */
.cta-line {
  height: 1px;
  overflow: hidden;
}
.cta-line > div {
  height: 100%;
  border-top: 1px solid #aaa;
}
.js .cta-line > div {
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.5, 1, 0.89, 1);
}
.js .cta-line.is-in > div { transform: none; }

.cta-blocks {
  display: flex;
  flex-direction: column;
}
@media (min-width: 760px) {
  .cta-blocks { flex-direction: row; gap: 24px; margin: 32px 1px; }
}

.cta-block {
  display: flex;
  flex: 0 1 50%;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 16px;
  border-radius: 4px;
  line-height: 36px;
  text-decoration: none;
  transition: 0.3s;
}
.cta-block > span {
  font-size: 36px;
  letter-spacing: -2px;
}
@media (min-width: 560px) {
  .cta-block { margin: 35px 0; line-height: 64px; }
  .cta-block > span { font-size: 48px; }
}
@media (min-width: 760px) {
  .cta-block { padding: 12px 16px 112px; }
}

/* Light block (Palantir's "Request a Demo") */
.cta-light {
  margin: 22px 0 14px;
  background-color: #dbdbdb;
  color: #1e1f2b;
}
.cta-light:hover {
  padding: 12px 24px 112px;
  background-color: #c6c6c6;
}

/* Dark block (Palantir's "Start Building") */
.cta-dark {
  margin: 0 0 22px;
  background-color: #202426;
  color: #fff;
}
@media (min-width: 560px) {
  .cta-dark:hover {
    padding: 12px 24px 112px;
    background-color: #868686;
  }
}

@media (min-width: 760px) {
  .cta-light,
  .cta-dark { margin: 0; }
}

/* Below 760px the blocks are short, so hover keeps their height and only slides the text 8px right
   (Palantir's own rule would make a tapped block jump taller on phones) */
@media (max-width: 759px) {
  .cta-block:hover { padding: 18px 16px 18px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-block,
  .js .cta-line > div { transition: none; }
}