@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');


* ==========================================
   GLOBAL STYLES
   ========================================== */

/* Remove forced all-caps */
* {
  text-transform: none !important;
  box-sizing: border-box;
}

/* Global font and body text */
body {
  margin: 0;
  font-family: "Rethink Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #000000;
  background: #ffffff;
}

/* Headings */
h1, h2, h4, h5, h6 {
  color: #1d1c6f;
  font-family: "Rethink Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
/* === H3 as Eyebrow Text === */
h3,
.wa-content h3,
.gadget h3 {
  font-family: "Rethink Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;            /* smaller for eyebrow */
  font-weight: 700;            /* bold for emphasis */
  letter-spacing: 0.08em;      /* subtle tracking for a refined look */
  text-transform: uppercase;   /* typical for eyebrow headers */
  color: #00c6d1;              /* your aqua brand color */
  margin-bottom: 8px;          /* slight spacing before main headline */
  display: block;
  line-height: 1.2;
}
.gradient-eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #3836d6, #00c6d1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
  display: block;
  line-height: 1.2;
}

/* Paragraphs, lists, and general text */
p, li, span, a, div, input, button {
  color: #000000;
  font-family: "Rethink Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}



/* ==========================================
   FOOTER LINKS
   ========================================== */
.footer-links-white a:link,
.footer-links-white a:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}

.footer-links-white a:hover,
.footer-links-white a:focus,
.footer-links-white a:active {
  color: #cccccc !important;
  text-decoration: underline !important;
}

/* ==========================================
   BUTTONS
   ========================================== */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.button-pill-outline,
.button-pill-gradient {
  display: inline-block;
  padding: 10px 10px;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 80px;
  font-family: "Rethink Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Outline button */
.button-pill-outline {
  border: 2px solid #1d1c6f;
  background: transparent;
  color: #1d1c6f;
}
.button-pill-outline:hover {
  background: #1d1c6f;
  color: #ffffff;
}

/* Gradient button */
.button-pill-gradient {
  border: 2px transparent;
  background: linear-gradient(60deg, #3836d6, #00d44c);
  color: #ffffff !important;
}
.button-pill-gradient:hover {
  opacity: 0.75;
  color: #ffffff !important;
}
/* ==========================================
   GRADIENT EYEBROW
   ========================================== */
.gradient-eyebrow {
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(90deg, #3836d6, #00c6d1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================
   TEAM CARDS
   ========================================== */
:root {
  --card-w: 300px;
  --radius: 18px;
  --shadow: 0 6px 24px rgba(0,0,0,.06);
  --ink: #1d1c6f;
  --muted: #475569;
  --accent: #1d1c6f;
  --border: #1d1c6f;
  --border-hover: #2a2891;
  --surface: #ffffff;
}

.team {
  padding: clamp(24px, 4vw, 48px);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 3vw, 28px);
  justify-items: center;
}

.person {
  width: min(var(--card-w), 100%);
  display: grid;
  gap: 12px;
}

/* Flip card */
.card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  perspective: 1200px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 0;
  cursor: pointer;
  outline: none;
}
.card:focus-visible {
  box-shadow: 0 0 0 3px rgba(29,28,111,.25), var(--shadow);
}

.card-face {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--radius) - 1px);
  overflow: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}

/* Front */
.card-front {
  display: grid;
  place-items: end;
}
.card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  clip-path: circle(50% at 50% 45%);
}
.name-badge {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,.55) 100%);
}
.name {
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
}

/* Back */
.card-back {
  background: var(--surface);
  padding: 18px 18px 14px;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-back h4 {
  margin: 0 0 2px 0;
  color: var(--ink);
  font-weight: 700;
  font-size: 1rem;
}
.card-back p, .card-back li {
  color: #000000;
  font-weight: 400;
  font-size: .96rem;
  line-height: 1.5;
}
.card-back ul {
  margin: 0 0 6px 18px;
}
.card-back .hint {
  margin-top: auto;
  font-size: .8rem;
  opacity: .7;
}

/* Hover flip */
.card:hover .card-front { transform: rotateY(180deg); }
.card:hover .card-back { transform: rotateY(360deg); }
.card.is-flipped .card-front { transform: rotateY(180deg); }
.card.is-flipped .card-back { transform: rotateY(360deg); }

/* Hover lift */
.card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
}

