/* Shared visual foundation for public tools. No app framework styles. */
:root {
  --tool-bg: #050810;
  --tool-hero-bg: #030712;
  --tool-editor-bg: #0a0d14;
  --tool-card: #11151f;
  --tool-panel: rgba(255, 255, 255, 0.04);
  --tool-border: rgba(255, 255, 255, 0.12);
  --tool-heading: #fff;
  --tool-text: #c8ccd4;
  --tool-muted: #969eae;
  --tool-accent: #f17175;
  --tool-primary: #c71f0d;
  --tool-primary-light: #d62916;
  --tool-primary-hover: #a01808;
  --tool-primary-gradient: linear-gradient(135deg, var(--tool-primary), var(--tool-primary-light));
  --tool-primary-gradient-hover: linear-gradient(135deg, var(--tool-primary-hover), var(--tool-primary));
  --tool-card-radius: 14px;
  --tool-button-radius: 8px;
  --tool-hero-gradient:
    radial-gradient(at 20% 30%, rgba(59, 130, 246, .18), transparent 50%),
    radial-gradient(at 80% 70%, rgba(139, 92, 246, .20), transparent 50%),
    radial-gradient(at 50% 50%, rgba(16, 185, 129, .10), transparent 50%),
    radial-gradient(at 40% 80%, rgba(251, 191, 36, .16), transparent 50%),
    radial-gradient(at 90% 20%, rgba(252, 211, 77, .12), transparent 45%);
  --tool-title-gradient: linear-gradient(120deg, #93c5fd, #fca5a5 45%, #fde68a);
}

.tool-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--tool-button-radius);
  background: var(--tool-primary-gradient);
  color: #fff;
  font: 500 1rem/1.5 'Roboto Flex', sans-serif;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(199, 31, 13, .3);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tool-primary-button:hover {
  background: var(--tool-primary-gradient-hover);
  box-shadow: 0 4px 12px rgba(199, 31, 13, .4);
  transform: translateY(-1px);
  text-decoration: none;
}
.tool-primary-button:focus-visible {
  outline: 2px solid white;
  outline-offset: 3px;
}
.tool-card {
  background: var(--tool-card);
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-card-radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 32px -16px rgba(0, 0, 0, .6);
}

/* ---------- video editor page: Start-a-Tribute CTAs (tools/video_editor/cta.html, faq.html) ---------- */
.page-video-editor .ve-cta-card {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 32px 38px;
  border-radius: var(--tool-card-radius);
  border: 1px solid rgba(241, 113, 117, .28);
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(199, 31, 13, .22), transparent 70%),
    radial-gradient(420px 220px at 0% 100%, rgba(139, 92, 246, .16), transparent 70%),
    var(--tool-card);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 32px -16px rgba(0, 0, 0, .6);
}
.page-video-editor .ve-cta-heading {
  margin: 0;
  color: var(--tool-heading);
  font: 400 clamp(1.5rem, 2.6vw, 2rem)/1.2 "Newsreader", Georgia, serif;
  letter-spacing: -.01em;
}
.page-video-editor .ve-cta-body {
  margin: 8px 0 0;
  max-width: 560px;
  color: var(--tool-text);
}
.page-video-editor .ve-cta-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.page-video-editor .ve-cta-note {
  color: var(--tool-muted);
  font-size: .875rem;
}
.page-video-editor .ve-faq-cta {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.page-video-editor .ve-faq-cta p {
  margin: 0;
  color: var(--tool-text);
}
@media (max-width: 600px) {
  .page-video-editor .ve-cta-card { padding: 26px 22px; }
  .page-video-editor .ve-cta-actions { width: 100%; }
  .page-video-editor .ve-cta-actions .tool-primary-button { flex: 1 1 auto; }
}
/* Room for the homepage's mobile sticky Start bar, and the support button above it */
@media (max-width: 767px) {
  body.page-video-editor { padding-bottom: 4.75rem; }
  body.page-video-editor:has(.mobile-sticky-cta:not(.is-hidden)) #support-widget {
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }
}