/* Standalone preview only. On devtodollars.com the site supplies the page body and the
   closing band (ContactCtaBand in src/components/service-sections.tsx), so this file never
   goes into the landing page repo. The band below copies that component's Tailwind classes:
   py-24 (sm is 0px on the site), max-w-7xl px-6 lg:px-8, a max-w-4xl rounded-3xl indigo card
   with px-16 py-20 and shadow-2xl, a 36px bold heading, an 18px slate-200 line, a gold button
   and an outlined one. */

/* Montserrat, the face of the DevToDollars wordmark, subset to Latin from the site's own
   static/fonts/Montserrat-VariableFont_wght.ttf (OFL). On the site the page needs a weight-range
   declaration for that file instead (the site registers it at 400 only): see handoff/SEO.md. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-var.woff2") format("woff2");
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: #FFFFFF; color: #0F172A;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
}
main { display: block; }

.dtd-cta-host { scroll-margin-top: 64px; }
.dtd-cta { padding: 96px 0; font-family: inherit; }
.dtd-cta__wrap { max-width: 80rem; margin: 0 auto; padding: 0 24px; }
@media (min-width: 997px) { .dtd-cta__wrap { padding: 0 32px; } }
.dtd-cta__card {
  max-width: 56rem; margin: 0 auto; padding: 80px 64px; border-radius: 24px;
  background: #2619D1; text-align: center; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}
.dtd-cta__card h2 { margin: 0; font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; letter-spacing: -.025em; color: #FFFFFF; }
.dtd-cta__body { max-width: 42rem; margin: 24px auto 0; font-size: 1.125rem; line-height: 2rem; color: #E2E8F0; }
.dtd-cta__body p { margin: 0; }
.dtd-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 40px; }
.dtd-cta__primary, .dtd-cta__secondary {
  white-space: nowrap; border-radius: 6px; padding: 12px 20px;
  font-size: 1rem; line-height: 1.5rem; font-weight: 600; text-decoration: none;
  transition: background-color 120ms ease-out;
}
.dtd-cta__primary { background: #E0B81F; color: #000000; box-shadow: 0 1px 1px rgba(0, 0, 0, .05); }
.dtd-cta__primary:hover { background: rgba(224, 184, 31, .8); }
.dtd-cta__secondary { color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.dtd-cta__secondary:hover { background: rgba(255, 255, 255, .1); }
.dtd-cta a:focus-visible { outline: 2px solid #E0B81F; outline-offset: 3px; }