/* Meta */
.meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.title {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
}
.linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  font-weight: 600;
  font-size: .92rem;
  line-height: 1;
  transition: background .2s ease, color .2s ease;
}
.linkedin:hover {
  background: var(--ink);
  color: #ffffff;
}

/* Mobile */
@media (max-width: 380px) {
  .meta {
    flex-direction: column;
    align-items: stretch;
  }
}
/* FINAL OVERRIDES: load last */

/* Normalize forced caps on common header/nav wrappers */
header, .wa-header, .wa-nav, .wa-content, .gadget, .gadget-content,
#idMainContent, .PageContent, .Section, .Content {
  text-transform: none !important;
}

/* Headings: all except h3 use brand blue */
.wa-content :where(h1, h2, h4, h5, h6),
.gadget :where(h1, h2, h4, h5, h6),
:where(h1, h2, h4, h5, h6) {
  color: #1d1c6f !important;
  font-family: "Rethink Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 700; /* adjust if you prefer */
}

/* H3 uses accent blue */
.wa-content h3, .gadget h3, h3 {
  color: #0095d2 !important;
  font-family: "Rethink Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Base text color + font */
.wa-content, .gadget, body, p, li, span, a, div {
  color: #000000 !important;
  font-family: "Rethink Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Guard against editor-injected inline colors on headings */
:where(h1, h2, h3, h4, h5, h6) [style*="color"] {
  color: inherit !important;
}

/* Force H3 to brand aqua */
h3,
.wa-content h3,
.gadget h3 {
  color: #00c6d1 !important;
  font-family: "Rethink Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* ============================
   LINKS — FINAL (place last)
   ============================ */

/* Keep most links black, but exclude our styled variants */
.wa-content a:not(.gradient-link):not(.link-solid),
.gadget a:not(.gradient-link):not(.link-solid),
a:not(.gradient-link):not(.link-solid) {
  color: #000;
}

/* ---- Option 1: SOLID brand link (with arrow + animation) ---- */
a.link-solid {
  display: inline-flex;
  align-items: center;
  gap: 8px;                          /* space before the arrow */
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  color: #3836d6;
  transition: color .25s ease, background-size .25s ease, transform .25s ease;

  /* animated underline */
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
}
a.link-solid::after {
  content: "→";
  transition: transform .25s ease;
  color: inherit;                    /* arrow matches text color */
}
a.link-solid:hover {
  color: #1d1c6f;                    /* darker on hover */
  background-size: 100% 2px;         /* underline animates in */
}
a.link-solid:hover::after {
  transform: translateX(4px);        /* arrow slides on hover */
}
a.link-solid:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Option 2: GRADIENT link (with arrow + animation) ---- */
a.gradient-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;

  /* force gradient text over any global link color */
  background: linear-gradient(90deg, #3836d6, #00c6d1) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;

  transition: all .25s ease;
}
a.gradient-link::after {
  content: "→";
  transition: transform .25s ease;
  background: linear-gradient(90deg, #3836d6, #00c6d1) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
a.gradient-link:hover::after {
  transform: translateX(4px);
}

/* --- Team names: force brand blue and normal casing --- */
.profile-card h3,
.modal-header h3 {
  color: #1d1c6f !important;     /* or: color: var(--ink) !important; */
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

/* --- LinkedIn button: keep text white in all states --- */
a.linkedin-btn,
a.linkedin-btn:link,
a.linkedin-btn:visited,
a.linkedin-btn:hover,
a.linkedin-btn:active {
  color: #ffffff !important;
}

/* If the editor injected spans inside the button, inherit white */
.linkedin-btn * {
  color: inherit !important;
}

/* ==========================================
   SOLID CTA LINK — FORCE BRAND BLUE + ARROW
   (place LAST in your CSS)
   ========================================== */

/* win inside WA wrappers + all link states */
.wa-content a.link-solid,
.gadget a.link-solid,
a.link-solid,
.wa-content a.link-solid:link,
.wa-content a.link-solid:visited,
.gadget a.link-solid:link,
.gadget a.link-solid:visited,
a.link-solid:link,
a.link-solid:visited {
  /* kill any gradient/transparent text leftovers */
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;

  color: #3836d6 !important;         /* brand blue */
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;

  /* animated underline */
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: color .25s ease, background-size .25s ease, transform .25s ease;
}

/* arrow */
a.link-solid::after {
  content: "→";
  color: inherit;
  transition: transform .25s ease;
}

/* hover/focus states */
a.link-solid:hover,
a.link-solid:focus {
  color: #1d1c6f !important;          /* darker brand blue */
  -webkit-text-fill-color: currentColor !important;
  background-size: 100% 2px;          /* underline animates in */
}
a.link-solid:hover::after,
a.link-solid:focus::after {
  transform: translateX(4px);
}

/* if editor injected colored spans inside the link, inherit the link color */
a.link-solid * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  background: none !important;
}

/* SAFETY: if a link accidentally has both classes, force solid look */
a.link-solid.gradient-link {
  background: none !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: #3836d6 !important;
}
/* ============================
   FAQ accordion overrides
   ============================ */

/* If anything upstream set center alignment, reset it here */
.container { text-align: left !important; }

/* Make the accordion borders visible on dark backgrounds */
.accordion {
  border-color: rgba(255,255,255,.25) !important;
}
.item + .item {
  border-top-color: rgba(255,255,255,.25) !important;
}

/* Eyebrow/question button */
.trigger {
  text-align: left !important;
  color: #ffffff !important;
  font-size: 18px !important;           /* slightly larger */
  font-weight: 700;
  letter-spacing: 0.02em;
  background: transparent !important;
}
.trigger .chev { color: inherit !important; }  /* keep chevron white */

/* Answer panel */
.panel {
  text-align: left !important;
  color: #ffffff !important;
  font-size: 17px !important;           /* slightly larger body */
  line-height: 1.7 !important;
}
.panel p,
.panel li,
.panel strong,
.panel em { color: inherit !important; }

/* Links inside answers: keep them white + clearly clickable */
.panel a {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Muted helper text variant on dark */
.panel .muted {
  color: rgba(255,255,255,.85) !important;
  font-style: italic;
}

/* Optional: make section headings white too (uncomment if desired) */
/*
.section > h2 {
  color: #ffffff !important;
}
*/
/* Keep Q text white/left, no background, arrow always visible */
.trigger {
  background: transparent !important;
  color: #ffffff !important;
  text-align: left !important;
}

/* Replace the text glyph with a CSS-drawn chevron so it never disappears */
.trigger .chev {
  font-size: 0;                 /* hide the "›" character */
  width: 14px;
  height: 14px;
  justify-self: end;            /* stays on the right in your grid */
}

.trigger .chev::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;  /* uses the white from .trigger */
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);             /* collapsed state */
  transition: transform .2s ease;
}

/* Rotate chevron when open */
.trigger[aria-expanded="true"] .chev::before {
  transform: rotate(45deg);
}
/* ============================
   FAQ — layout + arrow + colors
   ============================ */

/* Force left alignment and switch grid → flex so arrow sits next to text */
#faq .trigger {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  text-align: left !important;
  background: transparent !important;

  /* neutralize old grid settings */
  grid-template-columns: unset !important;
}

/* Build a CSS chevron that always inherits the current text color */
#faq .chev {
  font-size: 0;               /* hide the literal “›” */
  width: 14px; height: 14px;
  flex: 0 0 14px;             /* keeps it beside the text */
}
#faq .chev::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);                /* collapsed */
  transition: transform .2s ease;
}
#faq .trigger[aria-expanded="true"] .chev::before {
  transform: rotate(45deg);                 /* expanded */
}

