/* =============================================================================
   Decisionmaker – Brand + Typography overrides
   Applied after /assets/css/vendor/style.css
   Shared across all pages — previously duplicated in each page's inline <style>.
   ============================================================================= */

/* --- Brand color tokens -------------------------------------------------- */
:root {
  --bs-primary: #08739A;
  --bs-primary-rgb: 8, 115, 154;
}

/* --- Primary button / background / text --------------------------------- */
.btn-primary,
.bg-primary                   { background-color: #08739A !important; border-color: #08739A !important; }
.btn-primary:hover            { background-color: #065e7e !important; border-color: #065e7e !important; }
a.btn-primary                 { color: #fff !important; }
.btn-outline-primary          { color: #08739A !important; border-color: #08739A !important; }
.btn-outline-primary:hover    { background-color: #08739A !important; color: #fff !important; }
.text-primary                 { color: #08739A !important; }
.bg-pale-primary              { background-color: #e0f0f7 !important; }
.bullet-soft-primary::before  { background-color: rgba(8, 115, 154, .15) !important; }

/* --- Language switcher --------------------------------------------------- */
.lang-drop { font-size: .8rem; font-weight: 600; color: #555; background: transparent; border: none; padding: 2px 6px; }
.lang-drop:hover,
.lang-drop:focus { color: #333; box-shadow: none; background: transparent; }

/* --- Section background tint -------------------------------------------- */
.wrapper.bg-soft-primary { background-color: #F0F3F4 !important; }

/* --- Active nav link underline ------------------------------------------ */
.navbar-nav .nav-link.active { text-decoration: underline; text-underline-offset: 4px; }

/* --- Dark-orange Login button (header + mobile offcanvas) --------------- */
.btn-login-orange {
  background-color: #c45000;
  border: 1px solid #c45000;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.btn-login-orange:hover,
.btn-login-orange:focus {
  background-color: #a34300;
  border-color: #a34300;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(196, 80, 0, .28);
}
.btn-login-orange i {
  font-size: 1.1em;
  vertical-align: -1px;
}

/* --- Hero AI badge — orange outline pill (same size as hero secondary) - */
.btn-hero-ai {
  background-color: transparent;
  border: 2px solid #e8600a;
  color: #e8600a !important;
  font-weight: 600;
  letter-spacing: .02em;
}
.btn-hero-ai.btn-sm {
  font-size: .88rem;
  line-height: 1;
  letter-spacing: .03em;
  padding-top: .35rem !important;
  padding-bottom: .35rem !important;
}
.btn-hero-ai i {
  font-size: 1.35em;
  line-height: 1;
  color: #e8600a;
}

/* --- Header nav links — with icons, sized for desktop & mobile ---------- */
.navbar .navbar-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.dm-nav-icon {
  font-size: 1.15em;
  line-height: 1;
  opacity: .8;
}
.navbar .navbar-nav .nav-link.active .dm-nav-icon,
.navbar .navbar-nav .nav-link:hover  .dm-nav-icon { opacity: 1; }

/* Desktop header — slightly larger, no menu icons */
@media (min-width: 992px) {
  .navbar .navbar-nav .nav-link {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .01em;
    padding-left: .9rem;
    padding-right: .9rem;
  }
  .navbar .navbar-nav .nav-link .dm-nav-icon { display: none; }
}

/* Mobile offcanvas — bigger items, more spacing between them */
@media (max-width: 991.98px) {
  .offcanvas-nav .navbar-nav .nav-item + .nav-item { margin-top: .35rem; }
  .offcanvas-nav .navbar-nav .nav-link {
    font-size: 1.15rem;
    font-weight: 600;
    padding: .75rem .25rem;
    gap: .75rem;
  }
  .offcanvas-nav .dm-nav-icon {
    font-size: 1.35em;
    width: 1.4em;
    text-align: center;
  }
}

/* --- Round icon wrap (used in how-it-works and elsewhere) --------------- */
.feature-icon-wrap {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 115, 154, .1);
  flex-shrink: 0;
}

/* --- DM type scale (used in home and how-it-works) ---------------------- */
.dm-label       { font-size: .72rem;  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.dm-title       { font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: #1a1a1a; }
.dm-body        { font-size: 1rem;    line-height: 1.65; color: #555; }
.dm-body-sm     { font-size: .875rem; line-height: 1.6;  color: #666; }
.dm-caption     { font-size: .8rem;   line-height: 1.5; }
.dm-title-inv   { font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: #fff; }
.dm-body-inv    { font-size: 1rem;    line-height: 1.65; color: rgba(255, 255, 255, .72); }
.dm-body-sm-inv { font-size: .875rem; line-height: 1.6;  color: rgba(255, 255, 255, .55); }
.dm-card-headline { font-size: 1.2rem; font-weight: 700; line-height: 1.35; color: #fff; }

/* --- Hand-drawn circle highlight (two offset ellipses) ------------------ */
.red-swoosh,
.idea-swoosh {
  position: relative;
  display: inline-block;
  padding: .02em .16em .06em;
}
.red-swoosh::before,
.idea-swoosh::before {
  content: "";
  position: absolute;
  left: -.22em; right: -.22em; top: -.26em; bottom: -.2em;
  border-radius: 999px;
  transform: rotate(-6deg);
  opacity: .96;
  pointer-events: none;
}
.red-swoosh::after,
.idea-swoosh::after {
  content: "";
  position: absolute;
  left: -.18em; right: -.26em; top: -.2em; bottom: -.24em;
  border-radius: 999px;
  transform: rotate(5deg);
  pointer-events: none;
}
.red-swoosh::before  { border: 2px solid #dc2626; }
.red-swoosh::after   { border: 1.6px solid rgba(220, 38, 38, .78); }
.idea-swoosh::before { border: 2px solid #e8600a; }
.idea-swoosh::after  { border: 1.6px solid rgba(232, 96, 10, .78); }

/* =============================================================================
   Typography overrides
   ============================================================================= */

/* display-1 (hero / page titles): reduce from 2.6rem → 2rem at desktop */
.display-1 {
  font-size: calc(1.4rem + 0.8vw);
  line-height: 1.1;
}
@media (min-width: 1200px) {
  .display-1 { font-size: 2rem; }
}

/* display-5 (content sub-headings): reduce from 1.8rem → 1.4rem at desktop */
.display-5 {
  font-size: calc(1.175rem + 0.3vw);
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-5 { font-size: 1.4rem; }
}

/* =============================================================================
   Hero section — reduce top padding
   ============================================================================= */
@media (min-width: 768px) {
  .pt-md-14 { padding-top: 3rem !important; }
}

/* =============================================================================
   Mobile readability bump — slightly larger body/lead text on phones only
   ============================================================================= */
@media (max-width: 767.98px) {
  body { font-size: 1.05rem; }
  p    { line-height: 1.65; }
  .lead { font-size: 1.12rem; line-height: 1.55; }
  li   { font-size: 1.03rem; }
}

/* =============================================================================
   Screenshot zoom — badge (mobile only) + fullscreen lightbox
   ============================================================================= */
.dm-zoom-wrap {
  position: relative;
  display: block;
  cursor: zoom-in;
}
.dm-zoom-badge {
  position: absolute;
  bottom: .6rem;
  right: .6rem;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: .3rem .7rem;
  border-radius: 999px;
  pointer-events: none;
  display: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
@media (max-width: 767.98px) {
  .dm-zoom-badge { display: inline-block; }
}

.dm-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 1rem;
  animation: dmFadeIn .18s ease-out;
}
.dm-lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: .5rem;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
}
.dm-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  padding: .4rem .7rem;
  opacity: .85;
}
.dm-lightbox-close:hover { opacity: 1; }
body.dm-lightbox-open { overflow: hidden; }
@keyframes dmFadeIn { from { opacity: 0 } to { opacity: 1 } }

/* =============================================================================
   Cookie consent banner — discreet full-width strip at the bottom
   ============================================================================= */
.dm-cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1080;
  background: rgba(17, 24, 32, 0.96);
  color: #f1f3f5;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translateY(100%);
  transition: transform .28s ease-out;
  font-size: .82rem;
  line-height: 1.5;
}
.dm-cookie-banner.is-visible { transform: translateY(0); }
.dm-cookie-banner[hidden]    { display: none !important; }

.dm-cookie-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.dm-cookie-desc {
  flex: 1 1 320px;
  margin: 0;
  color: rgba(241, 243, 245, 0.9);
  font-size: .82rem;
  line-height: 1.5;
}
.dm-cookie-link {
  color: #7dcbef;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: .25rem;
}
.dm-cookie-link:hover { color: #a7e0f5; }

.dm-cookie-actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}
.dm-cookie-btn {
  font-size: .8rem;
  font-weight: 600;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.dm-cookie-btn-decline {
  background: transparent;
  color: rgba(241, 243, 245, 0.75);
  border-color: rgba(241, 243, 245, 0.25);
}
.dm-cookie-btn-decline:hover {
  color: #fff;
  border-color: rgba(241, 243, 245, 0.6);
}
.dm-cookie-btn-accept {
  background: #08739A;
  color: #fff;
  border-color: #08739A;
}
.dm-cookie-btn-accept:hover {
  background: #0a85b3;
  border-color: #0a85b3;
}

@media (max-width: 575.98px) {
  .dm-cookie-inner {
    padding: .75rem 1rem;
    gap: .75rem;
  }
  .dm-cookie-desc { font-size: .78rem; flex: 1 1 100%; }
  .dm-cookie-actions { width: 100%; justify-content: flex-end; }
  .dm-cookie-btn { flex: 1 1 auto; max-width: 50%; }
}