/* CheckMD look for the React sign-up/checkout app (8 Oct 2026).
   Loaded after the app's own CSS (see index.html), so the app matches the website: same font, navy and
   green colours, no stock photos of people, no template numbers. The app's source code is not needed. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/static/website/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
:root {
  --cm-font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tg-body-font-family: var(--cm-font);
  --tg-heading-font-family: var(--cm-font);
  --tg-primary-color: #34771a;
  --tg-secondary-color: #34771a;
  --tg-body-font-color: #46606f;
  --tg-paragraph-color: #46606f;
  --tg-heading-font-color: #0e2a3f;
  --tg-body-line-height: 1.65;
  --tg-section-background: #f5f9fa;
  --tg-section-background-two: #eaf2f6;
  --tg-blue: #0e2a3f;
  --tg-blue-two: #eaf2f6;
  --tg-blue-three: #0e2a3f;
  --tg-blue-four: #0e2a3f;
  --tg-blue-five: #0b2233;
  --tg-lavender-blue: #d6e3e9;
  --tg-alice-blue: #f5f9fa;
  --tg-alice-blue-two: #f5f9fa;
  --tg-alice-blue-three: #f5f9fa;
  --tg-gray-five: #eaf2f6;
  --tg-gray-six: #f5f9fa;
  --bs-body-font-family: var(--cm-font);
}
body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, .btn { font-family: var(--cm-font) !important; }
body { color: #46606f; }
h1, h2, h3, h4, h5, h6, .title { color: #0e2a3f; letter-spacing: -0.01em; }
a { transition: color .18s ease, background-color .18s ease; }

/* Buttons: one style, like the website */
.btn { background: #34771a !important; border: 0 !important; border-radius: 999px !important; color: #fff !important;
       text-transform: none !important; letter-spacing: 0 !important; font-weight: 700 !important; box-shadow: none !important;
       padding: 12px 26px !important; transition: background-color .18s ease, transform .18s ease !important; }
