/* =====================================================================
   DMARCER brand overrides on top of the GoSaaS theme (style.css).
   The template is already green-accented (var --accent-color); we only
   nudge it to the DMARCER brand green + a few brand touches. Loaded AFTER
   style.css so these win.
   ===================================================================== */
:root {
  --accent-color: #4f9d18;   /* DMARCER brand green (was GoSaaS #00CC61) */
  --purple-color: #4f9d18;   /* template uses cs_purple_* aliased to accent */
  --dmarcer-lime: #a3cf3a;   /* bright logo lime — highlights */
  --dmarcer-ink:  #18222D;   /* app header bar / deep ink */
}

/* Brand logo in the header / footer */
.cs_site_branding img { height: 34px; width: auto; }
.cs_footer .cs_brand img,
.cs_footer_widget .cs_brand img { height: 30px; width: auto; }

/* Keep the menu bar pinned & visible whenever the page is scrolled. The GoSaaS theme ships a
   "smart" header that hides on scroll-down (top:-110px; opacity:0) and only reveals on scroll-up;
   we override it so the nav stays on screen at all times. */
.cs_gescout_sticky {
  top: 0 !important;
  opacity: 1 !important;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.10);
}
.cs_gescout_sticky hr { display: none; }

/* =====================================================================
   (#website) Inner-page hero: abstract brand wash fading bottom-left to
   top-right across the band, plus a faint dot-grid texture.
   ===================================================================== */
.cs_page_hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(35deg, rgba(79,157,24,.10) 0%, rgba(163,207,58,.06) 34%, rgba(246,243,254,0) 60%),
    var(--gray-color);
}
.cs_page_hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(42% 65% at 4% 100%, rgba(79,157,24,.22), transparent 70%),
    radial-gradient(36% 55% at 99% 2%, rgba(163,207,58,.16), transparent 72%);
}
.cs_page_hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%234f9d18' fill-opacity='0.28'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(35deg, #000 0%, rgba(0,0,0,.35) 40%, transparent 66%);
          mask-image: linear-gradient(35deg, #000 0%, rgba(0,0,0,.35) 40%, transparent 66%);
}
.cs_page_hero .container { position: relative; z-index: 1; }

/* =====================================================================
   (#website) Domain checker — its OWN identity, distinct from the dark-ink
   CTAs/callouts, used consistently wherever the checker appears.
   ===================================================================== */