/* Answers: readable, left-aligned, slightly larger */
#faq .panel {
  text-align: left !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

/* Borders for the accordion */
#faq .accordion { border-width: 1px; border-style: solid; }
#faq .item + .item { border-top-width: 1px; border-top-style: solid; }

/* ---------- LIGHT MODE (on white/bright backgrounds) ---------- */
#faq.faq--light .trigger { color: #1d1c6f !important; }      /* question text + arrow = brand blue */
#faq.faq--light .panel   { color: #111827 !important; }      /* answers = dark gray/black */
#faq.faq--light .panel a { color: #1d1c6f !important; text-decoration: underline; }
#faq.faq--light .accordion,
#faq.faq--light .item + .item { border-color: #e6e9ef !important; }

/* ---------- DARK MODE (on dark/hero backgrounds) ---------- */
#faq.faq--dark .trigger  { color: #ffffff !important; }      /* question text + arrow = white */
#faq.faq--dark .panel    { color: #ffffff !important; }      /* answers = white */
#faq.faq--dark .panel a  { color: #ffffff !important; text-decoration: underline; }
#faq.faq--dark .accordion,
#faq.faq--dark .item + .item { border-color: rgba(255,255,255,.25) !important; }


  /* 4) Neutralize the global “make everything black” rule for nav on mobile */
  .waNavigationContainer a,
  .wa-MobilePanel a,
  .WaGadgetMenuHorizontal a,
  .WaGadgetMenuHorizontal .menuIcon {
    -webkit-text-fill-color: currentColor !important;
    color: #ffffff !important;
  }
}
/* --- Termly Consent Preferences link --- */
a.termly-display-preferences {
  display: block;              /* keeps it on its own line, like now */
  text-align: center;
  font-size: 13px;             /* smaller, subtler */
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);  /* soft gray instead of black */
  text-decoration: none;
  margin-top: 6px;
  margin-bottom: 4px;
  transition: color 0.15s ease, opacity 0.15s ease;
}

