@import "https://assets.elements.dev/assets/app/shared/styles/page.9ea4eaee6aed57cb.css";

/*
 * <ContentCta> styles. Unlike the video-end overlay, this block sits on
 * the page background in both themes, so everything here is tokens.
 */

/* Contained but quiet: a light border around plain type and an outlined
   button rather than the page's primary blue, set well apart from the
   content it follows. It is an offer at the end of the page, not a
   banner. */
.content-cta {
  margin: 72px 0 0;
}

.content-cta-subscribe {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.content-cta-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.005em;
  color: var(--ink-soft);
}

.content-cta-row {
  display: flex;
  gap: 8px;
}

.content-cta-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.content-cta-input::placeholder { color: var(--ink-faint); }
.content-cta-input:focus {
  outline: none;
  border-color: var(--accent);
}

.content-cta-go {
  flex-shrink: 0;
  height: 42px;
}

/* Stack at phone width: side by side, the field loses too much of the
   address to read back what was typed. */
@media (max-width: 520px) {
  .content-cta { margin-top: 56px; }
  .content-cta-subscribe { padding: 20px; }
  .content-cta-row { flex-direction: column; }
  .content-cta-go { width: 100%; }
}

.content-cta-row { max-width: 30rem; }