.btn:hover, .btn:focus-visible { background: #2a6214 !important; transform: translateY(-1px); }
.btn::before, .btn::after { display: none !important; }
.btn.text-white { background: #0e2a3f !important; }
.btn.text-white:hover { background: #163b56 !important; }

/* Header */
.menu-area, .header-style-two .menu-area { background: #fff !important; border-bottom: 1px solid #d6e3e9; box-shadow: none !important; }
.navigation > li > a { color: #0e2a3f !important; font-weight: 600 !important; text-transform: none !important; }
.navigation > li > a:hover { color: #34771a !important; }
.header-btn .btn { padding: 9px 20px !important; font-size: 15px !important; }

/* Page banner: no photo, quiet pattern in the website's colours */
.breadcrumb-area, .breadcrumb-bg {
  background-color: #eaf2f6 !important;
  background-image: radial-gradient(#cfe0e8 1.6px, transparent 2px) !important;
  background-size: 22px 22px !important; padding: 56px 0 !important; border-bottom: 1px solid #d6e3e9;
}
.breadcrumb-area::before, .breadcrumb-area::after, .breadcrumb-bg::before, .breadcrumb-bg::after { display: none !important; }
.breadcrumb-content .title { color: #0e2a3f !important; font-weight: 800 !important; }
.breadcrumb-item, .breadcrumb-item a, .breadcrumb-item.active, .breadcrumb-item + .breadcrumb-item::before { color: #46606f !important; }

/* Sign-up form: the cartoon "JOIN US" picture is left out; the form gets the full width, as a clean card */
.row.p-4 > .col:has(img[src*="joinus"]), img[src*="joinus"] { display: none !important; }
.row.p-4:has(img[src*="joinus"]) { justify-content: center; }
.row.p-4:has(img[src*="joinus"]) > [class*="col"]:not(:has(img[src*="joinus"])) { flex: 0 0 auto; width: 100%; max-width: 860px; }
form input, form select, form textarea, .form-control, .form-select {
  border: 1px solid #c9d8df !important; border-radius: 10px !important; color: #0e2a3f !important; min-height: 46px; background: #fff !important; }
form input:focus, form select:focus, form textarea:focus, .form-control:focus, .form-select:focus {
  border-color: #34771a !important; box-shadow: 0 0 0 3px rgba(52, 119, 26, .18) !important; outline: 0; }
h3.fw-bold { color: #0e2a3f !important; }
.shadow, .card { box-shadow: 0 14px 34px rgba(14, 42, 63, .08) !important; border: 1px solid #d6e3e9 !important; border-radius: 18px !important; }

/* Checkout steps (Choose a package / Customer information / Review) */
.stepsbg { background: #0e2a3f !important; border-radius: 16px 16px 0 0 !important; }

/* Template sections with made-up numbers ("8484+ Satisfied Clients" …) are never shown */
.counter-area-two, .counter-area, .counter-item, .odometer { display: none !important; }

/* Footer: solid navy like the website; placeholder links (social "#", privacy/terms) hidden */
.footer-area, .footer-bg { background: #0e2a3f !important; background-image: none !important; }
.footer-area, .footer-area p, .footer-area li, .footer-area a, .footer-area .title, .footer-area h4 { color: #dbe6ec !important; }
.footer-area .title, .footer-area h4 { color: #fff !important; font-weight: 700 !important; }
.footer-area a:hover { color: #fff !important; text-decoration: underline; }
.footer-social-menu, .footer-bottom-menu { display: none !important; }
.footer-contact li:has(a[href="tel:"]), a[href="tel:"] { display: none !important; }
.footer-top { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer-logo-area { border-bottom-color: rgba(255, 255, 255, .12) !important; }
.footer-bottom { background: #0b2233 !important; }
.footer-newsletter input { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .25) !important; color: #fff !important; }
.footer-newsletter input::placeholder { color: #9fb4c0 !important; }

/* Back-to-top button */
.scroll-top { background: #34771a !important; border-radius: 12px !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Submit-type inputs (checkout "Next" etc.) look like the other buttons */
input.checkoutinput, form input[type="submit"], form input[type="button"], input[type="submit"], input[type="button"] {
  background: #34771a !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
  font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; min-height: 48px; }
input.checkoutinput:hover, input[type="submit"]:hover, input[type="button"]:hover { background: #2a6214 !important; }
.bg-light { background: #f5f9fa !important; border-radius: 0 0 16px 16px; }

/* Provider details: no photos or names (like "Find a provider" on the website) */
.team-details-img img, .related-member-wrap { display: none !important; }
.team-details-img { border: 1px solid #d6e3e9; border-radius: 18px; overflow: hidden; background: #fff; }
.team-details-img::before { content: ""; display: block; height: 210px;
  background: #eaf5e1 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334771a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M11 2v2' /> <path d='M5 2v2' /> <path d='M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1' /> <path d='M8 15a6 6 0 0 0 12 0v-3' /> <circle cx='20' cy='10' r='2' /></svg>") center / 84px no-repeat; }
.team-details-info .title, .team-details-info .info-list { display: none !important; }
.team-details-info::before { content: "Licensed provider"; display: block; font-weight: 800; font-size: 1.25rem; color: #0e2a3f; }
.team-details-info::after { content: "Video or phone visits"; display: block; margin-top: .25rem; color: #46606f; }
.team-details-info { padding: 22px 24px !important; }

/* Phones: forms use the full width, less padding */
@media (max-width: 767px) {
  .p-5 { padding: 1.25rem !important; }
  .p-4 { padding: 1rem !important; }
  .w-75 { width: 100% !important; }
  .row.p-4 { padding: .75rem 0 !important; margin-left: 0; margin-right: 0; }
  .row.p-4 > [class*="col"] { padding-left: .5rem; padding-right: .5rem; }
  h3.fw-bold { font-size: 1.5rem !important; padding: 1rem 0 .5rem !important; }
  .breadcrumb-area, .breadcrumb-bg { padding: 36px 0 !important; }
}

/* With the website's header and footer in place (html.cm-chrome), the app's own are hidden */
html.cm-chrome .header-style-two, html.cm-chrome header.header-style-two, html.cm-chrome #header-fixed-height,
html.cm-chrome .footer-area, html.cm-chrome .scroll-top { display: none !important; }

/* One page width for every sign-up/checkout page, like the website (72rem), centred */
/* Same width and side space as the website header (site.css .wrap), so page content lines up with the logo. */
.container { max-width: 72rem !important; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(1rem, 4vw, 2.5rem) !important; padding-right: clamp(1rem, 4vw, 2.5rem) !important; }
.container.w-75 { width: 100% !important; max-width: 62rem !important; }
html.cm-chrome #root header, html.cm-chrome #root .footer-area { display: none !important; }

/* Page heading for checkout (added by checkmd-shell.v2.js), like the website's page headers */
.cm-pagehead { background: #eaf2f6; background-image: radial-gradient(#cfe0e8 1.6px, transparent 2px); background-size: 22px 22px;
  border-bottom: 1px solid #d6e3e9; padding: 48px 0 44px; }
.cm-pagehead__in { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.cm-pagehead h1 { font: 800 clamp(2rem, 1.4rem + 2vw, 2.9rem)/1.1 var(--cm-font); color: #0e2a3f; letter-spacing: -0.02em; margin: .4rem 0 .6rem; }
.cm-pagehead p { color: #46606f; font-size: 1.1rem; max-width: 40rem; margin: 0; }
.cm-pagehead .cm-crumbs { font-size: .9rem; }
.cm-pagehead .cm-crumbs a { color: #46606f; }
html.cm-chrome #root > div > main, html.cm-chrome #root main { padding-top: 0; }
@media (max-width: 767px) { .cm-pagehead { padding: 28px 0; } }