/* remove the inline paragraph centering Termly adds */
a.termly-display-preferences p {
  margin: 0 !important;
  text-align: inherit !important;
}

/* Hover: slight emphasis but still restrained */
a.termly-display-preferences:hover {
  color: rgba(0, 0, 0, 0.65);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Desktop: make it even quieter */
@media (min-width: 901px) {
  a.termly-display-preferences {
    opacity: 0.55;
    font-size: 12px;
  }
}

/* Mobile: slightly larger and more readable */
@media (max-width: 900px) {
  a.termly-display-preferences {
    opacity: 0.75;
    font-size: 14px;
  }
}
/* Make the Termly link align with the page container & logo */
body > a.termly-display-preferences {
  display: block;
  /* match the page container’s centering */
  max-width: 1200px;           /* ← set this to your .container_12 max-width */
  margin: 6px auto 0;          /* centers the block like the header container */
  padding-left: 24px;          /* ← same left padding as your logo gadget */
  text-align: left;            /* left-align text */
  
  /* quiet styling */
  color: rgba(0,0,0,.45);
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  opacity: .6;
  transition: color .15s ease, opacity .15s ease, text-decoration-color .15s ease;
}

/* neutralize Termly’s injected <p> */
body > a.termly-display-preferences p {
  margin: 0 !important;
  display: inline !important;
  text-align: inherit !important;
}

/* hover/focus: still subtle */
body > a.termly-display-preferences:hover,
body > a.termly-display-preferences:focus {
  opacity: .85;
  color: rgba(0,0,0,.65);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* mobile: keep legible and align to small gutters */
@media (max-width: 900px) {
  body > a.termly-display-preferences {
    max-width: none;           /* full width layout on phones */
    margin-left: 0;
    margin-right: 0;
    padding-left: 16px;        /* small gutter */
    font-size: 14px;
    opacity: .75;
  }
}

/* remove author name from blog */
.WaGadgetBlog .boxBodyInfoOuterContainer h5 .postedByLink{
display:none;
}
.WaGadgetBlog .boxBodyInfoOuterContainer h5 .postedByLabel{
display:none;
}