.dmc-checker {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: clamp(34px, 5vw, 58px) clamp(26px, 4vw, 50px);
  color: #fff;
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(163,207,58,.30), transparent 55%),
    linear-gradient(135deg, #15331a 0%, #1f5226 46%, #2f7a36 100%);
  box-shadow: 0 30px 70px -32px rgba(31,82,38,.65);
}
/* faint concentric "radar/scan" rings, right side */
.dmc-checker::after {
  content: "";
  position: absolute;
  right: -90px; top: 50%;
  width: 460px; height: 460px;
  transform: translateY(-50%);
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 0 37%, rgba(255,255,255,.07) 37% 37.6%, transparent 38%),
    radial-gradient(circle, transparent 0 57%, rgba(255,255,255,.055) 57% 57.5%, transparent 58%),
    radial-gradient(circle, transparent 0 77%, rgba(255,255,255,.04) 77% 77.4%, transparent 78%);
}
.dmc-checker > * { position: relative; z-index: 1; }
.dmc-checker_tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.14); color: #eafbe0;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; margin-bottom: 16px;
}
.dmc-checker_form { display: flex; gap: 12px; flex-wrap: wrap; background: rgba(255,255,255,.10); padding: 8px; border-radius: 16px; }
.dmc-checker_field {
  flex: 1 1 220px; min-width: 0;
  border: 0; border-radius: 10px; padding: 16px 18px;
  font-size: 1.05rem; background: #fff; color: var(--heading-color);
}
.dmc-checker_field:focus { outline: 2px solid var(--dmarcer-lime); outline-offset: 1px; }
.dmc-checker_btn {
  border: 0; border-radius: 10px; padding: 16px 26px;
  font-weight: 700; font-size: 1.02rem; cursor: pointer; white-space: nowrap;
  background: var(--dmarcer-lime); color: #15331a;
  transition: transform .15s ease, filter .15s ease;
}
.dmc-checker_btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.dmc-checker_btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* (#website) Spinner used in the check button + the results loading state. */
.dmc-spin {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-right: .5em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: dmc-spin .7s linear infinite;
}
.dmc-loading { display: flex; align-items: center; gap: 12px; color: var(--body-color); padding: 28px; }
.dmc-loading .dmc-spin { width: 1.6em; height: 1.6em; color: var(--accent-color); }
@keyframes dmc-spin { to { transform: rotate(360deg); } }

/* Primary CTA button in the header right cluster */
.cs_main_header_right { display: flex; align-items: center; gap: 16px; }
.cs_header_btns { display: flex; align-items: center; gap: 14px; }
.cs_header_btns .cs_text_btn { font-weight: 600; color: var(--heading-color); }
.cs_header_btns .cs_text_btn:hover { color: var(--accent-color); }

/* ---------------------------------------------------------------------
   Auth wheel impact graphic: email-security controls as glowing glass nodes
   orbiting the DMARCER hub on a deep gradient stage. Active control lit green.
   --------------------------------------------------------------------- */
.auth-wheel {
  position: relative; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 1 / 0.82;
  background: radial-gradient(closest-side at 50% 46%, rgba(79, 157, 24, .13), rgba(163, 207, 58, .05) 55%, transparent 72%);
}
.auth-wheel_aura {
  position: absolute; left: 50%; top: 47%; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(79, 157, 24, .22), transparent 66%); filter: blur(12px);
  z-index: 0; animation: aw-breathe 6s ease-in-out infinite;
}
.auth-wheel_spokes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.auth-wheel_spokes line { stroke: rgba(24, 34, 45, .10); stroke-width: .35; }
.auth-wheel_spokes line.on { stroke: rgba(79, 157, 24, .85); stroke-width: .7; }
.auth-wheel_ring {
  position: absolute; left: 6%; right: 6%; top: 23%; bottom: 23%; border-radius: 50%;
  border: 1.5px solid rgba(24, 34, 45, .10); z-index: 1;
}
.auth-wheel_ring--inner { left: 23%; right: 23%; top: 35%; bottom: 35%; border-color: rgba(79, 157, 24, .25); }
.auth-wheel_hub {
  position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%);
  width: 78px; height: 78px; border-radius: 50%; z-index: 3; display: grid; place-items: center;
  background: linear-gradient(160deg, #21303d, #18222d); border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 16px 34px rgba(24, 34, 45, .28), 0 0 0 6px rgba(79, 157, 24, .10), 0 0 28px rgba(79, 157, 24, .3);
}
.auth-wheel_hub span { font-family: 'Outfit', 'Urbanist', sans-serif; font-weight: 800; font-size: 38px; line-height: 1; color: var(--dmarcer-lime); }
.auth-wheel_node { position: absolute; transform: translate(-50%, -50%); z-index: 2; text-decoration: none; }
.auth-wheel_float { display: inline-block; animation: aw-float 5s ease-in-out infinite; animation-delay: var(--awd, 0s); }
.auth-wheel_chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px;
  font-weight: 600; font-size: 13.5px; white-space: nowrap; color: var(--heading-color);
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(24, 34, 45, .08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(24, 34, 45, .12), inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.auth-wheel_dot { width: 8px; height: 8px; border-radius: 50%; background: #c3c8cf; }
.auth-wheel_node:hover .auth-wheel_chip { transform: scale(1.06); border-color: rgba(79, 157, 24, .5); }
.auth-wheel_node.is-on .auth-wheel_chip {
  color: #fff; font-weight: 700; transform: scale(1.16);
  background: linear-gradient(150deg, rgba(89, 170, 28, .96), rgba(60, 130, 18, .96));
  border-color: rgba(163, 207, 58, .85);
  box-shadow: 0 16px 36px rgba(79, 157, 24, .55), 0 0 26px rgba(79, 157, 24, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
  animation: aw-pulse 2.6s ease-in-out infinite;
}
.auth-wheel_node.is-on .auth-wheel_dot { background: var(--dmarcer-lime); box-shadow: 0 0 10px var(--dmarcer-lime); }
@keyframes aw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes aw-breathe { 0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes aw-pulse {
  0%, 100% { box-shadow: 0 16px 36px rgba(79, 157, 24, .55), 0 0 22px rgba(79, 157, 24, .5), inset 0 1px 0 rgba(255, 255, 255, .35); }
  50% { box-shadow: 0 18px 42px rgba(79, 157, 24, .7), 0 0 42px rgba(79, 157, 24, .85), inset 0 1px 0 rgba(255, 255, 255, .4); }
}
@media (prefers-reduced-motion: reduce) { .auth-wheel_float, .auth-wheel_aura, .auth-wheel_node.is-on .auth-wheel_chip { animation: none; } }

/* ---------------------------------------------------------------------
   Hero shield: frosted glass shield + glowing green tick (domain check etc.).
   Shares the airy, green-glow language of the auth wheel. Reuses aw-float/aw-breathe.
   --------------------------------------------------------------------- */
.hero-graphic { position: relative; width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 1 / 0.92; display: grid; place-items: center; }
.hero-graphic_aura {
  position: absolute; left: 50%; top: 48%; width: 64%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(79, 157, 24, .22), transparent 66%); filter: blur(14px);
  animation: aw-breathe 6s ease-in-out infinite;
}
.hero-shield_svg {
  position: relative; width: 58%; max-width: 250px;
  filter: drop-shadow(0 24px 40px rgba(24, 34, 45, .18)); animation: aw-float 6s ease-in-out infinite;
}
.hero-shield_body { fill: rgba(255, 255, 255, .92); stroke: rgba(79, 157, 24, .45); stroke-width: 2.5; }
.hero-shield_check { stroke: var(--accent-color); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(79, 157, 24, .5)); }
.hero-shield_dot {
  position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(24, 34, 45, .08); box-shadow: 0 8px 18px rgba(24, 34, 45, .12);
  animation: aw-float 5s ease-in-out infinite;
}
.hero-shield_dot--1 { width: 26px; height: 26px; left: 11%; top: 26%; }
.hero-shield_dot--2 { width: 17px; height: 17px; right: 14%; top: 19%; animation-delay: .8s; }
.hero-shield_dot--3 { width: 22px; height: 22px; right: 17%; bottom: 17%; animation-delay: 1.4s; }
@media (prefers-reduced-motion: reduce) { .hero-shield_svg, .hero-graphic_aura, .hero-shield_dot { animation: none; } }

/* Hero chart: frosted glass pane with rising glass bars + a green trend line. */
.hero-chart_panel {
  position: relative; width: 80%; max-width: 320px; aspect-ratio: 1.3 / 1; padding: 22px; gap: 9%;
  display: flex; align-items: flex-end; border-radius: 18px;
  background: rgba(255, 255, 255, .86); border: 1px solid rgba(24, 34, 45, .08);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 26px 50px -24px rgba(24, 34, 45, .32), inset 0 1px 0 rgba(255, 255, 255, .85);
  animation: aw-float 6s ease-in-out infinite;
}
.hero-chart_bar { flex: 1; height: var(--h, 50%); border-radius: 6px 6px 3px 3px; background: #dde3e8; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.hero-chart_bar.is-on { background: linear-gradient(180deg, var(--dmarcer-lime), var(--accent-color)); box-shadow: 0 0 16px rgba(79, 157, 24, .5); }
.hero-chart_line { position: absolute; left: 22px; right: 22px; top: 22px; bottom: 22px; width: auto; height: auto; overflow: visible; }
.hero-chart_line polyline { stroke: var(--accent-color); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(79, 157, 24, .5)); }
.hero-chart_line circle { fill: var(--accent-color); filter: drop-shadow(0 0 4px rgba(79, 157, 24, .7)); }

/* Hero network: glass node mesh around an ink hub, one node lit green. */
.hero-net_links { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-net_links line { stroke: rgba(24, 34, 45, .14); stroke-width: .5; }
.hero-net_links line.on { stroke: rgba(79, 157, 24, .7); stroke-width: .8; }
.hero-net_node {
  position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(24, 34, 45, .08);
  box-shadow: 0 10px 22px rgba(24, 34, 45, .14), inset 0 1px 0 rgba(255, 255, 255, .8); z-index: 2;
}
.hero-net_node.hero-net_sm { width: 20px; height: 20px; }
.hero-net_hub {
  left: 50%; top: 52%; width: 56px; height: 56px;
  background: linear-gradient(160deg, #21303d, #18222d); border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 14px 30px rgba(24, 34, 45, .3), 0 0 0 6px rgba(79, 157, 24, .10), 0 0 24px rgba(79, 157, 24, .3); z-index: 3;
}
.hero-net_node.is-on {
  background: linear-gradient(150deg, rgba(89, 170, 28, .98), rgba(60, 130, 18, .98)); border-color: rgba(163, 207, 58, .85);
  box-shadow: 0 12px 26px rgba(79, 157, 24, .45), 0 0 20px rgba(79, 157, 24, .5); animation: aw-pulse 2.6s ease-in-out infinite;
}

/* Hero dashboard: single frosted pane with status rows (single pane of glass). */
.hero-dash_pane {
  position: relative; width: 84%; max-width: 330px; padding: 22px; border-radius: 18px;
  display: flex; flex-direction: column; gap: 15px;
  background: rgba(255, 255, 255, .88); border: 1px solid rgba(24, 34, 45, .08);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 26px 50px -24px rgba(24, 34, 45, .32), inset 0 1px 0 rgba(255, 255, 255, .85);
  animation: aw-float 6s ease-in-out infinite;
}
.hero-dash_row { display: flex; align-items: center; gap: 12px; }
.hero-dash_dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.hero-dash_dot.is-ok { background: var(--accent-color); box-shadow: 0 0 8px rgba(79, 157, 24, .6); }
.hero-dash_dot.is-warn { background: #d99211; box-shadow: 0 0 8px rgba(217, 146, 17, .5); }
.hero-dash_bar { height: 9px; border-radius: 5px; width: var(--w, 50%); background: linear-gradient(90deg, #e3e8ec, #d2d8dd); }
.hero-dash_score { margin-left: auto; font-weight: 700; font-size: 14px; color: var(--heading-color); }

/* Hero stack: layered client panes. */
.hero-stack_pane {
  position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1.5 / 1; border-radius: 16px;
  background: rgba(255, 255, 255, .9); border: 1px solid rgba(24, 34, 45, .08);
  box-shadow: 0 22px 46px -22px rgba(24, 34, 45, .35);
}
.hero-stack_pane--3 { transform: translate(-50%, -50%) translate(36px, -32px) rotate(7deg); opacity: .5; }
.hero-stack_pane--2 { transform: translate(-50%, -50%) translate(18px, -14px) rotate(3.5deg); opacity: .76; }
.hero-stack_pane--1 { transform: translate(-50%, -50%); padding: 20px; display: flex; flex-direction: column; }
.hero-stack_dot { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(150deg, var(--dmarcer-lime), var(--accent-color)); box-shadow: 0 0 16px rgba(79, 157, 24, .45); margin-bottom: 16px; }
.hero-stack_ln { height: 9px; border-radius: 5px; background: #e1e6ea; margin-bottom: 11px; }
.hero-stack_ln--sm { width: 56%; }

/* Hero gauge: donut gauge + score (insight / ranking). */
.hero-gauge_svg { width: 62%; max-width: 224px; animation: aw-float 6s ease-in-out infinite; }
.hero-gauge_track { stroke: rgba(24, 34, 45, .10); stroke-width: 9; }
.hero-gauge_arc { stroke: var(--accent-color); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 196 240; filter: drop-shadow(0 0 4px rgba(79, 157, 24, .5)); }
.hero-gauge_num { font-family: 'Outfit', 'Urbanist', sans-serif; font-weight: 800; font-size: 23px; fill: var(--heading-color); }
.hero-gauge_sub { font-size: 8px; font-weight: 600; fill: #8a929b; }

/* Hero tiers: three glass pricing cards, middle one popular/green. */
.hero-tiers_set { display: flex; align-items: flex-end; gap: 12px; width: 84%; max-width: 330px; animation: aw-float 6s ease-in-out infinite; }
.hero-tiers_card {
  flex: 1; padding: 16px 12px; border-radius: 14px; display: flex; flex-direction: column; gap: 9px;
  background: rgba(255, 255, 255, .9); border: 1px solid rgba(24, 34, 45, .08); box-shadow: 0 16px 34px -20px rgba(24, 34, 45, .3);
}
.hero-tiers_card.is-on { transform: translateY(-12px); background: linear-gradient(160deg, rgba(89, 170, 28, .96), rgba(60, 130, 18, .96)); border-color: rgba(163, 207, 58, .8); box-shadow: 0 18px 36px rgba(79, 157, 24, .4); }
.hero-tiers_price { height: 18px; width: 62%; border-radius: 5px; background: #dfe4e8; }
.hero-tiers_ln { height: 7px; border-radius: 4px; background: #e6eaee; }
.hero-tiers_ln--sm { width: 58%; }
.hero-tiers_card.is-on .hero-tiers_price { background: rgba(255, 255, 255, .92); }
.hero-tiers_card.is-on .hero-tiers_ln { background: rgba(255, 255, 255, .55); }

/* Hero tag: glass price tag + green tick (business pricing). */
.hero-tag_svg { width: 60%; max-width: 240px; animation: aw-float 6s ease-in-out infinite; filter: drop-shadow(0 22px 38px rgba(24, 34, 45, .18)); }
.hero-tag_body { fill: rgba(255, 255, 255, .92); stroke: rgba(79, 157, 24, .45); stroke-width: 2.5; stroke-linejoin: round; }
.hero-tag_hole { fill: none; stroke: rgba(79, 157, 24, .55); stroke-width: 2.5; }
.hero-tag_check { stroke: var(--accent-color); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(79, 157, 24, .5)); }

/* Hero message: glass speech bubble (contact). */
.hero-msg_svg { width: 64%; max-width: 246px; animation: aw-float 6s ease-in-out infinite; filter: drop-shadow(0 22px 38px rgba(24, 34, 45, .16)); }
.hero-msg_bubble { fill: rgba(255, 255, 255, .92); stroke: rgba(79, 157, 24, .4); stroke-width: 2.5; stroke-linejoin: round; }
.hero-msg_dot { fill: var(--accent-color); filter: drop-shadow(0 0 4px rgba(79, 157, 24, .55)); }
.hero-msg_ln { stroke: #cfd5da; stroke-width: 5; stroke-linecap: round; }
.hero-msg_ln--sm { stroke: #dde2e6; }

@media (prefers-reduced-motion: reduce) { .hero-dash_pane, .hero-gauge_svg, .hero-tiers_set, .hero-tag_svg, .hero-msg_svg { animation: none; } }

/* ---------------------------------------------------------------------
   Integration marketplace cards (For MSPs > Integrations).
   --------------------------------------------------------------------- */
.intg-card {
  height: 100%; background: #fff; border: 1px solid var(--border-color); border-radius: 16px;
  padding: 24px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.intg-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(24, 34, 45, .35); border-color: rgba(79, 157, 24, .4); }
.intg-card.is-soon { background: var(--gray-color); }
.intg-card_top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.intg-card_logo {
  width: 52px; height: 52px; border-radius: 12px; background: #fff; border: 1px solid var(--border-color);
  display: grid; place-items: center; overflow: hidden; flex: 0 0 auto;
}
.intg-card_logo img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 6px; }
.intg-card_logo span { font-weight: 800; color: var(--accent-color); font-size: 22px; }
.intg-card.is-soon .intg-card_logo { filter: grayscale(.55); opacity: .85; }
.intg-pill {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: #e7e9ec; color: #6b7480;
}
.intg-pill.is-live { background: rgba(79, 157, 24, .14); color: #3c7a12; }
.intg-pill.is-live::before { content: "\25CF"; margin-right: 5px; color: var(--accent-color); font-size: 9px; vertical-align: middle; }
.intg-card_name { font-size: 19px; margin: 0 0 6px; }
.intg-card_desc { font-size: 14px; color: #6b7480; margin: 0 0 10px; }
.intg-card_link { font-weight: 600; font-size: 14px; }